﻿/* Start peelgemeenten.css */

/* #region Font */

/* #endregion Font*/

/* #region Root */

:root {
    --font-family: "Segoe UI", Arial, Arial, Helvetica, sans-serif, sans-serif;
    --text-color: #000000;
    --h1-color: #1572B8;
    --h2-color: #1572B8;
    --h3-color: #1572B8;
    --h4-color: #1572B8;
    --h5-color: #1572B8;
    --link-color: #1572B8;
    --link-hover-color: #1572B8;
    --link-icon-color: #1572B8;
    --button-text-color: #FFF;
    --button-font-weight: 600;
    --button-background-color: #1572B8;
    --button-hover-background-color: #1572B8;
    --button-outline-color: #000;
    --button-disabled-background-color: #1572B8;
    --window-title-background-color: #5CADC7;
    --loader-animation-color: #5CADC7;
    --slider-track-background-color: #5CADC7;
    --slider-track-tracker-color: #5CADC7;
    --radio-button-color: #5CADC7;
    --menu-text-color: #FFF;
    --menu-background-color: #5CADC7;
    --footer-background-color: #5CADC7;
    --footer-text-color: #FFF;
}

/* #endregion Root */

body {
    color: var(--text-color);
}

    body,
    body * {
        font-family: var(--font-family);
    }

        body h1 {
            color: var(--h1-color);
        }

        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);
            font-size: 1.125rem; /*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);
            }

                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);
        }

            body .znButtonWrapper .znButton:focus-visible {
                background: var(--button-background-color);
                opacity: .9;
                outline: 2px dotted var(--button-outline-color);
            }

            body .znButtonWrapper .znButton:hover,
            body .znButtonWrapper .znButton:active {
                background: var(--button-hover-background-color);
                opacity: .9;
                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);
            }

        /* #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 {
            }

        /* #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);
                opacity: .9;
            }

            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);
                opacity: .9;
            }

        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 */

        /* #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: none;
                    text-align: center;
                }

                    body .container .header .headerinner .logo a img {
                        max-height: none;
                        max-width: 525px;
                    }

                    body .container .header .headerinner .logo a:after {
                        display: inline-block;
                        width: 425px;
                        height: 134px;
                        content: "";
                        background-image: url(../images/logo-peel-2.png);
                        background-repeat: no-repeat;
                        background-size: 425px;
                    }

            /* #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 {
                }

                    body .container .content .contentinner .breadcrumb div.breadcrumbitem a {
                        color: #5CADC7;
                    }

            /* #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 */

/* #region Responsive */
@media (max-width: 500px) {
    body .container .header .headerinner .logo a img {
        max-width: 100%;
    }
}
/* #endregion Responsive */

/* Eind peelgemeenten.css */
