body { -webkit-text-size-adjust: 100%; }

.noSelect{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


/* SideNavBAr ----------------------------------------------------------------------------------------------*/

.sidenav{
  height: 100%;
  position: fixed;
  z-index: 101;/* stay on top*/
  width: 0px;
  top: 0;
  left: 0;
  background: rgb(15, 65, 70);
  overflow-x: hidden; 
  padding-top: 60px;
  transition: 0.5s;
}
 
.sidenav a{
  padding: 8px;
  text-decoration: none;
  font-size: large;
  color: white;
  display: block;
  white-space: nowrap;
  font-size: larger;
}
 
.sidenav a:active{
  color: rgb(148, 148, 148);
}
 
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* .droparrow{
  position: absolute;
  right: 25px;
  top: 106px;
  color:rgb(180, 180, 180);
  font-size: 20px;
  transform: rotate(180deg);
  font-family: 'Nunito', Helvetica, sans-serif;
} */

.mobile-dropdown{
  display: inline-table;
  position: relative;
  background: rgb(19, 58, 61);
  transition: 0.5s;
}

.mobile-dropdown_arrow{
  position:absolute;
  top: -8px;
  right:20px;
  width: 40px;
  height: 40px;
  transform: translate(+0%, +50%);
}

.ArrowTransform{
  transform: rotateX(180deg);
}

.mobile-dropdown-content1{
  overflow-y: hidden; /*disable horizontal scroll*/
  text-decoration: none;
  position: relative;
  width: 300px;
  height: 0px;
  /* background: rgb(90, 131, 124); */
  background: rgb(15, 65, 70);
  transition: 0.5s;
}

.mobile-dropdown-content2{
  overflow-y: hidden; /*disable horizontal scroll*/
  text-decoration: none;
  position: relative;
  width: 300px;
  height: 0px;
  /* background: rgb(90, 131, 124); */
  background: rgb(15, 65, 70);
  transition: 0.5s;
}

.mobile-dropdown-content3{
  overflow-y: hidden; /*disable horizontal scroll*/
  text-decoration: none;
  position: relative;
  width: 300px;
  height: 0px;
  /* background: rgb(90, 131, 124); */
  background: rgb(15, 65, 70);
  transition: 0.5s;
}


/* Navbar --------------------------------------------------------------------------------------------------*/

#logo{
  float: left;
  max-width: 235px;
  margin-top: 7px;
}

@media (max-width: 900px) {
  #main-navigation{
    display: none;
  }
}


#main-navigation{
  background-color: #eeefef;
  font-size: 1.4em;
  padding-top: 0.1em;
  height: 80px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
float: right;
display: block;
}

.dropdown{
cursor: pointer;
}

.dropdownMENU{
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  margin-right: 0.5em !important;
  color: #000b;
  padding: 0.5em;
}

.MENUborder{
  margin-left: 90px;
  margin-right: 90px;
  margin-top: 10px;
}

.dropdown:hover {
  color : rgb(132, 165, 163);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  background-color: lightgrey;
  position: absolute;
  box-shadow: 0px 0px 16px -8px rgba(135, 190, 147, 0.795);
  z-index: 1;
  width: auto;
  margin-left:-110px;
  margin-top: 2px;
  height: auto;
  padding-bottom: 10px;
}


.dropdown-content li { 
  display: block;
  margin-right: 0px;
  margin-left: 5px;
  clear: both;
}

/* darkmode element, text color white, edited*/
.nav-link {
  cursor: pointer;
  margin-right: 0.4em !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

  color: #000b;
}
.nav-link:hover{
  color : rgb(132, 165, 163);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
/* .dropdown:hover .dropbtn {background-color: #3e8e41;} */


li a {
display: block;
text-decoration: none;
padding: 0.5em;
text-align: center;
}

/* Mobile Navbar  */

.topnav {
  overflow: hidden;
  position: relative;
  background-color: #0693e3;
  height: 80px;
}

@media (min-width: 900px) {
  .topnav {
    display: none;
  }
}
  
.topnav #myLinks {
  display: none;
}
  
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
  
.topnav a.icon {
  font-size: 24px;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
}


.topnavitems a:hover {
  background-color: #ddd;
  color: black;
}

.topbar {
  float: right;  
}

/* Main CSS ----------------------------------------------------------------------------------------------------*/
/* Main CSS ----------------------------------------------------------------------------------------------------*/


/* SETUP------------------------------------------------------------------------------------------------------- */
.fade-in-text h1{
    color: white;
}

.fade-in-text h3{
    color: white;
}

p {
font-size: large;
font-family: 'Nunito', Helvetica, sans-serif;
}

h1 {
    font-size: large;
    font-family: 'Nunito', Helvetica, sans-serif;
  }

/* Red border */
hr.hrindex{
  background: green;
  height: 0px;
  border: 0px;
}

.text{
    color: rgb(213, 233, 223);

}

.greytext{
    color: #000d;
    font-size: small;
}

h2{
  font-size: x-large;
  font-weight: 400;
}

/* darkmode element color 1, edited*/
body{
  font-family: 'Nunito', Helvetica, sans-serif;
  background-size: cover;
  margin: 0;
  background-color: #218958;

  color: snow;
}

#MainBody {
  margin: 8px;
  margin-top: 0px;
}

@media (min-width: 900px) {
  #MainBody {
    margin-left: 10%;
    margin-right: 10%;
  }
}
@media (min-width: 1500px) {
  #MainBody {
    margin-left: 15%;
    margin-right: 15%;
    min-height: 600px;
  }
}
@media (min-width: 3000px) {
  #MainBody {
    min-height: 1200px;
  }
}

/* INDEX --------------------------------------------------------------------------------------------------- */

/* darkmode element, color 2, edited*/
.StandaloneValue{
  width: 300px;
  height: 120px;
  position: relative;
  display: inline-table;
  vertical-align:top;
  padding: 6px;
  padding-left: 8px;
  margin: 10px;
  margin-top: 0px;
  margin-right:0px;
  clear: both;
  word-wrap: break-word;
  font-size: 18px; 
  font-weight: 500;
  margin-bottom: 10px;
  border-radius: 3px;

  background-color: #00d084;
  color: #ffffff;
}



div.StandaloneValue span{
  color:#ffffff;
  font-size: 18px; 
  font-weight: 500;
}

div.StandaloneValue p{
  margin-top:25px;
}

div.refferallink{
  width: 140px;
  height: 30px;
  position: relative;
  display: inline-table;
  vertical-align: top;
  background-color: rgb(49, 161, 141);
  font-weight: 500;
  padding: 6px;
  margin: 10px;
  margin-top: 5px;
  margin-right:40%;
  clear: both;
  word-wrap: break-word;
  text-align: center;
  box-shadow: 0px 0px 2px 0px rgb(255, 255, 255);
}

.dropdown-referlink {
  display: none;
  position: absolute;
  background-color: #036f77;
  box-shadow: 0px 0px 2px 0px rgb(255, 255, 255);
  z-index: 1;
  width: 200px;
  margin-left:-10px;
  margin-top:12px;
  height: auto;
  padding-bottom: 8px;
}

.dropdown:hover .dropdown-referlink {
  display: block;
}


@media (max-width: 675px) {
  div.StandaloneValue{
    width: 88%;
    height: 100px;
    position: relative;
    display: inline-table;
    vertical-align:top;
    padding: 6px;
    margin: 10px;
    margin-left: 5%;
    margin-top: 0px;
    clear: both;
    word-wrap: break-word;  
  }

  div.refferallink{
    margin-left: 5%;
    margin-right:0%;
  }
}

div.imagein{
  position:absolute;
  top: 75px;
  right:10px;
  width: 40px;
  height: 40px;
}

/* ABOUT -------------------------------------------------------------------------------------------------- */

/* darkmode element, color 2, edited*/
/* darkmode element, text color white, edited */
#About{
  width: auto;
  display: block;
  padding: 3%;
  clear: both;
  font-size: large;
  word-wrap: break-word;
}

/* CHART--------------------------------------------------------------------------------------------------- */


#wholechartcontainer{
  width: auto;
  display: block;
  clear: both;
  margin-bottom: 6px;
  margin-top: 50px;
}

/* darkmode element, color 2 edited*/
#container{
  width: auto;
  padding-top: 35px;
  background-color: #00d084;
  border-radius: 3px;

}

#chart{
  width: auto;
  padding: 10px;
  height: 350px;
  border-radius: 3px;
}
@media (max-width: 900px) {
  #chart{
    height: 400px;
  }
}
@media (min-width: 2100px) {
  #chart{
    height: 500px;
  }
}

/* Information ----------------------------------------------------------------------------------------------*/

/* darkmode element, color 2 , edited*/
/* darkmode element, text color grey, edited */
#InformationBox{
  margin-top: 120px;
  margin-bottom: 40px;
  width: auto;
  padding-left: 4%;
  padding-right: 4%;
  padding-top: 1px;
  padding-bottom: 10px;
  height: auto;
  min-height: 20px;
  background-color: #00d084;
  border-radius: 3px;

}

/* TOOLTIP ------------------------------------------------------------------------------------------------- */

.tooltipDesign{
  width:auto;
  height: auto;
  background-color: rgb(17, 158, 99);
  color: rgb(255, 255, 255);
  position:absolute;
  right: 22px;
  top: 135px;
  font-size: 16px;
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  animation: fadeIn;
  animation: fadeOut;
  transition: 0.1s;
}

@media (min-width: 900px) {
  .tooltipDesign{
    right: 11%;
  }
}

@media (min-width: 1500px) {
  .tooltipDesign{
    right: 16%;
  }
}

.tooltipUL{
  text-align: left;
  font-size: 16px;
  padding: 5px;
}

/* Sliders and Control Panel ----------------------------------------------------------------------------------*/
   
/* darkmode element, color 2 , edited*/
#controlPanel{
  display: block;
  position: absolute;
  z-index: 90;
  float: left;
  width: 95%;
  justify-content: center;
  margin-left: 0px;
  margin-right: 0px;
  min-height: 35px;
  background-color: #00d084;
  border-radius: 3px;
}

@media (min-width: 650px) {
  #controlPanel{
    width: 420px;
    margin-left: 0px;
  }
}

#dataset_switch_master{
  width: 190px;
  height: 25px;
  display: inline-block;
  padding: 1%;
  margin-bottom: 1px;
  vertical-align: top;
}

#dataset_switch{
  width: 100px;
  height: 25px;
  display: inline-block;
  margin-bottom: 1px;
  vertical-align: top;
}

#dataset_switch_text{
  width: 80px;
  height: 25px;
  display: inline-block;
  margin-bottom: 1px;
  margin-right: 0px;
}

/* darkmode element, text color lightgrey, edited */
#DateSlider_days{
  
  font-size: 15px;
}

/* darkmode element, text color lightgrey, edited */
#GrowthAveragingSlider_days{
  font-size: 15px;
}

#GrowthAveragingSlider_daysorhours{
  font-size: 15px;
}

#GrowthAveragingSlider_box{
  width: 97%;
  display: inline-block;
  padding: 1%;
  margin-bottom: 8px;
  margin-right: 2px;
  vertical-align: top;
  /* margin-top: -6px; */
  height: 35px;
  display: none;
}
#GrowthAveragingSlider_box.displaycntrl{
  display: inline-block;
}


#GrowthAveragingSlider_text{
  display: inline;
}
#Slider_text{
  display: inline;
}

#Slider_box{
  width: 97%;
  height: 45px;
  display: inline-block;
  padding: 1%;
  margin-bottom: 8px;
  margin-right: 2px;
  vertical-align: top;
  /* margin-top: -6px; */
  height: 35px;
}

 /* darkmode element, text color white, edited*/
#ROISlider_plots{
  font-size: 15px;
}

#SelectionSlider{
  width: 70px;
  float: right;
  padding: 1%;
  margin-bottom: 10px;
  margin-right: 10px;
}


.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
  
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 1px 1px rgb(130, 150, 150);
  cursor: pointer;
}
  
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0px 0px 1px 1px rgb(130, 150, 150);
}

.selectionswitch {
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
  
.selectionswitch::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 20px;
  background: rgb(130, 150, 150);
  cursor: pointer;
  opacity: 1;
}
  
.selectionswitch::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: rgb(130, 150, 150);
  cursor: pointer;
  opacity: 1;
}

#smooth_switch_master{
  width: 100px;
  height: 25px;
  /* background-color: red; */
  padding: 1%;
  margin-bottom: 1px;
  margin-right: 5px;
  vertical-align: top;
  float: right;
}


#switchposition {
  width: 40px;
  height: 25px;
  display: inline-block;
  /* background-color: rgb(10, 2, 2); */
  padding: 1%;
  padding-top: 2px;
  margin-bottom: 1px;
}

#switchtext {
  width: 50px;
  height: 25px;
  display: inline-block;
  vertical-align: top;
  /* background-color: rgb(54, 47, 47); */
  padding: 1%;
  margin-bottom: 1px;
  margin-left: 0px;
}

#switchposition_text {
  display: inline-block;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.sliderswitch {
  position: absolute;
  cursor: pointer;
  opacity: 0.8;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0px 0px 0px 1px rgb(144, 163, 167);
}

.sliderswitch:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: 0px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderswitch {
  background: rgb(130, 150, 150);
}

input:checked + .sliderswitch:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/*  Profitability Page ------------------------------------------------------------------------------------- */

/* darkmode element, color 2, edited */
/* darkmode element, text color lightgrey, edited */
#Profitability_Master{
  margin-top: 50px;
  /*background-color: white;*/
  /*color: #000d;*/
  width: auto;
  display: block;
  padding: 20px;
  clear: both;
  font-size: large;
  word-wrap: break-word;
  /* box-shadow: 0px 0px 5px 5px rgba(21, 146, 146, 0.795); */
}

#Profitability{
  display: inline-block;
  width: 48%;
  margin-top: 10px;
  clear: both;
  font-size: large;
  word-wrap: break-word;
  padding: 5px;
  padding-top: 5px;
  background-color: #00d084;
}
#Profitability p{
margin: 0px;
padding: 0px;
}

@media (max-width: 1000px) {
#Profitability{
display: block;
width: auto;
}
}


#Profitability_Result{
  display: block;
  width: 250px;
  margin: auto;
  padding: 10px;
  padding-top: 0px;
  clear: both;
  font-weight: 400;
  font-size: 35px;
  height: auto;
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
  background-color: #00d084;
}

#Profitability_Result_Panel{
  display: block;
  width: 300px;
  margin: auto;
  background-color: rgb(49, 161, 141);
  padding: 10px;
  padding-top: 0px;
  clear: both;
  font-weight: 300;
  font-size: 45px;
  color: white;
  height: auto;
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
}

/*  Profitability Slider ------------------------------------------------------------------------------------- */


#Profitability_Slider_box{
  /* background-color: #036f77; */
  width: auto;
  padding: 5px;
  height: 45px;
  display: block;
  margin-bottom: 15px;
  margin-right: 2px;
  margin-left: 2px;
}



/* footer -------------------------------------------------------------------------------------------------*/

#footer{
  font-family: 'Nunito', Helvetica, sans-serif;
  padding: 1%;
  text-align: center;
  overflow-wrap: break-word;
  margin-top: -1px; 
  max-width: 1400px;
  margin-inline: auto;
  /* margin trying to stop grey lines on Iphone */
}

/* darkmode element, color 2, edited*/
#footer-container{
  background-color: #eeefef;
  max-width: auto;
  margin-bottom: 0;
}

#footer-container a{
 text-decoration: none;
 color: #000d;
 font-size: 17px;
 font-weight: 400;
 display: inline-block;
 margin-bottom: 15px;
}



.footerContainer img {
  margin-top: 10px;
}

@media (min-width: 650px) {
  #donations_box{
    width: 70%;
    margin-left: 15%;
  }
}

svg {
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
}


.clearfix {
  overflow: auto;
}