:root {
    --bg: #123456;
    --color: #f2f2f2;
  }

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 250%; 
		height: 250%;
		overflow: auto;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0,0.4);
	}
	.modal-content {
		background-color: #f3f6f4;
		margin: 15% auto;
		padding: 20px;
		border: 1px solid #777;
		width: 90%;
	}
	.close {
		color: #aaa;
		float: right;
		font-size: 56px;
		font-weight: bold;
	}
	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}
	.w3-modal-content{margin:auto;background-color:#fff;position:absolute;padding:0;outline:0;width:600px}
	.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
	.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
	.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
	.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#990000!important}
	.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
	.w3-button:hover{color:#000!important;background-color:#ccc!important}
	.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
	.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
	.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
	body {
		background-color: var(--bg) !important;
		color: var(--color) !important;
		font-family: "Geist", sans-serif;
	}
	a { 
		color: var(--color) !important;
	}
	a:link {
		text-decoration: none;
	}
	a:visited {
		text-decoration: none;
	}
	a:hover {
		text-decoration: underline;
	}
	a:active {
		text-decoration: none;
	}

	.button-custom { /* ABC selector button colors */
		border: none;
		color: white;
		padding: 10px 42px;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		display: inline-block;
		font-size: 14px;
		margin: 2px 2px;
		cursor: pointer;
	}
	h1 {
		font-size:28px;
	}
	h2 {
		font-size:21px;
	}
	.button-custom-red {background-color: #AA0000;} /* Red */
	.button-custom-green {background-color: #00AA00} /* Green */ 
	.button-custom-blue {background-color: #1d4a95} /* Blue */  
	.button-custom-orange {background-color: #ff9900;} /* Orange */ 
	.button-custom-black {background-color: #555555;} /* Black */
	.button-custom-symbols {background-color: #E6E5E4;font-size: 24px;padding: 4px 4px; color:black;} /* Stage reset button */

	.imagecontrolbuttons {
		border: 1px solid black;
		color: black;
		padding: 4px 4px;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		display: inline-block;
		font-size: 14px;
		margin: 2px 2px;
		cursor: pointer;
		background-color: #E6E5E4;
	}
	
	.linkbutton {
		font-size: 37px;
	}
	.selectionindicatorbox {
		float: center;
		height: 25px;
		width: 25px;
		margin: auto;
		text-align: center;
		margin-bottom: 15px;
		clear: both;
	}

	.sib-red {
		background-color:#AA0000;
		border: 2px solid black;
	}

	.sib-green {
		background-color:#00AA00;
		border: 2px solid black;
	}

	.sib-blue {
		background-color:#1d4a95;
		border: 2px solid black;
	}

	.sib-orange {
		background-color:#FF9900;
		border: 2px solid black;
	}
	
	.table-fix {
    table-layout: fixed;
    width: 100px;
	}
	@media (prefers-color-scheme: dark) {
	:root {
		--bg: #191919;
		--color: #f2f2f2;
		}
	}