/* 
body {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #212529;
}

a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #ff5c39;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: #ff5c39 !important;
}

title {
  color: #ff5c39;
}

.dark-mode body { 
  color: #F3EBD6;
  background-color: #380A10;
}
*/

/*#color pallet 
  #F3EBD6 || cream
  #380A10 || brown
  #eadeba || dark cream
  #59101a || light brown
  #AB9ABC || pa‘ohi‘aka
  #31ABC2 || kilau
  #A5C268 || loulu
  #F7AFB2 || okika
  #F89B55 || mikinalo 
  #A1C1AC || ‘ie‘ie
*/

 
@font-face {font-family: 'WardSansBody'; src: url('fonts/Regular.woff2') format('woff2');}
@font-face {font-family: 'WardSansBold'; src: url('fonts/Bold.woff2') format('woff2');}
@font-face {font-family: 'WardSansMed'; src: url('fonts/Medium.woff2') format('woff2');}
@font-face {font-family: 'WardSansLight'; src: url('fonts/Light.woff2') format('woff2');}

html, body {
  background-color: #F3EBD6; 
  width:100%; 
  height:100%; 
  font-family: 'WardSansBody', sans-serif;
  
}

#login-button {
  background-color: #380A10; 
  width:100%; 
  height:100%; 
  font-family: 'WardSansBody', sans-serif;
  text-transform: uppercase;
}

 #logout-button {
  background-color: #380A10;
  opacity: .6;
  font-size: 8px;
  align-items: center;
  font-family: 'WardSansBody', sans-serif;
  text-transform: uppercase;
  
 }

.main-header{
  border-bottom: none!important;
}
/* SIDEBAR AND CONTROLBAR  */


 
.sidebar .nav-link p, .sidebar .nav-icon, 
.fa-angles-right{
  color: #380A10
  
}
.sidebar .nav-link p {
  font-family:'WardSansBold', sans-serif; 
  letter-spacing:1.5px; 
  font-size: .7rem 
  
}
.sidebar .nav-link p:hover {
  text-decoration: underline; 
  text-underline-offset: 5px;
  
}
.control-sidebar-slide-open .control-sidebar, 
.control-sidebar-slide-open .control-sidebar::before {
  padding: 35px !important;
  background-color: #F3EBD6 !important;
}            
               
 .btn-sm .fas {color: #eadeba; opacity: .6}
 
     
/* TAB PANELS AND BOXES/CARDS ARE IN UI.R FILE */               
 

.highcharts-boxplot-box{
  fill: #F3EBD6;
}
 
 
.highcharts-boxplot-series.highcharts-color-0 .highcharts-boxplot-box,
.highcharts-boxplot-series.highcharts-color-0 .highcharts-boxplot-median,
.highcharts-boxplot-series.highcharts-color-0 .highcharts-boxplot-whisker,
.highcharts-boxplot-series.highcharts-color-0 .highcharts-boxplot-stem {
  stroke: #31ABC2 !important; /* green for Predicted */
}

.highcharts-boxplot-series.highcharts-color-1 .highcharts-boxplot-box,
.highcharts-boxplot-series.highcharts-color-1 .highcharts-boxplot-median,
.highcharts-boxplot-series.highcharts-color-1 .highcharts-boxplot-whisker,
.highcharts-boxplot-series.highcharts-color-1 .highcharts-boxplot-stem {
  stroke: #380A10 !important; /* orange for Observed */
}

.highcharts-boxplot-series.highcharts-color-2 .highcharts-boxplot-box,
.highcharts-boxplot-series.highcharts-color-2 .highcharts-boxplot-median,
.highcharts-boxplot-series.highcharts-color-2 .highcharts-boxplot-whisker,
.highcharts-boxplot-series.highcharts-color-2 .highcharts-boxplot-stem {
  stroke: #F89B55 !important; /* orange for Observed */
}

.highcharts-tooltip-box {
  stroke: #F7AFB2 !important;
  stroke-width: 2px !important;
  fill: #ffffff !important;
}
              
               .bg-secondary {background-image: url('oceanview.jpg'),
               linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 51%, rgba(0, 0, 0, 0.5) 100%);
               color: #380A10; 
               font-family: 'WardSansLight', sans-serif; 
               font-size: 18px; margin: 10px;
               padding: 15px 45px; transition: 0.5s;
               background-size: cover;  /* Make sure the image covers the container */
               background-position: center;  /* Center the image */
               box-shadow: none; display: block; border-radius:0px}
               
               .bg-secondary:hover {background-position: right center; background-size: 150%;  /* Slight zoom effect on hover */
               color: #380A10; text-decoration: none;}
               .dark-mode .bg-secondary {box-shadow: none;}

               div.small-box.bg-primary,
               .bg-primary {
               background-color: #31ABC2 !important;
               font-family: 'WardSansMed', sans-serif; 
               text-transform: uppercase;
               font-size: 15px; 
               margin: 10px 0px;
               padding: 5px 25px; transition: 0.5s;
               background-position: center;  /* Center the image */
               box-shadow: none; display: block; border-radius:0px}  
              
               div.small-box.bg-warning,
               .bg-warning {
               background-color: #A5C268 !important;
               font-family: 'WardSansBold', sans-serif; 
               text-transform: uppercase;
               font-size: 15px; 
               margin: 10px 0px;
               padding: 5px 25px; transition: 0.5s;
               background-position: center;  /* Center the image */
               box-shadow: none; display: block; border-radius:0px}  
              
              div.small-box.bg-danger,
               .bg-danger {
               background-color: #AB9ABC !important;
               font-family: 'WardSansBold', sans-serif; 
               text-transform: uppercase;
               font-size: 15px; 
               margin: 10px 0px;
               padding: 5px 25px; transition: 0.5s;
               background-position: center;  /* Center the image */
               box-shadow: none; display: block; border-radius:0px}  
               
               div.small-box.bg-info,
               .bg-info {
               background-color: #A1C1AC !important;
               font-family: 'WardSansBold', sans-serif; 
               text-transform: uppercase;
               font-size: 15px; 
               margin: 10px 0px;
               padding: 5px 25px; transition: 0.5s;
               background-position: center;  /* Center the image */
               box-shadow: none; display: block; border-radius:0px}  
              
               div.small-box.bg-success,
               .bg-success {
               background-color: #F89B55 !important;
               font-family: 'WardSansBold', sans-serif; 
               text-transform: uppercase;
               font-size: 15px; 
               margin: 10px 0px;
               padding: 5px 25px; transition: 0.5s;
               background-position: center;  /* Center the image */
               box-shadow: none; display: block; border-radius:0px}  
               
              
              
               .bg-lime a, .bg-lime a:active, .bg-lime a:focus {
               background-color: #380A10 !important;
               color: #F3EBD6 !important;
               font-family: 'WardSansBody', sans-serif; 
               text-transform: uppercase;
               font-size: 12px; 
               border-radius:0px
               }
              .bg-lime.btn:hover,
              .bg-lime.btn:focus, .bg-lime.btn:not(:disabled):not(.disabled):active, 
              .bg-lime.btn:not(:disabled):not(.disabled).active, 
              .bg-lime.btn:active, .bg-lime.btn.active {
                border-color: #F3EBD6 !important;
                background-color: #F3EBD6 !important;
              }
              
              .bg-lime a:active, .bg-lime a:focus {
              text-decoration: underline; 
              text-underline-offset: 5px;
              }
             
              
              
              #noHeaderTabs a {display: none, background-color: #380A10}
                
               .brand-text {font-family: 'WardSansMed', sans-serif; font-size: 70%; color: #380A10}
               label {color: #380A10;}
               .brand-image {border-radius: 0; box-shadow: none !important;}
               .dark-mode label {font-size: 14px}
               .dark-mode .card {color: #F3EBD6;}
               .dark-mode .Reactable .rt-table {background-color: #380A10}
               .leaflet-control-layers {background-color: #F3EBD6;}
               
 /* SLIDERS */              
.irs {font-family:'WardSansMed', sans-serif;}
.irs-grid-pol {display:none}

.irs-grid-text {color: #380A10; font-size: 14px}

.irs-min {display: none}

.irs-m ax {display: none}

.irs--shiny .irs-bar {background: #380A10; border-top: 2px solid #380A10; border-bottom: 2px solid #380A10}

.irs-bar-edge {background: black; border: 2px solid black; heigh 25px}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {padding: 4px; margin-bottom: 5px; line-height: .7; 
               background-color: #380A10; font-size: 14px; border: 2px solid #380A10}

.irs--shiny .irs-handle {margin-top: 5px; border: 4px solid #380A10; background-color: #59101a}
               
.small-box-footer {height: 0px !important;}
               
               
               
               .selectize-dropdown [data-selectable].option.active {background-color: #F3EBD6; color: #380A10;}
               .dark-mode .selectize-input.full {background-color: #D8D8D8; color: #3F4A58; border: 2px solid #3F4A58;} 
               .selectize-input.full {border: 2px solid #3F4A58;} 
               .dark-mode .selectize-dropdown [data-selectable].option.active {background-color: #F3EBD6; color: #380A10;}
               .selectize-dropdown .selected {background-color: #eadeba;}
               .selectize-input:hover {color: #59101a; border: 2px solid #380A10;}
               .dark-mode .selectize-input:hover {color: #F3EBD6; border: 2px solid white}
               
               .dark-mode .selectize-dropdown-content {background-color: #D8D8D8; color: #3F4A58;} 
               
               .leaflet-tooltip {border: 1px solid #3F4A58}
               
               .section.sidebar.my-class {overflow: visible; z-index: 10;}
               


/* REACTABLE TABLES AND CHARTS */

.ReactTable {background-color: #F3EBD6 !important;}