html { font-family:Verdana,Tahoma,Arial,"Helvetica Neue",Helvetica,Sans-Serif; font-size:75%; background-color:#DAE2E8; }
html, body { height:100%; margin:0px; padding:0px; }

.login-spacer { height:1%; }
.login-page { height: 97%; width:98%; margin:auto; background-color:#F3F9F9; border:1px solid #1866A6; display:table; }
.login-page .cell { display:table-cell; vertical-align:middle; text-align:center; }
.login-page .cell form { display:inline-block; border:0px solid #dedede; padding:20px; text-align:right; }

.login-page .cell form .att { display:block; padding:8px; text-align:left; font-style: italic; }

.login-page input[type=text], .login-page input[type=password]
{
	width: 250px;
	border: 1px solid #CCCCCC;
	box-sizing: border-box
}

.login-page input[type=password] {
	padding-right: 30px;
}

.content {
	position: relative;
}

.content .hideshow {
    position: absolute;
    right: 4px;
    top: 33px;
}

.content .control .hideshow {
	right: 4px;
	top: 63px;
}

.required-field {
	display: inline-block;
	width: 150px;
	text-align: right;
	line-height: 30px;
	margin-right: 4px;
}
.required-field:before { content:"*"; position:absolute; text-indent:-10px; color:Red; font-size:12px; }
.required-field.popup {
	display: inline-block;
	width: unset;
	text-align: left;
	line-height: 30px;
	margin-right: 4px;
}
.error { background-color: #FFA4A4; }
#cntError { color:Red; max-width:320px; text-align:center; padding:10px 0px; display:none; position:absolute; }
#validationSummary { text-align:left; color:Red; }
.version { position:absolute; bottom:3%; right:2%; }

.alt-button { background:url('images/bg2.png') repeat-x scroll 0 0 #a47e24; font-weight:bold; }
.alt-button:hover { background-color:#FFCB36; background-position:0 -688px; }
.republic-day { position:absolute; margin-left:-320px; margin-top:-120px; display:inline; }
.women-day { position:absolute; margin-left:-320px; margin-top:-80px; display:inline; }
.nauryz-day { position:absolute; margin-left:-320px; margin-top:-170px; display:inline; }
.may-day { position:absolute; margin-left:-420px; margin-top:-120px; display:inline; }
.defender-day { position:absolute; margin-left:-320px; margin-top:-170px; display:inline; }
.victory-day { position:absolute; margin-left:-320px; margin-top:-120px; display:inline; }

#cntProgress { position:absolute; display:none; padding:4px 10px; background-color:#9eb6b6; opacity:0.8; color:yellow; }

.control {
    display: none;
}

@keyframes christams-overlay-showflake {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-moz-keyframes christams-overlay-showflake {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-webkit-keyframes christams-overlay-showflake {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}


body.christmas div.login-page { 
	background-color: transparent;
	background-image: url('images/christmas/s1.png'), url('images/christmas/s2.png'), url('images/christmas/s3.png');
	-webkit-animation: christams-overlay-showflake 10s linear infinite;
	-moz-animation: christams-overlay-showflake 10s linear infinite;
	animation: christams-overlay-showflake 10s linear infinite;
}

body.christmas-old #frmLogon { 
	background: url('images/christmas/logon_tree.gif') top left no-repeat; 
	background-size:contain;
	padding-top:90px; 
}

body.christmas { 
	background: url('images/christmas/bg_winter.jpg') top right no-repeat; 
	background-size:cover;
}

body.christmas #frmLogon { 
	background-color:#c6d6d6;
	opacity:0.8;
	padding:0px;
	border-top-left-radius:6px;
}

body #frmLogon .capture { display:none; }
body.christmas #frmLogon .capture { 
	
	display:block;
	font-weight:bold;
	font-size:120%;
	color:white;
	padding:12px 14px;
	background-color:#393995;
	text-align:left;
	border-top-left-radius:6px;
}

body.christmas #frmLogon .content { padding:15px 20px; }
body.christmas #frmLogon input { padding:2px; }
body.christmas #cntError { background-color:#F1B3D7; border-radius:4px; margin-top:20px; }
body.christmas .alt-button { background:#52a70d; font-weight:bold; cursor:pointer; border:solid 1px; color:white; border-radius:2px; height:26px; width:80px; }
body.christmas .alt-button:hover { background-color:#52a70d; }
body.christmas .version { color:white; }
body.christmas .login-page { border-color:#c6d6d6; }

body .santa-hat { display:none; position:absolute; }
body.christmas .santa-hat { position:absolute; margin-left:-60px; margin-top:-30px; display:inline; }

#overlay { display: none; opacity: 0.5; height: 100%; width: 100%; z-index: 1001; position: fixed; top: 0px; left: 0px; background-color: #000; }
#overlay.active { display:block; }
#overlay img { position:absolute; top:35%; left:45%; }

.login-page .cell h1.title {
     background-image: linear-gradient(90deg, #000000, #b0b0b0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: animate 5s linear infinite;
    background-size: 400%;
    margin-bottom: 0;
}

@keyframes animate {
   0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hideshow {
    font-size: 1.3em;
    border-radius: 50%;
    cursor: pointer;
}

.hideshow:hover {
    background-color: #FFC741;
    text-shadow: 1px 1px 1px #000;
    box-shadow: #514312 3px 3px 6px;
    color: #fff;
}