body {
	font-family: 'Noto Sans','Sans Serif',Arial;
	font-size: 10pt;
	background-color: #e8e8e8;
	color: #383838;
}

table.site {
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	background-color: #ffffff;
	border: 1px solid #d8d8d8;
}

div.bismillah {
	font-family: 'Noto Sans Arabic', Sans-Serif;
	font-size: 1.25em;
	text-align: right;
	color: #888888;
}

div.arabic {
	font-family: 'Noto Sans Arabic', Sans-Serif;
	font-size: 1.25em;
	text-align: right;
	color: #0;
}

textarea {
	margin: auto;
	width: 20em;
	height: 8em;
	resize: none;
	overflow: auto;
}

input,select,textarea {
	font-family: "Noto Sans","Sans Serif",Arial;
	font-size: 1em;
	border: 1px dotted #008000;
	background-color: #ffffff;
	color: #383838;
}

input[type=radio], input[type=submit] {
	font-family: "Noto Sans","Sans Serif",Arial;
	font-size: 1em;
	border: 0;
}

table.statement {
	width: 100%;
	border: 1px solid #d8d8d8;
	padding: 1px 2px 1px 2px;
}

th.statement {
	color: #008000;
	text-align: left;
	padding: 1px 2px 1px 2px;
	border-bottom: 1px solid #d8d8d8;
}

td.statement {
	padding: 1px 2px 1px 1px;
	text-align: left;
}

td.amount {
	padding: 1px 2px 1px 2px;
	text-align: right;
}

@media (min-width: 799px) {
 body {
    font-size: 11pt;
 }
 table.site {
	margin-top: 10px;
	width: 960px;
	height: 600px;
	padding: 10px;
 }
 input,select,textarea {
	padding: 5px 8px 5px 8px;
 }
 textarea {
	width: 32em;
	height: 6em;
 }
 table.statement {
	padding: 3px 8px 3px 8px;
 }

 th.statement {
	padding: 3px 8px 3px 8px;
 }

 td.statement {
	padding: 3px 8px 3px 8px;
	word-break: all;
 }

 td.amount {
	padding: 3px 8px 3px 8px;
 }
}

td.site {
	width: 100%;
	vertical-align: top;
}

td {
	font-size: 1em;
	vertical-align: middle;
}

table.box {
	background-color: #f8f8f8;
	border: 1px dotted #00a800;
	padding: 10px;
	text-align: left;
}

th {
	text-align: left;
}

div.logo {
	font-family: Arial;
	text-align: left;
	font-size: 2.0em;
	font-weight: bold;
	color: #008000;
	line-height: 0.75;
}

div.aleft {
	display: inline;
	float: left;
}

div.aright {
	display: inline;
	float: right;
}

hr {
    border: 0;
    color: #d8d8d8;
    background: #d8d8d8;
    height: 1px;
}

small {
	font-size: 0.35em;
	color: #a8a8a8;
}

input[type=submit] {
	color: #ffffff;
	background: #008000;
	padding: 3px 5px 3px 5px;
	text-decoration: none;
}

input[type=submit]:hover {
	background: #f0f0f0;
	color: #008000;
	text-decoration: none;
}

input:disabled {
	background: #f0f0f0;
	color: #008000;
	text-decoration: none;
}

a {
	color: #008000;
	text-decoration: none;
}

a.menu {
	display: inline-block;
	color: #ffffff;
	background: #008000;
	padding: 3px 5px 3px 5px;
	text-decoration: none;
	width: 99px;
}

a.menu:hover {
	background: #f0f0f0;
	color: #008000;
}

a.navbar {
	background: #ffffff;
	color: #008000;
	text-decoration: none;
	padding: 1px 3px 1px 3px;
	border: none;
}

a.navbar:hover {
	background: #008000;
	color: #ffffff;
	text-decoration: none;
	padding: 1px 3px 1px 3px;
	border: none;
}

span.navbar {
	background: #d8d8d8;
	color: #000000;
	text-decoration: none;
	padding: 1px 3px 1px 3px;
	border: none;
}

tr.statement:nth-child(even) {background-color: #f0f0f0}

sup {
	background-color: #888888;
	color: #ffffff;
	vertical-align: super;
	padding: 1px 3px 1px 3px;
}

em {
	color: #888888;
	font-size: 0.75em;
}

span.error {
	color: #800000;
}

abbr[title], acronym[title] {
	color: #008000;
	font-weight: bold;
}