:root {
	--page-background-color: #eee;
	--header-background-color: #fff;
	--tile-background-color: #fff; 
	--button-background-color: #ffffff;
	--button-select-text-color: #333;
	--button-select-background-color: #ccc;
	--label-text-background-color: #ccc;
	--line-background-color: #888;
/*
	--page-background-color: #ffffff;
	--header-background-color: #e0e0ff;
	--tile-background-color: #e0e0ff; 
	--button-background-color: #ffffff;
*/
	--label-text-color: #666;
	--label-comment-color: #888;
	--footer-text-color: #aaa;

	--border-color: #ddd;
	--border-radius: 10px;
} 

* { margin: 0; padding: 0; }

body, html { font-family: arial, sans-serif; background-color: var(--page-background-color); font-size: 14px; }

ul.dashboard { padding-left: 0px; margin: 0px auto; overflow: auto; }
ul.dashboard li.tile { min-height: 8em; cursor: pointer; border: 1px solid #888; border-radius: 5px; box-shadow: 3px 3px 5px #aaa; margin: 2%; margin-top: 6px; float: left; list-style-type: none; background-color: #fff; position: relative; }
ul.dashboard li.tile div.icon { position: absolute; left: 1rem; top: 3rem; height: 5rem; width: 5rem; text-align: center; }
ul.dashboard li.tile div.icon img { opacity: 0.3; height: 5rem; }
ul.dashboard li.tile .header { vertical-align: middle; font-size: 1.5rem; color: #eee; padding: 5px 10px; text-align: left; background-color: #888; border-radius: 4px 4px 0px 0px; }
ul.dashboard li.tile .body { font-size: 0.95rem; color: #888; padding: 10px; padding-left: 7rem; }
ul.dashboard li.tilewMiddle { width: 45%; }
ul.dashboard li.tileHeight { height: 10rem; }

div.tile { 
	max-width: 100%; 
	border: 1px solid #ddd; 
	border-radius: 10px; 
	margin: 10px auto; 
	background-color: var(--tile-background-color);; 
	padding: 10px;
}

.tileHeader {
  vertical-align: middle;
  font-size: 1.5rem;
  color: #eee;
  padding: 5px 10px;
  text-align: left;
  background-color: #888;
  border-radius: 4px 4px 0px 0px;	
}

.pageHeader { background-color: var(--header-background-color); position: fixed; top: 0px; left: 0; height: 5rem; width: 100vw; }
.pageHeader > .content { display: flex; align-items: flex-end; max-width: 60rem; width: 90vw; margin: 5px auto; justify-content: space-around; vertical-align: middle; }
.pageHeader .logo { background: url(../img/logo.png) no-repeat; width: 10rem; height: 4rem; margin-right: 25px; margin-top: 5px; }
.pageHeader .logoText { font-size: 2rem; color: #666; }

.bodyContent { 
	margin: 10rem auto 3rem auto; 
	max-width: 60rem; 
	width: 90vw;
}

.areaContainer { 
	display: flex; 
	flex-direction: row;
	align-items: flex-start;
}

.areaSelect {
	margin-right: 50px;
	padding: 20px;
	background-color: var(--tile-background-color); 
	border-radius: var(--border-radius);
}

.areaBody {
	padding: 20px;
	flex-grow: 1;	
	background-color: var(--tile-background-color); 
	border-radius: var(--border-radius);
}

.labelText {
	color: var(--label-text-color);
	white-space: nowrap;
}	

.labelFont {
	font-size: 1.8rem;
}	

.labelTextMarginTop {
	margin-top: 15px; 
}

.labelBackgroundColor {
	background-color: var(--label-text-background-color);
}

.labelComment {
	font-size: 1rem;
	font-style: italic;
	color: var(--label-comment-color);
	margin: 5px 10px;
}

.lineBottom2 {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--line-background-color);
}

.text {
	text-indent: 2rem;
	line-height: 1.3rem;
}

.vButtons {
	display: flex; 
	flex-direction: column; 
}

.vButtons div { 
	margin: 5px;
	padding: 15px 20px; 
	background-color: var(--button-background-color); 
	border: 2px solid var(--border-color); 
	border-radius: var(--border-radius);
}

.hButtons { 
	display: flex; 
	flex-direction: row;
	flex-wrap: wrap; 
}

.hButtons div { 
	margin: 5px;
	padding: 20px; 
	background-color: var(--button-background-color); 
	border: 2px solid var(--border-color); 
	border-radius: var(--border-radius);
}

div.flexRow { 
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
}

div.button {
	cursor: pointer;
}

div.buttonSelect {
	font-weight: bold;
	color: var(--button-select-text-color);
	background-color: var(--button-select-background-color);
}

ul.e-mails {
	font-size: 1.3rem;
}

.inputMarginTop {
	margin-top: 0.25rem;
}

input.textField {
	padding: 0.2rem;
	line-height: inherit;
  	margin: 0;
  	box-sizing: border-box;
	outline: none;
	text-align: center;
	width: 100%;	
	border-radius: var(--border-radius);
}

input.textFont {
	font-family: inherit;
	font-size: 1.8rem;
}

input.textField::placeholder {
  opacity: 0.25;
}

button.selectContract {
	padding: 5px;
}

.footer {
	position: absolute;
	right: 10px;
	bottom: 0;
	color: var(--footer-text-color);
}

.footer a {
	color: var(--footer-text-color);
}