/* color palette */
:root {
    --green: #0DE0C5;
    --green-dark: #26A69A;
    --blue: #1B45F5;
    --light-blue: #1B7FF5;
    --very-light-blue: #E9F4F9;
    --margin-sections: 100px;
    --appear-speed: 100px;
}

/* global settings */
html *
{
   font-family: "Exo" !important;
}

.section {
    padding-top: var(--margin-sections);
    padding-bottom: var(--margin-sections);
}

.dashboard {
    padding-left: 300px;
}

.invisible {
    display: none !important;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 220vh;
}

#footer {
    flex: 0 0 100px;/*or just height:50px;*/
    margin-top: auto;
}


/* material icons */

/* fallback */
@font-face {
    font-family: 'Material Icons' !important;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }
  
  .material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

/* background colors */

.bg-rent-green {
    background-color: var(--green);
}
.bg-rent-green-dark {
    background-color: var(--green-dark);
}
.bg-rent-blue {
    background-color: var(--blue);
}

/* text colors */

.text-rent-blue {
    color: var(--blue);
}
.text-rent-green {
    color: var(--green);
}

/* nabar fine-tuning */
.brand-logo>img {
    vertical-align: middle;
}

/* homepage */

.homepage_main {
    background-repeat: no-repeat;
    height: 100vh;
    background-size: cover;
    padding-top: 1.25rem;
}

/* dashboard */
.dashboard {
    background-color: var(--very-light-blue);
    background-size: cover;
    height: 100vh;
    padding-top: 1.25rem;
}

/* animated reveals */
.reveal-up{
    position: relative;
    transform: translateY(var(--appear-speed));
    opacity: 0;
    transition: 1s all ease;
}

.reveal-up.active{
    transform: translateY(0);
    opacity: 1;
}

.reveal-down{
    position: relative;
    transform: translateY(var(--appear-speed));
    opacity: 0;
    transition: 1s all ease;
  }
  
.reveal-down.active{
    transform: translateY(0);
    opacity: 1;
}

.reveal-left{
    position: relative;
    transform: translateX(var(--appear-speed));
    opacity: 0;
    transition: 1s all ease;
  }
  
.reveal-left.active{
    transform: translateX(0);
    opacity: 1;
}

.reveal-right{
    position: relative;
    transform: translateX(-var(--appear-speed));
    opacity: 0;
    transition: 1s all ease;
  }
  
.reveal-right.active{
    transform: translateX(0);
    opacity: 1;
}

.reveal-banner.active{
    transform: translateX(0);
    opacity: 1;
}

/* animated percentage wheel */
.flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
  }
  
  .single-chart {
    width: 100%;
    justify-content: space-around ;
  }
  
  .circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 150px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
  }
  
  .circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
  .circular-chart.orange-circle .circle {
    stroke: #ff9f00;
  }
  
  .circular-chart.green-circle .circle {
    stroke: #4CC790;
  }
  
  .circular-chart.blue-circle .circle {
    stroke: #3c9ee5;
  }
  
  .percentage-text-black {
    fill: rgb(0, 0, 0);
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
  }