* {
	font-family: verdana;
	font-size : 14px;
	margin: 0px;
	padding: 0px;
}

html, body {
	height: 100%;
}

#map {
	width: 100%;
	height: 468px;
	background-color: grey;
}

.sort {
	display: block;
	color: black;
	cursor: pointer;
}

.sort:hover {
	text-decoration: none;
	color: grey;
}

.sort-arrow{
	color: grey;
	display: inline-block;
	width: 20px;
}

.link-title {
	color: black;
	cursor: pointer;
}

.link-title:hover {
	text-decoration: none;
	color: grey;
}

.main-title {
	font-size : 20px;
}

.page-title {
	font-size : 30px;
	padding-bottom: 10px;
	margin: 20px 0;
	border-bottom: 1px solid #eee;
}

.page-subtitle {
	font-size : 20px;
	padding-bottom: 10px;
	margin: 10px 0;
	border-bottom: 1px solid #eee;
}

.followed-title {
	margin: 20px 0 10px 0;
	padding-bottom: 0;
	border-bottom: none;
}

.navbar {
	position: fixed;
	background-color: #2a7f4d;
	top: 0px;
	height: 50px;
}


.starter-template {
	padding: 3rem 0;
	width : 100% !important;
	margin : auto;
	text-align: center;
}

.section-template {	
	padding: 3rem 1.5rem;
	text-align: center;
	position: absolute;
	right : 0;
	width: 80%;
}

.table-scroll-y-20 {
	display: block;
	height: 200px;
	overflow-y: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

.add-race-button {
	text-align: center;
}

.table-button {
	display : inline-block;
	padding: 0 5px; 
    margin: auto;
	width : 30px;
	border-radius : 10%;
}

.table-button:hover {
    text-decoration: none;
}

.line {
    height: 25px;
}

.clickable-row:hover {
	background-color : rgba(100,100,100,0.3) !important;
}

/* Login Form */

.form-login {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}

.form-login .checkbox {
	font-weight: 400;
}

.form-login .form-control {
	position: relative;
	box-sizing: border-box;
	height: auto;
	padding: 10px;
	font-size: 16px;
}

.form-login .form-control:focus {
	z-index: 2;
}

.form-login input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.form-login input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Add/Edit Form */

.form-add-edit {
	width: 100%;
	padding: 15px;
}


.form-add-edit .form-group label {
	width : 500px;
}


.form-add-edit .form-group input, .form-add-edit .form-group select {
	width : 500px;
}

/* Side Menu */

.nav-side-menu {
	overflow: auto;
	background-color: #2e353d;
	position: fixed;
	top: 50px;
	width: 20%;
	height: 100%;
	color: #e1ffff;
}

.nav-side-menu .brand {
	background-color: #23282e;
	line-height: 50px;
	display: block;
	text-align: center;
}

.nav-side-menu ul, .nav-side-menu li {
	list-style: none;
	line-height: 35px;
}

.nav-side-menu .menu-list ul, .nav-side-menu .menu-list li {
	cursor: pointer;
}

.nav-side-menu .menu-list ul .sub-menu li, .nav-side-menu .menu-list li .sub-menu li {
	background-color: #181c20;
	border: none;
	line-height: 28px;
	border-bottom: 1px solid #23282e;
	margin-left: 0px;
}

.nav-side-menu .menu-list ul .sub-menu li:hover, .nav-side-menu .menu-list li .sub-menu li:hover {
	background-color: #020203;
}

.nav-side-menu .menu-list ul .sub-menu li:before, .nav-side-menu .menu-list li .sub-menu li:before {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
}

.nav-side-menu li {
	padding-left: 20px;
	border-left: 3px solid #2e353d;
	border-bottom: 1px solid #23282e;
}

.nav-side-menu .menu-list ul .sub-menu li {
	margin : 0;
	padding : 0;
}

.nav-side-menu .menu-list ul .sub-menu li a {
	display: block;
	margin : 0;
	padding-left: 40px;
}

.nav-side-menu .menu-list li a {
	text-decoration: none;
	color: #e1ffff;
}

.nav-side-menu .menu-list li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

@media screen and (max-width:767px) {
	.navbar-header {
		float:				none;
	}
	
	.navbar-toggle {
		display: 			block;
	}
	
	.navbar-collapse {
		border-top: 		1px solid transparent;
		box-shadow: 		inset 0 1px 0 rgba(255,255,255,0.1);
	}
	
	.navbar-nav.guest-nav {
		background-color: 	grey;
		border-radius: 		5%;
		padding:			10px;
		float: 				right !important;
		margin: 			7.5px -15px;
	}
	
	.navbar-nav.ghest-nav>li {
		float: 				right;
	}
	
	.navbar-nav.ghest-nav>li>a {
		padding-top: 		10px;
		padding-bottom: 	10px;
	}
	
	.navbar-nav.admin-nav {
		display : 			none;
	}
	
	.navbar-collapse.collapse.in {
		display: 			block !important;
	}
	
	.collapsing {
		overflow: 			hidden !important;
	}
	
	
	.container {
		width: 				100% !important;
		margin : 			0 auto !important;
		padding : 			0 !important;
	}
	
	.row, .no-gutters {
		width: 				100vw !important;
		margin : 			0 !important;
		padding : 			0 !important;
		left:				0 !important;
		right: 				0 !important;
	}
	
	.starter-template, .section-template {
		margin : 			0 !important;
		padding:			3rem 1rem !important;
		width : 100%;
	}
	
	
	
	.nav-side-menu {
		position: 			relative !important;
		width: 				100% !important;
		margin-bottom: 		40px !important;
		line-height: 		50px !important;
	}
	
	.nav-side-menu .toggle-btn {
		cursor: 			pointer;
		position: 			absolute !important;
		left: 				0!important;
		right : 			0!important;
		height : 			50px;
		z-index: 			10 !important;
		padding: 			5px;
		color: 				#000;
		line-height: 		50px !important;
	}
	
	.nav-side-menu .brand {
		position: 			relative!important;
		text-align: 		left !important;
		padding: 			0 20px;
		line-height: 		50px !important;
		display : 			inline-block;
	}
	
	th, td {
		font-size: 			8px;
	}
	
	* {
		font-size: 			12px;
	}
	
	h3 {
		font-size: 			14px !important;
	}
	
	h2 {
		margin-top: 		50px !important;
		font-size: 			16px !important;
	}
	
	h1 {
		font-size: 			18px !important;
	}
}

@media screen and (max-width:450px) {
	.starter-template {
		padding: 3rem 0.5rem;
	}

	.section-template {
		padding: 0rem 0rem;
	}
	
	th, td {
		font-size: 			6px;
		margin: 			0 !important;
		padding: 			2px !important;
	}
	
	* {
		font-size: 			10px;
	}
	
	h3 {
		font-size: 			12px !important;
	}
	
	h2 {
		font-size: 			14px !important;
	}
	
	h1 {
		font-size: 			16px !important;
	}
}

@media screen and (min-width:768px) {
	.nav-side-menu .menu-list .menu-content {
		display: 			block;
	}
}