body {
    /*background: linear-gradient(180deg, rgb(255, 255, 255) 8%,var(--color-dark));*/
    background: var(--color-dark);
  }

  
  .content {
    height: 100%;
    margin-left: var(--padding);
  }
  
  .open .content {
    margin-left: var(--padding);
  }
  
  .content h1 {
    font-size: var(--h0) !important;
  }
  .content h2 {
    font-size: var(--h1) !important;
  }
  .content h3 {
    font-size: var(--h2) !important;
  }
  .content h4 {
    font-size: var(--h3) !important;
  }
  
  input {
    font-size: var(--h3) !important;
  }
  
  .main-stat {
    display: block;
    text-align: center;
    background-color: transparent;
    color: var(--nav-icon);
  }

  .main-stat h4 {
    color: var(--color-highlight);
  }

  .bubble {
    display: block;
    border-radius:var(--padding) var(--padding) var(--padding) var(--padding);
    background-color: var(--nav-color);
    color: var(--nav-icon);
    font-size: var(--h3);
    font-weight: 400;
    text-align: center;
    margin-top: calc(var(--padding) * 4);
    margin-bottom: calc(var(--padding) * 4);
    margin-left: 0;
    height: 100%;
    border-color: var(--color-highlight);
    border-style: solid;
  }

  .bubble-inverse {
    display: block;
    border-radius:var(--padding) var(--padding) var(--padding) var(--padding);
    background-color: var(--nav-icon-inverse);
    color: var(--text-light);
    font-size: var(--h3);
    font-weight: 400;
    text-align: center;
    margin-top: calc(var(--padding));
    margin-left: 0;
    height: 100%;
  }

  .bubble .text-dark {
    color: var(--color-highlight) !important;
  }

  .advert, .advert h3 {
    color: var(--color-highlight) !important;
  }

  a.h3 {
    color: var(--nav-icon) !important;
    font-size: var(--h3);
    font-weight: 500;
  }

  a.h2 {
    color: var(--nav-icon) !important;
    font-size: var(--h2);
    font-weight: 500;
  }

  a.h1 {
    color: var(--nav-icon) !important;
    font-size: var(--h1);
    font-weight: 500;
  }

  .advert, .advert h2 a {
    color: var(--nav-icon) !important;
  }


  .advert, .advert h3 {
    color: var(--color-highlight) !important;
  }

  .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
  }

  /*.row:not(.gt) > [class*='col-'] {
    display: flex !important;
    flex-direction: column !important;
  }*/
  
  .card-stat {
    border-radius:var(--padding) var(--padding) 0vh 0vh;
    border-bottom: 0.2vh solid var(--nav-icon);
    background-color: var(--nav-color);
    color: var(--color-highlight);
    font-size: var(--h3);
    font-weight: 400;
    text-align: center;
    width: 100%;
  }

  .card-stat-header {
    border-radius:var(--padding) var(--padding) 0vh 0vh;
    border-bottom: 0.2vh solid var(--nav-icon);
    background-color: var(--nav-color);
    color: var(--color-highlight);
    font-size: var(--h3);
    font-weight: 400;
    text-align: center;
    width: 100%;
  }
  
  .card-stat-body {
    border-radius: 0vh 0vh var(--padding) var(--padding);
    border-top: 0.2vh solid var(--nav-icon);
    background-color: var(--nav-color);
    color: var(--nav-icon);
    margin : 0 0 1vh 0;  
    width: 100%;
    font-size: var(--h3);
    padding-bottom: calc(var(--padding) / 2);
    padding-top: calc(var(--padding) / 4);

  }

  .card-stat-full {
    border-radius: var(--padding) var(--padding) var(--padding) var(--padding);
    background-color: var(--nav-color);
    color:rgb(0, 0, 0);
    margin : 0 0 1vh 0;  
    width: 100%;
    font-size: var(--h3);
    padding-bottom: calc(var(--padding) / 2);
    padding-top: calc(var(--padding) / 4);

  }

  .card-stat-body .main-stat,
  .card-stat-full .main-stat {
    color: var(--nav-icon);
  }
  
  .card-stat-body .left{
    
    display: inline-block;
  
  } 
  .card-stat-body .right {
    margin-top:1vh;
    width: 60%;
    margin: 0.25vh 0.25vh 0.25vh 0.25vh;
    display: inline-block;
  } 
  
  .card-stat-body .center {
    margin-top:1vh;
    width: 100%;
    margin: 0.25vh 0.25vh 0.25vh 0.25vh;
    display: inline-block;
    text-align: center;
    align-items: center;
    justify-content: center;
  } 
  
  .card-stat-body h4,
  .card-stat-full h4 {
    display: inline-block;
    text-align: left;
    align-items: center;
    color: var(--text-light);
    font-size: var(--h4);
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    line-height: var(--line);
  }
    

  .row {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display:         flex !important;
    flex-wrap: wrap !important;
  }

  .box {
    background-color: var(--color-dark);
    border-color: var(--color-light);
    border-style: solid;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

.box h4 {
    color: var(--text-light);
    word-break: break-word;
}

.box > h4 {
    color: var(--color-highlight);
    text-decoration: underline;
}

.box .main-stat h4 {
    text-align: center !important;
    align-items: center;
    color: var(--color-highlight);
}

.box .main-stat h3 {
    text-align: center !important;
    align-items: center;
    
}

.row {
    margin-left: auto !important;
    margin-right: auto !important;
}

  #dash {
    display: none;
} 

  #loader {
    display: block;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid var(--color-highlight); /* Blue */
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
  }

  
.title {
    font-weight: 900;
    color: var(--color-highlight);
}

.heading {
    font-weight: 900;
    color: var(--color-highlight);
    text-decoration: underline;
}
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .chart {
    min-height: 50vh !important;
}

#chart-container {
    width: 100%;
}

/*TABS*/

.nav-link.active {
    background-color: var(--color-highlight) !important;
    color: var(--color-dark) !important;
}

.nav-link:not(.active){
    color: var(--color-inverse) !important;
}

/*  .chart > canvas {
   height: 30vh !important;
}*/