body{font:normal 12px/16px arial,sans-serif;margin:0;padding:0;color:#626262}
label,span{color:#626262 !important;display:inline-block;text-align:left;font-weight:700 !important;position:relative;margin-top:5px}
input[type=text],input[type=password],textarea{color:#626262;display:inline-block;background:#FFF url(../images/forminput.gif) top left repeat-x;border-radius:2px;width:98.5%;border:1px solid #CCC;height:17px;margin:2px 0;padding:2px 1px;}
textarea{font:normal 1em/16px arial,sans-serif;margin-bottom:2px;}
select{color:#626262;display:inline-block;background:#FFF url(../../images/forminput.gif) top left repeat-x;border-radius:2px;width:100%;border:1px solid #CCC;margin:2px 0;padding:2px 0}
input[type=checkbox]{vertical-align:middle;margin:0 3px 0 0;padding:0}
input[type=radio]{background-color:transparent !important}
textarea[mandatory]{background-color:#FFFECC;}
input[mandatory]{background-color:#FFFECC;}
select[mandatory]{background-color:#FFFECC;}
input[readonly],input[disabled]{color:#626262;border-bottom:1px solid #CCC;background:#f0f0f0}
select[disabled]{color:#626262;border-bottom:1px solid #CCC;background:#f0f0f0}
textarea[disabled]{color:#626262;border-bottom:1px solid #CCC;background:#f0f0f0}
textarea[readonly]{color:#626262;border-bottom:1px solid #CCC;background:#f0f0f0}
a{color:#2073cf;text-decoration:none;cursor:pointer}
a:hover{color:#1f65b5;text-decoration:underline;}


/*--------------- Time Line Css ------------ */

.promotion,.Transfer,.Retirement,.Application{font-family:arial;font-size:12px;color:#fff !important;font-weight:bold;text-align:left}
.promotion{background-color:#f48221 !important;border-color:#f48221 !important}
.Transfer{background-color:#bed642 !important;border-color:#bed642 !important;}
.Retirement{background-color:#ffd822  !important;border-color:#ffd822 !important;}
.Application{background-color:#5da9db !important;border-color:#5da9db !important}
.promotion{}
.IconDeta{float:right;cursor:pointer !important;margin-right:5px;}
.IconHis{float:right;cursor:pointer !important}   
.TimelineDate{position:absolute;top:5px;left:45%;padding:5px 15px;background-color:#e5e2e2}  
.TimelineDate span{color:#3c3c3c;font-weight:bold;font-size:12px}
.ElcTimeline{position:relative}
.HistoryView{position:absolute;bottom:85px;left:10px}  
.AddDetails{position:absolute;bottom:85px;right:10px}
.Control{height:30px;width:250px;background-color:#999}
.collaps{height:150px;width:250px;background-color:#999;}
.timeline-event-content {text-align:left}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background-image: none !important ;
    background-color:none !important;
    border: 1px solid #79b7e7;
    color: #e17009;
    font-weight: bold;
}

/*------------JQ Grid Customise--------------*/

 #_reasonSummaryPager_center,#_shrotListPager_center,#_historyAppPager_center {white-space:nowrap !important}
 .ui-jqgrid .ui-jqgrid-pager, .ui-jqgrid .ui-jqgrid-toppager {height: auto !important;}
 .ui-jqgrid .ui-pg-table {padding-bottom: 0;}
 #jqGrid label,#jqGrid span{color:#2E6E9E;/*----display:inline;----*/text-align:left;font-weight:normal; margin-top:0}
 #jqGrid input[type=text]{color:#2e6e9e;display:inline-block;background:#FFF ;border-radius:2px;width:15px;border:1px solid #CCC;height:17px;margin:2px 0;padding:2px 5px;font-size:10px}

 #mycontrols label span,#jqGrid table tr td span{color:#2e6e9e !important;font-weight:normal !important}


 /*-----------------Employee Selector----------------------*/
 .select2-container span{margin:0;}


 
        #loading-div {
            background: white url(../../images/Loading.gif) no-repeat center center;
            width: 90px;
            height: 100px;

            background-color: White;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -100px;
        }

        #loading-div-background {
         
            position: fixed;
            top: 0;
            left: 0;
            background: White;
            width: 100%;
            height: 100%;
            z-index: 10001;
        }
 
        
                textarea.watermark { color: #999;
font-style: italic; 
        } 
        input.watermark { color: #999;
font-style: italic; 
        } 

              select.watermark { color: #999;
font-style: italic; 
        } 

        #AttachmentList.table {
    border: 1px solid green;
}
       .gray {
            color: #999;
            font-style: italic; 
        }
span.requiredfieldvalidator {
     color: red !important;
     font-size:larger;
    font-weight: bolder;
}

a:link {
    color: blue;
}

/* visited link */
a:visited {
    /*color: #00FF00;*/
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
 


.RecHeader{color:#325e85}
.SubHead{background-color:#dcdbdb;padding:10px 0 10px 5px}
.SubHead span{margin-top:0 ;color:#1b6ccd;font-weight:normal}

@-webkit-keyframes myanimation { from {
left: 0%;
}
to { left: 50%; }
}
.checkout-wrap { margin: 40px auto; position: relative; }
ul.checkout-bar li { color: #ccc; display: block; font-size: 12px; font-weight: 600; padding: 14px 20px 14px 80px; position: relative; }
ul.checkout-bar li:before { -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); background: #ddd; border: 2px solid #FFF; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; left: 20px; line-height: 37px; height: 25px; position: absolute; text-align: center; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); top: 4px; width: 25px; z-index: 999; }
ul.checkout-bar li.active { color: #8bc53f; font-weight: bold; }
ul.checkout-bar li.active:before { background: #8bc53f; z-index: 99999; }
ul.checkout-bar li.visited { background: #ECECEC; color: #57aed1; z-index: 99999; }
ul.checkout-bar li.visited:before { background: #57aed1; z-index: 99999; }
ul.checkout-bar li:nth-child(1):before { content: url("../../images/Wizard.png") }
ul.checkout-bar li:nth-child(2):before { content: url("../../images/Wizard.png")}
ul.checkout-bar li:nth-child(3):before { content: url("../../images/Wizard.png")}
ul.checkout-bar li:nth-child(4):before { content: url("../../images/Wizard.png")}
ul.checkout-bar li:nth-child(5):before { content: url("../../images/Wizard.png")}
ul.checkout-bar li:nth-child(6):before { content: url("../../images/Wizard.png") }
ul.checkout-bar li:nth-child(7):before {content: url("../../images/Wizard.png") }
ul.checkout-bar li:nth-child(8):before {content: url("../../images/Wizard.png")}
ul.checkout-bar li:nth-child(9):before { content: url("../../images/Wizard.png")}
ul.checkout-bar li:nth-child(10):before {content: url("../../images/Wizard.png")}
ul.checkout-bar a { color: #57aed1; font-size: 12px; font-weight: 600; text-decoration: none; }
 @media all and (min-width: 800px) {
.checkout-bar li.active:after { -webkit-animation: myanimation 3s 0; background-size: 35px 35px; background-color: #8bc53f; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); content: ""; height: 8px; width: 100%; left: 50%; position: absolute; top: -25px; z-index: 0; }
.checkout-bar li.active:last-child:after{background:none ;box-shadow:0;-webkit-box-shadow:none;display:none} 
/*ul.checkout-bar { -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); background-size: 35px 35px; background-color: #EcEcEc; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); border-radius: 15px; height: 8px; margin: 0 auto; padding: 0; position: absolute; width: 100%; }*/
/*ul.checkout-bar:before { background-size: 35px 35px; background-color: #57aed1; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); border-radius: 15px; content: " "; height: 8px; left: 0; position: absolute; width: 10%; }*/
ul.checkout-bar li { display: inline-block; margin: 25px 0 0; padding: 0; text-align: center; width: 105px; }
ul.checkout-bar li:before { height: 27px; left: 35%; line-height: 30px; position: absolute; top: -40px; width: 30px; z-index: 99;padding-top:3px }
ul.checkout-bar li.visited { background: none; }
ul.checkout-bar li.visited:after { background-size: 35px 35px; background-color: #57aed1; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); content: ""; height: 8px; left: 50%; position: absolute; top: -25px; width: 100%; z-index: 99; }
}

 /*-------Chart Css----*/

.Sh_Pe_ChartCan { position: relative; float:left }
.Sh_Pe_data {   background-color: #515a63;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 17px;
  top: 17px; }
.Sh_Pe_data span {   color: #fff !important;
  font-weight: bold;
  font-family: Arial;
  font-size: 19px;
  position: relative;
  top: 24px; }
.Sh_Pe_Chart {width:110px;text-align:center}
.Rec_ChrtTitle{color:#2a7ffe !important;font-weight:normal !important;font-size:12px;display:inline}
.Rec_Attachment{color:#2a7ffe !important;font-weight:normal !important;font-size:13px;display:inline}
.Rec_InfoList,.Rec_NoteList{margin-left:20px;}
.Rec_NoteList li{list-style:  url("../../images/icoinfo.png");border-bottom:#6c6c6c 1px dashed;padding:3px 0}
.Rec_InfoList li{list-style:url("../../images/ico.png");border-bottom:#6c6c6c 1px dashed;padding:3px 0}
.Rec_InfoList li span,.Rec_NoteList li span{font-family:arial;font-size:12px;font-weight:normal;color:#6c6c6c;display:inline}
.Rec_InfoTitle{font-family:arial;font-size:12px;font-weight:bold;color:#6c6c6c}
.Rec_NoteTitle{font-family:arial;font-size:12px;font-weight:bold;color:#6c6c6c}
/*.Rec_NoteList li{padding:3px 0;display:block;float:left}*/
.Rec_NxtButton{background-color:#44c767 !important;border-radius:5px !important;border:1px solid #15b335 !important;padding:3px 4px !important;color:#fff !important;cursor:pointer;text-shadow:none !important;font-weight: 700 !important;}
.Rec_PreButton{background-color:#a7bbb5 !important;border-radius:5px !important;border:1px solid #859b96 !important;padding:3px 4px !important;color:#fff !important;cursor:pointer;text-shadow:none !important;font-weight: 700 !important;}
.Rec_ButtonBlue{background-color:#337ab7 !important;border-radius:5px !important;border:1px solid #337ab7 !important;padding:3px 4px !important;color:#fff !important;cursor:pointer;text-shadow:none !important;font-weight: 700 !important;}
.Rec_Notebtn{background-color:#f26522 !important;border-radius:5px !important;padding:3px 4px !important;color:#fff !important;font-weight: 700 !important;}
.REC_Head{font-weight:normal !important}
.Rec_Title{font-size:20px;font-weight:normal !important;color:#009900 !important;display:inline;line-height:16px}
.Rec_Desc{font-size:13px;font-weight:normal !important;color:#626262 !important;display:inline;line-height:24px;padding-left: 7px;}

::-webkit-input-placeholder {
font-style:italic;
color: #999;
}
:-moz-placeholder {
font-style:italic;
color: #999;
}
::-moz-placeholder {
font-style:italic;
color: #999;
}
:-ms-input-placeholder {
font-style:italic;
color: #999;
}

.SidePnlTitle{color:#3c7eba;font-weight:normal;font-size:14px}
.SidePnlList{float:left;margin-top:10px}
.SidePnlList li{padding:5px 0;list-style:none}
.SidePnlList li span{font-weight:normal;color:#9b9b9b;margin-top:0; vertical-align: -moz-middle-with-baseline;}
.SidePnlList li span img{vertical-align:middle}
.SidePnlIcn{width:31px;height:31px;border-radius:50%;background-color:#1ac93c;float:left;vertical-align:middle;margin-right:10px;color:#fff;text-align:center;line-height:30px;font-weight:bold}
.icnone{background-color:#16b8e7 !important}
.SidePnlText{width:calc(100% - 50px);float:left}