body {
	margin: 0;
	background-color: #F8F8F8;
}

#menutitle {
	font-weight: bold;
	font-family: sans-serif;
	border: solid Navy;
	border-width: 2px 2px 0 2px;
	padding: 6px 0px 2px 15px;
	letter-spacing: 2px;
	background-color: #F8F8F8;
	font-size: larger;
	margin: 0px 0px 0px 0px;
}
#logininfo {
	font-weight: normal;
	font-family: serif;
	font-style: italic;
	letter-spacing: normal;
	font-size: smaller;
    margin-left: 3em;
}
#content {
	padding: 10px 20px;
    margin-top: 1.2em;
}
p.pagetitle {
	font-weight: bold;
	margin-top: 10px;
	font-size: larger;
}
/* text messages on pages */
p.message {
	font-weight: bold;
	margin-top: 10px;
	font-size: larger;
	color: Red;
}
/* data and form page fieldsets */
.legend {
	font-weight: bold;
}
fieldset.fieldset {
	padding: 8px 10px 6px 10px;
    margin: 0 0 10px 0;
}
fieldset.outer {
	padding: 8px 10px 5px 10px;
	border: 5px ridge;
}
/* mailbox and alias data on info pages */
td.data {
	color: Navy;
	padding-left: 10px;
}
p.data {
	color: Navy;
}
a.data {
	color: Navy;
	text-decoration: none;
}

/* list tables */
table.list {
	border: 0px solid gray;
    border-collapse: collapse;
    font-size: 90%;
}
table.list tr:nth-child(even) {
    background-color: #F9F9F9;
}
table.list tr:nth-child(odd) {
    background-color: white;
}
table.list tr:hover {
	background-color: #E1E1E1;
}
table.list th, table.list td {
	border: 1px solid gray;
	padding: 4px;
	margin: 0px;
}
table.list th {
	font-weight: bold;
    background-color: #D8D8D8;
    text-align: center;
	white-space: nowrap;
}
table.list thead th, table.list thead td {
    position: sticky;
    top: 0;
}

td.warn1 {
	color: #E17575;
}
td.warn2 {
	color: Red;
}
td.clickable:hover, span.clickable:hover {
    background-color: lightblue;
    cursor: pointer;
}
td.numeric {
    text-align: right;
    white-space: nowrap;
}

table.listwrap {
	border: 0px inset gray;
    border-collapse: collapse;
    font-size: 90%;
}
table.listwrap th, table.listwrap td {
	border: 1px solid gray;
	padding: 4px;
	margin: 0px;
}
table.listnowrap {
	border: 0px inset gray;
    border-collapse: collapse;
    font-size: 90%;
}
table.listnowrap th, table.listnowrap td {
	border: 1px solid gray;
	padding: 4px;
	margin: 0px;
	white-space : nowrap;
}
tr.title {
	background-color: #D8D8D8;
	line-height: 100%;
}
tr.header {
	background-color: #D8D8D8;
	line-height: 120%;
}
tr.header td {
	text-align: center;
	white-space: nowrap;
}
tr.even {
	background-color: white;
}
tr.odd {
	background-color: #F9F9F9;
}
tr.mouseover {
	background-color: #E1E1E1;
}
a.nodecoration {
	text-decoration: none;
}
a:visited.nodecoration {
    text-decoration: none;
}

/* buttons in list tables */
a.tablebutton {
	background-color: transparent;
	border: 1px outset Silver;
	text-decoration: none;
	color: Blue;
	padding-left: 4px;
	padding-right: 4px;
    white-space: nowrap;
}
a:visited.tablebutton {
	color: Blue;
}
a:hover.tablebutton {
	background-color: #FF6900;
}
/* submit-button-like links */
a.button {
	background-color: Silver;
	border: 2px outset Silver;
	padding: 1px 8px;
	text-decoration: none;
	margin: 3px;
    line-height: 160%;
	color: Black;
	cursor: default;
    white-space: nowrap;
}
a:hover.button {
	background-color: #FF6900;
}

a.minibutton {
	background-color: Silver;
	border: 1px outset Silver;
	text-decoration: none;
	color: Black;
	padding-left: 4px;
	padding-right: 4px;
	cursor: default;
}
a:hover.minibutton {
	background-color: #FF6900;
}

a.sortbutton {
	background-color: transparent;
	border: 1px outset Silver;
	text-decoration: none;
	color: Black;
	font-size: x-small;
	padding-left: 4px;
	padding-right: 4px;
    cursor: pointer;
}
a.sortbutton.active {
	background-color: #C899DF;
    cursor: default;
}
a:hover.sortbutton {
	background-color: #C899DF;
}

.pagenum, a.pagenum {
	background-color: transparent;
	border: 1px outset Silver;
	text-decoration: none;
	color: Black;
	font-size: small;
	padding-left: 4px;
	padding-right: 4px;
    cursor: pointer;
}
a.pagenum.inactive {
    cursor: not-allowed;
    color: gray;
}
a:hover.pagenum {
	background-color: #C899DF;
}
a:hover.pagenum.inactive {
    background-color: transparent;
}

a.activepagenum {
	background-color: #B9B4E2;
	border: 1px outset Silver;
	text-decoration: none;
	color: Black;
	font-size: x-small;
	padding-left: 4px;
	padding-right: 4px;
}
a:hover.activepagenum {
	background-color: #C899DF;
}

/* tab buttons */
a.inactivetabbutton {
    padding: 0.1em 0.5em 0 0.5em;
    margin-left: 3px;
    line-height: 125%;
    border: 1px solid Black;
    border-bottom: none;
	color: Black;
    background: #DDE;
    text-decoration: none;
	cursor: default;
}
a:hover.inactivetabbutton {
	background: #FF6900;
}
a:visited.inactivetabbutton {
    text-decoration: none;
}
a.activetabbutton {
    padding: 0.1em 0.5em 0 0.5em;
    margin-left: 3px;
    line-height: 125%;
    border: 1px solid Black;
    border-bottom: 1px solid white;
    text-decoration: none;
	color: Black;
    background: white;
	cursor: default;
}
a:visited.activetabbutton {
    text-decoration: none;
}
div.tabcontent {
  	border: 1px solid Black;
  	padding: 15px;
  	background: white;
}

/*********************************/
/**** Dropdown menu (3 level) ****/
/*********************************/

#nav, #nav ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 1;
	background: #444432;
	font-weight: bold;
	padding: 0;
 	border: 0;
	margin: 0 0 0 0;
    z-index: 2000;
	color: white;
}
#nav a {
	display: block;
    width: auto;
	color: white;
	text-decoration: none;
	padding: 0.3em 1em;
}
#nav li {
	float: left;
	padding: 0;
	width: auto;
}
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	font-weight: normal;
	width: 14em;
	border: 0;
	margin: 0;
	background: White;
}
#nav li ul li {
    border-top: 1px dotted Gray;
}
#nav li ul li a {
	color: black;
}
#nav li li {
	/*padding-right: 1em;*/
	width: 14em
}
/*#nav li ul a {
	width: 11em;
} */
#nav li ul ul {
	margin: -1.5em 0 0 14em;
}
#nav li:hover, #nav li.sfhover {
	background: #FF6900;
}
/*#nav li li:hover, #nav li li.sfhover {
	color: #FF6900;
}*/
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

body {
    font-family:sans-serif;
}

.checkbox-button {
    background-color: #EFEFEF;
    border-radius: 4px;
    border: 1px solid #D0D0D0;
    float: left;
}
.checkbox-button.green:hover {
    border: 1px solid green;
    color: green;
}
.checkbox-button.red:hover {
    border: 1px solid red;
    color: red;
}
.checkbox-button label span {
    text-align: center;
    padding: 3px 5px;
    display: block;
}
.checkbox-button label input {
    display: none;
}
.checkbox-button.green input:checked + span {
    background-color: green;
    color: #fff;
}
.checkbox-button.red input:checked + span {
    background-color: #911;
    color: #fff;
}
table.worksheet_event_data th {
    text-align: left;
    font-weight: bold;
    padding: 0 1em;
    min-width: 6em;
}

table.worksheet_item_list {
    border-collapse: collapse;
    font-size: 90%;
    max-width: 700px;
}
table.worksheet_item_list th,table.worksheet_item_list td {
    padding: 3px 8px;
    min-width: 6em;
    border: 1px solid #BFBFBF;
}
table.worksheet_item_list th {
    text-align: center;
    font-weight: bold;
}

table.statistics {
    border-collapse: collapse;
    font-size: 90%;
}
table.statistics th,table.statistics td {
    padding: 3px 8px;
    min-width: 6em;
    border: 1px solid #BFBFBF;
}
table.statistics thead th {
    text-align: center;
    font-weight: bold;
    background-color:rgb(220, 220, 220);
}
table.statistics tbody th {
    text-align: left;
    font-weight: bold;
    background-color:rgb(240, 240, 240);
}
table.statistics tbody td {
    text-align: center;
}
table.statistics tbody td:hover {
    background-color: lightblue;
}

table.formfields td {
    padding: 3px 10px;
}

div.wp_file_label {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid lightgray;
    padding: 0.2em 0.4em;
    text-align: center;
}
div.wp_file_label:hover {
    background-color: lightblue;
}
div.wp_photo_thumbnail_div {
    display: inline-block;
    white-space: nowrap;
    margin: 6px 6px;
    text-align: center;
}
img.wp_photo_thumbnail {
    cursor: pointer;
}
div.wp_remove_button {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    color: rgb(255, 148, 148);
    padding: 0 0.2em;
    border: 1px solid lightgray;
    border-radius: 0.2em;
}
div.wp_remove_button:hover {
    background-color: rgb(255, 148, 148);
    color: black;
}

/*
div.popup_photo_label {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid lightgray;
    padding: 0.2em 0.4em;
}
#wep_popup_photo {
    position: absolute;
    left: 10000px;
    top: 10000px;
    max-width: 400px;
    max-height: 300px;
    border: 1px solid gray;
    display: none;
    z-index: 10;
}
*/

label.photo_upload_button {
    background-color: lightblue;
    white-space: nowrap;
    padding: 0.2em 0.5em;
    border-radius: 0.2em;
    cursor: pointer;
    margin-top: 1em;
    border: 1px solid lightgray;
}
label.file_upload_button {
    background-color: rgba(153, 219, 153, 0.719);
    white-space: nowrap;
    padding: 0.2em 0.5em;
    border-radius: 0.2em;
    cursor: pointer;
    margin-top: 1em;
    border: 1px solid lightgray;
}

div.workstart_button {
	background-color: transparent;
    display: inline-block;
	border: 1px outset Silver;
    border-radius: 0.2em;
	color: Black;
	_font-size: 90%;
	padding: .2em .4em;
	margin: .2em 0;
    cursor: pointer;
}
div.workstart_button.selected {
    background-color: #96b0e0;
}

span.worktimestate_0 {
    color: blue;
}
span.worktimestate_1 {
    color: green;
}
span.worktimestate_2 {
    color: red;
}
span.worktimestate_3 {
    color: rgb(212, 123, 183);
}

tr.tr_delivery td label, tr.tr_close td label {
    padding-left: 10px;
}

div.wslabel {
    border: 1px dotted black;
    margin: 0 4px 3px 0;
    padding: 2px;
    display: inline-block;
}

#uimessages {
    border: 1px solid gray;
    padding: 0 10px;
    line-height: 28px;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-color: rgb(203, 255, 233);
}

#uimessages_title {
    color: red;
    cursor: pointer;
}

#uimessages_text {
    color: black;
}

/* Hide input number arrows/spinners */
input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div#popup_message, div#autohide_message {
    position: fixed;
    left: 15em;
    height: 2em;
    line-height: 2em;
    padding: 0 1em;
    z-index: 1;
    vertical-align: middle;
    border: 0.1em solid rgb(80, 80, 80);
    border-radius: 0 0 0.5em 0.5em;
    background-color: rgb(240, 240, 240);
    color: red;
    font-size: 120%;
}
div#popup_message {
    top: 0;
    display: none;
}
div#autohide_message {
    top: -2.2em;
    -webkit-animation: animMessageAutohide 5s forwards;
    animation: animMessageAutohide 5s forwards;
}
@keyframes animMessageAutohide {
    0%   { top: -2.2em; }
    10%  { top: 0; }
    90%  { top: 0; }
    100% { top: -2.2em; }
}
/* @keyframes animMessageAutohide {
    0%   { top: -44px; }
    10%  { top: 0px; }
    90%  { top: 0px; }
    100% { top: -44px; }
} */
@-webkit-keyframes animMessageAutohide {
    0%   { top: -44px; }
    10%  { top: 0px; }
    90%  { top: 0px; }
    100% { top: -44px; }
}

#smokeping_graph {
    position: absolute;
    width: 697px;
    height: 297px;
    left: 10000px;
    top: 10000px;
    border: 1px solid black;
    background-color: white;
    background-image: url("images/loading.webp");
    display: none;
    z-index: 10;
}

#smokeping_graph div {
    position: relative;
    font-size: 120%;
    font-weight: bold;
    color:rgb(255, 148, 148);
    text-align: center;
    width: 100%;
    top: 140px;
    z-index: 11;
}

#smokeping_graph img {
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 12;
}

.scheduler_tooltip th {
    font-weight: bold;
    vertical-align: top;
}

@media only screen and (max-width: 1024px) {
    table.mobilefriend,
    table.mobilefriend thead,
    table.mobilefriend tbody,
    table.mobilefriend th,
    table.mobilefriend td,
    table.mobilefriend tr {
        display: block !important;
        box-sizing: border-box;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    table.mobilefriend thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.mobilefriend tr {
        border-top: 2px solid black;
        border-bottom: 2px solid black;
        border-left: none;
        border-right: none;
    }

    table.mobilefriend td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        /* padding-left: 40% !important; */
        min-height: 30px;
        vertical-align: middle;
    }

    table.mobilefriend div.mobheader {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        min-width: 30%;
        font-weight: bold;
        padding-right: 10px;
        white-space: nowrap;
    }

    table.mobilefriend div.mobdata {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        _max-width: 80%;
    }

    table.mobilefriend .tablebutton {
        display: block;
        width: inherit;
        height: inherit;
        padding: 6px 4px 6px 4px;
        text-align: center;
        border: 1px solid black !important;
    }

    table.mobilefriend a:hover.tablebutton {
        background-color: inherit;
    }
}

@media only screen and (min-width: 1025px) {
    table.mobilefriend div.mobheader {
        display: none;
    }
    table.mobilefriend div.mobdata {
        white-space: pre-wrap;
    }
}