/*
CYCLERENT webshop3 CSS
project: generic - production
version: 1.20
Date: 2026-01-27
*/

@import "webshop3-color1.css";

/*general styles */
.FGinfo {color: var(--info-backcolor);}
.requiredError {background-color: var(--error-backcolor);padding: 5px 5px 5px 0;}

/*button*/
.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {background-color: var(--disabled-backcolor);border-color: var(--disabled-backcolor);color: var(--disabled-color);}
button.cancelBtn:hover {background-color: var(--button1-backcolorHover);color: var(--button1-colorHover);border-color: var(--button1-backcolorHover);}

.iTemTypeDetails {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
/*.borderAndPadding {border-top: 1px solid #b3b3b3;}*/
.txtItemDetails {
    font-weight: 500;
}
/*.moreInfoAccessoriesDisplay {padding: 10px 0px;}*/
.labelForItemDetails {
    font-weight: var(--title-fontWeight);
    margin-bottom: calc(var(--gap) / 4);
}

.allItemImages {
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
}

.gm-style-cc, .gmnoprint a[href^="https://www.google.com/maps/@"] {
    display: none !important;
}

/*radio button*/
input[type="radio"] {
    accent-color: var(--button1-backcolor);
}

/*moreInfo accessories*/
.moreInfoAccessoriesText {padding-right: var(--gap);display: flex;flex-direction: row;align-items: center;column-gap:3px;}
    /*.moreInfoAccessoriesText:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 16px;
        background-image: url('/Content/pipe.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }*/
	.moreInfoAccessoriesText::after {
    content: "";
    /* position: absolute; */
    /* right: 0; 
    top: 50%; */
    /* transform: translateY(-5%); */
    width: 10px;
    height: 100%;
    /* background-image: url(/Content/pipe.svg); */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
    /* background-image: url(https://CDN.cyclerent.com/CR/s-check/s-check.svg); */
    /* background-position: center; */
    /* fill: var(--checkMark-color); */
    /*margin-right: 3px;*/
    background-color: var(--checkMark-color);
    -webkit-mask-image: url(https://CDN.cyclerent.com/CR/s-check/s-check.svg);
    mask-image: url(https://CDN.cyclerent.com/CR/s-check/s-check.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    margin-top: 8px;
}
/*.MoreInfoGraytxt {color: gray;}*/

/*marker form location in map*/
.custom-marker {
    width: 24px;
    height: 24px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

/*.popup-overlay {display: flex;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;z-index: 100;}*/

.closeMapBtn {z-index: 12;position: absolute;top: 0;right: 0;padding: 10px;}
.loaderForMap {position: absolute;display: flex;height: 300px;z-index: 1;justify-content: center;align-items: center;}

.locationInMap {background: yellow;padding: 5px;}

.popup-image {
    width: 100%;
    max-width: 350px;
    max-height: 250px;
    height: auto;
    transition: opacity 0.5s ease;
}


.popup-image {
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease;
}

/*div#itemMoreInfo_3 {display: flex;flex-direction: column;gap: 11px;}*/
.itemTypeBrandName {
    display: flex;
    gap: var(--gap);
    justify-content: flex-end;
}

.txtNumberOfItem, .itemOptionTextInput {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: none 0;
    background-color: transparent;
    pointer-events: none;
}

.section-header {
    font-size: x-large;
    font-weight: 600;
}

div#streetAndZipCodeDiv {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-large);
}

.pnlUnKnownHoliday {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.notInListHolidayAddress {
    display: flex;
    flex-direction: column;
}

.highlight {
    background-color: yellow;
    font-weight: bold;
    border-radius: 2px;
}
/*
.magnifying-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 12px;
    border-radius: 50%;
}*/


#btnNextStep {border-bottom: 1px solid #ddd;}


    #header h1 {
        margin: 0;
        font-size: 20px; /* Increased size */
    }

    #header p {
        margin: 0;
        font-size: 14px; 
    }

.language {
    position: absolute;
    top: 10px;
    right: 10px;
}

.step-indicator {
    font-size: 14px; /* Increased size */
    color: #555;
    margin: 12px 0;
}

.change-link {
    color: black;
    text-decoration: underline;
}

.step-divider {
    margin: 0; /* Remove default margin */
    border: none; /* Remove border */
    height: 1px; /* Set height */
    background-color: #ccc; /* Color of the divider */
    margin-top: 10px; /* Space above the divider */
    margin-bottom: 10px; /* Space below the divider */
}

.bicycleIcon {
    height: 50px;
    width: 100%;
}

.partnerTitle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.partnerHeading {
    font-weight: 700;
    font-size: x-large;
    font-style: italic;
}

.spnRating {
    font-weight: 800;
    font-size: small;
}

.reviews {display: flex;justify-content: center;font-size: var(--main-small-fontSize);flex-direction: row;align-items: flex-end;margin-right: calc( var(--gap-large) * 2 );gap: var(--gap);}

.languageAndReviews {
    display: flex;
    align-items: center;
}

/*for language selection
.languageChangeDiv {
    position: relative;
}

.selectedLanguageDiv {
    display: flex;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    align-items: center;
    cursor: pointer;
    background-color: #fff;
}

.selectedLanguage {
    font-size: 15px;
    font-weight: 500;
}

.dropdownLanguageList {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #b3b3b3;
    border-top: none;
    background-color: #fff;
    z-index: 10;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.dropdownLanguageItem {
    padding: 4px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 5px;
}

    .dropdownLanguageItem:hover {
        background-color: #f3f3f3;
    }
*/

.main-content h2 {
    font-size: 18px; /* Increased size */
    color: #333;
}

.info-icon {
    font-size: 14px; /* Increased icon size */
    background-color: #000;
    color: #fff;
    padding: 5px 8px; /* More padding for better spacing */
    border-radius: 50%;
}

.date-section label {
    font-size: var(--subtitle-fontSize);
    color: var(--subtitle-color);
    font-weight: var(--subtitle-fontWeight);
}

.textBold {font-weight: 700;}

.bikeRentWithCountOfDays {display: flex;padding: var(--gap);}
.globalBorderRadius {border-radius: 4px;}
/*
#endDateSelection {
    padding-top: 12px;
}
.calendar-icon {
    padding-left: 10px;
    padding-top: 6px;
    color: #337ab7;
}

.date-container {
    position: relative;
    border: 2px solid;
    padding: 8px;
    border-radius: 5px;
}

.calendar-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px;
    color: #337ab7;
}
*/

.day-of-week {
    color: var(--calender-color2);
    font-size: var(--main-fontSize);
}
/*
.full-date {
    font-size: var(--main-fontSize);
    color: var(--input-area-color);
}*/

.numberInputText {
    background-color: var(--input-area-backcolor);
    padding: 4px;
    border-radius: 30px;
}

.divPaymentMethodActive {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.rightCheckIcon {position: absolute;top: -10px;right: -10px;color: var(--checkMark-color);}

.divAmoutToPayHeader {
    display: flex;
}

.divAmoutToPayHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: large;
    font-weight: 800;
}

.totalcurrencyAndAmount {
    display: flex;
}

.summary-item, .summaryCommunication {
    display: flex;
    gap: 0;
    flex-direction: column;
}

.personalDetailLabel {
    font-weight: var(--title-fontWeight);
}

.collapsePaymentSummary {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/*.personalDetailText {padding-top: 8px;}*/

.totalCostCalculation {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-left: var(--gap);
    padding-top: var(--gap);
}

.divPaymentMethod {
    padding: 10px;
    background-color: lightgrey;
    pointer-events: none;
    opacity: 0.4;
    border-radius: 4px;
}

/* Style for disabled dates */
.Location-disabled-date {
    color: green !important; /* Change the text color to red */
    background-color: darkseagreen !important; /* Optional: Change background color */
    border-color: #ebccd1 !important; /* Optional: Change border color */
}

    /* Optional: Change the tooltip background to make it stand out */
    .Location-disabled-date:hover {
        color: green !important;
        background-color: darkseagreen !important;
        border-color: #ebccd1 !important;
    }

.allLocation-disabled-date {
    color: red !important; /* Change the text color to red */
    background-color: #f2dede !important; /* Optional: Change background color */
    border-color: #ebccd1 !important; /* Optional: Change border color */
}

/*.calendar-icon {cursor: pointer;}
.date-info {cursor: pointer;}*/

.step3-header {
    text-align: center;
    margin-bottom: 20px;
}

    .step3-header h2 {
        margin-bottom: 10px;
        font-size: 24px;
    }

    .step3-header p {
        color: #666;
        font-size: 16px;
    }

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: space-between;
    margin-bottom: 30px;
}

.product-item {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    width: calc(50% - 10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .product-item h3 {
        margin: 0 0 10px;
        font-size: 18px;
    }

    .product-item p {
        margin: 5px 0;
        color: #333;
        font-size: 14px;
    }

    .product-item strong {
        color: #000;
        font-weight: bold;
    }

.quantity-selector {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

    .quantity-selector button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 3px;
        transition: background-color 0.3s;
    }

        .quantity-selector button:hover {
            background-color: #0056b3;
        }

    .quantity-selector input {
        width: 40px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 0 10px;
        border-radius: 3px;
        padding: 5px;
    }

.reservation-summary {
    position: sticky;
    bottom: 0;
    display: flex;
    background: white;
    padding: 10px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    justify-content: space-between;
    align-items: center;
}

.next-step-btn {
    display: block;
    background-color: #28a745;
    color: white;
    border: none;
    padding: 15px;
    width: 100%;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .next-step-btn:hover {
        background-color: #218838;
    }



.promotion-item .check {font-size: var(--main-large-fontSize);}
.promotion-item .check .fa-secondary {fill: #FFFFFF;}


.rentalInfo {display: flex;justify-content: center;align-items: center;color: var(--main-color2);}
/* Main content section styling */
.radioOptionSelection {
    display: flex;
    align-items: center; /* Align radio and label vertically */
    margin-bottom: 10px; /* Space between radio option and the content below */
}

/* Styling for radio button container */
/*.radio-container {
    padding: 20px;
    cursor: pointer; 
border: var(--promo-border);
border-radius: 0;
background-color: #fff;
transition: background-color 0.3s;
display: flex;
gap: 10px;
flex-direction: column;
color: var(--main-color2);
}



.big-radio {
    width: 25px;
    height: 25px;
    accent-color: black;
    cursor: pointer;
}

.divPickupDeliveryLable {display: flex;justify-content: space-between;font-size: var(--main-large-fontSize);font-size: var(--main-large-fontSize);align-items: center;flex-direction: row;width: 100%;}

.locationSelction {display: flex;flex-direction: column;gap: var(--gap);}
*/
input {margin: 0px !important;}

/* Hover effect */


/* Styling for the labels */
.radioOptionSelection label {
    font-size: 16px;
    color: #333;
}

#viewLocationsLink {
    display: block;
    margin-top: 10px;
    color: #007bff;
    text-decoration: none;
}

    #viewLocationsLink:hover {
        text-decoration: underline;
    }

.lblStepDiv {
    display: flex;
    justify-content: space-between;
}

.clickDisabled {
    pointer-events: none;
    color: gray !important;
}

/* Full page overlay with transparent gray background */
.loading-overlay {
    position: relative;
    display: flex;
    margin-bottom: 50px;
    height: 300px;
    width: 100%;
    z-index: 1; /* Ensure it's above other content */
    justify-content: center;
    align-items: center;
}
/*

.form-select {
    max-width: 100%;
    width: 100%;   	
	padding: var(--input-padding);
    border-radius: var(--input-borderRadius);
    font-size: var(--input-fontSize);
    font-weight: var(--input-fontWeight);
    border: var(--input-border);
    border-left-width: 2px;
    line-height: var(--input-lineHeight);
    height: var(--input-selectHeight);
    background-color: var(--input-backcolor);
}
*/
.countBold, .summaryHeaderBold {
    font-weight: 700;
}

.filterSelection {
    max-width: 100%;
    width: 100%;
    padding: 15px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #000;
}

.promotionInfoPopup {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    animation: fadeIn 0.5s ease forwards;
}


/* Popup content */
.promotionInfoPopupDiv {
    background: #fff;
    border-radius: 0;
    padding: 53px 60px var(--gap-large) 60px;
    max-width: 80%;
    width: 620px;
    position: relative;
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

/* Popup header */
.popupHeader {
    position: absolute;
    display: flex;
    right: 20px;
}

.popupContent {
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}

.popupMainContent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.lblPromotionInfoPopupHeader {
    font-weight: 700;
    font-size: larger;
}

.buttonPromotionInfoPopupCloseBottom {
    background: white;
    border-radius: 5px;
    width: 100%;
    padding: 8px;
    border: 2px solid #ccc;
}

body.no-scroll {
    overflow: hidden;
}


.reservationItems {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.reservationItemDetails {
    display: flex;
    flex-direction: row;
    column-gap: var(--gap-large);
    flex-wrap: wrap;
}

.divTotalAmount {
    display: flex;
    align-items: center;
}

.reservationTotal {
    display: flex;
    font-weight: 500;
    font-size: 20px;
    gap: 8px;
}

.bikeCss {
    gap: 10px;
    display: flex;
}
/*.itemGroupTypeFilter label:hover {background-color: #f0f0f0;border-color: #000;}*/
.listOption, .itemGroupTypeFilter {
    margin-right: 10px;
    padding-bottom: 10px;
    border-bottom: var(--line-border);
}

.divItemContent, .numberInputText {display: flex;gap: var(--gap-large);}
.numberInputText {
    /*flex;*/
    gap: 5px;
}

.divMoreInfo {
    display: flex;
    gap: var(--gap);
    justify-content: space-between;
    cursor: pointer;
}

.numberInput {
    display: flex;
    column-gap: var(--gap-large);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.numberInputText, .itemOptionNumberInputText {
    width: max-content;
    background-color: var(--input-area-backcolor);
    padding: var(--input-area-padding);
    border-radius: var(--input-area-borderRadius);
    display: flex;
}

.itemOptionNumberInputText {
    background-color: #FFFFFF;
}


.divItemOptionList .listOptionDiv {color: var(--main-color0);}

.listOption {
    margin-left: 0 !important;
    margin-right: 0;
    gap: 10px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
/*
.listOptionName {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
*/
.divAddRemoveSingleProduct {
    padding: 7px 20px 7px 20px;
    background: white;
    border: 2px solid;
    border-radius: 5px;
}

.numberInputTextForProduct {display: none;}
.buttonDisable {pointer-events: none;background-color: #FFFFFF !important;color: var(--disabled-color);font-size:80%;}
.eventDisable {pointer-events: none;}

.listOptionImage {
    display: flex;
    min-width: 120px;
    max-width: 120px;
    height: 100px;
    /*padding: 2px;
    border: 1px solid #ccc;*/
    border: 0 none;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.infoIcon {background-color: var(--info-colorback);border-radius: 50%;width: 22px;height: 22px;font-size: 14px;line-height: 1;color: var(--info-color);font-weight: 600;text-align: center;align-content: center;cursor: pointer;}
.infoIcon .buttonText{ width: 22px;}
.close-icon {cursor: pointer;color: var(--main-color);}

.btnMoreInfo {
    height: 40px;
    border-radius: 20px;
    align-content: center;
    text-align: center;
    border: 2px solid var(--button1-backcolor);
}


.divSingleItemSelection {
    display: none;
}

.listOptionImageIMG {
    max-height: 90px;
    max-width: 90px;
}

.divTermsAndConditions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.termsPopupCheckBox {
    padding: 0px !important;
}

.modal-content {
    margin: 20px;
}

.divItemOptionList {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    width: 100%;
    background: var(--input-area-backcolor);
    border-radius: var(--input-borderRadius);
}

.itemOptionListLoader {
    display: flex;
    padding: 20px;
    justify-content: center;
    background: #eee;
    width: 100%;
    border-radius: 5px;
}

/*.itemOptionName {font-weight: 800;}*/

/*
.itemOptionIncreaseButton, .itemOptionDescreseButton {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    border: 0;
    font-size: 120%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.itemOptionNumberInputText {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
	
}

.itemOptionTextInput {
    width: 45px;
    height: 30px;
    border-radius: 3px;
}
*/

/* Modal to show enlarged image */
.imageModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Background overlay */
}

.imageModalContent {
    position: relative;
    margin: auto;
    padding: 10px;
    background-color: white;
    width: 80%; /* Can be adjusted based on design */
    max-width: 400px;
    text-align: center;
}

.itemOptionNumberInputAmount {
    display: flex;
    gap: 3px;
    color: var(--main-color3);
}

.enlargedImage {
    width: 100%; /* Adjust the image size */
    height: auto;
}

/* Close button */
.closeButton {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    color: #555;
}

.displayBlock {
    display: flex;
}

.no-scroll {
    overflow: hidden;
}

/*ArrivalHours dropdown list for ferry*/
.arrivalHoursDropdownList {
    position: relative;
    padding-bottom: 20px;
}

.divDeliveryArrivalHours {
    padding-bottom: 10px;
}

.divDeliveryTime {
    width: 100%;
}

.arrivalHoursDropdown:hover {
    background-color: #f9f9f9;
}

.lblNotInList {
    color: var(--main-color3);
    font-weight: 500;
}

.lblAddManully {
    text-decoration: underline;
    font-weight: 500;
}

.LocationPickupArrivalHourMinuteDropdown {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    position: absolute;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
}

    .LocationPickupArrivalHourMinuteDropdown li {
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

        .LocationPickupArrivalHourMinuteDropdown li:hover {
            background: #f0f0f0;
        }

.iconHTML img {width: 25px;margin-top: -5px;
	/*to set color: filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(1515%) hue-rotate(289deg) brightness(90%) contrast(103%);*/}
span.textType2, span.textType1, span.textType3 {
    cursor: pointer;
    display: flex;
    gap: var(--gap);
    padding: 0 var(--gap);
}

.divAmountToPay {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



/* Add container specific style */
#partialViewContainer {
    position: relative; /* This will make sure the sticky element knows its container */
}


.flex-container {display: flex;flex-direction: column;}


/*
.form-label {
    font-weight: 500;
}*/



.search-container {
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    align-items: center;
}

.searchHolidayAddressIcon {position: absolute;margin-right:5px;}

.divStaySelection {
    position: relative;
}
/*booking summary css*/
.booking-summary {
    position: sticky;
    padding: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    top: 0;
    bottom: 0;
    gap: 25px;
    height: 100vh;
    z-index: 10;
    justify-content: space-between;
    overflow: auto;
    /* Animation-specific styles */
    transform: translateY(100%); /* Slide out of view */
    opacity: 0;
}

.booking-dates {display: flex; flex-direction:row;gap:0;flex-wrap: wrap;justify-content: space-between; /*gap: var(--gap-large);align-items: center;*/}
.booking-dates svg {display:none;}
.lblUpToForBookingSummary {color: var(--main-color);font-size:80%;}


.scroll-buttons {position: fixed;right: 20px;bottom: 20px;display: flex;flex-direction: column;gap: 10px;}
.scroll-btn {background: var(--button1-backcolor);color: var(--button1-color);border: none;border-radius: 50%;width: 30px;height: 30px;font-size: 18px;cursor: pointer;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);transition: background-color 0.3s ease;margin-bottom: 50px;}
.scroll-btn:hover {background-color: var(--button1-backcolorHover);}
.skeletionLoader{width: 75%;}

.skeletionLoader .skeleton-box-Day {
    height: 15px;
    max-width: 50%;
    margin-top: 3px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
}

.skeletionLoader .skeleton-box-Date {
    height: 15px;
    max-width: 100%;
    margin-top: 5px;
    margin-bottom: 3px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
}

/* Customize the checkbox appearance */
.checkBoxBlack input[type="checkbox"] {
    width: 25px;
    height: 25px;
    appearance: none;
    border: 2px solid var(--main-color1);
    border-radius: 4px;
    background-color: white;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0px;
}

    /* Style for checked checkbox */
    .checkBoxBlack input[type="checkbox"]:checked {
        background-color: var(--main-color1);
        border-color: var(--main-color1);
    }

        /* Create a white tick mark when checked */
        .checkBoxBlack input[type="checkbox"]:checked::after {
            content: '\2714';
            color: white;
            font-size: 18px;
            position: absolute;
            top: -1px;
            left: 4px;
        }

/* Label styling for better alignment */
.checkBoxBlack label {
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
    padding-left: var(--gap);
    font-weight: var(--main-fontWeight);
}

#spnPaymentMethod {
    margin-left: 3px;
}

.divSummaryPayment {
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}

.termsAndPrivacyCheck {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Shimmer Effect Keyframes */
@keyframes shimmer {
	0% {background-position: -200% 0;}
    100% {background-position: 200% 0;}
}
.checkBoxBlack {display: flex;flex-direction: row;align-items: center;padding-left: var(--gap);}

.divPaymentSummaryPersonalDetail {
    padding-left: var(--gap);
    font-size: var(--main-medium-fontSize);
    line-height: var(--main-lineHeightAlt);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.paymentAddress {float: left;margin-right: calc( var(--gap) / 2 );}
#paymentTxtStreet, #paymentTxtPostCode,#paymentDdlCountry {clear: left;}
#paymentTxtPostCode {text-transform: uppercase;}

#divCommunicationDetails {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#communicationLabel {
    display: none;
}

#communicationDetails {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
}

.communicationDetailLabel {
    margin-right: 3px;
    font-weight: var(--title-fontWeight);
}

/* Container for scrollable content */
.scrollableContent {
    max-height: 400px; /* Set the max height for scrollable area */
    overflow-y: auto; /* Enable vertical scroll */
    padding: 10px;
}

/* Styling for the scroll arrows */
.scrollArrow {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%; /* Stretch across the container */
}

    .scrollArrow:hover {
        background-color: #555;
    }

/*Personal details css*/
.step-container-checkout {
    display: flex;
}

.divStay {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.form-check {
    display: flex;
    gap: var(--gap);
}

.rdbOptionsInline label {
    color: initial;
    background-color: #FFFFFF;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    width: auto;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 5px;
}

.form-check-inline label {
    color: var(--main-color1);
    background-color: #FFFFFF;
    display: inline-block;
    border: 1px solid var(--main-color1);
    cursor: pointer;
    width: auto;
    font-weight: var(--main-fontWeight);
    padding: 5px 10px;
    border-radius: 15px;
    height: 30px;
}

.divPaymentMethodImage {padding-right: 15px;}

.calendar-icon {color: var(--main-color);}

.gray-out {color: var(--disabled-color);background-color:var(--disabled-backcolor);cursor: not-allowed;}

.lblPaymentMethodSelection {position: relative;display: flex;padding: var(--gap);flex-wrap: wrap;justify-content: flex-start;flex-direction: row;}

.rdbOptionsInline + .lblPaymentMethodSelection {
    display: flex;
    align-items: center;
    color: var(--button2);
    background-color: var(--button2-backcolor);
    border: var(--button2-border);
    cursor: pointer;
    width: auto;
    font-weight: var(--button2-fontWeight);
    padding: 5px 8px;
    border-radius: var(--button2-borderRadius);
    margin-bottom: 0px !important;
}

.rdbOptionsInline:checked + .lblPaymentMethodSelection .rightCheckIcon {
    display: block;
}

.rdbOptionsInline + .lblPaymentMethodSelection .rightCheckIcon {
    display: none;
}

.divPersonalDetailInputs {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.txtAreaDescription {
    height: 100px;
}

/*show location input map*/

/* Desktop styles */
@media (min-width: 768px) {

    .listOptionImage, .btnMoreInfo {
        min-width: 100px;
    }

    .date-picker {
        flex-direction: row;
        justify-content: space-between;
    }
}

.pt-0 {
    padding-top: 0;
}
/******************************************/
/*general */

/*general: HTML-elements */


/* gen: dropdown list*/
.dropdown-list {
    position: absolute;
    /*background: var(--input-area-backcolor);*/
    width: 100%;
    z-index: 2;
    background-color: #ffffff;
    border: 1px solid;
    border-radius: var(--input-borderRadius);
    border: var(--input-border);
    scrollbar-width: none; /* Firefox */
}

    .dropdown-list::-webkit-scrollbar {
        display: none;
    }

    .dropdown-list:focus {
        border: var(--input-border-focus);
    }

/* Hide the scrollbar in Webkit-based browsers (Chrome, Safari) */
.dropdown-icon {
    height: 30px;
    width: 30px;
}

.holidayAddressDropDown {
    max-height: 200px;
    border-radius: 8px;
    padding: 10px 10px 0px 10px;
    overflow: auto;
    list-style-type: none;
}
/*step1: period selection*/
.isWeb .full-date-mobile, .isMobile .full-date-web, .isMobile .full-date{display: none;}
.isMobile .full-date.full-date-mobile {display:block;}
.WS3-020.isMobile .full-date {display:block;}

.daterangepicker {border-color: var(--main-border-color);}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {font-size: var(--calender-fontSize);border-radius: var(--calender-borderRadius);border: 1px solid transparent;}
.daterangepicker td.active, .daterangepicker td.active.in-range.end-date {background-color: var(--calender-selected-backcolor); color: var(--calender-selected-color);border-color: transparent;}
.daterangepicker td.active:hover {background-color: var(--calender-selected-backcolorHover); color: var(--calender-selected-colorHover);border-color: transparent;}
.daterangepicker td.in-range, .daterangepicker td.off.in-range {background-color:var(--calender-backcolorAlt);color: var(--main-color);}
.daterangepicker td.holiday-date::after {content: "";display: block;width: 4px;height: 4px;background-color: var(--negative-color);border-radius: 50%;margin: 1px auto 0; /* centers dot below number */}
.daterangepicker td.holiday-returnOnly::after {content: "";display: block;width: 4px;height: 4px;background-color: orange;border-radius: 50%;margin: 1px auto 0; /* centers dot below number */}
.daterangepicker td.disabled:not(.holiday-date):not(.holiday-returnOnly)::after {content: "";display: block;width: 4px;height: 4px;background-color: dimgray;border-radius: 50%;margin: 1px auto 0; /* centers dot below number */}
.daterangepicker td.off,.daterangepicker td.off.in-range,.daterangepicker td.off.start-date,.daterangepicker td.off.end-date {pointer-events: auto !important;}
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {color:var(--disabled-color);}
 /*.daterangepicker td.available.off::after {display:none;}*/
.daterangepicker table td.active.disabled {pointer-events: auto !important;opacity: 1 !important;background: #357ebd !important;color: #fff !important;}
.daterangepicker .drp-buttons {border-top: 1px solid var(--main-border-color);}
/* Optional: to remove the strike-through effect */
.daterangepicker td.active.disabled {color: transparent !important;text-decoration: none !important;}
.daterangepicker td.available::after {content: "";display: block;width: 4px;height: 4px;background-color: var(--positive-color);border-radius: 50%;margin: 1px auto 0; /* centers dot below number */}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {background-color: var(--calender-selected-backcolorHover); color: var(--calender-selected-colorHover);}
#dateRangePickerSelection {width: 100%;}
.daterangepicker .drp-selected {padding-right: 5px;font-size: var(--main-smallest-fontSize);}
.daterangepicker .drp-buttons .btn {margin-left: var(--gap);font-size: var(--main-fontSize);font-weight: var(--button1-fontWeight);padding: var(--button1-padding);}
.daterangepicker button.cancelBtn.btn {font-family:var(--buttonCancel-font);font-size:var(--buttonCancel-fontSize);font-weight:var(--buttonCancel-fontWeight);background-color: var(--buttonCancel-backcolor);color: var(--buttonCancel-color);border: var(--buttonCancel-border);transition:var(--buttonCancel-transition);}
.daterangepicker button.cancelBtn.btn:hover {background-color: var(--buttonCancel-backcolorHover);color: var(--buttonCancel-colorHover);border: var(--buttonCancel-borderHover);}
.time-popup-apply {background-color: var(--button1-backcolor);color: var(--button1-color);border: none;border-radius: 5px;padding: 8px 15px;cursor: pointer;margin-left: 20px;font-weight: bold;font-size: 14px;transition: background-color 0.2s;}
.time-popup-apply:hover {background-color:var(--button1-backcolorHover);color: var(--button1-colorHover);}
.time-picker-container {display: flex;justify-content: center;align-items: center;padding: var(--calender-button-padding);border-top: 1px solid var(--main-border-color);margin-top: var(--gap);position: relative;
background-color: var(--calender-button-backcolor);color: var(--calender-button-color);border-radius: var(--calender-button-borderRadius);
flex-direction: row;flex-wrap: nowrap;width: fit-content;margin: 0 auto;column-gap: var(--gap);}
.time-picker-container:hover {background-color: var(--calender-button-backcolorHover);color:var(--calender-button-colorHover);}
.time-picker-container span {display: flex;align-items: center;}
.time-picker-container .div-time-display {display: flex;column-gap: var(--gap);align-items: center;}
.time-picker-icon {font-size: calc(var(--calender-fontSize) * 1.25);cursor: pointer;}

.time-picker-popup {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: var(--main-backcolor);color: var(--main-color);border-radius: 8px;padding: 15px;z-index: 9999;display: flex;align-items: center;box-shadow: 0 5px 15px rgba(0,0,0,0.3);font-family: var(--main-font);}
.time-selector {display: flex;flex-direction: column;align-items: center;margin: 0 8px;}
.time-arrow {background: none;border: none;color: var(--button1-backcolor);font-size: var(--main-large-fontSize);cursor: pointer;padding: 0 8px;line-height: 1;transition: color 0.2s;}
.time-arrow:hover {color: var(--button1-backcolorHover);}
.time-value {font-size: var(--main-larger-fontSize);font-weight: 500;padding: 8px 0;}
.time-separator {font-size: var(--main-larger-fontSize);font-weight: 500;padding-bottom: 3px;}
.timeButtonDisabled {visibility: hidden;}

/*step2: pickuplocation*/
#promotionInfoPopupCloseBottom {width: 100%;display: flex;flex-direction: row;justify-content: flex-start;}
.lblPromotionInfoPopupHeader {font-weight: var(--title-fontWeight);font-size: var(--title-fontSize);color: var(--title-color);}
.popupHeader {position: absolute;display: flex;right: 20px;margin-top: -20px;}
.locationSelectionOption {/*color: var(--main-color2);*/}
.buttonPromotionInfoPopupCloseBottom {
    color: var(--button2-color);
    background: var(--button2-backcolor);
    border-radius: var(--button2-borderRadius);
    height: var(--button2-height);
    width: auto;
    padding: var(--button2-padding);
    border: var(--button2-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: var(--gap);
}

.magnifying-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    /*padding: 8px;*/
    /*border-radius: 50%;
    background-color: var(--button1-backcolor);
    color: var(--button1-color);*/
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*****step5*****/
/*step5: pickup time*/
#arrivalSeprateTimeDropdown {display: flex;gap: var(--gap);flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: center;}
#arrivalSeprateTimeDropdown .select2-container-with-icon{width: 100px !important;}

/*step5: stay & parking*/
#divLicensePlateNumber {display: none;}

/*#divStreet input {width: 70%;}
#divStreetNumber input  {width: calc(30% - var(--gap));}
#divZipCode input {width: 20%;}
#divPlace input {width: calc(80% - var(--gap));} */

/*step6: payment*/
#paymentSummaryPersonalDetail {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

.step6 #btnNextStep6 {
    display: block;
}

/*new css for web and mobile converting*/
.select2-container--default {
    width: 100% !important;
}

.listOptionImage {
    min-width: 150px;
}

.date-picker {flex-direction: row;justify-content: space-between;left: 0;top: var(--input-area-height);}
.isMobile #endDatePicker {right: 0;left: unset;}
/*************/

/* select2 */
/* Wrapper for Select2 with custom icons */
.select2-container-with-icon {position: relative !important;display: inline-block !important;width: 100% !important;}
/* Position the custom chevron icons */
.select2-container-with-icon .select2-custom-chevron {position: absolute !important;right: 10px !important;top: 50% !important;transform: translateY(-50%) !important;pointer-events: none !important;z-index: 10 !important;}
/* Style the SVG inside the chevron icons */
.select2-container-with-icon .select2-custom-chevron svg {width: 16px;height: 16px;fill: #333;}
/* Classes for toggling visibility */
.select2-custom-chevron.visible {display: flex !important;align-items: center !important;}
.select2-custom-chevron.hidden {display: none !important;}
/* Hide the default Select2 arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {display: none !important;}
/* Add padding to the selection area for the custom icon */
.select2-container--default .select2-selection--single {padding-right: 30px !important;}
/* Ensure the search bar is visible and styled */
.select2-container--default .select2-search--dropdown {display: block !important;padding: 4px !important;}
.select2-container--default .select2-search--dropdown .select2-search__field {width: 100% !important;padding: 4px !important;border: 1px solid #ccc !important;border-radius: 4px !important;}
/* Example custom styles for the chevron icons, change color on hover */
.select2-container-with-icon .select2-custom-chevron svg:hover {fill: #007bff;}

/*step1: date section*/
#dateRangePickerSelection,#startDateSelection, #endDateSelection {width: 100%;}
.date-section {display: flex;justify-content: space-between;flex-direction: row;column-gap: var(--gap-large);}
.date-info, .skeletionLoader {line-height: var(--main-lineHeightAlt);padding-left: var(--gap-large);cursor: pointer;}
.date-info {display: flex;flex-direction: row;align-items: center;}
.date-info .full-date {display: flex;flex-direction: row;align-items: center;column-gap: var(--gap);}
.date-info, .skeletionLoader {flex-direction: column;align-items: flex-start;}

/*step2 locations*/

/*step2 locations:map overview*/
.custom-info-window.custom-info-window-container {display: flex;flex-direction: column;row-gap: var(--gap);line-height: var(--main-lineHeightAlt);font-size: var(--main-medium-fontSize);}
.info-window-header.info-window-header-section {font-weight: var(--title-fontWeight);margin-bottom: var(--gap);color: var(--title-color);}
.street-group, .place-zipcode-group {display: flex;justify-content: flex-start;column-gap: 3px;}
.get-directions-text{color: var(--link-color);font-weight: var(--link-fontWeight);font-family: var(--link-font);border-bottom: var(--link-border);line-height: var(--main-lineHeight);}
.get-directions-text:hover {color:var(--link-colorHover);border-bottom-color: var(--link-colorHover);}
.close-info-window.buttonBody {display: none;}
/*step3*/
.listOptionMessage {
    font-size: var(--main-small-fontSize);
}
/*step3: more info*/
.item-more-info {
    font-size: var(--main-medium-fontSize);
    line-height: var(--main-lineHeightAlt);
    display: flex;
    gap: var(--gap);
    flex-direction: column;
}

.moreInfoWrapper .iTemTypeDetails {
    flex-direction: column;
}

.divItemTypeBrandAndCost {
    display: flex;
    flex-direction: row;
    column-gap: var(--gap-large);
    justify-content: flex-start;
}

.listOption .moreInfoWrapper .numberInputAmount {
    row-gap: 0;
    opacity: 1;
	flex-direction: column;
}
.numberAmountLabel {
    font-weight: var(--main-fontWeightAlt);
    font-size: var(--main-small-fontSize);
}


/* popup run out of availability */
.maxItemErrorPopup {transform: translateX(-30%);} /* Shifts only the popup content slightly to the left */

/*step4 extras*/
#stepContainer4{display: none;}

/*step5:personal data*/
#divTitleSelection .buttonLabel {
    font-size: var(--button-medium-fontSize);
    height: inherit;
    padding: var(--button-medium-padding);
    border: var(--button2-border);
}
/*summarry-small*/
/*after payment pages*/


#divTitleFunction {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--gap-large);
	color: var(--title-color);
    font-size: var(--title-fontSize);
    font-weight: var(--title-fontWeight);
    font-family: var(--title-font);
}

.payment_body {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    flex-wrap: nowrap;
}

.regardsText {
    margin-top: var(--gap);
}

    .regardsText .regardsInfo {
        font-weight: var(--title-fontWeight);
    }

#paymentButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: var(--gap);
    gap: var(--gap);
}

#divAllPaymentButtons {
    display: flex;
    gap: var(--gap-large);
    flex-direction: row;
    flex-wrap: wrap;
}


/*step retry payment*/
.step11 #btnNextStep6, .step11 #btnNextStep11 {width: 100%;}
.step11 #paymentSummaryTotalCostLabel {display: none;}
#divChoosePaymentMethodHeader {padding-left: var(--gap);}

/*step125 */
.step125 .resultLine, .step125 .divInfolbl {display:none;}
.step125 #imgissuebillbarcode {display:none;}
.step125 #divRegistrationNumberInfo.resultLine, .step125 #divRegistrationNumberInfo .divInfolbl, .step125  #divBillInfo.resultLine ,.step125 #divQRcode.resultLine, #divReserveeLanguage.resultLine {display: flex;flex-direction: column;align-items: center;}
#divReserveeInfo {display: flex;flex-direction: column;row-gap: var(--gap);}
#divQRcode IMG {width: 200px;}
#divReserveeLanguage IMG {width: 50px;border-radius:50%;}

.contentAndSummaryForPickup {display: flex;justify-content: space-between;align-items: center;    flex-direction: column;padding: var(--gap-large);}

.step125 .promotionInfoPopupDiv {padding: var(--popup-padding);background-color: var(--popup-backcolor);}
.step125 .popupHeader {display:none;}
.step125 #divPreQRCodeInfo #divCloseButton {background-color: inherit;}
#divPreQRCodeTemplateInfo {display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;text-align: center;}
#divPreQRCodeTemplateInfo #divIntroText {width: 100%;display: flex;flex-direction: column;align-items: center;}
#divPreQRCodeTemplateInfo #infoIcon {width: 50px;color: var(--info-backcolor);}
#divPreQRCodeTemplateInfo .subH1 {font-size: 60%;line-height: 1.2;margin: 5px 0 10px 0;}

/*
#divPreQRCodeInfo #divPreQRCodeInfoContent .subH1 {font-size: 60%;line-height: 1.2;margin: 5px 0 10px 0;}


#divPreQRCodeInfo {position: absolute;width:calc(90% - 30px);max-width:924px;z-index: inherit;}

#divPreQRCodeInfo #divPreQRCodeInfoContent {background-color: rgba(255, 255, 255, 0.975);padding: 20px;box-shadow: 0 5px 20px rgb(0 0 0 / 30%);z-index: 999999;text-align: center;}
#divPreQRCodeInfo #divPreQRCodeInfoContent .subH1 {font-size: 60%;line-height: 1.2;margin: 5px 0 10px 0;}

*/

/*#divInfoIcon {width: 100%;float: left;clear: left;height: 0;}*/
#divInfoIcon #divButtonInfo {cursor: pointer;font-size: 30px;float:right;}
/*
#divPreQRCodeInfo #divCloseButton {cursor: pointer;position: relative;left: -29px;width: 30px;top: 33px;font-size: 25px;background-color: #ffffff;line-height: 33px;}
#divPreQRCodeInfo #divPreQRCodeInfoContent #infoIcon {font-size: 40px;}
#divPreQRCodeInfo #divPreQRCodeInfoContent {background-color: rgba(255,255,255,0.975);padding: 20px;box-shadow: 0 5px 20px rgb(0 0 0 / 30%);z-index: 999999;text-align: center;}
#divPreQRCodeInfo #divPreQRCodeInfoContent .subH1 {font-size:60%;line-height: 1.2;margin: 5px 0 10px 0;}
#divPreQRCodeInfo #divPreQRCodeTemplateInfo h1 {text-align: center;padding: 10px 0;}
#divPreQRCodeInfo #howItWorks {font-size: 150%;margin-bottom: 10px;}
*/

.error-template-wrapper {font-family: Arial, sans-serif;background-color: #f2f2f2;color: #333;display: flex;justify-content: center;align-items: center;padding: 20px;
		/* Ensures it takes up space if the body is a flex container */
		flex: 1 0 auto;width: 100%;box-sizing: border-box;}
.error-template-box {text-align: center;background-color: #fff;padding: 30px 40px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);max-width: 500px;width: 100%;}
.error-template-box h1 {font-size: 1.8em;margin: 0 0 10px 0;color: #d9534f;}
.error-template-box p {font-size: 1.1em;margin: 0;}





/* --- Skeleton Loader Styles --- */

.skeleton-loader {
    padding: 15px;
}

.skeleton-line {
    height: 1em;
    border-radius: 4px;
    background-color: #e0e0e0; /* Fallback color */
    margin-bottom: 15px;
    /* Shimmer animation */
    background-image: linear-gradient(90deg, #e0e0e0 0px, #f5f5f5 40px, #e0e0e0 80px);
    background-size: 600px;
    animation: shimmer 1.5s infinite linear;
}

.skeleton-header {
    height: 1.5em;
    width: 60%;
    margin-bottom: 20px;
}

@keyframes shimmer {
    0% {
        background-position: -300px;
    }

    100% {
        background-position: 300px;
    }
}


/* Ensure calendar containers have positioning context */
.drp-calendar {
    position: relative !important;
}

/* Styling for the wrapper spans we created in JavaScript */
.select2-option-wrapper, .select2-selection-wrapper {
    display: block;
    width: 100%;
    padding: 6px 12px;
    margin: -6px -12px; /* Counteract Select2's default padding on the parent */
    box-sizing: border-box;
}


.isWeb .full-date-mobile{
    display: none;
}

.isMobile .full-date-web{
    display: none;
}

/* Make sure the text inside the spans is aligned correctly */
.select2-option-wrapper .location-name {
    float: left;
    color: white;
}

.select2-option-wrapper .location-hours {
    float: right;
    color: #555;
}

/* Clear the float to ensure proper height calculation */
.select2-option-wrapper::after {content: "";display: table;clear: both;}
.popup-overlay {position: fixed;inset: 0;z-index: 99999;background: rgba(0,0,0,0.6);}
.sessionPopupContent {position: relative;max-width: 420px;margin: 10% auto;background: #fff;padding: 24px;border-radius: 8px;}

/* Loader / Spinner */
.modal-loader {border: 5px solid #f3f3f3; /* Light grey */border-top: 5px solid #3498db; /* Blue */border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;margin: 20px auto;display: none; /* Hidden by default */}
@keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

/* Ensure the image container centers content */
/*.item-info-img-container {display: none;margin: 15px 0;text-align: center;min-height: 50px; }*/
/* Modal Background */


/* Modal Content Box */


/* Close Button */




/*****START-FINISHED-STYLES*****/
/*element styles*/
* {margin: 0px;padding: 0px;border: none;outline: none;box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
body {font-style: normal; padding-top: 0px;padding-right: 0 !important;font-family: var(--main-font);font-size: var(--main-fontSize);font-weight: var(--main-fontWeight);color: var(--main-color);line-height: var(--main-lineHeight);background-color: var(--main-backcolor);}
p {margin: 0 0 var(--gap);}
a,i, .reservation-summary, .languageChangeDiv, .listOptionImage, .scroll-btn {touch-action: manipulation;}
th,td {vertical-align: baseline;}
ul {list-style-type: none;}
input:focus-visible {outline: inherit;}
input[type=checkbox], input[type=radio] {cursor: pointer;}
input[type=checkbox]:focus, input[type=file]:focus, input[type=radio]:focus { outline: 0 none transparent;}
textarea {height: var(--input-selectHeight);}
textarea:focus {height: var(--textarea-focusHeight);}
.h1, h1 {font-size:var(--title-fontSize);}

a{color: var(--link-color);text-decoration: var(--link-text-decorationHover);}
a:hover, a:focus {color: var(--link-colorHover);text-decoration: var(--link-text-decorationHover);}

/*general styles*/
.displayNone {display: none !important;}
.mainContent {padding: 10px;}
.bodyMinimalHeigth {min-height: 200px;}  /* minimal for body templates */
.section-header, .summary-header {font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);color: var(--title-color);}
.cursorPointer {cursor: pointer;}
.requiredAstrik,.form-label{margin-bottom:var(--gap);}
.requiredAstrik {color: var(--error-color);}

/*buttons*/
.buttons, .button, .buttonLabel, .next-step {color: var(--button1-color);padding: var(--button1-padding);border: var(--button1-border);height: var(--button1-height);cursor: pointer;font-family: var(--button1-font);font-size: var(--button1-fontSize);font-weight: var(--button1-fontWeight);font-style: var(--button1-fontStyle);border-radius: var(--button1-borderRadius);background-color: var(--button1-backcolor);display: flex;flex-direction: row;align-items: center;width: 100%;flex-wrap: nowrap;justify-content: center;}
.buttons:hover, .button:hover, .buttonLabel:hover, .next-step:hover{background-color: var(--button1-backcolorHover);color: var(--button1-colorHover);border-color: var(--button1-backcolorHover);}
.button {display: flex;flex-direction: row;align-items: center;justify-content: center;touch-action: manipulation;line-height: 1;}
.button .buttonBody {display: flex;flex-direction: row;align-items: center;justify-content: center;flex-wrap: nowrap;height: 100%;width: 100%;}
.buttonText {display: flex;align-items: center;justify-content: center;}
.buttonHead {display: none;}
.buttonLarge  {min-width: var(--button-large-minWidth);background-color: var(--button-large-backcolor);color: var(--button-large-color);font-family: var(--button-large-font);font-size: var(--button-large-fontSize);font-weight: var(--button-large-fontWeight);padding: var(--button-large-padding);border:var(--button-large-border);border-radius:var(--button-large-borderRadius);text-transform:var(--button-large-textTransform);text-decoration:var(--button-large-textDecoration);font-style:var(--button-large-font-style);transition: var(--button-large-transition);}
.buttonLarge:hover{background-color: var(--button-large-backcolorHover);color: var(--button-large-colorHover);border:var(--button-large-borderHoverr);}
.buttonMedium {min-width: var(--button-medium-minWidth);background-color: var(--button-medium-backcolor);color: var(--button-medium-color);font-family: var(--button-medium-font);font-size: var(--button-medium-fontSize);font-weight: var(--button-medium-fontWeight);padding: var(--button-medium-padding);border:var(--button-medium-border);border-radius:var(--button-medium-borderRadius);text-transform:var(--button-medium-textTransform);text-decoration:var(--button-medium-textDecoration);font-style:var(--button-medium-font-style);transition: var(--button-meidium-transition);}
.buttonMedium:hover{background-color: var(--button-medium-backcolorHover);color: var(--button-medium-colorHover);border:var(--button-medium-borderHoverr);}
.buttonSmall  {min-width: var(--button-small-minWidth);background-color: var(--button-small-backcolor);color: var(--button-small-color);font-family: var(--button-small-font);font-size: var(--button-small-fontSize);font-weight: var(--button-small-fontWeight);padding: var(--button-small-padding);border:var(--button-small-border);border-radius:var(--button-small-borderRadius);text-transform:var(--button-small-textTransform);text-decoration:var(--button-small-textDecoration);font-style:var(--button-small-font-style);transition: var(--button-small-transition);}
.buttonSmall:hover{background-color: var(--button-small-backcolorHover);color: var(--button-small-colorHover);border:var(--button-small-borderHoverr);}
.button.descreseButton, .button.increaseButton, .button.itemOptionIncreaseButton, .button.itemOptionDescreseButton {width: 30px;height: 30px;min-width: inherit;border-radius: 15px;border: 0;font-size: 125%;display: flex;justify-content: center;align-items: center;padding: 0;    }
.next-step {display: none;}
.next-step .buttonHead {width: var(--link-arrow-size);height: var(--link-arrow-size);background-image: var(--button-large-arrow-image);background-size: var(--link-arrow-size) var(--link-arrow-size);background-repeat: no-repeat;background-position: center left;}
.step0 .next-step, .step1 #btnNextStep1, .step2 #btnNextStep2, .step3 #btnNextStep3 {display: block;}
.step1 #btnNextStep1.buttonDisable,.step3 #btnNextStep3.buttonDisable {display: none;}

/*form & select*/
.form-select {color:var(--input-color);max-width: 100%;width: 100%;padding: var(--input-padding);border-radius: var(--input-borderRadius);font-size: var(--input-fontSize);font-weight: var(--input-fontWeight);border: var(--input-border);line-height: var(--input-lineHeight);height: var(--input-selectHeight);background-color: var(--input-backcolor);display: flex;justify-content: space-between;align-items:center;}
.form-select:hover {background-color:var(--input-backcolorHover);}
.radio-container {padding: var(--gap-large);cursor:pointer;border: var(--input-border);border-radius: var(--input-borderRadius);background-color: var(--input-backcolor);transition: background-color 0.3s;display: flex;gap: var(--gap);flex-direction: column;}
.radio-container.deliveryDisbled {border-color: var(--disabled-color);}
.date-container {position: relative;color: var(--input-area-color); border: var(--input-area-border);border-radius: 0;background-color: var(--input-area-backcolor);padding: var(--input-area-padding);display: flex;justify-content: flex-start;align-items:center;height: var(--input-area-height);cursor: pointer;}
.big-radio {width: var(--radio-large);height: var(--radio-large);accent-color: var(--main-color);}

/*select2*/
.select2-container--default .select2-selection--single {background-color: var(--input-backcolor);border: var(--input-border);border-radius: var(--input-borderRadius);height: var(--input-selectHeight);padding: var(--input-padding);line-height: var(--input-lineHeight);}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: var(--input-lineHeight);color: var(--input-color);}
.select2-results__option {color: var(--input-color);}
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: var(--input-color);color: var(--input-backcolor)}
.select2-container--default .select2-results__option[aria-selected=true] {cursor: default;}
.select2-custom-chevron {background-color: var(--input-backcolor);display: flex;justify-content: center;align-items: center;border-radius: var(--input-borderRadius);padding: 0 var(--gap);}
.select2-custom-chevron svg {color: var(--input-color);}
.select2-results__option {color: var(--input-color);padding: var(--gap);margin-top:1px;}

/*placeholders*/
input::placeholder, textarea::placeholder {opacity: var(--input-placeholder-opacity);font-size:var(--placeholder-fontSize);font-family:var(--main-font);font-weight:var(--main-fontWeight);}
textarea::placeholder{opacity: var(--textarea-placeholder-opacity);}
#holidayAddressSearch::placeholder {opacity: 1 !important;}

/*content*/
#contentAndSummary {padding: var(--gap);}
/*header*/
#header {display: flex;flex-direction: row;justify-content: space-between;align-items: center;height: var(--header-height);padding:0;width: 100%;background-color: var(--header-backcolor);z-index: 4000;transition: var(--header-transition);box-shadow: var(--header-shadow)}
#headerInfo,#headerInfo #templateHeader{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;width: 100%;height:100%;}
#headerInfo {justify-content: center;max-width: var(--contentWidthMax);} 
/*header:language option*/
#header .languageChangeDiv {display:none;} /*WS3 language button*/
#header #page-menu-lang {display:none;} /*language menu*/
#header #page-menu-lang #langHorizontal{display:none;justify-content: space-evenly;width: calc(var(--language-icon-width) * 3);} /*WS language horizontal menu*/
#header #page-menu-lang #langVertical{display:none;} /*WS language vertical menu*/	

/* header template-Model1*/

#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 #page-row0 {max-width: 100%;display: none;}
#page-top #page-row1 {max-width: 100%;}
.lang1fixed #page-top #page-row1 {display: none;}
#page-top #page-row1 {background-color: var(--page-row1-backcolor);color: var(--page-row1-color);height: var(--page-row1-height);}
#page-top #page-row1 #page-menu {display: flex;justify-content: space-between;flex-wrap: nowrap;align-items: center;width: var(--contentWidth);margin: 0 auto;}
#page-top #page-row1 #page-menu #page-menu-title {display: none;}
#page-top #page-row1 #page-menu #page-menu-lang {display: flex;height: 100%;align-items: center;}
#page-top #page-row2 {max-width: 100%;display: none;}
#page-top #page-row2 {background-color: var(--page-row2-backcolor);color: var(--page-row2-color);height: var(--page-row2-height);border-bottom: var(--page-row2-borderbottom);}
#page-top #page-row2 #page-logo {display: flex;justify-content: space-between;align-items: center;width: var(--contentWidth);max-width: 100%;margin: 0 auto;}

#page-top #page-row2 #page-logo #partnerLogo {background-image: var(--logo);background-size: contain;background-repeat: no-repeat;height: var(--logo-height);width: var(--logo-width);}
#page-top #page-row2 #page-logo #partnerText {display:none;}
#page-top #page-row2 #page-logo #page-title {color: var(--title-color);font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);padding-right: var(--gap);}

/* header template-Model1*/
.header-m1 #page-partner {display:none;}
.header-m1 #page-company {display: flex;flex-shrink:0;justify-content:center;}
.header-m1 #page-company #page-company-details {display: flex;flex-direction: column;background-image: var(--logo);background-size: contain;background-repeat: no-repeat;height: var(--logo-height);width: var(--logo-width);}

/*language options*/
/*language option:WS3 language button*/
.languageChangeDiv {position: relative;}
.selectedLanguageDiv {background-color:var(--language-backcolor);display: flex;gap:var(--language-baseSize);padding: var(--language-baseSize) calc(var(--language-baseSize) * 2);border: var(--line-border);border-radius: var(--language-baseSize);align-items: center;cursor: pointer;}
.selectedLanguage {font-family:var(--language-font);font-size:var(--language-fontSize);font-weight:var(--language-fontWeight);}
.dropdownLanguageList {position: absolute;top: 100%;left: 0;right: 0;border: var(--language-border);border-top: none;background-color: var(--language-backcolor);z-index: 10;border-radius: 0 0 var(--language-baseSize) var(--language-baseSize);display: flex;align-items: center;flex-direction: column;}
.dropdownLanguageItem {padding: var(--language-baseSize) calc( var(--language-baseSize) *4 );font-size: var(--main-fontSize);transition: background-color 0.2s;border-radius: var(--language-baseSize);}
.dropdownLanguageItem:hover {background-color: var(--language-backcolorHover);}
/*language option:WS language menu*/
#header #page-menu-lang {padding: 0 calc(var(--gap) * 2 );}
.languageIcon {display:none;}
.lang1 #language2, .lang1 #language3,.lang2 #language1, .lang2 #language3,.lang3 #language1, .lang3 #language2{display:flex;}
.lang1 .dropdown, #header .dropdown ul li a#flagNL {background-image: url(https://cdn.cyclerent.com/CR/flags/svg-4x3/nl.svg);}
.lang2 .dropdown, #header .dropdown ul li a#flagDE {background-image: url(https://cdn.cyclerent.com/CR/flags/svg-4x3/de.svg);}
.lang3 .dropdown, #header .dropdown ul li a#flagEN {background-image: url(https://cdn.cyclerent.com/CR/flags/svg-4x3/gb.svg);}
/*language option:WS language horizontal menu*/
#header #page-menu-lang #langHorizontal {display: none;flex-direction: row;column-gap:var(--language-baseSize);justify-content: flex-start;align-items: center;flex-wrap: nowrap;font-size:var(--language-fontSize);}
#header #page-menu-lang #langHorizontal .languageIcon {align-items: center;flex-direction: row;flex-wrap: nowrap;}
#header #page-menu-lang #langHorizontal .languageIcon a {display: flex;align-items: center;flex-direction: row;flex-wrap: nowrap;column-gap: var(--language-baseSize);text-decoration: none;font-size: var(--language-fontSize);}
#header #page-menu-lang #langHorizontal .languageIcon a .langAbbr {display:none;}
#header #page-menu-lang #langHorizontal .languageIcon a .langName {display:none;}
#header #page-menu-lang #langHorizontal .languageIcon a .langName2 {display:none;}
#header #page-menu-lang #langHorizontal .languageIcon a .selectIcon {display: none;width: var(--select-icon-size);height: var(--language-fontSize); background-image: var(--select-icon-forward);background-repeat: no-repeat;background-position: center;}
#header #page-menu-lang #langHorizontal .languageIcon a img {height:var(--language-icon-height);width:var(--language-icon-width);}

/*language option:WS language vertical menu*/
#header .dropdown>ul, .dropdown>.options {overflow: hidden;}
#header .dropdown>ul, .dropdown>.options, .dropdown>.spacer {left: 0;min-width: 100%;position: absolute;top: 100%;z-index: 4100;height: 10.8px;}
#header .dropdown {cursor: pointer;position: relative;background-size: 25px auto;background-repeat: no-repeat;height: 30px;padding-left: var(--language-baseSize);text-align: left;display: flex;align-items: center;}
#header .dropdown:after {content: "";vertical-align: middle;display: inline-block;border: 0.35em solid transparent;border-top: 0.5em solid;position: absolute;right: 10px;top: calc(50% - 0.175em);right: 2px;color:var(--line-color);}
#header .dropdown:hover ul, .dropdown:focus ul, .dropdown:focus-within ul{display:block !important;}
#header .dropdown>ul {display: none;list-style-type: none;padding-inline-start: 0;height: auto;top: 40px;}
#header .dropdown ul:last-child {margin-bottom: 0 !important;margin-right: 0 !important;}
#header .dropdown>ul>li.active>a {color: #fff;}
#header .dropdown>ul>li>a {background-image: none;font-weight: normal;line-height: 1;padding: 0 var(--language-baseSize);margin-bottom: 0;border: 0 none;}
#header .dropdown>ul>li {padding: 0;line-height: 33px;background-color: transparent;}
#header .dropdown>ul>li>a:hover {color:var(--language-colorHover);border: 0 none;}
#header .dropdown>ul>li>a {background-image: none;background-size: 25px auto;background-repeat: no-repeat;height: 30px;text-align: left;text-decoration: none;}
#header .dropdown>ul>li.active {display: none;}
#header .dropdown, #header .dropdown>ul>li>a {font-family:var(--language-font);font-size: var(--language-fontSize);font-weight: var(--language-fontWeight);color: var(--language-color);background-position: 0 center;display: flex;flex-direction: row;column-gap: var(--gap);padding-left: 30px;align-items: center;}
#header .dropdown .langName {display: none;}
#header .dropdown .langAbbr {display: none;text-transform: uppercase;width:25px;height: 100%;flex-direction: column;justify-content: center;}
#header .dropdown .langSelectIcon {display: none;width: var(--select-icon-size);height: var(--select-icon-size); background-image: var(--select-icon-down);background-repeat: no-repeat;background-position: center;}
#header .dropdown:hover .langSelectIcon {background-image: var(--select-icon-up);}

/*footer*/
#footer {background: var(--footer-background);color: var(--footer-color);display: flex;justify-content: center;align-items: center;flex-direction: row;padding: var(--gap) 0;bottom: 0;width: 100%;position: relative;z-index: 1000;}
#footer, #footer a {font-size: var(--footer-fontSize);font-weight: var(--footer-fontWeight);}
#footerInfo {width: 100%;}
#footerInfo #footerCR {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center;column-gap: calc(var(--gap) * 2);}
#footerInfo #footerCR .CRonline{display: flex;height: 100%;align-items: center;}
#footerInfo #footerCR a {color: var(--footer-color);}
#footerInfo .CRnewLine {display: none;}
#footerInfo .CRsep {display:none;}

.WS3-Reservation.step1 #footer,.step801 #footer ,.step1011 #footer,.step404 #footer {position:absolute;}  /* set footer to bottom of screen */
.isMobile #footer {display: none;}
.isMobile.step0 #footer {display: block;}

/*a & link*/
a, .phoneNumber, .viewLoctionInMap, .change-link,#deliveryChangePeriodAction {color: var(--link-color);border-bottom: var(--link-border);text-decoration: var(--link-text-decoration);font-weight: var(--link-fontWeight);font-size: var(--link-fontSize);font-family: var(--link-font);}
a:hover, a:focus {color: var(--link-colorHover);border-bottom: var(--link-borderHover);text-decoration: var(--link-text-decorationHover);}
.link .linkBody,.linkBody {display: inline-flex;gap: var(--gap);align-items: center;flex-wrap: nowrap;}
.link .linkBody .linkIcon,.linkIcon {display: inline-flex;width: var(--link-arrow-size);height: var(--link-arrow-size);background-image:var(--link-arrow-image);background-size: var(--link-arrow-size) var(--link-arrow-size);background-repeat: no-repeat;background-position: center center;border-bottom: var(--link-border);}
.link .linkBody .linkText, #deliveryChangePeriodAction .linkText {display: flex;align-items: center;border-bottom: var(--link-border);}
.link:hover, .link:focus{ color: var(--link-colorHover);border-bottom: 0 none transparent;text-decoration: var(--link-text-decorationHover);}
.link:hover .linkBody .linkText, #deliveryChangePeriodAction:hover .linkText {color:var(--link-colorHover); border-bottom-color:var(--link-colorHover);}

/* date picker */
.datepicker-inline{width:var(--calendar-width);}
.date-picker {position: absolute;display: none;z-index: 1;}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {color:var(--calender-selected-color);background: var(--calender-selected-backcolor);border-radius:var(--calender-selected-borderRadius);}
.date-picker .datepicker {background-color: var(--calender-backcolor);color: var(--calender-color);border: none;box-shadow: none;border-bottom: var(--input-area-border);border-radius: var(--input-area-border);}
.datepicker.datepicker-inline{width: auto;}
.datepicker table {width: 100%;font-size: var(--main-medium-fontSize);}
.datepicker tr {background-color: var(--calender-backcolor);}
.datepicker .table-condensed tbody tr td, .datepicker .table-condensed tbody tr th {padding: 5px 7px;border-radius: 0;font-weight: normal;}
.datepicker table tr td.highlighted { background: var(--calender-backcolorAlt);}
.date-picker .datepicker table tr td.highlighted {background: transparent;}
.datepicker .datepicker-switch, .datepicker .next, .datepicker .prev {color: var(--calender-color2);background-color: transparent;}
.datepicker .datepicker-switch {font-weight: var(--title-fontWeight);}
.datepicker .cw {font-size: calc( var(--calender-fontSize) * 0.75 );width: var(--calender-fontSize);padding: 0 2px 0 5px;color: var(--calender-color2);}
.datepicker .next.disabled, .datepicker .prev.disabled {visibility: unset;color: transparent;pointer-events: none;}
.datepicker thead tr:nth-child(2) {/*border-bottom: 3px solid #FFFFFF;*/}
.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {color: var(--calender-color2) !important;background-image: none !important;background-color: var(--calender-backcolor) !important;border-radius: 0;}
.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] {background-color: var(--calender-selected-backcolor);color: var(--calender-selected-color);background-image: none;border-radius:var(--calender-selected-borderRadius);}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover,.datepicker table tr td.today.disabled {color: var(--calender-disabled-color) !important;background-color: var(--calender-disabled-backcolor) !important;}
.datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover {color: var(--calender-disabled-color);background-color: var(--calender-disabled-backcolor);}
.datepicker table tr td span {display: block;width: calc( var(--calendar-width) * 0.23 );height: calc( var(--calendar-width) * 0.23 );line-height: calc( var(--calendar-width) * 0.23 );float: left;margin: 1%;cursor: pointer;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;display: flex;align-items: center;justify-content: center;}
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] {background-color: var(--calender-selected-backcolor);background-image: none;border-radius: var(--calender-selected-borderRadius);}
.datepicker table tr td span.focused, .datepicker table tr td span:hover {background: transparent;}
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover {background-color: var(--button1-backcolor);color: var(--button1-color);background-image: none;border-radius: 50%;}
.datepicker table tr td.disable.day.focused, .datepicker table tr td.disabled.day:hover {background-color: var(--calender-disabled-backcolor);color: var(--calender-disabled-color);}

.WS3-Event .datepicker .cw, .WS3-Event .datepicker .dow {font-size: calc( var(--calender-fontSize) * 0.5 );font-weight:normal;}

/* daterange picker */
.daterangepicker{font-family:var(--calender-font);font-size:var(--calender-fontSize);color: var(--calender-color);background-color: var(--calender-backcolor);}

/* Mobile-first styling */
#bodyContainer {max-width: 100%;box-shadow: none;}
#bodyContainer.step0 {display: flex;flex-direction: column;align-items: center;}
#mainContent {border-top-left-radius: var(--step-borderRadius);border-top-right-radius: var(--step-borderRadius);padding-bottom:var(--gap);}
.pageHeading {color: var(--title-color);font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);letter-spacing: var(--title-letter-spacing);line-height:var(--title-lineHeight);}

/*summary*/
#bookingSummary.isMobileSummary {transform: translateY(0); /* Slide in to view */opacity: 1;transition: transform 0.4s ease-out, opacity 0.1s ease-out;}
#bookingSummary.isWebSummay {transform: translateY(0); /* Start position (above the viewport) */opacity: 1;}
#extrasSummaryDiv{display: none;}
.productsToSelect #extrasSummaryDiv{display: block;}
.section-title {font-size: var(--main-fontSize);font-weight: var(--title-fontWeight);display: flex;justify-content: space-between;}
.bookingSummaryBorder {border-bottom: var(--line-border);border-top: var(--line-border);padding: var(--gap) 0;line-height: var(--main-lineHeightAlt);}
.bookingSummaryResult {font-size: var(--main-medium-fontSize);}
.bookingSummaryDetailsWrapper {display: flex;justify-content: space-between;align-items: flex-start;flex-direction: column;gap: var(--gap-large);}
.pickupDelivaryLocation {display: flex;justify-content: space-between;align-items: center;}
.isDelivery .locationPickupDeliveryFreeTextDiv{display: none;}
.divTotalCalculation {display: flex;justify-content: space-between;}
.totalAmountToPayCalculation {display: flex;justify-content: space-between;border-top: var(--line-border);font-size: var(--main-fontSize);font-weight: var(--title-fontWeight);padding-top: var(--gap);}
.summary-row, #amountToPayDetails {display: flex;flex-direction: row;justify-content: space-between;}
#amountToPaySection {border-top: var(--line-border);font-size: var(--main-fontSize);font-weight: var(--title-fontWeight);padding-top: var(--gap);margin-left: var(--gap);}
.summary-right {display: flex;justify-content: flex-end;}
.summary-details-container {margin-top: var(--gap);margin-left: var(--gap);}
.dayTextCountDisplay {display: none;flex-direction: row;column-gap: var(--gap-text);align-items: center;display: none;}
.dayBased .dayTextCountDisplay {display: flex;}
.paymentBookingSummaryBorder {border-top: var(--line-border);padding-top: var(--gap);}
.bookingSummaryMultipleDetails {display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 100%;}
.bookingSummaryDetails {display: flex;gap: var(--gap);max-width: 80%;align-items: center;}
.countPrice {display: flex;font-size: var(--main-fontSize);font-weight: var(--title-fontWeight);align-items: flex-start;}
/*.bookingSummaryName {font-size: var(--main-medium-fontSize);line-height: var(--main-lineHeightAlt);}*/
.bookingSummaryUnitPrice {display: flex;column-gap: var(--gap-text);display: none;font-size: var(--main-small-fontSize);color: var(--main-color3);line-height: var(--main-lineHeightAlt);}
.bookingSummaryUnitPriceCurrency {display: flex;column-gap:var(--gap-text);}
.bookingSummaryTotalPriceCurrency {display: flex;column-gap: var(--gap-text);justify-content: flex-end;flex-direction: row;}
.total-amount-section {display: flex;justify-content: space-between;}
.totalPriceAndCurrency {display: flex;column-gap: var(--gap-text);}
.bookingSummaryCloseButton {background: white;border: 2px solid #ddd;padding: 7px;border-radius: 5px;}
.close-button {display: flex;justify-content: center;}

/*summary date*/
.flexible-date-container{display: flex;flex-direction: row;align-items: center;column-gap: var(--gap-text);}
#startDateDisplay,#endDateDisplay,#hourTimeDisplay{display:flex;align-items: center;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;column-gap: var(--gap-text);}
.periodBased #startDateDisplay, #endDateDisplay, #hourTimeDisplay {justify-content: center;}
#startDateDisplay .date-part{display:inline-flex;}
#startDateDisplay .date-part-full {display:none;}
#startDateDisplay .time-label {display:none;}
#startDateDisplay .time-part {display:none;}

#upToDateDisplay .separator-text {display:inline-flex;padding:0 var(--gap-text);}
#upToDateDisplay .separator-symbol{display:none;}

#endDateDisplay .date-part {display:inline-flex;}
#endDateDisplay .date-part-full {display:none;}
#endDateDisplay .time-label {display:none;}
#endDateDisplay .separator-symbol {display:none;}
#endDateDisplay .time-part {display:none;}

.isSameDay #startDateDisplay .date-part, .isSameDay #upToDateDisplay .seperator-symbol, .isSameDay #endDateDisplay .date-part,.isSameDay  #endDateDisplay .date-part-full {display:none;}
.isSameDay #startDateDisplay .date-part-full {display: inline-flex;}
.isSameDay #upToDateDisplay .separator-text {padding:0;}

.periodBased #startDateDisplay .time-part, .periodBased #endDateDisplay .time-part {display: inline-flex;}
.periodBased.isSameDay #startDateDisplay .time-label, .periodBased.isSameDay #startDateDisplay .time-part {display: inline-flex;}
.periodBased.isSameDay #startDateDisplay .time-label {padding-left:var(--gap-text);}
   

#hourTimeDisplay {display:none;}

/*step menu*/
.stepContainer {background-color: transparent;border-bottom: var(--line-border);}
.stepIndicator {display: flex;justify-content: space-between;padding:var(--gap) var(--gap-large);}
.lblStep {display: flex;flex-direction: row-reverse;align-items: center;justify-content: flex-start;}
.lblStep .lblStepSpn {display: flex;gap: var(--gap);align-items: center;}
.lblStep span {display: flex;flex-wrap: nowrap;column-gap: var(--gap);}
.lblStep .stepNum {min-width: 125px;}
.lblStep .stepNumSep {display: none;}
.lblStep .checkIcon {margin-left: calc(-2 * var(--gap));font-size: 140%;}
.lblStep .checkIcon .fa-secondary {fill: transparent;opacity: 1;}
.lblStep .checkIcon .fa-primary {color: var(--checkMark-color);opacity: 1;}
#lblStepSpn5 {display: flex;}

#stepIndicator1 {background-color:var(--step-backcolor);border-top-left-radius: var(--step-borderRadius);border-top-right-radius: var(--step-borderRadius);}
.step2 #stepIndicator2, .step3 #stepIndicator3, .step4 #stepIndicator4, .step5 #stepIndicator5, .step6 #stepIndicator6, .step7 #stepIndicator7 {
    background-color: var(--step-backcolor);border-top-left-radius: var(--step-borderRadius);border-top-right-radius: var(--step-borderRadius);margin-top: var(--gap);}
.stepDone .stepIndicator {background-color: var(--step-backcolor);color: var(--step-done-color);}

/*popup*/
.popup-overlay {display: flex;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;z-index: 100;}
.closePopupForImage {position: absolute;top: 0px;right: 0;padding: var(--gap);z-index: 11;}
.closePopupHeightWidth {height: var(--popup-close-button-size);width: var(--popup-close-button-size);}
.mapPopupContent {margin: var(--gap-large);display: flex;background: var(--popup-backcolor);width: var(--popup-width);height: var(--popup-height);max-width: var(--popup-max-width);position: relative;align-items: center; justify-content: center;border-radius: var(--popup-borderRadius);}
.popup-content {display: flex;background: #FFFFFF;padding: var(--popup-padding);border-radius:var(--popup-borderRadius); width: var(--popup-width);max-width: var(--popup-max-width);/*height: 325px;*/position: relative;align-items: center;margin: var(--gap-large);justify-content: center;}
.paginationForImage {position: absolute;bottom: 0px;right: 0;padding: var(--gap);z-index: 100;display: flex;column-gap: var(--gap);align-items: center;}
.pagination-btn {cursor: pointer;padding: var(--gap);border-radius: var(--popup-borderRadius);border: var(--line-border);background-color: var(--popup-backcolor);}

/*content*/
#introPageContent {width:100%;max-width:var(--contentWidthMax);margin: auto;padding: var(--gap);}
#introPageContent #howItWorks {font-size: var(--main-fontSize);}
#introPageContent ul {margin-left: 20px;list-style-type: disc;}

/*step1 start*/
.contact-info{line-height: var(--main-lineHeightAlt);display: flex;flex-direction: row;flex-wrap: wrap;column-gap: var(--gap-text);}

/*step1 eventtypeID=3*/
.resEventTypeID3.step1 .pageHeading{display:none;}
.eventDateSelection {display:none;}
.resEventTypeID3 .eventDateSelection {display:block;font-size: var(--title-fontSize);}
.timeslot-section .dropdown-list {position: inherit;display: flex;flex-wrap: wrap;gap:var(--gap);padding:var(--gap);border: var(--input-border-focus);border-top: 0 none;}
.timeslot-section .dropdown-list label{	color: var(--button2-color);background-color: var(--button2-backcolor);border: var(--button2-border);border-radius: var(--button2-borderRadius);padding: var(--button2-padding);font-size: var(--button2-fontSize);font-weight: var(--button2-fontWeight);font-family: var(--button2-font);}
.timeslot-section .dropdown-list label:hover{color: var(--button2-colorHover);background-color: var(--button2-backcolorHover);border: var(--button2-borderHover);}
.timeslot-section .dropdown-list label input {display:none;}
/*step1 end*/

/*step2 start*/
.divPickupDeliveryLabel {display: flex;justify-content: space-between;font-size: var(--main-large-fontSize);align-items: center;flex-direction: row;width: 100%;}
.locationSelection {display: flex;flex-direction: column;gap: var(--gap);}
.deliveryDisbled input#delivery {accent-color: var(--disabled-color);opacity: 0.3;}
.lblpickupDeliveryBold {font-weight: var(--title-fontWeight);display: flex;align-items: center;flex-direction: row;gap: var(--gap);}
.deliveryDisbled,.deliveryDisbled .divPickupDeliveryLabel, .deliveryDisbled .locationSelectionOption, .deliveryDisbled .lblpickupDeliveryBold {color: var(--disabled-color);pointer-events: none;}

/* location pickup selection*/
/* available */
li:has(span.location-available) {color:var(--select-location-available);}		
/* unavailable */
.select2-container--default .select2-results__option[aria-disabled=true] {color:var(--select-location-unavailable);display: none;}
li:has(span.location-unavailable) {color:var(--select-location-unavailable);}		

li:has(span.location-partial-match) {color:var(--select-location-partial);background-color: #ff8c00;}		/* partial match */

/*step2 location promotion*/
.promotion {display: flex;justify-content: space-between;align-items: center;background-color: var(--promo-colorback);border: var(--promo-border);padding:var(--gap);border-radius: 0;}
.promotion-container {display: var(--promo-display);flex-direction: column;gap: var(--gap);}
.promotion-item {display: flex;gap: calc( var(--gap) / 2 );font-size: var(--main-large-fontSize);color: var(--promo-color);line-height: normal;}
/*step2 location map*/
.showMap {width: 100%;height: 100%;border-radius:var(--main-borderRadius);}
.showMap svg.my-custom-svg-marker {fill: var(--marker-backcolor);}
/*.viewLoctionInMap {text-decoration:var(--link-text-decoration);color: var(--link-color);width: fit-content;}*/
#deliveryChangePeriodAction {display: flex;align-items: center;column-gap: var(--gap);}

/*step2 end*/

/*step3 start*/
/*step3: itemtype groups*/
.rdbOptionsInline:checked + label, .rdbOptionsInline + label:hover {background-color: var(--button2-backcolorHover);color: var(--button2-colorHover);border-color:var(--button2-backcolorHover);}
.rdbOptionsInline:checked + label{cursor:default;}
/*step3: itemtype list*/
.itemGroupfilterWraper {display: flex;gap: var(--gap);max-width: 100%;overflow-x: auto;flex-wrap: wrap;}
.itemGroupfilterWraper::-webkit-scrollbar {display: none;}
.itemGroupTypeFilter {margin-right: -20px;position: sticky;top: 0;background-color: var(--main-backcolor);overflow: hidden;z-index: 1;}
.itemGroupTypeFilter .blur-right {position: absolute;top: 0;left: auto;right: -8px;width: 26px;height: 100%;background-color: white;filter: blur(5px);z-index: 1;}
.itemGroupTypeFilter label {padding: var(--button2-padding);border-radius: var(--button2-borderRadius);background-color: var(--button2-backcolor);color: var(--button2-color);border: var(--button2-border);font-family: var(--button2-font);font-size: var(--button2-fontSize);font-weight: var(--button2-fontWeight);white-space: nowrap;display: flex;align-items: center;justify-content: center;margin-bottom: 0;width: inherit;height: inherit;display: inline-block;line-height: 1;}
.listOptionDiv {display: flex;flex-wrap: wrap;justify-content: space-between;row-gap: var(--gap);height: calc(100% - 120px);overflow: auto;align-content: flex-start;/*color: var(--main-color2);*/}
.itemOptionNumberInput {display: flex;gap: var(--gap);justify-content: center;align-items: center;}
.listOptionDetails {display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;gap: var(--gap);}
.listOptionDetails .desciptionShort {line-height: 1.2;margin-bottom: calc(var(--gap) / 2 );float: left;width: 100%;overflow: hidden;}
.listOption ul {list-style: disc;padding-left: 20px;display: flex;flex-direction: column;}
.partialViewContainer {padding: var(--gap-large);padding-top: 0;display: flex;flex-direction: column;gap: var(--gap);background-color: var(--main-backcolor);}
.rdbItemTypeGroup {display: none !important;}
.numberInputAmount {font-weight:var(--title-fontWeight);display: flex;align-items: center;flex-direction: row;cursor: default;flex-wrap:wrap;column-gap:var(--gap-text);}
.divAmountTxt {/*margin-top: -5px;font-weight: 100;color: var(--main-color3);*/}
.listOptionName {width: 100%;display: flex;align-items: center;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;}
.listOptionName .nameLabel > span {font-weight: var(--subtitle-fontWeight);font-size: var(--subtitle-fontSize);color: var(--subtitle-color);font-family: var(--subtitle-font);margin-bottom: var(--subtitle-margin-bottom);}
.listOption.itemtypeSoldOut .desciptionShort, .listOption.itemtypeSoldOut .numberInputAmount, .listOption.itemtypeSoldOut img, .listOption.itemtypeSoldOut .moreInfoWrapper {opacity: 0.5;}
.listOption.itemtypeSoldOut .numberInputNumber {display: none;}
.listOption .divItemTypeSoldOutMessage {color: var(--error-color);}
.itemOptionList {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;padding: var(--gap);border-top: var(--line-border);border-top-color: var(--main-backcolor);}
.optionListHeadingDiv {padding: var(--gap-large) var(--gap);font-weight: var(--subtitle-fontWeight);font-size: var(--subtitle-fontSize);color: var(--subtitle-color);}
.divItemOptionInfo {display: flex;flex-direction: row;column-gap: var(--gap);align-items: center;}

/*step3: item type more info*/
.details-section {display: flex;gap: var(--gap);flex-direction: column;}
.allItemImages .magnifying-icon {display: none;}
.allItemImages .listOptionImage {min-width: 85px;max-height: 75px;}
.moreInfoWrapper {width: 100%;margin-top: var(--gap);}
.moreInfoAccessories {display: flex;flex-wrap: wrap;flex-direction: row !important;font-size: var(--main-small-fontSize);column-gap: var(--gap);row-gap: normal;padding-left: 0 !important;}
.moreInfoWrapper .itemTypePeriod {display: flex;align-items: center;column-gap: var(--gap-large);}
.moreInfoWrapper .itemTypePeriodDetail {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
.moreInfoWrapper .itemTypePeriodDetailName{font-size: var(--main-small-fontSize);}

/*step3: accessories popup*/
.item-info-modal {position: fixed;z-index: 99999;left: 0;top: 0;width: 100%;max-width: var(--mainContent-max-width);height: 100%;overflow: auto;background-color: rgba(0,0,0,0.5);display: none;justify-content: center;align-items: center;}
.item-info-content {background-color: var(--main-backcolor);padding: var(--popup-padding);border: var(--popup-border);width: 90%;max-width: var(--popup-max-width);border-radius: var(--popup-borderRadius);position: relative;box-shadow: var(--popup-shadow);animation: fadeIn 0.3s;}
.item-info-content {-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10 and IE 11 */user-select: none; /* Standard syntax *//* ... existing styles ... */}
.item-info-title {margin-top: 0;font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);margin-right: 30px;margin-bottom: var(--title-margin-bottom);}
.item-info-desc {font-size: 1.5rem; /* Increased size */color: blue;line-height: 1.5;color: #333;}
.item-info-img-container {display: none;display: none;margin: var(--gap);text-align: center;min-height: 50px;}
.item-info-img {max-height: 150px;width: auto;max-width: 100%;border-radius: 4px;object-fit: contain;}
.item-info-img {/* Disable the long-press menu on iOS */-webkit-touch-callout: none;/* Ensure touches still work for pausing */pointer-events: auto;}
.item-info-close-btn {color: #aaa;float: right;font-size: 30px;font-weight: bold;cursor: pointer;position: absolute;right:0;top:0;margin: var(--gap);}
.item-info-close-btn:hover {color: black;}
/* Timer Bar */
.timer-bar-wrapper {position: absolute;width: 100%;/* CLIENT CONTROL: Position of the bar */
    bottom: 0; /* Change to 'top: 0;' to move bar to the top */
    left: 0;height: 5px; /* CLIENT CONTROL: Thickness of the bar */
    overflow: hidden;background-color: rgba(0,0,0,0.1); /* Optional: dimmed background track */
	margin-top: var(--gap-large);border-radius: var(--popup-bordeerRadius);
}
/* Animation */
@keyframes fadeIn {
    from {opacity: 0;transform: translateY(-10px);}
    to {opacity: 1;transform: translateY(0);}
}
/*actual Timer Bar*/
.timer-bar {width: 100%;height: 100%;background-color: var(--base-color);transform-origin: center;} /*Start full*/
.timer-bar.timer-running {animation-name: timer-shrink;animation-timing-function: linear;animation-fill-mode: forwards;} /*State: Running*/
.timer-bar.timer-paused {animation-play-state: paused;background-color: var(--positive-color);}  /*State: Paused*/
/* --- The Animation Definition --- */
@keyframes timer-shrink {
    from {transform: scaleX(1);} /* Full Width */
    to {transform: scaleX(0);} /* Empty Width */ 
}
/*step3 end*/

/*step4*/

/*step5: user data*/
.label-container {display: flex;font-size: initial;gap: var(--gap-text);align-items: flex-end;color: var(--main-color2);font-weight: var(--title-fontWeight);}
.input-personal-details {display: flex;padding-top: var(--gap);width:100%;}
.input-personal-details .form-select, #divRemark .form-select {background-color: var(--input-backcolor);border: var(--input-border);}
#luggageTransportPromo{display: none;}
.personalDetailsHeader {display: none;}
.holiday-address-item {padding: var(--input-padding);}
#streetAndStreetNumberDiv, #zipCodeAndPlaceDiv {display: flex;justify-content: space-between;flex-direction: row;align-items: center;column-gap: var(--gap);}
#divStreet,#divPlace {width: inherit;flex: 3 0 70%;}
#divStreetNumber,#divZipCode {flex: 1 0 30%;width: inherit;flex: 1 0 calc(30% - var(--gap));}
#divRemark {display: flex;flex-direction: column;row-gap: var(--gap);}
.step5 #btnNextStep5 {display: block;}
/*step5 end*/

/*step6*/
#paymentButtonInfo {display: none;}
/*step6 end*/

/*after payment*/
.afterpayment .buttonLarge {width: fit-content;padding: var(--button-large-padding);padding: 0 var(--gap-large);}
.afterpayment #btnStartNewReservation {display: none;}
/*after payment end*/

/*session expired*/
#sessionExpiredContent {background-color: var(--main-backcolor);padding: var(--popup-padding);border-radius: var(--popup-borderRadius);max-width:var(--popup-max-width);width:var(--popup-width);}
.sorryText {margin-bottom: var(--gap-large);float: left;width:100%;}
#divStartNewReservation{margin-top: var(--gap-large);}


/*showtext:show fields to with variable data*/
.showtext .contact-info, .showtext .promotion.globalBorderRadius ,.showtext #paymentButtonInfo,
.showtext #msgPickupInfo , .showtext #deliveryLocationDiv 
	{display: inherit !important;background-color: var(--test-section-backcolor);}	
.showtext [common-resource-key] {background-color:var(--test-resource-common);}
.showtext [merchant-resource-key] {background-color:var(--test-resource-merchant);}
.showtext [webshop-resource-key] {background-color:var(--test-resource-webshop);}
.showtext [webshopevent-resource-key] {background-color:var(--test-resource-webshopevent);}
.showtext .CR-WSversion{display:inline-block !important;background-color: var(--test-info-backcolor);}
.showtext .templateContent {background-color: var(--test-template-backcolor);}
.showtext .templatePromo {background-color: var(--test-templatePromo-backcolor);}

/*help page*/
#help-content {display: flex;flex-direction: column;gap: var(--gap);max-width: var(--contentWidthMax);margin: 0 auto;row-gap: var(--gap-large);}
#help-content .language {position: inherit; }
#help-content .headerTitle {color: var(--title-color);font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);line-height:var(--title-lineHeight);letter-spacing:var(--title-letter-spacing);margin-bottom:var(--title-margin-bottom);}
#help-content .sectionTitle{color: var(--title-color);font-size: var(--main-medium-fontSize);font-weight: var(--title-fontWeight);}
#help-content th,#help-content td  {padding: var(--gap-text);}
#help-content tr:nth-child(even) {background-color:var(--table-rowAlt-backcolor);}
#help-content #parameterOverview td:nth-child(1) {min-width: 15%;}
#help-content #parameterOverview td:nth-child(3), #help-content .width-example,#help-content #parameterOverview td td:nth-child(1) {width: 230px;}
#help-content #parameterOverview .optionsTable {font-size: var(--main-small-fontSize);line-height: var(--main-lineHeightAlt);}
#help-content .tableRemark {font-size: var(--main-small-fontSize);font-style: italic;line-height: var(--main-lineHeightAlt);margin-top:var(--gap);}
#help-content .divExample {   margin-bottom: var(--title-margin-bottom);}
#help-content .valuecode ,#help-content .tour, #help-content .help {display:none;}

/*Desktop styles*/
@media (min-width: 768px) {

    .isWeb #languageChangeDiv {position: absolute;right: 0;}
    .contentAndSummary, #header, #footerInfo, .contentAndSummaryForPickup {max-width: 1000px;margin: 0 auto;}
    .spnSummaryHeader {
        display: inline-block;
        padding: 10px 20px;
        color: var(--title-color);
        font-weight: var(--title-fontWeight);
        font-size: var(--title-fontSize);
        text-align: center;
    }
    #mainContent, .stepContainer {width: 100%;max-width: var(--mainContent-max-width) !important;left: 0;}
    #contentAndSummary {display: flex;flex-direction: row;justify-content: space-between;    }
    #bookingSummary {max-width: var(--bookingSummary-max-width)350px;height: 100% !important;justify-content: unset;}
    .isWebSummay .bookingSummaylbl {font-size: var(--title-fontSize);display: flex;justify-content: center;}
    .ticket {width: 400px;border-radius: var(--main-borderRadius);}
    /* Top perforated effect */
   .ticket::before {
       /*     content: "";
            position: absolute;
            top: -10px;
            left: 0;
            width: 100%;
            height: 20px;
            background: radial-gradient(circle, #F1F3EF 45%, transparent 0%) repeat-x;
            background-size: 24px 24px;*/
        }
}
@media (min-width:640px) and (max-width:1023px){  }
@media (min-width:480px) and (max-width:639px) {
    body {--gap: 7.5px;}

    /*header*/
    #header {padding: var(--gap-large);padding-right: 0;    }

    /*step 1*/
    .full-date {font-size: var(--main-fontSize);}

    /*step3*/
    .listOptionImage, .btnMoreInfo {min-width: 140px;}
    .itemGroupfilterWraper {flex-wrap: nowrap;}
    .afterpayment .buttonLarge {width: 100%;}
}

@media (min-width:320px) and (max-width:479px) {

    body {
		--gap: 5px;
    }

    /*step 1*/
    .full-date {font-size: calc(var(--main-fontSize) - 1px);line-height: calc(var(--main-lineHeight) * .9);}
	
    /*step3*/
    .listOptionImage, .btnMoreInfo {min-width: 120px;}
    .itemGroupfilterWraper {flex-wrap: nowrap;}
    .divItemTypeBrandAndCost {justify-content: space-between;}
    .afterpayment .buttonLarge {width: 100%;}
}
/*****END-FINISHED-STYLES*****/

/*****STYLES-TO-REMOVE-after-version-2.30*****/
.header .dropdown:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    border: 0.35em solid transparent;
    border-top: 0.5em solid;
    position: absolute;
    right: 10px;
    top: calc(50% - 0.175em);
    right: -20px;
    color: var(--line-color);
	display:none;
}
#headerinfo{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;width: 100%;height:100%;}


#footerinfo {width: 100%;}
#footerinfo #footerB {display: flex;justify-content: center;}
#footerinfo #footerB div {display: flex;column-gap: var(--gap);}
#footerContent {display: flex;justify-content: center;flex-direction: row;flex-wrap: wrap;align-items: center;align-content: flex-start;}
#footerinfo #footerCR {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center;column-gap: calc(var(--gap) * 2);}
#footerinfo #footerCR .CRonline{display: flex;height: 100%;align-items: center;}
#footerinfo #footerCR a {color: var(--footer-color);font-weight: inherit;font-family: inherit;}
#footerinfo .CRnewLine {display: none;}
#footerinfo .CRsep {display:none;}
.bookingSummaryBroder {border-bottom: var(--line-border);border-top: var(--line-border);padding: var(--gap) 0;font-size: var(--main-medium-fontSize);}
.paymentBookingSummaryBroder {border-top: var(--line-border);padding-top: var(--gap);}
.divPickupDeliveryLable {display: flex;justify-content: space-between;font-size: var(--main-large-fontSize);align-items: center;flex-direction: row;width: 100%;}
.locationSelction {display: flex;flex-direction: column;gap: var(--gap);}