#chartdiv {
    width: 100%;
    height: 500px;
    max-width: 100%;
  }

  #chartdivSub {
    width: 100%;
    height: 500px;
    max-width: 100%;
  }
  #chartdivHome {
    width: 100%;
    height: 400px;
    max-width: 100%;
  }

  #chartdivSpot {
    width: 100%;
    height: 500px;
    max-width: 100%;
  }
  
  #controls {
    overflow: hidden;
    padding-bottom: 3px;
  }

  #controlsSub {
    overflow: hidden;
    padding-bottom: 3px;
  }

  #controlsSpot {
    overflow: hidden;
    padding-bottom: 3px;
  }

  .App {
    text-align: center;
  }
  
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
    pointer-events: none;
  }
  
  .App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }
  
  .App-link {
    color: #61dafb;
  }
  
  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  #ActualEPIC {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 94%;
  }
  
  #ActualEPIC td, #ActualEPIC th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #ActualEPIC tr:nth-child(even){background-color: #f2f2f2;}
  
  #ActualEPIC tr:hover {background-color: #ddd;}
  
  table, th, td {
    border: 2px solid black;
  }

  #ActualEPIC th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #6A5ACD;
    color: white;
  }

  #SecondAdjust {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 94%;
  }
  
  #SecondAdjust td, #SecondAdjust th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #SecondAdjust tr:nth-child(even){background-color: #f2f2f2;}
  
  #SecondAdjust tr:hover {background-color: #ddd;}
  
  table, th, td {
    border: 2px solid black;
  }

  #SecondAdjust th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #00BFFF;
    color: white;
  }

  #FirstAdjust {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 94%;
  }
  
  #FirstAdjust td, #FirstAdjust th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #FirstAdjust tr:nth-child(even){background-color: #f2f2f2;}
  
  #FirstAdjust tr:hover {background-color: #ddd;}
  
  table, th, td {
    border: 2px solid black;
  }

  #FirstAdjust th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #FF69B4;
    color: white;
  }

  #InitialEpic {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 94%;
  }
  
  #InitialEpic td, #InitialEpic th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #InitialEpic tr:nth-child(even){background-color: #f2f2f2;}
  
  #InitialEpic tr:hover {background-color: #ddd;}
  
  table, th, td {
    border: 2px solid black;
  }

  #InitialEpic th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #FF6433;
    color: white;
  }
  
  .float-left {
    float: left;
  }
  .float-right {
    float: right;
  }
  
  .padding-top {
    padding-top: 120px;
  }
  
  .margin-fix {
    margin-top: 20px;
  }
  
  .margin-right {
    margin-right: 30px;
  }
  
  .position-absolute {
    position: absolute;
  }
  
  .margin-tp-200 {
    margin-top: 200px;
  }

  .padding-bottom-20 {
    padding-bottom: 20px;
  }

  /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

.highlight {
  background-color: #ccc !important;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

#tabs {

   width: 100%;
    height:30px; 
   border-bottom: solid 1px #CCC;
   padding-right: 2px;
   margin-top: 30px;
   

}
a {cursor:pointer;}

#tabs li {
    float:left; 
    list-style:none; 
    border-top:1px solid #ccc; 
    border-left:1px solid #ccc; 
    border-right:1px solid #ccc; 
    margin-right:5px; 
    border-top-left-radius:3px;  
    border-top-right-radius:3px;
      outline:none;
}

#tabs li a {

    font-family:Arial, Helvetica, sans-serif; 
    font-size: small;
    font-weight: bold; 
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px; 
    display:block; 
    background: #FFF;
    border-top-left-radius:3px; 
    border-top-right-radius:3px; 
    text-decoration:none;
    outline:none;
  
}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

#tabs li a:hover, #tabs li a.inactive:hover {


    color: #5685bc;
      outline:none;
}



.container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom: 10px; color: #5685bc; }

.container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; }

.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.container li { padding-bottom: 5px; margin-left: 5px;}

.preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-image: url('../images/default.gif');
  background-repeat: no-repeat; 
  background-color: #FFF;
  background-position: center;
}

.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .small-screen {
      width: 100% !important;
      margin-right: 0px !important;
    }
    .margin-top-20px {
      margin-top: 120px;
    }
    .margin-left-120 {
      margin-left: 120px !important;
    }
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    .small-screen {
      width: 100% !important;
      margin-right: 0px !important;
    }
    .margin-top-20px {
      margin-top: 120px;
    }
    .margin-left-120 {
      margin-left: 120px !important;
    }
}

.font-family {
  font-family: sans-serif !important;
  line-height: 23px !important;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    .small-screen {
      width: 100% !important;
      margin-right: 0px !important;
    }
    .margin-top-20px {
      margin-top: 120px;
    }
    .margin-left-120 {
      margin-left: 120px !important;
    }
}

.font-size {
  font-size: 15px;
}

.dropbtn {
  background-color: cadetblue;
  color: white;
  padding: 5px;
  font-size: 16px;
  border: none;
}

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

.dropdown-content {
  display: none;
  padding-left: 18px;
  margin-top: -35px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

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

.dropdown:hover .dropbtn {background-color: cadetblue; cursor: pointer;}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

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

.homeImages {
  width: 70%;
  height: 170px;
}

#tab1, #tab2, #tab3 {
  float: left;
  padding: 5px 10px 5px 10px;
  background: #000000;
  color: #FFFFFF;
  margin: 0px 5px 0px 5px;
  cursor: pointer;
  border-radius: 5px;
}

#tab1:hover, #tab2:hover, #tab3:hover {
  background: #000000;
}

#tab1Content, #tab2Content, #tab3Content {
  padding: 20px;
  border: 1px solid #000000;
  border-radius: 10px;
}

#tab1Content {
 display: block; 
}

#tab2Content, #tab3Content {
 display: none; 
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

 /* if desktop */
 .mobile_device_380px {
  display: none;
}

.mobile_device_414px {
  display: none;
}

/* .mobile_device_411px {
  display: none;
}

@media only screen and (min-width: 411px) and (max-width: 731px) {
  .myDiv{ background-color: blue; }
} */


/* if mobile device max width 380px */
@media only screen and (max-device-width: 380px) {
  .mobile_device_380px{display: block;}       
  .desktop {display: none;}
  .mobile_device_414px {display: none;}
} 

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) {
      .desktop {display: none;}
      .mobile_device_380px{display: none;}
      .mobile_device_414px {display: block;}
    }

@media only screen 
and (min-device-width : 411px) 
and (max-device-width : 731px) {
  .desktop {display: none;}
  .mobile_device_380px{display: none;}
  .mobile_device_414px {display: block;}
}