/*********************************/
/*********** inputs  *************/
/*********************************/


body:not(input) body:not(textarea){
    caret-color:transparent;
    cursor:default;
}

.backgd{
    /* background-image:url('images/background.jpg'); */
    background-image:url('images/fond_blanc_effets.webp');
    background-image:url('images/femme-medecin-vetements-medicaux-stethoscope-fond-blanc-medical-vue-cote-banniere-soins-sante.webp');
    background-size: cover;
}

.backgd2{
    /* background-image:url('images/banniere_medicale.jpg'); */
    background-image:url('images/fond_blanc_effets.webp');
    background-size: cover;
}


/* header{
    background-image:url('images/background.jpg');
    background-size: 50%;
} */

input{
    caret-color: var(--main-color-extradark);
    cursor:pointer;
    color:var(--input-font-color);
    vertical-align:middle;
}

input[type="text"],input[type="email"],select,input[type="date"],input[type="color"]{
    height:var(--input-height);
    background-color:var(--input-bg-color);
    color:var(--input-font-color);
    border:var(--input-border);
    box-shadow: var(--input-box-shadow);
    border-radius:var(--input-border-radius);
    padding-left:2px;
}

textarea,input[type="textarea"]{
    background-color:var(--input-bg-color);
    color:var(--input-font-color);
    border:var(--input-border);
    box-shadow: var(--input-box-shadow);
    border-radius:var(--input-border-radius);
    padding-left:2px;
}
input[type="text"]:hover,input[type="email"]:hover,select:hover,input[type="date"]:hover,input[type="color"]:hover{
    background-color:var(--main-color-light);
}

option {
    background-color: var(--second-color-normal);
}
option:checked {
    background-color: var(--main-color-normal);
}
option:not(:checked) {
    background-color: var(--main-color-light);
}

select option:hover{
    background:red;
}

/******* radios ***************/
.radio-container {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: var(--font-size);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Cache le bouton radio par défaut du nav */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  .radio-container-padding-left{
      padding:30px;
  }

  /* Créer un bouton radio perso */
.checkmark {
    --checkmark-size: calc(var(--input-height) * 0.8);
    position: absolute;
    height: var(--checkmark-size);
    width: var(--checkmark-size);
    background-color: var(--input-bg-color);
    border:var(--input-border);
    box-shadow: var(--input-box-shadow);
    border-radius: 50%;
} 

.checkmark-pos-center{
    top: calc((100% - var(--checkmark-size)) / 2);
    left: calc((100% - var(--checkmark-size)) / 2);
}

.checkmark-pos-left{
    top: calc((100% - var(--checkmark-size)) / 2);
    left: 0;
}

.checkmark:hover{   
    background-color: var(--main-color-light);
  }
.radio-container input:invalid +.checkmark{
    border:1px solid var(--msg-error-font-color);
}

.checkmark i{
    position:absolute;
    top:-5px;
    left:-1px;
}

/* Qd bouton checked ajout d'un background */
.radio-container input:not(checked) ~ .checkmark i{
    /* background-color: var(--main-color-light); */
    display:none;
}
/* Affichage icone qd cheched */
.radio-container input:checked ~ .checkmark i{
    /* background-color: var(--main-color-light); */
    display:block;
}

/*************************************************************/

input[type="text"].error-color{
    height:var(--input-height);
    border:1px solid var(--msg-error-font-color);
    box-shadow: 2px 2px 0px 0px var(--msg-error-font-color);
    border-radius:var(--input-border-radius);
}

input[type="submit"],.submit{
    height:var(--input-big-height);
    width:var(--input-big-width);
    background-color:var(--input-big-bg-color);
    font-size:var(--input-big-font-size);
    border:var(--input-big-border);
    box-shadow: var(--input-big-box-shadow);
    border-radius:var(--input-border-radius);
    color:var(--input-big-font-color);
}
input.choix-liste{
    /*height:var(--input-height);*/
    background-color:var(--input-big-bg-color);
    color:var(--input-big-font-color);
    border:var(--input-big-border);
    /* box-shadow: var(--input-big-box-shadow);*/
    border-radius:var(--input-border-radius);
    padding: 1px;
}

input::placeholder{
    color:grey;
    opacity:0.5;
}


input.error-border-color{  /* redéfinit les inputs doit etre placé après les regles ci-dessus */
    border:1px solid var(--msg-error-font-color);
    box-shadow: 2px 2px 0px 0px var(--msg-error-font-color);
}

input:invalid{
    border:1px solid var(--msg-error-font-color);
}

label{   
    display: block; /* Pour que les labels réagissent comme div sans div*/
}

canvas{
    background-color:var(--input-bg-color);
    color:var(--input-font-color);
    border:var(--input-border);
    box-shadow: var(--input-box-shadow);
    border-radius:var(--input-border-radius);
    touch-action:none;
    cursor: url('images/pen.cur') , default;
}

.inputs {
    align-items: center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    text-align:left;
    margin-right: calc( 100% - 150px);
    opacity: 1;
    filter: invert(0.65);
  }

.inputs input[type="date"]{
    width:50%;
}

.inputs-2-radios{
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width:50%;
}

.grid{
    display:grid;
}

form{
    display:grid;
}

.flex-center{
    display:flex;
    justify-content: center;
    align-items: center;
}

.centreVerticalement {
    display: flex;
    align-items: center;
}

.flex-justify-center{
    display:flex;
    justify-content: center;
}
.flex-center-column{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.padding-sides{
    padding:0 var(--padding);
}

.padding-up-down{
    padding: var(--padding) 0;
}

.padding-around{
    padding: var(--padding) var(--padding);
}
.overflow{
    overflow:auto;
}
/* ****material-icons  *********** */

.md-12 {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
}

.md-18 { font-size: 18px; }
.md-24 { font-size: 24px; }
.md-36 { font-size: 36px; }
.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.md-dark { color: rgba(0, 0, 0, 0.54); }
.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.md-light { color: rgba(255, 255, 255, 1); }
.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
.md-body{  color: var(--second-color); }
.md-menu{ color: var(--main-color); }
.md-icons-menu-custom{ color: rgba(var(--icons-menu-color),1);}

.bg-white{  background-color: rgba(255, 255, 255, 0.9); }
.bg-clear{  background: none; }
.bg-icons{   background-color: rgba(var(--icons-menu-color),1); }
.bg-menu{   background-color: var(--main-color); }

.icon-label{
    column-gap:var(--icon-label-col-gap);
}

.icon-in-big-button{
    position:relative;
    top:8px;
    left:45px;
}


/*********************************/
/*** generic display blocks*******/
/*********************************/


.flex-wrap-evenly{
    display:flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.flex-wrap-center{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:var(--row-gap-buttons);
}

.flex-col-aligncenter{
    display:flex;
    flex-direction:column;
    align-items: center;
}

.div-msg-erreur{
    color:var(--msg-error-font-color);
    column-gap: 20px;
    flex-wrap: wrap;
}

.div-affichage-client,.div-affichage-immo{
    width:100%;
    flex-wrap: wrap;
    column-gap: 12px;
    display:flex;
    /* flex-direction: row; */
    align-items: center;
    border-bottom:var(--section-border-bottom);
}

.section-titre{
    display: flex;
    align-items: center;
    border-bottom:var(--section-border-bottom);
    min-height:var(--section-titre-min-height);
}

.retour_client{
    display:flex;
    justify-content: center;
    align-items: center;
    height:22px;
    width:25px;
}

#signature-pad{
    width: 360px;
    height: 300px; 
}

#fc-table{
    margin:0 auto;
}
#fc-table td:nth-child(1){
    min-width:100%;
}

#fc-table td:nth-child(2),td:nth-child(3),td:nth-child(4){
    width:60px;
}

#fc-fenetre-sav{
    position:fixed;
    /* display:none; */
    background:var(--menu-bg-color);
    border-radius: var(--border-radius);
}


.fc-title{
    font-weight:bold;
    padding-left: 3 px;
    height: 40px;
}
.fc-items{
    padding-left:10px;
    height:30px;
}
.fc-textarea{
    width:100%;
}

/****************************************/
/******** generic classes ***************/
/****************************************/


.indications{      /* Indications aide à la saisie */ 
    color:var(--indications-font-color);
    font-size:var(--indications-font-size);
}

.input-error{
    color:var(--msg-error-font-color);
    font-size:var(--msg-error-little-font-size);
}

.affichage-annexe{    /* Affichage calculé style designation immo */
    color:var(--affichage-annexe-font-color);
    font-size:var(--affichage-annexe-font-size);
    padding-left:5px;
}

/*********************************/

.center{
    text-align:center;
}
.left{
    text-align:left;
}
.right{
    text-align:right;
}
.hidden{
    display:hidden;
}
.red{
    color:red;
}
.bold{
    font-weight:bold;
}



/***********************************/
/******** Lists display ************/
/***********************************/


.dark-light-lines > div:nth-child(odd){
    background-color:var(--dark-line-bg-color);
}
.dark-light-lines > div:nth-child(even){
    background-color:var(--light-line-bg-color);
}
.dark-light-lines tr:nth-child(odd){
    background-color:var(--dark-line-bg-color);
}
.dark-light-lines tr:nth-child(even){
    background-color:var(--light-line-bg-color);
}
.dark-light-lines tr td,th{
    border-radius:4px;
}

.dark-light-inputs tr:nth-child(odd) input{
    background-color:var(--dark-input-bg-color);
}
.dark-light-inputs tr:nth-child(even) input{
    background-color:var(--light-input-bg-color);
}



/*** search clt & art section********/


.section-rech{
    border-bottom:var(--section-border-bottom);
    min-height:150px;
}


/**** Section liste clients *******/

.liste-mdemploi{
    white-space:nowrap;
}

.grid-liste-mdemploi{
    display:grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-areas: "des-lim mod1-lim mod2-lim";
    
}

.grid-liste-mdemploi div{
    justify-content: left;
    word-wrap:break-word;
}

.des-liste-mdemploi{
    grid-area:des-lim;
    display:flex;
    justify-content:center;
    align-items: center;
}

.bouton-liste-mdemploi{
    grid-area:bout-lim;
    display:flex;
    justify-content: center;
    align-items: center;
}
.mod1-liste-clients{
    grid-area:mod1-lim;
    display:flex;
    flex-wrap: wrap;
}
.mod2-liste-clients{
    grid-area:mod2-lim;
    display:flex;
    flex-wrap: wrap;
}

/**** Section liste ssav *******/

.grid-liste-ssav{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "bout-ssav date-ssav agence-ssav num-ssav init-ssav";
    text-align:center;
}
.bouton-liste-ssav{
    grid-area:bout-ssav;
    display:flex;
    justify-content: center;
    align-items: center;
}
.num-liste-ssav{
    grid-area:num-ssav;
}
.agence-liste-ssav{
    grid-area:agence-ssav;
}
.date-liste-ssav{
    grid-area:date-ssav;
}
.init-liste-ssav{
    grid-area:init-ssav;
}


/***********************************/
/********* Formulaires *************/
/***********************************/


.label-input{
    display:flex;
    justify-content: flex-start;
}
.label-input input{
    flex-grow: 1;
}

.label-input select:not([id^="date_"]){
    width:100%;
}


/******* Formulaire classique  ********/

#form-classique{
    grid-template-rows: 80px 1fr 70px;
    align-items: center;
    /* msg erreur, form, bouton valider */
}
#form-classique .flex-col-aligncenter{
    row-gap:var(--row-gap);
}
#form-classique .label-input label{
    width:130px;
    min-width:130px; /* Sinon le label se coupe*/
}
#form-classique .label-input .inputs{
    width:100px;  /* Valeur importante pour mobile*/
    /* eviter de dépasser 345 */
}
#form-classique .label-input .inputs input{
    width:100%;
}

/**** Recherche mdemploi  ********/

#form-rech-mdemploi{
    display:grid; 
    grid-template-rows: 1fr 30px 50px;
    /* form, msg erreur bouton valider */
}
#form-rech-mdemploi div.label-input label{
    width:80px;
    min-width:80px; /* Sinon le label se coupe*/
}
#form-rech-mdemploi div.label-input div.inputs{
    width:200px;  /* Valeur importante pour mobile*/
    /* eviter de dépasser 345  =360 - 2 paddings de 5 env*/
}
#form-rech-mdemploi div.label-input div.inputs input{
    width:100%;
}