input {
  outline: none;
}
form {
  &.center-form > *,
  &.left-form .form-group {
    max-width: 600px;
  }

  &.center-form > * {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
  }
  .form-group {
    margin-bottom: 10px;
  }
}
.control-label,
label {
  font-weight: normal;
  -webkit-transition: color 0.25s 0s ease-in-out;
  -moz-transition: color 0.25s 0s ease-in-out;
  -o-transition: color 0.25s 0s ease-in-out;
  transition: color 0.25s 0s ease-in-out;
}
.form-control-sm,
.form-control-md,
.form-control-lg,
.form-control,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="color"],
input[type="number"],
input[type="search"],
[contenteditable].form-control,
[contenteditable].form-control-sm,
[contenteditable].form-control-md,
[contenteditable].form-control-lg {
  -webkit-transition: border-color 0.25s ease-in-out;
  -moz-transition: border-color 0.25s ease-in-out;
  -o-transition: border-color 0.25s ease-in-out;
  transition: border-color 0.25s ease-in-out;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 100%;
  min-width: 160px;
  padding: 5px;
  color: #333;
  text-align: left;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #ffffff;
  background-clip: padding-box;
  line-height: 1.15;
  outline: none;

  &[hidden],
  &.hidden{
    display:none;
  }

  ~ .control-message{
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    z-index: 50;
    background: #ffffff;
    display: flex;
    align-items: center;
    line-height: 1.15;
  }

  ~ .control-label{
    z-index: 60;
  }


  &::-moz-placeholder,
  &::-ms-input-placeholder,
  &::-webkit-input-placeholder {
    color: #bbbbbb;
    opacity: 1;
  }

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &:focus-within:not([disabled]):not([readonly]),
  &:active:not([disabled]):not([readonly]) {
    box-shadow: 0 0 0 2px rgba(esprit-sentiers(green), .5);
    border-color: esprit-sentiers(green);
  }

  &.invalid {
    box-shadow: 0 0 0 2px rgba(colors(error), .5);
    border-color: colors(error);
  }

  &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #ffffff inset,  !important;
    -moz-box-shadow: 0 0 0 100px #ffffff inset !important;
    box-shadow: 0 0 0 100px #ffffff inset !important;
    &:focus{
      -webkit-box-shadow: 0 0 0 100px #ffffff inset, 0 0 0 2px rgba(esprit-sentiers(green), .5)  !important;
      -moz-box-shadow: 0 0 0 100px #ffffff inset, 0 0 0 2px rgba(esprit-sentiers(green), .5) !important;
      box-shadow: 0 0 0 100px #ffffff inset, 0 0 0 2px rgba(esprit-sentiers(green), .5) !important;
    }
  }
}

.form-control-sm,
.form-control-sm ~ .control-message{
  font-size: 0.8em;
  line-height: 1;
}

.form-control-md,
.form-control,
.form-control-md ~ .control-message,
.form-control ~ .control-message {
  font-size: 1em;
  line-height: 1.15;
}

.form-control-lg,
.form-control-lg ~ .control-message {
  font-size: 1.15em;
}
textarea.form-control-sm {
  min-height: 65px;
}

textarea.form-control,
textarea.form-control-md {
  min-height: 90px;
}
textarea.form-control-lg {
  min-height: 150px;
}

.form-group.radio-group,
.form-group.checkbox-group {
  display: flex;
  align-items: center;
}

.form-group {
  &.invalid{
    input,
    textarea,
    .form-control,
    .form-control-sm,
    .form-control-md,
    .form-control-lg,
    .control-message{
      border-color: colors(error) !important;
    }

    .control-label,
    .control-message{
      color: colors(error) !important;
    }
  }

  &.valid{
    .form-control,
    .form-control-sm,
    .form-control-md,
    .form-control-lg,
    .control-message {
      border-color: colors(success) !important;
    }

    .control-label,
    .control-message{
      color: colors(success) !important;
    }
  }
}
.form-group.label-in {
  position: relative;
  .form-control,
  .form-control-sm,
  .form-control-md,
  .form-control-lg {
    padding-left: 17px;
    padding-right: 17px;
    ~ .control-label {
      color: #575756;
      left: 17px;
    }

    ~ .control-message{
      padding-left: 17px;
      padding-right: 17px;
      width: 100%;
    }

    &:active:not([disabled]):not([readonly]),
    &:focus:not([disabled]):not([readonly]) {
      ~ .control-label {
        color: esprit-sentiers(green);
      }
    }
  }

  .form-control-sm,
  .form-control-sm ~ .control-message{
    padding-top: 12px;
    padding-bottom: 2px;
    ~ .control-label {
      font-size: 10px;
    }
  }

  .form-control,
  .form-control-md,
  .form-control ~ .control-message,
  .form-control-md ~ .control-message,
  .PhoneInput {
    padding-top: 20px;
    padding-bottom: 2px;
    ~ .control-label {
      font-size: 13px;
    }
  }

  .form-control-lg,
  .form-control-lg ~ .control-message {
    padding-top: 22px;
    padding-bottom: 5px;
    ~ .control-label {
      font-size: 15px;
    }
  }

  .control-label {
    position: absolute;
    top: 0;
    left: 0;
    transition: color 0.2s ease-in-out;
  }
  &.invalid .form-control,
  &.invalid .form-control-sm,
  &.invalid .form-control-md,
  &.invalid .form-control-lg,
  .form-control.invalid,
  .form-control-sm.invalid,
  .form-control-md.invalid,
  .form-control-lg.invalid {
    ~ .control-label {
      color: colors(error);
    }
  }
}

input[disabled],
input[read-only],
.form-control[disabled],
.form-control[readonly],
.form-control-sm[disabled],
.form-control-sm[readonly],
.form-control-md[disabled],
.form-control-md[readonly],
.form-control-lg[disabled],
.form-control-lg[readonly],
fieldset[disabled] .form-control,
fieldset[disabled] .form-control-sm,
fieldset[disabled] .form-control-md,
fieldset[disabled] .form-control-lg,
fieldset[disabled] input {
  opacity: 0.5;
}
input[disabled],
.form-control[disabled],
.form-control-sm[disabled],
.form-control-md[disabled],
.form-control-lg[disabled],
fieldset[disabled] .form-control,
fieldset[disabled] .form-control-sm,
fieldset[disabled] .form-control-md,
fieldset[disabled] .form-control-lg,
fieldset[disabled] input {
  cursor: not-allowed;
}

textarea.form-control,
textarea.form-control-sm,
textarea.form-control-md,
textarea.form-control-lg {
  height: auto;
}


.form-group .feedback,
.has-error {
  margin: 0;
  margin-top: 3px;
  font-size: 0.85em;
  line-height: 1.1;
}

.form-group.invalid .feedback,
.has-error {
  color: colors(error);
}

.form-group.valid .feedback,
.has-success {
  color: colors(success);
}


/*  --------------------------------------------------------------------------------------------------*/
/*  ---------------------------------- RADIOS AND CHECKBOXES -----------------------------------------*/
/*  --------------------------------------------------------------------------------------------------*/
.checkbox,
.radio {
  display: flex;
  flex-flow: row;
  align-items: center;
  padding: 10px 0;

  label {
    min-height: 23px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}

.radio-inline,
.checkbox-inline {
  display: flex;
  align-items: center;

  .form-group,
  .radio-group,
  .checkbox-group {
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
}

.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
  position: relative;
  margin-top: 6px;
  margin-right: 4px;
  vertical-align: top;
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="radio"]:focus,
.radio input[type="radio"]:focus,
.radio-inline input[type="radio"]:focus {
  outline: none;
}

input[type="radio"]:before,
input[type="radio"]:after{
  content: "";
  display: block;
  border-radius: 50%;
  transition: 240ms;
  width: $radio-checkbox-width-lg;
  height: $radio-checkbox-width-lg;
}

input[type="radio"].form-control-radio-sm,
input[type="radio"].form-control-radio-sm{
  &:before,
  &:after{ 
    width: $radio-checkbox-width-sm;
    height: $radio-checkbox-width-sm;
  }
}

input[type="radio"].form-control-radio-lg,
input[type="radio"].form-control-radio-lg{
  &:before,
  &:after{ 
    width: $radio-checkbox-width-lg;
    height: $radio-checkbox-width-lg;
  }
}

input[type="radio"].form-control-radio-xl,
input[type="radio"].form-control-radio-xl{
  &:before,
  &:after{ 
    width: $radio-checkbox-width-xl;
    height: $radio-checkbox-width-xl;
  }
}

input[type="radio"]:before,
input[type="radio"]:after{
  content: "";
  display: block;
  border-radius: 50%;
  transition: 240ms;
  width: $radio-checkbox-width-lg;
  height: $radio-checkbox-width-lg;
}

input[type="radio"]:before,
.radio input[type="radio"]:before,
.radio-inline input[type="radio"]:before {
  position: absolute;
  left: 0;
  top: -3px;
  background-color: esprit-sentiers(green);
  -webkit-transform: scale(0);
  transform: scale(0);
}

input[type="radio"].error:before,
.radio input[type="radio"].error:before,
.radio-inline input[type="radio"].error:before {
  background-color: colors(error);
}

input[type="radio"]:after,
.radio input[type="radio"]:after,
.radio-inline input[type="radio"]:after {
  position: relative;
  top: -3px;
  border: 2px solid #666666;
}
input[type="radio"]:checked:before,
.radio input[type="radio"]:checked:before,
.radio-inline input[type="radio"]:checked:before {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
input[type="radio"]:disabled:checked:before,
.radio input[type="radio"]:disabled:checked:before,
.radio-inline input[type="radio"]:disabled:checked:before {
  background-color: #bbbbbb;
}

input[type="radio"]:disabled:after,
.radio input[type="radio"]:disabled:after,
.radio-inline input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:after,
.radio input[type="radio"]:disabled:checked:after,
.radio-inline input[type="radio"]:disabled:checked:after {
  border-color: #bbbbbb;
}

input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: relative;
  border: none;
  margin-bottom: -4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
  outline: none;
}

input[type="checkbox"].form-control-radio-sm,
.checkbox.form-control-checkbox-sm input[type="checkbox"],
.checkbox-inline.form-control-checkbox-sm input[type="checkbox"]{
  &:after{
    width: $radio-checkbox-width-sm;
    height: $radio-checkbox-width-sm;
  }
}

input[type="checkbox"].form-control-radio-md,
.checkbox.form-control-checkbox-md input[type="checkbox"],
.checkbox-inline.form-control-checkbox-md input[type="checkbox"]{
  &:after{
    width: $radio-checkbox-width-md;
    height: $radio-checkbox-width-md;
  }
}

input[type="checkbox"],
input[type="checkbox"].form-control-checkbox-lg,
.checkbox input[type="checkbox"],
.checkbox.form-control-checkbox-lg input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.checkbox-inline.form-control-checkbox-lg input[type="checkbox"]{
  &:after{
    width: $radio-checkbox-width-lg;
    height: $radio-checkbox-width-lg;
  }
}

input[type="checkbox"].form-control-radio-xl,
.checkbox.form-control-checkbox-xl input[type="checkbox"],
.checkbox-inline.form-control-checkbox-xl input[type="checkbox"]{
  &:after{
    width: $radio-checkbox-width-xl;
    height: $radio-checkbox-width-xl;
  }
}

input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
  content: "";
  display: block;
  margin-top: -2px;
  margin-right: 5px;
  border: 2px solid #666666;
  border-radius: 2px;
  transition: 240ms;
}
input[type="checkbox"]:checked:before,
.checkbox input[type="checkbox"]:checked:before,
.checkbox-inline input[type="checkbox"]:checked:before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  display: table;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-top-width: 0;
  border-left-width: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type="checkbox"]:disabled:after,
.checkbox input[type="checkbox"]:disabled:after,
.checkbox-inline input[type="checkbox"]:disabled:after {
  border-color: #bbbbbb;
}
input[type="checkbox"]:disabled:checked:after,
.checkbox input[type="checkbox"]:disabled:checked:after,
.checkbox-inline input[type="checkbox"]:disabled:checked:after {
  background-color: #bbbbbb;
  border-color: transparent;
}



input[type="radio"]:checked:after,
.radio input[type="radio"]:checked:after,
.radio-inline input[type="radio"]:checked:after,
input[type="checkbox"]:focus:after,
.checkbox input[type="checkbox"]:focus:after,
.checkbox-inline input[type="checkbox"]:focus:after {
  border-color: esprit-sentiers(green);
}

input[type="checkbox"]:checked:after,
.checkbox input[type="checkbox"]:checked:after,
.checkbox-inline input[type="checkbox"]:checked:after{
  background-color: esprit-sentiers(green);
}

input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"],
input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  &:checked:after{
    border-color: esprit-sentiers(green);
  }
  &.error {
    &:checked:after {
      border-color: colors(error);
    }
  }
}

fieldset{
  border-radius: 5px;
  border: 1px solid #d6d6d6;
}

.min-form {
  padding: 10px;
  margin-bottom: 50px;
  text-align: center;

  table {
    margin: auto;
    text-align: initial;
    th,
    td {
      border: none;
      line-height: 1.05;
      &.form-group {
        display: flex;
        flex-flow: column;
        margin-bottom: 0;
      }
    }

    tbody {
      th,
      td {
        padding: 5px 10px;
      }
    }

    tfoot {
      tr {
        &:first-child {
          th,
          td {
            padding-top: 15px;
          }
        }
      }
    }
  }
  .form-control,
  .form-control-sm,
  .form-control-md,
  .form-control-lg {
    min-width: 400px;
  }
  @media screen and (max-width: 660px) {
    table {
      td,
      th {
        display: block;
      }
    }

    .form-control,
    .form-control-sm,
    .form-control-md,
    .form-control-lg {
      min-width: 300px;
    }
  }

  @media screen and (max-width: 400px) {
    .form-control,
    .form-control-sm,
    .form-control-md,
    .form-control-lg {
      min-width: 250px;
    }
  }
}

.form-group-container{
  display:flex;
  column-gap: 10px;
  .form-group{
    flex-grow:1;
  }

  @media screen and (max-width: 480px) {
    flex-flow: wrap;
  }
}

.contact-form-container {
  padding: 10px;
  border: 1px solid esprit-sentiers(green);
  display: inline-block;
  border-radius: 10px;
}

.form-bg-blur {
  filter: blur(10px);
}
.form-thanks-container {
  position: relative;

  .form-thanks {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;

    .content {
      max-width: 500px;
      margin: 35px 50px;
    }
    .icon {
      max-height: 85px;
      max-width: 85px;
      padding: 10px;
      position: relative;
      margin: auto;

      img {
        max-height: 100%;
        max-width: 100%;
      }
    }

    .thanks-title,
    .thanks-message{
      text-align: center;
    }
  }

  &.min{
    .content {
      max-width: 500px;
      margin: 10px 20px;
    }
    .icon {
      max-height: 45px;
      max-width: 45px;
      padding: 5px;
      position: relative;
      margin: auto;

      img {
        max-height: 100%;
        max-width: 100%;
      }
    }
    .thanks-title h3{
      margin: 20px auto 10px auto;
    }
    .thanks-message p{
      margin: 0 0 10px 0;
    }
  }
}


.grecaptcha-badge{
  bottom: 65px !important;
}

/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.form-group.invalid {
  .PhoneInputCountry {
    border-color: #a90c0c !important;
  }
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

input[type="tel"].PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;

  border: none;
  padding: 0 !important;
  border-radius: 0;
  &:focus,
  &:active,
  &:focus-within
  &:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px #ffffff inset, 0 0 0 2px rgba(126, 150, 41, 0) !important;
    border: none !important;
    outline: none !important;
  }
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-right: var(--PhoneInputCountrySelect-marginRight);
  padding-left: var(--PhoneInputCountrySelect-marginRight);
  box-shadow: none;
  border: none;
  outline: none;
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}