Complete redesign of the osu! website
// ==UserScript==
// @name Osu!Website Redisign
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Complete redesign of the osu! website
// @author -Izuki-
// @match http://osu.ppy.sh/*
// @match https://osu.ppy.sh/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const style = document.createElement('style');
style.type = 'text/css';
const cssCode = `
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 100;
src: url(/assets/fonts/Inter-Thin-BETA.4ef9d4c3.woff2) format("woff2"),url(/assets/fonts/Inter-Thin-BETA.b626874b.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 100;
src: url(/assets/fonts/Inter-ThinItalic-BETA.4b5cc1f0.woff2) format("woff2"),url(/assets/fonts/Inter-ThinItalic-BETA.7f66650e.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 200;
src: url(/assets/fonts/Inter-ExtraLight-BETA.5c80ffcc.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraLight-BETA.0e00ed3d.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 200;
src: url(/assets/fonts/Inter-ExtraLightItalic-BETA.b3427a46.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraLightItalic-BETA.2efa3d3f.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 300;
src: url(/assets/fonts/Inter-Light-BETA.eec5c276.woff2) format("woff2"),url(/assets/fonts/Inter-Light-BETA.cb65f39e.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 300;
src: url(/assets/fonts/Inter-LightItalic-BETA.113703a9.woff2) format("woff2"),url(/assets/fonts/Inter-LightItalic-BETA.754e462d.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 400;
src: url(/assets/fonts/Inter-Regular.1011a20f.woff2) format("woff2"),url(/assets/fonts/Inter-Regular.4c8f4dc3.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 400;
src: url(/assets/fonts/Inter-Italic.45ce8e8e.woff2) format("woff2"),url(/assets/fonts/Inter-Italic.cbbd4102.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 500;
src: url(/assets/fonts/Inter-Medium.1adb92f9.woff2) format("woff2"),url(/assets/fonts/Inter-Medium.85d48661.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 500;
src: url(/assets/fonts/Inter-MediumItalic.53d85fe2.woff2) format("woff2"),url(/assets/fonts/Inter-MediumItalic.e0f527bf.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 600;
src: url(/assets/fonts/Inter-SemiBold.455befe4.woff2) format("woff2"),url(/assets/fonts/Inter-SemiBold.abaecffc.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 600;
src: url(/assets/fonts/Inter-SemiBoldItalic.54c1d270.woff2) format("woff2"),url(/assets/fonts/Inter-SemiBoldItalic.4654cf2b.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 700;
src: url(/assets/fonts/Inter-Bold.608bcc79.woff2) format("woff2"),url(/assets/fonts/Inter-Bold.ac56fedc.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 700;
src: url(/assets/fonts/Inter-BoldItalic.cc464783.woff2) format("woff2"),url(/assets/fonts/Inter-BoldItalic.e19c4d28.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 800;
src: url(/assets/fonts/Inter-ExtraBold.01b96605.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraBold.878506c9.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 800;
src: url(/assets/fonts/Inter-ExtraBoldItalic.87e87931.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraBoldItalic.8a745e7c.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 900;
src: url(/assets/fonts/Inter-Black.1d6c0b9e.woff2) format("woff2"),url(/assets/fonts/Inter-Black.693e6be6.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: Inter;
font-style: italic;
font-weight: 900;
src: url(/assets/fonts/Inter-BlackItalic.1b2f2f94.woff2) format("woff2"),url(/assets/fonts/Inter-BlackItalic.31f1a29d.woff) format("woff")
}
@font-face {
font-named-instance:"Regular";font-family: Inter var;
font-style: normal;
font-weight: 100 900;
src: url(/assets/fonts/Inter-upright.var.a1a71252.woff2) format("woff2 supports variations(gvar)"),url(/assets/fonts/Inter-upright.var.a1a71252.woff2) format("woff2-variations"),url(/assets/fonts/Inter-upright.var.a1a71252.woff2) format("woff2")
}
@font-face {
font-named-instance:"Italic";font-family: Inter var;
font-style: italic;
font-weight: 100 900;
src: url(/assets/fonts/Inter-italic.var.4ca9d8de.woff2) format("woff2 supports variations(gvar)"),url(/assets/fonts/Inter-italic.var.4ca9d8de.woff2) format("woff2-variations"),url(/assets/fonts/Inter-italic.var.4ca9d8de.woff2) format("woff2")
}
@font-face {
font-family: Inter var experimental;
font-style: oblique 0deg 10deg;
font-weight: 100 900;
src: url(/assets/fonts/Inter.var.eed966ca.woff2) format("woff2-variations"),url(/assets/fonts/Inter.var.eed966ca.woff2) format("woff2")
}
.qtip {
box-shadow: none;
direction: ltr;
display: none;
font-size: 10.5px;
left: -28000px;
line-height: 12px;
max-width: 280px;
min-width: 50px;
padding: 0;
position: absolute;
top: -28000px
}
.qtip-content {
word-wrap: break-word;
padding: 5px 9px;
text-align: left
}
.qtip-content,.qtip-titlebar {
overflow: hidden;
position: relative
}
.qtip-titlebar {
border-width: 0 0 1px;
font-weight: 700;
padding: 5px 35px 5px 10px
}
.qtip-titlebar+.qtip-content {
border-top-width: 0!important
}
.qtip-close {
border: 1px solid transparent;
cursor: pointer;
outline: medium none;
position: absolute;
right: -9px;
top: -9px;
z-index: 11
}
.qtip-titlebar .qtip-close {
margin-top: -9px;
right: 4px;
top: 50%
}
* html .qtip-titlebar .qtip-close {
top: 16px
}
.qtip-icon .ui-icon,.qtip-titlebar .ui-icon {
direction: ltr;
display: block;
text-indent: -1000em
}
.qtip-icon,.qtip-icon .ui-icon {
border-radius: 3px;
text-decoration: none
}
.qtip-icon .ui-icon {
background: transparent none no-repeat -100em -100em;
color: inherit;
height: 14px;
line-height: 14px;
font: normal 700 10px/13px Tahoma,sans-serif;
text-align: center;
text-indent: 0;
width: 18px
}
.qtip-default {
background-color: #ffffa3;
border: 1px solid #f1d031;
color: #555
}
.qtip-default .qtip-titlebar {
background-color: #ffef93
}
.qtip-default .qtip-icon {
background: #f1f1f1;
border-color: #ccc;
color: #777
}
.qtip-default .qtip-titlebar .qtip-close {
border-color: #aaa;
color: #111
}
/*! Light tooltip style */
.qtip-light {
background-color: #fff;
border-color: #e2e2e2;
color: #454545
}
.qtip-light .qtip-titlebar {
background-color: #f1f1f1
}
/*! Dark tooltip style */
.qtip-dark {
background-color: #505050;
border-color: #303030;
color: #f3f3f3
}
.qtip-dark .qtip-titlebar {
background-color: #404040
}
.qtip-dark .qtip-icon {
border-color: #444
}
.qtip-dark .qtip-titlebar .ui-state-hover {
border-color: #303030
}
/*! Cream tooltip style */
.qtip-cream {
background-color: #fbf7aa;
border-color: #f9e98e;
color: #a27d35
}
.qtip-cream .qtip-titlebar {
background-color: #f0de7d
}
.qtip-cream .qtip-close .qtip-icon {
background-position: -82px 0
}
/*! Red tooltip style */
.qtip-red {
background-color: #f78b83;
border-color: #d95252;
color: #912323
}
.qtip-red .qtip-titlebar {
background-color: #f06d65
}
.qtip-red .qtip-close .qtip-icon {
background-position: -102px 0
}
.qtip-red .qtip-icon,.qtip-red .qtip-titlebar .ui-state-hover {
border-color: #d95252
}
/*! Green tooltip style */
.qtip-green {
background-color: #caed9e;
border-color: #90d93f;
color: #3f6219
}
.qtip-green .qtip-titlebar {
background-color: #b0de78
}
.qtip-green .qtip-close .qtip-icon {
background-position: -42px 0
}
/*! Blue tooltip style */
.qtip-blue {
background-color: #e5f6fe;
border-color: #add9ed;
color: #5e99bd
}
.qtip-blue .qtip-titlebar {
background-color: #d0e9f5
}
.qtip-blue .qtip-close .qtip-icon {
background-position: -2px 0
}
.qtip-shadow {
box-shadow: 1px 1px 3px 1px rgba(0,0,0,.15)
}
.qtip-bootstrap,.qtip-rounded,.qtip-tipsy {
border-radius: 5px
}
.qtip-rounded .qtip-titlebar {
border-radius: 4px 4px 0 0
}
.qtip-youtube {
background: #4a4a4a;
background-image: -o-linear-gradient(top,#4a4a4a 0,#000 100%);
border: 0 solid transparent;
border-radius: 2px;
box-shadow: 0 0 3px #333;
color: #fff
}
.qtip-youtube .qtip-titlebar {
background-color: #4a4a4a;
background-color: transparent
}
.qtip-youtube .qtip-content {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
font: 12px arial,sans-serif;
padding: .75em
}
.qtip-youtube .qtip-icon {
border-color: #222
}
.qtip-youtube .qtip-titlebar .ui-state-hover {
border-color: #303030
}
.qtip-jtools {
background: #232323;
background: rgba(0,0,0,.7);
background-image: -o-linear-gradient(top,#717171,#232323);
border: 2px solid #f1f1f1;
border-radius: 2px;
box-shadow: 0 0 12px #333
}
.qtip-jtools .qtip-titlebar {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"
}
.qtip-jtools .qtip-content {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)"
}
.qtip-jtools .qtip-content,.qtip-jtools .qtip-titlebar {
background: transparent;
border: 0 dashed transparent;
color: #fff
}
.qtip-jtools .qtip-icon {
border-color: #555
}
.qtip-jtools .qtip-titlebar .ui-state-hover {
border-color: #333
}
.qtip-cluetip {
background-color: #d9d9c2;
border: 0 dashed transparent;
box-shadow: 4px 4px 5px rgba(0,0,0,.4);
color: #111
}
.qtip-cluetip .qtip-titlebar {
background-color: #87876a;
border: 0 dashed transparent;
color: #fff
}
.qtip-cluetip .qtip-icon {
border-color: #808064
}
.qtip-cluetip .qtip-titlebar .ui-state-hover {
border-color: #696952;
color: #696952
}
.qtip-tipsy {
background: #000;
background: rgba(0,0,0,.87);
border: 0 solid transparent;
color: #fff;
font-family: Lucida Grande,sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 16px;
text-shadow: 0 1px #000
}
.qtip-tipsy .qtip-titlebar {
background-color: transparent;
padding: 6px 35px 0 10px
}
.qtip-tipsy .qtip-content {
padding: 6px 10px
}
.qtip-tipsy .qtip-icon {
border-color: #222;
text-shadow: none
}
.qtip-tipsy .qtip-titlebar .ui-state-hover {
border-color: #303030
}
.qtip-tipped {
background-color: #f9f9f9;
border: 3px solid #959fa9;
border-radius: 3px;
color: #454545;
font-family: serif;
font-weight: 400
}
.qtip-tipped .qtip-titlebar {
background: #3a79b8;
background-image: -o-linear-gradient(top,#3a79b8,#2e629d);
border-bottom-width: 0;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"
}
.qtip-tipped .qtip-icon {
background: #285589;
border: 2px solid #285589
}
.qtip-tipped .qtip-icon .ui-icon {
background-color: #fbfbfb;
color: #555
}
.qtip-bootstrap {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
color: #333;
font-size: 14px;
line-height: 20px;
padding: 1px
}
.qtip-bootstrap .qtip-titlebar {
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin: 0;
padding: 8px 14px
}
.qtip-bootstrap .qtip-titlebar .qtip-close {
border-style: none;
right: 11px;
top: 45%
}
.qtip-bootstrap .qtip-content {
padding: 9px 14px
}
.qtip-bootstrap .qtip-icon {
background: transparent
}
.qtip-bootstrap .qtip-icon .ui-icon {
color: #000;
filter: alpha(opacity=20);
float: right;
font-size: 20px;
font-weight: 700;
height: auto;
line-height: 18px;
opacity: .2;
text-shadow: 0 1px 0 #fff;
width: auto
}
.qtip-bootstrap .qtip-icon .ui-icon:hover {
color: #000;
cursor: pointer;
filter: alpha(opacity=40);
opacity: .4;
text-decoration: none
}
.qtip:not(.ie9haxors) div.qtip-content,.qtip:not(.ie9haxors) div.qtip-titlebar {
filter: none;
}
.qtip .qtip-tip {
margin: 0 auto;
overflow: hidden;
z-index: 10
}
.qtip .qtip-tip,x:-o-prefocus {
visibility: hidden
}
.qtip .qtip-tip,.qtip .qtip-tip .qtip-vml,.qtip .qtip-tip canvas {
background: transparent;
border: 0 dashed transparent;
color: #123456;
position: absolute
}
.qtip .qtip-tip canvas {
left: 0;
top: 0
}
.qtip .qtip-tip .qtip-vml {
behavior: url(#default#VML);
display: inline-block;
visibility: visible
}
#qtip-overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%
}
#qtip-overlay.blurs {
cursor: pointer
}
#qtip-overlay div {
background-color: #000;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
height: 100%;
left: 0;
opacity: .7;
position: absolute;
top: 0;
width: 100%
}
.qtipmodal-ie6fix {
position: absolute!important
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
.pswp {
-webkit-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
display: none;
height: 100%;
left: 0;
outline: none;
overflow: hidden;
position: absolute;
top: 0;
touch-action: none;
width: 100%;
z-index: 1500
}
.pswp * {
box-sizing: border-box
}
.pswp img {
max-width: none
}
.pswp--animate_opacity {
opacity: .001;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
will-change: opacity
}
.pswp--open {
display: block
}
.pswp--zoom-allowed .pswp__img {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in
}
.pswp--zoomed-in .pswp__img {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab
}
.pswp--dragging .pswp__img {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing
}
.pswp__bg {
-webkit-backface-visibility: hidden;
background: #000;
opacity: 0;
transform: translateZ(0)
}
.pswp__bg,.pswp__scroll-wrap {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.pswp__scroll-wrap {
overflow: hidden
}
.pswp__container,.pswp__zoom-wrap {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
touch-action: none
}
.pswp__container,.pswp__img {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.pswp__zoom-wrap {
position: absolute;
transform-origin: left top;
transition: transform 333ms cubic-bezier(.4,0,.22,1);
width: 100%
}
.pswp__bg {
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
will-change: opacity
}
.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap {
transition: none
}
.pswp__container,.pswp__zoom-wrap {
-webkit-backface-visibility: hidden
}
.pswp__item {
bottom: 0;
overflow: hidden;
right: 0
}
.pswp__img,.pswp__item {
left: 0;
position: absolute;
top: 0
}
.pswp__img {
height: auto;
width: auto
}
.pswp__img--placeholder {
-webkit-backface-visibility: hidden
}
.pswp__img--placeholder--blank {
background: #222
}
.pswp--ie .pswp__img {
height: auto!important;
left: 0;
top: 0;
width: 100%!important
}
.pswp__error-msg {
color: #ccc;
font-size: 14px;
left: 0;
line-height: 16px;
margin-top: -8px;
position: absolute;
text-align: center;
top: 50%;
width: 100%
}
.pswp__error-msg a {
color: #ccc;
text-decoration: underline
}
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
.pswp__button {
-webkit-appearance: none;
background: none;
border: 0;
box-shadow: none;
cursor: pointer;
display: block;
float: right;
height: 44px;
margin: 0;
overflow: visible;
padding: 0;
position: relative;
transition: opacity .2s;
width: 44px
}
.pswp__button:focus,.pswp__button:hover {
opacity: 1
}
.pswp__button:active {
opacity: .9;
outline: none
}
.pswp__button::-moz-focus-inner {
border: 0;
padding: 0
}
.pswp__ui--over-close .pswp__button--close {
opacity: 1
}
.pswp__button,.pswp__button--arrow--left:before,.pswp__button--arrow--right:before {
background: url(/assets/images/default-skin.0ff4d621.png) 0 0 no-repeat;
background-size: 264px 88px;
height: 44px;
width: 44px
}
@media (-webkit-min-device-pixel-ratio: 1.09375),(-webkit-min-device-pixel-ratio:1.1),(min-resolution:1.1dppx),(min-resolution:105dpi) {
.pswp--svg .pswp__button,.pswp--svg .pswp__button--arrow--left:before,.pswp--svg .pswp__button--arrow--right:before {
background-image:url(/assets/images/default-skin.f64c3af3.svg)
}
.pswp--svg .pswp__button--arrow--left,.pswp--svg .pswp__button--arrow--right {
background: none
}
}
.pswp__button--close {
background-position: 0 -44px
}
.pswp__button--share {
background-position: -44px -44px
}
.pswp__button--fs {
display: none
}
.pswp--supports-fs .pswp__button--fs {
display: block
}
.pswp--fs .pswp__button--fs {
background-position: -44px 0
}
.pswp__button--zoom {
background-position: -88px 0;
display: none
}
.pswp--zoom-allowed .pswp__button--zoom {
display: block
}
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0
}
.pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right {
visibility: hidden
}
.pswp__button--arrow--left,.pswp__button--arrow--right {
background: none;
height: 100px;
margin-top: -50px;
position: absolute;
top: 50%;
width: 70px
}
.pswp__button--arrow--left {
left: 0
}
.pswp__button--arrow--right {
right: 0
}
.pswp__button--arrow--left:before,.pswp__button--arrow--right:before {
background-color: rgba(0,0,0,.3);
content: "";
height: 30px;
position: absolute;
top: 35px;
width: 32px
}
.pswp__button--arrow--left:before {
background-position: -138px -44px;
left: 6px
}
.pswp__button--arrow--right:before {
background-position: -94px -44px;
right: 6px
}
.pswp__counter,.pswp__share-modal {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.pswp__share-modal {
-webkit-backface-visibility: hidden;
background: rgba(0,0,0,.5);
display: block;
height: 100%;
left: 0;
opacity: 0;
padding: 10px;
position: absolute;
top: 0;
transition: opacity .25s ease-out;
width: 100%;
will-change: opacity;
z-index: 1600
}
.pswp__share-modal--hidden {
display: none
}
.pswp__share-tooltip {
-webkit-backface-visibility: hidden;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,.25);
display: block;
position: absolute;
right: 44px;
top: 56px;
transform: translateY(6px);
transition: transform .25s;
width: auto;
will-change: transform;
z-index: 1620
}
.pswp__share-tooltip a {
display: block;
font-size: 14px;
line-height: 18px;
padding: 8px 12px
}
.pswp__share-tooltip a,.pswp__share-tooltip a:hover {
color: #000;
text-decoration: none
}
.pswp__share-tooltip a:first-child {
border-radius: 2px 2px 0 0
}
.pswp__share-tooltip a:last-child {
border-radius: 0 0 2px 2px
}
.pswp__share-modal--fade-in {
opacity: 1
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
transform: translateY(0)
}
.pswp--touch .pswp__share-tooltip a {
padding: 16px 12px
}
a.pswp__share--facebook:before {
border: 6px solid transparent;
border-bottom-color: #fff;
content: "";
display: block;
height: 0;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none;
position: absolute;
right: 15px;
top: -12px;
width: 0
}
a.pswp__share--facebook:hover {
background: #3e5c9a;
color: #fff
}
a.pswp__share--facebook:hover:before {
border-bottom-color: #3e5c9a
}
a.pswp__share--twitter:hover {
background: #55acee;
color: #fff
}
a.pswp__share--pinterest:hover {
background: #ccc;
color: #ce272d
}
a.pswp__share--download:hover {
background: #ddd
}
.pswp__counter {
color: #fff;
font-size: 13px;
height: 44px;
left: 0;
line-height: 44px;
opacity: .75;
padding: 0 10px;
position: absolute;
top: 0
}
.pswp__caption {
bottom: 0;
left: 0;
min-height: 44px;
position: absolute;
width: 100%
}
.pswp__caption small {
color: #bbb;
font-size: 11px
}
.pswp__caption__center {
color: #ccc;
font-size: 13px;
line-height: 20px;
margin: 0 auto;
max-width: 420px;
padding: 10px;
text-align: left
}
.pswp__caption--empty {
display: none
}
.pswp__caption--fake {
visibility: hidden
}
.pswp__preloader {
direction: ltr;
height: 44px;
left: 50%;
margin-left: -22px;
opacity: 0;
position: absolute;
top: 0;
transition: opacity .25s ease-out;
width: 44px;
will-change: opacity
}
.pswp__preloader__icn {
height: 20px;
margin: 12px;
width: 20px
}
.pswp__preloader--active {
opacity: 1
}
.pswp__preloader--active .pswp__preloader__icn {
background: url(/assets/images/preloader.14d740b6.gif) 0 0 no-repeat
}
.pswp--css_animation .pswp__preloader--active {
opacity: 1
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
animation: clockwise .5s linear infinite
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
animation: donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite
}
.pswp--css_animation .pswp__preloader__icn {
background: none;
height: 14px;
left: 15px;
margin: 0;
opacity: .75;
position: absolute;
top: 15px;
width: 14px
}
.pswp--css_animation .pswp__preloader__cut {
height: 14px;
overflow: hidden;
position: relative;
width: 7px
}
.pswp--css_animation .pswp__preloader__donut {
background: none;
border-color: #fff #fff transparent transparent;
border-radius: 50%;
border-style: solid;
border-width: 2px;
box-sizing: border-box;
height: 14px;
left: 0;
margin: 0;
position: absolute;
top: 0;
width: 14px
}
@media screen and (max-width: 1024px) {
.pswp__preloader {
float:right;
left: auto;
margin: 0;
position: relative;
top: auto
}
}
@keyframes clockwise {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
@keyframes donut-rotate {
0% {
transform: rotate(0)
}
50% {
transform: rotate(-140deg)
}
to {
transform: rotate(0)
}
}
.pswp__ui {
-webkit-font-smoothing: auto;
opacity: 1;
visibility: visible;
z-index: 1550
}
.pswp__top-bar {
height: 44px;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right,.pswp__caption,.pswp__top-bar {
-webkit-backface-visibility: hidden;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
will-change: opacity
}
.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible
}
.pswp__caption,.pswp__top-bar {
background-color: rgba(0,0,0,.5)
}
.pswp__ui--fit .pswp__caption,.pswp__ui--fit .pswp__top-bar {
background-color: rgba(0,0,0,.3)
}
.pswp__ui--idle .pswp__button--arrow--left,.pswp__ui--idle .pswp__button--arrow--right,.pswp__ui--idle .pswp__top-bar {
opacity: 0
}
.pswp__ui--hidden .pswp__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__top-bar {
opacity: .001
}
.pswp__ui--one-slide .pswp__button--arrow--left,.pswp__ui--one-slide .pswp__button--arrow--right,.pswp__ui--one-slide .pswp__counter {
display: none
}
.pswp__element--disabled {
display: none!important
}
.pswp--minimal--dark .pswp__top-bar {
background: none
}
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
.fa,.fab,.fal,.far,.fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto
}
.fa-lg {
font-size: 1.33333333em;
line-height: .75em;
vertical-align: -.0667em
}
.fa-xs {
font-size: .75em
}
.fa-sm {
font-size: .875em
}
.fa-1x {
font-size: 1em
}
.fa-2x {
font-size: 2em
}
.fa-3x {
font-size: 3em
}
.fa-4x {
font-size: 4em
}
.fa-5x {
font-size: 5em
}
.fa-6x {
font-size: 6em
}
.fa-7x {
font-size: 7em
}
.fa-8x {
font-size: 8em
}
.fa-9x {
font-size: 9em
}
.fa-10x {
font-size: 10em
}
.fa-fw {
text-align: center;
width: 1.25em
}
.fa-ul {
list-style-type: none;
margin-left: 2.5em;
padding-left: 0
}
.fa-ul>li {
position: relative
}
.fa-li {
left: -2em;
line-height: inherit;
position: absolute;
text-align: center;
width: 2em
}
.fa-border {
border: .08em solid #eee;
border-radius: .1em;
padding: .2em .25em .15em
}
.fa-pull-left {
float: left
}
.fa-pull-right {
float: right
}
.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left {
margin-right: .3em
}
.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right {
margin-left: .3em
}
.fa-spin {
animation: fa-spin 2s linear infinite
}
.fa-pulse {
animation: fa-spin 1s steps(8) infinite
}
@keyframes fa-spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
.fa-rotate-90 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
transform: rotate(90deg)
}
.fa-rotate-180 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
transform: rotate(180deg)
}
.fa-rotate-270 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
transform: rotate(270deg)
}
.fa-flip-horizontal {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
transform: scaleX(-1)
}
.fa-flip-vertical {
transform: scaleY(-1)
}
.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
}
.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical {
transform: scale(-1)
}
:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90 {
filter: none
}
.fa-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2em
}
.fa-stack-1x,.fa-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%
}
.fa-stack-1x {
line-height: inherit
}
.fa-stack-2x {
font-size: 2em
}
.fa-inverse {
color: #fff
}
.fa-500px:before {
content: "\f26e"
}
.fa-accessible-icon:before {
content: "\f368"
}
.fa-accusoft:before {
content: "\f369"
}
.fa-acquisitions-incorporated:before {
content: "\f6af"
}
.fa-ad:before {
content: "\f641"
}
.fa-address-book:before {
content: "\f2b9"
}
.fa-address-card:before {
content: "\f2bb"
}
.fa-adjust:before {
content: "\f042"
}
.fa-adn:before {
content: "\f170"
}
.fa-adobe:before {
content: "\f778"
}
.fa-adversal:before {
content: "\f36a"
}
.fa-affiliatetheme:before {
content: "\f36b"
}
.fa-air-freshener:before {
content: "\f5d0"
}
.fa-airbnb:before {
content: "\f834"
}
.fa-algolia:before {
content: "\f36c"
}
.fa-align-center:before {
content: "\f037"
}
.fa-align-justify:before {
content: "\f039"
}
.fa-align-left:before {
content: "\f036"
}
.fa-align-right:before {
content: "\f038"
}
.fa-alipay:before {
content: "\f642"
}
.fa-allergies:before {
content: "\f461"
}
.fa-amazon:before {
content: "\f270"
}
.fa-amazon-pay:before {
content: "\f42c"
}
.fa-ambulance:before {
content: "\f0f9"
}
.fa-american-sign-language-interpreting:before {
content: "\f2a3"
}
.fa-amilia:before {
content: "\f36d"
}
.fa-anchor:before {
content: "\f13d"
}
.fa-android:before {
content: "\f17b"
}
.fa-angellist:before {
content: "\f209"
}
.fa-angle-double-down:before {
content: "\f103"
}
.fa-angle-double-left:before {
content: "\f100"
}
.fa-angle-double-right:before {
content: "\f101"
}
.fa-angle-double-up:before {
content: "\f102"
}
.fa-angle-down:before {
content: "\f107"
}
.fa-angle-left:before {
content: "\f104"
}
.fa-angle-right:before {
content: "\f105"
}
.fa-angle-up:before {
content: "\f106"
}
.fa-angry:before {
content: "\f556"
}
.fa-angrycreative:before {
content: "\f36e"
}
.fa-angular:before {
content: "\f420"
}
.fa-ankh:before {
content: "\f644"
}
.fa-app-store:before {
content: "\f36f"
}
.fa-app-store-ios:before {
content: "\f370"
}
.fa-apper:before {
content: "\f371"
}
.fa-apple:before {
content: "\f179"
}
.fa-apple-alt:before {
content: "\f5d1"
}
.fa-apple-pay:before {
content: "\f415"
}
.fa-archive:before {
content: "\f187"
}
.fa-archway:before {
content: "\f557"
}
.fa-arrow-alt-circle-down:before {
content: "\f358"
}
.fa-arrow-alt-circle-left:before {
content: "\f359"
}
.fa-arrow-alt-circle-right:before {
content: "\f35a"
}
.fa-arrow-alt-circle-up:before {
content: "\f35b"
}
.fa-arrow-circle-down:before {
content: "\f0ab"
}
.fa-arrow-circle-left:before {
content: "\f0a8"
}
.fa-arrow-circle-right:before {
content: "\f0a9"
}
.fa-arrow-circle-up:before {
content: "\f0aa"
}
.fa-arrow-down:before {
content: "\f063"
}
.fa-arrow-left:before {
content: "\f060"
}
.fa-arrow-right:before {
content: "\f061"
}
.fa-arrow-up:before {
content: "\f062"
}
.fa-arrows-alt:before {
content: "\f0b2"
}
.fa-arrows-alt-h:before {
content: "\f337"
}
.fa-arrows-alt-v:before {
content: "\f338"
}
.fa-artstation:before {
content: "\f77a"
}
.fa-assistive-listening-systems:before {
content: "\f2a2"
}
.fa-asterisk:before {
content: "\f069"
}
.fa-asymmetrik:before {
content: "\f372"
}
.fa-at:before {
content: "\f1fa"
}
.fa-atlas:before {
content: "\f558"
}
.fa-atlassian:before {
content: "\f77b"
}
.fa-atom:before {
content: "\f5d2"
}
.fa-audible:before {
content: "\f373"
}
.fa-audio-description:before {
content: "\f29e"
}
.fa-autoprefixer:before {
content: "\f41c"
}
.fa-avianex:before {
content: "\f374"
}
.fa-aviato:before {
content: "\f421"
}
.fa-award:before {
content: "\f559"
}
.fa-aws:before {
content: "\f375"
}
.fa-baby:before {
content: "\f77c"
}
.fa-baby-carriage:before {
content: "\f77d"
}
.fa-backspace:before {
content: "\f55a"
}
.fa-backward:before {
content: "\f04a"
}
.fa-bacon:before {
content: "\f7e5"
}
.fa-balance-scale:before {
content: "\f24e"
}
.fa-balance-scale-left:before {
content: "\f515"
}
.fa-balance-scale-right:before {
content: "\f516"
}
.fa-ban:before {
content: "\f05e"
}
.fa-band-aid:before {
content: "\f462"
}
.fa-bandcamp:before {
content: "\f2d5"
}
.fa-barcode:before {
content: "\f02a"
}
.fa-bars:before {
content: "\f0c9"
}
.fa-baseball-ball:before {
content: "\f433"
}
.fa-basketball-ball:before {
content: "\f434"
}
.fa-bath:before {
content: "\f2cd"
}
.fa-battery-empty:before {
content: "\f244"
}
.fa-battery-full:before {
content: "\f240"
}
.fa-battery-half:before {
content: "\f242"
}
.fa-battery-quarter:before {
content: "\f243"
}
.fa-battery-three-quarters:before {
content: "\f241"
}
.fa-battle-net:before {
content: "\f835"
}
.fa-bed:before {
content: "\f236"
}
.fa-beer:before {
content: "\f0fc"
}
.fa-behance:before {
content: "\f1b4"
}
.fa-behance-square:before {
content: "\f1b5"
}
.fa-bell:before {
content: "\f0f3"
}
.fa-bell-slash:before {
content: "\f1f6"
}
.fa-bezier-curve:before {
content: "\f55b"
}
.fa-bible:before {
content: "\f647"
}
.fa-bicycle:before {
content: "\f206"
}
.fa-biking:before {
content: "\f84a"
}
.fa-bimobject:before {
content: "\f378"
}
.fa-binoculars:before {
content: "\f1e5"
}
.fa-biohazard:before {
content: "\f780"
}
.fa-birthday-cake:before {
content: "\f1fd"
}
.fa-bitbucket:before {
content: "\f171"
}
.fa-bitcoin:before {
content: "\f379"
}
.fa-bity:before {
content: "\f37a"
}
.fa-black-tie:before {
content: "\f27e"
}
.fa-blackberry:before {
content: "\f37b"
}
.fa-blender:before {
content: "\f517"
}
.fa-blender-phone:before {
content: "\f6b6"
}
.fa-blind:before {
content: "\f29d"
}
.fa-blog:before {
content: "\f781"
}
.fa-blogger:before {
content: "\f37c"
}
.fa-blogger-b:before {
content: "\f37d"
}
.fa-bluetooth:before {
content: "\f293"
}
.fa-bluetooth-b:before {
content: "\f294"
}
.fa-bold:before {
content: "\f032"
}
.fa-bolt:before {
content: "\f0e7"
}
.fa-bomb:before {
content: "\f1e2"
}
.fa-bone:before {
content: "\f5d7"
}
.fa-bong:before {
content: "\f55c"
}
.fa-book:before {
content: "\f02d"
}
.fa-book-dead:before {
content: "\f6b7"
}
.fa-book-medical:before {
content: "\f7e6"
}
.fa-book-open:before {
content: "\f518"
}
.fa-book-reader:before {
content: "\f5da"
}
.fa-bookmark:before {
content: "\f02e"
}
.fa-bootstrap:before {
content: "\f836"
}
.fa-border-all:before {
content: "\f84c"
}
.fa-border-none:before {
content: "\f850"
}
.fa-border-style:before {
content: "\f853"
}
.fa-bowling-ball:before {
content: "\f436"
}
.fa-box:before {
content: "\f466"
}
.fa-box-open:before {
content: "\f49e"
}
.fa-boxes:before {
content: "\f468"
}
.fa-braille:before {
content: "\f2a1"
}
.fa-brain:before {
content: "\f5dc"
}
.fa-bread-slice:before {
content: "\f7ec"
}
.fa-briefcase:before {
content: "\f0b1"
}
.fa-briefcase-medical:before {
content: "\f469"
}
.fa-broadcast-tower:before {
content: "\f519"
}
.fa-broom:before {
content: "\f51a"
}
.fa-brush:before {
content: "\f55d"
}
.fa-btc:before {
content: "\f15a"
}
.fa-buffer:before {
content: "\f837"
}
.fa-bug:before {
content: "\f188"
}
.fa-building:before {
content: "\f1ad"
}
.fa-bullhorn:before {
content: "\f0a1"
}
.fa-bullseye:before {
content: "\f140"
}
.fa-burn:before {
content: "\f46a"
}
.fa-buromobelexperte:before {
content: "\f37f"
}
.fa-bus:before {
content: "\f207"
}
.fa-bus-alt:before {
content: "\f55e"
}
.fa-business-time:before {
content: "\f64a"
}
.fa-buysellads:before {
content: "\f20d"
}
.fa-calculator:before {
content: "\f1ec"
}
.fa-calendar:before {
content: "\f133"
}
.fa-calendar-alt:before {
content: "\f073"
}
.fa-calendar-check:before {
content: "\f274"
}
.fa-calendar-day:before {
content: "\f783"
}
.fa-calendar-minus:before {
content: "\f272"
}
.fa-calendar-plus:before {
content: "\f271"
}
.fa-calendar-times:before {
content: "\f273"
}
.fa-calendar-week:before {
content: "\f784"
}
.fa-camera:before {
content: "\f030"
}
.fa-camera-retro:before {
content: "\f083"
}
.fa-campground:before {
content: "\f6bb"
}
.fa-canadian-maple-leaf:before {
content: "\f785"
}
.fa-candy-cane:before {
content: "\f786"
}
.fa-cannabis:before {
content: "\f55f"
}
.fa-capsules:before {
content: "\f46b"
}
.fa-car:before {
content: "\f1b9"
}
.fa-car-alt:before {
content: "\f5de"
}
.fa-car-battery:before {
content: "\f5df"
}
.fa-car-crash:before {
content: "\f5e1"
}
.fa-car-side:before {
content: "\f5e4"
}
.fa-caret-down:before {
content: "\f0d7"
}
.fa-caret-left:before {
content: "\f0d9"
}
.fa-caret-right:before {
content: "\f0da"
}
.fa-caret-square-down:before {
content: "\f150"
}
.fa-caret-square-left:before {
content: "\f191"
}
.fa-caret-square-right:before {
content: "\f152"
}
.fa-caret-square-up:before {
content: "\f151"
}
.fa-caret-up:before {
content: "\f0d8"
}
.fa-carrot:before {
content: "\f787"
}
.fa-cart-arrow-down:before {
content: "\f218"
}
.fa-cart-plus:before {
content: "\f217"
}
.fa-cash-register:before {
content: "\f788"
}
.fa-cat:before {
content: "\f6be"
}
.fa-cc-amazon-pay:before {
content: "\f42d"
}
.fa-cc-amex:before {
content: "\f1f3"
}
.fa-cc-apple-pay:before {
content: "\f416"
}
.fa-cc-diners-club:before {
content: "\f24c"
}
.fa-cc-discover:before {
content: "\f1f2"
}
.fa-cc-jcb:before {
content: "\f24b"
}
.fa-cc-mastercard:before {
content: "\f1f1"
}
.fa-cc-paypal:before {
content: "\f1f4"
}
.fa-cc-stripe:before {
content: "\f1f5"
}
.fa-cc-visa:before {
content: "\f1f0"
}
.fa-centercode:before {
content: "\f380"
}
.fa-centos:before {
content: "\f789"
}
.fa-certificate:before {
content: "\f0a3"
}
.fa-chair:before {
content: "\f6c0"
}
.fa-chalkboard:before {
content: "\f51b"
}
.fa-chalkboard-teacher:before {
content: "\f51c"
}
.fa-charging-station:before {
content: "\f5e7"
}
.fa-chart-area:before {
content: "\f1fe"
}
.fa-chart-bar:before {
content: "\f080"
}
.fa-chart-line:before {
content: "\f201"
}
.fa-chart-pie:before {
content: "\f200"
}
.fa-check:before {
content: "\f00c"
}
.fa-check-circle:before {
content: "\f058"
}
.fa-check-double:before {
content: "\f560"
}
.fa-check-square:before {
content: "\f14a"
}
.fa-cheese:before {
content: "\f7ef"
}
.fa-chess:before {
content: "\f439"
}
.fa-chess-bishop:before {
content: "\f43a"
}
.fa-chess-board:before {
content: "\f43c"
}
.fa-chess-king:before {
content: "\f43f"
}
.fa-chess-knight:before {
content: "\f441"
}
.fa-chess-pawn:before {
content: "\f443"
}
.fa-chess-queen:before {
content: "\f445"
}
.fa-chess-rook:before {
content: "\f447"
}
.fa-chevron-circle-down:before {
content: "\f13a"
}
.fa-chevron-circle-left:before {
content: "\f137"
}
.fa-chevron-circle-right:before {
content: "\f138"
}
.fa-chevron-circle-up:before {
content: "\f139"
}
.fa-chevron-down:before {
content: "\f078"
}
.fa-chevron-left:before {
content: "\f053"
}
.fa-chevron-right:before {
content: "\f054"
}
.fa-chevron-up:before {
content: "\f077"
}
.fa-child:before {
content: "\f1ae"
}
.fa-chrome:before {
content: "\f268"
}
.fa-chromecast:before {
content: "\f838"
}
.fa-church:before {
content: "\f51d"
}
.fa-circle:before {
content: "\f111"
}
.fa-circle-notch:before {
content: "\f1ce"
}
.fa-city:before {
content: "\f64f"
}
.fa-clinic-medical:before {
content: "\f7f2"
}
.fa-clipboard:before {
content: "\f328"
}
.fa-clipboard-check:before {
content: "\f46c"
}
.fa-clipboard-list:before {
content: "\f46d"
}
.fa-clock:before {
content: "\f017"
}
.fa-clone:before {
content: "\f24d"
}
.fa-closed-captioning:before {
content: "\f20a"
}
.fa-cloud:before {
content: "\f0c2"
}
.fa-cloud-download-alt:before {
content: "\f381"
}
.fa-cloud-meatball:before {
content: "\f73b"
}
.fa-cloud-moon:before {
content: "\f6c3"
}
.fa-cloud-moon-rain:before {
content: "\f73c"
}
.fa-cloud-rain:before {
content: "\f73d"
}
.fa-cloud-showers-heavy:before {
content: "\f740"
}
.fa-cloud-sun:before {
content: "\f6c4"
}
.fa-cloud-sun-rain:before {
content: "\f743"
}
.fa-cloud-upload-alt:before {
content: "\f382"
}
.fa-cloudscale:before {
content: "\f383"
}
.fa-cloudsmith:before {
content: "\f384"
}
.fa-cloudversify:before {
content: "\f385"
}
.fa-cocktail:before {
content: "\f561"
}
.fa-code:before {
content: "\f121"
}
.fa-code-branch:before {
content: "\f126"
}
.fa-codepen:before {
content: "\f1cb"
}
.fa-codiepie:before {
content: "\f284"
}
.fa-coffee:before {
content: "\f0f4"
}
.fa-cog:before {
content: "\f013"
}
.fa-cogs:before {
content: "\f085"
}
.fa-coins:before {
content: "\f51e"
}
.fa-columns:before {
content: "\f0db"
}
.fa-comment:before {
content: "\f075"
}
.fa-comment-alt:before {
content: "\f27a"
}
.fa-comment-dollar:before {
content: "\f651"
}
.fa-comment-dots:before {
content: "\f4ad"
}
.fa-comment-medical:before {
content: "\f7f5"
}
.fa-comment-slash:before {
content: "\f4b3"
}
.fa-comments:before {
content: "\f086"
}
.fa-comments-dollar:before {
content: "\f653"
}
.fa-compact-disc:before {
content: "\f51f"
}
.fa-compass:before {
content: "\f14e"
}
.fa-compress:before {
content: "\f066"
}
.fa-compress-arrows-alt:before {
content: "\f78c"
}
.fa-concierge-bell:before {
content: "\f562"
}
.fa-confluence:before {
content: "\f78d"
}
.fa-connectdevelop:before {
content: "\f20e"
}
.fa-contao:before {
content: "\f26d"
}
.fa-cookie:before {
content: "\f563"
}
.fa-cookie-bite:before {
content: "\f564"
}
.fa-copy:before {
content: "\f0c5"
}
.fa-copyright:before {
content: "\f1f9"
}
.fa-couch:before {
content: "\f4b8"
}
.fa-cpanel:before {
content: "\f388"
}
.fa-creative-commons:before {
content: "\f25e"
}
.fa-creative-commons-by:before {
content: "\f4e7"
}
.fa-creative-commons-nc:before {
content: "\f4e8"
}
.fa-creative-commons-nc-eu:before {
content: "\f4e9"
}
.fa-creative-commons-nc-jp:before {
content: "\f4ea"
}
.fa-creative-commons-nd:before {
content: "\f4eb"
}
.fa-creative-commons-pd:before {
content: "\f4ec"
}
.fa-creative-commons-pd-alt:before {
content: "\f4ed"
}
.fa-creative-commons-remix:before {
content: "\f4ee"
}
.fa-creative-commons-sa:before {
content: "\f4ef"
}
.fa-creative-commons-sampling:before {
content: "\f4f0"
}
.fa-creative-commons-sampling-plus:before {
content: "\f4f1"
}
.fa-creative-commons-share:before {
content: "\f4f2"
}
.fa-creative-commons-zero:before {
content: "\f4f3"
}
.fa-credit-card:before {
content: "\f09d"
}
.fa-critical-role:before {
content: "\f6c9"
}
.fa-crop:before {
content: "\f125"
}
.fa-crop-alt:before {
content: "\f565"
}
.fa-cross:before {
content: "\f654"
}
.fa-crosshairs:before {
content: "\f05b"
}
.fa-crow:before {
content: "\f520"
}
.fa-crown:before {
content: "\f521"
}
.fa-crutch:before {
content: "\f7f7"
}
.fa-css3:before {
content: "\f13c"
}
.fa-css3-alt:before {
content: "\f38b"
}
.fa-cube:before {
content: "\f1b2"
}
.fa-cubes:before {
content: "\f1b3"
}
.fa-cut:before {
content: "\f0c4"
}
.fa-cuttlefish:before {
content: "\f38c"
}
.fa-d-and-d:before {
content: "\f38d"
}
.fa-d-and-d-beyond:before {
content: "\f6ca"
}
.fa-dashcube:before {
content: "\f210"
}
.fa-database:before {
content: "\f1c0"
}
.fa-deaf:before {
content: "\f2a4"
}
.fa-delicious:before {
content: "\f1a5"
}
.fa-democrat:before {
content: "\f747"
}
.fa-deploydog:before {
content: "\f38e"
}
.fa-deskpro:before {
content: "\f38f"
}
.fa-desktop:before {
content: "\f108"
}
.fa-dev:before {
content: "\f6cc"
}
.fa-deviantart:before {
content: "\f1bd"
}
.fa-dharmachakra:before {
content: "\f655"
}
.fa-dhl:before {
content: "\f790"
}
.fa-diagnoses:before {
content: "\f470"
}
.fa-diaspora:before {
content: "\f791"
}
.fa-dice:before {
content: "\f522"
}
.fa-dice-d20:before {
content: "\f6cf"
}
.fa-dice-d6:before {
content: "\f6d1"
}
.fa-dice-five:before {
content: "\f523"
}
.fa-dice-four:before {
content: "\f524"
}
.fa-dice-one:before {
content: "\f525"
}
.fa-dice-six:before {
content: "\f526"
}
.fa-dice-three:before {
content: "\f527"
}
.fa-dice-two:before {
content: "\f528"
}
.fa-digg:before {
content: "\f1a6"
}
.fa-digital-ocean:before {
content: "\f391"
}
.fa-digital-tachograph:before {
content: "\f566"
}
.fa-directions:before {
content: "\f5eb"
}
.fa-discord:before {
content: "\f392"
}
.fa-discourse:before {
content: "\f393"
}
.fa-divide:before {
content: "\f529"
}
.fa-dizzy:before {
content: "\f567"
}
.fa-dna:before {
content: "\f471"
}
.fa-dochub:before {
content: "\f394"
}
.fa-docker:before {
content: "\f395"
}
.fa-dog:before {
content: "\f6d3"
}
.fa-dollar-sign:before {
content: "\f155"
}
.fa-dolly:before {
content: "\f472"
}
.fa-dolly-flatbed:before {
content: "\f474"
}
.fa-donate:before {
content: "\f4b9"
}
.fa-door-closed:before {
content: "\f52a"
}
.fa-door-open:before {
content: "\f52b"
}
.fa-dot-circle:before {
content: "\f192"
}
.fa-dove:before {
content: "\f4ba"
}
.fa-download:before {
content: "\f019"
}
.fa-draft2digital:before {
content: "\f396"
}
.fa-drafting-compass:before {
content: "\f568"
}
.fa-dragon:before {
content: "\f6d5"
}
.fa-draw-polygon:before {
content: "\f5ee"
}
.fa-dribbble:before {
content: "\f17d"
}
.fa-dribbble-square:before {
content: "\f397"
}
.fa-dropbox:before {
content: "\f16b"
}
.fa-drum:before {
content: "\f569"
}
.fa-drum-steelpan:before {
content: "\f56a"
}
.fa-drumstick-bite:before {
content: "\f6d7"
}
.fa-drupal:before {
content: "\f1a9"
}
.fa-dumbbell:before {
content: "\f44b"
}
.fa-dumpster:before {
content: "\f793"
}
.fa-dumpster-fire:before {
content: "\f794"
}
.fa-dungeon:before {
content: "\f6d9"
}
.fa-dyalog:before {
content: "\f399"
}
.fa-earlybirds:before {
content: "\f39a"
}
.fa-ebay:before {
content: "\f4f4"
}
.fa-edge:before {
content: "\f282"
}
.fa-edit:before {
content: "\f044"
}
.fa-egg:before {
content: "\f7fb"
}
.fa-eject:before {
content: "\f052"
}
.fa-elementor:before {
content: "\f430"
}
.fa-ellipsis-h:before {
content: "\f141"
}
.fa-ellipsis-v:before {
content: "\f142"
}
.fa-ello:before {
content: "\f5f1"
}
.fa-ember:before {
content: "\f423"
}
.fa-empire:before {
content: "\f1d1"
}
.fa-envelope:before {
content: "\f0e0"
}
.fa-envelope-open:before {
content: "\f2b6"
}
.fa-envelope-open-text:before {
content: "\f658"
}
.fa-envelope-square:before {
content: "\f199"
}
.fa-envira:before {
content: "\f299"
}
.fa-equals:before {
content: "\f52c"
}
.fa-eraser:before {
content: "\f12d"
}
.fa-erlang:before {
content: "\f39d"
}
.fa-ethereum:before {
content: "\f42e"
}
.fa-ethernet:before {
content: "\f796"
}
.fa-etsy:before {
content: "\f2d7"
}
.fa-euro-sign:before {
content: "\f153"
}
.fa-evernote:before {
content: "\f839"
}
.fa-exchange-alt:before {
content: "\f362"
}
.fa-exclamation:before {
content: "\f12a"
}
.fa-exclamation-circle:before {
content: "\f06a"
}
.fa-exclamation-triangle:before {
content: "\f071"
}
.fa-expand:before {
content: "\f065"
}
.fa-expand-arrows-alt:before {
content: "\f31e"
}
.fa-expeditedssl:before {
content: "\f23e"
}
.fa-external-link-alt:before {
content: "\f35d"
}
.fa-external-link-square-alt:before {
content: "\f360"
}
.fa-eye:before {
content: "\f06e"
}
.fa-eye-dropper:before {
content: "\f1fb"
}
.fa-eye-slash:before {
content: "\f070"
}
.fa-facebook:before {
content: "\f09a"
}
.fa-facebook-f:before {
content: "\f39e"
}
.fa-facebook-messenger:before {
content: "\f39f"
}
.fa-facebook-square:before {
content: "\f082"
}
.fa-fan:before {
content: "\f863"
}
.fa-fantasy-flight-games:before {
content: "\f6dc"
}
.fa-fast-backward:before {
content: "\f049"
}
.fa-fast-forward:before {
content: "\f050"
}
.fa-fax:before {
content: "\f1ac"
}
.fa-feather:before {
content: "\f52d"
}
.fa-feather-alt:before {
content: "\f56b"
}
.fa-fedex:before {
content: "\f797"
}
.fa-fedora:before {
content: "\f798"
}
.fa-female:before {
content: "\f182"
}
.fa-fighter-jet:before {
content: "\f0fb"
}
.fa-figma:before {
content: "\f799"
}
.fa-file:before {
content: "\f15b"
}
.fa-file-alt:before {
content: "\f15c"
}
.fa-file-archive:before {
content: "\f1c6"
}
.fa-file-audio:before {
content: "\f1c7"
}
.fa-file-code:before {
content: "\f1c9"
}
.fa-file-contract:before {
content: "\f56c"
}
.fa-file-csv:before {
content: "\f6dd"
}
.fa-file-download:before {
content: "\f56d"
}
.fa-file-excel:before {
content: "\f1c3"
}
.fa-file-export:before {
content: "\f56e"
}
.fa-file-image:before {
content: "\f1c5"
}
.fa-file-import:before {
content: "\f56f"
}
.fa-file-invoice:before {
content: "\f570"
}
.fa-file-invoice-dollar:before {
content: "\f571"
}
.fa-file-medical:before {
content: "\f477"
}
.fa-file-medical-alt:before {
content: "\f478"
}
.fa-file-pdf:before {
content: "\f1c1"
}
.fa-file-powerpoint:before {
content: "\f1c4"
}
.fa-file-prescription:before {
content: "\f572"
}
.fa-file-signature:before {
content: "\f573"
}
.fa-file-upload:before {
content: "\f574"
}
.fa-file-video:before {
content: "\f1c8"
}
.fa-file-word:before {
content: "\f1c2"
}
.fa-fill:before {
content: "\f575"
}
.fa-fill-drip:before {
content: "\f576"
}
.fa-film:before {
content: "\f008"
}
.fa-filter:before {
content: "\f0b0"
}
.fa-fingerprint:before {
content: "\f577"
}
.fa-fire:before {
content: "\f06d"
}
.fa-fire-alt:before {
content: "\f7e4"
}
.fa-fire-extinguisher:before {
content: "\f134"
}
.fa-firefox:before {
content: "\f269"
}
.fa-first-aid:before {
content: "\f479"
}
.fa-first-order:before {
content: "\f2b0"
}
.fa-first-order-alt:before {
content: "\f50a"
}
.fa-firstdraft:before {
content: "\f3a1"
}
.fa-fish:before {
content: "\f578"
}
.fa-fist-raised:before {
content: "\f6de"
}
.fa-flag:before {
content: "\f024"
}
.fa-flag-checkered:before {
content: "\f11e"
}
.fa-flag-usa:before {
content: "\f74d"
}
.fa-flask:before {
content: "\f0c3"
}
.fa-flickr:before {
content: "\f16e"
}
.fa-flipboard:before {
content: "\f44d"
}
.fa-flushed:before {
content: "\f579"
}
.fa-fly:before {
content: "\f417"
}
.fa-folder:before {
content: "\f07b"
}
.fa-folder-minus:before {
content: "\f65d"
}
.fa-folder-open:before {
content: "\f07c"
}
.fa-folder-plus:before {
content: "\f65e"
}
.fa-font:before {
content: "\f031"
}
.fa-font-awesome:before {
content: "\f2b4"
}
.fa-font-awesome-alt:before {
content: "\f35c"
}
.fa-font-awesome-flag:before {
content: "\f425"
}
.fa-font-awesome-logo-full:before {
content: "\f4e6"
}
.fa-fonticons:before {
content: "\f280"
}
.fa-fonticons-fi:before {
content: "\f3a2"
}
.fa-football-ball:before {
content: "\f44e"
}
.fa-fort-awesome:before {
content: "\f286"
}
.fa-fort-awesome-alt:before {
content: "\f3a3"
}
.fa-forumbee:before {
content: "\f211"
}
.fa-forward:before {
content: "\f04e"
}
.fa-foursquare:before {
content: "\f180"
}
.fa-free-code-camp:before {
content: "\f2c5"
}
.fa-freebsd:before {
content: "\f3a4"
}
.fa-frog:before {
content: "\f52e"
}
.fa-frown:before {
content: "\f119"
}
.fa-frown-open:before {
content: "\f57a"
}
.fa-fulcrum:before {
content: "\f50b"
}
.fa-funnel-dollar:before {
content: "\f662"
}
.fa-futbol:before {
content: "\f1e3"
}
.fa-galactic-republic:before {
content: "\f50c"
}
.fa-galactic-senate:before {
content: "\f50d"
}
.fa-gamepad:before {
content: "\f11b"
}
.fa-gas-pump:before {
content: "\f52f"
}
.fa-gavel:before {
content: "\f0e3"
}
.fa-gem:before {
content: "\f3a5"
}
.fa-genderless:before {
content: "\f22d"
}
.fa-get-pocket:before {
content: "\f265"
}
.fa-gg:before {
content: "\f260"
}
.fa-gg-circle:before {
content: "\f261"
}
.fa-ghost:before {
content: "\f6e2"
}
.fa-gift:before {
content: "\f06b"
}
.fa-gifts:before {
content: "\f79c"
}
.fa-git:before {
content: "\f1d3"
}
.fa-git-alt:before {
content: "\f841"
}
.fa-git-square:before {
content: "\f1d2"
}
.fa-github:before {
content: "\f09b"
}
.fa-github-alt:before {
content: "\f113"
}
.fa-github-square:before {
content: "\f092"
}
.fa-gitkraken:before {
content: "\f3a6"
}
.fa-gitlab:before {
content: "\f296"
}
.fa-gitter:before {
content: "\f426"
}
.fa-glass-cheers:before {
content: "\f79f"
}
.fa-glass-martini:before {
content: "\f000"
}
.fa-glass-martini-alt:before {
content: "\f57b"
}
.fa-glass-whiskey:before {
content: "\f7a0"
}
.fa-glasses:before {
content: "\f530"
}
.fa-glide:before {
content: "\f2a5"
}
.fa-glide-g:before {
content: "\f2a6"
}
.fa-globe:before {
content: "\f0ac"
}
.fa-globe-africa:before {
content: "\f57c"
}
.fa-globe-americas:before {
content: "\f57d"
}
.fa-globe-asia:before {
content: "\f57e"
}
.fa-globe-europe:before {
content: "\f7a2"
}
.fa-gofore:before {
content: "\f3a7"
}
.fa-golf-ball:before {
content: "\f450"
}
.fa-goodreads:before {
content: "\f3a8"
}
.fa-goodreads-g:before {
content: "\f3a9"
}
.fa-google:before {
content: "\f1a0"
}
.fa-google-drive:before {
content: "\f3aa"
}
.fa-google-play:before {
content: "\f3ab"
}
.fa-google-plus:before {
content: "\f2b3"
}
.fa-google-plus-g:before {
content: "\f0d5"
}
.fa-google-plus-square:before {
content: "\f0d4"
}
.fa-google-wallet:before {
content: "\f1ee"
}
.fa-gopuram:before {
content: "\f664"
}
.fa-graduation-cap:before {
content: "\f19d"
}
.fa-gratipay:before {
content: "\f184"
}
.fa-grav:before {
content: "\f2d6"
}
.fa-greater-than:before {
content: "\f531"
}
.fa-greater-than-equal:before {
content: "\f532"
}
.fa-grimace:before {
content: "\f57f"
}
.fa-grin:before {
content: "\f580"
}
.fa-grin-alt:before {
content: "\f581"
}
.fa-grin-beam:before {
content: "\f582"
}
.fa-grin-beam-sweat:before {
content: "\f583"
}
.fa-grin-hearts:before {
content: "\f584"
}
.fa-grin-squint:before {
content: "\f585"
}
.fa-grin-squint-tears:before {
content: "\f586"
}
.fa-grin-stars:before {
content: "\f587"
}
.fa-grin-tears:before {
content: "\f588"
}
.fa-grin-tongue:before {
content: "\f589"
}
.fa-grin-tongue-squint:before {
content: "\f58a"
}
.fa-grin-tongue-wink:before {
content: "\f58b"
}
.fa-grin-wink:before {
content: "\f58c"
}
.fa-grip-horizontal:before {
content: "\f58d"
}
.fa-grip-lines:before {
content: "\f7a4"
}
.fa-grip-lines-vertical:before {
content: "\f7a5"
}
.fa-grip-vertical:before {
content: "\f58e"
}
.fa-gripfire:before {
content: "\f3ac"
}
.fa-grunt:before {
content: "\f3ad"
}
.fa-guitar:before {
content: "\f7a6"
}
.fa-gulp:before {
content: "\f3ae"
}
.fa-h-square:before {
content: "\f0fd"
}
.fa-hacker-news:before {
content: "\f1d4"
}
.fa-hacker-news-square:before {
content: "\f3af"
}
.fa-hackerrank:before {
content: "\f5f7"
}
.fa-hamburger:before {
content: "\f805"
}
.fa-hammer:before {
content: "\f6e3"
}
.fa-hamsa:before {
content: "\f665"
}
.fa-hand-holding:before {
content: "\f4bd"
}
.fa-hand-holding-heart:before {
content: "\f4be"
}
.fa-hand-holding-usd:before {
content: "\f4c0"
}
.fa-hand-lizard:before {
content: "\f258"
}
.fa-hand-middle-finger:before {
content: "\f806"
}
.fa-hand-paper:before {
content: "\f256"
}
.fa-hand-peace:before {
content: "\f25b"
}
.fa-hand-point-down:before {
content: "\f0a7"
}
.fa-hand-point-left:before {
content: "\f0a5"
}
.fa-hand-point-right:before {
content: "\f0a4"
}
.fa-hand-point-up:before {
content: "\f0a6"
}
.fa-hand-pointer:before {
content: "\f25a"
}
.fa-hand-rock:before {
content: "\f255"
}
.fa-hand-scissors:before {
content: "\f257"
}
.fa-hand-spock:before {
content: "\f259"
}
.fa-hands:before {
content: "\f4c2"
}
.fa-hands-helping:before {
content: "\f4c4"
}
.fa-handshake:before {
content: "\f2b5"
}
.fa-hanukiah:before {
content: "\f6e6"
}
.fa-hard-hat:before {
content: "\f807"
}
.fa-hashtag:before {
content: "\f292"
}
.fa-hat-wizard:before {
content: "\f6e8"
}
.fa-haykal:before {
content: "\f666"
}
.fa-hdd:before {
content: "\f0a0"
}
.fa-heading:before {
content: "\f1dc"
}
.fa-headphones:before {
content: "\f025"
}
.fa-headphones-alt:before {
content: "\f58f"
}
.fa-headset:before {
content: "\f590"
}
.fa-heart:before {
content: "\f004"
}
.fa-heart-broken:before {
content: "\f7a9"
}
.fa-heartbeat:before {
content: "\f21e"
}
.fa-helicopter:before {
content: "\f533"
}
.fa-highlighter:before {
content: "\f591"
}
.fa-hiking:before {
content: "\f6ec"
}
.fa-hippo:before {
content: "\f6ed"
}
.fa-hips:before {
content: "\f452"
}
.fa-hire-a-helper:before {
content: "\f3b0"
}
.fa-history:before {
content: "\f1da"
}
.fa-hockey-puck:before {
content: "\f453"
}
.fa-holly-berry:before {
content: "\f7aa"
}
.fa-home:before {
content: "\f015"
}
.fa-hooli:before {
content: "\f427"
}
.fa-hornbill:before {
content: "\f592"
}
.fa-horse:before {
content: "\f6f0"
}
.fa-horse-head:before {
content: "\f7ab"
}
.fa-hospital:before {
content: "\f0f8"
}
.fa-hospital-alt:before {
content: "\f47d"
}
.fa-hospital-symbol:before {
content: "\f47e"
}
.fa-hot-tub:before {
content: "\f593"
}
.fa-hotdog:before {
content: "\f80f"
}
.fa-hotel:before {
content: "\f594"
}
.fa-hotjar:before {
content: "\f3b1"
}
.fa-hourglass:before {
content: "\f254"
}
.fa-hourglass-end:before {
content: "\f253"
}
.fa-hourglass-half:before {
content: "\f252"
}
.fa-hourglass-start:before {
content: "\f251"
}
.fa-house-damage:before {
content: "\f6f1"
}
.fa-houzz:before {
content: "\f27c"
}
.fa-hryvnia:before {
content: "\f6f2"
}
.fa-html5:before {
content: "\f13b"
}
.fa-hubspot:before {
content: "\f3b2"
}
.fa-i-cursor:before {
content: "\f246"
}
.fa-ice-cream:before {
content: "\f810"
}
.fa-icicles:before {
content: "\f7ad"
}
.fa-icons:before {
content: "\f86d"
}
.fa-id-badge:before {
content: "\f2c1"
}
.fa-id-card:before {
content: "\f2c2"
}
.fa-id-card-alt:before {
content: "\f47f"
}
.fa-igloo:before {
content: "\f7ae"
}
.fa-image:before {
content: "\f03e"
}
.fa-images:before {
content: "\f302"
}
.fa-imdb:before {
content: "\f2d8"
}
.fa-inbox:before {
content: "\f01c"
}
.fa-indent:before {
content: "\f03c"
}
.fa-industry:before {
content: "\f275"
}
.fa-infinity:before {
content: "\f534"
}
.fa-info:before {
content: "\f129"
}
.fa-info-circle:before {
content: "\f05a"
}
.fa-instagram:before {
content: "\f16d"
}
.fa-intercom:before {
content: "\f7af"
}
.fa-internet-explorer:before {
content: "\f26b"
}
.fa-invision:before {
content: "\f7b0"
}
.fa-ioxhost:before {
content: "\f208"
}
.fa-italic:before {
content: "\f033"
}
.fa-itch-io:before {
content: "\f83a"
}
.fa-itunes:before {
content: "\f3b4"
}
.fa-itunes-note:before {
content: "\f3b5"
}
.fa-java:before {
content: "\f4e4"
}
.fa-jedi:before {
content: "\f669"
}
.fa-jedi-order:before {
content: "\f50e"
}
.fa-jenkins:before {
content: "\f3b6"
}
.fa-jira:before {
content: "\f7b1"
}
.fa-joget:before {
content: "\f3b7"
}
.fa-joint:before {
content: "\f595"
}
.fa-joomla:before {
content: "\f1aa"
}
.fa-journal-whills:before {
content: "\f66a"
}
.fa-js:before {
content: "\f3b8"
}
.fa-js-square:before {
content: "\f3b9"
}
.fa-jsfiddle:before {
content: "\f1cc"
}
.fa-kaaba:before {
content: "\f66b"
}
.fa-kaggle:before {
content: "\f5fa"
}
.fa-key:before {
content: "\f084"
}
.fa-keybase:before {
content: "\f4f5"
}
.fa-keyboard:before {
content: "\f11c"
}
.fa-keycdn:before {
content: "\f3ba"
}
.fa-khanda:before {
content: "\f66d"
}
.fa-kickstarter:before {
content: "\f3bb"
}
.fa-kickstarter-k:before {
content: "\f3bc"
}
.fa-kiss:before {
content: "\f596"
}
.fa-kiss-beam:before {
content: "\f597"
}
.fa-kiss-wink-heart:before {
content: "\f598"
}
.fa-kiwi-bird:before {
content: "\f535"
}
.fa-korvue:before {
content: "\f42f"
}
.fa-landmark:before {
content: "\f66f"
}
.fa-language:before {
content: "\f1ab"
}
.fa-laptop:before {
content: "\f109"
}
.fa-laptop-code:before {
content: "\f5fc"
}
.fa-laptop-medical:before {
content: "\f812"
}
.fa-laravel:before {
content: "\f3bd"
}
.fa-lastfm:before {
content: "\f202"
}
.fa-lastfm-square:before {
content: "\f203"
}
.fa-laugh:before {
content: "\f599"
}
.fa-laugh-beam:before {
content: "\f59a"
}
.fa-laugh-squint:before {
content: "\f59b"
}
.fa-laugh-wink:before {
content: "\f59c"
}
.fa-layer-group:before {
content: "\f5fd"
}
.fa-leaf:before {
content: "\f06c"
}
.fa-leanpub:before {
content: "\f212"
}
.fa-lemon:before {
content: "\f094"
}
.fa-less:before {
content: "\f41d"
}
.fa-less-than:before {
content: "\f536"
}
.fa-less-than-equal:before {
content: "\f537"
}
.fa-level-down-alt:before {
content: "\f3be"
}
.fa-level-up-alt:before {
content: "\f3bf"
}
.fa-life-ring:before {
content: "\f1cd"
}
.fa-lightbulb:before {
content: "\f0eb"
}
.fa-line:before {
content: "\f3c0"
}
.fa-link:before {
content: "\f0c1"
}
.fa-linkedin:before {
content: "\f08c"
}
.fa-linkedin-in:before {
content: "\f0e1"
}
.fa-linode:before {
content: "\f2b8"
}
.fa-linux:before {
content: "\f17c"
}
.fa-lira-sign:before {
content: "\f195"
}
.fa-list:before {
content: "\f03a"
}
.fa-list-alt:before {
content: "\f022"
}
.fa-list-ol:before {
content: "\f0cb"
}
.fa-list-ul:before {
content: "\f0ca"
}
.fa-location-arrow:before {
content: "\f124"
}
.fa-lock:before {
content: "\f023"
}
.fa-lock-open:before {
content: "\f3c1"
}
.fa-long-arrow-alt-down:before {
content: "\f309"
}
.fa-long-arrow-alt-left:before {
content: "\f30a"
}
.fa-long-arrow-alt-right:before {
content: "\f30b"
}
.fa-long-arrow-alt-up:before {
content: "\f30c"
}
.fa-low-vision:before {
content: "\f2a8"
}
.fa-luggage-cart:before {
content: "\f59d"
}
.fa-lyft:before {
content: "\f3c3"
}
.fa-magento:before {
content: "\f3c4"
}
.fa-magic:before {
content: "\f0d0"
}
.fa-magnet:before {
content: "\f076"
}
.fa-mail-bulk:before {
content: "\f674"
}
.fa-mailchimp:before {
content: "\f59e"
}
.fa-male:before {
content: "\f183"
}
.fa-mandalorian:before {
content: "\f50f"
}
.fa-map:before {
content: "\f279"
}
.fa-map-marked:before {
content: "\f59f"
}
.fa-map-marked-alt:before {
content: "\f5a0"
}
.fa-map-marker:before {
content: "\f041"
}
.fa-map-marker-alt:before {
content: "\f3c5"
}
.fa-map-pin:before {
content: "\f276"
}
.fa-map-signs:before {
content: "\f277"
}
.fa-markdown:before {
content: "\f60f"
}
.fa-marker:before {
content: "\f5a1"
}
.fa-mars:before {
content: "\f222"
}
.fa-mars-double:before {
content: "\f227"
}
.fa-mars-stroke:before {
content: "\f229"
}
.fa-mars-stroke-h:before {
content: "\f22b"
}
.fa-mars-stroke-v:before {
content: "\f22a"
}
.fa-mask:before {
content: "\f6fa"
}
.fa-mastodon:before {
content: "\f4f6"
}
.fa-maxcdn:before {
content: "\f136"
}
.fa-medal:before {
content: "\f5a2"
}
.fa-medapps:before {
content: "\f3c6"
}
.fa-medium:before {
content: "\f23a"
}
.fa-medium-m:before {
content: "\f3c7"
}
.fa-medkit:before {
content: "\f0fa"
}
.fa-medrt:before {
content: "\f3c8"
}
.fa-meetup:before {
content: "\f2e0"
}
.fa-megaport:before {
content: "\f5a3"
}
.fa-meh:before {
content: "\f11a"
}
.fa-meh-blank:before {
content: "\f5a4"
}
.fa-meh-rolling-eyes:before {
content: "\f5a5"
}
.fa-memory:before {
content: "\f538"
}
.fa-mendeley:before {
content: "\f7b3"
}
.fa-menorah:before {
content: "\f676"
}
.fa-mercury:before {
content: "\f223"
}
.fa-meteor:before {
content: "\f753"
}
.fa-microchip:before {
content: "\f2db"
}
.fa-microphone:before {
content: "\f130"
}
.fa-microphone-alt:before {
content: "\f3c9"
}
.fa-microphone-alt-slash:before {
content: "\f539"
}
.fa-microphone-slash:before {
content: "\f131"
}
.fa-microscope:before {
content: "\f610"
}
.fa-microsoft:before {
content: "\f3ca"
}
.fa-minus:before {
content: "\f068"
}
.fa-minus-circle:before {
content: "\f056"
}
.fa-minus-square:before {
content: "\f146"
}
.fa-mitten:before {
content: "\f7b5"
}
.fa-mix:before {
content: "\f3cb"
}
.fa-mixcloud:before {
content: "\f289"
}
.fa-mizuni:before {
content: "\f3cc"
}
.fa-mobile:before {
content: "\f10b"
}
.fa-mobile-alt:before {
content: "\f3cd"
}
.fa-modx:before {
content: "\f285"
}
.fa-monero:before {
content: "\f3d0"
}
.fa-money-bill:before {
content: "\f0d6"
}
.fa-money-bill-alt:before {
content: "\f3d1"
}
.fa-money-bill-wave:before {
content: "\f53a"
}
.fa-money-bill-wave-alt:before {
content: "\f53b"
}
.fa-money-check:before {
content: "\f53c"
}
.fa-money-check-alt:before {
content: "\f53d"
}
.fa-monument:before {
content: "\f5a6"
}
.fa-moon:before {
content: "\f186"
}
.fa-mortar-pestle:before {
content: "\f5a7"
}
.fa-mosque:before {
content: "\f678"
}
.fa-motorcycle:before {
content: "\f21c"
}
.fa-mountain:before {
content: "\f6fc"
}
.fa-mouse-pointer:before {
content: "\f245"
}
.fa-mug-hot:before {
content: "\f7b6"
}
.fa-music:before {
content: "\f001"
}
.fa-napster:before {
content: "\f3d2"
}
.fa-neos:before {
content: "\f612"
}
.fa-network-wired:before {
content: "\f6ff"
}
.fa-neuter:before {
content: "\f22c"
}
.fa-newspaper:before {
content: "\f1ea"
}
.fa-nimblr:before {
content: "\f5a8"
}
.fa-node:before {
content: "\f419"
}
.fa-node-js:before {
content: "\f3d3"
}
.fa-not-equal:before {
content: "\f53e"
}
.fa-notes-medical:before {
content: "\f481"
}
.fa-npm:before {
content: "\f3d4"
}
.fa-ns8:before {
content: "\f3d5"
}
.fa-nutritionix:before {
content: "\f3d6"
}
.fa-object-group:before {
content: "\f247"
}
.fa-object-ungroup:before {
content: "\f248"
}
.fa-odnoklassniki:before {
content: "\f263"
}
.fa-odnoklassniki-square:before {
content: "\f264"
}
.fa-oil-can:before {
content: "\f613"
}
.fa-old-republic:before {
content: "\f510"
}
.fa-om:before {
content: "\f679"
}
.fa-opencart:before {
content: "\f23d"
}
.fa-openid:before {
content: "\f19b"
}
.fa-opera:before {
content: "\f26a"
}
.fa-optin-monster:before {
content: "\f23c"
}
.fa-osi:before {
content: "\f41a"
}
.fa-otter:before {
content: "\f700"
}
.fa-outdent:before {
content: "\f03b"
}
.fa-page4:before {
content: "\f3d7"
}
.fa-pagelines:before {
content: "\f18c"
}
.fa-pager:before {
content: "\f815"
}
.fa-paint-brush:before {
content: "\f1fc"
}
.fa-paint-roller:before {
content: "\f5aa"
}
.fa-palette:before {
content: "\f53f"
}
.fa-palfed:before {
content: "\f3d8"
}
.fa-pallet:before {
content: "\f482"
}
.fa-paper-plane:before {
content: "\f1d8"
}
.fa-paperclip:before {
content: "\f0c6"
}
.fa-parachute-box:before {
content: "\f4cd"
}
.fa-paragraph:before {
content: "\f1dd"
}
.fa-parking:before {
content: "\f540"
}
.fa-passport:before {
content: "\f5ab"
}
.fa-pastafarianism:before {
content: "\f67b"
}
.fa-paste:before {
content: "\f0ea"
}
.fa-patreon:before {
content: "\f3d9"
}
.fa-pause:before {
content: "\f04c"
}
.fa-pause-circle:before {
content: "\f28b"
}
.fa-paw:before {
content: "\f1b0"
}
.fa-paypal:before {
content: "\f1ed"
}
.fa-peace:before {
content: "\f67c"
}
.fa-pen:before {
content: "\f304"
}
.fa-pen-alt:before {
content: "\f305"
}
.fa-pen-fancy:before {
content: "\f5ac"
}
.fa-pen-nib:before {
content: "\f5ad"
}
.fa-pen-square:before {
content: "\f14b"
}
.fa-pencil-alt:before {
content: "\f303"
}
.fa-pencil-ruler:before {
content: "\f5ae"
}
.fa-penny-arcade:before {
content: "\f704"
}
.fa-people-carry:before {
content: "\f4ce"
}
.fa-pepper-hot:before {
content: "\f816"
}
.fa-percent:before {
content: "\f295"
}
.fa-percentage:before {
content: "\f541"
}
.fa-periscope:before {
content: "\f3da"
}
.fa-person-booth:before {
content: "\f756"
}
.fa-phabricator:before {
content: "\f3db"
}
.fa-phoenix-framework:before {
content: "\f3dc"
}
.fa-phoenix-squadron:before {
content: "\f511"
}
.fa-phone:before {
content: "\f095"
}
.fa-phone-alt:before {
content: "\f879"
}
.fa-phone-slash:before {
content: "\f3dd"
}
.fa-phone-square:before {
content: "\f098"
}
.fa-phone-square-alt:before {
content: "\f87b"
}
.fa-phone-volume:before {
content: "\f2a0"
}
.fa-photo-video:before {
content: "\f87c"
}
.fa-php:before {
content: "\f457"
}
.fa-pied-piper:before {
content: "\f2ae"
}
.fa-pied-piper-alt:before {
content: "\f1a8"
}
.fa-pied-piper-hat:before {
content: "\f4e5"
}
.fa-pied-piper-pp:before {
content: "\f1a7"
}
.fa-piggy-bank:before {
content: "\f4d3"
}
.fa-pills:before {
content: "\f484"
}
.fa-pinterest:before {
content: "\f0d2"
}
.fa-pinterest-p:before {
content: "\f231"
}
.fa-pinterest-square:before {
content: "\f0d3"
}
.fa-pizza-slice:before {
content: "\f818"
}
.fa-place-of-worship:before {
content: "\f67f"
}
.fa-plane:before {
content: "\f072"
}
.fa-plane-arrival:before {
content: "\f5af"
}
.fa-plane-departure:before {
content: "\f5b0"
}
.fa-play:before {
content: "\f04b"
}
.fa-play-circle:before {
content: "\f144"
}
.fa-playstation:before {
content: "\f3df"
}
.fa-plug:before {
content: "\f1e6"
}
.fa-plus:before {
content: "\f067"
}
.fa-plus-circle:before {
content: "\f055"
}
.fa-plus-square:before {
content: "\f0fe"
}
.fa-podcast:before {
content: "\f2ce"
}
.fa-poll:before {
content: "\f681"
}
.fa-poll-h:before {
content: "\f682"
}
.fa-poo:before {
content: "\f2fe"
}
.fa-poo-storm:before {
content: "\f75a"
}
.fa-poop:before {
content: "\f619"
}
.fa-portrait:before {
content: "\f3e0"
}
.fa-pound-sign:before {
content: "\f154"
}
.fa-power-off:before {
content: "\f011"
}
.fa-pray:before {
content: "\f683"
}
.fa-praying-hands:before {
content: "\f684"
}
.fa-prescription:before {
content: "\f5b1"
}
.fa-prescription-bottle:before {
content: "\f485"
}
.fa-prescription-bottle-alt:before {
content: "\f486"
}
.fa-print:before {
content: "\f02f"
}
.fa-procedures:before {
content: "\f487"
}
.fa-product-hunt:before {
content: "\f288"
}
.fa-project-diagram:before {
content: "\f542"
}
.fa-pushed:before {
content: "\f3e1"
}
.fa-puzzle-piece:before {
content: "\f12e"
}
.fa-python:before {
content: "\f3e2"
}
.fa-qq:before {
content: "\f1d6"
}
.fa-qrcode:before {
content: "\f029"
}
.fa-question:before {
content: "\f128"
}
.fa-question-circle:before {
content: "\f059"
}
.fa-quidditch:before {
content: "\f458"
}
.fa-quinscape:before {
content: "\f459"
}
.fa-quora:before {
content: "\f2c4"
}
.fa-quote-left:before {
content: "\f10d"
}
.fa-quote-right:before {
content: "\f10e"
}
.fa-quran:before {
content: "\f687"
}
.fa-r-project:before {
content: "\f4f7"
}
.fa-radiation:before {
content: "\f7b9"
}
.fa-radiation-alt:before {
content: "\f7ba"
}
.fa-rainbow:before {
content: "\f75b"
}
.fa-random:before {
content: "\f074"
}
.fa-raspberry-pi:before {
content: "\f7bb"
}
.fa-ravelry:before {
content: "\f2d9"
}
.fa-react:before {
content: "\f41b"
}
.fa-reacteurope:before {
content: "\f75d"
}
.fa-readme:before {
content: "\f4d5"
}
.fa-rebel:before {
content: "\f1d0"
}
.fa-receipt:before {
content: "\f543"
}
.fa-recycle:before {
content: "\f1b8"
}
.fa-red-river:before {
content: "\f3e3"
}
.fa-reddit:before {
content: "\f1a1"
}
.fa-reddit-alien:before {
content: "\f281"
}
.fa-reddit-square:before {
content: "\f1a2"
}
.fa-redhat:before {
content: "\f7bc"
}
.fa-redo:before {
content: "\f01e"
}
.fa-redo-alt:before {
content: "\f2f9"
}
.fa-registered:before {
content: "\f25d"
}
.fa-remove-format:before {
content: "\f87d"
}
.fa-renren:before {
content: "\f18b"
}
.fa-reply:before {
content: "\f3e5"
}
.fa-reply-all:before {
content: "\f122"
}
.fa-replyd:before {
content: "\f3e6"
}
.fa-republican:before {
content: "\f75e"
}
.fa-researchgate:before {
content: "\f4f8"
}
.fa-resolving:before {
content: "\f3e7"
}
.fa-restroom:before {
content: "\f7bd"
}
.fa-retweet:before {
content: "\f079"
}
.fa-rev:before {
content: "\f5b2"
}
.fa-ribbon:before {
content: "\f4d6"
}
.fa-ring:before {
content: "\f70b"
}
.fa-road:before {
content: "\f018"
}
.fa-robot:before {
content: "\f544"
}
.fa-rocket:before {
content: "\f135"
}
.fa-rocketchat:before {
content: "\f3e8"
}
.fa-rockrms:before {
content: "\f3e9"
}
.fa-route:before {
content: "\f4d7"
}
.fa-rss:before {
content: "\f09e"
}
.fa-rss-square:before {
content: "\f143"
}
.fa-ruble-sign:before {
content: "\f158"
}
.fa-ruler:before {
content: "\f545"
}
.fa-ruler-combined:before {
content: "\f546"
}
.fa-ruler-horizontal:before {
content: "\f547"
}
.fa-ruler-vertical:before {
content: "\f548"
}
.fa-running:before {
content: "\f70c"
}
.fa-rupee-sign:before {
content: "\f156"
}
.fa-sad-cry:before {
content: "\f5b3"
}
.fa-sad-tear:before {
content: "\f5b4"
}
.fa-safari:before {
content: "\f267"
}
.fa-salesforce:before {
content: "\f83b"
}
.fa-sass:before {
content: "\f41e"
}
.fa-satellite:before {
content: "\f7bf"
}
.fa-satellite-dish:before {
content: "\f7c0"
}
.fa-save:before {
content: "\f0c7"
}
.fa-schlix:before {
content: "\f3ea"
}
.fa-school:before {
content: "\f549"
}
.fa-screwdriver:before {
content: "\f54a"
}
.fa-scribd:before {
content: "\f28a"
}
.fa-scroll:before {
content: "\f70e"
}
.fa-sd-card:before {
content: "\f7c2"
}
.fa-search:before {
content: "\f002"
}
.fa-search-dollar:before {
content: "\f688"
}
.fa-search-location:before {
content: "\f689"
}
.fa-search-minus:before {
content: "\f010"
}
.fa-search-plus:before {
content: "\f00e"
}
.fa-searchengin:before {
content: "\f3eb"
}
.fa-seedling:before {
content: "\f4d8"
}
.fa-sellcast:before {
content: "\f2da"
}
.fa-sellsy:before {
content: "\f213"
}
.fa-server:before {
content: "\f233"
}
.fa-servicestack:before {
content: "\f3ec"
}
.fa-shapes:before {
content: "\f61f"
}
.fa-share:before {
content: "\f064"
}
.fa-share-alt:before {
content: "\f1e0"
}
.fa-share-alt-square:before {
content: "\f1e1"
}
.fa-share-square:before {
content: "\f14d"
}
.fa-shekel-sign:before {
content: "\f20b"
}
.fa-shield-alt:before {
content: "\f3ed"
}
.fa-ship:before {
content: "\f21a"
}
.fa-shipping-fast:before {
content: "\f48b"
}
.fa-shirtsinbulk:before {
content: "\f214"
}
.fa-shoe-prints:before {
content: "\f54b"
}
.fa-shopping-bag:before {
content: "\f290"
}
.fa-shopping-basket:before {
content: "\f291"
}
.fa-shopping-cart:before {
content: "\f07a"
}
.fa-shopware:before {
content: "\f5b5"
}
.fa-shower:before {
content: "\f2cc"
}
.fa-shuttle-van:before {
content: "\f5b6"
}
.fa-sign:before {
content: "\f4d9"
}
.fa-sign-in-alt:before {
content: "\f2f6"
}
.fa-sign-language:before {
content: "\f2a7"
}
.fa-sign-out-alt:before {
content: "\f2f5"
}
.fa-signal:before {
content: "\f012"
}
.fa-signature:before {
content: "\f5b7"
}
.fa-sim-card:before {
content: "\f7c4"
}
.fa-simplybuilt:before {
content: "\f215"
}
.fa-sistrix:before {
content: "\f3ee"
}
.fa-sitemap:before {
content: "\f0e8"
}
.fa-sith:before {
content: "\f512"
}
.fa-skating:before {
content: "\f7c5"
}
.fa-sketch:before {
content: "\f7c6"
}
.fa-skiing:before {
content: "\f7c9"
}
.fa-skiing-nordic:before {
content: "\f7ca"
}
.fa-skull:before {
content: "\f54c"
}
.fa-skull-crossbones:before {
content: "\f714"
}
.fa-skyatlas:before {
content: "\f216"
}
.fa-skype:before {
content: "\f17e"
}
.fa-slack:before {
content: "\f198"
}
.fa-slack-hash:before {
content: "\f3ef"
}
.fa-slash:before {
content: "\f715"
}
.fa-sleigh:before {
content: "\f7cc"
}
.fa-sliders-h:before {
content: "\f1de"
}
.fa-slideshare:before {
content: "\f1e7"
}
.fa-smile:before {
content: "\f118"
}
.fa-smile-beam:before {
content: "\f5b8"
}
.fa-smile-wink:before {
content: "\f4da"
}
.fa-smog:before {
content: "\f75f"
}
.fa-smoking:before {
content: "\f48d"
}
.fa-smoking-ban:before {
content: "\f54d"
}
.fa-sms:before {
content: "\f7cd"
}
.fa-snapchat:before {
content: "\f2ab"
}
.fa-snapchat-ghost:before {
content: "\f2ac"
}
.fa-snapchat-square:before {
content: "\f2ad"
}
.fa-snowboarding:before {
content: "\f7ce"
}
.fa-snowflake:before {
content: "\f2dc"
}
.fa-snowman:before {
content: "\f7d0"
}
.fa-snowplow:before {
content: "\f7d2"
}
.fa-socks:before {
content: "\f696"
}
.fa-solar-panel:before {
content: "\f5ba"
}
.fa-sort:before {
content: "\f0dc"
}
.fa-sort-alpha-down:before {
content: "\f15d"
}
.fa-sort-alpha-down-alt:before {
content: "\f881"
}
.fa-sort-alpha-up:before {
content: "\f15e"
}
.fa-sort-alpha-up-alt:before {
content: "\f882"
}
.fa-sort-amount-down:before {
content: "\f160"
}
.fa-sort-amount-down-alt:before {
content: "\f884"
}
.fa-sort-amount-up:before {
content: "\f161"
}
.fa-sort-amount-up-alt:before {
content: "\f885"
}
.fa-sort-down:before {
content: "\f0dd"
}
.fa-sort-numeric-down:before {
content: "\f162"
}
.fa-sort-numeric-down-alt:before {
content: "\f886"
}
.fa-sort-numeric-up:before {
content: "\f163"
}
.fa-sort-numeric-up-alt:before {
content: "\f887"
}
.fa-sort-up:before {
content: "\f0de"
}
.fa-soundcloud:before {
content: "\f1be"
}
.fa-sourcetree:before {
content: "\f7d3"
}
.fa-spa:before {
content: "\f5bb"
}
.fa-space-shuttle:before {
content: "\f197"
}
.fa-speakap:before {
content: "\f3f3"
}
.fa-speaker-deck:before {
content: "\f83c"
}
.fa-spell-check:before {
content: "\f891"
}
.fa-spider:before {
content: "\f717"
}
.fa-spinner:before {
content: "\f110"
}
.fa-splotch:before {
content: "\f5bc"
}
.fa-spotify:before {
content: "\f1bc"
}
.fa-spray-can:before {
content: "\f5bd"
}
.fa-square:before {
content: "\f0c8"
}
.fa-square-full:before {
content: "\f45c"
}
.fa-square-root-alt:before {
content: "\f698"
}
.fa-squarespace:before {
content: "\f5be"
}
.fa-stack-exchange:before {
content: "\f18d"
}
.fa-stack-overflow:before {
content: "\f16c"
}
.fa-stackpath:before {
content: "\f842"
}
.fa-stamp:before {
content: "\f5bf"
}
.fa-star:before {
content: "\f005"
}
.fa-star-and-crescent:before {
content: "\f699"
}
.fa-star-half:before {
content: "\f089"
}
.fa-star-half-alt:before {
content: "\f5c0"
}
.fa-star-of-david:before {
content: "\f69a"
}
.fa-star-of-life:before {
content: "\f621"
}
.fa-staylinked:before {
content: "\f3f5"
}
.fa-steam:before {
content: "\f1b6"
}
.fa-steam-square:before {
content: "\f1b7"
}
.fa-steam-symbol:before {
content: "\f3f6"
}
.fa-step-backward:before {
content: "\f048"
}
.fa-step-forward:before {
content: "\f051"
}
.fa-stethoscope:before {
content: "\f0f1"
}
.fa-sticker-mule:before {
content: "\f3f7"
}
.fa-sticky-note:before {
content: "\f249"
}
.fa-stop:before {
content: "\f04d"
}
.fa-stop-circle:before {
content: "\f28d"
}
.fa-stopwatch:before {
content: "\f2f2"
}
.fa-store:before {
content: "\f54e"
}
.fa-store-alt:before {
content: "\f54f"
}
.fa-strava:before {
content: "\f428"
}
.fa-stream:before {
content: "\f550"
}
.fa-street-view:before {
content: "\f21d"
}
.fa-strikethrough:before {
content: "\f0cc"
}
.fa-stripe:before {
content: "\f429"
}
.fa-stripe-s:before {
content: "\f42a"
}
.fa-stroopwafel:before {
content: "\f551"
}
.fa-studiovinari:before {
content: "\f3f8"
}
.fa-stumbleupon:before {
content: "\f1a4"
}
.fa-stumbleupon-circle:before {
content: "\f1a3"
}
.fa-subscript:before {
content: "\f12c"
}
.fa-subway:before {
content: "\f239"
}
.fa-suitcase:before {
content: "\f0f2"
}
.fa-suitcase-rolling:before {
content: "\f5c1"
}
.fa-sun:before {
content: "\f185"
}
.fa-superpowers:before {
content: "\f2dd"
}
.fa-superscript:before {
content: "\f12b"
}
.fa-supple:before {
content: "\f3f9"
}
.fa-surprise:before {
content: "\f5c2"
}
.fa-suse:before {
content: "\f7d6"
}
.fa-swatchbook:before {
content: "\f5c3"
}
.fa-swimmer:before {
content: "\f5c4"
}
.fa-swimming-pool:before {
content: "\f5c5"
}
.fa-symfony:before {
content: "\f83d"
}
.fa-synagogue:before {
content: "\f69b"
}
.fa-sync:before {
content: "\f021"
}
.fa-sync-alt:before {
content: "\f2f1"
}
.fa-syringe:before {
content: "\f48e"
}
.fa-table:before {
content: "\f0ce"
}
.fa-table-tennis:before {
content: "\f45d"
}
.fa-tablet:before {
content: "\f10a"
}
.fa-tablet-alt:before {
content: "\f3fa"
}
.fa-tablets:before {
content: "\f490"
}
.fa-tachometer-alt:before {
content: "\f3fd"
}
.fa-tag:before {
content: "\f02b"
}
.fa-tags:before {
content: "\f02c"
}
.fa-tape:before {
content: "\f4db"
}
.fa-tasks:before {
content: "\f0ae"
}
.fa-taxi:before {
content: "\f1ba"
}
.fa-teamspeak:before {
content: "\f4f9"
}
.fa-teeth:before {
content: "\f62e"
}
.fa-teeth-open:before {
content: "\f62f"
}
.fa-telegram:before {
content: "\f2c6"
}
.fa-telegram-plane:before {
content: "\f3fe"
}
.fa-temperature-high:before {
content: "\f769"
}
.fa-temperature-low:before {
content: "\f76b"
}
.fa-tencent-weibo:before {
content: "\f1d5"
}
.fa-tenge:before {
content: "\f7d7"
}
.fa-terminal:before {
content: "\f120"
}
.fa-text-height:before {
content: "\f034"
}
.fa-text-width:before {
content: "\f035"
}
.fa-th:before {
content: "\f00a"
}
.fa-th-large:before {
content: "\f009"
}
.fa-th-list:before {
content: "\f00b"
}
.fa-the-red-yeti:before {
content: "\f69d"
}
.fa-theater-masks:before {
content: "\f630"
}
.fa-themeco:before {
content: "\f5c6"
}
.fa-themeisle:before {
content: "\f2b2"
}
.fa-thermometer:before {
content: "\f491"
}
.fa-thermometer-empty:before {
content: "\f2cb"
}
.fa-thermometer-full:before {
content: "\f2c7"
}
.fa-thermometer-half:before {
content: "\f2c9"
}
.fa-thermometer-quarter:before {
content: "\f2ca"
}
.fa-thermometer-three-quarters:before {
content: "\f2c8"
}
.fa-think-peaks:before {
content: "\f731"
}
.fa-thumbs-down:before {
content: "\f165"
}
.fa-thumbs-up:before {
content: "\f164"
}
.fa-thumbtack:before {
content: "\f08d"
}
.fa-ticket-alt:before {
content: "\f3ff"
}
.fa-times:before {
content: "\f00d"
}
.fa-times-circle:before {
content: "\f057"
}
.fa-tint:before {
content: "\f043"
}
.fa-tint-slash:before {
content: "\f5c7"
}
.fa-tired:before {
content: "\f5c8"
}
.fa-toggle-off:before {
content: "\f204"
}
.fa-toggle-on:before {
content: "\f205"
}
.fa-toilet:before {
content: "\f7d8"
}
.fa-toilet-paper:before {
content: "\f71e"
}
.fa-toolbox:before {
content: "\f552"
}
.fa-tools:before {
content: "\f7d9"
}
.fa-tooth:before {
content: "\f5c9"
}
.fa-torah:before {
content: "\f6a0"
}
.fa-torii-gate:before {
content: "\f6a1"
}
.fa-tractor:before {
content: "\f722"
}
.fa-trade-federation:before {
content: "\f513"
}
.fa-trademark:before {
content: "\f25c"
}
.fa-traffic-light:before {
content: "\f637"
}
.fa-train:before {
content: "\f238"
}
.fa-tram:before {
content: "\f7da"
}
.fa-transgender:before {
content: "\f224"
}
.fa-transgender-alt:before {
content: "\f225"
}
.fa-trash:before {
content: "\f1f8"
}
.fa-trash-alt:before {
content: "\f2ed"
}
.fa-trash-restore:before {
content: "\f829"
}
.fa-trash-restore-alt:before {
content: "\f82a"
}
.fa-tree:before {
content: "\f1bb"
}
.fa-trello:before {
content: "\f181"
}
.fa-tripadvisor:before {
content: "\f262"
}
.fa-trophy:before {
content: "\f091"
}
.fa-truck:before {
content: "\f0d1"
}
.fa-truck-loading:before {
content: "\f4de"
}
.fa-truck-monster:before {
content: "\f63b"
}
.fa-truck-moving:before {
content: "\f4df"
}
.fa-truck-pickup:before {
content: "\f63c"
}
.fa-tshirt:before {
content: "\f553"
}
.fa-tty:before {
content: "\f1e4"
}
.fa-tumblr:before {
content: "\f173"
}
.fa-tumblr-square:before {
content: "\f174"
}
.fa-tv:before {
content: "\f26c"
}
.fa-twitch:before {
content: "\f1e8"
}
.fa-twitter:before {
content: "\f099"
}
.fa-twitter-square:before {
content: "\f081"
}
.fa-typo3:before {
content: "\f42b"
}
.fa-uber:before {
content: "\f402"
}
.fa-ubuntu:before {
content: "\f7df"
}
.fa-uikit:before {
content: "\f403"
}
.fa-umbrella:before {
content: "\f0e9"
}
.fa-umbrella-beach:before {
content: "\f5ca"
}
.fa-underline:before {
content: "\f0cd"
}
.fa-undo:before {
content: "\f0e2"
}
.fa-undo-alt:before {
content: "\f2ea"
}
.fa-uniregistry:before {
content: "\f404"
}
.fa-universal-access:before {
content: "\f29a"
}
.fa-university:before {
content: "\f19c"
}
.fa-unlink:before {
content: "\f127"
}
.fa-unlock:before {
content: "\f09c"
}
.fa-unlock-alt:before {
content: "\f13e"
}
.fa-untappd:before {
content: "\f405"
}
.fa-upload:before {
content: "\f093"
}
.fa-ups:before {
content: "\f7e0"
}
.fa-usb:before {
content: "\f287"
}
.fa-user:before {
content: "\f007"
}
.fa-user-alt:before {
content: "\f406"
}
.fa-user-alt-slash:before {
content: "\f4fa"
}
.fa-user-astronaut:before {
content: "\f4fb"
}
.fa-user-check:before {
content: "\f4fc"
}
.fa-user-circle:before {
content: "\f2bd"
}
.fa-user-clock:before {
content: "\f4fd"
}
.fa-user-cog:before {
content: "\f4fe"
}
.fa-user-edit:before {
content: "\f4ff"
}
.fa-user-friends:before {
content: "\f500"
}
.fa-user-graduate:before {
content: "\f501"
}
.fa-user-injured:before {
content: "\f728"
}
.fa-user-lock:before {
content: "\f502"
}
.fa-user-md:before {
content: "\f0f0"
}
.fa-user-minus:before {
content: "\f503"
}
.fa-user-ninja:before {
content: "\f504"
}
.fa-user-nurse:before {
content: "\f82f"
}
.fa-user-plus:before {
content: "\f234"
}
.fa-user-secret:before {
content: "\f21b"
}
.fa-user-shield:before {
content: "\f505"
}
.fa-user-slash:before {
content: "\f506"
}
.fa-user-tag:before {
content: "\f507"
}
.fa-user-tie:before {
content: "\f508"
}
.fa-user-times:before {
content: "\f235"
}
.fa-users:before {
content: "\f0c0"
}
.fa-users-cog:before {
content: "\f509"
}
.fa-usps:before {
content: "\f7e1"
}
.fa-ussunnah:before {
content: "\f407"
}
.fa-utensil-spoon:before {
content: "\f2e5"
}
.fa-utensils:before {
content: "\f2e7"
}
.fa-vaadin:before {
content: "\f408"
}
.fa-vector-square:before {
content: "\f5cb"
}
.fa-venus:before {
content: "\f221"
}
.fa-venus-double:before {
content: "\f226"
}
.fa-venus-mars:before {
content: "\f228"
}
.fa-viacoin:before {
content: "\f237"
}
.fa-viadeo:before {
content: "\f2a9"
}
.fa-viadeo-square:before {
content: "\f2aa"
}
.fa-vial:before {
content: "\f492"
}
.fa-vials:before {
content: "\f493"
}
.fa-viber:before {
content: "\f409"
}
.fa-video:before {
content: "\f03d"
}
.fa-video-slash:before {
content: "\f4e2"
}
.fa-vihara:before {
content: "\f6a7"
}
.fa-vimeo:before {
content: "\f40a"
}
.fa-vimeo-square:before {
content: "\f194"
}
.fa-vimeo-v:before {
content: "\f27d"
}
.fa-vine:before {
content: "\f1ca"
}
.fa-vk:before {
content: "\f189"
}
.fa-vnv:before {
content: "\f40b"
}
.fa-voicemail:before {
content: "\f897"
}
.fa-volleyball-ball:before {
content: "\f45f"
}
.fa-volume-down:before {
content: "\f027"
}
.fa-volume-mute:before {
content: "\f6a9"
}
.fa-volume-off:before {
content: "\f026"
}
.fa-volume-up:before {
content: "\f028"
}
.fa-vote-yea:before {
content: "\f772"
}
.fa-vr-cardboard:before {
content: "\f729"
}
.fa-vuejs:before {
content: "\f41f"
}
.fa-walking:before {
content: "\f554"
}
.fa-wallet:before {
content: "\f555"
}
.fa-warehouse:before {
content: "\f494"
}
.fa-water:before {
content: "\f773"
}
.fa-wave-square:before {
content: "\f83e"
}
.fa-waze:before {
content: "\f83f"
}
.fa-weebly:before {
content: "\f5cc"
}
.fa-weibo:before {
content: "\f18a"
}
.fa-weight:before {
content: "\f496"
}
.fa-weight-hanging:before {
content: "\f5cd"
}
.fa-weixin:before {
content: "\f1d7"
}
.fa-whatsapp:before {
content: "\f232"
}
.fa-whatsapp-square:before {
content: "\f40c"
}
.fa-wheelchair:before {
content: "\f193"
}
.fa-whmcs:before {
content: "\f40d"
}
.fa-wifi:before {
content: "\f1eb"
}
.fa-wikipedia-w:before {
content: "\f266"
}
.fa-wind:before {
content: "\f72e"
}
.fa-window-close:before {
content: "\f410"
}
.fa-window-maximize:before {
content: "\f2d0"
}
.fa-window-minimize:before {
content: "\f2d1"
}
.fa-window-restore:before {
content: "\f2d2"
}
.fa-windows:before {
content: "\f17a"
}
.fa-wine-bottle:before {
content: "\f72f"
}
.fa-wine-glass:before {
content: "\f4e3"
}
.fa-wine-glass-alt:before {
content: "\f5ce"
}
.fa-wix:before {
content: "\f5cf"
}
.fa-wizards-of-the-coast:before {
content: "\f730"
}
.fa-wolf-pack-battalion:before {
content: "\f514"
}
.fa-won-sign:before {
content: "\f159"
}
.fa-wordpress:before {
content: "\f19a"
}
.fa-wordpress-simple:before {
content: "\f411"
}
.fa-wpbeginner:before {
content: "\f297"
}
.fa-wpexplorer:before {
content: "\f2de"
}
.fa-wpforms:before {
content: "\f298"
}
.fa-wpressr:before {
content: "\f3e4"
}
.fa-wrench:before {
content: "\f0ad"
}
.fa-x-ray:before {
content: "\f497"
}
.fa-xbox:before {
content: "\f412"
}
.fa-xing:before {
content: "\f168"
}
.fa-xing-square:before {
content: "\f169"
}
.fa-y-combinator:before {
content: "\f23b"
}
.fa-yahoo:before {
content: "\f19e"
}
.fa-yammer:before {
content: "\f840"
}
.fa-yandex:before {
content: "\f413"
}
.fa-yandex-international:before {
content: "\f414"
}
.fa-yarn:before {
content: "\f7e3"
}
.fa-yelp:before {
content: "\f1e9"
}
.fa-yen-sign:before {
content: "\f157"
}
.fa-yin-yang:before {
content: "\f6ad"
}
.fa-yoast:before {
content: "\f2b1"
}
.fa-youtube:before {
content: "\f167"
}
.fa-youtube-square:before {
content: "\f431"
}
.fa-zhihu:before {
content: "\f63f"
}
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-display: auto;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-weight: 900;
src: url(/assets/fonts/fa-solid-900.2f6dbd9f.eot);
src: url(/assets/fonts/fa-solid-900.2f6dbd9f.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/fa-solid-900.acc6b6bf.woff2) format("woff2"),url(/assets/fonts/fa-solid-900.e4efd599.woff) format("woff"),url(/assets/fonts/fa-solid-900.9b4d14a5.ttf) format("truetype"),url(/assets/fonts/fa-solid-900.c8a5f741.svg#fontawesome) format("svg")
}
.fa,.fas {
font-weight: 900
}
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-display: auto;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-weight: 400;
src: url(/assets/fonts/fa-regular-400.6810be1d.eot);
src: url(/assets/fonts/fa-regular-400.6810be1d.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/fa-regular-400.a3f7358b.woff2) format("woff2"),url(/assets/fonts/fa-regular-400.8a7914c9.woff) format("woff"),url(/assets/fonts/fa-regular-400.a3b4cd30.ttf) format("truetype"),url(/assets/fonts/fa-regular-400.02428635.svg#fontawesome) format("svg")
}
.fa,.far,.fas {
font-family: Font Awesome\ 5 Free
}
.far {
font-weight: 400
}
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-display: auto;
font-family: Font Awesome\ 5 Brands;
font-style: normal;
font-weight: 400;
src: url(/assets/fonts/fa-brands-400.85917bf2.eot);
src: url(/assets/fonts/fa-brands-400.85917bf2.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/fa-brands-400.dd746785.woff2) format("woff2"),url(/assets/fonts/fa-brands-400.cac133c0.woff) format("woff"),url(/assets/fonts/fa-brands-400.70150a2b.ttf) format("truetype"),url(/assets/fonts/fa-brands-400.83494ca2.svg#fontawesome) format("svg")
}
.fab {
font-family: Font Awesome\ 5 Brands
}
/*!
* Bootstrap v3.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: sans-serif
}
body {
margin: 0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block
}
audio,canvas,progress,video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],template {
display: none
}
a {
background-color: transparent;
}
a:active,a:hover {
outline: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: .67em 0
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code,kbd,pre,samp {
font-family: monospace,monospace;
font-size: 1em
}
button,input,optgroup,select,textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,select {
text-transform: none
}
button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],html input[disabled] {
cursor: default
}
button::-moz-focus-inner,input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type=checkbox],input[type=radio] {
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
height: auto
}
input[type=search] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td,th {
padding: 0
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
*,:after,:before {
background: transparent!important;
box-shadow: none!important;
color: #000!important;
text-shadow: none!important
}
a,a:visited {
text-decoration: underline
}
a[href]:after {
content: " (" attr(href) ")"
}
abbr[title]:after {
content: " (" attr(title) ")"
}
a[href^="#"]:after,a[href^="javascript:"]:after {
content: ""
}
blockquote,pre {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
img,tr {
page-break-inside: avoid
}
img {
max-width: 100%!important
}
h2,h3,p {
orphans: 3;
widows: 3
}
h2,h3 {
page-break-after: avoid
}
.navbar {
display: none
}
.btn>.caret,.dropup>.btn>.caret {
border-top-color: #000!important
}
.label {
border: 1px solid #000
}
.table {
border-collapse: collapse!important
}
.table td,.table th {
background-color: #fff!important
}
.table-bordered td,.table-bordered th {
border: 1px solid #ddd!important
}
}
@font-face {
font-family: Glyphicons Halflings;
src: url(/assets/fonts/glyphicons-halflings-regular.5be1347c.eot);
src: url(/assets/fonts/glyphicons-halflings-regular.5be1347c.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/glyphicons-halflings-regular.be810be3.woff2) format("woff2"),url(/assets/fonts/glyphicons-halflings-regular.82b1212e.woff) format("woff"),url(/assets/fonts/glyphicons-halflings-regular.4692b9ec.ttf) format("truetype"),url(/assets/fonts/glyphicons-halflings-regular.060b2710.svg#glyphicons_halflingsregular) format("svg")
}
.glyphicon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-family: Glyphicons Halflings;
font-style: normal;
font-weight: 400;
line-height: 1;
position: relative;
top: 1px
}
.glyphicon-glass:before {
content: "\e001"
}
.glyphicon-music:before {
content: "\e002"
}
.glyphicon-search:before {
content: "\e003"
}
.glyphicon-heart:before {
content: "\e005"
}
.glyphicon-star:before {
content: "\e006"
}
.glyphicon-star-empty:before {
content: "\e007"
}
.glyphicon-user:before {
content: "\e008"
}
.glyphicon-film:before {
content: "\e009"
}
.glyphicon-th-large:before {
content: "\e010"
}
.glyphicon-th:before {
content: "\e011"
}
.glyphicon-th-list:before {
content: "\e012"
}
.glyphicon-ok:before {
content: "\e013"
}
.glyphicon-remove:before {
content: "\e014"
}
.glyphicon-zoom-in:before {
content: "\e015"
}
.glyphicon-zoom-out:before {
content: "\e016"
}
.glyphicon-off:before {
content: "\e017"
}
.glyphicon-signal:before {
content: "\e018"
}
.glyphicon-cog:before {
content: "\e019"
}
.glyphicon-trash:before {
content: "\e020"
}
.glyphicon-home:before {
content: "\e021"
}
.glyphicon-file:before {
content: "\e022"
}
.glyphicon-time:before {
content: "\e023"
}
.glyphicon-road:before {
content: "\e024"
}
.glyphicon-download-alt:before {
content: "\e025"
}
.glyphicon-download:before {
content: "\e026"
}
.glyphicon-upload:before {
content: "\e027"
}
.glyphicon-inbox:before {
content: "\e028"
}
.glyphicon-play-circle:before {
content: "\e029"
}
.glyphicon-repeat:before {
content: "\e030"
}
.glyphicon-refresh:before {
content: "\e031"
}
.glyphicon-list-alt:before {
content: "\e032"
}
.glyphicon-lock:before {
content: "\e033"
}
.glyphicon-flag:before {
content: "\e034"
}
.glyphicon-headphones:before {
content: "\e035"
}
.glyphicon-volume-off:before {
content: "\e036"
}
.glyphicon-volume-down:before {
content: "\e037"
}
.glyphicon-volume-up:before {
content: "\e038"
}
.glyphicon-qrcode:before {
content: "\e039"
}
.glyphicon-barcode:before {
content: "\e040"
}
.glyphicon-tag:before {
content: "\e041"
}
.glyphicon-tags:before {
content: "\e042"
}
.glyphicon-book:before {
content: "\e043"
}
.glyphicon-bookmark:before {
content: "\e044"
}
.glyphicon-print:before {
content: "\e045"
}
.glyphicon-camera:before {
content: "\e046"
}
.glyphicon-font:before {
content: "\e047"
}
.glyphicon-bold:before {
content: "\e048"
}
.glyphicon-italic:before {
content: "\e049"
}
.glyphicon-text-height:before {
content: "\e050"
}
.glyphicon-text-width:before {
content: "\e051"
}
.glyphicon-align-left:before {
content: "\e052"
}
.glyphicon-align-center:before {
content: "\e053"
}
.glyphicon-align-right:before {
content: "\e054"
}
.glyphicon-align-justify:before {
content: "\e055"
}
.glyphicon-list:before {
content: "\e056"
}
.glyphicon-indent-left:before {
content: "\e057"
}
.glyphicon-indent-right:before {
content: "\e058"
}
.glyphicon-facetime-video:before {
content: "\e059"
}
.glyphicon-picture:before {
content: "\e060"
}
.glyphicon-map-marker:before {
content: "\e062"
}
.glyphicon-adjust:before {
content: "\e063"
}
.glyphicon-tint:before {
content: "\e064"
}
.glyphicon-edit:before {
content: "\e065"
}
.glyphicon-share:before {
content: "\e066"
}
.glyphicon-check:before {
content: "\e067"
}
.glyphicon-move:before {
content: "\e068"
}
.glyphicon-step-backward:before {
content: "\e069"
}
.glyphicon-fast-backward:before {
content: "\e070"
}
.glyphicon-backward:before {
content: "\e071"
}
.glyphicon-play:before {
content: "\e072"
}
.glyphicon-pause:before {
content: "\e073"
}
.glyphicon-stop:before {
content: "\e074"
}
.glyphicon-forward:before {
content: "\e075"
}
.glyphicon-fast-forward:before {
content: "\e076"
}
.glyphicon-step-forward:before {
content: "\e077"
}
.glyphicon-eject:before {
content: "\e078"
}
.glyphicon-chevron-left:before {
content: "\e079"
}
.glyphicon-chevron-right:before {
content: "\e080"
}
.glyphicon-plus-sign:before {
content: "\e081"
}
.glyphicon-minus-sign:before {
content: "\e082"
}
.glyphicon-remove-sign:before {
content: "\e083"
}
.glyphicon-ok-sign:before {
content: "\e084"
}
.glyphicon-question-sign:before {
content: "\e085"
}
.glyphicon-info-sign:before {
content: "\e086"
}
.glyphicon-screenshot:before {
content: "\e087"
}
.glyphicon-remove-circle:before {
content: "\e088"
}
.glyphicon-ok-circle:before {
content: "\e089"
}
.glyphicon-ban-circle:before {
content: "\e090"
}
.glyphicon-arrow-left:before {
content: "\e091"
}
.glyphicon-arrow-right:before {
content: "\e092"
}
.glyphicon-arrow-up:before {
content: "\e093"
}
.glyphicon-arrow-down:before {
content: "\e094"
}
.glyphicon-share-alt:before {
content: "\e095"
}
.glyphicon-resize-full:before {
content: "\e096"
}
.glyphicon-resize-small:before {
content: "\e097"
}
.glyphicon-exclamation-sign:before {
content: "\e101"
}
.glyphicon-gift:before {
content: "\e102"
}
.glyphicon-leaf:before {
content: "\e103"
}
.glyphicon-fire:before {
content: "\e104"
}
.glyphicon-eye-open:before {
content: "\e105"
}
.glyphicon-eye-close:before {
content: "\e106"
}
.glyphicon-warning-sign:before {
content: "\e107"
}
.glyphicon-plane:before {
content: "\e108"
}
.glyphicon-calendar:before {
content: "\e109"
}
.glyphicon-random:before {
content: "\e110"
}
.glyphicon-comment:before {
content: "\e111"
}
.glyphicon-magnet:before {
content: "\e112"
}
.glyphicon-chevron-up:before {
content: "\e113"
}
.glyphicon-chevron-down:before {
content: "\e114"
}
.glyphicon-retweet:before {
content: "\e115"
}
.glyphicon-shopping-cart:before {
content: "\e116"
}
.glyphicon-folder-close:before {
content: "\e117"
}
.glyphicon-folder-open:before {
content: "\e118"
}
.glyphicon-resize-vertical:before {
content: "\e119"
}
.glyphicon-resize-horizontal:before {
content: "\e120"
}
.glyphicon-hdd:before {
content: "\e121"
}
.glyphicon-bullhorn:before {
content: "\e122"
}
.glyphicon-bell:before {
content: "\e123"
}
.glyphicon-certificate:before {
content: "\e124"
}
.glyphicon-thumbs-up:before {
content: "\e125"
}
.glyphicon-thumbs-down:before {
content: "\e126"
}
.glyphicon-hand-right:before {
content: "\e127"
}
.glyphicon-hand-left:before {
content: "\e128"
}
.glyphicon-hand-up:before {
content: "\e129"
}
.glyphicon-hand-down:before {
content: "\e130"
}
.glyphicon-circle-arrow-right:before {
content: "\e131"
}
.glyphicon-circle-arrow-left:before {
content: "\e132"
}
.glyphicon-circle-arrow-up:before {
content: "\e133"
}
.glyphicon-circle-arrow-down:before {
content: "\e134"
}
.glyphicon-globe:before {
content: "\e135"
}
.glyphicon-wrench:before {
content: "\e136"
}
.glyphicon-tasks:before {
content: "\e137"
}
.glyphicon-filter:before {
content: "\e138"
}
.glyphicon-briefcase:before {
content: "\e139"
}
.glyphicon-fullscreen:before {
content: "\e140"
}
.glyphicon-dashboard:before {
content: "\e141"
}
.glyphicon-paperclip:before {
content: "\e142"
}
.glyphicon-heart-empty:before {
content: "\e143"
}
.glyphicon-link:before {
content: "\e144"
}
.glyphicon-phone:before {
content: "\e145"
}
.glyphicon-pushpin:before {
content: "\e146"
}
.glyphicon-usd:before {
content: "\e148"
}
.glyphicon-gbp:before {
content: "\e149"
}
.glyphicon-sort:before {
content: "\e150"
}
.glyphicon-sort-by-alphabet:before {
content: "\e151"
}
.glyphicon-sort-by-alphabet-alt:before {
content: "\e152"
}
.glyphicon-sort-by-order:before {
content: "\e153"
}
.glyphicon-sort-by-order-alt:before {
content: "\e154"
}
.glyphicon-sort-by-attributes:before {
content: "\e155"
}
.glyphicon-sort-by-attributes-alt:before {
content: "\e156"
}
.glyphicon-unchecked:before {
content: "\e157"
}
.glyphicon-expand:before {
content: "\e158"
}
.glyphicon-collapse-down:before {
content: "\e159"
}
.glyphicon-collapse-up:before {
content: "\e160"
}
.glyphicon-log-in:before {
content: "\e161"
}
.glyphicon-flash:before {
content: "\e162"
}
.glyphicon-log-out:before {
content: "\e163"
}
.glyphicon-new-window:before {
content: "\e164"
}
.glyphicon-record:before {
content: "\e165"
}
.glyphicon-save:before {
content: "\e166"
}
.glyphicon-open:before {
content: "\e167"
}
.glyphicon-saved:before {
content: "\e168"
}
.glyphicon-import:before {
content: "\e169"
}
.glyphicon-export:before {
content: "\e170"
}
.glyphicon-send:before {
content: "\e171"
}
.glyphicon-floppy-disk:before {
content: "\e172"
}
.glyphicon-floppy-saved:before {
content: "\e173"
}
.glyphicon-floppy-remove:before {
content: "\e174"
}
.glyphicon-floppy-save:before {
content: "\e175"
}
.glyphicon-floppy-open:before {
content: "\e176"
}
.glyphicon-credit-card:before {
content: "\e177"
}
.glyphicon-transfer:before {
content: "\e178"
}
.glyphicon-cutlery:before {
content: "\e179"
}
.glyphicon-header:before {
content: "\e180"
}
.glyphicon-compressed:before {
content: "\e181"
}
.glyphicon-earphone:before {
content: "\e182"
}
.glyphicon-phone-alt:before {
content: "\e183"
}
.glyphicon-tower:before {
content: "\e184"
}
.glyphicon-stats:before {
content: "\e185"
}
.glyphicon-sd-video:before {
content: "\e186"
}
.glyphicon-hd-video:before {
content: "\e187"
}
.glyphicon-subtitles:before {
content: "\e188"
}
.glyphicon-sound-stereo:before {
content: "\e189"
}
.glyphicon-sound-dolby:before {
content: "\e190"
}
.glyphicon-sound-5-1:before {
content: "\e191"
}
.glyphicon-sound-6-1:before {
content: "\e192"
}
.glyphicon-sound-7-1:before {
content: "\e193"
}
.glyphicon-copyright-mark:before {
content: "\e194"
}
.glyphicon-registration-mark:before {
content: "\e195"
}
.glyphicon-cloud-download:before {
content: "\e197"
}
.glyphicon-cloud-upload:before {
content: "\e198"
}
.glyphicon-tree-conifer:before {
content: "\e199"
}
.glyphicon-tree-deciduous:before {
content: "\e200"
}
.glyphicon-cd:before {
content: "\e201"
}
.glyphicon-save-file:before {
content: "\e202"
}
.glyphicon-open-file:before {
content: "\e203"
}
.glyphicon-level-up:before {
content: "\e204"
}
.glyphicon-copy:before {
content: "\e205"
}
.glyphicon-paste:before {
content: "\e206"
}
.glyphicon-alert:before {
content: "\e209"
}
.glyphicon-equalizer:before {
content: "\e210"
}
.glyphicon-king:before {
content: "\e211"
}
.glyphicon-queen:before {
content: "\e212"
}
.glyphicon-pawn:before {
content: "\e213"
}
.glyphicon-bishop:before {
content: "\e214"
}
.glyphicon-knight:before {
content: "\e215"
}
.glyphicon-baby-formula:before {
content: "\e216"
}
.glyphicon-blackboard:before {
content: "\e218"
}
.glyphicon-bed:before {
content: "\e219"
}
.glyphicon-apple:before {
content: "\f8ff"
}
.glyphicon-erase:before {
content: "\e221"
}
.glyphicon-lamp:before {
content: "\e223"
}
.glyphicon-duplicate:before {
content: "\e224"
}
.glyphicon-piggy-bank:before {
content: "\e225"
}
.glyphicon-scissors:before {
content: "\e226"
}
.glyphicon-bitcoin:before,.glyphicon-btc:before,.glyphicon-xbt:before {
content: "\e227"
}
.glyphicon-scale:before {
content: "\e230"
}
.glyphicon-ice-lolly:before {
content: "\e231"
}
.glyphicon-ice-lolly-tasted:before {
content: "\e232"
}
.glyphicon-education:before {
content: "\e233"
}
.glyphicon-option-horizontal:before {
content: "\e234"
}
.glyphicon-option-vertical:before {
content: "\e235"
}
.glyphicon-menu-hamburger:before {
content: "\e236"
}
.glyphicon-modal-window:before {
content: "\e237"
}
.glyphicon-oil:before {
content: "\e238"
}
.glyphicon-grain:before {
content: "\e239"
}
.glyphicon-sunglasses:before {
content: "\e240"
}
.glyphicon-text-size:before {
content: "\e241"
}
.glyphicon-text-color:before {
content: "\e242"
}
.glyphicon-text-background:before {
content: "\e243"
}
.glyphicon-object-align-top:before {
content: "\e244"
}
.glyphicon-object-align-bottom:before {
content: "\e245"
}
.glyphicon-object-align-horizontal:before {
content: "\e246"
}
.glyphicon-object-align-left:before {
content: "\e247"
}
.glyphicon-object-align-vertical:before {
content: "\e248"
}
.glyphicon-object-align-right:before {
content: "\e249"
}
.glyphicon-triangle-right:before {
content: "\e250"
}
.glyphicon-triangle-left:before {
content: "\e251"
}
.glyphicon-triangle-bottom:before {
content: "\e252"
}
.glyphicon-triangle-top:before {
content: "/e253"
}
.glyphicon-console:before {
content: "/e254"
}
.glyphicon-superscript:before {
content: "/e255"
}
.glyphicon-subscript:before {
content: "/e256"
}
.glyphicon-menu-left:before {
content: "/e257"
}
.glyphicon-menu-right:before {
content: "/e258"
}
.glyphicon-menu-down:before {
content: "/e259"
}
.glyphicon-menu-up:before {
content: "/e260"
}
*,:after,:before {
box-sizing: border-box
}
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 10px
}
body {
background-color: #fff;
color: #fff;
font-family: Torus,Inter,Helvetica Neue,Tahoma,Arial,Hiragino Kaku Gothic ProN,Meiryo,Microsoft YaHei,Apple SD Gothic Neo,sans-serif;
font-size: 16px;
line-height: 1.25
}
button,input,select,textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
a {
color: #29b;
}
a:focus,a:hover {
color: #6cf;
text-decoration: underline
}
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
figure {
margin: 0
}
img {
vertical-align: middle
}
.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img {
display: block;
height: auto;
max-width: 100%
}
.img-rounded {
border-radius: 6px
}
.img-thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
height: auto;
line-height: 1.25;
max-width: 100%;
padding: 4px;
transition: all .2s ease-in-out
}
.img-circle {
border-radius: 50%
}
hr {
border: 0;
border-top: 1px solid #eee;
margin-bottom: 20px;
margin-top: 20px
}
.sr-only {
clip: rect(0,0,0,0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.sr-only-focusable:active,.sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto
}
[role=button] {
cursor: pointer
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
color: #cc5288;
font-family: inherit;
font-weight: 500;
line-height: 1.1
}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small {
color: #777;
font-weight: 400;
line-height: 1
}
.h1,.h2,.h3,h1,h2,h3 {
margin-bottom: 10px;
margin-top: 20px
}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small {
font-size: 65%
}
.h4,.h5,.h6,h4,h5,h6 {
margin-bottom: 10px;
margin-top: 10px
}
.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small {
font-size: 75%
}
.h1,h1 {
font-size: 41px
}
.h2,h2 {
font-size: 34px
}
.h3,h3 {
font-size: 28px
}
.h4,h4 {
font-size: 20px
}
.h5,h5 {
font-size: 16px
}
.h6,h6 {
font-size: 14px
}
p {
margin: 0 0 10px
}
.lead {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
margin-bottom: 20px
}
@media (min-width: 900px) {
.lead {
font-size:24px
}
}
.small,small {
font-size: 87%
}
.mark,mark {
background-color: #fcf8e3;
padding: .2em
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.text-center {
text-align: center
}
.text-justify {
text-align: justify
}
.text-nowrap {
white-space: nowrap
}
.text-lowercase {
text-transform: lowercase
}
.text-uppercase {
text-transform: uppercase
}
.text-capitalize {
text-transform: capitalize
}
.text-muted {
color: #777
}
.text-primary {
color: #f6a
}
a.text-primary:focus,a.text-primary:hover {
color: #ff338e
}
.text-success {
color: #3c763d
}
a.text-success:focus,a.text-success:hover {
color: #2b542c
}
.text-info {
color: #31708f
}
a.text-info:focus,a.text-info:hover {
color: #245269
}
.text-warning {
color: #8a6d3b
}
a.text-warning:focus,a.text-warning:hover {
color: #66512c
}
.text-danger {
color: #a94442
}
a.text-danger:focus,a.text-danger:hover {
color: #843534
}
.bg-primary {
background-color: #f6a;
color: #fff
}
a.bg-primary:focus,a.bg-primary:hover {
background-color: #ff338e
}
.bg-success {
background-color: #dff0d8
}
a.bg-success:focus,a.bg-success:hover {
background-color: #c1e2b3
}
.bg-info {
background-color: #d9edf7
}
a.bg-info:focus,a.bg-info:hover {
background-color: #afd9ee
}
.bg-warning {
background-color: #fcf8e3
}
a.bg-warning:focus,a.bg-warning:hover {
background-color: #f7ecb5
}
.bg-danger {
background-color: #f2dede
}
a.bg-danger:focus,a.bg-danger:hover {
background-color: #e4b9b9
}
.page-header {
border-bottom: 1px solid #eee;
margin: 40px 0 20px;
padding-bottom: 9px
}
ol,ul {
margin-bottom: 10px;
margin-top: 0
}
ol ol,ol ul,ul ol,ul ul {
margin-bottom: 0
}
.list-inline,.list-unstyled {
list-style: none;
padding-left: 0
}
.list-inline {
margin-left: -5px
}
.list-inline>li {
display: inline-block;
padding-left: 5px;
padding-right: 5px
}
dl {
margin-bottom: 20px;
margin-top: 0
}
dd,dt {
line-height: 1.25
}
dt {
font-weight: 700
}
dd {
margin-left: 0
}
@media (min-width: 900px) {
.dl-horizontal dt {
clear:left;
float: left;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
width: 160px
}
.dl-horizontal dd {
margin-left: 180px
}
}
abbr[data-original-title],abbr[title] {
cursor: help
}
.initialism {
font-size: 90%;
text-transform: uppercase
}
blockquote {
border-left: 5px solid #eee;
font-size: 20px;
margin: 0 0 20px;
padding: 10px 20px
}
blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child {
margin-bottom: 0
}
blockquote .small,blockquote footer,blockquote small {
color: #777;
display: block;
font-size: 80%;
line-height: 1.25
}
.blockquote-reverse,blockquote.pull-right {
border-left: 0;
border-right: 5px solid #eee;
padding-left: 0;
padding-right: 15px;
text-align: right
}
.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before {
content: ""
}
address {
font-style: normal;
line-height: 1.25;
margin-bottom: 20px
}
code,kbd,pre,samp {
font-family: Menlo,Monaco,Consolas,Courier New,monospace
}
code {
background-color: #f9f2f4;
border-radius: 4px;
color: #c7254e
}
code,kbd {
font-size: 90%;
padding: 2px 4px
}
kbd {
background-color: #333;
border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
color: #fff
}
kbd kbd {
box-shadow: none;
font-size: 100%;
font-weight: 700;
padding: 0
}
pre {
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
color: #1a1a1a;
display: block;
font-size: 15px;
line-height: 1.25;
margin: 0 0 10px;
padding: 9.5px;
word-break: break-all
}
pre code {
background-color: transparent;
border-radius: 0;
color: inherit;
font-size: inherit;
padding: 0;
white-space: pre-wrap
}
.pre-scrollable {
max-height: 340px;
overflow-y: scroll
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.container {
width:1000px
}
}
@media (min-width: 1300px) {
.container {
width:1000px
}
}
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px
}
.row {
margin-left: -10px;
margin-right: -10px
}
.row-no-gutters {
margin-left: 0;
margin-right: 0
}
.row-no-gutters [class*=col-] {
padding-left: 0;
padding-right: 0
}
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
position: relative
}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
float: left
}
.col-xs-12 {
width: 100%
}
.col-xs-11 {
width: 91.66666667%
}
.col-xs-10 {
width: 83.33333333%
}
.col-xs-9 {
width: 75%
}
.col-xs-8 {
width: 66.66666667%
}
.col-xs-7 {
width: 58.33333333%
}
.col-xs-6 {
width: 50%
}
.col-xs-5 {
width: 41.66666667%
}
.col-xs-4 {
width: 33.33333333%
}
.col-xs-3 {
width: 25%
}
.col-xs-2 {
width: 16.66666667%
}
.col-xs-1 {
width: 8.33333333%
}
.col-xs-pull-12 {
right: 100%
}
.col-xs-pull-11 {
right: 91.66666667%
}
.col-xs-pull-10 {
right: 83.33333333%
}
.col-xs-pull-9 {
right: 75%
}
.col-xs-pull-8 {
right: 66.66666667%
}
.col-xs-pull-7 {
right: 58.33333333%
}
.col-xs-pull-6 {
right: 50%
}
.col-xs-pull-5 {
right: 41.66666667%
}
.col-xs-pull-4 {
right: 33.33333333%
}
.col-xs-pull-3 {
right: 25%
}
.col-xs-pull-2 {
right: 16.66666667%
}
.col-xs-pull-1 {
right: 8.33333333%
}
.col-xs-pull-0 {
right: auto
}
.col-xs-push-12 {
left: 100%
}
.col-xs-push-11 {
left: 91.66666667%
}
.col-xs-push-10 {
left: 83.33333333%
}
.col-xs-push-9 {
left: 75%
}
.col-xs-push-8 {
left: 66.66666667%
}
.col-xs-push-7 {
left: 58.33333333%
}
.col-xs-push-6 {
left: 50%
}
.col-xs-push-5 {
left: 41.66666667%
}
.col-xs-push-4 {
left: 33.33333333%
}
.col-xs-push-3 {
left: 25%
}
.col-xs-push-2 {
left: 16.66666667%
}
.col-xs-push-1 {
left: 8.33333333%
}
.col-xs-push-0 {
left: auto
}
.col-xs-offset-12 {
margin-left: 100%
}
.col-xs-offset-11 {
margin-left: 91.66666667%
}
.col-xs-offset-10 {
margin-left: 83.33333333%
}
.col-xs-offset-9 {
margin-left: 75%
}
.col-xs-offset-8 {
margin-left: 66.66666667%
}
.col-xs-offset-7 {
margin-left: 58.33333333%
}
.col-xs-offset-6 {
margin-left: 50%
}
.col-xs-offset-5 {
margin-left: 41.66666667%
}
.col-xs-offset-4 {
margin-left: 33.33333333%
}
.col-xs-offset-3 {
margin-left: 25%
}
.col-xs-offset-2 {
margin-left: 16.66666667%
}
.col-xs-offset-1 {
margin-left: 8.33333333%
}
.col-xs-offset-0 {
margin-left: 0
}
@media (min-width: 900px) {
.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9 {
float:left
}
.col-sm-12 {
width: 100%
}
.col-sm-11 {
width: 91.66666667%
}
.col-sm-10 {
width: 83.33333333%
}
.col-sm-9 {
width: 75%
}
.col-sm-8 {
width: 66.66666667%
}
.col-sm-7 {
width: 58.33333333%
}
.col-sm-6 {
width: 50%
}
.col-sm-5 {
width: 41.66666667%
}
.col-sm-4 {
width: 33.33333333%
}
.col-sm-3 {
width: 25%
}
.col-sm-2 {
width: 16.66666667%
}
.col-sm-1 {
width: 8.33333333%
}
.col-sm-pull-12 {
right: 100%
}
.col-sm-pull-11 {
right: 91.66666667%
}
.col-sm-pull-10 {
right: 83.33333333%
}
.col-sm-pull-9 {
right: 75%
}
.col-sm-pull-8 {
right: 66.66666667%
}
.col-sm-pull-7 {
right: 58.33333333%
}
.col-sm-pull-6 {
right: 50%
}
.col-sm-pull-5 {
right: 41.66666667%
}
.col-sm-pull-4 {
right: 33.33333333%
}
.col-sm-pull-3 {
right: 25%
}
.col-sm-pull-2 {
right: 16.66666667%
}
.col-sm-pull-1 {
right: 8.33333333%
}
.col-sm-pull-0 {
right: auto
}
.col-sm-push-12 {
left: 100%
}
.col-sm-push-11 {
left: 91.66666667%
}
.col-sm-push-10 {
left: 83.33333333%
}
.col-sm-push-9 {
left: 75%
}
.col-sm-push-8 {
left: 66.66666667%
}
.col-sm-push-7 {
left: 58.33333333%
}
.col-sm-push-6 {
left: 50%
}
.col-sm-push-5 {
left: 41.66666667%
}
.col-sm-push-4 {
left: 33.33333333%
}
.col-sm-push-3 {
left: 25%
}
.col-sm-push-2 {
left: 16.66666667%
}
.col-sm-push-1 {
left: 8.33333333%
}
.col-sm-push-0 {
left: auto
}
.col-sm-offset-12 {
margin-left: 100%
}
.col-sm-offset-11 {
margin-left: 91.66666667%
}
.col-sm-offset-10 {
margin-left: 83.33333333%
}
.col-sm-offset-9 {
margin-left: 75%
}
.col-sm-offset-8 {
margin-left: 66.66666667%
}
.col-sm-offset-7 {
margin-left: 58.33333333%
}
.col-sm-offset-6 {
margin-left: 50%
}
.col-sm-offset-5 {
margin-left: 41.66666667%
}
.col-sm-offset-4 {
margin-left: 33.33333333%
}
.col-sm-offset-3 {
margin-left: 25%
}
.col-sm-offset-2 {
margin-left: 16.66666667%
}
.col-sm-offset-1 {
margin-left: 8.33333333%
}
.col-sm-offset-0 {
margin-left: 0
}
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9 {
float: left
}
.col-md-12 {
width: 100%
}
.col-md-11 {
width: 91.66666667%
}
.col-md-10 {
width: 83.33333333%
}
.col-md-9 {
width: 75%
}
.col-md-8 {
width: 66.66666667%
}
.col-md-7 {
width: 58.33333333%
}
.col-md-6 {
width: 50%
}
.col-md-5 {
width: 41.66666667%
}
.col-md-4 {
width: 33.33333333%
}
.col-md-3 {
width: 25%
}
.col-md-2 {
width: 16.66666667%
}
.col-md-1 {
width: 8.33333333%
}
.col-md-pull-12 {
right: 100%
}
.col-md-pull-11 {
right: 91.66666667%
}
.col-md-pull-10 {
right: 83.33333333%
}
.col-md-pull-9 {
right: 75%
}
.col-md-pull-8 {
right: 66.66666667%
}
.col-md-pull-7 {
right: 58.33333333%
}
.col-md-pull-6 {
right: 50%
}
.col-md-pull-5 {
right: 41.66666667%
}
.col-md-pull-4 {
right: 33.33333333%
}
.col-md-pull-3 {
right: 25%
}
.col-md-pull-2 {
right: 16.66666667%
}
.col-md-pull-1 {
right: 8.33333333%
}
.col-md-pull-0 {
right: auto
}
.col-md-push-12 {
left: 100%
}
.col-md-push-11 {
left: 91.66666667%
}
.col-md-push-10 {
left: 83.33333333%
}
.col-md-push-9 {
left: 75%
}
.col-md-push-8 {
left: 66.66666667%
}
.col-md-push-7 {
left: 58.33333333%
}
.col-md-push-6 {
left: 50%
}
.col-md-push-5 {
left: 41.66666667%
}
.col-md-push-4 {
left: 33.33333333%
}
.col-md-push-3 {
left: 25%
}
.col-md-push-2 {
left: 16.66666667%
}
.col-md-push-1 {
left: 8.33333333%
}
.col-md-push-0 {
left: auto
}
.col-md-offset-12 {
margin-left: 100%
}
.col-md-offset-11 {
margin-left: 91.66666667%
}
.col-md-offset-10 {
margin-left: 83.33333333%
}
.col-md-offset-9 {
margin-left: 75%
}
.col-md-offset-8 {
margin-left: 66.66666667%
}
.col-md-offset-7 {
margin-left: 58.33333333%
}
.col-md-offset-6 {
margin-left: 50%
}
.col-md-offset-5 {
margin-left: 41.66666667%
}
.col-md-offset-4 {
margin-left: 33.33333333%
}
.col-md-offset-3 {
margin-left: 25%
}
.col-md-offset-2 {
margin-left: 16.66666667%
}
.col-md-offset-1 {
margin-left: 8.33333333%
}
.col-md-offset-0 {
margin-left: 0
}
}
@media (min-width: 1300px) {
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9 {
float:left
}
.col-lg-12 {
width: 100%
}
.col-lg-11 {
width: 91.66666667%
}
.col-lg-10 {
width: 83.33333333%
}
.col-lg-9 {
width: 75%
}
.col-lg-8 {
width: 66.66666667%
}
.col-lg-7 {
width: 58.33333333%
}
.col-lg-6 {
width: 50%
}
.col-lg-5 {
width: 41.66666667%
}
.col-lg-4 {
width: 33.33333333%
}
.col-lg-3 {
width: 25%
}
.col-lg-2 {
width: 16.66666667%
}
.col-lg-1 {
width: 8.33333333%
}
.col-lg-pull-12 {
right: 100%
}
.col-lg-pull-11 {
right: 91.66666667%
}
.col-lg-pull-10 {
right: 83.33333333%
}
.col-lg-pull-9 {
right: 75%
}
.col-lg-pull-8 {
right: 66.66666667%
}
.col-lg-pull-7 {
right: 58.33333333%
}
.col-lg-pull-6 {
right: 50%
}
.col-lg-pull-5 {
right: 41.66666667%
}
.col-lg-pull-4 {
right: 33.33333333%
}
.col-lg-pull-3 {
right: 25%
}
.col-lg-pull-2 {
right: 16.66666667%
}
.col-lg-pull-1 {
right: 8.33333333%
}
.col-lg-pull-0 {
right: auto
}
.col-lg-push-12 {
left: 100%
}
.col-lg-push-11 {
left: 91.66666667%
}
.col-lg-push-10 {
left: 83.33333333%
}
.col-lg-push-9 {
left: 75%
}
.col-lg-push-8 {
left: 66.66666667%
}
.col-lg-push-7 {
left: 58.33333333%
}
.col-lg-push-6 {
left: 50%
}
.col-lg-push-5 {
left: 41.66666667%
}
.col-lg-push-4 {
left: 33.33333333%
}
.col-lg-push-3 {
left: 25%
}
.col-lg-push-2 {
left: 16.66666667%
}
.col-lg-push-1 {
left: 8.33333333%
}
.col-lg-push-0 {
left: auto
}
.col-lg-offset-12 {
margin-left: 100%
}
.col-lg-offset-11 {
margin-left: 91.66666667%
}
.col-lg-offset-10 {
margin-left: 83.33333333%
}
.col-lg-offset-9 {
margin-left: 75%
}
.col-lg-offset-8 {
margin-left: 66.66666667%
}
.col-lg-offset-7 {
margin-left: 58.33333333%
}
.col-lg-offset-6 {
margin-left: 50%
}
.col-lg-offset-5 {
margin-left: 41.66666667%
}
.col-lg-offset-4 {
margin-left: 33.33333333%
}
.col-lg-offset-3 {
margin-left: 25%
}
.col-lg-offset-2 {
margin-left: 16.66666667%
}
.col-lg-offset-1 {
margin-left: 8.33333333%
}
.col-lg-offset-0 {
margin-left: 0
}
}
table {
background-color: transparent
}
table col[class*=col-] {
display: table-column;
float: none;
position: static
}
table td[class*=col-],table th[class*=col-] {
display: table-cell;
float: none;
position: static
}
caption {
color: #777;
padding-bottom: 8px;
padding-top: 8px
}
caption,th {
text-align: left
}
.table {
margin-bottom: 20px;
max-width: 100%;
width: 100%
}
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {
border-top: 1px solid #ddd;
line-height: 1.25;
padding: 8px;
vertical-align: top
}
.table>thead>tr>th {
border-bottom: 2px solid #ddd;
vertical-align: bottom
}
.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th {
border-top: 0
}
.table>tbody+tbody {
border-top: 2px solid #ddd
}
.table .table {
background-color: #fff
}
.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th {
padding: 5px
}
.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th {
border: 1px solid #ddd
}
.table-bordered>thead>tr>td,.table-bordered>thead>tr>th {
border-bottom-width: 2px
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #f9f9f9
}
.table-hover>tbody>tr:hover,.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active {
background-color: #f5f5f5
}
.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover {
background-color: #e8e8e8
}
.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success {
background-color: #dff0d8
}
.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover {
background-color: #d0e9c6
}
.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info {
background-color: #d9edf7
}
.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover {
background-color: #c4e3f3
}
.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning {
background-color: #fcf8e3
}
.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover {
background-color: #faf2cc
}
.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger {
background-color: #f2dede
}
.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover {
background-color: #ebcccc
}
.table-responsive {
min-height: .01%;
overflow-x: auto
}
@media screen and (max-width: 899px) {
.table-responsive {
-ms-overflow-style:-ms-autohiding-scrollbar;
border: 1px solid #ddd;
margin-bottom: 15px;
overflow-y: hidden;
width: 100%
}
.table-responsive>.table {
margin-bottom: 0
}
.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th {
white-space: nowrap
}
.table-responsive>.table-bordered {
border: 0
}
.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child {
border-left: 0
}
.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child {
border-right: 0
}
.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th {
border-bottom: 0
}
}
fieldset {
margin: 0;
min-width: 0
}
fieldset,legend {
border: 0;
padding: 0
}
legend {
border-bottom: 1px solid #e5e5e5;
color: #1a1a1a;
display: block;
font-size: 24px;
line-height: inherit;
margin-bottom: 20px;
width: 100%
}
label {
display: inline-block;
font-weight: 700;
margin-bottom: 5px;
max-width: 100%
}
input[type=search] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box
}
input[type=checkbox],input[type=radio] {
line-height: normal;
margin: 4px 0 0;
margin-top: 1px
}
fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled] {
cursor: not-allowed
}
input[type=file] {
display: block
}
input[type=range] {
display: block;
width: 100%
}
select[multiple],select[size] {
height: auto
}
input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
output {
padding-top: 6px
}
.form-control,output {
color: #1a1a1a;
display: block;
font-size: 16px;
line-height: 1.25
}
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
height: 32px;
padding: 5px 10px;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
width: 100%
}
.form-control:focus {
border-color: #f6a;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,102,170,.6);
outline: 0
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1
}
.form-control:-ms-input-placeholder {
color: #999
}
.form-control::-webkit-input-placeholder {
color: #999
}
.form-control::-ms-expand {
background-color: transparent;
border: 0
}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
background-color: #eee;
opacity: 1
}
.form-control[disabled],fieldset[disabled] .form-control {
cursor: not-allowed
}
textarea.form-control {
height: auto
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control {
line-height:32px
}
.input-group-sm input[type=date],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],.input-group-sm input[type=time],input[type=date].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm,input[type=time].input-sm {
line-height: 33px
}
.input-group-lg input[type=date],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],.input-group-lg input[type=time],input[type=date].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg,input[type=time].input-lg {
line-height: 49px
}
}
.form-group {
margin-bottom: 15px
}
.checkbox,.radio {
display: block;
margin-bottom: 10px;
margin-top: 10px;
position: relative
}
.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label {
cursor: not-allowed
}
.checkbox label,.radio label {
cursor: pointer;
font-weight: 400;
margin-bottom: 0;
min-height: 20px;
padding-left: 20px
}
.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio] {
margin-left: -20px;
margin-top: 4px;
position: absolute
}
.checkbox+.checkbox,.radio+.radio {
margin-top: -5px
}
.checkbox-inline,.radio-inline {
cursor: pointer;
display: inline-block;
font-weight: 400;
margin-bottom: 0;
padding-left: 20px;
position: relative;
vertical-align: middle
}
.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline {
cursor: not-allowed
}
.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline {
margin-left: 10px;
margin-top: 0
}
.form-control-static {
margin-bottom: 0;
min-height: 36px;
padding-bottom: 6px;
padding-top: 6px
}
.form-control-static.input-lg,.form-control-static.input-sm {
padding-left: 0;
padding-right: 0
}
.input-sm {
border-radius: 3px;
font-size: 14px;
height: 33px;
line-height: 1.5;
padding: 5px 10px
}
select.input-sm {
height: 33px;
line-height: 33px
}
select[multiple].input-sm,textarea.input-sm {
height: auto
}
.form-group-sm .form-control {
border-radius: 3px;
font-size: 14px;
height: 33px;
line-height: 1.5;
padding: 5px 10px
}
.form-group-sm select.form-control {
height: 33px;
line-height: 33px
}
.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control {
height: auto
}
.form-group-sm .form-control-static {
font-size: 14px;
height: 33px;
line-height: 1.5;
min-height: 34px;
padding: 6px 10px
}
.input-lg {
border-radius: 6px;
font-size: 20px;
height: 49px;
line-height: 1.3333333;
padding: 10px 15px
}
select.input-lg {
height: 49px;
line-height: 49px
}
select[multiple].input-lg,textarea.input-lg {
height: auto
}
.form-group-lg .form-control {
border-radius: 6px;
font-size: 20px;
height: 49px;
line-height: 1.3333333;
padding: 10px 15px
}
.form-group-lg select.form-control {
height: 49px;
line-height: 49px
}
.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control {
height: auto
}
.form-group-lg .form-control-static {
font-size: 20px;
height: 49px;
line-height: 1.3333333;
min-height: 40px;
padding: 11px 15px
}
.has-feedback {
position: relative
}
.has-feedback .form-control {
padding-right: 40px
}
.form-control-feedback {
display: block;
height: 32px;
line-height: 32px;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 32px;
z-index: 2
}
.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback {
height: 49px;
line-height: 49px;
width: 49px
}
.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback {
height: 33px;
line-height: 33px;
width: 33px
}
.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label {
color: #3c763d
}
.has-success .form-control {
border-color: #3c763d;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}
.has-success .form-control:focus {
border-color: #2b542c;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168
}
.has-success .input-group-addon {
background-color: #dff0d8;
border-color: #3c763d;
color: #3c763d
}
.has-success .form-control-feedback {
color: #3c763d
}
.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label {
color: #8a6d3b
}
.has-warning .form-control {
border-color: #8a6d3b;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}
.has-warning .form-control:focus {
border-color: #66512c;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b
}
.has-warning .input-group-addon {
background-color: #fcf8e3;
border-color: #8a6d3b;
color: #8a6d3b
}
.has-warning .form-control-feedback {
color: #8a6d3b
}
.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label {
color: #a94442
}
.has-error .form-control {
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}
.has-error .form-control:focus {
border-color: #843534;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}
.has-error .input-group-addon {
background-color: #f2dede;
border-color: #a94442;
color: #a94442
}
.has-error .form-control-feedback {
color: #a94442
}
.has-feedback label~.form-control-feedback {
top: 25px
}
.has-feedback label.sr-only~.form-control-feedback {
top: 0
}
.help-block {
color: #fff;
display: block;
margin-bottom: 10px;
margin-top: 5px
}
@media (min-width: 900px) {
.form-inline .form-group {
display:inline-block;
margin-bottom: 0;
vertical-align: middle
}
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
width: auto
}
.form-inline .form-control-static {
display: inline-block
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle
}
.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn {
width: auto
}
.form-inline .input-group>.form-control {
width: 100%
}
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle
}
.form-inline .checkbox,.form-inline .radio {
display: inline-block;
margin-bottom: 0;
margin-top: 0;
vertical-align: middle
}
.form-inline .checkbox label,.form-inline .radio label {
padding-left: 0
}
.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio] {
margin-left: 0;
position: relative
}
.form-inline .has-feedback .form-control-feedback {
top: 0
}
}
.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline {
margin-bottom: 0;
margin-top: 0;
padding-top: 6px
}
.form-horizontal .checkbox,.form-horizontal .radio {
min-height: 26px
}
.form-horizontal .form-group {
margin-left: -10px;
margin-right: -10px
}
@media (min-width: 900px) {
.form-horizontal .control-label {
margin-bottom:0;
padding-top: 6px;
text-align: right
}
}
.form-horizontal .has-feedback .form-control-feedback {
right: 10px
}
@media (min-width: 900px) {
.form-horizontal .form-group-lg .control-label {
font-size:20px;
padding-top: 11px
}
.form-horizontal .form-group-sm .control-label {
font-size: 14px;
padding-top: 6px
}
}
.btn {
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 400;
line-height: 1.25;
margin-bottom: 0;
padding: 5px 10px;
text-align: center;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap
}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn.focus,.btn:focus,.btn:hover {
color: #333;
text-decoration: none
}
.btn.active,.btn:active {
background-image: none;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
outline: 0
}
.btn.disabled,.btn[disabled],a[disabled],fieldset[disabled] .btn {
box-shadow: none;
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: .65
}
a.btn.disabled,fieldset[disabled] a.btn {
pointer-events: none
}
.btn-default {
background-color: #fff;
border-color: #ccc;
color: #333
}
.btn-default.focus,.btn-default:focus {
background-color: #e6e6e6;
border-color: #8c8c8c;
color: #333
}
.btn-default:hover {
background-color: #e6e6e6;
border-color: #adadad;
color: #333
}
.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default {
background-color: #e6e6e6;
background-image: none;
border-color: #adadad;
color: #333
}
.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover {
background-color: #d4d4d4;
border-color: #8c8c8c;
color: #333
}
.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover {
background-color: #fff;
border-color: #ccc
}
.btn-default .badge {
background-color: #333;
color: #fff
}
.btn-primary {
background-color: #f6a;
border-color: #ff4c9c;
color: #fff
}
.btn-primary.focus,.btn-primary:focus {
background-color: #ff338e;
border-color: #cc005b;
color: #fff
}
.btn-primary:hover {
background-color: #ff338e;
border-color: #ff0f7a;
color: #fff
}
.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary {
background-color: #ff338e;
background-image: none;
border-color: #ff0f7a;
color: #fff
}
.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover {
background-color: #ff0f7a;
border-color: #cc005b;
color: #fff
}
.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover {
background-color: #f6a;
border-color: #ff4c9c
}
.btn-primary .badge {
background-color: #fff;
color: #f6a
}
.btn-success {
background-color: #88b300;
border-color: #759a00;
color: #fff
}
.btn-success.focus,.btn-success:focus {
background-color: #618000;
border-color: #141a00;
color: #fff
}
.btn-success:hover {
background-color: #618000;
border-color: #465c00;
color: #fff
}
.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success {
background-color: #618000;
background-image: none;
border-color: #465c00;
color: #fff
}
.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover {
background-color: #465c00;
border-color: #141a00;
color: #fff
}
.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover {
background-color: #88b300;
border-color: #759a00
}
.btn-success .badge {
background-color: #fff;
color: #88b300
}
.btn-info {
background-color: #6cf;
border-color: #4cc4ff;
color: #fff
}
.btn-info.focus,.btn-info:focus {
background-color: #3bf;
border-color: #08c;
color: #fff
}
.btn-info:hover {
background-color: #3bf;
border-color: #0fafff;
color: #fff
}
.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info {
background-color: #3bf;
background-image: none;
border-color: #0fafff;
color: #fff
}
.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover {
background-color: #0fafff;
border-color: #08c;
color: #fff
}
.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover {
background-color: #6cf;
border-color: #4cc4ff
}
.btn-info .badge {
background-color: #fff;
color: #6cf
}
.btn-warning {
background-color: #fc2;
border-color: #ffc608;
color: #fff
}
.btn-warning.focus,.btn-warning:focus {
background-color: #eeb700;
border-color: #886900;
color: #fff
}
.btn-warning:hover {
background-color: #eeb700;
border-color: #ca9c00;
color: #fff
}
.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning {
background-color: #eeb700;
background-image: none;
border-color: #ca9c00;
color: #fff
}
.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover {
background-color: #ca9c00;
border-color: #886900;
color: #fff
}
.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover {
background-color: #fc2;
border-color: #ffc608
}
.btn-warning .badge {
background-color: #fff;
color: #fc2
}
.btn-danger {
background-color: #ed1221;
border-color: #d5101e;
color: #fff
}
.btn-danger.focus,.btn-danger:focus {
background-color: #be0e1a;
border-color: #5f070d;
color: #fff
}
.btn-danger:hover {
background-color: #be0e1a;
border-color: #9c0c16;
color: #fff
}
.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger {
background-color: #be0e1a;
background-image: none;
border-color: #9c0c16;
color: #fff
}
.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover {
background-color: #9c0c16;
border-color: #5f070d;
color: #fff
}
.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover {
background-color: #ed1221;
border-color: #d5101e
}
.btn-danger .badge {
background-color: #fff;
color: #ed1221
}
.btn-link {
border-radius: 0;
color: #29b;
font-weight: 400
}
.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link {
background-color: transparent;
box-shadow: none
}
.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover {
border-color: transparent
}
.btn-link:focus,.btn-link:hover {
background-color: transparent;
color: #6cf;
text-decoration: underline
}
.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover {
color: #777;
text-decoration: none
}
.btn-group-lg>.btn,.btn-lg {
border-radius: 6px;
font-size: 20px;
line-height: 1.3333333;
padding: 10px 15px
}
.btn-group-sm>.btn,.btn-sm {
border-radius: 3px;
font-size: 14px;
line-height: 1.5;
padding: 5px 10px
}
.btn-group-xs>.btn,.btn-xs {
border-radius: 3px;
font-size: 14px;
line-height: 1.5;
padding: 0 5px
}
.btn-block {
display: block;
width: 100%
}
.btn-block+.btn-block {
margin-top: 5px
}
input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block {
width: 100%
}
.fade {
opacity: 0;
transition: opacity .15s linear
}
.fade.in {
opacity: 1
}
.collapse {
display: none
}
.collapse.in {
display: block
}
tr.collapse.in {
display: table-row
}
tbody.collapse.in {
display: table-row-group
}
.collapsing {
height: 0;
overflow: hidden;
position: relative;
transition-duration: .35s;
transition-property: height,visibility;
transition-timing-function: ease
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px dashed;
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0
}
.dropdown,.dropup {
position: relative
}
.dropdown-toggle:focus {
outline: 0
}
.dropdown-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
display: none;
float: left;
font-size: 16px;
left: 0;
list-style: none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
text-align: left;
top: 100%;
z-index: 1000
}
.dropdown-menu.pull-right {
left: auto;
right: 0
}
.dropdown-menu .divider {
background-color: #e5e5e5;
height: 1px;
margin: 9px 0;
overflow: hidden
}
.dropdown-menu>li>a {
clear: both;
color: #1a1a1a;
display: block;
font-weight: 400;
line-height: 1.25;
padding: 3px 20px;
white-space: nowrap
}
.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover {
background-color: #f5f5f5;
color: #0d0d0d;
text-decoration: none
}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover {
background-color: #f6a;
color: #fff;
outline: 0;
text-decoration: none
}
.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover {
color: #777
}
.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover {
background-color: transparent;
background-image: none;
cursor: not-allowed;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
text-decoration: none
}
.open>.dropdown-menu {
display: block
}
.open>a {
outline: 0
}
.dropdown-menu-right {
left: auto;
right: 0
}
.dropdown-menu-left {
left: 0;
right: auto
}
.dropdown-header {
color: #777;
display: block;
font-size: 14px;
line-height: 1.25;
padding: 3px 20px;
white-space: nowrap
}
.dropdown-backdrop {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 990
}
.pull-right>.dropdown-menu {
left: auto;
right: 0
}
.dropup .caret,.navbar-fixed-bottom .dropdown .caret {
border-bottom: 4px dashed;
border-bottom: 4px solid;
border-top: 0;
content: ""
}
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu {
bottom: 100%;
margin-bottom: 2px;
top: auto
}
@media (min-width: 900px) {
.navbar-right .dropdown-menu {
left:auto;
right: 0
}
.navbar-right .dropdown-menu-left {
left: 0;
right: auto
}
}
.btn-group,.btn-group-vertical {
display: inline-block;
position: relative;
vertical-align: middle
}
.btn-group-vertical>.btn,.btn-group>.btn {
float: left;
position: relative
}
.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover {
z-index: 2
}
.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group {
margin-left: -1px
}
.btn-toolbar {
margin-left: -5px
}
.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group {
float: left
}
.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group {
margin-left: 5px
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0
}
.btn-group>.btn:first-child {
margin-left: 0
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0
}
.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0
}
.btn-group>.btn-group {
float: left
}
.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn {
border-radius: 0
}
.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
border-bottom-right-radius: 0;
border-top-right-radius: 0
}
.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0
}
.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {
outline: 0
}
.btn-group>.btn+.dropdown-toggle {
padding-left: 8px;
padding-right: 8px
}
.btn-group>.btn-lg+.dropdown-toggle {
padding-left: 12px;
padding-right: 12px
}
.btn-group.open .dropdown-toggle {
box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
}
.btn-group.open .dropdown-toggle.btn-link {
box-shadow: none
}
.btn .caret {
margin-left: 0
}
.btn-lg .caret {
border-width: 5px 5px 0
}
.dropup .btn-lg .caret {
border-width: 0 5px 5px
}
.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn {
display: block;
float: none;
max-width: 100%;
width: 100%
}
.btn-group-vertical>.btn-group>.btn {
float: none
}
.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group {
margin-left: 0;
margin-top: -1px
}
.btn-group-vertical>.btn:not(:first-child):not(:last-child) {
border-radius: 0
}
.btn-group-vertical>.btn:first-child:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px
}
.btn-group-vertical>.btn:last-child:not(:first-child) {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-top-right-radius: 0
}
.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn {
border-radius: 0
}
.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.btn-group-justified {
border-collapse: separate;
display: table;
table-layout: fixed;
width: 100%
}
.btn-group-justified>.btn,.btn-group-justified>.btn-group {
display: table-cell;
float: none;
width: 1%
}
.btn-group-justified>.btn-group .btn {
width: 100%
}
.btn-group-justified>.btn-group .dropdown-menu {
left: auto
}
[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio] {
clip: rect(0,0,0,0);
pointer-events: none;
position: absolute
}
.input-group {
border-collapse: separate;
display: table;
position: relative
}
.input-group[class*=col-] {
float: none;
padding-left: 0;
padding-right: 0
}
.input-group .form-control {
float: left;
margin-bottom: 0;
position: relative;
width: 100%;
z-index: 2
}
.input-group .form-control:focus {
z-index: 3
}
.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn {
border-radius: 6px;
font-size: 20px;
height: 49px;
line-height: 1.3333333;
padding: 10px 15px
}
select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn {
height: 49px;
line-height: 49px
}
select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn {
height: auto
}
.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn {
border-radius: 3px;
font-size: 14px;
height: 33px;
line-height: 1.5;
padding: 5px 10px
}
select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn {
height: 33px;
line-height: 33px
}
select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn {
height: auto
}
.input-group .form-control,.input-group-addon,.input-group-btn {
display: table-cell
}
.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child) {
border-radius: 0
}
.input-group-addon,.input-group-btn {
vertical-align: middle;
white-space: nowrap;
width: 1%
}
.input-group-addon {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px;
color: #1a1a1a;
font-size: 16px;
font-weight: 400;
line-height: 1;
padding: 5px 10px;
text-align: center
}
.input-group-addon.input-sm {
border-radius: 3px;
font-size: 14px;
padding: 5px 10px
}
.input-group-addon.input-lg {
border-radius: 6px;
font-size: 20px;
padding: 10px 15px
}
.input-group-addon input[type=checkbox],.input-group-addon input[type=radio] {
margin-top: 0
}
.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0
}
.input-group-addon:first-child {
border-right: 0
}
.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle {
border-bottom-left-radius: 0;
border-top-left-radius: 0
}
.input-group-addon:last-child {
border-left: 0
}
.input-group-btn {
font-size: 0;
white-space: nowrap
}
.input-group-btn,.input-group-btn>.btn {
position: relative
}
.input-group-btn>.btn+.btn {
margin-left: -1px
}
.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover {
z-index: 2
}
.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group {
margin-right: -1px
}
.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group {
margin-left: -1px;
z-index: 2
}
.nav {
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
.nav>li,.nav>li>a {
display: block;
position: relative
}
.nav>li>a {
padding: 10px
}
.nav>li>a:focus,.nav>li>a:hover {
background-color: transparent;
text-decoration: none
}
.nav>li.disabled>a {
color: #777
}
.nav>li.disabled>a:focus,.nav>li.disabled>a:hover {
background-color: transparent;
color: #777;
cursor: not-allowed;
text-decoration: none
}
.nav .open>a,.nav .open>a:focus,.nav .open>a:hover {
background-color: transparent;
border-color: #29b
}
.nav .nav-divider {
background-color: #e5e5e5;
height: 1px;
margin: 9px 0;
overflow: hidden
}
.nav>li>a>img {
max-width: none
}
.nav-tabs {
border-bottom: 1px solid #ddd
}
.nav-tabs>li {
float: left;
margin-bottom: -1px
}
.nav-tabs>li>a {
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
line-height: 1.25;
margin-right: 2px
}
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd
}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover {
background-color: #fff;
border: 1px solid;
border-color: #ddd #ddd transparent;
color: #262626;
cursor: default
}
.nav-tabs.nav-justified {
border-bottom: 0;
width: 100%
}
.nav-tabs.nav-justified>li {
float: none
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 5px;
text-align: center
}
.nav-tabs.nav-justified>.dropdown .dropdown-menu {
left: auto;
top: auto
}
@media (min-width: 900px) {
.nav-tabs.nav-justified>li {
display:table-cell;
width: 1%
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 0
}
}
.nav-tabs.nav-justified>li>a {
border-radius: 4px;
margin-right: 0
}
.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover {
border: 1px solid #ddd
}
@media (min-width: 900px) {
.nav-tabs.nav-justified>li>a {
border-bottom:1px solid #ddd;
border-radius: 4px 4px 0 0
}
.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover {
border-bottom-color: #fff
}
}
.nav-pills>li {
float: left
}
.nav-pills>li>a {
border-radius: 4px
}
.nav-pills>li+li {
margin-left: 2px
}
.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover {
background-color: #f6a;
color: #fff
}
.nav-stacked>li {
float: none
}
.nav-stacked>li+li {
margin-left: 0;
margin-top: 2px
}
.nav-justified {
width: 100%
}
.nav-justified>li {
float: none
}
.nav-justified>li>a {
margin-bottom: 5px;
text-align: center
}
.nav-justified>.dropdown .dropdown-menu {
left: auto;
top: auto
}
@media (min-width: 900px) {
.nav-justified>li {
display:table-cell;
width: 1%
}
.nav-justified>li>a {
margin-bottom: 0
}
}
.nav-tabs-justified {
border-bottom: 0
}
.nav-tabs-justified>li>a {
border-radius: 4px;
margin-right: 0
}
.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover {
border: 1px solid #ddd
}
@media (min-width: 900px) {
.nav-tabs-justified>li>a {
border-bottom:1px solid #ddd;
border-radius: 4px 4px 0 0
}
.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover {
border-bottom-color: #fff
}
}
.tab-content>.tab-pane {
display: none
}
.tab-content>.active {
display: block
}
.nav-tabs .dropdown-menu {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -1px
}
.navbar {
border: 1px solid transparent;
margin-bottom: 20px;
min-height: 50px;
position: relative
}
@media (min-width: 900px) {
.navbar {
border-radius:4px
}
.navbar-header {
float: left
}
}
.navbar-collapse {
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1);
overflow-x: visible;
padding-left: 10px;
padding-right: 10px
}
.navbar-collapse.in {
overflow-y: auto
}
@media (min-width: 900px) {
.navbar-collapse {
border-top:0;
box-shadow: none;
width: auto
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
overflow: visible!important;
padding-bottom: 0
}
.navbar-collapse.in {
overflow-y: visible
}
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse {
padding-left: 0;
padding-right: 0
}
}
.navbar-fixed-bottom,.navbar-fixed-top {
left: 0;
position: fixed;
right: 0;
z-index: 1030
}
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse {
max-height: 340px
}
@media (max-device-width: 480px) and (orientation:landscape) {
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse {
max-height:200px
}
}
@media (min-width: 900px) {
.navbar-fixed-bottom,.navbar-fixed-top {
border-radius:0
}
}
.navbar-fixed-top {
border-width: 0 0 1px;
top: 0
}
.navbar-fixed-bottom {
border-width: 1px 0 0;
bottom: 0;
margin-bottom: 0
}
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header {
margin-left: -10px;
margin-right: -10px
}
@media (min-width: 900px) {
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header {
margin-left:0;
margin-right: 0
}
}
.navbar-static-top {
border-width: 0 0 1px;
z-index: 1000
}
@media (min-width: 900px) {
.navbar-static-top {
border-radius:0
}
}
.navbar-brand {
float: left;
font-size: 20px;
height: 50px;
line-height: 20px;
padding: 10px
}
.navbar-brand:focus,.navbar-brand:hover {
text-decoration: none
}
.navbar-brand>img {
display: block
}
@media (min-width: 900px) {
.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand {
margin-left:-10px
}
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 10px;
margin-top: 8px;
padding: 9px 10px;
position: relative
}
.navbar-toggle:focus {
outline: 0
}
.navbar-toggle .icon-bar {
border-radius: 1px;
display: block;
height: 2px;
width: 22px
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px
}
@media (min-width: 900px) {
.navbar-toggle {
display:none
}
}
.navbar-nav {
margin: 5px -10px
}
.navbar-nav>li>a {
line-height: 20px;
padding-bottom: 10px;
padding-top: 10px
}
@media (max-width: 899px) {
.navbar-nav .open .dropdown-menu {
background-color:transparent;
border: 0;
box-shadow: none;
float: none;
margin-top: 0;
position: static;
width: auto
}
.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a {
padding: 5px 15px 5px 25px
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 20px
}
.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover {
background-image: none
}
}
@media (min-width: 900px) {
.navbar-nav {
float:left;
margin: 0
}
.navbar-nav>li {
float: left
}
.navbar-nav>li>a {
padding-bottom: 10px;
padding-top: 10px
}
}
.navbar-form {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1),0 1px 0 hsla(0,0%,100%,.1);
margin: 9px -10px;
padding: 10px
}
@media (min-width: 900px) {
.navbar-form .form-group {
display:inline-block;
margin-bottom: 0;
vertical-align: middle
}
.navbar-form .form-control {
display: inline-block;
vertical-align: middle;
width: auto
}
.navbar-form .form-control-static {
display: inline-block
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle
}
.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn {
width: auto
}
.navbar-form .input-group>.form-control {
width: 100%
}
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle
}
.navbar-form .checkbox,.navbar-form .radio {
display: inline-block;
margin-bottom: 0;
margin-top: 0;
vertical-align: middle
}
.navbar-form .checkbox label,.navbar-form .radio label {
padding-left: 0
}
.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio] {
margin-left: 0;
position: relative
}
.navbar-form .has-feedback .form-control-feedback {
top: 0
}
}
@media (max-width: 899px) {
.navbar-form .form-group {
margin-bottom:5px
}
.navbar-form .form-group:last-child {
margin-bottom: 0
}
}
@media (min-width: 900px) {
.navbar-form {
border:0;
box-shadow: none;
margin-left: 0;
margin-right: 0;
padding-bottom: 0;
padding-top: 0;
width: auto
}
}
.navbar-nav>li>.dropdown-menu {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0
}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-bottom: 0
}
.navbar-btn {
margin-bottom: 9px;
margin-top: 9px
}
.navbar-btn.btn-sm {
margin-bottom: 8.5px;
margin-top: 8.5px
}
.navbar-btn.btn-xs {
margin-bottom: 14px;
margin-top: 14px
}
.navbar-text {
margin-bottom: 15px;
margin-top: 15px
}
@media (min-width: 900px) {
.navbar-text {
float:left;
margin-left: 10px;
margin-right: 10px
}
.navbar-left {
float: left!important
}
.navbar-right {
float: right!important;
margin-right: -10px
}
.navbar-right~.navbar-right {
margin-right: 0
}
}
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7
}
.navbar-default .navbar-brand {
color: #777
}
.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover {
background-color: transparent;
color: #5e5e5e
}
.navbar-default .navbar-nav>li>a,.navbar-default .navbar-text {
color: #777
}
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover {
background-color: transparent;
color: #333
}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover {
background-color: #e7e7e7;
color: #555
}
.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover {
background-color: transparent;
color: #ccc
}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover {
background-color: #e7e7e7;
color: #555
}
@media (max-width: 899px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color:#777
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
background-color: transparent;
color: #333
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {
background-color: #e7e7e7;
color: #555
}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover {
background-color: transparent;
color: #ccc
}
}
.navbar-default .navbar-toggle {
border-color: #ddd
}
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover {
background-color: #ddd
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888
}
.navbar-default .navbar-collapse,.navbar-default .navbar-form {
border-color: #e7e7e7
}
.navbar-default .navbar-link {
color: #777
}
.navbar-default .navbar-link:hover {
color: #333
}
.navbar-default .btn-link {
color: #777
}
.navbar-default .btn-link:focus,.navbar-default .btn-link:hover {
color: #333
}
.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover {
color: #ccc
}
.navbar-inverse {
background-color: #222;
border-color: #080808
}
.navbar-inverse .navbar-brand {
color: #9d9d9d
}
.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover {
background-color: transparent;
color: #fff
}
.navbar-inverse .navbar-nav>li>a,.navbar-inverse .navbar-text {
color: #9d9d9d
}
.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover {
background-color: transparent;
color: #fff
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover {
background-color: #080808;
color: #fff
}
.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover {
background-color: transparent;
color: #444
}
.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover {
background-color: #080808;
color: #fff
}
@media (max-width: 899px) {
.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
border-color:#080808
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background-color: #080808
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #9d9d9d
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
background-color: transparent;
color: #fff
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover {
background-color: #080808;
color: #fff
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover {
background-color: transparent;
color: #444
}
}
.navbar-inverse .navbar-toggle {
border-color: #333
}
.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover {
background-color: #333
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff
}
.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {
border-color: #101010
}
.navbar-inverse .navbar-link {
color: #9d9d9d
}
.navbar-inverse .navbar-link:hover {
color: #fff
}
.navbar-inverse .btn-link {
color: #9d9d9d
}
.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover {
color: #fff
}
.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover {
color: #444
}
.breadcrumb {
background-color: #f5f5f5;
border-radius: 4px;
list-style: none;
margin-bottom: 20px;
padding: 8px 15px
}
.breadcrumb>li {
display: inline-block
}
.breadcrumb>li+li:before {
color: #ccc;
content: "/00a0";
padding: 0 5px
}
.breadcrumb>.active {
color: #777
}
.pagination {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0
}
.pagination>li {
display: inline
}
.pagination>li>a,.pagination>li>span {
background-color: #fff;
border: 1px solid #ddd;
color: #29b;
float: left;
line-height: 1.25;
margin-left: -1px;
padding: 5px 10px;
position: relative;
text-decoration: none
}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
background-color: #eee;
border-color: #ddd;
color: #6cf;
z-index: 2
}
.pagination>li:first-child>a,.pagination>li:first-child>span {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0
}
.pagination>li:last-child>a,.pagination>li:last-child>span {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px
}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
background-color: #f6a;
border-color: #f6a;
color: #fff;
cursor: default;
z-index: 3
}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
background-color: #fff;
border-color: #ddd;
color: #777;
cursor: not-allowed
}
.pagination-lg>li>a,.pagination-lg>li>span {
font-size: 20px;
line-height: 1.3333333;
padding: 10px 15px
}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px
}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px
}
.pagination-sm>li>a,.pagination-sm>li>span {
font-size: 14px;
line-height: 1.5;
padding: 5px 10px
}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px
}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px
}
.pager {
list-style: none;
margin: 20px 0;
padding-left: 0;
text-align: center
}
.pager li {
display: inline
}
.pager li>a,.pager li>span {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
display: inline-block;
padding: 5px 14px
}
.pager li>a:focus,.pager li>a:hover {
background-color: #eee;
text-decoration: none
}
.pager .next>a,.pager .next>span {
float: right
}
.pager .previous>a,.pager .previous>span {
float: left
}
.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span {
background-color: #fff;
color: #777;
cursor: not-allowed
}
.label {
border-radius: .25em;
color: #fff;
display: inline;
font-size: 75%;
font-weight: 700;
line-height: 1;
padding: .2em .6em .3em;
text-align: center;
vertical-align: baseline;
white-space: nowrap
}
a.label:focus,a.label:hover {
color: #fff;
cursor: pointer;
text-decoration: none
}
.label:empty {
display: none
}
.btn .label {
position: relative;
top: -1px
}
.label-default {
background-color: #777
}
.label-default[href]:focus,.label-default[href]:hover {
background-color: #5e5e5e
}
.label-primary {
background-color: #f6a
}
.label-primary[href]:focus,.label-primary[href]:hover {
background-color: #ff338e
}
.label-success {
background-color: #88b300
}
.label-success[href]:focus,.label-success[href]:hover {
background-color: #618000
}
.label-info {
background-color: #6cf
}
.label-info[href]:focus,.label-info[href]:hover {
background-color: #3bf
}
.label-warning {
background-color: #fc2
}
.label-warning[href]:focus,.label-warning[href]:hover {
background-color: #eeb700
}
.label-danger {
background-color: #ed1221
}
.label-danger[href]:focus,.label-danger[href]:hover {
background-color: #be0e1a
}
.badge {
background-color: #fff;
border-radius: 10px;
color: #418;
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 1;
min-width: 10px;
padding: 3px 7px;
text-align: center;
vertical-align: middle;
white-space: nowrap
}
.badge:empty {
display: none
}
.btn .badge {
position: relative;
top: -1px
}
.btn-group-xs>.btn .badge,.btn-xs .badge {
padding: 1px 5px;
top: 0
}
a.badge:focus,a.badge:hover {
color: #cc5288;
cursor: pointer;
text-decoration: none
}
.list-group-item.active>.badge,.nav-pills>.active>a>.badge {
background-color: #fff;
color: #29b
}
.list-group-item>.badge {
float: right
}
.list-group-item>.badge+.badge {
margin-right: 5px
}
.nav-pills>li>a>.badge {
margin-left: 3px
}
.jumbotron {
background-color: #eee;
margin-bottom: 30px;
padding-bottom: 30px;
padding-top: 30px
}
.jumbotron,.jumbotron .h1,.jumbotron h1 {
color: inherit
}
.jumbotron p {
font-size: 24px;
font-weight: 200;
margin-bottom: 15px
}
.jumbotron>hr {
border-top-color: #d5d5d5
}
.container .jumbotron,.container-fluid .jumbotron {
border-radius: 6px;
padding-left: 10px;
padding-right: 10px
}
.jumbotron .container {
max-width: 100%
}
@media screen and (min-width: 900px) {
.jumbotron {
padding-bottom:48px;
padding-top: 48px
}
.container .jumbotron,.container-fluid .jumbotron {
padding-left: 60px;
padding-right: 60px
}
.jumbotron .h1,.jumbotron h1 {
font-size: 72px
}
}
.thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.25;
margin-bottom: 20px;
padding: 4px;
transition: border .2s ease-in-out
}
.thumbnail a>img,.thumbnail>img {
margin-left: auto;
margin-right: auto
}
a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover {
border-color: #29b
}
.thumbnail .caption {
color: #fff;
padding: 9px
}
.alert {
border: 1px solid transparent;
border-radius: 4px;
margin-bottom: 20px;
padding: 15px
}
.alert h4 {
color: inherit;
margin-top: 0
}
.alert .alert-link {
font-weight: 700
}
.alert>p,.alert>ul {
margin-bottom: 0
}
.alert>p+p {
margin-top: 5px
}
.alert-dismissable,.alert-dismissible {
padding-right: 35px
}
.alert-dismissable .close,.alert-dismissible .close {
color: inherit;
position: relative;
right: -21px;
top: -2px
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d
}
.alert-success hr {
border-top-color: #c9e2b3
}
.alert-success .alert-link {
color: #2b542c
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f
}
.alert-info hr {
border-top-color: #a6e1ec
}
.alert-info .alert-link {
color: #245269
}
.alert-warning {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b
}
.alert-warning hr {
border-top-color: #f7e1b5
}
.alert-warning .alert-link {
color: #66512c
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442
}
.alert-danger hr {
border-top-color: #e4b9c0
}
.alert-danger .alert-link {
color: #843534
}
@keyframes progress-bar-stripes {
0% {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
.progress {
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
height: 20px;
margin-bottom: 20px;
overflow: hidden
}
.progress-bar {
background-color: #f6a;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
color: #fff;
float: left;
font-size: 14px;
height: 100%;
line-height: 20px;
text-align: center;
transition: width .6s ease;
width: 0
}
.progress-bar-striped,.progress-striped .progress-bar {
background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
background-size: 40px 40px
}
.progress-bar.active,.progress.active .progress-bar {
animation: progress-bar-stripes 2s linear infinite
}
.progress-bar-success {
background-color: #88b300
}
.progress-striped .progress-bar-success {
background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)
}
.progress-bar-info {
background-color: #6cf
}
.progress-striped .progress-bar-info {
background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)
}
.progress-bar-warning {
background-color: #fc2
}
.progress-striped .progress-bar-warning {
background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)
}
.progress-bar-danger {
background-color: #ed1221
}
.progress-striped .progress-bar-danger {
background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)
}
.media {
margin-top: 15px
}
.media:first-child {
margin-top: 0
}
.media,.media-body {
zoom:1;overflow: hidden
}
.media-body {
width: 10000px
}
.media-object {
display: block
}
.media-object.img-thumbnail {
max-width: none
}
.media-right,.media>.pull-right {
padding-left: 10px
}
.media-left,.media>.pull-left {
padding-right: 10px
}
.media-body,.media-left,.media-right {
display: table-cell;
vertical-align: top
}
.media-middle {
vertical-align: middle
}
.media-bottom {
vertical-align: bottom
}
.media-heading {
margin-bottom: 5px;
margin-top: 0
}
.media-list {
list-style: none;
padding-left: 0
}
.list-group {
margin-bottom: 20px;
padding-left: 0
}
.list-group-item {
background-color: #fff;
border: 1px solid #ddd;
display: block;
margin-bottom: -1px;
padding: 10px 15px;
position: relative
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px
}
.list-group-item:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
margin-bottom: 0
}
.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover {
background-color: #eee;
color: #777;
cursor: not-allowed
}
.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading {
color: inherit
}
.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text {
color: #777
}
.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover {
background-color: #f6a;
border-color: #f6a;
color: #fff;
z-index: 2
}
.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small {
color: inherit
}
.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text {
color: #fff
}
a.list-group-item,button.list-group-item {
color: #555
}
a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading {
color: #333
}
a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover {
background-color: #f5f5f5;
color: #555;
text-decoration: none
}
button.list-group-item {
text-align: left;
width: 100%
}
.list-group-item-success {
background-color: #dff0d8;
color: #3c763d
}
a.list-group-item-success,button.list-group-item-success {
color: #3c763d
}
a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading {
color: inherit
}
a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover {
background-color: #d0e9c6;
color: #3c763d
}
a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover {
background-color: #3c763d;
border-color: #3c763d;
color: #fff
}
.list-group-item-info {
background-color: #d9edf7;
color: #31708f
}
a.list-group-item-info,button.list-group-item-info {
color: #31708f
}
a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading {
color: inherit
}
a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover {
background-color: #c4e3f3;
color: #31708f
}
a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover {
background-color: #31708f;
border-color: #31708f;
color: #fff
}
.list-group-item-warning {
background-color: #fcf8e3;
color: #8a6d3b
}
a.list-group-item-warning,button.list-group-item-warning {
color: #8a6d3b
}
a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading {
color: inherit
}
a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover {
background-color: #faf2cc;
color: #8a6d3b
}
a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover {
background-color: #8a6d3b;
border-color: #8a6d3b;
color: #fff
}
.list-group-item-danger {
background-color: #f2dede;
color: #a94442
}
a.list-group-item-danger,button.list-group-item-danger {
color: #a94442
}
a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading {
color: inherit
}
a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover {
background-color: #ebcccc;
color: #a94442
}
a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover {
background-color: #a94442;
border-color: #a94442;
color: #fff
}
.list-group-item-heading {
margin-bottom: 5px;
margin-top: 0
}
.list-group-item-text {
line-height: 1.3;
margin-bottom: 0
}
.panel {
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
margin-bottom: 20px
}
.panel-body {
padding: 15px
}
.panel-heading {
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 10px 15px
}
.panel-heading>.dropdown .dropdown-toggle,.panel-title {
color: inherit
}
.panel-title {
font-size: 18px;
margin-bottom: 0;
margin-top: 0
}
.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a {
color: inherit
}
.panel-footer {
background-color: #f5f5f5;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: 1px solid #ddd;
padding: 10px 15px
}
.panel>.list-group,.panel>.panel-collapse>.list-group {
margin-bottom: 0
}
.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item {
border-radius: 0;
border-width: 1px 0
}
.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child {
border-top: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px
}
.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child {
border-bottom: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.list-group+.panel-footer,.panel-heading+.list-group .list-group-item:first-child {
border-top-width: 0
}
.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table {
margin-bottom: 0
}
.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption {
padding-left: 15px;
padding-right: 15px
}
.panel>.table-responsive:first-child>.table:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px
}
.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child {
border-top-left-radius: 3px
}
.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child {
border-top-right-radius: 3px
}
.panel>.table-responsive:last-child>.table:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child {
border-bottom-left-radius: 3px
}
.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child {
border-bottom-right-radius: 3px
}
.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body {
border-top: 1px solid #ddd
}
.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th {
border-top: 0
}
.panel>.table-bordered,.panel>.table-responsive>.table-bordered {
border: 0
}
.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child {
border-left: 0
}
.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child {
border-right: 0
}
.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th {
border-bottom: 0
}
.panel>.table-responsive {
border: 0;
margin-bottom: 0
}
.panel-group {
margin-bottom: 20px
}
.panel-group .panel {
border-radius: 4px;
margin-bottom: 0
}
.panel-group .panel+.panel {
margin-top: 5px
}
.panel-group .panel-heading {
border-bottom: 0
}
.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body {
border-top: 1px solid #ddd
}
.panel-group .panel-footer {
border-top: 0
}
.panel-group .panel-footer+.panel-collapse .panel-body {
border-bottom: 1px solid #ddd
}
.panel-default {
border-color: #ddd
}
.panel-default>.panel-heading {
background-color: #f5f5f5;
border-color: #ddd;
color: #1a1a1a
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #ddd
}
.panel-default>.panel-heading .badge {
background-color: #1a1a1a;
color: #f5f5f5
}
.panel-default>.panel-footer+.panel-collapse>.panel-body {
border-bottom-color: #ddd
}
.panel-primary {
border-color: #f6a
}
.panel-primary>.panel-heading {
background-color: #f6a;
border-color: #f6a;
color: #fff
}
.panel-primary>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #f6a
}
.panel-primary>.panel-heading .badge {
background-color: #fff;
color: #f6a
}
.panel-primary>.panel-footer+.panel-collapse>.panel-body {
border-bottom-color: #f6a
}
.panel-success {
border-color: #d6e9c6
}
.panel-success>.panel-heading {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d
}
.panel-success>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #d6e9c6
}
.panel-success>.panel-heading .badge {
background-color: #3c763d;
color: #dff0d8
}
.panel-success>.panel-footer+.panel-collapse>.panel-body {
border-bottom-color: #d6e9c6
}
.panel-info {
border-color: #bce8f1
}
.panel-info>.panel-heading {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f
}
.panel-info>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #bce8f1
}
.panel-info>.panel-heading .badge {
background-color: #31708f;
color: #d9edf7
}
.panel-info>.panel-footer+.panel-collapse>.panel-body {
border-bottom-color: #bce8f1
}
.panel-warning {
border-color: #faebcc
}
.panel-warning>.panel-heading {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b
}
.panel-warning>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #faebcc
}
.panel-warning>.panel-heading .badge {
background-color: #8a6d3b;
color: #fcf8e3
}
.panel-warning>.panel-footer+.panel-collapse>.panel-body {
border-bottom-color: #faebcc
}
.panel-danger {
border-color: #ebccd1
}
.panel-danger>.panel-heading {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442
}
.panel-danger>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #ebccd1
}
.panel-danger>.panel-heading .badge {
background-color: #a94442;
color: #f2dede
}
.panel-danger>.panel-footer+.panel-collapse>.panel-body {
border-bottom-color: #ebccd1
}
.embed-responsive {
display: block;
height: 0;
overflow: hidden;
padding: 0;
position: relative
}
.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.embed-responsive-16by9 {
padding-bottom: 56.25%
}
.embed-responsive-4by3 {
padding-bottom: 75%
}
.well {
background-color: #eee;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
margin-bottom: 20px;
min-height: 20px;
padding: 19px
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15)
}
.well-lg {
border-radius: 6px;
padding: 24px
}
.well-sm {
border-radius: 3px;
padding: 9px
}
.close {
color: #000;
filter: alpha(opacity=20);
float: right;
font-size: 24px;
font-weight: 700;
line-height: 1;
opacity: .2;
text-shadow: 0 1px 0 #fff
}
.close:focus,.close:hover {
color: #000;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
text-decoration: none
}
button.close {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 0
}
.modal,.modal-open {
overflow: hidden
}
.modal {
-webkit-overflow-scrolling: touch;
bottom: 0;
display: none;
left: 0;
outline: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1050
}
.modal.fade .modal-dialog {
transform: translateY(-25%);
transition: transform .3s ease-out
}
.modal.in .modal-dialog {
transform: translate(0)
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto
}
.modal-dialog {
margin: 10px;
position: relative;
width: auto
}
.modal-content {
background-clip: padding-box;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
box-shadow: 0 3px 9px rgba(0,0,0,.5);
outline: 0;
position: relative
}
.modal-backdrop {
background-color: #000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1040
}
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5
}
.modal-header {
border-bottom: 1px solid #e5e5e5;
padding: 15px
}
.modal-header .close {
margin-top: -2px
}
.modal-title {
line-height: 1.25;
margin: 0
}
.modal-body {
padding: 15px;
position: relative
}
.modal-footer {
border-top: 1px solid #e5e5e5;
padding: 15px;
text-align: right
}
.modal-footer .btn+.btn {
margin-bottom: 0;
margin-left: 5px
}
.modal-footer .btn-group .btn+.btn {
margin-left: -1px
}
.modal-footer .btn-block+.btn-block {
margin-left: 0
}
.modal-scrollbar-measure {
height: 50px;
overflow: scroll;
position: absolute;
top: -9999px;
width: 50px
}
@media (min-width: 900px) {
.modal-dialog {
margin:30px auto;
width: 600px
}
.modal-content {
box-shadow: 0 5px 15px rgba(0,0,0,.5)
}
.modal-sm {
width: 300px
}
.modal-lg {
width: 900px
}
}
.tooltip {
word-wrap: normal;
display: block;
filter: alpha(opacity=0);
font-family: Torus,Inter,Helvetica Neue,Tahoma,Arial,Hiragino Kaku Gothic ProN,Meiryo,Microsoft YaHei,Apple SD Gothic Neo,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
letter-spacing: normal;
line-break: auto;
line-height: 1.25;
opacity: 0;
position: absolute;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
z-index: 1070
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9
}
.tooltip.top {
margin-top: -3px;
padding: 5px 0
}
.tooltip.right {
margin-left: 3px;
padding: 0 5px
}
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0
}
.tooltip.left {
margin-left: -3px;
padding: 0 5px
}
.tooltip.top .tooltip-arrow {
border-top-color: #000;
border-width: 5px 5px 0;
bottom: 0;
left: 50%;
margin-left: -5px
}
.tooltip.top-left .tooltip-arrow {
right: 5px
}
.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow {
border-top-color: #000;
border-width: 5px 5px 0;
bottom: 0;
margin-bottom: -5px
}
.tooltip.top-right .tooltip-arrow {
left: 5px
}
.tooltip.right .tooltip-arrow {
border-right-color: #000;
border-width: 5px 5px 5px 0;
left: 0;
margin-top: -5px;
top: 50%
}
.tooltip.left .tooltip-arrow {
border-left-color: #000;
border-width: 5px 0 5px 5px;
margin-top: -5px;
right: 0;
top: 50%
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #000;
border-width: 0 5px 5px;
left: 50%;
margin-left: -5px;
top: 0
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: #000;
border-width: 0 5px 5px;
margin-top: -5px;
right: 5px;
top: 0
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #000;
border-width: 0 5px 5px;
left: 5px;
margin-top: -5px;
top: 0
}
.tooltip-inner {
background-color: #000;
border-radius: 4px;
color: #fff;
max-width: 200px;
padding: 3px 8px;
text-align: center
}
.tooltip-arrow {
border-color: transparent;
border-style: solid;
height: 0;
position: absolute;
width: 0
}
.popover {
word-wrap: normal;
background-clip: padding-box;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
display: none;
font-family: Torus,Inter,Helvetica Neue,Tahoma,Arial,Hiragino Kaku Gothic ProN,Meiryo,Microsoft YaHei,Apple SD Gothic Neo,sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
left: 0;
letter-spacing: normal;
line-break: auto;
line-height: 1.25;
max-width: 276px;
padding: 1px;
position: absolute;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
top: 0;
white-space: normal;
word-break: normal;
word-spacing: normal;
z-index: 1060
}
.popover.top {
margin-top: -10px
}
.popover.right {
margin-left: 10px
}
.popover.bottom {
margin-top: 10px
}
.popover.left {
margin-left: -10px
}
.popover>.arrow {
border-width: 11px
}
.popover>.arrow,.popover>.arrow:after {
border-color: transparent;
border-style: solid;
display: block;
height: 0;
position: absolute;
width: 0
}
.popover>.arrow:after {
border-width: 10px;
content: ""
}
.popover.top>.arrow {
border-bottom-width: 0;
border-top-color: #999;
border-top-color: rgba(0,0,0,.25);
bottom: -11px;
left: 50%;
margin-left: -11px
}
.popover.top>.arrow:after {
border-bottom-width: 0;
border-top-color: #fff;
bottom: 1px;
content: " ";
margin-left: -10px
}
.popover.right>.arrow {
border-left-width: 0;
border-right-color: #999;
border-right-color: rgba(0,0,0,.25);
left: -11px;
margin-top: -11px;
top: 50%
}
.popover.right>.arrow:after {
border-left-width: 0;
border-right-color: #fff;
bottom: -10px;
content: " ";
left: 1px
}
.popover.bottom>.arrow {
border-bottom-color: #999;
border-bottom-color: rgba(0,0,0,.25);
border-top-width: 0;
left: 50%;
margin-left: -11px;
top: -11px
}
.popover.bottom>.arrow:after {
border-bottom-color: #fff;
border-top-width: 0;
content: " ";
margin-left: -10px;
top: 1px
}
.popover.left>.arrow {
border-left-color: #999;
border-left-color: rgba(0,0,0,.25);
border-right-width: 0;
margin-top: -11px;
right: -11px;
top: 50%
}
.popover.left>.arrow:after {
border-left-color: #fff;
border-right-width: 0;
bottom: -10px;
content: " ";
right: 1px
}
.popover-title {
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
font-size: 16px;
margin: 0;
padding: 8px 14px
}
.popover-content {
padding: 9px 14px
}
.carousel,.carousel-inner {
position: relative
}
.carousel-inner {
overflow: hidden;
width: 100%
}
.carousel-inner>.item {
display: none;
position: relative;
transition: left .6s ease-in-out
}
.carousel-inner>.item>a>img,.carousel-inner>.item>img {
line-height: 1
}
@media (-webkit-transform-3d),(transform-3d) {
.carousel-inner>.item {
backface-visibility: hidden;
perspective: 1000px;
transition: transform .6s ease-in-out
}
.carousel-inner>.item.active.right,.carousel-inner>.item.next {
left: 0;
transform: translate3d(100%,0,0)
}
.carousel-inner>.item.active.left,.carousel-inner>.item.prev {
left: 0;
transform: translate3d(-100%,0,0)
}
.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right {
left: 0;
transform: translateZ(0)
}
}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev {
display: block
}
.carousel-inner>.active {
left: 0
}
.carousel-inner>.next,.carousel-inner>.prev {
position: absolute;
top: 0;
width: 100%
}
.carousel-inner>.next {
left: 100%
}
.carousel-inner>.prev {
left: -100%
}
.carousel-inner>.next.left,.carousel-inner>.prev.right {
left: 0
}
.carousel-inner>.active.left {
left: -100%
}
.carousel-inner>.active.right {
left: 100%
}
.carousel-control {
background-color: transparent;
bottom: 0;
color: #fff;
filter: alpha(opacity=50);
font-size: 20px;
left: 0;
opacity: .5;
position: absolute;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
top: 0;
width: 15%
}
.carousel-control.left {
background-image: linear-gradient(90deg,rgba(0,0,0,.5) 0,transparent);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#80000000",endColorstr="#00000000",GradientType=1)
}
.carousel-control.right {
background-image: linear-gradient(90deg,transparent 0,rgba(0,0,0,.5));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000",endColorstr="#80000000",GradientType=1);
left: auto;
right: 0
}
.carousel-control:focus,.carousel-control:hover {
color: #fff;
filter: alpha(opacity=90);
opacity: .9;
outline: 0;
text-decoration: none
}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev {
display: inline-block;
margin-top: -10px;
position: absolute;
top: 50%;
z-index: 5
}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev {
left: 50%;
margin-left: -10px
}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next {
margin-right: -10px;
right: 50%
}
.carousel-control .icon-next,.carousel-control .icon-prev {
font-family: serif;
height: 20px;
line-height: 1;
width: 20px
}
.carousel-control .icon-prev:before {
content: "/2039"
}
.carousel-control .icon-next:before {
content: "/203a"
}
.carousel-indicators {
bottom: 10px;
left: 50%;
list-style: none;
margin-left: -30%;
padding-left: 0;
position: absolute;
text-align: center;
width: 60%;
z-index: 15
}
.carousel-indicators li {
background-color: #000;
background-color: transparent;
border: 1px solid #fff;
border-radius: 10px;
cursor: pointer;
display: inline-block;
height: 10px;
margin: 1px;
text-indent: -999px;
width: 10px
}
.carousel-indicators .active {
background-color: #fff;
height: 12px;
margin: 0;
width: 12px
}
.carousel-caption {
bottom: 20px;
color: #fff;
left: 15%;
padding-bottom: 20px;
padding-top: 20px;
position: absolute;
right: 15%;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
z-index: 10
}
.carousel-caption .btn {
text-shadow: none
}
@media screen and (min-width: 900px) {
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev {
font-size:30px;
height: 30px;
margin-top: -10px;
width: 30px
}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev {
margin-left: -10px
}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next {
margin-right: -10px
}
.carousel-caption {
left: 20%;
padding-bottom: 30px;
right: 20%
}
.carousel-indicators {
bottom: 20px
}
}
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before {
content: " ";
display: table
}
.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after {
clear: both
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto
}
.pull-right {
float: right!important
}
.pull-left {
float: left!important
}
.hide {
display: none!important
}
.show {
display: block!important
}
.invisible {
visibility: hidden
}
.text-hide {
background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none
}
.hidden {
display: none!important
}
.affix {
position: fixed
}
.visible-lg,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block {
display: none!important
}
@media (max-width: 899px) {
.visible-xs {
display:block!important
}
table.visible-xs {
display: table!important
}
tr.visible-xs {
display: table-row!important
}
td.visible-xs,th.visible-xs {
display: table-cell!important
}
.visible-xs-block {
display: block!important
}
.visible-xs-inline {
display: inline!important
}
.visible-xs-inline-block {
display: inline-block!important
}
}
@media (min-width: 900px) and (max-width:899px) {
.visible-sm {
display:block!important
}
table.visible-sm {
display: table!important
}
tr.visible-sm {
display: table-row!important
}
td.visible-sm,th.visible-sm {
display: table-cell!important
}
.visible-sm-block {
display: block!important
}
.visible-sm-inline {
display: inline!important
}
.visible-sm-inline-block {
display: inline-block!important
}
}
@media (min-width: 900px) and (max-width:1299px) {
.visible-md {
display:block!important
}
table.visible-md {
display: table!important
}
tr.visible-md {
display: table-row!important
}
td.visible-md,th.visible-md {
display: table-cell!important
}
.visible-md-block {
display: block!important
}
.visible-md-inline {
display: inline!important
}
.visible-md-inline-block {
display: inline-block!important
}
}
@media (min-width: 1300px) {
.visible-lg {
display:block!important
}
table.visible-lg {
display: table!important
}
tr.visible-lg {
display: table-row!important
}
td.visible-lg,th.visible-lg {
display: table-cell!important
}
.visible-lg-block {
display: block!important
}
.visible-lg-inline {
display: inline!important
}
.visible-lg-inline-block {
display: inline-block!important
}
}
@media (max-width: 899px) {
.hidden-xs {
display:none!important
}
}
@media (min-width: 900px) and (max-width:899px) {
.hidden-sm {
display:none!important
}
}
@media (min-width: 900px) and (max-width:1299px) {
.hidden-md {
display:none!important
}
}
@media (min-width: 1300px) {
.hidden-lg {
display:none!important
}
}
.visible-print {
display: none!important
}
@media print {
.visible-print {
display: block!important
}
table.visible-print {
display: table!important
}
tr.visible-print {
display: table-row!important
}
td.visible-print,th.visible-print {
display: table-cell!important
}
}
.visible-print-block {
display: none!important
}
@media print {
.visible-print-block {
display: block!important
}
}
.visible-print-inline {
display: none!important
}
@media print {
.visible-print-inline {
display: inline!important
}
}
.visible-print-inline-block {
display: none!important
}
@media print {
.visible-print-inline-block {
display: inline-block!important
}
.hidden-print {
display: none!important
}
}
.modal.fade .modal-dialog {
transition-timing-function: cubic-bezier(0,0,0,1)
}
.pswp {
z-index: 9000
}
.pswp__bg {
background: rgba(0,0,0,.8)
}
.pswp__button {
color: #fff;
opacity: .75
}
.pswp__button--contest-vote.pswp__button--contest-vote {
background-image: none
}
.pswp__button--contest-vote-active {
color: orange;
opacity: .9
}
.pswp__button--vote-progress {
align-items: center;
cursor: default;
display: flex;
justify-content: center;
opacity: 1
}
.pswp__button--vote-progress.pswp__button--vote-progress {
background-image: none
}
.pswp__button--disabled {
cursor: default
}
.pswp__button--disabled:active,.pswp__button--disabled:focus,.pswp__button--disabled:hover {
opacity: .75
}
/*!
* jQuery UI Slider 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Slider#theming
*/
.ui-slider {
cursor: pointer;
position: relative;
text-align: left
}
.ui-slider .ui-slider-handle {
background-color: #b17;
border-radius: 30px;
cursor: pointer;
height: 20px;
outline: none;
position: absolute;
width: 10px;
z-index: 2
}
.ui-slider .ui-slider-range {
background-position: 0 0;
border: 0;
display: block;
position: absolute;
z-index: 1
}
.ui-slider-horizontal {
height: 10px
}
.ui-slider-horizontal .ui-slider-handle {
margin-left: -5px;
top: -5px
}
.ui-slider-horizontal .ui-slider-range {
height: 100%;
top: 0
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0
}
/*!
* jQuery UI CSS Framework 1.12.1
* http://jqueryui.com
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/theming/
*
* To view and modify this theme, visit http://jqueryui.com/themeroller/
*/
.ui-corner-all {
border-radius: 6px
}
@font-face {
font-family: Venera;
font-weight: 500;
src: url(/assets/fonts/Venera-500.2deb39f9.otf)
}
@font-face {
font-family: Torus;
font-weight: 100;
src: url(/assets/fonts/Torus-Thin.daca2c7e.otf)
}
@font-face {
font-family: Torus;
font-weight: 600;
src: url(/assets/fonts/Torus-SemiBold.d263d500.otf)
}
@font-face {
font-family: Torus;
font-weight: 700;
src: url(/assets/fonts/Torus-SemiBold.d263d500.otf)
}
@font-face {
font-family: Torus;
font-weight: 400;
src: url(/assets/fonts/Torus-Regular.734ed3ae.otf)
}
@font-face {
font-family: Torus;
font-weight: 300;
src: url(/assets/fonts/Torus-Light.8d3ecae8.otf)
}
@font-face {
font-family: Torus;
font-weight: 900;
src: url(/assets/fonts/Torus-Heavy.7dc2d96b.otf)
}
@font-face {
font-family: Torus;
font-weight: 800;
src: url(/assets/fonts/Torus-Bold.c233ce17.otf)
}
blockquote {
border-left: 2px solid hsl(var(--hsl-c2));
font-size: inherit
}
h1 {
font-size: 30px;
margin: 0 0 20px
}
h1,h2 {
font-weight: 400
}
h2 {
margin: 10px 0 0
}
h1,h2,h3,h4,h5,h6 {
color: hsl(var(--hsl-c1))
}
a {
color: #dfdfdf;
outline-style: none;
text-decoration: none;
transition: color 80ms linear
}
a:active,a:focus,a:hover {
color: #b4b4b4;
}
a:active,a:hover,a:link,a:visited {
outline-style: none;
}
a:hover {
text-decoration: none
}
code {
background: none;
border-radius: 0;
color: inherit;
font-size: inherit;
padding: 0
}
@font-face {
font-family: FontAwesomeExtra;
font-style: normal;
font-weight: 400;
src: url(/assets/fonts/extra.7bddd427.eot);
src: url(/assets/fonts/extra.7bddd427.eot#iefix) format("embedded-opentype"),url(/assets/fonts/extra.53b8246c.woff2) format("woff2"),url(/assets/fonts/extra.7733ec8d.woff) format("woff"),url(/assets/fonts/extra.0bfcd4cb.ttf) format("truetype"),url(/assets/fonts/extra.aa21d911.svg#extra) format("svg")
}
.clear {
clear: both
}
.large {
font-size: 120%
}
.form-control {
border: none;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
font-size: 14px
}
.form-control[type=password],.form-control[type=text] {
-webkit-appearance: none
}
.form-control:focus {
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
select.form-control {
font-weight: 700
}
select.form-control,select.form-control:focus {
box-shadow: 0 1px 3px rgba(0,0,0,.25)
}
iframe {
border: none
}
label {
font-size: 12px;
font-weight: 600
}
input[type=checkbox],input[type=radio] {
margin: 2px 0 0
}
.clickable-row {
cursor: pointer
}
[data-visibility] {
transition: opacity .12s;
will-change: opacity
}
[data-visibility][data-visibility=hidden] {
opacity: 0;
pointer-events: none
}
[data-visibility][data-visibility-animation=none] {
transition: none;
will-change: unset
}
@keyframes spinner-sk-cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(.5)
}
50% {
transform: translateX(42px) translateY(42px) rotate(-179deg)
}
50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
transform: translateX(0) translateY(42px) rotate(-270deg) scale(.5)
}
to {
transform: rotate(-1turn)
}
}
@keyframes spin-w-easing {
to {
transform: rotate(1turn)
}
}
@keyframes grow-and-shrink {
0% {
transform: scale(.8)
}
20% {
transform: scale(1)
}
to {
transform: scale(.8)
}
}
@keyframes fade-in-out {
0% {
opacity: 0
}
20% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes glow-pulse {
0% {
opacity: .5
}
10% {
opacity: 1
}
20% {
opacity: .5
}
30% {
opacity: 1
}
70% {
opacity: .5
}
90% {
opacity: .3
}
}
*,:after,:before {
box-sizing: border-box
}
::-moz-selection {
background-color: #393838ed;
color: #fff
}
::selection {
background-color: #393838ed;
color: #fff
}
::-moz-placeholder {
color: inherit;
opacity: .54
}
::placeholder {
color: inherit;
opacity: .54
}
:root {
--font-default: Torus,Inter,"Helvetica Neue",Tahoma,Arial,"Hiragino Kaku Gothic ProN",Meiryo,"Microsoft YaHei","Apple SD Gothic Neo",sans-serif;
--font-default-vi: Quicksand,Torus,Inter,"Helvetica Neue",Tahoma,Arial,"PingFang TC","Microsoft JhengHei","Apple SD Gothic Neo",system-ui,sans-serif;
--font-default-zh: Torus,Inter,"Helvetica Neue",Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei","Apple SD Gothic Neo",system-ui,sans-serif;
--font-default-th: Torus,Inter,"Helvetica Neue","Prompt",Tahoma,Arial,"Hiragino Kaku Gothic ProN",Meiryo,"Microsoft YaHei","Apple SD Gothic Neo",sans-serif;
--font-default-zh-tw: Torus,Inter,"Helvetica Neue",Tahoma,Arial,"PingFang TC","Microsoft JhengHei","Apple SD Gothic Neo",system-ui,sans-serif;
--font-content: Inter,sans-serif;
--navbar-height: 50px;
--scroll-padding-top: calc(var(--navbar-height) + 1em + var(--scroll-padding-top-extra, 0px));
--page-gutter: 10px
}
@media (min-width: 900px) {
:root {
--navbar-height:50px;
--page-gutter: 50px
}
}
body,html {
height: 100%
}
html {
scroll-padding-bottom: 1em;
scroll-padding-top: var(--scroll-padding-top)
}
body {
-ms-overflow-style: scrollbar;
--z-index--nav-bar-mobile: 509;
--header-pinned-animation-duration: 0ms;
--beatmapset-status-colour-default: var(--hsl-b3);
--beatmapset-graveyard-bg-hsl: 0,0%,0%;
--beatmapset-graveyard-colour: hsl(var(--hsl-b1));
--beatmapset-wip-bg-hsl: var(--hsl-darkorange-1);
--beatmapset-wip-colour: hsl(var(--beatmapset-status-colour-default));
--beatmapset-pending-bg-hsl: var(--hsl-orange-1);
--beatmapset-pending-colour: hsl(var(--beatmapset-status-colour-default));
--beatmapset-qualified-bg-hsl: var(--hsl-blue-1);
--beatmapset-qualified-colour: hsl(var(--beatmapset-status-colour-default));
--beatmapset-approved-bg-hsl: var(--hsl-lime-1);
--beatmapset-approved-colour: hsl(var(--beatmapset-status-colour-default));
--beatmapset-ranked-bg-hsl: var(--hsl-lime-1);
--beatmapset-ranked-colour: hsl(var(--beatmapset-status-colour-default));
--beatmapset-loved-bg-hsl: var(--hsl-pink-1);
--beatmapset-loved-colour: hsl(var(--beatmapset-status-colour-default));
--beatmapset-discussion-colour--hype: hsl(var(--hsl-blue-3));
--beatmapset-discussion-colour--mapper_note: hsl(var(--hsl-purple-1));
--beatmapset-discussion-colour--praise: hsl(var(--hsl-blue-3));
--beatmapset-discussion-colour--problem: hsl(var(--hsl-red-3));
--beatmapset-discussion-colour--resolved: hsl(var(--hsl-lime-3));
--beatmapset-discussion-colour--review: hsl(var(--hsl-c2));
--beatmapset-discussion-colour--suggestion: hsl(var(--hsl-orange-3));
--forum-bg: hsl(var(--hsl-h1));
--forum-text: #29b;
--forum-text: #6cf;
--forum-item-background-color: hsl(var(--hsl-b4));
--forum-item-background-color-hover: hsl(var(--hsl-b3));
--base-hue: var(--base-hue-override,var(--base-hue-default));
--base-hue-deg: calc(var(--base-hue)*1deg);
--level-tier-iron: #bab3ab,#bab3ab;
--level-tier-bronze: #b88f7a,#855c47;
--level-tier-silver: #e0e0eb,#a3a3c2;
--level-tier-gold: #f0e4a8,#e0c952;
--level-tier-platinum: #a8f0ef,#52e0df;
--level-tier-rhodium: #d9f8d3,#a0cf96;
--level-tier-radiant: #97dcff,#ed82ff;
--level-tier-lustrous: #ffe600,#ed82ff;
font-family: var(--font-default-override,var(--font-default));
overflow-y: scroll;
position: static
}
body.js-nav2--active {
--z-index--nav-bar-mobile: 511
}
body.js-animate-nav {
--header-pinned-animation-duration: 300ms
}
#popup-container {
backface-visibility: hidden;
pointer-events: none;
position: fixed;
top: 155px;
width: 100%;
z-index: 9999
}
#popup-container .alert {
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
pointer-events: auto
}
#popup-container .popup-text {
font-weight: 700;
vertical-align: middle
}
.bbcode {
font-family: var(--font-content-override,var(--font-content));
line-height: 1.35;
line-height: 1.5;
overflow-wrap: anywhere
}
.bbcode code {
background-color: hsl(var(--hsl-b5));
border-radius: 4px;
padding: 1px 4px
}
.bbcode h2,.bbcode h4 {
font-style: normal;
font-weight: 700
}
.bbcode h2 {
color: #ffffffad;
font-size: 1.5em
}
.bbcode blockquote {
border: none;
color: #d1d1d2;
font-size: inherit;
padding: 0 0 0 20px;
position: relative
}
.bbcode blockquote:before {
background-color: hsl(var(--hsl-c2));
border-radius: 10000px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 2px
}
.bbcode blockquote h4 {
color: hsl(var(--hsl-c1));
font-size: inherit;
margin: 0 0 10px
}
.bbcode blockquote blockquote {
font-size: .9em
}
.bbcode blockquote blockquote:before {
display: none
}
.bbcode blockquote blockquote h4 {
color: inherit
}
.bbcode blockquote blockquote blockquote blockquote blockquote {
font-size: 1em;
padding-left: 0
}
.bbcode img {
max-width: 100%;
}
.bbcode ol,.bbcode ul {
padding-left: 20px
}
.bbcode pre {
background-color: hsl(var(--hsl-b5));
border: none;
border-radius: 4px;
color: inherit;
font-size: inherit;
padding: 10px;
white-space: pre-wrap
}
.bbcode .unordered {
list-style-type: disc
}
.bbcode .spoiler {
background-color: #000!important;
color: #000!important
}
.bbcode .well {
background-color: #5d5d6517;
border: 2px solid #ffffff63;
margin: 0
}
.bbcode--normal-line-height {
line-height: inherit
}
.bbcode__list-title {
list-style: none;
margin: 0
}
.t-section .u-section--bg-normal {
background-color: white;
}
.t-section .u-section--color-hover:active,.t-section .u-section--color-hover:focus,.t-section .u-section--color-hover:hover {
color: hsl(var(--hsl-l1))!important
}
.t-section .u-section--gradient-down {
background-image: linear-gradient(hsla(var(--hsl-h2),.9) 0,hsl(var(--hsl-h2)) 37.5%,hsl(var(--hsl-h2)) 50%,hsl(var(--hsl-h2)) 50%,hsl(var(--hsl-h2)) 100%);
background-size: 200% 200%
}
.u-section--bg {
background-color: hsl(var(--hsl-h2))
}
.u-section-beatmaps--before-bg-normal:before,.u-section-beatmapsets--before-bg-normal:before {
background-color: white!important
}
.u-section-community--before-bg-normal:before,.u-section-error--before-bg-normal:before {
background-color: white!important
}
.u-section-help--before-bg-normal:before {
background-color: white!important
}
.u-section-home--before-bg-normal:before {
background-color: white!important
}
.u-section-multiplayer--before-bg-normal:before {
background-color: white!important
}
.u-section-rankings--before-bg-normal:before {
background-color: white!important
}
.u-section-store--before-bg-normal:before {
background-color: white!important
}
.t-changelog-stream--stable .u-changelog-stream--bg {
background-color: white
}
.t-changelog-stream--stable .u-changelog-stream--text {
color: #6cf
}
.t-changelog-stream--stable-fallback .u-changelog-stream--bg {
background-color: #29b
}
.t-changelog-stream--stable-fallback .u-changelog-stream--text {
color: #29b
}
.t-changelog-stream--beta .u-changelog-stream--bg {
background-color: #fd5
}
.t-changelog-stream--beta .u-changelog-stream--text {
color: #fd5
}
.t-changelog-stream--cutting-edge .u-changelog-stream--bg {
background-color: #ea0
}
.t-changelog-stream--cutting-edge .u-changelog-stream--text {
color: #ea0
}
.t-changelog-stream--lazer .u-changelog-stream--bg {
background-color: #ed1221
}
.t-changelog-stream--lazer .u-changelog-stream--text {
color: #ed1221
}
.t-changelog-stream--lazer-experimental .u-changelog-stream--bg {
background-color: #ed1221
}
.t-changelog-stream--lazer-experimental .u-changelog-stream--text {
color: #ed1221
}
.t-changelog-stream--web .u-changelog-stream--bg {
background-color: #86e
}
.t-changelog-stream--web .u-changelog-stream--text {
color: #86e
}
.t-changelog-stream--wiki .u-changelog-stream--bg {
background-color: #999
}
.t-changelog-stream--wiki .u-changelog-stream--text {
color: #999
}
.t-changelog-stream--all .u-changelog-stream--bg {
background-color: #fff
}
.t-changelog-stream--all .u-changelog-stream--text {
color: #fff
}
.t-changelog-stream--online .u-changelog-stream--bg {
background-color: #b3d944
}
.t-changelog-stream--online .u-changelog-stream--text {
color: #b3d944
}
.t-changelog-stream--offline .u-changelog-stream--bg {
background-color: #000
}
.t-changelog-stream--offline .u-changelog-stream--text {
color: #000
}
.t-forum-category-beatmaps {
--forum-bg: #86e;
--forum-text: #418;
--forum-text-hover: #86e;
--forum-cover: url(/assets/images/forum-cover-category-beatmaps.4ca83c82.jpg);
--forum-cover-2x: url(/assets/images/[email protected])
}
.t-forum-category-language-specific {
--forum-bg: #fc2;
--forum-text: #c60;
--forum-text-hover: #ea0;
--forum-cover: url(/assets/images/forum-cover-category-language-specific.98877694.jpg);
--forum-cover-2x: url(/assets/images/[email protected])
}
.t-forum-category-management {
--forum-bg: #777;
--forum-text: #0e0e0e;
--forum-text-hover: #262626;
--forum-cover: url(/assets/images/forum-cover-category-management.8abef404.jpg);
--forum-cover-2x: url(/assets/images/[email protected])
}
.t-forum-category-osu {
--forum-bg: #f6a;
--forum-text: #cc5288;
--forum-text-hover: #f6a;
--forum-cover: url(/assets/images/forum-cover-category-osu.e4db1419.jpg);
--forum-cover-2x: url(/assets/images/[email protected])
}
.t-forum-category-other {
--forum-bg: #88b300;
--forum-text: #450;
--forum-text-hover: #88b300;
--forum-cover: url(/assets/images/forum-cover-category-other.b4801060.jpg);
--forum-cover-2x: url(/assets/images/[email protected])
}
/*!
* Load Awesome v1.1.0-osu (http://github.danielcardoso.net/load-awesome/)
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
* Copyright 2018 ppy Pty. Ltd.
* Licensed under MIT
*
* Changelogs for -osu:
* - main container changes:
* - set display to inline-flex
* - set width and height to 1em
* - remove font-size
* - remove color
* - content divs:
* - moved as ::before of the parent
* - set width and height to 90%
* - set border to 0.18em
* - remove display, float
* - remove variations (.la-dark, .la-<sizes>)
* - remove prefixes
*/
.la-ball-clip-rotate {
display: inline-block;
height: 1em;
position: relative;
width: 1em
}
.la-ball-clip-rotate:before {
animation: ball-clip-rotate .75s linear infinite;
background: transparent;
border: .18em solid;
border-bottom: .18em solid transparent;
border-radius: 100%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.la-ball-clip-rotate--loaded.la-ball-clip-rotate:before {
animation-iteration-count: 1
}
.la-ball-clip-rotate--center-inline,.la-ball-clip-rotate--comment-editor {
bottom: -.1em
}
.la-ball-clip-rotate--self-center {
align-self: center
}
@keyframes ball-clip-rotate {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(180deg)
}
to {
transform: rotate(1turn)
}
}
.fab,.fal,.far,.fas {
flex: none
}
[class*=" fa-extra-"],[class^=fa-extra-] {
font-family: FontAwesomeExtra;
font-weight: 400
}
.fa-extra-mode-osu:before {
content: "\e800"
}
.fa-extra-mode-fruits:before {
content: "\e801"
}
.fa-extra-mode-mania:before {
content: "\e802"
}
.fa-extra-mode-taiko:before {
content: "\e803"
}
.fa-extra-social-patreon:before {
content: "\e804"
}
.fa-extra-osu:before {
content: "\e805"
}
@media print {
.no-print,.no-print * {
display: none!important
}
}
.u-blackout-visible {
z-index: 512!important
}
@media (max-width: 899px) {
.u-chat {
position:fixed;
width: 100%
}
}
.u-contents {
display: contents!important
}
.u-ellipsis-overflow {
overflow: hidden!important;
text-overflow: ellipsis!important;
white-space: nowrap!important
}
@media (min-width: 900px) {
.u-ellipsis-overflow-desktop {
overflow:hidden!important;
text-overflow: ellipsis!important;
white-space: nowrap!important
}
}
.u-ellipsis-pre-overflow {
overflow: hidden!important;
text-overflow: ellipsis!important;
white-space: pre!important
}
.u-embed-wide {
aspect-ratio: 16/9;
display: block;
width: 100%
}
.u-embed-wide--bbcode {
max-width: 425px
}
.u-fancy-scrollbar {
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025)
}
.u-fancy-scrollbar,.u-fancy-scrollbar * {
scrollbar-width: thin
}
.u-fancy-scrollbar ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.u-fancy-scrollbar ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.u-fancy-scrollbar ::-webkit-scrollbar:horizontal {
height: 10px
}
.u-fancy-scrollbar ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.u-fancy-scrollbar ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
.u-focus-hides-placeholder:focus::-moz-placeholder {
opacity: 0
}
.u-focus-hides-placeholder:focus::placeholder {
opacity: 0
}
.u-full-size {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.u-hidden {
display: none!important
}
@media (min-width: 900px) {
.u-hidden-desktop {
display:none!important
}
}
@media (max-width: 479px) {
.u-hidden-narrow {
display:none!important
}
}
.u-hover {
pointer-events: auto!important;
}
.u-invisible {
opacity: 0;
pointer-events: none;
position: absolute
}
.u-nav-float {
z-index: 999!important
}
.u-relative {
position: relative
}
.u-uppercase {
text-transform: uppercase
}
.account-edit {
background-color:#00000014;
color: #fff;
display: flex;
flex-direction: column;
font-size: 12px
}
@media (min-width: 900px) {
.account-edit {
flex-direction:row
}
}
.account-edit--first {
position: relative
}
.account-edit--first:after {
content: "";
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%
}
.account-edit__input-group {
background-color: rgb(26 26 26 / 46%);
padding: 10px
}
.account-edit__input-group+.account-edit__input-group {
margin-top: 1px
}
.account-edit__input-groups {
flex: 1
}
.account-edit__section {
flex: none;
padding: 20px 20px 20px 10px;
width: 250px;
border-right: solid #1616167d 2px
}
@media (min-width: 900px) {
.account-edit__section {
padding-bottom:0;
padding-left: 50px
}
}
.account-edit__section-title {
color: #fff;
font-size: 20px;
margin: 0;
overflow-wrap: break-word
}
.account-edit-entry {
align-items: center;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 10px 0;
text-transform: none
}
.account-edit-entry--block {
display: block
}
@media (min-width: 900px) {
.account-edit-entry--block,.account-edit-entry--no-label {
padding-left:160px
}
}
.account-edit-entry.js-account-edit-avatar--start {
position: relative
}
.account-edit-entry.js-account-edit-avatar--start:after {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.account-edit-entry__avatar {
border-radius: 4px;
height: 128px;
margin-bottom: 10px;
overflow: hidden;
transform: translateZ(0);
width: 128px
}
.account-edit-entry__button {
margin-left: 10px
}
@media (max-width: 899px) {
.account-edit-entry__button {
margin-left:5px
}
}
.account-edit-entry__checkbox {
align-items: baseline;
cursor: pointer;
display: flex;
flex-wrap: wrap;
margin: 0;
text-transform: inherit
}
@media (min-width: 900px) {
.account-edit-entry__checkbox {
position:relative
}
}
.account-edit-entry__checkbox--grid {
display: flex;
justify-content: center
}
.account-edit-entry__checkbox-label {
font-weight: 600;
margin-bottom: 5px;
order: -1;
width: 100%
}
.account-edit-entry__checkbox-label--grid {
margin-bottom: 0;
order: 0;
width: auto
}
@media (min-width: 900px) {
.account-edit-entry__checkbox-label {
margin-bottom:0;
order: 0;
width: auto
}
}
.account-edit-entry__checkbox-status {
align-items: center;
display: flex;
pointer-events: none;
width: -moz-max-content;
width: max-content
}
@media (min-width: 900px) {
.account-edit-entry__checkbox-status {
height:100%;
position: absolute;
right: 100%
}
}
.account-edit-entry__checkboxes {
display: flex;
flex-wrap: wrap;
gap: 10px
}
@media (min-width: 900px) {
.account-edit-entry__checkboxes {
position:relative
}
}
.account-edit-entry__checkboxes--vertical {
flex-direction: column
}
.account-edit-entry__checkboxes-label {
margin-bottom: 10px;
width: 100%
}
.account-edit-entry__rules {
margin-top: 10px
}
.account-edit-entry__drop-overlay {
--bg-opacity: 0;
align-items: center;
background-color: rgba(0,0,0,var(--bg-opacity));
color: #fff;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
padding: 10px;
position: absolute;
text-align: center;
top: 0;
transition: all .12s;
width: 100%
}
.account-edit-entry.js-account-edit-avatar--start .account-edit-entry__drop-overlay {
--bg-opacity: 0.5;
opacity: 1
}
.account-edit-entry.js-account-edit-avatar--hover .account-edit-entry__drop-overlay {
--bg-opacity: 0.7
}
.account-edit-entry__error {
color: hsl(var(--hsl-h1));
display: none;
margin-top: 5px;
padding-left: 10px;
width: 100%
}
@media (min-width: 900px) {
.account-edit-entry__error {
padding-left:170px
}
}
.account-edit-entry[data-form-error-state=error] .account-edit-entry__error {
display: block
}
.account-edit-entry__delivery-options {
grid-gap: 5px;
display: grid;
grid-template-columns: auto auto 1fr
}
.account-edit-entry__group {
flex: 1
}
.account-edit-entry__input {
align-self: stretch;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #232323a6;
border: 2px solid transparent;
border-radius: 4px;
color: #fff;
flex: 1;
font-weight: 400;
margin: 0;
max-width: 250px;
outline: none;
padding: 5px
}
@media (max-width: 899px) {
.account-edit-entry__input {
font-size:16px
}
}
.account-edit-entry--read-only .account-edit-entry__input {
background: none
}
.account-edit-entry__input:focus {
border-color: hsl(var(--hsl-l1))
}
.account-edit-entry[data-form-error-state=error] .account-edit-entry__input {
border-color: #ed1221
}
.account-edit-entry--wide .account-edit-entry__input {
max-width: 400px
}
.account-edit-entry__label {
flex: none;
font-weight: 700;
order: -1;
padding-bottom: 5px;
width: 100%
}
@media (min-width: 900px) {
.account-edit-entry__label {
align-self:center;
padding-bottom: 0;
padding-right: 10px;
text-align: right;
width: 160px
}
}
.account-edit-entry__label--top-pinned {
align-self: flex-start
}
:focus~.account-edit-entry__label {
color: hsl(var(--hsl-l1))
}
.account-edit-entry__misc-info {
display: block;
margin-right: 10px;
max-width: 250px
}
.account-edit-entry__misc-info--signature-preview {
max-height: 150px;
overflow: hidden
}
.account-edit-entry--wide .account-edit-entry__misc-info {
max-width: 400px
}
.account-edit-entry__overlay-spinner {
align-items: center;
background-color: rgba(0,0,0,.75);
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .12s;
width: 100%
}
.account-edit-entry.js-account-edit-avatar--saving .account-edit-entry__overlay-spinner {
opacity: 1
}
.account-edit-status {
display: flex;
font-weight: 700;
margin-left: 10px
}
.account-edit-status__content {
opacity: 0;
padding-right: 10px;
transition: all .12s ease-in-out
}
.account-edit-status__content--saved {
color: #88b300
}
[data-account-edit-state=saved] .account-edit-status__content--saved {
opacity: 1
}
.account-edit-status__content--saving {
position: absolute
}
@media (min-width: 900px) {
.account-edit-status--left .account-edit-status__content--saving {
right:0
}
}
[data-account-edit-state=saving] .account-edit-status__content--saving {
opacity: 1
}
.account-verification-message {
text-align: center
}
.account-verification-message__icon {
color: #88b300;
font-size: 60px
}
.account-verification-message__text {
font-size: 12px
}
.account-verification-message__title {
margin: 10px 0
}
.address {
margin-bottom: 20px;
overflow-wrap: break-word
}
.admin-contest__meta-row {
color: hsl(var(--hsl-f1));
margin-bottom: 5px
}
.admin-contest__table {
word-wrap: break-word;
table-layout: fixed
}
.admin-contest__table-column--username {
width: 150px
}
.admin-contest__table-column--filesize {
width: 70px
}
.admin-contest__table-column--button {
width: 50px
}
.admin-contest-entry__deleted {
opacity: .25
}
.admin-contest-entry__thumbnail {
max-height: 400px
}
.admin-contest-entry__user-column {
padding-left: 10px;
width: 250px
}
.admin-contest-entry__avatar {
display: inline-block;
margin-right: 5px;
width: 32px
}
.admin-contest-entry__preview {
padding: 20px
}
.admin-contest-entry__user-link {
align-items: center;
display: flex
}
.admin-contest-entry__username {
margin-bottom: 10px
}
.admin-contest-entry__column.admin-contest-entry__column {
vertical-align: middle
}
.admin-contest-entry__column--button {
text-align: center
}
.admin-menu {
bottom: 0;
color: #fff;
left: 0;
opacity: 0;
padding: 20px 20px 50px 50px;
position: fixed;
z-index: 499
}
.admin-menu:hover {
opacity: 1
}
.admin-menu__button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #333;
border: none;
border-radius: 10000px;
display: flex;
flex-direction: column;
margin: 0;
outline: none;
padding: 10px 0;
width: 50px
}
.admin-menu__button.js-menu--active,.admin-menu__button:hover {
background-color: #29b
}
.admin-menu__button-arrow {
font-size: 12px
}
.admin-menu__button-icon {
font-size: 24px;
margin-top: 10px
}
.admin-menu__menu {
bottom: 100%;
left: 0;
margin-bottom: -20px;
margin-left: 50px;
padding-bottom: 10px;
position: absolute
}
.admin-menu-item {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #fff;
display: block;
margin: 10px 0 0;
outline: none;
padding: 0
}
.admin-menu-item,.admin-menu-item:active,.admin-menu-item:focus,.admin-menu-item:hover {
text-decoration: none
}
.admin-menu-item:active,.admin-menu-item:focus,.admin-menu-item:hover {
color: #fff
}
.admin-menu-item__content {
align-items: center;
display: flex
}
.admin-menu-item__label {
background-color: #333;
flex: none
}
.admin-menu-item:hover .admin-menu-item__label {
background-color: #29b
}
.admin-menu-item__label--icon {
align-items: center;
border-radius: 50%;
display: inline-flex;
font-size: 24px;
height: 50px;
justify-content: center;
margin-right: 10px;
width: 50px
}
.admin-menu-item__label--text {
border-radius: 4px;
font-size: 14px;
padding: 5px 10px
}
.artist__admin-note {
background-color: hsl(var(--hsl-h2));
color: #000;
font-weight: 700;
margin-bottom: 10px;
padding: 20px;
text-align: center
}
@media (min-width: 900px) {
.artist__admin-note {
box-shadow:0 1px 3px rgba(0,0,0,.25)
}
}
.artist__badge-wrapper {
pointer-events: none;
position: absolute;
right: 10px;
top: 10px
}
.artist__box {
align-items: center;
display: flex;
flex-direction: column;
margin: 10px;
width: 200px
}
.artist__box--hidden {
opacity: .25
}
.artist__description {
background-color: #00000014;
font-size: 14px;
padding: 20px 10px
}
@media (min-width: 900px) {
.artist__description {
margin-bottom:10px;
padding-left: 50px;
padding-right: 50px
}
}
.artist__description h2,.artist__description h3,.artist__description h4,.artist__description h5,.artist__description h6,.artist__description>h1 {
color: #fff
}
@media (min-width: 900px) {
.artist__description--index {
margin-bottom:0
}
}
.artist__index {
background-color: #00000014;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
overflow: hidden;
padding: 10px
}
.artist__label-overlay {
background-image: var(--artist-label-overlay);
background-size: cover;
border-radius: 4px 0 3px 0;
bottom: 0;
height: 64px;
position: absolute;
right: 0;
width: 64px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.artist__label-overlay {
background-image:var(--artist-label-overlay-2x)
}
}
.artist__links-area {
margin: 0 auto 10px;
padding: 10px;
width: 270px
}
@media (min-width: 900px) {
.artist__links-area {
background:hsl(var(--hsl-b5));
box-shadow: 0 1px 3px rgba(0,0,0,.25)
}
}
.artist__links-area--albums {
align-items: center;
display: flex;
flex-direction: column;
overflow: hidden
}
@media (max-width: 899px) {
.artist__links-area--albums {
display:none
}
}
.artist__name {
display: block;
font-size: 16px;
font-weight: 700;
margin-top: 5px;
white-space: nowrap
}
.artist__name:hover {
color: #fff
}
.artist__portrait {
background-image: var(--artist-portrait,url(/assets/images/artist-noavatar.29940f4f.jpg));
background-position: 50%;
background-size: cover;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: block;
height: 250px;
margin: 10px auto;
position: relative;
width: 250px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.artist__portrait {
background-image:var(--artist-portrait-2x,url(/assets/images/[email protected]))
}
}
@media (min-width: 900px) {
.artist__portrait {
margin-top:-113px
}
}
.artist__portrait--index {
height: 200px;
margin: 0;
width: 200px
}
@media (min-width: 900px) {
.artist__portrait--index {
margin:0;
border-radius: 20px;
}
}
.artist__portrait--new {
box-shadow: 25px -10px 50px hsla(var(--hsl-orange-1),.2)
}
.artist__portrait-wrapper {
height: 200px;
position: relative;
width: 200px
}
.artist__track-count {
color: #abaaaa;
font-size: 12px;
text-align: center
}
.artist__video {
aspect-ratio: 16/9;
border-radius: 6px;
margin-top: 20px;
overflow: hidden;
width: 100%
}
.artist__white-link {
color: #fff;
text-decoration: none
}
.artist__white-link:active,.artist__white-link:focus,.artist__white-link:hover {
color: #fff;
text-decoration: none
}
.artist-album {
align-items: center;
background-color: hsl(var(--hsl-b5));
box-shadow: 0 1px 3px rgba(0,0,0,.25);
overflow: hidden;
padding: 20px
}
.artist-album__badge {
margin-left: auto;
position: relative
}
.artist-album__cover {
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
height: 64px;
position: relative;
width: 64px
}
.artist-album__header {
align-items: center;
display: flex;
margin-bottom: 20px;
position: relative
}
.artist-album__header-overlay {
background-position: 50%;
background-size: cover;
filter: blur(20px);
-webkit-filter: blur(20px);
height: 100%;
opacity: .5;
position: absolute;
top: 0;
width: 100%
}
.artist-album__header-overlay--new:after {
background: linear-gradient(to left,hsl(var(--hsl-orange-1)) 0,transparent 30%);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.artist-album__title {
font-size: 2em;
padding: 10px;
position: relative
}
.artist-album__title,.artist-link-button {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.artist-link-button {
align-items: center;
background: hsl(var(--hsl-b4));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
font-size: 16px;
height: 40px;
margin-bottom: 5px;
padding: 6px 10px;
transition: .1s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.artist-link-button .artist-link-button__lightbar {
background: #fff
}
.artist-link-button .artist-link-button__chevron {
color: #fff
}
.artist-link-button:hover .artist-link-button__lightbar {
background: #fff;
box-shadow: 0 0 5px #fff
}
.artist-link-button:hover .artist-link-button__chevron {
color: #fff;
text-shadow: 0 0 10px #fff
}
.artist-link-button:focus,.artist-link-button:hover {
color: #fff;
text-decoration: none
}
.artist-link-button:hover {
background: hsl(var(--hsl-b6))
}
.artist-link-button:hover .artist-link-button__chevron {
right: -5px
}
.artist-link-button__lightbar {
border-radius: 7px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
height: 100%;
margin-right: 15px;
transition: .1s ease-out;
width: 7px
}
.artist-link-button__text {
flex-basis: 100%;
font-weight: 600;
padding-left: 20px;
text-align: left
}
.artist-link-button__chevron {
font-size: 14px;
right: 0;
transition: .1s ease-out
}
.artist-link-button--twitter .artist-link-button__lightbar {
background: #1d9bf0
}
.artist-link-button--twitter .artist-link-button__chevron {
color: #1d9bf0
}
.artist-link-button--twitter:hover .artist-link-button__lightbar {
background: #4db0f3;
box-shadow: 0 0 5px #65bbf5
}
.artist-link-button--twitter:hover .artist-link-button__chevron {
color: #4db0f3;
text-shadow: 0 0 10px #65bbf5
}
.artist-link-button--facebook .artist-link-button__lightbar {
background: #3b5998
}
.artist-link-button--facebook .artist-link-button__chevron {
color: #3b5998
}
.artist-link-button--facebook:hover .artist-link-button__lightbar {
background: #4c70ba;
box-shadow: 0 0 5px #5f7ec1
}
.artist-link-button--facebook:hover .artist-link-button__chevron {
color: #4c70ba;
text-shadow: 0 0 10px #5f7ec1
}
.artist-link-button--soundcloud .artist-link-button__lightbar {
background: #f50
}
.artist-link-button--soundcloud .artist-link-button__chevron {
color: #f50
}
.artist-link-button--soundcloud:hover .artist-link-button__lightbar {
background: #f73;
box-shadow: 0 0 5px #ff884d
}
.artist-link-button--soundcloud:hover .artist-link-button__chevron {
color: #f73;
text-shadow: 0 0 10px #ff884d
}
.artist-link-button--bandcamp .artist-link-button__lightbar {
background: #61929c
}
.artist-link-button--bandcamp .artist-link-button__chevron {
color: #61929c
}
.artist-link-button--bandcamp:hover .artist-link-button__lightbar {
background: #80a8b0;
box-shadow: 0 0 5px #90b3ba
}
.artist-link-button--bandcamp:hover .artist-link-button__chevron {
color: #80a8b0;
text-shadow: 0 0 10px #90b3ba
}
.artist-link-button--osu {
background-color: #b17
}
.artist-link-button--osu .artist-link-button__lightbar {
background: #000
}
.artist-link-button--osu .artist-link-button__chevron {
color: #000
}
.artist-link-button--osu:hover {
background: #d21386
}
.artist-link-button--osu:hover .artist-link-button__lightbar {
background: #fff;
box-shadow: 0 0 5px #fff
}
.artist-link-button--osu:hover .artist-link-button__chevron {
color: #fff;
text-shadow: 0 0 10px #fff
}
.artist-link-button--patreon .artist-link-button__lightbar {
background: #e6461a
}
.artist-link-button--patreon .artist-link-button__chevron {
color: #e6461a
}
.artist-link-button--patreon:hover .artist-link-button__lightbar {
background: #eb6b48;
box-shadow: 0 0 5px #ee7e5f
}
.artist-link-button--patreon:hover .artist-link-button__chevron {
color: #eb6b48;
text-shadow: 0 0 10px #ee7e5f
}
.artist-link-button--spotify .artist-link-button__lightbar {
background: #1db954
}
.artist-link-button--spotify .artist-link-button__chevron {
color: #1db954
}
.artist-link-button--spotify:hover .artist-link-button__lightbar {
background: #2bde6a;
box-shadow: 0 0 5px #41e17a
}
.artist-link-button--spotify:hover .artist-link-button__chevron {
color: #2bde6a;
text-shadow: 0 0 10px #41e17a
}
.artist-link-button--youtube .artist-link-button__lightbar {
background: red
}
.artist-link-button--youtube .artist-link-button__chevron {
color: red
}
.artist-link-button--youtube:hover .artist-link-button__lightbar {
background: #f33;
box-shadow: 0 0 5px #ff4d4d
}
.artist-link-button--youtube:hover .artist-link-button__chevron {
color: #f33;
text-shadow: 0 0 10px #ff4d4d
}
.artist-sidebar-album {
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
margin: 20px;
text-align: center
}
.artist-sidebar-album:active,.artist-sidebar-album:hover {
color: #fff;
text-decoration: none
}
.artist-sidebar-album:hover .artist-sidebar-album__glow {
opacity: .4
}
.artist-sidebar-album__badge-wrapper {
position: absolute;
right: 10px;
top: 10px
}
.artist-sidebar-album__cover {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
height: 128px;
width: 128px
}
.artist-sidebar-album--new .artist-sidebar-album__cover {
box-shadow: 15px -10px 50px hsla(var(--hsl-orange-1),.2)
}
.artist-sidebar-album__cover-wrapper {
height: 128px;
position: relative;
width: 128px
}
.artist-sidebar-album__glow {
background-position: 50%;
background-size: cover;
filter: blur(20px);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: 1s ease-in-out;
width: 100%
}
.artist-sidebar-album__title {
color: #fff;
font-size: 14px;
margin-top: 5px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.artist-track {
--bg-hover: #3838382b;
--cover-play-opacity: 0;
--cover-size: 35px;
align-items: center;
background: #1e1e1e8c;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: grid;
font-size: 12px;
gap: 5px;
grid-template-columns: auto 1fr auto auto auto auto;
padding: 5px;
width: 100%
}
@media (min-width: 900px) {
.artist-track {
--cover-size:40px;
gap: 0
}
}
.artist-track:hover {
background-color: var(--bg-hover)
}
.artist-track:hover,.artist-track[data-audio-state=loading],.artist-track[data-audio-state=playing] {
--cover-play-opacity: 1
}
@media (min-width: 900px) {
.artist-track--large {
--cover-size:60px
}
}
.artist-track--original {
background-image: linear-gradient(to right, #ffffff29 ,#ffffff08 50%);
}
.artist-track__button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #fff;
font-size: 18px;
margin: 0;
outline: none;
padding: 0;
text-decoration: none
}
.artist-track__button:active,.artist-track__button:focus,.artist-track__button:hover {
color: #fff;
color: hsl(var(--hsl-orange-1));
text-decoration: none
}
.artist-track__button--play {
background: hsla(var(--hsl-b6),.8);
border-radius: inherit;
font-size: 14px;
height: 100%;
left: 0;
opacity: var(--cover-play-opacity);
position: absolute;
top: 0;
width: 100%
}
@media (min-width: 900px) {
.artist-track__col {
margin:0 10px
}
}
.artist-track__col--badges {
align-items: flex-end;
display: flex;
flex-direction: column;
gap: 2px
}
@media (min-width: 900px) {
.artist-track__col--badges {
margin:0
}
.artist-track__col--buttons {
margin: 0 5px
}
}
.artist-track__col--details {
align-items: center;
display: grid;
grid-template: "length" auto "genre" auto "bpm" auto;
width: 60px
}
@media (min-width: 900px) {
.artist-track__col--details {
grid-template:"genre genre" auto "length bpm" auto/35px 1fr;
width: 100px
}
}
.artist-track__col--names {
min-width: 0
}
@media (min-width: 900px) {
.artist-track__col--names {
margin-left:20px
}
}
.artist-track__col--preview {
background-position: 50%;
background-size: cover;
border-radius: 4px;
height: var(--cover-size);
margin: 0;
position: relative;
width: var(--cover-size)
}
.artist-track__detail--bpm {
grid-area: bpm
}
.artist-track__detail--genre {
grid-area: genre
}
.artist-track__detail--length {
color: hsl(var(--hsl-c1));
grid-area: length
}
.artist-track__info {
color: hsl(var(--hsl-c2))
}
.artist-track__title {
font-size: 16px
}
.artist-track__version {
color: hsl(var(--hsl-c2));
font-size: 12px
}
.artist-track-search-form__advanced {
display: grid;
gap: 10px;
grid-template-columns: repeat(2,1fr)
}
@media (min-width: 900px) {
.artist-track-search-form__advanced {
grid-template-columns:repeat(4,1fr)
}
}
.artist-track-search-form__content {
--vertical-gutter: 20px;
padding-bottom: var(--vertical-gutter);
padding-left: 10px;
padding-right: 10px;
padding-top: var(--vertical-gutter);
}
@media (min-width: 900px) {
.artist-track-search-form__content {
padding-left:50px;
padding-right: 50px
}
}
.artist-track-search-form__content--buttons {
--vertical-gutter: 10px;
display: flex;
gap: 5px;
justify-content: center
}
.artist-track-search-form-switches {
display: grid;
gap: 5px;
grid-template-columns: repeat(auto-fill,minmax(125px,1fr))
}
.artist-track-search-form-switches__link {
background: #1e1e1e8c;
border-radius: 10000px;
color: hsl(var(--hsl-c1));
font-size: 13px;
font-weight: 700;
padding: 2px 15px 3px;
text-align: center;
text-decoration: none;
transition: none;
white-space: nowrap;
}
.artist-track-search-form-switches__link:active,.artist-track-search-form-switches__link:focus,.artist-track-search-form-switches__link:hover {
text-decoration: none
}
.artist-track-search-form-switches__link:active,.artist-track-search-form-switches__link:focus {
color: hsl(var(--hsl-c1))
}
.artist-track-search-form-switches__link:hover {
background: #3838382b;
color: #555454;
}
.artist-track-search-form-switches__link--active {
background: #232323;
}
.artist-track-search-sort {
padding: 0 0 10px
}
.artist-track-search-sort__desktop {
display: none
}
@media (min-width: 900px) {
.artist-track-search-sort__desktop {
display:block
}
}
.artist-track-search-sort__mobile {
display: block
}
@media (min-width: 900px) {
.artist-track-search-sort__mobile {
display:none
}
}
.audio-player {
--current-time: "0:00";
--duration: "0:00";
--progress: 0;
align-items: center;
background-color: rgba(17, 17, 17, 0.459);
display: flex;
font-family: Torus,Inter,Helvetica Neue,Tahoma,Arial,Hiragino Kaku Gothic ProN,Meiryo,Microsoft YaHei,Apple SD Gothic Neo,sans-serif;
height: 40px;
max-width: 520px;
padding: 5px 10px;
pointer-events: auto;
position: relative;
text-align: left;
width: 100%;
border: solid;
border-radius: 15px;
border-color: rgb(0 0 0 / 0%);
}
.audio-player--main {
bottom: -40px;
margin-left: auto;
transition: bottom .12s
}
.audio-player--main[data-audio-visible="1"] {
bottom: 0
}
.audio-player__autoplay-button {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
margin: 0;
opacity: .5;
outline: none;
padding: 0;
text-align: center;
text-rendering: auto;
width: 1.25em
}
.audio-player__autoplay-button.fa-pull-left {
margin-right: .3em
}
.audio-player__autoplay-button.fa-pull-right {
margin-left: .3em
}
.audio-player__autoplay-button:hover {
color: hsl(var(--hsl-l1))
}
.audio-player__autoplay-button:before {
content: "\f01e"
}
.audio-player[data-audio-autoplay="1"] .audio-player__autoplay-button {
opacity: 1
}
.audio-player__button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: white;
display: inline-flex;
flex: none;
font-size: 14px;
justify-content: center;
margin: 0;
outline: none;
padding: 5px
}
.audio-player__button:hover {
color: #c5c4c4
}
.audio-player__button--prev {
opacity: .5;
pointer-events: none
}
.audio-player[data-audio-has-prev="1"] .audio-player__button--prev {
opacity: 1;
pointer-events: auto
}
.audio-player__button--play {
font-size: 16px
}
.audio-player__button--next {
opacity: .5;
pointer-events: none
}
.audio-player[data-audio-has-next="1"] .audio-player__button--next {
opacity: 1;
pointer-events: auto
}
.audio-player__current-time:before {
content: var(--current-time)
}
.audio-player__bar {
--current-head-opacity: 0;
--bar: 0;
background-color: hsl(var(--hsl-b6));
border-radius: 5px;
cursor: pointer;
flex: 1;
height: 2px;
margin: 0 5px 0 10px;
position: relative;
transition: height .1s,opacity .1s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.audio-player__bar:before {
bottom: -10px;
content: "";
display: block;
left: -5px;
position: absolute;
right: -5px;
top: -10px
}
.audio-player__bar:hover,.audio-player__bar[data-audio-dragging="1"] {
--current-head-opacity: 1;
height: 6px
}
.audio-player__bar--progress {
--bar: var(--progress)
}
.audio-player__bar--volume {
--bar: var(--volume);
flex: none;
width: 50px
}
.audio-player[data-audio-volume-bar-visible="0"] .audio-player__bar--volume {
display: none
}
.audio-player__bar-current {
background-color: white;
border-radius: inherit;
height: 100%;
pointer-events: none;
position: relative;
width: calc(var(--bar)*100%)
}
.audio-player__bar-current:after {
background-color: #d4d4d4;
border-radius: 50%;
content: "";
display: block;
height: 14px;
opacity: var(--current-head-opacity);
position: absolute;
right: -7px;
top: calc(50% - 7px);
transition: inherit;
width: 14px
}
.audio-player__timestamps {
display: flex;
font-size: 12px;
font-variant-numeric: tabular-nums
}
.audio-player__timestamp {
margin: 0 5px;
min-width: 33px;
text-align: right
}
.audio-player__timestamp:before {
content: var(--timestamp,"")
}
.audio-player[data-audio-time-format=minute] .audio-player__timestamp {
min-width: 42px
}
.audio-player[data-audio-time-format=hour_minimal] .audio-player__timestamp {
min-width: 57px
}
.audio-player[data-audio-time-format=hour] .audio-player__timestamp {
min-width: 66px
}
.audio-player__timestamp--current {
display: none
}
.audio-player[data-audio-has-duration="1"] .audio-player__timestamp--current {
--timestamp: var(--current-time);
display: block
}
.audio-player__timestamp--total {
--timestamp: "--:--";
color: white;
}
.audio-player[data-audio-has-duration="1"] .audio-player__timestamp--total {
--timestamp: var(--duration)
}
.audio-player__timestamp-separator {
display: none
}
.audio-player[data-audio-has-duration="1"] .audio-player__timestamp-separator {
display: block
}
.audio-player__volume-button {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
--icon: "\f028";
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
margin: 0;
outline: none;
padding: 0;
text-align: center;
text-rendering: auto;
width: 1.25em
}
.audio-player__volume-button.fa-pull-left {
margin-right: .3em
}
.audio-player__volume-button.fa-pull-right {
margin-left: .3em
}
.audio-player__volume-button:hover {
color: hsl(var(--hsl-l1))
}
.audio-player__volume-button:before {
content: var(--icon)
}
.audio-player[data-audio-volume=muted] .audio-player__volume-button {
--icon: "\f6a9"
}
.audio-player[data-audio-volume=silent] .audio-player__volume-button {
--icon: "\f026"
}
.audio-player[data-audio-volume=quiet] .audio-player__volume-button {
--icon: "\f027"
}
.audio-player__volume-control {
align-items: center;
display: flex
}
.audio-player-floating {
bottom: 0;
pointer-events: none;
position: fixed;
right: 0;
width: 100%;
z-index: 501
}
.avatar {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #333;
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
border: none;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: block;
flex: none;
height: 70px;
margin: 0;
outline: none;
padding: 0;
width: 70px
}
.avatar--beatmapset {
border-radius: 4px;
height: 50px;
margin-right: 5px;
width: 50px
}
.avatar--centered {
margin-left: auto;
margin-right: auto
}
.avatar--forum {
border-radius: 20px;
box-shadow: none;
height: 0;
padding-bottom: 100%;
width: 100%
}
.avatar--forum-reply {
align-self: flex-end;
border: 3px solid #fff;
height: 60px;
margin-right: 10px;
width: 60px
}
.avatar--forum-small {
box-shadow: none;
flex: none;
height: 50px;
width: 50px
}
.avatar--full {
border-radius: 0
}
.avatar--full,.avatar--full-circle {
box-shadow: none;
height: 0;
padding-bottom: 100%;
width: 100%
}
.avatar--full-circle {
border-radius: 50%
}
.avatar--full-rounded {
box-shadow: none;
height: 0;
padding-bottom: 100%;
width: 100%
}
.avatar--guest {
background-image: url(/assets/images/avatar-guest.8a2df920.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.avatar--guest {
background-image:url(/assets/images/[email protected])
}
}
.avatar--join-channel {
align-items: center;
border-radius: 50%;
box-shadow: none;
display: inline-flex;
height: 100%;
justify-content: center;
padding: 0;
width: 100%
}
.avatar--nav2 {
border-radius: 50%;
box-shadow: none;
height: 60px;
overflow: hidden;
position: relative;
transition: width var(--header-pinned-animation-duration),height var(--header-pinned-animation-duration);
width: 60px
}
.js-header-is-pinned .avatar--nav2 {
height: 40px;
width: 40px
}
.avatar--navbar-mobile {
height: 30px;
margin-right: 10px;
width: 30px
}
.avatar--profile {
height: 120px;
width: 120px
}
.avatar--restricted:before {
background-color: rgba(0,0,0,.6);
background-image: url(/assets/images/exclamation-icon.0db8a908.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: 60%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.badge-achievement {
text-align: center;
vertical-align: middle
}
.badge-achievement--dynamic-height {
flex: none;
height: 1em;
width: .93220339em
}
.badge-achievement--listing {
margin: auto;
width: 70px
}
.badge-achievement--recent {
margin-bottom: 10px;
min-width: 65px;
width: 25%
}
.badge-achievement--recent-activity {
height: 100%
}
.badge-achievement__image {
max-width: 100%
}
.badge-achievement__image--big {
height: 118px;
width: 110px
}
.badge-achievement--dynamic-height .badge-achievement__image {
vertical-align: baseline
}
.badge-achievement--recent .badge-achievement__image {
max-width: 55px
}
.badge-achievement--recent-activity .badge-achievement__image {
height: 100%
}
.badge-achievement--locked .badge-achievement__image {
filter: saturate(0);
opacity: .25
}
.bar {
--fill: 0%;
background-color: #fc2;
display: block;
height: 3px;
position: relative;
width: 100%
}
.bar--beatmap-rating {
background-color: #88b300;
height: 5px
}
.bar--beatmap-stats,.bar--beatmap-success-rate {
background-color: hsl(var(--hsl-b6));
height: 5px
}
.bar--beatmap-success-rate {
margin-bottom: calc(1em + 2px);
margin-top: 5px
}
.bar--double {
height: 6px
}
.bar--forum-poll {
background-color: hsl(var(--hsl-b3));
border-radius: 10000px;
height: 6px
}
.bar--locale {
background-color: #86e
}
.bar--user-profile {
background-color: #272727;
border-radius: 10000px;
height: 6px
}
.bar__fill {
height: 100%;
width: var(--fill)
}
.bar--beatmap-rating .bar__fill {
background-color: #ea0
}
.bar--beatmap-stats .bar__fill {
background-color: #fff;
transition: width .25s cubic-bezier(.645,.045,.355,1)
}
.bar--beatmap-stats-stars .bar__fill {
background-color: #fc2
}
.bar--beatmap-success-rate .bar__fill {
background-color: #88b300;
transition: width .25s cubic-bezier(.645,.045,.355,1)
}
.bar--forum-poll .bar__fill {
background-color: hsl(var(--hsl-h1));
border-radius: 10000px;
opacity: .5
}
.bar--forum-poll-voted .bar__fill {
opacity: 1
}
.bar--user-profile .bar__fill {
background-color: white;
border-radius: 10000px
}
.bar__text {
margin-top: 2px;
position: absolute;
top: 100%
}
.bar--beatmap-success-rate .bar__text {
margin-left: var(--fill);
transform: translateX(-50%)
}
.bar--user-profile .bar__text {
right: 0
}
.bbcode-editor {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
min-width: 0;
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025)
}
.bbcode-editor,.bbcode-editor * {
scrollbar-width: thin
}
.bbcode-editor ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.bbcode-editor ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.bbcode-editor ::-webkit-scrollbar:horizontal {
height: 10px
}
.bbcode-editor ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.bbcode-editor ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
.bbcode-editor--create {
background-color: hsl(var(--hsl-b2));
padding: 15px 10px
}
@media (min-width: 900px) {
.bbcode-editor--create {
padding-left:50px;
padding-right: 50px
}
}
.bbcode-editor--beatmapset-description-editor {
background-color: hsl(var(--hsl-b2));
border-radius: 6px;
padding: 15px 10px
}
@media (min-width: 900px) {
.bbcode-editor--beatmapset-description-editor {
padding-left:50px;
padding-right: 50px
}
}
.bbcode-editor--profile-page {
padding-right: var(--inner-gutter)
}
.bbcode-editor__body {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
flex: 1 0 auto;
font-family: Menlo,Monaco,Consolas,Courier New,monospace;
font-size: 16px;
margin: 0;
min-height: 150px;
outline: none;
padding: 0;
resize: vertical;
width: 100%;
resize: none
}
.bbcode-editor__body:invalid {
box-shadow: none
}
@media (min-width: 900px) {
.bbcode-editor__body {
font-size:14px;
min-height: 300px
}
}
.bbcode-editor[data-state=preview] .bbcode-editor__body {
display: none
}
.bbcode-editor[data-state=loading-preview] .bbcode-editor__body {
opacity: .5;
pointer-events: none
}
.bbcode-editor--beatmapset-description-editor .bbcode-editor__body {
max-height: calc(80vh - 80px - 3em)
}
.bbcode-editor__button {
margin: 5px
}
.bbcode-editor__button--deactivate {
display: none
}
.js-forum-topic-reply[data-state=stick] .bbcode-editor__button--deactivate {
display: block
}
.bbcode-editor[data-state=loading-preview] .bbcode-editor__button--hide-on-preview,.bbcode-editor[data-state=preview] .bbcode-editor__button--hide-on-preview,.bbcode-editor[data-state=write] .bbcode-editor__button--hide-on-write {
display: none
}
.bbcode-editor__buttons {
display: flex;
margin: 5px
}
.bbcode-editor__buttons--actions {
flex: 1;
justify-content: flex-end;
margin: 0
}
.bbcode-editor[data-state=loading-preview] .bbcode-editor__buttons--toolbar,.bbcode-editor[data-state=preview] .bbcode-editor__buttons--toolbar {
display: none
}
.bbcode-editor__buttons-bar {
align-items: center;
display: flex;
flex-direction: column;
margin: auto -5px -5px
}
@media (min-width: 900px) {
.bbcode-editor__buttons-bar {
flex-direction:row
}
}
.bbcode-editor__content {
background-color: rgb(34 34 34 / 46%);
border-radius: 6px;
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
padding: 10px
}
.bbcode-editor--create .bbcode-editor__content {
padding: 20px 20px 10px
}
.bbcode-editor--profile-page .bbcode-editor__content {
background-color: transparent;
padding: 0 0 var(--padding-vertical)
}
.bbcode-editor__header {
align-items: center;
display: flex;
margin-bottom: 10px;
margin-left: 10px
}
.bbcode-editor__input-title {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
font-size: 24px;
margin: 0 0 10px;
outline: none;
padding: 0
}
.bbcode-editor__preview {
display: none
}
.bbcode-editor[data-state=preview] .bbcode-editor__preview {
display: block;
margin-bottom: 5px;
min-height: 0;
overflow-y: auto
}
.bbcode-editor__title {
color: hsl(var(--hsl-c1));
flex: 1;
font-size: 14px;
font-style: normal;
margin: 0;
padding: 0
}
.bbcode-size-select {
align-items: center;
background-color: #292929a1;
border-radius: 10000px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
display: inline-flex;
font-size: 12px;
font-weight: 400;
height: 30px;
justify-content: center;
margin: 2px;
padding: 5px 10px;
position: relative;
text-shadow: none;
text-transform: none
}
.bbcode-size-select__label {
margin-right: 10px
}
.bbcode-size-select__select {
cursor: pointer;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.bbcode-spoilerbox {
--link-icon: "/f105"
}
.bbcode-spoilerbox.js-spoilerbox--open {
--link-icon: "/f107"
}
.bbcode-spoilerbox__body {
display: none;
margin-top: 10px;
padding-left: 20px
}
.bbcode-spoilerbox__link {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: white;
display: flex;
flex-wrap: wrap;
font-weight: 800;
margin: 0;
max-width: 100%;
outline: none;
overflow-wrap: anywhere;
padding: 0;
text-align: left;
width: -moz-max-content;
width: max-content
}
.bbcode-spoilerbox__link:active,.bbcode-spoilerbox__link:focus,.bbcode-spoilerbox__link:hover {
color: #d9d9d9;
}
.bbcode-spoilerbox__link:hover {
text-decoration: underline
}
.bbcode-spoilerbox__link-icon {
display: block;
flex: none;
width: 20px
}
.bbcode-spoilerbox__link-icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: hsl(var(--hsl-c1));
content: var(--link-icon);
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
text-align: left;
text-rendering: auto
}
.bbcode-spoilerbox__link-icon:before.fa-pull-left {
margin-right: .3em
}
.bbcode-spoilerbox__link-icon:before.fa-pull-right {
margin-left: .3em
}
.beatmap-basic-stats {
color: #fd5;
display: flex;
font-size: 12px;
font-weight: 600;
gap: 10px;
justify-content: space-between
}
.beatmap-basic-stats__entry {
align-items: center;
display: flex;
flex: none
}
.beatmap-basic-stats__entry-icon {
background-size: contain;
height: 24px;
margin-right: 3px;
width: 24px
}
.beatmap-discussion {
--base-bg: hsl(var(--hsl-b4));
display: flex;
transform: translateZ(0)
}
.beatmap-discussion--deleted {
opacity: .5
}
.beatmap-discussion--modding-profile {
--base-bg: hsl(var(--hsl-b3))
}
.beatmap-discussion--preview {
flex-grow: 1;
overflow: hidden
}
.beatmap-discussion__actions {
align-items: center;
display: flex;
gap: 10px
}
.beatmap-discussion__action {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: flex;
margin: 0;
outline: none;
padding: 0
}
.beatmap-discussion__action--with-line {
position: relative
}
.beatmap-discussion__action--with-line:before {
background-image: linear-gradient(to bottom,hsla(var(--hsl-b1),0),hsl(var(--hsl-b1)) 50%,hsla(var(--hsl-b1),0));
content: "";
height: 100%;
left: 0;
position: absolute;
right: 100%;
top: 0;
width: 100%;
width: 1px
}
.beatmap-discussion__discussion {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex: 1;
flex-direction: column;
margin: 5px 0;
min-width: 0;
overflow: hidden;
position: relative
}
@media (max-width: 899px) {
.beatmap-discussion__discussion:before {
background-color:var(--discussion-colour);
content: "";
height: 100%;
overflow-anchor: none;
position: absolute;
right: 0;
top: 0;
width: 3px
}
}
.beatmap-discussion--highlighted .beatmap-discussion__discussion {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.beatmap-discussion--highlighted .beatmap-discussion__discussion:after {
animation: flash .5s;
background: hsla(0,0%,100%,.15);
content: "";
height: 100%;
left: 0;
opacity: .5;
pointer-events: none;
position: absolute;
top: 0;
width: 100%
}
@keyframes flash {
0% {
opacity: 1
}
to {
opacity: .5
}
}
@media (min-width: 900px) {
.beatmap-discussion__discussion {
border-radius: 15px;
}
}
.beatmap-discussion__expanded {
display: flex;
flex-direction: column
}
.beatmap-discussion__line {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 5px
}
@media (min-width: 900px) {
.beatmap-discussion__line {
border-radius:4px 0 0 4px
}
}
.beatmap-discussion__line--resolved {
background-color: hsl(var(--hsl-lime-3))
}
.beatmap-discussion__link-to-parent {
color: hsl(var(--hsl-f1));
margin: 10px 15px 10px 10px;
text-decoration: none
}
.beatmap-discussion__link-to-parent:active,.beatmap-discussion__link-to-parent:focus,.beatmap-discussion__link-to-parent:hover {
color: hsl(var(--hsl-c1));
text-decoration: none
}
.beatmap-discussion__replies {
box-shadow: inset 0 2px 3px -1px rgba(0,0,0,.25);
display: flex;
flex-direction: column
}
.beatmap-discussion__resolved {
color: #680;
font-size: 12px;
font-weight: 700;
margin: 5px 0;
text-align: center;
text-transform: lowercase
}
.beatmap-discussion__timestamp {
flex: none;
overflow-anchor: none;
width: 50px
}
.beatmap-discussion--preview .beatmap-discussion__timestamp,.beatmap-discussion--timeline .beatmap-discussion__timestamp {
width: 110px
}
.beatmap-discussion__top {
background-color: rgba(93, 93, 101, 0.09);
display: grid;
gap: 10px;
grid-template-areas:
"user actions"
"message message";
grid-template-columns: 1fr auto;
}
@media (min-width: 900px) {
.beatmap-discussion--horizontal-desktop .beatmap-discussion__top {
grid-template-areas:"user message actions";
grid-template-columns: auto 1fr auto
}
}
.beatmap-discussion--unread .beatmap-discussion__top:before {
background-color: #29b;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
width: 5px
}
.beatmap-discussion--review .beatmap-discussion__top {
border-top: 2px solid var(--group-colour,transparent)
}
.beatmap-discussion--single .beatmap-discussion__top {
display: block;
padding: 10px 15px
}
.beatmap-discussion__top-actions {
align-items: center;
display: flex;
grid-area: actions;
height: 40px
}
.beatmap-discussion__top-message {
grid-area: message;
margin: 0 15px 10px
}
@media (min-width: 900px) {
.beatmap-discussion--horizontal-desktop .beatmap-discussion__top-message {
margin:10px 0
}
}
.beatmap-discussion__top-user {
margin-left: 15px;
margin-top: 10px
}
@media (min-width: 900px) {
.beatmap-discussion--horizontal-desktop .beatmap-discussion__top-user {
border-right:2px solid var(--group-colour,hsl(var(--hsl-b5)));
margin-bottom: 10px
}
}
.beatmap-discussion-editor {
background-color: hsl(var(--hsl-b4));
display: flex;
flex-direction: column;
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025);
scrollbar-width: thin
}
.beatmap-discussion-editor * {
scrollbar-width: thin
}
.beatmap-discussion-editor ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.beatmap-discussion-editor ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.beatmap-discussion-editor ::-webkit-scrollbar:horizontal {
height: 10px
}
.beatmap-discussion-editor ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.beatmap-discussion-editor ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
.beatmap-discussion-editor--edit-mode {
margin-bottom: 10px
}
.beatmap-discussion-editor__block {
position: relative
}
.beatmap-discussion-editor--readonly .beatmap-discussion-editor__block:hover .beatmap-discussion-editor__hover-menu {
display: none
}
.beatmap-discussion-editor__block:hover .beatmap-discussion-editor__hover-menu {
display: block
}
.beatmap-discussion-editor__block-count {
margin-right: 10px
}
.beatmap-discussion-editor__hover-menu {
bottom: -10px;
display: none;
margin-left: -15px;
position: absolute;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 512
}
.beatmap-discussion-editor__button-bar {
align-items: center;
background: hsl(var(--hsl-b6));
border-radius: 0 0 4px 4px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15px
}
.beatmap-discussion-editor__content {
background: hsl(var(--hsl-b5));
border-radius: 4px;
color: #fff;
display: flex;
flex-direction: column;
margin: 0 15px 15px
}
.beatmap-discussion-editor--edit-mode .beatmap-discussion-editor__content {
border: 2px solid #39c;
margin: 0 -15px
}
@media (max-width: 899px) {
.beatmap-discussion-editor__content {
margin:0
}
}
.beatmap-discussion-editor__inner-block-count {
display: flex;
justify-content: flex-end;
margin: -31px 10px 10px;
pointer-events: none
}
.beatmap-discussion-editor__input-area {
-webkit-overflow-scrolling: touch;
font-family: var(--font-content-override,var(--font-content));
line-height: 1.35;
max-height: calc(var(--vh, 1vh)*50);
overflow-y: auto
}
.beatmap-discussion-editor__input-area>div {
padding: 15px
}
.beatmap-discussion-editor--edit-mode .beatmap-discussion-editor__input-area>div {
padding-bottom: 46px
}
.beatmap-discussion-editor--edit-mode .beatmap-discussion-editor__input-area {
max-height: unset
}
.beatmap-discussion-editor--readonly .beatmap-discussion-editor__input-area {
opacity: .5
}
.beatmap-discussion-editor__menu {
color: #fff;
font-size: 16px
}
.beatmap-discussion-editor-insertion-menu {
display: none;
justify-content: center;
pointer-events: none;
position: fixed;
width: 100%;
z-index: 100
}
.beatmap-discussion-editor-insertion-menu:before {
background: hsl(var(--hsl-b3));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
content: "";
height: 3px;
position: absolute;
top: 9px;
width: 100%
}
.beatmap-discussion-editor-insertion-menu__body {
align-items: center;
background: hsl(var(--hsl-b6));
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-f1));
display: flex;
font-size: 12px;
height: 20px;
justify-content: center;
overflow: hidden;
pointer-events: auto;
position: relative;
text-align: center;
transition: .1s ease-in-out;
width: 100px;
will-change: width,height
}
.beatmap-discussion-editor-insertion-menu__body:hover {
height: 30px;
margin-top: -5px;
width: 150px
}
@media (max-width: 899px) {
.beatmap-discussion-editor-insertion-menu__body {
height:30px;
margin-top: -5px;
width: 150px
}
}
.beatmap-discussion-editor-insertion-menu__buttons {
background: hsl(var(--hsl-b6));
opacity: 0;
position: absolute;
transition: opacity .1s ease-in-out;
white-space: nowrap
}
.beatmap-discussion-editor-insertion-menu__body:hover .beatmap-discussion-editor-insertion-menu__buttons {
opacity: 1
}
@media (max-width: 899px) {
.beatmap-discussion-editor-insertion-menu__buttons {
opacity:1
}
}
.beatmap-discussion-editor-insertion-menu__menu-button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-f1));
filter: grayscale(1);
margin: 0;
outline: none;
padding: 5px 10px
}
.beatmap-discussion-editor-insertion-menu__menu-button:hover {
filter: none
}
.beatmap-discussion-editor-insertion-menu__menu-button--paragraph:hover {
color: hsl(var(--hsl-c1))
}
.beatmap-discussion-editor-insertion-menu__menu-button--praise:hover {
color: hsl(var(--hsl-blue-3))
}
.beatmap-discussion-editor-insertion-menu__menu-button--problem:hover {
color: hsl(var(--hsl-red-3))
}
.beatmap-discussion-editor-insertion-menu__menu-button--suggestion:hover {
color: hsl(var(--hsl-orange-3))
}
.beatmap-discussion-editor-toolbar {
background-color: hsl(var(--hsl-b6));
border-radius: 4px;
display: none;
left: -10000px;
position: fixed;
top: -10000px;
z-index: 1
}
.beatmap-discussion-editor-toolbar__button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-f1));
height: 32px;
margin: 0;
outline: none;
padding: 0;
width: 32px
}
.beatmap-discussion-editor-toolbar__button:hover {
color: hsl(var(--hsl-c1))
}
.beatmap-discussion-editor-toolbar__button--active {
color: hsl(var(--hsl-c2))
}
.beatmap-discussion-editor-toolbar__popup-tail {
border-color: hsl(var(--hsl-b6)) transparent transparent transparent;
border-style: solid;
border-width: 5px;
height: 0;
left: calc(50% - 5px);
position: absolute;
width: 0
}
.beatmap-discussion-expand {
color: #c0c0c0;
padding: 0 20px;
transition: transform .4s
}
@media (max-width: 899px) {
.beatmap-discussion-expand {
padding:0 15px
}
}
.beatmap-discussion-expand--expanded {
transform: rotate(180deg)
}
.beatmap-discussion-new {
background-color: #00000014;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex-direction: column;
border-radius: 20px;
}
.beatmap-discussion-new__avatar {
flex: none;
height: 45px;
width: 45px
}
.beatmap-discussion-new__content {
display: flex;
padding: 0 20px 10px;
}
.beatmap-discussion-new__footer {
background-color: #00000014;
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: space-between;
padding: 10px 20px;
border-radius: 20px;
}
@media (max-width: 899px) {
.beatmap-discussion-new__footer {
flex-direction:column
}
}
.beatmap-discussion-new__footer-content {
display: flex;
min-height: 2em;
}
.beatmap-discussion-new__footer-content--right {
flex: 1 0 auto;
flex-wrap: wrap;
gap: 5px;
justify-content: flex-end
}
.beatmap-discussion-new__footer-message {
align-items: center;
background-color: rgba(93, 93, 101, 0.09);
color: #fff;
display: flex;
font-size: 11px;
padding: 5px 10px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.beatmap-discussion-new__footer-message--label {
flex-grow: 0
}
.beatmap-discussion-new__login-required {
padding: 0 20px 20px
}
.beatmap-discussion-new__login-required,.beatmap-discussion-new__message {
color: hsl(var(--hsl-f1));
font-family: var(--font-content-override,var(--font-content));
font-size: 15px;
line-height: 1.35
}
.beatmap-discussion-new__message {
display: flex;
flex: 1;
flex-direction: column;
padding-left: 10px
}
.beatmap-discussion-new__message-area {
-webkit-overflow-scrolling: touch;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #fff;
flex: 1 0 auto;
font-size: 16px;
margin: 0;
max-height: calc(var(--vh, 1vh)*50);
min-height: 3em;
outline: none;
padding: 0;
resize: vertical;
width: 100%
}
@media (max-width: 899px) {
.beatmap-discussion-new__message-area {
max-height:calc(var(--vh, 1vh)*40)
}
}
.beatmap-discussion-new__message-area::-moz-placeholder {
color: hsl(var(--hsl-b1))
}
.beatmap-discussion-new__message-area::placeholder {
color: hsl(var(--hsl-b1))
}
@media (min-width: 900px) {
.beatmap-discussion-new__message-area {
font-size:inherit;
resize: none;
}
}
.beatmap-discussion-new__message-counter {
font-size: 12px;
margin-top: 5px;
text-align: right
}
.beatmap-discussion-new__message-counter--almost-over {
color: #ea0
}
.beatmap-discussion-new__message-counter--over {
color: #ed1221;
font-weight: 700
}
.beatmap-discussion-new__notice {
background-color: hsl(var(--hsl-b5));
color: #fff;
font-size: 12px;
padding: 5px 20px
}
.beatmap-discussion-new__notice-checkbox {
font-weight: 400;
margin: 5px 0 0;
text-transform: none
}
.beatmap-discussion-new__type {
color: #999;
margin: 0 5px
}
.beatmap-discussion-new__type--active {
color: #fff
}
.beatmap-discussion-new__types {
display: flex;
justify-content: center;
margin-bottom: 5px
}
.beatmap-discussion-new-float {
margin-bottom: 10px;
pointer-events: none
}
.beatmap-discussion-new-float--pinned {
position: sticky;
z-index: 1
}
.beatmap-discussion-new-float__content {
pointer-events: auto
}
.beatmap-discussion-new-float__floatable {
transform: translateZ(0);
width: 100%
}
.beatmap-discussion-nominations {
background-color: hsl(0deg 0% 11.61%);
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
border-radius: 20px
}
.beatmap-discussion-nominations__discrete-bar-group {
display: flex;
gap: 5px;
margin: 5px 0;
min-height: 5px
}
.beatmap-discussion-nominations__discrete-bar-group--hybrid {
min-height: 20px
}
.beatmap-discussion-nominations__header {
display: flex;
font-size: 11px;
justify-content: space-between
}
.beatmap-discussion-nominations__item {
margin: var(--item-margin)
}
.beatmap-discussion-nominations__item:empty {
display: none
}
.beatmap-discussion-nominations__items--buttons .beatmap-discussion-nominations__item {
flex: none
}
.beatmap-discussion-nominations__item--nominators {
align-items: flex-end;
display: flex;
flex: 1 0 auto;
justify-content: flex-end
}
.beatmap-discussion-nominations__items {
--item-margin: 10px;
display: flex;
font-size: 12px;
margin: calc(var(--item-margin)*-1)
}
.beatmap-discussion-nominations__items--buttons {
--item-margin: 2px;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10px
}
.beatmap-discussion-nominations__items--messages {
flex: 1 0 auto;
flex-direction: column
}
.beatmap-discussion-nominations__items-grouping {
display: flex;
flex-wrap: wrap;
margin-top: 5px
}
.beatmap-discussion-nominations__title {
font-weight: 600
}
.beatmap-discussion-nominations__problems {
color: hsl(var(--hsl-orange-2))
}
.beatmap-discussion-post {
margin: 10px 0;
transition: background-color .1s ease-in-out
}
.beatmap-discussion-post--deleted {
opacity: .5
}
.beatmap-discussion-post--discussion {
margin: 0;
min-width: 0
}
@media (min-width: 900px) {
.beatmap-discussion-post--discussion {
flex:1
}
}
.beatmap-discussion-post--new-reply {
background-color: hsl(var(--hsl-b5));
border-radius: 0 0 4px 4px;
margin: 0
}
.beatmap-discussion-post--new-reply-placeholder {
background-color: transparent;
display: flex;
justify-content: flex-end;
padding: 10px
}
.beatmap-discussion-post--unread {
position: relative
}
.beatmap-discussion-post--unread:before {
background-color: hsl(var(--hsl-blue-3));
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
width: 5px
}
.beatmap-discussion-post__action {
margin: 0 5px;
text-transform: lowercase
}
.beatmap-discussion-post__action--button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
font-size: 10px;
margin: 0 5px;
outline: none;
padding: 0;
text-decoration: none
}
.beatmap-discussion-post__action--button:active,.beatmap-discussion-post__action--button:focus,.beatmap-discussion-post__action--button:hover {
color: hsl(var(--hsl-l1));
text-decoration: none
}
.beatmap-discussion-post__action--cancel {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-f1));
height: 60px;
margin: 0;
outline: none;
padding: 0;
position: absolute;
right: 0;
width: 60px
}
.beatmap-discussion-post__actions {
display: flex
}
.beatmap-discussion-post--editing .beatmap-discussion-post__actions,.beatmap-discussion-post--new-reply .beatmap-discussion-post__actions {
justify-content: flex-end
}
.beatmap-discussion-post--editing.beatmap-discussion-post--reply .beatmap-discussion-post__actions {
margin-top: 5px
}
.beatmap-discussion-post__actions-group {
align-items: center;
display: flex;
margin: 0 -5px
}
.beatmap-discussion-post__avatar {
flex: none;
height: 40px;
margin-bottom: 5px;
width: 40px
}
@media (min-width: 900px) {
.beatmap-discussion-post__avatar {
margin-bottom:0;
margin-right: 10px
}
}
.beatmap-discussion-post__content {
display: flex;
flex: none;
flex-direction: column;
min-width: 0;
overflow-anchor: none;
padding: 0 15px
}
@media (min-width: 900px) {
.beatmap-discussion-post__content {
flex:1;
flex-direction: row
}
}
.beatmap-discussion-post--discussion .beatmap-discussion-post__content {
padding: 0
}
.beatmap-discussion--preview .beatmap-discussion-post--reply .beatmap-discussion-post__content,.beatmap-discussion-review-post-embed .beatmap-discussion-post--reply .beatmap-discussion-post__content {
padding: 10px 15px
}
@media (min-width: 900px) {
.beatmap-discussion-post--reply .beatmap-discussion-post__content {
padding-left:60px;
padding-right: 60px
}
}
.beatmap-discussion-post--new-reply .beatmap-discussion-post__content {
padding-bottom: 0;
padding-top: 10px
}
.beatmap-discussion-post__footer {
padding: 10px
}
.beatmap-discussion-post__footer--notice {
align-items: flex-end;
color: hsl(var(--hsl-f1));
display: flex;
font-size: 12px;
justify-content: space-between;
padding-bottom: 0;
padding-top: 0
}
.beatmap-discussion-post--reply .beatmap-discussion-post__footer {
padding-left: 15px;
padding-right: 15px
}
@media (min-width: 900px) {
.beatmap-discussion-post--reply .beatmap-discussion-post__footer {
padding-left:60px;
padding-right: 60px
}
}
.beatmap-discussion-post__info {
color: hsl(var(--hsl-f1));
font-size: 10px;
margin-right: 10px
}
.beatmap-discussion-post__info-container {
display: flex;
flex-wrap: wrap
}
.beatmap-discussion-post--reply .beatmap-discussion-post__info-container:after {
align-self: center;
content: "";
flex: 1;
height: 1px
}
.beatmap-discussion-post__info-user {
font-weight: 600;
opacity: .5
}
.beatmap-discussion-post__message {
color: #fff;
font-family: var(--font-content-override,var(--font-content));
line-height: 1.35;
margin-bottom: 10px;
word-break: break-word
}
.beatmap-discussion-post--discussion .beatmap-discussion-post__message {
font-size: 15px
}
.beatmap-discussion-post--reply .beatmap-discussion-post__message {
font-size: 13px
}
.beatmap-discussion-post__message::-moz-placeholder {
color: hsl(var(--hsl-f1))
}
.beatmap-discussion-post__message::placeholder {
color: hsl(var(--hsl-f1))
}
.beatmap-discussion-post__message--editor {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
min-height: 3em;
outline: none;
padding: 0;
resize: vertical;
width: 100%
}
.beatmap-discussion-post--reply .beatmap-discussion-post__message--editor,.beatmap-discussion-post__message--editor {
font-size: 16px
}
@media (min-width: 900px) {
.beatmap-discussion-post--reply .beatmap-discussion-post__message--editor,.beatmap-discussion-post__message--editor {
font-size:13px
}
}
.beatmap-discussion-post__message-container {
display: flex;
flex: none;
flex-direction: column;
min-width: 0
}
@media (min-width: 900px) {
.beatmap-discussion-post__message-container {
flex:1
}
}
.beatmap-discussion-review-post__block {
white-space: pre-wrap
}
.beatmap-discussion-review-post-embed-preview {
background-color: hsl(var(--hsl-b4));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex: 1;
flex-direction: column;
margin: 5px 0;
min-width: 0;
overflow: hidden;
padding: 5px 10px
}
.beatmap-discussion-review-post-embed-preview--lighter {
background-color: hsl(var(--hsl-b2))
}
.beatmap-discussion-review-post-embed-preview__content {
align-items: flex-start;
display: flex
}
@media (max-width: 899px) {
.beatmap-discussion-review-post-embed-preview__content {
flex-direction:column
}
}
.beatmap-discussion-review-post-embed-preview__delete {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-f1));
height: 32px;
margin: 10px 0 0 10px;
opacity: .5;
outline: none;
padding: 5px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.beatmap-discussion-review-post-embed-preview__delete:hover {
opacity: 1
}
.beatmap-discussion-review-post-embed-preview__indicator {
align-self: center;
color: hsl(var(--hsl-blue-3));
margin-left: 10px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.beatmap-discussion-review-post-embed-preview__indicator--warning {
color: hsl(var(--hsl-orange-3))
}
@media (min-width: 900px) {
.beatmap-discussion-review-post-embed-preview__selectors>.beatmap-discussion-review-post-embed-preview__indicator {
display:none
}
}
@media (max-width: 899px) {
.beatmap-discussion-review-post-embed-preview__content>.beatmap-discussion-review-post-embed-preview__indicator {
display:none
}
}
.beatmap-discussion-review-post-embed-preview__link {
padding: 5px
}
@media (min-width: 900px) {
.beatmap-discussion-review-post-embed-preview__selectors>.beatmap-discussion-review-post-embed-preview__link {
display:none
}
}
@media (max-width: 899px) {
.beatmap-discussion-review-post-embed-preview__content>.beatmap-discussion-review-post-embed-preview__link {
display:none
}
}
.beatmap-discussion-review-post-embed-preview__link-text {
color: hsl(var(--hsl-f1));
text-decoration: none
}
.beatmap-discussion-review-post-embed-preview__link-text:active,.beatmap-discussion-review-post-embed-preview__link-text:focus,.beatmap-discussion-review-post-embed-preview__link-text:hover {
color: hsl(var(--hsl-c1));
text-decoration: none
}
.beatmap-discussion-review-post-embed-preview__message-container {
flex: 1;
margin: 5px 0;
word-break: break-word
}
.beatmap-discussion-review-post-embed-preview__missing {
color: hsl(var(--hsl-f1));
flex: 1;
margin: 10px;
text-align: center
}
.beatmap-discussion-review-post-embed-preview__selectors {
align-items: center;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
@media (min-width: 900px) {
.beatmap-discussion-review-post-embed-preview__selectors {
width:130px
}
}
@media (max-width: 899px) {
.beatmap-discussion-review-post-embed-preview__selectors {
width:100%
}
}
.beatmap-discussion-review-post-embed-preview__stripe {
align-self: stretch;
background-color: hsl(var(--hsl-b5));
border-radius: 5px;
display: flex;
margin: 0 15px;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 2px
}
@media (min-width: 900px) {
.beatmap-discussion-review-post-embed-preview__selectors>.beatmap-discussion-review-post-embed-preview__stripe {
display:none
}
}
@media (max-width: 899px) {
.beatmap-discussion-review-post-embed-preview__content>.beatmap-discussion-review-post-embed-preview__stripe {
display:none
}
}
.beatmap-discussion-review-post-embed-preview--lighter .beatmap-discussion-review-post-embed-preview__stripe {
background-color: hsl(var(--hsl-b4))
}
.beatmap-discussion-review-post-embed-preview--praise .beatmap-discussion-review-post-embed-preview__stripe {
background-color: hsl(var(--hsl-blue-3))
}
.beatmap-discussion-review-post-embed-preview--resolved .beatmap-discussion-review-post-embed-preview__stripe {
background-color: hsl(var(--hsl-lime-3))
}
.beatmap-discussion-review-post-embed-preview__timestamp {
color: hsl(var(--hsl-f1));
flex-grow: 1;
font-size: 9px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.beatmap-discussion-system-post {
font-size: 10px;
margin: 15px
}
@media (min-width: 900px) {
.beatmap-discussion-system-post {
margin-left:60px;
margin-right: 60px
}
}
.beatmap-discussion-system-post--resolved {
color: hsl(var(--hsl-lime-3));
display: flex
}
.beatmap-discussion-system-post--resolved:after {
align-self: center;
background-color: hsl(var(--hsl-lime-3));
content: "";
flex: 1;
height: 1px;
margin-left: 10px
}
.beatmap-discussion-system-post--deleted {
opacity: .5
}
.beatmap-discussion-system-post__user {
color: #fff
}
.beatmap-discussion-system-post__user:active,.beatmap-discussion-system-post__user:focus,.beatmap-discussion-system-post__user:hover {
color: hsl(var(--hsl-l1))
}
.beatmap-discussion-timestamp {
align-items: center;
display: flex;
height: 70px
}
.beatmap-discussion-timestamp--sticky {
position: sticky;
top: calc(var(--navbar-height) + 36px)
}
.beatmap-discussion-timestamp__icons {
display: flex;
gap: 5px
}
.beatmap-discussion-timestamp__icons-container {
margin-left: 5px
}
.beatmap-discussion-timestamp__text {
color: hsl(var(--hsl-f1));
font-size: 9px;
height: 0
}
.beatmap-discussion-timestamp__point {
background-color: hsl(var(--hsl-b6));
border-radius: 50%;
height: 7px;
margin: 0 4px;
width: 7px
}
.beatmap-discussion-timestamp-decoration {
background-color: hsl(var(--hsl-b6));
border-radius: 6px;
color: hsl(var(--hsl-f1));
display: inline-block;
font-size: 85%;
font-weight: 600;
padding: 1px 5px;
text-decoration: none
}
.beatmap-discussion-timestamp-decoration:active,.beatmap-discussion-timestamp-decoration:focus,.beatmap-discussion-timestamp-decoration:hover {
background-color: hsl(var(--hsl-b5));
color: hsl(var(--hsl-l1));
text-decoration: none
}
.beatmap-discussion-user-card {
align-items: flex-start;
display: flex;
flex: none;
margin-bottom: 5px
}
@media (min-width: 900px) {
.beatmap-discussion-user-card {
margin-bottom:0;
margin-right: 10px
}
}
.beatmap-discussion-user-card__avatar {
flex: none;
height: 40px;
width: 40px
}
.beatmap-discussion-user-card--new-reply .beatmap-discussion-user-card__avatar {
margin-bottom: 5px
}
@media (min-width: 900px) {
.beatmap-discussion-user-card--new-reply .beatmap-discussion-user-card__avatar {
margin-bottom:0;
margin-right: 10px
}
}
.beatmap-discussion-user-card__user {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
margin: 0 5px
}
@media (min-width: 900px) {
.beatmap-discussion-user-card__user {
flex:none;
min-width: 150px
}
}
.beatmap-discussion-user-card__user-badge {
margin-top: 2px;
min-height: 16px
}
.beatmap-discussion-user-card__user-link {
color: #fff;
display: flex;
font-size: 13px;
font-weight: 600;
max-width: 120px
}
.beatmap-discussion-user-card__user-link:active,.beatmap-discussion-user-card__user-link:focus,.beatmap-discussion-user-card__user-link:hover {
color: #fff
}
.beatmap-discussion-user-card__user-modding-history-link {
color: #fff;
color: hsl(var(--hsl-l1));
font-size: 10px;
margin-left: 5px
}
.beatmap-discussion-user-card__user-modding-history-link:active,.beatmap-discussion-user-card__user-modding-history-link:focus,.beatmap-discussion-user-card__user-modding-history-link:hover {
color: hsl(var(--hsl-l1))
}
.beatmap-discussion-user-card__user-row {
align-items: baseline;
display: flex
}
.beatmap-discussion-user-card__user-stripe {
align-self: stretch;
background-color: white;
border-radius: 1px;
flex: none;
width: 2px
}
@media (max-width: 899px) {
.beatmap-discussion-post--discussion .beatmap-discussion-user-card__user-stripe {
display:none
}
}
.beatmap-discussion-vote {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: flex;
font-size: 12px;
margin: 0;
outline: none;
padding: 0;
transition: all .1s ease-in-out
}
.beatmap-discussion-vote__count {
color: #fff;
padding-left: 5px
}
.beatmap-discussions {
background-color: #00000014;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex-direction: column;
border-radius: 20px;
}
.beatmap-discussions__discussions {
padding: 10px 20px;
position: relative
}
.beatmap-discussions__discussions--empty {
font-size: 12px
}
@media (max-width: 899px) {
.beatmap-discussions__discussions {
padding:10px 0
}
}
.beatmap-discussions__mode {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: block;
margin: 0;
outline: none;
padding: 0
}
.beatmap-discussions__mode-container {
align-items: center;
display: flex;
padding: 5px 0
}
.beatmap-discussions__mode-circle {
background-color: hsl(var(--hsl-b6));
border-radius: 50%;
height: 15px;
overflow-anchor: none;
width: 15px
}
.beatmap-discussions__mode-text {
font-size: 10px
}
.beatmap-discussions__timeline-line {
background-color: hsl(var(--hsl-b6));
height: calc(100% - 35px);
left: 20px;
margin: 0 6px;
overflow-anchor: none;
position: absolute;
top: 17.5px;
width: 3px
}
.beatmap-discussions__timeline-line--half {
height: 50%
}
.beatmap-discussions__timeline-line--bottom {
top: 50%
}
.beatmap-discussions__toolbar {
display: flex;
flex-direction: column;
padding: 0 15px
}
@media (min-width: 900px) {
.beatmap-discussions__toolbar {
flex-direction:row
}
}
.beatmap-discussions__toolbar-content {
display: flex
}
.beatmap-discussions__toolbar-content--right {
flex: 1;
justify-content: flex-end
}
.beatmap-discussions__toolbar-item {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 5px;
outline: none;
padding: 0
}
.beatmap-discussions__toolbar-item--link {
background-color: rgba(93, 93, 101, 0.09);
border-radius: 10px;
color: #fff;
font-size: 12px;
padding: 5px 10px;
text-decoration: none
}
.beatmap-discussions__toolbar-item--link:active,.beatmap-discussions__toolbar-item--link:focus,.beatmap-discussions__toolbar-item--link:hover {
text-decoration: none
}
.beatmap-discussions__toolbar-item--link:hover {
background-color: rgb(93 93 101 / 23%);
}
.beatmap-discussions__toolbar-link-content+.beatmap-discussions__toolbar-link-content {
margin-left: 5px
}
.beatmap-discussions-header-bottom {
background-color: #1b1b1b;
display: flex;
flex-direction: column;
margin-bottom: 10px;
padding: 0 var(--gutter);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
@media (min-width: 900px) {
.beatmap-discussions-header-bottom {
--gutter:20px;
align-items: stretch;
flex-direction: row
}
.beatmap-discussions-header-bottom__content {
flex: 1
}
}
.beatmap-discussions-header-bottom__content--details {
display: flex;
flex-direction: column;
margin: -5px;
padding: 20px 10px 10px 0
}
@media (max-width: 899px) {
.beatmap-discussions-header-bottom__content--details {
align-self:center;
padding: 15px 5px 5px
}
}
.beatmap-discussions-header-bottom__content--nomination {
margin-top: 10px;
min-width: 0
}
@media (min-width: 900px) {
.beatmap-discussions-header-bottom__content--nomination {
flex-basis:30%
}
}
.beatmap-discussions-header-bottom__details {
display: flex;
flex: none;
margin: 5px
}
.beatmap-discussions-header-bottom__details--full {
flex: 1
}
.beatmap-discussions-header-top {
--box-height: 50px;
--gutter: 10px;
background-color: hsl(var(--hsl-b2));
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
@media (min-width: 900px) {
.beatmap-discussions-header-top {
--gutter:40px
}
}
.beatmap-discussions-header-top__basic-stats {
grid-area: stats;
padding: 10px 10px 0
}
.beatmap-discussions-header-top__beatmap-stats {
background-color: #1b1b1b;
display: grid;
grid-template-areas:
"owners stats"
"chart chart";
grid-template-columns: 1fr auto;
position: relative;
border-radius: 20px;
}
@media (max-width: 479px) {
.beatmap-discussions-header-top__beatmap-stats {
grid-template-areas:"stats" "owners" "chart"
}
}
.beatmap-discussions-header-top__chart {
grid-area: chart;
}
.beatmap-discussions-header-top__content {
padding: 70px var(--gutter) 0;
position: relative;
}
.beatmap-discussions-header-top__cover:after {
background-color: hsla(var(--hsl-b5),60%);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.beatmap-discussions-header-top__title-container {
align-items: flex-start;
display: inline-flex;
flex-direction: column;
position: relative;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.beatmap-discussions-header-top__filter-group {
flex: 1 1 auto;
min-width: 0
}
.beatmap-discussions-header-top__filter-group+.beatmap-discussions-header-top__filter-group {
margin-top: 10px
}
@media (min-width: 900px) {
.beatmap-discussions-header-top__filter-group {
align-self:flex-end
}
.beatmap-discussions-header-top__filter-group+.beatmap-discussions-header-top__filter-group {
margin-top: 0
}
.beatmap-discussions-header-top__filter-group--stats {
align-items: flex-end;
display: flex;
flex: none;
flex-direction: column
}
}
.beatmap-discussions-header-top__filters {
display: flex;
flex-direction: column;
margin: 10px 0;
position: relative
}
@media (min-width: 900px) {
.beatmap-discussions-header-top__filters {
flex-direction:row;
justify-content: space-between
}
}
.beatmap-discussions-header-top__owners {
font-size: 14px;
grid-area: owners;
overflow-wrap: anywhere;
padding: 10px 10px 0
}
.beatmap-discussions-header-top__stats {
display: flex;
flex: none;
flex-wrap: wrap;
margin: 5px -5px
}
@media (min-width: 900px) {
.beatmap-discussions-header-top__stats {
margin-bottom:-5px;
margin-left: 5px
}
}
.beatmap-discussions-header-top__title {
color: inherit;
font-size: 24px;
font-weight: 600;
margin: 0
}
.beatmap-discussions-header-top__title--artist {
font-size: 15px;
font-weight: 400
}
.beatmap-icon {
color: var(--diff);
display: flex;
font-size: 22px
}
.beatmap-icon--beatmapset {
font-size: 24px;
position: relative
}
.beatmap-list {
color: #fff;
min-width: 0;
position: relative
}
.beatmap-list--selecting {
z-index: 512
}
.beatmap-list__body {
height: var(--box-height);
min-width: 0
}
.beatmap-list__item {
align-items: center;
color: #fff;
cursor: pointer;
display: flex;
font-size: 14px;
gap: 10px;
padding: 3px 10px;
text-align: left
}
.beatmap-list__item,.beatmap-list__item:active,.beatmap-list__item:focus,.beatmap-list__item:hover {
text-decoration: none
}
.beatmap-list__item:active,.beatmap-list__item:focus,.beatmap-list__item:hover {
color: #fff
}
.beatmap-list__item:hover {
background-color: hsl(var(--hsl-b6))
}
.beatmap-list__item--selected {
background-color: #262626b5;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
box-shadow: 0 0 0 2px rgba(0,0,0,.25);
font-size: inherit;
height: 100%;
min-width: 0;
padding-bottom: 10px;
padding-top: 10px
}
.beatmap-list__item--current,.beatmap-list__item--selected:hover {
background-color: #313131b5;
}
.beatmap-list__item-count {
background-color: hsl(var(--hsl-b2));
border-radius: 4px;
color: hsl(var(--hsl-b5));
font-size: .7em;
font-weight: 700;
margin-left: 10px;
padding: 2px 5px
}
.beatmap-list__item-selector-button {
margin-left: auto
}
.beatmap-list__selector {
display: flex;
flex-direction: column;
max-height: 70vh;
overflow-y: scroll
}
.beatmap-list__selector-container {
background-color: #26262685;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: none;
left: 0;
margin-top: 5px;
max-width: min(max(90vw,100%),1000px);
min-width: 100%;
padding: 10px 0;
position: absolute;
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025);
scrollbar-width: thin;
top: 100%;
width: -moz-max-content;
width: max-content
}
.beatmap-list__selector-container * {
scrollbar-width: thin
}
.beatmap-list__selector-container ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.beatmap-list__selector-container ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.beatmap-list__selector-container ::-webkit-scrollbar:horizontal {
height: 10px
}
.beatmap-list__selector-container ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.beatmap-list__selector-container ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
.beatmap-list--selecting .beatmap-list__selector-container {
display: grid
}
.beatmap-list-item {
--difficulty-badge-width: max-content;
--main-width: 0;
display: grid;
gap: .4em;
grid-template-columns: auto auto 1fr;
min-width: 0
}
.beatmap-list-item--deleted {
opacity: .5
}
.beatmap-list-item--inline {
display: inline-grid
}
.beatmap-list-item--full-width {
--main-width: auto
}
.beatmap-list-item__col--icon {
align-items: center;
display: inline-flex;
font-size: 1.25em;
justify-content: center;
width: 1em
}
.beatmap-list-item__col--main {
align-self: baseline;
min-width: var(--main-width);
white-space: nowrap
}
.beatmap-list-item__mapper {
font-size: .87em
}
.beatmap-list-item__version {
-webkit-text-decoration: var(--version-text-decoration,none);
text-decoration: var(--version-text-decoration,none)
}
.beatmap-list-item__version-link {
color: #fff;
text-decoration: none
}
.beatmap-list-item__version-link:active,.beatmap-list-item__version-link:focus,.beatmap-list-item__version-link:hover {
color: #fff;
text-decoration: none
}
.beatmap-owner {
background-color: hsla(var(--hsl-b5),.8);
border-radius: 6px;
display: flex;
gap: 2px
}
.beatmap-owner__avatar {
height: 20px;
width: 20px
}
.beatmap-owner__remove {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
border-radius: 50%;
display: flex;
margin: 2px;
opacity: .7;
outline: none;
padding: 0 .3em;
place-items: center;
visibility: hidden
}
.beatmap-owner__remove:active,.beatmap-owner__remove:focus,.beatmap-owner__remove:hover {
background-color: hsl(var(--hsl-b1));
opacity: 1
}
.beatmap-owner__remove--editing {
visibility: visible
}
.beatmap-owner__user {
align-items: center;
display: flex;
gap: 5px
}
.beatmap-owner-editor {
display: contents
}
.beatmap-owner-editor__avatar {
height: 20px;
width: 20px
}
.beatmap-owner-editor__col {
align-items: center;
display: flex;
gap: 5px
}
.beatmap-owner-editor__col--buttons {
display: flex;
justify-content: flex-end
}
.beatmap-owner-editor__col--version {
margin-right: 5px
}
@media (min-width: 900px) {
.beatmap-owner-editor__col--version {
margin-right:20px
}
}
.beatmap-owner-editor__button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-l2));
margin: 0;
outline: none;
padding: 0
}
.beatmap-owner-editor__button:active,.beatmap-owner-editor__button:focus,.beatmap-owner-editor__button:hover {
color: hsl(var(--hsl-l1))
}
.beatmap-owner-editor__button[disabled] {
opacity: .5
}
.beatmap-owner-editor__user {
align-items: center;
display: flex;
gap: 5px
}
.beatmap-owner-editor-owners {
border-radius: 6px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2px;
padding: var(--input-padding)
}
.beatmap-owner-editor-owners--editing {
background: var(--input-bg);
box-shadow: inset 0 0 0 2px var(--input-border-colour)
}
.beatmap-pack {
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: #fff;
margin: 2px 0;
width: 100%
}
.beatmap-pack--expanded,.beatmap-pack.js-accordion__item--expanded {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
z-index: 1
}
.beatmap-pack__body {
/* background-color: hsl(var(--hsl-b3)); */
}
.beatmap-pack__date {
font-size: 90%
}
.beatmap-pack__details {
color: hsl(var(--hsl-c1));
justify-content: flex-end;
margin-left: auto;
padding-left: 20px;
text-align: right
}
.beatmap-pack__header {
background-color: #5d5d6517;
color: #fff;
display: flex;
padding: 15px 20px;
text-decoration: none;
border-radius: 20px;
}
.beatmap-pack__header:active,.beatmap-pack__header:focus,.beatmap-pack__header:hover {
color: #fff;
text-decoration: none
}
.beatmap-pack--expanded .beatmap-pack__header,.beatmap-pack__header:hover,.js-accordion__item--expanded .beatmap-pack__header {
background-color: #00000038;
}
.beatmap-pack--expanded .beatmap-pack__name,.js-accordion__item--expanded .beatmap-pack__name {
font-weight: 600
}
.beatmap-pack-description {
border-bottom: 1px solid hsl(var(--hsl-b4));
line-height: 1.75;
padding: 20px
}
.beatmap-pack-description__link {
font-size: 120%;
font-weight: 700
}
.beatmap-pack-items {
line-height: 1.5;
margin: 0;
padding: 20px
}
.beatmap-pack-items__artist {
font-weight: 600;
margin-left: 8px
}
.beatmap-pack-items__icon {
color: hsl(var(--hsl-b5))
}
.beatmap-pack-items__icon--cleared {
color: hsl(var(--hsl-l1))
}
.beatmap-pack-items__link {
color: #fff;
}
.beatmap-pack-items__set {
list-style: none
}
.beatmap-packs {
background-color: #00000014;
padding: 20px
}
.beatmap-packs-header {
background-color: #00000014;
color: hsl(var(--hsl-c1));
font-size: 14px;
font-weight: 300;
line-height: 1.3;
padding: 20px 40px;
text-align: center
}
.beatmap-packs-header__important {
font-size: 110%;
font-weight: 600;
letter-spacing: .1em
}
.beatmap-playcount {
--border-radius: 6px 0 0 6px;
background-color: #000;
border-radius: 6px;
color: #fff;
display: flex;
line-height: normal;
margin-bottom: 2px
}
.beatmap-playcount__artist {
margin-right: 10px
}
@media (min-width: 900px) {
.beatmap-playcount__artist {
display:none
}
}
.beatmap-playcount__count {
align-items: center;
color: #fc2;
display: flex;
font-size: 20px
}
.beatmap-playcount__count-icon {
font-size: .6em;
margin-right: 5px;
margin-top: .2em
}
.beatmap-playcount__cover {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
flex: none;
height: 60px;
position: relative;
width: 70px
}
.beatmap-playcount__cover-count {
align-items: center;
background-color: rgba(0,0,0,.75);
border-radius: var(--border-radius);
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
padding-right: 6px;
position: absolute;
top: 0;
width: 100%
}
@media (min-width: 900px) {
.beatmap-playcount__cover-count {
display:none
}
}
.beatmap-playcount__detail {
align-items: center;
background-color: hsl(var(--hsl-b3));
border-radius: 6px;
display: flex;
flex: 1;
margin-left: -6px;
min-width: 0;
padding: 0 10px;
position: relative
}
.beatmap-playcount:hover .beatmap-playcount__detail {
background-color: hsl(var(--hsl-b2))
}
.beatmap-playcount__detail-count {
align-items: center;
display: none
}
@media (min-width: 900px) {
.beatmap-playcount__detail-count {
display:flex
}
}
.beatmap-playcount__info {
flex: 1;
min-width: 0
}
.beatmap-playcount__info-row {
font-size: 12px
}
.beatmap-playcount__mapper {
color: hsl(var(--hsl-f1))
}
.beatmap-playcount__mapper-link {
color: hsl(var(--hsl-f1));
font-weight: 700
}
.beatmap-playcount__mapper-link:active,.beatmap-playcount__mapper-link:focus,.beatmap-playcount__mapper-link:hover {
color: hsl(var(--hsl-l1))
}
.beatmap-playcount__title {
color: #fff;
font-size: 16px;
font-weight: 700;
min-width: 0
}
.beatmap-playcount__title:active,.beatmap-playcount__title:focus,.beatmap-playcount__title:hover {
color: #fff
}
.beatmap-playcount__title-artist {
display: none;
font-weight: 400
}
@media (min-width: 900px) {
.beatmap-playcount__title-artist {
display:inline
}
}
.beatmap-score-top {
display: flex;
flex-direction: column;
position: relative
}
.beatmap-score-top__achieved {
font-size: 10px;
margin-bottom: 2px
}
.beatmap-score-top__avatar {
flex: none;
margin: 0 10px
}
.beatmap-score-top__flags {
display: flex;
font-size: 20px;
gap: 5px
}
.beatmap-score-top__link-container {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.beatmap-score-top__position {
font-size: 18px;
font-weight: 700;
line-height: 1;
text-align: right
}
.beatmap-score-top__position-number {
color: #fff;
display: block;
padding-bottom: 5px;
text-decoration: none
}
.beatmap-score-top__position-number:active,.beatmap-score-top__position-number:focus,.beatmap-score-top__position-number:hover {
color: #fff;
text-decoration: none
}
.beatmap-score-top__section {
align-items: center;
background-color: #18181885;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
justify-content: space-between;
padding: 10px;
pointer-events: none;
position: relative;
width: 100%
}
@media (max-width: 899px) {
.beatmap-score-top__section {
flex-direction:column
}
}
.beatmap-score-top__stat {
display: flex;
flex-direction: column;
margin-right: 10px
}
@media (max-width: 899px) {
.beatmap-score-top__stat {
margin-bottom:10px;
margin-top: 10px
}
}
.beatmap-score-top__stat-header {
border-bottom: 2px solid hsl(var(--hsl-b3));
color: hsl(var(--hsl-f1));
font-size: 10px;
font-weight: 700;
min-width: 50px;
padding-bottom: 2px;
text-transform: uppercase;
white-space: nowrap
}
.beatmap-score-top__stat-header--wider {
min-width: 80px;
width: 100%
}
.beatmap-score-top__stat-header--mods {
min-width: 30px;
width: 100%
}
.beatmap-score-top__stat-value {
color: #fff;
font-size: 22px;
font-weight: 300;
line-height: .9;
margin-top: 4px
}
.beatmap-score-top__stat-value--mods {
--mod-height: 18px;
display: flex
}
.beatmap-score-top__stat-value--perfect {
color: hsl(var(--hsl-lime-1))
}
.beatmap-score-top__stat-value--smaller {
font-size: 16px;
font-weight: 500
}
.beatmap-score-top__stats {
display: flex;
flex-shrink: 1;
justify-content: space-around
}
@media (min-width: 900px) {
.beatmap-score-top__stats {
justify-content:flex-end;
margin: 5px 10px 5px 0
}
}
.beatmap-score-top__stats--wrappable {
flex-wrap: wrap
}
.beatmap-score-top__user-box {
display: grid;
flex: none;
gap: 4px
}
@media (min-width: 900px) {
.beatmap-score-top__user-box {
margin-right:10px
}
}
.beatmap-score-top__username {
color: #fff;
display: block;
font-size: 18px;
font-weight: 700
}
.beatmap-score-top__username:active,.beatmap-score-top__username:focus,.beatmap-score-top__username:hover {
color: #fff;
text-decoration: underline
}
.beatmap-score-top__wrapping-container {
align-items: center;
display: flex;
flex-direction: row
}
.beatmap-score-top__wrapping-container--left {
flex-shrink: 0
}
.beatmap-score-top__wrapping-container--right {
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-end;
width: 100%
}
@media (max-width: 899px) {
.beatmap-score-top__wrapping-container--right {
justify-content:space-around
}
}
.beatmap-scoreboard-mod {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
cursor: pointer;
margin: 2px;
opacity: var(--scoreboard-mod-opacity,.5);
outline: none;
padding: 0
}
.beatmap-scoreboard-mod--enabled,.beatmap-scoreboard-mod:hover {
--scoreboard-mod-opacity: 1
}
.beatmap-scoreboard-table {
--default-color: #fff;
--padding-h: 4px;
--perfect-color: hsl(var(--hsl-lime-1));
--row-background-color: #18181885;
--row-background-color-highlight: #18181885;
--zero-color: hsla(0,0%,100%,.4);
margin-right: -16px;
overflow-x: auto;
transform: translateZ(0);
}
@media (max-width: 899px) {
.beatmap-scoreboard-table {
margin-right:0
}
}
.beatmap-scoreboard-table__table {
font-size: 12px;
min-width: 800px;
width: 100%;
}
.beatmap-scoreboard-table__header {
color: #c9c9c9;
font-size: 10px;
font-weight: 700;
padding: 0 var(--padding-h) 5px;
text-transform: uppercase
}
.beatmap-scoreboard-table__header--rank {
text-align: right;
width: 40px
}
.beatmap-scoreboard-table__header--accuracy,.beatmap-scoreboard-table__header--grade,.beatmap-scoreboard-table__header--score {
width: 70px
}
.beatmap-scoreboard-table__header--flag {
width: 25px
}
.beatmap-scoreboard-table__header--player {
width: 180px
}
.beatmap-scoreboard-table__header--maxcombo {
width: 100px
}
.beatmap-scoreboard-table__header--hitstat {
max-width: 55px;
min-width: 30px;
white-space: nowrap
}
.beatmap-scoreboard-table__header--hitstat-miss,.beatmap-scoreboard-table__header--pp {
width: 50px
}
.beatmap-scoreboard-table__header--mods {
min-width: 50px;
padding-left: 5px
}
.beatmap-scoreboard-table__header--popup-menu {
width: 16px
}
.beatmap-scoreboard-table__body-row:nth-child(odd) {
font-size: 13px;
height: 35px;
}
.beatmap-scoreboard-table__body-row--menu-active,.beatmap-scoreboard-table__body-row:hover {
--zero-color: #fff
}
.beatmap-scoreboard-table--menu-active .beatmap-scoreboard-table__body-row--highlightable {
pointer-events: none
}
.beatmap-scoreboard-table__body-row.beatmap-scoreboard-table__body-row--friend {
--row-background-color: rgba(238,170,0,.2);
--row-background-color-highlight: rgba(255,206,85,.2)
}
.beatmap-scoreboard-table__body-row.beatmap-scoreboard-table__body-row--self {
--row-background-color: rgba(102,136,0,.3);
--row-background-color-highlight: rgba(179,238,0,.3)
}
.beatmap-scoreboard-table__cell {
background-color: var(--row-background-color);
border-radius: 20px;
}
.beatmap-scoreboard-table__body-row--menu-active .beatmap-scoreboard-table__cell,.beatmap-scoreboard-table__body-row:hover .beatmap-scoreboard-table__cell {
background-color: var(--row-background-color-highlight)
}
.beatmap-scoreboard-table__cell:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px
}
.beatmap-scoreboard-table__cell:nth-last-child(2) {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
width: 1%
}
.beatmap-scoreboard-table__cell-content {
align-items: center;
color: var(--default-color);
display: flex;
height: 1.8em;
padding: 0 var(--padding-h);
text-decoration: none
}
.beatmap-scoreboard-table__cell-content:active,.beatmap-scoreboard-table__cell-content:focus,.beatmap-scoreboard-table__cell-content:hover {
color: var(--default-color);
text-decoration: none
}
.beatmap-scoreboard-table__cell-content--grade {
justify-content: center
}
.beatmap-scoreboard-table__cell-content--mods {
padding-right: 10px
}
.beatmap-scoreboard-table__cell-content--perfect {
--default-color: var(--perfect-color)
}
.beatmap-scoreboard-table__cell-content--rank {
font-weight: 700;
justify-content: flex-end
}
.beatmap-scoreboard-table__body-row--first .beatmap-scoreboard-table__cell-content--score {
font-weight: 700
}
.beatmap-scoreboard-table__cell-content--time {
white-space: nowrap
}
.beatmap-scoreboard-table__cell-content--user-link {
display: flex;
gap: 5px;
position: absolute
}
.beatmap-scoreboard-table__cell-content--zero {
--default-color: var(--zero-color)
}
.beatmap-scoreboard-table__mods {
--mod-height: 18px;
display: flex
}
.beatmap-scoreboard-table__popup-menu {
position: relative
}
.beatmap-scoreboard-table__body-row--menu-active .beatmap-scoreboard-table__popup-menu {
opacity: 1
}
.beatmap-scoreboard-table__body-row--highlightable .beatmap-scoreboard-table__popup-menu {
opacity: 0;
}
@media (max-width: 899px) {
.beatmap-scoreboard-table__body-row--highlightable .beatmap-scoreboard-table__popup-menu {
opacity:1
}
}
.beatmap-scoreboard-table__body-row--highlightable:hover .beatmap-scoreboard-table__popup-menu {
opacity: 1
}
.beatmap-scoreboard-table__user-link:active,.beatmap-scoreboard-table__user-link:focus,.beatmap-scoreboard-table__user-link:hover {
text-decoration: underline
}
.beatmap-scoreboard-top {
display: flex;
flex-wrap: wrap;
margin: 15px 0
}
.beatmap-scoreboard-top__item {
margin: 5px 0;
width: 100%
}
.beatmap-scoreboard-top__title {
font-size: 15px;
margin: 0 15px 15px
}
.beatmap-stats-table {
text-align: center;
width: 100%
}
.beatmap-stats-table__bar {
padding: 0 10px;
width: 100%
}
.beatmap-stats-table__label {
font-weight: 400;
padding: 2.5px 0;
white-space: nowrap
}
.beatmap-stats-table__value {
min-width: 25px;
text-align: center
}
.beatmap-success-rate {
background-color: #00000014;
display: flex;
flex-direction: column;
font-size: 12px;
height: 100%;
padding: 0 15px;
border-radius: 20px
}
.beatmap-success-rate__chart {
flex: none;
height: 60px;
line-height: 0;
margin-top: 20px
}
@media (min-width: 900px) {
.beatmap-success-rate__chart {
flex:1;
height: auto;
min-height: 0
}
}
.beatmap-success-rate__empty {
align-items: center;
display: inline-flex;
flex: 1;
justify-content: center;
margin: 20px 0
}
.beatmap-success-rate__header {
color: inherit;
font-size: inherit;
font-style: normal;
font-weight: 400;
margin: 20px 0 0;
text-align: center
}
.beatmap-success-rate__percentage {
display: flex;
justify-content: center;
transition: margin-left .25s cubic-bezier(.645,.045,.355,1);
width: 0
}
.beatmaps-owner-editor {
background-color: hsl(var(--hsl-b5));
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
margin: auto;
max-width: 1000px;
padding-bottom: 10px;
padding-top: 10px;
width: 100%;
width: auto
}
@media (min-width: 900px) {
.beatmaps-owner-editor {
max-width:1000px;
width: calc(100% - 40px);
width: auto
}
}
.beatmaps-owner-editor__row {
padding: 10px
}
@media (min-width: 900px) {
.beatmaps-owner-editor__row {
padding-left:50px;
padding-right: 50px
}
}
.beatmaps-owner-editor__row--content {
grid-gap: 5px;
align-items: center;
display: grid;
font-size: 12px;
grid-template-columns: auto minmax(20px,auto) minmax(20px,300px) 70px;
max-height: calc(var(--vh)*60);
overflow-y: auto
}
.beatmaps-owner-editor__row--footer {
display: flex;
justify-content: flex-end
}
.beatmaps-popup {
--panel-height: 120px;
background-color: #282828db;
border-radius: 0 0 10px 10px;
padding: 5px 0 10px;
pointer-events: auto;
position: absolute;
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025);
top: 100%;
transition: opacity .15s ease-in-out;
width: 100%;
z-index: 4
}
.beatmaps-popup,.beatmaps-popup * {
scrollbar-width: thin
}
.beatmaps-popup ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.beatmaps-popup ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.beatmaps-popup ::-webkit-scrollbar:horizontal {
height: 10px
}
.beatmaps-popup ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.beatmaps-popup ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
@media (min-width: 900px) {
.beatmaps-popup {
--panel-height:100px;
padding-top: 10px
}
}
.beatmaps-popup:before {
border: 2px solid hsl(var(--hsl-h1));
border-radius: 10px;
bottom: 0;
box-shadow: 0 2px 10px rgba(0,0,0,.5);
content: "";
height: calc(100% + var(--panel-height));
left: 0;
pointer-events: none;
position: absolute;
width: 100%
}
@media (min-width: 900px) {
.beatmaps-popup--size-extra {
--panel-height:140px
}
}
.beatmaps-popup__content {
grid-gap: 10px;
display: grid;
max-height: 50vh;
overflow: auto;
padding: 2px 5px
}
.beatmaps-popup__group {
grid-gap: 2px;
display: grid;
grid-template-columns: minmax(0,1fr)
}
.beatmaps-popup-item {
grid-gap: 4px;
--version-text-decoration: none;
align-items: center;
color: hsl(var(--hsl-c1));
display: grid;
font-size: 13px;
max-width: 100%;
width: -moz-max-content;
width: max-content
}
.beatmaps-popup-item:active,.beatmaps-popup-item:focus,.beatmaps-popup-item:hover {
--version-text-decoration: underline;
color: hsl(var(--hsl-c1));
text-decoration: none
}
.beatmapset-activities,.beatmapset-activities h2,.beatmapset-activities h3 {
color: #fff
}
.beatmapset-activities__post-grow {
flex-grow: 1
}
.beatmapset-activities__discussion-post {
display: flex;
margin-bottom: 10px
}
.beatmapset-activities__spinner {
display: flex;
flex: 1;
justify-content: center;
padding: 20px
}
.beatmapset-activities__timeline-icon-margin {
margin: 10px!important
}
.beatmapset-activities__user-upvote-list {
display: flex;
flex-wrap: wrap
}
.beatmapset-activities__user-upvote-panel {
display: flex;
margin: 10px;
width: 200px
}
.beatmapset-activities__vote-icon-spacer {
margin: 10px 5px 10px 0
}
.beatmapset-activities__vote-link {
pointer-events: auto
}
.beatmapset-activities__vote-user-panel {
flex-shrink: 0;
width: 50px
}
.beatmapset-activities .js-usercard {
pointer-events: auto
}
.beatmapset-badge {
--colour: hsl(var(--hsl-c1));
--colour-hover: var(--colour);
background-color: hsl(var(--hsl-b5));
border-radius: 10000px;
color: var(--colour);
font-size: 10px;
margin-left: 10px;
padding: .2em 1em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap
}
.beatmapset-badge,.beatmapset-badge:active,.beatmapset-badge:focus,.beatmapset-badge:hover {
text-decoration: none
}
.beatmapset-badge:active,.beatmapset-badge:focus,.beatmapset-badge:hover {
color: var(--colour-hover)
}
.beatmapset-badge--featured_artist {
--colour: hsl(var(--hsl-blue-2));
--colour-hover: hsl(var(--hsl-blue-1))
}
.beatmapset-badge--nsfw {
--colour: hsl(var(--hsl-orange-2))
}
.beatmapset-badge--panel {
margin-left: 5px
}
.beatmapset-badge--spotlight {
--colour: hsl(var(--hsl-green-2));
--colour-hover: hsl(var(--hsl-green-1))
}
.beatmapset-beatmap-picker {
background-color: hsla(var(--hsl-b3),70%);
border-radius: 10px;
display: flex;
flex-wrap: wrap;
margin: 0 -7px 10px;
max-width: 100%;
width: -moz-fit-content;
width: fit-content
}
.beatmapset-beatmap-picker__beatmap {
height: 38px;
opacity: .7;
padding: 7px;
text-decoration: none;
transform: translateZ(0);
transition: all .1s ease-in-out;
width: 38px
}
.beatmapset-beatmap-picker__beatmap:active,.beatmapset-beatmap-picker__beatmap:focus,.beatmapset-beatmap-picker__beatmap:hover {
text-decoration: none
}
.beatmapset-beatmap-picker__beatmap:hover {
opacity: 1
}
.beatmapset-beatmap-picker__beatmap:before {
background-color: hsla(var(--hsl-b6),.5);
border: 2px solid;
border-radius: 10px;
content: "";
height: 100%;
height: calc(100% - 2px);
left: 0;
left: 1px;
opacity: 0;
position: absolute;
top: 0;
top: 1px;
width: 100%;
width: calc(100% - 2px)
}
.beatmapset-beatmap-picker__beatmap--active,.beatmapset-beatmap-picker__beatmap:hover:before {
opacity: 1
}
.beatmapset-beatmap-picker__beatmap--active:before {
background-color: hsla(var(--hsl-b6),.5);
opacity: 1
}
.beatmapset-cover {
align-items: center;
background-position: 50%;
background-size: auto auto;
background-size: cover;
display: inline-flex;
flex: none;
height: 30px;
justify-content: center;
position: relative;
vertical-align: middle;
width: 45px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.beatmapset-cover {
background-image:url(/assets/images/[email protected])
}
}
.beatmapset-cover:before {
background-image: var(--bg);
background-position: 50%;
background-size: cover;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.beatmapset-cover:before {
background-image:var(--bg-2x,var(--bg))
}
}
.beatmapset-cover--full {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.beatmapset-cover--home {
height: 60px;
width: 70px
}
.beatmapset-cover--search {
height: 50px;
width: 50px
}
.beatmapset-cover-admin__img {
max-width: 100%
}
.beatmapset-discussion-image-link {
display: inline-flex;
min-height: 1em;
min-width: 1em;
position: relative
}
.beatmapset-discussion-image-link__spinner {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.beatmapset-discussions-chart {
--icon-area-height: 30px;
height: 115px;
padding: 0 40px;
position: relative
}
.beatmapset-discussions-chart:before {
--border-size: 2px;
border-top: var(--border-size) solid hsl(var(--hsl-b3));
bottom: 0;
content: "";
height: calc(var(--border-size) + var(--icon-area-height));
left: 0;
position: absolute;
width: 100%
}
.beatmapset-discussions-chart__container {
height: 100%;
position: relative;
width: 100%
}
.beatmapset-discussions-chart__item {
--line-scale: 1;
align-items: center;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
position: absolute;
text-decoration: none;
transform: translateX(-3px);
width: 6px
}
.beatmapset-discussions-chart__item:active,.beatmapset-discussions-chart__item:focus,.beatmapset-discussions-chart__item:hover {
text-decoration: none
}
.beatmapset-discussions-chart__item:before {
background-image: linear-gradient(to top,hsl(var(--hsl-c1)),hsl(var(--hsl-c1)) 14%,hsla(var(--hsl-c1),0) 98%);
content: "";
display: block;
flex: 1;
transform: scaleX(var(--line-scale));
width: 1px
}
.beatmapset-discussions-chart__item:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
color: var(--icon-colour);
content: var(--icon,"");
display: inline-block;
display: flex;
flex: none;
font-family: Font Awesome\ 5 Free;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 900;
font-weight: var(--icon-weight);
height: var(--icon-area-height);
line-height: 1;
text-rendering: auto
}
.beatmapset-discussions-chart__item:after.fa-pull-left {
margin-right: .3em
}
.beatmapset-discussions-chart__item:after.fa-pull-right {
margin-left: .3em
}
.beatmapset-discussions-chart__item:hover {
--line-scale: 2
}
.beatmapset-discussions-chart__item--deleted {
opacity: .5
}
.beatmapset-discussions-chart__item--mapper-note {
--icon-colour: var(--beatmapset-discussion-colour--mapper_note);
--icon: "\f249";
--icon-weight: 400
}
.beatmapset-discussions-chart__item--praise {
--icon-colour: var(--beatmapset-discussion-colour--praise);
--icon: "\f004";
--icon-weight: 900
}
.beatmapset-discussions-chart__item--problem {
--icon-colour: var(--beatmapset-discussion-colour--problem);
--icon: "\f06a";
--icon-weight: 900
}
.beatmapset-discussions-chart__item--resolved {
--icon-colour: var(--beatmapset-discussion-colour--resolved);
--icon: "\f058";
--icon-weight: 400
}
.beatmapset-discussions-chart__item--suggestion {
--icon-colour: var(--beatmapset-discussion-colour--suggestion);
--icon: "\f111";
--icon-weight: 400
}
.beatmapset-event {
align-items: baseline;
display: flex;
font-size: 12px;
padding: 2px 0
}
.beatmapset-event__content {
word-wrap: break-word;
min-width: 0
}
.beatmapset-event__icon {
--bg-approve: #6cf;
--bg-beatmap-owner-change: #6cf;
--bg-discussion-delete: #fc2;
--bg-discussion-lock: #ed1221;
--bg-discussion-post-delete: #fc2;
--bg-discussion-post-restore: #6cf;
--bg-discussion-restore: #6cf;
--bg-discussion-unlock: #88b300;
--bg-disqualify: #ed1221;
--bg-genre-edit: #6cf;
--bg-issue-reopen: #fc2;
--bg-issue-resolve: #88b300;
--bg-kudosu-allow: #6cf;
--bg-kudosu-deny: #ed1221;
--bg-kudosu-gain: #6cf;
--bg-kudosu-lost: #ed1221;
--bg-kudosu-recalculate: #ccc;
--bg-language-edit: #6cf;
--bg-love: #f6a;
--bg-nominate: #6cf;
--bg-nomination-reset: #ed1221;
--bg-nomination-reset-received: #ed1221;
--bg-nsfw-toggle: #6cf;
--bg-offset-edit: #6cf;
--bg-tags-edit: #6cf;
--bg-qualify: #6cf;
--bg-rank: #88b300;
--bg-remove-from-loved: #ed1221;
align-self: stretch;
background-color: var(--bg,transparent);
border-radius: 3px;
flex: none;
width: 8px
}
.beatmapset-event__icon--beatmapset-activities {
margin: 0 10px
}
.beatmapset-event__time {
flex: none;
padding: 0 10px;
width: 80px
}
.beatmapset-events {
display: flex;
flex-direction: column
}
.beatmapset-events__empty {
display: flex;
font-size: 12px
}
.beatmapset-events__title {
color: hsl(var(--hsl-l1));
font-size: 15px;
margin: 20px 0 5px
}
.beatmapset-events__title:first-child {
margin-top: 0
}
.beatmapset-header {
display: grid;
gap: 20px;
min-height: 350px;
padding: 10px 10px 0;
position: relative
}
@media (min-width: 900px) {
.beatmapset-header {
grid-template-columns:1fr 275px;
padding: 20px 40px 0
}
}
.beatmapset-header__box {
display: flex;
flex-direction: column;
position: relative
}
@media (min-width: 900px) {
.beatmapset-header__box--main {
padding-bottom:25px
}
}
.beatmapset-header__box--stats {
justify-content: space-between
}
.beatmapset-header__beatmap-picker-box {
flex: 1 0 auto
}
.beatmapset-header__buttons {
display: flex;
flex-wrap: wrap;
margin-top: 10px
}
.beatmapset-header__availability-info {
background: rgba(0,0,0,.5);
color: #ea0;
font-size: 14px;
margin-top: 10px;
padding: 10px
}
.beatmapset-header__availability-link {
font-size: 10px;
padding-top: 10px
}
.beatmapset-header__cover {
--border-radius: 0;
display: contents
}
.beatmapset-header__cover:after {
background-color: hsla(var(--hsl-b5),60%);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.beatmapset-header__details-text {
max-width: 100%;
word-break: break-word
}
.beatmapset-header__details-text--artist {
font-size: 20px;
font-weight: 500;
padding-bottom: 20px
}
.beatmapset-header__details-text--title {
font-size: 30px;
font-weight: 600;
line-height: 1;
margin-bottom: 5px;
margin-top: 10px
}
.beatmapset-header__details-text-link {
color: #fff;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.beatmapset-header__details-text-link:active,.beatmapset-header__details-text-link:focus,.beatmapset-header__details-text-link:hover {
color: #fff;
text-decoration: none
}
.beatmapset-header__diff-extra {
font-size: 11px;
font-weight: 600;
margin-left: 5px
}
.beatmapset-header__diff-extra--star-difficulty {
color: #fc2
}
.beatmapset-header__diff-name {
color: hsl(var(--hsl-c1));
font-size: 17px;
font-weight: 600;
overflow-wrap: anywhere;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.beatmapset-header__more {
align-items: center;
display: inline-flex;
height: 45px;
justify-content: center;
position: relative;
width: 45px
}
.beatmapset-header__status {
display: flex;
font-size: 14px;
height: 38px;
margin: -5px -5px 5px auto
}
.beatmapset-header__value {
color: #fff;
font-size: 12px;
font-weight: 500;
margin-right: 10px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.beatmapset-header__value--has-favourites {
background: hsla(var(--hsl-b6),.25);
border-radius: 4px;
padding: 2px 5px
}
.beatmapset-header__value--has-favourites:hover {
background: hsla(var(--hsl-b6),.5)
}
.beatmapset-header__value-icon {
color: #fff;
padding-right: 2px
}
.beatmapset-header__value-icon--favourites:active,.beatmapset-header__value-icon--favourites:hover,.beatmapset-header__value-icon--favourites:link,.beatmapset-header__value-icon--favourites:visited {
color: #fff;
text-decoration: none
}
.beatmapset-header__value-icon--favourites:hover {
color: #cc5288
}
.beatmapset-header__value-icon--favourited:hover,.beatmapset-header__value-icon--favourited:link {
color: #b17
}
.beatmapset-hype {
color: #fff;
display: flex;
flex-direction: column;
font-size: 12px;
padding: 0 20px
}
@media (min-width: 900px) {
.beatmapset-hype {
flex-direction:row
}
}
.beatmapset-hype__box {
display: flex;
flex-direction: column;
padding: 15px 0
}
@media (min-width: 900px) {
.beatmapset-hype__box {
flex:1;
margin: 0 10px
}
}
.beatmapset-hype__box--float {
grid-gap: 5px;
display: grid;
padding-left: 15px;
padding-right: 15px
}
@media (min-width: 900px) {
.beatmapset-hype__box--float {
flex:none;
width: 275px
}
}
.beatmapset-hype__button {
display: flex
}
.beatmapset-hype__description-row--action {
margin-bottom: 0
}
.beatmapset-hype__description-row--current {
font-weight: 700;
margin-bottom: 5px
}
.beatmapset-hype__description-row--status {
align-self: flex-start;
margin-bottom: 10px
}
.beatmapset-hype__lights-header {
display: flex;
justify-content: space-between
}
.beatmapset-hype__lights-title {
font-weight: 700
}
.beatmapset-info {
-webkit-overflow-scrolling: touch;
display: grid;
font-size: 12px;
gap: 20px;
padding: 10px 10px 0;
border-bottom: solid 1px #bfbfbf;
}
@media (min-width: 900px) {
.beatmapset-info {
grid-template-columns:1fr 175px 275px;
padding: 15px 40px 0
}
}
.beatmapset-info__box {
display: flex;
flex-direction: column;
min-width: 0;
padding-top: 10px;
position: relative
}
@media (min-width: 900px) {
.beatmapset-info__box {
max-height:300px;
min-height: 200px
}
}
.beatmapset-info__box--success-rate {
padding-top: 0;
padding-bottom: 10px
}
.beatmapset-info__edit-button {
opacity: 0;
position: absolute;
right: 0;
top: 5px;
transition: opacity .12s;
z-index: 1
}
.beatmapset-info__box:hover .beatmapset-info__edit-button {
opacity: 1
}
.beatmapset-info__row {
display: flex;
flex-direction: column;
padding-bottom: 10px;
padding-top: 5px
}
.beatmapset-info__row--half {
flex-direction: row
}
.beatmapset-info__row--value-overflow {
min-height: 0;
padding-bottom: 0
}
.beatmapset-info__half-entry {
flex: none;
width: 50%
}
.beatmapset-info__header {
color: inherit;
font-size: 14px;
font-style: normal;
font-weight: 700;
margin: 0 0 5px;
padding: 0
}
.beatmapset-info__link {
overflow-wrap: break-word
}
.beatmapset-info__value-overflow {
flex: 1;
max-height: 300px;
min-height: 0;
overflow-y: auto;
padding-bottom: 10px
}
.beatmapset-list-view {
--border-radius: 6px;
background-color: #282828bd;
border-radius: var(--border-radius);
color: inherit;
display: flex;
height: 40px;
width: 100%
}
.beatmapset-list-view:active,.beatmapset-list-view:focus,.beatmapset-list-view:hover {
background-color: #34343499;
color: inherit;
text-decoration: inherit
}
.beatmapset-list-view__artist {
font-size: 14px;
margin-left: 5px
}
.beatmapset-list-view__cover-container {
flex: none;
position: relative;
width: 80px
}
.beatmapset-list-view__cover-container--blank {
background-image: none
}
.beatmapset-list-view__content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 0 10px
}
.beatmapset-list-view__title {
font-size: 16px;
font-weight: 600
}
.beatmapset-mapping {
align-items: flex-start;
color: #fff;
display: flex;
font-size: 11px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.beatmapset-mapping__content {
display: flex;
flex-direction: column;
justify-content: center
}
.beatmapset-mapping__mapper {
margin-bottom: 5px
}
.beatmapset-mapping__user {
color: #fff;
font-weight: 600;
white-space: pre
}
.beatmapset-mapping__user:active,.beatmapset-mapping__user:focus,.beatmapset-mapping__user:hover {
color: #fff;
text-decoration: none
}
.beatmapset-panel {
--border-cover-opacity: 0;
--global-beatmap-link-pointer-events: none;
--info-bg: transparent;
--main-height: 100px;
--menu-bg: transparent;
--menu-container-width: 0;
--menu-opacity: 0;
--mobile-extra-bar-height: calc(var(--panel-height) - var(--main-height));
--panel-height: 120px;
--progress: 0;
--play-bg: transparent;
--play-icon-opacity: 0;
--play-width: 80px;
--source-display: flex;
--stats-grid-template: "hype nominations favourite-count play-count date"/auto auto auto auto auto;
--stats-opacity: 1;
--transition: all 150ms ease-in-out;
border-radius: 10px;
font-size: 12px;
height: var(--panel-height);
min-width: 0;
position: relative;
transform: translateZ(0)
}
@media (min-width: 900px) {
.beatmapset-panel {
--global-beatmap-link-pointer-events:auto;
--info-bg: linear-gradient(0.25turn, hsl(0deg 0.26% 12.52%), hsl(0deg 0% 25.68% / 80%));
--menu-bg: hsl(var(--hsl-b3));
--menu-container-width: 10px;
--main-height: 100%;
--panel-height: 100px;
--play-width: 90px;
--stats-opacity: 0
}
.beatmapset-panel:hover {
--info-bg: linear-gradient(0.25turn,hsl(var(--hsl-b4)),hsla(var(--hsl-b4),0.8));
--menu-opacity: 1;
--menu-container-width: 30px;
--play-bg: hsla(var(--hsl-b6),0.8);
--play-icon-opacity: 1;
--stats-opacity: 1
}
}
.beatmapset-panel:before {
background-color: inherit;
bottom: 0;
content: "";
height: 10px;
left: 0;
opacity: var(--border-cover-opacity);
position: absolute;
transition: var(--transition);
transition-duration: var(--beatmaps-popup-transition-duration);
width: 100%
}
.beatmapset-panel[data-audio-state=loading],.beatmapset-panel[data-audio-state=playing] {
--play-bg: hsla(var(--hsl-b6),0.8);
--play-icon-opacity: 1
}
.beatmapset-panel--beatmaps-popup-visible {
--border-cover-opacity: 1
}
@media (min-width: 900px) {
.beatmapset-panel--beatmaps-popup-visible {
--info-bg:linear-gradient(0.25turn,hsl(var(--hsl-b4)),hsla(var(--hsl-b4),0.8));
--menu-opacity: 1;
--menu-container-width: 30px;
--play-bg: hsla(var(--hsl-b6),0.8);
--play-icon-opacity: 1;
--stats-opacity: 1
}
}
@media (max-width: 899px) {
.beatmapset-panel--mobile-expanded {
--menu-opacity:1;
--menu-container-width: 30px;
--play-bg: hsla(var(--hsl-b6),0.8);
--play-icon-opacity: 1;
--stats-opacity: 1
}
}
@media (min-width: 900px) {
.beatmapset-panel--size-extra {
--panel-height:140px;
--stats-grid-template: "favourite-count hype date" "play-count nominations ."/auto auto auto;
--stats-opacity: 1;
--play-width: 140px
}
.beatmapset-panel--size-normal {
--source-display: none
}
}
.beatmapset-panel__badge-container {
bottom: .2em;
flex-shrink: 0;
margin-left: auto;
position: relative
}
.beatmapset-panel__beatmap-count {
font-weight: 600
}
.beatmapset-panel__beatmap-dot {
background-color: var(--bg);
border-radius: 10000px;
height: 12px;
margin-right: 1px;
width: 6px
}
.beatmapset-panel__beatmap-icon {
display: flex;
font-size: 14px;
margin-right: 2px
}
.beatmapset-panel__content {
display: flex;
height: var(--main-height);
pointer-events: none;
position: relative;
width: 100%;
}
.beatmapset-panel__cover-col {
--border-radius: 0;
position: relative
}
.beatmapset-panel__cover-col--play {
--border-radius: 10px 0 0 10px;
flex: none;
width: calc(var(--play-width) + 10px);
}
.beatmapset-panel__cover-col--info {
flex: 1;
margin-right: 10px
}
.beatmapset-panel__cover-container {
display: flex;
height: 100%;
height: var(--main-height);
left: 0;
pointer-events: var(--global-beatmap-link-pointer-events);
position: absolute;
top: 0;
width: 100%;
}
.beatmapset-panel__cover-container:after {
background-color: hsl(var(--hsl-b3));
border-radius: 9px;
content: "";
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: calc(100% - var(--play-width))
}
@media (min-width: 900px) {
.beatmapset-panel__cover-container:after {
display:none;
}
}
.beatmapset-panel__extra-item {
display: flex;
margin: 0 var(--gutter)
}
.beatmapset-panel__extra-item--dots {
align-items: center
}
.beatmapset-panel__info {
background: var(--info-bg);
border-radius: 9px 0 0 9px;
display: flex;
flex: 1;
flex-direction: column;
min-width: 10px;
padding: 4px 10px 6px;
position: relative;
}
.beatmapset-panel__info-row {
align-items: baseline;
display: flex;
margin: 0;
padding: 0;
position: relative;
}
.beatmapset-panel__info-row--artist {
font-size: 14px;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.beatmapset-panel__info-row--extra {
--gutter: 3px;
align-items: center;
color: #fff;
margin: 0 calc(var(--gutter)*-1);
pointer-events: var(--global-beatmap-link-pointer-events);
text-decoration: none
}
.beatmapset-panel__info-row--extra:active,.beatmapset-panel__info-row--extra:focus,.beatmapset-panel__info-row--extra:hover {
color: #fff;
text-decoration: none
}
@media (max-width: 899px) {
.beatmapset-panel__info-row--extra {
height:var(--mobile-extra-bar-height);
left: calc(var(--play-width)*-1);
padding: 0 30px 0 5px;
position: absolute;
top: 100%;
width: calc(100% + var(--play-width) + var(--gutter)*2)
}
}
.beatmapset-panel__info-row--mapper {
color: hsl(var(--hsl-c2));
font-weight: 600;
margin-top: auto
}
.beatmapset-panel__info-row--source {
color: hsl(var(--hsl-c2));
display: var(--source-display);
font-weight: 700
}
.beatmapset-panel__info-row--source:after {
content: "\a0"
}
.beatmapset-panel__info-row--stats {
display: grid;
grid-template: var(--stats-grid-template);
max-width: 100%;
opacity: var(--stats-opacity);
overflow: hidden;
white-space: nowrap;
width: -moz-max-content;
width: max-content
}
@media (min-width: 900px) {
.beatmapset-panel__info-row--stats {
margin-bottom:2px
}
}
.beatmapset-panel__info-row--title {
font-size: 18px;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.beatmapset-panel__main-link {
color: #fff;
pointer-events: auto;
text-decoration: none
}
.beatmapset-panel__main-link:active,.beatmapset-panel__main-link:focus,.beatmapset-panel__main-link:hover {
color: #fff;
text-decoration: none
}
.beatmapset-panel__menu {
align-items: center;
display: flex;
flex-direction: column;
font-size: 12px;
height: 100%;
justify-content: space-evenly;
left: 0;
opacity: var(--menu-opacity);
overflow: hidden;
pointer-events: auto;
position: absolute;
top: 0;
transition: var(--transition);
width: 100%;
}
.beatmapset-panel__menu-container {
background-color: #262525;
border-radius: 0 10px 10px 0;
flex: none;
overflow: hidden;
position: relative;
transition: var(--transition);
width: var(--menu-container-width)
}
@media (min-width: 900px) {
.beatmapset-panel__menu-container {
overflow:visible
}
}
.beatmapset-panel__menu-container:after,.beatmapset-panel__menu-container:before {
background-color: inherit;
content: "";
height: 10px;
position: absolute;
right: 100%;
width: 10px
}
.beatmapset-panel__menu-container:before {
clip-path: path("M11 -1 L11 10 L10 10 A10 10 0 0 0 0 0 L0 -1 Z");
top: 0
}
.beatmapset-panel__menu-container:after {
bottom: 0;
clip-path: path("M11 11 L11 0 L10 0 A10 10 0 0 1 0 10 L 0 11 Z")
}
.beatmapset-panel__menu-item {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
outline: none;
padding: 3px 0;
text-align: center;
width: 20px
}
.beatmapset-panel__menu-item:active,.beatmapset-panel__menu-item:focus,.beatmapset-panel__menu-item:hover {
color: hsl(var(--hsl-c1))
}
.beatmapset-panel__menu-item--disabled:active,.beatmapset-panel__menu-item--disabled:focus,.beatmapset-panel__menu-item--disabled:hover {
color: hsl(var(--hsl-l1))
}
.beatmapset-panel__mobile-expand {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
bottom: 0;
color: hsl(var(--hsl-c2));
display: flex;
height: var(--mobile-extra-bar-height);
justify-content: flex-end;
margin: 0;
outline: none;
padding: 0 10px 0 0;
pointer-events: auto;
position: absolute;
right: 0;
width: 100%
}
@media (min-width: 900px) {
.beatmapset-panel__mobile-expand {
display:none
}
}
.beatmapset-panel__play {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: inline-flex;
font-size: 14px;
height: 100%;
justify-content: center;
left: 0;
margin: 0;
opacity: var(--play-icon-opacity);
outline: none;
padding: 15px;
pointer-events: auto;
position: absolute;
top: 0;
width: 100%
}
.beatmapset-panel__play:hover {
color: hsl(var(--hsl-orange-1))
}
@media (max-width: 899px) {
.beatmapset-panel__play {
transition:var(--transition)
}
}
.beatmapset-panel__play-container {
background-color: var(--play-bg);
border-radius: 9px 0 0 9px;
flex: none;
position: relative;
width: var(--play-width);
border-radius: 20px;
}
.beatmapset-panel__play-container:after,.beatmapset-panel__play-container:before {
background-color: inherit;
content: "";
height: 10px;
left: 100%;
position: absolute;
width: 10px
}
.beatmapset-panel__play-container:before {
clip-path: path("M-1 -1 L-1 10 L0 10 A10 10 0 0 1 10 0 L10 -1 Z");
top: 0
}
.beatmapset-panel__play-container:after {
bottom: 0;
clip-path: path("M-1 11 L-1 0 L0 0 A10 10 0 0 0 10 10 L10 11 Z")
}
.beatmapset-panel__play-icon {
align-items: center;
background: hsla(var(--hsl-b6),.5);
border-radius: 50%;
display: inline-flex;
font-size: 10px;
height: 20px;
justify-content: center;
margin: 1px;
padding-top: 1px;
pointer-events: auto;
width: 20px
}
.beatmapset-panel__play-icons {
display: flex;
left: 4px;
position: absolute;
top: 4px
}
.beatmapset-panel__play-progress {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
opacity: var(--play-icon-opacity);
position: absolute;
top: 0;
width: 100%
}
.beatmapset-panel__stats-item {
align-items: center;
display: flex;
margin-right: 10px;
pointer-events: auto
}
.beatmapset-panel__stats-item--date {
grid-area: date
}
.beatmapset-panel__stats-item--favourite-count {
grid-area: favourite-count
}
.beatmapset-panel__stats-item--hype {
grid-area: hype
}
.beatmapset-panel__stats-item--nominations {
grid-area: nominations
}
.beatmapset-panel__stats-item--play-count {
grid-area: play-count
}
.beatmapset-panel__stats-item-icon {
font-size: 8px;
margin-right: 4px
}
.beatmapset-scoreboard {
color: hsl(var(--hsl-c1));
}
.beatmapset-scoreboard__mods {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px auto 0;
max-width: 100%;
width: -moz-max-content;
width: max-content
}
.beatmapset-scoreboard__mods--initial {
--scoreboard-mod-opacity: 1
}
.beatmapset-scoreboard__mods--initial:hover {
--scoreboard-mod-opacity: 0.5
}
.beatmapset-scoreboard__main--loading {
opacity: .5
}
.beatmapset-scoreboard__notice {
font-size: 14px;
padding-top: 10px;
text-align: center
}
.beatmapset-scoreboard__supporter-text {
font-weight: 600;
padding-bottom: 10px
}
.beatmapset-scoreboard__supporter-text--small {
font-size: 80%;
font-weight: 400;
padding: 0
}
.beatmapset-search-card {
background-color: #5d5d6517;
border-radius: 20px;
display: flex;
font-size: 12px;
line-height: normal;
min-height: 40px;
text-decoration: none;
transition: all .12s ease-in-out
}
.beatmapset-search-card:active,.beatmapset-search-card:focus,.beatmapset-search-card:hover {
text-decoration: none
}
.beatmapset-search-card--active {
background-color: #66666640;
}
.beatmapset-search-card__details {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2px 10px
}
.beatmapset-search-card__title {
color: hsl(var(--hsl-c1));
font-size: 16px
}
.beatmapset-search-card__title-artist {
font-size: 12px
}
.beatmapset-search-card__extra {
font-size: 12px
}
.beatmapset-stats {
font-size: 12px
}
.beatmapset-stats__elapsed-bar {
background-color: #fc2;
bottom: 0;
height: 3px;
left: 0;
position: absolute;
width: calc(var(--progress)*100%)
}
.beatmapset-stats__icon {
background-size: contain;
height: 15px;
margin-right: 5px;
width: 15px
}
.beatmapset-stats__rating-chart {
height: 25px
}
.beatmapset-stats__rating-header {
padding-bottom: 5px;
text-align: center
}
.beatmapset-stats__rating-values {
display: flex;
justify-content: space-between;
padding-bottom: 10px
}
.beatmapset-stats__row {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #12121285;
border: none;
border-radius: 15px;
flex-direction: column;
margin: 1px 0 0;
padding: 7.5px 15px;
width: 100%
}
.beatmapset-stats__row--basic {
padding-bottom: 10px;
padding-top: 10px
}
.beatmapset-stats__row--preview {
--progress: 0;
align-items: center;
color: #fff;
cursor: pointer;
display: flex;
font-size: 18px;
justify-content: center;
padding: 10px;
position: relative;
text-decoration: none
}
.beatmapset-stats__row--preview:active,.beatmapset-stats__row--preview:focus,.beatmapset-stats__row--preview:hover {
color: #fff;
text-decoration: none
}
.beatmapset-stats__row--preview:hover {
background-color: #26262685
}
.beatmapset-stats__row--rating {
padding-bottom: 0;
padding-top: 10px
}
.beatmapset-status {
background-color: #12121285;
border-radius: 10000px;
color: hsl(var(--hsl-c1));
font-size: 12px;
font-style: normal;
font-weight: 600;
padding: 6px 15px;
text-transform: uppercase;
transition: all .12s ease-in-out
}
.beatmapset-status--list-view {
background-color: hsla(var(--hsl-b6),.5);
font-size: 10px;
margin-top: 2px;
padding: 2px 8px;
width: -moz-max-content;
width: max-content
}
.beatmapset-status--panel {
background-color: hsl(var(--bg-hsl));
color: var(--colour);
font-weight: 800;
line-height: 14px;
padding: 0 5px
}
.beatmapset-status--show {
height: 100%;
padding: 0 35px
}
.beatmapset-status--show,.beatmapset-status--show-icon {
align-items: center;
display: inline-flex;
font-size: inherit;
justify-content: center;
margin: 5px
}
.beatmapset-status--show-icon {
border-radius: 50%;
height: 38px;
padding: 0;
width: 38px
}
.beatmapset-watches {
font-size: 14px;
margin-top: 10px
}
.beatmapset-watches__table-container {
overflow-x: auto
}
.beatmapset-watches__col.beatmapset-watches__col {
border-top: 2px solid hsl(var(--hsl-b4));
vertical-align: middle
}
.beatmapset-watches__col.beatmapset-watches__col--cover {
padding: 0;
width: 70px
}
.beatmapset-watches__cover {
background-position: 50%;
background-size: cover;
border-radius: 4px;
height: 50px;
overflow: hidden;
width: 50px
}
.beatmapset-watches__description {
margin-bottom: 10px
}
.beatmapset-watches__heading {
border-top: none!important
}
.beatmapset-watches__link:active,.beatmapset-watches__link:focus,.beatmapset-watches__link:hover {
color: #fff
}
.beatmapsets {
background-color: #00000014;
color: #fff
}
.beatmapsets__content {
padding: 5px 15px
}
.beatmapsets--dimmed .beatmapsets__content {
opacity: .2
}
.beatmapsets__empty {
align-items: center;
display: flex;
justify-content: center;
margin: 10px 0 -5px;
width: 100%
}
.beatmapsets__item {
flex: none;
margin: 5px;
width: calc(100% - 10px)
}
@media (min-width: 900px) {
.beatmapsets__item {
width:calc(50% - 10px)
}
}
.beatmapsets__items {
display: flex;
flex-wrap: wrap
}
.beatmapsets__items-row {
display: flex;
width: 100%
}
.beatmapsets__paginator {
display: flex;
justify-content: center
}
.beatmapsets__toolbar {
align-items: center;
background-color: #00000014;
display: flex;
justify-content: space-between;
padding: 0 20px
}
.beatmapsets-search {
font-size: 13px;
padding: 10px;
position: relative
}
@media (min-width: 900px) {
.beatmapsets-search {
padding-left:50px;
padding-right: 50px
}
}
.beatmapsets-search--sticky {
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0
}
.beatmapsets-search__advanced {
display: none
}
.beatmapsets-search--expanded .beatmapsets-search__advanced {
display: contents
}
.beatmapsets-search__cover {
--border-radius: 0;
height: 100%;
left: 0;
opacity: .5;
position: absolute;
top: 0;
width: 100%
}
.beatmapsets-search__cover:after {
background-color: #1e1d1d69;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.beatmapsets-search__expand-link {
color: hsl(var(--hsl-c1));
display: block;
font-size: 10px;
grid-column: 1/span 2;
margin-top: 10px;
text-align: center;
width: 100%
}
.beatmapsets-search__expand-link:active,.beatmapsets-search__expand-link:focus,.beatmapsets-search__expand-link:hover {
color: #fff
}
.beatmapsets-search--expanded .beatmapsets-search__expand-link {
display: none
}
.beatmapsets-search__filter-grid {
align-items: baseline;
display: flex;
flex-direction: column;
position: relative
}
@media (min-width: 900px) {
.beatmapsets-search__filter-grid {
display:grid;
gap: 0 10px;
grid-template-columns: auto 1fr
}
}
.beatmapsets-search__filters {
display: flex;
justify-content: space-between
}
.beatmapsets-search__icon {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 45px
}
.beatmapsets-search--sticky .beatmapsets-search__icon {
width: 38px
}
.beatmapsets-search__input {
background-color: rgb(25 25 25 / 85%);
border: none;
border-radius: 30px;
color: hsl(var(--hsl-c1));
padding: 10px 55px 10px 10px;
width: 100%
}
.beatmapsets-search__input:focus {
border-color: white;
box-shadow: 0 0 10px white;
outline: none
}
.beatmapsets-search--sticky .beatmapsets-search__input {
padding: 5px 43px 5px 5px
}
.beatmapsets-search__input[disabled] {
background-color: hsl(var(--hsl-b2));
border-color: hsl(var(--hsl-b4));
color: hsl(var(--hsl-c1))
}
.beatmapsets-search__input-container {
font-size: 20px;
margin: 20px 0;
position: relative
}
@media (min-width: 900px) {
.beatmapsets-search__input-container {
margin-left:-10px;
margin-right: -10px
}
}
.beatmapsets-search--sticky .beatmapsets-search__input-container {
font-size: 13px;
margin: 5px 0
}
.beatmapsets-search-filter {
align-items: baseline;
display: flex;
flex-wrap: wrap;
margin: 2px;
position: relative
}
.beatmapsets-search-filter--grid {
display: contents
}
.beatmapsets-search-filter__header {
color: hsl(var(--hsl-c1));
display: block;
margin: 15px 0 5px
}
@media (min-width: 900px) {
.beatmapsets-search-filter__header {
margin-top:5px
}
}
.beatmapsets-search-filter__item {
--colour: #ffffffcc;
--colour-hover: hsl(var(--hsl-l1));
color: var(--colour)
}
.beatmapsets-search-filter__item--active {
--colour: #ffffffcc;
--colour-hover: var(--colour);
font-weight: 600
}
.beatmapsets-search-filter__item--featured-artists {
--colour: hsl(var(--hsl-orange-1));
--colour-hover: var(--colour)
}
.beatmapsets-search-filter__item:focus {
color: var(--colour)
}
.beatmapsets-search-filter__item:active,.beatmapsets-search-filter__item:hover {
color: #c1c1c1cc;
}
.beatmapsets-search-filter__items {
align-items: baseline;
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 2px 10px
}
.blackout {
backface-visibility: hidden;
background-color: #000;
height: 100%;
left: 0;
opacity: .5;
position: absolute;
position: fixed;
top: 0;
width: 100%;
z-index: 510
}
.blackout--overlay {
opacity: .4;
z-index: 9990
}
.block-list {
align-self: flex-start;
flex-grow: 1
}
.block-list__toggle {
color: #fff
}
.block-list__toggle:active,.block-list__toggle:focus,.block-list__toggle:hover {
color: hsl(var(--hsl-l1))
}
.block-list__content {
max-width: 250px
}
.block-list-item {
align-items: center;
background: hsl(var(--hsl-b2));
border-radius: 4px;
display: flex;
justify-content: space-between;
margin: 5px 0;
padding: 2px 10px;
transition: .1s ease-in-out
}
.block-list-item:hover {
background: hsl(var(--hsl-b1))
}
.block-list-item__link {
align-items: center;
color: #ccc;
display: flex;
text-decoration: none
}
.block-list-item__link:active,.block-list-item__link:focus,.block-list-item__link:hover {
color: #eee;
text-decoration: none
}
.modal-body {
border-radius: 0 0 5px 5px;
padding: 10px
}
.modal-body--no-rounding {
border-radius: 0
}
.modal-body--compartimentalized {
display: flex;
padding: 0
}
.modal-body--user-dropdown {
background-color: #fff
}
.modal-body--page {
background-color: hsl(var(--hsl-b2));
border-radius: 4px;
color: hsl(var(--hsl-c1))
}
.modal-body__compartment {
display: flex;
padding: 10px
}
.modal-body__compartment--left {
border-radius: 0 0 0 5px;
flex: 1 0 auto;
flex-flow: column nowrap
}
.modal-body__compartment--right {
background-color: #eee;
border-radius: 0 0 5px;
flex: none;
justify-content: flex-end;
padding: 0
}
.modal-body__form {
align-items: stretch;
display: flex;
flex-wrap: wrap;
margin: 10px 0 0
}
@media (min-width: 900px) {
.modal-body__form {
flex-wrap:nowrap
}
}
.modal-body__paragraph {
display: block;
font-size: 12px;
margin: 10px 0 0
}
.modal-body__title {
color: hsl(var(--hsl-c1));
font-size: 18px;
font-style: normal;
margin: 10px 0
}
.modal-content {
background: none;
border: none
}
.modal-content--no-shadow {
box-shadow: none!important
}
@media (min-width: 900px) {
.modal-dialog\@sm {
margin-top:90px
}
}
.modal-dialog--full {
margin: 0;
width: 100%
}
.modal-header {
border-bottom: 0;
border-radius: 5px 5px 0 0
}
.modal-header__badges {
display: flex;
left: 10px;
position: absolute;
top: -20px
}
.modal-header__dimmer {
background: rgba(0,0,0,.35);
border-radius: 5px 5px 0 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.modal-header__title {
bottom: 0;
color: #fff;
font-size: 24px;
font-style: normal;
left: 0;
margin: 10px;
position: absolute;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.modal-header__userinfo {
padding-right: 10px
}
.modal-header--login {
background-image: url(/assets/images/login-box.20388c51.jpg);
background-position: 100%;
background-size: cover;
height: 60px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.modal-header--login {
background-image:url(/assets/images/[email protected])
}
}
.modal-header--authenticated {
align-items: flex-end;
background-position: 50%;
background-size: cover;
display: flex;
height: 70px;
justify-content: space-between;
padding: 5px 10px
}
.btn-circle {
--transition: all 120ms ease-in-out;
--bg: #3636363b;
--bg-hover: #4b4b4b3b;
--bg-disabled: #333;
--colour: hsl(var(--hsl-c1));
--colour-hover: hsl(var(--hsl-c1));
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: var(--bg);
border: none;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: var(--colour);
cursor: pointer;
display: inline-block;
flex: none;
font-size: 14px;
height: 30px;
margin: 0;
outline: none;
padding: 0;
text-shadow: inherit;
transition: var(--transition);
width: 30px
}
.btn-circle:active,.btn-circle:focus,.btn-circle:hover {
background-color: var(--bg-hover);
box-shadow: 0 5px 15px rgba(0,0,0,.4);
color: var(--colour-hover);
text-decoration: none
}
.btn-circle--bbcode {
background-color: transparent;
box-shadow: none;
font-size: 13px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-circle--bbcode:active,.btn-circle--bbcode:focus,.btn-circle--bbcode:hover {
background-color: #5a5a5a
}
.btn-circle--blank {
cursor: default;
opacity: .7
}
.btn-circle--blank,.btn-circle--blank:active,.btn-circle--blank:focus,.btn-circle--blank:hover {
background-color: transparent;
box-shadow: none
}
.btn-circle--follow {
--bg: #8c8c8c66;
--bg-hover: #9e9c9c99;
--colour-hover: white;
border-radius: 50%;
font-size: 12px;
height: 40px;
width: 40px
}
.btn-circle--follow-small {
--bg: transparent;
--bg-hover: transparent;
--bg-disabled: transparent;
border-radius: 0;
font-size: 12px;
height: 1em;
padding: 0;
vertical-align: middle;
width: 1em
}
.btn-circle--page-toggle {
--bg: #252525;
--bg-hover: #3c3c3c;
box-shadow: none;
color: #fff;
display: inline-flex;
font-size: 12px;
justify-content: center;
position: relative;
text-decoration: none;
align-items: center;
}
.btn-circle--page-toggle:active,.btn-circle--page-toggle:focus,.btn-circle--page-toggle:hover {
box-shadow: none;
color: #fff;
text-decoration: none
}
.btn-circle--page-toggle-detail {
border-radius: 50%;
height: 40px;
width: 40px
}
.btn-circle--topic-entry {
border-radius: 50%;
box-shadow: none;
font-size: 14px;
height: 30px;
margin: 2.5px;
width: 30px
}
.btn-circle--topic-entry:active,.btn-circle--topic-entry:focus,.btn-circle--topic-entry:hover {
box-shadow: 0 1px 3px rgba(0,0,0,.25)
}
.btn-circle--topic-nav {
margin: 2px
}
@media (min-width: 900px) {
.btn-circle--topic-nav {
margin:0 3px
}
}
.btn-circle--activated,.btn-circle.js-activated {
color: hsl(var(--hsl-b5));
}
.btn-circle--activated:active,.btn-circle--activated:focus,.btn-circle--activated:hover,.btn-circle.js-activated:active,.btn-circle.js-activated:focus,.btn-circle.js-activated:hover {
background-color: #c8c6c6;
color: hsl(var(--hsl-b5))
}
.btn-circle--purple {
background-color: #64c
}
.btn-circle--purple:active,.btn-circle--purple:focus,.btn-circle--purple:hover {
background-color: #86e
}
.btn-circle--purple.btn-circle--activated {
background-color: #a8f
}
.btn-circle--purple.btn-circle--activated:active,.btn-circle--purple.btn-circle--activated:focus,.btn-circle--purple.btn-circle--activated:hover {
background-color: #eef
}
.btn-circle--yellow {
background-color: #ea0
}
.btn-circle--yellow:active,.btn-circle--yellow:focus,.btn-circle--yellow:hover {
background-color: #fc2
}
.btn-circle--yellow.btn-circle--activated {
background-color: #fd5
}
.btn-circle--yellow.btn-circle--activated:active,.btn-circle--yellow.btn-circle--activated:focus,.btn-circle--yellow.btn-circle--activated:hover {
background-color: #ffd
}
.btn-circle--disabled,.btn-circle.js-disabled,.btn-circle[disabled] {
background-color: var(--bg-disabled);
cursor: not-allowed
}
.btn-circle__content {
position: relative
}
.btn-circle__content,.btn-circle__icon {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
width: 100%
}
.btn-circle__icon {
--normal-opacity: 1;
--hover-opacity: 1;
left: 0;
opacity: var(--normal-opacity);
position: absolute;
top: 0;
transition: var(--transition)
}
.btn-circle:active .btn-circle__icon,.btn-circle:hover .btn-circle__icon {
opacity: var(--hover-opacity)
}
.btn-circle__icon--hover-hide {
--normal-opacity: 1;
--hover-opacity: 0
}
.btn-circle__icon--hover-show {
--normal-opacity: 0;
--hover-opacity: 1
}
.btn-home {
--bg-l-adjust: 0%;
--bg-move: 0px;
--border-size: 3px;
--move: 0px;
--inset-colour: hsl(var(--colour-h),var(--colour-s),calc(var(--colour-l) - 10%));
align-items: center;
background-color:#34343475;
background-position: 50%;
background-position: calc(50% + var(--bg-move)) 50%;
background-size: 175%;
border-radius: 6px;
box-shadow: 0 calc(var(--border-size) - var(--move)) var(--inset-colour),0 calc(var(--border-size) + 1px - var(--move)) 3px rgba(0,0,0,.25);
color: #fff;
display: flex;
font-size: 14px;
font-weight: 700;
margin-bottom: var(--border-size);
padding: 10px 20px;
transform: translateZ(0);
transform: translateY(var(--move));
transition: all .12s ease-in-out
}
.btn-home,.btn-home:active,.btn-home:focus,.btn-home:hover {
text-decoration: none;
}
.btn-home:active,.btn-home:focus,.btn-home:hover {
color: #ffffffc2;
background: #7979792e
}
.btn-home:focus {
--bg-move: -10px;
--bg-l-adjust: 5%
}
.btn-home:hover {
--bg-move: -20px;
--bg-l-adjust: 10%
}
.btn-home:active {
--move: 2px
}
.btn-home--c-darkorange {
--colour-h: var(--colour-darkorange-hue)
}
.btn-home--c-pink-darker {
--colour-h: var(--colour-pink-hue)
}
.btn-home__text {
flex: 1
}
.btn-home__icon {
flex: none;
font-size: 150%
}
.btn-osu-big {
--active-bg: var(--hover-bg);
--active-colour: var(--hover-colour);
--bg: hsl(var(--hsl-h2));
--colour: hsl(var(--hsl-c1));
--disabled-bg: hsl(var(--hsl-b3));
--disabled-colour: hsl(var(--hsl-f1));
--disabled-opacity: 1;
--focus-bg: var(--hover-bg);
--focus-colour: var(--hover-colour);
--hover-bg: hsl(var(--hsl-h1));
--hover-colour: hsl(var(--hsl-c1));
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #2d2d2d78;
border: none;
border-radius: 10px;
color: var(--colour);
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin: 0;
outline: none;
overflow: hidden;
padding: 5px;
text-transform: none;
transition: background-color .12s;
vertical-align: middle;
white-space: nowrap
}
.btn-osu-big,.btn-osu-big:active,.btn-osu-big:focus,.btn-osu-big:hover {
text-decoration: none
}
.btn-osu-big:focus {
background-color: #6e6a6a78;
color: var(--focus-colour)
}
.btn-osu-big:hover {
background-color: #6e6a6a78;
color: var(--hover-colour)
}
.btn-osu-big:active {
background-color: #6e6a6a78;
color: var(--active-colour)
}
.btn-osu-big--disabled,.btn-osu-big[disabled] {
cursor: default;
opacity: var(--disabled-opacity)
}
.btn-osu-big--disabled,.btn-osu-big--disabled:active,.btn-osu-big--disabled:focus,.btn-osu-big--disabled:hover,.btn-osu-big[disabled],.btn-osu-big[disabled]:active,.btn-osu-big[disabled]:focus,.btn-osu-big[disabled]:hover {
background-color: #a29e9e78;
color: #c0c0c0;
}
.btn-osu-big--account-edit {
min-width: 128px;
overflow: hidden;
padding: 7px 10px;
position: relative;
text-align: left
}
.btn-osu-big--account-edit-small {
min-width: 70px
}
.btn-osu-big--artist-track-search {
--disabled-bg: hsl(var(--hsl-b2))
}
.btn-osu-big--beatmapset-header {
height: 45px;
margin: 0 5px 5px 0;
min-width: 120px
}
.btn-osu-big--beatmapset-header-square {
height: 45px;
margin: 0 5px 5px 0;
width: 45px
}
.btn-osu-big--comment-editor {
--disabled-bg: hsl(var(--hsl-b5));
--disabled-colour: hsl(var(--hsl-f1));
border-radius: 10000px;
min-width: 80px;
padding: 5px
}
.btn-osu-big--chat-send {
--bg: hsl(var(--hsl-h2));
--hover-bg: hsl(var(--hsl-h1));
align-self: flex-end;
border-radius: 10000px;
min-width: 80px;
padding: 10px
}
@media (min-width: 900px) {
.btn-osu-big--chat-send {
min-width:130px;
padding: 10px 20px
}
}
.btn-osu-big--contest-download {
height: 45px;
margin: 0 5px 5px 0;
width: 300px
}
.btn-osu-big--contest-download:hover {
background-position: calc(50% - 18px) 50%
}
.btn-osu-big--contest-entries-toolbar {
--bg: transparent;
--colour: hsl(var(--hsl-f1));
--hover-bg: hsl(var(--hsl-b3));
font-size: inherit;
line-height: normal;
margin: 0 10px;
padding: 5px 10px;
text-transform: uppercase;
transition: none
}
.btn-osu-big--danger {
--bg: hsl(var(--hsl-red-3));
--hover-bg: hsl(var(--hsl-red-2))
}
.btn-osu-big--download-landing {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
font-size: 14px;
padding: 10px 5px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-osu-big--download {
--bg-colour: hsl(var(--hsl-blue-3));
--bg: var(--bg-colour) center/150% url(/assets/images/button.16de7c2c.svg);
--hover-bg: var(--bg-colour) calc(50% - 20px) 50%/150% url(/assets/images/button.16de7c2c.svg);
align-items: center;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: inline-flex;
flex: none;
flex-direction: column;
gap: 5px;
justify-content: center;
line-height: 1;
margin-bottom: 5px;
min-width: 240px;
padding: 10px;
transition: background-position .12s
}
.btn-osu-big--download-lazer {
--bg-colour: hsl(var(--hsl-purple-3));
}
.btn-osu-big--fileupload {
overflow: hidden;
position: relative
}
.btn-osu-big--mega {
align-items: center;
display: inline-flex;
font-size: 18px;
height: 50px;
justify-content: center;
width: 100%
}
.btn-osu-big--forum-button {
--active-bg: hsl(var(--hsl-blue-3));
--bg: hsl(var(--hsl-blue-3));
--hover-bg: hsl(var(--hsl-blue-2));
border-radius: 10000px;
vertical-align: middle
}
.btn-osu-big--forum-button,.btn-osu-big--forum-cover {
font-weight: 400;
padding: 8px 15px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-osu-big--forum-cover {
--bg: hsl(var(--hsl-orange-3));
--colour: hsl(var(--hsl-c1));
--disabled-bg: hsl(var(--hsl-orange-3));
--disabled-colour: hsl(var(--hsl-c1));
--disabled-opacity: 0.5;
--hover-bg: hsl(var(--hsl-orange-2));
border-radius: 100000px;
position: relative
}
.btn-osu-big--forum-cover-edit {
margin: 10px 15px;
min-width: 135px
}
.btn-osu-big--forum-primary {
--bg: hsl(var(--hsl-lime-3));
--disabled-bg: hsl(var(--hsl-lime-3));
--disabled-colour: hsl(var(--hsl-c1));
--disabled-opacity: 0.5;
--hover-bg: hsl(var(--hsl-lime-2));
border-radius: 10000px;
font-weight: 400;
padding: 8px 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-osu-big--forum-reply {
--bg: hsl(var(--hsl-l4));
--focus-bg: hsl(var(--hsl-l4));
--hover-bg: hsl(var(--hsl-l3));
border-radius: 10000px;
height: 30px;
margin: 0 3px;
padding: 0 10px
}
.btn-osu-big--forum-secondary {
--bg: hsl(var(--hsl-blue-3));
--disabled-bg: hsl(var(--hsl-blue-3));
--disabled-colour: hsl(var(--hsl-c1));
--disabled-opacity: 0.5;
--hover-bg: hsl(var(--hsl-blue-2));
border-radius: 10000px;
font-weight: 400;
padding: 8px 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-osu-big--full {
width: 100%
}
.btn-osu-big--nav-popup {
height: 35px;
padding: 7px 10px;
text-align: left;
width: 120px
}
.btn-osu-big--password-reset {
padding: 10px;
text-align: center
}
.btn-osu-big--pink {
--bg: hsl(var(--hsl-pink-3));
--hover-bg: hsl(var(--hsl-pink-2))
}
.btn-osu-big--quick-search-close {
border-radius: 10000px;
flex: none;
font-size: 16px;
line-height: normal;
margin-left: 20px;
padding: 10px 30px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-osu-big--rounded {
border-radius: 100000px;
padding: 10px 15px
}
.btn-osu-big--rounded-small {
border-radius: 100000px;
padding: 4px 10px
}
.btn-osu-big--rounded-thin {
border-radius: 100000px;
padding: 8px 15px
}
.btn-osu-big--rounded-thin-wide {
border-radius: 100000px;
padding: 8px 40px
}
.btn-osu-big--store-action {
border-radius: 10000px;
display: block;
font-size: 14px;
line-height: normal;
margin: 0 auto;
max-width: 100%;
padding: 10px 50px;
text-align: center;
width: -moz-max-content;
width: max-content
}
.btn-osu-big--store-cart {
border-radius: 10000px;
margin: 10px 0;
padding: 5px 15px;
width: 100%
}
@media (min-width: 900px) {
.btn-osu-big--store-cart {
margin:0 0 0 auto;
width: auto
}
}
.btn-osu-big--store-cart-delete {
--bg: none;
--disabled-bg: none;
--hover-bg: none;
font-size: 16px;
line-height: normal;
padding: 5px 10px
}
.btn-osu-big--tournament-info {
border-radius: 10000px;
font-size: 16px;
padding: 10px 30px
}
.btn-osu-big--tournament-register {
border-radius: 10000px;
font-size: 16px;
margin-top: 10px;
padding: 10px 40px
}
.btn-osu-big--user-page-edit {
border-radius: 10000px;
padding: 5px 10px;
width: 140px
}
.btn-osu-big--warning {
--bg: hsl(var(--hsl-orange-3));
--hover-bg: hsl(var(--hsl-orange-2))
}
.btn-osu-big--wrap-text {
white-space: normal
}
.btn-osu-big--activated,.btn-osu-big.js-activated {
--bg: hsl(var(--hsl-h2));
--colour: hsl(var(--hsl-c1));
--hover-colour: hsl(var(--hsl-c1))
}
.btn-osu-big.js-click-menu--active {
--bg: var(--hover-bg);
--colour: var(--hover-colour)
}
.btn-osu-big__content {
align-items: center;
display: flex;
height: 100%;
justify-content: space-between;
width: 100%
}
.btn-osu-big__content--center {
justify-content: center
}
.btn-osu-big--account-edit .btn-osu-big__content {
margin: 0 -5px;
width: auto
}
.btn-osu-big--forum-reply .btn-osu-big__content {
top: -1px
}
.btn-osu-big--nav-popup .btn-osu-big__content {
margin: 0 -5px;
width: auto
}
.btn-osu-big__icon {
flex: none;
font-size: 150%;
margin: 0 5px
}
.btn-osu-big--account-edit .btn-osu-big__icon {
display: flex;
flex-direction: column;
height: 0;
justify-content: center
}
.btn-osu-big--chat-send .btn-osu-big__icon,.btn-osu-big__icon .btn-osu-big--comment-editor {
font-size: 120%
}
.btn-osu-big--download-landing .btn-osu-big__icon {
align-items: center;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0,0,0,.5);
display: inline-flex;
font-size: 20px;
height: 40px;
justify-content: center;
margin-left: 20px;
width: 40px
}
.btn-osu-big--nav-popup .btn-osu-big__icon {
display: flex;
flex-direction: column;
height: 0;
justify-content: center
}
.btn-osu-big--forum-reply .btn-osu-big__icon {
margin-right: 0
}
.btn-osu-big__icon-inline {
--margin: 5px
}
.btn-osu-big__icon-inline--left {
margin-right: var(--margin)
}
.btn-osu-big__icon-inline--right {
margin-left: var(--margin)
}
.btn-osu-big__left {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 5px;
text-align: left
}
.btn-osu-big--beatmap-discussion-reply-open .btn-osu-big__left {
margin-right: 20px
}
.btn-osu-big__loading-spinner {
opacity: 0;
position: absolute;
right: 10px
}
.btn-osu-big[data-state=loading] .btn-osu-big__loading-spinner {
opacity: 1
}
.btn-osu-big--download .btn-osu-big__text-top {
font-size: 20px;
font-weight: 700;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-osu-big__text-bottom {
font-size: 10px
}
.btn-osu-big--download .btn-osu-big__text-bottom {
font-size: 12px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.btn-osu-big__toggle {
color: #e0e0e0;
margin: 0 5px
}
.btn-osu-big.js-activated .btn-osu-big__toggle {
color: hsl(var(--hsl-c1));
text-shadow: 0 0 10px hsl(var(--hsl-c2))
}
.build {
color: #fff
}
.build__changelog-entries-category {
font-size: 18px;
font-weight: 700;
padding: 35px 0 15px
}
.build__date {
color: hsl(var(--hsl-l1));
font-size: 14px;
font-weight: 300;
padding-top: 5px;
text-align: center
}
.build__stream {
font-weight: 500
}
.build__version {
display: flex;
font-size: 18px;
font-weight: 300;
justify-content: center;
padding: 20px 0 0
}
.build--build .build__version {
font-size: 24px
}
.build__version-link {
color: #fff;
display: inline-block;
margin: 0 10px;
padding: 0 10px;
text-align: center;
text-decoration: none
}
.build__version-link:active,.build__version-link:focus,.build__version-link:hover {
color: #fff;
text-decoration: none
}
.build__version-link--disabled {
opacity: .5
}
.build__video {
border-radius: 6px;
margin: 20px auto 0;
max-width: 95%;
overflow: hidden
}
.builds__date {
color: #fff;
font-size: 24px;
font-weight: 300;
padding: 20px 0 0;
text-align: center
}
.builds__group {
padding: 0 10px
}
@media (min-width: 900px) {
.builds__group {
padding-left:50px;
padding-right: 50px
}
}
.builds__group+.builds__group {
border-top: 2px solid #111
}
.builds__group--discussions {
padding: 0
}
.builds__item {
padding: 0 0 30px
}
.builds__item+.builds__item {
border-top: 1px solid hsl(var(--hsl-b6))
}
.cart-items {
display: grid;
gap: 5px;
list-style: none;
padding: 0
}
@media (min-width: 480px) {
.cart-items {
grid-template-columns:1fr auto minmax(100px,auto) auto
}
}
.cart-items__item {
display: contents
}
.changelog-chart {
height: 100px;
position: relative
}
.changelog-chart__area--stable,.changelog-chart__area--stable-build-0 {
fill: #6cf;
stroke: #6cf
}
.changelog-chart__area--stable-build-1 {
fill: #9df;
stroke: #9df
}
.changelog-chart__area--stable-build-2 {
fill: #cef;
stroke: #cef
}
.changelog-chart__area--stable-build-3,.changelog-chart__area--stable-build-4,.changelog-chart__area--stable-build-5,.changelog-chart__area--stable-build-6 {
fill: #fff;
stroke: #fff
}
.changelog-chart__area--stable-fallback,.changelog-chart__area--stable-fallback-build-0 {
fill: #29b;
stroke: #29b
}
.changelog-chart__area--stable-fallback-build-1 {
fill: #36b6da;
stroke: #36b6da
}
.changelog-chart__area--stable-fallback-build-2 {
fill: #61c5e2;
stroke: #61c5e2
}
.changelog-chart__area--stable-fallback-build-3 {
fill: #8cd5ea;
stroke: #8cd5ea
}
.changelog-chart__area--stable-fallback-build-4 {
fill: #b7e5f2;
stroke: #b7e5f2
}
.changelog-chart__area--stable-fallback-build-5 {
fill: #e2f5fa;
stroke: #e2f5fa
}
.changelog-chart__area--stable-fallback-build-6 {
fill: #fff;
stroke: #fff
}
.changelog-chart__area--cutting-edge,.changelog-chart__area--cutting-edge-build-0 {
fill: #ea0;
stroke: #ea0
}
.changelog-chart__area--cutting-edge-build-1 {
fill: #ffc022;
stroke: #ffc022
}
.changelog-chart__area--cutting-edge-build-2 {
fill: #ffce55;
stroke: #ffce55
}
.changelog-chart__area--cutting-edge-build-3 {
fill: #fd8;
stroke: #fd8
}
.changelog-chart__area--cutting-edge-build-4 {
fill: #ffecbb;
stroke: #ffecbb
}
.changelog-chart__area--cutting-edge-build-5 {
fill: #fffaee;
stroke: #fffaee
}
.changelog-chart__area--cutting-edge-build-6 {
fill: #fff;
stroke: #fff
}
.changelog-chart__area--beta,.changelog-chart__area--beta-build-0 {
fill: #fd5;
stroke: #fd5
}
.changelog-chart__area--beta-build-1 {
fill: #ffe788;
stroke: #ffe788
}
.changelog-chart__area--beta-build-2 {
fill: #fff1bb;
stroke: #fff1bb
}
.changelog-chart__area--beta-build-3 {
fill: #fffcee;
stroke: #fffcee
}
.changelog-chart__area--beta-build-4,.changelog-chart__area--beta-build-5,.changelog-chart__area--beta-build-6 {
fill: #fff;
stroke: #fff
}
.changelog-chart__area--lazer,.changelog-chart__area--lazer-build-0 {
fill: #ed1221;
stroke: #ed1221
}
.changelog-chart__area--lazer-build-1 {
fill: #f1414d;
stroke: #f1414d
}
.changelog-chart__area--lazer-build-2 {
fill: #f4717a;
stroke: #f4717a
}
.changelog-chart__area--lazer-build-3 {
fill: #f8a0a6;
stroke: #f8a0a6
}
.changelog-chart__area--lazer-build-4 {
fill: #fbd0d3;
stroke: #fbd0d3
}
.changelog-chart__area--lazer-build-5,.changelog-chart__area--lazer-build-6 {
fill: #fff;
stroke: #fff
}
.changelog-chart__area--lazer-experimental,.changelog-chart__area--lazer-experimental-build-0 {
fill: #ed1221;
stroke: #ed1221
}
.changelog-chart__area--lazer-experimental-build-1 {
fill: #f1414d;
stroke: #f1414d
}
.changelog-chart__area--lazer-experimental-build-2 {
fill: #f4717a;
stroke: #f4717a
}
.changelog-chart__area--lazer-experimental-build-3 {
fill: #f8a0a6;
stroke: #f8a0a6
}
.changelog-chart__area--lazer-experimental-build-4 {
fill: #fbd0d3;
stroke: #fbd0d3
}
.changelog-chart__area--lazer-experimental-build-5,.changelog-chart__area--lazer-experimental-build-6 {
fill: #fff;
stroke: #fff
}
.changelog-chart__hover-area {
fill: none;
pointer-events: all
}
.changelog-chart__tooltip-area {
bottom: 0;
display: flex;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0
}
.changelog-chart__tooltip-container {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 100%
}
.changelog-chart__tooltip {
background: rgba(0,0,0,.5);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5px 8px;
text-align: center
}
.changelog-chart__text--name {
font-size: 14px;
font-weight: 500
}
.changelog-chart__text--user-count {
color: #fff;
font-size: 15px;
font-weight: 500
}
.changelog-chart__text--date {
color: #fff;
font-size: 10px;
font-weight: 700
}
.changelog-chart__text--stable,.changelog-chart__text--stable-build-0 {
color: #6cf
}
.changelog-chart__text--stable-build-1 {
color: #9df
}
.changelog-chart__text--stable-build-2 {
color: #cef
}
.changelog-chart__text--stable-build-3,.changelog-chart__text--stable-build-4,.changelog-chart__text--stable-build-5,.changelog-chart__text--stable-build-6 {
color: #fff
}
.changelog-chart__text--stable-fallback,.changelog-chart__text--stable-fallback-build-0 {
color: #29b
}
.changelog-chart__text--stable-fallback-build-1 {
color: #36b6da
}
.changelog-chart__text--stable-fallback-build-2 {
color: #61c5e2
}
.changelog-chart__text--stable-fallback-build-3 {
color: #8cd5ea
}
.changelog-chart__text--stable-fallback-build-4 {
color: #b7e5f2
}
.changelog-chart__text--stable-fallback-build-5 {
color: #e2f5fa
}
.changelog-chart__text--stable-fallback-build-6 {
color: #fff
}
.changelog-chart__text--cutting-edge,.changelog-chart__text--cutting-edge-build-0 {
color: #ea0
}
.changelog-chart__text--cutting-edge-build-1 {
color: #ffc022
}
.changelog-chart__text--cutting-edge-build-2 {
color: #ffce55
}
.changelog-chart__text--cutting-edge-build-3 {
color: #fd8
}
.changelog-chart__text--cutting-edge-build-4 {
color: #ffecbb
}
.changelog-chart__text--cutting-edge-build-5 {
color: #fffaee
}
.changelog-chart__text--cutting-edge-build-6 {
color: #fff
}
.changelog-chart__text--beta,.changelog-chart__text--beta-build-0 {
color: #fd5
}
.changelog-chart__text--beta-build-1 {
color: #ffe788
}
.changelog-chart__text--beta-build-2 {
color: #fff1bb
}
.changelog-chart__text--beta-build-3 {
color: #fffcee
}
.changelog-chart__text--beta-build-4,.changelog-chart__text--beta-build-5,.changelog-chart__text--beta-build-6 {
color: #fff
}
.changelog-chart__text--lazer,.changelog-chart__text--lazer-build-0 {
color: #ed1221
}
.changelog-chart__text--lazer-build-1 {
color: #f1414d
}
.changelog-chart__text--lazer-build-2 {
color: #f4717a
}
.changelog-chart__text--lazer-build-3 {
color: #f8a0a6
}
.changelog-chart__text--lazer-build-4 {
color: #fbd0d3
}
.changelog-chart__text--lazer-build-5,.changelog-chart__text--lazer-build-6 {
color: #fff
}
.changelog-chart__text--lazer-experimental,.changelog-chart__text--lazer-experimental-build-0 {
color: #ed1221
}
.changelog-chart__text--lazer-experimental-build-1 {
color: #f1414d
}
.changelog-chart__text--lazer-experimental-build-2 {
color: #f4717a
}
.changelog-chart__text--lazer-experimental-build-3 {
color: #f8a0a6
}
.changelog-chart__text--lazer-experimental-build-4 {
color: #fbd0d3
}
.changelog-chart__text--lazer-experimental-build-5,.changelog-chart__text--lazer-experimental-build-6 {
color: #fff
}
.changelog-chart__tooltip-line {
background-color: #fff;
flex-grow: 1;
width: 1px
}
.changelog-entry {
display: flex;
flex-direction: column;
font-size: 16px;
padding: 5px 0 5px 1em
}
@media (min-width: 900px) {
.changelog-entry {
padding-left:0
}
}
.changelog-entry__icon {
font-size: .7em;
opacity: .5
}
.changelog-entry__row {
word-wrap: break-word
}
.changelog-entry__row--message {
margin-top: 8px
}
.changelog-entry__title--major {
color: #fc2
}
.changelog-entry__title code {
background-color: hsl(var(--hsl-b5));
border-radius: 4px;
padding: 1px 4px
}
.changelog-entry__title-icon {
margin-left: -1em;
position: absolute
}
.changelog-entry__user {
font-size: 12px;
padding-left: 10px
}
.changelog-entry__user-link {
font-weight: 700
}
.changelog-md {
font-family: var(--font-content-override,var(--font-content));
font-size: 12px;
line-height: 1.35
}
.changelog-md img {
max-width: 100%
}
.changelog-md__header {
color: inherit;
font-size: 14px;
font-style: normal;
font-weight: 700;
margin: 5px 0
}
.changelog-md__header--1 {
font-size: 16px
}
.changelog-md__list {
padding-left: 20px
}
.changelog-md__table {
margin-bottom: 20px;
overflow-x: auto
}
.changelog-md__table-data {
border-top: 1px solid hsl(var(--hsl-b3));
min-width: 30px;
padding: 5px
}
.changelog-md__table-data--center {
text-align: center
}
.changelog-md__table-data--header {
border-bottom: 2px solid hsl(var(--hsl-b2));
border-top: none;
font-weight: 700
}
.changelog-md__table-data--left {
text-align: left
}
.changelog-md__table-data--right {
text-align: right
}
.chat {
font-size: 14px;
width: 100%
}
@media (max-width: 899px) {
.chat {
flex-direction:column
}
}
.chat-conversation {
-webkit-overflow-scrolling: touch;
background: #00000014;
flex: 1;
flex-direction: column;
overflow-y: auto;
padding: 10px 20px
}
.chat-conversation:after {
content: "";
display: block;
padding-bottom: 80px
}
.chat-conversation--no-input.chat-conversation:after {
display: none
}
@media (max-width: 899px) {
.chat-conversation {
padding:10px 0
}
}
.chat-conversation__chat-label {
color: #fff;
font-size: 10px;
font-weight: 700;
margin: 0 20px;
overflow-wrap: break-word;
text-align: center;
text-transform: uppercase
}
.chat-conversation__new-chat-avatar {
align-items: center;
display: inline-flex;
justify-content: center;
margin: 10px 0;
width: 100%
}
.chat-conversation__day-divider {
font-size: 10px;
font-weight: 700;
padding-top: 20px;
text-align: center;
text-transform: uppercase
}
.chat-conversation__cannot-message {
color: hsl(var(--hsl-l1));
font-size: 10px;
margin-top: 10px;
padding: 5px;
text-align: center
}
.chat-conversation__limitation-notice {
color: hsl(var(--hsl-f1));
font-size: 14px;
margin-top: 10px;
padding: 5px;
text-align: center
}
.chat-conversation__more-users {
display: flex;
justify-content: center;
width: 100%
}
.chat-conversation__unread-marker {
border: 0;
color: hsl(var(--hsl-h1));
font-size: 10px;
height: 1.5em;
line-height: 1em;
margin: 5px 100px;
outline: 0;
position: relative;
text-align: center
}
.chat-conversation__unread-marker:before {
background: white;
content: "";
height: 1px;
left: 0;
position: absolute;
top: 50%;
width: 100%
}
.chat-conversation__unread-marker:after {
background-color: #dadada;
color: black;
content: attr(data-content);
display: inline-block;
line-height: 1.7em;
padding: 0 .5em;
position: relative;
border-radius: 20px;
font-size: 11px
}
.chat-conversation__users {
align-content: center;
display: flex;
flex-wrap: wrap;
gap: 2px;
justify-content: center
}
.chat-conversation__users--loading {
gap: 5px
}
.chat-conversation__users-container {
background-color: hsl(var(--hsl-b5));
border-radius: 4px;
display: grid;
gap: 5px;
margin: 10px;
padding: 5px
}
.chat-conversation-list {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
width: 270px
}
@media (min-width: 900px) {
.chat-conversation-list {
padding:0 0 10px
}
}
@media (max-width: 899px) {
.chat-conversation-list {
display:flex;
overflow-x: auto;
width: 100vw
}
.chat-conversation-list__group {
display: flex
}
}
.chat-conversation-list__header {
background: #00000014;
color: hsl(var(--hsl-c1));
display: flex;
font-size: 12px;
gap: 5px;
left: 0;
padding: 10px 30px;
position: sticky;
top: 0;
z-index: 1
}
@media (max-width: 899px) {
.chat-conversation-list__header {
padding:5px
}
}
.chat-conversation-list__header-text {
text-transform: uppercase
}
@media (max-width: 899px) {
.chat-conversation-list__header-text {
display:none
}
.chat-conversation-list__header-icon {
align-self: center
}
}
.chat-conversation-list__layer {
transform: translateZ(0)
}
@media (max-width: 899px) {
.chat-conversation-list__layer {
display:flex;
flex-direction: row
}
}
.chat-conversation-list-item {
align-items: center;
color: #fff;
display: flex;
font-size: 14px;
height: 40px;
margin-left: 10px;
padding-left: 10px;
position: relative
}
@media (min-width: 900px) {
.chat-conversation-list-item:hover {
background: linear-gradient(to right, #93939329 ,#bdbdbd08 50%);
border-radius: 20px;
}
}
@media (max-width: 899px) {
.chat-conversation-list-item {
margin-left:0;
padding-left: 0
}
}
.chat-conversation-list-item--selected {
background: linear-gradient(to right, #ffffff29 ,#ffffff08 50%);
color: #fff;
border-radius: 20px
}
@media (max-width: 899px) {
.chat-conversation-list-item--selected {
background: linear-gradient(to right, #ffffff29 ,#ffffff08 50%);
color: #fff;
}
}
.chat-conversation-list-item__close-button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsla(0,0%,100%,.5);
margin: 0;
outline: none;
padding: 5px
}
.chat-conversation-list-item__close-button:hover {
color: #fff
}
@media (min-width: 900px) {
.chat-conversation-list-item__close-button {
height:100%;
margin-left: -10px;
opacity: 0;
position: absolute
}
.chat-conversation-list-item:hover .chat-conversation-list-item__close-button {
opacity: 1;
}
}
@media (max-width: 899px) {
.chat-conversation-list-item__close-button {
display:none
}
.chat-conversation-list-item--selected .chat-conversation-list-item__close-button {
display: block;
margin-left: 5px
}
}
.chat-conversation-list-item__tile {
align-items: center;
align-self: stretch;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: flex;
flex: 1;
margin: 0 0 0 10px;
min-width: 0;
outline: none;
padding: 0
}
@media (max-width: 899px) {
.chat-conversation-list-item__tile {
margin-left:4px
}
}
.chat-conversation-list-item__unread-indicator {
background: #88b300;
border-radius: 1px;
height: 10px;
pointer-events: none;
position: absolute;
width: 2px
}
.chat-conversation-list-item__unread-indicator:after {
animation: glow-pulse 2s infinite;
border-radius: 1px;
box-shadow: 0 0 5px #afe600;
content: "";
height: 100%;
left: 0;
opacity: .5;
position: absolute;
top: 0;
width: 100%
}
@media (min-width: 900px) {
.chat-conversation-list-item__unread-indicator {
margin-left:-2px
}
.chat-conversation-list-item:hover .chat-conversation-list-item__unread-indicator {
opacity: 0
}
}
@media (max-width: 899px) {
.chat-conversation-list-item__unread-indicator {
margin-left:2px
}
}
.chat-conversation-list-item__name {
flex: 1;
text-align: left
}
@media (max-width: 899px) {
.chat-conversation-list-item__name {
display:none
}
.chat-conversation-list-item--selected .chat-conversation-list-item__name {
display: block;
padding-right: 10px
}
}
.chat-conversation-list-item__chevron {
color: #fff;
margin-right: 10px;
opacity: 0
}
.chat-conversation-list-item--selected .chat-conversation-list-item__chevron {
opacity: 1
}
@media (max-width: 899px) {
.chat-conversation-list-item__chevron {
display:none
}
}
.chat-conversation-list-item__avatar {
flex-shrink: 0;
height: 30px;
margin-right: 10px;
width: 30px
}
@media (max-width: 899px) {
.chat-conversation-list-item__avatar {
margin:0 5px
}
}
.chat-conversation-list-separator {
background: hsl(var(--hsl-l1));
border-radius: 1px;
flex-shrink: 0
}
@media (min-width: 900px) {
.chat-conversation-list-separator {
display:none
}
}
@media (max-width: 899px) {
.chat-conversation-list-separator {
align-self:center;
height: 20px;
margin: 0 5px;
width: 2px
}
}
.chat-conversation-list-separator:last-child {
display: none
}
.chat-conversation-panel {
display: flex;
flex: 1;
flex-direction: column;
position: relative
}
@media (max-width: 899px) {
.chat-conversation-panel {
overflow-y:hidden
}
}
.chat-conversation-panel__instructions {
margin-top: 10px
}
.chat-conversation-panel__no-channel {
align-items: center;
color: hsl(var(--hsl-l1));
display: inline-flex;
flex-direction: column;
height: 100%;
justify-content: center;
min-height: 250px;
padding: 20px;
width: 100%
}
.chat-conversation-panel__title {
color: #fff;
font-size: 26px;
font-weight: 300;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.chat-form {
background: hsl(var(--hsl-b4));
display: flex;
flex: 1;
flex-direction: column
}
.chat-form__button-bar {
display: flex;
justify-content: flex-end
}
.chat-form__fields {
display: flex;
flex: 1;
flex-direction: column;
font-size: 16px;
gap: 10px;
padding: 20px 20px 10px
}
.chat-form__title {
font-size: 24px
}
.chat-form-users {
display: flex;
flex-wrap: wrap;
gap: 2px;
justify-content: flex-start;
min-width: 0
}
.chat-input {
align-items: center;
background: #0000004d;
bottom: 0;
color: #fff;
display: flex;
padding: 10px 30px 15px 50px;
position: absolute;
text-align: right;
width: calc(100% - 20px);
border-radius: 20px;
height: 60px
}
@media (max-width: 899px) {
.chat-input {
font-size:16px;
padding-left: 20px;
padding-right: 0;
position: fixed
}
}
.chat-input__box {
-webkit-appearance: none;
-moz-appearance: none;
background: #00000026;
border: none;
border-radius: 20px;
flex: 1;
font-family: Inter,sans-serif;
margin: 0 10px 0 0;
max-height: 100%;
max-width: 100%;
min-width: 0;
outline: none;
padding: 10px;
resize: none
}
.chat-input__box--disabled {
opacity: .8
}
.chat-join-channel {
background: hsl(var(--hsl-b4));
display: flex;
flex-direction: column;
height: 100%
}
.chat-join-channel__channel {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-l3));
display: grid;
grid-column: span 3;
grid-template-columns: subgrid;
margin: 0;
outline: none;
padding: 5px 10px;
text-align: left;
text-decoration: none
}
.chat-join-channel__channel:active,.chat-join-channel__channel:focus,.chat-join-channel__channel:hover {
background-color: hsl(var(--hsl-b3));
color: hsl(var(--hsl-c1));
text-decoration: none
}
.chat-join-channel__channel--joined {
color: hsl(var(--hsl-c1))
}
.chat-join-channel__channels {
-moz-column-gap: 10px;
column-gap: 10px;
display: grid;
grid-template-columns: minmax(14px,max-content) auto 1fr;
overflow-wrap: anywhere;
overflow-y: auto
}
.chat-join-channel__loading {
align-items: center;
display: inline-flex;
flex: 1;
flex-direction: column;
justify-content: center
}
.chat-message-group {
color: #fff;
display: flex;
margin: 10px 120px 10px 0
}
.chat-message-group--own {
flex-direction: row-reverse;
margin-left: 120px;
margin-right: 0
}
.chat-message-group__avatar {
height: 35px;
margin-bottom: 5px;
width: 35px
}
.chat-message-group__bubble {
background: #00000014;
border-radius: 4px;
max-width: 400px;
overflow-x: auto;
padding: 5px 8px
}
.chat-conversation--ANNOUNCE .chat-message-group__bubble {
max-width: unset
}
.chat-message-group__sender {
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
flex-shrink: 0;
font-size: 10px;
width: 80px
}
.chat-message-group__timestamp {
color: #e3e3e3;
font-family: Inter,sans-serif;
font-size: 10px;
margin: 5px
}
.chat-message-group__username {
max-width: 60px
}
.chat-message-item {
margin: 5px
}
.chat-message-item--sending {
opacity: .2
}
.chat-message-item__entry {
display: flex;
justify-content: space-between
}
.chat-message-item__status {
color: hsla(var(--hsl-h1),.5);
margin-left: 10px
}
.chat-message-item__status--errored {
color: red
}
.circular-progress {
--circle-center-fill: hsl(var(--hsl-b6));
--circle-transform: rotate(0turn);
--circle-fill-transform: rotate(0turn);
--slice-clip: rect(0em,1em,1em,0.5em);
--circle-border-colour: white;
--label-colour: hsl(var(--hsl-h1));
--label-display: block;
background-color: hsl(var(--hsl-b4));
border-radius: 50%;
float: left;
font-size: 31px;
height: 1em;
pointer-events: auto;
width: 1em
}
.circular-progress--warn {
--circle-border-colour: hsl(var(--hsl-orange-2));
--label-colour: hsl(var(--hsl-orange-2))
}
.circular-progress--over {
--circle-border-colour: hsl(var(--hsl-red-2));
--label-colour: hsl(var(--hsl-red-2))
}
.circular-progress--lighter {
--circle-center-fill: hsl(var(--hsl-b5));
background-color: hsl(var(--hsl-b3))
}
.circular-progress--over50 {
--circle-fill-transform: rotate(0.5turn);
--slice-clip: rect(auto,auto,auto,auto)
}
.circular-progress--beatmapset-panel {
--circle-center-fill: transparent;
--label-display: none;
--circle-transform: rotate(calc(var(--progress)*1turn));
background-color: transparent;
font-size: 50px;
pointer-events: none
}
[data-audio-over50="1"] .circular-progress--beatmapset-panel {
--circle-fill-transform: rotate(0.5turn);
--slice-clip: rect(auto,auto,auto,auto)
}
.circular-progress--gallery-contest {
--circle-border-colour: #fff;
--label-colour: #fff
}
.circular-progress:after {
background-color: var(--circle-center-fill);
border-radius: 50%;
content: "";
display: block;
height: .8em;
margin-left: .1em;
margin-top: .1em;
position: absolute;
width: .8em
}
.circular-progress__label {
color: var(--label-colour);
display: var(--label-display);
font-size: .4em;
line-height: 2.5em;
position: absolute;
text-align: center;
white-space: nowrap;
width: 2.5em;
z-index: 1
}
.circular-progress__circle {
clip: rect(0,.5em,1em,0);
border: .1em solid var(--circle-border-colour);
border-radius: 50%;
height: 1em;
position: absolute;
transform: var(--circle-transform);
width: 1em
}
.circular-progress__circle--fill {
transform: var(--circle-fill-transform)
}
.circular-progress__slice {
clip: var(--slice-clip);
height: 1em;
position: absolute;
width: 1em
}
.click-to-copy__icon {
color: #999;
cursor: pointer;
opacity: 0;
padding-left: 5px
}
.click-to-copy:hover .click-to-copy__icon {
opacity: 1
}
.comment {
border-bottom: 0 solid var(--comments-separator-bg);
font-size: 13px;
margin-top: 10px;
position: relative
}
.comment--top {
border-bottom-width: 1px;
margin-top: 0;
padding: 15px 10px
}
.comment--single.comment--top,.comment--top:last-of-type {
border-bottom-width: 0
}
@media (min-width: 900px) {
.comment--top {
padding-left:50px;
padding-right: 50px
}
}
.comment__action {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
outline: none;
padding: 0;
text-transform: lowercase
}
.comment__action:active,.comment__action:focus,.comment__action:hover {
color: hsl(var(--hsl-l1));
color: #fff
}
.comment__action:hover {
text-decoration: underline
}
.comment__action--active {
color: hsl(var(--hsl-l1))
}
.comment__avatar {
flex: none;
height: 40px;
margin-right: 10px;
width: 40px
}
.comment__commentable-meta {
align-items: baseline;
display: flex;
font-size: 11px;
margin-bottom: 5px;
margin-left: 50px
}
.comment--single .comment__commentable-meta {
flex-direction: column;
font-size: 24px;
margin-bottom: 30px;
margin-left: 0
}
.comment__commentable-meta-icon {
font-size: .9em;
margin-right: 5px
}
.comment__commentable-meta-type {
background-color: hsl(var(--hsl-b6));
border-radius: 10000px;
font-size: 12px;
margin-right: 5px;
padding: 5px 15px
}
.comment--single .comment__commentable-meta-type {
margin-bottom: 10px
}
.comment__container {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0
}
.comment__deleted {
font-weight: 700;
margin: 10px 0
}
.comment__editor {
padding: 10px 0
}
.comment__float-container {
align-items: center;
display: flex;
height: 40px;
padding: 0 5px;
position: absolute;
top: 0
}
.comment__float-container--left {
justify-content: flex-end;
left: -50px;
width: 50px
}
.comment--top>.comment__float-container--left {
left: 0
}
.comment__float-container--right {
justify-content: flex-start;
right: -50px;
width: 50px
}
.comment--top>.comment__float-container--right {
right: 0
}
.comment__main {
display: flex;
position: relative
}
.comment__main--deleted {
opacity: .5
}
.comment__message {
margin: 2px 0
}
.comment__main--clip .comment__message {
height: calc(var(--line-height)*var(--clip-lines));
overflow: hidden;
position: relative
}
.comment__main--clip .comment__message:after {
background-image: linear-gradient(to bottom,hsla(var(--comments-bg-hsl),0),hsl(var(--comments-bg-hsl)));
bottom: 0;
content: "";
display: block;
height: calc(var(--line-height)*3);
left: 0;
pointer-events: none;
position: absolute;
width: 100%
}
.comment__owner-badge {
background-color: hsl(var(--hsl-l1));
border-radius: 10000px;
bottom: 2px;
color: hsl(var(--hsl-b6));
font-size: 10px;
font-weight: 700;
padding: 2px 5px
}
.comment__replies {
margin-top: 10px
}
.comment__replies--hidden {
display: none
}
.comment__replies--indented {
padding-left: 0
}
@media (min-width: 900px) {
.comment__replies--indented {
padding-left:20px
}
}
.comment__reply-box {
padding-top: 10px
}
.comment__row {
align-items: baseline;
display: flex;
flex-wrap: wrap;
font-weight: 600;
gap: 4px
}
.comment__row--footer {
-moz-column-gap: 10px;
column-gap: 10px;
font-size: 12px
}
.comment__row--footer,.comment__row--footer a {
color: #bebebe;
}
.comment__row--footer a:active,.comment__row--footer a:focus,.comment__row--footer a:hover {
color: #fff
}
.comment__row--header {
font-size: 14px
}
.comment__row-item--info {
font-weight: 400
}
.comment__row-item--pinned .fa {
vertical-align: middle
}
.comment__row-item--replies {
width: 100%
}
.comment__toggle-clip {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-l2));
margin: 0;
outline: none;
padding: 5px 0;
width: -moz-max-content;
width: max-content
}
.comment__toggle-clip:active,.comment__toggle-clip:focus,.comment__toggle-clip:hover {
color: hsl(var(--hsl-l1))
}
.comment__toolbar {
display: flex;
justify-content: flex-end;
margin: 10px 0
}
.comment__top-show-replies {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: none;
font-size: 18px;
margin: 0;
outline: none;
padding: 0;
width: 40px
}
@media (min-width: 900px) {
.comment__top-show-replies {
display:block
}
.comment--single .comment__top-show-replies {
display: none
}
}
.comment-editor {
--bg: #00000014;
background: var(--bg);
border-radius: 6px;
display: flex;
flex-direction: column;
position: relative
}
@media (min-width: 900px) {
.comment-editor--fancy {
margin-left:60px
}
}
.comment-editor__avatar {
display: none;
height: 50px;
margin-right: 10px;
position: absolute;
right: 100%;
width: 50px
}
@media (min-width: 900px) {
.comment-editor__avatar {
display:block
}
}
.comment-editor__footer {
border-radius: 0 0 6px 6px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding: 0 8px
}
.comment-editor__footer-item {
color: #fff;
flex: none;
font-size: 12px;
margin: 5px 2px
}
.comment-editor__footer-item--notice {
align-self: center;
flex: 1
}
.comment-editor__message {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
font-family: var(--font-content-override,var(--font-content));
font-size: 16px;
line-height: 1.35;
margin: 0;
min-height: 3em;
outline: none;
padding: 10px;
resize: none
}
@media (min-width: 900px) {
.comment-editor__message {
font-size:inherit
}
}
.comment-editor__message::placeholder {
color: #b1b1b1;
}
.comment-show-more {
display: block;
font-size: 12px
}
.comment-show-more--top {
padding: 10px
}
@media (min-width: 900px) {
.comment-show-more--top {
padding-left:50px;
padding-right: 50px
}
}
.comment-show-more__link {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-l2));
margin: 0;
outline: none;
padding: 0
}
.comment-show-more__link:active,.comment-show-more__link:focus,.comment-show-more__link:hover {
color: hsl(var(--hsl-l1))
}
.comment-vote {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: hsl(var(--hsl-b6));
border: 2px solid transparent;
border-radius: 100000px;
display: flex;
font-size: 12px;
justify-content: center;
margin: 0;
outline: none;
padding: 2px 10px;
position: relative
}
.comment-vote:not([disabled]):hover {
border-color: #b3d944
}
.comment-vote--disabled {
background-color: transparent
}
.comment-vote--inline {
display: inline-flex;
font-size: inherit;
padding: 0 8px
}
.comment-vote--on {
background-color: #b3d944;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.comment-vote--on:not([disabled]):hover {
background-color: rgba(179,217,68,.5)
}
.comment-vote__hover {
bottom: 100%;
color: #88b300;
display: flex;
font-size: 14px;
justify-content: center;
left: 0;
margin-bottom: 2px;
opacity: 0;
padding-right: 5px;
position: absolute;
text-shadow: none;
width: 100%;
will-change: opacity
}
.comment-vote:not([disabled]):hover .comment-vote__hover {
opacity: 1
}
.comment-vote__spinner {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.comment-vote--posting .comment-vote__text {
opacity: 0
}
.comments {
--comments-bg-hsl: var(--hsl-b5);
--comments-fg: hsl(var(--hsl-c1));
--comments-pinned-bg-hsl: var(--hsl-b4);
--comments-separator-bg: hsl(var(--hsl-b6));
--comments-toolbar-bg: hsl(var(--hsl-b4));
background-color: hsl(var(--comments-bg-hsl));
color: var(--comments-fg);
display: flex;
flex-direction: column
}
.comments--page-extra {
--comments-bg-hsl: var(--hsl-b4);
--comments-pinned-bg-hsl: var(--hsl-b3);
--comments-separator-bg: hsl(var(--hsl-b5));
--comments-toolbar-bg: hsl(var(--hsl-b3));
background-color: transparent
}
@media (min-width: 900px) {
.comments--page-extra {
margin-bottom:0
}
}
.comments__count {
background-color: #32323252;
border-radius: 10000px;
color: #9d9d9d;
font-size: 80%;
font-weight: 700;
margin-left: 5px;
padding: 5px 10px
}
.comments__items {
padding: 10px 0
}
.comments__items--empty {
padding: 40px 10px
}
@media (min-width: 900px) {
.comments__items--empty {
padding-left:50px;
padding-right: 50px
}
}
.comments__items--loading {
opacity: .5
}
.comments__items--toolbar {
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.comments__items--toolbar {
padding-left:50px;
padding-right: 50px
}
}
.comments__items--pinned {
--comments-bg-hsl: var(--comments-pinned-bg-hsl);
background-color: hsl(var(--comments-bg-hsl));
margin-top: 20px
}
.comments__new {
padding: 20px 10px
}
@media (min-width: 900px) {
.comments__new {
padding-left:50px;
padding-right: 50px
}
}
.comments__title {
font-size: 18px;
font-style: normal;
margin: 0;
padding: 20px 10px 0
}
@media (min-width: 900px) {
.comments__title {
padding-left:50px;
padding-right: 50px
}
}
.contest {
background-color: hsl(var(--hsl-b5));
color: hsl(var(--hsl-c1))
}
.contest__description {
background-color: hsl(var(--hsl-b4));
font-family: var(--font-content-override,var(--font-content));
font-size: 14px;
line-height: 1.35;
padding: 20px 10px
}
@media (min-width: 900px) {
.contest__description {
padding-left:50px;
padding-right: 50px
}
}
.contest__description h2,.contest__description h3,.contest__description h4,.contest__description h5,.contest__description h6,.contest__description>h1 {
color: hsl(var(--hsl-c1))
}
.contest__countdown-timer {
background-color: hsl(var(--hsl-b4));
margin-top: -10px;
padding-bottom: 20px
}
.contest__voting-notice {
color: #fff;
padding: 20px;
text-align: center
}
.contest__accordion {
background: hsl(var(--hsl-b5));
padding: 20px
}
.contest__group {
background: hsl(var(--hsl-b4));
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
margin: 10px auto;
max-width: 600px
}
.contest__art-list {
padding: 0 20px
}
.contest__group-heading {
color: #fff;
display: flex;
justify-content: space-between;
padding: 10px
}
.contest__group-heading:active,.contest__group-heading:hover,.contest__group-heading:link,.contest__group-heading:visited {
color: #fff;
text-decoration: none
}
.contest__section-toggle {
transform: rotate(0deg);
transition: all .3s
}
.contest__group-heading[aria-expanded=true] .contest__section-toggle {
transform: rotate(180deg)
}
.contest__buttons {
padding: 20px 0;
text-align: center
}
.contest__vote-summary--art {
align-items: center;
display: flex;
font-size: 10px;
justify-content: flex-end;
margin-bottom: 5px;
padding-top: 10px;
text-align: right
}
.contest__vote-summary-text {
align-items: center;
color: hsl(var(--hsl-f1));
display: flex;
float: right;
font-weight: 700;
height: 16px;
text-transform: uppercase;
width: 32px
}
.contest__vote-summary-text--art {
margin-right: 10px;
width: inherit
}
.contest__vote-count {
align-items: center;
background-color: hsl(var(--hsl-b6));
display: flex;
flex: 0 0 110px;
font-size: 11px;
justify-content: flex-end;
padding-right: 5px;
text-align: right
}
.contest__vote-count--no-percentages {
flex: 0 0 70px
}
.contest__voting-star {
align-items: center;
color: rgba(1,1,1,.5);
display: flex;
display: inline-flex;
flex: 0 0 32px;
justify-content: center;
margin-left: auto
}
.contest__voting-star:focus,.contest__voting-star:hover {
color: rgba(1,1,1,.75);
font-size: inherit;
text-decoration: none
}
.contest__voting-star--art {
flex: none;
margin: auto 0 0 auto;
padding: 10%;
position: relative
}
.contest__voting-star--dark-bg {
background-color: hsl(var(--hsl-b6))
}
.contest__voting-star--selected {
color: orange;
font-size: inherit
}
.contest__voting-star--selected:focus,.contest__voting-star--selected:hover {
color: rgba(255,165,0,.75)
}
.contest__voting-star--selected-art {
color: #fff;
font-size: inherit
}
.contest__voting-star--selected-art:focus,.contest__voting-star--selected-art:hover {
color: hsla(0,0%,100%,.5)
}
.contest__voting-star--smaller {
height: 16px;
width: 16px
}
.contest__voting-star--float-right {
float: right
}
.contest__voting-star--spin {
animation: spin-w-easing 1s ease-in-out infinite
}
.contest-art-entry {
--thumbnail-border-colour: transparent;
--thumbnail-height-multiplier: 1;
--thumbnail-scale: 1;
--thumbnail-size: 256px;
--thumbnail-width-multiplier: 1;
--trophy-colour: #d2691e;
--vote-link-banner-bg: hsl(var(--hsl-b2));
--vote-link-banner-scale: 1;
margin: 10px;
transform: translateZ(0);
width: calc(var(--thumbnail-size)*var(--thumbnail-scale)*var(--thumbnail-width-multiplier))
}
.contest-art-entry--placed-1 {
--thumbnail-scale: 1;
--trophy-colour: gold;
--vote-link-banner-scale: 1
}
.contest-art-entry--placed-2 {
--thumbnail-scale: 0.75;
--trophy-colour: silver;
--vote-link-banner-scale: 1
}
.contest-art-entry--placed-3 {
--thumbnail-scale: 0.5;
--vote-link-banner-scale: 0.5
}
.contest-art-entry--portrait {
--thumbnail-width-multiplier: 0.75
}
.contest-art-entry--landscape {
--thumbnail-height-multiplier: 0.5625
}
.contest-art-entry--selected {
--thumbnail-border-colour: orange;
--vote-link-banner-bg: var(--thumbnail-border-colour)
}
.contest-art-entry--smaller {
--thumbnail-scale: 0.5;
--vote-link-banner-scale: 0.5
}
.contest-art-entry__entrant {
color: #fff;
font-size: 12px;
overflow: hidden;
text-align: right;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap
}
.contest-art-entry__entrant:active,.contest-art-entry__entrant:focus,.contest-art-entry__entrant:hover {
color: #fff
}
.contest-art-entry--placed .contest-art-entry__entrant {
font-size: 14px;
overflow: visible
}
.contest-art-entry__result {
margin-top: 10px;
text-align: center
}
.contest-art-entry__result-name {
display: block
}
.contest-art-entry__result-place {
padding-right: 5px
}
.contest-art-entry--placed .contest-art-entry__result-place {
font-size: 20px;
white-space: nowrap
}
.contest-art-entry__result-ranking {
align-items: baseline;
display: flex;
justify-content: center
}
.contest-art-entry__result-votes {
color: hsl(var(--hsl-f1));
font-size: 10px
}
.contest-art-entry__thumbnail {
background-position: top;
background-size: cover;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
height: calc(var(--thumbnail-size)*var(--thumbnail-scale)*var(--thumbnail-height-multiplier));
margin: auto;
position: relative;
width: 100%
}
.contest-art-entry__thumbnail-link {
border: 4px solid var(--thumbnail-border-colour);
display: block;
height: 100%;
width: 100%
}
.contest-art-entry__trophy {
color: var(--trophy-colour)
}
.contest-art-entry__vote-link-banner {
--base-size: calc(var(--thumbnail-size)*0.25*var(--vote-link-banner-scale));
align-items: center;
bottom: 0;
display: flex;
font-size: calc(20px*var(--vote-link-banner-scale));
height: var(--base-size);
justify-content: center;
position: absolute;
right: 0;
width: var(--base-size)
}
.contest-art-entry__vote-link-banner:before {
border-color: transparent transparent var(--vote-link-banner-bg) transparent;
border-style: solid;
border-width: 0 0 var(--base-size) var(--base-size);
content: "";
height: 100%;
position: absolute;
width: 100%
}
.contest-art-list {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-around
}
.contest-art-list--top3 {
align-items: baseline
}
.contest-judge {
font-size: 14px;
padding: 15px 10px
}
@media (min-width: 900px) {
.contest-judge {
padding-left:50px;
padding-right: 50px
}
}
.contest-judge--header {
background-color: hsl(var(--hsl-d3))
}
.contest-judge--items {
background-color: hsl(var(--hsl-b5))
}
.contest-judge-entry {
margin-bottom: 20px;
max-width: 500px
}
.contest-judge-entry__button {
display: flex;
justify-content: flex-end;
text-transform: lowercase
}
.contest-judge-entry__categories,.contest-judge-entry__category {
display: flex;
flex-direction: column;
gap: 10px
}
.contest-judge-entry__description-icon {
align-items: center;
display: flex;
font-size: 11px
}
.contest-judge-entry__label {
display: flex;
font-size: 12px;
font-weight: 700;
gap: 5px
}
.contest-judge-entry__slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
cursor: pointer
}
.contest-judge-entry__slider::-webkit-slider-runnable-track {
background: hsla(var(--hsl-pink-1),50%);
border-radius: 4px;
height: 8px
}
.contest-judge-entry__slider::-moz-range-track {
background: hsla(var(--hsl-pink-1),50%);
border-radius: 4px;
height: 8px
}
.contest-judge-entry__slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: hsl(var(--hsl-pink-1));
border-radius: 9999px;
height: 16px;
margin-top: -4px;
width: 16px
}
.contest-judge-entry__slider::-moz-range-thumb {
background-color: hsl(var(--hsl-pink-1));
border: none;
border-radius: 9999px;
height: 16px;
width: 16px
}
.contest-judge-entry__title {
color: hsl(var(--hsl-l1));
font-size: 20px;
font-weight: 700;
margin-bottom: 10px
}
.contest-judge-entry__value {
color: hsl(var(--hsl-c2));
display: flex;
font-size: 14px;
justify-content: flex-end
}
.contest-judge-entry__voted-icon {
color: hsl(var(--hsl-lime-1));
margin-right: 5px
}
.contest-judge-results {
background-color: hsl(var(--hsl-b5));
display: grid;
font-size: 12px;
gap: 30px;
padding: 20px 10px
}
@media (min-width: 900px) {
.contest-judge-results {
padding-left:50px;
padding-right: 50px
}
}
.contest-judge-results-header {
background-color: hsl(var(--hsl-d3));
display: grid;
gap: 20px;
padding: 20px 10px
}
@media (min-width: 900px) {
.contest-judge-results-header {
padding-left:50px;
padding-right: 50px
}
}
.contest-judge-results-header__values {
display: flex;
gap: 20px
}
.contest-judge-results-scores {
grid-gap: 5px;
align-items: center;
display: grid;
grid-template-columns: minmax(auto,120px) auto;
margin-top: 10px
}
.contest-judge-results-scores__col {
align-items: center;
display: flex
}
.contest-judge-results-scores__col--score {
color: hsl(var(--hsl-c2))
}
.contest-judge-results-scores__row {
display: contents
}
.contest-judge-results-vote__avatar {
height: 30px;
width: 30px
}
.contest-judge-results-vote__user {
align-items: center;
display: flex;
font-size: 16px
}
.contest-judge-results-vote__username {
margin-left: 10px
}
.contest-judge-results-vote__comment {
margin-top: 15px;
overflow-wrap: anywhere;
white-space: break-spaces
}
.contest-judge-results-vote__total-score {
margin-top: 10px
}
.contest-list {
background-color: #00000014;
color: #fff;
font-size: 14px;
padding: 5px 10px
}
@media (min-width: 900px) {
.contest-list {
padding-left:50px;
padding-right: 50px
}
}
.contest-list-item {
background-color: rgba(93, 93, 101, 0.09);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: #fff;
display: block;
height: 70px;
margin: 5px 0;
transition: .1s ease-in-out;
border-radius: 20px;
}
@media (max-width: 899px) {
.contest-list-item {
height:90px
}
}
.contest-list-item:active,.contest-list-item:focus,.contest-list-item:hover {
color: #fff;
text-decoration: none
}
@media (min-width: 900px) {
.contest-list-item:hover .contest-list-item__image {
width:160px
}
}
.contest-list-item--hidden {
opacity: .5
}
.contest-list-item__container {
display: flex;
justify-content: space-between
}
.contest-list-item__date {
color: #c1c1c1;
font-size: 12px
}
@media (max-width: 899px) {
.contest-list-item__date {
font-size:10px
}
}
.contest-list-item__image {
background-position: 50%;
background-size: cover;
float: left;
height: 70px;
transition: .2s ease-in-out;
width: 80px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
@media (max-width: 899px) {
.contest-list-item__image {
height:90px;
width: 50px
}
}
.contest-list-item__left-content {
float: left;
overflow: hidden;
padding: 10px 15px 15px
}
@media (max-width: 899px) {
.contest-list-item__left-content {
padding-right:0
}
}
.contest-list-item__name {
font-size: 14px;
font-weight: 700;
padding-bottom: 5px
}
@media (min-width: 900px) {
.contest-list-item__name {
font-size:18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
}
.contest-list-item__right-content {
flex-shrink: 0;
float: right;
padding: 10px
}
.contest-list-item__type {
font-size: 15px;
text-transform: capitalize
}
@media (max-width: 899px) {
.contest-list-item__type {
font-size:13px
}
}
.contest-list-legend {
display: flex;
justify-content: flex-end;
margin: 0 -5px
}
.contest-list-legend__item {
display: none
}
@media (max-width: 899px) {
.contest-list-legend__item {
font-size:12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.contest-list-legend__item:hover {
flex: none
}
}
.contest-list-legend__item--entry {
border-color: white;
}
.contest-list-legend__item--voting {
border-color: white
}
.contest-list-legend__item--results {
border-color: white
}
.contest-userentry {
background: hsl(var(--hsl-b4));
box-shadow: 0 1px 3px rgba(0,0,0,.25);
height: 150px;
margin: 10px;
position: relative;
transition: .2s cubic-bezier(.68,-.55,.27,1.55);
width: calc(50% - 20px)
}
.contest-userentry--disabled {
display: none
}
.contest-userentry--dragndrop-active {
background-color: hsl(var(--hsl-b3))
}
.contest-userentry--dragndrop-hover.contest-userentry--new,.contest-userentry--new:hover {
background-color: hsl(var(--hsl-b3));
transform: scale(1.01)
}
.contest-userentry--new:active {
transform: scale(.99)
}
.contest-userentry--ok {
border-bottom: 5px solid hsl(var(--hsl-green-3))
}
.contest-userentry__delete {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-c1));
margin: 0;
outline: none;
padding: 5px 10px;
position: absolute;
right: 0
}
.contest-userentry__fileicon {
font-size: 32px;
margin-top: 25px
}
.contest-userentry__filename {
font-size: 15px;
font-weight: lighter;
margin-top: 10px;
padding: 0 10px
}
.contest-userentry__filesize {
color: hsl(var(--hsl-f1));
font-size: 12px
}
.contest-userentry__icon {
font-size: 16px;
padding-bottom: 20px
}
.contest-userentry__uploader {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: 0;
overflow: hidden;
position: relative;
width: 100%
}
.contest-userentry-list {
color: #fff;
display: flex;
flex-wrap: wrap;
padding: 10px;
text-align: center
}
.contest-voting-list__table {
margin: 0 auto;
max-width: 640px;
padding: 20px;
width: 100%
}
.contest-voting-list__rank {
align-items: center;
background: hsl(var(--hsl-b6));
display: flex;
flex: 0 0 32px;
font-weight: 100;
justify-content: center
}
.contest-voting-list__rank--blank {
background-color: transparent
}
.contest-voting-list__trophy--1 {
color: gold
}
.contest-voting-list__trophy--2 {
color: silver
}
.contest-voting-list__trophy--3 {
color: #d2691e
}
.contest-voting-list__row {
background-color: hsl(var(--hsl-b4));
border-bottom: 2px solid hsl(var(--hsl-b6));
color: hsl(var(--hsl-f1));
display: flex;
font-size: 12px;
transition: .1s
}
.contest-voting-list__row--selected,.contest-voting-list__row:hover {
background-color: hsl(var(--hsl-b3))
}
.contest-voting-list__row:first-child {
border-radius: 4px 4px 0 0;
overflow: hidden
}
.contest-voting-list__row:last-child {
border-bottom: none;
border-radius: 0 0 4px 4px;
overflow: hidden
}
.contest-voting-list__header {
color: hsl(var(--hsl-f1));
display: flex;
font-size: 10px;
line-height: 32px;
text-transform: uppercase
}
.contest-voting-list__header-wrapper {
display: flex;
width: 100%
}
.contest-voting-list__icon {
align-items: center;
display: flex;
display: inline-flex;
flex: 0 0 32px;
justify-content: center
}
.contest-voting-list__icon--bg {
background: rgba(0,0,0,.75)
}
.contest-voting-list__icon--judge-results {
background-color: hsl(var(--hsl-b6))
}
.contest-voting-list__icon--submitted-beatmaps {
background-size: cover;
flex: 0 0 50px
}
.contest-voting-list__header-title {
margin-right: auto;
padding-left: 10px
}
.contest-voting-list__header-voted-toggle-button {
align-self: center
}
.contest-voting-list__header-votesummary {
align-items: center;
display: flex
}
.contest-voting-list__preview {
align-items: center;
background: #000;
display: inline-flex;
justify-content: center
}
.contest-voting-list__title {
color: #fff;
font-family: var(--font-content-override,var(--font-content));
line-height: 1.35;
overflow: hidden;
padding: 8px;
transform: translate(0)
}
.contest-voting-list__title--show-votes {
padding: 2px 10px;
width: 100%
}
.contest-voting-list__title-link {
color: #fff;
display: block
}
.contest-voting-list__title-link:active,.contest-voting-list__title-link:focus,.contest-voting-list__title-link:hover {
color: #fff
}
.contest-voting-list__votes-bar {
background-color: hsl(var(--hsl-b2));
height: 100%;
left: 0;
position: absolute;
top: 0
}
.contest-voting-list__entrant {
font-size: 10px;
position: relative
}
.contest-voting-list__link {
color: #fff;
text-decoration: none
}
.contest-voting-list__link:active,.contest-voting-list__link:focus,.contest-voting-list__link:hover {
color: #fff;
text-decoration: none
}
.contest-voting-list__link--shadowed {
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.countdown-timer {
text-align: center
}
.countdown-timer__header {
color: #fff;
margin: 0 auto;
padding-bottom: 10px;
text-align: center
}
.countdown-timer__field {
border: 5px solid hsl(var(--hsl-b5));
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: #fff;
display: inline-block;
margin: 0 5px;
text-align: center;
width: 70px
}
.countdown-timer__digit {
background: hsl(var(--hsl-b6));
font-size: 24px;
line-height: 50px
}
.countdown-timer__label {
background: hsl(var(--hsl-b5));
color: hsl(var(--hsl-f1));
font-size: 12px;
line-height: 14px
}
.counter-box {
background-color: #19191994;
border-radius: 15px;
box-shadow: 0 0 0 2px hsla(var(--hsl-b5),.25);
color: hsl(var(--hsl-c1));
display: inline-flex;
justify-content: space-between;
padding: 7.5px
}
.counter-box:active,.counter-box:focus,.counter-box:hover {
color: hsl(var(--hsl-c1));
text-decoration: none
}
.counter-box--beatmap-discussions {
height: var(--box-height);
margin: 5px
}
.counter-box--info {
padding: 10px 0
}
.counter-box--info,.counter-box--ranking {
background-color: transparent;
border: none;
box-shadow: none;
flex-direction: column
}
.counter-box--ranking {
padding: 0
}
.counter-box--deleted.js-active,.counter-box--deleted:active,.counter-box--deleted:focus,.counter-box--deleted:hover {
box-shadow: 0 0 0 2px #000
}
.counter-box--pending.js-active,.counter-box--pending:active,.counter-box--pending:focus,.counter-box--pending:hover {
box-shadow: 0 0 0 2px #ffffff
}
.counter-box--praises.js-active,.counter-box--praises:active,.counter-box--praises:focus,.counter-box--praises:hover {
box-shadow: 0 0 0 2px #ffffff
}
.counter-box--mapper-notes.js-active,.counter-box--mapper-notes:active,.counter-box--mapper-notes:focus,.counter-box--mapper-notes:hover {
box-shadow: 0 0 0 2px white
}
.counter-box--mine.js-active,.counter-box--mine:active,.counter-box--mine:focus,.counter-box--mine:hover {
box-shadow: 0 0 0 2px #ffffff
}
.counter-box--resolved.js-active,.counter-box--resolved:active,.counter-box--resolved:focus,.counter-box--resolved:hover {
box-shadow: 0 0 0 2px #ffffff
}
.counter-box--total.js-active,.counter-box--total:active,.counter-box--total:focus,.counter-box--total:hover {
box-shadow: 0 0 0 2px #fff
}
.counter-box__content {
line-height: 1
}
.counter-box__count {
font-size: 20px;
font-weight: 300
}
.counter-box__line {
border-radius: 4px;
margin-left: 10px;
width: 2px
}
.counter-box__title {
font-size: 10px;
font-weight: 600;
margin-right: 30px;
white-space: nowrap
}
.counter-box--beatmap-discussions .counter-box__title {
margin-right: 10px
}
.counter-box--info .counter-box__title {
font-weight: 400;
margin-right: 0
}
.daily-challenge {
align-items: center;
background: hsl(var(--hsl-b4));
border: 2px solid transparent;
border-radius: 6px;
display: flex;
min-width: 0;
padding: 1px;
position: relative
}
.daily-challenge--played-today {
border-color: hsl(var(--hsl-lime-1))
}
.daily-challenge--played-today:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: hsl(var(--hsl-lime-1));
border-radius: 50%;
color: hsl(var(--hsl-b6));
content: "\f00c";
display: inline-block;
display: inline-flex;
flex: none;
font-family: Font Awesome\ 5 Free;
font-size: 8px;
font-style: normal;
font-variant: normal;
font-weight: 900;
height: 16px;
justify-content: center;
line-height: 1;
position: absolute;
right: 0;
text-rendering: auto;
top: 0;
transform: translate(50%,-50%);
width: 16px
}
.daily-challenge--played-today:before.fa-pull-left {
margin-right: .3em
}
.daily-challenge--played-today:before.fa-pull-right {
margin-left: .3em
}
.daily-challenge__name {
font-size: 12px;
padding: 0 5px
}
.daily-challenge__value {
--colour: hsl(var(--hsl-c2));
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(var(--colour));
color: transparent
}
.daily-challenge__value-box {
background: hsl(var(--hsl-b6));
border-radius: 3px;
padding: 5px 10px
}
.daily-challenge-popup {
background: hsl(var(--hsl-b4));
border-radius: 20px;
font-size: 12px
}
.daily-challenge-popup__content {
display: grid;
gap: 10px;
padding: 15px
}
.daily-challenge-popup__content--main {
grid-template-columns: 1fr auto
}
.daily-challenge-popup__content--top {
background: hsl(var(--hsl-b5));
border-top-left-radius: inherit;
border-top-right-radius: inherit;
display: grid;
grid-template-columns: 1fr 1fr 1fr
}
.daily-challenge-popup__row {
display: contents
}
.daily-challenge-popup__value {
--colour: hsl(var(--hsl-c2));
color: hsl(var(--hsl-c2))
}
.daily-challenge-popup__value--fancy {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(var(--colour));
color: transparent
}
.daily-challenge-popup__value--top {
font-size: 40px;
font-weight: 300
}
.deleted-comments-count {
font-size: 14px;
padding-top: 10px
}
.deleted-comments-count--top {
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.deleted-comments-count--top {
padding-left:50px;
padding-right: 50px
}
}
.deleted-comments-count__icon {
margin-right: 5px
}
.development-deploy-footer {
background: hsl(var(--hsl-red-3));
font-weight: 700;
padding: 10px;
text-align: center;
width: 100%
}
@media (max-width: 899px) {
.development-deploy-footer {
font-size:14px
}
}
.development-deploy-footer__link {
color: hsl(var(--hsl-c2))
}
.dialog-form {
display: inline-flex;
display: flex;
flex: 1 0 auto;
padding: 10px;
width: 100%
}
.dialog-form,.dialog-form__button {
align-items: center;
color: #fff;
justify-content: center
}
.dialog-form__button {
--bg: hsl(var(--hsl-blue-3));
--bg-hover: hsl(var(--hsl-blue-2));
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: var(--bg);
border: none;
border-radius: 10000px;
display: inline-flex;
flex: none;
margin: 5px;
min-width: 160px;
outline: none;
padding: 10px 20px;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.dialog-form__button:active,.dialog-form__button:focus,.dialog-form__button:hover {
background-color: var(--bg-hover);
color: #fff;
text-decoration: none
}
.dialog-form__button--cancel {
--bg: hsl(var(--hsl-red-3));
--bg-hover: hsl(var(--hsl-red-2))
}
.dialog-form__button[disabled] {
--bg: hsl(var(--hsl-b3));
--bg-hover: var(--bg);
color: hsl(var(--hsl-f1))
}
.dialog-form__client-name {
color: inherit;
font-size: 32px;
font-style: normal;
margin: 0
}
.dialog-form__client-request {
font-size: 16px;
margin: 0
}
.dialog-form__dialog {
background-color: hsl(var(--hsl-b4));
border-radius: 6px;
display: flex;
flex-direction: column;
max-width: 100%;
width: 500px
}
.dialog-form__extra-link {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-l2));
cursor: pointer;
display: inline;
margin: 0;
outline: none;
padding: 0
}
.dialog-form__extra-link:active,.dialog-form__extra-link:focus,.dialog-form__extra-link:hover {
color: hsl(var(--hsl-l1));
text-decoration: underline
}
.dialog-form__extra-link--small {
font-size: 12px
}
.dialog-form__header-overlay {
background-color: rgba(0,0,0,.75);
border-radius: 6px 6px 0 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.dialog-form__input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: hsl(var(--hsl-b5));
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: none;
padding: 15px 20px;
width: 100%
}
.dialog-form__input::-moz-placeholder {
color: hsl(var(--hsl-b1));
opacity: 1
}
.dialog-form__input::placeholder {
color: hsl(var(--hsl-b1));
opacity: 1
}
.dialog-form__logo {
background-image: url(/assets/images/osu-logo-white.59d385da.svg);
background-position: contain;
flex: none;
height: 50px;
margin-right: 10px;
width: 50px
}
.dialog-form__row {
display: flex;
margin: 5px 30px
}
.dialog-form__row--buttons {
flex-wrap: wrap;
justify-content: center;
margin-bottom: 25px;
margin-top: 25px
}
.dialog-form__row--client-verification-completed {
display: block;
margin-bottom: 0;
margin-top: -20px
}
.dialog-form__row--client-verification-completed-buttons {
align-items: center;
display: flex;
flex-direction: column;
margin-bottom: 30px;
margin-top: 20px
}
.dialog-form__row--error {
color: #a8f
}
.dialog-form__row--error:after {
content: "\a0"
}
.dialog-form__row--extra-link {
display: block;
font-size: 12px
}
.dialog-form__row--header {
align-items: center;
background-image: url(/assets/images/oauth-login.0e8030e7.jpg);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 6px 6px 0 0;
display: inline-flex;
height: 200px;
justify-content: center;
margin-left: 0;
margin-right: 0;
margin-top: 0;
position: relative
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.dialog-form__row--header {
background-image:url(/assets/images/[email protected])
}
}
.dialog-form__row--label {
flex-direction: column;
margin-bottom: 10px
}
.dialog-form__row--scopes {
flex-direction: column
}
.dialog-form__row--title {
align-items: center;
margin-bottom: 25px
}
.dialog-form__row--verification-completed {
display: block;
margin-bottom: 50px;
margin-top: -20px
}
.dialog-form__row--verification-invalid {
display: block;
margin-bottom: 50px
}
.dialog-form__row--wrong-user {
display: block;
font-size: 12px
}
.dialog-form__title {
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 700;
margin: 0 0 0 auto;
text-transform: uppercase
}
.dialog-form__user-avatar {
height: 120px;
margin-bottom: 5px;
width: 120px
}
.dialog-form__user-header {
align-items: center;
color: #fff;
display: inline-flex;
flex-direction: column;
font-size: 24px;
justify-content: center;
position: relative;
text-decoration: none
}
.dialog-form__user-header:active,.dialog-form__user-header:focus,.dialog-form__user-header:hover {
color: #fff;
text-decoration: none
}
.difficulty-badge {
align-items: center;
background-color: var(--bg);
border-radius: 10000px;
color: hsl(var(--hsl-b6));
display: flex;
font-size: max(.82em,12px);
font-weight: 800;
height: 100%;
padding: 0 .5em
}
.difficulty-badge--expert-plus {
color: hsl(var(--hsl-orange-1))
}
.difficulty-badge__icon {
font-size: .6em;
margin-right: .4em
}
.difficulty-badge__rating {
min-width: 2.26em
}
.discrete-bar {
display: flex;
flex: 1;
gap: 5px;
min-height: 3px
}
.discrete-bar--contents {
display: contents
}
.discrete-bar__item {
align-items: center;
background: #272727;
border-radius: 10000px;
color: hsl(var(--hsl-f1));
display: inline-flex;
flex: 1;
justify-content: center
}
.discrete-bar__item--on {
background: white;
}
.download-page {
position: relative
}
.download-page__help {
font-size: 12px;
padding-top: 20px
}
@media (min-width: 900px) {
.download-page__step {
max-width:220px
}
}
.download-page__steps {
display: flex;
flex-direction: column;
gap: 10px
}
@media (min-width: 900px) {
.download-page__steps {
flex-direction:row;
justify-content: space-between
}
}
.download-page__step-number {
align-items: center;
border: 2px solid white;
border-radius: 50%;
color: #fff;
display: inline-flex;
flex: none;
font-weight: 700;
height: 30px;
justify-content: center;
margin-right: 5px;
padding-bottom: 2px;
width: 30px
}
.download-page__text {
color: hsl(var(--hsl-c1));
font-size: 12px
}
.download-page__text--description {
padding-left: 35px
}
.download-page__text--title {
align-items: center;
display: inline-flex;
font-size: 18px;
justify-content: center;
margin-bottom: 10px
}
.download-page-header {
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.download-page-header {
padding-left:50px;
padding-right: 50px
}
}
.download-page-header__action-description {
align-items: center;
display: grid;
flex: 1;
gap: 10px;
justify-content: center;
text-align: center
}
.download-page-header__action-title {
font-size: 24px;
font-weight: inherit;
margin: 0
}
.download-page-header__choice {
align-items: center;
display: flex;
flex-direction: column;
gap: 10px;
position: relative
}
@media (min-width: 900px) {
.download-page-header__choice {
gap:20px;
padding: 40px 0
}
}
.download-page-header__choices {
display: grid;
font-weight: 300;
gap: 10px
}
@media (min-width: 900px) {
.download-page-header__choices {
grid-template-columns:1fr auto 1fr
}
}
.download-page-header__extra-link {
color: #fff;
font-size: 14px
}
.download-page-header__extra-link:active,.download-page-header__extra-link:focus,.download-page-header__extra-link:hover {
color: #d3d3d3
}
.download-page-header__extra-link--separator {
pointer-events: none
}
.download-page-header__extra-link--separator:before {
content: "•";
}
.download-page-header__extra-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%
}
.download-page-header__separator {
--separator-thickness: 2px;
--separator-width: auto;
--separator-height: var(--separator-thickness);
align-items: center;
display: flex;
font-size: 24px;
gap: 10px;
height: auto;
width: 100%
}
@media (min-width: 900px) {
.download-page-header__separator {
--separator-width:var(--separator-thickness);
--separator-height: auto;
flex-direction: column;
height: 100%;
width: auto
}
.download-page-header__separator:after {
padding-top: 5px
}
}
.download-page-header__separator:after,.download-page-header__separator:before {
background-color: hsl(var(--hsl-b2));
content: "";
display: block;
flex: 1;
height: var(--separator-height);
width: var(--separator-width)
}
.download-page-header__tagline {
display: block;
font-size: 40px;
font-weight: 300;
margin: 0;
padding: 20px 0;
text-align: center
}
.estimate-min-lines {
height: 0;
overflow: hidden;
position: absolute;
transform: translateZ(0);
width: 0
}
.estimate-min-lines__content {
width: 1000px
}
.estimate-min-lines__content img {
height: 1em!important
}
.fake-bold:after,.fake-bold:before {
content: attr(data-content);
display: block;
font-weight: 700;
height: 0;
opacity: 0;
pointer-events: none
}
.fake-bold:before {
font-weight: 400;
}
.fancy-graph__circle {
stroke: hsl(var(--hsl-h1));
fill: hsl(var(--hsl-h1));
stroke-width: 1px;
pointer-events: none
}
.fancy-graph__hover-area {
fill: none;
pointer-events: all
}
.fancy-graph__line {
fill: none;
stroke: hsl(var(--hsl-h1));
stroke-width: 1px
}
.fileupload {
cursor: pointer;
height: 300%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 300%
}
.fileupload[disabled] {
cursor: not-allowed
}
.fixed-bar {
backface-visibility: hidden;
bottom: 0;
display: flex;
flex-direction: column;
max-height: 100%;
position: fixed;
width: 100%;
z-index: 502
}
.flag-country {
--height: 1em;
--width-height-ratio: 1.38889;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 3px;
display: block;
filter: saturate(1.1);
height: var(--height);
position: relative;
transform: translateZ(0);
width: calc(var(--height)*var(--width-height-ratio))
}
.flag-country:after {
background: inherit;
border-radius: inherit;
content: "";
filter: contrast(0) brightness(2);
height: 100%;
left: 0;
opacity: .25;
position: absolute;
top: 0;
width: 100%
}
.flag-country--flat {
box-shadow: none
}
.flag-country--medium {
--height: 20px
}
.flag-country--small {
--height: 13px
}
.flag-country--wiki {
border-radius: unset;
bottom: -.1em;
display: inline-block
}
.flag-team {
background-color: #333;
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
border-radius: min(.25em,6px);
display: inline-block;
height: 1em;
width: 2em
}
.flag-team--full {
border-radius: 0;
box-shadow: none;
height: 100%;
width: 100%
}
.floating-toolbar {
bottom: 40px;
display: flex;
flex-direction: column;
gap: 5px;
position: fixed;
right: 20px;
z-index: 500
}
@media (max-width: 899px) {
.floating-toolbar {
bottom:10px;
right: 10px
}
}
.floating-toolbar-button {
--circle-size: 50px;
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #202020;
border: none;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: inline-flex;
font-size: calc(var(--circle-size)*.48);
height: var(--circle-size);
justify-content: center;
margin: 0;
outline: none;
padding: 0;
width: var(--circle-size)
}
@media (max-width: 899px) {
.floating-toolbar-button {
--circle-size:40px
}
}
.floating-toolbar-button--updates:before {
background: hsl(var(--hsl-h1));
border-radius: 50%;
content: "";
display: block;
height: calc(var(--circle-size)*.2);
position: absolute;
right: 0;
top: 0;
width: calc(var(--circle-size)*.2)
}
.follow-mapper {
align-items: center;
display: flex;
max-width: 100%
}
.follow-mapper__avatar {
flex: none;
height: 40px;
margin-right: 10px;
width: 40px
}
.follows-table {
font-size: 14px;
margin: -2px -5px;
width: 100%
}
.follows-table--mapping {
margin: -5px 0
}
@media (min-width: 480px) {
.follows-table--mapping {
margin:-2px 0
}
}
.follows-table__data {
padding: 2px 5px
}
.follows-table__data--beatmapset {
grid-area: beatmapset;
min-width: 0
}
.follows-table__data--toggle {
grid-area: toggle
}
.follows-table__data--user {
grid-area: user
}
.follows-table--mapping .follows-table__data {
display: flex;
padding: 0
}
.follows-table--mapping .follows-table__row {
display: grid;
gap: 5px;
grid-template: "user toggle" "beatmapset beatmapset"/1fr auto;
padding: 5px 0
}
@media (min-width: 480px) {
.follows-table--mapping .follows-table__row {
gap:0 5px;
grid-template: "user beatmapset toggle"/200px 1fr auto;
padding: 2px 0
}
}
.footer {
background-color: #00000017;
display: flex;
flex: none;
flex-direction: column;
font-size: 10px;
padding: 10px 0 5px;
border-radius: 70px;
}
.footer--landing {
background: transparent;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 20px 0
}
.footer__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 5px
}
.footer__link {
color: #fff;
font-weight: 700;
margin: 0 10px
}
.footer__link,.footer__link:active,.footer__link:focus,.footer__link:hover {
text-decoration: none
}
@media (max-width: 899px) {
.footer__link {
margin-bottom:5px;
margin-top: 5px
}
}
.footer--landing .footer__link {
font-weight: inherit
}
@media (max-width: 899px) {
.u-chat .footer {
display:none
}
}
.form {
align-items: stretch;
display: flex;
flex-wrap: wrap;
margin: 10px 0 0
}
.form__input-group {
flex: 0 1 100%
}
.form__button {
flex: 1 0 105px;
margin-top: 5px
}
@media (min-width: 900px) {
.form__button {
margin-left:10px;
margin-top: 0
}
}
.form-select {
align-items: baseline;
background-color: hsl(var(--hsl-b6));
border-radius: 4px;
color: hsl(var(--hsl-c1));
display: flex;
font-size: 16px;
font-weight: 400;
line-height: normal;
margin: 0;
min-width: 0;
position: relative;
text-transform: none
}
@media (min-width: 900px) {
.form-select {
font-size:inherit
}
}
.form-select:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: inherit;
border-radius: inherit;
content: "\f078";
display: inline-block;
display: inline-flex;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
height: 100%;
justify-content: center;
line-height: 1;
padding: 0 10px;
pointer-events: none;
position: absolute;
right: 0;
text-rendering: auto
}
.form-select:after.fa-pull-left {
margin-right: .3em
}
.form-select:after.fa-pull-right {
margin-left: .3em
}
.form-select--full {
flex: 1
}
.form-select--simple-form {
background-color: hsl(var(--hsl-b4));
color: hsl(var(--hsl-c1))
}
.form-select__input {
background: none;
background-color: inherit;
border: none;
border-radius: inherit;
flex: 1;
max-width: 100%;
padding: 5px calc(20px + 1em) 5px 5px
}
.form-select__input,.form-text {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
outline: none
}
.form-text {
background: none;
background-color: hsl(var(--hsl-b6));
border: none;
border-radius: 4px;
color: hsl(var(--hsl-c1));
font-size: 16px;
padding: 5px;
width: 100%
}
@media (min-width: 900px) {
.form-text {
font-size:12px
}
}
.form-text--username-change {
margin: 5px 0;
padding: 10px
}
@media (min-width: 900px) {
.form-text--username-change {
font-size:14px
}
}
.forum-cover-admin-item {
background-color: hsl(var(--hsl-b4));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: #fff;
margin-bottom: 10px;
padding: 10px
}
.forum-cover-admin-item__cover-image {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 14.81481481%;
width: 100%
}
.forum-cover-edit {
background-color: hsl(var(--hsl-b2));
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
font-size: 12px;
margin-top: 5px;
max-width: 80vh;
position: absolute;
right: 0;
text-align: center;
top: 100%;
width: 350px;
z-index: 101
}
.forum-cover-edit__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.forum-cover-edit__cover {
background-image: url(/assets/images/forum-cover-category-osu.e4db1419.jpg);
background-size: cover;
border-radius: 6px;
height: 0;
padding-bottom: 24.16666667%;
width: 100%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.forum-cover-edit__cover {
background-image:url(/assets/images/[email protected])
}
}
.forum-cover-edit__info {
margin: 0;
padding: 0 20px 15px
}
.forum-cover-edit__overlay {
align-items: center;
background-color: hsla(var(--hsl-b6),.5);
border-radius: 6px;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
transition: all .12s;
width: 100%
}
.forum-cover-edit__overlay[data-state=hidden] {
opacity: 0;
pointer-events: none
}
.forum-cover-edit__overlay[data-state=hover] {
background-color: hsla(var(--hsl-b6),.8)
}
.forum-issue-icon {
--platform-tag: hsl(var(--hsl-darkorange-1));
align-items: center;
background-image: url(/assets/images/button.16de7c2c.svg);
background-position: 50% 50%;
background-size: 200px;
background-size: cover;
border-radius: 50%;
color: #fff;
display: inline-flex;
font-size: 10px;
height: 20px;
justify-content: center;
margin: 0 5px;
text-shadow: 0 0 2px #000;
width: 20px
}
.forum-issue-icon--added {
background-color: #cc5288
}
.forum-issue-icon--assigned {
background-color: #64c
}
.forum-issue-icon--confirmed {
background-color: #4ad
}
.forum-issue-icon--duplicate {
background-color: #ea0
}
.forum-issue-icon--invalid {
background-color: #8e0b14
}
.forum-issue-icon--resolved {
background-color: #680
}
.forum-issue-icon--osulazer,.forum-issue-icon--osustable,.forum-issue-icon--osuweb {
background-color: var(--platform-tag)
}
.forum-item {
--latest-post-colour: hsl(var(--hsl-c2));
background-color: #5d5d6517;
border-radius: 10px;
display: flex;
font-size: 12px;
margin: 5px -8px;
padding: 5px 3px;
position: relative;
transition: all .12s
}
.forum-item:hover {
background-color: #00000038;
}
@media (min-width: 900px) {
.forum-item {
margin-left:-30px;
margin-right: -30px;
padding-left: 25px;
padding-right: 25px
}
}
.forum-item--header {
--latest-post-colour: inherit;
background: initial;
padding-bottom: 0;
padding-top: 0
}
.forum-item--header:hover {
background: initial
}
.forum-item__arrow {
align-self: center;
flex: none;
font-size: 14px;
margin: 5px
}
@media (min-width: 900px) {
.forum-item__arrow {
display:none
}
}
.forum-item__description {
color: #e5e5e5;
}
.forum-item__details {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
margin: 5px;
position: relative
}
@media (min-width: 900px) {
.forum-item__details {
transform:all .12s;
will-change: transform
}
}
.forum-item__latest-post {
display: none;
flex: none;
flex-direction: column;
justify-content: center;
margin: 5px;
width: 300px
}
@media (min-width: 900px) {
.forum-item__latest-post {
display:flex
}
}
.forum-item__name {
font-size: 18px;
font-weight: 400;
max-width: 100%;
width: -moz-max-content;
width: max-content
}
.forum-item__name,.forum-item__name:active,.forum-item__name:focus,.forum-item__name:hover {
color: hsl(var(--hsl-c1))
}
.forum-item__subforum {
margin: 2px 10px;
white-space: nowrap
}
.forum-item__subforum-icon {
margin-right: 2px
}
.forum-item__subforums {
display: none;
flex-wrap: wrap;
list-style: none;
margin: 8px -10px -2px;
padding: 0
}
@media (min-width: 900px) {
.forum-item__subforums {
display:flex
}
}
.forum-item-stripe {
--width: 7px;
--width-desktop: 9px;
--arrow-opacity: 0;
align-items: center;
background-color: inherit;
display: inline-flex;
inset: 0 auto 0 0;
justify-content: center;
padding-right: 4px;
position: absolute;
transition: all .12s;
width: var(--width)
}
.forum-item-stripe:after {
background-color: inherit;
inset: 0 0 0 auto;
width: 4px
}
.forum-item-stripe:after,.forum-item-stripe:before {
border-radius: 4px 0 0 4px;
content: "";
position: absolute
}
.forum-item-stripe:before {
background-color: #e5e5e5;
height: 100%;
left: 0;
top: 0;
width: 100%
}
.forum-item:hover .forum-item-stripe,.forum-topic-entry:hover .forum-item-stripe {
--width-desktop: 24px;
--arrow-opacity: 1
}
@media (min-width: 900px) {
.forum-item-stripe {
width:var(--width-desktop)
}
}
.forum-item-stripe__arrow {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: var(--forum-item-background-color-hover);
display: inline-block;
display: none;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
opacity: var(--arrow-opacity);
position: relative;
text-rendering: auto
}
.forum-item-stripe__arrow.fa-pull-left {
margin-right: .3em
}
.forum-item-stripe__arrow.fa-pull-right {
margin-left: .3em
}
.forum-item-stripe__arrow:before {
content: "\f105"
}
@media (min-width: 900px) {
.forum-item-stripe__arrow {
display:block
}
}
.forum-list {
padding: 10px;
}
@media (min-width: 900px) {
.forum-list {
padding-left:50px;
padding-right: 50px
}
}
.forum-list--compact {
padding: 0;
}
@media (min-width: 900px) {
.forum-list--compact {
padding:0
}
}
.forum-list__button {
flex: none;
margin: 2px 5px;
}
.forum-list__buttons {
display: none;
flex: wrap;
margin: -2px -5px
}
@media (min-width: 900px) {
.forum-list__buttons {
display:flex
}
}
.forum-list__menu {
margin-left: auto;
position: relative;
}
@media (min-width: 900px) {
.forum-list__menu {
display:none
}
}
.forum-list__menu-button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: hsl(var(--hsl-blue-2));
border: none;
border-radius: 50%;
display: inline-flex;
height: 30px;
justify-content: center;
margin: 0;
outline: none;
padding: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
width: 30px
}
.forum-list__header {
align-items: flex-end;
display: flex;
margin-bottom: 10px
}
.forum-list__items {
list-style: none;
margin-top: 10px;
padding: 0
}
.forum-poll {
background-color: hsl(var(--hsl-b2));
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
display: flex;
flex-direction: column;
font-size: 14px;
padding: 10px
}
@media (min-width: 900px) {
.forum-poll {
padding-left:50px;
padding-right: 50px
}
}
.forum-poll__actions {
align-items: center;
bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
right: 30px;
transition: opacity .12s ease-in-out
}
@media (min-width: 900px) {
.forum-poll__actions {
justify-content:flex-start;
opacity: 0;
right: 0;
top: 20px;
width: 0
}
.forum-poll:hover .forum-poll__actions {
opacity: 1
}
}
.forum-poll__button {
margin: 5px
}
.forum-poll__detail {
margin: 2px 0
}
.forum-poll__detail--sub {
color: hsl(var(--hsl-c2));
font-size: 10px
}
.forum-poll__row {
display: flex;
flex-direction: column;
margin: 5px 0
}
.forum-poll__row--buttons {
flex-flow: row wrap;
margin: 0 -5px
}
.forum-poll__row--details {
margin-bottom: 3px;
margin-top: 3px
}
.forum-poll__row--title {
margin-bottom: 10px
}
.forum-poll__title {
color: inherit;
font-size: 18px;
font-style: normal;
margin: 0
}
.forum-poll__warning {
color: hsl(var(--hsl-c2))
}
.forum-poll-container__content {
display: none
}
.forum-poll-container[data-edit="1"] .forum-poll-container__content--edit,.forum-poll-container[data-page=form][data-edit="0"] .forum-poll-container__content--form,.forum-poll-container[data-page=results][data-edit="0"] .forum-poll-container__content--results {
display: block
}
.forum-poll-option {
cursor: pointer;
display: flex;
font-size: 14px;
font-weight: 400;
margin: 5px 0;
max-width: 100%;
text-transform: none;
width: -moz-max-content;
width: max-content
}
.forum-poll-option__input {
margin-right: 10px
}
.forum-poll-row {
display: flex;
flex-direction: column;
margin: 3px 0
}
.forum-poll-row__row {
display: flex;
flex-wrap: wrap;
margin: 2px 0
}
.forum-poll-row__text {
flex: 1
}
.forum-poll-row__result {
flex: none;
min-width: 60px;
padding-right: 5px
}
@media (min-width: 900px) {
.forum-poll-row__result {
padding-left:5px;
padding-right: 0;
text-align: right
}
}
.forum-post {
border-bottom: 1px solid #888888b8;
display: flex;
padding: 0
}
.forum-post.js-forum-post--hidden {
opacity: .5
}
.forum-post__actions {
display: none;
position: absolute;
right: 10px;
top: 10px;
transition: opacity .12s ease-in-out;
will-change: opacity
}
@media (min-width: 900px) {
.forum-post__actions {
display:flex;
gap: 5px;
opacity: 0;
right: 50px
}
.forum-post:hover .forum-post__actions {
opacity: 1
}
}
.forum-post__body {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
position: relative
}
.forum-post__content {
flex: none;
font-size: 11px;
padding: 0 10px 20px 20px
}
@media (min-width: 900px) {
.forum-post__content {
font-size:12px;
padding-right: 50px
}
}
.forum-post__content--blocked {
font-size: 14px;
padding-top: 20px
}
.forum-post__content--footer {
color: #cdcdcd
}
.forum-post__content--header {
align-items: baseline;
display: flex;
font-size: 10px;
padding-top: 10px
}
@media (min-width: 900px) {
.forum-post__content--header {
font-size:12px;
padding-top: 20px
}
}
.forum-post__content--main {
flex: 1 0 auto
}
.forum-post__content--signature {
border-top: 1px solid #98989882;
color: white;
display: none;
font-family: var(--font-content-override,var(--font-content));
line-height: 1.35;
margin: 0 10px 20px 20px;
max-height: 170px;
overflow: hidden;
padding: 10px 0 0;
}
@media (min-width: 900px) {
.forum-post__content--signature {
display:block;
margin-right: 50px
}
}
.forum-post__header-content {
display: flex;
flex-direction: column;
margin: -5px -2px
}
@media (min-width: 900px) {
.forum-post__header-content {
flex-direction:row
}
}
.forum-post__header-content-item {
margin: 5px 2px
}
.forum-post__menu {
margin-left: auto;
position: relative
}
@media (min-width: 900px) {
.forum-post__menu {
display:none
}
}
.forum-post__menu-button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
outline: none;
padding: 5px
}
.forum-post__user {
font-size: 14px;
font-weight: 600
}
@media (min-width: 900px) {
.forum-post__user {
display:none
}
}
.forum-post-content {
word-wrap: break-word;
color: hsl(var(--hsl-c1));
font-family: var(--font-content-override,var(--font-content));
font-size: 12px;
line-height: 1.35
}
@media (min-width: 900px) {
.forum-post-content {
font-size:14px
}
}
.forum-post-content--edit {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
min-height: 150px;
outline: none;
padding: 0;
resize: vertical;
width: 100%
}
@media (min-width: 900px) {
.forum-post-content--edit {
min-height:300px
}
.forum-post-content--reply-preview {
max-height: calc(100vh - 300px);
min-height: 150px;
overflow-y: auto
}
}
.forum-post-content[disabled] {
opacity: .8
}
.forum-post-edit-box {
background-color: #00000014;
display: flex;
height: 100%;
padding: 10px
}
@media (min-width: 900px) {
.forum-post-edit-box {
padding-right:50px
}
}
.forum-post-info {
align-items: center;
background-color: rgb(20 20 20 / 38%);
display: flex;
flex: none;
flex-direction: column;
padding: 5px;
text-align: center;
width: 45px
}
@media (min-width: 900px) {
.forum-post-info {
padding:10px;
width: 180px
}
}
.forum-post-info__row {
display: none;
margin: 5px 0
}
@media (min-width: 900px) {
.forum-post-info__row {
display:block
}
}
.forum-post-info__row--avatar {
display: block;
width: 100%
}
@media (min-width: 900px) {
.forum-post-info__row--avatar {
padding:0 40px
}
}
.forum-post-info__row--flag {
display: flex;
font-size: 20px;
justify-content: center;
width: 100%
}
.forum-post-info__row--group-badge {
display: block;
width: 100%
}
.forum-post-info__row--group-badge-playmodes {
display: none
}
@media (max-width: 899px) {
.forum-post-info__row--group-badge-playmodes {
display:flex;
flex-wrap: wrap;
font-size: 12px;
justify-content: center
}
}
.forum-post-info__row--posts,.forum-post-info__row--registration {
font-size: 12px
}
.forum-post-info__row--registration strong {
font-weight: 600
}
.forum-post-info__row--support-level {
align-items: center;
background-color: #72727245;
border-radius: 10000px;
display: inline-flex;
font-size: 6px;
justify-content: center;
padding: 2px 5px;
width: 100%
}
@media (min-width: 900px) {
.forum-post-info__row--support-level {
font-size:8px;
min-width: 50px;
width: auto
}
}
.forum-post-info__row--title {
color: hsl(var(--hsl-c1));
font-size: 11px
}
.forum-post-info__row--title:active,.forum-post-info__row--title:focus,.forum-post-info__row--title:hover {
color: hsl(var(--hsl-c1))
}
.forum-post-info__row--username {
color: hsl(var(--hsl-c1));
font-size: 16px;
word-break: break-word
}
.forum-post-info__row--username:active,.forum-post-info__row--username:focus,.forum-post-info__row--username:hover {
color: hsl(var(--hsl-c1))
}
.forum-post-preview {
padding: 10px
}
@media (min-width: 900px) {
.forum-post-preview {
padding-left:50px;
padding-right: 50px
}
}
.forum-post-preview__title {
margin-bottom: 10px
}
.forum-title {
flex: 1
}
.forum-title:before {
background-color: hsl(var(--hsl-p));
border-radius: 10000px;
content: "";
display: none;
height: 80%;
left: -10px;
position: absolute;
top: 15%;
width: 3px
}
@media (min-width: 900px) {
.forum-title:before {
display:block
}
}
.forum-title--forum {
margin: 10px
}
@media (min-width: 900px) {
.forum-title--forum {
margin:20px 50px
}
}
.forum-title__description {
font-size: 12px;
margin: 0;
padding: 0
}
@media (min-width: 900px) {
.forum-title__description {
font-size:14px
}
}
.forum-title__name {
color: hsl(var(--hsl-c1));
font-size: 18px;
font-style: normal;
font-weight: 400;
margin: 0;
padding: 0
}
@media (min-width: 900px) {
.forum-title__name {
font-size:30px
}
}
.forum-topic-entry {
background-color: #5d5d6517;
border-radius: 15px;
display: flex;
font-size: 12px;
margin: 2px -8px;
padding: 7px 0 7px 8px;
position: relative;
transition: all .12s
}
.forum-topic-entry:hover {
background-color: #00000038;
}
@media (min-width: 900px) {
.forum-topic-entry {
margin-left:-30px;
margin-right: -30px;
padding-left: 30px
}
}
.forum-topic-entry--old {
opacity: .7
}
.forum-topic-entry--deleted {
--forum-item-background-color: hsl(var(--hsl-red-4));
--forum-item-background-color-hover: hsl(var(--hsl-red-3));
opacity: .5
}
.forum-topic-entry__col {
align-items: center;
display: inline-flex;
flex: none;
justify-content: center
}
.forum-topic-entry__col--buttons {
margin: -2px 18px -2px -2px
}
.forum-topic-entry__col--icon {
align-items: center;
align-self: center;
display: flex;
flex-direction: column;
position: relative
}
.forum-topic-entry__col--last-link {
font-size: 14px;
text-decoration: none;
width: 30px
}
.forum-topic-entry__col--last-link:active,.forum-topic-entry__col--last-link:focus,.forum-topic-entry__col--last-link:hover {
text-decoration: none
}
.forum-topic-entry__col--main {
align-items: normal;
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
word-break: break-word
}
@media (min-width: 900px) {
.forum-topic-entry__col--main {
align-items:center;
flex-direction: row
}
}
.forum-topic-entry__content {
flex: none;
padding: 0 10px
}
.forum-topic-entry__content--counts {
min-width: 150px;
white-space: nowrap
}
.forum-topic-entry__content--left {
flex: 1;
min-width: 0
}
.forum-topic-entry__content--right {
margin-top: 10px;
width: 100%
}
@media (min-width: 900px) {
.forum-topic-entry__content--right {
margin-top:0;
width: 200px
}
}
.forum-topic-entry__count {
font-weight: 600
}
.forum-topic-entry__detail+.forum-topic-entry__detail {
padding-left: 10px
}
.forum-topic-entry__icon {
align-items: center;
background-color: #151515ab;
border-radius: 10000px;
color: hsl(var(--hsl-c1));
display: inline-flex;
font-size: 14px;
height: 36px;
justify-content: center;
min-width: 46px
}
.forum-topic-entry__icon:active,.forum-topic-entry__icon:focus,.forum-topic-entry__icon:hover {
color: hsl(var(--hsl-c1));
text-decoration: none
}
@media (min-width: 900px) {
.forum-topic-entry__icon {
align-self:center
}
}
.forum-topic-entry__icon--small {
font-size: 12px
}
.forum-topic-entry__icon--unread {
border: 2px solid ;
}
.forum-topic-entry__issue-icons {
display: flex;
flex: none;
order: 1;
padding: 5px 5px 0
}
@media (min-width: 900px) {
.forum-topic-entry__issue-icons {
align-self:center;
order: 0;
padding-top: 0
}
}
.forum-topic-entry__lock {
color: hsl(var(--hsl-c2));
font-size: 10px;
margin-top: 5px
}
@media (min-width: 900px) {
.forum-topic-entry__lock {
margin-right:5px;
margin-top: 0;
position: absolute;
right: 100%;
top: 0
}
}
.forum-topic-entry__replied {
--diameter: 6px;
background-color: var(--forum-bg);
border-radius: 50%;
height: var(--diameter);
position: absolute;
right: calc(50% - var(--diameter)/2);
top: calc(100% + 2px);
width: var(--diameter)
}
@media (min-width: 900px) {
.forum-topic-entry__replied {
right:calc(100% + 2px);
top: calc(50% - var(--diameter)/2)
}
}
.forum-topic-entry__title {
word-wrap: break-word;
color: hsl(var(--hsl-c1));
display: block;
font-size: 14px;
max-width: 100%;
width: -moz-max-content;
width: max-content
}
.forum-topic-entry__title:active,.forum-topic-entry__title:focus,.forum-topic-entry__title:hover {
color: hsl(var(--hsl-c1))
}
.forum-topic-feature-vote {
background-color: hsl(var(--hsl-b2));
line-height: normal;
padding: 10px;
text-align: center
}
@media (min-width: 900px) {
.forum-topic-feature-vote {
padding-left:50px;
padding-right: 50px
}
}
.forum-topic-feature-vote__button {
margin: 5px
}
.forum-topic-feature-vote__info {
font-size: 14px;
margin-bottom: 20px
}
.forum-topic-feature-vote__remaining {
font-size: 14px
}
.forum-topic-feature-vote__star {
color: #fd5;
margin-right: -.9em;
opacity: .6
}
.forum-topic-feature-vote__star:last-child {
color: #fc2;
margin-right: 0;
opacity: 1
}
.forum-topic-feature-vote__votes {
margin: 5px .9em 5px 0;
text-align: center
}
.forum-topic-feature-vote__votes--small {
font-size: .8em
}
.forum-topic-floating-header {
color: #fff;
flex: none;
font-size: 15px;
font-style: normal;
line-height: 1.2;
margin: 0;
padding: 0
}
.forum-topic-floating-header__title-link {
color: #fff;
text-decoration: none
}
.forum-topic-floating-header__title-link:active,.forum-topic-floating-header__title-link:focus,.forum-topic-floating-header__title-link:hover {
color: #fff;
text-decoration: none
}
@media (min-width: 900px) {
.forum-topic-header-padding {
margin-top:51px
}
}
.forum-topic-logs-table__body {
font-size: 14px
}
.forum-topic-logs-table__col {
padding-right: 40px;
white-space: nowrap
}
.forum-topic-logs-table__col--action {
width: 100%
}
.forum-topic-logs-table__col--date {
color: hsl(var(--hsl-f1))
}
.forum-topic-logs-table__header {
border-bottom: 2px solid hsl(var(--hsl-c1));
font-size: 10px;
padding-bottom: 5px;
text-transform: uppercase
}
.forum-topic-logs-table__log-data {
color: hsl(var(--hsl-f1));
font-size: 11px
}
.forum-topic-logs-table__row {
border-top: 2px solid hsl(var(--hsl-b4));
height: 50px;
padding-bottom: 2px
}
.forum-topic-nav {
--main-height: 40px;
background-color: rgba(17, 17, 17, 0.459);
height: var(--main-height);
position: relative;
width: 100%
}
@media (min-width: 900px) {
.forum-topic-nav {
--main-height:50px
}
}
.forum-topic-nav__content {
align-items: center;
bottom: 0;
display: flex;
height: var(--main-height);
justify-content: space-between;
left: 0;
padding: 0 2px;
position: absolute;
width: 100%
}
@media (min-width: 900px) {
.forum-topic-nav__content {
padding:0 5px
}
}
.forum-topic-nav__counter {
width: 40px
}
@media (min-width: 900px) {
.forum-topic-nav__counter {
width:50px
}
}
.forum-topic-nav__counter--input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: 0;
color: #fff;
display: none;
margin: 0;
outline: none;
padding: 0
}
.forum-topic-nav__counter--left {
text-align: right
}
.forum-topic-nav__counter--middle {
margin: 0 10px;
text-align: center;
width: auto
}
.forum-topic-nav__counter-cover {
cursor: pointer;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.forum-topic-nav__counter-container {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #111;
border: 2px solid transparent;
border-radius: 10000px;
color: hsl(var(--hsl-c1));
display: inline-flex;
font-size: 12px;
justify-content: center;
margin: 0 auto;
outline: none;
padding: 0;
position: relative;
text-decoration: none
}
@media (min-width: 900px) {
.forum-topic-nav__counter-container {
font-size:16px;
margin: 0 3px
}
}
.forum-topic-nav__counter-container.js-forum-topic-post-jump--container-focus {
border-color: #c60
}
.forum-topic-nav__group {
display: flex;
flex: 1
}
.forum-topic-nav__group--desktop {
display: none
}
@media (min-width: 900px) {
.forum-topic-nav__group--desktop {
display:flex
}
.forum-topic-nav__group--main {
flex: none
}
}
.forum-topic-nav__group--mobile {
flex: none
}
@media (min-width: 900px) {
.forum-topic-nav__group--mobile {
display:none
}
}
.forum-topic-nav__group--right {
justify-content: flex-end
}
[data-topic-lock="0"] .forum-topic-nav__lock-or-reply--lock,[data-topic-lock="1"] .forum-topic-nav__lock-or-reply--reply {
display: none
}
.forum-topic-nav__mobile-float {
bottom: 100%;
margin-bottom: 15px;
position: absolute
}
@media (min-width: 900px) {
.forum-topic-nav__mobile-float {
display:none
}
}
.forum-topic-nav__mobile-float--right {
right: 2px
}
.forum-topic-nav__seek-bar {
backface-visibility: hidden;
background-color: #e2e2e2;
bottom: 100%;
cursor: pointer;
height: 10px;
left: 0;
position: absolute;
transition: width .5s ease-out,height .12s ease-out
}
@media (min-width: 900px) {
.forum-topic-nav__seek-bar {
height:5px
}
}
.forum-topic-nav__seek-bar:after {
background-color: transparent;
bottom: 100%;
content: "";
height: 10px;
left: 0;
position: absolute;
width: 100%
}
@media (min-width: 900px) {
.forum-topic-nav:hover .forum-topic-nav__seek-bar {
height:15px
}
}
.forum-topic-nav__seek-bar--all {
opacity: .5;
width: 100%
}
@media (min-width: 900px) {
.forum-topic-nav__seek-bar--all {
opacity:.01
}
.forum-topic-nav__seek-bar--all:before {
display: none
}
}
.forum-topic-nav:hover .forum-topic-nav__seek-bar--all {
opacity: .5
}
.forum-topic-nav__seek-bar-container {
bottom: 0;
height: var(--main-height);
left: 0;
position: absolute;
width: 100%
}
.forum-topic-nav__seek-tooltip {
bottom: calc(var(--main-height) + 25px);
display: flex;
justify-content: center;
position: absolute;
width: 0;
will-change: opacity,transform
}
.forum-topic-nav__seek-tooltip-number {
background-color: #1a1a1a;
border-radius: 4px;
color: #fff;
flex: none;
padding: 5px 20px
}
.forum-topic-nav__seek-tooltip-number:before {
border-color: #1a1a1a transparent transparent;
border-style: solid;
border-width: 10px 8px 0;
content: "";
left: 50%;
margin-left: -8px;
position: absolute;
top: 100%
}
.forum-topic-title {
background-color: rgb(25 25 25 / 74%);;
display: flex;
flex-direction: column;
padding: 5px
}
@media (min-width: 900px) {
.forum-topic-title {
flex-direction:row;
padding-left: 45px;
padding-right: 45px
}
}
.forum-topic-title__item {
margin: 5px
}
.forum-topic-title__item--counters {
flex: none
}
.forum-topic-title__item--main {
flex: 1
}
.forum-topic-title__title {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
border-bottom: 1px solid transparent;
color: hsl(var(--hsl-c1));
font-size: 24px;
font-style: normal;
line-height: normal;
margin: 0;
outline: none;
overflow-wrap: anywhere;
padding: 0
}
.forum-topic-title__title-container[data-title-edit="1"] .forum-topic-title__title--display {
opacity: 0
}
.forum-topic-title__title--edit {
border-bottom-color: hsl(var(--hsl-d1));
bottom: 0;
display: none;
left: 0;
position: absolute;
width: 100%
}
.forum-topic-title__title-container[data-title-edit="1"] .forum-topic-title__title--edit {
display: block
}
.forum-topic-title__title-container {
margin-bottom: 5px;
position: relative
}
.forum-topic-title__post-time {
color: #e2e2e2;
font-size: 12px
}
.forum-topic-toolbar {
background-color: hsl(var(--hsl-b3));
display: flex;
justify-content: flex-end;
padding: 5px
}
@media (min-width: 900px) {
.forum-topic-toolbar {
padding-left:45px;
padding-right: 45px
}
}
.forum-topic-toolbar__item {
display: flex;
margin: 5px
}
.forum-topic-toolbar[data-title-edit="1"] .forum-topic-toolbar__item,.forum-topic-toolbar__item--title-edit {
display: none
}
.forum-topic-toolbar[data-title-edit="1"] .forum-topic-toolbar__item--title-edit {
display: flex
}
.forum-user-badge {
background-color: hsl(var(--hsl-b6));
border-radius: 10000px;
color: hsl(var(--hsl-lime-2));
font-size: 8px;
font-weight: 600;
padding: 2px 10px;
text-transform: uppercase
}
@media (min-width: 900px) {
.forum-user-badge {
font-size:10px
}
}
.forum-user-icon {
background-color: #29b;
border-radius: 10000px;
display: inline-block;
height: .6em;
margin-right: 2px;
width: .6em
}
.gallery-previews {
height: 390px;
margin: 0;
padding: 0;
position: relative
}
.gallery-previews__item {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all .5s ease-in-out;
width: 100%
}
.gallery-previews__item.js-gallery {
cursor: zoom-in;
will-change: opacity
}
.gallery-thumbnails {
display: flex;
flex-wrap: wrap;
margin: 5px -5px;
padding: 0
}
.gallery-thumbnails__item {
background-position: 50%;
background-size: cover;
display: inline-block;
flex: none;
height: 50px;
margin: 5px;
opacity: .5;
transition: all .5s ease-in-out;
width: 50px
}
.gallery-thumbnails__item.js-gallery-thumbnail--active,.gallery-thumbnails__item:hover {
opacity: 1
}
.game-mode {
align-items: center;
display: flex;
font-size: 14px;
gap: 10px 20px;
height: 100%;
line-height: normal;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
right: 10px;
top: 0
}
@media (min-width: 900px) {
.game-mode {
right:50px
}
}
.game-mode--beatmapset {
right: 10px
}
@media (min-width: 900px) {
.game-mode--beatmapset {
right:40px
}
}
.game-mode-link {
align-items: center;
color: #ffffff8f;
display: flex;
font-size: 20px;
gap: 4px;
padding: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.game-mode-link,.game-mode-link:active,.game-mode-link:focus,.game-mode-link:hover {
text-decoration: none
}
.game-mode-link--active {
color: #fff;
font-weight: 700
}
.game-mode-link--disabled:active,.game-mode-link--disabled:focus,.game-mode-link--disabled:hover,.game-mode-link__badge {
color: #ffffff69
}
.game-mode-link__badge {
background-color: #0000002e;
border-radius: 4px;
font-size: .6em;
font-weight: 700;
padding: 2px 5px
}
.game-mode-link__icon {
font-size: .6em
}
.github-user {
align-items: center;
display: flex;
justify-content: space-between
}
.github-user__name {
font-size: 16px
}
.grid-items {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0
}
.grid-items--2 {
gap: 2px
}
.grid-items--fade-out {
opacity: .5
}
.grid-items--notification-banner-buttons {
gap: 10px;
justify-content: center
}
.grid-items--ranking-filter {
flex-direction: column;
gap: 10px 20px
}
@media (min-width: 900px) {
.grid-items--ranking-filter {
align-items:center;
flex-direction: row;
justify-content: flex-end
}
}
.grid-items--ranking-info-bar {
gap: 20px;
width: 100%
}
@media (min-width: 900px) {
.grid-items--ranking-info-bar {
align-items:flex-end
}
}
.grid-items__item--spotlight-user-filter {
width: 100%
}
@media (min-width: 900px) {
.grid-items__item--spotlight-user-filter {
margin-left:auto;
width: auto
}
}
.header-buttons {
display: flex;
margin: 0 -5px 0 auto
}
.header-buttons__item {
display: flex;
margin: 5px;
position: relative
}
.header-nav-item-count {
background: hsl(var(--hsl-red-2));
border-radius: 6px;
color: hsl(var(--hsl-c1));
font-size: .7em;
font-weight: 400;
padding: .21428571em 10px
}
.header-nav-mobile {
font-size: 14px;
position: relative;
width: 100%
}
@media (min-width: 900px) {
.header-nav-mobile {
display:none
}
}
.header-nav-mobile__menu {
background-color: hsl(var(--hsl-d5));
display: grid;
left: 0;
list-style: none;
margin: 0 -10px;
padding: 0;
position: absolute;
right: 0;
top: 100%;
z-index: 101
}
.header-nav-mobile__toggle {
color: #fff;
display: block;
max-width: 100%;
padding: 10px 0;
position: relative;
text-decoration: none;
width: -moz-max-content;
width: max-content
}
.header-nav-mobile__toggle:active,.header-nav-mobile__toggle:focus,.header-nav-mobile__toggle:hover {
color: #fff;
text-decoration: none
}
.header-nav-mobile__toggle:before {
background-color: hsl(var(--hsl-h1));
border-radius: 10000px;
bottom: -2px;
content: "";
display: block;
height: 4px;
left: 0;
position: absolute;
width: 100%;
z-index: 102
}
.header-nav-mobile__toggle-icon {
align-items: center;
display: flex;
font-size: .8em;
height: 100%;
left: 100%;
padding-left: 10px;
position: absolute;
top: 0
}
.js-click-menu--active>.header-nav-mobile__toggle-icon {
transform: rotateX(.5turn)
}
.header-nav-mobile__item {
color: #fff;
display: block;
padding: 10px;
text-decoration: none
}
@media (min-width: 900px) {
.header-nav-mobile__item {
padding-left:50px;
padding-right: 50px
}
}
.header-nav-mobile__item:active,.header-nav-mobile__item:focus,.header-nav-mobile__item:hover {
background-color: hsl(var(--hsl-d3));
color: #fff;
text-decoration: none
}
.header-nav-v4 {
--header-nav-item-padding-y: 10px;
display: none;
flex-wrap: wrap;
font-size: 12px;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
position: relative
}
@media (min-width: 900px) {
.header-nav-v4 {
--header-nav-item-padding-y:15px;
display: flex;
font-size: 14px
}
}
.header-nav-v4--breadcrumb {
display: flex
}
.header-nav-v4--list {
gap: 20px
}
.header-nav-v4--list:before {
background-color:white;
bottom: 0;
content: "";
height: 1px;
position: absolute;
width: 100%
}
.header-nav-v4__item {
align-items: baseline;
display: flex
}
.header-nav-v4--breadcrumb .header-nav-v4__item+.header-nav-v4__item:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: "\f105";
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
padding-right: 10px;
text-rendering: auto
}
.header-nav-v4--breadcrumb .header-nav-v4__item+.header-nav-v4__item:before.fa-pull-left {
margin-right: .3em
}
.header-nav-v4--breadcrumb .header-nav-v4__item+.header-nav-v4__item:before.fa-pull-right {
margin-left: .3em
}
.header-nav-v4__link {
align-items: baseline;
display: flex;
gap: 2px 5px;
padding: var(--header-nav-item-padding-y) 0;
position: relative
}
.header-nav-v4__link:before {
display: none;
transform: scaleY(0)
}
@media (min-width: 900px) {
.header-nav-v4__link:before {
background-color: white;
border-radius: 10000px;
bottom: -2px;
content: "";
display: block;
height: 5px;
position: absolute;
transition: inherit;
width: 100%;
z-index: 1
}
}
.header-nav-v4__link--active {
color: #fff;
text-decoration: none
}
.header-nav-v4__link--active:active,.header-nav-v4__link--active:focus,.header-nav-v4__link--active:hover {
color: #fff;
text-decoration: none
}
.header-nav-v4--list .header-nav-v4__link,.header-nav-v4--list .header-nav-v4__link:active,.header-nav-v4--list .header-nav-v4__link:focus,.header-nav-v4--list .header-nav-v4__link:hover {
text-decoration: none
}
.header-nav-v4--list .header-nav-v4__link:hover:before {
transform: scaleY(1)
}
.header-nav-v4--list .header-nav-v4__link--active {
font-weight: 700
}
.header-nav-v4--list .header-nav-v4__link--active:before {
transform: scaleY(1)
}
.header-nav-v4__link-count {
background: hsl(var(--hsl-red-2));
border-radius: 6px;
color: hsl(var(--hsl-c1));
font-size: .7em;
font-weight: 400;
padding: .21428571em 10px
}
.header-nav-v4__text {
padding: var(--header-nav-item-padding-y) 0
}
@media print {
.header-v4 {
display: none
}
}
.header-v4--artists .header-v4__bg {
background-image: url(/assets/images/featured-artists.3330ad1a.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--artists .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--beatmappacks .header-v4__bg {
background-image: url(/assets/images/beatmappacks.5534d5af.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--beatmappacks .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--changelog .header-v4__bg {
background-image: url(/assets/images/changelog.a52af208.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--changelog .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--chat .header-v4__bg {
background-image: url(/assets/images/chat.063c451b.jpg);
filter: hue-rotate(115deg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--chat .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--chat .header-v4__bg:before {
filter: hue-rotate(-115deg)
}
.header-v4--contests .header-v4__bg {
background-image: var(--header-bg,url(/assets/images/contest.7280a17b.jpg))
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--contests .header-v4__bg {
background-image:var(--header-bg-2x,url(/assets/images/[email protected]))
}
}
.header-v4--forum .header-v4__bg {
background-image: var(--forum-cover)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--forum .header-v4__bg {
background-image:var(--forum-cover-2x)
}
}
.header-v4--forums-index .header-v4__bg {
background-image: url(https://lh3.googleusercontent.com/wWTcU93BwGcU0B_pVHAUkMFj6jlM0CLPjJdax-Lv-sLo2uslQrrPSaxTEcUpGJVEA0m665bRfFgwTQX9OxQKbwqVtpinA72j4ceFcQ=w1064-v0)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--forums-index .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--help .header-v4__bg {
background-image: url(/assets/images/wiki.967bda5a.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--help .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--mp-history .header-v4__bg {
background-image: url(/assets/images/mp-history.67640e99.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--mp-history .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--news .header-v4__bg {
background-image: url(/assets/images/news.ecb6aa6d.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--news .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--password-reset .header-v4__bg {
background-image: url(/assets/images/password-reset.bc6cb6e6.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--password-reset .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--rankings .header-v4__bg {
background-image: url(/assets/images/rankings.44275dac.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--rankings .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--search .header-v4__bg {
background-image: url(/assets/images/search.b24a3b21.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--search .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--store .header-v4__bg {
background-image: url(/assets/images/store.927376e6.png);
opacity: .7
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--store .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--supporter .header-v4__bg {
background-image: url(/assets/images/supporter.f6911397.jpg);
opacity: .2
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--supporter .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--tournaments .header-v4__bg {
background-image: url(/assets/images/tournament-v2.578032f2.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.header-v4--tournaments .header-v4__bg {
background-image:url(/assets/images/[email protected])
}
}
.header-v4--users .header-v4__bg {
filter: blur(50px);
opacity: .25
}
.header-v4__bg-container {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.header-v4__container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative
}
@media (min-width: 900px) {
.header-v4__container--main {
min-height:160px;
padding-top: 105px
}
.header-v4--supporter .header-v4__container--main {
min-height: 450px
}
}
.header-v4__content {
color: hsl(var(--hsl-c1));
max-width: 1000px;
position: relative;
width: 100%
}
@media (min-width: 900px) {
.header-v4__content {
max-width:1000px;
width: calc(100% - 40px)
}
}
.header-v4__icon {
align-self: stretch;
background-image: url(/assets/images/home.03d09fb9.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: 75%;
flex: none;
margin-right: 10px;
width: 40px
}
.header-v4--artist .header-v4__icon,.header-v4--artists .header-v4__icon {
background-image: url(/assets/images/artists.b3ab6083.svg)
}
.header-v4--beatmappacks .header-v4__icon {
background-image: url(/assets/images/beatmappacks.7d843dc2.svg)
}
.header-v4--beatmapset .header-v4__icon,.header-v4--beatmapsets .header-v4__icon {
background-image: url(/assets/images/beatmapsets.d82379a6.svg)
}
.header-v4--changelog .header-v4__icon {
background-image: url(/assets/images/changelog.8a893cfc.svg)
}
.header-v4--chat .header-v4__icon,.header-v4--comments .header-v4__icon {
background-image: url(/assets/images/chat.3830b873.svg)
}
.header-v4--contests .header-v4__icon {
background-image: url(/assets/images/contests.a420f096.svg)
}
.header-v4--error .header-v4__icon {
background-image: url(/assets/images/notifications.01fd9e7f.svg)
}
.header-v4--forum .header-v4__icon,.header-v4--forums-index .header-v4__icon {
background-image: url(/assets/images/forum.19afb43f.svg)
}
.header-v4--friends .header-v4__icon {
background-image: url(/assets/images/friends.99553fda.svg)
}
.header-v4--help .header-v4__icon {
background-image: url(/assets/images/help.fbda55b5.svg)
}
.header-v4--home .header-v4__icon {
background-image: url(/assets/images/home.03d09fb9.svg)
}
.header-v4--livestreams .header-v4__icon {
background-image: url(/assets/images/forum.19afb43f.svg)
}
.header-v4--news .header-v4__icon {
background-image: url(/assets/images/news.3ef043dc.svg)
}
.header-v4--notifications .header-v4__icon {
background-image: url(/assets/images/notifications.01fd9e7f.svg)
}
.header-v4--password-reset .header-v4__icon {
background-image: url(/assets/images/settings.70bf1e88.svg)
}
.header-v4--rankings .header-v4__icon {
background-image: url(/assets/images/rankings.ccc9ea7c.svg)
}
.header-v4--search .header-v4__icon {
background-image: url(/assets/images/search.23934b8d.svg)
}
.header-v4--settings .header-v4__icon {
background-image: url(/assets/images/settings.70bf1e88.svg)
}
.header-v4--store .header-v4__icon {
background-image: url(/assets/images/store.1794c8b8.svg)
}
.header-v4--tournaments .header-v4__icon {
background-image: url(/assets/images/tournaments.41f25285.svg)
}
.header-v4--users .header-v4__icon {
background-image: url(/assets/images/profile.c681ffeb.svg)
}
.header-v4__row {
align-items: center;
display: flex;
flex-wrap: wrap;
padding: 0 10px;
}
@media (min-width: 900px) {
.header-v4__row {
padding-left:50px;
padding-right: 50px
}
}
.header-v4__row--bar {
background-color: #00000014;
}
.header-v4__row--title {
background-color: #00000014;
font-size: 14px;
border: solid;
border-radius: 40px;
border-color: rgb(0 0 0 / 0%);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
@media (min-width: 900px) {
.header-v4__row--title {
font-size:20px;
height: 55px
}
.header-v4--beatmapset .header-v4__row {
padding-left: 40px;
padding-right: 40px
}
}
.header-v4__title {
display: none
}
@media (min-width: 900px) {
.header-v4__title {
display:flex
}
}
.icon-dropdown-menu {
align-items: center;
background-color: hsl(var(--hsl-b5));
border-radius: 4px;
cursor: pointer;
display: flex;
height: 32px;
justify-content: center;
margin-right: 10px;
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 32px;
z-index: 512
}
.icon-dropdown-menu,.icon-dropdown-menu:active,.icon-dropdown-menu:focus,.icon-dropdown-menu:hover {
text-decoration: none
}
.icon-dropdown-menu:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: hsla(var(--hsl-b6),.5);
content: "\f078";
display: inline-block;
display: flex;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
height: 100%;
justify-content: center;
left: 0;
line-height: 1;
opacity: 0;
position: absolute;
text-rendering: auto;
top: 0;
width: 100%
}
.icon-dropdown-menu:after.fa-pull-left {
margin-right: .3em
}
.icon-dropdown-menu:after.fa-pull-right {
margin-left: .3em
}
.icon-dropdown-menu:hover:after {
opacity: 1
}
.icon-dropdown-menu--disabled {
background-color: transparent;
cursor: default
}
.icon-dropdown-menu--disabled:after {
display: none
}
.icon-stack {
position: relative
}
.icon-stack__base {
opacity: 0
}
.icon-stack__icon {
left: 0;
position: absolute
}
.icon-stack__icon--bottom {
top: 12%
}
.icon-stack__icon--top {
top: -24%
}
.imagemap {
max-width: -moz-max-content;
max-width: max-content;
overflow: hidden;
position: relative;
border-radius: 20px
}
.imagemap__image {
height: auto;
max-width: 100%;
-o-object-fit: contain;
object-fit: contain;
width: auto
}
.imagemap__link {
display: block;
position: absolute
}
.input-container {
--label-font-size: 12px;
--label-line-height: 1.25;
--label-height: calc(var(--label-font-size)*var(--label-line-height) + var(--label-padding)*2);
--label-colour: hsl(var(--hsl-c2));
--label-padding: 5px;
--label-pointer-events: auto;
--input-bg: hsl(var(--hsl-b6));
--input-border-colour: var(--input-border-base-colour);
--input-border-base-colour: transparent;
--input-border-hover-colour: hsl(var(--hsl-l3));
--input-border-focus-colour: hsl(var(--hsl-l1));
--input-border-error-colour: hsl(var(--hsl-red-2));
--input-border-error-focus-colour: hsl(var(--hsl-red-3));
--input-padding: var(--label-height) var(--input-padding-right) var(--input-padding-base) var(--input-padding-base);
--input-padding-base: 10px;
--input-padding-right: var(--input-padding-base);
display: grid;
font-size: inherit;
font-weight: 400;
margin: 0;
position: relative;
text-transform: none;
width: 100%
}
.input-container:focus-within {
--input-border-colour: var(--input-border-focus-colour)
}
.input-container:hover {
--input-border-colour: var(--input-border-hover-colour)
}
.input-container--2,.input-container--4 {
grid-column-end: span 2
}
@media (min-width: 900px) {
.input-container--4 {
grid-column-end:span 4
}
}
.input-container--beatmap-owner-editor {
--input-bg: hsl(var(--hsl-b6));
--input-padding: 5px
}
.input-container--error {
--input-border-colour: var(--input-border-error-colour);
--input-border-focus-colour: var(--input-border-error-focus-colour);
--input-border-hover-colour: var(--input-border-error-focus-colour)
}
.input-container--fill {
flex: 1;
min-height: 150px
}
.input-container--genre {
--label-colour: hsl(var(--hsl-c1));
--input-bg: transparent;
--input-border-hover-colour: transparent;
--input-border-focus-colour: transparent;
--input-border-error-colour: transparent
}
.input-container--judging {
margin: 20px 0
}
.input-container--search-box {
--input-padding: 15px var(--input-padding-base);
font-size: 18px
}
.input-container--select {
--arrow-width: calc(var(--input-padding-base)*2 + 1em);
--input-padding-right: var(--arrow-width);
--label-pointer-events: none
}
.input-container--select:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
bottom: 0;
content: "\f078";
display: inline-block;
display: inline-flex;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
height: 100%;
justify-content: center;
line-height: 1;
pointer-events: none;
position: absolute;
right: 0;
text-rendering: auto;
width: var(--arrow-width)
}
.input-container--select:after.fa-pull-left {
margin-right: .3em
}
.input-container--select:after.fa-pull-right {
margin-left: .3em
}
.input-container__label {
display: flex;
font-size: var(--label-font-size);
justify-content: space-between;
line-height: var(--label-line-height);
margin: 0;
padding: var(--label-padding) var(--input-padding-base) 0;
pointer-events: var(--label-pointer-events);
position: absolute;
width: 100%
}
.input-text {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background: #1212123b;
border: none;
border-radius: 20px;
color: hsl(var(--hsl-c1));
margin: 0;
outline: none;
padding: 0;
padding: var(--input-padding);
resize: none;
width: 100%
}
.input-text:hover {
box-shadow: inset 0 0 0 2px #727272;
}
.input-text--bbcode {
display: grid;
gap: 5px;
grid-template-rows: 1fr auto;
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025)
}
.input-text--bbcode,.input-text--bbcode * {
scrollbar-width: thin
}
.input-text--bbcode ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.input-text--bbcode ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.input-text--bbcode ::-webkit-scrollbar:horizontal {
height: 10px
}
.input-text--bbcode ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.input-text--bbcode ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
.input-text__bbcode-textarea {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
outline: none;
padding: 0;
resize: none
}
.js-accordion {
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
transform: translateZ(0);
-moz-transform: none
}
.js-accordion__item-body {
overflow: hidden;
transition: height .3s ease-in-out
}
.js-flash-border {
border: 1px solid transparent;
transition: border .2s;
}
.js-flash-border--on {
animation: js-flash-border .4s 2
}
@keyframes js-flash-border {
50% {
border-color: #fc2
}
}
.js-react-modal {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 512
}
.kudosu-box {
display: flex;
gap: 4px
}
.label-toggle__checkbox {
display: none
}
.label-toggle__label--check {
display: block
}
.label-toggle__checkbox:checked~.label-toggle__label--check,.label-toggle__label--uncheck {
display: none
}
.label-toggle__checkbox:checked~.label-toggle__label--uncheck {
display: block
}
.landing-footer-social {
text-align: center;
transform: translateZ(0)
}
.landing-footer-social__icon {
align-items: center;
border: 3px solid #fff;
border-radius: 50%;
color: #fff;
display: inline-flex;
font-size: 16px;
height: 40px;
justify-content: center;
margin: 0 5px;
text-decoration: none;
width: 40px
}
.landing-footer-social__icon:active,.landing-footer-social__icon:focus,.landing-footer-social__icon:hover {
color: #fff;
text-decoration: none
}
.landing-footer-social__icon--support:focus,.landing-footer-social__icon--support:hover {
color: #f6a
}
.landing-footer-social__icon--twitter:focus,.landing-footer-social__icon--twitter:hover {
color: #1d9bf0
}
.landing-graph {
height: 100%;
width: 100%
}
.landing-graph__area {
fill: #b17
}
.landing-graph__circle {
fill: none;
stroke-width: 2;
stroke: #fff
}
.landing-graph__text {
fill: #fff;
font-size: 10px;
pointer-events: none;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.landing-hero {
align-items: center;
background-color: #333;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
height: 450px;
justify-content: flex-end;
position: relative
}
.landing-hero__bg {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%
}
.landing-hero__bg-container,.landing-hero__bg-container:after {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.landing-hero__bg-container:after {
background-color: hsla(var(--hsl-b6),.5);
content: ""
}
.landing-hero__graph {
bottom: 0;
height: 70px;
left: 0;
position: absolute;
width: 100%
}
.landing-hero__info {
color: #fff;
font-size: 12px;
left: 0;
padding: 30px 50px;
position: absolute;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
top: 0;
width: 100%
}
@media (min-width: 900px) {
.landing-hero__info {
text-align:right
}
}
.landing-hero__logo {
background-image: url(/assets/images/osu-logo.90f2a9c6.png);
background-size: contain;
flex: none;
height: 100px;
margin-bottom: -3px;
transition: all 1s;
width: 100px;
will-change: opacity
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.landing-hero__logo {
background-image:url(/assets/images/[email protected])
}
}
@media (min-width: 900px) {
.landing-hero__logo {
opacity:0
}
}
.landing-hero__message-extra {
align-items: center;
display: flex;
flex-direction: column;
position: absolute;
width: 100%
}
@media (min-width: 900px) {
.landing-hero__message-extra {
align-items:flex-end
}
}
.landing-hero__message-extra--bottom {
margin-top: 20px;
top: 100%
}
.landing-hero__message-extra--top {
bottom: 100%;
margin-bottom: 20px
}
.landing-hero__message-extra-container {
height: 0;
position: relative
}
.landing-hero__messages {
padding: 0 50px;
position: relative;
text-align: center;
width: 100%
}
@media (min-width: 900px) {
.landing-hero__messages {
text-align:right
}
}
.landing-hero__pippi {
background-image: url(/assets/images/pippi.452b13ba.png);
background-size: contain;
bottom: 1px;
height: 466px;
left: 0;
margin-left: 50px;
max-width: 328px;
position: absolute;
transform: translateZ(0);
transition: all 1s;
width: calc(100% - 50px)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.landing-hero__pippi {
background-image:url(/assets/images/[email protected])
}
}
@media (max-width: 899px) {
.landing-hero__pippi {
opacity:0
}
}
.landing-hero__pippi-logo {
background-image: url(/assets/images/logo.a0baa79a.png);
background-size: contain;
height: 100%;
width: 100%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.landing-hero__pippi-logo {
background-image:url(/assets/images/[email protected])
}
}
.landing-hero__slogan-main {
color: #fff;
font-size: 24px;
margin: 0 0 5px;
padding: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.landing-hero__slogan-sub {
color: #f9c;
font-size: 16px;
margin: 0;
padding: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.landing-nav {
display: flex;
font-size: 12px;
justify-content: space-between;
padding: 30px 20px 20px
}
.landing-nav__section {
display: flex;
margin: 0 -12px
}
.landing-nav__link {
align-items: center;
color: #fff;
cursor: pointer;
display: flex;
margin: 0 12px;
text-transform: lowercase;
white-space: nowrap
}
.landing-nav__link,.landing-nav__link:active,.landing-nav__link:focus,.landing-nav__link:hover {
text-decoration: none
}
.landing-nav__link:focus,.landing-nav__link:hover {
color: #f6a
}
.landing-nav__link--bold {
font-weight: 700
}
.landing-nav__link--locale {
color: #86e;
margin: 0;
padding: 5px 0
}
.landing-nav__locale-button:focus .landing-nav__link--locale,.landing-nav__locale-button:hover .landing-nav__link--locale {
color: #fff
}
.landing-nav__locale-button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
outline: none;
padding: 0 10px 0 0
}
.landing-nav__locale-flag {
margin-right: 5px
}
.landing-nav__locale-link-pointer {
color: #aaa;
font-size: 75%;
margin-right: 5px;
opacity: 0;
text-align: right;
transform: translateZ(0);
width: 10px
}
.landing-nav__locale-button:hover .landing-nav__locale-link-pointer {
opacity: 1
}
.landing-nav__locale-menu {
background-color: #333;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex-direction: column;
left: 0;
margin-left: -8px;
margin-top: 10px;
padding: 5px 10px 5px 5px;
position: absolute;
top: 100%;
z-index: 999
}
.landing-nav__locale-menu:before {
bottom: 100%;
content: "";
display: block;
height: 10px;
left: 0;
opacity: 0;
position: absolute;
width: 100%
}
.landing-nav__locale-menu-link {
display: flex;
position: relative
}
.landing-news {
padding: 10px 0
}
.landing-news__posts {
display: flex;
flex-direction: column
}
@media (min-width: 900px) {
.landing-news__posts {
flex-direction:row;
margin: 0 -10px
}
}
.landing-news__link {
display: flex;
justify-content: center;
padding: 10px;
width: 100%
}
.landing-sitemap {
grid-gap: 10px;
display: grid;
margin: 35px auto;
max-width: 800px
}
@media (min-width: 900px) {
.landing-sitemap {
grid-template-columns:repeat(3,1fr)
}
}
@media (max-width: 899px) {
.landing-sitemap {
text-align:center
}
}
.landing-sitemap__header {
color: #fff;
font-size: 13px;
font-weight: 700
}
.landing-sitemap__link {
color: #fde;
font-size: 12px
}
.landing-sitemap__link:focus,.landing-sitemap__link:hover {
color: #fff;
text-decoration: none
}
.landing-sitemap__list {
list-style-type: none;
margin: 0;
padding: 0
}
.lazy-load {
min-height: 150px
}
.lazy-load--loading {
align-items: center;
display: flex;
justify-content: center
}
.lazy-load__button {
text-align: center
}
.lazy-load__error {
color: hsl(var(--hsl-f1));
display: flex;
flex-direction: column
}
.legacy-api-details {
display: grid;
gap: 10px;
grid-template-columns: 1fr auto
}
.legacy-api-details__actions {
display: flex;
flex-direction: column;
gap: 10px
}
@media (min-width: 900px) {
.legacy-api-details__actions {
align-items:baseline;
flex-direction: row
}
}
.legacy-api-details__content {
display: flex;
flex-direction: column;
gap: 10px;
overflow-wrap: anywhere
}
.legacy-api-details__entry {
overflow-wrap: anywhere
}
.legacy-api-details__label {
font-size: 12px
}
.legacy-api-details__value {
font-size: 14px
}
.line-chart {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.line-chart__axis {
font-family: inherit;
font-size: inherit
}
.line-chart__hover {
pointer-events: none;
position: relative
}
.line-chart__hover-area {
display: grid;
position: absolute
}
.line-chart__hover-circle {
background-color: #fff;
border: 3px solid #b17;
border-radius: 50%;
height: 12px;
left: -6px;
position: relative;
top: -6px;
width: 12px
}
.line-chart--profile-page .line-chart__hover-circle {
background-color: hsl(var(--hsl-b5));
border-color: #fc2;
border-radius: 50%;
border-width: 4px;
height: 20px;
left: -10px;
top: -10px;
width: 20px
}
.line-chart__hover-line {
background-color: #b17;
height: 100%;
left: -1.5px;
position: absolute;
top: 0;
width: 3px
}
.line-chart--profile-page .line-chart__hover-line {
background-color: #fc2;
left: -1px;
width: 2px
}
.line-chart__hover-info-box {
background-color: hsl(var(--hsl-b6));
border-radius: 10px;
display: flex;
flex-direction: column;
font-size: 12px;
left: 0;
margin: 5px;
padding: 10px;
position: absolute;
top: 0
}
.line-chart__hover-info-box[data-float=right] {
left: auto;
right: 0
}
.line-chart__hover-info-box-text {
white-space: nowrap
}
.line-chart--profile-page .line-chart__hover-info-box-text--x {
color: hsl(var(--hsl-l1));
order: 1
}
.line-chart--profile-page .line-chart__hover-info-box-text--y {
color: #fff
}
.line-chart__line {
fill: none;
stroke: #b17;
stroke-width: 3px
}
.line-chart--profile-page .line-chart__line {
stroke: #fc2;
stroke-width: 2px
}
.line-chart__tick-gradient--end {
stop-color: #ccc
}
.line-chart__tick-gradient--start {
stop-color: #fff
}
.line-chart__tick-line {
fill: none;
stroke-width: 1px;
shape-rendering: crispEdges
}
.line-chart__tick-line--default {
stroke: #ccc
}
.line-chart--profile-page .line-chart__tick-line--default {
stroke: hsl(var(--hsl-b6))
}
.line-chart__tick-text {
fill: #fff;
font-size: 12px
}
.line-chart__tick-text--strong {
font-weight: 700
}
.line-chart--profile-page .line-chart__tick-text {
fill: #cfcfcf;
}
.link--white,.link--white:active,.link--white:focus,.link--white:hover {
color: #fff
}
.link--no-underline,.link--no-underline:active,.link--no-underline:focus,.link--no-underline:hover {
text-decoration: none
}
.livestream-featured {
position: relative
}
.livestream-featured:before {
content: "";
display: block;
padding-bottom: 56.25%;
width: 100%
}
.livestream-featured__actions {
bottom: 30px;
display: flex;
justify-content: center;
opacity: 0;
position: absolute;
right: 0;
width: 0;
will-change: opacity
}
.livestream-featured:hover .livestream-featured__actions {
opacity: 1
}
.livestream-featured__content {
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: opacity 1s;
width: 100%
}
.livestream-featured__content:link {
text-decoration: none
}
.livestream-featured__info {
background-image: linear-gradient(transparent,#000);
bottom: 0;
left: 0;
padding: 30px 40px;
position: absolute;
width: 100%
}
.livestream-featured__text {
color: #fff;
margin: 0
}
.livestream-featured__text--detail {
font-size: 15px;
margin-top: 10px
}
.livestream-featured__text--name {
font-size: 30px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.livestream-item {
position: relative
}
.livestream-item__actions {
display: flex;
justify-content: center;
opacity: 0;
position: absolute;
right: 0;
top: 10px;
width: 0;
will-change: opacity
}
.livestream-item:hover .livestream-item__actions {
opacity: 1
}
.livestream-item__content:link {
text-decoration: none
}
.livestream-item__image {
background-size: cover;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
padding-top: 56.25%;
width: 100%
}
.livestream-item:hover .livestream-item__image {
box-shadow: 0 10px 20px rgba(0,0,0,.25)
}
.livestream-item__text {
font-weight: 600;
margin: 5px 0 0;
text-align: center
}
.livestream-item__text--detail {
color: #b2b2b2;
font-size: 10px
}
.livestream-item__text--name {
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.livestream-page {
padding: 20px 10px
}
@media (min-width: 900px) {
.livestream-page {
padding-left:50px;
padding-right: 50px
}
}
.livestream-page__header {
color: hsl(var(--hsl-l1));
font-size: 15px;
margin: 0
}
.livestream-page__item {
margin: 10px;
width: calc(100% - 20px)
}
@media (min-width: 900px) {
.livestream-page__item {
width:calc(50% - 20px)
}
}
.livestream-page__items {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px
}
.loading-overlay {
align-items: center;
backface-visibility: hidden;
display: flex;
justify-content: center;
opacity: 0;
pointer-events: none;
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 9998
}
.loading-overlay,.loading-overlay:before {
height: 100%;
left: 0;
top: 0;
width: 100%;
will-change: opacity
}
.loading-overlay:before {
background-color: #000;
content: "";
position: absolute
}
.loading-overlay--visible {
opacity: 1;
pointer-events: auto
}
.loading-overlay--visible:before {
animation: loading-overlay--background-color 10s linear 1;
animation-fill-mode: forwards
}
.loading-overlay__container {
height: 64px;
position: relative;
width: 256px
}
.loading-overlay__circle {
animation-duration: 1.6s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 3px solid #fff;
height: 64px;
position: absolute;
width: 64px;
will-change: transform,opacity
}
.loading-overlay__circle--1 {
background-color: #86e;
border-color: #86e;
left: 0;
top: 0
}
.loading-overlay__circle--2 {
animation-delay: .4s;
background-color: #f5c;
border-color: #f5c;
left: 25%;
top: 100%
}
.loading-overlay__circle--3 {
animation-delay: .8s;
background-color: #6cf;
border-color: #6cf;
left: 50%;
top: 0
}
.loading-overlay__circle--4 {
animation-delay: 1.2s;
background-color: #fc2;
border-color: #fc2;
left: 75%;
top: 100%
}
.loading-overlay__circle--approach {
background-color: transparent;
border-radius: 100%
}
.loading-overlay--visible .loading-overlay__circle--approach {
animation-name: loading-overlay--circle-approach
}
.loading-overlay__circle--hit {
border-color: #fff;
border-radius: 100%;
box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.loading-overlay--visible .loading-overlay__circle--hit {
animation-name: loading-overlay--circle-burst
}
.loading-overlay__follow-point {
align-items: center;
animation-duration: 1.6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
color: #fff;
display: flex;
font-size: 24px;
font-weight: 700;
height: 0;
justify-content: center;
opacity: 0;
position: absolute;
top: 100%;
width: 0;
will-change: opacity
}
.loading-overlay--visible .loading-overlay__follow-point {
animation-name: loading-overlay--follow-point
}
.loading-overlay__follow-point--1 {
animation-delay: .05s;
left: 25%;
transform: rotate(45deg)
}
.loading-overlay__follow-point--2 {
animation-delay: .45s;
left: 50%;
transform: rotate(-45deg)
}
.loading-overlay__follow-point--3 {
animation-delay: .85s;
left: 75%;
transform: rotate(45deg)
}
.loading-overlay__follow-point--4 {
display: none
}
@keyframes loading-overlay--circle-approach {
0% {
opacity: 0;
transform: scale(1)
}
20% {
opacity: 1;
transform: scale(.5)
}
20.1%,to {
opacity: 0;
transform: scale(.5)
}
}
@keyframes loading-overlay--circle-burst {
0% {
opacity: 0;
transform: scale(.5)
}
20% {
opacity: 1;
transform: scale(.5)
}
40%,to {
opacity: 0;
transform: scale(1)
}
}
@keyframes loading-overlay--background-color {
0% {
opacity: 0
}
10% {
opacity: .5
}
to {
opacity: .7
}
}
@keyframes loading-overlay--follow-point {
10% {
opacity: .8
}
40% {
opacity: .8
}
50% {
opacity: 0
}
}
.login-box {
position: fixed;
top: 50px;
width: 100%;
z-index: 999
}
@media (min-width: 900px) {
.login-box {
top:90px;
transition: top var(--header-pinned-animation-duration)
}
.js-header-is-pinned .login-box {
top: 50px
}
.login-box--landing {
position: relative;
top: 0
}
}
.login-box__content {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: #999;
display: flex;
flex-direction: column;
font-size: 12px;
overflow: hidden;
position: absolute;
top: 0;
transform: translateZ(0);
transition: none;
width: 100%
}
@media (min-width: 900px) {
.login-box__content {
border-radius:4px;
margin-top: 5px;
width: 300px
}
.login-box__content--captcha {
width: 342px
}
}
.login-box__action {
margin: 5px
}
.login-box__form-input {
background-color: #222;
border: none;
border-radius: 4px;
font-size: 16px;
margin-bottom: 5px;
outline: none;
padding: 10px 5px
}
@media (min-width: 900px) {
.login-box__form-input {
font-size:inherit
}
}
.login-box__form-input::-moz-placeholder {
color: #777
}
.login-box__form-input::placeholder {
color: #777
}
.login-box__link {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #fc2;
font-size: 14px;
margin: 0;
outline: none;
padding: 0
}
.login-box__link:focus,.login-box__link:hover {
color: #fff;
text-decoration: none
}
.login-box__row {
display: flex;
flex: none;
margin: 0 0 10px
}
.login-box__row--actions {
align-items: center;
justify-content: flex-end;
margin: -5px -5px 5px;
white-space: nowrap
}
.login-box__row--error {
color: #a8f
}
.login-box__row--error:empty {
display: none
}
.login-box__row--inputs {
flex-direction: column;
margin-bottom: 5px
}
.login-box__row--title {
color: #fff;
font-size: 15px;
font-style: normal;
margin-bottom: 20px
}
.login-box__section {
display: flex;
flex: none;
flex-direction: column;
padding: 20px 20px 0
}
.login-box__section--login {
background-color: #333
}
.login-box__section--register {
background-color: #444
}
.logo {
display: flex;
height: 100px;
width: 100px
}
.logo__main {
background-image: url(/assets/images/osu-logo.90f2a9c6.png);
background-size: contain;
height: 100%;
position: absolute;
width: 100%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.logo__main {
background-image:url(/assets/images/[email protected])
}
}
.love-beatmap-dialog {
background-color: hsl(var(--hsl-b5));
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: grid;
grid-template-rows: auto 1fr auto;
margin: 10px;
max-height: 80vh;
max-width: 1000px;
padding-bottom: 20px;
padding-top: 20px;
width: 100%
}
@media (min-width: 900px) {
.love-beatmap-dialog {
margin:20px;
max-width: 1000px;
width: calc(100% - 40px);
width: auto
}
}
.love-beatmap-dialog__diff-list {
list-style: none;
padding: 0
}
.love-beatmap-dialog__diff-list-item {
margin-bottom: 5px
}
.love-beatmap-dialog__diff-mode {
position: relative
}
@media (min-width: 900px) {
.love-beatmap-dialog__diff-mode {
overflow-y:auto
}
}
.love-beatmap-dialog__diff-mode-title {
background-color: hsl(var(--hsl-b5));
border-bottom: 1px solid #fff;
margin-bottom: 5px;
padding-bottom: 5px;
position: sticky;
top: 0
}
.love-beatmap-dialog__diff-mode-title-label {
font-size: 14px
}
.love-beatmap-dialog__row {
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.love-beatmap-dialog__row {
padding-left:50px;
padding-right: 50px
}
}
.love-beatmap-dialog__row--content {
-moz-column-gap: 10px;
column-gap: 10px;
display: grid;
font-size: 12px;
grid-template-columns: 1fr;
overflow-y: auto
}
@media (min-width: 900px) {
.love-beatmap-dialog__row--content {
grid-auto-columns:1fr;
grid-auto-flow: column;
overflow-y: hidden
}
}
.love-beatmap-dialog__row--footer {
-moz-column-gap: 5px;
column-gap: 5px;
display: flex;
justify-content: flex-end;
margin-top: 20px
}
.love-beatmap-dialog__row--title {
font-size: 16px;
margin-bottom: 20px
}
.love-beatmap-dialog__switch {
align-items: baseline;
cursor: pointer;
display: flex;
font-size: inherit;
font-weight: 400;
margin: 0;
text-transform: none
}
.medals-group {
display: grid;
gap: 20px
}
@media (min-width: 900px) {
.medals-group {
gap:40px;
grid-template-columns: 1fr 1fr
}
}
.medals-group__group {
border-radius: 4px;
display: inline-flex;
flex-direction: column
}
.medals-group__medal {
display: inline-block;
height: 76px;
margin: 10px 0;
min-width: 80px;
width: 25%
}
.medals-group__title {
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 700;
margin: 0;
padding: 10px 0 0;
position: relative
}
.medals-group__title:before {
background-color: hsl(var(--hsl-h1));
border-radius: 10000px;
content: "";
height: 2px;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.menu-image {
--index: 0;
height: 100%;
left: calc(100%*var(--index));
position: absolute;
width: 100%;
}
.menu-image__image {
display: block;
height: 100%;
margin: auto;
max-width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.menu-images {
--arrow-opacity-desktop: 0;
--indicators-opacity: 1;
position: relative;
}
.menu-images:hover {
--arrow-opacity-desktop: 1
}
.menu-images--placeholder {
--indicators-opacity: 0
}
.menu-images__arrow {
--padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
height: 100%;
margin: 0;
outline: none;
padding: 0;
padding: var(--padding) calc(var(--page-gutter) + var(--padding));
position: absolute;
top: 0;
transition: all .12s ease-in-out
}
@media (min-width: 900px) {
.menu-images__arrow {
opacity:var(--arrow-opacity-desktop)
}
}
.menu-images__arrow:hover {
color: #c0c0c0
}
.menu-images__arrow--left {
--icon: "\f053";
left: 0;
padding-right: var(--padding)
}
.menu-images__arrow--right {
--icon: "\f054";
padding-left: var(--padding);
right: 0
}
.menu-images__arrow:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: var(--icon);
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
text-rendering: auto;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.menu-images__arrow:before.fa-pull-left {
margin-right: .3em
}
.menu-images__arrow:before.fa-pull-right {
margin-left: .3em
}
.menu-images__blur {
transition: opacity .6s;
will-change: opacity;
}
.menu-images__blur:before {
background: var(--url);
background-position: 50%;
background-size: cover;
filter: blur(50px);
}
.menu-images__blur:after,.menu-images__blur:before {
content: "";
height: 10%;
position: absolute;
top: 0;
width: 90%;
top: 30%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.menu-images__container {
display: flex;
height: 100%;
transform: translateX(calc(-100%*var(--index, 0)));
width: 100%;
}
.menu-images__container--transition {
transition: transform .3s ease-in-out
}
.menu-images__images {
align-items: center;
display: inline-flex;
display: flex;
height: 120px;
justify-content: center;
overflow: hidden;
position: relative;
background-color: #00000014;
}
.menu-images__indicator {
--content-height: 2px;
--content-opacity: 0.5;
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: flex;
height: 16px;
margin: 0;
outline: none;
padding: 5px;
width: 40px
}
.menu-images__indicator:before {
background: white;
border-radius: 10000px;
content: "";
height: var(--content-height);
opacity: var(--content-opacity);
transition: .1s ease-out;
transition-property: height,opacity;
width: 100%
}
.menu-images__indicator:hover {
--content-height: 100%
}
.menu-images__indicator--active {
--content-height: 100%;
--content-opacity: 1
}
.menu-images__indicators {
align-items: center;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
opacity: var(--indicators-opacity);
padding: 0 var(--page-gutter);
position: absolute;
transform: translateY(50%);
width: 100%
}
.message-length-counter {
color: hsl(var(--hsl-f1));
font-size: 12px;
text-align: right
}
.message-length-counter--almost-over {
color: #ea0
}
.message-length-counter--discussion {
margin-top: 5px
}
.message-length-counter--over {
color: #ed1221;
font-weight: 700
}
.mobile-menu {
display: none;
position: fixed;
top: 50px;
width: 100%;
z-index: var(--z-index--nav-bar-mobile)
}
.mobile-menu,.mobile-menu:active,.mobile-menu:focus,.mobile-menu:hover {
color: hsl(var(--hsl-c1))
}
.mobile-menu__content {
-webkit-overflow-scrolling: touch;
background-color: hsl(var(--hsl-b5));
display: grid;
grid-template-rows: auto 1fr;
max-height: calc(var(--vh, 1vh)*100 - 50px)
}
.mobile-menu__item {
display: none;
overflow-y: scroll
}
.mobile-menu__item--search {
overflow-y: auto
}
.mobile-menu__item.js-click-menu--active {
display: flex;
flex: 1;
flex-direction: column
}
.mobile-menu__tabs {
background-color: hsl(var(--hsl-d4));
display: flex
}
.mobile-menu-tab {
--height: 40px;
--hover-line-margin: 25%;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-l3));
flex: none;
height: var(--height);
margin: 0;
outline: none;
padding: 0;
position: relative;
width: var(--height)
}
.mobile-menu-tab,.mobile-menu-tab:active,.mobile-menu-tab:focus,.mobile-menu-tab:hover {
text-decoration: none
}
.mobile-menu-tab--user {
--avatar-spacing: 8px;
--hover-line-margin: var(--avatar-spacing);
align-items: center;
display: flex;
flex: 1;
margin-right: auto;
max-width: -moz-max-content;
max-width: max-content;
min-width: 0;
padding: var(--avatar-spacing)
}
.mobile-menu-tab.js-click-menu--active,.mobile-menu-tab:hover {
color: hsl(var(--hsl-c1))
}
.mobile-menu-tab.js-click-menu--active:before,.mobile-menu-tab:hover:before {
background-color: hsl(var(--hsl-h1));
border-radius: 10000px;
bottom: -2px;
content: "";
display: block;
height: 4px;
left: var(--hover-line-margin);
position: absolute;
right: var(--hover-line-margin);
z-index: 1
}
.mobile-menu-tab__avatar {
flex: none;
height: calc(var(--height) - var(--avatar-spacing)*2);
margin-right: var(--avatar-spacing);
position: relative;
width: calc(var(--height) - var(--avatar-spacing)*2)
}
.mod {
--generic-display: flex;
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: flex;
height: var(--mod-height,22px);
position: relative;
width: calc(var(--mod-height, 22px)*45/32)
}
.mod--4K {
--generic-display: none;
background-image: url(/assets/images/mod_4K.fb93bec4.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--4K {
background-image:url(/assets/images/[email protected])
}
}
.mod--5K {
--generic-display: none;
background-image: url(/assets/images/mod_5K.c5928e1c.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--5K {
background-image:url(/assets/images/[email protected])
}
}
.mod--6K {
--generic-display: none;
background-image: url(/assets/images/mod_6K.1050cc50.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--6K {
background-image:url(/assets/images/[email protected])
}
}
.mod--7K {
--generic-display: none;
background-image: url(/assets/images/mod_7K.f8a7b7cc.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--7K {
background-image:url(/assets/images/[email protected])
}
}
.mod--8K {
--generic-display: none;
background-image: url(/assets/images/mod_8K.13caafe8.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--8K {
background-image:url(/assets/images/[email protected])
}
}
.mod--9K {
--generic-display: none;
background-image: url(/assets/images/mod_9K.ffde81fe.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--9K {
background-image:url(/assets/images/[email protected])
}
}
.mod--AP {
--generic-display: none;
background-image: url(/assets/images/mod_autopilot.31c6ca71.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--AP {
background-image:url(/assets/images/[email protected])
}
}
.mod--CL {
--generic-display: none;
background-image: url(/assets/images/mod_classic.b979d28c.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--CL {
background-image:url(/assets/images/[email protected])
}
}
.mod--DT {
--generic-display: none;
background-image: url(/assets/images/mod_double-time.348a64d3.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--DT {
background-image:url(/assets/images/[email protected])
}
}
.mod--EZ {
--generic-display: none;
background-image: url(/assets/images/mod_easy.076c7e8c.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--EZ {
background-image:url(/assets/images/[email protected])
}
}
.mod--FI {
--generic-display: none;
background-image: url(/assets/images/mod_fader.b863efe4.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--FI {
background-image:url(/assets/images/[email protected])
}
}
.mod--FL {
--generic-display: none;
background-image: url(/assets/images/mod_flashlight.be8ff220.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--FL {
background-image:url(/assets/images/[email protected])
}
}
.mod--HD {
--generic-display: none;
background-image: url(/assets/images/mod_hidden.cfc32448.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--HD {
background-image:url(/assets/images/[email protected])
}
}
.mod--HR {
--generic-display: none;
background-image: url(/assets/images/mod_hard-rock.52c35a3a.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--HR {
background-image:url(/assets/images/[email protected])
}
}
.mod--HT {
--generic-display: none;
background-image: url(/assets/images/mod_half.3e707fd4.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--HT {
background-image:url(/assets/images/[email protected])
}
}
.mod--MR {
--generic-display: none;
background-image: url(/assets/images/mod_mirror.f733b7e1.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--MR {
background-image:url(/assets/images/[email protected])
}
}
.mod--NC {
--generic-display: none;
background-image: url(/assets/images/mod_nightcore.240c22f2.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--NC {
background-image:url(/assets/images/[email protected])
}
}
.mod--NF {
--generic-display: none;
background-image: url(/assets/images/mod_no-fail.ca1a6374.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--NF {
background-image:url(/assets/images/[email protected])
}
}
.mod--NM {
--generic-display: none;
background-image: url(/assets/images/mod_no-mod.d04b9d35.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--NM {
background-image:url(/assets/images/[email protected])
}
}
.mod--PF {
--generic-display: none;
background-image: url(/assets/images/mod_perfect.460b6e49.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--PF {
background-image:url(/assets/images/[email protected])
}
}
.mod--RD {
--generic-display: none;
background-image: url(/assets/images/mod_random.2993d4aa.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--RD {
background-image:url(/assets/images/[email protected])
}
}
.mod--RX {
--generic-display: none;
background-image: url(/assets/images/mod_relax.dbcfb8d8.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--RX {
background-image:url(/assets/images/[email protected])
}
}
.mod--SD {
--generic-display: none;
background-image: url(/assets/images/mod_sudden-death.d0df65c7.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--SD {
background-image:url(/assets/images/[email protected])
}
}
.mod--SO {
--generic-display: none;
background-image: url(/assets/images/mod_spun-out.989be71e.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--SO {
background-image:url(/assets/images/[email protected])
}
}
.mod--TD {
--generic-display: none;
background-image: url(/assets/images/mod_touchdevice.e5fa4271.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--TD {
background-image:url(/assets/images/[email protected])
}
}
.mod--V2 {
--generic-display: none;
background-image: url(/assets/images/mod_v2.b0604865.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod--V2 {
background-image:url(/assets/images/[email protected])
}
}
.mod--type-Automation {
--type-bg: url(/assets/images/Automation.c80c61e2.png);
--type-bg-2x: url(/assets/images/[email protected])
}
.mod--type-Conversion {
--type-bg: url(/assets/images/Conversion.22730d89.png);
--type-bg-2x: url(/assets/images/[email protected])
}
.mod--type-DifficultyIncrease {
--type-bg: url(/assets/images/DifficultyIncrease.4ccbf81b.png);
--type-bg-2x: url(/assets/images/[email protected])
}
.mod--type-DifficultyReduction {
--type-bg: url(/assets/images/DifficultyReduction.552609e2.png);
--type-bg-2x: url(/assets/images/[email protected])
}
.mod--type-Fun {
--type-bg: url(/assets/images/Fun.487f9231.png);
--type-bg-2x: url(/assets/images/[email protected])
}
.mod:before {
background-image: var(--type-bg);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
content: "";
display: var(--generic-display);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod:before {
background-image:var(--type-bg-2x)
}
}
.mod:after {
align-items: center;
color: #545454;
content: attr(data-acronym);
display: var(--generic-display);
font-family: Venera,sans-serif;
font-size: 8px;
height: 100%;
justify-content: center;
left: 0;
padding-right: 1px;
padding-top: 1px;
position: absolute;
top: 0;
width: 100%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.mod:after {
font-size:9px
}
}
.modding-profile-list--votes {
display: flex;
flex-wrap: wrap
}
.modding-profile-list__thumbnail {
margin: 20px 10px
}
.modding-profile-list__empty {
color: hsl(var(--hsl-f1));
margin-bottom: 10px
}
.modding-profile-list--index .modding-profile-list__empty {
margin-top: 20px;
text-align: center
}
.modding-profile-list__row {
display: flex
}
.modding-profile-list__show-more {
color: hsl(var(--hsl-f1));
display: block;
font-size: 12px;
margin-top: 20px;
text-align: center;
text-decoration: none
}
.modding-profile-list__show-more:active,.modding-profile-list__show-more:focus,.modding-profile-list__show-more:hover {
text-decoration: none
}
.modding-profile-list__timestamp {
flex-shrink: 0;
width: 110px
}
.modding-profile-vote-card {
align-items: center;
background: hsl(var(--hsl-b3));
border-radius: 4px;
display: flex;
flex: none;
margin: 5px;
min-width: 275px;
overflow: hidden;
padding: 10px
}
.modding-profile-vote-card__avatar {
flex: none;
height: 40px;
width: 40px
}
.modding-profile-vote-card__content {
display: flex;
flex: none;
flex-direction: column;
min-width: 0;
padding: 10px 15px
}
@media (min-width: 900px) {
.modding-profile-vote-card__content {
flex:1;
flex-direction: row
}
.modding-profile-vote-card--reply .modding-profile-vote-card__content {
padding-left: 60px;
padding-right: 60px
}
}
.modding-profile-vote-card--new-reply .modding-profile-vote-card__content {
padding-bottom: 0
}
.modding-profile-vote-card__user {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
height: 40px;
justify-content: center;
margin: 0 5px
}
.modding-profile-vote-card__user-badge {
margin-top: 5px;
min-height: 16px
}
.modding-profile-vote-card__user-link {
color: hsl(var(--hsl-c1))
}
.modding-profile-vote-card__user-row {
align-items: baseline;
display: flex
}
.modding-profile-vote-card__user-stripe {
align-self: stretch;
background-color: var(--group-colour,hsl(var(--hsl-b5)));
border-radius: 1px;
flex: none;
width: 2px
}
.modding-profile-vote-card__user-text {
font-size: 13px;
font-weight: 700;
max-width: 120px
}
.modding-profile-vote-card__votes-container {
align-items: center;
display: flex;
flex-direction: column;
margin-left: 5px;
width: 50px
}
.modding-profile-vote-card__score {
font-size: 18px
}
.modding-profile-vote-card__count {
color: hsl(var(--hsl-f1));
font-size: 9px
}
.mp-history-content {
display: flex;
flex-direction: column;
margin: -10px 0
}
.mp-history-content__autoload-label {
margin-bottom: 5px
}
.mp-history-content__item {
margin: 10px 0
}
.mp-history-content__item--event {
align-self: center;
background-color: hsl(var(--hsl-b4));
margin: 0;
max-width: 640px;
padding: 2px 0;
width: 100%
}
.mp-history-content__item--event-open {
border-radius: 4px 4px 0 0;
margin-top: 10px;
padding-top: 15px
}
.mp-history-content__item--event-close {
border-radius: 0 0 4px 4px;
margin-bottom: 10px;
padding-bottom: 15px
}
.mp-history-content__item--more {
align-items: center;
display: flex;
flex-direction: column;
font-size: 12px
}
.mp-history-event {
align-items: center;
display: flex
}
.mp-history-event__time {
color: hsl(var(--hsl-c2));
font-size: 10px;
font-weight: 700;
margin-right: 10px;
text-align: right;
width: 65px
}
@media (min-width: 900px) {
.mp-history-event__time {
width:85px
}
}
.mp-history-event__type {
align-items: center;
display: flex;
font-size: 12px;
justify-content: space-around;
margin-right: 10px;
width: 25px
}
.mp-history-event__type--player-joined {
color: hsl(var(--hsl-green-3))
}
.mp-history-event__type--player-kicked,.mp-history-event__type--player-left {
color: hsl(var(--hsl-orange-3))
}
.mp-history-event__type--match-created {
color: hsl(var(--hsl-green-3))
}
.mp-history-event__type--match-disbanded {
color: hsl(var(--hsl-orange-3))
}
.mp-history-event__type--host-changed {
color: hsl(var(--hsl-green-3))
}
.mp-history-event__text {
color: hsl(var(--hsl-c1));
flex: 1;
font-size: 12px;
padding-right: 20px
}
.mp-history-event__username {
font-weight: 700
}
.mp-history-game {
border-radius: 4px;
width: 100%
}
.mp-history-game__header {
--border-radius: 4px 4px 0 0;
border-radius: var(--border-radius);
display: block;
height: 100px;
position: relative;
width: 100%
}
@media (min-width: 900px) {
.mp-history-game__header {
height:150px
}
}
.mp-history-game__header-overlay {
background-color: #000;
border-radius: 4px 4px 0 0;
height: 100%;
opacity: .5;
width: 100%
}
.mp-history-game__stats-box {
display: flex;
flex-direction: column;
left: 10px;
position: absolute;
top: 10px
}
@media (min-width: 900px) {
.mp-history-game__stats-box {
flex-direction:row
}
}
.mp-history-game__stat {
color: hsl(var(--hsl-c1));
font-size: 10px;
padding-right: 15px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
@media (min-width: 900px) {
.mp-history-game__stat {
font-size:14px
}
}
.mp-history-game__metadata-box {
bottom: 10px;
left: 10px;
position: absolute;
width: calc(100% - 70px)
}
.mp-history-game__metadata {
color: hsl(var(--hsl-c1));
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.mp-history-game__metadata--title {
font-size: 16px;
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
@media (min-width: 900px) {
.mp-history-game__metadata--title {
font-size:20px
}
}
.mp-history-game__metadata--artist {
font-size: 14px
}
.mp-history-game__mods {
--mod-height: 32px;
display: flex;
position: absolute;
right: 10px;
top: 10px
}
.mp-history-game__team-type {
background-size: contain;
bottom: 10px;
height: 40px;
position: absolute;
right: 10px;
width: 40px
}
.mp-history-game__player-scores {
background-color: hsl(var(--hsl-b3));
padding: 10px
}
.mp-history-game__player-scores--no-teams,.mp-history-game__player-scores:last-child {
border-radius: 0 0 4px 4px
}
.mp-history-game__player-score {
background-color: hsl(var(--hsl-b2));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
height: 125px;
margin-bottom: 5px;
width: 100%
}
@media (min-width: 900px) {
.mp-history-game__player-score {
height:auto
}
}
.mp-history-game__team-scores {
background-color: hsl(var(--hsl-b3));
display: flex;
flex-direction: row;
width: 100%
}
@media (min-width: 900px) {
.mp-history-game__team-scores {
height:90px;
justify-content: space-between
}
}
.mp-history-game__team-scores:last-child {
border-radius: 0 0 4px 4px
}
.mp-history-game__team-score {
align-items: center;
display: flex;
flex-direction: column;
padding: 20px;
width: 50%
}
@media (min-width: 900px) {
.mp-history-game__team-score {
width:unset
}
.mp-history-game__team-score--blue {
align-items: flex-start
}
.mp-history-game__team-score--red {
align-items: flex-end
}
}
.mp-history-game__team-score-text {
text-align: center
}
@media (min-width: 900px) {
.mp-history-game__team-score-text {
text-align:left
}
}
.mp-history-game__team-score-text--name {
color: hsl(var(--hsl-c1));
font-size: 15px;
font-weight: 600
}
.mp-history-game__team-score-text--score {
color: hsl(var(--hsl-c2));
font-size: 26px
}
@media (min-width: 900px) {
.mp-history-game__team-score-text--score {
font-size:30px
}
}
.mp-history-game__results {
align-items: center;
background-color: hsl(var(--hsl-b4));
border-radius: 0 0 4px 4px;
display: flex;
justify-content: center;
min-height: 45px;
padding: 0 20px
}
.mp-history-game__results-text {
color: hsl(var(--hsl-c1));
font-size: 18px
}
@media (min-width: 900px) {
.mp-history-game__results-text {
font-size:20px
}
}
.mp-history-player-score {
display: flex
}
.mp-history-player-score__shapes {
background-size: cover;
border-radius: 4px 0 0 4px;
flex: none;
width: 10px
}
@media (min-width: 900px) {
.mp-history-player-score__shapes {
width:50px
}
}
.mp-history-player-score__main {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
padding: 5px 20px 15px 7.5px
}
@media (min-width: 900px) {
.mp-history-player-score__main {
flex-direction:row
}
}
.mp-history-player-score__info-box {
display: flex;
flex-direction: column;
height: 100%
}
.mp-history-player-score__info-box--user {
align-items: flex-start;
flex-direction: row
}
@media (min-width: 900px) {
.mp-history-player-score__info-box--user {
flex-direction:column
}
}
.mp-history-player-score__info-box--stats {
align-items: flex-end;
flex-direction: row
}
@media (min-width: 900px) {
.mp-history-player-score__info-box--stats {
flex-direction:column
}
}
.mp-history-player-score__username-box {
align-items: baseline;
display: flex;
flex-direction: column;
padding-bottom: 5px
}
@media (min-width: 900px) {
.mp-history-player-score__username-box {
flex-direction:row
}
}
.mp-history-player-score__username {
font-size: 18px;
font-weight: 700;
padding-right: 5px
}
@media (min-width: 900px) {
.mp-history-player-score__username {
padding-right:20px
}
}
.mp-history-player-score__stat-row {
align-items: baseline;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
margin: 2px
}
.mp-history-player-score__stat-row--first {
margin-right: 10px
}
@media (min-width: 900px) {
.mp-history-player-score__stat-row--first {
margin:2px
}
}
@media (min-width: 1000px) {
.mp-history-player-score__stat-row--first {
width:530px
}
}
@media (min-width: 900px) {
.mp-history-player-score__stat-row {
flex-direction:row
}
}
.mp-history-player-score__failed {
color: hsl(var(--hsl-red-1));
font-size: 15px;
font-weight: 700;
padding-right: 20px
}
.mp-history-player-score__mods {
display: flex;
padding-right: 20px
}
.mp-history-player-score__stat {
align-items: baseline;
display: flex;
justify-content: flex-end;
padding-right: 40px
}
.mp-history-player-score__stat--small {
padding-right: 20px
}
.mp-history-player-score__stat--combo {
margin-right: auto
}
.mp-history-player-score__stat:last-child {
padding: 0
}
.mp-history-player-score__stat-label {
color: hsl(var(--hsl-c2));
font-weight: 600;
padding-right: 3px
}
.mp-history-player-score__stat-label--small {
font-size: 10px
}
.mp-history-player-score__stat-label--large {
font-size: 12px
}
.mp-history-player-score__stat-number {
color: hsl(var(--hsl-c1));
font-weight: 700
}
.mp-history-player-score__stat-number--small {
font-size: 12px
}
.mp-history-player-score__stat-number--medium {
font-size: 14px
}
.mp-history-player-score__stat-number--large {
color: hsl(var(--hsl-pink-1));
font-size: 20px
}
@media (min-width: 900px) {
.mp-history-player-score__stat-number--large {
font-size:25px
}
}
.multiplayer-room {
--bg: hsla(var(--hsl-b6),0.75);
--border-radius: 10px;
--room-bg: linear-gradient(0.25turn,hsl(var(--hsl-b2)),hsla(var(--hsl-b2),0.8));
color: hsl(var(--hsl-c1));
display: flex;
font-size: 12px;
position: relative
}
.multiplayer-room:active,.multiplayer-room:focus,.multiplayer-room:hover {
--room-bg: linear-gradient(0.25turn,hsl(var(--hsl-b4)),hsla(var(--hsl-b4),0.8))
}
.multiplayer-room__chat-button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
outline: none;
padding: 0
}
.multiplayer-room__content {
background: var(--room-bg);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
margin-left: 20px;
padding: 6px 20px;
pointer-events: none;
position: relative;
width: calc(100% - 20px)
}
.multiplayer-room__cover-container {
display: flex;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.multiplayer-room__details {
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-between
}
.multiplayer-room__badge-container {
align-items: center;
display: flex
}
.multiplayer-room__badge {
background-color: var(--bg);
border-radius: 10000px;
color: hsl(var(--hsl-b6));
font-weight: 600;
margin-right: 5px;
padding: 0 10px
}
.multiplayer-room__badge--active {
--bg: hsl(var(--hsl-lime-2))
}
.multiplayer-room__badge--ended {
color: hsl(var(--hsl-c1))
}
.multiplayer-room__badge--soon {
--bg: hsl(var(--hsl-orange-2))
}
.multiplayer-room__badge--map-count {
color: hsl(var(--hsl-c1))
}
.multiplayer-room__difficulty {
background: linear-gradient(0deg,var(--max-difficulty) 50%,var(--min-difficulty) 50%);
border-radius: 10000px;
display: flex
}
.multiplayer-room__members {
display: flex;
flex: 1 1 auto;
justify-content: flex-end
}
.multiplayer-room__name {
font-size: 24px;
word-break: break-word
}
.multiplayer-room__host {
white-space: pre
}
.multiplayer-room__host,.multiplayer-room__participants {
align-items: center;
display: flex;
padding: 5px
}
.nav-button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
border-radius: 10000px;
color: hsl(var(--hsl-c1));
display: inline-flex;
justify-content: center;
margin: 0;
outline: none;
padding: 10px;
transition: none
}
.nav-button,.nav-button:active,.nav-button:focus,.nav-button:hover {
text-decoration: none
}
.nav-button.js-click-menu--active,.nav-button:hover {
background-color: hsla(var(--hsl-c1),.2)
}
.nav-button--mobile {
border: none;
border-radius: 4px;
margin: 0 10px 0 0
}
.nav-button--notifications {
padding: 7px 10px
}
.nav-button--support:hover {
color: #f6a
}
.nav-button--twitter:hover {
color: hsl(var(--hsl-c1))
}
.nav-click-popup {
height: 0;
margin-top: -5px;
position: absolute;
right: 0;
top: 100%
}
.nav-click-popup--user {
margin-top: 5px
}
.nav2 {
display: flex;
font-size: 14px;
font-weight: 500;
height: 90px;
transform: translateZ(0);
transition: height var(--header-pinned-animation-duration);
width: 100%;
}
.js-header-is-pinned .nav2 {
height: 50px
}
.nav2__col {
align-items: center;
display: flex;
flex: none
}
.nav2__col--avatar {
margin-left: 6px
}
.nav2__col--logo {
margin-right: 10px
}
.nav2__col--menu {
align-items: stretch;
position: relative
}
.nav2__col--notifications {
margin-left: 6px
}
.nav2__colgroup {
display: flex;
flex: none;
}
.nav2__colgroup--menu {
margin-right: auto;
}
.nav2__logo {
background-image: var(--nav-logo);
background-repeat: no-repeat;
background-size: contain;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all .1s ease-in-out;
width: 100%
}
.nav2__logo-link:hover .nav2__logo {
transform: scale(1.11)
}
.nav2__logo-link:hover .nav2__logo--bg {
opacity: 1
}
.nav2__logo-link {
height: 70px;
margin: -5px;
position: relative;
transition: width var(--header-pinned-animation-duration),height var(--header-pinned-animation-duration);
width: 70px
}
.js-header-is-pinned .nav2__logo-link {
height: 60px;
width: 60px;
}
.nav2__menu-link {
color: #f9c;
line-height: 1;
padding: 6px 10px
}
.nav2__menu-link,.nav2__menu-link:active,.nav2__menu-link:focus,.nav2__menu-link:hover {
text-decoration: none
}
.nav2__menu-link:after {
background-color: #fc2;
border-radius: 10px;
content: "";
height: calc(100% - 16px);
opacity: 0;
position: absolute;
right: 100%;
top: 8px;
width: 3px;
will-change: opacity
}
.nav2__menu-link:hover {
color: #fff
}
.nav2__menu-link:hover:after {
opacity: 1
}
.nav2__menu-link:active {
color: #fff
}
.nav2__menu-link-main {
align-items: center;
color: #fff;
display: flex;
padding: 10px;
text-decoration: none
}
.nav2__menu-link-main:active,.nav2__menu-link-main:focus,.nav2__menu-link-main:hover {
color: #fff;
text-decoration: none
}
.nav2__colgroup:hover .nav2__menu-link-main {
color: hsla(0,0%,100%,.7)
}
.nav2__colgroup:hover .nav2__menu-link-main.js-menu--active,.nav2__colgroup:hover .nav2__menu-link-main:hover {
color: #fff
}
.nav2__menu-link-main--search {
align-items: center;
align-self: center;
border-radius: 50%;
display: inline-flex;
height: 40px;
justify-content: center;
padding: 0;
width: 40px
}
.nav2__menu-link-bar {
border-radius: 10px;
display: block;
height: 3px;
margin-top: 5px;
position: absolute;
top: 100%;
width: 100%;
}
.nav2__menu-popup {
display: flex;
flex-direction: column;
height: 0;
left: 10px;
margin-top: -20px;
position: absolute;
top: 100%;
transition: margin-top var(--header-pinned-animation-duration);
white-space: nowrap
}
.js-header-is-pinned .nav2__menu-popup {
margin-top: -5px
}
.nav2__notification-container {
border: 2px solid hsl(var(--hsl-c1));
border-radius: 30px;
display: flex;
padding: 2px
}
.nav2-header {
position: fixed;
top: 0;
width: 100%;
z-index: 509;
}
.nav2-header__body {
position: relative;
width: 100%;
z-index: 1;
top: 15px;
}
.nav2-header__menu-bg {
background-color: rgb(36 36 36 / 87%);
box-shadow: 0 2px 10px rgba(0,0,0,.5);
width: 1030px;
height: 320px;
top: 170px;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
position: absolute;
transition-duration: 0s;
border-radius: 40px;
}
.nav2-header__menu-bg[data-visibility=hidden] {
transition-duration: .25s
}
.nav2-header__transition-overlay {
background-color: rgba(17, 17, 17, 0.459);
width: 1030px;
height: 100%;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
opacity: 0;
position: absolute;
transition: opacity var(--header-pinned-animation-duration);
border-radius: 15px;
}
.js-header-is-pinned .nav2-header__transition-overlay {
opacity: 1
}
.nav2-header__triangles {
background-position: bottom;
background-repeat: repeat-x;
filter: hue-rotate(var(--base-hue-deg)) saturate(.6);
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
.nav2-locale-item {
align-items: center;
display: flex;
padding: 2px 0;
}
.nav2-locale-item--no-padding {
padding: 0
}
.nav2-locale-item__flag {
margin-right: 1em
}
.navbar-mobile {
align-items: center;
background-color: hsl(var(--hsl-h2));
color: #fff;
display: flex;
height: 50px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
z-index: var(--z-index--nav-bar-mobile)
}
.navbar-mobile__brand {
font-size: 14px;
min-width: 0;
padding: 0 10px
}
.navbar-mobile__header-section {
align-items: center;
display: flex;
flex: 1;
min-width: 0
}
.navbar-mobile__header-section--buttons {
flex: none
}
.navbar-mobile__logo {
background-image: var(--nav-logo);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: block;
flex: none;
height: 40px;
margin: -5px;
width: 40px
}
.navbar-mobile__toggle {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: 2px;
color: hsl(var(--hsl-c1));
display: block;
flex: none;
height: 30px;
margin: 0;
outline: none;
padding: 0;
width: 30px
}
.navbar-mobile__toggle:hover {
color: hsl(var(--hsl-l1))
}
.navbar-mobile__toggle.js-click-menu--active {
transform: rotateX(.5turn)
}
.navbar-mobile__toggle-icon {
align-items: center;
display: flex;
justify-content: center
}
.navbar-mobile-before {
padding-top: 50px
}
.navbar-mobile-item {
display: flex;
flex: none;
flex-direction: column
}
.navbar-mobile-item--user {
align-items: center;
background-color: hsl(var(--hsl-b4));
flex-direction: row
}
.navbar-mobile-item__icon {
margin-right: 10px;
text-align: center;
width: 30px
}
.navbar-mobile-item__icon--closed {
display: inline-block
}
.navbar-mobile-item__icon--opened,.navbar-mobile-item__main.js-click-menu--active>.navbar-mobile-item__icon--closed {
display: none
}
.navbar-mobile-item__main.js-click-menu--active>.navbar-mobile-item__icon--opened {
display: inline-block
}
.navbar-mobile-item__locale-flag {
display: inline-block;
margin-right: 5px
}
.navbar-mobile-item__main {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsla(var(--hsl-c1),50%);
display: flex;
margin: 0;
outline: none;
padding: 10px;
text-decoration: none
}
.navbar-mobile-item__main:active,.navbar-mobile-item__main:focus,.navbar-mobile-item__main:hover {
text-decoration: none
}
.navbar-mobile-item__main:focus {
color: hsla(var(--hsl-c1),50%)
}
.navbar-mobile-item__main.js-click-menu--active,.navbar-mobile-item__main:active,.navbar-mobile-item__main:hover {
color: hsl(var(--hsl-c1))
}
.navbar-mobile-item__submenu {
display: none;
list-style: none;
padding: 0
}
.navbar-mobile-item__submenu.js-click-menu--active {
display: block
}
.navbar-mobile-item__submenu-item {
align-items: center;
color: hsl(var(--hsl-c2));
display: flex;
padding: 5px 10px 5px 60px;
text-decoration: none
}
.navbar-mobile-item__submenu-item:active,.navbar-mobile-item__submenu-item:focus,.navbar-mobile-item__submenu-item:hover {
text-decoration: none
}
.navbar-mobile-item__submenu-item:hover {
background-color: hsl(var(--hsl-b3))
}
.navbar-mobile-item__submenu-item:active,.navbar-mobile-item__submenu-item:focus,.navbar-mobile-item__submenu-item:hover {
color: hsl(var(--hsl-c2))
}
.news-card {
background-color: #00000014;
border-radius: 20px;
color: #fff;
display: block;
min-width: 0
}
.news-card,.news-card:active,.news-card:focus,.news-card:hover {
text-decoration: none
}
.news-card:active,.news-card:focus,.news-card:hover {
color: #fff
}
.news-card:hover {
background-color: #0f0f0f9e;
}
.news-card--landing {
flex: 1;
margin: 10px
}
.news-card__cover {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%
}
.news-card__cover-container {
background-image: url(/assets/images/news-show-default.78f23cb7.jpg);
background-repeat: no-repeat;
background-size: cover;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 160px;
overflow: hidden;
position: relative
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.news-card__cover-container {
background-image:url(/assets/images/[email protected])
}
}
.news-card--show .news-card__cover-container {
height: 200px
}
.news-card__main {
padding: 10px 15px
}
.news-card--show .news-card__main {
display: none
}
.news-card__time {
align-self: flex-end;
background-color: hsla(var(--hsl-b6),.5);
border-radius: 10000px;
font-size: 10px;
font-weight: 600;
padding: 5px 20px;
position: absolute;
right: 15px;
text-transform: uppercase;
top: 10px
}
.news-card__row {
font-size: 12px
}
.news-card__row--author strong {
font-weight: 600
}
.news-card__row--preview {
color: inherit;
font-family: var(--font-content-override,var(--font-content));
line-height: 1.35
}
.news-card--landing .news-card__row--preview {
display: none
}
.news-card__row--title {
font-weight: 600
}
.news-card--index .news-card__row--title {
font-size: 20px
}
.news-card--landing .news-card__row--title {
font-size: 14px
}
.news-index {
grid-gap: 10px;
display: grid
}
.news-index__item--more {
display: flex;
height: auto;
justify-content: center;
padding-top: 15px
}
.news-post-preview {
margin-bottom: 5px
}
.news-post-preview--collapsed {
box-shadow: none;
margin-bottom: 0
}
.news-post-preview__body {
background: #11111157;
display: flex;
border: none;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.news-post-preview__image {
background-color: hsl(var(--hsl-b6));
background-image: var(--bg);
background-position: 50%;
background-size: cover;
display: block;
height: 130px;
width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.news-post-preview__image {
background-image:var(--bg-2x)
}
}
.news-post-preview--collapsed .news-post-preview__image {
display: none
}
.news-post-preview__post-date {
align-items: flex-end;
border-right: 1px solid white;
font-weight: 600;
display: flex;
flex: none;
flex-direction: column;
margin: 10px;
padding-right: 10px;
text-align: right;
width: 70px
}
.news-post-preview--collapsed .news-post-preview__post-date {
align-items: baseline;
flex-direction: row;
justify-content: flex-end;
margin: 0 10px;
padding: 5px 10px 5px 0
}
.news-post-preview__date {
font-size: 16px;
font-weight: 800
}
.news-post-preview--collapsed .news-post-preview__date {
font-size: 14px;
font-weight: 700
}
.news-post-preview__month-year {
font-size: 11px
}
.news-post-preview--collapsed .news-post-preview__month-year {
font-size: 14px
}
.news-post-preview__post-right {
margin-right: 10px
}
.news-post-preview--collapsed .news-post-preview__post-right {
align-items: center;
display: flex
}
.news-post-preview__post-title {
color: #fff;
display: block;
font-size: 16px;
font-weight: 700;
margin: 5px 0 10px
}
.news-post-preview__post-title:active,.news-post-preview__post-title:focus,.news-post-preview__post-title:hover {
color: #fff
}
.news-post-preview--collapsed .news-post-preview__post-title {
font-size: 14px;
margin: 0
}
.news-post-preview__post-content {
font-family: var(--font-content-override,var(--font-content));
font-size: 12px;
line-height: 1.35
}
.news-post-preview--collapsed .news-post-preview__post-content {
display: none
}
.news-show__info {
margin: 20px 0
}
.news-show__nav {
margin-bottom: -20px;
margin-top: 40px
}
.news-show__title {
color: inherit;
font-size: 35px;
font-style: normal;
font-weight: 600;
margin: 0;
padding: 0
}
.news-sidebar-month {
font-size: 12px;
margin-bottom: 10px
}
.news-sidebar-month__item--active {
color: #fff;
text-decoration: none
}
.news-sidebar-month__item--active:active,.news-sidebar-month__item--active:focus,.news-sidebar-month__item--active:hover {
color: #fff;
text-decoration: none
}
.news-sidebar-month__items {
grid-gap: 5px;
display: grid;
list-style: none;
margin: 5px 0 0;
padding: 0
}
.news-sidebar-month__toggle {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: flex;
font-weight: 700;
margin: 0;
outline: none;
padding: 0;
width: 100%
}
.news-sidebar-month__toggle-icon {
margin-left: auto
}
.news-sidebar-years {
grid-gap: 5px;
background-color: #0000001f;
border-radius: 20px;
display: grid;
font-size: 12px;
grid-template-columns: repeat(4,1fr);
margin-bottom: 20px;
padding: 5px;
text-align: center
}
.news-sidebar-years__item--active {
color: hsl(var(--hsl-c1));
font-weight: 600;
text-decoration: none
}
.news-sidebar-years__item--active:active,.news-sidebar-years__item--active:focus,.news-sidebar-years__item--active:hover {
color: hsl(var(--hsl-c1));
text-decoration: none
}
.nomination-dialog {
background-color: hsl(var(--hsl-b4));
border-radius: 4px;
color: hsl(var(--hsl-c1));
display: flex;
flex: 1;
flex-direction: column;
font-size: 14px;
max-width: 480px;
min-width: 320px;
padding: 20px
}
.nomination-dialog__buttons {
grid-gap: 10px;
align-self: flex-end;
display: flex;
margin-top: 20px
}
.nomination-dialog__checkboxes {
grid-gap: 10px;
display: flex;
margin: 10px 0
}
.nomination-dialog__header {
font-size: 24px;
margin-bottom: 20px
}
.nomination-dialog__label {
color: hsl(var(--hsl-f1));
padding-left: 5px
}
.nomination-dialog__label--disabled {
opacity: .5
}
.nomination-dialog__warn {
color: hsl(var(--hsl-orange-1));
padding: 10px 0
}
.notification-action-button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #ffffffa8;
display: inline-flex;
height: 100%;
justify-content: center;
margin: 0;
outline: none;
padding: 0;
pointer-events: auto
}
.notification-action-button:hover {
color: #fff
}
.notification-action-button--fancy {
border-radius: 0 6px 6px 0;
padding-left: 6px;
position: relative
}
.notification-action-button__icon {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
width: 32px;
}
.notification-banner-v2 {
--divider-colour: #ed1221;
--icon: url(/assets/images/exclamation-icon.0db8a908.svg);
background-color: rgba(135,0,0,.4);
color: #fff;
display: flex;
flex-direction: column;
font-size: 12px;
padding: 5px;
position: relative;
text-align: center;
z-index: 1
}
@media (min-width: 900px) {
.notification-banner-v2 {
border-radius:40px;
flex-direction: row;
text-align: left
}
}
.notification-banner-v2--info {
--divider-colour: hsl(var(--hsl-blue-2));
background-color: hsla(var(--hsl-blue-3),.2)
}
.notification-banner-v2__col {
margin: 5px
}
.notification-banner-v2__col--icon {
background-image: var(--icon);
background-position: 50%;
background-repeat: no-repeat;
flex: none;
height: 30px
}
@media (min-width: 900px) {
.notification-banner-v2__col--icon {
height:auto;
width: 30px
}
}
.notification-banner-v2__col--label {
display: flex;
flex: none;
flex-direction: column;
justify-content: center;
padding-bottom: 13px;
position: relative
}
@media (min-width: 900px) {
.notification-banner-v2__col--label {
padding-bottom:0;
padding-right: 18px
}
}
.notification-banner-v2__col--label:after {
background-color: var(--divider-colour);
border-radius: 10px;
bottom: 0;
content: "";
height: 3px;
left: 0;
position: absolute;
right: 0
}
@media (min-width: 900px) {
.notification-banner-v2__col--label:after {
height:auto;
left: auto;
top: 0;
width: 3px
}
}
.notification-banner-v2__type {
font-weight: 700;
text-transform: capitalize
}
.notification-banner-v2__text a {
color: #fc2
}
.notification-banner-v2__text a:active,.notification-banner-v2__text a:focus,.notification-banner-v2__text a:hover {
color: #fd5
}
.notification-icon {
align-items: center;
color: #fff;
display: inline-flex;
display: flex;
justify-content: center;
text-decoration: none
}
.notification-icon:active,.notification-icon:focus,.notification-icon:hover {
color: #fff;
text-decoration: none
}
.notification-icon--glow {
text-shadow: 0 0 10px hsla(0,0%,100%,.5)
}
.notification-icon--mobile {
color: inherit;
flex-direction: column;
height: 100%
}
.notification-icon__count {
font-size: 13px;
font-weight: 500;
margin-left: 5px
}
.notification-icon--mobile .notification-icon__count {
background-color: hsl(var(--hsl-d3));
border-radius: 10000px;
bottom: 2px;
color: hsl(var(--hsl-c1));
font-size: 10px;
margin-left: 0;
padding: 2px 5px;
position: absolute;
right: 2px
}
.notification-icon--mobile .notification-icon__inbox {
padding-bottom: 2px
}
.notification-index {
grid-gap: 10px;
display: grid;
margin: 10px 0
}
@media (min-width: 900px) {
.notification-index {
margin:10px 50px
}
}
.notification-index__actions {
font-size: 12px;
margin-left: auto
}
.notification-popup {
background-color: rgb(36 36 36 / 87%);
padding: 10px;
border-radius: 20px
}
@media (min-width: 900px) {
.notification-popup {
box-shadow: 0 2px 10px rgba(0,0,0,.5);
margin-top: 0;
max-width: 400px;
padding: 15px 10px;
width: 90vw
}
}
.notification-popup__buttons {
display: flex
}
.notification-popup__clear-button {
display: inline-block;
margin-left: auto
}
.notification-popup__scroll-container {
grid-gap: 10px;
display: grid
}
@media (min-width: 900px) {
.notification-popup__scroll-container {
-webkit-overflow-scrolling:touch;
max-height: calc(var(--vh, 1vh)*100 - 120px);
overflow: auto;
padding: 0 5px
}
}
.notification-popup__filters {
grid-gap: 5px;
display: grid;
grid-template-columns: repeat(2,1fr)
}
.notification-popup__filter {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #cccccc;
margin: 0;
outline: none;
padding: 0;
text-align: left
}
.notification-popup__filter--active,.notification-popup__filter:active,.notification-popup__filter:focus,.notification-popup__filter:hover {
color: hsl(var(--hsl-c1))
}
.notification-popup__filter-count {
background-color: #a3a3a336;
border-radius: 10000px;
color: white;
font-size: smaller;
margin-right: 5px;
padding: 2px 10px
}
.notification-popup__empty-with-more {
margin-top: -5px
}
.notification-popup__empty {
margin: 10px 0 5px;
white-space: nowrap
}
.notification-popup__item+.notification-popup__item {
margin-top: 10px
}
.notification-popup-item {
display: flex;
position: relative;
width: 100%;
}
.notification-popup-item:hover {
background-color: rgb(57 57 57 / 28%);
border-radius: 20px;
}
.notification-popup-item--compact {
background-color: transparent;
margin-left: 10px;
width: calc(100% - 10px)
}
.notification-popup-item__content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
min-height: 36px;
min-width: 0;
padding: 3px 0 3px 10px
}
.notification-popup-item__cover {
background-color: #b1b1b1c7;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 6px 0 0 6px;
flex: none;
pointer-events: none;
position: relative;
width: 60px
}
.notification-popup-item--compact .notification-popup-item__cover {
width: 50px
}
.notification-popup-item--user_achievement_unlock .notification-popup-item__cover {
background-size: 70%
}
.notification-popup-item--group.notification-popup-item--user_achievement_unlock .notification-popup-item__cover {
background-size: 0
}
.notification-popup-item__cover-icon {
margin: 0 1px
}
.notification-popup-item__cover-overlay {
align-items: center;
background-color: rgba(0,0,0,.6);
border-radius: 6px 0 0 6px;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.notification-popup-item--compact.notification-popup-item--user_achievement_unlock .notification-popup-item__cover-overlay {
background-color: transparent
}
.notification-popup-item__link {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.notification-popup-item__main {
display: flex;
flex: 1;
min-width: 0;
pointer-events: none;
position: relative;
}
.notification-popup-item__row {
margin: 2px 0
}
.notification-popup-item__row--category {
font-size: 10px;
font-weight: 700;
text-transform: uppercase
}
.notification-popup-item__row--expand {
margin-top: 10px
}
.notification-popup-item__row--message {
word-wrap: break-word;
color: #fff;
font-size: 14px;
text-decoration: none
}
.notification-popup-item__row--message:active,.notification-popup-item__row--message:focus,.notification-popup-item__row--message:hover {
color: #fff;
text-decoration: none
}
.notification-popup-item__row--time {
font-size: 10px;
text-decoration: none
}
.notification-popup-item__row--time:active,.notification-popup-item__row--time:focus,.notification-popup-item__row--time:hover {
color: hsl(var(--hsl-f1));
text-decoration: none
}
.notification-popup-item:hover .notification-popup-item__row .show-more-link {
background-color: #8a8a8a85;
}
.notification-popup-item:hover .notification-popup-item__row .show-more-link:hover {
/* background-color: hsl(var(--hsl-b3)); */
}
.notification-popup-item__unread-stripe {
border-radius: 6px 0 0 6px;
box-shadow: inset 2px 0 hsl(var(--hsl-h1));
height: 100%;
pointer-events: none;
position: absolute;
width: 6px
}
.notification-popup-item-group {
background-color: #5d5d6517;
border-radius: 20px;
display: flex;
flex-direction: column
}
.notification-popup-item-group__collapse {
display: flex;
flex-direction: row
}
.notification-popup-item-group__expand {
margin-left: 10px
}
.notification-popup-item-group__item {
margin: 1px 0
}
.notification-popup-item-group__items {
display: flex;
flex-direction: column;
padding: 9px 0
}
.notification-popup-item-group__show-more {
display: flex;
flex-direction: row;
font-size: smaller;
justify-content: space-between;
margin-top: 10px
}
.notification-stacks {
grid-gap: 2px;
display: grid;
grid-template-columns: minmax(0,1fr)
}
.nsfw-warning {
grid-gap: 10px;
display: grid;
font-size: 14px;
text-align: center
}
.nsfw-warning__button {
--bg: hsl(var(--hsl-blue-2));
--bg-hover: hsl(var(--hsl-blue-3));
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: var(--bg);
border: none;
border-radius: 150px;
color: #fff;
flex: none;
font-weight: 600;
margin: 5px;
max-width: 100%;
outline: none;
padding: 10px;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
width: 200px
}
.nsfw-warning__button:active,.nsfw-warning__button:focus,.nsfw-warning__button:hover {
background-color: var(--bg-hover);
color: #fff;
text-decoration: none
}
@media (min-width: 480px) {
.nsfw-warning__button {
max-width:none;
width: 150px
}
}
.nsfw-warning__button--show {
--bg: hsl(var(--hsl-red-2));
--bg-hover: hsl(var(--hsl-red-3))
}
.nsfw-warning__row {
display: flex;
justify-content: center
}
.nsfw-warning__row--buttons {
align-items: center;
flex-direction: column;
margin: 0 -5px -5px
}
@media (min-width: 480px) {
.nsfw-warning__row--buttons {
align-items:stretch;
flex-direction: row
}
}
.nsfw-warning__row--icon {
font-size: 35px
}
.nsfw-warning__row--title {
font-size: 24px;
font-weight: 300
}
.oauth-client {
color: hsl(var(--hsl-c1));
display: flex;
flex-direction: row;
font-size: 14px;
gap: 10px;
justify-content: space-between
}
.oauth-client__actions {
align-items: stretch;
display: flex;
flex: none;
flex-direction: column;
gap: 5px 10px
}
@media (min-width: 900px) {
.oauth-client__actions {
align-items:baseline;
flex-direction: row
}
}
.oauth-client__details {
overflow-wrap: anywhere
}
.oauth-client__details--button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
margin: 0;
outline: none;
padding: 0;
text-align: left
}
.oauth-client__name {
margin-bottom: 5px
}
.oauth-client__redirect {
color: hsl(var(--hsl-c2))
}
.oauth-client__scopes {
margin-top: 12px
}
.oauth-client-details {
background-color: hsl(var(--hsl-b4));
border-radius: 4px;
color: hsl(var(--hsl-c1));
display: flex;
flex: 1;
flex-direction: column;
font-size: 14px;
max-width: 480px;
min-width: 320px;
padding: 20px
}
.oauth-client-details__buttons {
grid-gap: 5px;
align-self: center;
display: grid;
margin: 10px 0;
min-width: 200px
}
.oauth-client-details__content {
display: flex;
flex-direction: column
}
.oauth-client-details__error {
color: hsl(var(--hsl-red-1));
margin-top: 5px;
padding-left: 10px
}
.oauth-client-details__group {
display: inline-flex;
flex-direction: column;
margin: 10px 0;
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025);
scrollbar-width: thin
}
.oauth-client-details__group * {
scrollbar-width: thin
}
.oauth-client-details__group ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.oauth-client-details__group ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.oauth-client-details__group ::-webkit-scrollbar:horizontal {
height: 10px
}
.oauth-client-details__group ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.oauth-client-details__group ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
.oauth-client-details__header {
font-size: 24px;
margin-bottom: 10px
}
.oauth-client-details__input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: hsl(var(--hsl-b3));
border: 2px solid transparent;
border-radius: 4px;
font-size: 16px;
font-weight: 400;
margin: 5px 0 0;
outline: none;
padding: 5px
}
@media (min-width: 900px) {
.oauth-client-details__input {
font-size:14px
}
}
.oauth-client-details__input:focus {
border-color: hsl(var(--hsl-l1))
}
.oauth-client-details__input--has-error {
border-color: hsl(var(--hsl-red-1))
}
.oauth-client-details__input--textarea {
max-height: 50vh;
min-height: 5em;
resize: none
}
.oauth-client-details__label {
color: hsl(var(--hsl-f1));
font-size: 12px;
font-weight: 600
}
.oauth-clients__client {
border-bottom: 1px solid hsl(var(--hsl-b5));
margin-bottom: 10px;
padding-bottom: 10px
}
.oauth-scopes {
list-style: none;
margin: 0;
padding: 0 0 0 20px
}
.oauth-scopes--oauth-form {
font-size: 14px
}
.oauth-scopes__icon {
color: #88b300;
display: inline-block;
font-size: 12px;
margin-left: -20px;
width: 20px
}
.order-line-items {
list-style: none;
padding: 0
}
.order-line-items__data {
font-size: 14px
}
@media (min-width: 900px) {
.order-line-items__data {
font-size:inherit
}
}
.order-line-items__data--name {
grid-area: name
}
.order-line-items__data--quantity {
grid-area: quantity
}
.order-line-items__data--value {
grid-area: value;
text-align: right
}
.order-line-items__data--weight {
grid-area: weight
}
.order-line-items__item {
grid-gap: 5px 10px;
display: grid;
padding: 5px 10px
}
.order-line-items__item--main {
grid-template-areas: "name name name name" ". weight quantity value";
grid-template-columns: 1fr repeat(3,minmax(50px,max-content))
}
@media (min-width: 480px) {
.order-line-items__item--main {
grid-template-areas:"name weight quantity value";
grid-template-columns: 1fr repeat(3,minmax(100px,max-content));
grid-template-rows: auto
}
}
.order-line-items__item--main:nth-child(odd) {
background-color: hsl(var(--hsl-b4))
}
.order-line-items__item--footer {
grid-template: "name value"/1fr 100px
}
.order-line-items__item--footer-total {
background-color: hsla(var(--hsl-orange-2),25%)
}
.order-line-items--checkout .order-line-items__item--footer-total {
display: none
}
.order-line-items__subtext {
color: hsl(var(--hsl-c2));
font-size: 80%
}
.osu-layout {
display: flex;
flex-direction: column;
transition: filter .2s ease-in-out,opacity .2s ease-in-out
}
.osu-layout--body {
--nav-logo: url(/assets/images/osu-logo-white.59d385da.svg);
--nav-logo-bg: url(/assets/images/osu-logo-triangles.b1e57c37.svg)
}
.osu-layout--body,.osu-layout--body-landing {
background-color: #0a0a0deb;
}
.osu-layout--body-landing:before {
backface-visibility: hidden;
background-image: url(/assets/images/page-dark.4726cb09.png);
background-size: 500px 500px;
content: "";
height: 100%;
left: 0;
opacity: .25;
position: fixed;
top: 0;
width: 100%;
z-index: -1
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.osu-layout--body-landing:before {
background-image:url(/assets/images/[email protected])
}
}
.osu-layout--body-lazer {
--nav-logo: url(/assets/images/osu-lazer-logo-white.62cae952.svg);
--nav-logo-bg: url(/assets/images/osu-lazer-logo-triangles.d78e5cd6.svg)
}
.osu-layout--full {
flex: 1 0 auto;
width: 100%
}
.osu-layout--masked {
backface-visibility: hidden;
filter: brightness(0);
opacity: .8;
pointer-events: none;
position: absolute
}
@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none) {
.osu-layout--masked {
opacity: 0
}
}
.osu-layout__no-scroll {
flex: 1 0 auto;
overflow: hidden;
position: relative
}
.osu-layout__section {
display: flex;
flex-direction: column;
margin-bottom: 10px
}
.osu-layout__section--full {
flex: 1 0 auto
}
.osu-layout__section--landing-footer {
background-image: url(/assets/images/page-000.f28663df.png);
background-size: 500px 500px;
flex: none;
margin-bottom: 0;
margin-top: auto
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.osu-layout__section--landing-footer {
background-image:url(/assets/images/[email protected])
}
}
.osu-md {
word-wrap: break-word;
--code-background-colour: hsl(var(--hsl-b6));
--paragraph-space: 1.5em;
color: inherit;
font-family: var(--font-content-override,var(--font-content));
font-size: 14px;
line-height: 1.35
}
.osu-md code {
background-color: var(--code-background-colour);
border-radius: 4px;
padding: 1px 4px;
font-weight: 1000
}
.osu-md hr {
border-color: hsl(var(--hsl-b3))
}
.osu-md iframe,.osu-md img {
max-width: 100%
}
.osu-md--comment.osu-md img {
max-height: 6em;
min-height: 1em;
-o-object-fit: contain;
object-fit: contain
}
.osu-md--discussions.osu-md img {
max-height: 480px;
min-height: 1em;
-o-object-fit: contain;
object-fit: contain
}
.osu-md video {
max-width: 100%
}
.osu-md pre {
background-color: var(--code-background-colour);
border: none;
border-radius: 0;
color: hsl(var(--hsl-l1))
}
.osu-md pre>code {
border: none;
padding: 0
}
.osu-md>:last-child {
margin-bottom: 0
}
.osu-md--chat {
--code-background-colour: hsl(var(--hsl-b3));
flex: 1;
overflow-wrap: anywhere
}
.osu-md--chat h1,.osu-md--chat h2,.osu-md--chat h3,.osu-md--chat h4,.osu-md--chat h5,.osu-md--chat h6 {
border-bottom: 1px solid hsl(var(--hsl-b3));
font-size: revert
}
.osu-md--chat-action {
color: hsl(var(--hsl-l1));
font-style: italic
}
.osu-md--chat-action:before {
content: "* "
}
.osu-md--chat-action:after {
content: " *"
}
.osu-md--chat-plain p {
display: inline
}
.osu-md--discussions {
font: inherit;
font-size: inherit
}
.osu-md--group {
--paragraph-space: 10px
}
.osu-md--news {
color: hsl(var(--hsl-c1));
font-size: 14px;
padding: 0
}
.osu-md--store-product {
font-family: var(--font-default-override,var(--font-default));
font-size: 18px;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.osu-md__figure-caption {
display: inline-block;
font-style: normal;
margin-top: 5px
}
.osu-md__figure-container {
margin: var(--paragraph-space) 0;
text-align: center
}
.osu-md--comment .osu-md__figure-container {
text-align: inherit
}
.osu-md__figure-image {
display: block;
margin: 0 auto
}
.osu-md__figure-image--gallery {
cursor: pointer
}
.osu-md--comment .osu-md__figure-image {
margin: 0
}
.osu-md__footnote-container>ol {
counter-reset: c 0;
list-style: none;
padding-left: 0
}
.osu-md__header {
clear: both;
color: hsl(var(--hsl-c1));
font-family: var(--font-default-override,var(--font-default));
font-style: normal;
font-weight: 700
}
.osu-md__header:first-child {
margin-top: 0
}
.osu-md__header--1 {
font-weight: 600;
margin-top: 40px
}
.osu-md--comment .osu-md__header--1 {
font-size: 1.2em
}
.osu-md--store-product .osu-md__header--1 {
font-size: 40px;
font-weight: 200;
margin: 0
}
.osu-md--store-product-small .osu-md__header--1 {
font-size: 32px
}
.osu-md--wiki .osu-md__header--1 {
border-bottom: 1px solid hsl(var(--hsl-b3));
margin-bottom: 10px;
margin-right: 0;
padding-bottom: 5px
}
.osu-md__header--2 {
font-size: 26px;
font-weight: 600;
margin: 20px 0 10px
}
.osu-md--comment .osu-md__header--2 {
font-size: 1.1em
}
.osu-md--news .osu-md__header--2 {
font-size: 24px
}
.osu-md--news .osu-md__header--2,.osu-md--wiki .osu-md__header--2 {
border-bottom: 1px solid hsl(var(--hsl-b3));
padding-bottom: 5px
}
.osu-md__header--3 {
font-size: 20px;
margin: 30px 0 10px
}
.osu-md--comment .osu-md__header--3 {
font-size: 1em
}
.osu-md--news .osu-md__header--3 {
font-size: 18px
}
.osu-md__header--4 {
font-size: 18px;
margin: 30px 0 10px
}
.osu-md--comment .osu-md__header--4 {
font-size: 1em
}
.osu-md--news .osu-md__header--4 {
color: inherit;
font-size: inherit
}
.osu-md__header--5 {
font-size: 16px;
margin-top: 20px
}
.osu-md--comment .osu-md__header--5 {
font-size: 1em
}
.osu-md__header--6 {
font-size: 14px;
margin-top: 20px
}
.osu-md--comment .osu-md__header--6 {
font-size: 1em
}
.osu-md__infobox {
border: 1px solid hsl(var(--hsl-b4));
border-radius: 4px;
margin: var(--paragraph-space) 0;
padding: 10px;
text-align: center
}
@media (min-width: 620px) {
.osu-md__infobox {
clear:right;
float: right;
margin: 0 0 5px 10px;
max-width: 300px;
width: 50%
}
}
.osu-md__infobox>:first-child {
margin-top: 0
}
.osu-md__infobox>:last-child {
margin-bottom: 0
}
.osu-md__infobox thead {
display: none
}
.osu-md__infobox tbody>tr:first-child>td {
border-top: none
}
.osu-md__infobox td {
vertical-align: top
}
.osu-md__link--footnote-ref {
font-size: 11px
}
.osu-md__link--footnote-ref:after {
content: "]"
}
.osu-md__link--footnote-ref:before {
content: "["
}
.osu-md__list {
padding-left: 20px
}
.osu-md__list--ordered {
counter-reset: c var(--list-start);
list-style: none;
padding-left: 0
}
.osu-md__list-item {
margin: 5px 0
}
.osu-md--store .osu-md__list-item {
margin-left: 10px
}
.osu-md__footnote-container .osu-md__list-item,.osu-md__list--ordered>.osu-md__list-item {
counter-increment: c;
display: flex
}
.osu-md__footnote-container .osu-md__list-item:before,.osu-md__list--ordered>.osu-md__list-item:before {
content: counter(c) ". ";
flex: none;
min-width: 30px;
padding-right: 5px
}
.osu-md__footnote-container .osu-md__list-item>div,.osu-md__list--ordered>.osu-md__list-item>div {
flex: 1;
min-width: 0
}
.osu-md__paragraph {
line-height: 1.5;
margin-bottom: var(--paragraph-space)
}
.osu-md--store .osu-md__paragraph {
margin-bottom: 10px
}
.osu-md--store-product-small .osu-md__paragraph {
display: none
}
.osu-md__list-item--footnote .osu-md__paragraph {
flex: 1;
line-height: inherit;
margin-bottom: 0;
min-width: 0
}
.osu-md__table {
margin-bottom: 20px;
overflow-x: auto
}
.osu-md--store .osu-md__table table {
width: 100%
}
.osu-md__table-data {
border-top: 1px solid hsl(var(--hsl-b4));
min-width: 30px;
padding: 5px
}
.osu-md__table-data--center {
text-align: center
}
.osu-md__table-data--header {
border-bottom: 2px solid hsl(var(--hsl-b3));
border-top: none;
font-family: var(--font-default-override,var(--font-default));
font-weight: 700
}
.osu-md__table-data--left {
text-align: left
}
.osu-md__table-data--right {
text-align: right
}
.osu-page {
align-self: center;
flex: none;
margin-left: auto;
margin-right: auto;
max-width: 1000px;
width: 100%;
}
.osu-page .default {
background-color: hsl(var(--hsl-b5));
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1))
}
@media (min-width: 900px) {
.osu-page {
max-width:1000px;
width: calc(100% - 40px);
border-radius: 20px;
}
}
.osu-page--account-edit {
display: flex;
flex-direction: column;
gap: 5px
}
.osu-page--account-edit-header,.osu-page--admin {
box-shadow: 0 1px 3px rgba(0,0,0,.25)
}
.osu-page--admin {
background-color: hsl(var(--hsl-b5));
color: hsl(var(--hsl-c1));
padding: 20px 10px
}
@media (min-width: 900px) {
.osu-page--admin {
padding-left:50px;
padding-right: 50px
}
}
.osu-page--admin h1,.osu-page--admin h3,.osu-page--admin h4 {
color: #fff;
font-style: normal
}
.osu-page--admin h1 {
font-size: 28px
}
.osu-page--admin h3 {
font-size: 14px
}
.osu-page--admin h4 {
font-size: 12px
}
.osu-page--admin ul {
list-style: none;
padding: 0
}
.osu-page--admin pre {
background-color: hsl(var(--hsl-b6));
border: none;
color: #fff
}
.osu-page--admin small {
color: hsl(var(--hsl-f1))
}
.osu-page--admin .label-default {
background-color: hsl(var(--hsl-b6));
color: hsl(var(--hsl-f1))
}
@media (min-width: 900px) {
.osu-page--artist {
margin-top:10px
}
}
.osu-page--artist-track-search-result {
background-color: #00000014;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
padding: 10px
}
@media (min-width: 900px) {
.osu-page--artist-track-search-result {
padding-left:50px;
padding-right: 50px
}
}
.osu-page--beatmapsets-search-header {
box-shadow: 0 1px 3px rgba(0,0,0,.25)
}
.osu-page--changelog {
background-color: #00000014;
display: flex;
flex-direction: column
}
.osu-page--changelog,.osu-page--comment {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1))
}
.osu-page--comment {
color: var(--comments-fg);
padding: 10px 0 0
}
.osu-page--comment,.osu-page--comments {
--comments-bg-hsl: var(--hsl-b5);
--comments-fg: hsl(var(--hsl-c1));
background-color: hsl(var(--hsl-b5));
background-color: hsl(var(--comments-bg-hsl))
}
.osu-page--comments {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
color: var(--comments-fg);
padding: 10px 0
}
.osu-page--contests {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.osu-page--description {
background-color: #5d5d6517;
color: hsl(var(--hsl-c1));
font-size: 14px;
padding: 20px 10px
}
@media (min-width: 900px) {
.osu-page--description {
padding-left:50px;
padding-right: 50px
}
}
.osu-page--forum {
background-color: #00000014;
border: solid;
border-radius: 40px;
border-color: rgb(0 0 0 / 0%);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.osu-page--forum-topic {
background-color: rgb(26 26 26 / 46%);
color: hsl(var(--hsl-c1))
}
.osu-page--forum-topic-reply {
background-color: rgb(26 26 26 / 46%);
display: flex;
flex-direction: column;
padding: 10px 15px
}
.osu-page--forum-topic-reply.js-forum-topic-reply-flash {
animation: forum-topic-reply-flash .5s ease-in-out
}
@keyframes forum-topic-reply-flash {
50% {
background-color: rgb(41 41 41 / 46%);
}
}
.osu-page--forum-topic-reply[data-state=stick] {
bottom: 0;
height: calc(var(--vh, 1vh)*100 - 50px);
position: fixed;
z-index: 1
}
@media (min-width: 900px) {
.osu-page--forum-topic-reply[data-state=stick] {
height:auto;
position: relative;
top: auto;
z-index: auto
}
}
.osu-page--full {
flex: 1 0 auto
}
.osu-page--generic {
background-color: rgb(26 26 26 / 46%);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
padding: 20px 10px
}
@media (min-width: 900px) {
.osu-page--generic {
padding-left:50px;
padding-right: 50px
}
}
.osu-page--generic-compact {
background-color: #00000014;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
}
.osu-page--info-bar {
background-color: hsl(var(--hsl-d3));
display: flex;
padding: 5px 10px
}
@media (min-width: 900px) {
.osu-page--info-bar {
padding-left:50px;
padding-right: 50px
}
.osu-page--notification-banners {
display: grid;
gap: 4px;
position: absolute;
top: 100px
}
}
.osu-page--ranking-info {
background-color: #00000014;
display: grid;
font-size: 14px;
gap: 20px;
padding: 20px 10px
}
@media (min-width: 900px) {
.osu-page--ranking-info {
padding-left:50px;
padding-right: 50px
}
}
.osu-page--store,.osu-page--supporter {
background-color: #00000014;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.osu-page--supporter {
display: flex;
flex-direction: column
}
.osu-page--wiki {
background-color: #00000014;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
font-size: 14px
}
.osu-page--wiki-main {
padding: 20px 10px
}
@media (min-width: 900px) {
.osu-page--wiki-main {
padding-left:50px;
padding-right: 50px
}
}
.osu-page--chat {
/* background-color: hsl(var(--hsl-b5)); */
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
display: flex;
flex: 1 0 auto;
height: calc(var(--vh, 1vh)*100 - 220px)
}
@media (max-width: 899px) {
.osu-page--chat {
height:calc(var(--vh, 1vh)*100 - var(--navbar-height))
}
}
.osu-switch-v2 {
align-items: baseline;
cursor: pointer;
display: inline-flex;
flex: none;
font-size: inherit;
margin: 0 5px 0 0;
text-transform: none
}
.osu-switch-v2--grid {
margin: 0
}
.osu-switch-v2__input {
height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
width: 0
}
.osu-switch-v2__content {
align-items: center;
border: 2px solid;
display: inline-flex;
display: flex;
height: 1.5em;
justify-content: center;
width: 1.5em
}
.osu-switch-v2__content:after {
opacity: 0
}
.osu-switch-v2--disabled .osu-switch-v2__content {
opacity: .5
}
.osu-switch-v2__input:checked+.osu-switch-v2__content:after {
opacity: 1
}
.osu-switch-v2__input[type=checkbox]+.osu-switch-v2__content {
border-radius: .5em
}
.osu-switch-v2__input[type=checkbox]+.osu-switch-v2__content:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: "\f00c";
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
text-rendering: auto
}
.osu-switch-v2__input[type=checkbox]+.osu-switch-v2__content:after.fa-pull-left {
margin-right: .3em
}
.osu-switch-v2__input[type=checkbox]+.osu-switch-v2__content:after.fa-pull-right {
margin-left: .3em
}
.osu-switch-v2__input[type=checkbox][data-indeterminate=true]+.osu-switch-v2__content {
color: hsl(var(--hsl-h1))
}
.osu-switch-v2__input[type=checkbox][data-indeterminate=true]+.osu-switch-v2__content:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: "\f068";
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
opacity: 1;
text-rendering: auto
}
.osu-switch-v2__input[type=checkbox][data-indeterminate=true]+.osu-switch-v2__content:after.fa-pull-left {
margin-right: .3em
}
.osu-switch-v2__input[type=checkbox][data-indeterminate=true]+.osu-switch-v2__content:after.fa-pull-right {
margin-left: .3em
}
.osu-switch-v2__input[type=radio]+.osu-switch-v2__content {
border-radius: 50%
}
.osu-switch-v2__input[type=radio]+.osu-switch-v2__content:after {
background-color: currentColor;
border-radius: 50%;
content: "";
height: calc(100% - 6px);
width: calc(100% - 6px)
}
.osu-table {
color: hsl(var(--hsl-f1));
overflow-x: auto
}
.osu-table--with-handle {
margin-right: -16px
}
.osu-table__table {
font-size: 12px;
min-width: 800px;
width: 100%
}
.osu-table__header {
font-size: 10px;
font-weight: 700;
padding-bottom: 5px;
text-transform: uppercase
}
.osu-table__body-row {
height: 1.8em
}
.osu-table--taller-rows .osu-table__body-row {
height: 3em
}
.osu-table--menu-active .osu-table__body-row--highlightable {
pointer-events: none
}
.osu-table__cell:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px
}
.osu-table--with-handle .osu-table__cell:nth-last-child(2),:not(.osu-table--with-handle) .osu-table__cell:last-child {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px
}
.osu-table__body-row--highlightable .osu-table__cell {
background-color: hsl(var(--hsl-b5))
}
.osu-table__body-row--highlightable:nth-child(odd) .osu-table__cell {
background-color: hsl(var(--hsl-b4))
}
.osu-table__body-row--highlightable:hover .osu-table__cell {
background-color: hsl(var(--hsl-b3));
color: #fff
}
.osu-table__body-row--highlightable:hover:nth-child(odd) .osu-table__cell {
background-color: hsl(var(--hsl-b3))
}
.page-contents {
display: flex;
flex: 1 0 auto;
flex-direction: column;
font-size: 14px;
width: 100%
}
@media (min-width: 900px) {
.page-contents {
flex-direction:row
}
}
.page-contents--artist {
background-color: hsl(var(--hsl-b5));
flex-direction: column-reverse
}
@media (min-width: 900px) {
.page-contents--artist {
background:none;
flex-direction: row
}
}
.page-contents__artist-left {
flex: 1
}
.page-contents__content {
padding: 20px 20px 10px
}
@media (min-width: 900px) {
.page-contents__content {
flex-basis:33.33333333%;
max-width: 33.33333333%
}
.page-contents__content+.page-contents__content {
-o-border-image: linear-gradient(0deg,#ccc,transparent 80%) 1;
border-image: linear-gradient(0deg,#ccc,transparent 80%) 1;
border-style: solid;
border-width: 0 0 0 1px
}
}
.page-contents__row {
margin-bottom: 10px;
padding: 0 10px
}
.page-contents__row--top {
margin-bottom: 20px
}
@media (min-width: 900px) {
.page-contents__sidebar {
height:100%;
margin-left: 10px
}
}
.page-extra {
--dragdrop-margin: 0;
--gutter-desktop: 50px;
--gutter: 10px;
--inner-gutter: calc(var(--gutter) - var(--outer-gutter));
--outer-gutter-desktop: 10px;
--outer-gutter: 2px;
--padding-vertical: 20px;
background-color: #29292926;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
font-size: 14px;
margin: 0 var(--outer-gutter);
padding: var(--padding-vertical) var(--inner-gutter);
position: relative;
transform: translateZ(0)
}
@media (min-width: 900px) {
.page-extra {
--gutter:var(--gutter-desktop);
--outer-gutter: var(--outer-gutter-desktop)
}
}
.page-extra--compact {
padding: 0
}
.page-extra--userpage {
--dragdrop-margin: var(--inner-gutter);
padding-bottom: 0;
padding-right: 0
}
.page-extra__actions {
align-items: center;
display: flex;
flex-direction: column;
position: absolute;
right: var(--inner-gutter);
top: var(--padding-vertical);
width: auto
}
@media (min-width: 900px) {
.page-extra__actions {
right:0;
width: var(--inner-gutter)
}
}
.page-extra__alert {
border-radius: 40px;
margin-bottom: 5px;
min-height: 30px;
padding: 5px 20px;
width: 100%
}
.page-extra__alert--info {
background-color: #fc2;
color: #000
}
.page-extra__alert--warning {
background-color: #272727c2;
color: #fff
}
.page-extra__beatmapsets {
display: grid;
gap: 10px
}
@media (min-width: 900px) {
.page-extra__beatmapsets {
grid-template-columns:1fr 1fr
}
}
.page-extra__chart {
height: 250px;
position: relative;
width: 100%;
background-color: #4141411f;
border-radius: 20px;
}
.page-extra__content-overflow-wrapper-inner {
-webkit-overflow-scrolling: touch;
max-height: 400px;
overflow-y: auto;
padding-bottom: 20px;
padding-right: var(--gutter)
}
.page-extra__content-overflow-wrapper-outer {
max-height: 400px
}
.page-extra__recent-medals {
display: flex;
flex-wrap: wrap;
font-size: 90px;
gap: 10px;
height: 1em;
overflow: hidden
}
.page-extra__recent-medals-box {
margin: 0 calc(var(--inner-gutter)*-1) 20px;
padding: 0 var(--inner-gutter) 20px
}
.page-image {
align-items: center;
background-color: hsl(var(--hsl-b4));
display: flex;
flex-direction: column;
padding: 20px 10px;
text-align: center
}
@media (min-width: 900px) {
.page-image {
padding-left:50px;
padding-right: 50px
}
}
.page-image__image {
border-radius: 6px;
flex: none;
max-width: 100%
}
.page-image__title {
color: hsl(var(--hsl-c1));
flex: none;
font-size: 24px;
font-style: normal;
margin: 20px 0 0;
padding: 0
}
.page-mode {
background-color: #00000014;
color: #ccc;
display: block;
font-size: 15px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 20px 10px 0;
text-align: center
}
@media (max-width: 899px) {
.page-mode {
font-size:12px;
padding: 5px 0 0
}
}
.page-mode--page-extra-tabs {
border-bottom: 1px solid white;
padding-top: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px
}
@media (max-width: 899px) {
.page-mode--page-extra-tabs {
-webkit-overflow-scrolling:touch;
align-items: center;
display: flex;
overflow-x: auto
}
}
.page-mode--profile-page-extra {
align-items: center;
display: none;
font-size: 14px;
gap: 20px;
overflow-x: auto;
padding: 10px
}
@media (min-width: 900px) {
.page-mode--profile-page-extra {
padding-left:50px;
padding-right: 50px
}
}
.page-mode--ranking {
background-color: transparent;
font-size: inherit;
padding: 0;
text-align: inherit
}
.page-mode--search {
background: transparent;
border-bottom: 1px solid;
-o-border-image: linear-gradient(90deg,transparent,#fff,transparent) 1;
border-image: linear-gradient(90deg,transparent,#fff,transparent) 1;
border-top-width: 0;
margin: 10px 0;
padding-top: 0
}
.page-mode__item {
display: inline-flex;
line-height: 1;
margin: 0 10px;
vertical-align: bottom
}
.page-mode__item,.page-mode__item:active,.page-mode__item:focus,.page-mode__item:hover {
text-decoration: none
}
.page-mode--breadcrumb .page-mode__item {
margin-left: 5px;
margin-right: 5px
}
.page-mode--breadcrumb .page-mode__item+.page-mode__item:before {
content: "»";
margin-right: 10px;
margin-top: 5px;
vertical-align: middle
}
.page-mode--profile-page-extra .page-mode__item {
margin: 0
}
@media (max-width: 899px) {
.page-mode__item:last-child {
padding-right:10px
}
}
.page-mode__item-icon {
font-size: 89%
}
.page-mode__underline {
background-image: linear-gradient(to right,transparent,hsl(var(--hsl-b6)),transparent);
border: 0;
height: 1px;
margin-top: 0
}
.page-mode-link {
color: #ccc;
display: flex;
padding: 5px 0 10px;
position: relative
}
.page-mode-link,.page-mode-link:active,.page-mode-link:focus,.page-mode-link:hover {
text-decoration: none
}
.page-mode-link:active,.page-mode-link:focus,.page-mode-link:hover {
color: #eee
}
@media (max-width: 899px) {
.page-mode-link {
white-space:nowrap
}
}
.page-mode-link--is-active,.page-mode-link.js-is-active {
color: #fff;
font-weight: 600
}
.page-mode-link--is-active.page-mode-link--profile-page,.page-mode-link.js-is-active.page-mode-link--profile-page {
color: hsl(var(--hsl-c1))
}
.page-mode-link--white,.page-mode-link--white:active,.page-mode-link--white:focus,.page-mode-link--white:hover {
color: #fff
}
.page-mode-link--is-disabled {
color: hsl(var(--hsl-f1));
cursor: default
}
.page-mode-link--is-disabled:active,.page-mode-link--is-disabled:focus,.page-mode-link--is-disabled:hover {
color: hsl(var(--hsl-f1))
}
.page-mode-link--is-disabled.page-mode-link--white {
color: #fff;
opacity: .5
}
.page-mode-link--is-disabled.page-mode-link--white:active,.page-mode-link--is-disabled.page-mode-link--white:focus,.page-mode-link--is-disabled.page-mode-link--white:hover {
color: #fff
}
.page-mode-link--profile-page {
color: hsl(var(--hsl-l2));
margin: 0;
padding: 0
}
.page-mode-link--profile-page:active,.page-mode-link--profile-page:focus,.page-mode-link--profile-page:hover {
color: hsl(var(--hsl-l1))
}
.page-mode-link__badge {
background-color: #10101057;
border-radius: 4px;
color: #c9c9c9;
font-size: 80%;
font-weight: 700;
margin-left: 5px;
padding: 2px 5px
}
.page-mode-link__stripe {
background-color: white;
bottom: 0;
display: block;
height: 4px;
left: 0;
position: absolute;
transform: translateY(5px) scaleY(0);
transition: transform .12s ease-in-out;
width: 100%
}
.page-mode-link__stripe--black {
background-color: hsl(var(--hsl-b6))
}
.page-mode-link--profile-page .page-mode-link__stripe {
background-color: hsl(var(--hsl-h1));
border-radius: 10000px;
bottom: -6px;
height: 10px;
transform: translateY(0) scaleY(0)
}
.page-mode-link--is-active .page-mode-link__stripe,.page-mode-link.js-is-active .page-mode-link__stripe,.page-mode-link:hover .page-mode-link__stripe {
transform: translateY(0) scaleY(1)
}
.page-mode-link--is-disabled .page-mode-link__stripe {
opacity: 0
}
.page-mode-link__subtitle {
font-size: 11px
}
.page-nav {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.page-nav__item {
align-items: center;
display: flex;
padding: 20px 10px
}
@media (min-width: 900px) {
.page-nav__item {
flex:1
}
.page-nav__item--left {
justify-content: flex-end
}
}
.page-nav__label {
padding: 0 10px
}
.page-nav-fancy {
align-items: center;
background-image: var(--bg,url(/assets/images/news-show-default.78f23cb7.jpg));
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
display: flex;
justify-content: space-between;
margin: 0 -10px;
padding: 20px 10px;
position: relative;
text-decoration: none
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.page-nav-fancy {
background-image:var(--bg-2x,url(/assets/images/[email protected]))
}
}
.page-nav-fancy:active,.page-nav-fancy:focus,.page-nav-fancy:hover {
color: #fff;
text-decoration: none
}
@media (min-width: 900px) {
.page-nav-fancy {
margin-left:-30px;
margin-right: -50px;
padding-left: 30px;
padding-right: 50px
}
}
.page-nav-fancy:before {
background-color: hsl(var(--hsl-b6));
content: "";
height: 100%;
left: 0;
opacity: .75;
position: absolute;
top: 0;
transition: all .12s ease-in-out;
width: 100%;
will-change: opacity
}
.page-nav-fancy:hover:before {
opacity: .6
}
.page-nav-fancy__label {
order: 1;
position: relative
}
.page-nav-fancy--prev .page-nav-fancy__label {
text-align: right
}
.page-nav-fancy__subtitle {
font-size: 12px;
font-weight: 600
}
.page-nav-fancy__icon {
order: 1;
position: relative
}
.page-nav-fancy--prev .page-nav-fancy__icon {
order: 0;
transform: rotate(.5turn)
}
.page-tabs {
--border-size: 5px;
--tab-hover-border-colour: transparent;
--tab-active-border-colour: hsl(var(--hsl-h1));
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 1px;
position: relative;
width: 100%
}
.page-tabs:before {
background-image: linear-gradient(to left,transparent 10%,hsl(var(--hsl-b1)) 50%,transparent 90%);
content: "";
height: 1px;
left: 0;
position: absolute;
top: 100%;
width: 100%
}
.page-tabs--follows {
--border-size: 2px;
--tab-hover-border-colour: var(--tab-active-border-colour);
margin: 0 0 10px;
max-width: -moz-max-content;
max-width: max-content
}
.page-tabs--follows:before {
background-color: #ffffffa6;
background-image: none;
height: var(--border-size);
top: calc(100% - var(--border-size));
width: 100%
}
.page-tabs__tab {
border-bottom: var(--border-size) solid transparent;
color: #fff;
cursor: pointer;
font-size: 14px;
margin: 0;
padding: 5px 0;
position: relative
}
.page-tabs__tab:active,.page-tabs__tab:focus,.page-tabs__tab:hover {
text-decoration: none
}
.page-tabs__tab--active {
--tab-hover-border-colour: var(--tab-active-border-colour);
border-bottom-color: white;
font-weight: 700
}
.page-tabs__tab--disabled {
color: #ccc;
cursor: default
}
.page-tabs__tab--disabled:active,.page-tabs__tab--disabled:focus,.page-tabs__tab--disabled:hover {
color: #ccc;
text-decoration: none
}
.page-title {
font-size: 15px;
padding: 20px;
position: relative
}
.page-title--lighter {
color: hsl(var(--hsl-l1));
font-weight: 100
}
.page-title__button {
align-items: center;
display: flex;
height: 100%;
position: absolute;
right: 20px;
top: 0
}
.pagination-v2 {
--active-bg: hsl(var(--hsl-h1));
align-items: center;
color: white;
display: flex;
font-size: 12px;
justify-content: center;
padding: 10px 0
}
@media (min-width: 900px) {
.pagination-v2 {
padding-left:10px;
padding-right: 10px
}
}
.pagination-v2--forum {
--active-bg: var(--forum-bg);
margin-bottom: -2px
}
.pagination-v2__col {
display: flex;
margin: 2px
}
.pagination-v2__col--pages {
flex-wrap: wrap;
list-style: none;
margin: -2px;
padding: 0
}
.pagination-v2__item {
margin: 2px
}
.pagination-v2__link {
border-radius: 10000px;
display: block;
padding: 4px 10px;
text-decoration: none
}
.pagination-v2__link:active,.pagination-v2__link:focus,.pagination-v2__link:hover {
text-decoration: none
}
.pagination-v2__link--active {
background-color: #ccc5c5b8;
color: hsl(var(--hsl-b5));
font-weight: 600
}
.pagination-v2__link--disabled {
opacity: .5;
color: #ffffff;
}
.pagination-v2__link--quick {
background-color: #a29e9e78;
padding-left: 15px;
padding-right: 15px;
text-transform: uppercase;
white-space: nowrap
}
.password-reset {
color: #fff;
font-size: 12px;
margin: 0 auto;
max-width: 300px;
padding: 20px;
width: 100%
}
.password-reset__error {
color: #fc2;
display: none;
margin-top: 5px
}
[data-form-error-state=error] .password-reset__error {
display: block
}
.password-reset__input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #111;
border: 2px solid transparent;
border-radius: 4px;
margin: 5px 0 0;
outline: none;
padding: 5px
}
.password-reset__input:focus {
border-color: #fc2
}
[data-form-error-state=error] .password-reset__input {
border-color: #ed1221
}
.password-reset__input-group {
display: flex;
flex-direction: column;
font-weight: 400;
margin: 10px 0;
text-transform: none
}
.pill-badge {
background: hsl(var(--hsl-b6));
border-radius: 10000px;
color: hsl(var(--hsl-f1));
font-size: 10px;
font-weight: 700;
padding: 2px 8px
}
.pill-badge--pink {
background: #4f4f4f;
color: white;
}
.pill-badge--with-shadow {
box-shadow: 0 1px 3px rgba(0,0,0,.25)
}
.pill-badge--yellow {
background: #2f2f2f;
color: white;
}
.plain-text-preview {
display: inline
}
.play-button {
--icon: "\f04b";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
position: relative;
text-rendering: auto
}
.play-button.fa-pull-left {
margin-right: .3em
}
.play-button.fa-pull-right {
margin-left: .3em
}
[data-audio-state=loading] .play-button,[data-audio-state=playing] .play-button {
--icon: "\f04c"
}
.play-button:before {
content: var(--icon)
}
.play-detail {
--border-radius: 10px;
--bg:#48484824;
--bg-main: #32323214;
--pin-sortable-handle-width: 20px;
background-color: var(--bg);
color: #fff;
font-size: 12px;
line-height: normal;
margin: 2px 0;
min-height: 60px;
position: relative
}
@media (min-width: 900px) {
.play-detail {
background-color:transparent;
display: flex;
min-height: auto
}
.play-detail--active,.play-detail:hover {
--bg:#7f7f7f24;
--bg-main: #62626200;
}
}
.play-detail-list--menu-active .play-detail--highlightable {
pointer-events: none
}
@media (min-width: 900px) {
.play-detail--pin-sortable {
margin-left:calc(var(--pin-sortable-handle-width)*-1)
}
}
.play-detail__accuracy {
color: #fc2;
display: inline-block;
min-width: 60px
}
.play-detail__accuracy-and-weighted-pp {
font-size: 14px;
font-weight: 600
}
.play-detail__artist {
display: block
}
@media (min-width: 900px) {
.play-detail__artist {
display:inline
}
}
.play-detail__beatmap {
color: #ea0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.play-detail__beatmap-and-time {
display: flex;
gap: 15px;
margin-top: 2px;
white-space: nowrap
}
.play-detail__detail {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0
}
.play-detail__group {
padding: 10px 20px
}
.play-detail__group--bottom {
position: relative
}
@media (min-width: 900px) {
.play-detail__group--bottom {
display:flex;
padding: 0
}
}
.play-detail__group--top {
align-items: center;
background-color: var(--bg-main);
border-radius: var(--border-radius);
display: flex;
min-width: 0
}
@media (min-width: 900px) {
.play-detail__group--top {
border-radius:var(--border-radius) 0 0 var(--border-radius);
flex: 1;
padding-bottom: 5px;
padding-right: 0;
padding-top: 5px
}
}
.play-detail__icon {
flex: none;
min-height: 30px;
position: relative;
width: 60px
}
@media (min-width: 900px) {
.play-detail__icon--extra {
display:none
}
}
.play-detail__icon--main {
display: none;
margin-right: 10px;
position: relative
}
@media (min-width: 900px) {
.play-detail__icon--main {
display:block;
height: 20px;
width: 40px
}
}
.play-detail__mods {
flex: 1
}
.play-detail__more {
align-items: center;
display: inline-flex;
height: 40px;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 40px
}
@media (min-width: 900px) {
.play-detail__more {
height:100%;
left: 100%
}
}
.play-detail__pp {
bottom: 10px;
color: hsl(var(--hsl-h1));
flex: none;
font-size: 16px;
font-weight: 700;
position: absolute;
right: 20px
}
@media (min-width: 900px) {
.play-detail__pp {
align-items:center;
background: var(--bg);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
bottom: auto;
display: inline-flex;
flex: none;
justify-content: center;
min-width: 110px;
padding: 5px 20px 5px 30px;
position: relative;
right: auto
}
.play-detail__pp:before {
background-color: var(--bg-main);
clip-path: polygon(0 0,100% 50%,0 100%);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 10px
}
}
.play-detail__pp-unit {
color: hsl(var(--hsl-l3));
font-size: 12px
}
.play-detail__score-detail {
display: flex
}
@media (min-width: 900px) {
.play-detail__score-detail {
align-items:center;
background-color: var(--bg-main);
padding: 5px 10px
}
}
.play-detail__score-detail--mods {
margin-top: 10px;
padding-right: 0
}
@media (min-width: 900px) {
.play-detail__score-detail--mods {
margin-top:0;
order: -1
}
}
.play-detail__score-detail-top-right {
margin-left: 10px
}
.play-detail__time {
color: #bebebe;
flex: none
}
.play-detail__title {
align-self: flex-start;
color: #fff;
display: block;
font-size: 14px;
max-width: 100%
}
.play-detail__title:active,.play-detail__title:focus,.play-detail__title:hover {
color: #fff
}
.play-detail__weighted-pp {
display: inline-block;
margin-left: 10px;
min-width: 60px
}
.play-detail__weight {
font-size: 12px
}
.popup-menu {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
height: 100%;
left: 0;
margin: 0;
outline: none;
padding: 0;
position: absolute;
top: 0;
width: 100%
}
.popup-menu-float {
position: absolute;
right: 0;
top: 0
}
.post-box-toolbar {
display: flex;
flex-wrap: wrap;
gap: 2px;
justify-content: center
}
.post-box-toolbar--disabled {
pointer-events: none
}
@media (min-width: 900px) {
.post-box-toolbar {
justify-content:flex-start
}
}
.post-box-toolbar__help {
align-self: center;
font-size: 14px;
margin: 0 10px
}
.product-box {
background-color: hsla(var(--hsl-b4),.25);
background-position: 50%;
background-size: cover;
color: #fff;
display: block;
position: relative;
text-decoration: none;
border-radius: 20px;
}
.product-box:active,.product-box:focus,.product-box:hover {
color: #fff;
text-decoration: none
}
.product-box:before {
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
border-radius: 20px;
}
.product-box:hover:before {
opacity: 0
}
.product-box:after {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
opacity: 0
}
.product-box:hover:after {
opacity: 1
}
.product-box--card {
padding: 20px;
}
.product-box--card:after,.product-box--card:before {
content: "";
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
transition: opacity .12s;
width: 100%;
will-change: opacity
}
.product-box--card-large {
grid-column-end: -1;
grid-column-start: 1;
height: 300px;
order: -1;
}
.product-box--card-small {
height: 200px
}
.product-box--header {
height: 300px;
padding: 20px 10px;
width: 100%
}
@media (min-width: 900px) {
.product-box--header {
padding-left:50px;
padding-right: 50px
}
}
.product-box--oos {
order: 1
}
.product-box__text {
will-change: opacity
}
.product-box:hover .product-box__text {
opacity: 0
}
.product-box__oos-bar {
background-image: url(/assets/images/store-out-of-stock-bar.0ab52ecc.png);
background-size: contain;
bottom: 0;
display: none;
height: 136px;
margin: 0;
position: absolute;
right: 0;
width: 233px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.product-box__oos-bar {
background-image:url(/assets/images/[email protected])
}
}
.product-box--oos .product-box__oos-bar {
display: block
}
.profile-badge {
background-repeat: no-repeat;
height: 50px;
margin: 0 -3px;
text-align: center;
width: 50px
}
.profile-badge--level {
background-image: url(/assets/images/levelbadge.3c8cd94b.png);
background-size: 50px 50px;
order: 1
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.profile-badge--level {
background-image:url(/assets/images/[email protected])
}
}
.profile-badge--achievements {
background-image: url(/assets/images/achievements.f0514f07.png);
background-size: 50px 50px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.profile-badge--achievements {
background-image:url(/assets/images/[email protected])
}
}
.profile-badge__number {
color: #fff;
font-size: 16px;
font-weight: 700;
top: 6px
}
.profile-badges {
--gutter: 10px;
background-color: hsl(var(--hsl-b4));
box-shadow: inset 0 2px 3px -1px rgba(0,0,0,.25);
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px var(--gutter)
}
@media (min-width: 900px) {
.profile-badges {
--gutter:50px
}
}
.profile-badges--multiplayer {
background-color: hsl(var(--hsl-b5))
}
.profile-badges__badge {
height: 40px;
-o-object-fit: contain;
object-fit: contain;
width: 86px
}
.profile-badges__date {
color: hsl(var(--hsl-l1));
margin-top: 5px
}
.profile-cover-change-popup {
display: grid;
font-size: 10px;
gap: 10px;
position: relative;
text-align: center
}
.profile-cover-change-popup__defaults {
display: grid;
gap: 4px;
grid-template-columns: 1fr 1fr
}
.profile-cover-change-popup__selections-info {
grid-column: 1/3;
margin: 10px 0 0
}
.profile-cover-change-popup__drop-overlay {
align-items: center;
background-color: rgba(0,0,0,.5);
border-radius: 4px;
display: flex;
font-size: 24px;
height: 100%;
justify-content: center;
left: 0;
padding: 20px;
position: absolute;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%
}
.profile-cover-change-popup__drop-overlay--hover {
background-color: rgba(0,0,0,.7)
}
.profile-cover-change-popup__drop-overlay:after {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.profile-cover-selection {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: rgba(0,0,0,.25);
background-position: 50%;
background-size: cover;
border: none;
cursor: pointer;
margin: 0;
min-height: 45px;
outline: none;
padding: 0 0 26.66666667%;
position: relative;
width: 100%
}
.profile-cover-selection__selected {
bottom: 10px;
color: #fff;
font-size: 24px;
left: 10px;
position: absolute;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.profile-cover-uploader {
border-top: 1px solid hsl(var(--hsl-b5));
display: flex;
flex-direction: column;
padding-top: 10px
}
.profile-cover-uploader__button {
margin-top: 10px
}
.profile-cover-uploader__info {
margin-bottom: -10px;
padding: 10px
}
.profile-cover-uploader__info-entry {
margin-bottom: 5px
}
.profile-detail {
--gutter: 10px;
display: grid;
gap: 10px;
padding: 10px var(--gutter)
}
.profile-detail:empty {
display: none
}
@media (min-width: 900px) {
.profile-detail {
--gutter:50px
}
}
.profile-detail__chart {
align-items: center;
display: inline-flex;
display: flex;
font-size: 12px;
height: 90px;
justify-content: center;
position: relative
}
@media (min-width: 900px) {
.profile-detail__chart {
margin:0 -15px
}
}
.profile-detail__chart-numbers {
--align-items-desktop: flex-end;
display: flex;
flex-direction: column;
gap: 10px
}
.profile-detail__chart-numbers--top {
--align-items-desktop: flex-start
}
@media (min-width: 900px) {
.profile-detail__chart-numbers {
align-items:var(--align-items-desktop);
flex-direction: row;
justify-content: space-between
}
}
@media (min-width: 900px) {
.profile-detail__separator {
height:100%;
width: var(--separator-size)
}
}
.profile-detail__stats {
align-items: start;
display: grid;
gap: 15px
}
@media (min-width: 900px) {
.profile-detail__stats {
grid-template-columns:1fr auto auto
}
}
.profile-detail__values {
display: flex;
gap: 20px
}
.profile-detail__values--grid {
display: grid;
grid-template-columns: repeat(4,1fr)
}
.profile-detail-bar {
--padding: 10px;
--vertical-padding: 10px;
--item-height: 40px;
display: flex;
flex: none;
flex-wrap: wrap;
gap: 10px;
padding: 10px var(--padding);
position: relative;
width: 100%
}
@media (min-width: 900px) {
.profile-detail-bar {
--padding:50px
}
}
.profile-detail-bar--team {
justify-content: end
}
.profile-detail-bar__level {
align-items: center;
display: flex;
font-size: 12px;
font-weight: 700;
gap: 10px;
height: var(--item-height);
margin-left: auto
}
.profile-detail-bar__level-bar {
display: none
}
@media (min-width: 900px) {
.profile-detail-bar__level-bar {
display:flex;
width: 200px
}
}
.profile-edit-popup {
background: hsl(var(--hsl-b6));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: grid;
gap: 10px;
max-width: calc(100vw - 50px);
padding: 10px;
position: absolute;
right: 100%;
top: 0;
width: 400px;
z-index: 100
}
.profile-extra-entries {
display: flex;
flex-direction: column;
list-style: none;
margin: -2px 0;
padding: 0
}
.profile-extra-entries--kudosu {
margin-top: 20px
}
.profile-extra-entries__item {
align-items: baseline;
display: flex;
justify-content: space-between;
line-height: 22px;
margin: 2px 0
}
.profile-extra-entries__item--top-ranks {
border-bottom: 1px solid #eee;
height: auto;
margin: 0;
padding: 10px 0
}
.profile-extra-entries__item--top-ranks:before {
background-color: #eee;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
content: "";
height: 100%;
left: 0;
margin: 0 -10px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transition: all 25ms ease-out;
width: 100%;
width: calc(100% + 20px);
will-change: opacity
}
.profile-extra-entries__item--top-ranks:hover:before {
opacity: 1;
transition: all 50ms ease-out
}
.profile-extra-entries__kudosu-amount {
color: hsl(var(--hsl-l1));
font-weight: inherit
}
.profile-extra-entries__detail {
align-items: baseline;
display: flex;
flex: 1;
min-width: 0
}
.profile-extra-entries__detail--vertical {
align-items: stretch;
flex-direction: column
}
.profile-extra-entries__detail-column {
flex: none;
overflow: hidden;
text-overflow: ellipsis
}
.profile-extra-entries__detail-column--full {
flex: 1;
min-width: 0
}
.profile-extra-entries__text {
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis
}
.profile-extra-entries__text em {
font-style: normal
}
.profile-extra-entries__icon {
align-items: center;
align-self: flex-start;
display: inline-flex;
flex: none;
font-size: 14px;
height: 22px;
justify-content: center;
margin-right: 5px;
width: 28px
}
.profile-extra-entries__icon--ranked {
color: hsl(var(--beatmapset-ranked-bg-hsl))
}
.profile-extra-entries__icon--qualified {
color: hsl(var(--beatmapset-qualified-bg-hsl))
}
.profile-extra-entries__icon--loved {
color: hsl(var(--beatmapset-loved-bg-hsl))
}
.profile-extra-entries__icon--approved {
color: hsl(var(--beatmapset-approved-bg-hsl))
}
.profile-extra-entries__icon--danger {
color: hsl(var(--hsl-red-1))
}
.profile-extra-entries__icon--green {
color: hsl(var(--hsl-green-1))
}
.profile-extra-entries__icon--orange {
color: hsl(var(--hsl-orange-1))
}
.profile-extra-entries__icon--pink {
color: hsl(var(--hsl-pink-1))
}
.profile-extra-entries__time {
color: #a1a1a1;
}
.profile-extra-recent-infringements {
line-height: normal;
overflow-x: auto
}
.profile-extra-recent-infringements__action {
border-radius: 20px;
margin: -2px -10px;
padding: 2px 10px;
width: 100%
}
.profile-extra-recent-infringements__action--note {
background-color: hsl(var(--hsl-blue-1));
color: #000
}
.profile-extra-recent-infringements__action--restriction {
background-color: hsl(var(--hsl-red-3));
color: #fff
}
.profile-extra-recent-infringements__action--silence {
background-color: #4a4a4a;
color: #d8d8d8;
}
.profile-extra-recent-infringements__action--tournament-ban {
background-color: hsl(var(--hsl-red-3));
color: #fff
}
.profile-extra-recent-infringements__table {
margin: 0 -5px;
min-width: 800px;
width: 100%
}
@media (min-width: 900px) {
.profile-extra-recent-infringements__table {
min-width:auto
}
}
.profile-extra-recent-infringements__table-cell {
padding: 5px;
vertical-align: baseline
}
.profile-extra-recent-infringements__table-cell--action {
width: 140px
}
.profile-extra-recent-infringements__table-cell--date {
color: #dedede;
padding-right: 20px;
width: 160px
}
.profile-extra-recent-infringements__table-cell--length {
padding-right: 40px;
width: 145px
}
.profile-extra-recent-infringements__table-cell--header {
color: #fff;
font-size: 10px;
font-weight: 900;
text-transform: uppercase
}
.profile-extra-recent-infringements__actor {
color: hsl(var(--hsl-l1))
}
.profile-extra-recent-infringements__actor:before {
content: ""
}
.profile-extra-user-page--new {
align-items: center;
display: flex;
flex-direction: column
}
.profile-extra-user-page__new-content {
margin-bottom: 40px
}
.profile-extra-user-page__new-content--icon {
font-size: 125px
}
.profile-hue {
display: grid;
gap: 10px
}
.profile-hue__buttons {
display: grid;
gap: inherit;
grid-template-columns: 1fr 1fr
}
.profile-hue__info {
font-size: 10px;
font-weight: 700;
text-align: center
}
.profile-hue-selector {
display: grid;
height: 36px;
margin: 0 9px;
position: relative
}
.profile-hue-selector.ui-slider-disabled {
opacity: .6
}
.profile-hue-selector__handle {
--border-colour: hsl(var(--hsl-c1));
border: 2px solid var(--border-colour)
}
.profile-hue-selector__handle--default {
--border-colour: hsl(var(--hsl-b1))
}
.ui-slider .profile-hue-selector__handle.ui-slider-handle {
background-color: hsl(var(--hue),var(--c-saturation-2),var(--c-lightness-2));
border-radius: 4px;
height: 100%;
margin-left: -9px;
top: 0;
width: 18px
}
.profile-hue-selector__range {
--saturation: var(--c-saturation-3);
--lightness: var(--c-lightness-3);
background: linear-gradient(to right,hsl(0,var(--saturation),var(--lightness)) 0,hsl(60,var(--saturation),var(--lightness)) 16.67%,hsl(120,var(--saturation),var(--lightness)) 33.33%,hsl(180,var(--saturation),var(--lightness)) 50%,hsl(240,var(--saturation),var(--lightness)) 66.67%,hsl(300,var(--saturation),var(--lightness)) 83.33%,hsl(360,var(--saturation),var(--lightness)) 100%);
border-radius: 4px;
margin: 7px 0
}
.profile-info {
--avatar-radius-extended-desktop: 40px;
--avatar-radius-extended: 20px;
--avatar-radius: 20px;
--avatar-size-extended-desktop: 120px;
--avatar-size-extended: var(--content-height);
--avatar-size: var(--content-height);
--avatar-height: var(--avatar-size);
--avatar-width: var(--avatar-size);
--bg: none;
--content-height: 65px;
--vertical-padding: 10px;
--info-margin-extended-desktop: 20px;
--info-margin-extended: 10px;
--info-margin: 10px;
display: flex;
flex: none;
flex-direction: column;
width: 100%
}
.profile-info--cover {
--avatar-radius: var(--avatar-radius-extended);
--avatar-size: var(--avatar-size-extended);
--info-margin: var(--info-margin-extended)
}
.profile-info--team {
--avatar-width: calc(var(--avatar-height)*2);
--bg: url(/assets/images/generic.4dc91de4.jpg)
}
@media (min-width: 900px) {
.profile-info {
--avatar-radius-extended:var(--avatar-radius-extended-desktop);
--avatar-size-extended: var(--avatar-size-extended-desktop);
--info-margin-extended: var(--info-margin-extended-desktop)
}
}
.profile-info__avatar {
align-self: flex-end;
border-radius: var(--avatar-radius);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
flex: none;
height: var(--avatar-height);
margin-bottom: var(--vertical-padding);
overflow: hidden;
transform: translateZ(0);
width: var(--avatar-width)
}
.profile-info__bg {
background-image: var(--bg);
background-position: 50%;
background-size: cover;
height: 100px;
position: relative;
border-radius: 25px;
}
@media (min-width: 900px) {
.profile-info__bg {
height:250px
}
}
.profile-info__cover-toggle {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
position: absolute;
right: var(--gutter-size);
top: 0
}
@media (min-width: 900px) {
.profile-info__cover-toggle {
right:0;
width: var(--gutter-size)
}
}
.profile-info__details {
--gutter-size: 10px;
--gutter-size-desktop: 50px;
align-items: center;
display: flex;
height: calc(var(--content-height) + var(--vertical-padding)*2);
padding: 0 var(--gutter-size);
position: relative
}
@media (min-width: 900px) {
.profile-info__details {
--gutter-size:var(--gutter-size-desktop)
}
}
.profile-info__flag {
align-items: center;
color: #fff;
display: grid;
gap: 4px;
grid-template-columns: auto 1fr
}
.profile-info__flag,.profile-info__flag:active,.profile-info__flag:focus,.profile-info__flag:hover {
text-decoration: none
}
.profile-info__flag:active,.profile-info__flag:focus,.profile-info__flag:hover {
color: #fff
}
.profile-info__flag-text {
display: none;
font-size: 14px
}
@media (min-width: 900px) {
.profile-info__flag-text {
display:block
}
}
.profile-info__flags {
display: flex;
font-size: 15px;
gap: 10px;
margin-top: 10px
}
@media (min-width: 900px) {
.profile-info__flags {
font-size:20px;
margin-top: 5px
}
}
.profile-info__icon {
color: hsl(var(--hsl-c1));
display: flex;
font-size: .75em;
height: 1.33333333em;
text-shadow: none
}
.profile-info__icon--supporter {
align-items: center;
background-color: hsl(var(--hsl-pink-1));
border-radius: 10000px;
color: #fff;
display: inline-flex;
justify-content: center;
padding: 0 10px;
text-decoration: none
}
.profile-info__icon--supporter:active,.profile-info__icon--supporter:focus,.profile-info__icon--supporter:hover {
color: #fff;
text-decoration: none
}
.profile-info__icons--flag-inline {
display: contents
}
@media (min-width: 900px) {
.profile-info__icons--flag-inline {
display:none
}
}
.profile-info__icons--name-inline {
align-items: baseline;
display: none;
font-size: 15px;
gap: 2px;
margin-left: 5px
}
@media (min-width: 900px) {
.profile-info__icons--name-inline {
display:flex
}
}
.profile-info__info {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
margin-left: var(--info-margin);
min-width: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75)
}
.profile-info__level {
flex: none
}
.profile-info__name {
align-items: center;
display: flex;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: -5px 0 0;
max-width: 100%;
padding: 0;
position: relative
}
@media (min-width: 900px) {
.profile-info__name {
font-size:24px
}
}
.profile-info__previous-usernames {
display: inline-block;
pointer-events: none;
transform: translateY(-.3em)
}
@media (min-width: 900px) {
.profile-info__previous-usernames {
left:100%;
position: absolute;
top: -16px;
transform: translateY(0)
}
.profile-info__previous-usernames:hover {
z-index: 10
}
}
.profile-info__spinner {
display: none
}
@media (min-width: 900px) {
.profile-info__spinner {
align-items:center;
background-color: hsla(var(--hsl-b6),.5);
display: inline-flex;
font-size: 60px;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%
}
}
.profile-info__title {
color: #fff;
font-size: 14px;
line-height: normal
}
.profile-info__title:active,.profile-info__title:focus,.profile-info__title:hover {
color: #fff
}
@media (min-width: 900px) {
.profile-info__title {
font-size:16px
}
}
.profile-links {
--gutter: 10px;
display: flex;
flex-direction: column;
font-size: 12px;
justify-content: center;
min-height: 50px;
padding: 10px var(--gutter);
position: relative
}
@media (min-width: 900px) {
.profile-links {
--gutter:50px
}
}
.profile-links__edit {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
right: var(--gutter);
top: 0
}
@media (min-width: 900px) {
.profile-links__edit {
right:0;
width: var(--gutter)
}
}
.profile-links__icon {
color: hsl(0deg 0.48% 39.08%);
margin-right: 2px
}
.profile-links__item {
margin: 2px 5px;
min-width: 0
}
.profile-links__row {
display: flex;
flex-wrap: wrap;
margin: -2px -5px
}
.profile-links__row--0+.profile-links__row {
margin-top: 10px
}
.profile-links__value {
word-wrap: break-word;
font-weight: 600
}
.profile-page-button {
display: none
}
@media (min-width: 900px) {
.profile-page-button {
align-items:center;
bottom: 100%;
display: flex;
height: 55px;
position: absolute;
right: 50px
}
}
.profile-page-button__button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: hsl(var(--hsl-b3));
border: none;
border-radius: 10000px;
color: hsl(var(--hsl-c1));
font-size: 12px;
margin: 0;
outline: none;
padding: 5px 20px
}
.profile-page-button__button:hover {
background-color: hsl(var(--hsl-b2))
}
.profile-page-button__button[disabled] {
opacity: .5;
pointer-events: none
}
.profile-page-cover-editor-button {
bottom: 10px;
display: grid;
gap: 10px;
justify-content: center;
position: absolute;
right: 10px
}
@media (min-width: 900px) {
.profile-page-cover-editor-button {
right:0;
width: 50px
}
}
.profile-previous-usernames {
align-items: baseline;
border-radius: 6px;
display: flex;
text-shadow: none;
transition: all .2s cubic-bezier(.22,.61,.36,1)
}
@media (min-width: 900px) {
.profile-previous-usernames {
margin:5px;
pointer-events: none;
width: 300px
}
.profile-previous-usernames:hover {
background-color: hsl(var(--hsl-b6));
pointer-events: auto;
transform: translateY(-14px)
}
}
.profile-previous-usernames__content {
display: none;
opacity: 0;
padding-left: 0;
transition: inherit;
will-change: opacity
}
@media (min-width: 900px) {
.profile-previous-usernames__content {
display:block;
padding: 10px
}
}
.profile-previous-usernames:hover .profile-previous-usernames__content {
opacity: 1
}
.profile-previous-usernames__icon {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #fff;
flex: none;
font-size: 14px;
margin: 0;
outline: none;
padding: 0;
pointer-events: auto;
text-decoration: none
}
.profile-previous-usernames__icon:active,.profile-previous-usernames__icon:focus,.profile-previous-usernames__icon:hover {
color: #fff;
text-decoration: none
}
.profile-previous-usernames__icon--plain {
display: none;
padding: 10px
}
@media (min-width: 900px) {
.profile-previous-usernames__icon--plain {
display:block
}
}
.profile-previous-usernames__icon--with-title {
margin-left: 10px
}
@media (min-width: 900px) {
.profile-previous-usernames__icon--with-title {
display:none
}
}
.profile-previous-usernames__names {
font-size: 12px;
font-weight: 700;
line-height: 1.2;
margin-top: 0;
white-space: pre-wrap
}
.profile-previous-usernames__title {
font-size: 10px
}
.profile-rank-count {
display: flex;
flex-wrap: wrap;
font-size: 12px;
font-weight: 700;
gap: 4px;
justify-content: center;
margin: auto;
text-align: center
}
@media (min-width: 900px) {
.profile-rank-count {
font-size:12px;
margin: 0
}
}
.profile-stats {
align-self: center;
display: grid;
font-size: 12px;
gap: 4px 20px;
grid-template-columns: 1fr 1fr
}
@media (min-width: 900px) {
.profile-stats {
grid-template-columns:auto auto
}
}
.profile-stats--modding {
max-width: -moz-max-content;
max-width: max-content
}
.profile-stats__entry {
display: contents
}
.profile-stats__key {
font-weight: 400
}
.profile-tournament-banner {
display: block
}
.profile-tournament-banner__image {
max-height: 200px;
width: 100%
}
.qtip {
color: hsl(var(--hsl-c1))
}
.qtip--achievement {
background-color: #1b1b1b;
border: 0 solid transparent;
border-radius: 30px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
line-height: normal;
width: 200px
}
.qtip--achievement .qtip-content {
overflow: visible;
padding: 0
}
.qtip--daily-challenge {
background: transparent;
border: none;
line-height: normal;
max-width: none;
min-width: 300px
}
.qtip--daily-challenge .qtip-content {
padding: 0 0 5px
}
.qtip--tooltip-beatmap {
background-color: hsl(var(--hsl-b6));
border: 0 solid transparent;
border-radius: 4px;
max-width: none;
min-width: 110px
}
.qtip--tooltip-beatmap .qtip-content {
padding: 0
}
.qtip--user-card {
font-size: unset;
line-height: unset;
min-width: unset
}
.qtip--user-card,.qtip--user-list {
max-width: unset;
z-index: 512!important
}
.qtip--user-list {
padding: 5px
}
.qtip--user-list>.qtip-content {
overflow: unset;
padding: 0
}
.quick-search {
display: flex;
flex-direction: column;
max-height: 100%;
max-width: 1000px;
overflow: hidden;
width: 100%;
}
@media (min-width: 900px) {
.quick-search {
border-radius: 20px;
max-height: calc(100% - 40px);
max-width: 1000px;
width: calc(100% - 40px);
background-color: #0c0c0cd1;
}
}
.quick-search-input {
background-color: rgb(21 21 21 / 60%);
display: flex;
flex: none;
padding: 10px;
border: none;
}
@media (min-width: 900px) {
.quick-search-input {
padding-bottom:25px;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px
}
}
.quick-search-input__field {
align-items: flex-end;
border-bottom: 2px solid #959595;
display: flex;
flex: 1;
font-size: 16px;
padding-bottom: 5px
}
@media (min-width: 900px) {
.quick-search-input__field {
font-size:24px
}
}
.quick-search-input__icon {
margin-right: 10px
}
.quick-search-input__input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
flex: 1;
margin: 0;
outline: none;
padding: 0
}
.quick-search-input__input::-moz-placeholder {
color: hsl(var(--hsl-c2));
opacity: .7
}
.quick-search-input__input::placeholder {
opacity: .7
}
.quick-search-items {
--quick-search-items-badge-margin: 20px;
display: flex;
flex-direction: column;
margin: 9px -1px -1px
}
@media (max-width: 479px) {
.quick-search-items {
--quick-search-items-badge-margin:10px
}
}
.quick-search-items--empty {
font-size: 16px
}
.quick-search-items__item {
margin: 1px 0
}
.quick-search-result {
display: flex;
flex: 1;
flex-direction: column;
overflow-y: auto;
padding: 10px
}
@media (min-width: 900px) {
.quick-search-result {
padding-bottom:25px;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px
}
}
.quick-search-result__item {
display: flex;
flex: none;
flex-direction: column;
margin: 15px 0
}
.ranking-filter {
--title-margin-bottom-mobile: 0;
align-items: center;
display: flex;
flex: 1
}
@media (min-width: 900px) {
.ranking-filter {
display:block;
flex: none
}
}
.ranking-filter--full {
--title-margin-bottom-mobile: 10px;
display: block
}
@media (min-width: 900px) {
.ranking-filter--full {
flex:1
}
}
.ranking-filter__title {
font-size: 12px;
font-weight: 700;
margin-bottom: 10px;
margin-right: 15px;
text-transform: uppercase
}
@media (max-width: 899px) {
.ranking-filter__title {
margin-bottom:var(--title-margin-bottom-mobile)
}
}
.ranking-page {
color: #fff;
font-size: 12px;
overflow-x: auto
}
.ranking-page-table {
--grade-min-width: 0px;
border-collapse: separate;
border-spacing: 0 3px;
text-align: center;
transform: translateZ(0);
white-space: nowrap;
width: 100%
}
.ranking-page-table--kudosu {
--grade-min-width: 120px
}
.ranking-page-table__heading {
font-weight: 400;
padding: 5px 10px;
text-align: center
}
.ranking-page-table__heading--main {
width: 100%
}
.ranking-page-table__heading--focused {
color: #fff
}
.ranking-page-table__heading--grade {
padding: 5px 20px
}
@media (min-width: 900px) {
.ranking-page-table__heading--grade {
min-width:var(--grade-min-width)
}
}
.ranking-page-table__column {
background: var(--bg);
padding: 6px 0
}
.ranking-page-table__column--division {
padding: 0 10px
}
.ranking-page-table__column--rank {
opacity: 1;
padding: 0 10px;
text-align: center
}
.ranking-page-table__column--rank-change-down {
--icon: "\f063";
color: hsl(var(--hsl-red-1))
}
.ranking-page-table__column--rank-change-none {
--icon: "";
color: hsl(var(--hsl-f1))
}
.ranking-page-table__column--rank-change-pending {
--icon: "\f141";
color: hsl(var(--hsl-f1))
}
.ranking-page-table__column--rank-change-up {
--icon: "\f062";
color: hsl(var(--hsl-lime-1))
}
.ranking-page-table__column--rank-change-icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: var(--icon);
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
text-rendering: auto
}
.ranking-page-table__column--rank-change-icon:before.fa-pull-left {
margin-right: .3em
}
.ranking-page-table__column--rank-change-icon:before.fa-pull-right {
margin-left: .3em
}
.ranking-page-table__column--rank-change-value {
padding-left: 5px;
padding-right: 10px
}
.ranking-page-table__column--value {
padding-left: 10px;
padding-right: 10px
}
.ranking-page-table__column:first-child {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px
}
.ranking-page-table__column:last-child {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px
}
.ranking-page-table__row {
--bg: #18181885;
font-size: 13px;
height: 35px
}
.ranking-page-table__row--inactive {
opacity: .5
}
.ranking-page-table__row:hover {
--bg: #3a3a3a4f;
}
.ranking-page-table__country-link {
align-items: center;
display: flex
}
.ranking-page-table__country-link-text {
margin-left: 10px
}
.ranking-page-table__flags {
display: inline-flex;
font-size: 20px;
gap: 10px
}
.ranking-page-table__user-link {
align-items: center;
display: flex
}
.ranking-page-table__user-link-text {
margin-left: 10px;
max-width: 350px
}
.rankings-beatmapsets {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
margin-bottom: 10px;
margin-top: 40px
}
.rankings-beatmapsets--daily-challenge {
margin-top: 0
}
.rankings-beatmapsets--single {
grid-template-columns: 1fr
}
.report-form {
background-color: #0f0f0f;
border-radius: 20px;
color: #fff;
display: flex;
flex: 0 1 400px;
flex-direction: column;
font-size: 14px;
padding: 30px 15px 15px
}
@media (max-width: 899px) {
.report-form {
max-width:100vw
}
}
.report-form__button {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #101010;
border: none;
border-radius: 200px;
font-weight: 600;
margin: 0;
outline: none;
padding: 15px;
position: relative;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
width: 200px
}
.report-form__button[disabled]:before {
background-color: rgba(0,0,0,.5);
border-radius: inherit;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.report-form__button:active,.report-form__button:focus,.report-form__button:hover {
background-color: #161616
}
.report-form__button+.report-form__button {
margin-top: 8px
}
.report-form__button--report {
background-color: #ba0011
}
.report-form__button--report:active,.report-form__button--report:focus,.report-form__button--report:hover {
background-color: #ed1221
}
.report-form__header {
font-size: 24px;
margin-bottom: 10px
}
.report-form__row {
display: flex;
justify-content: center
}
.report-form__row+.report-form__row {
margin-top: 10px
}
.report-form__row+.report-form__row--buttons {
margin-top: 15px
}
.report-form__row--buttons {
align-items: center;
flex-direction: column
}
.report-form__row--exclamation {
font-size: 35px
}
.report-form__row--title {
font-weight: 300
}
.report-form__textarea {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #0d0d0d;
border: none;
border-radius: 20px;
font-size: 12px;
height: 200px;
margin: 0;
max-height: 400px;
min-height: 100px;
outline: none;
padding: 15px;
resize: vertical;
width: 100%;
resize: none
}
.report-form__textarea::placeholder {
color: #9c9c9c;
}
.room-list {
grid-gap: 10px;
display: grid
}
.score-beatmap {
padding: 10px
}
@media (min-width: 900px) {
.score-beatmap {
padding-left:50px;
padding-right: 50px
}
}
.score-beatmap__artist {
font-size: 20px
}
.score-beatmap__detail {
align-items: baseline;
display: flex;
font-size: 16px;
gap: 10px
}
.score-beatmap__detail-item {
margin: 5px
}
.score-beatmap__detail-item--difficulty {
background-color: hsl(var(--hsl-b5));
border-radius: 10000px;
flex: none;
font-size: 12px;
padding: 2px 8px
}
.score-beatmap__link-plain {
color: #fff;
text-decoration: none
}
.score-beatmap__link-plain:active,.score-beatmap__link-plain:focus,.score-beatmap__link-plain:hover {
color: #fff;
text-decoration: none
}
.score-beatmap__star {
color: var(--diff);
font-size: .8em;
margin-right: 5px
}
.score-beatmap__title {
font-size: 24px;
margin: 0 0 10px
}
.score-buttons {
display: flex;
gap: 10px
}
.score-buttons__menu {
background-color: hsla(var(--hsl-b6),.75);
border-radius: 50%;
height: 35px;
position: relative;
transition: background-color .12s ease-in-out;
width: 35px
}
.score-buttons__menu:active,.score-buttons__menu:focus,.score-buttons__menu:hover {
background-color: #303030db;
}
.score-dial {
align-items: center;
display: inline-flex;
height: 200px;
justify-content: center;
width: 200px
}
.score-dial__layer {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.score-dial__layer--grade {
align-items: center;
display: inline-flex;
font-family: Venera,sans-serif;
font-size: 50px;
justify-content: center;
padding-top: .15em;
text-shadow: 0 0 10px hsl(var(--hsl-c1))
}
.score-dial__inner {
stroke: none
}
.score-dial__inner--0 {
fill: #ff5a5a
}
.score-dial__inner--1 {
fill: #ff8e5d
}
.score-dial__inner--2 {
fill: #e3b130
}
.score-dial__inner--3 {
fill: #88da20
}
.score-dial__inner--4 {
fill: #02b5c3
}
.score-dial__inner--5 {
fill: #de31ae
}
.score-dial__outer {
stroke: none
}
.score-dial__outer--0 {
fill: url(#dial-outer)
}
.score-dial__outer--1 {
fill: hsl(var(--hsl-b6))
}
.score-dial__outer-gradient--end {
stop-color: hsl(var(--hsl-lime-1))
}
.score-dial__outer-gradient--start {
stop-color: hsl(var(--hsl-blue-1))
}
.score-info {
align-items: center;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
min-height: 240px;
padding: 10px 0;
position: relative
}
@media (min-width: 900px) {
.score-info {
flex-direction:row;
padding-left: 40px;
padding-right: 40px
}
}
.score-info__item {
flex: 1;
margin: 10px;
position: relative
}
@media (min-width: 900px) {
.score-info__item {
flex:none
}
.score-info__item--buttons {
bottom: 20px;
margin: 0;
position: absolute;
right: 50px
}
}
.score-info__item--dial {
margin: 0 15px
}
@media (min-width: 900px) {
.score-info__item--player {
flex:1
}
}
.score-info__cover {
--border-radius: 0
}
.score-info__cover:after {
background-color: hsla(var(--hsl-b6),.75);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.score-player {
max-width: 100%;
width: 250px
}
@media (min-width: 900px) {
.score-player {
width:auto
}
}
.score-player__mods {
display: flex;
flex-wrap: wrap;
font-size: 22px;
gap: 2px
}
.score-player__row--player {
grid-gap: 2px 10px;
display: grid;
font-size: 12px;
grid-template-columns: auto 1fr;
margin: 15px 0
}
.score-player__row--rank {
grid-gap: 0 10px;
display: grid;
grid-template-columns: max-content
}
.score-player__row--score {
display: grid
}
.score-player__rank {
padding: 0 10px
}
.score-player__rank--label {
background-color: hsl(var(--hsl-b6));
border-radius: 10000px;
font-size: 12px;
padding-right: 30px;
text-transform: uppercase
}
.score-player__rank--value {
font-size: 20px
}
.score-player__score {
font-size: 50px;
font-weight: 300;
line-height: 1
}
@media (min-width: 900px) {
.score-player__score {
font-size:70px
}
}
.score-rank {
background-position: 50%;
background-repeat: no-repeat;
background-size: 100%;
background-size: contain;
height: 1em;
width: 2em
}
.score-rank--XH {
background-image: url(/assets/images/GradeSmall-SS-Silver.6681366c.svg)
}
.score-rank--X {
background-image: url(/assets/images/GradeSmall-SS.a21de890.svg)
}
.score-rank--SH {
background-image: url(/assets/images/GradeSmall-S-Silver.811ae28c.svg)
}
.score-rank--S {
background-image: url(/assets/images/GradeSmall-S.3b4498a9.svg)
}
.score-rank--A {
background-image: url(/assets/images/GradeSmall-A.d785e824.svg)
}
.score-rank--B {
background-image: url(/assets/images/GradeSmall-B.e19fc91b.svg)
}
.score-rank--C {
background-image: url(/assets/images/GradeSmall-C.6bb75adc.svg)
}
.score-rank--D {
background-image: url(/assets/images/GradeSmall-D.6b170c4c.svg)
}
.score-rank--F {
background-image: url(/assets/images/GradeSmall-F.9a26ed95.svg)
}
.score-rank--full {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.score-rank--profile-page {
font-size: 22px
}
.score-rank--tiny {
font-size: 14px
}
.score-stats {
display: flex;
flex-direction: column;
padding: 20px 10px
}
@media (min-width: 900px) {
.score-stats {
flex-direction:row;
margin: -5px;
padding-left: 50px;
padding-right: 50px
}
}
.score-stats__group {
grid-gap: 5px;
display: grid;
margin: 5px
}
@media (min-width: 900px) {
.score-stats__group--stats {
margin-left:auto
}
.score-stats__group--user-card {
width: 360px
}
}
.score-stats__group--stats .score-stats__group-row {
grid-gap: 2px;
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column
}
.score-stats__stat {
display: flex;
flex-direction: column;
text-align: center
}
.score-stats__stat-row {
font-size: 20px;
line-height: normal;
padding: 0 15px
}
.score-stats__stat-row--label {
background-color: hsl(var(--hsl-b6));
border-radius: 10000px;
font-size: 12px;
text-transform: uppercase;
white-space: nowrap
}
.score-stats__stat-row--perfect {
color: hsl(var(--hsl-lime-1))
}
.score-tower {
display: flex;
flex-direction: row-reverse;
margin: -5px
}
@media (min-width: 900px) {
.score-tower {
flex-direction:column
}
}
.score-tower__item {
margin: 5px
}
.score-tower__item--missed {
filter: grayscale(1);
opacity: .1
}
.score-tower__item--passed {
opacity: .4
}
.search {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
padding: 10px 0;
display: flex;
align-items: center;
}
.search,.search-entry {
background-color: #00000014;
display: flex;
flex-direction: column;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.search-entry {
--border-colour: hsl(var(--hsl-l1));
--border-size: 0;
border-radius: 4px;
box-shadow: inset 0 0 0 var(--border-size) var(--border-colour);
min-width: 0;
padding: 10px 10px 15px;
position: relative;
border-radius: 20px;
}
.search-entry,.search-entry:active,.search-entry:focus,.search-entry:hover {
text-decoration: none
}
.search-result--forum_post .search-entry {
--border-colour: white
}
.search-result--wiki_page .search-entry {
--border-colour: white;
}
.search-entry--deleted {
opacity: .5
}
.search-entry:hover {
--border-size: 2px
}
.search-forum-options {
display: grid;
gap: 10px;
margin: 0 auto 10px;
max-width: 400px;
width: 100%
}
.search-forum-options__buttons {
display: grid;
gap: inherit;
grid-template-columns: 1fr 1fr
}
@media (min-width: 900px) {
.search-forum-options__buttons {
padding:0 40px
}
}
.search-forum-options__checkbox {
font-weight: 400;
margin: 0
}
.search-forum-post {
word-wrap: break-word;
display: flex;
flex-direction: row;
flex-wrap: wrap;
line-height: 1.5;
pointer-events: none
}
.search-forum-post__avatar {
flex: none;
height: 50px;
margin: 5px;
pointer-events: auto;
position: relative;
width: 50px
}
.search-forum-post__avatar-image {
border-radius: 50%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.search-forum-post__content {
flex: 1;
margin-left: 5px;
min-width: 0
}
.search-forum-post__link {
height: 100%;
left: 0;
pointer-events: auto;
position: absolute;
top: 0;
width: 100%
}
.search-forum-post__more {
display: flex
}
.search-forum-post__poster {
display: inline-block;
margin-right: 1em
}
@media (max-width: 899px) {
.search-forum-post__poster {
display:block
}
}
.search-forum-post__sub-link {
font-weight: 700;
pointer-events: auto;
position: relative
}
.search-forum-post__text {
color: #fff
}
.search-forum-post__text--excerpt {
font-family: var(--font-content-override,var(--font-content));
font-size: 11px;
line-height: 1.35
}
.search-forum-post__text--footer {
color: #b5b5b5;
font-size: 10px
}
.search-forum-post__text--title {
font-size: 15px;
margin-bottom: 5px
}
.search-forum-post__time {
display: inline-block;
pointer-events: auto;
position: relative
}
@media (max-width: 899px) {
.search-forum-post__time {
display:block
}
}
.search-forum-post__url {
display: inline-block;
margin-right: 1em
}
@media (max-width: 899px) {
.search-forum-post__url {
display:none
}
}
.search-header {
background-color: #00000014;
color: #ffffff;
display: flex;
flex-direction: column;
padding: 20px 10px
}
@media (min-width: 900px) {
.search-header {
padding-left:50px;
padding-right: 50px
}
}
.search-header__box {
position: relative;
width: 100%
}
.search-header__icon {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: inline-flex;
font-size: 15px;
height: 100%;
justify-content: center;
left: 0;
margin: 0;
outline: none;
padding: 0;
position: absolute;
top: 0;
width: 40px
}
:-webkit-autofill~.search-header__icon {
color: #000
}
.search-header.js-search--searching .search-header__icon--normal,.search-header__icon--searching {
display: none
}
.search-header.js-search--searching .search-header__icon--searching {
display: inline-flex
}
.search-header__input {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #00000014;
border: none;
border-radius: 20px;
display: flex;
font-size: 16px;
font-weight: 400;
outline: none;
padding: 20px 10px 20px 40px;
width: 100%
}
.search-header__input::-moz-placeholder {
color: hsl(var(--hsl-f1))
}
.search-header__input::placeholder {
color: hsl(var(--hsl-f1))
}
@media (min-width: 900px) {
.search-header__input {
font-size:inherit
}
}
.search-header__title {
align-self: center;
font-size: 35px;
font-weight: 300;
margin-bottom: 10px;
text-align: center
}
.search-highlight em {
color: white;
font-style: inherit;
font-weight: 900;
}
.search-result {
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,.25);
margin: 10px 0;
padding: 10px 0 10px 20px;
position: relative;
width: 750px;
}
.search-result:before {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
width: 5px
}
.search-result--beatmapset:before {
background-color: white;
}
.search-result--forum_post:before {
background-color: white;
}
.search-result--user:before {
background-color: white;
}
.search-result--wiki_page:before {
background-color: white;
}
.search-result__entries {
display: grid;
flex: 1;
gap: 10px;
grid-template-columns: 1fr
}
@media (min-width: 900px) {
.search-result--beatmapset .search-result__entries {
grid-template-columns:1fr 1fr
}
}
.search-result--user .search-result__entries {
display: block
}
.search-result__more-button {
align-items: center;
display: inline-flex;
flex: none;
font-size: 20px;
justify-content: center;
padding: 5px;
text-decoration: none;
width: 30px
}
.search-result__more-button:active,.search-result__more-button:focus,.search-result__more-button:hover {
text-decoration: none
}
.search-result__more-button--hidden {
opacity: 0;
padding: 0;
pointer-events: none;
width: 20px
}
.search-result__row {
padding: 5px 0
}
.search-result__row--entries-container {
display: flex
}
.search-result__row--notice {
font-size: 14px;
text-align: center
}
.search-result__row--more {
color: white;
display: block;
font-size: 12px;
text-align: center;
text-decoration: none
}
.search-result__row--more:active,.search-result__row--more:focus,.search-result__row--more:hover {
text-decoration: none
}
.search-result__row--paginator {
padding: 0
}
.search-result-more {
align-items: center;
background-color: #47474780;
border-radius: 20px;
color: hsl(var(--hsl-c1));
display: flex;
font-size: 12px;
min-height: 40px;
padding: 2px 10px;
transition: all .12s ease-in-out
}
.search-result-more,.search-result-more:active,.search-result-more:focus,.search-result-more:hover {
text-decoration: none
}
@media (min-width: 900px) {
.search-result-more {
font-size:16px;
padding-left: 20px;
padding-right: 20px
}
}
.search-result-more--active {
background-color: #6a6a6a80;
color: hsl(var(--hsl-c1))
}
.search-result-more:active,.search-result-more:focus,.search-result-more:hover {
color: hsl(var(--hsl-c1))
}
.search-result-more__arrow {
flex: none
}
.search-result-more__content {
flex: 1
}
.search-result-more__count {
background-color: #5d5d5dc4;
border-radius: 10000px;
font-size: 12px;
margin-left: var(--quick-search-items-badge-margin);
padding: 2px 10px
}
.search-wiki-page {
align-items: center;
display: flex;
justify-content: space-between
}
.search-wiki-page__content {
min-width: 0
}
.search-wiki-page__row {
word-wrap: break-word;
color: #fff;
line-height: 1.5;
margin: 5px 0;
padding: 0
}
.search-wiki-page__row--title {
font-size: 15px;
margin-top: 0
}
.search-wiki-page__row--excerpt {
font-family: var(--font-content-override,var(--font-content));
font-size: 11px;
line-height: 1.35
}
.search-wiki-page__row--footer {
color: white;
font-size: 10px
}
.search-wiki-page__more,.search-wiki-page__more:active,.search-wiki-page__more:focus,.search-wiki-page__more:hover {
color: hsl(var(--hsl-f1))
}
.select-options {
--decoration-colour: inherit;
--option-hover-bg: hsl(var(--hsl-b4));
--option-padding: 5px 10px;
--option-select-padding: 15px 10px;
--selector-display: none;
--selector-max-height: 400px;
--selector-overflow-y: auto
}
.select-options--beatmap-discussions-user-filter {
--decoration-colour: hsl(var(--hsl-c1));
--selector-max-height: auto
}
@media (min-width: 900px) {
.select-options--beatmap-discussions-user-filter {
width:200px
}
}
.select-options--ranking {
--option-select-padding: 5px 10px
}
.select-options--report {
--selector-max-height: auto;
width: 100%
}
.select-options--selecting {
--selector-display: block;
position: relative;
z-index: 512
}
.select-options__decoration {
color: var(--decoration-colour);
margin-left: 10px
}
.select-options__option {
--colour: hsl(var(--hsl-c1));
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: var(--colour);
display: flex;
justify-content: space-between;
margin: 0;
outline: none;
padding: 0;
padding: var(--option-padding);
text-decoration: none;
white-space: nowrap
}
.select-options__option:active,.select-options__option:focus,.select-options__option:hover {
text-decoration: none
}
.select-options__option--selected {
background-color: #1d1d1dde;
}
.select-options--beatmap-discussions-user-filter .select-options__option {
--colour: var(--group-colour,hsl(var(--hsl-c1)));
}
.select-options__option:active,.select-options__option:focus,.select-options__option:hover {
background-color: #1f1f1f73;
color: var(--colour)
}
.select-options__select {
--option-hover-bg: #00000014;
--option-padding: var(--option-select-padding);
background-color: #19191994;
border-radius: 20px;
font-size: 15px;
overflow: hidden
}
.select-options__selector {
background-color: #0f0f0fde;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: var(--selector-display);
font-size: 12px;
left: 0;
margin-top: 5px;
max-height: var(--selector-max-height);
overflow-y: var(--selector-overflow-y);
position: absolute;
top: 100%;
width: 100%;
border-radius: 20px;
scrollbar-color: #424343 #26262661;
}
.show-more-link {
align-self: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: rgb(148 147 147 / 7%);
border: none;
border-radius: 10000px;
color: #fff;
cursor: pointer;
display: block;
font-size: 12px;
justify-self: center;
line-height: normal;
margin: 0;
outline: none;
padding: 5px 20px;
position: relative;
text-align: center;
width: -moz-max-content;
width: max-content
}
.show-more-link,.show-more-link:active,.show-more-link:focus,.show-more-link:hover {
text-decoration: none
}
.show-more-link:active,.show-more-link:focus,.show-more-link:hover {
background-color: #92929257;
color: #fff
}
.show-more-link--beatmapsets {
margin-bottom: 10px
}
.show-more-link--centre-10 {
margin: 10px auto 0
}
.show-more-link--changelog-index {
margin: 40px 0
}
.show-more-link--chat-conversation-earlier-messages {
margin: 20px auto 0
}
.show-more-link--comment-replies {
font-weight: 400;
justify-self: start;
padding-left: 10px;
padding-right: 10px;
text-align: left
}
.show-more-link--comments {
margin: 10px auto
}
.show-more-link--forum-topic {
margin: 5px auto
}
.show-more-link--notification-group {
font-size: 10px
}
.show-more-link--notification-list {
margin: 8px auto 0
}
.show-more-link--profile-page {
bottom: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
margin: 5px auto 0;
position: sticky
}
.show-more-link--profile-page-beatmapsets {
margin-top: 0
}
@media (min-width: 900px) {
.show-more-link--profile-page-beatmapsets {
grid-column:span 2
}
}
.show-more-link.js-disabled,.show-more-link[data-disabled="1"] {
background-color: #92929257;
}
.show-more-link__spinner {
align-items: center;
display: inline-flex;
display: none;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.show-more-link.js-disabled .show-more-link__spinner,.show-more-link[data-disabled="1"] .show-more-link__spinner {
display: flex
}
.show-more-link__label {
align-items: center;
display: flex;
margin: 0 -5px;
opacity: 1
}
.show-more-link.js-disabled .show-more-link__label,.show-more-link[data-disabled="1"] .show-more-link__label {
opacity: 0
}
.show-more-link__label-icon {
margin: 0 5px
}
.show-more-link--notification-group .show-more-link__label-icon {
color: #fff
}
.show-more-link--comment-replies .show-more-link__label-icon--left,.show-more-link--no-icon .show-more-link__label-icon {
display: none
}
.show-more-link__label-text {
margin: 0 5px;
text-transform: uppercase
}
.show-more-link--comment-replies .show-more-link__label-text {
padding-right: 10px;
text-transform: none
}
.sidebar__mobile-toggle {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
display: flex;
justify-content: space-between;
margin: 0;
outline: none;
padding: 0;
text-align: inherit;
width: 100%
}
@media (min-width: 900px) {
.sidebar__mobile-toggle {
cursor:default;
margin-bottom: 5px
}
}
@media (max-width: 899px) {
.sidebar__mobile-toggle.js-mobile-toggle--active {
margin-bottom:10px
}
}
@media (min-width: 900px) {
.sidebar__mobile-toggle--mobile-only {
display:none
}
}
.sidebar__mobile-toggle-icon {
font-size: 12px
}
.js-mobile-toggle--active .sidebar__mobile-toggle-icon {
transform: rotateX(.5turn)
}
.sidebar__title {
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 700;
margin: 0;
padding: 0;
text-transform: uppercase
}
.simple-form {
--input-bg: hsl(var(--hsl-b4));
display: flex;
flex-wrap: wrap;
font-size: 12px
}
.simple-form--modal {
--input-bg: hsl(var(--hsl-b6));
background-color: hsl(var(--hsl-b5));
border-radius: 4px;
max-width: 400px;
padding: 20px 20px 10px
}
.simple-form--search-box {
background-color: hsl(var(--hsl-b2));
border-radius: 4px;
margin: 10px 0;
padding: 10px 10px 0
}
.simple-form--user-create {
margin: auto;
max-width: 500px
}
.simple-form__buttons {
display: flex;
margin: -5px
}
.simple-form__button {
flex: none;
margin: 5px
}
.simple-form__captcha {
min-height: 78px
}
.simple-form__captcha:empty:before {
content: "\a0"
}
.simple-form__checkbox {
cursor: pointer;
font-weight: 400;
margin: 0;
text-transform: none
}
.simple-form__checkbox--inline {
flex: none;
margin: 5px 10px
}
.simple-form__checkbox--overflow {
padding: 5px 10px
}
.simple-form__checkbox-overflow-container {
flex: none;
width: 100%
}
@media (min-width: 900px) {
.simple-form__checkbox-overflow-container {
width:33%
}
}
.simple-form__checkboxes-inline {
display: flex;
flex-wrap: wrap;
margin: -5px -10px
}
.simple-form__checkboxes-overflow {
-webkit-overflow-scrolling: touch;
margin: -5px -10px;
max-height: 300px;
overflow-y: auto;
width: 100%
}
@media (min-width: 900px) {
.simple-form__checkboxes-overflow {
display:flex;
flex-wrap: wrap
}
}
.simple-form__error {
color: hsl(var(--hsl-red-1));
margin-top: 5px;
width: 100%
}
.simple-form__error:empty:before {
content: "\a0"
}
@media (min-width: 900px) {
.simple-form__error {
padding-left:150px
}
}
.simple-form__info {
color: hsl(var(--hsl-c2));
font-weight: 400;
margin: 0
}
.simple-form__input {
background-color: var(--input-bg);
border: none;
border-radius: 4px;
color: hsl(var(--hsl-c1));
display: inline-flex;
flex: 1 0 auto;
font-size: 16px;
font-weight: 400;
outline: none;
padding: 5px 10px;
resize: vertical;
width: 100%
}
@media (min-width: 900px) {
.simple-form__input {
font-size:inherit;
width: auto
}
}
.simple-form__input:focus {
border: none;
outline: none
}
.simple-form__input[type=date] {
resize: none
}
.simple-form__input--equal-width {
flex: 1
}
.simple-form__input--small {
max-width: 75px
}
.simple-form__input--full-height {
align-self: stretch
}
.simple-form__input-arrow-next {
display: inline-block;
padding: 10px;
text-align: center;
width: 100%
}
@media (min-width: 900px) {
.simple-form__input-arrow-next {
padding-bottom:0;
padding-top: 0;
transform: rotate(-90deg);
width: auto
}
}
.simple-form__input-group {
align-items: center;
display: flex
}
.simple-form__input-group-label {
font-weight: 400
}
.simple-form__input-group-label--suffix {
margin-left: 5px
}
.simple-form__label {
flex: none;
font-weight: 400;
margin: 0 0 10px;
width: 150px
}
@media (min-width: 900px) {
.simple-form__label {
margin:0;
padding-right: 10px
}
}
.simple-form__label--full {
width: auto
}
.simple-form__row {
display: flex;
flex: 1 0 auto;
flex-direction: column;
margin-bottom: 10px;
text-transform: none;
width: 100%
}
@media (min-width: 900px) {
.simple-form__row {
align-items:baseline;
flex-direction: row
}
}
.simple-form__row--no-label {
margin-top: 10px
}
@media (min-width: 900px) {
.simple-form__row--no-label {
margin-top:0;
padding-left: 150px
}
}
.simple-form__row--half {
flex: 50%
}
.simple-form__row--title {
color: inherit;
font-size: 15px;
font-style: normal;
font-weight: 400
}
.simple-form__row.js-form-error--field {
flex-wrap: wrap
}
.simple-form__select {
min-width: 200px
}
.simple-menu {
background-color: rgb(36 36 36 / 87%);
box-shadow: 0 2px 10px rgba(0,0,0,.5);
border-radius: 20px;
color: hsl(var(--hsl-c1));
display: flex;
flex: none;
flex-direction: column;
font-size: 14px;
min-width: 150px;
padding: 10px 5px;
position: relative;
transform: translateZ(0);
z-index: 101;
}
.simple-menu--forum-list {
margin-top: 5px;
position: absolute;
right: 0;
top: 100%
}
.simple-menu--forum-topic-moderation {
padding-left: 10px;
padding-right: 10px;
right: 0
}
.simple-menu--forum-topic-moderation,.simple-menu--forum-topic-watch {
bottom: 100%;
margin-bottom: 10px;
position: absolute
}
.simple-menu--forum-topic-watch:after {
content: "";
display: block;
height: 10px;
left: 0;
position: absolute;
top: 100%;
width: 100%
}
.simple-menu--nav2 {
position: relative;
transform: translateZ(0);
transition: none;
will-change: transform,opacity
}
.simple-menu--nav2-left-aligned {
left: -30px
}
.simple-menu--nav2-transparent {
--item-hover-bg: hsl(var(--hsl-b6));
background-color: transparent;
box-shadow: none
}
.simple-menu--profile-page-bar {
margin-top: 5px;
position: absolute;
right: 0;
top: 100%
}
@media (min-width: 900px) {
.simple-menu--profile-page-bar {
left:0;
right: auto
}
}
.simple-menu--wiki-locales {
--item-hover-bg: hsl(var(--hsl-h1));
--item-hover-colour: hsl(var(--hsl-b6));
--stripe-bg: hsl(var(--hsl-b6));
background-color: #222222d4;;
color: hsl(var(--hsl-c1));
margin-top: 20px;
padding: 10px;
position: absolute;
right: 0;
top: 100%
}
.simple-menu__content {
display: flex;
flex-direction: column;
margin: 0 -5px;
padding: 0 5px
}
.simple-menu--forum-topic-moderation .simple-menu__content {
grid-gap: 4px;
display: grid;
grid-template-columns: repeat(auto-fit,30px);
grid-template-rows: 30px;
max-width: calc(100vw - 49px);
width: -moz-max-content;
width: max-content
}
.simple-menu--nav2 .simple-menu__content {
max-height: calc(100vh - 110px);
min-height: 100px;
overflow-y: auto
}
.simple-menu--nav2-locales .simple-menu__content {
flex-direction: row;
flex-wrap: wrap;
width: 440px
}
.simple-menu__extra {
background-color: rgb(113 106 106 / 6%);
display: flex;
flex-direction: column;
margin: -10px -5px 10px;
padding: 10px 5px;
padding-top: 20px;
}
.simple-menu__form {
margin: -10px -5px
}
.simple-menu__header {
align-items: center;
background-position: 50%;
background-size: cover;
border-radius: var(--border-radius) var(--border-radius) 0 0;
color: #fff;
display: flex;
flex-direction: column;
margin: -10px -5px 10px;
min-height: 100px;
overflow: hidden;
padding: 20px;
position: relative
}
.simple-menu__header:before {
background-color: rgba(0,0,0,.5);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.simple-menu__header--link {
color: #fff;
text-decoration: none
}
.simple-menu__header--link:active,.simple-menu__header--link:focus,.simple-menu__header--link:hover {
color: #fff;
text-decoration: none
}
.simple-menu__header-icon {
padding: 10px 0;
position: relative;
width: 40px
}
.simple-menu__item {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
flex: none;
margin: 0;
outline: none;
padding: 5px 25px;
position: relative;
text-align: left;
text-decoration: none;
transition: none;
white-space: nowrap;
}
.simple-menu__item:active,.simple-menu__item:focus,.simple-menu__item:hover {
color: #fff;
text-decoration: none;
-webkit-text-stroke: 2px #ffffff50;
}
.simple-menu__item--active:before,.simple-menu__item:hover:before {
background: white;
border-radius: 10px;
content: "";
height: calc(100% - 14px);
left: 10px;
position: absolute;
top: 7px;
width: 3px;
}
.simple-menu--nav2-locales .simple-menu__item {
width: 50%
}
.simple-menu--popup-menu-compact .simple-menu__item {
align-items: center;
display: flex;
padding: 5px 10px
}
.simple-menu--popup-menu-compact .simple-menu__item:before {
display: none
}
.simple-menu--popup-menu-compact .simple-menu__item--active {
background: hsl(var(--hsl-b5))
}
.simple-menu--popup-menu-compact .simple-menu__item--active:hover {
background: hsl(var(--hsl-b4))
}
.simple-menu__item--disabled,.simple-menu__item[disabled] {
color: #999;
pointer-events: none
}
.simple-menu__item-icon {
display: flex;
justify-content: center
}
.simple-menu__item-icon--icon-dropdown-menu {
width: 22px
}
.simple-menu__item-loading-spinner {
margin-left: 5px;
opacity: 0;
will-change: opacity
}
.js-forum-topic-watch-ajax--loading .simple-menu__item-loading-spinner {
opacity: 1
}
.simple-menu__label {
padding-left: 5px
}
.sort {
--item-button-colour: hsl(var(--hsl-l1));
--item-hover-bg: hsl(var(--hsl-b3));
display: flex;
font-size: 12px
}
.sort,.sort--beatmapset-discussions {
padding: 0
}
.sort--beatmapsets {
padding: 10px 0
}
.sort--default-padding {
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.sort--default-padding {
padding-left:50px;
padding-right: 50px
}
}
.sort--forum-topics {
margin-top: 10px
}
.sort--page-extra {
--item-hover-bg: hsl(var(--hsl-b2))
}
.sort--ranking-header {
--item-hover-bg: hsl(var(--hsl-b4))
}
.sort--user-list {
padding: 0
}
.sort__item {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
border-radius: 4px;
margin: 5px;
outline: none;
padding: 5px 10px
}
.sort__item--button,.sort__item--button:active,.sort__item--button:focus,.sort__item--button:hover {
text-decoration: none
}
.sort__item--button:active,.sort__item--button:focus,.sort__item--button:hover {
background-color: rgba(17, 17, 17, 0.459);
color: white;
}
.sort__item--contest-judge {
margin: 0;
padding: 0
}
.sort__item--title {
padding: 0
}
.sort__item--active {
--item-button-colour: hsl(var(--hsl-c1));
background-color: rgb(53 52 52 / 62%);
font-weight: 600
}
.sort__item-arrow {
margin-left: 5px;
opacity: 0
}
.sort__item--active .sort__item-arrow,.sort__item:hover .sort__item-arrow {
opacity: 1
}
.sort__item-icon {
margin-right: 5px
}
.sort__items {
align-items: center;
display: flex;
flex-wrap: wrap;
margin: -5px
}
.sort-mobile {
display: grid;
gap: 5px;
grid-template-columns: 1fr auto auto
}
.sort-mobile__item {
font-size: 12px
}
.sort-mobile__item--title {
align-self: center;
color: hsl(var(--hsl-c2))
}
.sort-mobile__order {
align-items: center;
color: #fff;
display: flex;
height: 100%;
padding: 0 5px;
text-decoration: none
}
.sort-mobile__order:active,.sort-mobile__order:focus,.sort-mobile__order:hover {
color: #fff;
text-decoration: none
}
.sortable-handle {
cursor: move
}
.sortable-handle--profile-page-extra {
font-size: 18px;
margin-right: var(--dragdrop-margin);
position: absolute;
right: 0;
top: 0
}
.sortable-handle--score-pin {
display: none
}
@media (min-width: 900px) {
.sortable-handle--score-pin {
align-items:center;
display: flex;
width: var(--pin-sortable-handle-width)
}
}
.play-detail-list--menu-active .sortable-handle--score-pin {
pointer-events: none
}
.stacked-bar-chart {
display: flex;
height: 100%;
width: 100%
}
.stacked-bar-chart--beatmap-fail-rate {
--colour-0: #fc2;
--colour-1: #c60
}
.stacked-bar-chart__col {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-end
}
.stacked-bar-chart__entry {
background: #4ad;
flex: none;
transition: all .12s
}
.stacked-bar-chart__entry--0 {
background: var(--colour-0)
}
.stacked-bar-chart__entry--1 {
background: var(--colour-1)
}
.sticky-header {
position: absolute;
width: 100%;
display: none
}
.sticky-header__body {
background-color: rgb(25 25 25);
padding: 10px;
width: 100%
}
.sticky-header__breadcrumbs {
margin-bottom: 5px
}
.sticky-header__content {
margin-top: 5px
}
.sticky-header-breadcrumbs {
color: #fff;
display: inline-flex;
flex-wrap: wrap;
font-size: 12px;
margin: 0;
padding: 0
}
.sticky-header-breadcrumbs__item {
align-items: baseline;
display: flex;
margin: 0
}
.sticky-header-breadcrumbs__item+.sticky-header-breadcrumbs__item:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: "\f105";
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
margin: 0 10px;
text-rendering: auto
}
.sticky-header-breadcrumbs__item+.sticky-header-breadcrumbs__item:before.fa-pull-left {
margin-right: .3em
}
.sticky-header-breadcrumbs__item+.sticky-header-breadcrumbs__item:before.fa-pull-right {
margin-left: .3em
}
.sticky-header-breadcrumbs__link--is-active {
font-weight: 600
}
.store-cart-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%
}
.store-cart-footer__info-box {
flex: 1;
width: 100%
}
@media (min-width: 900px) {
.store-cart-footer__info-box {
width:auto
}
}
.store-cart-footer__total-box {
flex: none;
width: 100%
}
@media (min-width: 900px) {
.store-cart-footer__total-box {
width:auto
}
}
.store-cart-footer__total-box--full {
padding: 10px
}
@media (min-width: 900px) {
.store-cart-footer__total-box--full {
width:100%
}
.store-cart-footer__total-box--padded {
padding-right: 55px
}
}
.store-cart-footer__text {
margin: 0;
text-align: right
}
.store-cart-footer__text--amount {
color: hsl(var(--hsl-h1));
font-size: 140%
}
.store-cart-footer__text--shipping {
color: hsl(var(--hsl-f1));
font-size: 90%
}
.store-notice {
align-items: center;
background-color: hsl(var(--hsl-b4));
color: hsl(var(--hsl-c1));
display: flex;
flex-direction: column;
font-size: 15px;
padding: 10px;
text-align: center
}
@media (min-width: 900px) {
.store-notice {
padding-left:50px;
padding-right: 50px
}
}
.store-notice--important {
background-color: #fc2;
background-image: url(/assets/images/button.16de7c2c.svg);
background-position: 50%;
background-size: 1000px;
color: hsl(var(--hsl-b6));
padding-bottom: 5px;
padding-top: 5px
}
.store-notice__title {
color: inherit;
font-size: 13px;
font-style: normal;
font-weight: 600;
margin: 10px 0 5px;
text-transform: uppercase
}
.store-notification-requested-alert {
text-align: center
}
.store-notification-requested-alert__text {
font-size: 18px;
margin: 0
}
.store-notification-requested-alert__icon {
color: #88b300;
font-size: 24px
}
.store-order {
background-color: #5d5d6517;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
margin-bottom: 10px;
padding: 10px 20px;
position: relative;
border-radius: 20px
}
.store-order--status-cancelled:before {
background-color: #777
}
.store-order--status-cancelled .store-order__status {
color: #777
}
.store-order--status-checkout:before {
background-color: #c60
}
.store-order--status-checkout .store-order__status {
color: #c60
}
.store-order--status-delivered:before {
background-color: white;
}
.store-order--status-paid:before {
background-color: #4ad
}
.store-order--status-paid .store-order__status {
color: #4ad
}
.store-order--status-processing:before {
background-color: #ea0
}
.store-order--status-processing .store-order__status {
color: #ea0
}
.store-order--status-shipped:before {
background-color: #680
}
.store-order--status-shipped .store-order__status {
color: #680
}
.store-order:before {
border-radius: 4px 0 0 4px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 4px
}
.store-order__amount {
font-size: 14px
}
.store-order__header {
display: flex;
font-size: 20px;
justify-content: space-between;
line-height: 1.5
}
.store-order__header-left {
align-items: flex-start;
display: flex;
flex-direction: column
}
.store-order__header-right {
align-items: flex-end;
display: flex;
flex-direction: column
}
.store-order__header-subtext {
font-size: 12px
}
.store-order__items {
font-size: 12px;
list-style: none;
margin: 10px 0
}
.store-order__item-quantity {
color: #ccc;
margin-left: 4px
}
.store-order-item {
align-items: baseline;
background-color: hsl(var(--hsl-b4));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: grid;
font-size: 14px;
gap: 10px;
grid-template-areas: "name name" "quantity delete" "subtotal subtotal";
grid-template-columns: 1fr auto;
padding: 10px
}
@media (min-width: 480px) {
.store-order-item {
grid-column:1/-1;
grid-template-areas: "name quantity subtotal delete";
grid-template-columns: subgrid;
grid-template-rows: auto
}
}
@media (min-width: 900px) {
.store-order-item {
font-size:inherit
}
}
.store-order-item__errors {
color: #ed1221;
grid-column-end: -1;
grid-column-start: 1;
list-style: none;
order: 10
}
.store-order-item__delete {
grid-area: delete;
text-align: right
}
.store-order-item__quantity {
grid-area: quantity
}
.store-order-item__name {
grid-area: name
}
.store-order-item__subtext {
color: hsl(var(--hsl-c2));
font-size: 80%
}
.store-order-item__subtotal {
grid-area: subtotal
}
@media (min-width: 900px) {
.store-order-item__subtotal {
text-align:right
}
}
.store-page {
font-size: 14px;
padding: 20px 10px
}
@media (min-width: 900px) {
.store-page {
padding-left:50px;
padding-right: 50px
}
}
@media (min-width: 480px) {
.store-page__address {
display:grid;
gap: 33%;
grid-auto-columns: minmax(0,1fr);
grid-auto-flow: column
}
}
.store-page__option {
margin: 0;
text-transform: inherit
}
.store-page__alert {
grid-gap: 5px;
background-color: hsla(var(--hsl-red-2),30%);
border-radius: 6px;
color: hsl(var(--hsl-c1));
display: grid;
list-style: none;
margin: 0;
padding: 10px
}
.store-page__alert--with-margin-bottom {
margin-bottom: 20px
}
.store-page__invoice-header {
display: flex;
gap: 10px;
justify-content: space-between
}
@media (min-width: 900px) {
.store-page__product {
display:grid;
gap: 40px;
grid-auto-columns: minmax(0,1fr);
grid-auto-flow: column
}
}
.store-payment-button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: hsl(var(--hsl-c1));
background-position: 50%;
background-repeat: no-repeat;
background-size: 100px;
border: none;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
cursor: pointer;
display: flex;
height: 150px;
margin: 0;
outline: none;
padding: 0;
text-align: center;
width: 100%
}
.store-payment-button:hover {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
box-shadow: 0 0 0 3px hsl(var(--hsl-l4))
}
.store-payment-button--paypal {
background-image: url(/assets/images/paypal.6356a6db.png)
}
.store-payment-button--xsolla {
background-image: url(/assets/images/xsolla.088cca41.png)
}
.store-payment-method {
grid-gap: 5px 20px;
display: grid;
margin-bottom: 20px
}
@media (min-width: 900px) {
.store-payment-method {
grid-template-columns:1fr 1fr
}
}
.store-payment-method__cell {
text-align: center
}
@media (min-width: 900px) {
.store-payment-method__cell {
text-align:start
}
}
.store-payment-method__provider {
height: 20px;
margin: 4px 4px 4px 0
}
.store-payment-method__provider:last-child {
margin-right: 0
}
.store-payment-method__provider--light {
background-color: hsl(var(--hsl-c1));
border-radius: 6px;
height: 30px;
padding: 5px 10px
}
.store-payment-method__provider--tall {
height: 30px
}
.store-products {
grid-gap: 10px;
display: grid;
padding: 10px 10px 0
}
@media (min-width: 900px) {
.store-products {
grid-template-columns:1fr 1fr;
padding-left: 0;
padding-right: 0
}
}
.store-slider {
padding: 0 56px
}
@media (min-width: 900px) {
.store-slider {
padding:0 32px
}
}
.store-slider__bigtext {
font-size: 20px;
font-weight: 600
}
.store-slider__fake-callout {
bottom: calc(100% + 2px);
left: 5px;
padding-bottom: 12px;
position: absolute;
transform: translateX(-50%)
}
.store-slider__callout {
background-color: #5d5d6517;
border-radius: 10px;
color: hsl(var(--hsl-c1));
font-size: 12px;
padding: 6px;
position: relative;
text-align: center;
width: 128px
}
@media (min-width: 900px) {
.store-slider__callout {
width:160px
}
}
.store-slider__callout:after,.store-slider__callout:before {
border: solid transparent;
content: "";
height: 0;
left: 50%;
pointer-events: none;
position: absolute;
top: 100%;
transform: scaleX(.5);
width: 0
}
.store-slider__callout:after {
border-top-color: hsl(var(--hsl-b3));
border-width: 12px;
margin-left: -12px
}
.store-slider__preset {
background-color: #292929;
border-radius: 10px;
color: #fff;
cursor: pointer;
height: 20px;
line-height: 19px;
margin: 4px;
text-align: center;
width: 36px
}
.store-slider__preset--active {
background-color: #555555;
}
.store-slider__preset--disabled {
background-color: hsl(var(--hsl-b1));
cursor: default;
pointer-events: none
}
.store-slider__presets {
align-items: center;
display: flex;
font-size: 12px;
justify-content: flex-end
}
.store-slider__presets-blurb {
margin: 0 4px
}
.store-slider__subtext {
color: #b9b9b9;
margin-top: 2px
}
.store-slider .ui-slider {
background-color: #272727;
}
.store-slider .ui-slider .ui-slider-handle,.store-slider .ui-slider .ui-slider-range {
background-color: white;
}
.store-slider .ui-slider--disabled .ui-slider-handle,.store-slider .ui-slider--disabled .ui-slider-range {
background-color: hsl(var(--hsl-b1))
}
.store-supporter-tag__input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #5d5d6517;
border: none;
border-radius: 10px;
color: hsl(var(--hsl-c1));
margin: 0;
outline: none;
padding: 4px 8px;
text-align: center;
width: 100%
}
.store-supporter-tag__input--message {
resize: none
}
.store-supporter-tag__user-search {
grid-gap: 5px;
display: grid;
grid-template-columns: minmax(280px,1fr);
justify-content: center
}
.store-supporter-tag .ui-slider {
margin: 105px 4px 24px
}
.store-text--block {
font-size: 12px;
margin: .5em 0
}
.store-text--block:last-child {
margin-bottom: 0
}
.store-text--emphasis {
font-style: normal;
font-weight: 600
}
.store-text--header {
color: hsl(var(--hsl-h1));
margin-top: 8px
}
.store-text--options {
display: grid;
gap: 10px
}
.store-text--price {
color: hsl(var(--hsl-h1));
font-size: 24px;
font-weight: 600;
margin-bottom: 0
}
.store-text--price-note {
font-weight: 600
}
.store-text--title {
font-size: 24px;
font-style: normal;
font-weight: 400;
margin: 0 0 20px
}
.store-text--title-small {
font-size: 20px
}
.store-transaction-info {
display: grid;
grid-template-columns: auto 1fr;
margin-top: 40px
}
@media (min-width: 900px) {
.store-transaction-info {
grid-auto-flow:column;
grid-template-columns: none;
grid-template-rows: auto auto
}
}
.store-transaction-info__entry {
padding: 5px 10px
}
.store-transaction-info__entry--term {
background-color: hsl(var(--hsl-b3));
font-weight: 600
}
.store-xsolla {
align-items: center;
background-color: hsla(var(--hsl-b6),.5);
color: hsl(var(--hsl-c1));
display: flex;
flex: none;
font-family: var(--font-default-torus);
font-size: 11px;
margin-left: -10px;
order: -1;
text-align: right;
width: calc(100% + 20px)
}
@media (min-width: 900px) {
.store-xsolla {
display:flex;
margin-left: auto;
order: 0;
width: auto
}
}
.store-xsolla__icon {
background-image: url(/assets/images/xsolla.d08493f2.png);
background-size: contain;
height: 40px;
width: 40px
}
.store-xsolla__text {
flex: 1;
padding: 0 10px
}
.supporter__block {
background-color: hsl(var(--hsl-b5))
}
.supporter__block--bg-0 {
background-color: hsl(var(--hsl-b4))
}
.supporter__block--bg-1 {
background-color: hsl(var(--hsl-b3))
}
.supporter__title {
color: hsl(var(--hsl-orange-1));
font-size: 24px;
line-height: normal;
margin: 0;
padding: 20px 20px 10px;
text-align: center
}
.supporter-eyecatch {
background-image: url(/assets/images/banner-bg.34b7429c.jpg);
background-position: 50%;
background-size: cover;
height: 480px;
padding: 30px;
position: relative;
width: auto
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.supporter-eyecatch {
background-image:url(/assets/images/[email protected])
}
}
.supporter-eyecatch:before {
background: linear-gradient(to bottom,hsla(var(--hsl-b5),1) 4%,hsla(var(--hsl-b5),0) 100%)
}
.supporter-eyecatch:after,.supporter-eyecatch:before {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.supporter-eyecatch:after {
background-image: url(/assets/images/banner-fg.5c691d3a.png);
background-position: 50%;
background-size: cover;
pointer-events: none
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.supporter-eyecatch:after {
background-image:url(/assets/images/[email protected])
}
}
.supporter-eyecatch__box {
background: hsl(var(--hsl-b4));
border-radius: 15px;
height: 100%;
margin: 10px 0;
padding: 50px;
position: relative;
text-align: center;
width: 350px
}
@media (max-width: 899px) {
.supporter-eyecatch__box {
background:hsla(var(--hsl-b4),.9);
width: 100%;
z-index: 1
}
}
.supporter-eyecatch__link,.supporter-eyecatch__link:active,.supporter-eyecatch__link:focus,.supporter-eyecatch__link:hover {
text-decoration: none
}
.supporter-eyecatch__text {
color: hsl(var(--hsl-l1));
font-size: 16px;
margin: 10px 0 0
}
.supporter-eyecatch__text--main {
font-size: 26px;
font-weight: 400
}
@media (min-width: 900px) {
.supporter-eyecatch__text--main {
margin-top:40px
}
}
.supporter-eyecatch__text--sub-1 {
color: hsl(var(--hsl-f1));
margin-top: 0
}
.supporter-eyecatch__text--sub-2 {
margin-top: 40px
}
.supporter-heart {
align-items: center;
background-color: hsl(var(--hsl-b6));
background-image: url(/assets/images/button.16de7c2c.svg);
background-position: 50% 50%;
background-position: 50% 0;
background-size: 200px;
border: 10px solid #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: #fff;
display: inline-flex;
flex-shrink: 0;
font-size: 50px;
height: 130px;
justify-content: center;
margin-top: -20px;
opacity: .5;
padding: 8px 5px 5px;
transform: translateZ(0);
width: 130px;
will-change: box-shadow,transform;
z-index: 1
}
@keyframes support-circle-pulsate {
0% {
transform: scale(.9)
}
20% {
transform: scale(1)
}
to {
transform: scale(.9)
}
}
@keyframes support-circle-glow {
0% {
box-shadow: 0 1px 3px rgba(0,0,0,.25),inset 0 0 0 #fff
}
20% {
box-shadow: 0 1px 3px hsla(0,0%,70%,.25),inset 0 0 5px #fff
}
80% {
box-shadow: 0 1px 3px rgba(0,0,0,.25),inset 0 0 0 #fff
}
}
@keyframes support-heart-pulsate {
0% {
transform: scale(1)
}
20% {
transform: scale(1.2)
}
to {
transform: scale(1)
}
}
@keyframes support-heart-glow {
0% {
text-shadow: 0 0 0 #fff
}
20% {
text-shadow: 0 0 10px #fff
}
80% {
text-shadow: 0 0 0 #fff
}
}
.supporter-heart--larger {
border-radius: 50%;
height: 150px;
width: 150px
}
.supporter-heart--larger:after {
font-size: 60px
}
@media (max-width: 899px) {
.supporter-heart {
margin-top:30px
}
}
.supporter-heart:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: "\f004";
display: inline-block;
flex: none;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
text-rendering: auto;
transform: translateZ(0);
will-change: text-shadow,transform
}
.supporter-heart:after.fa-pull-left {
margin-right: .3em
}
.supporter-heart:after.fa-pull-right {
margin-left: .3em
}
.supporter-heart--active {
animation: support-circle-pulsate .9375s ease-in-out infinite,support-circle-glow .9375s ease-in-out infinite;
animation-fill-mode: none;
background-color: hsl(var(--hsl-pink-1));
opacity: 1
}
.supporter-heart--active:after {
animation: support-heart-pulsate .9375s ease-in-out infinite,support-heart-glow .9375s ease-in-out infinite
}
.supporter-icon {
align-items: center;
background-color: #727272;
border-radius: 10000px;
color: #fff;
display: inline-flex;
font-size: 12px;
height: 20px;
justify-content: center;
line-height: normal;
padding: 0 10px
}
.supporter-icon--dynamic {
font-size: .6em;
height: 1.67em
}
.supporter-icon--quick-search {
font-size: 8px;
height: 100%
}
.supporter-icon--user-card {
border-radius: 50%;
font-size: 13px;
height: 26px;
padding: 1px 0 0;
width: 26px
}
.supporter-icon--user-list {
font-size: 12px;
height: 20px
}
.supporter-perk-list {
padding: 20px
}
@media (max-width: 899px) {
.supporter-perk-list {
padding:15px
}
}
.supporter-perk-list__list {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.supporter-perk-list-group {
color: #fff;
flex: none;
font-size: 14px;
margin-bottom: 20px;
overflow: hidden;
width: calc(33% - 10px)
}
@media (max-width: 899px) {
.supporter-perk-list-group {
align-items:center;
display: flex;
width: calc(100% - 10px)
}
}
.supporter-perk-list-group--image {
align-items: center;
display: flex;
flex-direction: row-reverse;
margin-bottom: 5px;
text-align: right;
width: 100%
}
@media (max-width: 899px) {
.supporter-perk-list-group--image {
align-items:flex-start;
flex-direction: column-reverse;
margin-bottom: 10px;
text-align: left
}
}
.supporter-perk-list-group__content {
margin: 0
}
.supporter-perk-list-group__image {
border-radius: 10px;
flex-shrink: 0;
height: 100px;
-o-object-fit: cover;
object-fit: cover;
width: 500px
}
@media (max-width: 899px) {
.supporter-perk-list-group__image {
align-self:center;
flex-shrink: 1;
margin-top: 10px;
max-width: calc(100% - 40px)
}
}
.supporter-perk-list-group__icon {
color: #fff;
font-size: 26px;
padding: 0 20px
}
@media (min-width: 900px) {
.supporter-perk-list-group--image .supporter-perk-list-group__icon {
margin-right:-45px
}
}
.supporter-perk-list-group__icon-bg {
color: hsl(var(--hsl-lime-3))
}
.supporter-perk-list-group--why-support .supporter-perk-list-group__icon-bg {
color: hsl(var(--hsl-blue-3))
}
.supporter-perk-list-group__link {
display: block;
margin-top: 10px
}
.supporter-perk-list-group--image .supporter-perk-list-group__meta {
align-items: center;
display: flex;
flex-direction: row-reverse
}
@media (max-width: 899px) {
.supporter-perk-list-group--image .supporter-perk-list-group__meta {
flex-direction:row
}
}
.supporter-perk-list-group__text {
color: hsl(var(--hsl-f1));
padding: 10px
}
.supporter-perk-list-group__title {
color: #fff;
font-size: 120%;
margin: 0 0 10px
}
.supporter-perk-list-hero {
display: flex;
height: 500px;
justify-content: flex-end;
padding: 20px;
position: relative
}
@media (max-width: 899px) {
.supporter-perk-list-hero {
height:300px;
justify-content: center
}
}
.supporter-perk-list-hero__content {
margin: 0
}
.supporter-perk-list-hero__icon {
color: #fff;
font-size: 26px;
margin-bottom: -50px;
margin-left: 250px;
margin-top: -50px;
padding: 20px
}
.supporter-perk-list-hero__icon-bg {
color: hsl(var(--hsl-blue-3))
}
.supporter-perk-list-hero__image {
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
width: 100%
}
.supporter-perk-list-hero__meta {
align-self: center;
background-color: hsla(var(--hsl-b4),.95);
border-radius: 10px;
padding: 10px;
position: relative;
width: 350px
}
@media (min-width: 900px) {
.supporter-perk-list-hero__meta {
margin-top:-50px
}
}
.supporter-perk-list-hero__text {
color: hsl(var(--hsl-f1));
padding: 10px
}
.supporter-perk-list-hero__title {
color: #fff;
font-size: 120%;
margin: 0 0 10px
}
.supporter-perk-list-image {
display: flex;
padding: 20px
}
@media (max-width: 899px) {
.supporter-perk-list-image {
flex-direction:column-reverse;
padding-top: 0
}
}
.supporter-perk-list-image--flipped {
flex-direction: row-reverse
}
@media (max-width: 899px) {
.supporter-perk-list-image--flipped {
flex-direction:column-reverse
}
}
.supporter-perk-list-image__content {
margin: 0
}
.supporter-perk-list-image__image {
border-radius: 10px;
display: inline-block;
height: 320px;
overflow: hidden;
width: 1050px
}
@media (max-width: 899px) {
.supporter-perk-list-image__image {
width:100%
}
}
.supporter-perk-list-image__icon {
color: #fff;
font-size: 26px;
margin-left: -45px;
margin-top: 10px;
padding: 0 20px
}
@media (max-width: 899px) {
.supporter-perk-list-image__icon {
margin-left:0;
margin-top: 0
}
}
.supporter-perk-list-image--flipped .supporter-perk-list-image__icon {
margin-left: 0;
margin-right: -45px
}
@media (max-width: 899px) {
.supporter-perk-list-image--flipped .supporter-perk-list-image__icon {
margin-right:0
}
}
.supporter-perk-list-image__icon-bg {
color: hsl(var(--hsl-lime-3))
}
.supporter-perk-list-image__meta {
display: flex;
margin: 10px 0
}
@media (max-width: 899px) {
.supporter-perk-list-image__meta {
align-items:center
}
}
.supporter-perk-list-image--flipped .supporter-perk-list-image__meta {
display: flex;
flex-direction: row-reverse
}
@media (max-width: 899px) {
.supporter-perk-list-image--flipped .supporter-perk-list-image__meta {
flex-direction:row
}
}
.supporter-perk-list-image__text {
color: hsl(var(--hsl-f1));
margin-left: -20px;
margin-top: 30px;
padding: 10px
}
@media (max-width: 899px) {
.supporter-perk-list-image__text {
margin-left:0;
margin-top: 0
}
}
.supporter-perk-list-image--flipped .supporter-perk-list-image__text {
margin-left: 0;
margin-top: 30px
}
@media (max-width: 899px) {
.supporter-perk-list-image--flipped .supporter-perk-list-image__text {
margin-top:0
}
}
.supporter-perk-list-image__title {
color: #fff;
font-size: 120%;
margin: 0 0 10px
}
.supporter-promo {
align-items: center;
background-color: rgba(0,0,0,.3);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex-direction: column;
margin: 20px 0;
padding: 20px 60px
}
@media (min-width: 900px) {
.supporter-promo {
align-items:stretch;
flex-direction: row;
height: 200px;
margin: 20px 0;
padding: 0 75px
}
}
.supporter-promo__text-box {
display: flex;
flex-direction: column;
justify-content: space-between
}
@media (min-width: 900px) {
.supporter-promo__text-box {
height:100%;
justify-content: center;
padding-right: 50px
}
}
@media (max-width: 899px) {
.supporter-promo__text-box {
text-align:center
}
}
.supporter-promo__heading {
color: #fff;
font-size: 20px;
font-weight: 300;
margin: 0 0 20px
}
.supporter-promo__heart {
background-image: url(/assets/images/heart.cf74109b.png);
background-size: 75px 75px;
border-radius: 50%;
box-shadow: 0 0 10px 3px #f6a;
height: 75px;
margin-top: 98px;
width: 75px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.supporter-promo__heart {
background-image:url(/assets/images/[email protected])
}
}
@media (min-width: 900px) {
.supporter-promo__heart {
margin-top:70px
}
}
.supporter-promo__pippi {
align-items: center;
background-image: url(/assets/images/pippi.452b13ba.png);
background-size: 164px 234px;
display: flex;
flex-direction: column;
height: 234px;
width: 164px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.supporter-promo__pippi {
background-image:url(/assets/images/[email protected])
}
}
@media (min-width: 900px) {
.supporter-promo__pippi {
background-position-y:-28px;
background-size: 164px;
flex: none;
height: auto;
order: 1
}
}
.supporter-promo__text {
color: #fde;
font-size: 14px;
margin: 0
}
.supporter-promo__text+.supporter-promo__text {
margin-top: 10px
}
.supporter-promo__text--small {
font-size: 12px
}
.supporter-promo__link {
color: #cc5288;
font-weight: 700;
text-decoration: none
}
.supporter-promo__link:active,.supporter-promo__link:focus,.supporter-promo__link:hover {
text-decoration: none
}
.supporter-promo__link:active,.supporter-promo__link:hover {
color: #fff
}
.supporter-quote {
background-color: hsl(var(--hsl-b4));
box-shadow: 0 1px 3px rgba(0,0,0,.25),inset 0 2px 3px -1px rgba(0,0,0,.25);
color: #fff;
font-size: 14px;
padding: 30px
}
.supporter-quote__body {
display: flex
}
@media (max-width: 899px) {
.supporter-quote__body {
flex-direction:column
}
}
.supporter-quote__content {
border: none;
margin: 0;
padding: 0;
position: relative
}
.supporter-quote__quote-mark {
color: hsl(var(--hsl-b3));
font-size: 50px
}
.supporter-quote__quote-mark--left {
align-self: flex-start;
padding-right: 20px
}
@media (max-width: 899px) {
.supporter-quote__quote-mark--left {
margin-top:-20px
}
}
.supporter-quote__quote-mark--right {
align-self: flex-end;
padding-left: 20px
}
@media (max-width: 899px) {
.supporter-quote__quote-mark--right {
margin-top:-40px
}
}
.supporter-quote__signature {
margin-top: 10px;
text-align: right
}
.supporter-status {
align-items: flex-end;
color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between
}
@keyframes support-fill-pour {
0% {
width: 0
}
}
@media (max-width: 899px) {
.supporter-status {
align-items:center;
background: hsl(var(--hsl-b5));
flex-direction: column-reverse
}
}
.supporter-status__flex-container {
align-items: flex-end;
display: flex;
flex-direction: column;
flex-grow: 1;
margin-bottom: 30px;
margin-left: 30px
}
@media (max-width: 899px) {
.supporter-status__flex-container {
align-items:center;
flex-direction: column;
margin-right: 30px
}
}
.supporter-status__flex-container-inner {
display: flex;
flex-direction: column;
margin-top: 30px;
width: 100%
}
.supporter-status__pippi {
align-items: flex-end;
background-image: url(/assets/images/header-pippi.6222e29a.png);
background-position: 50%;
background-size: cover;
height: 348px;
max-width: 100%;
width: 375px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.supporter-status__pippi {
background-image:url(/assets/images/[email protected])
}
}
.supporter-status__progress-bar {
background: hsla(var(--hsl-b6),.8);
border-radius: 25px;
height: 25px;
margin-bottom: 10px;
opacity: .5;
overflow: hidden;
transform: translateZ(0);
width: 100%
}
.supporter-status__progress-bar--active {
opacity: 1
}
.supporter-status__progress-bar-fill {
background-color: hsl(var(--hsl-pink-1));
background-size: 40px 40px;
border-radius: 25px;
height: 100%;
opacity: 0
}
.supporter-status__progress-bar-fill--active {
animation: support-fill-pour .9375s ease-in-out;
opacity: 1
}
.supporter-status__text {
font-size: 14px
}
.supporter-status__text--first {
margin-bottom: 10px
}
.team-action-button {
--bg: #34343475;
--bg-hover: #42424275;
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background: #34343475;
border: none;
border-radius: 10000px;
color: #fff;
display: inline-flex;
display: flex;
font-size: 14px;
font-weight: 700;
height: var(--item-height);
justify-content: center;
margin: 0;
outline: none;
padding: 10px 30px;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
width: auto
}
.team-action-button,.team-action-button:active,.team-action-button:focus,.team-action-button:hover {
text-decoration: none
}
.team-action-button:active,.team-action-button:focus,.team-action-button:hover {
color: #fff
}
.team-action-button:hover {
background: var(--bg-hover)
}
.team-action-button--join {
--bg: hsl(var(--hsl-blue-3));
--bg-hover: hsl(var(--hsl-blue-2))
}
.team-action-button--join-cancel,.team-action-button--part {
--bg: hsl(var(--hsl-red-3));
--bg-hover: hsl(var(--hsl-red-2))
}
.team-action-button[disabled] {
opacity: .7;
pointer-events: none
}
.team-info-entries {
display: grid;
gap: 10px;
margin-bottom: 20px
}
.team-info-entry {
display: grid
}
.team-info-entry__value {
min-width: 0;
font-weight: 600
}
.team-members {
display: grid;
gap: 10px
}
.team-members__type {
/* background-color: hsl(var(--hsl-b2)); */
border-radius: 10px;
display: grid;
gap: 5px;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
padding: 5px
}
.team-members__type--owner {
background-color: hsl(var(--hsl-orange-1));
color: hsl(var(--hsl-orange-4));
grid-template-columns: 1fr
}
.team-members__meta {
display: grid;
font-weight: 600;
grid-column: 1/-1;
grid-template-columns: 1fr auto;
padding: 0 10px
}
.team-members-leaderboard {
display: grid;
gap: 2px;
grid-template-columns: auto 1fr;
list-style: none;
margin: 0;
padding: 0
}
@media (min-width: 900px) {
.team-members-leaderboard {
grid-template-columns:auto 1fr auto auto auto
}
}
.team-members-leaderboard-item {
--gutter: 10px;
align-items: center;
background-color: #00000021;
border-radius: 10px;
display: grid;
font-size: 14px;
gap: 2px 10px;
grid-column: 1/-1;
grid-template-columns: subgrid;
padding: 4px var(--gutter)
}
.team-members-leaderboard-item:hover {
background: #1a1a1a4d;
}
@media (min-width: 900px) {
.team-members-leaderboard-item {
--gutter:20px
}
}
.team-members-leaderboard-item__avatar {
align-items: center;
border-radius: 4px;
display: flex;
overflow: hidden;
width: 40px
}
.team-members-leaderboard-item__number {
display: grid;
font-size: 16px;
gap: var(--gutter);
grid-column: 1/-1;
grid-template-columns: subgrid
}
@media (min-width: 900px) {
.team-members-leaderboard-item__number {
display:block;
grid-column: initial;
padding: 0 var(--gutter)
}
}
.team-members-leaderboard-item__number-title {
font-size: 12px;
font-weight: 600
}
.team-members-leaderboard-item__numbers {
display: grid;
grid-column: 2/-1;
grid-template-columns: auto 1fr
}
@media (min-width: 900px) {
.team-members-leaderboard-item__numbers {
display:contents
}
}
.team-members-leaderboard-item__rank {
text-align: end
}
.team-members-leaderboard-item__username {
align-items: center;
display: flex;
gap: 10px;
width: -moz-max-content;
width: max-content
}
.team-members-manage {
display: grid;
font-size: 14px;
gap: 2px 10px;
grid-template-columns: 1fr auto auto auto;
list-style-type: none;
margin: 0;
padding: 0
}
.team-members-manage__avatar {
border-radius: 4px;
height: 20px;
overflow: hidden;
width: 20px
}
.team-members-manage__item {
align-items: center;
background: #18181885;
border-radius: 4px;
display: grid;
grid-column: 1/-1;
grid-template-columns: subgrid;
padding: 3px 10px;
font-size: 13px;
height: 35px;
}
.team-members-manage__item--header {
font-weight: 600
}
.team-members-manage__username {
align-items: center;
display: flex;
gap: 10px;
width: -moz-max-content;
width: max-content
}
.team-settings {
display: grid;
gap: 15px 5px
}
@media (min-width: 900px) {
.team-settings {
gap:5px
}
}
.team-settings__buttons {
display: flex;
gap: 10px
}
.team-settings__description-preview {
--padding: 10px;
background-color: rgb(34 34 34 / 46%);
border-radius: 6px;
padding: var(--padding) 0
}
.team-settings__errors {
color: hsl(var(--hsl-red-1));
margin-top: 1em;
padding: 0 0 0 2em
}
.team-settings__help {
color: #d1d1d1;
font-size: 12px
}
.team-settings__image {
border-radius: 6px;
max-width: 100%;
min-width: 0;
-o-object-fit: contain;
object-fit: contain
}
.team-settings__item {
--align-items-desktop: start;
--grid-rows: none;
--grid-rows-desktop: none;
--grid-columns: 1fr;
--grid-columns-desktop: 2fr 1fr;
display: grid;
gap: 5px 15px;
grid-template-columns: var(--grid-columns);
grid-template-rows: var(--grid-rows)
}
.team-settings__item--buttons {
--grid-columns-desktop: 1fr auto
}
.team-settings__item--description {
--align-items-desktop: stretch;
--grid-columns-desktop: 1fr 1fr;
--grid-rows: calc(var(--vh, 1vh)*70) auto
}
@media (min-width: 900px) {
.team-settings__item {
--grid-columns:var(--grid-columns-desktop);
--grid-rows: var(--grid-rows-desktop);
align-items: var(--align-items-desktop)
}
}
.team-settings-description-preview {
padding: 0 var(--padding)
}
@media (min-width: 900px) {
.team-settings-description-preview {
height:calc(var(--vh)*70);
overflow-y: scroll
}
}
.team-summary {
align-items: start;
display: grid;
gap: 20px;
grid-template-columns: 1fr;
margin: 0 calc(var(--inner-gutter)*-1);
max-height: calc(var(--vh)*70);
overflow-y: scroll;
padding: 0 var(--inner-gutter)
}
@media (min-width: 900px) {
.team-summary {
grid-template-columns:2fr auto 3fr
}
}
.team-summary__sidebar--separator {
display: none
}
@media (min-width: 900px) {
.team-summary__sidebar--separator {
background-color:hsl(var(--hsl-b6));
display: block;
height: 100%;
width: 2px
}
.team-summary__sidebar {
position: sticky;
top: 0
}
}
.textual-button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #ccc;
display: inline-flex;
font-size: 12px;
justify-content: center;
margin: 0;
outline: none;
padding: 0
}
.textual-button,.textual-button:active,.textual-button:focus,.textual-button:hover {
text-decoration: none
}
.textual-button:active,.textual-button:focus,.textual-button:hover {
color: #eee
}
.textual-button--block {
margin-right: 10px
}
.textual-button--inline {
color: inherit;
display: inline;
font-size: inherit
}
.textual-button__icon {
display: inline-block;
font-size: .85em
}
.title {
border-bottom: 2px solid;
color: hsl(var(--hsl-c1));
font-size: 16px;
font-style: normal;
margin: 0 0 10px;
max-width: 100%;
padding-bottom: 5px;
width: -moz-max-content;
width: max-content
}
.title--artist-track-search-advanced {
border: none;
margin: 15px 0;
padding: 0
}
.title--forum {
border-bottom-color: white;
margin-bottom: 0
}
.title--page-extra {
display: inline-block;
font-weight: 700;
margin-bottom: 20px
}
.title--page-extra-small {
border-bottom: none;
font-size: 14px;
font-weight: 700;
margin: 0;
padding: 10px 0
}
.title--page-extra-small:before {
background-color: white;
border-radius: 10000px;
content: "";
height: .65em;
margin-top: .3em;
position: absolute;
width: 3px
}
@media (min-width: 900px) {
.title--page-extra-small:before {
margin-left:-10px
}
}
.title--profile-edit-popup {
margin: 0
}
.title--page-extra-small-top {
padding-top: 0
}
.title__count {
background-color: #181818ad;
border-radius: 10000px;
color: #c1c1c1;
margin-left: 10px;
padding: 5px 10px;
border-radius: 5px;
}
.title--page-extra-small .title__count {
font-size: .8em;
padding-bottom: 1px;
padding-top: 0
}
.tooltip-achievement {
padding: 20px 10px;
text-align: center;
width: 100%
}
.tooltip-achievement__badge {
align-items: center;
display: flex;
flex-direction: column;
font-size: 70px;
justify-content: flex-end
}
.tooltip-achievement__content {
padding: 20px;
text-align: center
}
.tooltip-achievement__date {
color: #fff;
font-size: 10px;
margin-top: 10px
}
.tooltip-achievement__description {
color: #ccc;
font-size: 12px;
margin-top: 10px
}
.tooltip-achievement__detail {
min-height: 90px;
transition: opacity .5s
}
.tooltip-achievement__detail--hover {
height: 100%;
height: auto;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%
}
.tooltip-achievement__detail-container--hoverable:hover .tooltip-achievement__detail--hover {
opacity: 1;
position: relative
}
.tooltip-achievement__detail-container--hoverable:hover .tooltip-achievement__detail--normal {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%
}
.tooltip-achievement__detail-container {
position: relative
}
.tooltip-achievement__grouping {
color: #fff;
font-size: 12px;
padding: 10px;
text-align: center
}
.tooltip-achievement__instructions {
color: hsl(var(--hsl-l1));
font-size: 14px;
font-weight: 300
}
.tooltip-achievement__instructions a,.tooltip-achievement__instructions a:active,.tooltip-achievement__instructions a:focus,.tooltip-achievement__instructions a:hover {
color: #fff
}
.tooltip-achievement__instructions i {
font-style: normal
}
.tooltip-achievement__name {
color: #fff;
font-size: 20px;
font-weight: 300
}
.tooltip-beatmap {
color: hsl(var(--hsl-c1));
font-size: 14px;
font-weight: 700;
height: 100%
}
.tooltip-beatmap__content {
align-items: center;
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px 10px
}
.tooltip-default {
background-color: hsl(var(--hsl-b6));
border: 0 solid transparent;
border-radius: 4px;
color: #fff;
font-size: 12px;
line-height: 1.1;
padding: 2px 10px;
pointer-events: none;
text-align: center
}
.tooltip-default--extra-padding {
padding: 7px 10px
}
.tooltip-default--fixed {
position: fixed
}
.tooltip-default--interactable {
pointer-events: auto
}
.tooltip-default .qtip-content {
text-align: inherit
}
.tooltip-default__time {
color: hsl(var(--hsl-l1))
}
.tournament {
background-color: hsl(var(--hsl-b5))
}
.tournament__banner {
background-image: var(--tournament-header-banner)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.tournament__banner {
background-image:var(--tournament-header-banner-2x)
}
}
.tournament__body {
align-items: center;
color: #fff;
display: inline-flex;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 10px
}
@media (min-width: 900px) {
.tournament__body {
padding-left:50px;
padding-right: 50px
}
}
.tournament__countdown-timer {
background: hsl(var(--hsl-b4));
margin-top: -10px;
padding-bottom: 20px
}
.tournament__description {
font-family: var(--font-content-override,var(--font-content));
font-size: 14px;
line-height: 1.35
}
.tournament__description h2,.tournament__description h3,.tournament__description h4,.tournament__description h5,.tournament__description h6,.tournament__description>h1 {
color: #fff
}
.tournament__description a {
color: hsl(var(--hsl-l1))
}
.tournament__description-md-extra {
margin-top: 1.5em
}
.tournament__banner {
background-position: 50%;
background-size: cover;
height: 450px
}
.tournament__links {
margin-bottom: 20px;
text-align: center
}
.tournament__page {
background-color: hsl(var(--hsl-b4));
box-shadow: 0 1px 3px rgba(0,0,0,.25);
padding: 20px 10px
}
@media (min-width: 900px) {
.tournament__page {
padding-left:50px;
padding-right: 50px
}
}
.tournament-list {
background-color: #00000014;
font-weight: 300;
padding: 20px 10px
}
@media (min-width: 900px) {
.tournament-list {
padding-left:50px;
padding-right: 50px
}
}
.tournament-list__heading {
color: #fff;
margin: 0;
padding: 10px 0
}
.tournament-list__group {
grid-gap: 10px;
display: grid;
margin-bottom: 10px
}
.tournament-list__group--old {
grid-template-columns: 1fr 1fr
}
.tournament-list__none-running {
color: hsl(var(--hsl-l1));
margin-left: 10px
}
.tournament-list-item {
background-color: rgba(93, 93, 101, 0.09);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: #fff;
display: flex;
flex-direction: column;
text-decoration: none;
transition: 50ms ease-in-out;
border-radius: 20px;
}
.tournament-list-item:active,.tournament-list-item:focus,.tournament-list-item:hover {
color: #fff;
text-decoration: none;
}
@media (min-width: 900px) {
.tournament-list-item:hover .tournament-list-item__image {
transform:scale(1.02);
}
}
.tournament-list-item__metadata {
display: flex;
justify-content: space-between
}
@media (max-width: 899px) {
.tournament-list-item__metadata {
align-items:center
}
}
.tournament-list-item__metadata-left {
padding: 10px 15px 15px
}
.tournament-list-item__metadata-right {
padding: 10px
}
.tournament-list-item__tournament-date {
font-size: 18px;
font-weight: 700;
padding-bottom: 5px
}
@media (max-width: 899px) {
.tournament-list-item__tournament-date {
font-size:12px
}
}
.tournament-list-item__registration-date {
color: #cfcfcf;
font-size: 12px
}
@media (max-width: 899px) {
.tournament-list-item__registration-date {
font-size:9px
}
}
.tournament-list-item__registrations {
font-size: 15px
}
@media (max-width: 899px) {
.tournament-list-item__registrations {
align-items:center;
display: flex;
flex-direction: column-reverse;
font-size: 12px
}
}
.tournament-list-item__image-wrapper {
overflow: hidden;
}
.tournament-list-item__image {
height: 510px;
-o-object-fit: cover;
object-fit: cover;
transition: 50ms ease-in-out;
width: 100%;
will-change: transform,filter,opacity;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.tournament-list-item--old .tournament-list-item__image {
filter: grayscale();
height: 210px;
opacity: .75;
}
.tournament-list-item--old:hover .tournament-list-item__image {
filter: none;
opacity: 1;
}
.track-cover-preview {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-position: 50%;
background-size: cover;
border: none;
color: hsl(var(--hsl-b1));
display: inline-flex;
height: 32px;
justify-content: center;
margin: 0;
outline: none;
padding: 0;
position: relative;
text-decoration: none;
width: 32px
}
.track-cover-preview:active,.track-cover-preview:focus,.track-cover-preview:hover {
color: hsl(var(--hsl-c1));
text-decoration: none
}
.track-cover-preview:before {
background-color: rgba(0,0,0,.75);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.turbo-progress-bar {
background-color: #fc2
}
.update-streams-v2 {
padding: 20px 5px
}
@media (min-width: 900px) {
.update-streams-v2 {
padding-left:45px;
padding-right: 45px
}
}
.update-streams-v2__container {
display: flex;
flex-wrap: wrap;
max-width: 100%;
width: -moz-max-content;
width: max-content
}
.update-streams-v2__item {
color: #fff;
display: block;
padding: 5px;
text-decoration: none;
width: 100px;
will-change: opacity
}
.update-streams-v2__item:active,.update-streams-v2__item:focus,.update-streams-v2__item:hover {
color: #fff;
text-decoration: none
}
.update-streams-v2__item--featured {
width: 200px
}
.update-streams-v2__bar {
border-radius: 400px;
display: block;
height: 4px;
margin-bottom: 5px;
width: 100%;
will-change: transform
}
.update-streams-v2--with-active .update-streams-v2__bar,.update-streams-v2__container:hover .update-streams-v2__bar {
opacity: .5;
transform: scaleY(.5)
}
.update-streams-v2__container:hover .update-streams-v2__item--active .update-streams-v2__bar,.update-streams-v2__item--active .update-streams-v2__bar,.update-streams-v2__item:hover .update-streams-v2__bar {
opacity: 1;
transform: scaleY(1)
}
.update-streams-v2__row {
margin: 0
}
.update-streams-v2__row--name {
font-size: 12px;
font-weight: 700
}
.update-streams-v2__row--users {
color: hsl(var(--hsl-f1));
font-size: 10px
}
.update-streams-v2__row--version {
font-size: 16px;
font-weight: 300
}
.update-streams-v2--with-active .update-streams-v2__row,.update-streams-v2__container:hover .update-streams-v2__row {
opacity: .5
}
.update-streams-v2__item--active .update-streams-v2__row,.update-streams-v2__item:hover .update-streams-v2__row {
opacity: 1
}
.user-action-button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background: #252525;
border: none;
border-radius: 10px;
color: #fff;
display: inline-flex;
display: flex;
font-size: 14px;
height: 20px;
justify-content: center;
margin: 0;
outline: none;
padding: 0;
text-align: center;
width: 50px
}
.user-action-button,.user-action-button:active,.user-action-button:focus,.user-action-button:hover {
text-decoration: none
}
.user-action-button:active,.user-action-button:focus,.user-action-button:hover {
color: #fff
}
.user-action-button:hover {
background: #2b2b2b
}
.user-action-button--message:hover {
background: rgba(34,153,187,.7)
}
.user-action-button--mutual {
background-color: #353535;
}
.user-action-button--friend {
background-color: #212121bf;
}
.user-action-button--dynamic {
font-size: .6em;
height: 1.67em;
width: 2.505em
}
.user-action-button--profile-page {
border-radius: 10000px;
font-weight: 700;
height: var(--item-height);
min-width: 80px;
padding: 10px;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
width: auto
}
.user-action-button--quick-search {
border-radius: 10000px;
font-size: 8px;
height: 100%;
width: 30px
}
.user-action-button--right-margin {
margin-right: 10px
}
.user-action-button--user-card {
border-radius: 50%;
font-size: 13px;
height: 26px;
width: 26px
}
.user-action-button--user-list {
font-size: 12px;
height: 20px;
width: 30px
}
.user-action-button[disabled] {
pointer-events: none
}
.user-action-button__counter {
padding-right: 10px
}
.user-action-button__icon {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
will-change: opacity
}
.user-card .user-action-button__icon {
will-change: unset
}
.user-action-button__icon--hover-hidden {
opacity: 1
}
.user-action-button:hover .user-action-button__icon--hover-hidden,.user-action-button__icon--hover-visible {
opacity: 0
}
.user-action-button:hover .user-action-button__icon--hover-visible {
opacity: 1
}
.user-action-button__icon-container {
align-items: center;
display: inline-flex;
justify-content: center;
position: relative;
width: 50px
}
.user-action-button--quick-search .user-action-button__icon-container {
width: 100%
}
.user-card {
--avatar-size: 60px;
--card-item-spacing: 10px;
--icon-gutter: 6px;
--status-icon-margin: 10px;
background-color: #282828ad;
border-radius: 10px;
display: inline-block;
font-family: var(--font-default);
height: 120px;
overflow: hidden;
position: relative;
width: 100%;
}
.user-card--list {
--avatar-size: 40px;
border-radius: 6px;
height: var(--avatar-size)
}
@media (max-width: 479px) {
.user-card--list {
--card-item-spacing:6px;
--icon-gutter: 4px;
--status-icon-margin: 0
}
}
.qtip--user-card .user-card {
width: 290px
}
.user-card--active.user-card--has-outline:after,.user-card:hover.user-card--has-outline:after {
border: 2px solid white;
border-radius: 10px;
content: "";
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%
}
.search-result--user .user-card--active.user-card--has-outline:after,.search-result--user .user-card:hover.user-card--has-outline:after {
border-color: #4ad
}
.user-card--list.user-card--active.user-card--has-outline:after,.user-card--list.user-card:hover.user-card--has-outline:after {
border-radius: 6px
}
.user-cards--menu-active .user-card--highlightable {
pointer-events: none
}
.user-card__avatar {
background-color: hsl(var(--hsl-b4));
border-radius: 6px;
height: 100%;
left: 0;
-o-object-fit: contain;
object-fit: contain;
opacity: 0;
position: absolute;
top: 0;
transition: opacity .22s ease-in-out;
width: 100%
}
.user-card__avatar--loaded {
opacity: 1
}
.user-card--list .user-card__avatar {
border-radius: 6px 0 0 6px
}
.user-card__avatar-space {
flex: none;
height: var(--avatar-size);
position: relative;
width: var(--avatar-size)
}
.user-card__avatar-spinner {
align-items: center;
background: hsla(0,0%,100%,.1);
border-radius: 6px;
color: #fff;
display: inline-flex;
font-size: 14px;
height: 100%;
justify-content: center;
left: 0;
opacity: .25;
position: absolute;
top: 0;
transition: opacity .22s ease-in-out;
width: 100%
}
.user-card__avatar-spinner--loaded {
opacity: 0
}
.user-card__background {
border-radius: 10px;
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
transition: opacity .22s ease-in-out;
width: 100%;
}
.user-card__background--loading {
opacity: 0
}
.user-card--list .user-card__background {
border-radius: 6px;
left: unset;
position: absolute;
right: 0;
width: 50%;
}
.user-card__background-container {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.user-card--active .user-card__background-container {
pointer-events: none
}
.user-card__background-overlay {
border-radius: 10px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: hsla(var(--hsl-b5), .6);
}
.user-card__background-overlay--online {
background: hsla(var(--hsl-b5),.6);
}
.user-card--list .user-card__background-overlay {
background: linear-gradient(to right,hsl(var(--hsl-b5)) 50%,hsla(var(--hsl-b5),.7));
border-radius: 6px
}
.user-card--list .user-card__background-overlay--online {
background: linear-gradient(to right,hsl(var(--hsl-b5)) 50%,hsla(var(--hsl-b5),.6))
}
.user-card__card {
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
pointer-events: none;
position: relative;
text-decoration: none
}
.user-card__card:active,.user-card__card:focus,.user-card__card:hover {
color: #fff;
text-decoration: none
}
.user-card--list .user-card__card {
flex-direction: row
}
.user-card__content {
padding: var(--card-item-spacing)
}
.user-card__content--details {
display: grid;
grid-template-columns: minmax(min-content,auto) 1fr
}
.user-card__content--status {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 0
}
.user-card--list .user-card__content {
padding: 0
}
.user-card__details {
display: grid;
grid-template-rows: 26px 1fr;
margin-left: var(--card-item-spacing)
}
.user-card--list .user-card__details {
grid-gap: var(--card-item-spacing);
grid-template-columns: auto repeat(2,min-content);
grid-template-rows: unset
}
.user-card__group-badge {
margin-left: 2px
}
.user-card__group-badges {
margin-left: 3px
}
.user-card__group-badges,.user-card__icon {
display: flex;
pointer-events: auto
}
a.user-card__icon,a.user-card__icon:active,a.user-card__icon:focus,a.user-card__icon:hover {
text-decoration: none
}
.user-card__icon+.user-card__icon {
margin-left: var(--icon-gutter)
}
.user-cards--menu-active .user-card__icon {
pointer-events: none
}
.user-card__icon:empty {
display: none
}
.user-card__icon--flag {
font-size: 26px
}
.user-card__icon--menu {
background: #3b3b3bba;
border-radius: 50%;
font-size: 10px;
height: 25px;
opacity: 0;
position: relative;
transition: background-color .12s ease-in-out;
width: 25px;
}
.user-card:hover .user-card__icon--menu {
opacity: 1
}
.user-card:hover .user-card__icon--menu:hover {
background: #474747ba;
}
.user-card--active .user-card__icon--menu.user-card__icon--menu {
background-color: hsl(var(--hsl-l1));
opacity: 1
}
.user-card--list .user-card__icon--menu {
background-color: transparent;
border-radius: 0 10px 10px 0;
height: var(--avatar-size);
opacity: 1;
transition: none;
width: 20px
}
.user-card__icons {
display: flex;
flex: none
}
@media (max-width: 479px) {
.user-card--list .user-card__icons--card {
display:none
}
}
.user-card--list .user-card__icons {
align-items: center
}
.user-card__status {
align-items: center;
display: flex;
min-width: 0
}
.user-card__status-icon {
border: 4px solid #000;
border-radius: 50%;
height: 25px;
width: 25px
}
.user-card__status-icon--online {
border: 4px solid #b3d944
}
.user-card__status-icon-container {
align-items: center;
display: inline-flex;
flex: none;
justify-content: center;
width: var(--avatar-size)
}
.user-card--list .user-card__status-icon-container {
margin: 0 var(--status-icon-margin);
order: 1;
width: unset
}
.user-card__status-message--sub {
font-size: 12px
}
@media (max-width: 899px) {
.user-card__status-message {
display:none
}
}
.user-card__status-messages {
display: flex;
flex-direction: column;
font-size: 14px;
margin-left: var(--card-item-spacing);
min-width: 0
}
.user-card--list .user-card__status-messages {
text-align: right
}
@media (max-width: 479px) {
.user-card__status-messages {
display:none
}
}
.user-card__user {
align-items: center;
display: flex;
height: var(--avatar-size);
min-width: 0
}
.user-card__username {
color: #fff;
pointer-events: auto;
text-decoration: none
}
.user-card__username:active,.user-card__username:focus,.user-card__username:hover {
color: #fff;
text-decoration: none
}
.user-card__username-row {
align-items: center;
display: flex;
font-weight: 600;
min-width: 0
}
.user-card-brick {
--border-colour: transparent;
align-items: center;
background-color: hsla(var(--hsl-b2),.8);
border-radius: 6px;
box-shadow: inset 0 0 0 2px var(--border-colour);
display: flex;
max-width: 100%;
padding: 1px 3px;
width: -moz-min-content;
width: min-content
}
.user-card-brick--friend {
--border-colour: hsl(var(--hsl-green-2))
}
.user-card-brick--mutual {
--border-colour: hsl(var(--hsl-pink-2))
}
.user-card-brick__group-bar {
background-color: var(--group-colour,#0087ca);
border-radius: 10000px;
height: 1em;
margin: 0 5px;
width: 4px
}
.user-card-brick__link {
align-items: center;
color: #fff;
display: flex;
height: 100%;
overflow: hidden;
padding: 2px 8px 2px 3px;
text-decoration: none
}
.user-card-brick__link:active,.user-card-brick__link:focus,.user-card-brick__link:hover {
color: #fff;
text-decoration: none
}
.user-card-brick__remove {
-webkit-appearance: none;
-moz-appearance: none;
aspect-ratio: 1;
background: none;
border: none;
border-radius: 50%;
display: flex;
margin: 2px 2px 2px 0;
opacity: .7;
outline: none;
padding: 0 .3em;
place-items: center
}
.user-card-brick__remove:active,.user-card-brick__remove:focus,.user-card-brick__remove:hover {
background-color: hsl(var(--hsl-b1));
opacity: 1
}
.user-card-brick__username {
font-weight: 700;
padding-bottom: 1px
}
.user-cards {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
justify-content: center;
transform: translateZ(0)
}
.search-result--user .user-cards {
gap: 5px
}
.user-cards--list {
gap: 2px;
grid-template-columns: 1fr
}
.user-cards--brick {
display: flex;
flex-wrap: wrap;
font-size: 13px;
gap: 4px;
justify-content: flex-start
}
.user-cover-preset-replace {
border-top: 1px solid hsl(var(--hsl-b1));
display: grid;
gap: 10px;
padding-top: 10px
}
.user-cover-preset-replace__input {
width: 100%
}
.user-cover-preset-table {
display: grid;
grid-template-columns: auto 150px 1fr
}
.user-cover-preset-table__image {
width: 100%
}
.user-cover-preset-table__toolbar {
grid-column-end: 4;
grid-column-start: 2
}
.user-cover-preset-table__row {
display: grid;
gap: 10px;
grid-column: 1/4;
grid-template-columns: subgrid;
padding: 10px
}
.user-cover-preset-table__row--item {
--row-bg: hsl(var(--hsl-b4));
background: var(--row-bg)
}
.user-cover-preset-table__row--item:hover {
background: hsl(var(--hsl-b2))
}
.user-cover-preset-table__row--item:nth-child(2n) {
--row-bg: hsl(var(--hsl-b3))
}
.user-group-badge {
align-items: center;
background-color: hsla(var(--hsl-b6),.75);
border-radius: 20px;
color: var(--group-colour,hsl(var(--hsl-c1)));
display: flex;
font-size: 10px;
font-weight: 600;
justify-content: center;
padding: 2px 10px
}
a.user-group-badge {
text-decoration: none
}
a.user-group-badge:active,a.user-group-badge:focus,a.user-group-badge:hover {
color: var(--group-colour,hsl(var(--hsl-c1)));
text-decoration: none
}
.user-group-badge:before {
content: attr(data-label)
}
.user-group-badge--t-forum {
font-size: 8px;
padding-left: 0;
padding-right: 0;
width: 100%
}
@media (min-width: 900px) {
.user-group-badge--t-forum {
font-size:10px;
margin: auto;
padding-left: 20px;
padding-right: 20px;
width: -moz-min-content;
width: min-content
}
}
.user-group-badge--owner {
background-color: hsl(var(--hsl-l1));
color: hsl(var(--hsl-b6))
}
.user-group-badge--profile-page {
font-size: inherit
}
.user-group-badge--probationary {
background-color: hsl(var(--hsl-b6));
opacity: .6
}
.user-group-badge__modes {
color: #fff;
display: flex;
padding-left: 5px
}
@media (max-width: 899px) {
.user-group-badge--t-forum .user-group-badge__modes {
display:none
}
}
.user-group-badge__modes>i {
padding: 1px
}
.user-home {
background: hsl(var(--hsl-b5));
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: flex;
flex-direction: column;
background-color: #00000014;
border: solid;
border-radius: 40px;
border-color: rgb(0 0 0 / 0%);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
@media (min-width: 900px) {
.user-home {
align-items:flex-start;
flex-direction: row;
padding: 0 50px
}
}
.user-home__beatmap-list-title {
/* color: hsl(var(--hsl-l1)); */
font-size: 16px;
font-weight: 700;
margin: 0;
padding: 20px 0 10px
}
.user-home__beatmapsets {
margin: -10px 0
}
.user-home__button {
margin: 10px 0
}
.user-home__buttons {
margin: -10px 0
}
.user-home__news {
flex: none;
padding: 0 0 20px;
width: 100%
}
@media (min-width: 900px) {
.user-home__news {
margin-right:10px;
width: calc(60% - 10px)
}
}
.user-home__news-posts-group {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: block;
margin-bottom: 5px;
padding: 5px 0
}
.user-home__news-posts-group--more {
color: white;
font-weight: 600;
padding: 20px;
text-align: center;
text-decoration: none
}
.user-home__news-posts-group--more:active,.user-home__news-posts-group--more:focus,.user-home__news-posts-group--more:hover {
color: #fff;
text-decoration: none
}
.user-home__news-title {
align-items: flex-end;
color: white;
display: flex;
font-size: 20px;
font-weight: 700;
margin: 0;
padding: 20px 0 10px 10px
}
@media (min-width: 900px) {
.user-home__news-title {
padding-left:0
}
}
.user-home__right-sidebar {
background-color: rgb(26 26 26 / 46%);
color: hsl(var(--hsl-c1));
margin: 0;
padding: 20px;
width: 100%
}
@media (min-width: 900px) {
.user-home__right-sidebar {
box-shadow:0 1px 3px rgba(0,0,0,.25);
margin-bottom: 10px;
margin-left: 10px;
padding: 20px 10px 10px;
width: calc(40% - 10px)
}
}
.user-home__status-box {
padding-bottom: 20px
}
.user-home-beatmapset {
display: flex;
margin: 10px -20px;
padding: 0 20px;
text-decoration: none;
transform: translateZ(0);
transition: .1s;
width: calc(100% + 40px)
}
.user-home-beatmapset:active,.user-home-beatmapset:focus,.user-home-beatmapset:hover {
text-decoration: none
}
@media (min-width: 900px) {
.user-home-beatmapset {
margin-left:-10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
width: calc(100% + 20px)
}
}
.user-home-beatmapset:hover {
background-color: #2c2c2c54;
}
.user-home-beatmapset__artist {
font-size: 12px;
margin-top: -3px
}
.user-home-beatmapset__chevron {
align-items: center;
display: inline-flex;
flex: none;
justify-content: center;
margin-left: 5px
}
.user-home-beatmapset__creator {
font-size: 10px;
margin-top: 2px
}
.user-home-beatmapset__meta {
color: #fff;
display: flex;
flex: 1;
flex-direction: column;
font-weight: 400;
justify-content: center;
margin-left: 5px;
min-width: 0;
padding: 0 5px
}
.user-home-beatmapset__playcount {
color: #ffffff9c;
}
.user-home-beatmapset__playmode-icon {
font-size: 13px;
margin-right: 2px
}
.user-home-beatmapset__title {
font-size: 16px;
margin-top: -2px
}
.user-home-beatmapset__title-container,.user-level {
display: inline-flex
}
.user-level {
--bg: hsl(var(--hsl-c1));
align-items: center;
font-size: 20px;
height: 50px;
justify-content: center;
position: relative;
width: 50px
}
.user-level__icon {
background: linear-gradient(var(--bg));
clip-path: path("m 25,2.7 a 9.3,9.3 0 0 1 4.7,1.2 l 11.3,6.5 a 9.3,9.3 0 0 1 4.6,8.1 v 13.0 a 9.3,9.3 0 0 1 -4.6,8.1 L 29.7,46.1 a 9.3,9.3 0 0 1 -9.3,0 L 9.1,39.6 A 9.3,9.3 0 0 1 4.4,31.5 v -13.0 A 9.3,9.3 0 0 1 9.1,10.4 L 20.4,3.9 A 9.3,9.3 0 0 1 25,2.7 M 25,0.0 A 11.9,11.9 0 0 0 19.0,1.6 L 7.7,8.1 A 12.0,12.0 0 0 0 1.7,18.5 v 13.0 a 12.0,12.0 0 0 0 6.0,10.4 l 11.3,6.5 a 12.0,12.0 0 0 0 12.0,0 l 11.3,-6.5 a 12.0,12.0 0 0 0 6.0,-10.4 v -13.0 A 12.0,12.0 0 0 0 42.3,8.1 L 31.0,1.6 A 11.9,11.9 0 0 0 25.0,0 Z");
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.user-level__level {
position: absolute
}
.user-list {
/* background-color: hsl(var(--hsl-b4)); */
color: hsl(var(--hsl-c1));
padding: 0 0 20px
}
.user-list__description {
margin-top: 10px;
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.user-list__description {
padding-left:50px;
padding-right: 50px
}
}
.user-list__items {
padding-left: 10px;
padding-right: 10px
}
@media (min-width: 900px) {
.user-list__items {
padding-left:50px;
padding-right: 50px
}
}
.user-list__title {
margin: 0;
padding: 20px 10px 0
}
@media (min-width: 900px) {
.user-list__title {
padding-left:50px;
padding-right: 50px
}
}
.user-list__toolbar {
font-size: 14px;
padding: 20px 10px
}
@media (min-width: 900px) {
.user-list__toolbar {
padding-left:50px;
padding-right: 50px
}
}
.user-list__toolbar-row {
display: flex;
justify-content: flex-end
}
@media (max-width: 899px) {
.user-list__toolbar-row {
align-items:center;
flex-direction: column
}
}
.user-list__toolbar-item+.user-list__toolbar-item {
margin-left: 10px
}
.user-list__view-mode {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
border-radius: 4px;
margin: 0;
outline: none;
padding: 5px
}
.user-list__view-mode-title {
margin-right: 10px
}
.user-list-popup {
--columns: 5;
background-color: hsla(var(--hsl-b6),.75);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
display: grid;
font-size: 12px;
gap: 10px;
padding: 5px 10px
}
@media (min-width: 900px) {
.user-list-popup {
--columns:10
}
}
.user-list-popup__user {
border-radius: 4px;
height: 32px;
overflow: hidden;
width: 32px
}
.user-list-popup__users {
display: grid;
gap: 2px;
grid-template-columns: repeat(var(--columns),auto)
}
.user-list-popup__remainder-count {
text-align: right
}
.user-name {
font-weight: 700
}
.user-online-status {
color: hsl(var(--hsl-c1));
display: flex;
flex-wrap: wrap;
margin: -10px
}
.user-online-status__item {
padding: 10px
}
.user-online-status__item--chart {
height: 70px;
width: 100%
}
.user-online-status__label {
font-size: 10px;
font-weight: 400
}
.user-online-status__value {
font-size: 15px
}
.user-profile-pages {
--vertical-gutter-top-desktop: 0;
--vertical-gutter-top: var(--vertical-gutter);
--vertical-gutter: 10px;
display: grid;
gap: 10px;
grid-template-columns: minmax(0,1fr);
padding: var(--vertical-gutter-top) 0 var(--vertical-gutter);
position: relative
}
@media (min-width: 900px) {
.user-profile-pages {
--vertical-gutter-top:var(--vertical-gutter-top-desktop)
}
}
.user-profile-pages--no-tabs {
--vertical-gutter-top-desktop: var(--vertical-gutter)
}
.user-search-card {
background-color: #5d5d6517;
border-radius: 20px;
font-size: 12px;
line-height: normal;
min-height: 40px;
position: relative;
transition: all .12s ease-in-out
}
.user-search-card--active {
background-color: #4a4a4a52;
}
.user-search-card__avatar-container {
background-size: cover;
border-radius: 6px;
flex: none;
overflow: hidden;
width: 40px
}
.user-search-card__background-container {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.user-search-card__container {
display: flex;
pointer-events: none;
position: relative
}
.user-search-card__details {
align-items: center;
color: hsl(var(--hsl-c1));
display: flex;
line-height: normal;
padding: 2px 5px
}
.user-search-card__col {
display: flex;
flex: none;
margin: 0 5px;
pointer-events: auto
}
.user-search-card__col:empty {
display: none
}
.user-search-card__col--flag {
font-size: 14px
}
.user-search-card__col--icon {
height: 18px
}
.user-search-card__col--support {
font-size: 8px
}
.user-search-card__col--username {
color: inherit;
font-size: 16px;
margin-right: var(--quick-search-items-badge-margin);
text-decoration: none;
white-space: pre
}
.user-search-card__col--username:active,.user-search-card__col--username:focus,.user-search-card__col--username:hover {
color: inherit;
text-decoration: none
}
.user-session-list {
display: flex;
flex: 1;
flex-direction: column
}
.user-session-list-session {
flex-direction: row;
margin-bottom: 10px
}
.user-session-list-session__header {
align-items: center;
color: #fff;
display: inline-flex;
font-size: 14px;
justify-content: center;
margin-bottom: 5px
}
.user-session-list-session__current-badge {
border-radius: 13px;
font-size: 10px;
margin-left: 5px;
padding: 2px 8px;
text-transform: uppercase
}
.user-session-list-session__icon {
margin-right: 5px;
width: 20px
}
.user-session-list-session__details {
border-bottom: 1px solid hsl(var(--hsl-b5));
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between
}
@media (min-width: 900px) {
.user-session-list-session__details {
align-items:center;
padding: 0 5px 10px
}
}
@media (max-width: 899px) {
.user-session-list-session__details {
align-items:flex-start;
flex-wrap: wrap;
padding: 0 0 10px
}
}
.user-session-list-session__ip {
align-items: center;
display: inline-flex;
justify-content: center
}
@media (max-width: 899px) {
.user-session-list-session__ip {
margin-bottom:5px
}
}
@media (min-width: 900px) {
.user-session-list-session__last-active {
padding-left:20px;
width: 50%
}
}
@media (max-width: 899px) {
.user-session-list-session__last-active {
flex-basis:100%;
margin-bottom: 5px
}
}
.user-session-list-session__logout {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #fff;
flex-shrink: 0;
margin: 0 5px 0 0;
outline: none;
padding: 0
}
.user-session-list-session__logout:active,.user-session-list-session__logout:focus,.user-session-list-session__logout:hover {
color: hsl(var(--hsl-l1))
}
@media (max-width: 899px) {
.user-session-list-session__logout {
align-self:flex-end;
margin-bottom: 5px
}
}
.user-session-list-session__logout-icon {
margin-left: 5px
}
.user-verification {
background-color: rgba(0,0,0,.75);
color: #fff;
font-size: 14px;
font-weight: 400;
padding: 70px 40px;
text-align: center
}
.user-verification__key {
background-color: rgba(0,0,0,.5);
border-radius: 4px;
font-family: Menlo,Monaco,Consolas,Courier New,monospace;
padding: 10px;
text-align: center;
width: 75%
}
@media (max-width: 899px) {
.user-verification__key {
font-size:16px
}
}
.user-verification__key,.user-verification__key:focus {
border: 2px solid #fc2;
outline: none
}
.user-verification__link {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: #fd5;
margin: 0;
outline: none;
padding: 0
}
.user-verification__link:focus,.user-verification__link:hover {
color: #fc2;
text-decoration: underline
}
.user-verification__message {
color: #fd5;
font-weight: 700;
margin-top: 10px;
position: absolute;
width: 100%
}
.user-verification__message-spinner {
margin-right: 5px
}
.user-verification__row {
margin: 10px 0
}
.user-verification__row--key {
margin-bottom: 60px;
margin-top: 40px;
position: relative
}
.user-verification__row--title {
color: #fd5;
font-size: 20px;
margin-bottom: 20px
}
.user-verification-popup {
background-image: url(/assets/images/user-verification.5b4e6b96.jpg);
background-position: center 0;
background-size: cover;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
display: grid;
height: 100%;
justify-content: flex-start;
padding: 0 20px;
width: 100%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:1.5dppx) {
.user-verification-popup {
background-image:url(/assets/images/[email protected])
}
}
.js-user-verification--center .user-verification-popup {
justify-content: center
}
@media (min-width: 900px) {
.user-verification-popup {
grid-template-columns:1fr 1fr
}
.username-change {
display: grid;
gap: 40px;
grid-template-columns: auto repeat(2,minmax(0,1fr))
}
}
.username-input {
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 2px;
justify-content: flex-start;
min-width: 0
}
.username-input--beatmap-owner-editor {
min-height: 20px
}
.username-input__input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-c1));
flex: 1;
margin: 0;
min-width: 40px;
order: 1;
outline: none;
padding: 0
}
.username-input__spinner {
align-items: center;
display: inline-flex;
min-width: 1em;
order: 2
}
.value-display {
--label-font-size-desktop: 12px;
--label-font-size: 16px;
--label-font-weight: bold;
--value-color: hsl(var(--hsl-c1));
--value-font-size-desktop: 18px;
--value-font-size: 24px;
display: flex;
flex: 1;
flex-direction: column;
min-width: 60px
}
.value-display--judge-results {
flex: none
}
.value-display--kudosu {
--value-font-size-desktop: 40px;
--value-font-size: 40px
}
.value-display--plain {
--label-font-size-desktop: 12px;
--label-font-size: 12px;
--label-font-weight: normal;
--value-color: hsl(var(--hsl-c2));
--value-font-size-desktop: 16px;
--value-font-size: 16px
}
.value-display--plain-wide {
grid-column-end: span 2
}
.value-display--rank {
--label-font-size-desktop: 12px;
--label-font-size: 10px;
--label-font-weight: normal;
--value-color: hsl(var(--hsl-c2));
--value-font-size-desktop: 30px;
--value-font-size: 20px;
line-height: 1
}
@media (min-width: 900px) {
.value-display--rank {
flex:none
}
}
.value-display--score {
--label-font-size: 12px;
--value-color: hsl(var(--hsl-c2));
--value-font-size-desktop: 30px;
--value-font-size: 30px
}
@media (min-width: 900px) {
.value-display {
--value-font-size:var(--value-font-size-desktop);
--label-font-size: var(--label-font-size-desktop)
}
}
.value-display__description {
color: hsl(var(--hsl-c1));
font-size: 14px;
margin-top: .1em
}
.value-display__label {
font-size: var(--label-font-size);
font-weight: var(--label-font-weight)
}
.value-display__value {
font-size: var(--value-font-size);
font-weight: 300
}
.warning-box {
align-items: center;
background-color: #222222;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
color: hsl(var(--hsl-c1));
display: flex;
font-size: 13px;
margin-bottom: 10px
}
.warning-box__content {
padding: 10px
}
.warning-box__icon {
align-items: center;
align-self: stretch;
background-color: #797979;
border-radius: 6px 0 0 6px;
display: flex;
font-size: 20px;
justify-content: center;
padding: 15px
}
.wiki-main-page__blurb {
color: hsl(var(--hsl-c1));
font-family: var(--font-content-override,var(--font-content));
font-size: 12px;
font-weight: 300;
line-height: 1.35;
padding-top: 30px;
text-align: center
}
.wiki-main-page__panels {
grid-gap: 7px;
display: grid;
padding-top: 45px
}
@media (min-width: 900px) {
.wiki-main-page__panels {
grid-template-columns:1fr 1fr
}
}
.wiki-main-page__heading {
color: hsl(var(--hsl-c1));
font-size: 20px;
font-style: normal;
font-weight: 300
}
.wiki-main-page-panel .wiki-main-page__heading {
margin-bottom: 40px
}
.wiki-main-page-panel--full .wiki-main-page__heading {
font-size: 30px
}
.wiki-main-page__paragraph {
color: hsl(var(--hsl-c1));
font-size: 13px;
font-weight: 700
}
.wiki-main-page-panel {
background: #5d5d6517;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
min-height: 150px;
padding: 30px;
text-align: center
}
@media (min-width: 900px) {
.wiki-main-page-panel--full {
grid-column:1/span 2
}
}
.wiki-notice {
background-color: #0000002b;
color: #ffffff;
margin-bottom: 10px;
padding: 10px 15px;
width: 100%;
border-radius: 20px;
}
.wiki-notice--important {
font-weight: 700
}
.wiki-notice--score {
font-size: 14px;
margin: 0 var(--page-gutter) 20px;
width: auto
}
.wiki-notice--profile-page-extra {
background-color: hsl(var(--hsl-b3))
}
.wiki-notice__markdown-inline-content {
display: inline
}
.wiki-notice__markdown-inline-content p {
display: inline;
margin: 0
}
.wiki-page {
display: grid;
scrollbar-color: hsla(0,0%,100%,.5) hsla(0,0%,100%,.025)
}
.wiki-page,.wiki-page * {
scrollbar-width: thin
}
.wiki-page ::-webkit-scrollbar {
background-color: hsla(0,0%,100%,.025);
-webkit-border-radius: 100px;
width: 10px
}
.wiki-page ::-webkit-scrollbar:hover {
background-color: rgba(0,0,0,.09)
}
.wiki-page ::-webkit-scrollbar:horizontal {
height: 10px
}
.wiki-page ::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.5);
background-clip: padding-box;
border: 2px solid hsla(0,0%,100%,0);
-webkit-border-radius: 100px;
min-height: 10px
}
.wiki-page ::-webkit-scrollbar-thumb:active {
background: hsla(0,0%,100%,.61);
-webkit-border-radius: 100px
}
@media (min-width: 900px) {
.wiki-page {
grid-template-columns:250px 1fr
}
}
.wiki-page__content {
min-width: 0;
padding: 20px 10px
}
@media (min-width: 900px) {
.wiki-page__content {
padding-left:30px;
padding-right: 50px
}
}
.wiki-page__toc {
background-color: #00000014;
border-radius: 6px;
margin: 10px;
padding: 10px
}
@media (min-width: 900px) {
.wiki-page__toc {
border-radius:0;
margin: 0;
max-height: calc(100vh - 50px);
overflow-y: scroll;
padding: 20px 30px 20px 50px;
position: sticky;
top: 50px
}
}
.wiki-search {
padding-top: 10px;
position: relative;
z-index: 1
}
.wiki-search__bar {
background-color: #5d5d6517;
border: 1px solid hsl(var(--hsl-b6));
display: flex;
flex-direction: row;
font-size: 18px;
border-radius: 20px;
}
.wiki-search__bar:focus-within {
border: 1px solid #ffffff4d;
box-shadow: 0 0 20px #ffffff4d
}
.wiki-search__input {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-c1));
flex: 1;
margin: 0;
outline: none;
padding: 13px 0 13px 20px
}
.wiki-search__input::-moz-placeholder {
color: hsl(var(--hsl-c2))
}
.wiki-search__input::placeholder {
color: hsl(var(--hsl-c2))
}
.wiki-search__button {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
color: hsl(var(--hsl-c1));
display: inline-flex;
justify-content: center;
margin: 0 20px 0 10px;
outline: none;
padding: 0
}
.wiki-search__suggestion {
color: hsl(var(--hsl-c1));
padding: 5px 20px;
text-decoration: none
}
.wiki-search__suggestion:active,.wiki-search__suggestion:focus,.wiki-search__suggestion:hover {
color: hsl(var(--hsl-c1));
text-decoration: none
}
.wiki-search__suggestion em {
color: hsl(var(--hsl-l2));
font-style: normal;
font-weight: 700
}
.wiki-search__suggestion--active {
background-color: hsl(var(--hsl-b3))
}
.wiki-search__suggestions {
background-color: hsl(var(--hsl-b6));
border-radius: 0 0 6px 6px;
color: hsl(var(--hsl-c1));
display: flex;
flex: 1;
flex-direction: column;
left: 1px;
max-height: 500px;
overflow-y: auto;
position: absolute;
width: calc(100% - 2px)
}
.wiki-toc-list {
font-size: 15px;
list-style: none;
margin: 0 0 10px;
padding: 0 0 0 10px
}
.wiki-toc-list--top {
margin-bottom: 0;
padding-left: 0
}
.wiki-toc-list--top>.wiki-toc-list__item {
margin-bottom: 5px
}
.wiki-toc-list__link {
display: inline-block;
margin-bottom: 2px;
text-decoration: none
}
.wiki-toc-list__link:active,.wiki-toc-list__link:focus,.wiki-toc-list__link:hover {
text-decoration: none
}
.wiki-toc-list__link--small {
font-size: 12px
}
body {
--hsl-p: var(--base-hue),100%,50%;
--hsl-h1: var(--base-hue),100%,70%;
--hsl-h2: var(--base-hue),50%,45%;
--hsl-c1: var(--base-hue),40%,100%;
--hsl-c2: var(--base-hue),40%,90%;
--hsl-l1: var(--base-hue),40%,80%;
--hsl-l2: var(--base-hue),40%,75%;
--hsl-l3: var(--base-hue),40%,70%;
--hsl-l4: var(--base-hue),40%,50%;
--hsl-d1: var(--base-hue),20%,35%;
--hsl-d2: var(--base-hue),20%,30%;
--hsl-d3: var(--base-hue),20%,25%;
--hsl-d4: var(--base-hue),20%,20%;
--hsl-d5: var(--base-hue),20%,15%;
--hsl-d6: var(--base-hue),20%,10%;
--hsl-f1: var(--base-hue),10%,60%;
--hsl-b1: var(--base-hue),10%,40%;
--hsl-b2: var(--base-hue),10%,30%;
--hsl-b3: var(--base-hue),10%,25%;
--hsl-b4: var(--base-hue),10%,20%;
--hsl-b5: var(--base-hue),10%,15%;
--hsl-b6: var(--base-hue),10%,10%;
--c-saturation-1: 100%;
--c-saturation-2: 80%;
--c-saturation-3: 60%;
--c-saturation-4: 40%;
--c-lightness-1: 70%;
--c-lightness-2: 60%;
--c-lightness-3: 50%;
--c-lightness-4: 30%;
--colour-pink-hue: 333;
--hsl-pink-1: var(--colour-pink-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-pink-2: var(--colour-pink-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-pink-3: var(--colour-pink-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-pink-4: var(--colour-pink-hue),var(--c-saturation-4),var(--c-lightness-4);
--colour-purple-hue: 255;
--hsl-purple-1: var(--colour-purple-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-purple-2: var(--colour-purple-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-purple-3: var(--colour-purple-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-purple-4: var(--colour-purple-hue),var(--c-saturation-4),var(--c-lightness-4);
--colour-blue-hue: 200;
--hsl-blue-1: var(--colour-blue-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-blue-2: var(--colour-blue-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-blue-3: var(--colour-blue-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-blue-4: var(--colour-blue-hue),var(--c-saturation-4),var(--c-lightness-4);
--colour-green-hue: 125;
--hsl-green-1: var(--colour-green-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-green-2: var(--colour-green-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-green-3: var(--colour-green-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-green-4: var(--colour-green-hue),var(--c-saturation-4),var(--c-lightness-4);
--colour-lime-hue: 90;
--hsl-lime-1: var(--colour-lime-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-lime-2: var(--colour-lime-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-lime-3: var(--colour-lime-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-lime-4: var(--colour-lime-hue),var(--c-saturation-4),var(--c-lightness-4);
--colour-orange-hue: 45;
--hsl-orange-1: var(--colour-orange-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-orange-2: var(--colour-orange-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-orange-3: var(--colour-orange-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-orange-4: var(--colour-orange-hue),var(--c-saturation-4),var(--c-lightness-4);
--colour-red-hue: 360;
--hsl-red-1: var(--colour-red-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-red-2: var(--colour-red-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-red-3: var(--colour-red-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-red-4: var(--colour-red-hue),var(--c-saturation-4),var(--c-lightness-4);
--colour-darkorange-hue: 20;
--hsl-darkorange-1: var(--colour-darkorange-hue),var(--c-saturation-1),var(--c-lightness-1);
--hsl-darkorange-2: var(--colour-darkorange-hue),var(--c-saturation-2),var(--c-lightness-2);
--hsl-darkorange-3: var(--colour-darkorange-hue),var(--c-saturation-3),var(--c-lightness-3);
--hsl-darkorange-4: var(--colour-darkorange-hue),var(--c-saturation-4),var(--c-lightness-4)
}
if (style.styleSheet) {
style.styleSheet.cssText = cssCode;
} else {
style.appendChild(document.createTextNode(cssCode));
}
document.head.appendChild(style);`
})();