:root {
    --cm_new_ultramarine_blue: #1E2346;
    --cm_new_sand: #D7CDC1;
    --cm_new_saffron_yellow: #FDBE00;
    --cm_new_sienna: #9D432C;
    --cm_new_verdigris: #A7BFB9;
    --cm_new_lavender_blue: #9BADFA;
    --cm_new_black_coal: #000000;
    --cm_new_cloud_white: #FFFFFF;
    --color-lightGrey: 0deg 0% 80%;

    --cm_blue: #005589;
    --cm_yellow: #FDBE00;
    --cm_blue_transparent: #00558922;
    --cm_default_text: #212121;

    --cm_prune: #4B2355;
    --cm_sapin: #144B50;
    --cm_acajou: #55142D;
    --cm_bleu_profond: #235578;
    --cm_bleu_clair: rgb(61, 125, 170);
    --cm_bleu_clair_trans: rgba(61, 125, 170, 0.3);
    --cm_bleu_profond_alpha: rgba(0, 160, 162, 0.50);

    /*--cm_sable: #D7BE87;*/
    --cm_mer_du_sud: #9BC8CD;
    --cm_mer_du_sud_alpha: #9BC8CD44;

    --cm_lila: #4D75C5;
    --cm_kiwi: #737D08;
    --cm_grenadine: #C54B78;
    --cm_grenadine_alpha: #C54B7844;
    --cm_grenadine_alpha_2: #C54B7811;
    --cm_ocre: #9F6D0B;
    --cm_turquoise: #0480a9;
    --cm_ambre: #C75300;

    --cm_perle_de_sable: #F0E6D7;
    --cm_gris: #444444;

    --cm_lightgray: #e8e8f8;
    --cm_lightgray_dark: #dddded;
    --cm_lightgray_darkest: #c8c8d8;
    --cm_middlegray: #d2d2e2;
    --cm_gray: #a5a5a5;
    --cm_gray_light: #B9B9B9;
    --cm_orange: #cf4b2a;
    --cm_violet: #007571;
    --cm_red: #cf4b2a;
    --cm_info: var(--cm_gris);
    --cm_white: #ffffff;
    --cm_ultra_marin: #1e2245;
    --cm_table_background: rgba(244, 244, 244, 0.6);

    --cm_ultramarine_blue: #1E2245;
    --cm_lightsable: #F2EBE2;
    --cm_lightsable_hover: #efe4c5;
    --cm_sable: #D6CDC1;
    --cm_darksable: #A89784;
    --cm_safran: #FCBD00;
    --cm_darksafran: #D9AA08;
    --cm_sienna: #9D432C;
    --cm_sienna_alpha: rgba(157, 67, 44, 0.5);
    --cm_sienna_alpha_2: rgba(157, 67, 44, 0.2);
    --cm_verdigris: #AEBEB8;
    --cm_lavander: #9BACF9;

    --cm_font_size_xx_small: 8px;
    --cm_font_size_x_small: 10px;
    --cm_font_size_small: 11px;
    --cm_font_size_medium: 12px;
    --cm_font_size_large: 14px;
    --cm_font_size_x_large: 17px;
    --cm_font_size_xx_large: 21px;
    --cm_font_size_xxx_large: 26px;

    --default-big-margin-padding: 2.25rem;
    --default-margin-padding: .8rem;

    --cm_border_radius: 7.5rem;

    --header-height: 60px;
    --border-radius: 4px;
    --puzzle_height: 60px;
    --puzzle_right_svg_semi_width: 8.125px;
    --puzzle_right_svg_width: 16.25px;

    --slide-height: 56rem;

    --loginPageBackgroundColor: var(--cm_sienna);

    --puzzle_lightpart: var(--cm_darksafran);
    --puzzle_darkpart: var(--cm_sienna);
    --puzzle_link: var(--cm_darksafran);

    --tooltip_background_color: var(--cm_sienna);
    --tooltip_arrow_size: 10px;
    --tooltip_width: 150px;
}
body {
    overflow: initial !important;
}

.components li a span {
    color: grey;
    transition: color 0.2s ease;
    background-color: var(--cm_lightsable) !important;
}

#sidebar ul li.active {
    /*background-color: var(--cm_lightsable) !important;*/
}

.components li.active a span {
    color: black;
    font-weight: bold;
    background-color: var(--cm_lightsable) !important;
}

#sidebar {
    background-color: var(--cm_lightsable) !important;
    color: black !important;;
    width: 25% !important;
    max-width: 500px !important;
    font-family: "Newsreader";
    font-weight: bold;
    font-size: 50px !important;
}

#sidebar ul li a {
    font-family: "Newsreader";
    font-weight: bold;
    font-size: 1.6rem !important;
    /*text-align: right !important;*/
}

#sidebar ul li a span, #sidebar ul li, #sidebar ul li a, #sidebar ul  {
    background-color: transparent !important;
}

#SKAutoForm_booking label, #SKAutoForm_booking input {
    height: 25px !important;
}


#sidebar ul li a span {
    margin-left: 30%;
}

h3 {
    font-family: "Newsreader";
    font-weight: bold;
    font-size: 2rem !important;
    text-align: left !important;
}

#SKAutoForm_Control_booking_codeResort__clone {
    background-color: white !important;
    color: #495057 !important;
}

.carousel-progress {
    height: 4px;
    background: #eee; /* fond gris clair */
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
}

.carousel-progress .progress-bar {
    height: 100%;
    width: 0;
    background: #FFD500; /* jaune */
    transition: width 10s linear;
}

#sidebar > ul {
    width: 20% !important;
}

a:hover, a:focus {
    background-color: rgb(242, 236, 226) !important;
}
.form-inline {
    margin-bottom: 0 !important;
}

.container {
    padding-left:90px;
    padding-right:90px;
    margin: 0 auto;
}

#SKAutoForm_booking .close {
    color: white;
}

#logo-trident {
    margin-top: 100px;
    margin-left: 120px;
}

.body-login #logo-trident-login {
    margin-top: 100px;
}


.body-pending #logo-trident-login {
    /*margin-top: 60px;*/
}

@media (max-width: 768px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* display 3 */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
    transform: translateX(0);
}

.card-body {
    border: white;
    vertical-align: top;
    padding: 0 !important;
    background-color: white;
}

.img-fluid {
    height: 250px;
    border-radius: 20px;
}

.dispo-block {
    padding: 15px;
    /*background-color: #1E2245;*/
    border-radius: 20px;
    color: white;
    --tw-border-opacity: 1;
    border-color: hsl(var(--color-lightGrey) / var(--tw-border-opacity, 1));
    border-width: 1px;
    border-style: solid;
}

.body-login {
    background-color: rgb(242, 236, 226) !important;
    height: 100% !important;
    margin-left: 0;
    padding-left: 0;
    width: 40%;
}

#sidebar .svg-inline--fa {
    height: 0.7em;
    padding: 20px;
}

#sidebar .actionLink {
    position: absolute;
    bottom: 0;
}

.departure-block {
    justify-content: space-evenly;
}

body {
    background-color: white !important;
}

.dispo-title {
    color: var(--cm_sienna);
    font-weight: bold;
}

.button, .button:hover {
    background-color: #1E2245 !important;
    font-weight: bold;
}

.form-control {
    border-radius: 0.75rem;
}
.carousel-position {
    width: 100%;
}

.carousel-position .progress-track {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    position: relative;
}

.carousel-position .progress-indicator {
    position: absolute;
    top: 0;
    height: 100%;
    width: 20%;
    background: var(--cm_yellow);
    left: 0;
    transition: left 0.4s ease;
    border-radius: 2px;
}

.badge {
    padding: .4em !important;
    font-size: 15px;
    font-weight: initial !important;
}

.carousel-control-next:hover, .carousel-control-prev:hover {
    background-color: transparent !important;
}

.carousel-control-prev,
.carousel-control-next {
    top: 100px;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    opacity: 1 !important;
}

.carousel-control-next {
    transform: translateX(90%);
}

.carousel-control-prev {
    transform: translateX(-90%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--cm_yellow);
    border-radius: 50%;
    width: 95px;
    height: 95px;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20% 20%;
    transition: transform 0.2s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    transform: scale(1.1);
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3L15 8L10 13'/%3E%3Cpath d='M15 8H1'/%3E%3C/svg%3E");
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3L1 8L6 13'/%3E%3Cpath d='M1 8H15'/%3E%3C/svg%3E");
}

html {
    scroll-behavior: smooth;
}

.button-departure {
    background-color: white;
    border-radius: 5px;
    padding: 3px !important;
    color: white !important;
    border: 0;
}


.button-departure:hover {
    background-color: var(--cm_yellow);
}


.modal-header {
    background-color: #1E2245;
    color: white;
}

.resorts-desc__img {
    height: 359px;
    border-radius: 20px;
    margin-left: 10px;
    margin-top: 20px;
}


.sk-form-label {
    max-width: 70% !important;
    flex: 100%;
}

.sk-form-time {
    display: none !important;
}

.resorts-desc {
    font-size: 16px;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--cm_lightsable);
    border-radius: 20px;
    padding: 20px;
}

#SKAutoForm_Control_booking_code_resort {
    pointer-events: none;
    background-color: #f0f0f0;
}

table {
    border-collapse: collapse;
    width: 30%;
    margin: 25px;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px;
}
th {
    /*background-color: #f0f0f0;*/
    text-align: left;
}
.header-pending {
    background-color: #1E2245;
    color: white;
    padding: 25px;
}
.booking-details {
    list-style: none;
    padding: 0;
    margin: auto;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    max-width: 500px;
    font-family: Arial, sans-serif;
}

.booking-details li {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

.booking-details li:last-child {
    border-bottom: none;
}

.booking-details strong {
    color: #333;
    min-width: 140px;
}

/* Responsive */
@media (max-width: 500px) {
    .booking-details li {
        flex-direction: column;
        align-items: flex-start;
    }
    .booking-details strong {
        min-width: auto;
    }
}

.body-pending {
    background-color: var(--cm_lightsable);
    height: 100%;
    width: 50%;
}

#SKAutoForm_booking button {
    border-radius: 20px !important;
}

#SKAutoForm_booking .btn-primary {
    background-color: #28a745;
    border-color: #28a745;
}

.block-booking-details p {
    text-align: left;
    width: 100%;
}

.media-cover {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
}

.media-cover img {
    display: block;
    width: 100%;
}

.media-cover::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 45%;
    /*background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));*/
    pointer-events: none;
}

.cover-link { display: block; position: relative; }

.cover-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .6rem .8rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    font-size: 20px;
}

#SKAutoForm_Control_booking_codeResort {
    pointer-events: none;
    opacity: 0.5;
}

#SKAutoForm_Group_booking_dateDepart .sk-form-description, #SKAutoForm_Group_booking_dateNaissance2 .sk-form-description, #SKAutoForm_Group_booking_dateNaissance .sk-form-description, #SKAutoForm_Group_booking_dateArrivee .sk-form-description {
    display: none !important;
}


#sk_username, #sk_password {
    border-radius: var(--cm_border_radius);
    font-size: var(--cm_font_size_x_large);
}

#login_form_save:hover {
    background-color: var(--cm_ambre) !important;
}

@media (max-width: 1500px) {
    .img-container {
        display: none !important;
    }
    #sidebar ul li a {
        font-size: 1.3rem !important;
        margin: 0 !important;
    }
    #sidebar ul li a span {
        margin: 0 !important;
    }
    #logo-trident {
        margin-left: 30px;
        width: 30px;
    }
    #sidebar > ul {
        width: 180px !important;
    }

    .list-unstyled {
        position: sticky !important;
    }

}

.text-accueil, .text-accueil p {
    line-height: 1.3em !important;
}

.list-unstyled span, .section {
    display: none;
}


@media (max-width: 992px) {
    #logo-trident {
        display: none !important;
    }
}

desc-title {
    font-family: Newsreader, "Times New Roman", Times;
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 768px) {
    #sidebar { display: none; }
    .resorts-desc {
        /*background-color: var(--cm_ambre);*/
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 50px;
        height: 50px;
    }
    .container {
        padding: 0px;
    }
    .carousel-control-next {
        transform: translateX(-10%);
    }

    .carousel-control-prev {
        transform: translateX(10%);
    }

    .sk-auto-form {
        margin-top: 5px;
        width: 100%;
    }

    .col-4 {
        max-width: 100% !important;
    }

    .section {
        padding: 10px
    }

    .carousel-item-next,
    .carousel-item-prev { z-index: 2; }

    .form-inline {
        justify-content: center;
    }

    .body-login {
        width: 100%;
    }

    .header-resort {
        /*color: white;*/
        /*background-color: var(--cm_ambre);*/
    }
}


.button {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    padding: var(--default-margin-padding) var(--default-big-margin-padding);
    border-radius: var(--cm_border_radius) !important;
    overflow: hidden;
    background-color: #FDBE00 !important;
    color: #000000 !important;
    font-weight: bold;
}

.login-form label {
    font-weight: bolder;
    font-size: var(--cm_font_size_x_large);
}