/* CUSTOM STYLES ========================================================== */
.set-no-scroll { position: fixed; overflow-y: scroll; width: 100%; }
.set-no-overflow { overflow: hidden; }
body.x-top-page .x-bottom-sheet-block { padding-top: 57px; }
.x-profile-section:last-child { border-bottom: none; }
.w-select { height: auto; border: none; }
li.x-perm-label-item:nth-child(2n),li.x-perm-type-opt-item:nth-child(2n) { background-color: #F5F5F5; }
.x-perm-type-group::before { content: ''; position: absolute; width: 16px; height: 16px; bottom: 0; left: -16px; border-bottom: 1px solid #cbcbcb; }
li.x-perm-type-opt-item:nth-child(2n)::before { content: ''; position: absolute; width: 16px; top: 0; bottom: 0; left: -16px; background-color: #F5F5F5; }
li.x-team-item:last-child { border-bottom: none; }
.x-chkbox-row:last-child { padding-bottom: 0; }
.x-form-row:last-child { margin-bottom: 0; }
.x-proj-sidebar,.x-main.for-kanban { height: calc(100vh - 57px); min-height: 0; }
.x-kb-col::after { content: ''; position: absolute; top: 0; bottom: 0; right: -24px; width: 24px; }
textarea { resize: vertical; }
input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }  
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

.x-prem-menu-link::after { content: ''; width: 24px; position: absolute; top: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); }
.x-prem-menu-item:hover .x-prem-menu-link::after { background: linear-gradient(90deg, rgba(242,244,249,0) 0%, rgba(242,244,249,1) 100%); }

/* ===== Scrollbar CSS ===== */
/* Firefox */
* { scrollbar-width: auto; scrollbar-color: #ECEFF1 #CFD8DC; }
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar { width: 12px; height: 12px; border-radius: 8px; }
    
*::-webkit-scrollbar-track { background: #CFD8DC; }

*::-webkit-scrollbar-thumb { background-color: #ECEFF1; border-radius: 0px; border: 2px solid #CFD8DC; }
*::-webkit-scrollbar-thumb:hover { background-color: #F5F5F5; border: 2px solid #CFD8DC; }

.x-content { overflow-y: hidden!important; }

/* TEXT OVERFLOW ========================================================== */
.for-message,
.x-datatable-unit,
.x-val-emp,
.x-text-limit,
.x-nav-user-profile-name,
.x-upload-grid-item-link,
.x-emp-val,.x-map-dir-unit-name { text-overflow: ellipsis; }
.x-datatable-unit:hover { overflow: visible; }

/* DISABLE TEXT SELECT ==================================================== */
input,
.x-input-chkbox-label
{ -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; }

/* CUSTOM COMPONENT STYLES ================================================ */
.tippy-box { font-size: 9px; padding: 2px 4px; }
.iti { display: block; }
.x-input-helper::before { content: '–'; font-size: 16px; color: #80DEEA; position: absolute; left: 0; top: -1px; }
.x-input-helper[data-helpertext="locked"]::before { content: '\eb9d'; font-family: Remix, sans-serif; font-size: 12px; color: #0c6cde; position: absolute; left: 0; top: 0; }

.x-breadcrumb-link::before { content: '/'; position: absolute; left: -10px; top: 4px; font-weight: 400; font-size: 16px; color: #E0E0E0; }
.x-input-trade-col:last-child { border-right: none; }
.x-nav-sidebar-group:first-child { border-bottom: none; }
.x-nav-sidebar-scroller,.x-bs-content { height: 100% } /* FIXES DOUBLE SCROLLBAR FOR SIMPLEBAR PLUGIN */

.x-tab-body .x-data-grid-card { height: auto!important; } /* FIXES THE DATATABLE HEIGHT FOR TRAININGS DATATABLE IN USER PROFILE */
.x-tab-body .x-datatable-body { margin-bottom: 0; }

.sl-wrapper { z-index: 9900!important; background-color: rgba(255,255,255,0.64); }

.select2 { width: 100%!important; }
.select2-container { z-index: 9999!important; }

#imp-fullscreen-wrap { z-index: 9000!important; }

.selectize-dropdown { z-index: 100!important; }

.il__trigger { min-height: 128px; padding: 8px 12px; border: solid 1px #d1d1d1; border-radius: 4px; }

.x-pev-container > textarea { resize: none!important; }

.x-icon.for-be-move:first-child { border-bottom: 1px solid #d4d7da; }

.x-panel-item-col.for-link:hover > .x-icon { display: block; }

.x-comp-contact-item::before { content: ''; position: absolute; top: -50px; left: -24px; width: 24px; height: 80px; border-left: solid 1px #BDBDBD; border-bottom: solid 1px #BDBDBD; border-bottom-left-radius: 12px; }

.x-input-toggle input[type="radio"]:checked ~ .x-input-toggle-label,
.x-input-toggle input[type="checkbox"]:checked ~ .x-input-toggle-label { background: rgb(0, 190, 240, 0.16); color: #1450f5; }
.x-input-chkbox > input[type=checkbox]::before { content: ""; display: block; position: absolute; width: 18px; height: 18px; top: -6px; left: -1px; border-radius: 24px; background-color:#faf9fd; border: solid 1px #d1d1d1; }
.x-input-chkbox > input[type=checkbox]::before { top: 0; left: 0; }
.x-input-chkbox > input[type=checkbox]:checked::before { content: ""; display: block; position: absolute; width: 18px; height: 18px; top: -6x; left: 0; border-radius: 24px; background-color:#1450f5; border: solid 1px #1450f5; }
.x-input-chkbox > input[type=checkbox]:checked::after { content: "\e9e0"; font-family: Remix, sans-serif; position: absolute; z-index: 2; top: -4px; left: 1px; font-size: 16px; font-weight: 400; color: #fff; }
.x-input-chkbox > input[type=checkbox]:checked::after { top: 2px; left: 2px; }

.x-input-switch-label:before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 12px; background: #fff; -webkit-transition: all 350ms cubic-bezier(.86, 0, .07, 1); transition: all 350ms cubic-bezier(.86, 0, .07, 1); }
.x-input-switch-button:checked + .x-input-switch-label { background: #2aac69; }
.x-input-switch-button:checked + .x-input-switch-label.for-approval { background: #1450f5; }
.x-input-switch-button:checked + .x-input-switch-label:before { left: 26px; }

.set-error { border-color: #f95a4e; }
input[disabled],div[disabled] { background-color: #e8eaed!important; color: #c0c0c0!important; border-color: #c0c0c0!important;; }

.selectize-input { min-height: 32px; padding: 6px 12px; margin-bottom: -4px; box-shadow: none; border-radius: 4px; } /*HEIGHT*/
.selectize-input span.name { margin-right: 8px; }
.selectize-control { min-height: 32px; }
.selectize-control.multi .selectize-input.has-items { min-height: 32px; padding: 4px 4px 0 4px; } /*HEIGHT*/
.selectize-control.multi .selectize-input>div { margin: 0 4px 4px 0; padding: 2px 6px; font-size: 11px; font-weight: 600; background: #1a74ff; color: #fff; border-radius: 3px; }
.selectize-control.plugin-remove_button .item .remove { padding: 0 6px; border-left-color: #3887ff; }
.selectize-dropdown-content > div { padding: 8px; }
.selectize-dropdown-content > div > span { margin-right: 8px; }
.selectize-dropdown, .selectize-input, .selectize-input input { font-size: 12px; }
.selectize-dropdown { box-shadow: 0 4px 8px -3px rgb(35 43 55 / 24%); border-radius: 4px; border: 1px solid #cbcbcb; }
.selectize-input.focus { box-shadow: none; border-color: #1a74ff; }
.selectize-control.single .selectize-input:after { right: 8px!important; }

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px!important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px!important; }

.x-bs-list-scroller { overflow-x: hidden!important; }

.x-stepper-block { overflow-y: hidden!important; }
.x-stepper-item:not(:last-child)::before { content: ""; position: absolute; z-index: 100; bottom: 9px; right: -19px; width: 28px; height: 0; border-top: 1px solid #BDBDBD; transform: rotate(122deg); }
.x-stepper-item:not(:last-child)::after { content: ""; position: absolute; z-index: 100; top: 7px; right: -19px; width: 28px; height: 0; border-top: 1px solid #BDBDBD; transform: rotate(56deg); }
.x-stepper-item:last-child > a { padding-right: 16px; border-top-right-radius: 4px; }
.x-stepper-item:not(:last-child) > a::after { content: ""; position: absolute; z-index: 2; top: 0; right: -12px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 12px solid #fff; }
.x-stepper-link.w--current::after { border-left: 12px solid #fff; }
.x-stepper-item:not(:first-child) > a { padding-left: 24px; }
.x-stepper-item:not(:first-child) > a::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 12px solid #eee; }

.x-timeline-item::before { content: ""; width: 0; height: 100%; position: absolute; top: 32px; left: 40px; bottom: 0; border-left: 1px solid #B0BEC5; }

.x-history-list-start::before,.x-history-list-end::before,.x-history-item::before { content: ""; width: 0; position: absolute; top: 0; left: 104px; bottom: 0; border-left: 1px solid #B0BEC5; }
.x-history-list-start::before { top: 40px; }
.x-history-list-end::before { bottom: 40px; }

.x-msf-custom-nav-link.for-current > .x-icon { background-color: #00bef0!important; color: #fff!important; }

#wf-form-Tenancy-Floorplan-Form .x-datatable-opt-group { min-width: 240px; }

.x-ti-control-col:not(:last-child) { border-right: solid 1px #d1d1d1 }

/* DATATABLES.NET OVERRIDING CSS */
/* .dataTables_filter { display: none; } */
/* div.dataTables_wrapper { width: 2400px; margin: 0 auto; } */
.dtfc-fixed-left, .dtfc-fixed-right { z-index: 1; background-color: #fff; }
.dataTables_info { position: fixed; left: 284px; bottom: 48px; }
.dataTables_paginate.paging_simple_numbers { position: fixed; right: 16px; bottom: 42px; }
.dataTable thead { position: sticky; top: 0; background-color: #EEEEEE!important; z-index: 100; }
thead th { background-color: #F5F5F5!important; }
.x-bottom-sheet-block .dataTable thead,
.for-td-reset .dataTable thead,
.x-dialog .dataTable thead,
.for-simple-list .dataTable thead { position: relative; top: auto; }
.is-complex th.td-right-border { padding: 4px 12px!important; box-shadow: inset -1px 0 #d1d1d1; }
.is-complex .dataTables_scrollHead th { padding: 4px 12px!important; box-shadow: inset -1px 0 #d1d1d1; }
.is-complex .dataTables_scrollHead th:last-child { box-shadow: none; }
.td-right-border { box-shadow: inset -1px 0 #d1d1d1; }
.td-left-border { box-shadow: inset 1px 0 #d1d1d1; }
.dataTable tr:not(:last-child) { box-shadow: inset 0 -1px #d1d1d1; }
table.dataTable.no-footer,
.dataTables_wrapper.no-footer .dataTables_scrollBody { border-color: #d1d1d1; }

.dataTables_length,.dataTables_filter { display: none; }

.dataTables_empty { padding: 40px 12px!important; color: #989898; }

.x-datatable-body tr.group { background-color: #ececec!important; box-shadow: 2px 0px 0px 0px #b4b4b4 inset; font-weight: 600; }
.x-datatable-body tr.group ~ tr { box-shadow: 2px 0px 0px 0px #cdcdcd inset, 0px 0px 1px 0px #d1d1d1 inset; }
.x-datatable-body tr.group > td:first-child::after { content: 'Program'; margin-left: 6px; padding: 4px 6px; font-size: 10px; text-transform: uppercase; color: #1450f5; background: #c3d3ff; border-radius: 2px; }

/* CUSTOM STYLES FOR MASTER TRACKER ONLY */
:root {
  --dt-row-selected: 225, 245, 254!important;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 9, 10, 11!important;
  --dt-row-stripe: 0, 0, 0!important;
  --dt-row-hover: 0, 0, 0!important;
  --dt-column-ordering: 0, 0, 0!important;
  --dt-html-background: white!important;
}

#claimsViewer #baseTable_wrapper { padding-bottom: 64px; }
#claimsViewer .dataTables_info { position: fixed; bottom: 38px; }
#claimsViewer .dataTables_paginate { position: fixed; bottom: 41px; right: 8px; }
#claimsViewer .dataTables_scrollBody { height:calc(100vh - 204px)!important; max-height: none!important; }
#simpleClaimTable thead th { white-space: nowrap; overflow: hidden; }
#simpleClaimTable div.dataTables_scrollBody > table > tbody > tr > td:nth-child(2n) { background-color: #FAFAFA; box-shadow: inset 0 -1px #d1d1d1; }
#simpleClaimTable td.dtfc-fixed-left { box-shadow: none!important; }
#simpleClaimTable thead th { white-space: nowrap; overflow: hidden; border-right: solid 1px #E0E0E0; }
#claimsViewer .dataTable tr:not(:last-child) { box-shadow: none; }

table.dataTable tr:hover,
table.dataTable tr:hover td.dtfc-fixed-left { background-color: #F5F5F5!important; }

table.dataTable thead th,
table.dataTable thead td { border-color: #d1d1d1; }
table.dataTable th { text-align: left; font-size: 11px; }

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody th,
table.dataTable tbody td { padding: 12px; }

table.dataTable .x-btn-container { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; }

#claimsViewer table.dataTable thead th { padding: 8px 12px; }

table.dataTable.stripe tbody>tr.odd.selected,
table.dataTable.stripe tbody>tr.odd>.selected,
table.dataTable.display tbody>tr.odd.selected,
table.dataTable.display tbody>tr.odd>.selected { background-color: #f5f5f5; box-shadow: inset 2px 0 #00bef0; }
tr.selected td { background-color: #f5f5f5; box-shadow: inset 0 -1px #d1d1d1; }
table.dataTable.display tbody>tr.odd.selected>.sorting_1,
table.dataTable.order-column.stripe tbody>tr.odd.selected>.sorting_1 { background-color: #f5f5f5; }

table.dataTable thead th.select-checkbox { position: relative; }
table.dataTable thead th.select-checkbox:before,
table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody th.select-checkbox:before { content: ""!important; display: block!important; position: absolute!important; width: 18px!important; height: 18px!important; top: 50%!important; left: 50%!important; margin: auto!important; border-radius: 4px!important; background-color: #faf9fd!important; border: solid 1px #d1d1d1!important; transform: translate(-50%,-50%)!important; }
table.dataTable thead th.select-checkbox.selected:after,
table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after { content: "\e9e0"!important; font-family: Remix, sans-serif; position: absolute; width: 18px; height: 18px; z-index: 2; top: 50%; left: 50%; margin: auto!important; font-size: 16px!important; font-weight: 400; color: #fff; background-color: #1450f5; border: solid 1px #1450f5; border-radius: 4px; transform: translate(-50%,-50%); text-shadow: none; }

.x-stats-col:not(:last-child) { border-right: none; }
.x-stats-col:first-child { border-radius: 4px 0 0 4px; }
.x-stats-col:last-child { border-radius: 0 4px 4px 0; }

.sk-folding-cube {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
        transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1a74ff;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
        animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
        animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
} 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
} 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
} 
}

@keyframes sk-foldCubeAngle {
0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
} 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
} 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
}
}

/* CUSTOM LIST COUNTERS ================================================== */
.x-upload-grid-block,.x-sprog-lis,.x-ti-req-check-list,.x-cmp-sum-list,.x-db-list { counter-reset: list-counter; }
.x-upload-grid-item,.x-sprog-item,.x-ti-req-check-item,.x-cmp-sum-item,.x-db-item { counter-increment: list-counter; }
.x-upload-grid-item::before { content: counter(list-counter); position: absolute; top: 6px; left: 12px; color: #cbcbcb; font-weight: bold; }
.x-sprog-item::before { content: counter(list-counter); position: absolute; top: 0; left: 0; color: #212121; }
.x-ti-req-check-item::before { content: counter(list-counter); display: flex; justify-content: center; align-items: center; -webkit-box-pack: center; -webkit-box-align: center;
  position: absolute; width: 24px; height: 24px; border-radius: 24px; background-color: #0c6cde; top: 12px; left: 0; color: #fff; }
.x-cmp-sum-item::before { content: counter(list-counter); position: absolute; top: 7px; left: 13px; color: #989898; text-align: center; }
.x-cmp-sum-item::after { content: " "; position: absolute; top: -33px; left: -16px; width: 16px; height: 48px; border-left: solid 1px var(--lines); border-bottom: solid 1px var(--lines); border-radius: 0 0 0 8px; }
.x-db-item::before { content: counter(list-counter); position: absolute; top: 12px; left: 12px; color: #989898; text-align: center; }

@media only screen and (max-width: 1367px) {
    .x-imp-wrapper { max-width: 960px; }
}