html {
  position: relative;
  min-height: calc(var(--vh, 1vh) * 100);       /* 100% de la hauteur visible (CSS MobileTrick) */
}

body {
    min-height: calc(var(--vh, 1vh) * 100);    /* 100% de la hauteur visible (CSS MobileTrick) */
    font-family: "Roboto Condensed", "Open Sans", "Sans", sans-serif;
    font-size: 14px;
    padding-top:10px;
    background-image: url('Images/carre.png');
    background-repeat: repeat;
    background-position: center;
    background-color: #EFEFEF;
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
    background-color: white;
    background-position: center;  
    background-image: url('Images/logo-background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;    
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.numTel, .numTel:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.marg-bottom{
	margin-bottom: 50px;
}

/******** FOOTER ********/
footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    height: 85px;                       /* 85 = Footer */
}

.footer {
    bottom: 0;
    width: 100%;
    height: 85px;                       /* 85 = Footer */
    background-color: #26358B;
    color: #ffffff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/*.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}*/

.footer{
    text-align: center;
    display: table;
}

.footer div{
    padding-left: 10px;
    padding-right: 10px;
    display: table-cell;
    vertical-align: middle
}


.footer p {
    margin-bottom: 0;
    text-align: center;
}

.footerAlerte {
    background-color: #FF0000 !important;
}

.imgAppelSurtaxe{
    height: 2em;
}

.body-content {
    height: calc(var(--vh, 1vh) * 100);         /* 100% de la hauteur visible (CSS MobileTrick) */
    min-height: calc(var(--vh, 1vh) * 100);     /* 100% de la hauteur visible (CSS MobileTrick) */
    padding-left: 15px;
    padding-right: 15px;
}


/******** INPUT ********/
input,
select,
textarea {
    max-width: 280px;
}

input[type="text"],
input[type="password"],
input[type="email"],
select[multiple],
select[size]
{
    background: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out 0s;
}

.textbox-custom {
    border: none !important;
    border-bottom: 2px solid grey !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px; 
}

.textbox-custom:hover {    
    outline: none !important;
    background: transparent !important;
    box-shadow:none !important;
}    

.centrer-input {
    margin: 0 auto;
}

.curseur-main {
    cursor: pointer;
}

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] ~ label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] ~ label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] ~ label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked ~ label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked ~ label:before { letter-spacing: 8px; }


/******** PAGE : INDEX ********/
#content-infos #dep {
    display: inline-block !important;
}

#dep{
    font-size: 30px;
    height: auto;
    color: #26358B;
}

#content-infos #NbPatients {
    margin-top: 30px;
}

#content-infos .titre-DepGeo,
#content-infos .titre-NbPatients,
#erreur {
    font-size: 20px;
    width: 100%;
}

#depGeo {
    margin-bottom: 15px;
}

#checkboxes .checkboxgroup {
    margin-right: 8%;
    font-size: 16px;
}

#checkboxes .checkboxgroup:last-child {
    margin-right: 0;
}

.checkboxgroup {
  display: inline-block;
  text-align: center;
}
.checkboxgroup label {
  display: block;
}

.codeDep {
    display: inline-block;
    width: 80px;
    border: solid 2px #26358B;    
    font-weight: bold;
    padding-bottom: 15px;
}

#iconGeoLoc {
    cursor: pointer;
}

/******** MARGIN *********/
.my-5{
    margin-top: 5px;
    margin-bottom: 5px;
}

.my-10{
    margin-top: 10px;
    margin-bottom: 10px;
}


/******** BANDEAU D'INFORMATIONS ********/
#messageErreur {
    font-weight: bold;
    text-align: center;
    color: red;
    background: transparent !important;
    font-size: 15px;
}


.titreChamp {
    font-size: 16px;
}

.titre h1 {
	margin-top: 0px;
	font-size: 20px;
	font-weight: lighter !important;
    margin-bottom: unset;
}

.titre span{
    /*margin-bottom: 40px;*/
    padding: 10px;
}

.titre p{
    margin-top: 20px;
}

.titrePage,
h2 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 30px;
}

.centrer-image {
    margin: 0 auto;
}

label {
    font-weight: normal !important;
}

.details {
    font-size: 11px;
}

.text-custom-danger {
    color: red;
    font-weight: bold;
}

.text-custom-green {
    color: #8DD500;
    font-weight: bold;
}
 
.text-custom-info {
    color: #26358B;
    font-weight: bold;
}

.text-custom-gras {
    font-size: 16px;
    font-weight: bold;
}

.text-custom-info {
	color: #26358B;
	font-weight: bold;
    font-size: 20px;
}

.titreCentre {
    font-size: 16px;
    font-weight: bold;   
}

.titreCentre p {
     margin: 0;
}

.normal-text{
    font-size: 20px;
}
/******** BOUTONS ACTIONS ********/
.btn{
    font-size: 30px !important;
}

.btn-start{
    position: absolute;
    bottom: 0;
    width: 100%;
}

.btn-start > div > button{
    font-size: 20px;
}

#btnAction {
    /*padding-top: 40px;
    margin-bottom: 5px;*/
    bottom: 0;
    position: absolute;
    width: 100%;
}

.btnActionGauche {
    padding-right: 2px;
    padding-left: 1px;
}

.btnActionDroite {
    padding-left: 2px;
    padding-right: 1px;
}

.btn-custom-success,
.btn-custom-danger,
.btn-custom-info,
.btn-custom-default {
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0 !important;
    padding-bottom: 8px;
    padding-top: 8px;
}

.btn-custom-success:focus,
.btn-custom-danger:focus {
    color: #FFFFFF;
}

.btn-custom-success {    
    background-color: #8DD500 !important;    
    color: #FFFFFF !important;
}

.btn-custom-danger {
    background-color: #ff0000 !important;
    color: #FFFFFF !important;
}

.btn-custom-warning {
    background-color: #ffbb33 !important;
    color: #FFFFFF !important;
}

.btn-custom-info {
    background: transparent !important;
    color: #000000 !important;
}

.btn-custom-primary {
    background-color: #26358B !important;
    color: #FFFFFF !important;
}

.btn-custom-default {
    background: transparent !important;
    color: #000000 !important;
}

/* BANDEAU DEFILANT */
#bandeauDefilant{
    height: 60px;
}

/* le block conteneur */
.bandeau-defilant {
  /*max-width: 30em;*/                      /* largeur de la fenêtre */
  margin: 0 10px 0;
  overflow: hidden;                     /* masque tout ce qui dépasse */
  margin-bottom: 15px;
}

.bandeau-defilant div {
    height: 30px;
}

/* le bloc fixe */
.contenu-fixe {
    text-align: center;
}

/* le bloc défilant */
.contenu-defilant {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  /* animation */
  /*animation: defilement-rtl infinite linear;*/
  /*animation-name: defilement-rtl;       /* référence à la règle @keyframes mise en oeuvre */
  /*animation-delay: 15s;                 /* valeur à ajuster suivant la longueur du message */
  /*animation-iteration-count: infinite;  /* boucle continue */
  /*animation-timing-function: linear;    /* pas vraiment utile ici */
}

.contenu-defilant-V15{
    animation: defilement-rtl 15s infinite linear;
}

.contenu-defilant-V30{
    animation: defilement-rtl 30s infinite linear;
}

.contenu-defilant-V45{
    animation: defilement-rtl 45s infinite linear;
}



@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

.bandeau-red{
    background-color: #FF0000;
    color: white;
}

.bandeau-blue{
    background-color: #26358B;
    color: white;
}

.bandeau-green{
    background-color: #8DD500;
    color: white;

}
/******** CARTOUCHE *********/

.cartouche-with-pdf{
    width: 85%;
    margin: 0;
    border-right: 2px solid black;
}

.cartouche-without-pdf{
    width: 100%;
    margin: 0;
}

.cartouche-pdf{
    margin: 0 !important;
    display: block !important;
}

#cartouche_pdf > button,
#cartouche_pdf > a {
    width: 100% !important;
    height: 100% !important;
    border: none;
    background-color: transparent;
}

#cartouche-info{
    margin-right: 0 !important;
    border-right-color:black;
}

.cartouche-conteneur{
	padding-left: 4px;
	padding-right: 4px;
}

.cartouche{
	border: 2px solid black;
	cursor: pointer;
	border-radius: 30px;
	/*margin: 5px auto;*/
    margin: 10px auto;
	display: flex;
	min-height: 40px;
    font-size: 25px;
    padding: 10px 0;
}

.cartouche-selected{
	color: #ffffff;
	background-color: #8DD500;
	border-color: #8DD500;
}

.cartouche-content{
	margin: auto;
}

.desc-cartouche{
    font-size: 15px;
}

/******** MENU ********/
.navbar-default,
.navbar-default .navbar-collapse {
    background: #ffffff !important;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {    
    -webkit-border-top-right-radius: 15px;    
    -moz-border-radius-topright: 15px;    
    border-top-right-radius: 15px;
}

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 100%;
}

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    height: 77px;
}

.navbar-toggle {
    z-index:3;
}

.navbar-static-top {
    height: 80px;
}

.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 66px;
}

.navbar-default {
    background-color: #FFFFFF !important;
    border: none;
}

#col-middle-title {
    height: 81px;
}

#principal,
#main,
#col-middle,
#col-middle-content
{
    min-height: calc((var(--vh, 1vh) * 100) - 195px);    /* 195 = Navbar (80) + Margin-bottom (20) + Footer (85) + espace haut du site (10) */
}

/*#col-middle-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc((var(--vh, 1vh) * 100) - 276px);    /* 227 = Navbar (80) + Margin-bottom (20) + Title (81) + Footer (85) + Espace tout en haut du site (10) */
    /*min-height: calc((var(--vh, 1vh) * 100) - 227px);*/    /* 227 = Navbar (80) + Margin-bottom (20) + Title (32) + Footer (85) + Espace tout en haut du site (10) */
/*}*/

#col-middle-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.height-middle-body-LB0{
    min-height: calc((var(--vh, 1vh) * 100) - 276px);    /* 276 = Navbar (80) + Margin-bottom (20) + Title (32) + TimeLine (49) + Footer (85) + Espace tout en haut du site (10) */
}

.height-middle-body-LB1 {
    min-height: calc((var(--vh, 1vh) * 100) - 321px);   /* 321 = Navbar (80) + Margin-bottom (20) + Title (32) + TimeLine (49) + Footer (85) + Espace tout en haut du site (10) + Taille d'1 bandeau défilant (30) + Margin sous bandeau (15) */
}

.height-middle-body-LB2 {
     min-height: calc((var(--vh, 1vh) * 100) - 351px);  /* 351 = Navbar (80) + Margin-bottom (20) + Title (32) + TimeLine (49) + Footer (85) + Espace tout en haut du site (10) + Taille de 2 bandeau défilant (60) + Margin sous bandeau (15) */
}

.custom-marg-top{
    margin-top: 50px;
}

/******** MEDIA QUERIES  ********/
@media (max-width: 1300px){
    .btn{
        font-size: unset !important;
    }
}

@media (max-width: 991px) {
    
    .marg-bottom{
		margin-bottom: 5px;
	}

    #content-infos {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .footer {
        font-size: 15px;
    }

    .titreChamp {
        margin-bottom: 0;
        margin-top: 10px;
        font-size: 14px;
    }

    .titre h1 {
        /*margin-bottom: 10px;*/
    }

    #btnAction {
        padding-top: 10px;
    }

    #col-middle-title {
        height: 55px;
    }

    .imgAppelSurtaxe{
        height: 1em;
    }

    .cartouche {
        margin: 5px auto;
        font-size: unset;
        padding: unset;
    }

    .cartouche-conteneur {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    body {
        padding-bottom: 155px;
        -o-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        background-size: 100% auto;
        font-size: 17px;
        background-color: white;
        background-position: center;  
        background-image: url('Images/logo-background.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .wrapper {
        margin-left: none;
        margin-right: none;
        max-width: none;
        background-color: rgba(0,0,0,0);
        background-image: none;        
        -webkit-border-top-left-radius: 0;
        -webkit-border-top-right-radius: 0;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-topright: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .navbar-default,
    .navbar-default .navbar-collapse {
        background: #ffffff !important;
        -webkit-border-top-left-radius: 0;
        -webkit-border-top-right-radius: 0;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-topright: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;       
    }

    .navbar-default .navbar-nav>.open>a,
    .navbar-default .navbar-nav>.open>a:focus,
    .navbar-default .navbar-nav>.open>a:hover {    
        -webkit-border-top-right-radius: 0;    
        -moz-border-radius-topright: 0;    
        border-top-right-radius: 0;
    }    

    .navbar{
        margin-bottom: 0;
    }

    #principal,
    #main,
    #col-middle,
    #col-middle-content
    {
        min-height: calc((var(--vh, 1vh) * 100) - 270px);    /* 270 = Navbar (80) + Margin-bottom (20) + Footer (155) + 15px btnAction dans col-middle-body */
    }


    /*#col-middle-body {    
        min-height: calc((var(--vh, 1vh) * 100) - 331px);    /* 302 = Navbar (80) + Title (81) + Footer (110) + 15px btnAction dans col-middle-body + 45px marg-bottom*/
        /*min-height: calc((var(--vh, 1vh) * 100) - 302px);*/    /* 302 = Navbar (80) + Margin-bottom (20) + Title (32) + Footer (155) + 15px btnAction dans col-middle-body */
    /*}*/

    .height-middle-body-LB0{
        min-height: calc((var(--vh, 1vh) * 100) - 331px);    /* 302 = Navbar (80) + Title (81) + Footer (110) + 15px btnAction dans col-middle-body + 45px marg-bottom*/
    }

    .height-middle-body-LB1 {
        min-height: calc((var(--vh, 1vh) * 100) - 376px);    /* 376 = Navbar (80) + Title (81) + Footer (110) + 15px btnAction dans col-middle-body + 45px marg-bottom + Taille de 2 bandeau défilant (30) + Margin sous bandeau (15)*/
    }

    .height-middle-body-LB2 {
        min-height: calc((var(--vh, 1vh) * 100) - 406px);    /* 406 = Navbar (80) + Title (81) + Footer (110) + 15px btnAction dans col-middle-body + 45px marg-bottom + Taille de 2 bandeau défilant (60) + Margin sous bandeau (15)*/
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"]
    {
        font-size: 18px;
    }    

    #messageErreur {
        font-size: 16px;
        text-align: center;
        color: red;
        font-weight: bold;
        background: transparent !important;
    }
    
    footer {
        height: 155px;              /* 155 = Footer + Boutons */
        position: absolute;
    }

    footer #btnAction2 {
        height: 45px;
        padding-top: 5px;
        margin-bottom: 0;        
    }

    footer #btnAction2 .btnActionGauche {
       padding-right: 1px;
    }

    footer #btnAction2 .btnActionDroite {
       padding-left: 1px;
    }

    .footer {
        height: 110px;              /* 110 = Footer */
        align-items: flex-start;
    }

    .footer p {
        margin-bottom: 5px;
    }

    .cancel-maxwidth {
        max-width: none;
    }

    .no-padding-right {
        padding-right: 0px;
    }

    #checkboxes .checkboxgroup {
        margin-right: 15%;
        font-size: 20px;
    }

    .navbar-brand {
        height: 66px;
    }

    .navbar-nav > li > a {
        line-height: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-header {
        min-height: 66px;
    }
}

   
@media (max-width: 320px) { 
    body {
        padding-bottom: 185px;          /* 185 = Footer + Boutons */
    }

    footer {
        height: 185px;                  /* 185 = Footer + Boutons */
    }

    .footer {
        height: 140px;                  /* 140 = Footer */
    }

    #principal,
    #main,
    #col-middle,
    #col-middle-content
    {
        min-height: calc((var(--vh, 1vh) * 100) - 265px); /* 285 = Navbar (80) + Margin-bottom (20) + Footer (185) */
    }

    /*#col-middle-body {    
        min-height: calc((var(--vh, 1vh) * 100) - 346px);    /* 336 = Navbar (80) + Margin-bottom (20) + Title (32) + TimeLine (49) + Footer (185) */
    /*}*/

    .height-middle-body-LB0{
        min-height: calc((var(--vh, 1vh) * 100) - 346px);    /* 336 = Navbar (80) + Margin-bottom (20) + Title (32) + TimeLine (49) + Footer (185) */
    }

    .height-middle-body-LB1 {
        min-height: calc((var(--vh, 1vh) * 100) - 391px);    /* 391 = Navbar (80) + Margin-bottom (20) + Title (32) + TimeLine (49) + Footer (185) + Taille de 2 bandeau défilant (30) + Margin sous bandeau (15)*/
    }

    .height-middle-body-LB2 {
        min-height: calc((var(--vh, 1vh) * 100) - 421px);    /* 421 = Navbar (80) + Margin-bottom (20) + Title (32) + TimeLine (49) + Footer (185) + Taille de 2 bandeau défilant (60) + Margin sous bandeau (15)*/
    }
}