/*!
 * BASE THEME  |  v.10.2
 * Revision Author – emm & sec
 * Revision Date – 02.02.26
 * © Copyright Destwin, LLC.
*/

/*  ==========================================================================

    [ VERSION NOTES ]

    - [Dashboard] Added custom animation for new responsive collapsing Dashboard quick actions menu.
    - [Widetop & Navigation] Remove .navbar button.navbar-toggler :focus state outline.
    - [Typography] Responsive Header Fonts
    - [Page Headers] Changed default height of pageHeader to 125px from 150px (using 'pageHeader-height' variable).
    - [Tables] Fixes to card-view data tables, Responsive stacking and styling.
    - [Dashboard] Added emulated list-group styling to Dashboard account data table.
    - [Dashboard] Forced stacking for Dashboard tank data table.
    - [Card] Card headers now inherit var(--light) to have consistent background colors by default.
    - [Dashboard] If no contact card links are showing, remove bottom margin from last div in card-body.
    - [Dashboard] h6.card-subtitle - added font-family: inherit.
    - [Dashboard] Hide quick actions parent div (#account-links-card) IF empty/IF menu is supressed.
    - [Global & Base] Adjusted the removal of margin-bottom from <p> to only apply if the <p> is not followed by an hr, input, a, button, or class "form-group".
    - [Input Group] Adjusted the styling of inputs inside input-groups to only apply if they are not inside a <fieldset>.
    - [Forms] Made changes to .form-control so that it inherits .form-control-lg height and padding - added override to apply .text-truncate.   
    - [Forms] MFA Support: Made changes to .form-control so that it excludes inputs inside #code on MFA code number input screens.
    - [Variables] Added various --opacity-* variables to help emunate rgba where appropriate.
    - [Forms] Fixed input:focus to properly apply box-shadow rgba conversion + changed color to --secondary.
    - [Input Group] Where applicable, for input-groups that have a prepend, changed border-left:0 to border-left-color: transpartent to fix input:focus states.
    - [Forms] Styling for input-prepend-text to emulate the same styling if the following input or select is disabled.
    - [MFA] MFA Support | Added styling for input[type="number"] to disable browser number spinners (needed for MFA code inputs).
    - [MFA] MFA Support | Added 'Verified' blue color variable (--verified-blue).
    - [Card] Adjusted card-header override so that IF the card-header has multiple classes it does not apply.
    - [Buttons] Fixed box-shaodw style attirbutes issues (had extra " ) " breaking the style) on various button (.btn) :focus & :hover classes.
    - [Layout] Footer | Set font-size: 80% to match topBar.
    - [Layout] Footer | Fixed and added flex-box attributes for layout enhancments.
    - [Layout] Footer | Added responsive footer order stacking for mobile.
    - [Animations] All CSS annimations (keyframes) were moved to their own section instead of the stylesheet.
    - [Animations] Change naming convention for CSS annimation for .loader (load7 => loadSpinner).
    - [Pages] 404 Page Not Found | Removed (page not found) section and #fof style attributes ('type' annimation that put a blinking cursor after the h1).
    - [Forms] Added fixes for <input> padding on .form-control for BS validation.
    - [Buttons] Fixed :focus .btn colors and eliminated :focus-visable outline for .btn-link
    - [Variables] Removed the following depreciated variables in :root (--mainNav-height).

    ==========================================================================

    [ DESTWIN DOM STRUCTURE ]

    |html
    |---head
    |---body
    |---|---div[#outer-div]{outer-div}
    |---|---|---div[#body-table]{body-table}
    |---|---|---|---div[#row-W]{site-row}
    |---|---|---|---|---div[#topBar]
    |---|---|---|---|---div[#mainNav]
    |---|---|---|---div[#row-M]{site-row main-row d-flex flex-column}
    |---|---|---|---|---div{main-column}
    |---|---|---|---|---|---div[#main-div]{main-div container my-3 mb-3}
    |---|---|---|---div[#row-F]{site-row footer-row}
    |---|---footer[#footer1]{footer}

    ==========================================================================

    [ TABLE OF CONTENTS ]

    1.  [ Global & Base ]
     1.1.   Variables
     1.2.   Animations
     1.3.   Rendering
     1.4.   Layout
     1.5.   Utilities
     1.6.   Typography
     1.7.   Helpers
     1.8.   Tables
     1.9.   Page Headers
     1.10.  Marketing Messages
     1.11.  MFA
    2.  [ Forms ]
     2.1.   Validation
     2.2.   Input & Select
     2.3.   Checks, Radio, Toggle
     2.4.   Input Group
     2.5.   Labels & Floating Labels
    3.  [ Components ]
     3.1.   Badge
     3.2.   Buttons
     3.3.   Card
     3.4.   List Group
     3.5.   Loaders & Spinners
     3.6.   Progress Bars & Circles
    4.  [ Widetop & Navigation ]
     4.1.   Top Navigation
     4.2.   Logo
     4.3.   Main Navigation
    5.  [ Pages ]
     5.1.   Login
     5.2.   Register
     5.3.   Dashboard
     5.4.   My Profile & My Tanks

========================================================================== */

/* ==========================================================================
1.  [ Global & Base ] 
========================================================================== */

/* --------------------------------------------------------------------------
1.1.    ( Variables )
-------------------------------------------------------------------------- */
        :root {
            --topBar-height: 40px;
            --pageHeader-height: 125px;
            --footer-height: 40px;
            --footer-child-height: 24px;
            --gray-light: rgba(0,0,0,.1);
            --black: #000000;
            --verified-blue: #1C9BF1;
            --opacity-0:    0;
            --opacity-15: .15;
            --opacity-25: .25;
            --opacity-50: .50;
            --opacity-75: .75;
            --opacity-1:    1;
        }

/* --------------------------------------------------------------------------
1.2.    ( Animations )
-------------------------------------------------------------------------- */
        /* --- Loading Spinner --- */
        @-webkit-keyframes loadSpinner {
            0%,
            80%,
            100% {box-shadow: 0 2.5em 0 -1.3em;}
            40% {box-shadow: 0 2.5em 0 0;}
        }
        @keyframes loadSpinner {
            0%,
            80%,
            100% {box-shadow: 0 2.5em 0 -1.3em;}
            40% {box-shadow: 0 2.5em 0 0;}
        }

        /* --- Quick Links --- */
        @keyframes fade-in {
            from {
              opacity: 0;
            }
            to {
              opacity: 1;
            }
        }

        @keyframes fade-out {
            from {
              opacity: 1;
            }
            to {
              opacity: 0;
            }
        }

/* --------------------------------------------------------------------------
1.3.    ( Rendering )
-------------------------------------------------------------------------- */
        * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
        html {position: relative; min-height: 100%;}
        body {overflow: scroll; overscroll-behavior-y: none; min-height:calc(100% - var(--footer-height)) !important; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; margin-bottom: calc(var(--footer-height) + var(--footer-child-height) + 1px);}
        /* --- Responsive --- */
        @media only screen and (min-width: 768px) {
        body {margin-bottom: calc(var(--footer-height) + 1px);}
        }

/* --------------------------------------------------------------------------
1.4.    ( Layout )
-------------------------------------------------------------------------- */
        div#outer-div {height: 100%;}
        div#body-table {height: 100%;}
        div#row-M {position: relative; height: 100%;}
        .main-column {position: relative; height: 100%;}
        div#main-div {position: relative; height: 100%;}
        div#main-div > form {position: relative; height: 100%;}
        div#row-F {position: relative; height: 100%;}
        /* --- Footer --- */
        footer {font-size: 80%; background: var(--secondary); color: var(--white); min-height: 40px; align-content: center; position: absolute; bottom: 0; width: 100%; }
        footer .row {align-items: unset !important;align-content: center;}
        footer a {color: var(--white);}
        
        /* --- Footer | Left Column --- */
        footer div#footerLeft {display: flex !important; justify-content: flex-start; height: 100%;}
        footer div#footerLeft div#copyright {align-self: center;}

        /* --- Footer | Right Column --- */
        footer ul.footer-nav {display: flex !important; align-items: center; justify-content: flex-end;}
        footer ul.footer-nav a.footer-link {padding: 0; display: flex;}

        /* If a footer-link contains an SVG, don't shrink it */
        footer a.footer-link:has(svg),
        footer a.footer-link:has(svg) * {
          font-size: initial !important;
        }

        /* --- Responsive | Footer --- */
        @media screen and (max-width: 768px) {
            footer .row {row-gap: .5rem;}
            footer .col-md-6.col-lg-6:first-child {order: 2;}
            footer .col-md-6.col-lg-6:nth-child(2) {order: 1;}
            footer div#footerLeft {justify-content: center;}
            footer ul.footer-nav {justify-content: center;}    
        }

/* --------------------------------------------------------------------------
1.5.    ( Utilities )
-------------------------------------------------------------------------- */
        .clearing::after {display:block; clear:both; content: "";}

        /* --- Affix --- */
        .affix {position: fixed; top: 0; right: 0; left: 0; z-index: 1030;}
        .affix {scroll-behavior: smooth; transition: 0.8s ease-in-out; }
        .affix-bottom {position: absolute;}

/* --------------------------------------------------------------------------
1.6.    ( Typography )
-------------------------------------------------------------------------- */
        /* --- Headers --- */
        /* Responsive Header Font-Size */
        @media (max-width: 1200px) {
        h1, .h1 {font-size: calc(1.375rem + 1.5vw);}
        h2, .h2 {font-size: calc(1.325rem + 0.9vw);}
        h3, .h3 {font-size: calc(1.3rem + 0.6vw);}
        h4, .h4 {font-size: calc(1.275rem + 0.3vw);}
        }

        /* --- Links --- */
        a, a:hover {color: var(--primary);}

        /* --- Paragraphs & Lists --- */
        /* 
        Removes margin-bottom from the final content block, while explicitly accounting for paragraphs followed by certain UI elements to avoid unnecessary spacing.
        1) p:last-of-type:not(:has(+ hr)):not(:has(+ input)):not(:has(+ a)):not(:has(+ button)):not(:has(+ .form-group))
        - Selects the last <p> inside its parent, BUT ONLY if the next sibling is NOT an <hr>, <input>, <a>, <button>, or class="form-group". 
        2) ol:last-of-type, ul:last-of-type, dl:last-of-type
        - Selects the last ordered, unordered, or definition list (no exclusions).
        */
        p:last-of-type:not(:has(+ hr)):not(:has(+ input)):not(:has(+ a)):not(:has(+ button)):not(:has(+ .form-group)), 
        ol:last-of-type, 
        ul:last-of-type, 
        dl:last-of-type {margin-bottom: 0 !important;}

/* --------------------------------------------------------------------------
1.7.    ( Helpers )
-------------------------------------------------------------------------- */    
        .bg-primary {background-color: var(--primary) !important;}
        .bg-secondary {background-color: var(--secondary) !important;}

        .border-primary {border-color: var(--primary) !important;}
        .border-secondary {border-color: var(--secondary) !important;}

        .text-primary {color: var(--primary) !important;}
        a.text-primary:hover, a.text-primary:focus {color: var(--primary) !important;}
        .text-secondary {color: var(--secondary) !important;}
        a.text-secondary:hover, a.text-secondary:focus {color: var(--secondary) !important;}

/* --------------------------------------------------------------------------
1.8.    ( Tables )
-------------------------------------------------------------------------- */
        /* --- Bootstrap Tables | Card-View (All Data Tables) --- */
        .card-view  {-ms-flex-pack: justify; justify-content: space-between; flex-direction: row;}
        .card-view-title {-ms-flex-positive: 1 !important; flex-grow: 1 !important; min-width: 50% !important;}
        .card-view-value  {-ms-flex-positive: 1 !important; flex-grow: 1 !important; padding-left: .75rem; min-width: 50%;}
        
        /* --- Responsive --- */
        @media screen and (max-width: 375px){
            .card-view {flex-direction: column !important; -ms-flex-pack: start !important; justify-content: flex-start !important; align-items: flex-start !important;}
            .card-view-title {min-width: 100% !important;}
            .card-view-value  {max-width: 100%;padding-left:0px;}
        }

/* --------------------------------------------------------------------------
1.9.    ( Page Headers )
-------------------------------------------------------------------------- */
        div#pageHeader {overflow: hidden; position: relative; background: var(--primary); max-width: 100%; min-height: var(--pageHeader-height)}
        div#pageHeader h1.page-title {color: var(--white);}
        div#pageHeader div#account-selector-card {background: transparent; border: none; }
        div#pageHeader div#account-selector-card div.card-body {padding: 0;}
        
        /* --- Responsive --- */
        @media screen and (max-width:768px){
        div#pageHeader {min-height: inherit;}
        }
        @media screen and (min-width:768px){
        div#pageHeader h1.page-title{ margin-bottom: 0;}
        }

/* --------------------------------------------------------------------------
1.10.   ( Marketing Messages )
-------------------------------------------------------------------------- */
        /* Replicates .card-body for marketing messages inside of a .card. This avoids the need to include a .card-body div in the marketing message itself. */
        div#marketingSlot > div {padding-top: 1.5rem; padding-bottom: 1.5rem; -webkit-border-radius: 0!important; border-radius: 0!important; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem;}
        /* Selects any <p> that is the last element among its siblings and removes default bottom margin */
        div#marketingSlot > div p:last-child, 
        .marketingSlot > div p:last-child {margin: 0;}

/* --------------------------------------------------------------------------
1.10.   ( MFA )
-------------------------------------------------------------------------- */
        .mfa-method-verified {color: var(--verified-blue);}

        /* --- MFA Code Input --- */
        /* For WebKit-based browsers (Chrome, Safari, Edge) */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none; /* Removes the default appearance of the spin buttons */
        margin: 0; /* Ensures no extra margin is added */
        }
        /* For Mozilla Firefox */
        input[type="number"] {
        -moz-appearance: textfield; /* Makes the number input appear like a standard text field */
        }

/* ======================================================================= */

/* ==========================================================================
2.  [ Forms ] 
========================================================================== */

/* --------------------------------------------------------------------------
2.1.    ( Validation )
-------------------------------------------------------------------------- */
         /* Fixes padding on .form-control for BS validation */
        .form-control.is-valid, .was-validated .form-control:valid,
        .form-control.is-invalid, .was-validated .form-control:invalid {
        padding-right: calc(1.5em + .75rem) !important;
        }

        /* --- Required --- */
        .required_star, #required_star {margin-left: .25rem;font-size: 80%;color: var(--danger);}

/* --------------------------------------------------------------------------
2.2.    ( Input & Select )
-------------------------------------------------------------------------- */
        /* exludes inputs on MFA code number inputs */
        .form-control:not(#code .form-control-lg), .custom-select {
        color: var(--gray-dark);
        /* overrides to style as .form-control-lg */
        height: calc(1.5em + 1rem + 2px);
        padding: .5rem 1rem;
        /* overrides to style as .form-control-sm */
        font-size: .875rem;
        /* overrides to apply .text-truncate */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }
        .form-control:focus, .custom-select:focus {
        border-color: var(--secondary) !important;
        /*converts --secondary hex variable to rgb() format, allowing you to specify an alpha --opacity-* variable value */
        box-shadow: 0 0 0 .2rem rgb(from var(--secondary) r g b / var(--opacity-25));
        color: var(--gray-dark);
        }
        .form-control:focus-visible, .custom-select:focus-visible {outline: var(--secondary) auto 1px !important;}


/* --------------------------------------------------------------------------
2.3.    ( Checks, Radio, Toggle )
-------------------------------------------------------------------------- */
        /* --- Checkboxes, Radio Buttons, Toggle Switches --- */
        /* 
        Applies branded styling to custom toggle switches, radio buttons, and checkboxes
        when they are in a *checked* state.

        Selector breakdown:
        - .custom-control-input:checked
        Matches the hidden form input (used for custom checkboxes/radios/toggles)
        only when the user has selected/checked it.
        - ~ .custom-control-label::before
        Selects the visual UI element (a box, circle, or toggle thumb) that appears
        before the label and is styled using Bootstrap's custom control system.
        The sibling selector (~) links the checked input to its label.

        Styles applied when checked:
        - border-color: var(--primary)      → Sets the border to the brand’s primary color.
        - background-color: var(--primary)  → Fills the toggle/checkbox/radio with the primary color
        */
        .custom-control-input:checked~.custom-control-label::before {border-color: var(--primary); background-color: var(--primary);}

/* --------------------------------------------------------------------------
2.4.    ( Input Group )
-------------------------------------------------------------------------- */
        /* 
        Selector breakdown:
        1) .input-group:not(fieldset .input-group) > .form-control:not(:first-child)
           - Selects any .form-control directly inside an .input-group that is NOT the first child.
           - Excludes .input-group elements that are inside a <fieldset>.
        2) .input-group:not(fieldset .input-group) > .custom-select:not(:first-child)
           - Same behavior as above, but targets .custom-select elements.
        */
        .input-group:not(fieldset .input-group) > .form-control:not(:first-child),
        .input-group:not(fieldset .input-group) > .custom-select:not(:first-child) {border-left-color: transparent;}
        .input-group:not(fieldset .input-group) .input-group-text {border-right-color: transparent;}
        /* If the .input-group contains a disabled input, style the label, emulates BS :placeholder style */
        .input-group:has(input:disabled) .input-group-text {background-color: #e9ecef; color: #6c757d; opacity: 1;}
        /* 
        Styles the text inside elements with .input-group-text (typically labels or prefix/suffix elements in Bootstrap input groups).
        Effects applied:
        - text-transform: uppercase   → Forces all text to display in uppercase.
        - font-weight: bold           → Makes the text bold.
        - color: var(--primary)       → Sets the text color to the primary theme color.
        - background: var(--white)    → Ensures the background is white.
        */
        .input-group-text {text-transform: uppercase; font-weight: bold; color: var(--primary); background: var(--white);}

/* --------------------------------------------------------------------------
2.5.    ( Labels & Floating Labels )
-------------------------------------------------------------------------- */
        /* Applies .font-weight-bold to labels unless they are NOT floating labels (for BS4 & BS5)*/
        div:not(.form-label-group) > label, div:not(.form-floating) > label {font-weight: 700;}

/* ======================================================================= */

/* ==========================================================================
3.  [ Components ] 
========================================================================== */

/* --------------------------------------------------------------------------
3.1.    ( Badge )
-------------------------------------------------------------------------- */
        .badge-primary {color: var(--white); background-color: var(--primary);}
        .badge-secondary {color: var(--white); background-color: var(--secondary);}

/* --------------------------------------------------------------------------
3.2.    ( Buttons )
-------------------------------------------------------------------------- */
        /* --- Global --- */
        .btn:focus, .btn.focus {box-shadow: 0 0 0 0.2rem var(--primary), 0.25;}

        /* --- Primary --- */
        .btn-primary {color: var(--white); background-color: var(--primary); border-color: var(--primary);}
        .btn-primary:hover, 
        .btn-primary:focus, .btn-primary.focus {color: var(--white); background-color: var(--primary); border-color: var(--primary);}
        .btn-primary:focus, .btn-primary.focus {box-shadow: 0 0 0 0.2rem var(--primary), 0.5;}
        .btn-primary.disabled, .btn-primary:disabled {color: var(--white); background-color: var(--primary); border-color: var(--primary);}

        .btn-primary:not(:disabled):not(.disabled):active,
        .btn-primary:not(:disabled):not(.disabled).active,
        .show > .btn-primary.dropdown-toggle {color: var(--white); background-color: var(--primary); border-color: var(--primary);}

        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem var(--primary), 0.5;}

        .btn-outline-primary {color: var(--primary); border-color: var(--primary);}
        .btn-outline-primary:hover, 
        .btn-outline-primary:focus, .btn-outline-primary.focus {color: var(--white); background-color: var(--primary); border-color: var(--primary);}
        .btn-outline-primary:focus, .btn-outline-primary.focus {box-shadow: 0 0 0 0.2rem var(--primary), 0.5;}
        .btn-outline-primary.disabled, .btn-outline-primary:disabled {color: var(--primary);}

        .btn-outline-primary:not(:disabled):not(.disabled).active,
        .btn-outline-primary:not(:disabled):not(.disabled):active,
        .show>.btn-outline-primary.dropdown-toggle {color: var(--white); background-color: var(--primary); border-color: var(--primary);}

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus, 
        .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem var(--primary), 0.5;}

        /* --- Secondary --- */
        .btn-secondary {color: var(--white); background-color: var(--secondary); border-color: var(--secondary);}
        .btn-secondary:hover, 
        .btn-secondary:focus, .btn-secondary.focus {color: var(--white); background-color: var(--secondary); border-color: var(--secondary);}
        .btn-secondary:focus, .btn-secondary.focus {box-shadow: 0 0 0 0.2rem var(--secondary), 0.5;}
        .btn-secondary.disabled, .btn-secondary:disabled {color: var(--white); background-color: var(--secondary); border-color: var(--secondary);}

        .btn-secondary:not(:disabled):not(.disabled):active, 
        .btn-secondary:not(:disabled):not(.disabled).active,
        .show > .btn-secondary.dropdown-toggle {background-color: var(--secondary); border-color: var(--secondary);}

        .btn-secondary:not(:disabled):not(.disabled):active:focus, 
        .btn-secondary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-secondary.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem var(--secondary), 0.5;}

        .btn-outline-secondary {color: var(--secondary);border-color: var(--secondary);}
        .btn-outline-secondary:hover, 
        .btn-outline-secondary:focus, .btn-outline-secondary.focus {color: var(--white); background-color: var(--secondary); border-color: var(--secondary);}
        .btn-outline-secondary:focus, .btn-outline-secondary.focus {box-shadow: 0 0 0 0.2rem var(--secondary), 0.5;}

        .btn-outline-secondary:not(:disabled):not(.disabled):active, 
        .btn-outline-secondary:not(:disabled):not(.disabled).active,
        .show > .btn-outline-secondary.dropdown-toggle {color: var(--white); background-color: var(--secondary); border-color: var(--secondary);}

        .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, 
        .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-secondary.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem var(--secondary), 0.5;}

        .btn-link {color: var(--primary); }
        .btn-link:hover {color: var(--primary);}
        .btn-link:focus-visible {outline: none;}

/* --------------------------------------------------------------------------
3.3.    ( Card )
-------------------------------------------------------------------------- */
        .card-header {font-weight: bold;}
        .card-header:not([class*=" "]) {background-color: var(--light);}
        .card-footer a, .card-footer .btn-link {color: var(--gray-dark);}
        .card>.list-group-flush {border-top: 0; border-bottom: 0;}

/* --------------------------------------------------------------------------
3.4.    ( List Group )
-------------------------------------------------------------------------- */
        .list-group-item-action {color: var(--primary);}
        .list-group-item-action:hover, .list-group-item-action:focus {color: var(--primary);}
        .list-group-item-action:active {color: var(--primary);}

/* --------------------------------------------------------------------------
3.5.    ( Loaders & Spinners )
-------------------------------------------------------------------------- */
        /* 
          -- #loading-spinner is called via functions.js
          -- .loader is called on v4 pages ($enable_spinner in webdocs/scripts/site/site_user_records.php)
        */
        .loader, #loading-spinner {color: var(--secondary);}

        .loader {
        font-size: 10px;
        margin: 80px auto;
        position: relative;
        text-indent: -9999em;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
        }

        .loader, .loader:before, .loader:after {
        border-radius: 50%;
        width: 2.5em;
        height: 2.5em;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: loadSpinner 1.8s infinite ease-in-out;
        animation: loadSpinner 1.8s infinite ease-in-out;
        }

        .loader:before, .loader:after {content: ''; position: absolute; top: 0;}
        .loader:before {left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
        .loader:after {left: 3.5em;}

/* --------------------------------------------------------------------------
3.6.    ( Progress Bars & Circles )
-------------------------------------------------------------------------- */
        /* --- Progress Bar --- */
        .progress-bar {background-color: var(--secondary);}

        /* --- Progress Circle --- */
        /* Used on my price plans/contracts */
        .progress-circle, .progress-bar-circle {width: 150px; height: 150px; background: none; position: relative;}
        .progress-bar-circle {border-color: var(--secondary) !important;}
        .progress-circle::after {content: ""; width: 100%; height: 100%; border-radius: 50%; border: 6px solid var(--gray-light); position: absolute; top: 0; left: 0;}
        .progress-circle>span {width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1;}
        .progress-circle .progress-left {left: 0;}
        .progress-circle .progress-bar-circle {width: 100%; height: 100%; background: none; border-width: 6px; border-style: solid; position: absolute; top: 0;}
        .progress-circle .progress-left .progress-bar-circle {left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px;border-left: 0; -webkit-transform-origin: center left; transform-origin: center left;}
        .progress-circle .progress-right {right: 0;}
        .progress-circle .progress-right .progress-bar-circle {left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right;}
        .progress-circle .progress-value {position: absolute; top: 0; left: 0;}

/* ======================================================================= */

/* ==========================================================================
4.  [ Widetop & Navigation ] 
========================================================================== */

/* --------------------------------------------------------------------------
4.1.    ( Top Navigation )
-------------------------------------------------------------------------- */
        #topBar {
          background-color: var(--white);
          display: block;
          border-bottom: 1px solid;
          border-color: var(--gray-light);
          line-height: calc(var(--topBar-height) - 1px); }
        #topBar, #topBar>.container {min-height: var(--topBar-height);}

        /* --- Topbar Links --- */
        /* Applies to all links in #topBar */
        #topBar ul.topBar-links>li {padding:0; display:inline-block; position:relative;}
        #topBar ul.topBar-links>li:not(:last-child) {border-left: 0; border-right: 1px solid; border-color: var(--gray-light);}
        #topBar ul.topBar-links>li>a {padding: 0 .5rem; display: block; color: var(--gray-dark); font-weight: 500; font-size: 80%;}
        #topBar ul.topBar-links>li>a>i {margin-right:5px; filter: alpha(opacity=30); opacity:0.3;}

        /* --- Top Menu --- */
        /* Dropdown Menu */
        ul#topbartopmenu .dropdown-menu {
          margin-top: 0;
          padding: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;}
        ul#topbartopmenu .dropdown-menu a.dropdown-item {
          color: var(--dark);
          transition: color .2s ease-in-out,background-color .2s ease-in-out,
          border-color .2s ease-in-out,height 0s,line-height 0s; }
        ul#topbartopmenu .dropdown-menu .dropdown-item:active,
        ul#topbartopmenu .dropdown-menu .dropdown-item:hover {
          color: var(--dark);
          background-color: var(--light) }

        /* --- Responsive --- */
        @media screen and (max-width: 991.98px) {
            #topBar>.container {padding-right:0; padding-left: 0}
        }  
        @media only screen and (max-width: 768px) {
            #topBar {text-align:center;}
            #topBar ul.topBar-links {display:inline-block; float:none;}
            #topBar ul.topBar-links>li:last-child>a {border-right:0;}
        }
        @media screen and (min-width: 576px) {
            #topBar ul.topBar-links>li:first-child>a {padding-left: 0;}
        }

/* --------------------------------------------------------------------------
4.2.    ( Logo )
-------------------------------------------------------------------------- */
        a#logo.navbar-brand {transition: 0.8s ease-in-out; width: 25%;}
        /* --- Responsive --- */
        @media screen and (max-width:991px) {
            a#logo.navbar-brand {width: 50%;}
        }
        a#logo.navbar-brand img,
        a#logo.navbar-brand img#logo, 
        a#logo.navbar-brand img#logoImg {
          max-width: 100%;
          -webkit-transition: all .300s;
          -moz-transition: all .300s;
          -o-transition: all .300s;
          transition: all .300s;
          transition: 0.8s ease-in-out;
        }

/* --------------------------------------------------------------------------
4.2.    ( Main Navigation )
-------------------------------------------------------------------------- */
        div#mainNav {
        border-bottom: 1px solid;
        border-color: var(--gray-light);
        -moz-transition: all .800s;
        -o-transition: all .800s;
        transition: all .800s;
        transition: 0.8s ease-in-out;
        scroll-behavior: smooth; 
        }
        #mainNav nav.navbar.navbar-expand-lg.navbar-light {background-color: var(--white);}
        #mainNav nav.navbar button.navbar-toggler:focus {outline: inherit;}

        /* --- ELEMENT | widetopmenu --- */
        #mainNavbar .navbar-nav .nav-link {color: var(--gray-dark); font-size: 1rem; font-weight: 600;}
        #mainNavbar .navbar-nav .nav-link .dropdown-menu .dropdown-item {white-space: break-spaces;}

        #mainNavbar .dropdown-menu .dropdown-item.active, 
        #mainNavbar .dropdown-menu .dropdown-item:active {background-color: var(--gray);}

        #mainNavbar .dropdown-menu a, 
        #mainNavbar .dropdown-menu button {padding: .5rem 1.5rem; border-bottom: solid 1px; border-color: var(--gray-light)}

        #mainNavbar .dropdown-menu a:last-child, 
        #mainNavbar .dropdown-menu button:last-child { border-bottom: 0; }

        /* --- Responsive --- */
        @media only screen and (min-width: 991.98px)  {
            .dropdown:hover>.dropdown-menu {display: block;}
            #mainNavbar .dropdown-menu {min-width: 260px; margin-top: -1px; padding: 0;}
        }

        @media only screen and (max-width: 991.98px)  {
            a.nav-link { padding: 1rem; }
            div#mainNavbar { margin-left: -1.5rem; margin-right: -1.5rem; }
            ul#mainNavbarMenu { margin-top: 0.75rem; }
            ul#mainNavbarMenu .dropdown-menu {
            border: none;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0;
            margin: 0;
            padding: 0;
            }
            ul#mainNavbarMenu li.nav-item:not(:first-child) {border-top: 1px solid rgba(0, 0, 0, 0.1);}
            ul#mainNavbarMenu a.nav-link {padding: 1rem 2rem !important;}

            /*Menu Scroll*/
            ul#mainNavbarMenu {
            height: auto;
            max-height: calc(100vh - 393px) /*height of widetop + footer + pageheader + main-div margins*/;
            overflow-x: hidden;
            }
            ul#mainNavbarMenu::-webkit-scrollbar {width: .75rem;;background: var(--gray-light);}
            ul#mainNavbarMenu::-webkit-scrollbar-thumb {background: var(--secondary);}
        }

/* ======================================================================= */

/* ==========================================================================
5.  [ Pages ] 
========================================================================== */

/* --------------------------------------------------------------------------
5.1.    ( Login )
-------------------------------------------------------------------------- */
        table#site-status-table {width: 100%;}
        .form-body.card {border-top-left-radius: 0; border-top-right-radius: 0;}
        
        /* --- Responsive --- */
        @media screen and (min-width:768px) {
            .form-body.card {margin-top: 30px;}
        }

        .form-body.card .card-header {padding: 0;}
        .form-body.card .card-footer {border-top: none;}

        .form-body.card .card-header, 
        .form-body.card .card-footer {border-radius: 0; background: transparent;}

        .form-body.card .card-footer a, 
        .form-body.card .card-footer .btn-link {padding: 0; border: 0;}

        /* --- Login Form --- */
        .login-form .form-group:first-of-type {margin-top: 1rem;}
        .login-form input#email_check {text-align: center;vertical-align: middle; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
        .login-form input#password_check {text-align: center; vertical-align: middle; border-top-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0; }


        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center;}
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link.active {color: var(--dark); background: var(--white);}
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link:hover, 
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link:focus {color: var(--white);}
        ul.card-header-tabs.nav.nav-tabs.final-login {margin: 0 -1px 0 -1px;padding: 0;}
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link {
          padding: 20px;
          border-color: transparent;
          background: var(--primary);
          border-radius: 0px;
          margin-right: 0px;
          margin-top: -1px;
          letter-spacing: normal;
          color: var(--white);
          font-weight: 700;
        }
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link:hover {background: var(--secondary);}
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link.active, 
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link.active:focus, 
        ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link.active:hover {
          border-top: 3px solid var(--primary);
          border-left-color: var( --gray-light);
          border-right-color: var( --gray-light);
          border-bottom-color: transparent;
          margin-top: -22px;
          padding: 30px 20px;
          background: var(--white);
          color: var(--dark);
        }

        /* --- Responsive --- */
        @media only screen and (max-width: 768px) {
            ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link.active, 
            ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link.active:focus, 
            ul.card-header-tabs.nav.nav-tabs.final-login li.nav-item a.nav-link.active:hover {
                padding: 20px;
                margin-top: -1px;
            }
        }

/* --------------------------------------------------------------------------
5.2.    ( Register )
-------------------------------------------------------------------------- */
        .register-form input, .willcall-register-form input {text-align: center; vertical-align: middle;}

        .register-form div#signup-account:first-child > input#bill_account,
        .register-form div#signup-digits:first-child > input#bill_digits,
        .willcall-register-form div#signup-account:first-child > input#bill_account,
        .willcall-register-form div#signup-digits:first-child > input#bill_digits {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

        /* If 'account number' is a registration requirment, 
        changes top border of 'phone number' input to transparent. */
        .register-form div#signup-account + div#signup-digits input#bill_digits,
        .willcall-register-form div#signup-account + div#signup-digits input#bill_digits  {border-top-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0;}

        /* If 'phone number' is a registration requirment, 
        changes top border of 'email address' input to transparent. */
        .register-form div#signup-digits + div#signup-email input#bill_email,
        .willcall-register-form div#signup-digits + div#signup-email input#bill_email {border-top-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0;}

        /* If 'account number' is a registration requirment and there is no 'email address',
        changes top border of 'phone number' input to transparent. */
        .register-form div#signup-account + div#signup-digits input#bill_digits
        .willcall-register-form div#signup-account + div#signup-digits input#bill_digits {border-top-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0;}

        /* If 'account number' is a registration requirment and there is no 'phone number',
        changes top border of 'email address' input to transparent. */
        .register-form div#signup-account + div#signup-email input#bill_email,
        .willcall-register-form div#signup-account + div#signup-email input#bill_email {border-top-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0;}

        /* If 'email address' is the only registration requirment ,
        changes top border of 'Select Your City/Town' select to transparent. */
        .register-form div#signup-email + div#signup-town select#bill_city,
        .willcall-register-form div#signup-email + div#signup-town select#bill_city {border-top-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0;}

/* --------------------------------------------------------------------------
5.3.    ( Dashboard )
-------------------------------------------------------------------------- */
        /* --- Contact Card --- */
        div#contact-card {background: var(--light);}
        div#contact-card .card-body > :last-child {margin-bottom: 0px !important;}
        div#contact-card h5.card-title {font-size: 1.5rem;font-weight: bolder;}
        div#contact-card h6.card-subtitle {font-weight: normal; margin-bottom: 0 !important; font-family: inherit;}
        div#contact-card h6.card-subtitle:first-of-type { margin-top: 0 !important; }

        /* --- Bootstrap Tables | Card-View (Account Overview & Tank Overview) --- */
        div#account-data .fixed-table-container.has-card-view > .fixed-table-body table tbody tr > td,
        div#tank-data div:not(.row) .fixed-table-container.has-card-view > .fixed-table-body table tbody tr > td {padding: 0;}
        div#account-data .card-view, 
        div#tank-data div:not(.row) .card-view  {padding: .75rem 1.25rem; padding-top: 0; -ms-flex-pack: justify; justify-content: space-between; flex-direction: row;}
        div#account-data .card-view-title, 
        div#tank-data div:not(.row) .card-view-title {-ms-flex-positive: 1 !important; flex-grow: 1 !important; min-width: 50% !important;}
        div#account-data .card-view-value, 
        div#tank-data div:not(.row) .card-view-value  {-ms-flex-positive: 1 !important; flex-grow: 1 !important; padding-left: .75rem; min-width: 50%;}

        /* --- Account Data --- */
        div#account-data .card-view, div#tank-data div:not(.row) .card-view {padding: .75rem 1.25rem;}
        div#tank-data div:not(.row) .card-view:first-of-type {/* padding-top: 1.25rem; */border-top: 1px solid rgba(0,0,0,.125);}
        div#account-data .card-view:not(:last-child), div#tank-data div:not(.row) .card-view:not(:last-child) {border-bottom: 1px solid rgba(0,0,0,.125);}

        /* --- Tank Data --- */
        div#tank-data div:is(.row) .card-view {flex-direction: column !important; -ms-flex-pack: start !important; justify-content: flex-start !important; align-items: flex-start !important;}
        div#tank-data div:is(.row) .card-view-title {min-width: 100% !important;}
        div#tank-data div:is(.row) .card-view-value {max-width: 100%;padding-left:0px;}

        /* --- Responsive --- */
        @media screen and (min-width: 769px) and (max-width: 992px){
            div#account-data .card-view {flex-direction: column !important; -ms-flex-pack: start !important; justify-content: flex-start !important; align-items: flex-start !important;}
            div#account-data .card-view-title {min-width: 100% !important;}
            div#account-data .card-view-value {max-width: 100%;padding-left:0px;}
        }
        @media screen and (max-width: 576px){
            div#account-data .card-view, div#tank-data div:not(.row) .card-view {flex-direction: column !important; -ms-flex-pack: start !important; justify-content: flex-start !important; align-items: flex-start !important;}
            div#account-data .card-view-title, div#tank-data div:not(.row) .card-view-title {min-width: 100% !important;}
            div#account-data .card-view-value, div#tank-data div:not(.row) .card-view-value  {max-width: 100%;padding-left:0px;}
        }

        /* --- Tank Gauge --- */
        div#tank-data div:is(.row) .col-lg-4.col-md-12.col-sm-4.col-12.order-1.order-sm-2.order-md-1.order-lg-2.order-xl-2 { border-left: 1px solid rgba(0,0,0,.125); border-top: 1px solid rgba(0,0,0,.125);}
        /* --- Responsive --- */
        @media screen and (min-width: 769px) and (max-width: 992px){
            div#tank-data div:is(.row) .col-lg-4.col-md-12.col-sm-4.col-12.order-1.order-sm-2.order-md-1.order-lg-2.order-xl-2 { border-left: none; }
        }
        @media screen and (max-width: 576px){
            div#tank-data div:is(.row) .col-lg-4.col-md-12.col-sm-4.col-12.order-1.order-sm-2.order-md-1.order-lg-2.order-xl-2 { border-left: none;}
        }



        div#account-links-card .navbar button.navbar-toggler:focus {outline: inherit;}
        div#account-links-card .collapsing {transition: height .15s ease-in-out; animation: fade-out .35s;}
        div#account-links-card div#quickActions.collapse.show {opacity:1; height: 100%; animation: fade-in .35s;}
        /* --- Hide Quick Links Div/Menu IF empty --- */
        div#account-links-card:not(div#account-links-card:has(div)) {visibility: hidden; display: none;}

/* --------------------------------------------------------------------------
5.4.    ( My Profile & My Tanks )
-------------------------------------------------------------------------- */
        #linkedAccts h5.card-title, 
        #linkedTanks h5.card-title {
          font-weight: 500;
          font-size: 1.5rem;
          color: var(--secondary);
          word-wrap: break-word;
        }
        #linkedAccts > .list-group > .list-group-item > div > span,
        #linkedTanks > .list-group > .list-group-item > div > span {
          color: var(--gray);
        }
        #linkedAccts > .list-group > div.collapse,
        #linkedTanks > .list-group > div.collapse {
          background: var(--light);
        }
        .modal-content > .bd-highlight {
          padding-left: 1rem !important;
          padding-right: 1rem !important;
          background: var(--light);
          border-bottom: 1px solid;
          border-color: var(--gray-light);
        }

        .edit-btn, .manageTanks-btn {
          color: var(--secondary);
          text-decoration: underline dashed;
        }
        .del-area > button:before, a.unlinkAcct:before, 
        .edit-btn:before, .manageTanks-btn:before {
          display: inline-block;
          font: normal normal normal 14px/1 FontAwesome;
          font-size: inherit;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          margin-right: .25rem;
        }
        /* adds trash can icon before delete link */
        .del-area > button:before {content: "\f1f8";}
        /* adds broken chain icon before unlink acct button */
        a.unlinkAcct:before {content: "\f127";}
        /* adds edit icon before edit link */
        .edit-btn:before {content: "\f044";}
        /* adds cog wheel icon before edit link */
        .manageTanks-btn:before {content: "\f085";}