.captcha {
  margin: 1rem auto 2rem;
  background-color: transparent;
  border: 1px solid #D1D0D0;
  border-radius: 5px;
  width: 100%;
  padding: 1rem;
}

.captcha,
.captcha.small {
  display: block;
  max-width: 290px;
}

.captcha .wrapper {
  display: flex;
  flex-direction: row;
}

.captcha.small .wrapper {
  margin-bottom: .5rem;
}

/* To prevent elements shifting */
.captcha img {
  margin: 0;
  width: 100%;
  max-width: 230px;
  height: 60px;
}

.captcha .wrapper .actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: .25rem;
}

.captcha button {
  margin: 0;
  background-color: transparent;
  border: none;
  width: 20px;
  height: 20px;
  padding: 0;
}

.captcha button.image {
  align-self: center;
  width: 100%;
  height: 100%;
}

.captcha button + button {
  margin-top: .5rem;
}

.captcha svg {
  width: 20px;
  height: 20px;
  fill: #000000;
}

.captcha svg:last-of-type {
  width: 18px;
  height: 18px;
}

.captcha svg:hover {
  fill: #707070;
}

.captcha .input {
  margin: .5rem 0 0 0;
}

.captcha input {
  align-self: center;
  margin-bottom: 0;
}

.captcha.small .input,
.captcha.small input {
  margin: 0;
}

@media(min-width: 576px) {
  .captcha {
    display: flex;
    flex-direction: row;
    max-width: 500px;
  }

  .captcha img {
    max-width: 500px;
  }

  .captcha .input {
    margin: 0 0 0 1rem;
  }

  .captcha.small .input,
  .captcha.small input {
    margin: 0;
  }
}

/* To change the captcha image style, edit it in the captcha_show.phtml */