@import "icons/icomoon/styles.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* VARIABLES */
:root {
  --color-strawberry: rgb(255, 18, 122);
  --color-eerie-black: rgb(21, 18, 36);
  --color-primary-magenta: rgb(241, 18, 111);
  --color-plump-purple: #673ab7;
  --color-lemon-glacier: rgb(242, 255, 0);
  --color-floral-white: rgb(255, 248, 241);
  --color-middle-red-purple: rgb(25, 7, 64);
  --color-primary-lust-priestess: rgb(184, 43, 137);
  --color-sugar-crystal: rgb(251, 249, 255);
  --color-primary-dark: rgb(195, 9, 88);
  --color-primary-light: rgb(241, 192, 207);

  --color-secondary: rgb(25, 7, 64);
  --color-secondary-light: rgb(37, 13, 87);
  --color-secondary-lighter: rgb(134 116 173);
  --color-secondary-dark: rgb(18, 5, 46);
  --color-secondary-darker: rgb(28, 36, 47);
  --color-dark-back: rgb(22, 27, 35);
  --color-middark-grey: rgb(94, 102, 110);
  --color-light-text: rgb(222, 222, 222);
  --color-semi-white: rgb(248, 249, 249);
  --color-text: rgb(73, 88, 110);
  --color-pizarra: rgb(29, 35, 38);
  --color-tiza: rgb(220, 228, 232);

  --color-black: rgb(0, 0, 0);
  --color-dark-grey: rgb(73, 80, 87);
  --color-mid-grey: rgb(172, 181, 189);
  --color-light-grey: rgb(237, 237, 237);
  --color-mid-white: rgba(255, 255, 255, 0.502);
  --color-white: rgb(255, 255, 255);
  --color-grey-33: rgb(51, 51, 51);
  --color-grey-4f: rgb(79, 79, 79);
  --color-grey: rgb(119, 119, 119);
  --color-grey-9b: rgb(155, 155, 155);
  --color-grey-bd: rgb(189, 189, 189);
  --color-grey-e0: rgb(224, 224, 224);
  --color-grey-f2: rgb(242, 242, 242);

  --color-blue: rgb(33, 150, 243);
  --color-blue-light: rgb(211, 234, 253);
  --color-purple: rgb(155, 81, 224);
  --color-purple-light: hsl(271, 71%, 92%);
  --color-red: rgb(244, 67, 54);
  --color-red-light: rgb(255, 188, 182);
  --color-orange: rgb(250, 105, 15);
  --color-orange-light: rgb(255, 213, 187);
  --color-yellow: rgb(255, 167, 38);
  --color-yellow-light: rgb(255, 238, 214);
  --color-green: rgb(15, 175, 97);
  --color-green-light: rgb(173, 255, 214);
  --color-yellow-basic: rgb(255, 216, 0);
  --color-yellow-basic-light: rgb(255, 247, 204);
  --color-bright-yellow: rgb(252, 249, 52);
  --color-bright-yellow-light: rgb(254, 254, 214);

  --color-instagram: rgb(225, 48, 108);
  --color-facebook: rgb(57, 73, 171);
  --color-whatsapp: rgb(37, 211, 102);
  --color-twitter: rgb(29, 161, 242);
  --color-youtube: rgb(255, 0, 0);
  --color-tripadvisor: rgb(0, 175, 135);
  --color-pinterest: rgb(189, 8, 28);
  --color-mybusiness: rgb(72, 128, 230);
  --color-skype: rgb(0, 175, 240);
  --color-linkedin: rgb(0, 119, 181);
  --color-messenger: rgb(0, 132, 255);
  --color-snapchat: rgb(255, 252, 0);

  --appnice-linear: linear-gradient(208.82deg, #FF2064 10.91%, #4D0071 159.39%);
  --color-linear-nice: linear-gradient(180.1deg, #190740 27%, #673AB7 101.04%);
  --color-linear-sunset: linear-gradient(97.37deg, #FFBD1B -0.21%, #F22198 85.16%);
  --color-linear-sunrise: linear-gradient(170.45deg, #FF2064 23.78%, #F8EF1C 95.04%);
  --color-linear-bluesky: linear-gradient(170.45deg, #006CC8 23.78%, #5BAEFD 95.04%);
  --color-linear-mint: linear-gradient(170.45deg, #00E3BB 23.78%, #00A5D9 95.04%);

  --font-titles: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --line-grey: 1px solid rgb(221, 221, 221);
  --line-dark: 1px solid rgb(237, 237, 237);
  --border-radius: 0.5rem;
  --gutter: 2rem;
  --space-h: 1.6rem;
  --space-v: 2.4rem;
  --space-v2: 3.2rem;

  /* ===== Colors ===== */
  --body-color: #FFFFFF;
  --sidebar-color: #FFF;
  --primary-color: #695CFE;
  --primary-color-light: #F6F5FF;
  --toggle-color: #DDD;
  --text-color: #707070;

  /* ====== Transition ====== */
  --tran-02: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.3s ease;
  --tran-05: all 0.3s ease;

  /*Light colors*/
  --bg-body: rgb(248, 247, 250);
  --bg-card: rgb(255, 255, 255);
  /*Dark colors*/
}

/* RESEAT */
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1.6rem;
  min-height: 100vh;
  background: var(--color-white);
  position: initial;
}

button:focus {
  outline: 0;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

/* CONTAINERS */
.app-container {
  font-family: var(--font-primary);
  min-height: calc(100vh - 12rem);
}

.appnice__container {
  margin: 0 auto;
  max-width: 140rem;
  padding: 0 1.5rem;
  width: 100%;
}

/*NICEEAT GRID SYSTEM*/
.nice__gridRow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2rem;
}

.gap-0 {
  grid-gap: 0;
  align-items: center;
}

.nice__gridCol-6a {
  grid-column: 1 / span 6;
}

.nice__gridCol-6b {
  grid-column: 7 / span 6;
}

.nice__gridCol-4a {
  grid-column: 1 / span 4;
}

.nice__gridCol-4b {
  grid-column: 5 / span 4;
}

.nice__gridCol-4c {
  grid-column: 9 / span 4;
}

.nice__gridCol-5a {
  grid-column: 1 / span 5;
}

.nice__gridCol-7b {
  grid-column: 6 / span 7;
}

.nice__gridCol-3a {
  grid-column: 1 / span 3;
}

.nice__gridCol-3b {
  grid-column: 4 / span 3;
}

.nice__gridCol-3c {
  grid-column: 7 / span 3;
}

.nice__gridCol-3d {
  grid-column: 10 / span 3;
}

.fl-end {
  align-self: flex-end;
}

.alg-center {
  align-items: center;
}

.jfy-center {
  display: flex;
  justify-content: center;
}

.h-100 {
  height: 100%;
}

.nice__container {
  display: grid;
  margin: 0 auto;
  max-width: 120rem;
  padding: 0 3rem;
  width: 100%;
}

/*Niceeat Design System Styles*/
.n-card {
  background-color: var(--bg-card);
  border-radius: 0.8rem;
  box-shadow: 0 3px 9px 1px rgba(51, 48, 60, 0.03), 0 9px 8px rgba(51, 48, 60, 0.02), 0 1px 6px 4px rgba(51, 48, 60, 0.01);
  transition: var(--tran-03);
}

.n-card-header {
  padding: 2.4rem;
}

.n-card-text {
  padding: 0 2.4rem 2.4rem;
}

.n-card-item {
  padding: 2.4rem;
}

.n-card-table-item {
  padding: 1.6rem;
}

.n-sidecard-right,
.n-sidecard-left {
  border-radius: 0;
  box-shadow: 0 3px 9px 1px rgba(51, 48, 60, 0.03), 0 9px 8px rgba(51, 48, 60, 0.02), 0 1px 6px 4px rgba(51, 48, 60, 0.01);
}

.n-sidecard-right,
.n-sidecard-left {
  background-color: var(--bg-card);
}

.n-grid {
  display: grid;
}

.n-vh-padding {
  padding: 1.2rem;
}

.n-w100 {
  width: 100%;
}

.n-btn {
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 400;
  height: 4rem;
  line-height: 1.4em;
  padding: 0.8rem 2rem;
  transition: var(--tran-02);
  width: initial;
  min-width: max-content;
}

.n-btn-icon i {
  margin-right: 0.8rem;
  font-size: 2rem;
}

.n-icon-btn {
  border-radius: 3rem;
  width: 4rem;
  padding: 0.8rem;
  background-color: transparent !important;
}

.n-pilltab {
  border: 0;
  border-radius: 3.2rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 400;
  height: 4rem;
  padding: 0.8rem 2rem;
  transition: var(--tran-02);
  width: initial;
  min-width: max-content;
}

/* Tooltip container */
.n-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

.n-text-primary {
  color: var(--color-strawberry);
}

.n-text-secondary {
  color: var(--color-eerie-black);
}

.f-500 {
  font-weight: 500;
}

.f-600 {
  font-weight: 600;
}

.text-center {
  text-align: center;
}

/*/Niceeat Design System Styles*/
/*GENERAL*/
.login-form a {
  color: var(--color-white);
}

.login-form label.error {
  color: var(--color-snapchat);
  display: block;
  margin-top: 0.3rem;
  font-size: 1.2rem;
  text-transform: none;
}

.login-container {
  max-width: 30rem;
  font-size: 1.6rem;
}

.login-container__header h2 {
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 2.4rem;
}

.login-container__header h3 {
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.login-container__logo img {
  height: 6rem;
  width: 24rem;
}

.app-name {
  font-size: 2.3rem;
  color: var(--color-white);
  padding: 1.5rem;
}

.login-text {
  padding-bottom: 1.6rem;
  text-align: center;
  color: var(--color-white);
}

.login-container__userbox {
  margin-bottom: 2.4rem;
}

.login-container__userbox h3 {
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-white)
}

.registerNewAccount {
  display: inline-block;
  border-bottom: 1px solid;
  font-size: 1.6rem;
  padding-bottom: 0.4rem;
  font-weight: 500;
}

.login-accept {
  font-size: 1.2rem;
  color: var(--color-white);
  text-align: justify;
  line-height: 1.5em;
}

.login-accept a {
  color: var(--color-white);
  cursor: pointer;
  text-decoration: underline;
}

/*FORMS*/
.login-formContainer {
  padding: 3.4rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2.4rem;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="search"],
.login-form input[type="email"],
.login-form input[type="number"],
.login-form input[type="datetime"],
.login-form input[type="datetime-local"],
.login-form input[type="date"],
.login-form input[type="month"],
.login-form input[type="time"],
.login-form input[type="week"],
.login-form input[type="url"],
.login-form input[type="tel"],
.login-form textarea,
.login-form select {
  font-size: 1.6rem;
  border: 2px solid var(--color-grey-e0);
  border-radius: 0.8rem;
  background: var(--color-white);
  color: var(--color-eerie-black);
  box-shadow: none;
  padding: 0.8rem 1.6rem;
  height: 4.8rem;
  display: block;
  width: 100%;
  font-family: var(--font-body);
}

.login-form i {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-size: 1.6rem;
  color: var(--color-eerie-black);
}

p.nice__infoRegister {
  font-size: 1.6rem;
  line-height: 1.4em;
  margin-bottom: 2rem;
}

.login-form hr {
  border-top: 1px solid var(--color-eerie-black)
}

.btn-signup {
  padding: 1rem;
  font-size: 1.6rem;
  height: 4.6rem !important;
}

.bg-facebook {
  background-color: var(--color-facebook) !important;
  border-color: var(--color-facebook) !important;
  color: var(--color-white);
}

.btn-security {
  width: 100%;
  max-width: 35rem;
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 600;
  height: 4rem;
  line-height: 1.4em;
  padding: 0.8rem 1.6rem;
  color: var(--color-white);
  transition: all ease 0.3s;
  font-family: var(--font-body);
  position: relative;
}

.password-recovery-link {
  line-height: 1.6em;
}

.underline {
  text-decoration: underline;
}

.help-block {
  color: var(--color-white);
  font-size: 1.3rem;
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}

.app-container .help-block {
  color: var(--color-secondary-dark);
}

.modal .help-block {
  color: var(--color-secondary-dark);
}

.privacy-authBox {
  padding: 4rem;
  display: flex;
  justify-content: center;
}

.privacy-authContainer {
  background: var(--color-eerie-black);
  padding: 2rem 4rem;
  border-radius: 1rem;
  font-weight: 600;
  max-width: 43rem;
  color: var(--color-tiza);
  line-height: 1.4em;
}

.privacy-authContainer h2 {
  margin-bottom: 2.4rem;
  font-weight: 600;
}

.privacy-authContainer p {
  margin-bottom: 2rem;
}

.privacy-authContainer .containercheck {
  color: var(--color-tiza);
  font-size: 1.3rem
}

.privacy-authContainer .appHeader__content-logo a {
  color: var(--color-strawberry);
}

label {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--color-eerie-black);
  font-weight: 500;
  font-family: var(--font-primary);
}

.privacy-authContainer .containercheck a,
.privacy-authContainer .containercheck a:hover,
.privacy-authContainer .containercheck a:focus,
.privacy-authContainer .containercheck a:visited {
  color: var(--color-yellow-basic);
  font-weight: 600;
  font-size: 1.3rem
}

.btn-boxP {
  display: flex;
  justify-content: center;
}

.security-wrapper {
  background: var(--color-eerie-black);
  color: var(--color-white);
  min-height: 100vh;
}

.signup-container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99;
}

.cta-signupBox {
  max-width: 60rem;
  padding: 2.4rem 0;
}

.cta-signupBox a {
  display: block;
}

.login-form,
.signup-formContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  /*width: 50rem;*/
  width: 100%;
  box-shadow: 0 0 1.5rem rgb(0 0 0 / 25%);
  min-height: 100vh;
  position: relative;
  z-index: 99;
}

.cta-signupBox img {
  max-width: 24rem;
}

h1 {
  color: var(--color-white);
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
  font-family: var(--font-body);
}

.signup__label {
  font-size: 1.8rem;
  line-height: 1.4em;
  font-weight: 400;
  margin-bottom: 2.4rem;
}

.fill-white {
  fill: var(--color-white);
}

.fill-green {
  fill: var(--color-green);
}

.fill-primary {
  fill: var(--color-strawberry);
}

.fill-yellow {
  fill: var(--color-yellow);
}

.fill-yellow-basic {
  fill: var(--color-yellow-basic);
}

.fill-black {
  fill: var(--color-black);
}

.text-primary {
  color: var(--color-strawberry) !important;
}

.text-green {
  color: var(--color-green) !important;
}

.text-yellow {
  color: var(--color-yellow) !important;
}

.text-yellow-basic {
  color: var(--color-yellow-basic) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-color {
  color: var(--color-text) !important;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left !important;
}

.d-none {
  display: none;
}

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

.fl-end {
  align-self: flex-end;
}

.alg-center {
  align-items: center;
}

.alg-end {
  align-items: end;
}

.jfy-center {
  display: flex;
  justify-content: center;
}

.grid-center {
  justify-content: center;
}

.flex-center {
  justify-content: center !important;
  gap: 0.8rem;
}

.jfy-spc-btw {
  justify-content: space-between;
}

.h-100 {
  height: 100%;
}

.gap-0 {
  gap: 0;
}

.gap-8 {
  gap: 0.8rem;
}

.gap-16 {
  gap: 1.6rem;
}

.gap-24 {
  gap: 2.4rem;
}

.gap-32 {
  gap: 3.2rem
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-8 {
  margin-bottom: 0.8rem;
}

.mb-10 {
  margin-bottom: 1rem;
}

.mb-16 {
  margin-bottom: 1.6rem;
}

.mb-20 {
  margin-bottom: 2rem;
}

.mb-24 {
  margin-bottom: 2.4rem;
}

.mb-30 {
  margin-bottom: 3rem;
}

.mb-32 {
  margin-bottom: 3.2rem;
}

.mb-40 {
  margin-bottom: 4rem;
}

.mb-50 {
  margin-bottom: 5rem;
}

.mb-60 {
  margin-bottom: 6rem;
}

.mb-70 {
  margin-bottom: 7rem;
}

.mb-80 {
  margin-bottom: 8rem;
}

.mb-90 {
  margin-bottom: 9rem;
}

.mb-100 {
  margin-bottom: 10rem;
}

.mb-120 {
  margin-bottom: 12rem;
}

.pt-10 {
  padding-top: 1rem;
}

.pt-16 {
  padding-top: 1.6rem;
}

.pt-24 {
  padding-top: 2.4rem;
}

.pt-32 {
  padding-top: 3.2rem;
}

.pt-40 {
  padding-top: 4rem !important;
}

.pt-48 {
  padding-top: 4.8rem;
}

.border-1 {
  border: 1px solid;
}

.border-2 {
  border: 2px solid;
}

.border-3 {
  border: 3px solid;
}

.border-4 {
  border: 4px solid;
}

.border-5 {
  border: 5px solid;
}

.border-b-1 {
  border-bottom: 1px solid;
}

/*//NICEEAT GRID SYSTEM*/
/*NICEEAT FONT SYSTEM */
.f-12 {
  font-size: 1.2rem;
}

.f-14 {
  font-size: 1.4rem;
}

.f-16 {
  font-size: 1.6rem;
}

.f-18 {
  font-size: 1.8rem;
}

.f-20 {
  font-size: 2rem;
}

.f-24 {
  font-size: 2.4rem;
}

.f-28 {
  font-size: 2.8rem;
}

.f-32 {
  font-size: 3.2rem;
}

.f-40 {
  font-size: 4rem;
}

.f-48 {
  font-size: 4.8rem;
}

.f-56 {
  font-size: 5.6rem;
}

.f-64 {
  font-size: 6.4rem;
}

.f-70 {
  font-size: 7rem;
}

.f-80 {
  font-size: 8rem;
}

.f-90 {
  font-size: 9rem;
}

.lh-10 {
  line-height: 1em;
}

.lh-12 {
  line-height: 1.2em;
}

.lh-14 {
  line-height: 1.4em;
}

.lh-16 {
  line-height: 1.6em;
}

.containercheck {
  display: block;
  position: relative;
  padding-left: 3.5rem;
  cursor: pointer;
  font-size: 1.4rem !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-transform: initial !important;
  font-weight: normal !important;
}

.input-group-btn .btn {
  height: 4rem;
}

/* Hide the browser's default checkbox */
.containercheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.9rem;
  width: 1.9rem;
  background-color: var(--color-white);
  border: 0.2rem solid var(--color-eerie-black);
  border-radius: 0.3rem;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input~.checkmark {
  background-color: var(--color-white);
}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked~.checkmark {
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  line-height: 1;
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
  content: "\e600";
  font-family: 'icomoon';
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: -1px;
  left: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 1;
  filter: alpha(opacity=0);
}

/************ COLORS ************/
.bg-nice {
  background-color: var(--color-strawberry) !important;
  color: var(--color-white);
}

.bg-middle-red-purple {
  background-color: var(--color-middle-red-purple) !important;
  color: var(--color-white);
}

.bg-nice2 {
  background-color: var(--color-eerie-black) !important;
  border-color: var(--color-eerie-black) !important;
  color: var(--color-white);
}

.bg-blue {
  background-color: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  color: var(--color-white);
}

.bg-red {
  background-color: var(--color-red) !important;
  border-color: var(--color-red) !important;
  color: var(--color-white);
}

.bg-yellow {
  background-color: var(--color-yellow) !important;
  border-color: var(--color-yellow) !important;
  color: var(--color-white);
}

.bg-yellow-basic {
  background-color: var(--color-yellow-basic) !important;
  border-color: var(--color-yellow-basic) !important;
  color: var(--color-secondary-dark);
}

.bg-green {
  background-color: var(--color-green) !important;
  border-color: var(--color-green) !important;
  color: var(--color-white) !important;
}

.bg-purple {
  background-color: var(--color-purple) !important;
  border-color: var(--color-purple) !important;
  color: var(--color-white);
}

.bg-orange {
  background-color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-white);
}

.bg-mid-grey {
  background-color: var(--color-mid-grey) !important;
  border-color: var(--color-mid-grey) !important;
  color: var(--color-white);
}

.bg-facebook {
  background-color: var(--color-facebook) !important;
  border-color: var(--color-facebook) !important;
  color: var(--color-white);
}

.icon-hereBanner {
  background-position: center;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover !important;
  top: 0;
  left: 0;
  background-size: 100%;
  opacity: 0.1;
}

/* # FORMS AND MODALS*/
/************ MODAL ************/
.modal-backdrop.in {
  opacity: 0.7 !important;
}

.modal-app .modal-body label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-eerie-black);
  margin-top: 0.5rem;
}

.modal-app .modal-body .control-label {
  margin-bottom: 1rem;
}

label.error {
  color: var(--color-red);
  font-size: 1.3rem;
  text-transform: none;
  position: absolute;
  right: 0rem;
}

.modal-app .modal-body .validation-error-label,
.modal .modal-body .validation-error-label {
  color: var(--color-red);
  font-size: 1.3rem;
  text-transform: none;
  padding-left: 0;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-app {
  display: flex;
  font-family: var(--font-primary);
  justify-content: center;
  margin: 1rem auto;
  color: var(--color-eerie-black);
}

.modal-dialog {
  width: initial;
  max-width: 90rem;
}

.modal-content {
  border-radius: 1rem;
  max-width: 90rem;
}

.modal-header {
  position: relative;
  padding: 0;
}

.modal-content__title h4 {
  font-weight: bold;
  font-size: 1.8rem;
  color: var(--color-eerie-black);
  line-height: 1em;
  min-width: 35rem;
  text-align: left;
}

.close-nice {
  background-color: var(--color-white);
  width: 2.8rem;
  height: 2.8rem;
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: flex;
  border-radius: 2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-size: 2.4rem;
}

.close-nice .btn__icon {
  width: 1.4rem;
  height: 2rem;
  fill: var(--color-eerie-black);
}

.modal-body {
  position: relative;
  padding: 1rem 2.5rem 2.5rem;
}

.modal-body fieldset legend {
  font-size: 1.4rem;
}

.modal-footer {
  padding: 2rem;
  text-align: right;
  border-top: 1px solid var(--color-light-grey);
  display: flex;
  justify-content: flex-end;
}

.modal-footer #btn-draft {
  margin-right: 1rem;
}

.modal-footer .btn {
  margin-bottom: 0 !important;
}

.modal-open {
  overflow: hidden;
}

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  font-family: var(--font-body);
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

.modal-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid transparent;
  border-radius: 5px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid transparent;
}

.modal-header .close {
  margin-top: -2px;
}

.modal-title {
  margin: 0;
  line-height: 1.5384616;
}

.modal-body {
  position: relative;
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid transparent;
}

.modal-footer .btn+.btn {
  margin-left: 5px;
  margin-bottom: 0;
}

.modal-footer .btn-group .btn+.btn {
  margin-left: -1px;
}

.modal-footer .btn-block+.btn-block {
  margin-left: 0;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

/*RESPONSIVE*/
@media (max-width: 768px) {
  .signup__label {
    font-size: 1.6rem;
  }

  .signup-container {
    display: grid;
  }

  .signup-formContainer {
    width: 100%;
  }

  .cta-signup {
    display: none;
  }

  .login-form,
  .signup-formContainer {
    width: 100%;
  }
}