:root {
	--verdH: 140mm;
	--colLucht: #09bcd4;
	--colGras: #8bc249;
	
}

/* Tab menu bar */
.dgTabBtn, .dgTabBtnSub {
	width: 12%;
	height: 8mm;
	background-color: #29B6F6;
	margin: 1mm;
	text-align: center;
    padding-top: 0.5mm;
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
	font-size: 5mm;
}

.dgTabBtnSub {
	height: 6mm;
	font-size: 4mm;
}

.dgTabSelected {
	margin-bottom: 0mm;
	height: 9mm;
}

.dgTabSubSelected {
	margin-bottom: 0mm;
	height: 7mm;
}

.dgTabMainTopBorder {
	min-height: 1mm;
	background-color: #29B6F6;
}

.dgMainWindow {
	display: none; 
}

.dgKnopBijVoorbeeldblok {
	width:  35mm;
	color: white;
	padding-left:  1mm;
	margin-bottom:  1mm;
	padding-bottom: 1mm;
}

.kopOnderschrift {
	text-align: right;
	font-weight: normal;
	font-style: italic;
	font-size: 8pt;
}

.knop {
	min-width: 25mm;
    width: 44mm;
    height: 9mm;
    padding: 0.05mm;
    margin: 1mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    font-size: 6mm;
    text-align: center;

}
/* styles voor filterknoppen */

.fltKnop {
	width: 25mm;
    height: 6mm;
    background-color: #26A69A;
    padding: 0.5mm;
    margin: 1mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    font-size: 4mm;
    text-align: center;
    padding-top: 0.5mm;
}

.txtHeader {
	font-size: 8mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
}

.txtBijKnop {
	width: 28mm;
	/*height: 8mm;*/
	background-color: white;
	padding: 0.5mm;
	margin: 1mm;
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    font-size: 4mm;
    text-align: center;
    padding-top: 0.5mm;
}

.txtInputSmallNumber {
	width: 1.2cm;
    font-size: 5mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    margin: 1mm;
    text-align: center;
}


.txtBijInput {
	width: 20mm;
	height: 6mm;
	background-color: white;
	padding: 0.5mm;
	margin: 1mm;
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    font-size: 4mm;
    text-align: left;
    padding-top: 0.5mm;
}

.formRadioBtns {
	margin-top: 2mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
}

.border-Bottom-subtiel {
	border-bottom: 0.2mm solid #29B6F6;
}

/* styles voor het registratie gedeelte*/
.regSelectKlas, .regSelectToets {
	width: 3cm;
	font-size: 5mm;
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
	margin: 1mm;
}

/* leerlingkiezer*/ 
.dgLeerlingKiezer {
	padding: 1mm;
}
/* van alles */

.dgTextInput {
    font-size: 5mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    margin: 1mm;
}

.dgVerdiepingen {
    background-color: white;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: 1mm;
    margin-right: 1mm;
}

.dgDetailsScherm {
	background-color: #B3E5FC; /*Light blue 100*/
	width: 100%;
	height: 30%;
	border-top: 0.5mm solid black;
}

.dgToelichting {
	font-size: 3mm;
}

.dgToggleDetails {
	width: 30mm;
	background-color: #29B6F6; /*light blue 400*/
	height: 8mm;
	text-align: center;
	padding-top: 1mm;
	margin-right: 1mm;
}

.dgToggleOff {
	/*opacity: 0.25; Hier geen opacity voor gebruiken, dan zie je 'm dwars door sommige popups heen!*/
	background-color: #B2DFDB;
    color: #BDBDBD;
}

.dgBtnSelected {
	background-color: #0288D1; /*light blue 700*/
}

.dgVerdieping {
	height: var(--verdH);
	width: 100%;
	background-color: #EEEEEE; 
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    overflow: visible;
}

.dgVerdiepingLogoHeader {
	height: 6mm;
	display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    overflow: visible;
}

.dgSpacerBetweenVerdiepingen {
	height: 3mm;
}

.dgSpacerBetweenVerdiepingenSmall {
	height: 0.4mm;
}

.dgSpacerBetweenTrapjes {
	width: 0.5mm;
}

.dgVerdiepingNaamSide {
	/*background-color: #29B6F6;  /* light blue 400 */
	height: var(--verdH);
	width: 42px;
	/*border: .1vmin solid black;*/
	font-size: 8mm;
	/*color: #01579B; /* light blue 900 */
	color: white; /* light blue 900 */
	text-align: center;
	padding-top: calc(var(--verdH) * 0.4);
	
}

.dgVerdiepingNaamText {
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
	font-size: 8mm;
	color: white; /* light blue 900 */
	text-align: center;
	padding-bottom: 0.5mm;
}

.dgVerdiepingNaamTextSmaller {
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
	font-size: 4mm;
	color: white; /* light blue 900 */
	text-align: center;
	padding-bottom: 0.3mm;
}

.dgTrapNaam {
	height: 6mm;
	overflow-y: hidden;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background-color: rgb(0,0,0,0);
	padding-left: 0.4mm;
	padding-top: 0.5mm;
    border-bottom: .1vmin solid #aaaaaa;
}
.dgTrap { /*Dit is INCLUSIEF de naam van de trap*/
	background-color: #fff;
	border: 0vmin solid black; 
	padding: 0mm 0mm 0mm 0mm; /*top right bottom left*/
	text-align: center; 
	font-family:  Verdana, Geneva, sans-serif; 
	font-size: 3mm;
	
}

.dgTrapLogo {
	width:5mm;
}

.dgTrapIllustratie {
	position: relative;
	top: -6mm;
	height: calc (var(--dgVerdieping) + 6mm);
}

.dgTredes { /*Dit is EXCLUSIEF de naam van de trap*/
	height: calc(100% - 3.8mm);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.dgTrede {
/*	background-color: #cccccc;
	border: .1vmin solid #aaaaaa; */
	padding: 0mm 0mm 0mm 0mm; /*top right bottom left*/
	text-align: left;
	font-family:  Verdana, Geneva, sans-serif; 
	font-size: 2mm;
	display: flex;
	flex-direction: row;
	align-items: stretch;
    width: 100%;
	/*height: 18px;*/
    overflow: visible;
}
.dgTredeSpacer {
/*	background-color:  rgba(100, 100, 100, 0.1);
	border: 0 solid rgba(100, 100, 100, 0.1); */
}
.dgTredeRect {
	height: 100%;
	background-color: white;
	border-bottom: .1vmin solid #aaaaaa; 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	width: 100%;
	overflow: hidden;
	padding: 0.4mm;
}

.dgTredeRect :last-child {
	border-bottom: 0 solid #aaaaaa; 
}

.dgNotUsable {
	color: #9E9E9E;
	
}

.dgTredeText {
    font-family: 'Roboto Condensed', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 3.2mm;
    font-stretch: condensed;
    text-align: left;
    padding-left: 0.5mm;
    white-space: normal;
    width: 100%;
}
.dgTooltipTarget {
	position: relative;
	overflow: visible;
}

/* Tooltip text */
.dgTooltipTarget .dgTooltiptextRight,  .dgTooltipTarget .dgTooltiptextBelow{ /*LET OP: geen komma tussen target en .dg: .dgTooltiptext zit IN dgTooltipTarget; */
    visibility: hidden;
    position: absolute;
	/* display: none; */
    z-index: 1;
   
	min-width:300px;
	width: fit-content;
	height: fit-content;
	
   
	top: 3px;
    left: 105%; 
    background-color: #558B2F;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
	font-size: 4mm;
	font-weight: normal;
}

.dgTooltipTarget .dgTooltiptextBelow {
	left: 0px; 
	top: 17px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.dgTooltipTarget:hover .dgTooltiptextRight,  .dgTooltipTarget:hover .dgTooltiptextBelow {
    visibility: visible;
	animation-delay: 1s;
	webkit-animation-delay: 1s;
	animation: tooltipkeys 1s 1; 
}

.dgTooltipTarget .dgTooltipWarning {
	background-color: #D32F2F;
	color: white;
}

@-webkit-keyframes tooltipkeys {
	0% {
	  opacity: 0;
	}
	75% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }
  
  @-moz-keyframes tooltipkeys {
	0% {
	  opacity: 0;
	}
	75% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }
  
  @-o-keyframes tooltipkeys {
	0% {
	  opacity: 0;
	}
	75% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }
  
  @keyframes tooltipkeys {
	0% {
	  opacity: 0;
	}
	75% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }

.dgTypeIconMedium {
	height: 5mm;
    padding-left: 0.2mm;
    padding-right: 0.2mm;

}

.dgTypeIcon {
	height: 3mm;
    padding-left: 0.2mm;
    padding-right: 0mm;

}

.dgIconMaterial {
	font-size:  4mm;
}

.dgVerplichtDoel {
	font-weight: bold;
}

.dgExtraDoel {
	font-style: italic;
}

.dgTussenDoel {
	font-style: normal;
}

.dgGekozenDoelAnderBlok {
	border-width: 0.2vmin;
	border-style: dashed;
	border-color: black;
}



.dgGekozenLesDoel {
	border-color: #1976D2; /* blue 700 */
	background-color: #E3F2FD; /* blue 50 */
	border-width: 0.2vmin;
	border-style: solid;
}
.dgGekozenOefenDoel {
	border-color: #EF6C00; /* orange 800 */
	background-color: #FFF3E0; /* #FFF3E0 50 */
	border-width: 0.2vmin;
	border-style: solid;
}

.dgOefenDoelKnop {
	background-color: #EF6C00; /* orange 800 */
	color: white;
}


.dgKiesDoelSluitknop {
    background-color: #cccccc;
    padding: 1mm;
    width: 125px;
}

.dgPopupMenu {
	position:absolute; 
	top:100px; left:30px; /*right:0; bottom:0; */
	min-width: 200px;
	/*height: 200px; automatisch, past zich aan aan inhoud*/
	/*visibility: hidden; NIET NODIG voor show / hide; gebruik display: none*/
	display: none; /*display: flex;*/
	background-color: #dddddd;
    z-index: 1;

}



.dgPopupMenuButtonGroup {
	display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: flex-start;
    align-items: flex-start;
   
    overflow: visible;
}

.dgPopupMenuButton {
	background-color: #cccccc;
	margin-left: 2mm;
	margin-right:  2mm;
	margin-bottom: 2mm;
	padding: 2mm;
	min-width: 50mm;
	text-align: center;
}

.dgSmallButton {
	background-color: #cccccc;
	margin-left: 2mm;
	margin-right:  2mm;
	margin-bottom: 2mm;
	padding: 2mm;
	min-width: 30mm;
	width: 33mm;
	text-align: center;
}

.dgPopupMenuTredecode {
	margin-left: 2mm;
	margin-right:  2mm;
	padding: 0.5mm;
	padding-left: 0mm;
	text-align: center;
	font-style: normal;
}

.dgPopupMenuKopje {
	margin-left: 2mm;
	margin-right:  2mm;
	margin-top: 1mm;
	padding: 1mm;
	padding-bottom: 0.5mm;
	text-align: left; 
	font-weight: bold;
	width: 25mm;
}
.dgPopupMenuKop {
	font-size: 6mm;
	margin-left: 2mm;
	margin-right:  2mm;
	margin-top: 1mm;
	padding: 1mm;
	padding-bottom: 2mm;
	text-align: left; 
	font-weight: bold;
	width: 100mm;
}

.dgPopupMenuVoorbeeld {
	background-color: #eeeeee;
	margin-left: 2mm;
	margin-right:  2mm;
	margin-bottom: 2mm;
	text-align: left;
}

.dgPopupMenuDoel {
	margin-left: 2mm;
	margin-right:  2mm;
	text-align: center;
	font-size: 3mm;
	font-style: italic;
	padding: 0.5mm;
}

.dgPopupMenuTextRegel {
	margin-left: 2mm;
	margin-right:  2mm;
	text-align: left;
	font-size: 3mm;
	
	padding: 0.5mm;
}

.dgPopupMenuWarning {
	background-color: red;
	color:white;
	text-align: center;
	font-size: 3mm;
	padding: 0.5mm;

}

.popupSluitKnop {
	text-align: right;
    color: white;
    margin-bottom: 2mm;
    width: 100%;
    padding-right: 3mm;
    font-size: 7mm;
    user-select: none;
}


.dgGekozenDoelDitBlok {
	border: 0.3vmin solid black;
}


.dgDoelGehaald {
	background-color: #9e9e9e; /*gray 500 */
}

/*background-color: #BDBDBD; /*gray 400 */
/*background-color: #E0E0E0; /*gray 300 */
/*background-color: #EEEEEE; /*gray 200 */

.dgDoelGehaald80 {
	background: repeating-linear-gradient(
		135deg,
		#9e9e9e,
		#9e9e9e 10px,
		#BDBDBD 10px,	
		#BDBDBD 15px
	  );
}
.dgDoelGehaald60 {
	background: repeating-linear-gradient(
		135deg,
		#9e9e9e,
		#9e9e9e 8px,
		#BDBDBD 8px,	
		#BDBDBD 15px
	  );
}
.dgDoelGehaald40 {
	background: repeating-linear-gradient(
		135deg,
		#BDBDBD,
		#BDBDBD 8px,
		#E0E0E0 8px,	
		#E0E0E0 15px
	  );
}
.dgDoelGehaald01 {
	background: repeating-linear-gradient(
		135deg,
		#E0E0E0,
		#E0E0E0 10px,
		#EEEEEE 5px,	
		#EEEEEE 15px
	  );
}

.dgDoelNuSlechter {  /*Dit moet een rood groen patroon worden*/
	background: repeating-linear-gradient( 
		135deg,
		#C5E1A5,
		#C5E1A5 10px,
		#FFCCBC 5px,	
		#FFCCBC 15px
	  ); 
}

.LLFilled {
	color: #757575;
}

.dgLucht {
	background-color: var(--colLucht);
}
.dgGras {
	background-color: var(--colGras);
}
.dgGebouw {
	width: 75%;
}

/*Leerlingkiezer */
.resLeerlingKiezer {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;  
	align-content: flex-start;
	width: 100%;	
	padding-left: 1mm;
	padding-right: 1mm;
}
[class*='resLeerlingKiesKnop'] {
	flex-grow: 1;
	min-width: 30mm;
	height: 7mm;
	max-width: calc(calc(100%/8) - 2px);
	background-color: #dddddd;
	margin: 0.5mm;
	padding: 1mm;
}

[class*='resLeerlingKiesKnop']:hover {
	border: 1px solid black;
}

.resLeerlingKiesKnopGr6, .resLeerlingKiesKnopGr3 {
	background-color: #C5E1A5; /*Light Green 200*/
}
.resLeerlingKiesKnopGr7, .resLeerlingKiesKnopGr4 {
	background-color: #81D4FA; /*Light Blue 200*/
}
.resLeerlingKiesKnopGr8, .resLeerlingKiesKnopGr5 {
	background-color: #EF9A9A; /*Red 200*/
}
.resLeerlingKiesKnopLK {
	background-color: #FFF59D; /*Red 200*/
}

.resKindNaamToetsNaam {
    padding-left: 0.5mm;
    font-size: 7mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    width: 70mm;
}

.resResultatenFormPerLL {
    border-color: black;
    background-color: #DDDDDD;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    padding-left: 1mm;
}

.resEenDoelregel {
	padding-bottom: 1mm;
}
.resEenDoelregel:nth-child(even) {
	padding-bottom: 1mm;
	padding-top: 1mm;
	background-color: #eeeeee;
}

.resBlokLetter {
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
    font-size: 7mm;
    padding-left: 1mm;
    padding-right: 1mm;
    padding-top: 1mm;
    width: 13mm;
}

.resTredecode {
	width: 32mm;
    font-weight: bolder;
}
.resTredecodeSmall {
	font-size: 3mm;
    text-align: left;
    width: 18mm;
}
.resTredecodeMedium {
	font-size: 4mm;
    text-align: left;
    width: 28mm;
}

.resTredecodeLarge {
	font-size: 6mm;
    text-align: left;
    width: 18mm;
}

.resInputAantalGemaakt, .resInputAantalFout, .resInputAantalSeconden, .resInputOpmerking {
	width: 15mm;
	height: 6mm;
	border: 0.5px solid #ccc;
	padding: 0.5mm;
	font-family:  Verdana, Geneva, sans-serif;
	margin-right: 1mm;
	font-size: 3.5mm;
}

.resInputAantalFout {
	background-color: #fbe9e7;
}

.resInputOpmerkingLL {
	width: 50mm;
}
.resInputOpmerkingLK {
	width: 80mm;
}



.resDoelbereikt, .resDoelbereiktJa, .resDoelbereiktLaag, .resKnopKiesLesdoel {
	width: 13mm;
	height: 6mm;
    padding-right: 0.5mm;
    text-align: right;
    margin-right: 1mm;
    font-size: 3.5mm;
    padding-top: 0.8mm;
    background-color: #fff9c4; /* geel */
}

.resDoelbereiktJa {
	background-color: #9CCC65;
}

.resDoelbereiktLaag {
	background-color: #FFCCBC;
}

.resKnopNieuwDoel {
	width: 22mm;
	text-align: center;
}

.resKnopNieuwDoel:hover, .resKnopKiesLesdoel:hover  {
	border: 1px solid black;
}

.resKnopKiesLesdoel {
	background-color: #1976D2; /* blue 700*/
	color: white;
	width: 11mm;
	padding-right: 1mm;
}

.resResultatenColumn {
	display: flex;
    flex-direction: column;
	padding: 1mm;
	max-height: 93%;
	overflow-y: auto;
}

.resDoel {
	font-size: 3mm;
    text-align: left;
    font-weight: bold;
}
.resDoelMedium {
	font-size: 4mm;
    text-align: left;
    font-weight: bold;
}
.resDoelLarge {
	font-size: 6mm;
    text-align: left;
    font-weight: bold;
}

.resDoelNaam {
	width: 110mm;
}

.resDoelCompleet {
	height: 5mm;
}

.resDoelBeschrijving {
	width: 65mm;
	font-style: italic;
}
.resToetsNaam {
	font-size: 2mm;
    width: 10mm;
}

.resHistogram {
	width: 50%;
    background-color: white;
    display: flex;
    flex-direction: row;
    text-align: center;
    font-size: 2.5mm;
}

.resHistoGoed {
	background-color: #C5E1A5;
    background: repeating-linear-gradient( 135deg, #C5E1A5, #C5E1A5 4px, #DCEDC8 2px, #DCEDC8 6px );
    font-size: 2mm;
}

.resHistoFout {
	background-color: #FFCCBC;
    background: repeating-linear-gradient( 45deg, #FBE9E7, #FBE9E7 3px, #FFCCBC 1px, #FFCCBC 4px );
    font-size: 2mm;
}

.resGehaald {
    background-color: #9CCC65;
}

.resSeconden {
	font-size: 2mm;
    text-align: left;
    font-style: italic;
    padding-right: 1mm;
    padding-left: 0.5mm;
    width: 4%;
}

.resOpmerking {
	font-size: 2mm;
    width: 23%;
    text-align: left;
    font-style: normal;
    padding-right: 1mm;
}

/*Deze moet achteraan, overrides*/
.resKopje {
	font-size: 3mm;
	border: 0 solid black;
	background-color: white;
	vertical-align: bottom;
	height: 5mm;
}

/* Kies nieuw doel */
.dgPopupMenuKiesDoel {
	background-color: #fff9c4;
    position: fixed;
    width: 90%;
    height: 90%;
    top: 5%;
    right: 5%;
    display: none;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: 0px 0px 10px #29B6F6;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
}



.dgPopupKopregel {
	font-size: 6mm;
	color: white;
	font-family: "Amaranth" , Verdana, Geneva, sans-serif;
	padding: 1mm;
}

.bgcolResultaten {
	background-color: #29B6F6;
}

/* Popup menu*/

.dgPopupMenuTredeClick {
	background-color: #dddddd;
    position: fixed;
    width: 215mm;
    
    top: 20%;
    left: 15%;
    display: none;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: 0px 0px 10px #29B6F6;
}

.dgPopupResultaten {
	background-color: #F1F8E9;
    position: fixed;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    display: none;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: 0px 0px 10px #29B6F6;
}

.resColor {
	background-color: #9CCC65;
}

.voorbeeldBlok {
	border: .1vmin solid black;
	height: auto;
    min-height: 1cm;
    width: 211mm;
    background-color: white;
    overflow-y: hidden;
    margin: 0mm 2mm 0mm 2mm; /* top right bottom left */
    
}

.rtVoorbeeldBlok {
	/*border: .1vmin solid black;*/
	height: auto;
    min-height: 1cm;
    width: 211mm;
    /*background-color: white;*/
    overflow-y: hidden;
    margin: 0mm 2mm 0mm 2mm; /* top right bottom left */
	overflow-y: auto;
	max-height: 300px;

}

.rtClickTarget:hover {
	border: 1px solid black;
}

.lsGroepsDoel {
	border: 0.5mm solid #E0E0E0;
	border-top: 0mm solid #E0E0E0;
	margin-bottom: 1.5mm;
	height: auto;
}



.lsGroepsDoelHeader {
	height: 7mm;
    padding-top: 1mm;
    background-color: #E0E0E0;
}

.lsGroepsDoelHeaderGeselecteerd {
	height: 7mm;
    padding-top: 1mm;
    background-color: #4CAF50;
}


.lsEditLeerlingen, .sgEditLeerlingen, .sgBtnEdit {
	padding-left: 1mm;
	padding-right: 1mm;
    background-color: #cccccc;
    margin: 0.5mm;
    margin-top: 0mm;
    font-size: 4mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
}
.lsEditLeerlingenSelected, .dlEditLeerlingenSelected{
	border: 0.5mm solid black;
}

.lsGroepslesIconsLeerling {
	font-size: 4mm;
}

.lsGroepslesIcon {
	margin-top: -2.7mm;
    font-size: 7mm;
}

.lsGroepslesTextBtn {
	padding-left: 1mm;
	padding-right: 1mm;
    background-color: #cccccc;
    margin: 0.5mm;
    margin-top: 0mm;
	font-size: 4mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
}

.lsGroepslesBtnSpacer {
	width: 4mm;
}





.cbgNegeerResultaatRegel {
	background-color: #37474F; /* blue grey 800*/
}

.sgEenGroepjeBlok {
	border:  0.5mm solid #26A69A; /*teal 400*/
	margin-top: 1mm;
}

.sgDoelenVak {
	border-right:  0.5mm solid #26A69A; /*teal 400*/
}
.sgLeerlingenVak {
	/*border-right:  0.5mm solid #26A69A; /*teal 400*/
}

.sgEenGroepjeKopregel {
	background-color: #26A69A; /*teal 400*/
	padding: 0.5mm;
}

.sgProefdoel {
	/*background-color: white;*/
	padding-left: 1mm;
}

.sgDoelenVakHeader, .sgLeerlingenVakHeader {
	background-color: #80CBC4; /*teal 200*/
	height: 6mm;
	padding: 0.5mm;
}
.sgDoelenVakHeader, .sgLeerlingenVakHeader {
	background-color: #80CBC4; /*teal 200*/
	height: 6mm;
}

.sgKnopje {
	padding-left: 1mm;
    padding-right: 1mm;
    
    margin: 0.5mm;
    margin-top: 0.5mm;
    font-size: 4mm;
    font-family: "Amaranth" , Verdana, Geneva, sans-serif;
	background-color: #B2DFDB; /*teal 100*/
}

.sgDoelRegel {
	height: 7mm;
    background-color: #E0F2F1; /*teal 50*/
    margin: 0.5mm;
    padding: 1mm;
    width: calc(100% - 1mm);
}

.lsGroepsDoelGeselecteerd, .dlLesGroepSelected {
	border: 0.5mm solid #4CAF50;
	border-top: 0mm solid #4CAF50;
	background-color: #E8F5E9;
}

.sgSelectedBGColor {
	background-color:#4CAF50;


}
.lsEditLeerlingenSelected, .dlEditLeerlingenSelected{
	border: 0.5mm solid black;
}

/*andere kleur voor een checked checkbox*/
/*werkt niet*/
/* input:checked ~  {
  background-color: #26A69A;
}
*/



/*youtubefilmpjes*/

.ytBasis {
	margin-bottom: 3mm;
	width: 600px;
	height: 315px;
	border: 2mm solid #29B6F6 ;
}

.vgBlok {
	height: 50mm;
	
	border: 0.3mm solid black;
}

/* colors */
/*background color*/
.cbgOefen {
	background-color: #EF6C00; /* orange 800 */
}
.cbgOefenLight {
	background-color: #FFB74D; /* orange 300 */
}

.cbgLes {
	background-color: #1976D2; /* blue 700*/
}

.cbgDisabled {
	background-color: #BDBDBD; /* gray 400*/
}



.cbgDoelGehaald {
	background-color: #9CCC65;
}

.naamOpKnop {
	padding-left: 2mm;
	width: 88%;
}

.genoeg1, .genoeg2, .genoeg3 {
	text-align: center;
    border-radius: 3mm;
    width: 5mm;
    height: 5mm;
    font-weight: bold;
}
.genoeg1 {
	color: green;
	border: 0.7mm solid #4CAF50;
}
.genoeg2 {
	color: #FF5722;
	border: 0.7mm solid #FF5722;
}.genoeg3 {
	color: rgb(211,47,47,1);
	border: 0.7mm solid rgb(211,47,47,1);
}

/*popupEditSubgroup/*/



.sgPopupWindow {
	width:  150px;
	height:  100px;
	background-color: #dddddd;
    position: fixed;
    top: 20%;
    left: 15%;
    display: none;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: 0px 0px 10px #29b6f6;
}

.popupEditSubgroup {
	width:  475px;
	height:  100px;
}