#navbar-secondary{
    font-weight: 500;
    letter-spacing: -1px;
}

.div-table-head{
    font-weight: 700;    
}

.entete-fiche-etat-civil{
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: 700;
}

.fiche-etat-civil, .fiche-mes-commandes{
    border: 2px solid var(--we-bgc);
    border-radius: 8px;
}

.fiche-mes-commandes-actif{
    border-bottom: 2px solid var(--couleur3);
}

.fiche-mes-commandes-impaye-conteneur{
    border: 2px solid var(--couleur3);
    padding-right: 5px;
}

.fiche-etat-civil select, .sel-section-cmd-act{
    border: none;
    border-bottom: 1px solid #ced4da;
    width: 70%;
    background-color: transparent;
}

@media screen and (max-width: 992px)  {
    .fiche-etat-civil select{
        width: 100%;
    }
}

.fiche-etat_civil-bottom{
    margin-bottom: 75px;
}

.conteneur-anciennete{
    border: 1px solid black;
    border-bottom: none;
    padding-top: 2px;
    padding-bottom: 2px;
}

#nbEnAttenteValidation{
    position: absolute;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
    color: var(--we-bgc)
}

.table td, .table th {
    padding: 0px;
}

.div-table-conteneur{
    border: 1px solid black;        
}

.div-table-head{
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid black;
}

.div-table-row {
    border-bottom: 1px solid lightgray;     
}

@media screen and (max-width: 767px)  {
    .div-table-head { display: none; }
    .div-table-row {
        padding-right : 5px;
        padding-left: 5px;
        border: 1px solid lightgray;
        background-color: #f9f9f9;
    }
    .div-table-cell::before {
        content: attr(data-title);
        width: 7em;
        font-weight: bold;
        position: absolute;   
        left: 0;
    }
    .div-table-cell{
        padding: 0 0 0.3em 30% !important;
    }   
}

.conteneur-justif-enf{
    border: 1px solid lightgray;
    border-radius: 8px;
}
#conteneurPieceJustifEnf, #conteneurPieceJustifPrelevement, .conteneur-attention-conjoint, #conteneurPieceJustifConjoint, #btnJustificatifConjoint, #conteneurPieceJustifIban, .conteneur-attention-iban, #btnJustificatifIban{
    display: none;
}

.conteneur-attention-iban, .conteneur-attention-conjoint{
    border: 1px solid lightgray;
}

.conteneur-sexe-enf{
    border: 1px solid lightgray;
    border-radius: 8px;
}
input:disabled { cursor: not-allowed !important; }
.nav.nav-pills{
    border-bottom: 1px solid black;
}
.nav-pills .nav-link{
    font-size: 1.5em;
    background-color: transparent !important;
    border-radius: 0;
    color: black !important;
}

.nav-link.active{
    border-bottom: 3px solid var(--we-bgc);
    font-weight: 600;
}

.sel-type-act {
    width: 100%;
    margin: 5px;
    font-weight: 700;
}

.conteneur-grp, .conteneur-act{
    height: 100%; overflow: auto; border: 1px solid lightgray;
}

.sel-grp-act{
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
}

.sel-act{
    cursor: pointer;
    font-weight: 700;  
}

#dlgEditSectionAct{
    line-height: 2.5em;
}

#intituleDlgCdeAct{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

@media screen and (max-width: 992px)  {
    #intituleDlgCdeActStd{
        width: 50%;
    }
}

.dlg-edit-section-opt{
    height: 100%
}

#messageDlgCdeAct{
    border: 1px solid lightgray;
    border-radius: 8px;
}

.dlg-edit-section-opt .form-group label {
    top: -16px;
}

#conteneurJustifAct{
    border: 1px solid lightgray;
    border-radius: 8px;
}
#conteneurPieceJustifAct{
    display:none;
}

.loader-wait {
    position: relative;
    width: 85px;
    height: 40px;
    display: none;
    background-repeat: no-repeat;
    background-image: linear-gradient(#000 50px, transparent 0),
                      linear-gradient(#000 50px, transparent 0),
                      linear-gradient(#000 50px, transparent 0),
                      linear-gradient(#000 50px, transparent 0),
                      linear-gradient(#000 50px, transparent 0),
                      linear-gradient(#000 50px, transparent 0);
    background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
    animation: rikSpikeRoll 0.65s linear infinite alternate;
  }
@keyframes rikSpikeRoll {
  0% { background-size: 10px 3px;}
  16% { background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
  33% { background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
  50% { background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px}
  66% { background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px}
  83% { background-size: 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px, 10px 3px}
  100% { background-size: 10px 3px, 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px}
}

.cp-plus-dlg-cde-act{
    height: 25px;
    width: 30px;
    display: inline-block;
    background-color: cadetblue;
    margin-right: 2px;
    border: 1px solid lightgray;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    margin-top: 2px;
    font-size: 1.5em;
    line-height: 0.7;
    font-weight: 800;    
}

.cp-txt-dlg-cde-act{
    height: 25px;
    width: 30px;
    display: inline-block;
    margin-right: 2px;
    color: cadetblue;
    font-size: 10px;
    line-height: 3;    
}

.cp-dlg-cde-act{
    height: 25px;
    width: 30px;
    display: inline-block;
    margin-right: 2px;    
    border: 1px solid lightgray;
}

.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*Calendrier*/
.table-calendrier {
    border-collapse: separate;
    border-spacing: 2px;
}
#suivantCalDlgCdeAct, #precedentCalDlgCdeAct{
    cursor: pointer;
}
.encadre_calendrier {}
.calendrier { padding: 1px; border: 1px solid #969999; }
.entete_calendrier { margin: 2px; background-color:#E7EBEB; text-align : center; border-bottom: 1px solid #969999;}
.titre_calendrier { color:#A5B3A8; }
.corps_calendrier table { border-collapse: separate; border-spacing: 2px; }
.corps_calendrier table td { padding: 6px 4px; text-align: center; }
.jour_non_reserve { width:25px; background-color:#89DA9C; }
.jour_reserve { width:25px; background-color:#FF0000; }
.jour_calendrier,
.jour_calendrier_invisible,
.jour_calendrier_invalide,
.jour_calendrier_reserve,
.jour_calendrier_valide { text-align : right; font-family: Trebuchet MS, Helvetica, Arial, sans-serif; font-size:0.7em; padding: 6px; font-weight: bold; }
.jour_calendrier_valide:hover { border: 1px solid blue; }
.jour_calendrier { background-color:#E7EBEB; border: 1px solid #969999; color: #53A99D; }
.jour_calendrier_invisible { border: 1px solid #D1D5D4; }
/*.jour_calendrier_invalide { background-color:#F49F81; border: 1px solid #969999; color: #53A99D; }*/
.jour_calendrier_invalide { background-color: #cdcece; border-color: transparent; color: #b1b1b1; }
.jour_calendrier_reserve { background-color:/*#FF0000*/rgba(255,0,0,0.5); border: 1px solid #969999; color: #53A99D; }
.jour_calendrier_valide { background-color:#89DA9C; border: 1px solid #969999; color: #53A99D; }
.daySelected { background-color:  rgba(255,255,0,0.75); }
.daySelected-first { background: linear-gradient(135deg, #89DA9C 50%, rgba(255,255,0,0.75) 50%) ; }
.daySelected-last { background: linear-gradient(135deg, rgba(255,255,0,0.75) 50%, #89DA9C 50%); }
.dayReserved-first { background: linear-gradient(135deg, #89DA9C 50%, rgba(255,0,0,0.5) 50%) ; }
.dayReserved-last { background: linear-gradient(135deg, rgba(255,0,0,0.5) 50%, #89DA9C 50%); }
.dayInvalide-first { background: linear-gradient(135deg, #89DA9C 50%, rgba(205,205,206,0.5) 50%) ; }
.dayInvalide-last { background: linear-gradient(135deg, rgba(205,205,206,0.5) 50%, #89DA9C 50%); }
.daySelected-first:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    /*border-right: 11px solid rgba(255,255,0,0.75);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 11px solid transparent;*/
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,0,0.75) 50%);
    width: 100%;
    height: 100%;
}
.daySelected-last:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    /*border-left: 11px solid rgba(255,255,0,0.75);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 11px solid transparent;*/
    background: linear-gradient(315deg, transparent 50%, rgba(255,255,0,0.75) 50%);
    width: 100%;
    height: 100%;
}
.dayMixte-first:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    /*border-right: 11px solid transparent;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 11px solid rgba(255,255,0,0.75);*/
    background: linear-gradient(315deg, transparent 50%, rgba(255,255,0,0.75) 50%);
    width: 100%;
    height: 100%;
}
.dayMixte-last:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    /*border-left: 11px solid transparent;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 11px solid rgba(255,255,0,0.75);*/
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,0,0.75) 50%);
    width: 100%;
    height: 100%;
}

.jour_calendrier_valide { cursor: pointer; }
.jour_calendrier_valide.selected { outline: 2px solid yellow; }
.jour_calendrier,
.jour_calendrier_invisible { position: relative; }
.jour_calendrier_depasse { background-color: #cdcece; border-color: transparent; color: #b1b1b1; }

.conteneur-logo-pronis {
    display: flex;
    flex-direction: row-reverse;
}
.logo-pronis {
    width: auto;
    height: 20px;
}

.liste-detail{
    width: 100%;
    margin: 10px 5px 0px 5px;
    display: none;
}

/*Pour pronis Loisirs*/
.evenement-fiche {
    border: #dfd2d2 1px solid;
    padding-bottom: 12px;    
    background-color: #fafafa;
    box-shadow: 5px 5px 15px #00000073;
}
.vignette-billetterie-info-sld {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
}
.tarif-1 {
    font-size: 32px;
    font-weight: 700;
}
.tarif-2 {
    top: 14px;
    font-size: 14px;
}

.prix {
    display: flex;
    align-items: flex-end; /* Aligne les éléments à la fin */
    font-family: Arial, sans-serif;
}

.montant-prix {
    font-size: 2em; /* Taille du chiffre */
    font-weight: bold;
}

.details-centimes {
    display: flex;
    flex-direction: column; /* Colonne pour symbole et centimes */
    align-items: flex-start; /* Aligne à gauche */
    position: relative;
    top: -8px;    
}

.symbole-euro {
    font-size: 1.1em; /* Taille du symbole € */
    line-height: 0.5; /* Réduit l'espace autour du symbole */
}

.centimes-prix {
    font-size: 0.8em; /* Taille des centimes */
    margin-top: 0; /* Enlève tout espace entre le symbole et les centimes */
}

.fiche-mes-commandes-ref{
    flex-direction: row-reverse;
    display: flex;
    font-size: .75rem;
}
.fiche-mes-commandes-corps{
    height: 150px;
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    gap:1px;
    font-weight: 700;
}
.fiche-mes-commandes-txt{
    flex-direction: row-reverse;
    display: flex;    
    font-size: .85rem;
    font-weight: 500;
    color: var(--couleur3);    
}
.fiche-mes-commandes-txt-2{
    flex-direction: row-reverse;
    display: flex;
    color: var(--couleur1);    
}
.fiche-mes-commandes-aide{
    flex-direction: row-reverse;
    display: flex;
    color: var(--couleur2);
}

.fiche-mes-commandes-impaye{
    flex-direction: row-reverse;
    display: flex;
    color: #cb1c73;    
}

.fiche-mes-commandes-date{
    font-weight: 600;
}

.tab-cmd{border: 1px solid black !important}
.row-impaye{border-bottom: 1px solid lightgray}        
@media (max-width: 768px){
    .legend-impaye{
        display:block !important;
    }
    .row-impaye-entete{
        display:none;
    }
}
.legend-impaye{
    display: none;
}
.legende-commande{
    color: white;
    background-color: black;
    padding: 5px;
}

#totalImpaye{font-size: 1.7em;}
.text-total-impaye{line-height: 40px}
        
.total-commande { background-color: #e0e0e0; margin: -10px 0 10px 0 !important; }
.commande { padding: 5px; margin: 10px 0; }
.commande .header { border-bottom: 1px solid #999; position: relative; padding: 5px; font-weight: bold; font-style:italic; margin-bottom: 5px;}
.commande .date { float: right; }
.commande .qte { float: left; margin-right: 5px; width: 2%; }
.commande .content { overflow: hidden; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; padding: 5px; }
.commande .titre-activite { display: block; }
.commande .aide { float: left; padding: 5px; width: 40%; /*background-color: #f7ecdc;*/ color: #cd8e35; margin-top: 10px; }
.commande .prix { background-color: #3591cd; color: #fff; padding: 5px; text-align: center; }
.commande .total { padding: 5px; text-align: center; margin-top: 10px; /*background-color: #f7ecdc;*/}
.commande .info_vente,
.commande .footer .lien { font-size: 0.6em; text-align: right; color: #3591cd; cursor: pointer; }
.commande .footer { margin: 0; width: auto; padding: 0 5px; display: block; }

.liste-commande, .titre-mes-commandes{
    cursor: pointer;
}
.separation-commande{
    margin-left: 30px;
    margin-right: 30px;
    border-top: 2px solid lightgrey;
}
.titre-mes-commandes{
    color: orange;
    margin-left: 42px;
    text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
}

.ico-panier:after {
    content: attr(value);
    font-size: 14px;
    color: #fff;
    background: red;
    border-radius: 50%;
    padding: 3px 5px;
    position: relative;
    left: -8px;
    top: -10px;
    opacity: 0.9;
    font-family: serif;
}

.wizard{
    border: 2px solid lightgray;
    padding-top: 5px;    
}

.wizard .nav-tabs {
    position: relative;
    margin-bottom: 0;
    border-bottom: none;
}

.wizard > div.wizard-inner {
    position: relative;
}

.connecting-line {
    height: 2px;
    background: #e0e0e0;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

span.round-tab {
    width: 64px;
    height: 64px;    
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #e0e0e0;
    z-index: 2;
    text-align: center;
    font-size: 25px;
    padding-top: 14px;
}
span.round-tab i{
    color:#555555;
}
.wizard li.active span.round-tab {
    background: #fff;
    border: 2px solid #5bc0de;
    
}
.wizard li.active span.round-tab i{
    color: #5bc0de;
}

span.round-tab:hover {
    color: #333;
    border: 2px solid #333;
}

.wizard .nav-tabs > li {
    width: 25%;
}

.wizard li:after {
    content: " ";
    /*position: absolute;*/
    position: relative;
    left: -44px;    
    opacity: 0;
    margin: 0 auto;
    bottom: -28px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";    
    position: relative;
    opacity: 1;
    margin: 0 auto;
    bottom: -17px;
    border: 10px solid transparent;
    border-bottom-color: #5bc0de;
}

.wizard-inner ul.nav-tabs{
    padding-bottom: 12px;
}

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}

@media( max-width : 585px ) {
    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
        line-height: 20px;
    }

    .wizard li.active:after {
        content: " ";
        position: relative;
        left: -35px;
        bottom: -13px;
    }
    
    .wizard-inner ul.nav-tabs{
        padding-bottom: 8px;
    }
    
    .connecting-line {
        top: 40%;    
    }
}

.round-tab-success {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #91d8ad;
    z-index: 2;
    left: 0;
    text-align: center;
    font-size: 25px;
    margin-right: 15px;
}
.round-tab-success i.glyphicon {
    line-height: 2.5;
    color: #91d8ad;
}

.round-tab-echec {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #ee5757;
    z-index: 2;
    left: 0;
    text-align: center;
    font-size: 25px;
    margin-right: 15px;
}

.round-tab-message-panier {     
    font-weight: 700;
    margin-top: 10px;
}

/*********************************************************/
/* Masquer la deuxième barre (navbar-main) en dessous de 992px */
@media (max-width: 992px) {
    #navbar-main {
        display: none; /* Cacher la deuxième barre de navigation */
    }

    /* Déplacer le bouton hamburger de navbar-main vers navbar-secondary */
    #navbar-secondary .navbar-toggler {
        display: block; /* Le bouton hamburger devient visible */
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 999; /* S'assurer qu'il est au-dessus des autres éléments */
    }

    /* Assurez-vous que les éléments de navbar-secondary ne se chevauchent pas avec le hamburger */
    #navbar-secondary .navbar-nav {
        margin-left: 0;
    }
}

/* Pour la taille d'écran supérieure à 992px */
@media (min-width: 992px) {
    #navbar-main {
        display: block; /* Afficher la deuxième barre de navigation */
    }

    #navbar-secondary .navbar-toggler {
        display: none; /* Masquer le hamburger dans la première barre */
    }
}

#leMenu{
    border: 1px solid lightgray;
    padding: 5px 5px 5px 15px;
    margin-top: 5px;
    color: black;
    background-image: linear-gradient(105deg, #f9f2f2, #f3f3f3 60%, #ffffff 40%);    
}

.supprCmd i{
    color: var(--couleur3);    
}