/*Code to import Open Sans*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');

/*Code to use Open Sans*/
body {
    font-family: 'Open Sans', sans-serif;
}

#custom-header {
    background-color: #f4f4f4;
    padding: 20px 40px 20px;
    position: relative;
    border-bottom: 1px solid #202A44;
}

#custom-header .logo-container {
    float: left;
    max-width: 325px;
    height: 65px;
}

#custom-header nav {
    float: right;
    padding: 5px
}

#custom-header nav>a {
    margin-right: 30px;
}

#custom-header nav>a,

#custom-header .show-updates-dropdown {
    display: inline-block;
    font-weight: 500;
    color: #202A44;
    font-size: .875rem;
    letter-spacing: 1px;
}

#custom-header .updates-dropdown {
    right: 0px;
}


@media screen and (min-width: 900px) {
    #custom-header .logo-container {
        position: relative;
        top: 7px;
    }

    #custom-header nav>a {
        position: relative;
        top: 1px;
    }

    #custom-header .show-updates-dropdown {
        padding: 9px 18px 8px;
        border: 2px solid #FFFFFF;
        border-radius: 5px;
        background: #003EE0 0% 0% no-repeat padding-box;
        opacity: 1;
        color: #FFFFFF;
    }

    #custom-header .show-updates-dropdown:hover {
        background: #3774FD 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        color: #FFFFFF;
    }
}


@media screen and (max-width: 900px) {
    #custom-header {
        text-align: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 18px;
    }

    #custom-header .logo-container {
        float: none;
        display: block;
        margin-bottom: 18px;
        max-width: none;
    }

    #custom-header .logo-container .logo {
        max-width: 325px;
        display: inline-block;
    }

    #custom-header nav {
        float: none;
    }

    #custom-header nav>a,
    #custom-header .updates-dropdown-container {
        float: none;
    }

}


@media screen and (max-width: 475px) {
    #custom-header nav>a {
        margin-right: 20px;
    }

    #custom-header nav>a,
    #custom-header nav .show-updates-dropdown {
        font-size: 13px;
    }

    #custom-header .logo-container .logo {
        max-width: 70%;
    }

    #custom-header nav>a:nth-child(1):before {
        content: none;
    }
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #202A44;
    color: white;
    border-top: 1px solid #202A44;

}

footer a {
    color: white;
}


/*
Replace "x" with the number of days you want to show + 2.
For example, if you wanted to show the last 3 days of history, you would replace x with 5.
*/

.status-day:nth-child(n+4) {
    display: none;
}

/* Only show the last incident/maintenance update on the main page */
.update+.update {
    display: none;
}

.updates-dropdown-container .show-updates-dropdown::after
{ content: "Manage my Subscriptions"; }