/* Flood warning general styling
------------------------------------ */
.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
------------------------------------ */
.alert-heading {
    color: var(--scottish-teal);
    margin-bottom: 1rem;
    line-height: 3rem;
    font-weight: 600;
}
@media (min-width: 320px) {
    .alert-heading { font-size: 1.7rem; }
}
@media (min-width: 992px) {
    .alert-heading { font-size: 1.7rem; }
}
.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;
}
.map--holder {
    height: 100vh;
    width: 100%;
    position: relative;
    background: #becddc;
    border: 1px solid var(--grey-three);
}
/* 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;
}