:root {
  --color_grey: #3f3e3c;   /* gray */
  --completed_green: #00BA13; /* success infocolor */
  --error_red: #E20026; /* error infocolor */
  --background_color_white: #FFFFFF;
}
/* Steps -----------------*/
/* Steps General */
.steps-wrapper {
  justify-content: space-between;
  display: flex;
}

/* Default Step */
.steps-wrapper>.step {
  white-space: nowrap;
  border-radius: 10px;
  align-items: center;
  padding: 20px 30px;
  display: flex;
  gap: 20px;
}

.steps-wrapper>.step>div {
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 24px;
  display: flex;

  border-radius: 50%;
  height: 40px;
  width: 40px;
}

.steps-wrapper>.step>p {
  color: var(--color_grey);
  flex-direction: column;
  font-size: 14px;
  display: flex;
  margin: 0;
  gap: 9px;
}

.step-line {
  margin: auto 0;
  width: 100%;
  height: 2px;
}

/* Active Step */
.steps-wrapper>.step.active>div {
  color: var(--background_color_white);
}

/* Complete Step */
.steps-wrapper>.step.complete>div {
  color: var(--background_color_white);
}

.steps-wrapper>.step.complete>div>svg {
  fill: var(--background_color_white);
  height: 24px;
  width: auto;
}

/* Error Step */
.steps-wrapper>.step.error>div {
  color: var(--background_color_white);
}

/* Warnung Step */
.steps-wrapper>.step.warning>div {
  color: var(--background_color_white);
}

/* Responsive */

@media (max-width: 1600px) {
  .steps-wrapper>.step {
    padding: 15px;
  }
}

@media (max-width: 1400px) {
  .steps-wrapper>.step:not(.active)>p {
    display: none;
  }
}

@media (max-width: 576px) {
  .steps-wrapper>.step:not(.active),
  .steps-wrapper>.step:not(.active)+.step-line {
    display: none;
  }
  .steps-wrapper>.step.active+.step-line {
    display: unset;
  }
  .steps-wrapper>.step.active+.step-line+.step {
    display: flex;
  }
  .steps-wrapper>.step.active:last-of-type {
    width: 100%;
  }
}

/* Body -----------------*/
/* Content Boxes */
#db_content_global_box,
#db_content_regional_box {
  border-radius: 4px !important;
}

#db_content_regional_box > .row > div > .align-items-center-gap > a > .icon_settings_svg,
#current_regional_file_link,
#db_content_global_box > .row > div > .align-items-center-gap > a > .icon_settings_svg {
  fill: var(--color_grey);
}


@media(max-width: 991px) {
  #massenmail_footer {
    display: block !important;
  }

  #massenmail_footer > .submit-btn {
    top: 20px;
    position: relative;
  }
  #massenmail_footer > a {
    top: 20px;
    position: relative;
  }
}


@media(min-width: 992px) {
  #massenmail_footer {
    align-items: center !important;
    display: flex !important;
  }
}