body { font-family: Verdana; font-size: 8pt; padding:0px; margin:0px; }
.watermark{ border: 1px solid #BEBEBE; background-color: #F0F8FF; color: gray; }
.home a {color:#0000FF; text-decoration:none;}
.home a:hover {color:#0000FF; text-decoration:underline;}
.bgImgSkill { background-image: url('../News.png'); background-repeat: no-repeat; }
.lh {line-height:4; margin:15;}
.txt {font-family: Verdana;font-size: 10pt;}
em {color:Red;}
.help {background-color: #ebefc7;color: #e61a02;}
.AltBg {background-color:#F7F6F3;}
.gray {background-color: #F4F4F4;}
.skyblue {background-color: #EBF5FB;}
.lightbrown {background-color: #FBD4B4; font-weight:bold;}
.Wh {background-color: #FFFFFF;}
.Gr {background-color: #E6E6E6;}
.TtlInOut1 {background-color: #E6E6E6;font-size:8pt;}
.TtlInOut {background-color: #E2E5B6;font-size:8pt;}
.txts {font-size:8pt;}
.Brn {color:#B54B40;}
.Error {color:#FF0000;}
.Exit { border: 1px solid #6D7FC4; padding:5px; border-radius: 5px; background-color: #6D7FC4; color:#424242; }
.PAP { border: 1px solid #3399CC; padding:5px; border-radius: 5px; background-color: #999999; color:#424242; }
.SELF { border: 1px solid #999999; padding:5px; border-radius: 5px; background-color: #3399CC; color:#424242; }
.Travel { border: 1px solid #CC3366; padding:5px; border-radius: 5px; background-color: #CC3366; color:#424242; }
.SKILL { border: 1px solid #993399; padding:5px; border-radius: 5px; background-color: #993399; color:#424242; }
.TIMESHEET {
    border: 1px solid #77a423;
    padding: 5px;
    border-radius: 5px;
    background-color: #552621;
    color: #424242;
}
.RPAM {
    border: 1px solid #77a423;
    padding: 5px;
    border-radius: 5px;
    background-color: #90ca03;
    color: #424242;
}
.HRIS { border: 1px solid #F88705; padding:5px; border-radius: 5px; background-color: #F88705; color:#424242; height:20px}
.QMS { border: 1px solid #C13A2B; padding:5px; border-radius: 5px; background-color: #C13A2B; color:#424242; }
.LMS{ border: 1px solid #009999; padding:5px; border-radius: 5px; background-color: #009999; color:#424242; }
.Conf {
    border: 1px solid #54541f;
    padding: 5px;
    border-radius: 5px;
    background-color: #54541f;
    color: #424242;
}

.PRC{ border: 1px solid #FF5733; padding:5px; border-radius: 5px; background-color: #FF5733; color:#424242; }
.PREJOINNE { border: 1px solid #666666; padding:5px; border-radius: 5px; background-color: #666666; color:#424242; }
.modalBackground { background-color: #696969; filter: alpha(opacity=60); opacity: 0.6; }
.bash-text-1 { color:#FFF; font-size:17px; text-align:center; padding: 0px; }
.bash-text-2 { color:#FFF; font-size:12px; text-align:center; padding:5px; }
.Ttl { border: solid 1px #CCCCCC; border-left-width: 0px; border-right-width: 0px; padding: 4px 0px 4px 10px; font-size: 12pt; font-weight: bold; color: #4685DF; }
.SecTtl { border-left-width: 0px; border-right-width: 0px; padding: 4px 0px 4px 10px; font-size: 10pt; font-weight: bold; color: #4685DF; }
.SmallTtl { border-bottom: solid 1px #CCCCCC; border-left-width: 0px; border-right-width: 0px; padding: 4px 0px 4px 10px; font-size: 10pt; font-weight: bold; color: #4685DF; }
.GVwHdr1 { background-color:#E2E5B6;font-weight:bold;}
.GVwHdr { background-color:#5D7B9D; font-weight:bold; color:#ffffff;}
.CPH {  height:25px; background-image: url(bg.png); background-repeat:repeat-x; color:#FFF; padding:5px 0px 0px 20px; font-weight:bold; }
fieldset { border: 1px solid #ddd; padding:20px; border-radius: 5px; background-color: #f7f7f7; color:#424242; box-shadow: 2px 3px #f3f3f3; }
legend { color:#505abc; font-size: 1.2em; font-weight: bold; }
.Yellow { background-color: #FFFFCE; }
.Green{color: #008000;}
.Empty { color: #936231; font-weight: bold; background-color: #FFECCE; }
.Grn { color: #008000; font-size: 9pt; font-weight: bold; }
.Red {
    background-color: yellow;
    font-size: 10pt;
    color:red;}
.Table { background-repeat: no-repeat; padding: 0px; margin: 0px; text-decoration: none; }
.hd { color: #FFFFFF; background: #0060A6; }
.Data_hd { font-family: Verdana; font-size:8pt; text-transform: uppercase; height: 20px; text-align: center; line-height: 18px; font-weight: bold; color: #000000; background-image:url(../TblTtl.bmp); }
.CalData { font-family: Verdana; font-size: 7pt; padding: 1px; margin: 1px; background-color: #D9E4F0; border-right: 1px solid #C9c9c9; border-bottom: 1px solid #C9C9C9; width: 68px; height: 68px; vertical-align: Top; text-align: center; }
.CalDay { font-family: Verdana; font-size: 8pt;  margin: 1px; padding: 1px;   background-color: #F7F7F7; border-bottom: 1px solid #BEBEBE; border-right: 1px solid #BEBEBE; font-weight: bold; color: #000000; width: 68px; height: 68px; text-align: left; }
  
  /* button */
button, .button {
 padding: 0.34em 1.5em 0.4em;
 /*background-color: #7aa824;*/
 background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #77a423), color-stop(0.6, #93c436), color-stop(0.97, #aad15d), color-stop(0.99, #d4ed99));
 background: -moz-linear-gradient(bottom, #77a423, #93c436 60%, #aad15d 96%, #d4ed99 98%);
 border-radius:3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border: 1px solid #81a340;
 border-bottom: 1px solid #708444;
 color: white;
 font-weight: normal;
 margin: 0;
 cursor: pointer;
 cursor: hand;
 display: inline-block;
}
button:hover, .button:hover {
 opacity: 0.85;
 color:white;
}
button.disabled, .button_disabled {
 opacity: 0.5;
 cursor:default;
}
button.disabled:hover, .button_disabled:hover {
 opacity: 0.5;
 cursor:default;
}
button.white, .button_white {
 background: -ms-linear-gradient(bottom, #e3e6ec, #DDF1FB 20%, #fcfcfc 96%, #ffffff 98%);
 background: linear-gradient(bottom, #e3e6ec, #DDF1FB 20%, #fcfcfc 96%, #ffffff 98%);
 background: -o-linear-gradient(bottom, #e3e6ec, #DDF1FB 20%, #fcfcfc 96%, #ffffff 98%);
 background: -webkit-linear-gradient(bottom, #e3e6ec, #DDF1FB 20%, #fcfcfc 96%, #ffffff 98%);
 background: -moz-linear-gradient(bottom, #e3e6ec, #DDF1FB 20%, #fcfcfc 96%, #ffffff 98%);
 -webkit-border-radius: 3px;
 border: 1px solid #0093DD;
 border-bottom: 1px solid #0093DD;
 color:#000000;
}
button.white:hover, .button_white:hover {
opacity: 1;
color: #000000;
background: -ms-linear-gradient(bottom, #C0E6FB, #C0E6FB 20%, #DDF1FB 96%, #ffffff 98%);
background: linear-gradient(bottom, #C0E6FB, #C0E6FB 20%, #DDF1FB 96%, #ffffff 98%);
background: -o-linear-gradient(bottom, #C0E6FB, #C0E6FB 20%, #DDF1FB 96%, #ffffff 98%);
background: -o-linear-gradient(bottom, #C0E6FB, #C0E6FB 20%, #DDF1FB 96%, #ffffff 98%);
background: -webkit-linear-gradient(bottom, #C0E6FB, #C0E6FB 20%, #DDF1FB 96%, #ffffff 98%);
background: -moz-linear-gradient(bottom, #C0E6FB, #C0E6FB 20%, #DDF1FB 96%, #ffffff 98%);
}
button.gray, .button_gray {
 background-color: #888888;
 background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.4, #838383), color-stop(0.97, #acacac), color-stop(0.99, #d4d4d4));
 background: -moz-linear-gradient(bottom, #787878, #838383 60%, #acacac 96%, #d4d4d4 98%);
 border: 1px solid #909090;
 border-bottom: 1px solid #787878;
 color: white;
}
.button_white_beveled {
 border: 1px solid #B1B1B1;
 background-color: #f2f2f2;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.10, #FFFFFF), color-stop(0.14, #E1E1E1), color-stop(0.61, #FDFDFD));
 background: -moz-linear-gradient(top, #FFFFFF 10.00%, #E1E1E1 14.29%, #FDFDFD 60.71%);
 color: #666666;
}
.button_white_beveled:hover {
 opacity: 1;
 border: 1px solid #909090;
 color: #434343;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.10, #FFFFFF), color-stop(0.14, #DBDBDB), color-stop(0.61, #FDFDFD));
 background: -moz-linear-gradient(top, #FFFFFF 10.00%, #DBDBDB 14.29%, #FDFDFD 60.71%);
}
.button_white_beveled:active {
 border: 1px solid #898989;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.10, #FFFFFF), color-stop(0.15, #DADADA), color-stop(0.88, #FDFDFD));
 background: -moz-linear-gradient(top, #FFFFFF 10.00%, #DADADA 14.64%, #FDFDFD 87.50%);
 color: #434343;
}
.button_white_beveled_selected,
.button_white_beveled_selected:hover,
.button_white_beveled_selected:active {
 opacity: 1;
 border: 1px solid #878787;
 background-color: #848484;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #BDBDBD), color-stop(0.12, #848484), color-stop(0.61, #9D9D9D));
 background: -moz-linear-gradient(top, #BDBDBD 3.00%, #848484 12.50%, #9D9D9D 60.71%);
 color: #FFFFFF;
 cursor: default;
}

button.micro, .button_micro {
 font-size: 11px;
 padding: 0.1em 1em;
}
button.small, .button_small
{
 padding-right: 0.8em;
 padding-left: 0.8em;
 padding-bottom: 0.3em;
 padding-top: 0.3em;
}
button.medium, .button_medium {
 font-weight: normal; 
 font-size: 12px;
 padding: 4px 15px;
}
button.large, .button_large {
 font-size: 18px;
}


.pillbutton {
    border: none;
    color: #0000EE;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 16px;
}

    pillbutton:hover, .pillbutton:hover {
        opacity: 0.85;
        color: white;
    }

/***************************************************** MouseOver PopMenu Start*/
.MnuOver { font-weight:bold; background: #F4F4F4; text-decoration: none; border: 1px solid #D8D8D8; }
.Mnu ul{font-family: Verdana;margin: 0;padding: 0;list-style-type: none;cursor:pointer;}
.Mnu ul li{position: relative;display: inline;float: left;margin: 0;padding: 0;}
.Mnu ul li a{display: block;padding: 5px 15px 5px 15px;text-decoration: none;color: #000000;}
.Mnu ul li a:hover{ color: #000000; display: block; background: #C6D7E8; border: 1px solid #999999; text-decoration: none; }

.Mnu ul li ul{font-family: Verdana;font-size: 8pt;border-top: 1px solid #718ead;left: 0;top: 0;position: absolute;display: block;visibility: hidden;z-index: 100;}
.Mnu ul li ul li{display: inline;float: none;margin: 0;padding: 0;}
.Mnu ul li ul li a{ width: 185px; padding: 4px 5px; color: #0060A6; background: #FAFAFA; border: #999999 1px solid;border-top: none; }
.Mnu ul li ul li a:hover{ color: #FFFFFF; background: #0060A6; padding: 4px 5px; }

.Mnu ul li ul li ul{font-family: Verdana;font-size: 8pt;border-top: 1px solid #718ead;top: 0;position: relative;display: block;visibility: hidden; float:left; left:100%; margin-top: -45px; margin-left: -1px;}
.Mnu ul li ul li ul li{display: inline;float: none;margin: 0;padding: 0;}
.Mnu ul li ul li ul li a{ width: 185px; padding: 4px 5px; color: #0060A6; background: #FAFAFA; border: #999999 1px solid;border-top: none; }
.Mnu ul li ul li ul li a:hover{ color: #FFFFFF; background: #0060A6; padding: 4px 5px; }

.Mnu .ArDv{position: absolute;right: 0;}

.HdrNew { border: 1px solid #2F4F4F; background-color: #E8EBC5; font-weight: bold; cursor: pointer; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; padding: 4px 0px 4px 10px; font-size: 10pt; font-weight: bold; color: #4685DF; }
/***************************************************** MouseOver PopMenu End*/
.Hdr { border: 1px solid #2F4F4F; background-color: #E2E5B6; font-size: 8pt; font-weight: bold; padding:4px 0px 2px 4px; cursor: pointer; }
.Cntnt { background-color: #F7FAFD; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; }

.user {
    display: inline-block;
    width: 30px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.grid {
    width: 100%;
    border-collapse: collapse;
    max-height: 900px; /* set your scroll height */
    display: block;
    overflow-y: auto;
}

    .grid th {
        position: sticky;
        top: 0;
        background: #5D7B9D;
        z-index: 2;
    }
.ui-datepicker {
    z-index: 9999 !important;
}