@font-face {
	font-family: AmazonEmberRg;
	src: url(../fonts/AmazonEmber_W_Rg.woff)
}

@font-face {
	font-family: AmazonEmberLt;
	src: url(../fonts/AmazonEmber_W_Lt.woff)
}

@font-face {
	font-family: AmazonEmberBd;
	src: url(../fonts/AmazonEmber_W_Bd.woff)
}

:root {
	--deepracer-orange-base: #ff9900;
	--deepracer-orange-light: #ffa910;
	--deepracer-orange-dark: #ef8900;
	--deepracer-purple-base: #8c59e0;
	--deepracer-purple-light: #9c69f0;
	--deepracer-purple-dark: #7c49d0;
	--deepracer-grey-base: #6c757d;
	--deepracer-grey-light: #7c858d;
	--deepracer-grey-dark: #5c656d;
	--deepracer-marine-base: #232f3e;
	--deepracer-marine-light: #333f4e;
	--deepracer-marine-dark: #131f2e;
	--deepracer-violet-base: #81318d;
	--deepracer-violet-light: #91419d;
	--deepracer-violet-dark: #71217d;
	--deepracer-yellow-base: #fdc500;
	--deepracer-yellow-light: #fdd510;
	--deepracer-yellow-dark: #fdb500;
	--deepracer-green-base: #16bf9f;
	--deepracer-green-light: #26cfaf;
	--deepracer-green-dark: #06af8f;
	--deepracer-red-base: #ff5252;
	--deepracer-red-light: #ff6262;
	--deepracer-red-dark: #ef4242;
	--deepracer-blue-base: #527fff;
	--deepracer-blue-light: #628fff;
	--deepracer-blue-dark: #426fef;
}

.dr-orange-b {
	color: var(--deepracer-orange-base)
}
.dr-orange-l {
	color: var(--deepracer-orange-light)
}
.dr-orange-d {
	color: var(--deepracer-orange-dark)
}

html,
body {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	height: 100%;
	font-family: AmazonEmberRg, Helvetica, Arial, sans-serif;
	font-size: 100%;
	box-sizing: border-box
	/*font-weight: 300;
	overflow-x: hidden;
	background-color: var(--deepracer-grey-light);
	color: var(--deepracer-grey-dark)
	*/
}

body {
	line-height: 1;
	-webkit-text-size-adjust: none;
	background: transparent;
	font-size: 19pt;
	font-weight: 300;
	line-height: 1.75em;
	color: var(--deepracer-grey-base)
}

embed {
	margin: 0;
	padding: 0;
	border: 0;
	width: -webkit-fill-available;
	/*height: -webkit-fill-available;*/
	width: -moz-available
}

embed,
#embed {
	height: 100%
}

*,
*:before,
*:after {
	box-sizing: inherit
}

.row {
	margin-left: 0px;
	margin-right: 0px
}

/* Image */
.image {
	display: inline-block;
	border: 0;
}

.image img {
	display: block;
	width: 100%
}

.image.width48 {
	width: 48px
}

.image.width48 img {
	width: 48px
}

.image.width64 {
	width: 64px
}

.image.width64 img {
	width: 64px
}

.image.width96 {
	width: 96px
}

.image.width96 img {
	width: 96px
}

.image.width128 {
	width: 128px
}

.image.width128 img {
	width: 128px
}

.image.img-circle {
	border-radius: 50%;
	border: 5px solid var(--deepracer-orange-base)
}

.image.flag {
	border: 1px solid white
}

.image.avatar.img-circle {
	width: 128px;
	height: 128px;
	background-color: #64C9FF
}

.image.avatar.img-circle.width64 {
	width: 64px;
	height: 64px;
	background-color: #64C9FF
}

/* Icons */
.icon {
	text-decoration: none
}

.icon:before {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 1.25em;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.icon>.label {
	display: none
}

.fa-icon {
	font-family: FontAwesome, AmazonEmberRg, Helvetica, Arial, sans-serif
}

.fa-refresh {
	color: var(--deepracer-purple-base);
	font-size: 18px
}

/* Form */
label {
	line-height: 15px
}

form label {
	display: block;
	text-align: left;
	margin-bottom: 0.5em;
	font-size: 12pt
}

input[type="text"],
input[type="text"]:-webkit-autofill,
input[type="email"],
input[type="email"]:-webkit-autofill,
input[type="password"],
input[type="password"]:-webkit-autofill,
select,
select:-webkit-autofill {
	/*display: block;*/
	border: 1px solid var(--deepracer-purple-dark) !important;
	background-color: white;
	width: 100%;
	border-radius: 0.35em;
	padding: 0.75em 1em 0.75em 1em;
	color: black !important
}

input[type="text"]:focus,
input[type="text"]:active,
input[type="text"]:-webkit-autofill:focus,
input[type="text"]:-webkit-autofill:active,
input[type="email"]:focus,
input[type="email"]:active,
input[type="email"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="password"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:active,
select:focus,
select:active,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
	background-color: white !important;
	box-shadow: 0 0 8px var(--deepracer-purple-dark) inset !important
}

input[type="text"].no-valid,
input[type="email"].no-valid,
input[type="password"].no-valid,
select.no-valid,
button.bs-placeholder.no-valid {
	box-shadow: 0 0 2px 1px var(--deepracer-red-base) !important;
	background: #ffdddd url('images/no-valid.png') no-repeat right !important;
	background-size: 25px !important;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="checkbox"]:disabled,
select:disabled,
button.bs-placeholder:disabled {
	opacity: .75;
	cursor: not-allowed
}

.bootstrap-select .dropdown-menu ul, 
.bootstrap-select .dropdown-menu li {
	padding-left: 0.5em;
	padding-right: 0.5em
}

/* Button */
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	position: relative;
	display: inline-block;
	border-radius: 0.35em;
	color: white;
	text-decoration: none;
	/*padding: 0.75em 2.5em 0.75em 2.5em;*/
	background-color: var(--deepracer-purple-base);
	border: 0;
	cursor: pointer;
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
	background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
	-moz-transition: background-color 0.35s ease-in-out;
	-webkit-transition: background-color 0.35s ease-in-out;
	-ms-transition: background-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-purple-dark);
	background-color: var(--deepracer-purple-light);
	color: white
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
button:focus,
.button:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-purple-light);
	background-color: var(--deepracer-purple-dark);
	color: white
}

button[role="combobox"] {
	background-color: white !important;
	background-image: none;
	color: black
}

button[role="combobox"]:active,
button[role="combobox"]:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-purple-light);
	background: rgba(255, 255, 255, 0.75)
}

select:disabled + button[role="combobox"] {
	opacity: .75
}

select:hover:disabled + button[role="combobox"] {
	cursor: not-allowed
}

input[type="button"]:hover:disabled,
input[type="checkbox"]:hover:disabled {
	cursor: not-allowed
}

.btn_green {
	background-color: var(--deepracer-green-base) !important
}

.btn_green:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-green-dark) !important;
	background-color: var(--deepracer-green-light) !important
}

.btn_green:active,
.btn_green:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-green-light) !important;
	background-color: var(--deepracer-green-dark) !important
}

.btn_yellow {
	background-color: var(--deepracer-yellow-base) !important
}

.btn_yellow:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-yellow-dark) !important;
	background-color: var(--deepracer-yellow-light) !important
}

.btn_yellow:active,
.btn_yellow:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-yellow-light) !important;
	background-color: var(--deepracer-yellow-dark) !important
}

.btn_red {
	background-color: var(--deepracer-red-base) !important
}

.btn_red:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-red-dark) !important;
	background-color: var(--deepracer-red-light) !important
}

.btn_red:active,
.btn_red:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-red-light) !important;
	background-color: var(--deepracer-red-dark) !important
}

.btn_blue {
	background-color: var(--deepracer-blue-base) !important
}

.btn_blue:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-blue-dark) !important;
	background-color: var(--deepracer-blue-light) !important
}

.btn_blue:active,
.btn_blue:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-blue-light) !important;
	background-color: var(--deepracer-blue-dark) !important
}

.btn_grey {
	background-color: var(--deepracer-grey-base) !important
}

.btn_grey:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-grey-dark) !important;
	background-color: var(--deepracer-grey-light) !important
}

.btn_grey:active,
.btn_grey:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-grey-light) !important;
	background-color: var(--deepracer-grey-dark) !important
}

.btn_circle {
	color: var(--deepracer-purple-base);
	font-size: 24pt
}

.btn_circle:hover {
	color: var(--deepracer-purple-light) !important;
	cursor: pointer
}

.btn_circle:active,
.btn_circle:focus {
	color: var(--deepracer-purple-dark) !important;
	cursor: pointer
}

input[type="checkbox"].toggle {
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 3rem;
	height: calc( 3rem / 2 );
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: calc( 3rem / 2 );
	outline: none;
	-webkit-transition: 450ms ease;
	transition: 450ms ease;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
	cursor: pointer
}

input[type="checkbox"].toggle:before, input[type="checkbox"].toggle:after {
	position: absolute;
	display: block;
	content: "";
	border-radius: 100%;
	-webkit-transition: 450ms ease, -webkit-transform 450ms ease;
	transition: 450ms ease, -webkit-transform 450ms ease;
	transition: 450ms ease, transform 450ms ease;
	transition: 450ms ease, transform 450ms ease, -webkit-transform 450ms ease
}

input[type="checkbox"].toggle:before {
	width: calc( 3rem / 2 );
	height: calc( 3rem / 2 );
	background-color: var(--deepracer-purple-base)
}

input[type="checkbox"].toggle:checked {
	background-color: var(--deepracer-purple-base);
	box-shadow: 0 0 0 3px var(--deepracer-purple-base)
}

input[type="checkbox"].toggle:checked:before {
	background-color: rgba(255, 255, 255, 0.8);
	-webkit-transform: translateX(100%);
	transform: translateX(100%)
}

/* Carousel */
.slick-arrow:before {
	color: var(--deepracer-purple-base);
	opacity: 1;
	font-size: 30px;
	width: 30px;
	height: 30px
}

.slick-arrow.slick-disabled,
.slick-arrow.slick-disabled:before {
	display: none;
	cursor: default
}

.slick-arrow:hover,
.slick-arrow:hover:before {
	color: var(--deepracer-purple-light) !important;
	opacity: 1;
	box-shadow: none
}

.slick-arrow:active:before,
.slick-arrow:focus:before {
	color: var(--deepracer-purple-dark) !important;
	opacity: 1
}

.slick-arrow:active,
.slick-arrow:focus {
	box-shadow: none
}

.slick-arrow.slick-next:before {
	margin-left: -10px
}

.slick-list {
	background-color: white;
	border-radius: 10px;
	border: 1px solid var(--deepracer-purple-base);
	box-shadow: 0 0 2px 1px var(--deepracer-grey-light)
}

.slick-track {
	display: flex;
	padding: 10px 0px
}

.slick-slide {
	margin: auto 10px auto 10px;
	padding: 10px;
}

.slick-slide h6 {
	margin-top: 20px;
	color: black
}

.slick-slide:focus {
	outline: 0
}

.slick-slide img {
	width: 100%
}

.slick-slide.slick-current {
	border-radius: 10px;
	border: 2px dashed var(--deepracer-purple-base)
}

.slick-dots li button:before {
	color: white;
	font-size: 12px;
	opacity: 1
}

.slick-dots {
	bottom: -35px
}

.slick-dots li button:active,
.slick-dots li button:focus,
.slick-dots li button:hover,
.slick-dots li.slick-active button:before {
	color: var(--deepracer-purple-dark);
	box-shadow: none
}

.slick-dots li button:hover:before {
	color: var(--deepracer-purple-light);
	box-shadow: none
}

/* Header */
#header {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	background: var(--deepracer-marine-base) url("images/overlay.png");
	box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1);
	color: white;
	height: 100%;
	left: 0;
	overflow-y: auto;
	position: fixed;
	text-align: right;
	top: 0;
	width: 375px
}

#header .top {
	-moz-flex-grow: 1;
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1
}

#header .bottom {
	-moz-flex-shrink: 0;
	-webkit-flex-shrink: 0;
	-ms-flex-shrink: 0;
	flex-shrink: 0;
	padding: 1.5em 0 0.75em 0
}

#header .logo {
	position: relative;
	margin: 1.25em 1.0em 1.0em 1.0em;
	min-height: 64px;
	cursor: default
}

#header .logo h1 {
	position: relative;
	color: white;
	font-weight: 600;
	font-size: 1em;
	line-height: 1em;
	margin-left: 25%
}

#header .logo p {
	position: relative;
	display: block;
	font-size: 0.6em;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.25em;
	margin: 0.5em 0 0 25%
}

#header .logo .image {
	position: absolute;
	left: 0;
	top: 0
}

#header .navig ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

#header .navig ul li {
	padding-left: 0;
}

#header .navig ul li a {
	display: block;
	padding: 0.5em 1.5em 0.5em 1.5em;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	outline: 0;
	border: 0;
	-moz-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
}

#header .navig ul a:hover {
	color: white;
	background-color: rgba(0, 0, 0, 0.15)
}

#header .navig ul li a span {
	position: relative;
	display: block;
	font-size: 0.8em;
	text-align: left
}

#header .navig ul li a span:before {
	position: absolute;
	right: 0;
	color: #41484c;
	text-align: center;
	width: 1.25em;
	line-height: 1.75em
}

#header .navig ul li a.active {
	background: rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.125);
	color: white
}

#header .navig ul li a.active span:before {
	color: var(--deepracer-orange-base)
}

#header .navig ul li ul li a {
	padding: 0.2em 1.5em 0.2em 2em
}

#header .navig ul li ul li a span {
	font-size: 0.7em;
	margin-left: 1em
}

#header .navig ul li ul li a span:before {
	width: 2em;
	margin-top: 2px
}

#header ul.icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
	font-size: 0.8em;
	text-align: center
}

#header ul.icons li {
	display: inline-block;
	padding-left: 0
}

#header ul.icons a {
	/*display: inline-block;*/
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border: 0;
	color: #41484c;
	-moz-transition: color 0.35s ease-in-out;
	-webkit-transition: color 0.35s ease-in-out;
	-ms-transition: color 0.35s ease-in-out;
	transition: color 0.35s ease-in-out
}

#header ul.icons a:hover {
	color: white;
}

.fa-facebook {
    padding:10px 13px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: var(--deepracer-marine-base)
}

.fa-facebook:hover {
    background-color: #3d5b99
}

.fa-twitter {
    padding:10px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: var(--deepracer-marine-base)
}

.fa-twitter:hover {
    background-color: #00aced
}

.fa-youtube {
    padding:10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: var(--deepracer-marine-base)
}

.fa-youtube:hover {
    background-color: #e64a41
}

.fa-linkedin {
    padding:10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: var(--deepracer-marine-base)
}

.fa-linkedin:hover {
    background-color: #0073a4
}

.fa-github {
    padding:10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: var(--deepracer-marine-base)
}

.fa-github:hover {
	background-color: #5a2e7f
}

/* Footer */
/*
#footer {
	margin-left: 375px;
	text-align: center;
	background-color: #dce3e2;
	padding: 3em 0 4em 0;
	box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
	font-size: 0.8em
}

#footer .copyright {
	cursor: default;
	margin: 0
}

#footer .copyright li {
	display: inline-block;
	line-height: 1em;
	border-left: solid 1px rgba(128, 128, 128, 0.35);
	padding: 0 0 0 0.5em;
	margin: 0 0 0 0.5em
}

#footer .copyright li:first-child {
	border-left: 0;
	padding-left: 0;
	margin-left: 0
}
*/

/* Modal */
.modal-content {
	background: var(--deepracer-marine-base) url("images/overlay.png");
	border: 2px solid var(--deepracer-orange-base);
	border-radius: .6rem
}

.modal-header {
	border-bottom: 1px solid var(--deepracer-orange-light);
	color: var(--deepracer-orange-base)
}

.modal-body {
	color: white;
	font-size: 14pt
}

.modal-footer {
	border: none
}

.btn-modal {
	background-color: var(--deepracer-orange-base);
	border: 0;
	color: white
}

.btn-modal:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-orange-dark);
	background-color: var(--deepracer-orange-light);
	border: 0;
	color: white
}

.btn-modal:active,
.btn-modal:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-orange-light);
	background-color: var(--deepracer-orange-dark);
	border: 0;
	color: white
}

.btn-modal-close {
	background-color: var(--deepracer-grey-base);
	border: 0;
	color: white
}

.btn-modal-close:hover {
	box-shadow: 0 0 2px 1px var(--deepracer-grey-dark);
	background-color: var(--deepracer-grey-light);
	border: 0;
	color: white
}

.btn-modal-close:active,
.btn-modal-close:focus {
	box-shadow: 0 0 2px 1px var(--deepracer-grey-light);
	background-color: var(--deepracer-grey-dark);
	border: 0;
	color: white
}

/* Main */
#main {
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	/* padding: 1em 0em 2em 0em;*/
	box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
	text-align: center;
	background-color: #000000;
	background-image: url("../images/DeepRacer-Banner1.png");
	background-size: cover;
	/*height: -webkit-fill-available;*/
	height: 100%
}

#main.expanded {
	margin: 0 !important
}

/* Main Container */
.main_container {
	padding: 1em 0em 2em 0em;
	text-align: center;
	overflow-x: hidden
}

/* Main Area */
.main_area {
	border-radius: 10px;
	margin-top: 1em
}

hr {
	border: 1px solid var(--deepracer-orange-base)
}

/* Panel */
.panel {
	background: var(--deepracer-marine-base);
	padding: .5em;
	border-radius: 10px;
	/*margin: 0em 1em;*/
	border: 1px solid var(--deepracer-grey-base)
}

.panel-transparency {
	background: rgba(35, 47, 62, 0.7)
}

.panel-heading {
	margin-bottom: 1em;
	color: white
}

.panel-body {
	font-size: 14px;
	color: white
}

.panel h1 {
	font-size: 50px;
	font-weight: bold;
	color: var(--deepracer-orange-base);
	line-height: 1.5em
}

.panel h2 {
	font-size: 30px;
	font-weight: bold;
	color: var(--deepracer-orange-base);
	line-height: 1.5em
}

.panel h3 {
	font-size: 20px;
	font-weight: bold;
	color: var(--deepracer-orange-base);
	line-height: 1.5em
}

.panel h4 {
	font-size: 16px;
	font-weight: bold;
	color: var(--deepracer-orange-base);
	line-height: 1.5em
}

.panel p {
	font-size: 18px
}

.tab {
	padding: 0.5em 0em 0.5em 0em
}

.tab:hover {
	cursor: pointer
}

.indicator-active {
	height: 4px;
	background: var(--deepracer-purple-base)
}

.indicator-no-active {
	height: 4px;
	background: #88868b
}

div.dropdown.bootstrap-select.form-control {
	background: unset
}

a[id*="collapse"] {
	color: white !important;
	font-size: 10pt;
	cursor: pointer;
	float: right;
	padding: 0 0.5em 0 0

}

/* Stopwatches */
.stopwatch-session {
	color: white;
	font-size: 50px
}

.stopwatch-lap {
	color: white;
	font-size: 80px;
	line-height: initial
}

/* Cards */
.cards {
	display: flex;
	flex-flow: row wrap
}

.card {
	margin: 10px;
	padding: 10px;
  	width: calc((100% / 5) - 20px);
	transition: all 0.2s ease-in-out;
	border-radius: 10px;
	background-color: var(--deepracer-violet-base);
	color: white !important;
	font-size: 18px
}

.card.wide {
	margin: 5px;
	padding: 5px;
	width: 100%
}

@media screen and (max-width: 1620px) {
	.card {
		width: calc((100% / 5) - 20px)
	}
}

@media screen and (max-width: 1320px) {
	.card {
		width: calc((100% / 4) - 20px)
	}
}

@media screen and (max-width: 1044px) {
	.card {
		width: calc((100% / 3) - 20px)
	}
}

@media screen and (max-width: 736px) {
	.card {
		width: calc((100% / 2) - 20px)
	}
}

@media screen and (max-width: 576px) {
	.card {
		width: 100%
	}
}

.card.flip {
	transition: 1s;
	/*transform-style: preserve-3d*/
}

.card.flip.is-flipped {
	transform: rotateX(180deg)
}

/*.card.flip .front,
.card.flip .back {
	backface-visibility: hidden
}*/

.card.flip .back {
	transform: rotateX(180deg);
	margin-bottom: auto;
	margin-top: auto
}

.card.green {
	background-color: var(--deepracer-green-base)
}

.card.red {
	background-color: var(--deepracer-red-base)
}

.card:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 0 0 2px 1px var(--deepracer-violet-dark);
	background-color: var(--deepracer-violet-light);
	cursor: pointer
}

.card:active,
.card:focus {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 0 0 2px 1px var(--deepracer-violet-light);
	background-color: var(--deepracer-violet-dark);
	cursor: pointer
}

.card.green:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 0 0 2px 1px var(--deepracer-green-dark);
	background-color: var(--deepracer-green-light);
	cursor: pointer
}

.card.green:active,
.card.green:focus {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 0 0 2px 1px var(--deepracer-green-light);
	background-color: var(--deepracer-green-dark);
	cursor: pointer
}

.card.red:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 0 0 2px 1px var(--deepracer-red-dark);
	background-color: var(--deepracer-red-light);
	cursor: pointer
}

.card.red:active,
.card.red:focus {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 0 0 2px 1px var(--deepracer-red-light);
	background-color: var(--deepracer-red-dark);
	cursor: pointer
}

.card h3 {
	color: white;
	font-size: 25px;
	margin-bottom: 5px
}

.card h6 {
	font-size: 14px;
	text-align: left;
	line-height: 1.5em
}

.card-stats {
    position: relative;
	display: block;
	border: 2px solid var(--deepracer-orange-base);
	background: var(--deepracer-marine-base);
	color: var(--deepracer-orange-base);
	font-size: 26px;
	margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	transition: all .3s ease-in-out
}

.card-stats p {
	color:white;
	font-size: 16px;
	line-height: 1em
}

.echart {
    position: relative;
	display: block;
	border: 2px solid var(--deepracer-orange-base);
	background: var(--deepracer-marine-base);
	color: var(--deepracer-orange-base);
	font-size: 26px;
	margin-bottom: 20px;
    padding-bottom: 5px;
	border-radius: 5px
}

/* LeaderBoard */
.m-leaderboard-items {
	margin: 0 auto
}

.m-leaderboard-items .m-header,
.m-leaderboard-items .m-row {
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	border-radius: 10px
}

.m-leaderboard-items .m-header>div,
.m-leaderboard-items .m-row>div {
	padding: 15px 10px;
	text-align: center
}

.m-leaderboard-items .m-header>div:nth-child(1),
.m-leaderboard-items .m-row>div:nth-child(1) {
	width: 15%
}

.m-leaderboard-items .m-header>div:nth-child(2),
.m-leaderboard-items .m-row>div:nth-child(2) {
	width: 15%;
}

.m-leaderboard-items .m-header>div:nth-child(3),
.m-leaderboard-items .m-row>div:nth-child(3) {
	text-align: left;
	width: 44%;
	margin-right: auto
}

.m-leaderboard-items .m-header>div:nth-child(4),
.m-leaderboard-items .m-row>div:nth-child(4) {
	display: block;
	width: 26%;
}

.m-leaderboard-items .m-header>div {
	padding: 5px 10px;
	color: var(--deepracer-orange-base)
}

.m-leaderboard-items .m-body {
	overflow-y: auto
}

.m-leaderboard-items .m-row {
	margin-bottom: 5px;
	background: linear-gradient(90deg, #405666 0, #3d246b);
	opacity: .75;
	color: white
}

.m-leaderboard-items.m-initial .m-row {
	opacity: 1
}

.m-leaderboard-items.m-initial .m-row:nth-child(n+1):nth-child(-n+3) {
	margin-bottom: 10px
}

.m-leaderboard-items.m-initial .m-row:nth-child(n+1):nth-child(-n+3)>div:nth-child(-n+3) {
	color: var(--deepracer-marine-base)
}

.m-leaderboard-items.m-initial .m-row:nth-child(1) {
	background: linear-gradient(90deg, #fbdf47 0, #a66103)
}

.m-leaderboard-items.m-initial .m-row:nth-child(2) {
	background: linear-gradient(90deg, #cacacd 0, #64656b)
}

.m-leaderboard-items.m-initial .m-row:nth-child(3) {
	background: linear-gradient(90deg, #fac07b 0, #8f6347)
}

@media screen and (max-width:736px) {

	.m-leaderboard-items .m-header div:nth-child(n+3),
	.m-leaderboard-items .m-row div:nth-child(n+3),
	.m-leaderboard-items .m-header div:nth-child(1),
	.m-leaderboard-items .m-row div:nth-child(1),
	.m-leaderboard-items .m-header div:nth-child(2),
	.m-leaderboard-items .m-row div:nth-child(2) {
		font-size: 16px
	}

}

@media screen and (max-width: 576px) {

	.m-leaderboard-items .m-header div:nth-child(n+3),
	.m-leaderboard-items .m-row div:nth-child(n+3),
	.m-leaderboard-items .m-header div:nth-child(1),
	.m-leaderboard-items .m-row div:nth-child(1),
	.m-leaderboard-items .m-header div:nth-child(2),
	.m-leaderboard-items .m-row div:nth-child(2) {
		font-size: 14px
	}

}

#expandToggle .toggle {
	font-family: FontAwesome;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: white;
	font-size: 18px;
	line-height: 2.25em;
	background: rgba(128, 136, 144, 0.5);
	border-radius: 0.35em;
	text-align: center;
	position: absolute;
	left: 0.5em;
	top: 0.5em;
	display: block;
	width: 3em;
	height: 2.25em;
	line-height: 2.25em
}

#expandToggle .toggle:before {
	content: '\f065';
}

#expandToggle .toggle.compress:before {
	content: '\f066';
}

/* Wide */
@media screen and (min-width: 1045px) and (max-width: 6000px) {

	body,
	input,
	select {
		font-size: 17pt
	}

	#header {
		width: 300px
	}

	#footer {
		margin-left: 300px
	}

	#main {
		margin-left: 300px
	}

}

/* Normal */
@media screen and (min-width: 1045px) and (max-width: 1620px) {

}

/* Narrow */
@media screen and (min-width: 1045px) and (max-width: 1320px) {

	body,
	input,
	select {
		font-size: 16pt
	}

	.container {
		padding: 0 2em 0 2em
	}

	ul.icons li a {
		width: 1.75em
	}

	#header {
		width: 20%
	}

	#logo .image {
		position: relative;
		margin: 0 0 0.5em 0
	}

	#nav ul li a {
		font-size: 0.8em;
		padding-top: 0.5em;
		padding-bottom: 0.5em
	}

	/*
	#nav ul li a span {
		padding-right: 2.25em;
	}
	*/

	#nav ul li a span:before {
		left: 100%;
		margin-left: -1.25em;
		line-height: 2.25em
	}

	#nav ul li ul li a span:before {
		margin-left: -1.75em
	}

	#footer {
		margin-left: 20%
	}

	#main {
		margin-left: 20%
	}

}

/* Narrower */
#headerToggle {
	display: none;
}

@media screen and (max-width: 1044px) {

	html,
	body {
		overflow-x: hidden
	}

	body,
	input,
	select {
		font-size: 16pt
	}

	header br {
		display: none
	}

	.container {
		padding: 0 2em 0 2em
	}

	ul.icons a {
		width: 1.75em;
		font-size: 1.25em
	}

	#header {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translateX(-275px);
		-webkit-transform: translateX(-275px);
		-ms-transform: translateX(-275px);
		transform: translateX(-275px);
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		-webkit-overflow-scrolling: touch;
		display: block;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width: 275px;
		z-index: 10002;
		width: 275px;
		/*background: #222729 url("images/overlay.png");*/
		box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.125)
	}

	#header .top {
		position: relative
	}

	#header .bottom {
		border-top: solid 1px rgba(255, 255, 255, 0.05);
		box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15);
		padding-top: 2em;
		margin-top: 2em;
		position: relative
	}

	#logo {
		margin: 1.5em 1.25em 1.25em 1.25em
	}

	#nav ul li a {
		padding: 0.5em 1.25em 0.5em 1.25em
	}

	#headerToggle {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 2.25em;
		left: 0;
		position: fixed;
		top: 0;
		width: 3.25em;
		z-index: 10001
	}

	#headerToggle .toggle {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		outline: 0;
		border: 0
	}

	#headerToggle .toggle:before {
		font-family: FontAwesome;
		text-decoration: none;
		font-style: normal;
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: '\f0c9';
		color: white;
		font-size: 18px;
		line-height: 2.25em;
		background: rgba(128, 136, 144, 0.5);
		border-radius: 0.35em;
		text-align: center;
		position: absolute;
		left: 0.5em;
		top: 0.5em;
		display: block;
		width: 3em;
		height: 2.25em;
		line-height: 2.25em
	}

	body.header-visible #main {
		-moz-transform: translateX(275px);
		-webkit-transform: translateX(275px);
		-ms-transform: translateX(275px);
		transform: translateX(275px)
	}

	body.header-visible #headerToggle {
		-moz-transform: translateX(275px);
		-webkit-transform: translateX(275px);
		-ms-transform: translateX(275px);
		transform: translateX(275px)
	}

	body.header-visible #header {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}

	#footer {
		margin-left: 0
	}

	#main {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		padding-bottom: 1px;
		margin-left: 0
	}

	.panel h1 {
		font-size: 40px;
	}
	
	.panel h2 {
		font-size: 30px;
	}
	
	.panel h3 {
		font-size: 22px;
	}
	
	.panel p {
		font-size: 16px
	}

}

/* Mobile */
@media screen and (max-width: 736px) {

	body,
	input,
	select {
		font-size: 14pt
	}

	.container {
		padding: 0 15px 0 15px
	}

	ul.icons a {
		width: 2em;
		font-size: 1.25em
	}

	#footer .copyright li {
		display: block;
		line-height: 1.25em;
		border: 0;
		padding: 0;
		margin: 1em 0 0 0
	}

	#footer .copyright li:first-child {
		margin-top: 0
	}

	.panel h1 {
		font-size: 32px;
	}
	
	.panel h2 {
		font-size: 24px;
	}
	
	.panel h3 {
		font-size: 18px;
	}
	
	.panel p {
		font-size: 14px
	}

}