.keppler-custom-field {
  i {
    margin-right: 5px;
  }
}

.form-group {
  .control-label {
    abbr {
      border-bottom: 0;
      color: $keppler-color;
      text-decoration: 0;
    }
  }

  textarea {
    min-height: 35px;
    resize: vertical;
  }
}

.social-medias-setting {
  input:not([type='submit']) {
    padding-left: 35px;
  }

  .social-icons {
    left: 0;
    margin: 35px 0 0 25px;
    position: absolute;
  }
}

.arrow-back {
  margin-bottom: 1rem;

  a {
    background-color: transparent;
    border-radius: 5%;
    color: $black;
    font-weight: 400;
    transition: .3s;
  }
}

.hvr-sweep-to-right {
  box-shadow: 0 0 1px transparent;
  display: inline-block;
  position: relative;
  transform: perspective(1px) translateZ(0);
  transition-duration: .3s;
  transition-property: color;
  vertical-align: middle;
}

.hvr-sweep-to-right::before {
  background: $dark-grey;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-duration: .3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  z-index: -1;
}

.hvr-sweep-to-right:hover,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:active {
  color: $white;
}

.hvr-sweep-to-right:hover::before,
.hvr-sweep-to-right:focus::before,
.hvr-sweep-to-right:active::before {
  transform: scaleX(1);
}

.form-padding {
  padding: 2rem 0;

  @include respond-to(xs) {
    padding: 2rem 0;
  }
}

.btn-primary {
  background-color: $keppler-color;
  border: 0;
  border-radius: 15px;
  color: $dark-white;
  font-weight: 400;
  padding: 7px 21px;
  transition: .4s;

  &:hover,
  &:focus,
  &:active,
  &:active:focus,
  &[disabled]:hover {
    background-color: $keppler-color;
    filter: brightness(120%);
    outline: none;
  }
}

.form-control:focus {
  border-color: $keppler-color;
  box-shadow: none;
}

.box-body-no-padding {
  padding: 0;
}

.checkbox {
  display: flex;
  margin: 0;

  label {
    min-height: 0;
    padding: 0;

    .label-text {
      margin: -3px 0 0 10px;
    }

    &::after {
      clear: both;
      content: '';
      display: table;
    }
  }

  .cr {
    border: solid 1px $grey;
    border-radius: 1px;
    display: inline-block;
    float: left;
    height: 15px;
    position: relative;
    transition: .3s;
    width: 15px;

    .cr-icon {
      color: $white;
      font-size: 11px;
      left: 1px;
      padding: 0;
      position: absolute;
      top: 0;
    }
  }
}

[type="checkbox"] {
  display: none;
  transition: all .3s ease-in;

  + .cr > .cr-icon {
    color: $white;
    opacity: 0;
    transform: scale(3) rotateZ(-20deg);
    transition: all .3s ease-in;
  }

  &:checked + .cr {
    background: $keppler-color;
    border: solid 1px $keppler-color;
    transition: all .3s ease-in;

    .cr-icon {
      color: $white;
      opacity: 1;
      transform: scale(1) rotateZ(0deg);
      transition: all .3s ease-in;
    }
  }

  &:disabled + .cr {
    cursor: not-allowed;
    opacity: .5;
    transition: all .3s ease-in;
  }
}