/* Bootstrap Overrides */
        /* Prevent Outlines on buttons/input boxes etc */

        :root {
            --weee-green: #24f447;
            --weee-dark-green: #1aa131;
            --weee-darker-green: #127022;
            --weee-grey: #5a6571;
            --weee-light-grey: #bbc1c7;
        }

        .pale-green-bg {
            background-color:rgba(56,255,0,0.11);
        }

        body {
            font-family: "Open Sans", sans-serif;
        }

        footer {
            background-color: var(--weee-grey);
            color:white;
            font-size: 0.9em;
        }

        input,
        button,
        select,
        textarea,
        .btn,
        .no-shadow {
            box-shadow: none !important;
        }

        .cursor-pointer {
            cursor: pointer !important;
        }

        .btn-xsm {
            font-size: 0.75em !important;
            padding: 0.4em 0.85em !important;
        }

        .btn-weee {
            background-color: var(--weee-darker-green);
            color: white;
        }

        .btn-weee:hover {
            background-color: var(--weee-dark-green);
            color: white;
        }

        .btn-outline-weee {
            border-color: var(--weee-darker-green);
            color: var(--weee-darker-green);
        }

        .btn-outline-weee:hover {
            border-color: var(--weee-dark-green) !important;
            background-color: var(--weee-dark-green);
            color: white;
        }


        .weee-button {
            background-color: rgb(36, 50, 66);
            border-radius: 10px;
            color: whitesmoke;
            text-transform: uppercase;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            transform-origin: center;
        }

        .weee-button:hover {
            background-color: rgb(36, 50, 66);
            color: white;
            transform: translateY(-4px);
            /* moves up slightly */
            box-shadow: 0 1.5rem 1rem rgba(0, 0, 0, 0.1) !important;
        }

        .weee-button:active {
            background-color: rgb(36, 50, 66) !important;
            border-color: transparent !important;
        }


        body,
        html {
            margin: 0;
            padding: 0;
        }

        /* Standard Links */
        a {
            color: #009b4e;
        }

        a:hover {
            color: #68c396;
        }

        .feint-underline {  /*doesn't need to be an 'a'*/
            text-decoration:underline; 
            text-decoration-style:dotted;
            text-decoration-color:rgb(200,200,240);
        }

        /* Navigation */
        .navigation-wrapper {
            font-family: "Archivo", sans-serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;
            font-variation-settings:
                "wdth" 100;
        }

        .nav-link {
            color: #000;
            letter-spacing: -.02em;
            font-size: 17px;
            line-height: 17px;
        }

        

        #navbarUser .nav-link {
            text-transform: uppercase;
        }


        #navbarUser .nav-item.active .menu-title-text {
            border-bottom: 3px solid var(--weee-darker-green);
        }


        #navbarUser .nav-item .menu-title-text {
            position: relative;
            text-decoration: none;
            color: #000;
        }

        #navbarUser .nav-item .menu-title-text::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            /* adjust if needed */
            width: 100%;
            height: 3px;
            /* underline thickness */
            background: var(--weee-dark-green);
            transform-origin: left;
            /* grows from left */
            transform: scaleX(0);
            /* start invisible */
            transition: transform 0.3s ease, transform-origin 0s 0.3s;
        }

        #navbarUser .nav-item .menu-title-text:hover::after {
            transform: scaleX(1);
            transform-origin: left;
            /* keep growing from left */
            transition: transform 0.3s ease;
            /* grow to full width */
        }

        #navbarUser .nav-item.active .menu-title-text:hover::after {
            transform: scaleX(0);
            /* or just don't show it at all */
        }


        #navbarUser .nav-item .menu-title-text:not(:hover)::after {
            transform: scaleX(0);
            transform-origin: right;
            /* shrink toward the right */
            transition: transform 0.3s ease, transform-origin 0s;
        }


        /*#navbarUser .nav-item .navbar-nav .nav-link.nav-link-button {*/
        .nav-link-button {
            background: #009b4e !important;
            padding: 0.5em 2em;
            color: white;
            border-radius: 0.5em;
            transition: transform 0.2s ease-in-out;
            display: inline-block !important;
        }

        .nav-link-button:hover {
            color: white;
            transform: scaleX(1.1);
        }


        #navbarAdmin li.nav-item.active,
        #navbarAdmin li.nav-item.dropdown.active {
            font-weight: bold;
        }

        .dropdown-item.active {
            background-color: whitesmoke;
            color: black;
        }

        .hilite-on-hover:hover {
            background-color: rgba(185, 192, 186, 0.1);
        }

        .bi-box-arrow-up-right {
            display: inline-block;
            font-size: 80%;
            color: #ddd;
            padding-left: 0.25em;
        }

        .bi-info-circle {
            color: #bbf;
            cursor: help;
        }

        .bi-info-circle:hover {
            color: darkblue;
        }

        .date-input {
            width: 8em;
        }

        .popover ul {
            margin-left: 0;
            padding-left: 0;
            list-style-position: inside;
        }

        .alert-weee {
            background-color: rgba(35, 49, 66, 0.75);
            color: var(--weee-green);
        }

        a.alert-link-weee {
            text-decoration: none !important;
            display: block;
            color: var(--weee-green);
        }

        a.alert-link-weee .alert:hover {
            background-color: rgba(35, 49, 66, 0.9);
            /*color: darkgreen !important;*/
        }

        a.subtle-link,
        .clickable {
            text-decoration: underline;
            text-decoration-style: dotted !important;
            color: #444;
            cursor: pointer;
        }

        a.subtle-link:hover,
        .clickable:hover {
            text-decoration-style: dashed;
            color: #000;
        }


        .admin-footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            border-top: 1px solid #bbb;
            opacity: 85%;
        }

        .admin-footer a {
            text-decoration: none;
            font-weight: 600;
            color: #222;
        }

        .admin-footer a:hover {
            color: darkgreen;
        }


        input::placeholder,
        textarea::placeholder {
            color: #ccc !important;
        }

        .loader {
            border: 16px solid #f3f3f3;
            /* Light grey */
            border-right: 16px solid var(--weee-green);
            border-left: 16px solid var(--weee-green);
            border-top: 16px solid var(--weee-grey);
            border-bottom: 16px solid var(--weee-grey);

            border-radius: 50%;
            width: 125px;
            height: 125px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

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

        /* Form Validation */
        .invalid-data {
            border-color: red !important;
            border-radius: 0.375rem;
            border-width: 1px;
            border-style: solid;
        }

        span.invalid-data {
            color: red;
        }

        div.invalid-data {
            padding: 0.5em;
        }