body {
  overflow-x:hidden;
}

header, footer, nav, section {
  display: block;
}
.details {
  align-content: center;
  text-align: center;
  margin: 0 auto;
  display: block;
  padding-bottom: 30px;
}
.centered-div {
  text-align: center;
}
.centered-div p, .centered-div ul, .centered-div li {
  display: block;
  text-align: center;
  align-content: center;
  margin: 0 auto;
  padding-bottom: 30px;
}

/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
  border: 1px solid #ddd;
  padding: 0 1.4em 1.4em 1.4em;
  margin: 0 0 1.5em 0;
}

legend {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

textarea {
  min-height: 75px;
}

.editor-label {
  margin: 1em 0 0 0;
}

.editor-field {
  margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
  color: #f00;
}

.field-validation-valid {
  display: none;
}

.input-validation-error {
  border: 1px solid #f00;
  background-color: #fee;
}

.validation-summary-errors {
  font-weight: bold;
  color: #f00;
}

.validation-summary-valid {
  display: none;
}

#main, #secondary, #additional {
  font-size: 1em;
}

.precipRegion {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 25px;
  float: left;
  color: white;
  text-shadow: black 0.1em 0.1em 0.2em;
  border-width: 0;
  cursor: pointer;
}

.precipRegionActive {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 25px;
  float: left;
  color: white;
  text-shadow: black 0.1em 0.1em 0.2em;
  -moz-box-shadow: 0 0 5px #fff;
  -webkit-box-shadow: 0 0 5px #fff;
  box-shadow: 0 0 5px 3px #FF9900;
}
.back-button-container {
  margin-top: 20px;
  text-align: center;
}
.back-button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}
/* Style for field sets that float on the left of a container */
fieldset.left {
  display: block;
  float: left;
  width: 45%;
  min-height: 600px;
}
/* Style for container for the description in the fieldset */
.summarySide{
  display: inline-block;
  width: 48%;
  height: 300px;
  text-align: left;
  float: right;
}
/* Style for the description text */
.summary{
  font-size: 15px;
  top: 0;
  min-height: 600px;
}
/* Style for container for the image in the fieldset */
.imageSide {
  display: inline-block;
  width: 48%;
  float: left;
  overflow: hidden;
}

.imageSide img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
}
/* Style for the back button on the details page */
.detailsBack{
  bottom: 10%;
  left: 10%;
}
/* Style for field sets that float on the right of a container */
fieldset.right {
  display: block;
  float: right;
  width: 45%;
  min-height: 600px;
}

/* Style for field sets that float on the left of a container */
fieldset.stacked {
  display: block;
  width: 100%;
  margin: 0 0 1.5em 0;
  padding: 0 0 1.4em 0;
}
span.textWrapper {
  display: block;
  overflow: hidden;
  padding: 5px 10px 0 6px;
  margin: 0;
}

label.textWrapper {
  float: left;
  margin: 4px 0 0 0;
  color: black;
  width: 50%;
}
#searchbuttonimg {
  padding-top: 3px;
  padding-left: 3px;
}

.messageXSmallBlueItalic {
  font-size: x-small;
  font-weight: normal;
  font-style: italic;
  color: #006699;
}
/* used to put export button and back button on same line */
.d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}
.Sites {
  display: flex;
  justify-content: center;
  margin: 10px;
}

.siteContainer {
  display: block;
  border: 2px solid lightgrey;
  width: 150px;
  margin: 5px;
  padding: 4px;

}

.siteContainer label {
  display: block;
  margin-bottom: 5px;
}

.siteList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.siteList div {
  display: flex;
  align-items: center;
}

.siteList label {
  display: inline-block;
  margin-right: 10px;
}
.search{
  margin: 30px;
  background-color: white;
  border-color: black;
  border-width: 1px;
  font-size: 17px;
  border-radius: 4px;
  width: 100px;
  height: 40px;
}

h3.zone-id {
  font-size: .875rem;
  font-weight: bold;
}

.form-selectors {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.form-selectors .form-group {
  width:auto;
}


/** Aria implementation **/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure focus is visible for keyboard navigation */
select:focus {
  outline: 2px solid #0078d7;
  outline-offset: 2px;
}

.form-group {
  position: relative;
  margin-top: 20px;
}

.form-group label {
  position: absolute;
  top: -18px;
  left: 10px;
  font-size: 0.85em;
  transition: all 0.2s;
  background: white;
  padding: 0 5px;
}

.form-control:focus + label,
.form-control:not([value=""]) + label {
  top: -25px;
  font-size: 0.75em;
}