*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@font-face {
        font-family: "OpenSans";
        src: url("/core/media/OpenSans-Regular.ttf");
}
html {
	height: 100%;
  user-select: none;
  -moz-user-select: none;
}
body, input{
	color: #757575;
	background: #fff;
	margin: 0;
	font: 1em 'Roboto', sans-serif;
}
#dark html, #dark body, #dark input {
     background: #222;
}
#dark body, #dark input{
     color: #ddd;
}
#dark h1 {
  color: #ddd !important;
}
#dark .login input:focus {
	color: #ddd;
	border-color: #ddd;
}
#dark .login {
    border: 1px solid #111;
}
.login {
  margin: calc(50vh - 18rem) auto 0 auto;
	max-width: 20em;
	padding: 1em 2em 2em 2em;
	box-shadow: 0 1px 2px 1px rgba(0,0,0,.2);
	border-radius: 3px;
	text-align: center;
}
.login h1::before {
     content: '';
     display: block;
     margin: 0 auto;
     max-width: 18rem;
     height: 8rem;
     padding: 1em 0 .5em 0;
     background: url('/core/media/logo-inline.svg') center no-repeat;
     background-size: contain;
}
.login h1{
	color: #212121;
	cursor: default;
	font-weight: normal;
	clor
}
.login input {
	width: 100%;
	outline: none;
	border: none;
	margin: .75rem 0;
	padding: .75em 0;
	border-bottom: 1px solid #aaa;
	transition: color ease .25s, border-color ease .25s;
}
.login input[type="submit"] {
     -webkit-appearance: none;

	cursor: pointer;
	margin: 2rem 0 1rem 0;
	background: #3a386a !important;
	color: #fff;
	border: none;
	border-radius: 2rem;
	transition: width ease .25s;
	width: 90%;
	box-shadow: 0 1px 1px 1px rgba(0,0,0,.2);
}
.login input:focus {
	color: #212121;
	border-color: #212121;
}
.login input[type="submit"]:hover {
	color: #fff;
	width: 95%;
}
.login input[type="submit"]:focus {
	color: #fff;
}
.login_processing {
	width: 2.75rem !important;
	color: #3a386a !important;
}
.login_processing:hover {
	width: 2.75rem !important;
}

#login {
     margin-bottom: 0;
}
#spinner {
	position: absolute;
	left: 50%;
	margin-top: -2.25rem;
	width: 0rem;
	height: 0rem;
	overflow: visible;
	animation: sk-rotate 1.25s infinite linear;
}
.hide {
	display: none;
}
.dot1, .dot2 {
	width: .75em;
	height: .75em;
	display: inline-block;
	position: absolute;
	top: 0;
	background-color: #fff;
	border-radius: 100%;
	animation: sk-bounce 1s infinite ease-in-out;
}

.dot2 {
	top: auto;
	bottom: 0;
	animation-delay: -.5s;
}

@keyframes sk-rotate { 100% { transform: rotate(360deg); ) }}

@keyframes sk-bounce {
	0%, 100% {
		transform: scale(0.0);
	} 50% {
		transform: scale(1.0);
	}
}

@media only screen and (max-width: 28rem) {
	.login {
    box-shadow: none;
    border: none !important;
	}
}

footer {
	margin: 1.25em 1em;
	text-align: center;
}