#resaSameDay {
    background-color: #1d7aaf;
    color: #ffffff;
    padding: 1em;
}

#contUsers_0 {
    display: none;
}

#contUsers_1 {
    display: none;
}

#waitMessageContainer {
    font-weight: bold;
    border: solid 1px #d0d0d0;
    padding: 1em;
}


#dispatcher_container {
    position: relative;
    z-index: 500;
    background-color: rgba(255, 255, 255, 0.69);
    border-radius: 20px;
    margin: 0px auto;
    opacity: 0;
}

.bt_aj_participant {
    width: 213px;
    height: 64px;
    background-image: url("pics/ajout_participant.png");
    margin: 0px auto;
    cursor: pointer;
}

#bt_choix_horaire {
    float: right;
    background-color: #2977ba;
    padding: 0.5em 1em;
    border-radius: 1em 0em 0em 1em;
}

#bt_choix_horaire a{
    color: aliceblue;
    text-decoration: none;
    font-size: 1em;
}

.bt_aj_participant span{
    display: none;
}

.bt_aj_participant:hover {
    background-position: 100% 0%;   
}

.prev_next_act {
    width: 41px;
    height: 204px;
    position: relative;
}
.prev_next_act:hover {
    background-position: 100% 0%;
}

.prev_act {
    background-image: url('pics/prev_act.png');
    float: left;
}

.next_act {
    background-image: url('pics/next_act.png');
    float: right;
}

.vignette_activite {
    float: left;
    background-color: #d12c85;
    padding: 5px;
    border-radius: 10px;
    margin-right: 10px;
    width: 220px;
    text-align: center;
    border: solid 1px #c1c1c1;
    box-shadow: 0px 0px 2px 2px rgba(101, 101, 101, 0.29);
}

.vignette_activite img {
    border: solid 1px #b9b9b9;
    border-radius: 10px;
}

@keyframes remise {
    0% {
        color: aliceblue;
    }
    50% {
        color: #cc2b2b;
    }
}

.vignette_texteRemise {
    font-size: 0.8em;
    background-color: #ffffff;
    color: #ff0000;
    animation-name: remise;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    border-radius: 20px;
    box-shadow: 0px 0px 5px #ffffff;
    margin: 0px 8px;
    margin-top: 0.5em;
    padding: 0.3em;
    font-weight: bold;
}

.activite_titre {
    margin: 0px;
    font-size: 1.4em;
    margin-bottom: 5px;
    color: #ffffff;
}

.activite_desc {
    margin: 0px;
    padding: 0px;
    font-size: 1em;
    color: #e5e5e5;
}

#vignettes_container {
    overflow: hidden;
    float: left;
    margin-bottom: 10px;
}

#vignette_slider{
    width: 32000px;
    position: relative;
}

.interog {
    width: 32px;
    height: 32px;
    background-image: url('pics/interog.png');
    float: right;
    cursor: pointer;
}
.interog:hover {
    background-position: 100% 0%;   
}

.vignette_interrog {
    position: relative;
    top: -3px;
    left: 3px;
}

.close {
    width: 32px;
    height: 32px;
    background-image: url('pics/close.png');
    float: right;
    cursor: pointer;
    position: relative;
    top: -8px;
    left: 8px;
}
.close:hover {
    background-position: 100% 0%;   
}

.closeSm {
    width: 20px;
    height: 20px;
    background-image: url('pics/closeSm.png');
    float: right;
    cursor: pointer;
    position: relative;
    top: -6px;
    left: 6px;
}
.closeSm:hover {
    background-position: 100% 0%;   
}

.closeSmM {
    display: none;
}

.contrainteM {
    display: none;
}

.edit {
    width: 32px;
    height: 32px;
    background-image: url('pics/edit.png');
    float: left;
    cursor: pointer;
    position: relative;
    left: -8px;
    top: -8px;
}
.edit:hover {
    background-position: 100% 0%;   
}

.editM {
    display: none;
}

.ajActM {
    display: none;
}

/*------------------------------------------*/

#slideZone {
    overflow: hidden;
    position: fixed;
    display: none;
    top: 0px;
    left: 0px;
    z-index: 12000;
}

/*------------------------------------------*/

#descWin {
    position: fixed;
    background-color: #ffffff;
    border-radius: 10px;
    z-index: 10000;
    font-size: 1em;
    padding: 1em;
    color: #0b4d88;
    display: none;
}

#descWin p {
    margin: 0px;
    padding: 0px;
}

.descWinPrix {
    font-size: 1.5em;
    margin: 0px;
}

.descWinOptName {
    font-size: 1.5em;
    margin: 0px;    
}

.grille_prix {
    width: 50%;
    margin: 0px auto;
    text-align: center;
    background-color: #d6d6d6;
}

.grille_prix .ligne_detail_prix td {
    text-align: center;
    padding: 10px;
}

.grille_prix .ligne_titre_prix td {
    text-align: center;
}

/*------------------------------------------*/

/*
#barre_ajout {
    width: 100%;
}

#barre_ajout td {
    width: 33%;
}
*/

#zoneAjouter {
    display: flex;
}

#barre_ajout {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

#aj_part_gauche {
    font-weight: bold;
    font-size: 14px;
    color: #ca237d;
    padding-top: 2px;
    padding-left: 40px;
}

#aj_part_gauche a {
    color: #2475d3;
}

#aj_part_droite {
    background-color: #2977ba;
    border-radius: 10px;
    border: solid 1px #000000;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    /*margin: 0px auto;*/
    color: aliceblue;
    background-image: url(pics/picto_groupe.png);
    background-position: 1% 50%;
    background-repeat: no-repeat;
}

#aj_part_droite div {
    margin-left: 50px;
    font-size: 14px;
}

/*------------------------------------------*/

.form_label {
    width: 50px;
    text-align: right;
    margin-right: 10px;
    display: inline-block;
}

/*------------------------------------------*/

#addUserWin {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    display: none;
    color: #0b4d88;
    position: fixed;
    z-index: 10000;
    font-size: 12px;
}

#renameUserWin {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    display: none;
    color: #0b4d88;
    position: fixed;
    z-index: 10000;
    font-size: 12px;
}

#buyTypeWin {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    display: none;
    color: #0b4d88;
    position: fixed;
    z-index: 10000;
    font-size: 12px;    
}

#multiClientWin {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    display: none;
    color: #0b4d88;
    position: fixed;
    z-index: 10000;
    font-size: 12px;    
}


#contraintesWin {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    border: solid 2px #333333;
    display: none;
    color: #0b4d88;
    position: fixed;
    z-index: 10000;
    font-size: 12px;    
}


.titreUI {
    font-size:2em;
    margin: 0px;
}

/*-------------------- Liste participants ----------------------*/ 

.participant_panel {
    display: block;
    width: 99%;
    background-color: #bed3f0;
    padding: 5px;
    padding-bottom: 0px;
    border: solid 2px #ffffff;
    border-radius: 10px;
    margin-right: 10px;
    text-align: center;
    box-shadow: 0px 0px 2px 2px rgba(101, 101, 101, 0.29);
    margin-bottom: 10px;
}

.participant_name {
    text-align: center;
    background-color: #ffffff;
    background-image: url(pics/picto_user.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    display: inline-block;
    padding: 5px;
    border: solid 1px #9b9b9b;
    border-radius: 10px;
    float: left;
    min-width: 100px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.participant_name .nom {
    color: #264660;
    white-space: nowrap;
    font-size: 16px;
    text-align: center;
    position: relative;
    top: -8px;
}

.participant_name .age {
    color: #2a73b2;
    white-space: nowrap;
    font-size: 10px;
    position: relative;
    top: -8px;
}

@keyframes fondFlashy {
    0% { background-color: #bed3f0; }
    50% { background-color: #6489be; }
    100% { background-color: #bed3f0; }
}

.dragOver {
    border:solid 2px #113260;
    animation-name: fondFlashy;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

@keyframes fondFlashy2 {
    0% { background-color: #2977ba; }
    50% { background-color: #0b3457; }
    100% { background-color: #2977ba; }
}

.bluedragOver {
    animation-name: fondFlashy2;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}


/*-------------------------------------- Activites participant ------------------------------------*/

.activite {
    display: block;
    float: left;
    background-color: #d12c85;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px;
    border-radius:5px 8px 5px 5px;
}

.activite img {
    border-radius: 5px;
    border: solid 1px #b9b9b9;
}

.activite .intitule {
    display: block;
    color: #ffffff;
    font-size: 11px;
    white-space: nowrap;
}

.activite .intituleOption {
    float: left;
    font-size: 10px;
    color: aliceblue;
    width: 80px;
}

.activite .checkBoxOption {
    display: block;
    border: solid 1px #ff0000;
}

/*---------------------------------------- sous  totaux -------------------------- */

.sousTotal {
    text-align: center;
    background-color: #ffffff;
    display: inline-block;
    padding: 5px;
    border: solid 1px #9b9b9b;
    border-radius: 10px;
    float: right;
    min-width: 100px;
    margin-right: 0px;
    margin-bottom: 5px;
    color: #838383;
}

.horsRemise {
    font-size: 12px;
    height: 16px;
}
.horsRemise span{
    color: #d12c85;
}
.remise {
    font-size: 16px;
    height: 20px;
}
.remise span{
    color: #d12c85;
}

.regler {
    font-size: 16px;
    height: 20px;
}
.regler span{
    color: #ffffff; 
    padding: 2px 5px;
    border-radius: 10px;
    background-color: #d12c85;
}

/*--------------------------------------- Barre totale ---------------------------*/

.privilEtTotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
}

/*----------- privilege -----------*/

#pack_privilege p {
    color: #3e76b7;
    font-size: 1em;
    margin: 0px;
    padding-left: 10px;
    line-height: 1.3em;
    width: 90%;
    margin: 0px auto;
}

#pack_privilege h1 {
    color: #3e76b7;
    font-size: 2em !important;
    margin: 0px;
}

#pack_privilege a {
    color: #d12c85;
    text-decoration: underline;
}

/*----------- prix -------*/

#prices {
    color: #838383;
    border: solid 2px #d12c85;
    border-radius: 10px;
    padding: 5px;
}

.tt_bottom_l1 {
    font-size: 12px;
    white-space: nowrap;
}

.tt_bottom_l2 {
    font-size: 16px;
}

.tt_bottom_t1 {
    color: #d12c85;    
}

.tt_bottom_t2 {
    color: #ffffff; 
    padding: 2px 5px;
    border-radius: 10px;
    background-color: #d12c85;  
}

/*----------- pass ------------------*/

@keyframes pass_active {
    0% { background-color: #d12c85; }
    10% { background-color: #d12c85; }
    11% { background-color: #e86daf; }
    20% { background-color: #d12c85; }
    21% { background-color: #eb79b7; }
    30% { background-color: #d12c85; }
    
}

.pass_active {
    display: inline-block;
    background-color: #d12c85;
    color: #ffffff;
    border-radius: 10px;
    padding: 5px 20px;
    text-align:  center;
    animation-name: pass_active;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

/*-----------------------------*/

.pos_disponibilite {
    position: relative;
    top: 0.5em;
}

/*---------------------------------- double click ------------------------------- */

@keyframes activite_select {
    0% { background-color: #d12c85; }
    50% { background-color: #ea88bd; }
    100% { background-color: #d12c85; }
}

.activiteSelect {
    animation-name: activite_select;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background-color: #ea88bd;
}

/*---------- bt finaliser ----------*/

#finaliserCommande {
    display: none;
}

.margBot {
    margin-bottom: 10px;
}

.bt_aide {
    background-image: url(pics/bt_aide.png);
    width: 186px;
    height: 41px;
    display: block;
}

.bt_aide span {
    display: none;
}

#videoPlayer video{
    box-shadow: 0px 0px 20px #000000;
    border: solid 1px #000000;
    margin-bottom: 20px;
    border-radius: 8px;
}

#zoneAjouterMobile {
    display: none;
}

.mobilActCont {
    display: none;
}

/*------------------------------ FAQ ------------------------*/

#faqActivite {
    width: 70%;
    margin: 0px auto;
    color:  #1d588b !important;
}

#faqActivite .intitule {
    font-weight: bold;
    margin-right: 1em;
    word-break: keep-all;
    
}

#faqActivite p {
    margin: none;
    padding: none;
}

#faqActivite .flexZone {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.pictoCalendrier {
    font-family: icons2;
    font-size: 1.3em;
}

.ouvertureInfo {
    border: solid 1px #ffffff;
    border-radius: 0.5em;
    padding: 0.5em;
    margin-right: 0.5em;
    background-color: rgba(255, 255, 255, 0.17);
    color: #ffffff;
}

/*---------------------------------------- mobile -----------------------------------*/

@media (max-width: 640px) {
    
    .disponibiliteViewer {
        display: none;
    }
    
    #activity_container {
        display: none;
    }
    
    #pack_privilege {
        display: none;
    }
    
    
    
    @keyframes mobilHelperAnim {
        0%{
            border: solid 2px #e32c2c;
            background-color: #fff68a;
        }
        49%{
            border: solid 2px #e32c2c;
            background-color: #fff68a;
        }
        50% {
            border: solid 2px #ffffff;
        }
        100% {
            border: solid 2px #ffffff;
        }
    }
    
    .mobilHelper {
        width: 70%;
        margin: 0px auto;
        font-size: 1em;
        margin-bottom: 2em;
        text-align: center;
        padding: 0.5em;
        border: solid 2px #ffffff;
        /*animation-name: mobilHelperAnim;
        animation-duration: 1s;
        animation-iteration-count: 5;*/
    }
    
    .btMobile {
        /*display: block;
        font-size: 1.5em;
        font-weight: normal;
        width: 80%;
        margin: 0px auto;*/
    }
    
    #btChoixActM {
        display: none;
    }
    
    
    #zoneAjouter {
        display: none;
    }
    
    #zoneAjouterMobile {
        display: block;
    }
    
    .btMobile {
        width: 80%;
        margin: 0px auto;
        padding: 0.5em 0em;
        font-size: 1.2em;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.2em;
        border-radius: 4px;
    }
    
    .btAideM {
        background-color: #cddd0d;
        color: #ffffff;
    }
    
    .btAjParticipantM {
        background-color: #82b431;
        color: #ffffff;
        margin-bottom: 1em;
    }
    
    /*-------------------- Liste participants ----------------------*/ 

    .participant_panel {
        display: block;
        width: 90%;
        background-color: rgba(209, 44, 133, 0.1);
        border: solid 2px #d12c85;
        padding: 0.5em;
        border-radius: 0px;
        text-align: center;
        box-shadow: none;
        margin: 0px auto;
        margin-bottom: 1em;
    }
    
    .participant_name {
        text-align: center;
        font-size: 1.2em;
        background-color: #ffffff;
        background-image: none;
        background-position: 0s% 0%;
        background-repeat: no-repeat;
        display: block;
        padding: 0.5em;
        border: none;
        border-radius: 0.4em;
        float: none;
        min-width: 0px;
        margin-right: 0px;
        margin-bottom: 0.2em;
    }
    
    .edit {
        display: none;
    }
    
    .editM {
        display: block;
        float: left;
        background-color: #d12c85;
        color: aliceblue;
        padding: 0.2em;
        border-radius: 0.2em;
        font-size: 1em;
    }
    
    .ajActM {
        display: block;
        background-color: #82b431;
        padding: 0.5em;
        border-radius: 0.2em;
        font-size: 1em;
        color: #ffffff;
    }
    
    
    .closeSm {
        display: none;
    }
    
    .closeSmM {
        display: block;
        float: right;
        background-color: rgb(190, 50, 50);
        color: aliceblue;
        border-radius: 1em;
        border: solid 1px #ffffff;
        font-size: 1em;
        font-weight: bold;
        padding: 0em 0.2em;
    }
    
    .contrainteM {
        display: block;
        background-color: rgba(255, 255, 255, 0.62);
        padding: 0.5em;
        text-align: left;
        margin-top: 0.5em;
        font-size: 0.8em;
    }
    
    .contrainteM p {
        padding: 0em;
        margin: 0em;
    }
    
    
    .participant_name .nom {
        color: #264660;
        white-space: nowrap;
        font-size: 0.9em;
        text-align: center;
        position: relative;
        width: 50%;
        max-width: 50%;
        overflow: hidden;
        margin: 0px auto;
        top: -1.5em;
        font-size: 1em;
        padding-left: 0.5em;
    }
    
    .participant_name .age {
        color: #2a73b2;
        white-space: nowrap;
        font-size: 0.8em;
        position: relative;
        top: -1.5em;
    }
    
    /*-------------------------------------- Activites participant ------------------------------------*/

    .activite {
        display: block;
        float: none;
        background-color: #d12c85;
        margin: 0px auto;
        margin-bottom: 0.15em;
        padding: 1em;
        border-radius: 0.2em 1em 0.2em 1em;
    }

    .activite img {
        border-radius: 5px;
        border: solid 1px #b9b9b9;
        display: none;
    }

    .activite .intitule {
        display: block;
        color: #ffffff;
        font-size: 1.2em;
        white-space: normal;
        /*margin-bottom: 1em;*/
        font-weight: bold;
    }

    .activite .intituleOption {
        float: left;
        font-size: 1em;
        color: aliceblue;
        width: 80%;
        text-align: right;
        margin-right: 1em;
    }

    .activite .checkBoxOption {
        display: block;
        border: solid 1px #ff0000;
    }
    
    .activite .optionSeparator {
        height: 1em;
    }
    
    /*---------------------------------------- sous  totaux -------------------------- */

    .sousTotal {
        text-align: right;
        background-color: #ffffff;
        display: inline-block;
        padding: 5px;
        border: none;
        border-radius: 10px;
        float: right;
        min-width: 100px;
        margin-right: 0px;
        margin-bottom: 5px;
        color: #838383;
    }

    .zoneDispo {
        width: 95;
        margin: 0px auto;
        text-align: center;
        margin-bottom: 1em;
        display: none;
    }
    
    .horsRemise {
        font-size: 1em;
        height: 1.2em;
    }
    .horsRemise span{
        color: #d12c85;
    }
    .remise {
        font-size: 1em;
        height: 1.2em;
    }
    .remise span{
        color: #d12c85;
    }

    .regler {
        font-size: 1em;
        height: 1.2em;
    }
    .regler span{
        color: #ffffff; 
        padding: 2px 5px;
        border-radius: 10px;
        background-color: #d12c85;
    }
    
    /*------------------------------*/
    
    .privilEtTotal {
        display: block;
    }
    
    #pack_privilege {
        width: 90%;
        margin: 0px auto;
        margin-bottom: 1em;
    }
    
    #pack_privilege p {
        color: #3e76b7;
        font-size: 1em;
        margin: 0px;
        padding-left: 10px;
    }

    #pack_privilege h1 {
        color: #3e76b7;
        font-size: 1.2em !important;
        margin: 0px;
    }

    #pack_privilege a {
        color: #d12c85;
        text-decoration: underline;
    }
        
    /*--------------------------*/
    
    
    
    /*----------- prix -------*/

    #prices {
        color: #838383;
        border: solid 2px #d12c85;
        border-radius: 10px;
        padding: 5px;
        text-align: right;
        width: 90%;
        margin: 0px auto;
    }

    .tt_bottom_l1 {
        font-size: 1.3em;
        white-space: nowrap;
    }

    .tt_bottom_l2 {
        font-size: 1.3em;
    }

    .tt_bottom_t1 {
        color: #d12c85;    
    }

    .tt_bottom_t2 {
        color: #ffffff; 
        padding: 2px 5px;
        border-radius: 10px;
        background-color: #d12c85;  
    }
    
    /*------------------ selecteur activités -------------------*/
    
    #mobilActList {
        display: none;
    }
    
    .mobilActCont {
        display: block;
        width: 95%;
        border: solid 2px #d12c85;
        padding: 0.0em;
        padding-bottom: 0.2em;
        margin: 0px auto;
        margin-bottom: 1em;
    }
    
    .mobilActCont .titre {
        padding: 0px;
        margin: 0px;
        font-size: 1.8em;
        background-color: #d12c85;
        text-align: center;
        color: #eaeaea;
    }
    
    .mobilActCont .desc {
        font-size: 1em;
        padding: 0em 1em;
        margin: 0em;
    }
    
    .mobilActCont .desc p{
        margin: 0px;
        padding: 0.5em 0px;
    }
    
    .mobilActCont .picContainer {
        display: flex;
        justify-content: center;
    }
    
    .mobilActCont .pic {
        margin-top: 0.2em;
        border: solid 1px #79194d;
    }
    
    .mobilActCont .choisir {
        background-color: #82b431;
        color: #ffffff;
        font-size: 1em;
        padding: 0.5em;
        text-align: center;
        width: 50%;
        margin: 0px auto;
        border-radius: 0.3em;
        font-weight: bold;
    }
    
    /*------------- selecteur participant --------------------*/
    
    #participantList .participantCont {
        background-color: #ddb8cc;
        color: #ffffff;
        font-size: 1em;
        padding: 0.4em;
        text-align: center;
        width: 90%;
        margin: 0px auto;
        border-radius: 0.3em;
        margin-bottom: 1em;
    }
    
    
    #participantList .confirmer {
        background-color: #d12c85;
        color: #ffffff;
        font-size: 1em;
        padding: 0.4em;
        text-align: center;
        width: 50%;
        margin: 0px auto;
        border-radius: 0.3em;
        margin-bottom: 1em;
    }
    
    .MparticipantUnselected {
        background-color: #ddb8cc !important;
    }
    
    .MparticipantSelected {
        background-color: #07b700 !important;
    }
    
    #faqActivite {
        width: 90%;
        margin: 0px auto;
    }
    
    #faqActivite .flexZone {
        align-items: flex-start;
    }
    
    #resaSameDay {
        line-height: 2em;   
    }
    
    
}