/*!
 * BASE THEME  |  v.09
 * Revision Author – emm & sec
 * Revision Date – 10.31.25
 * © 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.
  - [Global & Base] Responsive Header Fonts
  - [Widetop & Navigation]Changed default height of pageHeader to 125px from 150px (using 'pageHeader-height' variable).
  - [Bootstrap 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.
  - [Bootstrap Overrides] 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, or a.
  - [Global & Base] Adjusted the styling of inputs inside input-groups to only apply if they are not inside a <fieldset>.
  - [Global & Base] Made changes to .form-control so that it inherits .form-control-lg height and padding - added override to apply .text-truncate.   
  - [Global & Base] MFA Support: Made changes to .form-control so that it excludes inputs inside #code on MFA code number input screens.
  - [Global & Base] Added various --opacity-* variables to help emunate rgba where appropriate.
  - [Global & Base] Fixed input:focus to properly apply box-shadow rgba conversion + changed color to --secondary.
  - [Global & Base] Where applicable, for input-groups that have a prepend, changed border-left:0 to border-left-color: transpartent to fix input:focus states.
  - [Global & Base] Styling for input-prepend-text to emulate the same styling if the following input or select is disabled.
  - [Global & Base] Added styling for input[type="number"] to disable browser number spinners (needed for MFA code inputs).
  - [Global & Base] MFA Support: Added 'Verified' blue color variable (--verified-blue).
  - [Bootstrap Overrides] Adjusted card-header override so that IF the card-header has multiple classes it does not apply.

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

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

  [ 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 ]
        - Variables
        - Rendering
        - Layout Scaffolding
        - Utilities
        - Typography
          · Headers
          · Links
          · Paragraphs & Lists
        - Forms
          · Required
          · Inputs
          · Input Groups
          · Toggle Switches, Radio Buttons, Checkboxes
  2.  [ Bootstrap Tables ]
  3.  [ Bootstrap Overrides ]
  4.  [ Marketing Messages ]
  5.  [ Widetop & Navigation ]
  6.  [ Footer ]
  7.  [ 404 - Page Not Found ]
  8.  [ Login ]
  9.  [ Register ]
  10. [ Dashboard ]
  11. [ My Profile & My Tanks ]
  12. [ Payment ]

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

/* ==========================================================================
1. [ Global & Base ]
   (Variables · Rendering · Layout Scaffolding · Utilities · Typography · Forms)
========================================================================== */

/* [ VARIABLES ] */
:root {
          /* Destwin Variables*/
          --topBar-height: 40px;
          --mainNav-height: 60px;
          --pageHeader-height: 125px;
          --footer-height: 40px; /*24px height + 8/2 p-t & p-b*/
          --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;
}

/* [ 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);
}
@media only screen and (min-width: 768px) {
  body {margin-bottom: calc(var(--footer-height) + 1px);}
}

/* [ LAYOUT SCAFFOLDING ] */
div#outer-div {height: 100%;}
div#body-table {height: 100%;}
div#row-F {position: relative; 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%;}

/* [ UTILITIES ] */
.clearing::after {display:block; clear:both; content: "";}
.mfa-method-verified {color: var(--verified-blue);}

/* [ TYPOGRAPHY ] */
/* 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.
   1) p:last-of-type:not(:has(+ hr)):not(:has(+ input)):not(:has(+ a))
      - Selects the last <p> inside its parent, BUT ONLY if the next sibling
        is NOT an <hr>, <input>, or <a>. Useful to avoid spacing before
        buttons, form fields, or dividers.
   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)), 
ol:last-of-type, 
ul:last-of-type, 
dl:last-of-type {margin-bottom: 0 !important;}


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

/* 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;}

/* [INPUT GROUPS] */
/* 
  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);}

/* [INPUTS & SELECTS] */

/* 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;}

/* 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 */
}

/* [TOGGLE SWITCHES, RADIO BUTTONS, CHECKBOXES] */

/* 
  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);}

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



/* [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;}


@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;}
}

/* [ LOADERS, PROGRESS BARS, 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,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.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: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;}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* [PROGRESS BARS] */
.progress-bar {background-color: var(--secondary);}

/* [PROGRESS CIRCLE] */
/*from jsfiddle 29apr20*/
/*Used on 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;}
/* ======================================================================= */

/* ==========================================================================
[Bootstrap 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;}
}

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

/* ==========================================================================
[Bootstrap Overrides]
========================================================================== */

/* [CARDS] */

.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;}

/* [BUTTONS] */
.btn:focus, .btn.focus {
box-shadow: 0 0 0 0.2rem var(--primary), 0.25);
}

.btn-primary {
color: var(--white);
background-color: var(--primary);
border-color: var(--primary);
}
.btn-primary:hover {
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-secondary {
color: var(--white);
background-color: var(--secondary);
border-color: var(--secondary);
}
.btn-secondary:hover {
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 {
color: ;
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-primary {color: var(--primary); border-color: var(--primary);}
.btn-outline-primary:hover {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);
}

.btn-outline-secondary {color: var(--secondary);border-color: var(--secondary);}
.btn-outline-secondary:hover {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);}

.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);}

.badge-primary {color: var(--white); background-color: var(--primary);}
.badge-secondary {color: var(--white); background-color: var(--secondary);}

.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;}

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

/* ==========================================================================
[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/*, .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;
}

/* ==========================================================================
[Widetop & Navigation]
========================================================================== */
/* --- Top Bar --- */
#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);}

/* --- 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) }

/* --- Links --- */
#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;}

/* --- Responsive --- */
@media screen and (max-width: 991.98px) {
  #topBar>.container {padding-right:0; padding-left: 0}
}
@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; /*margin:0 auto;*/}
  #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;}
}


/* --- Widetop --- */
/* =========================

CONFIGURATION | built in widetop | _true_
-- Enable built in widetop instead of needing a document. Overrides usage of 'logo_in_navbar'

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

/* [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;}

.navbar button.navbar-toggler:focus {outline: inherit;}
nav.navbar.navbar-expand-lg.navbar-light {background-color: var(--white);}
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; 
}
a.navbar-brand {transition: 0.8s ease-in-out; width: 25%;}
  @media screen and (max-width:991px){a.navbar-brand {width: 50%;}}
#logo img {max-width: 100%;}
img#logo, img#logoImg {
    -webkit-transition: all .300s;
    -moz-transition: all .300s;
    -o-transition: all .300s;
    transition: all .300s;
    transition: 0.8s ease-in-out;
}

/* --- Main Navigation --- */
/* =========================

ELEMENT | widetopmenu

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

/*#mainNavbar .navbar-nav .nav-link {color: var(--dark)}
#mainNavbar .navbar-nav .nav-link:hover {color: var(--dark)}*/
#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;}
.dropdown-item.active, .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; }


@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);}

}



/* ==========================================================================
[Footer]
========================================================================== */

footer {
 background: var(--secondary);
 color: var(--white);
 min-height: 40px;
 position: absolute;
 bottom: 0;
 width: 100%; }

 footer a {
    color: var(--white);
}



/* ==========================================================================
[404 - Page Not Found]
========================================================================== */
#fof h1{animation: type .5s alternate infinite;}

@keyframes type{
    from{box-shadow: inset -3px 0px 0px rgba(0, 0, 0, 0.2);}
    to{box-shadow: inset -3px 0px 0px transparent;}
}

/* ==========================================================================
[Login]
========================================================================== */
table#site-status-table {width: 100%;}
.form-body.card {border-top-left-radius: 0; border-top-right-radius: 0;}
  @media screen and (min-width:768px) {.form-body.card {margin-top: 30px;}}
.form-body.card .card-header {padding: 0;}
.form-body.card .card-header, .form-body.card .card-footer {border-radius: 0; background: transparent;}
.form-body.card .card-footer {border-top: none;}
.form-body.card .card-footer a, 
.form-body.card .card-footer .btn-link {padding: 0; border: 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);
}
  @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;
      }
  }

/*TABS*/
/*Login*/
.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; }

/* ==========================================================================
[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;

}

/* ==========================================================================
[Dashboard]
========================================================================== */
/* --- Contact Card --- */
div#contact-card {background: var(--light);}
/*div#contact-card .card-body > div:last-of-type {margin-bottom: 0px !important;}*/
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 & 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%;
}
/* --- 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;}
}


/* --- 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;}


/* --- 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;}
}

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

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

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;}

/* ==========================================================================
[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";}

/* ==========================================================================
[Payment]
========================================================================== */

div#newpayment-amount-text span.badge.badge-primary {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}