@font-face  {
	font-display: swap;
	font-family: 'Titillium Web', Arial, sans-serif;
}

* {
    padding: 0;
    margin: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	/* background: linear-gradient(113.81deg, #B3F4FF 0%, #DDEDB6 100%); */
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

#login form h1,
#maintenance-message h1 {
	width: 300px;
	margin: 0 auto;
	padding-bottom: 16px;
	color: #333;
	font-size: 22px;
	text-align: center;
	font-weight: normal;
}

.align-center {
	text-align: center;
}

#logo {
	margin-top: 5%;
}

#login-container {
	position: relative;
	z-index: 10;
	height: 100%;
	min-height: 700px;
}

#login {
	position: relative;
	width: 100%;
	height: 100%;
	font-family: 'Titillium Web', Arial, sans-serif;
}

#login form,
#maintenance-message {
	position: absolute;
	width: 315px;
	height: 296px;
	padding: 32px;
	left: 50%;
	top: 57%;
	margin-left: -189.5px;
	margin-top: -210px;
	background: white;
	color: black;
	z-index: 10;
	background-color: #eee;
}

#maintenance-message {
	top: 63%;
	height: 100px;
}

#login.mobile-version form {
	width: 320px;
	padding: 20px 10px;
	margin-left: -170px;
}

#login form a {
	color: black;
}

#login.mobile-version form div {
	width: 320px;
}

#login form input[type=text],
#login form input[type=password] {
	font-family: 'Titillium Web', Arial, sans-serif;
	width: 272px;
	height: 44px;
	padding: 0 14px;
	font-size: 18px;
	margin-bottom: 15px;
	background-color: white;
	color: black;	
	border-width: 1px solid #333;
	border-radius: 4px;
}

#login form input[type=text]::placeholder,
#login form input[type=password]::placeholder {
	color: #afafaf;
}

#login.mobile-version form input[type=text],
#login.mobile-version form input[type=password] {
	width: 252px;
}

#login form input[type=text]::placeholder
#login form input[type=password]::placeholder {
	color: #afafaf;
}

#login form .or {
	display: inline-block;
	margin: 0 8px;
	color: black;
	width: auto;
}

#login form input[type=submit] {
    width: 302px;
    height: 44px;
    padding: 0;
    color: rgba(255,255,255,1);
	font-family: 'Titillium Web', Arial, sans-serif !important;
    font-size: 20px;
	font-weight: 600;
    border: 0 none;
    background: linear-gradient(180deg, #000 0%, #333 100%);
	border-radius: 4px;
}

#login.mobile-version form input[type=submit] {
	width: 282px;
}

#forgot-username-link,
#forgot-password-link {
	margin-top: 1em;
	display: inline-block;
	font-size: 12pt;
	color: black;
	text-decoration: underline;
	cursor: pointer;
}

#login-container form p {
	text-align: center;
	width: 302px;
	display: block;
	margin: 0 auto;
	padding-bottom: 1em;
	font-size: 11pt;
}

#aVers {
	position: absolute;
	bottom: 20px;
	left: 50%;
	width: 240px;
	margin-left: -120px;
	padding: 44px 0 0 0;
	color: #3a3a3a;
	text-align: center;
	font-size: 15px;
	text-decoration: none;
}

/*********** WAIT ***********/

#wait-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: .85;
	z-index: 20000;
}

#wait-message {
	position: fixed;
	left: 50%;
	top: 45%;
	width: 500px;
	margin-left: -250px;
	z-index: 20001;
	text-align: center;
}

#wait-message .msg {
	margin-top: 16px;
	font-size: 20px;
	font-weight: 400;
}

#wait-message .img {
	display: inline-block;
	width: 42px;
	height: 42px;
	background: url(images/wait.svg) no-repeat left center;
	background-size: 42px 42px;
	vertical-align: top;
	-webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}

@-moz-keyframes rotating { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes rotating { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes rotating { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

#login form #forgot-link {
	display: inline-block;
	margin-top: 16px;
	color: #333;
	text-decoration: none;
}

#login form #phone-link {
	display: inline-block;
	margin-top: 16px;
	color: #3a3a3a;
	text-decoration: none;
}

#google-auth-set-qr-code {
	position: absolute;
	width: 720px !important;
	height: 320px !important;
	padding: 32px;
	margin-left: -382px !important;
}

#google-auth-set-qr-code .left {
	float: left;
	width: 400px;
	height: 320px;
	text-align: left !important;
}

#google-auth-set-qr-code .left ol {
	padding-left: 1em;
}

#google-auth-set-qr-code .left ol li {
	padding-bottom: .4em;
	font-size: 11pt;
}

#google-auth-set-qr-code .right {
	margin-left: 420px;
}

.auth-code {
	text-align: left;
	padding: 8px 0 12px 0;
}

.auth-code>h3 {
	padding-bottom: .4em;
}

.auth-code>ul>li {
	list-style: none;
	display: inline-block;
	vertical-align: top;
	margin-right: 16px;
}

.auth-code>ul>li>input[type=text] {
	display: inline-block;
	vertical-align: top;
	width: 32px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 4px;
	text-align: center;
	padding: 4px !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	border: 1px solid #999;
	border-radius: 6px;
}

.auth-code>ul>li>input[type=text]:first-child {
	margin-left: 0;
}

.auth-code>ul>li>input[type=text]:last-child {
	margin-right: 0;
}

.auth-code>ul>li.separator {
	margin-right: 16px;
}