:root {
	--black: #323232;
	--darkblue: #273150;
	--darkbluelight: #9398a7;
	--lightblue: #eeeff1;
	--red: #d6001c;
	--grey: #b3b3b3;
	--border-radius-gross: 15px;
}
.rental-container { max-width: 1170px; margin: 0 auto 150px auto; border-radius: var(--border-radius-gross); background: var(--lightblue); }

@media screen and (max-width:640px) {
	.rental-container  { margin: -15px; width: calc(100% + 30px); border-radius: 0; }				
	.rental-container  .rental-header { border-radius: 0 !important; }
}

/* HEADER PROGRESS */
.rental-container .rental-header { min-height: 103px; padding: 34px 23px; background: var(--darkblue); border-radius: var(--border-radius-gross) var(--border-radius-gross) 0 0; }
.rental-container .rental-header ul { display: flex; justify-content: space-between; margin: 0; padding: 0; overflow: hidden; }
.rental-container .rental-header ul li { position: relative; list-style: none; }
.rental-container .rental-header ul li:before { display: block; content: ""; position: absolute; left: 100%; top: 18px; width: 500px; height: 2px; background: var(--darkbluelight); }
.rental-container .rental-header ul li.past:before { background: var(--red); }
.rental-container .rental-header ul li > div,
.rental-container .rental-header ul li > a { display: flex; align-items: center; gap: 10px; padding: 0 17px; background: var(--darkblue); color: var(--darkbluelight); }
.rental-container .rental-header ul li.current > div,
.rental-container .rental-header ul li.current > a,
.rental-container .rental-header ul li.past > div,
.rental-container .rental-header ul li.past > a { color: var(--red); }
.rental-container .rental-header ul li > div .ico,
.rental-container .rental-header ul li > a .ico { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; padding: 0 1px 1px 0; color: white; background-color: var(--darkbluelight); border-radius: 50%; }
.rental-container .rental-header ul li.current > div .ico,
.rental-container .rental-header ul li.current > a .ico,
.rental-container .rental-header ul li.past > div .ico,
.rental-container .rental-header ul li.past > a .ico { background-color: var(--red); }

@media screen and (max-width:959px) {
	.rental-container .rental-header { min-height: 85px; padding: 15px 23px; }
	.rental-container .rental-header li { padding-bottom: 20px; }
	.rental-container .rental-header li > div .lbl, .rental-container .rental-header li > a .lbl { position: absolute; inset: auto -50% 0 -50%; font-size: 10px; color: white; text-align: center; }
}	
@media screen and (max-width:640px) {			
	.rental-container .rental-header  { border-radius: 0 !important; padding: 34px 36px; }
}


/* BODY */
.rental-container .rental-body { min-height: 600px; padding: 46px 100px; }
.rental-container .rental-body h3 { margin: 0; padding: 0 0 46px 0; }
@media screen and (max-width:959px) {
	.rental-container .rental-body { padding: 30px 36px; }
}

/*------| BODY:Object 								|------------------------------------------------------------------------------------------------------------------------------------*/
.rental-container .rental-body .rental-body-objects { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }
.rental-container .rental-body .rental-body-objects > div input { display: none; }
.rental-container .rental-body .rental-body-objects > div label { position: relative; display: block; padding: 50%; border-radius: var(--border-radius-gross); overflow: hidden; }
.rental-container .rental-body .rental-body-objects > div label .img { position: absolute; inset: 0; line-height: 1px; transition: inset .3s; }
.rental-container .rental-body .rental-body-objects > div label .img picture { display: block; width: 100%; height: 100%; }
.rental-container .rental-body .rental-body-objects > div label .img img { width: 100%; height: 100%; object-position: center; object-fit: cover; }
.rental-container .rental-body .rental-body-objects > div label:hover .img { inset: -20px; }
.rental-container .rental-body .rental-body-objects > div label .lbl { position: absolute; inset: auto 0 0 0; padding: 20px; background: white; font-size: 20px; font-weight: bold; color: var(--darkblue); text-align: center; }
.rental-container .rental-body .rental-body-objects label:before { display: none; }
.rental-container .rental-body .rental-body-objects label:after { display: none; }
.rental-container .rental-body .rental-body-objects:has(input:checked) > div { opacity: 0.3; }
.rental-container .rental-body .rental-body-objects:has(input:checked) > div:has(input:checked) { opacity: 1; }
.rental-container .rental-body .rental-body-objects:has(input:checked) > div:has(input:checked) label { box-shadow: 0 0 40px rgba(0,0,0,0.15); }

@media screen and (max-width:959px) {
	.rental-container .rental-body .rental-body-objects { grid-template-columns: 1fr; gap: 15px; }
	.rental-container .rental-body .rental-body-objects > div label { display: grid; grid-template-columns: 100px auto; gap: 10px; padding: 0; background: white; }
	.rental-container .rental-body .rental-body-objects > div label .img { position: relative; width: 100px; height: 100px; inset: 0 !important; }
	.rental-container .rental-body .rental-body-objects > div label .img picture { display: block; position: absolute; inset: 0; line-height: 1px; transition: inset .3s, width .3s, height .3s; }
	.rental-container .rental-body .rental-body-objects > div label:hover .img picture { inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
	.rental-container .rental-body .rental-body-objects > div label div.lbl { position: relative; align-self: center; padding: 15px; text-align: left; font-size: 15px; }		
}

/*------| BODY:Calendar								|------------------------------------------------------------------------------------------------------------------------------------*/
.rental-container .rental-body .rental-body-calendar { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.rental-container .rental-body .rental-body-calendar > div { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.rental-container .rental-body .rental-body-calendar > div:nth-child(3) { grid-template-columns: repeat(1,1fr); }
.rental-container .rental-body .rental-body-calendar > div:first-child { z-index: 20; }
.rental-container .rental-body .rental-body-calendar > div:has(.open) { z-index: 30; }
@media screen and (max-width:959px) {
	.rental-container .rental-body .rental-body-calendar { grid-template-columns: 1fr; }
}
@media screen and (min-width:960px) {
	.rental-container .rental-body .rental-body-calendar > div:nth-child(3) { grid-column-end: span 2; }
}
@media screen and (max-width:640px) {
	.rental-container .rental-body .rental-body-calendar > div { grid-template-columns: 1fr; }
	.rental-container .rental-body .rental-body-calendar > div  > * { grid-column-end: span 1 !important; }
}

.rental-container .rental-body .rental-body-calendar .rental-form-calendar { position: relative; }
@media screen and (max-width:640px) {
	.rental-container .rental-body .rental-body-calendar .rental-form-calendar { padding-bottom: 0px; }
}

.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar { display: none; position: absolute; left: 0; top: 75px; width: calc((100% - 30px) / 3 * 4 + 45px); padding: 25px; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.25); }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline { width: 100%; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table { width: 100%; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table thead th.prev { background: url('/pages/dyn/rental/img/left_red.svg') no-repeat left center transparent; background-size: 8px auto; text-indent: -1000px; overflow: hidden; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table thead .datepicker-switch { font-size: 16px; line-height: 43px; font-weight: 300; pointer-events: none; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table thead th.next { background: url('/pages/dyn/rental/img/right_red.svg') no-repeat right center transparent; background-size: 8px auto; text-indent: -1000px; overflow: hidden; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table thead tr:last-child th { font-size: 16px; line-height: 43px; font-weight: 300; color: var(--grey); }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table thead th.prev.disabled, & th.next.disabled { filter: grayscale(1); pointer-events: none; opacity: 0.25; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td { background: none !important; z-index: 2; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td.disabled,
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td.old { font-size: 16px; line-height: 43px; font-weight: 300; color: var(--grey); pointer-events: none; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(.disabled) { position: relative; font-size: 16px; line-height: 43px; font-weight: 300; color: var(--black); background: none !important; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(.disabled).active { color: white !important; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(.disabled):before { display: none; content: ""; position: absolute; z-index: -1; left: calc(50% - 16px); top: calc(50% - 18px); width: 34px; height: 34px; border-radius: 50%; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(.disabled).today:before { display: block; background: var(--lightblue); }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(.disabled).active:before { display: block; background: var(--red); }

.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(:nth-child(N+6)) { position: relative; color: var(--black); }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(:nth-child(N+6)).blocked { pointer-events: none; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(:nth-child(N+6)).blocked:after {
	display: block; content: ""; position: absolute; z-index: -1; left: calc(50% - 12px); top: calc(50% - 1px); width: 26px; height: 2px; background: red; transform: rotate(-45deg); transform-origin: 50% 50%;
}
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar .datepicker-inline .datepicker-days table tbody td:not(:nth-child(N+6)).disabled:not(.blocked) { pointer-events: none; color: var(--grey); }


@media screen and (min-width:641px) {
	.rental-container .rental-body .rental-body-calendar .rental-form-calendar.open .calendar { display: block; z-index: 10; }
}
@media screen and (max-width:640px) {
	.rental-container .rental-body .rental-body-calendar .rental-form-calendar.open .calendar { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; position: fixed !important; z-index: 100; inset: 78px 0 0 0; width: auto; padding: 35px; background: rgba(0,0,0,0.6); border-radius: 0; }
	.rental-container .rental-body .rental-body-calendar .rental-form-calendar.open .calendar > div { width: 100%; padding: 25px; background: white; }
	.rental-container .rental-body .rental-body-calendar .rental-form-calendar.open .calendar > div:first-child { border-radius: 5px 5px 0 0; padding-bottom: 0; }
	.rental-container .rental-body .rental-body-calendar .rental-form-calendar.open .calendar > div:last-child { border-radius: 0 0 5px 5px; }
}

.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding-top: 24px; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar-legend > div { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 300; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar-legend > div span:first-child { display: block; width: 11px; height: 11px; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar-legend > div.available span:first-child { background: var(--black); }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar-legend > div.blocked span:first-child { position: relative; border: 1px solid var(--black); }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar-legend > div.blocked span:first-child:before { display: block; content: ""; position: absolute; z-index: -1; left: calc(50% - 6px); top: calc(50% - 0px); width: 12px; height: 1px; background: red; transform: rotate(-45deg); transform-origin: 50% 50%; }
.rental-container .rental-body .rental-body-calendar .rental-form-calendar .calendar-legend > div.disabled span:first-child { background: var(--grey); }

.rental-container .rental-body .rental-body-calendar .rental-form-time { position: relative; }
.rental-container .rental-body .rental-body-calendar .rental-form-time .time { display: none; position: absolute; right: 0; top: 75px; min-width: 100%; padding: 25px 0; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.25); max-height: calc(50px + (8 * 38px)); overflow: hidden auto; }
.rental-container .rental-body .rental-body-calendar .rental-form-time .time ul { margin: 0; padding: 0; }
.rental-container .rental-body .rental-body-calendar .rental-form-time .time ul li { padding: 0 30px; font-size: 18px; font-weight: 300; line-height: 37px; text-align: center; color: var(--schwarz); cursor: pointer; list-style: none; }
.rental-container .rental-body .rental-body-calendar .rental-form-time .time ul li:not(:last-child) { border-bottom: 1px solid var(--grey); }
.rental-container .rental-body .rental-body-calendar .rental-form-time .time ul li.disabled { color: var(--grey); pointer-events: none; }
.rental-container .rental-body .rental-body-calendar .rental-form-time .time ul li.disabled2 { color: var(--grey); pointer-events: none; }
@media screen and (min-width:641px) {
	.rental-container .rental-body .rental-body-calendar .rental-form-time.open .time { display: block; }
}
@media screen and (max-width:640px) {
	.rental-container .rental-body .rental-body-calendar .rental-form-time.open .time {
		display: flex; align-items: center; justify-content: center; position: fixed !important; z-index: 100; inset: 78px 0 0 0; width: auto; max-height: calc(100vH - 78px); padding: 35px; background: rgba(0,0,0,0.6); border-radius: 0;
		& > div {
			width: 100%; max-width: 150px; max-height: 100%; overflow: auto; padding: 25px; background: white; border-radius: 5px;
		}
	}
}

.rental-container .rental-body .rental-body-calendar .rental-form-disabled { pointer-events: none; }
.rental-container .rental-body .rental-body-calendar .rental-form-disabled label { background: rgba(255,255,255,0.25); }
.rental-container .rental-body .rental-body-calendar .rental-form-disabled input { display: none; }

/*------| BODY:Address								|------------------------------------------------------------------------------------------------------------------------------------*/
.rental-container .rental-body .rental-body-address > div {
	display: grid; grid-template-columns: repeat(2,1fr); gap: 15px 30px; width: 80%;

	@media screen and (max-width:959px) {
		& {
			width: 100%; grid-template-columns: 1fr;
			& > label { grid-column-end: span 1; }
		}
	}
}

/*------| BODY:Summary								|------------------------------------------------------------------------------------------------------------------------------------*/
.rental-container .rental-body .rental-body-summary > div {
	display: grid; grid-template-columns: repeat(2,1fr); gap: 30px;
	& > div {
		background: white; border-radius: 5px; padding: 20px;

		&.rs-object {
			position: relative; display: grid; grid-template-columns: 150px auto; gap: 35px; padding-right: 62px;
			& img { width: 150px; height: 150px; object-position: center; object-fit: cover; border-radius: 5px; overflow: hidden; }
			& .lbl {
				align-self: center;
				& > div:first-child { font-size: 18px; font-weight: bold; }
				& > div:last-child { font-size: 30px; font-weight: bold; }
			}
		}

		&.rs-step2 {
			position: relative; display: grid; grid-template-columns: 1fr; gap: 35px; padding-right: 62px;
			& .rs-title { font-weight: bold; padding-bottom: 7px; }
		}

		&.rs-step3 {
			position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; padding-right: 62px;
			& .rs-title { font-weight: bold; }
		}
		
		& > a {
			position: absolute; top: 15px; right: 15px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--red); border-radius: 50%;
			& img { width: 18px !important; height: 18px !important; }
		}
	}

	@media screen and (max-width:640px) {
		& {
			grid-template-columns: 1fr;
			& .span-2 { grid-column-end: span 1; }
			& .rs-object {
				display: block !important;
				& .img { display: none; }
				& .lbl > div:first-child { display: none; }
				& .lbl > div:last-child { font-size: 20px !important; }
			}
		}				
	}
}

.rental-container .rental-body .rental-body-end > div { display: grid; grid-template-columns: auto 370px; gap: 110px; }
.rental-container .rental-body .rental-body-end > div > div.left { font-size: 18px; font-weight: 300; }
.rental-container .rental-body .rental-body-end > div > div.left .knopf { padding-top: 40px; }
.rental-container .rental-body .rental-body-end > div > div.right { background: white; border-radius: 5px; padding: 30px; }
.rental-container .rental-body .rental-body-end > div > div.right > div:not(:last-child) { padding-bottom: 30px; }
.rental-container .rental-body .rental-body-end > div > div.right p { font-size: 18px; font-weight: 300; }
.rental-container .rental-body .rental-body-end > div > div.right p:not(:last-child) { padding-bottom: 10px; }
.rental-container .rental-body .rental-body-end > div > div.right p b { font-size: 20px; font-weight: 700; }
.rental-container .rental-body .rental-body-end > div > div.knopf { display: none; }

@media screen and (max-width:640px) {
	.rental-container .rental-body .rental-body-end > div { grid-template-columns: 1fr; gap: 30px; }
	.rental-container .rental-body .rental-body-end > div > div.left .knopf { display: none; }
	.rental-container .rental-body .rental-body-end > div > div.knopf { display: block; }
	.rental-container .rental-body .rental-body-end > div > div.knopf .btn { width: 100%; }
}

/*------| CONFIRM/DENY								|------------------------------------------------------------------------------------------------------------------------------------*/
.rental-container .rental-cd { padding: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 30px; }
.rental-container .rental-cd table td:first-child { font-weight: bold; padding-right: 16px; }
.rental-container .rental-cd button { margin-top: 36px; width: 100% !important; }
.rental-container .rental-cd h3 { margin-top: 36px; }

/*------| FOOTER										|------------------------------------------------------------------------------------------------------------------------------------*/
.rental-container .rental-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 100px; padding: 30px 100px; }
.rental-container .rental-footer a { display: flex; align-items: center; gap: 6px; color: var(--darkblue); text-decoration: none; font-size: 18px; font-weight: bold; }
.rental-container .rental-footer a img { height: 14px; }
@media screen and (max-width:959px) {
	.rental-container .rental-footer  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 30px 15px; }
	.rental-container .rental-footer .btn { padding: 10px 0 12px 0; }
}

/*------| OTHER										|------------------------------------------------------------------------------------------------------------------------------------*/
.rental-container  .btn { padding: 10px 32px 12px 32px; text-align: center; justify-content: center; }

.rental-container .span-1 { grid-column-end: span 1; }
.rental-container .span-2 { grid-column-end: span 2; }
.rental-container .span-3 { grid-column-end: span 3; }
.rental-container .span-4 { grid-column-end: span 4; }

label.rental-input { display: flex; flex-wrap: wrap; height: 65px; padding: 10px 15px; background: white; border-radius: 5px; }
label.rental-input span { display: block; width: 100%; order: 1; font-size: 15px; line-height: 20px; font-weight: 300; color: var(--grey); }
label.rental-input input { width: 100%; order: 2; padding: 0; border: 0; font-size: 18px; line-height: 22px; font-weight: 400; color: var(--black); }
label.rental-checkbox {	display: block; }
label.rental-checkbox > span { position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; height: 65px; padding: 10px 0; cursor: pointer; order: 1; font-size: 18px; line-height: 22px; font-weight: 400; color: var(--black); }
label.rental-checkbox.rental-checkbox-small > span { height: 45px; }
label.rental-checkbox input { display: none; }
label.rental-checkbox > span:before { display: block; content: ""; width: 24px; height: 24px; background: white; border-radius: 5px; }
label.rental-checkbox > span:after { display: block; content: ""; position: absolute; left: 7px; top: calc(50% - 10px); transform: rotate(45deg); width: 6px; height: 12px; border-style: solid; border-width: 0 4px 4px 0; border-color: white; }
label.rental-checkbox input:checked + span:before { background: var(--red); }

.block-overlay { display: none; position: absolute; z-index: 1000000; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.5s; }
body > .block-overlay { position: fixed; }
.block-overlay > div { position: absolute; left: 0; top: 50%; right: 0; margin: -24px 0 0 0; font-size: 48px; line-height: 48px; text-align: center; }
.block-overlay.show { display: block; opacity: 1; }
	
.rental-container .d-none { display: none !important; }
.rental-container .mt-3 { margin-top: 1rem; }
.rental-container .mt-4 { margin-top: 1.5rem; }

.rental-container .py-15 { padding-top: 15px; padding-bottom: 15px; }
.rental-container .pt-45 { padding-top: 45px; }