@charset "UTF-8";
* {margin: 0px; padding: 0px; border: none;}
body{background: url('../../imgs/1436/pattern-light.png') repeat; overflow:hidden;font-family: 'Roboto', arial;}
.content {margin: auto;	position: absolute;top: 50%;left: 50%;text-align: center;background: url('../../imgs/1436/login-bg.png') no-repeat center;background-size: contain;padding: 60px;top: 52%;width:100%;	transform: translate(-50%, -50%);}
.heading-title {position: absolute;top: -50px;transform: translateX(-50%);left: 50%;color: #3C5A05;font-size: 24px;text-transform: capitalize;}
.logo-image {position: absolute;top: -253px;left: 50%;transform: translateX(-50%);background-color: white;padding-bottom: 50px;padding: 20px 40px;border-radius: 50%;background-image: url('../../imgs/1436/ITS.png');height: 153px;width: 153px;background-repeat: no-repeat;background-position: center center;background-size: contain;background-size:auto;}
.input-group{width:100%}
.input-username, .input-password {padding-bottom: 15px;}
.input-control {width: 300px;border-radius: 5px;padding: 3px;}
.btn-login {border-radius: 5px;color: #FCEBB5;background-color: #3C5A05;width: 300px;padding: 7px;}
.divForget{	display:none;}
.lblRemeberMe{color:#fff}
.form-label{display:none}
input:focus{outline: none;}
input[type="number"] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.base-start{margin-top:0px;}
h3 { color: #3C5A05; }
#hideeye{display:none}
.eye{color:#ad8e6b;vertical-align:middle;margin-left:-35px;cursor:pointer;display:inline;font-size:16px;position:absolute;margin-top:0px}
.btn {color: #FCEBB5 !important;background-color: #517906;}
/*Images*/
.img-centered{margin:auto}

/*Helper CSS*/
.indicator{position: fixed; z-index:10000;color: white;}

.login-container{border-top: solid 5px #b48638; border-color:#3C5A05;}
#logo-box{margin: auto; margin-top: 20px;}
.welcome-message{color: #845c13;}
#login-box{background:url('../../imgs/1436/login-bg.png') no-repeat center; background-size: contain; padding: 25px; color: #fff;position: absolute; width: 100%;top: 52%; transform: translateY(-50%);}
#login-box input{color: #907645;}
#login-box #username{padding-top: 30px;padding-bottom: 10px;}
#login-box #password{padding-top: 10px; padding-bottom: 10px;}
.browser-link{color: black}

.checkbox{display:inline-block;white-space:pre-line;margin:0px !important;padding:0px !important;vertical-align:middle;min-width:90px}
.mr-checkbox{position:relative;display:inline-block;white-space:pre-wrap;vertical-align:middle;padding:3px}
.mr-checkbox:after{content:"check_box_outline_blank";font-family:'Material Icons Outlined';font-size:32px;vertical-align:middle;letter-spacing:normal;display:inline-block;color:#3C5A05}
.mr-checkbox.selected:after{content:"check_box";color:#dfb636}
.mr-checkbox:hover:after{color:#dfb636}
.mr-checkbox input[type="checkbox"]{margin-left:10px;margin-top:16px;position:absolute;cursor:pointer;outline:none;opacity:0;z-index:2}

#forgot{line-height: 28px;}	
a{color:#fff;}

#username #username-label{padding: 5px;}
#password #password-label{padding: 5px;}
#login-box input{border-radius: 5px;padding: 3px;background-color: #fff9d8;}
#login-box input::-webkit-input-placeholder{color:#dfc458;font-size: 0.9em;}
#forgot label{font-weight: normal;}
#submit-btn{padding-bottom: 30px;padding-top: 0px;}
#submit-btn input{border-radius: 5px;color: #FCEBB5;background-color:#3C5A05;}
#submit-btn input:hover{color: #FCEBB5;background-color:#517906;}
#white-patch{width: 100%;height: 50%;overflow: hidden;background-color: #fff;opacity: 0.3;position: absolute;top: 52%;z-index: -1;}
.trapezium {border-bottom: 20px solid #b48638;border-left: 10px solid transparent;border-right: 10px solid transparent;height: 0;}

/*Footer - sticky*/
html, body {height: 100%;}
.footer{position: fixed; bottom:0; background-color: #B48638; color: #FFF; padding:10px; text-align:center; width:100% }
.footer p {margin-bottom:0px;}
.footer a {color:#fff;}

.dg-icon-box{position:relative}
.dg-icon{position:absolute; top:-5px;left:0px; color:#FCEBB5}
.imgCaptcha{vertical-align: top;margin-top: 10px;border-radius:5px}
.captchaBox{width:100px;height:30px;vertical-align: top;margin-top: 10px; text-align:center}
.btnRefresh{ color: #FCEBB5 !important; background-color: transparent !important;font-size:30px}

@media (max-width:480px) {/*tiny screens*/
	.indicator{background-color:magenta;}
	.indicator:after{content: "Mobile (Small)";}
	#login-box{padding: 0px;}
	#login-box{background: #b48638; padding: 15px; color: #fff;}
	.content{background: #b48638; padding: 25px 15px 15px 15px;}
	.heading-title{width: 100%;}
	.footer p{font-size:10px;}
	#login-box #username{padding-top: 0px;}
	#submit-btn{padding-bottom: 0px; padding-top: 15px;}
}
@media (min-width: 481px) and (max-width: 768px) {/*x-small screens*/
	.indicator{background: red;}
	.indicator:after{content: "Mobile (large)"; position:inherit;}
	#login-box #username{width: 80%; margin-left:10%;}
	#login-box #password{width: 80%; margin-left:10%;}
}
@media (min-width: 769px) and (max-width: 992px) {/*small screens*/
	.indicator{background: green;}
	.indicator:after{content: "Tablets";}
}
@media (min-width: 993px) and (max-width: 1199px) {/*large screens*/
	.indicator {background: orange;}
	.indicator:after{content: "Desktop";}
}
@media (min-width: 1200px) {/*x-large screens*/
	.indicator {background: purple;}
	.indicator:after{content: "large-desktops";}
}

/*jQuery Msg*/
.material-icons{font-family:'Material Icons Outlined';font-weight: normal;font-style: normal;font-size: 24px;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;}
#purr-container {position: fixed; top: 100px; right: 5px; z-index:1072;}
.notice {position: relative; width: 353px; min-height: 100px; background: #666; border-radius: 5px; transition: all 1s; margin: 10px;}
.notice:hover {background:#000;}
.notice .icon {float: left; font-size: 75px; padding: 1px 5px 1px 5px;}
.notice .close{position: absolute; top: 10px; right: 10px; display: inline-block; color: #fff;}
.notice .close:after{content: "X";}
.notice .close:hover {background-color:#e90f14; color:#000; padding: 3px 5px 4px 5px; border-radius: 10px; text-shadow:none;}
.notice-body {min-height: 50px; padding: 10px 10px 20px 10px; color: #f9f9f9;}
.notice h3 {margin: 0; font-size: 1.6em; color: #fff; text-align: left; border:none; font-family: sansita;}
.notice p {margin: 0px;}
.notice .info {color:#FFFF00;} 
.notice .done {color:#0fe91e;}
.notice .error {color:#e90f14;}