/* =========================
   EDL PLANNING HERAULT
   PAGE CONNEXION
========================= */

* {
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}


body {
    margin:0;
    min-height:100vh;
    background:#eef3f8;
}


/* BLOC CONNEXION */

.login {

    width:380px;

    margin:120px auto;

    background:white;

    padding:40px;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,0.12);

    text-align:center;
}


.login h1 {

    color:#244b7a;

    font-size:30px;

    margin-bottom:30px;

}


.login h3 {

    color:#17345c;

    margin-bottom:25px;

}


/* CHAMPS */

input {

    width:100%;

    padding:14px;

    margin:12px 0;

    border:1px solid #ccd6e0;

    border-radius:8px;

    font-size:15px;

}


/* BOUTON */

button {

    background:#244b7a;

    color:white;

    border:none;

    padding:13px 30px;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

}


button:hover {

    background:#17345c;

}


/* MESSAGE ERREUR */

#message {

    margin-top:20px;

    color:#d9534f;

}

@media (max-width:520px){.login{width:calc(100% - 28px);margin:70px auto;padding:28px 20px}.login h1{font-size:25px;margin-bottom:22px}.login input,.login button{width:100%}}
*{
box-sizing:border-box;
font-family:Arial,sans-serif;
}


body{
margin:0;
background:#eef3f8;
color:#17345c;
}


.app{
display:flex;
min-height:100vh;
}


.sidebar{

width:250px;
background:#244b7a;
color:white;
padding:25px;

}


.sidebar h1{

font-size:22px;

}


.sidebar select{

width:100%;
padding:8px;
margin-bottom:20px;

}


.menu a{

display:block;
color:white;
text-decoration:none;
padding:12px;
border-radius:8px;

}


.menu a:hover,
.menu .active{

background:rgba(255,255,255,0.2);

}



.content{

flex:1;
padding:25px 40px;

}


header{

background:white;
padding:20px;
border-radius:15px;
display:flex;
justify-content:space-between;

}


button{

background:#244b7a;
color:white;
border:0;
padding:12px 20px;
border-radius:8px;

}



.calendar{

background:white;
margin-top:25px;
padding:25px;
border-radius:15px;

}



table{

width:100%;
border-collapse:collapse;

}


td,th{

border:1px solid #ddd;
height:80px;
text-align:center;

}


th{

background:#e7eef7;

}

.clesMotifFiche{background:#fff8d8!important;color:#5f4700!important;font-size:16px;font-weight:800}
.clesMotifFiche .clesSelectFiche,.clesMotifFiche .clesAgenceFiche{display:block;width:100%;margin:3px 0 7px;padding:7px;border:1px solid #d5bd64;border-radius:5px;background:#fff;font-size:14px;font-weight:700}
.clesMotifFiche .clesSauverFiche{margin-right:8px;padding:7px 10px;border:0;border-radius:5px;background:#245f9e;color:#fff;font-weight:800;cursor:pointer}
.clesMotifFiche .clesStatutFiche{font-weight:700;color:#5f4700}.clesMotifListe{min-width:155px;max-width:210px;padding:6px;border:1px solid #d5bd64;border-radius:6px;background:#fff8d8;color:#5f4700;font-weight:800}
.clesStatutListe{display:block;margin-top:3px;color:#6e5710;font-weight:700}