html, body {
	height: 100%;
}

body {
	display: flex;
	flex-flow: column;
	line-height: 1.6;
	font-size: 16px;
	font-family: sans-serif;
	color: #222;
	margin: 0;
	background-color: #fafaff;
}


header {
	background-color: #059;
	padding: 10px 0px 10px 0px;
	font-size: 18px;
	width: 100%;
	font-family: tahoma, sans-serif;
}

.page-mid {
	flex: 1 0 auto;
}

main {
	margin: auto;
	margin-top: 20px;
	max-width: 768px;
}

footer {
	flex-shrink: 0;
}




h1,
h2,
h3,
h4,
h5,
h6 {
	color: #059;
	line-height: 1.2;
	margin: 0 10px;
	font-family: tahoma, sans-serif;
}


nav {
	display: inline-block;
}

.flex-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.inner-element {
	display: inline-block;
	width: 750px;
}

.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.helper>img {
	vertical-align: middle;
}

span.assigneetext {
	color: black;
}


.topics-list {
	padding-left: 0;
	width: 100%;
}

.topics-list .topic-info {
	padding: 10px;
	margin: 5px;
	border-bottom: 1px solid black;
}

nav {
	color: #eef;
}

nav>a {
	color: #eef;
	padding: 5px;
	padding-right: 10px;
	padding-left: 10px;
}

nav>a:hover {
	background-color: #036;
	color: #fff;
}

textarea.submit-text {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 10em;
	border-style: none;
	background-color: #f0f0ff;
}

input.title-input {
	width: 100%;
	border-style: none;
	background-color: #fafaff;
	font-size: 1.5em;
}

.searchbox
{
	margin-left:auto;
	margin-right:auto;
	width: 80%;
	overflow:auto;
	height: auto;
	display: block;
}

.search {
	resize: vertical;
	float: left;
	height: auto;
	width: calc(100% - 36px);
	border-color: #059;
	border-style: solid;
	border-width: 0 0 2px 0;
	background: none;
	font-size: 1.5em;
}

.buttonlink {
	background: none;
	border: none;
	cursor: pointer;
	font:inherit;
	padding: 0;
}

form.linkform {
	display:inline;
}


.underpanel {
	font-size: 16px;
	color: black;
	padding-left: 15px;
}

.underpanel>a, .underpanel .buttonlink {
	color: #059;
	padding: 5px;
}

.underpanel>a:hover, .underpanel .buttonlink:hover {
	background-color: #036;
	color: #fff;
}

.blue {
	color:#059;
}

hr {
	border-color: #05b;
	border-width: 0px 0px 2px;
	margin: 0px;
}

a {
	text-decoration: none;
}

footer {
	padding-top: 25px;
	text-align: center;
	color: #059;
}

label {
	color: #05b;
}

.blueunderline {
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom-width: 2px;
	border-color: #05b;
	background-color: #fafaff;
}

.h2 {
	font-size: 1.5em;
}

.register-grid {
	display: grid;
	grid-template-columns: [val] 100px [fields] 300px [info] 300px [end-col];
	grid-template-rows: [inviteid] auto [name] auto [login] auto [pass] auto [btn] auto [end-row];
	column-gap: 15px;
	row-gap: 25px;
	text-align: center;
	margin-top: 100px;
}

.changepassword-grid {
	display: grid;
	grid-template-columns: [val] 100px [fields] 300px [end-col];
	grid-template-rows: [currentpassword] auto [newpassword] auto [btn] auto [end-row];
	column-gap: 15px;
	row-gap: 25px;
	text-align: center;
	margin-top: 100px;
}

.valcol {
	grid-column: val;
	justify-self: end;
}

.fieldcol {
	grid-column: fields;
	justify-self: stretch;
	align-self: start;
}

.infocol {
	grid-column: info;
	justify-self: start;
	align-self: start;
	text-align: left;
}

.inviteidrow {
	grid-row: inviteid;
}

.namerow {
	grid-row: name;
}

.loginrow {
	grid-row: login;
}

.passrow {
	grid-row: pass;
}

.btnrow {
	grid-row: btn;
}

.currentpassrow {
	grid-row: currentpassword;
}

.newpassrow {
	grid-row: newpassword;
}

.icon {
	width: 1.5em;
	margin-right: 5px;
}

.beforeedit {
	background-color:#ff000080;
}

.afteredit {
	background-color:#00ff0080;
}

.filler {
	background-color: #80808080;
}

.btn {
	background: #059;
	padding: 0.5em;
	padding-inline: 1em;
	color: #eef;
}

.btn:hover {
	background: #036;
	color: #fff;
}

.clocks{
	margin:1em;
}

.clock {
	background: #ddddee;
	text-align: center;
	font-size: xx-large;
}

.token-descr {
	font-family: monospace;
	font-size: small;
	white-space: pre;
	border: dashed 1px gray;
	padding-inline: 4px;
	background-color: lightgray;
}

.token-field {
	font-family: monospace;
	font-size: small;
	white-space: pre;
	border: dashed 1px gray;
	padding-inline: 4px;
}

.token-field:not(:hover) {
	background-color: lightgray;
	color:lightgray;
}


table.hearts-table {

}

tr:nth-of-type(1) {
	background-color: #ddddee;
}

tr:nth-of-type(even) {
	background-color: #e9e9f6;
}

td {
	padding: 5px;
}

td.numeric {
	text-align: end;
}

.postborder {
	padding: 5px;
	border-radius: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: lightgray;
}

.showable.hide {
	display: none;
}

.underline {
	text-decoration-line: underline;
}

.fleft {
	float: left;
}
.fright {
	float: right;
}

.smallmargin {
	margin-top: 1px;
	margin-bottom: 1px;
}

.strike {
	text-decoration: line-through;
}

a.show-button {
	display: inline;
}