/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

body {
    background-size:cover !important;
    font-size: 12px;
    font-family: tahoma, arial, verdana, helvetica, tahoma;
}

.notice {
    width: 100%;
    color: #0088cc;
    position: fixed;
    top: 0;
    font-size: 12px;
    font-weight: bold;
    height: 52px;
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
    background: url(../images/login/LoginTop.png) #10a5d3;
}

    .notice p.warn {
        text-align: center;
        line-height: 45px;
    }

    .notice a.close {
        width: 9px;
        height: 9px;
        float: right;
        background: url(../images/close.png) no-repeat top left;
        text-indent: -9999px;
        margin-right: 15px;
        margin-top: 20px;
    }

        .notice a.close:hover {
            background: url(../images/close-hover.png) no-repeat top left;
        }

.form-bg {
    width:500px;
    /*width: 370px;
    height: 222px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    background: url(../images/login/form-bg.png) top left;
    padding: 8px;
    float: left;
    display: block;
    margin-left: 0px;
    margin-top: 0px;
    background-color: #234d9d;*/
}

.form-bg form {
    /*height: 220px;
    background: #fff url(../images/login/bg_form.jpg) repeat-x top left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);*/

    padding:30px 50px;
    background: #fff;
    opacity: .85;
    border-radius: 0;
}

.form-bg form h2 {
    /*font-size: 12px;
    font-weight: bold;
    color: #428bca;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 0 1px 0 #fff;
    filter: dropshadow(color=#fff, offx=0, offy=1);
    line-height: 45px;
    margin-bottom: 12px;
    margin-left: 25px;*/

    text-align: center;
    font-size: 20px;
    color: #424242;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.form-bg form p{
    margin:0;
    padding:10px 0;
    clear:both;
}
.form-bg form p > label{
    width: 100px;
    float: left;
    /* display: initial; */
    /* margin-left: initial; */
     font-weight: normal; 
    padding: 4px 0;
}
.form-bg form p > span{
    border-bottom:1px solid #b5b5b5;
    margin-left:120px;
    display:block;
    width:280px;
}
.form-bg form p > span > input{
    margin: 0;
    padding: 6px 5px;
    border: 0;
    box-shadow: none;
    border-bottom: 1px solid #fff;
    height: initial;
    display:initial;    
    width:270px;
    border-radius:0;
    color:#000;
}
.IsLdapSignIn > p > span{
    border-bottom:none !important;        
}
.IsLdapSignIn > p > span > input{
    border-bottom: 1px solid #b5b5b5 !important;
}
.form-bg form p > span > input:focus,
.IsLdapSignIn select:focus{
    box-shadow:none;
    border:none;
    border-bottom:1px solid #b5b5b5 !important;
}

/*input[type="text"], input[type="password"] {
    box-shadow: 0px 0px 0px 4px #f2f5f7;
    width: 290px;
    height: 30px;
    padding: 0 10px 0 10px;
    margin: 0 auto;
    color: #aeaeae;
    border: 1px solid #bec2c4;
}*/

/*input[type="text"]:focus, input[type="password"]:focus {
    box-shadow: 0px 0px 0px 4px #e0f1fc;
    border: 1px solid #7dc6dd;
}*/

input[type="checkbox"] {
    vertical-align: middle;
}

button {
    background: url(../images/login/login.png) no-repeat;
    width: 102px;
    height: 32px;
    border: 0px;
    float: right;
    margin-right: 38px;
}

    button:hover {
        background: url(../images/login/login_hover.png) no-repeat;
        width: 102px;
        height: 32px;
        border: 0px;
    }

    button:active {
        background: url(../images/login/login_active.png) no-repeat;
        width: 102px;
        height: 32px;
        border: 0px;
    }


label {
    display: inline;
    /*margin-left: 36px;*/
    vertical-align: middle;
}

    label span {
        color: 555555;
    }

p.forgot {
    text-align: center;
    margin-top: 10px;
    margin-left: -55px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

    p.forgot a {
        color: #cbebf6;
        text-decoration: none;
        transition: color 0.5s linear;
        -moz-transition: color 0.5s linear;
        -webkit-transition: color 0.5s linear;
        -o-transition: color 0.5s linear;
    }

        p.forgot a:hover {
            color: #65c4e5;
        }
/*.contentformLeft{display:block;float:left;color: #fff;padding:10px;margin-left:12px;margin-top:12px;background:#000000;height:243px;border-radius:9px;}*/
.container-content {
    display: block;
    margin: 2px auto;
    position: relative;
    width: 386px;
    height: 235px;
    border-radius: 6px;
}

.logo {
    
    display: block;
    height: 35px;
    text-decoration: none;
    width: 500px;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px 10px 10px 10px;
}

.contentformLeft {
    height: 222px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    background: url(../images/login/form-bg.png) top left;
    padding: 8px;
    float: left;
    display: block;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 5px;
}

    .contentformLeft form {
        height: 206px;
        background: #EBF3FA;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);
        box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);
        color: #0070BA;
        padding: 7px;
    }

.language {
    width: 370px;
    float: left;
    display: block;
    height: 26px;
}

    .language select {
        /*box-shadow: 0 0 0 4px #F2F5F7;
        width: 120px;
        height: 28px;
        margin-left: 40px;
        margin-bottom: 5px;*/
        height:30px;
    }

.rememberLogin {
    width: 370px;
    float: left;
    display: block;
}

.onlyGoogleSignIn {
    width: 300px;
    float: left;
    display: block;
}
/* #Media Queries
================================================== */

/* iPad Portrait/Browser */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}

/* Mobile/Browser */
@media only screen and (max-width: 767px) {
}

/* Mobile Landscape/Browser */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Anything smaller than standard 960 */
@media only screen and (max-width: 959px) {
}

/* iPad Portrait Only */
@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {
}

/* Mobile Only */
@media only screen and (max-width: 767px) and (max-device-width: 1000px) {
}

/* Mobile Landscape Only */
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {
}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file 
		Just create a "fonts" folder at the root, 
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

.WebHRBottom {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: #ffffff;
    /*background: url(../images/login/LoginBottom.png) #10a5d3;*/
    background:#000;
    opacity:.8;
    height: 50px;
}

.WebHRMain {
    width: 98%;
    margin: 0px auto;
    padding-top: 8px;
}

.WebHRBottomText {
    color: #ffffff;
    text-decoration: none;
}


/* Progress Bar */
.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #f3f3f3;
  border-radius: 2px;
  background-clip: padding-box;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden; 
  top:45px;
}
.progress.hide {
    display: none !important;
}

  .progress .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: #23b7e5;
    transition: width .3s linear; }
  .progress .indeterminate {
    background-color: #23b7e5; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
              animation-delay: 1.15s; }

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }


.hidden {
    display:none !important;
}


#spinningSquaresG{
	position: absolute;
    width: 132px;
    height: 16px;
    margin: auto;
    /*right: 40px;*/
    left:175px;
    top: 10px;
    z-index:9;
}

.spinningSquaresG{
	position:absolute;
	top:0;
	background-color:rgb(66,138,202);
	width:16px;
	height:16px;
	animation-name:bounce_spinningSquaresG;
		-o-animation-name:bounce_spinningSquaresG;
		-ms-animation-name:bounce_spinningSquaresG;
		-webkit-animation-name:bounce_spinningSquaresG;
		-moz-animation-name:bounce_spinningSquaresG;
	animation-duration:1.3s;
		-o-animation-duration:1.3s;
		-ms-animation-duration:1.3s;
		-webkit-animation-duration:1.3s;
		-moz-animation-duration:1.3s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.3);
		-o-transform:scale(.3);
		-ms-transform:scale(.3);
		-webkit-transform:scale(.3);
		-moz-transform:scale(.3);
}

#spinningSquaresG_1{
	left:0;
	animation-delay:0.52s;
		-o-animation-delay:0.52s;
		-ms-animation-delay:0.52s;
		-webkit-animation-delay:0.52s;
		-moz-animation-delay:0.52s;
}

#spinningSquaresG_2{
	left:16px;
	animation-delay:0.65s;
		-o-animation-delay:0.65s;
		-ms-animation-delay:0.65s;
		-webkit-animation-delay:0.65s;
		-moz-animation-delay:0.65s;
}

#spinningSquaresG_3{
	left:33px;
	animation-delay:0.78s;
		-o-animation-delay:0.78s;
		-ms-animation-delay:0.78s;
		-webkit-animation-delay:0.78s;
		-moz-animation-delay:0.78s;
}

#spinningSquaresG_4{
	left:49px;
	animation-delay:0.91s;
		-o-animation-delay:0.91s;
		-ms-animation-delay:0.91s;
		-webkit-animation-delay:0.91s;
		-moz-animation-delay:0.91s;
}

#spinningSquaresG_5{
	left:66px;
	animation-delay:1.04s;
		-o-animation-delay:1.04s;
		-ms-animation-delay:1.04s;
		-webkit-animation-delay:1.04s;
		-moz-animation-delay:1.04s;
}

#spinningSquaresG_6{
	left:82px;
	animation-delay:1.17s;
		-o-animation-delay:1.17s;
		-ms-animation-delay:1.17s;
		-webkit-animation-delay:1.17s;
		-moz-animation-delay:1.17s;
}

#spinningSquaresG_7{
	left:99px;
	animation-delay:1.3s;
		-o-animation-delay:1.3s;
		-ms-animation-delay:1.3s;
		-webkit-animation-delay:1.3s;
		-moz-animation-delay:1.3s;
}

#spinningSquaresG_8{
	left:115px;
	animation-delay:1.43s;
		-o-animation-delay:1.43s;
		-ms-animation-delay:1.43s;
		-webkit-animation-delay:1.43s;
		-moz-animation-delay:1.43s;
}



@keyframes bounce_spinningSquaresG{
	0%{
		transform:scale(1);
		background-color:rgb(66,138,202);
	}

	100%{
		transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_spinningSquaresG{
	0%{
		-o-transform:scale(1);
		background-color:rgb(66,138,202);
	}

	100%{
		-o-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_spinningSquaresG{
	0%{
		-ms-transform:scale(1);
		background-color:rgb(66,138,202);
	}

	100%{
		-ms-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_spinningSquaresG{
	0%{
		-webkit-transform:scale(1);
		background-color:rgb(66,138,202);
	}

	100%{
		-webkit-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_spinningSquaresG{
	0%{
		-moz-transform:scale(1);
		background-color:rgb(66,138,202);
	}

	100%{
		-moz-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}


.IsLdapSignIn {
    /*width: 310px;
    margin: 0 auto;*/
}


.IsLdapSignIn input {
    /*width: 150px;
    float: left;*/
    width: 133px !important;
    float: left !important;
    margin-right: 0px !important;
}

.IsLdapSignIn select {
    /*height: 32px;
    width: 129px;
    float: right;
    box-shadow: 0 0 0 4px #F2F5F7;*/
    width: 135px;
    height: 28px;
    margin: 0;
    padding: 0;
    display: initial;
    border: 0;
    border-bottom: 1px solid #b5b5b5;
    float: right;
    color: #000;
    border-radius: 0;
}


#btnCheckLogin{
    background: #3f7db2;
    color: #fff;
    font-weight: normal;
    height: 35px;
    border: 0;
    margin: 20px 0 0 50px;
    padding: 7px 0;
    width: 130px;
    position: relative;
    float: left;
    text-shadow: none;
}
#btnCheckLogin > img{
    width: 16px;
    position: absolute;
    left: 13px;
    top: 10px;
}