html,
body {
    background: #f0f4f5;
}

.app-version {
    font-size: 10px;
    color: #999;
    position: fixed;
    bottom: 1px;
    line-height: 1;
    right: 15px;
}

.rendered[class*=col-] {
    min-height: 0;
}

a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: all;
}

.page-wrapper {
    padding-top: 65px;
    padding-bottom: 0;
    min-height: 100vh;
}

.btn-group .btn {
    margin-right: 5px;
}

#welcome {
    float: left;
    height: 15px;
    line-height: 15px;
    margin-right: 15px;
    border-right: 1px solid #555;
    padding-right: 20px;
    margin-top: 17px;
}

    #welcome strong {
        font-weight: 500;
        color: #444;
    }

/* menu custom */
.fixed-sidebar-left .side-nav li.navigation-header > span {
    cursor: pointer;
}

    .fixed-sidebar-left .side-nav li.navigation-header > span[aria-expanded='true'] .pull-right i:before {
        content: '\f2f8';
    }

    .fixed-sidebar-left .side-nav li.navigation-header > span:hover {
        background: rgba(33, 33, 33, 0.05);
    }

.fixed-sidebar-left .side-nav > li > ul > li a {
    padding: 7px 15px 7px 15px;
    color: #212121;
}

.fixed-sidebar-left .side-nav > li > ul > li > ul > li a {
    padding-left: 51px;
}
/* /menu custom */

#page-title {
    float: left;
    margin-top: 18px;
    font-size: 14px;
    text-transform: uppercase;
    margin-left: 20px;
    border-left: 1px solid #666;
    line-height: 15px;
    font-weight: bold;
    padding: 0 20px;
}

@media (max-width: 1024px) {
    #page-title {
        display: none;
    }
}

.card-view.panel > .panel-heading {
    padding: 5px 15px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    color: #000;
}

    .card-view.panel > .panel-heading a {
        cursor: pointer;
    }

.panel.full-height {
    height: calc(100vh - 80px);
    position: relative;
}

    /* ADD START FVL)TUANLT 20240912 */
    .panel.full-height .panel-body {
        height: 100%;
    }
/* ADD E N D FVL)TUANLT 20240912 */

.panel.position-relative {
    position: relative;
}

.card-view.panel .panel-body {
    padding: 5px 0 10px;
}

#filter .collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

[aria-expanded='false'] i.zmdi-chevron-up,
[aria-expanded='true'] i.zmdi-chevron-down {
    display: inline-block;
    opacity: 1 !important;
}

[aria-expanded='true'] i.zmdi-chevron-up,
[aria-expanded='false'] i.zmdi-chevron-down {
    display: none;
}

#filter-wrapper.new {
    display: none;
}

    #filter-wrapper.new.open {
        display: block;
    }

.fixed-sidebar-left .side-nav li a .pull-left > i {
    float: left;
}

#employee-card-filter {
    max-width: 600px;
    margin: 0 auto 25px;
    position: relative;
}

    #employee-card-filter input {
        border-radius: 50px;
        height: 36px;
        background: #fff;
        padding-right: 30px;
    }

    #employee-card-filter button {
        position: absolute;
        right: 15px;
        top: 8px;
        z-index: 4;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        pointer-events: none;
    }

        #employee-card-filter button i {
            font-size: 22px;
            color: #888;
        }

.employee-card {
    color: rgba(0, 0, 0, 0.8);
    font-size: 13px;
    line-height: 1.7;
}

    .employee-card .employee-card-title {
        font-size: 14px;
        font-weight: bold;
        color: #000;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .employee-card .employee-name {
        font-weight: 500;
    }

    .employee-card .employee-avatar {
        float: right;
        width: 150px;
        border: 1px solid #ccc;
        padding: 3px;
    }

        .employee-card .employee-avatar img {
            max-width: 100%;
            display: block;
        }

    .employee-card .employee-card-footer {
        background: #efefef;
        margin: 15px -15px -20px;
        padding: 10px 15px;
        position: relative;
    }

        .employee-card .employee-card-footer .employee-card-rating-point {
            font-size: 15px;
            margin-right: 10px;
        }

        .employee-card .employee-card-footer .employee-card-rating-stars {
            display: inline-block;
            position: relative;
            top: 1px;
        }

            .employee-card .employee-card-footer .employee-card-rating-stars li {
                display: inline-block;
                font-size: 18px;
                margin-right: 5px;
            }

        .employee-card .employee-card-footer .employee-profile-link {
            position: absolute;
            top: 10px;
            right: 15px;
            padding: 4px 10px;
        }

    .employee-card.layout-2 .employee-avatar {
        float: left;
        background: none;
    }

        .employee-card.layout-2 .employee-avatar:before {
            content: '';
            padding-top: 133.33%;
            display: block;
        }

    .employee-card.layout-2 .employee-info {
        margin-left: 160px;
    }

/* Company table */
#company-table {
    width: 100%;
    text-align: center;
}

    #company-table table {
        width: 100%;
    }

    #company-table td {
        border: 1px solid rgba(0, 0, 0, 0.1);
        position: relative;
    }

    #company-table table td {
        padding: 5px;
        border-color: rgba(0, 0, 0, 0.05);
        color: #999;
        font-size: 12px;
    }

        #company-table table td.cr {
            background: rgba(220, 0, 48, 0.45);
            color: rgba(0, 0, 0, 0.6);
        }

        #company-table table td.co1 {
            background: rgba(9, 162, 117, 0.55);
            color: rgba(0, 0, 0, 0.6);
        }

    #company-table table .cl td {
        font-weight: bold;
    }

    #company-table .month {
        font-size: 60px;
        position: absolute;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.05);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
    }

/* Scheduler */

.events .event {
    background: #b10058;
    color: #fff;
    display: block;
    font-size: 11px;
    padding: 2px 5px;
    margin: 0 -5px 5px;
}

.change-day-type-group .btn,
.change-day-type-group .btn:hover,
.change-day-type-group .btn:focus {
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.btn-outline.btn-day-type-wh {
    background: rgba(220, 0, 48, 0.45) !important;
}

.btn-outline.btn-day-type-ph {
    background: rgba(9, 162, 117, 0.55) !important;
}

.btn-outline.btn-day-type-ch {
    background: rgba(15, 79, 168, 0.55) !important;
}

.setting-panel {
    width: 300px;
    margin-right: -300px;
}

    .setting-panel .layout-switcher-wrap > ul {
        padding: 0 15px;
    }

#grid-header,
.ez-grid-header {
    margin-bottom: 15px;
}

    .ez-grid-header .btn,
    .ez-grid-footer .btn {
        margin-right: 5px;
    }

        .ez-grid-header .btn:last-child,
        .ez-grid-footer .btn:last-child {
            margin-right: 0;
        }

.ez-grid .ez-input .k-widget.k-dropdown {
    position: relative;
}

#grid-header .divider {
    height: 28px;
    width: 1px;
    display: inline-block;
    margin: 0 10px;
    background: rgba(0, 0, 0, 0.1);
    vertical-align: middle;
}

#grid-header input {
    height: 28px;
    font-size: 12px;
    display: inline-block;
    width: auto;
}

#grid-header .btn-icon {
    padding: 6px 8px;
}

    #grid-header .btn-icon i {
        padding-right: 0;
        display: block;
    }

.grid-extend {
    font-size: 12px;
    text-align: left;
    display: inline-block;
    margin-left: 20px;
}

    .grid-extend:first-child {
        margin-left: 0;
    }

    .grid-extend .k-widget.k-dropdown {
        display: inline-block;
        height: 25px;
    }

        .grid-extend .k-widget.k-dropdown .k-dropdown-wrap {
            box-sizing: border-box;
        }

        .grid-extend .k-widget.k-dropdown .k-input,
        .grid-extend .k-widget.k-dropdown .k-select {
            line-height: 23px;
            padding: 0;
        }

            .grid-extend .k-widget.k-dropdown .k-input:before {
                content: none;
            }

table.dataTable.display tbody tr.odd.selected > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1,
table.dataTable.display tbody tr.even.selected > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
    background: transparent;
}

table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
    background: transparent;
}

/* Advanced filter pop-up */
.k-widget.k-dropdown {
    width: 100%;
    display: block;
}

.ez-input .k-widget.k-dropdown {
    /* fix filter on grid */
    position: absolute;
}

.btn.form-control {
    padding: 10px 12px;
}

span.form-control {
    border: none;
}

/* Toast custom */
.jq-toast-wrap {
    z-index: 9999999 !important; /* show on k-overlay */
}

    .jq-toast-wrap .jq-toast-single {
        margin-bottom: 5px;
    }

#profilePrint .nav.nav-tabs.nav-tabs-responsive {
    text-align: left;
    position: relative;
}

.ez_ddlheader {
    width: 100px;
    font-weight: bold;
}

.ez_ddlheader {
    width: 100px;
    font-size: larger;
    font-weight: bold;
    padding: 5px 10px 0px 5px;
}

.ez_ddldata {
    width: 100px;
    padding: 5px 10px 0px 5px;
}

/* ==== FIX KENDO CONFLICT ====*/
#data-table .panel-body {
    padding-bottom: 10px;
}

/* BEGIN: grid style */
#grid,
.ez-grid {
    border: none;
}

.k-grid-content > .k-grid-norecords > .k-grid-norecords-template {
    margin-left: -10em !important;
    margin-top: -2em !important;
    position: absolute !important;
}

.k-grid-content tr[role='row']:hover {
    background: #00000010;
}

.k-grid-content tr[role='row'] td[role='gridcell']:hover {
    background: #0073c620;
}

/*.k-header.k-grid-toolbar {
  display: none;
}*/

.k-grid-norecords {
    height: auto;
}

.k-block,
.k-widget {
    box-sizing: border-box;
}

#grid.k-grid td,
.ez-grid.k-grid td {
    padding: 2px 5px;
    font-size: 13px;
    white-space: nowrap;
}

#grid .k-grid-content table[role='grid'],
.ez-grid .k-grid-content table[role='grid'] {
    border-collapse: collapse;
    color: rgb(88, 88, 88);
}

#grid.k-grid td .k-input,
#grid.k-grid td .k-dropdown,
#grid.k-grid td .k-dropdown-wrap,
#grid.k-grid td .k-numerictextbox,
#grid.k-grid td .k-numeric-wrap,
.ez-grid.k-grid td .k-input,
.ez-grid.k-grid td .k-dropdown,
.ez-grid.k-grid td .ez-input .k-dropdown .k-dropdown-wrap,
.ez-grid.k-grid td .k-numerictextbox,
.ez-grid.k-grid td .k-numeric-wrap {
    border: none;
    background: none;
    padding: 0;
    text-indent: 0;
    color: inherit;
    text-transform: unset;
    height: auto;
}

.ez-grid.k-grid .k-dropdown .k-state-default.k-state-active .k-input {
    color: inherit;
}

#grid.k-grid td .k-select,
.ez-grid.k-grid td .k-select {
    line-height: 20px;
    border: none;
}

#grid.k-grid .k-numerictextbox .k-link,
.ez-grid.k-grid .k-numerictextbox .k-link {
    height: 10px;
}

#grid .k-grid-content tr,
.ez-grid .k-grid-content tr {
    border-bottom: 1px solid rgba(33, 33, 33, 0.1);
    height: 28px;
}

    #grid .k-grid-content tr td.k-state-focused,
    .ez-grid .k-grid-content tr td.k-state-focused {
        box-shadow: none;
    }

#grid .k-edit-cell input.k-checkbox + label.k-checkbox-label,
.ez-grid .k-edit-cell input.k-checkbox + label.k-checkbox-label {
    margin-left: 0;
    top: 3px;
}

#grid .k-grid-header,
.ez-grid .k-grid-header {
    border-bottom: 2px solid rgba(33, 33, 33, 0.1);
}

    #grid .k-grid-header th,
    .ez-grid .k-grid-header th {
        font-weight: 700;
        font-size: 12px;
    }

        #grid .k-grid-header th a,
        .ez-grid .k-grid-header th a {
            line-height: 16px;
        }

        #grid .k-grid-header th:first-child,
        #grid td:first-child,
        .ez-grid .k-grid-header th:first-child[data-index='0'],
        .ez-grid td:first-child {
            padding-left: 0;
            min-width: 20px;
        }

        .ez-grid .k-grid-header th.k-header > .k-link {
            position: relative;
            line-height: 1.8;
            top: 1px;
        }

        #grid .k-grid-header th .k-grid-filter,
        .ez-grid .k-grid-header th .k-grid-filter {
            visibility: hidden;
        }

            #grid .k-grid-header th:hover .k-grid-filter,
            .ez-grid .k-grid-header th:hover .k-grid-filter,
            #grid .k-grid-header th .k-grid-filter.k-state-active,
            .ez-grid .k-grid-header th .k-grid-filter.k-state-active {
                visibility: visible;
            }

#grid.k-grid td .k-input.k-invalid,
.ez-grid.k-grid td .k-input.k-invalid {
    background: rgba(255, 0, 0, 0.2);
}

#grid.k-grid td a,
.ez-grid.k-grid td .btn {
    padding: 0 5px;
    font-size: 11px;
    border-radius: 1px;
    margin-right: 5px;
}

.k-grid-header th.k-header,
.k-grid td {
    padding-left: 5px;
}

thead th.k-header[colspan] {
    text-align: center;
    background: #00000010;
    border: 1px solid #ffffff;
}

.k-grid tr:hover {
    background: none;
}

.ez-grid .ez-input-group {
    margin-bottom: 0;
}

.ez-grid .k-picker-wrap.k-state-default,
.k-state-focus {
    background: none;
}

/* END: grid style  */

.k-widget [class*='col-'],
.k-widget .row {
    box-sizing: border-box;
}

/* ==== KENDO CUSTOM ==== */
.dropdown-menu {
    min-width: 0;
}

.k-dropdown-wrap.k-state-default.k-state-active,
.k-picker-wrap.k-state-default.k-state-active {
    color: inherit;
}

/* ==== WORKING SCHEDULER (kendoUI scheduler) ==== */
.k-other-month {
    pointer-events: none;
}

.k-scheduler-header th,
.k-scheduler-header-wrap,
.k-scheduler-table td,
.k-scheduler-times,
.k-scheduler-times th,
.k-scheduler-times tr {
    border-left-color: #c9c9c9;
    border-right-color: #c9c9c9;
}

.scheduler-block {
    margin-bottom: 20px;
}

    .scheduler-block:last-child {
        border-bottom: none;
        margin-bottom: 100px;
    }

    .scheduler-block .scheduler-title {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 5px;
        text-transform: uppercase;
        font-weight: 500;
    }

    .scheduler-block .scheduler-button-list {
        padding-left: 15px;
    }

        .scheduler-block .scheduler-button-list [class*='col-'] > * {
            margin-left: -15px;
            width: calc(100% + 15px);
        }

    .scheduler-block .scheduler-button {
        border: none;
        margin-bottom: 10px;
        width: 100%;
        padding: 4px;
        background: none;
        border: 1px solid rgba(0, 0, 0, 0.3);
        transition: 0.2s;
        border-radius: 2px;
        font-size: 12px;
        display: block;
    }

        .scheduler-block .scheduler-button:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .scheduler-block .scheduler-button[disabled] {
            cursor: not-allowed;
        }

        .scheduler-block .scheduler-button.remove-leave {
            background: rgba(220, 0, 48, 0.3);
            color: #fff;
            border-color: transparent;
        }

    .scheduler-block .day-type {
        border: 1px solid rgba(0, 0, 0, 0.3);
    }

    /*.scheduler-block .day-type[class*='day-type-'] {
  color: #fff;
  border-color: transparent;
}*/

    /* custom for day type */
    .scheduler-block .day-type-nd {
        border: 1px solid rgba(0, 0, 0, 0.3);
        color: inherit;
    }

    .scheduler-block .day-type.day-type-wh {
        background: rgba(220, 0, 48, 0.8);
        color: #fff;
        border-color: transparent;
    }

        .scheduler-block .day-type.day-type-wh:hover {
            background: rgba(220, 0, 48, 0.45);
        }

    .scheduler-block .day-type.day-type-ch {
        background: rgba(15, 79, 168, 0.8);
        color: #fff;
        border-color: transparent;
    }

        .scheduler-block .day-type.day-type-ch:hover {
            background: rgba(15, 79, 168, 0.55);
        }

    .scheduler-block .day-type.day-type-ph {
        background: rgba(9, 162, 117, 0.8);
        color: #fff;
        border-color: transparent;
    }

        .scheduler-block .day-type.day-type-ph:hover {
            background: rgba(9, 162, 117, 0.55);
            color: #fff;
        }

    .scheduler-block .day-type.day-type-ns {
        background: rgba(242, 183, 1, 0.8);
        color: #fff;
        border-color: transparent;
    }

        .scheduler-block .day-type.day-type-ns:hover {
            background: rgba(242, 183, 1, 0.65);
            color: #fff;
        }

    .scheduler-block .day-type.day-type-so {
        background: rgba(177, 0, 88, 0.8);
        color: #fff;
        border-color: transparent;
    }

        .scheduler-block .day-type.day-type-so:hover {
            background: rgba(177, 0, 88, 0.55);
            color: #fff;
        }

.scheduler-actions {
    margin: 15px -5px 0 -5px;
}

    .scheduler-actions .btn {
        float: left;
        width: calc(33.33% - 10px);
        margin: 0 5px;
    }

#scheduler [role='gridcell'] {
    cursor: cell;
    position: relative;
    padding: 0;
    //height: auto;
}

    #scheduler [role='gridcell'].k-state-selected {
        border-color: #c9c9c9;
    }

    #scheduler [role='gridcell'] .calendar-day {
        height: 100%;
        width: 100%;
        position: relative;
        pointer-events: none;
    }

        #scheduler [role='gridcell'] .calendar-day.calendar-day-ch {
            background: rgba(15, 79, 168, 0.65);
        }

        #scheduler [role='gridcell'] .calendar-day.calendar-day-ph {
            background: rgba(9, 162, 117, 0.55);
        }

        #scheduler [role='gridcell'] .calendar-day.calendar-day-ns {
            background: rgba(242, 183, 1, 0.65);
        }

        #scheduler [role='gridcell'] .calendar-day.calendar-day-so {
            background: rgba(177, 0, 88, 0.65);
        }

        #scheduler [role='gridcell'] .calendar-day.calendar-day-wh {
            background: rgba(220, 0, 48, 0.65);
        }

    #scheduler [role='gridcell'] .calendar-shift {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        font-size: 15px;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 2px;
    }

    #scheduler [role='gridcell'] .calendar-leave {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #f2b701;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 14px;
    }

        #scheduler [role='gridcell'] .calendar-leave:after {
            content: '';
            display: table;
            height: 0;
            clear: both;
        }

        #scheduler [role='gridcell'] .calendar-leave [class*='calendar-leave'] {
            background: #f2b701;
            display: block;
            height: 100%;
        }

        #scheduler [role='gridcell'] .calendar-leave .calendar-leave-fd {
            width: 100%;
        }

        #scheduler [role='gridcell'] .calendar-leave .calendar-leave-hb {
            width: 50%;
            float: left;
        }

        #scheduler [role='gridcell'] .calendar-leave .calendar-leave-ha {
            width: 50%;
            float: right;
        }

    #scheduler [role='gridcell'] .calendar-number {
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-size: 12px;
    }

    #scheduler [role='gridcell']:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* FORM CUSTOMIZATION */
.form-group:last-child {
    margin: 0;
}

input.k-input[type='text'] {
    padding: 0 8px;
    height: 28px;
    width: 100%;
}

/* BEGIN: drop-down customization */
.ez-dropdown-header {
    white-space: nowrap;
    font-weight: 500;
    color: inherit;
    border-bottom: 2px solid rgba(33, 33, 33, 0.1);
}

.ez-dropdown-value {
    margin: 0 -5px;
}

    .ez-dropdown-header .column,
    .ez-dropdown-value .column {
        display: inline-block;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        padding: 2px 5px;
        box-sizing: border-box;
    }

        .ez-dropdown-header .column:first-child,
        .ez-dropdown-value .column:first-child {
            width: 30%;
        }

        .ez-dropdown-header .column:last-child,
        .ez-dropdown-value .column:last-child {
            width: 70%;
        }

.ez-employeedropdown-header .column,
.ez-employeedropdown-value .column {
    display: inline-block;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    padding: 2px 5px;
    box-sizing: border-box;
}

    .ez-employeedropdown-header .column:first-child,
    .ez-employeedropdown-value .column:first-child {
        width: 90px;
    }

    .ez-employeedropdown-header .column:last-child,
    .ez-employeedropdown-value .column:last-child {
        width: 180px;
    }

.k-popup .k-list .k-item {
    padding: 0 5px;
}

    .k-popup .k-list .k-item.k-state-selected,
    .k-popup .k-list .k-item.k-state-focused {
        border: 1px solid transparent;
    }

    .k-popup .k-list .k-item.k-state-focused {
        background: #efefef;
    }

        .k-popup .k-list .k-item.k-state-focused.k-state-selected {
            background: #cde6f7;
        }
/* END: drop-down customization */

.k-checkbox-label:before {
    width: 15px;
    height: 15px;
    font-size: 12px;
    line-height: 15px;
    box-sizing: border-box;
    top: 5px;
}

.k-checkbox-label {
    line-height: 16px;
    padding-left: 25px;
    height: 25px;
    line-height: 25px;
}

.k-checkbox:indeterminate + .k-checkbox-label::after {
    top: 8px;
    left: 3px;
    width: 9px;
    height: 9px;
}

/* swal custom */
.swal-modal {
    width: auto;
    max-width: 500px;
    padding: 15px 25px 10px;
    border-radius: 2px;
}

.swal-icon,
.swal-icon:first-child {
    float: left;
    margin: 0 0 10px;
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.swal-icon--warning__body {
    height: 20px;
    width: 3px;
    top: 5px;
}

.swal-icon--warning__dot {
    width: 5px;
    height: 5px;
    margin-left: -3px;
    bottom: -8px;
}

.swal-title,
.swal-title:not(:last-child),
.swal-title:not(:first-child) {
    text-align: left;
    margin-left: 65px;
    padding: 0;
    margin: 0 0 10px 65px;
    font-size: 15px;
    text-transform: uppercase;
    color: #333;
}

.swal-text {
    display: block;
    font-size: 13px;
    margin-left: 65px;
    padding: 0;
    margin-bottom: 10px;
}

.swal-footer {
    padding: 0;
    margin: 0;
    text-align: center;
    clear: both;
}

    .swal-footer button:focus {
        box-shadow: none;
    }

.swal-content {
    margin: 20px 0 10px;
    padding: 0;
}

    .swal-content input {
        padding: 5px;
        height: 25px;
        border-radius: 0;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.7);
    }

        .swal-content input:focus {
            border-color: #0f4fa8;
        }

/* App loading */
.init-wrapper {
    width: 100%;
}

.page-wrapper.full-height {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.k-progressbar,
.k-progress-status-wrap {
    border: none;
    top: auto;
}

.k-progressbar {
    height: 2px;
    width: 100%;
    display: block;
    top: -7px;
}

    .k-progressbar .k-state-selected {
        background: #dc0030;
        border: none;
        box-shadow: 0 0 10px rgba(220, 0, 48, 0.2);
    }

.k-progress-status {
    display: none;
}

#loading-title {
    margin-bottom: 20px;
    text-align: center;
}

/* Company structure */
#company-structure {
    width: 100%;
    height: calc(100vh - 155px) !important;
}

.get-org-chart rect.get-box {
    fill: #ffffff;
    stroke: #d9d9d9;
}

.get-org-chart .get-text.get-text-0 {
    fill: #262626;
}

.get-org-chart text.get-text {
    fill: #788687;
}

.get-org-chart .get-text.get-text-1 {
    fill: #262626;
}

.get-org-chart .get-text.get-text-3 {
    fill: #0f4fa8;
}

.get-blue.get-org-chart .get-oc-tb {
    background: #777;
    border: none;
}

.get-org-chart .get-oc-tb input {
    border: none;
    background: rgba(255, 255, 255, 0.9);
}

.get-org-chart .get-oc-v .get-image-pane {
    width: 400px;
}

.get-org-chart .get-oc-v .get-data-pane {
    float: none;
    margin-left: 450px;
    max-width: none;
    width: auto;
}

.get-blue.get-org-chart {
    background: none !important;
}

.get-org-chart .more-info {
    fill: #18879b;
}

.get-org-chart .btn path {
    fill: #c9c9c9;
}

.get-org-chart .btn:hover path {
    fill: #999;
}

.get-org-chart .btn {
    cursor: pointer;
}

    .get-org-chart .btn circle {
        fill: #555555;
    }

    .get-org-chart .btn line {
        stroke-width: 3px;
        stroke: #ffffff;
    }

.orgchart .get-org-chart .get-left,
.orgchart .get-org-chart .get-right,
.orgchart .get-org-chart .get-up,
.orgchart .get-org-chart .get-down {
    display: none !important;
}

.orgchart {
    margin: -22px;
}

.get-oc-tb {
    display: none;
}

.get-oc-c {
    top: 0 !important;
    height: 100% !important;
}

.orgchart [data-node-id] .button-list {
    opacity: 0;
}

.orgchart [data-node-id]:hover .button-list {
    opacity: 1;
}

.orgchart [data-node-id].inactive {
    opacity: 0.7;
}

    .orgchart [data-node-id].inactive rect.get-box {
        fill: rgba(0, 0, 0, 0.05);
    }

    .orgchart [data-node-id].inactive .button-list [data-action='add'],
    .orgchart [data-node-id].inactive .button-list [data-action='delete'] {
        display: none;
    }

#orgchart-action-wrapper {
    position: absolute;
    z-index: 10;
    background: #fff;
    padding: 10px;
    width: 400px;
    margin: 20px 0;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

    #orgchart-action-wrapper .ez-form {
        margin-bottom: 0;
    }

/* FORM */
.window-content input.k-input {
    border: 1px solid #c9c9c9;
    line-height: 22px;
    box-sizing: border-box;
    width: 100%;
    padding: 3px 8px;
}

.window-footer {
    margin-top: 20px;
    border-top: 1px solid #c9c9c9;
    margin: 30px -15px 0;
    padding: 10px 15px;
}

.k-treeview .k-in.k-state-focused {
    border-color: transparent;
}

.k-checkbox-wrapper {
    line-height: unset;
}

.k-treeview .k-in {
    padding: 4px;
    margin-left: -2px;
}

/* =========== Access Right =========== */
#access-right-grant > .k-treeview-lines > .k-item {
    display: inline-block;
    width: 200px;
    vertical-align: top;
}

#access-right-filter {
    margin-bottom: 20px;
}

#access-right-grant {
    overflow: scroll;
    margin-bottom: 20px;
    height: calc(100vh - 235px);
}

/* =========== Access Scope =========== */
#access-scope-grant {
    height: calc(100vh - 120px);
    overflow-y: scroll;
    position: relative;
}

#access-scope-filter {
    height: calc(100vh - 160px);
}

    #access-scope-filter::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -5px;
        width: 1px;
        background: rgba(0, 0, 0, 0.3);
    }

/* =========== Kendo Window ============== */
.k-window-titlebar,
.k-window-title {
    cursor: move;
}

.k-window-footer {
    margin-top: 20px;
    border-top: 1px solid #c9c9c9;
    margin: 30px -15px 0;
    padding: 10px 15px;
}

div.k-window-content {
    padding: 15px;
    overflow: visible;
    min-height: 150px;
}

    div.k-window-content.has-footer {
        padding-bottom: 40px;
    }

div.k-window {
    border: none;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.k-window .k-window-titlebar {
    padding: 6px 20px 6px 0;
    background: #f6f6f6;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    color: #666;
    position: absolute;
}

    .k-window .k-window-titlebar .k-window-title {
        color: inherit;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        line-height: 1.5;
    }

    .k-window .k-window-titlebar .k-window-actions {
        top: 4px;
        right: 8px;
    }

.k-window .ez-popup .ez-popup-footer .btn {
    margin-right: 5px;
}

    .k-window .ez-popup .ez-popup-footer .btn:last-child {
        margin-right: 0;
    }

.k-window-maximized {
    height: 100% !important;
}

.k-spreadsheet-toolbar > .k-widget.k-dropdown {
    display: inline-block;
}

/* =========== Kendo Progress ============= */
.k-progress-status-wrap,
.k-progressbar-horizontal > .k-state-selected {
    top: 0;
    left: 0;
}

/* =========== BEGIN: Kendo Progress ============= */
.k-loading-mask {
    z-index: 200;
    background: rgba(255, 255, 255, 0.5);
}

.k-loading-image {
    background: center center no-repeat url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-infinity'%3E%3Cpath fill='none' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' ng-attr-stroke-dasharray='%7B%7Bconfig.dasharray%7D%7D' d='M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40 C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z' stroke='%23dc0030' stroke-width='9' stroke-dasharray='230.93003540039064 25.658892822265614'%3E%3Canimate attributeName='stroke-dashoffset' calcMode='linear' values='0;256.58892822265625' keyTimes='0;1' dur='5.5' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E");
    background-size: 30px 30px;
    opacity: 0.4;
}
/* =========== END: Kendo Progress ============= */

/* =========== Magilla Header Custom ============= */
.navbar.navbar-inverse.navbar-fixed-top {
    min-height: 50px;
}

    .navbar.navbar-inverse.navbar-fixed-top .nav-header {
        height: 50px;
    }

        .navbar.navbar-inverse.navbar-fixed-top .nav-header .logo-wrap {
            padding-top: 10px;
        }

    a.toggle-left-nav-btn,
    a#toggle_mobile_nav,
    a#toggle_mobile_search,
    .navbar.navbar-inverse.navbar-fixed-top .nav > li > a {
        line-height: 50px;
    }

.fixed-sidebar-left {
    top: 50px;
}

/* =========== EZ Components ============== */
.ez-popup,
.ez-popup p {
    font-size: 11px;
}

.ez-input-group {
    display: table;
    width: 100%;
    margin-bottom: 10px;
    font-size: 12px;
    color: #313131;
}

.ez-input .k-widget.k-dropdown {
    position: absolute;
}

.ez-input.ez-input-departments .k-dropdowntree,
.ez-input.ez-input-employees .k-multiselect {
    height: 56px;
}

.ez-input.ez-input-departments .k-multiselect-wrap,
.ez-input.ez-input-employees .k-multiselect-wrap {
    height: 56px;
    overflow: hidden;
    box-sizing: border-box;
}

.ez-input-group.ez-input-group-departments .k-multiselect-wrap input {
    width: auto !important;
    display: inline-block;
}

.ez-input-group.ez-input-group-employees .k-multiselect-wrap input {
    display: block;
    position: relative;
    width: 100% !important;
}

.ez-input-group.ez-input-group-employees .ez-input-additional {
    bottom: 0;
    top: auto;
}

.ez-input-group-hidden {
    display: none;
}

.ez-form-label {
    display: table-cell;
}

.ez-input-group .ez-label,
.ez-input-group .ez-input:not(.ez-input-textarea) {
    display: table-cell;
    position: relative;
    height: 24px;
}

.ez-input > .ez-input-icon {
    position: absolute;
    right: 8px;
    top: 0;
    line-height: 25px;
}

.ez-label {
    width: 100px;
    min-width: 100px;
    vertical-align: top;
    padding-top: 4px;
}

    .ez-label span {
        position: absolute;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 15px;
    }

.ez-input input,
.ez-input .k-input,
.ez-input .k-input[type='text'] {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
    color: inherit;
    text-indent: 0;
}

.ez-input .k-checkbox-label {
    height: 24px;
    line-height: 26px;
    padding-left: 24px;
}

.ez-input .k-dropdown-wrap .k-input,
.ez-input .k-multiselect-wrap .k-input {
    height: 22px;
    line-height: 22px;
    max-width: 100%;
}

.ez-input .k-multiselect-wrap .k-input {
    position: absolute;
    z-index: 0;
}

.ez-input .k-multiselect-wrap [role='listbox'] li {
    position: relative;
    z-index: 1;
}

.ez-input .k-dropdown-wrap .k-select {
    line-height: 20px;
}

.ez-input .k-multiselect-wrap {
    height: 22px;
    overflow: hidden;
}

    .ez-input .k-multiselect-wrap li {
        height: 20px;
        line-height: 20px;
        min-height: auto;
    }

    .ez-input .k-multiselect-wrap .k-select {
        line-height: 16px;
    }

        .ez-input .k-multiselect-wrap .k-select .k-icon {
            font-size: 12px;
        }

    .ez-input .k-multiselect-wrap > .k-i-close {
        top: 6px;
    }

.ez-input textarea {
    display: block;
    box-sizing: border-box;
    padding: 5px;
    color: inherit;
    width: 100%;
}

.ez-input.ez-input-checkbox input {
    display: none;
}

.ez-input.ez-input-date > .k-widget,
.ez-input.ez-input-time > .k-widget,
.ez-input.ez-input-datetime > .k-widget,
.ez-input.ez-input-department > .k-widget {
    width: 100%;
}

.ez-input.ez-input-date input[data-role='datepicker'],
.ez-input.ez-input-time input[data-role='timepicker'],
.ez-input.ez-input-datetime input[data-role='datetimepicker'] {
    height: 22px;
    padding-right: 0;
}

    .ez-input.ez-input-date input[data-role='datepicker'] ~ .k-select,
    .ez-input.ez-input-time input[data-role='timepicker'] ~ .k-select,
    .ez-input.ez-input-datetime input[data-role='datetimepicker'] ~ .k-select {
        line-height: 20px;
    }

.ez-input input,
.ez-input .k-widget.k-dropdown.k-header .k-dropdown-wrap,
.ez-input .k-checkbox-label:before {
    border: 1px solid #aaa;
}

    .ez-input input:hover,
    .ez-input .k-widget.k-dropdown.k-header .k-dropdown-wrap:hover,
    .ez-input .k-checkbox-label:hover:before,
    .ez-input textarea:hover {
        border-color: #666;
    }

    .ez-input input:focus,
    .ez-input textarea:focus {
        outline: none;
        border-color: #0f4fa8;
    }

.ez-input .k-widget.k-upload.k-header {
    border: none;
    min-height: 60px;
}

    .ez-input .k-widget.k-upload.k-header .k-button {
        display: none;
    }

.ez-input.ez-input-upload-multiple .k-widget.k-upload.k-header .k-upload-files .k-button {
    display: block;
    z-index: 2;
}

.ez-input.ez-input-upload-multiple .k-widget.k-upload.k-header .k-upload-files {
    padding-top: 60px;
}

    .ez-input.ez-input-upload-multiple .k-widget.k-upload.k-header .k-upload-files li {
        z-index: 2;
        position: relative;
    }

.ez-input .k-widget.k-upload.k-header .k-dropzone {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 2px dashed #aaa;
    flex-wrap: wrap;
    text-align: center;
    z-index: 1;
    transition: 0.2s;
}

    .ez-input .k-widget.k-upload.k-header .k-dropzone.k-dropzone-active {
        background: rgba(0, 0, 0, 0.05);
    }

    .ez-input .k-widget.k-upload.k-header .k-dropzone.k-dropzone-hovered {
        background: rgba(0, 0, 0, 0.2);
    }

    .ez-input .k-widget.k-upload.k-header .k-dropzone > * {
        display: none;
    }

.ez-input .k-widget.k-upload.k-header:before {
    content: 'Drag & drop file here';
    font-size: 18px;
    font-weight: bold;
    color: #aaa;
    width: 100%;
    top: 19px;
    position: absolute;
    text-align: center;
}

.ez-input .k-widget.k-upload.k-header .k-upload-files {
    z-index: 0;
    padding: 2px;
    border: none;
}

    .ez-input .k-widget.k-upload.k-header .k-upload-files .k-file {
        border: none;
    }

.ez-input .k-list-optionlabel {
    border: none;
}

.ez-input .ez-input-choice {
    display: inline-block;
    background: rgba(0, 0, 0, 0.1);
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    min-width: 35px;
    text-align: center;
    border: 1px solid #fff;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    transition: 0.2s;
}

    .ez-input .ez-input-choice:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    .ez-input .ez-input-choice.active {
        background: #09a274;
        color: #fff;
    }

.ez-input .k-multiselect-clearable .k-i-close {
    display: inline-block;
}

.ez-input > .k-i-close {
    position: absolute;
    right: 30px;
    top: 7px;
    font-size: 10px;
    display: none;
    cursor: pointer;
}

.ez-input.ez-input-datetime > .k-i-close {
    right: 55px;
}

/*ADD START FVL)TUANLT 20210808*/
.ez-input.ez-input-employee.ez-input.ez-input-employees .k-multiselect.k-state-hover .k-multiselect-wrap > .k-i-close {
    right: 30px;
}
/*ADD E N D FVL)TUANLT 20210808*/

.ez-input > .k-i-close:before {
    font: 10px/1 WebComponentsIcons;
}

.ez-input:hover > .k-i-close {
    display: inline-block;
    z-index: 2;
}

.ez-input-group-datetime .ez-input .ez-input-date .k-i-close {
    right: 55px;
}

.ez-input-daterange [class*='col-'] {
    display: table;
}

    .ez-input-daterange [class*='col-'] .ez-input {
        width: 100%;
    }

.ez-results {
    margin-bottom: 15px;
}

    .ez-results .ez-results-title {
        margin-bottom: 10px;
    }

        .ez-results .ez-results-title h4 {
            display: inline-block;
            text-transform: uppercase;
            font-size: 14px;
            margin-right: 20px;
            font-weight: bold;
            color: #666;
        }

        .ez-results .ez-results-title a {
            font-size: 12px;
            color: #000;
            text-decoration: underline;
        }

    .ez-results + .k-progress {
        top: -5px;
    }

.ez-form {
    margin-bottom: 15px;
}

.ez-export-history {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 13px;
    color: rgba(15, 79, 168, 0.85);
    text-decoration: underline;
}

    .ez-export-history:hover {
        color: rgba(15, 79, 168, 1);
    }

.ez-input-group-employees .k-multiselect {
    padding-right: 22px;
}

.ez-input-group-employees .k-multiselect-wrap {
    padding-right: 20px;
    border-right: none;
}

.ez-input-group-employees input[data-role='multiselect'] {
    display: none !important;
}

.ez-input-additional {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
}

    .ez-input-additional > a {
        height: 56px;
        line-height: 56px;
        width: 22px;
        display: block;
        font-size: 14px;
        padding: 1px 6px;
        box-sizing: border-box;
        background: #ddd;
        color: rgba(0, 0, 0, 0.2);
        border: 1px solid #bababa;
        border-left: none;
        transition: 0.2s;
    }

        .ez-input-additional > a:hover {
            color: rgba(0, 0, 0, 0.5);
        }

        .ez-input-additional > a.active {
            color: rgba(0, 0, 0, 0.7);
        }

    .ez-input-additional .ez-open-employees-textbox + .dropdown-menu {
        width: 200px;
        left: auto;
        right: 0;
        padding: 10px 10px 5px;
        font-size: 12px;
    }

        .ez-input-additional .ez-open-employees-textbox + .dropdown-menu input[type='checkbox'] {
            top: 10px;
        }

        .ez-input-additional .ez-open-employees-textbox + .dropdown-menu label {
            padding-top: 2px;
        }

    .ez-input-additional .dropdown-menu .ez-input {
        display: block;
    }

.ez-input-group-dropdown {
    height: 24px;
}

    .ez-input-group-dropdown .k-widget.k-dropdown {
        position: absolute;
    }

.ez-popup-title {
    text-transform: uppercase;
    font-size: 14px;
    margin-right: 20px;
    font-weight: bold;
    color: #666;
    margin: 0 0 10px;
    line-height: 1;
}

.ez-employee-information {
    margin-bottom: 15px;
    font-size: 12px;
    display: table;
    width: 100%;
}

.ez-employee-information-group {
    padding: 5px;
    background: #0f4fa930;
}

    .ez-employee-information-group:nth-child(odd) {
        background: #0f4fa915;
    }

.ez-employee-information-label,
.ez-employee-information-data {
    display: table-cell;
}

.ez-employee-information-label {
    font-weight: 500;
    width: 95px;
}

.ez-result-grid {
    font-size: 12px;
    margin-bottom: 15px;
}

    .ez-result-grid .k-grid-header th {
        font-weight: bold;
    }

    .ez-result-grid input.k-input[type='text'] {
        height: 24px;
        text-indent: 0;
        padding: 0 2px;
    }

    .ez-result-grid .k-picker-wrap input.k-input[type='text'] {
        height: 22px;
    }
/* Employee Detail */
#form-general {
    height: calc(100vh - 230px);
    overflow-y: auto;
}

    #form-general .ez-form {
        overflow: hidden;
    }

.employee-avatar {
    padding-top: 133%;
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    cursor: pointer;
}

    .employee-avatar img {
        position: absolute;
        width: auto;
        max-height: 100%;
        min-width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .employee-avatar .k-upload-button {
        display: none;
    }

    .employee-avatar .k-upload,
    .employee-avatar .k-dropzone {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        background: none;
        padding: 0;
        box-sizing: border-box;
        border: none;
    }

    .employee-avatar .k-dropzone {
        top: 5px;
        left: 5px;
        bottom: 5px;
        right: 5px;
        opacity: 0;
        background: rgba(0, 0, 0, 0.6);
        border: 2px dashed rgba(255, 255, 255, 0.8);
        transition: 0.2s;
    }

        .employee-avatar .k-dropzone:after {
            content: 'Drag & drop\Aimage here';
            white-space: pre;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;
            display: block;
            width: 100%;
            top: 45%;
            position: absolute;
            font-size: 16px;
            font-weight: 400;
        }

        .employee-avatar .k-dropzone > * {
            display: none;
        }

        .employee-avatar .k-dropzone.k-dropzone-active,
        .employee-avatar .k-dropzone:hover {
            opacity: 0.8;
        }

        .employee-avatar .k-dropzone.k-dropzone-hovered {
            opacity: 1;
        }

#people {
    height: calc(100vh - 45px) !important;
}

/* ========= Menu =============== */
.fixed-sidebar-left .right-nav-text {
    font-size: 13px;
}

#form-filter {
    min-height: 50px;
    position: relative;
}

    #form-filter form {
        margin-bottom: 0;
    }

    #form-filter .row {
        margin: 0 -7.5px;
    }

    #form-filter [class*='col-'] {
        padding: 0 7.5px;
    }

/* ========= Kendo Grid ========= */
.k-pager-wrap {
    padding: 5px;
}

.k-pager-sizes.k-label,
.k-pager-info {
    font-size: 12px;
}

    .k-pager-sizes.k-label .k-widget.k-dropdown {
        display: inline-block;
        width: auto;
    }

        .k-pager-sizes.k-label .k-widget.k-dropdown .k-input {
            line-height: 20px;
            box-sizing: border-box;
        }

            .k-pager-sizes.k-label .k-widget.k-dropdown .k-input ~ .k-select {
                line-height: 22px;
            }

.k-pager-info {
    padding: 0;
}

.k-multicheck-wrap .k-label input {
    position: relative;
    top: 2px;
    margin-right: 3px;
}

/* ========= workflow ========= */
.full-height.error-bg-img {
    background: url('../img/errorbg.jpg');
    background-size: cover;
}

/* =========== LANGUAGE ============ */
#mobile_only_nav .nav .dropdown.lang-drp a {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4);
}

#mobile_only_nav .nav .dropdown.lang-drp:hover a,
#mobile_only_nav .nav .dropdown.lang-drp.open a {
    color: rgba(0, 0, 0, 0.8);
}

#language-list {
    width: 150px;
    font-size: 12px;
}

    #language-list li {
        padding: 5px;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.4);
    }

        #language-list li.active {
            color: rgba(0, 0, 0, 0.8);
        }

        #language-list li:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        #language-list li .code {
            display: inline-block;
            width: 40px;
            text-align: center;
            font-weight: bold;
        }

[class*='col-'].allow-hidden {
    min-height: 0;
}

.k-icon-32 {
    font-size: 32px; /* Sets icon size to 32px */
}

.k-icon-48 {
    font-size: 48px; /* Sets icon size to 48px */
}

.k-icon-64 {
    font-size: 64px; /* Sets icon size to 64px */
}

.k-button-32,
.k-grid tbody .k-button.k-button-32 {
    min-width: 32px; /* Sets button size to 32px */
}

.k-button-48,
.k-grid tbody .k-button.k-button-48 {
    min-width: 48px; /* Sets button size to 48px */
}

.k-button-64,
.k-grid tbody .k-button.k-button-64 {
    min-width: 64px; /* Sets button size to 64px */
}

/* Notification & TaskList on header */
.alert-dropdown .notification-box-head-wrap {
    border-bottom: 1px solid #0003;
}

.alert-dropdown .sl-item {
    border-bottom: 1px solid #0002;
}

/* tr custom background */
tr.ez-color-blue {
    background: #0f4fa840;
}

tr.ez-color-red {
    background: #dc003040;
}

tr.ez-color-purple {
    background: #b1005840;
}

tr.ez-color-green {
    background: #09a27440;
}

tr.ez-color-yellow {
    background: #f2b70140;
}

tr.ez-color-brown {
    background: #a0522d40;
}

tr.ez-color-grey {
    background: #00000040;
}

tr.ez-color-orange {
    background: #fd6a0240;
}

.ez-grid .k-grid-content tr.failed {
    border-top: 1px solid #d00;
    border-bottom: 1px solid #d00;
}

.swal-overlay--show-modal {
    z-index: 99999;
}

.custom-tab-1 .nav-tabs > li > a {
    border-bottom: 3px solid transparent;
}

/* employee detail */
#app {
    min-height: calc(100vh - 80px);
    background: #fff center center no-repeat url("data:image/svg+xml,%3Csvg class='lds-gears' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cg transform='translate(50 50)'%3E%3Cg transform='translate(-19 -19) scale(0.6)'%3E%3Cg transform='rotate(214.777)'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;360' keyTimes='0;1' dur='10s' begin='0s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Cpath d='M37.037143518365454 -8.5 L47.037143518365454 -8.5 L47.037143518365454 8.5 L37.037143518365454 8.5 A38 38 0 0 1 32.19962297770125 20.17880769752994 L32.19962297770125 20.17880769752994 L39.27069078956673 27.249875509395416 L27.249875509395416 39.27069078956673 L20.17880769752994 32.19962297770125 A38 38 0 0 1 8.500000000000007 37.03714351836545 L8.500000000000007 37.03714351836545 L8.500000000000007 47.03714351836545 L-8.500000000000002 47.037143518365454 L-8.500000000000002 37.037143518365454 A38 38 0 0 1 -20.178807697529937 32.19962297770125 L-20.178807697529937 32.19962297770125 L-27.249875509395412 39.27069078956673 L-39.27069078956673 27.249875509395416 L-32.19962297770125 20.17880769752994 A38 38 0 0 1 -37.03714351836545 8.500000000000009 L-37.03714351836545 8.500000000000009 L-47.03714351836545 8.50000000000001 L-47.037143518365454 -8.499999999999996 L-37.037143518365454 -8.499999999999998 A38 38 0 0 1 -32.19962297770126 -20.178807697529933 L-32.19962297770126 -20.178807697529933 L-39.270690789566736 -27.24987550939541 L-27.24987550939542 -39.27069078956672 L-20.178807697529944 -32.199622977701246 A38 38 0 0 1 -8.50000000000001 -37.03714351836545 L-8.50000000000001 -37.03714351836545 L-8.500000000000012 -47.03714351836545 L8.499999999999995 -47.037143518365454 L8.499999999999996 -37.037143518365454 A38 38 0 0 1 20.178807697529933 -32.19962297770126 L20.178807697529933 -32.19962297770126 L27.24987550939541 -39.270690789566736 L39.27069078956672 -27.24987550939542 L32.199622977701246 -20.178807697529944 A38 38 0 0 1 37.03714351836545 -8.500000000000012 M0 -23A23 23 0 1 0 0 23 A23 23 0 1 0 0 -23' fill='%23aaaaaa'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(19 19) scale(0.6)'%3E%3Cg transform='rotate(122.723)'%3E%3CanimateTransform attributeName='transform' type='rotate' values='360;0' keyTimes='0;1' dur='10s' begin='-0.625s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Cpath d='M37.037143518365454 -8.5 L47.037143518365454 -8.5 L47.037143518365454 8.5 L37.037143518365454 8.5 A38 38 0 0 1 32.19962297770125 20.17880769752994 L32.19962297770125 20.17880769752994 L39.27069078956673 27.249875509395416 L27.249875509395416 39.27069078956673 L20.17880769752994 32.19962297770125 A38 38 0 0 1 8.500000000000007 37.03714351836545 L8.500000000000007 37.03714351836545 L8.500000000000007 47.03714351836545 L-8.500000000000002 47.037143518365454 L-8.500000000000002 37.037143518365454 A38 38 0 0 1 -20.178807697529937 32.19962297770125 L-20.178807697529937 32.19962297770125 L-27.249875509395412 39.27069078956673 L-39.27069078956673 27.249875509395416 L-32.19962297770125 20.17880769752994 A38 38 0 0 1 -37.03714351836545 8.500000000000009 L-37.03714351836545 8.500000000000009 L-47.03714351836545 8.50000000000001 L-47.037143518365454 -8.499999999999996 L-37.037143518365454 -8.499999999999998 A38 38 0 0 1 -32.19962297770126 -20.178807697529933 L-32.19962297770126 -20.178807697529933 L-39.270690789566736 -27.24987550939541 L-27.24987550939542 -39.27069078956672 L-20.178807697529944 -32.199622977701246 A38 38 0 0 1 -8.50000000000001 -37.03714351836545 L-8.50000000000001 -37.03714351836545 L-8.500000000000012 -47.03714351836545 L8.499999999999995 -47.037143518365454 L8.499999999999996 -37.037143518365454 A38 38 0 0 1 20.178807697529933 -32.19962297770126 L20.178807697529933 -32.19962297770126 L27.24987550939541 -39.270690789566736 L39.27069078956672 -27.24987550939542 L32.199622977701246 -20.178807697529944 A38 38 0 0 1 37.03714351836545 -8.500000000000012 M0 -23A23 23 0 1 0 0 23 A23 23 0 1 0 0 -23' fill='%23ddd'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 100px 100px;
    border: 1px solid rgba(33, 33, 33, 0.1);
    border-radius: 2px;
    margin: 0 -9px;
    padding: 0 9px;
}

    #app.rendered {
        background: none;
        border: transparent;
    }

#general.tab-pane .ez-action-group {
    position: absolute;
    bottom: 10px;
}

    #general.tab-pane .ez-action-group .btn {
        margin-right: 5px;
    }

/* Time sheet request screen */
.time-sheet-overtime {
    display: inline-block;
    font-size: 11px;
    vertical-align: top;
    width: 150px;
    height: 28px;
    line-height: 1.3;
}

    .time-sheet-overtime .number {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
    }

.time-sheet-status {
    /*text-decoration: underline;*/
}

    .time-sheet-status.approved {
        color: #0f4fa8;
    }

/* Request detail style */
.request-detail .employee-info .avatar {
    border: 1px solid #ccc;
    padding: 2px;
    float: left;
}

.request-detail .employee-info {
    margin-bottom: 15px;
}

    .request-detail .employee-info .employee-name,
    .request-detail .employee-info .employee-job,
    .request-detail .employee-info .employee-department {
        margin-left: 65px;
    }

    .request-detail .employee-info .employee-name {
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 6px;
        text-transform: uppercase;
    }

    .request-detail .employee-info .employee-job,
    .request-detail .employee-info .employee-department {
        color: rgba(0, 0, 0, 0.7);
        font-size: 12px;
    }

    .request-detail .employee-info .employee-job {
        margin-bottom: 6px;
    }

.request-detail .request-info {
    margin-bottom: 15px;
}

.request-detail .request-info-item {
    padding: 5px;
    background: #0f4fa930;
}

    .request-detail .request-info-item:nth-child(odd) {
        background: #0f4fa915;
    }

.request-detail .request-info .key {
    display: inline-block;
    width: 120px;
    font-weight: 500;
    vertical-align: middle;
}

.request-detail .request-info .value {
    display: inline-block;
    width: calc(100% - 120px);
    vertical-align: middle;
}

.request-detail .request-info-item .link {
    text-decoration: underline;
    margin: 2px 10px 2px 0;
    display: inline-block;
}

.request-history {
    max-height: 200px;
    overflow: auto;
    margin-bottom: 15px;
}

    .request-history .request-history-item {
        position: relative;
        padding: 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
        /*VietNA 2040404*/
        .request-history .request-history-item.submited {
            background: #6bf7aa;
        }

        .request-history .request-history-item.approved {
            background: #09a27440;
        }

        .request-history .request-history-item.rejected {
            background: #dc003040;
        }

        .request-history .request-history-item .approver {
            font-weight: 500;
        }

        .request-history .request-history-item .approved-date {
            color: rgba(0, 0, 0, 0.7);
        }

        .request-history .request-history-item .approved-status {
            position: absolute;
            right: 5px;
            top: 5px;
            font-weight: 500;
        }

/* Custom action style */
.btn.add,
.btn.delete {
    background: #0f4fa8;
    border: solid 1px #0f4fa8;
    color: #fff !important;
}

    .btn.add:hover,
    .btn.delete:hover,
    .btn.add:focus,
    .btn.delete:focus {
        background: rgba(15, 79, 168, 0.85);
        border: solid 1px rgba(15, 79, 168, 0.1);
    }

.btn.save {
    background: #dc0030;
    border: solid 1px #dc0030;
}

.btn.save {
    background: rgba(220, 0, 48, 0.85);
    border: solid 1px rgba(220, 0, 48, 0.1);
}
/* /Custom action style */


/* Dashboard */
#dashboard .sm-data-box .counter {
    font-size: 16px;
}

#dashboard .sm-data-box .data-right-rep-icon {
    font-size: 45px;
}

#dashboard .sm-data-box .data-wrap-left,
#dashboard .sm-data-box .data-wrap-right {
    padding-top: 8px;
    min-height: 60px;
}

#dashboard .dashboard-stack {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 145px);
    height: auto;
    margin-bottom: 12px;
}

    #dashboard .dashboard-stack .age-panel,
    #dashboard .dashboard-stack .headcount-panel,
    #dashboard .dashboard-stack .newcomerandresign-panel {
        flex: 1 1 0;
        margin-bottom: 0px;
        display: flex;
        flex-direction: column;
        min-height: 325px;
    }

    #dashboard .dashboard-stack .recruit-panel,
    #dashboard .dashboard-stack .checkedin-panel,
    #dashboard .dashboard-stack .checkedinemployeelist-panel {
        flex: 0 0 200px;
        height: 200px;
        min-height: 200px;
        max-height: 200px;
		margin-top: 10px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    #dashboard .dashboard-stack .recruit-panel,
    #dashboard .dashboard-stack .recruit-panel .panel-wrapper,
    #dashboard .dashboard-stack .recruit-panel .panel-body,
    #dashboard .dashboard-stack .checkedin-panel,
    #dashboard .dashboard-stack .checkedin-panel .panel-wrapper,
    #dashboard .dashboard-stack .checkedin-panel .panel-body {
        height: 100%;
    }

    #dashboard .dashboard-stack .headcount-panel .panel-wrapper,
    #dashboard .dashboard-stack .newcomerandresign-panel .panel-wrapper,
    #dashboard .dashboard-stack .checkedinemployeelist-panel .panel-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #dashboard .dashboard-stack .headcount-panel .panel-body,
    #dashboard .dashboard-stack .newcomerandresign-panel .panel-body,
    #dashboard .dashboard-stack .checkedinemployeelist-panel .panel-body {
        flex: 1;
        min-height: 0;
    }

    #dashboard .dashboard-stack .newcomerandresign-panel #morris_extra_line_chart {
        height: 100%;
    }

    #dashboard .dashboard-stack .checkedinemployeelist-panel .panel-body {
        overflow-y: auto;
    }

#dashboard .checkedinemployeelist-panel .checkedin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#dashboard .checkedinemployeelist-panel .checkedin-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: #212121;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dashboard .checkedinemployeelist-panel .checkedin-time {
    color: #6b7785;
    font-variant-numeric: tabular-nums;
}


/* /* DEBUG: compare recruit-panel vs checkedin-panel */ */
/* #dashboard .dashboard-stack .recruit-panel { */
/* outline: 3px solid #ff0000 !important; */
/* background: rgba(255, 0, 0, 0.04) !important; */
/* } */
/* #dashboard .dashboard-stack .recruit-panel .panel-wrapper { */
/* outline: 3px solid #0066ff !important; */
/* background: rgba(0, 102, 255, 0.05) !important; */
/* } */
/* #dashboard .dashboard-stack .recruit-panel .panel-body { */
/* outline: 3px solid #00aa44 !important; */
/* background: rgba(0, 170, 68, 0.08) !important; */
/* } */
/* #dashboard .dashboard-stack .checkedin-panel { */
/* outline: 3px solid #ff6600 !important; */
/* background: rgba(255, 102, 0, 0.04) !important; */
/* } */
/* #dashboard .dashboard-stack .checkedin-panel .panel-wrapper { */
/* outline: 3px solid #9900ff !important; */
/* background: rgba(153, 0, 255, 0.05) !important; */
/* } */
/* #dashboard .dashboard-stack .checkedin-panel .panel-body { */
/* outline: 3px solid #00c8c8 !important; */
/* background: rgba(0, 200, 200, 0.08) !important; */
/* } */
/* /Dashboard */
/*****************************************
*** BEGIN: STYLES FOR SELF-ELVALUATION ***
*****************************************/
.self-evaluation-panel {
    padding-bottom: 45px;
}

/* TABLE FOR SELF-EVALUATION */
.self-evaluation-table {
    width: 100%;
    font-size: 12px;
}

    .self-evaluation-table p {
        font-size: unset;
    }

    .self-evaluation-table th,
    .self-evaluation-table td {
        border: 1px solid #999;
        padding: 4px;
        color: #444;
        vertical-align: middle;
    }

    .self-evaluation-table.no-border th,
    .self-evaluation-table.no-border td {
        border-color: #fff;
    }

    .self-evaluation-table th {
        background: #ddd;
        color: #222;
        font-weight: 500;
    }

        .self-evaluation-table th:not([align]) {
            text-align: center;
        }

/* TABLE GRID STYLE for SELF-EVALUATION*/
.self-evaluation-table-wrapper {
    margin-bottom: 20px;
}

    .self-evaluation-table-wrapper .table-heading {
        text-transform: uppercase;
        font-weight: 500;
        background: #9d0022;
        color: #fff;
        padding: 6px;
        font-size: 14px;
        text-align: center;
    }

    .self-evaluation-table-wrapper .table-heading-2 {
        background: #9d0022bb;
        color: #fff;
        padding: 5px 20px;
        overflow: hidden;
        font-weight: 500;
    }

    .self-evaluation-table-wrapper .k-grid-header {
        background-color: #ddd;
    }

    .self-evaluation-table-wrapper .nav-tabs li {
        text-align: center;
        text-transform: uppercase;
        margin: 0;
        padding-right: 3px;
    }

        .self-evaluation-table-wrapper .nav-tabs li a {
            text-transform: uppercase;
            font-size: 11px;
            font-weight: 500;
            border: none;
            padding: 5px 5px 3px;
        }

        .self-evaluation-table-wrapper .nav-tabs li.active a {
            border: none;
            background: #ffc10733 !important;
        }

    .self-evaluation-table-wrapper .nav-tabs .tab-percent {
        color: #fff;
        background: #bbb;
        text-align: center;
        font-size: 8px;
        font-weight: 600;
    }

    .self-evaluation-table-wrapper .nav-tabs li.active .tab-percent {
        background: #ff5722a1;
    }

    .self-evaluation-table-wrapper .nav-tabs li.complete .tab-percent {
        background: #09a275;
    }

    .self-evaluation-table-wrapper .k-grid-header th.k-header,
    .self-evaluation-table-wrapper .k-grid td {
        vertical-align: middle;
    }

    .self-evaluation-table-wrapper .k-grid-header .k-header,
    .self-evaluation-table-wrapper .ez-grid td {
        overflow: visible;
        white-space: pre-line;
        overflow-wrap: break-word;
    }

    .self-evaluation-table-wrapper .k-grid table {
        border-collapse: collapse;
    }

    .self-evaluation-table-wrapper .k-grid tr th,
    .self-evaluation-table-wrapper thead th.k-header[colspan] {
        background: #ddd;
        border: 1px solid #fff;
        border-collapse: collapse;
    }

    .self-evaluation-table-wrapper th.readonly,
    .self-evaluation-table-wrapper td.readonly {
        background: #e8e8e8;
    }

    .self-evaluation-table-wrapper .ez-grid td textarea,
    .self-evaluation-table-wrapper .ez-grid td textarea:focus {
        border: none;
        outline: none;
        background: none;
    }

/* BEHAVIOUR TABLE STYLES */
.behaviour-table td:first-child {
    padding-left: 5px;
}


/* BUTTON STYLE FOR SELF-EVALUATION */
.self-evaluation-panel .button-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    padding: 15px;
}

    .self-evaluation-panel .button-wrapper .btn,
    .objective-button-wrapper .btn {
        margin-right: 15px;
    }

        .self-evaluation-panel .button-wrapper .btn:last-child,
        .objective-button-wrapper .btn:last-child {
            margin-right: 0;
        }

        .self-evaluation-panel .button-wrapper .btn.save {
            background: #9d0022bb;
        }

            .self-evaluation-panel .button-wrapper .btn.save:hover {
                background: #9d002299;
            }

/* SELF-EVALUATION REJECT POPUP STYLE */
.self-evaluation-reject-popup tr.disabled {
    background: #e1e1e1;
}

#overall-rating-table .ez-input,
#sign-off-table .ez-input {
    position: relative;
}

    #overall-rating-table .ez-input.ez-input-lookup {
        height: 24px;
        width: 250px;
    }

#overall-rating-table textarea {
    border: none;
}

#sign-off-table .ez-input.ez-input-date {
    margin-left: 25px;
}

#sign-off-table .k-widget, #sign-off-table .k-picker-wrap,
#sign-off-table input {
    border: none;
    background: none;
    text-align: center;
}

.navigate-wrapper {
    float: right;
}

    .navigate-wrapper .btn {
        padding: 4px 10px;
    }

#info-table .ez-input.ez-input-date {
    max-width: 200px;
}

    #info-table .ez-input.ez-input-date .k-input {
        text-align: center;
    }
/* CHG START ABV)PHONGBT 25251111 - TAB */
/* Highlight active grid cell for aria_active_cell ids */
[id^="aria_active_cell"] {
    background: #fff8e1;
    border: 1px solid #ffd54f;
    box-shadow: inset 0 0 0 2px rgba(255,213,79,0.08);
    transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
    outline: none;
}
    /* [id^="aria_active_cell"] > * { padding: 4px 6px; display:block; } */
    [id^="aria_active_cell"] .k-checkbox-label:not(.k-no-text):not(.is-freeze)::before {
        top: 1px !important;
    }

    [id^="aria_active_cell"]:focus,
    [id^="aria_active_cell"] :focus {
        box-shadow: 0 0 0 3px rgba(255,193,7,0.25);
    }

    [id^="aria_active_cell"] .k-i-calendar,
    [id^="aria_active_cell"] .k-i-clock {
        opacity: 1;
        color: #f57f17;
    }
/* CHG E N D ABV)PHONGBT 25251111 - TAB */