.alert {
    background-color: #f8d7da;
    /* Example background color for high severity alerts */
    color: #721c24;
    /* Example text color for high severity alerts */
    padding: 1% 20%;
    text-align: center;
    font-size: 24px;
    border: 1px solid transparent;
    border-radius: .25rem;
    opacity: 0;
    transition: opacity .5s ease-in;
}

.alert-high {
    background-color: #f8d7da;
    /* Red background for high severity */
    color: #721c24;
    /* Red text color */
}

.alert-medium {
    background-color: #fff3cd;
    /* Yellow background for medium severity */
    color: #856404;
    /* Dark yellow text color */
}

.alert-low {
    background-color: #d1ecf1;
    /* Light blue background for low severity */
    color: #0c5460;
    /* Dark blue text color */
}

  /* Style when banner is visible */
  .alert.show {
    opacity: 1; /* Fully visible */
  }

.placeholder {
    margin: 0 auto;
    width: 100%;
    height: 40px;
    background-color: #eee;
    display: flex;
    border-bottom: 1px solid #d6d6d6;
}

.animated-background {
    width: 100%;
    height: 55px;
    flex: 1;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #eeeeee50 10%, #dddddd50 18%, #eeeeee50 33%);
    background-size: 100% 104px;
    height: 100%;
    position: relative;
    border: 5px solid #fff;
}


.scroll-text {
    overflow: hidden;
    white-space: nowrap;
}

.scroll-text p {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-text-p 10s linear infinite;
    font-weight: bold;
    font-size: large;
}

@keyframes scroll-text {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-text-p {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.masthead {
    /* background:linear-gradient(132deg, #F4D03F 0%, #16A085 100%);  */
    /* background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%); */
    /* background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%); */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 60s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}