html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: none;
    font: var(--font);
}
textarea, input {
    font: var(--font);
}

.shadow-box {
    box-shadow: 5px 5px 10px #888888;
}

.row2colors tr:nth-child(odd) {
    background-color: var(--table-odd-row-color);
}

.row2colors tr:nth-child(even) {
    background-color: var(--table-even-row-color);
}

.row2colors.hover td:hover{
    background-color: var( --as-transparent-button-hover-color);
}

.cardsimpletableclass table {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-spacing: 0;
    border-collapse: collapse;
}

.cardsimpletableclass th {
    color: #393E41;
    background-color: #ebebeb;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    height: var(--table-row-height);
    text-align: center;
}

.cardsimpletableclass td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    height: var(--table-row-height);
}

.hrnewtableclass {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--new-table-background-color);
    border: 1px solid #ddd;
}

.hrnewtableclass table {
    border-spacing: 0;
    border-collapse: collapse;
}

.hrnewtableclass table:first-child {
    border-top: 1px solid #ddd;
}

.hrnewtableclass th:first-child {
    border-left: 1px solid #ddd;
}

.hrnewtableclass td:first-child {
    border-left: 1px solid #ddd;
}

.hrnewtableclass th {
    color: #393E41;
    background-color: #ebebeb;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    height: var(--table-row-height);
    text-align: center;
}

.hrnewtableclass td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    height: var(--table-row-height);
}

.hr-bsc-batch-inputs-table td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.cardsimpletableclassnoborder{
    border-spacing: 0;
    border-collapse: collapse;
}

.cardsimpletableclassnoborder td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    height: var(--table-row-height);
}

.cardsimpleInput {
    font-size: var(--font-size-text-input);
    padding-left: 5px;
    padding-right: 5px;
    height: var(--control-height);
    border-radius: 3px;
    border: var(--control-border);
    outline: none;
}

.cardsimpleInputOutline {
    font-size: var(--font-size-text-input);
    padding-left: 5px;
    padding-right: 5px;
    height: var(--control-height);
    border-radius: 3px;
    border: var(--control-border);
}

.cardSimpleTextarea {
    font-size: var(--font-size-text-input);
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    border: var(--control-border);
    outline: none;
}

.cardsimpleInput:disabled,
.cardsimpleInputOutline:disabled,
.cardSimpleTextarea:disabled {
    background-color: #ebebe4;
}

.no-hover table.sortTable tr.parent:hover td{
    background-color: unset;
}

.no-hover table.sortTable tr.parent:nth-child(odd):hover td{     background-color: #f5f5f5 !important }

.card-table-add-row {
    line-height: 40px;
    background-color: #ebebeb;
    padding-left: var(--control-horizontal-distance-1);
}

.card-table-add-row a {
    color: var(--a-color);
    cursor: pointer;
}

.cardtablehover {}

.cardtablehover>table>tbody>tr:hover {
    background-color: var(--table-light-row-background-color);
}

.absol-autocomplete-input.cardsimpleInput > input {
    border: none;
}

.mini-scoller {
    scrollbar-width: thin;
}

.mini-scoller::-webkit-scrollbar {
    width: 7px;
}

.mini-scoller::-webkit-scrollbar-track {
    background: rgb(240, 240, 240);
}

.mini-scoller::-webkit-scrollbar-thumb {
    background: rgb(205, 205, 205);
}

.bsc-white .absol-vmenu-button.bsc-quickmenu {
    color: var(--icon-color);
}

.bsc-white .absol-vmenu-button.bsc-quickmenu:hover {
    color: black;
}

.bsc-white .absol-vmenu-button.bsc-quickmenu.red:hover .absol-vmenu-button-ext-icon-container {
    color: red;
}

.bsc-white .absol-vmenu-button.bsc-quickmenu.approval:hover .absol-vmenu-button-ext-icon-container {
    color: #489b0f;
}

.bsc-white .absol-vmenu-button.bsc-quickmenu.deny:hover .absol-vmenu-button-ext-icon-container {
    color: #f23c36;
}

.bsc-icon-hover-black {
    color: var(--icon-color);
    font-size: var(--icon-fontsize);
    cursor: pointer;
}

.bsc-icon-hover-black-not-cursor {
    color: var(--icon-color);
    font-size: var(--icon-fontsize);
}

.bsc-icon-location {
    color: #ea4335;
    font-size: var(--icon-fontsize);
    cursor: pointer;
}

.card-icon-hover-chat {
    color: #d6d6d6;
    font-size: var(--icon-fontsize);
    cursor: pointer;
}

.bsc-icon-hover-blue {
    color: var(--icon-color);
    font-size: var(--icon-fontsize);
    cursor: pointer;
}

.bsc-icon-hover-blue:hover {
    color: #0068ff;
}

.card-icon-remove {
    color: var(--icon-color);
    font-size: var(--icon-fontsize);
    cursor: pointer;
}

.card-icon-blue {
    color: #1463f6;
    font-size: var(--icon-fontsize);
    cursor: pointer;
}

.card-icon-disabled {
    color: var(--as-disabled-text-color);
    font-size: var(--icon-fontsize);
}

.bsc-icon-hover-red {
    color: var(--icon-color);
    font-size: var(--icon-fontsize);
    cursor: pointer;
}

.bsc-icon-hover-red:hover {
    color: red;
}

.card-icon-cover {
    display: inline-block;
    height: var(--icon-fontsize-cover);
    width: var(--icon-fontsize-cover);
    padding: 5px;
    cursor: pointer;
    vertical-align: middle;
}

.card-icon-cover:hover {
    background-color: var(--icon-background-cover-hover);
}

.card-icon-cover-disabled {
    display: inline-block;
    height: var(--icon-fontsize-cover);
    width: var(--icon-fontsize-cover);
    padding: 5px;
}

.card-icon-remove-cover {
    display: inline-block;
    height: var(--icon-fontsize-cover);
    width: var(--icon-fontsize-cover);
    padding: 5px;
    cursor: pointer;
    vertical-align: middle;
}

.card-icon-remove-cover:hover {
    background-color: var(--icon-remove-background-cover-hover);
}

.card-icon-remove-cover:hover i {
    color: var(--icon-remove-color-hover);
}

.absol-tree-list-item-parent.select-menu-color-moved *,
.select-menu-color-moved span {
    color: red;
}

.main-frame-view>.absol-frame-view-frame-container>.absol-frame {
    /*padding-left: var(--tab-padding-left);*/
    /* dòng này ảnh hưởng mobile*/
}

.button-panel-header {
    /* background-color: white; */
    padding-top: var(--control-verticle-distance-1);
    padding-bottom: var(--control-verticle-distance-1);
    /* z-index: 88; */
}

.single-button-header {
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--control-verticle-distance-2);
    margin-top: var(--control-verticle-distance-1);
    margin-bottom: var(--control-verticle-distance-1);
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/************************* WEB HEADER ***************************/

table {
    border-spacing: 0;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    border: none;
}

tr,
td {
    border: none;
    padding: 0;
    margin: 0;
}

.card-header-container {}

.card-header-container>.card-header {
    width: 100%;
    border-bottom: 1px solid #aaaaaa;
    box-sizing: border-box;
    height: 50px;
}

.card-header {
    border-spacing: 0;
    border: none;
    table-layout: fixed;
    display: table;
}

.card-header-content {
    display: table-row;
}

.card-header-content>div {
    display: table-cell;
    vertical-align: middle;
}

.card-header-app-menu-ctn {
    width: 50px;
    text-align: center;
    border-right: 1px solid #aaaaaa;
    user-select: none;
    color: black;
}

.card-header-app-menu-ctn i {}

.card-header-logo-ctn {
    padding: 10px;
    background-color: white;
    text-align: center;
    box-sizing: border-box;
}

.card-header-logo-ctn::before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.card-header-logo-ctn img {
    max-height: 30px;
    max-width: 160px;
    display: inline-block;
    vertical-align: middle;
}

.hr-main-body .card-header-logo-ctn{
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    padding: 0 0;
    text-align: center;
    height: var(--header-height);
    width: 180px;
    border-bottom: 1px solid var(--header-background-color);
}

.bsc-white .hr-main-body .main-tabview>.absol-tabbar{
    left: 180px;
}

.card-header-app-list-ctn {
    width: 0;
}

.card-header #number_message_no_seen:empty {
    display: none;
}

.card-header-box-support-ctn {
    width: 0;
}

@media only print and (orientation: landscape) {
    .as-print-breaking-page {
        display: block !important;
        margin: 0;
    }
}

@media only print {
    .as-print-breaking-page-before {
        page-break-before: always;
    }

    body,
    html,
    :root {
        overflow: initial;
    }

    /* .report-360-data-content-header {
        display: block;

    } */
}

/* skill-decode cover */
@media (orientation: landscape) {
    .sd-cover-page {
        font-size: calc(100vh / 60);
    }
}

@media (orientation: portrait) {
    .sd-cover-page {
        font-size: calc(100vw / 60);
    }
}

.cardtablehover {
    position: relative;
}

/*
body:not(.am-mobile-theme) .sortTable,
body:not(.am-mobile-theme) .sortTableClone {
    font: var(--font) !important;
    border-color: #ccc !important;
    background-color: var(--table-background-color) !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    border-top: unset !important;
    border-left: unset !important;
    margin-top: -10px !important;
    margin-bottom: -10px !important;
}

body:not(.am-mobile-theme) .cardsimpletableclass .sortTable,
body:not(.am-mobile-theme) .sortTableClone {
    margin-left: 0 !important;
}

body:not(.am-mobile-theme).bsc-white .sortTable thead th,
body:not(.am-mobile-theme).bsc-white .sortTableClone thead th {
    text-align: center;
    background-color: #d6d6d6;
    color: black !important;
    border: unset !important;
    height: 40px;
    font-size: var(--font-size-table-header) !important;
    font-weight: var(--font-weight-table-header) !important;
}

body:not(.am-mobile-theme) .sortTable tbody td,
body:not(.am-mobile-theme) .sortTableClone tbody td {
    border: unset !important;
    background-color: #d6d6d6;
}

body:not(.am-mobile-theme) .sortTable th[role=columnheader]:not(.no-sort):after,
body:not(.am-mobile-theme) .sortTableClone th[role=columnheader]:not(.no-sort):after {
    border-width: 12px 8px 0;
    margin-left: 5px;
}

body:not(.am-mobile-theme) .sortTable,
body:not(.am-mobile-theme) .sortTableClone {
    border-radius: 0px !important;
    padding-bottom: 0 !important;
}

body:not(.am-mobile-theme) .sortTable td:first-child,
body:not(.am-mobile-theme) .sortTableClone td:first-child {
    padding-left: 10px;
}

body:not(.am-mobile-theme) .sortTable td:last-child,
body:not(.am-mobile-theme) .sortTableClone td:last-child {
    padding-right: 10px;
}

body:not(.am-mobile-theme) .sortTable td,
body:not(.am-mobile-theme) .sortTableClone td {
    vertical-align: middle !important;
    border-top: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
}

body:not(.am-mobile-theme).bsc-white table.sortTable,
body:not(.am-mobile-theme).bsc-white table.sortTableClone {
    margin: unset;
}

.container-header > span {
    justify-content: center;
    align-items: center;
}

body:not(.am-mobile-theme).bsc-white table.sortTable {
    /* max-width: calc(100% - 20px);
}*/

.am-application table.sortTable {
    width: calc(100%);
}

.bsc-white .pagination-align {
    transform: translateX(-50%) translateY(-10px);
}

.sortTable-cell-view {
    min-height: 30px;
    /* background-color: #ebebeb; */
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.sortTable-cell-view p {
    margin: 0;
}

.sortTable-cell-view-cmd {
    min-height: 30px;
    white-space: nowrap;
    text-align: center;
}

.sortTable-cell-edit-middle {
    min-height: 30px;
    padding-top: 5px;
}

.sortTable-cell-edit {
    min-height: 30px;
}

.card-table-list-title {
    font-weight: var(--font-weight-title);
    font-size: var(--font-size-title);
    width: calc(100vw - 30px - var(--tab-padding) - var(--tab-padding));
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card-table-list-extra-data {
    font: var(--font);
}

/* thiên */
body:not(.am-mobile-theme) .sortTable.am-gray-table>tbody>tr.parent>td.card-table-drag-cell::before {
    background-color: unset;
}

body:not(.am-mobile-theme) .sortTable.am-gray-table {}

body:not(.am-mobile-theme) .sortTable.am-gray-table>tbody>tr>td.parent {
    position: relative;
    background-color: #d6d6d6;
    border: none !important;
}

body:not(.am-mobile-theme) .sortTable.am-gray-table>tbody>tr.parent>td::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 5px;
    right: 2.5px;
    top: 5px;
    bottom: 5px;
    background-color: #ebebeb;
}

body:not(.am-mobile-theme) .sortTable.am-gray-table>tbody>tr.parent>td:first-child::before {
    left: 10px;
}

body:not(.am-mobile-theme) .sortTable.am-gray-table>tbody>tr.parent>td:last-child::before {
    right: 10px;
}


body:not(.am-mobile-theme) .sortTable.am-gray-table>tbody>tr.parent>td>.container-view {
    position: relative;
    z-index: 3;
}

body:not(.am-mobile-theme) .sortTable.am-white-table {}

body:not(.am-mobile-theme) .sortTable.am-white-table>tbody>tr>td.parent {
    position: relative;
    background-color: #d6d6d6;
    border: none !important;
}

body:not(.am-mobile-theme) .sortTable.am-white-table>tbody>tr.parent>td::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 5px;
    right: 2.5px;
    top: 5px;
    bottom: 5px;
    background-color: #ffffff;
}

body:not(.am-mobile-theme) .sortTable.am-white-table>tbody>tr.parent>td:first-child::before {
    left: 10px;
}

body:not(.am-mobile-theme) .sortTable.am-white-table>tbody>tr.parent>td:last-child::before {
    right: 10px;
}


body:not(.am-mobile-theme) .sortTable.am-white-table>tbody>tr.parent>td>.container-view {
    position: relative;
    z-index: 3;
}


.chats-theme-desktop-container {
    height: 100%;
}

.chats-theme-desktop-bar-col {
    background-color: #0cb3ff;
    width: var(--chat-bar-col-width);
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.chats-theme-desktop-list-message {
    background-color: white;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    border-right: var(--control-border);
}

.chats-theme-desktop-list-message-container {
    overflow-y: auto;
    position: relative;
    padding-top: var(--control-verticle-distance-2);
    height: 100%;
}

.chats-theme-desktop-list-message-container:not(.mobile){
    height: calc(100% - 30px - 2 * var(--control-horizontal-distance-2));
}

.chats-theme-desktop-list-message-content {
    overflow-x: hidden;
    text-align: left;
    width: 100%;
}

/* .chats-theme-desktop-list-message-content>div:nth-child(odd){
    background-color: #efefef;
}

.chats-theme-desktop-list-message-content>div:nth-child(even){
    background-color: #ffffff;
} */

.chats-theme-desktop-message-details {
    height: 100%;
    width: calc(100% - (var(--chat-bar-col-width) + var(--chat-desktop-list-message-width)));
    display: inline-block;
    vertical-align: top;
}

.chats-theme-desktop-information-content {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    width: var(--chat-desktop-gallery);
    display: none;
    vertical-align: top;
    border-left: var(--control-border);
}

.chats-theme-desktop-searchbox-content-chat-container,
.chats-theme-desktop-information-body-container {
    padding: var(--control-horizontal-distance-2);
}

.chats-theme-desktop-searchbox-container {
    height: 30px;
}

.chats-theme-desktop-add-group-container {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
}

.chats-theme-desktop-add-group-container::after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.chats-theme-desktop-add-group-container>i {
    display: inline-block;
    vertical-align: middle;
}




.chats-theme-desktop-searchbox-add-group {
    position: relative;
    padding: var(--control-horizontal-distance-2);
}


.chats-theme-desktop-name-chat-container {
    /** flex make size by content**/
    min-height: 50px;

    height: 50px;
    border-bottom: var(--control-border);
    position: relative;
    background-color: white;
}

.chats-theme-desktop-searchbox-content-chat-container {
    display: none;
    text-align: center;
}

.chats-theme-desktop-information-name-container {
    height: 50px;
    border-bottom: var(--control-border);
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.chats-theme-desktop-information-body-container {
    height: calc(100% - 50px);
    overflow: auto;
}

.chats-theme-gallery-time-separate {
    line-height: 30px;
    font-size: 12px;
    font-weight: bold;
}

.chats-theme-gallery-time {
    line-height: 30px;
    font-size: 12px;
}
.chats-theme-gallery-content-ctn {
    background-color: #DBF4FD;
    width: calc(100%);
    border-radius: 12px;
    overflow: hidden;
}

.chats-theme-desktop-title {
    position: absolute;
    top: var(--control-verticle-distance-2);
    left: var(--control-verticle-distance-2);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    max-width: calc(100% - 100px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chats-theme-desktop-content-icon {
    position: absolute;
    right: var(--control-verticle-distance-2);
    top: var(--control-verticle-distance-2);
}

.chats-theme-desktop-gallery-title {
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    padding-left: var(--control-horizontal-distance-2);
    vertical-align: middle;
}

.card-chat-box-holder {
    display: inline-block;
    vertical-align: bottom;
    width: 300px;
    height: 40px;
    margin-right: 10px;
    position: relative;
}


.card-chat-box-container {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.card-chat-box-container>.card-chat-box {
    width: 100%;
}


.card-chat-box {
    height: 100%;
    position: relative;
}

.card-chat-box-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-chat-box-content {
    /** auto align and resize item**/
    display: flex;
    flex-direction: column;

    position: relative;
    height: 100%;
    width: 100%;
    /*
    remove because of width, height, flex
    display: inline-block;
    overflow: auto; do not scroll
    */
}



.card-chat-box-messages-container {
    position: absolute;
    width: 100%;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.4);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.card-chat-box-messages-ctn {
    flex-grow: 1;
    position: relative;
}

.card-chat-box-messages {
    overflow-x: hidden;
    text-align: left;
    width: 100%;
}

.card-chat-box-messages-dask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.card-chat-box-text-input-container {
    position: relative;
    text-align: left;
    padding-bottom: 5px;
    background-color: white;
}

.am-mobile-theme .card-chat-box-text-input-container{
    bottom: 0;
}


.card-chat-box-text-input {
    min-height: 40px;
    max-height: 80px;
    overflow-y: auto;
    overflow-x: visible;
    text-align: left;
}

/*style dùng cho text trong chat*/
.card-chat-box canvas.as-emoji {
    display: inline-block;
    width: 60px;
    height: 60px;
}

.card-chat-box img.as-emoji {
    display: inline;
    vertical-align: middle;
}

.card-chat-box img.as-emoji:not(:last-child) {
    margin-right: 0.2em;
}

.card-chatbox-message-line {
    display: block;
    white-space: nowrap;
}

.chats-message-emoji-list-ctn {
    height: 30px;
    display: block;
}

.card-chatbox-message-me .chats-message-emoji-list-ctn, .card-chatbox-message-other .chats-message-emoji-list-ctn{
    margin-bottom: -25px;
}

.card-chatbox-message-me-img .chats-message-emoji-list-ctn, .card-chatbox-message-other-img .chats-message-emoji-list-ctn{
    margin-bottom: -15px;
    margin-top: -15px;
}

.card-chatbox-message-me, .card-chatbox-message-me-img, .card-chatbox-message-other, .card-chatbox-message-other-img {
    position: relative;
}

.card-chatbox-extra-ctn {
    vertical-align: top;
    display: inline-block;
    padding-top: 5px;
}

.card-chatbox-message-me {
    border: 1px solid #ddd;
    padding: 10px;
    margin-right: 5px;
    margin-top: 2px;
    max-width: 70%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    display: inline-block;
    background-color: #DBF4FD;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    vertical-align: middle;
}


.card-chatbox-message-me.card-anim-scale,
.card-chatbox-message-me-img.card-anim-scale,
.card-chatbox-message-other.card-anim-scale,
.card-chatbox-message-other-img.card-anim-scale {
    animation-name: message-scale;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes message-scale {
    0% {
        transform: scale(1,1);
    }
    30% {
        transform: scale(1.1,1.1);
    }
    50% {
        transform: scale(1,1);
    }
    80% {
        transform: scale(1.1,1.1);
    }
    100% {
        transform: scale(1,1);
    }


}

.card-chatbox-message-me-edit {
    display: inline-block;
    font-size: var(--icon-fontsize);
    color: var(--icon-color);
}

.card-chatbox-message-me-img {
    border: 1px solid #ddd;
    margin-right: 5px;
    padding: 1px;
    margin-top: 2px;
    max-width: 50%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    display: inline-block;
    background-color: #DBF4FD;
    vertical-align: middle;
}

.card-chatbox-message-line:nth-child(2) .card-chatbox-message-me,
.card-chatbox-message-line:nth-child(2) .card-chatbox-message-me-img {
    border-top-right-radius: 12px;
}

.card-chatbox-message-line:nth-child(2) .card-chatbox-message-me-img>img {
    border-top-right-radius: 12px;
}

.card-chatbox-message-me-img>img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}


.card-chatbox-message-other {
    padding: 10px;
    margin-top: 1px;
    margin-left: 5px;
    border: 1px solid #ddd;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    display: inline-block;
    background-color: rgb(241, 240, 240);
    word-wrap: break-word;
    white-space: normal;
    vertical-align: middle;
}

.card-chatbox-message-line:last-child .card-chatbox-message-other,
.card-chatbox-message-line:last-child .card-chatbox-message-other-img {
    border-bottom-left-radius: 12px;
}

.card-chatbox-message-line:last-child .card-chatbox-message-other-img>img {
    border-bottom-left-radius: 12px;
}

.card-chatbox-message-other-img>img {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.card-chatbox-message-other-img {
    max-width: 50%;
    margin-top: 2px;
    padding: 1px;
    margin-left: 5px;
    border: 1px solid #ddd;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    display: inline-block;
    background-color: rgb(241, 240, 240);
    vertical-align: middle;
}

.card-chatbox-groupmess-me {
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
}

.card-chatbox-groupmess-other {
    text-align: left;
}

.card-chatbox-groupmess-me-note {
    font-size: 12px;
    padding-right: 5px;
}

.card-chatbox-groupmess-other-note {
    font-size: 12px;
    padding-left: 5px;
}

.card-chatbox-message-cover {
    max-width: 70%;
    padding-top: 10px;
    white-space: nowrap;
    padding-bottom: 10px;
}

.card-chat-box-scroll-last-ctn {
    position: absolute;
    right: 30px;
    border-radius: 20px;
    height: 40px;
    width: 40px;
    top: -70px;
    background-color: rgb(241, 241, 244);
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
}

.am-mobile-theme .card-chat-box-scroll-last-ctn{
    top: -50px;
}

.am-mobile-theme .card-chat-box-scroll-last-ctn {
    right: 10px;
}

.card-chat-box-scroll-last-icon {
    font-size: 30px;
    color: rgb(43, 44, 51);
}

.chat-button-number-in-chatbox {
    min-width: 16px;
    padding-left: 5px;
    padding-right: 5px;
    height: 16px;
    background: rgb(0, 120, 212);
    border-radius: 8px;
    color: white;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: 0
}

.chats-pin-message-single-ctn{
    padding: 5px;
    height: 50px;
    white-space: nowrap;
    cursor: pointer;
}

.chats-pin-message-single-ctn:not(:hover) .chats-pin-message-single-right{
    display: none;
}

.chats-pin-message-single-ctn::before{
    height: 100%;
}

.chats-pin-message-single-ctn::before,
.chats-pin-message-single-left,
.chats-pin-message-single-right{
    display: inline-block;
    vertical-align: middle;
}

.chats-pin-message-single-left {
    width: 100%;
}

.chats-pin-message-single-ctn:hover .chats-pin-message-single-left {
    width: calc(100% - 40px);
}

.chats-pin-message-single-right {
    width: 34px;
    height: 34px;
    outline: none;
    border: 0;
    color: var(--icon-color);
    border-radius: 17px;
    padding: 0;
}

.chats-pin-message-single-right:not(:hover){
    background-color: transparent;
}

.chats-pin-message-single-icon-ctn {
    display: inline-block;
    vertical-align: middle;
    height: 34px;
    width: 34px;
    outline: none;
    border: 0;
    background-color: transparent;
}

.chats-pin-message-single-icon {
    color: #3e98e4;
    font-size: 20px;
}

.chats-pin-message-single-content-ctn {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 40px);
}

.chats-pin-message-single-title{
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    height: 20px;
}

.chats-pin-message-single-content {
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.chats-pin-message-single-img {
    max-width: 18px;
    max-height: 18px;
    vertical-align: middle;
    padding-right: 5px;
}

.chats-text-more-ctn {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid var(--a-color);
    border-radius: 6px;
    padding-left: 15px;
    padding-right: 15px;
    height: 24px;
    background-color: transparent;
    outline: none;
}


.chats-text-more-ctn:hover{
    background-color: #e5efff;
}

.chats-text-more-text {
    color: var(--a-color);
    cursor: pointer;
    vertical-align: middle;
}

.chats-text-more-icon {
    vertical-align: middle;
    font-size: 20px;
    color: var(--a-color);
}
.chats-pin-message-more-title-ctn {
    width: 100%;
    min-height: 24px;
    background-color: #f4f5f7;
    box-shadow: 0 1px #e1e4ea;
}

.chats-text-less-ctn {
    display: inline-block;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
    height: 24px;
    font-size: 12px;
    background-color: transparent;
    outline: none;
    border: none;
}

.chats-text-less-text {
    color: var(--a-color);
    cursor: pointer;
    vertical-align: middle;
}

.chats-text-less-icon {
    vertical-align: middle;
    font-size: 20px;
    color: var(--a-color);
}
.chats-pin-message-more-title-ctn {
    width: 100%;
    min-height: 24px;
    background-color: #f4f5f7;
    box-shadow: 0 1px #e1e4ea;
}

.chats-background-img {
    opacity: 0.85;
    image-rendering: pixelated;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #e8eff4;
}

.chats-theme-desktop-name-chat-container {
    min-height: 50px;
    height: 50px;
    border-bottom: var(--control-border);
    position: relative;
    background-color: white;
}

.chats-theme-desktop-title {
    position: absolute;
    top: var(--control-verticle-distance-2);
    left: var(--control-verticle-distance-2);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    max-width: calc(100% - 100px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chats-theme-desktop-content-icon {
    position: absolute;
    right: var(--control-verticle-distance-2);
    top: var(--control-verticle-distance-2);
}

.pin-message-ctn {
    background-color: white;
    position: relative;
}

.pin-message-ctn {
    background-color: white;
    position: relative;
}

.pin-message-more-ctn {
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
}

/* ============================= */

.card-selectmenu {
    display: block !important;
}

.absol-modal {
    background-color: rgba(0, 0, 0, 0.502);
    overflow-y: auto;
    z-index: 1002;
}

.card-edit-stage-table .container-view {
    display: block;
}

/* .table-of-list-board .cd-list-board:not(:last-child) {
    margin-right: 20px;
} */

.table-of-list-board .cd-list-board {
    margin-right: 20px;
}

.card-activities-icon-button-cover {
    display: inline-block;
    padding: 10px 0 10px 0;
    cursor: pointer;
}

.card-activities-icon-button-disabled-cover {
    display: inline-block;
    padding: 10px 0 10px 0;
    cursor: pointer;
}

.card-activities-icon-button-cover:hover {
    background-color: var(--icon-background-cover-hover);
}

.card-activities-filter-button-cover {
    display: inline-block;
    padding: 0 10px 0 10px;
}

.card-activities-filter-button-text {
    line-height: 30px;
    cursor: pointer;
    text-align: center;
}

.card-activities-filter-button-text.choice {
    font-weight: bold;
}

.card-activities-filter-button-text:hover {
    font-weight: bold;
}

.card-activities-filter-button-sidebar {
    height: 5px;
    border-radius: 2px;
    /* background-color: var(--icon-background-cover-hover); */
}

.card-activities-filter-button-sidebar.choice {
    background-color: #06df95;
}

.absol-selectbox-item.card_contact_selected {
    margin-bottom: 10px;
}

.absol-selectbox-item.card_contact_selected:not(:last-child) {
    margin-right: 10px;
}

.card-contact-company-view-text {
    width: calc(100%);
    border: var(--control-border);
    padding: 5px 5px 5px 5px;
    display: inline-block;
    vertical-align: middle;
    min-height: 30px;
}

.card-contact-company-view-icon {
    width: 30px;
    display: inline-block;
    vertical-align: middle;
}

.card-contact-company-container>div {
    margin-bottom: var(--control-verticle-distance-2);
}

/**********************************************************************/

/* //mobile */

.chats-theme-mobile-information-body-container {}

.chats-theme-mobile-information-content {
    background-color: white;
    width: var(--chat-desktop-gallery);
    height: 100%;
    display: none;
    vertical-align: top;
    border-left: var(--control-border);
}

.chats-theme-mobile-message-frame-content {}

.chats-theme-mobile-list-message {
    background-color: white;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.chats-theme-mobile-list-message-container {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-top: var(--control-verticle-distance-2);
    position: relative;
}

.chats-theme-mobile-list-message-content {
    overflow-x: hidden;
    text-align: left;
    width: 100%;
}

.chats-theme-mobile-searchbox-add-group {
    position: relative;
}

.chats-theme-mobile-searchbox-container {
    margin: var(--control-horizontal-distance-2);
}

.chats-theme-mobile-add-group-container {
    position: absolute;
    top: 0;
    right: 20px;
}

.chats-theme-mobile-information-name-container {
    text-align: center;
    height: 50px;
    border-bottom: var(--control-border);
}

.chats-theme-mobile-gallery-title {
    font-size: 20px;
    font-weight: bold;
}

.chats-theme-mobile-title {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    vertical-align: middle;
}

.card-mobile-list {
    width: 100%;
}

.card-mobile-item-ctn {}

.card-mobile-item-title {}

.card-mobile-item-content {}

.card-mobile-label-form-edit-first {
    margin-bottom: 5px;
    font-size: var(--font-size-label);
}

.card-mobile-label-form-edit {
    margin-bottom: 5px;
    margin-top: 15px;
    font-size: var(--font-size-label);
}

/* //mobile */

.card-desktop-label {
    font-size: var(--font-size-label);
    line-height: var(--control-height);
    height: var(--control-height);
}

.bsc-white .as-message-input {
    border-bottom: none;
}

.chat-message-item.is-active {
    background-color: #e8e8e8;
}

.chat-message-item {
    height: 4.3em;
    cursor: pointer;
}

.chat-message-item:not(.is-active):hover {
    background-color: #f2f5fa;
}

.am-application .chat-message-item:hover {
    background-color: white;
}

.chat-message-item-avatar {
    display: inline-block;
    border-radius: 50%;
    background-size: cover;
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
    width: 52px;
    height: 52px;
    border: 1px solid #efefef;
}

.message-avatar-user {
    border-radius: 50%;
    background-size: cover;
    cursor: pointer;
    width: 1.07em;
    height: 1.07px;
}

.chat-message-item-content-ctn {
    display: inline-block;
    padding-left: 10px;
    vertical-align: middle;
    height: 4.3em;
    width: calc(100% - 72px);
    border-bottom: 1px solid #aaaaaa;
    padding: 5px;
    padding-top: 10px;
}

.chat-message-item-title {
    position: relative;
}

.chat-message-item-name {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-title);
    padding-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    white-space: nowrap;
}

.chat-message-item-company-contact {
    font-size: 0.86em;
    padding-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
    white-space: nowrap;
}

.chat-message-item-time {
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 0.86em;
}

.chat-message-item-message {
    position: relative;
    white-space: nowrap;
}

.chat-message-item-message-text {
    font-size: 0.86em;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    color: blue;
}

.am-application .chat-message-item-message-text {
    max-width: calc(100% - 70px);
}

.chat-message-item-cmd {
    position: absolute;
    right: 5px;
    top: -10px;
}

.chats-theme-desktop-message-frameview {
    width: 100%;
    height: 100%;
}

.chats-theme-desktop-message-frame-empty {
    text-align: center;
    padding-top: 300px;
    font-size: x-large;
}

.chats-theme-desktop-message-frame {
    /*TODO*/
}

.chat-message-item-new-noseen {
    display: inline-block;
}

.chat-message-item-cmd-menu {
    display: inline-block;
}

.chat-button-number {
    min-width: 16px;
    padding-left: 5px;
    padding-right: 5px;
    height: 16px;
    background: red;
    border-radius: 8px;
    color: white;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
}

.card-chatbox-line-seen {
    margin: 10px;
    color: red;
    text-align: center;
}

.chat-unreadmessage-line {
    display: block;
    text-align: center;
    position: relative;

}

.chat-unreadmessage-line-text {
    color: #aaaaaa;
}

.chat-unreadmessage-line-left,
.chat-unreadmessage-line-right {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 0.5px);
    border-bottom: 1px solid #d6d6d6;
}






.main-tabview {
    width: 100vw;
    height: var(--body-height);
}

.card-activity-view-container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.card-activity-view-container:not(:last-child) {
    margin-bottom: 20px;
}

.card-activity-view-image {
    display: flex;
    flex-shrink: 0;
    width: 52px;
    margin-right: 24px;
}

.card-activity-view-image-mobile {
    display: flex;
    flex-shrink: 0;
    width: 52px;
}

.card-activity-view-content-container {
    border: var(--control-border);
    background-color: #ffffff;
    padding: 5px;
    flex-grow: 2;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 40px;
}

.card-activity-view-content-container-mobile {
    flex-grow: 2;
    display: flex;
    overflow: hidden;
    min-height: 40px;
}

.card-activity-view-content {
    margin-top: auto;
    margin-bottom: auto;
}

.card-activity-view-image>img {
    width: 52px;
    height: 40px;
    cursor: pointer;
}

.card-activity-view-checklist-item {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.card-activity-view-checklist-item:not(:first-child) {
    margin-top: 10px;
}

.card-activity-view-checklist-item-checkbox {
    display: flex;
    flex-shrink: 0;
}

.card-activity-view-checklist-item-content {
    padding-left: 5px;
    flex-grow: 2;
    display: flex;
    overflow: hidden;
    position: relative;
}

.card-activity-view-checklist-item-content-text {
    margin-top: auto;
    margin-bottom: auto;
}


.main-frame-view>div>div>.absol-single-page-scroller {
    padding-right: var(--tab-padding-right);
}


.card-icon-edit-message {
    color: var(--icon-color);
    font-size: 16px;
}

.card-icon-failed-message {
    color: red;
    font-size: 1.14px;
}

.card-icon-emoji-message {
    font-size: 1.14em;
    color: var(--icon-color);
    cursor: pointer;
}

.card-icon-edit-message-cover {
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}

.card-icon-emoji-message-cover{
    padding-right: 5px;
    padding-left: 5px;
}

.am-mobile-theme .main-frame-view>.absol-frame-view-frame-container {
    left: 0;
}

.am-mobile-theme .main-frame-view>div>div>.absol-single-page-scroller {
    padding-right: 0;
}

.card-mobile-content {
    padding: 20px;
    overflow-y: auto;
}

.am-header-bar+.card-mobile-content {
    height: calc(100% - 3em);
}

.am-header-bar.am-light-weight+.card-mobile-content{
    height: calc(100% - 30px);
}

.am-header-bar+.card-mobile-content-no-padding {
    height: calc(100% - 3em);
}

.card-mobile-content-no-padding{
    overflow-y: auto;
}

.am-header-bar.am-light-weight+.card-mobile-content-no-padding{
    height: calc(100% - 30px);
}
.card-mobile-content-has-search {
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 3em - var(--control-verticle-distance-2) - var(--control-height));
}

.bsc-white .am-header-bar {
    background-color: var(--header-bar-background);
    color: var(--header-bar-color);
}

.bsc-white .am-header-bar-title,
.bsc-white .am-header-bar-left-btn,
.bsc-white button.am-header-bar-command,
.bsc-white .am-header-bar .absol-search-text-input,
.bsc-white .am-header-bar-quickmenu-btn .am-header-bar-quickmenu-btn-circle {
    color: var(--header-bar-color);
}

.bsc-white .am-header-bar .absol-search-text-input {
    /* border-bottom: 1px solid var(--header-bar-color); */
}


.main-tabview>div>div>div>.button-panel-header {
    padding-left: var(--tab-padding-left);
    padding-right: var(--tab-padding-right);
}

.main-tabview>.absol-tabview-container>.absol-tab-frame>.absol-single-page {
    height: 100%;
}

.main-tabview>.absol-tabview-container>.absol-tab-frame>.absol-single-page>.absol-single-page-scroller>.absol-single-page-scroller-viewport {
    padding-left: var(--tab-padding-left);
    padding-right: var(--tab-padding-right);
}

.main-tabview>div>div>div>.button-panel-header {
    padding-left: var(--tab-padding-left);
    padding-right: var(--tab-padding-right);
}

.main-tabview>.absol-tabview-container>.absol-tab-frame>.absol-single-page {
    height: 100%;
}

.main-tabview>.absol-tabview-container>.absol-tab-frame>.absol-single-page>.absol-single-page-scroller>.absol-single-page-scroller-viewport {
    padding-left: var(--tab-padding-left);
    padding-right: var(--tab-padding-right);
}

.main-tabview>div>div>div>.button-panel-header {
    padding-left: var(--tab-padding-left);
    padding-right: var(--tab-padding-right);
    right: 17px;
}

.card-desktop-profile-avatar {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    cursor: pointer
}

.am-header-bar.am-small-title .am-header-bar-title {
    font-size: 1em;
}

.card-mobile-image-service-init {
    max-height: 20%;
    position: absolute;
    width: 60%;
    top: 40%;
    left: 20%;
}

.card-mobile-image-company-init {
    max-height: 15%;
    width: 40%;
    left: 30%;
    bottom: 10%;
    position: absolute;
}

.card-manage-group {
    display: inline-block;
    min-width: 500px;
    background-color: white;
}

.card-manage-group-header {
    position: relative;
    padding-top: 25px;
    text-align: center;
}

.card-manage-group-header::before {
    /*background*/
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 20px;
    background: linear-gradient(90deg,
            rgba(0, 188, 242, 1) 0%,
            rgba(0, 120, 212, 1) 100%);
}

.card-manage-group-avatar-block {
    display: inline-block;
    position: relative;
    backgroud-color: gray;
}

.card-manage-group-avatar-image {
    height: 120px;
    width: 120px;
    border-radius: 50%;
    background-color: rgb(241, 241, 241);
    background-size: cover;
}

.card-manage-group-avatar-status-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: solid 2px white;
    position: absolute;
    bottom: 9px;
    right: 9px;
    display: none;
    box-sizing: border-box;
}

.card-manage-group-avatar-status-dot.online {
    display: block;
    background-color: rgba(112, 224, 131, 0.9);
}

.card-manage-group-close-btn-ctn {
    position: absolute;
    left: 20px;
    top: 20px;
}

.card-transparent-btn {
    outline: none;
    color: rgb(102, 102, 102);
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
}

.card-transparent-btn:hover {
    color: black;
}

.card-transparent-btn:active {
    color: rgb(193, 193, 193);
}

.card-transparent-btn.white {
    color: white;
}

.card-transparent-btn.white:hover {
    color: rgb(187, 221, 231);
}

.card-transparent-btn.white:active {
    color: rgb(37, 178, 222);
}

.card-manage-group .card-transparent-btn {
    height: 30px;
    width: 30px;
}

.card-manage-group .card-transparent-btn span {
    font-size: 1.5em;
}

.card-manage-group-body {
    height: calc(100% - 150px);
    overflow: auto;
}

.am-mobile-theme .card-manage-group-body{
    height: calc(100% - 160px);
    max-height: calc(100% - 160px);
}

.card-manage-group-name-ctn {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.card-manage-group-name {
    font-size: 1.125em;
    font-weight: bold;
    white-space: nowrap;
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
}

.card-manage-group-desc {
    font-size: 0.875em;
    font-weight: bold;
    color: rgb(138, 141, 145);
    line-height: 2;
}

.card-manage-group-edit-btn-ctn {
    position: absolute;
    right: 10px;
    top: 20px;
}

.card-manage-group-edit-btn {
    width: 40px;
    height: 40px;
    /*   color:  */
}

.card-manage-group-name-input {
    width: 80%;
    border: 0;
    border-bottom: 1px solid #d6d6d6;
    height: 30px;
    text-align: center;
    font-size: 1.125em;
}

.card-manage-group-demarcation-line {
    width: calc(100% - var(--tab-padding-left) - var(--tab-padding-left));
    border-top: 1px solid #d6d6d6;
    margin: auto;
}

.card-manage-group-participants-ctn {
    padding: var(--control-horizontal-distance-2);
}

.card-manage-group-participants-title {
    font-weight: bold;
    padding-bottom: var(--control-verticle-distance-2);
}

.card-manage-group-participants-content {}

.card-manage-group-participants-member {
    padding: var(--control-verticle-distance-1);
    cursor: pointer;
    position: relative;
}

.card-manage-group-participants-member:hover {
    background-color: #efefef;
}

.card-manage-group-participants-member-avatar-ctn {
    display: inline-block;
    vertical-align: middle;
    padding-right: var(--control-horizontal-distance-2);
}

.card-manage-group-participants-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
}

.card-manage-group-participants-member-name {
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
}

.card-manage-group-participants-member-remove {
    height: 30px;
    top: 10px;
    right: 10px;
    position: absolute;
}

.card-manage-group-frameview {
    height: 700px;
    width: 500px;
    max-height: calc(100vh - 100px);
}

.card-chat-member {
    display: inline-block;
    min-width: 500px;
    background-color: white;
}

.card-chat-member-header {
    position: relative;
    padding-top: 25px;
    text-align: center;
}

.card-chat-member-header::before {
    /*background*/
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 20px;
    background: linear-gradient(90deg,
            rgba(0, 188, 242, 1) 0%,
            rgba(0, 120, 212, 1) 100%);
}

.card-chat-member .card-transparent-btn {
    height: 30px;
    width: 30px;
}

.card-chat-member-close-btn-ctn {
    position: absolute;
    left: 20px;
    top: 20px;
}

.card-chat-member .card-transparent-btn span {
    font-size: 1.5em;
}

.card-chat-member-body {
    height: calc(700px - 165px);
    max-height: calc(100vh - 100px - 165px);
    overflow: auto;
    padding-left: var(--control-horizontal-distance-2);
    padding-right: var(--control-horizontal-distance-2);
}

.card-chat-member-title-ctn {
    position: relative;
    padding-top: 20px;
    height: 80px;
    text-align: center;
}

.card-chat-member-title {
    font-size: 1.125em;
    font-weight: bold;
}

.card-chat-members-group-select {
    text-align: left;
    display: block;
    width: 100%;
    margin-top: var(--control-horizontal-distance-1);
    margin-bottom: var(--control-horizontal-distance-2);
}

.table-of-list-board .cd-list-board-body {
    max-height: calc(100vh - 210px);
}

.card-mobile-content .table-of-list-board .cd-list-board-body {
    max-height: calc(100% - 160px);
}

.card-report-filter-icon {
    font-size: 20px;
    color: #7a7a7a;
    cursor: pointer;
}


.card-report-filter-icon:hover {
    color: black;
}

.card-report-filter-icon-active {
    font-size: 20px;
    color: #4dd7fa;
    cursor: pointer;
}

.card-report-filter-icon-active:hover {
    color: #1b85a0;
}

.bsc-white .cke_contents {
    /* height: 500px !important; */
}

.cke_button_label.cke_button__attach_activity_label {
     display: inline;
 }

.bsc-white .card-knowledge-description-view .cke_contents {
    /* width: 700px; */
}

.bsc-white .card-knowledge-description-view .cke_reset_all {
    display: none;
}

.cd-task-card-title {
    line-height: 20px !important;
    padding-bottom: 10px;
}

.bsc-white .am-tiny-profile-block-text-ctn {
    padding-left: 10px;
}

.am-application .card-chatbox-message-me {
    max-width: 70vw;
}

.am-application .card-chatbox-message-me-img {
    max-width: 50vw;
}

.am-application .card-chatbox-message-cover {
    max-width: 100%;
}

.am-application .card-chatbox-message-other {
    max-width: 60vw;
}

.am-application .card-chatbox-message-other-img {
    max-width: 50vw;
}

.am-application .card-manage-group {
    min-width: 100%;
}

.am-application .card-chat-member {
    min-width: 100%;
}

.card-edit-company-ctn {
    width: 100%;
    height: 100%;
    white-space: nowrap;
}

.card-edit-company-block-first {
    display: inline-block;
    vertical-align: top;
    padding-right: var(--control-horizontal-distance-2);
    padding-bottom: var(--control-horizontal-distance-2);
}

.card-edit-company-block-maps {
    display: inline-block;
}

.card-edit-company-block-maps-child {
    height: 100%;
    width: 100%;
}

.card-edit-company-block-maps-child-ctn {
    border: var(--control-border);
    height: 60%;
    width: 100%;
}

.card-edit-company-block-maps-child-ctn-mobile {
    height: 50vh;
    border: var(--control-border);
    margin-top: var(--control-verticle-distance-2);
}

body:not(.am-mobile-theme) .card-edit-company-block-contact {
    padding-top: var(--control-verticle-distance-2);
}

body.am-mobile-theme .card-edit-company-block-contact {
    padding-bottom: var(--control-verticle-distance-2);
}

.bsc-white .cd-work-calendar-date .cd-today {
    color: black;
}

.bsc-white .cd-work-calendar-date {
    margin-left: 0;
}

.card-icon-loading-message {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-bar-striped,
.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress-bar.active,
.progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.bsc-white .absol-single-page-header {
    z-index: 88;
    background-color: white;
}

.card-icon-manage-member-chat {
    color: #7a7a7a;
    font-size: 30px;
    cursor: pointer;
}

.card-button-icons {
    font-size: var(--icon-fontsize);
    color: var(--icon-color);
    cursor: pointer;
}

.card-button-icons:hover {
    font-size: var(--icon-fontsize);
    color: black;
    cursor: pointer;
}

.card-contact-company-view-text.view-only {
    width: calc(100%);
    border: var(--control-border);
    padding: 5px 5px 5px 5px;
    display: inline-block;
    vertical-align: middle;
    min-height: 30px;
}

.card-manage-group-body-delete-leave {
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
    padding-bottom: var(--control-verticle-distance-2);
    padding-top: var(--control-verticle-distance-2);
    cursor: pointer;
}

.card-manage-group-body-delete-leave:hover{
    background-color: #efefef;
}

.card-modal-mobile-ctn {
    width: calc(100vw - 80px);
    max-width: 500px;
    min-height: 300px;
    background-color: white;
    margin: var(--modal-margin-top) auto;
    box-shadow: 2px 2px 2px 0px #908787;
    border-radius: var(--modal-boder-radius);
}

.card-modal-mobile-header-ctn {
    position: relative;
    height: 44px;
}

.card-modal-mobile-header-title {
    padding: 10px;
    line-height: 24px;
    font-weight: bold;
    padding-left: 20px;
}

.card-modal-mobile-close-btn {
    position: absolute;
    width: 44px;
    top: 0;
    right: 0;
    padding: 10px;
}

.card-modal-mobile-close-icon {
    font-size: 24px;
    color: #7a7a7a;
}

.card-modal-mobile-body-content-ctn {
    max-height: calc(100vh - 196px);
    overflow: auto;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

.card-modal-mobile-title-btn {
    position: absolute;
    height: 44px;
    width: 100%;
    top: 0;
    left: 0;
    padding: 10px;
}

body.am-mobile-theme .stageTable table.sortTable tbody td {
    border: unset !important;
    background-color: white !important;
}

body.am-mobile-theme .stageTable table.sortTable {
    border: unset !important;
    background-color: unset !important;
    border-spacing: unset !important;
    border-collapse: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
}

body.am-mobile-theme .stageTable {
    height: unset !important;
}

body.am-mobile-theme.bsc-white .stageTable table.sortTable {
    max-width: unset;
}

.am-application .sortTable thead {
    display: none;
}

.am-application .am-header-bar {
    position: relative;
    z-index: 88;
}

.am-application table.sortTable th,
.am-application table.sortTable td,
.am-application table.sortTableClone th,
.am-application table.sortTableClone td {
    padding: 0;
    border: none;
}

.am-application .sortTable-cell-view {
    border-bottom: 1px solid #aaaaaa;
}

.am-application table.sortTable td:last-child {
    padding-right: 0;
}

.am-application table.sortTable td:first-child {
    padding-left: 0;
}

.am-application table.sortTable,
table.sortTableClone {
    margin: 0;
}

.bsc-white table.sortTable,
table.sortTableClone {
    font-size: var(--font-size);
}

.am-header-bar.am-search-mode .am-header-bar-left-btn:not(.am-header-bar-disable-search-btn),
.am-header-bar.am-search-mode .am-header-bar-title-ctn,
.am-header-bar.am-search-mode .am-header-bar-right,
.am-header-bar:not(.am-search-mode) .absol-search-text-input,
.am-header-bar:not(.am-search-mode) .am-header-bar-left-btn.am-header-bar-disable-search-btn {
    display: none;
}

.am-header-bar .absol-search-text-input {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 3em - 10px);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.am-header-bar .absol-search-text-input .absol-search-text-input-container {
    right: 10px;
}

.am-header-bar .absol-search-text-input .absol-search-text-button-container .find {
    display: none;
}

.card-tag-name-ctn {
    border: var(--control-border);
    min-height: 30px;
    border-radius: 4px;
}

.card-tag-name-list-value {
    display: inline-block;
}

.card-tag-name-input {
    display: inline-block;
    min-width: 3em;
    min-height: 30px;
    line-height: 30px;
    outline: none;
}

.tag-name-input-value {
    margin: 6px;
}

.card-tag-name-ctn.as-disabled,
.card-tag-name-ctn.as-disabled * {
    pointer-events: none;
    user-select: none;
}

.card-tag-name-ctn.as-disabled {
    background-color: var(--disabled-backgroudcolor);
}

.card-tag-name-ctn.as-disabled .tag-name-input-value {
    opacity: 0.7;
}

.card-tag-name-ctn.as-disabled .card-tag-name-input {
    display: none;
}

.card-tag-name-items-ctn {
    background-color: white;
    border: 1px solid #aaaaaa;
}

.card-tag-name-item {
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}

.card-tag-name-item:hover {
    background-color: #d6d6d6;
}

.card-tag-name-item.as-hover {
    background-color: #d6d6d6;
}

.bsc-white .cke_contents {
    min-height: 300px !important;
}

.bsc-white:not(.am-mobile-theme) .card-send-mail-content .cke_chrome.cke_reset {
    /* max-width: 70vw !important; */
    /* width: 500px !important; */
}

.bsc-white:not(.am-mobile-theme) .card-signature-ctn .cke_contents {
    /* max-width: 70vw !important; */
    /* width: 500px !important; */
}

.bsc-white .card-signature-ctn .cke_contents {
    /* height: 200px !important; */
}

.bsc-white .card-activities-content-ckeditor .cke_contents {
    /* height: 300px !important; */
}

.bsc-white:not(.am-mobile-theme) .card-activities-content-ckeditor .cke_chrome.cke_reset {
    /* max-width: 70vw !important; */
    /* width: 400px !important; */
}

.card-radio-button-extend {
    margin-right: var(--control-horizontal-distance-1);
}

.card-radio-button-extend-elt {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.card-table-init {
    height: 100%;
}

/* .header-of-board {
    background-color: unset;
}*/

.card-main-menu-ctn {
    position: relative;
    background-color: var(--menu-background-color);
    z-index: 8000;
}


.card-main-menu-ctn .absol-hmenu-button,
.card-main-menu-ctn .absol-vmenu-button {
    color: var(--menu-font-color);
}

.card-main-menu-ctn .absol-vmenu-button:hover,
.card-main-menu-ctn .absol-vmenu .absol-vmenu-button-hover {
    background-color: var(--menu-background-hover);
}

.card-main-menu-ctn .as-v-root-menu .absol-dropright-content {
    background-color: var(--menu-background-color);
}


.card-main-menu-ctn .absol-vmenu-button {
    height: var(--main-menu-item-height);
}

.card-main-menu-ctn .absol-dropright:not(.absol-drop-hidden)>.absol-vmenu-button .absol-vmenu-button-text {
    color: white;
    text-shadow: 0.5px 0 0 currentColor;
}

.card-main-body {
    padding-top: 10px;
    flex-grow: 1;
    box-sizing: border-box;
}

.bsc-logo-ctn {
    height: var(--header-height);
    text-align: center;
    background-color: var(--logo-background);
}

.bsc-logo-ctn::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.bsc-logo-ctn img {
    max-height: calc(var(--header-height) - 10px);
    display: inline-block;
    vertical-align: middle;
}

.card-main-body-ctn {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-image: var(--backgroud-image-body); */
    display: flex;
}

.card-main-body-ctn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--header-background-color);
}


/** Giao diện mới **/


/**************** TABVIEW ************************/
.main-tabview {
    width: 100%;
    height: 100%;
}


.main-frame-view>div>div>.absol-single-page-scroller {
    /*padding-right: var(--tab-padding-right);*/
}

/* .bsc-white .absol-single-page-scroller {
    height: unset;
} */


.main-tabview>.absol-tabview-container {}

.bsc-white .main-tabview>.absol-tabview-container {
    top: calc(var(--header-height) - 10px);
}

.bsc-white .main-tabview>.absol-tabbar {
    height: calc(var(--header-height) - 10px);
    border-bottom: none !important;
}

.bsc-white .main-tabview>.absol-tabbar .absol-tabbar-button {
    height: calc(var(--header-height) - 10px);
    border-radius: 4px 4px 0 0;
    border: none;
    background-color: var(--tab-button-background-color);
    color: var(--tab-font-color);
}

.bsc-white .main-tabview>.absol-tabbar .absol-tabbar-button:hover {
    background-color: var(--tab-button-background-color-hover);
}

.bsc-white .main-tabview>.absol-tabbar .absol-tabbar-button:hover:not(.absol-tabbar-button-active) {
    color: var(--tab-button-font-color-hover);
}

.bsc-white .main-tabview>.absol-tabbar .absol-tabbar-button.absol-tabbar-button-active {
    background-color: var(--tab-active-background-color);
    color: var(--tab-active-font-color);
}

.bsc-white .main-tabview>.absol-tabbar .absol-tabbar-button.absol-tabbar-button-active .absol-tabbar-button-text {
    text-shadow: 1px 0 0 currentColor;
    padding-right: 2px;/*để text-shadown không  bị cắt*/
}

.bsc-white .main-tabview>.absol-tabbar .absol-tabbar-button-close {
    border-radius: 50%;
    width: 1em;
    height: 1em;
}

.bsc-white:not(.am-mobile-theme) .main-frame-view>.absol-frame-view-frame-container>.absol-single-page>.absol-single-page-scroller>.absol-single-page-scroller-viewport {
    padding-left: var(--tab-padding-left);
}

.bsc-white:not(.am-mobile-theme) .main-frame-view>.absol-frame-view-frame-container>.absol-single-page.cd-page-not-padding-left>.absol-single-page-scroller>.absol-single-page-scroller-viewport {
    padding-left: 0;
}

.bsc-white:not(.am-mobile-theme) .main-frame-view>.absol-frame-view-frame-container>.absol-single-page.cd-page-not-padding-right>.absol-single-page-scroller{
    padding-right: 0;
}

.absol-single-page-header.button-panel-header,
.absol-single-page-header>.button-panel-header {
    padding-left: var(--tab-padding-left);
    padding-right: var(--tab-padding-right);
}

.mainFrm,
.bodyFrm {
    width: 100%;
    height: 100%;
}

.cd-board-manager-body {
    overflow: visible !important;
}

.cd-board-manager-body>.cd-board-group {
    margin: unset !important;
    margin-right: 20px !important;
}

.cd-board-manager:not(.cd-board-mode) .cd-board-manager-add-group {
    margin: unset;
    margin-right: 20px;
}

.bsc-white .main-tabview>.absol-tabbar .absol-tabbar-button-icon-container>span {
    font-size: var(--icon-close-table-font-size);
}

.bsc-white .main-tabview>.absol-tabbar .absol-hscroller-viewport {
    padding-left: 10px;
}


/*** Board Manager  **************/

.bsc-white:not(.am-mobile-theme) .cd-list-board-body,
.bsc-white:not(.am-mobile-theme) .cd-board-group-body {
    max-height: calc(100vh - 220px);
}

.bsc-white.am-mobile-theme .cd-list-board-body,
.bsc-white.am-mobile-theme .cd-board-group-body {
    max-height: calc(100vh - 260px);
}

.card-activity-chart-ctn {
    display: inline-block;
    margin: var(--control-verticle-distance-1);
    border: var(--control-border);
    padding-left: var(--control-verticle-distance-1);
    padding-right: var(--control-verticle-distance-1);
    padding-bottom: var(--control-verticle-distance-1);
    text-align: center;
    vertical-align: top;
    position: relative;
}
.card-activity-chart-quickmenu-ctn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1
}

.card-checkbox-privilegde {
    margin-right: var(--control-horizontal-distance-2);
    margin-bottom: var(--control-verticle-distance-2);
}

.tl-list.tl-archived .tl-list-add-item-btn-ctn{
    display: none;
}

.card-widget-chart-ctn .db-widget-body{
    text-align: center;
}

.card-time-send-mail-tag{
    position: absolute;
    right: 10px;
    color: #5f6368;
    font-size: 12px
}

table.sortTable.reportTable td{
    background-color: white !important;
}

table.sortTable.reportTable tr.parent:hover td{
    background-color: white !important;
}

table.sortTable.reportTable th, table.sortTable.reportTable td, table.sortTableClone th, table.sortTableClone td {
    border-left: 1px solid #ddd;
}

.card-undo-navigation-items{
    height: 40px;
    line-height: 40px;
    padding-left: 5px;
    border-top: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    cursor: pointer;
}

.card-undo-navigation-items:last-child{
    border-bottom: 1px solid #ebebeb;
}

.chats-custom-quickmenu-mobile .absol-vmenu-button-ext-icon-container{
    display: none;
    margin-right: 0;
}

.chats-custom-quickmenu-mobile .absol-vmenu-button {
    width: 100%;
    padding-left: 20px;
}

.chats-custom-quickmenu-mobile .absol-vmenu-button-key {
    display: none;
}

.chats-custom-quickmenu-mobile .absol-vmenu-button-text {
    margin-right: 0 !important;
}

.hr-files-block-ctn {
    margin: var(--control-verticle-distance-1);
    border: 3px solid transparent;
    background-color: #f7f8f9;
    width: 150px;
    height: 150px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.hr-files-block-ctn.selected{
    background-color: #c9f1fd;
}

.hr-files-block-img {
    max-height: 70px;
    max-width: 140px;
}

.hr-files-block-desc {
    padding: var(--control-verticle-distance-1);
}

.hr-files-block-img-ctn {
    text-align: center;
    padding: var(--control-verticle-distance-1);
}

.hr-files-block-desc-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    line-height: 30px;
}

.hr-files-block-desc-time {
    font-size: 12px;
    max-width: 140px;
}

.hr-td-disabled {
    background-color: var(--disabled-backgroudcolor);
}

.as-dv-exp-tree:not(.as-has-radio) > .absol-exp-node > .absol-radio-button {
    display: none;
}

.hr-function-simple-code-command-block-ctn {
    border: var(--control-border);
    padding: var(--control-horizontal-distance-1);
    border-radius: 4px;
    margin-top: var(--control-horizontal-distance-1);
    margin-bottom: var(--control-horizontal-distance-1);
    position: relative;
    min-height: var(--control-height);
}

.command-block-quick-icon {
    position: absolute;
    top: var(--control-verticle-distance-1);
    right: var(--control-horizontal-distance-1);
}

.hr-function-simple-code-command-line {
    min-height: var(--control-height);
    line-height: var(--control-height);
}

.hr-function-input-variable-exp-ctn {
    min-width: 300px;
    border: var(--control-border);
    height: var(--control-height);
    line-height: var(--control-height);
    padding-left: var(--control-horizontal-distance-1);
    padding-right: var(--control-horizontal-distance-1);
}

.hr-function-variable-view {
    color: red;
}

.hr-employee-info-company-block{
    display: inline-block;
    padding: var(--control-horizontal-distance-1);
    vertical-align: top;
}

.absol-static-tabbar.bold .absol-static-tabbar-button>span {
    font-size: inherit;
}

.absol-static-tabbar.bold .absol-static-tabbar-button {
    color: #1464f6;
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    width: auto;
    padding: 0 20px;
}

.absol-static-tabbar.bold .absol-static-tabbar-button.active{
    text-shadow: 1px 0 0 currentColor;
    text-decoration: underline;
}

.absol-static-tabbar.bold .absol-static-tabbar-hline{
    display: none;
}

.absol-static-tabbar.bold {
    border-top: var(--control-border);
    border-bottom: var(--control-border);
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: nowrap;
}

.table-list-view-ctn{
    cursor: pointer;
}

.table-list-view-ctn td{
    height: 40px;
    padding: 5px;
}

.table-list-view-ctn	tr:hover {
    background-color: var(--table-light-row-background-color);
}

.table-list-view-amount{
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
}

.table-list-view-status{
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.table-list-view-status.over-due{
    color: #9514bf;
}

.table-list-view-status.draf{
    color: #5d4037;
}

.table-list-view-status.waiting-approval{
    color: #ed7d31;
}

.table-list-view-status.approved{
    color: #37780a;
}

.table-list-view-status.deny{
    color: #d30903;
}

.table-view-status{
    font-weight: bold;
    cursor: pointer;
}

.table-view-status.over-due{
    color: #9514bf;
}

.table-view-status.request{
    color: #039be5;
}

.table-view-status.draf{
    color: #5d4037;
}

.table-view-status.waiting-approval{
    color: #ed7d31;
}

.table-view-status.approved{
    color: #37780a;
}

.table-view-status.deny{
    color: #d30903;
}

.table-view-status.canceled{
    color: #d30903;
}

.table-view-status.new{
    color: #039be5;
}

.table-list-view-title-ctn{
    position: relative;
    width: 100%;
}

.table-list-view-title {
    white-space: nowrap;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40px;
}

.table-list-view-title:hover{
    color: var(--a-color);
}

.hr-icon-approval{
    font-size: var(--icon-fontsize);
    color: #489b0f;
}

.hr-icon-deny{
    font-size: var(--icon-fontsize);
    color: #f23c36;
}

.hr-status-view-btn {
    /* border: var(--control-border);
    padding: var(--control-horizontal-distance-1);
    height: var(--control-height);
    border-radius: 4px;
    min-width: var(--button-min-width);
    text-align: center; */
    font-weight: bold;
}

.hr-status-view-btn {
    display: inline-block;
    vertical-align: middle;
}

.hr-status-view-btn.draf{
    /* background-color: #fefce0; */
    color: #5d4037;
}

.hr-status-view-btn.waiting-approval{
    /* background-color: #e7ef88; */
    color: #dc7433;
}

.hr-status-view-btn.over-due{
    /* background-color: #dacafb; */
    color: #9514bf;
}

.hr-status-view-btn.approved{
    /* background-color: #aedd94; */
    color: #37780a;
}

.hr-status-view-btn.new{
    /* background-color: #aedd94; */
    color: #039be5;
}

.hr-status-view-btn.deny{
    /* background-color: #fcdcda; */
    color: #d30903;
}

.hr-status-view-btn.request-cancel{
    /* background-color: #fcdcda; */
    color: #d30903;
}

.hr-status-view-btn.canceled{
    /* background-color: #fcdcda; */
    color: #d30903;
}

.hr-table-cell-link{
    cursor: pointer;
}

.hr-table-cell-link:hover{
    color: var(--a-color);
}

.hr-table-cell-link.selected{
    background-color: var(--table-light-row-background-color);
}

.hr-table-header-document-title{
    height: var(--control-height);
    border: var(--button-border);
    padding: var(--control-horizontal-distance-1);
    border-radius: 4px;
    background-color: var(--disabled-backgroudcolor);
    white-space: nowrap;
}

/* ==========================================message===================================== */

.card-chat-box-messages-container {
    position: absolute;
    width: 100%;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.4);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.card-chat-box-messages-ctn {
    flex-grow: 1;
    position: relative;
}

.card-chat-box-messages {
    overflow-x: hidden;
    text-align: left;
    width: 100%;
}

.card-chat-box-messages-dask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.card-chat-box-text-input-container {
    position: relative;
    text-align: left;
    padding-bottom: 5px;
    background-color: white;
}

.am-mobile-theme .card-chat-box-text-input-container{
    bottom: 0;
}


.card-chat-box-text-input {
    min-height: 40px;
    max-height: 80px;
    overflow-y: auto;
    overflow-x: visible;
    text-align: left;
}

/*style dùng cho text trong chat*/
.card-chat-box canvas.as-emoji {
    display: inline-block;
    width: 60px;
    height: 60px;
}

.card-chat-box img.as-emoji {
    display: inline;
    vertical-align: middle;
}

.card-chat-box img.as-emoji:not(:last-child) {
    margin-right: 0.2em;
}

.card-chatbox-message-line {
    display: block;
    white-space: nowrap;
}

.chats-message-emoji-list-ctn {
    height: 30px;
    display: block;
}

.card-chatbox-message-me .chats-message-emoji-list-ctn, .card-chatbox-message-other .chats-message-emoji-list-ctn{
    margin-bottom: -25px;
}

.card-chatbox-message-me-img .chats-message-emoji-list-ctn, .card-chatbox-message-other-img .chats-message-emoji-list-ctn{
    margin-bottom: -15px;
    margin-top: -15px;
}

.card-chatbox-message-me, .card-chatbox-message-me-img, .card-chatbox-message-other, .card-chatbox-message-other-img {
    position: relative;
}

.card-chatbox-extra-ctn {
    vertical-align: top;
    display: inline-block;
    padding-top: 5px;
}

.card-chatbox-message-me {
    border: 1px solid #ddd;
    padding: 10px;
    margin-right: 5px;
    margin-top: 2px;
    max-width: 70%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    display: inline-block;
    background-color: #DBF4FD;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    vertical-align: middle;
}


.card-chatbox-message-me.card-anim-scale,
.card-chatbox-message-me-img.card-anim-scale,
.card-chatbox-message-other.card-anim-scale,
.card-chatbox-message-other-img.card-anim-scale {
    animation-name: message-scale;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes message-scale {
    0% {
        transform: scale(1,1);
    }
    30% {
        transform: scale(1.1,1.1);
    }
    50% {
        transform: scale(1,1);
    }
    80% {
        transform: scale(1.1,1.1);
    }
    100% {
        transform: scale(1,1);
    }


}

.card-chatbox-message-me-edit {
    display: inline-block;
    font-size: var(--icon-fontsize);
    color: var(--icon-color);
}

.card-chatbox-message-me-img {
    border: 1px solid #ddd;
    margin-right: 5px;
    padding: 1px;
    margin-top: 2px;
    max-width: 50%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    display: inline-block;
    background-color: #DBF4FD;
    vertical-align: middle;
}

.card-chatbox-message-line:nth-child(2) .card-chatbox-message-me,
.card-chatbox-message-line:nth-child(2) .card-chatbox-message-me-img {
    border-top-right-radius: 12px;
}

.card-chatbox-message-line:nth-child(2) .card-chatbox-message-me-img>img {
    border-top-right-radius: 12px;
}

.card-chatbox-message-me-img>img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}


.card-chatbox-message-other {
    padding: 10px;
    margin-top: 1px;
    margin-left: 5px;
    border: 1px solid #ddd;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    display: inline-block;
    background-color: rgb(241, 240, 240);
    word-wrap: break-word;
    white-space: normal;
    vertical-align: middle;
}

.card-chatbox-message-line:last-child .card-chatbox-message-other,
.card-chatbox-message-line:last-child .card-chatbox-message-other-img {
    border-bottom-left-radius: 12px;
}

.card-chatbox-message-line:last-child .card-chatbox-message-other-img>img {
    border-bottom-left-radius: 12px;
}

.card-chatbox-message-other-img>img {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.card-chatbox-message-other-img {
    max-width: 50%;
    margin-top: 2px;
    padding: 1px;
    margin-left: 5px;
    border: 1px solid #ddd;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    display: inline-block;
    background-color: rgb(241, 240, 240);
    vertical-align: middle;
}

.card-chatbox-groupmess-me {
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
}

.card-chatbox-groupmess-other {
    text-align: left;
}

.card-chatbox-groupmess-me-note {
    font-size: 0.86em;
    padding-right: 5px;
}

.card-chatbox-groupmess-other-note {
    font-size: 0.86em;
    padding-left: 5px;
}

.card-chatbox-message-cover {
    max-width: 70%;
    padding-top: 10px;
    white-space: nowrap;
    padding-bottom: 10px;
}

.card-chat-box.as-no-scroller .card-chat-box-messages-container{
	position: relative;
  	left: unset;
  	right: unset;
    top: unset;
  	bottom: unset;
}

.card-chat-box.as-no-scroller .card-chat-box-scroll-last-ctn {
    display: none;
    visibility: hidden;
}

.hr_noti-center-read-all{
    text-align: right;
    color: var(--a-color);
    line-height: 30px;
    padding-right: 10px;
    text-decoration: underline;
}

.kv-overview-widget-page{
    overflow: auto;
}

.kv-overview-widget-page>iframe{
    width: 100% !important;
    height: calc(100% - 3px) !important;/*I don't know why*/
    margin:0;

}

.kv-overview-widget-page>div{/*each fragment*/
 width: 100%;
 height: 100%;
}


.kv-overview-widget-page>div>.absol-frame-view>div>div {
    overflow: auto;
}

.kv-overview-widget-page .card-manage-group,
.kv-overview-widget-page .card-chat-member
{
 min-width: unset;
}

.kv-overview-widget-page .card-chat-member-body {
    max-height: unset;
    min-height: calc(500px - 165px);
    height: unset;
}

.absol-static-tabbar.bold .absol-static-tabbar-button span{cursor: pointer}

.hr-intro-view-form {
    border-radius: 5px;
    border: var(--control-border);
    box-shadow: 2px 2px 6px 0px #7f7f7f;
    display: inline-block;
    padding: 20px;
}
.am-mobile-theme .hr-intro-view-form {
    width: 100%;
}

.hr-intro-view-form.request-approval-list{
    height: 70px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 25px;
}

.hr-intro-view-form.disabled{
    border: 5px solid #b38df7;
}

.card-icon-cover-disabled{
    display: inline-block;
    height: var(--icon-fontsize-cover);
    width: var(--icon-fontsize-cover);
    padding: 5px;
    vertical-align: middle;
}

.hr-table-desc-ctn {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-hr-intro-view-form {
    border-radius: 5px;
    display: inline-block;
}

.m-hr-intro-view-form.disabled{
    border: 5px solid #b38df7;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: var(--control-verticle-distance-2);
    padding-bottom: var(--control-verticle-distance-2);
}

.m-hr-intro-view-form-locked{
    height: 80px;
    width: 80px;
    vertical-align: middle;
    display: none;
    border: var(--control-border);
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
}
.m-hr-intro-view-form.disabled .m-hr-intro-view-form-locked{
    display: inline-block;
}

.m-kv-document-page-content{
    height: calc(100vh - 6em);
    overflow: auto;
    padding: 20px;
}

.m-kv-document-page-footer{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.m-kv-document-page-footer-left{
    display: inline-block;
}

.m-kv-document-page-footer-right{
    float: right;
    display: inline-block;
}

.m-kv-document-link{
    color: var(--a-color);
    font-weight: bold;
}

.m-hr-description{
    font-size: 0.8em;
}

.hr-comment-items-list-ctn{
    overflow-y: auto;
    padding-top: var(--control-verticle-distance-2);
    position: relative;
    height: calc(100% - 30px);
}

.hr-comment-items-list-ctn.mobile{
    height: 100%;
}

.m-hr-icon-filter.active{
    color: #00c8f8;
}

.m-hr-icon-quickmenu.as-active span{
    color: #00c8f8;
}

.single-button-header.hidden {
    display: none;
}

.hr-workflow-type-view-elt {
    line-height: var(--control-height);
    cursor: pointer;
    color: var(--a-color);
}

.hr-workflow-type-view-elt.disabled{
    pointer-events: none;
    color: var(--as-disabled-text-color);
}


/************** CHOOSE FILE DIALOG*********************************************/



.kv-choose-file-dialog-body {
}

.kv-choose-file-dialog-tree-ctn,
.kv-choose-file-dialog-files-ctn {
    display: inline-block;
    vertical-align: top;
}


.kv-choose-file-dialog-tree-ctn {
    width: 180px;
}


.kv-choose-file-dialog-files-ctn {
    width: 600px;
    /*padding: var(--control-verticle-distance-2);*/
    border: 1px solid #d6d6d6;
    overflow: hidden;
    min-height: 300px;
    height: calc(90vh - 240px);
}

.kv-choose-file-dialog-offline-files-ctn {
    height: 180px;
    overflow: auto;

}

.kv-choose-file-dialog-offline-files-input {
    width: 100%;
    height: 100%;
    border: none;
}


.kv-choose-file-dialog-online-files-ctn {
    height: calc(100% - 180px);
    overflow: auto;
}

.kv-choose-file-dialog-online-files-input {
    width: 100%;
    height: 100%;
    border: none;
}

.kv-choose-file-dialog-footer {
    text-align: center;
    padding: var(--control-verticle-distance-2);
}

.kv-choose-file-dialog-footer > button:not(:first-child) {
    margin-left: 10px;
}

.hr-employee-tag-logs-text{
    vertical-align: middle;
    display: inline-block;
    padding-left: 5px;
}

.hr-employee-tag-logs-avatar{
    vertical-align: middle;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    border: var(--control-border);
}

.hr-employee-tag-logs-ctn{
    padding: 5px;
    cursor: pointer;
}

.hr-employee-tag-logs-ctn:hover{
    color: var(--a-color);
    background-color: #efefef;
}

.war-change-data-type-flex-title{
    font-weight: bold;
    text-align: center;
    --text-color: red;
}
.hr-shift-schedule-cell:hover, .hr-shift-schedule-cell.as-quick-menu-attached{
    background-color: var(--icon-background-cover-hover) !important;
    cursor: pointer;
}

.ep-button-icons {
    font-size: 20px;
    color: var(--icon-color);
    cursor: pointer;
}

.ep-button-icons:hover {
    font-size: 20px;
    color: black;
    cursor: pointer;
}

.ep-questionnaire-evaluation-items {
    white-space: nowrap;
}

.ep-questionnaire-evaluation-items:not(:last-child){
    padding-bottom: 10px;
}

.card-icon-remove:hover{
    color: red;
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-bar-striped,
.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress-bar.active,
.progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.as-toc-item.as-text-red .as-toc-item-name {
    color: red;
}

.hr-add-div-below-table {
    line-height: var(--control-height);
    height: var(--control-height);
    color: var(--a-color);
    cursor: pointer;
    display: inline-block;
}

.hr-procedure-node-participant-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 30px 10px 5px;
    position: relative;
    margin-bottom: 10px;
    display: inline-block;
    min-width: 100%;
    box-sizing: border-box;
}

.hr-procedure-node-participant-delete-icon {
    position: absolute;
    right: 5px;
    top: 5px;
}

tr.as-tree-table-row.row-org-table-active,
tr.as-dt-body-row.row-org-table-active {
    background-color: var(--table-light-row-background-color);
}

.hr-documents-header{
    border: var(--button-border);
    font-weight: bold;
    padding-left: 10px;
    height: 50px;
    line-height: 50px;
    background-color: #D0D0D0
}