::-webkit-scrollbar-thumb {
  background: #5f6366;
  border-radius: 10px;
}
::-webkit-scrollbar {
  width: 5px;
}

.block-error
{
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    color: red;
    text-align: left;
    padding-left: 0;
}
.swal2-popup .swal2-title
{
    font-size: 1.4em !important;
    font-weight: unset !important;
}
.swal2-popup .swal2-content
{
    font-size: 1em !important;
}

.token-status
{
    font-size: 25px;
}

.hide
{
    display: none !important;
}
#toast-block .toast-custom.warning {
    background: #FFBC11;
    color: #fff;
}

#toast-block .toast-custom.warning .progress-bar
{
    background-color: #9c7103;
    opacity: 0.7;
}
.agent-name-manage
{
    display: block;
}
.box-item-action
{
    display: none;
}

.show-box{
    display: block !important;
}

.t-offline
{
    display: none;
}

.btn-add-course
{
    top: 42px;
}

.box-hidden
{
    display: none;
}

.file-import
{
    opacity: unset;
}

.process-history strong
{
    color: #000;
}

.select2-container--default .select2-selection--multiple
{
    border: 1px solid #f0f1f5 !important;
}
#process-study
{
    margin-top: 30px;
}

.list-group-complete
{
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
}

.list-group-complete span.active
{
    color: #009688;
}

.pd-10
{
    padding: 10px;
}

.lbl-calendar
{
    margin: 10px 0;
}

.btn-add-calendar
{
    line-height: unset;
    border-radius: 5px;
}

/*.date-table*/
/*{*/
/*  position: absolute;*/
/*    font-size: 11px;*/
/*    font-weight: 500;*/
/*    bottom: 20px;*/
/*}*/

/*.time-table*/
/*{*/
/*  position: absolute;*/
/*    font-size: 11px;*/
/*    font-weight: 500;*/
/*    bottom: 3px;*/
/*}*/


.block-list-session .list-attendance-item .box-attendance
{
    min-height: 100px;
}

table.dataTable thead .sorting_asc
{
    background-image: none !important;
}

.lbl-lesson-item
{
    font-weight: bold;
    color: #000;
}
.modal_fixScroll {
    overflow:hidden;
    overflow-y:scroll;
    padding-right:0 !important;
}
.modal_fixScroll::-webkit-scrollbar {
    opacity: 0;
}

.t-text {
    display: none;
    margin-bottom: 5px;
}

.box-text-lesson
{
    background: #fff;
    height: auto;
    min-height: 53px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    border: 0;
}

.list-item-note-lesson
{
    padding: 5px 10px;
    background: #f7f6f6;
    margin: 5px 0;
    border-radius: 5px !important;
}

.list-item-note-lesson:hover .area-remove-note, .list-item-note-order:hover .area-remove-note, .list-item-note-customer:hover .area-remove-note,.list-item-note-conversation:hover .area-remove-note,
.list-item-student-problem-conversation:hover .area-remove-student-problem
{
    display: block;
}

.list-item-note-lesson p
{
    margin: 0;
}

.note-created
{
    font-size: 14px;
}

.area-remove-note, .area-remove-student-problem
{
    margin: auto;
    display: none;
}

.inpt-note-lesson
{
    margin-top: 20px;
}

.btn-send-note
{
    cursor: pointer;
}

.box-list-note-lesson
{
    max-height: 500px;
    overflow-x: hidden;
}

.tbl-report-student thead th
{
    border: 1px solid #ffff;
    vertical-align: middle;
    color: black;
    padding: 10px 5px;
    font-size: 14px;
}

.tbl-report-student tbody tr td
{
    border: 1px solid #eee;
    text-align: center;
}

.btn-save-annual-test-point
{
    margin-top: 10px;
}

.form-annual-test-point .form-group
{
    margin: auto;
}

.text-black
{
    color: #585555 !important;
}

.chk-day-of-week
{
    cursor: pointer;
}

.link-fb
{
    color: #02AEC4 !important;
}

.lbl-type-student
{
    margin: 5px 0 0 0;
}

.inp-lesson-content
{
    margin-bottom: 10px;
}

.inpt-lesson-item
{
    min-width: unset !important;
    background: #f1f1f1;
    cursor: pointer;
}

.inpt-lesson-item:hover i
{
    color: red;
}

.color-danger {
    color: red;
}

.badge{
    font-weight: 500;
}

.bage_online{
    background: #2bc155;
    color: #fff;
    font-size: 12px !important;
    padding: 2px 3px;
    border-radius: 3px;
}
.bage_offline{
    background: #1ea7c5;
    color: #fff;
    font-size: 12px;
    padding: 2px 3px;
    border-radius: 3px;
}

.badge-custom-danger
{
    background: #F94687;
    color: #fff;
    font-size: 12px;
    padding: 2px 3px;
    border-radius: 3px;
}

.list-group-item .list_course{
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
    font-size: 14px;
    width: 85%;
}

.list-group-item .list_course .name_course{
    width: 80%;
}

#report-student-class .modal-body{
    padding: 0;
}
#report-student-class .modal-body table{
    margin-bottom: 0;
}

.table thead th{
    vertical-align: middle;
    padding: 10px 15px;
}

.select2-container--default.select2-container--disabled .select2-selection--single{
    background-color: #dbdbdb;
}

table.dataTable.no-footer {
    border-bottom: 0 !important;
}

.percent-of-attendance
{
    margin-top: 10px;
    border-top: 1px solid #fff;
    padding-top: 10px;
}

.percent-of-attendance h6
{
    font-size: 13px;
    color: #8c8c8c;
    font-weight: 400;
}

.percent-of-attendance h6 span
{
    color: #000;
}

.item-status-student[tooltip]:after, .tooltip-attendance-item[tooltip]:after
{
    max-width: 30em;
    min-width: 14rem;
    white-space: pre-wrap !important;
    text-overflow: initial !important;
}

.form-save-order .form-control:disabled, .form-save-order .form-control[readonly]
{
    background: #f5f5f5;
    cursor: no-drop;
}

#tbl-product_filter
{
    float: left;
}

.btn-link svg
{
    width: 16px;
/*     margin-right: 2px; */
/*     margin-bottom: 2px; */
}

.list-student-report-test
{
    height: 500px;
}

.drop_box_date .dropdown-item{
    font-size: 13px;
    padding: 5px 15px;

}
.drop_box_date .dropdown-item:hover,
.drop_box_date .dropdown-item:focus{
    background: transparent;
}
.drop_box_date .dropdown-item.active{
    color: #009688;
    background: transparent;
}
.drop_box_date>a{
    width: 50%;
    display: block;
}
.drop_box_date.show{
    /*transform: translate3d(-135px, -400px, 0px) !important;*/
    top: unset;
    left: -50px !important;
    margin-top: 10px;
    will-change: transform;
    min-width: 280px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.form-filter-product .show > .btn-dark.dropdown-toggle {
    color: #ffffff;
    background-color: #009688;
    border-color: #009688;
}
.drop_box_date .custom_choose_date{
    padding: 5px 15px;
    font-size: 13px;
    /*margin-bottom: 15px;*/
    /*border-bottom: 1px solid #ebebeb;*/
}
.drop_box_date .custom_choose_date input{
    width: 100% !important;
    border: transparent;
    background: #ededed;
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 12px;
}
#toggle-option-date{
    margin-top: 8px;
}
.drop_box_date .custom_choose_date .control-group{
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drop_box_date #foot{
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    margin: 10px 0 0;
}
.drop_box_date #foot .btn{
    padding: 5px 10px;
    font-size: 13px !important;
}
.table_title_small thead th{
    font-size: 13px !important;
    padding: 8px 20px 8px 10px !important;
}
.bg-danger {
    background-color: #bb0d00 !important;
}
.tabs_custom_order .nav-tabs .nav-link.active {
    background: #01aec4;
    color: #ffffff;
    border-bottom: 3px solid #02AEC4;
    border-radius: 40px;
}

thead{
    color: #000000e0;
    background: #f5f5f5;
}

.btn-custom-filter-date.active
{
    color: #02AEC4 !important;
}

.no-flex
{
    display: block !important;
}

.item-calendar-wrap
{
    padding: 10px 0;
}

.item-calendar-wrap:hover
{
    background: #f5f5f5;
    cursor: all-scroll;
}

.item-calendar-wrap .form-group
{
    margin-bottom: 0 !important;
}

.btn-action-fanpage svg
{
    width: 4px;
}

.box-fanpage
{
    display: block !important;
    box-shadow: 0px 0px 15px -7px #bfb9b9;
    padding: 15px;
    border: 1px solid #eeee;
    border-radius: 8px;
    padding-bottom: 0;
}

.box-page-content
{
    min-height: 90vh;
}

.detail-content-conversation
{
    background: #fbf7f3;
    min-height: 90vh;
}

.box-item-participant
{
    cursor: pointer;
    padding: 15px 10px 10px !important;
}

.box-item-participant:hover
{
    background: #eee !important;
}

.box-page-content
{
    padding-bottom: 0;
    padding-left: 15px;
}

.list-user-conversation,.detail-content-conversation
{
    height: 90vh;
    overflow: auto;
}

.order-conversation,.order-conversation .plan-list
{
    height: 90vh;
}

.unread_count
{
    font-weight: bold !important;
    color: #000 !important;
}

.numberCircle {
   border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 3px;
    background: #d93616;
    color: #fff;
    text-align: center;
    font: 11px Arial, sans-serif;
    font-weight: bold;
    position: absolute;
    bottom: -5px;
    left: 25px;
}

.box-avatar
{
    position: relative;
}

.display-5
{
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

#toast-notify .toast-custom.dark {
    background: #747474;
    color: #fff;
    max-width: 300px !important;
}

#toast-notify .toast-custom.dark .progress-bar {
    background-color: #c3c3c3;
    opacity: 0.7;
}

.list-fn-order-conversation
{
    display: flex;
    justify-content: center;
}

.list-fn-order-conversation li
{
    float: left;
    height: 30px;
    width: 30px;
    padding: 3px 0;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 50px;
    margin: 0 5px;
    font-size: 14px;
}

.list-fn-order-conversation li:hover
{
    cursor: pointer;
}

.accordion-conversation .accordion__header
{
    background: transparent !important;
    border-color: #ccc;
    border-left: none;
    border-right: none;
    border-radius: 0 !important;
    color: #000 !important;
}

.accordion-conversation .accordion__item
{
    margin-bottom: -1px;
}

.box-note-customer-conversation
{
    max-height: 200px;
    overflow-y: auto;
}

.accordion__body-student-problem{
    max-height: 400px !important;
}

.box-student-problem-conversation {
    max-height: 300px;
    overflow-y: auto;
}

.page_chat_box .chat-area
{
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    overflow: hidden;
}

.page_chat_box .detail-area
{
    border-left: 0;
}

.page_chat_box .detail-area
{
    padding: 0px 5px 0 5px;
    width: 410px; 
    overflow-y: hidden !important;
}

.tag-list-conversation
{
    position: absolute;
    right: 25px;
    background: #2bc155;
    color: #fff;
    font-size: 12px;
    padding: 0px 5px;
    bottom: 20px;
    border-radius: 4px;
}

.item-calendar-wrap .select2-selection__choice
{
    font-size: 13px;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
}

.wrap-calendar .form-control
{
    height: unset;
}

.page_chat_box .msg-username .msg-nameprofile
{
    font-weight: normal;
}

.lbl-page-name
{
    font-size: 14px;
}

.area-activity-fanpage
{
    border-bottom: 1px solid #ebebeb;
    overflow: unset !important;
}

.empty-content-fanpage
{
    margin: auto 0;
}

.txt-empty-content
{
    font-size: 18px;
}

.page_chat_box .area-activity-fanpage {
    width: 100%;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

.page_chat_box .filter-fanpage {
    width: 370px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: calc(100vh - 114px);
    mask-image: linear-gradient(to top,transparent,black),linear-gradient(to left,transparent 4px,black 0px);
    mask-size: 100% 20000px;
    mask-position: left bottom;
    -webkit-mask-image: unset;
    -webkit-mask-size: 100% 20000px;
    -webkit-mask-position: left bottom;
    transition: mask-position 0.3s,-webkit-mask-position 0.3s;
}

.page_chat_box .read-content-user {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-right: 1px solid #f7f7f7;
    border-left: 1px solid #f7f7f7;
}

.filter-name-conversation
{
    height: 30px;
    width: 30px;
}

.filter-name-conversation button
{
    padding: 0 !important;
}

.filter-name-conversation span
{
    font-size: 15px !important;
}

.page_chat_box .msg-profile
{
    margin-right: 10px !important;
}

.page_chat_box a
{
    color: #7e7e7e;
}

.fileuploader
{
    margin-bottom: 0;
    padding-bottom: 15px;
    position: absolute;
    background: #fff;
    bottom: 0px;
    max-width: unset;
    display: none;
    z-index: 999;
}

.fileuploader-item,.fileuploader-thumbnails-input
{
    margin-bottom: 0 !important;
    padding-top: 8% !important;
    width: calc(9% - 5px) !important;
}

.fileuploader-theme-thumbnails .fileuploader-items-list .actions-holder
{
    top: 0;
    right: 0;
}

.note-order-box .fileuploader {
    position: unset !important;
    padding-left: 0 !important;
}

.chat-image-attach
{
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 5px;
}

.chat-image-attach img
{
    border-radius: 10px;
}

.chat-file-attach a:hover
{
    text-decoration: underline;
}

.fileuploader-item .progress-bar2 span
{
    font-size: 15px !important;
    color: #ccc;
}

.fileuploader-theme-thumbnails .fileuploader-item .progress-holder .fileuploader-progressbar
{
    background: #0084f7 !important;
}

.tbl-result-test table td:first-child, .tbl-result-test table th:first-child, 
.tbl-attendance-class table td:first-child, .tbl-attendance-class table th:first-child,
.tbl-annual-result-test table td:first-child, .tbl-annual-result-test table th:first-child,
#box-debt-project table td:first-child, #box-debt-project table th:first-child,
#box-debt-sale table td:first-child, #box-debt-sale table th:first-child,
#box-tbl-kpi table td:first-child, #box-tbl-kpi table tr:first-child th:first-child
{
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 2;
  white-space: nowrap;
}

#box-debt-project table td:first-child, #box-debt-project table th:first-child,
#box-debt-sale table td:first-child, #box-debt-sale table th:first-child,
#box-tbl-kpi table td:first-child, #box-tbl-kpi table th:first-child,
#box-debt-project table tr:hover td, #box-debt-sale table tr:hover td, #box-tbl-kpi table tr:hover td, #table-list-attendance-payment table tr:hover td
{
    background-color: #f5f5f5 !important;
}

.dark-preview .tbl-attendance-class table td:first-child, 
.dark-preview .tbl-result-test table th:first-child, 
.dark-preview .tbl-annual-result-test table th:first-child, 
.dark-preview #box-debt-project table td:first-child, .dark-preview #box-debt-project table th:first-child,
.dark-preview #box-debt-sale table td:first-child, .dark-preview #box-debt-sale table th:first-child,
.dark-preview #box-tbl-kpi table td:first-child, .dark-preview #box-tbl-kpi table th:first-child,
.dark-preview #box-debt-project table tr:hover td, .dark-preview #box-debt-sale table tr:hover td, .dark-preview #box-tbl-kpi table tr:hover td, .dark-preview #table-list-attendance-payment table tr:hover td
{
    background-color: #18191a !important;
}

.tbl-result-test td, .tbl-result-test th {
  border-bottom: dashed #888 1px;
}

.tbl-result-test .table-hover tbody tr:hover td:first-child
{
    background: #eee;
}

.box-progress-complete-lesson
{
    width: 90%;
    margin: 3px 0;
    height: 12px;
}

.box-progress-complete-lesson .progress,.box-progress-complete-lesson .progress .progress-bar
{
    height: 12px;
}

.page_chat_box .chat-area-header
{
    display: block;
}

.chat-area-header
{
    padding: 0 !important;
}

.chat-area-title .msg
{
    padding: 5px 10px 0px;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}

.chat-area-title .msg:hover
{
    background: unset !important;
}

.chat-area-title .msg-detail
{
    padding-left: 10px;
    width: 100%;
}

.chat-area-title .msg-username
{
    margin-bottom: 0;
}

.chat-area-title .labelGroup
{
    display: block !important;
    margin-top: 0 !important;
}

.fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item
{
    margin-right: 14px;
}

.note-order-box .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item, .note-order-box .fileuploader-thumbnails-input
{
    margin: 0 0 0 15px !important;
}

.page_chat_box .conversation-area, .page_chat_box .filter-fanpage
{
    width: 390px;
}

.page_chat_box .msg .labelGroup
{
    justify-content: flex-start;
}

.page_chat_box .msg-detail
{
    width: 100% !important;
}

.asColorPicker-trigger {
    border: 0 none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.1875rem;
    background: #fff;
}

.dark-preview .asColorPicker-trigger
{
    background: #242526;
}

.asColorPicker-wrap {
    width: 100%;
}

.asColorPicker-dropdown
{
    max-width: 300px;
}

.asColorPicker-trigger span
{
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem
}

.asColorPicker-palettes
{
    display: none;
}

.box-color-cat
{
    width: 40px;
    height: 20px;
    float: right;
    border-radius: 3px;
}

.lbl-potential-item i
{
    display: none;
}

.lbl-potential-item:hover i
{
    display: block;
}

.page_chat_box .msg .labelGroup .label_item
{
    padding: 0px 10px;
    border-radius: 3px;
}
.btn-action-filter
{
    color: #aaa !important;
}

.btn-action-filter:hover
{
    color: #7e7e7e !important;
}
.list-user-online .timeline-panel {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.list-user-online li:last-child .timeline-panel {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.user-online-box
{
    overflow-y: auto;
}

.icon-chat-customer
{
    font-size: 2.0rem !important;
}

.block-user
{
    display: none;
    cursor: pointer;
}

.blocked
{
    display: inline-block !important;
}

.detail-area:hover .block-user
{
    display: inline-block;
}

.btn-show-order-report
{
    color: #1ea7c5;
}

.form-control, .form-control:focus, .form-control:hover {
    color: #7b7b7b !important;
    border: 1px solid #e9e9e9;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef !important;
    opacity: 1;
}

#list-course
{
    padding: 0;
}

.tbl-list-product-item tr:hover, .tbl-list-product-item tr td label:hover
{
    cursor: pointer;
}

.row-item-product
{
    padding: 20px !important;
}

.box-search-product-item
{
    max-height: 575px !important;
}

.wrap-btn-remove-package
{
    padding-top: 35px;
}

.tbl-list-product-order thead .sorting_asc, .tbl-list-product-item thead .sorting_asc
{
    background: #fff;
    border: none;
}

.tbl-list-product-order tbody tr td
{
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 15px;
    border: none !important;
}

.tbl-list-product-order tbody tr:hover, .tbl-list-product-order tbody tr:hover
{
    background-color: transparent !important;
    box-shadow: none !important;
}

.box-search-product-order
{
    max-height: 600px !important;
}


.pagination li a {
    padding: 5px 10px !important;
    border: 1px solid #dedede !important;
}

.pagination > li > a, .pagination > li > span {
    border-radius: 5px !important;
    margin: 0 2px !important;
}

.pagination.pagination-sm .page-item .page-link
{
    width: unset;
    height: unset;
    font-size: 13px !important;
    min-width: 35px;
    padding: 0 5px !important;
}

.pagination > li.disabled
{
    line-height: 30px;
}

.pagination-circle .page-item
{
    margin-right: 0 !important;
}


.pulse-css{
    border-radius: 100%;
    height: 1.2rem;
    top: -5px;
    width: 1.2rem;
    font-size: 10px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #dd0000;
}
.pulse-css:after, .pulse-css:before{
    background-color: #ff8383;
}

.toogle_button_sirbar{
    position: fixed;
    top: 90%;
    right: -100px;
    z-index: 10;
    line-height: 20px;
    border: none;
    background: #1bb1c0;
    color: #fff;
    border-radius: 40px;
}
/* .toogle_button_sirbar:hover{
    right: 0px;
    transition: all .3s;
} */
.toogle_button_sirbar a{
    padding: 7px;
    color: #fff;
    text-align: center;
    transition: all .3s;
}
.toogle_button_sirbar:hover a{
    padding: 8px;
}
.toogle_button_sirbar span{
    display: block;
    text-align: center;
}

.chat_conention_lan{

}
.chatbox.chat_conention_lan .chat-list-header{
    background: #179db0;
    border-radius: 0;
    color: white;
    font-weight: bold;
    /*justify-content: center;*/
}

.chatbox .contacts_body {
    height: calc(100vh - 80px);
}
.chatbox .img_cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dz-chat-history-back svg{
    color: #fff;
}





/*--------------------
Chat
--------------------*/
.chat {
    position: relative;
    /*  top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);*/
    width: 100%;
    height: calc(100% - 15px);
    max-height: 500px;
    z-index: 10;
    overflow: hidden;
    /*box-shadow: 0 5px 30px rgba(0, 0, 0, .2);*/
    /* background: rgba(0, 0, 0, .5);*/
    background: transparent;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/*--------------------
Chat Title
--------------------*/
.chat-title {
    flex: 0 1 45px;
    position: relative;
    z-index: 2;
    width: 100%;
    border-bottom: 1px solid #ccc;
    color: #777;
    padding-top: 50px;
    padding-bottom: 5px;
    background-color: #fff;
    text-transform: uppercase;
    text-align: center;
}
.chat-title h1,
.chat-title h2 {
    font-weight: normal;
    font-size: 14px;
    margin: 0;
    padding: 0;
}
.chat-title h2 {
    /* color: rgba(255, 255, 255, .8);*/
    font-size: 11px;
    text-transform: initial;
}
.chat-title .avatar {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 9px;
    border-radius: 30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
}
.chat-title .avatar img {
    width: 100%;
    height: auto;
}

/*--------------------
Messages
--------------------*/
.messages {
    flex: 1 1 auto;
    /*  color: rgba(255, 255, 255, .5);
    color: #fff;*/
    overflow: hidden;
    position: relative;
    width: 100%;
}
.messages .messages-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 101%;
    width: 100%;
}
.messages .message {
    clear: both;
    float: left;
    padding: 6px 10px 7px;
    border-radius: 20px 20px 20px 0;
    background: #eee;
    /*rgba(0, 0, 0, 0.1);*/
    margin: 15px 0;
    font-size: 14px;
    line-height: 1.4;
    margin-left: 35px;
    position: relative;
    border: 1px solid #ccc;
    /*text-shadow: 0 1px 1px rgba(0, 0, 0, .2);*/
}
.messages .message .timestamp {
    position: absolute;
    bottom: -10px;
    font-size: 10px;
    color: #555;
    left: 15px;
    /* color: rgba(255, 255, 255, .7);*/
}

.message-personal .timestamp{
    right: 15px;
}

.messages .message .checkmark-sent-delivered {
    position: absolute;
    bottom: -15px;
    right: 10px;
    font-size: 12px;
    color: #999;
}
.messages .message .checkmark-read {
    color: blue;
    position: absolute;
    bottom: -15px;
    right: 16px;
    font-size: 12px;
}
.messages .message::before {
    /*  content: '';
      position: absolute;
      bottom: -6px;
      border-top: 6px solid rgba(0, 0, 0, 0.1);
      left: 0;
      border-right: 7px solid transparent;*/
}
.messages .message .avatar {
    position: absolute;
    z-index: 1;
    bottom: -15px;
    left: -35px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
}
.messages .message .avatar img {
    width: 100%;
    height: auto;
}
.messages .message.message-personal {
    float: right;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px 20px 0 20px;
}
.messages .message.message-personal::before {
    /*
        content:"";
    border-color:#4A90E2 transparent;
      width:0;
      border-style:solid;*/
    /*
     left: auto;
     right: 0;
     border-right: none;
    border-left: 8px solid transparent;
     border-top: 9px solid #fff;

     bottom: -8px;*/
}
.messages .message:last-child {
    margin-bottom: 30px;
}
.messages .message.new {
    transform: scale(0);
    transform-origin: 0 0;
    -webkit-animation: bounce 500ms linear both;
    animation: bounce 500ms linear both;
}
.messages .message.loading::before {
    position: relative;
    /*  top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);*/
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    /*  background: rgba(255, 255, 255, .5);*/
    background: #888;
    z-index: 2;
    margin-top: 4px;
    -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
    animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
    border: none;
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
.messages .message.loading span {
    display: block;
    font-size: 0;
    width: 20px;
    height: 10px;
    position: relative;
}
.messages .message.loading span::before {
    position: relative;
    /*  top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);*/
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    /*  background: rgba(255, 255, 255, .5);*/
    background: #888;
    z-index: 2;
    margin-top: 4px;
    -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
    animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
    margin-left: -7px;
}
.messages .message.loading span::after {
    position: relative;
    /*  top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);*/
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    /*  background: rgba(255, 255, 255, .5);*/
    background: #888;
    z-index: 2;
    margin-top: 4px;
    -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
    animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
    margin-left: 7px;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

/*--------------------
Message Box
--------------------*/
.note-order-box {
    flex: 0 1 42px;
    background: #fff;
    padding: 10px;
    position: relative;
    border-radius: 20px;
    padding-bottom: 0;
}

.message-box {
    flex: 0 1 42px;
    width: 90%;
    background: #fff;
    margin: 2px auto;
    /*-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.4);*/
    /*background: rgba(0, 0, 0, 0.3);
      border-top:1px solid #e3e3e3;*/
    padding: 10px;
    position: relative;
    border-radius: 20px;
    height: 14px;
    border: 1px solid #ccc;
}

.note-order-box .message-input
{
    background: none;
    border: none;
    outline: none !important;
    resize: none;
    font-size: 15px;
    height: 24px;
    margin: 0;
    width: 100%;
    color: #444; 
}
.message-box .message-input{
    background: none;
    border: none;
    outline: none !important;
    resize: none;
    /* color: rgba(255, 255, 255, .8);*/
    font-size: 15px;
    height: 24px;
    margin: 0;
    width: 210px;
    color: #444;
}
.message-box textarea:focus:-webkit-placeholder {
    color: transparent;
}
.message-box .message-submit, .note-order-box .message-submit{
    position: absolute;
    z-index: 1;
    top: 9px;
    right: 10px;
    color: #1ea7c5;
    border: none;
    /* background: #c29d5f;*/
    background: #fff;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 5px;
    outline: none !important;
    transition: background 0.2s ease;
    cursor: pointer;
}
.message-box .message-submit:hover {
    background: #fff;
    color: #333;
}

/*--------------------
Custom Srollbar
--------------------*/
.mCSB_scrollTools {
    margin: 1px -3px 1px 0;
    opacity: 0;
}

.mCSB_inside > .mCSB_container {
    margin-right: 0px;
    padding: 0 10px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/*--------------------
Bounce
--------------------*/
@-webkit-keyframes bounce {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    4.7% {
        transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    9.41% {
        transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    14.11% {
        transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    18.72% {
        transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    24.32% {
        transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    29.93% {
        transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    35.54% {
        transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    41.04% {
        transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    52.15% {
        transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    63.26% {
        transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    85.49% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}
@keyframes bounce {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    4.7% {
        transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    9.41% {
        transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    14.11% {
        transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    18.72% {
        transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    24.32% {
        transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    29.93% {
        transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    35.54% {
        transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    41.04% {
        transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    52.15% {
        transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    63.26% {
        transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    85.49% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}
@-webkit-keyframes ball {
    from {
        transform: translateY(0) scaleY(0.8);
    }
    to {
        transform: translateY(-10px);
    }
}
@keyframes ball {
    from {
        transform: translateY(0) scaleY(0.8);
    }
    to {
        transform: translateY(-10px);
    }
}
.avenue-messenger {
    opacity: 1;
    border-radius: 20px;
    /* height: calc(100% - 60px) !important; */
    height: 360px;
    max-height: 375px !important;
    /* min-height: 220px !important; */
    width: 320px;
    /*  transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
    */
    background: rgba(255, 255, 255, 0.9);
    position: relative;
    /* right: 20px;
    bottom: 20px; */
    margin: auto 10px;
    z-index: 10;
    box-shadow: 2px 10px 40px rgba(22, 20, 19, 0.4);
    /*  transform: translateX(300px);*/
    -webkit-transition: 0.3s all ease-out 0.1s, transform 0.2s ease-in;
    -moz-transition: 0.3s all ease-out 0.1s, transform 0.2s ease-in;
}

.avenue-messenger div.agent-face {
    position: absolute;
    left: 0;
    top: -50px;
    right: 0;
    margin: auto;
    width: 101px;
    height: 50px;
    background: transparent;
    z-index: 12;
}

.avenue-messenger div {
    font-size: 14px;
    color: #232323;
}

.avenue-messenger .close {
    display: block;
    width: 100px;
    height: 100px;
    margin: 1em auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 99em;
    opacity: 0.5;
    /*border: 1px solid #ccc;
    color:#ccc;*/
    /* -webkit-box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px -1px 2px 0px rgba(0, 0, 0, 0.5);
    box-shadow:         0px -1px 2px 0px rgba(0, 0, 0, 0.5);*/
}

.avenue-messenger .close:hover {
    /*
    -webkit-box-shadow:  0 1px 1px rgba(0,0,0,0.3);
    -moz-box-shadow:  0 1px 1px rgba(0,0,0,0.3);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);*/
    opacity: 0.9;
}

.avenue-messenger .circle {
    display: block;
    width: 80px;
    height: 80px;
    margin: 1em auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 99em;
    border: 2px solid #fff;
    /*#4A90E2;*/
    /* -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
      -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);*/
}

.avenue-messenger .contact-icon .circle:hover {
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    transition: 0.2s all ease-out 0.2s;
    -webkit-transition: 0.2s all ease-out 0.2s;
    -moz-transition: 0.2s all ease-out 0.2s;
}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 5px;
    margin-top: -5px;
}

.arrow_box {
    position: relative;
    background: #fff;
    border: 1px solid #4A90E2;
}

.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.avenue-messenger .menu div.items {
    /*  height: 140px;
      width: 180px;
      overflow: hidden;
      position: absolute;
      left: -130px;
      z-index: 2;
      top: 20px;*/
}

.avenue-messenger .menu .items span {
    color: #111;
    z-index: 12;
    font-size: 14px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 40px;
    height: 86px;
    line-height: 40px;
    background: #fff;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 48px;
    opacity: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
}

.avenue-messenger .menu .button {
    font-size: 30px;
    z-index: 12;
    text-align: center;
    color: #333;
    content: "...";
    display: inline-flex;
    width: 48px;
    line-height: 25px;
    height: 40px;
    border-top-right-radius: 20px;
    position: absolute;
    right: 0;
    padding-right: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
}

.avenue-messenger .menu .button.active {
    background: #ccc;
}

/*
.menu .button:hover .menu .items span {
  display: block;
  left: -2px;
  opacity: 1;
}*/
.avenue-messenger .menu .items span.active {
    opacity: 1;
    /*border-radius:10px;
    height: 180px;
    width: 400px;
    transform:translateY(0);
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);*/
}

.avenue-messenger .menu .items a {
    color: #111;
    text-decoration: none;
}

.avenue-messenger .menu .items a:hover {
    color: #777;
}

@media only screen and (max-device-width: 667px), screen and (max-width: 450px) {
    .avenue-messenger {
        z-index: 2147483001 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        background: #fff;
    }

    .avenue-messenger div.agent-face {
        top: -10px !important;
        /* left:initial !important;*/
    }

    .chat {
        border-radius: 0 !important;
        max-height: initial !important;
    }

    .chat-title {
        padding: 20px 20px 15px 10px !important;
        text-align: left;
    }

    .circle {
        width: 80px;
        height: 80px;
        border: 1px solid #fff;
    }

    .menu .button {
        border-top-right-radius: 0;
    }
}
@media only screen and (min-device-width: 667px) {
    div.half {
        margin: auto;
        width: 80px;
        height: 40px;
        background-color: #fff;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
        border-bottom: 0;
        box-shadow: 1px 4px 20px rgba(22, 20, 19, 0.6);
        -webkit-box-shadow: 1px 4px 20px rgba(22, 20, 19, 0.6);
        -moz-box-shadow: 1px 4px 20px rgba(22, 20, 19, 0.6);
    }
}

div#mCSB_1_container {
    width: 100%;
    padding: 0 10px;
    height: 100%;
    overflow-y: auto;
}

div#mCSB_1_container::-webkit-scrollbar {
    width: 3px;
}
div#mCSB_1_container::-webkit-scrollbar-thumb {
    background: #cdcdcd;
    border-radius: 5px;
}

#wave .srname {
  font-weight: bold;
  color: #60f;
}

#wave .srfriendzone {
  margin: 0 5px 0 0px;
}
#wave .srsend {
  float: right;
  cursor: pointer;
}
#wave .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 0.5px;
  background: #aaa;
  animation: wave 1s linear infinite;
  animation-delay: -0.9s;
}
#wave .dot.two {
  animation-delay: -0.7s;
}
#wave .dot:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes wave {
  0%,
    60%,
    100% {
    transform: initial;
  }
  30% {
    transform: translateY(-8px);
  }
}

.typing-message
{
    border-radius: 20px !important;
    margin-bottom: 15px !important;
}

#toast-notify {
    position: fixed;
    z-index: 999999;
    top: 12px;
    right: 12px;
}

#toast-notify .toast-custom .toast-body .text-content {
    font-size: 13px;
    line-height: 16px;
    padding-right: 10px;
}

#toast-notify .toast-custom {
    flex-basis: 220px;
    min-width: 220px;
    max-width: 250px;
    box-shadow: unset;
    border: none;
    background: #fff;
    color: #333;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
}

#toast-notify .toast-custom .toast-body {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.9rem;
    padding-bottom: 0.95rem;
}

#toast-notify .toast-custom .close {
    color: #fff;
    opacity: 0.9;
    font-weight: 300;
    position: absolute;
    top: 5px;
    right: 10px;
}

#toast-notify .toast-custom .toast-body .ic {
    font-size: 20px;
    margin-right: 10px;
    width: 20px;
}

#toast-notify .toast-custom .toast-body .text-content strong {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    display: inline-block;
}

#toast-notify .toast-custom .toast-body .text-content p {
    line-height: 16px;
}

#toast-notify .toast-custom .toast-body a .text-content strong
{
    color: white;
}

#toast-notify .dark .toast-body .text-content p {
    line-height: 16px;
    color: white;
}

#toast-notify .toast-custom .progress .progress-bar {
    border-radius: 0px;
}

#toast-notify .toast-custom .progress {
    border-radius: 0px;
    background: transparent;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
}

#toast-notify.bottom-left{
    top: unset;
    right: unset;
    bottom: 12px;
    left: 12px;
}

#toast-notify.bottom-right{
    top: unset;
    bottom: 12px;
}

.chatbox .user_info .user_info__name{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.chatbox .user_info .user_info__name label.subaccount {
    font-size: 11px;
    margin-left: 10px;
    background: #179db0;
    padding: 0 5px;
    border-radius: 3px;
    line-height: 1.8;
    color: #fff;
}

.recent-message-user
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 160px;
}

.item-recent-message {
    cursor: pointer;
    padding: 13px !important;
    border-bottom: 1px solid #eaeaea;
}

.unread-message-box
{
    background-color: #1bb1c0 !important;
}

.unread-message-box h1, .unread-message-box h2
{
    color: #fff !important;
}

.unread-message-close > svg > path
{
    fill: white !important;
}

.recent-date-message
{
    color: #a9a9a9;
}

.child-recent-message
{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: unset !important;
}

.btn-back-to-bottom
{
    position: absolute;
    bottom: 10px;
    right: 140px;
    font-size: 12px;
    color: #1bb1c0;
    background: #ebebeb;
    min-height: 30px;
    min-width: 30px;
    height: 30px;
}

.btn-back-to-top
{
    display: none;
    position: fixed;
    bottom: 50px;
    left: 50%;
    font-size: 12px;
    color: #1bb1c0;
    background: #ebebeb;    
    min-height: 30px;
    min-width: 30px;
    height: 30px;
}

.form-filter-class .select2-container--default .select2-selection--single .select2-selection__arrow b
{
    display: none;
}

.avenue-messenger-list{
    position: fixed;
    right: 30px;
    bottom: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.area-back-bottom
{
    position: relative;
}

.list_messenger_history .head_text {
    margin: 5px 15px 0px 15px;
    color: #000;
    font-weight: 300;
    font-size: 14px;
}
.list_messenger_history ul {
    display: flex;
    padding: 15px;
    overflow: hidden;
    overflow-x: auto;
}

.list_messenger_history ul li {
    margin-right: 10px;
    cursor: pointer;
}

.list_messenger_history ul li:last-child [tooltip][flow^=right]:after {
    left: unset !important;
    right: calc(100% + 5px) !important;
}

.list_messenger_history ul::-webkit-scrollbar {
    height: 7px !important;
}

.list_messenger_history ul li:last-child [tooltip][flow^=right]::before {
    border-left-width: unset;
    border-right-color: transparent;
    right: unset;

    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-0.5em,-50%);
}

.chatbox .img_cont span.number_mes_icon {
    position: absolute;
    background: red;
    color: #fff;
    font-size: 10px;
    padding: 3px;
    border-radius: 100%;
    right: -10px;
    top: -5px;
    min-width: 20px;
    height: 20px;
    text-align: center;
}

.toogle_button_sirbar .noti_number_mess {
    min-width: 20px;
    height: 20px;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #e50000;
    position: absolute;
    left: -7px;
    top: -8px;
    font-size: 11px;
    padding: 1px;
}
.list-recent-message
{
    overflow-y: auto;
    height: 100%;
}

.list-user-online li:hover, .item-recent-message:hover {
    background: #eee !important;
}

.chatbox .chatbox-close
{
    cursor: unset;
}

.inp-search-messenger,.btn-search-messenger
{
    background: #f0f2f5 !important;
    height: 45px !important;
    border: none;
}

table.dataTable thead th, table.dataTable thead td
{
    border-bottom: none;
    padding: 10px 10px;
    font-size: 14px;
}

.txt-total-attendance strong
{
    color: #000 !important;
}

.modal-full
{
    max-width: 90%;
}

.calendarContOuter
{
    max-width: 1600px;
    height: 600px;
    margin: 0px auto;

    font-size: 14px;
}

.cElemDatePicker
{
    font-size: 14px;
}

.cdmvEventTitle {
    margin: 0 4px 0 2px;
    float: left;
    display: inline-block;
    width: 50%;
    text-overflow: ellipsis;
}

.day-distribute{
    color: #979797;
    margin-left: 3px;
    font-size: 12px;
    font-weight: 300;
}

.page_chat_box .chat-msg-text
{
    font-size: 13px;
    padding: 8px;
}

.btn-tag-filter-fanpage, .btn-quick-filter-fanpage
{
    border-radius: 5px !important;
    margin-bottom: 5px !important;
    padding: 0.25rem 0.6rem !important;
}

@media screen and (max-width: 1366px)
{
    .cdmvEventTitle {
        margin: 0 4px 0 2px;
        float: left;
        display: unset !important;
        width: 45%;
        text-overflow: ellipsis;
    }

    .block-list-session .list-attendance-item
     {
        width: calc(100% / 6 - 0px) !important;
     }

    #box-birthday
    {
        display: none;
    }
    
    .detail-area .mt-5
    {
        margin-top: 10px !important;
    }

    .detail-area {
        width: 300px !important;
    }

    .box-note-customer-conversation
    {
        min-height: 85px !important;
    }

    .card-skeleton
    {
        width: calc(100% / 6 - 10px) !important;
    }

    .list-class-group .card-skeleton
    {
        width: calc(100% / 3 - 30px) !important;
    }

    #customer-avatar-inbox {
        width: 50px;
        height: 50px;
    }

    .page_chat_box .conversation-area, .page_chat_box .filter-fanpage {
        width: 320px;
    }

    .item-quick-filter
    {
        font-size: 10px !important;
        padding: 0.18rem 0.55rem !important;
    }

    #filter-name-conversation
    {
        font-size: 11px;
    }

    .filter-fanpage a.btn-action-filter svg
    {
        width: 1em;
    }

    .btn-slt-cat svg
    {
        width: 1.4em;
    }

    .custom-control-label:before, .custom-control-label:after {
        width: 1.05rem;
        height: 1.05rem;
    }

    #qty-check-data, .page_chat_box .chat-msg-text, .detail-area .accordion__item .accordion__header_conversation
    {
        font-size: 12px;
    }

    .area-name-customer, #note-content, #student-problem-content, .input-save-note-conversation a i
    {
        font-size: 13px;
    }

    .lbl-page-name,.msg-message, .page_chat_box .chat-msg-date
    {
        font-size: 11px;
    }

    .page_chat_box .msg-username .msg-date, .day-distribute {
        font-size: 10px;
    }

    .page_chat_box .msg .labelGroup{
        margin-top: 5px;
    }

    .page_chat_box .msg-profile
    {
        width: 40px;
        height: 40px;
    }

    .numberCircle
    {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }

    .page_chat_box .chat-msg-img 
    {
        width: 35px;
        height: 35px;
    }

    .guest-name-conversation
    {
        font-size: 14px;
    }

    .form-customer-conversation-quick input, .form-customer-conversation-quick i
    {
        font-size: 13px;
    }
}

@media screen and (max-width: 1024px)
{
    .cdmvEventTitle {
        margin: 0 4px 0 2px;
        float: left;
        display: unset !important;
        width: 35%;
        text-overflow: ellipsis;
        font-size: 12px;
    }
}

.cEventLink:hover
{
    opacity: 0.7 !important;
}

.popover
{
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 0 5px 0 !important;
}

.bs-popover-top .arrow::after
{
    border-top-color: #ddd !important;
}
.chat-msg-text
{
    white-space: pre-line;
}

.chat-msg-text a
{
    color: #fff !important;
}

#report-teacher label
{
    color: #000;
}

.hint-teacher-report[tooltip]:after
{
    min-width: 26em !important;
    white-space: unset !important;
    line-height: 14px;
}

.box-language
{
    min-width: 160px !important;
    padding: 0;
    border-radius: 8px;
}

.list-language .timeline-panel .media
{
    background: transparent !important;
}

.list-language .timeline-panel
{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.list-language li{
    padding: 0 5px;
}

.list-language li:hover{
    background: #eee !important;
    cursor: pointer;
}

#lang-locale
{
    float: left;
    border: 1px solid #ccc;
    padding: 3px;
    position: absolute;
    top: 5px;
    right: 15px;
}

.btn-forget-pass
{
    float: right;
}

.btn-login-crm
{
    clear: both;
    margin-top: 0px !important;
    background-image: linear-gradient(to right, #13345d, #ee692e, #13345d);
}

.chatbox .chatbox-close
{
    right: 355px !important;
}

.chatbox
{
    width: 355px !important;
}

.birthday-user
{
    width: 20px !important;
    height: 20px !important;
}

#box-birthday, #box-happy-woman-day {
    height: 180px;
    width: 180px;
    margin: 0 auto;
}

#box-birthday:hover
{
    cursor: pointer;
}

.btn-outline-dark:hover
{
    color: #fff !important;
}

.btn-send-note .input-group-text
{
    background: #dddddd !important;
}

.dark-preview .btn-send-note .input-group-text
{
    background: #313233 !important;
}

.btnAddDistance
{
    border: 1px solid;
    line-height: 30px !important;
    height: 45px !important;
    width: 45px !important;
    min-width: 45px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    outline: none !important;
}

.bg-dark-crm {
    background-color: #ececec !important;
}

.btn-outline-primary:hover
{
    color: #fff;
    background-color: #02AEC4;
    border-color: #02AEC4;
}

.box-class-customer .select2-selection--multiple
{
    background-color: #fff;
    border: 1px solid #f0f1f5;
    min-height: 48px;
    border-radius: 10px;
    padding: 5px 10px;
}

.box-import
{
    align-items: center;
    border: 2px dashed rgb(219, 229, 240);
    display: grid;
    padding: 40px;
}

.box-import button
{
    margin: 0 auto;
}

.dark-preview .box-import i, .box-import button:hover i {
    color: #fff !important;
}

div.btn-container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

div.btn-container i{
    display: inline-block;
    position: relative;
    top: -6px;
}

.btn-color-mode-switch{
    display: inline-block;
    margin: 0px;
    position: relative;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner{
    margin: 0px;
    width: 190px;
    height: 25px;
    background: #E0E0E0;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    display: block;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:before{
    content: "\f186";
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    top: 4px;
    right: 40px;
    font-family: "FontAwesome";

}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:after{
    content: "\f185";
    width: 100px;
    height: 22px;
    background: #fff;
    border-radius: 26px;
    position: absolute;
    left: 2px;
    top: 1px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 6px -2px #111;
    padding: 2px 0px;
    font-size: 13px;
    font-family: "FontAwesome";
    color: #ffa500;
    text-shadow: 0px 0px 16px #ffa500;
}

.btn-color-mode-switch > .alert{
    display: none;
    background: #FF9800;
    border: none;
    color: #fff;
}

.btn-color-mode-switch input[type="checkbox"]{
    cursor: pointer;
    width: 50px;
    height: 25px;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 1;
    margin: 0px;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    background: #151515;
    color: #fff;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{
    content: "\f186";
    left: 89px;
    background: #3c3c3c;
    font-family: "FontAwesome";
    color: #fff;
    text-shadow: 0px 0px 16px #fff;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{
    content: "\f185";
    right: auto;
    left: 40px;
    font-family: "FontAwesome";
    color: #ffa500;
    text-shadow: 0px 0px 16px #ffa500;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    /*background: #66BB6A; */
    /*color: #fff;*/
}

.btn-color-mode-switch input[type="checkbox"]:checked ~ .alert{
    display: block;
}

/*mode preview*/
.dark-preview, 
.dark-preview .table-hover tbody tr:hover,
.dark-preview .dataTable tr:hover, 
.dark-preview .dataTable thead,
.dark-preview .list-school-group .list-row:hover,
.dark-preview .select2-container--default .select2-results__option--highlighted[aria-selected],
.dark-preview .select2-container--default .select2-results__option[aria-selected=true],
.dark-preview .table thead, 
.dark-preview .card-tabs .menu-class-manage,
.dark-preview .bgl-primary,
.dark-preview .card-tabs .menu-student-manage, 
.dark-preview .cContHeader, 
.dark-preview .cmvCalendarContWithBorders td,
.dark-preview .cdvCalendarCont td, 
.dark-preview #time_show, 
.dark-preview .accordion__header, 
.dark-preview .fileuploader,
.dark-preview .list-school-group.change_grid>.flex-wrap {
    background: #18191a !important;
    box-shadow: none;
    color: #fff;
}

.dark-preview div.btn-container i.fa-sun-o{
    color: #777;
}

.dark-preview div.btn-container i.fa-moon-o{
    color: #fff;
    text-shadow: 0px 0px 11px #fff;
}

.white-preview{
    background: #fff;
}

.white-preview div.btn-container i.fa-sun-o{
    color: #ffa500;
    text-shadow: 0px 0px 16px #ffa500;
}

.white-preview div.btn-container i.fa-moon-o{
    color: #777;
}

.dark-preview .card, 
.dark-preview .header, 
.dark-preview .dropdown-item:hover, 
.dark-preview a:active, 
.dark-preview .card-tabs .nav-tabs .nav-link:hover, 
.dark-preview .card-tabs .nav-tabs .nav-link.active,
.dark-preview .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner
{
    background: #242526 !important;
    color: #fff !important;
    box-shadow: none;
}
 .dark-preview .dataTable td, 
 .dark-preview .modal-header, 
 .dark-preview .modal-footer, 
 .dark-preview .modal-content
 {
    background: #242526 !important;
    color: #fff;
    border-color: #242526 !important;
 }

 .dark-preview .light.btn-primary g [fill], 
 .dark-preview .light.btn-light g [fill], 
 .dark-preview .nav-link svg path, 
 .dark-preview .percent-of-attendance h6 span,
 .dark-preview .list-class-group .item-cart-class .card-head .more-button svg:hover path, 
 .dark-preview .btn-action-fanpage svg:hover path, 
 .dark-preview .light.btn-success g [fill]
 {
    fill: #fff;
 }

.dark-preview strong, 
.dark-preview h4, 
.dark-preview label, 
.dark-preview .text-primary, 
.dark-preview ::placeholder,
.dark-preview .table tbody td a, 
.dark-preview .text-black,
.dark-preview .user-contact-name, 
.dark-preview .dashboard_bar, 
.dark-preview .btn i, 
.dark-preview a:hover, 
.dark-preview .breaadcrumb-page li.active a, 
.dark-preview .lbl-confirm-item, 
.dark-preview h6, 
.dark-preview h5, 
.dark-preview #icon-logout,
.dark-preview .dataTable thead tr th, 
.dark-preview .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark-preview .list-class-group .item-cart-class .card-head .nameClass a,
.dark-preview .list-class-group .item-cart-class .info-class p a,
.dark-preview .list-class-group .item-cart-class .info-class p span,
.dark-preview .list-class-group .item-cart-class .number-studentMAx h6 span,
.dark-preview .percent-of-attendance h6 span, 
.dark-preview .profile-class .name-class .block-title,
.dark-preview .detail-class p, 
.dark-preview .detail-class a, 
.dark-preview .cart-info-class h3,
.dark-preview .card-tabs .nav-tabs .nav-link, 
.dark-preview .box-result-filter-student p,
.dark-preview .bgl-primary h6 a, 
.dark-preview .bgl-primary span,
.dark-preview .table-list-user a, 
.dark-preview .accordion__header, 
.dark-preview .btn-import-file, 
.dark-preview .btn-export-student-in-class button, 
.dark-preview .drop_box_date .dropdown-item,
.dark-preview .btn-export-file, 
.dark-preview .page_chat_box .msg-username, 
.dark-preview .league-name,
.dark-preview .message-box .message-input,
.dark-preview .note-order-box .message-input,
.dark-preview .msg-username .unread_count,
.dark-preview .header-info p,
.dark-preview .messages .message .timestamp,
.dark-preview .boxed-input-tag--item .button-close,
.dark-preview .chat-file-attach a,
.dark-preview .btn-option-button .dropdown-item
{
    color: #fff !important;
}

.dark-preview .btn-outline-primary, 
.dark-preview .btn-outline-info, 
.dark-preview .list-group-item, 
.dark-preview .item-chat-user,
.dark-preview .list-class-group .item-cart-class .number-studentMAx, 
.dark-preview .percent-of-attendance,
.dark-preview .accordion-primary .accordion__header.collapsed,
.dark-preview .chat-image-attach
{
    color: #fff !important;
    border-color: #242526 !important;
}


 .dark-preview .chat-list-header, 
 .dark-preview .online-item:hover, 
 .dark-preview .deznav,
 .dark-preview .copyright,
 .dark-preview .header-right .notification_dropdown .nav-link, 
 .dark-preview .drop_box_date .custom_choose_date input,
 .dark-preview .tbl-list-product-order thead tr th,  
 .dark-preview .menu-toggle .deznav .metismenu li > ul
 {
    color: #fff !important;
    background-color: #242526 !important;
    border-color: #242526 !important;
}

.dark-preview .form-control, 
.dark-preview .form-control:disabled, 
.dark-preview .input-group-text,
.dark-preview .header-right .notification_dropdown .nav-link,
.dark-preview .btn,
.dark-preview .btn:active, 
.dark-preview .btn:focus, 
.dark-preview .select2-container--default .select2-selection--single, 
.dark-preview .select2-dropdown,
.dark-preview .select2-container--default.select2-container--focus .select2-selection--multiple,
.dark-preview .select2-container--default .select2-selection--multiple, 
.dark-preview .page_chat_box .chat-area-header,
.dark-preview .box-fanpage,
.dark-preview .bootstrap-tagsinput
{
    background: #3a3b3c !important;
    border: 1px solid #3a3b3c !important;
    color: #fff !important;
    box-shadow: none !important;
}

.dark-preview .input-group-text
{
    padding: 0;
}

.dark-preview .btn:hover,
.dark-preview .tbl-list-product-item thead tr th
{
    background: #242526 !important;
}

.dark-preview .deznav a
{
    color: #fff !important;
    border-color: #fff !important;
    background-color: #242526 !important;
}

.dark-preview .overlay-box:after
{
    background: #606060;
}

.dark-preview .card-header, 
.dark-preview .tabs_custom_order .nav-tabs .nav-link.active{
    border: none;
}

.dark-preview .card-body
{
    border-top: 1px solid #242526 !important;
}

.dark-preview .nav-header .hamburger .line
{
    background: #fff !important;
}

.dark-preview .btn-icon-left
{
    background: transparent;
    margin-right: 0;
}
.item-log-user:hover
{
    background: #e7f3ff;
}

.twitter-typeahead .tt-menu
{
    width: 400px !important;
    left: -40px !important;
    max-height: 500px;
    overflow-y: auto;
}

.dark-preview .item-log-user:hover
{
    background: #242526;
}

.dark-preview .dropdown-menu, 
.dark-preview .dropdown-menu a, 
.dark-preview .dropdown-menu a i,
.dark-preview .plan-list .list-row .more-button, 
.dark-preview .page_chat_box .owner .chat-msg-text, 
.dark-preview .page_chat_box .chat-msg-text,
.dark-preview .page_chat_box .chat-area-footer input, 
.dark-preview .page_chat_box .chat-area-footer textarea,
.dark-preview .boxed-input-tag, 
.dark-preview .twitter-typeahead .tt-menu
{
    background: #3a3b3c;
    color: #fff !important;
}

.dark-preview .dropdown-item.active
{
    color: #000 !important;
}



.dark-preview .widget-media .timeline li .timeline-panel, 
.dark-preview .header-right .header-profile .dropdown-item:first-child,
.dark-preview .online-item
{
    border-bottom: 1px solid #505050;
}

.dark-preview .border-bottom, 
.dark-preview .profile-class .photo-content
{
    border-bottom: 1px solid #505050 !important;
    border-radius:0;
}

 .dark-preview .border-right
 {
    border-right: 1px solid #505050 !important;
    border-radius:0;
 }

  .dark-preview .border-top
 {
    border-top: 1px solid #505050 !important;
    border-radius:0;
 }

 .dark-preview .info-count-class, 
 .dark-preview .accordion__header, 
 .dark-preview .accordion-bordered .accordion__body,
 .dark-preview .area-activity-fanpage, 
 .dark-preview .page_chat_box .chat-area, 
 .dark-preview .list-fn-order-conversation li
 {
    border-color: #505050;
 }

.widget-media .timeline li:last-child .timeline-panel
{
    border-bottom: none !important;
}

.dark-preview .list-language li:hover,
.dark-preview .dropdown-menu .dropdown-item:active,
.dark-preview .dropdown-menu .dropdown-item:focus, 
.dark-preview .btn-add-calendar, 
.dark-preview .btn-add-calendar:active, 
.dark-preview .btn-add-calendar:focus,
.dark-preview .page_chat_box, 
.dark-preview .page_chat_box .read-content-user, 
.dark-preview .page_chat_box .chat-area-main,
.dark-preview .page_chat_box .chat-area-footer
{
    background-color: #242526 !important;
    border-color:#242526 !important;
}

.header-right .header-profile .dropdown-item
{
    padding: 10px 24px;
}

.header-right .header-profile .dropdown-menu
{
    padding: 0;
    border-radius: 8px;
    min-width: 12rem;
}

#gridCol, #gridRow, .dark-preview .cmvCalendarCont, .dark-preview .bg-white
{
    background-color: transparent !important;
    border: none !important;
}

.dark-preview .list-school-group .list-row
{
    margin-bottom: 0 !important;
}

.dark-preview .border-bottom:last-child
{
    border-bottom: 0 !important;
}

.dark-preview .deznav .metismenu ul a.mm-active,
.dark-preview  .deznav .metismenu ul a:focus,
.dark-preview .deznav .metismenu ul a:hover, 
.dark-preview .deznav a:hover
{
    color: #02AEC4 !important;
}


.dark-preview .table tr:hover, 
.dark-preview .table tr:hover td, 
.dark-preview .list-class-group .item-cart-class .card, 
.dark-preview .select2-container--default .select2-selection--multiple .select2-selection__choice, 
.dark-preview #route-course .list-days-router, 
.dark-preview .dataTables_wrapper .dataTables_filter input,
.dark-preview .boxed-input-tag--item,
.dark-preview .item-chat-user:hover,
.dark-preview .toogle_button_sirbar,
.dark-preview .overlay-box,
.dark-preview .tbl-result-test table td:first-child,
.dark-preview .tbl-annual-result-test table td:first-child,
.dark-preview .page_chat_box .msg:hover
{
    background: #18191a !important;
    border-color: #18191a;
    box-shadow: none;
}

#table-list-attendance-payment table tr:hover td.bg-warning{
    background: #ffbc11 !important;
    box-shadow: none;   
}

.dark-preview #table-list-attendance-payment table tr td
{
    border: 1px solid #18191a !important;
}

.dark-preview .table tr td,
.dark-preview .table thead th, 
.dark-preview .pagination.pagination-sm .page-item .page-link,
.dark-preview .block-list-session .list-attendance-item .box-attendance .total-checking
{
    border: none !important;
    color: #fff;
}

.dark-preview .info-class
{
    margin-top: 10px;
}

.dark-preview .list-class-group .item-cart-class .card-head .more-button
{
    width: auto;
}

.dark-preview .tbl-report-student tr td, 
.dark-preview .cContHeader, 
.dark-preview .cmvCalendarContWithBorders td,
.dark-preview .cdvCalendarCont td
{
    border: 1px solid #313131 !important;
}

.dark-preview .cart-created
{
    background: #18191a !important;
    border: 1px solid #242526;
}

.dark-preview .cart-created #button-close-creat-boxed, 
.dark-preview .bg-dark-crm, 
.dark-preview .btn-outline-primary:hover,
.dark-preview .item-calendar-wrap:hover
{
    background: transparent !important;
}

.dark-preview .chat-title, 
.dark-preview div#mCSB_1_container, 
.dark-preview .avenue-messenger, 
.dark-preview .message-box,
.dark-preview .note-order-box,
.dark-preview .message-box .message-submit,
.dark-preview .note-order-box .message-submit
{
    background: #3a3b3c !important;
    border-color: #505050;
    color: #fff;
}

.dark-preview .text-muted
{
    color: #a7a7a7 !important;
}

.dark-preview .file-sample-student-online, .dark-preview .file-sample-student-offline
{
    background: transparent !important;
    border: none !important;
}

.nav-header, .header
{
    height: 3.5rem !important;
}

.header
{
    box-shadow: 0px 0px 10px rgb(120 130 140 / 25%);
}

.deznav
{
    box-shadow: 0px 0px 10px rgb(120 130 140 / 25%) !important;
    padding-top: 110px;
}

.header-left .dashboard_bar
{
    height: 30px !important;
    white-space: nowrap;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
}

.search-area .form-control
{
    height: 40px;
    min-height: 40px;
}

.search-area .input-group-text i
{
    font-size: 20px;
}

.header-right .input-group-text
{
    line-height: 0.5;
}

.header-right .notification_dropdown .nav-link
{
    padding: 10px;
}

.pulse-css
{
    width: 1rem;
    height: 1rem;
    font-size: 9px;

}

.header-right > li:not(:first-child)
{
    padding-left: 1rem;
}

.header-right .header-profile img
{
    width: 39px;
    height: 39px;
}


.header-right .header-profile > a.nav-link .header-info
{
    padding-left: 10px;
}

.header-right .header-profile img
{
    margin-left: 10px;
}

.dark-preview .menu-toggle .deznav .metismenu > li.mm-active > a i
{
    color: #02AEC4 !important;
}

.msg-content .unread_count
{
    color: #2e89f1 !important;
}

.plan-list .list-row .more-button
{
    border-radius: 2.25rem;
}

.rounded
{
    border-radius: 2.25rem !important;
}

.dark-preview .block-list-session .list-attendance-item.checked .box-attendance
{
    background: #c2dbc9;
}

.dark-preview .block-list-session .list-attendance-item.notCheck .box-attendance
{
    background: #e1c2c2;
}

.dark-preview .block-list-session .list-attendance-item .box-attendance
{
    background: #cfcfcf;
    color: #5a5a5a;
}

.input-save-note-conversation:hover
{
    background: #1bb1c0;
    cursor: pointer;
}

.input-save-note-conversation:hover a i
{
    color: #fff;
}   

.timeline-item {
    background: #fff;
    padding: 12px;
    margin: 10px auto;
    max-width: 472px;
    min-height: 100px;
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 50px;
    position: relative;
}

.background-masker {
    background: #fff;
    position: absolute;
}

/* Every thing below this is just positioning */

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
    top: 0;
    left: 40px;
    right: 0;
    height: 10px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
    top: 10px;
    left: 40px;
    height: 8px;
    width: 10px;
}

.background-masker.header-bottom {
    top: 18px;
    height: 6px;
}

.background-masker.subheader-left,
.background-masker.subheader-right {
    top: 24px;
    height: 6px;
}


.background-masker.header-right,
.background-masker.subheader-right {
    width: auto;
    left: 80%;
    right: 0;
}

.background-masker.subheader-right {
    left: 90%;
}

.background-masker.subheader-bottom {
    top: 30px;
    height: 10px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
    top: 40px;
    left: 0;
    right: 0;
    height: 6px;
}

.background-masker.content-top {
    height:20px;
}

.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
    width: auto;
    left: 380px;
    right: 0;
    top: 60px;
    height: 8px;
}

.background-masker.content-second-line  {
    top: 68px;
}

.background-masker.content-second-end {
    left: 420px;
    top: 74px;
}

.background-masker.content-third-line {
    top: 82px;
}

.background-masker.content-third-end {
    left: 0px;
    top: 88px;
}

.dark-preview .timeline-item, .dark-preview .background-masker, .dark-preview .background-masker.header-top,.dark-preview .background-masker.header-bottom,.dark-preview .background-masker.subheader-bottom
{
    background: #3a3b3c;
}

.dark-preview .animated-background
{
    background: linear-gradient(to right, #3a3b3c 8%, #242526 18%, #242526 33%);
}

.dark-preview .timeline-item
{
    min-height: 110px;
    border-bottom: 1px solid #505050;
}

.dark-preview .timeline-item:last-child
{
    border: none;
}

.select2-container--default .select2-search--inline .select2-search__field
{
    padding-left: 10px;
    width: auto;
    font-size: 14px;
    margin-top: 10px;
}

.handle-sort
{
    display: none;
    position: absolute;
    top: 10px;
    color: #fff;
    left: -20px;
    fill: #7e7e7e;
}

.handle-sort-calendar
{
    display: none;
    position: absolute;
    top: 10px;
    color: #fff;
    left: -15px;
    fill: #7e7e7e;
}

.dark-preview .handle-sort, .dark-preview .handle-sort-calendar
{
    fill: #fff;
}

.lesson-study-route-item:hover .handle-sort, .handle-sort:hover, .item-calendar-wrap:hover .handle-sort-calendar 
{
    display: block;
    cursor: move;
}

.lesson-study-route-item:hover, .item-calendar-wrap:hover
{
    cursor: pointer !important;
}

.time-attendance
{
    color: #8f8f8f;
}

.dark-preview .txt-lesson-content, .dark-preview .btn-remove-lesson-text span,.dark-preview .table-active > th
{
    background: #18191a !important;
}

.btn-remove-lesson-text span a
{
    font-size: 11px;
    margin-right: 10px;
    margin-left: 10px;
}

.btn-attach-chat
{
    right: 35px !important;
}

.message-box .fileuploader
{
    bottom: 45px;
    left: 0;
}

.message-box .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item,.message-box .fileuploader-theme-thumbnails .fileuploader-thumbnails-input
{
    margin-right: 0;
    padding: 25px !important;
}

.attach-bg
{
    background: transparent !important;
    border: none !important;
}

.gallery__content .chat-image-attach
{
    margin: 0 2px;
}

.dark-preview .gallery__content .chat-image-attach
{
    border: none !important;
    margin: 0 !important;
}

.attach-bg .gallery__content
{
    float: left;
    margin-bottom: 5px;
}

.message-personal .gallery__content
{
    float: right;
    margin-bottom: 5px;
}


.attach-bg .gallery__content img
{
    width: 60px;
    height: 60px;
}

.attach-bg audio
{
    width: 175px;
}

.attach-bg .chat-file-attach
{
    clear: both;
    font-size: 13px;
}

.dark-preview .btn-back-to-bottom
{
    background: #02aec4 !important;
}
.dark-preview .btn-back-to-top
{
    background: #02aec4 !important;
}

.chat-file-attach a, .dark-preview .messages .message a.msg-link
{
    color: #000 !important;
}

.img-attach-full
{
    width: unset !important;
    height: unset !important;
}

.messages .message a.msg-link
{
    word-break: break-all;
}

.messages .message a.msg-link:hover
{
    text-decoration: underline;
}

.dark-preview .btn-icon-left svg path
{
    fill: #fff;
}

.profile-photo
{
    cursor: pointer;
}

input[type=text], input[type=tel], input[type=number],  input[type=email], input[type=password], .slt-type-lesson
{
    height: 40px !important;
}

.slt-type-lesson button
{
    height: 40px !important;
    padding: 10px;
}

.slt-type-lesson .dropdown-toggle:after{
    margin-right: 5px;
}

textarea{
    border-radius: 10px !important;
}

.cart-finlter .form-control
{
    height: 40px !important;
}

@keyframes scale {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

.btn-toggle-action
{
    position: fixed;
    min-width: 32px !important;
    min-height: 32px !important;
    height: 32px !important;
    right: 5px;
    bottom: 20px;
    z-index: 10;
    border: none;
    color: #fff;
    border-radius: 20px;
    padding: 5px;
    background: #fff !important;
    box-shadow: 0px 5px 10px rgb(120 130 140 / 35%);
}

.btn-toggle-action:hover
{
    box-shadow: 0px 5px 10px rgb(120 130 140 / 45%);
}

.dropdown-action-crm
{
    box-shadow: 0px 5px 10px rgb(120 130 140 / 35%);
    min-width: unset !important;
    border-radius: 10px !important;
    top: -5px !important;
}

.dropdown-action-crm .dropdown-item
{
    padding: 0.5rem 0.75rem;
}

.dropdown-action-crm .dropdown-item:hover
{
    background: #eee;
}

.btn-guideline svg path, .btn-screen-record svg path, .btn-chat-company svg path,  .btn-tracking svg path
{
    fill: #0e0e0e;
}

.dark-preview .btn-guideline svg path, .dark-preview .btn-screen-record svg path, .dark-preview .btn-chat-company svg path, .dark-preview .btn-tracking svg path, .dark-preview .btn-sound svg path
{
    fill: #fff !important;
}

.btn-stop-recording
{
    position: fixed;
    right: 50px;
    bottom: 17px;
    z-index: 10;
    padding: 8px 10px 5px 10px;
    box-shadow: 0px 5px 10px rgb(120 130 140 / 35%);
    cursor: initial !important;
}

.btn-stop-recording span
{
    padding: 0;
    padding-right: 5px;
}

@keyframes beat {
    50% {
        transform: scale(1.3);
    }, 
    100% { 
        transform: scale(1.5); 
    }
}

.dark-preview .btn-stop-recording span svg path
{
    fill: #fff;
}

.btn-stop-recording span.ico-recording svg
{
    animation: 1.5s ease 0s infinite beat;
}

.btn-stop-recording span.ico-recording svg path, .btn-stop-recording span.stop-recording:hover svg path
{
    fill: red !important;
}

.btn-screen-record:hover svg path
{
    fill: rgb(238, 94, 153);
}

.btn-guideline:hover svg path
{
    fill: rgb(16, 144, 224);
}

.time-recording
{
    vertical-align: text-top;
    padding-right: 40px !important;
}

.btn-stop-recording span.toggle-play, .btn-stop-recording span.stop-recording, .btn-stop-recording span.toggle-mic, .btn-stop-recording span.toggle-camera
{
    cursor: pointer !important;
}

.btn-stop-recording span.toggle-play:hover svg path
{
    fill: green !important;
}

.btn-stop-recording span.toggle-mic:hover svg path
{
    fill: #1fc8ed !important;
}

.btn-stop-recording span.toggle-camera:hover svg path
{
    fill: #1fc8ed !important;
}

.btn-restore-delete
{
    padding: 2px 5px;
    width: fit-content;
    background: #007655;
    border-radius: 5px;
    display: block;
    color: #fff;
}

.btn-restore-delete:hover
{
    text-decoration: underline;
}

.boxed-input-tag--item svg
{
    margin-right: 5px;
}

.boxed-input-tag--item
{
    text-align: left;
}

.dark-preview .list-group-item-action:hover
{
    background: #242526 !important;
}

.btnAddCourseModal
{
    padding: 5px 8px;
    font-size: 12px !important;
}

.btn-remove-item-lesson-study-route
{
    padding: 5px 10px;
}

.image-preview img
{
    width: 100%;
}
.message-box,.note-order-box{
    min-height: 14px;
    height: auto !important;
}

.message-box .message-input{
    max-height: 140px;
    height: 100%;
    overflow: hidden;
}

.note-order-box .message-input{
    max-height: 140px;
    overflow: hidden;
}

.chat-area-footer .message_content, .chat-area-footer .message_content_zalo{
    height: 100%;
    min-height: 45px;
    max-height: 160px;
    overflow: hidden;
    overflow-y: auto;
    margin-right: 10px;
    resize: none;
    background: transparent;
    font-size: 14px;
    padding: 12px;
    border-radius: 10px !important;
    border: none;
    width: 100%;
    background: #f0f2f5;
}

.page_chat_box .chat-area-main{
    overflow: hidden;
    overflow-y: auto;
}


.chat-msg-content a, .dark-preview .msg-link
{
    color: #3695eb !important;
}

.owner .chat-msg-content a
{
    color: #fff !important;
}


.main-msg-content
{
    white-space: pre-line;
}

.msg-reload
{
    position: absolute;
    right: 11px;
    top: 5px;
    color: #939393;
    background: transparent;
    border: none;
}

.btn-remove-conversation, .btn-remove-conversation-zalo
{
    right: 60px;
}

.dark-preview .msg-reload:hover{
    color: #fff;
}

.icon-page-fb{
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

.deznav .copyright
{
    margin: 10px auto;
    margin-bottom: 5px;
    padding: 10px 65px 0px;
}

@media only screen and (max-device-width: 1366px), screen and (max-width: 1366px){
    .deznav .copyright
    {
        margin: 0 auto;
        padding-right: 0;
        padding-left: 30px;
    }
}

.nav-order .nav-item .nav-link, .dark-preview .nav-order .nav-item .nav-link:hover, .dark-preview .nav-order .nav-item .nav-link.active
{
    font-size: 13px;
    padding: 10px 15px !important;
    border-bottom: none !important;
}

.breaadcrumb-page
{
    margin-bottom: 10px;
}

.form-order-customer .card {
    background: #ececec;
}

.form-order-customer .card-header {
    padding: 0.8rem 1.875rem 0.5rem;
}

.dark-preview .form-order-customer .card-header
{
    border-bottom: 1px solid #3e3d3d;
}

.form-order-customer .card-body
{
    padding: 1rem;
}

.form-order-customer label
{
    font-size: 14px;
}

.form-order-customer .card-header .card-title
{
    font-size: 18px !important;
}

.form-order-customer .form-control:disabled, .form-control[readonly]
{
    background: #dddddd !important;
}

.dark-preview .form-order-customer .form-control:disabled, .dark-preview .form-control[readonly]
{
    background: #323232 !important;
}

.form-order-customer .select2-container--default .select2-selection--single
{
    height: 40px;
}

.chk-active-order
{
    margin-top: 3rem;
}

.dpm-potenial, .dpm-sale-care
{
    overflow: hidden;
    top: 230px;
    padding: 0;
}

.btn-option-button .dropdown-item
{
    font-size: 0.813rem !important;
}

.btn-option-button .dropdown-item svg
{
    width: 15px !important;
    margin-right: 6px !important;
    padding-bottom: 2px;
}

.dark-preview .btn-option-button .dropdown-item svg path
{
    fill: #fff !important;
}

.btn-option-button .dropdown-menu
{
    top: 5px !important;
}

.bootstrap-tagsinput
{
    width: 100%;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 1.25rem;
}

.bootstrap-tagsinput .tag{
    margin: 5px 0;
    border-radius: 1.25rem;
}

.dark-preview .bootstrap-tagsinput input
{
    color: #fff;
}

.dark-preview .bootstrap-tagsinput .label-info
{
    background: #6c6c6c;
}

.box-general-info-class
{
    box-shadow: 3px 12px 23px 0px rgb(133 133 133 / 20%) !important;
}

.dark-preview .box-general-info-class
{
    box-shadow: none !important;
}

.box-page-name-connect
{
    white-space: nowrap;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-page-num {
    width: 47px;
    text-align: center;
    border-radius: 5px;
}

.badge-fanpage
{
    font-size: 12px !important;
}

.box-total-order, .box-total-dashboard{
    box-shadow: 2px 3px 10px rgba(22, 20, 19, 0.1);
}

.dark-preview .box-total-order
{
    background: #1c1c1c !important;
}

.box-list-lesson-online
{
    min-height: 33px !important;
}

.box-parent-conversation
{
    position: relative;
}

.chk-conversation-item
{
    position: absolute;
    right: 5px;
    bottom: 10px;
}

.dark-preview .custom-control-label::before
{
    border-color: #656666;
}

.menu-class-manage .nav-link, .menu-student-manage .nav-link
{
    padding: 8px 15px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.plan-list .list-row .more-button {
    height: 40px;
    width: 40px;
    line-height: 40px;
}

.plan-list .list-row .more-button svg
{
    width: 3px;
}

.list-school-group.change_grid .col-button .more-button
{
    background: transparent !important;
}

.btn-filter-calendar-order:after
{
    float: right;
    margin-top: 2px;
}

.dark-preview .area-activity-fanpage, .dark-preview .page_chat_box .chat-area
{
    border-color: #323131 !important;
}


#pointers .pointer {
    position: absolute;
    width: 20px;
    height: 22px;
    z-index: 9999;
    
}

#pointers .pointer svg{
    fill: #706a6a;
    -webkit-transform: rotate(245deg);
    -moz-transform: rotate(245deg);
    -ms-transform: rotate(245deg);
    -o-transform: rotate(245deg);
    transform: rotate(245deg);
}

.dark-preview #pointers .pointer svg
{
    fill: #fff;
}

.cursor-user{
    min-width: 125px;
    margin-top: 7px;
    margin-left: -5px;
    font-size: 14px;
}
.dark-preview .btn-link:active, .dark-preview .btn-link:focus{
    background: transparent !important;
    border: none !important;
}

.dark-preview .btn-link
{
    background: transparent !important;
    border: none !important;
}

.file-name-import,.file-name-upload
{
    word-break: break-all;
}

.drop-zone--over
{
    background: #efefef;
    opacity: 0.5;
}

.dark-preview .drop-zone--over
{
    background: #0e0e0e;
}

.dark-preview .tbl-test-result-student tr td, .dark-preview .tbl-test-result-student tr th, .dark-preview .tbl-annual-test-result-student tr td, .dark-preview .tbl-annual-test-result-student tr th
{
    border: 1px solid #2f2f2f !important;
}

.card-header h4
{
    font-size: 19px !important;
}

.select2-container--default .select2-selection--single
{
    height: 40px;
    border-radius: 1.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered
{
    line-height: 40px;
    font-size: 14px;
}

@media only screen and (max-device-width: 1367px), screen and (max-width: 1367px) {
    .avtivity-card .activity-icon
    {
        height: 60px;
        width: 60px;
        min-width: 60px;
        line-height: 60px;
    }

    .activity-cart svg
    {
        width: 20px !important;
    }

    .avtivity-card .card-body
    {
        padding: 20px 10px;
    }

    .avtivity-card .title
    {
        font-size: 18px;
    }

    .avtivity-card .card-body .media-body p{
        font-size: 12px !important;
    }

    .header-left .dashboard_bar
    {
        font-size: 20px;
        white-space: nowrap;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-right .notification_dropdown .nav-link
    {
        padding: 7px;
    }

    .header-right .notification_dropdown .nav-link svg
    {
        width: 21px;
        height: 21px;
    }

    .search-area .form-control
    {
        height: 20px !important;
    }

    .nav-text, table.dataTable tbody td
    {
        font-size: 14px;
    }

    .deznav .metismenu > li a > i
    {
        font-size: 1.2rem;
    }

    .deznav .copyright
    {
        font-size: 12px;
    }

    .card-header .card-title
    {
        font-size: 13px !important;
    }

    input[type=text], input[type=tel], input[type=number], input[type=email], input[type=password], .slt-type-lesson, .slt-type-lesson button
    {
        height: 40px !important;
    }

    .card-header h4
    {
        font-size: 20px !important;
    }

    .select2-container--default .select2-selection--single
    {
        height: 40px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered
    {
        line-height: 40px;
    }

    .txt-empty-content
    {
        font-size: 16px;
    }

    .btnAddDistance
    {
        line-height: 35px !important;
    }

    .inp-search-messenger,.btn-search-messenger
    {
        height: 41px !important;
    }
}

#export-process-customer .progress {
  width: 250px;
  height: 250px;
  background: none;
  position: relative;
}

#export-process-customer .progress::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}

#export-process-customer .progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

#export-process-customer .progress .progress-left {
  left: 0;
}

#export-process-customer .progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 6px;
  border-style: solid;
  position: absolute;
  top: 0;
  
}

#export-process-customer .progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 125px !important;
  border-bottom-right-radius: 125px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
  transition: 0.5s linear;
}

#export-process-customer .progress .progress-right {
  right: 0;
}

#export-process-customer .progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 125px !important;
  border-bottom-left-radius: 125px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  transition: 0.5s linear;
}

#export-process-customer .progress .progress-value {
  position: absolute;
  top: 0;
  left: 0;
}

.dark-preview .txt-process-download
{
    color: #fff;
}

.fs-100
{
    font-size: 100px !important;
    line-height: 1.4;
}

.dark-preview .teacher-with-class
{
    background: #2f2f30 !important;
}

.info-count-class
{
    padding: 0.75rem 1.25rem;
}

.remember-login {
  display: block;
  margin-bottom: 15px;
  text-align: left;
}

.remember-login input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.remember-login label {
  position: relative;
  cursor: pointer;
  color: #8b8b8b;
  font-size: 14px;
}

.remember-login label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #ccc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 8px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  top: -2px;
}

.remember-login input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 7px;
  width: 4px;
  height: 12px;
  border: solid #7a7878;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.avtivity-card .title
{
    font-size: 23px;
}


.dark-preview .chat-gpt svg path
{
    fill: #fff;
}

.activity-cart svg
{
    width: 22px;
    height: 22px;
}

.badge-small
{
    font-size: 11px;
    line-height: 1.3;
}

.log-item td strong
{
    color: #444040;
}

.crm_table_loader {
    background-color: #FFF;
    color: #666;
    width: 100%;
    padding: 0;
}
.crm_table_loader th{
    background: #fff;
    padding: 10px;
    text-align: left;
}
.crm_table_loader td{
    padding: 10px;
    vertical-align: top;
    background: #fff;
}
.crm_table_loader span{
    width: calc(100% - 5px);
    height: 15px;
    background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
    background-size: 600px;
    animation: placeHolderShimmer 1.6s infinite linear;
    display: inline-block;
    min-width:15px;
    border-radius: 3px;
}

.dark-preview .crm_table_loader span
{
    background-image: linear-gradient(90deg, #4a4a4a 0px, #4a4a4a 40px, #464646 80px);
}

.dark-preview .crm_table_loader th,.dark-preview .crm_table_loader td
{
    background: #242526;
}

.dark-preview .crm_table_loader
{
    background: #18191a;
}

.crm_table_loader span.sub-temp{
    width: calc(100% - 50%);
    margin-top: 5px;
}
.crm_table_loader span.sub-temp-three{
    width:calc(100% - 70%);
    display:block
}
.col1{
        width: 25px;
}
.col2{
        width: 60px;
}
.col3{
        width: 45px;
}
.col4{
        width: 344px;
}
.col5{
        width: 145px;
}
.col6{
        width: 113px;
}
.col7{
        width: 73px;
}
.col8{
        width: 160px;
}
.col9{
        width: 92px;
}


#manager-study .lbl-loading-tbl
{
    margin-left: 0 !important;
}

#manager-study .crm_table_loader td,#manager-study .crm_table_loader th
{
    padding-left: 0 !important;
}

.dark-preview .list-item-note-lesson
{
    background: #3a3b3c;
}

.assign-sale-switch .custom-control-label {
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.assign-sale-switch .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem !important;
}

.assign-sale-switch .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2));
    top: calc(0.15rem) !important;
}

.assign-sale-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

.assign-sale-switch .custom-control-label:hover
{
    cursor: pointer;
}

#btn-exchange, #btn-refund-all, #btn-cancel-all, #btn-approve-all, #btn-push-ehoadon-all
{
    display: none;
    border-radius: 8px;
    font-size: 17px;
    padding: 2px 10px;
}

.bage-customer-group {
    background: #606462;
    color: #fff;
    font-size: 12px;
    padding: 3px;
    border-radius: 3px;
    margin: 0 2px;
}

.btn-tag-filter-fanpage:first-child
{
    margin-left: 2px;
}


.dark-preview .btn-tag-filter-fanpage.active, .dark-preview .btn-tag-filter-fanpage.active i, .dark-preview .btn-tag-filter-fanpage.active:focus 
{
    color: #66aeff !important;
}

.dark-preview .btn-quick-filter-fanpage.active, .dark-preview .btn-quick-filter-fanpage.active i, .dark-preview .btn-quick-filter-fanpage.active:focus 
{
    color: #66aeff !important;
}

.page_chat_box
{
    max-height: calc(100vh - 95px) !important;
}
.item-log-user
{
    padding: 13px;
    border-bottom: 1px solid #dddddd;
}

.dark-preview .item-log-user
{
    padding: 13px;
    border-bottom: 1px solid #505050;
}
.timeline-log
{
    border: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: relative;
}

.widget-media .timeline .timeline-panel h6
{
    line-height: 20px;
}


.box-voucher-user
{
    max-height: 245px;
    overflow: hidden;
}

.box-voucher-user:hover
{
    overflow-y: auto;
}

.lbl-voucher-order
{
    background: #cfcfcf;
    padding: 5px 8px;
    border-radius: 5px;
}


.dark-preview .short-link svg path
{
    fill: #ffff;
}


.dark-preview .lbl-voucher-order
{
    background: #18191a;
}

.item-voucher-customer{
    margin-top: 10px;
    margin-bottom: 10px !important;
    padding: 10px;
    padding-right: 0 !important;
}

.item-voucher-customer:hover
{
    background: #f3f3f3ee;
    cursor: pointer;
}
.dark-preview .item-voucher-customer:hover
{
    background: black;
}

.btn-remove-voucher:hover
{
    cursor: pointer;
}

.content_body_chatbox
{
    padding-top: 3.8rem!important;
}

.active-chat-customer
{
    background: unset !important;
    border: 0 !important;
}

.accordion__header_conversation
{
    padding: 0.5rem 0.7rem !important;
    font-size: 14px;
}

.form-customer-conversation-quick .input-group input
{
    height: 35px !important;
}

[data-header-position="fixed"] .content-body {
    padding-top: 3.5rem !important;
}

.boxed-input-tag
{
    min-height: 46px;
}

.default-select
{
    height: 40px;
}

.default-select .dropdown-toggle
{
    height: 40px;
    padding: 7px 15px;
}

.btn-sm
{
    padding: 0.45rem 0.92rem;
}

.card-header
{
    padding: 0.7rem 1.875rem 0.7rem;
}

.list-class-group .item-cart-class .card-head
{
    padding: 10px 15px;
}

.table td
{
    padding: 12px 15px;
    background: #fefefe;
}

.dark-preview .table td
{
    background: transparent;
}

.default-select .bs-placeholder
{
    padding: 10px 15px
}

.card-body
{
    padding-top: 0;
    border-radius: 8px;
}

#box-list-plan tbody, #box-list-auto-message tbody {
    display:block;
    height:250px;
    overflow:auto;
}


#box-list-plan thead, #box-list-plan tbody tr,#box-list-auto-message thead, #box-list-auto-message tbody tr  {
    display:table;
    width:100%;
    table-layout:fixed;
}

.remind-plan-today
{
    top: -8px;
    right: -10px;
    width: 12px;
    height: 12px;
}

.total-unrsolve
{
    right: -8px;
    width: 15px;
    height: 15px;
}

.list-personal-plan #box-list-plan tbody {
    display:block;
    height:unset;
    overflow:unset;
}

.today-plan{
    color: red !important;
}

.connect-internet-success path
{
    fill: lime;
}

.connect-internet-error path
{
    fill: white;
}


.dark-preview .connect-internet-success path, .dark-preview .connect-internet-error path
{
    fill: #fff;
}

.google-visualization-tooltip-item {
  white-space: nowrap;
  cursor: pointer;
}

#report_plan{
    min-height: 5px;
}

.card
{
    border-radius: 0.5rem;
    box-shadow: 3px 12px 23px 0px rgb(133 133 133 / 20%) !important;
}

.daterangepicker .ranges li
{
/*     color: #000; */
}

.reportrange
{
    width: 225px !important;
    padding: 3px 10px !important;
    background: #fff; 
    cursor: pointer;
    border: 1px solid #ccc;
}

.dark-preview .reportrange,.dark-preview .daterangepicker .ranges, .dark-preview .daterangepicker.show-calendar .drp-buttons,
.dark-preview .daterangepicker.show-ranges.ltr .drp-calendar.left, .dark-preview .daterangepicker .drp-calendar.right
{
    background: #3a3b3c !important;
    border: 1px solid #3a3b3c !important;
}

.dark-preview .daterangepicker, .dark-preview .daterangepicker.opensright:after
{
    border: 1px solid #3a3b3c !important;
}

.dark-preview .daterangepicker.show-calendar .ranges
{
    margin-top: 0;
}

.dark-preview .daterangepicker .ranges li:hover
{
    background-color: #18191a;
}

.reportrange span
{
    font-size: 14px;
}

.nav-report-cat-order
{
    font-size: 14px !important; 
    padding: 2px 8px !important;
}

.page_chat_box .chat-msg-date
{
    font-weight: normal;
    color: #a0aec5;
}

.list-recent-log,.list-recent-exchange,.box-recent-message
{
    min-height: 10vh;
    max-height: 80vh;
}

.box-list-recent-log,.box-list-recent-exchange
{
    height: 80vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

html {
  scroll-behavior: smooth;
}

.page_chat_box .chat-msg-content, .page_chat_box .owner .chat-msg-content
{
    margin-left: 5px;
}

.lbl-quick-potential-item,.lbl-quick-potential-item-zalo
{
    padding: 2px 10px;
    font-size: 13px;
    float: left;
    width: 145px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    opacity: 0.5;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.lbl-quick-potential-item:hover, .lbl-quick-potential-item.active, .lbl-quick-potential-item-zalo:hover, .lbl-quick-potential-item-zalo.active
{
    opacity: 1;
    font-weight: bolder !important;
}

@media only screen and (max-device-width: 1366px), screen and (max-width: 1366px){
    .lbl-quick-potential-item
    {
        width: 20%;
    }
    .lbl-quick-potential-item-zalo
    {
        width: 20%;
    }
}

.box-quick-potential{
    max-height: 45px;
    overflow-y: hidden;
}

.box-quick-potential:hover
{
    overflow-y: auto;
}

.txt-edit-discuss, .txt-edit-problem{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cp-api{
    cursor: pointer;
}

.end-point
{
    word-break: break-all;
}

.skeleton {
    --bg: #e1e1e1;
    --glare-bg: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.4), transparent);
    position: relative;
    background-color: var(--bg);
    overflow: hidden;
}

.skeleton::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--glare-bg);
    transform: translateX(-100%);
    animation: skeleton-glare 0.75s infinite ease-out;
    z-index: 1;
}

.card-skeleton {
    --card-radius: 6px;
    min-height: 100px;
    box-shadow:
        0 0 32px 2px rgba(0, 0, 0, 0.05),
        0 0 16px 2px rgba(0, 0, 0, 0.2),
        0 0 8px 2px rgba(0, 0, 0, 0.1)
    ;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    padding: 5px;
    width: calc(100% / 10 - 10px);
    float: left;
    margin: 5px;
}

.dark-preview .card-skeleton
{
    background: #3c3c3c;
}

.dark-preview .skeleton
{
    --bg: #18191a;
    --glare-bg: linear-gradient(90deg, transparent, hsl(0deg 0% 13.53%), transparent);
}

.card__img {
    width: 100%;
    height: 70px;
}

.card__body {
    padding: 16px 16px 16px;
}

.card__text {
    font-size: 1rem;
    height: 0.5em;
    border-radius: 20px;
}

.card__body > .card__text {
    margin: 0.5em 0;
}

.card__body > .card__text:first-child {
    margin-top: 0.25rem;
}

.card__body > .card__text:last-child {
    margin-bottom: 0rem;
    width: 80%;
}

@keyframes skeleton-glare {
    to {
        transform: translateX(100%)
    }
}

.block-list-session .list-attendance-item .box-attendance .total-checking span
{
    width: unset !important;
}

.block-list-session .list-attendance-item .box-attendance .total-checking
{
    width: unset !important;
    min-width: 27px;
    color: #fff;
}

.label-assign-calendar::after{
    display: none !important;
}

.label-assign-calendar
{
    background: #7e7e7e !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

#draggable-video {
  background: transparent;
  display:flex;
  align-items: center;
  justify-content:center;
  position: fixed;
  left:0;
  bottom: 10px;
  width: 300px;
  height:160px;
  font-size:2rem;
  z-index: 99999;
}

.no-select {
  user-select: none;
}

#webcam-box{
    width: 95%;
}

.list-show-field li:hover{
    cursor: move;
}

.quick-chat-customer .chat-area-main {
    max-height: calc(100vh - 290px);
}


.dark-preview .twitter-typeahead .tt-menu .tt-suggestion
{
    background: transparent;
}
.dark-preview .twitter-typeahead .tt-menu .tt-suggestion:hover{
    background: #18191a;
    border-radius: 5px;
}

.icon-searching-global
{
    border-radius: 50px;
    padding: 8px 10px;
    background: #e9e9e9;
}

.dark-preview .icon-searching-global{
    background: #555555;
}

.ico-search-inp-global{
    min-width: 40px;
    padding: 0 !important;
}

.tt-input
{
    padding: 0.375rem 0 !important;
}

.card-box {
    padding: 20px;
    border-radius: 3px;
    margin-bottom: 30px;
    background-color: #fff;
}
.search-result-box .tab-content {
    padding: 30px 30px 10px 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-box-shadow: none
}

.search-result-box .search-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #e3eaef;
    margin-bottom: 10px
}

.btn-custom {
    background-color: #02c0ce;
    border-color: #02c0ce;
}

.dark-preview .card-box {
    background: #242526;
}

.dark-preview .nav-tabs .nav-link-search-global.active
{
    background: #3f3e3e;
    border-color: #3f3e3e #3f3e3e #3f3e3e;
    color: #fff;
}

.dark-preview .nav-tabs .nav-link-search-global:hover
{
    border-color: #3f3e3e #3f3e3e #3f3e3e !important;
}

.dark-preview .nav-tabs-search-global
{
    border-bottom: 1px solid #525253;
}

.dark-preview .search-item
{
    border-bottom: 1px solid #525253;
}

.dark-preview h4 a
{
    color: #fff;
}

.text-search-result a
{
    color: #04b0c0;
}

.search-item:last-child
{
    border-bottom: none;
}

.inp-filter-name
{
    width: 70%;
    display: inline;
    margin-left: 10px;
}

.chk-control-filter:after, .chk-control-filter:before {
    top: 7px;
}

.btn-filter-user
{
    display: block !important;
}

.dark-preview .dataTables_wrapper .dataTables_filter input
{
    color: #fff;
}

.custom-switch .custom-control-label::after
{
    background-color: #ffffff;
}

.custom-control-label::before
{
    border-width: 1px;
}

.custom-switch .custom-control-label::before
{
    background-color: #cbcaca;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before
{
    background-color: #cbcaca;
    border-color: #cbcaca;
}

.txt-class-lock-user
{
    font-size: 0.95rem;
    line-height: 1.5;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before
{
    border-color: #cbcaca;
}

.title-setup-class{
    color: #5b5b5b;
    font-weight: bold;
}

.unlock-account-student{
    cursor: pointer;
}

.icon-log-activity
{
    position: absolute;
    top: 25px;
    left: 25px;
}

.icon-log-activity i
{
    padding: 5px;
    border-radius: 40px;
    font-size: 15px;
    color: #fff;
}

.icon-log-activity svg
{
    padding: 5px;
    border-radius: 40px;
    width: 25px;
    height: 25px;
}

.icon-log-activity svg path
{
    fill: #fff;
}

.bg-blue
{
    background: blue !important;
}

.bg-orange
{
    background: orange !important;
}

.modal-content .custom-checkbox .custom-control-label:after, .modal-content .custom-checkbox .custom-control-label:before
{
    top: -2px;
}

.btn-update-potential-conversation,.btn-update-sale-support, .btn-update-potential-conversation-zalo
{
    padding: 0.5rem 0.7rem !important;
}

.quick-slt-sale label, .quick-slt-page label, .care-slt-sale label
{
    padding: 0.5rem 1.05rem !important;
}

#search-quick-sale, #search-quick-page, #search-care-sale, #search-cat-potential
{
    border: none;
}

.info-class-content
{
    min-height: 275px;
}

.dark-preview .block-list-session .list-attendance-item .box-attendance .total-checking.default
{
    background: #3f3f3f;
}

.dark-preview .list-attendance .box-attendance
{
    background: #595959;
}

.dark-preview .list-attendance-item.selfStudy .box-attendance
{
    background: #bdb76d;
}

.dark-preview .list-attendance-item.checked .box-attendance
{
    background: #e3f9e9;
}

.dark-preview .list-attendance-item.notCheck .box-attendance
{
    background: #f9e3e3;
}
.list-attendance-item.approved .box-attendance
{
    background: #d8f1ff;
}

.dark-preview .list-attendance-item.approved .box-attendance
{
    background: #d8f1ff;
}

.list-attendance-item.selfStudy .box-attendance
{
    background: #bdb76d;
}

.list-attendance-item.approved .box-attendance
{
    color: #02AEC4 !important;
}

.list-attendance-item.selfStudy .box-attendance
{
    color: #474100 !important;
}

.lbl-self-study{
    color: #bdb76d !important;
}

.action-button-area{
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
    background: #fffeff;
    padding: 15px 45px;
}

.dark-preview .action-button-area
{
    background: #18191a;
}

.action-btn-footer
{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 3px 0px;
    background: #fffeff;
    z-index: 9999;
}

.action-btn-footer-mdl
{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    background: #fffeff;
    z-index: 9999;
}

.btn-remove-csr
{
    padding: 0.425rem 0.8rem;
    border-radius: 20px !important;
    font-size:  0.813rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b
{
    top: 42%;
}

.dark-preview .cart-gridLayout .btn i
{
    color: #3a3b3c !important;
}

.dark-preview .cart-gridLayout .btn.active i
{
    color: #fff !important;
}

.plan-list .list-row .list-icon
{
    border-radius: 0.5rem;
}

.page_chat_box .chat-area-footer
{
    padding: 10px 10px;
}

#merge-fanpage .accordion__body--text, #custom-display .accordion__body--text
{
    padding: 0.875rem 0.45rem;
}

.box-img-no-record
{
    width: 200px;
    border-radius: 50%;
    margin: 0 auto;
    padding: 15px;
    margin-top: 15px;
}

.title-no-record, .title-no-record-slogan
{
    color: #a3a19f !important;
}

.dropdown-menu
{
    border-radius: 8px;
}

.table-responsive
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li > a
{
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

[data-sidebar-style=full][data-layout=vertical] .menu-toggle .deznav .metismenu>li.mm-active>a
{
    background: transparent !important;
}

.dropdown-menu .dropdown-item
{
    padding: 0.5rem 1.35rem;
}
.dropdown-menu .tool-item
{
    padding: 0.5rem 1.15rem;
}
.dropdown-menu .dropdown-item i 
{
    width: 16px;
    background: transparent !important;
    padding-bottom: 2px;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle
{
    background-color: #02AEC4;
    border-color: #02AEC4;
}

.light.btn-primary
{
    background-color: #02aec40f;
    border-color: #02aec40f;
}

.modal-content {
    border-radius: 0.8rem;
}

.plan-list .list-row
{
    border-radius: 0.55rem;
}

.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--multiple .select2-selection__choice
{
    border-radius: 1.25rem;
}

.list-class-group .item-cart-class .card
{
    border: 1px solid #02aec4;
}

.dataTables_wrapper input[type="search"], .dataTables_wrapper input[type="text"], .dataTables_wrapper select
{
    border-radius: 1.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove
{
    margin-right: 5px;
}

.lbl-potential-item
{
    padding: 0 !important;
    border-radius: 3px;
}

.item-potential-child, .item-segment-child
{
    padding: 0px 10px !important;
}

#select2-month-segment-container
{
    padding-right: 35px;
    text-overflow: unset;
}

table.dataTable tbody td {
    background: #fefefe !important;
    border-top: 1px solid #e5e5e5 !important;
}

.col-freeze {
  background: #f5f5f5;
  position: sticky;
  right: 0;
  top: auto;
  border-right: 0px none black;
  border-top-width: 3px;
  margin-top: -3px;
}

.dark-preview .col-freeze
{
    background: #18191a;
}

table th.headcol
{
    background: #f5f5f5;
}

table td.headcol
{
    background: #fefefe;
}

.bubble-element
{
    position: relative;
    z-index: 999;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .deznav .metismenu > li > a svg
{
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    margin: 0;
    line-height: 1;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .deznav .metismenu > li.mm-active > a svg{
    color: #fff;
    padding: 0;
}

.metismenu > li.mm-active > a svg path
{
    fill: #02AEC4 !important;
}
{
    fill: #02AEC4 !important;
}

.deznav .metismenu>li a>svg {
    transition: all 0.2s;
    width: 24px;
}

.card-header .card-title {
    font-size: 18px;
    height: 30px;
    line-height: 31px;
    font-family: "Vare",sans-serif;
}

.dark-preview .cart-gridLayout .btn.active svg path
{
    fill: #fff !important;
}

.bg-soft-success {
    background-color: #e1fbed!important;
    color: #17c666!important;
    padding: 3px 8px;
    font-weight: 600;
}

.dark-preview .bg-soft-success {
    background-color: #17c66613!important;
    color: #17c666!important;
}

.bg-soft-warning {
    background-color: #ffebd0!important;
    color: #ffa21d!important;
    padding: 5px 9px;
    font-weight: 600;
}

.dark-preview .bg-soft-warning {
    background-color: #ffa21d13!important;
    color: #ffa21d!important;
}

.bg-soft-second {
    background-color: #6673fd29!important;
    color: #6673fd!important;
    padding: 5px 9px;
    font-weight: 600;
}

.dark-preview .bg-soft-second {
    background-color: #7356f13b!important;
    color: #6673fd!important;
}

.bg-soft-danger {
    background-color: #fdeded!important;
    color: #ea4d4d!important;
    padding: 5px 9px;
    font-weight: 600;
}

.dark-preview .bg-soft-danger {
    background-color: #ea4d4d13!important;
    color: #ea4d4d!important;
}

.bg-soft-primary {
    background-color: #ddf1f4!important;
    color: #41b2c4!important;
    padding: 5px 9px;
    font-weight: 600;
}

.dark-preview .bg-soft-primary {
    background-color: #41b2c413!important;
    color: #41b2c4!important;
}

.bg-soft-dark {
    background-color: #e9ecef!important;
    color: #283c50!important;
    padding: 5px 9px;
    font-weight: 600;
}

.dark-preview .bg-soft-dark {
    background-color: #3c3d3d!important;
    color: #fff!important;
}


.skeleton-cir {
     padding:8px;
     width: 100%;
     background: #fff;
     margin: 5px auto;
     display: flex;
     justify-content: center;
     align-items: center;
}

.skeleton-cir-piechart
{
    height: 570px;
}

.dark-preview .skeleton-cir
{
    background: #3a3b3c;
}

.skeleton-cir .square {
     height: 80px;
     border-radius: 5px;
     background: rgba(130, 130, 130, 0.2);
     background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
     background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
     background-size: 800px 100px;
     animation: wave-squares 1.5s infinite ease-out;
}

 .skeleton-cir .line {
     height: 12px;
     margin-bottom:6px;
     border-radius: 5px;
     background: rgba(130, 130, 130, 0.2);
     background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
     background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
     background-size: 800px 100px;
     animation: wave-lines 1.5s infinite ease-out;
}

.skeleton-right{
    flex:1;
}
 .skeleton-left{
    flex:2;
    padding-right:15px;
}
 .flex0{
    flex: 0;
}
 .flex2{
    flex: 2;
}
 .skeleton .line:last-child{
    margin-bottom: 0;
}

.h8{
    height: 8px !important;
}

 .h17{
    height: 17px !important;
}

 .w40{
    width:40% !important;
}

 .w75{
    width: 75% !important
}

.m10{
    margin-bottom: 10px !important;
}

 .w50{
    width: 50% !important
}

.circle{
    border-radius: 50% !important;
    height: 80px !important;
    width: 80px;
}

.circle-piechart
{
    border-radius: 50% !important;
    height: 380px !important;
    width: 380px;
    margin-bottom: 10px;
}

@keyframes wave-lines {
    0% {
        background-position: -468px 0;
    }
     100% {
        background-position: 468px 0;
    }
}
 @keyframes wave-squares {
    0% {
        background-position: -468px 0;
    }
     100% {
        background-position: 468px 0;
    }
}


@media only screen and (min-width: 768px){
    [data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a {
        background: transparent !important;
        color: #fff;
        border-radius: 1.25rem;
    }

    [data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li:hover > a {
        background: #02aec421 ;
    }
}

.header-content
{
    padding-left: 3.5rem !important;
}

.nav-control
{
    right: -3.0625rem;
}

.search-area {
    width: 220px;
}

.btn-delete-item
{
    border-radius: 20px !important;
    padding: 0.45rem 0.92rem !important;
    font-size: 16px;
}

.tbl-attendance-class table tbody tr:hover{
    font-weight: bolder;
    cursor: pointer;
}

.tbl-attendance-class table tbody tr td:hover span
{
    font-weight: bolder;
    font-size: 16px;
}

.tbl-attendance-class table tbody tr td {
    position: relative;
}

.tbl-attendance-class table tbody tr td .arrow-right {
    position: absolute;
    right: -2px;
    top: -16px;
    font-size: 40px;
    -webkit-transform: rotate(135deg);
}

.thead-attendance-info
{
    background:#ff9900 !important;
    vertical-align: center !important;
}

.thead-attendance-lesson
{
    background: #a4c2f4 !important;
    text-align:center !important;
    vertical-align: center !important;
}

.thead-attendance-rate-lesson
{
    background: #f9cb9c !important;
    text-align:center !important;
}

.cell-absent
{
    background: #00ff00 !important;
    text-align:center !important;
}

.cell-absent-approve
{
    background:#ff9900 !important; 
    text-align:center !important;
}

.cell-no-absent
{
    background: #f4cccc !important;
    text-align:center !important;
}

.cell-watch-video
{
    background: #3695eb !important;
    text-align:center !important;
}



.dark-preview .card, .dark-preview .deznav
{
    box-shadow: unset !important;
}

.profile-class .photo-content
{
    padding: 0px 0px 20px;
}

.profile-info
{
    padding: 15px 0px;
}

.dark-preview .title-no-record
{
    color: #cbcbcb !important;
}

.dark-preview .head-fp-qk-customer
{
    border: none !important;
}

#box-list-potential, #box-list-sale-care
{
    max-height: 300px;
    overflow-y: auto;
}

.page_chat_box .owner .chat-msg-text {
    background-color: #2196f3 !important;
}

.deliver-message path
{
    fill: #ccc;
}

.dark-preview ul#box-act-class li a:hover,.dark-preview ul#box-act-class li:hover a
{
    background: transparent;
}

.dark-preview .modal-header
{
    border-bottom: 1px solid #3b3d3f !important;
}

#shortkey-modal .modal-header .modal-title
{
    margin: 0 auto;
}

.btn-shortkey
{
    border: 1px solid;
    border-radius: 5px;
    padding: 3px 5px;
    font-size: 13px;
    margin: 0 5px;
}

.dark-preview .btn-shortkey
{
    border-color: #3b3d3f;
}

#box-mention {
    background-color: #f3f3f3;
    position: fixed;
    z-index: 9999;
    min-width: 300px;
    border-radius: 8px;
    max-height: 330px;
    overflow-y: auto;
}

.box-mention-customer {
    position: unset !important;
}

.dark-preview #box-mention{
    background-color: #3a3b3c;
}

#box-mention .menu-item {
  cursor: default;
  padding: 1rem;
}

#box-mention .menu-item.selected {
  background-color: slateGray;
  color: white;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.dark-preview #box-mention .menu-item.selected{
    background-color: #18191a;
}

#box-mention .menu-item:hover:not(.selected) {
  background-color: #fafafa;
}

.dark-preview #box-mention .menu-item:hover:not(.selected){
    background: #676767;
}

.user-mention
{
    color: #2196f3 !important;
}

.filter-result
{
    font-size: 13px;
}

.btn-move-up-down
{
    position: fixed;
    min-width: 32px !important;
    min-height: 32px !important;
    height: 32px !important;
    right: 5px;
    bottom: 68px;
    z-index: 5;
    border: none;
    color: #fff;
    border-radius: 20px;
    padding: 5px;
    background: #fff !important;
    box-shadow: 0px 5px 10px rgb(120 130 140 / 35%);
}

.btn-move-up-down i
{
    font-size: 13px;
    color: #7e7e7e;
}

#student-in-class .dataTables_wrapper {
    min-width: 1800px;
}

.skeleton-box-chat
{
    height: 1500px;
    background: rgba(130, 130, 130, 0.2);
    background: -webkit-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: 800px 100px;
    animation: wave-squares 1.5s infinite ease-out;
}

.line-skeleton-center
{
    margin: 0 auto;
}

.circle-skeleton-50
{
    height: 55px !important;
    width: 55px !important;
}

.dark-preview #import-attendance-class .modal-content, .dark-preview #homework-deadline .modal-content
{
    box-shadow: 0 0 0 1px #3a3b3c;
}

.fancybox-slide--iframe .fancybox-content iframe{
    height : 100px;
}

.nav-tabs-custom svg {
    width: 18px;
}

.list-class-group .card-skeleton
{
    min-height: 550px;
    margin: 15px;
    width: calc(100% / 4 - 30px);
}

.skeleton-class-name
{
    height: 50px;
}

.skeleton-class-info
{
    height: 300px;
    margin: 35px 0;
}

#route-course .list-group-item.active
{
    background-color: #f8f9fa;
}

.dark-preview #route-course .list-group-item.active
{
    background-color: #474747;
}

.lbl-self-learn
{
    font-size: 11px !important;
}

#calendar-class .fc-daygrid-dot-event
{
    padding: 0;
    margin: 0;
}

#calendar-class .list-attendance-item .box-attendance
{
    border-radius: 0;
}

.fc-toolbar-title {
    color: #585555;
}

#form-data-class
{
    margin-bottom: 80px;
}

.btn-conversation-analysis, .btn-conversation-analysis-zalo
{
    right: 35px;
}


.ico-lsr
{
    margin-top: -3px;
}

.barchart-area a.active
{
    color: #fff;
}

.btn-show-add-student-status
{
    cursor: pointer;
}

.custom-radio .custom-control-label::before {
    border-radius: 50% !important;
}

.list-item-note-order .gallery__content
{
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.note-order-box .btn-send-note
{
    right: 35px !important;
}

.note-order-box .btn-send-note
{
    right: 35px !important;
}

.note-order-box .btn-attach-note-order {
    right: 10px !important;
}

.box-exchange-order .select2-container--default .select2-selection--single .select2-selection__clear
{
    margin-right: 15px;
}

[tooltip]:after
{
    max-width: unset !important;
}

.list-class-group .item-cart-class .card-head .more-button svg
{
    width: auto !important;
}

.dark-preview .list-class-group .item-cart-class .card-head .more-button svg path
{
    fill: #fff !important;
}

.report-class
{
    justify-content: end;
}

.box-barchart{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;
  height: 500px;
  background-color: transparent;
  padding: 20px;
  align-self: center;
  justify-self: center;
  border: none;
}

.graph{
  align-self: end;
  justify-self: center;
  height: 90%;
  background-color: #4a4a4a ;
  width: 40px;
  margin-bottom: 0;
  animation: barchart 2.3s infinite
}
.graph2{
  align-self: end;
  justify-self: center;
  height: 90%;
  background-color: #4a4a4a ;
  width: 40px;
  margin-bottom: 0;
  animation: barchart 2.4s infinite
}
.graph3{
  align-self: end;
  justify-self: center;
  height: 90%;
  background-color: #4a4a4a;
  width: 40px;
  margin-bottom: 0;
  animation: barchart 2.5s infinite
}

@keyframes barchart{
  0%{
    height: 90%;
  }
  50%{
    height: 40%;
  }
  100%{
    height:90%;
  }
}

#ico-live{
    position: absolute;
    right: 3px;
    top: 8px;
}
.dark-preview .btn-change-teacher-live
{
    color: #fff;
}

.btn-change-teacher-live i {
    display: none;
}

.btn-change-teacher-live:hover i {
    display: inline-block;
}

/* Đảm bảo Video.js responsive */
#live-wall .video-js {
    width: 100%;
    height: auto;
    max-width: 100%;
    padding-top: 56.25%; /* Tỷ lệ 16:9 */
    position: relative;
}

#live-wall .video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Thêm khoảng cách giữa các box */
#live-wall .col-md-3 {
    margin-bottom: 1rem; /* Khoảng cách dưới */
    padding: 0.5rem; /* Khoảng cách bên trong mỗi box */
}

/* Responsive cho grid Bootstrap */
@media (max-width: 767px) {
    #live-wall .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    #live-wall .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Tùy chỉnh thêm cho giao diện */
#live-wall .video-js .vjs-control-bar {
    font-size: 12px;
}

#live-wall .video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#live-wall .live-name
{
    font-size: 12px;
}


/* Tùy chỉnh thanh toolbar responsive */
#live-wall .video-js .vjs-control-bar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Thu nhỏ kích thước icon trên toolbar */
#live-wall .video-js .vjs-control {
  min-width: 40px; /* Kích thước tối thiểu cho nút */
  height: 100%;
  margin-top: 10px;
}

#live-wall .video-js .vjs-icon-placeholder,
#live-wall .video-js .vjs-control::before {
  font-size: 16px; /* Thu nhỏ kích thước icon (mặc định thường là 20px-24px) */
  line-height: 1; /* Đảm bảo icon căn giữa */
}

/* Ẩn thanh seek */
#live-wall .video-js .vjs-progress-control, #live-wall .video-js .vjs-remaining-time-display {
  display: none !important; /* Bỏ thanh seek */
}

/* Điều chỉnh kích thước trên màn hình nhỏ */
@media (max-width: 600px) {
  #live-wall .video-js .vjs-control-bar {
    font-size: 10px; /* Giảm kích thước chữ tổng thể */
  }
  #live-wall .video-js .vjs-control {
    min-width: 30px; /* Giảm kích thước nút */
  }
  #live-wall .video-js .vjs-icon-placeholder,
  #live-wall .video-js .vjs-control::before {
    font-size: 12px; /* Thu nhỏ icon hơn nữa trên mobile */
  }
}

.box-attendance-teacher, .box-report-teacher
{
    height: calc(100vh / 2);
    overflow-y: auto;
}

#btn-remove-all-live
{
    display: none;
    border-radius: 8px;
    font-size: 17px;
    padding: 2px 12px;
}

.item-note-student
{
    cursor: pointer;
}

.animation-init {
  opacity: 0;
  padding-top: 0;
}

.animation-fade {
  opacity: 1;
  padding-top: 1em;
  transition: all 1s;
}

.scale-1
{
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    display: inline-block;
}

.btn-add-more-debt-plan
{
    border-radius: 5px;
}

.item-feature
{
    cursor: pointer;
}

.dark-preview .item-feature, .dark-preview .item-feature i
{
    color: #fff !important;
}


/*jfg*/
.container-loading-title {
    display: inline-grid;
    vertical-align: top;
    margin-left: 10px;
}
.container-loading-icon {
    display: inline-grid;
    grid: 1fr / 1fr;
    width: 22px;
    aspect-ratio: 1;
}
.wheel {
    grid-column: 1;
    grid-row: 1;

    background-image: url(/assets/icons/flaticon/wheel.svg);

    background-repeat: no-repeat;
    filter: invert(50%);

    opacity: 0.9;

    width: 100%;
    height: 100%;

    animation: spin 2s linear infinite;
}
.wheel:nth-of-type(2) {
    opacity: 0.7;
    animation: spin-reverse 2s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(0deg);
    }
    from {
        transform: rotate(1turn);
    }
}
@keyframes spin-reverse {
    to {
        transform: rotate(0deg) scaleX(-1);
    }
    from {
        transform: rotate(-1turn) scaleX(-1);
    }
}

@keyframes sky {
    0%,
    100% {
        background-position: center;
    }
    25% {
        background-position: left;
    }
    70% {
        background-position: bottom;
    }
    90% {
        background-position: right;
    }
}


.dark-preview .wheel
{
    filter: invert(100%);
}

#loading-processing-modal .modal-content{
    border-radius: 8px !important;
}

.item-kpi:hover
{
    background: #fbd77c;
    cursor: pointer;
}   

.dark-preview .table-list-classify a
{
    color: #fff;
}

#table-list-attendance-payment table td.first-col, #table-list-attendance-payment table tr:first-child th.first-col
{
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 2;
  white-space: nowrap;
}

#table-list-attendance-payment table td.second-col, #table-list-attendance-payment table tr:first-child th.second-col
{
  position: sticky;
  left: 180px;
  background-color: #fff;
  z-index: 2;
  white-space: nowrap;
}

.dark-preview #table-list-attendance-payment table td.first-col, .dark-preview #table-list-attendance-payment table tr:first-child th.first-col,
.dark-preview #table-list-attendance-payment table td.second-col, .dark-preview #table-list-attendance-payment table tr:first-child th.second-col 
{
     background-color: #18191a;
}

.cell-attendance-teacher
{
    cursor: pointer;
}

#table-list-attendance-payment table td,#table-list-attendance-payment table th
{
    white-space: nowrap;
}

.nav-header {
    background-image: linear-gradient(to right, #13345d, #ee692e, #13345d);
}

.suggest-box {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #dcdcdc;
    background: #fff;
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    display: none;
}

.suggest-header {
    background: #f8faff;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}

.suggest-item {
    display: flex;
    align-items: center;
    padding: 14px;
    gap: 12px;
    border-bottom: 1px solid #d0e6ff;
    position: relative;
}

.suggest-item:hover
{
    cursor: pointer;
    background: #f3f3f3;
}

.suggest-item.active
{
    background: #e9f4ff;
}

.suggest-item:last-child {
    border-bottom: none;
}

.chat-icon {
    font-size: 18px;
    color: #4a8cff;
    flex-shrink: 0;
}

.suggest-text {
    font-size: 14px;
    color: #0f172a;
    line-height: 1.5;
}

.suggest-text b {
    color: #7e7e7e;
    background: #f1f1f1;
    padding: 5px;
    border-radius: 10px;
}

.suggest-item.active .suggest-text b
{
    background: #ffffff;
}

.preview-img {
    right: 14px;
    top: 50%;
    width: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.highlight {
    color: #02aec4;
    padding: 0 2px;
    border-radius: 3px;
}

#closeSuggest
{
    cursor: pointer;
    color: #9f9f9f;
}

.area-content-reply
{
    position: relative;
    border: 1px solid #f1f1f1;
    padding: 10px 0;
    border-radius: 6px;
}

.remove-content-reply
{
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

.area-content-reply:hover .remove-content-reply
{
    display: block;
}

.dark-preview .area-content-reply {
    border: 1px solid #3a3b3c;
    background: #3a3b3c;
}

.area-content-reply textarea
{
    border: none !important;
    overflow-y: hidden !important;
    resize: none !important;
}

.toolbox-reply svg
{
    cursor: pointer;
}

.area-content-reply .fileuploader
{
    position: unset !important;
    padding-left: 5px;
}

.list-file ul
{
    height: 50px;
}

.list-file ul li
{
    float: left;
    margin-right: 15px;
    border-radius: 10px;
}

#add-ship-connect ul.nav
{
    border-bottom: 1px solid #eee;
}

.flatpickr-months .flatpickr-month
{
   height: 40px !important;
}

.flatpickr-current-month {
    padding: 3px;
}

.tbl-list-product-order .accordion__header:not(.collapsed) .accordion__header--indicator::before 
{
    content: unset !important;
}