/**
 * @file
 * Styles for Alert Bar
*/
.region-alert-bar > *{
    max-width: 100%;
    margin-bottom: 0;
}
.region-alert-bar .views-element-container:not(.alignwide):not(.alignfull),
.region-alert-bar .views-element-container > div{
    max-width: 100%;
    width: 100%;
}
.region-alert-bar .view-content{
    flex-direction: column;
}
.region-alert-bar .alert-bar{
    padding: var(--spacing-10) 4vw;
}
@media screen and (min-width: 850px){
    .region-alert-bar .alert-bar{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--spacing-10);
    }
}
.region-alert-bar .alert-bar h2{
    margin-bottom: 0;
    font-weight: var(--med-weight);
}
.region-alert-bar .alert-bar h2,
.region-alert-bar .alert-bar p{
    margin-top: 0.35rem;
}
.region-alert-bar .alert-bar p{
    margin: 0;
}
.region-alert-bar .alert-bar p a{
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
    transition: var(--three-sec-trans);
}
.region-alert-bar .alert-bar p a:hover, .region-alert-bar .alert-bar p a:focus{
    text-decoration: underline;
    text-decoration-style: solid;
}
/* Assign colors */
.region-alert-bar .alert-bar.urgent{
    background-color: var(--red);
    color: var(--white);
}
.region-alert-bar .alert-bar.alert{
    background-color: var(--sage);
}
.region-alert-bar .alert-bar.notice{
    background-color: var(--smoke);
}