body {
  margin: 0;
  padding: 0;
  /*font-family: 'Josefin Sans';
  font-family: 'Josefin Sans", Arial, Helvetica, sans-serif';*/
  font-family: "-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color: rgb(37, 37, 37);
  min-height: 100vh;
}
/*NAVBAR*/
body nav {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #f3f3f3;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}
body nav .navbar-nav {
  width: 100%;
  display: block;
  float:right !important
}
body nav .navbar-nav a.title { 
  padding: 20px;
  text-align: center;
  width: 55%;
  font-weight: 300;
  margin-right:30px;
  color:white; /*temp*/
}
body .navbar-expand-lg .navbar-nav a.nav-item {
  color:#002e5c;
  font-weight:bold;
  padding: 43px 60px 43px 30px;
  min-height: 125px !important;
  float:right !important
}

body nav a.nav-logo img {
  max-height: 60px;
  margin: 20 50px;
}

/*CONTAINER*/
body div.container { 
  max-width: 90%;
  min-height: 80%;
  margin: 50px auto 85px;
}
@media (max-width: 1665px) {
  body div.container { 
    max-width: 100%;
    padding: 0px 20px;
  }
}

body div.container h4 {
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 45px;
}


body div.container .btn-form {
  color: #002e5c;
}
body div.container .btn-form:hover {
  text-decoration: underline;
  color: #1d97db;
}

/*LANDING PAGE*/
body div.container .landing-page {
  height: 550px;
  padding: 40 50px;
  color:black;
  margin: 0px 50px;
}

body div.container .btn-primary { 
  background-color:#002e5c; 
  border-color:#002e5c;
  margin: 30px 10px 60px;
}
body div.container .landing-page .btn-primary i { color:white;  }
body div.container .landing-page .btn-primary.active { 
  border-color: #9cb9d9;
  background-color: #3c6ea4;
  border-width: 2px;
}
body div.container .landing-page .icon { 
  margin: 30 10 20 0px; 
  color: #002e5c;
}
body div.container .landing-page .landing-forms form { margin: 20px 40px 20px 80px; }
body div.container .landing-page .landing-forms form .form-group { margin-bottom: 8px;}
body div.container .landing-page .landing-forms form .form-group label { font-size:14px;}
body div.container .landing-page .landing-forms form .form-group input { font-size:14px;}
body div.container .landing-page .landing-forms form button { float: right; }
body div.container .request_form .form-group { max-width: 600px; padding-left: 10px;}
body div.container .request_form #slider-range { max-width: 360px; margin: 8 10 16 124px; }
body div.container .request_form.message { margin:32px; }
.map { padding: 0; margin: 0; }
.map-section, .map, #map {
  height: 96%;
  width: 44vw;
}

body div.container .sign-up { margin: 30px; }

.center {text-align: center;}
body .container { padding: 0px 100px; }
body .container h2 { padding: 40px 20px; }
body .container h5 { padding: 40px 0px 10px; }
body .container .group { margin: 15px 0px; }

body .container table thead { font-size: 13px; color:#fff; background-color: #002e5c;}
body .container table thead th { padding: 6px 10px; vertical-align: middle;}
body .container table thead th.label { background-color: #fff; color: #000;}

body .container table tbody { font-size: 13px; }
body .container table tbody i { cursor:pointer; margin: 2px; }
body .container table tbody td { padding: 6px 8px; vertical-align: middle;}
body .container table tbody th { padding: 6px 10px; vertical-align: middle;}
body .container table td.color-red {background-color: #bf64642e; }
body .container table td.color-orange {background-color: #f9c059ba; }
body .container table td.color-yellow {background-color: #f8f855ad; }
body .container table td.color-green {background-color: #298029a6; }
body .container table td.color-lightgreen {background-color: #29802963; }

body .container .historical-data ul {margin: 30px 0px;}
body .container .historical-data table {margin: 15px 0px 50px;}


.section table.table_main thead tr.title th { text-align: center;}
.section table.table_main thead td { padding: 6px; }
.section table.table_main th.row_label { text-align: left;}
.section table.table_main th { text-align: right;}
.section table.table_main td { text-align: right;}
.table_main tbody tr .label {
  text-align: left;
  font-weight: bolder;
  padding-left: 20px;
  min-width: 60px; 
}

.wind-roses .table_main tbody tr .label { padding-left: 6px; min-width: 92px; }
.joint-probability .table_main tbody tr .label { width: 90px; }
.weather_windows .table_main th:not(.row_label)  { width: 100px; }
.percentiles .table_main th:not(.row_label) { width: 122px; }

/*?*/
body div.container .request .title {    
  background-color: #036;
  color: white;
  padding: 10 20px;
}
body div.container .request { padding: 60px; max-width: 1000px;}
body div.container .request h2 { text-transform: uppercase; margin-bottom: 15px;}
body div.container .request h5 { margin: 40 0 15 0px;}
body div.container .request .form-group { max-width: 600px; padding-left: 10px;}
body div.container .request button { margin-top: 30px;}


.percentiles .image-container img { width: 60%; margin-bottom:50px; margin-top: 0px;}
.image-container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically (optional) */
}
.centered-image {
  max-width: 100%; /* Ensure the image doesn't exceed its container width */
}

footer {
  width: 100%;
  height: 240px;
  position: sticky;
  top: 100%;
  background-color: #002e5c;
  color: white;
  text-align: center;
}

footer .row {
  padding: 20px;
  margin: 0px;
}
footer .row .address {
  text-align: right;
  color: #e3e3e3;
  font-size: 12px;
  padding-top: 5px;
}
footer .row .sevenseas {
  font-weight: bold;
  font-size: 35px;
  margin-bottom: 30px;
}


.weather-window-form {
  background-color: #fff;
  padding: 20px 20px 65px 20px;
  border-radius: 5px;
}

.weather-window-form label {
  font-weight: bold;
}

.weather-window-form .form-control {
  margin-bottom: 10px;
}

.weather-window-form .btn-primary {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.weather-window-form .btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.weather-window-form .form-row {
  display: flex;
  flex-wrap: wrap;
}

.weather-window-form .form-group {
  flex: 1 1 100%;
  margin-bottom: 10px;
  max-width: 300px;
}

.weather-window-form .form-group.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 40px;
}

.weather-window-form .form-group.window-length {
  flex: 0 0 30%;
  max-width: 30%;
  padding: 0 40px;
}

.weather-window-form .button {
  text-align: right;
  flex: 0 0 70% !important;
  max-width: 70% !important;
  padding: 0 40px;
}

.weather-window-form .form-group:last-child .btn-primary {
  margin-top: 10px;
}



@media (max-width: 1500px) {
  .weather-window-form .form-group {
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .weather-window-form .form-group.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.navbar { min-height: 120px; }

.navbar-nav {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-pills {
  float: right !important;
}

.nav-pills .nav-link {
  border-bottom: 2px solid transparent;
  font-weight: bold;
  color: #002e5c;
  padding: 43px 22px !important;
  border-radius: 0;
}
@media (max-width: 1200px) {
  .weather-window-form .form-group {
    padding: 43px 10px !important;
  }
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
  border-bottom: 2px solid #002e5c;
  font-weight: bold;
}
.nav-fills .nav-link {
  color:#002e5c;
  border-bottom: 1px solid #fff;
  cursor:pointer;
  padding: 15px 30px;
}
.nav-fills .nav-link:hover,
.nav-fills .nav-link:focus {
  border-bottom: 1px solid #002e5c;
  color:#002e5c; 
}
.nav-pills.location-info {
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  padding-left: 40px;
}

.image-container {
  display: flex;
  justify-content: center;
}

/* Default styling for wider screens */
.image-container img {
  width: 42%;
  margin-top: 40px;
}

/* Media query for screens 1600px and below */
@media (max-width: 1600px) {
  .image-container img {
    width: 50%;
  }
}

.wind-roses .image-container {
  margin-bottom: 20px;
}

.image-container .quarter {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 70%;
}


.extremes .image-container img {
  width: 55%;
  margin-top: -13px;
}

body .container .extremes table thead th {
  padding: 10px 20px;
}

.weather-parameter-form {
  margin: 0px 30px;
}


/* Push the <p> element to the bottom right of the image */
.image-container p {
  position: absolute;
  right: 0;
  margin: 310px 210px 0px 0px;
  font-size: 15px;
}

.info-box {
  display: none;
  position: absolute;
  background-color: #fffcf0; /* Light yellow background color */
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1;
  font-size: 13px; 
}

#info-whiskers {
  right: 0;
  margin-top: 60px;
  max-width: 332px;
}

#info-percentiles {
  max-width: 1300px;

}

/* Position the text box next to the icon */
.info-box.show {
  display: block;
}

/* Style for the icon */
p.info-message {
  cursor: pointer;
  font-size: 15px;
}

.extremes .info-message { margin: 32px 120px 0px; }
.extremes .info-message.graph { margin: 315px 50px 0px 0px; }
.extremes .image-container .info-box { bottom: -50px; }

.section p { margin-bottom: 30px; }
.section p.info-message { margin-bottom: 10px; }


.ramp .chart-bar img {
  height: 70%;
  display: block; 
  margin: 0 auto;
}

.data-validation { padding: 50px; }
.data-validation h3 { padding-bottom: 20px; }
.data-validation p { padding-left: 20px; }
.data-validation .chart-bar p { padding-left: 20px; text-align: center; }
.data-validation .chart-bar .info-box { left: -520px; min-width:1000px; }
.data-validation .chart-bar .info-message { text-align: right;}

body .container .historical-data table.rmse-table { width: 550px; margin: 50px 0px;}
body .container .historical-data table.rmse-table th, td { padding: 12px 20px; }
.centered-col { text-align: center; }

.data-methods p {margin-top:4px; margin-bottom:4px;}




/* Add CSS styles for editing mode */
.editing {
  background-color: #f2f2f2; /* Change background color */
  border: 2px solid #ccc; /* Add border */
}

.editing .editable {
  border: 2px solid #0f427a; /* Add underline to editable cells */
}


.editing .data_status span {
  margin-left: 10px;
}

span.color-red { color: #dc3545; }
span.color-green { color: #28a745; }
body .container table tbody span i.fa-regular{ cursor:auto; }



.sub-section .col-lg-6 {
  max-width: 50%;
  flex: 0 0 50%;
}

@media (max-width: 1192px) {


  .sub-section .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .image-container .quarter {
    width: 50%;
  }
}