@charset "ISO-8859-1";
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

* {
  	font-family: Verdana,Arial,sans-serif;
    font-size:12pt;
    color:black;
}

html {
	background-color: #1F1F1F;
}

body {
}

#LoginBottomImage {
	position: absolute;
    left: 0;
    bottom: 10px;
  
    width: 100%;
    overflow:hidden;
}

#hukoImageLoginBottom {
	width:400px;

}

#giggleImage {
	position: absolute;
    left: 0;
    top: 20px;
    height: 200px;
    width: 100%;
    overflow:hidden;
}

#giggleImageContainer {
	width:400px;
	height:73px;
	margin: 0 auto;
}

#masterLoginContainer {
	width:100vw;
	height:100vh;
	margin-top:0px;
	/*background:url("../img/raeder/raeder_background.jpg") repeat-y top center;*/
    background-image: linear-gradient(to top, black 20%, #1F1F1F 90%);
	
}

#qrlogo {
	width:150px;
	left: 50%;
    transform: translateX(-50%);
    padding-bottom: 25px;
    text-align: center;
    position: absolute;
}

#loginContainer {
	width:100%;
	
} 

#pwResetExplainTextContainer {
	width:80%;
	text-align:center;
	margin:0 auto;
	margin-top:10px;
}
#pwResetExplainText {
	 font-size:9pt;
	 margin:0 auto;
}

#setPWExplainTextContainer {
	width:80%;
	text-align:center;
	margin:0 auto;
	margin-top:10px;
}

#setPWExplainText {
	 font-size:9pt;
	 margin:0 auto;
}

#wrongPassAlert {
	background-color: #CCCCCC;
	color:red;
	margin:0 auto;
	padding:3px;
	width:400px;
	text-align:center;
	box-shadow: 10px 10px 10px black;
	-moz-box-shadow: 10px 10px 10px black;
  	-webkit-box-shadow: 10px 10px 10px black;
  	border-radius: 5px;
  	
}

#wrongPassAlertDIV {
	z-index:12;
	position:fixed;
	margin: 0 auto;
	left: 50%;
	top:310px;
    transform: translateX(-50%);
    background:white;
}

#wrongPassAlertDIV2 {
	z-index:12;
	position:fixed;
	margin: 0 auto;
	left: 50%;
	top:380px;
    transform: translateX(-50%);
    background:white;
    border-radius: 5px;
}

#loginPanel {
	width:500px;
	background:#303134;
	border:none;
	z-index:10;
	position:fixed;
	margin: 0 auto;
	margin-top:150px;
	box-shadow: 10px 10px 10px black;
	-moz-box-shadow: 10px 10px 10px black;
  	-webkit-box-shadow: 10px 10px 10px black;
	left: 50%;
    transform: translateX(-50%);
    padding-bottom: 25px;
    text-align: center;
}
#userNameSave {
	display:none;
}
#pageSave {
	display:none;
}

#setPWPanel {
	width:500px;
	height:210px;
	background:white;
	margin-top:80px;
	border:1px solid #CCCCCC;
	box-shadow: 10px 20px 30px grey;
	z-index:10;
	position:fixed;
	margin: 0 auto;
	margin-top: 180px;
	left: 50%;
    transform: translateX(-50%);
}

#forgotPanel {
	width:500px;
	height:200px;
	box-shadow: 10px 20px 30px grey;
	background:white;
	margin-top:80px;
	border:1px solid #CCCCCC;
	z-index:10;
	position:fixed;
	margin: 0 auto;
	margin-top:80px;
	left: 50%;
    transform: translateX(-50%);
}
#loginForm {
	
}

#loginTable {
	width:80%;
	margin:0 auto;
	margin-top:20px;
}
#setPWTable {
	width:80%;
	margin:0 auto;
	margin-top:20px;
}

#loginLabel {
	color: white !important;
}

#setPWLabel {
	margin-top:10px;
	text-align:center;
}
#forgotTable{
	width:80%;
	margin:0 auto;
	margin-top:20px;
}
#loginLabelC {
	margin-top:10px;
	text-align:center;
}
#forgotLabelC {
	margin-top:10px;
	text-align:center;
}
#userNameLabel  {
	color: white !important;
}

button {
	outline: none;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-style: none;
    border-radius: 10px;
    border-width: 0;
    background-color: #94AFF7;
    margin-top: 15px;
    margin-left: 10px;
    width: 80%;
    font-size: 15px;
    font-weight: bold;
    padding: 0px !important;
    height:35px;
}

button:hover {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-style: none;
	cursor:pointer;
	background-color: #89A2E4;
	font-weight: bold;
}

input:focus {
	outline: none;
}
button:focus {
	outline: none;
}

#usernameInput {
	background-color: #757575 !important;
	color: white !important;
	width:100%;
	border:none;
	border-radius: 5px;
	padding-left:5px;
}
#passwordLabel {
	color: white !important;
	border:none;
}
#passwordInput {
	background-color: #757575 !important;
	width:100%;
	border:none;
	border-radius: 5px;
	color: white !important;
	padding-left:5px;
}

#pwInput {
	width:100%;
}
#pwInputRepeat {
	width:100%;
}
#loginButtonDiv {
	text-align:center;
}
#changePWButtoDiv {
	text-align:center;
}
#loginButtonLabel {
}

#changePWButton {
	background-color:#E5E4E2;
	cursor:pointer;
	border: 1px solid #E5E4E2;
	width:180px;
	padding:5px 25px;
	margin-top:15px;
	text-align:center;
	/*margin-left:15px;*/
	color:black;
	/*background-color: #c1c1c1;*/
	box-shadow: 0 0 2px gray;
	background-color:#E5E4E2;
}
#changePWButton:hover {
	cursor:pointer;
	border: 1px solid #82CAFF;
	background: #E5E4E2;
	/*background:blue;*/
	font-weight: normal;
	color: #212121;	
	box-shadow: 0 0 2px #2d89ef;
}
#forgotButtonDiv {
	text-align:center;
}
 #forgotButton{
 	border: 1px solid #E5E4E2;
 	background-color:#E5E4E2;
	cursor:pointer;
	width:150px;
	padding:5px 25px;
	margin-top:15px;
	text-align:center;
	/*margin-left:15px;*/
	color:black;
	/*background-color: #c1c1c1;*/
	box-shadow: 0 0 2px gray;
	 width: 250px;
}
#forgotButton:hover {
	cursor:pointer;
	border: 1px solid #82CAFF;
	background: #E5E4E2;
	/*background:blue;*/
	font-weight: normal;
	color: #212121;	
	box-shadow: 0 0 2px #2d89ef;
}

#loginFoot {
	width:1021px;
	height:260px;
	position:absolute;
	right:0px;
	bottom:0px;
	background:green;
}

#loginFootImage {
	width:100%;
	height:100%;
	background:url("../img/raeder/footer.jpg") bottom;
	background-repeat:no-repeat;
	position:absolute;
    bottom:0px;
}