
/*
CYCLERENT webshop3 CSS
project: period based - 2007 - van Dam
version: 1.00
date: 2026-01-15
*/

@import "WS3-vandam1.css";

body {  
	/*--main-color: rgb(107, 113, 139);
	--main-font: "Instrument Sans", sans-serif;
	--main-fontSize:18px;	
	--main-fontWeight: 400;
	--main-lineHeight:160%;
	--main-small-fontSize:12px;
	--main-medium-fontSize:16px;
	--main-large-fontSize:22px;
	--main-larger-fontSize:24px;
	--main-backcolor:#F1F3EF;
	--main-border-color:#CCCCCC;
	--main-color1:#0061FE;
	--main-color2:#0D2481;
	--main-color3:#6B718B;
	--main-color4:#FFD832;
	--main-lineHeightAlt:130%;	*/
	
	--error-color:#FF0000;
	--warning-color:#ff9000;
	
	/*--title-color: var(--main-color2);
	--title-font: "stolzl", sans-serif; 	
	--title-fontSize: 24px;
	--title-letter-spacing: -1px;
	--title-fontWeight: 700;
	--title-margin-bottom:20px;*/
	
	/*--subtitle-color: var(--main-color2);
	--subtitle-font: var(--main-font);	
	--subtitle-fontSize:18px;	
	--subtitle-fontWeight: 700;
	--subtitle-margin-bottom:inherit;*/
	
	/*--button1-color:#FFFFFF;	
	--button1-colorHover:#FFFFFF;
	--button1-backcolor:var(--main-color1);
	--button1-backcolorHover:#004ECB;
	--button1-font: "stolzl", sans-serif; 
	--button1-fontSize: 20px;
	--button1-fontWeight:500;
	--button1-height:60px;
	--button1-padding: 8px 20px;
	--button1-border:none;	
	--button1-borderHover:none;
	--button1-borderRadius:30px;
	--button1-shadow: none;*/
/*
	--button2-color:var(--main-color1);	
	--button2-colorHover:#FFFFFF;
	--button2-backcolor:#FFFFFF;
	--button2-backcolorHover:var(--main-color1);
	--button2-font: "stolzl", sans-serif; 
	--button2-fontSize: var(--main-medium-fontSize);
	--button2-fontWeight:500;
	--button2-height:40px;	
	--button2-padding: 5px 10px;
	--button2-border:2px solid var(--main-color1);
	--button2-borderHover:2px solid var(--main-color1);
	--button2-borderRadius:20px;	
	--button2-shadow: 0px 0px 0px 0px rgb(0 0 0 / 15%);
	--button2-transition: background-color 0.3s, color 0.3s;
	*/
	
	
	--buttonCancel-color: #000000;
	--buttonCancel-backcolor: #ffffff;
	--buttonCancel-border: 1px solid #000000;
	--buttonCancel-colorHover: #FFFFFF;
	--buttonCancel-backcolorHover: #00457c;
	--buttonCancel-borderHover: 0 solid #000000;
	
	--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;
	*/
	--input-color:var(--main-color);
	--input-font: var(--main-font);	
	--input-fontSize: 16px; 
	--input-fontWeight:700;
	--input-lineHeight:28px;	
	--input-backcolor:#FFFFFF;	
	--input-border:1px solid var(--base-color);
	--input-border-focus:1px solid var(--input-color);
	--input-borderRadius:0;	
	--input-padding: 10px 5px;
	--input-placeholder-color:transparent;
	--input-selectHeight: 48px;
	
	--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;
	
	/*
	--calender-fontSize:12px;
	--calender-color:#0061FE;
	--calender-color2:#0D2481;
	--calender-backcolor:#E6EFFF;
	--calender-current-color:#FFFFFF;
	--calender-current-backcolor:#00457c;
	--calender-closed-backcolor: #FCD4D4;
	--calender-event-backcolor:#F9D9B1;
	*/
	--info-color:#FFFFFF;
	--info-colorback:#4A69BD;

	--promo-color:var(--main-color);
	--promo-colorback: transparent;
	--promo-border:1px dotted #CCCCCC;
	
	--disabled-color: #D3D3D3;
	--disabled-backcolor: #ACACAC;
	
	/*
	--header-color:var(--main-color2);
	--header-backcolor:transparent;
	--header-fontSize:60px;	*/
	
	/*
	--page-top-backcolor:#2c2c2c;
	--page-row1-color:#ffffff;
	--page-row1-backcolor:#2c2c2c;	
	--page-row2-color:#00457c;
	--page-row2-backcolor:#ffffff;
	--page-row2-borderbottom:0 solid #35a4d8;
	*/
	
	--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);
}
/*#divBtnClosePaymentAfterPage {display: none;}*/
/*end temp*/
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);}	
.h2,h2{font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);color: var(--title-color);}
.input-personal-details .form-select.requiredError {border-color: var(--error-color);}

 ul ::marker{color:var(--main-color1);}
 
.select2-selection:focus,.form-select:focus, textarea:focus, .radio-container:hover{border: var(--input-border-focus);}
 textarea::placeholder {font-weight: var(--main-fontWeight);font-size: var(--main-medium-fontSize);}
.buttonPromotionInfoPopupCloseBottom {background-color: var(--button1-color);color: var(--button1-backcolor);}
.btnMoreInfo {
    height: 40px;
    border-radius: var(--button2-borderRadius);
    align-content: center;
    text-align: center;
    border: var(--button2-border);
}
.btnMoreInfo.buttonMedium {background-color: var(--button2-backcolor);color: var(--button2-color);border-color: var(--button2-color);}
.btnMoreInfo.buttonMedium:hover {background-color: var(--button2-backcolorHover);color: var(--button2-colorHover);border-color: var(--button2-backcolorHover);}

/*
.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: var(--icon-link);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);}

.bicycleIcon .fa-primary{fill: var(--base-color, currentColor);}
.bicycleIcon .fa-secondary{fill: var(--main-color, currentColor);opacity: 1;}
/*header*/

/*header*/
.header {width: 100%;height: var(--header-height);display: flex;flex-direction: row;justify-content: center;flex-wrap: nowrap;transition: opacity 1s ease 1s;z-index:4000;}
.divHeaderInfo{width:100%;height:100%;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;}
.divHeaderInfo #page-partner {display: none;}
.divHeaderInfo #page-top{display:flex;}
.divHeaderInfo #page-company {display: none;}

/* page top */
/*#page-top,#page-row0, #page-row1,#page-row2 {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;height: 100%;width:100%;}
#page-top{flex-direction:column;}
#page-row0 {display: none;}*/

/*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%;}

/*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;}



/*img#companyLogo {height: auto;width: 114px;}*/
/*row1*/
/*#page-row1 {max-width:100%;}*/
/*row2*/
#page-row2 {display:none;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-color);box-shadow: none !important;}
#headerinfo {max-width: 1450px;flex-direction: row-reverse;gap: var(--gap-large);padding: var(--gap-large);padding-bottom:0;}
#headerinfo #page-partner {display: none;}
#headerinfo #page-top {display: flex;}
#headerinfo #page-company {display: flex;}

#page-top #page-row2 {display: flex;}
#page-top #page-row1 #page-menu {display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap;width: 100%;border-bottom: 1px solid var(--line-color);align-items: center;}

#page-top #page-row1 #page-menu #page-menu-lang {padding: 0 var(--gap);border-left: 1px solid var(--line-color);height: 100%;align-items: center;}
.header .dropdown {font-size: var(--button2-fontSize);font-weight: var(--button2-fontWeight);background-position: center;}
.header .dropdown {font-size: var(--button2-fontSize);font-weight: var(--button2-fontWeight);background-position: center;}
.header .langMenu1 .langAbbr {display: none;}
/*#page-top #page-row2 #page-logo {display: flex;align-items: center;}*/
#page-company #page-company-details {display: flex;flex-direction: column;background-image: var(--logo);background-size: contain;background-repeat: no-repeat;height: var(--header-height);width: var(--logo-width);}
#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;}
.languageChangeDiv {color: var(--header-color);}

#header .langMenu1 .langAbbr {display: none;}
/*#header .dropdown {display:none;}*/

/* header: language option*/
#header .languageChangeDiv {display:none;} /*default - disable*/
/*default not visable*/
#header #page-menu-lang {display:flex;}    /* language menu*/
.header #page-menu-lang {display:flex;}
.header #page-menu-lang #langMenu{display:flex;} /*vertical/dropdown */	

/*header: lang horizontal */

.header .page-row-lang #langHorizontal {display: none;flex-direction: row;column-gap: 5px;justify-content: flex-start;align-items: center;flex-wrap: nowrap;column-gap: 10px;}
.header .page-row-lang #langHorizontal .languageIcon {display: none;align-items: center;flex-direction: row;flex-wrap: nowrap;}
.header .page-row-lang #langHorizontal .languageIcon a {display: flex;align-items: center;flex-direction: row;flex-wrap: nowrap;column-gap: 10px;text-decoration: none;}
.header .page-row-lang #langHorizontal .languageIcon a .langAbbr {display:flex;}
.header .page-row-lang #langHorizontal .languageIcon a img {height: 20px;}
.languageIcon {display:none;}
.lang1 #language2, .lang1 #language3,.lang2 #language1, .lang2 #language3,.lang3 #language1, .lang3 #language2{display:flex;}


#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;}
.languageChangeDiv {color: var(--header-color);}

/*footer*/
/*
#footer {padding: var(--gap-large) 0 0 0;background-color:transparent;}
#footerinfo {background-color: var(--footer-backcolor);width: 100%;}
#footerDivider {height: 12px;margin-top: -10px;background-image: url(https://cdn.cyclerent.com/CR/background/waves/waves-0d2481.svg);background-size: auto;background-position: 0;background-repeat: repeat-x;overflow: hidden;}
*/
/*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*/
#bookingSummary {color: var(--main-color2);box-shadow: 0 0 30px rgb(0 11 40 / 8%);border: 0 none !important;border-radius: 6px !important;}

/*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;}
/*.isWeb .full-date-mobile, .isMobile .full-date-web, .isMobile .full-date {display: inherit;}*/
/*step1*/
#lblDateRange{display:none;}

/*step2*/
.bikeRentWithCountOfDays {display: none;}
.lblPromotionInfoPopupHeader span {color:var(--main-color4);}
/* date section */
 .contact-info {font-size: var(--main-medium-fontSize);line-height: var(--main-lineHeightAlt);display:none;}
 .day-of-week {color: var(--main-color3);}
/*.promotion-container {display:none;}*/

/*step3:items*/
.itemGroupfilterWraper {padding: 5px 0 0;}
.rdbOptionsInline:checked + label, .rdbOptionsInline + label:hover {transform: translateY(-5px);}

.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;
	*/
	}
.spnSummaryHeader {
	/*background: var(--label-backImage);
	background-size:88%;
	background-size:var(--label-backImageSize);
	background-image: var(--label-backImage);
    background-size: 100%;
    background-repeat: no-repeat;
	background-position: center center;*/
    }
.divInputAmount {
    /*background: var(--label-backImage);
    background-size: var(--label-backImageSize);    
    padding: 8.75px 12.23px;
    transform: rotate(3deg);
    font-family: var(--title-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);
}
	*/
/*step5: pickup location*/
.radio-container {border: var(--line-border);}
.radio-container .optionSelected {border-color: var(--main-color);}
/*#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);}
#holidayAddressDiv {border: none;padding: var(--gap-large) 0;} 
#divPersonalDetails{padding: 0 0 var(--gap-large) 0;} 
.arrivalHoursDropdownList {display: none;}
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);}
#divZipCode input {width: 40%;}
#divStaySelectionHeader span {font-size: var(--main-medium-fontSize);}
.step5 .pageHeading {display: none;}

/*step6*/
#paymentButtonInfo {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;
	}
	/*#companyLogo {height: 70px;}*/
	#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-fontSize: 20px;
		--title-margin-bottom:15px;
	
		--button1-height:50px;
		--button1-padding: 2px 15px;
		--button1-borderRadius:25px;
	}
	/*#companyLogo {height: 50px;}*/
	.itemGroupTypeFilter label {padding: 2px 8px 6.75px 8px;margin-bottom:0;}
	#btnStartNewReservation {max-width: 100%;margin: var(--gap) 0;float:none;}
}

/*****START-FINISHED-STYLES*****/
/*header*/
#header {justify-content: center;max-width: 100%;border-top: 8px solid var(--base-color);}
#headerInfo #templateHeader {flex-direction: row-reverse;gap: calc(var(--gap) * 3);padding: calc(var(--gap) * 2) calc(var(--gap) * 1.5);padding-bottom: 0;}
/*#headerInfo #page-partner {display: none;}
#headerInfo #page-top {display: flex;}
#headerInfo #page-company {display: flex;}*/

/* page top */
/*#page-top,#page-row0, #page-row1,#page-row2 {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;height: 100%;width:100%;}*/
#page-top{flex-direction:column;flex:1;width:180px;}

#page-top #page-row1 #page-menu #page-menu-title {display:flex;padding-bottom: var(--gap);font-weight: 500;border-bottom:5px solid var(--base-color);}

#page-top #page-row2 #page-logo{margin:inherit;}
#page-top #page-row2 #page-logo #partnerLogo {display: none;}
#page-top #page-row2 #page-logo #page-title {padding-top: 10px;font-weight: var(--main-fontWeight);font-size:var(--main-fontSize);color:var(--main-color);}

/*active language menu:vertical*/
#header #page-menu-lang {display:flex;} 
#header #page-menu-lang #langVertical{display:flex;}
#header #page-menu-lang .dropdown,#header .dropdown>ul>li>a {font:var(--button2-font);font-size: var(--button2-fontSize);font-weight: var(--button2-fontWeight);width: 49px;background-position: 10px center;}
#header #page-menu-lang .dropdown:after {display:none;}
/*#header .dropdown>ul>li>a {background-position: 10px center;width: 55px;}*/
#header #page-menu-lang #langVertical .langAbbr {display: none;}

/*footer*/

/*step3*/
.magnifying-icon {display: none;}

/*****END-FINISHED-STYLES*****/
