body { font-family: "Trebuchet MS",Verdana,sans-serif; font-size: 12px; color: #fff; padding: 0px; margin: 0px; background-color: #444450; }
body:before{
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	background-image: url(serve?file=/logindesign-a73bf99b66d6/topjob-authentication-background);
	background-repeat: no-repeat;
	background-size: cover;
}
a { color: #565656; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
p { margin-top: 5px; margin-bottom: 5px; }
input, button { font-size: 16px; font-weight: normal; color: Gray; }

.OuterFrame { margin: 2% 4%; position: relative; }

.tj-logo { width: 12%; max-width: 125px; margin: 2% 0% 0% 2%; position: relative; }
.tj-content { width: 565px; height: 340px; float: left; padding: 0 0 0 30px; }
.Head { font-size: 5em; color: #D4B06A; text-align: center; font-weight: bold; text-transform: uppercase; margin-bottom: 50px; }
.Content { text-align: center; line-height: 1.7; font-weight: 400; font-size: 1.3em; height: 16em; }
.form-content{
	display: flex;width: 100%;
}
.row{
	width: 100%;
	display: flex;
	height: 3em;
	margin-bottom: 10px;
}
.row span{
	text-align: right;
	width: 100%;
	padding-right: 30px;
	height: 1.9em;
	align-self: center;
}
.content-spacer{
	width: 100%;
}
.content-container{
	width: 70%; 
}
.Footer {
	width: 100%;
	text-align: center;
	margin-top: 5px;
	line-height: 1.25;
}
.Footer a:last-of-type {
  margin-left: 40px;
}
.Footer a{
	color: white;
}
.Footer a img{
	vertical-align: top;
	margin-right: 10px;
}
/*.Footer { border-top: 1px solid #898989; line-height: 1.5; padding: 25px 0 0 0; display: flex; flex-wrap: nowrap; }
.Footer .zeag-logo { width: 150px; flex-grow: 0; display: flex; align-items: center; justify-content: center; }
.Footer .hsg-logo { width: 134px; flex-grow: 0; display: flex; align-items: center; justify-content: center; }
.Footer .address { flex-grow: 1; }*/

.error-frame { font-weight: bold; font-size: 1.1em; padding: 10px; min-width: 235px; text-align:center; color: white; }

input[type="text"] { border: 1px solid #D5B37B; border-radius: 0px; height: 100%; padding: 0 10px; background-color: #00000000; color: #c1a983; width: 100%; outline: none; }
/*input[type="text"][name="Model.ApplicationCode"] { width: 50px; }
input[type="text"][name="Model.Logincode"] { width: 100px; }*/

button{
	border: 1px solid #c1a983;
	text-align: center;
	border-radius: 0px;
    width: 100%;
    height: 3em;
    background-color: #0000;
    color: #c1a983;
	cursor: pointer;
}
button:hover{
	color: #2d2f35;
	background-color: #c1a983;
}
button:active {
	color: #2d2f35;
	background-color: #c1a983;
}

.info{
	display: inline-block;
	padding: 0px 9px;
	background-color: #d0aa6d;
	color: black;
	cursor: pointer;
	position: absolute;
	white-space: initial;
	width: 10px;
	font-weight: bold;
	margin-left: 0.5em;
}

.info > .info-message{
	display: none;
}

.info:hover, .cockpit .info:focus-within {
	background-color: #71180c;
	color: #d0aa6d;
}

.info .info-message a {
	color: #000;
	text-decoration: underline;
}

.info:focus .info-message,
.info:focus-within .info-message {
	position: absolute;
	display: block;
	left: 40px;
	width: 350px;
	top: -25px;
	background-color: white;
	-webkit-box-shadow: 4px 3px 8px 0px rgba(43,43,43,1);
	-moz-box-shadow: 4px 3px 8px 0px rgba(43,43,43,1);
	box-shadow: 4px 3px 8px 0px rgba(43,43,43,1);
	color: #000;
	font-size: 0.9em;
	padding: 0.25em;
	cursor: default;
	font-weight: normal;
}

@media only screen and (max-width: 1300px) {
	.info:focus-within .info-message {
		left: -130px;
		width: 230px;
		top: 35px;
	}
}
@media only screen and (max-width: 850px) {
    body { font-size: 10px; }
    .OuterFrame { padding-top: 5%; }
    .Head { font-size: 2.0em; }
	.content-spacer:last-of-type{
		display: none;
	}
	.content-container{
		width: 100%;
	}
	.content-spacer{
		width: 30%;
	}
	.tj-logo{
		height: 8%;
	}
	.info{
		width: 5px;
	}
	.info:focus-within .info-message {
		left: -212px;
		width: 230px;
		top: 35px;
	}
	input{
		font-size: 14px !important; 
	}
}