input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #FFFFFF inset; }

::placeholder {
  color: #A0A0A0; }

.x-body {
  background: #FFFFFF url("/page/images/login.jpg") no-repeat center fixed;
  background-size: cover; }

#panel_form {
  width: 100%;
  height: 100%;
  background-color: RGBA(0, 0, 0, 0.4); }

#panel_logo {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  padding: 20px 30px; }

#panel_login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
  #panel_login h1 {
    color: #FFFFFF;
    background-color: transparent;
    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 30px; }
  #panel_login div[data-user],
  #panel_login div[data-password] {
    color: #000000;
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 5px 15px;
    margin: 10px 0;
    overflow: hidden;
    border: 1px solid transparent; }
    #panel_login div[data-user] input,
    #panel_login div[data-password] input {
      color: #000000;
      background-color: #FFFFFF;
      padding: 5px 10px;
      width: 200px; }
  #panel_login div[data-user]:focus-within,
  #panel_login div[data-password]:focus-within {
    border-color: red; }
  #panel_login div[data-login] {
    color: #FFFFFF;
    background-color: #18AABF;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    margin-top: 30px;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 10px 15px;
    overflow: hidden;
    text-align: center; }
    #panel_login div[data-login] input {
      color: #FFFFFF;
      background-color: transparent;
      cursor: pointer; }
  #panel_login div[data-login]:focus-within {
    border-color: red; }

.icon_error {
  color: #CF4C35; }

.icon_font_awesome {
  display: inline-block; }

.icon_fa_password:after,
.icon_fa_user::after {
  font-family: FontAwesome;
  font-size: 18px;
  font-weight: normal;
  font-variant: normal;
  text-rendering: auto; }

.icon_fa_password:after {
  content: "\f023"; }

.icon_fa_user::after {
  content: "\f007"; }

.x-mask {
  background-color: RGBA(0, 0, 0, 0.2); }

.x-mask-msg-text {
  /* Show our own custom loading icon. */
  background-image: url("/page/images/themes/light/loading.svg"); }

.x-tip .x-tip-bodyWrap {
  color: #CF4C35;
  background-color: #FFFFFF;
  border-color: #CF4C35;
  border-radius: 20px; }
  .x-tip .x-tip-bodyWrap .x-tip-body-form-invalid:before {
    color: #CF4C35; }