@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/font-awesome/fontawesome-webfont.eot?v=4.7.0');
  src: url('fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/font-awesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #131c28;
  background-color: #131c28;

}

form {
  margin: 0 auto;
  width: 450px !important;
}

.row {
  margin: 0 auto;
}

.company-logo {
  position: relative;
  bottom: 20px;
}

.authentication-form {
  background: #24344d;
  border-radius: 0px !important;
  -overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-color: #324462 !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  -o-border-radius: 0px !important;
}

h2 {
  color: #fff;
  width: 25vw;
  font-weight: 600;
  font-size: 37px;
  margin-bottom: 65px;
}

button {
  height: 50px;
  border-radius: 0px !important;
  outline-color: transparent;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  -o-border-radius: 0px !important;
}

button:hover {
  background: rgb(41, 111, 240) !important;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 0px;
  outline-offset: 0px;
}

.btn {
  font-size: 16px;
  background: rgb(44, 114, 243);
}



.line_toggler {
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

form input:focus {
  outline: none;
}


form input {
  font-size: 15px !important;
  padding: 8px;
  border: none !important;
  padding-left: 40px !important;
  -webkit-border-radius: 0px !important;
  border-radius: 0px !important;
  color: #fff !important;
  padding-top: 6px;
  caret-color: #444;
  background-color: rgba(0, 0, 0, 0.03) !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  -o-border-radius: 0px !important;
}

form input[type="password"] {
  font-size: 32px !important;
}

.form-group a {
  margin: 0 auto;
  padding-left: 14px;
}

.checkbox {
  padding: 10px;
  text-align: center;
  color: #337ab7;
  font-size: 16px;
}

body .form-group:last-child {
  text-align: center;
  padding: 20px;
  font-size: 16px;
}

.line_toggler:before {
  content: "";
  display: inline-block;
  position: absolute;
  margin-top: -2px;
  width: 0;
  height: 2px;
  background: #4281d2;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}

form input:focus+.line_toggler::before {
  width: calc(100% - 30px);
  background: #4281d2
}

.form-group label {
  color: rgba(225, 235, 245, .90);
  margin-left: -26px;
  font-weight: 500 !important;
}

.fa-user-circle-o:before {
  font-family: 'FontAwesome';
  content: "\f2be";
}

.fa-key:before {
  content: "\f084";
  font-family: 'FontAwesome';
}

.icon_input_focus::before {
  color: rgb(157, 174, 202) !important;
}

.login_icon::before {
  color: rgb(69, 86, 113);
  -webkit-transition: all .6s;
  -o-transition: all .6s;
  -moz-transition: all .6s;
  transition: all .6s;
}

.login_icon {
  position: relative;
  font-size: 20px;
  top: 32px;
  padding-left: 10px;
  float: left;
}

@media (max-width: 320px) {
  .authentication-form {
    height: 450px;
  }
}

@media (max-width: 768px) {
  form input {
    font-size: 15px !important;
  }

  form input[type="password"] {
    font-size: 31px !important;
  }
}