/* container inloggen leerpad*/
h1 ,h2, h3{
	margin: 2px;
}

#leerpad_inloggen{
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#leerpad_inloggen .blok{
    width: 80vw;
	margin: 5px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	align-self: stretch;
}

#leerpad_inloggen p{
	text-align: center;
}

#leerpad_inloggen i{
	font-size: 40px;
	margin: 10px 0px;
}


/* container leerpad*/
#leerpad_container_inloggen{
	background-color: #EDF6FF;
	height: 100%;
	max-width: 98vw;
	display: grid;
	grid-template-columns: 35px auto;
	grid-template-rows: auto auto;
	grid-row-gap: 0px;
	grid-template-areas:
		'menu inhoud'
		'reclame reclame';
}

#leerpad_menu_close{
	grid-area: menu;
	height: 98%;
	position: relative;
	background-color:#CED5E5;
	padding-top: 0px;
	width:30px;
}

#leerpad_menu_close span{
	position: relative;
	width: 20px;
	height: 20px;
	border: 2px solid #bebebe;
	display: block;
	margin: 0px auto 5px 2px;
	border-radius: 50%;
	line-height: 18px;
	background: white;
	color: #595959;
	text-align: center;
	font-weight: bold;
	font-size: 15px;
}

.hamburger{
	position: relative;
	left: 5px;
	font-size: 20px;
	cursor: pointer;
	padding-bottom: 5px;
}

#leerpad_menu{
	grid-area: menu;
	position: absolute;
	background-color: #CED5E5;
	z-index: 100;
	height: 98%;
	max-height: 90vh;
	width: 94vw;
}

.sidebar{
	display: none;
}

.sidebar_open{
	position: absolute;
	background-color: #A092AB;
	color: #fff;
	right: 0px;
	top: 0px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	cursor: pointer;
	width: 30px;
	text-align: center;
}

#leerpad_menu ul{
	list-style-type: none;
	padding: 0px 0px;
	margin: 0px;
}

#leerpad_menu li{
	height: 24px;
	padding: 0px 0px 0px 35px;
	margin: 0px auto 5px 2px;
}

#leerpad_menu span{
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid #bebebe;
	display: block;
	margin: 0px auto 5px 2px;
	border-radius: 50%;
	line-height: 18px;
	background: white;
	color: #595959;
	text-align: center;
	font-weight: bold;
	font-size: 15px;
}

.afgerond{
	background-color: #595959 !important;
	color: white !important;
	border-color: #595959 !important;
}


.actief{
	background-color: #C98BB9 !important;
	color: black !important;
	border-color: #C98BB9 !important;
}



#leerpad_inhoud{
	grid-area: inhoud;
	padding-left: 0px;
	min-height: 300px;
	width: 100%;
}

#leerpad_reclame{
	grid-area: reclame;
	background-color: #EDF6FF;
	min-height: 100px;
}

/* Tekst */
.opdracht_inhoud{
	padding-top: 0px;
}

.opdracht_inhoud h1{
	margin-left: 10px ;
}

.accent{
	color: #DB5461;
	font-weight: 600;
}

/* Button */

.volgende_stap{
	background-color:  #91C499;
	color: #000;
}

.volgende_stap:hover{
	background-color:  #595959 !important;
	color: #fff !important;
}

.stop_stap{
	background-color:  #DB5461;
	color: #000;
}

.button{
	margin: 10px 10px 10px 0px;
}

/* aanpassen vraag stylen voor leerpad */

.opdracht_inhoud, .vraag, .startscherm_oefeningen, .opdracht_container , img{
	max-width: 80vw !important;
}

.inlogform{
	max-width: 75vw !important;
}


.meerkeuzevraag .button{
	max-width: 70vw;
}

#feedback_achtergrond{
	width: 100vw;
}

.breadcrum{
	display: none;
}

/* Voor grotere schermen*/
@media (min-width: 750px)  {

#leerpad_container_inloggen{
	grid-template-columns: 60px auto;
}

#leerpad_inloggen{
    flex-wrap: nowrap;
    max-width: 100%;
}

#leerpad_inloggen .blok{
    width: 300px;
    max-width: 30vw;
    margin: 10px;
}

#leerpad_menu{
	position: relative;
	z-index: 100;
	width:300px; 
}

#leerpad_menu_close{
	width:60px;
}

.sidebar{
	position: absolute;
	background-color: #A092AB;
	color: #fff;
	right: 0px;
	top: 0px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	cursor: pointer;
	width: 20px;
	text-align: center;
}

#leerpad_inhoud{
	padding-left: 10px;
}

}