@import url("commons.css");

*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* Conteneur principal */
.ContenuPrincipal {
   display: inline-flex; /* ou inline-grid */
    width: 100%;
    min-height:auto;     /* prend toute la hauteur de la fenêtre */;    
}

/* Menu latéral */
.ContenuMenu {
    width: 230px;
    transition: width 0.3s;
    overflow: hidden;
}

.ContenuMenu.minimized {
    width: 60px;
}

.ContenuMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ContenuMenu li {
    padding: 5px;
    white-space: nowrap;
}

/* Zone principale */
.ContenuPage {
    display: inline-flex; /* ou inline-grid */
    width: 100%;
    height: 100%;    
}

.Logo {
    fill: var(--Fond2);
    stroke: black;
}

/* FIN CSS SPECIFIQUE ------------------------------ MENU LATERAL*/


/* Div principale */
.PageGenerale {
    position: relative;
    background-color: var(--Fond1);
}

/* Boite à l'interieur de la colonne centre */
.EncartColonneCentre {
    width: 100%;
    height: auto;
    color: var(--Fond3Text);
    background-color: var(--Fond3);
    padding: 10px;
    border-radius: var(--BorderRadius);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

/* Zone servant à l'affichage des liste et autre informations secondaire autres que le planning affiché en 100%
-> Rapports
*/
.ZoneInformationsSecondaires {
    width: 90%;
    height: auto;
    color: var(--Fond1Text);
    background-color: var(--Fond1);
    padding: 10px;
    Border: 1px solid;
    Border-color: var(--Fond2);
    border-radius: var(--BorderRadius);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

.NomSociete {
    /* permet de surpasser le Line Height par défaut pour que le nom société et la phrase Inventory RFID soient bien espacés */
    display: grid;
    height: auto;
    line-height: normal;
    margin-left: 10px;
}

.TitreSociete {
    font-size: 25px;
    letter-spacing: .3rem;
}

/* Sous titre du logo societe */
.SousTitrePrincipal {
    font-size: 14px;
    letter-spacing: normal;
    text-align: left;
}

/* Sous titre des pages */
.SousTitre {
    font-size: 20px;
    letter-spacing: normal;
    text-align: center;
    margin: 10px;
    padding: 5px;
}

.StyleListe {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.MenuConnectionContact {
    /* Menu Connection et contact doivent etre à gauche sur le bandeau haut */
    color: var(--Fond2Text);
    height: 40px;
    justify-content: center;
}

/* Boutons menu du bandeau */
.bouton1 {
    font-size: 12px;
    color: var(--Fond1Text);
    text-align: center;
    align-content: center;
    margin: 5px;

    display: inline-block;
    width: 140px;
    height: 80%;
    background-color: var(--Fond1Accent);

    border-radius: var(--BorderRadius);
    border: 1px;
    border-style: solid;
    border-color: var(--Fond1Text);

    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    cursor: pointer;
}

.bouton1:hover {
    background-color: var(--Fond1);
    border: 2px;
    border-style: solid;
    border-color: var(--Fond2);
    color: var(--Fond1Text);
}

.bouton1 a {
    text-decoration: none;
}


.boutonMenuCommon {
    width: 100%;
    padding: 20px;
    background-color: var(--Fond2);
    color: var(--Fond2Text);
    border-radius: var(--BorderRadius);
    border: 0px;
    margin-left: 5px;
    margin-right: 5px;
}

.boutonMenuCommon:hover {
    background-color: var(--BtnCtaHover);
    color: var(--BtnCtaHoverText);
}

.bouton2 {
    margin: 20px;
    width: 50%;
    padding: 10px;
    background-color: var(--Fond2);
    color: var(--Fond2Text);
    font-size: 12px;
    border-radius: var(--BorderRadius);
    border: 0px;
}

.bouton2:hover {
    background-color: var(--Fond1);
    color: var(--Fond1Text);
}

/* Style general formulaire */
.StyleForm {
    border-radius: var(--BorderRadius);
    border-width: 1px solid;
    text-align: center;
    font-weight: 500;
    font-size: 17px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 100%;
}

/* Styleform2 est utilisé quand je veux mettre deux spans cote à cote dans une zone de formulaire avec deux champs */
.StyleForm2 {
    display: inline;
    border-radius: var(--BorderRadius);
    border-width: 1px solid;
    text-align: center;
    font-weight: 500;
    font-size: 17px;
    padding: 10px;
    max-width: 50%;
}


.StyleFormSubmit {
    border-radius: var(--BorderRadius);
    border-width: 1px solid;
    text-align: center;
    font-weight: 500;
    font-size: 17px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 100%;
    background-color: var(--BtnCta);
    color: var(--BtnCtaText);
}

.StyleFormSubmit:hover {
    background-color: var(--BtnCtaHover);
    color: var(--BtnCtaHoverText);
}


/* DIV qui contient le formulaire */
.StyleDivFormulaire {
    display: grid;
    place-items: center;
}


/* Style général des tableau de listing */
.TableList {
    border-radius: var(--BorderRadius);
    width: 100%;
    border-collapse: collapse;
}

.TableList tr:hover {
    border-radius: var(--BorderRadius);
    background-color: var(--BtnCtaHover);
    color: var(--BtnCtaHoverText);
}

.TableList th,
td {
    font-size: 14px;
    padding: 15px;
}

/* Couleur différente pour sous section tableau */
.SectionTableau {
    background-color: var(--Fond1Accent);
    border-radius: var(--BorderRadius);
}

option {
    text-align: center;
}

/* Spinner attente */
#overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: var(--Fond2);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px var(--Fond2Text);
    border-top: 4px var(--Fond2Text);
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

.is-hide {
    display: none;
}

/* Fin spinner attente se trouve dans page_administration.php */



/* Span permettant de faire un espace*/
.SpaceSpan20 {
    display: inline-block;
    width: 20px;
}