@import url(menu.css);
@import url(tiles.css);

.banner {
    width: 100%;
    .banner-img {
        background-image: url('images/banner.jpg');
        background-size: cover;
        background-position: 50% 35%;
        height: 300px;
        width: 100%;
    }
}

#qs-container {
    max-width: unset;

    #content:not(.questionnaire) {
        margin-top: -50px;

        a {
            border-bottom: 1px solid transparent;
        }
    }
}

/*breadcrumb disable*/
#ctl00_myBreadcrum_breadcrum {
    display: none;
}

/*Home page styling begin*/
/* Banner styling */
.custom-content_container {
    border: 1px solid var(--grey-medium);
    width: 50%;
}

.search {
    max-width: var(--container-width-small);
    margin: 0 auto;
    position: relative;

    &::before {
        content: url("images/purple-arrow.svg");
        position: absolute;
        display: block;
        top: 0;
        left: -120px;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .search_wrapper {
        border: 1px solid var(--grey-medium);
        background-color: var(--white);
        position: relative;
        z-index: 1;

        .search_box {
            position: relative;

            input {
                width: 100%;
                height: 40px;
                padding: 0 8px;
                border: 1px solid var(--inactive);
                border-radius: var(--border-radius);
                font-size: 16px;
            }

            .search_dropdown#schoolSelection {
                padding: unset;
                margin: unset;
                list-style-type: none;
                max-height: 400px;
                overflow-x: hidden;
                overflow-y: scroll;
                position: absolute;
                width: 100%;
                display: none;

                &.b_search-list--open {
                    display: flex;
                    flex-direction: column;
                }
    
                li{
                    position: relative;
                    padding: 2px;
                    height: 40px;

                    &:focus-visible {
                        outline-offset: -1px;
                    }

                    &.no-results {
                        option {
                            position: relative;
                        }
                    }

                    a,
                    span:not(.highlight) {
                        width: 100%;
                        text-decoration: none;
                        color: var(--grey-dropdown-tc);
                        display: block;
                        padding: 5px 8px;
                    }

                    option {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        cursor: pointer;
                    }

                    span.highlight {
                        font-weight: bold;
                    }
    
                    &:nth-child(odd) {
                        background-color: var(--grey-dropdown-bg);
                    }
    
                    &:nth-child(even) {
                        background-color: var(--white);
                    }

                    :focus,
                    :focus-visible {
                        outline-offset: -4px;
                    }
                }
            }
        }
    }
}

/* overige content blokken */
.blok1 {
    
}

.blok2 {

}
/* Home page styling eind*/

/*contact page stying begin*/
.contactform {
    margin-top: 24px;

    .subscribe {
        display: none;
    }

    .contactfield {
        margin-top: 24px;
        margin-bottom: 15px;

        * {
            color: var(--primary);
            font-weight: var(--bold-font-weight);
        }
    }

    .b_btn {
        margin-top: 24px;
    }
}
/*contact page styling eind*/

.role_SysAdmin {
    .questionnnaire_urls {
        .link:not(.link--admin) {
            display: none;
        }
    }
}

.authenticated_True:not(.role_SysAdmin) {
    .questionnnaire_urls {
        .link:not(.link--ro) {
            display: none;
        }
    }
}

#questionnaire.questionnaire-wrapper  {
    margin-bottom: 25px;
    border: 1px solid var(--grey-medium);

    .questionnaire_preface {
        display: none;
    }

    .questionnaire {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .b_btn {
        text-decoration: none;
    }

    .link--admin.b_btn {
        a {
            color: var(--white);
            text-decoration: none;
        }
    }
}

/*custom page styling begin*/
#content #custompage {
    h2,
    h3,
    h4,
    h5 {
        color: var(--primary);
        margin-top: 24px;
        margin-bottom: unset;
    }

    p {
        margin-top: 8px;
    }

    ul {
        margin-top: 8px;
        margin-bottom: 24px;
        padding-left: 20px;
    }

    a.b_btn {
        text-decoration: none;
    }
}
/*custom page styling eind*/

/*styling voor publicaties - faq etc begin */
.b_module-wrapper {
    .nav {}

    .b_module-items {}
}
/*styling voor publicaties - faq etc eind */

/*login page styling begin*/
#container_login_control {
    margin: 0 auto;

    .placeholder_active label {
        top: -25px;
    }
    
    .container_loginfield {
        label {
            top: 3px;
            left: 5px;
        }

        .placeholder_active {
            label {
                top: -25px;
            }
        }
    }

    .container_loginfield {
        .loginfield {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: end;
            flex-wrap: wrap;
            justify-content: space-between;
            
            /* input {
                border-radius: unset;
            } */
            
        }

        .b_inputfield {
            border: 1px solid #2c2c2c;;
            padding: 4px;
        }

        input {
            height: 40px;
        }
    }
}


/*login page styling eind*/

/* schoolprofiel styling begin */
.schoolprofiel {
    margin-bottom: 60px;
    border: 1px solid var(--grey-medium);

    .schoolprofiel__header {
        margin-bottom: 30px;
        line-height: normal;
    }

    .schoolprofiel__content{
        margin-bottom: 60px;
        
        .schoolprofiel__content-right {
            width: 100%;
            margin-top: 40px;
            max-width: 540px;

            iframe {
                width: 100%;
                height: 100%;
                border: none;
                border-radius: var(--border-radius);
                box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);;

                .inner-tile {
                    border-radius: unset;
                }

                &.small-tile {
                    height: 180px;
                }

                &.big-tile {
                    height: 380px;
                }

                .tile {
                    margin-bottom: unset;
                }
            }
        }
        
        .schoolprofiel__content-left {
            max-width: 520px;
        }
    }
}
/* schoolprofiel styling eind */

.page_beheer {
    #ctl00_QsPH_myPage_h1 {
        display: none;
    }
}

/* custom media queries */
@media screen and (max-width: 1200px) {
    .search  {
        &::before {
            display: none;
        }
    }
}

@media screen and (max-width: 1024px) {
    .custom-content_container {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    
}

@media screen and (max-width: 500px) {
    .schoolprofiel {
        .schoolprofiel__header {
            gap: 20px;
        }
    }
}