html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	/*font-family: 'PT Sans Narrow';*/
	font-family: Arial, sans-serif;
	font-size: 20px; /* 20px */
	background: #ffffff;
	overflow: hidden;
}

/* 1vh = 7.68px */
/* 0.13vh = 1px */

.horse {
  min-width: 4.3vh;			/* 1.8rem or 4.32vh */
  min-height: 4.3vh;		/* 1.8rem or 4.32vh */
  font-weight: bold;
  font-size: 4.8vh;			/* 2rem or 40px */
  border-radius: 3.6vh;		/* 1.5rem or 3.6vh */
}

.horse.one {
  background-color: rgb(255, 0, 0);
  color: rgb(255, 255, 255);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.horse.two {
  background-color: rgb(0, 0, 255); 
  color: rgb(255, 255, 255);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.horse.three {
  background-color: rgb(255, 128, 0); 
  color: rgb(255, 255, 255);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.horse.four {
  background-color: rgb(0, 255, 0); 
  color: rgb(0, 0, 0);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.horse.five {
  background-color: rgb(255, 0, 255); 
  color: rgb(255, 255, 255);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.horse.six {
  background-color: rgb(255, 255, 0); 
  color: rgb(0, 0, 0);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.horse.seven {
  background-color: rgb(0, 255, 255); 
  color: rgb(0, 0, 0);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.horse.eight {
  background-color: rgb(128, 0, 255); 
  color: rgb(255, 255, 255);
  padding-left: 0.96vh;
  padding-right: 0.96vh;
}

.w5-cal {
	height: 7vh;
	width: 7vh;
	line-height: 8.95vh;
	display: inline-block;
	margin-top: 0.5vh;
	border: 0.26vh solid #000000;
	border-radius: 0.7vh;
	background-color: #ffffff;
	text-align: center;
}

.w5-month {
	font-family: 'PT Sans Narrow';
	font-size: 2vh;
	height: 2vh;
	line-height: 2vh;
	border-radius: 0.7vh 0.7vh 0px 0px;
	color: #000000;
	background-color: #ffffff;	
}

.w5-date {
	font-family: 'PT Sans Narrow';
	font-weight: bold;
	font-size: 4.5vh;
	height: 4.5vh;
	line-height: 4.5vh;
	border-radius: 0px 0px 0.5vh 0.5vh;	
}

.w5-date.one {
	background-color: rgb(255, 0, 0);
	color: rgb(255, 255, 255);
}

.w5-date.two {
	background-color: rgb(0, 0, 255); 
	color: rgb(255, 255, 255);
}

.w5-date.three {
	background-color: rgb(255, 128, 0); 
	color: rgb(255, 255, 255);
}

.w5-date.four {
	background-color: rgb(0, 255, 0); 
	color: rgb(0, 0, 0);
}

.w5-date.five {
	background-color: rgb(255, 0, 255); 
	color: rgb(255, 255, 255);
}

.w5-date.six {
	background-color: rgb(255, 255, 0); 
	color: rgb(0, 0, 0);
}

.w5-date.seven {
	background-color: rgb(0, 255, 255); 
	color: rgb(0, 0, 0);
}

.w5-date.eight {
	background-color: rgb(128, 0, 255); 
	color: rgb(255, 255, 255);
}


.w5-foot-cal {
	height: 3.5vh;
	width: 3.5vh;
	line-height: 3.5vh;
	display: inline-block;
	margin-top: 0.25vh;
	border: 0.13vh solid #000000;
	border-radius: 0.5vh;
	background-color: #ffffff;
	text-align: center;
}

.w5-foot-month {
	font-family: 'PT Sans Narrow';
	font-size: 1vh;
	height: 1vh;
	line-height: 1vh;
	border-radius: 0.5vh 0.5vh 0px 0px;
	color: #000000;
	background-color: #ffffff;	
}

.w5-foot-date {
	font-family: 'PT Sans Narrow';
	font-weight: bold;
	font-size: 2.25vh;
	height: 2.25vh;
	line-height: 2.25vh;
	border-radius: 0px 0px 0.45vh 0.45vh;	
}

.w5-foot-date.one {
	background-color: rgb(255, 0, 0);
	color: rgb(255, 255, 255);
}

.w5-foot-date.two {
	background-color: rgb(0, 0, 255); 
	color: rgb(255, 255, 255);
}

.w5-foot-date.three {
	background-color: rgb(255, 128, 0); 
	color: rgb(255, 255, 255);
}

.w5-foot-date.four {
	background-color: rgb(0, 255, 0); 
	color: rgb(0, 0, 0);
}

.w5-foot-date.five {
	background-color: rgb(255, 0, 255); 
	color: rgb(255, 255, 255);
}

.w5-foot-date.six {
	background-color: rgb(255, 255, 0); 
	color: rgb(0, 0, 0);
}

.w5-foot-date.seven {
	background-color: rgb(0, 255, 255); 
	color: rgb(0, 0, 0);
}

.w5-foot-date.eight {
	background-color: rgb(128, 0, 255); 
	color: rgb(255, 255, 255);
}

.splash {
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	background: white;
	z-index: 300;
	color: black;
	text-align: center;
	opacity: 1;
}

/* The side navigation menu */
.sidenav {
	position: fixed; /* Stay in place */
	top: 0; /* Stay at the top */
	right: 0;
	height: 100%; /* 100% Full-height */
	width: 0; /* 0 width - change this with JavaScript */
	z-index: 150; /* Stay on top */
	background-color: #111; /* Black*/
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 7.2vh; /* Place content 7.2vh from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	text-align:center;
	opacity: 0.9;
}

/* The navigation menu links */
.sidenav a {
	padding: 0.96vh 0.96vh 0.96vh 32px;
	text-decoration: none;
	font-size: 3vh;
	color: #818181;
	display: block;
	transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 3vh;
	font-size: 4.32vh;
	margin-left: 6vh;
}

.header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 9.6vmin; /* 9.6vh */
	line-height: 9.6vmin; /* 9.6vh */
	background-color: #b3b3b3;
}

.lblEvent {
	font-family: 'Caveat Brush';
	font-size: 7.2vmin; /* 7.2vh */
	font-weight: Normal;
	line-height: 9.6vmin`; /* 9.6vh */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.content {
	/*margin-top: 9.6vh;*/
	width: 100%;
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4.8vh;				/* 40px */
	font-size: 3.6vh;			/* 3.6vh */
	background-color: #b3b3b3; 	/* Blue */
}

.volume-button {
	display: none;
	position: fixed;
	left: 6px;
	bottom: 6px;
	width: 7.2vh;
	height: 7.2vh;
	cursor: pointer;
	z-index: 200;
}

.video {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: 100%;
	background-color: #000000;
	background-repeat: repeat;
	background-size: cover;
	-webkit-playsinline: true;
}

/*
video::-webkit-media-controls {
	display: none !important;
}
*/			

.combobox-item,
.combobox-group {
	font-size: 3vh
}

/*
.datagrid-header-row {
	font-family: 'PT Sans Narrow';
	height: 45px;
}
*/

.datagrid-header .datagrid-cell span {
	font-family: 'PT Sans Narrow';
	font-weight: bold;
	font-size: 3.12vh; 		/* 26px */
	font-style: italic;
}

.datagrid-cell {
	font-family: 'PT Sans Narrow';
	font-weight: normal;
	font-size: 4.8vh; 		/* 2rem or var(--cellFontSize) or 40px */
	line-height: 6.6vh; 	/* 2.75rem or var(--cellLineHeight) or 55px */
}

.datagrid-body td{
	border-right:1px dotted transparent;
}

.textbox .textbox-text {
	font-size: 3.12vh;		/* 26px */
}

.icon-admin {
	background: url("../image/admin_16.png") no-repeat center center;
}

#snackbar {
	visibility: hidden;
	min-width: 26vh;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 16px;
	position: fixed;
	z-index: 200;
	left: 50%;
	bottom: 4.6vh;
	font-size: 2.04vh;
}

#snackbar.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;} 
	to {bottom: 3.6vh; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 3.6vh; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 3.6vh; opacity: 1;} 
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 3.6vh; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

/* On smaller screens, where height is less than 46vh, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 46vh) {
	.sidenav {padding-top: 1.8vh;}
	.sidenav a {font-size: 10.96vh;}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 760.96vh and up) */
@media only screen and (min-width: 760.96vh) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}