body{
	margin:0;
	background-color: #dddddd;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 4'%3E%3Cpath fill='rgb(200,200,200)' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
	overflow:hidden;
    color: #666666;
    font-family: sans-serif;
}

.unselectable
{
	-webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
}
.colorAlert
{
    color:rgb(216, 41, 41);
}

.colorSuccess
{
    color:rgb(60, 167, 60);
}

#footer
{
	position:absolute;
	height:200px;
	width:100%;
	bottom:0;
	left:0px;
	
	background-image: url("../img/index_footer_bg.svg");
	background-size: 1920px 200px;

	z-index: -5;
}

	.centerDiv
	{
		position:absolute;
		height:70px;
		line-height:70px;
		width:100%;
		top:140px;
		
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 12px;
	}
	
.cookiesDiv
{
	position:absolute;
	height:290px;
	width:440px;
	top:0px;
	
	background-image: url(../img/index_cookies_bg.svg);
	background-size:500px auto;
	
	padding-left:30px;
	padding-right:30px;
	
	text-align:left;
	color: #666666;
	font-family: sans-serif;
	
	visibility:hidden;
}

	.cookiesDiv h1
	{
		margin-bottom:5px;
	}
	
	.cookiesDiv p
	{
		margin-top:2px;
		margin-bottom:5spx;
	}
	
	.cookiesDiv button
	{
		height:40px;
		width:200px;
		margin-left:auto;
		margin-right:auto;
		border-radius:4px;
		
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 18px;
	}
	
	.cookiesDiv div
	{
		width:100%;
		text-align:center;
	}

#logindiv
{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 150px;
	width:620px;
	height: 450px;
}

#loginArea_bg
{
	position:absolute;
	top:0px;
	left:0px;
	width:620px;
	height:auto;
}

.loginOption
{
	position:absolute;
	width : 174px;
	height : 34px;
	line-height:34px;
	top:33px;
	
	text-align:center;
	color: #666666;
	font-family: sans-serif;
	font-size: 18px;
	
	letter-spacing:2px;
}

#opt0
{
	left:23px;
}

#opt1
{
	left:223px;
}

#opt2
{
	left:423px;
}

.login_content
{
	position:absolute;
	width:580px;
	height:310px;
	left:20px;
	top:90px;
}

#login_teacher
{
	visibility:hidden;
}

#login_guest
{
	visibility:hidden;
}

	.login_content h1
	{		
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 18px;
		font-weight: bold;
		
		letter-spacing:2px;
	}
	
	.login_content p
	{		
		text-align:center;
		margin-bottom:20px;
		color: #666666;
		font-family: sans-serif;
		font-size: 14px;
	}

	.login_content input
	{
		width: 300px;
		display:block;
		margin-left:auto;
		margin-right:auto;
		margin-top:5px;
		margin-bottom:20px;
		padding:5px;
		text-align:center;
		font-family: sans-serif;
		font-size: 18px;
		border-radius:4px;
	}
	
	.login_content label
	{
		display:block;
		margin-left:auto;
		margin-right:auto;
		margin-top:10px;
		margin-bottom:0px;
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 14px;
	}
	
	.login_content button
	{
		height:40px;
		width:200px;
		margin-left:auto;
		margin-right:auto;
		display:block;
		border-radius:4px;
		
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 18px;
	}
	
	.login_content .signup
	{
		position:absolute;
		height:34px;
		width:100px;
		border-radius:4px;
		bottom:18px;
		right:10px;
		text-align:right;
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 14px;
	}

    #teacher_btnForgotPswd
    {
        position:absolute;
		height:34px;
        line-height: 34px;
		width:200px;
		border-radius:4px;
		bottom:18px;
		left:20px;
		text-align:left;
		color: #666666;
		font-family: sans-serif;
		font-size: 14px;
    }

	.sym_construction
	{
		position:absolute;
		width:180px;
		height:161px;
		left:200px;
		top:90px;
		pointer-events:none;
	}
	
	#teacher_loginError{
		position:absolute;
		width:90%;
		height: 20px;
		top:234px;
		left:5%;
		opacity:0.5;
		
		color:red;
		text-align:center;
		font-family: sans-serif;
		font-size: 14px;
	}

	#student_loginError{
		position:absolute;
		width:90%;
		height: 20px;
		top:234px;
		left:5%;
		opacity:0.5;
		
		color:red;
		text-align:center;
		font-family: sans-serif;
		font-size: 14px;
	}

#loginArea_bg #button_middle #btn_glow
{
	opacity:0;
}

#signupdiv
{
	position:absolute;
	top:100px;
	width:620px;
	height: 600px;
	margin-left:auto;
	margin-right:auto;
	visibility:hidden;
}

#signupdiv_bg
{
	position:absolute;
	top:-10px;
	left:-10px;
	width:640px;
	height:auto;
	pointer-events:none;
}

#signupdiv_title{
	position:absolute;
	width:560px;
	height:40px;
	line-height:40px;
	left:20px;
	top:15px;
	
	text-align : left;
	color: #666666;
	font-family: sans-serif;
	font-size: 24px;
	font-weight:bold;
}

#signupdiv_clickTarget_btnExit
{
	position:absolute;
	width:18px;
	height:18px;
	left:591px;
	top:11px;
}

#signup_content
{
	position:absolute;
	width:580px;
	max-width:580px;
	height:510px;
	left:20px;
	top:70px;
	overflow-x:hidden;
	overflow-y:scroll;
}

	#signup_content table
	{
		margin-top:10px;
		width:100%;
	}

	#signup_content td
	{
		vertical-align:middle;
		padding-right:5px;
	}
	
	.smallDescription
	{
		text-align : left;
		color: #666666;
		font-family: sans-serif;
		font-size: 12px;
		line-height:12px;
		opacity:0.8;
		padding-bottom:15px;
	}
	
	.firstColumn
	{
		width:40%;
		text-align:right;
		color: #666666;
		font-family: sans-serif;
		font-size: 18px;
	}

	#signup_content input:not([type]), input[type="text"],input[type="password"]
	{
		width: 250px;
		display:block;
		padding:5px;
		
		text-align:left;
		font-family: sans-serif;
		font-size: 18px;
		border-radius:4px;
	}
	
	#signup_content input::placeholder
	{
		font-size: 14px;
		opacity:0.4;
	}
	
	#signup_content textarea
	{
		width: 250px;
		padding:5px;
		
		text-align:left;
		font-family: sans-serif;
		font-size: 14px;
		border-radius:4px;
		
		resize:vertical;
	}
	
	#signup_teacher_cb_useMail
	{
		position:relative;
		width:10px;
		margin-right:5px;
	}
	
	#cell_checkbox
	{
		margin-top:-10px;
		margin-bottom:15px;
		display:flex;
		
		
		color: #666666;
		text-align:left;
		font-family: sans-serif;
		font-size: 14px;
	}
	
	#signup_teacher_btnSignup
	{
		height:40px;
		width:200px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:20px;
		display:block;
		border-radius:4px;
		
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 18px;
	}
	
	#signup_content p
	{
		margin-left: 20px;
		margin-right: 20px;
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 14px;
	}

	.errorMessage
	{
		color:red;
		font-family: sans-serif;
		font-size: 14px;
		opacity:0.8;
		visibility:collapse;
	}
	
	.errorMessageGeneral
	{
		color:red;
		font-family: sans-serif;
		font-size: 14px;
		opacity:0.8;
		text-align:center;
		margin:5px;
		visibility:hidden;
	}
	
	
#signup_feedback
{
	position:absolute;
	height:200px;
	width:500px;
	top:0px;
	
	background-image: url(../img/index_signupFeedback.svg);
	background-size:500px auto;
	
	text-align:left;
	color: #666666;
	font-family: sans-serif;
	
	visibility:hidden;
}

	#signup_feedback_title
	{
		position:absolute;
		height:40px;
		line-height:40px;
		width:300px;
		left:160px;
		top:30px;
		
		font-size: 18px;
		font-weight: bold;
	}

	#signup_feedback_message
	{
		position:absolute;
		width:300px;
		height:60px;
		left:160px;
		top:70px;
		
		font-size: 16px;
		display:table;
	}

	#signup_feedback_message div
	{
		display: table-cell;
		vertical-align:middle;
	}
	
	#signup_feedback_btn
	{
		position:absolute;
		height:40px;
		width:200px;
		left:210px;
		top:130px;
		display:block;
		border-radius:4px;
		
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 18px;
	}
	
	#signup_feedback_btn[disabled=disabled], #signup_feedback_btn:disabled 
	{
		background-color:#dddddd;
		border-width:0.2px;
	}

/* SPINNER */

	@keyframes rotateStepClockwise {
	  0% {
		transform: rotate(0);
	  }
	  100% {
		transform: rotate(90deg);
	  }
	}

	@keyframes rotateStepCounterClockwise {
	  0% {
		transform: rotate(45deg);
	  }
	  100% {
		transform: rotate(-45deg);
	  }
	}

	.spinner-box {
		position:absolute;
		width: 80px;
		height: 80px;
		left:50px;
		top:60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.spinner
	{
		width: 50px;
		height: 50px;
		padding: 2px;
		display:flex;
		justify-content: center;
		align-items: center;
		background: #eeeeee;
		border:solid;
		border-radius:5px;
		border-width:2px;
		border-color:#666666;
	}

	.spinnerBG {
		position: absolute;
		animation: rotateStepCounterClockwise 0.5s ease-in-out 0s infinite;
		background: #dddddd;
	}

	.spinnerFG {
		left: -115px;
		transform: rotate(45deg);
		animation: rotateStepClockwise 0.5s ease-in-out 0s infinite;
	}


.newPasswordDiv
{
	position:absolute;
	height:550px;
	width:560px;
	top:10px;
	
	background-image: url(../img/index_newPswd_bg.svg);
	background-size:620px auto;
	
	padding-left:30px;
	padding-right:30px;
	
	text-align:left;
	color: #666666;
	font-family: sans-serif;

	visibility: hidden;
}

	.newPasswordDiv h1
	{
		margin-top: 30px;
		margin-bottom:5px;
	}
	
	.newPasswordDiv p
	{
		margin-top:2px;
		margin-bottom:5spx;
	}
	
	.newPasswordDiv button
	{
		height:40px;
		width:200px;
		margin-left:auto;
		margin-right:auto;
		border-radius:4px;
		
		text-align:center;
		color: #666666;
		font-family: sans-serif;
		font-size: 18px;
	}
	
	.newPasswordDiv div
	{
		width:100%;
		text-align:center;
	}

	.newPswd_table_inputs
	{
		width:100%;
		text-align: right;
		margin-bottom: 30px;
	}

	.newPswd_table_requirements
	{
		width:100%;
		text-align: left;
		margin-bottom: 30px;
		vertical-align: middle;
		line-height: 25px;
	}

		.newPswd_table_imgTD
		{
			width:40%;
			text-align: right;
		}

		.newPswd_table_requirements img
		{
			width: 20px;
			height:auto;
			margin-right: 5px;
			margin-top:5px;
		}

#toManual{
    position:relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
    margin-left: 200px;
}