.sub button
{
	padding: 20px 15px;
}

nav#subnav form label.checkbox
{
	font-style:italic;
}

nav#subnav form .label
{
	clear:none;
	padding: 1em 0 0 0;
}

nav#subnav .flip
{
	color: var(--main-color-4);
	font-size: 20px;
	padding:1em 0 0 0;
}

.alfabet
{
	width: 120px !important;
	float:right;
}
.alfabet select
{
	width: 148px !important;
}

.styled-select select
{
	background: transparent;
	line-height: 1;
	border: 0;
	border-radius: 0;
	width: 268px;
	height: 2em;
	-webkit-appearance: none;
/*	padding:5px 10px;*/
	padding:0px 10px;
}
div.period.styled-select select
{
	width: 170px;
}

.styled-select
{
/*	margin-top:1em; 20190824 CG weggehaald voor periode veld */
	margin-left:10px;
/*
	width: 240px;
*/
	height: 2em;
	overflow: hidden;
	background: url(/images/sort_both.png) no-repeat right var(--menu-txt-hover);
	border: 1px solid var(--main-controls-color-7);
}

.pijl
{
	background: url(/images/icons/icoon-arrow_down.svg) no-repeat right var(--menu-txt-hover);
	background-size:10px;
}

aside .styled-select,
aside input[type='number'],
aside input[type='text']
{
	margin-left:0;
	border: 1px solid #6a7789;
	border-radius: 5px;
	height:25px;
}

aside .styled-select select
{
	padding:0;
	width:225px;
}

.corpus
{
	width:50%;
}

.summary
{
	padding:1em 0;
}

.calendarium
{
	margin: 1em  0;
}

.calendarium label
{
	position: absolute;
	top: -999px;
	left: -999px;
}

.calendarium button
{
	width: 70px;
	border: 1px var(--menu-bg) solid;
	border-radius: 4px;
	height: 2.5em;
      background: var(--menu-bg);
	padding: 0;
}
.calendarium button.submitCal
{
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-image: url("/images/icons/zoeken-wit.svg") }
.calendarium button.showhide
{
	margin-left: 6px;
	width: 2em;
	height: 2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 19px 19px;
	background-image: url("/images/icons/plus.svg")
}

.calendarium .styled-select
{
	width: 70px;
	height: 2em;
	float: left;
	margin: 0px 10px 0 0;
	border-radius: 4px;
}
.calendarium input.styled-select
{
	padding: 15px 7px;
}
.calendarium input::placeholder
{
	font-style: italic;
}

.calendarium .ui-autocomplete
{
	position: absolute;
	max-width: 200px;
	max-height: 300px;
	overflow-y: auto;
}
form.calendarium .ui-autocomplete li div.entry
{
	color: #FFF;
	text-decoration: underline;
}

form.calendarium span.searchbuttons
{
	display: flex;
	align-items: center;
}

input[type="text"], input[type="date"],  textarea, input[type="tel"], input[type="email"],
form[class="DBNL.ContactInquiry"] input[type="File"][disabled]+output
{
	border: 1px solid var(--main-controls-color-9);
	border-radius: 4px;
	width: 100%;
	text-overflow: ellipsis;
	padding: 5px;
}
input[type="submit"], form[class="DBNL.ContactInquiry"] button
{
	width: 150px;
	border: 1px var(--main-txt) solid;
	border-radius: 4px;
	height: 2.5em;
	background-color: var(--main-txt);
	color: #fff;
}

#subnav:target #searchform
{
	outline-offset: -2px;
	outline-style: dotted;
	outline-width: 2px;
	outline-color: rgba(255,255,255,0);
	transition-property: outline-color;
	transition-duration: 3s;
}

form fieldset.verzoeken
{
	border: none;
	padding: 0;
}
form fieldset.verzoeken legend
{
	padding: 0;
	font-style: italic;
}
form fieldset.verzoeken label.label:after
{
	content: ":";
}
form fieldset.verzoeken label.label.required:after
{
	content: "(*):";
}
form fieldset.verzoeken legend.verzoeken-motivatie
{
	display: contents;
}
form fieldset.verzoeken label.verzoeken-motivatie
{
	font-size: 16px;
	line-height: 22px;
	text-transform: none;
	font-variant: normal;
	color: black;
	letter-spacing: normal;
	font-weight: normal;
	font-family: "Noto Serif";
}
form fieldset.verzoeken label.verzoeken-motivatie:before
{
	content: "(";
}
form fieldset.verzoeken label.verzoeken-motivatie:after
{
	content: ")";
}
form fieldset.verzoeken label[for="nvt"]:after
{
	content: none;
}
form fieldset.verzoeken div.kosten
{
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 3px;
	align-items: flex-start;
}

form[class="DBNL.ContactInquiry"] label
{
      display: block;
}
form[class="DBNL.ContactInquiry"] button
{
      padding: initial;
}
form[class="DBNL.ContactInquiry"]::before
{
      vertical-align: bottom;

      font-family: "Noto Sans";
      font-size: 12px;
      color: var(--menu-bg);

      content: "(*) Verplichte velden";
}
form[class="DBNL.ContactInquiry"] label.required::after
{
      content: "(*)";
}
form[class="DBNL.ContactInquiry"] input[name="Email"]
{
      position: absolute;
      top: -999px;
      left: -999px;
}
form[class="DBNL.ContactInquiry"] textarea
{
      resize: none;
}
form[class="DBNL.ContactInquiry"] textarea[readonly],
form[class="DBNL.ContactInquiry"] input[readonly]
{
      border-color: var(--lichtgrijs);
      background-color: var(--lichtgrijs);

      color: var(--menu-bg);
}
form[class="DBNL.ContactInquiry"] input[type="File"]
{
      width: 100%;
}
form[class="DBNL.ContactInquiry"] input[type="File"][disabled]+output
{
      border-color: var(--lichtgrijs);
      background-color: var(--lichtgrijs);

      text-align: initial;
      color: var(--menu-bg);
}
form[class="DBNL.ContactInquiry"] input[type="File"][disabled]+output ul
{
      margin: 0px;
      padding: 0px;

      list-style-position: inside;
      /*list-style-image:*/
}
form[class="DBNL.ContactInquiry"] input[type="File"]+output,
form[class="DBNL.ContactInquiry"] textarea[required]+output,
form[class="DBNL.ContactInquiry"] input[required]+output
{
      display: block;
      padding-right: 9px;

      text-align: right;
}
form[class="DBNL.ContactInquiry"] input[type="File"]+output strong,
form[class="DBNL.ContactInquiry"] textarea[required]+output strong,
form[class="DBNL.ContactInquiry"] input[required]+output strong
{
      color: #F44;
}
form[class="DBNL.ContactInquiry"] button[type="Submit"]
{
      float: right;
      margin: 9px;
}
form[class="DBNL.ContactInquiry"] input[placeholder]::placeholder
{
      color: #000;
      opacity: 1;
}
form[class="DBNL.ContactInquiry"] output:first-child
{
      display: inline-flex;
      height: 60px;
      align-items: center;
}

@media screen and (min-width:600px)
{
}

@media screen and (min-width:1000) and (max-width:1032px)
{

}
@media screen and (min-width:1180px)
{
	.calendarium .styled-select
	{
		width:100px;
	}
}