@charset "UTF-8";


.comfortaa-font {
   font-family: "Comfortaa", sans-serif;
   font-optical-sizing: auto;
   font-weight: 350;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Comfortaa';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap.woff2') format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
 @font-face {
   font-family: 'fontello';
   font-style: normal;
   font-weight: normal;
   src: url('fontello.ttf') format('truetype');
 }
 
 [class^="icon-"]:before,
 [class*=" icon-"]:before {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
 
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   margin-right: .2em;
   text-align: center;
   /* opacity: .8; */
 
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
 
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
 
   /* Animation center compensation - margins should be symmetric */
   /* remove if not needed */
   margin-left: .2em;
 
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
 
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
   /* Uncomment for 3D effect */
   text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
 }
 
 .icon-search:before {
   content: '\e800';
 }
 
 /* '' */
 .icon-heart-empty:before {
   content: '\e801';
 }
 
 /* '' */
 .icon-heart:before {
   content: '\e802';
 }
 
 /* '' */
 .icon-cog:before {
   content: '\e803';
 }
 
 /* '' */
 .icon-star:before {
   content: '\e804';
 }
 
 /* '' */
 .icon-help-circled:before {
   content: '\e805';
 }
 
 /* '' */
 .icon-globe:before {
   content: '\e806';
 }
 
 /* '' */
 .icon-ok:before {
   content: '\e807';
 }
 
 /* '' */
 .icon-download:before {
   content: '\e808';
 }
 
 /* '' */
 .icon-upload:before {
   content: '\e809';
 }
 
 /* '' */
 .icon-cancel:before {
   content: '\e80a';
 }
 
 /* '' */
 .icon-github-circled:before {
   content: '\f09b';
 }
 
 /* '' */
 .icon-download-cloud:before {
   content: '\f0ed';
 }
 
 /* '' */
 .icon-help:before {
   content: '\f128';
 }
 
 /* '' */
 .icon-play-circled:before {
   content: '\f144';
 }
 
 /* '' */
 .icon-trash:before {
   content: '\f1f8';
 }
 
 /* '' */
.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-content {
   display: none;
   top: 45px;
   position: absolute;
   background-color: #282c34;
   min-width: 500px;
   min-height: 500px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   padding: 15px 15px;
   z-index: 1;
   border-radius: 10px;
}

.dropdown:hover .dropdown-content {
   display: block;
}

body {
   background: #282c34;
   color: #d0d5df;
   font-family: "Comfortaa";
   font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   padding: 0px;
   font-weight: normal;
}

a {
   color: #9d7dcc;
}

html,
body {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
}

button {
   background-color: #9d7dcc;
}

canvas {
   display: block;
}

.game-area.showhwmousemedium {
   cursor: url("cursor.cur") 40 40, url("cursorsmall.cur") 30 30, crosshair !important;
}

.game-area.shownomouse {
   cursor: none !important;
}

nav {
   background: #9d7dcc;
   color: #fff;
   display: flex;
   white-space: nowrap;
   padding-right: 1em;
}

nav .brand {
   font-size: 1.1em;
   line-height: 1em;
   padding-left: 1em;
   padding-right: 1em;
   box-sizing: content-box;
   margin-top: 0.515em;
}

.nav-link {
   display: flex;
}

.nav-search {
   width: 100%;
   margin-left: 1.5em;
   margin-right: 1.5em;
}

.nav-tool {
   display: flex;
}

@media screen and (max-device-width: 900px) {
   nav {
      flex-wrap: wrap;
      height: auto;
      padding-right: 9px;
      justify-content: center;
   }

   .nav-tool {
      display: none;
   }

   .nav-link {
      height: 2.6em;
   }

   .nav-search {
      margin: 0;
   }

   .main-page {
      margin-top: 84px !important;
   }

   .statuslines {
      top: 84px !important;
   }

   .difficulty-box {
      left: 40px !important;
   }
}

nav .pseudo.button {
   margin-top: 0.7em;
   height: 2.3em;
   padding: 0 1em;
   border-radius: 0px;
   transition: 0s;
}

nav .pseudo.button.active,
nav .pseudo.button:hover {
   box-shadow: none;
   border-bottom: 3px solid #fff;
}

nav form {
   position: relative;
}

/*fix placeholder color for chrome*/
form input[type="text"]::-webkit-input-placeholder {
   color: #849cac;
}

form input[type="text"] {
   height: 36px;
   margin-top: 4.5px;
   text-align: center;
}

form input {
   transition: none;
}

.search-button {
   position: absolute;
   width: 24px;
   top: 8px;
   right: 8px;
   background: none;
   padding: 0;
}

.main-page {
   margin-top: 40px;
}

.announcement {
   width: 100%;
   border-radius: 4px;
   background: #393b47;
   padding-left: 6px;
   padding-top: 2px;
   padding-bottom: 2px;
   text-align: center;
   margin-bottom: 20px;
}

.index-area table {
   width: 1250px;
   white-space: nowrap;
   table-layout: fixed;
   font-size: 0.9em;
}

thead {
   color: #fff;
}

.index-area thead td {
   font-size: 1.1em;
   padding-top: 0;
}

.index-area td {
   max-width: 400px;
   text-overflow: ellipsis;
   overflow: hidden;
   padding: 0.3em 0.9em 0.3em 0em;
}

.index-area td:nth-child(1) {
   width: 140px;
   max-width: 140px;
}

.index-area td:nth-child(2) {
   width: 300px;
   max-width: 300px;
}

.index-area td:nth-child(3) {
   text-align: center;
   color: #fff;
   width: 70px;
   max-width: 70px;
}

.index-area td:nth-child(4) {
   text-align: center;
   color: #fff;
   width: 100px;
   max-width: 100px;
}

.index-area td:nth-child(5) {
   text-align: center;
   width: 80px;
   max-width: 80px;
}

.index-area td:nth-child(6) {
   text-align: center;
   width: 80px;
   max-width: 80px;
}

.index-area td:nth-child(7) {
   text-align: center;
   width: 50px;
   max-width: 50px;
   padding-right: 0;
}

.index-area td span.SS {
   color: #fff;
   text-shadow: 0px 0px 2px #dd0;
}

.index-area td span.S {
   color: #fff;
   text-shadow: 0px 0px 2px #dd0;
}

.index-area td span.A {
   color: #efe;
   text-shadow: 0px 0px 2px #0b0;
}

.index-area td span.B {
   color: #eef8ff;
   text-shadow: 0px 0px 2px #0bf;
}

.index-area td span.C {
   color: #fef;
   text-shadow: 0px 0px 2px #90f;
}

.index-area td span.D {
   text-shadow: 0px 0px 2px #f00;
}

.index-area td span.F {
   color: #999;
}

.footer {
   margin-bottom: 8px;
   margin-left: 8px;
   margin-right: 8px;
   border-radius: 4px 4px 4px 4px;
   overflow-x: hidden;
   padding: 1.5rem;
   background: #22252c;
   font-size: 15px;
   text-align: center;
}

.footer-info {
   margin: 8px;
}

.main-content {
   border-radius: 4px;
   margin: auto;
   padding-top: 12px;
   width: 1225px;
   height: 100%;
}

@media screen and (max-device-width: 811px) {
   .main-content {
      width: 400px;
   }
}

.index-area {
   position: relative;
   margin-bottom: 1.5em;
}

.index-area .more {
   position: absolute;
   right: 0px;
   top: 10px;
}

/*in-game pause menu*/
.pause-menu {
   color: #ffffff;
   font-size: 1.8em;
   z-index: 10;
   position: fixed;
   top: 0px;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
}

.paused-title {
   color: #f04747;
   padding-top: 60px;
   text-align: center;
   letter-spacing: 0.16em;
   position: absolute;
   width: 100%;
   top: calc(50% - 9.5em);
}

.button-list {
   font-style: italic;
   margin-left: auto;
   margin-right: auto;
   position: absolute;
   width: 100%;
   top: calc(50% - 3.75em);
   /*shadow*/
   box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.6);
   width: 120%;
   left: -10%;
   background: rgba(0, 0, 0, 0.3);
}

.pausebutton {
   margin-left: auto;
   margin-right: auto;
   width: 66%;
   height: 2.5em;
   text-align: center;
   transform: skewX(-12deg);
   letter-spacing: 0em;
   transition: 0.1s ease-out all;
   overflow: hidden;
   cursor: pointer;
}

.pausebutton:hover {
   letter-spacing: 0.1em;
   width: 75%;
}

.pausebutton .inner {
   transform: skewX(19deg);
   padding-top: 0.4em;
   text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.pausebutton.continue {
   background: #43b581;
}

.pausebutton.retry {
   background: #faa61a;
}

.pausebutton.quit {
   background: #f04747;
}

/*in-game grading menu*/
.grading {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   font-size: 1.2rem;
}

.grading > * {
   transition: 0.4s ease opacity;
}

.grading.transparent > * {
   opacity: 0;
}

.grading .top {
   background: rgba(0, 0, 0, 0.7);
   width: 100%;
   height: 115px;
}

.grading .ranking {
   position: absolute;
   top: 35px;
   right: 160px;
   font-size: 3em;
}

.grading .beatmap-info {
   color: #fff;
   position: absolute;
   top: 0px;
   left: 120px;
}

.grading .beatmap-info .title {
   font-style: italic;
   font-size: 2em;
   line-height: 1.2em;
}

.grading .beatmap-info .artist {
   font-style: italic;
}

.grading .beatmap-info .version {
   font-size: 1.4em;
   line-height: 1.2em;
   font-weight: bold;
   display: inline-block;
}

.grading .beatmap-info .mapper {
   display: inline-block;
   padding-left: 0.5em;
   padding-right: 0.5em;
}

.grading .grade {
   position: absolute;
   top: 210px;
   right: 180px;
   font-style: italic;
   font-size: 20em;
   line-height: 0.6em;
   letter-spacing: -0.08em;
}

.grading .grade.SS {
   text-shadow: 0px 0px 40px #ff3;
   right: 110px;
}

.grading .grade.S {
   text-shadow: 0px 0px 40px #ff3;
}

.grading .grade.A {
   text-shadow: 0px 0px 40px #0f0;
}

.grading .grade.B {
   text-shadow: 0px 0px 40px #3bf;
}

.grading .grade.C {
   text-shadow: 0px 0px 40px #90f;
}

.grading .grade.D {
   text-shadow: 0px 0px 40px #f00;
}

.grading .grade.F {
   color: #000;
   text-shadow: 0px 0px 40px #fff;
}

.grading .left {
   font-size: 1.2em;
   position: absolute;
   top: 130px;
   left: 120px;
   width: 500px;
   padding-top: 20px;
   padding-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
}

.grading .block {
   position: relative;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
   color: #fff;
   font-size: 1.6em;
   text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.3);
   line-height: 1em;
   padding-top: 1.4em;
   padding-right: 0.2em;
   text-align: right;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
}

.grading .block:before {
   position: absolute;
   top: 0px;
   left: 4px;
   color: rgba(0, 0, 0, 0.3);
   text-shadow: none;
}

.block.score {
   background: #6b00c6;
   width: 500px;
   text-align: right;
   padding-top: 0em;
   line-height: 90px;
   padding-right: 20px;
   height: 100px;
   font-size: 3em;
   text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.3);
}

.block.score:before {
   content: "Score";
   position: absolute;
}

.block.acc {
   background: #abbc38;
   width: 50%;
   font-size: 1.8em;
   padding-top: 1.2em;
}

.block.acc:before {
   content: "Accuracy";
}

.block.err {
   background: #4299a4;
   width: 50%;
   font-size: 1.8em;
   padding-top: 1.2em;
}

.block.err:before {
   content: "Hit Error";
}

.block.great {
   background: #4293ff;
   width: 25%;
}

.block.great:before {
   content: "Great";
}

.block.good {
   background: #597a00;
   width: 25%;
}

.block.good:before {
   content: "Good";
}

.block.meh {
   background: #e68412;
   width: 25%;
}

.block.meh:before {
   content: "Meh";
}

.block.miss {
   background: #c40b15;
   width: 25%;
}

.block.miss:before {
   content: "Miss";
}

.block.placeholder {
   width: 50%;
   box-shadow: none;
}

.block.combo {
   background: #a64d99;
   width: 50%;
   font-size: 2.2em;
   padding-top: 0.85em;
}

.block.combo:before {
   font-size: 0.7em;
   line-height: 1em;
   content: "Max Combo";
}

.block.player {
   background: #a64d99;
   width: 100%;
   bottom: auto;
   font-size: 200%;
   padding-top: 1em;
}

.block.player:before {
   line-height: 1em;
   content: "Player";
}

.grading .left .history-best {
   position: absolute;
   top: -14px;
   right: 0;
   background: rgba(0, 0, 0, 0.6);
   padding-left: 0.3em;
   padding-right: 0.3em;
   border-radius: 0.3em 0.3em 0 0;
   color: #8df;
}

.grading .left .history-best:before {
   content: "History Best: ";
}

.grading .fullcombo:before {
   position: absolute;
   content: "FC";
   font-size: 2em;
   font-style: italic;
   color: #ff969c;
   border: 5px #ff969c solid;
   border-radius: 12px;
   white-space: nowrap;
   line-height: 1.1em;
   padding-left: 0.2em;
   padding-right: 0.3em;
   bottom: 35px;
   right: 400px;
   text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.3);
   box-shadow: 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.grading .btn {
   position: absolute;
   bottom: 0px;
   font-size: 1.8em;
   width: 240px;
   height: 2.5em;
   text-align: center;
   font-weight: bold;
   transition: 0.1s ease-out all;
   cursor: pointer;
   transform: skewX(-12deg);
}

.grading .btn:hover {
   letter-spacing: 0.06em;
   width: 270px;
}

.grading .btn .inner {
   padding-top: 0.4em;
   text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.2);
   transform: skewX(12deg);
}

.grading .btn.retry {
   right: -10px;
   background: #43b581;
}

.grading .btn.quit {
   left: -10px;
   background: #f04747;
}

/*genre*/
.sort-nav {
   cursor: default;
}

.sort-nav .title {
   display: inline-block;
   height: 2em;
   padding-right: 1em;
   color: #fff;
}

.sort-nav .selitem {
   display: inline-block;
   height: 2em;
   line-height: 2em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   color: #a7aebd;
   cursor: pointer;
   transition: 0.2s ease all;
}

.sort-nav .selitem:hover {
   text-decoration: underline;
}

.sort-nav .selitem.active {
   color: #fff;
}

.side-panel {
   background: #333;
   position: fixed;
   float: right;
   width: calc(100% - 800px - 36px);
   top: 0px;
   right: 0px;
   padding-top: 48px;
   height: 100%;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.side-panel .imgwrapper {
   width: 100%;
   padding-bottom: 50%;
   position: relative;
   overflow: hidden;
}

.side-panel img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   overflow: hidden;
}

.side-panel .imgwrapper .overlay {
   width: 100%;
   background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.7)
   );
   height: 100%;
   position: absolute;
}

.side-panel .imgwrapper .overlaytext {
   position: absolute;
   font-style: italic;
   color: #fff;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.side-panel .imgwrapper .title {
   font-size: 2em;
   padding-left: 12px;
   bottom: 30px;
}

.side-panel .imgwrapper .artists {
   font-size: 1em;
   padding-left: 12px;
   bottom: 10px;
}

.side-panel .imgwrapper .length {
   font-size: 1em;
   bottom: 10px;
   right: 15px;
}

.side-panel .textwrapper {
   padding-left: 12px;
   padding-top: 12px;
}

.panel table h3 {
   margin-top: 1em;
   margin-bottom: 0.5em;
   color: #9d7dcc;
   font-size: 1.3em;
}

.disabled {
   color: #555;
}

.panel {
   background: #292929;
   border-radius: 5px;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
   margin: 12px auto;
   padding: 15px;
   width: 410px;
   height: 100%;
}

h1,
h2,
h3 {
   color: #fff;
}

.progress {
   line-height: 1.8em;
}

.statuslines {
   font-size: 0.8em;
   position: fixed;
   left: 0px;
   top: 48px;
   background: rgba(0, 0, 0, 0.5);
   padding: 12px;
   padding-right: 12px;
   width: 152px;
   text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
   border-radius: 0px 4px 4px 0px;
}

.download-progress {
   line-height: 1.8em;
}

.download-progress .title {
   margin-bottom: -1em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

progress {
   background: #333;
   background-color: #333;
   border-style: none;
   height: 3px;
}

progress::-webkit-progress-bar {
   background: #333;
}

progress::-moz-progress-bar {
   background: #39af3c;
}

progress::-webkit-progress-value {
   background: #9d7dcc;
}

progress.finished::-moz-progress-bar {
   background: #9d7dcc;
}

progress.finished::-webkit-progress-value {
   background: #39af3c;
}

.text {
   line-height: 1.8em;
}

/* Beatmap Box/List */
.beatmap-list {
   margin-top: 20px;
   margin-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
   margin-right: -17px;
   position: relative;
}

.dragbox {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   background: #eee;
   color: #666;
   border-radius: 6px;
   font-size: 18px;
   height: 200px;
   width: 245px;
   margin-bottom: 20px;
   margin-right: 17px;
}

.dragbox-inner {
   width: 80%;
   margin-left: 10%;
   margin-top: 16%;
   line-height: 1.5em;
}

.beatmapbox {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   background: #21252b;
   font-size: 18px;
   height: 190px;
   width: 400px;
   margin-bottom: 12px;
   margin-right: 12px;
   position: relative;
   cursor: pointer;
   border-radius: 4px;
}

.beatmapbox:hover {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.7);
}

.beatmapcover {
   object-fit: cover;
   background: #555;
   color: gray;
   width: 100%;
   height: 130px;
   position: absolute;
   border-radius: 4px 4px 0 0;
}

.beatmappreview {
   position: absolute;
   fill: rgb(221, 221, 221);
   margin-left: 365px;
   margin-top: 10px;
   width: 24px;
}

.beatmappreview:before {
   content: "\f144";
}

.beatmapcover-overlay {
   background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.7)
   );
   width: 100%;
   height: 130px;
   position: absolute;
}

.beatmaptitle {
   width: 400px;
   top: 73px;
   left: 10px;
   right: 10px;
   font-size: 1.3em;
   font-style: italic;
   color: rgb(221, 221, 221);
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.beatmapartist {
   width: 400px;
   top: 102px;
   left: 10px;
   right: 10px;
   font-size: 0.8em;
   font-style: italic;
   color: rgb(221, 221, 221);
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.beatmapcreator {
   top: 134px;
   left: 10px;
   color: #b0b7c3;
   font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 400px;
   position: absolute;
}

.beatmapapproved {
   position: absolute;
   top: 5px;
   left: 5px;
   background: rgba(0, 0, 0, 0.5);
   font-weight: bold;
   font-size: 11px;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
   border-radius: 12px;
   padding: 4px 8px 2px 8px;
}

.beatmapsid {
   position: absolute;
   top: 5px;
   right: 5px;
   background: rgba(0, 0, 0, 0.5);
   font-weight: bold;
   font-size: 11px;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
   border-radius: 12px;
   padding: 4px 8px 2px 8px;
}

.beatmapauthor {
   top: 103px;
   left: 10px;
   color: #b0b7c3;
   font-size: 14px;
   padding-top: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 400px;
   position: absolute;
}

.beatmapbpm {
   right: 10px;
   position: absolute;
   float: right;
   font-style: italic;
   color: #b0b7c3;
   font-size: 0.8em;
   bottom: 60px;
}

.beatmaplength {
   top: 130px;
   right: 10px;
   color: #b0b7c3;
   font-size: 0.8em;
   font-style: italic;
   float: right;
   white-space: nowrap;
   position: absolute;
}

.beatmap-difficulties {
   position: absolute;
   top: 160px;
   left: 10px;
}

.beatmaplike {
   position: absolute;
   bottom: 2px;
   right: 10px;
   font-size: 1.4em;
}

.beatmaplike.icon-heart-empty {
   color: #5c617c;
}

.beatmaplike.icon-heart {
   color: #f04747;
}

.beatmaplike.hint-liked::after {
   content: "Liked!";
   white-space: nowrap;
   position: absolute;
   bottom: 30px;
   right: -8px;
   color: white;
   background: rgba(0, 0, 0, 0.8);
   font-size: 0.6em;
   padding-left: 0.25em;
   padding-right: 0.25em;
   border-radius: 0.3em;
   opacity: 0;
   animation-name: fadeoutmy;
   animation-duration: 0.8s;
   animation-timing-function: ease-in;
}

@keyframes fadeoutmy {
   0% {
      opacity: 1;
   }

   70% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

/* Settings Page */
.panel table {
   width: 100%;
}

.panel tr {
   height: 2.7em;
   position: relative;
   transform: scale(1);
}

.panel tr:last-child {
   text-align: center;
}

.panel tr:nth-child(even) {
   background: none;
}

.panel tr.non-default:after {
   content: " ";
   position: absolute;
   height: 80%;
   width: 4px;
   top: 10%;
   left: -1px;
   background: rgba(255, 190, 0, 0.8);
   border-radius: 4px;
}

.panel td {
   /*border-bottom:1px solid #f6f6f6;*/
   padding: 5px 10px;
}

.panel td:nth-child(2) {
   text-align: right;
   width: 40px;
}

input {
   background: #46406b;
   color: rgb(255, 255, 255);
   border: none;
}

input:focus {
   border-color: #fff;
}

input:focus {
   outline: 0;
}

input[type="username"] {
   width: 145px;
   margin: 6px 2px;
   text-align: center;
}

input[type="checkbox"] {
   cursor: pointer;
   height: 20px;
   margin: 2px 2px;
   position: absolute;
   opacity: 0;
   width: 40px;
   z-index: 2;
}

input[type="checkbox"] + span {
   background: rgb(85, 85, 85);
   border-radius: 10px;
   display: inline-block;
   height: 20px;
   margin: 2px 2px;
   position: relative;
   width: 40px;
   transition: all 0.2s ease;
}

input[type="checkbox"] + span::before,
input[type="checkbox"] + span::after {
   background: #eee;
   content: "";
   display: block;
   position: absolute;
   height: 16px;
   top: 2px;
   border-radius: 50%;
   transition: all 0.2s ease;
}

input[type="checkbox"] + span::after {
   right: 22px;
   width: 16px;
}

input[type="checkbox"]:checked + span {
   background: #9d7dcc;
}

input[type="checkbox"]:checked + span::after {
   right: 2px;
   width: 16px;
}

.option-name {
   float: left;
}

.option-control {
   float: right;
   position: relative;
}

.slider {
   width: 180px;
}

.range-indicator {
   position: absolute;
   background: #111;
   padding-left: 8px;
   padding-right: 8px;
   height: 30px;
   text-align: center;
   color: white;
   border-radius: 5px;
   display: inline-block;
   line-height: 2em;
   bottom: 150%;
   left: 0px;
   opacity: 0.8;
   margin-left: -1%;
   transform: translateX(-50%);
}

.range-indicator:after {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 10px solid #111;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   margin-top: -1px;
}

input[type="button"] {
   cursor: pointer;
   position: relative;
   width: auto;
   transition: all 0.2s ease;
   color: #eee;
   font-size: 16px;
   line-height: 17px;
   height: 24px;
   margin-left: 5px;
   /*padding-left: 12px;*/
   /*padding-right: 12px;*/
   min-width: 70px;
   background: #555;
   border: none;
}

input[type="button"]:hover {
   background: #999;
   color: #fff;
}

input[type="button"].using {
   background: #9d7dcc;
   color: #fff;
}

input[type="button"].warnbtn {
   background: #191919;
   border-radius: 4px;
   cursor: pointer;
   display: inline-block;
   color: #eee;
   font-size: 16px;
   text-align: center;
   padding: 12px 20px 14px;
   height: auto;
}

input[type="button"].warnbtn:hover {
   background: #a11;
   color: #fff;
}

input[type="range"] {
   cursor: pointer;
   height: 1em;
   background: none;
   padding-left: 0;
   padding-right: 0;
}

input[type="range"]:focus {
   border-style: none;
}

input[type="range"]::-moz-range-thumb {
   border-style: none;
   width: 10px;
}

input[type="range"]::-moz-range-progress {
   background-color: #9d7dcc;
}

input[type="range"]::-moz-range-track {
   background-color: #888;
}

input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border-style: none;
   width: 10px;
   height: 18px;
   border-radius: 5px;
   background: #ddd;
   cursor: pointer;
   margin-top: -8px;
}

input[type="range"]::-webkit-slider-thumb:after {
   content: " ";
   display: block;
   width: 8em;
   height: 8em;
   background-color: #fff;
   /*box-shadow: -100px 0 0 100px #43e5f7;*/
}

input[type="file"] {
   white-space: nowrap !important;
   overflow: hidden !important;
   color: unset;
   appearance: none;
   cursor: pointer;
   border: none;
   background-color: #46406b;
}

input[type="file"] > label {
   display: inline-block;
   min-inline-size: 12em;
   text-align: match-parent;
   color: unset;
   font-size: unset;
   letter-spacing: unset;
   user-select: none;
   unicode-bidi: plaintext;
}

::file-selector-button {
   text-align: initial;
   text-indent: initial;
   text-transform: initial;
   word-spacing: initial;
   letter-spacing: initial;
   color: #d0d5df;
   font-family: "Comfortaa";
   font-size: 12px;
   border-radius: 5px;
   background-color: #ffffff00;
}

::-webkit-slider-runnable-track {
   width: 100%;
   height: 3px;
   cursor: pointer;
   border-radius: 1.3px;
}

::-webkit-scrollbar {
   width: 12px;
}

::-webkit-scrollbar-track {
   border-radius: 5px;
   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
   background-color: #9d7dcc;
}

::-webkit-scrollbar-thumb:hover {
   background-color: #ac8adf;
}

hr {
   height: 2.5px;
   margin-bottom: 12px;
   border: none;
   background: #9d7dcc;
   border-radius: 9px 9px 9px 9px;
}

div[hidden=""] {
   visibility: hidden;
}

/* Difficulty Area */
.difficulty-box {
   width: auto;
   min-width: 360px;
   height: auto;
   position: absolute;
   z-index: 2;
   animation: 0.4s unfold ease;
   transform-origin: top left;
}

@keyframes unfold {
   0% {
      transform: scaleY(0);
   }

   100% {
      transform: scaleY(1);
   }
}

.difficulty-item {
   background: #2c2c34;
   box-shadow: 2px 2px 5px #000;
   border-radius: 8px;
   margin-bottom: 6px;
   padding: 12px;
   height: 50px;
   color: #8291a0;
   white-space: nowrap;
   font-size: 16px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

body:not(.script-ready) .difficulty-item {
   cursor: wait;
}

body:not(.skin-ready) .difficulty-item {
   cursor: wait;
}

body:not(.sound-ready) .difficulty-item {
   cursor: wait;
}

.beatmapbox.downloading .difficulty-item {
   cursor: wait;
}

/* Difficulty Colors */
.difficulty-item span {
   top: -5px;
   left: 4px;
   position: relative;
}

.difficulty-item:hover {
   background: #1e404d;
}

.difficulty-item .versionline {
   position: absolute;
   top: 3px;
   left: 50px;
}

.difficulty-item .version {
   font-size: 1.1em;
   display: inline-block;
}

.difficulty-item .mapper {
   padding-left: 0.5em;
   font-size: 0.8em;
   display: inline-block;
}

.star-row {
   position: absolute;
   top: 28px;
   left: 49px;
}

.star-row .imgcontainer {
   height: 18px;
   width: 18px;
   margin-right: 2px;
   display: inline-block;
}

.star-row img {
   width: 18px;
   position: relative;
}

.difficulty-ring {
   height: 18px;
   width: 18px;
   border-radius: 50%;
   border: solid #aaa 3px;
   margin-top: 2px;
   margin-left: 0px;
   margin-right: 6px;
   display: inline-block;
}

.difficulty-count {
   color: #a7aebd;
   line-height: 18px;
   font-size: 0.8em;
   position: relative;
   font-weight: bold;
   bottom: 4px;
}

.difficulty-ring.easy {
   border-color: #88b300;
}

.difficulty-ring.normal {
   border-color: #6cf;
}

.difficulty-ring.hard {
   border-color: #fc2;
}

.difficulty-ring.insane {
   border-color: #f6a;
}

.difficulty-ring.expert {
   border-color: #86e;
}

.difficulty-ring.expert-plus {
   border-color: #000;
}

.bigringbase {
   position: absolute;
   width: 40px;
   height: 40px;
   top: 5px;
   left: 5px;
   border-radius: 50%;
   background: #fff;
}

.bigring {
   position: absolute;
   width: 34px;
   height: 34px;
   top: 8px;
   left: 8px;
   border-radius: 50%;
   border: solid #aaa 4px;
   background: #fff;
}

.bigring.easy {
   border-color: #88b300;
}

.bigring.normal {
   border-color: #6cf;
}

.bigring.hard {
   border-color: #fc2;
}

.bigring.insane {
   border-color: #f6a;
}

.bigring.expert {
   border-color: #86e;
}

.bigring.expert-plus {
   border-color: #000;
}

/* loading status lines */
/* loader */
@keyframes lds-dual-ring {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

.lds-dual-ring {
   display: inline-block;
   width: 1em;
   height: 1em;
}

.lds-dual-ring:after {
   content: "";
   display: block;
   width: 0.8em;
   height: 0.8em;
   margin-top: 0.1em;
   margin-left: 0.2em;
   border-radius: 50%;
   border: 2.5px solid #9d7dcc;
   border-color: #9d7dcc #9d7dcc #9d7dcc transparent;
   animation: lds-dual-ring 1.2s linear infinite;
}

.finished .lds-dual-ring:after {
   border: none;
   content: "✔";
   color: #88b300;
   line-height: 0.8em;
   animation: none;
}