/*
CYCLERENT webshop3 CSS
project: period based - 2402 - Dam Event Bike
version: 1.24
date: 2025-11-18
*/

@import "WS3-keukenhof.css";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body {  
	
	
	
	
	--selected-color: #FFFFFF;
	--selected-backcolor: #00457c;
	
	--link-font:var(--button2-font);
	--link-fontSize:var(--main-fontSize);
	--link-fontWeight:500;
	--link-color: var(--main-color1);
	--link-colorHover:var(--main-color1);
	--link-decoration: none;
	--link-decorationHover: none;
	--link-transition: all .2s ease-in-out;
	
	
	--input-area-color:var(--main-color1);
	--input-area-backcolor:#E6EFFF;
	--input-area-padding:5px;
	--input-area-border:2px solid var(--main-color1);
	--input-area-height: var(--input-selectHeight);
	--input-area-color2:#777777;
	--input-area-borderRadius:20px;
	
	--textarea-focusHeight: 100px;
	
	--area-backcolor:rgba(255, 213,0, 0.1) !important;
	
	--area-border: 0 solid #e7ded3;
	--area-notAvailable-backcolor:#ffd6d6;
	
	
	--info-color:#FFFFFF;
	--info-colorback:#4A69BD;

	--disabled-color: #D3D3D3;
	--disabled-backcolor: #ACACAC;
	
	--header-color:var(--main-color2);
	--header-backcolor:var(--main-backcolor);
	--header-fontSize:60px;	
	--header-height:inherit;
	--header-imageHeight:300px;	
	--header-transition:opacity 1s ease 1s;
	--header-shadow:none;
	
			
	--itemtype-sold:#FF0000;
	--itemtype-max:#FFA500;
	
	--line-color:#acacac;
	--line-border:1px solid var(--line-color);
	
	
	--icon-loading: url(https://cdn.cyclerent.com/CR/loading/spinner-round/spinner-00457C.svg);
	--icon-calender: url(https://cdn.cyclerent.com/CR/calendar/calendar-00457c.svg);
	--icon-calenderHover: url(https://cdn.cyclerent.com/CR/calendar/calendar-ffffff.svg);
	--icon-calenderDisabled: url(https://cdn.cyclerent.com/CR/calendar/calendar-D3D3D3.svg);	
	
	--label-backImage:url(https://cdn.cyclerent.com/CR/background/labels/label-slanted-FFD400.svg); /* center center no-repeat;*/
	--label-backImageSize:100% 100%;
	--action-backImage:url(https://cdn.cyclerent.com/CR/background/labels/label-rounded-inside-FFD400.svg);
	--action-backImageSize:contain;
	
}
/*temp*/
.btn-primary {
    color: var(--button1-color);
    background-color: var(--button1-backcolor);
    border: var(--button1-border);    
    font-size: var(--button1-fontSize);
	font-weight:var(--button1-fontWeight);
	padding:var(--button1-padding);	
}
.btn-primary:hover {
    color: var(--button1-colorHover);
    background-color: var(--button1-backcolorHover);
    border: var(--button1-borderHover);
}

.input-personal-details .form-select.requiredError {border-color: var(--error-color);}


.buttonPromotionInfoPopupCloseBottom {background-color: var(--button1-color);color: var(--button1-backcolor);}
.btnMoreInfo.buttonMedium {background-color: var(--button2-backcolor);color: var(--button2-color);}

.link, .link:hover {border-bottom:2px solid transparent;}
.link .linkBody {display: inline-flex;gap: var(--gap);align-items: center;flex-wrap: nowrap;}
.link .linkBody .linkIcon  {display: inline-flex;width: 18px;height: 44px;background-image: url(https://cdn.cyclerent.com/CR/arrow/arrow-right.svg);background-size: 18px 18px;background-repeat: no-repeat;    background-position:center center;border-bottom: 2px solid transparent;}
.link .linkBody .linkText {display: flex;align-items: center;border-bottom:2px solid transparent;}
.link:hover .linkBody .linkText {border-bottom:2px solid var(--link-colorHover);}
.change-link, .change-link:hover,.change-link:hover .linkBody .linkText {border-bottom: 2px solid transparent;}
.change-link .linkBody .linkIcon  {display: none;}
/*
.select2-custom-chevron {/*background-color: #ffffff;height: 40px;width: 40px;display: flex;justify-content: center;align-items: center;border-radius: 50%;*/}
.select2-custom-chevron svg {color: var(--input-color);}
*/

/*header*/
/*#header {width: 100%;max-width:100%;height: auto;float: inherit;}*/
/*#headerText {max-width: 50%;float: left;}*/
#header h1 {color: #0077D6;text-transform: uppercase;margin-top: 1rem;font-size: 2.375rem;}
#header .logo {flex: 0 0 54%;max-width: 54%;float: left;}
.logo img {flex: 0 0 45%;max-width: 45%;	}
.logo img {margin: 1rem 1rem 1rem 0;}
header h1, .logo, .knop, .oerol, footer p {padding-right: 0.9375rem;padding-left: 0.9375rem;}

/*rows*/
/*#header .pageLogo {width: 100%;height: 80%;max-height: 100%;}
#header .pageTitle {display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: center;column-gap: 8px;font-size: 250%;}
#header .page-row-title {display: flex;align-items: center;justify-content: center;flex-direction: row;flex-wrap: nowrap;}
#header .page-row-logo {display: flex;align-items: center;flex-direction: column;flex-wrap: nowrap;justify-content: center;width: 30%;}
#header .page-row-logo .pageLogoImage {height: 100%;width:100%;background-repeat: no-repeat;background-size: contain;background-position: center;}
#header .page-row-lang {display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: center;width: 30%;}*/
/*#page-top{flex-direction:column;}*/

/*row1*/
#header #page-row1 .pageLogoTop {display: none;}
#page-row1 .page-row-title {display: flex;align-items: center;justify-content: center;flex-direction: row;flex-wrap: nowrap;}


/*#page-company-details {display: flex;flex-direction: column;}
img#companyLogo {height: auto;width: 114px;}*/
/*row1
#page-row1 {max-width:100%;}*/
/*row2*/
#page-top #page-row2 {display: flex;}


/*
#page-row2 {max-width:100%;}
#page-row2 .page-row-title {width: 40%;}
.page0 #page-image {display:none;}
*#header {height: inherit;background-color: #ffffff;border-top: 8px solid var(--base-alt-color);box-shadow: none !important;}
#page-top #page-row2 #page-logo {display: flex;align-items: center;}
#page-top #page-row2 #page-logo #partnerLogo {display: none;}*/

#page-company #page-title {display: none;}
.scroll #header {box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 50%);}
#headerContent {background-color: var(--header-backcolor);color:var(--header-color);border-bottom:var(--line-border);}
.partnerTitle {background-image: var(--logo);background-size: contain;background-repeat: no-repeat;}
#partnerTitle p, .partnerHeading {display: none;}




/*icon*/
.iconBackground, .searchHolidayAddressIcon {background-color: #ffffff;height: 40px;width: 40px;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center;}
/*general*/
/*.form-select {border-bottom: var(--input-area-border);background-color:var(--input-area-backcolor);color: var(--button2-backcolorHover);}*/
a, .phoneNumber, .viewLoctionInMap,.change-link {color: var(--link-color);text-decoration: var(--link-decoration);}

/*button*/
.button.next-step .buttonBody{flex-direction: row-reverse;gap: var(--gap);}
.next-step .buttonHead {
    display: inline-flex;
	width: 18px;    
	height: 44px;    
    background-image: url(https://cdn.cyclerent.com/CR/arrow/arrow-right-FFFFF.svg);
    background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center left;    
}
.next-step:hover .buttonHead{transform: translateX(10px);}
/*booking summarry*/
.booking-summary {color: var(--main-color2);}

/*intro*/
/*#introPageContnet, #introPageContent {padding: var(--gap);max-width: 1024px;}*/

/*page*/
/* action text */
#lblCyclePromotion {color: var(--main-color2);display: flex;align-items: center;justify-content: flex-start;margin-left: -25px;gap: var(--gap);}
#lblCyclePromotion #lblCyclePromotionAction {color: var(--main-color2);font-weight:var(--title-fontWeight);background:var(--action-backImage);background-size:var(--action-backImageSize);background-repeat: no-repeat;background-position: center;rotate: -3deg;margin-top:-10px;height: 40px;width: 75px;display: flex;align-items: center;justify-content: center;margin-right: 10px;}

/*step1*/
#lblDateRange{display:none;}

/*step2*/
.bikeRentWithCountOfDays {display: none;}
.lblPromotionInfoPopupHeader span {color:var(--main-color4);}
/* date section */
 .contact-info {display:none;font-size: var(--main-medium-fontSize);line-height: var(--main-lineHeightAlt);}
 .day-of-week {color: var(--main-color3);}
 /*.date-info, .skeletionLoader {line-height: var(--main-lineHeightAlt);}
 .calendar-icon {color: var(--main-color1);}*/
 
/*step3*/
.itemGroupTypeFilter label {background-color: var(--input-area-backcolor);border-color: var(--input-area-backcolor);font-weight: var(--input-fontWeight);font:var(--main-font);font-size:80%;line-height:1;padding: 4px 10px;}

.moreInfoAccessoriesText::after {background-color: var(--base-color);}
	
/*step5: pickup location*/
/*#arrivalSeprateTimeDropdown {display: flex;gap: 5px;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;}*/
#arrivalSeprateTimeDropdown .form-select{width: auto;}
#divTitleSelection .buttonLabel {padding: 4px 10px;line-height: 1;font-weight: 400;font: var(--main-font);background-color: var(--input-area-backcolor);border-color: var(--input-area-backcolor);line-height: 1;font-size: 80%;}
#divTitleSelection .rdbOptionsInline:checked + label, #divTitleSelection .rdbOptionsInline + label:hover {background-color: var(--button2-backcolorHover);color: var(--button2-colorHover);border-color: var(--button2-backcolorHover);}
ul.arrivalTimeDropDown {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;gap: var(--gap);padding: var(--gap);color: var(--input-color);}
ul.arrivalTimeDropDown li {width:inherit;background-color: var(--input-area-backcolor);border-radius: 30px;padding: inherit;cursor: pointer;width:14%;min-width:65px;text-align:center;}
.lpid1 ul.arrivalTimeDropDown li {width: calc(50% - var(--gap));}
.searchHolidayAddressIcon {color: var(--input-color);}
		


/*****START-FINISHED-STYLES*****/
body {font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;padding-top: 0px;padding-right: 0 !important;}
a{color:var(--link-color);border:0 none;letter-spacing:-0.18px;font-family:var(--link-font);font-size:var(--link-fontSize);font-weight:var(--link-fontWeight);text-decoration: var(--link-decoration);}
a:hover,a:focus{color:var(--link-colorHover);border-bottom:2px solid var(--link-colorHover);text-decoration: var(--link-decorationHover);transition: var(--link-transition);}
.h1, h1 {font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);}

/*header*/
#header {justify-content: center;max-width: 100%;border-top: 8px solid var(--base-alt-color);}
#header #headerInfo #templateHeader {max-width: var(--contentWidthMax);flex-direction: row-reverse;gap:calc(var(--gap) * 3);padding: calc(var(--gap) * 2) calc(var(--gap) * 1.5);}
#header #headerInfo #page-top{flex-direction: column;}
#header #headerInfo #page-top #page-row2 #page-logo #partnerLogo {display:none;}
#header #headerInfo #page-top #page-row2 #page-logo #page-title {padding-top: 10px;font-weight: var(--main-fontWeight);font-size: var(--main-fontSize);}

/*active language menu:vertical*/
#header #page-top #page-row1 #page-menu {display:flex;width: 100%;border-bottom: 1px solid var(--line-color);}
#header #page-top #page-row1 #page-menu-lang {display:flex;} 
#header #page-top #page-row1 #page-menu #page-menu-title {display:flex;color: var(--base-color);padding-bottom: 12px;font-weight: 500;border-bottom: 5px solid var(--base-color);}
#header #page-top #page-row1 #page-menu #page-menu-lang {border-left: 1px solid var(--line-color);}
#header #page-top #page-row1 #page-menu-lang #langVertical{display:flex;}
#header #page-top #page-row1 #page-menu-lang .dropdown,#header .dropdown>ul>li>a {font:var(--button2-font);font-size: var(--button2-fontSize);font-weight: var(--button2-fontWeight);width: 55px;background-position: 10px center;}
#header #page-top #page-row1 #page-menu-lang #langVertical .langAbbr {display: none;}
/*german language disabled*/
#header #page-top #page-row1#page-menu-lang .lang2 .dropdown, #header #page-top #page-row1 #page-menu-lang #langVertical ul li a#flagDE {display:none;} 

/*footer*/
#footer {text-align: center;background-color: var(--footer-backcolor);color: var(--footer-color);margin-top: calc(var(--gap) * 2);padding: 0;}
/*merchant specific*/
#footer .top-footer{display: flex;justify-content: center;padding-top: calc(var(--gap) * 1);}
#footer .top-footer .inner {border-bottom: 1px solid var(--footer-color);flex-wrap: wrap;padding-bottom: calc(var(--gap) * 2);row-gap: calc(var(--gap) * 3);}
#footer .top-footer .inner.flex.jucosp {display: flex;flex-direction: row;justify-content: space-between;width: 100%;max-width: var(--contentWidthMax);}
#footer .top-footer .logo img {mix-blend-mode: luminosity; max-width: 128px;height:auto;}
#footer .top-footer .social {display: flex;gap: calc(var(--gap) * 3.4);}
#footer .top-footer .social img {max-height: 25px;max-width: 25px;}
#footer .holder {margin: auto;margin-top: 50px;max-width: var(--contentWidthMax);width: 100%;}
#footer .columns-4 {grid-template-columns: 1fr 1fr 1fr 1fr;text-align: left;}
#footer .widget:first-child .title {display: none;}
#footer .title {color: var(--footer-color);font-family: var(--footer-font);font-size: var(--main-fontSize);margin-bottom:var(--gap);}
#footer a, footer p {color: var(--footer-color);font-size: var(--footer-fontSize);}
#footer a:hover{color:var(--link-color);border-bottom: 0 none;}

#footerInfo {max-width:100%;}

/*CR footer*/
#footerInfo #footerCR {height: 50px;background-color: var(--footer-color);color: var(--footer-colorAlt);font-size: var(--footer-fontSize);font-weight: 700;}
#footerInfo #footerCR .CRtext {display: flex;column-gap: calc(var(--gap) * 2);}
#footerInfo #footerCR .sep {display:none;}
#footerInfo #footerCR a {color: var(--footer-colorAlt);}

#footer .top-footer .inner.flex.jucosp, #footer .grid {display: none;}
.step0 #footer .top-footer .inner.flex.jucosp,.step800 #footer .top-footer .inner.flex.jucosp {display: flex;}
.step0 #footer .grid,.step800 #footer .grid {display: grid;}
.step0 #footer .top-footer,.step800 #footer .top-footer {padding-top: calc(var(--gap) * 5);padding-bottom: calc(var(--gap) * 4);}

/*general styles*/
.grid {display: grid;gap:calc(var(--gap) * 2);}

/*general elements*/

/*summary*/
#bookingSummary {color: var(--main-color2);border-radius: var(--popup-borderRadius);box-shadow:var(--popup-shadow);border: 0 none;}
#startDateDisplay .time-label, #hourTimeDisplay{display:block;}
#upToDateDisplay,#endDateDisplay {display: none;}

/*step0*/
#introPageContent #btnNextStep0 {display: none;}
#introPageContent #howItWorks {font-size: var(--main-fontSize);}
.isMobile.step0 #footer {display: block;padding: 0 var(--gap);}

/*step1-event:period selection*/
/*general elements:calendar*/
/*.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] {border-radius: 50%;}*/

/*step2*/
#promotionSection {display: none;}

.divInputAmount {   
    font-family: var(--main-font);    
	height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;}
.numberAmountLabel {
    font-weight: 100;
    color: var(--main-color3);
    font-size: var(--main-medium-fontSize);
}	

/*step3*/
#lblReservationPageHeader,#luggageTransportMsg,#holidayAddressDiv, .arrivalHoursDropdownList {display:none;}

/* */
@media (min-width:640px) and (max-width:1023px){  
	body {
		--main-fontSize:16px;
	}
}
@media (min-width:480px) and (max-width:639px){
	body {
		--main-fontSize:16px;
	}
	
	#btnStartNewReservation {max-width: 100%;margin: var(--gap) 0;float:none;}
}	
@media (min-width:320px) and (max-width:479px){ 
	body {
		--main-fontSize:15px;	
		--main-small-fontSize:11px;
		--main-medium-fontSize:14px;
		--main-large-fontSize:16px;
		--main-larger-fontSize:18px;
			
		--title-margin-bottom:15px;
	
		--button1-height:50px;
		--button1-padding: 2px 15px;
		--button1-borderRadius:25px;
		
		--gap:5px;
	}
	
	#header {padding:0;}
	#header #companyLogo {width: 70px;}
	
	.itemGroupTypeFilter label {padding: 2px 8px 6.75px 8px;margin-bottom:0;}
	#btnStartNewReservation {max-width: 100%;margin: var(--gap) 0;float:none;}
	#headerinfo,#headerInfo {gap: var(--gap);padding: 0;max-width: 100%;}
	#header .dropdown {height: 30px;line-height: 30px;}
	
	
	
	#page-top #page-row1 #page-menu #page-menu-title {padding-bottom: 5px;}
	#page-top #page-row2 #page-logo #page-title {padding-top: 5px;}
	
	
	.partnerTitle {width: 100px;height: 40px;}
}

/*****END-FINISHED-STYLES*****/