:export {
  font: Roboto, Arial, Helvetica, sans-serif;
  colorPrimary: #00c26f;
  colorPrimaryLight: #16d785;
  colorSecondary: #5c5780;
  colorBackground: #f6f4f8;
  colorDark: #2b2b36;
  colorDarkText: #2c4240;
  colorTextOnDarkBg: #56566e;
  colorRed: #dc1d2e;
  colorTextOnDarkBgLight: #706c90;
  colorWhite: #fff;
  colorBlack: #000;
  colorGray: #e5e5e5;
  colorDarkGray: #c4c3c9;
  colorDarkInput: #36324a;
  colorLight: #383861;
  colorLightGradient: #3d3d70;
  colorGlow: #6d6bd9;
  colorWhiteArticle: #d7dfe8;
  colorLightGreen: #d8fce6;
  colorBtn: #383857;
  colorFirstItemUsing: #454391;
  colorSecondItemUsing: #5452ac;
  colorBtnLight: #50e3a2;
  colorBlur: #26b6f6;
  colorYellow: #ffd12a;
  colorYellowLight: #f2c94c;
  colorBannerTopic: #f2f2f2;
  colorDarkLight: #333;
  colorBorderGreen: #00c26f;
  colorInputBorder: #d1cfdd;
  colorScrollbarPrimary: #e9e7ee;
  colorScrollbarSecondary: #00c26f;
  colorBlue: #2551ae;
  colorLightGray: #f7f7f9;
  bannerFirstBlockGradient: linear-gradient(
    270.79deg,
    #a086fc 1.82%,
    #ffda54 99.89%
  );
  bannerLastBlockGradient: linear-gradient(
    270.79deg,
    #7977ef 1.82%,
    #45da93 122.34%
  );
  headerGradient: linear-gradient(28.39deg, #3d3d70 4.29%, #2b2b36 42.96%);
  secondaryGradient: linear-gradient(16.24deg, #3d3d70 4.29%, #2b2b36 42.96%);
  rangeGradient: linear-gradient(
    to right,
    #00c26f 0%,
    rgba(255, 255, 255, 0.3) 0
  );
  footerGradient: linear-gradient(10.32deg, #3d3d70 4.29%, #2b2b36 42.96%);
  headerHeight: 105px;
  footerHeight: 424px;
  minContentHeight: calc(100vh - 105px - 424px);
  mobileWidth: 768px;
  tabletWidth: 992px;
  smallDesktopWidth: 1200px;
  smallMobileWidth: 480px;
  screenMaxWidthXL: 1599px;
  screenMinWidthXL: 1200px;
  screenMaxWidthL: 1199px;
  screenMinWidthL: 992px;
  screenMaxWidthM: 991px;
  screenMinWidthM: 768px;
  screenMaxWidthS: 767px;
  screenMinWidthS: 576px;
  screenMaxWidthXS: 575px;
  screenMinWidthXS: 380px;
  screenMaxWidthXXS: 379px;
}
#transaction-status-form {
  min-height: 324px;
}
.transaction-status-form__block {
  border-radius: 6px;
  background-color: #fff;
  padding: 32px 16px;
}
.transaction-status-form__button {
  display: block;
  width: 100%;
  margin-top: 16px;
  height: 46px;
  background-color: #00c26f;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  outline: none;
}
.transaction-status-form__form-title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin: 0;
}
.transaction-status-form__form-wrap {
  margin-top: 18px;
}
.transaction-status-form__form-col {
  margin-top: 32px;
}
.transaction-status-form__image-col {
  text-align: center;
}
.transaction-status-form__input {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 17px;
  border-radius: 4px;
  border: 1px solid #e2e7ed;
  outline: none;
}
.transaction-status-form__input-wrap {
  position: relative;
}
.transaction-status-form__error {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: rgba(252, 237, 186, 0.9);
  color: #5d5a60;
  font-size: 14px;
  padding: 8px 13px;
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.transaction-status-form__error_visible {
  opacity: 1;
}
.transaction-status-form__icon {
  max-width: 84px;
}
@media screen and (min-width: 768px) {
  #transaction-status-form {
    min-height: 191px;
  }
  .transaction-status-form__block {
    padding: 50px 38px;
    display: flex;
    align-items: center;
  }
  .transaction-status-form__image-col {
    flex-grow: 1;
    max-width: 96px;
  }
  .transaction-status-form__form-col {
    flex-grow: 1;
    margin-top: 0;
    margin-left: 38px;
  }
  .transaction-status-form__form-wrap {
    display: flex;
    align-items: center;
  }
  .transaction-status-form__input-wrap {
    width: 100%;
  }
  .transaction-status-form__form-title {
    text-align: left;
  }
  .transaction-status-form__button {
    margin-top: 0;
    margin-left: 22px;
    max-width: 180px;
  }
}