/* h4 typography code will work for both desktop and mobile */
#gateway-alert-bar h4 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
}

/* Button as link */
#gateway-alert-bar a[rendertype="buttonAsLink"] {
    background-color: rgb(231, 0, 76) !important;
    color: white !important;
}

/* Alert bar container */
#gateway-alert-bar {
    background-color: rgb(209, 228, 236);
}

#gateway-alert-bar > div {
    padding-top:16px;
    padding-bottom:16px;
    margin-left:0;
}

/* Icon code will work for both desktop and mobile */
#gateway-alert-bar > div i.material-icons-outlined {
    font-size: 24px !important;
    padding-right: 8px !important;
    height: 24px;
    color: rgb(85, 86, 78);
}

/* Close button base styles */
#gateway-alert-bar button[data-link-name="close"] {
    background-color: transparent !important;
    color: inherit !important;
}

/* Remove focus styles from close button */
#gateway-alert-bar button[data-link-name="close"]:focus,
#gateway-alert-bar button[data-link-name="close"]:active,
#gateway-alert-bar button[data-link-name="close"]:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

#gateway-alert-bar button[data-link-name="close"] i {
    color: rgb(85, 86, 78);
}
#gateway-alert-bar > div > div div{
    padding-top: 0;
}

/* -------------------- */
/* Responsive Styles    */
/* -------------------- */

@media screen and (max-width: 1200px) {
    #gateway-alert-bar h4 {
        margin-right: 32px;
    }

    #gateway-alert-bar a[rendertype="buttonAsLink"] {
        margin-left: 8px;
        width: auto;
    }
}

@media screen and (max-width: 624px) {
    #gateway-alert-bar > div {
        display: block;
    }

    #gateway-alert-bar button[data-link-name="close"] i {
        position: absolute;
        top: 16px;
        right: 20px;
    }
    #gateway-alert-bar > div > div div:nth-child(2) {
        gap:16px;
    }
}

@media screen and (min-width: 624px) {
#gateway-alert-bar > div > div {
    align-items: center;
}
#gateway-alert-bar > div > div div:nth-child(2) {
    flex-direction: row;
}
#gateway-alert-bar button[data-link-name="close"]{
    padding-right: 0;
}
}