/**
 * Copyright (C) 2000 - 2021 Silverpeas
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * As a special exception to the terms and conditions of version 3.0 of
 * the GPL, you may redistribute this Program in connection with Free/Libre
 * Open Source Software ("FLOSS") applications as described in Silverpeas's
 * FLOSS exception. You should have received a copy of the text describing
 * the FLOSS exception, and it is also available here:
 * "https://www.silverpeas.org/legal/floss_exception.html"
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
/**mise en page générale pour les fieldset & formulaire de ce genre **/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #696969;
  text-align:center;
}

hr {
  background-color:#ddd;
  border:0;
  height:1px;
}

/************* personnalisation des formulaires$ ********************/

input,.selectize-control .selectize-input, select, button {
  vertical-align: middle;
  margin-top: 1px;
  margin-bottom: 1px;
  min-height: 32px;
  padding: 0 7px;
}

input,.selectize-control .selectize-input, select, textarea { color: #333; background-color: #fff; border:1px solid #aeb6b6; border-radius:0; box-sizing: border-box;}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url(arrow_down-grey.png);
  background-repeat: no-repeat;
  background-position: calc(100% - 7px) 50%;
  padding-right: 20px;
  height:32px;
}

#formAutodiag select {width: 100%;}

.selectize-control .selectize-input > input {
  min-height:32px !important;
}
input[type="file"] {border: 0; padding-left: 0; padding-right: 0; background-color: initial; }
input[type="submit"], button[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  background-color: #fff;
  min-height: 32px;
  -webkit-transition: background-color 100ms linear;
  -moz-transition: background-color 100ms linear;
  -o-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}
input[type="submit"]:hover, button[type="submit"]:hover {
  background-color: #ddd;
}

input[type="text"] {
  min-width:90px;
  width: 100%;
}
input[type="text"].hasDatepicker {
  width: 106px;
}
input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus, input[type="password"]:active,
input[type="date"]:focus, input[type="date"]:active,
input[type="number"]:focus, input[type="number"]:active,
select:focus, select:active,
textarea:focus, textarea:active {
  border: 1px solid #5ad;
  outline: none;
}
input::placeholder {
  color:#555;
}
input.search:focus{
  border: 0 ;
}

input.search{
  min-height:2em;
  line-height:2em;
}


.ui-dialog .ui-dialog-titlebar-close {
  min-height: 20px;
}

select[multiple=multiple], select[size]{background: #fff; padding-right: initial; padding-left: initial; height: auto;}
select[size='1']{
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url(arrow_down-grey.png);
  background-repeat: no-repeat;
  background-position: calc(100% - 7px) 50%;
  padding-right: 20px;
  padding-left: 0.5em;
  height: 32px;
}
fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}


input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  border-radius: 4px;
  height: 15px;
  min-height: 15px;
  width: 15px !important;
  background: #fff !important;
  border: 1px solid #ccc;
}
input[type="checkbox"]:hover,
input[type="checkbox"]:checked :hover {
  border: 1px solid #55aadd;
}
input[type="checkbox"]:checked {
  border: 1px solid #AAA;
  margin:0px;
  position: relative;
}
input[type="checkbox"]:checked:before {
  font-family: Comic Sans MS;
  width: 12px;
  height: 11px;
  border-radius: 4px;
  top: 0px;
  left: 0px;
  border:1px solid transparent;
  content: 'x';
  display: block;
  color:#001f44;
  font-size: 11px;
  position: absolute;
  line-height: 9px;
  text-align: center;
  border-top: 1px solid #DDD;
  border-left: 1px solid #DDD;
}
input[type="checkbox"]:checked:hover:before {
  border-top: 1px solid #bbe3f8;
  border-left: 1px solid #bbe3f8;
}

input.dateToPick, .ui-dialog .champ-ui-dialog input.dateToPick {
  width: 104px !important;
}
input.inputHour {
  min-width: 55px !important;
}
silverpeas-time-picker .txtlibform {
  vertical-align:middle;
}

#formEligibilite,#formAutodiag,
#formEvaluation {
  margin:auto;
  text-align:left;
  max-width:1200px;
}
.header{
  position:relative;
  text-align:center;
  height:110px;
  margin-top:1em;
  padding:1.5em 260px 0  146px;
}

.header img:first-child{
  position:absolute;
  top:0;
  left:0;
  height:110px;
}

.header img:last-child{
  position:absolute;
  top:0;
  right:0;
}

#formEligibilite h1,
#formAutodiag h1,
#formEvaluation h1 ,
#messageOK h1 {
  color: #000000 !important;
  font-size: 33px;
  font-weight: 400;
  margin-bottom: 20px;
}

.mandatory {
  margin:0 0.2em;
}

form .validation {
  clear:left;
  text-align:center;
  padding-bottom:2em;
}

.btn {
  background-color:#426bea;
  color:#FFF;
  border-radius:4px;
  padding:0.25em 1em;
  text-decoration:none;
  display: inline-block;
  margin: 0em 1em 1em 0;
}

#btn-siret {
  margin-left:1em;
}

h2 {
  color: #0f2ca4;
  font-weight: 500;
  font-size: 27px;
  height: 60px;
  margin: 0;
  margin-top: 0px;
  z-index: 2;
  position: relative;
  margin-top: 1em;
  padding-top: 20px;
}

#formEvaluation h3 {
  color: #0f2ca4;
  font-size: 16px;
  font-weight:500;
  padding-left: 1em;
  margin:0;
}
#formAutodiag #intro::after,
#formEligibilite #intro::after,
#formEvaluation h1::after,
#messageOK  h1::after{
  z-index:1;
  display:block;
  content:'';
  height: 80px;
  background-color: #d6e3f2;
  position:absolute;
  left:0;
  width:100%;
  margin-top:1em;
}

#nbAccoDoneArea {
  padding:0 0 1em 0;
}

#nbAccoDoneArea #firstAcco #nbAccoTotal,
#nbAccoDoneArea #otherAcco #nbAccoDone,
#nbAccoDoneArea #otherAcco #nbAccoLeft  {
  color:#426bea;
  font-weight:600;
}


#form-row-entrepriseMail label,
#form-row-autreInterlocuteur label,
#detailEntreprise #form-row-nbSalarieGroupePrecision label,
#detailEntreprise #form-row-caGroupePrecision label {
  width: 247px;
}

form{
  margin:1em 0 0;
  padding:0;
}

fieldset.skinFieldset {
  position:relative;
  margin:0 0  1%;
  padding-bottom:15px;
  min-height:80px;
  display:block;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.table {
  display:flex;
  margin-bottom:2em;
}

.cell {
  flex-basis:calc( 50% - 1em );
  flex: 1 1 0;
}

.table .cell:nth-child(2n+1){
  margin-right:2em;
}

.cell .field {
  width:98%;
}

.cell fieldset.skinFieldset{
  height:calc( 99% - 3em - 2px );
  padding: 3em 0 0 0;
  height: calc( 100% - 3em );
}

.skinFieldset label {
  color:#444;
}

.skinFieldset legend {
  color:#333;
  font-size:12px;
  padding-left:36px;
  margin-left:5px;
}

.skinFieldset legend.without-img {
  padding: 0px 10px;
}

.champs {
  display: table-cell;
  padding: 5px 15px 5px 0;
  min-width:180px;
}

.oneFieldPerLine,
.fields {
  margin: 10px 15px 0 0;
  position:relative;
  clear: both;
  max-width:100%;
  display:table;
}

#formAutodiag .fields {
  width:100%;
}

.field {
  height: auto;
  display: inline-table;
  position:relative;
  width:46%;
  padding:1em;
}

.oneFieldPerLine .field,
.field.entireWidth {
  width:98%;
}


label.txtlibform {
  padding-right:0;
}

span.txtlibform,
span.txtsublibform {
  padding-right:1px;
}

.field label,
.field .label{
  display: table-cell;
  padding: 10px 15px 5px 0;
  width: 138px;
  white-space: normal;
  vertical-align:top;
  line-height: 100%;
}

.field .champs label,
.field .champs .label{
  min-width: 100px;
  width: inherit;
}

#form-row-ville label {
  width:55px;
}

input#ville {
  width:186px;
}
.row {
  clear:both ;
}

.champs input, .champs select, .champs textarea {
  width: 90%;
  margin: 0;
}

.champs .select-user-group-container,
.champs .select-user-group-container .search-input-container {
  width: 100%;
  margin: 0;
}

.champs .select-user-group-container .search-input-container .selectize-control{
  width: 90%;
  background: #FFF;
}

.champs input[type="checkbox"] {
  width: auto;
  background-color:transparent;
}

#languageArea .champs select {
  width:auto;
}

input.dateToPick,
.ui-dialog .champ-ui-dialog input.dateToPick {
  width:68px;
  margin:0;
}

input.int-5,
.ui-dialog .champ-ui-dialog input.int-5 {
  width:36px;
  margin:0;
}

input.inputHour{
  width:48px;
  margin:0;
}

.champs input.checkbox, .champs input.radio,  .champs input[type="radio"]{
  width:13px;
  vertical-align:middle;
  margin:0;
  border:0;
  background-color:transparent;
}

.champs input.checkbox:first-child, .champs input.radio:first-child,
.champs input.radio.newline{
  margin-left:0;
  border:0;
}

/* Default forms look n feel */
.forms .skinFieldset {
  margin:1% 0 ;
  padding: 3em 10px 15px;
}

.forms .skinFieldset legend {
  color: #000000;
  font-size:20px;
  font-weight: 400;
  position: absolute;
  top:1em;
  left:0;
}



/* form & CKeditor */
.container-wysiwyg input,
.container-wysiwyg select
{
  width: auto;
}

.skinFieldset .champs .wysiwyg-fileStorage {
  width:90%;
  background-color:#FFF;
}

/* fieldset & Formulaire */

.skinFieldset .forms .fields > li {
  float:none;
}

.cell .skinFieldset .forms .fields .fieldInput {
  display: inline-block;
  margin-left: 0;
}

.skinFieldset .forms .fields .fieldInput select {
  max-width: 200px;
}

/**** notion de groupe de champs *****/
.group-field {
  clear:both;
  list-style-type:none;
  padding-top:0.5em
}
.group-field ul {
  padding:0;
  margin:0 0 0 5em;
}
.group-field  .group-field-name{
  border-bottom:1px solid #ccc;
  display:block;
  text-align:left;
  padding:0.5em 0;
  margin-bottom:0.5em;
  color:#1C94D4;
}

.group-field ul li:nth-child(odd){
  clear:left;
}

.group-field-description {
  padding:0;
  margin:0 0 0.5em;
}
form div.field ,
form li.field {
  margin:0 1em 1em 1em;
  padding: 0.75em 0 0.25em;
  border-bottom: 1px solid #efefff;
}


#form-row-adresse textarea {
  width:100%;
}
form .cell div.field {
  width: calc(50% - 2em - 4px);
  vertical-align: top;
  border-bottom: 1px solid #efefff;
  margin: 0 1em;
  padding: 0.75em 0 0.25em;
}
form .cell .field.entireWidth {
  width: calc( 98% - 1em - 4px);
}

form label span {
  display:block;
  color:#999;
  font-weight:400;
}
img.ui-datepicker-trigger{
  margin:0 0.5em;
  vertical-align:middle;
}
.txtnote{
  font-size:80%;
  color:#999;
  font-weight:400;
}
form label span:first-child {
  text-transform:uppercase;
}
.field_premierAccompagnement label {
  width:100%;
  display:block;
}
#form-row-appartenanceGroupe label,
#form-row-association label ,
#form-row-entrepriseFamiliale label ,
#form-row-gerantSalarie label ,
#evaluationDetails label,
#form-row-commentaires label ,
#form-row-evaluationAccompagnement label{
  width:200px !important;
}

#situationEntreprise .field label {
  width: 334px !important;
}
#situationEntreprise .field:has(textarea) label,
#form-row-utilisationDonnees label,
#contenuAccompagnement .field label,
#motivationsAccompagnement  .field label {
  display: block;
  width: auto !important;
}
#formAutodiag #form-row-caPrecision {
  width: 100%;
  display: flex;
  border: none;
}
#detailEntreprise #form-row-caPrecision label,
#situationEntreprise #form-row-fonctionRHNonDediee label,
#situationEntreprise #form-row-fonctionRHChoix label {
  width:auto !important;
}
#situationEntreprise textarea,
#contenuAccompagnement  textarea{
  width: 100%;
}
#formAutodiag #form-row-fonctionRH label{
  font-size: 18px;
  width: 400px !important;
}
#formAutodiag #form-row-cabinetConseilRH label,
#contenuAccompagnement .field label,
#form-row-motivationsAccompagnement label,
#form-row-autrePersonnesEngages label {
  font-size: 18px;
}

#form-row-evaluationAccompagnementSelect label {
  font-size: 20px;
  color:#000;
}
#formAutodiag .externalRH #form-row-cabinetConseilRH select,
#form-row-autrePersonnesEngages label {
  width: 100% !important;
}
#formAutodiag .externalRH .entireWidth label {
  width: 565px !important;
}
#formAutodiag .externalRH  select {
  width: 200px !important;
}

#formAutodiag #situationEntreprise > .txtlibform {
  padding:0 1em;
}

#form-row-personnesEngages label {
  width: 100%;
}
#form-row-personnesEngages table {
  width: 100%;
}
#form-row-autresPersonnesEngages label {
  width: 100%;
}
#form-row-autresPersonnesEngages table {
  width: 100%;
}

#formAutodiag #contenuAccompagnement .field,
#motivationsAccompagnement .field{
  width: 98%;
}

#personnesEngages .field{
  width: 98%;
  display: block;
}

#personnesEngages table .field{
  width: auto;
  margin: 1em;
  padding: 1em 0;
}


#form-row-cabinetConseilRH select{
  width:200px;
}
#detailEntreprise .field label, #detailEntreprise .field .label {
  width: 160px;
}
#detailEntreprise textarea,
#evaluationDetails textarea,
#form-row-commentaires textarea {
  width: calc( 100% - 5px - 1em );
}
/*evaluation */

#form-row-attentesInitiales label,
#form-row-retourAttentes label,
#form-row-interventionSujetSelect label,
#form-row-methodePrestataireSelect label,
#form-row-votreImplication label ,

#form-row-impactIntervention label,
#form-row-avisOutils label,
#form-row-parcoursRH label,
#form-row-impactInterventionEntreprise label,
#form-row-impactInterventionSalarie label,
#form-row-evaluationAccompagnementSelect label{
  width:auto !important;
  display: block;
}
#form-row-attentesInitiales textarea,
#form-row-retourAttentes textarea,
#form-row-votreImplication textarea,
#form-row-impactIntervention textarea,
#form-row-avisOutils textarea {
  width: 100%;
}

/* END ELLIGIBILITE */

#formEligibilite #nbAccoDoneArea,
#formEligibilite #form-row-representantFonctionAutre,
#formEligibilite #form-row-autreInterlocuteurFonctionAutre,
#formEligibilite #form-block-autreInterlocuteur,
#formEligibilite #form-row-siret,
#formEligibilite #informationBasic,
#formEligibilite #detailEntreprise,
#formEligibilite #situationEntreprise,
#formEligibilite #form-row-utilisationDonnees,
#formEligibilite #row-rgpd,
#formAutodiag #acco2ou3,
#formAutodiag #recapAcco1,
#formAutodiag #recapAcco2,
#formAutodiag #motivationNouvelAccoDetail1,
#formAutodiag #motivationNouvelAccoDetail2,
#formAutodiag #motivationNouvelAccoDetail3,
#formAutodiag #motivationNouvelAccoDetail4,
#formAutodiag #motivationNouvelAccoDetail5,
#formAutodiag #form-row-representantFonctionAutre,
#formAutodiag #form-row-autreInterlocuteurFonctionAutre,
#formAutodiag #form-block-autreInterlocuteur,
#formAutodiag #groupe,
#formAutodiag #form-row-fonctionRHChoix,
#formAutodiag #form-row-fonctionRHPersonneQuotite,
#formAutodiag #form-row-fonctionRHServiceETP,
#formAutodiag #form-row-fonctionRHAutre,
#formAutodiag #form-row-fonctionRHNonDediee,
#formAutodiag #form-row-fonctionRHNonDedieeAutre,
#formAutodiag #form-row-detailProblematique,
#formAutodiag #form-row-siret,
#formAutodiag #informationBasic,
#formAutodiag #detailEntreprise,
#formAutodiag #situationEntreprise,
#formAutodiag #contenuAccompagnement,
#formAutodiag #motivationsAccompagnement,
#formAutodiag #personnesEngages,
#formAutodiag #minimis,
#formAutodiag #form-row-utilisationDonnees,
#formAutodiag #row-rgpd,
#formEvaluation #informationBasic,
#formEvaluation #evaluationDetails,
#formEvaluation #evaluationAccesDispositif {
  display:none;
}

#form-row-representantFonctionAutre,
#form-row-commentConnuPrecision ,
#form-row-detailProblematique {
  padding: 0;
  margin: 0;
  border:0;
}

#form-row-commentConnuPrecision label {
  display: block;
}

#form-row-representantFonctionAutre label,
#form-row-representantFonctionAutre  input{
  float:left;
  width: auto;
}

#form-row-siret {
  border: 1px solid #CCC;
  background-color:#e5e5e5;
  padding:0.5em 1em 1em;
}

#form-row-siret {
  width: calc(100% - 2em);
  padding: 1em;
  margin: 0 0 1em;
}
#form-row-siret label{
  float: left;
  width: 302px;
}
#form-row-siret .fieldInput {
  display: flex;
}
#form-row-siret input {
  width: 200px;
  height: 39px;
}

#informationBasic {
  display: none;
  clear:left;
}

#form-row-evaluationAccompagnement label {
  margin-top:2em;
  color:#0f2ca4;
}

#form-row-utilisationDonnees {
  width:calc( 100% - 1em );
  padding:0.5em;
}

#sendingNOK {
  padding:1em;
  color:#FFF;
}

.fillingNOK {
  border: 1px dashed red !important;
}

#form-row-evaluationAccompagnement > .fieldInput > table:first-child > tbody:first-child > tr:first-child{
  height:68px;
}
#form-row-evaluationAccompagnement > .fieldInput > table:first-child > tbody:first-child > tr:first-child > td{
  transform: rotate(-45deg);
  width:68px;
  line-height: 1em;
}

#form-row-evaluationAccompagnement > .fieldInput > table:first-child > tbody:first-child > tr:first-child > td:first-child{
  transform: rotate(0);
  white-space: nowrap;
  width: auto;
}

#evaluationAccesDispositif label,
#formEvaluation #evaluationDetails label {
  display: block;
  width: 100% !important;
}


@media only screen and (max-width: 980px), only screen and (max-device-width: 980px){

  #intro,
  #situationEntreprise > div:first-child	,
  #form-row-premierAccompagnement,
  #nbAccoDoneArea{
    font-size:14px;
    line-height:14px;
  }
  #form-row-premierAccompagnement{
    padding:0;
  }
  #nbAccoDoneArea{ padding:1em;}

  #formEligibilite #btn-siret {
    position:absolute;
    bottom:0;
    left:0;
  }

  #formEligibilite #form-row-siret {
    padding-bottom:4em;
    position:relative;
  }

  #formAutodiag #btn-siret {
    position:absolute;
    bottom:0;
    left:0;
  }

  #formAutodiag #form-row-siret {
    padding-bottom:4em;
    position:relative;
  }

  .selectize-control .selectize-input, select, textarea, #form-row-adresse textarea {
    width:98%;
    font-size:18px;
  }
  input#ville{
    width:100%;
  }
  input#dateCreation{
    width:90px;
  }
  form .cell div.field,
  form .field {
    width: 98%;
    font-size:18px;
  }
  #form-row-siret {
    width:calc( 100% - 2em )  !important;
    float: none;
  }
  #form-row-siret  {
    display: flex;
  }
  .field label, .field .label {
    width:100%;
    display:block;
  }
  select#secteurActivite {
    width:250px;
  }
  .cell  {
    width:100%;
    display:block;
    flex-basis: 100%;
    margin-right:0 !important;
    margin-bottom: 2em;
  }
  .table {
    display:block;
    flex-direction: column;
  }
  .oneFieldPerLine, .fields, .field {
    display:block;
  }
  form .field {
    margin-bottom: 0;
    padding: 0.5em 1em;
  }
}


@media only screen and (max-width: 820px), only screen and (max-device-width: 820px){

  h2,
  #formEligibilite h1, #formEvaluation h1, #formAutodiag h1 {
    font-size:18px;
  }

  textarea {
    min-height:15em;
  }

  .header{
    position:relative;
    text-align:center;
    height:80px;
    margin-top:1em;
    padding:1.5em 155px 0  106px;
  }

  .header img {
    height:50px;
  }
  .header img:first-child{
    position:absolute;
    top:0;
    left:0;
    height:80px;
  }

  .header img:last-child{
    position:absolute;
    top:0;
    right:0;
    height:60px;
  }

}


@media only screen and (max-width: 500px), only screen and (max-device-width: 500px){

  .header{

    height:auto;
    margin-top:1em;
    padding:1em;
  }

  .header img {
    width: 96px;
    height: auto;
  }
  .header img:first-child{
    position:relative;
    top:inherit;
    left:inherit;
    height:auto;
  }

  .header img:last-child{
    position:relative;
    top:inherit;
    right:inherit;
    height:auto;
  }

}