body {
    padding-top: 46px;
    padding-bottom: 10px;
    background-color: var(--body-bg) !important;
    color: var(--body-fg) !important;
}

/*#region Shrink Navbar*/
@media (min-width: 768px) {
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 6px;
    }
}

.navbar {
    min-height: 36px;
}

.navbar-brand {
    height: 36px;
    padding: 8px 15px;
}

.navbar-toggle {
    height: 36px;
    margin: 0px;
    border: none;
    background-color: transparent !important;
}

/*#endregion*/

.zf-green {
    color: #68b604;
}

h1 {
    white-space: nowrap;
}

h1>small {
    margin-left: 15px;
}

.btn-success {
    background-color: #57a900;
    background-image: -moz-linear-gradient(top, #70d900, #57a900);
    background-image: -ms-linear-gradient(top, #70d900, #57a900);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#70d900), to(#57a900));
    background-image: -webkit-linear-gradient(top, #70d900, #57a900);
    background-image: -o-linear-gradient(top, #70d900, #57a900);
    background-image: linear-gradient(top, #70d900, #57a900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d900', endColorstr='#57a900', GradientType=0);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
    background-color: #57a900;
}

.btn-success:active,
.btn-success.active {
    background-color: #57a900;
}

div.container a.brand {
    background: url("../img/zf2-logo.png") no-repeat scroll 0 10px transparent;
    margin-left: 0;
    padding: 8px 20px 12px 40px;
}

@media screen {

    form div.form-group.is-required>label::after,
    .display-as-required-control>label::after {
        content: " *";
        color: red;
    }

    form div.form-group.is-required>label {
        white-space: nowrap;
    }
}

form div.form-group.is-invalid {
    border: solid #f88 2px;
    border-radius: 6px;
    padding: 8px;
}

form div.form-group.is-invalid span.validation-error {
    color: #f44;
    margin-top: 0.3em;
}

thead tr.user-filter {
    background-color: var(--body-bg);
}

thead tr.user-filter input {
    border-radius: 0px;
    border-style: dashed;
    height: 2em;
    padding: 2px 6px;
}

input[type=number] {
    width: 8em;
    margin-left: 0.5em;
}

input.date-picker {
    width: 8em;
    display: inline-block;
    margin-left: 0.5em;
}

input.date-picker[data-navigate] {
    margin-left: 0px;
    text-align: center;
}

.ui-datepicker-trigger {
    display: inline-block;
    margin-left: 0.8em;
}

button.date-navigate-back {
    margin-left: 0.5em;
}

button.date-navigate-back[data-navigate] {
    margin-left: 0;
}

.form-group {
    margin-bottom: 0;
}

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

.inline-block {
    display: inline-block;
}

.no-top-margin {
    margin-top: 0px;
}

.no-bottom-margin {
    margin-bottom: 0px;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 2px 6px;
}

.table>thead>tr>th {
    white-space: nowrap;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--table-row-odd);
}

.table-striped>tbody>tr:nth-of-type(even) {
    background-color: var(--table-row-even);
}

.pagination-sm>li>a,
.pagination-sm>li>span {
    padding: 2px 10px;
}

h1,
.h1 {
    font-size: 30px;
}

h2,
.h2 {
    font-size: 26px;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    margin-top: 10px;
}

span.control-hint {
    margin-left: 1em;
    font-size: 90%;
    font-weight: normal;
}

.breadcrumb {
    margin-bottom: 10px;
    background-color: var(--breadcrumb-bg) !important;
    color: var(--body-fg) !important;
}

.context-menu {
    border: solid thin gray;
    position: absolute;
    background-color: var(--nav-dropdown-bg);
    z-index: 9999;
    padding: 8px 8px 8px 8px;
    font-size: 14px;
    text-align: left;
    display: none;
    cursor: default;
    overflow-x: hidden;
    max-height: 90vh;
}

.context-menu-visible {
    display: inline-block;
}

.context-menu-label {
    font-weight: bold;
    background-color: #e4e4e4;
}

.context-menu-item,
.context-menu-label {
    display: block;
    white-space: nowrap;
    padding: 3px 20px;
    line-height: 1.42857;
    color: var(--body-fg);
}

.context-menu-item:hover {
    cursor: pointer;
    background-color: var(--nav-dropdown-bg-hov);
    color: var(--nav-dropdown-fg);
}

.context-menu-item a {
    color: var(--body-fg);
}

.context-menu-item a:hover {
    text-decoration: none;
}

.context-menu-divider {
    border-top: solid thin gray;
    width: 100%;
}

/* #region Navbar */

nav.navbar-inverse {
    background: var(--nav-bg);
}

.navbar-collapse {
    min-width: 1200px;
}

.navbar-collapse .navbar-nav>li>a {
    color: #bebebe;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a {
    box-shadow: none !important;
    background: var(--nav-bg-active) !important;
}

/* text colours */
.navbar-collapse .navbar-nav>li>a {
    color: var(--nav-fg) !important;
}

.navbar-collapse .navbar-nav>li>a:hover {
    color: #ffffff;
}

.dropdown-menu {
    background-color: var(--nav-dropdown-bg);
    color: var(--nav-dropdown-fg);
}

.dropdown-menu li a {
    color: var(--nav-dropdown-fg);
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    background-image: none !important;
    background-color: var(--nav-dropdown-bg-hov);
    color: var(--nav-dropdown-fg);
}

.dropdown-menu .sub-menu li a {
    color: var(--nav-dropdown-fg);
}

/* #endregion */

/* #region Searching */
.search-highlight,
.search-highlight-alt {
    background-color: var(--search-highlight);
    border-radius: 3px;
    border-bottom: 3px solid var(--search-highlight-alt);
    padding-top: 3px;
}

.search-highlight-alt {
    border-bottom: none;
    padding-top: 0;
    padding: 5px;
}

/* #endregion */

/* #region Modern Loading */

.modern-loader>div {
    width: 40px;
    aspect-ratio: 1;
    animation: l5-0 1s infinite steps(1);
    animation-direction: reverse;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modern-loader>div::before,
.modern-loader>div::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 50%;
    left: 0;
    transform-origin: bottom right;
    animation:
        l5-1 0.5s infinite linear alternate,
        l5-2 0.5s infinite steps(1) alternate;
}

.modern-loader>div::after {
    --s: -1, -1;
}

@keyframes l5-0 {
    0% {
        transform: translate(-50%, -50%) scale(1, 1) rotate(0deg)
    }

    50% {
        transform: translate(-50%, -50%) scale(1, -1) rotate(90deg)
    }
}

@keyframes l5-1 {
    0% {
        transform: scale(var(--s, 1)) perspective(150px) rotateX(0deg)
    }

    100% {
        transform: scale(var(--s, 1)) perspective(150px) rotateX(180deg)
    }
}

@keyframes l5-2 {
    0% {
        background: var(--modern-loading-1);
    }

    50% {
        background: var(--modern-loading-2);
    }
}

/* #endregion */

form {
    margin-top: 10px;
}

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

.fa-remove {
    color: var(--action-delete)
}

.fa-step-backward,
.all-ok {
    color: green;
}

.warning-text {
    color: red;
}

.warning {
    color: red;
    padding: 30px 0 30px 0;
}

.popup-alert {
    margin: 15px 0 5px 0;
}

/* Bootstrap table style overrides */
th {
    text-align: center;
}

/* Table cells conveying special semantics */
td.day-today {
    background-color: var(--day-today) !important;
}

td.day-today-greyed_out {
    background-color: #e7ffec !important;
}

#captcha {
    margin-top: 20px;
}

/* 'signed-out' inactivity box */
.jumbotron {
    margin: 50px 0 50px 0;
    text-align: center;
    border: solid 1px #275d8d;
}

.title-user-name,
.title-post-name {
    color: #777;
    font-size: 60%;
    white-space: nowrap;
    margin-left: .5em;
    margin-right: .5em;
}

#main_page_content {
    position: relative;
}

div.popup_cell:hover {
    cursor: hand;
    cursor: pointer;
    background-color: #fffcf0;
}

select option:disabled {
    cursor: not-allowed;
    font-size: 14px;
    color: #aaaaaa;
}

.negative-value {
    color: red !important;
}

.dropdown-menu {
    height: auto;
    max-height: 90vh;
    overflow-x: hidden;
}

.form-helptip-popup,
.form-helptip,
.form-helptip-cb,
.helptip-style {
    width: 16px;
    height: 16px;
}

.form-helptip-popup {
    float: left;
}

.form-helptip-popup::before {
    content: "\f05a";
    color: var(--form-helptip-popup) !important;
    font-family: FontAwesome;
}

.form-helptip,
.helptip-style {
    margin: 0 5px 0 8px;
    display: inline-block;
}

.form-helptip::before {
    content: "\f05a";
    color: var(--form-helptip-popup) !important;
    font-family: FontAwesome;
}

.form-helptip-cb {
    margin: 5px 0 0 8px;
    display: inline-block;
}

.form-helptip-cb::before {
    content: "\f05a";
    color: var(--form-helptip-popup) !important;
    font-family: FontAwesome;
}

.form-helptip:hover,
.form-helptip-cb:hover {
    cursor: pointer;
    cursor: hand;
}

.form-hierarchy-toggle,
.form-previous-field-value,
.form-next-field-value,
.form-field-history {
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 16px !important;
    margin: 0 5px 0 0px;
}

.form-field-date-controls {
    display: inline-block;
}

#helptippopup .modal-dialog .modal-content .modal-body div:nth-child(2) {
    margin-left: 30px;
}

.hfx-blue {
    color: #005D8E;
}

.hfx-green {
    color: #69A243;
}

.helptip-table th,
.helptip-table td {
    border: solid 1px white;
    padding: 7px;
}

.helptip-table th {
    background-color: #dddddd;
}

.helptip-table td {
    background-color: #eeeeee;
    text-align: center;
}

.adjustment-not-active {
    text-decoration: line-through;
}

/* Inspired by https://www.w3schools.com/w3css/4/w3.css */
.w3-note {
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b
}

.w3-panel {
    padding: 0.01em 16px
}

.w3-panel {
    margin-top: 16px;
    margin-bottom: 16px
}

.w3-panel p {
    margin-bottom: 16px;
    margin-top: 16px;
}

/* Callout styles - used for on screen messages/info */
.callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 18px;
}

.callout-info {
    border-left-color: #1b809e;
}

.callout-info h4 {
    color: #1b809e;
}

.callout-danger {
    border-left-color: #ce4844;
}

.callout-danger h4 {
    color: #ce4844;
}

.callout-warning {
    border-left-color: #aa6708;
}

.callout-warning h4 {
    color: #aa6708;
}

.callout-success {
    border-left-color: #d6e9c6;
}

.callout-success h4 {
    color: #d6e9c6;
}

.callout+.callout {
    margin-top: -5px;
}

/* TextScroll plugin styles */
.textscroll {
    position: relative;
}

.textscroll-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    padding-left: 2px;
    font-family: 'Glyphicons Halflings';
    font-size: 30px;
    line-height: 40px;
    background-color: #fefefe;
    color: #999;
    border: solid 1px #ccc;
    text-align: center;
}

.textscroll-btn:hover {
    cursor: pointer;
    background-color: #efefef;
    color: #333;
}

.textscroll-btn-up {
    right: -40px;
    bottom: 0;
    border-radius: 10px 10px 0 0;
}

.textscroll-btn-up:after {
    content: "\e113";
}

.textscroll-btn-down {
    top: 0;
    right: -40px;
    border-radius: 0 0 10px 10px;
}

.textscroll-btn-down:after {
    content: "\e114";
}

/* datepicker - standard styles */

.date-picker.form-control {
    padding: 0;
    height: 28px;
    border-radius: 0;
    border: solid 1px #aaa;
}

.date-navigate-back,
.date-navigate-fwd {
    border: solid 1px #aaa;
    height: 28px;
    width: 24px;
    background-color: #efefef;
}

.date-navigate-fwd:hover,
.date-navigate-back:hover {
    background-color: #e0e0e0;
}

.date-navigate-back {
    border-radius: 3px 0 0 3px;
}

.date-navigate-back~.date-navigate-back {
    border-radius: 0;
}

.date-navigate-fwd {
    border-radius: 0;

}

.date-navigate-fwd+.date-navigate-fwd {
    border-radius: 0 3px 3px 0;
}

/* datepicker with a single button styles */
.date-picker.date-picker-with-button.form-control,
.date-picker.date-picker-with-button,
.date-picker.date-picker-single,
.form-group:has(input.date-picker+button.ui-datepicker-trigger) input.date-picker {
    height: 34px;
    padding: 6px 2px 6px 12px;
    border-radius: 3px;
    border: solid 1px #ccc;
}

.date-picker.date-picker-with-button~button,
.date-picker.date-picker-single~button,
.form-group:has(input.date-picker+button.ui-datepicker-trigger) input.date-picker+button.ui-datepicker-trigger {
    margin-left: -2px;
    padding: 6px;
    border-radius: 0 3px 3px 0;
    border: solid 1px #ccc;
}

.date-picker.date-picker-with-button:focus,
.date-picker.date-picker-single:focus,
.form-group:has(input.date-picker+button.ui-datepicker-trigger) input.date-picker:focus {
    border: 1px solid #78b4e4;
}

.date-picker.date-picker-with-button:focus~button,
.date-picker.date-picker-single:focus~button,
.form-group:has(input.date-picker+button.ui-datepicker-trigger) input.date-picker:focus+button.ui-datepicker-trigger {
    border-color: #66afe9;
    border-left-color: #ccc;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(120, 180, 228, .6);
}

.date-picker.date-picker-with-button.has-error~button,
.date-picker.date-picker-single.has-error~button,
.form-group:has(input.date-picker+button.ui-datepicker-trigger) input.date-picker.has-error+button.ui-datepicker-trigger {
    position: relative;
    border: solid 1px rgba(255, 0, 0, 0.5);
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    border-left-width: 0;
}

.header-dtp button {
    border-color: #ccc;
}

.header-dtp input {
    height: 28px !important;
    border-radius: 0 !important;
}

.header-dtp .ui-datepicker-trigger {
    height: 28px !important;
    padding: 0 6px !important;
    border-radius: 0 !important;
}

/*  details - summary styling
    Used for displaying inline help
*/
.details {
    color: #337ab7;
    margin-bottom: 12px;
}

.details.details-first {
    margin-top: 12px;
}

.details__summary {
    position: relative;
    display: list-item;
    margin-bottom: 5px;
    color: #1d70b8;
    cursor: pointer;
}

.details__summary:focus {
    outline: none;
}

.details .details__summary-text {
    text-decoration: underline;
}

.details .details__summary:hover {
    cursor: pointer;
}

.details .details__text {
    color: var(--body-fg);
    padding: 15px;
    padding-left: 20px;
    border-left: 5px solid #b1b4b6;
}

div.table-responsive table {
    margin-bottom: 0;
}

div.table-responsive .grid-loading {
    text-align: center;
    vertical-align: middle;
}

.zfc-table-footer {
    margin-top: 10px;
}

.open>.zfc-export-items {
    top: auto !important;
    bottom: 100% !important;
    right: 0 !important;
    margin-bottom: 5px;
}

.open>.zfc-export-items li i {
    margin-left: -10px;
    margin-right: 5px;
}


.btn-primary,
.btn-default,
.btn-danger,
.btn-success,
.btn-info,
.btn-warning {
    background-image: none;
    box-shadow: none !important;
    transition: background .3s linear;
    text-shadow: none;
}

.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-fg) !important;
    border: 1px solid var(--btn-primary-border) !important;
}

.btn-primary:not(.disabled):not(:disabled):hover {
    background-color: var(--btn-primary-hov-bg) !important;
}

.btn-secondary {
    border: solid 1px #337ab7;
}

.btn-secondary:not(.disabled):not(:disabled):hover {
    border-color: #001d80;
    color: #001d80;
}

.btn-primary+.btn-secondary {
    margin-left: 1rem;
}

.btn-default {
    text-shadow: none;
    background-image: none !important;
    transition: background .3s linear;
    background-color: var(--btn-default-bg);
    color: var(--btn-default-fg);
    border-color: var(--btn-default-border);
    box-shadow: none;
}

.btn-default.active {
    background-color: var(--btn-default-active) !important;
    border-color: var(--btn-default-active-border) !important;
    box-shadow: none;
}

.btn-default.disabled,
.btn-default:disabled {
    background-color: var(--btn-default-disabled) !important;
    color: var(--btn-default-fg) !important;
    border: 1px solid var(--btn-default-border) !important;
    cursor: not-allowed;
}

.btn-default:hover {
    background-color: var(--btn-default-hov-bg);
    color: var(--btn-default-fg);
}

.btn-success {
    background-color: var(--btn-success-bg);
    color: var(--btn-success-fg);
    border: 1px solid var(--btn-success-border);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-fg);
    border: 1px solid var(--btn-danger-border);
}

.btn-info {
    background-color: var(--btn-info-bg);
    color: var(--btn-info-fg);
    border: 1px solid var(--btn-info-border);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    color: var(--btn-warning-fg);
    border: 1px solid var(--btn-warning-border);
}

.btn-success:hover {
    background-color: var(--btn-success-hov-bg);
}

select[multiple] option {
    background-color: var(--input-bg);
    color: var(--input-fg);
}

select[multiple] option:checked {
    background-color: var(--input-selected);
}

select[multiple] option::before {
    content: "\f096";
    font-family: FontAwesome;
    display: inline-block;
    font-weight: 400;
    letter-spacing: 7px;
}

select[multiple] option:checked::before {
    content: "\f046";
    font-family: FontAwesome;
    display: inline-block;
    font-weight: 400;
    letter-spacing: 7px;
}

/* loading progress bar */
.progress-loading {
    width: 150px;
    border: solid 1px #ccc;
    margin-top: 7px;
    margin-bottom: -7px;
}

.progress-loading .progress-bar.active {
    animation: progress-bar-stripes 1s linear infinite;
    background-image: linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    animation-direction: reverse;
}

.progress-inline {
    display: inline-block;
    margin: 0;
}

.progress-centre,
.ajax-show-modal.progress-centre {
    margin-right: initial;
    margin: 0 auto;
}

.modal-footer-loading {
    width: calc(100% - 277px);
    text-align: center;
    display: inline-block;
}

.map {
    height: 400px;
    width: 100%;
}

@media only screen and (max-height:700px) {
    .map {
        height: 300px;
    }
}

@media only screen and (max-height:500px) {
    .map {
        height: 200px;
    }
}

.geolocation-popup .extra-marker .marker-time {
    font-size: 12px;
    margin-top: 8px;
}

.geolocation-popup .close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.linkedin {
    margin: -30px -14px 0 0;
    text-align: right;
}

input[type="time"].form-control {
    line-height: normal;
}

label.disabled,
span.disabled {
    color: #999 !important;
}

.btn.btn-prev-next-assignment,
.btn.btn-prev-next-assignment:focus {
    width: 25px;
    height: 25px;
    padding: 2px;
    border-radius: 50%;
    color: #fff;
    border-color: #ccc;
    background-color: #3b5998;
    background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
}

.btn.btn-prev-next-assignment:focus {
    line-height: 23px;
    border: solid 2px #66afe9;
    outline: none;
}

.btn.btn-prev-next-assignment:hover {
    background-color: #1e417e;
    background-image: linear-gradient(to bottom, #1e417e 0, #1e417e 100%);
}

.person-nav {
    display: inline-block;
    position: relative;
    top: -3px;
}

.filter-bar-title {
    display: inline-block;
    margin: 0 12px 0 6px;
}

.filter-bar-option {
    display: inline-block;
    margin-right: 6px;
}

.filter-bar-option input[type=checkbox] {
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: 2px;
}

/* roster period editor - date control styling */
.period-details-date .date-picker.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[data-columnuniqueid=adjustment-reasons] .adjustment,
.colour-cell {
    border-radius: 5px;
    font-size: 0.9em;
    padding: 1px 8px !important;
    text-align: center;
    /*text-transform: uppercase;*/
}

footer .software-version {
    padding-right: 10px;
    color: #bbb;
    float: right;
}

/* grid styling update - removes double borders and aligns rows so they look lined up */
tr:first-child [data-columnuniqueid]:not(.hidden) {
    margin-top: 0;
}

tr:last-child [data-columnuniqueid]:not(.hidden) {
    margin-top: -1px;
}

[data-columnuniqueid] {
    border-bottom: none !important;
}

/* [data-columnuniqueid]:after {
    content: ' ';
    display: block;
    height: 85px;
    width: 1px;
    position: absolute;
    right: -1px;
    bottom: 0;
    background-color: #ddd;
} */

tr:last-child [data-columnuniqueid]:not(.hidden):after {
    height: 0;
}

[data-columnuniqueid]~[data-columnuniqueid] {
    margin-top: 0;
}

/* horrible hack for firefox */
@-moz-document url-prefix() {
    [data-columnuniqueid]~[data-columnuniqueid] {
        margin-top: -1px;
    }
}

[data-columnuniqueid].link-cell {
    padding-top: 0;
}

.alert-small {
    padding: 5px 15px;
}

/* Export grid popup */

#export_grid_dialog {
    text-align: left;
}

#export_grid_dialog .modal-dialog {
    width: 300px;
}

#export_grid_dialog .modal-header {
    padding: 8px 10px 8px 20px;
}

#export_grid_dialog .modal-body {
    padding: 5px 10px 0 10px;
}

#export_grid_dialog #zfcGridExportOptions {
    margin-left: -50px;
}

#export_grid_dialog #zfcGridExportOptions .export-item {
    color: var(--body-fg);
}

#export_grid_dialog #zfcGridExportOptions .export-item:hover {
    cursor: pointer;
    background-color: var(--table-row-hover2);
}

.centred {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 100% !important;
}

.centred-button {
    display: block !important;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    max-width: 200px;
}

.logo {
    position: relative;
    height: 100px;
    overflow: hidden;
}

.logo-cell {
    overflow: visible;
}

.product-title {
    font-family: ostrich_sansmedium;
    text-align: center;
    height: 40px;
    letter-spacing: 0.3em;
    margin-top: 2em;
    margin-bottom: 3em;
    color: black;
}

/* HOME PAGE (PRE-LOGIN) TEXT */

/* #region ZFC DATAGRID */

/* Column headings row */
.zfcgrid .column-headers th {
    background-color: var(--table-header-bg);
    color: var(--table-header-fg);
}

/* column headings: arrows and non-hyperlink heading text */
/* column headings: hyperlink headings */
.zfcgrid .column-headers th,
.zfcgrid .column-headers th>a {
    color: white;
}

/* grid action icons */
.zfcgrid td[data-columnuniqueid="action"]>a>i.fa:not(.fa-remove) {
    color: var(--table-action-icons);
}

/* #endregion */

/* PLANNING SCREEN */
.vis-top {
    z-index: -2;
    background-color: var(--table-header-bg);
}

.vis-panel.vis-top .vis-major,
.vis-panel.vis-top .vis-minor,
.vis-top .vis-time-axis .vis-text {
    color: white;
}

/* END OF PLANNING SCREEN */

/*#region Panels*/

.panel>.panel-heading {
    background-image: none !important;
}

.panel-default>.panel-heading {
    background-color: var(--panel-heading);
    color: var(--panel-heading-txt);
}

.panel-success>.panel-heading {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-fg);
}

.panel-danger>.panel-heading {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-fg);
}

.panel-info>.panel-heading {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-fg);
}

.panel-warning>.panel-heading {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-fg);
}

/*#endregion*/

/*#region Controls*/

legend {
    color: var(--body-fg);
}

.close {
    color: var(--body-fg) !important;
}

.date-picker button {
    background-color: var(--btn-default-bg);
    color: var(--btn-default-fg);
}

.date-picker button.ui-datepicker-trigger {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.date-picker input+button.ui-datepicker-trigger {
    border-radius: 0 5px 5px 0;
}

select,
input[type='text'],
input[type='password'],
input[type='search'],
input:not([type]),
.form-group textarea,
.form-control,
.form-control:read-only,
body .select2-container--default .select2-search--dropdown .select2-search__field,
body .select2-container--default.select2-container--focus .select2-selection--multiple {
    background-color: var(--input-bg);
    color: var(--input-fg);
    box-shadow: none;
    outline: 0;
    transition: border .15s linear, box-shadow .15s linear;
}

select:not(.form-control),
input[type='text']:not(.form-control),
input[type='password']:not(.form-control),
input[type='search']:not(.form-control),
input:not([type]):not(.form-control),
.form-group textarea:not(.form-control) {
    border-radius: 5px;
    border: 1px solid #ccc;
}

select:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='search']:focus,
.form-group textarea:focus,
.form-control:focus,
.form-control:read-only:focus,
body .select2-container--default .select2-search--dropdown .select2-search__field:focus,
body .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

select:disabled,
input[type='text']:disabled,
input[type='password']:disabled,
input[type='search']:disabled,
.form-control textarea:disabled,
textarea:disabled,
input[type='text'].disabled {
    background-color: var(--input-disabled) !important;
    cursor: not-allowed;
}

/*#endregion*/

/*#region Pagination*/

.pagination>li>a,
.paging-control>ul>li>a,
.paging-control>ul>li>span {
    background: var(--pagination-bg);
    color: var(--pagination-fg);
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
    height: 24px;
    min-width: 24px;
    line-height: 20px;
    padding: 2px 7px;
    font-size: 12px;
}

.pagination>li>a {
    border: 1px solid #ddd !important;
}

.pagination>li>a:hover,
.paging-control>ul>li>a:hover,
.paging-control>ul>li>span:hover {
    background: var(--pagination-hov-bg);
    color: var(--pagination-hov-fg);
}

.pagination>li.active>a,
.paging-control>ul>li.active>a,
.paging-control>ul>li.active>span {
    background: var(--pagination-active-bg) !important;
    color: var(--pagination-active-fg) !important;
}

.pagination>li.disabled>a,
.paging-control>ul>li.disabled>a,
.paging-control>ul>li.disabled>span {
    background: var(--pagination-disabled-bg) !important;
    color: var(--pagination-disabled-fg) !important;
    cursor: not-allowed;
}

.paging-control>ul>li>span.ellipse {
    background: var(--pagination-bg);
    position: relative;
    padding: 2px 7px;
}

.paging-control>ul>li>span:hover.ellipse {
    background: var(--pagination-hov-bg) !important;
}

.paging-control>ul>li>span.ellipse:has(input):before {
    content: "…";
}

.paging-control>ul>li>span.ellipse input,
.zfc-page-picker input {
    position: absolute;
    left: -7px;
    width: 60px;
    top: -3px;
    height: 28px;
    z-index: 2;
}

.paging-control>ul>li>span.ellipse input:focus,
.zfc-page-picker input:focus {
    outline: none;
    border: 1px solid #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/*#endregion*/

/*#region Modal*/

.modal-content {
    background-color: var(--body-bg);
    color: var(--body-fg);
}

/*#endregion*/

/*#region Panels*/

.panel {
    background-color: var(--body-bg);
}

.panel-success {
    border-color: var(--panel-success);
}

.panel-danger {
    border-color: var(--panel-danger);
}

.panel-info {
    border-color: var(--panel-info);
}

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

/*#endregion*/

/*#region Alerts*/

.alert {
    background: none;
    text-shadow: none;
}

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

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-fg);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-fg);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-fg);
}

/*#endregion*/

/*#region Select2*/

/*
  Uses body at the begining to make them more specific as the control CSS appears to load afterwards.
  This causes dark mode to fail
*/

body .select2-dropdown {
    background-color: var(--nav-dropdown-bg);
}

body .select2-container--default .select2-selection--single {
    background-color: var(--input-bg);
}

body .select2-container--default .select2-results__option {
    color: var(--nav-dropdown-fg);
}

body .select2-container--default .select2-results__option:hover,
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--nav-dropdown-bg-hov);
    color: var(--nav-dropdown-fg);
}

body .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

body .select2-selection__rendered,
body .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--input-fg);
}

body .select2-container--default .select2-selection--multiple {
    background-color: var(--body-bg) !important;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--btn-default-bg) !important;
    color: var(--btn-default-fg) !important;
}

/*#endregion*/

/*#region Jquery UI*/
body .ui-tabs-nav .ui-state-default .ui-tabs-anchor {
    background-color: var(--btn-default-bg);
    color: var(--btn-default-fg);
}

body .ui-tabs-nav .ui-state-active {
    border-color: var(--btn-primary-border);
    background-color: var(--btn-primary-bg);
}

body .ui-tabs-nav .ui-state-active .ui-tabs-anchor {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border-color: var(--btn-primary-border);
}

/*#endregion*/

/*#region Datepicker*/

body .ui-widget-content {
    background-color: var(--body-bg);
    color: var(--body-fg);
}

body .ui-widget-header,
body .ui-datepicker-prev,
body .ui-datepicker-next {
    background-color: var(--body-alt-bg) !important;
    border: none !important;
}

body .ui-datepicker-prev,
body .ui-datepicker-next {
    top: 2px !important;
    position: relative;
}

body .ui-datepicker-prev span,
body .ui-datepicker-next span {
    background: none !important;
}

body .ui-datepicker-prev {
    left: 0 !important;
}

body .ui-datepicker-next {
    right: 0 !important;
}

body .ui-datepicker-prev:before,
body .ui-datepicker-next:before {
    font-family: FontAwesome;
    display: inline-block;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--body-fg);
}

body .ui-datepicker-prev:hover:before,
body .ui-datepicker-next:hover:before {
    color: var(--input-fg);
}

body .ui-datepicker-prev:before {
    content: "\f137";
}

body .ui-datepicker-next:before {
    content: "\f138";
}

body .ui-widget-header select {
    border: none;
    outline: none;
    box-shadow: none;
}

body .ui-datepicker-calendar .ui-state-default {
    background: var(--body-bg);
    color: var(--btn-default-fg);
    border-radius: 5px;
    border: none;
}

body .ui-datepicker-calendar .ui-state-default:not(.ui-state-highlight):not(.ui-state-active):hover {
    background: var(--body-alt-bg);
}

body .ui-datepicker-calendar .ui-state-highlight {
    background: var(--roster-today);
}

body .ui-datepicker-calendar .ui-state-active {
    background: var(--input-selected);
}

/*#endregion*/

/*#region Error Page*/
.prettyprint.linenums {
    background-color: var(--input-bg);
    color: var(--input-fg);
}

/*#endregion*/

/*#region Table Filter Group */
.table-filter-group {
    padding: 0 8px;
    border: thin dashed gainsboro;
}

.table-filter-group-splitter {
    margin-left: 15px;
    display: inline-block;
}

/*#endregion*/

/*#region Page Header */
svg.svg-fa-icon {
    width: 1em;
    height: 1em;
}

.navbar-header svg.svg-fa-icon path {
    fill: #eaeaea;
}

.navbar-header svg.svg-fa-icon {
    margin-top: -0.1em;
}

.page-title-main svg.svg-fa-icon path {
    fill: var(--body-fg);
}

.page-title-main svg.svg-fa-icon {
    padding-top: 0.2em;
    margin-right: 0.3em;
}

/*#endregion*/

/* #region Profile Popup */

#profilepopup .modal-body {
    text-align: left;
}

#profilepopup #profile_name {
    width: 100%;
    margin-left: 0;
}

#for_all_client_users,
#is_client_default_profile {
    display: none;
}

#all_client_users_section {
    margin-top: 15px;
}

#for_all_client_users+label,
#is_client_default_profile+label {
    user-select: none;
    cursor: pointer;
}

#for_all_client_users:disabled+label,
#is_client_default_profile:disabled+label {
    cursor: not-allowed;
    color: var(--checkbox-disabled);
}

#for_all_client_users+label:before,
#is_client_default_profile+label:before {
    font-family: 'FontAwesome';
    content: "\f096";
    margin-right: 8px;
    width: 20px;
    display: inline-block;
    font-size: large;
    position: relative;
    top: 2px;
}

#for_all_client_users:checked+label:before,
#is_client_default_profile:checked+label:before {
    content: "\f046";
}

#profilepopup .modal-footer {
    display: flex;
    align-items: center;
}

#profilepopuperror {
    flex: 1 1 100%;
    text-align: center;
}

/* #endregion */

/* #region Context Menu Standardisation */

/* Unfortunately cannot be style with class name as default control removes all classnames before appending own */
/* Will have to go through each one as and when they come up adding data-updated=true */

[data-updated='true'] {
    border-radius: 5px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    user-select: none;
}

[data-updated='true'] .context-group {
    margin-bottom: 5px;
}

[data-updated='true'] .context-group-title {
    font-size: .9em;
    font-weight: bold;
    background-color: var(--cm-group-title-bg);
    color: var(--cm-group-title-fg);
    padding: 3px 5px;
    margin-bottom: 2px;
    border: 1px solid var(--cm-group-title-border);
    border-left: 0;
    border-right: 0;
    line-height: 18px;
    position: sticky;
    top: 0;
    z-index: 2;
}

[data-updated='true'] .context-group:first-of-type .context-group-title {
    border-top: 0;
}

[data-updated='true'] .cmi {
    padding-left: 5px;
    padding-right: 5px;
    display: block;
    white-space: nowrap;
    padding-right: 20px;
}

[data-updated='true'] .cmi .fa,
[data-updated='true'] .cmi .fas {
    width: 20px;
    text-align: center;
    margin-right: 5px;
}

[data-updated='true'] .cmi:hover {
    background-color: var(--nav-dropdown-bg-hov);
    color: var(--nav-dropdown-fg);
}

[data-updated='true'] .cmi.active {
    background-color: var(--nav-dropdown-bg-active);
    color: var(--nav-dropdown-active);
}

[data-updated='true'] .cmi-disabled {
    opacity: 0.4;
    pointer-events: none;
}

[data-updated='true'] .cmi-hidden {
    pointer-events: none;
    display: none;
}

[data-updated='true'] .cmi-checkbox {
    font-weight: 400;
    margin-bottom: 0;
}

[data-updated='true'] .cmi-checkbox input[type="checkbox"] {
    display: none;
}

[data-updated='true'] .cmi-checkbox:has(input[type="checkbox"])::before,
[data-updated='true'] .cmi-checkbox.no-checkbox::before {
    display: inline-block;
    content: "\f096";
    font-family: 'FontAwesome';
    font-size: 16px;
    width: 18px;
    margin-left: 3px;
}

[data-updated='true'] .cmi-checkbox:has(input[type="checkbox"]:checked)::before,
[data-updated='true'] .cmi-checkbox.no-checkbox.checked::before {
    content: "\f046";
}

[data-updated='true'] .cmi-radio:has(input[type="radio"])::before,
[data-updated='true'] .cmi-radio.no-radio::before {
    display: inline-block;
    content: "\f10c";
    font-family: 'FontAwesome';
    font-size: 16px;
    width: 18px;
    margin-left: 3px;
}

[data-updated='true'] .cmi-radio:has(input[type="radio"]:checked)::before,
[data-updated='true'] .cmi-radio.no-radio.checked::before {
    content: "\f192";
}

/* #endregion */

/* #region Updated Accordion */

.indicate-open {
    display: inline-block !important;
    transition: transform .1s linear;
}

.indicate-open.hidden {
    transform: rotate(-90deg);
}

/* #endregion */

/* #region UI Layout Panes (Roster etc) */

body .ui-layout-pane {
    background: var(--body-bg);
}

body .ui-layout-resizer {
    background: var(--body-alt-bg);
}

/* #endregion */

/* #region Font Awesome Normaliser*/
/* When Font Awesome 5 is included on a page this overrides definitions created in FA4 this class resets those */
.fa-use-4 {
    font-family: FontAwesome !important;
    font-weight: 400 !important;
}

.fa-use-4.fa-calendar:before {
    /* FA4 and FA5 use different default icons for the calendar. */
    content: "\f073";

}

/* #endregion */

/* #region Search Helper */

body.is-searching .hide-on-search,
.search-hidden {
    display: none !important;
}

/* #endregion */

.manual-helptip-leftalign {
    margin-left: 0px;
    margin-right: 15px;
}

.form-group.form-group-flex {
    display: flex;
}

.form-group.form-group-flex>label {
    text-wrap: nowrap;
    margin-top: 0.4em;
}

.form-group-flex>input,
.form-group-flex>select {
    margin-left: 0.5em;
}

/* #region Truncated Text */
.ms-truncated {
    user-select: none;
}

/* #endregion */