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

.captcha.loading-message {
  font-size: 12px;
  color: #3d3d3d;
}

.captcha.mini {
  margin: 0;
  border: none;
  padding: 0;
}

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

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

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

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

.captcha.mini img {
  width: 125px;
  height: 40px;
}

.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.mini button + button {
  margin-top: .25rem;
}

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

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

.captcha svg:hover {
  fill: #3d3d3d;
}

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

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

.captcha.mini 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:not(.mini):not(.small) .input {
    margin: 0 0 0 1rem;
  }

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

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