/******************* Media css ******************* */
@media (min-width:1366px) {
    .MediaXl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .MediaXl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    } 
}

@media (min-width:1601px) {
    .col-xxll-2 {width: 16.66666667%;}
    .col-xxll-4 {width: 33.33333333%;}    
    .col-xxll-5 {width: 41.66666667%;}
    .col-xxll-6 {width: 50%;}
    .col-xxll-7 {width: 58.33333333%;}
    .col-xxll-8 {width: 66.66666667%;}
    .col-xxll-9 {width: 75%;}
    .col-xxll-10 {width: 83.33333333%;}

    .MediaXl-7 { width: 50%;}
    .MediaXl-5 { width: 50%;} 
}





@media (max-width:1600px) {
    .col-xxl-full {width: 100%;}   
    .centerBorderTable {
        border-right: 0px;
        padding-bottom: 25px;margin-bottom: 25px;
    }
    .input-group.date input, .getCustomerDetail .dropdown-toggle, .getCustomerDetail .form-group select {
        min-width: 170px;
        max-width: 170px;
    }
    .SmallTable .table-responsive table tr td {
        font-size: 16px;
    }
    .SmallTable .greenBorderBtn tr th, .SmallTable .greenBorderBtn tr td {
        padding: 10px 8px;
    }
    .table-responsive table tr th {
        font-size: 16px;
    }
    .table-responsive table tr td {
        font-size: 15px;
    }
    .table-responsive table tr th, .table-responsive table tr td {
        padding: 10px 10px;
    } 
}


@media (max-width:1300px){
    .MediaXl-7, .MediaXl-5 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (max-width:1200px){        
    .navbar {left: 0;}
    .main-sidebar {display: block;}
    .main-content {padding-left: 30px;padding-right: 30px;}
    .navbar .navbar-nav {flex-direction: row;}
    .navbar-nav .dropdown-menu {position: absolute;}
    .main-footer {padding: 15px 10px;margin-top: 15px;}
    .main-footer .footer-right {text-align: center;}

    .hamb {display: block;}
    .openMenu .hamb .nav-link {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 892;opacity:0.5;background:#000;}
    .openMenu .hamb .nav-link svg {left: -9999px;position: relative;z-index: -1;}
    .openMenu .main-sidebar {display: block;overflow-y: auto;}
    
    .navbar .hamb .nav-link svg {color: #555556;}    
    .main-sidebar {position: fixed !important;margin-top: 0 !important;z-index: 891;}

    .table-pagination ul { margin: 20px -5px 0;}
    .table-pagination ul li { margin: 0 5px;}
    .card .card-header {
        flex-wrap: wrap;
        gap: 20px;
    }

}


@media (max-width:1024px){
    .usagebox h6 {
        font-size: 18px;
    }
    .navbar .form-inline .form-control {
        min-width: 200px;
    }
}

@media (max-width:767px){    
    .main-content {padding-left: 10px;padding-right: 10px;}    
    .customerProfileBox {margin-bottom: 20px;}
    .verticalTextBox {padding: 5px 5px;margin-right: 10px;font-size: 10px;font-weight:600;border-radius:4px;}
    .table-responsive table tr th, .table-responsive table tr td {font-size: 14px;padding-left:8px;padding-right:8px;}

    .card .card-header{ padding: 10px 15px;}
    .cardContentBody {padding-left: 15px;padding-right: 15px;}
    .threeColumnMsis {margin-left:0px;margin-right: 0px;}
    .threeColumnMsis .msisList .msisListInr {margin: 10px 0;}
    .list-Name, .list-Name h5 {font-size: 14px;}
    .list-Name h5 {margin-right: 12px;}
    .BalanceBoxList h6 {font-size: 14px;}
    .BalanceBoxList {font-size: 16px;}
    .msisList h5 {font-size: 14px;}
    .msisList span {font-size: 16px;}
    .otherInformationlist {padding: 10px 20px;}
    .otherInformationlist h5 {font-size:16px;}

    .search-element {display: none;}
    .navbar .nav-link {padding-left: 4px !important;padding-right: 4px !important;}
    .table-pagination ul li span { font-size: 18px;}
    .table-pagination ul li span svg { width: 8px; height: 14px; }
    .BalanceBox {
        margin-top: 20px;
        height: auto;
    }
    .getCustomerDetail .card-header-action {
        margin: 0;
    }
    .card-header-action > div {
        margin: 0 0 0 0;
    }
    .getCustomerDetail .card-header-action {
        flex-wrap: wrap;
        gap: 20px;
    }
    
}
@media (max-width:568px){    
    .usageSummaryicon {min-width: 40px;width: 40px;height: 40px;}
    .usageSummaryItem {padding: 10px 10px;}
    .vHr {margin: 0 10px;}
    .usagebox:not(:last-child) {margin-right: 20px;}
    .usagebox h3 {font-size: 12px;}
    .usagebox h6 {font-size: 15px;}
    .rechargeOrderRight {overflow-x: auto;}
    .dropdown-mail .dropdown-menu {right: auto;left:-100px;}

    .input-group.date input, .getCustomerDetail .dropdown-toggle, .SearchBox, .getCustomerDetail .form-group select {
        width: 100%;
        max-width: 100%;
    }
    .card-header-action > div {
        margin: 0 0 0 0;
        width: 100%;
    }
    .getCustomerDetail .card-header-action {
        gap: 10px;
    }

    
    .msisidn-popup-box h3 {
        font-size: 21px;
        padding-bottom: 13px;
        margin-bottom: 13px;
    }
    button.close-popup {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        border: 2px solid #09317D;
        position: absolute;
        right: -15px;
        top: -15px;
    }
    .close-popup svg {
        width: 15px;
        height: 15px;
    }
    .msisidn-number {
        padding:10px 0;
    }
    .form-box label {font-size: 14px; margin-bottom: 10px;}
    .MsisidnInputBox input {
        min-height: 40px;
    }
    .dialpad {
        min-width: 50px;
    }
    .dialpad .material-icons {
        font-size: 20px;
    }
    .MsisidnInputBox {
        padding-bottom: 30px;
    }

    .submit_btn .btn {
        min-width: 110px;
        min-height: 35px;
        font-size: 16px;
        line-height: 37px;
        margin-left: 15px;
    }
    .msisidn-popup-box h3:before {
        height: 3px;
    }
    button.best-offer {
        padding: 5px;
    }
    button.best-offer img {
        max-width: 70px;
        display: block;
    }
}

/******************* Media css ******************* */