[v-cloak] {
	display: none;
}
html,
body {
	margin: 0;
}

#rm #heatDiv {
	position: absolute;
	top: 0;
	left: 0;
}

#rm .file-upload-container {
	position: relative;
	width: 100%;
	height: 100%;
}

#space {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border: 1px dashed var(--border-color);
}

#space.file-in-memory {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

#rm .file-input {
	opacity: 0 !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#rm .file-drop-area {
	position: fixed;
	left: 0;
	top: 0;
	right: 300px;
	margin: 0 auto;
	height: 37px;
	padding-top: 3px;
	background-color: var(--overlay-color);
	z-index: 999;
	transition: height 0.3s ease-in-out;
}

#rm .file-drop-area.expanded {
	position: absolute;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	left: 50px;
	top: 50px;
	right: 350px;
	height: 85vh;
}

#rm .file-drop-area.dragging {
	background-color: var(--card-bg-color-transparent);
}

#rm .file-drop-area2 {
	position: relative;
	padding-top: 3px;
	background-color: var(--overlay-color);
	width: 100%;
	height: 100px;
	transition: 0.4s;
	z-index: 999;
}

#rm #editMode {
	position: fixed;
	top: 0;
	left: 0;
	width: 180px;
	height: 37px;
	background-color: var(--overlay-color);
	padding: 0.4rem;
	border-radius: 0;
	z-index: 9999;
}

#rm .is-active {
	background-color: var(--selected-color);
	color: #2aa197;
}

#rm .fake-btn {
	position: relative;
	background-color: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: 3px;
	margin-right: 5px;
	font-size: 12px;
	cursor: pointer;
	text-transform: uppercase;
}

#rm .file-msg {
	position: relative;
	font-size: small;
	font-weight: 300;
	line-height: 2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 9;
}

#rm .file-input {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	opacity: 1;
	background: transparent !important;
}

#rm .file-input.transparent {
	opacity: 0;
	position: absolute;
}

#rm .file-input:focus {
	outline: none;
}

#rm .statusBtn {
	font-size: 2.9vw;
	line-height: initial !important;
	padding: 0.35vw 0.5vw 0 0.5vw !important;
	color: var(--font-color-light);
	border: 0;
}

#rm hr#measureLine {
	position: fixed;
	left: 0;
	top: calc(calc(100vw - 208px) / 1.778) !important;
	right: 0;
	border: 1px solid var(--danger-color);
	z-index: 99999999999999;
}

#rm .siblings,
#rm #flexy {
	flex-direction: row;
	justify-content: space-between;
	padding: 0;
}

#rm #settings {
	padding: 1rem;
	background-color: var(--bg-color);
}

#rm #StartRecord {
	flex-direction: row;
	padding: 0.25rem;
	background: var(--bg-color);
}

#rm #StartRecord button,
#rm #StartRecord a {
	padding: 0.25rem 0 !important;
}

#rm #set-height {
	display: block;
}

#rm #indicator {
	position: fixed;
	left: 50px;
	bottom: 50px;
	height: 50px;
	width: 50px;
	background-color: #fff;
}

#rm #fileWrapper,
#rm #manualWrapper {
	position: fixed;
	top: 50px;
	left: 0;
	right: 0;
	margin-right: 0;
	background-color: var(--card-bg-color);
	z-index: 99;
}

#rm #listWrapper {
	position: absolute;
	top: 50px;
	margin-right: 0;
	background-color: transparent;
	z-index: 99;
	overflow-y: auto;
}

#rm #videoStartDiv {
	position: fixed;
	left: 0;
	top: 55px;
	right: 0;
	width: 100%;
	z-index: 99;
}

#rm #videoStartTimeWrapper {
	position: absolute;
	right: 0;
	top: 55px;
	z-index: 9999999999999999999;
	width: auto;
	display: flex;
}

#rm #heatStatusWrapper {
	position: fixed;
	left: 10px;
	bottom: 10px;
}

#rm #publishButton {
	position: fixed;
	bottom: 50px;
	right: 10px;
	margin: 0;
	z-index: 99999999999;
}

#rm .topMargin {
	top: 100px;
}

.blob {
	background: black;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	margin: 0;
	height: 1.5rem;
	width: 1.5rem;
	transform: scale(1);
	animation: pulse-black 2s infinite;
}

.blob.red {
	background: rgba(240, 80, 110, 1);
	box-shadow: 0 0 0 0 rgba(240, 80, 110, 1);
	animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(240, 80, 110, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(240, 80, 110, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(240, 80, 110, 0);
	}
}

#rm #stopwatch {
	z-index: 99999999;
}

#rm #stopwatch .uk-grid-column-small > *,
#rm #stopwatch .uk-grid-small > * {
	padding-left: 0;
}

#rm .noClick:hover {
	background-color: var(--overlay-color);
	cursor: not-allowed;
}

.runningWrapper {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#rm .laneEditRowing {
	display: block;
	position: relative;
	height: 70px;
	margin-bottom: 0;
	border-bottom: 1px dashed #ffffff50;
	background-color: #00000050;
	color: #fff;
}

#rm .laneEditShadow {
	display: block;
	position: relative;
	height: 46px;
	margin-bottom: 0;
	border-bottom: 2px groove #00000025;
	background-color: #2aa297b0;
	color: #fff;
}

#rm .laneEdit:hover,
#rm .laneEditRowing:hover {
	background-color: #00000015;
}

#rm .space.laneEdit:hover,
#rm space.laneEditRowing:hover {
	background-color: transparent;
	cursor: default;
}

#rm .laneEdit .spaceholder,
#rm .laneEditRowing .spaceholder {
	background-color: transparent !important;
	color: transparent !important;
}

#rm .laneEdit:hover .spaceholder,
#rm .laneEditRowing:hover .spaceholder {
	background-color: transparent !important;
	color: transparent !important;
}

#rm .laneEdit button .laneTile {
	font-weight: bold;
	background-color: #007baf87;
	color: #ffffff90;
}

#rm .laneEdit button:enabled .laneTile:hover {
	background-color: #007db1;
	color: #fff !important;
}

#rm .laneEdit button:enabled.deactivated .laneTile {
	background-color: #007db1;
	color: #ffffff !important;
}

#rm .laneEdit button:enabled .laneTile:hover ~ .result {
	background-color: #00000050;
	color: #ffffff75 !important;
}

#rm .laneEdit button:enabled.deactivated .laneTile ~ .result {
	background-color: #00000075;
	color: #ffffff !important;
}

#rm .laneEdit button:enabled .laneTile ~ .result .runningWrapper,
#rm .laneEdit button:enabled.deactivated .laneTile ~ .result .runningWrapper {
	background-color: #00000080;
	color: #ffffff75 !important;
	opacity: 0.5;
}

#rm .laneEdit button:enabled .laneTile:hover ~ .result .runningWrapper,
#rm .laneEdit button:enabled .result:hover .runningWrapper {
	display: none;
}

#rm .runningWrapper2 {
	margin-bottom: 3.75vw;
	width: 50%;
	background-color: transparent;
}

.loadingDot {
	width: 0.75vw;
	height: 0.75vw;
	background: var(--primary-bg-color);
	margin: 0 auto;
	padding: 0 2%;
	animation: anim-loadingDotPause 2s infinite;
	animation-timing-function: ease-in-out;
	border-radius: 50%;
	display: inline-block;
}

.loadingDot--2 {
	animation-delay: 0.2s;
}

.loadingDot--3 {
	animation-delay: 0.4s;
}

.loadingDot--4 {
	animation-delay: 0.6s;
}

.loadingDot--5 {
	animation-delay: 0.8s;
}

@keyframes anim-loadingDotPause {
	0%,
	20% {
		transform: scale(0.25);
		opacity: 0.75;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.25);
		opacity: 0.75;
	}
}

#rm #webcamWarning {
	font-size: 0.825rem;
	padding: 0.5rem;
}

.wrapper {
	display: inline-block;
	position: relative;
	width: 640px;
	height: 480px;
	background-color: transparent;
}

#parent label {
	display: inline-block;
	vertical-align: text-bottom;
	width: 40px;
	min-width: 40px;
	text-align: right;
}

#origin label {
	padding-top: 5px;
	text-align: center;
	cursor: pointer;
}

#origin label:hover {
	color: #2aa197;
}

#rm #trigger_value {
	width: 100%;
	padding-right: 0;
	border: 0;
	font-family: "Titillium Web", sans-serif;
	background-color: transparent !important;
	height: auto;
}

input[type="radio"] {
	/* remove standard background appearance */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* create custom radiobutton appearance */
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 3px;
	/* background-color only for content */
	background-clip: content-box;
	border: 1px solid #d4d4d4;
	background-color: #ecf0f3;
	border-radius: 50%;
	vertical-align: bottom;
	cursor: pointer;
}

input[type="radio"]:hover {
	background-color: #2aa19750;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
	background-color: #2aa197;
}

input[type="range"] {
	-webkit-appearance: none;
	background-color: var(--range-color);
	height: 10px;
	overflow: visible;
	width: 100%;
	border-radius: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: 10px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: var(--range-color);
	border-radius: 50%;
	cursor: pointer;
	height: 20px;
	width: 20px;
	box-shadow: 0 0 1px 1px var(--border-color);
}

input[type="range"]:disabled::-webkit-slider-thumb {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}
input[type="range"]:disabled::-moz-range-thumb {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

input[type="range"]:disabled::-ms-thumb {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

input[type="range"]::-moz-range-thumb {
	background: #ccc;
	border-radius: 3px;
	box-shadow: -1010px 0 0 1000px #2aa197;
	cursor: pointer;
	height: 200px;
	width: 20px;
	border: 0;
}

input[type="range"]::-moz-range-track {
	background-color: #ccc;
}
input[type="range"]::-moz-range-progress {
	background-color: #ccc;
	height: 28px;
}
input[type="range"]::-ms-fill-upper {
	background-color: #ccc;
}
input[type="range"]::-ms-fill-lower {
	background-color: #ccc;
}

p input[type="radio"] {
	width: 100%;
}

.laneX {
	display: block;
	position: relative;
	height: 60px;
	margin-bottom: 0;
	border-top: 2px solid whitesmoke;
	color: #fff;
}

.laneX:hover {
	background-color: #00000025;
}

.laneX:last-child {
	border-bottom: 2px solid whitesmoke;
}

#rm #club {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
	margin: 0;
	display: block;
	height: 100%;
	line-height: 1;
	padding: 6px;
	width: 45px;
	color: #fff;
	background-color: transparent;
	font-size: 1rem;
	font-weight: bold;
	border-left: 1px solid #909090;
}

#laneNumber {
	text-align: center;
	margin: 0;
	display: block;
	height: 100%;
	padding: 0;
	line-height: 1.45;
	font-size: 2rem;
	font-weight: bold;
}

#place {
	text-align: center;
	margin: 0;
	display: block;
	height: 100%;
	line-height: 1;
	padding: 12px;
	width: 55px;
	font-size: 1.75rem;
	font-weight: bold;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

#laneTime {
	text-align: center;
	margin: 5px 10px 5px 0;
	display: block;
	height: 100%;
	line-height: 1;
	padding: 6px;
	width: 120px;
	line-height: 1;
	background-color: #fff;
	color: #555;
	font-size: 1rem;
	font-weight: normal;
	border-left: 1px solid #909090;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

#editButtons {
	font-family: "Bebas Neue", cursive;
}

#rm #sync {
	position: fixed;
	top: 28px;
	left: 0;
	right: 0;
	width: 178px;
	margin: 0 auto;
	padding: 0;
	z-index: 9;
}

#rm #currentTimeCode,
#rm #mainStopwatch,
#rm #position,
#rm .timer {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	width: 190px;
	min-height: 50px;
	padding: 0.5rem 0 0 0;
	font-size: 1.7rem;
	font-family: "Share Tech Mono", monospace;
	text-align: center;
	background-color: var(--card-bg-color);
}

#rm #timeDisplay {
	font-size: 1.5rem;
	font-family: "Share Tech Mono", monospace;
	text-align: center;
	background-color: var(--card-bg-color);
}

#rm #videoScrollBtn {
	position: fixed;
	right: 0;
	top: 125px;
	width: auto;
	padding: 0.5vw 1vw 0.25vw 1vw;
	font-size: 3.5vw;
	line-height: 1.1;
	background-color: #161b23b3;
	color: #ffffffcc;
	font-family: "Share Tech Mono", monospace;
	text-align: center;
	z-index: 2;
}

#rm #videoScrollBackBtn {
	position: fixed;
	right: 0;
	top: 190px;
	width: auto;
	padding: 1rem;
	font-size: 3.5vw;
	line-height: 1.1;
	background-color: #161b23b3;
	color: #ffffffcc;
	font-family: "Share Tech Mono", monospace;
	text-align: center;
	z-index: 2;
}

#rm #videoPublicTitle {
	position: fixed;
	left: 0;
	right: auto;
	top: 0;
	padding: 0.5vw 1vw;
	font-size: 3vw;
	line-height: 1.1;
	background-color: #161c23cc;
	color: #ffffffcc;

	text-align: center;
	z-index: 2;
}

#rm #currentTimeCodePublic {
	position: fixed;
	right: 50px;
	top: 0;
	padding: 0.25vw 1vw;
	font-size: 4vw;
	line-height: 1.1;
	background-color: #161c23cc;
	color: #ffffffcc;
	font-family: "Share Tech Mono", monospace;
	text-align: center;
	z-index: 2;
}

#rm #videoRes {
	position: fixed;
	top: 4.7vw;
	left: 0.5vw;
	width: auto;
	max-width: 40%;
	border-radius: 0;
	background-color: #161c23cc;
	color: #ffffff90;
	font-size: 2.4vw;
	padding: 0.5rem 0.5rem 0.5rem 0;
	z-index: 99999;
}

@media (min-width: 960px) {
	#rm #videoRes {
		padding: 0.75rem;
	}

	#rm #videoPublicTitle,
	#rm #currentTimeCodePublic {
		font-size: 3vw;
	}

	#rm #stopwatch {
		z-index: 999999;
	}

	#rm #StartRecord {
		padding: 0 0;
		background-color: transparent;
	}

	#rm #settings {
		padding: 0;
		background-color: transparent;
	}

	#rm #sync {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: auto;
		background-color: transparent;
	}

	#rm .statusBtn {
		font-size: 1.4vw;
	}

	#rm #currentTimeCodeWrapper,
	#rm #mainStopwatchWrapper {
		position: relative;
		top: auto;
		right: auto;
	}

	#rm #currentTimeCode,
	#rm #mainStopwatch,
	#rm #position,
	#rm .timer {
		position: relative;
		width: 100%;
		min-height: auto;
		padding: 0;
		top: auto;
		line-height: 1;
		margin: 0 0 0.25rem 0;
		font-size: 1.55rem;
		background-color: transparent !important;
		border: 0;
	}
}

#rm #videoStartTime {
	font-family: "Bebas Neue", cursive;
	width: 95px;
	margin-right: 0;
	height: 39px;
	background-color: transparent;
}

#rm #currentTimeCodeInfo {
	font-size: 9px;
	line-height: 0.8;
	padding: 0.5rem;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 200px;
	z-index: 9;
}

#rm #hasPhoto {
	font-size: 9px;
	line-height: 0.8;
	padding: 0.5rem;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 200px;
	z-index: 9;
}

#rm #info td {
	line-height: 1;
	font-size: 12px;
}

td {
	height: auto;
}

a.values:hover {
	transition: color 0.25s ease;
}

.uk-tooltip {
	background-color: #2aa197;
	color: #fff;
	margin-top: 15px !important;
	padding-left: 12px;
	padding-right: 12px;
	font-size: 1.25rem;
	box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
	border-radius: 6px;
}

#editPerspective {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 500px;
	width: 100%;
	perspective: 100%;
	perspective-origin: 50% 50px;
	margin: 0 auto;
	overflow: visible;
	background-color: transparent;
}

#edit {
	transform: rotateX(88deg);
	background-color: transparent;
	height: 750px;
	margin: 0 auto;
	width: 610px;
	z-index: 99999;
	overflow: hidden;
}

#rm tr#finished {
	background-color: #fff;
}

#rm .buttons {
	padding: 0.6rem 0.75rem 0 0.65rem;
}

#rm .buttons button {
	padding: 0;
	text-align: center;
}

.finishline {
	height: 100%;
	position: absolute;
	border-left: 4px solid #ffffff50;
	top: 9%;
	left: 300px;
	z-index: 1;
}

.none {
	-webkit-filter: none;
	filter: none;
}

.grayscale {
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}

.blue {
	-webkit-filter: sepia(100%) hue-rotate(500deg) saturate(100%);
	filter: sepia(100%) hue-rotate(500deg) saturate(100%);
}

.invert {
	-webkit-filter: invert(1);
	filter: invert(1);
}

.greyscaleInvert {
	-webkit-filter: grayscale(1) invert(1);
	filter: grayscale(1) invert(1);
}

.sepia {
	-webkit-filter: sepia(1);
	filter: sepia(1);
}

.brightness {
	-webkit-filter: grayscale(1) brightness(3);
	filter: grayscale(1) brightness(3);
}

.contrast {
	-webkit-filter: grayscale(1) contrast(4);
	filter: grayscale(1) contrast(4);
}

button#snapshot2 {
	margin: 0 10px 25px 0;
	width: 110px;
}

#rm #update_video_times input {
	width: 50px;
	height: 30px;
	margin-right: 2px;
	font-size: 1rem;
}

#rm .stop_video {
	width: 75px;
	min-width: 75px;
	min-width: 75px;
	height: 28px;
}

#rm #video-edit td {
	border-right: 1px dotted #e8e8e8;
}

#rm #video-edit td:last-child {
	width: 75px;
	border-right: 0;
}

#rm .stop_video:hover {
	background-color: #d4d4d4;
}

#heatMenu {
	padding: 0;
	vertical-align: middle;
	font-size: 1rem;
}

#rm #squareMargin {
	position: relative;
	top: 40px;
	left: 0;
	right: 0;
	margin: 0;
	width: 100vw;
	z-index: 3;
}

#rm .squareWrapper {
	width: 33% !important;
}

#rm .square,
#rm .squareEmpty {
	height: 0;
	margin: 1%;
	padding-bottom: calc(100vw / 3.1223);
}

#rm #squareMarginLonger {
	position: relative;
	top: 54px;
	left: 0;
	right: 0;
	z-index: 9;
}

#rm .squareWrapperLonger {
	width: 20vw;
}

#rm #videoView {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	padding: 0;
	margin: 0 auto;
	width: 100%;
	background-color: var(--card-bg-color);
	border-bottom: 1px solid var(--border-color);
}

#rm #videoView a {
	padding: 0.25rem;
}

@media (min-width: 960px) {
	#rm #squareMarginLonger {
		top: 0;
		right: auto;
		margin: 0 auto 0 0;
		width: calc(100vw - 300px);
	}

	#rm .squareWrapperLonger {
		width: 13vw;
	}

	#rm #publishButton {
		position: fixed;
		bottom: 15px;
		right: 15px;
		width: 169px;
		height: auto;
		margin: 0;
		z-index: 99;
	}

	#rm #heatStatusWrapper {
		left: auto;
		right: 15px;
		bottom: 65px;
		width: 169px;
	}

	#rm #videoStartWidth {
		position: fixed;
		top: 0;
		left: 285px;
		width: 78px;
		height: 30px;
		z-index: 999;
	}

	#rm #videoStartTimeWrapper {
		position: absolute;
		left: 235px;
		top: 0;
		right: auto;
		z-index: 9999999999999999999;
	}

	#rm #videoStartTimeWrapper input {
		background-color: transparent;
		height: 39px !important;
	}

	#rm #videoStartDiv {
		top: 0;
		width: calc(100vw - 300px);
		height: 39px;
	}

	#rm .siblings,
	#rm #StartRecord,
	#rm #flexy {
		flex-direction: column;
	}

	#rm #flexy a,
	#rm #flexy button {
		margin-left: 0;
	}

	#rm #manualWrapper {
		top: 0;
		height: 100vh;
		width: calc(100vw - 310px);
		background-color: var(--card-bg-color);
	}

	#rm #fileWrapper {
		top: 0;
		height: 100vh;
		width: calc(100vw - 320px);
		background-color: var(--card-bg-color);
	}

	#rm #listWrapper {
		top: 0;
		height: auto;
		width: calc(100vw - 300px);
	}
}

#rm .squareSlalom,
#rm .squareEmptySlalom {
	height: 0;
	margin: 6px;
	padding-bottom: 50%;
}

#rm .square2 {
	height: 0;
	padding-bottom: 48%;
}

#rm .squareSlalom button .laneTile {
	color: var(--primary-bg-color);
}

#rm .squareEmpty button .laneTile {
	color: var(--font-color);
}

#rm .square button #status_tiles {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
}

#rm .square button #status_tiles select {
	width: 5vw;
	padding: 0;
	background-color: transparent;
	font-size: 1.5vw;
	margin-top: .5vw;
	cursor: pointer;
	border: 0;
}

#rm .square button .name-club,
#rm .squareSlalom button .name-club {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: 0;
	line-height: 1;
	padding-top: 0;
	color: var(--font-color);
	align-items: center;
	align-content: center;
}

#rm .square button:disabled .club {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#rm .square button,
#rm .squareSlalom button,
#rm .squareEmpty div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: auto;
	padding: 0;
	margin-bottom: 0;
	text-transform: none;
	letter-spacing: 0;
}

#rm .square button,
#rm .squareSlalom button {
	background-color: var(--header-footer-bg-color);
}

#rm .square .stop,
#rm .squareSlalom .stop {
	width: 100%;
	cursor: pointer;
	background-image: none;
}

#rm .squareEmpty div {
	background-color: var(--overlay-color);
	line-height: 1.25;
	width: 100%;
}

#rm .squareEmpty button:hover {
	cursor: default;
}

#rm .square button:disabled {
	opacity: 0.5;
}

#rm .square button.deactivated,
#rm .square button.deactivated:hover {
	animation: shadow-pulse 1s 1 !important;
}

#rm .squareContainer.moving {
	animation: shadow-pulse 1s 1;
}

#rm .square button:not([disabled]),
#rm .square button:not([disabled]) > .runningWrapper2,
#rm .squareSlalom button:not([disabled]) {
	transition: background-color 0.5s;
}

#rm .square button:not([disabled]).hover-effect,
#rm .squareSlalom button:not([disabled]).hover-effect {
	border: 1px solid var(--font-color);
	border-radius: 0;
}

#rm .square button:hover:not([disabled]) > div.split_times span {
	color: transparent;
}

#rm .square .result,
#rm .squareSlalom .result {
	margin-top: 0;
	font-size: 4vw;
	margin-bottom: 0;
	font-weight: normal;
}

#rm #startstop,
#rm #resetButton,
#rm #name {
	margin: 0.25rem;
}

#rm #parent2 input {
	font-size: 0.8rem;
	padding: 0 4px;
}

#rm #squareMarginLonger {
	top: 3px;
	right: auto;
	left: 200px;
	margin: 0 auto 0 0;
	width: calc(100vw - 500px);
}

#rm #deactivatedContainer {
	position: fixed;
	left: 0;
	bottom: 0;
	right: auto;
	top: 19px;
	width: 200px;
	height: 100%;
	overflow: auto;
	padding: 0.25rem 0.5rem 70px 0.5rem;
	z-index: 9;
}

#rm #deactivatedContainer .squareWrapperLonger {
	width: 100%;
	margin: 0;
	padding: 0.25rem 0.1rem;
}

#rm #deactivatedContainer .has_status > .square button .name-club {
	text-decoration: line-through !important;
}

#rm #deactivatedContainer .square {
	padding-bottom: 100px;
	margin: 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid var(--border-color);
}

#rm #deactivatedContainer .square button,
#rm #deactivatedContainer .squareSlalom button,
#rm #deactivatedContainer .squareEmpty div {
	position: relative !important;
	padding: 1rem !important;
}

#rm #deactivatedContainer .square .result,
#rm #deactivatedContainer .squareSlalom .result {
	position: relative !important;
	display: flex !important;
	flex-direction: row;
	justify-content: flex-start;
	bottom: auto;
	right: auto;
	top: auto;
	left: 0;
	line-height: 1;
	margin-top: 0;
	font-size: 1.75rem;
	color: var(--font-color) !important;
	margin-bottom: 0;
	font-weight: normal;
}

#rm #deactivatedContainer .square button .laneTile {
	top: 0;
	right: 0;
	left: auto;
	font-size: 1.25rem;
	min-width: 22px;
	width: auto;
	margin: 0;
	padding: 2px 3px 0 2px;
	color: var(--primary-bg-color);
	text-align: center;
	width: auto;
	z-index: 9;
}

#rm #deactivatedContainer .square button #status_tiles {
	display: flex;
	position: relative !important;
	top: auto;
	right: auto;
	left: auto;
	margin: 0;
	padding: 0.25rem 0;
}

#rm #deactivatedContainer .square button #status_tiles select {
	font-size: 1rem !important;
	width: 100% !important;
	height: 28px;
	padding: 0;
	margin-top: 0;
	border: 1px solid var(--border-color);
}

#rm #deactivatedContainer .square button.deactivated #status_tiles {
	display: none !important;
}

#rm #deactivatedContainer .square button .handle {
	display: none;
}

#rm #deactivatedContainer .square .club,
#rm #deactivatedContainer .squareSlalom .club {
	position: relative !important;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	bottom: auto;
	top: 0;
	left: auto;
	right: auto;
	font-size: 1rem;
	line-height: 1.1;
	width: 100%;
	padding-top: 0;
	margin: 0;
}

#rm #deactivatedContainer .square .name-club {
	position: relative !important;
	line-height: 1.1;
	top: 0;
	left: auto;
	right: auto;
	margin: 0 auto;
	padding-top: 0;
	font-size: 1rem;
}

#rm #deactivatedContainer .square .name-club > div {
	justify-content: flex-start;
	align-items: flex-start;
}

#rm #deactivatedContainer .square button.deactivated,
#rm #deactivatedContainer .square button.deactivated:hover {
	border: 0 !important;
	animation: 0 !important;
}

#rm #deactivatedContainer .square button:not([disabled]).hover-effect,
#rm #deactivatedContainer .squareSlalom button:not([disabled]).hover-effect {
	border: 0;
	border-radius: 0;
}

#rm #deactivatedContainer .square .name,
#rm #deactivatedContainer .square .last-name {
	position: relative !important;
	font-size: 1.3rem;
	color: var(--font-color) !important;
	line-height: 1.1;
	width: auto;
	padding-top: 0;
	margin: 0;
}

#rm #deactivatedContainer .square .name {
	margin-left: 0.1rem;
}

@media (min-width: 960px) {
	#rm #startstop,
	#rm #resetButton {
		margin: 0;
	}

	#rm #parent2 input {
		font-size: 1rem;
		padding: 0 10px;
	}

	#rm #startbtn,
	#rm #stopbtn,
	#rm #resetButton,
	#rm #name {
		border: 1px solid var(--border-color);
		height: auto;
	}

	#rm #startRecord #resetButton {
		margin-bottom: 1rem !important;
	}

	#rm #videoView {
		padding: 0;
		margin: 0.5rem 0;
		border: 1px solid var(--border-color);
	}

	#rm .square button .laneTile {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 2vw;
		min-width: 3.5vw;
		line-height: 1;
		padding: 0.25vw 0.5vw 0 0.5vw;
		border-right: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
		color: var(--primary-bg-color);
	}

	#rm .square .result,
	#rm .squareSlalom .result {
		margin-top: 4vw;
		font-size: 1.75vw;
		font-weight: normal;
	}

	#rm .square .last-name,
	#rm .squareSlalom .last-name {
		font-size: 1.4vw;
		font-weight: bold;
		line-height: 1;
	}

	#rm .square .name,
	#rm .squareSlalom .name {
		font-weight: normal;
		font-size: 1.4vw;
		margin-left: 0.25vw;
		line-height: 1;
	}

	#rm .square .club,
	#rm .squareSlalom .club {
		font-weight: normal;
		font-size: 1.25vw;
		line-height: 1;
		margin-bottom: 0.5vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#rm #squareMargin {
		top: -15px;
		width: calc(100vw - 300px);
	}

	#rm .squareWrapper {
		width: 33% !important;
	}

	#rm .square,
	#rm .squareEmpty {
		height: 0;
		padding-bottom: calc(100vw / 7.925);
	}
}

#rm .uk-button-danger:disabled,
#rm .uk-button-default:disabled,
#rm .uk-button-primary:disabled,
#rm .uk-button-secondary:disabled {
	color: var(--font-color) !important;
}

*:focus {
	outline: none !important;
}

@keyframes blinker {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

#rm .recording {
	background: #f0506e;
	animation: blinker 1.5s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
	border-radius: 50%;
	z-index: 999999;
	width: 20px;
	height: 20px;
	margin: 1px 5px 0 0;
}

#rm #saveTileBox {
	padding: 4rem;
	background-color: #ffffff;
	box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999999;
}

#rm .position {
	position: relative;
	line-height: 1;
	font-family: "Bebas Neue", cursive;
	font-size: 2.2rem;
	width: auto;
	padding: 2px 0;
	z-index: 999;
}

#rm #position2 {
	position: relative;
	line-height: 1;
	color: #777;
	font-family: "Bebas Neue", cursive;
	font-size: 2rem;
	width: auto;
	padding: 0;
}

#rm #timer_video {
	color: #555;
	font-family: "Bebas Neue", cursive;
	z-index: 999999999999;
}

#rm #toggleZoom {
	position: relative;
	color: #fff;
	font-family: "Bebas Neue", cursive;
	font-size: 32px;
	top: 0rem;
	right: 1.5rem;
	height: 36px;
	width: 36px;
	padding: 0 4px 3px 4px;
	background-color: #0000009c;
}

.video {
	border: 1px solid #e8e8e8;
}

#controls {
	display: none;
}
#source {
	display: none;
}

#overview {
	display: none;
}

.results {
	position: relative;
}

#results {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	width: 1200px;
}

.stack-top {
	height: 90%;
	position: absolute;
	border: solid 1px #f0506e;
	top: 5%;
	left: 600px;
	z-index: 1;
}

.finishline1,
.finishline2 {
	position: fixed;
	border-left: 4px solid #ffffff50;
	top: 65px;
	left: 49.9%;
	bottom: 30px;
	z-index: 9;
	border-radius: 3px;
}

#errorMsg {
	display: block;
	position: relative;
	margin-top: 10px;
	background: #fef4f6;
	color: #f0506e;
}

#rm tr#status_bg {
	background-color: #fff;
}

.result_input {
	font-family: "Bebas Neue", cursive;
	font-size: 1rem;
	background-color: var(--card-bg-color);
	color: var(--font-color);
	width: 42px;
	height: 28px;
	text-align: right;
	padding: 0 2px 0 0 !important;
	border: 1px solid var(--border-color);
	border-radius: 0;
}

#inputFile {
	display: none;
}

#submitFile {
	position: absolute;
	bottom: 0;
	right: 0;
}

#rm #holder {
	border: 1px solid var(--border-color);
	background-color: var(--bg-color);
	color: var(--font-color);
	overflow: auto;
	width: 100%;
	height: 200px;
	min-height: 200px;
	padding: 0.5rem;
	resize: vertical;
	font-size: 1rem;
	font-family: "Roboto Condensed", sans-serif;
	outline: none;
	margin-bottom: 0.5rem;
	box-shadow: inset 2px 2px 2px var(--selected-color);
}

#rm #holder:hover,
#rm #holder:focus {
	border: 1px solid #28baa4;
}

#rm #holder::-webkit-input-placeholder {
	height: 40%;
	color: var(--font-color);
	text-align: center;
	padding: 0.65em;
	font-family: "Roboto Condensed", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 1rem;
	background-color: var(--bg-color);
}