/*
CYCLERENT webshop3 CSS
project: 1020 -  Zeelen
version: 1.22
date: 2025-09-02
*/
@import "w3zeelen2.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:15px;
	--main-large-fontSize:21px;
	--main-larger-fontSize:24px;
	--main-backcolor:#F1F3EF;
	--main-borderRadius:10px;
	--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;
	--link-border: 2px solid transparent;	
	
	--input-color:var(--main-color1);
	--input-font: var(--main-font);	
	--input-fontSize: 16px; 
	--input-fontWeight:400;
	--input-lineHeight:28px;	
	--input-backcolor:#FFFFFF;	
	--input-border:1px solid var(--main-border-color);
	--input-border-focus:1px solid var(--main-border-color);
	--input-borderRadius:0;	
	--input-padding: 10px 5px;
	--input-placeholder-color:transparent;
	--input-selectHeight: 60px;
	
	--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-imageHeight:300px;
	--header-fontSize:60px;	
	
	--footer-backcolor: var(--main-color2);
	--footer-color:#FFFFFF;
	
	--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-border: 1px solid var(--main-border-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;
	
	--logo:url(https://cdn.cyclerent.com/1020/images/Zeelen/logo-Zeelen-2025-blue.svg);
}
/* */
/*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);}
.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-0061FE.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:var(--link-border);}
.link:hover .linkBody .linkText {color:var(--link-colorHover); border-bottom-color: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*/
#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;width: 97px;height: 40px;}
#partnerTitle p, .partnerHeading {display: none;}
.languageChangeDiv {color: var(--header-color);}
/*footer*/
#footer {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*/
.booking-summary {color: var(--main-color2);}

/*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;}
#lblCyclePromotion #lblCyclePromotionText span {white-space:nowrap;}

/*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);}
 .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;}
.spnSummaryHeader {
	background: var(--label-backImage);
	background-size:88%;	
    }
.isMobile .spnSummaryHeader {background-size: 100% 80%;width: 65%;display: flex;flex-direction: row;align-items: center;justify-content: 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*/
/*#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);}
@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;
		--main-lineHeight:140%;
		
		--title-fontSize: 20px;
		--title-margin-bottom:15px;
	
		--button1-height:50px;
		--button1-padding: 2px 15px;
		--button1-borderRadius:25px;
	}
	
	.itemGroupTypeFilter label {padding: 2px 8px 6.75px 8px;margin-bottom:0;}
	#btnStartNewReservation {max-width: 100%;margin: var(--gap) 0;float:none;}
}