:root {
  --teaser-background-color: #848484;
  --teaser-color: #ffffff;
  --teaser-border-color: #000000;
  --teaser-hover-background-color: #626262;
  --teaser-hover-color: #ffffff;
  --general-background-color: #000000;
  --general-color: #ffffff;
  --header-color: #ffffff;
  --submit-button-background-color: #848484;
  --submit-button-color: #ffffff;
  --submit-button-hover-background-color: #626262;
  --submit-button-hover-color: #ffffff;

  --link-color: var(--general-color);
  --link-hover-color: #ccc;
  --text-input-color: #454545;
  --text-input-background-color: #fff;
  --text-input-border-color: #ccc;
  --general-font-family: Helvetica;
  --consent-text-font-family: var(--general-font-family);
  --consent-text-color: var(--general-color);
  --text-input-font-family: 'Open Sans', sans-serif;
  --submit-button-font-family: 'Open Sans', sans-serif;
  --form-panel-max-width: 300px;
  --image-panel-max-width: 200px;
  --container-content-desktop-width: calc(var(--form-panel-max-width) + var(--image-panel-max-width));
  --container-content-mobile-width: 335px;
  --warning-color: #ffff00;
  --invalid-feedback-color: var(--warning-color);
}


body {
  background-color: transparent;
  color: var(--general-color);
  font-family: var(--general-font-family);
  margin: 0;
  width: intrinsic;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;  
}

.material-icons-outlined {
  font-family: Material Icons;
}

.reset-steps {
  cursor: pointer;
}

.platform-display {
  transform-origin: center top;
}

.content-container {
  background-color: var(--general-background-color);
  border-radius: 4px;
  transform-origin: center top;
}

.for-desktop .content-container {
  width: var(--container-content-desktop-width);
}
.for-mobile .content-container {
  width: var(--container-content-mobile-width);
  margin-left: auto;
  margin-right: auto;
}

.for-desktop .form-panel {
  padding: 0 10px;
  width: var(--form-panel-max-width);
}
.for-mobile .form-panel {
  padding: 0 10px;
  width: 100%;
}


.for-desktop .image-panel {
  width: var(--image-panel-max-width);
  padding-left: 15px;
}
.for-desktop .image-panel img {
  width: 100%;
  align-self: flex-end;
}

a,
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: underline;
  color: var(--link-color);
  outline: 0;
}

a:hover {
  color: var(--link-hover-color);
}


.teaser-button-container {
  background-color: transparent;
}

.teaser-button {
  cursor: pointer;
  width: 230px;
  padding: 5px 20px;
  color: var(--teaser-color);
  background-color: var(--teaser-background-color);
  border-style: solid;
  border-width: 3px;
  border-color: var(--teaser-border-color);
  border-radius: 20px;
  font-size: 12px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.teaser-button:hover {
  color: var(--teaser-hover-color);
  background-color: var(--teaser-hover-background-color);
}


.mobile-input-container {
  position: relative;
}

.mobile {
  width: 280px;
  height: 42px;
  padding-left: 45px;
  font-family: var(--text-input-font-family);
  color: var(--text-input-color);  
  background-color: var(--text-input-background-color);
  border: 1px solid var(--text-input-border-color);
  border-radius: 0;
  font-size: 16px;
}

.mobile_flag {
  position: absolute;
  left: 3px;
  top: 11px;
  width: 36px;
  height: auto;
}

.consent-text {
  font-size: 9px;
  font-family: var(--consent-text-font-family);
  margin-top: 10px;
  color: var(--consent-text-color);
  font-weight: 400;
  line-height: 1;
}

.content-button {
  height: 42px;
  font-family: var(--submit-button-font-family);
  color: var(--submit-button-color);  
  background-color: var(--submit-button-background-color);
  border: none;
  padding: 0 15px;
  display: inline;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--general-font-family);
  vertical-align: top;
  transition: background-color .25s ease-in-out;
  -moz-transition: background-color .25s ease-in-out;
  -webkit-transition: background-color .25s ease-in-out;
  max-width: 300px;
  width: 95%;
}

.content-button:hover {
  cursor: pointer;
  color: var(--submit-button-hover-color);
  background-color: var(--submit-button-hover-background-color);
  transition: background-color .25s ease-in-out;
  -moz-transition: background-color .25s ease-in-out;
  -webkit-transition: background-color .25s ease-in-out;
}

.content-button .button-text {
  display: inline-block;
}
.content-button.txti-cta-submitting .button-text {
  display: none;
}
.content-button .button-submitting {
  display: none;
}
.content-button.txti-cta-submitting .button-submitting {
  display: inline-block;
}


.title {
  color: var(--header-color);
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
}


.sub-title {
  font-size: 16px;
  text-align: center;
  line-height: 1.2;
}

.errors {
  color: var(--warning-color);
}

.mobile.is-invalid~.invalid-feedback, 
.mobile.is-invalid~.invalid-tooltip, 
.was-validated .mobile:invalid~.invalid-feedback, 
.was-validated .mobile:invalid~.invalid-tooltip {
  display: block;
  color: var(--invalid-feedback-color);
}