/* dark mode switch */

.dark-light-switch {
    position: fixed;
    top: 5px;
    right: 5px;
    cursor: pointer;
    background: none;
    border: 1px solid var(--mid-grey);
    border-radius: 10px;
    color: var(--extra-light-grey);
    border: none;
    z-index: 2;
}

body.light .dark-light-switch {
    color: var(--mid-grey);
}


/* light mode options */

body.light {
    background: var(--off-white);
    color: var(--dark-grey);
}

body.light .header {
    /*background: var(--off-white);
    background: linear-gradient(180deg, var(--primary-colour), var(--off-white));
    color: var(--dark-grey);*/
}

body.light .centered {
    background-color: var(--off-white);
}

body.light .btn-primary {
    color: var(--dark-grey);
}

body.light .btn-white {
    color: var(--dark-grey);
    border-color: var(--dark-grey);
}

body.light .btn-white:disabled {
    color: var(--light-grey);
    border-color: var(--light-grey);
}

body.light .btn-label-white {
    background-color: white;
    color: black;
    border: none;
    border-radius: 10px;
    padding: 5px;
}

body.light .btn-label-white:disabled {
    background-color: rgb(190, 190, 190);
    color: rgb(92, 92, 92);
    border: none;
}

body.light .btn-grey {
    background-color: var(--light-grey);
    color: white;
}

body.light span.label {
    color: var(--dark-grey);
}

body.light button.selected {
    background-color: transparent!important;
    border: 2px solid var(--primary-colour)!important;
    color: unset!important;
}

body.light .form-header {
    background: var(--light-grey);
}

body.light .form-title {
    background-color: var(--dark-grey);
}

body.light label {
    color: var(--dark-grey);
}

body.light #additional-gear {
    background-color: var(--light-grey);
}

body.light input,
select {
    background-color: white;
    color: var(--dark-grey);
}

body.light .container {
    background-color: var(--extra-light-grey);
}

body.light .inputHolder.mobile {
    background-color: white;
}


/* premium gear upsell */

body.light .upsell_banner {
    color: var(--off-white);
}

body.light .upsell_banner .module {
    background: var(--extra-light-grey);
    color: var(--dark-grey);
}

body.light #banner_insurance {
    background: linear-gradient(90deg, transparent, var(--upsell-purple));
}

body.light #banner_snow_chains {
    background: linear-gradient(90deg, transparent, var(--upsell-purple));
}

body.light .greyBox {
    background-color: var(--extra-light-grey);
}

body.light .container .greyBox {
    background-color: white!important;
}

body.light #tab_extras .greyBox {
    background: none;
    margin: 0;
    padding: 0;
}

body.light #td_price_summary_gear_list,
#td_price_summary_gear_prices {
    color: var(--mid-grey);
}


/* gear selection buttons (ski, snowboard or clothing) */

body.light #div_gear_choice button {
    /*background: linear-gradient(90deg, var(--primary-colour), white);*/
    background: var(--extra-light-grey);
}


/*
body.light #div_gear_choice div {
    background: white;
}
*/

body.light #div_gear_choice span {
    color: #4a4a4a;
}

body.light #div_gear_choice div>i:last-child {
    color: var(--extra-light-grey);
}


/* tab buttons for ski packages grades */

.ski-grade button {
    border: none;
    color: var(--dark-grey);
    padding: 2px 12px;
    border-radius: 10px 10px 0px 0px;
    background-color: var(--extra-light-grey);
    font-size: 1.3em;
    text-transform: capitalize;
}

.ski-grade button.active {
    color: var(--primary-colour);
    font-weight: bold;
    background-color: var(--light-grey);
}

@media screen and (max-width: 485px),
((min-width: 600px) and (max-width: 1100px)) {
    .ski-grade button {
        padding: 2px 10px;
        font-size: 1.2em;
    }
}

@media screen and (max-width: 450px),
((min-width: 600px) and (max-width: 1070px)) {
    .ski-grade button {
        padding: 2px 10px;
        font-size: 1.1em;
    }
}

@media screen and (max-width: 420px),
((min-width: 600px) and (max-width: 1020px)) {
    .ski-grade button {
        font-size: 1em;
        padding: 2px 8px;
    }
}

@media screen and (max-width: 390px),
((min-width: 600px) and (max-width: 990px)) {
    .ski-grade button {
        font-size: 0.9em;
        padding: 2px 6px;
    }
}

@media screen and (max-width: 360px),
((min-width: 600px) and (max-width: 960px)) {
    .ski-grade button {
        font-size: 0.8em;
        padding: 2px 6px;
    }
}

@media screen and (max-width: 330px),
((min-width: 600px) and (max-width: 930px)) {
    .ski-grade button {
        font-size: 0.7em;
        padding: 2px 4px;
    }
}


/* gear packages */

body.light #div_packages_ski {
    border: 3px solid var(--light-grey);
    background: var(--extra-light-grey);
}

body.light #div_packages_ski button.view-details {
    color: var(--mid-grey);
}

body.light #div_packages_ski .upsell-banner {
    position: relative;
    height: 23%;
    height: 12vh;
    height: 12svh;
    border-radius: 0px 0px 15px 15px;
    background: linear-gradient(139deg, var(--primary-colour), var(--upsell-purple));
    background: var(--extra-light-grey);
    border-radius: 15px;
}

body.light #div_packages_ski .upsell-banner .title {
    position: absolute;
    top: 0px;
    left: 3%;
    font-size: 2em;
    width: max-content;
    color: var(--primary-colour);
}

body.light #div_packages_ski .upsell-banner .description {
    position: absolute;
    top: 30px;
    left: 3%;
    font-size: 1.3em;
    width: max-content;
    color: black;
    width: 67%;
    /*display: grid;
    align-content: center;
    height: 8vh;*/
    height: 8svh;
    overflow-y: auto;
}

body.light #div_packages_ski .upsell-banner .description::-webkit-scrollbar {
    width: 4px;
}

body.light #div_packages_ski .upsell-banner .description::-webkit-scrollbar-track {
    background: var(--light-grey);
}

body.light #div_packages_ski .upsell-banner .description::-webkit-scrollbar-thumb {
    background: var(--mid-grey);
}

body.light #div_packages_ski .upsell-banner .price {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.2em;
    width: max-content;
    color: black;
}

body.light #div_packages_ski .upsell-banner button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    background: linear-gradient(135deg, var(--upsell-purple), var(--primary-colour));
    border: none;
}

body.light #div_packages_ski .upsell-banner button.active {
    background: transparent;
    color: var(--primary-colour);
    border: 3px solid var(--primary-colour);
}

@media screen and (max-width: 500px),
((min-width: 600px) and (max-width: 1200px)) {
    body.light #div_packages_ski .upsell-banner .title {
        font-size: 1.8em;
    }
    body.light #div_packages_ski .upsell-banner .description {
        font-size: 1.2em;
    }
}

@media screen and (max-width: 440px),
((min-width: 600px) and (max-width: 1050px)) {
    body.light #div_packages_ski .upsell-banner .title {
        font-size: 1.4em;
        top: 3px;
    }
    body.light #div_packages_ski .upsell-banner .description {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 400px),
((min-width: 600px) and (max-width: 900px)) {
    body.light #div_packages_ski .upsell-banner .title {
        font-size: 1.3em;
        top: 3px;
    }
    body.light #div_packages_ski .upsell-banner .description {
        font-size: 1em;
    }
}

@media screen and (max-width: 380px),
((min-width: 600px) and (max-width: 800px)) {
    body.light #div_packages_ski .upsell-banner .title {
        font-size: 1.2em;
        top: 3px;
    }
}

@media screen and (max-width: 360px),
((min-width: 600px) and (max-width: 700px)) {
    body.light #div_packages_ski .upsell-banner .title {
        font-size: 1.1em;
        top: 5px;
    }
}

body.light #div_gear_extra_holder button {
    background-color: var(--extra-light-grey);
}

body.light #div_date_selection .early-pickup {
    color: #474747;
}