/*=====================================
    AANPASSING VOOR TinyMCE
=====================================*/

@import url('Fonts.css'); /* Noodzakelijk voor TinyMCE */

/*=====================================
    BASIS CSS font-family: "ms_300";
=====================================*/

.d-grid {
    display: grid;
    grid-template-columns: auto 30px auto; /* Left adjusts, 20px for divider, right adjusts */
    align-items: center;
    text-align: center;
}

body { 
    font-family: "poppins-reg";
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
    color: #333333;
}

.FormHeight {
    min-height: 70vh; /* Minstens een hoogte van 70% van de viewheight innemen voor body zonder footer */
}

iframe {
    border: 0;
}

body.Page {
    padding-top: 170px; /* Mag niet zomaar in body */
}

body.LoginPage {
    padding-top: 0px;
}

body.PaddingTop_PageBlanco, body.PaddingTop_PageAdmin {
    padding-top: 140px;
}

body.HomePage {
    /* background-color: #efecea; */
    background-color: rgb(29 56 122);
    padding-top: 170px; /* Mag niet zomaar in body */
}

body.SSApplicatie_Body {
    padding-top: 60px;
}

.h1, h1 {
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    font-size: 2.25rem; /* 36px bij basis van 16px */
}

    .h1.banner_home_slogan, h1.banner_home_slogan {
        color: #FFFFFF;
        font-family: "poppins-reg";
        font-size: 3.125rem; /* 50px bij basis van 16px */
        letter-spacing: -2px;
        margin-bottom: 10px;
    }

    .h1.banner_home_baseline, h1.banner_home_baseline {
        color: #FFFFFF;
        font-family: "poppins-reg";
        font-size: 1.25rem; /* 20px bij basis van 16px */
    }

    .h1.banner_page_titel, h1.banner_page_titel {
        color: rgb(29 56 122);
        font-family: "poppins-reg";
        font-size: 3.25rem; /* 52px bij basis van 16px */
        letter-spacing: -2px;
        margin-bottom: 10px;
    }

    .h1.banner_page_subtitel, h1.banner_page_subtitel {
        color:  rgb(253 195 00);
        font-family: "poppins-reg";
        font-size: 1.25rem; /* 20px bij basis van 16px */
    }

.h2, h2 {
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    font-size: 1.25rem; /* 30px bij basis van 16px */
}

    .h2.content_titel, h2.content_titel {
        font-family: "poppins-reg";
        letter-spacing: -2px;
        margin-bottom: 15px;
        color: rgb(253 195 00);
    }

.h3, h3 {
    font-weight: normal;
    font-size: 1.5rem; /* 24px bij basis van 16px */
}

    .h3.teaser_titel, h3.teaser_titel {
        font-family: "poppins-reg";
        font-size: 1.875rem; /* 30px bij basis van 16px */
        letter-spacing: -2px;
        margin-bottom: 20px;
        margin-top: 20px;
        color: rgb(29 56 122);
    }

    h3.inschrijving_nieuwsbrief_titel {
        font-family: "poppins-reg";
        font-size: 2.5rem; /* 40px bij basis van 16px */
        color: #FFFFFF;
        letter-spacing: -2px;
        margin-bottom: 15px;
    }

.h4, h4 {
    font-size: 1.125rem; /* 18px bij basis van 16px */
    font-weight: bold;
    color: #333333;
}

.h5, h5 {
    font-family: "ms_300";
    font-size: 1rem; /* 16px bij basis van 16px */
    font-weight: normal;
    color: #1D387A;
}

/*=====================================
    LINKS
=====================================*/

a, a:active, a:link, a:visited, a:hover {
    font-family: "poppins-reg";
    font-size: 1rem; /* 16px bij basis van 16px */
    font-weight: normal;
    line-height: 1.5em;
    text-decoration: none;
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

    /* Plupload aanpassing */
    a.ui-button,
    a:link.ui-button,
    a:visited.ui-button,
    a:hover.ui-button,
    a:focus.ui-button,
    a:active.ui-button,
    .ui-button {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        text-decoration: inherit;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transition: none;
    }

    a:active, a:link, a:visited {
        color: rgb(00 144 214);
    }

    a:hover {
        color: #333333;
    }

    a.more_link, a.more_link:active, a.more_link:link, a.more_link:visited {
        font-family: "poppins-reg";
        color: rgb(29 56 122);
    }

    a.home_teaser_link:active, a.home_teaser_link:link, a.home_teaser_link:visited {
        font-family: "poppins-reg";
        font-size: .875rem; /* 14px bij basis van 16px */
        color: rgb(00 144 214);
    }

    a.home_teaser_link:hover, a.more_link:hover, a.footer_link_neg:active {
        color: rgb(253 195 00) !important;
    }

    a.footer_link_pos:active, a.footer_link_pos:link, a.footer_link_pos:visited  {
        color: rgb(253 195 00) !important;
    }

    a.footer_link_pos:hover, a.footer_link_neg:hover  {
        color: rgb(00 144 214) !important;
    }

    a.footer_link_neg:active, a.footer_link_neg:link, a.footer_link_neg:visited {
        font-family: "poppins-reg";
        font-size: .75rem; /* 12px bij basis van 16px */
        color: rgb(253 195 00);
    }
    .bg_gray a:active, .bg_gray a:link, .bg_gray a:visited {
  	color: white;
    }

    .bg_gray a:hover{
        color: rgb(00 144 214);
    }

/*=====================================
    BACKGROUNDS & OVERLAY
=====================================*/

.bg_white {
    background-color: rgb(255 255 255);
    color: #333333;
}

.bg_white .content_titel {
    color: rgb(29 56 122);
}

.bg_gray {
    background-color: rgb(29 56 122);
    color: rgb(253 195 00);
}

.bg_cover {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.overlay_blauw {
    background-color: rgb(00 144 214);
    opacity: 0.7;
    max-width: 100% /* Nodig ter compensatie van max-width bij DIV */
}

/*=====================================
    EIGEN CSS
=====================================*/

.font_groter, a.font_groter {
    font-size: 1.125rem !important; /* 18px bij basis van 16px */
}

.font_kleiner, a.font_kleiner {
    font-size: .625em !important; /* 10px bij basis van 16px */
}

hr.Korter {
    width: 60%;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

hr.Dikker {
    border-top-width: 5px;
}

.anchor {
    content: "";
    display: inline-block;
    height: 140px; /* fixed header height*/
    margin: -140px 0 0; /* negative fixed header height */
}

.anchor_weekbericht {
    content: "";
    display: block;
}

.media-icon {
    text-align: center;
    min-width: 1.25rem;
}

.NoLink a {
    color: inherit;
    text-decoration: inherit;
}

    .NoLink a:link {
        color: inherit;
        text-decoration: inherit;
    }

    .NoLink a:hover {
        color: inherit;
        text-decoration: inherit;
    }

.NoSelect {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.card-border-right-success {
    border-right-width: 10px;
    border-right-color: #28a745 !important;
}

.card-border-left-success {
    border-left-width: 10px;
    border-left-color: #28a745 !important;
}

.card-border-right-danger {
    border-right-width: 10px;
    border-right-color: #dc3545 !important;
}

.card-border-left-danger {
    border-left-width: 10px;
    border-left-color: #dc3545 !important;
}

.card-border-right-warning {
    border-right-width: 10px;
    border-right-color: #ffc107 !important;
}

.card-border-left-warning {
    border-left-width: 10px;
    border-left-color: #ffc107 !important;
}

.card-frame {
    border: 1px solid #f1840b;
    transition: 0.3s;
}

    .card-frame-highlighted, .card-frame:hover {
        box-shadow: 0 0 25px rgba(0, 156, 222, 0.3);
    }

.bg-light .badge-light {
    background-color: #ddd; /* Beetje lichter zodat het duidelijk wordt op zelfde achtergrond */
}

.border-light {
    border-color: #eaf2f9 !important;
}

.border-right-lg, .border-right-md, .border-right-sm {
    border-right: none;
}

.border-left-lg, .border-left-md, .border-left-sm {
    border-left: none;
}

.NavigatieHeader {
    width: 100%;
    min-height: 40px;
    height: auto;
    margin-bottom: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #777;
    font-size: 1.25rem; /* 20px bij basis van 16px */
    color: White;
    text-align: center;
    vertical-align: middle;
}

.SubNavigatieHeader {
    width: 100%;
    min-height: 30px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.26);
    font-size: 1rem; /* 16px bij basis van 16px */
    color: White;
    text-align: center;
    vertical-align: middle;
}

/*=====================================
    SLHD schoolkleuren
=====================================*/

.Kleur_SLHD_vzw, p.Kleur_SLHD_vzw {
    color: #f1840b !important;
}

.Kleur_SLHD_Internaten, p.Kleur_SLHD_Internaten {
    color: #19632D !important;
}

.Kleur_SLHD_Secundair, p.Kleur_SLHD_Secundair {
    color: rgb(253 195 00) !important;
}

hr.Kleur_SLHD_Secundair {
    border-top-color: rgb(29, 56, 122) !important;
}

hr.Kleur_SLHD_vzw {
    border-top-color: #f1840b !important;
}

/* Onderstaande namen niet aanpassen (SLHD_Mailer) */

.SLHD_vzw {
    background-color: #f1840b !important;
}

.SLHD_Secundaire_school {
    background-color: rgb(00 144 214) !important;
}

.SLHD_Internaten {
    background-color: #19632d !important;
}

.Basisschool_De_Komme {
    background-color: #4ebcbd !important;
}

.Basisschool_De_Smalle {
    background-color: #85bd3e !important;
}

.Basisschool_De_Lenaard {
    background-color: #20529a !important;
}

.Basisschool_Brugge {
    background-color: #e30015 !important;
}

.Basisschool_Sint-Leo_Sint-Pieters {
    background-color: #ba65a5 !important;
}

/*=====================================
    Form-control-lg (Aanpassingen tov Bootstrap Default)
=====================================*/

.input-group-lg > .form-control,
.input-group-lg > .form-control-lg,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
    height: calc(4.125rem + 2px);
    padding: 1.125rem 1.125rem;
}

/*=====================================
     Selectpicker: Eigen aanpassingen 
=====================================*/

.bootstrap-select .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.375rem 1rem;
    clear: both;
    font-weight: 400;
    color: #1e2022;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

    .bootstrap-select .dropdown-item:hover, .bootstrap-select .dropdown-item:focus {
        color: #007bff;
        text-decoration: none;
        background-color: transparent;
    }

    .bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:active {
        color: #007bff;
        text-decoration: none;
        background-color: transparent;
        font-weight: bold;
    }

/*=====================================
     NAVBAR (Aanpassingen tov Bootstrap Default)
=====================================*/

.navbar {
    min-height: 140px;
    background-color: rgb(255 255 255);
    padding: 0px;
    white-space: nowrap;
}

.navbar-light .navbar-nav .nav-link {
  color: rgb(29, 56, 122);
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgb(29, 56, 122);
}

.navbar.active {
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    border-width: 0 0 1px;
    z-index: 1030;
}

/*
.navbar-collapse {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 85vh;
}

    */

.navbar-nav {
    margin-left: 15px;
    margin-bottom: 25px;
    margin-top: 25px;
    margin-right: -25px; /* Aanpassing voor multi line menu */
}

    .navbar-nav > li {
        float: left; /* Aanpassing voor multi line menu */
    }

.navbar-toggler-icon {
    background-image: none; /* Remove Bootstrap's default icon */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
}

.navbar-toggler-icon .line {
    background-color: white; /* Set the lines to white */
    height: 3px; /* Thickness of the lines */
    width: 100%; /* Full width */
    border-radius: 2px; /* Optional: rounded edges */
}

/* Maintain the style for the button itself */
.navbar-toggler {
    background-color: rgb(29, 56, 122); /* Blue background for the button */
    position: fixed;
    top: 15px;
    right: 15px;
    margin-bottom: 8px;
    border: none; /* No border */
    padding: 0.5rem;
    border-radius: 4px; /* Slight rounding for the button */
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.navbar-nav > li a:active, ul.navbar-nav > li a:link, ul.navbar-nav > li a:visited, ul.navbar-nav > li a:focus {
    color: rgb(29, 56, 122);
    font-family: "poppins-reg";
    font-size: .875rem; /* 14px bij basis van 16px */
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: color 500ms linear;
    -moz-transition: color 500ms linear;
    -o-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
    background: none;
    letter-spacing: 1px;
}

ul.navbar-nav > li a:hover {
    color: rgb(253, 195, 00);
    background: none;
}

ul.navbar-nav > li.nav-item.active > a.nav-link {
    color: rgb(253, 195, 00);
    font-family: "poppins-reg";
    font-size: .875rem; /* 14px bij basis van 16px */
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: color 500ms linear;
    -moz-transition: color 500ms linear;
    -o-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
    background: none;
    letter-spacing: 1px;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:hover {
    color: rgb(255 221 00);
}

.current_subpage_item {
    color: rgb(255 221 00) !important;
}

.dropdown-menu {
    border: none;
    border-radius: 0px;
    font-size: .875rem; /* 14px bij basis van 16px */
    left: 0;
    list-style: outside none none;
    margin: 2px 0 20px 0;
    min-width: 160px;
    padding: 15px;
    position: absolute;
    text-align: left;
    top: 100%;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

    .dropdown-menu div, .dropdown-menu a {
        padding-bottom: 10px;
    }

        .dropdown-menu div:last-child, .dropdown-menu a:last-child {
            padding-bottom: 0px;
        }

    .dropdown-menu.show {
        display: inline-block;
    }

/*=====================================
     NAVBAR Alternatief: topheader
=====================================*/

.topheader {
    min-height: 140px;
    width: 100%;
    background-color: rgb(29 56 122);
}

    .topheader.active {
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
    }

.topheader-brand {
    padding: 0px;
    float: left;
}

/*=====================================
     SUBMENU SIDEBAR (EIGEN CSS)
=====================================*/

.submenu_sidebar_body {
    position: relative;
    width: 100%;
    max-width: 400px;
}

    .submenu_sidebar_body ul li a:active, .submenu_sidebar_body ul li a:link, .submenu_sidebar_body ul li a:visited, .submenu_sidebar_body ul li a:focus {
        color: rgb(29 56 122);
        font-family: "poppins-reg";
        font-size: .875rem; /* 14px bij basis van 16px */
        line-height: 1.5;
        text-decoration: none;
        text-transform: uppercase;
        -webkit-transition: color 500ms linear;
        -moz-transition: color 500ms linear;
        -o-transition: color 500ms linear;
        -ms-transition: color 500ms linear;
        transition: color 500ms linear;
        letter-spacing: 1px;
    }

    .submenu_sidebar_body ul li a:hover {
        color: rgb(00 144 214);
        -webkit-transition: color 500ms linear;
        -moz-transition: color 500ms linear;
        -o-transition: color 500ms linear;
        -ms-transition: color 500ms linear;
        transition: color 500ms linear;
    }

/*=====================================
     Content blokken
=====================================*/

.content_tekst {
    /* display: flex; */
    flex-direction: column; /* Ensures vertical layout of content */
    justify-content: center; /* Vertically centers content */
}

.content_tekst, .content_datepicker, .submenu_sidebar {
    padding: 50px 15px 25px 15px;
}

.bg_gray .content_tekst p{
    color: rgb(253 195 00);
}

.container_SSApplicatie .content_tekst, .container_SSApplicatie .content_datepicker {
    padding: 25px 15px 25px 15px;
}

.content_tekst p, .content_datepicker p {
    font-family: "poppins-reg";
    font-size: 1rem; /* 16px bij basis van 16px */
    color: #333333;
    font-weight: normal;
    line-height: 1.5em;
    margin-bottom: 15px;
}

.bg_gray .content_tekst p{
    color: rgb(253 195 00);
}

.content_verjaardag {
    padding: 75px 15px 50px 75px;
    min-height: 200px;
    width: 100%;
}

.content_verjaardag_overlay {
    width: 100%;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url('Images/bg_Verjaardag.png');
    background-size: 200px;
    background-repeat: repeat-x;
    opacity: 0.8;
}

.content_familienieuws {
    padding: 50px 75px 100px 75px;
    min-height: 300px;
}

.content_familienieuws_overlay {
    width: 76%;
    height: 200px;
    position: absolute;
    bottom: 0px;
    right: 12%;
    z-index: 0;
    background-image: url('Images/bg_Familienieuws.png');
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: bottom center;
    opacity: 0.9;
}

.content_contact {
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 25px;
    margin: 0 20px 25px 20px;
    position: relative;
    min-height: 75px;
    text-align: center;
}

    .content_contact .text {
        font-size: 1.125rem; /* 18px bij basis van 16px */
        line-height: 26px;
        display: inline-block;
        vertical-align: middle;
        color: #111111;
        font-weight: 400;
    }

    .content_contact img {
        height: 50px;
        margin-bottom: 10px;
    }

section.container_familienieuws {
    background-color: rgba(0, 174, 239, 1);
}

section.googlemaps {
    min-height: 400px;
    background-color: #CCCCCC;
    position: relative;
}

.googlemaps_container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*=====================================
     Lists en aanpassingen
=====================================*/

ul.content_list li {
    border-bottom-color: #cac9c8;
    border-bottom-width: 2px;
}

.content_tekst ul {
    list-style-type: none;
    margin: 0 0 10px 0px;
}

.content_tekst ul li:before {
    color: rgb(253 195 00);
    content: "\2022";
    font-size: 1.5em;
    padding-right: 0.6em;
    text-indent: 1em;
    margin-left: -1em;
}

.content_tekst ul li {
    font-family: "poppins-reg";
    font-size: 1rem; /* 16px bij basis van 16px */
    color: #ffffff;
    font-weight: normal;
    line-height: 1.5em;
    padding: 3px 0 3px 0;
}

.bg_white li {
    color: #333333 !important;  /* Dark color for light background */
}

.content_tekst .dark-list li {
    color: #333333 !important;  /* Dark color for light background */
}

.content_tekst .light-list li {
    color: #ffffff !important;  /* Dark color for light background */
}

.content_tekst ul li:last-child {
    padding: 3px 0 10px 0;
    border-bottom: none;
}

/* Aanpassing voor pagination */
.content_tekst .bs-pagination ul li:before {
    content: none;
}

/* Aanpassing voor selectpicker */
.bootstrap-select .dropdown-menu li:before {
    content: none;
}

/* Aanpassing voor list-inline-item */
ul.list-inline li.list-inline-item:before {
    content: none;
}

/* Aanpassing voor Bootstrap Datetimepicker */
ul.list-unstyled li:before {
    content: none;
}

/* Aanpassing voor navbar-vertical */
.navbar-vertical ul li:before {
    content: none;
}

/*=====================================
     Pagination
=====================================*/

.pagination {
    padding-top: 1.25rem;
}

.bs-pagination .page-link, .bs-pagination .page-link.active {
    display: inline;
}

.page-link {
    text-align: center;
    min-width: 2.25rem;
}

.page-item {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

    .page-item .page-link {
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .page-item .page-link {
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }

/*=====================================
     PAGE HEADER
=====================================*/

.bg_home {
    width: 100%;
    height: 810px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    opacity: 0;
    background-image: url("../Style/Images/bg_home.jpg");
    background-size: cover;
    background-position: center center;
}

.bg_home_overlay {
    width: 100%;
    height: 810px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: rgb(253 195 00);
    opacity: 0.1;
}

.bg_page {
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}

.bg_page_overlay {
    
}

.menuboog {
    width: 100%;
    height: 30px;
    position: absolute;
    top: 140px;
    z-index: 0;
    background: repeating-linear-gradient(
                to right,
                rgb(31 44 201) 0px,
                rgb(31 44 201) 40px,
                rgb(29 56 122) 40px,
                rgb(29 56 122) 80px,
                rgb(00 71 149) 80px,
                rgb(00 71 149) 120px,
                rgb(00 144 214) 120px,
                rgb(00 144 214) 160px,
		rgb(00 71 149) 160px,
		rgb(00 71 149) 200px,
		rgb(29 56 122) 200px,
		rgb(29 56 122) 240px
    );
    /*
    background-image: url("../Style/Images/menuboog.png");
    background-repeat: no-repeat;
    background-position: top left;
    */
}

.bannerboog {

}

.banner_home {
    min-height: 390px;
    text-align: center;
}

    .banner_home > div {
        margin-top: 150px;
    }

.banner_page {
    min-height: 100px;
    text-align: center;
}

    .banner_page > div {
        margin-top: 50px;
    }

/*=====================================
     PAGE FOOTER
=====================================*/

.footer {
    min-height: 220px;
    background-color: rgb(29 56 122);
    border-top: solid 20px;
    border-image: repeating-linear-gradient(
                to right,
                rgb(243 145 00) 0px,
                rgb(243 145 00) 60px,
                rgb(249 178 00) 60px,
                rgb(249 178 00) 120px,
                rgb(253 195 00) 120px,
                rgb(253 195 00) 180px,
                rgb(255 221 00) 180px,
                rgb(255 221 00) 240px,
		rgb(253 195 00) 240px,
		rgb(253 195 00) 300px,
		rgb(249 178 00) 300px,
		rgb(249 178 00) 360px
            ) 1;
    border-image-slice: 1;
}

.footer_logo, .footer_social, .footer_contact, .footer_scholengroep {
    margin-top: 50px;
    text-align: center;
}

.footer_contact, .footer_scholengroep {
    font-family: "poppins-reg";
    font-size: 1rem; /* 16px bij basis van 16px */
    color: #999999;
    font-weight: normal;
    line-height: 1.5em;
}

.footer_copyright {
    font-family: "poppins-reg";
    font-size: .75rem; /* 12px bij basis van 16px */
    color: #999999;
    font-weight: normal;
    line-height: 1.5em;
}

.footer_social ul li {
    display: inline-block;
    margin-right: 10px;
}

    .footer_social ul li:last-child {
        margin-right: 0px;
    }

    .footer_social ul li a {
        color: #9a9b9d;
    }

/*=====================================
     PAGE_UP
=====================================*/

#page_up {
    height: 50px;
    position: fixed;
    right: 31px;
    bottom: 50px;
    width: 49px;
    z-index: 50;
    display: none;
}

a.page_up:active, a.page_up:link, a.page_up:visited {
    color: #00aeef;
    background-color: #3B3D40;
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 46px;
    font-size: 20px;
    text-align: center;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    text-decoration: none;
}

a.page_up:hover {
    color: #00aeef;
    background-color: #3B3D40;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    text-decoration: none;
}

/*=====================================
    Homepage Alert
=====================================*/

.HomepageAlert, .HomepageAlertAdmin {
    display: none; /* NIET zichtbaar op kleine schermen */
    margin: 25px 25px 15px 15px;
    width: 80%;
    max-width: 400px;
    max-height: 500px;
    line-height: 1.5em;
    color: black;
    font-family: poppins-reg;
    font-size: .75rem; /* 12px bij basis van 16px */
    -moz-border-radius-bottomleft: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    box-sizing: border-box;
    border: none;
}

.HomepageAlert {
    position: fixed;
    right: 0;
    top: 150px;
    overflow: hidden;
    z-index: 10000;
}

    .HomepageAlert .btn, .HomepageAlertAdmin .btn {
        display: inline-block;
        min-width: 140px;
        color: rgb(0, 0, 0);
        border-color: transparent;
        background-color: rgb(98, 255, 170);
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 5px;
    }

    .HomepageAlert a, .HomepageAlertAdmin a, .HomepageAlert p, .HomepageAlertAdmin p {
        cursor: pointer;
        color: black;
        font-family: poppins-reg;
        font-size: .9375rem; /* 15px bij basis van 16px */
        text-transform: none;
    }

/*=====================================
    Homepage Carousel
=====================================*/

#arr_prev, #arr_next {
    z-index: 10;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.owl-carousel {
    min-height: 250px;
}

.owl-theme .owl-controls {
    margin-top: 10px;
    -webkit-tap-highlight-color: transparent;
}

    .owl-theme .owl-controls .owl-nav [class*=owl-] {
        color: #fff;
        font-size: .875rem; /* 14px bij basis van 16px */
        margin: 5px;
        padding: 4px 7px;
        background: #d6d6d6;
        display: inline-block;
        cursor: pointer;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

        .owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
            background: #869791;
            color: #fff;
            text-decoration: none;
        }

    .owl-theme .owl-controls .owl-nav .disabled {
        opacity: .5;
        cursor: default;
    }

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

    .owl-theme .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #d6d6d6;
        display: block;
        -webkit-backface-visibility: visible;
        -webkit-transition: opacity 200ms ease;
        -moz-transition: opacity 200ms ease;
        -ms-transition: opacity 200ms ease;
        -o-transition: opacity 200ms ease;
        transition: opacity 200ms ease;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
    }

    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #869791;
    }

/*=====================================
    HomePage Teasers
=====================================*/

.teaser_home {
    margin-top: 100px;
    color: rgb(29 56 122);
}

.teaser_1-carousel{
    background-color: rgb(255 255 255);
}

.teaser_2-carousel{
    background-color: rgb(255 255 255);
}

.teaser_3-carousel{
    background-color: rgb(255 255 255);
}

.teaser_home_event {
    margin-left: auto;
    margin-right: auto;
    max-width: 350px;
    height: 520px;
    margin-bottom: 25px;
}

.teaser_home_event_item {
    position: relative;
    z-index: 0;
    height: 520px;
    

}

.teaser_home_event_header {
    padding-left: 34px;
    padding-right: 34px;    
    text-align: left;
    width: 100%;
    min-height: 60px; /* Zo kunnen titels op twee of meer lijnen toch nog schuiven. */
}

.teaser_home_event_body {
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 10px;
    width: 100%;
    height: 400px; /* Margin-top van 50px afgetrokken en padding-bottom van 10px */
    max-height: 400px;
    text-align: left;
}

.teaser_home_event_bg {
    width: 100%;
    max-width: 400px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -3;
}

    .teaser_home_event_bg > img {
        width: 100%;
        max-width: 400px;
    }

.teaser_home_event_bg_overlay {
    width: 100%;
    max-width: 400px;
    height: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -2;
    background-color: rgb(253 195 00);
    opacity: 0.6;
}

.teaser_home_event_bg_boog {
    width: 100%;
    max-width: 400px;
    height: 150px;
    position: absolute;
    bottom: 75px;
    left: 0;
    z-index: -1;
    background-image: url("../Style/Images/teaser_home_event_bg_boog.png");
    background-repeat: no-repeat;
    background-position: bottom,right;
}

/*=====================================
    HomePage Kalender
=====================================*/

.teaser_home_kalender_datum {
    font-family: "poppins-reg";
    font-size: 1rem; /* 16px bij basis van 16px */
    color: #1D387A;
    font-weight: normal;
    line-height: 1.5em;
}

.teaser_home_kalender_event {
    font-family: "poppins-reg";
    font-size: .875rem; /* 14px bij basis van 16px */
    color: #333333;
    font-weight: normal;
    line-height: 1.5em;
}

.teaser_home_kalender_starteind {
    font-family: "poppins-reg";
    font-size: .75rem; /* 12px bij basis van 16px */
    color: #1D387A;
    font-weight: normal;
    line-height: 1.5em;
}

.teaser_home_kalender_details {
    font-family: "poppins-reg";
    font-size: .75rem; /* 12px bij basis van 16px */
    color: #999999;
    font-weight: normal;
    line-height: 1.5em;
}

ul.lst_kalender {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-bottom: 15px;
}

    ul.lst_kalender li {
        list-style-type: none;
        margin: 0;
        padding: 15px 0 15px 0;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #adadad;
    }

        ul.lst_kalender li p {
            margin-bottom: 5px;
        }

        ul.lst_kalender li:first-child {
            padding-top: 0px;
            padding-bottom: 15px;
        }

        ul.lst_kalender li:last-child {
            padding-top: 15px;
            padding-bottom: 0px;
            border-bottom: none;
        }

        ul.lst_kalender li:only-child {
            padding-top: 0px;
            padding-bottom: 0px;
            border-bottom: none;
        }

/*=====================================
    HomePage In de kijker
=====================================*/

.home_nieuws {
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 50px;
    max-width: 1140px; /* Speciale voor lg view */
}

    .home_nieuws h3.titel {
        font-family: "poppins-reg";
        font-size: 1.375rem; /* 22px bij basis van 16px */
        color: #333333;
        font-weight: bold;
        letter-spacing: -2px;
        margin-bottom: 5px;
        min-height: 50px;
    }

    .home_nieuws p.datum {
        font-family: "poppins-reg";
        font-size: 1rem; /* 16px bij basis van 16px */
        color: #1D387A;
        font-weight: normal;
        line-height: 1.5em;
    }

    .home_nieuws .omschrijving {
        font-family: "poppins-reg";
        font-size: 1rem; /* 16px bij basis van 16px */
        color: #333333;
        font-weight: normal;
        line-height: 1.5em;
        min-height: 175px;
    }

/*=====================================
    Homepage Ambassadeur Carousel
=====================================*/

.ambassadeur-carousel-item {
    min-height: 175px !important;
}

#home_ambassadeurs .owl-theme .owl-controls {
    margin-top: 10px;
    -webkit-tap-highlight-color: transparent;
}

    #home_ambassadeurs .owl-theme .owl-controls .owl-nav [class*=owl-] {
        color: #fff;
        font-size: .875rem; /* 14px bij basis van 16px */
        margin: 5px;
        padding: 4px 7px;
        background: rgb(253 195 00);
        display: inline-block;
        cursor: pointer;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

        #home_ambassadeurs .owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
            background: rgb(29 56 122);
            color: #fff;
            text-decoration: none;
        }

    #home_ambassadeurs .owl-theme .owl-controls .owl-nav .disabled {
        opacity: .5;
        cursor: default;
    }

#ambassadeur_arr_prev, #ambassadeur_arr_next {
    z-index: 10;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.ambassadeur-carousel .Ambassadeur {
    font-family: "poppins-reg";
    font-size: .875rem; /* 14px bij basis van 16px */
    line-height: 1.5em;
    color: rgb(29 56 122);
}

    .ambassadeur-carousel .Ambassadeur .Naam {
        font-weight: bold;
        color: rgb(253 195 00);
    }

    .ambassadeur-carousel .Ambassadeur .Omschrijving {
        font-weight: normal;
    }

.ambassadeur-carousel .Quote {
    font-family: "poppins-reg";
    font-size: .875rem; /* 14px bij basis van 16px */
    font-style: italic;
    color: rgb(29 56 122);
    font-weight: normal;
    line-height: 1.5em;
}

/*=====================================
    HomePage Nieuwsbrief Overlay 
=====================================*/

.nieuwsbrief > p {
    color: #FFFFFF;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    font-family: "poppins-reg";
    font-size: 1.125rem; /* 18px bij basis van 16px */
    font-weight: normal;
    line-height: 1.5em;
}

.nieuwsbrief > .btn {
    border: none;
    background-color: transparent;
    font-size: 1rem; /* 16px bij basis van 16px */
    font-family: "poppins-reg";
    line-height: 1.5;
    color: #FFFFFF;
    text-transform: uppercase;
}

.nieuwsbrief .form-control {
    display: inline-block;
    width: 45%;
    margin: 5px 10px 5px 0px;
}

/*=====================================
    Ronde images
=====================================*/

.content_image {
    padding: 75px 15px 15px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;  /* Zorg ervoor dat de afbeelding en tekst onder elkaar staan */
   /* justify-content: center;    Optioneel: centeren van de inhoud */
}

.img_rond_50, .img_rond_75, .img_rond_100, .img_rond_125, .img_rond_150, .img_rond_200, .img_rond_300 {
    text-align: center;
    display: inline-block;
}

.img_rond_50 {
    margin: 0px;
    width: 50px;
}

.img_rond_75 {
    margin: 0px;
    width: 75px;
}

.img_rond_100 {
    margin: 20px 10px 20px 10px;
    width: 100px;
}

.img_rond_125 {
    margin: 20px 10px 20px 10px;
    width: 125px;
}

.img_rond_150 {
    margin: 20px 10px 20px 10px;
    width: 150px;
}

.img_rond_200 {
    margin: 20px 10px 20px 10px;
    width: 200px;
}

.img_rond_300 {
    margin: 20px 10px 20px 10px;
    width: 300px;
}

    .img_rond_50 .auto_rond, .img_rond_75 .auto_rond, .img_rond_100 .auto_rond, .img_rond_125 .auto_rond, .img_rond_150 .auto_rond, .img_rond_200 .auto_rond, .img_rond_300 .auto_rond {
        margin-right: auto;
        margin-left: auto;
        position: relative;
        overflow: hidden;
        display: inline-block;

        z-index: 1;
    }

.img_rond_50 .auto_rond {
    width: 50px;
    height: 50px;
}

.img_rond_75 .auto_rond {
    width: 75px;
    height: 75px;
}

.img_rond_100 .auto_rond {
    width: 100px;
    height: 100px;
}

.img_rond_125 .auto_rond {
    width: 125px;
    height: 125px;
}

.img_rond_150 .auto_rond {
    width: 150px;
    height: 150px;
}

.img_rond_200 .auto_rond {
    width: 200px;
    height: 200px;
}

.img_rond_300 .auto_rond {
    width: 300px;
    height: 300px;
}

    .img_rond_50 .auto_rond img, .img_rond_75 .auto_rond img, .img_rond_100 .auto_rond img, .img_rond_125 .auto_rond img, .img_rond_150 .auto_rond img, .img_rond_200 .auto_rond img, .img_rond_300 .auto_rond img {
        
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        object-fit: cover;
    }

.img_rond_50 .auto_rond img {
    width: 50px;
    height: 50px;
}

.img_rond_75 .auto_rond img {
    width: 75px;
    height: 75px;
}

.img_rond_100 .auto_rond img {
    width: 100px;
    height: 100px;
}

.img_rond_125 .auto_rond img {
    width: 125px;
    height: 125px;
}

.img_rond_150 .auto_rond img {
    width: 150px;
    height: 150px;
}

.img_rond_200 .auto_rond img {
    width: 200px;
    height: 200px;
}

.img_rond_300 .auto_rond img {
    width: 300px;
    height: 300px;
}

.img_rond_50 > img.zoom, .img_rond_75 > img.zoom, .img_rond_100 > img.zoom, .img_rond_125 > img.zoom, .img_rond_150 > img.zoom, .img_rond_200 > img.zoom, .img_rond_300 > img.zoom {
    width: 100%;
    
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.img_rond_50 > img.zoom {
    max-width: 50px;
}

.img_rond_75 > img.zoom {
    max-width: 75px;
}

.img_rond_100 > img.zoom {
    max-width: 100px;
}

.img_rond_125 > img.zoom {
    max-width: 125px;
}

.img_rond_150 > img.zoom {
    max-width: 150px;
}

.img_rond_200 > img.zoom {
    max-width: 200px;
}

.img_rond_300 > img.zoom {
    max-width: 300px;
}

.auto_rond a {
    background-color: white;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-decoration: none;
    top: 0;
    width: 100%;
    z-index: 15;
}

.auto_rond:hover > img.zoom {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    
}

.auto_rond_hover {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    z-index: 10;
    opacity: 0;
}

.img_rond_50 .auto_rond .auto_rond_hover img, .img_rond_75 .auto_rond .auto_rond_hover img, .img_rond_100 .auto_rond .auto_rond_hover img, .img_rond_125 .auto_rond .auto_rond_hover img, .img_rond_150 .auto_rond .auto_rond_hover img, .img_rond_200 .auto_rond .auto_rond_hover img, .img_rond_300 .auto_rond .auto_rond_hover img {
    width: 100px;
    height: 100px;
}

.auto_rond_tekst_hover {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    background-color: rgb(00 144 214);
}

.auto_rond_tekst_hover_tekst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 20px;
    margin-left: -50%;
    margin-top: -10px;
    z-index: 11;
    opacity: 0;
    font-family: "poppins-reg";
    font-size: 1rem; /* 16px bij basis van 16px */
    color: #FFFFFF;
    font-weight: normal;
    line-height: 1.5em;
    text-transform: uppercase;
}

.auto_rond_border_light img {
    border: 4px solid #fff;
}

.auto_rond_border_SLHD_secundair img {
    border: 4px solid rgb(253 195 00);
}

/*=====================================
    Img rond badge
=====================================*/

.img_rond_badge_container {
    position: relative !important;
}

.img_rond_badge_50, .img_rond_badge_75, .img_rond_badge_125, .img_rond_badge_200 {
    z-index: 3;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    border-style: solid;
    line-height: 1.7;
    border-color: #fff;
}

.img_rond_badge_50 {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 2px;
    bottom: 0.30rem;
    left: 0.30rem;
}

.img_rond_badge_75 {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    bottom: 0.30rem;
    left: 0.30rem;
}

.img_rond_badge_125 {
    width: 1.125rem;
    height: 1.125rem;
    border-width: 3px;
    bottom: 0.85rem;
    left: 0.85rem;
}

.img_rond_badge_200 {
    width: 1.75rem;
    height: 1.75rem;
    border-width: 4px;
    bottom: 1rem;
    left: 1.25rem;
}

/*=====================================
    ImageRow met overlap (Op basis van img_rond_100)
=====================================*/

.ImageRow ul li {
    text-indent: initial;
}

    .ImageRow ul li:before {
        content: none;
        text-indent: initial;
    }

    .ImageRow ul li.list-inline-item {
        margin-left: -3rem;
        margin-right: -0.75rem;
    }

        .ImageRow ul li.list-inline-item:first-child {
            margin-left: 0rem;
        }

.icon_rond_100 {
    background-color: #f6f9fc;
    text-align: center;
    display: inline-block;
    margin: 20px 10px 20px 10px;
    width: 100px;
}

    .icon_rond_100 .auto_rond {
        background-color: #ddd;
        width: 100px;
        height: 100px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        overflow: hidden;
        display: inline-block;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        perspective: 1px; /* Voor Chrome Bug */
        z-index: 1;
    }

        .icon_rond_100 .auto_rond div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            -moz-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            object-fit: cover;
        }

        .icon_rond_100_tekst {
            z-index: 2;
            font-family: "poppins-reg";
            font-size: 1.5rem; /* 24px bij basis van 16px */
            color: #1D387A;
            font-weight: normal;
            line-height: 1em;
            text-transform: uppercase;
        }

/*=====================================
     Slideshow
=====================================*/

    #slideshow-container img {
        width: 75%;
        height: 75%;
        object-fit: cover;
        transition: opacity 1s ease-in-out;
    }

    .slide-container {
        opacity: 0;
    }

    .slide-container.active {
        opacity: 1;
    }

/*=====================================
     GridviewTable
=====================================*/

.GridviewTable > tbody > tr > td, .GridviewTable > tbody > tr > th, .GridviewTable > tfoot > tr > td, .GridviewTable > tfoot > tr > th, .GridviewTable > thead > tr > td, .GridviewTable > thead > tr > th {
    border-top: 3px solid #ddd;
}

.GridviewTable:last-child {
    border-bottom: 3px solid #ddd !important;
}

.GridviewTable:first-child {
    border-top: 3px solid #ddd !important;
}

.LastInnerBorder:only-child {
    border-top: 1px solid #ddd !important;
}

.SmallInnerBorder:only-child {
    border-top: 1px solid #ddd !important;
}

/*=====================================
     GridviewTable items (Kalender, Vervangingen)
=====================================*/

.GridviewTable_Datum {
    padding: 8px;
    line-height: 1.5;
    vertical-align: middle !important;
    border-top: 3px solid #ddd !important;
    font-weight: bold !important;
    margin-right: 8px !important;
}

.GridviewTable_Item {
    font-family: "poppins-reg";
    font-size: .875rem; /* 14px bij basis van 16px */
    color: #333333;
    line-height: 1.75em;
    white-space: normal;
    vertical-align: middle !important;
}

.Kalendertable_EventUur {
    font-family: "poppins-reg";
    font-size: .75rem; /* 12px bij basis van 16px */
    color: #1D387A;
    line-height: 1.5em;
}

.GridviewTable_Details {
    font-family: "poppins-reg";
    font-size: .75rem; /* 12px bij basis van 16px */
    color: #999999;
    line-height: 1.5em;
    white-space: normal;
    padding-right: 5px;
}

.GridviewTable_Vervanging {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle !important;
    font-weight: bold !important;
    margin-right: 8px !important;
}

/*=====================================
     Table Bordered-bottom
=====================================*/

.table-bordered-bottom tbody, .table-bordered-bottom tbody th, .table-bordered-bottom tbody td {
    border-bottom: 1px solid rgb(29, 56, 122);
}

.table-bordered-bottom .thead-light {
    border-bottom: 2px solid rgb(29, 56, 122);
}

/*=====================================
     ADMIN Logout
=====================================*/

.AccountStatus {
    top: 80px;
    right: 15px;
    position: fixed;
}

    .AccountStatus a:link {
        color: #333333;
        font-weight: 600;
    }

/*=====================================
     Branding
=====================================*/
.PanelHandtekening {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
}

/*=====================================
     SLHD Mailer
=====================================*/

.SLHDMailer_Aantal {
    font-family: "poppins-reg";
    font-size: 2.25rem; /* 36px bij basis van 16px */
    text-align: center;
}

.SLHDMailer_Ontvanger {
    font-size: .875rem; /* 14px bij basis van 16px */
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.SLHDMailer_Instelling {
    width: 15px;
    height: 15px;
    background-color: #999999;
}

/*=====================================
     SignageFrames Kalender Scroller
=====================================*/

section.Scroller {
    margin-left: 0;
    margin-right: 0;
    height: 200px;
}

.Scroller.border-light {
    position: relative;
    width: 100%;
    text-align: left;
}

.Scroller_Item .Top {
    display: inline-block;
    width: 100%;
    min-height: 80px;
}

.Scroller_Item .Bottom {
    display: inline-block;
    width: 100%;
}

.Scroller_Item .Personeel {
    border-top: #1D387A solid 7px;
}

.Scroller_Item .Leerlingen {
    border-top: #FFFFFF solid 7px;
}

.Scroller_Item .Datum {
    font-size: 1.125rem; /* 18px bij basis van 16px */
    color: #3B3D40;
}

.Scroller_Item .Omschrijving {
    font-size: 1.25rem; /* 20px bij basis van 16px */
    color: black;
}

/*=====================================
     FullPage Foutmelding
=====================================*/

.Foutmelding {
    text-align: center;
    width: 75%;
    margin: auto;
    min-height: 250px;
    max-height: 75%;
    display: block;
}

    .Foutmelding > img {
        max-height: 90%;
    }

.hr_link {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid rgb(29, 56, 122);
    border-bottom: 1px solid rgb(29, 56, 122);
}

/*=====================================
     Checkbox Switch
=====================================*/

.CheckboxSwitch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.5rem;
}

.CheckboxSwitch_Input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.CheckboxSwitch_Slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #e7eaf3;
    border-radius: 6.1875rem;
    padding: 0.25rem;
    transition: 0.3s;
}

    .CheckboxSwitch_Slider:before {
        position: absolute;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        display: block;
        width: 0.75rem;
        height: 0.75rem;
        background-color: #fff;
        border-radius: 50%;
        pointer-events: none;
        content: "";
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: 0.4s;
    }

.CheckboxSwitch_Input:checked + .CheckboxSwitch_Slider {
    background-color: #377dff;
}

    .CheckboxSwitch_Input:checked + .CheckboxSwitch_Slider::before {
        left: calc(100% - 20px);
        -webkit-transform: translate(4px, -50%);
        transform: translate(4px, -50%);
    }

/*=====================================
     TimeLine Verticaal
=====================================*/

.content_tekst ul.VTimeLine, ul.VTimeLine {
    list-style-type: none;
    position: relative;
    margin-left: 0px;
}

    .content_tekst ul.VTimeLine:before, ul.VTimeLine:before {
        content: ' ';
        background: #d4d9df;
        display: inline-block;
        position: absolute;
        left: 29px;
        width: 2px;
        height: 100%;
        z-index: 400;
    }

    .content_tekst ul.VTimeLine > li, ul.VTimeLine > li {
        margin: 5px 0;
        padding: 0px 0px 10px 25px
    }

        .content_tekst ul.VTimeLine > li:last-child, ul.VTimeLine > li:last-child {
            margin: 5px 0;
            padding: 0px 0px 0px 25px;
            border-bottom: none;
        }

        .content_tekst ul.VTimeLine > li:before, ul.VTimeLine > li:before {
            content: ' ';
            background: white;
            display: inline-block;
            position: absolute;
            border-radius: 50%;
            border: 3px solid #007bff;
            left: 20px;
            width: 20px;
            height: 20px;
            z-index: 400;
            margin-left: 0em;
            padding: 3px 0 10px 0;
        }

        .content_tekst ul.VTimeLine > li.TimeLine_Success:before, ul.VTimeLine > li.TimeLine_Success:before {
            border: 3px solid #28a745;
        }

        .content_tekst ul.VTimeLine > li.TimeLine_Warning:before, ul.VTimeLine > li.TimeLine_Warning:before {
            border: 3px solid #ffc107;
        }

        .content_tekst ul.VTimeLine > li.TimeLine_Danger:before, ul.VTimeLine > li.TimeLine_Danger:before {
            border: 3px solid #dc3545;
        }

    .content_tekst ul.VTimeLine li:last-child, .ul.VTimeLine li:last-child {
        border-bottom: none;
    }

/*=====================================
     TimeLine Horizontaal
=====================================*/

.content_tekst ul.HTimeLine, ul.HTimeLine {
    list-style-type: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .content_tekst ul.HTimeLine > li, ul.HTimeLine > li {
        margin: 15px 0;
        padding: 0px 40px;
        border-top: 2px solid #d4d9df;
        min-width: 5%;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

        .content_tekst ul.HTimeLine > li:first-child, ul.HTimeLine > li:first-child {
            padding: 0px 0px;
            align-items: flex-start;
        }

        .content_tekst ul.HTimeLine > li:last-child, ul.HTimeLine > li:last-child {
            padding: 0px 0px;
            align-items: flex-end;
        }

        .content_tekst ul.HTimeLine > li.TimeLine_Success, ul.HTimeLine > li.TimeLine_Success {
            border-top: 2px solid #28a745;
        }

        .content_tekst ul.HTimeLine > li.TimeLine_Warning, ul.HTimeLine > li.TimeLine_Warning {
            border-top: 2px solid #ffc107;
        }

        .content_tekst ul.HTimeLine > li.TimeLine_Danger, ul.HTimeLine > li.TimeLine_Danger {
            border-top: 2px solid #dc3545;
        }

        .content_tekst ul.HTimeLine > li:before, ul.HTimeLine > li:before {
            content: ' ';
            width: 20px;
            height: 20px;
            z-index: 400;
            background-color: white;
            border-radius: 50%;
            border: 3px solid #1D387A;
            position: relative;
            display: inline-block;
            top: -10px;
            margin-left: 0em;
        }

        .content_tekst ul.HTimeLine > li.TimeLine_Success:before, ul.HTimeLine > li.TimeLine_Success:before {
            border: 3px solid #28a745;
        }

        .content_tekst ul.HTimeLine > li.TimeLine_Warning:before, ul.HTimeLine > li.TimeLine_Warning:before {
            border: 3px solid #ffc107;
        }

        .content_tekst ul.HTimeLine > li.TimeLine_Danger:before, ul.HTimeLine > li.TimeLine_Danger:before {
            border: 3px solid #dc3545;
        }


/*=====================================
     SSApplicatie_Header
=====================================*/

.SSApplicatie_Nav {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    padding: 0;
    height: 48px;
    min-height: 48px;
    background-color: rgb(29, 56, 122);
}

.SSApplicatie_Btn {
    display: block;
    height: 100%;
    white-space: nowrap;
    padding: 0 1rem;
    margin: 0;
    font-weight: 400;
    color: #fff !important;
    border: none;
    background: none;
    cursor: pointer;
    transition: background .3s,width .1s;
    line-height: 48px !important;
    text-decoration: none;
}

    .SSApplicatie_Btn:hover {
        color: #fff;
        text-decoration: none;
        background-color: rgba(0,0,0,.24);
    }

.SSApplicatie_Btn-Profiel {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    line-height: normal;
}

    .SSApplicatie_Btn-Profiel img {
        border-radius: 50%;
        width: 32px;
        height: 32px;
        margin-right: .667rem;
        background-color: rgba(0,0,0,.1);
    }

.SSApplicatie_Btn-PushRight {
    margin-left: auto;
}

.SSApplicatie_Btn-Icon {
    width: 40px;
    overflow: hidden;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    line-height: normal;
    padding: 0 .65rem;
    font-size: 1.2rem !important;
}

.SSApplicatie_Btn-Icon_Home {
    width: 60px;
    padding: 0 1.1rem;
}

.SSApplicatie_Btn-Icon:after {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
}

.SSApplicatie_Btn-Icon_Home:after {
    content: "\f015";
}

.SSApplicatie_Btn-Icon_SignOut:after {
    content: "\f2f5";
}

.SSApplicatie_Nav .dropdown-menu {
    padding: 1.333rem;
    overflow: auto;
    border: 1px solid #868686;
    border-radius: .667rem;
    background-color: #fefefe;
    box-shadow: 0 0.333rem 1.333rem rgba(0,0,0,.5);
}

.SSApplicatie_dropdown_items {
    display: inline-block;
    text-overflow: ellipsis;
    width: auto;
}

    .SSApplicatie_dropdown_items .row .col {
        min-width: 300px;
    }

.SSApplicatie_dropdown_item {
    width: 100%;
    cursor: pointer;
    padding: 0.5rem !important;
    color: #212529 !important;
    white-space: nowrap;
    background-color: transparent;
    margin-right: .75rem;
    margin-bottom: .25rem;
}

    .SSApplicatie_dropdown_item:hover .SSApplicatie_dropdown_icon {
        width: 24px;
        height: 24px;
        margin-left: 10px;
        margin-right: 5px;
        transition: 0.5s;
    }

.SSApplicatie_dropdown_icon {
    width: 24px;
    height: 24px;
    margin-left: 0px;
    margin-right: 15px;
}

.SSApplicatie_icon-Adressenlijst {
    background-image: url('Images/Icon_Adreslijst.svg');
}

/*=====================================
    FAQ +/- toggle
=====================================*/

.faq_toggle {
    cursor: pointer;
}

    .faq_toggle[aria-expanded="true"] .card-btn-toggle:after {
        font-family: "Font Awesome 6 Free";
        padding-right: 10px;
        line-height: 1rem;
        font-style: normal;
        font-weight: 900;
        content: "\f068";
    }

    .faq_toggle[aria-expanded="false"] .card-btn-toggle:after {
        font-family: "Font Awesome 6 Free";
        padding-right: 10px;
        line-height: 1rem;
        font-style: normal;
        font-weight: 900;
        content: "\f067";
    }


.ImageWidth30 {
    width: 30px !important;
    display: unset !important;
}


/*=====================================
     Vertical Navbar (met border links)
=====================================*/

.navbar-vertical .nav-border {
    padding-left: .2rem;
}

    .navbar-vertical .nav-border .nav-border-item {
        padding-right: .2rem;
        padding-left: 1rem;
        font-size: .9rem;
        margin-top: .6rem;
        margin-bottom: .6rem;
        margin-right: .2rem;
    }

        .navbar-vertical .nav-border .nav-border-item .nav-border-link {
            color: #333333;
            padding-left: 1.5rem;
            margin-left: -2.15rem;
            margin-bottom: -.09375rem;
            padding-top: .5rem !important;
            padding-bottom: .5rem !important;
        }

        .navbar-vertical .nav-border .nav-border-item.current .nav-border-link {
            padding-left: 1.5rem;
            margin-left: -2.5rem;
            border-left: solid .35rem rgb(29, 56, 122);
        }

        .navbar-vertical .nav-border .nav-border-item.current a:link {
            color: rgb(29, 56, 122);
            font-weight: bold;
        }


        .navbar-vertical .nav-border .nav-border-item a:hover {
            color: rgb(29, 56, 122);
        }

.nav-icon {
    width: 1.25rem;
    font-size: .8125rem;
    line-height: 1.4;
    opacity: .8;
    text-align: center;
    margin-right: .5rem;
}

/*=====================================
    Vaste overlay rechterkant pagina
=====================================*/

.KnoppenDiv_Rechts {
    position: fixed;
    bottom: 300px;
    right: 50px;
    z-index: 100;
    min-height: 50px;
    min-width: 175px;
    box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
}


/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .h2.content_titel, h2.content_titel {
        font-size: 2rem; /* 30px bij basis van 16px */
    }

    h3.inschrijving_nieuwsbrief_titel {
        font-size: 2rem; /* 30px bij basis van 16px */
    }

    .navbar-nav .dropdown-menu {
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }

    section.teaser_home {
        margin-top: 10px;
    }

    .bg_home {
        height: 810px;
    }

    .bg_home_overlay {
        height: 810px;
    }

    .banner_home {
        min-height: 390px;
    }

        .banner_home > div {
            margin-top: 155px;
        }

    h1.banner_home_slogan {
        font-size: 5rem; /* 80px bij basis van 16px */
    }

    .banner_page {
        min-height: 100px;
    }

    .menuboog {
        top: 140px;
    }

    .topheader-tekst {
        padding: 20px 15px 5px 20px;
    }

    .topheader h2 {
        font-size: 1.125rem; /* 18px bij basis van 16px */
    }

    .topheader p {
        font-size: .75rem; /* 12px bij basis van 16px */
        line-height: 1.25;
    }

    .inschrijving_nieuwsbrief_veld {
        width: 300px;
    }

    .inschrijving_nieuwsbrief_knop {
        margin-left: 20px;
    }

    .teaser_home_event_bg {
        max-width: 600px;
    }

        .teaser_home_event_bg > img {
            max-width: 600px;
        }

    .teaser_home_event_bg_overlay {
        max-width: 600px;
        height: 200px;
    }

    .teaser_home_event_bg_boog {
        max-width: 400px;
        height: 200px;
        bottom: 125px;
    }

    .border-right-sm {
        border-right: 1px solid;
    }

    .border-left-sm {
        border-left: 1px solid;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .HomepageAlert, .HomepageAlertAdmin {
        display: initial; /* Zichtbaar vanaf dit formaat */
    }

    section.teaser_home {
        margin-top: 40px;
    }

    .topheader-tekst {
        padding: 35px 40px 10px 40px;
    }

    .topheader p {
        font-size: .875rem; /* 14px bij basis van 16px */
    }

    .content_tekst, .content_datepicker, .submenu_sidebar {
        padding: 75px 10px 75px 10px;
    }

    .teaser_home_event_bg {
        max-width: 720px;
    }

        .teaser_home_event_bg > img {
            max-width: 720px;
        }

    .teaser_home_event_bg_overlay {
        max-width: 600px;
        height: 220px;
    }

    .teaser_home_event_bg_boog {
        max-width: 400px;
        height: 220px;
        bottom: 110px;
    }

    .border-right-md {
        border-right: 1px solid;
    }

    .border-left-md {
        border-left: 1px solid;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .navbar-nav {
        display: inline-block; /* Aanpassing voor multi line menu */
    }

    .teaser_home_item {
        min-height: 400px;
    }

    .footer_logo, .footer_contact, .footer_scholengroep {
        text-align: left;
    }

    .footer_social {
        text-align: right;
    }

    .AccountStatus {
        top: 15px;
    }

    .border-right-lg {
        border-right: 1px solid;
    }

    .border-left-lg {
        border-left: 1px solid;
    }
}