.hidden {
	visibility: hidden;
}

.korting-keuze {
	background-color: #2991d6;
	display: inline-block;
	border-radius: 5px;
	padding: 25px;
	color: white;
	margin: 0 5px 5px 0;
	font-weight: normal;
}

#reserveer-betaal table th, table td, input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea
{margin:0px!important;padding:5px!important;}


#reserveer-betaal h1{
  font-size:14px;
  }

#reserveer-betaal table, #reserveer-betaal table td, #reserveer-betaal table th{
border:0!important;
text-align:left;
}
#reserveer-betaal tr:nth-child(1){
border-bottom:3px solid #d6D6D6;
}

#reserveer-betaal tr{
border-bottom:1px solid #d6D6D6;
}

/* laatste 3 rijen geen border */
#reserveer-betaal tr:nth-last-of-type(-n+3){
border-bottom:0px solid #d6D6D6;
}

/* kortings rij een speciale kleur/actie */
#reserveer-betaal .row-kortingsactie td:first-child{
color:green;
font-weight:bold;
}

#reserveer-betaal td.subtotaal, #reserveer-betaal td.row-subtotaal{
border-bottom:1px solid #d6D6D6!important;
} 

#reserveer-betaal td.row-totaal {
background-color:#D6D6D6!important;
font-weight:bold;

}

#reserveer-betaal td.totaal{
background-color:#D6D6D6!important;
font-weight:bold;
font-size:20px;
color:green;
}

.korting-keuze:nth-child(2){
  background-color:#88A825;
}
.korting-keuze:nth-child(3){
  background-color:#35203B;
}
.korting-keuze:nth-child(4){
  background-color:#911146;
}
.korting-keuze:nth-child(5){
  background-color:#CF4A30;
}
.korting-keuze:nth-child(6){
  background-color:#ED8C2B;
}
.korting-keuze:nth-child(7){
  background-color:#6B0C22;
}
.korting-keuze:nth-child(8){
  background-color:#D9042B;
}
.korting-keuze:nth-child(9){
  background-color:#F4CB89;
}
.korting-keuze:nth-child(10){
  background-color:#588C8C;
}
.korting-keuze:nth-child(11){
  background-color:#011C26;
}

.korting-keuze>* {
	margin: 0 0 0 8px;
	float: right;
}

.korting-keuze select {
	width: initial;
	height: 21px;
	padding: 2px 8px !important;
	-webkit-appearance: menulist;
}

.korting-keuze input[type="checkbox"]
{
	width: 21px;
	height: 21px;
}

.res-collides td {
	text-decoration: line-through;
  color:#d6d6d6!important;
}

input[type="number"]{
	width:50px!important;	
}

#betaal-reservering {
	display: block;
	width: 100%;
}

#res-module {
	max-width: 400px;
	color:#000000;
	font-family: sans-serif;
}

label span {
	font-weight: normal;
}

.res-field[type='text'] {
	width: 100% !important;
	margin: 0px !important;
}

.res-field {
	width: 100%;
	margin-bottom: .3%;
	font-size:14px;
	box-sizing: border-box;   
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height: 100%;
	padding: 1% 1% 1% 3%;
	border-radius: 10px !important;
	background-color: whitesmoke;
	border: .05% solid rgba(0, 0, 0, 0.1);
	color: #000000;  
}

.res-allergie {
	color: #b70000;
}

.res-submit {
    text-align: center;
    padding: 0;
    margin: 10px 0 !important;
    line-height:18px !important;
    font-size:16px !important;
    min-height:30px!important;
}

.res-element, .res-content, .res-checkbox {
    background-color: #d6d6d6;
}

.res-element {
    height: 12%;
    padding: 2px 5%;
	margin: 0;
 }

.res-checkbox {
    padding: 7%;   
    padding-top: .4%;
    padding-bottom: .4%;
    height: 4%;
    position: relative;
 }
 
select {
	padding: 0 !important;
}

.res-input[type="checkbox"] {
    position: absolute;
    right: 5%;
}

.res-element:first-child {
    padding-top: 5%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.res-element:last-child {
    padding-bottom: 5%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.res-content {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,e2e2e2+8,e2e2e2+92,000000+100&0.25+0,1+8,1+92,0.25+100 */
    padding: 0;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#40000000',GradientType=0 ); /* IE6-9 */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(226,226,226,1) 8%,rgba(226,226,226,1) 92%,rgba(0,0,0,0.25) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(226,226,226,1) 8%,rgba(226,226,226,1) 92%,rgba(0,0,0,0.25) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(226,226,226,1) 8%,rgba(226,226,226,1) 92%,rgba(0,0,0,0.25) 100%); /* W3C */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(226,226,226,1) 8%,rgba(226,226,226,1) 92%,rgba(0,0,0,0.25) 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(226,226,226,1) 8%, rgba(226,226,226,1) 92%, rgba(0,0,0,0.25) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(8%,rgba(226,226,226,1)), color-stop(92%,rgba(226,226,226,1)), color-stop(100%,rgba(0,0,0,0.25))); /* Chrome,Safari4+ */
}

.res-content>div {
    height: 100%;
}

.res-day,
.res-u-day,
.res-day-name,
.res-tijd,
.res-history {
    height: 10%;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    width: 14.28571428571429%;
	width: calc(14.28571428571429% - 2px);
	margin: 0px;
	margin: calc(0px + 1px);
	
    background-color: whitesmoke;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    font-size:20px;
    line-height:35px;
}

.res-tijd {
	background-color: #27ae60;
	color: white;
}
.res-tijd:hover {
	background-color: #2ecc71;
}

.res-u-tijd {
	background-color: #c0392b;
}
.res-u-tijd:hover {
	background-color: #c0392b;
}

.res-tijd-druk {
	background-color: #e67e22;
}
.res-tijd-druk:hover {
	background-color: #f39c12;
}

.res-sel-tijd {
	box-shadow: inset 0 0 0 3px #2980b9;
}

#res-sel-day {
    background-color: #f78b8b;
}

.res-u-day {
    visibility: hidden;
}

.res-day:hover {
    background-color: #d9d7d7;
}

.res-history {
    background-color: #F5F4E9; 
    color:#D9D5D2;
}

#res-sel-day:hover {
    background-color: #d64f4f;
}

#res-next-month, #res-prev-month, #res-month, #res-tijd-header {
    margin: 0;
    height: 13%;
    padding: 0 2%;
    font-size: 20px;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#res-next-month, #res-prev-month,
#res-sel-day, .res-day,
.res-tijd, .res-sel-tijd {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
	cursor: pointer;
}

.res-u-day, .res-u-tijd, .res-history {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
	cursor: default;
}

#res-month {
    text-align: center;
    width: 80%;
}

#res-prev-month {
    width: 7%;
	text-align: left;
}

#res-next-month {
	width: 13%;
    text-align: right;
}

#res-date-seperator {
    height: 1%;
    width: 100%;
    margin: 5px;
    display: block;
    margin-left: 0;
    margin-right: 0;
    background-color: black;
}

.res-input {
    vertical-align: top;
}

select.res-field {
    width: 20%;
    right: 0;
	top: 0;
    position: absolute;
}

.res-field[name='arrangement'] {
	width: 50%;
}

span.res-field {
    display: inline-block;
    position: relative;
}

.res-personen {
    width: 50%;
    display: inline;
}

.res-tijd, .res-sel-tijd, .res-u-tijd {
    width: 20%;
	width: calc(20% - 2px);
}

#res-tijd-header {
    width: 100%;
    text-align: center;
}

.res-note {
	background-color: #f78b8b;
	border-radius: 5px;
	margin-bottom: 5px;
	padding: 2px;
	border: 2px solid red;
}

.res-succesvol {
	background-color: #EEF4A4;
	color:#000000;
	border-radius: 5px;
	margin-bottom: 5px;
	padding: 10px;
	border: 1px solid #45491F;
	word-wrap: normal;
}

.res-field label {
  font-weight:normal;
}

#res-date>div, #res-time>div {
	position: relative;
}

.res-pTooltip div {
	display: none;
}

.res-pTooltip:hover div
 {
	position: absolute;
 	width: 100%;
	top: 90%;
	left: 0px;
	display: block;
	background-color: #f00;
	border-radius: 5px;
	z-index: 999;
}

.res-day-tooltip:hover::before {
	width: 100%;
	top: 90%;
	left: 0px;
	position: absolute;
	content: attr(tooltip);
	background-color: red;
	z-index: 999;
	color: white;
	border-radius: 5px;
}

@media screen and (max-width: 600px) { 
	.res-field {
		font-size: 16px;
		font-weight: bold;
		padding: 20px 10px;
		cursor: pointer;
	}
	select.res-field {
		padding-left: 5px!important;
	} 

}