/* begin your css */

/* Style the body */
body,
button {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
	color:#333366;
}


p { color:#333366; }

/* navigation bar */
.navbar {
    overflow: hidden;
    background-color: #253062;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

/* Style the navigation bar links */
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
    float: right;
}

/* Change color on hover */
.navbar a:hover {
    background-color: #ddd;
    color: #253062;
}

/* Active/current link */
.navbar a.active {
    background-color: #253062;
    color: white;
}

/* main */
.main {
    background-color: white;
    padding: 20px;
}

/* Footer */
.footer {
    padding: 200px;
    text-align: right;
    background: #ddd;
    background-image: url("Achtergrond.png");
    background-position-x: left;
    background-position-y: bottom;
}

/* links */
a:link,
a:visited,
button {
    cursor: pointer;
    background-color: #253062;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 0px;
}

a.white:link,
a.white:visited {
    Background-color: white;
    color: #333366;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block
}


/*links hover*/
a:hover,
a:active,
a.active_page,
button:hover,
button:active {
    background-color: #ddd;
    color: #253062;
}

a.white:hover,
a.white:active {
    background-color: #ddd;
    color: #333366;
}

/* change image on hover*/

    .Knop {
        width: 200px;
    }
    .Knop .KnopHover {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .KnopHover {
        display: inline;
    }

/* Five image containers (use 25% for four, and 50% for two, etc) */

	.row {
 	 display: flex;
		}

	.column {
		 border: 1px solid red;
 		 padding: 0px;
		 width:100%;
		}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}

/* end your css */

button {
    width: 82.69px;
    height: 38px;
    font-size: 16px;
}

/* UpperDiv */
.upperDiv {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 65px;
    min-height: 300px;
}


/* Div to support the title and filters */
.supportDiv {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 30%;
    left: -40px;
    margin-right: 50px;
}

/* Wider */
.Wider {
    width: 50%;
}

/* margin between 2 divs */
.margin {
    margin: 13px;
}

/* Display flex */
.flex {
    display: flex;
}

/* selecting menu organize */
.selectMenu {
    height: 60%;
    width: 100%;
    margin-top: 5px;
}

.selectBox {
    border-radius: 2px;
}

/* Text class */
.text {
    margin: 1.5px;
    margin-left: 5px;
}

/* Dropdown menu */
.select {
    height: 10%;
    width: 50%;
    margin: 1px;
    display: flex;
    margin-left: auto;
    order: 2;
}

/* title */
.titleText {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 40%;
    font-size: 20px;
}

/* Footer */
.footer {
    padding: 200px;
    text-align: right;
    background: #ddd;
    background-image: url("/images/Achtergrond.png");
    background-position-x: left;
    background-position-y: bottom;
}


/* Div for the filter input*/
.inputDiv {
    display: flex;
}

/* A div for the images */
.imageDiv {
    width: 100%;
    height: 5%;
    display: flex;
    order: 2;
    justify-content: flex-end;
    align-items: flex-start;
}

.image {
    padding: 1%;
    padding-left: 5%;
    padding-right: 5%;
}

/* A div for the explaination*/
.explainText {
    width: 100%;
    height: 25%;
    font-size: medium;
    position: relative;
    top: 25%;
    margin-top: 25px;
}

/*All the table things are going to be underneath this line*/

table {
    width: 100%;
}

th {
    background-color: #253062;
    color: white;
}

td,
th {
    text-align: left;
    padding: 8px;
}

td {
    height: 200px;
}

tr {
    display: relative !important;
}

thead {
    position: sticky;
    top: 0%;
    z-index: 1;
}

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

.flexbox {
    display: flex;
    height: 100%;
    width: 100%;
}

.fotoBox {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    flex-wrap: wrap;
    width: 40%;
    min-width: 40%;
    height: 25%;
    min-height: 25%;
}

.halfTextBox {
    width: 60%;
    height: 25%;
    top: 60%;
    padding: 1%;
}

.textBox {
    width: 100%;
    height: 25%;
    padding: 2%;
}

.textBox2 {
    width: 100%;
    height: 10%;
    padding: 2%;
}

.title {
    height: 10%;
    width: 60%;
    top: 25%;
    display: flex;
    align-items: center;
    font-weight: bold;
    padding: 1%;
    font-size: 30px;
}

.flexWrap {
    display: inline-table;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.previous_link,
.next_link {
    position: relative;
}

.previous_link {
    margin-left: 10px;
}

.paginationSelectable {
    position: relative;
    max-height: 38px;
    margin-left: 2px;
    background-color: #253062;
    color: white;
    border: #253062 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paginationSelectable:hover,
.paginationSelectable:active {
    background-color: #ddd;
    color: #253062;
}

.watermerk {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 5px;
}

.bottom {
    position: relative;
}
.per_pagina {
    display: flex;
    justify-content: center;
    padding-left: 2px;
    padding-right: 2px;
    align-items: center;
    height: 38px;
    background-color: #253062;
    color: white;
}
.paginationsButtons {
    display:flex;
    position: relative;
    justify-content: center;
    height: 38px;
    max-height: 38px;
    align-items: center;
    width: auto;
    top: 25%;
    left: 28%;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0%;
    z-index: 1;
}