body {
  background-color: #FFF;
  background-position: top center;
  background-attachment: unset;
  background-size: unset;
  background-image: url(../images/beter/beter_login.jpg);
  color: #17a8a3;
  font-size: 16px;
  line-height: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

::-webkit-input-placeholder {
  font-family: Arial, Helvetica, sans-serif;
  color: #74cbc8;
}

:-moz-placeholder {
  font-family: Arial, Helvetica, sans-serif;
  color: #74cbc8;
}

::-moz-placeholder {
  font-family: Arial, Helvetica, sans-serif;
  color: #74cbc8;
}

:-ms-input-placeholder {
  font-family: Arial, Helvetica, sans-serif;
  color: #74cbc8;
}

::-ms-input-placeholder {
  font-family: Arial, Helvetica, sans-serif;
  color: #74cbc8;
}

:placeholder-shown {
  font-family: Arial, Helvetica, sans-serif;
  color: #74cbc8;
}

.pannel {
  position: absolute;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.6);
  font-family: Arial, Helvetica, sans-serif;
}

.pannel--center-center {
  top: 200px;
  left: 50%;
  transform: translate(-50%, 0);
}

.pannel__login {
  display: flex;
  width: 95%;
  max-width: 304px;
  border-radius: 0;
  border: solid 1px #17a8a3;
  background-color: rgba(255, 255, 255, 0.5);
    top: 10px;
}

@media only screen and (min-width: 580px) {
  .pannel__login {
    top: 200px;
    min-width: 256px;
    max-width: 390px;
    background-image: none;
    box-shadow: none;
  }
}

@media only screen and (min-width: 580px) {
  .pannel__login section:nth-child(2) {
    display: none;
  }
}

.pannel__login .grid-unit--beta {
  width: 100%;
}

.login__client-logo {
  display: none;
}

.login__body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: none;
    padding: 10px 15px;
  margin-top: 10px;
  float:none;
}


@media only screen and (min-width: 580px) {
  .beter .login__body {
    padding: 20px 35px;
    margin-top: 20px;
  }
}

.login__body:before {
  display: none;
}

.login-beter__header {
  display: block;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -.5px;
  font-size: 1.2em;
}

@media only screen and (min-width: 580px) {
  .beter .login-beter__header {
    font-size: 1.5em;
    white-space: nowrap;
  }
}

.login__footer {
  background-color: transparent;
  color: #17a8a3;
  height: 170px;
  padding-bottom: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.login__footer a {
  color: #17a8a3;
  font-family: Arial, Helvetica, sans-serif;
}

.form__togglebar {
  display: none;
}

.form__textfield--username,
.form__textfield--email,
.form__textfield--password {
  max-width: 100%;
}

.form__textfield--username label,
.form__textfield--password label {
  display: none;
}

.form__textfield--username .form__textfield-icon,
.form__textfield--password .form__textfield-icon,
.form__textfield--email .form__textfield-icon,
.form__textfield--calendar .form__textfield-icon,
.form__textfield-icon .form__textfield-tfa-icon{
  display: none !important;
}

.form__textfield--username input[type='text'],
.form__textfield--username input[type='email'],
.form__textfield--username input[type='password'],
.form__textfield--password input[type='text'],
.form__textfield--email input[type='email'],
.form__textfield--password input[type='password'] {
  border-radius: 2px;
  padding-left: 10px;
  margin-top: 25px;
  color: #17a8a3;
  background-color: #F9F9F9;
  box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
  font-family: Arial, Helvetica, sans-serif;
}

.form__button {
  font-family: Arial, Helvetica, sans-serif;
}

.form__button input[type='button'], .form__button input[type='submit'] {
  height: 44px;
  line-height: 44px;
  border-radius: 2px;
  background-color: #17a8a3;
  box-shadow: inset 0 22px 0 0 rgba(255, 255, 255, 0.2);
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

.form__selectfield {
  font-family: Arial, Helvetica, sans-serif;
}

.form__selectfield select,
.form__selectfield .select {
  color: #17a8a3;
  font-family: Arial, Helvetica, sans-serif;
}

.form__selectfield .select:after {
  border-top-color: #17a8a3;
}

.footnote {
  display: block;
  width: 100%;
  font-size: 11px;
  text-align: center;
  color: #666;
  padding: 20px 40px;
  line-height: 1.4;
  font-family: Arial, Helvetica, sans-serif;
}

.beter__footnote a {
  font-size: 11px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  display: none;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .form__selectfield {
    margin-bottom: 25px;
  }
  .form__selectfield select {
    color: #17a8a3;
    border-bottom: 1px solid #8bd4d1;
  }
  .form__selectfield select:focus, .beter .form__selectfield select:focus-within, .beter .form__selectfield select:active, .beter .form__selectfield select:visited {
    background-color: transparent !important;
    outline: none !important;
  }
  .form__selectfield:after {
    border-color: #17a8a3 transparent transparent transparent;
  }
}

.login__novalid-message {
  background-color: #F9F9F9;
  box-shadow: -5px 0 18px 0 rgba(0, 0, 0, 0.15);
}

.login__novalid-message:before {
  border-color: transparent #F9F9F9 transparent transparent;
}

.message
{
color: #17A8A3;
}

div.custom-info-header
{
    display:block;
}

.form__button input[type='button']:hover, , .form__button input[type='submit']:hover
{
    background-color: #17a8a3;
    box-shadow: inset 0 22px 0 0 rgba(255, 255, 255, 0.2);
}