#LoginPanel .s-Panel {
  background-color: transparent !important;
  border: none !important;
  border-radius: unset;
  box-shadow: none;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #000;
  -ms-overflow-style: scrollbar;
}

#LoginPanel {
  padding: 20px 20px;
  width: 550px;
  margin: 90px auto auto auto;
  background: rgb(74 34 34 / 0.2);
  border-radius: 12px;
  color:white;
}
#LoginPanel input {

  color: black;
}

  #LoginPanel .caption {
    width: 180px;
  }

  #LoginPanel .logo {
    margin: 0 auto 20px auto;
    width: 228px;
    height: 148px;
    background: transparent url('/Content/site/images/serenity-logo-w-128.png') no-repeat center center;
  }

  #LoginPanel h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0 24px;
    color: #fff;
    text-align: center;
  }

  #LoginPanel .buttons {
    text-align: right;
    padding: 8px 0 4px 0;
    margin-right: 28px;
  }

html[dir="rtl"] #LoginPanel .buttons {
  text-align: left;
  margin-left: 28px;
}

#LoginPanel .btn {
  padding: 8px 24px;
  font-weight: 700;
}

#LoginPanel .caption {
  color: #ececec;
  font-weight: 700;
  text-shadow: 0 1px 1px #333;
}

#LoginPanel .actions {
  padding-right: 28px;
}

  #LoginPanel .actions a {
    color: #ececec;
    padding: 2px 2px 2px 2px;
    margin-top: 5px;
    display: block;
    float: right;
    clear: both;
    border-bottom: 1px dashed #999;
    text-shadow: 0 1px 1px #333;
  }

html[dir="rtl"] #LoginPanel .actions a {
  margin-left: 35px;
  float: left;
}

#LoginPanel .actions a i {
  font-weight: 700;
  margin-right: 4px;
}

.btn-primary {
  background-color: #BA2239;
  border-color: #BA2239;
}

  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary.hover {
    background-color: #ba3a4e;
    border-color: #BA2239;
  }

#LoginPanel .s-Form label.error {
  background-image: url(@Url.Content("~/Content/serenity/images/cross.png"));
  padding: 26px 0 0 22px;
}

  #LoginPanel .s-Form label.error.checked {
    background-image: none;
  }

#LoginPanel .s-Form .field {
  padding: 8px;
}

#LoginPanel .s-Form input {
  padding: 6px 10px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

#LoginPanel .s-Form .caption {
  padding: 6px 10px;
  color: #fff;
}

html[dir="rtl"] #LoginPanel .s-Form .caption {
  padding: 6px 60px;
  color: #fff;
}

#LoginPanel a {
  color: aqua;
}

#LoginPanel .s-PropertyGrid .categories {
  height: auto;
}

#LoginPanel .flex-layout .s-PropertyGrid {
  display: block;
}

@media(max-width: 550px), (max-height: 500px) {
  #LoginPanel

{
  padding: 16px 4px 16px 4px;
  position: absolute;
  margin: 0;
  width: auto;
  top: 10px;
  left: 10px;
  right: 10px;
}
}