@charset "UTF-8";

/*!
 * ConvergenWeb - info@convergenceweb.ch
 * vanilla-forme.css 
 * Copyright (c) 2021 ConvergenceWeb
 */

.trame-formulaire {
  width: 50vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: nowrap;
}
.form-container {
  width: 50vw;
  height: 100vh;
  padding: 5vh 10vw 0 7.5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: nowrap;
}
.form-container .column-50,
.form-container .column-100 {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
.form-container .column-100 {
  width: 100%;
}
.form-container .column-50 {
  vertical-align: top;
  width: 50%;
  margin-bottom:1vh;
}

.form-container .wrapped-label {
  display: inline-block;
  white-space: normal;
  max-width: 90%;
}
.form-container .radio-set {
  margin-bottom: 1em;
}
.form-container .radio-set label {
  margin-left: 20px;
}
.form-container .left {
  text-align: left;
}
.form-container .right {
  text-align: right;
}
.form-container .center {
  text-align: center;
}
.form-container label {
  white-space: nowrap;
}
/* Styling form input elements and selects */
.vanilla-form {
  font-family: 'Inter', sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape while allowing user zoom */

}
.vanilla-form a {
  text-decoration: none;
  color: #bf0d3e;
}
.vanilla-form input,
.vanilla-form textarea,
.vanilla-form select {
  font-family: 'Inter', sans-serif;
  font-size:2vh !important;
  font-weight: 300;
  display: block;
  width: 100%;
  border-radius: 20vh !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  color: #3d3d3f;
  margin-bottom: 2.5vh;
  padding: 1.5vh 1.5vh 1.5vh;
  background-color: #ffffff;
  opacity: 0.7;
  border: 1px solid #cecece;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -moz-box-shadow: 0 0 0px #dddddd;
  -webkit-box-shadow: 0 0 0px #dddddd;
  box-shadow: 0 0 0px #dddddd;
  -webkit-font-smoothing: antialiased !important;
  box-shadow: 0 3px 60px rgb(57 73 76 / 55%)!important;
}

.vanilla-form input:focus,
.vanilla-form textarea:focus,
.vanilla-form select:focus,
.vanilla-form input:active,
.vanilla-form textarea:active,
.vanilla-form select:active {
  outline: none;
  border-color: #bf0d3e;
  -moz-box-shadow: 0 0 0px #bf0d3e;
  -webkit-box-shadow: 0 0 0px #bf0d3e;
  box-shadow: 0 0 0px #bf0d3e;
}

.vanilla-form input.error,
.vanilla-form textarea.error,
.vanilla-form select.error {
  border-color: #FF5722;
  border-width: 2px;
}
.vanilla-form input[type="checkbox"],
.vanilla-form input[type="radio"],
.vanilla-form input[type="button"],
.vanilla-form input[type="submit"],
.vanilla-form input[type="reset"],
.vanilla-form button {
  display: inline-block;
  width: auto !important;
  margin-top:2vh;
}
.vanilla-form input[type="button"],
.vanilla-form input[type="submit"],
.vanilla-form input[type="reset"],
.vanilla-form button {
  color: #ffffff;
  background-color: rgba(255, 255, 255,0);
  border-color: rgba(255, 255, 255,1);
}
.vanilla-form input[type="button"]:focus,
.vanilla-form input[type="submit"]:focus,
.vanilla-form input[type="reset"]:focus,
.vanilla-form button:focus,
.vanilla-form input[type="button"]:active,
.vanilla-form input[type="submit"]:active,
.vanilla-form input[type="reset"]:active,
.vanilla-form button:active {
  background-color: #bf0d3e;
  border-color: #bf0d3e;
}
.vanilla-form input[type="submit"] {
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -ms-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
.vanilla-form input[type="submit"].state-success {
  background-color: #3d3d3f;
  border-color: #3d3d3f;
  width: 130px;
}
.vanilla-form input[type="submit"].state-error {
  background-color: #FF5722;
  border-color: #FF5722;
  width: 120px;
}
.vanilla-form input[type="submit"].state-initial {
  width: auto;
}
.vanilla-form textarea {
  height: 15vh;
  resize: vertical;
  border-radius: 1vh 20vh 20vh 20vh !important;
}
.vanilla-form input[type="radio"],
.vanilla-form input[type="checkbox"] {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  height: 10px;
}
.vanilla-form input[type="radio"] + span,
.vanilla-form input[type="checkbox"] + span {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border: 1px solid #cecece;
  text-align: center;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.vanilla-form input[type="radio"] + span::after,
.vanilla-form input[type="checkbox"] + span::after {
  content: "";
  display: inline-block;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;
  transition: all 200ms;
}
.vanilla-form input[type="radio"]:focus + span,
.vanilla-form input[type="checkbox"]:focus + span,
.vanilla-form input[type="radio"]:active + span,
.vanilla-form input[type="checkbox"]:active + span {
  border-color: #bf0d3e;
}
.vanilla-form input[type="radio"]:checked + span::after,
.vanilla-form input[type="checkbox"]:checked + span::after {
  opacity: 1;
}
.vanilla-form input[type="radio"].error + span,
.vanilla-form input[type="checkbox"].error + span {
  border-color: #FF5722;
  border-width: 2px;
}
.vanilla-form input[type="radio"] + span {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  -moz-box-shadow: 0 0 5px #dddddd;
  -webkit-box-shadow: 0 0 5px #dddddd;
  box-shadow: 0 0 5px #dddddd;
}
.vanilla-form input[type="radio"] + span::after {
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  background-color: #bf0d3e;
}
.vanilla-form input[type="radio"]:checked + span::after {
  border: 0.2em solid #ffffff;
}
.vanilla-form input[type="checkbox"] + span {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0 0 5px #dddddd;
  -webkit-box-shadow: 0 0 5px #dddddd;
  box-shadow: 0 0 5px #dddddd;
}
.vanilla-form input[type="checkbox"] + span::after {
  height: 45%;
  width: 75%;
  background-color: transparent;
  border: 0 solid #bf0d3e;
  vertical-align: bottom;
  -webkit-transform: rotate(-45deg) translate(50%, -75%);
  -moz-transform: rotate(-45deg) translate(50%, -75%);
  -ms-transform: rotate(-45deg) translate(50%, -75%);
  -o-transform: rotate(-45deg) translate(50%, -75%);
  transform: rotate(-45deg) translate(50%, -75%);
}
.vanilla-form input[type="checkbox"]:checked + span::after {
  border-left-width: 0.2em;
  border-bottom-width: 0.2em;
}
.vanilla-form label.custom-select {
  position: relative;
  display: block;
  margin-bottom: 0;
}
.vanilla-form label.custom-select option{
  border-radius:20vh !important;
}
.vanilla-form label.custom-select span {
  position: absolute;
  display: inline-block;
  text-align: center;
  right: 0;
  top: 0;
  height: 100%;
  width: 6vh;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #3d3d3f;
  border: 1px solid #cecece;
  border-radius: 20vh;
}

.vanilla-form label.custom-select span::after {
  margin: 0.3vh 0 0 0;
  content: "";
  display: inline-block;
  width: 25%;
  height: 25%;
  -webkit-transform: rotate(-45deg) translate(-80%, 80%);
  -moz-transform: rotate(-45deg) translate(-80%, 80%);
  -ms-transform: rotate(-45deg) translate(-80%, 80%);
  -o-transform: rotate(-45deg) translate(-80%, 80%);
  transform: rotate(-45deg) translate(-80%, 80%);
  border: 0 solid #ffffff;
  border-left-width: 0.25em;
  border-bottom-width: 0.25em;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
.vanilla-form label.custom-select select:active + span,
.vanilla-form label.custom-select select:focus + span {
  background-color: #f11d1d;
  border: 1px solid #f11d1d;
}
.vanilla-form label.custom-select select.error + span,
.vanilla-form label.custom-select select.error:active + span,
.vanilla-form label.custom-select select.error:focus + span {
  background-color: #e9796b;
  border: 1px solid #e2513f;
}
.vanilla-form .notification-box {
  display: block;
  padding: 1.5rem;
  margin: 1.5rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #ffffff;
  text-align: center;
  -webkit-transition: all 600ms;
  -moz-transition: all 600ms;
  -ms-transition: all 600ms;
  -o-transition: all 600ms;
  transition: all 600ms;
}
.vanilla-form .notification-box.show-error,
.vanilla-form .notification-box.show-success {
  border: 1px solid #FF5722;
  background-color: #FF5722;
  max-height: 50vh;
  overflow: auto;
  opacity: 1;
}
.vanilla-form .notification-box.show-error {
  border-color: #FF5722;
  background-color: #FF5722;
}
.vanilla-form .notification-box.show-success {
  border-color: #2fa94f;
  background-color: #2fa94f;
}
.vanilla-form a:link {
  text-decoration: none;
  color: #bf0d3e;
}
.vanilla-form a:visited {
  text-decoration: none;
  color: #bf0d3e;
}
.vanilla-form a:hover {
  text-decoration: none;
  color: #bf0d3e;
}
.vanilla-form a:active {
  text-decoration: none;
  color: #bf0d3e;
}

/******************************** BOOTSTRAP MEDIA QUERIES ********************************/
/*Screen portrait */

@media screen and (max-width: 1199px) and (orientation: portrait){
.trame-formulaire {
  width: 80vw;
  height: auto;
  margin:0 10vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: nowrap;
}
.form-container {
    display: block;
	height:auto;
    max-width: 180%;
    width: 100%;
    margin: 5vh auto 10vh;
	padding:0;
}
.vanilla-form input {
  width: 80vw;
  margin-bottom: 3vh !important;
  font-size:3.5vw;
  padding: 2.5vw 3vw;
}

.vanilla-form textarea {
  width: 80vw;
  height: 25vw;
  margin-bottom: 3vh !important;
  font-size:3.5vw;
  padding: 2.5vw 3vw;
}

.vanilla-form select {
  width: 80vw;
  margin-bottom: 3vh !important;
  font-size: 4vw !important;
  padding:2.5vw 3vw;
}
.form-container .column-50 {
  vertical-align: top;
  width: 80%;
  margin-bottom:5vh;
}
.vanilla-form input[type="checkbox"],
.vanilla-form input[type="radio"],
.vanilla-form input[type="button"],
.vanilla-form input[type="submit"],
.vanilla-form input[type="reset"],
.vanilla-form button {
  display: inline-block;
  width: 25vw !important;
  margin-top:4vh;
}
.vanilla-form label.custom-select span {
  position: absolute;
  display: inline-block;
  text-align: center;
  right: 0;
  top: 0;
  height: 100%;
  width: 9.5vw;
  max-width: 100%;
  border: 1px solid #cecece;
  border-radius: 20vw;
  
} 
.vanilla-form label.custom-select span::after {
  width: 3vw;
  height: 3vw;
  border-left-width: 0.4vw;
  border-bottom-width: 0.4vw;
  margin-top:-1vw;
  margin-bottom:0;
}
.form-container .column-50, .form-container .column-100 {
    padding: 0;
}
label {
    margin-bottom: 0px !important;
}	
}

@media screen and (max-width: 767px) and (orientation: portrait) {
.vanilla-form label.custom-select span {
    width: 10.5vw;
}
.vanilla-form label.custom-select span::after {
    border-left-width: 0.4vw;
    border-bottom-width: 0.4vw;
    margin-top: 0;
    margin-bottom: 3vw;
}
.vanilla-form textarea {
    height: 35vw;
	font-size: 4vw !important;
}
.vanilla-form input {
    font-size: 4vw !important;
}	
}

@media screen and (max-width: 767px) and (max-height: 570px)and (orientation: portrait) {
.vanilla-form label.custom-select span::after {

    margin-top: 0;
    margin-bottom: 2vw;
}
.vanilla-form textarea {
    height: 35vw;
}
}

@media screen and (max-width: 767px) and (min-height: 810px)and (orientation: portrait) {
.vanilla-form label.custom-select span {
    width: 12vw;
}
.vanilla-form textarea {
    height: 35vw;
}
}

@media screen and (min-width: 551px)and (max-width: 767px) and (orientation: portrait) {
.vanilla-form input {
    padding: 3vh;
}
.vanilla-form select {
    padding: 3vh;
}
.vanilla-form label.custom-select span {
    right: 0;
    top: 0;
    width: 12vw;
}	
}

/*Screen landscape */

@media screen and (max-width: 1199px) and (orientation: landscape) {
.vanilla-form textarea, .vanilla-form select {
    font-size: 2vw !important;
    font-weight: 300;
    margin-bottom: 2.5vh;
    padding:2vh;
}
.vanilla-form input {
	font-size: 2vw !important;
    padding: 1.5vh;
	margin-bottom: 2vh;
}
.vanilla-form select {
    padding: 2vh;
}
.form-container .radio-set {
    margin-bottom: 2vh;
}
.vanilla-form textarea {
    height: 25vh;
    resize: vertical;
    border-radius: 1vh 20vh 20vh 20vh !important;
}
.vanilla-form label.custom-select span {
    right: 0;
    top: 0;
    width: 8vw;
}
.vanilla-form label.custom-select span::after {
    width: 25%;
    height: 25%;
    border-left-width: 0.2em;
    border-bottom-width: 0.2em;
}	
.form-container {
	max-width: 100%;
    width: 100%;
	height:auto;
    padding: 0 10vw 0 5vw;
    display: flex;
    margin-bottom: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.vanilla-form input[type="checkbox"], .vanilla-form input[type="radio"], .vanilla-form input[type="button"], .vanilla-form input[type="submit"], .vanilla-form input[type="reset"], .vanilla-form button {
    display: inline-block;
    width: auto !important;
    margin-top: 0vh;
}
}

/* Xs Screen landscape */
@media screen and (max-width: 767px) and (orientation: landscape) {
.form-container {
    max-width: 100%;
    width: 100%;
    display: flex;
    margin-bottom: 10vh;
	margin-top:15vh;
	padding: 0 10vw;
}

.vanilla-form label.custom-select span::after {
	margin: 0 0 0.8vh 0;
    width: 25%;
    height: 27%;
    border-left-width: 0.2em;
    border-bottom-width: 0.2em;
}
.vanilla-form label.custom-select span {
    right: 0;
    top: 0;
    width: 7vw;
}	
.vanilla-form select {
    padding: 5vh;
}
.vanilla-form input {
    font-size: 5vh !important;
    padding: 2vh 3vw;
    margin-bottom: 3vh;
}
.vanilla-form textarea, .vanilla-form select {
    font-size: 5vh !important;
    padding: 2vh 3vw;
    margin-bottom: 3vh;
}
.vanilla-form textarea {
    height: 45vh;
}
}

@media screen and (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.vanilla-form label.custom-select span {
    width: 6vw;
}	
}


/* Sm Screen landscape iPhone 11, 12 pro & pro max */
@media screen and (min-width: 812px) and (max-width: 926px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.trame-formulaire {
    width: 50vw;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: nowrap;
}
.form-container {
    max-width: 100%;
    width: 100%;
	height: auto;
    padding: 0 10vw 0 5vw;
	margin:0 0 0 0;
	display: flex;
}
.vanilla-form textarea, .vanilla-form select {
    font-size: 2vw !important;
    font-weight: 300;
    margin-bottom: 2.5vh;
    padding: 2vh 3vw;
}
.vanilla-form label.custom-select span::after {
	margin: 0 0 0.5vh 0;
    width: 25%;
    height: 25%;
    border-left-width: 0.2em;
    border-bottom-width: 0.2em;
}
.vanilla-form label.custom-select span {
    right: 0;
    top: 0;
    width: 5vw;
}	
.vanilla-form select {
   padding: 2vh 3vw;
}
.vanilla-form input {
    font-size: 2vw !important;
    padding: 2vh 3vw;
    margin-bottom: 2vh;
}
.bycw-trame-footer {
    position: absolute;
    bottom: 2vh;
    padding-left: 2vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
	.text-footer-first {
		font-size: 1vh!important;
}
}


/******************************** Lg BOOTSTRAP MEDIA QUERIES ********************************/

@media screen and (min-width: 1200px) {


}

/* Lg Screen iPad Pro landscape*/
@media only screen and (min-width: 1366px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.form-container {
    margin: 10vh 0 0;
	padding: 0 10vw 0 2.5vw;
}
.vanilla-form label.custom-select span::after {
    width: 30%;
    height: 28%;
}
}

/* Lg Screen HD*/
@media screen and (min-width: 1601px) and (max-width: 1920px) {

}

@media screen and (min-width: 1601px) and (max-width: 1920px) and (min-height: 1100px) {
.vanilla-form label.custom-select span::after {
  width: 28%;
  height: 27%;
}
}

/* Lg Screen 2K */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
.vanilla-form label.custom-select span::after {
  width: 28%;
  height: 28%;
}	
}