/* ========================================================================== */
/* SECTION CSS GENERAL                                                        */
/* ========================================================================== */

/* NOTE ---------------- Normalisation ---------------- */
html { font-family: 'Arial', sans-serif; }
body { background-color: #f7f6f6; margin: 0 0px; font-size: 18px; font-family: 'Arial', sans-serif; }

/* NOTE ---------------- Font ---------------- */
@font-face {
    src: url('../fonts/DINPro-Bold.otf');
    font-family:'DinBold';
    font-style: normal;
}
@font-face {
    src: url('../fonts/DINPro.otf');
    font-family:'Din';
    font-style: normal;
}

/* NOTE ---------------- Taille + Block ---------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px !important; }
.container_full { max-width: 1800px; margin: 0 auto; }
.fullw { width: 100%; }
.w80 { width: 80%; }
.w75 { width: 75%; }
.w70 { width: 70%; }
.w69 { width: 69%; }
.w66 { width: 66%; }
.w60 { width: 60%; }
.w50 { width: 50%; }
.w45 { width: 45%; }
.w33 { width: 33%; }
.w30 { width: 30%; }
.w25 { width: 25%; }
.w24 { width: 24%; }
.w20 { width: 20%; }

.min-w-auto {min-width: auto;}

.h-50 { height: 50%; }
.h-100 { height: 100%; }
.h-full { height: 100vh; }
.min-h-full { min-height: 100vh; }

.object-fit-cover {object-fit: cover;}

.h-minContent { height: min-content; }    
.heightFixed-scrollY { overflow: auto; overflow-x: none; }

/* NOTE ---------------- Texte ---------------- */
b {font-weight: 700; }
.verySmall-text { font-size: 9px; }
.small-text { font-size: 14px; }
/* h1 { font-size: 30px; font-weight: 800; } */
/* h2 { font-size: 30px; font-weight: 800; }
h3 { font-size: 30px; font-weight: 500; }
h4 { font-size: 26px; font-weight: 500; }
h5 { font-size: 20px; font-weight: 500; } */
.font-14 { font-size: 14px;}
.font-20 { font-size: 20px;}
.font-26 { font-size: 26px;}
.font-30 { font-size: 30px;}

.titre { font-family: 'DinBold'; text-transform: uppercase; font-size: 26px; }

.fontWeight-400 { font-weight: 400; }
.fontWeight-500 { font-weight: 500; }
.fontWeight-700 { font-weight: 700; }
.fontWeight-900 { font-weight: 900; }

.textTransform-uppercase { text-transform: uppercase; }

/* NOTE ---------------- Texte decoration ---------------- */
.fontDecoration-barre { text-decoration: line-through; }

/* NOTE ---------------- Texte line height ---------------- */
.lineH-10 { line-height: 10px; }
.lineH-20 { line-height: 20px; }
.lineH-40 { line-height: 40px; }

/* NOTE ---------------- Vertical alignement ---------------- */
.vertAlign-middle { vertical-align: middle !important; }
.vertAlign-top { vertical-align: top; }
.vertAlign-bottom { vertical-align: bottom; }
.vertAlign-right { vertical-align: right; }
.vertAlign-left { vertical-align: left; }

/* NOTE ---------------- Texte alignement ---------------- */
.textAlign-center { text-align: center; }
.textAlign-right { text-align: right; }
.textAlign-left { text-align: left; }

/* NOTE ---------------- Flex option ---------------- */
.flexWrap-inherit { flex-wrap: inherit; }
.flexWrap-wrap { flex-wrap: wrap; }
.flexDirection-column { flex-direction: column; }

/* NOTE ---------------- white-space ---------------- */
.space-nowrap { white-space: nowrap; }

/* NOTE ---------------- Texte color ---------------- */
.text-noir { color: #000000; }
.text-gris { color: #888888; }
.text-grisClair { color: #c0c0c0; }
.text-bleu { color: #029fd5; }
.text-bleuFonce { color: #043847; }
.text-white { color: #FFFFFF; }

/* NOTE ---------------- Icone ---------------- */
.big-icon { width: 60px; height: auto; }
.medium-icon { width: auto; height: 40px; }
.small-icon { width: 15px; height: auto; }
.icon { width: 20px; height: auto; }
.icon-input { width: 20px; height: auto; position: absolute; top: 13px; right: 10px; }

/* NOTE ---------------- SVG color ---------------- */
.svg-noir { fill: #000000; }
.svg-gris { fill: #828585; }
.svg-bleu { fill: #029fd5; }
.svg-bleuFonce { fill: #003a45; }
.svg-white { fill: #FFFFFF; }

/* NOTE ---------------- Border color ---------------- */
.border-noir { border-color: #000000; }
.border-grisClair { border-color: #ededed; }
.border-gris { border-color: #828585; }
.border-bleu { border-color: #029fd5; }
.border-bleuFonce { border-color: #003a45; }
.border-white { border-color: #FFFFFF; }

/* NOTE ---------------- Background color ---------------- */
.block-noir { background-color: #000000; }
.block-blanc { background-color: #ffffff; }
.block-gris { background-color: #f7f7f7; }
.block-grisFonce { background-color: #828585; }
.block-bleu { background-color: #029fd5; }
.block-bleuFonce { background-color: #003a45; }
.block-vert { background-color: #67b23c; }
.block-rose { background-color: #e92681; }

/* NOTE ---------------- Display ---------------- */
.disp-flex { display: flex; }
.disp-inline-flex { display: inline-flex; }
.disp-block { display: block; }
.disp-inline-block { display: inline-block; }
.disp-none { display: none; }

/* NOTE ---------------- Position ---------------- */
.pos-absolute { position: absolute; }
.pos-relative { position: relative; }
.pos-fixed { position: fixed; }
.pos-sticky { position: sticky; }

/* NOTE ---------------- Margin ---------------- */
.marg-auto { margin: auto; }
.marg-0-auto { margin: 0 auto; }
.marg-0 { margin: 0; }

.mtop-xxs { margin-top: 5px; }
.mtop-xs { margin-top: 10px; }
.mtop-xss { margin-top: 15px; }
.mtop-s { margin-top: 20px; }
.mtop-ssx { margin-top: 25px; }
.mtop-sx { margin-top: 30px; }
.mtop-m { margin-top: 40px; }
.mtop-l { margin-top: 60px; }
.mtop-ls { margin-top: 80px; }
.mtop-lx { margin-top: 100px; }

.mbot-0 { margin-bottom: 0px; }
.mbot-xxs { margin-bottom: 5px; }
.mbot-xs { margin-bottom: 10px; }
.mbot-xss { margin-bottom: 15px; }
.mbot-s { margin-bottom: 20px; }
.mbot-ssx { margin-bottom: 25px; }
.mbot-sx { margin-bottom: 30px; }
.mbot-sxs { margin-bottom: 35px; }
.mbot-m { margin-bottom: 40px; }
.mbot-l { margin-bottom: 60px; }
.mbot-ls { margin-bottom: 80px; }
.mbot-lx { margin-bottom: 120px; }

.mright-0 { margin-right: 0px; }
.mright-xxs { margin-right: 5px; }
.mright-xs { margin-right: 10px; }
.mright-xss { margin-right: 15px; }
.mright-s { margin-right: 20px; }
.mright-ssx { margin-right: 25px; }
.mright-sx { margin-right: 30px; }
.mright-m { margin-right: 40px; }
.mright-l { margin-right: 60px; }
.mright-l { margin-right: 60px; }
.mright-ls { margin-right: 80px; }

.mleft-0 { margin-left: 0px; }
.mleft-xxs { margin-left: 5px; }
.mleft-xs { margin-left: 10px; }
.mleft-xss { margin-left: 15px; }
.mleft-s { margin-left: 20px; }
.mleft-ssx { margin-left: 25px; }
.mleft-sx { margin-left: 30px; }
.mleft-m { margin-left: 40px; }
.mleft-l { margin-left: 60px; }
.mleft-ls { margin-left: 80px; }
.mleft-25 { margin-left: 25%; }


/* NOTE ---------------- Padding ---------------- */
.p-0 { padding: 0px; }
.p-s { padding: 20px; }
.p-sx { padding: 30px; }
.p-sxs { padding: 35px; }
.p-m { padding: 40px; }

.ptop-0 { padding-top: 0px; }
.ptop-xxs { padding-top: 5px; }
.ptop-xs { padding-top: 10px; }
.ptop-xss { padding-top: 15px; }
.ptop-s { padding-top: 20px; }
.ptop-sx { padding-top: 30px; }
.ptop-m { padding-top: 40px; }
.ptop-l { padding-top: 60px; }

.pbot-0 { padding-bottom: 0px; }
.pbot-xxs { padding-bottom: 5px; }
.pbot-xs { padding-bottom: 10px; }
.pbot-xss { padding-bottom: 15px; }
.pbot-s { padding-bottom: 20px; }
.pbot-sx { padding-bottom: 30px; }
.pbot-m { padding-bottom: 40px; }
.pbot-l { padding-bottom: 60px; }

.pright-0 { padding-right: 0px; }
.pright-xxs { padding-right: 5px; }
.pright-xs { padding-right: 10px; }
.pright-s { padding-right: 20px; }
.pright-sx { padding-right: 30px; }
.pright-m { padding-right: 40px; }
.pright-l { padding-right: 60px; }
.pright-135px { padding-right: 135px; }

.pleft-0 { padding-left: 0px; }
.pleft-xxs { padding-left: 5px; }
.pleft-xs { padding-left: 10px; }
.pleft-s { padding-left: 20px; }
.pleft-sx { padding-left: 30px; }
.pleft-m { padding-left: 40px; }
.pleft-l { padding-left: 60px; }
.pleft-135px { padding-left: 135px; }

/* NOTE ---------------- Bouton ---------------- */
a { color: inherit; }
a:hover { color: inherit; text-decoration: none; }
.btn { border-radius: 30px; border: 2px #12BBAD solid; font-size: 14px; min-width: 190px; font-weight: 200; min-height: 40px; line-height: 30px; }
    .btn:active .btn:focus, .btn.focus, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus { box-shadow: none; }

.btn-bleu-plein { color: white; border-color: #029fd5 !important; background-color: #029fd5; } 
    .btn-bleu-plein:hover { color: white; border-color: #029fd5; background-color: #029fd5; }
    
.btn-bleuFonce-plein { color: white; border-color: #04364e !important; background-color: #04364e; } 
    .btn-bleuFonce-plein:hover { color: white; border-color: #04364e; background-color: #04364e; }
    
/* NOTE ---------------- Input ---------------- */
input { font-size: 16px; }
input:focus { border-color: transparent; }
input.inputBorder-black { border: 1px #000000 solid; }
input[type=number]::-webkit-inner-spin-button,  input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; }
.ui-datepicker {z-index:100 !important;}

.custom-control-input:focus ~ .custom-control-label::before { box-shadow: none; }
.form-control:focus { box-shadow: none; border-color: #FFFFFF; }
.form-control { box-shadow: none; border-color: #FFFFFF; }
.form-control { font-size: 16px; color: #000000; }
.input
.inputRadius-left { border-top-left-radius: 28px; border-bottom-left-radius: 28px; padding-left: 20px; }  
.inputRound { height: 45px; border: 1px #033846 solid; border-radius: 40px; padding-left: 20px; overflow: hidden;}  
.inputRound:focus { height: 45px; border: 1px #033846 solid; border-radius: 40px; padding-left: 20px; } 
.label-bold label { font-weight: 900; }

.btn-rouge-plein { color: white; border-color: #bc1631 !important; background-color: #bc1631; } 
    .btn-rouge-plein:hover { color: white; border-color: #e2273e; background-color: #e2273e; }

/* NOTE ---------------- Icone ---------------- */
.round-icone { padding: 10px; border-radius: 91px; }
.smallRound-icone { padding: 10px; border-radius: 91px; }

/* NOTE ---------------- Cursor ---------------- */
.pointer { cursor: pointer; }

/* !SECTION CLOSE - CSS GENERAL                                               */
/* ========================================================================== */


/* ========================================================================== */
/* SECTION CSS error-success                                                  */
/* ========================================================================== */

#msgbox button { background: none; border: none; position: absolute; top: 15px; right: 10px; font-size: 20px; cursor: pointer; }
body #msgbox .card .card-content .card-title{ display: block; line-height: 32px; margin-bottom: 8px; }
body #msgbox .card .card-title { font-size: 24px; font-weight: 300; }
body #msgbox .card .card-content p { margin: 0; color: inherit; }

/* !SECTION CLOSE - CSS error-success                                         */
/* ========================================================================== */


/* ========================================================================== */
/* SECTION CSS TOPBAR - NAVBAR                                                */
/* ========================================================================== */

#sidenav-main-logo .logo-responsive {display:none;}
#bouton-deco-responsive {display:none;}
.shadowNavBar { box-shadow: 5px 5px 20px #e7e6e6; z-index: 10; }
.shadowTopBar { box-shadow: 5px 5px 20px #e7e6e6; z-index: 9; }
.plogoNavBar { padding: 40px 70px; }

/* !SECTION CLOSE - CSS TOPBAR - NAVBAR                                       */
/* ========================================================================== */


/* ========================================================================== */
/* SECTION CSS PAGE CONNEXION                                                 */
/* ========================================================================== */

.backgroundBlock-connexion { background-size: cover; background-repeat: no-repeat; background-position: 20%; background-image: url('../img/structure/fond_connexion.jpg'); }

/* !SECTION CLOSE - CSS PAGE CONNEXION                                        */
/* ========================================================================== */


/* ========================================================================== */
/* SECTION CSS PAGE HOME                                                      */
/* ========================================================================== */

.blockLancerDiag { height: 150px; }
    .backgroundBlock-LancerDiag { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('../img/structure/fond_connexion.jpg'); }

.shadowBlock { box-shadow: 5px 5px 20px #e7e6e6; z-index: 5; }

.tiret-titre { width: 30px; height: 10px; display: inline-flex; }

.trTabHome { border-top: 1px solid #e6e6e6; padding: 25px 0; }
.trTabHome:last-child { border-bottom: 1px solid #e6e6e6; }
    .tdTabHome { margin: auto; color: #c0c0c0; }
           
/* !SECTION CLOSE - CSS PAGE HOME                                             */
/* ========================================================================== */


/* ========================================================================== */
/* SECTION CSS PAGE DIAGNOSTIC                                                      */
/* ========================================================================== */
.diagnostic-container {min-height:84vh;}
textarea.form-control:focus{height:auto;}

.inputTextRound{height: 45px; border: 1px #033846 solid; border-radius: 20px; padding-left: 20px;}
.caseStep{list-style-type: none;height:100%;}
    .caseStep li {border:solid 2px #67b23c;margin-bottom:-2px;color:#67b23c;display:flex;height:auto;}
    .caseStep li a {display:flex;height:100%;text-align: center;justify-content:center;align-items:center;width:100%;}
    .caseStepActive {background-color: #67b23c;color:white !important;}

.labelForm{font-size:15px;font-weight: 600;}
.custom-control-input:checked~.custom-control-label::before{border-color:#04364e;background-color:#04364e;}
.btn-vert-plein { color: white; border-color:#67b23c !important; background-color:#67b23c; } 
    .btn-vert-plein:hover { color: white; border-color:#67b23c; background-color:#67b23c; }
.btn-vert-vide{color:#67b23c;border-color:#67b23c;}
    .btn-vert-vide:hover{ color: white; border-color:#67b23c !important; background-color:#67b23c; }
.block-orange {background-color: #EA5419;}
.text-orange{color:#EA5419;}
.text-vert{color:#67b23c;}
.btnNavOrange{color:white;background-color:#EA5419;padding:15px 20px;border-radius: 50%;}
    .btnNavOrange:hover{color:white;}
.justifyContent-center{justify-content: center;}

#questions-wrapper {max-height:73vh;overflow:hidden;overflow-y: auto;}
#questions-fullw {width:100%;margin-right: 40px;}
.bloc-diagnostic-container {text-align: center;margin-bottom: 30px;}
.bloc-diagnostic {text-align: center;font-weight: bold;padding: 20px;width: 230px;border-radius: 25px;display: inline-block;margin-left:15px;margin-right:15px;margin-bottom:10px;}
.bloc-diagnostic p {margin:0;margin-top: 10px;}

.upload-bloc {display: inline-block;width: 100%;border: 2px dashed #67b23c;margin-right: 10px;margin-bottom: 10px;padding: 10px;text-align: center;vertical-align: middle;height: 150px;cursor:pointer;padding-top: 50px;position:relative;overflow:hidden;}
.upload-bloc p {font-size:14px !important;margin:0;position:relative;z-index:100;}
.upload-bloc img {position: absolute;top: 0;z-index: 0;left: 0;margin-left: calc( -50% );height:100%;}
.bouton-photo-ajout {background: #67b23c;color:#fff;border-radius: 100px;padding: 6px 15px;margin-left: 10px;margin-top: 20px;display: inline-block;}
.bouton-photo-voir {background: #67b23c;color:#fff;border-radius: 100px;padding: 14px 15px;margin-left: 10px;margin-top: 40px;display: inline-block;}

#questions-fullw * {font-size: 20px;}

.upload-bloc .delete_upload {position: absolute;top: 2px;right: 15px;z-index: 1;}

table.MN_table thead .sorting {background-repeat: no-repeat; background-position: right; background-image:url('../img/structure/icon/sort_both.png');}
table.MN_table thead .sorting_desc {background-repeat: no-repeat; background-position: right; background-image:url('../img/structure/icon/sort_desc.png');}
table.MN_table thead .sorting_asc {background-repeat: no-repeat; background-position: right; background-image:url('../img/structure/icon/sort_asc.png');}
/* !SECTION CLOSE - CSS PAGE DIAGNOSTIC                                             */
/* ========================================================================== */


/* ========================================================================== */
/* SECTION CSS RESPONSIVE MAX WIDTH 1024 PX                                    */
/* ========================================================================== */
@media screen and (max-width: 1024px) {

    /* ---------------------------------------------------------------------- */
    /* SECTION GLOBAL */
    /* ---------------------------------------------------------------------- */
    .btn {font-size:18px;}
    .bloc-main-content {padding:20px;padding-top:30px;}
    /* !SECTION FIN - GLOBAL */
    /* ---------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------- */
    /* SECTION SIDENAV PRINCIPALE */
    /* ---------------------------------------------------------------------- */
    #sidenav-main {width: 10%;}
    #sidenav-main .flexDirection-column {height: 90% !important;}
    #sidenav-main-contenu .nav-element p {display:none;}
    #sidenav-main-logo .logo-default {display:none;}
    #sidenav-main-logo .logo-responsive {display:block;padding:0;padding-top:10px;}
    #bouton-deco-default {display:none;}
    #bouton-deco-responsive {display:block;}
    #bouton-deco-responsive img {transform:scale(0.8);}
    /* !SECTION FIN - SIDENAV PRINCIPALE */
    /* ---------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------- */
    /* SECTION TOPBAR PRINCIPALE */
    /* ---------------------------------------------------------------------- */
    #topbar-main-right {margin-right:20px;}
    /* !SECTION FIN - TOPBAR PRINCIPALE */
    /* ---------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------- */
    /* SECTION PAGE: Connexion */
    /* ---------------------------------------------------------------------- */
    #connexion-col-right {padding-left:30px;padding-right:30px;}
    #connexion-contenu {margin-top:40px;}
    /* !SECTION FIN - PAGE: Connexion */
    /* ---------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------- */
    /* SECTION PAGE: Accueil */
    /* ---------------------------------------------------------------------- */
    #home-prochains-diagnostics {margin-top:-10px;padding-right:0;margin-bottom:20px;}
    #home-derniers-diagnostics {padding-left:0;}
    /* !SECTION FIN - PAGE: Accueil */
    /* ---------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------- */
    /* SECTION PAGE: Diagnostic */
    /* ---------------------------------------------------------------------- */
    .bloc-diagnostic-container {margin-bottom:0;}
    .bloc-diagnostic {margin-bottom:10px;width:230px;margin-left:5px;margin-right:5px;}
        .bloc-diagnostic img {height: 60px;}
    /* !SECTION FIN - PAGE: Accueil */
    /* ---------------------------------------------------------------------- */

}
/* !SECTION CLOSE - CSS RESPONSIVE MAX WIDTH 1024 PX                           */
/* ========================================================================== */