您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
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);` })();