/* -----------------------------------------
   Variables
----------------------------------------- */

body {
    --wrapper: #F6F6F6;
    --bg-white: #fff;
    --bg-gray: #FAFAFC;
    --bg-black: #333;
    --main-border: #E6EDF2;
    --input-box: #223140;
    --require: #EE404C;
    --grays: #666;
    --bg-blue: #F4F8FE;
    --color-1: #0B7FEA;
    --text-label: #232323;
    --tab-button: #FBB31B;
    --tab-alternate: #f4f5f8;
    --primary-color: #25396F;
    --secondary-color: #EE404C;
    --accent-color: #EFEFEF;
    --accent-color-1: #BAC0CA;
    --bg-green: #1BCC07;
    --olive-green: #2c9120;
    --bg-green-toast: #3BB54A;
    --bg-tag-green: #E7FAE5;
    --bg-red: #EB4141;
    --bg-orange: #FBB31B;
    --bg-gold: #D99F00;
    --bg-light-gray: #FCFCFC;
    --bg-mild-gray: #f3f3f3;
    --bg-light-blue: #F8FBFF;
    --bg-dark-green: #00B47E;
    --bg-dark-gray: #4a494d;
    --bg-mild-gray: #737275;
    --tag-bg: #FAFBFC;
    --hover-delete: #f9eaed;
    --border-blue: #3682F4;
    --border-gray: #E6EDF2;
    --dashed: #D5D5D5;
    --progress: #E6E6E6;
    --textbox-gray: rgba(110, 119, 141, 0.1);
    --switcher: #B9C4CC;
    --bg-dark-black: #000;
    --warning: #ffc107;
    --pop-border: #ccc;
    --grid-heading-text: #6E778D;
    --pay-border: #EBEBEB;
    --filter-gray: #f5f5f5;
    --blue-label: #96A0B5;
    --bg-orange-elite: #f9f1e5;
    --bg-calendar-ot: #fff0e5;
    --calendar-ot: #FF6F00;
    --bg-calendar-so: #e7f0fe;
    --calendar-so: var(--border-blue);
    --calendar-warn: #927e58;
    --bg-calendar-warn: #fff3cd;
    --disable-line: #d8d8d8;
    --disable-color: #c9c9c9;

    /*RGB Vales*/
    --tag-bg-br: rgba(244, 155, 54, 0.3);
    --bg-tag-red: rgba(244, 67, 54, 0.5);
    --bg-tag-warn: rgba(255, 193, 7, 0.5);
    --bg-alert-success: rgba(44, 145, 32, 0.1);
    --bg-alert-warn: rgba(255, 193, 7, 0.2);
    --bg-danger-O: rgba(238, 64, 76, 0.1);
    --bg-blue-fade: rgba(54, 130, 244, 0.1);
    --bg-blue-fade-R: rgba(54, 130, 244, 0.2);
    --bg-orange-fade: rgba(251, 179, 27, 0.05);
    --bg-orange-fade-1: rgba(251, 179, 27, 0.1);
    /* Timcard absence ACC colors*/
    --color-ab-sucess: #3aab2d;
    --color-ab-warn: #ad662f;
    /*Profile theme colors*/
    --theme-color: #f7a51f;
    --profile-user-0: #dbf0f3;
    --profile-user-1: #f3dedb;
    --profile-user-2: #f2dbed;
    --profile-user-3: #e9dbf2;
    --profile-user-4: #dddbf3;
    --profile-user-5: #dbe7f3;
    --profile-user-6: #dbf3e9;
    --profile-user-7: #e3f3db;
    --profile-user-8: #f1f0db;
    --profile-user-9: #f3eedb;
    --profile-user-10: #e7e7e7;
    --profile-user-11: #edede0;
    --profile-user-12: #d5d5d5;
    --profile-user-13: #e8e4e9;
    --profile-user-14: #f6cfff;
    --profile-user-15: #ceecff;
    --profile-user-16: #ffd0da;
    --profile-user-17: #e2e0df;
    --profile-user-18: #f6dbd8;
    --profile-user-19: #d8f6ee;
    --profile-user-20: #fff0cf;
    --profile-user-21: #dfffcf;
    --profile-user-22: #ffdcd7;
    --profile-user-23: #ffc3ba;
    --profile-user-24: #ecccb9;
    --profile-user-25: #c6ccf3;
    --profile-user-26: #dbf0f3;
    --profile-text-0: #34696c;
    --profile-text-1: #693735;
    --profile-text-2: #6b3162;
    --profile-text-3: #53336b;
    --profile-text-4: #32346a;
    --profile-text-5: #32546a;
    --profile-text-6: #336b4f;
    --profile-text-7: #4a6b33;
    --profile-text-8: #6b6934;
    --profile-text-9: #6b5933;
    --profile-text-10: #4f4f4f;
    --profile-text-11: #5f5e3f;
    --profile-text-12: #494949;
    --profile-text-13: #504854;
    --profile-text-14: #71009e;
    --profile-text-15: #00689e;
    --profile-text-16: #9e0034;
    --profile-text-17: #080505;
    --profile-text-18: #78302d;
    --profile-text-19: #1d7564;
    --profile-text-20: #9e5f00;
    --profile-text-21: #449e00;
    --profile-text-22: #d70c00;
    --profile-text-23: #960600;
    --profile-text-24: #370200;
    --profile-text-25: #151765;
    --profile-text-26: #34696c;
}

/* -----------------------------------------
   Header styles
----------------------------------------- */

.body-font-12 {
    font-family: 'GoogleSans', sans-serif !important;
    font-size: 12px;
}

.font-4 {
    font-size: 4px !important;
}

.font-8 {
    font-size: 8px !important;
}

.font-11 {
    font-size: 11px !important;
}

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

.font-13 {
    font-size: 13px;
}

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

.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

.font-20 {
    font-size: 20px;
}

.font-24 {
    font-size: 24px;
}

.font-32 {
    font-size: 32px;
}

.font-48 {
    font-size: 54px;
}

.font-weight-300 {
    font-weight: 400;
}

.font-weight-400 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-label {
    color: var(--input-box);
    font-weight: 500;
}

.bg-bk-blue {
    background: var(--bg-blue);
}

.bg-bk-white {
    background: var(--bg-white);
}

.bg-light-gray {
    background: var(--bg-light-gray) !important;
}

.bg-red-fade {
    background: var(--bg-red) !important;
}

.bg-warn-fade {
    background: var(--warning) !important;
}

.bg-alert-warn {
    background: var(--bg-alert-warn);
}

.bg-alert-success {
    background: var(--bg-alert-success);
}

.bg-danger-opacity {
    background: var(--bg-danger-O);
}

.bg-heading-blue {
    background: var(--bg-light-blue);
}

.color-primary {
    color: var(--border-blue);
}

.color-primary-blue {
    color: var(--primary-color);
}

.color-gray {
    color: var(--grays);
}

.color-blue {
    color: var(--border-blue);
}

.color-black {
    color: var(--bg-black);
}

.color-white {
    color: var(--bg-white) !important;
}

.color-green {
    color: var(--bg-green);
}

.color-orange {
    color: var(--bg-orange);
}

.color-red {
    color: var(--bg-red);
}

.color-gold {
    color: var(--bg-gold);
}

.color-olive {
    color: var(--olive-green);
}

.color-warning {
    color: var(--warning);
}

.color-absence-S {
    color: var(--color-ab-sucess);
}

.color-absence-W {
    color: var(--color-ab-warn);
}

.color-text-blue {
    color: var(--blue-label);
}

.disable-text {
    color: var(--disable-line);
    pointer-events: none;
}

.color-calendar-warn {
    color: var(--calendar-warn);
}

.color-calendar-ot {
    color: var(--calendar-ot);
}

.color-calendar-so {
    color: var(--calendar-so);
}

.border-radius-RTB {
    border-radius: 8px 0px 0px 8px !important;
}

.border-radius-8 {
    border-radius: 8px
}

.border-radius-50 {
    border-radius: 99em
}

.border-radius-right-C {
    border-radius: 0 0 8px 0px !important;
}

.border-radius-left-C {
    border-radius: 0 0 0 8px !important;
}

.border-radius-start {
    border-radius: 8px 0 0 8px;
}

.border-radius-end {
    border-radius: 0 8px 8px 0;
}

.border-radius-TLR {
    border-radius: 8px 8px 0px 0px;
}

.width-250 {
    width: 250px !important;
}

.width-350 {
    width: 350px !important;
}

.H-145 {
    height: 145px;
}

.width75 {
    width: 75px !important;
}

.width85 {
    width: 85px !important;
}

.width95 {
    width: 95px !important;
}

.width105 {
    width: 105px !important;
}

.width-175 {
    width: 175px !important
}

.H-85 {
    height: 85px
}

.k-input-inner {
    padding: .17857143em 0 .17857143em 10px;
}

.k-checkbox {
    width: 14px;
    height: 14px;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.25);
    margin-right: 10px;
    border-radius: 4px !important;
}

    .k-checkbox::before {
        width: 8px;
        height: 8px;
        font-size: 8px;
    }

    .k-checkbox:checked {
        border-color: var(--border-blue);
        color: var(--bg-white);
        background-color: var(--border-blue);
    }

.form-check-input:checked {
    background-color: var(--border-blue);
    border-color: var(--border-blue);
}

.k-list-optionlabel {
    padding: 10px 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--grays);
    border-bottom: 1px solid #e6e6e6;
}

.k-grid tr:hover {
    background-color: #f7f7f7;
}

ul {
    padding-left: 1rem;
    margin-bottom: 0;
}

label {
    display: inline-block;
    font-size: 12px;
}

.autocompleteColWidth {
    font-size: 12px;
    text-transform: uppercase;
    padding: 10px 0px 10px 5px;
}

.progress {
    height: 0.5rem;
    background-color: var(--progress);
}

.progress-bar.progress-bar-success {
    background-color: var(--bg-dark-green);
}

.progress-bar-upload {
    background-color: var(--border-blue);
}

.input-group-text {
    border-radius: 8px;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.k-radio:checked {
    border-color: var(--border-blue);
}

.btn-primary:focus, .btn-primary:active:focus, .btn-secondary:focus, .btn-secondary:active:focus, .btn:focus, .form-check-input:focus {
    box-shadow: none;
}

.k-calendar > .k-header {
    background-color: var(--border-blue);
}

.k-calendar td.k-state-selected .k-link {
    background-color: var(--border-blue);
    border-color: var(--border-blue);
}

.k-calendar .k-today .k-link {
    box-shadow: none !important;
}

.form-check {
    padding-left: 0 !important;
}

.k-autocomplete > [data-role=autocomplete] {
    padding: 8px 12px 8px 12px !important;
}

.k-window-titlebar {
    background-color: var(--border-blue);
}

.k-list-ul {
    padding: 10px
}

#kacHomeTimeZone_listbox .k-list-item {
    padding: 8px 10px;
}

.k-picker, .k-widget.k-picker {
    border: solid 1px var(--main-border);
    color: var(--input-box);
    background-color: var(--bg-white);
}

.k-list-item.k-selected:hover {
    color: var(--bg-white);
    background-color: var( --border-blue);
}

.k-switch-off .k-switch-track, .k-switch-on .k-switch-track {
    background-color: var(--bg-green) !important;
}

.k-maskedtextbox {
    border: solid 1px var(--main-border);
    color: var(--input-box);
    background-color: var(--bg-white);
    padding: 6px 0px;
    box-shadow: none;
}

.k-input:focus, .k-input:focus-within {
    box-shadow: none !important;
    border: solid 1px var(--main-border);
}

.k-pager-numbers .k-state-selected {
    z-index: 1 !important;
}

/*Kendo Control Alignment*/
.k-numerictextbox > .k-spinner-decrease,
.k-numerictextbox > k-spinner-increase {
    border-radius: 0px !important;
}

.k-numerictextbox > .k-input-inner,
.k-datepicker > .k-input-inner,
.k-button-solid-base > .k-input-inner,
.k-combobox > .k-input-inner,
.RequiredField.k-autocomplete > .k-input-inner {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.k-button-solid-base {
    border-radius: 0px !important;
    height: 100% !important;
}

.k-datepicker > button {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    height: 100% !important;
}

.k-input:not(.highlightControl) {
    border: none !important;
}

.k-input .k-clear-value {
    width: calc(25px + 0.35714286em);
    height: calc(16px + 0.35714286em);
}

.k-calendar .k-header {
    color: #fff !important;
}

.k-numerictextbox-container > span {
    margin: 0px !important;
    padding: 0px !important;
}

.k-tooltip, .k-tooltip.k-popup, .k-tooltip.k-widget {
    width: 220px;
    background-color: var(--bg-white);
    color: var(--grays);
    box-shadow: none;
    border-radius: 8px;
    padding: 1.5rem 1rem 1.5rem 1rem;
    border: 1px solid var(--pop-border);
}

.k-panelbar > .k-item > .k-link.k-state-selected, .k-panelbar > .k-panelbar-header > .k-link.k-state-selected {
    background-color: var( --border-blue) !important;
    color: var(--bg-white);
    box-shadow: none !important;
}

.k-panelbar > .k-item > .k-link:hover {
    background-color: var( --border-blue) !important;
    color: var(--bg-white);
}

.k-panel > li.k-item {
    background-color: var(--bg-white);
}

.text-center span.k-column-title {
    width: 100%;
}

.k-filter-row th {
    padding: .786em 1.2em;
}

.k-grid-header th.k-header {
    padding: 0.9em 1.2em;
}

.k-panelbar .k-group > .k-item > .k-link.k-state-selected, .k-panelbar .k-group > .k-panelbar-item > .k-link.k-state-selected, .k-panelbar .k-panelbar-group > .k-item > .k-link.k-state-selected, .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link.k-state-selected {
    color: var(--bg-white);
    background-color: var( --border-blue) !important;
    box-shadow: none;
}

.k-picker.k-focus, .k-picker:focus, .k-widget.k-picker.k-focus, .k-widget.k-picker:focus {
    box-shadow: none;
}

.k-active-filter, .k-state-active, .k-state-active:hover, .k-tabstrip .k-state-active {
    background: transparent;
}

.k-menu-link-text {
    font-size: 12px;
}

.k-animation-container > .k-widget.k-tooltip.k-tooltip-closable > .k-tooltip-button {
    position: absolute;
    right: 10px;
    top: -2px;
}

.k-panelbar .k-group > .k-item > .k-link.k-state-selected.k-state-hover, .k-panelbar .k-group > .k-panelbar-item > .k-link.k-state-selected.k-state-hover, .k-panelbar .k-panelbar-group > .k-item > .k-link.k-state-selected.k-state-hover, .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link.k-state-selected.k-state-hover {
    background-color: var( --border-blue) !important;
    color: var(--bg-white);
}

.k-panelbar .k-group > .k-item > .k-link:hover, 
.k-panelbar .k-group > .k-panelbar-item > .k-link:hover,  
.k-panelbar .k-panelbar-group > .k-item > .k-link:hover {
    background-color: var( --border-blue);
    color: var(--bg-white);
}

.k-timepicker .k-input-inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.k-numerictextbox > .k-i-warning {
    display: none;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bg-dark-black)
}

.k-filter-row label > input[type=radio] {
    float: left;
    margin: 4px;
}

.k-filtercell > span > label {
    flex: none;
}

.k-treeview-leaf {
    padding: 10px 10px;
    width: 100%;
}

.k-treeview-leaf.k-hover, .k-treeview-leaf:hover {
    color: var(--bg-white);
    background-color: var( --border-blue);
}

.k-treeview-item {
    padding-left: 10px;
    margin-left: 10px;
}

.k-treeview-leaf.k-focus, .k-treeview-leaf:focus {
    background-color: var( --border-blue);
    box-shadow: none;
    color: var(--bg-white);
}

/*.k-list-scroller {
    border: 1px solid var(--main-border)
}*/

.k-list-footer {
    border: 1px solid var(--main-border);
}

.k-list-footer label {
    padding: 5px 0px;
    float: left;
}

.k-treeview {
    font-size: 12px;
}

.k-header .k-header-column-menu {
    margin-top: 3px !important; 
}

.k-grid .k-cell-inner > .k-link {
    padding: 0.9em 0.6em;
}

/*.k-list-item.k-focus {
    box-shadow: none;
}*/

.k-list-item {
    padding: 10px;
}

div.k-grid-header {
    padding-right: 0px !important;
}

.k-filtercell > .k-operator-hidden {
    display: flex;
    justify-content: center;
}

.RequiredField.k-autocomplete > .k-clear-value > .k-i-x:before {
    content: "\e006" !important;
}

.RequiredField.k-autocomplete > .k-clear-value {
    display: block !important;
    padding-left: 5px;
    padding-top: 3px;
    opacity: 1;
}

.k-autocomplete {
    background-color: var(--filter-gray);
}

#dvViewListAs > .k-autocomplete {
    background-color: var(--bg-white);
}

.k-no-data {
    line-height: 1.42857143; /*For Avoid No Data Text overlapping*/
    overflow: hidden;
    position: relative; /* For move the content position  */
    bottom: 10px; /* For move the content position  */
    font-size: 12px;
}

.k-filtercell .k-filtercell-wrapper > .k-button, .k-filtercell > span > .k-button {
    -ms-flex: none;
    flex: none;
    border-radius: 8px !important;
}

.k-button-solid-base:hover {
    background-color: var(--pay-border);
    border-color: var(--pay-border);
}