body, html {
    height: 100%
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    /*background-image: linear-gradient(to right, rgba(255, 238, 191, 0.15), rgba(255, 238, 191, 0.15)), url("../images/SGL-nu.png");*/
	background-image: linear-gradient(to right, rgba(255, 238, 191, 0.1), rgba(255, 238, 191, 0.1)), url("../images/sgl-1963.png");
    background-position: center;
	/*background-attachment:fixed;*/
    background-repeat: no-repeat;
    background-size: cover;
}
.header {
    position: sticky;
    background-color: #5b6564;
    left: 0px;
    right: 0px;
    top: -5px;
    z-index:1;
}
.header_logo { /* 1 niveau in de root */
    background-image: url("../../images/NVHR/Logo/Logo_NVHR.png"); /* origineel 75 x 91 px */
    background-repeat: no-repeat;
    /* verhouding bepalen */
    width: 50px;
    height: 60px;
    background-size: cover;
    margin: 5px;
    border: none;
}
.content {
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 4px;
    z-index: 500;
}
 *, *:before, *:after {
	 box-sizing: border-box;
	 margin: 0;
	 padding: 0;
	 /*word-break: break-all;*/
}
 ul {
	 list-style: none;
}
 a, a:link, a:visited {
	 color: #4d4d4d;
	 /*color: white;*/
	 text-decoration: none;
}
/* Navigatiebalk */
 nav {
	 align-items: center;
	 display: flex;
	 justify-content: space-between;
	 padding: 0rem 0rem;
	 color: white;
	 background:#333;
 	 font-size: 1rem; 
}
 .main-nav-holder {
	 transition: 0.2s;
}
 .main-nav {
	 display: flex;
	 padding: 0em 0 0em 0 ;
}
 .main-nav > li {
	 /*border: 0.1rem solid #e6e6e6;*/
	 margin: 0 0 0 0;
	 position: relative;
}
 .main-nav > li > a, .main-nav > li > a:link, .main-nav > li > a:visited {
	 display: block;
	 padding: 0.6rem 0.4rem;
	 font-size: 1rem;
	 background: #333;
	 color: white;
}
 .main-nav > li > a:hover, .main-nav > li > a:link:hover, .main-nav > li > a:visited:hover {
	 background: #04aa6d;
	 color: white;
}
 .main-nav > li.has-submenu > label {
	 color: white;
	 cursor: pointer;
	 display: block;
	 padding: 0.6rem 2.8rem 0.8rem 1.5rem;
	 position: relative;
}
 .main-nav > li.has-submenu > label:hover {
	 background: #04aa6d;
}
 .main-nav > li.close-nav {
	 display: none;
}
 .main-nav > li.active > a, .main-nav > li.active > a:link, .main-nav > li.active > a:visited, .main-nav > li.active > label {
	 background: #04aa6d;
	 color: white;
	 border: none;
}
 .menu-caret {
	 border-bottom: 0.6rem solid transparent;
	 border-top: 0.6rem solid transparent;
	 border-left: 0.6rem solid #808080;
	 display: inline-block;
	 line-height: 0;
	 margin: 0 -0.3rem 0 1.2rem;
	 position: absolute;
	 right: 1.4rem;
	 top: 1rem;
	 transform-origin: 0.3rem 50%;
	 transition: 0.2s;
}
 .submenu {
	 display: flex;
	 padding: 0 0 0 0;
	 opacity: 0;
	 position: absolute;
	 transition: 0.2s;
	 visibility: hidden;
	 transform: translateY(-5rem);
	 white-space: nowrap;
}
 .submenu > li {
	 position: relative;
	 background-color: #333;
	 color: white;
}
 .submenu > li > a, .submenu > li > a:link, .submenu > li > a:visited {
	 color: white;
	 display: block;
	 padding: 0.7rem 1.6rem;
}
 .submenu > li > a:hover {
	 color: white;
	 background-color: #04aa6d;
}
 .submenu > li::after {
	 content: "|";
	 position: absolute;
	 top: 0.7rem;
	 right: -0.3rem;
}
 .submenu > li:last-of-type::after {
	 display: none;
}
 .check-toggle {
	 display: none;
}
 .check-toggle:checked ~ label {
	 background: #04aa6d;
}
 .check-toggle:checked ~ .menu-caret {
	 transform: rotate(90deg);
}
 .check-toggle:checked ~ .submenu {
	 opacity: 1;
	 transform: translateY(0);
	 visibility: visible;
}
 .hamburger-menu, .menu-overlay {
	 display: none;
}
 .right-nav {
	 display: flex;
}
 .right-nav > li {
	 align-items: center;
	 display: flex;
	 margin: 0 0.4rem 0 0;
	 position: relative;
}
 .avatar {
	 border: 0.1rem solid rgba(0, 0, 0, 0.1);
	 border-radius: 50%;
	 box-shadow: 0 0 0.3rem 0 rgba(0, 0, 0, 0.4);
	 /*cursor: pointer;*/
	 display: inline-block;
	 height: 2.6rem;
	 margin: 0 0 0 1rem;
	 overflow: hidden;
	 width: 2.6rem;
}
 .avatar img {
	 width: 100%;
}
 .account-menu {
	 border-top: 0.3rem solid #ccc;
	 opacity: 0;
	 position: absolute;
	 right: 0;
	 top: 5rem;
	 transition: 0.2s;
	 transform: translateY(-4rem);
	 visibility: hidden;
	 z-index: 1;
}
 .account-menu li {
	 margin: 0 0 0.1rem;
}
 .account-menu li a, .account-menu li a:link, .account-menu li a:visited {
	 background: #f5f5f5;
	 display: block;
	 padding: 0.5rem 1.5rem;
}
 .account-menu li a:hover {
	 background: #e6e6e6;
}
 .account-menu::before {
	 border-bottom: 0.8rem solid #ccc;
	 border-left: 0.6rem solid transparent;
	 border-right: 0.6rem solid transparent;
	 content: "";
	 position: absolute;
	 top: -1rem;
	 right: 1rem;
}
 .check-toggle:checked ~ .account-menu {
	 opacity: 1;
	 transform: translateY(0);
	 visibility: visible;
}
 @media (max-width: 767px) {
	 .hamburger-menu, .menu-overlay {
		 display: block;
	}
	 .menu-overlay {
		 bottom: 0;
		 left: 0;
		 opacity: 0;
		 position: fixed;
		 right: 0;
		 transition: 0.2s;
		 transform: translateX(30%);
		 visibility: hidden;
		 top: 0;
		 z-index: 2;
	}
	 .hamburger-menu {
		 background: repeating-linear-gradient(0deg, transparent 0, transparent 0.3rem, #fff 0.3rem, #fff 0.7rem);
		 cursor: pointer;
		 display: inline-block;
		 height: 2rem;
		 width: 2.6rem;
	}
	 .main-nav-holder {
		 background: white;
		 bottom: 0;
		 left: 0;
		 overflow: hidden;
		 position: fixed;
		 top: 0;
		 transform: translateX(-100%);
		 width: 25rem;
		 z-index: 3;
	}
	 .main-nav {
		 bottom: 0;
		 display: block;
		 left: 0;
		 overflow-y: scroll;
		 position: absolute;
		 right: -1.5rem;
		 top: 0;
	}
	 .main-nav > li {
		 border: none;
		 border-bottom: 0.1rem solid #f2f2f2;
		 margin: 0;
		 color: white;
		 background-color: #333;
	}
	 .main-nav > li.close-nav {
		 display: block;
		 text-align: right;
	}
	 .main-nav > li.close-nav > label {
		 cursor: pointer;
		 display: block;
		 height: 4rem;
		 position: relative;
	}
	 .main-nav > li.close-nav > label::before, .main-nav > li.close-nav > label::after {
		 background: #808080;
		 content: "";
		 height: 1.8rem;
		 left: 50%;
		 position: absolute;
		 top: 1rem;
		 transform: translateX(-50%);
		 width: 0.2rem;
	}
	 .main-nav > li.close-nav > label::before {
		 transform: rotate(-45deg);
	}
	 .main-nav > li.close-nav > label::after {
		 transform: rotate(45deg);
	}
	 .main-nav > li.close-nav > label:hover::before, .main-nav > li.close-nav > label:hover::after {
		 background: #333;
	}
	 .submenu li::after {
		 display: none;
	}
	 .check-toggle:checked ~ .main-nav-holder {
		 opacity: 1;
		 transform: translateX(0);
		 visibility: visible;
	}
	 .check-toggle:checked ~ .menu-overlay {
		 background: rgba(0, 0, 0, 0.3);
		 opacity: 1;
		 transform: translateX(0);
		 visibility: visible;
	}
	 .check-toggle:checked ~ .submenu {
		 height: auto;
	}
	 .submenu {
		 display: block;
		 height: 0;
		 padding: 0 0 0 1rem;
		 position: static;
	}
}
/* Eind navigatiebalk */
.button {
    border: 1px;
    border-color:transparent;
    border-radius: 5px;
    font-size: 1.5em;
    /*font-weight: bold;*/
    background-color: #009100;
    color:white;
    margin: 5px;
    cursor: pointer;
}
.message {
    margin-top: 5%;
    width: 30%;
    margin-right: auto;
    margin-left: auto;
    color: white;
    background: url("../images/schoolbord-2.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: auto;
    padding: 5px;
    border: 5px solid #04aa6d;
    border-radius: 10px;
}
.message hr {
    color: white;
}
.content {
    background-color: transparent;
}
.btn {
    width:40%;
    background-color: #e8f0fe;
    color: black;
    font-size: 1em;
    padding: 7px 10px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.btn:hover {
        background-color: #d8dfec;
}
input[type=text], select {
    width: 80%;
    font-size: 1em;
    padding: 2px 2px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.text {
    width: 80%;
    padding: 2px 2px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=email] {
    width: 80%;
    font-size: 1em;
    padding: 2px 2px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=password] {
    width: 80%;
    font-size: 1em;
    padding: 2px 2px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=submit] {
    width: 60%;
    background-color: #e8f0fe;
    color: black;
    font-size: 1em;
    padding: 2px 2px;
    margin: 2px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=file] {
    width: 90%;
    background-color: #e8f0fe;
    color: black;
    font-size: 1em;
    padding: 2px 2px;
    margin: 2px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #d8dfec;
}
input[type=button] {
    width: 60%;
    background-color: #e8f0fe;
    color: black;
    font-size: 1em;
    padding: 2px 2px;
    margin: 2px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.pop {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.tblcenter {
    width: 70%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    background-color: #04aa6d;
    color: white;
}
.tbl table, td {
  border: 1px solid #fff;
}
.tbl td {
  border-collapse: collapse;
}