:root {
	--dot-size: 1vmin;
	--border-size: 4vmin;
}

html, body {
	margin: 0;
	padding: 0;
	
	width: 100%;
	height: 100%;
	
	background-color: #eaf7ff;
}

html.export, body.export {
	background-color: rgba(0, 0, 0, 0.0);
}

@keyframes pulse {
	from {
		opacity: 1.0;
	}
	
	to {
		opacity: 0.0;
	}
}

.hidden {
	display: none !important;
}

.debug {
	position: absolute;
	display: grid;
	
	grid-template-rows: 1fr auto;
	
	bottom: 0;
	right: 0;
	width: 25%;
	height: 25%;
	
	color: #eee;
	background-color: #333;
	border-top-left-radius: 1em;
	
	font-size: max(10px, 1vmin);
}

.debug h1 {
	justify-self: stretch;
	
	margin: 0;
	padding: 0.5em 1em;
	
	font-size: max(15px, 1vmin);
	
	box-sizing: border-box;
}

.debug .history {
	justify-self: stretch;
	
	padding: 0 1em;
	
	box-sizing: border-box;
	overflow: auto;
}

.version {
	position: absolute;
	
	bottom: 0.25em;
	left: 0.25em;
	
	font-size: max(15px, 3vmin);
	
	z-index: 100;
}

.version a {
	color: #666;
	
	text-decoration: none;
	
	transition: all 250ms ease;
}

.version a:hover {
	color: black;
	
	text-decoration: underline;
	
	transition: all 250ms ease;
}

.install {
	position: absolute;
	
	bottom: 0.25em;
	left: 4.25em;
	
	font-size: max(15px, 3vmin);
	
	z-index: 100;
}

.install a {
	color: #666;
	
	text-decoration: none;
	
	transition: all 250ms ease;
}

.install a:hover {
	color: black;
	
	text-decoration: underline;
	
	transition: all 250ms ease;
}

/**
 * Overlay styling.
 **/
.overlay {
	position: absolute;
	
	display: grid;
	justify-items: center;
	align-items: center;
	
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	background-color: rgba(0, 0, 0, 0.5);
	
	z-index: 999;
}

.overlay .inner {
	position: absolute;
	
	width: 90vmin;
	height: 90vmin;
	
	background-color: white;
	border: 1px solid rgba(0, 0, 0, 0.75);
	border-radius: 0.5em;
	
	box-sizing: border-box;
	
	overflow: hidden;
}

.overlay .inner .controls {
	position: absolute;
	
	top: 0;
	right: 0;
	height: 2em;
	line-height: 2em;
	
	border-left: 1px solid rgba(0, 0, 0, 0.75);
	border-bottom: 1px solid rgba(0, 0, 0, 0.75);
	border-top-right-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	
	box-sizing: border-box;
	
	overflow: hidden;
	
	z-index: 10;
}

.overlay .inner .controls .button {
	display: inline-block;
	
	padding: 0.25em;
	 
	width: 2em;
	height: 2em;
	line-height: 1.5em;
	
	text-align: center;
	font-weight: bold;
	
	cursor: pointer;
	
	box-sizing: border-box;
	
	transition: all 250ms ease;
}

.overlay .inner .controls .button:hover {
	background-color: rgba(0, 0, 0, 0.5);
	
	transition: all 250ms ease;
}

.overlay .inner .content {
	position: absolute;
	
	width: 100%;
	height: 100%;
}

/**
 * Special bullseye overlay.
 **/
.bullseye-holder {
	position: absolute;
	
	width: 30vmin;
	height: 10vmin;
	
	text-align: center;
}

/**
 * Disable pointer events on table.
 **/
.container.main .table .bullseye-holder .bullseye, .container.main .table .bullseye-holder .second-ball {
	pointer-events: none;
}

.overlay .inner .content .bullseye-holder {
	top: 20vmin;
	width: 90vmin;
	height: 30vmin;
	
	background-color: rgba(0, 0, 0, 0.1);
}

.bullseye-holder .bullseye {
	position: absolute;
	
	top: 0;
	left: 33.33%;
	width: 33.33%;
	height: 100%;
	
	background-color: white;
	border: 0.2vmin solid black;
	border-radius: 50%;
	
	box-sizing: border-box;
	
	z-index: 1;
}

.bullseye-holder .bullseye .circle1 {
	position: absolute;
	
	top: calc(100% * (1 - 1.1 / 3.15) / 2);
	left: calc(100% * (1 - 1.1 / 3.15) / 2);
	width: calc(100% * 1.1 / 3.15);
	height: calc(100% * 1.1 / 3.15);
	
	border: 0.2vmin solid black;
	border-radius: 50%;
	
	box-sizing: border-box;
}

.bullseye-holder .bullseye .circle2 {
	position: absolute;
	
	top: calc(100% * (1 - 2.2 / 3.15) / 2);
	left: calc(100% * (1 - 2.2 / 3.15) / 2);
	width: calc(100% * 2.2 / 3.15);
	height: calc(100% * 2.2 / 3.15);
	
	border: 0.2vmin solid black;
	border-radius: 50%;
	
	box-sizing: border-box;
}

.bullseye-holder .bullseye .cross-hor {
	position: absolute;
	
	top: calc(50% - 0.1vmin);
	left: calc(100% * (1 - 2.2 / 3.15) / 2);
	width: calc(100% * 2.2 / 3.15);
	height: 0.2vmin;
	
	background: black;
	
	box-sizing: border-box;
}

.bullseye-holder .bullseye .cross-ver {
	position: absolute;
	
	left: calc(50% - 0.1vmin);
	top: calc(100% * (1 - 2.2 / 3.15) / 2);
	width: 0.2vmin;
	height: calc(100% * 2.2 / 3.15);
	
	background: black;
	
	box-sizing: border-box;
}

.bullseye-holder .bullseye .target {
	position: absolute;
	
	left: 25%;
	top: 25%;
	width: calc(100% * (1 - 2.2 / 3.15) / 2);
	height: calc(100% * (1 - 2.2 / 3.15) / 2);
	
	background-color: red;
	border: 0.2vmin solid rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	
	box-sizing: border-box;
	
	cursor: pointer;
}

.bullseye-holder .bullseye .target.dragging {
	border-width: 3px;
}

.bullseye-holder .second-ball {
	position: absolute;
	
	top: 0;
	left: 50%;
	width: 33.33%;
	height: 100%;
	
	background-color: rgba(0, 0, 0, 0.5);
	border: 0.2vmin solid rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	
	box-sizing: border-box;
	
	cursor: pointer;
}

.overlay .inner .content .bullseye-holder .second-ball-slider {
	position: absolute;
	
	margin: 0;
	padding: 0;
	
	left: 16.66%;
	width: 66.66%;
	bottom: -2em;
}

.overlay .inner .content .bullseye-holder .second-ball-color {
	position: absolute;
	
	margin: 0;
	padding: 0;
	
	left: 40%;
	width: 20%;
	bottom: -4em;
}

.overlay .inner .content .bullseye-holder .bullseye-accept {
	position: absolute;
	
	margin: 0;
	padding: 0;
	
	left: 40%;
	width: 20%;
	bottom: -6em;
}

/**
 * Container styling.
 **/
.container {
	display: grid;
	
	grid-template-rows: 10vh 90vh;
	
	width: 100%;
	height: 100%;
	
	user-select: none;
}

.container .table .bullseye-holder {
	top: 35vmin;
	left: 45vmin;
	width: 30vmin;
	height: 10vmin;
	
	transition: all 250ms ease;
}

.container .table.landscape .bullseye-holder {
	top: 35vmin;
	left: -25vmin;
	
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	
	transition: all 250ms ease;
}

.container .table .ball {
	position: absolute;
	
	width: 3vmin;
	height: 3vmin;
	
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	
	box-sizing: border-box;
	
	z-index: 60 !important;
	
	transition: all 250ms ease;
}

.container .ball.yellow {
	background-color: yellow;
}

.container .ball.yellow:hover {
	background-color: yellow !important;
}

.container .ball.red {
	background-color: red;
}

.container .ball.red:hover {
	background-color: red !important;
}

.container .ball.white {
	background-color: white;
}

.container .ball.white:hover {
	background-color: white !important;
}

.container .ball.ghost {
	background-color: rgba(255, 255, 255, 0.25);
	border-style: dashed;
}

.container .table .dot {
	position: absolute;
	
	width: 1vmin;
	height: 1vmin;
	
	background-color: white;
	border: 1px solid rgba(0, 0, 0, 0.5);
	
	box-sizing: border-box;
	
	transition: all 250ms ease;
}

.container .table .line {
	position: absolute;
	
	box-sizing: border-box;
	
	transition: all 250ms ease;
}

.container .table .line .part {
	position: absolute;
	
	top: 0;
	height: 100%;
}

.container .table .line .arrow {
	position: absolute;
	
	top: -1vmin;
	bottom: -1vmin;
	left: calc(50% - 1vmin / 2);
	
	width: 0;
	
	border-top: 1vmin solid transparent;
	border-bottom: 1vmin solid transparent;
	border-left: 2vmin solid green;
	
	transform: scale(0.5);
}

.container .table .line.cue {
	border-radius: 0 30% 30% 0 !important;
	
	overflow: hidden;
}

.container .table .label {
	position: absolute;
	
	font-weight: bold;
	/*font-size: 4vmin;*/
	font-size: 3.33vmin;
	white-space: nowrap;
	
	box-sizing: border-box;
	
	z-index: 80 !important;
	
	transition: all 250ms ease;
}

.container .table.landscape .label {
	transform: rotate(-90deg);
	
	transition: all 250ms ease;
}

.container .table .label span {
	pointer-events: none;
}

.container .table .label[data-direction='vertical'] span {
	display: block;
	
	line-height: 1em;
	
	text-align: center;
}

.container .table .dragging {
	border: 1px dashed rgba(0, 0, 0, 1);
	
	transition: none !important;
}

/**
 * Menu styling.
 **/
.container .menu {
	place-self: center;
	
	width: 100%;
	height: 100%;
	
	text-align: center;
}

.container .menu .item {
	display: inline-block;
	
	/*margin: 0.1em;*/
	
	width: max(30px, 6vmin);
	height: max(30px, 6vmin);
	line-height: max(25px, 5vmin);
	
	border-radius: 1vmin;
	
	font-size: max(15px, 3vmin);
	font-weight: bold;
	
	text-align: center;
	vertical-align: top;
	
	cursor: pointer;
	user-select: none;
	
	box-sizing: border-box;
	
	transition: all 250ms ease;
}

.container .menu .item:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.container .menu .item.selectable {
	border: 4px solid rgba(0, 0, 0, 0.1);
}

.container .menu .item.selectable:hover {
	border: 4px solid rgba(0, 0, 0, 0.5);
}

.container .menu .item.selectable.selected {
	border: 4px solid rgba(0, 0, 0, 0.9);
}

/**
 * Menu ball items.
 **/
.container .menu .item.ball {
	border-radius: 50%;
}

/**
 * Menu display item.
 **/
.container .menu .item.display {
	line-height: max(30px, 6vmin);
	
	font-size: max(20px, 4vmin);
}

.container .menu .item.display[data-display='portrait'] {
	transform: rotate(-90deg);
}

.container .menu .item.display[data-display='landscape'] {
	transform: rotate(0deg);
}

/**
 * Menu dropdown items.
 **/
.container .menu .item.select {
	position: relative;
	
	background-color: white;
	border: 1px solid black;
}

.container .menu .item.select .options {
	position: absolute;
	
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	
	background-color: white;
	border: 1px solid gray;
	border-radius: 1vmin;
	
	z-index: 1;
	
	box-sizing: border-box;
}

.container .menu .item.select .options .option {
	position: relative;
	
	width: 100%;
	height: max(30px, 6vmin);
	
	box-sizing: border-box;
	
	transition: all 250ms ease;
}

.container .menu .item.select .options .option:hover {
	background-color: rgba(0, 0, 255, 0.1);
	
	transition: all 250ms ease;
}

.container .menu .item.select .options .option * {
	position: absolute;
}

.container .menu .item.select.lineattr .options .option * {
	top: 50%;
	left: 5%;
	width: 90%;
}

.container .menu .item.select.lineattr.curve .options .option * {
	top: 0;
	width: 100%;
	height: max(30px, 6vmin);
	line-height: max(30px, 6vmin);
	
	font-size: 80%;
}

.container .menu .item.select.color .options .option * {
	width: 100%;
	height: max(30px, 6vmin);
	line-height: max(30px, 6vmin);
	
	filter: invert(100%);
	
	transition: all 250ms ease;
}

.container .menu .item.select.color .options .option:hover {
	background-color: rgba(0, 0, 255, 0.1) !important;
}

.container .menu .item.select.color .options .option:hover * {
	color: black !important;
	
	filter: invert(0%);
	
	transition: all 250ms ease;
}

.container .menu .item.select.closed {
	overflow: hidden;
}

.container .menu .item.select.closed .options .option {
	display: none;
}

.container .menu .item.select.closed .options .option.selected {
	display: block;
}

/**
 * Menu line item.
 **/
.container .menu .item.line {
	position: relative;
}

/**
 * Menu label item.
 **/
.container .menu .item.label {
	
}

/**
 * Menu vertical label item.
 **/
.container .menu .item.label.vertical {
	transform: rotate(-90deg);
}

/**
 * Menu delete item.
 **/
.container .menu .item.delete {
	width: 3em;
}

/**
 * Menu download item.
 **/
.container .menu .item.special {
	line-height: max(25px, 5vmin);
	
	border-radius: 1vmin;
	
	font-size: max(15px, 3vmin);
}

.container .menu .item.special sup {
	display: block;
	
	line-height: 0em;
	
	font-size: 50%;
	font-weight: normal;
	
	white-space: nowrap;
}

/**
 * The login.
 **/
.container.login form {
	display: grid;
	position: relative;
	
	grid-template-columns: 25% 75%;
	grid-template-rows: auto repeat(4, 3em);
	grid-gap: 0.5em;
	
	place-self: center;
	
	width: min(100%, 20em);
	height: auto;
	
	font-family: Calibri, Verdana;
	font-size: 1rem;
}

.container.login form .head {
	grid-column: auto / span 2;
	align-self: start;
	
	text-align: center;
}

.container.login form .head .error {
	color: red;
}

.container.login form .description, .container.login form label, .container.login form input {
	align-self: center;
	
	height: 1em;
	line-height: 1em;
}

.container.login form label {
	justify-self: end;
	
	font-weight: bold;
	
	box-sizing: border-box;
}

.container.login form input {
	padding: 0.5em;
	
	justify-self: start;
	
	border-radius: 0.25em;
	border: 1px solid rgba(0, 0, 0, 0.5);
	
	transition: all 250ms ease;
}

.container.login form input:hover {
	background-color: #e6f6ff;
	border: 1px solid rgba(0, 0, 255, 0.25);
	
	transition: all 250ms ease;
}

.container.login form input[type='text'], .container.login form input[type='password'] {
	justify-self: stretch;
}

.container.login form input[type='submit'] {
	grid-column: auto / span 2;
	justify-self: end;
	
	height: 2em;
}

/**
 * The table.
 **/
.container .table {
	position: relative;
	
	place-self: center;
	
	width: 40vmin;
	height: 80vmin;
	
	/*border: 4vmin solid #743535;
	border-radius: 1vmin;*/
}

.container .table.portrait {
	transform: rotate(0deg);
	
	transition: all 250ms;
}

.container .table.landscape {
	transform: rotate(90deg);
	
	transition: all 250ms;
}

.container .table .border {
	position: absolute;
	
	top: calc(-1 * var(--border-size));
	left: calc(-1 * var(--border-size));
	right: calc(-1 * var(--border-size));
	bottom: calc(-1 * var(--border-size));
	
	border-radius: calc(0.25 * var(--border-size));
	
	overflow: hidden;
}

.container .table .border .outer {
	position: absolute;
	
	width: 100%;
	height: 100%;
	
	background-color: #743535;
}

.container .table .border .custom {
	position: absolute;
	
	border: calc(var(--border-size) * 0.1) solid rgba(255, 255, 0, 0.9);
	
	z-index: 1;
}

.container .table .border .custom.customborder-table {
	top: var(--border-size);
	left: var(--border-size);
	right: var(--border-size);
	bottom: var(--border-size);
}

.container .table .border .custom.customborder-tablemax {
	top: calc(var(--border-size) * 0.67);
	left: calc(var(--border-size) * 0.67);
	right: calc(var(--border-size) * 0.67);
	bottom: calc(var(--border-size) * 0.67);
}

.container .table .border .custom.customborder-dots {
	top: calc(var(--border-size) * 0.33);
	left: calc(var(--border-size) * 0.33);
	right: calc(var(--border-size) * 0.33);
	bottom: calc(var(--border-size) * 0.33);
}

.container .table .border .custom.customborder-full {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.container .table .border .custom.customborder-infinite {
	display: hidden;
	
	top: -100vmax;
	left: -100vmax;
	right: -100vmax;
	bottom: -100vmax;
}

.container .table .border .inner {
	position: absolute;
	
	top: calc(var(--border-size) * 0.67);
	left: calc(var(--border-size) * 0.67);
	right: calc(var(--border-size) * 0.67);
	bottom: calc(var(--border-size) * 0.67);
	
	background-color: #47a5c2;
}

.container .table .border .inner .line {
	width: 2.2vmin;	/* This must be a % of var(--border-size) ? */ 
	height: 1px;
	
	background-color: rgba(0, 0, 0, 0.5);
}

.container .table .area {
	position: absolute;
	
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	background-color: #71bed5;
	
	border: 2px solid rgba(0, 0, 0, 0.5);
	
	box-sizing: border-box;
}

.container .table .area .dots .dot {
	position: absolute;
	
	width: var(--dot-size);
	height: var(--dot-size);
	
	background-color: red;
	
	border-radius: 50%;
}

.container .table .area .dots .dot.corner {
	background-color: grey;
}

.container .table .area .dots .dot.main {
	background-color: white;
}

.container .table .area .dots .dot.sub {
	width: calc(var(--dot-size) / 2);
	height: calc(var(--dot-size) / 2);
	
	background-color: black;
}

.container .table .area .grid {
	position: absolute;
	
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.container .table .area .grid .line {
	position: absolute;
	
	width: 0.2vmin;
	height: 0.2vmin;
	
	background-color: rgba(255, 255, 255, 0.5);
	
}

.container .table .area .grid .line.hor {
	left: 0;
	width: 100%;
}

.container .table .area .grid .line.ver {
	top: 0;
	height: 100%;
}

.container .table .entity {
	cursor: pointer;
	
	z-index: 50;
}	

.container .table .entity:hover {
	/*animation-name: pulse;
	animation-duration: 250ms;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;*/
}

/**
 * Printer specific styling.
 **/
@media print {
	* {
		-webkit-print-color-adjust: exact;
	}
	
	html, body {
		background-color: rgba(0, 0, 0, 0);
	}
	
	.container .menu {
		visibility: hidden;
	}
}