/*------------------------------------------------------------------------------
  NHMVC Application CSS
------------------------------------------------------------------------------*/


body.sidebar a.company-name {
  display: none;
}




/*
=========================
GLOBAL COLOURS END
=========================
*/

:root {

  --clr-primary-5:            #49a6e9;
  --clr-primary-10:           hsl(205, 100%, 96%);
  --clr-grey-9:               #dae2ec;
  --clr-grey-1:               hsl(209, 61%, 16%);
  --clr-grey-10:              hsl(210, 36%, 96%);
  --bg-color:                 #ffc107;


/*STANDARD COLOURS*/
  --clr-success:              #28a745;
  --clr-info:                 #17a2b8;
  --clr-secondary:            #6c757d;
  --clr-primary:              #007BFF;
  --clr-warning:              #ffc107;
  --clr-danger:               #dc3545;
  --clr-light:                #f8f9fa;
  --clr-white:                #ffffff;
  --clr-grey:                 #dadfe4;
  --clr-black:                #000000;
  --clr-charcoal:             #222222;
  --clr-yellow:               #FFEB3B;
  --clr-purple:               #9C27B0;
  --clr-orange:               #FF5722;
  --clr-card-default:         #e9ecef;


/*LIGHT COLOURS*/
  --clr-success-light:        #2dbc4e;
  --clr-info-light:           #1ab6cf;
  --clr-secondary-light:      #78828a;
  --clr-primary-light:        #1a88ff;
  --clr-warning-light:        #ffc721;
  --clr-danger-light:         #e04b59;
  --clr-grey-light:           #e9ecef;
  --clr-charcoal-light:       #212121;
  --clr-yellow-light:         #FFEE58;
  --clr-purple-light:         #AB47BC;


/*LIGHTER COLOURS*/
  --clr-success-lighter:      #34ce57;
  --clr-info-lighter:         #1fc8e3;
  --clr-secondary-lighter:    #868e96;
  --clr-primary-lighter:      #3395ff;
  --clr-warning-lighter:      #ffce3a;
  --clr-danger-lighter:       #e4606d;
  --clr-grey-lighter:         #f7f9fa;
  --clr-charcoal-lighter:     #424242;
  --clr-yellow-lighter:       #FFF176;
  --clr-purple-lighter:       #BA68C8;


/*LIGHTEST COLOURS*/
  --clr-success-lightest:     #48d368;
  --clr-info-lightest:        #63d6e8;
  --clr-secondary-lightest:   #939ba2;
  --clr-primary-lightest:     #4da3ff;
  --clr-warning-lightest:     #ffd454;
  --clr-danger-lightest:      #e77681;
  --clr-grey-lightest:        #ffffff;
  --clr-charcoal-lightest:    #616161;
  --clr-yellow-lightest:      #FFF59D;
  --clr-purple-lightest:      #CE93D8;


/*DARK COLOURS*/
  --clr-success-dark:         #23923d;
  --clr-info-dark:            #148ea1;
  --clr-secondary-dark:       #60686f;
  --clr-primary-dark:         #006fe6;
  --clr-warning-dark:         #edb100;
  --clr-danger-dark:          #d32535;
  --clr-light-dark:           #e9ecef;
  --clr-white-dark:           #fcfcfc;
  --clr-grey-dark:            #cbd2d9;
  --clr-yellow-dark:          #FDD835;
  --clr-purple-dark:          #8E24AA;


/*DARKER COLOURS*/
  --clr-success-darker:       #1e7e34;
  --clr-info-darker:          #117a8b;
  --clr-secondary-darker:     #545b62;
  --clr-primary-darker:       #0062cc;
  --clr-warning-darker:       #edb100;
  --clr-danger-darker:        #bd2130;
  --clr-light-darker:         #dae0e5;
  --clr-white-darker:         #fafafa;
  --clr-grey-darker:          #bdc6ce;
  --clr-yellow-darker:        #FBC02D;
  --clr-purple-darker:        #6A1B9A;


/*DARKEST COLOURS*/
  --clr-success-darkest:      #19692c;
  --clr-info-darkest:         #0f6674;
  --clr-secondary-darkest:    #494f54;
  --clr-primary-darkest:      #0056b3;
  --clr-warning-darkest:      #ba8b00;
  --clr-danger-darkest:       #a71d2a;
  --clr-light-darkest:        #cbd3da;
  --clr-white-darkest:        #fafafa;
  --clr-grey-darkest:         #aeb9c4;
  --clr-yellow-darkest:       #F9A825;
  --clr-purple-darkest:       #4A148C;


  --clr-morning-blue:         #81D4FA;
  --clr-evening-blue:         #3F51B5;

  --clr-spatex:               hsl(209, 61%, 25%);

/*
=========================
GLOBAL COLOURS END
=========================
*/


/*
=========================
DEFAULTS
=========================
*/

  --transition:     all 0.3s linear;
  --spacing:        0.2rem;
  --radius:         0.3rem;
  --light-shadow:   0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow:    0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width:      1170px;
  --fixed-width:    620px;


  /*Sidebar Button*/
  --duration: 1.0s;
  --size: 100%;
  --toggled-size: .75;

  --card-header-text:   15px;
  --card-body-text:     7px;
  --card-text-data:     1vw;
  --card-icon-data:     1vw;




/*
=========================
DEFAULTS END
=========================
*/


/*
=========================
CARD STANDARD COLOURS
=========================
*/

  --card-tabs:      #dadfe4;

  /*---POOL CARDS---------*/
  --pool-1:         #28a745;
  --pool-1foot:     #23923d;
  --pool-1text:     #ffffff;

  --pool-2:         #17a2b8;
  --pool-2foot:     #148ea1;
  --pool-2text:     #ffffff;

  --pool-3:         #ffc107;
  --pool-3light:    #ffe8a4;
  --pool-3foot:     #edb100;
  --pool-3text:     #494f54;

  --pool-4:         #28a745;
  --pool-4foot:     #23923d;
  --pool-4text:     #ffffff;


  --pool-card2-tab2:#148ea1;
  --pool-card3-tab2:#edb100;


  /*---PLANT CARDS--------*/
  --plant-1:        #78828a;
  --plant-1foot:    #6c757d;
  --plant-1text:    #ffffff;

  --plant-2:        #ffc107;
  --plant-2foot:    #edb100;
  --plant-2text:    #494f54;

  --plant-3:        #17a2b8;
  --plant-3foot:    #148ea1;
  --plant-3text:    #ffffff;

  --plant-4:        #78828a;
  --plant-4foot:    #6c757d;
  --plant-4text:    #ffffff;


  /*---WATER CARDS--------*/
  --water-1:        #17a2b8;
  --water-1foot:    #148ea1;
  --water-1text:    #ffffff;

  --water-2:        #78828a;
  --water-2foot:    #6c757d;
  --water-2text:    #ffffff;

  --water-3:        #28a745;
  --water-3foot:    #23923d;
  --water-3text:    #ffffff;

  --water-4:        #17a2b8;
  --water-4foot:    #148ea1;
  --water-4text:    #ffffff;


  /*---ADMIN CARDS--------*/
  --admin-1:        #17a2b8;
  --admin-1foot:    #148ea1;
  --admin-1text:    #ffffff;

  --admin-2:        #78828a;
  --admin-2foot:    #6c757d;
  --admin-2text:    #ffffff;

  --admin-3:        #28a745;
  --admin-3foot:    #23923d;
  --admin-3text:    #ffffff;

  --admin-4:        #17a2b8;
  --admin-4foot:    #148ea1;
  --admin-4text:    #ffffff;


  --gradient:       linear-gradient(90deg, 
                    hsla(154, 100%, 76%, 1) 0%, 
                    hsla(234, 100%, 83%, 1) 50%, 
                    hsla(288, 100%, 81%, 1) 100%);
  --green:          hsla(154, 100%, 76%, 1);
  --purple:         hsla(234, 100%, 83%, 1);
  --pink:           hsla(288, 100%, 81%, 1);



  --mobile-to_dolist-app-row: 9fr;  


}


[data-theme="dark"] {
    --primary-color:    #aeb9c4;
    --secondary-color:  #818cab;
    --font-color:       #e1e1ff;
    --bg-color:         #aeb9c4;
    --heading-color:    #818cab;




/*
=========================
CARD SWITCH COLOURS
=========================
*/

  /*---POOL CARDS---------*/
  --pool-1:         #28a745;
  --pool-1foot:     #1e7e34;
  --pool-1text:     #ffffff;

  --pool-2:         #28a745;
  --pool-2foot:     #1e7e34;
  --pool-2text:     #ffffff;

  --pool-3:         #28a745;
  --pool-3foot:     #1e7e34;
  --pool-3text:     #ffffff;

  --pool-4:         #28a745;
  --pool-4foot:     #1e7e34;
  --pool-4text:     #ffffff;


  /*-PLANT CARDS----------*/
  --plant-1:        #78828a;
  --plant-1foot:    #6c757d;
  --plant-1text:    #ffffff;

  --plant-2:        #78828a;
  --plant-2foot:    #6c757d;
  --plant-2text:    #ffffff;

  --plant-3:        #78828a;
  --plant-3foot:    #6c757d;
  --plant-3text:    #ffffff;

  --plant-4:        #78828a;
  --plant-4foot:    #6c757d;
  --plant-4text:    #ffffff;


  /*-WATER CARDS----------*/
  --water-1:        #17a2b8;
  --water-1foot:    #117a8b;
  --water-1text:    #ffffff;

  --water-2:        #17a2b8;
  --water-2foot:    #117a8b;
  --water-2text:    #ffffff;

  --water-3:        #17a2b8;
  --water-3foot:    #117a8b;
  --water-3text:    #ffffff;

  --water-4:        #17a2b8;
  --water-4foot:    #117a8b;
  --water-4text:    #ffffff;


 /*-ADMIN CARDS----------*/
  --admin-1:        #17a2b8;
  --admin-1foot:    #117a8b;
  --admin-1text:    #ffffff;

  --admin-2:        #17a2b8;
  --admin-2foot:    #117a8b;
  --admin-2text:    #ffffff;

  --admin-3:        #17a2b8;
  --admin-3foot:    #117a8b;
  --admin-3text:    #ffffff;

  --admin-4:        #17a2b8;
  --admin-4foot:    #117a8b;
  --admin-4text:    #ffffff;

}


/*RESIZABLE*/
@media (min-width:  1200px) {
    .resizable {
      overflow:     auto;
      resize:       horizontal;
      z-index:      2;
      min-width:    98%;
    }
}



.content-cards > .col,
.content-cards > .col-12,
.content-cards > .col-sm-6,
.content-cards > .col-lg-3 {
  position: relative;
  width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.content-cards > .col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}



/*==================================================================*/
/* Public Pages */
/*==================================================================*/

.spatex {
  background-color: var(--clr-spatex);
  margin-right: 10px;
}

.home-about {  
  border-radius: 0.5rem!important;
}
.about-img,
.header-image,
.img-fluid {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

.about-img {
    border: 0;
}
/*
.about-img[Attributes Style] {
    width: 932px;
    aspect-ratio: auto 932 / 204;
    height: 204px;
}
*/

.about-card {
  padding: 17.5px 35px;
  border-radius: 0.5rem!important;
}


.about-card .home-drpbtn {
  font-size:        1.2rem;
  transition:       transform 0.3s, font-size 0.3s;
}

.about-card .home-drpbtn:hover{
  font-size: 1.4rem;
  text-decoration: none;
}

.about-card .fa,
.home-card .fa {
  transition: .3s transform ease-in-out;
}

.about-card .collapsed .fa,
.home-card .collapsed .fa {
  transform: rotate(180deg);
}

.homeCard .card-body {
  min-height:           160px;
  max-height:           160px;
}

.public-text-card {
  margin-top: 25px;
  color:      var(--clr-secondary-darker);
  border:     none;
  text-align: center;

}

@media (max-width:  992px) {
  .public-header {
      font-size: 22px;
  }
}

@media (min-width:  993px) {
  .public-header {
      font-size: 27px;
  }
}

.public-h1 {
  color:     var(--clr-secondary-darkest);
  font-size:        50px;
}


.public-h2 {
  color:     var(--clr-secondary-darkest);
  font-size:        30px;
}

.public-h4 {
  color:            var(--clr-secondary-darkest);
  font-size:        20px;
  font-weight:      bold;
  /*margin-left:      50px;*/
}

/*.public-text h1 {
  font-size: 35px;
}*/

.public-green {
  color:                  var(--clr-success);
}

.public a:hover {
  text-decoration-color:  var(--clr-success);
}

.public-card {
  /*padding:    50px;*/
  text-align: center;
  color:      var(--clr-secondary);
  font-size:  1.1rem;

  border-radius: 0.5rem;
  /*background-color: var(--clr-success-lightest);*/

  border-color: var(--clr-grey-darker);
  border-width:    3px;
}

@media (max-width: 900px) {
  .public-card {
    padding:    10px;
  }

  .public-card ul {
    padding-left: 5px;
  }

  .public-card .li-margin {
    margin-left: 2px;
  }
}


@media (min-width: 901px) {
  .public-card {
    padding:    50px;
  }

  .public-card .li-margin {
    margin-left: 40px;
  }
}

.public-leaflet { 
  border-radius: var(--radius);
  border-color: white;
  width:          100%;
}

/*.card-header {
    font-size: 1.1rem;
    font-weight: 350;
    border-bottom: 0;
    text-align: left;
    letter-spacing: var(--spacing);*/





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


/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
    /*height: 100%;*/
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

/*.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}*/

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slide {
  text-align: center;
}



.slider:before {
    background-color: transparent!important;
}


/*@media (max-width:  768px) {
  .our-customers {
      height: 225px;
  }
}
*/


.our-customers-card {
  outline:          none;
  border:           none;
  width:            100%;
  height:           220px;
}

@media (min-width:  1800px) {
  .our-customers-card {
      height: 300px;
  }
}


@media (min-width:  2500px) {
  .our-customers-card {
      height: 350px;
  }
}


.gap {
  margin-top:     15px;
}

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






/*==================================================================*/
/* DASHBOARD GENERAL */
/*==================================================================*/

@media (max-width: 992px) {
  .label-text-left {
    text-align: left !important;
  }
}

.dashboard {
  background:       var(--clr-white);
  border-radius:    var(--radius);
  display:          grid;
  grid-template-rows: auto 1fr;
}

.space-evenly { 
  justify-content: space-evenly; 
}

/*
=====================
SVG LOADING ANIMATION
=====================
*/

.svg-loader{
  display:          flex;
  position:         relative;
  align-content:    space-around;
  justify-content:  center;
}
.loader-svg{
  position:         absolute;
  left:             0; right: 0; top: 0; bottom: 0;
  fill:             none;
  stroke-width:     5px;
  stroke-linecap:   round;
  stroke:           #17a2b8;
  opacity:          0.7;
}
.loader2-svg{
  position:         absolute;
  left:             0; right: 0; top: 0; bottom: 0;
  fill:             none;
  stroke-width:     4px;
  stroke-linecap:   round;
  stroke:           #28a745;
  opacity:          0.7;
}

.loader3-svg{
  position:         absolute;
  left:             0; right: 0; top: 0; bottom: 0;
  fill:             none;
  stroke-width:     3px;
  stroke-linecap:   round;
  stroke:           #dc3545;
  opacity:          0.7;
}
.loader-svg.bg{
  stroke-width:     8px;
  stroke:           #6c757d;
  opacity:          0.3;
}

.animate{
  stroke-dasharray: 242.6;
  animation:        fill-animation 2.5s cubic-bezier(1,1,1,1) 0s infinite;
}

@keyframes fill-animation{
  0%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 282.6;
  }
  50%{
    stroke-dasharray: 141.3;
    stroke-dashoffset: 141.3;
  }
  100%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 0;
  }
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #007bff;
  color:            #ffffff;
  cursor:           pointer;
}

/*.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #007bff;
  color:            #ffffff;
  cursor:           pointer;
}*/

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #28a745;
/*  background-color: #007bff;*/
  color:            #ffffff;
/*  font-weight: bold;*/
  cursor:           pointer;
}

.active-subtle {
  color:            var(--clr-secondary-light);
  font-size:        small;
}

.table-hover tbody tr:hover .active-subtle {
  color:            #ffffff;
}

.table-hover tbody tr .alert-text {
  color:            #dc3545;
}

.table-hover tbody tr:hover .alert-text {
  color:            #ffffff;
  font-weight:        bold;
}

/*==================================================================*/
/* TAB BUTTONS */
/*==================================================================*/


/* DEFAULT TAB BUTTONS ==========*/
/*.btn-container {
  border-radius:    var(--radius);
  border-bottom:    none;
  display:          grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  z-index:          1000;
}

.tab-btn:nth-child(1) {
  border-top-left-radius: var(--radius);
}

.tab-btn:nth-child(4) {
  border-top-right-radius: var(--radius);
}*/



nav .nav-tabs {
  border-bottom:    none;
}

/*==================================================================*/
/* Tab buttons */
/*==================================================================*/


@media (max-width:  750px) {
  .btn-container1,
  .btn-container2,
  .btn-container3,
  .btn-container4,
  .btn-container5, {
    min-width: 97vw;
    max-width: 97vw;
  }
}

.row2-tab {
  columns: 3;

}


/* IF 1 TAB BUTTONS ==========*/
.btn-container1 {
  /*border-radius:    var(--radius);*/
  display:          grid;
  grid-template-columns: 1fr;
  z-index:          1000;
}

.btn-container1 .tab-btn:nth-child(1) {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  border-top-left-radius: var(--radius);
}


/* IF 2 TAB BUTTONS ==========*/
.btn-container2 {
  display:          grid;
  grid-template-columns: 1fr 1fr;
  z-index:          1000;
}

.btn-container2 .tab-btn:nth-child(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--radius);
  border-top-left-radius: var(--radius);
  border-right-color: white;
}

.btn-container2 .tab-btn:nth-child(2) {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: white;
}


/* IF 3 TAB BUTTONS ==========*/
.btn-container3 {
  display:          grid;
  grid-template-columns: 1fr 1fr 1fr;
  z-index:          1000;
}

.btn-container3 .tab-btn:nth-child(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--radius);
  border-top-left-radius: var(--radius);
  border-right-color: white;
}

.btn-container3 .tab-btn:nth-child(2) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-right-color: white;
  border-left-color: white;
}

.btn-container3 .tab-btn:nth-child(3) {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: white;
}


/* IF 4 TAB BUTTONS ==========*/
.btn-container4 {
  display:          grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  z-index:          1000;
}

.btn-container4 .tab-btn:nth-child(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--radius);
  border-top-left-radius: var(--radius);
  border-right-color: var(--clr-grey-lighter);
}

.btn-container4 .tab-btn:nth-child(2),
.btn-container4 .tab-btn:nth-child(3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-right-color: var(--clr-grey-lighter);
  border-left-color: var(--clr-grey-lighter);
}

.btn-container4 .tab-btn:nth-child(4) {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: var(--clr-grey-lighter);
}


/* IF 5 TAB BUTTONS ==========*/
.btn-container5 {
  display:          grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  z-index:          1000;
}

.btn-container5 .tab-btn:nth-child(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--radius);
  border-top-left-radius: var(--radius);
  border-right-color: var(--clr-grey-lighter);
}

.btn-container5 .tab-btn:nth-child(2),
.btn-container5 .tab-btn:nth-child(3),
.btn-container5 .tab-btn:nth-child(4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-right-color: var(--clr-grey-lighter);
  border-left-color: var(--clr-grey-lighter);
}

.btn-container5 .tab-btn:nth-child(5) {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: var(--clr-grey-lighter);
}


@media (max-width:  900px) {
  #tabs {
    min-width: 99vw;
    max-width: 99vw;
  }
}


/*==================================================================*/
/* Row 2 - tab buttons */
/*==================================================================*/

.nav-training {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--radius);
  border-top-left-radius: var(--radius);
  border-right-color: var(--clr-grey-lighter);
}

.nav-dev {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: var(--clr-grey-lighter);
}

.nav-calcs {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: var(--clr-grey-lighter);
}

.nav-stats {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: var(--clr-grey-lighter);
}


/*==================================================================*/
/* Tab button Styles */
/*==================================================================*/

.tab-btn {
  height:           2rem;
  border:           none;
  background:       var(--clr-grey);
  color:            var(--clr-secondary-light);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      400;
  letter-spacing:   var(--spacing);
  text-align:       center;
  text-transform:   capitalize;
  overflow:         hidden;
  display:          block;
  cursor:           pointer;
  transition:       transform 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
}

@media (max-width:  900px) {
  .tab-btn {
    height:         2.8rem;
    font-size:      0.8rem;
    font-weight:    bold;
    padding:        14px 0;
    text-align:     center;
    border:         none;
    text-transform: capitalize;
    display:        block;
    background:       var(--clr-grey);
    color:            var(--clr-secondary-light);
    cursor:         pointer;
    transition:     0.5s;
    letter-spacing: var(--spacing);
  }
}


.pool.tab-btn.active {
  background:       var(--clr-success);
  color:            var(--clr-white);
}

.plant.tab-btn.active {
  background:       var(--clr-secondary);
  color:            var(--clr-white);
}

.water.tab-btn.active {
  background:       var(--clr-info);
  color:            var(--clr-white);
}

.admin.tab-btn.active {
  background:       var(--clr-warning);
  color:            var(--clr-white);
}

.calcs.tab-btn.active {
  background:       var(--clr-danger);
  color:            var(--clr-white);
}

.site.tab-btn.active {
  background:       var(--clr-secondary);
  color:            var(--clr-white);
}

.training.tab-btn.active {
  background:       var(--clr-primary);
  color:            var(--clr-white);
}

.dev.tab-btn.active {
  background:       var(--clr-danger);
  color:            var(--clr-white);
}

.stats.tab-btn.active {
  background:       var(--clr-success);
  color:            var(--clr-white);
}




.pool.tab-btn:hover:not(.active) {
  background:       var(--clr-success);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.plant.tab-btn:hover:not(.active) {
  background:       var(--clr-secondary);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.water.tab-btn:hover:not(.active) {
  background:       var(--clr-info);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.admin.tab-btn:hover:not(.active) {
  background:       var(--clr-warning);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.calcs.tab-btn:hover:not(.active) {
  background:       var(--clr-danger);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.site.tab-btn:hover:not(.active) {
  background:       var(--clr-secondary);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.training.tab-btn:hover:not(.active) {
  background:       var(--clr-primary);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.dev.tab-btn:hover:not(.active) {
  background:       var(--clr-danger);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.stats.tab-btn:hover:not(.active) {
  background:       var(--clr-success);
  color:            var(--clr-light);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.coming-soon {
  right:            50px;
}


.content-pool-test.active,
.content-plant-room.active,
.content-water-analysis.active,
.content-admin.active,
.content-calcs.active,
.content-site.active,
.content-training.active,
.content-dev.active,
.content-stats.active,
.content-pool-test.selected,
.content-plant-room.selected,
.content-water-analysis.selected,
.content-admin.selected,
.content-calcs.selected,
.content-site.selected,
.content-training.selected,
.content-dev.selected,
.content-stats.selected {
  display:          flex;
}


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


#main-header,
#main-header .btn {
  font-size:        1.6rem;
  line-height:      2rem;
  vertical-align:   baseline;
}

#main-header .btn {
  display:          inline-block;
}

#main-header,
#main-footer {
  padding-left:     1rem;
  transition:       padding-left 0.3s;
}

#main-header {
  height:           3.3rem;
  position:         sticky;
  top:              0;
  z-index:          10;
}

#main-footer {
  height:           3.3rem;
}

#main-footer {
  width:            100%;
  z-index:          12;
}


/*
=========================
SIDEBAR BUTTON
=========================
*/

button {
  outline:          none;
  background-color: transparent;
  border:           none;
}

.sidebar-button {
  background-color: transparent;
  border:           none;
  cursor:           pointer;
  display:          flex;
  padding:          0;
}
.line {
  fill:             none;
  stroke:           white;
  stroke-width:     6;
  transition:       stroke-dasharray 2000ms cubic-bezier(0.4, 0, 0.2, 1),
                    stroke-dashoffset 2000ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width:     6;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width:     6;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width:     6;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width:     6;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width:     6;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width:     6;
}


/*
=========================
HEADER COMPANY
=========================
*/

.dropdown a,
.company a {
  transition:       font-size 0.3s;
}

.dropdown a:hover,
.company a:hover {
  color:            white;
  text-decoration:  none;
  font-size:        105%;
}


/*
=========================
HEADER NOTIFICATIONS
=========================
*/

#notifications_menu_dropdown,
#changelog_menu_dropdown {
  width:            320px;
  z-index:          10;
  overflow-y:       auto;
  font-size:        0.8rem;
  background:       #343a40;
  max-height:       90vh;
  border-color:     #28a745;
}

#notifications_menu_dropdown .dropdown-item {
  color:            #ffffff;
}

#notifications_menu_dropdown .dropdown-item:hover {
  color:            #000000;
}

#notifications_menu {
 cursor:           pointer;
}


.dropbtn {
  outline:          none;
  background-color: transparent;
  border:           none;
  color:            white;
  cursor:           pointer;
  font-size:        1.5rem;
  transition:       font-size 0.3s;
}

.dropbtn:hover,
.dropbtn:focus {
  font-size:        1.6rem;
  border:           none;
  outline:          none;
}

.dropdown {
  position:         relative;
  display:          inline-block;
}

.dropdown-content {
  display:          none;
  position:         absolute;
  background:       #343a40;
  min-width:        160px;
  overflow:         auto;
  overflow-y:       scroll;
  box-shadow:       0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:          10;
}


.dropdown-content a {
  color:            #ffffff;
  font-size:        0.9rem;
  text-decoration:  none;
  display:          block;
}


.show {
  display:          block;
}


.dropbtn .badge {
  position:         absolute; /* Position the badge within the relatively positioned button */
  top:              0;
  right:            0;
  border-radius:    100px;
  background:       red;
  font-size:        10px;
  font-weight:      bold;
  color:            white;
  /*flash and keyframe animation*/
  -webkit-animation: flashbadge linear 2s infinite;
  animation: flashbadge linear 2s infinite;
}

@-webkit-keyframes flashbadge {
  0% {  color:      white;
        font-size:  12px;
        font-weight: bold; }

  10% { color:      white;
        font-size:  12px;
        font-weight: bold; }

  50% { color:      red;
        font-size:  8px; }

  90% { color:      white;
        font-size:  12px;
        font-weight: bold; }

  100% {color:      white;
        font-size:  12px;
        font-weight: bold; }
}
@keyframes flashbadge {
  0% {  color:      white;
        font-size:  12px;
        font-weight: bold; }

  10% { color:      white;
        font-size:  12px;
        font-weight: bold; }

  50% { color:      red;
        font-size:  8px; }

  90% { color:      white;
        font-size:  12px;
        font-weight: bold; }

  100% {color:      white;
        font-size:  12px;
        font-weight: bold; }
}

/*
=========================
THEME SWITCH SLIDER
=========================
*/

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display:          flex;
  align-items:      center;

  em {
    margin-left:    10px;
    font-size:      1rem;
  }
}
.theme-switch {
  display:          inline-block;
  height:           25px;
  position:         relative;
  width:            45px;
}

.theme-switch input {
  display:          none;
}

.slider {
  background-color: var(--clr-white);
  bottom:           0;
  cursor:           pointer;
  left:             0;
  position:         absolute;
  right:            0;
  top:              0;
  transition:       0.3s;
}

.theme-switch:hover .slider:before {
  background-color: var(--clr-info);

}

.slider:before {
  background-color: var(--clr-success);
  bottom:           3px;
  content: "";
  height:           19px;
  left:             4px;
  position:         absolute;
  transition:       0.3s;
  width:            18px;
}

input:checked + .slider {
  background-color: var(--clr-secondary);
}

input:checked + .slider:before {
  transform:        translateX(19px);
}

.slider.round {
  border-radius:    34px;
}

.slider.round:before {
  border-radius:    50%;
}



/*
===========================================================================================
SIDEBAR
===========================================================================================
*/

/*@media (min-height:  500px) {
  aside {
    overflow:         hidden;
  }
}*/

body {
  position:         relative;
  min-height:       100vh;
}


aside {
  overflow:         auto;
  position:         fixed;
  top:              0px;
  left:             0px;
  width:            0rem;
  height:           100%;
  transition:       width 0.3s;
  z-index:          100;
}

body.sidebar aside {
  width:            15rem;
}

aside .content {
  opacity:          0;
  width:            15rem;
  transition:       opacity 0.3s;
}

body.sidebar aside .content {
  opacity:          1;
}

aside li {
  border-radius:    var(--radius);
  transition:       background-color 0.2s, box-shadow 0.2s;
}

aside li.active {
  background-color: #28a745;
}

aside li:hover {
  border-radius:    var(--radius);
  border-color:     rgba(0, 0, 0, 0);
  background:       #007bff;
  box-shadow:       3px 3px 5px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 5px 0 rgba(255, 255, 255, 0.3);
  transform:        translateY(-1px);
}

aside li a {
  display:          block;
  padding:          0.5rem 1rem;
  color:            #f8f9fa;
  text-decoration:  none;
}

aside li a:hover {
  color:            #ffffff;
  text-decoration:  none;
}

aside li img {
  width:            2rem;
}

.user-profile .company-logo img {
  max-height:       2rem;
}

#main-header .company-logo img {
  max-height:       1.5rem;
}

aside .logo,
aside .logo:hover {
  font-size:        1.1rem;
  line-height:      3rem;
  text-decoration:  none;
}

body.sidebar #main-header {
  padding-left:     17rem;
}

#main-content {
  transition:       margin-left 0.3s;
  min-height:       calc(100vh - 6.6rem);
  background-color: #ffffff;
  padding-bottom:   4rem;
}


@media (min-width:  1500px) {

  aside {
    width:          16rem;
  }

  aside .content {
    opacity:        1;
  }

  body.sidebar aside {
    width:          0rem;
  }

  body.sidebar aside .content {
    opacity:        0;
  }

  #main-header,
  #main-footer {
    padding-left:   17rem;
  }

  #main-content {
    margin-left:    17rem;
  }


  body.sidebar #main-header,
  body.sidebar #main-footer {
    padding-left:   1rem;
  }
  body.sidebar #main-content {
    margin-left:    0rem;
  }

}



/*
===========================================================================================
FILTER (Date and Site)
===========================================================================================
*/

#form_pool,
#form_site {
  cursor:           pointer;
}

#dashboard_filter .w-100 {
  margin:           0rem;
}

#dashboard_filter select {
  text-align-last:  center;
  height:           2rem;
  font-size:        1.1rem;
  line-height:      1.7rem;
  background-color: rgb(218, 226, 236);
  -webkit-appearance:none;
}

#dashboard_filter select:hover,
#dashboard_filter .date:hover {
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}
  


.clickable {
  cursor:           pointer;
}

.fa-rotate-45 {
  transform:        rotate(45deg);
}

.fa-rotate-90 {
  transform:        rotate(90deg);
}

.fa-rotate-180 {
  transform:        rotate(180deg);
}

.company h1 a {
  color:            #28a745;
}

.brand-company .brand {
  color:            white;
  border-right-color: white;
}

.table th.buttons,
.table .buttons {
  background-color: #f4f6f9 !important;
}


@media all and (min-width: 576px) {

  .col-form-label {
    text-align:     right;
  }

}


.circle-bg {
  background-color: #ffffff;
  clip-path: circle(10px at 50% 50%);
}

.card:hover .date-range {
  background:       var(--water-4);
  color:            var(--water-4text);
}

.daterange-header {
  background:       var(--clr-grey);
  color:            var(--clr-secondary);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.3s, color 0.3s;
}


/*
=========================
TOOLTIP
=========================
*/

@media (min-width:  1500px) {

  [data-customTooltip]::before,
  [data-customTooltip]::after {
    --scale:        0;
    --arrow-size:   10px;
    --tooltip-color: var(--clr-secondary-dark);

    position:       absolute;
    top:            -0.25rem;
    left:           50%;
    transform:  translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
    transition:     350ms transform;
    transform-origin: bottom center;
  }

  [data-customTooltip]::before {
    --translate-y:  calc(-100% - var(--arrow-size));

    content:        attr(data-customTooltip);
    font-family:    Montserrat;
    color:          white;
    padding:        .3rem;
    border-radius:  .3rem;
    font-size:        12px;
    text-align:     center;
    width:          calc(max-content - 50%);
    max-width:      100%;
    background:     var(--tooltip-color);
  }

  [data-customTooltip]:hover::before,
  [data-customTooltip]:hover::after {
    --scale:        1;
    transition-delay: 750ms;
  }

  [data-customTooltip]::after {
    --translate-y:  calc(-1 * var(--arrow-size));

    content:        '';
    border:         var(--arrow-size) solid transparent;
    border-top-color: var(--tooltip-color);
    transform-origin: top center;
  }
}





/*==================================================================*/
/* CARDS GENERIC */
/*==================================================================*/


/*Draggable*/

.card-sub {
    cursor: move;
    /*border: none;*/
    /*-webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05)*/
}


/*draggable*/

.card {
  user-select:      none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select:  none; /* Internet Explorer/Edge */
}


/*.card:hover {
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}*/


.card-header {
  font-size:        1.2rem;
  line-height:      1.4rem;
  font-weight:      350;
  border-bottom:    0;
  text-align:       left;
  letter-spacing:   var(--spacing); 
  border-top-right-radius: var(--radius);
  border-top-left-radius: var(--radius);
}

.card-body-scroll {
  overflow-y:       auto;
  direction:        rtl;
  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
}

.list_direction {
  direction:        ltr;
}

.card-body-scroll .row {
  direction:        ltr;
}

.card-body-scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
border-radius:      10px;
}

.card-body-scroll::-webkit-scrollbar {
  width:            10px;
}

.card-body-scroll::-webkit-scrollbar-thumb {
border-radius:      10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
}  

.card-body-scroll::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
background-color:   #19692c;
}  


.card-tab-scroll {
  max-height:       100px;
}

.not-used {
  font-size:        1.0rem;  
}

.card-footer {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.card-tools {
  float:            right;
  margin-right:     -0.625rem;
}

.card-tools button,
.card-tools button:hover {
  color:            inherit;
}

.card-tools button.collapsed i.fa-chevron-down {
  display:          block;
}

.card-tools button.collapsed i.fa-chevron-up {
  display:          none;
}

.card-tools button:not(.collapsed) i.fa-chevron-down {
  display:          none;
}

.card-tools button:not(.collapsed) i.fa-chevron-up {
  display:          block;
}

.card-background-pad {
  padding-right:    2rem;
}

.card-background2-pad {
  padding-right:    3.5rem;
}

.card-background {
  position:         absolute;
  top:              0.2rem;
  right:            0.9rem;
  font-size:        1.9rem;
  color:            rgba(0, 0, 0, 0.25);
  transition:       font-size 0.8s, color 1.0s;
}

.sp-padding {
  overflow-x:     hidden;
  padding-right:  2px;
  padding-left:   2px;
}

@media (min-width:  576px) {

  .sp-padding {
    padding-right:  8px;
    padding-left:   8px;
  }

}



.dashboard-comments {  
  overflow:         auto;
}

.homeCard,
.dashboard-card,
.dashboard-graph,
.dashboard-task,
.dashboard-card-training,
.card-body {
  width:            100%;
  height:           100%;
}


.card,
.dashboard-graph {
  border-radius:    var(--radius) var(--radius) var(--radius) var(--radius) !important;
}

.card-header {
  border-radius:    var(--radius) var(--radius) 0 0 !important;
}


.card-footer {
  border-radius:    0 0 var(--radius) var(--radius) !important;
}

.dashboard-card,
.card-body {
  min-height:       150px;
}


.dashboard-calc {
  min-height:       400px;
}

.admin-card {
  background-color: var(--clr-grey);
}

/*.admin-card .card-header {
  opacity:          background: 75%;
}*/

.card-body {
  min-height:       100px;
}

.dashboard-card:hover .card-background {
  font-size:        4rem;
  color:            rgba(0, 0, 0, 0.05);
}

/*.card,*/
.dashboard-graph,
.dashboard-task,
.dashboard-card,
.dashboard-calc,
.dashboard-card-training,
.info-box {
  transition:       transform 0.3s, box-shadow 0.3s;
}

/*.card:hover,*/
.dashboard-graph:hover,
.dashboard-task:hover,
.dashboard-card:hover,
.dashboard-calc:hover,
.dashboard-card-training:hover,
.info-box:hover {
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
  transform:        translateY(-1px);

}


.dashboard-graph {
  border-radius:    var(--radius);
  border: 2px solid rgba(0, 0, 0, .075);
  border-top:       0 !important;
}

.dashboard-graph .card-body {
  padding: 5px 15px 10px 15px;
}

.canvas {
  min-height: 373px;
  height:     373px;
  max-height: 373px;
  max-width: 100%;
}




/*==================================================================*/
/* CARD NAV TABS */
/*==================================================================*/

.dashboard-card .nav-tabs {
  display:          table;
  width:            100%;
  table-layout:     fixed;
  line-height:      1.1rem;
  border-bottom:    none;
  font-size:        0.7rem;
  text-align:       center;
  letter-spacing:   var(--spacing);
  border-radius:    4px 4px 0 0 ;
}


.dashboard-card .nav-tabs .active {
  transform:        translateY(4px);
  font-size:        1.1rem;
  line-height:      100%;
  width:            100%;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  margin-bottom:    -1px;
  transition:       background 0.5s, color 0.5s, font-size 0.5s, line-height 0.5s;
}


#card-tabs {
  background:       #e9ecef;
}

/*POOL TAB CARD 2*/
#test-card-tab,
#controller-card-tab {
  background:       #148ea1;
  border-color:     #e9ecef;
}

.active #test-card-tab,
#test-card-body,
#test-card-foot {
  background:       #17a2b8;
  color:            white;
}

.active #controller-card-tab,
#controller-card-body,
#controller-card-foot {
  background:       #17a2b8;
  color:            white;
}

/*POOL TAB CARD 3*/
#environment-card-tab,
#ahu-card-tab {
  background:       #edb100;
  border-color:     #e9ecef;
}

.active #environment-card-tab,
#environment-card-body,
#environment-card-foot {
  background:       #ffc107;
  color:            var(--clr-secondary-darkest);
}

.active #ahu-card-tab,
#ahu-card-body,
#ahu-card-foot {
  background:       #ffc107;
  color:            var(--clr-secondary-darkest);
}


/*PLANT TAB CARD 2*/
#chemTanks-card-tab,
#chemStored-card-tab {
  background:       #edb100;
  border-color:     #e9ecef;
}

.active #chemTanks-card-tab,
#chemTanks-card-body,
#chemTanks-card-foot {
  background:       #ffc107;
  color:            var(--clr-secondary-darkest);
}

.active #chemStored-card-tab,
#chemStored-card-body,
#chemStored-card-foot {
  background:       #ffc107;
  color:            var(--clr-secondary-darkest);
}


/*PLANT TAB CARD 3*/
#filters-card-tab,
#circPumps-card-tab {
  background:       #148ea1;
  border-color:     #e9ecef;
}

.active #filters-card-tab,
#filters-card-body,
#filters-card-foot {
  background:       #17a2b8;
  color:            white;
}

.active #circPumps-card-tab,
#circPumps-card-body,
#circPumps-card-foot {
  background:       #17a2b8;
  color:            white;
}


/*WATER TAB CARD 2*/
#wbpool-card-tab,
#wbmains-card-tab {
  background:       #148ea1;
  border-color:     #e9ecef;
}

.active #wbpool-card-tab,
#wbpool-card-body,
#wbpool-card-foot {
  background:       #6c757d;
  color:            white;
}

.active #wbmains-card-tab,
#wbmains-card-body,
#wbmains-card-foot {
  background:       #6c757d;
  color:            white;
}


/*WATER TAB CARD 3*/
#wa1-card-tab,
#wa2-card-tab {
  background:       #148ea1;
  border-color:     #e9ecef;
}

.active #wa1-card-tab,
#wa1-card-body,
#wa1-card-foot {
  background:       #28a745;
  color:            white;
}

.active #wa2-card-tab,
#wa2-card-body,
#wa2-card-foot {
  background:       #28a745;
  color:            white;
}


.dashboard-graph .nav-item a {
  color:            var(--clr-secondary);
}


.dashboard-graph .nav-tabs {
  display:          table;
  width:            100%;
  table-layout:     fixed;
  line-height:      1.1rem;
  font-size:        0.7rem;
  text-align:       center;
  letter-spacing:   var(--spacing);
  border-radius:    4px 4px 0 0 ;
}

.dashboard-graph .nav-tabs {
  background:       var(--clr-grey-light);
  color:            var(--clr-secondary);
  font-weight:      350;
  border-bottom-color: var(--clr-grey);
  border-width:     3px;
}

.dashboard-graph .nav-tabs .active {
  background:       var(--clr-secondary);
  color:            var(--clr-white);
  font-size:        1rem;
}

.dashboard-graph .nav-tabs .active {
  transform:        translateY(4px);
  font-size:        1.1rem;
  line-height:      100%;
  width:            100%;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.5s, color 0.5s, font-size 0.5s, line-height 0.5s;
}

.dashboard-graph .tab-content .active {
  border-top:       4px;
  border:           var(--clr-grey);
}

.dashboard-card {
  outline:          none;
  border:           none;
  height:           175px;
}

.table-stripes tr:nth-child(even) {
  background-color: #f2f2f2;
}


.quals-card {
  width:            100%;
}


@media (min-width:  1400px) {
  .training-table-card {
    min-width:        calc(100vw - 20rem);
    max-width:        calc(100vw - 20rem);
  }

  .quals-card {
    width:            100%;
    min-width:        calc(100vw - 20rem);
    overflow-x:       auto;
  }
}


@media (max-width:  1399px) {
  .training-table-card {
    min-width:        97vw;
    max-width:        97vw;
    overflow-x:       auto;
  }

  .quals-card {
    min-width:        97vw;
    max-width:        97vw;
    overflow-x:       auto;
  }
}

.dashboard-card .tab-content .tab-pane,
.dashboard-graph .tab-content .tab-pane {
  height:           110px;
}


.dashboard-card .nav-tabs > li,
.dashboard-graph .nav-tabs > li {
  float:            none;
  display:          table-cell;
}

.dashboard-graph .nav-link .active,
.dashboard-graph .nav-item .active {
  border:           none;
}

/*==================================================================*/
/* DATA CARDS */
/*==================================================================*/

/*
=========================
POOL TAB CARDS
=========================
*/


.pool-1,
.pool-1foot {
  background:       var(--pool-1);
  color:            var(--clr-light);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .pool-1foot {
  background:       var(--pool-1foot);
  color:            var(--pool-1text);
}

.card:hover .poolgraph-1 {
  background:       var(--pool-1);
  color:            var(--pool-1text);
}

.pool-2,
.pool-2foot {
  background:       var(--pool-2);
  color:            var(--pool-2text);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .pool-2foot {
  background:       var(--pool-2foot);
  color:            var(--pool-2text);
}

.card:hover .poolgraph-2 {
  background:       var(--pool-2);
  color:            var(--pool-2text);
}

.pool-3,
.pool-3foot {
  background:       var(--pool-3);
  color:            var(--pool-3text);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .pool-3foot {
  background:       var(--pool-3foot);
  color:            var(--pool-3text);
}

.card:hover .poolgraph-3 {
  color:            var(--pool-3text);
  background:       var(--pool-3);
  opacity:          1.0;

}

.pool-4,
.pool-4foot {
  background:       var(--pool-4);
  color:            var(--pool-4text);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .pool-4foot {
  background:       var(--pool-4foot);
  color:            var(--pool-4text);
}

.card:hover .poolgraph-4 {
  background:       var(--pool-4);
  color:            var(--pool-4text);
}


.poolgraph-header {
  background:       var(--clr-grey);
  color:            var(--clr-secondary);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.3s, color 0.3s;
}


.card:hover .poolcomments {
  background:       var(--pool-1);
  color:            var(--pool-1text);
}

.poolcomments-header {
  background:       var(--clr-grey);
  color:            var(--clr-secondary);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.3s, color 0.3s;
}


/*
=========================
PLANT TAB CARDS
=========================
*/

.plant-1,
.plant-1foot {
  background:       var(--plant-1);
  color:            var(--plant-1text);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .plant-1foot {
  background:       var(--plant-1foot);
  color:            var(--plant-1text);
}

.card:hover .plantgraph-1 {
  background:       var(--plant-1);
  color:            var(--plant-1text);
}

.plant-2,
.plant-2foot {
  background:       var(--plant-2);
  color:            var(--plant-2text);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .plant-2foot {
  background:       var(--plant-2foot);
  color:            var(--plant-2text);
}

.card:hover .plantgraph-2 {
  background:       var(--plant-2);
  color:            var(--plant-2text);
}

.plant-3,
.plant-3foot {
  background:       var(--plant-3);
  color:            var(--plant-3text);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .plant-3foot {
  background:       var(--plant-3foot);
  color:            var(--plant-3text);
}

.card:hover .plantgraph-3 {
  background:       var(--plant-3);
  color:            var(--plant-3text);
}

.plant-4,
.plant-4foot {
  background:       var(--plant-4);
  color:            var(--plant-4text);
  transition:       background 0.3s, color 0.3s;
}

.card:hover > .plant-4foot {
  background:       var(--plant-4foot);
  color:            var(--plant-4text);
}

.card:hover .plantgraph-4 {
  background:       var(--plant-4);
  color:            var(--plant-4text);
}

.plantgraph-header {
  background:       var(--clr-grey);
  color:            var(--clr-secondary);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.3s, color 0.3s;
}


.card:hover .plantcomments {
  background:       var(--plant-1);
  color:            var(--plant-1text);
}

.plantcomments-header {
  background:       var(--clr-grey);
  color:            var(--clr-secondary);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.3s, color 0.3s;
}


/*
=========================
WATER TAB CARDS
=========================
*/

.water-1,
.water-1foot {
  background:       var(--water-1);
  color:            var(--water-1text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .water-1foot {
  background:       var(--water-1foot);
  color:            var(--water-1text);
}

.card:hover .watergraph-1 {
  background:       var(--water-1);
  color:            var(--water-1text);
}

.water-2,
.water-2foot {
  background:       var(--water-2);
  color:            var(--water-2text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .water-2foot {
  background:       var(--water-2foot);
  color:            var(--water-2text);
}

.card:hover .watergraph-2 {
  background:       var(--water-2);
  color:            var(--water-2text);
}

.water-3,
.water-3foot {
  background:       var(--water-3);
  color:            var(--water-3text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .water-3foot {
  background:       var(--water-3foot);
  color:            var(--water-3text);
}

.card:hover .watergraph-3 {
  background:       var(--water-3);
  color:            var(--water-3text);
}

.water-4,
.water-4foot {
  background:       var(--water-4);
  color:            var(--water-4text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .water-4foot {
  background:       var(--water-4foot);
  color:            var(--water-4text);
}

.card:hover .watergraph-4 {
  background:       var(--water-4);
  color:            var(--water-4text);
}

.watergraph-header {
  background:       var(--clr-grey);
  color:            var(--clr-secondary);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.3s, color 0.3s;
}

.water-header {
  font-size:        1.2rem;
}



/*
=========================
ADMIN TAB CARDS
=========================
*/


.admin-1,
.admin-1foot {
  background:       var(--admin-1);
  color:            var(--admin-1text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .admin-1foot {
  background:       var(--admin-1foot);
  color:            var(--admin-1text);
}

.card:hover .admingraph-1 {
  background:       var(--admin-1);
  color:            var(--admin-1text);
}

.admin-2,
.admin-2foot {
  background:       var(--admin-2);
  color:            var(--admin-2text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .admin-2foot {
  background:       var(--admin-2foot);
  color:            var(--admin-2text);
}

.card:hover .admingraph-2 {
  background:       var(--admin-2);
  color:            var(--admin-2text);
}

.admin-3,
.admin-3foot {
  background:       var(--admin-3);
  color:            var(--admin-3text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .admin-3foot {
  background:       var(--admin-3foot);
  color:            var(--admin-3text);
}

.card:hover .admingraph-3 {
  background:       var(--admin-3);
  color:            var(--admin-3text);
}

.admin-4,
.admin-4foot {
  background:       var(--admin-4);
  color:            var(--admin-4text);
  transition:       background 0.3s, color 0.3s;
  font-size:        95%;
}

.card:hover > .admin-4foot {
  background:       var(--admin-4foot);
  color:            var(--admin-4text);
}

.card:hover .admingraph-4 {
  background:       var(--admin-4);
  color:            var(--admin-4text);
}

.admingraph-header {
  background:       var(--clr-grey);
  color:            var(--clr-secondary);
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      350;
  letter-spacing:   var(--spacing);
  transition:       background 0.3s, color 0.3s;
}

.admin-header {
  font-size:        1.2rem;
}


/*
=========================
DATA ARROW
=========================
*/

.data-arrow {
  text-align:       right;
  color:            rgb(255,255,255);
  transition:       font-weight 0.3s, color 0.3s;
}

.data-arrow2 {
  font-size:        90%;
  text-align:       right;
  color:            var(--clr-light-darker);
  transition:       font-weight 0.3s, color 0.3s;
}

.card:hover .data-arrow {
  font-weight:      bolder;
}


/*
=========================
DATA THRESHOLD
=========================
*/

.data-threshold {
  text-align:       center;
  color:            rgb(235,235,235);
  transition:       font-weight 0.3s, color 0.3s;
}

.data-threshold2 {
  font-size:        90%;
  text-align:       center;
  color:            var(--clr-light-darker);
  transition:       font-weight 0.3s, color 0.3s;
}

.card:hover .data-threshold {
  text-align:       center;
  font-weight:      bolder;
  color:            rgb(255,255,255);
}

.card-data,
.card-textdata {
  font-size:        95%;
  text-align:       right;
}

.card-smiley{
  font-size:        90%;
  text-align:       right;
/*  color:            var(--clr-light-darker);*/
  transition:       font-weight 0.3s, color 0.3s;

}

.card-text {
  font-size:        95%;
  text-align:       left;
  font:             italic, bold;
}

.card-data2 {
  font-size:        95%;
  text-align:       right;
  color:            var(--clr-light-darker);
  font-style:       italic;
}

.card-text2 {
  font-size:        95%;
  text-align:       left;
  color:            var(--clr-light-darker);
  font-style:       italic;
}

.card-text3 {
  font-size:        75%;
  text-align:       right;
  color:            var(--clr-light-darker);
  font-style:       italic;
}

.card-column {
  font-size:        75%;
}


/*CARD FOOTER TEXT AND DATA*/

.card-datafooter,
.card-textdatafooter {
  font-size:        90%;
  text-align:       right;
}

.card-textfooter {
  font-size:        90%;
  text-align:       left;
  overflow:         hidden;
  white-space:      nowrap;
  text-overflow:    ellipsis;
  max-width:        350px;
}

.test-due {
  background:       rgba(0, 0, 0, 0.10);
  box-shadow:       5px 0px 0px 0 rgba(0, 0, 0, 0.10),
                    -5px 0px 0px 0 rgba(0, 0, 0, 0.10);
  border-radius:    var(--radius);
  transition:       background 0.3s, box-shadow 0.3s;
}

.card:hover .test-due {
  background:       rgba(0, 0, 0, 0.20);
  box-shadow:       5px 0px 0px 0 rgba(0, 0, 0, 0.20),
                    -5px 0px 0px 0 rgba(0, 0, 0, 0.20);
  color:            white;
}


.test-over-due {
  border-radius:    var(--radius);
  border-width:     1px;
  border-color:     #28a745;
  color:            white;
/*  transition:       background 0.3s, box-shadow 0.3s;*/
}

.card:hover .test-over-due {
  background:       rgba(255, 0, 0, 0.80);
  box-shadow:       5px 0px 0px 0 rgba(255, 0, 0, 0.80),
                    -5px 0px 0px 0 rgba(255, 0, 0, 0.80);
  color:            white;
}


/*flash and keyframe animation*/
/*.test-overdue,*/
.test-over-due {
  -webkit-animation: overdueflash linear 2.5s infinite;
  animation: overdueflash linear 2.5s infinite;
}

@-webkit-keyframes overdueflash {
  0%    { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #dc3545,
                        -5px 0px 0px 0 #dc3545;
          color:            white;
        }
  15%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #dc3545,
                        -5px 0px 0px 0 #dc3545;
          color:            white;
        }

  50%   { opacity: 1;
          background:  #28a745;
          color:       white;
          box-shadow:  5px 0px 0px 0  #28a745,
                       -5px 0px 0px 0 #28a745;
        }

  85%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #dc3545,
                        -5px 0px 0px 0 #dc3545;
          color:            white;
        }

  100%  { background:  #dc3545;
          box-shadow:  5px 0px 0px 0  #dc3545,
                       -5px 0px 0px 0 #dc3545;
        }
}

@keyframes overdueflash {
  0%    { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #dc3545,
                        -5px 0px 0px 0 #dc3545;
          color:            white;
        }
  15%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #dc3545,
                        -5px 0px 0px 0 #dc3545;
          color:            white;
        }

  50%   { opacity: 1;
          background:  #28a745;
          color:       white;
          box-shadow:  5px 0px 0px 0  #28a745,
                       -5px 0px 0px 0 #28a745;
        }

  85%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #dc3545,
                        -5px 0px 0px 0 #dc3545;
          color:            white;
        }

  100%  { background:  #dc3545;
          box-shadow:  5px 0px 0px 0  #dc3545,
                       -5px 0px 0px 0 #dc3545;
        }
}




/*flash and keyframe animation*/
/*.test-reopen,*/
.pool-reopened {
  -webkit-animation: reopenflash linear 2.5s infinite;
  animation: reopenflash linear 2.5s infinite;
}

@-webkit-keyframes reopenflash {
  0%    { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #00000,
                        -5px 0px 0px 0 #00000;
          color:            white;
        }
  15%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #00000,
                        -5px 0px 0px 0 #00000;
          color:            white;
        }

  50%   { opacity: 1;
          background:  #28a745;
          color:       white;
          box-shadow:  5px 0px 0px 0  #28a745,
                       -5px 0px 0px 0 #28a745;
        }

  85%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #00000,
                        -5px 0px 0px 0 #00000;
          color:            white;
        }

  100%  { background:  #dc3545;
          box-shadow:  5px 0px 0px 0  #00000,
                       -5px 0px 0px 0 #00000;
        }
}

@keyframes reopenflash {
  0%    { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #00000,
                        -5px 0px 0px 0 #00000;
          color:            white;
        }
  15%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #00000,
                        -5px 0px 0px 0 #00000;
          color:            white;
        }

  50%   { opacity: 1;
          background:  #28a745;
          color:       white;
          box-shadow:  5px 0px 0px 0  #28a745,
                       -5px 0px 0px 0 #28a745;
        }

  85%   { background:  #dc3545;
          box-shadow:   5px 0px 0px 0  #00000,
                        -5px 0px 0px 0 #00000;
          color:            white;
        }

  100%  { background:  #dc3545;
          box-shadow:  5px 0px 0px 0  #00000,
                       -5px 0px 0px 0 #00000;
        }
}




/*==================================================================*/
/* GRAPH CARDS */
/*==================================================================*/

#graphs2 {
  background:       rgba(0, 0, 0, 0.4);
  transition:       background 0.3s;
}

#graphs2:hover {
  background:       #6c757d;
}


/*==================================================================*/
/* BUTTON */
/*==================================================================*/

#bttbutton {
  display:          inline-block;
  background-color: transparent;
  width:            40px;
  height:           50px;
  text-align:       center;
  border-radius:    var(--radius);
  position:         fixed;
  bottom:           80px;
  right:            33px;
  transition:       background-color .3s,
                    opacity .5s, visibility .5s;
  opacity:          0;
  visibility:       hidden;
  z-index:          1000;
}
#bttbutton::after {
  font-weight:      normal;
  font-style:       normal;
  font-size:        40px;
  line-height:      50px;
  color:            #28a745;
}
#bttbutton:hover {
  cursor:           pointer;
  background-color: transparent;
}
#bttbutton:active {
  background-color: transparent;
}
#bttbutton.show {
  opacity:          1;
  visibility:       visible;
}

#bttbutton.show i {
  font-size:        30px;
  color:            #28a745;
  transition:       font-size 0.5s;
}
#bttbutton i:hover {
  font-size:        50px;
}


/*==================================================================*/
/* form fields */
/*==================================================================*/


/*label.btn.active.btn-secondary{

}*/



.form-radio label.btn {
  background:       var(--clr-card-default);
  color:            var(--clr-secondary-darker);
  border-radius:    var(--radius);
  line-height:      1.2rem;
  display: flex;
  align-items: center; /* This centers the content vertically */
  justify-content: center; /* This centers the content horizontally */

}

.stats-btn {
  cursor:           pointer;

}

/*--------------------------------------------*/


.form-radio label.btn.btn-secondary.neutral,
.form-radio label.btn.btn-secondary.good,
.form-radio label.btn.btn-secondary.warning,
.form-radio label.btn.btn-secondary.bad {
  transition:       transform 0.3s, box-shadow 0.3s;
}


/*NEUTRAL*/

.form-radio label.btn.btn-secondary.neutral.active,
.form-radio label.btn.active.btn-secondary.neutral {
  background:       var(--clr-secondary);
  color:            white;
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.neutral.active:hover,
.form-radio label.btn.active.btn-secondary.neutral:hover {
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.form-radio label.btn.btn-secondary.neutral {
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.neutral:hover {
  background:       var(--clr-secondary);
  color:            white;
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}




/*GOOD*/

.form-radio label.btn.btn-secondary.good.active,
.form-radio label.btn.active.btn-secondary.good {
  background:       var(--clr-success);
  color:            white;
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.good.active:hover,
.form-radio label.btn.active.btn-secondary.good:hover {
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.form-radio label.btn.btn-secondary.good {
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.good:hover {
  background:       var(--clr-success);
  color:            white;
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}




/*WARNING*/

.form-radio label.btn.btn-secondary.warning.active,
.form-radio label.btn.active.btn-secondary.warning {
  background:       var(--clr-warning);
  color:            var(--clr-secondary-darkest);
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.warning.active:hover,
.form-radio label.btn.active.btn-secondary.warning:hover {
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.form-radio label.btn.btn-secondary.warning {
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.warning:hover {
  background:       var(--clr-warning);
  color:            var(--clr-secondary-darkest);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}




/*BAD*/

.form-radio label.btn.btn-secondary.bad.active,
.form-radio label.btn.active.btn-secondary.bad {
  background:       var(--clr-danger);
  color:            white;
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.bad.active:hover,
.form-radio label.btn.active.btn-secondary.bad:hover {
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.form-radio label.btn.btn-secondary.bad {
  transition:       transform 0.3s, box-shadow 0.3s;
}


.form-radio label.btn.btn-secondary.bad:hover {
  background:       var(--clr-danger);
  color:            white;
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}






/*--------------------------------------------*/

/*.form-radio label.btn.btn-light:hover {
}*/


div #form_staff_role label.btn.btn-secondary,
div #form_time_status label.btn.btn-secondary,
.form-radio label.btn.btn-light.dm,
.form-radio label.btn.btn-light.do,
.form-radio label.btn.btn-light.sa,
.form-radio label.btn.btn-light.tec,
.form-radio label.btn.btn-light.am,
.form-radio label.btn.btn-light.mid,
.form-radio label.btn.btn-light.pm,
.form-radio label.btn.btn-light.misc {
  background:       var(--clr-grey-light);
  color:            var(--clr-secondary-darkest);
  border-color:     var(--clr-secondary);
}




div #form_staff_role label.btn.active.btn-secondary,
div #form_staff_role label.btn.btn-secondary.active {
  background:       var(--clr-secondary-light);
  border-color:     var(--clr-secondary-darkest);
  color:            white;
  font-weight:      bold;
}

.form-radio label.btn.btn-light.dm.active,
.form-radio label.btn.active.btn-light.dm {
  background:       var(--clr-charcoal-lighter);
  border-color:     var(--clr-secondary-darkest);
  color:            white;
  font-weight:      bold;
}

.form-radio label.btn.btn-light.do.active {
  background:       var(--clr-primary-lighter);
  border-color:     var(--clr-primary-darkest);
  color:            white;
  font-weight:      bold;
}

.form-radio label.btn.btn-light.sa.active {
  background:       var(--clr-yellow-lighter);
  border-color:     var(--clr-warning-darkest);
  color:            var(--clr-charcoal);
  font-weight:      bold;
}

.form-radio label.btn.btn-light.tec.active {
  background:       var(--clr-purple-lighter);
  border-color:     var(--clr-purple-darkest);
  color:            white;
  font-weight:      bold;
}

/*--------------------------------------------*/

div #form_time_status label.btn.active.btn-secondary,
div #form_time_status label.btn.btn-secondary.active {
  background:       var(--clr-secondary-light);
  border-color:     var(--clr-secondary-darkest);
  color:            white;
  font-weight:      bold;
}


/*--------------------------------------------*/
/*.form-radio label.btn.btn-light.am,
.form-radio label.btn.btn-light.mid,
.form-radio label.btn.btn-light.pm,
.form-radio label.btn.btn-light.misc {
  background:       var(--clr-grey-dark);
  color:            secondary;
}*/



.form-radio label.btn.btn-light.am.active,
.form-radio label.btn.active.btn-light.am {
  background:       var(--clr-morning-blue);
  border-color:     var(--clr-info-darkest);
  color:            var(--clr-secondary-darker);
  font-weight:      bold;
}



.form-radio label.btn.btn-light.mid.active {
  background:       var(--clr-yellow-lighter);
  border-color:     var(--clr-yellow-darkest);
  color:            var(--clr-secondary-darker);
  font-weight:      bold;
}

.form-radio label.btn.btn-light.pm.active {
  background:       var(--clr-evening-blue);
  border-color:     var(--clr-warning-darkest);
  color:            white;
  font-weight:      bold;
}

.form-radio label.btn.btn-light.misc.active {
  background:       var(--clr-purple-lighter);
  border-color:     var(--clr-purple-darkest);
  color:            white;
  font-weight:      bold;
}


/*----------------------------------------------*/


/*Contacts Notifications selections*/
.form-radio label.btn.btn-secondary.none.active,
.form-radio label.btn.btn-secondary.notification.active,
.form-radio label.btn.btn-secondary.email.active {
  background:       var(--clr-success);
  color: white;
}


/*Contacts Notifications selections*/
span.neutral {
}

span.good {  color: var(--clr-success);
  font-weight: bold;
  border-radius:    var(--radius);
}

span.warning {
  background:       var(--clr-warning);
  color: white;
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
}

span.bad {
  background:       var(--clr-danger);
  color: white;
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
}


/*Job role colours on form preview*/
span.dm {
  background:       var(--clr-charcoal);
  border-color:     var(--clr-charcoal-darkest);
  color:            white;
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}

span.do {
  background:       var(--clr-primary);
  border-color:     var(--clr-primary-darkest);
  color:            white;
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}

span.sa {
  background:       var(--clr-yellow);
  border-color:     var(--clr-warning-darkest);
  color:            var(--clr-charcoal);
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}

span.tec {
  background:       var(--clr-purple);
  border-color:     var(--clr-purple-darkest);
  color:            white;
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}



/*Day time colours on form preview*/
span.am {
  background:       var(--clr-morning-blue);
  border-color:     var(--clr-charcoal-darkest);
  color:            var(--clr-secondary-darker);
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}

span.mid {
  background:       var(--clr-yellow-lighter);
  border-color:     var(--clr-primary-darkest);
  color:            var(--clr-secondary-darker);
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}

span.pm {
  background:       var(--clr-evening-blue);
  border-color:     var(--clr-warning-darkest);
  color:            white;
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}

span.misc {
  background:       var(--clr-purple);
  border-color:     var(--clr-purple-darkest);
  color:            white;
  padding: 2px 5px 2px 5px;
  border-radius:    var(--radius);
  font-weight:      bold;
}

/*==================================================================*/
/* ALERT */
/*==================================================================*/



.alert{
  position:         relative;
  padding:          .75rem 1.25rem;
  padding-bottom:   1px;
  padding-top:      1px;
  min-height:       3rem;
  border:           1px solid transparent;
  border-radius:    var(--radius);
}

.alert-direct,
.alert-direct:hover {
  color:            inherit;
  text-decoration:  none;
}

.alert-heading{
  color:            inherit
}

.alert-dismissible{
  padding-right:    4rem
}

.alert-dismissible .close{
  position:         absolute;
  top:              0;
  right:            0;
  padding:          .75rem 1.25rem;
  color:            inherit
}

.alert-primary{
  color:            #004085;
  background-color: #cce5ff;
  border-color:     #b8daff
}

.alert-primary hr{
  border-top-color: #9fcdff
}

.alert-primary .alert-link{
  color:            #002752
}

.alert-secondary{
  color:            #383d41;
  background-color: #e2e3e5;
  border-color:     #d6d8db
}

.alert-secondary hr{
  border-top-color: #c8cbcf
}

.alert-secondary .alert-link{
  color:            #202326
}

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

.alert-success hr{
  border-top-color: #b1dfbb
}

.alert-success .alert-link{
  color:            #0b2e13
}

.alert-info{
  color:            #0c5460;
  background-color: #d1ecf1;
  border-color:     #bee5eb
}

.alert-info hr{
  border-top-color: #abdde5
}

.alert-info .alert-link{
  color:            #062c33
}

.alert-warning{
  color:            #856404;
  background-color: #fff3cd;
  border-color:     #ffeeba
}

.alert-warning hr{
  border-top-color: #ffe8a1
}

.alert-warning .alert-link{
  color:            #533f03
}

.alert-danger{
  color:            #721c24;
  background-color: #f8d7da;
  border-color:     #f5c6cb
}

.alert-danger hr{
  border-top-color: #f1b0b7
}

.alert-danger .alert-link{
  color:            #491217
}

.alert-light{
  color:            #818182;
  background-color: #fefefe;
  border-color:     #fdfdfe
}

.alert-light hr{
  border-top-color: #ececf6
}

.alert-light .alert-link{
  color:            #686868
}

.alert-dark{
  color:            #1b1e21;
  background-color: #d6d8d9;
  border-color:     #c6c8ca
}

.alert-dark hr{
  border-top-color: #b9bbbe
}

.alert-dark .alert-link{
  color:            #040505
}


.closebtn {
  margin-left:      15px;
  color:            white;
  font-weight:      bold;
  float:            right;
  font-size:        22px;
  line-height:      20px;
  cursor:           pointer;
  transition:       0.3s;
}

.closebtn:hover {
  color:            black;
}



/*flash and keyframe animation*/
.alert-dashboard {
  -webkit-animation: alertflash linear 4s infinite;
  animation: alertflash linear 4s infinite;
}

@-webkit-keyframes alertflash {
  0% { opacity: 1; }
  15%{ opacity: 1; }
  50% { opacity: 0.45; }
  85%{ opacity: 1; }
  100% { opacity: 1; }
}
@keyframes alertflash {
  0% { opacity: 1; }
  15%{ opacity: 1; }
  50% { opacity: 0.45; }
  85%{ opacity: 1; }
  100% { opacity: 1; }
}

.alert-dashboard:hover {
  -webkit-animation: alertflashstop linear 0.5s infinite;
  animation: alertflashstop linear 0.5s infinite;
}

@-webkit-keyframes alertflashstop {
  0% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes alertflashstop {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

/*==================================================================*/
/* DATE RANGE */
/*==================================================================*/

.daterangepicker {
  position:         absolute;
  color:            inherit;
  background-color: #fff;
  border-radius:    var(--radius);
  border:           1px solid #ddd;
  width:            278px;
  max-width:        none;
  padding:          0;
  margin-top:       7px;
  top:              100px;
  left:             20px;
  z-index:          3001;
  display:          none;
  font-family:      arial;
  font-size:        15px;
  line-height:      1em;
}

.daterangepicker:before, .daterangepicker:after {
  position:         absolute;
  display:          inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content:          '';
}

.daterangepicker:before {
  top:              -7px;
  border-right:     7px solid transparent;
  border-left:      7px solid transparent;
  border-bottom:    7px solid #ccc;
}

.daterangepicker:after {
  top:              -6px;
  border-right:     6px solid transparent;
  border-bottom:    6px solid #fff;
  border-left:      6px solid transparent;
}

.daterangepicker.opensleft:before {
  right:            9px;
}

.daterangepicker.opensleft:after {
  right:            10px;
}

.daterangepicker.openscenter:before {
  left:             0;
  right:            0;
  width:            0;
  margin-left:      auto;
  margin-right:     auto;
}

.daterangepicker.openscenter:after {
  left:             0;
  right:            0;
  width:            0;
  margin-left:      auto;
  margin-right:     auto;
}

.daterangepicker.opensright:before {
  left:             9px;
}

.daterangepicker.opensright:after {
  left:             10px;
}

.daterangepicker.drop-up {
  margin-top:       -7px;
}

.daterangepicker.drop-up:before {
  top:              initial;
  bottom:           -7px;
  border-bottom:    initial;
  border-top:       7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top:              initial;
  bottom:           -6px;
  border-bottom:    initial;
  border-top:       6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float:            none;
}

.daterangepicker.single .drp-selected {
  display:          none;
}

.daterangepicker.show-calendar .drp-calendar {
  display:          block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: var(--radius);
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding:          8px 12px;
  cursor:           pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color:            #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width:          auto;
  }

  .daterangepicker .ranges ul {
    width:          140px;
  }

  .daterangepicker.single .ranges ul {
    width:          100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear:          none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float:          left;
  }

  .daterangepicker {
    direction:      ltr;
    text-align:     left;
  }

  .daterangepicker .drp-calendar.left {
    clear:          left;
    margin-right:   0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right:   none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left:    0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left:    none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right:  8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float:          left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width:          auto;
  }

  .daterangepicker .ranges {
    float:          left;
  }

  .daterangepicker.rtl .ranges {
    float:          right;
  }

  .daterangepicker .drp-calendar.left {
    clear:          none !important;
  }
}



.info-box {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  background: #ffffff;
  display: -ms-flexbox;
  display: flex;
  /*margin-bottom: 0.3rem;*/
  min-height: 75px;
  padding: .5rem;
  position: relative;
  width: 100%;
}


.training-overdue-table {
  min-height: 50px;
}

.info-box .progress {
  background-color: rgba(0, 0, 0, 0.125);
  height: 4px;
  margin: 5px 0;
}

.info-box .progress .progress-bar {
  background-color: #ffffff;
}

.info-box .info-box-icon {
  border-radius: var(--radius);
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.875rem;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  width: 70px;
}

.info-box .info-box-icon > img {
  max-width: 100%;
}

.info-box .info-box-content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 120%;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px;
}

.info-box .info-box-number {
  display: block;
  margin-top: .25rem;
  font-weight: 700;
}

.info-box .info-box-text {
  font-size:        20px;
  padding-bottom:   2px;
  padding-top:      1px;
}

.info-box .progress-description,
.info-box .info-box-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-box .info-box .bg-primary,
.info-box .info-box .bg-gradient-primary {
  color: #ffffff;
}

.info-box .info-box .bg-primary .progress-bar,
.info-box .info-box .bg-gradient-primary .progress-bar {
  background-color: #ffffff;
}

.info-box .info-box .bg-secondary,
.info-box .info-box .bg-gradient-secondary {
  color: #ffffff;
}

.info-box .info-box .bg-secondary .progress-bar,
.info-box .info-box .bg-gradient-secondary .progress-bar {
  background-color: #ffffff;
}

.info-box .info-box .bg-success,
.info-box .info-box .bg-gradient-success {
  color: #ffffff;
}

.info-box .info-box .bg-success .progress-bar,
.info-box .info-box .bg-gradient-success .progress-bar {
  background-color: #ffffff;
}

.info-box .info-box .bg-info,
.info-box .info-box .bg-gradient-info {
  color: #ffffff;
}

.info-box .info-box .bg-info .progress-bar,
.info-box .info-box .bg-gradient-info .progress-bar {
  background-color: #ffffff;
}

.info-box .info-box .bg-warning,
.info-box .info-box .bg-gradient-warning {
  color: #1F2D3D;
}

.info-box .info-box .bg-warning .progress-bar,
.info-box .info-box .bg-gradient-warning .progress-bar {
  background-color: #1F2D3D;
}

.info-box .info-box .bg-danger,
.info-box .info-box .bg-gradient-danger {
  color: #ffffff;
}

.info-box .info-box .bg-danger .progress-bar,
.info-box .info-box .bg-gradient-danger .progress-bar {
  background-color: #ffffff;
}

.info-box .info-box .bg-light,
.info-box .info-box .bg-gradient-light {
  color: #1F2D3D;
}

.info-box .info-box .bg-light .progress-bar,
.info-box .info-box .bg-gradient-light .progress-bar {
  background-color: #1F2D3D;
}

.info-box .info-box .bg-dark,
.info-box .info-box .bg-gradient-dark {
  color: #ffffff;
}

.info-box .info-box .bg-dark .progress-bar,
.info-box .info-box .bg-gradient-dark .progress-bar {
  background-color: #ffffff;
}

.info-box .info-box-more {
  display: block;
}

.info-box .progress-description {
  margin: 0;
}

@media (min-width: 768px) {
  .col-xl-2 .info-box .progress-description {
    font-size: 0.65rem;
    display: block;
  }
}

@media (min-width: 992px) {
  .info-box .progress-description {
    font-size: 0.85rem;
    display: block;
  }
}

@media (min-width: 1200px) {
  .col-xl-2 .info-box .progress-description {
    font-size: 1rem;
    display: block;
  }
}


/**/


.multi-graph{
  width: 300px;
  height: 150px;
  position: relative;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-sizing : border-box;
   &:before{
    content: '';
    width: 300px;
    height: 150px;
    border:50px solid rgba(0,0,0,.15);
    border-bottom: none;
    position: absolute;
    box-sizing : border-box;
    transform-origin: 50%  0%;
    border-radius: 300px 300px 0 0 ;
    left: 0;
    top: 0;
  }
  .semi-graph{
    width: 300px;
    height: 150px;
    border:50px solid var(--fill);
    border-top: none;
    position: absolute;
    transform-origin :50%  0% 0;
    border-radius: 0 0 300px 300px ;
    left: 0;
    top: 100%;
    z-index: 5;
    animation : 1s fillGraphAnimation ease-in;
    transform: rotate( calc( 1deg * ( var(--percentage) * 1.8 ) ) );
    box-sizing : border-box;
    cursor: pointer;
    &:after{
      // content: attr(data-name) ;
      content: attr(data-name) ' ' attr(data-value) '%';
      counter-reset: varible var(--percentage);
      background: var(--fill) ;
      box-sizing : border-box;
      border-radius : 2px;
      color: #fff;
      font-weight: 200;
      font-size: 12px;
      height: 20px;
      padding: 3px 5px;
      top: 0px;
      position: absolute;
      left: 0;
      transform: rotate(calc( -1deg * var(--percentage) * 1.8 ))  translate(-30px , 0px);
      transition:0.2s ease-in;
      transform-origin: 0 50% 0;
      opacity: 0;
    }
    &:hover{
        opacity: 0.8;
      &:after{
        opacity: 1;
        left: 30px;
      }
    }
  }
}



@keyframes fillAnimation{
  0%{transform : rotate(-45deg);}
  50%{transform: rotate(135deg);}
}

@keyframes fillGraphAnimation{
  0%{transform: rotate(0deg);}
  50%{transform: rotate(180deg);}
}





/*
===========================================================================================
===========================================================================================
TO_DOLIST NEW
===========================================================================================
===========================================================================================
*/

 
.to_dolist {  
    background:    #28a745;  
    width:            100%;  
}  


.todoapp {  
  height:           100%;
  display:          -ms-grid;  
  display:          grid;  
  -ms-grid-rows:    60px 1fr 45px;  
  grid-template-rows: 60px 1fr 45px;  
  -ms-grid-column:  2;  
  grid-column:      2;  
  -ms-grid-row:     2;  
  grid-row:         2;  
  background:   white;  
  overflow:         auto;  
  border:           none;
  
}  

.todo-menu-1 {  
    display: -ms-grid;  
    display: grid;  
    -ms-grid-columns: 50px 1fr;  
    grid-template-columns: 50px 1fr;  
    -ms-grid-rows: 60px;  
    grid-template-rows: 60px;  
    -webkit-box-align: stretch;  
    -ms-flex-align: stretch;  
    align-items: stretch;  
    -webkit-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.19);  
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.19);  
    border-bottom: 1px solid #e6e6e6;  
}  

.add-todo-text-input {  
    outline: none;  
    border: none;  
    border-bottom: 1px solid #e6e6e6;  
}  

::-webkit-input-placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
}  

:-ms-input-placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
}  

::-ms-input-placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
}  

::placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
}  

:-moz-placeholder, ::-moz-placeholder {  
  opacity: 1;  
}  

.toggle-all, .delete-button, .delete-completed-button, .menu-2-button {  
  background: none;  
  border: none;  
  outline: none;  
}  

.toggle-all {  
  color: #e6e6e6;  
  -ms-grid-column-align: stretch;  
  justify-self: stretch;  
  text-align: center;  
}  

.toggle-all-checked {  
  color: #4d4d4d;  
}  

.rotate {  
  display: inline-block;  
  font-size: 20px;  
  -webkit-transform: rotate(90deg);  
  -ms-transform: rotate(90deg);  
  transform: rotate(90deg);  
/* Prevent rotate class from being clicked so that toggle-all button can be clicked instead. */  
  pointer-events: none;  
}  

.todo-menu-2 {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 2fr 3fr 2fr;  
  grid-template-columns: 2fr 3fr 2fr;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  color: #777;  
  background: #f4f5f6;  
  font-size: 14px;  
  font-weight: 300;  
}  

.todo-menu-2 .todos-left {  
  align-items: start;  
  justify-self: start;  
  padding-left: 20px;  
}  

.todo-menu-2 .todo-menu-2-buttons {  
  align-items: center;  
  justify-self: center;    
  display: grid;
  grid-template-rows:   auto 1fr;
  grid-gap: 3px;  
}  

.todo-menu-2 .delete-completed-button, .todo-menu-2 .menu-2-button, .todo-menu-2 .todos-left {  
  font-family: inherit;  
  color: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
}  

.todo-menu-2 .menu-2-button {  
  padding: 2px 8px;  
  border: 1px solid rgba(137, 103, 208, 0);  
  border-radius: var(--radius);
}  

.todo-menu-2 .menu-2-button:hover {  
  border: 1px solid rgba(137, 103, 208, 0.5);  
}  

.to_dolist_active {  
  border: 1px solid rgba(137, 103, 208, 1) !important;  
}  

.todo-menu-2 .delete-completed-button {  
  -ms-grid-column-align: end;  
  justify-self: end;  
  padding-right: 20px;  
}  

.todo-menu-2 .delete-completed-button:hover {  
  text-decoration: underline;  
}  

.todos {  
  display: grid;  
  grid-auto-columns: 1fr;  
  grid-auto-rows: -webkit-max-content;  
  grid-auto-rows: max-content;  
  list-style-type: none;  
  overflow: auto;  
}  

.todos .todo {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 50px 450px 50px;  
  grid-template-columns: 50px 450px 50px;  
  border-bottom: 1px solid #ededed;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  overflow-wrap: break-word;  
/* word-wrap is renamed to overflow-wrap but Edge still uses word-wrap */  
  word-wrap: break-word;  
}  

/* checkbox centering */  
.todos .todo .pretty {  
  -ms-grid-column-align: center;  
  justify-self: center;  
  -webkit-transform: scale(1.4);  
  -ms-transform: scale(1.4);  
  transform: scale(1.4);  
  margin: 0;  
}  

.pretty .state label {  
  text-indent: 0;  
}  

.pretty .state i {  
  -webkit-transform: rotate(-5deg);  
  -ms-transform: rotate(-5deg);  
  transform: rotate(-5deg);  
  color: #5dc2af;  
}  

.add-todo-text-input, .todo-text {  
  font-size: 24px;  
  color: #4d4d4d;  
}  

.todo-text {  
  padding-top: 13px;  
  padding-bottom: 13px;  
}  

.todo-text:focus {  
  outline: none;  
}  

.todo-checked-text {  
  color: #d9d9dd;  
  text-decoration: line-through;  
}  

.todo-checked-text:focus {  
  color: #4d4d4d;  
  text-decoration: none;  
}  

.delete-button {  
  font-size: 28px;  
  color: #df8383;  
  -ms-grid-column-align: end;  
  justify-self: end;  
  visibility: hidden;  
}  

.todos .todo:hover .delete-button {  
  visibility: visible;  
}  

.delete-button:hover {  
  color: #f14a5d;  
  cursor: pointer;  
}  

@media (max-width: 1024px) { 

  /*.to_dolist {  
   height: var(--mobile-to_dolist-height);  
  } */ 

  .delete-button {  
    color: #f14a5d;  
    -ms-grid-column-align: center;  
    justify-self: center;  
    visibility: visible;  
  }  

}  

@media (max-width: 680px) { 

  .to_dolist {  
    -ms-grid-columns: 1fr 8fr 1fr;  
    grid-template-columns: 1fr 8fr 1fr;  
    -ms-grid-rows: 73px 9fr 1fr;  
    grid-template-rows: 73px 9fr 1fr;  
  }  

  .to_dolisttitle {  
  font-size: 33px;  
  }  

  .todo-app {  
    -ms-grid-rows: 40px 1fr auto;  
    grid-template-rows: 40px 1fr auto;  
  }  

  .todo-menu-1 {  
    -ms-grid-rows: 40px;  
    grid-template-rows: 40px;  
  }  

  .add-todo-text-input, .todo-text {  
    font-size: 16px;  
  }  

  .todo-menu-2 {  
    -ms-grid-columns: 1fr 1fr;  
    grid-template-columns: 1fr 1fr;  
    grid-row-gap: 8px;  
    font-size: 12px;  
    padding: 8px 0px;  
  }  

  .todo-menu-2 .todos-left {  
    -ms-grid-column-align: center;  
    justify-self: center;  
  }  

  .todo-menu-2 .todo-menu-2-buttons {  
    grid-column: 1 / -1;  
    -ms-grid-row: 1;  
    grid-row: 1;  
  }  

  .todo-menu-2 .delete-completed-button {  
    -ms-grid-column-align: center;  
    justify-self: center;  
  }  

  .todo-menu-2 .delete-completed-button:hover {  
    text-decoration: none;  
  }  

  .todos {  
  }  

  .todos .todo {  
    -ms-grid-columns: 50px var(--mobile-todo-text-width) 50px;  
    grid-template-columns: 50px var(--mobile-todo-text-width) 50px;  
  }  

  ::-webkit-input-placeholder {  
    font-size: 16px;  
  }  

  :-ms-input-placeholder {  
    font-size: 16px;  
  }  

  ::-ms-input-placeholder {  
    font-size: 16px;  
  }  

  ::placeholder {  
    font-size: 16px;  
  }  

  .rotate {  
    font-size: 14px;  
  }  

}  


/*
===========================================================================================
===========================================================================================
DOSING CALCULATOR
===========================================================================================
===========================================================================================
*/



.number-roller-container {
    display: flex;
    justify-content: center; /* Center the whole group */
    align-items: center;
    min-height: 200px;
}

.number-roller-wrapper {
    display: flex; /* Use flexbox for side-by-side layout */
    align-items: center; /* Vertically center items */
    gap: 10px; /* Space between button and roller */
}

.number-roller {
    position: relative;
    width: 80px;
    height: 40px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    text-align: center;
    line-height: 40px;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    background-color: #f9f9f9;
}

.number-roller-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.3s ease-out;
}

.number-roller-item {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #333;
}

.number-roller-center {
    border-top: 2px solid #007bff;
    border-bottom: 2px solid #007bff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
}

.number-roller-button {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}

.number-roller-button:hover {
    background-color: #e0e0e0;
}

.number-roller-value {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin: 0 10px;
    min-width: 80px;
    display: inline-block;
    text-align: center;
}
.unit-label {
    margin-left: 10px; /* Adjust spacing as needed */
    font-size: 16px;  /* Make sure the font size is appropriate */
    color: #6b7280; /* Optional: text color */
}









/*
===========================================================================================
===========================================================================================
VOLUME CALCULATOR
===========================================================================================
===========================================================================================
*/


.calc-input span span {
  align-content: middle;
}


.calcs span .abbr {
  width:           55px !important;
  color:           var(--clr-secondary-light);
  font-size:       90%;
  align:           left;
}


#wbCalc,
#water30Calc,
#volCalc,
#wdCalc,
#dosingCalc,
#activeCl,
#tdsCalc,
#filtRCalc {
}

/*Selection Buttons*/

.volSelect button,
.dosingSelect button {
  width:            100% !important;
  padding:          0 !important;
  height:           25px;
  line-height:      15%;
  text-align:       center;
  border-radius:    var(--radius);
  font-size:        100%;
  box-sizing:       normal;
  border:           none !important;
  cursor:           pointer;
  transition:       transform 0.3s, box-shadow 0.3s;
}

.SelectButton {
  padding-left:     7px;
  padding-right:    7px;
}

.volSelect button,
.dosingSelect button {
  background:       var(--clr-secondary-lighter);
  color:            var(--clr-white);
}

.volSelect button:hover,
.dosingSelect button:hover {
  background:       var(--clr-secondary-light);
  color:            var(--clr-white);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

.volSelect button.selected,
.dosingSelect button.selected {
  background:       var(--clr-success);
  color:            var(--clr-white);
}


.volSelect button.selected:hover,
.dosingSelect button.selected:hover {
  background:       var(--clr-success-lighter);
  color:            var(--clr-white);
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}


.volSelect button i,
.dosingSelect button i,
.dosingSelect button i svg ellipse {
  font-size:        80%;
  padding-left:     4px;
  color:            var(--clr-grey-light);
  text-align:       center;
  fill:             var(--clr-grey-light);
}


.volSelect button:hover i {
  color:            var(--clr-white);
  fill:             var(--clr-white);
}

.volSelect button.selected i {
  color:            var(--clr-white);
  fill:             var(--clr-white);
}


.dosingSelect button:hover i,
.dosingSelect button:hover i svg ellipse {
  color:            var(--clr-danger-light);
  fill:             var(--clr-danger-light);
}


.dosingSelect button.selected i,
.dosingSelect button.selected i svg ellipse {
  color:            var(--clr-danger-light);
  fill:             var(--clr-danger-light);
}

#wbCalc hr,
#water30Calc hr,
#volCalc hr,
#wdCalc hr,
#dosingCalc hr,
#activeCl hr,
#tdsCalc hr,
#filtRCalc hr {
  display:          block;
  height:           1px;
  margin-top:       10px;
  margin-bottom:    15px;
  position:         relative;
  clear:            both;
  padding:          0;
  width:            100%;
}


#wbCalc span,
#water30Calc span,
#volCalc span,
#wdCalc span,
#activeCl span,
#tdsCalc span,
#filtRCalc span {
  display:          block;
  width:            100%;
  margin:           10px 0px 0px 10%;
}


#wbCalc span span,
#water30Calc span span,
#volCalc span span,
#wdCalc span span,
#activeCl span span,
#tdsCalc span span,
#filtRCalc span span {
  float:            none;
  display:          inline-block;
  width:            25%;
  margin:           0;
  text-align:       middle;
}


.pointer {
  cursor:           pointer;
}

/* when the button is toggled off it is still in focus and a border will appear */
/* box shadow is blue by default but we do not want any shadow hence we have set all the values as 0 */
.custom-control-input:focus ~ 
.custom-control-label::before {
  box-shadow:       0 0 0 0rem rgba(0, 0, 0, 0) !important;
}

/*sets the background color of switch when it is checked*/

.custom-control-input:checked ~ 
.custom-control-label::before {
  border-color:     var(--clr-success) !important;
  background-color: var(--clr-success) !important;
            }
  
/*sets the background color of switch when it is active*/
.custom-control-input:active ~
.custom-control-label::before {
  background-color: var(--clr-success) !important;
  border-color: var(--clr-success) !important;
            }
  
/*sets the border color of switch when it is not checked*/
.custom-control-input:focus:not(:checked) ~
.custom-control-label::before {
  border-color: var(--clr-secondary-lightest) !important;
}


.wb-input .factor {
  background:       var(--clr-grey);
  color:            var(--clr-secondary-light);
  border:           none !important;
  width:            15%;  
  align:            right;
  border-radius:    var(--radius);
}


/*Input fields*/
.vol-input input,
.wb-input input,
.dosing-input input,
.poolVol-input input,
.water30-input input,
.Active-input input,
.tds-input input,
.filt-input input {
  width:            25%;
  padding:          0 2px;
  text-align:       right;
  height:           25px;
  margin-right:     4px;
  border-radius:    var(--radius);
  display:          inline;
  letter-spacing:   .1em;
  cursor:           text;
}


/*CALCULATE BUTTONS*/

#calcWb,
#calcWater30,
#calcVol,
#calcWd,
#calculateDose,
#calcActiveCl,
#calcTDS,
#calcFiltR {
  width:            100% !important;
  background:       var(--clr-secondary-lighter);
  color:            var(--clr-white);   
  border-radius:    var(--radius);
  border:           none !important;  
  transition:       transform 0.3s, box-shadow 0.3s;
}

#calcWb:focus,
#calcWater30:focus,
#calcVol:focus,
#calcWd:focus,
#calculateDose:focus,
#calcActiveCl:focus,
#calcTDS:focus,
#calcFiltR:focus {
  outline:          none !important; 
}

#calcWb:hover,
#calcWater30:hover,
#calcVol:hover,
#calcWd:hover,
#calculateDose:hover,
#calcActiveCl:hover,
#calcTDS:hover,
#calcFiltR:hover {
  background:       var(--clr-danger) !important;
  box-shadow:       3px 3px 10px 0 rgba(0, 0, 0, 0.25),
                    -3px -3px 10px 0 rgba(255, 255, 255, 0.3);
}

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


#bathersCheckEntry,
#volCheckEntry,
#dosingCheckEntry,
#checkEntry,
#activeCheckEntry,
#tdsCheckEntry,
#filtCheckEntry {
  width:            100% !important;
  background:       none;
  border:           none;
}



#clearWb,
#clearWater,
#clearVol,
#clearWd,
#clearDosing,
#clearActive,
#clearTDS,
#clearFiltR {
  width:            100% !important;
  background:       var(--clr-danger-light);
  color:            var(--clr-white);   
  border-radius:    var(--radius);
  border:           none !important;  
}

#clearWb:focus,
#clearWater:focus,
#clearVol:focus,
#clearWd:focus,
#clearDosing:focus,
#clearActive:focus,
#clearTDS:focus,
#clearFiltR:focus {
  outline:          none !important; 
}

#clearWb:hover,
#clearWater:hover,
#clearVol:hover,
#clearWd:hover,
#clearDosing:hover,
#clearActive:hover,
#clearTDS:hover,
#clearFiltR:hover {
  background:       var(--clr-danger) !important;
}


/*
#volCalc div {
  border-color:     red !important;
  border-width:     10px !important;
}*/



/*Results field*/
.results .resultField {
  width:            25%;
  padding:          0 2px;
  text-align:       right;
  height:           25px;
  margin-right:     4px;
  border-radius:    var(--radius);
  display:          inline;
  letter-spacing:   .1em;
  cursor:           text;
}

.results span {
  text-align:       middle;
}


/*Results Text*/
.results .resultText {
  width:            40%;
  padding:          0 2px;
  text-align:       center;
  height:           25px;
  margin-right:     4px;
  border-radius:    var(--radius);
  display:          inline;
  letter-spacing:   .1em;
  cursor:           text;
  border:           none;
  background:       none;
}








/*===========*/
/*todo webdev*/
/*===========*/

*,
*::before,
*::after {
    font-family: inherit;
    box-sizing: border-box;
}

/*body {
    margin: 0;
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    background-color: #28a745;
    color: white;

    display: grid;
    grid:
        "header header header header" auto
        "...... lists  active ......" auto /
        1fr minmax(100px, 300px) minmax(250px, 500px) 1fr;

}*/

.todo-task-list .title {
    grid-area: header;
    text-align: center;
    font-size: calc(7vw + 2rem);
    font-weight: 900;
    color: rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
    margin: -0.1em 0 0.5em;
}

.todo-task-list .all-tasks {
    grid-area: lists;
}

.todo-task-list .task-list {
    font-size: 1.2rem;
    line-height: 1.7;
    list-style: circle;
    padding-left: 1.1em;
}

.todo-task-list .list-name {
    cursor: pointer;
}

.todo-task-list .list-name:hover {
    opacity: 0.7;
}

.todo-task-list form {
    display: flex;
}

.todo-task-list .btn {
    cursor: pointer;
    background: 0;
    border: 0;
    padding: 0;
    color: inherit;
    /* font-size: 1.2rem */
}

.todo-task-list .btn.create {
    font-size: 1.5rem;
    font-weight: 900;
    margin-right: 0.25em;
    transition: opacity 250ms ease-in;
}

.todo-task-list .btn.create:hover {
    opacity: 0.7;
}

.todo-task-list .btn.delete {
    opacity: 0.7;
    font-size: 1rem;
    transition: color 200ms;
}

.todo-task-list .btn.delete:hover {
    color: orange;
}


.todo-task-list .new {
    background: transparent;
    border: 0;
    color: inherit;
    border-bottom: 1px solid currentcolor;
    font-size: inherit;
    outline: none;
    padding: 0.25em;

    transition: border-bottom 150ms ease-in;
    order: 2;
}

.todo-task-list .new::placeholder {
    opacity: 0.4;
}

.todo-task-list .new:focus {
    border-bottom-width: 3px;
}

.todo-task-list .new::placeholder {
    color: inherit;
}

.todo-task-list .new:hover::placeholder {
    opacity: 0.7;
}

.todo-task-list .new:focus::placeholder {
    opacity: 0.2;
}

.todo-task-list .new.list {
    font-size: 1.1rem;
}

.todo-task-list .new.task {
    margin-bottom: 0;
}

.todo-task-list .active-list {
    font-weight: 700
}

.todo-task-list .todo-list {
    --spacer: 2rem;

    grid-area: active;
    background: #f4f4f4;
    color: #333;
}

.todo-task-list .todo-header {
    padding: var(--spacer);
    background: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.todo-task-list .list-title {
    margin: 0 1em 0 0;
}

.todo-task-list .task-count {
    margin: 0;
    font-size: 1rem;
}

.todo-task-list .todo-body {
    padding: var(--spacer);
    position: relative;
}

.todo-task-list .new-task-creator .create {
    color: #28a745;

}

[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

.todo-task-list .task label {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.todo-task-list .task {
    position: relative;
    margin-bottom: 1.25em;
}

.todo-task-list .task::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: -0.5em;
    height: 1px;
    background: currentColor;
    opacity: 0.1;
}

.todo-task-list .custom-checkbox {
    --size: 0.75em;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    margin-right: var(--size);
    cursor: pointer;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: scale(1);
    transition: transform 300ms ease-in-out;
}

.todo-task-list .task:hover .custom-checkbox,
.todo-task-list [type="checkbox"]:focus + label .custom-checkbox {
    transform: scale(1.2);
    color: #28a745;
}

.todo-task-list [type="checkbox"]:checked + label .custom-checkbox {
    background: #28a745;
    border-color: #28a745;
    box-shadow: inset 0 0 0px 2px white;
}

.todo-task-list [type="checkbox"]:checked + label {
    opacity: 0.4;
}

.todo-task-list .task label::after {
    content: "";
    position: absolute;
    left: 1.5em;
    right: 0;
    top: 50%;
    height: 3px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 250ms ease-in-out;
}

.todo-task-list [type="checkbox"]:checked + label::after {
    transform: scaleX(1);
    transform-origin: left;
}

.todo-task-list .delete-selected {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    width: 100%;
    left: 0;
}