/**
 * All your custom CSS should go into this file
 */

:root {
	--main-bg-color: rgb(0, 0, 0);
	--main-txt-color: rgb(255,255,255);
	--alert-color: red;
}

body {
   padding-top: 15px;
   background-color: var(--main-bg-color);
   color: var(--main-txt-color);
   overflow: hidden; /* Hide scrollbars */
   margin-left: 20px;
   margin-right: 20px;
}

#information-for-competitors {
	font-size: 5rem;
	margin-top: 200px;
	line-height: normal;
	font-weight: bold;
}

.center{
 margin-left: auto !important;
  margin-right: auto !important;
 float: none !important;
 text-align: center;
}

.hidden{
	visibility:visible;

}

.pointable{ 
cursor: hand; cursor: pointer; 
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.scrollable {
	height: 10em;
	overflow: auto;
}

.paused{
	color:orange;
}

#timeTable td, #timeTable th{
	font-weight:bold;
	font-size:200%;
}

.lapCount{
	text-align:right !important;
}
@media only screen
and (min-device-width : 320px)
{
/* Styles */
	#time{
		font-size:5rem;
		margin: 30px 0px 40px;
	}

}
@media only screen
and (min-device-width : 768px)
{
/* Styles */
	#time{
		font-size:5rem;
		margin: 5px 0 5px 0; padding: 50px 0px 50px 0px;
	}
}

div#hint {
	display: block;
	padding: .5em;
	font-weight: bold;
	transition: height 40s, width 1s, padding 1s, visibility 5s, opacity 5s ease-out; /* TODO: this is a verrrrry ugly method  */
	opacity: 1;
	overflow: hidden;
	height: 1000px;
}
#hint.h-hide {
	padding: 0;
	opacity: 0;
	height: 0;
  }

table, th, td {
	border: 1px solid var(--main-txt-color);
}

.alert-text {
	color: var(--alert-color)
}