@import './_variables.css';
@import './_multiSelect.css';
@import '_countryCode.css';
@import './_stepper.css';
@import '_header.css';
@import '_footer.css';
@import '_multilineDropdown.css';

.main-title{
  font-size: 1.5rem;
  font-weight: 600;
  background-image: linear-gradient( to right , var(--brand-color),var(--dark));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    margin:2rem 0;
}
:root {

  /* --- Colors --- */
  --light-blue-500: 202, 83%, 41%; /* #127fbf */
  --light-blue-900: 204, 96%, 27%; /* #035388 */

  --blue-100:       210, 22%, 49%; /* #627d98 */
  --blue-900:       209, 61%, 16%; /* #102a43 */

  --white:          0, 0%, 100%;   /* #ffffff */

  /* --- Layout --- */
  --space-multiplier:  0.8;

}

*{font-family: var(--font-family);}

/* Links
   ========================================================================== */


:root {

  /* --- Fields --- */

  --field-border-width: 1px;
  --field-border-style: solid;
  --field-border-color: hsl(var(--gray-500));
  --field-border: var(--field-border-width)
    var(--field-border-style)
    var(--field-border-color);
  --field-border-radius: 3px;
  --field-height: 4.2rem;

  /* --- Labels --- */

  /* --- Error Text ---*/

}

@media only screen and (min-width: 640px) {
  :root {
    --field-height: 4.6rem;
  }
}



.progress-form__tabs-item:active {
  transform: none;
}

.progress-form__tabs-item:hover,
.progress-form__tabs-item:focus {
  background-color: inherit;
  color: inherit;
}

.progress-form{
  position: relative;
  z-index: 12;

}
.progress-form::after{
  position: absolute;
  content: '';
  /* background-image: url(../img/leaf.png); */
  width: 150px;
  background-size: 100%;
  bottom: -65px;
  right: -42px;
  height: 171px;
  z-index: -1;
}
@media(max-width:1199.98px){
  .progress-form::after{
    width: 137px;
    bottom: -84px;
    right: 0;
    height: 165px;
  }
}

@media only screen and (min-width: 640px) {
  .progress-form__tabs-item {
    display: block;
  }
}

/* --- Disabled Step --- */

@media only screen and (min-width: 640px) {
  .progress-form__tabs-item[aria-disabled="true"] {
    --button-background-color: transparent;
    --button-text-color: hsl(var(--blue-100));

    background-color: var(--button-background-color);
    color: var(--button-text-color);
  }
}