@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    .ckHV4G{
        width: 90% !important;
    }

    .button-group label {
        padding: 12px 8px !important;
    }

    .g-recaptcha {
        margin-left: -16px !important;
    }

    .comp-mj1p7o69 {
        margin-top: 85px;
    }

}


/* Trade Type */

select.trade {
    width: 100%;
    height: 45px;
    border: none;
    font-family: var(--wix-ui-tpa-text-field-main-label-font-family, var(--wst-paragraph-2-overriden-font-family, var(--wix-font-Body-M-family)));
    font-size: var(--wix-ui-tpa-text-field-main-label-font-size, var(--wst-paragraph-2-overriden-font-size, var(--wix-font-Body-M-size)));
}

input#acceptTerms {
    width: 20px;
    height: 20px;
    border: solid 1px #fff;
    margin-right: 14px;
}

.trade-type {

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;

  div {
    width: 31%;
    flex-wrap: wrap;
    margin-right: 8%;
  }

  label {
    border-radius: 3px;
    border: none;
    background-color: #f2f2f2;
    width: 100%;
    margin-bottom: 0;
    padding-right: 10px;
  }

  input.trade-type-radio:empty {
    display: none;
  }

  label i {
    position: relative;
    font-size: 18px;
    top: 2px;
  }

  input.trade-type-radio {
    &:empty ~ label {
      position: relative;
      float: left;
      padding: 10px;
      text-align: center;
      padding-bottom: 11px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      transition: 0.4s;
      line-height: 28px;
      overflow: hidden;
      margin-right: 10px;
      background-color: #ffffff;
      font-family: var(--wix-ui-tpa-text-field-main-label-font-family, var(--wst-paragraph-2-overriden-font-family, var(--wix-font-Body-M-family)));
      font-size: var(--wix-ui-tpa-text-field-main-label-font-size, var(--wst-paragraph-2-overriden-font-size, var(--wix-font-Body-M-size)));
    }

    ~ label:hover {
      background-color: #f0f7ff;
    }

    &:checked ~ label {
      background-color: rgba(0,0,0,0.2);;
    }

    &:empty ~ label {
      &:after,
      &:before {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 48px;
        border-radius: $global-border-radius;
        font-size: 22px;
        background: transparent;
        z-index: 100;
        opacity: 0;
      }
    }
  }

  .ripple-effect-dark span.ripple-overlay {
    animation: ripple 1.2s;
    opacity: 0.03;
  }
}

/* Account Type */

.button-group {
  display: flex;
  gap: 10px;
}

/* 1. Hide the actual radio circle */
.button-group input[type="radio"] {
  display: none;
}

/* 2. Style the label to look like a button */
.button-group label {
  padding: 10px 20px;
  border: 2px solid #ffffff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #000000;
  background-color: #ffffff;
  font-family: var(--wix-ui-tpa-text-field-main-label-font-family, var(--wst-paragraph-2-overriden-font-family, var(--wix-font-Body-M-family)));
  font-size: var(--wix-ui-tpa-text-field-main-label-font-size, var(--wst-paragraph-2-overriden-font-size, var(--wix-font-Body-M-size)));
}

/* 3. Hover state */
.button-group label:hover {
  background-color: #f0f7ff;
}

/* 4. The "Checked" state (Magic happens here) */
.button-group input[type="radio"]:checked + label {
  background-color: rgba(0,0,0,0.2);
  color: #000000;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Alert CSS */

/* Base Alert Style */
.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-family: sans-serif;
}

/* Success Theme */
.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

/* Danger Theme */
.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* Warning Theme */
.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}