/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 8, 2024, 8:07:11 AM
    Author     : 17113
*/

.box-shadow-sidemenu {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


@media (max-width: 768px) {
    .topbar {
        z-index: 99999 !important;
    }
    .side-menu {
      z-index: 9999 !important;
      /*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /*Cover all card*/
    .card * {
        font-size: 12px !important;
    }
    .card-header {
        padding: 0 20px 0 20px !important;
    }
    .card-body {
        padding: 10px;
    }
    
    /*Datatables*/
    .dataTables_filter, .dataTables_length {
        display: none !important;
    }
    
    /*Side bar*/
    #sidebar-menu > ul > li > a {
        margin-right: 20px;
    }
    #sidebar-menu span {
        font-size: 11px !important;
    }
    
    /*Cover all buttons*/
    .btn-acleda-cloudburst {
        width: 100% !important;
        margin: 5px auto;
    }
    
    /*Help & Feedback*/
    .offcanvas-end {
        border: none;
    }
    
    /*User settings*/
    .filters {
        width: 0 !important;
        span {
            color: #1c304f !important;
        }
    }
    .filters:before, .filters:after {
        background: #1c304f;
    }
    .select-club-services.open ul, .select-club-services ul {
        position: absolute !important;
        left: -200px !important;
        width: 200px !important;
    }
    
    .profile-wrapper {
        .card-header {
            padding: 20px !important;
        }
        .btn-acleda {
            width: 100%;
        }
    }
    
}

/*---------- index ----------*/
.container {
    container: row / inline-size;
}
@container (max-width: 500px) {
    .language-select2 {
        display: none !important;
    }
    .left-content, .left-content img {
        height: 250px !important;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0 !important;
    }
    .right-content {
        height: 280px !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border: none !important;
    }
    .login {
        h3 {
            font-size: 16px;
        }
        input {
            font-size: 12px !important;
        }
    }
    .btn-login {
        margin: 1.5rem 0 1.5rem 0 !important;
    }
}

/*---------- topbar right ----------*/
.topbar {
    container: user-details / inline-size;
}
.navbar .user-details {
    min-height: fit-content;
    padding: 0;
    border: 0;
    margin-right: 20px;
}
@container (max-width: 500px) {
    .navbar .user-details {
        margin-right: 0 !important;
        min-height: 70px !important;
    }
    .navbar .user-details .user-profile, .navbar .user-details .khqr-icon {
        margin-top: 18px;
    }
}


/*---------- dashboard type ----------*/
.navbar {
    container: nav-tabs / inline-size;
}
@container (max-width: 500px) {
    .dashboard-form {
        width: 100% !important;
    }
    .nav-tabs {
        font-size: 12px;
    }
    .dashboard-navbar li, .dashboard-navbar a {
        width: 33% !important;
        min-width: fit-content !important;
    }
    .navbar-brand {
        display: none;
    }
}
@container (max-width: 375px) {
    .nav-link {
        font-size: 10px;
    }
}
@container (max-width: 320px) {
    .nav-link {
        font-size: 10px;
    }
    .dashboard-navbar li, .dashboard-navbar a {
        width: 32% !important;
        min-width: fit-content !important;
    }
}

/*---------- yesterday, daily portlet ----------*/
.list-group-item-sales:after, .list-group-item-refund:after {
    content: '';
    height: 80%;
    width: 1px;
    position: absolute;
    right: 0;
    top: 10%;
    border-right: 1px solid #dddddd !important;
}

.label-net-sales:before {
    content: '';
    width: 26px;
    height: 26px;
    background-color: #2bdfcd;
    border-radius: 50%;
    position: absolute;
    left: 0;
}
.label-sales:before, .label-refund:before, .label-net-sales-yesterday:before {
    content: '';
    width: 26px;
    height: 26px;
    background-color: #2d77cf;
    border-radius: 50%;
    position: absolute;
    left: 0;
}

@media only screen and (max-width: 990px) {
    .portlet-wrapper-daily {
        .portlet {
            background: transparent;
            border: none !important;
            box-shadow: none !important;
        }
    }
    .portlet-top .col-12 {
        padding: 0 !important;
    }
    .net-sales-yesterday-col-11, .net-sales-row {
        background: transparent !important;
        box-shadow: none !important;
    }
    .label-net-sales:before {
        content: '';
        background-color: transparent;
    }
    .label-sales:before, .label-refund:before, .label-net-sales-yesterday:before {
        content: '';
        background-color: transparent;
    }
    
    .portlet-wrapper-daily .list-group {
        height: 100%;
        background: #ffffff;
        border-radius: 10px !important;
        padding: 10px !important;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }
    .portlet-wrapper-daily .col-6:nth-child(1) .list-group:before {
        background-color: #2bdfcd;
        border-top-left-radius: 10px;
        top: 10px;
        left: 10px;
    }
    .portlet-wrapper-daily .col-6:nth-child(2) .list-group:before {
        top: 10px;
        left: 5px;
        border-top-left-radius: 10px;
    }
    .portlet-wrapper-daily .col-6:nth-child(3) .list-group:before {
        top: 5px;
        left: 10px;
        border-top-left-radius: 10px;
    }
    .portlet-wrapper-daily .col-6:nth-child(4) .list-group:before {
        top: 5px;
        left: 5px;
        border-top-left-radius: 10px;
    }
    .portlet-wrapper-daily .col-6:nth-child(n + 2) .list-group:before {
        background-color: #2d77cf;
    }
    .portlet-wrapper-daily .col-6:nth-child(1) {
        padding: 10px 5px 5px 10px;
    }
    .portlet-wrapper-daily .col-6:nth-child(2) {
        padding: 10px 10px 5px 5px;
    }
    .portlet-wrapper-daily .col-6:nth-child(3) {
        padding: 5px 5px 10px 10px;
    }
    .portlet-wrapper-daily .col-6:nth-child(4) {
        padding: 5px 10px 10px 5px;
    }
    .portlet-wrapper-daily .list-group:before {
        content: '';
        width: 40px;
        height: 40px;
        border-bottom-right-radius: 90%;
        position: absolute;
    }
    .portlet-wrapper-daily .list-group-item {
        padding: 0;
    }
    .portlet-wrapper-daily .list-group-item:after {
        content: "";
        border-right: none !important;
    }
    .portlet-wrapper-daily .list-group-item div, .portlet-wrapper-daily .list-group-item h4 {
        padding-left: 0 !important;
        font-size: 12px;
    }
    .portlet-wrapper-daily .list-group-item div {
        width: 100% !important;
    }
    .portlet-wrapper-daily .list-group-item .mw-60 {
        min-width: 30px !important;
    }
    .portlet-wrapper-daily .list-group-item h4:before {
        content: "";
        background: transparent;
    }
    .dolla-ccy {
        font-size: 16px !important;
    }
    .riel-ccy {
        font-size: 24px !important;
    }
    .portlet-top .col-6:nth-child(2){
        padding-right: 10px !important;
    }
    .portlet-top .col-6:nth-child(3){
        padding-left: 10px !important;
        padding-right: 5px !important;
    }
    .portlet-top .col-6:nth-child(4){
        padding-left: 5px !important;
    }
    .footer-login {
        margin-top: 3rem !important;
    }
    .twofa-auth-card {
        min-width: 310px !important;
        padding: 1.5rem !important;
    }
}

/*---------- monthly portlet ----------*/
.portlet-wrapper-monthly {
    container: portlet-wrapper-monthly / inline-size;
}
@container (max-width: 500px) {
    #switchCurrencyButton .checkbox:checked + .knobs:before {
        left: 26px !important;
    }
    #monthlySalesLabel {
        font-size: 14px;
    }
}

/*---------- TXN details portlet ----------*/
.portlet-wrapper-txn {
    container: portlet-wrapper-txn / inline-size;
}
@container (max-width: 768px) {
    .dataTables_length {
        display: none !important;
    }
}

/*---------- Cashiers module ----------*/
.cashier-wrapper {
    container: cashier-wrapper / inline-size;
}
@container (max-width: 500px) {
    .select-outlet-wrapper {
        margin-left: 0 !important;
    }
}