/* Chargement des polices de caracteres */
@font-face {
    font-family: 'Montserrat-Regular';
    src: url("fonts/montserrat/Montserrat-Regular.ttf")
      format('truetype');
  }

  @font-face {
    font-family: 'Montserrat-Bold';
    src: url("fonts/montserrat/Montserrat-Bold.ttf")
      format('truetype');
  }

  @font-face {
    font-family: 'Open-sans-regular';
    src: url("fonts/opensans/OpenSans-Regular.ttf")
      format('truetype');
  }
  
  @font-face {
    font-family: 'Open-sans-bold';
    src: url("fonts/opensans/OpenSans-Bold.ttf")
      format('truetype');
  }

/* * {
    border: solid 1px red;
} */


.container-fluid {
    margin-bottom: 6rem;
}

/* ##### Debut ##### Gestion des fonts, couleurs des textes / titres, surbrillance */
body {
    font-family: 'Open-sans-regular';
    background-color: #ffffff !important;
    color: var(--secondaryColor);
}

h1 {
    font-family: 'Montserrat-Bold';
}

h2, h3, h4, h5, h6 {
    font-family: 'Montserrat-Regular';
}

strong, .active, .highlight-color {
    color: var(--primaryColor) !important;
}
/* ##### FIN ##### Gestion des fonts, couleurs des textes / titres, surbrillance */

/* ##### Debut ##### Gestion des marges des labels des boutons check */
#other-company-label {
    margin-left: 0.5rem;
}

label.form-check-label {
    margin: 0.1rem 0rem 0.2rem 0rem;
}
/* ##### FIN ##### Gestion des marges des labels des boutons check */

/* ##### Debut ##### Partie Titre (en-tete) - Logos et informations de l'etablissement ##### */
/* Display grid 3 collonnes */
.logo-banner {
    margin: auto;
    display: grid;
    grid-template-columns: 290px 2fr 290px;
}

.logo-left {
    grid-column: 1 / 2;
    width: 18.125rem;
    height: 8.25rem;
    padding: 0.5rem 0.25rem 0 1rem;
}

.logo-title {
    grid-column: 2 / 3;
}

/* Logos de gauche et de droite */
.logo-right {
    grid-column: 3 / 4;
    width: 18.125rem;
    height: 8.25rem;
    padding: 0.5rem 1rem 0 0.25rem;
}

#left-logo, #right-logo {
    object-fit: contain;
    height: 100%;
    max-width: 100%;
}

#left-logo {
    float: left;
}

#right-logo {
    float: right;
}

/* Logo du centre */
.logo-center {
    position: relative;
    margin: 0 auto;
}

#center-logo {
    object-fit: contain;
    max-width: 100%;
    max-height: 230px;
}

/* liens website et email de la partie titre*/
a.contact:link {
    color: var(--primaryColor);
    text-decoration: none;
}
  
a.contact:visited {
    color: var(--tertiaryColor);
    text-decoration: none;
}
  
a.contact:hover {
    color: var(--secondaryColor);
    text-decoration: none;
}
/* ##### FIN ##### Logo et informations de l'etablissement ##### */

/* ##### Debut ##### Menus icones fontawesome */
.menu {
    height: 4.15625rem;   
    padding: 1rem 0.25rem 1rem 1rem;
}

a.menu-link {
    margin-right: 0.75rem;
    color: var(--tertiaryColor) !important;
}

a.menu-link:hover {
    color: var(--primaryColor) !important;
    text-decoration: none;
}

a .fas:hover {
    color: var(--primaryColor) !important;
}
/* ##### FIN ##### Menus icones fontawesome */

/* ##### Debut ##### Tables des registres */
.nowrap {
    white-space:nowrap;
}

.table-fixed {
    table-layout: fixed;
}

.table td, .table th {
    border-top: 1px solid var(--primaryColor);
    border-bottom: 1px solid var(--primaryColor);
}

.table thead th, .table thead td {
    border-bottom: 2px solid var(--primaryColor);
    border-top: none;
}

.action-buttons {
    max-height: 60px;
    max-width: 180px;
    display: flex;
    flex-direction: row;
}

.fa-door-open:hover, .fa-eye:hover, .fa-pen:hover, .fa-trash:hover {
    color: #ffffff !important;
}
/* ##### FIN ##### Tables des registres */

/* ##### Debut ##### Gestion signature */
canvas {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: solid 2px var(--primaryColor) !important;
    color: var(--primaryColor);
}

.kbw-signature { 
    color: var(--secondaryColor) !important;
    width: 378px; 
    height: 209px; 
}
/* ##### FIN ##### Gestion signature */

/* ##### Debut ##### Input form */
.custom-file-input ~ .custom-file-label:lang(fr)::after {
    content: "Choisir...";
    color: var(--primaryColor) !important;
    height: calc(1.5em + .25rem + 2px);
}

.custom-file-input {
    cursor: pointer;
}

.custom-file-label {
    position: absolute;
    height: calc(1.5em + .5rem + 2px);
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--primaryColor) !important;
    border: none;
    border-radius: 0;
    border-bottom: var(--primaryColor) solid 0.15rem !important;
}

.form-control, .form-control-file {
    border-radius: 0 !important;
    color: var(--primaryColor) !important;
    border: none !important;
    border-bottom: var(--primaryColor) solid 0.15rem !important;
}
/* ##### FIN ##### Input form */

/* ##### Debut ##### Gestion des btns, cards */
.btn-outline-secondary {
    border-radius: 0;
    color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.btn-outline-secondary:hover {
    border-radius: 0;
    color: #ffffff;
    border-color: var(--primaryColor);
    background-color: var(--tertiaryColor) !important;
}

.card {
    border-radius: 0;
    border-color: var(--primaryColor);
}

.btn-outline-dark, .btn-outline-danger {
    border-radius: 0;
}

/* ##### Debut ##### Gestion des messages */
.alert.alert-success.flash-success, .alert.alert-warning.flash-warning {
    max-width: 80vw;
    left: 50%;
    padding: 1rem;
    transform: translateX(-50%);
    border-radius: 0;
}
/* ##### FIN ##### Gestion des messages */

/* ##### Debut ##### Footer */
.footer {
    background-color: var(--secondaryColor);
    color: var(--primaryColor) !important;
    width: 100%;
}
/* ##### FIN ##### Footer */

/* ##### Debut ##### Page d'erreurs HTTP */
.error-container {
    min-height: 100vh;    
}

.error-page {
    top: 50%;
    transform: translateY(50%);
}
/* ##### FIN ##### Page d'erreurs HTTP */

/* ##### Debut ##### Statistiques Graphes */
.chart-header {
    z-index: 2; 
    background-color: white;
    position: relative;
}

.chart>table td {
    max-width: 4.16666666667% !important;
    padding: unset;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin : 0 0.1rem;
}

.chart-column>.column {
    display: inline-block; 
    margin : 0 0.05rem;
    width : 4.16666666667%;
    background-color : var(--primaryColor);
}
    
.chart-column>.column:nth-child(3n+1) {
    background-color : var(--secondaryColor);
}

.chart-column>.column:nth-child(3n+2) {
    background-color : var(--tertiaryColor);
}

.chart-time {
    margin: 0 2.08333333334%;
}

.chart-time>.time {
    display: inline-block;
    width: 4.16666666667%;
}

.x-axis {
    height: 0;
}

.x-axis-0 {
    border-bottom: dashed;
    border-width: 0.1rem;
    width: 100%;
    transform: translateY(-3.2rem);
}

.x-axis-5 {
    border-bottom: dashed;
    border-width: 0.1rem;
    width: 100%;
    transform: translateY(-9.2rem);
}

.x-axis-10 {
    border-bottom: dashed;
    border-width: 0.1rem;
    width: 100%;
    transform: translateY(-15.2rem);
}

.x-axis-15 {
    border-bottom: dashed;
    border-width: 0.1rem;
    width: 100%;
    transform: translateY(-21.2rem);
    z-index: -1;
    position: relative;
}

.x-axis-20 {
    border-bottom: dashed;
    border-width: 0.1rem;
    width: 100%;
    transform: translateY(-27.2rem);
    z-index: -1;
    position: relative;
}

.x-axis-25 {
    border-bottom: dashed;
    border-width: 0.1rem;
    width: 100%;
    transform: translateY(-33.2rem);
    z-index: -1;
    position: relative;
}

.x-axis-30 {
    border-bottom: dashed;
    border-width: 0.1rem;
    width: 100%;
    transform: translateY(-39.2rem);
    z-index: -1;
    position: relative;
}
/* ##### FIN ##### Statistiques et Graphes */

/* ##### Debut ##### Agenda */
.table.agenda td {
    padding: 0.25rem !important;
}

.table.agenda {
    border: #b39555 solid 2px;
}

a.agenda:link {
    color: var(--primaryColor);
    text-decoration: none;
}
  
a.agenda:visited {
    color: var(--tertiaryColor);
    text-decoration: none;
}
  
a.agenda:hover {
    color: var(--secondaryColor);
    text-decoration: none;
}

/* ##### FIN ##### Agenda */

/* ##### Debut ##### Media Queries */
@media screen and (max-width: 992px) {

    :root {
        font-size: 15px;
        --logodivwidth: 50vw;
    } 

    .logo-banner {
        grid-template-columns: 1fr 1fr;
    }
    
    .logo-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }
    
    .logo-right {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }
    
    #logo-left, #logo-right {
        object-fit: contain;
    }

    .logo-title {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    label.form-check-label {
        margin: 0.3rem 0rem 0.4rem 0.2rem;
    }

    .alert.alert-success.flash-success, .alert.alert-warning.flash-warning {
        max-width: 100%;
        padding: 1rem;
    }

}

@media screen and (max-width: 768px) {

    :root {
        font-size: 14px;
        --logodivwidth: 50vw;
    } 

    .logo-banner {
        grid-template-columns: 1fr 1fr;
    }
    
    .logo-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }
    
    .logo-right {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }

    #logo-left, #logo-right {
        object-fit: contain;
    }

    .logo-title {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
        
    label.form-check-label {
        margin: 0.3rem 0rem 0.4rem 0.2rem;
    }

    .alert.alert-success.flash-success, .alert.alert-warning.flash-warning {
        max-width: 100%;
        padding: 1rem;
    }

}

@media screen and (max-width: 575px) {

    :root {
        font-size: 13px;
        --logodivwidth: 50vw;
    }

    .logo-banner {
        grid-template-columns: 1fr 1fr;
    }

    .logo-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }
    
    .logo-right {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }

    #logo-left, #logo-right {
        object-fit: contain;
    }

    .logo-title {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }

    label.form-check-label {
        margin: 0.4rem 0rem 0.4rem 0.2rem;
    }

    .menu {
        font-size: 11px;
    }
}

@media screen and (max-width: 360px) {

    :root {
        font-size: 12px;
        --logodivwidth: 50vw;
    }

    .logo-banner {
        grid-template-columns: 1fr 1fr;
    }

    .logo-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }
    
    .logo-right {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        width: var(--logodivwidth);
    }

    #logo-left, #logo-right {
        object-fit: contain;
    }

    .logo-title {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    #center-logo {
        max-width: 95vw;
    }

    label.form-check-label {
        margin: 0.4rem 0rem 0.2rem 0.2rem;
    }

    .menu {
        font-size: 9px;
    }
}
/* ##### FIN ##### Media Queries */