body {
	position: relative;
	margin: 0px;
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;
	overflow: hidden;
}

.dimmed {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(217, 217, 243, 0.75);
}
.drawing-container {
	position: fixed;
	top:   0px;
	left:  0px;
	width: 100%;
	height:100%;
}

.pageLocked {
	background-color: #eef;
	background-image: url(../images/lock.svg);
	background-repeat: no-repeat;
	background-position: 50% 95%;
	background-size: 5px;
}

.pageUnlocked {
	background-color: #eef;
}

.whiteboardBtn {
	background: transparent;
	background-color: #efefff;
}
.whiteboardTool {
	background: transparent;
	background-color: #efefff;
}
#whiteboardContainer {
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;
}

.btn-group div {
	height: 32px;
	background-color: #eef;
}
.btn-group button {
	background-color: #eef;
	border: 0px solid;
	color: black;
	cursor: pointer;
	float: left;
	font-size: 18pt;
	height: 32px;
}



button::-moz-focus-inner {
	border: 0;
}

.btn-group button:not(:last-child) {
	border-right: none;
	/* Prevent double borders */
}

/* Clear floats (clearfix hack) */

.btn-group:after {
	content: "";
	clear: both;
	display: table;
}

/* Add a background color on hover */

.btn-group button:hover {
	background-color: #ccd;
}

.FloatingButton {
	stroke: #ccd;
	stroke-width: 2px;
	fill: #efefff;
}
.FloatingButtonFG {
	stroke: #ccd;
	stroke-width: 4px;
	fill: #efefff;
}

.FloatingButtonSelected {
	stroke: #9999dd;
	stroke-width: 2px;
	fill: #9a9aff;
}

.FloatingButtonFG {
	stroke: #9999dd;
	stroke-width: 4px;
	fill: #efefff;
}

button {
	outline-width: 0;
	/*border: 4px solid red;*/
	display:block;
	color:white;
	padding: 1px 1px;
}

button.welcome {
	border: 0px;
	color: white;
	background-color:#99d;
	padding: 8px 16px;
	font-size: 14pt;
	border-radius: 8px;
	float:right;
	margin: 4px;
	position: absolute;
	bottom:4px;
	right:4px;
}

input.dialogCheckbox {
	border: 1px solid #99d;
	border-radius:6px;
	font-size:14pt;
	align:right;
}

input.menu {
	border: 1px solid #99d;
	border-radius:6px;
	margin-top:0.1cm;
	margin-bottom:0.1cm;
	margin-left:0.5cm;
	margin-right:0.1cm;
	padding:4px;
	font-size:14pt;
	align:right;
}
p.menu {
	/*color:#99d;*/
	color:#404073;
	font-family:sans-serif;
	font-weight:bold;
	margin-left:0.5cm;
}
span.menu {
	/*color:#99d;*/
	color:#404073;
	font-family:sans-serif;
	font-weight:bold;
	margin-left:0.5cm;
}
span.menu-error {
	color:#404073;
	font-family:sans-serif;
	font-weight:bold;
	margin-left:0.5cm;
}
p.menu-error {
	color:#404073;
	font-family:sans-serif;
	font-weight:bold;
	margin-left:0.5cm;
}
label.menu {
	/*color:#99d;*/
	color:#404073;
	font-family:sans-serif;
	font-weight:bold;
}
a.menu {
	color: white;
	display:block;
	font-weight:normal;
	text-decoration:none;
}

button.menu {
	border: 0px;
	color: white;
	background-color:#99d;
	padding: 8px 16px;
	font-size: 14pt;
	border-radius: 8px;
	position:absolute;
	float:left;
	margin: 4px;
}
button.menu-disabled {
	border: 0px;
	color: white;
	background-color:#a4a4a4;
	padding: 8px 16px;
	font-size: 14pt;
	border-radius: 8px;
	position:absolute;
	float:left;
	margin: 4px;
}

button.mymenu {
	border: 0px;
	color: white;
	background-color:#99d;
	padding: 8px 16px;
	font-size: 14pt;
	border-radius: 8px;
	/*position:absolute;*/
	margin-top: 0.25ex;
	/*float:left;*/
	margin: 4px;
	width: 46%;
	min-width: 190px;
	margin-left: 27%;
}
.mymenu button:hover {
	background-color:#ccd;
}
input.mymenu {
	border: 1px solid #99d;
	border-radius:6px;
	margin-top:24px;
	margin-bottom:16px;
	margin-left:60px;
	padding:4px;
	font-size:14pt;
}

button.welcomeColor {
	color: white;
	background-color:#99d;
	padding: 12px 12px;
	font-size: 14pt;
	border-radius: 8px;
	border: 1px solid black;
	float:left;
	margin: 4px;
	position: relative;
}

.welcome button:hover {
	background-color:#ccd;
}

.btn-group {
	float: left;
	position: relative;
}

.color-group button {
	border: 0px;
	display:block;
	color: black;
	padding: 2px 4px;
	cursor: pointer;
	float: left;
	font-size: 1.2em;
	height: 32px;
	width:32px;
}

.color-group button:not(:last-child) {
	border-right: none;
	/* Prevent double borders */
}

/* Clear floats (clearfix hack) */

.color-group:after {
	content: "";
	clear: both;
	display: table;
}

/* Add a background color on hover */

.color-group button:hover {
	background-color: #ccf;
}

.color-group {
	/*background-color: #eef;*/
	background-color: #eef;
	border-right: 1px solid #99d;
	border-bottom: 1px solid #99d;
	margin-left: 0px;
	float: left;
	position: absolute;
	top:50%;
	margin-top:0px;
}

.whiteboardTool.active {
	background: #e9e9ff;
	border-top-width:1px;
	border-bottom-width:1px;
	border-style: solid;
	border-color: #99d
}

#whiteboardThicknessSlider {
	-webkit-appearance: none;
	width: 100%;
	height: 10px;
	border-radius: 3px;
	background: transparent;
	outline: none;
	opacity: 1;
	-webkit-transition: opacity .15s ease-in-out;
	transition: opacity .15s ease-in-out;
}

.textBox.active {
	border: 1px dashed gray;
}

.textBox>.removeIcon, .textBox>.moveIcon {
	display: none;
}

.textBox.active>.removeIcon, .textBox.active>.moveIcon {
	display: block;
}

.modalBtn {
	padding: 5px;
	border-radius: 5px;
	border: 0px;
	min-width: 50px;
	cursor: pointer;
	color:#404073;
	background-color: #d9d9ff;
}

.userInfoDialog {
	border: 2px solid;
	border-color: #99d;
	border-radius: 18px;
	position: fixed;
	width: 480px;
	height: 320px;
  max-height: 90%;
  max-width: 90%;
	background: #fff;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
.debugDialog {
	border: 2px solid;
	border-color: #99d;
	border-radius: 18px;
	position: fixed;
	width: 80%;
	height: 70%;
	background: #fff;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.debugLog {
	border: 2px solid;
	border-color: #99d;
	border-radius: 18px;
	width:96%;
	height: 60%;
	margin:auto;
	overflow: auto;
	font-family:monospace;
}

h2.dialogTitle {
	font-size: 24pt;
	color: #99d;
	margin:auto;
	padding:8px;
	text-align:center;
	font-family:sans-serif;
}
h3.dialogSection {
	font-size: 14pt;
	color: #99d;
	margin:auto;
  margin-bottom:16px;
	padding:4px;
	text-align:left;
	font-family:sans-serif;
	border-top: solid 0.06cm;
	margin-right: 0.2cm;
	margin-left: 0.2cm;
	margin-top: 0.4cm;
}
p.dialogTitle {
	font-size: 12pt;
	font-weight: bold;
	color: #99d;
	margin:auto;
	margin-bottom:16px;
	margin-top:4px;
	margin-left:0cm;
	text-align:center;
}
span.dialogTitle {
	font-size: 12pt;
	font-weight: bold;
	color: #99d;
	margin:auto;
	margin-bottom:16px;
	margin-top:4px;
	margin-left:1cm;
  font-family:sans-serif;
	/*text-align:center;*/
}
span.settings {
	font-size: 12pt;
	font-weight: normal;
	color: #99d;
	margin:auto;
  font-family:sans-serif;
	/*text-align:center;*/
}
td.settingsName {
	text-align : right;
	padding-top : 0.2cm;
	padding-bottom : 0.2cm;
	padding-right : 0.4cm;
}
col.settingsName {
	width : 170px;
}
p.dialogWarning {
	position:absolute;
	bottom:5%;
	left:10%;
	font-size: 12pt;
	font-weight: bold;
	color: #99d;
	margin:auto;
	margin-bottom:10px;
	margin-top:2px;
	text-align:center;
}
span.dialogWarning {
	bottom:5%;
	left:10%;
	font-size: 12pt;
	font-weight: bold;
	color: #99d;
	margin:auto;
	margin-bottom:10px;
	margin-top:2px;
	text-align:center;
}

div.cursorPreview {
	border:1px solid gray;
	width:6px;
	height:6px;
	border-radius:50%;
	margin:auto;
}

div.cursorTagPreview {
	font-size:10pt;
	align:right;
	padding-left:2px;
	padding-right:2px;
	background:#000;
	color:white;
	border-radius:3px;
	/*position:absolute;*/
}

div.userbadge {
	font-size:10pt;
	align:right;
	padding-left:2px;
	padding-right:2px;
	border-radius:3px;
	position:absolute;
	left:0px;
	top:0px;
	width:max-content;
}
div.userbadgePreview {
	font-size:10pt;
	align:right;
	padding-left:2px;
	padding-right:2px;
	border-radius:3px;
	width:max-content;
}

input.welcome {
	border: 1px solid #99d;
	border-radius:6px;
	margin-top:10px;
	margin-bottom:10px;
	padding:4px;
	font-size:14pt;
	width:80%;
	margin-left: 10%;
}
input.password {
	border: 1px solid #99d;
	border-radius:6px;
	margin-top:10px;
	margin-bottom:10px;
	padding:4px;
	font-size:14pt;
}

div.settingsColorList {
	/*margin:auto;*/
	width:150px;
  height:72px; /* I have no idea why this is necessary */
}
button.whiteboard-list
{
	border: 0px;
	color: white;
	background-color:#99d;
	padding: 4px 4px;
	font-size: 12pt;
	border-radius: 8px;
	position:relative;
	/*float:left;*/
	margin-top: 0.0cm;
	margin-bottom: 0.0cm;
	margin-right: 0.0cm;
	margin-left:0.0cm;

}
div.whiteboard-list
{
	border: 2px solid;
	border-color: #99d;
	border-radius: 18px;
	background: #fff;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

table.whiteboard-list
{
	width:95%;
	margin-left: 0.5cm;
	margin-right: 0.5cm;
	background-color:#e6e6ff;
	border-collapse: collapse;
	text-align:left;
}
a.whiteboard-list
{
	display:block;
	font-weight:bold;
	text-decoration:none;
	color:#404073;
}
th.whiteboard-list
{
	background-color:#99d;
	color:white;
	font-weight:bold;
	padding-top:0.2cm;
	padding-bottom:0.2cm;
	padding-left:0.5cm;
	padding-right:0.2cm;
}
tr.whiteboard-list-even
{
	background-color:#e6e6ff;
	margin:0.1cm;
	text-align:left;
}
tr.whiteboard-list-odd
{
	background-color:#d9d9ff;
	margin:0.1cm;
	text-align:left;
}
td.whiteboard-list-even
{
	background-color:#e6e6ff;
	text-align:left;
	padding-top:0.2cm;
	padding-bottom:0.2cm;
	padding-left:0.5cm;
	padding-right:0.1cm;
}
td.whiteboard-list-odd
{
	background-color:#d9d9ff;
	text-align:left;
	padding-top:0.2cm;
	padding-bottom:0.2cm;
	padding-left:0.5cm;
	padding-right:0.1cm;
}
button.inline {
	border: 0px;
	color: white;
	background-color:#99d;
	padding: 8px 16px;
	font-size: 14pt;
	border-radius: 8px;
	position:relative;
	float:left;
	margin-top: 16px;
	margin-bottom: 16px;
	margin-right: 6px;
	margin-left:0.5cm;
}

div.topbar
{
	background-color: #eef;
	border-right: 1px solid #99d;
	border-bottom: 1px solid #99d;
	position: fixed;
	top: 0px;
	left: 0px;
}

button.toolbar-button
{
	background: transparent;
	background-color: #efefff;
	border: 0px;
	display:block;
	margin-left:0.0cm;
	margin-right:0.0cm;
	padding: 4px 2px;
	/*padding-left:4px;
	padding-right:4px;*/
	cursor: pointer;
	/*float: left;*/
	font-size: 10pt;
	height: 32px;
	width: 32px;
	font-weight:bold;
	text-decoration:none;
	color:#404073;
}

button.toolbar-button:hover
{
	background-color:#ccf;
}

button.toolbar-menu
{
	background: transparent;
	background-color: #efefff;
	border: 0px;
	display:block;
	margin-left:0.0cm;
	margin-right:0.0cm;
	/*padding: 4px 2px;*/
	padding-top:2px;
	padding-bottom:2px;
	padding-left:8px;
	padding-right:8px;
	cursor: pointer;
	/*float: left;*/
	font-size: 11pt;
	height: 32px;
	font-weight:bold;
	text-decoration:none;
	/*color:#404073;*/
	color:#9999ff;
}

button.toolbar-menu:hover
{
	background-color:#ccf;
}

span.toolbar-button
{
	font-weight:bold;
	text-decoration:none;
	color:#7373e6;
	font-size: 11pt;
	padding: 0px 0px;
	margin-left:0.05cm;
	margin-right:0.05cm;
}

button.thickness-button:hover
{
	background-color:#ccf;
}
button.thickness-button
{
	width:12px;
	padding: 0px;
}

div.colorpicker
{
	width: 20px;
	height: 20px;
	border-radius: 3px;
	overflow:hidden;
	border: 1px solid darkgrey;
	float:left;
	margin-top:4px;
	margin-left:2px;
}

div.colorpicker-inner
{
	width: 40px;
	height: 35px;
	border: 0px;
	padding: 0px;
	position: relative;
	top: 0px;
	left: -5px;
}

div.submenu
{
	background-color: #eef;
	border: 1px solid #99d;
	position: fixed;
	top: 32px;
}

button.submenu:hover
{
	background-color: #ccf;
}
button.submenu
{
	border: 0px;
	width: 100%;
	align:left;
	text-align:left;
	background-color: #eef;
	padding: 4px;
}