body
{
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   font-family: "Trebuchet MS", Helvetica, sans-serif;
   font-size: 100%;
   background-color: #fff;
}

span.logo
{
   float: left;
   margin-top: 0.4em;
   font-size: 1.2em;
   font-weight: bold;
   color: #008000;   
}
	
span.header
{
   float: right;
   margin-top: 0.6em;
   font-size: 1em;
   font-weight: bold;
   color: #818589;	
}

span.pdfHeader
{
   float: left;
   margin-top: 0.6em;
   font-size: 1em;
   font-weight: bold;
   color: #818589;   
}

span.pageNumber
{
   float: right;
   margin-top: 0.6em;
   font-size: 0.8em;
}

span.pageLink
{
   float: right;
   margin-top: 6px;
   margin-bottom: 6px;
   padding: 8px 10px;
}

.flex-container 
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 5%;
}

.flex-container > div 
{
  margin: 3px 0px;
}

.grid-container
{
	display: grid;
	grid-template-columns: repeat(1, minmax(min-content, max-content)) 
	  repeat(1, minmax(min-content, max-content)); 
	column-gap: 2%;
}

.grid-item, .grid-item-col-2
{
	padding: 5px 0px;
}

.grid-item-col-2
{
   grid-column: span 2; 
}

.bordered-div 
{
   display: flex;
   width: 45%;
   min-width: 270px;
   border: 1px solid #ccc;
   border-radius: 4px;
   padding: 10px;
   margin: 10px 0px;
   background-color: #f8f8f8;
   box-sizing: border-box;
}
	
h1 
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 1.2em
}

h1.report 
{
   margin-top: 0.5em;
   margin-bottom: 0.2em;
   font-size: 1.2em
}
	
h2	
{
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-size: 1em
}

h2.report 
{
   margin-top: 0.3em;
   margin-bottom: 0.5em;
   font-size: 1em
}
	
h3 
{
   margin-top: 1em;
   margin-bottom: 0.5em;
   font-size: 1em;
   font-weight: normal;
   font-style: italic
}

h3.report 
{
   margin-top: 0.2em;
   margin-bottom: 0.5em;
   font-size: 0.8em;
   font-weight: normal;
   font-style: normal;
}
	
p	
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-align: justify;
}
	  
label 
{
   padding: 6px 6px 6px 0;
   display: inline-block;
}

label.compact
{
   font-size: 0.8em; 
}

input[type=text], input[type=date], select
{
   width: 100%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
}

input[type=text].amount 
{
   width: 100%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
   text-align: right;   
}

input[type=text].modal-input 
{
   width: 100%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical; 
}

input[type=text].modal-input-right 
{
   width: 60%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical; 
   text-align: right; 
}

input[type=password]
{
   width: 100%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
}

input.numField
{
   text-align: right;
}

textarea 
{
   width: 100%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: none;
}

select 
{
   width: 100%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

button[type=submit] 
{
   margin-top: 6px;
   margin-bottom: 6px;
   padding: 8px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   background-color: #fff;
}

button[type=reset] 
{
   margin-top: 6px;
   margin-bottom: 6px; 
   padding: 8px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   background-color: #fff;
}

button[type=button] 
{
   margin-top: 6px;
   margin-bottom: 6px;
   padding: 8px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   background-color: #fff;
}

.button-param
{
   margin-top: 0px !important;
   margin-bottom: 0px !important;
   padding: 5px 5px !important;
}

ul li
{
  margin-bottom: 6px;
}
	
table 
	{
	font-size: 1em;
	padding: 0;
	border-spacing: 0;
	border: 0;
	}
	
table.info td
{
   vertical-align: top;
   padding: 0px 20px 5px 0px;
}	
	
table.report
{
	font-size: 0.8em;
   border-spacing: 0px;
   border-collapse: collapse;   
	border: 1px solid #ccc;
   margin-top: 6px;
   margin-bottom: 15px;
   padding: 0px;
}

table.report thead, tbody
{
   border-bottom: 1px solid #ccc;
}

table.report th
{
   text-align: left;
   vertical-align: top;
   padding: 5px;
   border: 1px solid #ccc;
}

table.report td
{
   vertical-align: top;
   padding: 5px;
   border: 1px solid #ccc;
}
	
table.payslips 
{
   font-size: 0.8em;
   border: 0px;
   margin-left: 0px;
   margin-top: 6px;
   margin-bottom: 6px;
   padding: 0px;
}
   
table.payslips td 
{
   vertical-align: top;	
   padding: 0px;
}

table.cashlist
{
   font-size: 0.8em;
   border-spacing: 0px;
   border-collapse: collapse;   
   border: 1px solid #ccc;
   margin-top: 6px;
   margin-bottom: 15px;
   padding: 0px;
}

table.cashlist th
{
   height: 25px;
   text-align: left;
   vertical-align: top;
   padding: 5px;
   border: 1px solid #ccc;
}

table.cashlist tbody td
{
   height: 40px;
   vertical-align: bottom;
   padding: 5px;
   border-right: 1px solid #ccc;
}

table.cashlist tfoot td
{
   height: 25px;
   vertical-align: bottom;
   padding: 5px;
   border: 1px solid #ccc;
}

table.paysheet
{
   font-size: 0.8em;
   border-spacing: 0px;
   border-collapse: collapse;   
   border: 1px solid #ccc;
   margin-top: 6px;
   margin-bottom: 15px;
   padding: 0px;
}

table.paysheet thead, tbody
{
   border-bottom: 1px solid #ccc;
}

table.paysheet th
{
   text-align: left;
   vertical-align: top;
   padding: 5px;
   border-right: 1px solid #ccc;
   border-bottom: none;
}

table.paysheet td
{
   vertical-align: top;
   padding: 0px 5px 3px 5px;
   border-right: 1px solid #ccc;
   border-bottom: none;
}

table.paysheet td.title
{
   vertical-align: top;
   padding: 6px 5px 3px 5px;
   border-right: 1px solid #ccc;
   border-bottom: none;
}

table.auxilliary
{
   font-size: 0.8em;
   border-spacing: 0px;
   border-collapse: collapse;   
   border: 1px solid #ccc;
   margin-top: 15px;
   padding: 0px;
}

table.auxilliary thead, tbody
{
   border-bottom: 1px solid #ccc;
}

table.auxilliary th
{
   text-align: left;
   vertical-align: top;
   padding: 5px;
   border: 1px solid #ccc;
}

table.auxilliary td
{
   vertical-align: top;
   padding: 5px;
   border: 1px solid #ccc;
}
   
table.taxtable 
{
   width: 100%;  
   font-size: 1em;
   border: 1px solid #f8f8f8;
   border-left: none;
   border-right: none;
   margin: 0px;
   padding: 0px;
   background-color: #fff;
}
   
table.taxtable th
{
   text-align: center;
   padding: 5px 10px 5px 10px;
   background-color: #f8f8f8;
   border: 1px solid #ccc;
   font-weight: normal;
   font-style: italic;
}
   
table.taxtable td
{
   padding: 5px 10px 5px 10px;
 /*  border: 1px solid #f8f8f8;*/
   border-top: 1px solid #f8f8f8;
   border-bottom: 1px solid #f8f8f8;
   border-left: none;
   border-right: none;
}

.highlighted-row 
{
    background-color: #f0f5ff; /* Example light blue background */
}

.hidden-column 
{
   display: none;
}

hr.separator 
{
	color: #ccc;
	background-color: #ccc;
	height: 1px;
	border-width: 0;
	vertical-align: middle;
   margin: 4px;
}

.row
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1%;	
}

.col-10 
{
  width: 10%;
  min-width: 80px;
  margin-top: 6px;
  display: inline-block;
}

.col-15 
{
  width: 15%;
  min-width: 120px;
  margin-top: 6px;
  display: inline-block;
}

.col-30 
{
  width: 30%;
  min-width: 180px;
  margin-top: 6px;
  display: inline-block;
}

.col-35 
{
  width: 35%;
  margin-top: 6px;
  display: inline-block;
}

.col-30-right
{
	text-align: right;
   width: 30%;
   min-width: 180px;
   margin-top: 6px;
}

.col-45-right
{
   text-align: right;
   width: 45%;
   min-width: 270px;
   margin-top: 6px;
}

.col-45 
{
   width: 45%;
   min-width: 270px;
   margin-top: 6px;
   display: inline-block;
}

.col-55 
{
   width: 55%;
   margin-top: 6px;
   display: inline-block;
}

.col-60 
{
   width: 60%;
   margin-top: 6px;
   display: inline-block;
}

.col-100 
{
   width: 100%;
   margin-top: 6px;
   display: inline-block;
}

 /* Style the tab */
.tab 
{
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button 
{
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   margin: 4px 2px;   
   padding: 8px 10px;
   transition: 0.3s;
}

/* Change background colour of buttons on hover */
.tab button:hover
{
   background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active 
{
   background-color: #ccc;
}

/* Style the tab content */
.tabcontent 
{
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
} 

 /* Modal dialog box 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 colour */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal dialog box contents */
.modal-content 
{
   background-color: #fefefe;
   margin: 15% auto; /* 15% from the top and centred */
   padding: 0px;
   border: 1px solid #888;
   width: 25%; /* Could be more or less, depending on screen size */
   min-width: 250px;
}

/* Modal dialog box header */
.modal-header 
{
   padding: 2px 16px;
   border-bottom: 1px solid #CCCCCC;
}

/* Modal dialog box body */
.modal-body 
{
   padding: 16px 16px 8px 16px;
}

/* Modal dialog box footer */
.modal-footer 
{
   padding: 2px 16px;
   text-align: right;
}

/* Close button (X) for modal dialog box */
.close 
{
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
}

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

 /* Pop-up window background */
.popup-window
{
   display: none; /* Hidden by default */
   position: absolute; 
   z-index: 1000; 
   left: 50%;
   top: 18%;
   transform: translate(-50%, -50%);
   justify-content: center;
   align-items: center;
}

 /* Pop-up window contents */
.popup-content 
{
   background-color: #f8f8f8;
   padding: 0px 10px 0px 10px;
   border: 1px solid #f8f8f8;;
   border-radius: 4px;
   text-align:center;
   position: relative;
   max-width: 90%;
   width: 150px;
}

 /* Paragraph within pop-up window */
p.popup  
{
   margin-top: 0.4em;
   margin-bottom: 0.4em;
   font-size: 0.7em;
   text-align:center;
}

/* Close button (X) for pop-up window */
.popup-close 
{
   color: #aaa;
   float: right;
   margin-top: 0.2em;
   margin-bottom: 0.2em;
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;
}

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