* { margin: 0; padding: 0; box-sizing:border-box; -moz-box-sizing:border-box; border:0; }
html { height: 100%; overflow: auto;  }
body {  background-color: #BAC2CD; font-family: "Arial", "Helvetica", sans-serif; height: 100%; }
a, a:visited {color: #3a3a3a;font-size: 12px;font-weight: bold;text-decoration: none; text-shadow: 0px 0px 1px #9b9a9a; }

.l-effect {position: relative;}
.l-effect:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: #fff;
    visibility: visible;  
    border-radius: 5px;
    transform: scaleX(1);
    transition: .25s linear;
}

.l-effect:hover {text-decoration: none;}
.l-effect:hover:before {
    visibility: hidden;
    transform: scaleX(0);    
}

.fail-msg {display: none; position: absolute; top: 0; left: 0; /* background: #fffde7 */ background: rgba(0,0,0, 0.5); width: 100%; padding: 1em 1em 1.5em; color: #dfdede; border-bottom: 1px solid #555; box-shadow: 1px 0 10px #333; font-size: .9em; line-height: 1.4; }
.orange {color: #FF9C5B;}
.fail-inner {margin: 0 auto; max-width: 430px;}
.fail-hdr {text-align: center;margin-bottom: 5px; font-weight: 300; color: #F77825;animation-delay: 1s; }
.failBox1 {border-bottom: 1px dotted #fff; margin-bottom: 1em; display: inline-block; padding: 0 .5em .7em; }
.msg-hl {display: inline-block; border-bottom: 1px solid #fff; }
a.link1 { font-size: 1em; font-weight: normal; text-decoration: none; text-shadow: none; color: #fff; padding-bottom: 3px;}
.bold {font-weight: bold;}
.fail-msg ul {list-style: none; margin-left: 0;}
.fail-msg li { position: relative; padding-left: 1.2em;}
.fail-msg li:before {  content: '\2192';  color: #F77825; 
    position: absolute;
    left: -5px;
}

#loginForm { height: 100%; }

#loginForm input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px #444 inset;
    -webkit-text-fill-color: #808080 !important;
}

#tableForCentering { margin: auto; width:400px; height: 100%;  vertical-align: middle; text-align: center;  }

#tableForCentering .inputContainer { 
    width: 280px; 
    margin:auto; 
    border-radius: 4px; 
}

#tableForCentering input { width: 280px; border: 0; height: 50px; padding-left: 40px; font-size: 13px; color:#d8d8d8; 
 text-shadow:0px 0px 4px #534d4d; font-family: "Roboto",Arial, Helvetica, sans-serif;  }
#tableForCentering input:focus {  outline: none; }


#tableForCentering .usernameContainer, #tableForCentering .passwordContainer {  width: 280px; margin: auto;   position: relative; }
input#username {
    background-color: #444444;
    border-bottom: 1px solid #000;  
    /* border-radius: 4px 4px 0 0;  */
    border-radius: 7px;
    position: relative; 
    margin-bottom: 1px;
}
#tableForCentering .usernameContainer:after { position: absolute;  content:  url('/img/login/username.png'); left: 10px; top:13px;  }
#tableForCentering .passwordContainer:after { position: absolute;  content: url('/img/login/password.png'); left: 10px; top:13px;  }
input#password {

    background-color: #3e3e3e;
    background-image: -webkit-linear-gradient(top, #3e3e3e, #444444); /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #3e3e3e, #444444); /* Firefox 3.6-15 */
    background-image:         linear-gradient(to bottom, #3e3e3e, #444444); /* Firefox 16+, IE10, Opera 12.50+ */
    border-top: 1px solid #626161; 
    border-radius: 0 0 4px 4px ; 
    border-radius: 7px;
}

button,a.button { 
    width: 280px; 
    margin-top: 20px; 
    height: 42px; 
    font-size: 18px;
    /* font-family: "Roboto",Arial, Helvetica, sans-serif;  */
    color: #717070;
    background-color: #fafaf9;
    cursor: pointer; 
    box-shadow: inset 0 0px 1px 1px #333;
    border-radius: 7px;
}

.arrow_box {
    display: none;
    position: relative; 
    border: 1px solid #913d04;
    width: 280px;
    text-shadow:0px 0px 9px #f7b387; 
    margin: auto auto 20px auto;
    padding: 9px; color: #6a2a00;
    font-size: 13px;
    font-weight: bold;
    background-color: #ffad00;
    border-radius: 7px;
}
.arrow_box.show {
    display: block;
}

.arrow_box:after, .arrow_box:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 
.arrow_box:after { border-color: rgba(136, 183, 213, 0); border-top-color: #ffad00; border-width: 8px; left: 50%; margin-left: -8px; } 
.arrow_box:before { border-color: rgba(194, 225, 245, 0); border-top-color: #291200; border-width: 9px; left: 50%; margin-left: -9px; }

.loginText{margin-bottom: 15px; padding-top: 30px;}

/* Reset Password Box */
.resetPass{
background: #EFEFEF url(/img/loading.gif) center center no-repeat;
float: left;width: 400px;padding: 20px; border-radius: 7px;}
.resetPass h2{font-size: 24px;text-align: center;cursor: default;border-bottom: 1px solid #CCCCCC;padding:2px 0 10px 20px;background: url(/img/password-2.png) no-repeat 0 top;}
.resetPass h2.green{color: #18A10C;background: url("/img/bouncing/success-3.png") no-repeat left top;font-size: 20px;text-align: left;padding-left: 55px}
.resetPass h2.red{color: #F52B2B;background: url("/img/bouncing/error-3.png") no-repeat left top;padding-bottom: 15px;padding-top: 5px}
.resetPass .input{width: auto;clear: both;padding:20px 0;text-align: center;color: #444;border-radius: 7px;}
.resetPass .input input[type=text] {color: #666;font-family: "Roboto",Arial,Helvetica,sans-serif;font-size: 13px;height: 40px;width: 280px;background-color: #FFF;border-radius: 4px ;border: 1px solid #626161;text-align: center;}
.resetPass .button {font-weight:bold ;margin: 0 auto 5px;box-shadow: none;border-radius: 3px 3px 3px 3px;display: inline-block;width: 40%;text-align: center;line-height: 45px;height: 45px;font-size: 16px;text-shadow: none;border-radius: 7px;}
.resetPass .button:hover {box-shadow:0 0 10px #FFF inset;color: #555;transition:all linear .2s;}

.resetPass .button.cancel{margin-left: 30px;margin-right: 4px}
.resetPass label {margin: 0 0 5px 0;display: block;}
.resetPass .button.submit{color: #444}
.resetPass .success .button{width: 50%;display: block;}

.resetPass .box {
display: none;
/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center, circle closest-side, #FFFFFF 0%, #EFEFEF 100%);
/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle closest-side, #FFFFFF 0%, #EFEFEF 100%);
/* Opera */ 
background-image: -o-radial-gradient(center, circle closest-side, #FFFFFF 0%, #EFEFEF 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 140, color-stop(0, #FFFFFF), color-stop(1, #EFEFEF));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle closest-side, #FFFFFF 0%, #EFEFEF 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle closest-side at center, #FFFFFF 0%, #EFEFEF 100%);
}

.resetPass .box p{margin: 15px 0 40px; text-align: center; font-size: 14px}
.resetPass .box.current {display: block;}
.resetPass .box.error p{margin: 20px 0 0;text-align: center;}
.resetPass .loading{position: absolute;top: 100px;left:46%;background: url(/img/loading.gif);width: 32px;height: 32px;display: none;}
.resetPass .box.current .input input[type=text].warning{border: 1px solid red }
.resetPass .current .warningText{font-size: 12px;margin: 0 0 0 0;font-style: italic;color: #D60003;position: absolute;left:60px;}
.resetText{padding: 0;}
.resetText.right{float: right;}
.resetText.left{float: left;}
.resetText:hover{color: #000}
.loginPage .fancybox-close{display: none;}

.loginPage .modal.two-factor-auth .controls {
	text-align: right;
}
.loginPage .modal.two-factor-auth .error {
	color: red;
}
.loginPage .modal.two-factor-auth input {
    background-color: #FFF;
    border-bottom: 1px solid #000;
    border-radius: 4px 4px 0 0; 
    height: 40px;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1.5em;
}
.loginPage .modal.two-factor-auth h2{
    font-size: 24px;
    text-align: center;
    cursor: default;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 1em;
}

.helpPopup .fancybox-skin{
    border-radius: .6em;
}

.helpPopup p {
    position: relative;
    line-height: 1.5em;
}

.helpPopup a {
    text-shadow: unset;
    text-decoration: underline;
    font-size: 1em;
}

.helpPopup .contentPanel {
    position: relative;
    margin-top: 1em;
}
.helpPopup .title {
    background: #3F3F3F;
    color: white;
    text-align: center;
    padding: 0.5em;
    border-radius: 1.5em;
    margin-bottom: 1em;
}
.helpPopup .paragraph {
    margin-top: 0.5em;
}
.helpPopup ul {
    margin-top: 0.5em;
}
.helpPopup ul li{
    position: relative;
    line-height: 1.5em;
}
.helpPopup ul li div.description{
    position: relative;
    width: 100%;
    clear:both;
    overflow: hidden;
}
.helpPopup ul li span.seq{
    position: relative;
    float: left;
    padding: 0.1em 0.5em;
    border: 3px solid #575656;
    border-radius: 50%;
    font-weight: bold;
    color:white;
    background: #575656;
    margin-right: .3em;
}
.helpPopup ul li span.text{
    position: relative;
    float: left;
    width: 80%;
    padding: .4em 0 0 0.1em;
}
.helpPopup ul li div.image {
    position: relative;
    width: 250px;
    margin-top: 1em;
    margin-left: 2.5em;
}
.helpPopup ul li img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.helpPopup .close-btn {
    position: relative;
    width: 6em;
    border-radius: 5em;
    background: #3F3F3F;
    color: white;
    margin: 1em auto 1em;
    display: block;
}

#maintenanceNotice .demo-message {
    color: #333;
    margin-bottom: -200px;
    padding: 44px 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 150px;
    width: 62%;
}
#maintenanceNotice .demo-message a {
    color: #3a3a3a;
    text-decoration: none;
    text-shadow: 0px 0px 1px #9b9a9a;
    font-family: "Arial", "Helvetica", sans-serif !important;
	font-size: 1em !important;
}

#maintenanceNotice .demo-message .centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#maintenanceNotice .demo-message .title img {
    margin-right: 10px;
}


@media screen and (max-width: 600px){
    #maintenanceNotice .demo-message {width: 90%;}
    #maintenanceNotice .demo-message .centered {left: 40%;}
    #maintenanceNotice .demo-message .title{display: block; float: inherit;}
    #tableForCentering {width: auto;}
}

 @media screen and (min-width: 820px)  {
    #maintenanceNotice .demo-message {width: 50%;}
    #tableForCentering {width: auto;}
} 

@media only screen and (max-width:1025px){
    #maintenanceNotice .demo-message {width: 86%; padding: 60px 10px;}
}