/* Planit Site Banners - front-end stacking bars */

.psb-banners {
    position: relative;
    z-index: 10;
}

.psb-banner {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1.25rem;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

.psb-banners .psb-banner:first-child {
    margin-top: 0 !important;
}

.psb-banner__text {
    display: inline-block;
    max-width: 100%;
}

.psb-banner__text a {
    color: inherit;
    text-decoration: underline;
}

/* Above mobile widths, force the message onto a single line. Banners are
   meant to be a short one-line notice, never a wrapped paragraph. Below
   this width the message is allowed to wrap normally, since a phone
   screen is narrow enough that even a short sentence can need two lines. */
@media (min-width: 576px) {
    .psb-banner__text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}

.psb-banner.alert-danger {
    background-color: #f8d7da;
    color: #842029;
}

.psb-banner.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}

.psb-banner.alert-warning {
    background-color: #fff3cd;
    color: #664d03;
}

.psb-banner.alert-info {
    background-color: #cff4fc;
    color: #055160;
}