:root {
	--main-text-color: hsl(0, 0%, 80%);
	--main-text-hover-color: hsl(0, 0%, 85%);
	--project-color: hsl(226, 17%, 51%);
	--blue: hsl(225, 66%, 56%);
	--green: hsl(112, 15%, 54%);
	--yellow: hsl(58, 41%, 65%);
	--red: hsl(0, 54%, 63%);
	--input-bgcolor: rgb(220,220,220);
	--background-color: hsl(141, 0%, 10%);
}

html {
	background-color: var(--background-color)
}


body {
	font-family: monospace;
	/*font-family: "Work Sans", serif; */
	font-size: 0.9rem;
	margin: 0;
	padding: 0;
	color: var(--main-text-color);
}

table th {
	color: var(--main-text-color);
	font-style: italic;
	font-weight: bold;
}

td {
	padding-left: 3px;
}

/* pre block in buefy needs some updating */
pre {
	background-color: inherit;
	color: inherit;
	padding: 5px;
	font-size: 0.8rem;
}

/* Text boxes in buefy are really meant for filling in addresses and not for applications. */
input[type=text] {
	margin: 4px;	
	height: 25px;
	border-radius: 4px;
	padding-bottom: 4px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 4px;
	font-size: 1.0rem;
}

input {
	background-color: var(--input-bgcolor);
}

/* Fixes to buefy class */
.textarea {
	padding: 0px 4px 0px 4px;
	margin: 5px 6px 5px 6px;
	min-height: 1.5rem;
	height: 3.1rem;  /* 2 lines */
	font-size: 0.8rem;
	background-color: var(--input-bgcolor);
}

/* Ignore this buefy rule that overrides .textarea */
.textarea:not([rows]) {
	min-height: 1.5rem;
	max-height: unset;
}

input[type=checkbox] {
	width: 18px;
	height: 18px;
	margin-left: 6px;
	position: relative;
	top: 5px;
}

input[type=color] {
	background-color: inherit;
	border: 0;
	cursor: pointer;
}

input:disabled {
	color: rgb(179, 179, 179)
}

select {
	height: 25px;
	margin: 2px 2px 2px 2px;
	font-size: 1.0rem;
	border-radius: 4px;
	background-color: var(--input-bgcolor);
}


/* Labels intented to preceed an input text box. */
.inputLabel {
	padding-top: 2px;
	vertical-align: middle;
}

.button {
	background-color:hsl(0, 0%, 30%);
	border-color:rgb(131, 131, 131);
	border-width: 2px;
	border-radius: 10px;
	color: var(--main-text-color);
}

.button:hover {
	color: var(--main-text-hover-color);
	background-color:hsl(0, 0%, 50%);
}

/* Override buefy which is a little too rounded */
.button.is-rounded {
	border-radius: 15px;
	border-color: black;
}

.button.is-small {
	height: 26px;
	margin-top: 4px;  /* matches input boxes */
}

.button.is-small.is-rounded {
	border-radius: 8px;
}

/* color is too dark by default */
.button.is-text {
	color: #7190af;
	padding: 0px;
}

.button.is-text:hover, .button.is-text:focus {
	background-color: initial;
	color: #bfcedb;
}

/* Tab text is too dark by default */
.tabs a{
	color: rgb(180, 180, 180);
}

/* Reduce the padding of buefy tabs */
.b-tabs .tab-content {
	padding: 3px;
}

/* default tick size of 0.75rem is too small */
.b-slider .b-slider-tick-label {
	font-size: 1.0rem;
}

/* Default text color is too light for the white background */
.b-slider-thumb-wrapper {
	color: rgb(65, 65, 65)
}

/* Override buefy's default very light color scheme for popups */
.modal-card-head, .modal-card-foot {
	background-color: hsl(0, 0%, 27%)
}

.modal-card-body {
	background-color: hsl(0, 0%, 21%);
}

.centerHorizontal {
	overflow: hidden;
	display: flex;
	justify-content: center;
 }

.errorMsg {
	color: rgb(200, 100, 100);
	font-style: italic;
	font-size: smaller;
}


/* The crosshairs in the center of the 3d view */
.centered_overlay  {
	position: absolute;
	display: grid;
	align-items: center;
	justify-items: center;
	width: 100%;
	height: 100%;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	pointer-events: none;
	user-select: none;
}

#voxelViewControls {
	width: 98%;
	position: absolute;
	bottom: 1%;
	right: 1%;
	opacity: 0.85;
}

/* The circle that appears when rotating */
#trackball_circle {
	opacity: 0.75; 
	z-index: 0;
	height: 90%;
}

/* The canvas which displays the image of the selected projection. Dimensions are set on initialization. */
#imageCanvas {
	border: 3px solid black;
	border-radius: 8px;
}

/* Feedback like coordinates shown overlaid a canvas. */
.canvasInformation {
	background-color: rgba(0, 0, 0, 0.3);
	color: rgb(200,200,200);
	padding-left: 10px;
	font-family: Consolas;
	user-select: none;  
	position: absolute;
	pointer-events: none;
	border-radius: 6px;
}

.mainTitle {
	font-size: 1.2rem;
	font-weight: bold;
	font-style: italic;
}

/* section title level 1 */
.btitle {
	font-size: larger;
	font-weight: bold;
	margin-bottom: 4px ;
}

/* section title level 2 */
.btitle2 {
	font-weight: bold;
	margin-bottom: 2px;
	margin-top: 10px;
	margin-left: 2px;
	font-size: larger;
}

/* section title level 3 */
.btitle3 {
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 6px;
	margin-left: 0px;
}

/* defines a group of related fields combined into a single box */
.bordered {
	border: 1px solid rgb(102, 102, 102);
	border-radius: 5px; 
	padding: 10px 10px 5px 10px;
	margin-left: 0px;		/* inline with the title */
	margin-right: 3px;
	margin-bottom: 10px;
	position: relative; 	/* Allows contained elements to be 'centered' with the 'absolute' position tag */
}

.animationTextArea {
	width: 100%; 
	height: 600px; 
	color: rgb(236, 234, 79); 
	max-width: 600px; 
	overflow-y: auto; 
	background-color: black;
	text-wrap: auto;
	background-color: var(--background-color);
	border-radius: 10px;
	padding: 10px;
}

.infoHeader {
	border: 1px solid rgb(199, 199, 199);
	font-size: smaller;
	padding: 3px;
}

.infoCell {
	border: 1px solid rgb(199, 199, 199);
	font-size: smaller;
	padding: 3px;
}

.infoText {
	font-size: smaller;
}

.fieldLabel {
	vertical-align: middle;
}

/* Input box for small numbers */
.smallInputBox {
	width: 80px; 
	text-align: center; 
	font-size: 1.0rem
}

.importantValue {
	color: darkblue;
	font-style: italic;
	font-size: 1.1rem;
	font-weight: bold;
}

/* The table displaying all connected devices */
.deviceTable {
	display: grid;
	grid-template-columns: repeat(4, 25%);
	/*grid-auto-rows: 20px;*/
	grid-auto-flow: row;  /* Fill in row-major order */
	column-gap: 4px;
	row-gap: 3px;
}

.deviceCell {
	border: 3px solid #000000;
	border-radius: 12px;
	/* background-color: #3d3b3b; */
	padding: 2px 4px 2px 4px;
	color: black;
	cursor: pointer;
}

.deviceCell:hover {
	background-color: rgb(124, 123, 123)
}

.soundsTable {
	display: grid;
	grid-template-columns: repeat(3, 33%);
	grid-auto-flow: row;
	column-gap: 10px;
	row-gap: 3px;
}

.variablesTable {
	display: grid;
	grid-template-columns: repeat(4, 250px);
	gap: 20px;
}

.eventsTable {
	display: grid;
	grid-template-columns: repeat(6, 100px);
	gap: 20px;
}

.eventsLabel {
	overflow: hidden;
	display: flex;
	justify-content: center;
	color: #5f5f5f;
}

.eventsData {
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.fixedTable {
	table-layout: fixed;
	width: 100%
}

.noOverflow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* the name column of a table. Keeps it from getting too long. Must be in a table that is a fixedTable */
.nameColumn {
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.componentColumn {
	width: 80px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-style: italic;
}

/* An item in a selectable list of items. */
.listItem {
	font-size: 0.9rem;
	cursor: pointer;
}

/* -- BUTTONS ----------------------------- */

.blueButton {
	border-width: 5px;
	border-color: var(--blue);
	color:hsl(0, 0%, 80%);
}

.blueButton:focus {
	border-color: var(--blue);
	color:hsl(0, 0%, 80%);
}

.blueButton:disabled {
	border-color: var(--blue);
}

.greenButton {
	border-width: 5px;
	border-color: var(--green);
	color:hsl(0, 0%, 80%);
}

.greenButton:focus {
	border-color: var(--green);
}

.greenButton:disabled {
	border-color: var(--green);
}

.yellowButton {
	
	border-color: var(--yellow);
	color:hsl(0, 0%, 80%);
}

.yellowButton:focus {
	border-color: var(--yellow);
}

.yellowButton:disabled {
	border-color: var(--yellow);
}

.redButton {
	border-width: 5px;
	border-color: var(--red);
	color:hsl(0, 0%, 80%);
}

.redButton:focus {
	border-color: var(--red);
}

.redButton:disabled {
	border-color: var(--red);
}

.stdButton {
	width: 120px;
	font-size: 0.85rem;
	height: 2.0rem;
	border-width: 5px;
}

.smallButton {
	height: 1.1rem;
	width: 50px;
	font-size: 0.8rem;
	border-width: 2px;
	margin: 2px;
}

#mainCanvas {
	border: 5px solid  hsl(0, 0%, 18%);
	border-radius: 10px;
}