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

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

  [ VERSION NOTES ]

  - Over wrote .progress-bar to .progress-bar-circle to match jS chart on price plans page (lines: 162, 170, 179).
    Note from mpl: "rename all instances of "progress-bar" to be "progress-bar-circle" to avoid confusion with regular horizontal progress bars".
  - .progress-bar default color changed from --primary to --secondary
  - .progress-bar-cirle to inehrit --secondary !important overriding default .border-success (confrimed with mpl, not dynamic and does not change based on level %)

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

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

  [TABLE OF CONTENTS]

  1.  [Variables]
  2.  [Layout & Global]
  3.  [Bootstrap Tables]
  4.  [Bootstrap Overrides]
  5.  [Marketing Messages]
  6.  [Widetop & Navigation]
  7.  [Footer]
  8.  [404 - Page Not Found]
  9.  [Login]
  10. [Register]
  11. [Dashboard]
  12. [My Profile/Manage Account & Tanks]

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

/* ==========================================================================
[Variables]
========================================================================== */

:root {
          /* Destwin Variables*/
          --topBar-height: 40px;
          --mainNav-height: 60px;
          --pageHeader-height: 150px;
          --footer-height: 40px; /*24px height + 8/2 p-t & p-b*/
            --footer-child-height: 24px;
          --gray-light: rgba(0,0,0,.1);
          --black: #000000;

          /* Bootstrap 4 Color Variables*/
          --blue:#007bff;
          --indigo:#6610f2;
          --purple:#6f42c1;
          --pink:#e83e8c;
          --red:#dc3545;
          --orange:#fd7e14;
          --yellow:#ffc107;
          --green:#28a745;
          --teal:#20c997;
          --cyan:#17a2b8;
          --white:#fff;
          --gray:#6c757d;
          --gray-dark:#343a40;
          --primary:#007bff;
          --secondary:#6c757d;
          --success:#28a745;
          --info:#17a2b8;
          --warning:#ffc107;
          --danger:#dc3545;
          --light:#f8f9fa;
          --dark:#343a40;
}
/* ======================================================================= */

/* ==========================================================================
[Layout & Global]
========================================================================== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered.

>>> antialiased - Smooth the font on the level of the pixel, as opposed to the subpixel. 
Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.

>>> grayscale - Render text with grayscale antialiasing, as opposed to the subpixel. 
Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter

*/

/*DOM*/

/*
***
* DESTWIN DOM STRUCTURE
***
  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}
  |---footer[#footer1]{footer}
***
*/
html, body {overflow-x: hidden; }/* Prevent scroll on narrow devices */
html {position: relative; min-height: 100%;}
body {overscroll-behavior-y: none; min-height: 100% !important; height: inherit; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}


body { 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);}}

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%;}
.clearing::after {display:block; clear:both; content: "";}




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

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


/* [INPUTS & SELECTS] */

div:not(.form-label-group) > label {font-weight: 700;}
.form-control, .custom-select {
font-size: 0.875rem;
height: 3.75rem;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: none;
background-color: var(--white);
color: var(--gray-dark);
font-weight: normal;
letter-spacing: normal;
vertical-align: middle;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
.form-control:focus {border-color: var(--primary); box-shadow: 0 0 0 0.2rem var(--primary), 0.25);}
.input-group > .form-control:not(:first-child), 
.input-group > .custom-select:not(:first-child) {border-left: 0;}
.input-group-text {text-transform: uppercase; font-weight: bold; color: var(--primary);}
.input-group-text {background: var(--white);}
/* Custom Styled Toggle Switches, Radio Buttons, and Checkboxes*/
.custom-control-input:checked~.custom-control-label::before {border-color: var(--primary); background-color: var(--primary);}


/* [CARDS] */

.card-header {font-weight: bold;}
.card-footer a, .card-footer .btn-link {color: var(--gray-dark);}
.card>.list-group-flush {border-top: 0; border-bottom: 0;}

/* [PAGE HEADERS] */
div#pageHeader {overflow: hidden; position: relative; background: var(--primary); max-width: 100%; min-height: 150px;}
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 (min-width:768px){
  div#pageHeader h1.page-title{
      margin-bottom: 0;
  }
}

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

/* ==========================================================================
[Bootstrap Tables]
========================================================================== */
/* --- Bootstrap Tables | Card-View --- */

.card-view { clear: both; padding: 0.375rem;}
.card-view .title, .card-view-title {
    display: inline-block;
    width: 50% !important;
    float: left;
}

.card-view .value, .card-view-value {
    display: inline-block;
    width: 50%;
    float: right;
    padding-left: 0.675rem;
}

/* --- Responsive --- */
@media screen and (max-width:991px) {
.card-view .title {width: 100%;}
.card-view .value {width: 100%;}
}
/* ======================================================================= */

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

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


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 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]
========================================================================== */

div#contact-card {background: var(--light);}

div#contact-card h5.card-title {
    font-size: 1.5rem;
    font-weight: 800;
}

div#contact-card h6.card-subtitle {
    font-weight: normal;
}




/* ==========================================================================
[My Profile/Manage Account & Tanks]
========================================================================== */

#linkedAccts h5.card-title, 
#linkedTanks h5.card-title {
    font-weight: 300;
    font-size: 2.75rem;
    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";}