:root {
    --navbar-height: 70px;  /* overriden in theme specific css files */
    --site-bg: white;
}

.ag-theme-quartz,
.ag-theme-quartz-dark,
.ag-theme-quartz-auto-dark {
    --ag-grid-size: 7px;
}
.ag-theme-quartz .ag-header-cell-text,
.ag-theme-quartz-dark .ag-header-cell-text,
.ag-theme-quartz-auto-dark .ag-header-cell-text {
    font-size: 13px;
}

body:not(.login):not(.popup-content):not(.noheader-content):not(.has-sidebar) {
    padding-top: calc(var(--navbar-height) + 2em);
}
body.body-aggrid:not(.popup-content):not(.noheader-content):not(.has-sidebar) {
    padding-top: calc(var(--navbar-height) + 1.875em);
}
body.body-mvcgrid:not(.popup-content):not(.noheader-content):not(.has-sidebar) {
    padding-top: var(--navbar-height);
}

body:not(.body-aggrid) .body-content {
    padding-bottom: 1em;
}
body.body-aggrid .body-content {
    height: 100%;
}

body:not(.has-sidebar) > .container-fluid table.sheet > thead > tr > th,
body:not(.has-sidebar) > .container table.sheet > thead > tr > th {
    top: var(--navbar-height);
}

body.has-sidebar.body-aggrid {
    padding-top: 18px;
}
body.has-sidebar .index-container {
    padding-top: 28px;
}

body.login {
    background: linear-gradient(-45deg, #FFC260, orange, #FFC260);
}

body.body-colorful {
    background: linear-gradient(-45deg, #FFC260, orange, #FFC260);
}

body.flair {
    background: linear-gradient(-145deg, #166, var(--success));
}

body.noheader-content {
    padding-top: 2em;
}

html, body {
    height: 100%;
}

    body:not(.index) .body-content:not(.scroll-past-end) {
        height: calc(100% - 10px);
    }

@media (max-width: 576px)
{
    .dropdown-menu {
        max-height: calc(100vh - 1em);
        overflow-y: auto;
    }

    .navbar-collapse .dropdown-menu {
        max-height: unset;
    }

    #myGrid {
        margin-left: -15px;
        margin-right: -15px;
    }

    .ag-theme-balham, .ag-theme-balham-dark {
        --ag-grid-size: 5px !important; /* TODO: AG-Grid does not apply this when resizing... *sigh* */
    }
}

@media (min-width: 576px)
{
    .body-content.container-fluid {
        padding-left: 26px;
        padding-right: 26px;
    }
}

body.no-container .container {
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 576px) {
    body.no-container .container {
        padding-left: 28px;
        padding-right: 28px;
    }
}


.ag-watermark,
.gm-ui-hover-effect,
.validation-summary-valid.alert-danger,
.btn-info .live-view-text,
.no-close-button .bootbox-close-button,
.dropdown-divider:first-child,
.dropdown-divider + .dropdown-divider,
.dropdown-divider + .dropdown-divider + .dropdown-divider,
.dropdown-divider + .dropdown-divider + .dropdown-divider + .dropdown-divider,
.dropdown-toggle.actions::after {
    display: none !important;
}


/* Navbar */

@media (min-width: 575.98px) and (max-width: 1199.98px) {
    .navbar-expand-xl > .container,
    .navbar-expand-xl > .container-fluid {
        padding-left: 11px;
        padding-right: 12px;
    }
}

.navbar .nav-link,
.navbar .btn {
    text-wrap: nowrap;
}

.navbar > .container-fluid,
.navbar > .container {
    gap: 1em 0;
}

.navbar-collapse {
    overflow-y: visible !important;
}

    .navbar-collapse.collapsing,
    .navbar-collapse.show {
        /*margin-top: 1em;*/
        padding: 0 1.5em;
    }

        .navbar-collapse.collapsing .fa-fw,
        .navbar-collapse.show .fa-fw {
            margin-right: 0.175em;
        }

        .navbar-collapse.show:not(.collapsing) {
            overflow-y: scroll !important;
            max-height: 75vh !important;
        }

.navbar-brand {
    padding-left: 40px;
    align-items: center;
    background: url(../images/logos/logo-128.png) no-repeat;
    background-size: 32px 32px;
    background-position: left 50%;
}

.navbar-brand-testing {
    background: url(../images/logos/logo-testing-128.png) no-repeat;
    background-size: 32px 32px;
    background-position: left 50%;
}


.content-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1em;
}
.content-header .btn {
    text-wrap: nowrap;
}

.content-footer {
    display: flex;
    align-items: center;
    gap: 5px;
}


/*#region Home/Index Page */

.index-container {
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

.index-group {
    display: flex;
    flex-direction: column;
    margin: 1em 2em;
}

@media (max-width: 1024px) {
    .index-container {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
    }

    .index-group {
        min-width: 18em;
    }
}

.index-group-title {
    font-weight: bold;
    opacity: 0.75;
}

    .index-group-title > a {
        color: inherit;
        text-decoration: none;
    }

    .index-group-title > span {
        pointer-events: none;
    }

.index-group a.btn {
    font-size: 1rem;
}

.index-group .btn {
    line-height: 1.6rem;
}

.index-group > .btn-sm:hover,
.index-group > .btn-group > .btn:hover:first-child {
    text-decoration: underline;
}

.index-group > .btn-group > .btn {
    border-radius: 0.25em !important;
}

.index-group > .btn-group > .dropdown-toggle {
    margin-left: -5px;
    padding-left: 0.7em;
    padding-right: 0.7em;
}

    .index-group > .btn-group > .dropdown-toggle::after {
        vertical-align: 0.17em;
        opacity: 0.7;
    }

/*#endregion:*/

/*#region AG-Grid touchups */

.ag-root-wrapper {
    border-radius: 3px;
}

/* Fix drag ghost taking full width when dragging column items */
.ag-dnd-ghost {
    width: auto !important;
    max-width: 300px;
}

.ag-input-field-input {
    border-radius: 3px;
}

.ag-floating-filter-input .flatpickr-input {
    border-radius: 3px;
    border: var(--ag-borders-input) var(--ag-input-border-color);
}


.floating-multi-filter-button-container {
    width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
}
.floating-multi-filter-button {
    width: 100%;
    height: 100%;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 14px;
    text-align: left;
}
.ag-theme-quartz .floating-multi-filter-button {
    border: 1px solid rgb(0,0,0, 0.15);
    background-color: rgb(255,255,255, 0.25);
}
.ag-theme-quartz-dark .floating-multi-filter-button {
    border: 1px solid rgb(255,255,255, 0.15);
    background-color: rgb(255,255,255, 0.03);
}
@media screen and (prefers-color-scheme: dark) {
    .ag-theme-quartz-auto-dark .floating-multi-filter-button {
        border: 1px solid rgb(255,255,255, 0.15);
        background-color: rgb(255,255,255, 0.03);
    }
}
@media screen and (prefers-color-scheme: light) {
    .ag-theme-quartz-auto-dark .floating-multi-filter-button {
        border: 1px solid rgb(0,0,0, 0.15);
        background-color: rgb(255,255,255, 0.25);
    }
}



/*#endregion:*/

.green-row {
    background-color: lightgreen !important;
}

.grid-container {
    display: grid;
    grid-template-columns: auto 1fr; /* Two columns: one for headers, one for values */
    gap: 10px; /* Space between columns and rows */
}

.header-item, .value-item {
    display: flex;
    align-items: center; /* Vertically center content within the grid cell */
    grid-column: auto / span 1; /* Each item spans one column */
}

.header-item {
    grid-column: 1; /* Header in the first column */
}

.value-item {
    grid-column: 2; /* Value in the second column */
    word-break: break-word; /* Ensure long words do not overflow */
}

.larger-checkbox {
    transform: scale(1.4); /* Increase size of checkbox */
}

/* Styles for Desktop View */
.desktop-view {
    display: block; /* Show on larger screens */
}

.mobile-view {
    display: none; /* Hide on larger screens */
}

/* Styles for Mobile View */
@media screen and (max-width: 767.98px) {
    .desktop-view {
        display: none; /* Hide on smaller screens */
    }
    .mobile-view {
        display: block; /* Show on smaller screens */
    }
    .edit-modal .modal-body .slick-section-header {
        padding-left: 7px;
    }
}

.cards-container {
    display: flex;
    flex-direction: column;
    overflow-y: visible;
}

.card {
    position: relative; /* Needed for absolute positioning of children */
}

.custom-card {
    border: 1px solid #ddd; /* Subtle border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Soft shadow for depth */
    border-radius: 8px; /* Rounded corners */
    background-color: #fff; /* White background */
    position: relative; /* For absolute positioning of delete button */
    font-family: 'Arial', sans-serif;
}

.custom-card-body {
    padding: 15px; /* Adequate padding inside the card */
}



.custom-delete-row:hover {
    color: #d9534f; /* Color change on hover for interactivity */
}



/* Optional: Style for hover effect on delete button */
.delete-row:hover {
    color: #ff0000; /* Change color on hover, for example */
}

.confirmation-message-bubble {
    display: block; /* Stack bubbles vertically */
    margin-bottom: 5px; /* Space between bubbles */
    background-color: #E0F7FA; /* Soft cyan */
    color: #0C5460; /* Dark cyan - for text */
    border: 1px solid #B2EBF2; /* Lighter shade of cyan for border */
    border-radius: 10px; /* Rounded corners for bubble */
    padding: 10px; /* Inner spacing */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
    max-width: 200px; /* Adjust as needed */
    word-wrap: break-word; /* Ensures text wraps inside the bubble */
    margin-top: 5px;
    /* Additional styling as needed */
}


.card-body {
    display: flex;
}

.card-column {
    flex: 1;
}

.card-header-column, .card-value-column {
    display: flex;
    flex-direction: column;
}


form.changed .when-form-unchanged,
form:not(.changed) .when-form-changed {
    display: none;
}

form:not(.editing) .when-form-editing,
form.editing .form-header .btn-group,
form.editing .form-header .btn:not(.actions):not(.close-btn):not([data-click="saveSlickEditing"]):not([data-click="cancelSlickEditing"]):not([data-click="showSidebar"]),
form.editing .form-header .dropdown-item:not([data-click="saveSlickEditing"]):not([data-click="cancelSlickEditing"]),
form.editing .form-header .dropdown-divider,
form.editing .form-header .dropdown-header,
form.editing .form-footer,
form.editing .nav-link[data-tab="references"],
form.editing .nav-link[data-tab="files"],
form.editing .save-button,
form.editing #saveButton {
    display: none !important;
}

.tab-extras {
    padding-top: 4px;
    padding-left: 5px;
}
.tab-extras > .btn {
    padding-top: 4px;
    padding-bottom: 4px;
    border: none;
}

.tooltip-inner {
    max-width: 360px;
}

.tooltip.tooltip-no-wrap,
.tooltip.tooltip-no-wrap .tooltip-inner {
    max-width: none;
}

.custom-filter-container {
    position: relative;
}

.filter-icon {
    cursor: pointer;
}

.custom-filter-input-container {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 10;
}

.confirm-icon {
    margin-left: 5px;
    cursor: pointer;
}

.file-drop-zone {
    width: 100%;
    height: 80px;
    border: 2px dashed #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #888;
    background-color: #f0f0f0;
    position: relative;
    cursor: pointer;
}

    .file-drop-zone.dragover {
        border-color: #555;
        color: #555;
        background-color: #e0e0e0;
    }

.file-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.file-attachments:not(:empty) {
    margin-top: 20px;
}

.file-attachment {
    display: flex;
    align-items: center;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
}

    .file-attachment .filename {
        font-size: 14px;
        text-decoration: none;
        color: #1a73e8;
        cursor: pointer;
    }


h4.mvc-title {
    padding-bottom: 0.65rem;
}


.btn i.fa + span:not(:empty),
.btn i.fas + span:not(:empty),
.btn i.far + span:not(:empty),
.btn i.fab + span:not(:empty) {
    margin-left: 4px;
}
.btn span:not(:empty) + i.fa,
.btn span:not(:empty) + i.fas,
.btn span:not(:empty) + i.far,
.btn span:not(:empty) + i.fab {
    vertical-align: -3%;
    margin-left: 3px;
}

.dropdown-item > .fa-fw {
    margin-left: -0.4em;
    margin-right: 0.3em;
}

.dropdown-menu {
    z-index: 1040; /* above the .navbar.fixed-top, which has a z-index of 1030 */
}

.MVCGridContainer .table td.actions {
    padding: 0.55em 0.7em;
    text-align: right;
    vertical-align: middle;
}

.MVCGridContainer .table.table-sm td.actions {
    padding: 0 0.2em;
}


.autocomplete-suggestions {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    overflow: auto;
    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-no-suggestion {
    padding: 2px 5px;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}


body.popup-content {
    background-color: unset;
}
body.popup-content .body-content {
    margin: 0;
    padding: 0;
    max-width: 100%;
}


body.no-padding,
body.no-margin,
body.no-padding #main-container,
body.no-margin #main-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-height: 100% !important;
}

    body.no-padding #main-container,
    body.no-margin #main-container {
        min-height: 100% !important;
    }

body:not(.content-no-menu).no-padding.no-margin {
    margin-top: 54px !important;
}

    body:not(.content-no-menu).no-padding.no-margin #main-container {
        min-height: calc(100% - 54px) !important;
    }

.scroll-past-end {
    padding-bottom: calc(75vh - 200px) !important;
}



.login-area {
    padding: 2em 2em 1.75em 2em;
    border-radius: 10px;
    background-color: white;
}

form + .login-language-select {
    margin-top: -2.75em;
    float: right;
}

footer {
    padding-top: 10px;
}

h4.title {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #E5E5E5;
}

.alert.text-xxl {
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
}

div.alert > ol, ul, dl {
    margin-bottom: 0;
    padding-left: 20px;
}

.modal-md {
    max-width: 650px;
}

@media (min-width: 768px) {
    .modal-lg {
        max-width: 650px;
    }
}


@media (min-width: 992px) {
    .modal-lg {
        max-width: 900px;
    }
}

@media (min-width: 1080px) {
    .modal-lg {
        max-width: 980px;
    }
}

@media (min-width: 1300px) {
    .modal-lg {
        max-width: 1100px;
    }
}

@media (min-width: 1600px) {
    .modal-lg {
        max-width: 1400px;
    }
}

.bootbox-body {
    position: relative;
}

#rowAddButton {
    position: sticky;
    bottom: 3em;
    left: calc(50% - 6.5em - 0.5em - 2.5em);
    width: 2.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 0.5rem;
    z-index: 750;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));
}

#saveButton {
    position: sticky;
    bottom: 1.75em;
    left: calc(50% - 6.5em);
    width: 13em;
    margin-top: 2em;
    margin-bottom: 1em;
    /*float: left;*/
    /*margin-top: -1em;*/
    z-index: 750;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));
}

/* Save button appearance based on form change state */
form:not(.changed) #saveButton {
    background-color: transparent !important;
    color: #adb5bd;
    border-color: #adb5bd;
}

form:not(.changed) #saveButton:hover {
    background-color: #adb5bd !important;
    color: #fff;
}

form.changed #saveButton {
    background-color: #18BC9C !important;
    border-color: #18BC9C !important;
    color: #fff !important;
}

    #saveButton.has-errors {
        left: calc(50% - 8em);
        width: 16em;
    }

@media (max-width: 576px) {
    #saveButton {
        width: 3em;
        left: calc(50% - 1.5em);
    }

    #rowAddButton {
        left: calc(50% - 2.5em - 0.5em);
    }

        #rowAddButton + #saveButton {
            left: calc(50%);
        }
}


.row-number-bottom-right {
    position: absolute;
    top: 10px; /* Increased margin from the bottom */
    right: 50px; /* Increased margin from the right */
    font-size: 1.4em; /* Larger font size */
}

.custom-delete-row {
    position: absolute;
    top: 6px;
    right: 5px;
    z-index: 2;
    background-color: transparent; /* Transparent background */
    border: none; /* Remove border */
    color: rgba(255, 0, 0, 0.3) /* Subtle color for the icon */
}


.custom-card {
    position: relative;
    /* Other styles */
}


.modal-header-card-popup {
    display: flex;
    align-items: center; /* Ensures vertical alignment */
    justify-content: space-between; /* Spaces out the title and the close button */
    margin-right: 0;
    margin-top: 1rem;
    margin-left: 1rem;
    justify-content: center;
}

.close-card-popup {
    margin-top: 1rem;
    margin-right: 1rem;
}

.modal-title-card-popup {
    margin-bottom: 0; /* Removes any default margin */
}

label {
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
}

.input-group.date {
    max-width: 145px;
}

.help-active {
    text-decoration: underline;
    font-weight: bold;
}

.recovery-code {
    font-size: 1.5rem;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/** ag-grid **************************/

.ag-grid-rfid-code {
    font-family: 'PT Mono', monospace;
    /*text-transform: uppercase;*/
}

.rfid-field {
    font-family: 'PT Mono', monospace;
    /*text-transform: uppercase;*/
}

.inline-tooltip {
    cursor: pointer;
}

.rfid-tooltip {
    font-family: 'PT Mono', monospace;
    font-size: 12px;
    white-space: nowrap;
    /*text-transform: uppercase;*/
}

.rfid-tooltip-elem {
    cursor: pointer;
}

/** Validation Styles */
.form-control.input-validation-error {
    border-color: #E74C3C;
}

.field-validation-error {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #E74C3C;
}

.form-control.input-validation-error ~ .invalid-feedback {
    display: block;
}

.custom-control-input.input-validation-error ~ label {
    color: #E74C3C;
}

.custom-checkbox .custom-control-input.input-validation-error ~ .custom-control-label::before {
    border: 1px solid #E74C3C;
}


.bootbox-close-button {
    position: relative;
    z-index: 1;
    padding-left: 12px !important;
    /*padding-right: 2px !important;*/
    font-size: 1.875em;
}


.comment-close-btn {
    position: absolute;
    bottom: 10px; /* Adjust as needed */
    right: 10px; /* Adjust as needed */
    z-index: 1051; /* Ensure it's above the content */
}

.comment-input {
    width: 100%; /* Make textarea full width */
    box-sizing: border-box; /* Include padding and border in the element's width */
    margin-bottom: 10px; /* Space between textarea and buttons */
}

.tooltip-buttons {
    display: flex; /* Enable Flexbox */
    justify-content: flex-end; /* Align buttons to the right */
    padding-right: 5px; /* Add padding on the right for some spacing from the edge */
}

.comment-tooltip {
    position: absolute;
    width: 100vw;
    top: 100%; /* Position it below the icon */
    left: 50%; /* Center it */
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100; /* Ensure it's above other content */
}

.comment-tooltip {
    display: none;
}

#cardModal .modal-dialog {
    width: 100vw; /* Keep full viewport width */
    max-width: 100vw; /* Ensure it doesn't exceed the viewport width */

    position: fixed; /* Use fixed positioning */
    top: 50%; /* Position the top edge of the modal at the center of the viewport */
    transform: translateY(-50%); /* Shift the modal up by half its own height to center it */

    margin: 0; /* Keep existing margin settings */
    display: block; /* Use block display */
}

.bootbox-modal .modal-dialog {
    width: 100vw; /* Set width to the full viewport width */
    max-width: 100vw; /* Ensure it doesn't exceed the viewport width */

    margin: 0;
    display: flex;
    align-items: center; /* Vertically center the modal */
}



.bootbox-modal .modal-content {
    overflow-y: auto; /* Make content scrollable */
    max-height: calc(100vh - 1rem); /* Subtract a little to account for margin */
}

@media screen and (min-width: 600px) {
    .bootbox-modal.qr-bootbox .modal-dialog {
        width: 70vw; /* Set width to 70% of the viewport width */
        max-width: 70vw; /* Ensure it doesn't exceed 70% of the viewport width */
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center; /* Vertically center the modal */
    }
}


.total-data-rows-badge,
.total-data-rows {
    margin-top: 1px;
}

.currentTitle {
    vertical-align: middle;
    font-weight: bold;
    font-size: 12px;
    line-height: 13px;
}
.currentTitle::first-line {
    font-size: 19px;
    line-height: 23px;
}

.currentTitle.modest {
    font-weight: normal;
}
.currentTitle.modest::first-line {
    font-size: 17px;
}

.currentFilterTitle {
    font-size: 1.2em;
    vertical-align: middle;
}

    .currentFilterTitle:empty {
        margin: 0 !important;
    }


.mvc-filter {
    padding-top: 15px;
    padding-bottom: 15px;
}

    .mvc-filter .title {
        margin-top: -5px;
        margin-left: -5px;
        color: #DBDBDB;
        font-size: 39px;
        float: right;
    }

    .mvc-filter .form-group {
        display: inline-block;
        margin-right: 10px !important;
    }

    .mvc-filter .control-label {
        color: #222;
        font-weight: normal;
        font-size: 12px;
        padding-bottom: 4px;
        display: inline-block;
    }

    .mvc-filter .form-control {
        display: block;
        /*width: 100%;*/
    }

    .mvc-filter .btn {
        margin-top: 25px;
    }


.MVCGridContainer thead th {
    white-space: nowrap;
}

.MVCGridContainer td {
    vertical-align: top;
}

.table.border-top-none th {
    border-top: none;
}

.color-sort {
    color: #58a676;
}

.color-gray {
    color: #bdbdbd;
}

.daterange-icon {
    cursor: pointer;
}


.sub-title {
    padding-top: 0;
    margin-top: 0;
    font-size: 16px;
    border-bottom: solid 1px;
    border-bottom-color: var(--gray);
    color: var(--teal);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

    .sub-title:not(:first-of-type) {
        padding-top: 10px;
    }


/*** multiselect-native-select ******/

.mvc-filter .multiselect-native-select button {
    margin-top: 0;
    background-color: #fff;
    border: 1px solid #ced4da;
    color: #7b8a8b;
}

ul.multiselect-container li label.checkbox {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    padding-left: 30px !important;
}

    ul.multiselect-container li label.checkbox input {
        margin-right: 5px !important;
        margin-top: 4px;
    }

.custom-control-label {
    cursor: pointer;
    user-select: none;
}

.custom-date-filter {
    width: 110px;
    position: relative;
}
.custom-date-filter > .input-button {
    position: absolute;
    left: 90px;
    padding: 1px;
    opacity: 0.5;
    cursor: pointer;
}
.custom-date-filter > .input-button:hover {
    opacity: 1;
}
/* .custom-date-filter:after {
    content: '\f073';
    font-weight: 400;
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    top: 2px;
    left: 72px;
    pointer-events: none;
    opacity: 0.5;
} */

.ag-filter-body .custom-date-filter {
    margin: 4px 2px;
}
.ag-filter-body .custom-date-filter > .input-button {
    padding: 2px;
}


/* AG-Grid MultiSelectFilter */

.multi-filter .rows > button:not(.selected) .fa-check {
    opacity: 0;
}

.multi-filter .rows > button {
    max-width: 30em;
    display: flex !important;
    align-items: center !important;
    text-align: left;
}

.multi-filter .rows > button > .fa-check {
    width: 1.5em !important;
    min-width: 1.5em !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    text-align: center;
}

.multi-filter button.toggle-all {
    flex-grow: 0;
}

.multi-filter button {
    border-radius: 0;
}

/* Fix for input-group in multi-filter: prevent X button from wrapping below search */
.multi-filter .input-group {
    flex-wrap: nowrap;
}

.multi-filter .input-group .search {
    min-width: 8em !important; /* Override inline style, reduced from 16em to allow shrinking */
    flex: 1 1 auto;
}

.multi-filter .input-group .input-group-append {
    flex-shrink: 0;
}


table .col-1, table .col-md-1 {
    width: 8.3333333333%;
}

table .col-2, table .col-md-2 {
    width: 16.6666666667%;
}

table .col-3, table .col-md-3 {
    width: 25%;
}

table .col-4, table .col-md-4 {
    width: 33.3333333333%;
}

table .col-5, table .col-md-5 {
    width: 41.6666666667%;
}

table .col-6, table .col-md-6 {
    width: 50%;
}

table .col-7, table .col-md-7 {
    width: 58.3333333333%;
}

table .col-8, table .col-md-8 {
    width: 66.6666666667%;
}

table .col-9, table .col-md-9 {
    width: 75%;
}

table .col-10, table .col-md-10 {
    width: 83.3333333333%;
}

table .col-11, table .col-md-11 {
    width: 91.6666666667%;
}

table .col-12, table .col-md-12 {
    width: 100%;
}

.valign-middle {
    vertical-align: middle !important;
}


.custom-control-nolabel::before {
    left: -1.1rem !important;
}

.custom-control-nolabel::after {
    left: -1.1rem !important;
}


ul.sortable-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul.sortable-list li:nth-child(odd) {
        background: linear-gradient(to bottom, rgba(171, 171, 171, 0.10) 0%, rgba(171, 171, 171, 0.05) 100%);
        border-bottom: 1px solid #DDDDDD;
    }

    ul.sortable-list li {
        background-color: #fff;
        padding: 5px 0 5px 10px;
    }

.drag-handle {
    margin-right: 10px;
    font: bold 20px Sans-Serif;
    color: #5F9EDF;
    display: inline-block;
    cursor: grabbing;
}

.col-dragable {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 42px;
    min-height: 28px;
    line-height: 20px;
}

.col-dragable-text {
    line-height: 28px;
    height: 28px;
    font-weight: bold;
}

.checkbox-dragable {
    margin: 5px 0;
    display: inline-block;
}

    .checkbox-dragable label {
        line-height: 1.3rem;
    }

/* Typeahead */

span.twitter-typeahead .tt-menu {
    cursor: pointer;
}

span.twitter-typeahead .tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 1rem;
    color: #373a3c;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

span.twitter-typeahead .tt-suggestion {
    display: block;
    width: 100%;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.5;
    color: #373a3c;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
}

    span.twitter-typeahead .tt-suggestion:focus, span.twitter-typeahead .tt-suggestion:hover {
        color: #2b2d2f;
        text-decoration: none;
        background-color: #f5f5f5;
    }

    span.twitter-typeahead .active.tt-suggestion, span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .active.tt-suggestion:focus, span.twitter-typeahead .tt-suggestion.tt-cursor:focus, span.twitter-typeahead .active.tt-suggestion:hover, span.twitter-typeahead .tt-suggestion.tt-cursor:hover {
        color: #fff;
        text-decoration: none;
        background-color: #0275d8;
        outline: 0;
    }

span.twitter-typeahead .disabled.tt-suggestion, span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover {
    color: #818a91;
}

    span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover {
        text-decoration: none;
        cursor: not-allowed;
        background-color: transparent;
        background-image: none;
        filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
    }

span.twitter-typeahead {
    width: 100%;
}

.input-group span.twitter-typeahead {
    display: block !important;
}

    .input-group span.twitter-typeahead .tt-menu {
        top: 2.375rem !important;
    }

.btn:disabled {
    color: #fff !important;
    background-color: #c8c8c8 !important;
    border-color: #c8c8c8 !important;
}

.editEventForm-move-handle, .filterManagerForm-move-handle, .colVisibilityForm-move-handle, .pdfExportForm-move-handle {
    cursor: move;
}


.info-bubble {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZFJREFUOI19Ur1qVEEYPd+ZuXfzAIYl6TRoJ67CmsoipMg7WNn4DGHBIMHFnzyDksZSe22SUjFhIQQbMeliMGIru96557Mwq7t3hz3lfOfvmxlDBr2BFkPSOoirAEDDaWXce3aHP5pcmxJ+UDsWaUfAfYJxciYo0e01i7C53eHFjMGjweiWyd4DbOda/XfSuZtv9Lut438Gl8lHTbGgIQAQXGiasIyd7Q4vCACxSDs5cbS4ElO8Lun3lAG5pKp+AQDWG2iRSt8yOw+heAMBRJ2+kCybdyLG5RiS1o3T4nFtIX1FDTTFl/No0locP1UObrgX/t7Tx9zcgGszyZN42i0/AcDWYcoHOJw0nM4zmQ8/YWXcE5SPmAepSgr7BgBbB9UuzB40Od8RyqUFmIb1aNbAXz65WzwkALAIm5DOm5w26jf6Vb+dba4zMvaAya98MLrpbu9ILs+t7jpz+UZ/tfUZADg+73dbx7GMt919F1KV29nhr2hFZyyeajCJx4d+xVGvObDiDgf8JCnsP1/lzyb3DznrrJ9XLLujAAAAAElFTkSuQmCC') top left;
    width: 16px;
    height: 16px;
    float: right;
    margin-left: 5px;
    display: block;
    cursor: pointer;
}

.info-bubble-inline {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZFJREFUOI19Ur1qVEEYPd+ZuXfzAIYl6TRoJ67CmsoipMg7WNn4DGHBIMHFnzyDksZSe22SUjFhIQQbMeliMGIru96557Mwq7t3hz3lfOfvmxlDBr2BFkPSOoirAEDDaWXce3aHP5pcmxJ+UDsWaUfAfYJxciYo0e01i7C53eHFjMGjweiWyd4DbOda/XfSuZtv9Lut438Gl8lHTbGgIQAQXGiasIyd7Q4vCACxSDs5cbS4ElO8Lun3lAG5pKp+AQDWG2iRSt8yOw+heAMBRJ2+kCybdyLG5RiS1o3T4nFtIX1FDTTFl/No0locP1UObrgX/t7Tx9zcgGszyZN42i0/AcDWYcoHOJw0nM4zmQ8/YWXcE5SPmAepSgr7BgBbB9UuzB40Od8RyqUFmIb1aNbAXz65WzwkALAIm5DOm5w26jf6Vb+dba4zMvaAya98MLrpbu9ILs+t7jpz+UZ/tfUZADg+73dbx7GMt919F1KV29nhr2hFZyyeajCJx4d+xVGvObDiDgf8JCnsP1/lzyb3DznrrJ9XLLujAAAAAElFTkSuQmCC') top left;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    cursor: pointer;
}

.w-1 {
    width: 1%;
}

.w-50 {
    width: 50%;
}

.input-view {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 7px 10px;
    border: 1px solid #ced4da;
    background-color: #F7F7F7;
    border-radius: 5px;
}


.popover .btn-group-vertical.rows .btn {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    transition: none !important;
}

    .popover .btn-group-vertical.rows .btn:not(.selected):hover {
        background-color: hsl(205, 100%, 97%) !important;
    }

    .popover .btn-group-vertical.rows .btn.selected {
        background-color: hsl(205, 100%, 90%) !important;
    }

.popmenu {
    position: absolute;
    max-height: 60vh;
    overflow: scroll;
    z-index: 2000;
    border-radius: 5px;
    background-color: white;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    user-select: none;
    -webkit-user-select: none;
}

    .popmenu > .btn-group-vertical > .btn {
        padding-top: 4px;
        padding-bottom: 4px;
        transition: none !important;
    }

        .popmenu > .btn-group-vertical > .btn:first-child,
        .popmenu > .btn-group-vertical > .btn:last-child {
            padding-top: 0.3em;
            padding-bottom: 0.3em;
        }

        .popmenu > .btn-group-vertical > .btn:not(.selected):hover {
            background-color: hsl(205, 100%, 97%) !important;
        }

        .popmenu > .btn-group-vertical > .btn.selected {
            background-color: hsl(205, 100%, 90%) !important;
        }

#popbox {
    position: absolute;
    z-index: 2000;
    border-radius: 5px;
    background-color: white;
}


.attached-clear-button {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

    .attached-clear-button::after {
        content: '×';
        position: absolute;
        right: -8px;
        top: -10px;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        text-align: center;
        line-height: 15px;
        font-size: 12px;
        color: white;
        background-color: #C44;
    }

    .attached-clear-button:hover::after {
        background-color: #F00;
    }


/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.table-fixed tbody {
    height: 300px;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

    .table-fixed tbody td,
    .table-fixed tbody th,
    .table-fixed thead > tr > th {
        float: left;
        position: relative;
    }

        .table-fixed thead > tr > th::after {
            content: '';
            clear: both;
            display: block;
        }


.sticky-header-table-container {
    overflow-y: scroll;
    min-height: 80px;
    max-height: 2400px;
    height: calc(100vh - 500px); /* you can change this in your element */
}

    .sticky-header-table-container table {
        margin-bottom: 0;
    }

    .sticky-header-table-container thead tr:nth-child(1) th {
        border-top: 0;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .sticky-header-table-container tfoot tr:nth-child(1) td {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

.table .tfoot-light td {
    color: #7b8a8b;
    background-color: #ecf0f1;
    border-color: #dee2e6;
}

.table .tfoot-dark td {
    color: #2B3E50;
    background-color: #abb6c2;
    border-color: #4E5D6C;
}


/*
* ==========================================
* bootstrap-select
* ==========================================
*/

.bootstrap-select button {
    background-color: #fff !important;
    padding: 6px 12px 7px 16px;
    border-color: rgb(206, 212, 218);
}


.vertical-center {
    min-height: 100%; /* Fallback for vh unit */
    min-height: 100vh;
    /* You might also want to use
                           'height' property instead.
                           
                           Note that for percentage values of
                           'height' or 'min-height' properties,
                           the 'height' of the parent element
                           should be specified explicitly.
     
                           In this case the parent of '.vertical-center'
                           is the <body> element */
    /* Make it a flex container */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Align the bootstrap's container vertically */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
    width: 100%;
    /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.
  
     Therefore, we should use the following declarations to get it centered again */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 5004; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

    .overlay * {
        color: #fff;
    }

.overlay2 {
    z-index: 9000; /* Sit on top */
}

.overlay-content {
    min-width: 500px;
    font-size: 32px;
    text-align: center;
}

.add-scroll-bar {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10px;
}

.popup-scrollable-container {
    overflow: scroll;
    max-height: calc(100vh - 16em);
}

pre::-webkit-scrollbar, .add-scroll-bar::-webkit-scrollbar {
    width: 40px; /* for vertical scrollbars */
    height: 40px; /* for horizontal scrollbars */
}

pre::-webkit-scrollbar-track, .add-scroll-bar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

pre::-webkit-scrollbar-thumb, .add-scroll-bar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
}

i.rfid-reading {
    background: url('../images/Ripple-1.5s-200px-white.svg');
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    text-rendering: auto;
    line-height: 1;
    margin-top: 4px;
}

i.spinner {
    background-position: 0 8px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 40px;
    height: 44px;
    margin-right: 4px;
    text-rendering: auto;
    line-height: 1;
}

i.spinner-medium {
    background-position: 0 1px;
    background-size: 25px 24px;
    width: 28px;
    height: 22px;
}

i.spinner-small {
    background-position: 0 1px;
    background-size: 18px 19px;
    width: 17px;
    height: 17px;
    margin-left: 3px;
}

i.spinner-white {
    background-image: url('../images/Rolling-1s-200px_white.svg');
}

i.spinner-black {
    background-image: url('../images/Rolling-1s-200px.svg');
}

.alarm-container {
    background-color: #FFADB5;
    color: maroon;
    padding: 10px;
}

    .alarm-container .table-striped tbody tr:nth-of-type(2n+1) {
        background-color: #FF96A0;
    }

.dropdown-item.active, .dropdown-item:active {
    background-color: #b6d6f5;
}

.mass-edit-field-container > .form-control,
.mass-edit-field-container > .input-group > .form-control {
    height: 2.5em;
}


/* Sheet Adjustments */

body > .navbar + .container table.sheet > thead > tr > th {
    top: 54px;
}


/* Input Clear Button */

input.form-control + button.input-clear {
    position: absolute;
    z-index: 100;
    top: calc(50% - 1.15em);
    right: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: none;
    background-color: transparent;
}
input.form-control:placeholder-shown + button.input-clear {
    display: none;
}


/* Draggable */

.t-with-draggable {
    position: relative;
}

.t-draggable {
    cursor: grabbing;
}

.flying {
    position: absolute;
    width: 100%;
    z-index: 1000;
    opacity: 98%;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.2);
    cursor: grabbing;
}


/* Editable */

.t-editable:hover {
    outline: solid 2px hsl(205, 100%, 94%);
    outline-offset: -3px;
}

.t-editable.select {
    position: relative;
    cursor: pointer;
}

    .t-editable.select > input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 10px;
        border: none;
        z-index: 503;
    }

    .t-editable.select > .popup {
        position: absolute;
        top: 100%;
        left: -1px;
        min-width: 5em;
        max-width: 25em;
        min-height: 1.5em;
        z-index: 501;
        background-color: white;
        border: solid 1px hsl(205, 20%, 50%);
    }

        .t-editable.select > .popup.scrollable {
            max-height: 20.25em;
            overflow: scroll;
        }

        .t-editable.select > .popup > .option {
            width: 100%;
            padding: 3px 12px 3px 4px;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .t-editable.select > .popup > .option:hover {
                background-color: hsl(205, 100%, 92%);
            }

            .t-editable.select > .popup > .option.selected {
                background-color: hsl(205, 100%, 82%);
            }


/* Patternator */

.patternator {
    width: 100%;
    font-size: 0.95em;
}

    .patternator > tbody > tr > td.t-draggable > i {
        pointer-events: none;
    }

    .patternator > tbody > tr > td {
        padding: 5px 10px;
        user-select: none;
        font-size: 0.95em;
    }

        .patternator > tbody > tr > td:nth-child(1) {
            width: 3em;
            padding: 5px 12px;
        }

        .patternator > tbody > tr > td:nth-child(3) {
            width: 2em;
        }

    .patternator tr:nth-child(even) {
        background-color: white;
    }

    .patternator tr:nth-child(odd) {
        background-color: #FAF9F9;
    }

    .patternator tr.dragged {
        background-color: #EAE9E9;
        color: #CAC9C9;
    }


body.tall-header {
    --navbar-height: 95px;
}

.enlarge-content * {
    font-size: 1.3rem;
}

.enlarge-content .custom-checkbox {
    line-height: 1.2rem;
}

#search-results * {
    font-size: 1.15rem;
}

tr.row-locked:nth-child(odd) {
    background-color: #FFD8DE !important;
}

tr.row-locked:nth-child(even) {
    background-color: #FFE8EB !important;
}

.row-locked-icon {
    color: red;
    display: none;
}

.row-locked .row-locked-icon {
    display: inline-block;
}

.row-locked .rowCheckBox .custom-checkbox {
    display: none;
}

#__rinInViewInspectorRootGenerated__ {
    display: none;
}


/* HTML: <div class="loader"></div> */
.custom-loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #25b09b;
    animation: l15 1s infinite linear;
}

    .custom-loader::before,
    .custom-loader::after {
        content: "";
        grid-area: 1/1;
        margin: 2px;
        border: inherit;
        border-radius: 50%;
        animation: l15 2s infinite;
    }

    .custom-loader::after {
        margin: 8px;
        animation-duration: 3s;
    }

@keyframes l15 {
    100% {
        transform: rotate(1turn)
    }
}

.bootbox-modal.camera-bootbox .modal-dialog {
    width: 100%;
    height: 100%;
}

.bootbox-modal.camera-bootbox {
    display: flex !important;
    align-items: center; /* Vertically center the modal */
    justify-content: center;
    margin: 0 !important;
}

@media screen and (min-width: 1000px) {
    .bootbox-modal.camera-bootbox .modal-dialog {
        width: 90%;
        height: 90%;
    }
}

@media screen and (min-width: 1200px) {
    .bootbox-modal.camera-bootbox .modal-dialog {
        width: 80%;
        height: 80%;
    }
}

@media screen and (min-width: 1400px) {
    .bootbox-modal.camera-bootbox .modal-dialog {
        width: 70%;
        height: 70%;
    }
}

.bootbox-modal.camera-bootbox .modal-content {
    height: 100%;
    max-height: unset;
}

.bootbox-modal.camera-bootbox .modal-body {
    height: calc(100% - 10rem);
    max-height: unset;
}

.bootbox-modal.camera-bootbox .bootbox-body {
    height: 100%
}


.popover-success {
    background-color: #18BC9C !important;
    border-color: #107c67 !important;
}

.popover-warning {
    background-color: #FFC107 !important;
    border-color: #c29203 !important;
}

.popover-danger {
    background-color: #E74C3C !important;
    border-color: #8a2d23 !important;
}


.input-with-icon-thumbnail {
    display: flex;
    align-items: center;
    position: relative;
}


    .input-with-icon-thumbnail input {
        flex-grow: 1;
        /* Ensure there's enough padding on the right so text doesn't overlay the icon */
        padding-right: 40px; /* Adjust based on the size of your icon */
    }

    .input-with-icon-thumbnail .camera-icon {
        position: absolute;
        right: 10px; /* Adjust according to the padding of the input */
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }


/* Hightlighting freshly filled inputs for a bit */

@keyframes success-to-transparent {
    0% {
        background-color: var(--success);
    }

    100% {
        background-color: transparent;
    }
}

@keyframes light-success-to-transparent {
    0% {
        background-color: #18BC9C3F;
    }

    100% {
        background-color: transparent;
    }
}

input.link-autocomplete.changed {
    animation: success-to-transparent 1.3s ease-in forwards;
}

input:not(.link-autocomplete).changed {
    animation: light-success-to-transparent 1.3s ease-in forwards;
}


.link-edit, .link-add {
    padding-left: 10px;
    padding-right: 10px;
}


/* AG-Grid Live View row freshness  */

.ag-cell.fresh-within-day {
    background-color: #40B07009;
    transition: background-color 100ms ease-in-out;
}

.ag-cell.fresh-within-hour {
    background-color: #40B0701D;
}

.ag-cell.fresh-within-minute {
    background-color: #40B07040;
}

.ag-cell.fresh-within-seconds {
    background-color: #40B07080;
}

/* Rfid tags table */

.rfid-tags-table {
    font-family: Arial, sans-serif; /* Improve font styling */
    margin-top: 20px; /* To replace the mt-3 class */
}

#rfidTagsTable {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 3px #ccc; /* Adds a subtle shadow for depth */
    text-align: left; /* Aligns text to the left for a cleaner look */
}

    #rfidTagsTable thead tr {
        background-color: #f2f2f2; /* A subtle color for the header */
        color: #333; /* Dark color for contrast */
    }

    #rfidTagsTable tbody tr:hover {
        background-color: #f5f5f5; /* Highlight rows on hover for interactivity */
    }

    #rfidTagsTable th, #rfidTagsTable td {
        padding: 10px; /* Adds space around content within cells */
        border-bottom: 1px solid #ddd; /* Adds a separator for clarity */
    }

    #rfidTagsTable tbody tr:last-child {
        background-color: #b8e0f9; /* Highlight color for the last row */
    }

.power-button {
    margin-right: 0.5rem;
}

@media (max-width: 1199.98px) {
    .power-button {
        margin-left: auto;
    }
}

@media (min-width: 768px) {
    .custom-ml-auto {
        margin-left: auto;
    }

    .custom-d-flex {
        display: flex;
    }

    .custom-order-md-1 {
        order: 1;
    }

    .custom-align-items-centers {
        align-items: center;
    }
}

.badge.ag-grid-selected-row-count {
    padding: 0.25em 0.5em;
}


.highlit {
    font-weight: bold !important;
    color: deeppink !important;
}



/* Sidebar */






/* Edit page header */

.form-header {
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    height: 73px;
    background: var(--sheet-bg);
    transition: box-shadow 166.6ms;
}
body:not(.has-sidebar) .form-header {
    top: calc(var(--navbar-height) - 1px);
}
.form-header .h4 {
    padding: 4px 0;
}
.form-header .h5 {
    padding: 7px 0;
}
.form-header .h5 .mobile {
    font-size: 1.125rem;
}
body:not(.has-sidebar):not(.body-mvcgrid) .form-header + .container {
    margin-top: 43px;
}
.form-header + .container {
    margin-top: 73px;
}
.form-header > :first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 18px;
}
body:not(.has-sidebar) .form-header > :first-child {
    padding-top: 21px;
}

.form-header > :first-child > .h4,
.form-header > :first-child > .h5 {
    margin-bottom: 1px;
}

.form-header .sidebar-open-button {
    margin-right: 6px;
}
.form-header .btn {
    min-width: 2.5em;
    text-wrap: nowrap;
}

.form-header .close-btn {
    margin-right: -20px;
    font-size: 22px;
    color: gray;
}

body.scrolled-away-top .form-header {
    box-shadow: 0 7px 7px -2px rgba(0,0,0, 9%);
}
.modal.scrolled-away-top .form-header {
    border-bottom: 1px solid rgba(0,0,0, 15%);
}

@media (max-width: 575.98px)
{
    .form-header > :first-child {
        gap: 5px;
    }
    .form-header ~ #main-container #saveButton {
        display: none;
    }
}

@media (max-width: 419.98px) {
    .modal-body {
        padding-left: 5px;
        padding-right: 5px;
    }
}

body:not(.has-sidebar) .form-header ~ table.sheet > thead > tr > th {
    top: calc(var(--navbar-height) + 73px) !important;
}
body.has-sidebar .form-header ~ table.sheet > thead > tr > th {
    top: 73px !important;
}

.modal-body .form-header {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 0.3rem;
    box-shadow: none !important;
}
.modal-body .form-header + .container {
    margin-top: 0.5em;
}
.form-header > :first-child {
    padding-left: 15px;
    padding-right: 15px;
}
.modal-body form .form-header > :first-child {
    padding: 13px 15px;
}
.modal-body .form-header > hr {
    margin-top: -3px !important;
    margin-bottom: 0 !important;
}

.edit-modal .modal-body {
    padding: 0 4px 20px 4px;
}


.disabled-field {
    pointer-events: none;
    opacity: 0.6;
}

#liveToast {
    box-shadow: 3px 2px 15px rgba(0,0,0, 0.2);
    border-radius: 0.6em;
}

#liveToastBody {
    padding: 0.75em 1.6em 0.75em 1.5em;
    line-height: 1.666rem;
}

    #liveToastBody a {
        font-style: italic;
        text-decoration-line: whitesmoke;
        color: whitesmoke;
    }

.self-service-name {
    text-transform: uppercase;
    color: white;
    font-size: 10em;
    text-align: center;
    font-weight: bold;
    padding-top: 0.5em;
}

.self-service-slogan {
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    font-size: 6em;
    text-align: center;
}

.self-service-logo {
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    text-align: left;
    padding: 0;
    font-size: 1.5em;
    line-height: 1.1em;
}

.self-service-pcsc-card-action {
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(99, 193, 57);
    font-size: 3em;
    text-align: center;
}

.self-service-pcsc-card-action-error {
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(255, 77, 53);
    font-size: 3em;
    text-align: center;
}

.btn-xxl2 {
    font-size: 1.8em;
}

.btn-warning-dark {
    color: #fff;
    background-color: #FF8400;
    border-color: #F39C12;
}

.btn-rounded {
    border-radius: 0.8em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.inventory-pack-options {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

    .inventory-pack-options .option {
        padding: 10px;
        text-align: center;
        background-color: #f1f1f1;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 4px;
        transition: background-color 0.3s;
        margin-bottom: 10px;
    }

        .inventory-pack-options .option:hover {
            background-color: #e0e0e0;
        }

        .inventory-pack-options .option.selected {
            background-color: #007bff;
            color: #fff;
        }


/*
 * We would just use 'd-none' instead of these, but there are
 * cases (ex. `d-none d-lg-inline-block`) where just toggling
 * 'd-none' on an element doesn't work the way we want it to.
 */
.hidden, .hidden2 {
    display: none !important;
}


:not(:hover) > .show-on-parent-hover,
:hover > .hide-on-parent-hover {
    display: none;
}




/*#region MVCGrid mobile view (rows as cards) */

@media (max-width: 767.98px)
{
    .mvc-filter .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .mvc-filter .form-group {
        margin-bottom: 12px;
        margin-right: 20px !important;
    }
    .mvc-filter .btn {
        margin-top: 14px;
    }
    .mvc-filter .form-control {
        font-size: 16px;
    }

    .MVCGridContainer .row > .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .MVCGridContainer table > thead,
    .MVCGridContainer table > tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
    }
    .MVCGridContainer table > thead > tr,
    .MVCGridContainer table > tbody > tr {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        padding: 0.5em 0.75em 0.75em;
        border-radius: 9px;
        border: 1px solid #00000020 !important;
        box-shadow: 0 2px 6px rgba(0,0,0, 5%);
        background-color: var(--sheet-bg);
    }
    .MVCGridContainer table > thead > tr > th,
    .MVCGridContainer table > tbody > tr > td {
        flex: none;
        width: 100%;
        max-width: 100%;
        padding: 8px 10px !important;
        text-align: left !important;
        background: none !important;
        border: none;
    }
    .MVCGridContainer table > tbody > tr > td.actions {
        padding-left: 7px !important;
    }
    .MVCGridContainer table > thead > tr > th:empty,
    .MVCGridContainer table > tbody > tr > td:empty {
        display: none;
    }
}

/*#endregion*/


/* AG-Grid - Bigger selection checkbox clickable area */

.ag-selection-checkbox .ag-input-field-input.ag-checkbox-input {
    position: absolute;
    left: calc(var(--ag-internal-calculated-line-height) * -0.3);
    top: calc(var(--ag-internal-calculated-line-height) * -0.3);
    width: var(--ag-internal-calculated-line-height);
    height: var(--ag-internal-calculated-line-height);
}


/* AG-Grid - Row actions cell */

.ag-row {
    z-index: 0;
}
.ag-row-focus {
    z-index: 1;
}
.ag-cell {
    z-index: 0;    
}
.ag-cell > span {
    pointer-events: none;
}
.ag-cell > span > a {
    pointer-events: all;
}

.ag-pinned-left-cols-container {
    z-index: 2;
}

    .ag-pinned-left-cols-container .ag-row-focus .ag-cell-value {
        overflow: visible;
    }

.actions-cell-container {
    display: flex;
    align-items: center;
}

.ag-grid-btn.btn {
    display: flex;
    align-items: center;
    height: var(--ag-internal-calculated-line-height);
    padding-left: 4px;
    padding-right: 4px;
    padding-top: unset;
    padding-bottom: unset;
    color: var(--success);
    opacity: 0.875;
}

    .ag-grid-btn.btn:hover {
        opacity: 1;
    }

a.ag-grid-btn.btn > i {
    margin-bottom: 0.1em;
}

.ag-grid-btn-dropdown > .ag-grid-btn.btn {
    height: calc(var(--ag-internal-calculated-line-height) - 10px);
    vertical-align: baseline;
}

.ag-cell-value .dropdown-item {
    line-height: 1.5rem;
}

/* AG-Grid validation failed cells - red border for "don't allow save if" violations */
.ag-cell.validation-failed {
    box-shadow: inset 0 0 0 2px rgba(220, 53, 69, 0.8);
    animation: validation-pulse-red 0.4s ease-in-out;
}

@keyframes validation-pulse-red {
    0% { box-shadow: inset 0 0 0 2px rgba(220, 53, 69, 0.8); }
    50% { box-shadow: inset 0 0 0 3px rgba(220, 53, 69, 1); }
    100% { box-shadow: inset 0 0 0 2px rgba(220, 53, 69, 0.8); }
}

/* AG-Grid non-editable cell styling */
.ag-cell.readonly-cell,
.ag-cell.calculated-cell,
.local-ag-grid .ag-cell.readonly-cell,
.local-ag-grid .ag-cell.calculated-cell {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #555;
}

.ag-cell.calculated-cell,
.local-ag-grid .ag-cell.calculated-cell {
    font-style: italic;
}

/* AG-Grid editable cell styling - subtle indicator */
.ag-cell.editable-cell,
.local-ag-grid .ag-cell.editable-cell {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

.ag-cell.editable-cell:hover,
.local-ag-grid .ag-cell.editable-cell:hover {
    background-color: rgba(0, 123, 255, 0.06) !important;
}

.bg-custom {
    background-color: var(--toastBackgroundColor);
}

.toast-content {
    text-align: center;
}

.toast-message {
    font-style: italic;
    color: #333;
}

.asset-link {
    color: blue;
    text-decoration: underline;
}

.asset-link:hover {
    color: darkblue;
}



.metadata-container {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    opacity: 0.666;
}

.colored-ag-cell-content-container {
    padding: 2px 6px;
    border-radius: 8px;
    color: white;
    pointer-events: none;
}
.colored-ag-cell-content-container:empty {
    padding-right: 17px;
    border-radius: 99px;
}

.ag-cell-entity-link {
    cursor: pointer;
    text-decoration: none;
}
.ag-cell-entity-link:hover {
    text-decoration: underline !important;
}
.colored-ag-cell-content-container > .ag-cell-entity-link {
    color: white;
}

.ag-cell-identity-link {
    cursor: pointer;
}
.ag-cell-identity-link:hover {
    text-decoration: underline !important;
}


.link-option-inner {
    color: white;
    border-radius: 6px;
    padding: 2px 6px;
}

#_popout > .ag-dialog {
     position: relative; 
}

.btn.data-refresh {
    padding-left: 0.725em;
    padding-right: 0.725em;
}
/*.ag-theme-quartz .ag-side-buttons {
    width: calc(var(--ag-icon-size) + var(--ag-grid-size) * 2.5);
}*/

body.has-sidebar .mvc-title {
    margin-top: 24px;
}

#topAnnouncementToast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    display: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#topAnnouncementToast.show {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#topAnnouncementText {
    flex-grow: 1;
    text-align: center;
    margin-right: 20px;
}

#topAnnouncementToast .btn-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
    cursor: pointer;
}

#topAnnouncementToast .btn-close:hover {
    opacity: 1;
}



.form-header.with-announcement {
    top: var(--announcement-height, 0);
}

.initials-badge-wrapper {
    text-decoration: none !important;
}
.initials-badge {
    color: white;
    border-radius: 99px;
    min-width: 3ch;
    font-size: 11px;
    font-stretch: condensed;
    text-align: center;
    vertical-align: center;
    user-select: none;
}

.nav-link {
    padding-left: 1em;
    padding-right: 1em;
    user-select: none;
    -webkit-user-select: none;
}

.meta-item-checkbox:checked,
.text-field-checkbox:checked {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #28a745 !important;
}



@media (max-width: 575.98px)  /* Mobile */
{
    .desktop {
        display: none !important;
    }

    body.login > .body-content {
        padding-left: 25px;
        padding-right: 25px;
    }

    body.has-sidebar.sidebar-closed-mobile .sidebar-open-button + .currentTitle,
    .btn:not(.sidebar-open-button):not(.hidden) + .currentTitle,
    .dropdown:not(.hidden) ~ .currentTitle {
        margin-left: 5px;
    }

    .dropdown-menu {
        font-size: 16px;
    }
    .dropdown-item {
        padding: 5px 24px;
    }
    
    .edit-modal .modal-dialog {
        margin: 1px;
    }
    .edit-modal .modal-body {
        padding: 0 0 20px 0;
    }

    .form-header + .container {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* No horizontal padding in modern form edit popups */

    .edit-modal .modal-body .tab-pane > .row > .col-12 {
        padding: 0 6px 0 7px;
    }
    .edit-modal .modal-body .slick-horizontal {
        padding: 0 7px 0 8px;
    }
    .edit-modal .modal-body .tab-pane .slick-horizontal,
    .edit-modal .modal-body .container-fluid {
        padding: 0;
    }
}

@media (min-width: 576px)  /* Desktop */
{
    .mobile {
        display: none !important;
    }

    body.has-sidebar.sidebar-closed-desktop .sidebar-open-button + .row-adding-control,
    body.has-sidebar.sidebar-closed-desktop .sidebar-open-button + .d-inline-flex,
    body.has-sidebar.sidebar-closed-desktop .sidebar-open-button ~ .currentTitle,
    .btn:not(.sidebar-open-button):not(.hidden) ~ .currentTitle,
    .dropdown:not(.hidden) ~ .currentTitle {
        margin-left: 7px;
    }

    form .form-header > :first-child {
        padding-left: 30px;
        padding-right: 30px;
    }
}


img[src="null"] {
    display: none;
}

.microphone-icon {
    font-size: 23px;
    margin-left: -20px !important;
    margin-right: 8px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    z-index: 3;
    transition: color 0.3s ease;
}

.microphone-icon.recording {
    color: red;
}

.microphone-icon:hover::after {
    content: attr(title);
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 4;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.ai-icon {
    font-size: 23px;
    margin-left: 8px !important;
    margin-right: 8px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    z-index: 3;
    transition: color 0.3s ease;
}

    .ai-icon:hover:not([data-toggle="tooltip"])::after {
        content: attr(title);
        position: absolute;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 5px;
        border-radius: 5px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 4;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

.recording-indicator {
    position: fixed;
    background-color: #4A4A4A;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 9999;
    font-family: Arial, sans-serif;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 20px; /* Always position from the top */
    right: 20px; /* Always position from the right */
}

    .recording-indicator .dot {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        margin-right: 10px;
        flex-shrink: 0;
    }

/* Adjust font size for smaller screens */
@media screen and (max-width: 768px) {
    .recording-indicator {
        font-size: 12px;
        padding: 8px 16px;
    }

        .recording-indicator .dot {
            width: 16px;
            height: 16px;
        }
}

.report-name {
    color: #3498DB !important;
}

.icon-item {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-item:hover {
        background-color: #f8f9fa;
    }

#iconPreview {
    width: 40px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-right: none;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

/**** Virtual Keyboard **************/

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 1.7em !important;
}

.ui-keyboard-preview-wrapper textarea {
    min-height: 150px !important;
    font-size: 1.2em !important;
}

.ui-keyboard {
    border-radius: 0;
    left: 0;
    top: auto !important;
    bottom: 0;
    position: fixed;
    width: 100%;
    height: auto;
}

.form-announcement {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: lightyellow;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: bold;
}

/* This will only apply when form-announcement exists */
.form-announcement ~ .modal .modal-dialog {
    margin-top: 55px !important;
}

.geolocation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.get-location-btn {
    min-width: 200px;
    transition: all 0.3s ease;
}

.get-location-btn i {
    margin-right: 0.5rem;
}

.get-location-btn:disabled {
    cursor: wait;
}

.dropdown-menu.changeFilter {
    z-index: 1050 !important;
}

.dropdown-menu-right {
    z-index: 5555 !important;
}

.changeFilter > .dropdown-item,
#viewDropdownItems > .dropdown-item {
    position: relative;
    padding-right: 3em;
}
.changeFilter > .dropdown-item > .btn,
#viewDropdownItems > .dropdown-item > .btn {
    position: absolute;
    top: 1px;
    right: 12px;
    color: inherit;
}

.dropdown-item > .fa-fw,
.dropdown-item > span {
    pointer-events: none;
    user-select: none;
}

#toastContainer {
    position: fixed;
    bottom: 1rem; /* Consistent spacing from bottom */
    right: 2rem;  /* Consistent spacing from right */
    z-index: 1337;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
    font-size: .2rem !important;
}

#toastContainer .toast {
    pointer-events: auto;
    width: fit-content; 
    max-width: 500px;
    opacity: 1;
    box-shadow: 3px 2px 15px rgba(0,0,0, 0.2);
    border-radius: 0.6em;  /* Added for rounded corners */
}

#toastContainer .toast-body {
    padding: 0.5em .8em 0.5em .8em;
    line-height: 1.666rem;
}

#toastContainer .toast.bg-info,
#toastContainer .toast.bg-success,
#toastContainer .toast.bg-warning,
#toastContainer .toast.bg-danger {
    color: white;
}

#toastContainer .toast .toast-header {
    background-color: rgba(255, 255, 255, 0.85);
    color: #212529;
    border-top-left-radius: 0.6em;    /* Match the main border radius */
    border-top-right-radius: 0.6em;   /* Match the main border radius */
    display: none;  /* Hide the header by default */
}

/* Only show header if title or closable */
#toastContainer .toast .toast-header:not(.d-none) {
    display: flex;
}

#toastContainer .toast-body a {
    font-style: italic;
    text-decoration-line: whitesmoke;
    color: whitesmoke;
}

#toastContainer .toast:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Mobile styles for toast */
@media (max-width: 575.98px) {
    #toastContainer .toast {
        /* min-width: 67px; Removed to allow fit-content to shrink fully */
        max-width: 167px;  /* About 2/3 of previous 250px */
        font-size: 0.8rem;  /* Slightly smaller font size */
    }
    
    #toastContainer .toast-body {
        padding: 0.4em 0.8em;  /* Reduced padding */
        font-size: 1.2rem !important; /* Added to make text smaller on mobile */
    }
    
    /* Half size corner toasts on mobile - Removing this rule as it is likely misapplied or causing unpredictable scaling */
    /*
    #toastContainer .corner-toast {
        max-width: 250px; 
        transform: scale(0.5);
        transform-origin: bottom right;
    }
    */
}

.import-id-column-radio-input {
    margin-right: 3px;
    vertical-align: 5%;
}

/* Styles for locked date inputs when using continuous reports */
input.date-locked {
    background-color: #f8f9fa;
    cursor: not-allowed;
    border-color: #ced4da;
    color: #6c757d;
}

input.date-locked:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.period-number-container {
    margin-top: 10px;
    padding: 5px;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.period-number-container label {
    font-weight: 500;
    margin-right: 8px;
}

.period-number-container input {
    width: 60px;
    text-align: center;
}

/* Tooltip for locked date inputs */
.date-locked-tooltip {
    position: relative;
}

.date-locked-tooltip::after {
    content: "Date range is determined by the selected option";
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    width: 220px;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.date-locked-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.period-number-container {
    display: none;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.period-number-container label {
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 0;
}

.period-number-container input {
    width: 60px;
    text-align: center;
}

/* Style for locked inputs */
.period-selector input[readonly],
.period-selector input[disabled],
select[disabled] {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.8;
    border-color: #dee2e6;
}

/* Add a small lock icon to indicate locked inputs */
.period-selector input[readonly]::after,
.period-selector input[disabled]::after {
    content: "🔒";
    position: absolute;
    right: 10px;
    color: #6c757d;
}

tr.exceeds-stock {
    background-color: #f8d7da !important; /* light red */
}

#toastContainer .toast:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Top toast container styles */
#topToastContainer {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1338;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    width: 100%;
    max-width: 800px; /* Wider than corner toast */
}

#topToastContainer .toast {
    pointer-events: auto;
    min-width: 300px; /* Wider minimum width */
    width: 100%;
    opacity: 1;
    margin-bottom: 0.5rem;
    box-shadow: 3px 2px 15px rgba(0,0,0, 0.2);
    border-radius: 0.6em;
}

#topToastContainer .toast-body {
    padding: 0.75em 1.6em 0.75em 1.5em;
    line-height: 1.8rem; /* Slightly larger line height */
    font-size: 1.2rem; /* Larger font size */
}

#topToastContainer .toast.bg-info,
#topToastContainer .toast.bg-success,
#topToastContainer .toast.bg-warning,
#topToastContainer .toast.bg-danger {
    color: white;
}

#topToastContainer .toast .toast-header {
    background-color: rgba(255, 255, 255, 0.85);
    color: #212529;
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
    display: none;
}

#topToastContainer .toast .toast-header:not(.d-none) {
    display: flex;
}

#topToastContainer .toast-body a {
    font-style: italic;
    text-decoration-line: whitesmoke;
    color: whitesmoke;
}

#topToastContainer .toast:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Mobile styles for top toast */
@media (max-width: 575.98px) {
    #topToastContainer {
        max-width: 90%;
        margin-top: 8rem !important; /* Move top-center toast down for mobile */
    }
    
    #topToastContainer .toast {
        min-width: 200px;
        font-size: 0.9rem;
    }
    
    #topToastContainer .toast-body {
        padding: 0.5em 1em;
        line-height: 1.5rem;
    }
}

/* Mobile styles for toast */
@media (max-width: 575.98px) {
    #toastContainer {
        bottom: 0.5rem;
        right: 0.5rem;
    }
}

.changeFilter > .dropdown-item > .fa-fw,
.dropdown-item > span {
    pointer-events: none;
    user-select: none;
}

/* Floating Action Generator Styles */
.floating-action-generator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    z-index: 1000;
    transition: all 0.3s ease;
    min-height: 110px;
}

/* Adjust positioning when sidebar is open */
body.has-sidebar:not(.sidebar-closed-desktop) .floating-action-generator {
    left: calc(50% + var(--sidebar-width, 250px) / 2);
    width: calc(70vw - var(--sidebar-width, 250px));
}

/* Ensure proper centering when sidebar is closed */
body.has-sidebar.sidebar-closed-desktop .floating-action-generator {
    left: 50%;
    width: 70vw;
}

.floating-action-generator:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.floating-action-generator .d-flex {
    height: 100%;
}

.floating-action-generator #aiScriptPrompt {
    height: 100%;
    min-height: 90px;
    resize: vertical;
}

.floating-action-generator .bootstrap-select {
    width: 100% !important;
    margin-bottom: 10px;
}

.floating-action-generator .bootstrap-select .dropdown-menu {
    max-height: 300px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .floating-action-generator {
        width: 90vw;
        bottom: 10px;
        left: 50% !important;
    }
    
    /* Override sidebar positioning on mobile */
    body.has-sidebar .floating-action-generator {
        left: 50% !important;
        width: 90vw !important;
    }
}

/* Mobile Modal Styles for AG-Grid Edit Dialog */
@media (max-width: 767.98px) {
    /* Fix the modal container itself */
    .bootbox.modal.edit-modal-mobile {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
        z-index: 1055 !important; /* Ensure modal appears above sidebar button (1051) */
    }
    
    /* Barcode scanner modal should appear above edit modal */
    #barcodeScannerModal {
        z-index: 1070 !important; /* Higher than edit modal (1055) */
    }
    
    #barcodeScannerModal .modal-dialog {
        z-index: 1070 !important;
    }
    
    /* Override Bootstrap's modal centering that causes overflow */
    .modal.fade.bootbox.edit-modal-mobile.show .modal-dialog {
        transform: none !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
    }
    
    /* Fullscreen modal on mobile */
    .bootbox.modal.edit-modal-mobile .modal-dialog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
        transform: none !important;
    }

    .bootbox.modal.edit-modal-mobile .modal-content {
        position: relative !important;
        height: 100vh !important;
        width: 100% !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .bootbox.modal.edit-modal-mobile .modal-body {
        position: relative !important;
        max-height: calc(100vh - 40px) !important;
        height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 0 20px 0 !important;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        width: 100% !important;
    }

    /* Ensure form elements are properly sized on mobile */
    .bootbox.modal.edit-modal-mobile .slick-field {
        margin-bottom: 15px;
    }

    .bootbox.modal.edit-modal-mobile .slick-label {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .bootbox.modal.edit-modal-mobile .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 10px;
    }

    /* Button styling for mobile */
    .bootbox.modal.edit-modal-mobile .save-btn,
    .bootbox.modal.edit-modal-mobile .close-btn {
        padding: 12px 24px;
        font-size: 16px;
        min-height: 44px; /* Apple's recommended touch target size */
    }

    /* Override mobile styles for small save buttons */
    .bootbox.modal.edit-modal-mobile .save-btn.btn-sm {
        padding: 0.28rem 0.56rem !important;
        font-size: 0.975rem !important;
        min-height: auto !important;
    }

    /* General override for small save buttons */
    .save-btn.btn-sm {
        padding: 0.28rem 0.56rem !important;
        font-size: 0.975rem !important;
        min-height: auto !important;
    }

    /* Tab navigation for mobile */
    .bootbox.modal.edit-modal-mobile .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .bootbox.modal.edit-modal-mobile .nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 14px;
    }

    /* Adjust container padding */
    .bootbox.modal.edit-modal-mobile .container,
    .bootbox.modal.edit-modal-mobile .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Slick container adjustments */
    .bootbox.modal.edit-modal-mobile .slick-horizontal {
        padding: 0 8px;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .bootbox.modal.edit-modal-mobile .slick-section {
        margin-bottom: 20px;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make draggable handle more touch-friendly on mobile */
    .bootbox.modal.edit-modal-mobile .editEventForm-move-handle {
        display: none; /* Hide drag handle on mobile */
    }
    
    /* Prevent any content from overflowing */
    .bootbox.modal.edit-modal-mobile .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .bootbox.modal.edit-modal-mobile .col-12,
    .bootbox.modal.edit-modal-mobile [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Ensure all form elements respect container width */
    .bootbox.modal.edit-modal-mobile input,
    .bootbox.modal.edit-modal-mobile select,
    .bootbox.modal.edit-modal-mobile textarea,
    .bootbox.modal.edit-modal-mobile .form-control {
        max-width: 100% !important;
    }
    
    /* Fix for any tables that might cause overflow */
    .bootbox.modal.edit-modal-mobile table {
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    
    /* Ensure edit form doesn't overflow */
    .bootbox.modal.edit-modal-mobile #editEventForm {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix infoMessage positioning on mobile */
    @media (max-width: 767px) {
        #infoMessage {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            margin: 0 !important;
            border-radius: 0 !important;
            z-index: 2000 !important;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }
    }
    
    /* Fix infoMessage positioning within modal */
    .bootbox.modal.edit-modal-mobile #infoMessage {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 2050 !important; /* Higher than modal backdrop (1040) and modal (1050) */
    }
    
    /* Fix form header button overflow on mobile */
    .bootbox.modal.edit-modal-mobile .form-header > :first-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    /* Ensure buttons don't overflow */
    .bootbox.modal.edit-modal-mobile .form-header .btn {
        white-space: nowrap !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Make title responsive */
    .bootbox.modal.edit-modal-mobile .form-header .h4,
    .bootbox.modal.edit-modal-mobile .form-header .h5 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-right: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Button groups should wrap nicely */
    .bootbox.modal.edit-modal-mobile .form-header .btn-group {
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide button text on very small screens, show only icons */
    @media (max-width: 480px) {
        .bootbox.modal.edit-modal-mobile .form-header .btn > span:not(.sr-only) {
            display: none !important;
        }
        
        .bootbox.modal.edit-modal-mobile .form-header .btn > i {
            margin-right: 0 !important;
        }
    }
    
    /* Ensure ml-auto doesn't push buttons off screen */
    .bootbox.modal.edit-modal-mobile .form-header .ml-auto {
        margin-left: auto !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    
   
    
    /* Fix custom action buttons overflow */
    .bootbox.modal.edit-modal-mobile .custom-action-button-data {
        max-width: 100% !important;
        margin: 5px 0 !important;
        word-wrap: break-word !important;
    }
    
    /* Ensure button containers don't overflow */
    .bootbox.modal.edit-modal-mobile .btn-toolbar,
    .bootbox.modal.edit-modal-mobile .button-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* File attachments should wrap */
    .bootbox.modal.edit-modal-mobile .file-attachments {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        max-width: 100% !important;
    }
    
    .bootbox.modal.edit-modal-mobile .file-attachment {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    .bootbox.modal.edit-modal-mobile .file-attachment .file-link {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: calc(100% - 80px) !important;
        display: inline-block !important;
    }
    
    /* Ensure dropdown menus don't cause overflow */
    .bootbox.modal.edit-modal-mobile .dropdown-menu {
        position: absolute !important;
        transform: none !important;
        max-width: 90vw !important;
        overflow-x: auto !important;
    }
    
    /* Fix any horizontal scrolling in modal body */
    .bootbox.modal.edit-modal-mobile .modal-body > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Additional mobile optimizations */
@media (max-width: 575.98px) {
    .bootbox.modal.edit-modal-mobile .modal-body {
        padding: 0 5px 20px 5px !important;
    }

    .bootbox.modal.edit-modal-mobile .slick-field-label {
        min-width: 120px;
        max-width: 150px;
    }
}

.badge-xl {
    font-size: 0.8rem;
}

/* Fix AG-Grid header button overflow on mobile */
@media (max-width: 767.98px) {
    /* Make content-header wrap on mobile */
    .content-header#button-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 10px 5px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* Ensure the icon inside the button is centered */
    .content-header#button-container .sidebar-open-button i {
        pointer-events: none !important;
    }

    /* Make sidebar button consistent size with other header buttons */
    .sidebar-open-button.btn-outline-secondary,
    .content-header#button-container .sidebar-open-button {
        min-width: auto !important;
        min-height: auto !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    /* Ensure button groups don't overflow */
    .content-header .btn-group {
        flex-shrink: 0 !important;
        max-width: auto !important;
        width: auto !important;
    }
    
    /* Hide title on mobile to save space */
    .content-header .table-view-title,
    .content-header .report-view-title {
        display: none !important;
    }
    
    /* Show title on larger screens */
    @media (min-width: 768px) {
        .content-header .table-view-title,
        .content-header .report-view-title {
            display: inline-block !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            margin-right: 8px !important;
        }
    }
    
    /* Fix badge positioning */
    .content-header .total-data-rows-badge {
        position: static !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Remove dropdown arrows on mobile */
    .content-header .dropdown-toggle::after {
        display: none !important;
    }
    
    /* Keep the arrow on desktop for filter dropdown */
    @media (min-width: 768px) {
        .content-header #filterDropdown.dropdown-toggle::after {
            display: inline-block !important;
        }
    }
    
    /* Removed custom-action-buttons-container styles as buttons now in separate row */
}

/* Ensure mobile title wraps/clamps and controls don't wrap across lines */
@media (max-width: 767.98px) {
    .content-header#button-container #mobileViewNameRow {
        order: 99 !important;
        flex: 1 0 100% !important; /* take full width on its own row */
        margin-top: 4px !important;
    }

    .content-header#button-container #mobileViewNameRow .mobile-view-name-label {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
        max-height: 2.4em !important; /* clamp to 2 lines visually */
    }

    /* Keep header controls as fixed-size items */
    .content-header#button-container > *:not(#mobileViewNameRow) {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
}

/* Scanner button styling for identifier fields */
.slick-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.slick-field .scan-identifier-btn {
    padding: 4px 6px;
    margin-right: 0.25rem;
    background-color: transparent;
    border: 1px solid #ced4da;
    color: #495057;
    transition: all 0.15s ease-in-out;
    font-size: 1.75rem !important;
    line-height: 1;
    height: 20px;
    align-self: center;
}

.slick-field .scan-identifier-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.slick-field .scan-identifier-btn i {
    font-size: 1.75rem;
}

/* Fix vertical alignment for slick-label and its content in desktop mode */
@media (min-width: 768px) {
    .slick-label {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
    }
    
    .slick-label > span {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
    }
}

/* Hide delivery/identifier message on desktop screens */
@media (min-width: 768px) {
    #infoMessage {
        display: none !important;
    }
}

/* Make all fields taller/fatter on mobile */
@media (max-width: 767.98px) {
    /* Remove left and right margins from main-container on mobile - only for Documents edit views */
    /* Note: Using class selector instead of :has() for better minifier compatibility */
    body.document-edit-page #main-container,
    #main-container.shared-edit-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 13px !important;
    }
    
    /* Make the parent slick-field container taller */
    .slick-field {
        min-height: 60px !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    /* Limit slick-field width on mobile and center it */
    .slick-field {
        max-width: 420px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .slick-container {
        margin-right: .1rem !important;
        margin-left: .1rem !important;
    }
    
    /* Remove margins from slick sections */
    .bootbox.modal.edit-modal-mobile .slick-section {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Remove margins from form groups if any */
    .bootbox.modal.edit-modal-mobile .form-group {
        margin-bottom: 0 !important;
    }
    
    /* Increase height and padding for all input fields */
    .slick-field .slick-input,
    .slick-field input[type="text"],
    .slick-field input[type="number"],
    .slick-field input[type="email"],
    .slick-field input[type="tel"],
    .slick-field input[type="password"],
    .slick-field input[type="date"],
    .slick-field input[type="datetime-local"],
    .slick-field select,
    .slick-field textarea,
    .form-control {
        min-height: 50px !important;
        padding: 14px 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        line-height: 1.3 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Special handling for actual input elements */
    .slick-field input[type="text"],
    .slick-field input[type="number"],
    .slick-field input[type="email"],
    .slick-field input[type="tel"],
    .slick-field input[type="password"] {
        height: 50px !important;
        padding: 0 16px !important;
        line-height: 50px !important;
        display: block !important;
    }
    
    /* Make labels bigger on mobile */
    .slick-label {
        font-size: 16px !important;
        padding: 8px 12px !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Increase button sizes on mobile */
    .slick-field .btn {
        min-height: 50px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure icon buttons are properly centered */
    .slick-field .btn i {
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    /* Make linkInputEdit buttons smaller on mobile */
    .slick-field button[data-click="linkInputEdit"],
    .slick-field a[data-click="linkInputEdit"] {
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 14px !important;
    }
    
    .slick-field button[data-click="linkInputEdit"] i,
    .slick-field a[data-click="linkInputEdit"] i {
        font-size: 14px !important;
    }
    
    /* Fix specific button types */
    .slick-field button[data-click="linkInputEdit"],
    .slick-field a[data-click="linkInputEdit"],
    .slick-field button[data-click="deleteIdentifierField"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
    }
    
    /* Make scan button even bigger on mobile */
    .slick-field .scan-identifier-btn {
        padding: 8px 10px !important;
        font-size: 2rem !important;
        min-height: 45px !important;
        margin-left: 10px !important;
    }
    
    .slick-field .scan-identifier-btn i {
        font-size: 1.5rem !important;
    }
    
    /* Remove horizontal padding on mobile for maximum space */
    .bootbox.modal.edit-modal-mobile .slick-horizontal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .bootbox.modal.edit-modal-mobile .tab-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .bootbox.modal.edit-modal-mobile .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Also remove column padding for maximum width */
    .bootbox.modal.edit-modal-mobile .col-12,
    .bootbox.modal.edit-modal-mobile [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Increase nav-item text size to match field text size */
    .bootbox.modal.edit-modal-mobile .nav-tabs .nav-item .nav-link {
        font-size: 16px !important;
        padding: 12px 20px !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Make sure nav pills are also bigger if used */
    .bootbox.modal.edit-modal-mobile .nav-pills .nav-item .nav-link {
        font-size: 16px !important;
        padding: 12px 20px !important;
        min-height: 50px !important;
    }
    
    /* Ensure breadcrumb and other navigation elements are proportional */
    .bootbox.modal.edit-modal-mobile .breadcrumb-item {
        font-size: 16px !important;
    }
    
    .bootbox.modal.edit-modal-mobile .nav-item {
        margin-bottom: 5px !important;
    }
    
    /* Make select dropdowns taller */
    select.form-control,
    .slick-field select {
        height: 50px !important;
        line-height: 1.5 !important;
    }
    
    /* Make textareas have more padding */
    textarea.form-control,
    .slick-field textarea {
        min-height: 100px !important;
        padding: 12px 16px !important;
    }
    
    /* Ensure custom Bootstrap select components are also taller */
    .bootstrap-select .dropdown-toggle {
        height: 50px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Make radio buttons and checkboxes bigger */
    .form-check-input,
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        margin-top: 0 !important;
    }
    
    .form-check-label {
        font-size: 16px !important;
        padding-left: 8px !important;
        line-height: 24px !important;
    }
}


/* Activity tab */

.activity-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    margin: 10px 4px 5px 4px;
    height: 55vh;
    overflow-y: auto;
}
.activity-entry {
    font-size: 14px;
}
.activity-entry-text {
    margin-left: 9px;
    color: color-mix(in srgb, var(--sheet-fg) 30%, transparent);
}
.activity-entry-text > span {
    color: color-mix(in srgb, var(--sheet-fg) 55%, transparent);
}
.activity-entry-text > i {
    color: color-mix(in srgb, var(--sheet-fg) 55%, transparent);
}
.activity-entry-text > b {
    font-weight: 600;
    color: color-mix(in srgb, var(--sheet-fg) 50%, transparent);
}
.activity-entry-time {
    float: right;
    margin-right: 8px;
    color: color-mix(in srgb, var(--sheet-fg) 40%, transparent);
}
.activity-comment {
    /*border: solid 1px color-mix(in srgb, var(--sheet-fg) 25%, transparent);*/
    font-size: 15px;
    margin-top: 1px;
    background-color: #92d0ed;
    color: white;
    border-radius: 7px;
    padding: 6px 10px;
}

/* Scanner Debug Console */
.scanner-console {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 500px;
    max-width: 90vw;
    background: rgba(0, 0, 0, 0.9);
    color: #0f0;
    border: 1px solid #0f0;
    border-radius: 5px;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
}

.scanner-console .console-output {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    border-radius: 3px;
}

.scanner-console .console-output .console-line {
    margin: 2px 0;
    padding: 2px 5px;
    border-left: 2px solid #0f0;
    word-wrap: break-word;
}

.scanner-console .console-output .console-line.error {
    color: #f00;
    border-left-color: #f00;
}

/* QR/Barcode Scanner Modal Styles */
#barcodeScannerModal .modal-dialog {
    max-width: 500px;
    z-index: 1070 !important;
}

#barcodeScannerModal .modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#barcodeScannerModal .modal-header {
    border-bottom: none;
    padding: 1.25rem;
    background: #1a73e8;
    color: white;
}

#barcodeScannerModal .modal-header .modal-title {
    font-weight: 500;
    display: flex;
    align-items: center;
    color: white;
}

#barcodeScannerModal .modal-header .close {
    opacity: 0.9;
    transition: opacity 0.2s;
    color: white;
}

#barcodeScannerModal .modal-header .close:hover {
    opacity: 1;
}

#barcodeScannerModal .modal-body {
    background-color: #f8f9fa;
}

/* Scanner Container */
#barcodeScannerModal .scanner-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

#barcodeScannerModal #reader {
    width: 100%;
}

/* Scanner Overlay with Frame */
#barcodeScannerModal .scanner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

#barcodeScannerModal .scanner-frame {
    position: relative;
    width: 200px;
    height: 200px;
}

#barcodeScannerModal .scanner-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #1a73e8;
}

#barcodeScannerModal .scanner-corner.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

#barcodeScannerModal .scanner-corner.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

#barcodeScannerModal .scanner-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

#barcodeScannerModal .scanner-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Scan Identifier Button Styles */
.scan-identifier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px !important; /* increased padding */
    margin-left: 3px !important;
    background: #1a73e8 !important;
    color: white !important;
    border-radius: 3px !important;
    font-size: 1rem !important; /* slightly larger text */
    cursor: pointer;
    transition: all 0.3s ease;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 44px !important; /* taller height */
    min-height: 44px !important;
}


.scan-identifier-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: #1967d2 !important;
}

.scan-identifier-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Improve the field styling when scan button is present */
.slick-field {
    position: relative;
}

.slick-field .slick-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mobile responsiveness for scanner modal */
@media (max-width: 576px) {
    #barcodeScannerModal .modal-dialog {
        max-width: 95%;
        margin: 0.5rem auto;
    }
    
    #barcodeScannerModal .scanner-frame {
        width: 150px;
        height: 150px;
    }
}

.scanner-console .console-output .console-line.warning {
    color: #ff0;
    border-left-color: #ff0;
}

.scanner-console .console-output .console-line.info {
    color: #0ff;
    border-left-color: #0ff;
}

/* Custom action buttons in data grid - negative margin to move them up */
.custom-action-button-data-grid {
    margin-top: -0.5rem !important;
}

/* Custom action buttons in button container - negative margin to move them up */
.custom-action-button-global {
    margin-top: -0.5rem !important;
}

@media (max-width: 768px) {
    .custom-action-button-global {
        margin-top: -1.3rem !important;
    }
}
/* Fix for Data/Edit modal form layout in Bootstrap mode */

/* Ensure proper form group layout and spacing */
#editEventForm .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Fix label alignment */
#editEventForm .form-group label.control-label {
    font-weight: normal !important;
    margin-bottom: 0.25rem;
    display: block;
    padding-left: 0;
    text-align: left;
}

/* Override any bold styling for display template labels */
.form-group label.control-label {
    font-weight: normal !important;
}

/* Specific override for locked/readonly datarow labels */
#editEventForm .asset-fields-container label.control-label,
#editEventForm label.control-label[style*="font-weight"] {
    font-weight: normal !important;
}

/* Fix input view alignment for read-only fields */
#editEventForm .form-group .input-view {
    min-height: 34px;
    display: block;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    background-color: #f8f9fa;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Asset fields container proper layout */
.asset-fields-container {
    width: 100%;
}

.asset-fields-container .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

/* Fix Bootstrap column layout for form groups */
#editEventForm .form-group.col-12,
#editEventForm .form-group.col-lg-3,
#editEventForm .form-group.col-lg-4,
#editEventForm .form-group.col-lg-6 {
    position: relative;
    width: 100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Desktop: Use proper column widths */
@media (min-width: 992px) {
    #editEventForm .form-group.col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    #editEventForm .form-group.col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    #editEventForm .form-group.col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile: Full width for all columns */
@media (max-width: 991px) {
    #editEventForm .form-group.col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Fix input groups */
#editEventForm .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

#editEventForm .input-group > .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
}

/* Fix validation messages */
/* TODO: There was a `#editEventForm .text-danger` here. That's too broad and screws up other things. */
#editEventForm .field-validation-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

/* Fix for identifier/RFID fields */
#editEventForm .rfid-field {
    width: 100%;
}

/* Fix button alignment in input groups */
#editEventForm .input-group-append {
    margin-left: -1px;
    display: flex;
}

#editEventForm .input-group-append .btn {
    position: relative;
    z-index: 2;
}

/* Fix select elements */
#editEventForm select.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Fix textarea elements */
#editEventForm textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    resize: vertical;
}

/* Fix checkbox and radio button alignment */
#editEventForm .custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

#editEventForm .custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

#editEventForm .custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

/* Fix tab content padding */
#editEventForm .tab-content {
    padding: 1rem;
}

/* Ensure proper spacing between rows */
#editEventForm .asset-fields-container > .col-12 > .row {
    margin-bottom: 0;
}

#editEventForm .asset-fields-container > .col-12 > .row:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Fix modal body scrolling */
.modal-body#editEventForm,
#editEventForm.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

/* Reduce container-fluid padding */
#editEventForm .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* On smaller screens, reduce padding even more */
@media (max-width: 767px) {
    #editEventForm .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Fix for hidden fields that might be causing layout issues */
#editEventForm input[type="hidden"] {
    display: none !important;
}

/* Ensure proper flex container for rows */
#editEventForm .row {
    display: flex;
    flex-wrap: wrap;
}

/* Fix z-index issues with dropdowns and modals */
.modal #editEventForm .dropdown-menu {
    z-index: 1055;
}

/* Ensure info bubbles display correctly */
#editEventForm .info-bubble {
    cursor: help;
    margin-left: 0.25rem;
}

/* Fix date/datetime inputs */
#editEventForm input[type="date"],
#editEventForm input[type="datetime-local"] {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Additional fixes for proper field alignment */
#editEventForm .form-group > * {
    width: 100%;
}

#editEventForm .form-group .input-group {
    width: 100%;
}

/* Ensure proper stacking on smaller screens */
@media (max-width: 575px) {
    #editEventForm .form-group {
        margin-bottom: 0.75rem;
    }
    
    #editEventForm .control-label {
        font-size: 0.9rem;
    }
    
    #editEventForm .form-control {
        font-size: 0.95rem;
    }
}

.version-update-container img {
    max-width: 100%;
}

/* Sidebar dropdown items with action buttons */
.dropdown-item-with-actions {
    position: relative;
    padding: 0;
}

.dropdown-item-with-actions .dropdown-item {
    border-radius: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}

.dropdown-item-with-actions .dropdown-item i {
    flex-shrink: 0;
}

.dropdown-item-with-actions .dropdown-item i + span {
    margin-left: 0.35rem;
}

.dropdown-item-with-actions .dropdown-item span + i {
    flex-shrink: 0;
    margin-left: 0.35rem;
}

.dropdown-item-with-actions .dropdown-item span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* When the view is active, highlight the entire row */
.dropdown-item-with-actions:has(.dropdown-item.active) {
    background-color: #b6d6f5;
}

.dropdown-item-with-actions:has(.dropdown-item.active) .dropdown-item {
    background-color: transparent !important;
    color: #212529 !important;
}

.dropdown-item-with-actions:has(.dropdown-item.active) .sidebar-set-home {
    color: #212529 !important;
}

.dropdown-item-with-actions:has(.dropdown-item.active) i {
    color: #212529 !important;
}

.dropdown-item-with-actions .sidebar-set-home {
    display: inline-flex;
    align-items: center;
    color: #6c757d;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

/* Hover state for the entire row */
.dropdown-item-with-actions:hover:not(:has(.dropdown-item.active)) {
    background-color: #ced4da;
}

.dropdown-item-with-actions:hover .dropdown-item {
    background-color: transparent !important;
}

.dropdown-item-with-actions:hover .sidebar-set-home {
    background-color: transparent !important;
    color: #007bff;
}

/* Sticky custom buttons container */
.custom-buttons-sticky-container {
    position: sticky;
    top: var(--navbar-height);
    z-index: 100;
    background-color: var(--site-bg, white);
    padding: 15px 0 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
}

/* When scrolled, add shadow */
.custom-buttons-sticky-container.scrolled {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Adjust for popup modals */
.popup-content .custom-buttons-sticky-container,
.modal .custom-buttons-sticky-container {
    position: sticky;
    top: 10px;
}

/* Ensure buttons inside maintain their layout */
.custom-buttons-sticky-container .custom-action-button-documents {
    /* Buttons already have their own styles */
}

/* Field with OnFieldChange trigger indicator */
.field-with-trigger {
    position: relative;
    border-left: 3px solid #FFC260 !important;
    padding-left: 8px !important;
}

.field-with-trigger::before {
    content: '⚡';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #FFC260;
    pointer-events: none;
    z-index: 1;
}

/* For select elements, adjust positioning */
select.field-with-trigger::before {
    right: 30px; /* Account for dropdown arrow */
}

/* For link autocomplete fields */
.link-autocomplete.field-with-trigger::before {
    right: 35px; /* Account for the link icon button */
}

/* Ensure the indicator is visible on focus */
.field-with-trigger:focus {
    border-left-color: #ff9900 !important;
}

.field-with-trigger:focus::before {
    color: #ff9900;
}

/* Lighter AG-Grid dropdown icons */

.ag-menu-option-icon > .fa-fw {
    opacity: 0.6;
}

@media (min-width: 1200px)  /* Wider document edit page */
{
    .shared-edit-container .container {
        max-width: 1366px !important;
    }
}

@media (min-width: 768px)  /* Full-width tables on document edit page. */
{
    body.has-sidebar .container > .sheet-container,
    body.has-sidebar .container > .local-ag-grid {
        margin-left: calc(-50vw + var(--sidebar-width) / 2 + 2em + 50%);
        margin-right: calc(-50vw + var(--sidebar-width) / 2 + 2em + 50%);
    }
    body.has-sidebar.sidebar-collapsed .container > .sheet-container,
    body.has-sidebar.sidebar-collapsed .container > .local-ag-grid {
        margin-left: calc(-50vw + var(--sidebar-collapsed-width) / 2 + 2em + 50%);
        margin-right: calc(-50vw + var(--sidebar-collapsed-width) / 2 + 2em + 50%);
    }
}


/* Double-click prevention - button submitting state */

button.submitting,
input[type="submit"].submitting,
.btn.submitting {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

button.submitting::after,
input[type="submit"].submitting::after,
.btn.submitting::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spinner 0.75s linear infinite;
    vertical-align: middle;
}

@keyframes btn-spinner {
    to {
        transform: rotate(360deg);
    }
}

.local-ag-grid {
    --ag-grid-size: 4px;
    --ag-header-height: 36px;
    --ag-row-height: 36px;
    --ag-list-item-height: 36px;
}
.local-ag-grid .ag-header-cell {
    font-size: 14px !important;
}

/* Version indicator button */
.version-indicator-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.version-indicator-btn:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.08);
}

.version-indicator-btn:focus {
    outline: none;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

.version-indicator-btn i {
    font-size: 0.9rem;
}

.version-indicator-btn small {
    font-weight: 500;
}