/* http://csscomb.com/online */
@font-face {
    font-family: "ionicons";
    src: url("ionicons/fonts/ionicons.eot");
    src: url("ionicons/fonts/ionicons.eot?#iefix") format('embedded-opentype'),
    url("ionicons/fonts/ionicons.woff") format('woff'),
    url("ionicons/fonts/ionicons.ttf") format('ttf'),
    url("ionicons/fonts/ionicons.svg#IoniconsRegular") format('svg');
    font-weight: normal;
    font-size: inherit;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #afb4c4;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #afb4c4;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #afb4c4;
}

#btConnectMefV2
{
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    padding: 10px;
    background-color: cornflowerblue;
    border: none;
    border-radius: 5px;
    font-size: 1.5rem;
    color: white;
}

.text {
    margin-top: 20px;
    font-size: 1.4rem;
    color: #000;
}

#fondAccueil {
    width: 100%;
    height: 100%;

    background: url('../Images/monespacefamille.jpg') no-repeat;
    background-size: cover;
}
.creation {
    margin-top: 1%
}

.visibility-hidden-button{
    visibility: hidden;
}

.statusDemande {
    position: absolute;
    right: 4%;
    top: 6%;
}

.cursor-pointer{
    cursor: pointer;
}

.traitement {
    margin-top: 1%
}

.historique {
    font-weight: bold;
}

.demande {
    font-weight: bold;
}

#send-demande {
    float: right;
}

.filecenter {
    text-align: center;
}

.btn-file {
    min-width: 32%;
    margin-bottom: 3%;
    font-size: 114%;
    padding: 1%;

}

.fileDemande {
    margin: 3% auto auto;
}

.headPjTitle {
    margin-bottom: 3%;
}

.title {
    font-style: oblique;
    font-weight: bold;
    margin: 0 auto;
    font-size: 113%;
}

.titreDemande {
    font-size: large;
    size: 15px;
    width: 80%;
}

.upload-area {
    width: 70%;
    height: 200px;
    border: 2px solid lightgray;
    border-radius: 3px;
    margin: 0 auto;
    text-align: center;
    overflow: auto;
}

.corpsDemande {
    line-height: 22px;
    margin-bottom: 20px;
}

.upload-area:hover {
    cursor: pointer;
}

.upload-area h1 {
    text-align: center;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 50px;
    color: darkslategray;
}

#file {
    display: none;
}

/* Thumbnail */
.thumbnail {
    width: 80px;
    height: 80px;
    padding: 2px;
    border: 2px solid lightgray;
    border-radius: 3px;
    float: left;
    margin: 5px;
}

.size {
    font-size: 12px;
}

.libelleTpDmd {
    padding-bottom: 10px;
    font-size: 15px;
    padding-left: 25px;
}

input#btn-termine {
    background: #368637 linear-gradient(rgb(73, 169, 87) 0%, rgb(90, 160, 82) 24%, rgb(68, 103, 72) 41%, rgb(71, 144, 58) 100%) !important;
}

input#btn-termine:hover {
    color: #407537;
    text-shadow: 1px 1px 1px rgba(79, 220, 77, 0.5);
    border: 1px solid #47823c !important;
    background: #fff linear-gradient(rgb(253, 235, 235) 0%, rgb(255, 255, 255) 24%, rgb(211, 232, 212) 41%, rgb(195, 229, 198) 100%) !important;
    box-shadow: 1px 1px 10px 0 #8e8e8e !important;
}

.padding-reservation-link{
    padding: 2rem 2rem;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #f7f8fe;
}

.reservation-information-left{
    padding: 2rem 0;
    font-size: 1.2rem;
}

.reservation-title {
    color:#532d7d;
    text-transform: uppercase;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: bolder;

}

.reservation-link{
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
    color: #FFF;
    background-color: #532d7d;
}

.reservation-text{
    color: #575a89;
}

.inputLibelleTpDmd {
    width: 90% !important;
    margin-left: 50px;
    margin-right: 50px;
}

.corpsTpDmd {
    padding-bottom: 10px;
    padding-left: 25px;
    margin-top: 25px;
}

.inputCorpsTpDmd {
    width: 90% !important;
    margin-left: 50px;
    margin-right: 50px;
}

.afficheEnfTpDmd {
    padding-bottom: 10px;
    padding-left: 25px;
    margin-top: 25px;
}

.affichePjTpDmd {
    margin-top: 8px !important;
    padding-right: 10px !important;
}

.inputAffichPjTpDmd {
    margin-top: -4px !important;
    margin-right: 20px !important;
}

.piecejTpDmd {
    padding-bottom: 10px;
    padding-left: 25px;
    margin-top: 25px;
}

.inputPiecejTpDmd {
    width: 80% !important;
    margin-left: 50px;
    margin-right: 50px;
}

.croix {
    margin-top: 10px;
    cursor: pointer;
}

.ligne, .sansBordure {
    border: 0 !important;
}
.ligne{

    cursor: pointer;
}

#myInput {
    width: 20%;
}

.list-etat {
    margin-left: 15px;
}

.noDemande {
    text-align: center;
    margin-top: 10%;
}

.lienDmd {
    color: red !important;
    width: 100%;
    display: inline-table;
    text-align: right;
}

.faireDmd {
    cursor: pointer;
}

.list-dmd {
    width: auto;
}

.newsOptionsContainer {
    padding-top: 3px;
}

.saisieInfoActusBool {
    padding-top: 3px;
    padding-bottom: 3px;
}

.saisieInfoActusBool .form-check-label{
    padding-left: 3px;
}

.divLibellePj {
    display: flex;
}

.etat {
    right: 0;
    top: 23px;
    margin-top: -24px;
    border: 0 solid;
    padding: 8px;
    position: absolute;
    border-radius: 3px;
    color: white;
}

.vert {
    background: green;
}

.bleu {
    background: cornflowerblue;
}

.rouge {
    background: red;
}

.dateDemande {
    margin-top: 5px;
}

.noPointer {
    cursor: default !important;
}

.details{
    cursor: pointer;
}

.blocDemande{
    background-color: #f5f5f5db;
    border: 1px solid #b9b9b9;
}

input#btn-details {
    background: #368637 linear-gradient(rgb(73, 169, 87) 0%, rgb(90, 160, 82) 24%, rgb(68, 103, 72) 41%, rgb(71, 144, 58) 100%) !important;
}

input#btn-details:hover {
    color: #407537;
    text-shadow: 1px 1px 1px rgba(79, 220, 77, 0.5);
    border: 1px solid #47823c !important;
    background: #fff linear-gradient(rgb(253, 235, 235) 0%, rgb(255, 255, 255) 24%, rgb(211, 232, 212) 41%, rgb(195, 229, 198) 100%) !important;
    box-shadow: 1px 1px 10px 0 #8e8e8e !important;
}

a#Demandes {
    background-color: #f5f5f5db;
}


.info {
    max-width: 100%;
    height: auto;
    display: block;
}

.divInfos {
    margin-bottom: 8%;
}

.text-infos {
    padding-top: 2%;
}

.inputMessage {
    width: 100%;
    height: 10%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
    font-size: 13px;
}
.inputMessageRefus {
    width: 100%;
    height: 10%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}

.filAriane {
    font-size: 21px;
    line-height: 50px;

    float: left;
    overflow: hidden;

    width: 25%;
    height: 50px;
    margin: 0 auto;

    cursor: pointer !important;
    text-align: center;
}

.filArianeActif,
.filArianeActif1 {
    color: #fff;
    background-repeat: no-repeat;
}

.filArianeActif {
    background-image: url('../Images/fondBarreMenuEtape.png');
    background-size: 100% 100%;
}

.filArianeActif1,
.titreFilArianeActif {
    background-color: #cbcc00;
}

.titreFilArianeActif {
    text-align: left;

    color: #fff;
}

#divMsg .filArianeActif1 {
    width: 100%; /* calc(100% - 20px); */
    padding-left: 20px;

    text-align: left;
}

#divFilAriane {
    float: none;

    width: 100%;
    height: 50px;
    margin: 0 auto;

    text-align: left;

    background-color: #f2f2f2;
}

.checkbox-commune {
    margin-left: 2%;
    margin-bottom: 2%;
}

.page-demande {
    margin-left: 10em;
    margin-right: 10em;
    margin-bottom: 10em;
}

.inputDemande {
    width: 100% !important;
    height: 20em;
}

.demande-form {
    margin-left: 10%;
    margin-right: 10%;
}

.filArianeActif1,
.titreFilArianeActif {
    background-color: #cbcc00;
}

.filArianeActif .numerotation,
.filArianeActif1 .numerotation {
    border: 2px solid #FFF;
    border-radius: 50%;
}

.titreFilArianeAcdata-clicktif {
    text-align: left;

    color: #fff;
}

.page {
    margin: 2em 10em 10em;
}

.scrollBar {
    overflow-y: scroll;
    height: calc(100vh - 170px);
}

.scrollBarHistorique {
    overflow-y: auto;
    height: calc(100vh - 280px);
}

.divBtRecherche {
    min-height: 34px;
}

.listHistoriqueDemande{
    overflow-y: auto;
    height: 80%;
    /*
    left: auto;
    right: auto;
    position: absolute;
    */
}

.listHistoriqueDemandeMetier{
    overflow-y: auto;
    height: 70%;
    width:100%;
    display: inline-block;
}

.enteteTraitementDmd{
    display: block;
    width: 100%;
}

.sansScroll {
    overflow-y: hidden;
}

.choixDemande {
    margin-bottom: 2em;
}

.btSupprime {
    margin-left: 15px;
}

.EnfantSelMinResolution {
    position: relative;
    top: 0;
    left: 15px;

    display: none;

    width: 400px;
}


.titreespace {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 40px;
    font-weight: normal;

    margin-bottom: 5px;

    text-align: center;

    color: #fff;
    border: 1px solid #e32d32;
    border-radius: 10px;
    background-color: #e32d32;
    line-height: 45px;
}

.divInLine {
    display: flex;
}

.divInLine label {
    padding-top: 7px;
}

#logoSite {
    top: 0;
    background-image: url('../Images/logoMef.svg');
    background-size: cover;
    width: 292px;
    height: 66px;
}

#miniResolution {
    display: none;
}

#txtCodeActivationCommune {
    margin: 10px auto;
}

#principalAbo {
    width: 80%;
    margin: 0 auto;
    background: linear-gradient(#FFF, #F0F0F0);
}

#btVidePanier {
    min-width: 50px;
}

.inputAcceuil {
    width: 180px !important;
}

#detailActu {
    width: 85%;
    margin: 0 auto;
    padding: 5px;
}

.partDateDroite {
    float: right;
}

.partDate {
    float: left;
}

.partDate,
.partDateDroite {
    width: 45%;
}

#divListFacture {
    max-height: calc(100% - 213px) !important;
}

#service {
    font-size: 10px;

    height: 22px;
    margin-top: 5px;
    padding-top: 0;
}

.sousTitreActuParent {
    display: flex;
}

.sousTitreActu {
    font-style: italic;

    padding-top: 5px;
}

.sousTitreDesc {
    margin-left: 25px;
    padding: 2px 5px;

    text-align: center;

    border: 1px solid #dae527;
    border-radius: 10px;
    background-color: #dae527;
}

.imageActu {
    width: 180px;
    max-height: 180px;
}

.reseravtionI,
.reseravtionSuppI {
    font-size: 12px;

    display: table;

    width: 95%;
    margin: 2px auto;

    border: 1px solid #000;
}

.reseravtionSuppI {
    background-color: #fbeff2;
}

.reseravtionI .description,
.reseravtionSuppI .description {
    float: left;

    width: 80%;
}

.reseravtionI .images,
.reseravtionSuppI .images {
    float: left;

    width: 20%;
    margin-top: auto;
}

#divFilArianeEf {
    float: none;

    width: 100%;
    height: 50px;
    margin: 0 auto;

    text-align: left;

    background-color: #f2f2f2;
}

.filArianeEf {
    font-size: 21px;
    line-height: 50px;

    float: left;

    width: 100%;
    margin: 0 auto;

    cursor: pointer;
    text-align: center;
}

.filArianeActifEf,
.filArianeActifEf1 {
    color: #fff;
    background-repeat: no-repeat;
    /* font-weight: bolder; */
}

.filArianeActifEf {
    background-size: 100% 100%;
}

.filArianeActifEf1,
.titreFilArianeActifEf {
    background-color: #cbcc00;
}

.titreFilArianeActifEf {
    text-align: left;

    color: #fff;
}

#detailResa {
    position: absolute;
    z-index: 1000;

    padding: 5px;

    border-radius: 5px;
}

.titrePanier {
    font-weight: bolder;

    margin: 0 auto;

    text-align: center;
}

.formDate {
    width: 190px !important;
}

#principalAccueil {
    display: flex;
    height: calc(100vh - 86px - 16px - 50px); /* 86: header 16: liseret 50: footer */
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
}

.divAccueil {
    /* border : 1px solid #1A171B; */
    margin: 20px 0 10px 0;
}

.actu, .blocDemande {
    display: inline-block;

    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 5px;

    border-radius: 3px;
    box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, .16);
}

.blocDemande {
    width: 99%;
    margin-left: 2px;
}

.dateActu,
.typeActu {
    float: left;

    width: 13%;
    min-width: 190px;
}

.typeActu {
    float: right;

    text-align: center;

    border: 1px solid #dae527;
    border-radius: 10px;
    background-color: #dae527;
}

.partActu {
    float: left;

    width: 70%;
}

.dateActu,
.titreActu {
    font-weight: bolder;
}

.descActu {
    /* text-align: justify; */
    min-height: 30px;
}

#divMsg {
    margin: 15px;
}

#divTableauBord {
    margin-top: 0;
}

#divMesDemarchesEncours .intituleBloc {
    width: 220px;
}

#contentActu {
    width: 83%;
    margin: 0 auto;
}

#divAccueil {
    overflow-y: auto;
}

#divContentMesDemarches,
#divContentMesMessages,
#divContentMesFactures,
#divContentHisto {
    height: 150px;
}

.divAccueil .content {
    overflow: auto;

    padding: 5px;
}

.divAccueil .content {
    text-align: left;
}

.intituleBloc {
    font-size: 14px;

    position: relative;
    top: -11px;
    left: 10px;

    overflow: visible;

    width: 100px;

    background-color: #fff;
}

.txtDemande {
    line-height: 1.6;
}

.accueil {
    margin-top: 4%;
}

.pieceJ {
    font-weight: bold;
}

#screenshot {
    position: absolute;
    border: 1px solid #ccc;
    background: #333;
    padding: 5px;
    display: none;
    color: #fff;
}

.imgTest {
    z-index: 9999;
    position: absolute;
    width: 15em;
    height: auto;
}

.listePj {
    margin-top: 10px;
}

.barre {
    height: 1px;
    color: #b8b4b4;
    background-color: #b8b4b4;
    border: 0;
    margin-top: 0;
}

.menuActualites,
.menuDemandes,
.menuServicesEnLigne,
.menuReservations,
.menuFactures {
    font-size: 16px;

    display: block;
    float: left;
    overflow: hidden;

    width: 20%;
    height: 27px;
    padding-top: 2px;

    cursor: pointer;
    text-align: center;

    color: #fff;
}

.in > .nav > .menuActualites,
.in > .nav > .menuDemandes,
.in > .nav > .menuServicesEnLigne,
.in > .nav > .menuReservations,
.in > .nav > .menuFactures {
    float: none;

    width: 90%;
}

.menuActualites {
    background-color: #ca2778;
    padding-top: 5px;
}

.menuDemandes {
    background-color: #e9641d;
    padding-top: 5px;
}

.menuServicesEnLigne {
    cursor: default;

    background-color: #cdc900;
    padding-top: 5px;
}

.menuReservations {
    background-color: #532d7d;
    padding-top: 5px;
}

.menuFactures {
    background-color: rgb(237, 28, 36);
    padding-top: 5px;
}

.menuActif {
    font-weight: bolder;

    text-decoration: underline;
}

#listeEnfant {
    display: inline-block;

    width: 100%;
    height: 45px;

    color: white;
    background-color: #8c78b3;
}

.detailEnfant {
    display: inline-block;

    cursor: pointer;
}

.enfantSelectionne {
    font-weight: bolder;

    color: black;
    /* box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.56), 0 2px 10px 0 rgba(255, 255, 255, 0.52); */
    background-color: #532d7d !important; /* #8c78b3 !important; */
}

.infoEnfant {
    font-size: 10px;
}

#planning {
    margin-top: 15px;
}

#contentPlanning {
    overflow-y: auto;
    display: flex;
    width: 100%;
}

#divEntetePlanning {
    margin-top: 15px;
}

#agenda,
#periode {
    float: left;

    min-width: 315px;
    padding: 0;
}

#periode {
    margin-top: 15px;

    text-align: right;
}

#divChoixperiode {
    width: 550px;
    text-align: center;
    margin: 0 40% 20px;
    z-index: 100;
}

.selectPeriodDate {
    padding-left: 12px;
}

.lienVidePanier {
    display: inline;
    color: #e32d32;
}

.libelleServiceSemaine, .libelleServiceSemainePeriode{
    padding-left: 5px;
    font-size: 10px !important;
    font-weight: normal !important;
}

.libelleServiceSemaine{
    float: left;
    text-align: left !important;
}

.libelleServiceSemaine .service {
    max-width: 150px;
    text-overflow: ellipsis;
}

.fullWidth {
    float: left;
    width: 100%;
}

.textAlignRight {
    text-align: right;
}

.titreSelectPeriode {
    font-weight: bolder;
    padding-bottom: 25px;
}

#conteneurPanier {
    float: left;

    padding-left: 5px;
}

#listeSemaine {
    float: left;
}

#entetePlanning {
    display: table;
    float: none;

    margin: 15px auto 5px;

    text-align: center;
}

.detailPanierAsc {
    overflow-x: hidden;
    overflow-y: scroll;
}

#listeSemaine {
    width: 100%;
}

#modePlanning {
    float: right;
}

#libSelEnfant {
    display: flex;
    align-items: center;
    align-content: center;
    width: 50px;
    height: 45px;
}

#EnfantList {
    width: 100%;
    /* width:calc(100% - 50px); */
}

.semaineI {
    display: inline-block;

    width: 100%;
    min-height: 85px;
    margin-bottom: 0;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;

    border-bottom: 1px solid #bdbdbd;
}

.jourSemaine,
.enteteSemaine,
.enteteJourSemaine {
    float: left;

    width: 14%;
    height: 32px;

    text-align: center;
}

.jourSemaine input[type='checkbox'] {
    display: none;
}

.enteteSemaine {
    height: 20px;
    margin-bottom: 5px;
}

.enteteJourSemaine {
    height: 35px;
}

.enteteSemaineLight {
    height: 40px !important;

    background-color: #e6e0ed;
}

.libSemaine {
    font-size: 16px;
    font-weight: bolder;

    margin-left: 0;

    color: #562d99;
}

.spanLibSemaine {
    font-size: 12px;
}

.enteteJour {
    font-family: comic Sans MS, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.2;

    width: 25px;
    height: 25px;
    margin: 0 auto;
    padding-top: 2px;

    color: white;
    border-radius: 50%;
}

.Lundi, .Mardi, .Mercredi, .Jeudi, .Vendredi, .Samedi, .Dimanche {
    background-color: #532d7d;
}

.partGauche {
    float: left;

    width: 27%;
    height: 20px;

    text-align: right;
}

.enteteJourSemainePartGauche {
    height: 35px !important;
}

.partRight {
    float: right;

    width: 73%;
}

.days5 {
    width: 20% !important;
}

.days7 {
    width: 14%;
}

.partEnfantGauche {
    float: left;
}

.partEnfantDroite {
    float: right;
}

.enfantPresent,
.enfantAbsent,
.prestationReservable,
.prestationNonReservable,
.demandeEnCours,
.demandeValidee,
.demandeRefusee,
.listeEnfant,
.dmdSuppEnCours {
    width: 100%;
    height: 32px;
    margin: 0 auto;

    cursor: pointer;

    background-position: center;
}

.legend {
    width: 30px !important;
}

#prestationReservableLegand {
    width: 40px !important;
    margin-left: -10px !important;
}

.legendLibelle, .legendLibelleAnnule {
    padding-top: 6px;
}

.prestationReservable {
    /* background-color: graytext; */
    background: url('../Images/prestationReservable.svg') no-repeat;
    background-size: 24px 20px;
    background-position-y: 0;
    background-position-x: center;
}

.aujourdhui {
    border: 1px solid red;
}

/*
.prestationNonReservable,
.enfantPresent,
.enfantAbsent
{    
    background-image: url('../Images/prestationNonReservable.png');
    background-repeat: repeat-x;    
}

.demandeEnCours
{
    background-image: url('../Images/demandeEnCours.png');
    background-repeat: no-repeat;
}

.demandeValidee
{
    background-image: url('../Images/demandeValide.png');
    background-repeat: no-repeat;
}

.demandeRefusee
{
    background-image: url('../Images/demandeRefuse.png');
    background-repeat: no-repeat;
}
*/

.prestationNonReservable:before {
    content: '\f46a';
    font-family: ionicons, serif;
    font-size: 25px;
    color: #A0A0A0;
    line-height: 25px;
}

.demandeEnCours:before {
    content: '\f3b3';
    font-family: ionicons, serif;
    font-size: 20px;
    color: #FF9800;
    line-height: 25px;
}

.demandeValidee:before {
    content: '\f120';
    font-family: ionicons, serif;
    font-size: 20px;
    color: #91bf1a;
    line-height: 25px;
}

.demandeRefusee:before {
    content: '\f36e';
    font-family: ionicons, serif;
    font-size: 20px;
    color: red;
    line-height: 25px;
}

.dmdSuppEnCours {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    line-height: 25px;
}

.dmdSuppEnCours:before {
    content: '\f120';
    font-family: ionicons, serif;
    font-size: 20px;
    color: #91bf1a;
    z-index: 100;
    position: absolute;
    line-height: 25px;
}

.dmdSuppEnCours:after {
    content: '';
    z-index: 200;
    width: 20px;
    height: 25px;
    position: absolute;
    background-image: url('../Images/demande_annulee.svg') !important;
    background-size: 20px 25px;
    background-repeat: no-repeat;
    line-height: 25px;
}

.jourSemaine > .dmdSuppEnCours:before {
    margin-left: -8px;
}

.jourSemaine > .dmdSuppEnCours:after {
    margin-left: -8px;
}

.listeEnfant {
    display: flex;

    width: 80%;
}

.libelleSemaine {
    /* font-style: italic; */
    font-size: 14px;
    line-height: 2.5;

    color: #532d7d;
}

.lien {
    cursor: pointer;
    text-decoration: underline;

    color: #fff;
}

.legend {
    float: left;
}

.legendPrincipale {
    height: 35px;
}

#legend td {
    vertical-align: top;
}

#legend {
    display: inline-block;

    margin-bottom: 80px;
}

#legend p {
    font-weight: bolder;
}

#fixedPanier {
    /* position: relative; */
    position: fixed;
    /* border : 1px solid #000; */

    max-height: 637px;
    height: calc(100% - 260px);
    margin-top: 15px;
    margin-left: 10px;
    padding: 10px;

    border-radius: 3px;
    background: rgb(243, 243, 243) linear-gradient(#FFF, rgb(243, 243, 243));
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

#contenuDivPanier {
    overflow: auto;
}

#btVidePanier {
    cursor: pointer;
}

#BtPayer {
    position: absolute;
    bottom: 5px;

    display: block;

    width: 100%;

    text-align: center;
}

#divPiedTitre {
    display: none;
}

.divChoixService {
    margin-left: 50px;
    margin-top: 20px;
}

.selectServiceTitle {
    margin-top: 50px;
}

.libellePrestaSel {
    font-size: 12px;
    font-weight:bold;
    padding-top: 8px;
}

.selectPrestaTitle {
    width: 170px;
    font-family: Open Sans, serif;
    font-size: 12px;
}

.radioPrestaPrePost {
    margin:2px !important;
}

.libRadioPrestaPrePost {
    margin-left: 10px !important;
}

#sousMenu {
    display: inline-block;
    overflow: hidden;

    width: 100%;
    height: auto;

    color: #fff;
    background-color: #532d7d;
}

.linkButton {
    font: bold 11px Arial;
    text-decoration: none;
    background-color: #532d7d;
    color: #fff;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    margin: 7px;
}

.buttonCard {
    display: flex;

    height: 45px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 4px;
    /* WebKit */

    -webkit-transition: all 2s linear;
    /* Firefox */
    -moz-transition: all 2s linear;
    /* Opera */
    -o-transition: all 2s linear;
    /* Standard */
    transition: all 2s linear;

    color: white;
    /* border:1px solid #000; */
    border-radius: 3px 3px 2px 2px;
    background-color: #8c78b3; /* #532D7D; */

    align-content: center;
    align-items: flex-start;
}

.buttonCard:hover {
    /* WebKit */
    -webkit-transition: all 2s linear;
    /* Firefox */
    -moz-transition: all 2s linear;
    /* Opera */
    -o-transition: all 2s linear;
    /* Standard */
    transition: all 2s linear;

    color: black;
    background-color: #8e6cb3;
}

.buttonCard img {
    height: 30px;
    margin-right: 5px;

    border-radius: 50%;
}

.buttonCard .divContent {
    /* float:left; */
    padding: 5px;
}

.navBarListeEnfant {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.menuBar .in > .navBarListeEnfant {
    flex-direction: column;
}

.titre {
    font-size: 12px;
    font-weight: bolder;
}

.description {
    font-size: 10px;
    font-style: italic;
}

.libPresta {
    font-weight: bolder;

    padding-top: 5px;
    padding-right: 5px;
    height: 32px;
}

.imgCircle {
    border-radius: 50%;
}

.detailPanierEnfant {
    display: flex;

    padding-left: 5px;

    color: #000;
}

.detailPanierEnfant .contentDetailEnfant {
    width: 100%;
    /* float:left; */
    margin: 5px;

    text-align: left;
}

.detailPanierEnfant img {
    width: 50px;
}

.divMesResa,
.divMesAbs {
    margin-top: 2px;
    /* height:calc(100% - 35px); */

    text-align: center;

    color: rgb(239, 59, 51);
    border: 1px solid rgb(189, 189, 189);
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
}

.detailPanierEnfant p {
    font-weight: bolder;
}

.divTotalAPayer {
    font-size: 18px;
    line-height: 27px;
    font-weight: bolder;

    position: absolute;
    bottom: 50px;

    display: inline-block;
    width: 100%;
    height: 35px;
    padding: 3px;

    text-align: center;

    color: rgb(239, 59, 51);
    border-radius: 3px;
    background-color: rgb(222, 222, 222);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

.panier1 {
    width: 250px;
}

.semaineResa {
    width: calc(100% - 280px);
}

.box {
    display: block;

    padding: 10px 25px;

    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

.box-icon {
    display: table;

    width: 100px;
    height: 100px;
    margin: -61px auto 0;

    border-radius: 50%;
    background-color: #57a544;
}

.box-icon span {
    display: table-cell;

    text-align: center;
    vertical-align: middle;

    color: #fff;
}

.info h4 {
    font-size: 26px;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.info > p {
    font-size: 16px;

    padding-top: 10px;

    text-align: justify;

    color: #717171;
}

.info > a {
    transition: all .5s ease 0s;

    color: #fff;
    border-radius: 2px;
    background-color: #03a9f4;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

.info > a:hover {
    transition: all .5s ease 0s;

    color: #fff;
    background-color: #0288d1;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16), 0 2px 5px 0 rgba(0, 0, 0, .12);
}

.selectService {
    /* width : 250px; */
    display: flex;
}

.selectService label,
#libSelEnfant,
.libSelService {
    font-family: Open Sans, serif;;
    font-size: 12px;
}

.libSelService {
    width: 125px;
    padding-top: 8px;
}

.menuAgenda {
    float: left;

    width: calc(100% - 550px);
    margin-left: 5px;
}

.lienAgenda {
    font-size: 14px;

    cursor: pointer;
    text-decoration: underline;

    color: #e32d32;
}

.checkbox input {

}

.checkbox {

    line-height: 20px;
}

.fond {
    font-family: ionicons, serif;
    font-size: 20px;
    color: #f8b133;
    font-weight: normal;
}

input + .fond {
    display: inline-block;

    margin: 0 auto;
    cursor: pointer;
    width: 24px;
    /* background: url('../Images/prestationReservable.png') no-repeat; */

    background: url(../Images/prestationReservable.svg) no-repeat;
    background-size: 24px 20px;
}

input:checked + .fond {
    background-image: none;
}

input:checked + .fond::before {
    display: inline-block;
    cursor: pointer;
    margin: 0 auto;
    width: 24px;
    top: -3px;
    position: relative;
    content: '\f3b3';
}

.contenuPlanning {
    /* text-align: center; */
    float: none !important;

    width: 80% !important;
    margin: 0 auto !important;
}

.insidePanier {
    position: relative;

    height: 100%;
}

.menuBar {
    display: flex;

    width: 80%;
    min-height: 27px;
    margin: 0 auto;

    border: 0 !important;
    background-color: transparent;
}

.menuBar > .container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.menuBar > .container > .navbar-collapse {
    overflow: auto !important;
    border: none !important;
    white-space: nowrap;
}

.menuBar > .container > .collapse > .navbar-nav:not(.navBarListeEnfant) {
    float: none !important;
}

.menuBar > .container > .navbar-collapse.collapse {
    padding: 0;
}

.menuBar > .container > .navbar-collapse.collapse > .navbar-collapse.collapse {
    padding: 0;
}

.liseretMenu {
    display: inline-block;

    width: 100%;
    height: 16px;
}

#iframePaiement {
    width: 100%;
    height: calc(100% - 188px);

    border: 0;
}

.generale {
    width: 400px;
    margin: 50px auto 0;
    padding: 20px;

    border: 1px solid rgb(240, 240, 240);
    border-radius: 10px;
    box-shadow: 1px 1px 1px 0 rgb(142, 142, 142) !important;
    background: linear-gradient(#FFF, #F0F0F0);
}

.radiobuttons-container {
    height:100vh;
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
}

#divFilAriane {
    display: inline-block;
}

#btValidResaPeriode {
    margin-top: 20px;
    margin-right: 12px;
}

#divIdentUser {
    width: 220px;
    margin: 0 auto;
}

#divIdentUser .input-group {
    margin: 5px;
}

.divBoutonAccueilDroit {
    width: 100%;

    text-align: center;
}

.collectiviteChoix {
    font-weight: bolder;

    margin-top: 5px;
    margin-bottom: 5px;

    cursor: pointer;
    text-decoration: underline;
}

#noAboCollectivite {
    margin-bottom: 20px;
}

.fixed {
    position: fixed !important;
    top: 0;
}

.aboUl {
    max-width: 350px;
    margin: 0 auto;
}

.aboUl > li {
    list-style-type: none;
}

#Slogan {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 56px !important;
    font-weight: 500;

    position: absolute;
    top: 250px;
    right: 250px;

    text-align: right;
    letter-spacing: 1px;

    color: #e42e33 !important;
}

.partIdent {
    position: relative;
    top: 250px;

    width: 400px;
    margin: 50px auto 0;
    padding: 8px 20px 20px;

    border: 1px solid rgb(240, 240, 240);
    border-radius: 10px;
    background: #fff linear-gradient(180deg, #FFF 80%, #F0F0F0);
    box-shadow: 2px 2px 3px 2px rgb(142, 142, 142) !important;
}

.mouseOver {
    /* WebKit */
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    /* Opera */
    -o-transition: all 2s linear;
    /* Standard */
    transition: all 2s linear;

    background-color: #f1f1f1;
}

.trSelected {
    color: #fff;
    background-color: #000;
}

.actionBar {
    display: flex;

    margin-top: 20px;
    margin-bottom: 50px;
}

.actionBarNv {
    float: left;
}

.actionBarMiddle {
    width: 90%;
}

.actionBarSupp {
    float: right;
}

.deletePj {
    cursor: pointer;
}

.panierVide {
    display: flex;

    justify-content: space-around;
    align-items: center;
}

/*
 * See it in action here: http://jsfiddle.net/seydoggy/6s92p51a/
 */
.panel-table {
    display: table;

    width: 100%;
}

.panel-table > .panel-heading {
    display: table-header-group;

    background: transparent;
}

.panel-table > .panel-body {
    display: table-row-group;
}

.panel-table > .panel-body:before,
.panel-table > .panel-body:after {
    content: none;
}

.panel-table > .panel-footer {
    display: table-footer-group;

    background: transparent;
}

.panel-table > div > .tr {
    display: table-row;
}

.panel-table > div:last-child > .tr:last-child > .td {
    border-bottom: none;
}

.panel-table .td {
    display: table-cell;

    padding: 8px;

    border: 1px solid #ddd;
    border-top: none;
    border-left: none;
}

.panel-table .td:last-child {
    border-right: none;
}

.panel-table > .panel-heading > .tr > .td,
.panel-table > .panel-footer > .tr > .td {
    background-color: #f5f5f5;
}

.panel-table > .panel-heading > .tr > .td:first-child {
    border-radius: 4px 0 0 0;
}

.panel-table > .panel-heading > .tr > .td:last-child {
    border-radius: 0 4px 0 0;
}

.panel-table > .panel-footer > .tr > .td:first-child {
    border-radius: 0 0 0 4px;
}

.panel-table > .panel-footer > .tr > .td:last-child {
    border-radius: 0 0 4px 0;
}

/* layout.css Style */
.upload-drop-zone {
    height: 200px;
    margin-bottom: 20px;

    border-width: 2px;
}

/* skin.css Style*/
.upload-drop-zone {
    line-height: 200px;

    text-align: center;

    color: #ccc;
    border: dashed #ccc;
}

.upload-drop-zone.drop {
    color: #222;
    border-color: #222;
}

.imgDmdEtatDmd {
    width: 22px;
    height: 30px;
}

.image-container{
    text-align: center;
    display: block;
}

.avoir {
    color: green;
    font-style: italic;
}

.titreAvoir {
    text-align: center;
    font-weight: bolder;
}

.detailAvoir {
    padding-left: 25px;
}

.nomPrestaMontant {
    font-weight: bolder;
}

#messageImpayee,
#messageLock{
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    color: chocolate;
    font-weight: bolder;
}


.selectServiceSite {
    text-align: center;
    width: 40%;
    margin : 100px auto !important;
}

.selectServiceSite label {
    line-height: 50px !important;
}

.selectServiceCombo {
    font-size: 1.2em !important;
    height: 45px !important;
}

.flexbox-activation-code-expired {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 5rem;
    padding-left: 20rem;
}

.flexbox-activation-code-expired-left {
    margin-top: 100px;
    width: 30%;
}
.flexbox-activation-code-expired-right {
    margin-top: 120px;
    width: 50%;
}

.img-activation-code-expired {
    width: 300px;
}

.activation-code-expired-title {
    font-family: NunitoSans, "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 31px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
    color: #212439;
    margin-bottom: 20px;
}

.activation-code-expired-bt {
    background-color: #3e9cf7;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    padding: 8px;
    margin-top: 20px;
    width: fit-content;
}

.LibelleCompte {
    margin: 10px 0;
}

@media (min-width: 1501px) and (max-width: 1600px) {
    #divTitre{
        height: 65px;
    }

    #logoSite{
        height: 50px;
    }

    .liseretMenu{
        height: 12px;
    }
}

@media screen and (max-width: 1500px) and (min-width: 1225px) {
    #divChoixperiode {
        margin: 0 30% 20px;
    }
}

@media screen and (max-width: 1225px) and (min-width: 800px) {
    body {
        font-size: 11px;
        line-height: 11px;
    }

    #divChoixperiode {
        margin: 0 30% 20px;
    }

    .numSemaine {
        display: none;
    }

    .panier1 {
        width: 180px;
    }

    #Slogan {
        right: 5px;
    }

    .panier1 {
        width: 200px;
    }

    .general {
        width: 350px;
    }

    .legendLibelle, .legendLibelleAnnule {
        font-size: 10px;
    }

    #prestationReservableLegand {
        margin-left: -5px !important;
    }

    #divChoixperiode {
        margin: 0 30% 20px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #logoSite{
        top: -2px;
        margin-left: auto;
        margin-right: auto;
        width: 180px;
        height: 40px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #fondAccueil {
        background: url('../Images/monespacefamille.jpg') no-repeat;
        background-size: cover;
    }

    #logoSite{
        top: -2px;
        left: 50px;
        width: 150px;
        height: 32px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 11px;
        line-height: 11px;
    }

    .liseretMenu {
        height: 8px;
    }

    #principalAccueil {
        height: calc(100vh - 35px - 8px - 100px); /* 86: header 16: liseret 50: footer */
    }

    .txtCompte {
        top: 0;
    }

    #divTitre {
        height: 35px;
    }

    #agenda,
    #periode {
        width: 100%;
    }

    .numSemaine {
        display: none;
    }

    .EnfantSelMinResolution {
        display: block;
    }

    .menuBar {
        width: 100%;
    }

    .menuBar > .container > .collapse > .navbar-nav {
        margin: 0;
    }

    .menuBar > .container > .navbar-collapse {
        overflow: visible !important;

        border: none !important;
    }

    .buttonCard {
        min-width: 150px;
    }

    #divChoixperiode {
        width: 300px;
        margin: 0 25% 20px;
    }

    .listeEnfant {
        width: 100%;
        margin: 0 0 !important;
    }

    .libSelService,
    #libSelEnfant {
        font-size: 10px;
    }

    #EnfantList {
        float: right;
    }

    #divChoixperiode label,
    #divChoixperiode input {
        font-size: 10px;
    }

    .contenuPlanning {
        width: 100% !important;;
    }

    .panier1 {
        display: none;

        width: 180px;
    }

    #miniResolution {
        display: inline-block;

        width: 100%;
        margin: 10px;

        text-align: center;
    }

    .Presentation {
        height: 20px;
    }

    #logoSite {
        top: -2px;
        left: 50px;

        width: 150px;
        height: 32px;
    }

    #Slogan {
        right: 0;
    }

    .partIdent {
        width: 250px;
        padding: 2px;
    }

    .inLine {
        display: block;
    }

    .legendPrincipale {
        display: block;
        overflow: hidden;

        height: 70px;
    }

    .motDePasseOublie,
    .pasDeCompte,
    .QfranceConnect {
        margin-top: 2px;
    }

    #fondAccueil {
        background: url('../Images/monespacefamille.jpg') no-repeat;
        background-size: cover;
    }

    .legendLibelle, .legendLibelleAnnule {
        font-size: 10px;
    }

    #prestationReservableLegand {
        margin-left: -5px !important;
    }

    .carte {
        border-radius: 3px;
        background: rgb(243, 243, 243) linear-gradient(#FFF, rgb(243, 243, 243));
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    }

    .carte:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .container {
        padding: 2px 16px;
    }

    #divChoixperiode {
        margin: 0 30% 20px;
    }

    .libPresta {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 8px;
    }

    .partGauche  {
        height: 45px;
        overflow-x: hidden;
    }

    .jourSemaine, .enteteJourSemaine  {
        height: 45px;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    #logoSite{

        left: 85px;
        width: 160px;
        height: 36px;
    }

    #divTitre{
        height: 0;
    }

    #principalAccueil {
        display: flex;
        height: calc(100vh - 50px - 16px - 50px); /* 86: header 16: liseret 50: footer */
    }

}