﻿/* Start Roosendaal.css */

/* #region Font */

@font-face {
    font-family: MuseoSans;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/museosans-300-webfont.woff2) format("woff2")
}

@font-face {
    font-family: MuseoSans;
    font-weight: 300;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/museosans-300italic-webfont.woff2) format("woff2")
}

@font-face {
    font-family: MuseoSans;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/museosans-700-webfont.woff2) format("woff2")
}

@font-face {
    font-family: MuseoSans;
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/museosans-700italic-webfont.woff2) format("woff2")
}

@font-face {
    font-family: MuseoSans;
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/museosans-900-webfont.woff2) format("woff2")
}

@font-face {
    font-family: MuseoSans;
    font-weight: 900;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/museosans-900italic-webfont.woff2) format("woff2")
}


@font-face {
    font-family: "Source Sans";
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/SourceSansVariable-Roman.woff2) format("woff2-variations")
}

@font-face {
    font-family: "Source Sans";
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    font-display: swap;
    src: url(../fonts/SourceSansVariable-Italic.woff2) format("woff2-variations")
}

/* #endregion Font*/
/* #endregion Font*/

/* #region Root */

:root {
    --font-family: "Source Sans", Arial;
    --font-family-heading: MuseoSans, "Source Sans", Arial;
    --text-color: #080808;
    --h1-color: #00482B;
    --h2-color: #2D7D57;
    --h3-color: #2D7D57;
    --h4-color: #2D7D57;
    --h5-color: #2D7D57;
    --link-color: #046A38;
    --link-hover-color: #046A38;
    --link-icon-color: #046A38;
    --button-text-color: #FFF;
    --button-font-weight: 400;
    --button-background-color: #238527;
    --button-hover-background-color: #328160;
    --button-outline-color: #000;
    --button-disabled-background-color: #238527;
    --window-title-background-color: #006139;
    --loader-animation-color: #006139;
    --slider-track-background-color: #006139;
    --slider-track-tracker-color: #006139;
    --menu-text-color: #FFF;
    --menu-background-color: #32a936;
    --footer-background-color: #006139;
    --footer-text-color: #FFF;
}

/* #endregion Root */

body {
    color: var(--text-color);
    font-size: 18px;
}

    body,
    body * {
        font-family: var(--font-family);
    }

        body h1 {
            font-family: var(--font-family-heading);
            color: var(--h1-color);
            font-weight: 700;
            font-size: 32px;
        }

        body h2 {
            font-family: var(--font-family-heading);
            color: var(--h2-color);
            font-weight: 700;
            font-size: 28px;
        }

        body h3 {
            font-family: var(--font-family-heading);
            color: var(--h3-color);
            font-weight: 700;
            font-size: 24px;
        }

        body h4 {
            font-family: var(--font-family-heading);
            color: var(--h4-color);
            font-weight: 700;
            font-size: 22px;
        }

        body h5 {
            font-family: var(--font-family-heading);
            color: var(--h5-color);
            font-weight: 700;
            font-size: 20px;
        }

        body a,
        body a:link,
        body a:active,
        body a:hover,
        body a:focus {
            color: var(--link-color);
            font-weight: 400;
            font-size: 18px;
        }

            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);
                font-weight: 400;
                font-size: 18px;
            }

                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);
            height: 40px;
        }

            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);
                outline: 2px solid var(--button-outline-color);
            }

            body .znButtonWrapper .znButton.znDisabled:hover,
            body .znButtonWrapper .znButton.znDisabled:active {
                background: var(--button-disabled-background-color);
            }

            body .znButtonWrapper .znButton .znButtonText {
                font-weight: var(--button-font-weight);
                font-size: 18px;
            }

        /* #endregion znButton */

        /* #region znLinkButton */

        body .znButtonWrapper .znLinkButton,
        body .znButtonWrapper .znLinkButton:hover,
        body .znButtonWrapper .znLinkButton:active,
        body .znButtonWrapper .znLinkButton:focus {
            color: var(--link-color);
        }

            body .znButtonWrapper .znLinkButton:focus-visible {
                color: var(--link-hover-color);
                outline: 2px dotted;
                background: transparent;
            }

            body .znButtonWrapper .znLinkButton:hover,
            body .znButtonWrapper .znLinkButton:active {
                color: var(--link-hover-color);
                outline: 0px none;
                background: transparent;
            }

            body .znButtonWrapper .znLinkButton .znButtonText {
                font-weight: 400;
                font-size: 18px;
            }

        /* #endregion znLinkButton */

        /* #region znFileUpload */

        body .znFileUpload input::file-selector-button {
            color: var(--button-text-color);
            background: var(--button-background-color);
            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);
                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);
        }

        /* #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 */


        body .znButton .znButtonText,
        body .znLinkButton .znButtonText,
        body .znFileUpload input[type="file" i],
        body .znWindowWrapper .znWindow .znWindowContent,
        body .znPopupWrapper .znPopup .znPopupContent,
        body .znTable, body .znSelectWrapper .znSelect,
        body .znSelectWrapper .znSelect .znSelectInput,
        body .znMultiSelectWrapper .znMultiSelect,
        body .znSelectWrapper .znMultiSelect .znMultiSelectInput,
        body .znTextArea, body .znTextBox,
        body .znDatePickerWrapper .znDatePicker,
        body .znTimePickerWrapper .znTimePicker, b
        ody .znDateTimePickerWrapper .znTimeDatePicker,
        body .znRadioButtonList, body .znCheckBoxList,
        body .znTooltip, body .znIcon,
        body .znColorPickerWrapper .znColorPicker,
        body .znToggleButton .znToggleButtonText,
        body .znSliderWrapper .znSlider {
            font-size: 18px;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink span.znMenuText {
            font-weight: 600;
        }

        /* #endregion znControls override */
        /* #region Container */
        body .container {
        }

            /* #region Header */

            body .container .header {
            }

            /* #endregion Header */

            /* #region Menu */

            body .container .menu {
                color: var(--menu-text-color);
                background: var(--menu-background-color);
            }




            /* #endregion Menu */

            /* #region Content */

            body .container .content {
            }

                /* #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.footerlinks li a.znLink {
                    font-size: 18px;
                }

                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 Roosendaal.css */
