body {
    background: #f8f9fa !important;
}

#mainNav {
    z-index: 10;
}

.wrap-text{
    white-space: wrap !important;
}

.text-content {
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; Affiche les 3 premières lignes */
    max-height: 3.2em;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.text-content.expanded {
    max-height: none;
    /* -webkit-line-clamp: unset; Affiche tout le texte */
}

.text-content:hover, 
#toggleAutopromo:hover {
    cursor: pointer;
}

.search-code-promo {
    z-index: auto !important;
}

.navbar-brand {
    padding-top: .40625rem;
    padding-bottom: .40625rem;
    margin-right: 4rem;
    font-size: 1.125rem;
    white-space: nowrap;
}

.navbar-brand img {
    width: auto;
    max-height: 2.5rem;
}

.navbar-nav-secondary {
    margin-top: 0;
    flex-direction: row;
    align-items: center;
}

@media (max-width: 575.98px) {
    .navbar-brand {
        margin: 0;
    }
    .mobile-xs{
        font-size: 0.75rem!important;
        line-height: 1.25;
    }
}

.navbar-nav .nav-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    padding: 0;
    padding-right: 0px;
    padding-left: 0px;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

#footer {
    background-color: #fff;
}

.footer-brand img {
    max-width: 300px;
    max-height: 150px;

}

.form-group .iti--allow-dropdown{
    width: 100%;
}


/* #infosNav .navbar-nav,
    #userNav .navbar-nav {
        min-width: 400px;
        ;
    } */

.modal button.btn-close::after {
    content: "\00d7";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    overflow: hidden;
    transition: color .1s ease-out;
    border: none;
    border-radius: 0;
    background: 0 0;
    color: #ccc;
    font-family: serif;
    font-size: 2.5em;
    line-height: 1.2;
    cursor: pointer;
}

.modal button.btn-close:hover::after {
    transform: none;
    background: 0 0;
    color: #f27474;
}

.underline::before {
    transition: width .4s;
    transition-delay: 0s;
    transition-delay: 0s;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    border-bottom: 1px solid black;
}

.underline:hover::before {
    width: 100%;
}

.underline:hover {
    text-decoration: none;
}

.change-quantite {
    max-height: 50px;
}

.quantite-tarif,
.quantite-produit {
    max-height: 51px;
    width: 50px;
}

.fixed-plugin {
    position: absolute;
    z-index: 1050;
}

.activite-catalogue .img-fluid {
    transition: all ease .3s;
}

.activite-catalogue:hover .img-fluid {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0.9;
}

#aside-cart {
    top: 5rem
}

.anchor:before {
    display: block;
    content: " ";
    height: 5rem;
    margin-top: -5rem;
}

.btn:not(.btn-selected):hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn.btn-selected {
    box-shadow: inset 2px 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn:not(.btn-selected):active {
    transform: translateY(1px);
    filter: saturate(150%);
}

.btn:hover {
    color: #9050AA;
    border-color: currentColor;
    background-color: white;
}

#card-bottom {
    z-index: 3;
}


.icone-suggestion {
    min-height: 200px;
}

/* .btn:focus {
        outline: solid transparent;
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px #f5a;
    } */

@media (max-width: 768px) {
    #choix_horaire,
    #choix_tarifs,
    #description_longue {
        scroll-margin-top: 10rem;
    }
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
    .row-cols-lg-8>* {
        flex: 0 0 auto;
        width: 12.5%;
    }
    .bottom-lg-0 {
        bottom: 0px!important;
    }

}

#container_calendrier {
    width: 600px;
    height: 500px;
    max-width: 100%;
    max-height: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#calendrier_date .ui-datepicker {
    width: 600px;
    height: 456px;
    max-width: 100%;
    max-height: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#calendrier_date .ui-datepicker-calendar {
    height: calc(100% - 100px);
}

#calendrier_date .ui-datepicker-calendar thead tr {
    height: 40px;
}

#calendrier_date .ui-datepicker-calendar .ui-state-default {
    display: block;
    line-height: 4rem;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    text-align: center;
}

#choix_horaire,
#choix_tarifs,
#description_longue, 
#card-choix-seance-or-date{
    scroll-margin-top: 8rem;
}
#container_calendrier{
    scroll-margin-top: 12rem;
}

.btn-selected {
    margin-top: 1px;
    color: #9050AA;
    border-color: currentColor;
    background-color: white;
}

.filters-activites-plugin-button-nav {
    line-height: 1.5rem;
}

#selectionCatalogue li.active {
    flex-grow: 1 !important;
    font-weight: bold;
    box-shadow: inset 3px -0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#choix_date .selection-date:not([disabled]) .date-jour,
#choix_date .selection-date-parcours:not([disabled]) .date-jour {
    font-weight: bold;
    font-size: 2rem;
}

#choix_date .selection-date[disabled],
#choix_date .selection-date-parcours[disabled] {
    color: #aaa;
}

#selectionCatalogue li.active:hover,
#selectionCatalogue li.active a:hover {
    cursor: initial;
}

#selectionCatalogue li:not(.active):hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.account-collapse ul:before {
    font-family: 'bootstrap-icons' !important;
    font-weight: 700;
    content: "\F623";
    cursor: pointer;
    text-align: right;
    margin-top: -7px;
    margin-right: -3px;
    padding-bottom: 7px;
}

.activite-icone .btn-reservation {
    width: calc(100% - 1.5rem);
}

.activite-liste .btn-reservation {
    right: 1rem;
}

.activite-liste .icone-description {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.activite-liste .icone-image {
    padding: 1rem;
}

#nbElemsPage {
    font-weight: 700;
    color: #67748e !important
}

#selectiondate .ui-datepicker.ui-widget {
    max-width: 100%;
}

.badge-disponiblite {
    position: absolute;
    top: 10px;
    right: 0px;
    z-index: 2;
}

#id_montant {
    max-width: 150px;
}

.select-radio input[type="radio"]:checked+label {
    font-weight: bold;
    background: greenyellow;
}

.big-tooltip {
    width: 400px;
}

.big-tooltip.show {
    opacity: 1;
}

.big-tooltip .tooltip-inner {
    max-width: 100%;
}

.cursor-default {
    cursor: default;
}

.errorlist {
    width: 100%;
    color: red;
    list-style: none;
    padding-left: 0;
}

.alert-danger .errorlist,
.alert-danger,
.alert-info {
    color: white;
    margin-bottom: 0.3rem;
}

span.select2.select2-container {
    display: block;
}

.select2.select2-container {
    max-width: 100%;
}

.select2.select2-container .selection .select2-selection {
    line-height: 1.4rem;
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    padding: 0.25rem !important;
    padding-bottom: 0.5rem !important;
}

.select2:focus,
.select2:active {
    color: #495057;
    background-color: #fff;
    border-color: #5fb1ee;
    outline: 0;
    box-shadow: 0 0 0 2px #70b7ec;
    border-radius: .5rem;
}

span.select2-selection.is-invalid,
.django-ckeditor-widget.is-invalid {
    border: 1px solid #fd5c70 !important;
    padding-right: unset;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fd5c70' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fd5c70' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

span.select2.select2-container {
    display: block;
}

.select2-container .select2-selection--single {
    background-color: #fff;
    border: 1px solid #d2d6da !important;
    border-radius: 0.5rem !important;
    height: 35px !important;
    padding: 2px 0.7rem !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 0.5rem !important;
    border: 1px solid #d2d6da;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    color: #495057;
    background-color: #fff;
    border-color: #e293d3;
    outline: 0;
    box-shadow: 0 0 0 2px #e9aede;
}

select.form-control option:hover {
    background-color: #e293d3 !important;
}

.select2-results__option--highlighted {
    color: white !important;
    background-image: linear-gradient(310deg, #7928CA 0%, #FF0080 100%);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 1.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}

.multisteps-form__panel {
    top: 100px;
}

.navbar-compte {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    list-style: none;
}

.form-check .form-check-input {
    margin-left: 0 !important;
}

.golden-pro {
    background: goldenrod;
}

.text-golden {
    color: goldenrod;
}

.red-operateur {
    background: red;
}

.blue-info {
    background: blue;
}
.text-blue-info {
    color: blue;
}
.info-private {
    background: var(--bs-info);
}

.text-vertical {
    writing-mode: vertical-lr;
    text-orientation: upright;
    max-width: 32px;
    width: 32px;
    margin-right: 8px;
}

#cartButton .badge {
    bottom: 15%;
}

.bi-ticket-perforated::before {
    transform: rotate(135deg);
}


.mw-40 {
    max-width: 40%;
}

#detail-panier {
    min-height: 40vh;
}

#table-panier .group-quantite {
    max-width: 100%;
}

#table-panier .group-quantite input {
    max-width: 40%;
}

#table-panier .column-quantite {
    max-width: 140px;
}

#table-panier .avatar {
    height: auto;
}

.card.carte-abonnement {
    min-width: 250px;
}

.card-payment-inputs {
    width: 70px;
    margin-right: 5px;
}

.card-mont-inputs {
    width: 40px;
    margin-right: 5px;
}

.card-year-inputs {
    width: 70px;
    margin-left: 5px;
}

.card-cvv-inputs {
    width: 50px;
}

#form-paiement {
    max-width: 400px;
}

#form-paiement input.is-invalid {
    border-color: #fd5c70;
    padding-right: unset;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fd5c70' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fd5c70' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.1rem center;
    background-size: 1rem 1rem;
}

.qrcode img {
    margin-left: auto;
}

.table thead th{
    padding : 0.5rem 0.5rem;
}

#table-abonnement td {
    white-space: break-spaces;
  }

.mw-lg-20 {
    max-width: 20%;
}

/* .kr-embedded,  */
.kr-smart-form {
    width: 400px !important;
}

.kr-embedded, .kr-smart-button{
    width: 100% !important;
}

.kr-embedded .kr-payment-button, 
.kr-smart-form .kr-payment-button{
    background-color: #82d616 !important;
}

.kr-embedded .kr-payment-button span::before,
.kr-payment-button .kr-payment-button span::before {
    content: "\f023";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
}

.kr-smart-form .kr-smart-form-wrapper.kr-type-embedded .kr-smart-form-methods .kr-methods-list .kr-smart-form-list-section-name{
    color : white !important;
}

#modal_cookies .form-switch .form-check-input {
    border-color: #ea0606;
    background-color: #ea0606;
}

#modal_cookies .form-switch .form-check-input:checked {
    border-color: #82d616;
    background-color: #82d616;
}

.bandeau-indication{
    line-height: normal;
    bottom: -0.8rem;
    right: 4px;
    background: #eee;
    color: black;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-align: right;
    z-index: 2;
}

.activite-liste .bandeau-indication{
    max-width: 200px;
    bottom: 30%;
}


.bandeau-indication:after{
    border-color: black rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 4px 8px 0 0;
    height: 0;
    right: 0;
    bottom: -4px;
    width: 0;
    position: absolute;
    content: ""; 
    line-height: normal;
}

.bandeau-indication:after {
    content: "";
    width: 28px;
    height: 28px;
    background: #eee;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: block;
    position: absolute;
    top: 5px;
    left: -15px;
    z-index: -1000;
    border: 1px solid #eee;
}

/* #calendrier_change_date_echange .ui-datepicker{
    width: 100%;
} */

#container_calendrier {
    width: 600px;
    height: 500px;
    max-width: 100%;
    max-height: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#selection_date_seances .ui-datepicker{
    width: 600px;
    height: 468px;
    max-width: 100%;
    max-height: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#selection_date_seances .ui-datepicker .ui-datepicker-header{
    padding: 10px 0;
  }

#selection_date_seances  .ui-datepicker .ui-datepicker-prev{
    width: 50px;
    height: 100%;
  }

#selection_date_seances .ui-datepicker-calendar{
    height: calc(100% - 100px);
}

#selection_date_seances .ui-datepicker-calendar thead tr{
    height: 40px;
}

#selection_date_seances .ui-datepicker-calendar .ui-state-default{
    display: block;
    line-height: 4rem;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    text-align: center;
}

.accept-cgv .form-check label {
    width : 300px;
}

.selection-horaire.seance-restreinte, 
.selection-seance.seance-restreinte{
    background-color: #f8d7da;
}

.selection-horaire.seance-moderee,
.selection-seance.seance-moderee{
    background-color: #fff3cd;
}

#modal_choix_vente .form-group{
    margin-bottom: 0.25rem !important;
}

#modal_choix_vente .form-group .form-control-label{
    margin-bottom: 0px !important;
}

#modal_choix_reglement input[name="select-choix-reglement"]:checked+label{
    background-color: #17c1e8 !important; 
    color : white !important;
} 

.badge.badge-sm.bg-info.badge-gift {
    height: auto !important;
}

.inline-formset:not(.groupes) .nav-link[data-bs-toggle="collapse"] .nav-link-text::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f107";
    margin-right: 10px;
    color: rgba(58, 65, 111, 0.5);
    transition: all 0.2s ease-in-out;
}

.inline-formset:not(.groupes) .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .nav-link-text::before, .bloc-condition .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .nav-link-text::before {
    color: #3A416F;
    transform: rotate(180deg);
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f107";
    margin-right: 10px;
    color: rgba(58, 65, 111, 0.5);
    transition: all 0.2s ease-in-out;
}

#form-indiv .avatar img {
    max-width: 100%;
    max-height: 100%;
}

.toDelete {
    border : 1px solid red
}

#multisteps-demande-groupes{
    min-height : 375px;
}

#liste-choix-activites .select-activite.active{
    background-color: #abe75c;
}

.ligne-tarif.disabled{
    background-color: #eee;
}

.tarif-indisponible {
    white-space: normal;
}


@media only screen and (max-width: 992px) {
    .mw-lg-20 {
        max-width: 100%;
    }
    
    #table-panier .column-quantite {
        max-width: unset;
    }
    table.tablephone,
    table.tablephone thead,
    table.tablephone tbody,
    table.tablephone tfoot,
    table.tablephone th,
    table.tablephone td,
    table.tablephone tr {
        display: block;
    }
    table.tablephone td {
        text-align: right !important;
        padding-bottom: 0.25rem;
    }
    table.tablephone td * {
        margin-left: auto;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    table.tablephone thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    table.tablephone tr {
        border: 1px solid #ccc;
    }
    table.tablephone td[data-label]:not(.dynamic-form-add td) {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 35%;
        min-height: 50px;
        /* padding-top: 0.25rem; */
    }
    table.tablephone .dynamic-form-add td {
        padding-left: 6px;
    }
    table.tablephone td[data-label]:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    /*Label the data*/
    td:before {
        content: attr(data-label);
        text-align: left;
    }

    #box-photo{
        position: initial !important;
    }
}

#table-panier tfoot {
    border-bottom: 2px solid currentColor;
}

.mode-paiement {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    color: #444;
    transition: 0.3s color;
    user-select: none;
}

.mode-paiement:hover {
    cursor: pointer;
}