@import "normalize.css";
:root {
  --main-bg-color: white;
  --main-neg-color: black;
}

HTML { font-size: 83.33%; }
BODY
{
	background-color: #fff;
	margin: 0 auto !important;
	max-width: 2000px;
	padding: 0.5em 2em 1em 2em;
}
@media (max-device-width: 800px) {
	body { padding: 5px !important; margin: 0 !important;}
}
BODY.noborder, FORM
{
    margin: 0px;
    padding: 0px;
}
BODY
{
	font-family: "Segoe UI", sans-serif;
}
input, select, textarea {
	font-family: "Segoe UI", sans-serif;
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none){
	input[type=submit], input[type=button] {
		font-size: 1rem !important;
	}
}}
TABLE
{
    border: 0px;
	font-size: 100%;
	text-align: left;
}
* {
	box-sizing: border-box;
}
.fix-ie-button {
	width: auto;
	overflow: visible;
	padding-left: 1.5em;
	padding-right: 1.5em;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
input, button, textarea, select {
	margin: 2px;
}

input:not([type=file]):not([type=checkbox]):not([type=radio]),
textarea, select, button {
	border: 1px solid #bbb;
	border-radius: 4px;
	transition: 180ms box-shadow ease-in-out;
}
input:not([type=file]):not([type=checkbox]):not([type=radio])
{
	padding: 0 6px;
	height: 2.2em
}
input[disabled], button[disabled] { cursor: not-allowed !important; opacity: 0.6; font-weight: normal !important; }

input:not([type=file]):not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus, button:focus {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
	border-color: #80bdff;
	outline: 0;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
	background-color: #eee;
	display: inline-block;
	padding: 0 10px !important;
	height: 2.2em !important;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	font-weight: 500;
}

button:not([disabled]):hover,
input[type=button]:not([disabled]):hover,
input[type=reset]:not([disabled]):hover,
input[type=submit]:not([disabled]):hover {
	background-color: #d2e9f4;
	border-color: #68b6db !important;
}

select {
}
select:not([size]) {
	background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .5rem center/8px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 2.2em;
	padding: 0 6px;
	padding-right: 1.75rem;
}
textarea {
	resize: vertical;
}
td.align2textarea { vertical-align: top; padding-top: 0.8em !important; }

.light
{
    /* background-color: white; */
}
div.light {
	padding-top: 0;
	padding-bottom: 10px;
}
table.light_border { background-color: white; border: 1px solid silver; border-top: 0;}
.dark
{
    background-color: #d4c7be;
}
.td50
{
    text-align: center;
    width: 50%;
}

#top-tabs > div, #sub-menu { background-color: #e9e3de }
.start { background-color: #e9e3de !important; }
.maintenance{ background-color: #a4d1e8 !important; }
.reports{    background-color: #b9d287 !important; }
.settings{    background-color: #d6add6 !important; }
.time{    background-color: #ecb9b0 !important; }
.expenses{    background-color: #e6c364 !important; }
.expense-bg { background-color: #e9e3de; }
.expense-body { background-color: #f1deab; width: 85%; }
.pto { background-color: #f4ebbe !important; }
.invoicing { background-color: #dd9 !important; }
.home
{
    background-color: #e9e3de;
}
.t95per /* currently used on week and day views */
{
    background-color: #e9e3de;
    text-align: left;
    width: 100%;
}
.top-row { display: flex; align-items: flex-end; }
.company-logo { margin-right: 0.8em; }
.top-menu-box {  border-bottom: 2px solid #333; padding-right: 180px; padding-bottom: 0.5em; flex-grow: 1;}

#top_menu a { 
	margin-left: 0.8em; 
	margin-right: 0.6em;
	white-space: nowrap; 
	line-height: 1.6em; 
	color: #0000cd;
    font-weight: bold;
    font-size: 90%;
    text-decoration: none;
}

.company_name { 
	display: inline-block; 
	font-weight: bold
	font-size: 90%; 
	line-height: 1em; 
	padding-left: 0.7em; 
	margin-bottom: 4px;
	white-space: nowrap; }

#top-tabs {
	padding-right: 180px !important;
	display: flex;
	align-items: flex-end;
	margin-top: 0.6em;
	font-size: 100%;
	border-spacing: 0;
}
#top-tabs > div {
	min-width: 8vw;
	white-space: nowrap;
	padding-left: 1.25vw;
	padding-right: 1.25vw;
	margin-right: 5px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	line-height: 2;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
}
#top-tabs a {
	color: #333;
	font-size: 110%;
	font-weight: 500;
	text-decoration: none;
}
#top-tabs .tab_active a {
	line-height: 2.2;
	font-weight: 500;
	font-size: 120%;
	color: #000;
}
#top-tabs a:hover { text-decoration: underline; }

#top-tabs > div img, #top-tabs > div svg { vertical-align: -10px; margin-bottom: 2px; display: none; }
.tab_link { text-align: center; font-weight: bold; }
.tab_disabled { opacity: 0.3; }

#sub-menu, .old_sub_menu { 
	font-weight: 500;
	color: #000000;
	padding: 4px;
	text-align: center;
}
#sub-menu a, .old_sub_menu a { display:inline-block; color: #444; text-decoration: underline; white-space: nowrap; margin: 0.2em 1.5em; }
.old_sub_menu { height: 2em; }
#sub-menu a:not([href]) { text-decoration: none; color: #000; }

#page_menu { padding: 0.5em 3px; }
#page_menu a { margin: .5em; white-space: nowrap; line-height: 1.6em;}

#calendar {
	height: 140px;
	width: 155px;
	position: absolute;
	right: 10px;
	top: 5px;
}
.calendar-gap { padding-right: 175px !important; }
.calendar-margin { margin-right: 175px !important; }
.calendar-zoom {
	position: fixed !important;
	width: 80vw !important;
	height: 80vw !important;
	top: 10vw !important;
	left: 50% !important;
	transform: translate(-50%, 0) !important;
	z-index: 100;
}
@media only screen and (orientation: landscape) {
	.calendar-zoom {
		width: 80vh !important;
		height: 80vh !important;
		top: 10vh !important;
	}
}
@media only screen and (min-width: 1001px) {
	.m-only, .mo { display: none !important; }
}
@media only screen and (max-width: 1000px) {
	body { padding: 5px !important; margin: 0 !important;}
	#calendar { right: 3px; top: 2px; }
	#top-tabs { padding-right: 160px !important }
	#top-tabs > div {
		flex-shrink: 1;
		flex-grow: 1;
		min-width: 3em;
		margin-right: 4px;
	}
	#top-tabs > div.tab_active { min-width: fit-content; }
	.tab_link img, .tab_disabled img, .tab_link svg, .tab_disabled svg { display: initial !important }
	.tab_link span, .tab_disabled span { display: none; }
	.tab_active span { display: initial }
	.tab_active svg  { display: none; }
	X.tab_disabled  { display: none; }
	.wide-only, .wo { display: none !important; } 
	.m-full-width { margin-left: 0 !important; margin-right: 0 !important; max-width: 100vw !important;}
	.m-zoom-text { font-size: 125% !important; }
}
@media screen and (pointer: coarse) and (hover: none) {
	.mouse-only { display: none !important; }
}
@media only screen and (max-width: 640px) {
	#sub-menu a { font-size: 110%; }
	.m-zoom-text { font-size: 150% !important; }
}
.input-icon {
	height: 1.5rem;
	vertical-align: -0.4rem;
	opacity: 0.7;
}


/* decoration */
.outline { border: 1px solid gray; }
.underline_box { border-bottom: 1pt solid gray; }
.upperline_box { border-top: 1pt solid gray; }

option.inactive { color: gray; font-style: italic; }

select.select-right-aligned, select.select-right-aligned option {
	text-align: right;
}

/* fonts */
strong, .strong { font-weight: 500; }
b, .b, .bold { font-weight: 700; }
.page_title { font-weight: 500; font-size: 150%; }
div.page_title { padding-top: 6px; padding-bottom: 6px; }
.page_subtitle { font-weight: 500; font-size: 120%; }
div.page_subtitle { padding: 3px; }
.page_clock { font-weight: 500; font-size: 120%; line-height: 2; }
.page_emph { font-weight: 500; font-size: 1rem; }
.page_err { font-weight: 500; font-size: 1rem; }
.info { font-weight: 500; font-size: 1rem; }
div.short-page-description { margin: 1em auto 2em; max-width: 35em; text-align: left;}
.required { color: red; }
.new-icon { margin-left: .3em; font-style:italic; text-decoration:none; color:#e00; line-height:4pt; text-shadow:#ee0 0 0 2px; }
.comment, .page_comment { font-style: italic; font-size: 0.9rem;}
.important { background-color: #ffa; }
.comment.important { padding: 0.5em; border-radius: 4px; }
p.important { padding: 3px; }
.copyright { font-weight: normal; font-size: 0.8rem; text-align: center; margin: 1rem; }
.table_header { font-size: 1rem ; font-weight:500; }
.bigtext
{
    font-size: 1.2rem;
	font-weight: normal;
}
.text
{
    font-size: 1rem;
	font-weight: normal;
}
.smalltext
{
    font-size: 0.8rem;
	font-weight: normal;
}

.form_header
{
    color: black;
    font-size: 1.2rem;
    font-weight: 500;
	padding-top: 1.5em;
}

.body-container { text-align: left; width: fit-content; margin: 0 auto; }

/* sticky menu */
.sticky-toc-container {
	display: flex;
	align-items: flex-start;
}
.sticky-toc-nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	max-width: 20em;
}
.sticky-toc-nav > a {
	display: block;
    margin-top: 1em;
    font-weight: 500;
    color: #666;
    text-decoration: none;
}
.sticky-toc-document {
	max-width: 45em;
	margin: auto 1em;
}
/* widgets */
.table-filter {
	position: relative;
	margin-right: 2em;
}
.table-filter > img {
	position: absolute; 
	right: 5px; top: 0.6em;
}
.table-filter-active > input {
	background-color: #ff6;
}
.table-filter-active > img { display: initial !important; }

.datalist-search > input[type=text] { min-width: 10em; }
.datalist-list > select { min-width: 10em; }

/* lists and reports */

.light-table {
	border: none;
	border-collapse: collapse;
}
.light-table td, .light-table th {
	padding: 0.4em 0.8em;
}
.light-table th {
	font-weight: 500;
	border-bottom: 1px solid gray;
}
.light-table td {
	border-bottom: 1px solid silver;
}

TABLE.table_list
{
	border-collapse: collapse;
}
TABLE.table_list TD, TABLE.table_list TH
{
	border: 1px solid #C0C0C0;
	padding: 2px 6px 2px 4px;
	background-color: #F0F8FF;
}
TABLE.table_list TH { font-weight: 500; text-align: center; background-color: #d0d8dd; }

TABLE.table_list tr:nth-child(odd) > td { background-color: white; }

TABLE.table_list TR.total_row TD { background-color: #d0d8dd; font-weight: 500; }

TABLE.item_list
{
	border-collapse: collapse; border: none; margin: 0.5em 0;
}
TABLE.item_list TD, TABLE.item_list TH
{
	border: 1px solid #C0C0C0;
	padding: 4px 6px 4px 4px;
	background-color: #F4F4F4;
}
TABLE.item_list TH, TABLE.item_list TR.table_header TD
{ font-weight: 500; text-align: left; background-color: #d0d8dd; }

TABLE.item_list tr:nth-child(even) > td { background-color: white; }

/* lists on the maintenance screens */
table.maint-item-list {
	border: none;
	min-width: 40em;
	border-spacing: 0;
	border-collapse: collapse;
}
.maint-item-list tr:nth-child(odd) { background-color: #e1f0f8; }
.maint-item-list td, .maint-item-list th { border: none; padding: 0.5em 0.6em; }
.maint-item-list th { border: none; background-color: #68b5da; }
.maint-item-list td { border-bottom: 1px solid #bbb; }
.maint-item-list caption { text-align: right; padding: 0.5em  }


table.file { border: none; }
table.file td { border: none; padding: 5px; vertical-align: baseline; }
table.file tr > td { text-align: right; padding-right: 5px; }
table.file tr > td + td { text-align: left; font-weight: 500; }
table.file td.caption { border-bottom: 1pt solid gray; font-size:11pt; font-weight:bold; text-align: right; }

/* Stupid IE!! */
.table_file_c { text-align: right; padding-right: 5px; }
.table_file_d { text-align: left; }


table.striped {
	border: 0;
	border-collapse: collapse;
}
table.striped > tbody > tr > th {
	padding: 1em 0.5em;
	text-align: center;
}
table.striped > tbody > tr > td { 
	border: none;
	padding: 0.3em;
	vertical-align: baseline;
	border-top: 1px solid #bdf; 
}
table.striped > tbody > tr:nth-child(even) {background: #def;}
table.striped > tbody > tr:nth-child(odd) > td { background: #eff;}


.counter, .toomuch { font-weight: normal; font-size: 0.8rem; }
.toomuch { color: red; }

.num-indicator {
	display: inline-block;
	position: relative;
	top: -5px;
	left: 2px;
	border: 2px solid silver;
	border-radius: 10px;
	background-color: white;
	min-width: 1em;
	line-height: 1em;
	font-weight: 500;
	text-align: center;
	color: black;
}

.maint-select { min-width: 500px; max-width: 2000px; margin: 1em 0; }
.edit select:not([size]) { max-width: 25em; }

/* inputs */

input.money 
{
	text-align: right;
}
input.cb-left { margin-left: 2em; margin-right: 0.3em; }

.err_input { background-color: #ffc; }

#ajax_loading {
	display: none;
	position: absolute;
	left: 45%;
	top: 45%;
	background-color: lightyellow;
	border: 1px solid blue;
	padding: 10px;
}

a.external_link { padding-right: 17px; background: url("external-link.gif") no-repeat 100% 60%; }
a.external_link:hover { background: url("external-link-anim.gif") no-repeat 100% 60%; }
a.menu_item { margin-left:20px; }

a.control_link, a.control_link:visited { color: blue; }
/*
input.control_button
{
	font-size: 10pt;
	font-weight: bold;
	margin: 10px;
}
option.option_header 
{
	color: red;
	background-color: #F0F0F0;
}
*/

.items_button {
	min-width: 6em;
	padding-left: 1em;
	padding-right: 1em;
	margin: 0.3em;
	margin-right: 0.3em;
}

.easy-reading {
	max-width: 40em;
}
/* message box */

.message-box {
	padding: 0.5em 1em;
	margin-top:4pt;
	border-width: 2px;
	border-style: solid;
	border-radius: 6px;
	text-align: center;
	max-width: 40em;
	margin: .5em auto;
}
.message-box > div {
	width: fit-content;
	margin: 0 auto;
	text-align: left;
}

.ok {
	border-color: green;
	background-color:#DDFFDD;
}
.warning {
	border-color:#F0B040;
	background-color:#FFFFB0;
}
.error {
	border-color: red; 
	background-color:#FFEEEE;
}
.message-box h4 {
	margin: 0.2em auto 0.5em auto;
	text-align: center; 
}
.message-box h3 {
	margin: 0.3em auto 0.7em auto;
	text-align: center; 
}

/* Help screens*/


div.help-screen {
	width: 30em;
	margin: 1em 1em 2em 1em;
	text-align: left;
}

.help-screen ol > li {
	margin-top: 0.5em;
}

/* messaging */
.user-message-box-container {
	position: fixed;
	left: 0;
	width: 100%;
	height: 0px;
	z-index: 1000;
}
.user-message-box {
	position: relative;
	width: 43em;
	border: 2px solid silver;
	border-radius: 5px;
	box-shadow: 0 0 5px 5px #eee; 
	margin: 0 auto 0.4em auto;
	background-color: LemonChiffon;
}
.user-message-box p {
	margin:0;
}
.user-message {
	padding: 0.4em 2em;
	font-size: 1.2rem;
}
.user-message-btn {
	text-align: right;
	padding: .5em 0.7em;
}
.user-message-btn button {
	border: none;
	border-radius: 3px;
	color: white;
	background-color: #68b6db;
	padding: 0.3em 1.0em;
}
.user-message-btn button:hover {
	cursor: pointer;
	background-color: #1077aa;
}

table.edit-grid {
	border: none;
	border-spacing: 8px;
	min-width: 40em;
}
.edit-grid > tbody > tr > td {
	border: none;
	vertical-align: baseline;
}
.edit-grid > tbody > tr > td:nth-child(1):not([colspan]) { Xmin-width: 15em; text-align: right; }
.edit-grid .comment,
.edit-grid .page_comment { font-size: 0.9em; }

.edit-grid .comment { max-width: 30em; margin-top: 1em; }
.edit-grid span.page_comment { display: inline-block; max-width: 30em; }
.edit-grid .form_header { border: none !important; text-align: left !important; }
.edit-grid .form_header:after {
	content: '';
	display: block;
	border-bottom: 1pt solid gray;
	margin-top: 0.2em;
	margin-bottom: 0.8em;
}
.edit-grid input[type=checkbox] { margin-right: 0.5em; vertical-align: -2px;}
.edit-grid select {max-width: 35em; }
.edit-grid textarea {vertical-align: middle; }

table.easytable { /* not for PDF */
	border-collapse: collapse; 
	border: none; 
}
table.easytable th {
	background-color: #264B71;
	color: white; 
	font-weight: 500;
	padding: 1em 0.7em;
	text-align: left;
}
table.easytable td { 
	padding: .7em .7em; border: none;
}
table.easytable:not(.table-filtered) tr:nth-child(odd) { background-color: #EBF3F0;}
/* table.easytable tr:nth-child(even) { background-color: white;} */
table.easytable.table-filtered td { border-bottom: 1px solid #ddd; background-color: white; }

@media screen and (min-width: 1001px) {
	table.easytable { /* not for PDF */
		min-width: 60em;
	}
}
@media screen and (max-width: 1000px) {
	table.report_table {
		min-width: initial !important;
		overflow: auto;
		display: block;
		white-space: nowrap;
	}
	table.report_table td {
		max-width: 25em;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media screen and (max-device-width: 640px) {
	table.report_table {
		font-size: 150%;	
	}
}
@media screen and (max-width: 640px) {
	.chart-holder {
		overflow: auto;
		display: block !important;
	}
}
@media screen {

	.noprint {}

	.report_table
	{
		min-width: 60em;
		background-color: #D4D4D4;
		border-color: #ededed;
	}
	.report_table td { 
		font-weight: normal;
		color: black;
		max-width: 30em; min-width: 4em;
		padding: 0.3em 0.4em;
	}
	.report_header_row td
	{
		background-color: #264B71; color: #FFFFFF; font-weight: 500; text-align: center;
	}
	.report_header_row td a
	{
		color: #FFFFFF;
	}
	.report_odd_row td
	{
		background-color: #EBF3F0;
	}
	.report_even_row td
	{
		background-color: white;
	}
	.report_total_row td
	{
		background-color: #4c7083 /*#707794*/; color: #F9F9F9; font-weight: 500;
	}
	.report_total2_row td
	{
		background-color: #264B71; color: #FFFFFF; font-weight: 600;
	}
	.report_emph td
	{
		background-color: white; color: black; font-weight: 500; font-style: italic;
	}
	.report_comment { font-style: italic; color: gray; }
	
	
	.report_table.easy { min-width: 60em; border-collapse: collapse; border: none !important; }
	.report_table.easy td { padding: .5em .7em; border: none /*!important;*/; border-bottom: 1px solid #e8e8e8; }

}
@media print {

	.noprint {display: none !important;}

	#page_menu {display: none !important;}

	a {text-decoration: none; color: black;}

	.report_table
	{
		min-width: 60em;
		background-color: black;
		border-color: #ededed;
	}
	.report_table td { 
		font: normal 9pt sans-serif; color: black;
		max-width: 30em; min-width: 4em;
	}
	.report_header_row td
	{
		background-color: silver; font-weight: 500; text-align: center;
	}
	.report_odd_row td
	{
		background-color: #F0F0F0;
	}
	.report_even_row td
	{
		background-color: white;
	}
	.report_total_row td
	{
		background-color: silver; font-weight: 500;
	}
	.report_total2_row td
	{
		background-color: silver; font-weight: bold;
	}
	.report_emph td
	{
		background-color: white; color: black; font-weight: 500; font-style: italic;
	}
	.report_comment { font-style: italic; color: gray; }
}

table.report_table.easy tr:nth-child(odd) { background-color: #EBF3F0;}
table.report_table.easy tr:nth-child(even) { background-color: white;}