@charset "UTF-8";
/* CSS Document */
body{
	font-size:13px;
	margin:0;
	font-family:Helvetica Neue, Geneva, sans-serif;
	background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, rgb(255,255,255)),
	color-stop(0.8, rgb(209,209,209))
);

}
.date-tccontainer{
	color:#000 !important;
	background:none !important;	
}
#tasktable  td{
	padding:3px 0;	
}
#tasktable select {
  background: transparent;
  width: 50px;
  padding: 0px;
  margin:0px !important;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  color: #000;
}

.select {
/*  width: 140px;
 border: 1px solid #CCC;*/
  height: 34px;
  overflow: hidden;
  background: url("../images/downarrow.png") no-repeat right transparent;
 
}

input:-webkit-autofill{
	background-color:transparent !important;
}
:focus{
outline: none;	
}
.container{
	width:100%;
}
#header{
	
}
.mainarea{
	clear:both;
	
/*width: 80%;
float: left;	*/
}
#menubar, .sub-block{
	width:960px;
	margin:20px auto;
}
#menubar ul{
	float:left;
list-style: none;
padding-left: 0px;
margin: 15px 0;
min-height: 25px;
border: 1px solid rgb(162, 162, 162);
border-radius: 20px;
background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(209,209,209) 80%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, rgb(255,255,255)),
	color-stop(0.8, rgb(209,209,209))
);
}
#menubar ul li{
float: left;
/*padding: 5px 31.41px;*/
font-size:13px;
}
.checkbox{
	width: auto;
	height:auto;
	margin:0 15px;
}
select{
margin:10px 0;	
}
.punchin-out{
	border:none;
	background:none;
	font-size: 13px;
}
input{
border-radius: 20px;
font-size: 11px;
padding: 0px 8px;
height: 28px;
margin: 8px 0;
width: 265px;
}
textarea{
border-radius: 20px;
line-height: 18px;
margin-top: 5px;
padding: 8px 15px;
border:2px inset;
}
.gender input{
	width: auto;
	height: auto;
	margin:5px;
}
.submit{
	cursor:pointer;
background: #4cc6de;
border: 2px outset #4cc6de;
color: #fff;
font-size: 15px;
width: auto;
margin-top: 22px;
padding: 0 22px;
height: 30px;	
border-radius: 20px;
}
.label{
width: 150px;
float: left;
padding: 12px 0;	
}
.sectiontitle{
	background:#4cc6de;
	color:#fff;
	margin:20px 0;
	line-height: 30px;
font-size: 15px;
	}
input.user:-webkit-autofill{background-color:transparent !important;}
#menubar ul li:hover, #menubar ul li.active{
background-color:#4cc6de;	
}
#menubar li:hover a, #menubar ul li.active a{color: #fff;}
#menubar li a{color: rgb(114,114,114);padding: 5px 31.41px;
line-height: 25px;}
#menubar ul li.first{
	border-radius:17px 0 0 20px;
}
#menubar ul li.last{
	border-radius:0 17px 20px 0;
	/*padding: 5px 93px;*/
}
.pagetitle{
width: 960px;
margin: 33px auto 0 auto;
color: #21bbd8;	
}
#footer{
	clear:both;
}
#login{
margin-top:100px;	
width:800px;
margin:150px auto;
}
#login h3{
	text-indent: 20px;
color: #21bbd8;
margin-bottom: 5px;
font-weight: lighter;
font-family: Helvetica Neue;
	}
#login img.logo{
	width: 246px;
margin-bottom: 25px;
}
#login .creatorimg{
	width:50%;
	text-align:center;
	float:left;
}
#login .loginform{
	width:40%;
	padding-top: 50px;
	padding-left:50px;
	float:left;
}
#login .user{
	background:url(../images/login-name.png) no-repeat transparent;
	height: 52px;
width: 250px;
padding: 5px 20px;
color: rgb(117, 117, 117);
font-size: 14px;
	border:0;
}
#login .pwd{
	background:url(../images/login-password.png) no-repeat transparent;
	border:0;
	height: 52px;
width: 250px;
}
.dashboarddiv{
float:left;border:1px solid #ccc; height:150px;width:150px; vertical-align:middle;display: table-cell; text-align:center; color:#21bbd8; cursor:auto; margin:20px;
}
.viewtable th{
background: rgb(201, 201, 201);
}
.viewtable th, .viewtable td{
 border:1px solid #999;
 padding:15px 10px;
}
.viewtable{
width:100%;	
}
#login .pwd .pwdinput{
	border:0;
	height: 52px;
	float:left;
width: 205px;
background:none;
padding:5px 20px 5px 20px;
margin:0;
color: rgb(117, 117, 117);
font-size: 14px;
}
#login .pwd .submit{
	float: left;
border: none;
background: none;
cursor: pointer;
padding: 8px;
margin-top: 6px;
border-radius: 24px;
margin-left: 3px;
font-size: 15px;
color:transparent;
}
#login .pwd .submit:hover
{
padding: 5px 8px 9px 8px;
height: 33px;
margin-top: 8px;
font-family: helvetica;
margin-left: 2px;
color: rgb(255, 255, 255);
background: #21bbd8;
border: 0px solid rgb(255, 255, 255);
}
.leave_font
{
	font-size:3em !important;
}
.casual
{
	width: 50%;
    float: left;
}
.medical
{
	width: 50%;
    float: left;
}

/*---------------*/
.leavebox
{
	/*background: white;
    height: 125px;
    width: 96.9%;
    margin: 25px 0px;
    padding: 15px;
    display: block;
    box-shadow: 5px 5px 5px 5px #cacaca;*/
	    background: white;
    height: 125px;
    width: 96.9%;
    margin: 80px 0px;
    padding: 15px;
    display: block;
    box-shadow: 1px 0px 1px 1px #cacaca;
}
 
 .date_box
 {
	
       width: 30%;
    height:120px;
    float: left;
    padding: 10px;
 }

.leavedate_month
{
	position: relative;
    color: #555;
    font-size: 2.7em;
    padding-left: 5px;
    margin-left: 5px;
    margin-top: 4%;
    font-weight: 100;
} 
 .leaveday_yr
{      position: absolute;
    color: #555;
    font-size: 2em;
    padding-left: 0px;
    padding-top: 51px;
    margin-left: 0.2%;
    font-weight: 100;
}
.leaveday_nm
{
	    color: #21bad8;
    font-size: 3.2em;
    padding-left: 10px;
    margin-top: -38%;
    font-weight: 100;
    margin-left: 80%;
}
.leavedate
{

      background: #21bad8;
    height: 155px;
    width: 126px;
    color: white;
    font-size: 7em;
    padding-left: 30px;
    margin-top: -25px;
    line-height: 148px;
    padding-top: 0px;
    font-weight: 600;
    margin-left: 25%;
    position: relative;
}

.approvalstatus
{
	   font-size: 2em;
    /* float: right; */
    font-weight: 100;
    text-align: right;
    width: 37%;
    position: relative;
    margin-left: 68%;
    padding-top: 17%;
    display: inline-block;
}
.padding_20
{
	padding:20px;
}
/*.css_casual
{
	 display: inline-block;
    width: 26px !important;

}
.css_medical
{
	 display: inline-block;
    width: 26px !important;

}
.css_unpaid
{
	 display: inline-block;
    width: 26px !important;
}
.css_present
{
	 display: inline-block;
    width: 26px !important;
}
.css_casual:hover .abc
{
	
}*/
#hoverbox{
 display:none;
width:100px;
 height:100px;
color:#000;
    background:#ccc;
 position:absolute;    
}
#text{
 width:100px;
height:100px;
 background:#000;      
}

.casual
{
	    float: left;
    width: 33%;
    margin: 0px 10px;
    text-align: center;
    background: #22bad8;
}
.medical
{
	float: left;
    width: 33%;
    margin: 0px 2px;
    text-align: center;
    background: #22bad8;
}
.unpaid
{
      float: left;
    width: 29%;
    margin: 0px 10px;
    text-align: center;
    background: #22bad8;
}
#leavesection
{
	 background: #fff;
    font-size: 2.5em;
	font-weight:200;
	text-align: left;
}
.editbtn
{
	float:right;
}
.leaveblock_width
{    width: 1500px;
}
.newleavetype
{
	    margin-left: 15%;
}
.leavetype_shortnm
{
font-size: 15px;
}
.count
{
	color: #48c910;
    background: white;
    display: block;
    border-radius: 78px;
    /*margin: 25px 95px;*/
	    margin:50px 183px;
    font-size: 8em;
    font-weight: 900;
}
.border_bottom
{
	border-bottom:1px solid #eeeeee;
}
.bal_leaves
{
	    width: 68%;
    float: left;
    font-size: 2em;
    text-align: left;
    color: #555555;
    margin: 20px 0px;
    font-weight: 200;
    padding-left: 17px;
	
}
.unpaid_leaves
{
	    width: 30%;
    float: left;
    font-size: 2em;
    text-align: left;
    color: #555555;
    margin: 20px 0px;
    font-weight: 200;
	
}
.casual > h1
{
	color: #fff;
    font-weight: lighter;
}
.medical > h1
{
	color: #fff;
    font-weight: lighter;
}
.unpaid > h1
{
	color: #fff;
    font-weight: lighter;
}
.css_casual.radiobtn:hover > .radio_text
{
	visibility:inherit !important;
}  
#tooltip
{
        border-radius:5px;
        background:#21bad8;
        color:white;
        width:15px;
		padding:5px;
        height:auto;
}
label.selection-confirm
 {
    background: white;
    width: 14% !important;
    display: inline-block;
}
.radio_text
{
   display: inline-block;
    padding-left: 15px;
    position: absolute;
    padding-top: 10px;
    font-size: 2em;
    font-family: Helvetica Neue, Geneva, sans-serif;
    font-weight: 100;
    color: #555;
	
	 	/*   display: inline-block;
    padding-left: 16px;
    position: static;
    padding-top: 0px;*/
}
.leavesubmit{
	/*cursor:pointer;
background: #4cc6de;
border: 2px outset #4cc6de;
color: #fff;
font-size: 15px;
width: auto;
margin-top: 22px;
padding: 0 22px;
height: 30px;	
border-radius: 20px;*/
        cursor: pointer;
    background: #4cc6de;
    border: 2px outset #4cc6de;
    color: #fff;
    font-size: 2em;
    font-weight: 100;
    width: 30%;
    margin-top: 28px;
    margin-bottom: 30px;
    padding: 0 11px;
    height: 68px;
    border-radius: 0px;
    margin-left: 40%;
    font-family: Helvetica Neue, Geneva, sans-serif;
}
.leave_employee_name
{
	    font-size: 3em;
    text-transform: capitalize;
    color: #21bad8;
	font-family: Helvetica Neue, Geneva, sans-serif !important;
	    font-weight: 200;
}

	
input[type='radio']:before
{
	background: white;
    width: 27px;
    height: 27px;
    border-radius: 15px;
    top: -2px;
    position: relative;
    content: '';
    display: inline-block;
    visibility: visible;
    left: 1px;
    border: 1.8px solid #dcdcdc;
}

.viewtable input[type='radio']:before
{
	background: white;
    width: 27px;
    height: 27px;
    border-radius: 15px;
    top: -2px;
    position: relative;
    content: '';
    display: inline-block;
    visibility: visible;
    left: 1px;
    border: 1.8px solid #dcdcdc;
}

input[type='radio']:checked:after {
         width: 27px;
    height: 27px;
    border-radius: 15px;
    top: -33px;
    left: 1px;
    position: relative;
    background-color: #48c910;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
    }
	.radio_buton_div
	{
  /*padding-left: 30px;
    margin-left: 15%;
    float: right;
    padding-right: 20px;
    top: -83px;
    position: relative;
    display: inline-block;
    bottom: 0;
    width: 500px;*/
    float: left;
    margin-left: 170px;
    position: relative;
    display: inline-block;
    bottom: 0;
    width: 49%;
    margin-top: 4.5%;
 }