/* hulpdiensten */
:root {
    --white: #ffffff;
    --off_white: #F7F7F7;

    --ambulance_blauw: #0C5DAC;
    --btn_ambulance: #71955C;
    --btn_ambulance_light: #bdc133;
    --btn_ambulance_dark: #0c5dac;
    --btn_ambulance_hl: #506544;
    --btn_ambulance_light_hl: #9a9d2b;
    --btn_ambulance_dark_hl: #0f4477;

    --brandweer_rood: #AD0011;
    --btn_brandweer: #D1581C;
    --btn_brandweer_light: #e59c12;
    --btn_brandweer_dark: #ad0011;
    --btn_brandweer_hl: #ac410c;
    --btn_brandweer_light_hl: #bf820f;
    --btn_brandweer_dark_hl: #86000d;

    --huisartsenpostchauffeur_blauw: #005DAC;
    --btn_huisartsenpostchauffeur: #2a7a80;
    --btn_huisartsenpostchauffeur_light: #4ecdd5;
    --btn_huisartsenpostchauffeur_dark: #0d55a8;
    --btn_huisartsenpostchauffeur_hl: #19494d;
    --btn_huisartsenpostchauffeur_light_hl: #2a7a80;
    --btn_huisartsenpostchauffeur_dark_hl: #06274d;
}

@font-face {
    font-family: Arial_Rounded_Bold;
    src: url(/public/css/arialroundedbold.ttf);
}

.hulpdiensten #container
{
    max-width: 1610px;
}

body.hulpdiensten article
{
    padding-top: 2rem;
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
}
body.hulpdiensten #logo
{
    width: auto;
    text-align: center;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
}
body.ambulance #logo
{
    background-image: url(/public/images/hulpdiensten/logo_ambulance.svg);
}
body.brandweer #logo
{
    background-image: url(/public/images/hulpdiensten/logo_brandweer.svg);
}
body.huisartsenpostchauffeur #logo
{
    background-image: url(/public/images/hulpdiensten/logo_huisartsenpostchauffeur.svg);
}
body.hulpdiensten header #illu
{
    position: relative;
}

body.hulpdiensten header #illu
{
    position: relative;
    background-color: transparent;
    background-size: auto;
    background-repeat: no-repeat;
    background-image: none;
}
body.ambulance header #illu
{
    /*background-image: url(/public/images/hulpdiensten/top_ambulance.svg);*/
}
body.brandweer header #illu
{
    /*background-image: url(/public/images/hulpdiensten/top_brandweer.svg);*/
}
body.hulpdiensten header #illu > span
{
    position: absolute;
    left: 9%;
    top: 16px;
    vertical-align: middle;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}
body.hulpdiensten header #illu #logout-button
{
    position: absolute;
    right: 80px;
    top: 20px;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-repeat: no-repeat;
}
body.ambulance header #illu #logout-button
{
    background-image: url(/public/images/hulpdiensten/btn_logout_ambulance.svg);    
}
body.ambulance header #illu #logout-button:hover
{
    background-image: url(/public/images/hulpdiensten/btn_logout_ambulance_hl.svg);    
}
body.brandweer header #illu #logout-button
{
    background-image: url(/public/images/hulpdiensten/btn_logout_brandweer.svg);    
}
body.brandweer header #illu #logout-button:hover
{
    background-image: url(/public/images/hulpdiensten/btn_logout_brandweer_hl.svg);    
}
body.huisartsenpostchauffeur header #illu #logout-button
{
    background-image: url(/public/images/hulpdiensten/btn_logout_huisartsenpostchauffeur.svg);    
}
body.huisartsenpostchauffeur header #illu #logout-button:hover
{
    background-image: url(/public/images/hulpdiensten/btn_logout_huisartsenpostchauffeur_hl.svg);    
}
body.hulpdiensten header #illu .masthead
{
    position: absolute;
    top: 20px;
    right: 120px;
    text-align: right;
    font-size: 10px;
}
body.hulpdiensten header #illu .masthead > span
{
    font-size: 13px;
    font-weight: bold;
}

body.ambulance .light-blue,
body.ambulance header #illu .masthead
{
    color: var(--ambulance_blauw);
}
body.brandweer .light-blue,
body.brandweer header #illu .masthead
{
    color: var(--brandweer_rood);
}
body.huisartsenpostchauffeur .light-blue,
body.huisartsenpostchauffeur header #illu .masthead
{
    color: var(--huisartsenpostchauffeur_blauw);
}
body.hulpdiensten h1
{
    font-weight: bold;
}



body.ambulance #hulpdiensten a.abutton,
body.ambulance #hulpdiensten span.abutton
{
    background-color: var(--btn_ambulance);
}
body.ambulance #hulpdiensten a.abutton:hover
{
    background-color: var(--btn_ambulance_hl);
}
body.brandweer #hulpdiensten a.abutton,
body.brandweer #hulpdiensten span.abutton
{
    background-color: var(--btn_brandweer);
}
body.brandweer #hulpdiensten a.abutton:hover
{
    background-color: var(--btn_brandweer_hl);
}
body.huisartsenpostchauffeur #hulpdiensten a.abutton,
body.huisartsenpostchauffeur #hulpdiensten span.abutton
{
    background-color: var(--btn_huisartsenpostchauffeur);
}
body.huisartsenpostchauffeur #hulpdiensten a.abutton:hover
{
    background-color: var(--btn_huisartsenpostchauffeur_hl);
}
body.ambulance #hulpdiensten a.abutton.light,
body.ambulance #hulpdiensten span.abutton.light
{
    background-color: var(--btn_ambulance_light);
}
body.ambulance #hulpdiensten a.abutton.light:hover
{
    background-color: var(--btn_ambulance_light_hl);
}
body.brandweer #hulpdiensten a.abutton.light,
body.brandweer #hulpdiensten span.abutton.light
{
    background-color: var(--btn_brandweer_light);
}
body.brandweer #hulpdiensten a.abutton.light:hover
{
    background-color: var(--btn_brandweer_light_hl);
}
body.huisartsenpostchauffeur #hulpdiensten a.abutton.light,
body.huisartsenpostchauffeur #hulpdiensten span.abutton.light
{
    background-color: var(--btn_huisartsenpostchauffeur_light);
}
body.huisartsenpostchauffeur #hulpdiensten a.abutton.light:hover
{
    background-color: var(--btn_huisartsenpostchauffeur_light_hl);
}
body.ambulance #hulpdiensten a.abutton.dark,
body.ambulance #hulpdiensten span.abutton.dark
{
    background-color: var(--btn_ambulance_dark);
}
body.ambulance #hulpdiensten a.abutton.dark:hover
{
    background-color: var(--btn_ambulance_dark_hl);
}
body.brandweer #hulpdiensten a.abutton.dark,
body.brandweer #hulpdiensten span.abutton.dark
{
    background-color: var(--btn_brandweer_dark);
}
body.brandweer #hulpdiensten a.abutton.dark:hover
{
    background-color: var(--btn_brandweer_dark_hl);
}
body.huisartsenpostchauffeur #hulpdiensten a.abutton.dark,
body.huisartsenpostchauffeur #hulpdiensten span.abutton.dark
{
    background-color: var(--btn_huisartsenpostchauffeur_dark);
}
body.huisartsenpostchauffeur #hulpdiensten a.abutton.dark:hover
{
    background-color: var(--btn_huisartsenpostchauffeur_dark_hl);
}

body.ambulance #hulpdiensten .modulestitle,
body.ambulance #hulpdiensten table th,
body.ambulance header #illu #logout-caption
{
    color: var(--ambulance_blauw);
}
body.brandweer #hulpdiensten .modulestitle,
body.brandweer #hulpdiensten table th,
body.brandweer header #illu #logout-caption
{
    color: var(--brandweer_rood);
}
body.huisartsenpostchauffeur #hulpdiensten .modulestitle,
body.huisartsenpostchauffeur #hulpdiensten table th,
body.huisartsenpostchauffeur header #illu #logout-caption
{
    color: var(--huisartsenpostchauffeur_blauw);
}

body.ambulance .questionserie
{
    background-image: url(/public/images/hulpdiensten/btn_start_ambulance.svg);
}
body.brandweer .questionserie
{
    background-image: url(/public/images/hulpdiensten/btn_start_brandweer.svg);
}
body.huisartsenpostchauffeur .questionserie
{
    background-image: url(/public/images/hulpdiensten/btn_start_huisartsenpostchauffeur.svg);
}
body.ambulance .questionserie.serielink:hover
{
    background-image: url(/public/images/hulpdiensten/btn_start_ambulance_hl.svg);
}
body.brandweer .questionserie.serielink:hover
{
    background-image: url(/public/images/hulpdiensten/btn_start_brandweer_hl.svg);
}
body.huisartsenpostchauffeur .questionserie.serielink:hover
{
    background-image: url(/public/images/hulpdiensten/btn_start_huisartsenpostchauffeur_hl.svg);
}

body.hulpdiensten header #illu img#bgsmall,
body.hulpdiensten header #illu img#bglarge
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 86px;
    max-width: 100%;
    margin-left: -8px;
    margin-top: -6px;
}
body.hulpdiensten header #illu > img#bgsmall
{
    margin-left: -17px;
    display: none;
}
body.hulpdiensten header #illu > img#bglarge
{
    display: inline-block;
}
body.hulpdiensten header #illu #logout-caption
{
    position: absolute;
    right: 10px;
    top: 55px;
    display: none;
}

@media screen and (max-width: 900px) {
    body.ambulance header #illu
    {
        /*background-image: url(/public/images/hulpdiensten/top_ambulance_small.svg);*/
    }
    body.brandweer header #illu
    {
        /*background-image: url(/public/images/hulpdiensten/top_brandweer_small.svg);*/
    }
}

@media screen and (max-width: 800px) {
    body.hulpdiensten #logo
    {
        background-position: 20px center;
    }
}


@media screen and (max-width: 600px) {
    body.hulpdiensten header #illu .masthead
    {
        display: none;
    }

    body.hulpdiensten header #illu #logout-button
    {
        right: 23px;
    }

    body.hulpdiensten header #illu img#bgsmall
    {
        display: inline-block;
    }
    body.hulpdiensten header #illu img#bglarge
    {
        display: none;
    }
    body.hulpdiensten header #illu #logout-caption
    {
        display: block;
    }
    body.huisartsenpostchauffeur header #illu > span
    {
        font-size: 5vw; /* % of width */
    }
}

@media screen and (max-width: 500px) {
    body.hulpdiensten #logo
    {
        background-size: 90%;
    }
}