@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400&subset=latin,latin-ext);


/* @font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'),
        url('./public/Assets/fonts/RobotoCondensed-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
        url('./public/Assets/fonts/RobotoCondensed-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
        url('./public/Assets/fonts/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
        url('./public/Assets/fonts/RobotoCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
        url('./public/Assets/fonts/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
        url('./public/Assets/fonts/RobotoCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
} */






/* ----------------------- */
/*  Mise en forme générale */
/* ----------------------- */
body {
    font-family: 'Roboto Condensed', sans-serif;
}

li {
    cursor: pointer;
}

.p_paddingTop {
    padding-top: 5%;
}

.p_paddingBottom {
    padding-bottom: 15%;
}

.fs-7 {
    font-size: .8em;
}

.subscript{  
    vertical-align: sub;  
    font-size: small;  
} 

.fs09em {
    font-size: 0.9em;
}

.fs085em {
    font-size: 0.85em;
}


.p_buttonWidthModal {width: 140px;}

.sticky {
    position:sticky;
    top: 0;
    width: 100%;
    padding-bottom :30px;
    z-index: 100;
}


.fsh3 {
    font-size: 28px;
}


/* ---------------- */
/*      buttons     */
/* ---------------- */
.btn-callout-info {
    background-color:#cff5fc;
    border-left: 1px solid #cff5fc;
    padding: 0.5em;
    color:#075260;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: 5px;
}
.btn-callout-warning {
    background-color:#fff4cd;
    border-left-color: #fff4cd;
    padding: 0.5em;
    color:#664d03;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: 5px;
}
.btn-callout-danger {
    background-color:#f8d5da;
    border-left-color: #f8d5da;
    padding: 0.5em;
    color:#580c1b;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: 5px;
}
.btn-callout-warning-darker {
    background-color:#f3dc8d;
    padding: 0.5em;
    color:#664d03;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: 5px;
}
.btn-callout-success {
    background-color:#d1e7dd;
    padding: 0.5em;
    color:#0a3622;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: 5px;
}








/* ---------------- */
/*      Callout     */
/* ---------------- */
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 0.25rem;
}

.bd-callout-info {
    background-color:#cff5fc;
    border-left: 1px solid #cff5fc;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left-color: #9fecf9;
    border-left-width: 0.25rem;
    color:#075260;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.text-info-emphasis {
    color:#075260;
}

.bd-callout-warning {
    background-color:#fff4cd;
    border-left-color: #fff4cd;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left: 1px solid #ffe79c;
    border-left-width: 0.25rem;
    color:#664d03;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.text-warning-emphasis {
    color:#664d03;
}
.bg-warning-light {
    background-color:#fff4cd;
}

.bd-callout-danger {
    background-color:#f8d5da;
    border-left-color: #f8d5da;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left: 1px solid #f1aab4;
    border-left-width: 0.25rem;
    color:#580c1b;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.text-danger-emphasis {
    color:#580c1b;
}
.bd-callout-warning-darker {
    background-color:#f3dc8d;
    border-left-color: #f3dc8d;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left: 1px solid #e9d389;
    border-left-width: 0.25rem;
    color:#664d03;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.bd-callout-success {
    background-color:#d1e7dd;
    border-left-color: #d1e7dd;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left: 1px solid #a3cfbb;
    border-left-width: 0.25rem;
    color:#0a3622;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.text-success-emphasis {
    color:#0a3622;
}


/**********************/
/* Dark theme callout */
/**********************/
.bd-callout-info_dark {
    background-color:#042930;
    border-left: 1px solid #042930;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left-color: #0d7a90;
    border-left-width: 0.25rem;
    color:#70e1f6;
}
.bd-callout-warning_dark {
    background-color:#332701;
    border-left: 1px solid #332701;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left-color: #997404;
    border-left-width: 0.25rem;
    color:#ffdb6a;
}
.bd-callout-danger_dark {
    background-color:#2c080e;
    border-left: 1px solid #2c080e;
    padding: 0.7em;
    padding-top: 1.1em;
    border-left-color: #841028;
    border-left-width: 0.25rem;
    color:#e97f8e;
}







/* ---------------- */
/* formatage tables */
/* ---------------- */
.tableFixHead {
    display: block;
    max-height: 27em;
    overflow-y: scroll;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 1.1em;
    /* min-width: 400px; */
    border-radius: 7px 7px 0 0;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.tableFixHead thead th {
    background-color: rgb(220, 220, 220);
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-size: 1.1em;
}

.tableFixHead tbody th {
    position: sticky;
    top: 0;
}


.tableFixHead tbody tr:nth-of-type(even) {
    background-color: rgb(240, 240, 240);
}







/* ---------------- */
/*       MODAL      */
/* ---------------- */
.modal {
    text-align: center;
    padding: 0!important;
}
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 500px;
}



  
/* ---------------- */
/*      COLORS      */
/* ---------------- */
  :root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-darkyellow: #664d03;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-lightyellow: #f3dc8d;
}



/* Arrière-plan des champs des formulaires disabled */
.form-control:disabled {
    background-color: #f0f0f0; 
    font-style:italic;
}




.selectInTitreFontSize {
    font-size: 1.25rem;
}


.leftMarginTitre {
    margin-left: 1rem !important;  /* ie 16px */
}





/* Styles pour les écrans étroits (téléphones portables) */
@media (max-width: 767px) {
    
    /* .p_gridWidth {
        width:100%;
    } */

    /* Réduire la taille des champs de texte */
    /* input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
    } */
    
    /* Réduire la taille des étiquettes */
    /* .col-form-label {
      width: 100%;
      text-align: left;
    } */
    
    /* Ajuster la largeur du bouton */
    /* .btn {
      width: 100%;
    } */

    .tableFixHead {
        max-height: 20em;
    }

    .fsh3 {
        font-size: 20px;
    }

    .selectInTitreFontSize {
        font-size: 0.8rem;
    }

    .noRightMarginforMobile {
        margin-right: 0 !important;  
    }

    .leftMarginTitre {
        margin-left: 0 !important;  
    }

    .vertical-spacing {
        margin-bottom: 20px;
    }

  }