@import url("menu.css?v=3");

*, :before, :after {
    box-sizing: border-box;
}

*:focus-visible {
  outline-color: var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  outline-style: var(--focus-outline-style);
  outline-width: var(--focus-outline-width);
}

html, body {
	margin: 0;
}

body {
    font-family: "Geist", sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.2;
}

h1, .h1-style,
h2, .h2-style {
    font-family: 'Kurdish Wide Black';
    margin: 0;
    line-height: 1;
    text-transform: uppercase;  
}

h3, .h3-style {
    font-family: 'Kurdish Condensed Black';
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
}

h1, .h1-style {
    /* font-size: 60px; */
    font-size: clamp(2.4375rem, 1.5187rem + 2.1vw, 3.75rem);
}

h2, .h2-style {
    /* font-size: 36px; */
    font-size: clamp(1.5625rem, 1.0813rem + 1.1vw, 2.25rem);
}

h3, .h3-style {
    /* font-size: 24px; */
    font-size: clamp(1.25rem, 1.075rem + 0.4vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

p {
    margin: 0;
}

p.large{
    /* font-size: 22px; */
    font-size: clamp(1.25rem, 0.9583rem + 0.6667vw, 1.375rem);
    line-height: 1.4;
}

.b_btn{
    padding: 16px 16px 12px;
    font-family: 'Kurdish Condensed Black';
    font-size: 18px;
    color: var(--default-white);
    background: var(--default-black);
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    line-height: 1;
    display: inline-block;
    width: fit-content;
    border: none;
    cursor: pointer;
    letter-spacing: 0.7px;
}

.b_btn:hover{
    background: var(--pink-color);
    color: var(--default-black);
}

.b_btn::after{
    font-family: "Font Awesome 6 Pro";
    content: '\f0da';
    font-weight: 600;
    bottom: 2px;
    position: relative;
    font-size: 16px;
    display: inline-block;
    margin-left: 10px;
}

.a-fa{
    display: inline-block;
}

.a-fa div:after {
    font-size: 12px;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f08e";
    display: inline-block;
    margin-left: 6px;
    position: relative;
    bottom: 2px;
}

.error, .ok{
    color: var(--error-color);
}

.overall-error {
    margin-top: -20px;
}

#aspnetForm {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 100vh;
}



/* Focus start */
.content__buttons a:focus-visible,
.terugbtn:focus-visible,
.contactinput--button .b_btn:focus-visible,
#newsoverview a.b_btn:focus-visible,
#custompage a.b_btn:focus-visible,
#container_newslist a.b_btn:focus-visible,
#monitoren a:focus-visible,
.tile-style--home-tiles a:focus-visible {
    outline-color: var(--default-black);
}

.dashboards__wrapper .tile:focus-within, 
.rapports__wrapper .tile:focus-within{
    outline-color: var(--default-black);
    outline-offset: 0.3rem;
    outline-style: solid;
    outline-width: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 1px 1px);
    clip-path: inset(50%);
    border: 0;
}

.visually-hidden:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
}
/* Focus end */

.home_banner{
    width: 100%;
    background: var(--primary-mint-color);
    height: clamp(200px, 20vw, 300px);
    clip-path: var(--clippath-drie);
}


/* introduction section start*/
.grid.home-top{
    max-width: 1480px;
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

.tile-style--home-tiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 24px;

    .tile__section--icon, img{
        height: 40px;
    }  

    a{
        height: fit-content;
        width: fit-content;
        text-decoration: none;  
    }
}

.grid.home-top .tileset--content--items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 100px;
}

.home-top .tileset p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* introduction section end*/



/* Monitor section start*/
.bg-grid {
    background: var(--yellow-color);
    clip-path: var(--clippath-drie);
}


.monitor__container .tileset--content--items,
#monitoren .tileset--content--items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px;
}
.monitor__container .tile-section-icon,
#monitoren .tile-section-icon {
    height: -webkit-fill-available;
}

.monitor__container--wrapper .tileset,
#monitoren .tileset {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

#monitoren .tile-section-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.monitor__container .tile,
#monitoren .tile {
    position: relative;
    width: 100%;
    aspect-ratio: 370 / 296;
    
    img {
        width: 100%;
        aspect-ratio: 370 / 296;
        object-fit: cover;
    }
}

.monitor__container .text-content,
#monitoren .text-content{
    color: var(--default-white);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 24px;
    background: #00000099;
    display: flex;
    flex-direction: column;
    row-gap: 16px;   
    width: 100%;
}

.monitor__container .tile-section-text,
#monitoren .tile-section-text{
    display: none;
}

.monitor__container .tile:hover,
#monitoren .tile:hover{
    .text-content{
        height: 100%;
        justify-content: flex-end;
    }
    .tile-section-text{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

#monitoren .readMore {
    display: none;
}

#monitoren:not(.expanded) .tileset--content--items>a:nth-child(n+5) {
    display: none;
}

#monitoren:has(.tileset--content--items > a:nth-child(5)) .readMore {
    display: block;
}


/* Monitor section end*/

/* Dashboard section & Rapport section & page start */
.grid.custump, #ctl00_QsPH_container_newsoverview, #newsoverview, #newsarchive{
    gap: 40px;
    display: flex;
    flex-direction: column;
}

.grid.dashboard{
    padding-bottom: 70px;
}

.grid.rapports{
    padding-top: 70px;
}


.grid.dashboard .dashboards__overview, 
.grid.rapports .rapports__overview{ 
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

.dashboards__wrapper, 
.rapports__wrapper{
    text-align: start;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px;

    .tileset{
        display: flex;
        flex-direction: column;
        row-gap: 12px;
    }

    .tileset--content--items{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tile-style--thema{
        width: fit-content;
    }

    a{
        color: var(--default-black);
        text-decoration: none;
    }

    a:hover{
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        color: var(--pink-hover);
    }
}

/* Dashboard section & Rapport section & page end */



/* News section & news page start */

.bg-grid-news{
    background: var(--primary-mint-color);
    clip-path: var(--clippath-drie);    
}

.container_ballroomlist{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.newspreviews,
.newslist {
    text-align: start;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px;
}

.odd, .even{
    position: relative;
    width: 100%;
    aspect-ratio: 370 / 296;
    background: var(--default-black);

    img {
        width: 100%;
        aspect-ratio: 370 / 296;
        object-fit: cover;
    }
}

.nieuws-content{
    color: var(--default-white);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 24px;
    background: #00000099;
    display: flex;
    flex-direction: column;
    row-gap: 16px;   
    width: 100%;
}
.poster, .meta, .newslistitem__readmore, .nieuwspreview{
    display: none;
    color: var(--default-white);
}

.nieuws-content a{
    font-size: 24px;
    line-height: 1.2;
    font-family: 'Kurdish Condensed Black';
    text-transform: uppercase;
    color: var(--default-white);
    text-decoration: none;
        overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nieuws-content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.odd:hover, .even:hover{
    .nieuws-content{
        height: 100%;
        justify-content: flex-end;
    }
    .poster, .nieuwspreview{
        display: block;
    }
}

.listitem__image {
    height: -webkit-fill-available;
}

.wrapper_ballroom_nieuws .nieuwscontrol a{
    color: var(--default-white);
}

.newspreviews li:focus-within {
    outline-color: var(--default-black);
    outline-offset: 0.3rem;
    outline-style: solid;
    outline-width: 3px;
}

#newsarchive ul{
    margin: 0;
    padding: 0;
}

.page_news .terugbtn{
    display: none;
}

/*  */
.rapports__intro,
.dashboards__intro {
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.wrapper_ballroom_contact #content,
.wrapper_ballroom_custompage #content,
.wrapper_ballroom_nieuws .bg-grid-news,
.wrapper_ballroom_ASP__dashboard_aspx .bg-grid,
.ballroom_asp__monitoren_aspx .bg-grid-news,
.wrapper_ballroom_rapporten .bg-grid-news {
    min-height: calc(100vh - 80px - 172px);
}

#ctl00_QsPH_container_newsoverview,
.overviewheading {
    text-align: center;
}

#newsarchive, .postername{
    display: none;
}

#newsarchive[aria-hidden="false"]{
    margin: 50px 0;
    display: flex;
}

.container_newsitem, #preface_container {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    align-items: center;
}

.container_newsitem #container_meta{
    display: flex;
    order: 3;

    .meta{
        display: block;
        color: var(--default-black);
    }
    .postername{
        display: none;
    }

    #ctl00_QsPH_ctl00_preface,
    #article_container{
        max-width: 800px;
    }
}

.ballroom_nieuws .grid{
    max-width: 1080px;
}

.page_news .grid{
    max-width: 1680px;
}

.container_newsitem{
    text-align: center;
}

.container_newsitem #ctl00_QsPH_ctl00_image{
    max-width: 710px;
    width: 100%;
    max-height: 392px;
    height: 100%;
    img{
        object-fit: contain;
        width: inherit;
        height: inherit;
    }
}

#nieuws{
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* News section & news page end */


/* Login page start */

.loginfield input:not(.b_btn){
    height: 40px;
    width: 100%;
    max-width: 650px;
    border: solid 1px var(--mid-grey);
    border-radius: 5px;
}

.container_loginfield{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#login_leftside{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.login-form{
    margin-bottom: 40px;
}

/* Login page end */

/* Contact page start */
.wrapper_ballroom_custompage #content,
.wrapper_ballroom_contact #content{
    max-width: 100%;
    background: var(--primary-mint-color);
    clip-path: var(--clippath-drie);   
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

#container_contactinfo {
    max-width: 1040px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
}

.contact-intro{
    text-align: center;
}

.inputcontacttotaal, .inputcontacttotaal .contactinput{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;    
}

.inputcontacttotaal .contactinput input, .inputcontacttotaal .contactinput textarea{
    height: 40px;
    border: solid 1px var(--mid-grey);
    border-radius: 5px;
    font-size: 18px;
    padding: 10px;

}

.inputcontacttotaal .contactinput textarea{
    height: 200px;
}

.contactform {
  max-width: 1380px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 32px;
}

.contactform .contact-intro {
  grid-column: 1 / -1;
}

.contactform > :nth-last-child(-n+3) {
  grid-column: 1 / -1;
}

.contactfield label{
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--default-black);
    font-family: 'Kurdish Condensed Black';
    line-height: 1.2;
}

/* End contact page */

/* Start armoedemonitor page */
.intro__wrapper{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.intro__wrapper p {
    /* font-size: 24px; */
    font-size: clamp(1.25rem, 0.9583rem + 0.6667vw, 1.375rem);
    max-width: 1040px;
    width: 100%;
    padding: 0 20px;
}

.content__wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1040px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}

.splitsen, .content__buttons{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.monitoroverview__wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
}

.b_btn.download1:after{
    content: '\f019';
}

.b_btn.download1{
    margin-right: 38px;
}

/* Custom page start */
#custompagecontent{
	max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 40px;
	margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

#custompage .text-block{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.monitoroverview__wrapper img{
    width: 100%;
}

.page_Toelichting .content__section{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.text-block{
    margin-bottom: 90px;
}

.blueTable {
    width: 100%;
    border-collapse: collapse;
    /* margin-bottom: 3rem; */
}

.table {
    background: var(--default-white);
    border-radius: 3px;
    margin: 0;
    text-align: start;
    padding: 24px;
}

.blueTable td,
.blueTable th {
    padding: 10px 10px 10px 0px;
    border-bottom: 1px solid var(--mid-grey);
}

.blueTable tbody td {
    font-size: 13px;
}

.blueTable thead th {
    font-size: 15px;
    font-weight: bold;
    text-align: left;
}

.blueTable tfoot td {
    font-size: 14px;
}

.blueTable tfoot .links {
    text-align: right;
}

.blueTable tfoot .links a {
    display: inline-block;
    background: #1C6EA4;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
}

.th-lgnd {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.th-lgnd:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 50%;
}

.alignRight td {
    text-align: right;
}

#lgd-red:before {
    background: #D7191C;
}

#lgd-orange:before {
    background: #FDAE61;
}

#lgd-yellow:before {
    background: #FEE08B;
}

#lgd-green:before {
    background: #A6D96A;
}

#lgd-darkgreen:before {
    background: #1A9641;
}

#lgd-blue1:before {
    background: #CCDFE3;
}

#lgd-blue2:before {
    background: #77AFFF;
}

#lgd-blue3:before {
    background: #227FFF;
}

#lgd-blue4:before {
    background: #0057CC;
}

#lgd-blue5:before {
    background: #003377;
}

@media screen and (max-width: 1700px) {
    .dashboards__wrapper, .rapports__wrapper,
    .monitor__container .tileset--content--items,
    #monitoren .tileset--content--items,
    .newspreviews,
    .newslist {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .wrapper_ballroom_custompage #content, 
    .wrapper_ballroom_contact #content,
    .bg-grid-news,
    .bg-grid,
    .home_banner{
        clip-path: var(--clippath-tablet);
    }

}

@media screen and (max-width: 1480px) {
    .grid.home-top .tileset--content--items {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
}


@media screen and (max-width: 1090px) {
    .dashboards__wrapper, .rapports__wrapper,
    .monitor__container .tileset--content--items,
    #monitoren .tileset--content--items,
    .newspreviews,
    .newslist {
        grid-template-columns: 1fr 1fr;
    }

    .monitor__container .tile,
    #monitoren .tile,
    .odd, .even{
        aspect-ratio: 370 / 220;

        img {
            aspect-ratio: 370 / 220;
        }
    }

}


@media screen and (max-width: 800px) {
    .grid.home-top .tileset--content--items {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .monitor__container .text-content {
        display: flex;
    }
    .monitor__container .tile-section-text, #monitoren .tile-section-text,
    .poster, .nieuwspreview,
    .tile-section-text {
        display: block;
    }
    .monitor__container .text-content,
    .nieuws-content {
        height: 100%;
        justify-content: flex-end;
    }
    #content, .grid {
        padding: 50px 20px 70px;
    }

    .dashboards__wrapper, .rapports__wrapper,
    .monitor__container .tileset--content--items,
    #monitoren .tileset--content--items,
    .newspreviews,
    .newslist {
        grid-template-columns: 1fr;
    }

    .monitor__container .tile,
    #monitoren .tile,
    .odd, .even{
        aspect-ratio: 370 / 150;

        img {
            aspect-ratio: 370 / 150;
        }
    }
    .wrapper_ballroom_custompage #content, 
    .wrapper_ballroom_contact #content,
    .bg-grid-news,
    .bg-grid,
    .home_banner{
        clip-path: var(--clippath-mobile);
    }
    #content, .grid {
        padding: 30px 15px 40px;
    }
    
    #custompagecontent{
        padding: 0;
    }
    .wrapper_ballroom_custompage #content, 
    .wrapper_ballroom_contact #content,
    .grid.custump,
    .grid.monitoren,
    .grid.gnews{
        padding-bottom: 60px;
    }

    .grid.dashboard {
        padding-bottom: 30px;
    }
    .grid.rapports {
        padding-top: 30px;
    }
    .wrapper_ballroom_contact #content,
    .wrapper_ballroom_custompage #content,
    .wrapper_ballroom_nieuws .bg-grid-news,
    .wrapper_ballroom_ASP__dashboard_aspx .bg-grid,
    .ballroom_asp__monitoren_aspx .bg-grid-news,
    .wrapper_ballroom_rapporten .bg-grid-news {
        min-height: unset;
    }

    .contactform {
        display: flex;
        flex-direction: column;
    }

    .contactform {
        grid-gap: 24px;
    }

    .content__wrapper,
    .intro__wrapper,
    .wrapper_ballroom_custompage #content, 
    .wrapper_ballroom_contact #content,
    .grid.custump, 
    #ctl00_QsPH_container_newsoverview, 
    #newsoverview, 
    #newsarchive,
    #custompagecontent,
    #custompage, .text-block,
    #nieuws,
    .container_newsitem, #preface_container,
    #monitoren .tileset--content--items,
    .monitor__container--wrapper .tileset--content--items, 
    #monitoren .tileset,
    .container_ballroomlist,
    .newspreviews, .newslist {
        gap: 32px;
    }

    .content__buttons p {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    .b_btn.download1 {
        margin-right: 0;
    }
    #monitoren .tile-section-text{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

}


@media screen and (max-width: 400px) {
    h1, .h1-style{
        font-size: 30px !important;
        word-break: unset !important;
    }
}

@media screen and (max-width: 400px) {
    .monitor__container .tile,
    #monitoren .tile,
    .odd, .even{
        aspect-ratio: unset;
        height: 150px;
        width: 100%;

        img {
            aspect-ratio: unset;
            height: 150px;
            width: 100%;
        }
    }

    #newsoverview{
        width: 100%;
    }
    #ctl00_QsPH_container_newsoverview, .overviewheading {
        width: 100%;
    }

    .monitor__container .text-content, #monitoren .text-content,
    .nieuws-content{
        padding: 14px;
    }   

    .monitor__container .text-content, #monitoren .text-content{
        row-gap: 4px;
    }

     .content__wrapper,
    .intro__wrapper,
    .wrapper_ballroom_custompage #content, 
    .wrapper_ballroom_contact #content,
    .grid.custump, 
    #ctl00_QsPH_container_newsoverview, 
    #newsoverview, 
    #newsarchive,
    #custompagecontent,
    #custompage, .text-block,
    #nieuws,
    .container_newsitem, #preface_container,
    #monitoren .tileset--content--items,
    .monitor__container--wrapper .tileset--content--items, 
    .monitor__container--wrapper .tileset,
    #monitoren .tileset,
    .container_ballroomlist,
    .newspreviews, .newslist {
        gap: 24px;
    }

    h1, .h1-style, h2, .h2-style {
        word-break: break-word;
    }

}