/*!
 * project-name v0.0.1
 * A description for your project.
 * (c) 2019 YOUR NAME
 * MIT License
 * http://link-to-your-git-repo.com
 */

/**
 * @section Base Styles
 */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
/* line 7, src/sass/components/_base.scss */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* line 11, src/sass/components/_base.scss */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background: #222327;
  color: #FFF;
}

/* line 19, src/sass/components/_base.scss */
input,
textarea,
select,
button {
  font: inherit;
}

/* line 28, src/sass/components/_base.scss */
.login {
  background-image: radial-gradient(closest-corner at 50% 50%, #282a30, #222327);
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* line 36, src/sass/components/_base.scss */
.login .login-inner {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  opacity: 0;
  padding-top: 10px;
  padding: 40px 10px 20px;
  -webkit-transition: opacity 200ms, padding-top 200ms;
  transition: opacity 200ms, padding-top 200ms;
}

/* line 48, src/sass/components/_base.scss */
.login .login-inner.active {
  opacity: 1;
  padding-top: 20px;
}

/* line 53, src/sass/components/_base.scss */
.login .label-pos {
  position: relative;
}

/* line 55, src/sass/components/_base.scss */
.login .label-pos span {
  position: absolute;
  top: -7px;
  left: 16px;
  color: #000;
  font-size: 16px;
  -webkit-transition: top 200ms, left 200ms, font-size 200ms;
  transition: top 200ms, left 200ms, font-size 200ms;
  cursor: pointer;
}

/* line 66, src/sass/components/_base.scss */
.login input[type=password] {
  border-radius: 5px;
  border: 2px solid #c0c0c0;
  padding: 25px 10px 10px;
  width: 100%;
  font-size: 14px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* line 77, src/sass/components/_base.scss */
.login input[type=password]:focus,
.login input[type=password]:valid {
  border: 2px solid #1bb7c1;
}

/* line 82, src/sass/components/_base.scss */
.login .error input[type=password],
.login .error input[type=password]:focus,
.login .error input[type=password]:valid {
  border: 2px solid #e21515;
}

/* line 90, src/sass/components/_base.scss */
.login input[type=password]:focus + span,
.login input[type=password]:valid + span {
  top: -17px;
  left: 12px;
  font-size: 10px;
}

/* line 97, src/sass/components/_base.scss */
.login .login-row {
  display: table;
  width: 100%;
}

/* line 102, src/sass/components/_base.scss */
.login .login-col {
  display: table-cell;
  vertical-align: top;
}

/* line 106, src/sass/components/_base.scss */
.login .login-col-left {
  padding-right: 10px;
}

/* line 109, src/sass/components/_base.scss */
.login .login-col-right {
  width: 150px;
}

/* line 113, src/sass/components/_base.scss */
.login input[type=submit] {
  display: block;
  width: 100%;
  padding: 17px 10px;
  background: #1bb7c1;
  border-radius: 5px;
  border: 2px solid #09a2ac;
  color: #FFF;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: background-color 200ms;
  transition: background-color 200ms;
  font-size: 16px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* line 126, src/sass/components/_base.scss */
.login input[type=submit]:hover {
  background-color: #23c3cd;
}

/* line 129, src/sass/components/_base.scss */
.login input[type=submit]:hover, .login input[type=submit]:active, .login input[type=submit]:focus {
  outline: none;
}

@media (max-width: 768px) {
  /* line 138, src/sass/components/_base.scss */
  .login .login-col-right {
    width: 100px;
  }
}