/*Deze stylesheet is voor de website broeker-archief.extended zonder article.css*/

 /* Om makkelijk te zoeken gebruik dan de zoekfunctie (ctrl + f) en tik daan de class naam of id in het zoekvak */
 /* De font styling voor h1 t/m h5 zijn standaard, indien te wijzigen dan hieronder benoemen
 */

 * {
  box-sizing: border-box;
  }

h1 {font-size: 4vw; padding: 1em; color: lightgray; text-shadow: 1px 1px 0px #717171; width: 90%; margin-left: 10px;}
h2 {margin-left: 10px; font-size: 3vw; text-shadow: 1px 1px 0px #717171;}
h3 {margin-left: 10px; font-size: 2.5vw; text-shadow: 1px 1px 0px #717171;}
h4 {margin-left: 10px; font-size: 2vw; text-shadow: 1px 1px 0px #717171;}
p {font-size: 1.8vw;}
 
 /*De foto en tekst voor de home pagina*/
body, html {
    height: 100%;
    max-width: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.inhoud, dl, dd, dt {
    font-size: 1.8vw;
}

.errors {
    padding: 1em;
    border: 1px solid red;
    background-color: #eef13cff;
    color: red;
    margin-bottom: 1em;
    overflow: auto;
    font-size: 2vh;
}

.errors ul {
    margin-left: 1em;
}

/* ==== De search button wordt in een container geplaatst in de articleslist - Overzicht ===== */

.containersearch {
    display: flex;
    background-color: #eef13cff;
    }

.containersearch div {
    background-color: #eef13cff;
    color:#000;
    width: 95%;
    margin: auto 10px;
    padding: 10px;
    text-align: right;
    font-size: 1.8vw;
    }

/* =============== table voor overzicht (articles & showarticle & authorlist) ================ */
.table {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

thead {
    font-style: italic;
}

th {
    text-align: left;
    font-size: 1.5vw;
    font-weight: bold;
    border-top: 2px solid #dfa2a2;
    border-bottom: 2px solid #dfa2a2;
    vertical-align: top;
    background-color: #98f898;
}

td {
    text-align: left;
    font-size: 1.5vw;
    font-weight: normal;
    border-bottom: 1px solid #d6d6d6;
    vertical-align: top;
}

tr:nth-child(even){background-color: #e8f1e8;}

tr:hover {background-color: #98f898;}

td img {
    max-width: 120px;
}

td iframe {
    max-width: 200px;
}

td video {
    max-width: 120px;
}

td [summary] {
    font-style: italic;
    font-size: 8px;
}

td.summary2 {
    font-style: oblique 15;
    font-weight: 900;
    font-size: 2.8vw;
    font-family: 'Times New Roman', Times, serif;
}

td.info {
    font-style: oblique;
}
td.info2 {
    font-style: normal;
    font-weight: 500;
    font-size: 2.5vw;
    font-family: 'Times New Roman', Times, serif;
}


tr.overzicht {
    max-width: 100%;
    font-size: 1.8vh;
    background-color: #b0f8b0;
}

@media (max-width: 480px) {
tr.overzicht {
    width: fit-content;
    margin: 0 auto;
    font-style: italic;
    background-color: #ddf2f8;
    }

}

tr.info{
    background-color: lightyellow;
    font-style: italic;
    border-bottom: solid 2px #045607;
}

table.articles {
    width: 100%;
    margin-top: 2rem;
    padding: .75rem;
    table-layout: auto;
    background-color: transparent;
    border-collapse: collapse;
}

.show-container{
    padding:0.01em 16px;
    margin-left: auto;
    margin-right: auto; 
    background-color: rgb(81, 197, 81); 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}



@media (max-width: 800px) {
  .container-list {
    position: relative;
    max-width: 500px;
    margin: 0;
    }
}


/* ======= containers voor presentatie van jpg, png, mp4, pdf, mp3 ===== */

.container-iframe {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.container-edit {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow-y: hidden;
    width: 80%;
    /*max-height: 40%*/
    /*padding-top: 50%; */
    }


.container-pdf {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    /*overflow-y: auto;*/
    width: 80%;
    /*max-height: 40%*/
    padding-top: 50%; 
    }

.container-mp4 {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 85%;
    /*max-height: 100%;
    padding-top: 50%;*/
    }

    video {
        width: 100%;
        height: auto;
        }

.container-image {
    position: relative;
    height: auto;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    }

.container-mp3 {
        /*margin-left: 20%;
        margin-top: 20px;*/
        padding: 7%;
        /*height: 75px;
        position: relative;*/
        position: relative;
        height: 10%;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

.container-list {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    max-width: 95%;
    height: auto;
    
    }

.container-broeker {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 152%; /* 2:3 Aspect Ratio */
    }

.responsive {
    max-width: 100%;
    height: auto;
    margin-left: 5px;
}

.responsive-img {
    display: block;
    margin:auto
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    max-height: 100%;
    }

.img-magnifier-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    max-width: 750px;
    
    
}
    

.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    /*set the size of the magnifier glass*/
    width: 150px;
    height: 150px;
    }

.currentpage {
    color: #0e1081;
    font-size: 2vw;
    font-weight: bold;
}

.currentpage:before {
  content: "[";
}

.currentpage:after {
  content: "]";
}

.pagesnr {
    font-size: 1.8vw;
    color: #6a6ce9;
    font-weight: bold;
    background-color: #eef13cff;

}

    /* ==================== HOME PAGE ======================== */
    .hero-image {
        /* Use "linear-gradient" to add a darken background effect to the image (welkom-broekstreek.jpg). This will make the text easier to read */
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/img/welkom-broekstreek.jpg");
        /* Set a specific height */
        height: 40%;
        /* Position and center the image to scale nicely on all screens */
        background-position: center;
        background-repeat: repeat;      /*no-repeat*/
        /*background-size: cover;*/
        position: relative;
        width: 100%;
    }

    /* Place text in the middle of the image */
    .hero-text {
        text-align: center;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #eef13cff;
    }

    .hero-image button {
        border: none;
        border-radius: 8px;
        outline: 0;
        display: inline-block;
        padding: 5px 15px;
        font-weight: 600;
        font-size: 12px;
        background-color: rgba(211, 245, 23, 0.7);
        text-align: center;
        cursor: pointer;
        position: absolute;
        bottom: 8px;
        right: 10px;
       
   }

    .hero-image button:hover {
        background-color: rgb(211, 245, 23);
        font-weight: 600;
        color: #344d9eff;
    }

   /*================= De navigatie bar ======================*/
    .topnav {
        margin-bottom: 5px;
        overflow: hidden;
        background-color: #344d9eff;
        }

    .topnav a {
        float: left;
        display: block;
        color: #eef13cff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 1.8vw;
        }

    .topnav a:hover {
        background-color: #eef13cff;
        color: black;
        }

    .topnav a.active {
        background-color: #19a844ff;
        color: white;
        }

    .topnav .icon {
        display: none;
        }

    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
        @media screen and (max-width: 750px) {
        .topnav a:not(:first-child) {display: none;}
        .topnav a.icon {
            float: right;
            display: block;
        }
        }

    /* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
    @media screen and (max-width:750px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    }

    /*================ De footer ==================*/
    .navbar {
        overflow: hidden;
        background-color: #344d9eff;  
        /*position: fixed;*/
        /*bottom: 0;*/
        width: 100%;
    }

    .navbar a {
        float: left;
        display: block;
        color: #eef13cff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 1.8vw;
    }

    .navbar a:hover {
        background-color: #eef13cff;
        color: black;
    }

    .navbar a.active {
        background-color: #19a844ff;
        color: white;
    }

    .navbar .icon {
        display: none;
    } 

    .navbar p {
        display: box;
        float: left;
        margin-left: 15px;
        font-size: 1.8vw;
        color: #eef13cff;
    }

    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
    @media screen and (max-width: 600px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
        float: right;
        display: block;
    }
    }

    /* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
    @media screen and (max-width: 600px) {
    .navbar.responsive {position: relative;}
    .navbar.responsive .icon {
        position: absolute;
        right: 0;
        bottom:0;
    }
    .navbar.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    }

    /*================= De button 'Naar Boven' ======================*/
    #myBtn {
        display: none;
        position: fixed;
        top: 60px;
        left: 30px;
        z-index: 99;
        font-size: 12px;
        border: none;
        outline: none;
        background-color: #344d9eff;
        color: #eef13cff;
        cursor: pointer;
        padding: 10px;
        border-radius: 8px;
    }
    
    #myBtn:hover {
        color: #344d9eff;
        background-color: #eef13cff;
    }

    /*================= HOME PAGE ====================================*/
    /*Het home scherm wwordt opgebouwd in een grid (raster)*/
    .grid-container {
        display: grid;
        grid-template-areas:
        'header'
        'lichtkrant-container'
        'search'
        'intro'
        'main'
        'menu'
        'facts'
        'games';
        /* HIER eventueel een nieuw grid segment */
        background-color: white;
        gap: 10px;
    }

    .header {
        grid-area: header;
        background-color: #19a844ff;
        text-align: center;
        color: #111111ff;
    }

    /*.header > h1 {
        font-size: 40px;
    }*/

    .intro {
        grid-area: intro;
        margin: 0 10px;
        border: 2px solid #344d9eff;
        background-color: #c8fcccff;
        padding: 10px;
    }

    .search {
        width: 65%; 
        margin-top: 5px; margin-bottom: 5px; margin-left:auto; margin-right:auto; 
        border-radius: 10px; 
        background-color: #19a844ff;
    }

    .intro > h2 {
        font-size: 20px;
    }

    .intro li {
        margin-bottom: 5px;
    }

    .menu {
        grid-area: menu;
        margin: 0 10px;
    }

    .title {
        grid-area: menu;
        border: 2px solid #19a844ff;
        padding: 3px;
        padding-left: 10px;
        margin-top: 2px;
        margin-bottom: 0px;
        background-color: #eef13cff;
        color: #19a844ff
    
    }

    .menu ul {
        grid-area: menu;
        border: 2px solid #19a844ff;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .menu li {
        font-family: Verdana;
        font-size: 1.8vw;
        font-weight: bold;
        color: rgb(14, 0, 0);
        padding: 8px 20px 8px 20px;
        /*padding-left: 20px;*/
        margin-top: 0px;
        margin-bottom: 0px;
        background-color: #c8effcff;
    }

    .menu li:hover {
        background-color: #eef13cff;
        color: #111111ff;
    }

    .content {
        grid-area: main;
        margin: 0 10px;
        border: 2px solid #344d9eff;
        background-color: #c8effcff;
        padding: 10px;
    }

    .content > h1 {
        font-size: 30px;
        margin-bottom: 7px;
    }

    .content > p {
        margin-bottom: 7px;
    }

    .facts {
        grid-area: facts;
        margin: 0 10px;
        border: 2px solid #344d9eff;
        background-color: #c8fcccff;
        padding: 10px;
    }

    .facts > h2 {
        font-size: 20px;
    }

    .facts li {
        font-size: 1.8vw;
        margin-bottom: 5px;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 40%;
        border-radius: 5px;
    }

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    img {
        border-radius: 5px 5px 0 0;
    }

    .container {
        padding: 2px 16px;
    }

    .games {
        grid-area: games;
        border: 2px solid #344d9eff;
        background-color: #eef13cff;
        padding: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .games > h2 {
        font-size: 20px;
    }

    .games ul {
        font-size: 1.8vw;
        margin-bottom: 5px;
    }

    /* Bij een nieuw grid segment HIER de opmaak daarvan */

    /*============= De BAT-leden gallerij ===================*/
    div.gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    div.gallery-item {
        margin: 5px;
        border: 1px solid #ccc;
        width: calc(24% - 20px);
    }

    div.gallery-item img {
        width: 100%;
        height: auto;
    }

    div.gallery-item div.desc {
        font-size: 1.8vw;
        padding: 15px;
        text-align: center;
    }

    @media only screen and (max-width: 768px) {
        div.gallery-item {
            width: calc(50% - 20px);
        }
    }

    @media only screen and (max-width: 480px) {
        div.gallery-item {
            width: calc(100% - 20px);
        }
    }

    /*============= LOGIN, REGISTREER, CONTACT, INPUT ===================== */
    .form-container-personal {
        width: 380px;
        height: auto;
        margin-left: auto;
        margin-right: auto; 
        margin-bottom: 10px;
        background-color: rgb(147, 184, 240);  
        padding:20px; 
        border-radius: 8px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .form-container-category {
        width: 380px;
        height: auto;
        margin-left: auto;
        margin-right: auto; 
        margin-bottom: 10px;
        background-color: rgb(147, 184, 240); 
        padding:15px; 
        border-radius: 8px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    form {
        display: flex;
        flex-direction: column;
    }

    form p {
        clear: both;
    }


    input, label {
        display: block;
        margin-left: 15px;
    }

    label {
        font-size: 14px;
    }

    input[type=text], input[type=password] {
        width: 75%;
        overflow-y: scroll;
        padding: 12px 20px;
        border: 1px solid #682ed3ff;
        box-sizing: border-box;
        font-size: 16px;
    }

    input::placeholder {
        font-size: 16px;
        font-family: 'Times New Roman', Times, serif;
    }

    #message {
        font-family: 'Times New Roman', Times, serif;
        font-size: 1.8vh;
    }

    input[type="submit"] {
        margin-left: 8px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; 
        max-width: min-content; max-height: min-content; 
        padding: 5px; clear: both; 
        font-size: 1.8vw; 
        border: 3px outset; 
        background-color: rgb(253, 6, 6); color: antiquewhite;
    }

    input[type="submit"]:hover {
        border: 3px inset; 
        background-color: rgb(139, 3, 3); color: white; 
    }

    input[type="checkbox"] {
        float: inline-start; 
        clear: left; 
        width: auto; 
        margin-left: 10px;
    }

    input[type="checkbox"] + label {
        clear: right
    }

    button {
        margin: 5px;
        background-color: #04AA6D;
        border: 1px solid #682ed3ff;
        color: yellow;
        padding: 10px 18px;
        cursor: pointer;
    }

    button:hover {
        background-color: #eef13cff;
        color: blue;
    }

    .imgcontainer {
        text-align: center;
        margin: 24px 0 12px 0;
    }

    img.avatar {
        width: 20%;
        border-radius: 30%;
    }

    .container-action {
        padding: 8px;
        border-radius: 10%;
        background-color: rgb(147, 184, 240);  
    }

    span.psw {
        float: left;
        padding-top: 16px;
    }

    /* Change styles for span and cancel button on extra small screens */
    @media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
        }
    }

        /*=========================== pdf, mp3 of mp4 inzenden ================ */
    input[type=file] {
        width: 40%;
        color: yellow;
        background-color: blue;
        padding: 3px;
        margin: 10px;
        font-size: 2vw;
    }

    input[type=file]:hover {
        color: blue;
        background-color: #eef13cff;
    }


    /* ======================== gallery foto-collage ==================== */
    .container-gallery {
    width: 100%;
    margin: 1vh 1vw;
    }

    .gallery-show {
    display: grid;
    grid-template-columns: repeat(8, 10fr);
    grid-template-rows: repeat(16, 10vw);
    grid-gap: 0; /*.2rem;*/ 
    }

    .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }

    .gallery__item--1 {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        }

    .gallery__item--2 {
        grid-column: 3 / span 2;
        grid-row: 1 / span 2;
        }

    .gallery__item--3 {
        grid-column: 5 / span 4;
        grid-row: 1 / span 5;
        }

    .gallery__item--4 {
        grid-column: 1 / span 4;
        grid-row: 3 / span 3;
        }

    .gallery__item--5 {
        grid-column: 1 / span 4;
        grid-row: 6 / span 3;
        }

    .gallery__item--6 {
        grid-column: 5 / span 4;
        grid-row: 6 / span 3;
        }

    .gallery__item--7 {
        grid-column: 1 / span 4;
        grid-row: 9 / span 3;
        }

    .gallery__item--8 {
        grid-column: 5 / span 2;
        grid-row: 9 / span 2;
        }

    .gallery__item--9 {
        grid-column: 7 / span 2;
        grid-row: 9 / span 2;
        }

    .gallery__item--10 {
        grid-column: 1 / span 4;
        grid-row: 12 / span 5;
        }

    .gallery__item--11 {
        grid-column: 5 / span 4;
        grid-row: 11 / span 3;
        }

    .gallery__item--12 {
        grid-column: 5 / span 4;
        grid-row: 14 / span 3;
        }

    /* On bigger screens, increase size */
    @media only screen and (min-width: 1500px) {
        .gallery {
            display: grid;
            grid-template-columns: repeat(8, 12vw);
            grid-template-rows: repeat(16, 14vw);
            grid-gap: 1rem; 
            }
    }

    /* ================ tekst invoer presentatie ================= */
    
    textarea {
        float: left; 
        font-size: 1rem; 
        min-height: 15em; 
        resize: vertical; 
        width: 95%; 
        overflow: auto; 
        margin-bottom: 1em;  
        background-color: rgb(254, 255, 183);
    }

    .form-textarea {
        font-family:'arial'; 
        font-size: 2vw; 
        font-weight: 500;
        margin: 0 10px 0 10px;
    }

    textarea#articletext {
        float: left; 
        min-height: 20em; resize: vertical; width: 90%; overflow: auto; 
        margin-left: 15px; margin-right: auto; margin-bottom: .5em;  
        padding: 0.5em; 
        background-color: rgb(254, 255, 183);
    }
    
    textarea#article_summary {
        float: left; 
        min-height: 3em; resize: vertical; width: 90%; overflow: auto; 
        margin-left: 15px; margin-right: auto; margin-bottom: .5em;  
        padding: 0.5em; 
        background-color: rgb(254, 255, 183);
    }

    .inhoud {
        font-size: 0.8rem;}

    /* =============== woordspel NL ============== */
    .w3-container:after, .w3-container:before {
        content:"";
        display:table;
        clear:both;
        }

    .w3-container{
        padding:0.01em 16px;
        width: 650px;
        margin-left: auto;
        margin-right: auto; 
        background-color: rgb(200, 250, 200); 
        border-radius: 8px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

    .w3-flex{
        display:flex
        }

    .w3-padding{
        padding:8px 16px!important
        }

/* ============ Ticker of Lichtkrant op Homepagina ============== */

.lichtkrant-container {
    border: 2px solid;
    border-color: #1bbd41;
    border-style: 2px solid ;

    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #f9f9da; /* Achtergrondkleur */
    color: #000; /* Tekstkleur */
    padding: 10px 0;
    overflow: hidden; /* Verberg tekst buiten de container */
    white-space: nowrap; /* Zorg dat tekst op één regel blijft */
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.lichtkrant-tekst {
    display: inline-block;
    font-size: 2vw;
    padding-left: 100%; /* Start volledig rechts buiten beeld */
    animation: scroll-left 50s linear infinite; /* Animatie: scroll-left, 30 sec, oneindig */
}

/* De animatie definieren */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%); /* Beweeg naar links */
    }
}

/* Pauzeer bij hover */
.lichtkrant-container:hover .lichtkrant-tekst {
    animation-play-state: paused;
}