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.title
{
   float: left;
   margin-top: 0.4em;
   font-size: 1.2em;
   font-weight: bold;
   color: #58CC02;   
}

span.subtitle
{
   margin-top: 0.6em;
   font-size: 1.1em;
   font-weight: bold;
   color: #818589;   
	display: inline-block;
}

span.nav_left
{
   float: left;
   margin-top: 6px;
}

span.nav_right
{
   float: right;
   margin-top: 6px;
}

.flex-container 
{
  display: flex;
  flex-wrap: nowrap;
  column-gap: 5%;
}

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

.bordered-div 
{
   float: left;
   width: 100%;
   border: none;
   border-radius: 4px;
   padding: 10px;
   margin: 10px 0px;
   background-color: #d1e5f4;
   box-sizing: border-box;
   text-align: left;
}
   	
h1 
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 1.2em
}
	
h2	
{
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-size: 1em
}
	
h3 
{
   margin-top: 1em;
   margin-bottom: 0.5em;
   font-size: 1em;
   font-weight: normal;
   font-style: italic
}
	
p	
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-align: justify;
}
	  
dl 
{
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   text-align: justify;
}        

dt 
{
   display: block;
   color:#7030A0;
   margin-top: 1em;
   margin-bottom: 1em;
   text-align: justify;
}
   
dd 
{
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 20px;
   text-align: justify;
}  	  

label 
{
   padding: 6px 6px 6px 0;
   display: inline-block;
}

input[type=text], select, textarea 
{
   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: 60%;
   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; 
}

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

.select_country 
{
	float: right;
   width: 35%;
   padding: 3px 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin-top: 0.5em;
   font-size: 0.8em;
}

.select3 
{
   width: 40%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.select4 
{
   width: 55%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.select5 
{
   width: 65%;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

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

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

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

.button-modal
{
   margin-top: 6px;
   margin-bottom: 6px;
   padding: 8px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   background-color: #fff;
}
	
table 
{
	font-size: 1em;
	padding: 0;
	border-spacing: 0;
	border: 0;
}

table.footer
{
   border-top: 1px solid #CCCCCC;
   padding-top: 10px;
   font-size: 0.8em;
}
   
table.data
{
   font-size: 0.8em;
   margin-top: 15pt;
   margin-bottom: 15pt;
   border: 1px solid #CCCCCC;
   border-collapse: collapse;
}
   
table.data th
{
   border: 1px solid #CCCCCC;
   background-color: lightblue;
}
   
table.data td
{
   border: 1px solid #CCCCCC;
}  

table.calculator
{
   font-size: 0.8em;
   background-color: #f1f1f1; 
   border-spacing: 3px;
   border: 1px solid #CCCCCC;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20pt;
   margin-bottom: 20pt;
}

table.calculator td
{
   vertical-align: middle;
}

table.calculator th
{
   vertical-align: middle;
   padding: 3px;
}

table.results
{
   font-size: 0.8em;
   border: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20pt;
   margin-bottom: 0pt;
   padding: 0pt;
}

table.results th, td 
{
   vertical-align: top; 
   padding: 3px;
}
   
table.working
{
   font-size: 0.8em;
   border: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10pt;
   margin-bottom: 0pt;
   padding: 0pt;
}
   
table.listing
{
   font-size: 1em;
   border: 0px;
   margin-top: 20pt;
   margin-bottom: 10pt;
   padding: 0pt;
}
         
table.map
{
   margin-top: 10pt;
   margin-bottom: 15pt;
}
   
table.ad
{
   border: 1px solid #000000;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   padding: 4pt;
   text-align: left
}	
	
table.report
{
	font-size: 0.8em;
   border-spacing: 0px;
   border-collapse: collapse;   
	border: 1px solid #ccc;
   padding: 0px;
}

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

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

table.report td
{
   vertical-align: top;
   padding: 5px;
   border-right: 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.taxtable 
 {
   font-size: 1em;
   border: 1px solid #ccc;
   margin-left: 0px;
   margin-top: 6px;
   margin-bottom: 10px;
   padding: 0px;
}
   
table.taxtable th
{
   text-align: left;
   padding: 5px 20px 5px 20px;
   border: 1px solid #ccc;
}
   
table.taxtable td
{
   padding: 5px 20px 5px 20px;
   border: 1px solid #ccc;
}

input.numField
{
	text-align: right;
}

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

/* Clear floats after the columns */
.row:after 
{
  content: "";
  display: table;
  clear: both;
}

.col-10 
{
  float: left;
  width: 10%;
  margin-top: 6px;
}

.col-25 
{
  float: left;
  width: 30%;
  margin-top: 6px;
}

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

.col-60 
{
  float: left;
  width: 60%;
  margin-top: 6px;
}

.span_1_3 
{
   float: left;
   width: 70%;
   margin-top: 6px;
}

.span_1_3_right 
{
   float: right;
   width: 70%;
   margin-top: 6px;
}
   
.span_2_3 
{
   float: left;
   width: 10%;
   margin-top: 6px;
}

.span_2_3_right 
{
   float: right;
   width: 10%;
   margin-top: 6px;
}   

.style1
{
   color:#F00;
}
   
.style2 
{
   color:#00F;
}

.style3 
{
   color:#7030A0;
}

.redtext 
{
   color: #F00;
}

 /* 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;
  padding: 14px 16px;
  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;
}