@charset "utf-8";
/* CSS Document */
div.group_hor_controlpanel_buttons{
	width:32%;
	margin-right:1%;
	float:left;
}
button.grey {
    background-color: #BDBDBD;
    color: #444;
    cursor: pointer;
    /*padding: 18px;*/
    width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: none;
    text-align: left;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
}
@media all and (max-width: 959px) and (min-width: 400px) {
	button.grey, input.grey {
		font-size: 100%;/*fall back*/
		font-size: 1.2vw;
	}
}
@media all and (max-width: 399px) and (min-width: 50px) {
	button.grey, input.grey {
		font-size: 100%;/*fall back*/
		font-size: 2vw;
	}
}
button.grey:active, button.grey:hover {
    background-color: #000000;
	color: #fff;
}
button.grey.savelist{
	display: none;
}
button.grey.savelist.open{
	display: block;
}
input.general{
	z-index: 1;
    /*background-color: #BDBDBD;*/
    color: #444;
    cursor: pointer;
    /*padding: 18px;*/
    width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: none;
    text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
}
@media all and (max-width: 959px) and (min-width: 400px) {
	input.general {
		font-size: 100%;/*fall back*/
		font-size: 1.2vw;
	}
}
@media all and (max-width: 399px) and (min-width: 50px) {
	input.general {
		font-size: 100%;/*fall back*/
		font-size: 2vw;
	}
}
input.green{
	background-color: rgba(120,215,120,1.00);
	color: #fff;
}
input.red{	background-color: #CC0000;
    color: #fff;
}
input.darkgrey{background-color: rgba(100,100,100,1.00);
    color: #fff;
}
input.fade{
	background-color: #eee;
	color: silver;
	cursor: default;
}
input.fade{
	z-index: 1;
    background-color: #eee;
    color: silver;
    cursor: default;
    /*padding: 18px;*/
    width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: none;
    text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
}

input.grey{
	z-index: 1;
    background-color: #BDBDBD;
    color: #444;
    cursor: pointer;
    /*padding: 18px;*/
    width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: none;
    text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
}
@media all and (max-width: 959px) and (min-width: 400px) {
	input.grey, input.fade {
		font-size: 100%;/*fall back*/
		font-size: 1.2vw;
	}
}
@media all and (max-width: 399px) and (min-width: 50px) {
	input.grey, input.fade {
		font-size: 100%;/*fall back*/
		font-size: 2vw;
	}
}
input.greyhalfleft{
	width: 49%;
	margin-right: 1%;
	float:left;
}
input.greyhalfright{
	width: 49%;
	margin-left: 1%;
	float:left;
}
input.grey:active, input.grey:hover, div.exit:hover, div.grey:hover, input.general:hover {
    background-color: #000000;
	color: #fff;
}
input.alert {
    background-color: #CC0000;
    color: #fff;
    cursor: pointer;
    /*padding: 18px;*/
    width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: none;
    text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
}
@media all and (max-width: 959px) and (min-width: 400px) {
	input.alert {
		font-size: 100%;/*fall back*/
		font-size: 1.2vw;
	}
}
@media all and (max-width: 399px) and (min-width: 50px) {
	input.alert {
		font-size: 100%;/*fall back*/
		font-size: 2vw;
	}
}
input.grey:active, input.grey:hover {
    background-color: #000000;
	color: #fff;
}
select.small{
	background-color: #eee;
    color: #444;
    /*padding: 16px;*/
    width: 32%;
	height:5.3vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: 0.1vh solid black;
    text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
}
select.breed{
	background-color: #eee;
    color: #444;
    /*padding: 16px;*/
    width: 100%;
	height:5.3vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: 0.1vh solid black;
    text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
}
div.empty {
	background: transparant;
    color: #444;
    /*padding: 18px;*/
    width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: none;
	text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
}
@media all and (max-width: 959px) and (min-width: 400px) {
	div.empty {
		font-size: 100%;/*fall back*/
		font-size: 1.2vw;
	}
}
@media all and (max-width: 399px) and (min-width: 50px) {
	div.empty {
		font-size: 100%;/*fall back*/
		font-size: 2vw;
	}
}
div.exit, div.grey, div.yellow {
    color: #444;
	/*
    padding-top: 18px;
	padding-bottom: 18px; 
	*/
    width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
    border: none;
    text-align: center;
    outline: none;
    font-size: 100%;
	font-size: calc(12px + 0.2vw);
    transition: 0.4s;
	margin-bottom: 2%;
}
@media all and (max-width: 959px) and (min-width: 400px) {
	div.exit, div.grey, div.yellow {
		font-size: 100%;/*fall back*/
		font-size: 1.2vw;
	}
}
@media all and (max-width: 399px) and (min-width: 50px) {
	div.exit, div.grey, div.yellow {
		font-size: 100%;/*fall back*/
		font-size: 2vw;
	}
}
div.exit{
    background-color: #eee;
	cursor: pointer;
}
div.grey{
    background-color: #BDBDBD;
	cursor: pointer;
}
div.grey.close {
	display: none;
}
div.yellow{
	background-color: rgba(255,255,72,1.0); /* yellow background */
}
div.group_ver_controlpanel_buttons{
    width: 100%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
}
