/* TOP RIGHT BOTTOM LEFT */
/* TOP LEFT/RIGHT BOTTOM */
/* TOP/BOTTOM LEFT/RIGHT */

/* offset-x | offset-y | blur-radius | spread-radius | color */
/*box-shadow: 0px -2px 2px 0px var(--menu-border);*/
* {
	box-sizing: border-box;
	font-family: var(--mainfont), sans-serif;
}

*,
*::before,
*::after {
}

/* Dark/light mode variables */
html {
    --text-color: #000000;
	--anchor-color: #809fff;
	--body-bg: #D3D3D3;
	--menu-bg: #aaaaaa;
	--menu-hover-bg: #ddd;
	--submenu-bg: var(--menu-bg);
	--table-highlight-bg: #808080;
	--add-button-bg: #00FF00;
	--del-button-bg: #FF0000;
	--input-bg: #FFFFFF;
	--menu-border: #000000;
	--button-text: #000000;
	--button-bg: #aaaaaa;
	--mainfont: "Tahoma";
}

/* Generic waiting for something class */
.wait, .wait * {
	/* cursor: wait !important; /* Just hourglass */
	cursor: progress !important; /* Pointer with hourglass */
}

a {	
	text-decoration: inherit;
	color: var(--anchor-color);
	cursor: pointer;
}
a:visited {	
	color: var(--anchor-color);
}

h2 {
	margin: 1em 0;
	font-size: larger;
	font-weight: bold;
}

body {	
    background-color: var(--body-bg);
    color: var(--text-color);
    font-size: 100%;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	/*overflow: hidden;*/
}

/* This will be the main flex container column */
div.bodycontainer {
	height: 100%;
	
	display: flex;
	flex-direction: column;
	
	/* Necessary to allow inner divs to scroll. Don't ask why. */
	overflow: hidden;
}

/* The top container */
div.topnav {
	width: 100%;
	height: auto;
	
    border: none;
    background-color: var(--menu-bg);
	
	/* For the tab buttons */
	display: flex;
	flex-direction: row;
	
	padding-right: 1%;
	vertical-align: middle;
	
	border-bottom: 2px solid var(--menu-border);
	margin-bottom: 0.5em;
}

/* Bottom container, using up whatever space is left */
div.mainbody {
	flex: 1;
	
	display: flex;
	flex-direction: row;
		
	/* Push the alert container to the bottom */
	/*min-height: 100vh;*/
	/*height: 100%;*/
	overflow: hidden;
}

/* The whole left navigation pane */
div.leftnav {
    padding: 0px;
    margin: 0px;
}

/* The whole right display pane */
div.rightbody {
	/* Take up whatever's left after the left menu uses their space */
	flex: 1;
	
	text-align: center; /* Just for the inner div to follow */
	
	/* To the bottom with ya */
	z-index: 1;
	
	overflow-y: auto;
}

/* Content inside the right pane */
div.innerbody {
	/* Make it shrink to width of contents */
	display: inline-block;
	min-width: 50%;
	margin: 0.5em;
}

.popup-container {
    position: fixed;
	z-index: 999;
    display: none;
	padding: 0.25em;
}

.popup-menu {
    white-space: nowrap;
    overflow: hidden;
    border: 2px solid black;
    background-color: var(--menu-bg);
	padding: 0.5em;
}

.popupCenteredContainer {
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup-menu table {
	margin-bottom: 0.5em;
}

.popup-menu table tr {
    white-space: nowrap;
}

.popup-menu button {
	float: right;
	margin-left: 0.25em;
}

.popup-menu select {
	width: 100%;
}

.popup-menu input[type='text'] {
	width: 100%;
}

.popup-input {
	width: 35ch;
}
input[type='checkbox'].popup-input {
	width: auto;
}

fieldset.inside {
	display: block;
	width: 100%;
	margin: 0px auto 1em;
}

legend {
	display: flex;
	align-items: center;
}

.newItem {
	background-color: goldenrod;
}

dialog {
	background-color: var(--body-bg);
	color: var(--text-color);
	padding-top: 0.25em;
}
header {
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: inherit;
    border-bottom: 1px solid var(--menu-border);
	top: 0;
	font-size: larger;
	font-weight: bold;
}

dialog::backdrop {
	background: rgb(0, 0, 0, 0.7);
}

/* Justified, full width span for filling other elements like tr */
span.block {
	display: block;
	width: 100%;
}
span {
	font-family: inherit;
}

/* Make clickable things look nice and be...you know, clickable */
.clickable {	
	cursor: pointer;
	pointer-events: auto;
}

/******************************************************************************/
/* Table formats */
/******************************************************************************/
/* For debugging table sections */
table.debug {
	border: 1px solid red !important;
}
table.debug td, table.debug th {
	width: auto;
	border: 1px solid green !important;
}
table.debug tr {
	border: 2px solid blue !important;
}

/* General formatting for all tables */
table {
	border-collapse: collapse;
    border-spacing: 0;
    border-style: none;
	margin: 0 auto 1em;
	min-width: 50%;
	text-align: left;
}

tr {
	height: 2em;
}

th, td {
    padding: 0.1em 0.5em;
}

td {
	overflow: hidden;
}

td > a, td > a:visited {
	display: block;
    margin: -10em;
    padding: 10em;
	color: inherit;
	text-decoration: none;
}

/* For when we want headers left-aligned */
table.leftth th {
	text-align: left;
}

/* Table that is too sparse for our default width */
table.smalltable {
    white-space: nowrap;
	min-width: auto;
}

table.gridTable {
    border-collapse: collapse;
}
table.gridTable th, table.gridTable td {
	border: 1px solid black;
}

/* Searchable tables need a fixed width so they don't freak out */
table.searchable {
	min-width: 75vw;
}

/* Highlight row table */
table.highlight {
	border-collapse: collapse;
}

table.highlight thead tr {
	/* First row with headings is our category row */
	/*text-align: left;*/
	padding-top: 0.5em;
	border-bottom: 1px solid black;
}

/* Space over the first section row */
table.highlight tr.sectionrow:nth-of-type(2) :is(th, td) {
	padding-top: 1em;
}

table.highlight tr:not(:first-of-type):hover, /* Every row except the first is highlighted on hover */
table.highlight tr:not(.headingrow):hover,
table.highlightAll tr:hover {
	background-color: var(--table-highlight-bg);
}

table.highlight th:hover {
	background-color: var(--body-bg);
}

/* For tables where the whole row is a linkbutton */
table.highlight button.linkbutton {
	width: 100%;
	text-align: left;
	margin: 0px;
}


/* Display brewday and recipe information */
table.brewday-table {
    text-align: left;
    border: 1px solid black;
    white-space: nowrap;
}
table.brewday-table tr:last-of-type :is(th, td) {
	/* Add a space between the bottom row and border */
	padding-bottom: 1em;
}
table.brewday-table tr :is(th, td):last-of-type {
	/* Add a space between the right edge and border */
	padding-right: 1em;
}
table.brewday-table tr:first-of-type th {
	font-size: larger;
	text-align: center;
	padding-bottom: 1em;
	padding-top: 0.5em;
}

tr.headingrow {
	font-size: smaller;
	white-space: normal;
}
tr.headingrow a {
	color: inherit;
	text-decoration: inherit;
}
tr.headingrow img {
	vertical-align: top;
	height: 1.25em;
	width: 1.25em;
}
legend img {
	vertical-align: top;
	height: 2em;
	width: 2em;
	margin: 0 0.5em;
}

tr.sectionrow th, 
tr.sectionrow td {
	font-size: larger;
	text-align: center;
}

/* Table for formatting within another control */
table.nothingTable {
	border-collapse: collapse;
	border: none;
	margin: 0;
	padding: 0;
	table-layout: fixed;
}
table.nothingTable tr, table.nothingTable td , table.nothingTable th {
	word-wrap: break-word;
	border: none;
	margin: 0;
	padding: 0;
}

table.wrapheadingsonly th {
	white-space: wrap;
}
table.wrapheadingsonly td {
	white-space: nowrap;
}

table.sortbyheading {
	visibility: hidden;
}
table.sortbyheading th:not(.nosort) {
	cursor: pointer;
}

table.sortbyheading th.asc:after {
	content: " \2B9D";
}

table.sortbyheading th.desc:after {
	content: " \2B9F";
}

/* Just make sure our legend's CSS doesn't get overridden */
table.jqplot-table-legend {
	min-width: auto;
	width: auto;
}

/* Have a nice bottom border for adding a spacer */
table tr.spacer-row {
	height: 0;
}

table tr.spacer-row td,
table tr.spacer-row th {
	overflow: hidden;
	font-size: 1px;
	line-height: 1px;
	padding-bottom: 5em;
	padding-top: 5em;
}

/******************************************************************************/
/* Input formats */
/******************************************************************************/
/* Make sure all of our inputs have the same font size/style */
textarea,
input,
select,
button,
span.inputlike {
    font-size: medium;
    font-family: inherit;
}

select:disabled {
  background-color: dimgrey;
  color: rgb(240, 216, 195, 50%);
  opacity: 1;
}

input:disabled {
  background-color: dimgrey;
  color: rgb(240, 216, 195, 50%);
  opacity: 1;
}

input, optgroup, option, textarea,
span.inputlike {
	background-color: var(--input-bg);
	color: var(--text-color);
}

:is(select, button, input[type='color']):enabled:hover {	
    cursor: pointer;
}

input[type='color'] {
	border: none;
	margin: 0px;
	height: 1.5em;
}
input[type='color']:enabled {
	padding: 2px;
}
input[type='color']:disabled {
	padding: 0;
}

input, textarea,
span.inputlike /* Currency span should mimic input */ {
	border: none;
	border-radius: 3px;
	padding: 0.2em;
}

select.centerSelect {
	min-width: 10%;
}

textarea {
	box-sizing: content-box;
	height: 1em;
	width: 100%;
}
textarea:read-only:focus {
	outline: none;
}

/* Mimic normal text for readonly input boxes */
input[type='text']:read-only:not(:disabled),
textarea:read-only:not(:disabled),
span.astext {
	border: none;
	background-color: inherit;
	padding: 0px;
	margin: 0px;
	cursor: default;
	caret-color: transparent;
}
input[type='text']:read-only:not(:disabled):focus,
textarea:read-only:not(:disabled):focus {
	outline: none;
}
input.bigbold:read-only {
	font-size: larger;
	font-weight: bold;
}

/* Same for select */
select.displayonly {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    /* needed for Firefox: */
    overflow:hidden;
    width: 120%;
}

/* Validation hints */
input:invalid,
input[type='text']:read-only:not(:disabled).invalidLook {
    border-right: thick solid #FF000080;
}

input.float-wide {
	width: 8ch;
}
input.float-extrawide {
	width: 12ch;
}
input.email-wide {
	width: 25ch;
}
input.timer-wide {
	width: 9ch;
}

input.currency {
	width: 8ch;
	text-align: right;
}

/* Special cases for elements that don't natively style with readonly */
input[type='checkbox'][readonly],
select[readonly] {
	opacity: 0.6;
	pointer-events: none;
}

/******************************************************************************/
/* Handly shortcuts */
/******************************************************************************/
/* As much as I hate using !important, these are !important overrides */
.noborder {
	border: none !important;
}
.hasBorder {
	border: 1px solid var(--menu-border) !important;
}
.wide {
	width: 100% !important;
}
.hide {
	display: none !important;
}
.center {
	text-align: center !important;
}
.nowrap {
	white-space: nowrap !important;
}
.left {
	text-align: left !important;
}
.right {
	text-align: right !important;
}
/******************************************************************************/
/* Menu buttons */
/******************************************************************************/
/* Basic button and select styles */
button {
    position: relative;
    display: inline-block;
    padding: 0em 0.5em;
	margin: 0 0.1em;
    text-decoration: none;
    color: var(--button-text);
    background-color: var(--button-bg);
	
	border: 1px solid var(--button-bg);
	
    /*border-bottom: solid 1px var(--menu-border);*/
	/*border-right: solid 1px var(--menu-border);*/	
    border-radius: 3px;
    /*box-shadow: inset 0px -3px 3px -3px var(--menu-border);*/
	height: 1.75em;
    /*font-weight: bold;*/
	/*border-style: outset;*/
}

select {
	border: none;
	border-bottom: 2px solid var(--button-bg);
	border-right: 2px solid var(--button-bg);
	background: none;
/*	background-color: var(--input-bg);*/
    color: var(--text-color);
	padding: 0.2em;
}
button {
	font-weight: bold;
}

button:disabled {
	opacity: 50%;
    pointer-events: none;
}

button:active {
    /*border-bottom: solid 2px #fd9535;*/
    box-shadow: none;
	border-style: inset;
}

button.imgbtn {
	vertical-align: middle;
	height: 2em;
	width: 2em;
	margin: 0 0.25em;
	
	border: 0px solid transparent;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;	
	border-radius: 0.5em;
	
	text-decoration: none;
	color: inherit;
	
    transition: 0.3s;
	
	box-shadow: none;
}

button.imgbtn.larger {
	height: 3em;
	width: 3em;
}

button.imgbtn:hover {
    background-color: var(--button-bg);
	border: 1px solid transparent;
	cursor: pointer;
}

button.imgTextBtn {
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
	width: auto;
	padding-left: 2em;
}

button.spacer {
	background-color: transparent;
	pointer-events: none;
}
button.export {
	background-image: url('/images/export.png');
}
button.import {
	background-image: url('/images/upload.png');
}
button.edit {
	background-image: url('/images/edit.png');
}
button.new {
	background-image: url('/images/new.png');
}
button.add {
	background-image: url('/images/add.png');
}
button.delete {
	background-image: url('/images/delete.png');
}
button.cancel {
	background-image: url('/images/cancel.png');
}
button.download {
	background-image: url('/images/download.png');
}
button.undo {
	background-image: url('/images/undo.png');
}
button.help {
	background-image: url('/images/help.png');
}
button.config {
	background-image: url('/images/config.png');
}
button.ok {
	background-image: url('/images/ok.png');
}
button.zoomout {
	background-image: url('/images/zoomout.png');
}
button.zoomin {
	background-image: url('/images/zoomin.png');
}
button.info,
a.imgLink.info {
	background-image: url('/images/info.png');
}
button.options,
a.imgLink.options {
	background-image: url('/images/options.png');
}
button.logout,
a.logout {
	background-image: url('/images/logout.png');
}
button.close {
	background-image: url('/images/close.png');
}
button.email {
	background-image: url('/images/email.png');
}
button.save {
	background-image: url('/images/save.png');
}
button.copy {
	background-image: url('/images/copy.png');
}
button.add-properties {
	background-image: url('/images/add_properties.png');
}
button.brew {
	background-image: url('/images/brew.png');
}
button.ferment {
	background-image: url('/images/ferment.png');
}
button.calendar {
	background-image: url('/images/calendar.png');
}
button.resize {
	background-image: url('/images/resize.png');
}
button.tools {
	background-image: url('/images/tools.png');
}
button.document {
	background-image: url('/images/document.png');
}
button.run {
	background-image: url('/images/run.png');
}

div.openrows {
	height: 1em;
	width: 1em;
	background-image: url('/images/openrows.png');
	background-repeat:no-repeat;
	background-size:contain;
}
div.closerows {
	height: 1em;
	width: 1em;
	background-image: url('/images/closerows.png');
	background-repeat:no-repeat;
	background-size:contain;
}

.outlineicon {
	vertical-align: middle;
	height: 3em;
	width: 3em;
	
	border: 0px solid transparent;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;	
}
.outlineicon.info {
	background-image: url('/images/info_outline.png');
}
.outlineicon.warning {
	background-image: url('/images/warning_outline.png');
}
.outlineicon.error {
	background-image: url('/images/error_outline.png');
}

button.right {
	float: right;
}

button.linkbutton {
	box-shadow: none;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font: inherit;
	font-family: inherit;
	cursor: pointer;
}

button.spindown,
button.spinup {
	width: 1em;
	height: 100%;
	padding: 0;
}

/******************************************************************************/
/* Navigation tabs */
/******************************************************************************/
/* Tab sections inside the navigation pane */
div.lefttabs {
	z-index: 0;
    border: 1px solid var(--menu-border);
    background-color: var(--menu-bg);
	padding: 0.25em;
	margin-bottom: 0.5em;
}

/* Style the buttons that are used to open the tab content */
div.lefttabs a,
.popup-menu a {
    display: block;
	position: relative;
	
    text-align: center;
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    padding: 7px 0px;
	
    color: inherit;
    text-decoration: inherit;
}

/* The span must have relative so the popups appear in the right place */
div.lefttabs span {
	width: 100%;
	display: block;
	position: relative;
}

.popup-menu a {
    text-align: left;
    padding: 2px 20px 2px 1px;
}

/* Change background color of buttons on hover */
.lefttabs span:hover,
.popup-menu a:hover,
.selecteditem {
	background-color: var(--menu-hover-bg);
}

/* Keep these guys the same width */
div.leftnav,
div.cornerInfo {
	text-align: center;
    width: 7em;
	min-width: 7em;
}

div.leftnav p.heading {
	text-align: left;
	margin: 2px 2px 2px 2px;
}

div.cornerInfo {	
	margin-right: 1%;
	align-content: center;
}

div.cornerInfo a {
	color: inherit;
	text-decoration: inherit;
	font-size: larger;
}

div.pagetabs {	
	/* Consume all available space */
	flex: 1;
	
	display: inline-flex;
	align-items: flex-end;
	
	height: 3em;
}
div.userbuttons {
}
div.sysbuttons {
	margin-left: 0.5em;
	padding-left: 0.5em;
	padding-right: 5%;
	border-left: inset 2px gray;
}

div.userbuttons,
div.sysbuttons {
	display: inline-flex;
	align-items: center;
}

div.pagetabs a, div.pagetabs span {
	display: inline-flex;
	align-items: center;
	
	/* Scoot down so we overwrite the border for a smooth tab */
	position: relative;
	top: 2px;
	
    font-weight: normal;
	
	border: 1px solid var(--menu-border);
	background-color: var(--menu-bg);
	border-bottom-width: 2px;
	
    color: inherit;
    text-decoration: inherit;
    transition: 0.3s;
    cursor: pointer;
    text-align: center;
	
/*	width: 7em;*/
	padding: 0px 1ch;
	height: 2.5em;
	margin: 0px;	
	
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

div.pagetabs a:hover, div.pagetabs span:hover {
	background-color: var(--menu-hover-bg);
}

div.pagetabs .curtab {
    font-weight: bold;
	background-color: var(--body-bg);
	border-bottom-color: var(--body-bg);
	z-index: 2; /* Just have to be on top of the body border */
	/* offset-x | offset-y | blur-radius | spread-radius | color */
	/*box-shadow: 0px -2px 2px 0px var(--menu-border);*/
	height: 3em;
	border-width: 2px;
}

div.pagetabs > a[disabled] {
    pointer-events: none;
	opacity: 50%;
}

/******************************************************************************/
/* Warning/Error/Alert banner */
/******************************************************************************/
div.alertcontainer {	
	text-align: center;
	width: 100%;
		
	margin: 2px auto;	
	
	position: sticky;
	bottom: 0;
	
	padding-top: 2px;
	
	color: black;	
	border: none;
	
	z-index: 999;
	
	background-color: rgb(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
}

/* Direct div descendents are 80% wide */
div.alertcontainer > div {
	text-align: center;
	width: 80%;
	margin: 0 auto;
}

div.alertcontainer div.clearbuttoncontainer {
	text-align: right;
}

div.alertcontainer .alert {
	text-align: center;
	
	margin: 2px auto;
	padding: 2px 0;
	
	height: auto;
	
	display: block;
	
	border: none;
    font-weight: bold;
	
	background: white;
	color: black;
}

div.alertcontainer > div button {
}

/* Let clicks passthru to the parent div, except for actual hyperlinks */
div.alertcontainer .alert * {
	pointer-events: none;
}
div.alertcontainer .alert a {
	pointer-events: auto;
	font-weight: bolder;
	text-decoration: underline;
}

div.alertcontainer p {
	margin: 0 auto;
}

div.alertcontainer table {
	margin: 0 auto;
	width: auto;
	min-width: 0;
}

div.alertcontainer .alert.info,
.alert.info {
	background-color: cyan;
	color: black;
}
div.alertcontainer .alert.warning,
.alert.warning {
	background-color: goldenrod;
	color: black;
}
div.alertcontainer .alert.error,
.alert.error {
	background-color: firebrick;
	color: white;
}

/******************************************************************************/
/* Column displays */
/******************************************************************************/
div.columncontainer {
	display: flex;
	justify-content: space-between;
	gap: 1%;
}

div.columncontent {
	flex: 1;
}

/******************************************************************************/
/* Printing should be at the end to override all others */
/******************************************************************************/
@media print {
	div.leftnav, div.leftnav *,
	div.topnav, div.topnav * {
        display: none;
    }
	
	div.mainbody,
	div.bodycontainer,
	div.rightbody,
	div.innerbody {
		width: 100%;
		overflow: visible;
	}
}