@charset "UTF-8";
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../hostGrotesk/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: HostGrotesk_semibold;
  src: url("../hostGrotesk/HostGrotesk-SemiBold.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../zilla_slab/ZillaSlab-Regular.ttf");
}
html {
  font-size: 100% !important; /* équivaut à 16px */
}

#fgtp-page-container {
  height: 100vh;
  width: 100%;
  background-color: #027373;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.color-red-500 {
  color: #F93F2E;
}

.form-container {
  width: 54.5%;
  height: -moz-fit-content;
  height: fit-content;
  background-color: #FFFFFF;
  border-radius: 1rem;
  padding: 2.25rem 2.65rem;
}

.logo-container {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-bottom: 3rem;
}

.form-title h4 {
  font-family: "Zilla Slab";
  color: #027373;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  margin: 0;
}

.forms_group {
  position: relative;
}

.icon-container, .icon-container-confirm {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  right: 2.3%;
  bottom: 28%;
}

.icon-container svg, .icon-container-confirm svg {
  cursor: pointer;
}

.d_none {
  display: none;
}

.custom_mb-32 {
  margin-bottom: 1.5rem;
}

.pb-5 {
  padding-bottom: 0.5rem;
}

.form-title {
  padding-bottom: 2rem;
}

.h8 {
  font-family: "Host Grotesk";
  font-weight: 300;
  font-size: 0.75rem;
}

.gray-900 {
  color: #5E5E5E;
}

.text-italic {
  font-style: italic;
}

.form-sub-title {
  padding-bottom: 2.5rem;
}

.form-sub-title p {
  margin: 0;
}

form {
  margin: 0;
}

.input-field {
  padding: 0.75rem 1rem;
  background: #FBFBFD;
  border-radius: 0.5rem;
  width: 100%;
  border: 1px solid #D0D0D4;
  color: #202025;
  height: 2.75rem;
  font-family: "Host Grotesk";
}

.input-field::-moz-placeholder {
  color: #D0D0D4;
  font-weight: 500;
}

.input-field::placeholder {
  color: #D0D0D4;
  font-weight: 500;
}

.input-field:focus-visible {
  outline: 1px solid #027373;
  border-radius: 0.5rem;
}

.input-field.error:focus-visible {
  outline: 1px solid #F93F2E;
  border-radius: 0.5rem;
}

.input-field:disabled {
  background-color: #F4F4F7;
  cursor: not-allowed;
  color: #C9C9CE;
  border-radius: 0.5rem;
  border-color: #F4F4F7;
}

.input-field:hover {
  border: 1px solid #8BBFBF;
  background-color: #FBFBFD;
  border-radius: 0.5rem;
}

.input-field.error {
  background-color: #FFF4F4;
  border: 1px solid #F93F2E;
  color: #202025;
  border-radius: 0.5rem;
}

.error_field {
  color: #F93F2E;
  padding-top: 0.25rem;
  height: 0.5rem;
}

.h7 {
  font-size: 0.875rem;
  line-height: 1.1375rem;
  font-family: "Host Grotesk";
}

.label-field {
  font-weight: 600;
  text-align: left;
  color: #202025;
  padding-bottom: 0.75rem;
  margin-bottom: 0px;
}

.medium-btn {
  padding: 0.75rem 1rem;
  height: 2.5rem;
  width: 9.375rem;
  border: none;
  font-weight: 500;
  text-align: left;
}

.medium-btn:disabled {
  background-color: #DEDEE2;
  color: #A2A3A8;
  cursor: not-allowed;
  outline: #A2A3A8;
}

.medium-btn:disabled:hover {
  background-color: #DEDEE2;
  color: #A2A3A8;
  cursor: not-allowed;
  outline: #A2A3A8;
}

.medium-btn.bg-green-500:hover {
  background-color: #358F8F;
}

.medium-btn.bg-green-500:focus {
  background-color: #026969;
  outline: 0 auto #026969;
}

.bg-green-500 {
  background-color: #027373;
}

.color-white {
  color: #FFFFFF;
}

.radius-5 {
  border-radius: 0.32rem;
}

.btn-container {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
}

@media screen and (max-width: 767px) {
  .form-container {
    width: unset !important;
    max-width: 40.5rem;
    padding: 2.25rem 0.75rem;
  }
  #fgtp-page-container {
    padding-bottom: 2.5rem;
  }
}
@media screen and (max-width: 1012px) and (min-width: 768px) {
  .form-container {
    width: 75%;
  }
}
@media screen and (max-width: 768px) {
  body .container-fluid {
    padding: 0px !important;
  }
  body .container-fluid .container {
    padding: 12px;
  }
}
.error-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.erro-content {
  gap: 32px;
  height: -moz-fit-content;
  height: fit-content;
  padding: 16px;
  width: 370px;
}

.flex-dir-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-message-container, .error-message {
  gap: 16px;
}

.error-image {
  height: 200px;
  width: 307.5924072266px;
  background-position: center;
  background-size: cover;
}

.h4-M {
  font-family: "Host Grotesk";
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  text-align: center;
  color: #4F5E71;
}

.h2-S {
  font-family: "Host Grotesk";
  font-weight: 600;
  font-size: 16px;
  line-height: 133%;
  text-align: center;
  vertical-align: middle;
  color: #252A31;
}

h3, h6 {
  margin: 0 !important;
}

a {
  text-decoration: none;
}

a.button:focus, a.button:hover {
  color: white;
  text-decoration: none;
}

.error-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.error-btn-container .medium-btn {
  width: -moz-fit-content;
  width: fit-content;
}