/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/*#region Layout*/
.neu-grid-auto-minmax-gp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
/*#endregion*/

/*#region Colours & Fonts*/
:root {
    /*#region Colours*/
    /*Sorted by HSL value*/
    /*Black - White*/
    --black: #000000;
    --charcoalGrey: #434343;
    --darkGrey: #666666;
    --lightGrey: #d9d9d9;
    --grey: #dedede;
    --offWhite: #EFEFEF;
    --veryPaleGrey: #F0F0F0;
    --lightOffWhite: #f8f8f8;
    --backgroundGrey: #FAFAFA;
    --white: #ffffff;
    /*Reds*/
    --red: #ff0000;
    --paleRed: #FFCCCC;
    --pillRed: #F30800;
    --toastrRed: #BD362F;
    --errorRed: #be3333;
    --lightRed: #FF8080;
    /*Orange & Yellows*/
    --toastrOrange: #F2BA00;
    --pillOrange: #F2BA00;
    --amberGold: #D29627;
    --paleYellow: #FCF1CC;
    /*Greens*/
    --vividGreen: #15A105;
    --toastrGreen: #51A351;
    --green: #008000;
    --paleGreen: #DCFFF1;
    /*Blues*/
    --neuvenBlue: #2babe3;
    --toastrBlue: #387DC1;
    --borderGrey: #e8eef1;
    --lightBlue: #E2F1FC;
    --chevronBlue: #0056A2;
    --borderMidGrey: #CED4DA;
    --blueCharcoal: #212529;
    --navigationBlue: #005CB8;
    --midGrey: #dee2e6;
    --paleBlue: #E9F2FF;
    --anchorBlue: #0d6efd;
    --veryLightGrey: #e5e7eb;
    --brightBlue: #80bdff;
    --paleGrey: #F1F2F4;
    --blueGrey: #495057;
    --linkBlue: #4353A1;
    --offGrey: #27272c;
    --slateBlue: #4352A0;
    --cyanBlue: #387DC1;
    --curiousBlue: #2CA8E1;
    /*Purples*/
    --palePurple: #DCD4E6;
    --neuvenPurple: #4e2680;
    --darkPurple: #300762;
    --lightPurple: #D0A8FF;
    --royalPurple: #5c328a;
    --brightPurple: #6f42c1;
    /*#endregion*/
    /*#region Sizes*/
    --min-grid-col-width: 350px;
    --input-height: 40px;
    /*#endregion*/
}

/*#region jstree-override*/

/* This removes default jsTree arrow images */
.neu-jstree-wrapper .jstree-default .jstree-ocl {
    background: none !important;
    text-align: center;
    line-height: 24px;
    width: 24px;
}

.neu-jstree-wrapper .jstree-container-ul .jstree-node div:first-child {
    margin-left: 32px;
}
/* collapsed state */
.neu-jstree-wrapper .jstree-default .jstree-closed > .jstree-ocl::before {
    content: "\f138";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-style: normal;
    font-size: 1.5rem;
    color: var(--neuvenPurple);
    margin-right: 1.5rem;
}

/* expanded state */
.neu-jstree-wrapper .jstree-default .jstree-open > .jstree-ocl::before {
    content: "\f13a";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-style: normal;
    font-size: 1.5rem;
    color: var(--neuvenPurple);
    margin-right: 1.5rem;
}

/* Hide jsTree's sprite-based checkbox */
.neu-jstree-wrapper .jstree-checkbox {
    background: none;
    border: 1px solid var(--borderMidGrey); /*#6c757d;*/
    border-radius: 3px;
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    background-color: var(--white);
    margin-right: 0.5rem;
}

.neu-jstree-wrapper .jstree-default-large .jstree-icon:empty {
    line-height: 1.5rem;
    width: 1rem;
    height: 1rem;
}

.neu-jstree-wrapper .jstree-wholerow {
    height: 1.5rem;
}

.neu-jstree-wrapper .jstree-default > .jstree-wholerow-ul .jstree-clicked {
    background-color: transparent !important;
    padding: 0;
}

/* Checked state */
.neu-jstree-wrapper .jstree-clicked > .jstree-wholerow,
.neu-jstree-wrapper .jstree-clicked > .jstree-checkbox {
    background: none;
}

.neu-jstree-wrapper .jstree-default > .jstree-wholerow-ul .jstree-clicked {
    background-color: none !important;
    padding:0;
}

.neu-jstree-wrapper .jstree-clicked > .jstree-checkbox {
    background-color: var(--anchorBlue);
    border-color: var(--anchorBlue);
    background-image: url("/img/white_tick.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.neu-jstree-wrapper .jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox, .jstree-default-large .jstree-checked > .jstree-checkbox {
    background-position: center;
}

/* Indeterminate / tri-state */
.neu-jstree-wrapper .jstree-undetermined > .jstree-checkbox {
    background-color: var(--anchorBlue);
    border-color: var(--anchorBlue);
    background-image: url("/img/white_minus.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.neu-jstree-wrapper .jstree-anchor {
    line-height: 1.3rem;
    height: 1.5rem;
    margin-left: 16px;
}

.neu-jstree-wrapper .jstree-open > .jstree-ocl::before {
    margin-right: 1rem;
}

/*#endregion*/

/*#region Layout*/
.neu-grid-auto-minmax-gp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.neu-single-char-input {
    min-width: 1.5em;
    max-width: 4em;
}

.neu-grid-auto-flow-row {
    grid-auto-flow: row;
}

.neu-form-fields-4col-resp {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

    .neu-form-fields-4col-resp > div {
        min-width: 0;
    }

.neu-form-fields-3col-resp {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

    .neu-form-fields-3col-resp > div {
        min-width: 0;
    }


.neu-form-profile {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.neu-form-profile-image {
    grid-column: span 1;
}

.neu-form-profile-info {
    grid-column: span 3
}

.neu-grid-span-2 {
    grid-column: span 2
}

.neu-grid-span-3 {
    grid-column: span 3;
}

/*#endregion*/

/*#region Fonts*/
@font-face {
    font-family: 'Montserrat';
    src: url("Fonts/Montserrat/Montserrat-VariableFont_wght.ttf")
}
/*#endregion*/

/*#region Buttons*/
.input-spacing, .form-check-input.input-spacing {
    width: 40px;
    height: 20px;
    margin-right: 5px;
    margin-top: 0px;
}

.btn-outline-primary {
    Background-color: var(--white) !important;
    color: var(--neuvenPurple) !important;
    border-color: var(--neuvenPurple) !important;
    font-weight: 400 !important;
}

    .btn-outline-primary:hover {
        Background-color: var(--backgroundGrey) !important;
        color: var(--neuvenPurple) !important;
        border-color: var(--neuvenPurple) !important;
        text-decoration: underline;
    }

.primaryButton,
.swal2-styled.swal2-cancel.primaryButton,
.swal2-deny.primaryButton.swal2-styled,
div.dt-buttons .dt-button.primaryButton {
    background-color: var(--neuvenPurple);
    color: var(--white);
    border-color: transparent;
}

    .primaryButton:hover,
    .swal2-styled.swal2-cancel.primaryButton:hover,
    div.dt-buttons .dt-button.primaryButton:hover {
        background-color: var(--darkPurple);
        color: var(--white);
    }

    .primaryButton:focus,
    .swal2-styled.swal2-cancel.primaryButton:focus,
    div.dt-buttons .dt-button.primaryButton:focus {
        background-color: var(--darkPurple);
        color: var(--white);
        box-shadow: 0 0 0 0.25rem rgb(92 50 138 / 50%) !important;
    }

    .primaryButton:disabled {
        pointer-events: none;
        opacity: .65;
    }


.restyledButton, .primaryButton, .outlineButton,
.swal2-styled.swal2-cancel.restyledButton,
div.dt-buttons .dt-button.restyledButton,
.swal2-styled.swal2-confirm.restyledButton,
.swal2-styled.swal2-deny.restyledButton{
    padding: 10px 10px;
    border-radius: 8px;
    min-height: 40px;
    height: 40px;
    line-height: 0.5px;
}

    .restyledButton i.fa-light,
    .restyledButton i.fa-thin,
    .restyledButton i.fa-solid {
        margin-right: 4px;
    }

div.dt-buttons .dt-button, div.dt-buttons .dt-button:hover, div.dt-buttons .dt-button:disabled, div.dt-buttons .dt-button:active {
    background-image: none;
}

.transparentButton {
    border: none;
    background-color: transparent;
    font-size: 24px;
    background: none;
    border-color: transparent;
    cursor: pointer;
}

.backButton {
    text-decoration: none;
    color: var(--black);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 8px;
}


    .backButton > a > i {
        color: var(--neuvenPurple);
        margin-right: 4px;
    }

.genericButton {
    padding: 10px 13px;
    border-radius: 8px;
    min-height: 40px;
}

.backButton, .backButton > a {
    text-decoration: none;
    color: var(--black);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 8px;
    user-select: none;
}
    

    .backButton > a > i {
        color: var(--neuvenPurple);
        margin-right: 4px;
    }

.outlineButton,
.swal2-styled.swal2-cancel.outlineButton,
div.dt-buttons .dt-button.outlineButton,
.sp-outlineButtons button:not(.dropdown-toggle) {
    background-color: var(--white);
    color: var(--neuvenPurple);
    border: 2px solid var(--neuvenPurple);
}

    .outlineButton:hover,
    .swal2-styled.swal2-cancel.outlineButton:hover,
    div.dt-buttons .dt-button.outlineButton:hover {
        background-color: var(--darkPurple);
        color: var(--white);
    }

    .outlineButton:disabled,
    .swal2-styled.swal2-cancel.outlineButton:disabled,
    div.dt-buttons .dt-button.outlineButton:disabled {
        background-color: var(--offWhite);
    }

        .outlineButton:disabled:hover {
            color: var(--palePurple);
        }

.warningButton {
    background-color: var(--backgroundGrey);
    color: var(--white);
    border-color: transparent;
}

    .warningButton:hover {
        background-color: var(--midGrey);
        color: var(--white);
    }

    .warningButton:focus {
        background-color: var(--midGrey);
        color: var(--white);
        box-shadow: 0 0 0 0.25rem rgb(208 205 205 / 50%) !important;
    }

.outlineButtonGrey {
    background-color: var(--white);
    color: var(--darkGrey);
    border: 1px solid var(--darkGrey);
}

    .outlineButtonGrey:hover {
        background-color: var(--backgroundGrey);
        border-width: 2px;
    }

.outlineButtonRed {
    background-color: var(--white);
    color: var(--red);
    border: 1px solid var(--red);
}

    .outlineButtonRed:hover {
        border-width: 2px;
    }

.register-button-venloc {
    border-radius: 8px !important;
    height: 50px !important;
    text-align: center;
    border-color: var(--royalPurple) !important;
    color: var(--royalPurple) !important;
    border-width: 2px;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.login-page-button {
    border-radius: 8px !important;
    height: 60px !important;
    text-align: center;
    border-color: var(--neuvenPurple) !important;
    width: 160px;
    border-width: 2px;
}

.iconButton {
    padding-bottom: 0px !important;
    border: 0px;
    background-color: var(--white);
}

.cursorOnHover:hover {
    cursor: pointer;
}

.monthViewer {
    grid-column: 2;
    justify-self: center;
}

.btn-clear-blueFont {
    color: var(--neuvenBlue);
    font-weight: 500;
    font-size: 16px;
    margin: 16px;
    cursor: default;
}

    .btn-clear-blueFont:hover {
        color: var(--neuvenPurple);
        font-weight: 600;
    }

/*#endregion*/

/*#region SweetAlert buttons customised and Toastr messages*/
.swal2-container {
    z-index: 3001 !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--neuvenPurple);
    color: var(--white);
    border-color: transparent;
    font-size: 1em;
}

.swal2-html-container {
    margin: 10px 0px 10px 0px;
    overflow: hidden;
}

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

.swal2-modal .swal2-actions {
    margin: 16px 0px 0px 0px !important;
    padding-top: 8px !important;
    padding-bottom: 8px;
}

.swal2-modal {
    padding-bottom: 0px;
}

    .swal2-modal .swal2-actions:not(:has(.swal2-deny)) .restyledButton {
        width: 40%;
    }

    .swal2-modal .swal2-actions:has(.swal2-deny) .restyledButton {
        width: 30%;
    }

#toast-container div.toast {
    background-image: none !important;
    padding: 0px 10px 0px 40px;
    opacity: 0.9;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
}

    #toast-container div.toast .toast-message {
        margin-top: 10px;
        margin-bottom: 10px;
        color: var(--black);
    }

    #toast-container div.toast:before {
        font: var(--fa-font-light);
        font-size: 16px;
        float: left;
        opacity: 1;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 32px;
        padding: 10px;
        margin-right: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

#toast-container .toast-error {
    border-color: var(--toastrRed);
    background-color: var(--paleRed);
}

    #toast-container .toast-error:before {
        background-color: var(--toastrRed);
        content: "\f057";
    }

#toast-container .toast-success {
    border-color: var(--toastrGreen);
    background-color: var(--paleGreen);
}

    #toast-container .toast-success:before {
        background-color: var(--toastrGreen);
        content: "\f058";
    }

#toast-container .toast-info {
    border-color: var(--toastrBlue);
    background-color: var(--paleBlue);
}

    #toast-container .toast-info:before {
        background-color: var(--toastrBlue);
        content: "\f05a";
    }

#toast-container .toast-warning {
    border-color: var(--toastrOrange);
    background-color: var(--paleYellow);
}

    #toast-container .toast-warning:before {
        background-color: var(--toastrOrange);
        content: "\f071";
    }

.swal2-styled.swal2-confirm:hover {
    background-color: var(--darkPurple);
}

.swal2-styled.swal2-cancel {
    background-color: var(--white);
    color: var(--darkGrey);
    border: 1px solid var(--darkGrey);
    font-size: 1em;
}

    .swal2-styled.swal2-cancel:hover {
        background-image: none !important;
        border-width: 2px;
    }
/*#endregion*/

/*#region Containers*/
.main-container {
    background-image: url('../img/login-background-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.inlineContainer {
    container-type: inline-size;
}

.container-flexToCentered-w950 {
    display:flex;
    flex-wrap:wrap;
}

@container (width < 950px) {
    .container-flexToCentered-w950 {
        justify-content: center;
    }
}

.neu-section-container {
    border-radius: .25rem;
    padding: 10px;
}

.neu-mainContent-wrapper {
    container-type: inline-size;
}

/*1251 pixels wide or smaller*/
@container (max-width: 1251px) {

    .neu-form-profile {
        grid-template-columns: 1fr;
    }

    .neu-form-profile-image,
    .neu-form-profile-info {
        grid-column: 1 / -1;
    }

    .neu-form-fields-3col-resp {
        grid-template-columns: repeat(auto-fill, minmax(var(--min-grid-col-width), 1fr));
    }

    .neu-form-fields-4col-resp {
        grid-template-columns: repeat(auto-fill, minmax(var(--min-grid-col-width), 1fr));
    }

    .grid-SettledStatus.neu-form-fields-4col-resp {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--min-grid-col-width), 1fr));
    }

    .neu-form-fields-4col-resp .neu-grid-span-3 {
        grid-column: 1 / -1;
    }

    .neu-form-fields-4col-resp .neu-grid-span-2 {
        grid-column: 1 / -1;
    }

    .neu-form-fields-4col-resp .dt-container {
        /* min-width: calc(var(--min-grid-col-width) * 2);*/
    }
}

/*400 pixels wide or smaller*/
@container (max-width: 400px) {
    .neu-form-fields-3col-resp {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .neu-form-fields-4col-resp {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .grid-SettledStatus.neu-form-fields-4col-resp {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
}

/*630 pixels wide or smaller*/
@container (max-width: 630px) {
    .neu-button-group {
        margin-right: auto;
        margin-left: unset;
    }
}

.roundBorder-8,
.sp-outlineButtons button:not(.dropdown-toggle),
.sp-outlineButtons.bootstrap-select .bs-actionsbox .btn-group > .btn {
    border-radius: 8px;
}

.collapsibleHeader {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--borderMidGrey)
}

    .collapsibleHeader h5 {
        color: var(--neuvenPurple);
        user-select: none;
    }

    .collapsibleHeader .fa-light.fa-chevron-down,
    .collapsibleHeader .fa-light.fa-chevron-up {
        margin-left: auto;
        font-size: 32px;
    }

.collapsibleContent {
    margin-top: 10px;
    container-type: inline-size;
}


.flexBreak {
    flex: 0 0 100%;
}

.threeInput {
    width: 30%;
    min-width: 200px;
    max-width: 400px;
    height: fit-content;
    margin-right: 8px;
}

    .threeInput .form-check-inline[type="checkbox"],
    .fourInput .form-check-inline[type="checkbox"],
    .twoInput .form-check-inline[type="checkbox"] {
        margin-right: 0px;
        height: 16px;
        width: 16px;
    }

.fourInput {
    width: 24%;
    min-width: 200px;
    max-width: 400px;
    height: fit-content;
    margin-right: 8px;
}

.neuvenForm.fixedHeight .fourInput,
.neuvenForm.fixedHeight .threeInput,
.neuvenForm.fixedHeight .twoInput {
    min-height: 100px;
}

.neuvenForm label {
    padding-top: 0px;
}

.twoInput {
    width: 48%;
    min-width: 400px;
    max-width: 800px;
    height: fit-content;
    margin-right: 8px;
}

    .fourInput .form-check .form-check-input[type="checkbox"], .twoInput .form-check .form-check-input[type="checkbox"] {
        width: 40px;
        height: 20px;
        margin-right: 5px
    }

    .fourInput label:has(+ input:not([type=radio])),
    .twoInput label:has(+ input:not([type=radio])) {
        align-self: start;
    }

    .fourInput label + input:not([type=radio]),
    .twoInput label + input:not([type=radio]) {
        align-self: end;
        margin-top: auto;
    }


.collapsibleHeader .toggleButton {
    font-size: 40px;
    color: var(--neuvenPurple);
    margin-left: auto;
    padding: 0px 20px 0px 0px;
}

.collapsibleHeader {
    align-items: end;
}


.neuvenForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: end;
}

.items-flex-start {
    align-items: flex-start;
}

.items-flex-end {
    align-items: flex-end;
}

.items-justify-content-end {
    justify-content: flex-end;
}

.end-center-button {
    margin-left: auto;
}

@container (width > 2450px) {
    .neuvenForm {
        align-items: start;
    }
}

.filter-header-row {
    display: flex;
    flex-wrap: wrap; 
    align-items: flex-end;
    gap: 16px; 
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.export-container {
    margin-left: auto; 
}
@container (width < 600px) {

    .ScalingContainer-justify-center {
        justify-content: center;
        display: flex;
    }

    .filter-header-row {
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }

    .filter-group {
        width: 100%; 
        max-width: 300px; 
    }

    .export-container {
        margin-left: 0; 
        width: 100%;
        display: flex;
        justify-content: center; 
    }

    .ScalingContainer-center-items {
        justify-content: center;
        justify-items: center;
        float: none;
        margin: 0 0 10px 0;
        flex-direction: column;
        align-items: center;
    }

    .center-items-width-100 div {
        width: 100%;
    }

    .end-center-button {
        margin-left: 0;
    }
}

.fourGrid-statuses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 0px;
}

    .fourGrid-statuses .card-outlineHover {
        width: 100%;
        max-width: 400px;
        margin: 8px 0;
    }

.table-status-text {
    text-align: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    justify-content: center;
    border-radius: 8px;
}

@container (width < 616px) {
    .collapsibleContent .neuvenForm, .collapsibleContent.neuvenForm {
        justify-content: center;
    }

    .neuvenForm .fourInput,
    .neuvenForm .threeInput,
    .neuvenForm .twoInput {
        min-height: fit-content;
        margin-top: 16px;
    }

    .inlineContainer .fourGrid-statuses {
        grid-template-columns: 100%;
        justify-items: center;
    }

    .fourGrid-statuses .card-filled {
        padding: 4px;
    }
}

@container (width < 900px) {
    .fourInput, .threeInput {
        width: 45%;
        min-width: 300px;
    }

    .twoInput {
        width: 90%;
        min-width: 300px;
    }

    .fourGrid-statuses {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
}

*:has(.ScalingContainer-4Col), *:has(.ScalingContainer-3Col) {
    justify-content: center;
}

@container (width < 700px) {
    .ScalingContainer-4Col, .ScalingContainer-3Col {
        width: 100%;
    }
}

@container (700px <= width < 1500px) {
    .ScalingContainer-4Col, .ScalingContainer-3Col {
        width: 48%;
        height: stretch;
    }
}

@container (1500px <= width < 2000px) {
    .ScalingContainer-4Col {
        width: 24%;
    }

    .ScalingContainer-3Col {
        width: 32%;
    }


    *:has(.ScalingContainer-4Col), *:has(.ScalingContainer-3Col) {
        justify-content: start;
    }
}

@container (2000px <= width) {
    .ScalingContainer-4Col, .ScalingContainer-3Col {
        width: 600px;
        height: stretch;
    }


    *:has(.ScalingContainer-4Col), *:has(.ScalingContainer-3Col) {
        justify-content: start
    }


    .fourGrid-statuses {
        display: flex;
        flex-wrap: wrap;
    }

        .fourGrid-statuses .card-outlineHover {
            width: 500px;
        }
}


.mergedButtonInput {
    display: flex;
    width: 100%;
}

    .mergedButtonInput:has(button) input {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        margin-right: 0px;
    }

    .mergedButtonInput:has(input) button {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        margin-left: 0px;
        min-width: fit-content;
    }


.lightBackground {
    background-color: var(--lightOffWhite);
}

.main-container .row {
    display: flex;
    align-items: center;
    height: 92vh;
}

.login-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    --bs-gutter-x: 0 !important;
}

.login-form-container {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-shrink: 0;
    flex-direction: column;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.login-form-container-venloc {
    display: flex;
    width: 400px;
    height: 400px;
    justify-content: center;
    flex-shrink: 1;
    /*flex-direction: column;*/
    margin-top: 15vh;
    margin-bottom: 5vh;
}

.login-container {
    height: auto;
}

.login-container-padding {
    padding: 40px 0px 20px 0px;
}

.login-div {
    border-radius: 8px;
    background-color: white;
}

.form-control-client {
    height: calc(3.5rem + 2px) !important;
    padding: 1rem .75rem !important;
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.115rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--blueGrey);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid var(--lightGrey) !important;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control-client:focus {
        color: var(--blueGrey);
        background-color: var(--white);
        border-color: var(--brightBlue);
        outline: 0;
    }

.card-div,
.adjustmentPageContainerCard {
    border-radius: 8px;
    background-color: var(--white);
    padding: 10px;
    height: 100%;
}

.adjustmentPageContainerCard {
    background-color: var(--backgroundGrey);
    margin-right: 8px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: 72px auto;
    column-gap: 8px;
    max-width: 600px;
    min-width: 275px;
    height: stretch;
}

.card-outlineHover {
    border-radius: 8px;
    background-color: white;
    align-content: center;
    margin: 4px;
    padding: 4px;
    width: max-content;
    display: flex;
    flex-direction: row;
    text-align: center;
    border: 2px solid var(--white);
}

    .card-outlineHover:hover {
        border: 2px solid var(--neuvenPurple);
    }

.card-noHover {
    border-radius: 8px;
    background-color: white;
    align-content: center;
    margin: 4px;
    padding: 4px;
    width: max-content;
    display: flex;
    flex-direction: row;
    text-align: center;
}

.card-filled {
    font-size: 36px;
    color: black;
    font-weight: 500;
    text-align: center;
    border-radius: 8px;
    padding: 4px 24px;
    margin: 4px 0px;
}

.card.purpleBorder,
.purpleBorder {
    border: 1px solid var(--neuvenPurple) !important; /*!important required to override the !important on site.css card class*/
}

.grow {
    flex-grow: 1;
}

.set17vwWithMin {
    min-width: 250px;
    max-width: 17vw;
    width: 17vw;
}

.set10vwWithMin {
    min-width: 200px;
    max-width: 10vw;
    width: 10vw;
}

.grid {
    display: grid;
}

.evenGrid2col {
    grid-template-columns: 50% 50%;
}


.centered {
    align-content: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
}

.flexWrap {
    display: flex;
    flex-wrap: wrap;
}
/*back arrow within the page*/
.back {
    text-decoration: none;
    color: var(--neuvenPurple);
    font-weight: 700;
}

    .backButton:hover,
    .backButton:hover > a,
    .back:hover,
    .back:focus {
        color: var(--neuvenPurple);
    }

.backIcon {
    color: black;
    height: 20px;
    width: 20px
}

.search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .search-wrapper input.NewStyleSearchBox {
        margin-left: 0px !important; /*Required to override site.css*/
    }

    .search-wrapper .searchContainer,
    #ad_filter input.searchContainer, /*In use to override site.css*/
    #ad_filter select.searchContainer,
    #rates_filter input.searchContainer,
    #rates_filter select.searchContainer {
        border-radius: 8px;
        display: block;
        box-sizing: border-box;
        background-color: var(--white);
        border: 1px solid var(--borderMidGrey);
        padding: 5px;
        height: 30px;
        margin: 2px;
    }

    .search-wrapper > input {
        margin-left: 0px !important;
    }

.searchContainer[type=time]::-webkit-calendar-picker-indicator {
    background: none;
    -moz-appearance: textfield;
}

.searchContainer[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}

.height50,
.select2-selection.height50 {
    min-height: 50px;
}

.height40 {
    height: 40px;
}

.height33 {
    height: 33px;
}

.height31 {
    height: 31px;
}

.min-width-80 {
    min-width: 80px;
}

.minHeight33, .restyledButton.minHeight33 {
    min-height: 33px;
}

.width-250,
.bootstrap-select > .dropdown-toggle.width-250 {
    width: 250px;
}

.neu-w-30
{
    width:30%;
}

.width-contained {
    min-width: 200px;
    max-width: 300px;
    width: 25%;
}

.alignCenter {
    align-content: center;
    align-self: center;
    align-items: center;
}

.thickBorder {
    border-width: 8px;
}

.margin4px {
    margin: 4px;
}

.padding4 {
    padding: 4px !important; /*Override site.css paddings*/
}

.badge {
    position: relative;
    top: -8px;
    right: -5px;
    border-radius: 90%;
    background: var(--red);
    color: var(--white);
    font: 2px;
}

.lh-15 {
    line-height: 15px;
}
/*#endregion*/

/*#region Animations*/

.scaleGrow20percent {
    transition: transform 0.5s;
}

    .scaleGrow20percent:hover {
        transform: scale(1.2);
    }


.animatedBorder {
    animation: flash 3s linear forwards;
    border: 8px solid var(--neuvenPurple);
}

@keyframes flash {

    0% {
        border-width: 0px;
    }

    10% {
        border-width: 4px;
    }

    75% {
        border-width: 4px;
    }

    100% {
        border-width: 0px;
    }
}

.scaleOnHover {
    transition: transform 0.4s ease-in-out;
}

    .scaleOnHover:hover {
        transform: scale(1.3);
    }
/*#endregion*/

/*#region Input & Forms*/
.neu-multiselect-wrapper button {
    padding: 0 1rem 0 1rem !important;
    border-radius: 8px;
    min-height: var(--input-height);
    height: var(--input-height);
}

.neu-multiselect-wrapper .filter-option {
    align-items: center;
    display: flex;
}

.neu-form-label {
    padding-top: 0;
    padding-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.form-select {
    border: 1px solid var(--borderMidGrey);
    font-size: 14px !important;
    border-radius: 4px;
    height: 40px;
}

input.form-control {
    display: inline-block;
    border: 1px solid var(--borderMidGrey);
    border-radius: 4px;
    font-size: 14px;
    min-height: 40px;
}

    input.form-control::file-selector-button {
        display: none;
    }

input.form-check-input.restyledCheck {
    background-color: transparent;
    border-color: var(--black);
    margin: 4px;
    cursor: pointer;
}

    input.form-check-input.restyledCheck:disabled {
        cursor: default;
    }

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

input[type="checkbox"] {
    accent-color: var(--anchorBlue);
}

.radio-margin {
    margin-right: 5px;
    margin-top: 19px;
}

label {
    padding-top: 16px;
    padding-bottom: 8px;
}

form-label-purple {
    display: inline-block;
    border: 1px solid var(--borderGrey);
    border-radius: 2px;
    font-size: 15px;
    color: var(--neuvenPurple)
}

.noWrapInput {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


input.noScrollInput::-webkit-outer-spin-button,
input.noScrollInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].noScrollInput {
    -moz-appearance: textfield;
}

.inputWithSymbol {
    position: relative;
}

    .inputWithSymbol i {
        position: absolute;
        right: 8px;
        top: 14px;
        margin-top: 0px;
    }

    .inputWithSymbol input {
        padding-right: 30px;
    }



.bootstrap-select.min-height-unset button.btn {
    line-height: 0.9rem;
}

.bootstrap-select.min-height-unset .dropdown-menu.show,
.bootstrap-select.min-height-unset .dropdown-menu .inner {
    min-height: unset !important;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu .inner {
    min-width: fit-content !important; /*Overriding site.css*/
}

.bootstrap-select.min-height-unset,
.bootstrap-select.min-height-unset .dropdown-menu li a {
    white-space: wrap !important;
}

.dropdown-menu li:hover a .text {
    white-space: wrap;
}
/*#endregion*/
/*#region Headings & Text*/
.page-title {
    color: var(--neuvenPurple);
    font-weight: 600;
    padding-bottom: 16px;
    padding-left: 10px;
}

h3, h4 {
    color: var(--offGrey);
}

.font12 {
    font-size: 12px;
}

.font13 {
    font-size: 13px;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.font24 {
    font-size: 24px;
}

.centeredText {
    text-align: center;
}

.boldedText {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    align-content: center;
    margin: 4px;
}

.boldFont {
    font-weight: bold;
}

.tooltip {
    position: relative;
    display: inline-block;
}
    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        position: absolute;
        z-index: 1;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
    }

.hovermessage {
    position: relative;
    display: inline-block;
    overflow: visible;
}
    /* Tooltip text */
    .hovermessage .hovermessagetext {
        visibility: hidden;
        left: 60px;
        position: fixed;
        z-index: 1;
        opacity: 0;
        transition: opacity 1s;
        pointer-events: none;
    }

    .hovermessage.hiddenmessage .hovermessagetext {
        visibility: hidden;
    }

    .hovermessage.hiddenmessage:hover .hovermessagetext {
        visibility: hidden;
    }

.hovermessageHeader {
    color: var(--neuvenPurple);
    font-size: 16px;
    text-align: left;
    font-weight: bold;
}

.hovermessageStyling,
.hovermessage .hovermessagetext,
.tooltip .tooltiptext {
    background-color: var(--white);
    box-shadow: 0px 2px 4px 0px var(--grey);
    border: 2px solid var(--palePurple);
    color: var(--charcoalGrey);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
}

.navigationbar-v2 .menu .item a .hovermessagetext,
.navigationbar-v2 .menu .item .hovermessagetext {
    padding: 0px 12px;
    margin: 20px 0px 0px 0px;
}

.hovermessage:hover .hovermessagetext {
    visibility: visible;
    opacity: 1;
}

.neu-label-hovermessage .neu-label-hovermessagetext {
    top: -2.5rem;
    left: 0;
    position: absolute;
}

/* Upload/Rollback modal — "no linked clients" tooltip on the disabled Upload button.
   Pure-CSS hover tooltip (the page loads both Bootstrap 4 and 5, so the JS tooltip is unreliable).
   Matches the bookings worker-column hover message: white box, pale-purple border, no arrow,
   flying up and to the right of the button. */
.uploadDisabledTooltipWrapper {
    position: relative;
    display: inline-block;
    overflow: visible;
}
.uploadDisabledTooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 8px);      /* below the button */
    left: 50%;                  /* anchored at the button centre, extends right → down-and-to-the-right */
    width: max-content;
    max-width: 260px;
    padding: 6px 12px;
    background-color: var(--white);
    color: var(--charcoalGrey);
    border: 2px solid var(--palePurple);
    box-shadow: 0px 2px 4px 0px var(--grey);
    border-radius: 6px;
    text-align: center;
    z-index: 1080;              /* above the modal */
    transition: opacity 0.15s ease-in-out;
    pointer-events: none;
}
.uploadDisabledTooltipWrapper:hover .uploadDisabledTooltip {
    visibility: visible;
    opacity: 1;
}

.shadow-0240-grey {
    box-shadow: 0px 2px 4px 0px var(--grey);
}

.weighted {
    font-weight: 800;
}

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

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

.purpleFont,
.hasDatepicker + .fa-calendar {
    color: var(--neuvenPurple);
}

.greyFont {
    color: var(--darkGrey);
}

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

.redFont,
.collapsibleHeader h5.redFont {
    color: var(--red);
}

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

.whiteFont {
    color: var(--white);
}

.font-left-align,
table.dataTable.borderlessStripeTable td.dt-type-numeric.font-left-align,
table.dataTable.borderlessStripeTable td.font-left-align {
    text-align: start;
}

table.borderlessStripeTable.dataTable tbody tr {
    height: 40px;
}


.rot90 {
    transform: rotate(90deg);
}

.rot180 {
    transform: rotate(180deg);
}

.animatedTransform {
    transition: transform 0.4s;
}

.ellipsisOverflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.animatedWidth {
    transition: width 0.4s;
}
/*#endregion*/
/*#region Icons*/
/*#endregion*/
/*#region Margins and Paddings*/
.neu-pl-10 {
    padding-left: 10px;
}

.mgn-l4 {
    margin-left: 4px;
}

.mgn-l8 {
    margin-left: 8px;
}

.mgn-r8 {
    margin-right: 8px;
}

.mgn-t0 {
    margin-top: 0px;
}

.mgn-r4 {
    margin-right: 4px;
}

.mgn-r-12 {
    margin-right: -12px;
}

.mgn-h0 {
    margin-left: 0px;
    margin-right: 0px;
}

.mgn-v8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.mediaW1200-ml-Auto {
    margin-left: inherit;
}



@media (min-width:1200px) {

    .mediaW1200-ml-Auto {
        margin-left: auto;
    }

    .mediaW1200-mh4,
    .mgn-h0.mediaW1200-mh4 {
        margin-left: 4px;
        margin-right: 4px;
    }
}

.pad-0 {
    padding: 0px;
}

.pad-12 {
    padding: 12px;
}

.pad-b20 {
    padding-bottom: 20px;
}

.pad-4840 {
    padding: 4px 8px 4px 0px;
}
/*#endregion*/
/*#region Datatables*/
table.dataTable.borderlessStripeTable.borderlessStripeTable_light > tbody > tr > td, table.borderlessStripeTable.borderlessStripeTable_light.dataTable > tbody > tr {
    border-top: 0 !important;
}

.table.dataTable.borderlessStripeTable.borderlessStripeTable_light.hover tbody tr:hover, table.borderlessStripeTable_light.dataTable.display tbody tr:hover {
    background-color: white !important;
}

.borderlessStripeTable {
    border-bottom-color: var(--midGrey);
    border-collapse: separate;
    border-left-color: var(--midGrey);
    border-right-color: var(--midGrey);
    border-top-color: var(--offWhite);
    box-sizing: content-box;
    caption-side: bottom;
    line-height: 19.5px;
    overflow-wrap: break-word;
    text-align: left;
}

    .borderlessStripeTable tr:not(:last-of-type) td {
        border-bottom-color: var(--grey);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .borderlessStripeTable td {
    }

    .borderlessStripeTable.bigRows {
        line-height: 3rem;
    }

    .borderlessStripeTable#ad_filter {
    }

table.dataTable thead .sorting {
    background-image: none !important;
}

table.dataTable.borderlessStripeTable thead th {
    background-color: var(--offWhite);
    border: none !important;
    padding: 10px 4px !important;
}

table.dataTable.borderlessStripeTable thead th, table.dataTable tfoot th {
    font-weight: 400 !important;
}

table.dataTable.borderlessStripeTable tfoot th {
    background-color: var(--offWhite);
    border: none !important;
}

.noPaddingTable .dt-layout-row.ui-helper-clearfix {
    margin-top: 0px;
    margin-bottom: 0px;
}


div .DTE_Field input[type="text"]:focus {
    border-color: var(--black);
    background-color: var(--white);
    outline: none;
    text-align: center;
}

div.dt-container .dt-search input.dt-input {
    border-radius: 8px;
    height: 40px;
}

div.dt-container .dt-search:has(.dt-searchIcon) input.dt-input {
    margin-right: -14px;
}

.dt-search .dt-searchIcon {
    right: 6px;
}

div.dt-container {
    container-type: inline-size;
}

/* UNO-5299: The View Adjustments "rates" hover popup (#RatesHourPopup) is a
       shrink-to-fit absolutely-positioned element with no explicit width. The
       global `div.dt-container { container-type: inline-size }` rule above makes
       the DataTable inside it size from its (width-less) parent instead of its
       content, so the popup collapses to its min-width and the 4-column table
       overflows. Restore content-based sizing for this popup only. */
#RatesHourPopup {
    width: auto;
    min-width: 25rem;
    max-width: 90vw;
}

    #RatesHourPopup div.dt-container {
        container-type: normal;
    }

div.dt-container div.dt-layout-cell.dt-start {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dt-layout-row.ui-helper-clearfix > .dt-layout-cell.dt-layout-start {
    flex-wrap: wrap;
    justify-content: start;
}

.scrollableDataTable .dt-scroll-body .borderlessStripeTable {
    padding-top: 0px;
}

.scrollableDataTable .dt-scroll-body .borderlessStripeTable {
    padding: 0px;
}

.scrollableDataTable .dt-scroll-headInner {
    width: 100% !important;
    padding: 0px;
}

@media screen and (max-width: 767px) {
    div.dt-buttons {
        text-align: center !important; /*Overriding an important tag from site.css, using this specific query to match datatables css*/
        width: 100%;
    }
    .mobile-wrap-buttons {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}
@container (width < 550px) {
    .dt-container:has(.borderlessStripeTable) .dt-layout-row:first-child {
        display: block;
        text-align: center;
    }

    .dt-container:has(.borderlessStripeTable) .dt-layout-row .dt-buttons {
        text-align: center !important; /*Important to override site.css*/
        width: 100%;
    }

    .dt-container:has(.borderlessStripeTable) .dt-layout-row .dt-search {
        width: 100%;
        margin-right: 0px;
    }

        .dt-container:has(.borderlessStripeTable) .dt-layout-row .dt-search input {
            margin-left: 0px;
        }
}

/*Datatable loading icons*/
.dt-processing > div > div {
    background-color: var(--neuvenPurple) !important;
}

.sorting:before, .sorting:after,
table.dataTable.borderlessStripeTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.dataTable.borderlessStripeTable thead > tr > th.dt-orderable-asc span.dt-column-order:after {
    opacity: 0.75 !important;
    color: var(--neuvenPurple);
}

th.no-sort .dt-column-order {
    display: none !important;
}


.dataTables_wrapper {
    scrollbar-width: thin;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-desc span.dt-column-order:before,
table.dataTable.borderlessStripeTable thead > tr > th.dt-orderable-asc span.dt-column-order:before {
    font-family: FontAwesome;
    content: "\f077" !important;
    right: 2px !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-asc span.dt-column-order:after,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable.borderlessStripeTable thead > tr > th.dt-orderable-asc span.dt-column-order:after {
    font-family: FontAwesome;
    content: "\f078" !important;
    right: 2px !important;
}
/*To Overwride thead site.css version*/
table.dataTable tfoot th, table.dataTable tfoot td {
    padding: 0px 0px 10px 0px !important;
}

.sorting_asc:before, .sorting_desc:after,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    opacity: 1 !important;
    color: var(--neuvenBlue);
}

.sorting_asc:after, .sorting_desc:before,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-asc span.dt-column-order:after,
table.dataTable.borderlessStripeTable thead > tr > th.dt-ordering-desc span.dt-column-order:before {
    opacity: 0.25 !important;
    color: var(--neuvenBlue);
}

.nowrap-table-header {
    white-space: nowrap;
}

table.dataTable.borderlessStripeTable thead th .dt-column-order {
    grid-column: 2;
}

table.dataTable.borderlessStripeTable thead th .dt-column-title {
    grid-column: 1;
}

table.dataTable.borderlessStripeTable thead th .dt-column-header {
    display: grid;
    gap: 0px;
    grid-template-columns: auto 16px;
}

    table.dataTable.borderlessStripeTable thead th .dt-column-header .dt-column-title,
    div.dt-container table.borderlessStripeTable .ui-widget-header {
        font-weight: 600;
    }


.dataTable.borderlessStripeTable .dt-column-header .dt-column-order {
    margin-left: 3px;
}

.neuven-nowrap,
.neuven-nowrap .dt-column-header .dt-column-title {
    white-space: nowrap;
}

.search-wrapper input + .search-icon.fa-search {
    display: none;
}

.dt-search .dt-input + .dt-searchIcon {
    color: transparent;
}

.dt-search .dt-input:placeholder-shown + .dt-searchIcon {
    color: var(--darkGrey);
}

.search-wrapper input:placeholder-shown + .search-icon.fa-search {
    display: inherit;
}

table.borderlessStripeTable .search-wrapper input:placeholder-shown + .search-icon.fa-search,
table.borderlessStripeTable .search-wrapper input:placeholder-shown + .search-icon.fa-search {
    background-color: var(--white);
    border-left: 4px solid var(--white);
    border-right: 4px solid var(--white);
    right: 5px;
    display: inherit;
}

table.dataTable.borderlessStripeTable > tbody > tr > td {
    padding: 4px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table.dataTable.borderlessStripeTable {
    overflow-x: scroll;
}

.dt-button.ui-button.ui-corner-all.buttons-columnVisibility {
    background-image: none;
    border: none;
}

.buttons-colvis .ui-icon-triangle-1-s,
.ui-icon.ui-icon-triangle-1-s {
    display: none;
}

.dt-button.ui-button.ui-corner-all.buttons-columnVisibility:hover {
    background-color: var(--offWhite);
}

.dataTable {
    background-color: var(--white);
}


table.dataTable.borderlessStripeTable th.dt-orderable-asc.dt-orderable-desc {
    padding: 10px 4px !important;
}

table.dataTable.borderlessStripeTable th.dt-type-numeric,
table.dataTable.borderlessStripeTable th.dt-type-date,
table.dataTable.borderlessStripeTable td.dt-type-numeric,
table.dataTable.borderlessStripeTable td.dt-type-date {
    text-align: left;
}

table.dataTable.borderlessStripeTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover, table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline-color: transparent;
}

.dt-length .dt-input {
    margin-right: 4px;
}

.dt-length label {
    padding-top:0px;
    padding-bottom:0px;
}

.dt-search > ::-webkit-search-cancel-button {
    display: none;
}

.dt-search button.buttons-colvis.restyledButton {
    height: 40px;
    min-height: 40px;
}

.dt-searchIcon {
    position: relative;
    right: 20px;
    top: 50%;
}


div.dt-layout-row.ui-helper-clearfix.dt-layout-table {
    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
}

.dataTable tbody tr:nth-child(even) {
    background-color: var(--backgroundGrey);
}

.dataTable tbody tr:nth-child(odd) {
    background-color: var(--white);
}

.dataTable tfoot {
    background-color: var(--offWhite);
}


.paginate_button.redesign:hover .paginate_button.redesign:active {
    background: var(--neuvenBlue) !important;
    background-color: var(--neuvenBlue) !important;
    color: var(--neuvenPurple) !important;
}

.paginate_button.disabled.redesign:hover {
    background-color: var(--lightGrey) !important;
}

.paginate_button.disabled.redesign {
    background-color: var(--paleGrey) !important;
}

.dataTables_wrapper .dataTables_paginate.redesign .paginate_button.disabled {
    background-color: var(--paleGrey) !important;
}

    .dataTables_wrapper .dataTables_paginate.redesign .paginate_button.disabled:hover {
        background-color: var(--lightGrey) !important;
    }

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0px !important;
}

    .dataTables_wrapper .dataTables_filter input::-ms-clear {
        display: none;
    }

.paginate_button.current.redesign {
    background: var(--neuvenPurple) !important;
    background-color: var(--white) !important;
    color: var(--white) !important;
}

div.dt-buttons span.dt-button-down-arrow {
    display: none !important;
}

div.dt-buttons {
    padding-top: 0px;
    align-self: center;
    margin: 4px;
}

.dataTables_wrapper .dataTables_paginate.redesign .paginate_button,
div.dt-container .dt-paging .fg-button.redesign,
div.dt-container .dt-paging .fg-button.redesign:first-child,
div.dt-container .dt-paging .fg-button.redesign:last-child,
div.dt-container .dt-paging .fg-button.redesign.ui-state-disabled.ui-state-disabled.next,
div.dt-container .dt-paging .fg-button.redesign.ui-state-disabled.ui-state-disabled.previous {
    color: var(--neuvenPurple) !important;
    background-color: var(--white) !important;
    background: var(--white) !important;
    font-weight: 500;
    border-radius: 27px;
    padding: 8px 14px;
    border: 1px solid var(--lightGrey) !important;
}

    div.dt-container .dt-paging .fg-button.redesign.ui-state-disabled.next,
    div.dt-container .dt-paging .fg-button.redesign.ui-state-disabled.previous {
        opacity: 0.35;
    }

    .dataTables_wrapper .dataTables_paginate.redesign .paginate_button:hover,
    div.dt-container .dt-paging .fg-button.redesign:hover {
        background: var(--neuvenPurple) !important;
        color: var(--white) !important;
    }

    div.dt-container .dt-paging .fg-button.redesign.ui-state-disabled {
        background: var(--neuvenPurple) !important;
        opacity: 1;
        color: var(--white) !important;
    }

table.dataTable tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--paleBlue) !important;
    color: var(--offGrey) !important;
}

table.dataTable > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px var(--palePurple) !important;
}

.paginate_button.redesign {
    border-radius: 27px;
    border: 1px solid #DEE2E6;
    margin-bottom: 10px;
    color: var(--neuvenPurple);
    background-color: var(--neuvenPurple);
    background: var(--neuvenBlue);
    font-weight: 500;
    border-radius: 27px;
    padding: 8px 14px;
}

td.details-control {
    background: center;
}


tr.shown td.details-control {
    background: none;
}

.neuvenTable.table.dataTable tbody tr {
    height: 55px;
    vertical-align: middle;
}

.neuvenTable.table.dataTable thead th.sorting:after, .neuvenTable.table.dataTable thead th.sorting:before {
    color: var(--neuvenBlue);
}

.neu-datatable .dt-layout-cell.dt-layout-start, .neu-datatable .dt-layout-cell.dt-layout-end {
    padding-top: 10px;
}

.neu-datatable-profileImage {
    max-width: 66px !important;
    border-radius: 50%;
    min-width: 66px !important;
    min-height: 66px !important;
    aspect-ratio: 1 / 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.neu-datatable-subtable {
    width: 100%;
    table-layout: fixed;
}

.neu-datatable-subtable td,
.neu-datatable-subtable th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search Box */
.NewStyleSearchBox {
    width: 200px;
    height: 40px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    border: none;
    background: #FFF;
}

.search-container {
    position: relative;
    display: inline-block;
    padding: 0;
    width: 180px;
    margin-right: 10px;
    border: 1px solid var(--borderMidGrey) !important;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    height: 40px;
}

    .search-container input {
        width: 70% !important;
        border: 2px;
        outline: none !important;
        background: transparent;
        height: 40px;
        padding: 8px 35px 8px 12px;
        display: block;
    }

        .search-container input:focus {
            box-shadow: none !important;
        }

.search-icon {
    position: absolute;
    right: 10px;
    top: 55%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--darkGrey);
    pointer-events: none;
}

.borderlessStripeTable tfoot .bootstrap-select button.btn {
    line-height:0.9rem;
    padding: 8px 8px !important; /*Overriding site.css*/
    border-radius:8px;
}

.timeline-slider {
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    margin-left: -8px;
    margin-right: -8px;
    text-align: center;
    justify-content: center;
    min-height: 100px;
}


.timeline-slider-slider-scroller {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    z-index: 0;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE and Edge hide scrollbar but keep functionallity*/
    scrollbar-width: none; /* Firefox  hide scrollbar but keep functionallity */
}


.timeline-slider-timeline-lists {
    display: table;
}

.timeline-slider-timeline-group {
    display: table-cell;
    position: relative;
}

.timeline-slider-timeline-list {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

.timeline-slider-item {
    position: relative;
    display: table-cell;
    height: 52px;
    background-color: var(--white);
    color: var(--offGrey);
    border-right-width: 0;
    min-width: 80px;
    width: 80px;
}

    .timeline-slider-item:hover {
        background-color: var(--paleGrey);
        cursor: pointer;
        color: var(--offGrey);
    }

.timeline-slider-item-inner {
    display: block;
    padding: 8px 0;
    white-space: nowrap;
    color: var(--offGrey);
}

.timeline-slider-item a {
    text-decoration: none;
    background-color: transparent;
}

    .timeline-slider-item a:hover {
        color: var(--offGrey);
    }

.timeline-slider-item-inner span {
    width: 100%;
}

.timeline-slider-item--selected {
    position: relative;
    border-bottom: 8px solid var(--neuvenPurple);
    color: yellow;
    font-weight: 800;
}

    .timeline-slider-item--selected:after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        height: 0;
        width: 0;
        pointer-events: none;
        margin-left: -6px;
    }

.timeline-slider-item-underlined {
    border-bottom: 8px solid var(--neuvenPurple);
}

.timeline-slider-button {
    display: inline-block;
    min-height: 60px;
    position: absolute;
    z-index: 1;
    top: 0;
    padding: 8px 12px;
    border-width: 0px;
    background-color: var(--white);
}

.timeline-slider__button-next {
    right: 0px;
    cursor: pointer;
}

    .timeline-slider__button-next:disabled {
        opacity: 0.2;
        cursor: auto;
    }

.timeline-slider__button-prev:disabled {
    opacity: 0.2;
    cursor: auto;
}

.timeline-slider__button-prev {
    left: 0px;
    cursor: pointer;
}

    .timeline-slider__button-prev:hover,
    .dae-carousel__button-next:hover {
        cursor: pointer !important
    }

/*#endregion*/
.login-controls {
    position: relative;
    text-align: center;
    order: 2;
}

.login-controls {
    order: 1 !important;
    max-width: 80% !important;
    margin: auto;
    width: 60%;
    margin-bottom: 0px !important;
}

.card {
    margin-bottom: 30px;
    border: none !important;
    box-shadow: none;
}

.select-system {
    margin-top: 10px;
}

.select-client {
    margin-top: 10px;
}
/*Booking Calendar Page region*/
.bookingCalendarTop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.bookingCalendarRight {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}

.bookingCalendarLeft {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.locationDropdown {
    min-width: 240px;
    width: auto !important;
    margin: 0px 16px 0px 0px;
}

.ml-0 {
    margin-left: 0px !important;
}

.m-0 {
    margin: 0px 0px 0px 0px;
}

.margin-bottom {
    margin-bottom: 0px;
}
/*region End*/
.d-flex-direction-v2 {
    flex-direction: row;
}
/*#region Media*/
@media (max-width: 300px) {
    .logo-size {
        width: 85%;
        height: 36px !important;
    }
}


.mobileView {
    display: none;
}

.mobileHide {
    display: block;
}

@media (max-width: 450px) {
    .login-controls {
        width: 95% !important;
        max-width: 95% !important;
    }

    div.mobileView {
        display: block;
    }

    div.mobileHide {
        display: none;
    }

    .monthViewer {
        grid-column: 1;
        margin-left: 16px;
    }
}

.tanda-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: space-between;
}

.tanda-buttons-row {
    display: flex;
    flex-wrap: wrap;
}

.tanda-controls .tanda-button-group {
    align-self: end;
}

.tanda-controls .tanda-push-right {
    margin-left: auto;
}

.tanda-shift-insights {
    margin-right: 4px;
}

.slot-allocation-header {
    margin-left: 3px;
    margin-right: 10px;
}

    .slot-allocation-header .slot-allocation-field {
        flex: 1 1 160px;
        min-width: 160px;
        max-width: 300px;
    }

.slot-allocation-label {
    padding-top: 3px;
}

.slot-allocation-header .slot-allocation-export {
    min-width: 130px;
    text-align: end;
    margin-left: auto;
}

.timesheet-legend-row .timesheet-legend-export {
    margin-left: auto;
}

.fulfilment-export-wrapper {
    text-align: right;
}

@media screen and (max-width: 600px) {
    .tanda-controls {
        flex-direction: column;
        align-items: center;
    }

        .tanda-controls > div {
            width: 100%;
            justify-content: center;
        }

        .tanda-controls .tanda-push-right {
            margin-left: 0;
        }

    .tanda-buttons-row {
        flex-direction: column;
        align-items: center;
    }

    .tanda-controls .tanda-button-group {
        align-self: center;
        text-align: center;
    }

    .timesheet-legend-row .timesheet-legend-export {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .slot-allocation-header .slot-allocation-field {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .fulfilment-card .card-header {
        text-align: center;
    }

    .fulfilment-card .card-header-tabs {
        justify-content: center;
    }

    .fulfilment-card .tab-pane h2 {
        text-align: center;
    }

    .fulfilment-card .tab-pane > .col-12.card > div[style*="flex"] {
        justify-content: center;
    }

    .fulfilment-card .tab-pane > .col-12.card .row {
        justify-content: center;
        text-align: center;
    }

        .fulfilment-card .tab-pane > .col-12.card .row > [class*="col-"] {
            flex: 0 0 100%;
            max-width: 100%;
            text-align: center;
        }

    .fulfilment-card .tab-pane .exportButton,
    .fulfilment-card .tab-pane .btn-group {
        justify-content: center;
        display: flex;
    }

        .fulfilment-card .tab-pane .exportButton,
        .fulfilment-card .tab-pane .exportButton > label {
            margin-left: auto;
            margin-right: auto;
        }

    .fulfilment-card .fulfilment-export-wrapper {
        text-align: center;
    }

    .fullfillmentCharts {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .fullfillmentChartSpace {
        float: none;
        margin-right: 0;
    }

    .exportButton.right-align {
        float: none;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .locationDropdown {
        margin: 0px 16px 10px 0px;
    }
}

@media screen and (max-width: 768px) {
    .slot-allocation-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }

        .slot-allocation-header > .col,
        .slot-allocation-header > .col-auto {
            width: 100%;
            text-align: center;
        }

        .slot-allocation-header .d-flex {
            justify-content: center;
        }

        .slot-allocation-header .slot-allocation-export {
            margin-left: 0;
            text-align: center;
            min-width: unset;
        }

        .slot-allocation-header .restyledButton:has(.fa-file-export) {
            margin: 8px auto 0;
        }

    .neuvenLogoHeader {
        display: none !important;
    }

    .bookingCalendarTop {
        display: block;
    }

    .bookingCalendarRight {
        justify-content: flex-start;
    }

    .margin-bottom {
        margin-bottom: 6px !important;
    }

    .nav-tabs {
        display: inline-block;
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
        text-align: center;
    }

        .nav-tabs .nav-item > .nav-link {
            margin-bottom: 5px;
        }

        .nav-tabs > .nav-item > .nav-link.active {
            border-radius: 5px 5px 5px 5px !important;
            border-color: var(--borderMidGrey) var(--borderMidGrey) var(--borderMidGrey) !important;
        }

    table.lineItems th {
        padding: 5px;
        font-size: 1em;
    }

    table.lineItems td {
        padding: 5px;
        font-size: 1em;
    }

    .line-items-container {
        display: flex;
        min-width: 300px;
        overflow-x: scroll;
    }

    .personal-details-content {
        padding-left: 0 !important;
    }

    .personal-details-data {
        width: auto !important;
    }

    .personal-details-checkbox {
        width: auto !important;
    }

    .personal-details-date {
        width: 60% !important;
    }

    .personal-details-title {
        padding-left: 0;
    }

    .margin-top-medium {
        margin-top: 10px !important;
    }

    .margin-bottom-medium {
        margin-bottom: 10px !important;
    }

    .expiry-doc-medium {
        width: 70% !important;
    }

    .dt-length .select2-container {
        max-width: 80px !important;
        width: auto !important;
    }

    .slot-allocation-header .select2-container .select2-selection--single .select2-selection__rendered {
        text-align: center;
        padding-left: 56px !important;
        padding-right: 56px !important;
    }

    .slot-allocation-header .select2-selection__clear {
        display: none;
    }

    .slot-allocation-header input[type="date"] {
        text-align: center;
        padding-left: 32px;
    }
}

@media(max-height: 899px) {
    .navigationbar .menu {
        height: 90% !important;
        overflow-y: scroll;
    }
}

@media (max-width: 900px) {
    .client-accordion {
        line-height: normal !important;
        overflow-x: auto !important;
        display: normal;
    }

    .show-summary {
        display: none;
    }

    .show-summary-edit {
        display: normal;
    }
}

@media(min-height: 900px) {
    .navigationbar .menu {
        height: 90% !important;
        overflow-y: scroll;
    }
}

@media (min-width: 900px) {
    .client-accordion {
        line-height: normal !important;
        overflow-x: hidden !important;
        display: normal;
    }

    .show-summary {
        display: normal;
    }

    .show-summary-edit {
        display: none;
    }
}

@media (min-width: 750px) and (max-width: 1050px) {

    .login-controls {
        order: 1 !important;
        margin: auto;
        margin-bottom: 0px !important;
        width: 80% !important;
    }

    .login-container {
        height: auto;
    }
}

@media (min-width: 750px) and (max-width: 1200px) {

    .VenneuVenlocText {
        font-size: 17px !important;
    }

    .VenneuVenlocImage {
        margin: 10px 30px 16px 30px !important;
    }

    .logo-size {
        width: 120px !important;
    }

    .login-logo-width {
        width: 165px !important;
    }

    .login-logo-height {
        height: 40px !important;
    }
}

@media (max-width: 1050px) {

    .footer-container {
        display: flex;
        justify-content: space-between;
    }

    .footer-text-container-right {
        margin: 0;
    }

    .footer {
        position: relative;
    }

    .footer-text {
        display: flex;
        flex-wrap: wrap;
        max-width: 30vw;
    }

    .margin-top-xl {
        margin-top: 10px !important;
    }
}

@media (max-width: 1200px) {

    .margin-top-xxl {
        margin-top: 10px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {

    .VenneuVenlocImage {
        margin: 10px 9px 16px !important;
    }
}

@media (min-width: 1450px) {
    .add-button-container {
        max-height: 40px;
    }
}
/*VENTA Redesign changes*/

.login-logo-width {
    width: 80px;
}

.login-logo-height {
    height: 38px;
}

.VenneuVenlocImage {
    margin: 10px 9px 16px !important;
}

.login-input {
    line-height: 26px !important;
}

.manual-input-container {
    margin-bottom: 6rem !important;
    margin-top: 4rem !important;
}

@media (max-width: 1050px) {
    .neuvenLogoHeader {
        display: none !important;
    }

    .login-container-padding {
        padding: 1rem;
    }

    .padding-btm {
        padding-bottom: 2.5rem;
    }

    .field-spacing-pb-textbox-1 {
        padding-bottom: 2.5rem;
    }

    .field-spacing-pb-textbox-2 {
        padding-bottom: 1.5rem;
    }

    .field-spacing-pb-link {
        padding-bottom: 1rem;
    }

    .login-div {
        border-radius: 8px;
    }

    .login-logo-width {
        width: 150px;
    }

    .login-logo-height {
        height: 38px;
    }

    .logo-group {
        margin-bottom: 3rem;
        height: 10vh;
    }

    .login-page-button {
        border-radius: 8px !important;
        height: 60px !important;
        text-align: center
    }

    .login-input {
        line-height: 26px !important;
    }

    .row.logo-group {
        height: 10vh;
    }

    .VenneuVenlocLogoColumn {
        float: left !important;
        width: 33.33% !important;
        padding: 5px !important;
    }

    .row.logo-group::after {
        content: "";
        clear: both;
        display: table;
    }

    @media (min-width:600px) {
        .margin_left_right {
            margin: 0px 120px 0px 120px;
        }
    }

    @media (min-width:1000px) {
        .row.logo-group {
            height: 15vh;
        }
    }
}

@media (min-width:1500px) {
    .margin_left_right {
        margin: 0px 150px 0px 150px;
    }
}

@media (min-width: 1060px) {
    .row.logo-group {
        justify-content: center;
        height: 10vh;
    }

    .logo-group {
        margin-bottom: 2rem;
        height: 10vh;
    }
}
/*Venta Part 1 End*/

/*Venta part 2*/
.time-banner {
    text-align: center;
    height: 6rem;
    margin-bottom: 35px;
    line-height: 6rem;
    font-size: xxx-large;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.top-choice-title {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.choice-title {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 5px;
    margin-top: 15px;
}

.choice-title-lrg {
    font-weight: 700;
    font-size: clamp(18px, 4vw, 30px);
    margin-bottom: 5px;
    margin-top: 15px;
}

.center-choice-title {
    width: 100%;
    text-align: center;
}

/*.consent-links {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
}

.consent-links a{
    color: var(--linkBlue);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}*/

.consent-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 16px;
}

.left-link {
    text-align: left;
    flex: 0 0 auto;
    max-width: 100%;
}

.right-link {
    text-align: right;
    flex: 0 0 auto;
    max-width: 45%;
}

.consent-links a {
    display: inline-block;
    white-space: normal;
    word-wrap: break-word;
    color: var(--linkBlue);
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
}


@media(max-width: 350px) {
    .profile-username {
        max-width: 200px;
    }
}

@media(max-width: 450px) {
    .action-partial-center {
        width: 95%;
    }

    .choice-button {
        font-size: 12px !important;
    }

    .choice-title {
        font-size: 16px !important;
    }

    .choice-sub-title-600 {
        font-size: 18px !important;
    }

    .navigation-choice-square {
        font-size: 10px !important;
        padding-top: 14px !important;
    }

    .actionButton span {
        font-size: 15px !important;
    }

    .action-bar {
        margin-top: 1rem !important;
    }

    .action-button-div {
        font-size: 13px !important;
        max-width: 140px !important;
    }

    .center-wrapper {
        margin-top: 1rem !important;
        padding-top: 0px !important;
        margin-bottom: 3.5rem !important;
    }

    .icon-padding {
        padding: 10px !important;
        padding-top: 16px !important;
    }

    .icon-style {
        font-size: 1.6rem !important;
    }

    .all-action-row {
        margin-bottom: 6rem;
    }

    .venta-back-button {
        margin-top: 8px;
        height: min-content !important;
    }

    .top-choice-title {
        font-size: 14px;
    }

    .consent-links a {
        font-size: 12px;
    }

    .left-link {
        max-width: 45%;
    }

    .action-choice-square {
        height: 5rem !important;
    }

    .tableTextSize thead th {
        font-size: 12px;
        padding: 4px 6px;
    }

    .tableTextSize .dataTables_info {
        font-size: 11px;
    }

    .tableTextSize .dataTables_wrapper {
        font-size: 11px;
    }

    .tableTextSize tbody td {
        font-size: 11px;
    }

    .search-container {
        width: 150px;
    }

    table.dataTable.borderlessStripeTable thead th  {
        padding: 10px 6px 10px 10px !important;
    }

    .neu-datatable table.dataTable.borderlessStripeTable > tbody > tr > td {
        padding: 10px 6px 10px 10px !important;
    }
    .neu-datatable table.dataTable.borderlessStripeTable th.dt-orderable-asc.dt-orderable-desc {
        padding: 10px 6px 10px 10px !important;
    }
}

@media(max-width: 400px) {
    .tableTextSize thead th {
        font-size: 10px;
        padding: 4px 6px;
    }
}

.choice-square {
    float: left !important;
    width: 100% !important;
    border-style: solid;
    border-color: var(--neuvenPurple);
    border-radius: 10px;
    height: 7rem;
    /*line-height: 7rem;*/
    text-align: center;
    border-width: medium;
    -webkit-appearance: none;
    appearance: none;
    color: var(--black);
}

.navigation-choice-square {
    float: left !important;
    width: 33.33% !important;
    height: 5rem;
    /*line-height: 2rem;*/
    text-align: center;
    overflow-wrap: break-word;
    font-size: 14px;
    padding-top: 18px;
    padding-bottom: 20px;
}

    .navigation-choice-square span {
        /*overflow: hidden;*/
        white-space: nowrap;
        display: block;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        text-wrap: balance;
        font-weight: 700;
    }

.choice-input-height {
    line-height: 3rem !important;
}

.choice-button {
    padding: 0px !important;
    background-color: white;
    font-size: 16px;
    font-weight: 450;
    white-space: nowrap;
    display: block;
    text-wrap: balance;
    overflow-wrap: break-word;
}

    .choice-button:hover {
        font-weight: 700;
    }

.action-partial-center {
    text-align: left !important;
    margin: auto;
}

.action-bar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 187px;
    box-shadow: 0px 0px 5px grey;
    border-radius: 10px;
    margin-top: 3rem;
    margin-bottom: 2rem;
    background-color: var(--white);
}

.action-bar-button {
    width: 84px;
    height: 84px;
    border-radius: 10px !important;
}

.action-choice-icon {
    height: 75%;
    width: 25%;
    border-radius: 7px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.venta-purple-background {
    background-color: var(--neuvenPurple);
}

.venta-red-background {
    background-color: #C00000;
}

.venta-green-background {
    background-color: #0BA100;
}

.action-button-div {
    text-align: center;
    display: inline-block;
    max-width: 180px;
}

.actionButton {
    padding: 0px !important;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
}

    .actionButton span {
        margin-right: auto;
        margin-left: 5px;
        font-weight: 700;
        font-size: 27px;
        padding-left: 8px;
        color: var(--black);
    }

.center-wrapper {
    text-align: left !important;
    margin: auto;
    margin-top: 1.5rem;
    background-color: var(--white);
    padding: 1rem 2rem 1rem 2rem;
    border-radius: 12px
}

.choice-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.all-action-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.action-choice-square {
    float: left !important;
    width: 100% !important;
    border-style: solid;
    border-color: var(--neuvenPurple);
    border-radius: 10px;
    height: 8rem;
    /*line-height: 6rem;*/
    text-align: center;
    /*margin: 8px 4px 8px 4px;*/
    margin-bottom: 10px;
}

.option-section {
    height: 38vh;
    overflow-y: auto
}

.icon-style {
    color: white;
    font-size: 2.5rem;
}

.icon-padding {
    padding: 27px;
}

.border-left-right {
    border-left: solid white;
    border-right: solid white;
}

.venta-back-button {
    margin-left: auto;
    border: solid #4E2680;
    background-color: white;
    border-radius: 4px;
    color: #4E2680;
    font-weight: 700;
    height: 45px;
    padding: 5px !important;
}

.venta-switch-button {
    margin: auto;
    border: solid var(--neuvenPurple);
    background-color: white;
    border-radius: 8px;
    color: var(--neuvenPurple);
    font-weight: 700;
    height: clamp(60px, 12vw, 80px);
    padding: 5px !important;
    width: 60%;
    font-size: clamp(12px, 3vw, 16px);
}

.venta-switch-button-purple {
    margin: auto;
    border: solid var(--neuvenPurple);
    background-color: var(--neuvenPurple);
    border-radius: 8px;
    color: white;
    height: clamp(60px, 12vw, 80px);
    padding: 5px !important;
    width: 60%;
    font-size: clamp(12px, 3vw, 16px);
}

.switch-button-container {
    text-align: center;
    display: flex;
    gap: 10px;
}

.tick-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 241px;
    height: 241px;
}


.worker-details {
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: space-around;
    margin-bottom: 4rem;
}

.profile-image {
    display: flex;
    justify-content: center;
}

    .profile-image img {
        width: 20rem;
        height: 20rem;
        border-radius: 50%;
        margin-bottom: 2rem;
        margin-top: 2rem;
    }

.choice-sub-title {
    height: 100%;
    font-weight: 700;
    font-size: clamp(14px, 4vw, 18px);
}

.container-left {
    padding-left: 24px;
}

.background-neuven-purple {
    background-color: var(--neuvenPurple);
    color: var(--white);
}

.hidden {
    display: none;
}


.header-venta {
    line-height: 50px;
    background-color: var(--white);
}
/*Venta part 2 END*/

/* General Responsiveness */
#cameraContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    height: 30rem;
    border: solid black;
}

#faceForm, #cameraForm {
    width: 100%;
    height: 100%;
}



/*Facial Recognition */

.circle-border {
    border: solid var(--neuvenPurple);
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0 0 2px var(--darkGrey);
    padding: 0.5em 0.6em !important;
}

.manual-input-field {
    width: 100% !important;
    font-size: medium;
    height: 100% !important;
    border-radius: 8px;
    padding-left: 10px;
}

.manual-input-container {
    margin-bottom: 2rem !important;
}

.manual-search-input-label {
    font-size: larger;
    font-weight: 600
}

.manual-search-input {
    height: 3.5rem;
    margin-top: 0.5rem
}


.manual-input-field-date::-webkit-calendar-picker-indicator {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.manual-search-table-search-container {
    display: flex;
    padding-bottom: 1rem;
    flex-wrap: nowrap;
}

.manual-search-table-amount {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 640px;
    padding: 0 10px;
}

    .info-container .ta-label {
        margin: 0; /* Remove extra margins */
        flex-grow: 1;
        text-align: left; /* Align text to the left */
    }

    .info-container button {
        padding: 5px;
        outline: none;
        box-shadow: none;
        margin-left: 10px;
        font-size: 24px;
    }

/* Video and Canvas Container */
.video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4 / 3; /* Maintain video aspect ratio (4:3) */
    margin: 0 auto;
    overflow: hidden;
    height: 100%;
}

    .video-container video,
    .video-container canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Responsive width */
        height: 100%; /* Responsive height */
        object-fit: cover; /* Maintain aspect ratio for video */
        pointer-events: none; /* Prevent canvas interaction */
    }


body {
    font-family: 'Montserrat' !important;
}



/*Venneu Redesign*/
h1.login-font {
    color: var(--black);
    text-align: center;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.field-spacing-pb-textbox-1 {
    padding-bottom: 1rem !important;
}

.field-spacing-pb-textbox-2 {
    padding-bottom: 1rem !important;
}

.field-spacing-pb-link {
    padding-bottom: 0.5rem !important;
}

.field-spacing-pb-button {
    padding-top: 0px !important;
}

.field-spacing-pb-text {
    padding-bottom: 1rem !important;
}

.field-spacing-pb-title {
    padding-bottom: 0.5rem !important;
}

.login-logo-width {
    width: 150px;
}

.login-logo-height {
    height: 38px;
}

.row.logo-group {
    justify-content: center;
}

.VenneuVenlocLogoColumn {
    width: 27% !important;
    padding: 5px !important;
}

.row.logo-group::after {
    content: "";
    clear: both;
    display: table;
}

.input-validation-error {
    border: 2px solid #FF0000 !important;
}

    .input-validation-error:focus {
        box-shadow: 0 0 0 .25rem rgba(251, 106, 106, 0.5);
    }

.validation-summary-errors ul {
    list-style: none !important;
    padding: 0 !important;
}

.info-text {
    color: black;
    font-size: 14px !important;
    text-decoration: none;
}

.neuvenLogoHeader {
    display: block;
}

@media (max-width: 550px) {

    .margin_left_right {
        margin: 0px 5px 0px 5px;
    }

    .info-text {
        font-size: 15px !important;
    }
}

@media (max-width: 450px) {
    .margin_left_right {
        margin: 0px 5px 0px 5px;
    }

    .neuvenLogoHeader {
        display: none !important;
    }

    .VenneuVenlocLogoColumn {
        float: left !important;
        width: 33.33% !important;
        padding: 5px !important;
    }


    .logo-size {
        padding: 0 !important;
        width: 150px;
    }

    .login-logo-width {
        width: 80px;
    }

    .login-logo-height {
        height: 38px;
    }

    .VenneuVenlocImage {
        margin: 10px 9px 16px !important;
    }

    .login-input {
        line-height: 26px !important;
    }

    .tick-logo {
        width: 180px;
        height: 180px;
    }

    .icon-animation canvas, .icon-animation img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }

    .navbar-nav {
        flex-direction: unset !important;
        margin-right: 24px;
        align-items: center !important;
    }

    .info-text {
        color: black;
        font-size: 18px !important;
    }
}

@media (min-width:1200px) and (max-width: 1500px) {
    .margin_left_right {
        margin: 0px 70px 0px 70px;
    }

    .login-container-padding {
        padding: 40px 20px 20px 20px;
    }
}

/*Facial Recognition*/
/*part 1*/
.ta-button-facialidentification {
    background-color: #f5f5f5; /* Lighter background for a soft look */
    color: #270B4A !important; /* Dark text color for contrast */
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid #270B4A;
    border-radius: 8px;
    width: 50%;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border-color: #270B4A !important;
    margin-bottom: 30px;
}


    .ta-button-facialidentification:hover {
        background-color: #270B4A; /* Dark purple on hover */
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
    }

    .ta-button-facialidentification i {
        color: #270B4A; /* Icon color matches button text */
        transition: color 0.3s ease;
    }

.ta-button-facialidentificationl:hover i {
    color: white; /* Icon turns white on hover */
}
/*part 1 end*/

/*part 2*/
/* Container for Info (Text and Switch Camera Button) */
.info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 640px;
    padding: 0 10px;
}

    .info-container .ta-label {
        margin: 0; /* Remove extra margins */
        flex-grow: 1;
        text-align: left; /* Align text to the left */
    }

    .info-container button {
        padding: 5px;
        outline: none;
        box-shadow: none;
        margin-left: 10px;
        font-size: 24px;
    }

/* Video and Canvas Container */
.video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4 / 3; /* Maintain video aspect ratio (4:3) */
    margin: 0 auto;
    overflow: hidden;
    height: 100%;
}

    .video-container video,
    .video-container canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Responsive width */
        height: 100%; /* Responsive height */
        object-fit: cover; /* Maintain aspect ratio for video */
        pointer-events: none; /* Prevent canvas interaction */
    }

/* Buttons */
#takePhoto {
    margin-top: 20px;
}

form button {
    margin-top: 10px;
}

/* General Responsiveness */
#cameraContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    height: 30rem;
    border: solid black;
}

#faceForm {
    width: 100%;
    height: 100%;
}
/*part 2 end*/
/*Facial Recognition */
.camera-button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: var(--white);
    border: none;
    padding: 0;
}

.circle-border {
    border: solid #4E2680;
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0 0 2px #888;
    padding: 0.5em 0.6em !important;
}

.manual-input-field {
    width: 100% !important;
    font-size: medium;
    height: 100% !important;
    border-radius: 8px;
    padding-left: 10px;
}

.manual-input-container {
    margin-bottom: 2rem !important;
}

.manual-search-input-label {
    font-size: larger;
    font-weight: 600
}

.manual-search-input {
    height: 3.5rem;
    margin-top: 0.5rem
}


.manual-input-field-date::-webkit-calendar-picker-indicator {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.manual-search-table-search-container {
    display: flex;
    padding-bottom: 1rem;
    flex-wrap: nowrap;
}

.manual-search-table-amount {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[data-initials-UserList-Approved]:before {
    background-color: var(--lightPurple);
    color: #4B4B4B;
    opacity: 1;
    content: attr(data-initials-UserList-Approved);
    display: inline-block;
    font-weight: bold;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.5em;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.input-icon {
    position: absolute;
    right: 10px;
    bottom: 5px;
}

.neu-calendar-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
}

.calendar-icon-padding {
    padding: 5px 2px 8px 2px;
}

.select2-selection { /*to overwrite site.css class*/
    min-width: 10%;
    min-height: 40px;
}

.select2-container.select2-container--open .select2-dropdown {
    width: fit-content;
    min-width: inherit;
    border: 1px solid var(--borderMidGrey);
    border-top: 1px solid var(--borderMidGrey);
    border-radius: 4px;
    margin: -1px 0px;
}

.select2-container--open {
    z-index: 3002;
}

.select2-container .select2-dropdown--below .select2-results .select2-results__option:last-child.select2-results__option--highlighted {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.select2-container .select2-dropdown--above:not(:has(.select2-search)) .select2-results .select2-results__option:first-child.select2-results__option--highlighted {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.select2.select2-container--default.select2-container .selection .select2-selection {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.select2-container.select2-container--default.select2-container--open {
    width: fit-content;
}

div:has(.select2) > label:not(.fa-light, .fa, .fa-solid, .fa-thin, .fas),
div:has(.form-select):not(.form-floating) > label:not(.fa-light, .fa, .fa-solid, .fa-thin, .fas),
div:has(.form-control):not(.form-floating) > label:not(.fa-light, .fa, .fa-solid, .fa-thin, .fas),
.neuvenForm label:not(.fa-light, .fa, .fa-solid, .fa-thin, .fas) {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0px;
    margin-top: 0px;
}

div:has(input + label.fa-light) > label.fa-light {
    padding-top: 12px;
}

.modal-body div:has(.select2) > label:not(.fa-light, .fa, .fa-solid, .fa-thin, .fas),
.modal-body div:has(.form-select):not(.form-floating) > label:not(.fa-light, .fa, .fa-solid, .fa-thin, .fas),
.modal-body div:has(.form-control):not(.form-floating) > label:not(.fa-light, .fa, .fa-solid, .fa-thin, .fas) {
    font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow.height50.alignCenter {
    top: 0px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    color: var(--blueCharcoal);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-color: transparent;
    background-size: contain;
    border: none !important;
    height: 40px !important;
    width: 12px !important;
    font-size: small !important;
    font-weight: 200 !important;
    top: 43% !important;
    left: 20% !important;
    background-repeat: no-repeat;
}

.select2-container--default .select2-selection--single {
    background-color: var(--white);
    border: 1px solid var(--lightGrey) !important;
    border-radius: 8px;
}

.inputBorder {
    background-color: var(--white);
    border: 1px solid var(--borderMidGrey);
    border-radius: 4px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    /* padding-top: 16px; */
    padding-left: 11px !important;
    line-height: 30px !important;
    font-size: 14px;
}

.select2-results__option, .select2-search__field {
    font-size: 14px;
}

.input-group > .form-control,
.input-group > .form-select {
    border: 1px solid var(--borderMidGrey);
    border-radius: 4px !important;
    height: 40px;
}

.neu-input-group .select2-container--default .select2-selection--single .select2-selection__arrow b {
    left: 16% !important;
}

.neu-input-group .select2-selection {
    padding-top: 0;
}

.neu-input-group .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 0;
    padding-left: 11px !important;
    line-height: normal !important;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.neu-input-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px !important;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 14px;
}

.neu-input-group > input.form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.neu-input-group .select2.select2-container--default.select2-container .selection .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.headerBottomBorder-New {
    width: 100%;
    background-color: #BFBFBF;
    height: 2px;
    z-index: 999;
    position: sticky;
    top: 0;
}
/* Container for the toggle */
.toggle-switch {
    position: relative;
    display: flex;
    width: 55px;
    height: 28px;
    text-align: right !important;
    justify-content: space-between;
    padding-top: 0px;
}

    /* Hide default checkbox */
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The track */
.slider {
    color: black;
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 23px;
    padding-bottom: 5px !important;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s;
}

    /* The circular slider */
    .slider::before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        left: 4px;
        right: 6px;
        bottom: 4px;
        background-color: white;
        border-radius: 23px;
        transition: transform 0.3s;
    }

/* Toggled state */
.toggle-switch input:checked + .slider {
    background-color: #005CB8;
}

    .toggle-switch input:checked + .slider::before {
        transform: translateX(27px);
    }

.textFontSlider {
    font-size: 14px !important;
    padding-bottom: 20px !important;
}

.nav-Profile {
    align-items: center;
}

.nav-ProfileImage {
    height: 40px !important;
    width: 40px !important;
    padding-right: 0px !important;
    background-color: var(--neuvenPurple) !important;
    cursor: pointer;
    object-fit: cover;
    aspect-ratio: 1;
}

.nav-NoProfileImage {
    margin-right: 0px !important;
    cursor: pointer;
}

.neuvenLogo_Login {
    height: 31px;
    width: 127px;
}

/*profileSettingsPage*/


.mainContainer {
    background-color: var(--lightOffWhite);
}

.mainContainerNew {
    background-color: #FAFAFA;
}

.profileSettingsContainer {
    background-color: var(--lightOffWhite);
}

.TFAfont {
    font-weight: 500;
}

@media(max-width:450) {

    .password-btn-width {
        width: 60% !important;
    }
}

@media (min-width: 750px) and ( max-width: 1000px) {

    .password-btn-width {
        width: 100% !important;
    }
}

@media (min-width: 1000px) and ( max-width: 1100px) {

    .password-btn-width {
        max-width: 70%;
    }
}


.body-style-new {
    margin-top: 0px !important;
    background-color: #FAFAFA !important;
}

.password-btn-width {
    min-width: 40%;
    width: auto;
}

.profile-padding-bottom {
    padding-bottom: 16px;
}

/*Dashboard Quick action section*/

.quickactions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0px 0px 0px 0px;
    margin: 0 -10px;
}

.action-item {
    background-color: var(--white);
    flex: 1 1 21%;
    border-left: 1px solid darkgray;
    padding: 0 10px;
    margin-bottom: 16px !important;
    display: flex;
    align-items: start;
    text-align: left;
    gap: 10px;
}


.neu-dashboard-card-image {
    width: 112px;
    flex-shrink: 0;
}

.neu-dashboard-card-info {
    flex: 1 1 270px;
    min-width: 270px;
}

.worker-venta {
    background-color: var(--white);
    flex: 1 1 21%;
    padding: 0 10px;
    margin-bottom: 16px !important;
    display: flex;
    align-items: start;
    text-align: left;
    gap: 10px;
}

.action-item-content-venta {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
    padding: 15px;
}

    .action-item-content-venta p {
        font-size: 15px;
        font-family: Montserrat;
    }

.action-item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.title-dashboard {
    color: var(--black);
    font-weight: bold;
}

.icon-QuickAction {
    width: 112px;
    min-width: 112px;
    height: 112px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    padding: 0;
}

    .icon-QuickAction i,
    .icon-QuickAction img {
        font-size: 40px;
        display: block;
        margin: 0 auto;
    }

.icon-Tally {
    min-width: 33px;
    height: 31px;
    padding: 3px 6px 10px 6px;
    align-items: center;
    text-align: center;
    border-radius: 8px;
    background-color: var(--neuvenPurple);
    cursor: pointer;
}

.action-item-venta {
    background-color: var(--white);
    flex: 1 1 21%;
    border: 1px solid darkgray;
    margin-bottom: 16px !important;
    display: inline-flex;
    border-radius: 8px;
    gap: 8px;
    max-width: 100%;
}

    .action-item-venta p {
        font-size: 15px;
        padding: 0px;
        margin-bottom: 0px;
        overflow-wrap: break-word;
    }


.icon-ventaShifts {
    margin-top: 50%;
    text-align: center;
    background-color: var(--neuvenPurple);
    cursor: pointer;
}

.tally-QuickAction {
    color: var(--white);
    font-weight: 500;
}

.pt-5px {
    padding-top: 5px !important;
}

.icon {
    color: var(--white);
    font-size: 40px;
    height: 40px;
}

.dropdown-QuickBooking {
    border-radius: 8px;
    padding: 5px;
    font-size: 15px;
    width: 150px;
    border: 1px solid var(--lightGrey);
    height: 38px;
    background: var(--white);
    margin-bottom: 8px;
}

.btnMakeBooking-QuickAction {
    display: flex;
    text-align: center;
    border-radius: 8px;
    padding: 6px 10px;
    align-items: center;
    gap: 5px;
    width: 150px;
    height: 38px;
}

.sectionHeader {
    font-size: 18px;
    font-weight: bold;
}

.reportsLink-QuickAction {
    font-size: 14px;
    font-weight: 700;
    color: var(--neuvenPurple);
}

.header-padding {
    padding-bottom: 0.25em;
}

.no-borderLeft {
    border-left: 0px;
}

.noBorderRight {
    border-right: none;
}

.noBorder {
    border: none !important;
}
.action-item-content > div:nth-of-type(2) {
    align-items: center;
}

@media (min-width: 1400px) and (max-width:1800px) {
    .header-padding {
        padding-bottom: 0px;
    }
    .action-item-content .sectionHeader {
        display: inline-block;
        max-width: 100px;
    }

    .action-item-content > div:nth-of-type(2) {
        align-items: flex-start;
    }
}

@media (min-width: 700px) and (max-width: 1400px) {
    .action-item {
        flex: 1 1 45%;
    }

    .no-borderLeftReports {
        border-left: 0px;
    }
}

@media (max-width: 600px) {
    .action-item {
        flex: 1 1 100%;
        border-radius: 0px;
        border-left: 0px;
    }

    .no-borderLeftReports {
        border-left: 0px;
    }

    .sectionHeader {
        font-size: 16px;
    }

    .btnMakeBooking-QuickAction {
        width: 125px;
        font-size: 12px;
        padding: 6px 6px;
    }

    .dropdown-QuickBooking {
        width: 125px;
        font-size: 12px;
    }

    .documents-card-redesign {
        width: 80%;
    }

    .columnPosition {
        width: 100%;
    }

    @media (min-width: 350px) {
        .profile-username {
            max-width: 400px;
        }
    }
}

@media (max-width: 1100px) {
    .btnMakeBooking-QuickAction {
        height: 36px;
    }

    .dropdown-QuickBooking {
        height: 36px;
    }
}

/*Dashboard Contact Us and Helpful Guides Section*/
.dashboard-card-bottom {
    padding: 20px;
    background-color: var(--white);
    margin-top: 10px;
    border-radius: 8px;
    height: auto;
}

.contactImage {
    height: 112px;
    width: 112px;
    border-radius: 8px;
}

.modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    -ms-overflow-style: none; /* IE and Edge */ /* Hide scrollbar for IE, Edge and Firefox */
    scrollbar-width: none; /* Firefox */
}

    .modal::-webkit-scrollbar {
        display: none;
    }

.input-icon-guides {
    position: absolute;
    right: 25px;
    top: calc(25% - 0.5em);
}

.guides-list {
    overflow-y: auto;
    width: 100%;
    height: 90%;
    min-height: 40vh;
    padding-left: 8px;
}

.guidesContent {
    background-color: var(--white);
    border-radius: 1rem;
    max-width: 1200px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    min-height: 90vh !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--veryLightGrey);
}

    .modal-header h2 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    .modal-header .close-btn {
        color: var(--lightGrey);
        font-size: 1.5rem;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.2s;
    }

        .modal-header .close-btn:hover {
            color: var(--charcoalGrey);
        }

.guidesListBody {
    display: flex;
    flex-grow: 1;
    min-height: 78vh;
    padding: 0.5rem;
}

.video-list {
    width: 350px;
    flex-shrink: 0;
    padding-bottom: 1rem;
}

    .video-list h3 {
        font-weight: 500;
        color: #4b5563;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--veryLightGrey);
        margin: 0;
    }

.video-list-item {
    display: flex;
    width: 100%;
    overflow: auto;
    cursor: pointer;
    transition: background-color 0.2s;
    align-items: center;
    padding: 0.5rem 1rem;
}

    .video-list-item:hover {
        background-color: #f3f4f6;
    }

    .video-list-item.active {
        background-color: var(--veryLightGrey);
    }

    .video-list-item img {
        width: 80px;
        height: 50px;
        margin-right: 1rem;
        flex-shrink: 0;
    }

.docTypeImage {
    width: 90px;
    height: 55px;
    border-radius: 0.5rem;
    margin-right: 10px;
    background-color: white;
    border: 2px solid lightgray;
    text-align: center;
    align-items: center;
    padding: 20px;
    flex-shrink: 0;
}

.list-item-info {
    display: flex;
    flex-direction: column;
}

    .list-item-info p {
        margin: 0;
        font-size: 0.75rem;
    }

    .list-item-info .title {
        font-weight: 500;
        color: #111827;
    }

    .list-item-info .duration {
        color: #6b7280;
        font-weight: 500;
    }

.thumbnail {
    border-radius: 8px;
    border: 2px solid lightgray;
    flex-shrink: 0;
}

.documents-section {
    border-top: 1px solid var(--veryLightGrey);
    padding-top: 1rem;
}

    .documents-section h3 {
        font-weight: 500;
        color: #4b5563;
        padding: 0 1rem;
        margin-bottom: 0.5rem;
    }

.document-item {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--anchorBlue);
    display: flex;
    cursor: pointer;
    transition: background-color 0.2s;
    align-items: center;
    border-radius: 4px;
}

    .document-item:hover {
        background-color: var(--paleGrey);
    }

    .document-item.active {
        background-color: var(--veryLightGrey);
    }

.video-player {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--black);
}

    .video-player iframe {
        width: 100%;
        height: 100%;
        align-items: start;
        border: none;
        overflow-y: auto;
    }

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: background-color 0.2s;
}

    .play-overlay:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

.play-btn-icon {
    width: 6rem;
    height: 6rem;
    border-radius: 9999px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
}

    .play-btn-icon svg {
        fill: white;
        width: 2.5rem;
        height: 2.5rem;
        margin-left: 0.5rem;
    }

.loading {
    text-align: center;
    color: #6b7280;
    padding: 1rem;
}

.line-clamp {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
}

.bottomLandingPageContainerCard {
    height: auto;
}

.row.BottomLandingPageContainer,
.row.landingPageTabsContainer {
    display: flex;
    align-items: flex-start;
}

/*Carousel Changes*/
.carousel-container {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    min-height: 180px;
}

.carousel-messageStructure {
    overflow: auto;
    display: flex;
}

.message-content {
    vertical-align: top;
    padding-left: 16px;
    height: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.carousel-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    flex-shrink: 1;
    flex-wrap: nowrap;
}

.carousel-title {
    color: black;
    font-weight: bold;
    margin-bottom: 0px;
}

.carousel-date {
    color: #646464;
    font-size: 18px;
}

.carousel-summary {
    color: black;
    font-weight: 400;
    font-size: 18px;
    padding-top: 0px;
    min-height: 56px;
    height: auto;
    flex-shrink: 1;
}

.messageSummary {
    height: auto;
    color: black;
    font-weight: 400;
    font-size: 18px;
    padding-top: 0px;
    flex-shrink: 1;
}

.carousel-author {
    color: black;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 8px;
}

.carousel-message {
    cursor: pointer;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--white);
    margin-right: 20px;
}

    .carousel-message.active {
        opacity: 1;
        position: static;
    }

.carousel-message-modal {
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    position: static;
    max-height: 90vh;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
}

.message-content-modal {
    vertical-align: top;
    padding-left: 16px;
    height: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.slides-wrapper {
    display: flex;
    width: fit-content;
    transition: transform 1s ease-in-out;
}

.carousel-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.prev-button,
.next-button {
    cursor: pointer;
    transition: background-color 1s ease;
    padding-right: 20px;
    color: var(--neuvenPurple);
    font-size: 18px;
    font-weight: bold;
}

.pagination-dots {
    display: flex;
    gap: 8px;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .dot.active {
        background-color: var(--neuvenPurple);
    }

.messageLogoContainer {
    background-color: var(--neuvenPurple);
    height: 170px;
    width: 170px;
    display: inline-block;
    border-radius: 8px;
}

.modalLogoContainer {
    background-color: var(--neuvenPurple);
    height: 170px;
    width: 170px;
    display: inline-block;
    border-radius: 8px;
}

.messageLogoContainerNoImage {
    background-color: var(--neuvenPurple);
    height: 170px;
    width: 170px;
    display: inline-block;
    padding-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 8px;
    text-align: center;
}

.modalLogoContainerNoImage {
    background-color: var(--neuvenPurple);
    height: 170px;
    width: 170px;
    display: inline-block;
    padding-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 8px;
    text-align: center;
}

.messageLogoImage {
    height: 170px;
    width: 170px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    aspect-ratio: 1;
}

.messageLogoImageBackup {
    width: 80%;
}

.messageTitle {
    color: black;
    font-weight: bold;
    height: 30px;
}

.messageDetailsHtmlString img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
    margin: auto;
    padding-bottom: 16px;
}

.messageDetailsHtmlString {
    font-weight: 400;
    font-size: 18px;
    color: var(--black);
}

.importantMessageAgreeStatement {
    color: var(--black);
    font-weight: 400;
    font-size: 18px;
    padding-top: 0px;
    cursor: pointer;
}

@media screen and (max-width: 800px) {
    .carousel-messageStructure {
        display: block;
        text-align: center;
    }

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

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

    .messageSummary {
        font-size: 14px;
    }

    .message-content {
        padding-top: 16px;
        padding-left: 0px;
    }

    .carousel-navigation {
        display: block;
        margin-top: 16px;
    }

    .pagination-dots {
        padding-top: 20px;
        padding-left: 45%;
    }

    .carousel-header {
        display: block;
    }

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

    .carousel-message-modal {
        text-align: center;
        padding-left: 0px;
        display: inline-block;
        flex-shrink: 1;
        padding-bottom: 50px !important;
    }

    .message-content-modal {
        padding-top: 16px;
    }

    .carousel-modal-header {
        display: block;
    }

    .modalLogoContainer {
        text-align: center;
    }

    .modalLogoContainerNoImage {
        text-align: center;
    }

    .prev-button,
    .next-button {
        font-size: 16px;
    }

    .messageDetailsHtmlString {
        font-size: 14px;
    }

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

/*************************/
/*                       */
/*    Navigation Menu    */
/*                       */
/*                       */
/*************************/
.navigationbar-v2 a {
    text-decoration: none;
    font-size: 14px;
    color: var(--neuvenBlue);
    text-align: left;
    transition: 0.3s;
}

.navigationSurround-v2 {
    position: fixed;
    z-index: 1;
    top: 55px;
    left: 0px;
    border: 0px;
    border-style: solid;
    border-image: linear-gradient(var(--neuvenPurple) 5%, var(--neuvenBlue) 40%);
    border-image-width: 100% 0 0 1;
    border-left: 15px solid;
    background-color: var(--white);
}

.navigationbar-v2 {
    height: 100vh;
    width: 280px;
    float: left;
    z-index: 1;
    top: 50px;
    left: 1000px;
    background-color: var(--white);
    overflow-x: hidden;
    transition: 0.5s;
    margin-left: -300px;
    padding-bottom: 20px;
    -ms-overflow-style: none; /* IE and Edge */ /* Hide scrollbar for IE, Edge and Firefox */
    scrollbar-width: none; /* Firefox */
}

    .navigationbar-v2 .menu .item {
        position: relative;
        margin-bottom: 4px;
        margin-right: 8px;
    }

        .navigationbar-v2 .menu .item:not(:has(.sub-btn)) {
            width: 100%;
            padding-right: 8px;
        }

        .navigationbar-v2 .menu .item a {
            user-select: none;
        }

        .navigationbar-v2 .menu .item .sub-btn {
            min-width: auto;
        }

    .navigationbar-v2:hover {
        margin-left: 0;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .navigationbar-v2::-webkit-scrollbar {
        display: none;
    }

.navigationbarControl-v2 {
    height: 2004px;
    float: left;
    width: 0px;
    opacity: 1;
    top: 400px;
    left: 1000px;
    background-color: var(--white);
    border-right: 1px solid var(--grey);
}

    .navigationbarControl-v2 .fa-stack {
        margin: 38px 0px 0px -14px;
        width: 26px;
        height: 26px;
        cursor: pointer;
    }

        .navigationbarControl-v2 .fa-stack.navigationExpand-v2 .fa-chevrons-right {
            margin: 0px 2px;
            bottom: -3px;
        }

        .navigationbarControl-v2 .fa-stack .fa-chevrons-right {
            margin: 0px 0px;
        }

@media(max-width:767px) {
    .navigationbarControl-v2 .fa-stack .fa-chevrons-right {
        bottom: -1px
    }
}

@media (min-width:768px) {
    .navigationbarControl-v2 .fa-stack .fa-chevrons-right {
        bottom: -3px
    }
}


.navigationbarControl-v2 .fa-stack i.fa-circle.fa-solid {
    color: var(--white);
}

.navigationbarControl-v2 .fa-stack:hover i.fa-circle.fa-solid {
    color: var(--navigationBlue);
}

.navigationbarControl-v2 .fa-stack:hover i.fa-thin {
    color: var(--white);
}

.MenuDetails {
    color: var(--charcoalGrey);
    font-weight: 500;
}

.main {
    padding-left: 30px;
    margin-right: 50px;
}

.v-align-m {
    vertical-align: middle;
    padding-bottom: 0px;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    margin-right: auto;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--white);
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.navbar-nav {
    flex-direction: unset;
    margin-right: 0px;
    align-items: center;
}

    .navbar-nav .nav-item .nav-link {
        display: inline;
    }

.text-purple, .nav-link.text-purple {
    color: var(--neuvenPurple);
    font-weight: bolder;
}

    .text-purple:hover {
        color: var(--chevronBlue);
        font-weight: bolder;
    }


.text-charcoal,
.nav-link.text-charcoal {
    color: var(--charcoalGrey);
    font-weight: bold;
}

.text-grey {
    color: var(--darkGrey);
    font-weight: bold;
}

.pl-0 {
    padding-left: 0px !important;
}

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

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

.mw-400 {
    max-width: 400px;
}

.mw-200 {
    max-width: 200px;
}

.topbar-username {
    padding-right: 0.75rem !important;
    line-height: 20px;
    height: auto;
    flex-grow: 1;
    width: 100%;
}

.red-italic-text {
    color: var(--red);
    font-style: italic;
}

.flag-icon {
    margin-right: 10px;
}

.roundimage {
    border-radius: 50%;
}

.bookinglistbtn {
    cursor: pointer;
}

.main-content li {
    --bs-gutter-x: -0.5rem !important;
}

.notification {
    text-decoration: none;
    position: relative;
}

    .notification .badge {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 5px 10px;
        border-radius: 50%;
        background: red;
        color: white;
        display: none;
    }

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.impersonationText {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    max-width: 25vw;
}

.noTransition {
    transition: none;
}

side-bar .menu .item {
    position: relative;
    cursor: pointer;
}

.navigationbar-v2 .menu .item a {
    cursor: pointer;
    border-radius: 8px;
    margin-left: 16px !important;
    color: #000;
    font-size: 16px;
    text-decoration: none;
    display: block;
    padding: 5px 10px;
    line-height: 30px;
}


    .navigationbar-v2 .menu .item a:hover {
        background: var(--lightBlue);
        transition: 0.3s ease;
    }

.navigationbar-v2 .menu .item .sub-menu {
    margin-top: 4px;
    margin-bottom: 4px;
}

.navigationbar-v2 .menu .item i {
    margin-right: 12px;
}

.navigationbar-v2 .menu .item a .dropdown {
    position: absolute;
    right: 0;
    margin: 6px 10px;
    transition: 0.3s ease;
}

.navigationbar-v2 .menu .item .sub-menu {
    background: rgba(255, 255, 255, 0.1);
    display: none;
}

    .navigationbar-v2 .menu .item .sub-menu a {
        padding-left: 41px;
    }

.rotate {
    transform: rotate(90deg);
}

.nav-item .nav-link,
.nav-tabs .nav-link {
    -webkit-transition: all 300ms ease 0s;
    -moz-transition: all 300ms ease 0s;
    -o-transition: all 300ms ease 0s;
    -ms-transition: all 300ms ease 0s;
    transition: all 300ms ease 0s;
}

.nav-selected, .navigationbar-v2 .menu .item a.nav-selected i, .navigationbar-v2 .menu .item a.nav-selected span {
    background-color: var(--lightBlue) !important;
    color: var(--navigationBlue)
}

.menuDetails-seleted {
    color: var(--navigationBlue)
}

.navIcon {
    vertical-align: middle;
    width: 16px !important;
    padding-top: 7px;
    padding-bottom: 7px;
}

.navigationbar-v2 i {
    color: var(--charcoalGrey);
}

.headerBottomBorder-New {
    width: 100%;
    background-color: var(--grey);
    height: 1px;
    z-index: 999;
    position: sticky;
    top: 0;
    margin-top: -1px;
}

[data-initials-topbar]:before {
    background-color: var(--lightPurple);
    color: #4B4B4B;
    opacity: 1;
    content: attr(data-initials-topbar);
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 41px;
    text-align: center;
    align-items: center;
    cursor: pointer;
}

.newLayoutHeader {
    position: sticky;
    top: 0;
    z-index: 980;
    padding: 0px 0;
    border-left: solid 15px !important;
    border-color: var(--neuvenPurple) !important;
    background-color: white;
}

.newLayoutHeaderWithoutGradient {
    line-height: 60px;
    position: sticky;
    top: 0;
    z-index: 980;
    padding: 0px 0;
    background-color: white;
}

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

.nav-margin-new {
    margin-top: 50px;
    min-height: fit-content;
    margin-bottom: 100px;
}

.compactNav {
    width: 50px;
    height: 60px;
    display: none;
}

@media (max-width: 700px) {
    .navigationSurround-v2 {
        top: 72px;
        height: 2000px;
    }
}

@media screen and (max-width: 600px) {
    #nav-burger-menu-new {
        font-size: xx-large;
        display: block !important;
        height: 48px;
    }



    .main .main-content {
        height: 100%;
        margin-right: 10px;
        margin-left: 30px;
    }

    .container-left {
        padding-left: 10px !important;
    }

    #expandArrow {
        display: none;
    }

    .navigationExpand-v2 {
        display: none;
    }

    .nav-margin-new {
        margin-top: 10px !important;
        padding-bottom: 80px;
    }

    .main {
        padding-left: 0px !important;
        margin-right: 50px;
        height: 100%;
    }

    .body-style {
        background-color: var(--lightOffWhite);
        overflow-x: hidden;
    }

    .btn-success,
    .btn-primary,
    .btn-success-blue,
    .ta-btn-success-blue,
    .ta-btn-success-purple,
    .btn-danger-red,
    .btn-close-grey,
    .btn-outline-primary,
    .btn-outline-register,
    .btn-outline-primary-purple,
    .bookinglistbtn,
    .btn-worker-by-category,
    .btn-holiday-by-category,
    .btn-test,
    .btn-holiday-by-category,
    .btn-neuven-blue,
    .btn-test,
    .btn,
    #btnAddCalculate,
    .btn-purple,
    .rateadjustment-cancelbtn,
    .fc-button-primary,
    button {
        padding: 9px 10px;
    }

    .nav-user {
        display: none;
    }

    .nav-margin-new {
        margin-top: 0;
    }

    .topRightDiv {
        padding-top: 12px;
    }
}

@media screen and (max-width: 840px) {
    .main-content {
        height: 100%;
    }

    .main {
        padding-left: 0px !important;
        margin-right: 50px;
        height: 100%;
    }
}

@media screen and (max-width: 860px) {
    .d-flex-direction-v2 {
        flex-direction: column;
    }

    .shiftAction {
        width: 100%;
    }

    .shiftDetails {
        width: 100%;
    }
}

@media (min-width: 601px) and (max-width: 850px) {
    .main-content {
        margin-left: 7%;
    }

    .main {
        padding-left: 30px !important;
        margin-right: 50px;
        height: 100%;
    }

    .fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
        margin-top: 10px;
    }

    .container-left {
        padding-left: 0px !important;
    }

    .nav-user {
        padding-right: 5px !important;
    }
}

.display-flex {
    display: flex !important;
}

.form-control:focus {
    color: var(--blueCharcoal);
    background-color: var(--white);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: none;
    border: 2px var(--black) solid !important;
}

.button-zoom-out {
    bottom: 15%;
    animation: button-out 0.25s forwards button-out;
    -webkit-animation: linear;
    -webkit-animation-name: button-out;
    -webkit-animation-duration: 0.25s;
}

    .button-zoom-out:hover {
        bottom: 15%;
        animation: button-in 0.25s forwards button-in;
        -webkit-animation: linear;
        -webkit-animation-name: button-in;
        -webkit-animation-duration: 0.25s;
        -webkit-animation-fill-mode: forwards;
    }

@keyframes button-out {
    0% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.main-content {
    flex: 1;
    transition: .5s;
    text-align: left;
    margin: 20px 20px 50px 30px;
    font-size: 14px;
}

.choice-sub-title-600 {
    font-weight: 600;
    font-size: larger;
}

div.dataTables_scrollBody thead {
    display: none;
}

.form-style input {
    border: 0;
    height: 50px;
    border-radius: 0;
    background-color: var(--veryPaleGrey);
}

    .form-style input:focus {
        box-shadow: none;
        outline: 0;
        background-color: var(--veryPaleGrey);
    }

.close-button, .close-new-button {
    color: red;
    font-size: 24px;
}

.rate-row-padding-bottom {
    padding-bottom: 15px;
}

.row-lp-12 {
    padding-left: 12px;
}

.filterSelected {
    opacity: 0.3;
}



/*IncidentLog Changes*/
.pill-red {
    height: 25px;
    width: 69px;
    border-radius: 23px;
    background-color: var(--pillRed);
    text-align: center;
    padding-top: 4px;
    color: var(--white);
    font-weight: 500;
}

.pill-red-thin {
    border-radius: 23px;
    background-color: var(--pillRed);
    text-align: center;
    padding: 2px 8px;
    color: var(--white);
    font-weight: 600;
    width: fit-content;
    height: fit-content;
}

.pill-orange {
    height: 25px;
    width: 69px;
    border-radius: 23px;
    background-color: var(--pillOrange);
    text-align: center;
    padding-top: 4px;
    font-weight: 500;
}
/*Agency Worker Documents*/
.tooltipFilterButton.show {
    display: block;
}

.tooltipFilterButton {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 10px;
    margin: 0;
    font-size: 1rem;
    color: var(--black);
    text-align: left;
    list-style: none;
    background-color: var(--white);
    background-clip: padding-box;
    border: 0.5px solid var(--borderMidGrey);
    border-radius: .25rem;
}

.tableHeader {
    background-color: var(--offWhite);
}

.tableFooter {
    background-color: var(--offWhite);
}

.pageTitle {
    background-color: var(--backgroundGrey);
}

.backButtonIcon {
    color: var(--royalPurple);
}

.text-danger {
    color: var(--red)
}

.text-black {
    color: var(--black)
}

.swal-custom-text {
    font-weight: 500;
    color: var(--black);
    font-size: 16px;
    line-height: 1.4;
}

.evenPadding-LeftRight {
    padding: 0px 50px 0px 50px !important;
}

.evenMargin-TopBottom {
    margin: 20px 0px 20px 0px;
}

.pageHeader {
    color: var(--neuvenPurple);
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

.pageLabels {
    color: var(--black);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 16px;
}

.dataTables_filter .search-label {
    padding-left: 0;
}

.pageDescription {
    color: var(--black);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.overridePopUpDescription {
    color: var(--black);
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    justify-content: center;
}

.swalButton {
    display: flex;
    width: clamp(200px, 20vw, 262px);
    height: clamp(50px, 10vw, 80px);
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin: 8px;
    text-align: center;
    font-family: Montserrat;
    font-size: clamp(1rem, 2vw, 1.6rem) !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.swalWidthHeight {
    width: 637px !important;
    height: 579px !important;
}

.swalText {
    color: var(--black) !important;
    text-align: center;
    font-family: Montserrat !important;
    font-size: clamp(0.8rem, 4vw, 1.4rem) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

.swalTitle {
    color: var(--black) !important;
    font-family: Montserrat;
    font-size: clamp(1rem, 6vw, 2rem) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
}

.min-width-180 {
    min-width: 180px !important;
}

.min-width-300 {
    min-width: 300px !important;
}

.worker {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.name {
    flex-grow: 1;
}

.worker-options-container {
    flex: 1;
    overflow-y: auto;
    height: 38vh;
}

.worker-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.worker-option {
    margin-right: 10px;
}

.break-setting-container {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
    column-gap: 10px;
}

    .break-setting-container > div {
        min-width: 0;
        overflow: hidden;
    }

    /*for ios*/
    .break-setting-container input[type="time"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .break-setting-container select {
        width: 100%;
        min-width: 0;
    }


.break-setting {
    width: 100%;
    margin-bottom: 40px;
    height: 80px;
    text-align: left;
}

.break-option-setting {
    width: 100%;
    height: 40px;
    font-size: 1.5rem;
    margin-top: 10px;
    border: 1px solid #666666;
    align-self: center;
    border-radius: 8px;
}

.worker-input-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #007bff; /* Blue checkmark */
    cursor: pointer;
    border-radius: 8px;
}

.worker-input-time select,
.worker-input-time input[type="time"] {
    font-weight: 500; /* or bold */
    font-size: 1.5rem;
    padding: 5px;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    height: 40px;
}

.worker-select select option {
    font-weight: 500; /* or bold */
}

.reportPageContainerCard {
    height: auto;
    margin-top: 10px;
}

.report-card-bottom {
    padding: 10px;
    background-color: var(--white);
    border-radius: 8px;
    height: auto;
    min-height: 160px;
    align-content: center;
}

.report-item {
    background-color: var(--white);
    flex: 1 1 21%;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 8px;
    border-left: 0px !important;
    padding-left: 0px !important
}

.report-item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.icon-report {
    display: inline-block;
    height: 70px;
    padding: 16px;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    text-align: center;
}

.selectedDetailsNote {
    color: var(--red);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 16px;
}

.adjustment-card-bottom {
    padding: 20px;
    background-color: var(--white);
    margin-top: 10px;
    border-radius: 8px;
    height: auto;
}

.adjustment-item {
    background-color: rgba(250, 250, 250, 1);
    flex: 1 1 21%;
    margin-bottom: 16px !important;
    display: flex;
    align-items: start;
    text-align: left;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
}

.adjustment-item-content {
    margin-top: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.icon-adjustment {
    display: inline-block;
    height: 70px;
    padding: 16px;
    align-items: center;
    border-radius: 8px;
    text-align: center;
    background: rgba(78, 38, 128, 0.2);
}

    .icon-adjustment .icon {
        color: rgba(78, 38, 128, 1);
    }

.adjustment-item-content h6 {
    color: rgba(141, 141, 141, 1);
}

.adjustment-item-content h5 {
    overflow-wrap: break-word;
    word-break: break-word;
}

.custom-file-input::file-selector-button {
    font-size: 16px;
    padding: 11px;
    background-color: lightgrey;
    border: 1px solid #ced4da;
    cursor: pointer;
    transition: background-color .15s ease;
    margin-right: 10px;
    text-align: right;
}

    .custom-file-input::file-selector-button:hover {
        background-color: #cbcbcb;
        border: 1px solid #cbcbcb;
    }

.custom-file-input {
    width: 100%;
    max-width: 100%;
    text-align: right;
    font-size: 16px;
    color: #212529;
    border: 1px solid lightgrey;
}

.consent-title {
    color: var(--black);
    font-family: Montserrat;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.consent-text {
    color: var(--black);
    text-align: center;
    font-family: Montserrat;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.blockedWorkerTimesheetText {
    color: #be3333;
}

.blockedWorkerText {
    opacity: 0.5;
}

#blockTimesheetCreation {
    min-width: 240px !important;
}

.timesheetUndoIcon {
    margin-left: 5px;
    cursor: pointer;
}

.lh-20 {
    line-height: 20px;
}


/* !important tags added to nav related classes to overcome customization in site.css*/
.nav-tabs {
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--borderMidGrey) !important;
}

.nav-link.active {
    color: var(--neuvenPurple) !important;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px 8px 0px 0px !important;
    border-color: var(--borderMidGrey) var(--borderMidGrey) var(--white) !important;
    border-width: 1px !important;
    background-color: var(--white) !important;
    box-shadow: none !important;
}

.nav-tabs > .nav-item > .nav-link {
    color: var(--charcoalGrey);
    background-color: transparent;
    border-radius: 8px;
    font-size: 14px;
    margin-left: 0px !important;
}

    .nav-tabs > .nav-item > .nav-link:hover {
        border-radius: 8px 8px 0px 0px;
    }

.calendar-booking-icon {
    position: absolute;
    right: 60px;
}

.tab-content .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-input-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    height: 40px !important;
}

.tab-content .select2-selection, .select2-input-form .select2-selection {
    height: 40px !important;
}

.tab-content .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-input-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}

.tab-content .select2-container--default .select2-selection--single .select2-selection__clear, .select2-input-form .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 30px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    padding: 0px 0px 0px 5px !important;
}

.documents-card-redesign {
    width: 100%;
}

.neu-dropzone.dropzone .dz-preview {
    margin-top: 0 !important;
}

.neu-dropzone.dropzone {
    min-height: 150px !important;
    border: 2px dashed var(--neuvenPurple) !important;
    /*padding: 2rem !important;*/
    border-radius: 8px !important;
    display: flex;
    align-items: center;
}

    .neu-dropzone.dropzone .dz-message {
        border: 0 !important;
    }

    .neu-dropzone.dropzone .dz-preview .dz-image {
        width: 200px;
        height: 100px;
        border-radius: 8px;
    }

        .neu-dropzone.dropzone .dz-preview .dz-image img {
            /*object-fit: cover*/
            width: 100%;
            height: auto;
        }

    .neu-dropzone.dropzone .dz-preview.dz-file-preview .dz-image {
        border-radius: 8px;
        background: white;
    }


.dropzone {
    background: var(--paleGrey);
    border: none !important;
    padding: 10px 10px !important;
}

    .dropzone .dz-message {
        margin: 0px !important;
    }

.neu-profile-image .dropzoneRing + .dz-preview .dz-image img {
    width: 100%;
    height: auto;
    max-height: unset;
    max-width: 300px;
    border-radius: 50%;
}

.neu-profile-image .dz-preview img {
    max-height: unset;
    max-width: 300px;
    border-radius: 50%;
    min-width: 250px;
    min-height: 250px;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.neu-profile-image.dropzone .dz-preview .dz-image {
    border-radius: 50% !important;
    width: 250px;
    height: 250px;
}

.neu-profile-image.dropzone .dz-preview:hover .dz-image img {
    transform: none;
    filter: none;
}



.dropzoneRing {
    border: 2px dashed var(--neuvenPurple);
    background: var(--paleGrey);
    border-radius: 100%;
    width: 250px;
    height: 250px;
    align-content: center;
    justify-content: center;
    text-align: center;
    user-select: none;
}

    .dropzoneRing + .dz-preview .dz-image img {
        border-radius: 100%;
        width: 100%;
        height: 100%;
        min-width: 250px;
        min-height: 250px;
        border: 4px solid var(--neuvenPurple);
    }

    .dropzoneRing + .dz-preview .dz-image {
        min-width: 100%;
        min-height: 100%;
    }

.dropzone .dropzoneRing + .dz-preview {
    margin-top: 0px !important;
}

    .dropzone .dropzoneRing + .dz-preview div:not(.dz-image, .dz-remove) {
        display: none;
    }

.dropzoneRing > .fa-solid {
    color: var(--neuvenPurple);
    font-size: 24px;
}


.dropzone:has(.dropzoneRing) {
    border-radius: 100%;
    width: 250px;
    height: fit-content;
    background: none;
    padding: 0px !important;
}

    .dropzone:has(.dropzoneRing) .dz-preview {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .dropzone:has(.dropzoneRing) .dz-details, .dropzone:has(.dropzoneRing) .dz-remove {
        width: 100%;
        text-align: center;
    }

.dropzone-dzMessage-Redesign {
    border: 2px dashed var(--neuvenPurple);
    padding: 2.5rem;
    border-radius: 8px;
}

.dropzoneButton {
    width: 100%;
    border-style: none;
    background-color: var(--white);
    color: var(--anchorBlue);
    cursor: pointer;
    margin-top: 2px;
    font-size: 14px;
    padding: 0px;
}

.columnPosition {
    float: left;
    margin-bottom: 10px;
}

.display-block {
    display: block;
}

.display-none {
    display: none;
}

.dropdown-toggle.height40,
.height40 {
    height: 40px;
}

.height40important {
    height: 40px !important;
}

.width-120 {
    width: 120px;
    min-width: fit-content;
}

.restyledButton:has(.fa-file-export) {
    min-width: 120px;
    white-space: nowrap;
}

.width-160 {
    width: 160px;
}

.mt-10 {
    margin-top: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-24 {
    margin-left: 24px;
}

.mr-10 {
    margin-right: 10px;
}

.red-x {
    font-weight: 900 !important;
    font-size: 26px !important;
    color: var(--red);
}

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

.w-120px {
    width: 120px;
}

.alignLeft {
    text-align: left !important;
}
/*#region end*/
/*#region end*/

.shift-data-input {
    float: left;
    margin-bottom: 32px;
    height: fit-content;
}

.margin-bottom {
    margin-bottom: 10px;
}

.marginLeftRight {
    margin-left: 5px;
    margin-right: 5px;
}

.label-input {
    vertical-align: middle;
    margin-right: 5px;
}

.label-input-span {
    vertical-align: middle;
    padding-top: 20px;
}

.padding-right {
    padding-right: 5px;
}

.padding-half-rem {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.modal-close-icon {
    font-weight: 900;
    font-size: 30px;
    color: red;
}

.minWidth200 {
    min-width: 200px;
}

.minWidth150 {
    min-width: 150px;
}

.margin-top15 {
    margin-top: 15px;
}

.alignTextIcon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

/*#region end*/


:root {
    /* colours */
    --color-surface: #faf7ff;
    --color-text: #1f1f1f;
    --color-card-bg: #fff;
    --color-card-border: #d9d9e3;
    --color-text: #111;
    --selection-accent: #0BA100;
    /* spacing */
    --space-6: 24px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    /* radius */
    --radius-lg: 16px;
    --radius-10: 10px;
    --radius-14: 14px;
    /*effects*/
    --elev-1: 0 1px 0 rgba(0,0,0,.03);
    --accent-600: rgb(92,50,138);
    --accent-300: rgba(92,50,138, 0.15);
    --on-accent: #fff;
    /*fonts*/
    --fw-800: 800;
}

.venta {
    max-width: 780px;
    margin-inline: auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

.venta--surface {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.venta-title,
.venta-subtitle {
    text-align: center;
    color: #111;
}

.mt-8 {
    margin-top: var(--space-8);
}

.pt-8 {
    padding-top: var(--space-8);
}

.p-12 {
    padding: var(--space-12);
}

.rounded-14 {
    border-radius: var(--radius-14);
}

.border-1 {
    border: 1px solid var(--color-card-border);
}

.shadow-1 {
    box-shadow: var(--elev-1);
}

.venta-card-dimx {
    width: 100%;
    display: flex;
    gap: 0;
    padding: 0;
    margin: var(--space-16, 16px) 0;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--card-border, var(--color-card-border));
    box-shadow: var(--card-ring, var(--elev-1));
}

.card--surface {
    background-color: transparent;
    color: var(--color-text);
}


.venta-card:focus {
    outline: none;
}

.border-accent {
    border-color: var(--accent-600);
}

.ring-accent {
    box-shadow: 0 0 0 3px var(--accent-600);
}


.venta-card {
    border-color: var(--card-border, currentColor);
    box-shadow: var(--card-ring, none);
}


    .venta-card.selected {
        --card-border: var(--selection-accent);
        --card-ring: 0 0 0 3px var(--selection-accent);
    }

.pill {
    min-width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-10);
    padding: var(--space-10);
}

.pill--accent {
    background: var(--neuvenPurple);
    background-color: var(--neuvenPurple);
    color: var(--on-accent);
}

.self-stretch {
    align-self: stretch;
}

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

.fw-800 {
    font-weight: 800;
}

.fs-10 {
    font-size: 10px;
}

.venta-card-body {
    flex: 1;
    border: 1px solid #d9d9e3;
    border-radius: 10px;
    padding: 12px 14px;
}

.venta-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.venta-group {
    flex: 1;
}

.venta-label {
    font-size: 12px;
    color: #7c7c7c;
}

.venta-missing {
    margin: 6px 0 16px 0;
    font-size: 14px;
}

    .venta-missing a {
        color: #111;
        text-decoration: underline !important;
    }

.venta-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.venta-btn {
    border-radius: 12px;
    padding: 14px 20px;
    min-width: 220px;
    font-weight: 700;
}

.venta-btn-primary {
    background: var(--neuvenPurple);
    color: var(--white);
    border: none;
}

    .venta-btn-primary:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.venta-btn-outline {
    background: transparent;
    color: #6a2bbd;
    border: 2px solid #6a2bbd;
}

#screen-not-booked .choice-title-lrg {
    font-weight: 600;
    color: #000000;
}

#screen-not-booked .venta-switch-button,
#screen-not-booked .venta-switch-button-purple {
    border-width: 1px !important;
    border-style: solid;
}

.pt-6rem {
    padding-top: 6rem;
}

.height-78vh {
    height: 78vh;
}

.mt-8px {
    margin-top: 8px;
}

@media (max-width: 640px) {
    .venta-row {
        flex-direction: column;
        gap: 10px;
    }

    .venta-pill {
        min-width: 72px;
    }
}

#venta-ta-root.venta--surface {
    background-color: var(--white) !important;
}

.venta-missing {
    width: 100%;
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.venta-create-link {
    display: inline-block;
    font-weight: 600;
    text-decoration: underline;
}

#venta-shifts .text-muted,
#venta-ongoing-shifts .text-muted {
    width: 100%;
    text-align: center;
}

/*#region end*/

.padding-10 {
    padding: 10px 10px 10px 10px;
}

.errorRedFont {
    color: var(--errorRed);
}

.EditBulkActions {
    margin-left: 10px;
}

.TimesheetBulkOptionDropdown:active {
    background-color: white !important;
}


.TimesheetBulkOptionDropdown.active, .TimesheetBulkOptionDropdown.dropdown-toggle.show, .TimesheetBulkOptionDropdown:active {
    background-color: var(--white) !important;
    color: #4E2680 !important;
}

.SearchDdls .bootstrap-select .bs-searchbox {
    padding: 8px 10px;
}



.audit-result {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .audit-result a {
        display: inline-flex;
        align-items: center;
    }

.audit-delete {
    color: var(--errorRed);
    cursor: pointer;
    font-size: 14px;
}

/* normal dropdown + selected */
.select2-container--default .audit-icon.pass::before {
    color: var(--vividGreen);
}

.select2-container--default .audit-icon.fail::before {
    color: var(--errorRed);
}

.select2-container--default .audit-icon.reaudit::before {
    color: var(--toastrOrange);
}

/* when row is highlighted */
.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable
.audit-icon.pass::before {
    color: var(--vividGreen);
}

.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable
.audit-icon.fail::before {
    color: var(--errorRed);
}

.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable
.audit-icon.reaudit::before {
    color: var(--toastrOrange);
}

/* SLOT TABLE ONLY */
i.audit-icon.pass,
i.audit-icon.pass::before {
    color: var(--vividGreen);
}

i.audit-icon.fail,
i.audit-icon.fail::before {
    color: var(--errorRed);
}

i.audit-icon.reaudit,
i.audit-icon.reaudit::before {
    color: var(--toastrOrange);
}

.select2-container .agency-option .audit-icon {
    display: inline-block;
    line-height: 1;
    font-size: 14px;
    flex: 0 0 auto;
}

.select2-selection__rendered .agency-option,
.select2-results .agency-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.select2-container .audit-icon,
.select2-results .audit-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.select2-container--default .audit-icon.pass {
    color: var(--vividGreen);
}

.select2-container--default .audit-icon.fail {
    color: var(--errorRed);
}

.select2-container--default .audit-icon.reaudit {
    color: var(--toastrOrange);
}

.select2-container .agency-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .select2-container .agency-option i.audit-icon {
        display: inline-block;
        font-size: 14px;
        line-height: 1;
    }

select.input-error ~ .select2 .select2-selection--single {
    border: 3px solid rgba(255, 0, 0, 0.2) !important;
    display: flex;
    align-items: center;
    padding-top: 0;
}

.orange-text {
    color: var(--toastrOrange);
}

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

.date-wrapper {
    position: relative;
}

    .date-wrapper input[type="date"] {
        padding-right: 32px; /* make space for the icon */
    }

        /* Hide the native icon (Chrome/Safari/Edge) */
        .date-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: 0;
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
        }

/* Icon styling */
.date-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--neuvenPurple);
    font-size: 1.2rem;
    margin-right: 6px;
}

td.wrap-col {
    white-space: normal !important;
    max-width: 160px !important;
}

.wrap-cell {
    white-space: normal !important;
    overflow-wrap: break-word;
    max-width: 160px !important;
}

    .wrap-cell input[type="file"],
    td.wrap-col input[type="file"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: block;
    }

#qrCode img,
#qrCode canvas {
    pointer-events: none;
}

.textGreyedOut {
    color: var(--grey);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.borderlessStripeTable.customHeader thead th {
    border-top: 1px solid var(--lightGrey);
    border-bottom: 1px solid var(--lightGrey);
    background: var(--offWhite);
    background-color: var(--lightGrey);
}

.col-custom-small {
    flex: 0 0 50px;
    max-width: 110px;
}

.tableBlackNote {
    color: var(--black);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.tableGreenNote {
    color: var(--vividGreen);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.slots-table-transition {
    transition: all 0.3s ease;
}

.allocateTable-scrollWrap {
    max-height: 320px;
    overflow-y: auto;
}

.searchInputWrapper {
    position: relative;
    display: inline-block;
    width: 130px;
}

.manualSearchBox {
    width: 110%;
    height: 25px;
    padding-right: 30px; /* space for icon */
    border: 1px solid var(--lightGrey);
}

.width-170 {
    width: 170px
}

.width-206 {
    width: 206px
}

.tableMessageStyling {
    position: absolute;
    display: none;
    z-index: 9999;
    min-width: 220px;
    max-width: 310px;
    max-height: 320px;
    overflow-y: auto;
}

.textBlack {
    color: var(--black);
    font-size: 14px;
    font-weight: 500;
}

/* Inline Table Inputs */
table:has(.table-inline-input) {
    table-layout: fixed;
}

/* Workers grid scrolls horizontally instead of squashing columns - opt this grid
   out of the fixed table-layout above so it sizes to content and can scroll. */
#WorkerTable.workerTableScroll {
    table-layout: auto;
}

.table-inline-input {
    display: block;
    width: 100%;
    height: 22px;
    min-height: unset;
    padding: 0px 4px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
}

    .table-inline-input:disabled {
        background-color: var(--lightGrey);
    }

.table-inline-date-group {
    display: flex;
    align-items: center;
    width: 100%;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

    .table-inline-date-group input.table-inline-date-input {
        padding-right: 4px;
        width: 100%;
        border: none;
        border-radius: 0;
        height: 100%;
        background-color: transparent;
    }

    .table-inline-date-group:has(.table-inline-date-input:disabled) {
        background-color: var(--lightGrey);
    }

        .table-inline-date-group:has(.table-inline-date-input:disabled) .table-inline-date-icon {
            color: #aaa;
            cursor: default;
        }

    .table-inline-date-group .table-inline-date-icon {
        background-color: transparent;
        color: var(--neuvenPurple);
        margin: 0 4px 0 0;
        padding: 0;
        line-height: 1;
        font-size: 14px;
        cursor: pointer;
        flex-shrink: 0;
    }

.audit-date-header {
    display: inline-block;
    max-width: 80px;
    word-wrap: break-word;
}

.search-wrapper .search-containerNew {
    width: 100%;
}

.max-width-546 {
    max-width: 546px;
}

.max-width-450 {
    max-width: 450px;
}

.max-width-300 {
    max-width: 300px;
}

.btn-fixed-112-40 {
    width: 112px;
    height: 40px;
    font-family: 'Montserrat';
}

.btn-icon-plain {
    background: none;
    border: none;
    padding: 0;
}

.icon-danger-20 {
    color: var(--errorRed);
    font-size: 20px;
}

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

.info-banner {
    display: flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: var(--lightBlue);
}

.info-banner-icon {
    background-color: var(--toastrBlue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-size: 22px;
}

.info-banner-text {
    padding: 12px 16px;
    color: var(--blueCharcoal);
    flex: 1;
    font-size: 14px;
}


.list-tooltip {
    position: absolute;
    padding: 8px;
    z-index: 999999;
    min-width: 200px;
    text-align: left;
}

@media (min-width:768px) and (max-width:850px) {
    .profile-field {
        width: 150px !important;
    }
}

td.worker-vencheck-cell {
    position: relative;
}

/* !important required: the header's sortable rule is itself !important, which specificity alone can't beat. */
td.worker-vencheck-cell,
#AgencyWorkerTable thead th.worker-vencheck-cell,
#WorkersTable thead th.worker-vencheck-cell {
    padding-left: 46px !important;
}

.worker-vencheck-cell .vencheck-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    width: auto;
}

.select2-container--default .select2-selection--single{
    border: none;
}

.phone-number-wrapper-redesign {
    flex: 1 1 auto;
    min-width: 0;
}

.phone-number-wrapper-redesign .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select2-container.country-code-container .select2-selection--single,
.phone-number-wrapper-redesign .form-control {
    height: 30px !important;
}

.country-code-wrapper-redesign {
    flex: 0 0 105px;
    min-width: 105px;
}

.country-code-wrapper-redesign .select2-selection--single {
    border-right: none !important;
}

    .country-code-wrapper-redesign .select2.select2-container--default.select2-container
    .selection .select2-selection {
        border-bottom-right-radius: 0;
    }

/* Vencheck Status / Flag pill box — the pills themselves are Bootstrap alerts (UNO-4954).
   Sized to match input.form-control in this stylesheet, overriding the classic-page box. */
.vencheck-pill-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    border: 1px solid var(--borderMidGrey);
    border-radius: 4px;
    background-color: var(--white);
    padding: 4px 12px;
    min-height: var(--input-height);
    line-height: 1.25;
}

.slots-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    gap: 12px;
}

.slots-main {
    flex: 1 1 auto;
    min-width: 0;
    transition: width 300ms ease, flex-basis 300ms ease;
}

.allocate-icon {
    flex: 0 0 auto;
    margin-top: 250px;
    padding: 0;
}

.allocate-table {
    flex: 0 1 400px;
    width: clamp(350px, 30vw, 400px);
    min-width: 400px;
    max-width: 400px;
    margin-top: 45px;
}

/* Optional behaviour for screens too narrow for all three */
@media (max-width: 900px) {
    .slots-layout {
        flex-wrap: wrap;
    }

    .allocate-table {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex-basis: 100%;
    }
}