@media only screen
and (max-width : 1024px) {
    .logo-mobile {
        display: block;
    }
}
@media only screen
and (max-width : 1180px) {
    #accordionSidebar {
        background-color: #fff;
        height: 100%;
        font-size: 16px;
        outline: none;
        position: fixed;
        top: 0;
        transition: 0.5s;
        z-index: 200;
    }

    #accordionSidebar.toggled {
        transform: translateX(0px);
        position: absolute;
    }

    #accordionSidebar:not(.toggled) {
        background-color: #fff;
        height: 100%;
        font-size: 16px;
        left: 0;
        outline: none;
        position: fixed;
        top: 0;
        transition: 0.5s;
        z-index: 2000;
    }

    .sidebar .nav-item .nav-link[data-toggle=collapse]::after {
        width: 1rem;
        text-align: center;
        float: right;
        vertical-align: 0;
        border: 0;
        font-weight: 900;
        content: '\F107';
        font-family: 'Font Awesome 5 Free';
    }

    .sidebar .nav-item .nav-link[data-toggle=collapse].collapsed::after {
        content: '\F105';
    }

    #accordionSidebar:not(.toggled) .nav-item .nav-link span {
        font-size: .85rem;
        display: inline;
    }

    #accordionSidebar:not(.toggled) .nav-item .nav-link {
        display: block;
        text-align: left;
    }

    .sidebar .nav-item .nav-link {
        width: 100%;
    }

    #accordionSidebar:not(.toggled) .sidebar-brand-icon {
        display: none;
    }

    #accordionSidebar:not(.toggled) .sidebar-brand .sidebar-brand-text {
        display: block;
    }

    #accordionSidebar .btn-close-menu {
        cursor: pointer;
        position: absolute;
        right: 3px;
        top: 0;
        z-index: 2;
    }

    #accordionSidebar .btn-close-menu > i {
        font-size: 18px;
        color: #cacaca;
    }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    .card-available-times .form-group > .row > .col-md-2 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .appointment-page > .col-md-4 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .appointment-page > .col-md-8 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    .topbar #sidebarToggleTop > i {
        font-size: 17px;
    }
}

@media only screen
and (min-device-width : 1025px)
and (max-device-width : 1180px)
and (orientation : portrait) {
    .topbar #sidebarToggleTop > i {
        font-size: 17px;
    }
    .card-available-times .form-group > .row > .col-md-2 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .appointment-page > .col-md-4 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .appointment-page > .col-md-8 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    .appointment-page .card-patient button.btn-add-patient-icon {
        top: 31px;
    }
    .topbar .btn-admin-patient-queue {
        height: 35px;
        padding-top: 1px;
    }
    .topbar #sidebarToggleTop > i {
        font-size: 17px;
    }
}

/*----------iPad------------*/
/* Portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .wrap-button-top .hyphen {
        display: none;
    }
    .wrap-button-top.top-has-datepicker {
        display: inline-block;
        text-align: center;
    }
    .edit-form .wrap-button-top .wrap-date-top > .title {
        margin-left: 0;
        color: #162d85;
    }
    .wrap-button-top > .wrap-date-top > .datepicker-group {
        width: auto;
    }
    .wrap-button-top .wrap-re-examination {
        margin-top: 15px;
    }
    .wrap-button-top > .btn-save-treatment {
        margin-top: 15px;
        font-size: 17px;
    }
    .wrap-price-table {
        justify-content: center;
    }
    .wrap-price-table > .wrap-search {
        width: 100%;
        margin: 10px 15px 0;
    }
    .wrap-price-table .table .service-name {
        font-size: 15px;
    }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1180px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    .wrap-price-table {
        justify-content: center;
    }
    .wrap-price-table .table .service-name {
        font-size: 15px;
    }
}
/*----------End iPad------------*/

/*--------------Responsive-------------*/
@media (min-width: 1180px) {
    .topbar #sidebarToggleTop {
        padding: 9px 0;
    }
    .topbar #sidebarToggleTop > i {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .appointment-page .card-available-times {
        height: calc(100vh - 95px);
    }
    .modal-lg-1 {
        max-width: 900px;
    }
    #patient-info .wrap-info {
        display: flex;
    }
    .doctor-table tbody .col-checkin .queue-number {
        font-size: 23px;
    }
    #view-treatment-modal .modal-dialog,
    #view-image-modal .modal-dialog {
        max-width: 930px;
    }

    .before-after-result,
    .before-after-filter,
    .gallery-result,
    .promotion-result {
        overflow-y: auto;
        height: calc(100vh - 5.375rem);
    }
}

@media (max-width: 992px) {
    .modal-dialog.modal-lg,
    .modal-dialog.modal-lg-1 {
        max-width: 90%;
        margin: 15px auto;
    }
    .wrap-pres-buttons.button-fixed {
        position: relative;
        top: initial;
        right: initial;
        margin: 0 auto 20px;
    }
    .wrap-profile-prescription .treatment-table {
        border-top: none;
    }
    .wrap-profile-prescription .treatment-table > tbody > tr > td.col-actions {
        display: none !important;
    }
    .wrap-profile-prescription .treatment-table > tbody > tr.shown + tr.child + tr > td.dtr-control[style="display: none;"] {
        display: block !important;
        visibility: hidden;
    }
    .wrap-profile-prescription .treatment-table > tbody > tr.shown + tr.child + tr > td.dtr-control[style="display: none;"] + td {
        border-left: 1px solid #e3e6f0;
    }
    .dataTables_content_filter {
        margin-bottom: 10px;
        margin-right: 0;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lg-4,
    .col-lg-8 {
        padding-right: 6px;
        padding-left: 6px;
    }
    .mb-3,
    .my-3 {
        margin-bottom: 0.7rem!important;
    }
    .mr-3,
    .mx-3 {
        margin-right: 0.7rem!important;
    }
    #vnd {
        font-size: 17px;
    }
    .card-body {
        padding: 0.8rem;
    }
    .form-group label {
        font-size: 15px;
    }
    .form-control {
        padding: 0.375rem 0.55rem;
    }
    .card .card-header h6.text-primary {
        font-size: 17px;
    }
    .prescription-form .card .card-header h6.text-primary,
    .treatment-form .card .card-header h6.text-primary {
        font-size: 15px;
    }
    .card-header,
    .card .card-header[data-toggle=collapse] {
        padding: 0.75rem 0.9rem;

    }
    .card .card-header[data-toggle=collapse] {
        line-height: 1.4;
    }
    .card .card-header[data-toggle=collapse].collapsed::after,
    .card .card-header[data-toggle=collapse]::after {
        font-size: 21px;
        line-height: 47px;
    }
    .card-other-info .card-header {
        padding-left: 0.7rem !important;
    }
    .card-other-info .card-header .choose-template-label {
        font-size: 15px;
        margin-top: 8px;
    }
    span.select2-container--bootstrap4 .select2-selection--single {
        height: 35px !important;
    }
    span.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 32px;
    }
    .btn {
        padding: 0.37rem 0.55rem;
        font-size: 15px;
    }
    .btn.btn-view-patient {
        padding: 6px 9px;
    }
    .card-patient .card-header,
    .card-other-info .card-header,
    #card-drugs > .card-header,
    #card-treatment > .card-header,
    #card-labo > .card-header,
    #card-supply > .card-header,
    #card-prescription > .card-header {
        height: 49px;
    }
    .card .card-header[data-toggle=collapse] {
        height: 47px;
    }
    .card .card-header[data-toggle=collapse] > h6 {
        line-height: 1;
    }
    .form-control,
    .card-body,
    .breadcrumb,
    .card-patient .btn-call-patient,
    .card-patient .patient-info .wrap-info td,
    #symptoms + .select2-container .select2-selection__rendered,
    .card-invoice-details .btn-discount-mdv,
    .card-invoice-details .btn-discount-doctor,
    .btn-group .dropdown-menu .dropdown-item,
    #card-drugs .drug-num-text,
    #card-drugs .total-drugs,
    #card-treatment .item-num-text,
    #card-treatment .total-item,
    #card-labo .item-num-text,
    #card-labo .total-item,
    #card-supply .item-num-text,
    #card-supply .total-item,
    .card-patient .stt-patient,
    ul.ui-menu .ui-menu-item-wrapper,
    .sidebar .nav-item .nav-link,
    span.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
    span.select2-container--bootstrap4 .select2-results__option {
        font-size: 14px;
    }
    .card-other-info .popular-disease,
    .card-patient .popular-symptom {
        font-size: 8px;
        border: 1px solid #918b83;
    }
    .card-other-info .wrap-note > .re-examination-date {
        font-size: 13px;
        position: relative;
        top: -2px;
        margin-left: 0;
        left: -5px;
    }
    span.select2-container--bootstrap4 .select2-selection__clear {
        margin-top: 0.67em;
    }
    .billing_labels .delete,
    .billing_labels .btn-delete {
        padding: 8px 9px;
    }
    .billing_labels .delete > i,
    .billing_labels .btn-delete > i {
        font-size: 15px;
    }
    .sidebar .nav-item .btn-new-prescription,
    .sidebar .nav-item .btn-admin-patient-queue {
        font-size: 12px;
    }
    .card-invoice-details .btn-discount-mdv,
    .card-invoice-details .btn-discount-doctor,
    #card-drugs .btn-add-drug,
    #card-treatment .btn-add-treatment,
    #card-labo .btn-add-labo,
    #card-supply .btn-add-supply,
    .drugs_labels .add,
    .treatment_labels .add,
    .labo_labels .add,
    .supply_labels .add,
    .btn-group .dropdown-toggle-split,
    .card-other-info .btn-save-prescription,
    .card-other-info .btn-save-treatment,
    .card-other-info .btn-save-entry,
    .card-other-info .btn-cancel {
        height: 34px;
        line-height: 1px;
    }
    #card-drugs .btn-add-drug > i,
    #card-treatment .btn-add-treatment > i,
    #card-labo .btn-add-labo > i,
    #card-supply .btn-add-supply > i,
    .drugs_labels .add > i,
    .treatment_labels .add > i,
    .labo_labels .add > i,
    .supply_labels .add > i {
        font-size: 13px;
    }
    .card-invoice-details .btn-discount-mdv > .icon-btn,
    .card-invoice-details .btn-discount-doctor > .icon-btn {
        height: 34px;
        width: 33px;
    }
    .dropdown-toggle-split::after {
        top: 1px;
    }
    #card-drugs .drug-num-text,
    #card-drugs .total-drugs,
    #card-treatment .item-num-text,
    #card-treatment .total-item,
    #card-labo .item-num-text,
    #card-labo .total-item,
    #card-supply .item-num-text,
    #card-supply .total-item,
    .card-patient .stt-patient {
        padding: 0 5px;
    }
    .card-patient .stt-patient {
        min-width: 26px !important;
    }
    #card-drugs .card-header h6,
    #card-treatment .card-header h6,
    #card-labo .card-header h6,
    #card-supply .card-header h6,
    #card-prescription .card-header h6 {
        line-height: 34px;
    }
    span.select2-container--bootstrap4 .select2-results__option {
        padding: 0.175rem 0.75rem
    }
    span.select2-search--dropdown .select2-search__field {
        padding: 0.275rem 0.75rem;
        font-size: 14px;
    }
    select.form-control:not(#template_id) + .select2-container {
        margin-top: 1px;
    }
    select.drug + .select2 .select2-selection {
        height: 43px !important;
    }
    select.drug + .select2 .select2-selection > .select2-selection__rendered {
        line-height: 24px !important;
    }
    select.drug + .select2 .select2-selection > .drug-content {
        top: -8px;
    }
    select.drug + .select2 .select2-selection > .select2-selection__rendered > .select2-selection__placeholder {
        line-height: 39px;
    }
    .topbar #sidebarToggleTop {
        height: 32px;
        width: 32px;
    }
    .sidebar .avatar > img {
        width: 45px;
        height: 45px;
    }
    ul.sidebar .sidebar-brand,
    ul.sidebar.toggled + #content-wrapper .topbar,
    ul.sidebar.sidebar-menu + #content-wrapper .topbar {
        height: 60px;
    }
    ul.sidebar.toggled + #content-wrapper .topbar,
    ul.sidebar.sidebar-menu + #content-wrapper .topbar {
        padding-left: 68px !important;
    }
    .input-group > .input-group-prepend > .input-group-icon {
        width: 36px;
    }
    .card-patient .wrap-info .icon-need-help {
        font-size: 15px;
    }
    .custom-control-label::before, .custom-control-label::after {
        width: 1rem;
        height: 1rem;
    }
    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
        background-size: 11px;
    }
    .list-template + .select2 {
        max-width: 287px !important;
    }
    .wrap-create-prescription-button .prescription-title,
    .wrap-button-top .title {
        font-size: 17px;
    }
    .wrap-create-prescription-button,
    .wrap-button-top {
        padding: 6px 8px;
    }
    #symptoms + .select2-container .select2-selection__choice,
    #chronic_diseases + .select2-container .select2-selection__choice {
        box-shadow: none;
    }
    .sidebar .sidebar-brand .sidebar-brand-text.brand-custom .sidebar-title {
        font-size: 19px;
    }
    #sidebarToggleTop:hover,
    #sidebarToggleTop:focus {
        box-shadow: 0 0 0 0.1rem rgb(78 115 223 / 25%);
    }
    .breadcrumb-item {
        margin-top: 2px;
    }
    .topbar .btn {
        font-size: 14px;
    }
    .breadcrumb {
        font-size: 15px;
    }
    .card-disease .col-re-examination {
        max-width: 17.66667%;
    }
    .card-disease .col-amount-days {
        max-width: 24%;
    }
    .card-other-info .card-header .choose-template-label {
        display: none;
    }
    .fa-users-class::before {
        width: 15px !important;
        height: 15px !important;
    }
}

@media (min-width: 992px) and (max-width: 1080px) {
    .card-patient .patient-info .wrap-info td {
        font-size: 13px;
    }
    .card-other-info .card-header .choose-template-label {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .row-home {
        margin-left: 0;
        margin-right: 0;
    }
    .card-help-prescription {
        margin-right: 0.75rem;
        margin-left: 0.75rem;
    }
    .card-patient .patient-info .wrap-info td.col-age {
        white-space: nowrap;
        min-width: 115px;
    }
    .wrap-profile-prescription .tab-content > #tab-2,
    .wrap-profile-prescription .tab-content > #tab-3 {
        height: initial;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu {
        width: 0 !important;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu .sidebar-brand {
        background-color: transparent !important;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu .nav-item .nav-link {
        display: none !important;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu + #content-wrapper .topbar {
        padding-left: 6px;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu .avatar {
        margin-left: 59px;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu + #content-wrapper .topbar:not(.is-mobile) {
        padding-left: 1rem !important;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu:not(.is-mobile) .avatar {
        display: none;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu .avatar > img {
        border: 1px solid #dadada;
    }

    #page-top:not(.sidebar-toggled) .sidebar.sidebar-menu + #content-wrapper .topbar {
        padding-left: 75px !important;
    }

    .sidebar.toggled + #content-wrapper .topbar {
        padding-left: 75px !important;
    }

    #accordionSidebar:not(.toggled) .btn-close-menu {
        display: none;
    }

    #accordionSidebar.toggled .btn-close-menu {
        display: block;
    }

    .topbar:not(.toggled) .sidebar-brand {
        display: block;
    }

    #accordionSidebar:not(.toggled) {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    #accordionSidebar.toggled {
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
        pointer-events: none;
    }
}

@media (min-width: 768px) {
    .sidebar .nav-item .nav-link i {
        margin-right: 0.1rem;
    }
    #salary-form .treatment-percent-group {
        margin-bottom: 0;
    }
    .treatment-table > tbody > tr > td.col-content {
        position: relative;
    }
    .treatment-table > tbody > tr > td.col-content > .btn-view-prescription {
        width: 25px;
        height: 27px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 1px;
        border-bottom-left-radius: 2px;
    }
    .card-today-appointment .date-text {
        position: absolute;
        width: calc(100% - 25px);
        text-align: center;
    }
    .appointment-page.v2 .wrap-date {
        max-width: 342px;
    }
    .appointment-page.v2 .datepicker-inline .datepicker--cell-day {
        width: 33px;
        height: 33px;
        margin: 3px;
    }
    .appointment-page.v2 .datepicker--cell-day {
        border-radius: 50%;
    }
    .appointment-page.v1 .datepicker--cell-day {
        width: 32px;
        border-radius: 50%;
        margin: 0 5px;
    }
    .appointment-page.v1 .wrap-date {
        max-width: 412px;
    }
    .appointment-page.v1 .wrap-calendar {
        max-width: calc(100% - 412px);
    }
    .appointment-page.v1 .datepicker--cell-day {
        width: 32px;
        border-radius: 50%;
        margin: 0 8px;
    }
    .doctor-form > .form-group > label[for="enable_inventory"] {
        max-width: 25%;
    }
    .doctor-form > .form-group > label[for="enable_appointment_reminder"] {
        max-width: 30%;
        margin-left: auto;
    }
    #card-treatment .datepicker-group {
        max-width: 200px;
    }
    #view-image-modal .col-image {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
        padding: 0;
    }
    .card-history .history-table.view-more .dataTables_paginate:not(.hidden) + .dt-buttons {
        margin-top: -23px;
    }
    .table-filter:not(.table-custom) > .dataTables_wrapper > .row:first-child > div:not(.col-auto, .col):first-child {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .table-filter:not(.table-custom) > .dataTables_wrapper > .row:first-child > div:not(.col-auto, .col):nth-child(2) {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    .table-filter.table-custom.filter-rendered {
        margin-top: -60px;
    }
    .table-filter.table-custom:not(.filter-rendered) {
        margin-top: 1px;
    }
    .wrap-treatment-filter:not(.treatment-employee) > .dataTables_wrapper > .row:first-child > div:first-child,
    .wrap-salary-filter > .dataTables_wrapper > .row:first-child > div:first-child {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .wrap-treatment-filter:not(.treatment-employee) > .dataTables_wrapper > .row:first-child > div:nth-child(2),
    .wrap-salary-filter > .dataTables_wrapper > .row:first-child > div:nth-child(2) {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .sidebar .nav-item .nav-link i {
        font-size: 16px;
    }
    .modal-md {
        max-width: 680px;
    }
    .modal-md-1 {
        max-width: 610px;
    }
    .sidebar.toggled + #content-wrapper .topbar {
        padding-left: 75px !important;
    }
    .sidebar.is-mobile.toggled + #content-wrapper .topbar .sidebar-brand {
        display: none;
    }
}

@media (max-width: 767px) {
    .modal-dialog.modal-lg-90 {
        width: 100%;
        height: 100%;
        margin: 0;
        max-width: 100%;
        padding: 0;
    }
    .modal-dialog.modal-lg-90 .modal-content {
        height: 100vh;
        border-radius: 0;
        max-height: 100vh;
    }
    .modal-dialog.modal-lg-90 .modal-body {
        overflow-y: auto;
        padding-bottom: 1rem;
    }
    #add-export-supply-form .form-group {
        margin-bottom: 1rem;
    }
    .sidebar.is-mobile.toggled + #content-wrapper .topbar .sidebar-brand {
        display: none;
    }
    .card-dental-treatment .card-body,
    .card-prescription-print .card-body {
        padding: 15px;
    }
    .card-prescription-print .wrap-logo-1 > img {
        width: 80px;
    }
    .card-prescription-print .header-top {
        margin-left: 0;
        margin-right: 0;
    }
    .card-prescription-print .title {
        font-size: 29px;
    }
    .card-prescription-print .wrap-age,
    .card-dental-treatment .wrap-age,
    .card-prescription-print .wrap-weight,
    .card-prescription-print .wrap-height,
    .card-dental-treatment .wrap-weight,
    .card-dental-treatment .wrap-height {
        margin-left: 0;
    }
    .card-dental-treatment .wrap-age,
    .card-dental-treatment .wrap-gender,
    .card-prescription-print .wrap-age,
    .card-prescription-print .wrap-gender,
    .card-prescription-print .wrap-weight,
    .card-prescription-print .wrap-height,
    .card-dental-treatment .wrap-weight,
    .card-dental-treatment .wrap-height {
        width: 50%;
    }
    .card-dental-treatment .wrap-age .col-value,
    .card-dental-treatment .wrap-gender .col-value,
    .card-prescription-print .wrap-age .col-value,
    .card-prescription-print .wrap-gender .col-value,
    .card-prescription-print .wrap-weight .col-value,
    .card-prescription-print .wrap-height .col-value,
    .card-dental-treatment .wrap-weight .col-value,
    .card-dental-treatment .wrap-height .col-value {
        text-align: center;
    }
    .card-dental-treatment .wrap-gender,
    .card-prescription-print .wrap-gender,
    .card-prescription-print .wrap-weight,
    .card-dental-treatment .wrap-weight {
        padding-left: 13px;
    }
    .card-prescription-print .wrap-age-gender {
        margin-top: 10px;
    }
    .card-prescription-print .wrap-patient .col-patient {
        width: auto;
    }
    .card-prescription-print .wrap-phone,
    .card-prescription-print .wrap-age-gender,
    .card-dental-treatment .wrap-age-gender,
    .card-prescription-print .wrap-weight-height,
    .card-dental-treatment .wrap-weight-height {
        width: 100%;
    }
    .card-prescription-print .wrap-address {
        margin-right: 0;
        display: flex;
        align-items: flex-start;
        height: auto;
    }
    .card-prescription-print .wrap-gender,
    .card-dental-treatment .wrap-gender {
        margin-left: auto;
    }
    .card-prescription-print .wrap-drugs .wrap-usage-total {
        display: flex;
        align-items: flex-start;
        margin-top: 8px;
    }
    .card-prescription-print .wrap-drugs .wrap-usage-total .wrap-usage {
        width: calc(100% - 100px);
    }
    .card-prescription-print .wrap-drugs .wrap-usage-total .wrap-usage .usage {
        margin-bottom: 0;
    }
    .card-prescription-print .wrap-drugs .wrap-details .wrap-total-amount {
        margin-left: auto;
    }
    .card-prescription-print .wrap-drugs > li.drug-name,
    .card-prescription-print .wrap-last-note {
        margin-top: 13px;
    }
    .card-prescription-print .wrap-created-at {
        margin-left: auto;
        margin-top: 20px;
    }
    .card-prescription-print .col-created-at {
        width: fit-content;
    }
    .card-prescription-print .wrap-last-note {
        width: 100%;
    }
    .card-prescription-print .wrap-footer {
        flex-direction: column;
        margin-top: 0;
    }
    .card-prescription-print .wrap-details .col-amount {
        white-space: nowrap;
    }
    .card-prescription-print .wrap-drugs {
        margin-bottom: 20px;
    }
    .card-prescription-print .doctor-name {
        margin-top: 35px;
    }
    #salary-form .treatment-percent-group {
        margin-bottom: 1rem;
    }
    .table-filter.table-custom .dataTables_length {
        display: none;
    }
    div.checkin-checkout-wrapper .top-bar {
        height: 80px;
    }
    div.checkin-checkout-wrapper .today {
        top: 47px;
        font-size: 15px;
    }
    div.checkin-checkout-wrapper .wrap-logo > img {
        width: 125px;
        top: 9px;
    }
    div.checkin-checkout-wrapper .wrap-checkin-buttons .waiting-room .room-title,
    div.checkin-checkout-wrapper .wrap-checkin-buttons .office-room .room-title {
        font-size: 12px;
    }
    div.checkin-checkout-wrapper .wrap-checkin-buttons .waiting-room .label-room,
    div.checkin-checkout-wrapper .wrap-checkin-buttons .office-room .label-room {
        padding: 0px 6px;
        font-size: 12px;
    }
    div.checkin-checkout-wrapper .wrap-avatar > img {
        width: 30px;
        height: 30px;
    }
    div.checkin-checkout-wrapper .wrap-avatar > .doctor-name {
        font-size: 13px;
    }
    .card-today-appointment .date-text {
        margin-left: auto !important;
    }
    .edit-form .wrap-button-top .wrap-date-top > .title {
        margin-left: 0;
        color: #162d85;
    }
    #card-prescription #card-drugs .card-body .col-drug-advice {
        width: auto !important;
    }
    .col-sm-auto {
        width: auto!important;
    }
    .drugs_labels > .repeatable .row-drug-amount > .col-auto > .form-group,
    .treatment_labels > .repeatable .row > .col-auto > .form-group,
    .labo_labels > .repeatable .row > .col-auto > .form-group,
    .supply_labels > .repeatable .row > .col-auto > .form-group,
    #card-prescription .card-other-info .col-amount-days > .form-group {
        margin-top: 5px;
    }
    #card-prescription .card-other-info > .card-header {
        height: 80px !important;
    }
    #card-prescription .card-other-info > .card-header {
        height: 80px !important;
    }
    #card-prescription .card-other-info > .card-header > .align-items-center {
        display: block !important;
    }
    #card-prescription .card-other-info > .card-header > .align-items-center > h6 {
        width: 100%;
        line-height: 24px;
    }
    #card-prescription .card-other-info > .card-header > .align-items-center > .wrap-template {
        float: left;
    }
    .wrap-button-top.top-has-datepicker > .title {
        text-align: center;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .topbar.navbar-light .navbar-nav .nav-item #userDropdown {
        padding-right: 0;
    }
    .topbar .breadcrumb-item {
        white-space: nowrap;
        margin-right: 3px;
    }
    #wrapper > .sidebar-brand,
    #wrapper > .sidebar-brand > .avatar > img {
        width: 37px;
        height: 37px;
    }
    #card-prescription .col-amount-day {
        margin-top: 12px;
    }
    .wrap-button-top .hyphen {
        display: none;
    }
    .wrap-create-prescription-button,
    .wrap-button-top {
        flex-direction: column;
        align-items: initial;
    }
    .wrap-create-prescription-button > .btn-save-prescription,
    .wrap-button-top > .btn-save-treatment,
    .wrap-button-top > .wrap-save-entry,
    .wrap-button-top > .btn-save-entry {
        padding: 12px 10px !important;
        margin-left: 0 !important;
        text-align: center;
        display: inline-block !important;
        margin-top: 10px;
        font-size: 16px !important;
    }
    .wrap-button-top .wrap-re-examination {
        margin-top: 10px;
    }
    #card-treatment .datepicker-group {
        width: 180px;
    }
    .billing_labels > .repeatable > .field-group > .col > .form-group-custom {
        margin-bottom: 1rem;
    }
    #card-treatment .card-header > .row > h6,
    #card-labo .card-header > .row > h6,
    #card-supply .card-header > .row > h6 {
        width: auto;
    }
    #card-treatment .row > .col-cost,
    #card-labo .row > .col-amount,
    #card-supply .row > .col-amount {
        width: 100%;
    }
    .card-patient-info h4 > b {
        margin: 0;
    }
    .card-patient-info .wrap-info > .wrap-row > p:nth-child(2) {
        padding-left: 0;
    }
    .card-patient-info {
        width: auto;
        min-width: initial;
    }
    .sidebar.toggled {
        overflow: visible;
    }
    .breadcrumb-item.active {
        display: none;
    }
    .mb-4,
    .my-4 {
        margin-bottom: 0.7rem!important;
    }
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        padding-left: 15px;
        padding-right: 15px;
    }
    .logo {
        width: 120px;
        height: 120px;
    }
    .logo-top {
        display: none;
    }
    .layout-app .shadow {
        box-shadow: 0 .125rem .25rem 0 rgba(58, 59, 69, .2)!important;
    }
    .logo-top-1 {
        display: inline-block;
    }
    .container-app {
        flex-wrap: initial !important;
    }
    .register-link-top {
        visibility: hidden;
    }
    .card-patient-info h4 > b {
        font-size: 17px;
    }
    .logo-menu {
        width: 70px;
        height: 70px;
    }
    .sidebar .nav-item .collapse {
        position: relative;
        left: 0;
        z-index: 1;
        top: 0;
        -webkit-animation: none;
        animation: none;
    }
    .sidebar .nav-item .collapse .collapse-inner,
    .sidebar .nav-item .collapsing .collapse-inner {
        min-width: initial;
    }
    .card-report .empty-report {
        width: 150px;
        height: 150px;
    }
    .card-report .empty-report .no-results {
        bottom: -110px;
    }
    .card-report .empty-report .no-results > h3 {
        font-size: 20px;
    }
    .sidebar .nav-item .btn-new-prescription,
    .sidebar .nav-item .btn-admin-patient-queue {
        top: 7px
    }
    .card-analytics .row-filter {
        margin-bottom: 15px;
    }
    .card-patient-info .wrap-info > .wrap-row p {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .card-patient-info #qrcode-large {
        margin: 15px 0 10px;
    }
    .card-patient-info h4 > .icon-need-help {
        font-size: 19px !important;
    }
    .card-patient-info h4 > .icon-need-help {
        margin-left: -28px !important;
    }
    .need-help-extend {
        font-size: 16px;
    }
    .card-help-prescription .wrap-help-icon .total-help {
        left: -9px;
    }
    .doctor-table .queue-number > a {
        font-size: 11px;
    }
    .doctor-table .queue-number .patient-count {
        height: 27px;
        width: 27px;
        line-height: 25px;
        font-size: 16px;
    }
    table.table-bordered.dataTable th,
    table.dataTable > tbody > tr {
        font-size: 15px !important;
    }
    ol.breadcrumb {
        font-size: 15px;
        padding: 3px 6px;
        border-radius: 3px;
        display: flex;
        align-items: center;
    }
    .topbar #sidebarToggleTop {
        height: 30px;
        width: 30px;
        padding: 1px 0 0;
        line-height: 1;
        margin-right: 10px !important;
    }
    .topbar .btn {
        padding: 0.275rem 0.45rem 0.33rem;
        font-size: 14px;
    }
    .topbar .btn-admin-patient-queue > i,
    .topbar .btn-create-prescription-top > i,
    .topbar .btn-create-treatment-top > i,
    .topbar .btn-create-obstetrics-top > i,
    .topbar .btn-book-appointment-top > i {
        top: 0;
        font-size: 13px;
    }
    .topbar .total-patient-queue {
        line-height: 14px;
        font-size: 14px;
        top: -1px;
        right: 4px;
    }
    .topbar #sidebarToggleTop:hover {
        background-color: #ffffff;
    }
    .sidebar .nav-item .nav-link span {
        font-size: .85rem;
    }
    ul.sidebar.toggled + #content-wrapper .topbar #sidebarToggleTop {
        width: 30px;
    }
    ul.sidebar.sidebar-doctor:not(.toggled) + #content-wrapper .topbar #sidebarToggleTop {
        width: 30px;
        border-radius: 1px !important;
        line-height: 1;
    }
    .doctor-table .queue-number {
        font-size: 17px;
    }
    nav.topbar {
        height: 50px;
    }
    ul.sidebar.toggled .avatar {
        margin-left: 57px;
        margin-top: -1px;
    }
    ul.sidebar.toggled .sidebar-brand {
        padding: 0;
        height: 50px;
    }
    ul.sidebar:not(.toggled) .avatar > img {
        width: 50px;
        height: 50px;
    }
    ul.sidebar.toggled .avatar > img {
        width: 40px;
        height: 40px;
    }
    ul.sidebar .avatar.has-avatar > img {
        object-fit: contain;
    }
    .sidebar.toggled + #content-wrapper .topbar {
        padding-left: 57px;
        margin-bottom: 7px !important;
    }
    nav.topbar .dropdown .dropdown-menu {
        width: initial;
    }
    #content > .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        font-size: 15px;
    }
    body.login-page .screen-center.screen-mobile {
        margin: 0;
        min-height: 550px;
    }
    body.login-page .wrap-login {
        padding: 10px 1.5rem 3.5rem!important;
    }
    .wrap-login form.user + hr {
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .wrap-login .wrap-create-new-account {
        display: flex;
        justify-content: center;
    }
    .wrap-login h1 {
        font-size: 23px;
        margin-bottom: 15px !important;
    }
    .wrap-login .btn {
        padding: 0.275rem 0.75rem;
    }
    div.logo {
        margin-bottom: 13px;
    }
    body.login-page .wrap-login {
        padding-top: 13px;
    }
    form.user input.form-control-user {
        height: calc(1.5em + 0.85rem);
    }
    form.user .row-remember {
        margin: 12px 0;
    }
    form.user .row-remember .custom-checkbox {
        width: 110px;
    }
    form.user .row-remember .custom-checkbox {
        width: 110px;
    }
    form.user .row-remember .wrap-forgot-password {
        width: calc(100% - 110px);
    }
    form.user .btn-user {
        padding: 7px;
    }
    .card .card-header .col-4 > .btn {
        font-size: 14px;
        white-space: nowrap;
        padding: 0.275rem 0.5rem;
    }
    .card-other-info .card-header .choose-template-label {
        display: none;
    }
    .fa-users-class::before {
        width: 19px !important;
        height: 19px !important;
        top: 2px;
    }
    #accordionSidebar:not(.toggled) + #content-wrapper .topbar .btn {
        font-size: 10px;
        height: 29px;
        line-height: 27px;
        padding-top: 1px;
    }
    #accordionSidebar:not(.toggled) + #content-wrapper .topbar .btn-admin-patient-queue {
        line-height: 28px;
        min-width: 32px;
        padding-top: 0;
    }
    .modal .modal-body > p.reset-confirm {
        white-space: initial;
    }
    #accordionSidebar .contact-menu .zalo {
        width: 27px;
        height: 27px;
    }
    #accordionSidebar .contact-menu .contact-group .phone i {
        font-size: 24px;
    }
    #accordionSidebar .contact-menu .contact-group .email i {
        font-size: 29px !important;
    }
    #accordionSidebar .contact-menu {
        bottom: 5px;
    }
    .fa-user-headset::before {
        width: 20px;
        height: 20px;
    }
    .card-prescription > .card-body {
        padding: 0.5rem 0.7rem;
    }
    .card-prescription .title {
        font-size: 24px;
        font-weight: bold;
    }
    .card-prescription .wrap-header-1,
    .card-prescription .wrap-patient,
    .card-prescription .wrap-age-gender,
    .card-prescription .wrap-phone,
    .card-prescription .wrap-diagnostic,
    .card-prescription .wrap-weight-height {
        width: calc(100% - 10px);
    }
    .card-prescription .wrap-qrcode {
        display: none;
    }
    .card-prescription .wrap-age-gender {
        float: left;
        padding-left: 10px;
    }
    .card-prescription .wrap-age {
        margin-left: initial;
    }
    .card-prescription .wrap-gender {
        margin-left: auto;
        order: 2;
    }
    .card-prescription .wrap-weight,
    .card-prescription .wrap-address,
    .card-prescription .wrap-diagnostic {
        padding-left: 10px;
    }
    .card-prescription .wrap-height {
        margin-left: auto;
    }
    .card-prescription .wrap-drugs .usage {
        font-style: italic;
        margin-bottom: 0 !important;
        font-size: 15px;
    }
    .card-prescription .wrap-drugs .wrap-usage-total,
    .card-prescription .wrap-weight-height {
        display: flex;
        align-items: center;
    }
    .card-prescription .wrap-drugs .wrap-total-amount {
        width: 83px;
        align-items: baseline;
        margin-left: auto;
        font-size: 15px;
        justify-content: space-between;
    }
    .card-prescription .wrap-drugs .wrap-usage {
        width: calc(100% - 90px);
    }
    .card-prescription .wrap-details .col-amount {
        white-space: nowrap;
    }
    .card-prescription .wrap-drugs .wrap-details .wrap-total-amount .total-amount {
        padding-left: 0;
    }
    .card-prescription .col-created-at {
        width: auto;
    }
    .card-prescription .col-created-at,
    .card-prescription .col-doctor,
    .card-prescription .doctor-name {
        font-size: 14px;
    }
    .card-prescription .wrap-prescription-note {
        font-size: 15px;
    }
    .card-prescription .wrap-last-note {
        width: calc(100% - 250px);
    }
    .card-prescription .doctor-name {
        margin-top: 5px;
    }
    .card-prescription .col-total-drugs {
        text-align: left;
    }
    .card-prescription .wrap-last-note .col-exam-note {
        font-size: 13px;
    }
    .icon-gift {
        width: 25px;
        height: 25px;
        border-radius: 1px;
    }
    .wrap-profile-prescription .tab-content > #tab-2,
    .wrap-profile-prescription .tab-content > #tab-3 {
        height: initial;
    }
    .card-available-times .note {
        display: block;
    }
    .appointment-page .card-patient .wrap-patient-info {
        margin-top: 10px;
    }
    .table-filter > .dataTables_wrapper > .row:first-child > div {
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 0;
    }
    .appointment-table > .date-filter,
    .has-date-filter .date-filter {
        display: flex;
        align-items: center;
        max-width: calc(100% - 2px);
        justify-content: left;
        margin: 0 0 8px;
        font-size: 15px;
    }
    .appointment-table > .date-filter .input-group-text,
    .has-date-filter .date-filter .input-group-text {
        margin-left: 9px;
        height: 32px;
    }
    .appointment-table .date-filter .form-control,
    .has-date-filter .date-filter .form-control {
        height: 32px;
    }
    .appointment-table .date-filter .form-control {
        width: calc(100% - 120px);
    }
    .dataTables_status_filter,
    .dataTables_doctor_filter,
    .dataTables_review_filter,
    .dataTables_promise_date_filter,
    .dataTables_dropdown_filter {
        display: flex;
        justify-content: left;
        margin-right: 0;
    }
    .dataTables_status_filter > .status-filter > select,
    .dataTables_doctor_filter > .doctor-filter > select,
    .dataTables_review_filter > .review-filter > select,
    .dataTables_promise_date_filter > .promise-date-filter > select,
    .dataTables_dropdown_filter > .dropdown-filter > select {
        width: auto;
    }
    div.dataTables_wrapper div.dataTables_length {
        display: flex;
        align-items: center;
    }
    div.dataTables_wrapper div.dataTables_length label {
        display: flex;
        align-items: center;
        margin-bottom: 7px;
        font-size: 15px !important;
    }
    div.dataTables_wrapper div.dataTables_length select {
        margin-left: 20px;
        margin-right: 5px;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        margin-left: 15px !important;
    }
    div.dataTables_wrapper div.dataTables_filter input,
    .dataTables_status_filter > .status-filter,
    .dataTables_doctor_filter > .doctor-filter,
    .dataTables_review_filter > .review-filter,
    .dataTables_promise_date_filter > .promise-date-filter,
    .dataTables_dropdown_filter > .dropdown-filter {
        font-size: 15px;
        margin-bottom: 7px;
    }
    .appointment-table .btn-status {
        width: auto;
    }
    .card-available-times .card-header .wrap-time-slot .time-slot {
        position: relative;
        top: 1px;
    }
    .card-available-times .card-header > h6 {
        padding-left: 0;
    }
    .wrap-profile-prescription .table-antibiotics {
        min-width: initial;
    }
    .topbar #sidebarToggleTop {
        background-color: #fff;
        border: 1px solid #4388c9;
        box-shadow: none;
        border-radius: 0 !important;
    }
    .topbar #sidebarToggleTop > i {
        font-size: 18px;
    }
    .sidebar-dark hr.sidebar-divider {
        border-top-color: transparent;
    }
}

/**
Size col-sm
 */
@media (max-width: 576px) {
    .doctor-form > .form-group > label,
    .service-form > .form-group > label {
        text-align: left;
    }
    .card-doctor {
        height: initial;
    }
    .doctor-form > .form-group > label {
        padding-left: 0.75rem;
    }
    .card-doctor .card-body {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .form-group,
    .service-form .list-service > .item-service:last-child,
    .service-form .list-service {
        margin-bottom: 0.5rem;
    }
    form > .form-group:last-child {
        margin-bottom: 0;
    }
    table.table-bordered.dataTable th,
    table.dataTable > tbody > tr {
        font-size: 14px !important;
    }
    .topbar .btn:not(.btn-link) {
        font-size: 13px;
        height: 33px;
        min-width: 31px;
    }
    .topbar .btn.btn-create-prescription-top:not(.btn-link),
    .topbar .btn.btn-create-treatment-top:not(.btn-link),
    .topbar .btn.btn-create-obstetrics-top:not(.btn-link) {
        width: 33px;
    }
    .logo-login {
        width: 258px;
        height: 58px;
    }
    .wrap-create-prescription-button > .btn-save-prescription,
    .wrap-button-top > .btn-save-treatment,
    .wrap-button-top > .wrap-save-entry,
    .wrap-button-top > .btn-save-entry {
        font-size: 14px;
        display: flex;
        align-items: center;
        line-height: 1.1;
        padding: 8px;
        margin-left: auto;
    }
    .wrap-create-prescription-button > .btn-save-prescription > i,
    .wrap-button-top > .btn-save-treatment > i,
    .wrap-button-top > .wrap-save-entry > i,
    .wrap-button-top > .btn-save-entry > i {
        margin-right: 3px;
    }
    .wrap-create-prescription-button .prescription-title,
    .wrap-button-top .title {
        font-size: 17px;
    }
    .wrap-button-top > .wrap-date-top #treatment-date {
        width: 113px;
        line-height: 23px;
        font-weight: normal;
    }
    #card-treatment .re-exam-title {
        white-space: nowrap;
    }
    #card-treatment .re-exam-group {
        flex-direction: column;
    }
    #card-treatment .re-exam-group .wrap-re-examination {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #card-treatment .re-exam-group button.add {
        display: none;
    }
    #card-treatment .re-examination-time {
        line-height: 32px;
    }
    .billing_labels #pay_total_remain_checkbox {
        margin-top: 8px;
        margin-left: 12px;
    }
}

@media (min-width: 576px) and (max-width: 1119px) {
    .container-app {
        max-width: 100%;
    }
}

@media (min-width: 576px) {
    .modal-dialog.modal-fit {
        max-width: fit-content;
    }

    .modal-dialog.modal-fit.modal-sm {
        min-width: 300px;
    }

    .modal-dialog.modal-540 {
        max-width: 540px;
    }
}

@media (max-width: 479px) {
    .logo {
        width: 100px;
        height: 100px;
    }
    .card .card-header h6.text-primary {
        font-size: 16px;
    }
    .card-patient-info .btn-edit-patient,
    .card-patient-info .btn-download-qrcode {
        height: 30px;
        padding: 2px 8px;
        font-size: 15px;
    }
    .card-patient-info .wrap-info > .wrap-row p {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .card-patient-info #qrcode-large {
        margin: 15px 0 10px;
    }
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        font-size: 14px;
    }
    .card-patient-info .wrap-info > .wrap-phone-email {
        flex-direction: column;
    }
    .card-patient-info .wrap-info > .wrap-phone-email > .wrap-email {
        margin-left: initial !important;
    }
    ul.sidebar.toggled + #content-wrapper .topbar #sidebarToggleTop {
        width: 33px;
        height: 33px;
        padding-top: 2px;
        border-radius: 2px !important;
    }
}

@media (max-width: 490px) {
    #card-treatment .datepicker-group {
        width: 135px;
    }
    #card-treatment .card-header h6,
    #card-labo .card-header h6,
    #card-supply .card-header h6 {
        padding-right: 0;
    }
    #card-treatment .total-item,
    #card-labo .total-item,
    #card-supply .total-item {
        margin-left: 3px;
    }
    .re-examination-date > .btn-clear {
        display: none !important;
    }
}

@media (max-width: 379px) {
    ul.sidebar.toggled + #content-wrapper .topbar #sidebarToggleTop {
        box-shadow: none !important;
    }
}

@media (min-width: 320px) and (max-width: 575px) {
    .col-xs {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%
    }
    .row-cols-xs-1>* {
        flex: 0 0 100%;
        max-width: 100%
    }
    .row-cols-xs-2>* {
        flex: 0 0 50%;
        max-width: 50%
    }
    .row-cols-xs-3>* {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .row-cols-xs-4>* {
        flex: 0 0 25%;
        max-width: 25%
    }
    .row-cols-xs-5>* {
        flex: 0 0 20%;
        max-width: 20%
    }
    .row-cols-xs-6>* {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }
    .col-xs-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }
    .col-xs-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }
    .col-xs-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }
    .col-xs-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-xs-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .col-xs-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }
    .col-xs-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-xs-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }
    .col-xs-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }
    .col-xs-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-xs-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }
    .col-xs-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }
    .col-xs-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .daterangepicker .ranges > ul {
        display: flex;
        flex-wrap: wrap;
    }
    .daterangepicker.single .ranges > ul > li:last-child {
        border-right: none;
    }
    .daterangepicker, .daterangepicker .ranges li.active {
        box-shadow: none !important;
    }
    .daterangepicker .ranges > ul > li {
        padding: 8px 10px;
    }
    .daterangepicker .ranges > ul > li:hover {
        background-color: #fff;
    }
}

@media only screen
and (max-device-width: 768px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

    .ec-toolbar .ec-title {
        margin-bottom: 7px;
    }
    .appointment-page .ec-toolbar {
        flex-direction: column;
        height: 130px;
    }
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1025px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

    .appointment-page .ec-toolbar .ec-button-group {
        margin-top: 7px;
    }

    .appointment-page .card-available-times #appointment-ec > .ec {
        height: calc(100vh - 196px);
    }

    .modal button.btn-add-patient-icon,
    .modal button.btn-add-employee-icon {
        top: 22px;
        right: 39px;
    }

    .appointment-page.v2 .wrap-calendar {
        max-width: 100%;
        flex: 0 0 100%;
    }

    #add-patient-modal .modal-body {
        max-height: calc(100vh - 230px);
    }

    span.select2-container .select2-search:not(.select2-search--inline):before {
        top: 12px
    }

    .select2-search--dropdown .select2-search__field {
        background-color: #fff !important;
    }

    .btn:not(.btn-sm,.dropdown-toggle) {
        padding: .29rem .75rem .47rem;
    }

    .wrap-buttons-footer .btn-cancel-appointment,
    .wrap-buttons-footer .btn-checkin-modal {
        padding: .4rem .75rem .37rem;
    }

    .gj-datepicker-bootstrap [role=right-icon] button .gj-icon,
    .gj-datepicker-bootstrap [role=right-icon] button .material-icons {
        top: 7px;
    }

    .ec-toolbar .ec-title {
        user-select: initial;
        cursor: pointer;
    }
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1025px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

    .appointment-page .wrap-calendar {
        flex: 0 0 calc(100% - 342px);
        max-width: calc(100% - 342px);
    }

    .appointment-page .wrap-date {
        flex: 0 0 342px;
        max-width: 342px;
    }

    .modal button.btn-add-patient-icon,
    .modal button.btn-add-employee-icon {
        top: 22px;
        right: 39px;
    }

    .appointment-page.v2 .wrap-calendar {
        max-width: 100%;
        flex: 0 0 100%;
    }

    #add-patient-modal .modal-body {
        max-height: calc(100vh - 230px);
    }

    span.select2-container .select2-search:not(.select2-search--inline):before {
        top: 12px
    }

    .select2-search--dropdown .select2-search__field {
        background-color: #fff !important;
    }

    .btn:not(.btn-sm,.dropdown-toggle) {
        padding: .29rem .75rem .47rem;
    }

    .wrap-buttons-footer .btn-cancel-appointment,
    .wrap-buttons-footer .btn-checkin-modal {
        padding: .4rem .75rem .37rem;
    }

    .gj-datepicker-bootstrap [role=right-icon] button .gj-icon,
    .gj-datepicker-bootstrap [role=right-icon] button .material-icons {
        top: 7px;
    }

    .ec-toolbar .ec-title {
        user-select: initial;
        cursor: pointer;
    }

    .topbar #sidebarToggleTop > i {
        position: relative;
        top: -3px;
    }

    .modal button.btn-add-patient-icon {
        right: 22px;
    }
}

@media (device-width: 1366px) and (orientation: landscape) {
    /* iPad Landscape (Air, Pro, Mini) */
    .appointment-page .wrap-calendar {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .appointment-page .wrap-date {
        display: none;
    }

    #accordionSidebar:not(.toggled) .btn-close-menu {
        display: none;
    }

    #accordionSidebar.toggled .btn-close-menu {
        display: block;
    }

    .topbar:not(.toggled) .sidebar-brand {
        display: block;
    }

    #accordionSidebar:not(.toggled) {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    #accordionSidebar.toggled {
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
        pointer-events: none;
    }

    .appointment-page.v2 .wrap-calendar {
        max-width: 100%;
        flex: 0 0 100%;
    }

    #add-patient-modal .modal-body {
        max-height: calc(100vh - 230px);
    }

    span.select2-container .select2-search:not(.select2-search--inline):before {
        top: 12px
    }

    .select2-search--dropdown .select2-search__field {
        background-color: #fff !important;
    }

    .btn:not(.btn-sm,.dropdown-toggle) {
        padding: .29rem .75rem .47rem;
    }

    .wrap-buttons-footer .btn-cancel-appointment,
    .wrap-buttons-footer .btn-checkin-modal {
        padding: .4rem .75rem .37rem;
    }

    .gj-datepicker-bootstrap [role=right-icon] button .gj-icon,
    .gj-datepicker-bootstrap [role=right-icon] button .material-icons {
        top: 7px;
    }

    .ec-toolbar .ec-title {
        user-select: initial;
        cursor: pointer;
    }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (max-device-height: 1080px) {
    /* Desktop only, không phải iPad Pro */
    .appointment-page.v2 .wrap-calendar {
        max-width: calc(100% - 342px);
        flex: 0 0 calc(100% - 342px);
    }
}

/* style cho laptop 15" - 17" gần FHD */
@media (min-width: 1500px) and (max-width: 2000px) {
    .wrap-main-filters .filter-category {
        max-width: 183px;
    }

    .wrap-main-filters .filter-supplier {
        max-width: 165px;
    }
}

@media (min-width: 2000px) {
    .wrap-main-filters .filter-category {
        min-width: 270px;
    }

    .wrap-main-filters .filter-supplier {
        min-width: 250px;
    }
}