body {
  background-color:#F6FAFC;
}

@font-face {
  font-family: 'Eina01';
  src: url('../fonts/Eina01-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter ui';
  src: url('../fonts/Inter-UI-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Inter ui';
  src: url('../fonts/Inter-UI-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

.login {width:480px;padding:40px 0;margin:0 auto; }
.main-container {width:100%;}

.top-login-container { margin: 0px 0px 40px 0px; }

p.error-message { 
  color: #f8473b;
  font-weight: 600;
  font-size: 14px;
  margin: 30px 0;
}

.login-container { 
  width:400px;
  background-color:#ffffff;
  padding:40px;
  box-shadow: rgba(60, 66, 87, 0.05) 0px 7px 14px 0px, rgba(0, 0, 0, 0.05) 0px 3px 6px 0px;
  border-radius: 6px;
}

.logo-container { 
  width:400px;
  padding:40px;
}

.logo { 
  width:140px;
  margin:0 auto;
}


input[type=submit] {
  display: block;
  background: #4a90e2;
  color: #fff;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  padding: 15px 0;
  border: 1px solid transparent;
  transition: all .4s ease;
}

input:not([type=submit]) {
  font-family: 'Inter ui',sans-serif;
    box-shadow: none;
    margin-bottom:20px;
    background: transparent;
    height: 54px;
    font-size: 18px;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: 10px 20px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #DFE0E4;
    border-radius: 4px;
    -webkit-transition: border-color ease-in-out .15s , 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;

}

label {
    display: inline-block;
    max-width: 100%;
    font-size: 16px;
    font-weight: 400!important;
    margin-bottom: 10px;
}

input:active, input:focus {
    outline: none;
    box-shadow: none;
    border-color: #dbdbdb;
}


@media screen and (max-width: 768px) {

.logo {
    width: 30%;
    vertical-align: middle;
    padding: 20px;
}

.logo-container {
    width: 100%;
    padding:0;
}

.login {
    width: 100%;
    padding:0;
}

.login-container {
    max-width: 100%;
    padding: 20px;
    width: auto;
    border-radius: 0;
}



}