@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/*** COMMON CSS FROM HERE ***/

:root {
    --header-image-height: 40px;
    --header-image-padding-y: 0px; /* 0.3125rem; */ /* --bs-navbar-brand-padding-y */
    --header-image-padding-x: 0px;
    --header-image-margin-y: 0px;
    --header-image-margin-x: 0px;
    --header-content-height: calc(var(--header-image-height) + (var(--header-image-margin-y) * 2));
    --header-padding-y: 0.5rem; /* --bs-navbar-padding-y */
    --header-height: calc(var(--header-content-height) + (var(--header-padding-y) * 2));
    --header-margin-bottom: 0.75rem;
    --header-total-height: calc(var(--header-height) + calc(var(--header-margin-bottom) * 2));
    /* defaults the full page height to 100vh, but this will be overwritten using the setCssPageHeight JavaScript function to set the exact page height 
        (as the 100vh includes the height of the address bar which can then hide / scroll away on mobile devices to give more viewing space) */
    --full-page-height: 100vh;
    --page-height: calc(var(--full-page-height) - var(--header-total-height));
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.main {
    padding-top: calc(var(--header-height) + var(--header-margin-bottom));
}

.page-height {
    height: var(--page-height);
}

/* If a header alert banner is visible as indicated by the presence of the header-alert-visible class on a parent), reduce the page-height to take the height of the banner into account */
.header-alert-visible .page-height {
    --bs-alert-margin-bottom: 16px;
    --header-alert-height: calc(65px + var(--bs-alert-margin-bottom));
    --header-height-with-alert: calc(var(--header-total-height) + var(--header-alert-height));
    --page-height: calc(var(--full-page-height) - var(--header-height-with-alert));
}

.replace-header-margin-with-padding {
    margin-top: calc(0px - var(--header-margin-bottom)) !important;
    padding-top: var(--header-margin-bottom) !important;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.container-breakout {
    position: absolute;
    left: 0;
    right: 0;
}

/* The x-axis padding on indent-xs gets set to 0.75rem (12px) when the screen size is EXTRA SMALL/XS, otherwise they are zero */
.indent-xs {
}

/* Adding the class "tight" causes x-axis margins/padding/borders etc. to be reduced to zero for EXTRA SMALL/XS screens so the content buts right up to the edge of the screen */
@media (max-width: 575.98px) {
    /* Remove the x-axis padding for any main or container blocks */
    .container.tight, .container-sm.tight, .container-md.tight, .container-lg.tight, .container-xl.tight, .container-xxl.tight, .container-fluid.tight {
        padding-right: 0;
        padding-left: 0;
    }

        /* Remove the x-axis borders and the radius of cards so they fill the whole width of the page */
        .container.tight div.card, .container-sm.tight div.card, .container-md.tight div.card, .container-lg.tight div.card, .container-xl.tight div.card, .container-xxl.tight div.card, .container-fluid.tight div.card {
            border-radius: 0px;
            border-left: 0px;
            border-right: 0px;
        }

        .container.tight .card-header, .container-sm.tight .card-header, .container-md.tight .card-header, .container-lg.tight .card-header, .container-xl.tight .card-header, .container-xxl.tight .card-header, .container-fluid.tight .card-header {
            border-radius: 0px;
        }

        /* Add x-axis padding to indent-xs so basic text components are not butted right up to the left and right edges of the screen */
        .container.tight .indent-xs, .container-sm.tight .indent-xs, .container-md.tight .indent-xs, .container-lg.tight .indent-xs, .container-xl.tight .indent-xs, .container-xxl.tight .indent-xs, .container-fluid.tight .indent-xs {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        /* Override the bootstrap x-axis gutter constant so row classes do not end up with negative margins.
       Not doing this causes content to overflow the width of the page and allows slight horizontal scrolling
       and breaks any position:fixed header navbar components (which end up scrolling off the page by the same amount as the overflow) */
        .container.tight .row, .container-sm.tight .row, .container-md.tight .row, .container-lg.tight .row, .container-xl.tight .row, .container-xxl.tight .row, .container-fluid.tight .row {
            --bs-gutter-x: 0;
        }
}

/* Remove unnecessary padding from Dev Express DxFormLayoutTabPage */
dxbl-form-layout.tight dxbl-form-layout-tab {
    --dxbl-fl-tab-group-content-padding-x: 0;
}

.card-header, .card-body, .card-footer {
    padding: 0.75rem;
}

@media (max-width: 768px) {
    .card-tight > .card-body {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Shims for the Bootstrap 4 to Bootstrap 5 upgrade which fix spacing*/
.form-group {
    margin-bottom: 0.75rem !important;
}

/* Used on all EliteLabel controls */
.control-label {
    font-weight: 500;
    font-size: 0.9em;
    margin-bottom: .2rem;
}
/* End of shims*/

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.top-title {
    font-size: 1.25rem;
}

    .top-title a {
        text-decoration: none;
        color: inherit;
    }

    .top-title .btn-close {
        margin: 0px;
    }

.top-title-image {
    height: var(--header-image-height);
    margin: var(--header-image-margin-y) var(--header-image-margin-x);
    padding: var(--header-image-padding-y) var(--header-image-padding-x);
}

@media (max-width: 640.98px) {
    .top-title a, .top-title .btn-link {
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .dxbs-modal > .dxbs-popup {
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

#overlay {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.1);
    z-index: 2;
    cursor: pointer;
}

.homepage-card {
    cursor: pointer;
    height: 100%;
}

@media (min-width: 576px) {
    .homepage-card .card-header {
        min-height: 65px;
    }
}

.homepage-card .card-title {
    line-height: 1.6rem;
}

.modal-tight {
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* Workaround for background being indented when container.tight is applied, taking the content into the right 12 pixels of the screen */
.dxbl-modal-open .container-breakout > .container-fluid.tight {
    padding-right: 12px;
}

/* Workaround for Bootstrap 5.3.x showing a white background round the placeholder text after a field on a form has been auto-completed */
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

/* Hide DxGrid column headers */
.grid-hide-column-headers {
}

    .grid-hide-column-headers .dxbl-grid-header-row {
        display: none;
    }

/* GridToolbarWithSearch CSS for positioning and styling the search box & icon */
.search-button {
    opacity: 0.4;
}

.search {
    position: relative;
    min-width: 180px;
    max-width: 180px;
}

    .search .search-input {
        padding-left: calc(22px + 0.5rem);
    }

    .search .search-button {
        left: 0px;
        top: 0px;
        pointer-events: auto;
        z-index: 3;
        width: auto;
        display: flex;
        align-items: center;
        height: 100%;
        position: absolute;
    }

        .search .search-button .search-icon {
            width: 1rem;
            height: 1rem;
            opacity: 0.8;
        }

/* Plus/Minus buttons */
.btn-number {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.125rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* CSS to allow DxGrid to hide a number of columns positioned at the end of the grid */
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(2),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+3),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+4),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+5),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+6),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+7),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+8),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+9) {
    width: 0px !important;
}

.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(2),
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(3) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(2),
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(2):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+3),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(4) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+3),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+3):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+4),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(5) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+4),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+4):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+5),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(6) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+5),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+5):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+6),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(7) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+6),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+6):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+7),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(8) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+7),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+7):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+8),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(9) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+8),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+8):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+9),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(10) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+9),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+9):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area) {
    display: none !important;
}

/* CSS to use a DxFormLayoutItem as a column headings row */
.dxbl-fl-item .fl-item-heading {
    padding-top: 7px;
    margin-bottom: -7px;
}

/* CSS to reduce the padding round toolbars on extra small screens when contained within a DxGrid */
@media (max-width: 576px) {
    .dxbl-grid-toolbar-container {
        --dxbl-grid-toolbar-container-padding-y: 0rem;
        --dxbl-grid-toolbar-container-padding-x: 0.25rem;
    }
}

/* CSS to allow us to adjust DxGrid border visibility, i.e. when no borders are requied or when merging the top with a tab control */
.dxbl-grid.no-top-border {
    border-top-width: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dxbl-fl-group.no-top-border > .dxbl-group {
    border-top-width: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dxbl-fl-group.no-border {
    margin: 0px;
    padding: 0px;
}

    .dxbl-fl-group.no-border > .dxbl-group {
        border-width: 0px;
    }

/* Specify popup-no-padding on DxPopup's to remove body padding */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-no-padding > .dxbl-modal-content > .dxbl-modal-body {
    padding: 0px !important;
}

/* Secify pdf-viewer-no-border to remove the border and shading of DxPdfViewer */
.pdf-viewer-no-border {
    border: none !important;
    box-shadow: none !important;
}

/* CSS to display attachment thumbnails */
.attachment-image-thumbnail {
    cursor: pointer;
    max-width: 100%;
}

.attachment-image-thumbnail-inline {
    cursor: pointer;
}

@media (max-width: 768px) {
    .attachment-image-thumbnail-inline {
        max-width: 100%;
    }
}

@media (min-width: 769px) {
    .attachment-image-thumbnail-inline {
        max-width: 200px;
    }
}

.attachment-image-fullsize {
    display: block;
    margin: auto;
}

.attachment-pdf-thumbnail {
    max-width: inherit;
    width: 100%;
    height: 400px;
}

.attachment-pdf-fullsize {
    max-width: inherit;
    width: 100%;
    height: 100%;
}

.attachment {
    max-width: inherit;
}

.attachment-fullsize {
    max-width: inherit;
    height: 100%;
}

.attachment-pdf-viewer {
    max-width: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: grey;
}

/* Make the upload button container relative so that the absolute position 
    of the upload label can be sized to full the entire are of the button */
button.attachment-upload {
    position: relative;
}

.attachment-upload input[type=file] {
    position: absolute;
    display: none;
}

.attachment-upload label {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/*** APPLICATION SPECIFIC CSS FROM HERE ***/

div.timesheetsummary {
    cursor: pointer;
}

div.timesheetdayactivity {
    --bs-bg-opacity: 1;
    background-color: #f8f9fa;
    --bs-text-opacity: 1;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

div.timesheetday {
}

div.timesheetday-header {
    background-color: #ffc1076e;
}

div.timesheetday-headerfull {
    background-color: #0064004d;
}

div.timesheetday-unscheduled {
    background-color: #f8f9fa;
}

div.timesheet {
    --bs-bg-opacity: 1;
    background-color: white;
    margin-bottom: 0.5rem;
}

div.timesheet-header {
    margin-bottom: 0px;
}

div.timesheetallowance {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity));
    --bs-text-opacity: 1;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.timesheetallowance-title {
    font-size: 1.25rem;
}

.timesheetdayactivity .timesheetallowance {
    padding-left: 20px;
    padding-right: 0px;
}

div.timesheetexpense {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity));
    --bs-text-opacity: 1;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.timesheetexpense-title {
    font-size: 1.25rem;
}

.timesheetdayactivity .timesheetexpense {
    padding-left: 20px;
    padding-right: 0px;
}

.timesheetdayactivity .ico {
    margin-right: 10px;
}

.timesheetallowance .ico {
    margin-right: 10px;
}

.timesheetexpense .ico {
    margin-right: 10px;
}

.timesheettravelallowance .ico {
    margin-right: 10px;
}

div.timesheetstatus-approved .ico-timesheetstatus {
    height: 24px;
    width: 24px;
    margin-left: 2px;
    margin-right: 2px;
    -webkit-mask-image: url(../images/icons/circle-check-solid.svg);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: darkgreen;
}

div.timesheetstatus-authorised .ico-timesheetstatus {
    height: 24px;
    width: 24px;
    margin-left: 2px;
    margin-right: 2px;
    -webkit-mask-image: url(../images/icons/check-circle.svg);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: darkgreen;
}

div.timesheetstatus-denied .ico-timesheetstatus {
    height: 24px;
    width: 24px;
    margin-left: 2px;
    margin-right: 2px;
    -webkit-mask-image: url(../images/icons/times-circle.svg);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: darkred;
}

button.timesheet {
    padding-bottom: 0.5rem;
}

div.authorisation-highlight {
    box-shadow: inset 0px 0px 5px 1px #0a58ca;
    border-radius: 5px;
    background-color: #00000024;
}

.authorisation-highlight .authorisation-highlight {
    box-shadow: none;
    background-color: unset;
}

div.authorisation-dim {
    color: #6c757d !important;
}

div.authorisation-changed {
    box-shadow: inset 0px 0px 5px 1px #dd0000;
    border-radius: 5px;
    background-color: #00000024;
}

/* Adding the class "tight" causes x-axis margins/padding/borders etc. to be reduced to zero for EXTRA SMALL/XS screens so the content buts right up to the edge of the screen */
@media (max-width: 575.98px) {
    /* Remove the x-axis borders and the radius of cards so they fill the whole width of the page */
    .container.tight div.authorisation-highlight, .container-sm.tight div.authorisation-highlight, .container-md.tight div.authorisation-highlight, .container-lg.tight div.authorisation-highlight, .container-xl.tight div.authorisation-highlight, .container-xxl.tight div.authorisation-highlight, .container-fluid.tight div.authorisation-highlight {
        border-radius: 0px;
    }

    .container.tight div.authorisation-changed, .container-sm.tight div.authorisation-changed, .container-md.tight div.authorisation-changed, .container-lg.tight div.authorisation-changed, .container-xl.tight div.authorisation-changed, .container-xxl.tight div.authorisation-changed, .container-fluid.tight div.authorisation-changed {
        border-radius: 0px;
    }
}

div.advanced-time-input {
    width: 115px;
}

/* Set height of lookups to be the full height of the screen less the height of the DxPopup header and borders plus a small margin */
div.lookup-list {
    height: calc(100vh - 80px);
}

/* When on a large mobile device or desktop, set lookups to a fixed height */
@media (min-width: 768px) and (min-height: 680px) {
    div.lookup-list {
        height: 600px;
    }
}

.form-switch-right {
    padding-left: 0px;
}

    .form-switch-right .form-check-input {
        float: right;
        margin-left: 1rem;
    }

.table-filter-selection ul {
    margin-top: 4px;
}

.table-filter-selection li {
    height: 30px;
    vertical-align: top;
}

.table-filter-selection a {
    font-weight: 400;
    padding: 3px 7px;
    margin-top: 10px;
    text-decoration: none;
}

    .table-filter-selection a:hover {
        border-bottom: 3px solid;
        text-decoration: none;
    }

.table-filter-selection button {
    margin-top: -3px;
}

/* EliteButton with large icon */
.elite-button-container svg.fa-xl {
    --dxbl-image-height: 1.5rem !important;
    margin: 0px !important;
}

button.dxbl-btn-icon-only .elite-button-container:has(svg.fa-xl) {
    min-width: 1.65rem;
    min-height: 1.5rem;
}