@CHARSET "UTF-8";
/*============================================================
  Page Layout
============================================================*/
.info{
	width: 400px;
	height: 30px;
}
#flash{
	width: 400px;
	height: 30px;
}
.login-page-div{
  float:left;
  width:100%;
  background: #ECECEC;
}
form div.actionBTNS {
    background: url("../images/halfDotGreen30.png") repeat scroll 0 0 transparent;
    padding: 30px;
    text-align: center;
}

.btnCancelLG, a.btnCancelLG {
    background-color: #E2E2E2;
    border: 1px solid #B2B2B2;
    color: #666666;
    font: 11px 'Montserrat',helvetica,arial,sans-serif;
    margin: 0 0 0 8px;
    padding: 10px 20px 9px;
}

header {

  height: 80px;
  background: #fff image-url("headerHighlight.gif") repeat-x 0 bottom;
}
legend{
	border: 1px;
}
.backhead{
	height: 4px;
	background-color: #353665f7;
}

.user_input{
   width: 80%;
   margin: 0 auto;
}

#layout{
	background: url("../images/headerHighlight.gif") repeat-x scroll 0 bottom white;
	width: 100%;
	height: 80px;
	display: block;
}
a {
    color: #C11828;
    text-decoration: none;
}
a:hover{
	color: black;
}
a#tudip_footer {
  color: #193C6C;
  text-decoration: none;
}

.user_inputbox {
    width: 100%;
    margin: 0 auto;
    height: 29px;
    font: normal 15px 'Open Sans', helvetica, arial, sans-serif;
    font-weight: 400;
    clear: both;
    padding: 6px 4px;
    border: 1px solid #ccc;
    text-shadow: 0 1px 0 rgb(255 255 255);
    color: #555;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #ECECEC;
    outline: none;
    box-shadow: 0 1px 0 #ccc;
}



.user_role_box{
	float: right;
	width: 100%;
	margin: 0 auto;
	height: 18px;
	font:normal 15px 'Open Sans', helvetica, arial, sans-serif;
	font-weight: 400;
	clear: both;
  padding: 6px 4px;
  
  border: 1px solid #ccc;
  
  text-shadow: 0 1px 0 rgba(255,255,255,1);
  color: #555;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #fff !important;
  outline: none;
}

.user_inputbox:focus{
	background: #a82e2f0a !important;
}
.user_inputbox:hover{
	background-image: url'/images/loginBkrd.jpg';
}
 #user_email{
  padding-left:13%;
}
#user_password{
  padding-left:13%;
} 

.username_icon{
  position: absolute;
  top: 41%;
  left: 9%;
}
.password_icon{
  position: absolute;
  margin: 3% 3%;
}
.eye_icon{
  position: absolute;
  margin: 3% 90%;
}
/* form#login p.indent, form#login p.notice { */
/*   margin: 0 30px 15px 30px; */
/* } */
.indent{
	width: 100%;
	height: 40px;
}
.action {
  /* background: #a82e2f0a; */
    padding: 30px;
    text-align: center;
    height: 41px;
    float: left;
    width: 83%;
    border-radius: 5px 5px 28px 28px;
}
.forgotPassword {
  float: left;
  height: 15px;
}


article {
  float: left;
  width: 898px;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  clear: both;
  padding: 20px;
  padding-top: 20px;
}
hr {
  clear: both;
  border: none;
}
hr.wavey {
  height: 3px;
  margin: 30px 0 20px 0;
  background: transparent image-url("dividerWavey.gif") repeat-x 0 0;
}
hr.dotted {
  height: 1px;
  margin: 6px 0;
  background: transparent image-url("dottedDividerDDD.gif") repeat-x 0 0;
}
hr.solid {
  height: 4px;
  background-color: #ddd;
  width: 938px;
  margin: 15px 0 23px -20px;
}
.clear,.clearNoPX {
  width: 100%;
  clear: both;
}
.clearNoPX {
  height: 0;
}

/*============================================================
 PAGE LAYOUT - App Admin
============================================================*/
#adminSidebar {
  float: left;
  margin-right: 30px;
  width: 200px;
  border: dotted #ccc 1px;
  padding: 10px;
}

#adminBody {
  float: left;
}

/*============================================================
 PAGE LAYOUT - log in
============================================================*/

.loginBox,.loginBoxRotated {
    float: left;
    width: 50%;
}
@media only screen and (max-width: 1000px) {
  body {
    background-color: lightblue;
  }
}
.workBox {
    position: relative;
    background: #ECECEC;
    z-index: 2;
    float: left;
    width: 50%;
}
.workBox img {
   position: relative;
    left: 18%;
    top: 85px;
    height: 545px;
}

.loginBoxRotated {
  height: 400px;
  margin: 80px auto 0 auto;
z-index: 1;
}
.logoLogin img {
  display: block;
  margin: auto;
  }
  
  .logo{
    width: 200px;
    height: 100px;
    background: url('../images/logo.png') no-repeat;
  border: none;
  margin-left: 43px;
margin-top: 15px;
  }
  
.welcomeLogo{
	width: 200px;
    height: 60px;
    background-image: url('../images/payroll_logo_small.gif');
  border: none;
  margin-left: -5px;
}

.company {
    background: url("../images/iconCompany.gif") no-repeat scroll 0 2px transparent;
    color: #91A541;
    float: right;
    font: 300 11px 'Open Sans',helvetica,arial,sans-serif;
    margin: 8px 10px 0 0;
    padding: 0 0 0 25px;
}
.setting {
    
    color: #A82E2F;
    float: right;
    font:  'Open Sans',helvetica,arial,sans-serif;
    margin: 23px 0px 0 0;
    padding: 8px 0 0 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.homeicon{
	float: right;
    margin-top: 13px;
    margin-left: 11px;
    padding-top: 8px;
}
.logoLogin {
  float: left;
  clear: both;
  margin: 0px 0 0 30px;
  width: 280px;
  height: 135px;
  
}
img.logo_height {
  height: 53px;
  padding-top: 5px;
}
.uploadLogo,.uploadLogoLogin {
  float: left;
  clear: both;
  margin: 5px 0 0 0;
}

.uploadLogo i,.uploadLogoLogin i {
  font: italic 10px 'Open Sans', helvetica, arial, sans-serif;
  font-weight: 300;
  color: #777;
  display: block;
}
.uploadLogo:hover,.uploadLogoLogin:hover {
  //border: 1px solid#ddd;
}
.uploadLogoLogin {
  width: 280px;
  height: 135px;
  margin: 30px 30px 0 30px;
  padding-top: 50px;
}

/*============================================================
 PAGE LAYOUT - Tables
============================================================*/

table#Col {
  border-collapse: collapse;
  /*width: 896px;*/
  width: 100%;
  border: 1px solid #ddd;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  text-shadow: 0 1px 0 rgba(255,255,255,1);
}
#Col tr {
  background-color: #fdfdfd;
}
#Col tr:nth-child(odd) {
  background-color: #f9f9f9;
}
#Col tr:hover {
  background: url("../images/halfDotGreen30.png") repeat 0 0;
}
#Col tr:last-child td {
  border-bottom: 1px solid #c5c5c5;
}
#Col th {
  padding: 14px 20px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: transparent image-url("tableHeaderRepeater.gif") repeat-x 0 0;
  font: normal 11px 'Montserrat', helvetica, arial, sans-serif;
  color: #777;
  text-transform: uppercase;
  background: url('../images/tableHeaderRepeater.gif');
}
#Col th a {
  background: transparent image-url("arrowTableSort.gif") no-repeat right 3px;
  padding-right: 12px;
  color: #777;
  font: normal 11px 'Montserrat', helvetica, arial, sans-serif;
  text-transform: uppercase;
}
#Col th a:hover {
  color: #91a541;
}
#Col th a.on {
  color: #222;
}
#Col td {
  padding: 12px 20px;
  font: normal 12px 'Open Sans', helvetica, arial, sans-serif;
  color: #555;
  border-bottom: 1px solid #e5e5e5;
  background: transparent image-url("onePXwhite.gif") repeat-x 0 0;
  word-break: break-all;
}
#Col td a {
  font-weight: 600;
}
#Col td img {
  position: relative;
  top: 2px;
  padding-right: 4px;
}
#Col td:hover {
  cursor: pointer;
}
.firstCol {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.secondCol { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}
.thirdCol { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}
.fourthCol { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

#projects_open .firstCol{
  width: 40%;
}
#projects_open .secondCol{
  width: 15%;
}
#projects_open .thirdCol{
  width: 15%;
}
#projects_open .fourthCol{
  width: 12%;
}

#company_users_index .firstCol{
  width: 30%;
}
#company_users_index .secondCol{
  width: 30%;
}
#company_users_index .thirdCol{
  width: 26.5%;
}

#fourCol th.empty {
  border: 1px solid #ddd;
  background: none;
  font: italic 12px 'Open Sans',helvetica,arial,sans-serif;
  color: #777;
  font-weight: 400;
  clear: both;
  margin-botton: 20px;
  text-transform: none;
}
#fourCol th.empty b {
  font-weight: 600;
}
#fourCol tr:hover .empty {
  background: #fdfdfd;
}

/*============================================================
 PAGE LAYOUT - Project Approver Page
============================================================*/

.fiveForty {
  float: left;
  width: 560px;
}
.fiveForty h1 {
  margin-bottom: 14px;
}
.fiveForty p {
  font: normal 13px/20px 'Open Sans', helvetica, arial, sans-serif;
  color: #555;
  font-weight: 300;
  word-wrap: break-word;
}

/* Button */

.btnLG,.btnLG:visited,#mprint
.btnMD,.btnMD:visited {
  display: inline-block;
  font: normal 14px 'Montserrat', helvetica, arial, sans-serif;
  text-transform: uppercase;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.15)), color-stop(.9,rgba(0,0,0,0.15)));
  padding: 7px 20px 8px 20px;
  color: #333;
  text-decoration: none;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.35);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  text-shadow: 0 1px 1px #fff;
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  box-shadow: 0 1px 1px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  border: 1px solid #7f7f7f;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-left: 5px;
  background: none;
}
.btnLG:hover {
  background-color: #ccc;
}
.btnGreen,#mprint{
    background-color: #193C6C !important;
    color: white !important;
  
}
.btnGreen:hover,#mprint:hover {
  background-color: #b4d737;
}

.sm {
  font: italic 11px 'Open Sans', helvetica, arial, sans-serif;
}

.forgotPassword {
  float: right;
}

.login_button{
	margin-top: -2px;
}

.rememberme{
	margin-top: 5px;
	width: 150px;
	margin-left: 30px;
	float: left;
	height: 20px;
}
.checkbox{
	float: left;
}
.checkbox_label{
	float: left;
    width: 70%;
}
.checkbox_label label{
    line-height: 16px;
    color: hsl(215deg 61% 26%);
}

.forgot_pass{
	margin-top: 5px;
	width: 130px;
	float: left;
  margin-left: 8%;
}	

p{
	width: 50%;
}

.sendpassfoot{
	height: 138px;
}

/* /* maseges */
.errorMessage,.errorFull,.errorModal {
  float: center;
  clear: both;
  width: 200px;
  background: transparent image-url("halfDotRed30.png") repeat 0 0;
  font: italic 11px 'Open Sans', helvetica, arial, sans-serif;
  font-weight: 300;
  color: #FF0000;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}



header{
    height: 80px;
    width: 1050px;
	margin: 0 auto;
}


.signOut {
    color: #777777;
    float: right;
    font: 11px 'Montserrat',helvetica,arial,sans-serif;
    margin: 9px 0 0;
    text-transform: uppercase;
}

form#login p.indent, form#login p.notice {
    margin: 0 30px 15px;
}
applic...c29.css (line 1800)
form#login .sm {
    font: italic 11px 'Open Sans',helvetica,arial,sans-serif;
}

form#login p.indent, form#login p.notice {
    margin: 0 30px 15px;
}
applic...c29.css (line 1800)
form#login .sm {
    font: italic 11px 'Open Sans',helvetica,arial,sans-serif;
}

.logoLogin_forpass{
  clear: both;
    float: left;
    height: 100px;
    margin: 30px 0 0 30px;
    width: 280px;	
}

.indent_forpass{
	height: 30px;
    margin: 0 auto 32px;
    width: 80%;
}

article {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: -moz-use-text-color #DDDDDD #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    clear: both;
    float: left;
    padding: 20px;
    width: 1160px;
    min-height: 200px;
}


************tabs******************

.mainContainer
{
margin:60px auto 0 auto;
width:600px;
}
 
.topNav
{
font-family: 'PT Sans', sans-serif;
font-weight:bold;
font-size:12px;
width:960px;
margin:0 auto;
letter-spacing:-1px\9;
}

.tabs ul
{
margin: 0 0 11px 10px;
display: inline;
list-style-type: none;
}
 
.tabs li
{
display:inline;

}
 
.tabs li a
{
cursor: pointer;
padding:3px 10px 10px 10px;
border:0px solid #cccccc;
font-family:'PT Sans',sans-serif;
font-size:13px;
color:#666666;
font-weight:400;
/* text-transform:uppercase; */
}

.tabs ul li a:hover{
	color: #fff;
	background-color: #369;
}
 
.tabs .tab-current
{
padding: 7px 13px 12px 12px;
border-bottom:1px;
background:#ffffff;
}
 
.tabsContent
{
border:0px solid #cccccc;
/* -moz-box-shadow: 0px 3px 5px #cccccc; */
/* -webkit-box-shadow: 3px 3px 5px #cccccc; */
/* box-shadow: 3px 3px 5px #cccccc; */
background:#ffffff;
padding:20px 20px 20px 20px;
color:#666666;
display:inline-block;
width:800px;
}
.eduform .error{
clear:both;
color:red;
}

div.login_footer {
  margin-top: 23px !important;
  height: 27px !important;
  width: 82.5% !important;
}


/*============================================================================
 Box Animation
 =============================================================================*/
.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  background: #ECECEC;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(134, 231, 85, 0.31);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 15s infinite;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 17s;
  animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
  animation-duration: 22s;
  background-color: rgba(134, 231, 85, 0.31);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  background-color: rgba(134, 231, 85, 0.31);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  background-color: rgba(134, 231, 85, 0.31);
}
.bg-bubbles li:nth-child(11) {
  left: 77%;
  width: 100px;
  height: 100px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  background-color: rgba(134, 231, 85, 0.31);
}
.bg-bubbles li:nth-child(12) {
  left: 93%;
  width: 100px;
  height: 100px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  background-color: rgba(134, 231, 85, 0.31);
}
.bg-bubbles li:nth-child(13) {
  left: 42%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  background-color: rgba(134, 231, 85, 0.31);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
  animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}

label.login-label {
  color: #193C6C;
}

input#login-button {
  background-color: #193C6C;
}

input#login-button {
  width: 315px;
  padding: 10px;
  border-radius: 19px;
}
input#user_email {
  border-radius: 19px;
}
input#user_password {
  border-radius: 19px;
}
form#login-form{
  font-family: 'Roboto';
  font-size: 17px;
  line-height: 24px;
}

#login-footer {
  font-size: 0.8em;
  text-align: center;
  z-index: 999;
  background: #ECECEC;
}
.login-page-container #content {
    margin: 0 auto;
    width: 100%;
    background: #ECECEC;
}
.login-page{
 background: #ECECEC; 
}


.loginHeight .user_input{
   width: 87%;
   margin: 0 auto;
}


#login-footer div{
    float: right;
    width: 56%;
    position: relative;
    bottom: 55px;
  }
.loginHeight .errorMessage{
      height: 6px;
}
@media only screen and (max-width: 620px) {
  .workBox {
    position: relative;
    background: #ECECEC;
    z-index: 2;
    float: left;
    width: 100%;
}
 .workBox img {
    left: 5%;
    height: 361px;
    top:55px;
 }

 .loginBox, .loginBoxRotated{
      float: left;
    width: 100%;
 }

 #login-form{
  float: left;
    width: 340px;
    position: relative;
    margin: 11% 0px 0px 0px;
    left: 7% !important;
    margin-top: 90px;
    top: 0px !important;
}
#login-footer div{
  bottom: 0px !important;
}
#login-footer{
  position: relative;
    right: 15%;

}
}

@media only screen and (min-width: 900px)
and (max-width: 1100px) {

 .workBox img {
    left: 18%;
    height: 361px;
    top:111px;
 }


#login-form{
float: left;
width: 340px;
position: relative;
margin: 11% 0px 0px 0px;
left: 7% !important;
margin-top: 90px;
top: 0px !important;
}
#login-footer div{
bottom: 0px !important;
}
#login-footer{
position: relative;
right: 1%;

}
}

@media only screen and (min-width: 630px)
and (max-width: 890px) {

 .workBox img {
  left: 1%;
  height: 361px;
  top: 108px;
 }


#login-form{
float: left;
width: 340px;
position: relative;
margin: 11% 0px 0px 0px;
left: 7% !important;
margin-top: 90px;
top: 0px !important;
}
#login-footer div{
bottom: 0px !important;
}
#login-footer{
position: relative;
right: 1%;

}


}


.text-danger {
    color: #A82E2F;
}

#emp-gross-pay-history a {
  color: #296bff;
}