/*
CYCLERENT webshop3 CSS
project: generic
version: 1.22
Date: 2025-09-02
*/

body {
    --main-fontSize: 18px;
    --main-small-fontSize: 12px;
    --main-medium-fontSize: 15px;
    --main-large-fontSize: 21px;
    --main-larger-fontSize: 24px;
	
    --button-large-fontSize: var(--main-large-fontSize);
    --button-large-padding: 10px 20px;
    --button-medium-fontSize: var(--main-medium-fontSize);
    --button-medium-padding: 5px 10px;
    --button-medium-minWidth: 100px;    
	--button-small-fontSize: var(--main-small-fontSize);
    --button-small-padding: 2.5px 5px;
    --button-small-minWidth: 75px;
	
	--info-backcolor:#4a69bd;	
    --gap: 10px;
    --gap-large: 20px;
}

body {
    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);
}

* {
    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;
}

.FGinfo {color: var(--info-backcolor);}

/* Mobile-first styling */
.bodyContainer {
    /*position: relative;  */
    max-width: 100%;
    box-shadow: none;
}

#mainContent {
    border-top-left-radius: var(--main-borderRadius);
    border-top-right-radius: var--main-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);
}

.stepContainer {
    background-color: transparent;
    border-bottom: var(--line-border);
}

#stepIndicator1 {
    background-color: #ffffff;
    border-top-left-radius: var(--main-borderRadius);
    border-top-right-radius: var(--main-borderRadius);
}

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

.stepDone .stepIndicator {
    background-color: #ffffff;
    color: var(--main-color3);
}

/*
#stepContainer1, .step3 #stepContainer2, .step4 #stepContainer3, .step5 #stepContainer4 {background-color: #FFFFFF;border-top-left-radius: 10px;border-top-right-radius: 10px;margin-bottom: 10px;border-color: var(--main-color3);}
.step3 #stepContainer1, 
.step4 #stepContainer1, .step4 #stepContainer2, .step4 #stepContainer3 {margin-bottom: 0;}


.stepContainer.stepDone, .step2 #stepContainer1, .step2 #stepContainer1, .step3 #stepContainer1,.step4 #stepContainer1,.step5 #stepContainer1 {
	background-color: #ffffff;		}

.stepContainer.stepDone, #stepIndicator1, .step2 #stepIndicator1, .step3 #stepIndicator1, .step4 #stepIndicator1, .step5 #stepIndicator1,
.step2 #stepIndicator2, .step3 #stepIndicator2, .step4 #stepIndicator2, .step5 #stepIndicator2,
.step3 #stepIndicator3, .step4 #stepIndicator3, .step5 #stepIndicator3,
.step4 #stepIndicator4, .step5 #stepIndicator4,
.step5 #stepIndicator5 {
    background-color: #ffffff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
*/
.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;
}

.moreInfoWrapper {
    width: 100%;
}

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

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

/*
input[type="radio"] + label, .cssRadio input[type="radio"] + label {
    padding-left: 27px;
    height: 20px;
    display: inline-block;
    line-height: 22px;
    background-repeat: no-repeat;
    background-position: 0 0;
    vertical-align: middle;
    cursor: pointer;
    font-weight: normal;
    background-image: url(https://cdn.cyclerent.com/CR/radiobutton/radiobutton.svg);
    background-size: 20px 40px;
    background-repeat: no-repeat;
}
input[type="radio"] + label, .cssRadio input[type="radio"] + label {
    background-image: url(https://cdn.cyclerent.com/CR/radiobutton/radiobutton-F56A14.svg);
}

input[type="radio"]:checked + label, .cssRadio input[type="radio"]:checked + label {
    background-position: 0 -20px;
}
*/

/*moreInfo accessories*/
.moreInfoAccessoriesText {
    padding-right: var(--gap-large);
}

    .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;
    }

/*.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;
}

.showMap {
    width: 100%;
    height: 100%;
    border-radius: 5px
}

.viewLoctionInMap {text-decoration: underline;color: var(--button1-backcolor);width: fit-content;}
.locationInMap {
    background: yellow;
    padding: 5px;
}

.mapPopupContent {
    margin: 20px;
    display: flex;
    background: white;
    width: 450px;
    height: 400px;
    max-width: 600px;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.popup-content {
    display: flex;
    background: white;
    padding: 20px;
    border-radius: 5px;
    width: 450px;
    height: 325px;
    max-width: 600px;
    position: relative;
    align-items: center;
    margin: 20px;
    justify-content: center;
}

.closePopupForImage {
    position: absolute;
    top: 0px;
    right: 0;
    padding: 20px;
    z-index: 11;
}

.paginationForImage {
    position: absolute;
    bottom: 0px;
    right: 0;
    padding: 20px;
    z-index: 100;
    font-size: larger;
}

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

.closePopupHeightWidth {
    height: 33px;
    width: 33px;
}

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


.pagination-btn {
    background: white;
    border: 2px solid #ccc;
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 5px;
}
/*div#itemMoreInfo_3 {display: flex;flex-direction: column;gap: 11px;}*/
.itemTypeBrandName {
    display: flex;
    gap: var(--gap);
    justify-content: flex-end;
}

.partialViewContainer {
    padding: var(--gap-large);
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #FFFFFF;
}

.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%;
}*/


.stepIndicator {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 10px 20px;
}

.lblStep {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
}

#lblStepSpn5 {
    display: flex;
}

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

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-large);
    padding-right: 0;
}

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

    .header p {
        margin: 0;
        font-size: 14px; 
    }
#headerinfo {display: flex;justify-content: space-between;width: 100%;}
.language {
    position: absolute;
    top: 10px;
    right: 10px;
}

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

/*footer*/
#footer {background-color: var(--footer-backcolor);color: var(--footer-color);display: flex;justify-content: center;align-items: center;flex-direction: row;padding: var(--gap) 0 0;bottom: 0;width: 100%;font-size: var(--main-medium-fontSize);}
.step1 #footer, .step1011 #footer {position:absolute;}
#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;padding: var(--gap);}
#footerCR {display: flex;flex-wrap: wrap;flex-direction: row;column-gap: var(--gap-large);justify-content: center;}
#footerCR a {color: var(--footer-color);font-weight: inherit;font-family: inherit;}
.CRnewLine {display: none;}

.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) 0;}
.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;
}
*/
.date-info, .skeletionLoader {
    padding-left: var(--gap-large);
    cursor: pointer;
}

.day-of-week {
    color: var(--calender-color2);
    font-size: var(--main-fontSize);
}

.full-date {
    font-size: var(--main-fontSize);
    color: var(--input-area-color);
}

.buttons, .button, .buttonLabel, .next-step {
    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);
    border-radius: var(--button1-borderRadius);
    background-color: var(--button1-backcolor);
    color: var(--button1-color);
    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);}

    .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;}
.step1 #btnNextStep1, .step2 #btnNextStep2, .step3 #btnNextStep3 {display: block;}

/* date picker */
.date-picker {position: absolute;display: none;z-index: 1;}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {background: transparent !important;}
.date-picker .datepicker {background-color: var(--calender-backcolor);border: none;box-shadow: none;color: var(--calender-color);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 td, .datepicker th {border-radius: 0;font-weight: normal;}
.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.8 );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 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-color2) !important;color: var(--calender-backcolor);}
.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(--button1-backcolor) !important;color: var(--button1-color) !important;background-image: none;border-radius: 50%;}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover,.datepicker table tr td.today.disabled {color: var(--disabled-color) !important;}
.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-color2) !important;background-image: none;border-radius: 50%;}
.datepicker table tr td span.focused, .datepicker table tr td span:hover {background: transparent;}

.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: #08c;
}

.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 {
    background-color: var(--promo-colorback);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: var(--promo-border);
    border-radius: 0;
}

.promotion-item {display: flex;gap: calc( var(--gap) / 2 );font-size: medium;color: var(--promo-color);line-height: normal;}
.promotion-item .check {font-size: var(--main-large-fontSize);}
.promotion-item .check .fa-secondary {fill: #FFFFFF;}

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

.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);
}

.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;
}

.itemGroupfilterWraper {
    display: flex;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: wrap;
}

.itemGroupTypeFilter {
    margin-right: -20px;
    position: sticky;
    top: 0;
    background-color: white;
    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;
    }

.itemGroupfilterWraper::-webkit-scrollbar {
    display: none
}

.rdbItemTypeGroup {
    display: none !important;
}

.numberAmountLabel {
    font-weight: 100;
    color: var(--main-color3);
}

.cursorPointer {
    cursor: pointer;
}

/* Style the labels like buttons */
.itemGroupTypeFilter label {
    padding: var(--button2-padding);
    border-radius: var(--button2-borderRadius);
    background-color: var(--button2-backcolor);
    color: var(--button2-color);
    border: var(--button2-border);
    /*cursor: pointer;*/
    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;
}

.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;
}

/*option list*/
.listOptionDiv {
    padding: 0 0 25px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 25px;
    height: calc(100% - 120px);
    overflow: auto;
    align-content: flex-start;
    color: var(--main-color2);
}

.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);
}

.numberInputAmount {
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-direction: row;
    cursor: default;
	flex-wrap:wrap;
	column-gap:var(--gap);
}

.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;
}
*/
.itemOptionNumberInput {
    display: flex;
    gap: 10px;
    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.1;
        margin-bottom: 5px;
        float: left;
        width: 100%;
        overflow: hidden;
    }

/* 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;
}

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;
}

.pickupDelivaryLocation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rdbOptionsInline:checked + label, .rdbOptionsInline + label:hover {background-color: var(--button2-backcolorHover);color: var(--button2-colorHover);border-color:var(--button2-backcolorHover);}

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


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

.label-container {
    display: flex;
    font-size: initial;
    gap: 5px;
    align-items: flex-end;
    color: var(--main-color2);
    font-weight: var(--title-fontWeight);
}

.lblpickupDeliveryBold {
    font-weight: 700;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-large);
}
/*
.form-label {
    font-weight: 500;
}*/

input::placeholder {
    opacity: 0;
}

#holidayAddressSearch::placeholder {
    opacity: 1 !important;
}

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

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

.requiredAstrik {
    color: red;
    margin-left: 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: white;
    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: #0056b3;
    }

.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);
}
/* Active state when showing */
#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;
}

.section-title {
    font-size: var(--main-fontSize);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

.bookingSummaryBroder {border-bottom: var(--line-border);border-top: var(--line-border);padding: var(--gap) 0;font-size: var(--main-medium-fontSize);}
.bookingSummaryDetailsWrapper {display: flex;justify-content: space-between;align-items: flex-start;flex-direction: column;gap: var(--gap-large);}
.divTotalCalculation {display: flex;justify-content: space-between;}
/*.paymentButton {margin-bottom: calc( var(--gap-large) * 2);}*/
.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);
}

.paymentBookingSummaryBroder {
    border-top: solid 1px #ddd;
    padding-top: var(--gap);
}

.bookingSummaryMultipleDetails {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.bookingSummaryDetails {
    display: flex;
    gap: 10px;
    max-width: 75%;
    align-items: center;
}

.countPrice {
    display: flex;
    font-size: var(--main-fontSize);
    font-weight: 700;
    align-items: flex-start;
}

.bookingSummaryName {
    font-size: var(--main-medium-fontSize);
    line-height: var(--main-lineHeightAlt);
}

.bookingSummaryUnitPrice {
    display: flex;
    column-gap: 3px;
    display: none;
	font-size: var(--main-small-fontSize);
    color: var(--main-color3);
    line-height: var(--main-lineHeightAlt);
}

.bookingSummaryUnitPriceCurrency {
    display: flex;
    gap: 5px;
}

/*.spnUnitPricetxt {
    color: #999;
}*/

.bookingSummaryTotalPriceCurrency {
    display: flex;
    font-size: var(--main-fontSize);
}

.total-amount-section {
    display: flex;
    justify-content: space-between;
}

.totalPriceAndCurrency {
    font-size: var(--main-fontSize);
    display: flex;
}

.bookingSummaryCloseButton {
    background: white;
    border: 2px solid #ddd;
    padding: 7px;
    border-radius: 5px;
}

.close-button {
    display: flex;
    justify-content: center;
}

/* 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 {
    /* height: 22px;
    width: 20px;*/
    color: black;
}

.gray-out {color: var(--disabled-color);background-color:var(--disabled-backcolor);cursor: not-allowed;}
.deliveryDisbled, .deliveryDisbled .locationSelectionOption {color: var(--disabled-color) !important;pointer-events: none !important;}
.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 */
input:focus-visible {outline: inherit;}
textarea {height: var(--input-selectHeight);}
textarea:focus {height: var(--textarea-focusHeight);}
ul {list-style-type: none;}
input[type=checkbox]:focus, input[type=file]:focus, input[type=radio]:focus { outline: 0 none transparent;}

/*general: classes*/
.displayNone {display: none !important;}
.mainContent {padding: 10px;}
.section-header, .summary-header {font-size: var(--title-fontSize);font-weight: var(--title-fontWeight);color: var(--title-color);}
.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);line-height: var(--input-lineHeight);height: var(--input-selectHeight);background-color: var(--input-backcolor);display: flex;justify-content: space-between;align-items:center;}
.radio-container {padding: 20px;cursor: pointer;border: var(--input-border);border-radius: var(--input-borderRadius);background-color: var(--input-backcolor);transition: background-color 0.3s;display: flex;gap: 10px;flex-direction: column;}
.date-container {position: relative;border: var(--input-border);border-bottom: var(--input-area-border);border-radius: 0;background-color: var(--input-area-backcolor);padding: var(--input-area-padding);display: flex;justify-content: flex-start;height: var(--input-area-height);cursor: pointer;}

/*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;}

/* 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;}
.contact-info span {white-space:nowrap;}

/*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: 5px;
}
/*step3: itemtype list*/
.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 {
    opacity: 0.5;
}

.listOption.itemtypeSoldOut .numberInputNumber {
    display: none;
}

.listOption .divItemTypeSoldOutMessage {
    color: var(--error-color);
}

.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;
}

/*step3: itemtype option list*/
.itemOptionList {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #FFFFFF
}

.optionListHeadingDiv {
    padding: 15px 10px;
    font-weight: var(--subtitle-fontWeight);
    font-size: var(--subtitle-fontSize);
    color: var(--subtitle-color);
}
/*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;
}
/*****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;}

/*step5: user data*/
.input-personal-details {display: flex;padding-top: var(--gap);}
.input-personal-details .form-select, #divRemark .form-select {background-color: var(--input-backcolor);border: var(--input-border);}
.step5 #btnNextStep5 {display: block;}
.personalDetailsHeader {display: none;}
.holiday-address-item {padding: var(--input-padding);}
#streetAndStreetNumberDiv, #zipCodeAndPlaceDiv {display: flex;justify-content: space-between;flex-direction: row;align-items: center;}
#divStreet {width: 70%;}
#divStreetNumber {width: calc(30% - var(--gap));}
#divZipCode {width: 20%;}
#divPlace {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;
}

.isMobile #footer {
    display: none;
}

.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;}
/*************/
.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 {
    background-color: var(--button1-backcolor);
    color: var(--button1-color);
    font-size: var(--button-large-fontSize);
    min-width: 200px;
}

.buttonMedium {
    min-width: var(--button-medium-minWidth);
    background-color: var(--button1-backcolor);
    color: var(--button1-color);
    font-size: var(--button-medium-fontSize);
    padding: var(--button-medium-padding);
}

.buttonSmall {
    min-width: var(--button-small-minWidth);
    background-color: var(--button1-backcolor);
    color: var(--button1-color);
    font-size: var(--button-small-fontSize);
    padding: var(--button-small-padding);
}

a, .reservation-summary, i, .languageChangeDiv, .listOptionImage, .scroll-btn {
    touch-action: manipulation;
}
/* 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*/
.date-section {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    column-gap: var(--gap-large);
}
#dateRangePickerSelection,#startDateSelection, #endDateSelection {width: 100%;}

/*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;flex-direction: row-reverse;justify-content: flex-end;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*/
.divAmountTxt {
    margin-top: -5px;
}

.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;
}

.moreInfoAccessories {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    font-size: var(--main-small-fontSize);
    column-gap: var(--gap);
    row-gap: normal;
}

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

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

/*after payment pages*/
#contentAndSummary {
    padding: var(--gap-large);
}

#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;
}

.afterpayment .buttonLarge {
    width: fit-content;
    padding: var(--button-large-padding);
    padding: 0 var(--gap-large);
}

/*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(--gap-large) 40px;background-color: rgba(255, 255, 255, 0.975);}
.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;}
*/



/*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;
    }

    div#mainContent, .stepContainer {
        width: 100%;
        max-width: 550px !important;
        left: 0;
    }

    div#contentAndSummary {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    div#bookingSummary {
        max-width: 350px;
        height: 100% !important;
        justify-content: unset;
        border-radius: 10px;
        border-bottom: 2px solid #ccc;
    }

    .isWebSummay .bookingSummaylbl {
        padding-top: 25px;
        display: flex;
        justify-content: center;
    }

    .ticket {
        width: 400px;
        border-radius: 10px;
    }

        /* 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-large: 10px;
        --gap: 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-large: 10px;
        --gap: 5px;
    }

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

    /*step 1*/
    .full-date {font-size: calc(var(--main-fontSize) - 1px);line-height: calc(var(--main-lineHeight) * .9);}
	.promotionInfoPopupDiv{padding: 30px 30px var(--gap-large) 30px;}

    /*step3*/
    .listOptionImage, .btnMoreInfo {min-width: 120px;}
    .itemGroupfilterWraper {flex-wrap: nowrap;}
    .divItemTypeBrandAndCost {justify-content: space-between;}
    .afterpayment .buttonLarge {width: 100%;}
}