.icon-check {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #0256a2;
    cursor: pointer;
}

.icon-check:hover {
    opacity: 0.8;
}

#dlNotifi {
    display: flex;
    gap: 5px;
}

#dlNotifi .notification-card {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

#dlNotifi .status-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

#dlNotifi .status-badge.sap-den-han {
    background-color: #ffc107;

    margin-left: 5px;
}

#dlNotifi .status-badge.den-han {
    background-color: #17a2b8;

    margin-left: 5px;

}

#dlNotifi .status-badge.qua-han {
    background-color: #dc3545;

    margin-left: 5px;

}

#dlNotifi .details {
    margin-left: 5px;
}

#dlNotifi .details p {
    margin: 0;
}

#dlNotifi .details .key {
    font-size: 12px;
}

#dlNotifi .details .value {
    font-size: 12px;
    font-weight: bold;
}

#dlNotifi .details .value.sap-den-han {
    color: #ffc107;
}

#dlNotifi .details .value.den-han {
    color: #17a2b8;
}

#dlNotifi .details .value.qua-han {
    color: #dc3545;
}

#dlNotifi h4 {
    font-weight: bold;
    margin-bottom: 10px;
}

#li-notification_h .col {
    width: 33.3%;
    text-align: center;
}

#li-notification_h .phancong {
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
}

#dlNotifi .notification-card:hover {

    background: #fff;
    border-left: 3px solid var(--blue-2-color);
    cursor: pointer;
}

footer {
    display: none;
}

.a-color-h:hover {
    color: var(--main-txt-color);
}

.menu-link.default i {
    float: left;
}

.fa-user-circle-o:before {
    content: '\f2be';
}

#loader {
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#loader:before {
    content: '';
    position: absolute;
    filter: blur(2px);
    background: hsla(0, 2%, 90%, .43);
}

#id_ticket_html .cha {
    border: solid 1px silver;
    padding: 10px;
}


::-webkit-scrollbar {
    width: 6px;
}


::-webkit-scrollbar-track {
    background: #f1f1f1;
}


::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
    opacity: .3;
}


::-webkit-scrollbar-thumb:hover {
    background: #555;
    opacity: 1;
}

#i_contact iframe {
    border: none;
}

#field20_sp_ticket_option_edit_slaTGPHKH {
    color: red;
}

.cha a span {
    word-break: break-all
}

#field20_sp_ticket_option_slaTGPHKH {
    color: red;
}

#field20_sp_ticket_option_subSla_sp_ticket_option_temp_slaTGPHKH {
    color: red;
}

.filter_form .filter-cell input {
    width: 150px;
    font-size: 12px
}

.x-admin-sm body .easyWizardSteps>li {
    color: #000000;
    font-weight: bold;
}

.x-admin-sm body .easyWizardSteps>li.current {
    color: var(--supporting-theme-color) !important;
    font-weight: bold;
    border-bottom: 2px solid var(--supporting-theme-color) !important;
}

.highlight-value {
    color: #CB4335;
    font-weight: bold;
}


.exportlinks {
    display: none
}

.ui-tooltip {
    opacity: 1;
    background-color: #00AEC7;
    color: #FFFFFF
}



#txtLogo {
    font-size: 14px;
    display: none;
}

.corlor_,
.corlor_ a {
    font-family: 'PT Sans', Arial;
    font-size: 13px;
    line-height: 16px;
    color: #2a5666;
    font-weight: normal;
    cursor: pointer;
}

.corlor_,
.corlor_ a {
    font-family: 'PT Sans', Arial;
    font-size: 13px;
    line-height: 16px;
    color: #2a5666;
    font-weight: normal;
    cursor: pointer;
}

.corlor_:hover a {
    color: #3790af;
}

.title_1 {
    font-size: 14px;
    font-weight: bold
}

body .form .form-row>label,
body #form-canvas .form-cell .label,
body #form-canvas .subform-cell .label {
    text-align: left;
    padding-right: inherit;
}

@keyframes blackToYellowAnimation {
    from {
        background-color: black;
    }

    50% {
        background-color: red;
    }

    to {
        background-color: black;
    }
}

@keyframes displayNoneAnimation {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 0.1;
    }

    100% {
        display: none;
    }
}

@keyframes blackToYellowAnimation_Text {
    from {
        color: black;
    }

    50% {
        color: red;
    }

    to {
        color: black;
    }
}





.layui-nav.left a {
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.fake-link,
.view,
.view1,
.con:hover,
.con-email span:hover {
    color: #00AEC7;
    cursor: pointer;
}


.default-hidden {
    visibility: hidden;
}

.show-section {
    display: block;
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot') format('embedded-opentype'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {

    font-family: 'icomoon';
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.f25 {
    font-size: 20px;
}

.f15 {
    font-size: 15px;
}

.icon-speech-bubble:before {
    content: "\e900";
}

.icon-cus-book:before {
    content: "\e90d";
}

.icon-cus-reply-all:before {
    content: "\e90a";
}

.icon-cus-right-arrow:before {
    content: "\e90b";
}

.icon-cus-reply:before {
    content: "\e90c";
}

.icon-cus-qr-code:before {
    content: "\e901";
}

.icon-cus-task:before {
    content: "\e904";
}

.icon-cus-reload:before {
    content: "\e903";
}

.icon-cus-import:before {
    content: "\e902";
}

.icon-cus-qr-code:before {
    content: "\e901";
}

.icon-cus-speech-bubble:before {
    content: "\e900";
}

.icon-cus-notepad:before {
    content: "\1f5ca";
}

.icon-cus-diary:before {
    content: "\1f5d1";
}

.icon-cus-smartphone:before {
    content: "\1f5d0";
}

.icon-cus-phone:before {
    content: "\1f5ce";
}

.icon-cus-contact:before {
    content: "\e908";
}

.icon-cus-missed-call:before {
    content: "\e909";
}


.c2c,
.cus_reload,
.cus-Tickets-status,
.easyWizardSteps li,
.cus-tickets,
.cus-user-title,
.cus-emails,
.cus_download,
.cus_download_r,
.cus_download_note {
    cursor: pointer;

}



.c2c a,
.cus-a,
#task a,
.cus-Tickets-status a {
    color: #666666;
}

.cus-user-title {
    color: #000051;
}


.cus-name {
    font-size: 13px;
    font-weight: 600;
    color: #183247;

}

.cus-ticket-code {
    font-weight: none;
}

.cus-name-acc {
    font-size: 13px;

}

.cus-tickets .icon-cus-notepad {
    font-size: 14px;
}

.MucDo-2 {
    color: #E74C3C;
}

.MucDo-4 {
    color: #2ECC71;
}

.MucDo-3 {
    color: #2E86C1;
}

.MucDo-1 {
    color: #28B463;
}

.cus-dangxuly {
    border-left: 4px solid #00A94E;
}

.cus-dahuy {
    border-left: 4px solid #F41B35;
}

.cus-hoantat {
    border-left: 4px solid #69757D;
}

.cus-done {
    opacity: .7
}



#iframe-container-joget.content {
    overflow: auto;
    position: relative;
    padding: 20px;
    margin: 10px;
    max-width: 97%;
    height: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body .dataList th a,
body .dataList th {
    font-weight: bold;

}

.thoiGian-notification {
    font-size: 11px;
    margin-top: -7px;
    margin-left: -10px;
}

.thoiGianNt {
    font-size: 10px
}

#subProperties_sp_ticket_attributes_sProperties .label {
    width: 100%;
}



.x-admin-sm body .dataList .empty {
    display: none;
}

.dataList form table tbody tr:nth-child(even) {
    background: #FAFAFA;
}

.dataList .filters .filter-cell input[type='submit'] {
    display: none;
}

.btn-TaoMoi {
    background-color: var(--main-txt-color);
    border-color: #e29400;
    color: #6e361a;
}

.btn-TaoMoi2 {
    background-color: #2874A6;
    border-color: #21618C;
}

.btn- #sp_popup_ticket label,
#sp_popup_ticket input,
#sp_popup_ticket select,
#sp_ticket_convert label,
#sp_ticket_convert input,
#sp_ticket_convert select,
#sp_tickets_detail_midw label,
#sp_tickets_detail_midw input,
#sp_tickets_detail_midw select,
#sp_ticket_update_u label,
#sp_ticket_update_u input,
#sp_ticket_update_u select,
#sp_tickets_middleware label,
#sp_tickets_middleware input,
#sp_tickets_middleware select,
#sp_ticket_cp label,
#sp_ticket_cp input,
#sp_ticket_cp select,
#sp_ticket_edit label,
#sp_ticket_edit input,
#sp_ticket_edit select,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section3 label,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section3 input,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section3 select,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section2 label,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section2 input,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section2 select,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section4 label,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section4 input,
#sp_popup_add_contact #subTicket_sp_KhachHang_ticket_field20_sp_ticket_option_section4 select,
#subTicket_sp_KhachHang_ticket_sTicket_1 label,
#subTicket_sp_KhachHang_ticket_sTicket_1 input,
#subTicket_sp_KhachHang_ticket_sTicket_1 select,
#sp_ticket_add label,
#sp_ticket_add input,
#sp_ticket_add select,
#sp_KhachHang_ticket #sTicket_1 label,
#sp_KhachHang_ticket #sTicket_1 input,
#sp_KhachHang_ticket #sTicket_1 select,
#subKhachHang_sp_ticket_kh_chitiet_section1 label,
#subKhachHang_sp_ticket_kh_chitiet_section1 input,
#subKhachHang_sp_ticket_kh_chitiet_section1 select,
#subKhachHang_sp_ticket_kh_chitiet_tenDN,
#sp_email_add label,
#sp_email_add input,
#sp_email_add select,
#sp_email_add div[id*="fileUpload"],
#sp_email_new label,
#sp_email_new input,
#sp_email_new select,
#sp_email_new div[id*="fileUpload"],
#sp_email_templates label,
#sp_email_templates input,
#sp_email_templates select,
#sp_email_templates div[id*="fileUpload"],
#sp_ticket_mail label,
#sp_ticket_mail input,
#sp_ticket_mail select,
#sp_ticket_mail div[id*="fileUpload"],
#sp_ticket_mail .selector_button,
#sp_ticket_update label,
#sp_ticket_update input,
#sp_ticket_update select,
#sp_ticket_update div[id*="fileUpload"],
#sp_ticket_update .selector_button,
div[id*="fileUpload"] {
    min-width: 100%;
}

#sTicket_1 .cus_tilte {
    font-size: 20px;
    font-weight: 700;
}

#field14_sp_ticket_edit_tab_subContent_sp_ticket_data_sDinhKem label,
#subTicket_sp_KhachHang_ticket_subContent_sp_ticket_data_sDinhKem label,
#subContent_sp_ticket_data_sDinhKem label,
#field14_sp_ticket_edit_tab_subContent_sp_ticket_edit_data_sDinhKem label {
    display: none;
}

#field14_sp_ticket_edit_tab_subContent_sp_ticket_data_sDinhKem .form-fileupload,
#subTicket_sp_KhachHang_ticket_subContent_sp_ticket_data_sDinhKem .form-fileupload,
#subContent_sp_ticket_data_sDinhKem .form-fileupload,
#sp_ticket_add .selector_button,
#field14_sp_ticket_edit_tab_subContent_sp_ticket_edit_data_sDinhKem .form-fileupload {
    min-width: 100%;
}


body .filter-cell .hasDatepicker+a,
body .filter-cell .hasDatepicker+img {
    top: 5px;
    margin-left: -26px;
}

#sp_ticket_add .selector_element,
#sp_ticket_mail .selector_element {
    min-width: 100%;
    margin-left: 0px;
}

#section-actions .form-cell {
    width: 75px;
}

#section-actions .form-cell .form-button.btn.button {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.dataList .setFilterToSeeData,
.print-button {
    display: none;
}

.thungantext {
    white-space: nowrap;
    width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thungantext-email {
    white-space: nowrap;
    min-width: 50px;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cha {
    position: relative;
}

.cha img {
    max-width: 80%;
}

.con {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 15px;
}

.con-email {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 15px;

}

.con-email span {
    margin: 0px 5px;
    font-size: 15px;
}

.cus-recording {
    width: 120px
}

#field14_sp_ticket_edit_tab_LichSuTraoDoi_content,
#field14_sp_ticket_edit_tab_ghichu_content,
#LichSuTraoDoi_content {
    max-width: 100%;
}

div[id$="shideItem"],
div[id$="Sectionhide"],
div[id$="sTemplatesEmail"],
.cus-hide {
    display: none;
}

div[id*="sHideTraSoat"] {
    display: none;
}

.cus-Receive {
    color: #201e9c
}

.cus-Send,
.cus-Reply,
.cus-New {
    color: #ff671f
}

.cus_download,
.cus_download_r,
.cus_download_note {
    color: #6f6f6f;
}

.cus_download .box1,
.cus_download_r .box1,
.cus_download_note .box1 {
    min-width: 50px;
    display: block;
    min-height: 50px;
    display: inline;
}

.cus_download .box2,
.cus_download_r .box2,
.cus_download_note .box2 {
    margin: 10px 3px 10px 3px;
    float: left;
    border: 1px solid #c8c6c4;
}

.cus_download .box2:hover,
.cus_download_r .box2:hover,
.cus_download_note .box2:hover {
    background-color: #ecebea;
    color: #6f6f6f;
}


#listGridPopup .cus-refresh {
    height: 27px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#listGridPopup .cus-refresh i {
    padding-top: 9px;
}

.cus-tooltip {
    background-color: #00AEC7;
    color: #FFFFFF
}

.font-ico span {
    font-size: 20px;
    margin-right: 5px;
}

.filter-cell.fake-link {
    font-size: 140%;
}

body .dataList .filters .filter-cell:last-child:after {
    content: '';
}

.form-fileupload.dropzone.dz-clickable {
    border-color: red;
}

.dz-message.needsclick {
    color: black;
    font-weight: bold;
    font-style: italic;
}

#iframe-container-joget {
    height: 110%;
    margin: 0;
    padding: 0;
}

.cus-h {
    text-transform: uppercase;
    font-weight: bold;
}


.lds-dual-ring {
    display: inline-block;
    width: 20px;
    height: 20px;
    top: -13px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 14px;
    height: 14px;
    margin: 8px;
    border-radius: 50%;
    border: 3px solid red;
    border-color: red transparent red transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fa-check-circle {
    color: #28B463;
}

.cus-error {
    color: red;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: red;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

.cus_nd img {
    max-width: 80%;
}

.cus-bar-0303 {
    text-align: center;
    padding: 8px;
    padding-top: 0px;
    background-color: rgba(158, 204, 223, 0.356);
    max-height: 100px;

    position: fixed;
    left: 0px;
    right: 0px;
    color: #0a0b68;
    border-bottom: thick ridge rgba(20, 58, 128, 0.5);
    -webkit-box-shadow: 0px 2px 13px 0.5px rgba(32, 45, 160, 0.3);
    box-shadow: 0px 2px 13px 0.5px rgba(235, 137, 137, 0.534);
    display: none;
    z-index: 9;
    margin-top: 81px;
}

#cus-text-0303 {
    position: relative;
    line-height: 25px;
    margin-left: 10px;
}

/* #navigation {
    z-index: 10 ;
} */

:root {
    --text-secondary: #7589a3;
    --text-primary: #081c36;
    --text-chat-size: 1.1rem;
    --border-color: #c9c9c9;
    --border-color-2: #e6e6e6;
    --blue: #4da7e1;
    --red: #f36262;
    --white: #FFF;
    --text-color: #181818;
    --icon-color: #747474;
    --contacts-color: #a094ed;
    --accounts-color: #7f8de1;
    --lunch-color: #f2cf5b;
    --products-color: #b781d3;
    --noACD-color: #f49756;
    --leads-color: #f88962;
    --tasks-color: #4bc076;
    --tickets-color: #62b7e5;
    --knowledge-color: #00396b;
    --dashboard-color: #ef6e64;
    --report-color: #2ecbbe;
    --char-color: #f34b1f;
    --blue-2-color: #489dd0;
    --blue-3-color: #3c97DD;
    --dar-blue-1-color: #5e87de;
    --dar-blue-2-color: #2A739E;
    --dar-blue-3-color: #317A92;
    --dar-blue-4-color: #317992;
    --deep-dark-blue-color: #00396b;
    --main-txt-color: #ffffff;
    --campaign-purple: #f2a6cf;
    --callback-color: #b785cc;
    --dynamic-cti-color: #1a237e;
    --dynamic-cti-icon-color: #a6abd7;
    --title-color: #00396b;
    --theme-color: #F9A01B;
    --supporting-theme-color: #864F10;
}


@font-face {
    font-family: 'SAP-icons';
    src: url('#appResource.SAP-icons-1.woff2#');
    src: url('#appResource.SAP-icons-1.woff2#?#iefix') format('woff'),
        url('#appResource.SAP-icons.ttf#') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SAP-icons-business';
    src: url('#appResource.BusinessSuiteInAppSymbols.woff2#');
    src: url('#appResource.BusinessSuiteInAppSymbols.woff2#?#iefix') format('woff'),
        url('#appResource.SAP-icons.ttf#') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SAP-icon2';
    src: url('#appResource.SAP-icon-v3.woff#');
    src: url('#appResource.SAP-icon-v3.ttf#') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="sap-"],
[class*=" sap-"] {

    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sap {
    font-family: 'SAP-icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

.sap-templates:before {
    content: '\e096';
    font-family: 'SAP-icons';
}

.sap-message-success:before {
    content: '\e203';
    font-family: 'SAP-icons';
}

.sap-message-error:before {
    content: '\e0b1';
    font-family: 'SAP-icons';
}

.sap-message-sending:before {
    content: '\e254';
    font-family: 'SAP-icons';
}

.sap-refresh:before {
    content: '\e010';
    font-family: 'SAP-icons';
}

.sap-seach:before {
    content: '\e00d';
    font-family: 'SAP-icons';
}

.sap-info:before {
    content: '\e05c';
    font-size: 1.1rem;
}

.sap-tickets:before {
    content: '\e0e9';
    font-family: SAP-icons;
}

div#side-nav li a.active .sap-tickets::before,
div#side-nav li a:hover .sap-tickets::before {
    background: var(--tickets-color);
}

.sap-clear:before {
    content: '\e28c';
    color: var(--red);
}

.sap-send:before {
    content: '\e302';
    font-family: 'SAP-icons';
}


.sap-zaloIcon:before {
    content: "\e900";
    font-family: 'SAP-icon2';
}

.sap-EmailIcon:before {
    content: "\e902";
    font-family: 'SAP-icon2';
}

.sap-socials:before {
    content: "\e901";
    font-family: 'SAP-icon2';
    font-size: 20px;
    font-weight: 600;
}

.sap-FB:before {
    content: "\e906";
    font-family: 'SAP-icon2';
}

.sap-MessengerIcon:before {
    content: "\e907";
    font-family: 'SAP-icon2';
}

.sap-other:before {
    content: "";
    font-family: 'SAP-icons';
}

.sap-phone::before,
.sap-call_resources::before {
    content: '\e217';
}

.sap-trash::before {
    content: '\e03d';
}

.sap-email:before {
    content: '\e037';
}

.sap-user:before {
    content: '\e0ca';
    font-family: 'SAP-icons';
}

.sap-chat:before {
    content: '\e0c3';
    font-family: 'SAP-icons-business';
}

div#side-nav li a.active .sap-livechat::before,
div#side-nav li a:hover .sap-livechat::before {
    background: var(--chat-color);
}

.sap-livechat:before {
    content: '\e904';
    font-family: 'SAP-icon2';
}

.sap-chat:before {
    content: '\e903';
    font-family: 'SAP-icon2';
}

div#side-nav li a.active .sap-chat::before,
div#side-nav li a:hover .sap-chat::before {
    background: var(--tickets-color);
}

.sap-network:before {
    content: '\e091';
    font-family: 'SAP-icons';
}


.sap-user-edit:before {
    content: '';
    font-family: 'SAP-icons';
}

.sap-backup-image:before {
    content: '\e1e6';
    font-family: 'SAP-icons';
}

.sap-backup-sticker:before {
    content: '\e288';
    font-family: 'SAP-icons';
}

.sap-history-chat:before {
    content: '\e030';
}

.flx {
    display: flex;
}


.limit-line {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.sap-change-history:before {
    content: '\e1d8';
    font-family: 'SAP-icons';
}

.sap-change-request:before {
    content: '\e0c4';
    font-family: 'SAP-icons';
}

.sap-process-history:before {
    content: '\e118';
    font-family: 'SAP-icons';
}

.sap-response-history:before {
    content: '\e05d';
    font-family: 'SAP-icons';
}

.sap-history:before {
    content: '\e02d';
    font-family: 'SAP-icons';
}

.sap-decline:before {
    content: '\e03e';
    font-family: 'SAP-icons';
}

.sap-rss:before {
    content: '\e175';
    font-family: 'SAP-icons';
}

.sap-review-message:before {
    content: '\e112';
}

.sap-edit:before {
    content: '\e038';
}

.sap-tag:before {
    content: '\e1af';
}

.sap-sound-on:before {
    content: '\e228';
}

.sap-sound-off:before {
    content: '\e229';
}

form[name=form_email_templates] .actions.bottom.left,
form[name=form_ticket_templates] .actions.bottom.left {
    position: absolute;
    top: -10px;
    right: 0px;
}


.conv-item__avatar {
    min-width: 48px;
    max-width: 48px;
    color: #1771e6;
    text-align: center;
    font-size: 2.5rem;
}

.conv-item {
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px;
    cursor: pointer;
}

.tage_type {
    background: orange;
    padding: 0 2px;
    color: var(--white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.6rem;

    line-height: 1.7;
    text-align: center;
}

.msg-item {
    width: 100%;
}

.conv-item-body {
    font-size: var(--text-chat-size);
    flex-direction: column;
    margin-left: 8px;
    gap: 8px;
    flex: 1;
}

.conv-item-body__main {
    font-size: var(--text-chat-size);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.conv-item__more {
    display: flex;
    gap: 4px;
    justify-items: flex-end;
    align-self: flex-start;
    font-size: .9rem;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.5)
}

.conv-item__more .conv-item__more-time {
    display: flex;
    flex-direction: column;
}

.conv-item-body__main,
.conv-item__more {
    font-weight: 400;
    line-height: 1.5;
    line-height: 18px;
    color: var(--text-secondary, #7589a3);
}


.a-icon_notifi {
    cursor: pointer;
}

.notification-icon {
    font-size: 12px;
    font-size: 12px;
    height: 20px;

}

.dropdown-menu-notifi {
    max-height: 250px;
    overflow-y: auto;
    border-radius: 4px;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 8px;
    z-index: 100;
    width: 290px;
    margin-top: 10px;
    right: 100%;
}


.notification-icon .iconfont {
    font-size: 18px;
    color: currentcolor;
}

.dem-icon {
    background-color: #0176d3;
    padding: 2px 5px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    position: relative;
    top: -12px;
    color: #f2f2f2;
}

.more-icon.show-more-icon {
    margin-top: -9px;
    border-style: dashed dashed solid;
    border-top-style: dashed;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: dashed;
    border-color: transparent transparent #fff;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: transparent;
}

.more-icon {
    content: '';
    width: 0;
    height: 0;
    border-style: solid dashed dashed;
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-color: #fff transparent transparent;
    border-top-color: rgb(255, 255, 255);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    -webkit-transition: all .2s;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
    position: absolute;
    top: 50%;
    right: 3px;
    margin-top: -3px;
    border-width: 6px;
    border-top-color: rgba(255, 255, 255, .7);
}

@font-face {
    font-family: 'icomoon2';
    src: url('./fonts/icomoon2.eot');
    src: url('./fonts/icomoon2.eot') format('embedded-opentype'),
        url('./fonts/icomoon2.ttf') format('truetype'),
        url('./fonts/icomoon2.woff') format('woff'),
        url('./fonts/icomoon2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {

    font-family: 'icomoon2';
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^='icon-x-'] {
    font-size: 18px;
}

.icon-cus-contact:before {
    content: "\e914";
}

.icon-cus-reply:before {
    content: "\e911";
}

.icon-cus-reply-all:before {
    content: "\e912";
}

.icon-cus-right-arrow:before {
    content: "\e913";
}

.icon-bell:before {
    content: "\e910";
}

.icon-x-send:before {
    content: "\e90e";
}

.icon-x-delete:before {
    content: "\e90f";
}

.icon-x-close:before {
    content: "\e90d";
}

.icon-x-call:before {
    content: "\e900";
}

.icon-x-time:before {
    content: "\e901";
    color: #1a237e;
}

.icon-x-forwarding:before {
    content: "\e902";
}

.icon-x-grid:before {
    content: "\e903";
}

.icon-x-home:before {
    content: "\e904";
}

.icon-x-incoming:before {
    content: "\e905";
}

.icon-x-logout:before {
    content: "\e906";
}

.icon-x-microphone:before {
    content: "\e907";
}

.icon-x-missed:before {
    content: "\e908";
}

.icon-x-mute:before {
    content: "\e909";
}

.icon-x-outgoing:before {
    content: "\e90a";
}

.icon-x-phone:before {
    content: "\e90b";
}

.icon-x-transfer:before {
    content: "\e90c";
}

.x-status {
    background-color: var(--dynamic-cti-color);
}

.x-status i {
    color: white !important;
    white-space: nowrap;
}

.x-status span {
    font-size: large;
    color: white;
    white-space: nowrap;
    margin-left: 10px;
}


.x-status-available i {

    color: var(--tasks-color);
}

.x-status-No i {

    color: var(--noACD-color);
}

.x-status-lunch i {
    color: var(--lunch-color);
}

.x-status-meeting i {

    color: var(--red);
}

.x-status-callback i {

    color: var(--callback-color);
}

.x-status-outbound i {

    color: var(--blue);
}

.x-status-campaign i {
    color: var(--campaign-purple);
}

.x-status-wrap-up i {
    color: var(--red);
}

.x-status-logout i {
    color: #ABB2B9;
}

.x-status-active {
    z-index: 2;
}

/* .x-status-wrap-up {
    opacity: 0.5;
} */

.x-notification,
.x-back-to-last-page {
    font-size: 18px;
    color: #fff;
}

.x-cti,
.x-notification,
.x-back-to-last-page {
    display: inline-flex;
    align-items: center;
    position: relative;
    border-radius: 3px;
    z-index: 10;
    bottom: -4px;
    box-shadow: rgb(255, 255, 255) 0px 0px 3px;
    border-radius: 6px;
}

.x-back-to-last-page {
    margin-left: 8px;
    padding: 10px 10px 8px 10px;
}

.x-back-to-last-page:hover i {
    text-shadow: 2px 4px 10px #f5f5f5;
}

.x-reload-page {
    position: fixed;
    bottom: 10px;
    right: 60px;
}

.layui-nav.left.fast-add {
    display: none;
}

.x-dialpad-1 {
    border-top-left-radius: 4px;
}

.x-dialpad-3 {
    border-top-right-radius: 4px;
}

.x-dialpad-empty {
    border-bottom-left-radius: 4px;
}

.x-dialpad-delete {
    border-bottom-right-radius: 4px;
}

.x-cti {
    /* padding: 4px; */
    margin-top: 5px;
    height: 30px !important;
}

/* .icon-x-call:not(.x-dialpad-phone>.icon-x-call),
.icon-x-close,
.icon-x-grid {
    color: black ;
} */

.x-cti div,
.x-cti input,
.x-notification div,
.x-notification input,
.x-back-to-last-page div,
.x-back-to-last-page input {
    /* margin: 6px; */
}

.x-cti div[data-ui2] {
    margin-left: 0;
    height: 100%;
    background-color: transparent;
    /* Remove direct background color */
    border-radius: 4px;
    /* Optional: Add rounded corners */
    color: #a6abd7;
}

#x-notification-id {
    margin-top: 1px;
}

#x-notification-id:hover,
.x-back-to-last-page:hover {
    cursor: pointer;
}

.x-cti input[type='text'] {
    padding: 2px 20px 0px 5px;
    width: 130px;
    min-width: 130px;
    min-height: 10px;
    height: 100%;
    margin-bottom: 0px;
}

/* .x-cti .x-phone span,
.x-cti .x-transfer-phone span {
    margin-top: 5px;
}

.x-cti .x-phone span {
    margin-top: 2px;
} */

/* .x-cti [class^='icon-x-'] {
    cursor: pointer;
    color: #FFF;
} */

.x-cti [class^='icon-x-']:hover {
    text-shadow: 2px 4px 10px #f5f5f5;
}



.x-cti [data-animate='0'],
.x-cti [data-animate-dialpad='0'],
.x-cti [data-animate-status='0'],
.x-cti [data-ui2='0'],
.x-cti [data-ui2-transfer='0'] {
    display: none;
}

.x-cti [data-animate-status='0'] {
    height: 0px;
    overflow: hidden;
    display: block;
}

.x-cti [data-animate-dialpad='0'] {
    height: 0px;
    overflow: hidden;
    display: flex;
}

.x-phone,
.x-transfer-phone {
    border: 0;
    outline: none;
    color: #878484;
    box-shadow: unset;
    font-size: 1em;
}

.x-cti>.x-status.x-transparent-02>i {
    color: #FFF;
}

span.x-phone,
span.x-transfer-phone {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}


span.x-phone span,
span.x-transfer-phone span {
    position: absolute;
    display: flex;
    right: 0px;
    width: 15px;
    height: 28px;
    color: #fff;
    font: 13px monospace;
    text-align: center;
    line-height: 1em;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    /* border: 1px solid lightgray; */
}

span.x-phone input,
span.x-transfer-phone input {
    padding-right: 18px;
    box-sizing: border-box;
}

.x-time div {
    margin: 0 1px;
    cursor: default;
}

.x-phone-number {
    color: #a6abd7;
}

.x-text {
    color: black;
    display: inline-flex;
    font-size: 14px;
    padding: 0px 5px;
    display: flex;
    align-items: center;
}

/* #a-endcall {
    color: red
} */



.x-col i {
    font-size: 12px;
}

.x-dialpad {
    width: 200px;
    position: absolute;
    z-index: 2;
    transform: translateY(32px);
    box-shadow: -6px 4px 16px -6px #ddd;
    background: rgb(255, 255, 255);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

[class^='x-dialpad-'] {
    background: var(--primary-color);
    margin: 0px;
    width: 30%;
    color: #FFF;
    height: 50px;
    font-family: Arial, serif;
    font-size: 20px;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    align-items: center;
    transition: all 0.2s ease;
}

[class^='x-dialpad-']:hover:not(.x-dialpad-empty),
.x-status-child div:hover:not(.x-dialpad-empty) {
    cursor: pointer;
    background-color: var(--blue-2-color);
    color: #FFF;
    border-radius: 4px;
}

[class^='x-dialpad-']:hover i,
.x-status-child div:hover i {
    color: #FFF;
}



.x-dialpad-hide {
    display: none
}

.x-status-child {
    width: 150px;
    background-color: #FFF;
    position: absolute;
    color: var(--primary-color);
    top: 0;
    left: 0px;
    z-index: 2;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 4px;
    transform: translateY(36px);
    box-shadow: -1px 1px 6px #444;
}

.x-status-child-available.x-status-available i,
.x-status-child-away.x-status-away i,
.x-status-child-logout.x-status-logout i,
.x-status-child-lunch.x-status-lunch i,
.x-status-child-meeting.x-status-meeting i,
.x-status-child-callback.x-status-callback i,
.x-status-child-outbound.x-status-outbound i,
.x-status-child-campaign.x-status-campaign i,
.x-status-child-wrap-up.x-status-wrap-up i {
    display: none;
}

.x-status-child-available.x-status-available,
.x-status-child-away.x-status-away,
.x-status-child-logout.x-status-logout,
.x-status-child-lunch.x-status-lunch,
.x-status-child-meeting.x-status-meeting,
.x-status-child-callback.x-status-callback,
.x-status-child-outbound.x-status-outbound,
.x-status-child-campaign.x-status-campaign,
.x-status-child-wrap-up.x-status-wrap-up {
    padding: 6px;
    transition: all 0.1s ease;
}

.x-status-child [class^='icon-x-'] {
    font-size: 1.2rem
}

.x-transfer-child div,
.x-transfer-child span {
    display: inline-flex;
}

.x-transfer-child {
    margin: 0px;
    height: 100%;
}

.x-transfer-active {
    color: #16ef26;
}

.x-callin {
    border: 1px solid;
    width: 250px;
    background-color: var(--blue-2-color);
    color: #FFF;
    z-index: 2;
    position: absolute;
    right: 5px;
    bottom: 10%;
    border-radius: 5px;
    border-color: #ddd;
    box-shadow: -4px 4px 10px 2px var(--border-color);
}

.x-callin-evt {
    display: flex;
    justify-content: end;
}

.x-callin-evt div {
    transition: all 0.1s ease;
    width: 40%;
    text-align: center;
    background-color: var(--tasks-color);
    border: 1px solid #c7c2c2;
    margin: 5%;
    padding: 7px;
    border-radius: 6px;
}


.x-callin-evt #x-callin-reject {
    cursor: pointer;
    background-color: var(--red);
    border: 1px solid #c7c2c2;
}

.x-callin-evt #x-callin-reject:hover {
    cursor: pointer;
    background-color: var(--red);
    border: 1px solid #f5f4f4;
}

.x-callin-evt #x-callin-accept:hover {
    cursor: pointer;
    border: 1px solid #f5f4f4;
    background-color: var(--tasks-color);
}

.x-callin .x-callin-title {
    margin: 20px;

}

.x-callin .x-callin-title i {
    font-size: 18px;
    position: absolute;
    color: #5ac540;
    top: -24px;
    left: 10px;
    background: var(--white);
    padding: 10px 16px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.x-callin #x-callin-phone {
    margin-left: 10px;
    font-size: 28px;
}

#a-cti span.x-phone span[data-animate="1"] {
    font-family: "Helvetica Neue, Helvetica, Arial, sans-serif";
}


[class^='x-dialpad-'] {
    background-color: var(--white);
    color: #102442;
    border: 1px solid var(--border-color-2);
}

/* .x-cti [class^='icon-x-'],
.icon-x-time {
    color: var(--white);
} */

.x-dialpad .icon-x-delete,
.x-dialpad .icon-x-call {
    color: #102442;
}



#list_kh_import thead tr .select_checkbox {
    display: none;
}

#list_kh_import tbody tr .select_checkbox {
    display: none;
}