/*
//============================================================+
// File name   : default.css
// Begin       : 2020-04-28
// Last Update : 2023-09-09
//
// Description : default.css for items.e-Linc.nl 
//
// Author: Linvo
//
// (c) Copyright:
//               Linvo
//               Sagittahof 2-hs
//               1033XC Amsterdam
//               The Netherlands
//               www.linvo.nl
//               info@linvo.nl
// 
// License: strictly commercial
//============================================================+

/**
 * css file
 * @author Linvo
 * @copyright Copyright © 2019,  Linvo, Sagittahof 2-hs, 1033XC Amsterdam  The Netherlands  www.linvo.nl info@linvo.nl
 * @package website items.e-Linc.nl
 * @version 1.0
 * @licence strictly commercial
 * @since 2000-01-01
 */
/*================================================================================*/

body 
{
  font-family:verdana;min-height:50em;
}

h1 
{
  text-align:center;
}

p 
{
  text-align:center;
}

* {
  box-sizing: border-box;
}

[class*="col-"] {
  float: left;
  padding: 1em;
}

/* For mobile phones: */
[class*="col-"] 
{
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-1a {width: 15.5%;}
  .col-s-2 {width: 16.66%;}
  .col-s-2a {width: 17.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-5a {width: 46%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) 
{
  /* For desktop: */
.col-1 {width: 8.33%;}
.col-1a {width: 15.5%;}
.col-2 {width: 16.66%;}
.col-2a {width: 17.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-5a {width: 46%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

header
{
  display:block;
	float: left;
  padding: 1em;
  width:100%;	
}
footer
{
  display:block;
	float: left;
	font-size:70%;
  padding: 1em;
  width:100%;	
	z-index: -1;
}

#container
{
  display:block;
	float: left;
  padding: 1em;
	min-height: 34em;
  width:100%;
	z-index: 1;
}
#variabel
{
  min-height:13em;
	max-height:14em;
	margin-bottom:1em;
}
#todo
{
  min-height:15em;
	font-size:90%;
}
#huidigeopgave
{
  min-height:17em;
	/*max-height:17em;*/
	z-index:1;
}
#beschrijvend
{
  font-size:90%;
	padding:1em;
	z-index:1;
}
#gevalsgegevens
{
  font-size:90%;
  padding:1em;
	z-index:1;
}
#antwoordmogelijkheden
{
  font-size:90%;
	padding:1em;
	z-index:1;
}
.hoverbg_pink
{
	font-size:80%;
	background-color: #D7B6D3;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.hoverbg_pink:hover
{
  background-color: #b6d7bc;
}

.hoverbg_green
{
	background-color: #b6d7bc;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.hoverbg_green:hover
{
  background-color: #D7B6D3;
}

.nohoverbg_green
{
	background-color: #b6d7bc;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.nohoverbg_pink
{
  background-color: #D7B6D3;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.nohoverbg_yellowish
{
	background-color: #cfdeb2;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}




/* radio button--*/
/* The container */
.rbcontainer {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  padding-right: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  /*font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.rbcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.rbcheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.rbcontainer:hover input ~ .rbcheckmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.rbcontainer input:checked ~ .rbcheckmark {
  background-color: #003366;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.rbcheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.rbcontainer input:checked ~ .rbcheckmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.rbcontainer .rbcheckmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
.groter
{
  width:100%;
	height:100%;
}
.groter:hover
{
  width:50%;
	height:50%;
	padding:0;
	z-index:2;
	display:block;
	position:absolute;
	top:22em;
	left:10em;
}

.redo
{
  color:black;
}

.redo:hover
{
  color:black;
	background:white;
	border-radius: 50%;
}