@media (width: 320px) and (height: 568px){
    .promotion .custom-controls-stacked.control-collapse {
        padding: 56% 0!important;
    }
    .invoice-popup-pending .width-dollar,
    .invoice-popup-paid .width-dollar{
        width: 47px !important;
        overflow: hidden;
    }
    .modal-center.invoice-popup-pending .modal-dialog,
    .modal-center.invoice-popup-paid .modal-dialog{
        bottom: -16% !important;
    }
    .expenses .expenses-popup .modal-dialog{
        bottom: 50% !important;
    }
    .expenses .expenses-popup .d-offset-0{
        margin-left: 0 !important;
    }
}
@media (width: 375px) and (height: 667px){
    .table-dark-blue #modal-center-table .dataTables_scrollBody {
        height: 357px !important;
    }
    #modal-center-table .modal-content{
        height: 638px;
    }

    .promotion .custom-controls-stacked.control-collapse {
        padding: 50% 0!important;
    }

    .invoice-popup-pending .width-dollar,
    .invoice-popup-paid .width-dollar{
        width: 64px !important;
    }
    .modal-center.invoice-popup-pending .modal-dialog,
    .modal-center.invoice-popup-paid .modal-dialog {
        bottom: 50% !important;
    }

    .modal-center.invoice-popup-pending .modal-body,
    .modal-center.invoice-popup-paid .modal-body{
        height: 574px !important;
        overflow-y: scroll !important;
    }



    .expenses .expenses-popup .modal-dialog{
        bottom: 50% !important;
    }
    .expenses .expenses-popup .d-offset-0{
        margin-left: 0 !important;
    }

}
/*iphone X*/
@media (width: 375px) and (height: 812px){
    .invoice-popup-pending .width-dollar,
    .invoice-popup-paid .width-dollar {
        width: 64px !important;
    }
    .modal-center.invoice-popup-pending .modal-dialog,
    .modal-center.invoice-popup-paid .modal-dialog {
        bottom: 50% !important;
    }

    .modal-center.invoice-popup-pending .modal-body,
    .modal-center.invoice-popup-paid .modal-body{
        height: 730px !important;
        overflow-y: scroll !important;
    }


    .expenses .expenses-popup .modal-dialog{
        bottom: 50% !important;
    }
    .expenses .expenses-popup .d-offset-0{
        margin-left: 0 !important;
    }
}

@media (width: 667px) and (height: 375px){
    .table-dark-blue #modal-center-table .dataTables_scrollBody {
        height: 357px !important;
    }
    #modal-center-table .modal-content{
        height: 638px;
    }
}
@media (width: 414px) and (height: 736px){
    .table-dark-blue #modal-center-table .dataTables_scrollBody {
        height: 429px !important;
    }
    #modal-center-table .modal-content{
        height: 710px;
    }

    .promotion .custom-controls-stacked.control-collapse {
        padding: 33% 0!important;
    }
    .invoice-popup-pending .width-dollar,
    .invoice-popup-paid .width-dollar {
        width: 78px !important;
    }
    .modal-center.invoice-popup-pending .modal-dialog,
    .modal-center.invoice-popup-paid .modal-dialog {
        bottom: 50% !important;
    }

    .modal-center.invoice-popup-pending .modal-body,
    .modal-center.invoice-popup-paid .modal-body{
        height: 574px !important;
        overflow-y: scroll !important;
    }

    /* ----- modal techpayout ----- */
    .modal-center.invoice-popup-pending .modal-body,
    .modal-center.invoice-popup-paid .modal-body,
    .modal-center .modal-body{
        height: 630px !important;
        overflow-y: scroll !important;
    }

    .expenses .expenses-popup .modal-dialog{
        bottom: 50% !important;
    }
    .expenses .expenses-popup .d-offset-0{
        margin-left: 0 !important;
    }
}

@media (min-width: 441px) and (max-width: 575px){
    .payment .lheight-makepay{
        line-height: 27px !important;
    }


}
@media (max-width: 575px){

    /*css for HEADER*/
    .header-info{
        padding: 0 10px;
        margin: 0;
    }
    .header-info .pl-10,
    .header-info .d-pl-10{
        padding-left: 0 !important;
    }

    .topbar{
        padding: 0;
    }
    .topbar-right{
        display: grid;
    }
    .topbar-btn{
        display: flex;
    }
    .topbar-btn .ti-align-right{
        display: none;
    }
    .topbar-divider{
        display: none;
    }
    .header-action{
        /* padding: 10px  10px 0 10px; */
    }
    .header-action .nav-link{
        padding-top: 0px;
    }

    /*css for TITLE PAGE*/
    .header-title{
        margin-bottom: 5px !important;
    }
    .header-info{
        border-left: 0 !important;
    }

    /*CSS for MAIN-CONTENT*/
    .card{
        margin-bottom: 0;
    }
    .d-mb-0{
        margin-bottom: 0;
    }
    .card-body .bg-grey{
        padding: 15px 0;
    }
    .main-content {
        padding: 2px 0 2px 2px;
        -webkit-box-flex: 1;
        flex: 1 0 auto;
        width: 100%;
        overflow-x: hidden;
    }
    label{
        line-height: 1.2;
    }

    .wrapper-table{
        overflow: scroll;
    }
    .tbl-content{
        height: 300px;
    }

        /*--------------------*-------------------- HEIGHT of SCROLL BODY -------------- */
    .table-sm th, .table-sm td {
        padding: 3px 16px;
    }
    .mb-20{
        margin-bottom: 15px !important;
    }

    /*--------------------*-------------------- HEIGHT of TABLE -------------- */
    .hardware-tbl-view{
        height: 410px ;
    }


    /*css for TOOLBAR - SEARCH */
    .btn-toolbar span.d-none,
    .btn-toolbar .d-none{
        display: none !important;
    }
    /* .toolbar .pr-lg-10{
        padding-right: 0;
        padding-left: 10px !important;
    } */


    .payment .lheight-makepay{
        line-height: 1.2 !important;
        padding-top: 5px;
    }
    .payment .lheight-makepay::after{
        top: 4px !important;
    }

    .download-sig{
        font-size: 12px !important;
        padding: 5px 10px !important;
        width: 100%;
    }

    /*css for SUBMISSION TAB*/
    .td-signature img{
        text-align: center;
    }

    .btn-toolbar .btn-w-xl
    {
        width: 68px;
    }
    .lookup .w-200px{
        width: 140px !important;
    }
    .pagination{
        display: none;
    }
    .d-none-textbtn{
        display: none !important;
    }

    /*-------------------------------TABLE SCROLL OF HARDWARE VIEW*/
    .table td, .table th{
        padding: 6px;
    }
    .money-inline-block{
        padding-left: 6px;
    }
    .name-hardware-th{
        width: 30%;
    }
    .sub-total-th{
        width: 30%;
    }
    .liheight-ckb{
        line-height: 1.5;
    }
    .lookup .d-none{
        display: none !important;
    }
    .lookup .btn-tbar-main.w-100{
        /*width: 80px !important;*/
    }


    /*-------------------------------TABLE responsive POS ACCOUNT - PAYMENT 3 COLUMNS*/
    .d-table-responsive{
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    /*REPORT*/

    /* .report .toolbar .pr-lg-10{
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    .report .row-summary .pr-lg-10{
        padding-top: 5px !important;
    } */

    .report .row-bill .pb-15{
        padding-bottom: 10px !important;
    }
    .report .row-summary .txt-big{
        font-size: 12px;
        text-align: left;
        padding-left: 0;
    }

    div.dataTables_wrapper div.dataTables_info{
        display: none;
    }
    .report .row-bill{
        padding: 0 15px 5px;
    }

    .toolbar-table-tab{
        padding: 10px 10px 0 10px !important;
    }
    /*---------------------------------------------POS ACC PHOTO*/
    .photo-padding{
        padding: 15px 15px 0 !important;
    }


    /*----------------------------------------DASHBOARD--------------*/
    .main-content-dark{
        padding: 10px !important;
        background: #284552 ;
        overflow-x: hidden !important;
    }

    .user .pr-lg-10{
        padding-right: 10px !important;
    }

    .user .d-none{
        display: block !important;
    }

    /*----------------------------------------------USER AND PERMISSION*/

    .user .modal-content{
        padding: 0 !important;
    }

    /* ------------------------ MODAL TABLE - REVENUE REPORT*/
     #modal-center-table .modal-dialog{
         -webkit-transform: translate(-50%, 0) !important;
         transform: translate(-50%, 0%) !important;
         top: 0;
     }

     /*SALON SETTING*/
    .main-content-dark .radio-algin{
        top: 7px;
    }
    .main-content-dark .custom-controls-stacked .d-p-0{
        padding: 0 !important;
    }
    .main-content-dark .custom-controls-stacked .width-in{
        max-width: 30px !important;
    }
    .control-label.pl-0{
        padding-left: 0 !important;
    }
    .option-item .text-right{
        text-align: left !important;
    }
    .option-item .text-right.padding-left{
        padding-left: 30px !important;
    }
    .custom-controls-stacked .text-right{
        text-align: left !important;
    }
    .custom-controls-stacked .text-right.col-0{
        display: none;
    }
    .promotion .text-right{
        text-align: right !important;
    }
    .promotion .col-10{
        padding-right: 5px;
        padding-left: 0;
    }

    .pt-60{
        padding-top: 0 !important;
    }
    .d-padding-right{
        padding-right: 15px !important;
    }
    #receiveEmails{
        margin-top: 10px;
    }
    .padding-title.mr-15{
        margin-left: 15px;
    }
    .padding-right-5,
    .padding-right-10{
        padding-right: 15px !important;
    }
    .padding-left-5,
    .padding-left-10{
        padding-left: 15px !important;
    }

    .dataTables_scroll{
        border-bottom: none !important;
    }

    /*-----------------------------------index*/
    .notification .first-new,
    .news .first-new{
        border-top: 1px solid rgba(77,82,89,0.07) !important;
    }

    /*-------------------------------------------INVOICE*/
    .invoice-popup-pending .payment-section table.dataTable tbody td,
    .invoice-popup-paid .payment-section table.dataTable tbody td{
        padding: 5px 3px !important;
    }

    .invoice-popup-pending .mb-40,
    .invoice-popup-paid .mb-40{
        margin-bottom: 20px !important;
    }

    /*----------------------------------EXPENSES*/
    .expenses .expenses-popup .d-textleft{
        text-align: left !important;
    }
    .expenses .expenses-popup .bg-grey{
        padding: 0 !important;
    }
    .expenses .expenses-popup .d-offset-0{
        margin-left: 0 !important;
    }


    /*salon setting - service*/
    .service-sm-edit .flexbox{
        display: block !important;
    }
    .service-sm-edit .btn-toolbar.justify-content-end{
        justify-content: flex-start !important;
    }

    .service-sm-edit .pd-l-r-0{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /*payment tech*/
    .payment-tech .d-padding-top-nd-col{
        padding-top: 15px !important;
    }

    .d-border-radius-top{
        border-radius: 6px 6px 0 0 !important;
    }
    .d-border-radius-bottom{
        border-radius: 0 0 6px 6px !important;
    }
    .panel-transparent {
        width: 100%;
        height: 400px;
        background-color: rgba(5,4,2,0);
    }

    /*payment*/
    .payment-tech .pt-md-15{
        padding-top: 15px !important;
    }
    .payment-tech .d-pl-0{
        padding-left: 0 !important;
    }
    /*settin Clock-in*/
    .fc-pl-small{
        padding-left: 0 !important;
    }
    .fc-pl-small:focus{
        padding-left: 0 !important;
    }

    /*toolbar of booking  07/01/2020*/
    .ml-toolbar {
        margin-left: 15px;
    }
    .width-toolbar {
        max-width: calc(100% - 30px);
    }
    .btn-label-left{
        left: -30%;
    }
    .btn-label-right{
        right: -30%;
    }
}


@media (max-width: 767px) {

    /*css for TOOLBAR - SEARCH */
    .flexbox{
        display: flex;
    }

    .aside-toggler{
        right: -30px !important;
    }
    .aside-toolbar{
        margin-top: 118px;
    }
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate{
        text-align: left !important;
    }
    .width-sum-payment{
        width: 199px;
    }
    .topbar .dropdown.show .topbar-btn,
    .topbar-btn:hover{
        border-top-color: transparent;
    }


}
@media (min-width: 576px){
    .pr-lg-10{
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    .td-signature img{
        text-align: left;
    }


    .payment .lheight-makepay::after{
        top: 4px;
    }

    .chbox-payment-term::after{
        top: 2px !important;
    }

    .user .modal-dialog{
          max-width: 900px;
      }

    .customer-display .custom-control-label.ptop-lbl{
        padding-top: 5px !important;
    }



}


@media (min-width: 576px)  and (max-width: 768px){
    .expenses .expenses-popup .bg-grey{
        padding: 0 !important;
    }
}
@media (min-width: 576px)  and (max-width: 767px){
    /*css for TOOLBAR - SEARCH */
    .btn-toolbar span.d-none{
        display: contents !important;
    }
    .btn-toolbar .d-none{
        display: none !important;
    }

    .report .table-responsive{
        display: table;
    }
    .main-content-dark .custom-controls-stacked .width-in{
        max-width: 65px !important;
    }
    /*----------------------------------------------index*/
    .notification .padding-col-left,
    .news .padding-col-left{
        padding-right: 0 !important;
    }
    .notification .padding-col-right,
    .news .padding-col-right{
        padding-left: 0 !important;
    }
}
@media (max-width: 768px){

    .width-td-parent{
        width: 54%;
    }
    .width-right-cont{
        width: 50%;
    }
    .main-content{
        padding: 2px;
    }
    .main-content-grey{
        /* background: #8598a0; */
    }
    .header-info{
        border-left: none;
    }
    /*--------------------*-------------------- Pos ACC of Personal-------------- */
    .d-mtop-15{
        margin-top: 15px;
    }
    .d-pbottom-10{
        padding-bottom: 10px ;
    }

    .header-tab .header-action a{
        margin-bottom: 5px;
    }
    /*--------------------*-------------------- IMG og AGENT-------------- */
    .width-sig{
        width: 100%;
    }

    /*--------------------*-------------------- PHOTO-------------- */
    .photo-padding{
        padding: 0;
    }
    /*--------------------*-------------------- PAYMENT-------------- */
    .card-body .bg-grey {
        padding: 10px 0;
    }
    .padding-left-0{
        padding-left: 10px;
    }
    .d-padding-top{
        padding-top: 30px !important;
    }
    .d-padding-left-checkbox{
        padding-left: 15px !important;
    }



    /*--------------------------------------------REVENUE REPORT*/
    .report .pb-10{
        padding-bottom: 5px !important;
    }
    .report .d-border-bottom-bill,
    .report .d-border-bottom-bill-3col{
        border-bottom: 1px dashed #7abed3 !important;
    }
    .report .border-right-bill,
    .report .border-right-bill-3col{
        border-right: 0 !important;
    }
    .report .pb-last-15{
        padding-bottom: 15px !important;
    }
    .d-tbl-responsive{
        display: block;
        width: 100%;
        overflow-x: scroll;
    }

    /*------------------BOTTOM PAYMENT POPUP--------------------REVENUE REPORT*/

   .payment-box{
        display: block !important;
        position: fixed;
        bottom: 0;
        z-index: 999;
        background: #333;
        height: 50px;
        width: 100%;
    }
   .payment .txt-big{
       color: #fff;
       font-size: 12px;
       font-weight: 500 !important;
   }
   .payment-box .txt-big-bold{
       font-weight: 500;
       padding: 2px 15px;
       font-size: 16px;
       color: #4dcef6;
   }
   .report-popup .row-summary,
   .report-popup .row-bill{
       display: none;
   }
   .payment-box.table td{
       border-top: none;
   }
   .payment-box .txt-right{
       text-align: right !important;
   }
   .btn-payment{
       background: transparent;
       width: 100%;
       height: 50px ;
       display: block !important;
       position: fixed;
       bottom: 0;
       z-index: 9999;
       border: none;
   }
    .pay-content{
        bottom: 42px;
        position: fixed;
        z-index: 999;
        background: rebeccapurple;
        color: rgb(255, 255, 255);
        margin-bottom: 0;
    }
    .show-payment-popup{
        position: fixed;
        bottom: 0;
        z-index: 9999;
        width: 100%;
    }


    /*----------------------------------HAREWARE TABLE*/

    .hardware-list{
        padding: 0 0 2px 0 !important;
    }

    /*-------------------------------------PROFILE */

    .border-left-light{
        border-left: none !important;
    }

    .aside.border-left{
        border-right: 1px solid #5a808b !important;
        border-left: none !important;
    }

    /*----------------------------------------------USER AND PERMISSION*/
    .user .modal-dialog{
        width: 100%;
        padding: 15px;
    }
    .user .modal-content{
        padding: 0 !important;
    }
    .aside{
        margin-bottom: 0;
        margin-top: 0;
        margin-left: -230px ;
    }
    .margin-left-aside{
        margin-left: 0 !important;
    }
    .aside-toggler{
        display: inline-block !important;
    }
     .right-content-aside{
        margin-left: -15px;
    }

    .aside-expand-md.aside{
        left: 0;
    }
     .aside-open  .aside-expand-md.aside{
        margin-left: 0 !important;
        width: 250px !important;
    }




    /*--------------------------------aside - SALON MANAGEMENT*/
    .header-info{
        padding: 8px 10px 8px 10px !important;
    }
    .header-toolbar .pl-pr-10{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .header-toolbar .d-w-100{
        width: 100%;
    }
    .header-toolbar .width-salon{
        width: auto !important;
    }
    .header-toolbar .d-text-center{
        text-align: center;
    }
    .header-toolbar .row{
        padding-top: 0 !important;
    }
    .padding-row{
        padding-left: 0;
    }
    .promotion .btn-small.mr-15,
    .customer-display .btn-small.mr-15,
    .btn-small.mr-15{
        margin-right: 10px !important;
    }
    .promotion .col-12.pr-0,
    .customer-display .col-12.pr-0{
        padding-left: 0 !important;
    }
    .promotion .color-note.pl-15,
    .customer-display .color-note.pl-15{
        padding-left: 0 !important;
    }


    .main-content-light .paddingleft-sm{
       margin: 10px 10px 0 10px;
    }
    .salon-setting{
        padding: 10px !important;
    }
    .main-content-light .aside{
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .profile .right-content-aside{
        margin-left: 0 !important;
    }
    .site-footer p{
        padding: 5px 0 0 0 !important;
    }

    .d-pt-5{
        padding-top: 5px !important;
    }

    /*----------------------------------invoice*/

    .invoice-popup-pending  .form-group .form-control,
    .invoice-popup-paid  .form-group .form-control{
        padding: 7px 10px !important;
    }
    .invoice-popup-pending .d-margin,
    .invoice-popup-paid .d-margin{
        margin: 0 !important;
    }

     .invoice-popup-pending .card-body .bg-grey,
     .invoice-popup-paid .card-body .bg-grey {
        padding: 10px !important;
    }

    .invoice-popup-pending .border-right,
    .invoice-popup-paid .border-right{
        border-right: none !important;
    }
    .invoice-popup-pending .pding-price,
    .invoice-popup-paid .pding-price{
        padding-right: 0 !important;
    }
    .invoice-popup-pending .row.mr-15,
    .invoice-popup-paid .row.mr-15{
        margin-right: 0 !important;
    }
    .invoice-popup-pending .d-padding,
    .invoice-popup-paid .d-padding{
        padding: 0 !important;
    }


    /*SALON MANAGEMENT - SERVICE*/
   /*  .toolbar .pr-lg-10 {
        padding-right: 10px !important;
        padding-left: 10px !important;
    } */

    /*payment*/
    .payment-tech .pleft-0{
        padding-left: 0 !important;
    }

    /*report settlement*/
    .padding-bottom-pinpad{
        display: none;
    }
    .padding-md-settlement{
        padding-top: 20px !important;
    }

    /*salon setting - TECH*/
    .margin-row-onecol{
        margin-right: -15px ;
        margin-left: -15px ;
    }





}
@media (width: 768px){
    .pb-md-0, .py-md-0 {
        padding-bottom: 0 !important;
    }
    .report .d-border-bottom-bill,
    .report .d-border-bottom-bill-3col{
        border-bottom: none !important;
    }
    .report .border-right-bill-3col{
        border-right: 1px dashed #7abed3 !important;
    }
    .site-footer p{
        padding: 5px 0 5px 0 !important;
    }
    .d-mtop-15 {
        margin-top: 0 !important;
    }
    .user .btn-new-app{
        padding: 4px 8px !important;
    }
    .notification .padding-col-left,
    .news .padding-col-left{
        padding-right: 0 !important;
    }
    .notification .padding-col-right,
    .news .padding-col-right{
        padding-left: 0 !important;
    }
    .invoice-popup-pending .width-dollar ,
    .invoice-popup-paid .width-dollar{
        width: 72px !important;
        text-align: right;
    }
    .invoice-popup-pending .border-right,
    .invoice-popup-paid .border-right{
        border-right: 1px dashed #fff !important;
    }
    .invoice-popup-pending label.padding-th,
    .invoice-popup-paid label.padding-th{
        padding: 0 15px 5px 0 !important;
    }
    .invoice-popup-pending .row.mr-15,
    .invoice-popup-paid .row.mr-15{
        margin-right: 10px !important;
    }
    .report .row-bill .border-right-bill {
        border-right: 1px dashed #7abed3 !important;
    }

    /*modal*/
    .modal-center.invoice-popup-pending .modal-dialog,
    .modal-center.invoice-popup-paid .modal-dialog,
    .modal-center .modal-dialog{
        bottom: 50% !important;
    }

    .modal-center.invoice-popup-pending .modal-body,
    .modal-center.invoice-popup-paid .modal-body,
    .modal-center .modal-body{
        height: 750px !important;
        overflow-y: scroll !important;
    }
    .modal-center .modal-notifi .modal-body{
        height: auto !important;
        overflow-y: scroll !important;
    }
    .payment-tech .d-none{
        display: block !important;
    }

    .payment-tech .dp-md-none {
        display: block !important;
    }
    .border-bottom-white{
        display: none !important;
    }
    .payment-tech .pl-md-15{
        padding-left: 15px !important;
    }
    .payment-tech .pr-md-15{
        padding-right: 15px !important;
    }
    .payment-tech .pr-md-0{
        padding-right: 0 !important;
    }
    .payment-tech .pt-md-15{
        padding-top: 0 !important;
    }
    .payment-tech .show-repeat-tech{
        margin: 10px 0 !important;
        padding: 10px !important;
    }
    .payment-tech .d-none{
        display: block;
    }
    .payment-tech .hide-title-md{
        display: none !important;
    }
    .payment-tech .padding-next {
        padding-left: 22px !important;
    }
    .payment-tech .margin-back {
        margin-left: -20px !important;
        margin-right: 0;
    }
    .payment-tech .mr-md-back{
        margin-left: -10px !important;
    }
    .payment-setting .md-justify-start{
        justify-content: start !important;
    }
    .payment-setting .pl-md-0{
        padding-left: 0 !important;
    }

    /*report settlement*/
    .padding-bottom-pinpad{
        display: block;
    }
    .padding-md-settlement{
        padding-top: 18px !important;
        padding-left: 30px !important;
    }
    .title-left{
        padding-bottom: 5px;
    }


}



@media (min-width: 769px) and (max-width: 790px){
    .user .btn-new-app{
        padding: 4px 9px !important;
    }
}
@media (min-width: 769px){




    /*------------------BOTTOM PAYMENT POPUP--------------------REVENUE REPORT*/
    .report .payment-box{
        display: none !important;
    }


    .report .d-border-bottom-bill{
        border-bottom: 0 !important;
    }
    .report .border-right-bill,
    .report .border-right-bill-3col{
        border-right: 1px dashed #7abed3 !important;
    }

    /*css for TOOLBAR - SEARCH */
    .btn-toolbar span.d-none{
        display: contents !important;
    }



    /*--------------------*-------------------- HEIGHT of SCROLL BODY -------------- */
    .dataTables_scrollBody{
        height: auto !important;
    }

    /*----------------------------- ICON MONEY HARDWARE*/
    .hardware-tbl-view .width-responsive{
        width: 90%;
    }
    .hardware-tbl-view .padding-responsive{
        padding-right: 20px;
    }

    /*--------------------------------aside - SALON MANAGEMENT*/
    .header-info{
        padding: 8px 10px 8px 10px !important;
    }
    .header-toolbar .pl-pr-10{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .header-toolbar .d-w-100{
        width: 230px !important;
    }
    .header-toolbar .width-salon{
        width: 230px !important;
    }
    .header-toolbar .d-text-center{
        text-align: center;
    }
    .header-toolbar .row{
        padding-top: 0 !important;
    }
    .header-toolbar .col-sm-4{
        max-width: 220px !important;
        padding-right: 10px !important;
    }
    .margin-left-aside{
        margin-left: 0 !important;
    }
    .aside-toolbar{
        margin-top: 0;
        margin-bottom: 0;
    }
    .margin-left-aside{
        padding-left: 0;
    }
    .right-content-aside{
        margin-left: 230px ;
    }



            /*---------Profile aside*/
    .card-grey-side.right-content-aside{
        margin-left: 240px;
    }
    .margin-left-aside  .aside{
        /* margin-top: 0; */
        margin-bottom: 0;
    }
    .border-left-light{
        border-left: none !important;
    }
    .aside-open .aside,
    .aside {
        border-right: 1px solid #fff;
    }
    .paddingleft-sm{
        padding-left: 10px !important;
    }

    /*----------------------------------invoice*/
    .invoice-popup-pending .modal-header,
    .invoice-popup-paid .modal-header{
        /*border-bottom: none !important;*/
        border-bottom: 1px solid #e9ecef !important;
    }
    .invoice-popup-pending .width-dollar,
    .invoice-popup-paid .width-dollar{
        width: 72px !important;
        text-align: right;
    }

    .payment-tech .d-none{
        display: block !important;
    }

    .payment-tech .dp-md-none {
        display: block !important;
    }
    .border-bottom-white{
        display: none !important;
    }
    .payment-tech .show-repeat-tech{
        padding: 10px 15px !important;
        margin: 10px 0 !important;
    }

    .payment-tech .hide-title-md{
        display: none !important;
    }
    .payment-tech .padding-next {
        padding-left: 22px !important;
    }
    .payment-setting .md-justify-start{
        justify-content: start !important;
    }
    .payment-setting .pl-md-0{
        padding-left: 0 !important;
    }

    /*edit to big screen: payment tech*/
    .payment-tech .pl-lg

        /*report settlement*/
    .padding-bottom-pinpad{
        display: block;
    }
    .padding-md-settlement{
        padding-top: 18px !important;
        padding-left: 30px !important;
    }
    .title-left{
        padding-bottom: 18px;
    }
    /*----------------settlement*/
    .padding-bottom-pinpad {
        padding-bottom: 182px;
    }


}

    @media (min-width: 769px)  and (max-width: 992px){
        .flexbox{
            display: flex;
        }

        .hw-tbl-edit.table-no-responsive{
            display: table;
        }


        /*--------------------------------------PROFILE*/
        .aside.border-left{
            border-left: none !important;
        }

        /*----------------------------------------------USER AND PERMISSION*/
        .user .modal-dialog{
            width: 738px;
            padding: 15px;
        }
        .user .modal-content{
            padding: 0 !important;
        }

        .main-content-dark {
            padding: 10px 10px 0 0 !important;
        }


        .main-content-dark .custom-controls-stacked .width-in{
            max-width: 86px !important;
        }

        .main-content-light .paddingleft-sm{
            margin: 10px 10px 0 0;
        }
    }


@media (min-width: 769px)  and (max-width: 1199px){

    /*---------------------------------------- POS ACCOUNT - PAYMENT */
    .d-padding-left-checkbox{
        padding-left: 15px !important;
    }


    .user .btn-new-app{
        padding: 4px 8px !important;
    }

    .main-content-light .paddingleft-sm{
        padding: 0 15px 0 10px !important;
    }
    /*----------------------------------------------index*/
    .notification .padding-col-left,
    .news .padding-col-left{
        padding-right: 0 !important;
    }
    .notification .padding-col-right,
    .news .padding-col-right{
        padding-left: 0 !important;
    }



}
@media (min-width: 768px){
	.img-thumbnail{
		object-fit: cover;
		width: 230px;
		height: 230px;
}
	
    .pl-md-5, .px-md-5 {
        padding-left: 3rem !important;
    }

    .pr-md-1, .px-md-1 {
        padding-right: .25rem !important;
    }
    .pl-md-1, .px-md-1 {
        padding-left: .25rem !important;
    }
    .max-width-md-btn{
        width: 100% !important;
    }
    .pl-md-10{
        padding-left: 10px !important;
    }
    .fs-md-14{
        font-size: 14px !important;
    }
    .btn-newApp{
        width: 171px !important;
    }
    .btn-toolbar span.d-none{
        display: contents !important;
    }
    .width-sum-payment{
        width: 196px;
    }
    .pl-md-3, .px-md-3 {
        padding-left: 1rem !important;
    }
    .pl-md-0{
        padding-left: 0 !important;
    }
    .pr-lg-30 {
		padding-right: 30px !important;
	}
    .pt-md-0{
        padding-top: 0 !important;
    }

    /*salon setting - TECH*/
    .margin-row-onecol{
        margin-right: -48px;
        margin-left: -23px;
    }
    .pl-onecol{
        padding-left: -8px !important;
    }
    .pl-lbl-onecol{
        padding-left: 8px !important;
    }

    /*salon setting - MEMBERSHIP*/
    .col-month{
        max-width: max-content !important;
    }

    /*salon setting - PROFILE */
    .padding-lbl.padding-lg-0{
        padding: 0 !important;
    }
    /*salon setting - clock in */
    .mr-md-minus-15{
        margin-right: -15px !important;
    }
    .mr-md-minus-30{
        margin-right: -30px !important;
    }
    .ml-md-1{
        margin-left: .2rem !important;
    }
    .ml-md-minus-15{
        margin-left: -15px !important;
    }
    .pr-md-3{
        padding-right: 1rem !important;
    }
    .pl-md-15{
        padding-left: 15px !important;
    }
    .mr-minus-4{
        margin-left: -4px;
    }
    .pr-md-15{
        padding-right: 15px !important;
    }
    .pr-md-0{
        padding-right: 0 !important;
    }
    
     .title-data{
		line-height: 1.3;
	}
	.data.big {
		line-height: 1.3;
	}
	
	.main-content.padding-top-report {
	    padding-top: 35px !important;
	}
	.margin-top-header.mt-md-0{
    	margin-top: 15px !important;
    }
	.chart-top-3{
		border-right: 1px solid #ddd;
	}
	.size-big{
			font-size: 28px;
	}
	.size-medium{
		font-size: 18px;
	}
	.margin-top-header-small{
		margin-top: 0 !important;
	}
	
	
	
	.data.big.purple, .data.big.black {
	    font-size: 15px;
	}
}
@media (min-width: 768px)  and (max-width: 870px){

    /*--------------------------border of modal-header of INVOICE*/
    .invoice-popup-pending .modal-header,
    .invoice-popup-paid .modal-header{
        border-bottom: 1px solid #e9ecef !important;
    }

}
@media (min-width: 871px)  and (max-width: 1199px){

    /*--------------------------border of modal-header of INVOICE*/
    .invoice-popup-pending .modal-header,
    .invoice-popup-paid .modal-header{
        border-bottom: none !important;
    }
}

@media (min-width: 601px){
    .app-link-wrapper{
        overflow-x: hidden;
    }
}

@media (min-width: 992px) and (max-width: 1200px){
    .report .d-border-bottom-bill,
    .report .border-right-bill-3col
    {
        border-bottom: 1px dashed #7abed3 !important;
    }
    .report .d-border-bottom-bill-3col{
        border-bottom: 0 !important;
    }
    .report .border-right-bill
    {
        border-right: 0 !important;
    }
    .report .table-responsive{
        display: table;
    }

    .main-content-dark .custom-controls-stacked .width-in{
        max-width: 50px !important;
    }
}
@media (max-width: 992px){

    /*--------------------------------------REPORT*/
    .header-info{
        border-left: none;
    }
    .header-action{
        border-left: none;
    }
    .main-content,
    .main-content-grey{
        /* padding: 1px 0 2px 0 !important; */
        border-left: none;
    }
    .site-footer{
        border-left: none;
    }

    /*--------------------------------------dashboard*/
    .main-content-dark.border-left{
        border-left: none !important;
    }
}
@media (min-width: 992px){

    .pb-lg-0, .py-lg-0 {
        padding-bottom: 0 !important;
    }
    .pb-lg-10{
        padding-bottom: 10px !important;
    }
    .pr-lg-1, .px-lg-1 {
        padding-right: .25rem !important;
    }
    .d-md-special{
        text-align: right;
        width: 100%;
        margin-right: 10px;
    }

    /*---------------------------invoice*/
    .modal-lg {
        width: 900px !important;
    }
    .pl-lg-3, .pright-lg-0, .px-lg-3{
        padding-left: 1rem !important;
    }
    .pr-lg-0, .px-lg-0 {
        padding-right: 0 !important;
    }
    .pr-lg-3, .px-lg-3 {
        padding-right: 1rem !important;
    }
    .pr-lg-2, .px-lg-2 {
        padding-right: .5rem !important;
    }
    .pl-lg-3, .px-lg-3 {
        padding-left: 1rem !important;
    }

    /*salon setting - MEMBERSHIP*/
    .col-month{
        max-width: max-content !important;
    }

    /*salon setting - Appointment*/
    .pl-lg-15{
        padding-left: 15px !important;
    }
    .pr-lg-15{
        padding-right: 15px !important;
    }
    .pr-lg-0{
        padding-right: 0 !important;
    }
    .pt-lg-3 {
        padding-top: 1rem !important;
    }

}
@media (width: 1024px) and (height: 768px){

    .report .table-responsive{
        display: table;
    }

    /*--------------------------------------invoice*/
    .invoice-popup-pending .modal-dialog,
    .invoice-popup-paid .modal-dialog{
        bottom: 50% !important;
    }
    .invoice-popup-pending .modal-body,
    .invoice-popup-paid .modal-body{
        height: 600px !important;
        overflow-y: scroll !important;
    }
    .payment-tech .mr-md-back{
        padding-left: 5px !important;
    }
    .payment-tech .margin-back {
        margin-left: -20px !important;
    }
}

@media(min-width: 1024px){
	.modal-dialog {
	    max-width: 750px;
	    margin: 1.75rem auto;
	}
	.modal-body{
		width: 750px;
	}
	
	.navbar-scroll.fixed-top {
	    top: 90px;
	    left: 230px;
	}

    /*salon management - TECH*/
    .margin-row-onecol {
        margin-right: -46px;
        margin-left: -23px;
    }
    .pl-lbl-onecol {
        padding-left: 7px !important;
    }
    /*salon setting - membership*/
    .main-content-light .userGuideContent.paddingleft-sm {
        padding:  10px 15px 0 10px !important;
    }

    /*aside*/
    .aside{
        /* position: absolute !important; */
        top: 40px !important;
    }
    
    .line-blue{
        margin: 8% auto;
    }
    /* ---------------------------------- */
	.aside-open .aside, .aside {
	    border-right: 1px solid #fff;
	    border-top-right-radius: 0 20px !important;
	}
	.height-rightside{
		min-height: calc(100vh - 102px);
	}
	
	.header-info
	{
	    left: 230px;
	}
		
	.row-footer-card {
		margin-left: 230px !important;
	}
	.header-action{
		width: calc(100% - 230px);
		justify-content: left !important;
		padding-left: 0 !important;
	}
	.header-action.header-qrcode{
		width: calc(100% - 230px);
		justify-content: center !important;
		padding-left: 0 !important;
	}
	
	.title-data{
		font-size: 13px;
	}
	.title-data.light{
		font-size: 16px;
		color: #A0A0A0; 
	}
	.thin-blue{
		font-size: 25px;
	}
	.data{
		font-size: 13px;
	}
	.data.big {
		font-size: 15px;
	}
	.img-qrcode{
		width: 80%;
		height: 80%;
	}
}	
@media (min-width: 1025px){

    /*--------------REPORT  -----------*/
    .report .table-responsive{
        display: table;
    }


}
@media (min-width: 1200px) and (max-width: 1240px){

    .report .btn-view{
        width: 15% !important;
    }
}


@media (min-width: 1300px){

    /*---------------------------------POS ACCOUNT - COMPANY USE */
    .company-use .liheight-27::after{
        top: 4px !important;
    }
}

@media (max-width: 1200px){

    /*--------------------*-------------------- POS ACC - PAYMENT - 3 columns-------------- */
    .d-padding-top{
        padding-top: 30px !important;
    }
    .payment table td{
        line-height: 1.3 !important;
    }
    .liheight-27{
        line-height: 1.2 !important;
    }
    .lheight-makepay{
        line-height: 27px !important;
    }
    .payment .custom-checkbox .liheight-27{
        line-height: 27px !important;
    }
    .d-txt-right{
        text-align: right !important;
    }
    .hardware-tbl-view .width-qty{
        padding: 2px 10px;
    }
    .hw-tbl-edit .width-qty{
        padding: 6px 10px !important;
    }
    .card-grey-table .table ul li{
        padding: 5px 0;
    }

    .service-view .checkbox-padding{
        padding-top: 6px !important;
    }
    .width-qty{
        padding: 6px 15px;
    }

    /*--------------------------------------dashboard*/

    .main-content-dark .d-p-0{
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    .main-content-dark .md-pl{
        padding-left: 10px !important;
    }

    .main-content-light-blue .d-p-0{
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    .main-content-light-blue .md-pl{
        padding-left: 10px !important;
    }

    .padding-middle-col{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .smallscreen-border-right{
        border-right: 1px dashed #c0c7cd;
    }

    /*----------------------------------invoice*/

    .invoice-popup-pending  .form-group .form-control,
    .invoice-popup-paid  .form-group .form-control{
        padding: 7px 10px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {

    /*--------------------*-------------------- POS ACC - PAYMENT -------------- */
    .payment .table td {
        padding: 6px 10px;
        line-height: 1.5;
    }
    .payment .padding-left-0{
        padding-left: 0;
    }
    .payment .padding-0{
        padding: 15px 0;
    }

}

@media (min-width: 1200px) {
	.border-xl-bottom-none {
  	border-bottom: none !important; 
  	}
    .mt-xl-0, .my-xl-0 {
        margin-top: 0 !important;
    }
    .pl-xl-1, .px-xl-1 {
        padding-left: .25rem !important;
    }
    .fs-xl-30{
        font-size: 30px !important;
    }
    .fs-xl-20{
        font-size: 20px !important;
    }
    .max-width-macomm-list{
        max-width: 350px ;
    }
    .width-changepass{
        max-width: 460px !important;
    }
    .pl-xl-10{
        padding-left: 10px !important;
    }
    .max-width-md-btn{
        max-width: 180px !important;
    }
    .pb-xl-0, .py-xl-0 {
        padding-bottom: 0 !important;
    }
    .max-width-btn{
        max-width: 160px !important;
    }
    .width-btn-excel{
        max-width: 161px !important;
    }
    .width-fix-xl{
        max-width: 140px !important;
    }
    .pr-xl-3, .px-xl-3 {
        padding-right: 1rem !important;
    }
    /*---------------------------------POS ACCOUNT - COMPANY USE */
    .payment .lheight-makepay::after{
        top: 1px !important;
    }
    .payment .lheight-makepay{
        line-height: 27px !important;
    }

    .width-qty{
        width: 55px !important;
    }

    /*ASIDE --- SALON MANAGEMENT*/
    .padding-right-xl{
        padding-right: 0;
    }
    .main-content-dark .custom-controls-stacked .visit-in{
        max-width: 60px !important;
    }
    .main-content-dark .custom-controls-stacked .width-in{
        max-width: 10px !important;
    }
    .padding-row{
        padding-left: 150px;
    }
    .padding-left-5{
        padding-left: 15px !important;
    }
    .padding-right-5{
        padding-right: 15px !important;
    }
    /*-----------------------------------index*/
    .notification .first-new{
        border-top: 1px solid rgba(77,82,89,0.07) !important;
    }
    .news .first-new{
        border-top: 1px solid rgba(77,82,89,0.07) !important;
    }
    .padding-middle-col{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .padding-left-10{
        padding-left: 15px !important;
    }
    .padding-right-10{
        padding-right: 15px !important;
    }

    .right-content-aside.change-password  .margin-row{
        margin: 0 30% !important;
    }

    .pl-xl-0{
        padding-left: 0 !important;
    }

    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -43px;
        margin-left: -20px;
    }
    .pl-lbl-onecol {
        padding-left: 5px !important;
    }
    /*salon setting - membership*/
    .main-content-light .userGuideContent.paddingleft-sm {
        padding:  0 15px 0 10px !important;
    }
    /*salon setting - clock in*/
    .w-xl-100{
        width: 100% !important;
    }
    .pr-xl-0 {
        padding-right: 0 !important;
    }
    .pt-xl-0{
        padding-top: 0 !important;
    }

}
@media (min-width: 1280px) {

    .lheight-makepay{
        line-height: 1.2 !important;
    }
    .pl-lbl-onecol {
        padding-left: 5px !important;
    }
    /*.w-xl-fix{*/
        /*width: 40%;*/
    /*}*/
    /*.width-sum-payment{*/
        /*width: 40%;*/
    /*}*/

}

@media (width: 1366px) and (height: 768px){

    .pb-md-0, .py-md-0 {
        padding-bottom: 0 !important;
    }
    /* -------------------------------------------------invoice */
    .invoice-popup-pending .modal-dialog,
    .invoice-popup-paid .modal-dialog{
        bottom: 50% !important;
    }
    .invoice-popup-pending .modal-body,
    .invoice-popup-paid .modal-body{
        height: 600px !important;
        overflow-y: scroll !important;
    }
}
@media (width: 1366px) and (height: 1024px){

    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -45px;
        margin-left: -21px;
    }
    .pl-lbl-onecol {
        padding-left: 5px !important;
    }
}
/*xxl*/
@media (min-width: 1440px) {

    .toolbar-booking .col-xxl-3{
        max-width: 25%;
        flex: 0 0 25%;
    }
    .toolbar-booking .col-xxl-4{
        max-width: 25%;
        flex: 0 0 25%;
    }
    .toolbar-booking .col-xxl-6{
        max-width: 50%;
        flex: 0 0 50%;
    }

    /*col new*/
    .col-xxl-3{
        flex: 0 0 25%;
        max-width: 25%;  /*chia lam 4 box*/
    }
    .mb-xxl-0{
        margin-bottom: 0 !important;
    }
    .pl-xxl-1 {
        padding-left: .25rem !important;
    }
    .pr-xxl-1 {
        padding-right: .25rem !important;
    }


    /*---------------------------------POS ACCOUNT - COMPANY USE */
    .company-use .liheight-27::after,
    .personal .liheight-27::after,
    .personal .liheight-27::after{
        top: 0 !important;
    }
    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -49px;
        margin-left: -22px;
    }
    .pl-lbl-onecol {
        padding-left: 6px !important;
    }
    .padding-big-screen{
    	padding: 0 5%;
    }
    
    .title-data{
		font-size: 15px;
		line-height: 1.5;
	}
	.data{
		font-size: 16px;
	}
	.data.big {
		font-size: 19px;
		line-height: 1;
	}
	
	.text-data-color{
		font-size: 19px;
	}
	.header-action {
	    width: calc(100% - 230px);
	    justify-content: center !important;
	    padding-left: 180px !important;
	}
}
@media (min-width: 1523px) {
    .hw-tbl-edit.table-no-responsive{
        display: table;
    }
    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -32px;
        margin-left: -17px;
    }
}
@media (min-width: 1600px) {
    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -53px;
        margin-left: -19px;
    }
    .pl-lbl-onecol {
        padding-left: 4px !important;
    }

    .pt-md-3{
        padding-top: 0 !important;
    }
}
@media (min-width: 1680px) {

    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -55px;
        margin-left: -23px;
    }
    .pl-lbl-onecol {
        padding-left: 8px !important;
    }
}
/*xxxl*/
@media (min-width: 1920px) {


    .toolbar-booking .col-xxxl-3{
        max-width: 15%;
        flex: 0 0 15%;
    }
    .toolbar-booking .col-xxxl-4{
        max-width: 25%;
        flex: 0 0 25%;
    }
    .toolbar-booking .col-xxxl-5{
        max-width: 60%;
        flex: 0 0 60%;
    }

    /*29/10*/
    .p-xxx-15{
        padding: 15px !important;
    }
    .p-xxxl-30{
        padding: 30px !important;
    }
    .pt-xxxl-15{
        padding-top: 15px !important;
    }
    .pr-xxxl-15{
        padding-right: 15px !important;
    }
    .pl-xxxl-15{
        padding-left: 15px !important;
    }
    .pb-xxxl-15{
        padding-bottom: 15px !important;
    }
    .fs-xxl-28{
        font-size: 28px !important;
    }
    .fs-xxl-20{
        font-size: 18px !important;
    }
    .fs-xxl-18{
        font-size: 16px !important;
    }
    .fs-xxxl-30{
        font-size: 30px !important;
    }

    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -63px;
        margin-left: -25px;
    }
    .pl-lbl-onecol {
        padding-left: 10px !important;
    }
    
    .size-medium{
		font-size: 20px;
	}
	.header-action {
	    width: calc(100% - 230px);
	    justify-content: center !important;
	    padding-left: 0 !important;
	}
}
@media (min-width: 2560px) {
    /*--------------------Salon management - Tech*/
    .margin-row-onecol {
        margin-right: -86px;
        margin-left: -30px;
    }
    .pl-lbl-onecol {
        padding-left: 15px !important;
    }
}