#ui-datepicker-div{color: #FFF; font-size: 1.5em; z-index: 99; background-color: #000}

.candidatez{position: relative; width: 100%; padding: 0 15px;}

/********************************************************
 *
 .candidatez form{display: block;overflow: hidden; overflow-y: scroll; scroll-snap-type: y mandatory; height: 100vh}

.MyFullH{scroll-snap-align: start;}
 *******************************************************/
textarea:focus + span.effect::before{display:block; position: absolute; bottom: 1rem; right: 0; content:"Minimum 150 caractères";color:red; font-size: 0.8rem;}
textarea:valid + span.effect::before{display: none;}
.MyFullH{height: 100vh;display: flex; justify-content: center; align-items: center;position: relative;}
.formstep{max-width: var(--MaxSizeSmall); width: 100%;margin-top:var(--header_H);}

.stepbar{position: absolute;bottom: 0; height: 10px; background-color: var(--color2); width: 25%;  transform: translateX(-5px);transition-property: width; transition-duration: 0.3s; border-radius: 5px;}
#rayureForm, .candidatez h2{position: absolute; top:calc(var(--header_H) + 5vh);left: 0; pointer-events: none;}
#rayureForm{ max-width: 35%;/*width: calc(50px + ((100% - var(--MaxSizeSmall)) / 2))*/ transform: translateX(-50px);}
.candidatez h2{text-align: center; width: 100%}

.candidatez .etape2.animDone.MyFullH ~ #rayureForm,
.candidatez .etape2.animDone.MyFullH ~ h2,
.candidatez .etape2.animDone.MyFullH ~ .stepbar,
.candidatez .etape3.animDone.MyFullH ~ #rayureForm,
.candidatez .etape3.animDone.MyFullH ~ h2,
.candidatez .etape3.animDone.MyFullH ~ .stepbar{position: fixed;}

.candidatez .etape2.MyFullH ~ .etapeEnd.animDone ~ .stepbar{position: absolute;}
.candidatez .etape2.MyFullH ~ .etapeEnd.animDone ~ h2, 
.candidatez .etape2.MyFullH ~ .etapeEnd.animDone ~ #rayureForm{top: auto; bottom: calc(85vh - var(--header_H)); position: absolute;}

.etape2.MyFullH.animDone ~ .stepbar{ width: 50%; }
.etape3.MyFullH.animDone ~ .stepbar{ width: 75%; }
.etape4.MyFullH.animDone ~ .stepbar{ width: 100%; }


.step{position:absolute; right: 50px; bottom: 50px; font-size: 3em; color:#FFF; font-weight:500;text-align: center; border-radius: 100%; width: 5rem; height: 5rem; background-color: grey; line-height: 5rem}
.step strong{font-size: 1.7em; font-weight: inherit;}


.etape0:not(.animDone) ~ .etape1.MyFullH.animDone .step, .etape2.MyFullH.animDone .step, .etape3.MyFullH.animDone .step, .etape3.MyFullH.animDone ~ .etape4.MyFullH.animDone .step{position:fixed;}
.etape2.MyFullH.animDone .step, .etape3.MyFullH.animDone .step{opacity: 0;}




.etape0.MyFullH.animDone ~ .etape1.MyFullH{color: color:#FFF}

.etape1.MyFullH.animDone .step,
.etape1.MyFullH.animDone ~ .etape2.MyFullH.animDone .step,
.etape2.MyFullH.animDone ~ .etape3.MyFullH.animDone .step,
.etape3.MyFullH.animDone ~ .etape4.MyFullH.animDone .step{z-index: 2; opacity: 1; }

.etape1.MyFullH.animDone ~ .etape2.MyFullH.animDone .step{ z-index: 3;  opacity: 1;}

.etape0:not(.animDone) ~ .etape1.MyFullH.animDone:not(.lastStepForm) .step,
.etape1.MyFullH:not(.animDone) ~ .etape2.MyFullH.animDone .step,
.etape2.MyFullH:not(.animDone) ~ .etape3.MyFullH.animDone .step{z-index: 4;  opacity: 1;}

.candidatez .etape:not(.animDone) ~ .etape.MyFullH.animDone.lastStepForm .step{position: absolute;}

.candidatez .etape4.MyFullH.animDone ~ .buttonwrap{display: block; }

.candidatez p{font-size: 1rem;}

.formstep > *{margin-bottom: 15px;}
.formstep  .select{margin-top: 35px;}
.formstep > p{margin-top: 50px;}
a.suite {
    background: transparent;
}/*
  text-decoration: none;
	padding: 10px 20px;
  border:2px solid transparent;
  background-color:var(--color2);
  background-position: center;
  transition: background 0.25s;
  background-image: radial-gradient(circle,transparent 1%, var(--color2) 1%);
  background-position: center;
  background-size: 10%;
  background: transparent;
}

a.suite:hover{
  text-decoration: none;
  transition: background 0.5s;
  background-color: var(--color3);
  background-position: center;
  background-size: 15000%;
  color:var(--color2);
}

a.suite:active{
  transition: background 0s;
  background-color: var(--color3);
  background-size: 10%;
  background-image: radial-gradient(circle,transparent 1%, var(--color3) 1%);
}
*/
.buttonWrap{transition-property:opacity; transition-duration: .3s;}
.disable{opacity: 0;pointer-events: none;}



.candidatez .select select{ background-color: #000; border-color: rgba(255,255,255,0.2);border-bottom-color:var(--color2) ; color:  #FFF; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300DD00%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")}
.candidatez .required.checked::before{content: ""}
.candidatez label.case{ position: relative;display: inline-block; width:30px; height:30px; margin-right: 15px;background-color:transparent; border:1px solid #EFEFEF; text-align: center;font-size: 0.4rem !important;}

.candidatez .input{position: relative;}
.candidatez input[type="text"], .candidatez textarea, .candidatez input[type="email"], .candidatez input[type="number"], .candidatez input[type="tel"],
.candidatez .tokenfield{border: none; background: transparent; color: #FFF; border-bottom: 1px solid var(--color2);}
.candidatez textarea{height: 6em;resize: none;}
.candidatez span.effect::after,
.candidatez .inputMulti::after{background-color: #FFF !important;}
.candidatez .inputMulti.focus::after{width: 100%;}
.candidatez .inputMulti::after{display: block; content: ""; position: absolute; height: 2px; bottom: 0; width: 0; transition-property: width;transition-duration: 0.5s}


.candidatez input[type="radio"], .candidatez input[type="checkbox"]{display: none}
.candidatez input[type="checkbox"] + label::before, .candidatez input[type="checkbox"] + label::after,
.candidatez input[type="radio"] + label::before, .candidatez input[type="radio"] + label::after{z-index: 5;position:absolute; top:20%; left:20%;content:""; width: 0; height: 1em; background:var(--color2); transform-origin:0 -100%; transform:rotate(-315deg); }
.candidatez input[type="checkbox"]:checked + label::before,
.candidatez input[type="radio"]:checked + label::before{width:2em;transition-property: width; transition-duration: .15s}
.candidatez input[type="checkbox"] + label::after,
.candidatez input[type="radio"] + label::after{transform:rotate(-50deg);  margin-left: -1.2em; margin-top: 1.8em;}
.candidatez input[type="checkbox"]:checked + label::after,
.candidatez input[type="radio"]:checked + label::after{transition-delay:.15s;transition-property: width; transition-duration: .15s;width:6em;}

.candidatez .check_or_radioWrap{text-align: left;}
.candidatez .check_or_radioWrap>div{display: inline-block; width: 250px; vertical-align: top; white-space: nowrap; padding-left: 0px;text-align: left; margin-bottom: 15px; margin-right:25px }
.candidatez .check_or_radioWrap label{cursor: pointer; user-select: none; }
.candidatez .check_or_radioWrap p{padding: 0;padding-right: 0; padding-left: 0;}
.candidatez .check_or_radioWrap>div *:not(input){ white-space: normal;display: inline-block; vertical-align: middle; font-size: 1rem;}
.candidatez .check_or_radioWrap .label{font-size: 1.5rem; margin-bottom: 15px; margin-top: 50px; font-weight: 500;}
.candidatez .check_or_radioWrap label + label{max-width: 205px}

.ui-menu{color: #FFF; background-color: rgba(0, 0, 0, .9);}
.ui-menu-item{font-size: 1rem; color: rgba(255, 255, 255, 0.4); padding: 5px; margin: 5px;}
.ui-menu-item:hover,
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{
  color: var(--color2); padding: 5px; margin: 5px;

}


.inputFile{text-align: left;border-bottom: 1px solid var(--color2); }
.inputFile label{user-select: none; display: inline-block; font-size: 1.2rem; padding: 1em;cursor: pointer;}
.inputFile input{display: none;}
.inputFile label strong{color: var(--color2)}
.inputFile .space4ico{/*background: #000;  padding: 0 15px;*/;text-align: right; position: relative; bottom: -1px;float: right; font-size: 1.3em; opacity: 0; transition-property: opacity; transition-duration: .3s;}
.inputFile .space4ico .txt{display: inline-block; max-width: 25em;}
.inputFile .space4ico.show{opacity: 1;}
.inputFile .space4ico .ico{margin-left: 15px;content: ""; width: 45px; height: 50px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-image: url("../_img/ico_file_txt.svg");
  
  /********************************************************
   *              
   *******************************************************/
  
 vertical-align: middle;width: 55px;background-color: #000;background-position: right; 
}
.inputFile .space4ico .ico.pdf{background-image: url("../_img/ico_file_pdf.svg")}
.inputFile .space4ico .ico.jpg, .inputFile .space4ico .ico.gif, .inputFile .space4ico .ico.png,
.inputFile .space4ico .ico.webp{background-image: url("../_img/ico_file_img.svg")}
.inputFile .space4ico .ico.mov, .inputFile .space4ico .ico.mp4, .inputFile .space4ico .ico.m4v,
.inputFile .space4ico .ico.avi{background-image: url("../_img/ico_file_mov.svg")}
.inputFile .space4ico .ico.mp3, .inputFile .space4ico .ico.wav{background-image: url("../_img/ico_file_son.svg")}
.inputFile .space4ico .ico.bug{background-image: url("../_img/ico_file_error.svg")}

.candidatez .tokenfield{text-align: left;}
.candidatez .token{border: 1px solid rgba(255,255,255,0.2); padding: 5px;border-radius: 4px; margin-right: 5px; font-size: 1.1em;}
.candidatez .token a{color: rgba(255, 255, 255, .7) ; text-decoration: none; margin-left: 7px; }
.candidatez .tokenfield .token, .candidatez .tokenfield .token-input{display: inline-block;vertical-align: middle;}
.candidatez .tokenfield .token-input{border: none;}


.plusInfos{white-space: nowrap;}
.plusInfos > div{display: inline-block; vertical-align: middle;}
.plusInfos .radios2{ font-size: 0.8rem; width: 9em;position: relative; padding: 5px; }
.plusInfos .radios2::after{content: "";display: block; position: absolute; top:-0.2em;left:-0.2em; width: calc(100% + 0.4em);height: calc(100% + 0.4em);background-color: rgba(255,255,255,0.15); border-radius: 20px;z-index: -2;box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px rgba(255, 255, 255, 0.15);}
.plusInfos .inputFileOrText{width: calc(100% - 9em);position: static}
.plusInfos .radios2 label {position: relative;user-select: none; transition-property: color; transition-duration: .3s;font-weight: 500;color: rgba(255,255,255,0.5);text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);cursor: pointer;text-align: center;width: 50%;display: inline-block; height: 100%;}
.plusInfos .radios2 label::after {display: block;content: "";position: absolute;top: -50%;height: 200%;width: 105%;left: -2.5%;}
.plusInfos .radios2 .glissiere{position: absolute; left:0; bottom: 0; width: 4.5em; height: calc(1em + 10px); border-radius: 15px; background-color: var(--color2); transition-property:left; transition-duration: .3s; z-index: -1;}
.plusInfos .radios2 input:nth-child(1):checked ~ .glissiere{ left:0 ;}
.plusInfos .radios2 input:nth-child(3):checked ~ .glissiere{ left:4.5em ;}
.plusInfos .radios2 input:checked + label{color: #FFF;}
.plusInfos {border-bottom: 1px solid var(--color2);}
.candidatez .plusInfos input{border-bottom: none;}
.plusInfos .inputFile{border-bottom: none;}
.candidatez .inputFileOrText input, .candidatez .inputFileOrText label{font-size: 1.2rem;line-height: 1.2rem; height: 3.5rem;}
.candidatez .inputFileOrText .effect{bottom: -1px;}

.candidatez .disable{opacity: 0; pointer-events: none}
.candidatez .btn{transition-property: opacity; transition-duration: 0.3s; width: 100%; text-align: center;max-width:var(--MaxSizeSmall); margin-top: 2rem}

.candidatez .select select, .candidatez .select .nice-select, .candidatez textarea, .candidatez input[type="text"], .candidatez input[type="number"], .candidatez input[type="tel"], .candidatez input[type="email"]{text-overflow: ellipsis;border-radius:0;  width: 100%; padding: 15px; font-size: 1.8em; font-family: inherit}
.candidatez button.buttonWrap{ font-size: 2em; background: none; border: none; margin-top: 50px}
.candidatez .select select{ -moz-appearance: none;-webkit-appearance: none;appearance: none;
  background: #fff;background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;background-position: right .7em top 50%, 0 0;background-size: .85em auto, 100%;}
.candidatez .select select::-ms-expand {display: none;}
.candidatez .select select:focus{outline: none;}

.btn button{background: transparent; font-size: 1em; font-family: inherit; border: none; color: inherit;}

.check_or_radio>div.input.other{font-size: 0.8em; margin-left: 10px}
.check_or_radio>div.input.other input{padding: 10px}
@media screen and (max-width:600px) {
    .candidatez .check_or_radio > div{width: 50% !important;}
    .candidatez .etape2.animDone.MyFullH ~ #rayureForm, .candidatez .etape2.animDone.MyFullH ~ h2, .candidatez .etape3.animDone.MyFullH ~ #rayureForm, .candidatez .etape3.animDone.MyFullH ~ h2{position: absolute !important;}
    .candidatez{padding-top: 75px;}
    .candidatez h2{top: 10px;}
    .candidatez .check_or_radio label:not(.case){width: calc( 100% - 1.5em)}
    .candidatez .multiselect .check_or_radio label:not(.case){width: calc( 100% - 5em)}
    .candidatez .MyFullH{height: auto; padding: 5px 0;padding-bottom: 30px;}
}