/* XPages Application CSS */
/* Style sheet the login related forms */

html,body {

	background: url( icon_8x8_dotbg.png);
	background-repeat: repeat;
	background-position:center;
	/*overflow:hidden;*/
	height:100%;   /* needed for container min-height */ 

}

A, TABLE, TH, TD, TR, SPAN, DIV {
	font-family: arial;
	font-size: 10pt;
}

/* a {color:#444;} */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;outline:none}

.shadow {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

.container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:100%;
	/* background:#f0f0f0; */
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height */
	min-height:100%; /* real browsers */
	/*
	background: url( icon_8x8_dotbg.png);
	background-repeat: repeat;
	background-position:center;
	*/	
}

/*		
	background: url(dunes-2400x1350.jpg) no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;	

*/

.content {
	padding:1em 1em 5em; /* bottom padding for footer */
}

.dlgLogin {	
	margin-top: 50px;	    
	left: auto;
	right: auto;
	margin-left: auto;
	margin-right: auto;	
	
	background-color:#fff;
	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	line-height: 20px;
	color: #888;
	text-decoration: none;	
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	border-top-right-radius: 12px;
	border-top-left-radius: 12px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	padding:10px;
	border: 1px solid #999;
	border: inset 1px solid #333;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.lbl {	
	font-size: 12px;
	color: #444;
}

.lblCol {
	width: 80px;
}
@media only screen and (max-width: 600px) {
	.lblCol{
		display: none;
	}
}

input[type="text"],input[type="password"] { 
	width: calc(100% - 30px);
	display:block;
	border: 1px solid #999;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	
	height: 24px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;	
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	background-color: #fff !important;
	padding: 5px 5px 5px 20px; 
	font-size: 18px;
	color: #8a8a8a;	
}

.username {
	background: url(icon_16x16_tinyuser.png) no-repeat 4px;
}

.password {
	background: url(icon_16x16_password.png) no-repeat 4px;
}

.random {
	background: url(icon_16x16_cuberandom.png) no-repeat 4px;
}

.email {
	background: url(icon_16x16_mailyellow.png) no-repeat 4px;
}

.lblMsg {
	width:100%;	
	font-size: 14px;
	color: #888;
	text-align:justify;	
}

.lblLegal {
	width:100%;
	padding-top: 11px;
	padding-bottom: 10px;	
	font-size: 10px;
	color: #888;
	text-align:justify;	
}

button {
	background:#0b4c3f;
	color:#fff;
	font-size: 18px;
	height:34px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;	
 	border: 1px solid #999;
}
button:hover {
	background:#fff;
	color:#000;
}
button:focus {
	background:#fff;
	color:#000;
}

.btnLogin {
	/* width:120px; */
	padding-left: 20px;
	padding-right: 20px;
}

.btnLoginOther {
	font-size:14px;
	/* width:280px; */
}

.btnStart {
	width:120px;
}

.btnInputRnd {
	width:120px;
}

.btnNewPwd {
	width:120px;
}

.lblLoginMessage {
	width:100%;
	padding-top: 11px;
	padding-bottom: 10px;	
	font-size: 12px;
	color: #f00 !important;
}

.messagesWait {
	display:block;
	border: 1px solid #999;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 5px 5px 5px 20px; 
	font-size: 12px !important;	
	color: #fff;	
	background-color: #edb90f;
}

.messagesOk {
	display:block;
	border: 1px solid #999;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 5px 5px 5px 20px; 
	font-size: 12px !important;	
	color: #fff;	
	background-color:#9ECA0D;
}

.messagesErr {
	display:block;
	border: 1px solid #999;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 5px 5px 5px 20px; 
	font-size: 12px !important;	
	color: #fff;	
	background-color:#d44;
}

.footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	
	border-top: 1px double gray;		
	height:50px;  			  
			 	
	font-family: Tahoma, Geneva, sans-serif;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);	
}
@media only screen and (max-width: 600px) {
	.footer{
		display: none;
	}
}

.lnkFooter {	
	margin-left:30px;	
	margin-right:30px;	
	font-size: 11px;
	white-space:nowrap;			
}

.logo {
    width: 96px;
    height: 96px;
}

.loadingScreen {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: #f5f5f5;
}
.loadBar {
    width: 150px;
    height: 3px;
    position: relative;
    overflow: hidden;
    background: #cfcfcf;
    margin-top: 22px;
}
.loadBar::before {
    content: "";
    width: 75px;
    height: 3px;
    position: absolute;
    left: -34px;
    background: #95be0c;  
    animation: loadBar 1.5s infinite ease;
}

.formContent {
	padding:20px;
}

.spacing-1 {
	margin-bottom: 12px;
}
.spacing-2 {
	margin-bottom: 24px;
}
.spacing-3 {
	margin-bottom: 36px;
}

.emailButtons {
	display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.emailButton-wrapper {
	display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0 16px;
    color: #646f79;
    border: 1px solid #0b4c3f85;
    border-radius: 6px;
    padding: 10px;	
}
.emailButton-wrapper:hover {
	background: #0b4c3f;
	color: #fff;
    border: 1px solid #0b4c3f;
}
.emailButton-text {
	margin-left:5px;
}
.email-resend-icon {
	margin-left:5px;
}
.email-resend-wait {
	display:none;
}
.email-resend-confirmation {
	display:none;
	color: #95be0c;
}
.email-resend-error {
	display:none;
	color: #954444;
}


/*-- load bar animation CSS--*/
@keyframes loadBar {
    50%{
        left: 100px;
    }
}/* Style sheet the sheet related forms */

html,body {

	background: url( icon_8x8_dotbg.png);
	background-repeat: repeat;
	background-position:center;
	/* overflow:auto !important; */
	height:100%;   /* needed for container min-height */
}

A, TABLE, TH, TD, TR, SPAN, DIV {
	font-family: arial;
	font-size: 14pt;
}

.shadow {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

.dlgSheet {
	margin-top: 10px;	    
	left: auto;
	right: auto;
	margin-left: auto;
	margin-right: auto;
	max-width:800px;		

	background-color:#fff;	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	line-height: 20px;
	color: #888;
	text-decoration: none;	
	
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	border-top-right-radius: 14px;
	border-top-left-radius: 14px;
	border-bottom-right-radius: 14px;
	border-bottom-left-radius: 14px;
	padding:10px;
	border: 1px solid #999;
	border: inset 1px solid #333;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.lblSheet {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;	
}