body {
  background-color: #216b21;
  color: white;
  font-family: helvetica, arial, sans-serif;
  margin: 0;
}

a { text-decoration: none; }
a:active  { color: white; }
a:link    { color: #ccc; }
a:visited { color: #ccc; }
a:hover   { color: white; }

hr {
  color: #72AE72;
  background-color: #72AE72;
  height: 1px;
  margin: 1rem 0;
  border: 0px;
}

.box hr {
  margin: 2rem 0;
}

.box.light hr {
  color: #060;
  background-color: #060;
}

.no-thanks { display: none; }

.ddiv {
  color: #e0f0e0;
  width: 816px;
}

.ddiv hr {
  clear: both;
}

.ddiv strong, .ddiv b { color: white; }

.box {
  margin: 0 0 1.5em 0;
  padding: 0 2%;
  overflow: hidden;
}

.box.padded {
  padding: 0.5rem 2%;
}

.dark {
  background: #115b11;
  border: 1px solid #0e590e;
}

.light {
  background: #317b31;
  border: 1px solid #337d33;
}

/* --- current race in welcome --- */

.current-race {
  margin-bottom: 0;
  margin-top: 2px;
  padding-bottom: 1rem;
}

.xcr-info > * { border: 1px dashed yellow; }

.cr-info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.cr-status {
  margin: 1rem 0;
}

.cr-track {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 1rem;
}

.cr-track-preview {
  display: block;
  margin: 0 auto;
}

.cr-track-preview img {
  display: block;
  width: 10rem;
}

.cr-track-details {
  flex: 1;
  min-width: 20rem;
}

.cr-track-details h2 {
  margin: 0;
}

.track-speedo {
  margin: -2rem auto 0;
}

.track-speedo svg {
  width: 100%;
}



/* --- birthdays --- */

.birthdays {
  padding: 0.5em 2.2%;
  margin: 1.5em 0 -1.4em 0;
  background: #9C6438;
  color: #f0f0f0;
}

.birthdays A {
  color: white;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.2);
}

.birthdays A:hover { border-bottom: 1px solid rgba(255,255,255,0.6); }




/* --- latest news --- */

.latestnews {
  margin-top: 1.5em;
  line-height: 1.4;
}

.latestnews > ul {
  list-style-type: none;
  padding: 0;
}

.latestnews > ul > li {
  margin: 1.5em 0;
  overflow: hidden;
}

.latestnews-text SUP {
  line-height: 1;
}

.latestnews-opponent {
  display: block;
  width: 17.8%;
  overflow: hidden;
  border: 0.1em solid #040;
  float: left;
  margin-top: 0.1em;
}

.latestnews-date,
.latestnews .markdown,
.latestnews-text {
  margin: 0 11% 0 20.5%;
}

.latestnews-text .car-image {
  height: 1.8rem;
  margin-right: 0.5rem;
  vertical-align: sub;
}

.latestnews-text P:first-child {
  margin-top: 0.1em;
}

.latestnews .markdown {
  font-family: helvetica, arial, sans-serif;
}

.latestnews .markdown,
.latestnews-text {
  font-size: 0.9em;
  margin-left: 20.5%;
}

.latestnews-text table {
  background: #317b31;
  border-collapse: collapse;
}

.latestnews-text th {
  text-align: left;
  border-bottom: 1px solid #71a171;
  font-weight: normal;
  color: #e0f0e0;
}

.latestnews-text th,
.latestnews-text td {
  padding: 0.5rem 2rem;
}

.latestnews-text a {
  border-bottom: 1px dotted currentColor;
}

/* --- on this day in... ---*/

.latestnews > h3,
.newstoday h3 {
  font-weight: normal;
}

.newstoday ul {
  list-style-type: none;
  padding: 0;
}

.newstoday li {
  font-size: 0.9em;
  margin: 0.5em 0;
  padding-left: 10.3%;
  overflow: hidden;
}

.newstoday-time {
  display: inline-block;
  width: 6%;
  margin: 0 2.3% 0 -9%;
  text-align: right;
  color: #ccc;
}

.newstoday-author {
  font-weight: bold;
}

.newstoday-text {
  margin-right: 10.5%;
  display: block;
  word-wrap: break-word;
}

.newstoday-archive {
  float: right;
  margin-right: 0.5%;
}


/* --- sequence of links on a line --- */

.choices {
  margin: 0.3em 0.1em;
}

.choices SPAN {
  display: inline-block;
  width: 22.5%;
  margin: 0 0 0 -0.1em;
  padding: 0;
}

.choices A {
  margin-right: 0.6em;
  font-size: 0.8em;
}

.choices A.selected {
  margin: -0.3em 0.1em -0.3em -0.5em;
  padding: 0.3em 0.5em;
  background: #317B31;
  border-radius: 2px;
}

/* --- news archive --- */

.newsarchive h3, .newsarchive h4 {
  margin: 1.5em 0 0.2em 0;
}

.na-list {
  list-style-type: none;
  padding: 0;
}

.na-list > LI {
  font-size: 0.9em;
  margin: 0 -2%;
  padding: 0.5em 2.5% 0.5em 22.5%;
  line-height: 1.3em;
}

.na-text {
  word-wrap: break-word;
  display: block;
}

.na-details {
  display: block;
  font-size: 0.75em;
  font-style: italic;
  margin-right: 1em;
  text-align: right;
}

.na-user.odd {
  background: #115B11;
}

.na-user.even {
  background: #317B31;
}

.na-main {
  background: #775b11;
  overflow: hidden;
}

.na-opp {
  float: left;
  width: 23%;
  margin-left: -25.9%;
  margin-right: 0.5em;
}

.na-info {
  float: left;
  width: 24%;
  margin-left: -25.5%;
}


/* ----- track time bar ----- */

.track-time-bar {
  background: rgba(255,255,255,0.15);
  border-top: 1px solid #337d33;
  margin-bottom: 1.5em;
}

.ttb-bar {
  padding: 0;
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  height: 1.5em;
  line-height: 1.3em;
  position: relative;
  table-layout: fixed;
}
.ttb-bar td {
  font-size: 0.8em;
  white-space: nowrap;
}

.ttb-type {
  margin-top: -1.5em;
  text-indent: 0.5em; 
}

.ttb-past {
  background-color: #544491;
  border-right: 2px dotted rgba(255,255,255, 0.3);
}

.ttb-left {
  visibility: hidden;
  position: absolute;
  top: -1.9em;  
  margin-left: -1.83em;
  background: #115b11;
  color: white;
  padding: 0.1em 0.5em;
  z-index: 5;
}

.track-time-bar:hover .ttb-left {
  visibility: visible; 
}

.ttb-left:before {
  content: ' ';
  position: absolute;
  background: #115b11;
  top: 1.4em;
  left: 1.3em;
  height: 1em;
  width: 1em;
  transform: rotate(45deg);
  z-index: -1;
}

.ttb-public { background: url(/css/stripes-speed.png) right; }
.ttb-quiet { background: url(/css/stripes-warning.png) right; }

.ttb-dates {
  font-size: 0.8em;
  line-height: 2em;
}

.ttb-date {
  color: white;
  font-weight: bold;
}

.ttb-start, .ttb-end {
  margin: 0 0.75em;
}

.ttb-end {
  float: right;
}

/* --- hopefully will become global --- */

.z-tagline {
  color: #72AE72;
  font-size: 0.9em;
}

.z-info-blocks {
  overflow: hidden;
  margin: 1em 0;
}

.z-info-block {
  float: left;
  width: 31%;
  padding-right: 2%;
}

.z-info-block.double {
  width: 64%;
}

.z-ib-label {
  border-bottom: 1px solid #216b21;
  color: #cfdecf;
  font-weight: normal;
  font-size: 1em;
  padding-bottom: 0.3em;
  margin: 0 0 0.3em 0;
}

@media screen and (max-width: 750px) {
  .z-info-block {
    float: none;
    margin: 1.5em 0;
    width: 100%;
  }
}

/* -- team list style -- */

.team-list {
}

.tl-section {
  margin: 2em 1em 0.5em 1em;
}

.tl-team {
  padding: 1em 1em 0;
}

.tl-team-logo {
  float: right;
  max-width: 6em;
}

.tl-team-name {
  color: #cfdecf;
  font-weight: normal;
  font-size: 1.3em;
  margin: 0;
}

.tl-team-info {
  margin-right: 6.5em;
}


/* -- team timeline -- */

.team-timeline {
  background: #115b11;
}

.team-timeline--chart {
  overflow-x: auto;
}


/* --- icon font code, from http://icomoon.io/app --- */

@font-face {
  font-family: 'zakstunts-icons';
  src:url('fonts/zakstunts-icons.eot');
  src:url('fonts/zakstunts-icons.eot?#iefix') format('embedded-opentype'),
  url('fonts/zakstunts-icons.woff') format('woff'),
  url('fonts/zakstunts-icons.ttf') format('truetype'),
  url('fonts/zakstunts-icons.svg#zakstunts-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'zakstunts-icons';
  content: attr(data-icon);
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  padding-right: 0.2em;
  -webkit-font-smoothing: antialiased;
}

a[data-icon]:before {
  margin-left: -0.3em;
  padding-right: 0.5em;
}

img.external {
  margin: 0.3em 0;
  max-width: 100%;
}

.nblock {
  display: block;
  max-width: 100%;
  margin: 0.3em 0;
}

.nblock.video-embed {
  border: 0;
}

.article .video-embed {
  height: 12rem;
}

A.news-link { text-decoration: none; }
A.news-link:after { padding-left: 0.3em; font-family: 'zakstunts-icons'; font-size: 0.8em; }

.news-link.topic:after { content: '\e003'; }
.news-link.track:after { content: '\e005'; }

img[src^="https://forum.stunts.hu/Smileys/"] {
  margin-bottom: -3px;
}

.car-small {
  height: 1em;
}

.new-form .medium-description {
  display: inline-block;
  vertical-align: top;
  width: 39%;
  margin-right: 5.4%;
}

.new-form .radio label {
  width: 20em;
}

.new-form label {
  display: inline-block;
  vertical-align: top;
  width: 21.9%;
}

.new-form select {
  min-width: 30%;
}

.textarea {
  margin: 1em 0;
}

.new-form textarea {
  width: 60%;
  height: 12em;
  padding: 0.5em;
}

.new-form .textarea-half {
  height: 6em;
}

.new-form .choices .selected {
  background: #519B51;
  color: #eee;
}

.new-form input[type="submit"] {
  padding: 0.3em 0.5em;
}

.new-form input[type="email"],
.new-form input[type="password"],
.new-form input[type="text"] {
  width: 20em;
}

.new-form .singlecheckbox {
  display: inline;
  width: auto;
  margin: 0;
}

.new-form fieldset {
  padding: 0;
  margin: 0;
  border: solid #060;
  border-width: 1px 0;
}

.new-form .tooltip {
  background: #060;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  display: none;
  margin: 0.5em 0 0 0.5em;
  max-width: 11em;
  padding: 0.8em 1em 1em 1em;
  position: absolute;
  z-index: 50;
}

.new-form :hover + .tooltip {
  display: block;
}

.new-form .signup-date select {
  display: inline-block;
  min-width: 5em;
}


/* ----- portraits ----- */
.portraits {
  margin: 1em 0;
  padding: 0;
}

.portraits li {
  display: inline-block;
  width: 16%;
  text-align: center;
}

.portraits input { display: none; }

.portraits li img {
  height: 4em;
  cursor: pointer;
  border-radius: 0.35em;
  margin: -0.35em;
  border: 0.35em solid transparent;
}
.portraits img:hover {
  border-color: rgba(255,255,255,0.7);
}

.portraits input:checked + img {
  border-color: rgba(255,255,255,0.5);
}


.st-results.warn {
  background: #775b11;
  border-color: #70570a;
}

.st-table {
  font-size: 0.9em;
  text-align: left;
  width: 100%;
  border-spacing:0;
  border-collapse:collapse;
  margin: 1em 0;
}

.st-table.small {
  font-size: 0.75em;
}

.st-table tr:nth-child(2n) {
  background: #317b31;
}

.st-table th, .st-table td {
  padding: 0.4em 0.5em;
}

.st-table img {
  height: 0.8em;
}

.st-table.medal-table td {
  padding-top: 2.4rem;
  vertical-align: top;
}

.st-table.medal-table td.padded {
  padding: 0.7rem 0 1rem;
}

.st-mark-A { border-left: 0.2em solid #696; }
.st-mark-B { border-left: 0.2em solid #252; }
.st-mark-A + .st-mark-B TD, .st-mark-B + .st-mark-A TD { padding-top: 2em; }


.banner {
  padding: 0.5em 0.65em;
  margin: 0.2em 0 1.5em 0;
}
.banner.ok      { background: #649c38; color: white; }
.banner.error   { background: #9C6438; color: yellow; }
.banner.warning { background: #bd8b39; color: black; }
.banner.newbie { background: #00A500; color: white; text-align: center; }
.banner.newbie A { color: #e0f0e0; }
.banner.newbie A:hover { color: white; }

.shortcuts code {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0 0.3em;
  font-size: 1.15em;
}

.shortcuts LI {
  margin: 0.3em 0;
}

.loud {
  float: right;
  margin: -1.6em 0.25em 0 0;
  font-size: 8em;
  width: 30%;
  font-family: 'zakstunts-icons', serif;
  text-shadow: 0px 0px 0.5em lime;
}

.jiggle {
  -webkit-animation: jiggle 0.2s infinite;
  animation-duration: 0.2s;
  animation-name: jiggle;
  animation-iteration-count: infinite;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

@keyframes jiggle {
  0% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@-webkit-keyframes jiggle {
  0% { -webkit-transform: rotate(-3deg); }
  50% { -webkit-transform: rotate(3deg); }
}

.backlink {
  font-size: 0.9em;
  margin: 0.2em 2%;
}


.action-form {
  display: inline;
  line-height: 1em;
}

.action-form form {
  display: inline;
  margin: 0;
  padding: 0;
}

.action-form input {
  background: #317b31;
  border: 1px solid #337d33;
  border-radius: 6px;
  color: white;
  padding: 0.1em 0.5em;
  margin: 1em 0.25em 0 0;
  cursor: pointer;
}

.action-form input:hover {
  background: #5a955a;
}

.fr {
  float: right;
}

.articles-year {
  font-weight: normal;
  margin-bottom: 0;
}

.articles-list {
  margin-top: -1.2em;
  margin-left: 10.5%;
  padding: 0;
  list-style-type: none;
}

.articles-list LI {
  margin-bottom: 1em;
  line-height: 1.2em;
}

.articles-list .action-form {
  margin-top: -1.5em;
}

.textarea.article-form {
  margin-top: -2.3em;
  margin-left: 22.3%;
}

.textarea.small,
.textarea.medium {
  margin-top: -2.9em;
  margin-left: 22.3%;
}

.textarea.small textarea {
  height: 6em;
  width: 90%;
  resize: vertical;
}

.textarea.medium textarea {
  height: 15em;
  width: 90%;
}

.textarea.article-form textarea {
  height: 30em;
  width: 90%;
}


.article {
  max-width: 41em;
  line-height: 1.35em;
  font-size: 0.95em;
}

.article a {
  border-bottom: 1px dotted currentColor;
}

.article code {
  font-size: 1.3em;
  line-height: 1.2em;
}

.article h1 {
  font-weight: normal;
  color: #e0f0e0;
}

.article h2, .article h3, .article h4 {
  line-height: 1.1em;
  clear: right;
  margin-top: 1.4em;
  margin-bottom: 0.3em;
}

.article h2 {
  border-bottom: 1px solid #71a171;
}

.article .thumb {
  float: right;
  margin-left: 1em;
  width: 22.5%;
  border: 2px solid #317b31;
}

.article .thumb img {
  width: 100%;
}  

.article sup {
  font-size: 0.8em;
  line-height: 1em;
}

.article blockquote {
  margin-left: 7%;
  margin-right: 7%;
  background: #317b31;
  border: 1px solid #337d33;
  padding: 0 2%;
}

.article blockquote cite {
  color: white;
  font-style: normal;
  font-size: 0.9em;
}

.article blockquote cite:before {
  content: "\2014  ";
}

.article hr {
  margin-top: 4em;
  color: #71a171;
  background-color: #71a171;
}

.article img {
  width: 100%;
}

.footnotes {
  font-size: 0.8em;
}

.footnotes ol {
  padding-left: 2em;
  margin-right: 2em;
}

.footnotes p {
  margin: 0.5em 0;
}

.footnotes hr {
  background: #115b11;
  height: 0.5em;
  margin: 3em 0;
}

/* --- data tables --- */

.data-table {
  width: 100%;
  margin: -2px;
}

.data-table th { border: 1px solid trasparent; font-size: 0.8em; padding: 0.2em 0.3em }
.data-table td { border: 1px solid trasparent; font-size: 0.75em; padding: 0.2em; vertical-align: top; }

.data-table.center-value td {
  text-align: center;
}

.data-table thead, .data-table tfoot {
  background: #014B01;
}

.data-table th {
  font-weight: normal;
}

.data-table tbody th {
  text-align: left;
}

.data-table tbody {
  background: #317b31;
}

.striped tr:nth-child(2n) {
  background: #115b11;
}

/* --- track list --- */

.tt-list {
  list-style-type: none;
  margin: 0.75em 0 1em 0;
  padding-left: 0;
}

.tt-list > li {
  padding: 1em;
  margin-bottom: 0.1em;
  min-height: 150px;
}

.tt-list h4 {
  font-weight: normal;
  font-size: 1.3em;
  margin: 0;
}

.tt-list h4 a {
  color: #e0f0e0;
}

.tt-list h5 {
  margin-bottom: 0.3em;
}

.tt-list .tt-thumb {
  float: left;
  width: 120px;
  height: 120px;
  display: block;
}

.tt-list .tt-info {
  margin-left: 136px;
  overflow: hidden;
}

.tt-half {
  float: left;
  width: 49%;
}

.tt-list h4 em {
  color: #ccc;
}

.tt-list .month {
  color: #ccc;
  border: none;
  cursor: help;
}

.team-logo {
  vertical-align: top;
  width: 5.5rem;
}


/* --- markdown rules --- */

.rules table { width: 100%; background: #317b31; }
.rules th { text-align: left; color:white; font-weight: normal; }


/* --- profiles --- */

img.racer-avatar {
  border-radius: 0.25rem;
  outline: 0.1rem solid rgba(0,40,0,0.3);
  max-height: 100px;
  max-width: 250px;
}

.profile-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.profile-info h2 img {
  vertical-align: baseline;
}

.profile-racer-info {
  flex: 2;
  min-width: 25rem;
}

.profile-team-info {
  flex: initial;
}

.team-button {
  display: block;
  text-align: center;
  background: #317b31;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #5a955a;
}

.team-button:hover,
.team-button:active {
  background: #5a955a;
}

.team-button span {
  display: block;
}

.profile-pic {
  text-align: right;
  flex: initial;
  padding: 1rem 0;
  margin-left: 1rem;
}

.profile-pic img {
  max-height: 8rem;
}

.profile-data {
  line-height: 1.5em;
  list-style-type: none;
  padding: 0;
}

.profile-data.grid {
  display: grid;
  grid-gap: 1.5rem 3rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.profile-data h3 {
  color: #f0f0ee;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
}

.profile-data p {
  color: #e0f0e0;;
  font-size: 1rem;
  margin: 0;
  max-height: 15rem;
  overflow-y: auto;
}

.profile-data span {
  display: inline-block;
  width: 10em;
  opacity: 0.8;
}


/* --- season and tracks menu --- */
.dropdownline {
  font-size: 0.875em; 
  margin: 0.6em 0 0.75em 0;
}

.dropdown-right {
  float: right;
  margin-top: 0.1em;
  margin-right: 1.5em;
}


/* --- scoreboard --- */

.scoreboard {
  background: #014b01; /* Old browsers */
  background: linear-gradient(to bottom, #014b01 0%, #1f691f 24em);
  border-collapse: collapse;
  font-size: 0.75em;
  line-height: 1.0em;
  margin: 1em 0 1.33em 0;
  white-space: nowrap;
  width: 100%;
}

.scoreboard thead,
.scoreboard tfoot {
  background: #317b31;
  font-size: 0.9em;
}

.scoreboard tr + tr {
  border-top: 1px solid rgba(255,255,255,0.05);
}

.scoreboard TD {
  padding: 1px;
}

.scoreboard tr:hover td {
  background: rgba(255,255,255,0.05);
}

.scoreboard .rank {
  text-align: right;
  padding-right: 0.65em;
}

.scoreboard .points,
.scoreboard tbody .rank {
  font-weight: bold;
}

.scoreboard .racer { width: 17%; }
.scoreboard .team  { width: 15%; }
.scoreboard .time  { width: 12%; }

.scoreboard .country {
  text-align: center;
}

.badge-ltb,
.badge-quiet,
.badge-transmission {
  background: #317b31;
  font-size: 0.8em;
  padding: 0.2em 0.5em;
  border-radius: 2em;
  cursor: help;
}

.badge-ltb { background: #60009c; padding: 0.2em 0.4em 0.2em 0.3em; }
.badge-quiet { background: #fcf420; color: black; margin-left: 0.2em; }

.badge-ltb.partial { background: #624573; }
.ltb-carryover { font-weight: bold; cursor: help; }

TD.numeric { text-align: right; }

.scoreboard .special,
.scoreboard .time-diff {
  font-size: 0.9em;
}

.scoreboard .car img {
  height: 1.6em;
  vertical-align: -0.5em;
}

.scoreboard .recent-1 { border-left: 0.2em solid #ED9541; }
.scoreboard .recent-2 { border-left: 0.2em solid #BD8B39; }
.scoreboard .recent-3 { border-left: 0.2em solid #948233; }
.scoreboard .recent-4 { border-left: 0.2em solid #757C2E; }
.scoreboard .recent-5 { border-left: 0.2em solid #547529; }

.racer-marker {
  border-radius: 1ex;
  border: 1px solid rgba(255,255,255,0.2);
  display: inline-block;
  height: 1ex;
  vertical-align: baseline;
  width: 1ex;
  margin: 0 0.2rem;
}

/* --- all results --- */

.scoreboard.thick tr {
  line-height: 1.8em;  
}

.scoreboard tr.scoreboard-sep {
  background: #5a955a;
  line-height: 2em;
  text-align: center;
}

.scoreboard .scoreboard-sep + tr {
  background: #317b31;
  font-size: 0.9em;
}

.scoreboard-sep td {
  border-top: 1.5em solid #216b21;
}

/* --- graphical scoreboard --- */

.scoreboard-graph {
  background: #135d13; 
  padding: 1em 2%;
  margin: 1.5em 0;
}

.sg-wrapper {
  background: url(finish-line.png) top right no-repeat;
  padding-right: 8px;
}

.sg-lane {
  position: relative;
  min-height: 3em;
}

.sg-lane img {
  position: absolute;
  width: 7%;
  height: auto;
}

.sg-lane .label {
  border-right: 1px solid #71a171;
  color: #e0f0e0;
  height: 100%;
  font-size: 0.7em;
  padding-right: 0.3em;
  position: absolute;
}

.sg-lane .separator {
  position: absolute;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #BD8B39;
  margin: 0 -1px;
}

.sg-lane .sep-content {
  border-bottom: 1px solid #BD8B39;
  margin-top: -0.7em;
  margin-bottom: 0.3em;
  display: block;
  text-align: center;
  font-size: 0.7em;
}

.sg-lane .sep-label {
  color: #BD8B39;
  background: #135d13;
}

/* Coefficients chart and track preview */

.coeffs-and-map {
  display: flex;
}

.scoreboard-cars {
  flex: 1;
  max-width: 25rem;
  min-width: 15rem;
}

.scoreboard-preview {
  flex: 1;
  text-align: center;
}

.scoreboard-cars + .scoreboard-preview {
  margin-left: 1rem;
  text-align: right;
}

.scoreboard-preview IMG {
  max-width: 480px;
  width: 100%;
}


@media screen and (max-width: 700px) {
  .coeffs-and-map {
    flex-direction: column;
  }
  .scoreboard-cars + .scoreboard-preview {
    margin-left: 0;
    text-align: center;
  }
}


.scoreboard-graph .legend {
  font-size: 0.8em;
  color: #e0f0e0;
  margin-top: 0;
}

.scoreboard-cars {
  font-size: 0.9em;
  padding: 0.1em 1em 1em 1em;
  margin-bottom: 1em;
  background: #115B11;
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
}

.sc-table td {
  margin: 0.1em 0;
}

.sc-label {
  width: 7em;
}

.sc-graph {
  position: relative;
}

.sc-track-bar,
.sc-author-bar {
  height: 1.6em;
  display: inline-block;
  box-sizing: border-box;
}

.sc-track-bar {
  border: 1px solid #72AE72;
  background: #549154 url(stripes-speed.png) center left;
}
.sc-track-bar.sc-negative {
  border: 1px solid #AE7252;
  background: #915444 url(stripes-warning.png) left;
}

.sc-track-bar.sc-positive + .sc-author-bar.sc-positive {
  border: 1px solid #c5ddc5;
  background: #91b991 url(stripes-speed.png) center left;
}
.sc-track-bar.sc-positive + .sc-author-bar.sc-negative {
  border: 1px solid #385929;
  background: #294a22 url(stripes-warning.png) left;
}

.sc-author-bar {
  cursor: help;
}
.sc-author-bar.sc-positive {
  border: 1px solid #486929;
  background: #395a22 url(stripes-warning.png) left;
}
.sc-author-bar.sc-negative {
  border: 1px solid #583929;
  background: #492a22 url(stripes-speed.png) left;
}
.sc-track-bar.sc-negative + .sc-author-bar.sc-positive {
  border: 1px solid #486929;
  background: #395a22 url(stripes-speed.png) left;
}
.sc-track-bar.sc-negative + .sc-author-bar.sc-negative {
  border: 1px solid #583929;
  background: #492a22 url(stripes-warning.png) left;
}

.sc-track-bar.sc-positive + .sc-author-bar.sc-positive:hover,
.sc-track-bar.sc-positive + .sc-author-bar.sc-negative:hover,
.sc-track-bar.sc-negative + .sc-author-bar.sc-positive:hover,
.sc-track-bar.sc-negative + .sc-author-bar.sc-negative:hover,
.sc-author-bar:hover {
  border: 2px solid rgba(255,255,255,0.7);
}

.sc-graph .sc-car {
  position: absolute;
  left: 0.2em;
  top: 0.1em;
}

.sc-graph .sc-car > img {
  height: 1.15rem;
}

.sc-value {
  padding-right: 1em;
  width: 2em;
  text-align: right;
}



/* --- rplinfo --- */

.car-image {
  height: 1.2rem;
  vertical-align: -0.5em;
}

.rplinfo .car-image {
  height: 1em;
}

.rplinfo .track-preview,
.rplinfo .opponent-face {
  float: left;
  margin-left: -7.5em;
  width: 6em;
  border: 0.25em solid #216b21;
}

.rpl-section {
  overflow: hidden;
  padding-left: 7.5em;
  margin-bottom: 1em;
}

.rpl-section P {
  margin-top: 0;
  margin-bottom: 0.2em;
}

.rpl-section P + P {
  border-top: 1px solid #216b21;
  padding-top: 0.2em;
}

.rpl-section strong {
  display: inline-block;
  width: 8em;
  color: white;
}


/* ---- new page layout ---- */

body { margin: 0 auto; position: relative; }

[role=banner] {
  background: #5AFFFF url('/pics/skin/topmid.png') bottom left repeat-x;
  border-top: 1px solid #48dddd;
  color: black;
  display: flex;
  height: 60px;
}

[role=banner] h1 {
  background: url('/pics/skin/bridge.png') left top no-repeat;
  flex: 1;
  margin: 0;
  position: relative;
}

[role=banner] h1 span {
  display: inline-block;
  text-indent: -9999px;
}

[role=banner] svg {
  bottom: 0.48rem;
  height: 44px;
  left: 13.8rem;
  position: absolute;
  width: auto;
}

[role=main] .ddiv {
  width: auto;
}

[role=main] {
  margin-left: 13%;
  margin-right: 22%;
  padding: 0 0.5%;
}

.rightpanel {
  position: absolute;
  top: 0;
  right: 0.5%;
  width: 21.5%;
  background: rgba(17,91,17,0.3);
}

.leftpanel {
  background: rgba(17,91,17,0.3);
  position: absolute;
  left: 0.5%;
  top: 64px;
  width: 12.5%;
  min-width: 9em;
}

.bn-bernie {
  float: right;
  margin-right: 22%;
  display: block;
}

@media screen and (max-width: 1200px) {
  .bn-bernie { display: none; }
}

[role=contentinfo] {
  margin: 3em 22% 1em 13%;
  padding: 1em 0.5%;
  font-size: 0.8em;
  color: #cfdecf;
}


.grhe {
  background: #00A500;
  color: black;
  text-align: center;
  font-weight: normal;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.4em;
}


.current-track {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.7em;
}

A.ct-label {
  display: block;
  height: 53px;
  color: black;
}

.ct-label:hover, .ct-label:active, .ct-label:focus {
  background: rgba(255,255,255,0.2);
}

.ct-track {
  font-weight: bold; 
}

.ct-track, .ct-title, .ct-remain {
  display: block;
  margin-left: 0.5em;
}

.ct-title {
  padding-top: 0.5em;
  font-size: 0.8em;
  margin-left: 0.625em; 
  color: #343;
}

.ct-remain {
  float: right;
  color: #343;
  cursor: help;
  font-size: 0.8em;
  margin: 0.5em 0.625em 0 0;
}


.actions {
  margin: 0.5em 0 1em 0;
  overflow: hidden;
}

.actions a {
  font-size: 0.875em; 
  background: #115b11;
  color: #cfdecf;
  padding: 0.5em 0;
  text-align: center;
}

.actions a:hover, .actions a:active, .action a:focus {
  background: #71a171;
}

.actions.some a {
  padding: 0.5em 1em;
  display: inline-block
}

.actions.one a {
  display: block;
}

.actions.two a {
  float: left;
  width: 49.5%;
}

.actions.two a+a {
  margin-left: 1%;
}

.actions.many {
  display: flex;
}

.actions.many a {
  flex: 1;
}

.actions.many a+a {
  margin-left: 1.25%;
}

.side-shoutbox,
.side-replay {
  width: 100%;
  font-size: 0.75em;
  margin: 0 0 1.333em 0;
  background: #115B11;
}

.shout-edit {
  display: block;
  text-align: right;
  margin-top: 0.5em;
}

.shout-info {
  cursor: help;
}

.shout-info span {
  color: #FC7C7C;
}

.hover-control {
  visibility: hidden;
}

.side-shoutbox:hover .hover-control {
  visibility: visible;
}

.side-replay {
  border-collapse: collapse;
}

.side-replay tr + tr {
  border-top: 1px solid #317b31;
}

.side-replay td:first-child,
.side-replay td:last-child {
  padding: 0.2em 0.650em;
}

.side-shoutbox dt {
  color: white;
  padding: 0.4em 0.625em 0.2em 0.625em;
}

.side-shoutbox dd {
  color: #cfdecf;
  padding: 0.2em 0.625em 0.4em 0.625em;
  line-height: 1.3;
  margin: 0;
}

.side-shoutbox dd + dt {
  border-top: 0.2em solid #317b31;
}

.side-shoutbox code {
  background: rgba(255,255,255,0.1);
  padding: 0 0.4em;
  font-size: 1.3em;
}

.side-shoutbox time {
  float: right;
  font-size: 0.9em;
}

.news-result {
  border-top: 1px solid #216b21;
  display: flex;
  margin-top: 0.5rem;
  padding: 0.5rem 0 0.25rem;
}

.side-shoutbox .news-result {
  border-top: 1px solid #317b31;
}

.news-result img {
  height: 1rem;
}

.news-result .time {
  flex: 1;
  text-align: right;
}

.racer-mention {
  color: #ffd070;;
}

.leftpanel P,
.rightpanel P {
  margin: 0.5em;
  padding: 0.2em 0;
}



.leftpanel ul {
  font-size: 0.8em;
  list-style-type: none;
  padding: 0;
  margin: 0.1em 0 1em 0;
}

.leftpanel a {
  display: block;
  padding: 0.1em 0.625em;
}

.leftpanel a:hover, .leftpanel a:focus, .leftpanel a:active {
  background: #115B11;
}

.tr-news, .tr-menu {
  display: none;
  position: absolute;
  color: white;
  background: #60009c;
  padding: 0.75em 0.5em;
  top: 0.5em;
  z-index: 10;
  border-radius: 2em;
}

.tr-news {
  right: 0.25em;
}

.tr-menu {
  left: 0.25em;
}


.show-menu .leftpanel,
.show-news .rightpanel {
  display: block;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  min-height: 100%;
  z-index: 7;
}


.show-menu .tr-menu,
.show-news .tr-news {
  display: none;
}

.show-menu .leftpanel {
  background: #115B11;
  left: 0;
  top: 0;
  width: 14em;
}

.show-news .rightpanel {
  background: #115B11;
  right: 0;
  width: 30em;
}

.show-news .ct-remain,
.show-news .ct-title {
  color: #cfdecf;
}
.show-news .ct-track {
  color: white;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #082d08;
  z-index: 5;
  opacity: 0.4;
  display: none;
}

.show-news .overlay,
.show-menu .overlay {
  display: block;
}


a.link-danger {
  color: #ffb0b0;
}

a.link-danger:hover {
  color: #ff7070;
}

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

  .leftpanel {
    display: none;
  }

  [role=contentinfo],
  [role=main] {
    margin-left: 0;
  }

  .tr-menu { display: block; }

}

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

  .rightpanel {
    display: none;
    background: #115B11;
  }

  [role=contentinfo],
  [role=main] {
    margin-right: 0;
  }

  .tr-news { display: block; }

}

input.coeff-input {
  background: transparent; 
  color: white;
  border: 0;
  width: 3.5em;
  float: right;
  text-align: center;
}

.coeff-author {
  background: #519B51;
}

.medal-group {
  display: inline-block;
  position: relative;
  padding-top: 1.5rem;
}

.medal-group--title {
  position: absolute;
  top: 0.3rem;
  text-align: center;
  width: 100%;
}

.medal-group--medals {
  padding: 0.3rem;
  border-color: rgba(255,255,255,0.5);
  border-radius: 0.5em;
  border-style: solid;
  border-width: 2px 0px 0 0px;
}

.medal-group--streak {
  color: rgba(255,255,255,0.7);
  width: 0.6rem;
  margin-left: -0.2rem;
}

.medal {
  border-radius: 1.5rem;
  border: 2px solid rgba(0,0,0,0.1);
  box-shadow: 1px 1px 1px currentColor;
  color: black;
  color: rgba(0,0,0,0.2);
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold; 
  line-height: 1;
  margin: 0.1rem 0;
  padding: 0.1rem;
  text-align: center;
  width: 1em;
}

.tiny-medal {
  border-radius: 1.5rem;
  border: 2px solid rgba(0,0,0,0.1);
  box-shadow: 1px 1px 1px currentColor;
  color: black;
  color: rgba(0,0,0,0.2);
  display: inline-block;
  height: 0.25rem;
  text-align: center;
  width: 0.25rem;
  vertical-align: 10%;
  margin-left:0.25rem;
}

.tiny-medal.medal-gold,
.medal.medal-gold {
  background-color: gold;
  box-shadow: 1px 1px 1px gold;
}

.tiny-medal.medal-silver,
.medal.medal-silver {
  background-color: silver;
  box-shadow: 1px 1px 1px silver;
}

.tiny-medal.medal-copper,
.medal.medal-copper {
  background-color: brown;
  box-shadow: 1px 1px 1px brown;
}

/* SVG sparklines */

.ui-sparkline line {
  stroke: #418b41;
}

.ui-sparkline rect {
  fill: #e0efe0;
}

.ui-sparkline rect:hover {
  fill: #ed9541;
}

/* Track rating */
.track-rating {
  display: flex;
}

.track-rating .tr-preview {
  flex: initial;
}

.tr-preview {
  display: block;
  width: 8rem;
  height: 8rem;
}

.rate-summary {
  cursor: help;
}

.rate-summary .rate--star::before {
  content: '';
  display: inline-block;
  height: 1em;
  background: url(on.svg);
  background-size: 1em 1em;
  vertical-align: text-top;
  width: 1em;
}

.rate .rate--stars::before {
  content: '';
  display: inline-block;
  height: 1em;
  background: url(on.svg);
  background-size: 1em 1em;
  vertical-align: text-top;
}

.rate .rate--stars::after {
  content: '';
  display: inline-block;
  height: 1em;
  background: url(off.svg);
  background-size: 1em 1em;
  vertical-align: text-top;
}

.rate .rate--stars[data-value="1"]::before { width: 1em; }
.rate .rate--stars[data-value="1"]::after { width: 4em; }
.rate .rate--stars[data-value="2"]::before { width: 2em; }
.rate .rate--stars[data-value="2"]::after { width: 3em; }
.rate .rate--stars[data-value="3"]::before { width: 3em; }
.rate .rate--stars[data-value="3"]::after { width: 2em; }
.rate .rate--stars[data-value="4"]::before { width: 4em; }
.rate .rate--stars[data-value="4"]::after { width: 1em; }
.rate .rate--stars[data-value="5"]::before { width: 5em; }
.rate .rate--stars[data-value="5"]::after { width: 0; }

.track-rating .tr-info {
  padding-left: 2rem;
  flex: 1;
}

.track-rating .star-rating__stars {
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
}

.rating-value {
  position: relative;
  display: inline-block;
  background: url(off.svg);
  background-size: 1em 1em;
  height: 1em;
  width: 5em;
  text-indent: -9999px;
  vertical-align: text-top;
}

.rating-value:after {
  content: " ";
  position: absolute;
  display: inline-block;
  background: url(on.svg);
  background-size: 1em 1em;
  height: 1em;
  width: 0em;
  top: 0;
  left: 0;
}

.rating-value.r05:after { width: 0.5em; }
.rating-value.r10:after { width: 1.0em; }
.rating-value.r15:after { width: 1.5em; }
.rating-value.r20:after { width: 2.0em; }
.rating-value.r25:after { width: 2.5em; }
.rating-value.r30:after { width: 3.0em; }
.rating-value.r35:after { width: 3.5em; }
.rating-value.r40:after { width: 4.0em; }
.rating-value.r45:after { width: 4.5em; }
.rating-value.r50:after { width: 5.0em; }

/* Star rating */
.star-rating__stars {
  position: relative;
  height: 1em;
  width: 5em;
  background: url(off.svg);
  background-size: 1em 1em;
}

.star-rating__label {
  position: absolute;
  height: 100%;
  background-size: 1em 1em;
}

.star-rating__input {
  margin: 0;
  position: absolute;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.star-rating__stars .star-rating__label:nth-of-type(1) {
  z-index: 5;
  width: 20%;
}

.star-rating__stars .star-rating__label:nth-of-type(2) {
  z-index: 4;
  width: 40%;
}

.star-rating__stars .star-rating__label:nth-of-type(3) {
  z-index: 3;
  width: 60%;
}

.star-rating__stars .star-rating__label:nth-of-type(4) {
  z-index: 2;
  width: 80%;
}

.star-rating__stars .star-rating__label:nth-of-type(5) {
  z-index: 1;
  width: 100%;
}

.star-rating__input:checked + .star-rating__label,
.star-rating__input:focus + .star-rating__label,
.star-rating__label:hover {
  background-image: url(on.svg);
}

.star-rating__label:hover ~ .star-rating__label {
  background-image: url(off.svg);
}

.star-rating__input:focus ~ .star-rating__focus {
  position: absolute;
  top: -0.05em;
  right: -0.05em;
  bottom: -0.05em;
  left: -0.05em;
  outline: 0.02em solid lightblue;
}

/* ---- */

.common-table {
  font-size: 0.9rem;
  text-align: left;
  width: 100%;
  border-spacing:0;
  border-collapse:collapse;
  margin: 1em 0;
}

.common-table th,
.common-table td {
  padding: 0.2rem 0.2rem;
}

/* Live preview on replay submission */

.replay-preview {
  animation: fadeIn 0.75s;
  background: #115B11;
  border: 1px solid #0e590e;
  display: flex;
  font-size: 0.875em;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
}

@keyframes fadeIn {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

.replay-preview th {
  font-weight: normal;
  text-align: left;
  padding-right: 1rem;
}

.replay-preview .car-image {
  height: 1.2em;
  vertical-align: -0.1em;
}

.replay-preview--clock {
  max-height: 5rem;
  max-width: 5rem;
}

@media screen and (max-width: 35rem) {
  .replay-preview--clock { display: none; }
}

.experience-points-list {
  list-style-type: none;
  padding: 0;
  line-height: 1.6;
}

.experience-points {
  background: rgba(255,255,255,0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 1.5rem;
}

.xp-pill {
  cursor: help;
  position: absolute;
  margin-top: -0.5rem;
  background: rgba(255,255,255,0.2);
  padding: 0.1rem 0.3rem;
  border-radius: 1.5rem;
  font-size: 0.9em;
}

.single-car-podiums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
}

.single-car-podium {
  background: #115B11;
  min-height: 5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5em;
  border: 1px solid #0e590e;
}

.single-car-podium p {
  text-align: center;
  line-height: 3rem;
}

.single-car-podium ol {
  list-style-type: none;
  padding: 0;
}

.single-car-podium li {
  color: #cfdecf;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.single-car-podium .badge-quiet {
  display: inline-block;
  font-size: 0.7em;
  vertical-align: 0.1em;
}

.scp-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.scp-partial,
.scp-unused,
.scp-topcar {
  opacity: 0.6;
}

.scp-ready {
  box-shadow: 0 0 5px rgba(255,255,255,0.1);
}

.car-podium-icon {
  margin: 0.5rem auto;
  text-align: center;
}

.car-podium-icon svg {
  display: block;
  margin: auto;
  width: 9rem;
  height: 3rem;
}

.car-podium-icon span {
  color: #cfdecf;
}

.racers-groups h3 {
  margin: 2em 1em 0.5em 1em;
}

.racers-groups h3 span {
  font-weight: normal;
}

.rl-racer {
  display: flex;
  gap: 1rem;
}

.rl-racer.active:before {
  background: #a0fc00;
  background: linear-gradient(to bottom right, #a0fc00, #90e400);
  border-radius: 1rem;
  box-shadow: 1px 1px 2px #115b11;
  content: '';
  height: 1rem;
  left: -0.33rem;
  position: absolute;
  top: -0.33rem;
  width: 1rem;
}

.rl-avatar-box {
  align-items: center;
  background-image: url(helmet.svg);
  background-size: 3rem 3rem;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0.25em;
  box-shadow: inset 0 0 8px #71a171;
  display: flex;
  height: 4.5rem;
  width: 4.5rem;
}

.rl-avatar-box img {
  display: block;
  margin: auto;
  max-height: 4.5rem;
  max-width: 4.5rem;
}

.rl-details-box {
  line-height: 1.4;
}

.rl-details-box a {
  display: block;
  font-size: 1.15em;
  margin-bottom: 0.2em;
}

details.dropdown {
  display: inline-block;
  position: relative;
}

details.dropdown[open] > summary:before {
  background: transparent;
  bottom: 0;
  content: '';
  cursor: default;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99;
}

.dropdown--button {
  background: #115b11;
  cursor: pointer;
  display: inline;
  padding: 0.5em 0.7em 0.5em 1em;
}

.dropdown--button span {
  color: #cfdecf;
}

.dropdown--button:hover,
.dropdown--button:active,
.dropdown--button:focus {
  background: #71a171;
}

.dropdown--button:after {
  font-family: 'zakstunts-icons';
  color: #cfdecf;
  content: '\e004';
  margin-left: 0.5em;
}

.dropdown--items {
  background: #71a171;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  list-style-type: none;
  min-width: 25em;
  padding: 0;
  position: absolute;
  z-index: 100;
  top: 0.7rem;
}

.with-columns .dropdown--items {
  columns: 3;
}

.dropdown--items a:hover,
.dropdown--items a:focus {
  background: #317b31;
}

.dropdown--items a {
  color: white;
  display: block;
  padding: 0.5rem;
}

.dropdown--items .selected {
  background: #417c41;;
}

.ui-flag {
  vertical-align: top;
  width: 32px;
  height: 20px;
}

.car-tiles {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  list-style-type: none;
  padding: 0;
}

.ct-info {
  padding: 0.5rem;
}

.ct-info .car-image {
  height: 1.8rem;
  margin-left: -0.4rem;
  margin-bottom: 0.2rem;
}

img.track-thumbnail {
  border-radius: 0.1rem;
  box-shadow: 0 0 3px #00000060;
}

.tiles {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  list-style-type: none;
  margin: 1rem 0;
  padding: 0;
}

.tiles--wide {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.linked-tile {
  position: relative;
}

.linked-tile a:before {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  top: -0.5rem;
}

.linked-tile a:hover:before,
.linked-tile a:focus:before {
  background: #ffffff0f;
}

.profile-tracks .track-thumbnail {
  vertical-align: -0.5rem;
  width: 3rem;
  height: 3rem;
}

.profile-tracks li {
  display: flex;
  gap: 0.5rem;
}

.profile-tracks big {
  display: block;
  font-size: 1.15em;
}

.profile-tracks .rate-summary {
  margin-left: 0.5rem;
}

.heated {
  box-shadow: 0 -0.75rem 0.5rem #ed954130;
}

.heated td {
  box-shadow: inset 0 0.75rem 0.5rem #ed954130;
}