/* Flood warning general styling
------------------------------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%
  }
}
.breadcrumb--container-empty {
  min-height: 64px;
}
.breadcrumb-item span.activePage {
  padding: 0px 10px;
  min-height: 44px;
  min-width: 44px;
  line-height: 44px;
}
.image-Infotext p {
  font-size: 1.1rem;
  font-weight: 500;
}
.search-container {
  background: var(--grey-four);
  padding: 15px 20px 30px 20px;
  margin-bottom: 40px;
}
.col-12.form-text {
  margin-bottom: 5px;
  color: var(--grey-two);
}
.btn-search {
  --bs-btn-bg: var(--verdant-green);
  --bs-btn-color: #000000;
  --bs-btn-border-color: var(--grey-one);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--scottish-teal);
  --bs-btn-hover-border-color: var(--scottish-teal);
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--grey-one);
  --bs-btn-active-border-color: var(--grey-one);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--grey-one);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--grey-one);
  --bs-gradient: none;
  margin: 0 2px;
}
p.text-highlight {
  color: var(--scottish-dark-teal);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.875rem;
}
@media (min-width: 320px) {
  .btn-outline-primary {
    width: auto;
    margin-bottom: 10px;
  }
}
@media (min-width: 992px) {
  .btn-outline-primary {
    width: auto;
    margin-bottom: 10px;
  }
}
/* Flood warning quick dial codes
------------------------------------ */
tbody > tr.child {
  display: none;
}
tbody:not(.expanded) > tr:not(.child) > td.has-children:first-child {
  background: url("../images/icons/plus.png") no-repeat 50% 50%;
  cursor: pointer;
}
tbody.expanded > tr:not(.child) > td.has-children:first-child {
  background: url("../images/icons/minus.png") no-repeat 50% 50%;
  cursor: pointer;
}
/* Flood warning list
------------------------------------ */
.floodingalert__heading h2 {
  color: #000000;
  margin-bottom: 0;
  font-weight: 600;
}
@media (min-width: 320px) {
  .floodingalert__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .floodingalert__heading h2 {
    font-size: 1.55rem;
    margin-top: 20px;
    line-height: 2.5rem;
  }
}
@media (min-width: 576px) {
  .floodingalert__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .floodingalert__heading h2 {
    font-size: 2rem;
    margin-top: 0px;
    line-height: 2.5rem;
  }
}
@media (min-width: 1200px) {
  .floodingalert__heading h2 {
    margin-top: 20px;
    line-height: 1.5rem;
  }
}
@media (min-width: 1400px) {
  .floodingalert__heading h2 {
    font-size: 2rem;
    margin-top: 28px;
  }
}
.warning-details__row {}
.warning-details__img {}
.warning-details__heading {
  padding-top: 10px;
}
.warning-details__heading h2 {
  line-height: 2rem;
  font-size: 1.5rem;
}
.warning-details__list {
  padding-bottom: 15px;
}
.warning-details__site {
  padding-bottom: 10px;
}
@media (min-width: 320px) {
  .alert .alert__heading {
    padding-top: 15px;
  }
}
@media (min-width: 576px) {
  .alert .alert__heading {
    padding-top: 0px;
  }
}
@media (min-width: 768px) {
  .alert .alert__heading {
    padding-top: 7px;
  }
}
@media (min-width: 992px) {
  .alert .alert__heading {
    padding-top: 8px;
  }
}
@media (min-width: 1200px) {
  .alert .alert__heading {
    padding-top: 15px;
  }
}
@media (min-width: 1400px) {
  .alert .alert__heading {
    padding-top: 25px;
  }
}
.alert .alert__heading h2, .alert h2.alert__heading--no-warning {
  color: var(--scottish-dark-teal);
  line-height: 1.8rem;
  font-weight: 600;
  margin-bottom: 0;
}
/* Flood warning map
------------------------------------ */
html, body {
  height: 100%;
  margin: 0;
}
.floodwarning-text--icon {
  font-size: 40px;
  left: 20px;
  position: absolute;
}
.floodwarning-text--text {
  font-weight: 600;
}
.map--holder-flooding-site {
  width: 100%;
  position: relative;
  background: #becddc;
  border: 1px solid var(--grey-three);
  overflow: visible;
}
@media (min-width: 320px) {
  .map--holder-flooding-site {
    height: 100vh;
  }
}
@media (min-width: 576px) {
  .floodwarning-text--icon {
    top: 24px;
  }
}
@media (min-width: 768px) {
  .floodwarning-text--icon {
    top: 30px;
  }
  .map--holder-flooding-site {
    height: 130vh;
  }
}
@media (min-width: 992px) {
  .floodwarning-text--icon {
    top: 17px;
  }
}
/* Ensure map remains positioned correctly */
arcgis-map {
  position: relative;
}
/* Cards - Scottish Flood Forecast
 ------------------------------------ */
.sff--card {
  border-top: 8px solid var(--verdant-green);
}
.sff--card .card-header {
  background-color: #ffffff;
  color: var(--scottish-dark-teal);
  border-bottom: 0;
  border-radius: 0;
}
.sff--card .card-body {
  text-align: center;
  margin: 10px 0 20px 0;
}
.forecast--image {
  object-fit: cover;
  -o-object-fit: cover;
  width: auto;
}
.sff--card .card-footer {
  background-color: var(--grey-four);
  padding: 15px;
}
.sff--card .card-footer a.card-link {
  color: #000000;
  border-bottom: 2px solid var(--grey-one);
  text-decoration: none;
  font-weight: 500;
  padding: 0;
}