﻿/* Start s-hertogenbosch.css */

/* #region Font */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("Lato Light"), local("Lato-Light"), url('../fonts/lato-light-ext.woff2') format("woff2");
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("Lato Light"), local("Lato-Light"), url('../fonts/lato-light.woff2') format("woff2");
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Lato Regular"), local("Lato-Regular"), url('../fonts/lato-regular-ext.woff2') format("woff2");
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Lato Regular"),local("Lato-Regular"),url('../fonts/lato-regular.woff2') format("woff2");
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Lato Bold"),local("Lato-Bold"),url('../fonts/lato-bold-ext.woff2') format("woff2");
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Lato Bold"),local("Lato-Bold"),url('../fonts/lato-bold.woff2') format("woff2");
}

/* #endregion Font*/

/* #region Root */

:root {
    --font-family: "Lato",sans-serif;
    --text-color: #000000;
    --h1-color: #00205c;
    --h2-color: #00205c;
    --h3-color: #00205c;
    --h4-color: #00205c;
    --h5-color: #00205c;
    --link-color: #00205c;
    --link-hover-color: #00205c;
    --link-icon-color: #000000;
    --button-text-color: #00205c;
    --button-font-weight: 600;
    --button-background-color: #FFF;
    --button-hover-background-color: #00205c;
    --button-outline-color: #00205c;
    --button-disabled-background-color: #FFF;
    --window-title-background-color: #00205c;
    --loader-animation-color: #ad9156;
    --slider-track-background-color: #ad9156;
    --slider-track-tracker-color: #ad9156;
    --radio-button-color: #ad9156;
    --menu-text-color: #FFF;
    --menu-background-color: #ad9156;
    --footer-background-color: #00205c;
    --footer-text-color: #FFF;
}

/* #endregion Root */

body {
    color: var(--text-color);
}

    body,
    body * {
        font-family: var(--font-family);
        line-height: 1.5;
    }

        body h1 {
            color: var(--h1-color);
            font-size: 1.875rem; /*30px*/
        }

        body h2 {
            color: var(--h2-color);
        }

        body h3 {
            color: var(--h3-color);
        }

        body h4 {
            color: var(--h4-color);
        }

        body h5 {
            color: var(--h5-color);
        }

        body a,
        body a:link,
        body a:active,
        body a:hover,
        body a:focus {
            color: var(--link-color);
        }

            body a:hover,
            body a:active {
                color: var(--link-hover-color);
            }

            /* #region znControls override */

            /* #region znLink */

            body a.znLink,
            body a.znLink:link,
            body a.znLink:visited,
            body a.znLink:hover {
                color: var(--link-color);
            }

                body a.znLink:hover,
                body a.znLink:active {
                    color: var(--link-hover-color);
                }

                body a.znLink.znLinkIconOnly,
                body a.znLink.znLinkIconOnly:link,
                body a.znLink.znLinkIconOnly:visited,
                body a.znLink.znLinkIconOnly:hover {
                    color: var(--link-icon-color);
                }

        /* #endregion znLink */

        /* #region znButton */

        body .znButtonWrapper .znButton,
        body .znButtonWrapper .znButton:hover,
        body .znButtonWrapper .znButton:active,
        body .znButtonWrapper .znButton:focus {
            color: var(--button-text-color);
            background: var(--button-background-color);
            border: 1px solid #00205c;
        }

            body .znButtonWrapper .znButton:focus-visible {
                background: var(--button-background-color);
                outline: 2px dotted var(--button-outline-color);
            }

            body .znButtonWrapper .znButton:hover,
            body .znButtonWrapper .znButton:active {
                background: var(--button-hover-background-color);
                color: #FFF;
                outline: 2px solid var(--button-outline-color);
            }

            body .znButtonWrapper .znButton.znDisabled:hover,
            body .znButtonWrapper .znButton.znDisabled:active {
                background: var(--button-disabled-background-color);
                border: 1px solid #00205c;
            }

            body .znButtonWrapper .znButton .znButtonText {
                font-weight: var(--button-font-weight);
            }

            body .znButtonWrapper .znButton .znButtonIconRight {
                display: none;
            }

        /* #endregion znButton */

        /* #region znLinkButton */

        body .znButtonWrapper .znLinkButton,
        body .znButtonWrapper .znLinkButton:hover,
        body .znButtonWrapper .znLinkButton:active,
        body .znButtonWrapper .znLinkButton:focus {
            color: var(--link-color);
            padding: 4px 10px;
            min-width: 64px;
            vertical-align: middle;
            cursor: pointer;
            height: 32px;
            line-height: 1;
            background: var(--button-background-color);
            border: 1px solid var(--button-hover-background-color);
        }

            body .znButtonWrapper .znLinkButton:focus-visible {
                background: var(--button-hover-background-color);
                color: #FFF;
                outline: 2px dotted var(--button-hover-background-color);
            }

            body .znButtonWrapper .znLinkButton:hover,
            body .znButtonWrapper .znLinkButton:active {
                background: var(--button-hover-background-color);
                color: #FFF;
                outline: 2px solid var(--button-hover-background-color);
            }

            body .znButtonWrapper .znLinkButton .znButtonText {
                font-weight: 600;
                text-decoration: none;
            }

            body .znButtonWrapper .znLinkButton .znButtonIconRight {
                display: none;
            }

        /* #endregion znLinkButton */

        /* #region znFileUpload */

        body .znFileUpload input::file-selector-button {
            color: var(--button-text-color);
            background: var(--button-background-color);
            border: 1px solid #00205c;
            font-family: var(--font-family);
            font-weight: var(--button-font-weight);
        }

            body .znFileUpload input::file-selector-button:focus-visible {
                background: var(--button-background-color);
                outline: 2px dotted var(--button-outline-color);
            }

            body .znFileUpload input::file-selector-button:hover,
            body .znFileUpload input::file-selector-button:active,
            body .znFileUpload input::file-selector-button:focus {
                background: var(--button-hover-background-color);
                color: #FFF;
                outline: 2px solid var(--button-outline-color);
            }

        body .znFileUpload.znDisabled input::file-selector-button,
        body .znFileUpload.znDisabled input::file-selector-button:hover,
        body .znFileUpload.znDisabled input::file-selector-button:active,
        body .znFileUpload.znDisabled input::file-selector-button:focus {
            background: var(--button-disabled-background-color);
            border: 1px solid #00205c;
        }

        /* #endregion znFileUpload */

        /* #region znWindow */

        body .znWindowWrapper .znWindow .znWindowTitle {
            background: var(--window-title-background-color);
        }

        /* #endregion znWindow*/

        /* #region znLoader */

        body .znLoaderWrapper .znLoader .znLoaderAnimation {
            border-top-color: var(--loader-animation-color);
        }

        /* #endregion znLoader */

        /* #region znSlider */

        body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker {
            background: var(--slider-track-background-color);
        }

            body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a {
                background: var(--slider-track-tracker-color);
                outline: 1px solid var(--slider-track-tracker-color);
            }

                body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:hover,
                body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:focus,
                body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:active {
                    box-shadow: 0px 0px 2px var(--slider-track-tracker-color);
                }

                body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:focus-visible {
                    outline: 2px solid var(--slider-track-tracker-color);
                }

        /* #endregion znSlider */

        /* #region znRadioButtonList*/
        /*body .znRadioButtonList .znRadioButtonListItem .znRadioButtonWrapper .znRadioButton[zn-checked="true"] .znIcon {
            color: var(--radio-button-color);
        }*/
        /* #endregion znRadioButtonList*/

        /* #endregion znControls override */

        /* #region Container */

        body .container {
        }

            /* #region Header */

            body .container .header {
            }

                body .container .header .headerinner .logo {
                    float: right;
                    width: 100%;
                    justify-content: right;
                    padding-right: 12px;
                }

                    body .container .header .headerinner .logo a img {
                        max-width: 250px;
                    }

            /* #endregion Header */

            /* #region Menu */

            body .container .menu {
                color: var(--menu-text-color);
                background: var(--menu-background-color);
            }

                body .container .menu div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink div.znMenuIcon .znIcon {
                    font-size: 2.5rem; /* 40px */
                }

                body .container .menu div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink:hover div.znMenuIcon,
                body .container .menu div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink:focus-visible div.znMenuIcon {
                    padding: 8px;
                }
                    body .container .menu div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink:hover div.znMenuIcon .znIcon,
                    body .container .menu div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink:focus-visible div.znMenuIcon .znIcon {
                        font-size: 2.75rem; /* 44px */
                    }

                body .container .menu div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink span.znMenuText {
                    font-size: 1.125rem; /*18px*/
                }

            /* #endregion Menu */

            /* #region Content */

            body .container .content {
            }



                body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton {
                    border: 0px none;
                    background: #FFF;
                    position: relative;
                    z-index: 1;
                    color: #000;
                }

                    body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton:focus {
                        outline: 2px dotted #00205c;
                        background: #FFF;
                    }

                    body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton:hover,
                    body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton:active {
                        outline: 0px none;
                        background: #FFF;
                    }

                    body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton .znButtonText {
                        font-weight: 500;
                        text-decoration: underline;
                    }

                    body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton:hover .znButtonText {
                        text-decoration: none;
                    }

                    body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton:disabled {
                        color: #8f8f8f;
                    }

                    body .container .content .contentinner .formulier ul.formulier-stappen li.formulier-stap .znLinkButton .znButtonText {
                        text-decoration: none;
                        font-size: 0.875rem; /*14px*/
                        font-weight: normal;
                    }

        

                /* #region Breadcrumb */

                body .container .content .contentinner .breadcrumb {
                }

            /* #endregion Breadcrumb*/

            /* #endregion Content*/

            /* #region Footer */

            body .container .footer {
                color: var(--footer-text-color);
                background: var(--footer-background-color);
                min-height: 80px;
            }

                body .container .footer .footerinner ul.footerrechts * {
                    line-height: 1;
                }

                body .container .footer .footerinner ul.footerrechts li a.znLink .znLinkIcon {
                    background: var(--footer-text-color);
                }

                    body .container .footer .footerinner ul.footerrechts li a.znLink .znLinkIcon:before {
                        color: var(--footer-background-color);
                    }

                body .container .footer .footerinner ul.footerrechts li a.znLink:hover .znLinkIcon {
                    outline: 2px solid var(--footer-text-color);
                    background: var(--footer-background-color);
                }

                    body .container .footer .footerinner ul.footerrechts li a.znLink:hover .znLinkIcon:before {
                        color: var(--footer-text-color);
                    }               

/* #endregion Footer */

/* #endregion Container */

/* Eind s-hertogenbosch.css */
