body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	background: rgb(216, 216, 216);

	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
	letter-spacing: 0px;
	line-height: 14px;
	text-align: left;
	text-decoration: none;

	-webkit-text-size-adjust: none;
}
a {
	color: rgb(0, 0, 0);
	text-decoration: none;
	/*border-bottom: 1px dotted #FFF;*/
}
a:hover {
	color: rgb(0, 0, 0);
	text-decoration: none;
	/*border-bottom: 1px solid #FFF;*/
}


/*********************************************************** SMALL SCREEN */


/*********************************************************** MEDIUM SCREEN */
@media screen and (min-width: 800px) {
	
}

/*********************************************************** LARGE SCREEN */
@media screen and (min-width: 1160px) {
	
}


#main-wrapper {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	
	margin: 0px;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

#login-wrapper {
	position: relative;
	margin: 0px;
    animation: fadeUp 0.4s ease both;
}

#login-icon {
	position: relative;
	width: 50px;
	height: 50px;
	
	margin-left: calc((100% - 50px) / 2);
}

#login-box {
	position: relative;
	width: 300px;
	
	margin: 0px;
	padding: 20px;
	
	/*background: rgb(216, 216, 216);*/
	background: rgba(235, 235, 235, 1);
	border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

#login-power-by {
	position: relative;
	width: 100%;
	
	margin-top: 15px;
	display: block;
	
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	color: rgb(0, 0, 0);
	letter-spacing: 0px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
	
#h1-hide {
	position: absolute;
	top: 0px;
	left: 0px;
    width: 1px;
    height: 1px;
	overflow: hidden;
}

#h1-hide-text {
	font-size: 2px;
	color: white;
}

#color-bar-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	
	margin: 0px;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

#flow {
    display: block;
    width: 100%;
    height: 2px;
}

label {
	display: block;
    margin-bottom: 0px;
	
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 300;
	color: rgb(0, 0, 0);
	letter-spacing: 0px;
	line-height: 22px;
	text-align: left;
	text-decoration: none;
}

input[type="text"], input[type="password"] {
    width: calc(100% - 5px);
	height: 30px;
	
	border: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 0px;
	margin-bottom: 15px;
	
    font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	color: rgb(100, 100, 100);
	letter-spacing: 0px;
	line-height: 30px;
	text-align: left;
	text-decoration: none;
    
	background: white;
    outline: none;
    
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

input:focus {
    background: #fff;
	border: 0px;
    box-shadow: 0 0 0 1px rgba(99,102,241,0.1);
}

input::placeholder { color: #c4c9d4; }

.pw-wrap {
	position: relative;
	width: 100%;
}

.eye-btn {
	position: absolute;
    right: 10px;
	top: 7px;
	
	width: 16px; height: 16px;
	
    background: none; border: none;
    cursor: pointer; padding: 0px;
    color: #9ca3af;
    display: flex;
    transition: color 0.2s;
}
.eye-btn:hover { color: black; }
.eye-btn svg { width: 16px; height: 16px; }

.btn {
    width: 100%;
    margin-top: 16px;
	margin-bottom: 0px;
    padding: 11px;
    background: rgb(135, 130, 125);
	  
    border: none;
	
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	color: white;
	text-align: center;
	
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.btn:hover { background: rgb(152, 147, 142); }
.btn:active { transform: scale(0.99); }

#login-title {
	position: relative;
	width: 100%;
	
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	color: black;
	text-align: center;
	line-height: 16px;
	
	margin-top: 20px;
	margin-bottom: 30px;
}

#login-error {
	position: relative;
	width: 100%;
	height: 25px;
}

/*********************************************************** COPYRIGHT */
#index-copyright {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: auto;
	height: 15px;
	display: block;
	
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	color: rgb(0, 0, 0);
	letter-spacing: 0px;
	line-height: 15px;
	text-align: right;
	text-decoration: none;
}