* {
  box-sizing: border-box;
  scrollbar-color: #3eb0ec #232629;
  scrollbar-width: 10px;
}
body {
  font: 400 12pt "Droid Sans", sans-serif;
  background-color: #454c53;
  padding: 0;
  margin: 0;
  color: #e3d1c7;
}
h1::first-letter {
	text-transform: capitalize;
}
table {
	empty-cells: show;
	border-collapse: collapse;
}
input {
	border: 1px solid transparent;
}
input:focus, textarea:focus {
  outline: 1px solid #3eb0ec;
}
input:invalid, textarea:invalid {
  border: 1px dashed red;
}

::placeholder {
	color: #e3d1c7;
}

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

.fullwidth {
	width: 100%;
}

.inlineleftspace {
	margin-left: 4px ;
}

.monospace {
	font-family: 'Courier New', Courier, monospace;
}
.capitalize::first-letter {
	text-transform: capitalize;
}

.form {
	max-width: 800px;
	min-width: 200px;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}


.panel {
	margin-top: 4px;
}

.controlpanel {
	margin-top: 30px;
}


.titlebox {
	font-size:8pt;
	margin-left: 4px;
	margin-bottom: 2px;
}
.titlebox::first-letter {
	text-transform: capitalize;
}

.textbox {
	border: none;
	color: #e3d1c7;
	background-color: #31363b;
	padding: 4px;
}

.messagebox {
	border: none;
	color: #e3d1c7;
	background-color: #31363b;
	padding: 4px;
	resize: vertical;
}

.button {
	background-color: #31363b;
	color: #e3d1c7;
	padding: 4px;
	border: solid 1px #2cc4db;
	border-radius: 4px;
}
.button:hover {
	background-color: #2cc4db;
	color: #31363b;
}