.error-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.error-container {
  text-align: left;
}

.error-title {
  font-size: 1rem;
  font-weight: bold;
  color: #000000;
}

.error-message {
  font-size: 0.875rem;
  color: var(--light-gray-color);
}

.progress-countdown-failed {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.image,
.ant-carousel,
.slick-slider,
.slick-list,
.slick-track,
.ant-carousel .slick-list .slick-slide > div > div,
.ant-carousel .slick-slide .slick-active .slick-current > div,
.slide-container {
  min-height: var(--card-view-container-height);
}

.carousel-container {
  height: auto;
  .image,
  .ant-carousel,
  .slick-slider,
  .slick-list,
  .slick-track,
  .slick-slide > div,
  .ant-carousel .slick-list .slick-slide > div > div,
  .ant-carousel .slick-slide .slick-active .slick-current > div,
  .slide-container {
    height: 100%;
  }
}

.slide-container.card .image {
  height: 100%;
}

.container {
  .slide-container.card {
    margin: 0;
    padding: 0;
    border: none;
  }
}

#card-view-content-suspense {
  width: 495px;
}

.card-view-container {
  padding: 24px 40px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media screen and (max-width: 575px) {
  .card-view-container {
    max-width: 100%;
    padding: 24px 16px;
  }
}

.header-logo {
  height: 16px;
}

.countdown-wrapper {
  margin-top: 138px;
  margin-bottom: 138px;
}

.container .ant-card .ant-card-head {
  padding: 0 12px;
}

.circle-border {
  border: 8px solid var(--color-primary-1);
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

.image__info_content {
  color: rgba(0, 0, 0, 0.7);
}

.text-instructions {
  font-size: var(--font-size-sm);
  line-height: 17px;
  margin-bottom: 40px;
  margin-top: 32px;
  color: rgba(0, 0, 0, 0.7);
}

.time-remaining-QR-container {
  margin-top: 16px;
  margin-bottom: 32px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.time-remaining-QR_red {
  color: #fa541c;
}
.time-remaining-QR_green {
  color: #34c759;
}

.countdown-container {
  display: flex;
  justify-content: center;
}

.help-modal-container {
  height: 740px;
  width: 543px;

  .arrow-left {
    left: 35px;
  }

  .arrow-right {
    right: 35px;
  }
}

.modal-carousel-wrapper {
  display: flex;
  align-content: center;
  margin-top: 21px;
}

.modal-pagination {
  margin-top: 30px;
}

.image {
  background-size: cover;
  border-radius: 0 0 8px;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 20px;
  background-position: center;
  width: 100%;
}

.image__info {
  background: rgb(255 255 255 / 50%);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 24px 40px;
  width: 454px;
  font-size: var(--font-size-sm);

  & p {
    margin-bottom: 0;
    display: inline;
  }
}

.image__info_content-wrapper {
  margin-top: 10px;
  margin-bottom: 5px;
  gap: 5px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.image__info_content:first-child {
  display: inline;
}

.image__info_title {
  font-weight: 600;
}

.image__images {
  display: flex;
  gap: 10px;
}

.ant-list-item-meta {
  .code-digit-wrapper {
    justify-content: flex-start;
  }
}

.futurae-icon {
  margin-bottom: 8px;
}

.card-title {
  font-family: var(--font-family-1-name);
  font-size: var(--font-size-xs);
  font-weight: 400;
}

.label-username {
  display: none;
}

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

.passcode-input > div {
  display: flex;
  gap: 8px;
}

.passcode-input {
  width: auto !important;
}

.passcode-input > div > input {
  font-weight: 400;
  font-size: var(--font-size-normal);
  line-height: 24px;
  border-radius: 2px;
}

.passcode-input > div > input:focus {
  outline: none;
}

.passcode-input > div > input:last-child {
  border-radius: 2px;
}

.passcode-input > div > input:first-child {
  border-radius: 2px;
}

.carousel-container {
  position: relative;

  .ant-carousel .slick-dots-bottom {
    bottom: 46px;
  }
  .ant-carousel .slick-dots li button {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }
  .ant-carousel .slick-dots li.slick-active {
    width: 16px;
  }
}

.carousel-arrow {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 10;
  top: 50%;
  color: #fff;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}

.carousel-arrow-disabled {
  border: 1px solid var(--Gray-gray-5, #d9d9d9);
  background: var(--Gray-gray-3, #f5f5f5);
  cursor: not-allowed;
}

.carousel-arrow-disabled:hover {
  border: 1px solid var(--Gray-gray-5, #d9d9d9);
  background: var(--Gray-gray-3, #f5f5f5);
}

.arrow-left {
  left: 20px;
}

.arrow-right {
  right: 20px;
}

.modal-right-panel blockquote {
  padding: 16px 20px;
  border-radius: 4px;
  background: var(--gray-gray-2, #fafafa);
}

.validation-rule {
  display: flex;

  .anticon {
    line-height: normal;
  }
}

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

.info-panel-card {
  width: 990px;
  margin: 20px auto;
}

.App .need-help {
  bottom: 30px;
}

.device-select-label {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.device-select-label__column {
  text-align: left;
}

.device-select-label__seen {
  color: #8c8c8c;
}

.light-grey-color {
  color: #3c3c4399;
}

.avatar {
  font-size: 1.05rem;
}

.list {
  .title {
    font-size: 1.05rem;
  }

  .description {
    font-size: 0.8rem;
    margin: 0;
  }
}

.ant-modal .ant-modal-footer > .ant-btn + .ant-btn {
  margin-inline-start: 0;
}

.ant-modal .ant-modal-footer button:not(:last-child) {
  margin-bottom: 12px;
}

.notification-sent-text {
  font-size: var(--font-size-xs);
  line-height: 16px;
  margin: 4px 0;
  padding-top: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  font-variant-ligatures: none;
}

.notification-sent-text__device {
  font-weight: bold;
}

@media only screen and (max-width: 1000px) {
  #ACTIVATION_FUTURAE_INSTRUCTIONS_VIEW {
    .carousel-container-show-mobile {
      display: inline-block;
      width: 95vw;

      .arrow-left {
        left: 10px;
      }

      .arrow-right {
        right: 10px;
      }

      .image__info {
        width: 85vw;
      }
    }

    .image {
      display: flex;
      width: 95vw;
      border-radius: 0;
    }
  }

  #ACTIVATION_FUTURAE_INSTRUCTIONS_VIEW.card-view-content-container {
    flex-wrap: wrap;
  }

  .App .need-help {
    bottom: 0;
  }

  .image {
    border-radius: 8px;
  }
}

.activation-futurae-instruction {
  #identity-icon {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 40px;
    margin-bottom: 32px;
  }
}

.slide-container,
.context-messages {
  position: relative;
}

.counter-icon {
  background-color: var(--color-primary-1);
  border-radius: 50%;
  color: white;
  width: 24px;
  height: 24px;
  display: flex;
  font-weight: bold;
  justify-content: center;
  align-items: center;
}

#progress-countdown foreignObject > div > div {
  background: conic-gradient(
    from 0deg,
    var(--color-primary-1) 0%,
    var(--color-primary-4) 100%
  ) !important;
}

#progress-countdown .ant-spin {
  color: var(--color-primary-1);
}

.image__info {
  font-family: var(--font-family-1-name);
}

.info-panel-arrow-container {
  color: var(--color-primary-1);
}

.accordion-bullet {
  color: var(--dashed-border-color);
  background-color: var(--color-primary-1);
}

.carousel-arrow {
  background: var(--color-primary-1);
}

.carousel-arrow:hover {
  background: var(--color-primary-2);
}

.carousel-arrow:active {
  background: var(--color-primary-3);
}

.ant-carousel .slick-dots li button {
  background: var(--color-primary-4);
}

.ant-carousel .slick-dots li.slick-active button {
  background: var(--color-primary-1);
}

.signin-self-unblock-success-img {
  color: var(--color-primary-1);
}

.otan-option-block__icon {
  color: var(--color-primary-1);
}

.otan-success-icon,
.migration-success-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & .ant-progress-indicator,
  & .ant-progress-circle-path {
    --ant-color-success: var(--color-primary-1);
  }

  .ant-progress-status-success .ant-progress-text {
    color: var(--color-primary-1);
  }
}

.avatar {
  color: var(--color-primary-1);
}

#futuraeActivationSelection,
#challengeOtanDeviceSelection {
  .select-form-item .tokenized-select:hover .ant-select-content {
    border-color: var(--color-primary-2);
  }

  .ant-select-focused.ant-select-outlined .ant-select-content {
    border-color: var(--color-primary-2);
  }
}

.carousel-container {
  width: calc(990px - var(--component-card-width));
}

@media only screen and (max-width: 1000px) {
  .container .info-panel-card {
    width: var(--component-card-width);
  }

  .carousel-container,
  .container .image {
    width: var(--component-card-width);
    margin: auto;
  }
}

.activation-futurae-instruction {
  #identity-icon {
    background-image: var(--component-logo-client-connection-background-image);
    display: var(--component-logo-client-connection-display, block);
  }
}

.challenge-ezio-login-timeout {
  .seconds-remaining {
    color: var(--color-primary-1);
  }
}

.info-panel-arrow-container {
  display: flex;
  cursor: pointer;
  align-items: baseline;
}

.info-panel-arrow {
  margin-right: 10px;
}

.info-panel-arrow-container .info-panel-arrow:before {
  content: var(--component-info-panel-arrow-content, '\2794');
  display: inline-block;
  width: var(--component-info-panel-arrow-width, var(--component-info-panel-arrow-size));
  height: var(--component-info-panel-arrow-height, var(--component-info-panel-arrow-size));
  background-image: var(--component-info-panel-arrow-background-image);
  background-size: contain;
  background-repeat: no-repeat;
}

.carousel-arrow {
  opacity: var(--component-card-carousel-arrow-background-initial-opacity);
}

.container .arrow-right:before {
  content: var(--component-card-carousel-arrow-content, '\2794');
  font-size: var(--component-card-carousel-arrow-font-size);
  line-height: calc(
    var(
        --component-card-carousel-arrow-font-size,
        var(--component-card-carousel-arrow-line-height)
      ) *
      1.6
  );
  font-family: var(--component-card-carousel-arrow-font-family);
}

.container .arrow-left:before {
  content: var(--component-card-carousel-arrow-content, '\2794');
  transform: rotate(180deg);
  display: inline-block;
  font-size: var(--component-card-carousel-arrow-font-size);
  line-height: calc(
    var(
        --component-card-carousel-arrow-font-size,
        var(--component-card-carousel-arrow-line-height)
      ) *
      1.6
  );
  font-family: var(--component-card-carousel-arrow-font-family);
}

.carousel-container:hover {
  .carousel-arrow {
    background-color: var(
      --component-card-carousel-arrow-background-hover-carousel-background-color,
      var(--color-primary-1)
    );
    opacity: var(--component-card-carousel-arrow-background-hover-carousel-opacity);
  }
}

.container .carousel-arrow:hover,
.container .carousel-container:hover {
  background-color: var(
    --component-card-carousel-arrow-background-hover-arrow-background-color,
    var(--color-primary-2)
  );
  opacity: var(--component-card-carousel-arrow-background-hover-arrow-opacity);
}

.warning-text-background {
  background-color: rgb(from var(--color-primary-1) r g b / 0.1);
}

.list {
  .title {
    color: var(--color-text-1);
  }
}

@media screen and (max-width: 595px) {
  .carousel-container,
  .container .image,
  .container .info-panel-card,
  .image .image__info {
    width: 100%;
  }

  .container .carousel-container,
  .container .image,
  .container .slide-container,
  .carousel-container .ant-carousel,
  .carousel-container .slick-slider,
  .carousel-container .slick-list,
  .carousel-container .slick-track,
  .carousel-container .ant-carousel .slick-list .slick-slide > div > div,
  .carousel-container .ant-carousel .slick-slide .slick-active .slick-current > div,
  .carousel-container .slide-container {
    min-height: 350px;
    height: auto;
  }

  .info-panel-card {
    width: 320px;
    margin: 35px auto;
    box-shadow:
      0 1px 2px -2px rgb(0, 0, 0, 0.16),
      0 3px 6px 0 rgb(0, 0, 0, 0.12),
      0 5px 12px 4px rgb(0, 0, 0, 0.09);
  }

  .container .image {
    border-radius: 0;
  }
}

body {
  font-size: 16px;
  line-height: 20px;
}

.header-logo {
  margin: 10px;
  height: 35px !important;
}

#logo-header-de {
  cursor: pointer;
}

p,
a,
.link,
span,
.container .proceed-option .link,
.proceed-option,
.need-help,
:where(.css-qnu6hi).ant-card .image__info p,
#CHALLENGE_OTAN_VIEW > div > div > div.notification-sent-text,
#CHALLENGE_OTAN_VIEW > div > div > div.challenge-otan-alternatives-container > div,
.challenge-otan .card-view-subtitle,
.image__info_title,
.notification-sent-text,
.push-confirmation-instructions,
.switchers-container,
.card-view-subtitle,
.not-main-device-text,
.info-panel-arrow-container,
.required-wrapper,
.activation-otan.cryptogram-screen .description {
  font-size: 16px !important;
  line-height: 20px;
}

div.device-select-label__seen {
  font-size: 14px;
}

.notification-sent-text,
.challenge-otan-option,
#BLOCK_ACCOUNT_SUCCESS_VIEW > div.card-view-container > div > div.signin-self-unblock-message,
.text-instructions {
  text-align: left;
}

.proceed-option {
  padding-top: 20px;
}

.anticon.anticon-loading.anticon-spin.ant-spin-dot,
#PASSWORD_SELF_UNBLOCK_SUCCESS_VIEW .anticon.anticon-check-circle,
#ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CONFIRMATION_VIEW .anticon.anticon-check-circle,
#MIGRATION_FUTURAE_CONFIRMATION_VIEW .anticon.anticon-check-circle {
  font-size: 124px !important;
}

.validation-rule {
  display: inline-flex !important;
}

.validation-rules > * {
  width: 100% !important;
  margin-bottom: 10px;
}

#PASSWORD_CHANGE_VIEW > div.card-view-container > div > form > .ant-form-item {
  margin-bottom: 10px !important;
}

.challenge-futurae #progress-countdown {
  padding: 0px 0;
}

.time-remaining-QR_green {
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.anticon.anticon-loading.anticon-spin.ant-spin-dot,
#PASSWORD_SELF_UNBLOCK_SUCCESS_VIEW .anticon.anticon-check-circle,
#ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CONFIRMATION_VIEW .anticon.anticon-check-circle,
#MIGRATION_FUTURAE_CONFIRMATION_VIEW .anticon.anticon-check-circle,
.signin-self-unblock-success-img.success-icon .anticon.anticon-check-circle {
  font-size: 124px !important;
}

div.ant-card.ant-card-bordered.info-panel-card.css-qnu6hi div.info-panel-arrow-container {
  line-height: 25px;
  width: 300px;
}