:root {
    --grid-header: #ebe9e9;
}

#imgLogo {
    border-radius: 2px;
}

.general-frame {
    border-radius: 2px;
}

.filter-name {
    color: var(--confirm-color);
    font-weight: bold;
}

.filter-sign {
    color: var(--accent-color);
}

.filter-value {
    font-weight: bold;
}

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

.splash {
    position: absolute;
    top: 250px;
    text-align: center;
    width: 95%;
}

.dataview-fav-item {
    cursor: pointer;
}

.dark #aiHelpIframe {
    border-radius: 5px;
}

.dark .tox-tinymce {
    border-radius: 3px;
    filter: invert(0.9);
}

.dark .x-textfield-solo .x-input-wrap-el {
    background-color: #c7c7c7;
}

.dark .x-gridcolumn > .x-header-el:after {
    background-color: #353535;
}

.dark .selected-menu {
    border: 1px solid #353535;
}

.dark .btn-link {
    color: none;
    text-decoration: none;
}

.dark .chipstyle {
    background-color: #000000 !important;
}

    .dark .chipstyle .x-inner-el {
        background-color: #2a2a2a !important;
    }

.dark .main-menu .x-icon-el:before {
    color: var(--color) !important;
}

.dark .dataview-fav-item div {
    color: var(--base-color) !important;
}

.dark .widget {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.dark .with-border {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.dark .dashboard-container {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.dark #mainTreeMenu {
    padding-right: 3px;
}

.dark .main-tree-body {
    padding-right: 2px;
    box-shadow: 0px 0px 3px 0 rgb(0 0 0), 1px 1px 3px 0 rgb(0 0 0 / 8%) !important;
}

.dark .x-chip {
    background-color: #2a2a2a !important;
}

.dark #mainPanel {
    background-color: #353535 !important;
}

.dark #mainCardPanel {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.dark .headerMainToolbar {
    background-color: #242525 !important;
    box-shadow: 0px 0px 3px 0 rgb(0 0 0), 1px 1px 3px 0 rgb(0 0 0 / 8%) !important;
}

.dark .sidebar {
    background-color: #353535 !important;
    color: #d4d4d4 !important;
}

.dark .x-scrollbar-corner {
    background-color: #303030 !important;
}

.x-formpanel .x-dataview {
    background-color: transparent !important;
}

.x-panelheader {
    background-color: var(--base-dark-color);
}

.transparent .x-panel-body-el {
    background-color: transparent !important;
}

.nopadding .x-layout-vbox {
    padding: 0px 0px 0px 0px !important;
}

.dhx_cal_event_selected {
    border: 1px solid red !important;
}

.lineend {
    padding-bottom: 5px;
    display: block;
}

.goal-row-description {
    height: 90px;
    padding-left: 10px;
}

    .goal-row-description p {
        margin: 0px;
    }

.lnkGoal {
    margin-bottom: 5px;
    margin-top: 10px;
}

.Outbound .reply-interactionlog {
    visibility: hidden !important;
}

.employee-terminated {
    color: #b1b1b1 !important;
}

.interactionlog {
    display: none;
}

.x-selected .interactionlog {
    display: inline !important;
    color: var(--base-color);
    font-weight: bold;
    padding-right: 15px;
    padding-top: 5px;
}

.form-mask .x-mask {
    background-color: white !important;
}

.login-mask .x-mask-message {
    display: none !important;
}

.login-mask .x-mask-inner {
    background-color: transparent !important;
}

.x-mask {
    background-color: #585858 !important;
}

.alt {
    background-color: #ebe9e9;
}

.custom-background {
    background-color: var(--reverse-disabled-color) !important;
}

.loader-field {
    display: inline-block;
    vertical-align: text-bottom;
    border-right-color: transparent;
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.centered {
    top: 50% !important;
    right: 50% !important;
    transform: translate(50%,-50%) !important;
}

.side-grid .loaded-label {
    position: absolute !important;
    bottom: 3px !important;
    left: 6.5px !important;
    font-size: 10px !important;
}

.side-grid .x-paneltitle .x-text-el {
    padding-bottom: 5px !important;
}

.AbsenceBalance {
    padding-bottom: 3px !important;
    border-radius: 5px;
    background: var(--header-background-color);
}

.x-datepanel-footer .x-button {
    padding-left: 10px !important;
}

.widget-hidden {
    display: none !important;
}

.dhx_config_item:first-child, .dhx_shadow:first-child {
    margin-left: 6px !important;
}

.dhx_config_item, .dhx_shadow {
    margin: 5px 1px 1px 5px !important;
    height: 26px !important;
    border-radius: 2px !important;
}

.dhx_item_filter--flat {
    color: orange !important;
}

.dhx_config_item .item_body--disabled, .dhx_config_item .item_body--disabled:hover, .dhx_config_item .item_body--disabled:hover .dhx_item_filter, .dhx_shadow .item_body--disabled, .dhx_shadow .item_body--disabled:hover, .dhx_shadow .item_body--disabled:hover .dhx_item_filter {
    background-color: #2795e0 !important;
    color: #fff !important;
    cursor: pointer !important
}

.dhx_config_item .item_content, .dhx_shadow .item_content {
    padding: 0 5px !important;
    font-size: 13px !important;
}

.dhx_values-fields-wrap {
    padding-top: 0px !important;
}

.dhx_item-modes .dhx_select__icon {
    top: 5px !important;
}

.x-field {
    margin-top: 4px !important;
}

.x-chip {
    height: auto !important;
    min-height: 26px;
}

    .x-chip .x-body-el {
        padding-top: 3px;
    }

    .x-chip .x-text-el {
        vertical-align: central !important;
        line-height: 19px !important;
        white-space: normal !important;
    }

    .x-chip .x-close-el {
        min-width: 18px;
    }

.x-messagebox-body-el {
    padding: 5px 24px !important;
}

.no-items-to-dispay-calendar {
    padding-top: 10%;
    color: #838383;
}

.x-button .x-badge-el {
    top: -6px !important;
    color: #222;
    color: var(--accent-foreground-color);
    border-color: transparent;
    border-radius: 32px;
    min-width: 14px;
    top: -10px;
    right: -1px;
    padding: 2px;
    max-width: 55%;
    font-size: 10px;
    line-height: 11px;
    font-family: Roboto, sans-serif;
    background-color: #9e9e9e !important;
    background-image: none;
}

.x-textfield .x-underline-el {
    /*height: 0.8px !important;*/
    transform: scaleY(1.2);
    transform-origin: 0 0;
    overflow: hidden;
}

.dhx_cell_holiday {
    background-color: #f8f8f8;
}

.txt-right {
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 2.5px !important;
    margin-bottom: 1px !important;
}

.txt-right-bold .x-label-text-el,
.field-bold .x-label-text-el {
    font-weight: bold !important;
    font-size: 120% !important;
}

.txt-right-bold .x-input-el,
.field-bold .x-input-el {
    font-weight: bold !important;
    font-size: 120% !important;
}

.txt-right .x-body-wrap-el {
    padding-right: 9px !important;
}

.tooltip-value {
    font-weight: bold;
    display: block;
    padding-bottom: 4px;
}

.scheduler-employee-pic {
    height: 40px;
    width: 40px;
    position: absolute !important;
    left: 7px;
    top: 8px;
}

.scheduler-header {
    padding-left: 10px;
    padding-top: 4px;
    padding-bottom: 5px;
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-align: left !important;
}

.scheduler-sub-header {
    padding-left: 10px;
    color: #7f7f7f;
    font-size: 12px;
    line-height: 15px !important;
    text-align: left !important;
}

.shift-employee-hours {
    margin-left: 5px;
    border-radius: 2px;
    padding: 0px 2px;
    background-color: #dfdfdf;
}

.scheduler-employee-name {
    padding-left: 55px;
    padding-top: 4px;
    padding-bottom: 5px;
    color: rgba(0, 0, 0, 0.87);
    font-size: 13.5px;
    font-weight: bold;
    height: 28px !important;
    line-height: 25px;
    text-align: left !important;
    white-space: nowrap;
}

.scheduler-employee-data {
    padding-left: 55px;
    color: rgba(0, 0, 0, 0.87);
    font-size: 12px;
    height: 30px !important;
    line-height: 15px !important;
    text-align: left !important;
}

.dhx_event_resize_start,
.dhx_event_resize_end {
    height: 35px !important;
}

.dhx_cal_event_line {
    height: 40px !important;
    color: black !important;
    font-weight: bold !important;
    border-radius: 2px !important;
    white-space: normal !important;
    font-size: 11px !important;
}

.full_height .x-innerhtml {
    height: 100%;
}

.x-chip .x-text-el:empty {
    display: none;
}

.block {
    display: block;
    padding: 3px 1px;
}

.tox-fullscreen .tox.tox-tinymce.tox-fullscreen {
    top: 62px !important;
}

body {
    -webkit-font-smoothing: subpixel-antialiased !important;
}

.fileDNDHover .x-formpanel {
    border: 3px dotted #ccc !important;
    margin: -3px !important;
    box-shadow: inset 0 0 0 3px #3a7999;
}

@keyframes bounce {
    0%, 20%, 60%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

.fileDNDHover {
    width: 100%;
    height: 300px;
    font-size: xx-large;
    display: table-cell;
    vertical-align: middle !important;
    align-content: center !important;
    color: #ccc !important;
    border: 3px dotted #ccc !important;
    margin: -3px !important;
    animation: bounce 1s;
}

/*.fileDNDHover {
    border: 3px dotted #3a7999;
    background: rgba(0,0,0,0);
    color: #3a7999;
    box-shadow: inset 0 0 0 3px #3a7999;
}*/

a:visited, a:link, a:active {
    font-style: normal !important;
    font-variant-ligatures: normal !important;
    font-variant-caps: normal !important;
    font-variant-numeric: normal !important;
    font-variant-east-asian: normal !important;
    font-weight: 500 !important;
    font-stretch: normal !important;
    font-size: 13.3333px;
    line-height: normal !important;
    /*font-weight: normal;*/
    color: var(--base-color) !important; /*#0B15F5;*/
    transition: color 1s ease-in-out;
    text-decoration: none !important;
}

.x-gridcell a:hover {
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-stretch: normal;
    font-size: 13.3333px;
    line-height: normal;
    color: var(--base-color);
    text-decoration: underline !important;
}

.x-form-text {
    display: inline !important;
}

td.wrap-text div {
    white-space: normal;
}

.panel-general {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.clsPrintReport {
    background-image: url('../Images/Toolbar/printer.png') !important;
}

.readonly-field {
    cursor: pointer;
    background: #fff url(../Images/readOnly-bg.gif) repeat-x 0 0;
}

.link-field {
    color: Blue;
    text-decoration: underline;
    cursor: pointer;
    background: #fff url(../Images/readOnly-bg.gif) repeat-x 0 0;
}

.icon-blank {
    background-image: url(../Images/Toolbar/Blank.png) !important;
}

.icon-selected {
    background-image: url(../Images/Toolbar/Ok.png) !important;
}

.icon-zoomIn {
    background-image: url(../Images/zoom_in.png) !important;
}

.icon-zoomOut {
    background-image: url(../Images/zoom_out.png) !important;
}

.clsHistory {
    background-image: url('../../Images/Toolbar/history.png') !important;
    background-position: 0 center !important;
}


.clsClearValues {
    background-image: url('../../Images/Toolbar/unchecked.gif') !important;
}

.icon-selected {
    background-image: url(../Images/Toolbar/Ok.png) !important;
}

.tree_ico {
    background-size: 18px 20px !important;
}

.legend-box {
    display: block;
    height: 10px;
    width: 10px;
    border: 1px solid Gray;
    float: right;
}

.legend-title {
    margin-left: 5px;
    float: left;
}

.event-fadeout {
    opacity: 1;
    transition: opacity 1s;
}

.event-fadein {
    opacity: 0;
}

#filterInfoCount {
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
    background-color: rgba(231, 25, 25, 0.6509803921568628);
    border-radius: 4px;
    padding: 0px 4px;
    font-size: 10px;
    text-shadow: none;
    font-family: monospace;
    height: 15px;
}

.x-fieldset-body {
    padding-bottom: 10px !important;
}

.rounded-panel {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

.sidebar {
    background-color: #353535;
    color: white !important;
}

.x-dialogheader {
    border-radius: 0px !important;
    background-color: var(--header-background-color);
    background-image: none;
}

.links a {
    color: #979595 !important;
    text-decoration: none;
    font-size: x-small;
    font-weight: 400 !important;
}

.small-icon:before {
    font-size: 15px !important;
}

.xsmall-icon:before {
    font-size: 13px !important;
}

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

.xsmall-icon {
    margin-right: 2px !important;
}

.mini-icon {
    margin-right: 2px !important;
}

.small-filter-icon:before {
    font-size: 10px !important;
}

.small-filter-icon {
    margin-right: 2px !important;
}

.chipstyle {
    margin: 2px 1px 3px 4px !important;
    cursor: default !important;
    background-color: #e6e6e6 !important;
    -webkit-border-radius: 13px !important;
    -moz-border-radius: 13px !important;
    -ms-border-radius: 13px !important;
    -o-border-radius: 13px !important;
    border-radius: 13px !important;
}

    .chipstyle .x-inner-el {
        padding: 5px 6px !important;
        display: inline-block !important;
        cursor: default !important;
        background-color: #e6e6e6 !important;
        -webkit-border-radius: 13px !important;
        -moz-border-radius: 13px !important;
        -ms-border-radius: 13px !important;
        -o-border-radius: 13px !important;
        border-radius: 13px !important;
        height: 27px !important;
        font: 600 11px/16px Roboto, sans-serif !important;
    }

.x-content-panel .x-paneltitle, .x-content-panel .x-paneltitle .x-icon-el, .x-content-panel .x-paneltool .x-icon-el {
    color: var(--color);
}

.x-content-panel .x-panelheader {
    background-color: var(--header-background-color);
}

.mce-ico {
    height: 19px !important;
}

.mobile .user-name {
    max-width: 125px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.user-name {
    color: white;
    font-size: x-small;
    margin-top: 6px;
}

.sk-chase {
    width: 30px;
    height: 30px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
    margin: 0 auto;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

    .sk-chase-dot:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: #f17914;
        border-radius: 100%;
        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
    }

    .sk-chase-dot:nth-child(1) {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2) {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s;
    }

    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s;
    }

@keyframes sk-chase {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot {
    80%, 100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4);
    }

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

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}

.with-border {
    border: 4px solid transparent;
    -webkit-box-shadow: 0px 5px 5px -6px #888888;
    -moz-box-shadow: 0px 5px 5px -6px #888888;
    box-shadow: 0px 5px 5px -6px #888888;
}

.greetings {
    display: block;
    padding-bottom: 20px;
    color: var(--base-color) !important;
    font-size: 21px;
    padding-top: 0px;
}

.first-name {
    color: var(--base-color) !important;
    font-size: 15px;
    padding-top: 15px;
}


.last-name {
    color: var(--base-color) !important;
    font-weight: bold;
    font-size: 15px;
}

.job-description {
    padding-top: 1px;
    display: block;
}

.position {
    display: block;
}

.pointer {
    cursor: pointer;
}

.main-header {
    font-size: 21px !important;
    font-weight: normal !important;
    padding-top: 5px !important;
}

.widget {
    background-color: var(--header-background-color);
    padding: 15px 15px 15px 15px;
    border-radius: 5px;
    font-size: 13px;
    color: #727171;
    margin-right: 15px;
    min-height: 300px;
    cursor: pointer;
    box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

    .widget i {
        width: 25px;
        text-align: center;
        padding-bottom: 10px;
    }

.widget-additional {
    text-align: center;
}

.widget-link {
    text-align: center;
    font-size: 14px !important;
    display: block;
    padding-top: 20px;
}

.certification-text {
    padding-top: 20px;
}

.disabled-notes {
    background-color: var(--header-background-color);
    border-radius: 5px;
    padding: 0px 1px 0px 5px;
}

.dashboard-container {
    background-color: var(--header-background-color);
    padding: 15px 15px 5px 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-size: 13px;
    color: #727171;
    box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

    .dashboard-container i {
        width: 25px;
        text-align: center;
        padding-bottom: 10px;
    }

.dashboard-header {
    color: var(--base-color) !important;
    font-weight: bold;
    font-size: 13.3px;
    margin-bottom: 5px;
}

.widget-header {
    font-size: 16px !important;
    border-bottom: 1px dotted var(--reverse-color);
}

    .widget-header i {
        width: 33px !important;
        font-size: 18px;
        padding-top: 2px;
        text-align: left;
    }

.my-working-calendar, .my-non-working-calendar {
    border-collapse: collapse;
    width: 100%;
}

    .my-working-calendar td, .my-working-calendar th,
    .my-non-working-calendar td, .my-non-working-calendar th {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
        color: var(--color);
    }

    .my-working-calendar tr:nth-child(even),
    .my-non-working-calendar tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .my-working-calendar tr:hover,
    .my-non-working-calendar tr:hover {
        background-color: #ddd;
    }

    .my-working-calendar th,
    .my-non-working-calendar th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: center;
        background-color: var(--base-color) !important;
        color: white;
    }

.widgets-one .widget {
    /* Firefox */
    width: -moz-calc(100% - 15px);
    /* WebKit */
    width: -webkit-calc(100% - 15px);
    /* Opera */
    width: -o-calc(100% - 15px);
    /* Standard */
    width: calc(100% - 15px);
    margin-bottom: 15px;
}

.widgets-two .widget {
    float: left;
    /* Firefox */
    width: -moz-calc(50% - 15px);
    /* WebKit */
    width: -webkit-calc(50% - 15px);
    /* Opera */
    width: -o-calc(50% - 15px);
    /* Standard */
    width: calc(50% - 15px);
    margin-bottom: 15px;
}


.dashboard-item {
    padding-bottom: 5px;
    padding-left: 3px;
}

.clock {
    font-size: 23px;
    color: #a9a9a9;
}

.employee-img {
    float: left;
    margin-right: 13px;
}

.employee-name {
    font-size: 13px;
    font-weight: bold;
}

.employee-jobdescription {
    font-size: 11px;
    font-weight: normal;
}

.employee-item {
    margin-bottom: 8px;
    clear: both;
    border-top: dotted 1px var(--reverse-color);
    padding-top: 10px;
}

/*Dashboard layout*/
.dashboard-itm {
    float: left;
    width: 100%;
}

.small-100 {
    width: 100%;
}

.small-95 {
    width: 95%;
}

.small-60 {
    width: 60%;
}

.small-50 {
    width: 50%;
}

.small-40 {
    width: 40%;
}

.small-20 {
    width: 20%;
}

.greetings-small {
    display: none !important;
}

.additional-dashboard-info {
    display: none !important;
}

@media (min-width: 780px) {
    .mgreeting {
        display: block !important;
    }

    .mid-100 {
        width: 100%;
    }

    .mid-70 {
        width: 70%;
    }

    .mid-60 {
        width: 60%;
    }

    .mid-50 {
        width: 50%;
    }

    .mid-40 {
        width: 40%;
    }

    .mid-33 {
        width: 33.3%;
    }

    .mid-30 {
        width: 30%;
    }

    .mid-20 {
        width: 20%;
    }
}

@media (min-width: 1160px) {
    .big-100 {
        width: 100%;
    }

    .big-60 {
        width: 60%;
    }

    .big-50 {
        width: 50%;
    }

    .big-40 {
        width: 40%;
    }

    .big-33 {
        width: 33.3%;
    }

    .big-30 {
        width: 30%;
    }

    .big-25 {
        width: 25%;
    }

    .big-20 {
        width: 20%;
    }

    .additional-dashboard-info {
        display: block !important;
    }
}

@media (min-width: 1300px) {
    .vbig-20 {
        width: 20%;
    }

    .vbig-25 {
        width: 23%;
    }

    .vbig-60 {
        width: 60%;
    }

    .vbig-15 {
        width: 17%;
    }

    .vbig-50 {
        width: 50%;
    }

    .additional-dashboard-info {
        display: block !important;
    }
}

.logo-croper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    margin-bottom: 5px;
}

    .logo-croper .rounded {
        height: auto;
        width: 100%;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 0px;
        -ms-transform: translateY(-50%) translateY(-50%);
        margin-left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .logo-croper .rounded_h {
        -webkit-border-top-left-radius: initial !important;
        border-top-left-radius: initial !important;
        display: inline;
        margin: 0 auto;
        height: 100%;
        width: auto;
        margin-left: 50%;
        transform: translateX(-50%);
    }

.circle-img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.notification-item {
    font-size: 12px;
    min-height: 35px;
    padding-top: 10px;
    border-top: 1px dotted var(--reverse-color);
    position: relative;
    width: 100%;
}

    .notification-item a {
        font-size: 12px;
        color: #727171 !important;
        display: block;
        padding-right: 10px;
        font-weight: normal !important;
        font-weight: 400 !important;
    }

        .notification-item a:hover {
            color: var(--base-color) !important;
        }

    .notification-item span {
        position: absolute;
        right: 0;
        top: 9px;
        color: #ff6868;
        /*background-color: white;*/
        padding: 1px 6px;
        border-radius: 7px;
        font-size: 11px;
        font-weight: bold;
    }

.action-item, .action-item-highlighted {
    font-size: 12px;
    min-height: 35px;
    padding-top: 10px;
    border-top: 1px dotted var(--reverse-color);
    position: relative;
    width: 100%;
}

    .action-item i, .action-item-highlighted i {
        width: 13px;
        text-align: left;
        padding-bottom: 10px;
    }

    .action-item a {
        font-size: 12px;
        color: #727171 !important;
        display: block;
        padding-right: 14px;
        font-weight: 400 !important;
    }

    .action-item-highlighted a {
        font-size: 12px;
        color: #ffbf56 !important;
        display: block;
        padding-right: 14px;
    }

    .action-item a:hover {
        color: var(--base-color) !important;
    }

    .action-item span {
        position: absolute;
        right: 0;
        top: 9px;
        color: black;
        padding: 1px 5px;
        font-size: 11px;
        font-weight: bold;
    }


.dashboard-container-collapsible .x-paneltitle {
    font: 600 14px/20px Roboto, sans-serif;
}

.dashboard-container-collapsible .x-panel-body-el {
    background-color: var(--header-background-color) !important;
}

.dashboard-container-collapsible {
    border-radius: 5px;
    box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.widget-title {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    padding-top: 25px;
}

.widget-balance {
    text-align: center;
    font-weight: bold;
    font-size: 21px;
    padding: 15px 0px 10px;
    color: var(--base-color) !important;
}


.widget-absence-balance-text {
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    padding-bottom: 15px;
    color: var(--base-color) !important; /*#0B15F5;*/
    text-transform: uppercase;
}

.widget-button {
    height: 105px;
    width: 50%;
    float: left;
}

.widget-button-tab {
    height: 75px;
    width: 25%;
    float: left;
}

.widget-button-inner-tab {
    margin: 2px 10px 0px 10px;
    border-bottom: 3px solid #727171;
}

.active .widget-button-inner-tab {
    border-color: var(--base-color) !important;
}

.widget-button-inner {
    margin: 10px 10px 0px 10px;
    border: 1px solid #a3acb147;
}

.widget-button a {
    display: block;
    text-align: center;
    padding: 15px;
    color: #727171;
}

.active.widget-button-tab a {
    color: var(--base-color) !important;
}

.active.widget-button-tab i {
    color: var(--base-color) !important;
}

.widget-button-tab a {
    display: block;
    text-align: center;
    padding: 0px 10px 0px 10px;
    color: #727171 !important;
}

.widget-button i {
    font-size: 25px !important;
    text-align: center !important;
    padding-bottom: 0px !important;
}

.widget-button-tab i {
    font-size: 25px !important;
    text-align: center !important;
    padding-bottom: 0px !important;
}

.widget-button p {
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}

.widget-button-tab p {
    margin-bottom: 9px !important;
    margin-top: 8px !important;
    font-weight: bold;
}

.task {
    width: 65%;
    font-size: 11px !important;
    float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.task-link {
    text-align: center;
    padding-top: 15px;
    display: block;
}

.task i {
    width: 15px !important;
    font-size: 8px !important;
    padding-bottom: 2px !important;
    text-align: left !important;
}

.overdue {
    color: #ec0d0dad !important;
}

.leave {
    color: #ec0d0dad !important;
}

.task-date {
    clear: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 10px;
    font-weight: bold;
}

.widget-img {
    box-shadow: 0px 5px 5px -5px #888888;
    float: left;
    margin-bottom: 7px;
    margin-top: 3px;
    height: 60px;
    width: 60px;
}

.widget-label {
    display: block;
    clear: both;
    padding: 4px 0px 4px 0px;
}

.employee-join-left {
    width: 100%;
    padding-bottom: 10px;
    padding-top: 5px;
}

.employee-join-collapsed {
    display: none;
}

.employee-join-expanded {
    display: block;
}

.employee-join-left-inner {
    width: 65%;
    float: left;
}

.employee-join {
    width: 65%;
    float: left;
}

.employee-details {
    clear: right;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 5px;
}

.employee-join {
    padding-bottom: 10px;
    padding-top: 5px;
}

.loading {
    text-align: center;
    padding: 0px 20px 0px 0px;
    padding-top: 22%;
}

    .loading .x-loading-spinner-outer {
        max-height: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

.tip-employee-name {
    display: block;
    font-weight: bold;
}

.tip-employee-dep {
    display: block;
}

.tip-employee-job {
    display: block;
}

.x-content-panel .x-paneltitle {
    cursor: pointer !important;
}

.transparent-link {
    color: #727171 !important;
}

.course-to-enrol {
    cursor: pointer;
    background-color: #f3f3f3;
    padding: 15px 15px 10px 15px;
    border-radius: 5px;
    font-size: 13px;
    color: var(--reverse-alt-border-color);
    margin: 5px 15px 10px 15px;
}

    .course-to-enrol .title {
        font-size: 15px;
        color: var(--base-color) !important;
        font-weight: bold;
        padding-bottom: 3px;
    }

    .course-to-enrol .course-right-top {
        position: absolute;
        top: 33px;
        right: 25px;
        text-align: right;
        max-width: 30%;
    }

    .course-to-enrol .course-right-bottom {
        position: absolute;
        bottom: 10px;
        right: 25px;
        text-align: right;
        max-width: 30%;
    }

.nongridtitle {
    font-size: 17px;
    font-weight: bold;
    padding: 10px 10px 10px 16px;
}

.course-to-enrol .notes {
    max-height: 75px;
    overflow: hidden;
    max-width: 70%;
}

.course-to-enrol .sub-title {
    font-weight: bold;
    max-width: 70%;
    color: #727171;
}

.places-left {
    width: 100%;
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}

.places-left-label {
    width: 100%;
    text-align: center;
    font-size: 10px;
}

.btn-link {
    background: none !important;
    border: none;
    padding: 0 !important;
    color: var(--base-color);
    cursor: pointer;
    font: inherit !important;
}

    .btn-link .x-text-el {
        text-transform: none !important;
    }

    .btn-link .x-inner-el {
        background: none !important;
        border: none !important;
    }

.absence-dashboard-info {
    width: 100%;
    float: left;
    font-size: 12.3px;
    text-transform: uppercase;
    color: #5f5f5f;
    font-weight: bold;
    margin-bottom: 10px;
}

@media (min-width: 1180px) {
    .absence-dashboard-info {
        font-size: 13.3px;
    }
}

@media (min-width: 880px) {
    .absence-dashboard-info {
        width: 20% !important;
    }

    .absence-dashboard-info-body {
        margin: 5px 15px !important;
    }
}

.absence-dashboard-info-body {
    margin: 5px;
    padding: 15px;
    text-align: center;
    height: 100%;
    min-height: 80px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.absence-dashboard-value {
    font-size: 30px;
    line-height: 35px;
    color: #eb7777;
    font-weight: 200;
    padding-bottom: 5px;
}

.employee-dashboard-info,
.system-usage-dashboard-info {
    width: 100%;
    float: left;
    font-size: 12.3px;
    text-transform: uppercase;
    color: #5f5f5f;
    font-weight: bold;
    margin-bottom: 10px;
}

@media (min-width: 1180px) {
    .employee-dashboard-info {
        font-size: 13.3px;
    }

    .system-usage-dashboard-info {
        font-size: 13.3px;
    }
}

@media (min-width: 1180px) {
    .employee-dashboard-info {
        width: 14.28% !important;
    }

    .employee-dashboard-info-body {
        margin: 5px 10px !important;
    }

    .system-usage-dashboard-info {
        width: 16.60% !important;
    }
}

.employee-dashboard-info-body {
    margin: 5px;
    padding: 15px;
    text-align: center;
    height: 100%;
    min-height: 80px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.employee-dashboard-value {
    font-size: 30px;
    line-height: 35px;
    color: #eb7777;
    font-weight: 200;
    padding-bottom: 5px;
}

.my-tab .x-tab.x-has-text .x-inner-el {
    padding: 10px 6px !important;
}

.my-tab .x-button .x-text-el {
    white-space: normal !important;
    text-align: center;
}

.my-tab .x-tabbar {
    background-color: transparent !important;
    box-shadow: none !important;
}

.my-tab .x-tab.x-active .x-inner-el {
    background-color: transparent !important;
}

.my-tab .x-tab.x-hovered .x-inner-el {
    background-color: transparent !important;
}

.my-tab .x-tab .x-inner-el {
    background-color: transparent !important;
}

.my-tab .x-tab .x-active {
    color: var(--base-color) !important;
}

.my-tab .x-tab {
    color: #909090 !important;
}

    .my-tab .x-tab.x-hovered {
        color: var(--base-color) !important;
    }

    .my-tab .x-tab.x-active {
        color: var(--base-color) !important;
    }

    .my-tab .x-tab.x-hovered .x-icon-el {
        color: var(--base-color) !important;
    }

    .my-tab .x-tab.x-active .x-icon-el {
        color: var(--base-color) !important;
    }

    .my-tab .x-tab .x-icon-el {
        color: #909090 !important;
    }

.my-tab .x-button .x-text-el {
    text-transform: initial !important;
}

.my-tab .x-tab.x-active .x-active-indicator-el {
    background-color: var(--base-pressed-color) !important;
    display: block !important;
    height: 2px;
}

.dataview-interactionlog {
    background-color: var(--reverse-color) !important;
}

    .dataview-interactionlog .interactionlog-item {
        border-bottom: 1px dashed #ccc;
        clear: both;
    }

    .dataview-interactionlog .interactionlog-item {
        border-bottom: 1px dashed #ccc;
        margin-top: 5px;
        padding: 5px 10px 10px 10px;
        min-height: 60px;
    }

    .dataview-interactionlog .x-selected {
        background-color: aliceblue;
    }

    .dataview-interactionlog .img {
        display: inline-block;
        width: 100px;
        min-height: 60px;
        float: left;
    }

        .dataview-interactionlog .img i {
            font-size: 30px;
            display: block;
            padding-top: 2px;
        }

    .dataview-interactionlog .subject {
        font-weight: bold;
    }

    .dataview-interactionlog .date {
        font-size: 90%;
    }

.alt-toolbar .x-button {
    filter: brightness(102%);
    margin-right: 5px !important;
    background-color: var(--alt-background-color);
}

.employee-toolbar .x-button {
    filter: brightness(102%);
    margin-right: 5px !important;
    background-color: var(--reverse-color);
    border-radius: 8px;
}

    .employee-toolbar .x-button .x-inner-el {
        border-radius: 8px;
    }

.interactionlog-item .notes p {
    margin: 0px !important;
}

.employee-toolbar {
    background-color: transparent !important;
}

.alt-toolbar .x-toolbar-body-el {
    padding: 5px 10px;
}

.employee-toolbar .x-toolbar-body-el {
    padding: 5px 8px 5px 0px;
}

.alt-toolbar .loaded-label .x-innerhtml {
    color: #5c5c5c9e !important;
    font-weight: normal;
    font-size: 13.5px;
}

.employee-top-toolbar {
    padding: 20px 10px 1px 0px !important;
    margin: 25px 15px 0px 0px;
}


    .employee-top-toolbar .x-inner-el {
        padding: 15px !important;
    }

.photo-button-top {
    position: absolute !important;
    bottom: 0px;
    left: 5px;
}

.photo-button-bottom {
    position: absolute !important;
    bottom: 0px;
    left: 27px;
}

    .photo-button-bottom .x-inner-el,
    .logo-button-bottom .x-inner-el {
        padding: 1px !important;
    }

.photo-button-top .x-inner-el {
    padding: 1px !important;
}

.height-280 {
    height: 280px !important;
    padding-top: 10px !important;
    margin-top: 0px !important;
}

.photo-button-bottom .x-icon-el,
.logo-button-bottom .x-icon-el {
    color: #727171 !important;
}

.photo-button-top .x-icon-el {
    color: #727171 !important;
}

    .photo-button-top .x-icon-el:before {
        font-size: 12px !important;
    }

.photo-button-bottom .x-icon-el:before,
.logo-button-bottom .x-icon-el:before {
    font-size: 12px !important;
}

.logo-button-bottom {
    position: absolute !important;
    bottom: 0px;
    left: 80px
}

.terms-of-use {
    font-size: 14px;
    font-weight: 600;
}

.edit-form-header-text {
    font-size: 14px;
    margin-bottom: 10px;
}

.dataview-fav-item {
    text-align: center;
    width: 90px;
    padding: 8px 5px 5px 5px;
    height: 112px;
    margin-top: 5px;
}

    .dataview-fav-item div {
        font-size: 31px;
        color: var(--base-dark-color);
    }

    .dataview-fav-item p {
        font-size: 90% !important;
        font-weight: bold;
    }

.set-fav .x-icon-el:before {
    font-size: 10px !important;
    color: #ffbf56;
}

.set-fav .x-icon-el {
    height: 18px !important;
    width: 18px !important;
}

.open-fav .x-icon-el:before {
    color: #ffbf56;
}

.main-menu .x-icon-el:before {
    color: #ffbf56;
}

.main-menu .x-inner-el {
    padding: 8px 8px 8px 6px !important;
}

.wide {
    width: 25px !important;
    height: 25px !important;
}

    .wide:before {
        font-size: 20px !important;
    }

.fav-delete-btn {
    right: 4px;
    top: 3px;
    position: absolute;
    color: black;
    display: none;
}

.x-hovered .fav-delete-btn {
    display: block !important;
}

.x-treelist.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.x-treelist.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1);
}

.x-treelist.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: #11171a;
}


.x-treelist-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.x-treelist-container::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1);
}

.x-treelist-container::-webkit-scrollbar-thumb {
    background-color: #11171a;
}


.x-component-body-el.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.x-component-body-el.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(30,30,30,0.1);
}

.x-component-body-el.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(30,30,30,0.2);
}

    .x-component-body-el.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-thumb:hover {
        background: rgba(30,30,30,0.4);
    }

    .x-component-body-el.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-thumb:active {
        background: rgba(0,0,0,.9);
    }

.x-list-outer-ct.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.x-list-outer-ct.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(30,30,30,0.1);
}

.x-list-outer-ct.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(30,30,30,0.2);
}

    .x-list-outer-ct.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-thumb:hover {
        background: rgba(30,30,30,0.4);
    }

    .x-list-outer-ct.x-nativescroller.x-overflow-y-auto::-webkit-scrollbar-thumb:active {
        background: rgba(0,0,0,.9);
    }

.x-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.x-scrollbar::-webkit-scrollbar-track {
    background: rgba(30,30,30,0.1);
}

.x-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(30,30,30,0.2);
}

    .x-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(30,30,30,0.4);
    }

    .x-scrollbar::-webkit-scrollbar-thumb:active {
        background: rgba(0,0,0,.9);
    }

.x-scrollbar-corner {
    width: 10px !important;
    height: 10px !important;
}

.x-scrollbar.x-vertical {
    margin-bottom: 10px !important;
}

.x-scrollbar.x-horizontal {
    margin-right: 10px !important;
}


.scroller::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scroller::-webkit-scrollbar-track {
    background: rgba(30,30,30,0.1);
}

.scroller::-webkit-scrollbar-thumb {
    background: rgba(30,30,30,0.2);
}

    .scroller::-webkit-scrollbar-thumb:hover {
        background: rgba(30,30,30,0.4);
    }

    .scroller::-webkit-scrollbar-thumb:active {
        background: rgba(0,0,0,.9);
    }

.popup-menu .x-body-el {
    background-color: #565656 !important;
}

.x-treelist-item-tool {
    font-size: 17px !important;
    text-align: left !important;
}

.x-treelist-item-icon {
    font-size: 17px !important;
    padding-left: 3px !important;
}

.menu-toggle .x-icon-el:before {
    font-size: 18px !important;
}

.x-show-selection > .x-listitem.x-selected {
    background-color: var(--selected-background-color) !important;
}

.x-listitem.x-odd {
    background-color: var(--alt-background-color) !important;
}

/*.x-gridcolumn > .x-header-el {
    background-color: var(--grid-header) !important;
}*/
.column-section-heading {
    font-size: 15px;
    color: var(--highlight-color);
}

.absence-transfer-edit-column .x-pack-start:first-child .x-container:first-child {
    padding: 0 10px 0 10px;
}

.absence-transfer-edit-column .txt-right-bold .x-label-el {
    padding-right: 0 !important;
}

.select-list {
    background-color: var(--reverse-color) !important;
}

    .select-list .x-listitem {
        background-color: var(--reverse-color) !important;
    }

    .select-list .x-hovered {
        background-color: var(--hovered-background-color) !important;
    }

.main-menu .x-inner-el {
    background-image: none !important;
}

.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--base-highlight-color);
    color: var(--base-highlight-color);
    animation: dot-flashing 0.5s infinite linear alternate;
    animation-delay: 0.25s;
}

    .dot-flashing::before, .dot-flashing::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }

    .dot-flashing::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: var(--base-highlight-color);
        color: var(--base-highlight-color);
        animation: dot-flashing 0.5s infinite alternate;
        animation-delay: 0s;
    }

    .dot-flashing::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: var(--base-highlight-color);
        color: var(--base-highlight-color);
        animation: dot-flashing 0.5s infinite alternate;
        animation-delay: 0.5s;
    }

@keyframes dot-flashing {
    0% {
        background-color: var(--base-highlight-color);
    }

    50%, 100% {
        background-color: var(--base-dark-color);
    }
}

.delete-dropdown-item {
    position: absolute;
    top: 12px;
    right: 12px;
}

    .delete-dropdown-item:hover {
        color: var(--base-color) !important;
        cursor: pointer;
    }


.ux-rating-picker {
    overflow: hidden;
    color: #ccc;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: 0.8;
    display: inline-block;
    vertical-align: top;
    line-height: 1;
}

.ux-rating-picker-inner {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    white-space: nowrap;
}

.ux-rating-picker-over.ux-rating-picker-track-over {
    color: #ccc;
}

    .ux-rating-picker-over.ux-rating-picker-track-over > * > .ux-rating-picker-value {
        display: none;
        width: 0;
    }

        .ux-rating-picker-over.ux-rating-picker-track-over > * > .ux-rating-picker-value:hover {
            color: inherit;
        }

    .ux-rating-picker-over.ux-rating-picker-track-over > * > .ux-rating-picker-tracker {
        display: inline-block;
    }

.ux-rating-picker-value,
.ux-rating-picker-tracker {
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    top: 0;
    width: 0;
    height: 100%;
    color: #f08a15;
}

.ux-rating-picker-tracker {
    display: none;
}

.ux-rating-picker-over {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.cursor-pointer {
    cursor: pointer;
}

.news-headline {
    color: var(--base-color) !important; /*#0B15F5;*/
    font-weight: 400;
}

.news-body {
    padding-left: 35px;
}

.news-read-more-button {
    background-color: var(--base-color) !important;
    border: none;
    color: white;
    padding: 9px 18px;
    text-align: center;
    text-decoration: none;
    display: block;
    cursor: pointer;
    font-size: 16px;
    width: 115px;
    margin: 10px 0 10px 0;
}

.news-btn-container {
    display: flex;
    justify-content: flex-end;
}

.dataview-multisort-item {
    padding: 8px;
    margin: 8px 8px 4px 8px;
    width: 110px;
    height: 135px;
    text-align: center;
    border: 1px solid var(--selected-background-color);
    border-radius: 3px;
}

.dataview-item-image {
    width: 110px;
    height: 76px;
    display: table-cell;
    vertical-align: middle;
}

.dataview-multisort-item img {
    max-width: 75px;
    max-height: 65px;
}

.dataview-multisort-item h4 {
    margin-top: 0px;
    word-break: break-word;
    font-weight: 400 !important;
}

.x-float-wrap > .x-mask {
    display: none;
}

.open-vancies-form .x-dataview {
    background-color: #fff;
    padding-top: 10px;
}

.custom-grid-header {
    background-color: var(--base-dark-color);
    color: var(--base-foreground-color);
    padding: 12px 0 12px 15px;
    font: 600 18px/24px Roboto, sans-serif;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.open-vancies-date {
    width: 100%;
    display: inline;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.align-right {
    text-align: right
}

.open-vacancy-dates {
    position: absolute;
    right: 25px;
    top: 15px;
    text-align: right;
}

.open-vacancy .title {
    font-size: 21px;
    color: var(--base-color) !important;
    padding-bottom: 3px;
}

.open-vacancy-notes {
    padding-top: 20px;
}

.open-vacancy {
    cursor: pointer;
    background-color: #f3f3f3;
    padding: 15px 15px 10px 15px;
    border-radius: 5px;
    font-size: 13px;
    color: #727171;
    margin: 5px 15px 10px 15px;
}

.dhx_config_free .dhx_field_content {
    max-height: 68px !important;
}

.dhx_config_item .item_body, .dhx_shadow .item_body {
    padding: 0 !important;
}

.dhx_config_rows {
    overflow: auto !important;
    max-height: -webkit-fill-available;
}

.system-usage-dasboard-balance {
    text-align: center;
    font-weight: bold;
    font-size: 21px;
    padding: 85px 0px 10px;
    color: var(--base-color) !important;
}

.fieldset-nopadding .x-form-fieldset-body-el {
    padding: 0px !important;
}

.panel-nopadding .x-formpanel-body-el {
    padding: 0px !important;
}

.main-searchbox .x-input-wrap-el {
    background-color: rgb(0 0 0 / 37%) !important;
}


.x-treelist-navMenu {
    background-color: #353535;
    /*background-color: var(--background-color);*/
    background-position: 24px 0%;
    padding: 0 0 0 0;
}

    .x-treelist-navMenu .x-treelist-toolstrip {
        background-color: transparent;
    }

    .x-treelist-navMenu .x-treelist-item-selected.x-treelist-item-tool {
        color: white;
        background-color: #737373;
    }

        .x-treelist-navMenu .x-treelist-item-selected.x-treelist-item-tool:after {
            height: 44px;
            position: absolute;
            top: 0;
            left: 0;
            content: " ";
            width: 4px;
            background-color: white;
        }

    .x-treelist-navMenu .x-treelist-item-selected > .x-treelist-row {
        background-color: #737373;
    }

    .x-treelist-navMenu .x-treelist-item-tool {
        padding-left: 16px;
        padding-left: var(--content-padding);
        padding-right: 16px;
        padding-right: var(--content-padding);
    }

    .x-treelist-navMenu .x-treelist-item-tool-floated:after {
        height: 44px;
        position: absolute;
        top: 0;
        left: 0;
        content: " ";
        width: 4px;
        background-color: white;
        /*background-color: var(--accent-light-color);*/
    }

    .x-treelist-navMenu .x-treelist-item-icon:before,
    .x-treelist-navMenu .x-treelist-item-tool:before,
    .x-treelist-navMenu .x-treelist-item-expander {
        line-height: 44px;
        text-shadow: 1px 2px 4px black;
    }

    .x-treelist-navMenu .x-treelist-item-icon,
    .x-treelist-navMenu .x-treelist-item-tool,
    .x-treelist-navMenu .x-treelist-item-expander {
        text-align: center;
        background-repeat: no-repeat;
        background-position: 0 center;
    }

    .x-treelist-navMenu .x-treelist-item-loading .x-treelist-item-icon {
        background-image: url(images/tree/loading.gif);
        color: transparent;
    }

    .x-treelist-navMenu .x-treelist-item-icon,
    .x-treelist-navMenu .x-treelist-item-tool {
        color: white;
        font-size: 18px;
        width: 24px;
    }

    .x-treelist-navMenu .x-treelist-item-tool {
        width: 56px;
    }

    .x-treelist-navMenu .x-treelist-item-expander {
        color: white;
        font-size: 22px;
        width: 24px;
    }

        .x-treelist-navMenu .x-treelist-item-expander:after {
            content: 'keyboard_arrow_down';
            font-feature-settings: 'liga';
            font-family: 'Material Icons';
            line-height: 44px;
        }

    .x-treelist-navMenu .x-treelist-item-expanded > * > * > .x-treelist-item-expander:after {
        content: 'keyboard_arrow_up';
        font-feature-settings: 'liga';
        font-family: 'Material Icons';
        line-height: 44px;
    }

    .x-treelist-navMenu .x-treelist-item-text {
        color: white;
        /*color: var(--color);*/
        margin-left: 40px;
        margin-right: 24px;
        font-size: 16px;
        line-height: 44px;
    }

    .x-treelist-navMenu .x-treelist-row {
        padding-left: 16px;
        padding-left: var(--content-padding);
        padding-right: 16px;
        padding-right: var(--content-padding);
    }

    .x-treelist-navMenu .x-treelist-row-over:before,
    .x-treelist-navMenu .x-treelist-item-selected > .x-treelist-row:before {
        content: " ";
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
    }

.dark .x-treelist-navMenu .x-treelist-item-floated .x-treelist-container {
    background-color: #4f4f4f;
    /*background-color: var(--accent-light-color);*/
}

.dark .x-treelist-navMenu .x-treelist-item-expanded {
    background-color: #353535;
    /*background-color: var(--accent-light-color);*/
}

.dark .x-treelist-navMenu .x-treelist-row-over {
    background-color: #2a2a2a;
    /*background-color: var(--accent-light-color);*/
}

    .dark .x-treelist-navMenu .x-treelist-row-over:before {
        background-color: #2a2a2a;
        /*background-color: var(--accent-light-color);*/
    }

.dark .popup-menu .x-body-el {
    padding: 0px !important;
}

.x-treelist-navMenu .x-treelist-item-floated .x-treelist-container {
    background-color: #8c8c8c;
    /*background-color: var(--accent-light-color);*/
}

.x-treelist-navMenu .x-treelist-row-over:before {
    background-color: white;
    /*background-color: var(--accent-light-color);*/
}

.x-treelist-navMenu .x-treelist-item-selected > .x-treelist-row-over:before {
    background-color: white;
    /*background-color: var(--accent-color);*/
}

.x-treelist-navMenu .x-treelist-item-selected > .x-treelist-row:before {
    background-color: white;
    /*background-color: var(--accent-color);*/
}

.x-treelist-navMenu .x-treelist-item-floated .x-treelist-container {
    width: auto;
}

.x-treelist-navMenu .x-treelist-item-floated > .x-treelist-row {
    background-color: #353535;
    /*background-color: var(--background-color);*/
}

.x-treelist-navMenu .x-treelist-item-floated > .x-treelist-container {
    margin-left: -16px;
}

.x-big .x-treelist-navMenu .x-treelist-item-floated > .x-treelist-container {
    margin-left: -16px;
}

.x-treelist-navMenu .x-treelist-item-floated > * > * > .x-treelist-item-text {
    margin-left: 0;
}

.x-treelist-navMenu .x-treelist-item-floated > * .x-treelist-row {
    cursor: pointer;
    padding-left: 0;
}

.x-treelist-navMenu .x-treelist-item-floated .x-treelist-row:before {
    width: 0;
}

.x-treelist-navMenu .x-treelist-item-floated > .x-treelist-row-over {
    background-color: #353535
    /*background-color: var(--background-color);*/
}

    .x-treelist-navMenu .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
        color: white;
        /*color: var(--color);*/
    }

.x-treelist-navMenu .x-treelist-item-expanded {
    background-color: #8c8c8c;
}

    .x-treelist-navMenu .x-treelist-item-expanded > .x-treelist-item-expander:after {
        content: 'keyboard_arrow_up';
        font-feature-settings: 'liga';
        font-family: 'Material Icons';
        line-height: 1;
    }

.x-treelist-navMenu .x-treelist-item-collapsed > * > .x-treelist-item-expander:after {
    content: 'keyboard_arrow_down';
    font-feature-settings: 'liga';
    font-family: 'Material Icons';
    line-height: 1;
}

.x-treelist-navMenu .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-icon {
    color: #515151;
    transition: none;
}

.x-treelist-navMenu .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-text {
    color: white;
    /*color: var(--color);*/
    transition: none;
}

.x-treelist-navMenu .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-expander {
    color: white;
    /*color: var(--color);*/
    transition: none;
}

.x-treelist-navMenu .x-treelist-row-over {
    background-color: #cccccc;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

    .x-treelist-navMenu .x-treelist-row-over > * > .x-treelist-item-icon {
        transition: none;
    }

    .x-treelist-navMenu .x-treelist-row-over > * > .x-treelist-item-text {
        color: white;
        /*color: var(--color);*/
        transition: none;
    }

    .x-treelist-navMenu .x-treelist-row-over > * > .x-treelist-item-expander {
        color: white;
        /*color: var(--color);*/
        transition: none;
    }

.x-treelist-navMenu .x-treelist-expander-first .x-treelist-item-icon {
    left: 24px;
}

.x-treelist-navMenu .x-treelist-expander-first .x-treelist-item-text {
    margin-left: 64px;
    margin-right: 0;
}

.x-treelist-navMenu .x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 32px;
}

.x-treelist-navMenu .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 8px;
}

.x-button-navMenu .x-icon-el {
    color: white;
    width: 16px;
    height: 16px;
}

.general-frame .x-panelheader {
    border-radius: 2px 2px 0px 0px;
}

.general-frame .x-titlebar {
    border-radius: 2px 2px 0px 0px;
}

.x-gridcolumn > .x-header-el {
    font: 600 13px Roboto, sans-serif !important;
    background-color: var(--grid-header) !important;
}

.x-headercontainer {
    border-width: 0px !important;
    background-color: var(--grid-header);
}

.loaded-label .x-innerhtml {
    color: #ffffff9e !important;
}

.toolbar-button .x-inner-el {
    padding: 8px 10px !important;
}

.x-mobile .x-toolbar-body-el {
    padding: 7px 6px;
}

.x-mobile .x-panelheader > .x-body-el {
    padding: 0 9px 0 10px;
}

.x-panelheader-accordion {
    background-color: var(--header-background-color);
}

.x-panelheader .x-button {
    color: var(--base-foreground-color) !important;
}

.x-edit .x-mask {
    opacity: 0 !important;
}

.x-field > .x-label-el {
    padding: 11px 10px 1px 0 !important;
}

.x-button-left {
    text-align: left !important;
}

.left-item {
    margin-left: -16px !important;
}

.login-background {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

    .login-background .x-mask {
        opacity: 0.3 !important;
    }

.x-mask {
    opacity: 0.47 !important;
}

    .x-mask.x-has-message .x-mask-inner {
        border-radius: 5px;
    }

    .x-mask .x-mask-message {
        color: #9a9a9a;
    }

    .x-mask.x-has-message .x-loading-spinner-outer {
        height: 40px;
    }

    .x-mask .x-mask-inner {
        background: rgb(0 0 0);
    }

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0px;
}

    .hr-sect::before {
        content: "";
        flex-grow: 1;
        background: rgba(206, 206, 206, 0.35);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 8px 0px 0px;
    }

    .hr-sect::after {
        content: "";
        flex-grow: 1;
        background: rgba(206, 206, 206, 0.35);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 0px 0px 8px;
    }

.x-big .sign-in {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.x-big .hr-sect {
    margin: 0px !important;
}

.sign-in {
    padding-bottom: 10px;
}

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

    .x-toast .x-toast-body-el {
        background-color: #eb5252;
    }

.x-error-toast .x-toast-body-el {
    background-color: #eb5252;
}

.x-success-toast .x-toast-body-el {
    background-color: #63a26a;
}

.x-titlebar .x-button {
    background-color: var(--base-color);
    margin-left: 3px;
    filter: brightness(103%);
}

.x-panelheader .x-button-segmented .x-inner-el {
    background-color: var(--base-dark-color);
}

.x-panelheader .x-pressed .x-inner-el {
    background-color: var(--base-dark-color) !important;
    color: var(--color);
}

.x-panelheader .x-hovered .x-inner-el {
    background-color: var(--base-dark-color) !important;
    color: var(--color);
}

.dark .x-panelheader .x-pressed .x-inner-el {
    background-color: var(--base-dark-color) !important;
    color: var(--base-color) !important;
}

.dark .x-panelheader .x-hovered .x-inner-el {
    background-color: var(--base-dark-color) !important;
    color: var(--base-color) !important;
}

.x-panelheader .x-hovered .x-inner-el {
    border-color: rgba(0, 0, 0, 0.075);
    background-color: rgba(17, 17, 17, 0.075);
    background-image: none;
}

.x-panelheader .x-button {
    background-color: var(--base-dark-color);
    margin-left: 4px;
}

.x-segmentedbutton .x-button {
    margin-left: 1px !important;
}

.x-filter .x-has-icon {
    background-color: transparent;
}

.x-panelheader .x-toolbar .x-button {
    color: var(--base-foreground-color) !important;
}

.x-panelheader .x-button .x-font-icon:before, .x-fi:before {
    color: var(--base-foreground-color) !important;
}

.x-panelheader .x-label {
    color: var(--base-foreground-color) !important;
}

.x-filter {
    background-color: var(--header-background-color);
}

    .x-filter .x-chipview {
        min-height: 42px;
        background-color: var(--header-background-color);
    }

#ShiftScheduler .dhx_cal_event_line {
    font-size: 11px !important;
    border: none;
    padding: 0 1px 0 3px;
    border: 1px solid black;
}

#ShiftScheduler .event-not-published::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top: 13px solid red;
    border-left: 13px solid transparent;
    width: 0;
}

#ShiftScheduler .event-conflict {
    border: 1px dashed black !important
}

/*#ShiftScheduler .event-crossed {
    background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(255, 255, 255, 0.72) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(247, 239, 239, 0.71) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%) !important;
}*/

#ShiftScheduler .event-crossed:after {
    position: absolute;
    content: '';
    background: rgb(255 255 255 / 55%);
    display: block;
    width: 130%;
    height: 9px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 0;
    bottom: 0;
}

#ShiftScheduler .event-crossed:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.scheduler-project-pic {
    height: 40px;
    width: 40px;
    position: absolute !important;
    left: 7px;
    top: 12px;
    font-size: 20px;
    line-height: normal !important
}

.heirarchy-overlay-right {
    position: relative;
    overflow: hidden; /* This is important to ensure the content inside the div doesn't protrude from the clipped corner */
}

    .heirarchy-overlay-right::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 25px; /* Adjust the width to change the size of the overlay */
        height: 25px;
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and transparency of the overlay */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); /* Creates a triangle shape for the top right corner */
    }

.dhx_cal_event_selected .sch-event-delete {
    display: block;
}

.sch-event-delete {
    position: absolute;
    background: black;
    color: white;
    z-index: 10000;
    border: none;
    bottom: 0px;
    right: 0px;
    height: 16px;
    width: 16px;
    font-size: 10px;
    padding: 0px;
    cursor: pointer;
    display: none;
    border: none;
    outline: none;
    border-top-left-radius: 2px;
}

:focus {
    outline: none !important;
}

.dhx_diagram_item {
    position: relative;
    overflow: visible; /* Ensure visibility of child elements */
}

.dhx_diagram_container .template .template_container {
    text-align: left;
}

.heirarchy-hover-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: var(--base-dark-color);
}

.heirarchy-hover-content {
    display: none;
    position: fixed;
    width: 200px; /* Ensure a fixed width for the hover content */
    padding: 10px;
    background-color: #333;
    color: white;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
}

    .heirarchy-hover-content ul {
        padding-left: 21px;
    }

.heirarchy-hover-container:hover .heirarchy-hover-content {
    display: block;
    z-index: 10000;
}

    .heirarchy-hover-container:hover .heirarchy-hover-content::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #333;
    }

#ResolutionPanel img {
    max-width: 100%;
}

.custom-calendar-btn {
    border: none !important;
    min-width: 28px !important;
}

.conflict-btn {
    border: none !important;
    min-width: 28px !important;
    color: red !important;
    display: none;
}

.dhx_cal_navline .dhx_cal_next_button {
    order: 3 !important;
}

.dhx_cal_navline .dhx_cal_today_button {
    order: 2 !important;
}

.dhx_cal_navline .dhx_cal_prev_button {
    order: 1 !important;
}

.dhx_cal_navline > div {
    order: 4 !important;
}