/*
   CSS Styling For SIM 
   ww
   Last Update : Sep 2018

*/

/*------------------ Global image Styling ---------------------*/
img{

}



/*---------------------- View Table Header Freeze --------------------*/



.ViewTable_freeze{
  background:rgba(255,255,255,0.7);

}


.ViewTable_freeze tbody th{
  z-index:4000;
  padding: 0.25rem;
  
}

.ViewTable_freeze tbody td{
  z-index:4000;
  padding: 0.25rem;
  
}

.ViewTable_freeze thead th{
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  z-index:4002;
}

.ViewTable_freeze thead td{
  background: white;
  position: sticky;
  top: 16; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  z-index:4002;
}




/*-------------------- Page Number Styling ---------------------*/

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20px;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

/*--------------------- Page Break Styling ----------------------*/

.A4Page_landscape{
  width:29.7cm;
  height:21.0cm;
  font-size:10px;
}

.A4Page_portrait{
  width:21.0cm;
  height:29.7cm;
  font-size:10px;
}

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

/*--------------------- Data Divs ----------------------------*/
.data_divs2 {	   
	    position:relative; /* Method for dynamic div container width, height and position */           
            margin:auto;
            width:92vw;                   
	    height:52vh;  
            /*max-width: 87vw;     vh, vw = viewport width and viewport height, eg. screen resolution 
            max-height:54vh;           */                  
	    overflow:scroll;      
            border:2px solid green;
     	    /* margin:0 auto; */
	}       

.data_divs {	   	 
            width:92vw;                   
	    height:52vh;  
	    overflow:scroll;      
	}       


/*--------------------- stylin for first load menu table-----------*/
.FirstLoadMenu{
  color:white;
  font-size:14px;

}


/*--------------------- Clock Picker Styling ---------------------*/
.navbar h3 {
	color: #f5f5f5;
	margin-top: 14px;
}
.hljs-pre {
	background: #f8f8f8;
	padding: 3px;
}
.footer {
	border-top: 1px solid #eee;
	margin-top: 40px;
	padding: 40px 0;
}
.input-group {
	width: 110px;
	margin-bottom: 10px;
}
.pull-center {
        margin-top:auto;
        margin-bottom:auto;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
@media (max-width: 767px) {
  .pull-center {
    float: right;
  }
}


/* ------------------------------------------menu table style ---- */

body {
	background-color: #003366;
	/*background-color: #eee;
	//background:-moz-linear-gradient(top, #000444, #000033);
	//text-align:center;*/
	/*color: #888;*/
        vertical-align:middle;
        text-align:center;
}

.box{
	box-shadow:inset 0px 0px 10px #ccc;
	padding:0em;
	top: 0%;
        left: 0%;
	max-height:100%;
	width: 100%;
	overflow-y: scroll;
	position: relative;
	}


.absen_form {
	padding:0px;
        display: none;
        position: fixed;
        right:0;
        left:0;
        top:0;
        bottom:0;  
        margin-right:auto;
        margin-left:auto;
        margin-top:auto;
        margin-bottom:auto;
        max-width: 100%;
        max-height:100%;
        /*border: 5px solid blue;*/
	background-color: white;
        /*z-index:1002;*/
        overflow: auto;
    }

.mainform{
        /*pbox-shadow:inset 0px 0px 10px #ccc;*/
	padding:0em;
	top: 0%;
        left: 0%;
	max-height:100%;
	width: 100%;
	overflow-y: scroll;
	position: relative;
    }

.login_style{
        padding:0px;
        display: none;
        position: fixed;
        right:0;
        left:0;
        top:0;
        bottom:0;
        /*width:auto;
        height:auto; */
        margin-right:auto;
        margin-left:auto;
        margin-top:auto;
        margin-bottom:auto;     
        /*-moz-opacity: 80;*/
        opacity:1;
        /*filter: alpha(opacity=80);*/
        /*border: 2px solid blue;*/
	    background-color: white;
        /*z-index:1002;*/
        overflow: auto;
        /*white-space: nowrap;
        display: inline;
        display: inline-block;*/
      
}

.login_box{
  border:5px solid green;

}

.black_overlay{
        display: none;
	padding:0px;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        /*-moz-opacity: 0.6;*/
        opacity:.60;
        /*filter: alpha(opacity=60);*/
    }

.popup_content{
        position:absolute;
        display:none;
	padding:0px;              
        right:0;
        left:0;
        top:0;
        bottom:0;  
        margin-right:auto;
        margin-left:auto;
        margin-top:5%;
        margin-bottom:auto;
        height:80vh;
        width:80vw;       
	background-color: white;       
       
}

.white_content {
	padding:0px;
        /*display: block;*/
        position: fixed;
        right:0;
        left:0;
        top:0;
        bottom:0;  
        margin-right:auto;
        margin-left:auto;
        margin-top:auto;
        margin-bottom:auto;
        max-width: 97%;
        max-height:97%;
        /*border: 5px solid blue;*/
	background-color: white;
        /*z-index:1002;*/
        overflow: auto;
    }


.Grow:hover
{ 
  -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);

}


.general_table{
   position:relative;
   left:0px;
   right:0px;
   top:0px;
   bottom:0px;
   margin-left:auto;
   margin-top:auto;
}


.data_peg
{
  border:1px solid;
  background-color:#ffff99;
  font-size:11px;
  width:430px;
}

.data_peg th,td
{
  border-bottom: 1px solid #ddd;
}

.menu_table
{
  border:2px solid;
  border-radius:5px;
}

.menu_table a
{
  display:block;
  text-decoration:none;
}

.menu_table tr:hover
{
  background-color:#ffff99;
}
/*---------------------------------------- tabel menu icon -----------*/

.menu_icon
{
  width:130px;
  height:500px;
  overflow-y:auto;
}


/*---------------------------- Login table style-------------*/
.login_table
{
  border-collapse:collapse;
  border-spacing:20px;
  overflow-y:auto;  
  overflow-x:auto;
  word-wrap:break-word;
  font-size:9px;
}

.login_table th, td {
    /*border-bottom: 7px solid #ddd; */
    border-bottom:none;
}


/* ------------------------------------------mysql table style ---- */
.data_table
{
  border-collapse:collapse;
  border-spacing:10px;
  overflow-y:auto;  
  overflow-x:auto;
  word-wrap:break-word;
  font-size:10px;
}

.data_table th
{
  border-style:solid;
  border-width:1px;
  border-color:#ccceee;
  /*background-color:#cccfff; */
  background:-moz-linear-gradient(#fee,#faa);
  padding-left:6px;  
  /*word-wrap:break-word;*/
}

.data_table td
{
 border-style:solid;
 border-width:1px;
 border-color:#ccceee;
 padding-left:6px;
 /*word-wrap:break-word;*/
}

.data_table tr:nth-child(odd)
{
   background: #b8d1f3;
}

.data_table tr:nth-child(even)
{
   background: #dae5f4;
}

.data_table tr:hover
{
  background-color:#ffff99;
}

/* ------------------------------------------mysql table style 2 ---- */
.data_table2
{
  border-collapse:collapse;
  /*border-spacing:20px;*/
  overflow-y:auto;  
  overflow-x:auto;
  word-wrap:break-word;
  font-size:10.5px;
}

.data_table2 th
{
  border-style:solid;
  border-width:1px;
  border-color:#fffeee;
  background-color:#cccfff; 
  background:-moz-linear-gradient(#eeeaaa,#eeeccc);
  padding-left:6px; 
  /*word-wrap:break-word;*/
  font-size:10.5px;
}

.data_table2 td
{
 border-style:solid;
 border-width:1px;
 border-color:#ccceee;
 /*padding-left:6px;*/
 /*word-wrap:break-word;*/
}

.data_table2 td2
{
 border-style:solid;
 border-width:1px;
 border-color:#ccceee;
 background-color:#000333;
 padding-left:6px;
 /*word-wrap:break-word;*/
}

.data_table2 tr:nth-child(odd)
{
   background: #eee1f3;
}

.data_table2 tr:nth-child(even)
{
   background: #ffffee;
}

.data_table2 tr:hover
{
  background-color:#fffccc;
}


/* ------------------------------------------mysql table style 3 ---- */
.data_table3
{
  border-collapse:collapse;
  border-spacing:20px;
  overflow-y:auto;  
  overflow-x:auto;
  word-wrap:break-word;
  font-size:12px;
  width:100%;
}

.data_table3 th
{
  border-style:solid;
  border-width:1px;
  border-color:#222444;
  /*background-color:#cccfff; */
  background:-moz-linear-gradient(#dddccc,#aaaccc);
  padding-left:6px;  
  /*word-wrap:break-word;*/
  font-size:12px;
  color:#fff;
}

.data_table3 td
{
 border-style:solid;
 border-width:1px;
 border-color:#ccceee;
 padding-left:6px;
 /*word-wrap:break-word;*/
}

.data_table3 tr:nth-child(odd)
{
   background: #eee1f3;
}

.data_table3 tr:nth-child(even)
{
   background: #ffffee;
}

.data_table3 tr:hover
{
  background-color:#fffccc;
}

/* ------------------------------------------mysql table style 3b ---- */
.data_table3b
{
  border-collapse:collapse;
  border-spacing:20px;
  overflow-y:auto;  
  overflow-x:auto;
  word-wrap:break-word;
  font-size:12px; 
}

.data_table3b th
{
  border-style:solid;
  border-width:1px;
  border-color:#222444;
  /*background-color:#cccfff; */
  background:-moz-linear-gradient(#dddccc,#aaaccc);
  padding-left:6px;  
  /*word-wrap:break-word;*/
  font-size:12px;
}

.data_table3b td
{
 border-style:solid;
 border-width:1px;
 border-color:#ccceee;
 padding-left:6px;
 /*word-wrap:break-word;*/
}

.data_table3b tr:nth-child(odd)
{
   background: #eee1f3;
}

.data_table3b tr:nth-child(even)
{
   background: #ffffee;
}

.data_table3b tr:hover
{
  background-color:#fffccc;
}



/* ------------------------------------------ img link style ----- */
.MyImg:hover
{
  /*opacity: .7;*/
  /*filter:alpha(opacity=20);*/
  /*width:105%;
  outline:3px solid red;
  background-color:red;*/
  /*-moz-box-shadow: 0 0 20px red;*/
  -webkit-box-shadow: 0 0 20px red;
  box-shadow: 0 0 20px red;
  -webkit-filter: invert(100%);  
}

/* ------------------------------------------ css for resizable column width ----- */
.gridTableSeparator 
{
  width: 3px; 
  right:-4px;
  height:40px;
  float:right;    
  position:relative;  
  cursor: e-resize;  
}
.gridTableHeadline 
{
  line-height: 40px;  
  overflow: hidden;
}

/*------------------------------------------- css for link style --------------------- */
.logout_style a:link
{
   text-decoration:none;
   background-color:red;
   color:white;
}

.logout_style a:visited
{
   text-decoration:none;
   background-color:red;
   color:white;
}

.logout_style a:hover
{
   text-decoration:underline;
   background-color:blue;
   color:red;
}

a:link
{
   text-decoration:none;
   color:black;
}

a:visited
{
   text-decoration:none;
   color:black;
}

a:hover
{
   text-decoration:underline;
   background-color:black;
   color:red;
}