body, table, td, th, input, textarea, select {
    font-family: 'Open Sans', sans-serif;
    font-size: 10.5pt;
    line-height: 1.2em;
    color: black;
    /*    color: #1ab4bc;*/
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        /*background-color: black;*/
        /*color: white;*/
    }
}

.body-content {
    padding-top: 80px; /*Needed for fixed headers/menu */
    padding-bottom: 0px; /*Height of the footer*/
}

.appfooter {
    background: #F5F5F5;
    color: black;
    border: none;
    /* Set the fixed height of the footer here */
    height: 80px;
}

.logoncon {
    background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),url("/Images/Headway-illustration-FINALS-10.png");
}

.headerlogo {
    background-image: url("/Images/headway-logo-white.png");
    background-position: left;
    background-repeat: no-repeat;
    height: 66px;
    width: 220px;
    margin: 10px;
    /*position: relative;*/
    background-size: contain;
    display: block;
}
/*.headerlogo:after {
        padding-top: 39%;*/ /* ratio height/width*100 */
/*display: block;
        content: '';
    }*/

.warntelno:after {
    content: '020 7408 0888';
}

a {
    color: #1ab4bc;
}

/* Light mode only */
@media (prefers-color-scheme: dark) {
    a {
        color: #23527c;
    }
}

#RecoverLogin, #RememberLogin {
    color: #1ab4bc;
    margin-left: -10px;
    font-weight: bold;
}

/* Sign-in / register / recover button colour  */
.buttonBrandBG, .buttonInfoBG {
    background-color: #1ab4bc;
}

    .buttonBrandBG:hover, .buttonInfoBG:hover {
        background-color: #054f4f;
    }

@media (prefers-color-scheme: dark) {
    .buttonBrandBG:hover, .buttonInfoBG:hover {
        background-color: #054f4f;
    }
}

span > text {
    color: white;
}

.typeset {
    font-weight: bold;
    background-color: #d9eded;
}

.docdivname {
    background-color: #9dd2d2;
}

    .docdivname.alt {
        background-color: #d9eded;
    }

    .docdivname:hover {
        background: #1ab4bc;
        /*  color: white;*/
        border: outset 1px silver;
    }

#expiryHint {
    color: black;
}



/* change navbar color */
.navbar {
    background-color: #1ab4bc;
    border-color: #13bcbc;
}

    .navbar .navbar-brand {
        color: #ffffff;
    }

        .navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
            color: #054f4f;
        }

    .navbar .navbar-text {
        color: #ffffff;
    }

    .navbar .navbar-nav > li > a {
        color: #ffffff;
    }

        .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus {
            color: #054f4f;
        }

    .navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus {
        color: #054f4f;
        background-color: #13bcbc;
    }

    .navbar .navbar-nav > .open > a, .navbar .navbar-nav > .open > a:hover, .navbar .navbar-nav > .open > a:focus {
        color: #054f4f;
        background-color: #13bcbc;
    }

    .navbar .navbar-toggle {
        border-color: #13bcbc;
    }

        .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus {
            background-color: #13bcbc;
        }

        .navbar .navbar-toggle .icon-bar {
            background-color: #ffffff;
        }

    .navbar .navbar-collapse,
    .navbar .navbar-form {
        border-color: #ffffff;
    }

    .navbar .navbar-link {
        color: #ffffff;
    }

        .navbar .navbar-link:hover {
            color: #054f4f;
        }

.nav navbar-nav navbar-right {
    color: white;
}

/* XXS/XS */
@media screen and (max-width: 479px) {

    h2 {
        font-size: 20px;
    }

    .navbar-brand {
        font-size: 12pt;
    }
}


/* EXTRA SMALL */
@media screen and (max-width: 767px) {

    .headerlogo {
        height: 44px;
        width: 147px;
    }

    .body-content {
        padding-top: 60px; /* Needed for fixed headers/menu */
    }

    .navbar-brand {
        font-size: 12pt;
    }

    .navbar .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }

        .navbar .navbar-nav .open .dropdown-menu > li > a:hover, .navbar .navbar-nav .open .dropdown-menu > li > a:focus {
            color: #054f4f;
        }

    .navbar .navbar-nav .open .dropdown-menu > .active > a, .navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #054f4f;
        background-color: #13bcbc;
    }


    #expiryHint {
        top: 0px;
        left: 16px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }
}

/* Medium */
@media screen and (min-width:991px) and (max-width:1199px) {
    .body-content {
        padding-top: 80px; /* Needed for fixed headers/menu */
    }

    #expiryHint {
        top: 20px;
    }
}
/* END Medium */


/* Small */
@media screen and (min-width:768px) and (max-width:991px) {

    .body-content {
        padding-top: 80px; /* Needed for fixed headers/menu */
    }

    #expiryHint {
        top: 20px;
    }
}
/* END Small */



/* Large */
@media screen and (min-width:1200px) {
    .body-content {
        padding-top: 80px; /* Needed for fixed headers/menu */
    }
}
/* END Large */