/*****************************************************************************************************
Ce ficher met en page tous se qui est propre à la Demandes, le formulaire de création, les differentes view (preview,to treat, etc) jusqu'au rapport final.
Donc les fichiers suivant:
 request-form.php
 request-final.php
 requ...-formevaluate.php
     ...-formreport.php
     ...-formtreat.php
     ...-formvalidate.php
     ...-preview.php

Structure du fichier:
    I. Générale
        1. Header
        2. Body (leftside, center, rightside)
          i. Titre et texte
        3. Footer
          i. Bouton
        
    II Spécifique
        1. request-form
        2. ...Validate
        3. ...Treat
        4. ...Report
        5. ...Evaluate
        6. ...Final
        7. ...Preview
    
    

date: 10.01.24
Crée par: Michaël Fiechter
*****************************************************************************************************/
/*activation du bouton nouvelle demande
A déplacé dans styles_front.css, un fois celui-ci en page*/
body.requests-requestform > header,
body.requests-requestform > main > aside,
body.requests-requestform > main > aside,
body.requests-requestform > footer,
body.requests-requestupdate > header,
body.requests-requestupdate > main > aside,
body.requests-requestupdate > footer,
body.requests-requestpreview > header,
body.requests-requestpreview > main > aside,
body.requests-requestpreview > footer,
body.requests-requesttreat > header,
body.requests-requesttreat > main > aside,
body.requests-requesttreat > footer,
body.requests-requestformtreat > header,
body.requests-requestformtreat > main > aside,
body.requests-requestformtreat > footer,
body.requests-requestreport > header,
body.requests-requestreport > main > aside,
body.requests-requestreport > footer,
body.requests-requestformreport > header,
body.requests-requestformreport > main > aside,
body.requests-requestformreport > footer,
body.requests-requestvalidate > header,
body.requests-requestvalidate > main > aside,
body.requests-requestvalidate > footer,
body.requests-requestformvalidate > header,
body.requests-requestformvalidate > main > aside,
body.requests-requestformvalidate > footer,
body.requests-requestfinal > header,
body.requests-requestfinal > main > aside,
body.requests-requestfinal > footer,
body.requests-requestformevaluate > header,
body.requests-requestformevaluate > main > aside,
body.requests-requestformevaluate > footer{
  display:none;
}

/*****  reset *******/
/* des tailles width et height des bloc <main> et <div class="page>
A SUPPRIMER une fois la gestion des tailles codée de manière correct"*/
    .requests-requestform .requests, 
    .requests-requestupdate .requests, 
    .requests-requestformvalidate .requests,
    .requests-requestvalidate .requests,
    .requests-requestformtreat .requests,
    .requests-requesttreat .requests,
    .requests-requestformreport .requests,
    .requests-requestreport .requests,
    .requests-requestpreview .requests,
    .requests-requestfinal .requests {
      display:block;
      height:auto;
    }

    .requests-requestform .requests .page, 
    .requests-requestupdate .requests .page, 
    .requests-requestformvalidate .requests .page,
    .requests-requestvalidate .requests .page,
    .requests-requestformtreat .requests .page,
    .requests-requesttreat .requests .page,
    .requests-requestformreport .requests .page,
    .requests-requestreport .requests .page,
    .requests-requestpreview .requests .page,
    .requests-requestfinal .requests .page {
      min-width: auto;
      min-height: auto;
      width: auto;
      height: auto;
    }



/********** Général ***********/

/* .request_container{

} */

/*** Header ***/
.request_header{
  display: flex;
  justify-content: space-between;
  padding: 30px 48px;
  top:0px;
  background-color: var(--primary-800);
}
.request_header img {
  cursor: pointer;
}
.request_titre{ /*h6 spécifique au page request-form*/
  font-size:1.75em;
}

/*** Body ***/
.request_body{
  display:flex;
  flex-direction: row;
  min-height: 81vh;
  
  background-color: var(--blue-gray-050);
}

.request_body_leftside, .request_body_rightside{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding:48px 48px 0px 48px;
  width:50%;
}

.request_body_centre{
  margin:auto;
  padding:48px;
  width: 75%;
  height:Calc(100vh - 275px );
  background-color: white;
  border-radius: 19px;
  overflow-y: auto;
}

.request_body_leftside{
  /*height:Calc(100vh);*/
  overflow-y: auto;
  background-color: white;
}

.request_body_rightside{
  border-left: solid 1px var(--blue-gray-200);
  background-color: var(--blue-gray-050);
}

/*titre et texte*/
.request_body h5{
    font-size: 1.25em; /*20px*/
    font-weight: 500;
    line-height: 1em;
  
    color: var(--Blue-Gray-700, #455A64);
    margin-bottom: 24px;;
}
.request_body h6{
    display: block;
    width: 250px;
  
    font-size: 1em;
    font-weight: 500;
    word-break: normal;
  
    color: var(--Blue-Gray-700, #455A64);
}

.request_body p{
  color: var(--Blue-Gray-700, #455A64);
  flex-shrink: 100;
}

.requests-requestformevaluate{
  background-color: var(--background);
}

/*.request_groupe_texte{
  display: flex;
  margin: 24px 0px;
  column-gap: 25px;
}
.request_groupe_texte:first-of-type{
  margin-top: 0px;
}*/

/*** Footer ***/
.request_footer{
  position: fixed;
  bottom:0;
  left: 0;
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items: center;
  gap: 48px;
  z-index: 10;
  padding: 24px 48px;

  border-top: solid 1px var(--blue-gray-200);
  background-color: white;
}

/*** Boutons ***/
/*peut-être a déplacer dans le styles-front.css une fois celui-ci réorganiser et nettoyer*/
.boutons{
  padding:16px 45px;
  border: none;
  border-radius: 12px;
  text-decoration:none;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.9em;
  line-height: 14px;
  letter-spacing:1.25px;
}
.evaluation-wrapper{
  display: flex;
  justify-content: space-around;
}
.groupe_boutons{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.groupe_boutons_right{
  display: flex;
  gap:5px;
}

.boutons_primaire{
  background-color: var(--primary-800);
  color: white;
}
.boutons_secondaire{
  background-color: var(--blue-gray-100);
  color: var(--blue-gray-900);
  fill: var(--blue-gray-900);
}

.bouton_retour {
  display:flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center;
  gap:12px;
  font-weight: bold;
  color: var(--primary-800);
  background-color: var(--white);
  border: 1px solid var(--primary-800);
}

.bouton_retour svg{
  height:14px;
  fill: var(--primary-800);
}
.bouton_print {
  display: flex;
  align-items: center;
  height: 48px;
  background-color: var(--primary-800);
  color: var(--white);
}
.bouton_print img {
  margin-right: 10px;
}

/* Boutons Hover */
.boutons_primaire:hover{
  background-color: var(--primary-600);
  color: white;
}
.boutons_secondaire:hover{
  background-color: var(--blue-gray-300);
  color: var(--blue-gray-900);
}


/* Boutons Focus */
.boutons_primaire:focus{
  background-color: var(--primary-900);
  color: white;
}
.boutons_secondaire:focus{
  background-color: var(--blue-gray-600);
  color: white;
}
.bouton_retour:focus svg{
  fill: white;
}
.bouton_print:focus {
  background-color: var(--primary-900);
}



/******** Request-form (nouvelle demande) ********/
#disponibilite{
  /*j'aimerais être présent...*/
  display:none;
}
/************* Request-formValidate **************/

/************** Request-formTreat ****************/
#divEmailRefused {
  align-items: flex-end;
}

.checkbox_mail2.plus label:first-child {
  background-color: #d5d5d594;
  text-indent: -300px;
  overflow: hidden;
  width: 30px;
  height: 30px;
  bottom: 0px;
  position: relative;
  display: block;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='-5.0 -10.0 110.0 135.0'%3E %3Cpath d='m1 50c0-3.7031 1.5117-7.0664 3.9492-9.5039s5.8008-3.9492 9.5039-3.9492h22.09v-22.09c0-3.7031 1.5117-7.0664 3.9492-9.5039s5.8008-3.9492 9.5039-3.9492 7.0664 1.5117 9.5039 3.9492 3.9492 5.8008 3.9492 9.5039v22.09h22.09c3.7031 0 7.0664 1.5117 9.5039 3.9492s3.9492 5.8008 3.9492 9.5039-1.5117 7.0664-3.9492 9.5039-5.8008 3.9492-9.5039 3.9492h-22.09v22.09c0 3.7031-1.5117 7.0664-3.9492 9.5039s-5.8008 3.9492-9.5039 3.9492-7.0664-1.5117-9.5039-3.9492-3.9492-5.8008-3.9492-9.5039v-22.09h-22.09c-3.7031 0-7.0664-1.5117-9.5039-3.9492s-3.9492-5.8008-3.9492-9.5039z'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.checkbox_mail2.moins label:first-child {
  background-color: #d5d5d594;
  text-indent: -300px;
  overflow: hidden;
  width: 30px;
  height: 30px;
  bottom: 0px;
  position: relative;
  display: block;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Crect x='4' y='10' width='16' height='4' fill='%23000000'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.checkbox_mail2.plus .checkbox label,
.checkbox_mail2.moins .checkbox label {
  display: none;
}
/************* Request-formPreview ***************/
.requests-requestpreview .request_body{
padding: 48px 0px;
}
/************* Request-formfinal *****************/
.requests-requestfinal .request_body{
  padding: 48px 0px;
  }
/*********** Requeste-formEvaluate ***************/
.formEvaluate-wrapper {
    display: flex; 
    flex-direction: column;
    align-items: center;
    background: var(--background);
    height: 100%;
    row-gap: 20px;
    text-align:center;
    /*overflow-y:scroll*/
}
.formEvaluate-wrapper .formEvaluate-modal {
  text-align:left;
}
.formEvaluate-container{
  padding: 16px 48px;
}



.formEvaluate-title {
    font-size: 24px;
    font-weight: 700; 
    line-height:1.3em;
    margin-bottom:15px;
    display:block;
}

.formEvaluate-text{
    font-size: 18px; 
    font-weight: 400px; 
    line-height: 1.4em; 
    margin-bottom:1em;
}


.input_container .checkbox label {
  position: relative;
}
.checkbox input {
  appearance: auto;
}


.formEvaluate-label {
    text-transform: uppercase;
    margin-top:16px;
    display:block;
    text-align:center;
    width:100%;
    }


.formEvaluate-button{
    background-color:var(--primary-800);
    border:0px;
    border-radius:12px;
    padding:12px 45px;
    color:#fff;
    text-transform: uppercase;
    font-weight:500;
    font-size: 1rem;
    
}


.formEvaluate-button:hover{
    transition:200ms;
    background-color:var(--primary-900)
}


.formEvaluate-buttonLink{
    color:var(--primary-800);
    font-weight:600;
    text-decoration:underline;
    margin-top:1em;
    display:inline;
    cursor:pointer !important;
    border: none;
    background: none;
    padding: 0;
    margin: 0;

    
}

.formEvaluate-buttonLink:hover{
    color:var(--primary-900);
    transition:200ms

}


.formEvaluate-labelImage{
    height:120px;
    width:120px
}

.formEvaluate-labelImage:hover{
    cursor:pointer
}

/*Karim*/
#formEvaluate-buttons-flexbox {
  display:flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top:31.05px;
    background: #f1f1f1;
      padding: 6px;
      border-radius: 5px;
    }
    
    .printReportContainer {
      gap: 3mm;
      margin-bottom: 120px;
}

#formEvaluate-buttongrisé {
  background-color:var(--blue-gray-100);
  color:var(--blue-gray-900);
  display:none;
}

.strong {
  font-weight: 500;
}

.remarqueContainer {
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.history-note {
  color: var(--blue-gray-600);
  display: block;
  font-size: .8rem;
  height: 131px;
  /*position: absolute;
  bottom: 0;
  right: 0;*/
  text-align: right;
  padding: 0 20px;
}
.evaluation-wrapper .checkbox {
  padding: 1em !important;
}
.sector-table-wrapper td{
  padding: 1em !important;
}
.requests-request_category thead>tr>th:last-child,
.requests-request_type thead>tr>th:last-child,
.requests-status thead>tr>th:last-child{
  display: none !important;
}
.requests-request_category .category-table-wrapper>td:last-child,
.requests-request_type .type-table-wrapper>td:last-child,
.requests-status .status-table-wrapper>td:last-child{
  display: none !important;
}
  
/* M E D I A   Q U E R I E S */
/* ex-600px */
@media only screen and (max-width: 1023px) {

  /* PAGE PARAMETRES - LIEUX */
  
  .requests-request_location .location-table-wrapper td {
    text-align: center !important;
    justify-content: left !important;
  }

  .requests-request_location .location-table-wrapper .col-title a {
    font-size: 12px !important;
    text-align: left !important;
  }

  .requests-request_location .demandeList_datatable_nav {
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: thin !important;
  }
  .requests-request_location .tools-header {
    margin: 5px;
  }  
  
  .requests-request_location h2 {
    display: none;
  }

  .requests-request_location .location-table-wrapper {
    flex-wrap: nowrap;
    text-align: left;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 1em !important;
  }
  
  /* PAGE PARAMETRES - STATUTS */
  
  .requests-status .status-table-wrapper>td:first-child{
    justify-content: left !important;
  }
  .requests-status .status-table-wrapper td{
    justify-content: center !important;
    width:100%;
  }
  
  
  .requests-status .status-table-wrapper span {
    font-size: 12px;
    /*width: 30px !important;*/
  }

  .requests-status .status-table-wrapper .col-title a {
    font-size: 12px !important;
    text-align: left;
  }

  .requests-status .demandeList_datatable_nav {
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: thin !important;
  }
  .requests-status .tools-header {
    margin: 5px;
  }  
  
  .requests-status h2 {
    display: none;
  }

  .requests-status .status-table-wrapper {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px !important;
  }

  /* PAGE PARAMETRES - Lieux */
  
  .requests-request_location .location-table-wrapper{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 1em !important;
    width: 100%;
    min-height: 65px;
  }

  
  /* PAGE PARAMETRES - CATEGORIES */
  
  .requests-request_category .category-table-wrapper td{
    justify-content: center !important;
    text-align: center !important;
    width:100%;
  }

  .requests-request_category .col-icon {
    justify-content: center !important;
  }

  .requests-request_category .col-sector {
    font-size : 10px;
  }

  .requests-request_category .col-price {
    display : none;
  }

  .requests-request_category .col-description {
    display : none;
  }
  .requests-request_category .category-table-wrapper>td:last-child {
    display: none !important;
  }
  .requests-request_category .demandeList_datatable_nav {
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: thin !important;
  }

  .requests-request_category .tools-header {
    margin: 5px;
  }  
  
  .requests-request_category h2 {
    display: none;
  }

  .requests-request_category .category-table-wrapper {
    flex-wrap: nowrap;
    text-align: left;
    justify-content: space-between !important;
    align-items: center;
    padding: 1em !important;
  }

  /* PAGE PARAMETRES - TYPES DE DEMANDES */
  
  .requests-request_type .type-table-wrapper {
    display: flex;
    flex-wrap: nowrap !important;
    text-align: left !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 25px !important;
    padding: 1em !important;
  }
  .requests-request_type .demandeList_datatable_nav {
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: thin !important;
  }
  .requests-request_type .tools-header {
    margin: 5px;
  } 
  .requests-request_type h2 {
    display: none;
  }
  .requests-request_type .col-title{
    width: 100%;
  }
  .requests-request_type .col-title a{
    font-size:unset;
  }
  .requests-request_type .type-table-wrapper>td:nth-child(3),
  .requests-request_type .type-table-wrapper>td:last-child {
    display: none !important;
  }
  .requests-request_type .type-table-wrapper>td:nth-child(4){
    min-width: 100px;
  }
  .requests-request_type .type-table-wrapper img{
    width: 25px;
    height: 25px;
    max-width: none;
  }

  /* PAGE PARAMETRES - SECTEURS */

  #table_secteurs{
    max-width: none!important;
  }
  .requests-sectors thead {
    display: none;
  }
  .requests-sectors .demandeList_datatable_nav {
    overflow: auto;
    white-space: nowrap;
  }

  .requests-sectors .col-description {
    position: absolute;
    visibility: hidden !important;
    display: none !important;
  }
  .requests-sectors .sector-table-wrapper {
    display: flex;
    flex-direction: column!important;
    flex-wrap: wrap!important;
    height: 90px; 
    margin-bottom: 10px;
    border: 1px solid #ddd;
    
  }
  .requests-sectors .sector-table-wrapper .col-title {
    width: 65%;
    height: 56%; 
  }
  .requests-sectors .sector-table-wrapper>td {
    padding: 3px 0 !important;
  }
  .requests-sectors .buttons-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap:3px;
    align-self: end;
    font-size: 14px;
  }
  .requests-sectors .info-wrapper {
    display: none !important;
  }

  .request_body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: white;
    
  }
  /*.request_body_centre {
    margin: 16px;
    padding: 16px;
    width: auto;
  }*/
  .formEvaluate-container{
    margin-bottom: 170px;
    padding: 24px;
    /*background-color: white;*/
}
  .request-form{
    overflow-y: hidden;
  }
  .checkbox label .formEvaluate-labelImage {
    margin-bottom:-20px
  }
  .request_body_leftside {
    width: 100%;
    height: 100%;
    overflow-y: visible;
    padding: 16px 16px 0px 16px;
  }
  .request_body_rightside {
    width: 100%;
    height: 100%;
    padding: 6px 16px 0px 16px;
    border:none;
    margin-bottom: 250px;
    background-color: white;
  }

  .request_body_centre{
    width: 85%;
    padding: 16px;
    background-color: #ECEFF1;
  }

  .requests-requestfinal .request_body {
    padding: 0;
  }
  .request_footer {
    /*bottom: 100px;*/
    display: block;
    width: 100vw;
    padding: 16px;
    z-index: 10;
  }
  .hide-card{
    position: fixed;
    bottom: 0;
    left:0;
    width:100vw;
    z-index: 9999;
    height: 20vh;
  }

  .groupe_boutons {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2px;
    width: 100%;
    padding: 8px 8px 8px 8px;
  }
  .groupe_boutons_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2px;
    width: 100%;
  }
  .groupe_boutons_left>a{
    width: 100%;
  }
  .groupe_boutons_right>div>button{
    width: 100%;
  }

  .boutons_primaire.btn.primary.boutons {
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
    flex-basis: 100%;
    height: 55px;
  }
  .bouton_print {
    flex-basis: 100%;
    height: 55px;
    justify-content: center;
  }
  .bouton_retour {
    width: calc(50vw - 21px);
    height: 55px;
    padding: 16px 0px 16px 0px;
  }
  .bouton_retour svg {
    display: none;
  }
  .phone_fullwidth_button {
    flex-basis: 100%;
  }
  .btn-success, .btn-save {
    display: block;
    order: 3;
    width: calc(50vw - 21px);
    height: 55px;
    padding: 16px 0px 16px 0px;
  }
  .formEvaluate-wrapper {
    justify-content: flex-start;
    min-height: 0;
    /*background-color: var(--white);*/
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .formEvaluate-wrapper .info-container{
    overflow: hidden;
  }
  .formEvaluate-title {
    font-size: 17px;
    color: #3F3F3F;
  }
  .formEvaluate-text {
    font-size: 14px;
    color: var(--blue-gray-900);
  }
  .formEvaluate-checkboxes {
    flex-wrap: wrap;
    height:fit-content;
    width: 100%;
    margin-left: 0;
  }
  .input_remarque{
    background-color: white;
    width:100%;
  }
  .input_Evaluation{
    display: flex;
    height:fit-content
  }
  .info-container{
    height: 100%;
    overflow-y: scroll;
  }
  .formEvaluate-button {
    height: 55px;
  }
  #formEvaluate-buttons-flexbox {
    flex-direction: row-reverse;
  }
  .formEvaluate-labelImage {
    width: 100%;
  }
  .footer_modal_button {
    display: none !important;
  }
}
@media only screen and (max-width: 540px) {
  .requests-status .status-table-wrapper{
    flex-wrap: wrap;
  }
  .requests-status .status-table-wrapper td{
    width:30%!important;
  }
  .requests-status .status-table-wrapper>td:first-child{
    width:100%!important;
  }
 }

@media only screen and (max-width: 414px) {
  .requests-request_type .type-table-wrapper>td:nth-child(4){
    min-width: 65px;
  }
 }
 @media only screen and (max-width: 380px) {
  .requests-request_type .type-table-wrapper>td:nth-child(4){
    min-width: 55px;
  }
  .requests-request_type .type-table-wrapper td i {
    width: 80px !important;
  }
  .requests-request_type .type-table-wrapper{
    padding: 0 6px 0 6px !important;
  }
 }
@media only screen and (max-width: 310px) {
 .evaluation-wrapper{
  flex-direction: column;
 }
}