:root {
    --black: #000000;
    --white: #ffffff;
    --stealth: #172430;
    --titanium: #283030;
    --gray: #dcdcdc;
    --grayDark: #737373;
    --grayMed: #a2a2a2;
    --grayLight: #ededed;
    --red: #ff000a;
    --dangerRed: #dd2c00;
    --dangerRed2: #a02000;
    --dataBlue: #a4e3ef;
    --primaryBlue: #305195;
    --primaryBlue2: #213867;
    --blueDark: #305195;
    --blueLight: #4c98d0;
    --blueLight2: #2e79b0;
    --bs-nav-link-font-size: 1.25rem;
    --bs-nav-link-font-weight: 700;
    
    --bs-alert-bg: var(--grayLight);
    --bs-alert-border-color: var(--gray);
    --bs-alert-color: var(--grayLight);
    --alertDangerBgColor: #fbe6e8;
    --alertDangerBorderColor: #d70015;
    --alertDangerColor: #283030;
    --contentMaxWidth: 1344px;
}


/*** BASE ***/
a {
    color: var(--grayDark);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2rem;
}

    a:hover {
        text-decoration-style: solid;
    }

body {
    font-size: 1.25rem;
}

header,
main,
footer {
    width: 100%;
}

aside {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
    aside .btn {
        width: 100%;
    }
    aside .btn+.btn {
        margin-left: 0;
    }

form {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    row-gap: 1rem;
}

    form .col:has(.field-validation-error),
    form [class*="col-"]:has(.field-validation-error), 
    form .validation-summary-errors {
        background-color: var(--alertDangerBgColor);
        border: 1px solid var(--alertDangerBorderColor);
    }

    form .field-validation-valid {
        display: block;
        color: var(--grayDark);
        font-size: 1rem;
    }

    form .field-validation-error,
    form .validation-summary-errors {
        color: var(--alertDangerBorderColor);
        --bs-gutter-x: 0;
    }

    form input,
    form select,
    form textarea {
        width: 100%;
    }

    form input[type="number"],
    form input[type="date"] {
        max-width: fit-content;
    }

    form input[type="number"] {
        text-align: right;
    }

    form label {
        font-weight: 700;
        --bs-gutter-x: 0;
    }

        form label:has(+ input[required])::after,
        form label:has(+ .SumoSelect > select[required])::after,
        form label:has(+ select[required])::after,
        form label:has(+ textarea[required])::after {
            content: " *";
            color: var(--red);
        }

    form .row {
        align-items: end;
    }
        form .row a {
            width: fit-content;
        }

    form textarea {
        height: 6rem;
    }

.form-control {
    font-size: 1.25rem;
}

h1, h2, h3, h4 {
    margin-bottom: 1rem;
}

h1,
.title {
    text-transform: uppercase;
    text-decoration-line: underline;
    text-decoration-color: var(--red);
    text-underline-offset: 0.5rem;
}

p {
    text-align: justify;
}

select {
    padding: 0.15rem;
}

summary {
    cursor: pointer;
}

ul {
    text-align: left;
}


/*** LAYOUT ***/
header {
    background-color: var(--stealth);
    padding: 0.75rem 0;
    position: sticky;
    z-index: 5;
}

main {
    flex: 1 0 auto;
}

footer {
    background: url(/img/footer-background.jpg) no-repeat center center var(--grayDark);
    background-size: cover;
    position: relative;
    color: var(--white);
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 1rem;
    padding: 1.5rem 0 1rem 0;
    z-index: 1;
}
    /* Used to grayscale background image */
    footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(23, 36, 48, 0.6);
        z-index: -1;
    }

    footer nav {
        display: flex;
    }

        footer nav a {
            --bs-link-color-rgb: var(--white);
            color: var(--white);
            border-left: solid 1px;
            line-height: 1.5rem;
            padding: 0 0.6rem;
            text-decoration: none;
        }

            footer nav a:hover {
                --bs-link-hover-color-rgb: var(--grayLight);
                color: var(--grayLight);
                text-decoration: underline;
            }

            footer nav a:first-child {
                border-left: none;
            }


/*** COMPONENTS ***/
.alert, 
.alert-message {
    background-color: var(--bs-alert-bg);
    border: 1px solid var(--bs-alert-border-color);
    color: var(--bs-alert-color);
}

    .alert .btn-close {
        --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    }

.alert-danger,
.alert-danger-light,
.field-validation-error,
.input-validation-error {
    --bs-alert-bg: var(--alertDangerBgColor);
    --bs-alert-border-color: var(--alertDangerBorderColor);
    --bs-alert-color: var(--alertDangerBorderColor);
}

.alert-message {
    padding: 0.5rem 1rem;
}

.bi-info-circle {
    color: #55bff0;
}

.btn {
    font-size: 1rem;
    width: fit-content;
}

.btn-container {
    display: flex;
    column-gap: 0.75rem;
}
    .btn-container .btn+.btn,
    .btn-container a {
        margin-left: 0;
    }

.btn-primary {
    background-color: var(--primaryBlue);
}
    .btn-primary:active,
    .btn-primary:focus,
    .btn-primary:focus-visible,
    .btn-primary:hover {
        --bs-btn-active-bg: var(--primaryBlue2);
        background-color: var(--primaryBlue2);
    }

.card-container {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, 18rem);
    justify-content: center;
}
    .card-container .btn {
        width: 100%;
    }

.card {
    background-color: var(--grayLight);
    color: var(--grayDark);
    font-style: italic;
    height: 14rem;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.card-header {
    background-color: var(--grayDark);
    color: var(--white);
    font-size: 1.25rem;
    font-style: initial;
    font-weight: 700;
    margin: 0;
    padding: 0.5rem 1rem;
}

.card-body {
    flex: 1 0 auto;
    font-size: 1.1rem;
    color: var(--titanium);
    list-style: none;
    margin: 0;
    padding: 0 0.5rem;
}

    .card-body li {
        margin-top: 0.75rem;
    }

        .card-body li:before {
            content: "\f054";
            font-family: "Font Awesome 5 Free";
            font-size: 0.9rem;
            font-style: normal;
            font-weight: 700;
            padding-right: 0.25rem;
        }

.card-footer {
    color: var(--titanium);
    font-size: 2rem;
    font-weight: 700;
    padding: 0;
    text-align: center;
    width: 100%;
}

    .card-footer:hover {
        background-color: var(--grayMed);
        color: var(--white);
    }

.admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dashboard-kpis {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.dashboard-kpi {
    background-color: var(--grayLight);
    border-left: 0.35rem solid var(--primaryBlue);
    color: var(--titanium);
    display: flex;
    flex-direction: column;
    min-height: 8rem;
    padding: 1rem;
    text-decoration: none;
}

    .dashboard-kpi:hover {
        background-color: var(--gray);
        color: var(--titanium);
        text-decoration: none;
    }

    .dashboard-kpi strong {
        color: var(--primaryBlue);
        font-size: 2.5rem;
        line-height: 1;
    }

.dashboard-kpi-label,
.dashboard-activity-type {
    color: var(--grayDark);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.dashboard-section {
    border-top: 0.25rem solid var(--gray);
    padding-top: 0.75rem;
}

.dashboard-section-header h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

.dashboard-table {
    font-size: 1rem;
}

    .dashboard-table th,
    .dashboard-table td {
        vertical-align: middle;
        white-space: nowrap;
    }

.dashboard-activity {
    font-size: 1rem;
}

    .dashboard-activity .list-group-item {
        display: grid;
        gap: 0.2rem;
    }

    .dashboard-activity time {
        color: var(--grayDark);
        font-size: 0.9rem;
    }

.form-submission {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    row-gap: 1rem;
}
    .form-submission label {
        font-weight: 700;
    }
    .form-submission p, 
    .form-submission span {
        border-bottom: 1px solid;
        width: 100%;
    }
    .form-submission span {
        display: inline-block;
    }

@media screen and (min-width: 340px) {
    #frmCancelOrder {
        align-items: end;
        margin-top: -3.4rem;
        margin-right: unset;
    }
}

#grdOrders .ag-column-first {
    padding: 0;
    text-align: center;
}

    #grdOrders .ag-column-first table {
        text-align: initial;
    }

.grid-container {
    min-height: 200px;
    width: 100%;
}

    .grid-container .ag-header-cell.header-divider-right {
        border-right: 1px solid #d0d7de;
    }

    .grid-container .ag-cell:has(.btn-container) {
        align-content: center;
    }

    .grid-container .ag-cell.request-status-success {
        background-color: #eaf7ea;
        transition: background-color 0.3s ease;
    }

    .grid-container .ag-cell.request-status-warning {
        background-color: #fff8e1;
        transition: background-color 0.3s ease;
    }

    .grid-container .ag-cell.request-status-error {
        background-color: #fdeaea;
        transition: background-color 0.3s ease;
    }

    .grid-container .btn-container {
        column-gap: 0.25rem;
    }

        .grid-container .btn-container .btn {
            padding: 0;
            width: 1.75rem;
        }

    .grid-container .request-row-completed {
        opacity: 0.75;
    }

        .grid-container .request-row-completed .ag-cell {
            color: #6c757d;
        }

    .grid-container .request-actions-disabled {
        opacity: 0.4;
    }

.hero {
    display: flex;
    align-items: center;
    background-color: var(--stealth);
    isolation: isolate;
    overflow: hidden;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

    .hero-background {
        height: 100%;
        inset: 0;
        object-fit: cover;
        position: absolute;
        width: 100%;
        z-index: -2;
    }

    .hero::after {
        content: "";
        inset: 0;
        position: absolute;
        background-color: rgba(23, 36, 48, 0.6);
        z-index: -1;
    }

    .hero-content {
        align-items: center;
        display: flex;
        flex-direction: column;
        margin: auto;
        max-width: var(--contentMaxWidth);
        row-gap: 2rem;
        width: 100%;
    }

    .hero-content > * {
        max-width: var(--contentMaxWidth);
        width: 100%;
        text-align: center;
    }

    .hero h1 img {
        width: fit-content;
    }

    .hero h1 {
        font-size: 3.1rem;
        color: var(--white);
        margin: 0;
    }

    .hero a.btn {
        font-size: 1.25rem;
    }

    .hero + .main {
        padding-top: 0;
    }

    .hero + .main article:not(:first-child) {
        border-top: 2px solid;
    }

    .hero + .main article .row {
        margin: 1rem 0;
    }

.info-box {
    display: flex;
    flex-direction: column;
    background-color: var(--grayLight);
    margin-bottom: 1rem;
    padding: 1rem;
    row-gap: 0.75rem;
    font-size: 1.2rem;
    text-align: center;
}

    .info-box h2,
    .info-box h3 {
        background-color: var(--gray);
        color: var(--grayDark);
        font-size: 1.7rem;
        font-weight: 700;
        margin: -1rem -1rem 0 -1rem;
        padding: 0.5rem;
    }

    .info-box .btn {
        width: 100%;
    }

    .info-box p {
        margin: 0;
    }

.input-group {
    padding: 0;
}

.list-action {
    list-style: none;
    padding: 0;
}

    .list-action li {
        display: flex;
        column-gap: 0.5rem;
        margin-bottom: 0.25rem;
    }

.list-action .btn {
    padding: 0;
    height: 1.6rem;
    width: 1.75rem;
}

.list-expand {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    margin-bottom: 1rem;
}

    .list-expand details {
        border-bottom: 1px solid var(--grayDark);
        padding-bottom: 0.5rem;
    }

    .list-expand summary {
        font-weight: 700;
    }

    .list-expand details p,
    .list-expand details ul {
        font-size: 1.2rem;
    }

    .list-expand details p {
        padding-left: 1.4rem;
    }

    .list-expand details ul {
        margin-left: 1.4rem;
    }

.faq-list {
    interpolate-size: allow-keywords;
}

    .faq-list details {
        background-color: rgba(208, 215, 222, 0.18);
        border-radius: 0.6rem;
        padding: 0.8rem 1rem;
        transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    }

    .faq-list details + details {
        margin-top: 0.7rem;
    }

    .faq-list details[open] {
        background-color: rgba(208, 215, 222, 0.28);
        box-shadow: 0 0.5rem 1.2rem rgba(23, 36, 48, 0.08);
    }

    .faq-list summary {
        align-items: center;
        display: flex;
        justify-content: space-between;
        list-style: none;
        transition: color 0.2s ease;
    }

    .faq-list summary::-webkit-details-marker {
        display: none;
    }

    .faq-list summary::after {
        content: "+";
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1;
        margin-left: 1rem;
        transition: transform 0.24s ease, opacity 0.24s ease;
    }

    .faq-list details[open] summary::after {
        opacity: 0.8;
        transform: rotate(45deg);
    }

    .faq-list details::details-content {
        block-size: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            block-size 0.28s ease,
            content-visibility 0.28s ease allow-discrete,
            opacity 0.2s ease,
            padding-top 0.28s ease;
    }

    .faq-list details[open]::details-content {
        block-size: auto;
        opacity: 1;
        padding-top: 0.5rem;
    }

.list-group-title {
    background-color: var(--grayLight);
    font-weight: bold;
    text-transform: uppercase;
}

.logo-box {
    display: flex;
    flex-direction: column;
    background-color: var(--grayLight);
    padding: 1rem;
    text-align: center;
}

    .logo-box .title {
        font-size: 1.4rem;
        line-height: 1.5;
        margin: 0;
    }

.modal-content {
    border-radius: 0.5rem;
}

.modal-header,
.modal-footer {
    background-color: var(--stealth);
    color: var(--white);
}

.modal-header .btn-close {
    background-color: var(--white);
    margin-right: 0;
}

.modal-title {
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-decoration-thickness: 0.15em;
    text-underline-offset: 0.25em;
}

.modal-body {
    min-height: 10em;
}

.navbar {
    box-shadow: none;
}

    .navbar a:focus {
        outline-color: var(--white);
    }

    .navbar .dropdown-menu a {
        font-size: 1.1rem;
    }

    .navbar .nav-item.highlight {
        background-color: var(--dataBlue);
    }

        .navbar .nav-item.highlight:hover {
            background-color: var(--grayMed);
        }

        .navbar .nav-item.highlight .nav-link {
            color: var(--stealth);
        }

#pnlOrder {
    display: flex;
    flex-direction: column;
}
    #pnlOrder label {
        font-weight: 700;
    }
        #pnlOrder label + span,
        #pnlOrder label + b {
            display: block;
        }
    #pnlOrder section {
        border-bottom: 1px solid;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
        #pnlOrder section:last-of-type:has(button) {
            border-bottom: none;
        }
    #pnlOrder .SumoSelect {
        padding: 0;
    }

    #pnlOrder #tbxQty {
        max-width: 100px;
        text-align: right;
    }

.product-box {
    background-color: #f2f5f8;
    border: 1px solid #aab4d0;
    padding: 2rem;
}

    .product-box h2 {
        color: #2d478b;
        margin: 0;
    }

    .product-box p {
        margin: 0;
    }

    .product-box input {
        width: auto;
        max-width: 4rem;
        text-align: right;
    }

.request-status-cell {
    padding-top: 2px;
    padding-bottom: 2px;
}

.table-sm {
    line-height: 1;
}
    .table-sm th {
        background-color: var(--grayLight);
    }
    .table-sm th, 
    .table-sm td {
        padding: 0.5rem;
    }

#tblMyOrders {
    font-size: 1rem;
}


/*** UTILITIES ***/
.min-h-0 {
    min-height: 0;
}

.row-gap-1 {
    row-gap: 1rem;
}