/* POP */

.overlay {
	
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
z-index: 10001;
}

.pop {
background: #fff;
border-radius: 5px;
width: 90%;
max-width: 500px;
overflow: hidden;	
}

.fact-info {
	
background-color: #8BC34A;
color: #FFF;
font-size: 11px;
text-align: center;
width: 100%;
}

/* DE REST */

.sleutelknop {

text-decoration: none;
}

.img-instructie {

width: 100%;	
}

.c-topright {

margin-top: 0px !important;

top: 3px;
right: 3px;
display: inline-block;	
position: relative;
overflow: hidden;

width: 25px;
height: 25px;

line-height: 20px;
text-align: center;
border: 1px solid #ccc;

transition: all 0.5s ease-in-out;
}

.c-topright:hover {

transform: scale(1.1);	
}

.c-topright .invoer-plus {

cursor: pointer;
margin: 0px;
font-size: 20px;	
}

.btn {

margin-top: 10px;
margin-bottom: 10px;
background-color: #333;
color: #FFF;
padding: 10px 15px;
text-decoration: none;

border: 0px;

border-radius: 3px;	
-moz-border-radius: 3px;	
-webkit-border-radius: 3px;	
}

.btn-xl {

padding: 15px 30px !important;
}

.btn-oranje {

color: #FFF !important;
background-color: #ffc107;	
}

.btn-groen {

color: #FFF;
background-color: #8bc34a;
border-color: #8bc34a;
}

.btn-red,
.btn-rood {

color: #FFF;
background-color: #8bc34a;
border-color: #8bc34a;	
}

.btn-info {

background-color: #26b0ee;	
}

.notif {

float: left;
width: 100%;
padding: 5px 5px;
color: #FFF;

border: 1px solid #ccc;
background-color: red;	
}

.notif-groen {

background-color: #8BC34A;
border-color: green;	
}

.notif-blauw,
.notif-info {

background-color: #03A9F4;
border-color: #2196F3;
}

/* Magicboxen */

.togglebox {
	
overflow: hidden;
transition: max-height 0.5s ease-in-out;
max-height: 0px;
}

.togglebox.active {
	
max-height: 500px;
}

/* Page beheer */

a.adm-pages {
	
width: 150px;
height: 150px;
display: inline-block;
margin-right: 25px;
padding: 10px;
color: #FFF;
text-decoration: none;
border: 5px solid #333;
border: 5px solid #cacaca;
text-align: center;
background-color: #f7f7f7;
transition: all 0.2s ease-in-out;
}

a.adm-pages:hover {

transform: scale(1.05);		
}

.lijst-gebruikers {

margin: 0px;
padding: 0px;	
}

.lijst-gebruikers li {

list-style: none;
min-height: 30px;
line-height: 35px;
padding-bottom: 3px;
padding-top: 3px;
border-top: 1px solid #efefef;
width: 100%;
clear: both;	
}

.lijst-gebruikers .voornaam {

min-width: 80px;	
}

.lijst-gebruikers .achternaam {

min-width: 80px;	
}

.lijst-gebruikers .emailadres {

min-width: 200px;
color: #666;	
}

.lijst-gebruikers .verwijderknop {

margin-left: 20px;
margin-top: -5px;
}

.btn-verwijderen {

height: 25px;
padding-top: 2px;
padding-bottom: 2px;
color: #F00;
background-color: transparent;
border: 2px solid #F00;	
transition: background-color 0.5s ease;
box-shadow: none !important;
}

.btn-verwijderen:hover {

background-color: #F00;
color: #FFF;	
}

/* Page hoe */

.vraag {
	
float: left;
width: 45%; 
margin-left: 2.5%;
margin-right: 2.5%;
line-height: 20px;
}

.vraag p {

color: #666;	
}

h2.faq-blok {
	
background-color: #666;
color: #FFF;
float: left;
width: 100%;
clear: both;
margin-top: 35px; 
padding-top: 5px;
padding-bottom: 5px;
max-height: 23px;
}

h2.faq-blok .icon {

border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 3px solid #ccc;
width: 75px;
height: auto;
float: left;
position: relative;
display: inline-block;
top: -30px;
margin-left: 10px;	
margin-right: 15px;
}

.vraag h3 {
	
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}

/* Logo */

.hoofd-logo {

margin-left: 10px;	
}

.hoofd-logo img {

width: auto;
height: 70px;	
}

/* NAV */

.nav {

margin-left: 0px;
margin-right: 0px;
padding: 0px;

overflow: visible;
background-color: #f8f8f8;

margin-bottom: 25px;	
}

.nav li {

background-color: #f8f8f8;
list-style: none;
border-right: 1px solid #efefef;
}

.nav li a {

padding: 15px 13px;	
}

.nav li.active,
.nav li:hover {

background-color: #FFF;
}
 
.nav li.active::after {
	
content: '◢';
transform: rotateY(0deg) rotate(45deg);
display: block;
text-align: center;
color: #fff;
position: static;
font-size: 25px;
margin-bottom: -30px;
}

.nav li:last-child {

border: 0px;	
}

.nav li:first-child {

-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;	
}

.nav li {

color: #333;
float: left;	
}

.nav li a {

color: #333;
float: left;
text-decoration: none;	
}

.li-codeshow a {

background-image: url(../img/icon-code.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: center center;
width: 25px;
height: 21px;
display: inline-block;
background-color: #f7e582;	
}

.li-manage a {

color: #7a5b00 !important;
}

.li-beheerpages a {
	
background-image: url(../img/icon-apps.png);
background-size: 22px;
background-repeat: no-repeat;
background-position: center center;
width: 25px;
height: 21px;
display: inline-block;
background-color: #f7e582;
}

.li-klantenbeheren a {
	
background-image: url(../img/icon-klantwissel.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: center center;
width: 25px;
height: 21px;
display: inline-block;
background-color: #f7e582;
}

.coachkleur a {

background-color: #c3ee91 !important;
}	

.li-profiel a {
	
background-image: url(../img/icon-useredit.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: center center;
width: 25px;
height: 21px;
display: inline-block;
background-color: #f7e582;
}

.li-manager a {
	
background-image: url(../img/icon-edit-users.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: center center;
width: 25px;
height: 21px;
display: inline-block;
background-color: #f7e582;
}

#klok {

cursor: default;	
padding: 15px;
color: #000000;
background-color: #f1f1f1;

-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

.li-afmelden a {

transition: background-color 0.5s ease;
background-image: url("../img/icon-afmelden.png");
background-size: 25px;
background-repeat: no-repeat;
background-position: center center;
min-width: 25px;
height: 21px;
background-color: #f5bfbf;
}

li.li-afmelden a:hover {

background-color: #e66a6a;	
}

/* Tekstueel */

h2, h3, h4 {

color: #8BC34A;	
}

/* ../visueel/tips.php */

.icon-tip {

width: 30px;
height: auto;
margin-right: 10px;
}

.blok-tips {

background-image: url(../img/bck-pattern-tips.jpg);
background-position: 250% 100%;
background-repeat: no-repeat;
}

.tips {

font-size: 14px;
font-style: italic;
color: #c39e2d;
padding-top: 10px;
}

/* De rest */

.wrapper {

width: 100%;
max-width: 1000px;
margin: 0px auto;	
}


.invoer-plus {
	
color: #8bc34a;
font-size: 50px;
margin-right: 10px;
font-weight: bold;
margin-top: 4px;
height: 20px;
cursor: default;
}

.invoer input,
.invoer .dropdown {

border: 1px solid #8BC34A;
color: #5d8f22;
min-height: 25px;
line-height: 25px;
padding-left: 5px;
padding-right: 5px;
background-color: #e1ebd4;
border-radius: 3px;
}

.invoer .dropdown {

min-height: 29px;
}

.invoer .btn-opslaan {
	
cursor: pointer;
background-color: #8BC34A;
color: #FFF;
height: 15px;
}

.invul-veld {
	
width: 100%;
max-width: 200px;
min-height: 30px;
padding-left: 5px;
border: 1px solid #ccc;
background-color: #f7f6f6;
color: #333;
}

.tekstveld {

min-height: 230px;
max-width: 400px;	
}


.euroteken {

opacity: 0.6;
margin-right: 2px;	
}
	
.maanden {

width: 100%;	
clear: both;
border-bottom: 3px solid #ccc;
margin-bottom: 10px;
text-align: center;
}

.maand {

height: 30px;
line-height: 30px;
padding-left: 15px;
padding-right: 15px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
color: #FFF;
text-decoration: none;
display: inline-block;
}


.maanden-pijl {

color: #FFF;	
text-decoration: none;
}

.maand.huidig {

background-color: #FFF;
color: #000;

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;	
}

.maanden.left a:nth-child(1),
.maanden.left a:nth-child(2),
.maanden.left a:nth-child(3),

.maanden.left a:nth-child(9),
.maanden.left a:nth-child(10),
.maanden.left a:nth-child(11) {

opacity: 0.4;	
}



.maanden.left a:hover {

opacity: 1.0;	
}

#footer {

background-color: #333;
color: #ccc;	
}

.widget {

width: 30%;
margin-left: 1.5%;	
margin-right: 1.5%;	
}

.widget h3 {

margin-bottom: 5px;	
font-size: 14px;
}

.widget ul {

margin: 0px;
padding: 0px;	
}

.widget ul li {

list-style: none;
line-height: 22px;	
}

#footer a {

text-decoration: none;
color: #ccc;	
}

#copyright {

font-size: 12px;
width: 100%;
clear: both;
padding-top: 8px;
margin-top: 15px;
border-top: 1px solid #ccc;
}

/* TABSWITCH */

.tab {

overflow: hidden;
border-bottom: 2px solid #ccc;
}

.tabcontent b {

color: #515151;	
}

/* PAGE TIPS */

.artikel-tip {

float: left;
clear: both;
border-bottom: 1px dashed #ccc;	
}

.artikel-tip h3 {

margin-bottom: -5px;	
}

/* Style the buttons that are used to open the tab content */

.tab button {
	
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

/* Change background color of buttons on hover */

.tab button:hover {
	
background-color: #ddd;
}

/* Create an active/current tablink class */

.tab button.active {
	
background-color: #ccc;
}

/* Style the tab content */

.tabcontent {
	
display: none;
}

.tab-inleiding {

margin-top: -10px; 
color: #666; 
font-style: italic;	
}

/* MAGICBOX */

/* Verberg de checkbox */
.weg {
	
display: none;
}

/* Standaard stijl voor de info content, standaard verborgen */
.magicbox {

display: none;	
padding: 5px;
margin-top: 5px;
border: 1px solid #ccc;
background-color: #bde3e7;
font-size: 11px;

clear: both;
width: 100%;
min-height: 40px;
max-width: 400px;

border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

/* Wanneer de checkbox is aangevinkt, toon de info content */
.weg:checked + .magicbox {
	
display: block;
}

/* Optionele styling voor de label */
.magictoggle {

width: 15px;
height: 15px;
border: 1px solid #00BCD4;
display: inline-block;
cursor: pointer;
text-align: center;
background-color: #bde3e7;
border-radius: 100%;
-moz-border-radius: 100%;
webkit-border-radius: 100%;
line-height: 14px;
color: #008192;
}

/* JA - NEE KNOPPEN */

/* Verbergt de standaard radio button */
.yes-no-button-group input[type="radio"] {
	
display: none;
}

/* Stijl voor de labels die fungeren als knoppen */
.yes-no-button-group label {
	
background-color: #f1f1f1;
color: black;
padding: 10px 20px;
font-family: Arial, sans-serif;
cursor: pointer;
margin: 5px;
border: 2px solid #ccc;
transition: background-color 0.3s, color 0.3s;
}

/* Stijl voor de labels wanneer hun bijbehorende radio button geselecteerd is */
.yes-no-button-group input[type="radio"]:checked + label {
	
background-color: #4CAF50;
color: white;
}

/* Hover effect */
.yes-no-button-group label:hover {
	
background-color: #ddd;
}

.totaalbedrag {

margin-top: 7px;
margin-left: 293px;
font-weight: bold;	
}

.edit-icon {

text-decoration: none;
color: orange;
font-size: 15px;
padding: 3px 5px;
border: 1px solid orange;
margin-top: 5px;
margin-left: 7px;
}