@charset "UTF-8";

/*!
 * Bootstrap v4.6.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@import url("https://use.typekit.net/abj6ial.css");

:root {
    --primary-blue: #336666;
    --secondary-blue: #5c9e9e;
    --tertiery-blue: #b1d4d4;
    --four-blue: #b4cccc;
    --new-green: #10403B;
    --primary-gray: #b3b1b1;
    --tertiery-gray: #d1cfcf;
    --light-gray: #f0eded;
    --secondary-gray: #333;
    --primary-pink: #CC6666;
    --secondary-pink: #eb9494;
    --tertiery-pink: #f7b8b8;
    --black: #000000;
    --white: #ffffff;
    --link-primary: #CC6666;
    --link-secondary: #5c9e9e;
    --link-tertiery: #eb9494;
    --warm-beige: #f2e6d8;
    --clay: #c97b63;
    --stone: #99998c;
    --sage: #aabf99;
    --primary-green: #668866;
    --mint-green: #a8c9b9;
    --deep-green: #446644;

    --soft-gold: #e6c88b;
    --mustard: #d4aa4d;
    --wheat: #f5e9d3;

    --terracotta: #c97b63;
    --chestnut: #8b5e3c;
    --tan: #d9b99b;

    --light-grey: #f5f5f5;
    --snow: #fafafa;
    --almost-white: #fcfcfc;
    --cool-grey: #99998c;
    --charcoal: #333333;

    --burnt-orange: #cc5500;
    --salmon: #f28c6c;

    /* Purple Tones */
    --mauve: #a89ca7;
    --lavender-grey: #c4c3d0;
    --deep-plum: #5a3752;

    /* Soft Whites */
    --eggshell: #fefaf1;
    --linen: #f5f1ee;
    --pearl: #eae7dc;

    /* Muted Teals */
    --dusty-teal: #7ea8a1;
    --seafoam: #93b1a6;
    --pale-aqua: #d2ede6;

    /* Taupe / Greige */
    --greige: #b8b0a1;
    --taupe: #a89f91;
    --mushroom: #d6cdc4;
}




body {
    font-family: Raleway, Arial, sans-serif;
    color: var(--black);
    padding-top: 0;
    margin: 0;
    background-color: var(--snow);

}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.375rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.btn-sm,
.btn-group-sm>.btn {
    padding-left: 0.3rem;
    padding-top: 0.39rem;
    padding-right: 0.3rem;
    padding-bottom: 0.39rem;
    font-size: 0.875rem;
    line-height: 0.9;
    border-radius: 0.2rem;
}

.btn-primary-border {
    color: var(--primary-blue);
    background-color: var(--tertiery-blue);
    border-color: var(--tertiery-blue);
}

.btn-primary-border:hover {
    color: var(--white);
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

.btn-primary {
    color: var(--white);
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-primary:hover {
    color: var(--white);
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

.btn-primary-alt {
    color: var(--white);
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

.btn-primary-alt:hover {
    color: var(--primary-blue);
    background-color: var(--tertiery-blue);
    border-color: var(--tertiery-blue);
}

.extra-button-container {
    border-bottom: 1px solid var(--tertiery-blue);
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: left;

}

.btn-primary-search {
    color: var(--white);
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

.btn-primary-search:hover {
    color: var(--black);
    background-color: var(--tertiery-blue);
    border-color: var(--tertiery-blue);

}

.btn-secondary-nonprint {
    color: var(--white);
    background-color: var(--primary-pink);
    border-color: var(--primary-pink);
    margin-left: 5px;
}

.btn-secondary-nonprint:hover {
    color: var(--white);
    background-color: var(--secondary-pink);
    border-color: var(--secondary-pink);
}

.btn-secondary {
    color: var(--white);
    background-color: var(--secondary-pink);
    border-color: var(--secondary-pink);
}

.btn-secondary:hover {
    color: var(--primary-pink);
    background-color: var(--tertiery-pink);
    border-color: var(--tertiery-pink);
}

.page-item.active .page-link {
    z-index: 3;
    color: var(--white);
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.page-item.disabled .page-link {
    color: var(--primary-pink);
    pointer-events: none;
    cursor: auto;
    background-color: var(--white);
    border-color: var(--primary-gray);
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--primary-blue);
    background-color: var(--white);
    border: 1px solid var(--primary-gray);
}

.page-link:hover {
    z-index: 2;
    color: var(--secondary-blue);
    text-decoration: none;
    background-color: var(--primary-gray);
    border-color: var(--primary-gray);
}

.dt-buttons {
    color: var(--white);
    border-color: var(--primary-pink);
    background-color: var(--primary-pink);
}

.navbar .navbar-dark {
    background-color: var(--tertiery-gray) !important;
    position: fixed !important;
    padding-bottom: 1px;
}



.bg-primary {
    color: var(--primary-blue);
    background-image: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
}

.nav-link.active {
    color: var(--white);
}

.nav-link {
    color: var(--secondary-gray);
}

.topmenutext {
    color: var(--secondary-gray);
}

.navbar-brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    padding-left: 0.5125rem;
    margin-right: auto;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.nav-item {
    font-size: 1.25rem;
}

.jumbotron {
    margin-top: 180px;
}

.table-container {
    background-color: var(--white) !important;
    border: 2px double var(--light-grey) !important;
    border-top: 2px double var(--secondary-blue) !important;
    padding: 30px;
    margin: 0 auto 50px auto;
    width: 100%;
    max-width: 1200px;
    /* Or 960px for tighter layout */
}

.user-container {
    background-color: var(--white) !important;
    border: 2px double var(--light-grey) !important;
    border-top: 2px double var(--secondary-blue) !important;
    padding: 30px;
    margin: 0 auto 50px auto;
    width: 100%;
    max-width: 600px;
    /* Or 960px for tighter layout */
}
.table-container-warn {
    background-color: var(--white) !important;
    border: 2px double var(--primary-pink) !important;
    padding: 30px;
    margin-bottom: 50px;
}

.table {
    margin-top: 20px;
    font-weight: 400;

}

.h4-container {
    border-bottom: 1px solid var(--tertiery-blue);
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
}

.h5-container {
    background: var(--tertiery-blue);
    border-bottom: 2px solid var(--tertiery-blue);
    margin-bottom: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}

h2 {
    font-weight: 400 !important;
}

h4 {
    font-weight: 400 !important;
}

a {
    color: var(--link-primary);
    text-decoration: none;
}

th {
    font-weight: Normal;
    border-bottom: 1px solid var(--secondary-blue);
}

.detail-view-box {
    padding: 30px;
    border: 2px double var(--tertiery-pink);
}

.search-box-container {
    border-bottom: 1px solid var(--tertiery-blue);
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
}

.detail-view-container {
    border-bottom: 1px solid var(--tertiery-blue);
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: left;
}

.form-box {
    border: 2px double var(--light-grey);
    padding: 30px;
    margin-bottom: 50px;
    background-color: var(--white);
}

.fixed-banner {
    width: 100%;
    position: fixed;
    top: 30px;
    margin-top: 45px !important;
    margin-bottom: 245px !important;
    /* Adjust this based on your navbar height */
    z-index: 1020;
    background-color: var(--light-gray) !important;
    /* Ensure it sits above other content */
}

.datetime-content i {
    margin: 0 0px;
    color: var(--secondary-gray);
    /* Icon color */
}

/* Space between the date and time */
.datetime-content span {
    margin: 0 5px;
}

.grid-item {
    display: block;
    /* makes it fill the .boxuser */
    width: 100%;
    height: 100%;
    line-height: 100px;
    /* match box height */
    text-align: center;
    color: white;
    background: var(--new-green);
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


.grid-item:hover {
    background-image: linear-gradient(135deg, var(--primary-pink), var(--secondary-pink));
    color: white;
    transform: scale(1.05);
    /* Scale effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Deeper shadow on hover */
    text-decoration: none;
}

.container-home {
    background: var(--white);
    display: inline-grid;
    grid-template-columns: 200px;
    grid-gap: 50px;
    justify-content: start;
    /* Ensure grid items are centered */
    align-items: center;
    align-content: center;
    width: fit-content;
    margin: auto;
    margin-right: 40px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px double var(--light-grey);
    border-top: 2px double var(--secondary-blue) !important;
    padding: 30px;

}


.boxmenu {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 60px;
    align-content: center;
    color: white;
    border-radius: 0px;
    position: relative;
}

.title {
    grid-column: 1;
    grid-row: 1;
    width: 80px;
    height: 10px;
    justify-self: center;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid var(--tertiery-blue);
    color: black;
}

.menu1 {
    grid-column: 1;
    grid-row: 2;
}

.menu2 {
    grid-column: 1;
    grid-row: 3;
}

.menu3 {
    grid-column: 1;
    grid-row: 4;
}



.container-myaccount {
    margin-top: 100px !important;
    padding-bottom: 50px !important;
}

.narrow-form-container {
    margin-top: 200px !important;
    margin-bottom: 200px;
    max-width: 400px;
    /* adjust as desired */
    width: 100%;
    margin: 0 auto;

}

.severity-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.low {
    background-color: #fcc80a;
}

.medium {
    background-color: #FF7F0E;
}

.high {
    background-color: #bb0202;
}


.severity-high {
    border-left: 6px solid #bb0202;
    border-radius: 5px;
}

.severity-medium {
    border-left: 6px solid #FF7F0E;
    border-radius: 4px;
}

.severity-low {
    border-left: 6px solid #fcc80a;
    border-radius: 6px;
}


.source-badge {
    padding: 1px 2px;
    border-radius: 3px;
    color: white;
    font-size: 12px;
}

.source-irrigation {
    background-color: rgb(86, 174, 201);
}

.source-electric {
    background-color: rgb(184, 137, 206);
}

.source-plumbing {
    background-color: rgb(115, 182, 135);
}




.scroll-container {
    overflow-x: auto;
    max-width: 100%;
}



.container-twin {
    background: var(--white);
    display: inline-grid;
    grid-template-columns: 50px 150px 150px 150px 150px 80px 100px 100px;
    grid-gap: 10px;
    justify-content: center;
    /* Ensure grid items are centered */
    align-items: center;
    align-content: center;
    border: 2px double var(--light-grey);
    padding: 10px;
    /* Reduce padding */
    width: fit-content;
    margin: auto;
    margin-bottom: 40px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-top: 2px double var(--secondary-blue) !important;


}


.box {
    width: 150px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    align-content: center;
    color: white;
    border-radius: 0px;
    position: relative;
    cursor: pointer;
}

/* Adjust positions manually */
.farm {
    grid-column: 2;
    grid-row: 1;
    width: 80px;
    height: 40px;
    justify-self: center;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid var(--tertiery-blue);
    color: black;
}

.office {
    grid-column: 3;
    grid-row: 2;
    width: 80px;
    height: 40px;
    justify-self: center;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.storage {
    grid-column: 3;
    grid-row: 3;
    width: 110px;
    height: 60px;
    justify-self: center;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.pumps {
    grid-column: 4;
    grid-row: 3;
    width: 80px;
    height: 50px;
    justify-self: end;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.fertigation {
    grid-column: 5;
    grid-row: 3;
    width: 80px;
    height: 50px;
    justify-self: start;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.borehole {
    grid-column: 7;
    grid-row: 3;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    justify-self: center;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.d1 {
    grid-column: 7;
    grid-row: 2;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    justify-self: center;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.d2 {
    grid-column: 8;
    grid-row: 2;
    width: 60px;
    border-radius: 10px;
    justify-self: center;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.d3 {
    grid-column: 8;
    grid-row: 3;
    width: 80px;
    border-radius: 10px;
    justify-self: center;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g1 {
    grid-column: 5;
    grid-row: 4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g2 {
    grid-column: 5;
    grid-row: 5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g3 {
    grid-column: 4;
    grid-row: 4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g4 {
    grid-column: 4;
    grid-row: 5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g5 {
    grid-column: 3;
    grid-row: 4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g6 {
    grid-column: 3;
    grid-row: 5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g7 {
    grid-column: 2;
    grid-row: 4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.g8 {
    grid-column: 2;
    grid-row: 5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.fence-inside {
    grid-column: 1 / -1;
    border: 5px solid green;
    border-radius: 0px;
    padding: 20px;
    margin-top: 10px;
    width: 100%;
    /* make it expand */
    overflow: visible;
    /* allow overflow content if needed */
    box-sizing: border-box;
}

.fence-grid {
    display: grid;
    grid-template-columns: 10px 150px 150px 150px 150px 80px 100px 100px;
    grid-gap: 10px;
    justify-content: center;
    align-items: start;
    padding-left: 10px;
    /* slight extra spacing if needed */
}




.box-img {
    grid-column: 8;
    grid-row: 5;
    width: 200%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Center the image */
}

.container-tech {
    flex: 1;
    min-width: 250px;
    max-width: 100%;
}

.container-tech {
    background: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px double var(--light-grey);
    padding: 50px;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    margin-bottom: 50px;
    border-top: 2px double var(--secondary-blue) !important;
}

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1050;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

/* Modal Content */
/* Modal content box */
.modal-content {
    background-color: #fff;
    margin: 10vh auto;
    /* ⬅ Pushes it down slightly */
    padding: 0;
    border-radius: 5px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    overflow: auto;
    max-height: 80vh;
}

/* Close button */
.close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

/* Ensure modal body has some padding */
#modal-body {
    padding: 1rem;
}

/* Close Button (x) *

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

.container-problems {
    background-color: var(--white) !important;
    border: 2px double var(--tertiery-blue) !important;
    margin: 200px;
    padding: 30px;
    margin-bottom: 50px;
}



.custom-upload-wrapper {
    position: relative;
    display: inline-block;
}

.custom-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.custom-upload-label {
    background-color: var(--secondary-blue);
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
}

.custom-upload-label:hover {
    background-color: var(--primary-blue);
}


.container-dash {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem; /* reduces space between the two main boxes */
/* padding: 1rem;
  } */
.boxuser {
    width: 200px;
    height: 100px;
    margin: 10px auto;
}

.container-homeaccount {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
    margin-bottom: 200px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px double var(--tertiery-blue);
    padding: 30px;
    gap: 20px;
}

/* Stack vertically and make container fit screen on mobile */
@media (max-width: 768px) {
    .container-homeaccount {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }

    .boxuser {
        width: 90%;
        /* so it shrinks nicely on small screens */
        max-width: 300px;
    }

    .grid-item {
        height: 100px;
        /* ensure consistent height */
        line-height: 100px;
    }

}


.box-dash {
    background-color: var(--white);
    /* light gray */
    border: 1px solid #dee2e6;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);


}

#dashboard-wrapper {
    max-width: 1400px;
    margin: auto;
    padding: 1rem;
}

#quick-actions {
    margin-bottom: 1rem;
}


.dashboard-grid {
    position: relative;
    gap: 1rem;
}

.dashboard-item {
    width: 400px;
    margin-bottom: 1rem;
}

.dashboard-quick-item {
    padding-bottom: 1rem;
    width: 95%;
}

.dashboard-wrapper {
    max-width: 1300px;
    /* or whatever width matches your cards layout */
    padding: 1rem;
}

.custom-border-maint {
    border-top: 4px solid var(--secondary-blue) !important;
    border: 1px double var(--light-grey);
    border-radius: 0.3rem;
}

.custom-border-inspect {
    border-top: 2px solid var(--secondary-blue) !important;
    border: 1px double var(--light-grey);
    border-radius: 0.3rem;
}

.custom-border-inspect-urgent {
    border-top: 4px solid var(--primary-pink) !important;
    border: 1px double var(--light-grey);
    border-radius: 0.3rem;
}

.custom-border-temp {
    border-top: 4px solid var(--secondary-blue) !important;
    border: 1px double var(--light-grey);
    border-radius: 0.3rem;
}

.custom-border-rest {
    border-top: 2px double var(--secondary-blue) !important;
    border: 1px double var(--light-grey);
    border-radius: 0.1rem;
}

.custom-border-quick {
    border-top: 2px double var(--tertiery-blue) !important;
    border: 1px double var(--light-grey);
    border-radius: 0.3rem;
}


.custom-border-rest-small {
    border-top: 2px double var(--tertiery-blue) !important;
    border: 1px double var(--light-grey);
    border-radius: 0.1rem;
}

.card-no-border {
    border-top: 2px double var(--tertiery-blue) !important;
    border: 1px solid var(--light-grey);
    border-radius: 0.1rem;

}


table.dataTable,
.dataTables_wrapper,
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate,
.dataTables_wrapper .dt-buttons .btn {
    font-size: 1rem !important;
}

/* Export buttons */
.dataTables_wrapper .dt-buttons .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 1rem !important;
}

/* Fix pagination button size */
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
    font-size: 0.9rem !important;
    padding: 0.15rem 0.4rem !important;
    min-width: unset !important;
    height: auto !important;
    line-height: 1 !important;
    border-radius: 0.2rem !important;
}

/* Fix spacing between pagination buttons */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-top: 0.5rem;
    gap: 2px;
}

/* Change background color of selected items */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--secondary-pink) !important;
    /* Custom background */
    border-color: var(--secondary-pink) !important;
    /* Optional: tweak border color */
    color: white !important;
    /* Text color */
    font-size: 0.95rem;
    /* Adjust text size */
}

/* Enlarge the X (remove icon) */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    font-size: 1rem;
    color: white !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffdddd !important;
    background-color: #992222;
}

/* Optional: make the select box height more comfortable */
.select2-container .select2-selection--multiple {
    min-height: 48px;
    padding: 4px 6px;
}

/* Target the clear (x) button at the end */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    font-size: 1.25rem !important;
    /* Make it bigger */
    color: var(--primary-blue) !important;
    /* Custom color */
    margin-top: 0 !important;
}

/* Optional: style hover */
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    color: var(--secondary-blue) !important;
}



.pdf-page-break {
    page-break-before: always;
    break-before: page;
}

@media print {
    .no-print {
        display: none !important;
    }
}

#reportingTabs .nav-link {
    font-size: 1rem;
    border-radius: 0 !important;
}

#reportingTabs .nav-link.active {
    border-top: 3px solid var(--secondary-blue);

}


/* Centered overlay (same as before) */
#loading-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.85);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.spinner {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.cube1,
.cube2 {
    background-color: var(--primary-blue);
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube1 {
    background-color: var(--primary-pink);
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
    }

    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
    }

    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
    }

    100% {
        -webkit-transform: rotate(-360deg)
    }
}

@keyframes sk-cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }

    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

#loading-overlay p {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #333;
}


.alert {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-weight: bold;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-error,
.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}


/* Style the dropdown menu */
.dropdown-menu {
    background-color: var(--secondary-blue);
    border-radius: 1px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
}

/* Style the dropdown items */
.dropdown-item {
    padding: 0.5rem 1.5rem;
    color: var(--snow);
    transition: background-color 0.2s ease;
}

input[type="checkbox"][name$="-DELETE"] {
    display: none;
}

.svg-container {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;

    max-width: 1000px;
    margin: auto;
    width: 100%;
    overflow: auto;
}


#sidebar {
    width: 250px;
    height: 100vh;
    transition: all 0.3s;
    background: var(--new-green) !important;
    overflow-y: auto;
    /* enable scroll */
    position: fixed;
    z-index: 1020;
}

#sidebar.collapsed {
    width: 70px;
}

#sidebar.collapsed #full-logo {
    display: none;
}

#sidebar.collapsed #collapsed-logo {
    display: block !important;
}

/* Prevent d-none from hiding initially */
#collapsed-logo {
    max-width: 80px !important;
    height: auto !important;
    display: none;
    margin: auto;
}

#sidebar.collapsed .nav-link small {
    display: none !important;
}

#sidebar:not(.collapsed) .nav-link small {
    display: inline-block;
}

#sidebar.collapsed .nav-link {
    padding: 0.5rem 0.25rem;
    font-size: 0.85rem;
    text-align: center;
}

.topbar {
    background-color: var(--light-gray) !important;

}


#datetime-bar {
    font-size: 0.95rem;
    white-space: nowrap;
}

#page-content-wrapper {
    margin-left: 220px;
    /* match sidebar width */
}

@media (max-width: 768px) {
  #page-content-wrapper {
    margin-left: 0 !important;
  }
}
@media (max-width: 768px) {
  body,
  #wrapper,
  #page-content-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}


#sidebar.collapsed+#page-content-wrapper {
    margin-left: 70px;
}


.box-dash {
    background-color: white;
    padding: 1rem;
    border-radius: 0.3rem;
}


#sidebar .dropdown-toggle::after {
    display: none;
    /* remove default arrow */
}

#sidebar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    padding-left: 1rem;
    background-color: var(--primary-blue);
    border: none;
}

#sidebar .dropdown-menu .dropdown-item {
    font-size: 0.85rem;
    padding: 0.25rem 1rem;
    color: white;
}

#sidebar .dropdown-menu .dropdown-item:hover {
    background-color: var(--tertiery-blue);
}


#sidebar .collapse .nav-link {
    font-size: 0.85rem;
    padding: 0.25rem 1rem;
    text-align: left;
}

#sidebar .collapse {
    background-color: transparent;
}

#sidebar.collapsed .collapse {
    display: none !important;
}


/* Only show submenu when expanded */
#sidebar.collapsed .forms-submenu {
  display: none !important;
}

/* Override Bootstrap d-none in expanded state */
#sidebar:not(.collapsed) .forms-submenu.d-none {
  display: none !important;
}

#sidebar:not(.collapsed) .forms-submenu {
  display: block;
}

#sidebar .forms-submenu {
  background-color: rgba(255, 255, 255, 0.1); /* subtle transparent white background */
  padding: 0.5rem 0;
  border-radius: 0.25rem;
}

/* Style each submenu link */
#sidebar .forms-submenu .nav-link {
  font-size: 0.9rem;         /* smaller text */
  padding: 0.25rem 1rem;       /* tighter spacing */
  color: #f0f0f0;              /* light text */
}

/* Optional: Change background on hover */
#sidebar .forms-submenu .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2); /* hover effect */
  color: #ffffff;
  border-radius: 0.25rem;
}

.breadcrumb {
  --bs-breadcrumb-divider: '>';
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.1); /* light highlight on dark bg */
  color: var(--secondary-pink) !important; /* cyan or your highlight color */
  position: relative;
  border-radius: 0.2rem;
}

.nav-link.active i,
.nav-link.active small {
  color: var(--secondary-pink) !important; /* match the icon and text color */
}

.nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 4px;
  background-color: var(--secondary-pink); /* bar color */
  border-radius: 0 4px 4px 0;
}

    .st0, .st4, .st5 {
    filter: url(#dropShadow);
  }

  .modal-backdrop {
  z-index: 1050 !important;
}
.modal {
  z-index: 1060 !important;
}



#mobile-menu-button {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1300;
  background-color: var(--new-green);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 1.2rem;
}

/* Show the button only on mobile */
@media (max-width: 768px) {
  #mobile-menu-button {
    display: block;
  }
}

/* Force hide on desktop in case JavaScript or other styles accidentally override it */
@media (min-width: 769px) {
  #mobile-menu-button {
    display: none !important;
  }
}


@media (max-width: 768px) {
  body,
  html,
  #wrapper,
  #page-content-wrapper,
  main.container-fluid,
  .dashboard-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  #sidebar {
    position: fixed;
    top: 0;
    left: -250px;  /* Off-screen by default */
    width: 250px;
    height: 100vh;
    background-color: var(--new-green);
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1200;
  }

  #sidebar.mobile-open {
    left: 0;  /* Slide into view when open */
  }
}





@media (max-width: 768px) {
  #datetime-bar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .topbar .container-fluid {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .breadcrumb {
    justify-content: center !important;
  }

  .topbar .d-flex.gap-2 {
    justify-content: center !important;
  }
}

#mobile-menu-button.hide-on-menu {
  display: none !important;
}

@media (max-width: 768px) {
  .container-tech {
    padding: 5px !important;
    margin: 0 !important;
  }

  .svg-container {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .svg-container svg {
    width: 100% !important;
    height: auto !important;
  }

  .box-dash {
    padding: 5px !important;
  }

  .h4-container {
    text-align: center;
    margin-bottom: 5px;
  }
}