:root {
    --theme-color-primary: #00BAC6;
    --theme-color-primary-hover: #0098A2; /*darken(#00BAC6, 7%)*/
    --theme-color-primary-active: #008a93; /*darken(#00BAC6, 10%)*/
    --theme-color-secondary: #00A1AB; /*darken(#00BAC6, 5.2%)*/
    --theme-color-secondary-hover: #008992; /*darken(#00BAC6, 10.2%)*/
    --theme-color-secondary-active: #007178; /*darken(#00BAC6, 15.2%)*/
    --theme-color-third: #00acb7;  /*darken(#00BAC6, 3%)*/

    --theme-color-light-primary:#E7F8FF; /*lighten(#00BAC6, 56.5%)*/
    --theme-color-light-secondary: #00DFED; /*lighten(#00BAC6, 5%)*/
    --theme-color-light-secondary-hover: #00d1de; /*lighten(#00BAC6, 2%)*/
    --theme-color-light-third: #53B7C4; /*lighten(#00BAC6, 27%)*/
    --theme-color-light-third-hover: #05b1bc;/*lighten(#00BAC6, 25%)*/
    --theme-color-light-four: #4ae3ec; /*lighten(#00BAC6, 25.6%)*/
    --theme-color-light-fifth-active: #5E7484; /*lighten(#00BAC6, 40%)*/
    --theme-color-light-sixth: #bee7e9;/*lighten(#00BAC6, 44.2%)*/
    --theme-color-primary-opacity-80: rgba(0, 186, 198, 0.8);
    --theme-color-primary-opacity-30: rgba(0, 186, 198, 0.3);
    --theme-color-primary-opacity-8: rgba(0, 186, 198, 0.08);
    --theme-color-primary-gray: #889ea3;
    --theme-color-primary-gray-hover: #88a0a7;
    --theme-color-primary-gray-active: #5E7484;

    /* bg-dark*/
    --theme-bg-dark-color-primary: #00BAC6;
    --theme-bg-dark-color-primary-hover: #0098A2; /*darken(#00BAC6, 7%)*/
    --theme-bg-dark-color-primary-active: #008a93; /*darken(#00BAC6, 10%)*/
    --theme-bg-dark-color-secondary: #00A1AB; /*darken(#00BAC6, 5.2%)*/
    --theme-bg-dark-color-secondary-hover: #008992; /*darken(#00BAC6, 10.2%)*/
    --theme-bg-dark-color-secondary-active: #007178; /*darken(#00BAC6, 15.2%)*/
    --theme-bg-dark-color-third: #00acb7;  /*darken(#00BAC6, 3%)*/
}


body {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f7f7f7;
}

.name-red {
    color: red !important;
}

.name-disabled {
    color: #a6adaf;
}

.name-ellipsis {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-width: 200px;
    width: 100px;
}

.decoration {
    text-decoration: line-through;
}

.heading-waring {
    color: #8a6d3b !important;
    background-color: #fcf8e3 !important;
    border-color: #faebcc !important;
}

.select2-container--bootstrap .select2-dropdown-custom .select2-results__option[aria-disabled=true] {
    font-weight: bold;
    color: #282828;
}

.angular-ui-tree-empty {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
}


.rating-stars .w5c-error {
    font-size: 14px;
}

.datepicker-dropdown.dropdown-menu {
    padding: 5px 15px;
}


.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
    background-color: var(--theme-color-primary) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: var(--theme-color-primary) !important;
    border-color: var(--theme-color-secondary) !important;
    background-image: none !important;
}

.color-choose-zindex {
    z-index: 9999;
}


.timepicker-picker .table-condensed {
    margin-left: 0 !important;
}


/*calendar*/
.fullcalendar .fc-view-container .fc-month-view .fc-body .fc-event-container .fc-event {

    line-height: 20px;
    max-height: 60px;
    overflow: hidden;
}

.fullcalendar .fc-view-container .fc-month-view .fc-body .fc-event-container .fc-event .calendar-content .calendar-popover-list .calendar-popover-val span {
    display: inline-block;
    margin: 0 5px;
}

.fullcalendar .fc-view-container .fc-view .fc-body .fc-event-container .fc-event .calendar-content .calendar-popover-list .calendar-popover-val span.val-title {
    font-weight: 500;
}


.fc-more-popover .fc-event-container .fc-event {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    max-height: none !important;
    overflow: hidden !important;
}


/**/
.note-taglist .dropdown-menu {
    max-height: 340px !important;
    overflow-y: auto !important;
}

.w5c-form .bootstrap-datetimepicker-widget.dropdown-menu {
    max-height: none;
    overflow: hidden;
}


/*modal-dialog*/
.note-dialog .modal-dialog .modal-body {
    padding: 24px;
}

.note-dialog .modal-footer .btn-primary {
    background-color: var(--theme-color-primary);
    border: 1px solid var(--theme-color-primary);
    color: #ffffff;
}

.note-dialog .modal-footer .btn-primary:hover {
    background-color: var(--theme-color-primary-hover);
    border: 1px solid var(--theme-color-primary-hover);
}


.note-dialog .modal-content .modal-header .close {
    margin-top: 0;
    font-size: 24px;
}

.modal-btn-right {
    float: right;
    border-color: #ffffff !important;
    color: #ffffff !important;
    min-width: auto;
    margin-top: -3px;
    margin-right: 30px;
    padding: 6px 12px;
}

.modal-btn-right:hover,
.modal-btn-right:focus {
    border-color: var(--theme-color-primary-gray) !important;
}


.modal-content {
    border: none !important;
}


.loading {
    z-index: 3000 !important;
}


.table.table-action-reset > tbody > tr .td-action .btn-group {
    top: 50% !important;
    bottom: auto;
    -ms-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
}

.modal-dialog img {
    max-width: 100%;
}


/*flex-star*/
.flex-star {
    display: flex;
    align-items: center;
}

.flex-star .star-num {
    display: inline-block;
    margin-right: 5px;
}


/*backTop*/
#backTop {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background-color: var(--theme-color-primary-opacity-80);
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    z-index: 999;
    display: none;
}

#backTop .fa {
    font-size: 18px;
    color: #ffffff;
}


/*label*/

.label-blue {
    color: #0a98f9;
}

a.btn.btn-active {
    background: var(--theme-color-primary);
    border: 1px solid var(--theme-color-primary-hover);
    border-radius: 6px;
    color: #fff;
    min-width: 132px;
    padding: 8px 16px;
}

.label.priory-blank {
    color: #fff;
}

.table.table-on-site.table-action > thead > tr > th {
    padding: 0 16px;
    height: 57px;
    border-bottom: 1px solid #e0e0e0;
    background: #F7F7F7;
    font-size: 10px;
    color: #505050;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.table.table-action.table-on-site > tbody.on-site-body > tr:first-child > td:not(.td-action) {
    border-bottom: 1px solid #e0e0e0;
}

.timepicker-picker .table-condensed tr td span {
    float: none !important;
    margin: 1% auto !important;
}

.checkForm .control-label {
    text-transform: none !important;
}

.checkForm .checklist-wrapper .line-box .sub-box .sub-line-box .sub-title {
    text-transform: none !important;
}

.signature canvas {
    background-color: #ffffff !important;
}

.table.table-action > tbody > tr > td .fa {
    vertical-align: middle;
}

.star-num {
    display: inline-block;
    line-height: 12px;
    margin-top: 3px;
}

.form-custom-col textarea.form-control {
    height: auto;
}


.select2-dropdown .on-leave {
    float: right;
    border: 1px solid var(--theme-color-light-sixth);
    padding: 3px 5px;
    border-radius: 8px;
    background-color: var(--theme-color-light-sixth);
    color: var(--theme-color-light-third);
    margin-right: 8px;
}

.top-title {
    width: 99%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


a.link {
    color: var(--theme-color-primary);
    display: inline-block;
    text-decoration: underline;
}


.select2-category-user {
    font-family: 'AvenirNext';
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}


.default-text {
    text-transform: none;
}

.head-title-reset.head-title {
    padding-left: 21px;
    padding-right: 21px;
}

.head-title-reset.head-title .title-new {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
}

.head-title-reset.head-title .title-new img {
    width: 165px;
    height: auto;
    margin-right: 31px;
}

.head-title-reset.head-title .title-new .title-col-two {
    padding-left: 0;
}

@media screen and  (max-width: 640px) {

    .share-layout.share-layout-reset {
        padding-top: 129px;
    }

    .head-title-reset.head-title {
        height: 129px;
    }

    .head-title-reset.head-title .title-new {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .head-title-reset.head-title {
        padding-left: 22px;
        padding-right: 22px;
    }

    .head-title-reset.head-title .title-new img {
        margin-right: 0;
        margin-bottom: 9px;
    }

    .head-title-reset.head-title .title-new .title-col-two {
        padding-left: 8px;
        padding-top: 16px;
        padding-right: 16px;
    }


}


.icon-bulk {
    width: 16px;
    height: 16px;
    background-image: url("../library/images/vector_gray.png");
}

.form-page .row-input {
    display: block !important;
}

.select2-container--bootstrap.select2-container--open {
    z-index: 1080;
}


.form-control-text .dx-mention,
.form-control-text .mention,
.note-text .dx-mention,
.note-text .mention{
    background-color: rgba(74, 43, 76, 0.25) !important;
    color: #E851F5;
    font-weight: 500;
}

.form-page .upload-width {
    width: 219px;
    padding: 10px 0 !important;
}

.form-page .upload-height {
    width: 203px;
}

.file-upload .dragover {
    position: relative;
}

.file-upload .dragover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme-color-primary-opacity-30);
    border: 1px solid var(--theme-color-primary-opacity-30);
}