<style type="text/css">

      body, table, input, textarea, select {

        font-family: verdana;

        font-size: 12px;

      }

      table {

        border-collapse: collapse;

      }

      td, th {

        vertical-align: top;

        border: 1px solid #999;
        font-family: verdana;

        font-size: 12px;


      }
    h1 {

        vertical-align: top;
        font-family: verdana;
		color: blue;
        font-size: 20px;


      }

      img {

        border-width: 0px;

      }
	.home{
      background-image: url("paduke.jpg"),url("gohome.png"),url("lamp.gif") ;
	    background-position:right bottom, right bottom,center bottom;
     background-size: 25px,50px,50px;
     background-repeat: no-repeat,no-repeat,no-repeat;
	 } 

	.home1{
     background-image: url("approved.png"),url("gohome.png") ;
	  background-position: center,right bottom;
     background-size: 100%,50px;
     background-repeat: no-repeat,no-repeat;
	 }

   .homepend{
    background-image: url("pending-approval.png"),url("gohome.png") ;
    background-position:right bottom, right bottom;
   background-size: 80px,25px;
   background-repeat: no-repeat,no-repeat;
 }
  .areaheader {
		color: white;vertical-align:center;background-color:green;text-align:center;font-family: verdana;
	}
  .areaheader1 {
		color: white;vertical-align:center;background-color:Purple;text-align:center;font-family: verdana;
	}
  .weektotal {
		color: blue;vertical-align:center;background-color:lightgreen;text-align:center;font-family: verdana;font-weight: bold;
	}
  .weektotal1 {
		color: blue;vertical-align:center;background-color:#D050D0;text-align:center;font-family: verdana;;font-weight: bold;
	}
  .grandtotal {
		color: blue;vertical-align:center;background-color:lightgreen;text-align:center;font-family: verdana;font-weight: bold;font-size:15px
	}
  .grandtotal1 {
		color: blue;vertical-align:center;background-color:lightblue;text-align:center;font-family: verdana;;font-weight: bold;font-size:15px
	}
  .monthtotal {
		color: yellow;vertical-align:center;background-color:#007600;text-align:center;font-family: verdana;;font-weight: bold;
	}
  .monthtotal1 {
		color: yellow;vertical-align:center;background-color:#6B006B ;text-align:center;font-family: verdana;;font-weight: bold;
	}
  .dateheader {
		color: white;vertical-align:center;background-color:grey;text-align:center;white-space: nowrap; font-family: verdana;text-shadow: 1px 1px blue;font-size:20px;
	}
  .monthheader {
		color: white;vertical-align:center;background-color:black;text-align:center;white-space: nowrap;  ; font-size: 15px;font-family: verdana;text-shadow: 1px 1px red;

	}
  .summarycount{
    color: yellow;vertical-align:center;background-color:black;text-align:center; white-space: nowrap;font-size: 15px;font-family: verdana;font-weight: bold;
	}
  
  .home{
    background-image: url("paduke.jpg"),url("gohome.png"),url(lamp.gif) ;
background-position:right bottom, right bottom,center bottom;
   background-size: 25px,50px,50px;
   background-repeat: no-repeat;no-repeat;no-repeat;
   
 } 
.home1{
   background-image: url("gohome.png") ;
background-position: right bottom;
   background-size: 50px;
   background-repeat: no-repeat;
   
 }

 .wrapper {
  width: 100%;
  position: relative;
  border: 2px solid orange;
    border-left-color: orange;
    border-left-style: solid;
    border-left-width: 2px;
  border-left: 40px solid orange;
  padding: 15px;
  color: rgba(0, 0, 0, 0.5);
  font-size: small;
  display: inline-block;
}


 /* The Modal (background) */
 .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */ 
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  opacity: 100%;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

.blink-bg {
  animation: blinkingBackground 3s infinite;
}
@keyframes blinkingBackground{
  0%		{ background-color: lightcyan;}
  25%		{ background-color: lightpink;}
  50%		{ background-color: lightcyan;}
  75%		{ background-color: lightpink;}
  100%	{ background-color: lightcyan;}
}
.blink-bg1 {
  animation: blinkingBackground1 4s infinite;
}
@keyframes blinkingBackground1{
  0%		{ background-color: lightcyan;}
  25%		{ background-color: red;}
  50%		{ background-color: lightpink;}
  75%		{ background-color: red;}
  100%	{ background-color: lightcyan;}
}

.imgbox {
  display: grid;
  height: 100%;
}
.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}
    </style>

