* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@aqua: #05b8ee;
@apricot: #ff9635;
@black: #000000;
@blue: #3283c8;
@coal: #4a4a4a;
@cloud: #f5f5f5;
@gray: #525252;
@light_gray: #9b9b9b;
@orange: #ef8523;
@silver: #e7e7e7;
@white: #ffffff;
@medium: 500;
@semi-bold: 600;
@body-font: 'Source Sans Pro', sans-serif;

@-webkit-keyframes color-change {
  0% {
    color: @gray; }
  50% {
    color: @black; }
  100% {
    color: @light_gray; }
}

html, body {
  font-family: @body-font;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 1080px;
}

.spacer {
  flex: 1;
}

.footer {
  height: 100px; /* .push must be the same height as .footer */
}

a {
  color: @blue;
  &:hover {
    color: @aqua;
  }
}

h1 {
  font-size: 2rem;
  font-weight: @semi-bold;
  line-height: 2em;
  letter-spacing: 0;
  color: @black;
}

h2 {
  font-size: 24px;
  font-weight: @semi-bold;
  line-height: 2em;
  letter-spacing: .02rem;
  color: @black;
}

h3 {
  font-size: 1.125rem;
  font-weight: @semi-bold;
  line-height: 2em;
  letter-spacing: .02rem;
  color: @black;
}

h4 {
  font-size: 0.875rem;
  font-weight: @semi-bold;
  line-height: 2em;
  letter-spacing: .02rem;
  color: @black;
}

body {
  background: @cloud;
  position: relative;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.6em;
  letter-spacing: .02rem;
  color: @gray;
}

code {
  background-color: #f9f2f4;
  border-radius: 4px;
  padding: 0;
  font-size: 100%;
  color: @gray;
}

pre {
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  border: 1px solid @light_gray;
}

caption {
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.6em;
  letter-spacing: .02rem;
  color: @gray;
}

.body-typo {
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.6em;
  letter-spacing: .02rem;
  color: @black;
}

.h1-typo {
  font-size: 2rem;
  font-weight: @semi-bold;
  letter-spacing: 0;
}

.h2-typo {
  font-size: 24px;
  font-weight: @semi-bold;
  letter-spacing: .02rem;
}

.h3-typo {
  font-size: 1.125rem;
  font-weight: @semi-bold;
  letter-spacing: .02rem;
}

.h4-typo {
  font-size: 0.875rem;
  font-weight: @semi-bold;
  letter-spacing: .02rem;
}

.high-light {
  font-size: 1.125rem;
  font-weight: normal;
  letter-spacing: .03rem;
  color: @black;
}

.special-number {
  font-size: 2rem;
  font-weight: @semi-bold;
  letter-spacing: .03rem;
  color: @blue;
}

.button {
  border-radius: 4px;
  width: 152px;
  height: 40px;
  font-size: 0.875rem;
  font-weight: @medium;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

button {
  .button;
}

.text-input {
  width: 152px;
  height: 40px;
  font-size: 0.875rem;
  border: 0;
  background: white;
  box-shadow: none;
  border-radius: 0;
  padding: 0 10px;
  margin-right: 20px;
}

.text-input:focus, .text-input:active {
  box-shadow: none;
  outline: none;
}

.button-primary-white {
  border: 1px solid @light_gray;
  background-color: @white;
  font-weight: @medium;
  color: @gray;
  fill: @gray;
  &:hover svg path,
  &:hover {
    border: 1px solid @black;
    font-weight: @semi-bold;
    color: @black;
    fill: @black;
  }
  &:active {
    border: 1px solid @orange;
    color: @orange;
  }
}

.button-primary-orange {
  border: 1px solid @light_gray;
  background-color: @orange;
  letter-spacing: .06rem;
  color: @white;
  fill: @white;
  font-weight: @medium;
  &:hover {
    border: 1px solid @gray;
    font-weight: @semi-bold;
    background-color: @apricot;
  }
  &:active {
    opacity: 0.8;
  }
}

.flat-form {
  margin: auto;
  display: block;
  margin-top: 200px;
  width: 500px;
  background: #9aa5d8;
  padding: 30px;
}

small {
  color: white;
  padding: 0;
  display: block;
}

.logo-wrapper {
  margin-bottom: 20px;
}

.logo-wrapper p {
  display: inline;
  font-size: 25px;
  color: white;
}

.error.btn:hover {
  background-color: #f1c40f;
  cursor: auto;
}

ul {
  list-style-type: none;
  margin-bottom: 0;
}

.button-inline {
  background-color: #34ADDB;
  padding: 5px 10px;
}

.button-active {
  opacity: 1;
  border-bottom: 3px solid #ef8523;
}

.button-top-active {
  border-bottom: 1px solid #ffffff;
}

.right {
  display: inline-block;
  float: right;
}

/* stylelint-disable declaration-no-important  */
.Select.is-open {
  z-index: 99 !important;
}
/* stylelint-enable */

.material-icons {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.form-body {
  font-size: 0.75rem;
  font-weight: regular;
  line-height: 1em;
  letter-spacing: .03rem;
  color: @gray;
}

.form-special-number {
  font-size: 1.125rem;
  font-weight: @semi-bold;
  line-height: 1em;
  letter-spacing: .02rem;
  color: @blue;
}

.form-caption {
  font-size: 0.625rem;
  font-weight: @semi-bold;
  line-height: 1em;
  letter-spacing: .02rem;
  color: @blue;
}