@media (max-width: 991px){
    /* 2021-03-17 */
    .qrequest-box .user{
        margin-bottom: 20px;
    }
    .qrequest-box .btn-box .btn{
        margin-top: 15px;
    }

    /* checklist 2021-08-04 */
    .chat .chat-info .panel.is-vdocall, .chat .chat-info .panel.is-map{
        padding: 0px;
        box-shadow: none;
    }
    .chat .chat-info .panel.is-note{
        position: fixed;
        height: 100vh;
        width: 100vw;
        z-index: 2000;
        margin: 0px;
        overflow-y: auto;
        top: 0px;
        left: 0px;
        display: none;
        padding-top: 72px;
    }
    .chat .chat-info .video-call .actions-mobile i{
        float: left;
    }
    .chat .chat-info .video-call .actions-mobile i.btn-mobile-note{
        font-size: 19px;
    }
    .chat .chat-menu:not(.no-list) ~ .chat-info .panel.is-note{
        display: none !important;
    }
    .chat .chat-info .panel.is-map .panel-head{
        display: none;
    }
    .chat .chat-info, .chat .chat-info .panel.is-vdocall{
        display: none;
    }
    .chat:not(.noti){
        width: 100%;
    }
    .chat:not(.noti) .chat-list{
        padding-bottom: 100px;
    }
}

@media (max-width: 767px){
    .form-filter{
        display: inline-block;
    }
    .form-search-table{
        display: none;
    }
    .tab-body .topic{
        margin-top: 0px;
    }
    .tab-body .topic .btn {
        padding: 10px 15px 8px;
        margin-top: 0px;
    }
    .tab-body .form-filter{
        float: left;
        width: auto;
    }
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after{
        position: absolute;
    }
    .calendar-control .calendar-head .input-group.is-picker{
        max-width: 100%;
    }

    .calendar-time .fc-head .fc-resource-area{
        width: 120px;
    }
    .calendar-time .fc-resource-area td.fc-widget-content, .calendar-time .fc-resource-area .fc-cell-text {
        font-size: 14px;
        line-height: 19px;
    }
    .popover{
        top: 50% !important;
        left: 50% !important;
        width: 90vw;
        padding: 5px;
        margin: 0px !important;
        position: fixed;
        -webkit-transform: translate(-50%, -50%) !important;
        -moz-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        -o-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
    }
    .popover .arrow{
        display: none;
    }
    .calendar-form .calendar-booking-form{
        margin-bottom: 55px;
    }
    .calendar-form .calendar-booking-form .btn-box{
        bottom: -48px;
    }
    .calendar-form .btn-box .btn{
        padding: 7px 20px;
    }

    .patient-box{
        position: relative;
    }
    .patient-box h3{
        font-size: 18px;
    }
    .patient-box .user{
        margin-bottom: 20px;
    }
    .patient-box .form-group{
        margin: 5px 0px 0px;
    }
    .patient-box .form-group p{
        display: inline-block;
        margin: 0px;
    }
    .patient-box .form-group label{
        font-size: 14px;
        width: 120px;
        margin-bottom: 0px;
    }
    .patient-box .btn-add-schedule{
        margin: 20px 0px 15px;
        float: right;
    }

    .calendar .fc-toolbar .fc-left{
        width: 100%;
        text-align: center;
        padding: 0px 30px;
        position: relative;
    }
    .calendar .fc-toolbar .fc-left h2{
        width: 100%;
        margin: 0px;
        text-align: center;
    }
    .calendar .fc-toolbar .fc-left .fc-prev-button{
        position: absolute;
        left: -12px;
        top: 0px;
    }
    .calendar .fc-toolbar .fc-left .fc-next-button{
        position: absolute;
        right: -12px;
        top: 0px;
    }
    .calendar .fc-month-view .fc-head .fc-day-header span{
        width: 11px;
        overflow: hidden;
        display: inline-block;
        height: 14px;
    }
    .calendar .fc-month-view table th{
        padding-bottom: 5px !important;
    }
    .calendar .fc-month-view .fc-scroller{
        height: auto !important;
        border-radius: 0px;
    }
    .calendar .fc-month-view{
        margin-left: -20px;
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
    }
    .calendar .fc-month-view .fc-row tbody tr td{
        padding: 0px 5px !important;
        position: relative;
        line-height: 0px;
    }
    .calendar .fc-month-view .fc-day-grid-event .fc-content span, .calendar .fc-month-view .fc-day-grid-event:before{
        display: none;
    }
    .calendar .fc-month-view .fc-day-grid-event{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        padding: 0px;
        display: inline-block;
        margin: 0px;
        bottom: 4px;
    }
    .calendar .fc-month-view table td{
        padding: 10px 5px 2px !important;
    }
    .calendar .fc-month-view .fc-row .fc-today:before{
        top: 5px;
    }
    .calendar-box .calendar-right{
        display: none !important;
    }
    .calendar .fc-agenda-view{
        width: 100%;
    }
    .calendar .fc-agenda-view .fc-scroller{
        height: auto !important;
    }
    .calendar .fc-agenda-view .fc-head th.fc-day-header{
        text-align: center;
        text-indent: -70px;
    }
    .calendar .fc-agenda-view .fc-head .calendar-filter td{
        white-space: nowrap;
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
        overflow-x: auto;
        padding-bottom: 0px !important;
        padding-right: 20px !important;
    }
    .calendar .fc-agenda-view .fc-body{
        margin-top: 20px;
    }
    .calendar .fc-agenda-view .fc-scroller{
        margin-top: 25px;
    }
    .calendar .fc-agenda-view{
        overflow: hidden;
    }

    .btn {
        text-transform: none;
    }

    .tab.for-queue{
        margin-top: -30px;
        margin-left: -20px;
        width: calc(100% + 40px);
    }
    .tab.for-queue .tab-head .text-icon{
        padding-left: 0px;
        text-align: center;
    }
    .tab.for-queue .tab-head .text-icon.no-icon i, .tab.for-queue .tab-head .text-icon i{
        display: block;
        position: relative;
        right: 0;
        left: 0;
        margin: 0 auto 5px;
    }
    .tab.for-queue .tab-head .inner{
        width: 25%;
        float: left;
        padding: 15px 5px;
    }
    .tab.for-queue .tab-head .inner .text-icon{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0px;
        font-size: 12px;
        line-height: 14px;
    }
    .tab.for-queue .tab-head .inner .badge{
        top: 5px;
        right: 15px;
    }
    .tab.for-queue .topic {
        width: 100%;
    }
    .tab.for-queue .topic .btn{
        padding: 9px 8px 3px;
        width: calc(50% - 5px);
    }
    .tab.for-queue .topic .btn-icon{
        padding-left: 20px;
    }
    .tab.for-queue .topic .btn-icon span{
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tab.for-queue .topic .btn-icon i{
        position: absolute !important;
    }
    .tab.for-queue .tab-body{
        padding: 15px 20px;
    }
    .mobile-pull-right{
        float: right;
    }
    .mobile-pull-left{
        float: left;
    }

    .form-q-scan{
        width: 100%;
        position: relative;
    }
    .form-q-scan .form-group{
        margin-bottom: 10px;
    }
    .form-q-scan .form-group:first-child{
        width: calc(100% - 85px);
    }
    .form-q-scan .form-group:last-child{
        width: 75px;
        float: right;
    }
    .form-q-scan .btn, .form-q-scan .form-control{
        padding: 8px 12px;
        width: 100%;
    }

    .q-all{
        margin-top: 20px;
        margin-left: -20px;
        width: calc(100% + 40px);
        padding-left: 20px;
        padding-right: 5px;
    }
    .q-list{
        height: auto;
    }
    .q-box{
        width: 300px;
        max-width: calc(100vw - 50px);
        padding-left: 15px;
        padding-right: 15px;
    }
    .q-card .type{
        font-size: 13px;
        line-height: 18px;
    }
    .q-card .type .col{
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .radio-select .radio{
        text-align: center;
    }
    .radio-select .radio > label > .text-icon{
        width: 100%;
        margin: 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .move-box .sortable-target{
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
    }
    .sortable-target .ui-state-default{
        margin: 0px;
    }
    .sortable-target .ui-state-default.is-target .q-number{
        max-width: 100%;
    }
    .sortable-target .ui-state-default.is-target .q-number .inner{
        padding-right: 0px;
    }
    .sortable-target .ui-handle, .sortable .ui-handle{
        display: none;
    }
    .q-sort{
        display: block;
    }

    .qp-detail{
        padding-left: 65px;
        margin-top: -20px;
    }
    .qp-detail .user{
        padding-left: 0px;
    }
    .qp-detail .user .bg{
        left: -65px;
        top: 0px;
        margin-top: -5px;
    }
    .qp-detail p{
        margin-bottom: 8px;
    }

    .card-custom, .q-modal .card-custom{
        width: 50%;
    }
    .modal .modal-footer .btn{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .patient-box .no{
        float: left;
        font-size: 16px;
        line-height: 20px;
        margin-top: 15px;
    }

    .mobile-no-margin{
        margin: 0px !important;
    }
    .mobile-text-right{
        text-align: right;
    }
    .tab.for-filter .tab-head .inner{
        width: auto;
        padding: 15px 20px;
    }
    .tab.for-filter .tab-body{
        padding: 15px 0px;
    }
    .tab.for-filter .tab-body table th, .table-responsive table thead tr > th{
        padding-top: 12px !important;
    }

    .r-box table .text-icon{
        margin-bottom: 0px;
    }
    .chat.for-queue{
        padding: 0px;
        margin-top: -20px;
        height: calc(100vh - 145px);
    }
    .chat.for-queue .chat-list{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 0px;
        overflow-x: hidden;
    }
    .chat.for-queue .chat-box{
        width: 100%;
    }
    .chat.for-queue .chat-title{
        padding: 0px;
        position: sticky;
        top: 0px;
    }
    .chat.for-queue .chat-title .tab-head{
        border-radius: 0px;
        border-top: 0px;
        background: #f1f1f1;
    }
    .chat.for-queue .chat-title .tab-head .inner{
        width: 50%;
        text-align: center;
    }
    .chat.for-queue .chat-title .tab-head .inner > span{
        position: relative;
        display: block;
        float: initial;
        margin: 0 auto;
    }
    .chat.for-queue .chat-title .tab-head .inner .badge{
        top: -10px;
        right: -20px;
    }

    .q-doctor .left, .q-doctor .right{
        width: 100%;
        padding: 0px;
    }
    .q-doctor .q-box{
        padding: 0px;
        border: 0px;
        max-width: 100%;
    }
    .q-doctor .q-list{
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
        width: 100%;
        height: auto !important;
        padding-bottom: 15px;
        width: calc(100% + 20px);
    }
    .q-doctor .q-list .q-card{
        vertical-align: top;
        margin: 0px 10px 0px 0px;
        min-height: 212px;
        width: calc(100% - 40px);
    }
    .q-doctor .q-list .q-card .queue{
        float: left;
    }
    .q-doctor .patient-box .form-group label{
        width: 60px;
    }
    .q-doctor .patient-box{
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 30px;
        border-bottom: 1px solid #D3D3D3;
    }
    .q-doctor .patient-box .no{
        position: absolute;
        right: 5px;
        bottom: 5px;
    }
    .patient-type .type .text-icon{
        margin: 0px;
    }
    .q-status{
        width: 100% !important;
    }
    .mobile-margit-top-15{
        margin-top: 15px;
    }
    .tab.for-queue.is-qdc .calendar-box{
        margin-top: 30px;
    }

    /* 2021-03-17 */
    .tab.for-queue .tab-head .inner{
        width: 20%;
    }
    .tab.for-queue .tab-head > .inner.pull-right:before{
        display: none;
    }
    .tab.for-queue .tab-head > .inner.pull-right:after{
        left: 0px;
        width: 100%;
    }
    .tab.for-queue .tab-head .inner .badge{
        right: 5px;
    }
    .qrequest-box{
        position: relative;
        padding-bottom: 70px;
    }
    .qrequest-box p {
        margin-bottom: 3px;
    }
    .qrequest-box .col:not(:first-child){
        margin-top: 10px;
    }
    .qrequest-box .footer{
        padding-top: 15px;
    }
    .qrequest-box .footer .text-icon{
        margin: 0px;
    }
    .qrequest-box .body .col{
        position: static;
    }
    .qrequest-box .btn-box{
        position: absolute;
        bottom: 25px;
        left: 0px;
        width: 100%;
        text-align: center;
        margin: 0px;
    }
    .qrequest-box .btn-box .btn{
        min-width: 80px;
    }
    .qrequest-box.for-history{
        padding-bottom: 15px;
    }
    .calendar-select .slot-time{
        width: 100%;
        max-width: 100%;
        padding-left: 0px;
    }
    .calendar-select .slot-day-text{
        display: none;
    }
    .calendar-select .slot-day .datepicker{
        background: #fff;
        margin-left: -12px;
        width: calc(100% + 24px);
    }
    .calendar-select .slot-time .radio > input ~ label{
        padding-left: 30px;
        padding-right: 0px;
        padding-bottom: 5px;
    }
    .calendar-select .slot-time .radio > input ~ label:before{
        left: 0px;
    }
    .calendar-select .slot-time .radio > input ~ label:after{
        left: 4px;
    }
    .calendar-select .slot-time p{
        margin-bottom: 5px;
    }
    .radio-select.for-select-dc .radio{
        width: auto;
        text-align: left;
    }
    .q-type{
        text-align: left;
    }
    .row.is-reverse .col:nth-child(odd), .row.is-reverse .col:nth-child(even){
        float: left;
    }

    .calendar-select .slot-day{
        margin-bottom: 20px;
    }
    .calendar-select .slot-day-text{
        display: block;
        font-size: 15px;
    }

    /* checklist 2021-08-04 */
    .chat .chat-info, .chat .chat-info .panel.is-vdocall{
        display: block;
    }
    .chat:not(.noti){
        width: 100vw;
    }

    /* 2021-10-02 */
    .upload.upload-avatar .upload-btn{
        width: calc(100% - 130px);
        margin-top: 20px;
    }
    .upload.upload-avatar .upload-file{
        width: 120px;
    }
    .upload.upload-logo .upload-file .file img{
        height: auto;
    }
}

@media (max-width: 520px){
    .radio-select{
        width: calc(100% + 10px);
    }
    .radio-select .radio{
        width: calc(33.33% - 10px);
    }
    .radio-select .radio > label{
        width: 100%;
        padding: 10px 10px;
    }
    .card-custom, .q-modal .card-custom{
        width: 100%;
    }
    .q-type{
        margin-top: 5px;
    }
    .q-type .form-control{
        width: 100%;
    }
}

@media (min-width: 768px){
    .table.datatable{
        min-width: 100% !important;
    }
}