body {
    background: #25272c;
}

body, button, input, textarea {
    color: #ddd8dd;
}

body, button, input, select, textarea {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.375;
    margin: 0;
    padding: 0;
}

input, textarea {
    background: #1a1c20;
    border: none;
    border-bottom: 1px solid #1da674;
    border-radius: 0;
    padding: 5px;
}
.dangerous input, .dangerous textarea {
    border-bottom-color: #f08080;
}
textarea {
    height: 66px;
    min-height: 66px;
    resize: vertical;
}
:focus {
    outline-color: #1da674;
}

h1, h2 {
    font-family: 'Roboto Slab', serif;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h2 {
    font-size: 28px;
    font-weight: normal;
}

h3 {
    display: inline-block;
    border-bottom: 1px solid #1da674;
    margin: 10px 0 5px;
}
h3.dangerous {
    border-bottom-color: #f08080;
}

ol, ul, dl {
    margin: 0;
    padding: 0;
}
ol, ul {
    list-style: none;
}

a {
    color: #ddd8dd;
}

table {
    border-spacing: 0;
    border: 5px solid #1a1c20;
    border-radius: 10px;
    margin-top: 10px;
}
table td, table th {
    border: solid #1a1c20;
    border-width: 1px 0 0 1px;
    padding: 10px;
}
table tr:first-child td,
table tr:first-child th {
    border-top: none;
}
table td:first-child,
table th:first-child {
    border-left: none;
}
table th {
    color: #8c898c;
    font-weight: normal;
    text-align: left;
}

.btn, .btn:visited {
    background-color: #0c0f14;
    border: solid #26dd9a;
    border-width: 1px 0 0 1px;
    color: #ddd8dd;
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.2s;
    vertical-align: top;
}

.btn.cancel, .btn.close {
    border-color: #ddd8dd;
    color: #ddd8dd;
}

.btn:hover {
    border-color: #a6ebc4;
    color: #beebd1;
}

.btn.cancel:hover {
    border-color: #f08080;
    color: #f08080;
}

.btn:active {
    border-color: #1da674;
    position: relative;
        top: -1px;
        left: -1px;
}

.btn:disabled,
.btn:disabled:hover {
    border-color: #666;
    color: #666;
}

.btn > .notification {
    background: #ddd8dd;
    border-radius: 100%;
    color: #0c0f14;
    display: inline-block;
    line-height: 20px;
    text-align: center;
    width: 20px;
}

.btn-row {
    display: flex;
    flex-direction: row;
}
.btn-row > .btn {
    margin-left: 5px;
}
.btn-row > .btn:first-child {
    margin-left: 0;
}

.breadcrumbs {
    display: flex;
    font-size: 13px;
}

.breadcrumbs > li::before {
    color: #8c898c;
    content: '⇒';
    padding: 0 3px;
}
.breadcrumbs > li:first-child::before {
    content: none;
}

.user-pop,
.team-pop {
    display: flex;
    text-decoration: none;
    align-items: center;
}
.user-pop::after {
    background: no-repeat 0 0 / contain;
    margin-left: 3px;
    height: 16px;
    width: 16px;
}
.user-pop.moderator::after {
    background-image: url(../image/sword.svg);
    content: '\a0';
}
.user-pop.supporter.moderator::after {
    background-image: url(../image/gold_sword.svg);
}
.user-pop.staff::after {
    background-image: url(../image/star.svg);
    content: '\a0';
}
.user-pop.supporter.staff::after {
    background-image: url(../image/gold_star.svg);
}
.user-pop > .avatar,
.team-pop > .avatar {
    background-image: radial-gradient(#1a1c20, #8c898c);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
    height: 32px;
    width: 32px;
    margin-right: 5px;
}
.user-pop.anonymous > .avatar {
    background-image: radial-gradient(#1a1c20, #000);
}
.user-pop > .name,
.team-pop > .name {
    white-space: nowrap;
}
.user-pop.supporter > .name {
    background-image: linear-gradient(to top right, #cca32a 0, #ffea99 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
.user-pop > .scrim {
    color: #8c898c;
    font-size: 13px;
    line-height: 1.6923;
}
.user-pop > .pronouns {
    width: max-content;
    background: #1a1c20;
    color: #8c898c;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 18px;
    margin-left: 5px;
    padding: 0 4px;
}
.user-pop.inline,
.team-pop.inline {
    display: inline-flex;
    vertical-align: top;
}
.user-pop.inline > .avatar,
.user-pop.inline > .avatar svg,
.team-pop.inline > .avatar {
    height: 22px;
    width: 22px;
}
.help {
    color: #8c898c;
    font-size: 13px;
}
.help strong,
.helptext strong {
    color: #ddd8dd;
}

h2 + .help,
h3 + .help {
    margin-top: 0;
}

header {
    border-bottom: 1px solid #26dd9a;
}

header, .container, footer {
    background: linear-gradient(to bottom, #36393f 0, #25272c 30px);
    padding: 0 40px;
}
@media (max-width: 1024px) {
    header, .container, footer {
        padding: 0 10px;
    }
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header > .title {
    position: relative;
}
header > .title > h1 {
    font-weight: bold;
    font-size: 50px;
    line-height: 1;
    margin: 0;
    position: relative;
        bottom: -4px;
}
header > .title > h1 > a,
header > .title > h1 > a:visited {
    color: #eee;
    text-decoration: none;
    position: relative;
}
header > .title > h1 > a {
    background-image: linear-gradient(to bottom, #becccc 0%, #eee 50%, #becccc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
header > .title > h1 > a > img {
    height: 45px;
    vertical-align: top;
}
header > .title > h1 > a > span > .dot {
    display: inline-block;
    font-size: 0;
    position: relative;
    width: 14px;
}
header > .title > h1 > a > span > .dot::after {
    background: linear-gradient(to bottom, #becccc 0%, #eee 50%, #becccc 100%);
    content: "\a0";
    height: 8px;
    width: 8px;
    position: absolute;
        bottom: 0;
        left: 3px;
    transform: rotate(-45deg);
}
header > .user-info {
    display: flex;
}

header > .user-info > a,
header > .user-info > form {
    margin-left: 5px;
}

header > .current-race {
    align-self: flex-start;
    max-width: 40%;
}

header > .current-race > a {
    border: 2px solid #1a1c20;
    border-top: none;
    background: linear-gradient(to top, #36393f 0, #25272c 100%);
    border-radius: 0 0 5px 5px;
    display: flex;
    height: 40px;
    padding: 2px 5px;
    text-decoration: none;
}

header > .current-race > a > span {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

header > .current-race > a > span:first-child {
    margin-right: 5px;
}

header > .current-race > a .goal {
    overflow: hidden;
    word-break: break-word;
}

header > .current-race > a img {
    display: none;
}

header > .current-race > a .goal,
header > .current-race > a .timer {
    font-weight: bold;
}

header > .current-race > a .state {
    flex: 1 1 0;
}

header > .current-race > a .entrants,
header > .current-race > a .state {
    font-size: 13px;
}

header > .current-race > a .timer {
    text-align: right;
}

.bulletin {
    align-items: center;
    display: flex;
    padding-top: 10px;
    justify-content: center;
}
.bulletin.hidden {
    display: none;
}
.bulletin > .message {
    background: linear-gradient(to bottom, #25272c 0, #36393f 100%);
    border: 1px solid #ddd8dd;
    border-radius: 3px;
    font-size: 18px;
    padding: 10px 30px;
}
.bulletin > .message > time {
    color: #aaa;
    font-weight: bold;
}
.bulletin > .message > time::after {
    content: " – ";
}
.bulletin.highlight > .message {
    border-color: #26dd9a;
}
.bulletin.highlight > .message > span,
.bulletin > .message > span .highlight {
    color: #beebd1;
}
.bulletin.dangerous > .message {
    border-color: #f08080;
}
.bulletin.dangerous > .message > span,
.bulletin > .message > span .dangerous {
    color: #f08080;
}
.bulletin > .close {
    cursor: pointer;
    padding: 10px;
}

.messages > ul {
    background: #212328;
    border: 5px solid #1a1c20;
    border-radius: 10px;
    padding: 10px;
}
.messages > ul > li {
    border-top: 1px solid #08090a;
    margin-top: 5px;
    padding-top: 5px;
}
.messages > ul > li:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.timer {
    cursor: default;
}
a .timer {
    cursor: inherit;
}
.timer-no-deciseconds .timer > small {
    display: none;
}

.container > .messages {
    padding: 30px 0 0;
}
.container > .messages .success {
    color: #beebd1;
}
.container > .messages .error {
    color: #f08080;
}

.container > .content {
    display: flex;
    margin: 0 auto;
    max-width: 1280px;
    padding: 30px 0;
}
.dialog .container > .content {
    max-width: 600px;
}

.container > .content > main,
.container > .content > aside {
    background: #212328;
    border: 10px solid #1a1c20;
    border-radius: 20px;
    padding: 10px;
}

.container > .content > main {
    flex: 1 0 0;
}
.container > .content > aside {
    flex: 0 0 320px;
    margin-left: 10px;
    width: 320px;
}
.container > .content > aside:first-child {
    margin-left: 0;
}

.container > .content > aside:empty {
    display: none;
}

.container > .content > main > .division,
.container > .content > aside > .division {
    border-bottom: 5px solid #1a1c20;
    padding: 10px 0;
}
.container > .content > main > .division:last-child,
.container > .content > aside > .division:last-child {
    border-bottom: none;
}

.container > .content > main > .division > :first-child,
.container > .content > aside > .division > :first-child {
    margin-top: 0;
}
.container > .content > main > .division > :last-child,
.container > .content > aside > .division > :last-child {
    margin-bottom: 0;
}

.search-filter {
    align-items: center;
    display: flex;
    float: right;
}
.search-filter > .filter {
    line-height: 1;
    margin-right: 10px;
}
.search-filter > ul {
    color: #8c898c;
    display: flex;
    font-size: 13px;
    line-height: 22px;
}
.search-filter > ul > li::after {
    content: "|\a0";
}
.search-filter > ul > li:last-child::after {
    content: none;
}
.search-filter > ul > .label::after {
    content: "\a0";
}
.search-filter > ul > li > span {
    color: #ddd8dd;
    font-weight: bold;
}

.home-categories {
    clear: both;
    display: flex;
    flex-wrap: wrap;
}
.home-categories > li {
    flex: 0 1 14.285%;
    padding: 4px;
    box-sizing: border-box;
}
.home-categories.search-categories > li {
    flex-basis: 14.285%;
}
@media (max-width: 1200px) {
    .home-categories > li {
        flex: 0 1 16.667%;
    }
}
@media (max-width: 1100px) {
    .home-categories > li {
        flex: 0 1 20%;
    }
}
.home-categories > li > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.home-categories > li > a > .image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 0;
    padding-top: 133.33%;
    margin-bottom: 5px;
    width: 100%;
}
.home-categories > li > a > .no-image {
    box-shadow: inset 0 0 0.8vw #8c898c;
    color: #8c898c;
    display: flex;
    position: relative;
}
.home-categories > li > a > .no-image > .short-name {
    align-items: center;
    border: 1px solid #8c898c;
    display: flex;
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    justify-content: center;
    overflow: hidden;
    position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}
.home-categories > li > a > .no-image > .short-name.small {
    font-size: 24px;
}
.home-categories > .request-category > a > .no-image {
    box-shadow: inset 0 0 10px #1da674;
}
.home-categories > .request-category > a > .no-image > .short-name {
    border-color: #1da674;
    color: #1da674;
}

.home-categories > li > a > .name {
    border-top: 1px solid #1da674;
    display: block;
    font-family: 'Roboto Slab', sans-serif;
    font-weight: bold;
    word-break: break-word;
}
.home-categories > li > a > .recordable-races,
.home-categories > li > a > .active-races,
.home-categories > li > a > .finished-races {
    font-size: 13px;
}
.home-categories > li > a > .recordable-races {
    color: #beebd1;
}
.home-categories > li > a > .active-races {
    color: #1da674;
}
.home-categories > li > a > .finished-races {
    color: #8c898c;
}

.home-links ul {
    font-size: 15px;
    margin-top: 10px;
}
.home-links li {
    margin-top: 5px;
}
.home-links li .material-icons {
    font-size: 18px;
    margin-right: 4px;
}
.home-links li a {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    text-decoration: none;
}
.home-links li a span {
    text-decoration: underline;
}

.category-intro {
    display: flex;
    padding-bottom: 10px;
}
.category-intro > .image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 96px;
    margin-right: 10px;
    flex: 0 0 72px;
}
.category-info {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
.category-info > .permalink {
    font-size: 13px;
}
.category-info > .title {
    line-height: 35px;
}
.category-info > .title > .name {
    display: inline;
}
.category-info > .title > .short-name,
.category-info > .title > .favourite {
    display: inline-block;
    vertical-align: top;
}
.category-info > .title > .short-name {
    color: #8c898c;
}
.category-info > .title > .short-name::before {
    content: '(';
}
.category-info > .title > .short-name::after {
    content: ')';
}
.category-info > .title > .favourite.undo {
    display: none;
}
.category-info > .title > .favourite > button {
    background: none;
    border: none;
    cursor: pointer;
    height: 24px;
    line-height: 24px;
    padding: 0;
    vertical-align: middle;
    width: 24px;
}

.category-info {
    align-items: baseline;
    display: flex;
    flex-grow: 1;
}

.category-info > .short-name {
    color: #8c898c;
    margin-left: 10px;
}

.category-info > .short-name::before {
    content: '(';
}
.category-info > .short-name::after {
    content: ')';
}
.category-info + .category-meta {
    margin-left: 10px;
    max-width: 320px;
}
.meta-owner-list, .meta-user-list {
    white-space: normal;
}
.meta-owner-list .hidden, .meta-user-list .hidden {
    display: none;
}
.meta-owner-list .hidden, .meta-user-list .see-more::after {
    content: none;
}
.meta-user-list {
    font-size: 13px;
}
.meta-owner-list .user-pop > .avatar {
    margin-right: 2px;
}
.meta-user-list .user-pop > .scrim {
    line-height: inherit;
}
.meta-owner-list > a::after,
.meta-owner-list > span::after,
.meta-user-list > a::after,
.meta-user-list > span::after {
    content: ", ";
    height: auto;
    margin-left: 0;
    width: auto;
}
.meta-owner-list > a:last-child::after,
.meta-owner-list > span:last-child::after,
.meta-user-list > a:last-child::after,
.meta-user-list > span:last-child::after {
    content: none;
}

.category-races > ol {
    display: flex;
    flex-wrap: wrap;
}
.category-races > ol > li {
    flex: 0 1 100%;
}
.category-races > .pagination {
    margin-left: 5px;
    margin-right: 5px;
}
.category-nav {
    align-items: center;
    display: flex;
    float: right;
}
.category-nav + .category-nav {
    margin-right: 10px;
}
.category-nav .material-icons {
    font-size: 22px;
}

.race-list > ol > li > .race-detail {
    box-sizing: border-box;
    color: #8c898c;
    display: flex;
    flex: 1 0 100%;
    font-size: 13px;
    justify-content: space-between;
    padding: 5px 10px 0;
}
.race-list > ol > li > .race-row {
    display: flex;
    margin: 5px;
}
aside .race-list > ol > li > .race-row {
    margin: 0;
}
.race-list > ol > li > .race-row > .race {
    border: 5px solid #1a1c20;
    border-radius: 10px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    text-decoration: none;
    padding: 5px;
}
.race-list > ol > li > .race-detail + .race-row {
    margin-top: 0;
}
.race-list > ol > li > .race-row > .race > .main {
    display: flex;
    align-items: stretch;
}
.race-list > ol > li > .race-row > .race > .main > img {
    margin-right: 5px;
    width: 50px;
}
.race-list > ol > li > .race-row > .race > .main > span {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.race-list > ol > li > .race-row > .race > .main > .right {
    text-align: right;
}

.race-list > ol > li > .race-row > .race .goal,
.race-list > ol > li > .race-row > .race .timer {
    font-size: 20px;
    font-weight: bold;
}
.race-list > ol > li > .race-row > .race .goal {
    height: 1.375em;
    overflow: hidden;
    word-break: break-word;
}
.race-list > ol > li > .race-row > .race .entrant-data {
    align-items: center;
    display: flex;
    justify-content: right;
}
.race-list > ol > li > .race-row > .race .comment-icon {
    font-size: 16px;
    margin-left: 5px;
}
.race-list > ol > li > .race-row > .race .comment-icon.no-comment {
    color: #8c898c;
}


.race-list > ol > li > .race-row > .race .state > .recorded {
    display: inline-flex;
    font-size: 14px;
}
.race-list > ol > li > .race-row > .race .state > .recorded::before {
    content: '(';
}
.race-list > ol > li > .race-row > .race .state > .recorded::after {
    content: ')';
}
.race-list > ol > li > .race-row > .race .category,
.race-list > ol > li > .race-row > .race > .info {
    color: #8c898c;
    font-size: 13px;
    height: 1.375em;
    overflow: hidden;
    word-break: break-word;
}
.race-list > ol > li > .race-row > .race > .info .emote {
    height: 17px;
    width: 17px;
    vertical-align: top;
}
.race-list > ol > li > .race-row > .watch-live {
    border: 5px solid #1a1c20;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.race-list > ol > li > .race-row > .watch-live.disabled {
    color: #666;
    cursor: default;
}
.race-list > ol > li > .race-row > .watch-live > .material-icons {
    font-size: 27.5px;
}
.race-list > ol > li > .race-row > .watch-live > span {
    font-weight: bold;
}

.race-list.recorder.finalized ol:empty::after {
    color: #8c898c;
    content: 'Finalized races will be listed here';
    text-align: center;
    width: 100%;
}
.race-list.recorder > ol > li {
    border-top: 10px solid #1a1c20;
    border-radius: 2px;
    margin: 0 -10px;
    padding: 0 10px;
}
.race-list.recorder > ol > li:first-child {
    border-top: 0;
}
.race-list.recorder > ol > li > .race-row {
    margin-bottom: 0;
}
.race-list.recorder > ol > li > .race-row > .race {
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}
.race-list.recorder > ol > li.finalized {
    border: 5px solid #1a1c20;
    border-radius: 10px;
    color: #8c898c;
    display: flex;
    gap: 5px;
    margin: 5px 0 0;
    padding: 5px;
}
.race-list.recorder > ol > li.finalized.recorded {
    box-shadow: inset 0 0 1px #26dd9a;
}
.race-list.recorder > ol > li.finalized.not-recorded {
    box-shadow: inset 0 0 1px #f08080;
}
.recorder .actions {
    display: flex;
    gap: 5px;
    margin: 15px 10px 0;
}
.recorder .actions .skip button {
    border-color: #a0a0a0;
}
.recorder .race-entrants {
    border: 5px solid #1a1c20;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    flex: 1 0 100%;
    margin: 0 5px 15px 5px;
}
.recorder .entrant-row {
    border-top: 1px solid #1a1c20;
}
.recorder.entrant-row.highlight {
    background: #1a1c20;
}
.recorder .entrant-row.highlight .user-pop > .pronouns {
    background: #212328;
}
.recorder .entrant-row.highlight > .user > .comment.open {
    background-color: #212328;
    border-color: #1a1c20;
    margin: -3px;
}

.category-side-info > :first-child {
    margin-top: 0;
}

.race-intro {
    display: flex;
}
.race-info {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding-bottom: 10px;
}

.race-info > .category > .name {
    font-family: 'Roboto Slab', sans-serif;
    font-size: 28px;
}
.race-info > .category > .short-name {
    color: #8c898c;
}
.race-info > .category > .short-name::before {
    content: '(';
}
.race-info > .category > .short-name::after {
    content: ')';
}
.race-info > .goal {
    font-size: 20px;
    word-break: break-word;
}
.race-info > .info {
    color: #8c898c;
    white-space: pre-wrap;
    word-break: break-word;
}
.race-info > .info .emote {
    height: 22px;
    vertical-align: top;
    width: 22px;
}

.race-entrants > ol > .no-entrants {
    border-top: 1px solid #08090a;
    padding: 5px;
    text-align: center;
}

.entrant-row {
    border-top: 1px solid #08090a;
    display: flex;
    padding: 5px;
}
.entrant-row .material-icons {
    font-size: 18px;
}
.entrant-row > .place {
    flex: 0 0 50px;
    text-align: center;
}
.entrant-row > .user {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}
.entrant-row > .user > .user-pop {
    height: 22px;
}
.entrant-row > .user > .user-pop.anonymous {
    font-style: italic;
}
.entrant-row > .user > .stream > a,
.entrant-row > .user > .stream > span {
    display: block;
    margin-left: 5px;
}
.entrant-row > .user > .stream > a > img,
.entrant-row > .user > .stream > span > img {
    height: 22px;
    position: relative;
        top: 1px;
    vertical-align: top;
}
.entrant-row > .user > .comment {
    border-radius: 6px;
    cursor: default;
    display: flex;
    max-width: 33vw;
    padding: 0 5px;
}
.entrant-row > .user > .comment.open {
    background: #18191d;
    border: 3px solid #17181b;
    margin: -3px;
    z-index: 100;
}
.entrant-row > .user > .comment > i {
    margin-top: 2px;
}
.entrant-row > .user > .comment > .text {
    display: none;
    opacity: 0;
    padding-left: 5px;
    word-break: break-word;
    z-index: 1;
}
.entrant-row > .user > .comment.hidden > .text {
    color: #8c898c;
    font-style: italic;
}
.entrant-row > .user > .comment.open > .text {
    display: block;
    opacity: 1;
}
.entrant-row > .status {
    flex: 0 0 100px;
}
.entrant-row > .status-or-time {
    display: none;
}
.entrant-row > .finish-time {
    flex: 0 0 80px;
    text-align: right;
}
.entrant-row > .score,
.entrant-row > .score-change,
.entrant-data > .score-change {
    align-items: center;
    color: #8c898c;
    display: flex;
    flex: 0 0 50px;
    font-size: 13px;
    justify-content: flex-end;
}
.entrant-row > .score-change.positive,
.entrant-data > .score-change.positive {
    color: #a0e9a0;
}
.entrant-row > .score-change.positive::before,
.entrant-data > .score-change.positive::before {
    content: '+';
}
.entrant-row > .score-change.negative,
.entrant-data > .score-change.negative {
    color: #f08080;
}
.entrant-row > .score-change.negative::before,
.entrant-data > .score-change.negative::before {
    content: '−';
}
.entrant-row > .monitor-actions {
    display: flex;
    flex-direction: row-reverse;
    margin-left: 5px;
    position: relative;
    text-align: right;
    white-space: nowrap;
}
.entrant-row > .monitor-actions.open {
    background: #17181b;
    border-radius: 3px;
    margin: -3px -3px -3px 2px;
    padding: 3px;
}
.entrant-row > .monitor-actions::before {
    content: 'menu';
    font-family: 'Material Icons';
    font-size: 22px;
    line-height: 1;
    padding: 0 3px;
    transition: color 0.2s;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}
.entrant-row > .monitor-actions.empty::before {
    color: #8c898c;
}
.entrant-row > .monitor-actions.open::before {
    position: relative;
    z-index: 101;
}
.entrant-row > .monitor-actions > ul {
    background: #17181b;
    border-radius: 3px;
    display: none;
    z-index: 100;
}
.entrant-row > .monitor-actions.open > ul {
    display: block;
    padding: 3px 34px 3px 3px;
    position: absolute;
        top: 0;
        right: 0;
}
.entrant-row > .monitor-actions > ul:empty::before {
    content: 'No actions available';
    color: #8c898c;
    font-style: italic;
}
.entrant-row > .monitor-actions > ul > li {
    margin-top: 5px;
}
.entrant-row > .monitor-actions > ul > li:first-child {
    margin-top: 0;
}
.entrant-row > .monitor-actions > ul > li .btn {
    align-items: center;
    justify-content: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    height: 26px;
    line-height: 22px;
    margin-left: auto;
    padding: 2px 5px;
    vertical-align: top;
}
.entrant-row > .monitor-actions > ul > li .btn:hover {
    background-color: #3b4b47;
    color: white;
}
.entrant-row > .monitor-actions > ul > li .btn > .material-icons {
    height: 22px;
    line-height: 22px;
    margin-left: 5px;
}
.team-row {
    display: flex;
    padding-left: 55px;
    font-size: 13px;
}
.team-row.no-team {
    color: #8c898c;
    font-style: italic;
}
.team-row .team-pop {
    height: 18px;
    line-height: 18px;
}
.team-row .team-pop .avatar {
    height: 18px;
    width: 18px;
}
.race-entrants > .count {
    border-top: 1px solid #08090a;
    padding: 5px;
    text-align: right;
}

.race-monitor {
    margin-top: 10px;
}
.race-monitor:empty {
    display: none;
}
.race-monitor > ul {
    display: flex;
}
.race-monitor > ul > li {
    margin-left: 10px;
}
.race-monitor > ul > li:first-child {
    margin-left: 0;
}
.race-monitor > ul > li > a {
    display: block;
}
.race-monitor > ul > .invite > form {
    display: flex;
}
.race-monitor > ul > .invite > form label {
    display: none;
}
.race-monitor > ul > .invite > form input {
    width: 180px;
}
.race-monitor > ul > .invite > form button {
    margin-left: 5px;
}
.race-monitor > ul > .state,
.race-monitor > ul > .hold {
    margin-left: 8px;
}
.race-monitor > ul > .state > form > button,
.race-monitor > ul > .hold > form > button {
    align-items: center;
    background: none;
    border: none;
    display: flex;
    height: 33px;
    padding: 0;
}
.race-monitor > ul > .state > form > button > span,
.race-monitor > ul > .hold > form > button > span {
    margin-left: 2px;
}
.btn.dangerous,
.dangerous .btn {
    border-color: #f08080;
}
.btn.dangerous:hover,
.dangerous .btn:hover {
    color: #f08080;
}
.btn.dangerous:disabled,
.btn.dangerous:disabled:hover,
.dangerous .btn:disabled,
.dangerous .btn:disabled:hover {
    border-color: #666;
    color: #666;
}
.race-status {
    background: linear-gradient(to bottom, #1e1f24 0, #191a1e 100%);
    border-radius: 10px;
}
@keyframes go {
    0% {
        box-shadow: inset 0 0 10px transparent;
    }
    10% {
        box-shadow: inset 0 0 10px #26dd9a;
        color: #26dd9a;
    }
    100% {
        box-shadow: inset 0 0 10px transparent;
    }
}
.race-status.go {
    animation: go 1s linear none;
}
.race-status > .timer {
    display: block;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
}
.race-status > .state {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-bottom: 5px;
    text-align: center;
}
.race-status > .state > .value {
    font-size: 20px;
}
.race-status > .state > .help {
    color: #8c898c;
    font-size: 13px;
}
.race-status > .settings {
    color: #8c898c;
    display: flex;
    font-size: 13px;
    gap: 16px;
    justify-content: center;
    padding-bottom: 5px;
}
.race-status > .settings > span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.race-status > .settings > .checked {
    color: #b8b4b8;
}
.race-status > .settings > span > .material-icons {
    font-size: 16px;
    pointer-events: none;
}
.race-status > .settings > span > span {
    pointer-events: none;
}

.race-meta {
    margin: 0 10px;
    padding-bottom: 10px;
    white-space: nowrap;
}
dt {
    color: #8c898c;
    display: inline-block;
    border-bottom: 1px solid #1da674;
    font-size: 13px;
    margin-bottom: 4px;
    white-space: nowrap;
}
dt::after {
    content: ':';
}
dd {
    margin-left: 22px;
}

footer {
    display: flex;
    justify-content: space-between;
    color: #999699;
    font-size: 13px;
    padding-bottom: 10px;
    padding-top: 10px;
}
footer > .links {
    display: flex;
}
footer > .links > ul {
    display: flex;
    flex-direction: column;
    margin-right: 40px;
}
footer > .links > ul > li {
    display: flex;
}
footer > .links > ul > li > a {
    align-items: center;
    display: flex;
    padding: 5px;
    text-decoration: none;
}
footer > .links > ul > li > a > .material-icons,
footer > .links > ul > li > a > img {
    margin-right: 5px;
}
footer > .links > ul > li > a > .material-icons {
    font-size: 18px;
}
footer > .links > ul > li > a > img {
    height: 18px;
    width: 18px;
}
footer > .links > ul > li > a > span {
    text-decoration: underline;
}
footer > .tagline {
    padding: 5px 0;
}
.go-gold {
    color: #e6c762;
}

.layout-form > ul > li {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    border-bottom: 1px solid #111;
}

.layout-form > ul > li > .errorlist {
    color: #f08080;
    font-size: 13px;
}

.layout-form > ul > li > .errorlist,
.layout-form > ul > li > .input,
.layout-form > ul > li > input,
.layout-form > ul > li > select,
.layout-form > ul > li > textarea,
.layout-form > ul > li > .helptext {
    width: 100%;
}

.layout-form > ul > li > select,
.layout-form > ul > li > input[type='checkbox'] {
    margin-left: 10px;
    width: auto;
}

.layout-form > ul > li > .helptext {
    color: #8c898c;
    font-size: 13px;
}
.layout-form > ul > li > .file-initial,
.layout-form > ul > li > .file-clear {
    margin-left: 5px;
}
.layout-form > ul > li > .file-change {
    flex: 0 0 100%;
}

.layout-form > ul > li > label + ul {
    margin-left: 5px;
}
.layout-form > ul > li > label > input {
    margin-right: 6px;
}

.layout-form > button {
    margin-top: 10px;
}

.login-form > .submit-row {
    align-items: center;
    display: flex;
    margin-top: 10px;
}
.login-form > .submit-row > .password-reset-link {
    font-size: 14px;
    margin-left: 10px;
}

.pagination {
    border: 3px solid #1a1c20;
    border-radius: 6px;
    text-align: center;
    margin-top: 10px;
}
.pagination > .step-links {
    display: flex;
}
.pagination > .step-links > a,
.pagination > .step-links > span {
    background: #1e1f24;
    border-left: 3px solid #1a1c20;
    padding: 5px;
    flex: 0 0 15%;
}
.pagination > .step-links > a {
    color: #26dd9a;
    text-decoration: none;
    transition: color 0.2s;
}
.pagination > .step-links > a:hover {
    color: #beebd1;
}
.pagination > .step-links > span {
    cursor: default;
}
.pagination > .step-links > .current {
    background: none;
    cursor: unset;
    flex: 1 1 auto;
}
.pagination > .step-links > :first-child {
    border-left: none;
}

.category-leaderboards > ol {
    display: flex;
    margin-top: 10px;
}
.category-leaderboards > ol > li {
    box-sizing: border-box;
    border: 5px solid #1a1c20;
    border-radius: 10px;
    flex: 0 1 50%;
    margin-left: 10px;
}
@media (max-width: 1060px) {
    .category-leaderboards > ol {
        flex-wrap: wrap;
    }
    .category-leaderboards > ol > li {
        flex: 0 1 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}
.category-leaderboards > ol > li:first-child {
    margin-left: 0;
    margin-top: 0;
}
.category-leaderboards > ol > li > .header {
    align-items: center;
    background: #1a1c20;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}
.category-leaderboards > ol > li > .header > .num-races {
    color: #8c898c;
    font-size: 13px;
}
.category-leaderboards > ol > li > ol > li {
    border-top: 1px solid #08090a;
    display: flex;
    line-height: 32px;
    padding: 5px;
}
.category-leaderboards > ol > li > ol > li > .place {
    flex: 0 0 50px;
    text-align: center;
}
.category-leaderboards > ol > li > ol > li > .user {
    flex: 1 1 auto;
}
.category-leaderboards > ol > li > ol > li > .extra {
    align-items: flex-end;
    display: flex;
    flex: 0 0 80px;
    flex-direction: column;
    font-size: 14px;
    justify-content: center;
    line-height: 1;
}
.category-leaderboards > ol > li > ol > li > .extra > span {
    align-items: center;
    display: flex;
    line-height: 16px;
}
.category-leaderboards > ol > li > ol > li > .extra > span > .material-icons {
    font-size: 14px;
    line-height: 16px;
    margin-right: 2px;
}
.category-leaderboards > ol > li > ol > li > .extra > .best-time {
    color: #ebdfbe;
}
.category-leaderboards > ol > li > ol > li > .extra > .races {
    color: #8c898c;
}

.layout-form > .permission-list {
    border-top: 1px solid #111;
    margin: 10px 50px 20px;
}

.layout-form > .permission-list > li {
    padding: 10px 5px;
}

.layout-form > .controls {
    display: flex;
    justify-content: space-around;
}

.auth-token-list > li {
    align-items: center;
    background: #1a1c20;
    border: 5px solid #1a1c20;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    margin-top: 10px;
}
.auth-token-list > .empty {
    background: none;
    border: none;
    padding: 0;
}
.auth-token-list > li > .app {
    font-weight: bold;
}
.auth-token-list > li > form {
}
.auth-token-list > li > form > .btn {
    padding: 2px;
    margin: 5px;
}
.auth-token-list > li > form > .btn > .material-icons {
    vertical-align: top;
}
.auth-token-list > .scopes {
    border: 5px solid #1a1c20;
    border-top: none;
    border-radius: 0 0 10px 10px;
    font-size: 14px;
}
.auth-token-list > .scopes > li {
    border-top: 1px solid #1a1c20;
    padding: 5px;
}

.nav-tabs {
    border: 4px solid #1a1c20;
    border-radius: 6px;
    display: flex;
    text-align: center;
    margin-bottom: 10px;
}
.nav-tabs > li {
    align-items: stretch;
    border-left: 2px solid #1a1c20;
    display: flex;
    flex: 1 1 0;
}
.nav-tabs > li:first-child {
    border-left: none;
}
.nav-tabs > li > a,
.nav-tabs > li > span {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    padding: 5px;
}
.nav-tabs > li > a {
    color: #26dd9a;
    text-decoration: none;
    transition: color 0.2s;
}
.nav-tabs > li > a:hover {
    color: #beebd1;
}
.nav-tabs > li > span {
    cursor: default;
}
.nav-tabs > .current > a,
.nav-tabs > .current > span {
    background: #1e1f24;
    color: #ddd8dd;
}
.nav-tabs > li .notification {
    background: #26dd9a;
    border-radius: 100%;
    color: #0c0f14;
    margin-left: 5px;
    text-align: center;
    width: 22px;
}
.nav-tabs > .current .notification {
    background: #ddd8dd;
    color: #1e1f24;
}

.copied-to-clipboard {
    background: #1e1f24;
    border: 3px solid #1a1c20;
    border-radius: 6px;
    color: #beebd1;
    font-size: 13px;
    padding: 3px;
    pointer-events: none;
    position: fixed;
    white-space: nowrap;
    z-index: 1000;
}
.copied-to-clipboard::before {
    content: 'Copied to clipboard!';
}

.ui-menu {
    background-color: #25272c;
    border: 3px solid #1a1c20;
    border-radius: 6px;
    margin-top: 2px;
}
.ui-menu .ui-state-active {
    color: #beebd1;
    margin: 0;
}

.search-form label {
    display: flex;
    align-items: center;

}
.search-form label .material-icons {
    margin-right: 5px;
}
.search-form label input {
    flex-grow: 1;
}
.search-form + h3 {
    margin-top: 8px;
}

@media only screen and (max-width: 600px) {
    header {
        height: 34px;
        padding: 0;
    }
    header > .title > h1 {
        padding: 1px 5px;
        position: static;
    }
    header > .title > h1 > a,
    header > .title > h1 > a > img {
        display: block;
        height: 32px;
    }
    header > .title > h1 > a > span {
        display: none;
    }
    header > .current-race {
        display: none;
    }
    header > .user-info {
        padding: 0 5px;
    }
    header > .user-info > .user-pop > .avatar {
        height: 22px;
        width: 22px;
    }
    header > .user-info > .user-pop > .name {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    header > .user-info .logout::after,
    header > .user-info .settings::after {
          font-family: 'Material Icons';
          font-size: 18px;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          text-rendering: optimizeLegibility;
          -moz-osx-font-smoothing: grayscale;
          font-feature-settings: 'liga';
    }
    header > .user-info .logout,
    header > .user-info .settings {
        font-size: 0;
        padding: 2px;
    }
    header > .user-info .login-or-register {
        padding: 3px;
        font-size: 13px;
    }
    header > .user-info .logout::after {
        content: "exit_to_app";
    }
    header > .user-info .settings::after {
        content: "settings";
    }
    .container {
        padding: 0 5px;
    }
    .container > .content {
        flex-direction: column;
        padding: 5px 0;
    }
    .container > .content > main,
    .container > .content > aside {
        border: none;
        border-radius: 3px;
        padding: 5px;
        width: auto;
    }
    .container > .content > aside {
        margin-left: 0;
    }
    footer {
        flex-direction: column;
        padding: 10px 5px;
    }
    footer > .links > ul {
        flex-grow: 1;
        margin-right: 0;
    }
    footer > .tagline {
        align-self: flex-end;
        text-align: right;
        margin-top: 3px;
    }

    h2 {
        font-size: 20px;
    }

    .nav-tabs {
        font-size: 14px;
        margin-bottom: 5px;
    }
    .nav-tabs > li > a,
    .nav-tabs > li > span {
        padding: 3px;
    }

    .pagination > .step-links > a,
    .pagination > .step-links > span:not(.current) {
        font-size: 22px;
        line-height: 1;
    }

    .pagination > .step-links .text,
    .pagination > .step-links > .current > .page {
        display: none;
    }

    .bulletin {
        padding-top: 5px;
    }
    .bulletin > .message {
        font-size: 16px;
        padding: 5px 15px;
    }
    .bulletin > .close {
        padding: 5px;
    }

    .search-filter {
        align-items: flex-end;
        flex-direction: column;
        float: none;
    }
    .search-filter > .filter {
        margin-right: 0;
    }
    .home-categories.search-categories > li,
    .home-categories > li {
        flex-basis: 33.33%;
        font-size: 14px;
    }
    .home-categories > li > a > .no-image {
        box-shadow: inset 0 0 10px #8c898c;
    }

    .category-info > .title {
        line-height: inherit;
    }
    .category-meta {
        display: none;
    }
}