/*
----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
Ici tout les éléments de base 
----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
*/

.table {
    margin: 5em;
}

.hide {
    display: none;
}


.left-side {
    min-height: 100%;
    max-height: 100%;
    width: 20%;
    padding: 0.6em;
    position: absolute;
    left: 0;
    /* border: 1px solid black; */
}

.unline {
    text-decoration: underline;
    font-weight: bold;
    margin-top: 1em;
}

.modal a {
    text-decoration: none;
    color: black;
}

.boutonlog {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5CB8FB;
    border: #27617E;
    margin: auto;
    color: white;
    border-radius: 10px;
    height: 2em;
    min-width: 7em;
}

body {
    margin: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0%;
    /* background-image: url("../images/bannierefond.png");
    /* background-size: cover;
    /* background-repeat: no-repeat;
    /* background-position: center top; /* Modification de la valeur de la propriété */
    /* background-attachment: scroll; /* Modification de la valeur de la propriété */
    color: black;
}


#banImg {
    height: 3em;
}

.bodyLogin {
    background-image: url("../images/connexionpcHabitA.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; /* Modification de la valeur de la propriété */
    background-attachment: scroll; /* Modification de la valeur de la propriété */
    margin: 0;
}

.form-login{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    margin-top: 23%;
}

.form-login div input {
    border: none;
    border-bottom: 1px solid #4f91c0;
}

.bouton-login {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #384E5C;
    border: #27617E;
    margin: auto;
    font-weight: bold;
    font-size: large;
    color: white;
    border-radius: 40px;
    height: 2.4em;
    min-width: 13em;
    margin-bottom: 0.5em;
}

.demandecpt {
    margin-top: 0.5em;
    background-color: #cacaca;
}

.form-login div span {
    color: #4f91c0;
    transform: scale(1.6);
    padding-right: 5px;
}

.login-form {
    margin-bottom: 2em;
}

.VtBackLog, .VtBack {
    background-image: url("../images/VtFond.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; /* Modification de la valeur de la propriété */
    background-attachment: scroll; /* Modification de la valeur de la propriété */
    margin: 0;
}

.VtBack {
    background-image: url("../images/VtFondLogHaut.png");
}

.InterBack, .AgendaBack {
    background-image: url("../images/interFond.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; /* Modification de la valeur de la propriété */
    background-attachment: scroll; /* Modification de la valeur de la propriété */
    margin: 0;
}

.AgendaBack {
    background-image: url("../images/interpc.png");
}

.ProspectBack, .ProspectBackSansFond {
    background-image: url("../images/prospectpcFond.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; /* Modification de la valeur de la propriété */
    background-attachment: scroll; /* Modification de la valeur de la propriété */
    margin: 0;
}

.ProspectBackSansFond {
    background-image: url("../images/prospectpcFondSanLog.png");
}

.photoBack {
    background-image: url("../images/accueilFond2HabitA.JPG");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; /* Modification de la valeur de la propriété */
    background-attachment: scroll; /* Modification de la valeur de la propriété */
    margin: 0;   
}

.textAccueil {
    margin-top: 29%;
    width: 100%;
    text-align: center;
    font-size: x-large;
}

.textAcc {
    display: inline-block;
    border: 1px solid #A9BFD4;
    border-radius: 40px;
    padding: 0.3em;
    background-color: #A9BFD4;
    min-width: 80%;
}

#calendrier .fc-day-today {
    color: black;
    background:#dbe7f0;
 } 

.bleuTableau {
    background-color: #dbe7f0!important;
}

.centreLarge {
    min-width: 100%;
    display: flex;
    justify-content: center;
    margin: 1em;
}

.tag {
    display: flex;
    width: 40%;
    min-height: 15em;
    margin: 0.2em;
    background-color: #e1e5eb;
    border: 1px solid black;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
}

.largebtn {
    width: 15%;
    margin-left: 35%;
    margin-right: 35%;
    margin-top: 4em;
}

.soustag {
    display: flex;
    width: 15%;
    min-height: 15em;
    margin: 0.2em;
    background-color: #e1e5eb;
    border: 1px solid black;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
}

.formDemande {
    max-width: 50%;
    margin: auto;
    padding-top: 2em;
}
.formDemande label{
    width: 100%;
}
.formDemande input {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #A9BFD4;
}
.formDemande .bouton {
    margin-top: 2em;
}

.mainDemande {
    padding: 2em;
}

.boutonnone {
display: none;
}

.imageCarroussel {
    max-width: 20%;
}

.containcentre {
    display: flex;
    justify-content: center;
}

.EnrouleTable {
    display: none;
}

.hiddenEnroule { 
    display: none;
}

.boutonFiltre {
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #27617E;
    border: #27617E;
    margin: auto;
    color: white;
    margin-top: 0.6em;
    border-radius: 10px;
    min-width: 8em;
    margin-left: 00.5em;
}

#notification {
    display: none;
    background-color: #5CB8FB;
    color: white;
    height: 3rem;
    width: 3rem;
    line-height: 0.5rem;
    padding: 5px;
    margin-right: 0.5rem;
    border-radius: 50%;
    animation: breath 2s ease-in-out infinite;
}
  
#notificationVehicule {
    background-color: #5CB8FB;
    height: 2.2rem;
    display: none;
    width: 2.2rem;
    line-height: 0.5rem;
    padding: 5px;
    margin-right: 0.5rem;
    border-radius: 50%;
    animation: breath 2s ease-in-out infinite;
}

.paginator {
    text-align: center;
    margin: auto;
}

.paginator a {
    text-decoration: none;
    color: black;
    padding: 0.6em;
}

.clotureVert {
    width: 100%;
    background-color: rgb(128, 199, 21);
    text-align: center;
    animation: remuer 0.5s infinite;
    animation-delay: 5s;
}

@keyframes remuer {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(0);
    }
    75% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(0);
    }
}

.editPhoto {
    max-width: 20%;
    height: auto;
}

.commande {
    border: 1px solid black;
    border-radius: 12px;
    width: 22%;
    padding: 0.8em;
    margin: 1em;
    box-shadow: 5px 5px 5px 5px #384e5c50;
}

.extrairePdf {
    border: none;
    height: 2em;
    background-color: #5CB8FB;
    border-radius: 10px;
}

.divExtractPdf {
    width: 100%;
    display: flex;
    justify-content: center;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
}
.cookie-banner button {
    margin: 5px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
}

.mentionsLegales {
    width: 65%;
    margin: auto;
    text-align: center;
}

.mentionsLegales h3 {
    margin-top: 2em;
}

.mentionsLegales h2 {
    margin-top: 4em;
    background-color: #e1e5eb;
    padding: 0.5em;
}
 
.confidentialite {
    width: 65%;
    margin: auto;
}

.imputVerifMdp {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#voirPsw {
    margin-left: 0.3em;
    padding-top: 0.3em;
}

.btnSupr {
    width: 7em;
    border: none;
    border-radius: 4px;
    background-color: #f8a335;
}

#text-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 200px;
    display: none;
  }

.textMode {
    background-color: #17e217!important;
    color: #fff;
}

#ajout-compte {
    margin-left: 35%;
    margin-right: 35%;
    margin-bottom: 2em;

}
































.a {
    color: white;
}

.align {
    text-align: center;
}

.backAzur {
    background-color: azure;
}



.bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5CB8FB;
    border: #27617E;
    margin: auto;
    color: white;
    margin-top: 0.6em;
    border-radius: 10px;
    height: 3em;
    min-width: 10em;
}

.bouton-dessin{
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
}

.boutonimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5CB8FB;
    border: #27617E;
    margin: auto;
    color: white;
    border-radius: 10px;
    height: 1.7em;
    width: 2em;
}

.bouton:hover {
    background-color: #27617E;
}

.btn {
    height: 2.4em;
}

.btn-first {
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: space-evenly;
}

.cadre {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe7f0;
    min-height: 2em;
    background-color: #A9BFD4;
    color: black;
}

.cadrepetit {
    background-color: rgb(92, 184, 251, 0.2);
    padding: 0.2em;
    display: inline-block;
    width: 40%;
}

.cadrelong {
    background-color: rgb(92, 184, 251, 0.2);
    padding: 0.2em;
    display: inline-block;
    width: 100%;
}

#calendrier {
    width: 80%;
    margin: auto;
}

.cp1 {
    width: 32%;
}

.cp2 {
    width: 40%;
}

.cp3 {
    width: 25%;
}

.card-text {
    min-width: 28%;
    max-width: 28%;
    padding: 1em;
    margin-bottom: 1em;
    border: 1px solid #dbe7f0;
    height: 0%;
}

#canvas{
    border: 1px solid black;
}

.deroule, .derouleTable, .EnrouleTable {
    border: none;
    display: flex;
    justify-content: center;
    background-color: #49a6e9da;
    width: 2em;
    border-radius: 50%;
    margin-left: 0.5em;
}

.error {
    font-size: x-large;
    text-align: center;
    height: 15em;
    margin-top: 2em;
    margin-bottom: 2em;
}

.error-nb {
    font-size: xx-large;
}

.etiquette {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5em;
}

.etiqu {
    background-color: #47b2ff7e;
    margin-right: 1em;
    padding: 0.5em;
    border-radius: 10px;
}

.footer {
    display: flex;
    background-color: white;
    width: 100%;
    max-height: 3em;
    justify-content: center;
    flex: 1;
}

.form {
    width: 73%;
}

.form-text {
    height: 8em;
}

.grasMaj {
    font-weight: bold;
    text-transform: uppercase;
}

.grasMin {
    font-weight: bold;
}

.grand {
    min-width: 50%;
}

h1 {
    background: linear-gradient(to right, #27617E, #5CB8FB, #27617E); 
    /* V1    background: linear-gradient(to right, #717D7E, #D5DBDB ,#717D7E); */
    /* V2    background: linear-gradient(to right, #784212, #9C640C ,#784212); */
    /* V3    background: linear-gradient(to right, #3398DB, #27617E ,#3398DB); */
    /* V4    background: url(../images/header-V4.jpg) no-repeat center; */
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0rem;
    padding-top: 0rem;
    font-size: 2em;
    height: 90px;
    color: #27617E;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

h2 {
    text-align: center;
    width: 100%;
    align-self: start;
    margin-top: 1em;
    padding-bottom: 1em;
}

h3 {
    text-align: center;
    width: 100%;
    align-self: start;
    margin-top: 1em;
    padding-bottom: 1em; 
}

.home {
    margin-top: 5em;
}

html, body {
    min-height: 100vh;
}

.italic {
    font-style: italic;
}

h1 a img {
    height: 1.8em;
    width: auto;
}

img {
    height: 95%;
    width: auto;
}

.imageVt {
    max-width: 25%;
    height: auto;
}

.image {
    max-width: 95%;
    height: auto;
}

.invisibleList {
    display: none;
}

.large {
    width: 100%;
}

.login {
    margin: 1em;
}

.left
{
    margin-left: 2rem;
}

.main {
    margin: auto;
    margin-right: 0%;
    margin-left: 0%;
    height: 75%;
    min-width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 0%;
    padding-bottom: 4em;
/*     border: 1px solid black; */
}

.material-symbols-outlined {
    padding-top: 2%;
    padding-bottom: 7%;
    background-color: transparent;
    border: none;
    color: white;
}

.marge {
    margin-bottom: 2.2em;
}

.moyen-de-securite {
    border: 1px solid #5CB8FB;
    padding: 0.5em;
}

.modal {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
  }
  
.modal img {
    max-width: 100%;
    min-width: 75%;
    max-height: 100%;
    min-height: 75%;
    object-fit: contain;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
  
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
}

.btnModalnext {
    position: absolute;
    top: 55px;
    right: 10px;
    background-color: white;
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
}

.btnModalprev {
    position: absolute;
    top: 55px;
    left: 10px;
    background-color: white;
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
}

.more {
    border: none;
    border-radius: 100%;
    background-color: #5CB8FB;    
}

#nav-hidden {
    display: none;
}

.navbar {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    list-style: none;
    margin-bottom: 0;
}

.navbar .bouton {
    position: relative;
}

.navbar a {
    text-decoration: none;
    color: black;
}

.navbar a:hover {
    color: inherit;
    text-decoration: none;
}

.nav ul li:hover ul {
    display: block;
    list-style: none;
}

.nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
}

#navbar-example2 {
    margin-bottom: 0!important;
}

.newClient {
    width: 80%;
    margin: auto;
}

.next {
    border: none;
    background-color: #49a6e9da;
    color: white;
    height: 2em;
    margin: auto;
}

@keyframes breath {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

.pasdelien {
    text-decoration: none;
    color: black;
}

.photo {
    max-width: 95%;
    min-width: 80%;
    height: auto;
}

.premium {
    margin-left: 25%;
    margin-right: 25%;
}
  
.recherche {
    width: 100%;
    padding: 1em;
    display: flex;
    align-items: baseline;
}

.sans-search {
    width: 100%;
}

.tableau {
}

.text {
    width: 35%;
    text-align: center;
    font-size: x-large;
}

.texthome {
    margin-top: 2em;
    box-shadow: #27617E;
    width: 50%;
    text-align: left;
    font-size: x-large;
}

.videoVt {
    max-width: 95%;
    height: auto;
}

.orange {
    color: orange;
}

.vert {
    color: #008000;
}

.gris {
    color: grey;
}

.bleu {
    color: #0000FF;
}

.blan {
    color: white;
}

.noir {
    color: black;
}

.black {
    color: black;
    padding-bottom: 0;
    padding-top: 0;
    padding-right: 0.2em;
    transform: scale(2.2);
}

.white {
    color: white;
}