@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,600,600i,700,700i');

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

a {color: #007ab8; text-decoration: underline}

a:hover {color: #003F6c; text-decoration: none;}

header.py-3 {
  padding-bottom: 0.5rem !important;
}

div.nls-kop-afb {
    text-align: center;
	background-color: white;
}

div.nls-kop-tekst {
    font-size: 50px;
	font-weight: bold;
	color: #0077b3;
	margin-left: 35px;
	vertical-align: middle;
}

div.nls-kop-tekst-smallscreen {
    font-size: 40px;
	font-weight: bold;
	color: #0077b3;
	margin-left: 10px;
	margin-top: 20px;
	vertical-align: middle;
}

div.stitel {
	width: 100%;
	background-color: #66afd4;
	color: white;
	font-weight: bold;
	font-size: 35px;
	margin-top: 8px;
	padding-left: 12px;	
}

.tocc a {
	color: #007ab8;
	text-decoration: none;
}

.tocc a:hover {text-decoration: underline;}

div.toc-indent {
	margin-left: 1em;
	padding-left: 1em;
	text-indent: -1em;
}

main.col-lg-9 {
	padding-left: 25px;
	padding-right: 25px;
	max-width: 95ch;
}

div.footer {
    margin-top: 20px;
}

hr.footer {
	color: #0066cc;
}

span.vb-mark, span.vb-mark-fout {
	font-weight: 500;
	font-style: italic;
}

p.copyright {
	font-size: 13px;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 22px;
	margin-top: 20px;
}

span.vb {
	text-decoration: underline ;
	text-underline-offset: 4px;
}

table.vb-tabel, table.wwregels {
	tr, td {border: 2px solid white;}
	td { padding-top: 5px;
		 padding-bottom: 5px;
		 padding-left: 15px;
		 padding-right: 15px; }
	td {spacing: 0px;}
}

table.vb-tabel {
	tr:nth-child(odd) {background: #E0E0E0;}
}

span.tip {
	color: white;
	background-color: #4faf48; 
	font-weight: bold;
	padding-left: 5px; 
	padding-right: 5px;
	border-radius: 5px;
}

/* Stijlefinities uitklapsysteem NLS en Academisch Taalgebruik */

button.accordion {
  color: #000000;
  background-color: #dff2fd;
  cursor: pointer;
  padding: 6px 60px 2px 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

.active,  .accordion:hover {
  background-color: #66afd4;
  color: white;
}

.accordion:before{
  content: "\002B\0020\0020\0020";
  white-space: pre;
  font-weight: bold;
/*  float: left; */
  margin-left: 5px;
}

.acc_active:before {
  content: "\2212\0020\0020\0020";
  white-space: pre;
}

/* Stijldefinities panel in nls_addons,css en au_addons.css */

/* Einde definities uitklapsyteem */

/* Stijldedfinities hamburgermenu */
.hamburger-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
 }

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
/* Einde stijldefinities hamburgermenu */

/* Media-definities: instellingen voor grote en kleine schermen */

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.sidebar li{ position: relative; }

	.sidebar li .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
		min-width: 240px;
	}

	[dir=rtl] .sidebar li .submenu{ 
		right:100%; left:auto;
	}

	.sidebar li:hover{ background: var(--bs-light); }
	.sidebar li:hover > .submenu{ display: block; }

img.afb-onder-menu {display: inline-block; width: 100%;}

}	
/* ============ desktop view .end// ============ */

   div#kop-smallscreen {
		display: none;
	}
  
  	div#kop {
    display: block;
    }


/* ============ small devices ============ */
@media (max-width: 991px) {

	#menu {
		display: none;
	}

	.sidebar .submenu, .sidebar .dropdown-menu {
		position: static!important;
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
	}
   
    div#kop-smallscreen {
		display: block;
	}
  
	div#kop {
    display: none;
    }
	
	img.afb-onder-menu {
    display: none;
    }
}
/* ============ small devices .end// ============ */


.sidebar .nav-link {
    font-weight: 400;
    color: #0077b3;
}
.sidebar .nav-link:hover {
    background: var(--bs-light);
    color: #cc4100;
}

div#leftbox {
  display: inline-block;
  width: 23.5%;
}

div#rightbox {
  display: inline-block;
}

div#leftbox-smallscreen {
  display: inline-block;
  height: 50px;
}

div#rightbox-smallscreen {
  display: inline-block;
  height: 50px;
  float: right;
}

img.smallscreen {
	 height: 100%
}