/** Importing fonts */

@font-face {
  font-family: 'Usual-Bold';
  src: url('/assets/fonts/Usual-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Usual-Light';
  src: url('/assets/fonts/Usual-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Usual-Medium';
  src: url('/assets/fonts/Usual-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Usual-Regular';
  src: url('/assets/fonts/Usual-Regular.woff2') format('woff2');
}

* {
  font-family: "Usual-Regular";

  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-family: "Usual-Medium";
    font-weight: 500;
  }

  input {
    font-family: "Usual-Light" !important;
  }
}

form {
  background-color: #e9ecef;

  .form-control {
    height: 50px;
    border-radius: 2px;
    box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.08);
    border: solid 1px #dbdbdf;
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

    &:focus {
      background-color: #ffffff;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
      box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.08);
      border: solid 1px rgba(3, 160, 231, 0.5);
      outline: 0;
    }
  }

  button, input, textarea {
    font-family: "Usual-Light";
  }
}
