@font-face {
	font-family: openSans;
	src: url(Open_Sans/OpenSans-Regular.ttf);
}


:root {
	--main-bg-color: white;
	--login-bg-color: #f1f1f1;
	--main-txt-color: #111111;
	--header-bg-color: #d10a10;
	--menu-bg-color: var(--header-bg-color);
	--menu-hover-color: #aa090d;
	--menu-txt-color: white;
	--menu-hamburger-color: white;
	--table-header-color: var(--main-bg-color);
	--table-header-txt-color: var(--main-txt-color);
	--table-odd-row-color: #f4f4f4;
	--table-even-row-color: #e6e6e6;
	--table-highlighted-row-color: #d1d1d1;
	--body-color: var(--table-even-row-color);
	--input-color: white;
	--border-color: #333333;
	--button-color: #333333;
	--button-txt-color: white;
	--warning-txt-color: var(--header-bg-color);
	--border-radius: 3px;
	--rank-up-arrow-color: green;
	--rank-down-arrow-color: red;
	--rank-arrow-size: 7px;
}


html {
	box-sizing: border-box;
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	font-family: openSans;
}

*, *:before, *:after {
	box-sizing: border-box;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	background-color: var(--main-bg-color);
}

header {
	position: relative;
	background-color: var(--header-bg-color);
	width: 100%;
	height: 40px;
}

 a {
	color: var(--main-txt-color);
	margin-left: 3px;
	margin-right: 3px;
 }

h3 {
	margin-top: 5px;
	margin-bottom: 5px;
}

h4 {
	margin-top: 5px;
	margin-bottom: 5px;
}

p {
	margin-bottom: 5px;
}

#entire-page {	
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	overflow-x: hidden;
	justify-content: flex-start;
}

.menu {
	position: relative;
	display: none;
	background-color: var(--menu-bg-color);
	min-height: 100vh;
	top: 0;
	bottom: 0;
	padding: 0;
	margin: 0;
	min-width: 50%;
}

#right-menu-wider {
	width: 80%;
	min-width: 80%;
	padding-top: 40px;
}

#center {
	width: 100%;
	min-width: 100%;
}

#center > div, #center > table, #center > form {
	max-width: 800px;
	margin: 0 auto;
}

.content, .content-login {
	background-color: var(--main-bg-color);
	padding: 10px;
}

.menu-button {
	display: block;
	position: absolute;
	width: 30px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	top: 0;
	z-index: 4;
	cursor: pointer;
}

.menu-button span {
	display: block;
	position: relative;
	top: 8px;
	width: 100%;
}

#main-menu-button {
	left: 0;
}

#right-menu-button {
	right: 0;
}

#main-menu-button span {
	left: 5px;
	height: 5px;
	border-radius: 3px;
	margin-bottom: 4px;
	background-color: var(--menu-hamburger-color);
}

#right-menu-button span {
	left: auto;
	right: 5px;
	height: 24px;
	border-radius: 12px;
	border: 5px solid var(--menu-hamburger-color);
}

.menu ul {
	width: 100%;
	padding-bottom: 43px;
 	list-style-type: none;
}

.menu li {
	width: 100%;
}

.menu > ul > li > ul > a:active, .menu > ul > li > ul > a:focus {
	outline: none;
	border: 0;
}

.menu > ul > li > ul > a > li {
	padding: 10px;
	border-bottom: 1px solid var(--menu-hover-color);
}

.menu > ul > li > ul > a > li:hover {
	background-color: var(--menu-hover-color);
}

.menu a {
	color: var(--menu-txt-color);
	text-transform: capitalize;
	text-decoration: none;
	margin-left: 0;
	margin-right: 0;
}

.race-select {
	position: relative;
	width: 100%;
	height: 100%;
}

.race-select > div {
	position: relative;
	width: 100%;
	min-width: 100%;
	color: var(--menu-txt-color);
	padding: 10px;
	cursor: pointer;
	text-align: right;
	text-transform: capitalize;
	border-bottom: 1px solid var(--menu-hover-color);
}

.race-select > div:hover {
	background-color: var(--menu-hover-color);
}

.track-img {
	width: 100%;
}

table {
	display: table;
	color: var(--main-txt-color);
	border: 0px solid var(--border-color);
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: smaller;
	border-spacing: 0;
}

.personal_stats td {
  border: 0;
}

.personal_stats > tbody > tr > td:first-child {
  padding-left: 10px;
	text-align: left;
}

.personal_stats > tbody > tr > td:last-child {
	padding-right: 10px;
}

.personal_stats > tbody > tr > td {
	text-align: center;
}

.personal_stats > tbody > tr.subheader > td {
	font-weight: 600;
}

.table-2-coloms > tbody > tr > td:first-child {
  width: 65%;
}

.table-2-coloms > tbody > tr > td {
  width: 35%;
}

.table-3-coloms > tbody > tr > td:first-child {
  width: 37%;
}

.table-3-coloms > tbody > tr > td:nth-child(2) {
  width: 42%;
}

.table-3-coloms > tbody > tr > td:nth-child(3) {
  width: 21%;
}

.table-4-coloms > tbody > tr > td:first-child {
  width: 37%;
}

.table-4-coloms > tbody > tr > td {
  width: 21%;
}

tr {
	margin: 0;
	padding: 0;
	border: 0;
}

tr:nth-child(odd) {
	background-color: var(--table-odd-row-color);
}

tr:nth-child(even) {
	background-color: var(--table-even-row-color);
}

tr:first-child {
	font-weight: bold;
	font-size: large;
	background-color: var(--table-header-color);
	color: var(--table-header-txt-color);
	text-align: center;
	text-transform: uppercase;
}

td {
	margin: 0;
	padding: 6px 6px;
	border: 0px solid var(--border-color);
	vertical-align: text-top;
}

.rank {
	text-align: center;
}

.points {
	text-align: right;
	padding-right: 30px;
}

.race-result > tbody > tr:nth-child(4n + 0) {
	background-color: var(--table-odd-row-color);
}

.race-result > tbody > tr:nth-child(4n + 1) {
	background-color: var(--table-odd-row-color);
}

.race-result > tbody > tr:nth-child(4n + 2) {
	background-color: var(--table-even-row-color);
}

.race-result > tbody > tr:nth-child(4n + 3) {
	background-color: var(--table-even-row-color);
}

.race-result > tbody > tr:first-child {
	background-color: var(--table-header-color);
}

.race-result > tbody > tr > td:nth-child(1) {
	width: 10%;
}

.race-result > tbody > tr > td:nth-child(2) {
	width: 75%;
}

.race-result > tbody > tr > td:nth-child(3) {
	width: 15%;
}


.result-team {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
}

.result-team > tbody > tr {
	background-color: inherit;
	font-weight: normal;
	font-size: smaller;
	text-transform: none;
}

.result-team > tbody > tr > td {
	padding: 0;
	margin: 0;
	border: 0;
	text-align: right;
	width: 10%;
}

.result-team > tbody > tr > td:first-child {
	padding: 0;
	margin: 0;
	border: 0;
	text-align: left;
	width: auto;
}


.driver-race-results td {
	width: 15%;
	text-align: center;
}

.driver-race-results td:first-child {
	width: 50%;
	text-align: inherit;
}

.driver-race-results td:last-child {
	width: 20%;
}

.driver-race-results tr:nth-child(2) {
	text-transform: uppercase;
	font-weight: bold;
}


.driver-overall-results td {
	width: 15%;
	text-align: center;
}

.driver-overall-results td:first-child {
	width: 10%;
}

.driver-overall-results td:nth-child(2) {
	width: 40%;
	text-align: inherit;
}

.driver-overall-results td:last-child {
	width: 20%;
}

.driver-overall-results tr:nth-child(2) {
	text-transform: uppercase;
	font-weight: bold;
}


.rules-race-points td {
	text-align: center;
	vertical-align: middle;
	width: 15%;
}

.rules-race-points td:first-child {
	width: 10%;
}

.rules-race-points tr:nth-child(2) td {
	text-transform: capitalize;
}

.rules-pole-points td:last-child {
	text-align: center;
}


.team-select {
	display: block;
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	font-size: smaller;
	color: var(--main-txt-color);
    background-color: var(--body-color);
	border: 0px solid var(--border-color);
}

.team-select div {
	position: relative;
	padding: 3px;
}

.heading {
	font-weight: bold;
	font-size: large;
	background-color: var(--table-header-color);
	color: var(--table-header-txt-color);
	text-align: center;
	text-transform: uppercase;
	padding: 7px;
}

.team-select .component-header {
	text-align: left;
	font-weight: bold;
	border: 0;
	font-size: small;
	text-transform: capitalize;
}

.valuta {
	text-align: right;
}

.custom-select-box {
	width: 100%;
	cursor: pointer;
	border: 0px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--input-color);
	padding: 0;
	margin: 0;
}

.custom-select-box:focus {
	outline: none;
}

.selected-component {
	display: flex;
	flex-wrap: no-wrap;
	width: 100%;
	justify-content: flex-start;
	align-items: baseline;
}

.selected-component div {
	margin: 0;
	padding: 0;
}

.selected-component > div {
	width: 38%;
	margin: 0;
	font-weight: bold;
	font-size: smaller;
	text-transform: capitalize;
}

.selected-component > div span {
	padding: 1px;
	padding-left: 6px;
	padding-right: 6px;	
	border-radius: var(--border-radius);
	border-width: 1px;
	border-style: dotted;
	border-color: transparent;
}

.selected-component > div + div {
	width: 27%;
	font-size: smaller;
	font-weight: lighter;
}

.selected-component > div + div + div {
	width: 27%;
	text-align: right;
	font-size: smaller;
	font-weight: lighter;
}

.arrow-down {
	position: absolute;
	display: block;
	right: 5px;
	top: 10px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid black;
}

.rank-change {
  font-size: x-small;
  text-align: center;
  vertical-align: middle;
}

.rank-arrow-down {
  width: 0;
	height: 0;
  position: relative;
  display: inline-block;
  margin-right: 5px;
  border-left: var(--rank-arrow-size) solid transparent;
	border-right: var(--rank-arrow-size) solid transparent;
	border-top: var(--rank-arrow-size) solid var(--rank-down-arrow-color);
}

.rank-arrow-up {
  width: 0;
	height: 0;
  position: relative;
  display: inline-block;
  margin-right: 5px;
  border-left: var(--rank-arrow-size) solid transparent;
	border-right: var(--rank-arrow-size) solid transparent;
	border-bottom: var(--rank-arrow-size) solid var(--rank-up-arrow-color);
}

.rank-unchanged {
  display: none;
}

tr.current_player > td:first-child {
  border-left: 8px solid var(--menu-bg-color);
}

input {
	height: 26px;
	width: 175px;
	max-width: 100%;
	background-color: var(--input-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding-left: 5px;
}

input.poletime {
	width: 100px;
	border: 0px solid var(--border-color);
	padding-left: 10px;
}

input[type=submit], input[type=reset] {
	margin-top: 20px;
	margin-bottom: 5px;
    display: inline-block;
	height: 30px;
	cursor: pointer;
	padding-left: 0;
	background-color: var(--button-color);
	color: var(--button-txt-color);
	border: 0px solid var(--border-color);
	text-transform: uppercase;
	font-size: 11px;
	-webkit-appearance: none;
}

#warning {
	display: block;
	color: var(--warning-txt-color);
	margin-bottom: 10px;
}


.race-info {
	position: relative;
	width: 100%;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.race-info > table > * {
	font-size: smaller;
	text-transform: capitalize;
}

.race-info > table tr:first-child > td {
	padding: 2px;
}

.custom-select-box > .dropdown {
	display: none;
	position: relative;
	top: 10px;
	width: 100%;
	height: 100%;
	padding: 3px;
	margin: 3px;
	font-size: smaller;
	padding: 0;
	padding-bottom: 10px;
}

.custom-select-box > .dropdown > div {
	display: flex;
	flex-wrap: no-wrap;
	justify-content: flex-start;
	align-items: baseline;
}

.custom-select-box > .dropdown > div > div {
	width: 45%;
}

.custom-select-box > .dropdown > div > div + div{
	width: 24%;
}

.custom-select-box > .dropdown > div > div + div + div{
	width: 25%;
}

.custom-select-box > .dropdown > div:hover {
	background-color: var(--table-header-color);
}

.custom-select-box > .dropdown > div:focus {
	background-color: var(--table-header-color);
}

#registration_form > input {
	display: block;
	margin-bottom: 10px;
}

input[type=checkbox] {
	width: 13px;
	vertical-align: middle;
}


label {
	vertical-align: middle;
}

label.questions {
	vertical-align: middle;
	margin-left: 0px;
}

ul {
	list-style-type: square;
	list-style-position: inside;
}

select {
	height: 26px;
	width: 175px;
	max-width: 100%;
	background-color: var(--input-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding-left: 5px;
}

textarea {
	width: 100%;
	background-color: var(--input-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

.race-form > img {
	width: 500px;
}

.race-form > input {
	width: 250px;
}

.race-form > select {
	width: 250px;
}

.race-form > input[type=date] {
	width: 150px;
}

.race-form > input + select {
	width: 46px;
}

.race-form > input + select + select {
	width: 46px;
}

.race-form > label {
	display: inline-block;
	text-align: right;
	margin-right: 10px;	
	width: 200px;
}

.add-input-button {
  width: 40px;
  margin-left: 10px;
  padding: 0;
}

@media (min-width: 800px) {

.menu {
	min-width: 300px;
}

#right-menu-wider {
	min-width: 400px;
}

body.login {
	background-color: var(--login-bg-color);
}

.content-login {
	border-top: 20px solid var(--login-bg-color);
}

}