/* ******************************************************************************

        Custom CSS to support the widget APAN - Maintenance Banner 
        
        Date of creation: 2024 AUGUST 20
        By Arthur Gartner (VERINT) and Shawn Parrish (APAN)
        
        Arthur Gartner
        Software Engineer | Digital First Engagement
        Verint. The Customer Engagement Company
        Email: Arthur.Gartner@verint.com | +1 571-294-4689
        
        NOTE: Background color and font attributes for the Maintnenace Banner
        are changable here in the class .top-banner-custom


****************************************************************************** */


.top-banner-container {
    /* margin-bottom: 30px;    this is crucial to prevent this banner from covering up the system notifications if placed at top of header*/
    margin-bottom: 30px;
    justify-content: center;
    align-items: center;
}

.top-banner-custom {
    /*if position is absolute and the widget is bellow the navigation it will show up on the very top*/
    position: absolute; /* If absolute it mioght  covers the system-notifications */
    width: 100%;
    z-index: 200;
    /*if maintenance banner is bellow "Site - Banner" than the top value needs to be 44px*/
    /*make the value of top: 0px if you are not using an horizontal navigation bar;*/
    /*top: 87px;  Use top 87 px if using a horizontal navigation bar in the header*/
    top: 0px;
    left: 0;
    right: 0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    /*font-size:1.1vw;  THIS setting is now in the @media section below... was 1.2 rem, then 0.8em, */
    background-color: #FFDD00; /* Pantone Safety Yellow is #EDFF00, neon yellow is #EDFF00*/
    color: black;
    height: 30px;
}

    .top-banner-custom .banner-content {
        height: 100%;
        margin: auto;
        line-height: 30px;
    }


.banner-content {
    font-weight: 600;
    display: inline-block;
}

/* If the screen size is 1921px wide or more, set the font-size of <div> to  */
@media screen and (min-width: 1921px) {
    div.top-banner-custom {
        font-size: 1.2em !important; /* need the !important otherewise it inherits the font size */
        color: black;
        /*background-color: #EDFF00; */
    }
}


/* If the screen size is 671px wide or more, set the font-size of <div> to  */
@media screen and (min-width: 671px) {
    div.top-banner-custom {
        font-size: 1.0vw;
    }
}

/* If the screen size is 670px wide or less, set the font-size of <div> to */
@media screen and (max-width: 670px) {


    .top-banner-container {
        /*this is crucial to prevent this banner from covering up the system notifications*/
        margin-bottom: 0px;
        margin-top: 25px;
        z-index: 200;
    }



    .top-banner-custom {
        /*     position: relative;  if this is absolute, the site-basnner will cover it up if placed on top */
        /*     absolute, needed if maintenance banner is placed below navigation banner  */

        position: relative;
        font-size: 10px;
        width: 100%;
        top: 0px; /* top needs to be 44px for 670px width and below */
        left: 0;
        right: 0;
        text-align: center;
        background-color: #FFDD00; /* Pantone Safety Yellow is #EDFF00, neon yellow*/
        color: black;
        height: 50px;
    }

        .top-banner-custom .banner-content {
            margin: auto;
            line-height: normal;
            font-weight: 400;
            padding: 5px 10px 1px 10px;
            font-size: 1.2em;
        }
}
/* closing brakcet of moible view support*/

/**************************************************************************** END OF FILE  **********************************************************/