body {
	/* margin: 0 auto; */
	padding: 0;
	background: whitesmoke url('images/bg4.png');
	padding-top: 0px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

p {
	margin-bottom:20px;
}

.note {
	color: #808080;
	font-size: medium;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

div.page {
	width:90%;
	margin:0 auto;
	background:white;
	padding:0px 10px 0px 10px;
	box-shadow: 0px -1px 11px 0px rgba(50, 50, 50, 0.95);
}

div.header {
	width:100%;
	margin:0 auto 5px;
	padding-bottom:10px;
	background:#EBEBEB url('images/p5.png') repeat scroll;
}

div.title {
	float:left;
}

.clear {
	clear:both;
}

div.titlemenu {
	background-color:aqua;
}

div.main {
	clear:both;
}

div.calc {
	width:810px;
	float:left;
}

.tabs {
	background-color: #91c4dd;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 2px 5px 1px 2px;
	margin-right: 5px;
}

div.content {
	float: left;
	width:65%;
}

div.sidebar {
	background-color: #E3E3E3;
	border-radius: 20px;
	padding:10px 5px 5px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	float:right;
	width:30%;
	order: 2;
}

.pagelinks {
	height: 183px;
	width: 85%;
	overflow: scroll;
	background-color: rgba(255, 255, 255, 0.35);
	border-radius: 20px;
	padding: 0px 5px 0px 10px;
	font-weight: bold;
	float: right;
}

.pagelinks p {
	margin: 10px 0px 10px 0px;
	padding: 0;
}

div.footer {
	clear:both;
	border-top:thin grey solid;
	font-size: 0.7em;
	color: grey;
	text-align: center;
	font-family: "Trebuchet MS", Verdana, Arial;
	padding-bottom: 5px;
}

h1 {
	font-size:3.1em;
	margin:0 0 0 5px;
}

h1 a:link, h1 a:visited {
	color: #000000;
	text-decoration: none;
}

.form02 {
	height:70px;
	width:804px;
	background-image: linear-gradient(to bottom, #bfd8e5 0%,#8ebad2 19%,#8ebad2 75%, #5FA7CE 100%);
}

.buttonhide {
	float: left;
	padding-left: 15px;
	padding-top: 15px;
}

.mbuttonhide {
	display: none;
}

.button1 {
	border:2px solid #dddddd;
	background: rgb(223,1,1);
	background: linear-gradient(180deg, rgb(252, 0, 0) 0%, rgb(172, 2, 2) 95%);
	color:#ffffff;
	font-family:'Arial';
	font-weight:bold;
	font-size:12pt;
	width:85px;
	height:30px;
}

div.inp {
	display:inline;
	padding-left: 4px;
	padding-right: 3px;
}

div.inp1 {
	float:left; 
	font-weight:bold; 
	padding-left: 10px;
	margin-top:15px;
}

div.formblock {
	display:inline;
}

div.inp2 {
	float:left; 
	text-align:right; 
	font-family:Calibri; 
	width:max-width; 
	margin-top:10px; 
	padding-right: 10px;
}

.container {
  display: block;
  position: relative;
  padding-left: 10px;
}

div.inp3 {
	width:145px; 
	float:left; 
	padding-top: 10px; 
	padding-left: 10px;
	text-align:right; 
	font-family:Calibri;
}

div.inp4 {
	float:left; 
	text-align:right; 
	font-family:Calibri; 
	width:max-width;
	margin-top:5px; 
	padding-right: 10px;
}

.grp-scroll {
	background-color: #5FA7CE;
	height: 19px;
	margin-right: 2px;
	border-bottom-style: outset;
	border-bottom-width: 1px;
	border-bottom-color:white;
}

.swipeinfo {
	display:none;
}

table.calc {
	border-collapse:collapse;
	font-family:Calibri;
	width:808px;
	border-bottom:medium silver solid;
}

table.calc #gross, #holiday, #empni, #umbfee, #expense, #salary, #taxable, #persallow, #married, #taxpaid, #nicontri, #tdeduct, #takehome {
	height: 43px;
}


#comparemob {
	display: none;
}

table.calc th[scope=col] {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
}

table.calc th[scope=row] {
	padding-left:5px;
	text-align:left;
	font-size:1.6em;
	font-weight:bold;
	width:332px;
}

table.calc th#gross {
	background-color:white;
	background-image: linear-gradient(to top, rgba(128,128,128,1), rgba(128,128,128,0.5));
	
}

table.calc th#holiday {
	background-color:white;
	background-image: linear-gradient(to top, rgba(255,255,0,1), rgba(255,255,0,0.5));
}

table.calc th#empni {
	background-color:white;
	background-image: linear-gradient(to top, rgba(187, 86, 93,1), rgba(187, 86, 93,0.6));
}

table.calc th#umbfee {
	background-color:white;
	background-image: linear-gradient(to top, rgba(165, 129, 61, 1), rgba(165, 129, 61, 0.7));
}

table.calc th#expense {
	background-color:white;
	background-image: linear-gradient(to top, rgba(255, 153, 0, 1), rgba(255, 153, 0, 0.7));
}

table.calc th#salary {
	background-color:white;
	background-image: linear-gradient(to top, rgba(153, 153, 153, 1), rgba(153, 153, 153, 0.7));
}

table.calc th#taxable {
	font-style: italic;
	background-color:white;
	background-image: linear-gradient(to top, rgba(166, 166, 166, 1), rgba(166, 166, 166, 0.7));
}

table.calc th#persallow {
	background-color:white;
	background-image: linear-gradient(to top, rgba(74, 174, 254, 1), rgba(74, 174, 254, 0.7));
}

table.calc th#pension {
	background-color:white;
	background-image: linear-gradient(to top, rgb(129, 175, 213), rgba(131, 165, 191, 0.7));
}

table.calc th#married {
	background-color:white;
	background-image: linear-gradient(to top, rgba(128, 198, 254, 1), rgba(128, 198, 254, 0.7));
}

table.calc th#student {
	background-color:white;
	background-image: linear-gradient(to top, rgba(255, 96, 0, 1), rgba(255, 96, 0, 0.7));
}

table.calc th#taxpaid {
	background-color:white;
	background-image: linear-gradient(to top, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.7));
}

table.calc th#nicontri {
	background-color:white;
	background-image: linear-gradient(to top, rgba(255, 51, 51, 1), rgba(255, 51, 51, 0.8));
}

table.calc th#tdeduct {
	background-color:white;
	background-image: linear-gradient(to top, rgba(255, 77, 77, 1), rgba(255, 77, 77, 0.8));
}

table.calc th#takehome {
	background-color:white;
	background-image: linear-gradient(to top, rgba(0, 204, 0, 1), rgba(0, 204, 0, 0.7));
}

table.calc td {
	font-size:1.6em;
}

.row8 td {
	color: #456078;
}

table.calc td:nth-child(odd) {
	background-image:url('images/Untitled-1.png'); 
}

table.calc tfoot th {
	padding-left:5px;
	text-align:left;
	background-color: #838383;
	color: white;
}

table.calc tfoot td {
	padding: 0px 0px 0px 10px;
	font-size:medium;
	background-color: #CDCDCD;
	color: #666666;
}

.row1 {
	background-color: #d8d8d8;
}

.row2 {
	background-color: #ffffa8;
}

.row3 {
	background-color: #f7b9bd;
}

.row4 {
	background-color: #dac399;
}

.row5 {
	background-color: #fbca81;
}

.row6 {
	background-color: #d8d8d8;
}

.row7 {
	background-color: #e6e6e6;
}

.row8 {
	background-color: #a8d8ff;
}

.row9 {
	background-color: #c7e6ff;
}

.row10 {
	background-color: #ffa3a3;
}

.row11 {
	background-color: #fdbfbe;
}

.row12 {
	background-color: #ffcaca;
}

.row13 {
	background-color: #A9F5A9;
}

.pensionrow {
	background-color: #d3e3f0;
}

.studentrow {
	background-color: #ffb7a3;
}


div.content h1, h2, h3, h4 {
    padding-left:10px;
}

div.content h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: x-large;
    color: red;
    border-bottom: thin silver solid;
}

div.header h2 {
	font-size: medium;
}

div.content h2 {
	font-family:'Lucida Sans Unicode','Lucida Grande',verdana,sans-serif;
	font-weight: normal;
	color:#000000;
	padding: 5px;
	background-color: #e6e6e6;
	border-bottom: 3px solid #cccccc;
}

div.content p {
    line-height: 1.7em;
    font-size: 1em;
    color: #333333;
}

div.content p#ft,#ft2 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:large;
}

/*table*/

table.rate {
	border-collapse: collapse;
	border-spacing:1px;
	margin-bottom:20px;
	width: 600px;
	font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

table.rate th, tr, td {
	padding:5px 10px;
}

table.rate th {
	background-color: #60AFDB;
	border-bottom:5px #0066CC solid;
}

table.rate td {
	background-color:#F6FDFF;
	border-bottom: 1px #60AFDB solid;
}

table.rate tbody {
	display: table-row-group;
    border-bottom: 3px #60AFDB solid;	

}


/*keypad buttons*/

div.button {
	display: none;
}

div.button input[type=button] {
	background-color: #8ebad2;
	width: 8%;
	height: 30px;
	/* DEFAULT width: 44px;
	height: 44px;*/
}

#taxbutton {
	text-align: center;
	width: 50%;
}

@media only screen and (max-width: 740px) {

body, div.data, .scroll/*, .main*/ {
	width: 100%;
}

div.page {
	width: unset;
	margin: unset;
	padding: 0px 0px 0px 0px;
}

div.main {
	margin: 0 auto;
	padding: 0 0 0 0;
	display: flex;
	flex-direction: column;
  }
  
  div.calc {
	width:100%;
  }

table.calc th[scope=col] {
	font-family: Calibri;
	font-weight:normal;
}

.tabs {
	width: max-content;
	padding: 2px 5px 1px 2px;
}

.tabs input[type=radio] + label {
  color: #ccc;
  font-style: italic;
} 

.tabs input[type=radio]:checked + label {
  color: #f00;
  font-style: normal;
} 

/*
.tabs input[type=radio] {
	opacity: 0;
	position: fixed;
	width: 0;
}

.tabs label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
    cursor:pointer;
}

.tabs label:hover {
  background-color: #dfd;
}

.tabs input[type=radio]:focus + label {
    border: 2px dashed #444;
}

.tabs input[type=radio]:checked + label {
    background-color: green;
    border-color: yellow;
}*/

.grp-scroll-main {
	/* margin-top: 5px; */
	overflow-x: scroll;
	float: left;
	width: 100%;
	}

.grp-scroll {
	overflow-x: scroll;
	height: unset;
	background-color: unset;
	border: unset;
	}


.line {
	width: max-content;
}

.mscroll {
	overflow-x:scroll; 
	margin-left: 115px;	
	/* iphone*/
	-webkit-touch-callout: none;
}

.swipeinfo {
	display:block;
}

.swipeinfo p {
	color:fuchsia;
	text-align:center;
	margin-bottom: 0px;
}


.buttonhide {
	display: none;
}

.mbuttonhide {
	display: block;
	margin: auto;
	width:20%;
	margin-top: -30px;
	margin-bottom: 10px;
}

.colfix, #compare, #blank {
	position:absolute;
	left: 10px;
}

.colfix1 {
	position:absolute;
	height:20px;
	width:85px;
	left: 20px;
	border-bottom:2px black solid; 
	border-top:2px black solid;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#blank {
	width:100px;
	border-bottom:2px black solid; 
	border-top:2px black solid;
}

#compare {
	width: 100px;
	border-bottom:medium silver solid;
}
  
  table.calc {
	float:left;
	width: 300px;
	padding-right: 10px;
  }
  
  
table.calc #gross, #holiday, #empni, #umbfee, #expense, #salary, #taxable, 
#persallow, #married, #taxpaid, #nicontri, #tdeduct, #takehome, #pension, #student {
	height: 43px;
	background-color: fuchsia;
	  	
}


table.calc th[scope=row] {
	font-size:1.0em;
	width:100px;
}

table.rate {
	width: 100%;
}

.tabs {
	border-radius: 5px;
}

.form02 {
	/* height: 132px; */
	width:100%;
	background-image:unset;
	}

div.inp {
	float:left;
	/* border: 2px solid gray; */
	border-radius: 10px;
	width: max-content;
	padding: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #96b4db;
	box-shadow: 1px 1px 5px 0px rgb(0 0 0 / 75%);
}
  
div.inp1 {
	margin-top:10px;
	/* border: 2px solid gray; */
	border-radius: 10px;
	width: 210px;
	padding: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #96b4db;
	box-shadow: 1px 1px 10px 0px rgb(0 0 0 / 75%);
}

#age {
	display: block;
}

div.inp:hover  {
	box-shadow: 1px 1px 5px 0px rgb(39 0 255 / 75%);
}

div.inp1:hover  {
	box-shadow: 1px 1px 10px 0px rgb(39 0 255 / 75%);
}

div.inp2:hover  {
	box-shadow: 1px 1px 10px 0px rgb(39 0 255 / 75%);
}

div.inp3:hover  {
	box-shadow: 1px 1px 10px 0px rgb(39 0 255 / 75%);
}

#b001 {
	box-shadow: inset 0px 2px 5px 0px rgb(196, 194, 194);
}

div.formblock {
	padding-top: 10px;
	display: block;
	text-align: center;
}

#forminputage {
	padding-top: 10px;
	display: block;
	text-align: center;
}

div.inp2, div.inp4 {
	float:left;
	text-align:left;
	font-family:Calibri;
	padding-left: 5px;
	/* border: 2px solid grey; */
	border-radius: 10px;
	background-color: #96b4db;
	margin: 10px 5px 5px 5px;
	width: max-content;
	padding-top: 3px;
	box-shadow: 1px 1px 10px 0px rgb(0 0 0 / 75%);
}

div.inp3 {
	float:left;
	padding-top:10px;
	text-align:right;
	font-family:Calibri;
	/* border: 2px solid gray; */
	border-radius: 10px;
	background-color: #96b4db;
	margin-top: 10px;
	margin-right: 5px;
	margin-left: 5px;
	padding-left: 0px;
	padding-right: 5px;
	box-shadow: 1px 1px 10px 0px rgb(0 0 0 / 75%);
}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 6px;
  padding-top: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: thin #0099FF solid;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
  transition: all 0.3s ease-out;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#wkhours {
	display: block;
	padding-bottom: 10px;
}

#wkdays {
	display: block;
	padding-bottom: 10px;
}


#comparedesktop {
	display:none;
}

#comparemob {
	display: block;
}
  
  div.content {
	float: left;
	width:unset;
	padding-left: 10px;
	padding-right: 10px;
  }
    
  div.sidebar {
	padding:10px 5px 5px 25px;
	border-radius: 5px 5px 5px 5px;
	margin-bottom: 10px;
  margin:0 auto;
	width:90%; 
  }
  
  h1 {
	font-size:xx-large;
  }

#taxbutton {
	text-align: center;
	width: unset;
}
  
  div.button {
	display: block;
	clear:both;
}

}