/*  ERINS HELFERWIENS CSS PLEASE DON'T TOUCH THANK YOU  */


/*GENERAL*******************************************************/
@font-face {
  font-family: "wienermelange";
  src: url("/_assets/content/dhw_woff/WienerMelange_W_Rg.woff") format("woff");
}

@font-face {
  font-family: "wienermelange";
  src: url("/_assets/content/dhw_woff/WienerMelange_W_Bd.woff") format('woff');
  font-weight: bold;
}

@font-face {
  font-family: "wienermelange";
  src: url("/_assets/content/dhw_woff/WienerMelange_W_BdIt.woff") format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "wienermelange";
  src: url("/_assets/content/dhw_woff/WienerMelange_W_It.woff") format('woff');
  font-style: italic;
}


.calelement * {color: #333333; font-family: wienermelange!important;}
.upper {text-transform:uppercase;}
.flex {display: flex;}
.note {font-style: italic;font-size: 12px;}
.bold {font-weight: bold;}
.noborder {border: none!important;}
.nopadding {padding: 0px!important;}
.red{color: #E30613;}

.calelement .genbtn {
	color: #ffffff;
	background-color: #494C80;
	text-decoration: none;
	padding: 15px;
	border: none;
}
.btn-wrap{margin: 30px 0px;}

#grayout{
	display: none;
	background-color: #333333;
	opacity: 0.9;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 500;
}


.module_asks select, .module_appointments select {
  background-color: #494C80;
}

#deny-edit-btn:hover{color: #8789AA; cursor: pointer;}
#deny-edit-btn{
	color: #494C80;
	text-decoration: underline;
}

#statusmessage{
	flex-direction: column;
	align-items: center;
	margin: 10px 0px;
}
.statusinner{text-align: center;}

/* ICONS */

.successicon{
	width: 50px;
	margin: 10px;
	filter: invert(17%) sepia(0%) saturate(0%) hue-rotate(71deg) brightness(101%) contrast(91%);
}

.csvlink{
	display: block;
	color: #494C80;
	text-decoration: underline;
	padding-left: 30px;
}

.csvlink:before{
	content: url("/_assets/content/dhw_icons/csv.svg");
	width: 20px; 
	height: 20px; 
	left: -30px;
	top: 8px;
	filter: invert(28%) sepia(14%) saturate(1824%) hue-rotate(199deg) brightness(97%) contrast(87%);
	position: relative;
	display: inline-block;
}

.csvlink:hover{
	color: #8789AA;
	cursor: pointer;
}

.oa-deny {
	background-image:url("/_assets/content/dhw_icons/deleteCircle.svg");
	background-repeat: no-repeat;
	background-size: 30px;
	filter: invert(57%) sepia(0%) saturate(1580%) hue-rotate(249deg) brightness(94%) contrast(87%);
}
.oa-confirm {
	background-image:url("/_assets/content/dhw_icons/checkCircleFull.svg");
	background-repeat: no-repeat;
	background-size: 30px;
	filter: invert(28%) sepia(14%) saturate(1824%) hue-rotate(199deg) brightness(97%) contrast(87%);
}

.pop-deny {
	background-image:url("/_assets/content/dhw_icons/deleteCircle.svg");
	background-repeat: no-repeat;
	background-size: 30px;
	filter: invert(100%) sepia(9%) saturate(7464%) hue-rotate(179deg) brightness(109%) contrast(107%);
}
.pop-confirm {
	background-image:url("/_assets/content/dhw_icons/checkCircleFull.svg");
	background-repeat: no-repeat;
	background-size: 30px;
	filter: invert(100%) sepia(9%) saturate(7464%) hue-rotate(179deg) brightness(109%) contrast(107%);
}

.oa-deny:hover, .pop-deny:hover{
	background-image:url("/_assets/content/dhw_icons/deleteCircleFull.svg");
	filter: invert(14%) sepia(99%) saturate(6355%) hue-rotate(353deg) brightness(88%) contrast(103%);
}
.oa-confirm:hover, .pop-confirm:hover {
	/*background-color: #76AC38;*/
	filter: invert(58%) sepia(9%) saturate(2729%) hue-rotate(46deg) brightness(103%) contrast(85%);
}

.slotbtn {
	background-image:url("/_assets/content/dhw_icons/deleteCircleFull.svg");
	background-repeat: no-repeat;
	background-size: 20px;
	rotate: 45deg;
	filter: invert(100%) sepia(9%) saturate(7464%) hue-rotate(179deg) brightness(109%) contrast(107%);
}

li.slot:hover .slotbtn{
	background-image:url("/_assets/content/dhw_icons/deleteCircleFull.svg");
	filter: invert(89%) sepia(16%) saturate(241%) hue-rotate(202deg) brightness(91%) contrast(87%);
}

.angefragt, .bestaetigt {padding-left: 10px;}
.angefragt:before{
	background-image: url("/_assets/content/dhw_icons/info.svg");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	left: -10px;
	top: 3px;
	filter: invert(78%) sepia(91%) saturate(2303%) hue-rotate(338deg) brightness(95%) contrast(92%);
	position: relative;
	display: inline-block;
	content: "";
}
.bestaetigt:before{
	background-image: url("/_assets/content/dhw_icons/checkCircle.svg");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	left: -10px;
	top: 3px;
	filter: invert(58%) sepia(9%) saturate(2729%) hue-rotate(46deg) brightness(103%) contrast(85%);
	position: relative;
	display: inline-block;
	content: "";
}

.editicon {
	filter: invert(57%) sepia(0%) saturate(1580%) hue-rotate(249deg) brightness(94%) contrast(87%);
	width: 20px;
	margin-left: 10px;
	margin-top: 5px;
}
.editicon:hover{cursor: pointer;}

.closepopupicon {
	filter: invert(100%) sepia(91%) saturate(0%) hue-rotate(246deg) brightness(104%) contrast(101%);
	width: 15px;
}

.removeslot{
	filter: invert(100%) sepia(91%) saturate(0%) hue-rotate(246deg) brightness(104%) contrast(101%);
	width: 15px;
}

.dateicon{
	filter: invert(100%) sepia(91%) saturate(0%) hue-rotate(246deg) brightness(104%) contrast(101%);
	position: absolute;
	top: 87px;
	left: 280px;
	width: 20px;
}
.dateicon:hover{cursor: pointer;}
input#showdate:hover{cursor: pointer;}

.forwardicon{
	width: 15px;
	rotate: 270deg;
	
}
.backicon{
	width: 15px;
	rotate: 90deg;
}

select{
	background-image: url("/_assets/content/dhw_icons/arrow.svg");
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: 90% 50%;
}



/*CALNEDER********************************************************/

.calday.active{
	background-color: #C9C9DB;
	border: 1px solid #494C80 !important;
}

li.active, .calelement .confirm-btn, .calelement .submitbtn {
	background-color: #494C80 !important;
	color: #ffffff;
}

li.bookedslot{
	border-bottom: 1px solid #ffffff;
}

.calelement #confirm { color: #ffffff;}

.calelement #confirm, .calelement .confirm-btn {
	padding: 15px;
}

.calelement .confirm-btn, .calelement #deny-denying-btn {
	width: 200px;
	margin: auto;
}

.calelement #confirm:hover, .calelement .confirm-btn:hover, .calelement .genbtn:hover {
	background-color: #8789AA;
	cursor: pointer;
}

.calelement #deny-denying-btn{
	color: #494C80;
	text-decoration: underline;
}
.calelement #deny-denying-btn:hover{color: #8789AA; cursor: pointer;}

.calelement #confirm-wrap {
	display: none;
	background-color: #494C80;
	color: #ffffff;
	position: fixed;
	right: 0;
	width: 100%;
	text-align: center;
	z-index: 100 ;
}

.calelement #slotselect, .calelement #hide-slotselection {
	display: none;
}

.calelement .slotsection {
	border-bottom: 1px solid #ffffff;
	/*padding: 15px;*/
}

.calelement .slotsection *, .calelement .askeditsection * {
	color: #ffffff;
}

.calelement li.slot, .calelement li.popup-slot {
	align-items: center;
	gap: 10px;
}

.calelement li.slot:hover, .calelement li.pickedslot:hover, .calelement li.popup-slot:hover {
	color: #C9C9DB;
	/*background-color: #494C80;*/
}

.calelement li.pickedslot, .calelement li.popup-pickedslot {
	justify-content: space-between;
	padding: 5px 15px;
}

.calelement .popup-header {
	justify-content: space-between;
	padding: 15px;
}

.calelement .slotsection, .calelement ul.popup-slotselection, .calelement .askeditsection {
	padding: 15px;
}

.calelement ul#slotlist, .calelement ul#popup-slotlist {
	padding: 0!important;
	text-align: left;
}

.calelement ul#popup-slotlist li.bookedslot {
	padding: 15px;
}

.calelement .popup-confirm-wrap {justify-content: space-between;}

.calelement .popup-confirm, .calelement .oa-conordeny {column-gap: 5px; padding: 5px;}

.calelement .slotbtn {
	width: 20px;
	height: 20px;
	border-radius: 50px;
	padding-right: 5px;
}
.calelement .popup-btn, .calelement .oa-btn {
	width: 30px;
	height: 30px;
	border-radius: 50px;
}

.calelement .popup-btn {
	/*background-color: #ffffff;*/
}

.calelement table{
	border-spacing: 5px;
	table-layout:fixed;
	padding: 0px 10px;
}

.calelement tbody{
}

.calelement td.calday {
	width:50px;
	max-width:50px;
	height:50px;
	max-height:50px;
	white-space: nowrap;
	overflow-x: hidden;
	font-size:14px;
	font-weight:bold;
	padding: 5px;
	vertical-align: bottom;
}

.calelement.module_cal td.calday.open {
	border: 1px solid #D3D3D3;
	color: #000000;
}

.calelement.module_cal td.calday.open:hover {
	border: 1px solid #494C80;
	cursor: pointer;
}

.calelement td.calday.empty {
	background-color: #F2F2F2!important;
	border: none!important;
}

.calelement td.calday.feiertag {
	background-color: #D3D3D3;
	color:#888888;
}

.calelement .filter-wrap{
	border: 1px solid #D3D3D3;
	border-radius: 15px;
	padding: 10px;
}

.calelement ul.quickselect li {
	background-color: #F2F2F2;
	border-radius: 50px;
	margin: 10px;
	text-align: center;
	width:200px;
}

.calelement ul {
	color: #000000;
}

.calelement ul li:hover {
	cursor: pointer;
}

.calelement .calmonth{
	width:300px;
	height:380px;
	display: inline-block;
	border: 1px solid #D3D3D3;
	margin: 10px;
	/*padding: 10px;*/
}
.calelement .monthhead{
	border-bottom: 1px solid #D3D3D3;
	padding: 10px;
}
.calelement .monthheadinner{
	justify-content: space-between;
}

.calelement .month{
	cursor: pointer;
	position: relative;
	left: 220px;
	top: -25px;
}

.calelement .month.active{
	background-color: #494C80;
}

.calelement .weekheading th {
	text-align: center;
	color: #000000;
}

.calelement .monthtoggle{
	background-color: #D3D3D3;
	border-radius: 30px;
	width: 35px;
	height: 20px;
}


.calelement .monthtoggle.active .togglecircle{background-color: #C9C9DB; left: 17px;}

.calelement .togglecircle{
	background-color: #888888;
	border-radius: 30px;
	width: 15px;
	height: 15px;
	position: relative;
	top: 2.7px;
	left: 3px;
	transition: left 0.5s;
}

/**/

.calelement .calday .marks p{display: inline; height: 8px; position: relative;}
.calelement .calday .marks p:after{
	content: "\2022";
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size:25px;
	right: -30px;
	top: -33px;
}
.calelement .calday .marks {display: flex; flex-direction: column; position: absolute;}

.calelement .calday .marks2 p:after{right: -22px;}
.calelement .calday .marks3 p:after{right: -14px;}




.calelement.module_cal .calday .set, .calelement.module_asks .calday .set, .calelement.module_appointments .calday .set{color: #494C80;}
.calelement.module_cal .calday.set, .calelement.module_asks .calday.set, .calelement.module_appointments .calday.set{background-color: #C9C9DB;}

.calelement .calday .gebucht{color: #E6C927;}
.calelement .calday.gebucht{background-color: #F8EEBE!important;}

.calelement .calday .confirmed{color: #76AC38;}
.calelement .calday.confirmed{background-color: #C8E0AC!important;}


.calelement #statusmessage{
	background-color: #F8EEBE;
	display: none;
}
.calelement #successicon{
	background-color: #ffffff;
}

.calelement #errormessage{
	display: none;
}

.calelement #denypopup, .calelement #editconfirmpopup{
	background-color: #ffffff;
	display: none;
	position: fixed;
	width: 60%;
	height: 60%;
	top: 20%;
	left: 20%;
	z-index: 600;
	text-align: center;
}

.calelement #edit-popup{
	background-color: #494C80;
	display: none;
	position: absolute;
	z-index: 200;
	width: 280px;
	border-radius: 15px;
}
.calelement #edit-popup:before {
	content: "";
	color: #494C80;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #494C80;
	position: absolute;
	top: -10px;
	/*right: 105px;*/
}
.calelement #popup-exit:hover{
	cursor: pointer;
}

.calelement .flip-btn{
	display: block;
}
.calelement .flip-btn:hover{
	cursor: pointer;
}




/*BOOKING*/

.module_bookcal #cal-wrap{
	display: inline-block;
}

.module_bookcal #bookform-wrap{
	display: inline-block;
}

.module_bookcal .submitbtn{
	width: 200px;
	padding: 15px;
	border: none;
}

.module_bookcal .formelement, .module_asks .formelement, .module_appointments .formelement{
	border: 1px solid #D3D3D3;
	margin-bottom: 10px;
	padding: 10px;
}

.module_bookcal #bookform-wrap{
	border: 1px solid #D3D3D3;
}

.module_bookcal .bookfrom-heading{
	border-bottom: 1px solid #D3D3D3;
	padding: 10px 20px;
}

.module_bookcal .bookform{
	padding: 10px 20px;
}

.module_bookcal .bookform label{
	margin: 0px;
}

.module_bookcal .legende{
	margin: 0px 0px 10px 0px;
}

.module_bookcal .legende .legel{
	align-items: center;
}

.module_bookcal .legende .nv-square{ width: 15px; height: 15px; background-color: #D3D3D3; margin-right: 10px; }
.module_bookcal .legende .ft-square{ width: 15px; height: 15px; border: 1px solid #D3D3D3; margin-right: 10px; }
.module_bookcal .legende .bo-square{ width: 15px; height: 15px; background-color: #F9EBBD; margin-right: 10px; }
.module_bookcal .legende .bs-square{ width: 15px; height: 15px; background-color: #C8E0AC; margin-right: 10px; }


.calelement.module_bookcal td.calday.free {
	border: 1px solid #D3D3D3;
	color: #888888;
	background-color: #D3D3D3;
}

.calelement.module_bookcal .calday .set{color: #494C80;}
.calelement.module_bookcal .calday:hover .set{color: #494C80;}
.calelement.module_bookcal .calday.active .set{color: #494C80;}
.calelement.module_bookcal .calday.set{border: 1px solid #D3D3D3;}
.calelement.module_bookcal .calday.set:hover { border: 1px solid #494C80; cursor: pointer;}


.calelement.module_bookcal .calmonth{
	margin: 0px 0px 10px 0px!important;
	/*padding: 10px;*/
}


/*VIEWASKS*/

.calelement table.asktable{
	width: 100%;
	border-collapse: collapse;
	margin: 40px 0px;
}

.calelement table.asktable tr.asktablehead{
	border-top: 1px solid #D3D3D3;
}


/*.asktablesingle*/
.calelement table.asktable td{
	vertical-align:top;
}

.calelement table.asktable tr{
	border-bottom: 1px solid #D3D3D3;
	padding-top: 10px 0px;
}

.calelement table.asktable td{
	padding: 10px 0px;
}

.calelement table.asktable a{text-decoration: underline;}
.calelement table.asktable a:hover{cursor: pointer;}


/*OFFENE ANFRAGEN*/

.calelement .oa-btn {
	/*background-color: #494C80;*/
}

.module_asks option, .calelement option {
	left: 50px;
	top: -50px;
}

.calelement.module_asks .calday{border:1px solid #ffffff; }
.calelement.module_asks .calday.set:hover { border: 1px solid #494C80; cursor: pointer;}

.calelement.module_appointments .calday{border:1px solid #ffffff; }
.calelement.module_appointments .calday.set:hover { border: 1px solid #494C80; cursor: pointer;}

.calelement option:hover {
	background-color: #8789AA;
}

.tdhide {display: none;}

.asktable {}

.calelement table.asktable tr{
	border-top: 1px solid #D3D3D3;
	border-bottom: 0px;
	padding-top: 10px 0px;
}

.calelement.module_asks #edit-popup{
	background-color: #494C80;
	display: none;
	position: absolute;
	z-index: 200;
	border-radius: 15px;
}

.calelement td.nothide {display: flex;}
.calelement tr.asktablehead {display: none;}
.calelement tr.asktablehead th {font-weight: normal; color: #888888; padding: 5px 0px;}


/*.asktable td.asktableslot {padding: 0px!important;}*/
.asktable td.asktableklasse {padding: 10px 0px 0px 0px!important;}

.asktable td.oa-confirm-wrap {position: absolute;}
.calelement .oa-conordeny {
  position: relative;
  left: 250px;
  top: -55px;
}


#editcal-wrap .calmonth{margin: 0px 0px 10px 0px!important;}
#editcal-wrap {
	display: none;
	position: absolute;
	z-index: 300;
	background-color: #ffffff;
}



/*ONEPAGE TABLE STUFF*/

.calelement.viewasksmodule .onepagetheader * {
	color: #ffffff!important;
}
.calelement.viewasksmodule .onepagetheader {
	padding: 10px!important;
	background-color: #494C80!important;
}
.calelement.asksmodule .onepagetheader {
	padding: 10px!important;
	background-color: #E9BB24!important;
}
.calelement .onepagetable {
	border: 1px solid #D3D3D3!important;
}
.calelement .onepagetable .asktabledatum {
	padding-left: 10px!important;
}

/*RESPONSIVE***********************************************************************************/



@media screen and (max-width: 719px) {
	.calelement #confirm-wrap{top:0;}
}

@media screen and (min-width: 720px) {
	
	.mobileel{display: none;}
	
	.module_asks .csvlink{
		margin-top: 30px;
	}
	
	.csvlink{
		float: right;
	}
	
	#statusmessage{
		flex-direction: row;
		gap: 10px;
		padding: 15px;
	}
	.statusinner{text-align: left;}
	
	.calelement ul.quickselect {
		display: flex;
	}
	
	.calelement #confirm-wrap {
		width: 250px;
	}
	
	.module_cal.calelement .flip-btn{
		display: none;
	}
	
	.calelement.module_cal .monthheadinner{
		justify-content: center;
	}
	
	.tdhide {
		display: table-cell;
		visibility: hidden;
	}
	.calelement td.nothide {display: table-cell;}
	.calelement tr.asktablehead {display: table-row;}
	
	.asktable td.oa-confirm-wrap {position: static;}
	.calelement .oa-conordeny {position: static;}
	
	.formsection{display: flex; gap: 10px;}
	
	.calelement.asksmodule table.asktable {
	  margin: 0px;
	}


@media screen and (min-width: 960px){
	.calelement.module_bookcal .booking-wrap{display: flex; column-gap: 20px;}
}