.igr-ocp-container.main {
  background-color: var(--color-grey-dark);
  color: var(--color-white);
  font-family: inherit !important;
  .row,
  .article-form__row.row {
    margin-left: 0;
    margin-right: 0;
  }

  .article-form:not(:first-child) {
    margin-top: 0;
  }

  .article-form__row.row:nth-child(1) {
    .form {
      .form__row {
        .col-md-6 {
          padding-left: 0 !important;
        }
      }
    }
  }

  .form {
    background-color: unset !important;
    padding-left: 0;
    .form__fieldset.container {
      padding-top: 35px;
      background-color: unset;
      padding-left: 4px;
      margin-top: 0;
      padding-bottom: 0;

      .form-field {
        .form-field__field-wrapper {
          input:not([type="radio"]):not([type="checkbox"]):not(
              [type="file"]
            ):not([type="range"]):not([type="range"]) {
            font-family:
              -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
              sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
              "Segoe UI Symbol", "Noto Color Emoji";
            color: var(--color-white);
            font-size: 18px;
            font-weight: 400;
            letter-spacing: -1px;
            line-height: 36px;
            margin: 0 4px 10px 0px !important;
            background-color: transparent;
            border: 0;
            border-bottom: 1px solid currentColor;
            cursor: pointer;
            display: inline-block;
            padding: 5px 10px 5px 0;
            position: relative;
            text-decoration: none;
            transition:
              color 0.15s ease-in-out,
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
            user-select: none;
            vertical-align: middle;
            height: 45px;
            min-height: 45px;
            text-align: left;
          }
        }
      }

      .form-field.form-field--dropdown {
        select {
          font-size: 18px;
          font-family:
            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
            "Noto Color Emoji";
          font-weight: 400;
          letter-spacing: -1px;
          height: 45px;
          min-height: 45px;
          border: 0;
          border-bottom: 1px solid currentColor;
          color: var(--color-white);
          display: inline-block;
          line-height: 32px;
          margin: 0;
          padding: 5px 10px 5px 0;
          position: relative;
          transition:
            color 0.25s ease-out,
            background-color 0.25s ease-out,
            border-color 0.25s ease-out;
          vertical-align: bottom;
          white-space: nowrap;
          &:hover,
          &:focus {
            background-color: transparent;
          }
        }
      }

      .ocp__priceBox {
        background-color: var(--color-red);
        width: fit-content;
        border-radius: 8px;
      }

      .no-day-datepicker.simple-field-date {
        .datepicker-wrapper {
          .year-field,
          .month-field {
            width: 100%;
            .datepicker-label {
              text-align: left;
            }
            input {
              border-left: 0 !important;
              border-radius: 0 !important;
              margin: 0 !important;
            }
          }
          .month-field {
            margin-right: 24px;
            input {
              border-right: 0 !important;
            }
          }
        }
      }

      .required-disclaimer {
        margin-left: 0;
      }

      .form__row--footer {
        &.form__row--footer:nth-child(3) {
          padding-left: 10px;
        }
        .button {
          span {
            width: 150px;
            padding-top: 8px;
          }
          &.button.button--primary[name="pay-button"],
          &.button.button--primary[name="card-holder-container:pay-button"] {
            span {
              width: 100px;
            }
          }
          &.button.button--primary[name="payment-method-section:payment-method-form:payment-method-button"] {
            span {
              width: 170px;
            }
          }
        }
      }

      &.form__fieldset.container:nth-child(2) {
        fieldset {
          .form-field__field-wrapper {
            padding-right: 48px;
          }
        }
      }

      .form__row.form__row--footer:nth-child(2) {
        margin-bottom: 35px;
      }

      fieldset.mt-5 {
        margin-top: 16px !important;
        padding-bottom: 23px;
      }

      &.form__fieldset.container {
        fieldset:nth-child(1) {
          .form__row:nth-child(6) {
            margin-bottom: 0 !important;
          }
        }
      }

      .error-section.form__fieldset {
        background-color: unset;
        .form__text.form__text--error {
          background-color: var(--color-error) !important;
          margin-left: 0;
        }
      }
      .error-border {
        select,
        input {
          border-color: var(--color-error) !important;
        }
      }
    }

    .form__legend,
    .form-field__label,
    strong,
    title,
    .form-field__field-wrapper input[type="checkbox"] + label,
    span.card-holder-info-accordeon-title span.title,
    span.body,
    .datepicker-label,
    .clear-token-link {
      color: var(--color-white);
    }

    input[type="checkbox"] + label .form-field__icon svg {
      color: var(--color-grey-dark);
    }

    .pl-3.accordeon-container {
      padding-left: 0 !important;
      p.accordeon-title {
        svg,
        path {
          fill: var(--color-white);
          stroke: var(--color-white);
        }
      }
    }

    &.one-click-payment-modal {
      .form__fieldset-group.email-form-size {
        background-color: var(--color-grey-2);
        color: var(--color-white);
        padding-top: 0;
        .form__fieldset.container:nth-child(2) {
          padding-top: 0;
          .form__legend {
            padding-top: 0 !important;
            span {
              line-height: 15px;
            }
          }
        }
        .button {
          border-color: transparent;
          span {
            width: 100px;
          }
        }

        .purple-box {
          background-color: transparent;
          .font-weight-bold.justify-content-center {
            padding-block: 0 !important;
          }
        }

        .form-field__field-wrapper {
          padding-left: 1.5rem;
        }
      }
    }
  }

  .button.button--primary,
  .button--cancel,
  .product__field-label {
    background-color: var(--color-white) !important;
    --webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 2px !important;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.02em;
    margin-block: 0;
    max-width: min(100%, 320px);
    min-height: 51px;
    text-overflow: ellipsis;
    text-transform: none;
    transition:
      border-radius 0.35s cubic-bezier(0.26, 0.88, 0.57, 0.9),
      background-color 0.35s cubic-bezier(0.26, 0.88, 0.57, 0.9);
    user-select: none;
    white-space: nowrap;
    width: auto;
    will-change: border-radius;
    cursor: pointer;
    min-width: 100px;
    padding: 16px;
    position: relative;
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    vertical-align: middle;
    &:hover,
    &:focus {
      border-radius: 8px !important;
      background-color: var(--color-white) !important;
      color: var(--color-grey-dark) !important;
    }
    &::before {
      content: "\e905";
      position: absolute;
      left: 8px;
      top: calc(50% - 11px);
      color: var(--color-red);
      font-size: 28px;
      font-family: "icomoon";
    }
    span {
      flex: 1 1 100%;
      height: 2rem;
      line-height: 2rem;
      text-overflow: ellipsis;
      transform: translateX(0px);
      transition: transform 0.35s cubic-bezier(0.26, 0.88, 0.57, 0.9);
      white-space: nowrap;
      will-change: transform;
      width: 150px;
      text-align: right;
      color: var(--color-grey-dark);
    }
    &:hover {
      span {
        transform: translateX(-2.5px);
      }
      &::before {
        transform: translateX(2.5px);
      }
    }
  }

  .background-logo--corner-bottom-right-fixed,
  .datepicker-separator,
  .one-click-payment-modal a,
  .svg-icon {
    display: none;
  }

  .mt-n5 {
    margin-top: 0 !important;
    .form__fieldset.container {
      padding-top: 0;
      .border-top-gray {
        background-color: unset;
        color: var(--color-grey-dark);
        border-top: unset;
      }

      input[type="radio"] + label {
        color: var(--color-white);
      }

      input[type="radio"] + label::before {
        width: 17px;
        height: 17px;
        border: 1px solid var(--color-grey-2);
      }

      input[type="radio"]:checked + label.payment-method {
        border: var(--color-white);
        background-color: var(--color-white);
        color: var(--color-grey-dark);
        strong {
          color: var(--color-grey-dark);
        }
      }

      label.payment-method:nth-child(2) {
        margin-bottom: 55px !important;
      }

      input[type="radio"]:checked + label::after {
        content: "";
        position: absolute;
        width: 17px;
        height: 17px;
        left: 23px;
        top: 17px;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M15.285.534a1 1 0 011.501 1.314l-.082.095L6.745 11.97a1 1 0 01-1.32.087l-.094-.082-5.013-4.98a1 1 0 011.315-1.502l.094.083L6.031 9.85 15.285.534z' fill='%232A2A2A'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
      }

      label.payment-method {
        strong {
          color: var(--color-white);
        }
      }

      .form__row.row.mt-5:nth-child(1) {
        margin-bottom: 0;
        margin-top: 40px !important;
      }
    }

    .card-details {
      .form__row:nth-child(9) {
        span {
          padding-left: 0 !important;
          svg {
            stroke: var(--color-white);
            line {
              stroke: var(--color-white);
            }
            path:nth-child(29) {
              fill: var(--color-white);
            }
            path:nth-child(30),
            path:nth-child(31),
            path:nth-child(32),
            path:nth-child(33) {
              fill: var(--color-black);
            }
          }
        }
      }

      .card-info-label {
        div {
          display: flex;
          align-items: center;
          gap: 7px;
          span {
            display: inline-block;
            background-color: var(--color-white);
          }
        }
      }
    }
  }

  .article-form:not(:last-child) {
    margin-bottom: 0;
  }

  .article-header {
    .article-header__title {
      font-size: 40px;
      line-height: 42px;
    }
    .article-header__text {
      font-size: 22px;
      line-height: 24px;
    }
  }

  legend.form__legend {
    font-size: 22px;
    line-height: 24px;
  }

  .info-modal {
    .info-modal-title,
    .form__fieldset.container {
      background-color: var(--color-error);
      color: var(--color-white);
    }

    span {
      svg {
        margin-right: 16px;
      }
    }

    .button--primary {
      align-items: baseline;
      a {
        color: var(--color-grey-dark);
        width: 175px;
        text-align: right;
      }
      &:hover {
        a {
          transform: translateX(-2.5px);
          text-decoration: none;
        }
      }
    }
  }

  .button--cancel.button-fix {
    background-color: unset !important;
    --webkit-backdrop-filter: unset;
    backdrop-filter: unset;
    border-radius: unset !important;
    box-shadow: none;
    font-weight: unset;
    font-size: unset;
    line-height: unset;
    letter-spacing: unset;
    max-width: unset;
    min-height: unset;
    transition: none;
    padding: unset;
    position: absolute;
    margin-right: 0;
    display: inline;
    &:hover {
      background-color: transparent !important;
      border-radius: transparent !important;
    }
    &::before {
      content: none;
    }
  }
}

@media (min-width: 320px) and (max-width: 529.9px) {
  .igr-ocp-container.main {
    .form {
      .card-details {
        .form__row:nth-child(3) {
          .simple-field {
            .form-field {
              .form-field__field-wrapper {
                .disable-card-icon {
                  display: inline-block;
                  position: relative;
                }

                .clear-token-link {
                  display: inline-block;
                  position: initial;
                }
              }
            }
          }
        }
      }
    }
    .mt-n5 {
      .form {
        .form__fieldset.container {
          input[type="radio"]:checked + label::after {
            top: 23px;
          }
        }
      }
    }
  }
}

@media (max-width: 799.9px) {
  .igr-ocp-container.main {
    .article-form__row.row {
      .pl-3.accordeon-container {
        padding-left: 0 !important;
      }
      .form,
      .form__fieldset.container,
      fieldset {
        padding-inline: 0;
      }

      .form {
        .form__fieldset.container {
          &.form__fieldset.container {
            .form__row--footer {
              align-items: flex-start;
            }
          }
          &.form__fieldset.container:nth-child(2) {
            fieldset {
              .form-field__field-wrapper {
                padding-right: 0;
              }
            }
          }
          .border-top-gray,
          .form__row--footer:nth-child(3) {
            padding-left: 0;
          }
        }

        .no-day-datepicker.simple-field-date {
          .datepicker-wrapper {
            display: inline-block;
            width: 100%;
          }
        }
      }
    }
  }
}

@media (min-width: 530px) {
  .igr-ocp-container {
    .article-form__column.offset-sm-1 {
      margin-left: 0;
    }
  }
}

@media (min-width: 800px) {
  .igr-ocp-container.main {
    .button.button--primary[name="pay-button"] {
      margin-left: 10px;
    }
    .form__fieldset.container {
      .error-section.form__fieldset {
        padding-left: 10px;
      }
    }
    .article-header {
      .article-header__text:not(:first-child) {
        margin-top: 32px;
      }
      .article-header__title {
        font-size: 54px;
        line-height: 60px;
      }
      .article-header__text {
        font-size: 26px;
        line-height: 32px;
      }
    }
    legend.form__legend {
      font-size: 28px;
      line-height: 36px;
    }
  }
}

@media (min-width: 1180px) {
  .igr-ocp-container {
    .article-form__column.offset-sm-1 {
      margin-left: 8.3333333333%;
    }
  }
}