* {
   box-sizing: border-box;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}
  /*border: 1px solid #e6982b; */

.border {
  border: 1px solid #e6982b;
}

.padding {
    padding: 15px;
}

.background-white {
  background-color: white;
}


.font-size-small {
  font-size: 12px;
}

.font-size-large {
  font-size: 24px;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Clear floats after the columns */
.row-body:after {
    content: "";
    display: table;
    clear: both;
}

.row {
  position: relative;
}

.row-body {
  background-color: #e6e6e6;
  border: 2 px solid #e6982b;
  padding: 2px;
}

html {
  font-family: Arial, Helvetica, sans-serif;
}

.right {
  float: right;
}

/* Style the header - Beginning */
.header-left {
  float: left;
  width: 25%;   
  margin: auto;     
}                   
.header-middle {
  float: left;  
  width: 25%;   
  margin: auto; 
}               
.header-right {     
  float: right; 
  width: 50%;   
  top: 30px;    
  margin: auto; 
  line-height: 70px;
}               
            
@media screen and (max-width: 1500px) {
  .header-left, .header-middle, .header-right {
    width: 100%; /* The width is 100%, when the viewport is 1200px or smaller */
  }                 
}                   

/* Clear floats after the columns */
.header:after {
    content: "";
    display: table;
    clear: both;
}

.header {
  /*padding: 1px;*/
  min-height: 70px;
  width: 100%;
  background-color: #e6982b;
  /* position: relative; */
  margin: auto;
}

.header-ar {
  margin: auto;
  float: right;
  line-height: 70px;
}

/* Style the header - Ending */
/* Style the body */


/* Style the footer */
.footer {
  background-color: #e6982b;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* .time-series { background-color: #e6e6e6; }  */

/* VirtualizedSelectOption affects the options when they appear in the unselected drop down list */
.VirtualizedSelectOption {
    display: inline-block;
    text-align:right;
    background-color: white;
    color: #e6982b;
}

/* VirtualizedSelectOption affects the option when they appear in the unselected drop down list and the mouse pointed is hovering over it. */
.VirtualizedSelectFocusedOption {
    background-color: #f7f7f7;
    color: #e6982b;
}

/*
.Select-control {
    background-color: white !important;
    color: #e6982b;
  }
  
.Select-menu-outer {
    background-color: white;
    color: #e6982b;
}
*/

/* Select-value-label applies to the items that have been selected from a multi-select drop down list */
.Select-value-label {
    background-color: #f7f7f7;
    color: #e6982b !important;
}

/* Select-value applies to the boxes around the items that have been selected from a multi-select drop down list */
.Select-value {
    background-color: #f7f7f7 !important;
    color: #e6982b !important;
    border: 1px solid #e6e6e6 !important;
}

/* checklist (checkbox) selected item?  */
*:checked {
  box-shadow: 0 0 0 3px #e6982b;
  border: 1px solid #e6e6e6 !important;
  background-color: #e6e6e6 !important;
  outline: 2px solid #e6982b !important;
}

/* styling the auto-refresh checkbox.  note Safari will ignore this */
/* from https://sentry.io/answers/how-to-style-a-checkbox-using-css/ */
input[type="checkbox"] {
  /*width: 3em;
  height: 3rem; */
  accent-color: #e6e6e6;  /*#e6982b;*/
}


/* range slider */
.rc-slider-track {
  background-color: #e6982b;
}

.rc-slider-dot-active {  
  border-color: #e6982b;
  border: solid 2px #e6982b;
}

.rc-slider-handle {
  background-color: #e6982b;
  border-color: #e6982b;
}

.rc-slider-handle:hover {
  border-color: #e6982b;
}

.rc-slider-handle-active:active {
  border-color: #e6982b;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}


@media only screen and (min-width: 400px) {
  /* For phones: */
  .col-sm-1 {width: 8.33%;}
  .col-sm-2 {width: 16.66%;}
  .col-sm-3 {width: 25%;}
  .col-sm-4 {width: 33.33%;}
  .col-sm-5 {width: 41.66%;}
  .col-sm-6 {width: 50%;}
  .col-sm-7 {width: 58.33%;}
  .col-sm-8 {width: 66.66%;}
  .col-sm-9 {width: 75%;}
  .col-sm-10 {width: 83.33%;}
  .col-sm-11 {width: 91.66%;}
  .col-sm-12 {width: 100%;}
}


@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-md-1 {width: 8.33%;}
  .col-md-2 {width: 16.66%;}
  .col-md-3 {width: 25%;}
  .col-md-4 {width: 33.33%;}
  .col-md-5 {width: 41.66%;}
  .col-md-6 {width: 50%;}
  .col-md-7 {width: 58.33%;}
  .col-md-8 {width: 66.66%;}
  .col-md-9 {width: 75%;}
  .col-md-10 {width: 83.33%;}
  .col-md-11 {width: 91.66%;}
  .col-md-12 {width: 100%;}
}


@media only screen and (min-width: 1000px) {
  /* For desktop: */
  .col-lg-1 {width: 8.33%;}
  .col-lg-2 {width: 16.66%;}
  .col-lg-3 {width: 25%;}
  .col-lg-4 {width: 33.33%;}
  .col-lg-5 {width: 41.66%;}
  .col-lg-6 {width: 50%;}
  .col-lg-7 {width: 58.33%;}
  .col-lg-8 {width: 66.66%;}
  .col-lg-9 {width: 75%;}
  .col-lg-10 {width: 83.33%;}
  .col-lg-11 {width: 91.66%;}
  .col-lg-12 {width: 100%;}
}


@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}