/*Min width media query*/
@media (min-width: 991px) {
    .sidebar {
        width: 248px !important;
        padding: 24px 0px;
    }
}

@media (min-width: 768px) {
    .sidebar.toggled {
        overflow: visible;
        width: 80px !important;
    }
}

/*Max width media query*/

@media only screen and (max-width: 2000px) {
    body.is-dashboard-visible .modal-dialog.modal-xl {
        max-width: 85% !important;
    }
}

@media only screen and (max-width: 1899px) {
    body.is-dashboard-visible .modal-dialog.modal-xl {
        max-width: 88% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media only screen and (max-width: 1700px) {
    app-appointment .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4:nth-child(2) {
        margin-right: 0;
        position: relative;
        right: -40px;
    }
}

@media only screen and (max-width: 1600px){
    #appoinmentnew .modal-dialog {
        max-width: 90% !important;
    }
    input#appoinemntdate ~ button.calendar {
        left: 27px !important;
    }
}

@media only screen and (max-width: 1500px) {
    app-appointment .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4:nth-child(2) {
        right: -35px;
    }
}

@media only screen and (max-width: 1420px) {
    app-appointment .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4:nth-child(2) {
        right: -22px;
    }
}

@media only screen and (max-width: 1400px) {
    .btn_new {
        background: #111927;
        color: #fff;
        padding: 9px 10px;
        font-size: 12px;
    }

    .btn_ctom {
        padding: 9px 10px;
    }

    .colum_left_bdy {
        padding-left: 0 !important;
    }

    .calenderscroll-wrapper.appointmentbook-calender table .fc-scroller {
        height: 67vh !important;
    }

    app-appointment .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4:nth-child(2) {
        right: 0px
    }

    .mid_button_group_bdy {
        margin-left: 10px;
    }
    
    #calendar {
        height: 74vh;
    }

}

@media only screen and (max-width: 1366px) {
    .btn_new {
        background: #111927;
        color: #fff;
        padding: 9px 10px;
    }

    .btn_ctom {
        padding: 9px 10px;
    }

    .icon_bdy_section {
        height: calc(100vh - 183px);
        border-left: 1px solid #ddd;
        padding: 10px;
    }

    .btn-group.btn_ctm_group {
        width: auto;
    }

    select.custom_select_bx.f_select {
        width: 115px;
    }

    select.custom_select_bx.t_select {
        width: 99px;
    }

    .custom_select_in.ml-md-3 {
        margin-left: 5px !important;
    }

    button#previwedateappointment {
        margin-left: 11px;
    }

    #appoinmentnew .modal-dialog {
        max-width: 95% !important;
    }

}

@media only screen and (max-width: 1280px) {
    .invoicemain {
        max-width: 80%;
    }

    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4 {
        display: inline-block;
        margin-bottom: 10px;
        max-width: 50%;
        flex: 0 0 100%;
        text-align: center;
    }

    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4>div {
        max-width: 100%;
        justify-content: center;
        margin-top: 0;
    }

    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4:last-child {
        margin: 0 auto;
    }

    body.is-dashboard-visible .modal-dialog.modal-xl {
        max-width: 98% !important;
    }
    td.editbtns {
        display: flex;
    }
    a#deletegiftcertificate {
        text-align: center;
        margin-right: 20px;
    }
    a#editgiftcertificate{
        text-align: center;
    }

    #pills-ganttchart .row.pt-3 > .col-lg-4 > .colum_left_bdy {
        justify-content: center;
    }
    #pills-ganttchart .row.pt-3 > .col-lg-4 {
        max-width: 100%;
        flex: 0 0 100%;
        margin-top: 8px;
    }

    /*Appoinment filter*/
    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4:last-child > div {
        justify-content: flex-end;
    }
    app-appointment .mid_sec_bdy .row.mx-0.pt-3 .col-lg-4:first-child {
        margin-right: 0px;
    }
    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4>div {
        max-width: 100%;
        justify-content: flex-start;
        margin-top: 0;
    }
    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4:nth-child(2) > div {
        margin-right: 26px;
    }
    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4 {
        display: contents;
    }
    .mid_sec_bdy > .row.mx-0.row-mob > .col.p-0.w-95 > .row.mx-0.pt-3 {
        justify-content: center;
    }
}

@media only screen and (max-width: 1199px) {
    select.custom_select_bx.t_select {
        width: 79px;
        font-size: 12px;
    }

    .btn_new {
        padding: 9px 6px;
        font-size: 12px;
    }

    .btn_ctom {
        padding: 9px 10px;
        font-size: 13px;
    }

    .icon_bdy_section {
        height: calc(100vh - 183px);
        border-left: 1px solid #ddd;
        padding: 10px;
    }

    select.custom_select_bx.f_select {
        width: 99px;
        font-size: 12px;
    }

    select.custom_select_bx.s_select {
        width: 114px;
        font-size: 12px;
    }

    .btn_ctom {
        padding: 9px 8px;
        font-size: 12px;
    }
}

@media only screen and (max-width: 1100px) {
    #appoinmentnew .first_panel.w-100>.row>.col-md-2 {
        flex: 0 0 100%;
        max-width: 33%;
    }

}

@media only screen and (max-width: 1024px) {
    .btn_ctom {
        padding: 9px 6px;
        font-size: 12px;
    }

    .btn_new {
        padding: 10px 6px;
        font-size: 10px;
        height: auto;
    }

    .icon_bdy_section {
        height: calc(100vh - 183px);
        border-left: 1px solid #ddd;
        padding: 10px;
    }

    .btn.btn_new {
        line-height: 1.6 !important;
        font-size: 13px !important;
    }

    /*Appoinment Popup*/
    .giftcard_model button.btn.btn-outline-secondary.calendar {
        margin-top: -82px !important;
        margin-left: 6px;
    }

    #appoinmentnew .first_panel.w-100>.row>.col-md-2 {
        flex: 0 0 100%;
        max-width: 33%;
    }
}

@media screen and (max-width: 992px) {
    .row-mob .col {
        max-width: calc(100% - 48px);
    }

    .row-mob .col-auto {
        width: 48px;
        border-left: 1px solid #DDE4EB;
    }

    .sidebar .tgl_btn {
        text-align: center;
    }

    span.nav_content {
        margin-left: 19px;
        display: none;
    }

    .sidebar .nav-item {
        display: flex;
        justify-content: center;
    }

    .topbar #sidebarToggleTop {
        height: auto;
        width: auto;
        background: #1c2638;
        padding: 11px;
    }

    .fc-view.fc-agendaDay-view.fc-agenda-view th.fc-resource-cell {
        font-weight: 600;
        font-size: 12px;
        line-height: 22px;
    }

    .icon_bdy_section {
        position: absolute;
        right: 3px;
        height: calc(100vh - 183px);
        border-left: none;
        padding: 0px;
    }

    select.custom_select_bx {
        min-width: 134px;
        font-size: 13px;
    }

    .btn_ctom {
        padding: 9px 10px;
        font-size: 14px;
    }

    .btn_new {
        padding: 9px 10px;
        font-size: 10px;
        margin-left: 5px;
    }

    .btn_zoom {
        border: 1px solid #D2D6DB;
        background: #FFFFFF;
        padding: 7px 16px;
    }

    .mid_button_group_bdy {
        margin-top: 10px;
    }

    .colum_right_bdy {
        margin-top: 10px;
        justify-content: flex-start;
    }

    body.sidebar-toggled .btn_ctom {
        padding: 9px 10px;
        font-size: 13px;
    }

    body.sidebar-toggled select.custom_select_bx {
        min-width: 100%;
        font-size: 13px;
    }

    body.sidebar-toggled .btn_zoom {
        border: 1px solid #D2D6DB;
        background: #FFFFFF;
        padding: 7px 10px;
    }

    body.sidebar-toggled .fc-view.fc-agendaDay-view.fc-agenda-view th.fc-resource-cell {
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        text-transform: capitalize;
    }

    .fc-scroller.fc-time-grid-container {
        height: 100% !important;
    }

    #pills-sales .row.mx-0.pt-3.pb-3>.col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 5px;
    }

    #pills-sales .row.mx-0.pt-3.pb-3>.col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /*Checkout*/
    .checkout-wrapper>.col-md-9,
    .checkout-wrapper>.col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .options-area>ul>li {
        width: 100%;
    }

    .col.profile {
        max-width: 59px !important;
    }

    .sidebarfooter .col-md-6.col-sm-12>.dropdown,
    .sidebarfooter .col-md-6.col-sm-12>.dropdown>button {
        font-size: 12px;
    }

    .sidebarfooter .col-md-6.col-sm-12>.custom_btn_in.ml-md-3>a {
        height: 38px;
        line-height: 19px;
        font-size: 12px;
    }

    .btn_new {
        margin-left: 0;
    }

    .sidebarfooter>.row>.col-md-6 {
        padding: 0 13px;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 7px;
    }

    .checkout-wrapper input,
    .checkout-wrapper select {
        padding: 8px 2px;
        width: 100%;
        font-size: 12px;
    }

    .amount-total ul>li .col>p {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .mid_sec_bdy .row.mx-0.pt-3>.col-lg-4 {
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center;
    }

    .custom_select_in.ml-md-3 {
        margin-right: 5px;
    }

    app-appointment .mid_sec_bdy {
        overflow: visible;
    }

    /*Appoinement popup*/
    #appoinmentnew .first_panel.w-100>.row>.col-md-2>.inp>span {
        display: block;
    }

    #appoinmentnew .giftcard_model button.btn.btn-outline-secondary.calendar {
        margin-top: 0px !important;
        margin-left: 0;
        position: absolute;
        right: 0;
        top: 38px;
        left: 27px;
    }
}

@media only screen and (max-width: 767px) {
    #pills-sales .colum_left_bdy {
        display: inline-block;
        width: 100%;
        padding-left: 0;
    }

    #pills-sales .custom_select_in {
        display: inline-block;
        width: 32.5%;
        margin-bottom: 5px;
        margin-right: 0;
        margin-left: 0 !important;
    }

    #pills-sales .custom_select_in>select {
        width: 100%;
    }

    #pills-sales .custom_select_in.ml-md-3.searchui {
        width: 100%;
    }

    #pills-sales th,
    td {
        font-size: 14px;
        vertical-align: middle !important;
    }

    /*mobile toggle css*/
    .sidebar .dropdown-menu.show {
        position: absolute !important;
        transform: translate3d(0px, 0px, 0px) !important;
        left: 4px !important;
        top: 60px !important;
    }

    /*Checkout*/
    .productinfo-card>.row+.row>div {
        margin-bottom: 12px;
    }

    .productinfo-card .col-md-2.pl-0 {
        padding-left: 15px !important;
    }

    .productinfo-card {
        padding: 23px 0px 31px 0px;
    }

    .productinfo-card>.row-mob {
        margin: 0 15px !important;
    }

    .amounttotal-section .additem {
        margin-bottom: 18px;
    }

    .amount-total>ul {
        padding-left: 0;
    }

    .sidebarfooter {
        position: static;
    }

    .checkoutsidebar {
        padding-bottom: 0px;
    }

    .productinfo-card .row.mx-0.row-mob>.col-md-8 {
        margin-bottom: 9px;
    }

    .productinfo-card .row.mx-0.row-mob>.col-md-8,
    .productinfo-card .row.mx-0.row-mob>.col {
        max-width: 100%;
    }

    form.creditcard-form .form-row>.form-group.col-md-4.col-sm-12 {
        margin-bottom: 10px;
    }

    h1.admin_header_txt {
        font-size: 18px;
    }

    .topbar #sidebarToggleTop {
        display: none;
    }

    .calenderscroll-wrapper.appointmentbook-calender .fc-view.fc-agendaDay-view.fc-agenda-view table {
        width: 680px;
    }

    .treatmentinformation .col-md-12>.row>.col {
        flex: 0 0 100%;
    }

    #appoinmentnew .first_panel {
        padding-left: 0;
    }

    button.form-control.servicedropdown-wrap+#collapseExample {
        width: 93% !important;
    }

    .dropdownlisting-wrapper .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dropdownlisting-wrapper>.col-6:first-child>ul {
        border-bottom: 1px solid #d5d5d5;
    }

    .dropdownlisting-wrapper>.col-6>ul {
        height: 150px;
    }

    ul#accordionSidebar li.nav-item.dropdown:before {
        right: 8px;
        top: 24px;
    }

    input#appoinemntdate {
        margin-bottom: 24px;
    }

    .custom_select_in>.inp.customdatepicker-inp {
        width: 100% !important;
    }
}

@media only screen and (max-width: 568px) {
    .invoicemain {
        max-width: 100%;
    }

    body.sidebar-toggled ul#accordionSidebar li.nav-item.dropdown:before {
        right: 6px;
    }

    /*Appoinment popup*/
    #appoinmentnew .first_panel.w-100>.row>.col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #appoinmentnew .first_panel.w-100 .col-sm-12>.inp select,
    #appoinmentnew .first_panel.w-100 .col-sm-12>.inp input {
        width: 100% !important;
    }

    #appoinmentnew .first_panel.w-100>.row>.col-md-2:nth-child(2) {
        margin-top: 17px;
        margin-bottom: -17px;
    }

    #appoinmentnew .first_panel.w-100>.row>.col-md-2:nth-child(3) {
        margin-bottom: 12px;
    }
}

@media only screen and (max-width: 480px) {
    #pills-sales .custom_select_in {
        width: 100%;
    }

    #pills-sales .custom_select_in>select {
        width: 100%;
    }

    #pills-sales select.custom_select_bx {
        min-width: 100%;
    }

    /*Checkout*/
    ul.invoice-amount>li>.row>.col {
        display: inline-table;
    }

    ul.invoice-amount>li .col.gridright p {
        text-align: left;
    }

    .product-detail>ul>li>.row>.col>p {
        text-align: left !important;
    }

    .product-detail>ul>li>.row>.col {
        max-width: 100%;
    }
}
