.btn {
    background-color: #005695;
    color: #FFFFFF;
    padding: 5px;
}

    .btn:hover {
        background-color: #666666;
        color: #FFFFFF;
    }

.invalid {
    color: red;
}

.invalid-tooltip {
    top: 20%;
    left: 98%;
    width: 200px;
}

/* Adjustments to the placeholder to work better for filter */
.filterSection > .form-floating > .form-control {
    width: auto;
}

.menu-icon,
.navbar-nav .nav-link > i,
.dropdown-item > i {
    font-size: 1.15em; /* Consistent icon size */
    vertical-align: middle; /* Align icon with text */
    line-height: 1; /* Remove extra space */
    display: inline-block; /* Prevent baseline issues */
    min-width: 1.2em; /* Ensures icons are same width for alignment */
    text-align: center;
}

.menu-icon,
.navbar-nav .nav-link > i,
.dropdown-item > i {
    /* ...previous styles... */
    margin-top: -2px; /* Adjust as needed for your font and layout */
}

.dropdown-submenu > .dropdown-menu.show {
    display: block !important;
}
/* Desktop (hover-capable) submenu reveal. The mobile click handler in nav.php
   only toggles .show below 992px, so desktop needs a hover trigger to open the
   nested flyout (e.g. Search Tickets -> EMAS3 / EMAS2). Guarded by the lg
   breakpoint so it never fights the mobile stacked behavior. */
@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu,
    .dropdown-submenu:focus-within > .dropdown-menu {
        display: block !important;
    }
}
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        display: none;
        top: 0;
        left: 100%;
        margin-top: -1px;
    }

    .dropdown-submenu > .dropdown-item.dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        white-space: nowrap;
    }

        .dropdown-submenu > .dropdown-item.dropdown-toggle::after {
            margin-left: auto;
            margin-top: 0;
            flex-shrink: 0;
            transform: rotate(-90deg);
        }

.filterSection > .form-floating {
    display: inline-block;
}

.filterSection > .form-non-floating {
    display: inline-block;
}

.filterSection > .form-non-floating {
    display: block;
}

.filterSection
.form-floating > .form-control, .form-floating > .form-control-plaintext {
    padding-top: 1.5rem;
    padding-bottom: .7em;
}

.filterSection > .form-floating > input {
    min-height: 1em;
    height: 2.7em;
}

.filterSection .form-floating > label {
    color: #005695;
    padding: .5rem .75rem 1rem .75rem;
}

.filterSection .form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: black;
    font-stretch: ultra-expanded;
    transform: scale(.66) translateY(-.45rem) translateX(.15rem);
}
/*
.form-input-group {
    padding-bottom: 5px;
}

.input-group .form-floating {
    flex: 1 1 auto;
    min-width: 0;
}

    .input-group .form-floating .form-control {
        height: calc(3.5rem + 2px); // Match Bootstrap default floating input height
        line-height: 1.25;
        padding-top: 1.625rem;
        padding-bottom: .625rem;
    }

    .input-group .form-floating label {
        color: #005695;
        font-stretch: ultra-expanded;
        left: 0.75rem;
        top: .75em;
        padding: 0;
        transition: all .2s ease-in-out;
    }
*/
.dataTable th {
    border-top: 1px solid #dddddd !important;
    border-bottom: 1px solid #dddddd !important;
    border-right: 1px solid #dddddd !important;
}

.dt-export-hide {
    visibility: hidden;
    max-height: 0px;
}

.dt-length-options {
    float: right;
    padding-bottom: 5px;
}

    .dt-length-options select {
        min-width: 100px;
    }

.export-options > .dropdown-menu > .dropdown-item:hover {
    background-color: #808080;
}

.export-options > .dropdown-menu > .dropdown-item span {
    padding: 3px;
    background-color: #808080;
}


.dropdown-menu .dropdown-item {
    display: block;
}

.dropdown button.export-buttons {
    background-color: #808080;
}

    .dropdown button.export-buttons:hover {
        background-color: #005695
    }

.export-options .dropdown-menu {
    background-color: #808080 !important;
}

.export-options.dropdown-item:hover {
    background-color: #808080 !important;
}

.export-option {
    cursor: pointer;
    color: white;
}

a.export-option {
    text-decoration: none;
}

    a.export-option:hover {
        text-decoration: underline;
    }

.fa-copy, .fa-print {
    color: #005695 !important;
}

.fa-file-csv {
    color: green !important;
}

.fa-file-excel {
    color: green !important;
}

.fa-file-pdf {
    color: #FA0F00 !important;
}

/* The export/print buttons colour .fa-print blue (#005695). Inside a Spectra
   button the print icon should instead match the button's text colour, like the
   Add Event icon does, so let it inherit. */
.btn-spectra .fa-print {
    color: inherit !important;
}

/* Keep the green Excel icon for DataTables export buttons, but let the
   nav menu's RMA Report icon match the other navbar icons by inheriting
   the link colour (including the #005695 hover state). */
.navbar .fa-file-excel {
    color: inherit !important;
}

/* datatables */
.active > .page-link, .page-link.active {
    background-color: #005695 !important;
}
/* Form placeholder for login and request forms */
.form-floating {
    padding-bottom: 5px;
}

.form-check input {
    float: none !important;
    margin-right: .5em !important;
}

.form-floating textarea {
    min-height: 125px !important;
}

.faAlert .fa-triangle-exclamation {
    color: orange;
    padding: 2px;
    border-radius: 3px;
}

.alertCounter {
    color: darkorange;
    padding: 1px;
    border-radius: 2px;
}


td.child ul.dtr-details {
    display: table !important;
}

    td.child ul.dtr-details li {
        display: table-row !important;
    }

        td.child ul.dtr-details li span {
            display: table-cell !important;
        }

            td.child ul.dtr-details li span.dtr-title {
                text-align: right !important;
                padding-right: 1.1em !important;
            }

            td.child ul.dtr-details li span.dtr-data {
                text-align: left !important;
            }

.mainNav, .dropdown-menu {
    background-color: #005695 !important;
}

.navbar-nav .dropdown-menu {
    border-color: #ced7e7 !important;
}

.navbar .btn,
.dropdown-menu .btn {
    background-color: #ced7e7;
    color: #005695;
    border: 1px solid #005695;
}

    .navbar .btn:hover,
    .dropdown-menu .btn:hover,
    .navbar .btn:focus,
    .dropdown-menu .btn:focus {
        background-color: #b5c3d6;
        color: #003a63;
        border-color: #005695;
    }


.navbar-nav .dropdown-header {
    text-align: center;
}

.navbar-nav .nav-item a {
    color: #ced7e7;
    padding: 3px 10px 3px 10px;
}

    .navbar-nav .nav-item a.nav-link.active {
        color: #ced7e7;
        padding: 3px 10px 3px 10px;
    }

.navbar .navbar-nav li a {
    color: #ced7e7;
    padding: 3px 10px 3px 10px;
}

.navbar h6 {
    color: #ced7e7;
    padding: 3px 10px 3px 10px;
    text-align: center;
}

.navbar-brand {
    font-size: 24px;
    float: left;
    background-color: white;
}

    .navbar-brand img {
        max-width: 125px;
        /* put value of image height as your need */
        padding: 7px;
    }

nav .dropdown-item:focus, nav .dropdown-item:hover {
    background-color: #ced7e7 !important;
    color: #005695 !important;
}

.logout-form form {
    display: inline;
}

.navbar-nav > li {
    float: none;
}

footer {
    background-color: #005695 !important;
    color: #ced7e7;
    margin-top: 75px;
}

    footer a {
        color: #a9b4c2; /* Slightly darker than #ced7e7 */
        text-decoration: underline;
    }

        footer a:hover,
        footer a:focus {
            color: #7c8794; /* Even darker on hover/focus for accessibility */
            text-decoration: underline;
        }

body {
    color: #005695 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container-fluid {
    flex-grow: 1;
}

body > div.container:first-of-type {
    flex-grow: 1;
}

.edit .fa-pencil, .edit .fa-eye {
    color: #005695;
    cursor: pointer;
}

    .edit .fa-pencil:hover, .edit .fa-eye:hover {
        color: #0a52e4;
    }

.active .fa-circle-check {
    color: green;
}

.fa-green {
    color: green;
}

.fa-red {
    color: red;
}

.main-logo-form {
    padding: 3px 5px 3px 5px;
    background-color: white;
    border-radius: 5px;
}

.fa-thumbs-up {
    color: #005695;
}

.passwordVisibility {
    position: absolute;
    top: 22px;
    left: 92%;
}

.userType .fa-circle-check {
    color: green;
}

.userType .fa-circle-xmark {
    color: red;
}

.deactivate .fa-trash {
    color: #808080;
}

    .deactivate .fa-trash:hover {
        color: #07485B;
    }

.approve .fa-thumbs-up {
    color: #808080;
}

    .approve .fa-thumbs-up:hover {
        color: green;
    }

.disapprove .fa-thumbs-down {
    color: #808080;
}

    .disapprove .fa-thumbs-down:hover {
        color: red;
    }

.link-like {
    text-decoration: none;
    cursor: pointer;
}

    .link-like:hover {
        text-decoration: none;
        opacity: .9;
    }



.action-buttons span {
    padding: 0px 5px 0px 5px;
}

.btn-confirm {
    background-color: green;
}

.btn-cancel {
    background-color: red;
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.modal-backdrop {
    opacity: 0.7 !important;
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    max-width: inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height: inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

.loading h2 {
    margin: 0;
    font: 1.3em verdana;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.validationMessages {
    color: red;
    text-align: left;
}
/*
 * Loading Dots
 * Can we use pseudo elements here instead :after?
 */
.loading span {
    display: inline-block;
    vertical-align: middle;
    width: .6em;
    height: .6em;
    margin: .19em;
    background: #007DB6;
    border-radius: .6em;
    animation: loading 1s infinite alternate;
}

    /*
 * Dots Colors
 * Smarter targeting vs nth-of-type?
 */
    .loading span:nth-of-type(2) {
        background: #0077b6;
        animation-delay: 0.2s;
    }

    .loading span:nth-of-type(3) {
        background: #0096c7;
        animation-delay: 0.4s;
    }

    .loading span:nth-of-type(4) {
        background: #00b4d8;
        animation-delay: 0.6s;
    }

    .loading span:nth-of-type(5) {
        background: #48cae4;
        animation-delay: 0.8s;
    }

    .loading span:nth-of-type(6) {
        background: #90e0ef;
        animation-delay: 1.0s;
    }

    .loading span:nth-of-type(7) {
        background: #ade8f4;
        animation-delay: 1.2s;
    }

/*
 * Animation keyframes
 * Use transition opacity instead of keyframes?
 */
@keyframes loading {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Timeline colors  */
.ontime-bg {
    background-color: lightgreen !important;
    color: black;
}

.ontime-fore {
    color: lightgreen !important;
}

.inprocess-bg {
    background-color: #eff1b8 !important;
    color: black;
}

.btn.inprocess-bg:hover {
    color: #a58300;
}

.inprocess-fore {
    color: #eff1b8 !important;
}

.overdue-bg {
    background-color: #ff8787 !important;
    color: black;
}

.btn.overdue-bg:hover {
    color: #4f0e0e;
}


.overdue-fore {
    color: #ff8787 !important;
}

.form-check.radio {
    padding: 2px 0px 2px 0px;
}
/* Custom color radio buttons */
.spsy-radio {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    line-height: 20px;
}

    .spsy-radio input[type="radio"] {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        height: 20px;
        width: 20px;
        margin: 0;
    }

    .spsy-radio .spsy-checkmark {
        position: absolute;
        left: 0;
        top: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border-radius: 50%;
        border: 2px solid #005695;
        box-sizing: border-box;
    }

    .spsy-radio input[type="radio"]:checked ~ .spsy-checkmark {
        background-color: #005695;
        border-color: #005695;
    }

    .spsy-radio .spsy-checkmark:after {
        content: "";
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .spsy-radio input[type="radio"]:checked ~ .spsy-checkmark:after {
        display: block;
    }
/* Custom checkbox style */
.spsy-checkbox {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    line-height: 20px;
}

    .spsy-checkbox input[type="checkbox"] {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        height: 20px;
        width: 20px;
        margin: 0;
    }

    .spsy-checkbox .spsy-checkmark {
        position: absolute;
        left: 0;
        top: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 2px solid #005695;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .spsy-checkbox input[type="checkbox"]:checked ~ .spsy-checkmark {
        background-color: #005695;
        border-color: #005695;
    }

    .spsy-checkbox .spsy-checkmark:after {
        content: "";
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: translate(-50%, -60%) rotate(45deg);
    }

    .spsy-checkbox input[type="checkbox"]:checked ~ .spsy-checkmark:after {
        display: block;
    }

.impersonation-banner {
    background-color: #d32f2f;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 2px solid #b71c1c;
    z-index: 1000;
}

.categorySelect.auto-width {
    width: auto !important;
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.categorySelect.auto-width {
    padding-right: 2em !important;
}

.btn.btn-next-step {
    background-color: darkgreen;
}


.td-border-end-black {
    border-right: 1px solid #000 !important;
}

.no-top-border {
    border-top: none !important;
}

.no-bottom-border {
    border-bottom: none !important;
}

.form-category-group {
    border: 2px solid #b5c3d6;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    box-shadow: 0 0.5rem 1rem rgba(181,195,214,0.10);
    background: #f8f9fa;
}

    .form-category-group .card-header {
        background: #e3eaf3;
        color: #2c3e50;
        font-weight: bold;
        font-size: 1.15rem;
        border-bottom: 1px solid #b5c3d6;
        border-radius: 0.75rem 0.75rem 0 0;
        padding: 0.75rem 1.25rem;
    }

    .form-category-group .card-body {
        padding: 1.25rem;
    }
/* Make category group headers and bodies more compact */
.card.form-category-group .card-header {
    font-size: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card.form-category-group .card-body {
    padding: 0.5rem 0.75rem;
}

.card.form-category-group .card-header {
    font-size: 0.95rem;
    padding: 0.15rem 0.5rem;
}

.card.form-category-group .card-body {
    padding: 0.3rem 0.5rem;
}

.timeline-header {
    background-color: #e3f0fa !important; /* lighter spectra blue */
    color: #005695 !important; /* spectra blue text */
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #b3d3ea;
}

    .timeline-header .fa {
        float: right;
    }

.navbar-brand img {
    border-radius: 8px; /* Rounded corners for logo */
}