﻿input:focus::-webkit-input-placeholder {
  color: transparent; }

input:focus:-moz-placeholder {
  color: transparent; }

/* FF 4-18 */
input:focus::-moz-placeholder {
  color: transparent; }

/* FF 19+ */
input:focus:-ms-input-placeholder {
  color: transparent; }

.icon-loading {
  vertical-align: middle; }

.login-form > div,
.register-form > div {
  position: relative; }

/*input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {*/
input:focus ~ .floating-label,
input[isvalid="valid"]:not(:focus) ~ .floating-label {
  top: 5px;
  bottom: 10px;
  left: 15.5px;
  font-size: 11px;
  opacity: 1; }

input:focus ~ .floating-label[lang="th"],
input[isvalid="valid"]:not(:focus) ~ .floating-label[lang="th"] {
  top: 5px;
  bottom: 10px;
  left: 15.5px;
  font-size: 1.1em;
  opacity: 1; }

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 15.5px;
  top: 15px;
  transition: 0.2s ease all;
  color: #aeaeae; }

.floating-label[lang="th"] {
  top: 8px;
  font-size: 1.8em; }

.login-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 7em;
  height: 7em; }

.login-logo-small {
  display: block;
  max-width: 75px;
  max-height: 75px;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
  /*-webkit-filter : hue-rotate(248deg);*/
  /*-webkit-filter: hue-rotate(100deg);*/
  /*filter: hue-rotate(100deg);*/ }

.login-logo.filter {
  -webkit-filter: opacity(25%) grayscale(65%);
  filter: opacity(25%) grayscale(65%); }

.user-logo {
  margin-bottom: 30px;
  width: 6.5em;
  height: 6.5em; }

.saturate {
  -webkit-filter: saturate(3);
  filter: saturate(3); }

.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); }

.contrast {
  -webkit-filter: contrast(160%);
  filter: contrast(160%); }

.brightness {
  -webkit-filter: brightness(2);
  filter: brightness(2); }

.blur {
  -webkit-filter: blur(3px);
  filter: blur(3px); }

.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%); }

.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%); }

.huerotate {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg); }

.rss_opacity {
  -webkit-filter: opacity(50%);
  filter: opacity(50%); }

.login-header {
  font-size: 19px;
  font-weight: 300;
  padding-bottom: 1em; }

.login-page {
  width: 360px;
  padding: 0 0 0;
  margin: auto; }

.form_old {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); }

.form {
  position: relative;
  background: #f9f9f9;
  padding: 45px;
  padding: 35px 45px 30px 45px;
  margin: 0 auto 100px;
  text-align: center; }

.form input {
  /*font-family: "Roboto", sans-serif;*/
  outline: 0;
  /*background: #f2f2f2;*/
  background: white;
  width: 100%;
  border: 0.5px solid;
  border-color: #c6c6c6;
  box-shadow: 0.1px 0.1px white;
  margin: 0 0 15px;
  padding: 16px 15px 0px 15px;
  box-sizing: border-box;
  font-size: 14px;
  height: 50px;
  line-height: 20px; }

.form input::after {
  padding-top: 40px; }

.form button {
  /*font-family: "Roboto", sans-serif;*/
  /*text-transform: uppercase;*/
  outline: 0;
  background: #0078d0;
  width: 100%;
  border: 2px solid #0078d0;
  padding: 15px;
  color: white;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer; }

.glowing-border {
  border: 2px solid #dadada;
  /*border-radius: 7px;*/ }

.glowing-border:focus {
  outline: none;
  border-color: #5da7e1;
  box-shadow: 0 0 10px #5da7e1; }

.form button:hover, .form button:focus {
  background: #006fc1;
  color: white;
  border: 2px solid white; }

.form button:active {
  background: #0066b2; }

.form .description {
  margin: 15px 0 0;
  /*color: #b3b3b3;*/
  color: #5a5a5a;
  font-size: 12px; }

.form .description a {
  color: #0072c6;
  text-decoration: none; }

.form .forgotpassword {
  color: #b3b3b3;
  font-size: 12px; }

.form .forgotpassword a {
  color: #6666ff;
  text-decoration: none; }

.form .register-form {
  display: none; }

.error {
  color: red; }

