/*--------------------------------------------------------------
# Begin Custom Branding - Can be overwritten from database
--------------------------------------------------------------*/

:root {
    --main-color: #0078bf;
    --main-bg-color: #edf6fc;
    --main-color-hover: color-mix(in srgb,var(--main-color),#0000 30%);
    --headerHeight: 100px; /* Must set height for header */
    --headerWithLogoHeight: 250px; /* Must set height for header */
}

/* Google Translate Control */
.topHeader {
    background-color: #f3f3f3;
    margin-right: 5px;
    /* position: absolute; */
    /* z-index: 999; */
    /* right: 0; */
}

/* Leave blank for no banner */
.banner {
    background-color: var(--main-color);
    color: #ffffff;
    font-size: 24px;
    padding: 10px;
    /* position: absolute; */
    /* left: 300px; */
    /* top: 100px; */
}

.banner img
{
    max-height: 26px;
    margin-right: 6px;
}

.bottomHeader {
    text-align: center;
    margin-top: 25px;
    /* position: absolute; */
    /* z-index: 999999; */
    /* background-color: var(--main-color); */
}

.headerImageDiv {
}

.headerImage {
    max-width: 300px;
    max-height: 200px;
}

/*--------------------------------------------------------------
# End Custom Branding - Can be overwritten from database
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Header Override
--------------------------------------------------------------*/
@media (min-width: 1200px) {

    #main,
    #footer {
        margin-left: 0;
    }

    .header {
        height: var(--headerWithLogoHeight);
    }

    .banner img {
        display: none;
    }
}

@media (max-width: 1199px) {
    .bottomHeader {
        display: none;
    }
    .header {
        height: var(--headerHeight);
    }

    .banner img {
        display: inline;
    }
}

.header {
    box-shadow: none;
    padding-left: 0;
    background-color: var(--main-bg-color);
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
@media (min-width: 1200px) {
    #main {
        margin-top: var(--headerWithLogoHeight); /* This is set in Onboarding_SiteBranding.CustomCss */
    }
}

@media (max-width: 1199px) {
    #main {
        margin-top: var(--headerHeight);
    }
}

/*--------------------------------------------------------------
# Footer Override
--------------------------------------------------------------*/
.footer {
    background-color: var(--main-color);
    width: 100%;
    margin: 0;
}

.footer .copyright {
    text-align: center;
    color: #ffffff;
}