:root {
  --yellow: #fff0b3;
  --yellow2: #d1e0d5;
  --groenNH: #3f8c6b;
  --groenWest: #AEC8B5; /* #AEC8B5; gedimd groen */
  --workSpaceHeight: 95.0vh; 
  /* --panelTopBgColor: #3f8c6b; */
  --panelTopBgColor:#f0ede3;
  --panelTopHeight: 3.5vh;
  --panelBottomBgColor: #dbd4bd;
  --panelBottomBgColorBB:  #d2c8ad;
  --panelBottomHeight: 10vh;
  --panelWestBgColor: #AEC8B5;
  --panelEastBgColor: #AEC8B5;
  --hbdvFontFamily: Arial,sans-serif !important;
  --hbdvFontFamilyBasic: "Work Sans",sans-serif;
  --hbdvFontFamilyHeading: "Fraunces",serif;
  --hbdvFontModerate: calc(1.4rem + 0.01vw);
  --hbdvFontModerateScaled: calc(0.4rem + 2.1vw);
  --hbdvFontNormal: calc(1.2rem + 0.01vw);
  --hbdvFontNormalPlus: calc(1.25rem + 0.01vw);
  --hbdvFontNormalPlusPlus: calc(1.30rem + 0.01vw);
  --hbdvFontNormalPlusPlusPlus: calc(1.30rem + 0.01vw);
  --hbdvFontNormalScaled: calc(0.90rem + 0.30vw);
  --hbdvFontS: calc(1.0rem);
  --hbdvFontSS: calc(0.9rem + 0.10vw);
  --hbdvFontXSS: calc(0.55rem + 0.30vw);
  --hbdvFontXXSS: calc(0.2rem + 0.7vw);  
  --hbdvFontSmall: calc(1.0rem + 0.01vw);
  --hbdvFontSmallScaled: calc(0.8rem + 0.2vw);
  --hbdvFontSmallest: calc(0.5rem + 0.01vw);
  --hbdvFontSmallestScaled: calc(0.3rem + 0.7vw);
  --hbdvConfirmButton: #cddc39;
  /* --hbdvGoNextButton: #cddc39; */
  --hbdvGoNextButton: lightblue;
  --hbdvGoBackButton: #f1f1f1;
  --hbdvButtonDisabled: #9e9e9e;
  /* --hdbvToggleSwitch: #ffc107 !important; w3-amber */
  --hdbvToggleSwitch: darkgreen !important;
  --hdbvFotoPanelSubPanelDisplay: inline-block;
  --hbdvFotoToolboxPanelBgColor: aliceblue;
  
  	/* --hdbvToggleSwitch: #00b300 !important; iphone-green */
	/* display: var(--hdbvFotoPanelDivDisplay) !important; */
}


html, body {
	/* font-size: 100%; */
	/* height: 100%; */
	font-family: Arial, sans-serif !important;
	/* overflow: hidden; */
}

html.sticky, body.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: blue;
	padding: 20px;
	font-size: 20px;
	overflow: hidden;
}

* {
	box-sizing: border-box;
}

.hbdv-inputTextarea-XXL {
    width: calc(20rem + 23.0vw);
   	height: 240px;
}
	
@media screen and (min-width: 411px) {
	.hbdv-hide-ifScreenGtXXXSS, .panelMenuViewWorkSpace #cac040 .hbdv-row.hbdv-hide-ifScreenGtXXXSS {
		display: none !important;
	}
}

@media screen and (max-width: 410px) {
	.hbdv-hide-ifScreenLeXXXSS, .panelMenuViewWorkSpace #cac040 .hbdv-row.hbdv-hide-ifScreenLeXXXSS {
		display: none !important;
	}
	.hbdv-inputTextarea-XXL {
		width: calc(15rem + 20.5vw) !important;
    	height: 250px !important;		
	}	
}

@media screen and (min-width: 521px) {
	.hbdv-hide-ifScreenGtXXSS, .panelMenuViewWorkSpace #cac040 div.hbdv-row.hbdv-hide-ifScreenGtXXSS {
		display: none !important;
	}
}

@media screen and (max-width: 520px) {
	.hbdv-hide-ifScreenLeXXSS, .panelMenuViewWorkSpace #cac040 div.hbdv-row.hbdv-hide-ifScreenLeXXSS {
		display: none !important;
	}
	.hbdv-inputTextarea-XXL {
	    width: calc(15rem + 31.5vw);
    	height: 240px;
	}	
}

@media screen and (min-width: 768px) {
	.hbdv-hide-ifScreenGtXSS {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	.hbdv-hide-ifScreenLeXSS {
		display: none !important;
	}
}

@media screen and (min-width: 1192px) {
	.hbdv-hide-ifScreenGtLS {
		display: none !important;
	}
	.hbdv-inputTextarea-XXL {
	    width: calc(15rem + 35.5vw);
    	height: 210px;
	}	
}

@media screen and (max-width: 1191px) {
	.hbdv-hide-ifScreenLeLS {
		display: none !important;
	}
}




@media screen and (min-width: 391px) {
	.hbdv-hideon-screenXXXS {
		display: none !important;
	}
}

@media screen and (max-width: 390px) {
	.hbdv-hidenot-screenXXXS {
		display: none !important;
	}	
}

@media screen and (min-width: 521px) {
	.hbdv-hideon-screenXXS {
		display: none !important;
	}
}

@media screen and (max-width: 520px) {
	.hbdv-hidenot-screenXXS {
		display: none !important;
	}
}

@media screen and (min-width: 1192px) {
	.hbdv-hideon-screenXL {
		display: none !important;
	}
}

@media screen and (max-width: 1191px) {
	.hbdv-hidenot-screenXL {
		display: none !important;
	}
}


.hbdv-fontBN {
	font-family: var(--hbdvFontFamilyBasic);
	font-size: var(--hbdvFontNormal) !important;
	line-height: 1.5em;
}
.hbdv-fontBS {
	font-family: var(--hbdvFontFamilyBasic);
	font-size: var(--hbdvFontS) !important;
	line-height: 1.5em;
}
.hbdv-fontBSS {
	font-family: var(--hbdvFontFamilyBasic);
	font-size: var(--hbdvFontSS) !important;
	line-height: 1.5em;
}
.hbdv-fontH1 {
	font-family: var(--hbdvFontFamilyHeading);
	font-size: 2em !important;
	line-height: 1.5em;
}
.hbdv-fontH2 {
	font-family: var(--hbdvFontFamilyHeading);
	font-size: 1.7em !important;
	line-height: 1.5em;
}
.hbdv-fontH3 {
	font-family: var(--hbdvFontFamilyHeading);
	font-size: 1.5em !important;
	line-height: 1.1em;
}
.hbdv-fontH4 {
	font-family: var(--hbdvFontFamilyHeading);
	font-size: 1.3em !important;
	line-height: 1.0em;
}

.hbdv-fontN {
	font-size: var(--hbdvFontNormal) !important;
	line-height: 1.2em;
}

.hbdv-fontNS {
	font-size: var(--hbdvFontNormalScaled) !important;
	line-height: 1.2em;
}

.hbdv-fontM {
	font-size: var(--hbdvFontModerateScaled) !important;
	line-height: 1.25em;
}

.hbdv-fontMS {
	font-size: var(--hbdvFontModerateScaled) !important;
	line-height: 1.25em;
}

.hbdv-fontS {
	font-size: var(--hbdvFontS) !important;
	line-height: 1.5em;
}

.hbdv-fontSS {
	font-size: var(--hbdvFontSS) !important;
	line-height: 1.5em;
}

.hbdv-fontXSS {
	font-size: var(--hbdvFontXSS) !important;
	line-height: 1.5em;
}

.hbdv-fontXXSS {
	font-size: var(--hbdvFontXXSS) !important;
	line-height: 1.5em;
}

.hbdv-fontSmallMinScaled {
	font-size: calc(0.7rem + 0.5vw) !important;
	line-height: 1.5em;
}

.hbdv-fontSmall {
	font-size: var(--hbdvFontSmall) !important;
	line-height: 1.5em;
}

.hbdv-fontSmall.hbdv-fontScaled {
	font-size: var(--hbdvFontSmallScaled) !important;
}

.hbdv-fontSmallest {
	font-size: var(--hbdvFontSmallest) !important;
	line-height: 1.5em;
}

.hbdv-fontSmallest.hbdv-fontScaled {
	font-size: var(--hbdvFontSmallestScaled) !important;
	line-height: 1.5em;
}

@media screen and (max-width: 511px) {
	.hbdv-fontSmall.hbdv-fontSmallMobile {
		font-size: calc(0.95rem + 0.01vw) !important;
		line-height: 1.5em;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-wisseldagen {
		font-size: calc(0.6rem + 0.01vw) !important;
		line-height: 1.5em;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-verblijfsperiodes
		{
		font-size: calc(0.75rem + 0.01vw) !important;
		line-height: 1.5em;
	}
}

@media screen and (max-width: 611px) {
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-wisseldagen
		{
		font-size: calc(0.75rem + 0.01vw) !important;
		line-height: 1.5em;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-verblijfsperiodes
		{
		font-size: calc(0.85rem + 0.01vw) !important;
		line-height: 1.5em;
	}
}

@media screen and (max-width: 1501px) and (min-width: 1366px) {
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-wisseldagen
		{
		font-size: calc(0.85rem + 0.01vw) !important;
		line-height: 1.5em;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-verblijfsperiodes
		{
		font-size: calc(0.95rem + 0.01vw) !important;
		line-height: 1.5em;
	}
}

@media screen and (min-width: 1701px) {
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-wisseldagen
		{
		font-size: calc(1.1rem + 0.01vw) !important;
		line-height: 1.5em;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-fontSmall.hbdv-fontSmallMobile.hbdv-verblijfsperiodes
		{
		font-size: calc(1.1rem + 0.01vw) !important;
		line-height: 1.5em;
	}
}

.hbdv-fontSmallScaled {
	font-size: var(--hbdvFontSmallScaled) !important;
	line-height: 1.5em;
}

.hbdv-fontSmallPlus {
	font-size: calc(1rem + .1vw) !important;
}

.hbdv-fontNormal {
	font-size: var(--hbdvFontNormal) !important;
	line-height: 1.5em;
}

.hbdv-fontNormal.hbdv-fontScaled {
	font-size: var(--hbdvFontNormalScaled) !important;
}

.hbdv-fontNormalMin {
	font-size: calc(1.1rem + 0.01vw) !important;
	line-height: 1.5em;
}

@media screen and (max-width: 511px) {
	.hbdv-fontNormal.hbdv-fontNormalMobile {
		font-size: calc(1.1rem + 0.01vw) !important;
		line-height: 1.5em;
	}
	.hbdv-fontNormalMin.hbdv-fontNormalMinMobile {
		font-size: calc(1.05rem + 0.01vw) !important;
		line-height: 1.5em;
	}
}

.hbdv-fontNormalPlus {
	font-size: calc(1.2rem + 0.1vw) !important;
	line-height: 1.5em;
}

.hbdv-fontModerate {
	font-size: calc(1.1rem + 0.4vw) !important;
}

.hbdv-fontModeratePlus {
	font-size: calc(1.2rem + 0.4vw) !important;
	line-height: 1.0em;
}

.zw-fontFamily {
	font-family: Arial, sans-serif !important;
}

.zw-fontVeranda {
	font-family: Verdana, sans-serif !important;
}

.zw-fontArial {
	font-family: Arial, sans-serif;
}

.zw-fontSmallest {
	/* font-size: calc(0.3rem + 0.5vw) !important; */
	font-size: calc(0.8rem + 0.01vw) !important;
}

.zw-fontSmaller {
	/* font-size: calc(0.4rem + 0.5vw) !important; */
	font-size: calc(0.9rem + 0.01vw) !important;
}

.zw-fontSmall {
	/* font-size: calc(0.5rem + 0.5vw) !important; */
	font-size: calc(1.1rem + 0.01vw) !important;
}

.zw-fontMinimal {
	/* font-size: calc(0.45rem + 0.5vw) !important; */
	font-size: calc(1.0rem + 0.01vw) !important;
}

.zw-fontNormal {
	font-size: calc(1.2rem + 0.01vw) !important;
}

.zw-fontModerate {
	/* font-size: calc(0.55rem + 0.7vw) !important; */
	font-size: calc(1.2rem + 0.4vw) !important;
}

.zw-fontModeratePlus {
	/* font-size: calc(0.55rem + 0.8vw) !important; */
	font-size: calc(1.2rem + 0.5vw) !important;
}

.zw-fontBig {
	/* font-size: calc(0.55rem + 1vw) !important; */
	font-size: calc(1.2rem + 0.6vw) !important;
}

.zw-fontBigger {
	/* font-size: calc(0.55rem + 2vw) !important; */
	font-size: calc(1.2rem + 1.2vw) !important;
}

.zw-fontSmallPlus {
	/* font-size: calc(0.42rem + 0.5vw) !important; */
	font-size: calc(1.15rem + 0.01vw) !important;
}

.zw-fontLarge {
	/* font-size: calc(0.5rem + 1.5vw) !important; */
	font-size: calc(1.2rem + 1vw) !important;
}

.zw-beige {
	background-color: beige !important;
}

.zw-yellow {
	background-color: #ffe680 !important;
}

.zw-toolTip, .w3-tag.zw-toolTip {
	position: absolute;
	width: calc(10rem + 10vw);
	background: beige;
	color: black;
	border: 1px solid black;
	z-index: 100 !important;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
	background: 0 !important;
	border: 0 !important;
	/* color: #5f83b9; */
	color: midnightblue !important;
	background: white !important;
	/* background: beige !important; */
	/* background: aliceblue !important; */
}

.ui-datepicker td {
	border: solid 1px !important;
	padding: 0px !important;
	/* background: #AEC8B5; */
	/* background: #d1e0d5; */
	/* background: repeating-radial-gradient(olivedrab, transparent 100px); */
	/* background: repeating-radial-gradient(grey, transparent 100px); */
	/* background-image: repeating-linear-gradient(135deg,grey,black 1%,white 2%); */
	/* background-image: repeating-linear-gradient(135deg,grey, sienna,brown 3%,grey 2%); */
}

.ui-datepicker table {
	width: 100% !important;
	font-size: .9em !important;
	border-collapse: collapse !important;
	margin: 0 0 .4em !important;
	/* background: olivedrab; */
	background: aliceblue !important;
}

.p-datepicker-panel .ui-datepicker-calendar-container td span.ui-state-default.ui-state-disabled
	{
	opacity: .9 !important;
	color: white !important;
	/* background: rgba(71, 107, 107, .9) !important; */
	/* background-image: repeating-linear-gradient(135deg, darkgreen, green 2%, white 2%) !important; */
	background: #AEC8B5 !important;
}


.ui-datepicker-prev span {
	top: 25% !important;
	width: 42px !important;
	height: 42px !important;
    background-image: url(../images/backward35b.png) !important;
    background-position: 5px 5px !important;
}

.ui-datepicker-next span {
    top: 25% !important;
    width: 42px !important;
    height: 42px !important;
    background-image: url(../images/forward35b.png) !important;
    background-position: 5px 5px !important;
    margin-left: -30px !important;
}

.ui-panel .ui-panel-content {
	/* border: 0; */
	/* background: 0; */
	padding: 0px !important;
	margin-top: -1px;
}

/* menuRight alle-tabs opmaak */
/* alles een streepje rechts + marge */
.panelMenuViewEast .menuRight>.ui-tabs-nav li {
	/* margin: 0px 0px 0px 0px; */
	/* 	border-right: 0 none; */
	/* border-right: 3px solid !important; */
	/* 	border-right: 1px solid !important;  */
	border-left: 0px solid !important;
	border-right: 0px solid !important;
	border-bottom: 1px solid gray !important;
	border-top: 0px solid gray !important;
	background-color: #cddc39;
}

/* menuRight de geselecteerde tab opmaak */
.panelMenuViewEast .menuRight>.ui-tabs-nav .ui-tabs-selected {
	background-color: #f9f9eb !important;
	/* background-color: beige !important; */
	/* background: #CCEBD5; */
	/* 	background: #8fe096; */
	/* border-left: 0px !important; */
	position: relative;
	/* z-index: 1; */
}

#oud.ui-state-disabled, #oud.ui-widget-content .ui-state-disabled, #oud.ui-widget-header .ui-state-disabled
	{
	opacity: 1 !important;
	filter: Alpha(Opacity = 80) !important;
	/*     background-color: #CCEBD5 !important; */
	/* background-color: beige !important; */
	/* background-color: #ffe680 !important; */
	/* background-color: beige ! important; */
	/* line-height: 2.3 !important; */
	/* background-color: #cddc39 !important; */
	background-color: #ffc107 !important;
	font-size: calc(0.3rem + 0.8vw) !important;
	/* border: 0px solid #8bc34a !important; */
	border-top: 0px solid !important;
	border-bottom: 0px solid !important;
	border-right: 0px solid !important;
	border-left: 0px solid !important;
}

.panelMenuViewEast .ui-tabs .ui-tabs-nav li.ui-state-disabled a {
	cursor: text;
	padding: 0px !important;
	line-height: 1.8 !important;
	opacity: .5;
	background-color: grey !important;
    color: transparent;	
}

.panelMenuViewEast .ui-tabs .ui-tabs-panel {
	border-width: 0;
	/* padding: 0.1em 0.5em; */
	padding: 0.5em 0.5em 0em 0em;
	/* background: beige !important; */
}

.panelMenuViewEast .ui-tabs-left>.ui-tabs-panels {
	/* float: right; */
	/* width: 75%; */
	display: none;
}
 
.panelMenuViewEast .menuRight>.ui-tabs-nav .ui-state-default {
	background: var(--yellow2);
}

.panelMenuViewEast .ui-tabs.ui-tabs-left>.ui-tabs-nav li {
	/* margin: 0 0 1px 0.2em; */
	margin: 0 0 0px 0.0em;
	border-right: 0 none;
	float: right;
	display: block;
	white-space: normal;
	width: 101.5%;
}

.panelMenuViewEast .ui-tabs .ui-tabs-nav li a {
	float: left;
	text-decoration: none;
	outline: 0;
}

.panelMenuViewEast .ui-tabs.ui-tabs-left>.ui-tabs-nav li a {
	padding: 0.50em 0.3em !important;
	min-width: calc(13.3em + 0.1vw);
	width: 100%;
}

.panelMenuViewEast .ui-state-default {
	font-weight: normal;
}

.panelMenuViewEast .ui-state-hover {
	font-weight: bold !important;
}

.panelMenuViewWest img {
	vertical-align: middle;
	position: relative !important;
}

span.panelMenuViewTop1>div {
	margin-left: 10px;
}

@media screen and (min-width: 1192px) {
	span.panelMenuViewTop1>div {
		margin-left: 25px;
	}	
}	

span.panelMenuViewTop3>div {
	margin-right: 10px;
}

@media screen and (min-width: 1192px) {
	span.panelMenuViewTop3>div {
		margin-right: 25px;
	}	
}

.panelMenuViewTop3 .menuButtonLogout span.ui-menubutton {
	/* padding-left: 30vw !important; */
	float: right;
}

.panelMenuViewEast .ui-tabs-left>ul.ui-tabs-nav {
	/* border-left: 5px solid beige; */
	overflow: auto;
	overflow-x: hidden;
	height: var(--workSpaceHeight) !important;
	width: -webkit-fill-available !important;
	background-color: var(--panelEastBgColor) ! important;
	background-image: none;
	padding-top: 0px;
}

.panelMenuViewEast .ui-tabs-left>ul.ui-tabs-nav {
	margin-left: -10px !important;
}

.hbdv-temp .tempWorkSpaceHeight {
	height: var(--workSpaceHeight);
}

@media screen and (max-width: 767px) {
	.hbdv-temp .tempWorkSpaceHeight {
		height: auto !important;
	}
}

.hbdv-temp .hbdv-topbanner {
	display: flex;
	width: 100%;
}

.hbdv-temp .hbdv-topbanner .hbdv-cel1 {
	display: inline-block;
	width: 19vw;
}

.hbdv-temp .hbdv-topbanner .hbdv-cel2 {
	display: inline-block;
	width: 62vw;
}

.hbdv-temp .hbdv-topbanner .hbdv-cel3 {
	display: inline-block;
	margin-right: 10px;	
	width: 20%;
}

@media screen and (max-width: 767px) {
	.hbdv-temp .hbdv-topbanner .hbdv-cel2 {
		/* display: none !important; */
	}
}

.hbdv-temp .zw-row {
	display: flex;
}

.hbdv-temp .zw-col1 {
	display: inline-block;
	width: 19.99999%;
}

.hbdv-temp .zw-col2 {
	display: inline-block;
	width: 59.99999%;
}

.hbdv-temp .zw-col3 {
	display: inline-block;
	width: 19.99999%;
}

@media screen and (max-width: 767px) {
	.hbdv-temp .zw-row {
		display: block !important;
	}
	.hbdv-temp .tempWorkSpace {
		width: 100% !important;
	}
}

@media screen and (max-width: 767px) {
	.hbdv-temp .zw-col2.zw-col2b {
		display: block;
		width: 100%;
	}
	.hbdv-temp .zw-col3.zw-col3b {
		display: block;
		width: 100%;
	}
	.hbdv-temp .zw-flexMobile {
		height: auto !important;
		min-height: auto !important;
	}
	.panelMenuViewEast .ui-tabs-left>ul.ui-tabs-nav {
		height: auto !important;
	}
}

@media screen and (min-width: 993px) {
	.hbdv-temp .zw-col1.zw-col1a {
		display: inline-block;
		width: 19.99999%;
	}
}

@media screen and (max-width: 992px) {
	.hbdv-temp .zw-col1.zw-col1b {
		display: none !important;
	}
}

@media screen and (max-width: 992px) and (min-width: 768px) {
	.hbdv-temp .zw-col2.zw-col2b {
		display: inline-block;
		width: 69.99999%;
	}
	.hbdv-temp .zw-col3.zw-col3b {
		display: inline-block;
		width: 29.99999%;
	}
}

.panelMenuViewWorkSpace .ui-selectonemenu {
	padding-right: 0px;
}

.panelMenuViewWorkSpace .cac010InputTextarea {
	width: 25.0em;
}

@media screen and (max-width: 385px) {
	.panelMenuViewWorkSpace .cac010InputTextarea {
		width: 13.5em;
		height: 5.5em;		
	}
}

@media screen and (max-width: 561px) and (min-width: 386px) {
	.panelMenuViewWorkSpace .cac010InputTextarea {
		width: 17.5em;
	}
}

@media screen and (max-width: 1101px) {
	.hbdv-temp .verticalFiller {
		display: none !important;
	}
}

@media screen and (max-width: 1501px) and (min-width: 1252px) {
	.panelMenuViewWorkSpace .cac010InputTextarea {
		width: 20.0em;
	}
}

@media screen and (max-width: 1051px) and (min-width: 768px) {
	.panelMenuViewWorkSpace .cac010InputTextarea {
		width: 23.0em;
	}
}

@media screen and (max-width: 1191px) and (min-width: 1052px) {
	.panelMenuViewWorkSpace .cac010InputTextarea {
		width: 25.0em;
	}
}

@media screen and (max-width: 1251px) and (min-width: 1192px) {
	.panelMenuViewWorkSpace .cac010InputTextarea {
		width: 18.0em;
	}
}

.panelMenuViewWorkSpace .ui-toggleswitch,
	.panelMenuViewEast .ui-toggleswitch,
		.panelMenuViewWest .ui-toggleswitch  {
	width: 3em;
	height: 1.55em !important;
	vertical-align: middle;
	font-size: 1.1em;
	/* font-size: 1em; */
	/* font-size: .7em; */
}

.panelMenuViewWorkSpace .ui-toggleswitch .ui-toggleswitch-slider:hover,
	.panelMenuViewWorkSpace .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:hover,
		.panelMenuViewEast .ui-toggleswitch .ui-toggleswitch-slider:hover,
			.panelMenuViewEast .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:hover,
				.panelMenuViewWest .ui-toggleswitch .ui-toggleswitch-slider:hover,
					.panelMenuViewWest .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:hover				
	{
	background-color: #72707080;
}

.panelMenuViewWorkSpace .ui-toggleswitch-focus .ui-toggleswitch-slider, 
	.panelMenuViewEast .ui-toggleswitch-focus .ui-toggleswitch-slider,
		.panelMenuViewWest .ui-toggleswitch-focus .ui-toggleswitch-slider {
	/* -moz-box-shadow: 0px 0px 5px #c0c0c0;
  -webkit-box-shadow: 0px 0px 5px #c0c0c0; */
	box-shadow: 1px 2px 10px black;
}

.panelMenuViewWorkSpace .ui-toggleswitch .ui-toggleswitch-slider,
	.panelMenuViewEast .ui-toggleswitch .ui-toggleswitch-slider,
		.panelMenuViewWest .ui-toggleswitch .ui-toggleswitch-slider {
	-moz-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
	border-radius: 30px;
	/* background-color: #72707080; */
	/* background-color: #f1f1f1; */
	/* background-color: #efefc3; */
	/* background-color: #AEC8B5; */
	background-color: #d1e0d5;
	border: 1px solid beige;
}

.panelMenuViewWorkSpace .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider, 
	.panelMenuViewEast .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider,
		.panelMenuViewWest .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
	/* background-color: #cddc39; */
	/* background-color: #00b300; */
	background-color: var(--hdbvToggleSwitch);
}

.panelMenuViewWorkSpace .ui-toggleswitch .ui-toggleswitch-slider::before, 
	.panelMenuViewEast .ui-toggleswitch .ui-toggleswitch-slider::before, 
		.panelMenuViewWest .ui-toggleswitch .ui-toggleswitch-slider::before {
	background-color: white;
	/* background-color: #AEC8B5; */
	/* background-color: #3f8c6b; */
	/* background-color: #ffffff; */
	height: 1.250em;
	width: 1.250em;
	left: .25em;
	top: .10em;
	bottom: .10em;
	border-radius: 50%;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.panelMenuViewWorkSpace .cac010InputNumericSize1 {
	width: 3.5em;
}

.hbdv-logoTekstWest {
	padding-top: 35px;
}
@media screen and (max-width: 1148px) and (min-width: 993px) {
	.hbdv-logoTekstWest {
		padding-top: 0px;
		line-height: 1em;
	}
}
@media screen and (max-width: 1251px) and (min-width: 1149px) {
	.hbdv-logoTekstWest {
		padding-top: 0px;
		line-height: 1.2em;
	}
}
@media screen and (max-width: 1701px) and (min-width: 1252px) {
	.hbdv-logoTekstWest {
		padding-top: 15px;
	}
}

	
@media screen and (max-width: 1251px) and (min-width: 993px) {
	.hbdv-temp .zw-col2.zw-col2a {
		display: inline-block;
		width: 74.99999%;
	}
	.hbdv-temp .zw-col3.zw-col3b {
		display: inline-block;
		width: 24.99999%;
	}
}

.hbdv-temp .zw-right {
	padding: 5px;
}

.hbdv-temp .zw-left {
	padding: 10px;
	padding-left: 5px;	
}

.panelMenuViewTop3 .menuButtonLogout .ui-menubutton .ui-state-default .ui-icon {
	background-image: url(../images/persoon3-25.png);
	background-position: center;
	width: 28px;
	height: 25px;
	margin-top: -15px;
	margin-left: -14px;
}

.panelMenuViewTop3 .menuButtonLogout .ui-menubutton .ui-button {
	font-size: calc(1.1rem + 0.1vw) !important;
	border-radius: 50%;
	width: 2em;
}

.panelMenuViewTop3 span.ui-menubutton.ui-widget.menuButtonLogout .ui-button {
	font-size: calc(1.1rem + 0.1vw) !important;
	border-radius: 50%;
	width: 2em;
}

.panelMenuViewTop3 .menuButtonLogout span.ui-button-icon-left.ui-icon.ui-c  {
	background-image: url(../images/persoon3-25.png);
	background-position: center;
	width: 28px;
	height: 25px;
	margin-top: -15px;
	margin-left: -14px;	
}	





.panelMenuViewWorkSpace button, input, select, textarea, optgroup {
	font: initial !important;
	font-family: var(--hbdvFontFamily) !important;
}

.panelMenuViewWorkSpace div.ui-selectonemenu, .panelMenuViewWorkSpace .w3-tooltip
	{
	line-height: initial;
}

.panelMenuViewWorkSpace .center {
	display: flex;
	align-items: center;
}

.panelMenuViewWorkSpace .hbdv-row, .panelMenuViewWorkSpace .hbdv-rownoblock
	{
	display: flex;
	align-items: center;
	padding: 5px 0px 7px 0px;
	line-height: 1.2em;
	width: 100%;
}

.panelMenuViewWorkSpace .hbdv-rowblock {
	display: block;
	align-items: center;
	padding: 5px 0px 7px 0px;
	line-height: 1.2em;
	width: 100%;
}

.panelMenuViewWorkSpace .hbdv-container {
	display: inline-block;
	width: 100%;
    padding-bottom: 5px;	
}

.panelMenuViewWorkSpace .hbdv-col1 {
	display: inline-block;
	width: 39.99999%;
	padding-right: 1.5em;
}

.panelMenuViewWorkSpace .hbdv-col2 {
	display: inline-block;
	width: 59.99999%;
}

.panelMenuViewWorkSpace .hbdv-colhalf {
	display: inline-block;
	width: 49.99999%;
}

.panelMenuViewWorkSpace #cac020oud .hbdv-col1 {
	display: inline-block;
	width: 25.99999%;
}

.panelMenuViewWorkSpace #cac020oud .hbdv-col2 {
	display: inline-block;
	width: 33.99999%;
}

.panelMenuViewWorkSpace #cac040 .hbdv-col1 {
	display: inline-block;
	width: 35.99999%;
}

.panelMenuViewWorkSpace #cac040 .hbdv-col2 {
	display: inline-block;
	width: 63.99999%;
}

@media screen and (max-width: 920px) {
	.panelMenuViewWorkSpace .hbdv-rownoblock {
		/* display: block !important; */
		
	}
	.panelMenuViewWorkSpace .hbdv-row {
		display: block !important;
	}
	.panelMenuViewWorkSpace .hbdv-col1 {
		display: block !important;
		width: 100% !important;
		padding-top: 10px;
		padding-bottom: 3px;
	}
	.panelMenuViewWorkSpace .hbdv-col2 {
		display: block !important;
		width: 100% !important;
	}
	.panelMenuViewWorkSpace .hbdv-colhalf {
		display: block !important;
		width: 100% !important;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

@media screen and (max-width: 1191px) and (min-width: 921px) {
	.panelMenuViewWorkSpace .hbdv-row {
		display: block !important;
	}
	.panelMenuViewWorkSpace .hbdv-col1 {
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 3px;
	}
	.panelMenuViewWorkSpace .hbdv-col2 {
		display: block;
		width: 100%;
	}
	.panelMenuViewWorkSpace .hbdv-colhalf {
		display: block;
		width: 100%;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

@media screen and (max-width: 1365px) and (min-width: 921px) {
	.panelMenuViewWorkSpace #cac040 .hbdv-row {
		display: block !important;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-col1 {
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 3px;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-col2 {
		display: block;
		width: 100%;
	}
	.panelMenuViewWorkSpace #cac040 .hbdv-colhalf {
		display: block;
		width: 100%;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

@media screen and (max-width: 1365px) {
	.panelMenuViewWorkSpace #cac040 .hbdv-col1 {
		/* line-height: 1.0em; */
	}
}

.panelMenuViewWorkSpace .ui-selectonemenu .ui-selectonemenu-label.ui-inputfield {
	padding: 6px; padding-top: 7px;
}

.panelMenuViewWorkSpace .ui-inputfield {
	padding: 7px;
}

/* ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-disabled hbdv-fontSmallPlus ui-state-filled */
.panelMenuViewWorkSpace .ui-inputfield.ui-state-disabled {
	opacity: .75 !important;
	background: #c4c4c4
		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,
		0.8)), to(rgba(255, 255, 255, 0))) !important;
}

@media screen and (max-width: 511px) {
	.hbdv-hideon-mobileportrait {
		display: none !important;
	}
}

@media screen and (max-width: 767px) and (min-width: 512px) {
	.hbdv-hideon-mobilelandscape {
		display: none !important;
	}
}

@media screen and (max-width: 992px) and (min-width: 768px) {
	.hbdv-hideon-tabletportrait {
		display: none !important;
	}
}

@media screen and (max-width: 1365px) and (min-width: 993px) {
	.hbdv-hideon-tabletlandscape {
		display: none !important;
	}
}

@media screen and (min-width: 1366px) {
	.hbdv-hideon-widescreen {
		display: none !important;
	}
}

@media screen and (max-width: 1365px) {
	.hbdv-hidenot-widescreen {
		display: none !important;
	}
}

@media screen and (min-width: 1192px) {
	.hbdv-hideon-bigscreen {
		display: none !important;
	}
}

@media screen and (max-width: 1191px) {
	.hbdv-hidenot-bigscreen {
		display: none !important;
	}
}

.hbdv-hide {
	display: none;
}

.hbdv-hideimportant {
	display: none !important;
}

@media screen and (max-width: 511px) {
	.hbdv-showon-mobileportraitRow {
		display: table-row !important;
	}
}

@media screen and (max-width: 511px) {
	.hbdv-showon-mobileportrait {
		display: table-cell !important;
	}
}

@media screen and (max-width: 992px) and (min-width: 512px) {
	.hbdv-showon-mobilelandscape {
		display: table-cell !important;
	}
}

@media screen and (max-width: 992px) and (min-width: 768px) {
	.hbdv-showon-tabletportrait {
		display: table-cell !important;
	}
}

@media screen and (max-width: 1365px) and (min-width: 993px) {
	.hbdv-showon-tabletlandscape {
		display: table-cell !important;
	}
}

@media screen and (max-width: 767px) {
	.hbdv-showon-mobile {
		display: table-cell !important;
	}
}

@media screen and (max-width: 1365px) and (min-width: 768px) {
	.hbdv-showon-tablet {
		display: table-cell !important;
	}
}

@media screen and (min-width: 1366px) {
	.hbdv-showon-widescreen {
		display: table-cell !important;
	}
}

@media screen and (max-width: 1365px) {
	.hbdv-shownot-widescreen {
		display: table-cell !important;
	}
}

@media screen and (min-width: 1310px) {
	.hbdv-showon-widescreenPlus {
		display: table-cell !important;
	}
}

@media screen and (max-width: 1311px) {
	.hbdv-shownot-widescreenPlus {
		display: table-cell !important;
	}
}

.panelcheckseparator {
	margin-top: 35px !important;
}

.panelcheckbutton {
	margin-top: -15px;
}

@media screen and (min-width: 511px) {
	.panelcheckseparator {
		margin-top: 5px !important;
	}
	.panelcheckbutton {
		margin-top: -35px;
	}
}

button.ui-state-default.confirmButton {
	border: 2px solid aliceblue;
	background: aliceblue;
}

button.confirmButton {
	background: var(--hbdvConfirmButton) !important;
	border: 2px solid var(--yellow) !important;
}

.panelMenuViewWorkSpace div.w3-bar {
    width: 102%;
    overflow: hidden;
    margin-left: -7px;
}

.panelMenuViewWorkSpace button.hbdv-gonextButton {
	padding: 7px 11px;
	font-size: medium !important;
	font-weight: bold !important;
	border: 2px solid var(--yellow) !important;
}

.panelMenuViewWorkSpace button.hbdv-gonextButton.hbdv-gonext > span.ui-button-text.ui-c {
    padding: 0.3em 0.5em;
}

.panelMenuViewWorkSpace button.ui-state-default.hbdv-gonextButton.hbdv-goback
	{
	background: var(--hbdvGoBackButton);
}

.panelMenuViewWorkSpace button.ui-state-default.hbdv-gonextButton.hbdv-gonext
	{
	background: var(--hbdvGoNextButton) !important;
}

.panelMenuViewWorkSpace button.hbdv-gonextButton.ui-state-focus,
	.panelMenuViewWorkSpace button.hbdv-gonextButton.ui-state-hover {
	border: 2px solid black !important;
	outline: none;
}

.panelMenuViewWorkSpace button.ui-state-default.hbdv-checkbutton {
	border: 2px solid aliceblue;
	background: aliceblue;
}

.panelMenuViewWorkSpace button.ui-state-default.hbdv-checkbutton span.ui-button-text
	{
	padding: 0.15em 0.35em 0.1em 0.35em;
	font-size: calc(1.4rem + 0.01vw) !important;
}

.hbdv-dialog button.hbdv-closeDialog>span {
	/* padding: 0em 0em 0em 0em !important; */
	padding: 0.5em 0.1em 0.5em;
	/* font-size: calc(1.55rem + 0.1vw) !important; */
	font-size: calc(1.1rem + 0.1vw) !important;
	background-color: inherit !important;	
	background-image: url(../images/toDo.png) !important;
	background-repeat: no-repeat;
	width: 40px;
	background-position: center;
	/* margin-top: 5px; */
	/* margin-left: 1px; */
}

.hbdv-datepicker div.ui-datepicker {
	margin-top: -5px;
}

@media screen and (max-height: 600px) {
	div.hbdv-dialog.hbdv-cac040d-checkVerhuurBasis, div.hbdv-dialog.hbdv-cac040dr-checkVerhuurbasisResult,
		div.hbdv-dialog.hbdv-cac050d-checkPrijzen, div.hbdv-dialog.hbdv-cac050dr-checkPrijzenResult,
		div.hbdv-dialog.hbdv-cac070d-checkBoeking {
		top: 0px !important;
	}
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

html.hide-overflow {
	overflow: hidden !important;
}

.panelMenuViewWorkSpace button.ui-state-default.hbdv-buttonStartToevoegen, .panelMenuViewWorkSpace button.ui-state-default.hbdv-buttonStopToevoegen, 
	.panelMenuViewEast button.ui-state-default.hbdv-buttonStartToevoegen, .panelMenuViewEast button.ui-state-default.hbdv-buttonStopToevoegen,
		.panelMenuViewWest button.ui-state-default.hbdv-buttonStartToevoegen, .panelMenuViewWest button.ui-state-default.hbdv-buttonStopToevoegen {
	border: 2px solid aliceblue;
	background: aliceblue !important;
}

.panelMenuViewWorkSpace button.hbdv-buttonStartToevoegen, .panelMenuViewWorkSpace button.hbdv-buttonStopToevoegen,
	.panelMenuViewEast button.hbdv-buttonStartToevoegen, .panelMenuViewEast button.hbdv-buttonStopToevoegen,
		.panelMenuViewWest button.hbdv-buttonStartToevoegen, .panelMenuViewWest button.hbdv-buttonStopToevoegen {
	background: var(--yellow);
	border: 2px solid var(--yellow) !important;
}

.panelMenuViewWorkSpace button.hbdv-buttonStartToevoegen, .panelMenuViewWorkSpace button.hbdv-buttonStopToevoegen, 
	.panelMenuViewEast button.hbdv-buttonStartToevoegen, .panelMenuViewEast button.hbdv-buttonStopToevoegen,
		.panelMenuViewWest button.hbdv-buttonStartToevoegen, .panelMenuViewWest button.hbdv-buttonStopToevoegen {
    font-size: 1.6rem !important;
    border-radius: 25px;
    width: 1.6em;
    height: 1.6em;    
    vertical-align: middle;    
}

.panelMenuViewWorkSpace span.ui-button-icon-left.ui-icon.ui-c.pi.pi-plus-circle, .panelMenuViewWorkSpace span.ui-button-icon-left.ui-icon.ui-c.pi.pi-minus-circle, .panelMenuViewWorkSpace span.ui-button-icon-left.ui-icon.ui-c.pi.pi-times-circle,
	.panelMenuViewEast span.ui-button-icon-left.ui-icon.ui-c.pi.pi-plus-circle, .panelMenuViewEast span.ui-button-icon-left.ui-icon.ui-c.pi.pi-minus-circle, .panelMenuViewEast span.ui-button-icon-left.ui-icon.ui-c.pi.pi-times-circle,
		.panelMenuViewWest span.ui-button-icon-left.ui-icon.ui-c.pi.pi-plus-circle, .panelMenuViewWest span.ui-button-icon-left.ui-icon.ui-c.pi.pi-minus-circle, .panelMenuViewWest span.ui-button-icon-left.ui-icon.ui-c.pi.pi-times-circle {
    width: 38px;
    height: 38px;
    margin-left: -19px;
    font-size: 1.55em;
    margin-top: -18.5px;  
    opacity: .5;
}

.panelMenuViewWorkSpace .ui-progressbar-value.ui-widget-header.ui-corner-all {
    background: darkgreen;
    margin: 0px;
}


.panelMenuViewTop3 button.ui-state-default.hbdv-buttonBackward {
	border: 2px solid aliceblue;
	background: aliceblue !important;
}

.panelMenuViewTop3 button.hbdv-buttonBackward {
	color: darkgreen;
}

.panelMenuViewTop3 button.hbdv-buttonBackward {
    font-size: 1.3rem !important;
    border-radius: 25px;
    width: 1.7em;
    height: 1.7em;    
    vertical-align: middle;    
}

.panelMenuViewTop3 span.ui-button-icon-left.ui-icon.ui-c.pi.pi-home {
    width: 38px;
    height: 38px;
    margin-left: -19px;
    font-size: 1.55em;
    margin-top: -18.5px;  
    opacity: .75;
}

.panelMenuViewTop3 span.ui-button-icon-left.ui-icon.ui-c.pi.pi-step-backward {
    width: 38px;
    height: 38px;
    margin-left: -19px;
    font-size: 1.55em;
    margin-top: -13.5px;  
    opacity: .75;
}

.panelMenuViewTop3 span.ui-button-icon-left.ui-icon.ui-c.pi.pi-list {
    width: 38px;
    height: 38px;
    margin-left: -19px;
    font-size: 1.55em;
    margin-top: -13.5px;  
    opacity: .75;
}

div.ui-dialog-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-top.ui-draggable-handle {
    display: none;
}

@media screen and (max-width: 668px) {
	div.hbdv-dialog.hbdv-utl010d-aanmelden2 {
	    width: 90% !important;
	    max-height: 90vh !important;
	}
	div.hbdv-dialog.hbdv-utl010d-aanmelden2 .ui-dialog-content {
	   	height: 90vh !important;
	}	
}

@media screen and (min-width: 669px) {
	div.hbdv-dialog.hbdv-utl010d-aanmelden2 {
	    width: 615px !important;
	    max-height: 70vh !important;
	}
	div.hbdv-dialog.hbdv-utl010d-aanmelden2 .ui-dialog-content {
	   	height: 70vh !important;
	}	
}

div.hbdv-dialog.hbdv-utl010d-aanmeldenConfirm {
    width: 90vw !important;
    max-width: 475px !important;
    max-height: 545px !important;
    top: 70px !important;
    height: 70vh !important;
}

div.hbdv-dialog.hbdv-utl010d-aanmeldenConfirm .ui-dialog-content {
   	max-height: 545px !important;
   	height: 70vh !important;
}

div.hbdv-dialog.hbdv-utl010d-aanmeldenNewPasswordConfirm {
    width: 90vw !important;
    max-width: 475px !important;
    max-height: 425px !important;
    top: 50px !important;
    height: 70vh !important;
}

div.hbdv-dialog.hbdv-utl010d-aanmeldenNewPasswordConfirm .ui-dialog-content {
   	max-height: 425px !important;
   	height: 70vh !important;
}

div.hbdv-dialog.hbdv-utl010d-aanmeldenAccountBestaatAl {
    width: 90vw !important;
    max-width: 375px !important;
    max-height: 455px !important;
    top: 50px !important;
    height: 70vh !important;
}
div.hbdv-dialog.hbdv-utl010d-aanmeldenAccountBestaatAl .ui-dialog-content {
   	max-height: 535px !important;
   	height: 70vh !important;
}

button.bewerkenButton {
    font-size: 1.25rem !important;
    border-radius: 7px;
    width: 2em;
}

button.bewerkenButton span.ui-button-icon-left.ui-icon.ui-c.pi.pi-pencil,
 button.bewerkenButton span.ui-button-icon-left.ui-icon.ui-c.pi.pi-trash {
    width: 35px;
    height: 30px;
    margin-left: -17px;
    font-size: 1.2em;
    margin-top: -10.5px;
}

button.ui-state-default.bewerkenButton {
    background: aliceblue;
}

