*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Inter", sans-serif;
}
button{
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
}
.crm-container{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px calc(100% - 300px);
}
.crm-body{
    width: 100%;
}
.aside-container{
    width: 100%;
    background: #131527;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    .crm-logo{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .aside-menu{
        margin-top: 28px;
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        width: 100%;
        .menuTitle{
            font-weight: 400;
            font-size: 12px;
            line-height: 15px;
            color: rgba(255, 255, 255, 0.5);
        }
        .menuLinks{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            margin-top: 20px;
            gap: 18px;
            .menuLink{
                width: 100%;
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 12px;
                background: rgba(255, 255, 255, 0.04);
                border-radius: 8px;
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
                color: #fff;
                img{
                    min-width: 24px;
                    width: 24px;
                    height: 24px;
                }

            }
            .active{
                background: #5D61EF;
            }
            .aside-settings{
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: start;
                transition: .3s ease-in-out;
                gap: 0;
                .asideSettingBtn{
                    cursor: pointer;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 12px;
                    background: rgba(255, 255, 255, 0.04);
                    border-radius: 8px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 20px;
                    color: #fff;
                    transition: .3s ease-in-out;
                    img{
                        min-width: 24px;
                        width: 24px;
                        height: 24px;
                    }
                    svg{
                        margin-left: auto;
                        transition: .3s ease-in-out;
                    }
                }
                .aside-settings-links{
                    width: 100%;
                    padding-left: 12px;
                    height: 0;
                    overflow: hidden;
                    transition: .3s ease-in-out;
                    .settings-links-inner{
                        width: 100%;
                        border-left: 2px solid #5D61EF;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 13px;
                        padding: 8px 0 8px 12px;
                        .aside-setting-link{
                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 14px;
                            line-height: 18px;
                            color: rgba(255, 255, 255, 0.8);
                            padding-bottom: 13px;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                            img{
                                min-width: 20px;
                                width: 20px;
                                height: 20px;
                            }
                            span{
                                display: block;
                                margin-left: auto;
                                width: 8px;
                                height: 8px;
                                border-radius: 10px;
                                min-width: 8px;
                                background: transparent;
                            }
                            &:last-child{
                                padding-bottom: 0;
                                border-bottom: none;
                            }
                        }
                        .activeSettingLink{
                            color: #fff;
                            span{
                                background: #5D61EF;
                            }
                        }   
                    }
                }
            }
            .activeSetting{
                gap: 16px;
                .asideSettingBtn{
                    background: #5D61EF;
                    svg{
                        transform: rotate(180deg);
                    }
                }
                .aside-settings-links{
                    height: 223.2px;
                    overflow: initial;
                }
            }
        }
    }
}
.header{
    width: 100%;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: end;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    .header-user{
        display: flex;
        align-items: center;
        gap: 12px;
        .header-user-body{
            display: flex;
            flex-direction: column;
            align-items: end;
            gap: 4px;
            p{
                font-weight: 500;
                font-size: 15px;
                line-height: 18px;
                text-align: right;
                color: #131527;
            }
            span{
                font-weight: 400;
                font-size: 14px;
                line-height: 17px;
                text-align: right;
                color: rgba(0, 0, 0, 0.5);
            }
        }
        .icon{
            width: 52px;
            min-width: 52px;
            height: 52px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #131527;
        }
    }
}
.dashboard-continer{
    margin: 40px 0;
    padding:0 40px;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
    }
    .dashboard-boxes-container{
        margin-top: 36px;
        width: 100%;
        padding: 28px 40px;
        border: 1px solid #F8F9FA;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0px 4px 20px 0px rgba(238, 238, 238, 0.5);
        .dashboard-boxes-title{
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: rgba(0, 0, 0, 0.5);
        }
        .dashboard-boxes{
            margin-top: 20px;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(5,1fr);
            gap: 28px;
            .dashboard-box{
                padding: 20px 20px 28px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                width: 100%;
                .icon{
                    width: 48px;
                    height: 48px;
                    min-width: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 100px;
                    img{
                        min-width: 24px;
                        width: 24px;
                        height: 24px;
                    }
                }
                span{
                    margin-top: 20px;
                    font-weight: 600;
                    font-size: 24px;
                    line-height: 30px;
                    color: #000;
                }
                p{
                    margin-top: 8px;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 17px;
                    color: #425166;
                }
                &:nth-child(5n+1){
                    background: #F3E8FF;
                    .icon{
                        background: #AD62FF;
                    }
                }
                &:nth-child(5n+2){
                    background: #DCFCE7;
                    .icon{
                        background: #3CD856;
                    }
                }
                &:nth-child(5n+3){
                    background: #FFF4DE;
                    .icon{
                        background: #FF947A;
                    }
                }
                &:nth-child(5n+4){
                    background: #FFE2E5;
                    .icon{
                        background: #FA5A7D;
                    }
                }
                &:nth-child(5n+5){
                    background: #E9E9FF;
                    .icon{
                        background: #5D61EF;
                    }
                }
            }
        }
    }
    .chart-items{
        margin-top: 32px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 32px;
        .chart-item{
            width: 100%;
            border: 1px solid #F8F9FA;
            background: #fff;
            border-radius: 20px;
            padding: 28px;
            box-shadow: 0px 4px 20px 0px rgba(238, 238, 238, 0.5);
            .chart-item-head{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 8px 8px 24px;
                border-radius: 12px 12px 0 0;
                border-top: 1px solid rgba(0, 0, 0, 0.04);
                border-left: 1px solid rgba(0, 0, 0, 0.04);
                border-right: 1px solid rgba(0, 0, 0, 0.04);
                background: #FAF5FF;
                h2{
                    font-weight: 500;
                    font-size: 18px;
                    line-height: 32px;
                    color: #000;
                }
                select{
                    border: 2px solid rgba(0, 0, 0, 0.08);
                    background: #fff;
                    padding:4px 12px;
                    width: 100px;
                    min-height: 44px;
                    border-radius: 8px;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 32px;
                    color: #000;
                    outline: none;
                }
            }
            .chart-item-body{
                padding: 20px 28px;
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                border-left: 2px solid rgba(0, 0, 0, 0.04);
                border-right: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
                border-radius: 0 0 12px 12px;
                .chart{
                    width: 100%;
                    canvas{
                        width: 100%;
                    }
                }
            }
        }
    }
}
.backLink{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #131527;
    svg{
        min-width: 24px;
        width: 24px;
        height: 24px;
    }
}
.page-direction{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
    .page-item{
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        color: #474747;
    }
    svg{
        min-width: 20px;
        width: 20px;
        height: 20px;
    }
}
.search-box{
    max-width: 350px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FBFBFB;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    margin-top: 20px;
    padding: 6px;
    .searchButton{
        min-width: 36px;
        width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        background: #131527;
        border-radius: 8px;
        svg{
            min-width: 20px;
            width: 20px;
            height: 20px;
        }
    }
    input{
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }
}

/* LOGO MODUL */
.logo_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addLogoLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allLogo-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        max-width: 250px;
                        .logo-item{
                            width: 120px;
                            max-height: 40px;
                            img{
                                max-width: 100%;
                                max-height: 40px;
                                object-fit: contain;
                            }
                        }
                        .activeStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .deactiveStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #534D59;
                            padding: 10px 6px;
                            background: #E2E2E2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_logo_management_container,.edit_logo_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .file-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        .file-form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .form-items{
                margin-top: 20px;
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap: 24px 20px;
                .form-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    label,p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                    .form-checks{
                        margin-top: 8px;
                        display: flex;
                        align-items: center;
                        gap: 24px;
                        .form-check-item{
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            input{
                                width: 24px;
                                height: 24px;
                                min-width: 24px;
                            }
                            label{
                                font-weight: 400;
                                font-size: 16px;
                                line-height: 20px;
                                color: #000;
                            }
                        }
                    }
                }
            }
            .add_file_area{
                margin-top: 20px;
                h3{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.8);
                }
                .add_file_box{
                    margin-top: 12px;
                    border: 1px dashed #5D61EF;
                    background: #F9F9FF;
                    width: 100%;
                    padding: 16px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    position: relative;
                    .uploadIcon{
                        min-width: 36px;
                        width: 36px;
                        height: 36px;
                    }
                    .box-text{
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 8px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #474747;
                        }
                        span{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: rgba(71, 71, 71, 0.5);
                        }
                    }
                    .selectFileTxt{
                        padding: 12px 28px;
                        background: #5D61EF;
                        border-radius: 8px;
                        color: #fff;
                        margin-left: auto;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 17px;

                    }
                    input{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
            .file-list{
                display: flex;
                flex-direction: column;
                align-items: start;
                width: 100%;
                .file-item{
                    margin-top: 20px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    img{
                        min-width: 40px;
                        width: 40px;
                        height: 40px;
                    }
                    .upload_line-area{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 7px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #0F91D2;
                        }
                        .line{
                            width: 100%;
                            height: 3px;
                            border-radius: 6px;
                            background: #E2E2E2;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                background: #01B107;
                                z-index: 1;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                    .removeFile{
                        min-width: 18px;
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }
        .active-toggle{
            margin-top: 24px;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15ox;
                color: rgba(0, 0, 0, 0.8);
            }
            .switch {
                position: relative;
                display: inline-block;
                width: 76px;
                height: 40px;
                input { 
                    opacity: 0;
                    width: 0;
                    height: 0;
                    &:checked + .slider {
                        background-color: #01B107;
                    }
                    &:checked + .slider:before {
                        transform: translateX(36px);
                    }
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                    &::before {
                        position: absolute;
                        content: "";
                        height: 32px;
                        width: 32px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }
                }
                .slider.round {
                    border-radius: 100px;
                    &:before {
                        border-radius: 100px;
                      }
                  }
            }
        }
        .saveForm{
            display: block;
            margin-top: 48px;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_logo_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        padding: 20px;
        background: #F5F5F5;
        border-radius: 12px;
        .view-head{
            width: 100%;
            background: #fff;
            padding: 12px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            img{
                min-width: 44px;
                width: 44px;
                height: 44px;
            }
            h2{
                font-weight: 500;
                font-size: 16px;
                line-height: 20px;
                color: #5D61EF;
            }
        }
        .view-details{
            margin-top: 12px;
            width: 100%;
            background: #FFFFFF;
            padding: 24px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            .view{
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 12px;
                width: 100%;
                padding-bottom: 16px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                p{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.6);
                }
                img{
                    width: 120px;
                    height: auto;
                }
            }
            .logoStatus{
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 12px;
                width: 100%;
                span{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.6);
                }
                .activeStatus{
                    width: 100px;
                    border-radius: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 16px;
                    text-align: center;
                    color: #01B107;
                    padding: 10px 6px;
                    background: #E1FFE2;
                    svg{
                        min-width: 18px;
                        width: 18px;
                        height: 18px;
                    }


                }
                .deactiveStatus{
                    width: 100px;
                    border-radius: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 16px;
                    text-align: center;
                    color: #534D59;
                    padding: 10px 6px;
                    background: #E2E2E2;
                    svg{
                        min-width: 18px;
                        width: 18px;
                        height: 18px;
                    }


                }
            }
        }
    }
}

/* User MODUL */
.user_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addUserLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allUsers-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        .adminStatus{
                            width: 110px;
                            border-radius: 50px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #5D61EF;
                            padding: 10px 6px;
                            background: #E1E2FF;
                        }
                        .userStatus{
                            width: 110px;
                            border-radius: 50px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                        .untouchable{
                            display: flex;
                            align-items: center;
                            max-width: 120px;
                            width: 100%;
                            gap: 8px;
                            svg{
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }
                            p{
                                font-weight: 400;
                                font-size: 12px;
                                line-height: 15px;
                                color: rgba(0, 0, 0, 0.6);
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_user_management_container,.edit_user_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .userForm{
        width: 100%;
        margin-top: 28px;
        .userForm-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .form-items{
                margin-top: 20px;
                width: 100%;
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 24px 20px;
                .form-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    label,p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                    .form-checks{
                        margin-top: 8px;
                        display: flex;
                        align-items: center;
                        gap: 24px;
                        .form-check-item{
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            input{
                                width: 24px;
                                height: 24px;
                                min-width: 24px;
                            }
                            label{
                                font-weight: 400;
                                font-size: 16px;
                                line-height: 20px;
                                color: #000;
                            }
                        }
                    }
                }
            }
        }
        .saveForm{
            display: block;
            margin-top: 48px;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_user_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        padding: 20px;
        background: #F5F5F5;
        border-radius: 12px;
        .view-head{
            width: 100%;
            background: #fff;
            padding: 12px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            img{
                min-width: 44px;
                width: 44px;
                height: 44px;
            }
            h2{
                font-weight: 500;
                font-size: 16px;
                line-height: 20px;
                color: #5D61EF;
            }
        }
        .view-details{
            margin-top: 12px;
            width: 100%;
            background: #FFFFFF;
            padding: 24px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            .detail-item{
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 12px;
                width: 100%;
                padding-bottom: 16px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                
                p{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.6);
                }
                h2{
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 20px;
                    color: #1a1a1a;
                }
                &:last-child{
                    padding-bottom: 0;
                    border-bottom: none;
                }
            }
        }
    }
}

/* Role MODUL */
.role_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addRoleLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .allRole-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                        .table_role_items{
                            display: flex;
                            gap: 8px;
                            flex-wrap: wrap;
                            .roleItem{
                                padding: 6px 12px;
                                border-radius: 100px;
                                background: #E1E2FF;
                                font-weight: 400;
                                font-size: 10px;
                                line-height: 12px;
                                color: #131527;
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_role_management_container,.edit_role_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .roleForm{
        width: 100%;
        margin-top: 28px;
        .role-name{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            width: 100%;
            label{
                font-weight: 400;
                font-size: 12px;
                line-height: 15px;
                color: rgba(0, 0, 0, 0.6);                        
            }
            input{
                width: 100%;
                background: #FBFBFB;
                border: 1px solid rgba(0, 0, 0, 0.12);
                border-radius: 12px;
                padding: 18px;
                outline: none;
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
                color: #000;
                &::placeholder{
                    color: rgba(26, 26, 26, 0.6);
                }
            }
        }
        .permissons{
            margin-top: 24px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            width: 100%;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15px;
                color: rgba(0, 0, 0, 0.6);                        
            }
            .permissons-boxes{
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                background: #F5F5F5;
                padding: 20px;
                gap: 20px;
                border-radius: 12px;
                .permisson-box{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 20px;
                    background: #fff;
                    border-radius: 12px;
                    padding: 12px;
                    h2{
                        width: 100%;
                        text-align: center;
                        padding: 18px;
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 20px;
                        color: #131527;
                        background: #F3F3FF;
                        border-radius: 8px;
                    }
                    .permisson-list{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 16px;
                        padding: 0 8px 8px;
                        .permisson-item{
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            input{
                                width: 20px;
                                height: 20px;
                                min-width: 20px;
                            }
                            label{
                                font-weight: 400;
                                font-size: 14px;
                                line-height: 18px;
                                color: #474747;
                                input:checked + & {
                                    color: #5D61EF;
                                }
                            }
                            
                        }
                    }
                }
            }
        }
        .saveForm{
            display: block;
            margin-top: 48px;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_role_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-opearation{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto;
        justify-content: end;
        .view-operation-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            font-size: 10px;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
            .icon{  
                min-width: 40px;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FBFBFB;
                border-radius: 6px;
                img{
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
    .view-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        padding: 20px;
        background: #F5F5F5;
        border-radius: 12px;
        .role-name{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            width: 100%;
            label{
                font-weight: 400;
                font-size: 12px;
                line-height: 15px;
                color: rgba(0, 0, 0, 0.6);                        
            }
            p{
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
                color: #1A1A1A;    
            }
        }
        .permissons{
            margin-top: 28px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            width: 100%;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15px;
                color: rgba(0, 0, 0, 0.6);                        
            }
            .permissons-boxes{
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                background: #F5F5F5;
                gap: 20px;
                border-radius: 12px;
                .permisson-box{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 20px;
                    background: #fff;
                    border-radius: 12px;
                    padding: 12px;
                    h2{
                        width: 100%;
                        text-align: center;
                        padding: 18px;
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 20px;
                        color: #131527;
                        background: #F8F8F9;
                        border-radius: 8px;
                    }
                    .permisson-list{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 16px;
                        padding: 0 8px 8px;
                        .permisson-item{
                            p{
                                font-weight: 400;
                                font-size: 14px;
                                line-height: 18px;
                                color: #474747;
                            }
                            
                        }
                    }
                }
            }
        }
    }
}

/* Masters MODUL */
.masters_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addMasterLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allMasters-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        .activeStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .deactiveStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #534D59;
                            padding: 10px 6px;
                            background: #E2E2E2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.add_master_management_container,.edit_master_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .file-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        .file-form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .formInputs{
                width: 100%;
                margin-top: 20px;
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 20px;
                .formItem{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    label{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                }
            }
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .add_file_area{
                margin-top: 20px;
                h3{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.8);
                }
                .add_file_box{
                    margin-top: 12px;
                    border: 1px dashed #5D61EF;
                    background: #F9F9FF;
                    width: 100%;
                    padding: 16px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    position: relative;
                    .uploadIcon{
                        min-width: 36px;
                        width: 36px;
                        height: 36px;
                    }
                    .box-text{
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 8px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #474747;
                        }
                        span{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: rgba(71, 71, 71, 0.5);
                        }
                    }
                    .selectFileTxt{
                        padding: 12px 28px;
                        background: #5D61EF;
                        border-radius: 8px;
                        color: #fff;
                        margin-left: auto;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 17px;

                    }
                    input{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
            .file-list{
                display: flex;
                flex-direction: column;
                align-items: start;
                width: 100%;
                .file-item{
                    margin-top: 20px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    img{
                        min-width: 40px;
                        width: 40px;
                        height: 40px;
                    }
                    .upload_line-area{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 7px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #0F91D2;
                        }
                        .line{
                            width: 100%;
                            height: 3px;
                            border-radius: 6px;
                            background: #E2E2E2;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                background: #01B107;
                                z-index: 1;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                    .removeFile{
                        min-width: 18px;
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }
        .active-toggle{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15ox;
                color: rgba(0, 0, 0, 0.8);
            }
            .switch {
                position: relative;
                display: inline-block;
                width: 76px;
                height: 40px;
                input { 
                    opacity: 0;
                    width: 0;
                    height: 0;
                    &:checked + .slider {
                        background-color: #01B107;
                    }
                    &:checked + .slider:before {
                        transform: translateX(36px);
                    }
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                    &::before {
                        position: absolute;
                        content: "";
                        height: 32px;
                        width: 32px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }
                }
                .slider.round {
                    border-radius: 100px;
                    &:before {
                        border-radius: 100px;
                      }
                  }
            }
        }
        .saveForm{
            margin-top: 24px;
            display: block;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_master_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-opearation{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto;
        justify-content: end;
        .view-operation-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            font-size: 10px;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
            .icon{  
                min-width: 40px;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FBFBFB;
                border-radius: 6px;
                img{
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
    .view-container{
        width: 100%;
        margin-top: 20px;
        padding: 28px;
        background: #fbfbfb;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 40px;
        .view-areas{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 28px;
        }
        .view-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            .view-head{
                width: 100%;
                background: #fff;
                padding: 16px 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid rgba(93, 97, 239, 0.04);
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .view-details{
                margin-top: 12px;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                padding: 24px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                .detail-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    h2{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1a1a1a;
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
                .masterStatus{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    .activeStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #01B107;
                        padding: 10px 6px;
                        background: #E1FFE2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                    .deactiveStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #534D59;
                        padding: 10px 6px;
                        background: #E2E2E2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                }
            }
            .file-list-title{
                margin-top: 20px;
                font-weight: 400;
                font-size: 12px;
                line-height: 15px;
                color: rgba(0, 0, 0, 0.6);
            }
            .file-list{
                margin-top: 8px;
                padding: 24px;
                border: 1px solid rgba(0, 0, 0, 0.04);
                background: #fff;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 28px;
                width: 100%;
                .file-item{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    img{
                        min-width: 40px;
                        width: 40px;
                        height: 40px;
                    }
                    .upload_line-area{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 7px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #0F91D2;
                        }
                        .line{
                            width: 100%;
                            height: 3px;
                            border-radius: 6px;
                            background: #E2E2E2;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                background: #01B107;
                                z-index: 1;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                    .file-links{
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        .viewFile{
                            padding: 10px 16px;
                            border-radius: 8px;
                            background: #5D61EF;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 15px;
                            color: #fff;
                            svg{
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }
                        }
                        .downloadFile{
                            padding: 8px 14px;
                            border-radius: 8px;
                            background: #fff;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 15px;
                            color: #5D61EF;
                            border: 2px solid rgba(93, 97, 239, 0.4);
                            svg{
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }
                        }
                    }
                }
            }
        }
    }
    
}

/* Customer MODUL */
.customer_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addCustomerLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allCustomer-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        min-width: 110px;
                        .activeStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .deactiveStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #534D59;
                            padding: 10px 6px;
                            background: #E2E2E2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_customer_management_container,.edit_customer_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .file-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        .file-form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .formInputs{
                width: 100%;
                margin-top: 20px;
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 20px;
                .formItem{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    position: relative;
                    label{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input,select{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                    .calendar-icon{
                        min-width: 24px;
                        width: 24px;
                        height: 24px;
                        position: absolute;
                        z-index: 1;
                        bottom: 16px;
                        right: 16px;
                        svg{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .mixFormItem{
                        display: flex;
                        align-items: center;
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 6px 6px 6px 16px;
                        gap: 12px;
                        input{
                            background: transparent;
                            border: none;
                            padding: 0;
                            border-radius: 0;
                        }
                        select{
                            border: 1px solid rgba(0, 0, 0, 0.04);
                            background: #f5f5f5;
                            padding: 10px;
                            width: max-content;
                        }
                    }
                }
            }
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .add_file_area{
                margin-top: 20px;
                h3{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.8);
                }
                .add_file_box{
                    margin-top: 12px;
                    border: 1px dashed #5D61EF;
                    background: #F9F9FF;
                    width: 100%;
                    padding: 16px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    position: relative;
                    .uploadIcon{
                        min-width: 36px;
                        width: 36px;
                        height: 36px;
                    }
                    .box-text{
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 8px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #474747;
                        }
                        span{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: rgba(71, 71, 71, 0.5);
                        }
                    }
                    .selectFileTxt{
                        padding: 12px 28px;
                        background: #5D61EF;
                        border-radius: 8px;
                        color: #fff;
                        margin-left: auto;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 17px;

                    }
                    input{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
            .file-list{
                display: flex;
                flex-direction: column;
                align-items: start;
                width: 100%;
                .file-item{
                    margin-top: 20px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    img{
                        min-width: 40px;
                        width: 40px;
                        height: 40px;
                    }
                    .upload_line-area{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 7px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #0F91D2;
                        }
                        .line{
                            width: 100%;
                            height: 3px;
                            border-radius: 6px;
                            background: #E2E2E2;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                background: #01B107;
                                z-index: 1;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                    .removeFile{
                        min-width: 18px;
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }
        .active-toggle{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15ox;
                color: rgba(0, 0, 0, 0.8);
            }
            .switch {
                position: relative;
                display: inline-block;
                width: 76px;
                height: 40px;
                input { 
                    opacity: 0;
                    width: 0;
                    height: 0;
                    &:checked + .slider {
                        background-color: #01B107;
                    }
                    &:checked + .slider:before {
                        transform: translateX(36px);
                    }
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                    &::before {
                        position: absolute;
                        content: "";
                        height: 32px;
                        width: 32px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }
                }
                .slider.round {
                    border-radius: 100px;
                    &:before {
                        border-radius: 100px;
                      }
                  }
            }
        }
        .saveForm{
            margin-top: 24px;
            display: block;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_customer_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-opearation{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto;
        justify-content: end;
        .view-operation-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            font-size: 10px;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
            .icon{  
                min-width: 40px;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FBFBFB;
                border-radius: 6px;
                img{
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
    .view-container{
        width: 100%;
        margin-top: 20px;
        padding: 28px;
        background: #fbfbfb;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 40px;
        .view-areas{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 28px;
        }
        .view-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            .view-head{
                width: 100%;
                background: #fff;
                padding: 16px 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid rgba(93, 97, 239, 0.04);
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .view-details{
                margin-top: 12px;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                padding: 24px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                .detail-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    h2{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1a1a1a;
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
                .masterStatus{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    .activeStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #01B107;
                        padding: 10px 6px;
                        background: #E1FFE2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                    .deactiveStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #534D59;
                        padding: 10px 6px;
                        background: #E2E2E2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                }
            }
            .file-list-title{
                margin-top: 20px;
                font-weight: 400;
                font-size: 12px;
                line-height: 15px;
                color: rgba(0, 0, 0, 0.6);
            }
            .file-list{
                margin-top: 8px;
                padding: 24px;
                border: 1px solid rgba(0, 0, 0, 0.04);
                background: #fff;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 28px;
                width: 100%;
                .file-item{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    img{
                        min-width: 40px;
                        width: 40px;
                        height: 40px;
                    }
                    .upload_line-area{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 7px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #0F91D2;
                        }
                        .line{
                            width: 100%;
                            height: 3px;
                            border-radius: 6px;
                            background: #E2E2E2;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                background: #01B107;
                                z-index: 1;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                    .file-links{
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        .viewFile{
                            padding: 10px 16px;
                            border-radius: 8px;
                            background: #5D61EF;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 15px;
                            color: #fff;
                            svg{
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }
                        }
                        .downloadFile{
                            padding: 8px 14px;
                            border-radius: 8px;
                            background: #fff;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 15px;
                            color: #5D61EF;
                            border: 2px solid rgba(93, 97, 239, 0.4);
                            svg{
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }
                        }
                    }
                }
            }
            .allServiceHistory-table{
                margin-top: 16px;
                border: 2px solid rgba(0, 0, 0, 0.04);
                border-radius: 12px;
                width: 100%;
                overflow-x: auto;
                &::-webkit-scrollbar {
                    width: 0;
                    height: 8px;

                }
                &::-webkit-scrollbar-thumb {
                    background: #ccc;
                    border-radius: 10px;
                }
                &::-webkit-scrollbar-track {
                    background: transparent;
                }
                table{
                    width: 100%;
                    border-collapse: collapse;
                    border-spacing: 0;
                    tr{
                        border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                        width: 100%;
                    }
                    td,th{
                        padding: 20px 16px;
                        font-size: 14px;
                        line-height: 16px;
                        text-align: left;
        
                    }
                    th{
                        font-weight: 600;
                        color: #534D59;
                        text-wrap: nowrap;
                        background: #fff;
                    }
                    tbody{
                        tr{ 
                            td{
                                font-weight: 400;
                                color: #474747;
                                min-width: 110px;
                                max-width: 140px;
                                .operation-links{
                                    display: flex;
                                    align-items: center;
                                    gap: 12px;
                                    .operation-link{
                                        min-width: 36px;
                                        width: 36px;
                                        height: 36px;
                                        border-radius: 6px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: #F9FAFC;
                                        img{
                                            width: 22px;
                                            height: 22px;
                                        }
                                    }
                                }
                                .serviceDropDown{
                                    position: relative;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: start;
                                    .serviceDropBtn{
                                        display: flex;
                                        align-items: center;
                                        background: #fff;
                                        border: 2px solid rgba(93, 97, 239, 0.4);
                                        padding: 8px 18px;
                                        border-radius: 8px;
                                        gap: 8px;
                                        cursor: pointer;
                                        p{
                                            font-weight: 400;
                                            font-size: 14px;
                                            line-height: 18px;
                                            color: #5D61EF;
                                            text-wrap: nowrap;
                                        }
                                        svg{
                                            min-width: 20px;
                                            width: 20px;
                                            height: 20px;
                                        }
                                    }
                                    .dropMenu{
                                        display: none;
                                        flex-direction: column;
                                        align-items: start;
                                        gap: 12px;
                                        padding: 22px;
                                        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.07);
                                        border: 2px solid rgba(0, 0, 0, 0.04);
                                        background: #fff;
                                        border-radius: 12px;
                                        width: 350px;
                                        position: absolute;
                                        left: 0;
                                        top: 60px;
                                        z-index: 2;
                                        max-height: 145px;
                                        overflow-y: auto;
                                        &::-webkit-scrollbar{
                                            width: 4px;
                                        }
                                        &::-webkit-scrollbar-thumb{
                                            background: #5357d4;
                                            border-radius: 8px;
                                        }
                                        .dropServiceItem{
                                            width: 100%;
                                            display: flex;
                                            align-items: start;
                                            justify-content: space-between;
                                            gap: 16px;
                                            padding-bottom: 12px;
                                            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                                            .serviceName{
                                                font-weight: 400;
                                                font-size: 14px;
                                                line-height: 18px;
                                                color: #000;
                                            }
                                            .serviceTotal{
                                                display: flex;
                                                flex-direction: column;
                                                align-items: end;
                                                gap: 4px;
                                                .totalCount{
                                                    display: flex;
                                                    align-items: center;
                                                    gap: 4px;
                                                    font-weight: 400;
                                                    font-size: 12px;
                                                    line-height: 15px;
                                                    color: #474747;
                                                    text-wrap: nowrap;
                                                }
                                                .totalPrice{
                                                    font-weight: 400;
                                                    font-size: 12px;
                                                    line-height: 15px;
                                                    color: #01B107;
                                                }
                                            }
                                            &:last-child{
                                                padding-bottom: 0;
                                                border-bottom: none;
                                            }
                                        }
                                    }
                                }
                                .active{
                                    .serviceDropBtn{
                                        
                                        svg{
                                            transition: .2s;
                                            transform: rotate(180deg);
                                        }
                                    }
                                    .dropMenu{
                                        display: flex;
                                    }
                                }
                            }
                            &:nth-child(odd){
                                td{
                                    background: #F9FAFC;
                                    .operation-links{
                                        .operation-link{
                                            background: #fff;
                                        }
                                    }
                                }
                            }
                            &:last-child{
                                border-bottom: none;
                                td{
                                    &:first-child{
                                        border-bottom-left-radius: 12px;
                                    }
                                    &:last-child{
                                        border-bottom-right-radius: 12px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}


/* Brands MODUL */
.brands_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addBrandLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allBrands-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        .activeStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .deactiveStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #534D59;
                            padding: 10px 6px;
                            background: #E2E2E2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_brand_management_container,.edit_brand_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .file-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        .file-form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .formInputs{
                width: 100%;
                margin-top: 20px;
                display: grid;
                grid-template-columns: repeat(1,1fr);
                gap: 20px;
                .formItem{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    position: relative;
                    label{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                }
            }
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
        }
        .active-toggle{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15ox;
                color: rgba(0, 0, 0, 0.8);
            }
            .switch {
                position: relative;
                display: inline-block;
                width: 76px;
                height: 40px;
                input { 
                    opacity: 0;
                    width: 0;
                    height: 0;
                    &:checked + .slider {
                        background-color: #01B107;
                    }
                    &:checked + .slider:before {
                        transform: translateX(36px);
                    }
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                    &::before {
                        position: absolute;
                        content: "";
                        height: 32px;
                        width: 32px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }
                }
                .slider.round {
                    border-radius: 100px;
                    &:before {
                        border-radius: 100px;
                      }
                  }
            }
        }
        .saveForm{
            margin-top: 24px;
            display: block;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_brand_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-container{
        width: 100%;
        margin-top: 20px;
        padding: 28px;
        background: #fbfbfb;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        .view-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            .view-head{
                width: 100%;
                background: #fff;
                padding: 16px 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid rgba(93, 97, 239, 0.04);
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .view-details{
                margin-top: 12px;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                padding: 24px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                .detail-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    h2{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1a1a1a;
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
                .brandStatus{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    .activeStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #01B107;
                        padding: 10px 6px;
                        background: #E1FFE2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                    .deactiveStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #534D59;
                        padding: 10px 6px;
                        background: #E2E2E2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                }
            }
        }
    }
    
}

/* Brands MODUL */
.models_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addModelLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allModels-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        .activeStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .deactiveStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #534D59;
                            padding: 10px 6px;
                            background: #E2E2E2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_model_management_container,.edit_model_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .file-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        .file-form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .formInputs{
                width: 100%;
                margin-top: 20px;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap: 20px;
                .formItem{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    position: relative;
                    label{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input,select{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                }
            }
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
        }
        .active-toggle{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15ox;
                color: rgba(0, 0, 0, 0.8);
            }
            .switch {
                position: relative;
                display: inline-block;
                width: 76px;
                height: 40px;
                input { 
                    opacity: 0;
                    width: 0;
                    height: 0;
                    &:checked + .slider {
                        background-color: #01B107;
                    }
                    &:checked + .slider:before {
                        transform: translateX(36px);
                    }
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                    &::before {
                        position: absolute;
                        content: "";
                        height: 32px;
                        width: 32px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }
                }
                .slider.round {
                    border-radius: 100px;
                    &:before {
                        border-radius: 100px;
                      }
                  }
            }
        }
        .saveForm{
            margin-top: 24px;
            display: block;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_model_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-container{
        width: 100%;
        margin-top: 20px;
        padding: 28px;
        background: #fbfbfb;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        .view-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            .view-head{
                width: 100%;
                background: #fff;
                padding: 16px 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid rgba(93, 97, 239, 0.04);
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .view-details{
                margin-top: 12px;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                padding: 24px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                .detail-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    h2{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1a1a1a;
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
                .modelStatus{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    .activeStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #01B107;
                        padding: 10px 6px;
                        background: #E1FFE2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                    .deactiveStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #534D59;
                        padding: 10px 6px;
                        background: #E2E2E2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                }
            }
        }
    }
    
}

/* Service MODUL */
.service_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addServiceLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allService-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        .activeStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .deactiveStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #534D59;
                            padding: 10px 6px;
                            background: #E2E2E2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_service_management_container,.edit_service_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .file-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        .file-form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .formInputs{
                width: 100%;
                margin-top: 20px;
                display: grid;
                grid-template-columns: repeat(1,1fr);
                gap: 20px;
                .formItem{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    position: relative;
                    label{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                }
            }
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
        }
        .active-toggle{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15ox;
                color: rgba(0, 0, 0, 0.8);
            }
            .switch {
                position: relative;
                display: inline-block;
                width: 76px;
                height: 40px;
                input { 
                    opacity: 0;
                    width: 0;
                    height: 0;
                    &:checked + .slider {
                        background-color: #01B107;
                    }
                    &:checked + .slider:before {
                        transform: translateX(36px);
                    }
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                    &::before {
                        position: absolute;
                        content: "";
                        height: 32px;
                        width: 32px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }
                }
                .slider.round {
                    border-radius: 100px;
                    &:before {
                        border-radius: 100px;
                      }
                  }
            }
        }
        .saveForm{
            margin-top: 24px;
            display: block;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_service_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-container{
        width: 100%;
        margin-top: 20px;
        padding: 28px;
        background: #fbfbfb;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        .view-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            .view-head{
                width: 100%;
                background: #fff;
                padding: 16px 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid rgba(93, 97, 239, 0.04);
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .view-details{
                margin-top: 12px;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                padding: 24px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                .detail-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    h2{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1a1a1a;
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
                .serviceStatus{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    .activeStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #01B107;
                        padding: 10px 6px;
                        background: #E1FFE2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                    .deactiveStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #534D59;
                        padding: 10px 6px;
                        background: #E2E2E2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                }
            }
        }
    }
    
}


/* Servis MODUL */

.servis_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addServisLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allServis-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        vertical-align: top;
                        font-weight: 400;
                        color: #474747;
                        min-width: 110px;
                        max-width: 250px;
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_servis_management_container,.edit_servis_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .servisForm{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        .form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .formInputs{
                width: 100%;
                margin-top: 20px;
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 20px;
                .formItem{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    position: relative;
                    label{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input,select{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                    .calendar-icon{
                        min-width: 24px;
                        width: 24px;
                        height: 24px;
                        position: absolute;
                        z-index: 1;
                        bottom: 16px;
                        right: 16px;
                        svg{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .addServisBoxes{
                margin-top: 28px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 24px;
                width: 100%;
                .servisBox{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 24px;
                    padding-bottom: 24px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    width: 100%;
                    .innerForms{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 24px;
                        .formItem{
                            display: flex;
                            flex-direction: column;
                            align-items: start;
                            gap: 8px;
                            width: 100%;
                            position: relative;
                            label{
                                font-weight: 400;
                                font-size: 12px;
                                line-height: 15px;
                                color: rgba(0, 0, 0, 0.6);                        
                            }
                            input,select{
                                width: 100%;
                                background: #FBFBFB;
                                border: 1px solid rgba(0, 0, 0, 0.12);
                                border-radius: 12px;
                                padding: 18px 16px;
                                outline: none;
                                font-weight: 400;
                                font-size: 16px;
                                line-height: 20px;
                                color: #000;
                                &::placeholder{
                                    color: rgba(26, 26, 26, 0.6);
                                }
                            }
                        }
                        .formInputsSelects{
                            width: 100%;
                            display: grid;
                            grid-template-columns: minmax(0,580px) minmax(0,420px);
                            gap: 20px;
                            .formSelects{
                                width: 100%;
                                display: grid;
                                gap: 20px;
                                grid-template-columns: minmax(0,300px) minmax(0,260px);
                            }
                            .formInputs{
                                margin-top: 0;
                                display: grid;
                                gap: 20px;
                                grid-template-columns: repeat(3,1fr);
                                .autoPrice{
                                    input{
                                        background: #E4E4E4;
                                        border-color: #E4E4E4;
                                    }
                                }
                            }
                        }
                        .formInputsButtons{
                            display: flex;
                            align-items: end;
                            justify-content: space-between;
                            width: 100%;
                            .formInputs{
                                margin-top: 0;
                                max-width: 300px;
                                width: 100%;
                                display: grid;
                                grid-template-columns: repeat(2,1fr);
                                gap: 20px;
                            }
                            .servisBox-buttons{
                                display: flex;
                                align-items: center;
                                gap: 12px;  
                                .addSparePart{
                                    border: 2px solid rgba(93, 97, 239, 0.4);
                                    padding: 10px 18px;
                                    display: flex;
                                    align-items: center;
                                    gap: 8px;
                                    font-weight: 400;
                                    font-size: 14px;
                                    line-height: 18px;
                                    color: #5D61EF;
                                    border-radius: 6px;
                                    svg{
                                        min-width: 20px;
                                        width: 20px;
                                        height: 20px;
                                    }
                                }
                                .deleteServiceBox{
                                    border: 2px solid rgba(255, 10, 10, 0.4);
                                    padding: 10px 18px;
                                    display: flex;
                                    align-items: center;
                                    gap: 8px;
                                    font-weight: 400;
                                    font-size: 14px;
                                    line-height: 18px;
                                    color: #FF0A0A;
                                    border-radius: 6px;
                                    svg{
                                        min-width: 20px;
                                        width: 20px;
                                        height: 20px;
                                    }
                                }
                            }
                        }
                    }
                    .sparePartBox{
                        width: 100%;
                        border: 2px solid rgba(0, 0, 0, 0.04);
                        background: #fff;
                        border-radius: 20px;
                        padding: 28px;
                        h3{
                            font-weight: 500;
                            font-size: 16px;
                            line-height: 20px;
                            color: #5D61EF;
                        }
                        .allSpareParts-table{
                            margin-top: 20px;
                            border: 2px solid rgba(0, 0, 0, 0.04);
                            border-radius: 12px;
                            width: 100%;
                            overflow-x: auto;
                            &::-webkit-scrollbar {
                                height: 8px;
                                width: 0;
                            }
                            &::-webkit-scrollbar-thumb {
                                background: #ccc;
                                border-radius: 10px;
                            }
                            &::-webkit-scrollbar-track {
                                background: transparent;
                            }
                            table{
                                width: 100%;
                                border-collapse: collapse;
                                border-spacing: 0;
                                tr{
                                    border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                                    width: 100%;
                                }
                                td,th{
                                    padding: 20px 16px;
                                    text-align: left;
                                    font-size: 14px;
                                    line-height: 16px;
                                    text-align: left;
                    
                                }
                                th{
                                    font-weight: 600;
                                    color: #534D59;
                                    text-wrap: nowrap;
                                }
                                tbody{
                                    tr{ 
                                        td{
                                            vertical-align: top;
                                            font-weight: 400;
                                            color: #474747;
                                        }
                                        &:nth-child(odd){
                                            td{
                                                background: #F9FAFC;
                                            }
                                        }
                                        &:last-child{
                                            border-bottom: none;
                                            td{
                                                &:first-child{
                                                    border-bottom-left-radius: 12px;
                                                }
                                                &:last-child{
                                                    border-bottom-right-radius: 12px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }
            .addNewServisBtn{
                margin-top: 32px;
                display: flex;
                align-items: center;
                gap: 8px;
                color: #fff;
                background: #5D61EF;
                border-radius: 6px;
                padding: 12px 20px;
                font-weight: 400;
                font-size: 14px;
                line-height: 18px;
                svg{
                    min-width: 20px;
                    width: 20px;
                    height: 20px;
                    
                }
            }
            .totalPriceBox{
                margin: 32px 0 0 auto;
                display: flex;
                align-items: start;
                flex-direction: column;
                width: 260px;
                gap: 12px;
                .generalDiscount{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    padding-bottom: 12px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 18px;
                        color: #474747;
                    }
                    span{
                        font-weight: 500;
                        font-size: 18px;
                        line-height: 22px;
                        color: #474747;
                    }
                }
                .generalPrice{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    padding-bottom: 12px;
                    p{
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 18px;
                        color: #474747;
                    }
                    span{
                        font-weight: 500;
                        font-size: 18px;
                        line-height: 22px;
                        color: #01B107;
                    }
                }

            }
        }
        .servisForm-buttons{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: end;
            gap: 20px;
            margin-top: 32px;
            .printBtn{
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 12px 20px;
                color: #fff;
                background: #5D61EF;
                border-radius: 6px;
                font-weight: 400;
                font-size: 16px;
                line-height: 19px;
                

            }
            .saveForm{
                display: block;
                padding: 14px 28px;
                color: #fff;
                background: #04C80B;
                border-radius: 6px;
                font-weight: 400;
                font-size: 16px;
                line-height: 19px;

            }
        }


    }
}
.factura_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .printBtn{
        background: #5D61EF;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 6px;
        padding: 12px 20px;
        margin-left: auto;
        svg{
            min-width: 24px;
            width: 24px;
            height: 24px;
        }
    }
    .factura{
        margin: 40px auto 0;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: #F5F5F5;
        max-width: 756px;
        width: 100%;
        padding: 6px 48px 44px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .logo{
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .factura-headInfo{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 16px 40px;
            margin-top: 20px;
            .headInfoItem{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.24);
                span,p{
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 24px;
                    color: rgba(0, 0, 0, 0.6);
                }
                p{
                    text-align: right;
                    color: #000;
                }
                &:last-child,&:nth-last-child(2){
                    padding-bottom: 0;
                    border-bottom: none;
                }
            }

        }
        .customer-info-box{
            margin-top: 40px;
            width: 100%;
            border: 1px solid rgba(0, 0, 0, 0.24);
            border-radius: 6px;
            h2{
                text-align: center;
                width: 100%;
                padding: 12px;
                font-weight: 500;
                font-size: 14px;
                line-height: 24px;
                color: #000;
                border-bottom: 1px solid rgba(0, 0, 0, 0.24);
            }
            .customer-info-items{
                width: 100%;
                padding: 20px;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap: 12px 40px;
                .info-item{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 16px;
                    padding-bottom: 12px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
                    span,p{
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 24px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    p{
                        text-align: right;
                        color: #000;
                    }
                    &:last-child,&:nth-last-child(2){
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
    
            }
        }
        .paymentType{
            margin-top: 24px;
            display: flex;
            align-items: center;
            gap: 20px;
            width: 100%;
            justify-content: start;
            h3{
                font-weight: 400;
                font-size: 14px;
                line-height: 18px;
                color: #000;
            }
            .typeItems{
                display: flex;
                align-items: center;
                gap: 24px;

                .typeItem{
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    span{
                        min-width: 20px;
                        width: 20px;
                        height: 20px;
                        border: 1px solid rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                    }
                    p{
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 18px;
                        color: #000;
                    }
                }
            }
        }
        .servisListTable{
            margin-top: 40px;
            width: 100%;
            border-radius: 6px;
            border: .5px solid rgba(0, 0, 0, 0.24);
        

            table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                th, td {
                    border: .5px solid rgba(0, 0, 0, 0.24);
                    text-align: left;
                    min-width: 75px;
                    
                }
                th {
                    font-weight: 500;
                    font-size: 13px;
                    line-height: 16px;
                    color: #000;
                    padding: 14px 12px;
                    &:first-child{
                        border-top-left-radius: 6px;
                    }
                    &:last-child{
                        border-top-right-radius: 6px;
                    }
                }
                
                td{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 14px;
                    color: rgba(0, 0, 0, 0.8);
                    padding: 12px;
                }
                tfoot{
                    td{
                        padding: 16px;
                        &:first-child{
                            border-bottom-left-radius: 6px;
                        }
                        &:last-child{
                            border-bottom-right-radius: 6px;
                        }
                    }
                }
                .total {
                    font-weight: 600;
                    color: #000;
                }
            }
            
            
            
        }
        .workDoneListTable{
            margin-top: 20px;
            width: 100%;
            border-radius: 6px;
            border: .5px solid rgba(0, 0, 0, 0.24);
        

            table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                th, td {
                    border: .5px solid rgba(0, 0, 0, 0.24);
                    text-align: left;
                    min-width: 75px;
                    
                }
                th {
                    font-weight: 500;
                    font-size: 13px;
                    line-height: 16px;
                    color: #000;
                    padding: 14px 12px;
                    &:first-child{
                        border-top-left-radius: 6px;
                    }
                    &:last-child{
                        border-top-right-radius: 6px;
                    }
                }
                
                td{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 14px;
                    color: rgba(0, 0, 0, 0.8);
                    padding: 12px;
                }
                tfoot{
                    td{
                        padding: 16px;
                        &:first-child{
                            border-bottom-left-radius: 6px;
                        }
                        &:last-child{
                            border-bottom-right-radius: 6px;
                        }
                    }
                }
                .total {
                    font-weight: 600;
                    color: #000;
                }
            }
            
            
            
        }
        .factura-totalPrice{
            display: flex;
            flex-direction: column;
            align-items: end;
            gap: 8px;
            margin-top: 20px;
            width: 250px;
            margin-left: auto;
            .item{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span,p{
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 24px;
                    text-align: left;
                    color: rgba(0, 0, 0, 0.7);
                }
                p{
                    font-weight: 500;
                    color: #000;
                    text-align: right;
                }
            }
        }
        .sparePartInfo{
            width: 100%;
            margin-top: 28px;
            padding-top: 28px;
            border-top: 1px solid rgba(0, 0, 0, 0.4);
            h2{
                font-weight: 600;
                font-size: 14px;
                line-height: 24px;
                color: #000;
            }
            .sparePartInfoTable{
                margin-top: 16px;
                width: 100%;
                border-radius: 6px;
                border: .5px solid rgba(0, 0, 0, 0.24);
                table {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 0;
                    th, td {
                        border: .5px solid rgba(0, 0, 0, 0.24);
                        text-align: left;
                        min-width: 75px;
                        
                    }
                    th {
                        font-weight: 500;
                        font-size: 13px;
                        line-height: 16px;
                        color: #000;
                        padding: 14px 12px;
                        &:first-child{
                            border-top-left-radius: 6px;
                        }
                        &:last-child{
                            border-top-right-radius: 6px;
                        }
                    }
                    
                    td{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 14px;
                        color: rgba(0, 0, 0, 0.8);
                        padding: 12px;
                    }
                    tfoot{
                        td{
                            padding: 16px;
                            &:first-child{
                                border-bottom-left-radius: 6px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 6px;
                            }
                        }
                    }
                    .total {
                        font-weight: 600;
                        color: #000;
                    }
                }
                
                
                
            }
        }
        .factura-bottom{
            margin-top: 40px;
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 40px;
            width: 100%;
            .factura-sing{
                max-width: 440px;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 28px;
                .sign-item{
                    display: flex;
                    align-items: end;
                    gap: 8px;
                    width: 100%;
                    p{
                        font-weight: 500;
                        font-size: 14px;
                        line-height: 24px;
                        color: #000;
                        text-wrap: nowrap;
                    }
                    span{
                        width: 100%;
                        border: .5px solid #000;
                    }
                }
            }
            .totalPrice{
                min-width: 180px;
                p{
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 24px;
                    text-align: right;
                    color: #000;
                    text-wrap: nowrap;
                }
            }
        }
    }
}
.view_servis_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-opearation{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto;
        justify-content: end;
        .view-operation-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            font-size: 10px;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
            .icon{  
                min-width: 40px;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FBFBFB;
                border-radius: 6px;
                img{
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
    .view-container{
        width: 100%;
        margin-top: 20px;
        padding: 28px;
        background: #fbfbfb;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 40px;
        .view-areas{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 28px;
        }
        .view-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            .view-head{
                width: 100%;
                background: #fff;
                padding: 16px 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid rgba(93, 97, 239, 0.04);
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .view-details{
                margin-top: 12px;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                padding: 24px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                .detail-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    h2{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1a1a1a;
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
                .masterStatus{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    .activeStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #01B107;
                        padding: 10px 6px;
                        background: #E1FFE2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                    .deactiveStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #534D59;
                        padding: 10px 6px;
                        background: #E2E2E2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                }
            }
            .servis-desc-items{
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                width: 100%;
                .servis-desc-item{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    p{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1A1A1A;
                    }
                    &:last-child{
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }
            .allServisHistory-table{
                margin-top: 32px;
                border: 2px solid rgba(0, 0, 0, 0.04);
                border-radius: 12px;
                width: 100%;
                overflow-x: auto;
                &::-webkit-scrollbar {
                    width: 0;
                    height: 8px;

                }
                &::-webkit-scrollbar-thumb {
                    background: #ccc;
                    border-radius: 10px;
                }
                &::-webkit-scrollbar-track {
                    background: transparent;
                }
                table{
                    width: 100%;
                    border-collapse: collapse;
                    border-spacing: 0;
                    tr{
                        border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                        width: 100%;
                    }
                    td,th{
                        padding: 20px 16px;
                        font-size: 14px;
                        line-height: 16px;
                        text-align: left;
        
                    }
                    th{
                        font-weight: 600;
                        color: #534D59;
                        text-wrap: nowrap;
                        background: #fff;
                    }
                    tbody{
                        tr{ 
                            td{
                                font-weight: 400;
                                color: #474747;
                                min-width: 110px;
                                max-width: 140px;
                            }
                            &:nth-child(odd){
                                td{
                                    background: #F9FAFC;
                                }
                            }
                            &:last-child{
                                border-bottom: none;
                                td{
                                    &:first-child{
                                        border-bottom-left-radius: 12px;
                                    }
                                    &:last-child{
                                        border-bottom-right-radius: 12px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .totalTablePrices{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-right: 80px;
                margin-top: 16px;
                width: 450px;
                margin-left: auto;
                p{
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 18px;
                    color: #5D61EF;
                }
            }
        }
    }
    
}
.sparePartModal-container{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
    transition: .24s ease-in-out;
    opacity: 0;
    visibility: hidden;
    .sparePartModal{
        max-width: 440px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 2px solid rgba(0, 0, 0, 0.04);
        background: #fff;
        border-radius: 12px;
        padding: 40px 28px 28px;
        position: relative;
        .closeSpareModal{
            position: absolute;
            top: 20px;
            right: 20px;
            min-width: 24px;
            width: 24px;
            height: 24px;
            cursor: pointer;
            svg{
                width: 100%;
                height: 100%;
            }
        }
        .modalTitle{
            text-align: center;
            font-weight: 600;
            font-size: 18px;
            line-height: 22px;
            color: #000;
        }
        form{
            margin-top: 28px;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 20px;
            width: 100%;
            .form-item{
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 8px;
                width: 100%;
                position: relative;
                label{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.6);                        
                }
                input,select{
                    width: 100%;
                    background: #FBFBFB;
                    border: 1px solid rgba(0, 0, 0, 0.12);
                    border-radius: 12px;
                    padding: 18px 16px;
                    outline: none;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 20px;
                    color: #000;
                    &::placeholder{
                        color: rgba(26, 26, 26, 0.6);
                    }
                }
            }
            .submitBtn{
                width: 100%;
                padding: 12px;
                text-align: center;
                color: #fff;
                border-radius: 6px;
                background: #5D61EF;
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
                cursor: pointer;
            }
        }
    }
}
.sparePartModal-container.active{
    opacity: 1;
    visibility: visible;
}

/* Spare part MODUL */
.sparePart_management_container{
    margin: 40px 0;
    padding:0 40px;
    .page-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        h1{
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            color: #000;
        }
        .addSparePartLink{
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 8px;
            background: #5D61EF;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #fff;
            border-radius: 6px;
            transition: .3s ease-in-out;
            svg{
                min-width: 20px;
                width: 20px;
                height: 20px;
            }   
            &:hover{
                background: #5357d4;
            }         
        }
    }
    .resultCount{
        margin-top: 36px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .allSparePart-table{
        margin-top: 16px;
        border: 2px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        width: 100%;
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
            width: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            tr{
                border-bottom: 2px solid rgba(0, 0, 0, 0.04);
                width: 100%;
            }
            td,th{
                padding: 20px 16px;
                text-align: left;
                font-size: 14px;
                line-height: 16px;
                text-align: left;

            }
            th{
                font-weight: 600;
                color: #534D59;
                text-wrap: nowrap;
            }
            tbody{
                tr{ 
                    td{
                        font-weight: 400;
                        color: #474747;
                        .activeStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #01B107;
                            padding: 10px 6px;
                            background: #E1FFE2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .deactiveStatus{
                            width: 100px;
                            border-radius: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                            color: #534D59;
                            padding: 10px 6px;
                            background: #E2E2E2;
                            svg{
                                min-width: 18px;
                                width: 18px;
                                height: 18px;
                            }


                        }
                        .operation-links{
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            .operation-link{
                                min-width: 36px;
                                width: 36px;
                                height: 36px;
                                border-radius: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #F9FAFC;
                                img{
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                    &:nth-child(odd){
                        td{
                            background: #F9FAFC;
                            .operation-links{
                                .operation-link{
                                    background: #fff;
                                }
                            }
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                        td{
                            &:first-child{
                                border-bottom-left-radius: 12px;
                            }
                            &:last-child{
                                border-bottom-right-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.add_sparePart_management_container,.edit_sparePart_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .file-area{
        width: 100%;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        .file-form-main{
            padding: 20px;
            background: #F5F5F5;
            border-radius: 12px;
            width: 100%;
            .formInputs{
                width: 100%;
                margin-top: 20px;
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 20px;
                .formItem{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 8px;
                    width: 100%;
                    position: relative;
                    label{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);                        
                    }
                    input,select{
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 18px 16px;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                        &::placeholder{
                            color: rgba(26, 26, 26, 0.6);
                        }
                    }
                    .calendar-icon{
                        min-width: 24px;
                        width: 24px;
                        height: 24px;
                        position: absolute;
                        z-index: 1;
                        bottom: 16px;
                        right: 16px;
                        svg{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .mixFormItem{
                        display: flex;
                        align-items: center;
                        width: 100%;
                        background: #FBFBFB;
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        border-radius: 12px;
                        padding: 6px 6px 6px 16px;
                        gap: 12px;
                        input{
                            background: transparent;
                            border: none;
                            padding: 0;
                            border-radius: 0;
                        }
                        select{
                            border: 1px solid rgba(0, 0, 0, 0.04);
                            background: #f5f5f5;
                            padding: 10px;
                            width: max-content;
                        }
                    }
                }
            }
            .form-head{
                width: 100%;
                background: #fff;
                padding: 12px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .add_file_area{
                margin-top: 20px;
                h3{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 15px;
                    color: rgba(0, 0, 0, 0.8);
                }
                .add_file_box{
                    margin-top: 12px;
                    border: 1px dashed #5D61EF;
                    background: #F9F9FF;
                    width: 100%;
                    padding: 16px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    position: relative;
                    .uploadIcon{
                        min-width: 36px;
                        width: 36px;
                        height: 36px;
                    }
                    .box-text{
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 8px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #474747;
                        }
                        span{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: rgba(71, 71, 71, 0.5);
                        }
                    }
                    .selectFileTxt{
                        padding: 12px 28px;
                        background: #5D61EF;
                        border-radius: 8px;
                        color: #fff;
                        margin-left: auto;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 17px;

                    }
                    input{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
            .file-list{
                display: flex;
                flex-direction: column;
                align-items: start;
                width: 100%;
                .file-item{
                    margin-top: 20px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    img{
                        min-width: 40px;
                        width: 40px;
                        height: 40px;
                    }
                    .upload_line-area{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 7px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #0F91D2;
                        }
                        .line{
                            width: 100%;
                            height: 3px;
                            border-radius: 6px;
                            background: #E2E2E2;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                background: #01B107;
                                z-index: 1;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                    .removeFile{
                        min-width: 18px;
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }
        .active-toggle{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
            p{
                font-weight: 400;
                font-size: 12px;
                line-height: 15ox;
                color: rgba(0, 0, 0, 0.8);
            }
            .switch {
                position: relative;
                display: inline-block;
                width: 76px;
                height: 40px;
                input { 
                    opacity: 0;
                    width: 0;
                    height: 0;
                    &:checked + .slider {
                        background-color: #01B107;
                    }
                    &:checked + .slider:before {
                        transform: translateX(36px);
                    }
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                    &::before {
                        position: absolute;
                        content: "";
                        height: 32px;
                        width: 32px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }
                }
                .slider.round {
                    border-radius: 100px;
                    &:before {
                        border-radius: 100px;
                      }
                  }
            }
        }
        .saveForm{
            margin-top: 24px;
            display: block;
            margin-left: auto;
            padding: 14px 28px;
            color: #fff;
            background: #04C80B;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;

        }

    }
}
.view_sparePart_management_container{
    margin: 40px 0;
    padding:0 40px;
    width: 100%;
    h1{
        font-weight: 600;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        margin-top: 16px;
    }
    .view-opearation{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto;
        justify-content: end;
        .view-operation-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            font-size: 10px;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
            .icon{  
                min-width: 40px;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FBFBFB;
                border-radius: 6px;
                img{
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
    .view-container{
        width: 100%;
        margin-top: 20px;
        padding: 28px;
        background: #fbfbfb;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 40px;
        .view-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            .view-head{
                width: 100%;
                background: #fff;
                padding: 16px 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid rgba(93, 97, 239, 0.04);
                img{
                    min-width: 44px;
                    width: 44px;
                    height: 44px;
                }
                h2{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #5D61EF;
                }
            }
            .view-details{
                margin-top: 12px;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                padding: 24px;
                border-radius: 12px;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap: 16px 28px;
                .detail-item{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    p{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    h2{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #1a1a1a;
                    }
                    &:last-child,&:nth-last-child(2){
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
                .sparePartStatus{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 12px;
                    width: 100%;
                    span{
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                        color: rgba(0, 0, 0, 0.6);
                    }
                    .activeStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #01B107;
                        padding: 10px 6px;
                        background: #E1FFE2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                    .deactiveStatus{
                        width: 100px;
                        border-radius: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 16px;
                        text-align: center;
                        color: #534D59;
                        padding: 10px 6px;
                        background: #E2E2E2;
                        svg{
                            min-width: 18px;
                            width: 18px;
                            height: 18px;
                        }
    
    
                    }
                }
            }
            .file-list-title{
                font-weight: 400;
                font-size: 12px;
                line-height: 15px;
                color: rgba(0, 0, 0, 0.6);
            }
            .file-list{
                margin-top: 8px;
                padding: 24px;
                border: 1px solid rgba(0, 0, 0, 0.04);
                background: #fff;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 28px;
                width: 100%;
                .file-item{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    img{
                        min-width: 40px;
                        width: 40px;
                        height: 40px;
                    }
                    .upload_line-area{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 7px;
                        p{
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            color: #0F91D2;
                        }
                        .line{
                            width: 100%;
                            height: 3px;
                            border-radius: 6px;
                            background: #E2E2E2;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                background: #01B107;
                                z-index: 1;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                    .file-links{
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        .viewFile{
                            padding: 10px 16px;
                            border-radius: 8px;
                            background: #5D61EF;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 15px;
                            color: #fff;
                            svg{
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }
                        }
                        .downloadFile{
                            padding: 8px 14px;
                            border-radius: 8px;
                            background: #fff;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 15px;
                            color: #5D61EF;
                            border: 2px solid rgba(93, 97, 239, 0.4);
                            svg{
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }
                        }
                    }
                }
            }
        }
    }
    
}