/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./resources/assets/css/legacy/themes/dark.scss ***!
  \***************************************************************************************************************************************/
@charset "UTF-8";
/*
Format themes like so:
Name
Brief Description
Creator

Default Theme
This is the default theme 'nuff said
~Mikuchan03 owo
*/
/********
    Colors
********/
/*
Schema:
    color: font color
    background: background color
    border: border-color
*/
/********
    Other
********/
.flex-container, .fp {
  display: flex;
}
.flex-container.flex-column, .fp.flex-column {
  flex-direction: column;
}
.flex-container .flex-child, .flex-container .fc, .fp .flex-child, .fp .fc {
  flex: 1;
}
.flex-container .flex-child.center-self, .flex-container .fc.center-self, .fp .flex-child.center-self, .fp .fc.center-self {
  align-self: center;
}
.flex-container.content-center, .fp.content-center {
  justify-content: center;
}
.flex-container .flex-card, .fp .flex-card {
  display: flex;
  flex: 1;
}
.flex-container .flex-card.content, .fp .flex-card.content {
  flex: 1;
}

.overflow-auto {
  overflow: auto;
}

.block {
  display: block;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.circle {
  border-radius: 50%;
}

.unselectable {
  user-select: none;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.no-right-rad,
div.no-right-rad,
label.no-right-rad {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.no-rad,
div.no-rad,
label.no-rad {
  border-radius: 0;
}

.no-left-rad,
div.no-left-rad,
label.no-left-rad {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.absolute {
  position: absolute;
}
.absolute.right {
  right: 0;
}
.absolute.left {
  left: 0;
}
.absolute.top {
  top: 0;
}
.absolute.bottom {
  bottom: 0;
}

.f-right {
  float: right;
}

.f-left {
  float: left;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100vh;
}

li:not(.normal) {
  list-style: none;
}

ol:not(.normal), ul:not(.normal) {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

button, input, textarea, option, select {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

button {
  font-weight: inherit;
}

button:focus, select:focus {
  outline: none;
}

@font-face {
  font-family: poppins;
  font-weight: 500;
  src: url(/dist/css/font/08491d3f7fe7ae88ef44.woff2);
}
@font-face {
  font-family: poppins;
  font-weight: 600;
  src: url(/dist/css/font/91145014c0350c248ed2.woff2) format("woff2"), url(/dist/css/font/ac8d04b620e54be9b0f0.ttf) format("ttf");
}
@font-face {
  font-family: poppins;
  font-weight: 700;
  src: url(/dist/css/font/d86662fe776dae29ea78.woff2) format("woff2"), url(/dist/css/font/cdb29a5d7ccf57ff05a3.ttf) format("ttf");
}
body {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: #fff;
  background-color: #131313;
}

nav {
  width: 100%;
  overflow: auto;
  margin-bottom: 20px;
  z-index: 2;
}
nav div.primary {
  overflow: auto;
  background-color: #181818;
  color: rgb(255, 255, 255);
  font-size: 1.1em;
  padding-top: 6px;
}
nav div.primary ul li a:hover {
  border-color: red;
  border-color: #fff;
}
nav div.secondary {
  overflow: auto;
  background-color: #161616;
  color: #d6e5ee;
  font-size: 0.9em;
  padding-top: 0px;
}
nav div.secondary ul li a:hover {
  border-color: red;
  border-color: #d6e5ee;
}
nav .info {
  border-radius: 8px;
  padding: 5px 10px;
  background-color: #181818;
  display: inline-block;
}
nav .info a {
  font-size: 0.8em;
  display: inline-block;
  padding: 0px 10px 0px 10px;
}
nav .push-left, nav .push-right {
  display: inline-block;
}
nav .push-left {
  vertical-align: top;
}
nav .push-right {
  vertical-align: bottom;
}
nav .username {
  margin: 5px 0 0 15px;
  float: right;
  cursor: pointer;
}
nav .username .username-holder {
  max-width: 125px;
}
nav .username i {
  vertical-align: text-top;
  margin-left: 4px;
}

@media handheld, only screen and (max-width: 767px) {
  nav {
    text-align: center;
  }
  nav .grid {
    padding-left: 10px;
  }
  nav .nav-user {
    text-align: center;
    float: none;
  }
  nav .username {
    float: none;
    margin-bottom: 5px;
  }
  nav .username.login-buttons {
    margin-bottom: 10px;
  }
}
nav div ul {
  overflow: auto;
  list-style: none;
}

nav div ul li {
  display: inline-block;
  padding: 0 1px;
}
nav div ul li a {
  display: inline-block;
  padding: 8px 5px;
  border-bottom: 2px solid transparent;
}

.login-button {
  background: #3ADE55;
  background: linear-gradient(0deg, #30B747 0%, #3ADE55 100%);
  color: #FFF;
  padding: 6px 25px;
  border-radius: 8px;
  text-transform: uppercase;
  transition: background-color 50ms linear;
}

.login-button:hover {
  background-color: #2fb621;
}

.register-button {
  background: #00A9FE;
  background: linear-gradient(0deg, #007CDC 0%, #00A9FE 100%);
  color: #FFF;
  padding: 6px 25px;
  border-radius: 8px;
  text-transform: uppercase;
  transition: background-color 50ms linear;
}

.register-button:hover {
  background-color: #00BCD4;
}

.notif,
.nav-notif {
  margin-top: -4px;
  float: right;
  background-color: #c61400;
  padding: 2px 4px;
  color: #fff;
  font-size: 0.6em;
  font-weight: 600;
  border-radius: 10px;
}

.side-ad {
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  position: absolute;
  display: none;
}

@media only screen and (min-width: 1500px) {
  .side-ad {
    display: block;
  }
}
@media only screen and (max-width: 1800px) {
  .side-ad {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.card {
  border-radius: 10px;
  overflow: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.card .top:not(.absolute) {
  overflow: auto;
  padding: 10px;
  font-weight: 700;
  border-bottom: 1.5px solid;
  color: #fff;
  background-color: #3b3c40;
  border-color: #2d2e31;
}
.card .top:not(.absolute).green {
  color: #54a84a;
  background-color: #0a5812;
  border-color: #54a84a;
}
.card .top:not(.absolute).blue {
  color: #869eff;
  background-color: #134b7b;
  border-color: #869eff;
}
.card .top:not(.absolute).red {
  color: #ff8686;
  background-color: #9f1212;
  border-color: #ff6161;
}
.card .top:not(.absolute).orange {
  color: #e5c765;
  background-color: #9f7e12;
  border-color: #e5c765;
}
.card .content {
  height: inherit;
  overflow: auto;
  padding: 10px;
  background-color: #191919;
}
.card .border {
  border: 1px solid #DCDCDC;
}
.card .name {
  overflow: hidden;
  color: #d2d2d2;
  font-weight: 600;
  display: inline-block;
}
.card .creator {
  overflow: hidden;
  color: #dfdfdf;
  font-size: 0.9em;
}
.card .thumbnail {
  padding: 20px;
  text-align: center;
  background-color: #233036;
}
.card .thumbnail.no-padding {
  padding: 0px;
}
.card .thumbnail img {
  height: 100%;
  width: 100%;
  display: block;
}
.card .thumbnail.dark {
  background-color: #2d2e31;
}
.card .footer {
  border-top: 1px solid #212121;
  padding: 10px;
  background-color: #2f2f2f;
}
.card .footer .playing {
  text-align: right;
  color: #af1111;
  font-weight: 600;
}
.card:not(.no-margin) {
  margin-bottom: 10px;
}

.label {
  font-size: 0.9em;
  font-weight: 500;
  color: #e6e6e6;
}
.label.dark {
  color: #d2d2d2;
}
.label.dark-grey {
  color: #c4c4c4;
}
.label.black {
  color: #fff;
}
.label.small {
  font-size: 0.8em;
}

button:not(.plain), .button:not(.plain) {
  text-align: center;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  background-color: #d0d0d0;
  border-color: #adadad;
}
button:not(.plain):not([disabled]).blue, .button:not(.plain):not([disabled]).blue {
  color: #fff;
  background-color: #134b7b;
  border-color: #869eff;
}
button:not(.plain):not([disabled]).green, .button:not(.plain):not([disabled]).green {
  color: #fff;
  background-color: #0a5812;
  border-color: #54a84a;
}
button:not(.plain):not([disabled]).red, .button:not(.plain):not([disabled]).red {
  color: #fff;
  background-color: #9f1212;
  border-color: #ff6161;
}
button:not(.plain):not([disabled]).orange, .button:not(.plain):not([disabled]).orange {
  color: #fff;
  background-color: #9f7e12;
  border-color: #e5c765;
}
button:not(.plain):not([disabled]).hgreen, .button:not(.plain):not([disabled]).hgreen {
  color: #54a84a;
  background-color: #0a5812;
  border-color: #54a84a;
}
button:not(.plain):not([disabled]).hblue, .button:not(.plain):not([disabled]).hblue {
  color: #869eff;
  background-color: #134b7b;
  border-color: #869eff;
}
button:not(.plain):not([disabled]).hred, .button:not(.plain):not([disabled]).hred {
  color: #ff8686;
  background-color: #9f1212;
  border-color: #ff6161;
}
button:not(.plain):not([disabled]).horange, .button:not(.plain):not([disabled]).horange {
  color: #e5c765;
  background-color: #9f7e12;
  border-color: #e5c765;
}
button:not(.plain):not([disabled]).bits, .button:not(.plain):not([disabled]).bits {
  color: #fff;
  background-color: #F49B00;
  border-color: #F49B00;
}
button:not(.plain):not([disabled]).bucks, .button:not(.plain):not([disabled]).bucks {
  color: #fff;
  background-color: #009624;
  border-color: #009624;
}
button:not(.plain):not([disabled]).free, .button:not(.plain):not([disabled]).free {
  color: #fff;
  background-color: #6fb6db;
  border-color: #419dda;
}
button[disabled], .button[disabled] {
  cursor: not-allowed !important;
}
button.plain, .button.plain {
  border: 0;
  font-size: 1em;
  padding: 0;
}
button.no-click, button.no-click[disabled], .button.no-click, .button.no-click[disabled] {
  cursor: default;
  color: #fff;
  background-color: #d0d0d0;
  border-color: #adadad;
}
button:hover, .button:hover {
  cursor: pointer;
}
button.no-cap, .button.no-cap {
  text-transform: inherit;
}
button.flat, .button.flat {
  border-color: transparent;
}
button.small, .button.small {
  padding: 5px 10px;
}
button.purchase, .button.purchase {
  font-size: 15px;
  min-width: 100px;
}
button.tab-button, .button.tab-button {
  font-weight: 600;
  font-size: 17px;
}
button.tab-button.transparent, .button.tab-button.transparent {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #fff;
}
button.tab-button.transparent:hover, .button.tab-button.transparent:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.tab-buttons {
  margin-bottom: 10px;
}

input, textarea {
  padding: 4px;
  color: #fff;
  border-radius: 10px;
  background-color: #181818;
  border: 1px solid #232121;
}
input.rigid, textarea.rigid {
  border-radius: 8px;
  color: #181818;
  padding: 10px;
  background-color: #2f2c2c;
  border: 1px solid #232121;
}
input::placeholder, textarea::placeholder {
  font-weight: 600;
  color: #a8a8a8;
}
input:focus, textarea:focus {
  outline: none;
}

.input-group {
  display: inline-flex;
  margin-bottom: 4px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid #232121;
}
.input-group.fill {
  display: flex;
  align-items: stretch;
}
.input-group.fill .input-button {
  flex: 0;
}
.input-group.fill input, .input-group.fill textarea, .input-group.fill .input {
  flex: 1;
}
.input-group.rigid {
  border-radius: 8px;
  color: #181818;
  padding: 10px;
  background-color: #2f2c2c;
  color: #fff;
  border: 1px solid #232121;
}
.input-group input, .input-group textarea, .input-group .input-button {
  flex: 1;
  border-radius: 0;
  border: none;
}
.input-group .input-button {
  border-left: 1px solid #869eff;
  color: #fff;
  background-color: #134b7b;
  padding: 4px 15px;
  font-size: 13.3px;
  font-weight: 600;
}
.input-group .input-button:hover {
  cursor: pointer;
}

.width-100 {
  display: block;
  width: 100%;
}

.margin-5 {
  margin-bottom: 5px;
}

.select, select {
  background: rgba(0, 0, 0, 0);
  border-color: #333;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  padding: 8px;
  color: #fff;
}
.select option, select option {
  color: #ffffff;
  background-color: #242426;
}
.select.small-padding, select.small-padding {
  padding: 0 8px;
}

.bits-text {
  color: #F49B00;
}

.bucks-text {
  color: #009624;
}

.free-text {
  color: #0F7BFF;
}

.offsale-text {
  color: #cacaca;
}

.red-text {
  color: #ce1b1b;
}

.blue-text {
  color: #196fb5;
}

.green-text {
  color: #2fb621;
}

.orange-text {
  color: #cebc18;
}

.yellow-text {
  color: #c1e90f;
}

.white-text {
  color: #fff;
}

.light-gray-text {
  color: #9E9E9E;
}

.gray-text {
  color: #d2d2d2;
}

.agray-text {
  color: #dfdfdf;
}

.dark-gray-text {
  color: #c4c4c4;
}

.darkest-gray-text {
  color: #d4d4d4;
}

.ablack-text {
  color: #d2d2d2;
}

.select-color-text {
  color: #fff;
}

.black-text {
  color: #fff;
}

.favorite-text {
  color: #fcc100;
}

.large-text {
  font-size: 2em;
}

.medium-text {
  font-size: 1.5rem;
}

.smedium-text {
  font-size: 1.2rem;
}

.normal-text {
  font-size: 1rem;
}

.small-text {
  font-size: 0.9rem;
}

.smaller-text {
  font-size: 0.8rem;
}

b {
  font-weight: 600;
}

.bold {
  font-weight: 600;
}

.very-bold {
  font-weight: 700;
}

.cap-text {
  text-transform: uppercase;
}

.center-text, .text-center {
  text-align: center;
}

.pointer,
.hover-cursor:hover {
  cursor: pointer;
}

hr, .line {
  border: 0;
  height: 0;
  border-top: 1px solid #303133;
  border-bottom: 1px solid #303133;
}

.alert {
  margin-bottom: 10px;
  border-radius: 10px;
  text-align: center;
  padding: 10px;
  color: #fff;
}
.alert.success {
  background-color: #23d160;
}
.alert.error {
  background-color: #ef263d;
}
.alert.warning {
  background-color: #ef9526;
}

.blockquote, blockquote {
  word-wrap: break-word;
  padding: 3px 0px 3px 3px;
  border-left: 4px solid #eee;
  margin-left: 0;
}
.blockquote.red, blockquote.red {
  border-color: #af1111;
}
.blockquote.green, blockquote.green {
  border-color: #1d6918;
}
.blockquote.blue, blockquote.blue {
  border-color: #1c4788;
}
.blockquote.dodgerblue, blockquote.dodgerblue {
  border-color: #869eff;
}
.blockquote.orange, blockquote.orange {
  border-color: #cebc18;
}
.blockquote.yellow, blockquote.yellow {
  border-color: #e9ce0f;
}

.tabs {
  margin-bottom: 10px;
}
.tabs .tab {
  text-align: center;
  color: #fff;
  border-radius: 10px 10px 0px 0px;
  padding: 10px;
  background-color: #191919;
  border: 1px solid;
  border-color: #2f3033;
  font-size: 1.1rem;
}
.tabs .tab.active {
  background-color: #252525;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.tabs .tab:hover {
  cursor: pointer;
}
.tabs .tab-body {
  min-width: 100%;
  overflow: auto;
  padding: 10px;
  border: 1px solid #2f3033;
  border-top: 0px;
  border-radius: 0px 0px 10px 10px;
  background-color: #191919;
}
.tabs .tab-body:not(.active) {
  display: none;
}

.button-tabs .button-tab:not(.active) {
  display: none;
}

.vertical-tab {
  border-radius: 10px;
  list-style: none;
  overflow: hidden;
}
.vertical-tab li, .vertical-tab .tab {
  border-left: 4px solid transparent;
  padding: 10px;
  transition: background-color 0.1s linear;
}
.vertical-tab li.active, .vertical-tab .tab.active {
  border-color: #ce1b1b;
  background-color: #2c2d2f;
}
.vertical-tab li:hover, .vertical-tab .tab:hover {
  cursor: pointer;
  border-color: #ce1b1b;
  background-color: #2c2d2f;
}

.box {
  border: 1px solid #27282b;
  border-radius: 10px;
}
.box.shaded {
  background-color: #2f3033;
}
.box.img {
  text-align: center;
}
.box.game-img {
  border: 0px transparent;
}
.box.game-img img {
  border-radius: 10px;
  width: 100%;
  display: block;
}
.box.item-img {
  padding: 50px;
  text-align: center;
}
.box.item-img img {
  width: 100%;
}
.box.item-img.special {
  border: 5px solid #FFD52D;
}
.box.item-img.owns {
  border: 5px solid #4CB04C;
}

.modal {
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: 700;
  margin-top: -10px;
}
.modal .close:focus, .modal .close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal .modal-content {
  background-color: #343538;
  margin: 15% auto;
  padding: 20px;
  width: 20%;
  min-width: 250px;
}
.modal .modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.modal .cancel-button {
  background-color: #FFF;
  color: #000;
  border: 1px solid #B8B8B8;
}

.hover-card:not(.thread-card) {
  height: 128px;
}

.hover-card {
  transition: background-color 0.05s linear;
  border-radius: 10px;
  overflow: hidden;
}
.hover-card:not(:last-of-type) {
  margin-bottom: 5px;
  margin-top: 5px;
}
.hover-card:not(.np) {
  padding: 5px;
}
.hover-card.viewed {
  background-color: #2e2f31;
}
.hover-card:hover {
  background-color: #2c2d2f;
}
.hover-card.clan .clan-logo {
  height: 100%;
  width: 10%;
  margin-right: 1%;
  float: left;
  min-width: 114px;
}
.hover-card.clan .clan-logo img {
  height: 100%;
  width: 100%;
}
.hover-card.clan .clan-stats {
  width: 86%;
  float: left;
}
.hover-card .clan-description {
  overflow: hidden;
  max-height: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: -o-ellipsis-lastline;
}
.hover-card .data-trade {
  height: 100%;
}

.more-popover {
  position: absolute;
  visibility: hidden;
  z-index: 1000;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s linear;
}
.more-popover.active {
  visibility: visible;
  opacity: 1;
}
.more-popover li:not(:first-child):not(:last-child) * {
  border-radius: 0;
}
.more-popover li:first-child * {
  border-radius: 5px 5px 0 0;
}
.more-popover li:last-child * {
  border-radius: 0 0 5px 5px;
}
.more-popover li:only-child * {
  border-radius: 5px;
}
.more-popover ul {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  list-style-type: none;
  top: -13px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.more-popover li {
  min-width: 125px;
}

.more-popover li * {
  color: #000;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 5px;
  display: block;
  transition: background-color 0.1s;
}

.more-popover li :hover {
  background-color: #f4f4f4;
}

.more-popover.user li * {
  background-color: #636363;
  color: #fff;
  padding-right: 70px;
}

.more-popover.user li :hover {
  background-color: #585858;
}

/* dont show anything if vue hasnt loaded it yet */
dropdown {
  display: none;
}

#dropdown-v div, .dropdown {
  position: absolute;
  margin-right: 5px;
}

.dropdown-content {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s ease-in-out;
}
.dropdown-content.active {
  display: block;
  visibility: visible;
  opacity: 1;
}
.dropdown-content.logout-dropdown li * {
  color: #fff;
  background-color: #636363;
}
.dropdown-content.logout-dropdown li :hover {
  background-color: #585858;
}
.dropdown-content.logout-dropdown .dropdown-arrow {
  border-bottom: 7px solid #636363;
}
.dropdown-content .dropdown-arrow {
  z-index: 500;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  top: -20px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #343538;
}
.dropdown-content .user li * {
  background-color: #343538;
  color: #fff;
  padding-right: 70px;
}
.dropdown-content li :hover {
  background-color: #2c2d2f;
}
.dropdown-content li {
  cursor: pointer;
  min-width: 125px;
}
.dropdown-content li * {
  background-color: #343538;
  padding: 10px 0 10px 5px;
  display: block;
  transition: background-color 0.1s;
}
.dropdown-content li:only-child * {
  border-radius: 5px;
}
.dropdown-content ul, .dropdown-content .dropdown-data {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  overflow-y: hidden;
  border-radius: 5px;
  list-style-type: none;
  top: -13px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #343538;
}

.pages {
  text-align: center;
}
.pages.red .page.active {
  color: #af1111;
}
.pages.green .page.active {
  color: #1d6918;
}
.pages.blue .page.active {
  color: #1c4788;
}
.pages.dodgerblue .page.active {
  color: #869eff;
}
.pages.orange .page.active {
  color: #cebc18;
}
.pages.yellow .page.active {
  color: #e9ce0f;
}
.pages .page {
  color: #b8b8b8;
  padding: 5px;
  font-weight: 600;
  cursor: pointer;
}
.pages .page:not(:last-child) {
  padding-right: 5px;
}
.pages .page.active {
  color: #196fb5;
}

.fieldset {
  border: 2px solid #999;
  border-radius: 8px;
}
.fieldset legend {
  font-size: 0.9rem;
  text-transform: capitalize;
  color: #999;
  font-weight: 600;
}
.fieldset.red {
  border-color: #fe5746;
}
.fieldset.red legend {
  color: #fe5746;
}
.fieldset.green {
  border-color: #7cdc83;
}
.fieldset.green legend {
  color: #7cdc83;
}

.m0 {
  margin: 0px !important;
}

.m1 {
  margin: 5px;
}

.m2 {
  margin: 10px;
}

.m3 {
  margin: 15px;
}

.m4 {
  margin: 20px;
}

.m5 {
  margin: 25px;
}

.m6 {
  margin: 30px;
}

.ml0 {
  margin-left: 0px !important;
}

.ml1 {
  margin-left: 5px;
}

.ml2 {
  margin-left: 10px;
}

.ml3 {
  margin-left: 15px;
}

.ml4 {
  margin-left: 20px;
}

.ml5 {
  margin-left: 25px;
}

.ml6 {
  margin-left: 30px;
}

.mr0 {
  margin-right: 0px !important;
}

.mr1 {
  margin-right: 5px;
}

.mr2 {
  margin-right: 10px;
}

.mr3 {
  margin-right: 15px;
}

.mr4 {
  margin-right: 20px;
}

.mr5 {
  margin-right: 25px;
}

.mr6 {
  margin-right: 30px;
}

.mt0 {
  margin-top: 0px !important;
}

.mt1 {
  margin-top: 5px;
}

.mt2 {
  margin-top: 10px;
}

.mt3 {
  margin-top: 15px;
}

.mt4 {
  margin-top: 20px;
}

.mt5 {
  margin-top: 25px;
}

.mt6 {
  margin-top: 30px;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mb1 {
  margin-bottom: 5px;
}

.mb2 {
  margin-bottom: 10px;
}

.mb3 {
  margin-bottom: 15px;
}

.mb4 {
  margin-bottom: 20px;
}

.mb5 {
  margin-bottom: 25px;
}

.mb6 {
  margin-bottom: 30px;
}

.p0 {
  padding: 0px !important;
}

.p1 {
  padding: 5px;
}

.p2 {
  padding: 10px;
}

.p3 {
  padding: 15px;
}

.p4 {
  padding: 20px;
}

.p5 {
  padding: 25px;
}

.p6 {
  padding: 30px;
}

.pl0 {
  padding-left: 0px !important;
}

.pl1 {
  padding-left: 5px;
}

.pl2 {
  padding-left: 10px;
}

.pl3 {
  padding-left: 15px;
}

.pl4 {
  padding-left: 20px;
}

.pl5 {
  padding-left: 25px;
}

.pl6 {
  padding-left: 30px;
}

.pr0 {
  padding-right: 0px !important;
}

.pr1 {
  padding-right: 5px;
}

.pr2 {
  padding-right: 10px;
}

.pr3 {
  padding-right: 15px;
}

.pr4 {
  padding-right: 20px;
}

.pr5 {
  padding-right: 25px;
}

.pr6 {
  padding-right: 30px;
}

.pt0 {
  padding-top: 0px !important;
}

.pt1 {
  padding-top: 5px;
}

.pt2 {
  padding-top: 10px;
}

.pt3 {
  padding-top: 15px;
}

.pt4 {
  padding-top: 20px;
}

.pt5 {
  padding-top: 25px;
}

.pt6 {
  padding-top: 30px;
}

.pb0 {
  padding-bottom: 0px !important;
}

.pb1 {
  padding-bottom: 5px;
}

.pb2 {
  padding-bottom: 10px;
}

.pb3 {
  padding-bottom: 15px;
}

.pb4 {
  padding-bottom: 20px;
}

.pb5 {
  padding-bottom: 25px;
}

.pb6 {
  padding-bottom: 30px;
}

.search-user-card {
  height: 100px;
}
.search-user-card img {
  height: 80px;
  width: 80px;
  margin-right: 10px;
  border-radius: 20px;
}
.search-user-card .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 80%;
  white-space: normal;
}

.clan-img-holder {
  border-radius: 10px;
  background-color: #2d2e31;
  width: 225px;
  height: 225px;
}
.clan-img-holder img {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.clan-edit-ranks table h5 {
  margin-bottom: 0px;
  margin-top: 5px;
}

.edit-member .clan-member {
  position: relative;
  padding-bottom: 0;
}

.clan-member {
  display: inline-block;
  padding: 12px;
  text-align: center;
}

.edit-member select {
  width: 25%;
  display: block;
  min-width: 115px;
  font-size: 14px;
}

.clan-relation .clan-name {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 5px;
  max-width: 145px;
}

.clan-relation .clan-form {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-65%);
  margin-left: 150px;
}

.slick-slide {
  display: inline-block;
}

.carousel {
  overflow: hidden;
  position: relative;
}

.carousel ul li {
  display: inline-block;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  padding: 5px;
  transition: background-color 0.1s linear;
  z-index: 999;
}

.carousel-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.carousel-button.left {
  border-left: 0;
  left: 0;
}

.carousel-button.right {
  border-right: 0;
  right: 0;
}

.forum-links .inline {
  display: inline-block;
}
.forum-links .content {
  overflow: hidden;
}
.forum-links a {
  color: #d2d2d2;
  padding: 0 10px;
}
.forum-links .inline .inline {
  display: inline-block;
}

.m0.thread-card {
  padding: 10px;
  border-radius: 0;
}

.divide {
  width: 1px;
  height: 100%;
  background-color: #303133;
  padding: 10px 1px 10px 0;
}

.forum-tag {
  position: relative;
  background: #303133;
  border-radius: 4px;
  padding: 6px 8px;
  color: #fff;
  float: right;
}
.forum-tag:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-right-color: #303133;
  border-width: 5px;
  margin-top: -5px;
}

.thread-label {
  font-size: 0.6em;
  color: #FFF;
  margin-right: 4px;
  padding: 4px;
  border-radius: 4px;
}
.thread-label.blue {
  background-color: #869eff;
}
.thread-label.green {
  background-color: #54a84a;
}
.thread-label.red {
  background-color: #ff8686;
}
.thread-label.orange {
  background-color: #e5c765;
}

.thread {
  overflow: auto;
  margin-bottom: 10px;
}

.thread-row {
  position: relative;
  overflow: auto;
}
.thread-row .p {
  word-wrap: break-word;
  margin-bottom: 10px;
}
.thread-row:last-child {
  border-bottom: 0;
}

@media handheld, only screen and (max-width: 767px) {
  .forum-links .content {
    overflow-x: scroll;
  }
  .forum-links {
    display: block;
  }
}
.content .board div.stat {
  text-align: center;
  padding-top: 20px;
  padding-right: 0;
}

.stat .title {
  font-weight: 500;
  font-size: 0.9em;
  color: #d2d2d2;
}

.board-info a {
  color: #d2d2d2;
}

.card .topic div.stat {
  padding-right: 0;
}

.board-info {
  height: 60px;
}

.forum-bar a {
  color: #d4d4d4;
}
.forum-bar .fa-angle-double-right {
  color: #bababa;
  padding: 0 5px;
}

.forum-options {
  color: #9E9E9E;
}

.admin-forum-options a, .admin-forum-options button {
  color: #9E9E9E;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  background-color: transparent;
  border: none;
  padding: 0 20px 0 0;
}
.admin-forum-options form {
  display: inline-block;
}

.report:hover {
  color: #c60000;
  cursor: pointer;
}

.forum-reply:hover {
  color: #196fb5;
}

.forum-quote:hover {
  color: #2fb621;
}

.membership-holder .membership-header {
  min-height: 128px;
  position: relative;
}
.membership-holder .membership-header.ace {
  background-color: #DC0F18;
}
.membership-holder .membership-header.royal {
  background-color: #E08733;
}
.membership-holder .membership-icon {
  transform: scale(2);
  margin: 18px 0 0 18px;
}
.membership-holder .membership-text {
  margin-left: 60px;
  margin-top: 10px;
  display: inline-block;
}
.membership-holder .membership-perks div {
  padding-bottom: 5px;
}
.membership-holder .membership-bkg {
  position: absolute;
  right: 0;
}
.membership-holder .membership-items {
  position: absolute;
  right: 0;
  height: 128px;
}

.membership-buttons {
  padding: 10px;
  border: 1px solid #232121;
  text-align: center;
}
.membership-buttons .membership-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding-right: 0;
  margin: 0 12px;
  width: calc(33.3% - 30px);
}
@media handheld, only screen and (max-width: 767px) {
  .membership-buttons .membership-button {
    width: 100%;
    margin: 0 0 10px;
  }
}
.membership-buttons .membership-button.gray {
  cursor: default;
  background: linear-gradient(0deg, #636363 0%, #8b8b8b 100%);
}
.membership-buttons .membership-button.ace {
  background: linear-gradient(0deg, #DC0F18 0%, #FE292B 100%);
}
.membership-buttons .membership-button.royal {
  background: linear-gradient(0deg, #E08733 0%, #F4A244 100%);
}
.membership-buttons .membership-button.bucks {
  background: linear-gradient(0deg, #00832C 0%, #00AD39 100%);
}
.membership-buttons .membership-button .membership-average {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 5px;
  margin-right: 20px;
}
.membership-buttons .membership-button .membership-average.gray {
  background-color: #535353;
}
.membership-buttons .membership-button .membership-average.ace {
  background-color: #A70D13;
}
.membership-buttons .membership-button .membership-average.royal {
  background-color: #A96626;
}
.membership-buttons .membership-length {
  position: absolute;
  transform: translateY(-125%);
}
.membership-buttons .membership-month {
  margin: 5px 0 0 2px;
}
.membership-buttons .bucks-amount {
  position: absolute;
  transform: translateY(-50%);
}
.membership-buttons .bucks-price {
  position: absolute;
  transform: translateY(50%);
}

@media (max-width: 1100px) {
  .membership-bkg,
  .membership-items {
    display: none;
  }
}
.payment-form-simple {
  margin-bottom: 10px;
}

.payment-form-options {
  margin-top: -5px;
}
.payment-form-options .payment-form-spacer {
  margin-bottom: 10px;
}
.payment-form-options .payment-form-spacer img {
  position: relative;
  top: 6px;
  width: 40px;
}

.lottery-winners .lottery-winner {
  max-width: 128px;
  margin: 0 10px;
}
.lottery-winners img {
  width: 128px;
}

.lottery-button.plain {
  padding: 15px 50px;
  margin-top: 10px;
  background: linear-gradient(0deg, #00832C 0%, #00AD39 100%);
}

.grid .col-1-4.set {
  padding-left: 10px;
  padding-right: 10px;
}
.grid .col-1-4.set .thumbnail img {
  max-height: 144px;
}

.card .game-name {
  height: 25px;
  display: block;
}

.download-page {
  color: #FFF;
}
.download-page .splash {
  width: 500px;
  height: 423px;
  position: absolute;
  right: 0;
  top: 0;
}
.download-page a.download {
  text-decoration: none;
}
.download-page a.download h5 {
  margin: 0;
}
.download-page a.download:hover button {
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.download-page .holder {
  position: relative;
}
.download-page .holder.legacy button.nh-button {
  border-color: #95B90B;
  background-color: rgba(0, 0, 0, 0);
  padding: 0px 10px;
}
.download-page .holder.legacy {
  height: 423px;
}
.download-page .holder.experimental {
  background: linear-gradient(90deg, rgb(0, 145, 236) 0%, rgb(1, 169, 254) 50%, rgb(88, 198, 254) 100%);
}
.download-page .holder.experimental .grid {
  padding-top: 50px;
  position: relative;
  padding-bottom: 0;
}
.download-page .buy-button-holder {
  margin-top: 150px;
}
.download-page .holder.blogs {
  background: linear-gradient(180deg, rgb(36, 36, 38) 0%, rgb(19, 19, 21) 100%);
}
.download-page .holder.experimental .buy-button {
  position: relative;
  border-radius: 8px;
  border: none;
  background-color: #FFF;
  font-size: 2.3em;
  color: rgb(1, 169, 254);
  padding: 20px 40px;
}
.download-page .buy-button div {
  color: #A6A6AD;
  font-size: 15px;
  font-weight: 500;
  text-transform: initial;
}
.download-page .other-versions {
  padding: 15px;
  cursor: pointer;
  margin-bottom: 25px;
}
.download-page .workshop-brick {
  float: left;
  max-width: 100%;
  width: 350px;
  height: 218px;
}
.download-page .brick-text {
  padding-top: 50px;
}
.download-page .detailed-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 0;
  margin: 0 8px;
  margin-bottom: 50px;
  width: calc(33.3% - 20px);
}
.download-page .detailed-info img {
  height: 100%;
  width: 100%;
}
.download-page .detailed-info .creator {
  font-style: italic;
  color: #CBCBD3;
  height: 0;
  overflow: hidden;
  transition: height 100ms;
}
.download-page .detailed-info:hover .creator {
  height: 20px;
}
.download-page .detailed-info img {
  border-radius: 2px;
}
.download-page .bottom-text {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 12px;
  padding-bottom: 9px;
  background-color: rgba(64, 63, 63, 0.48);
  color: #fff;
}
.download-page .tile2 {
  display: inline;
  position: absolute;
  width: 452px;
  height: 322px;
  border-radius: 2px;
  z-index: 4;
  right: -139px;
  content: url(/dist/css/images/0abbf3621c342dd99bf5.png);
}
.download-page .tile4 {
  display: inline;
  position: absolute;
  border-radius: 2px;
  content: url(/dist/css/images/9e693e9de915c6b618f1.png);
}
.download-page .workshop-brick {
  content: url(/dist/css/images/735f18f6c6504fe6fa7e.png);
}
.download-page .splash.shuttle {
  content: url(/dist/css/images/58143be7c2568468f410.png);
}
.download-page .performance-upgrades {
  content: url(/dist/css/images/54dd553ac066ac3043bd.png);
}
.download-page .mats-surfaces {
  content: url(/dist/css/images/c96d18d233631f66effe.png);
}
.download-page .intuitive-controls {
  content: url(/dist/css/images/f5e4c756c19e94905448.png);
}
.download-page .new-envs {
  content: url(/dist/css/images/61b70bd0dacc0083a29d.png);
}
.download-page .dynamic-lighting {
  content: url(/dist/css/images/83d34e1647ab4a3992f6.png);
}
.download-page .ongoing-dev {
  content: url(/dist/css/images/9ec9ad30157caded9bce.png);
}

@media handheld, only screen and (max-width: 1430px) {
  .download-page .tile2 {
    display: none;
  }
}
@media handheld, only screen and (max-width: 1200px) {
  .download-page .tile4 {
    position: relative;
  }
}
@media handheld, only screen and (max-width: 767px) {
  .download-page .tile4 {
    display: none;
  }
  .download-page .detailed-info {
    margin: 0 0 8px;
    width: calc(50% - 3px);
  }
}
@media handheld, only screen and (max-width: 512px) {
  .download-page .detailed-info {
    margin: 0 0 8px;
    width: 100%;
  }
  .download-page .holder.experimental .buy-button {
    font-size: 1em;
  }
}
@media handheld, only screen and (min-width: 1200px) {
  .download-page .tile4 {
    width: 550px;
    height: 322px;
    top: -40px;
    right: -23px;
  }
}
.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
  overflow: hidden;
}

.bomb-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10000000;
  transition: background-color 1.5s ease-out;
}
.bomb-overlay.white {
  background-color: white;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
.shop-categories {
  display: flex;
}
.shop-categories .category {
  flex: 1;
  color: #d2d2d2;
  text-align: center;
}
.shop-categories .category a:hover, .shop-categories .category.active {
  font-weight: 600;
  color: #dfdfdf;
  cursor: pointer;
}

.card .item-creator {
  overflow: hidden;
  color: #dfdfdf;
  font-size: 0.9em;
}

.item-page {
  position: relative;
}

.comment {
  overflow: hidden;
  position: relative;
}
.comment .user-link {
  position: relative;
}
.comment img {
  width: 100%;
  max-width: 150px;
}
.comment .comment-holder {
  white-space: normal;
}

.card .item-card-details, .card .item-content {
  font-weight: 500;
  background-color: #2f3033;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid #303133;
  padding: 10px;
  max-height: 81px;
}
.card .item-card-details .price, .card .item-content .price {
  overflow: hidden;
  padding-top: 4px;
  color: #515151;
}

@media handheld, only screen and (max-width: 767px) {
  .shop-categories {
    overflow-x: scroll;
  }
  .shop-categories .category {
    flex: none;
    font-size: 14px;
    display: inline-block;
    padding-right: 15px;
    padding-bottom: 10px;
  }
}
@media handheld, only screen and (min-width: 767px) {
  .shop-bar {
    height: 110px;
  }
  .shop-bar .card {
    height: 100px;
  }
}
.sellers .seller {
  position: relative;
}
.sellers .seller .owner img {
  width: 100px;
  display: inline-block;
}
.sellers .price {
  right: 0;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
}
.sellers .price .serial {
  font-size: 0.8em;
  color: #dfdfdf;
  text-align: right;
}
.sellers .seller:not(:last-child) {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #303133;
}

.tabs .tab-holder .tab-body .recommended-item {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

/*
wow you snagged this from jefemy and didn't even bother to reformat it with sass you're so lazy!!
yes, yes I am
*/
.file-img-box {
  border: 1px solid #d9d9d9;
  width: 156px;
  height: 156px;
  margin: auto;
  margin-bottom: 10px;
}

.file-img-box img {
  height: 100%;
  width: 100%;
  box-sizing: content-box;
}

.upload-preview-box img {
  height: 100%;
  margin: auto;
  box-sizing: content-box;
}

.upload-preview-box {
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  text-align: center;
  padding: 5px;
  height: 256px;
  width: 256px;
  margin: auto;
}

#upload-file-img, #upload-file-model {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#upload-label {
  cursor: pointer;
  padding: 5px;
}

.upload-label {
  display: block;
  margin-top: 5px;
  text-align: left;
  font-weight: 600;
}

.upload-input {
  margin-bottom: 10px;
  display: block;
}

.tfa-input-holder {
  margin-bottom: 5px;
}
.tfa-input-holder input {
  margin: 3px;
  width: 26px;
}

.recovery-code {
  margin-top: 5px;
  user-select: none;
}
.recovery-code span {
  color: #0909a7;
}

/* all of this is just copied from the old css */
.old-theme.trade-picker {
  margin-top: 10px;
  overflow: hidden;
  overflow-y: scroll;
  border-radius: 5px;
  background-color: #191919;
  max-height: 1024px;
}
.old-theme.trade-picker hr {
  margin: 4px;
}
.old-theme.trade-picker .trade {
  height: 72px;
  position: relative;
  cursor: pointer;
}
.old-theme.trade-picker .trade:hover {
  background-color: #2c2d2f;
}
.old-theme.trade-picker .trade.selected {
  background-color: #2e2f31;
  border-left: 4px solid #ce1b1b;
}
.old-theme.trade-picker .trade-status {
  position: absolute;
  bottom: 5px;
  right: 10px;
}
.old-theme.trade-picker .trade-date {
  position: absolute;
  top: 5px;
  right: 10px;
}
.old-theme.trade-picker .trade-user-thumbnail {
  float: left;
  width: 64px;
  margin: 4px;
}

.user-description-box.closed {
  max-height: 100px;
  white-space: normal;
  overflow: hidden;
  position: relative;
}

.user-description-box:not(.closed) .user-desc {
  padding-bottom: 24px;
}

.toggle-user-desc {
  white-space: normal;
  word-break: break-word;
  min-height: 100px;
}
.toggle-user-desc:not(.open)::after {
  background-color: #191919;
  color: grey;
  position: absolute;
  content: "...";
  text-align: right;
  height: 24px;
  padding-left: 5px;
  bottom: -1px;
  right: 0;
  width: 100%;
}

.read-more-desc {
  position: absolute;
  right: 0;
  bottom: 5px;
  padding: 5px;
  padding-top: 0;
  padding-bottom: 2px;
  padding-left: 0;
  margin-bottom: 1px;
  z-index: 1000;
}

.read-more-desc:hover {
  cursor: pointer;
}

.user-description-box {
  position: relative;
}

.friends-list li {
  text-align: center;
  padding: 0 2px;
}
.friends-list li div {
  width: 100%;
}

.profile-card {
  width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  border-radius: 16px;
  transition: background-color 50ms linear;
  padding: 2px;
  text-align: center;
}
.profile-card.award img {
  height: 128px;
  border: 1px solid #232121;
  border-radius: 16px;
}

.profile-card:hover {
  background-color: #2c2d2f;
}

.profile-card:not(.not-padded):not(:nth-child(3n)) {
  margin-right: 5px;
}

.profile-card:not(.crate) img {
  height: 124px;
  width: 124px;
  border-radius: 16px;
}

.profile-card.crate img {
  width: 100%;
  border: 1px solid #232121;
  background-color: #191919;
  border-radius: 5px;
  padding: 5px;
}

.profile-card.crate {
  padding: 7px;
  width: 100%;
}

.profile-card.crate:not(:nth-child(5n)) {
  margin-right: 1px;
}

.friend-card {
  width: 18.5%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  border-radius: 5px;
  transition: background-color 50ms linear;
  padding: 2px;
  text-align: center;
}
.friend-card:hover {
  background-color: #2c2d2f;
}
.friend-card img {
  height: 150px;
  width: 150px;
}
.friend-card button {
  margin-top: 5px;
  margin-bottom: 5px;
}

.trade-serial {
  position: absolute;
  margin: 4px;
  border-radius: 4px;
  padding: 3px;
  background-color: #252525;
  font-size: 15px;
}

.status-dot {
  float: none;
  display: inline-block;
  margin-bottom: 3px;
  background-color: #a2a2a2;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.status-dot.online {
  background-color: #00ab00;
}

.award-card {
  height: 128px;
}
.award-card img {
  width: 128px;
  float: left;
  height: 100%;
  margin-right: 10px;
}

.crate-types {
  border-right: 2px solid #232121;
  padding-right: 5px;
}
.crate-types li {
  cursor: pointer;
  padding: 10px;
  transition: background-color 0.1s linear;
}
.crate-types li:first-child {
  border-radius: 3px 3px 3px 0;
}
.crate-types li:last-child {
  border-radius: 0 3px 3px 3px;
}
.crate-types .active,
.crate-types :hover {
  background-color: #2c2d2f;
  border-left: 4px solid #ce1b1b;
}
.crate-types :hover {
  background-color: #2c2d2f;
}

.set-list .set-slider,
.set-list .set-slider li,
.set-list .set-slider ul {
  height: 100%;
}
.set-list .set.active {
  display: block;
}
.set-list .set:not(.active) {
  display: none;
}
.set-list .set-title {
  font-weight: 600;
  font-size: 1.5rem;
}
.set-list .set-stats {
  text-align: center;
  padding: 20px 20px 0;
}
.set-list .set-stats li {
  width: 50%;
  display: inline-block;
}
.set-list .set-stats li div:first-child {
  color: #797979;
}

.slider-button {
  top: 175px;
  position: absolute;
  text-align: center;
  color: #727070;
  z-index: 1000;
  padding: 5px;
  transition: background-color 0.1s linear;
}
.slider-button:hover {
  background-color: rgba(0, 0, 0, 0.24);
}
.slider-button.left {
  border-radius: 0 3px 3px 0;
  border-left: 0;
}
.slider-button.right {
  border-radius: 3px 0 0 3px;
  border-right: 0;
  right: 0;
}

.register-checkbox {
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  padding: 3px;
  margin: 0;
  width: 100%;
}

select.register {
  width: 100%;
  -webkit-appearance: none;
  border: 1px solid #d9d9d9;
}
select.register.no-rad {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.avatar-card {
  width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  border-radius: 5px;
  padding: 2px;
  text-align: center;
}
.avatar-card.crate {
  padding: 5px;
  width: 125px;
}
.avatar-card.crate .img-holder {
  width: 100%;
  border: 1px solid #232121;
  border-radius: 5px;
  padding: 10px;
}
.avatar-card.crate img {
  height: 95px;
  min-height: 95px;
}
.avatar-card.crate:not(:nth-child(5n)) {
  margin-right: 1px;
}

.loader {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  transform: translate(-50%, -50%);
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.outfit-overlay {
  position: absolute;
  left: 1px;
  z-index: 10;
  padding: 5px;
  opacity: 0.87;
  background-color: #191919;
  width: calc(100% - 5px);
  height: calc(100% - 29px);
}
.outfit-overlay:not(.active) {
  display: none;
}
.outfit-overlay li {
  font-size: 12px;
  padding: 5px;
  margin: 0 4px 5px;
  border-radius: 5px;
  transition: background-color 0.1s linear;
  cursor: pointer;
}
.outfit-overlay li:hover {
  background-color: #869eff;
}

.item-types {
  margin-bottom: 10px;
}
.item-types a {
  font-size: 14.7px;
  cursor: pointer;
}
.item-types a.active {
  font-weight: 600;
}
.item-types a:not(.active):hover {
  text-decoration: underline;
}

.settings input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
}
.settings select {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
}
.settings .tfa-qr-code svg {
  width: 90% !important;
}

/*
THIS IS MODIFIED FOR GLISTICAL
*/
/*
  Simple Grid
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - http://dallasbass.com
*/
[class*=grid],
[class*=col-],
[class*=mobile-],
.grid:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*=col-] {
  float: left;
  min-height: 1px;
  padding-right: 20px;
  /* column-space */
}
[class*=col-].swap-padding {
  padding-right: 0;
  padding-left: 20px;
}
[class*=col-].swap-padding:first-child {
  padding-left: 0;
}

[class*=col-]:last-child:not(.keep-col-padding) {
  padding-right: 0;
}

[class*=col-].no-pad {
  padding: 0;
}

.relative {
  position: relative;
}

.inline {
  display: inline-block;
}

.grid {
  width: 100%;
  max-width: 1140px;
  min-width: 748px;
  /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
  margin: 0 auto;
  overflow: visible;
}

.main-holder {
  position: relative;
  overflow: visible;
  padding-bottom: 362px;
}

@media handheld, only screen and (max-width: 767px) {
  .main-holder {
    padding-bottom: 655px;
  }
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.grid-pad {
  padding-top: 20px;
  padding-left: 20px;
  /* grid-space to left */
  padding-right: 0;
  /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}

.push-right {
  float: right;
}

/* Content Columns */
.col-1-1 {
  width: 100%;
}

.col-4-5,
.col-10-12 {
  width: 80%;
}

.col-2-3,
.col-8-12 {
  width: 66.66%;
}

.col-1-2,
.col-6-12 {
  width: 50%;
}

.col-1-3,
.col-4-12 {
  width: 33.33%;
}

.col-3-10 {
  width: 30%;
}

.col-1-4,
.col-3-12 {
  width: 25%;
}

.col-1-5 {
  width: 20%;
}

.col-1-6,
.col-2-12 {
  width: 16.667%;
}

.col-1-7 {
  width: 14.28%;
}

.col-1-8 {
  width: 12.5%;
}

.col-1-9 {
  width: 11.1%;
}

.col-1-10 {
  width: 10%;
}

.col-1-11 {
  width: 9.09%;
}

.col-1-12 {
  width: 8.33%;
}

/* Layout Columns */
.col-11-12 {
  width: 91.66%;
}

.col-10-12 {
  width: 83.333%;
}

.col-9-12 {
  width: 75%;
}

.col-5-12 {
  width: 41.66%;
}

.col-7-12 {
  width: 58.33%;
}

/* Pushing blocks */
.push-2-3,
.push-8-12 {
  margin-left: 66.66%;
}

.push-1-2,
.push-6-12 {
  margin-left: 50%;
}

.push-1-3,
.push-4-12 {
  margin-left: 33.33%;
}

.push-1-4,
.push-3-12 {
  margin-left: 25%;
}

.push-1-5 {
  margin-left: 20%;
}

.push-1-6,
.push-2-12 {
  margin-left: 16.667%;
}

.push-1-7 {
  margin-left: 14.28%;
}

.push-1-8 {
  margin-left: 12.5%;
}

.push-1-9 {
  margin-left: 11.1%;
}

.push-1-10 {
  margin-left: 10%;
}

.push-1-11 {
  margin-left: 9.09%;
}

.push-1-12 {
  margin-left: 8.33%;
}

.acc-1-2 {
  width: 46%;
  margin-right: 4%;
  float: left;
}

.main-holder > .col-10-12.push-1-12 {
  padding-right: 0;
}

@media only screen and (min-width: 767px) {
  .mobile-only {
    display: none !important;
    width: 0;
    height: 0;
  }
}
@media handheld, only screen and (max-width: 767px) {
  .grid {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    /* grid-space to left */
    padding-right: 10px;
    /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
  }
  [class*=col-] {
    width: auto;
    float: none;
    margin: 10px 0;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
  }
  [class*=col-] [class*=col-]:not(.mobile-pad) {
    padding-right: 0;
  }
  [class*=col-] [class*=col-]:not(.mobile-pad).swap-padding {
    padding-left: 0;
  }
  /* Mobile Layout */
  [class*=mobile-col-] {
    float: left;
    margin: 0 0 10px;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
    padding-bottom: 0;
  }
  .mobile-col-1-1 {
    width: 100%;
  }
  .mobile-col-2-3,
  .mobile-col-8-12 {
    width: 66.66%;
  }
  .mobile-col-1-2,
  .mobile-col-6-12 {
    width: 50%;
  }
  .mobile-col-1-3,
  .mobile-col-4-12 {
    width: 33.33%;
  }
  .mobile-col-1-4,
  .mobile-col-3-12 {
    width: 25%;
  }
  .mobile-col-1-5 {
    width: 20%;
  }
  .mobile-col-1-6,
  .mobile-col-2-12 {
    width: 16.667%;
  }
  .mobile-col-1-7 {
    width: 14.28%;
  }
  .mobile-col-1-8 {
    width: 12.5%;
  }
  .mobile-col-1-9 {
    width: 11.1%;
  }
  .mobile-col-1-10 {
    width: 10%;
  }
  .mobile-col-1-11 {
    width: 9.09%;
  }
  .mobile-col-1-12 {
    width: 8.33%;
  }
  /* Layout Columns */
  .mobile-col-11-12 {
    width: 91.66%;
  }
  .mobile-col-10-12 {
    width: 83.333%;
  }
  .mobile-col-9-12 {
    width: 75%;
  }
  .mobile-col-5-12 {
    width: 41.66%;
  }
  .mobile-col-7-12 {
    width: 58.33%;
  }
  .hide-on-mobile {
    display: none !important;
    width: 0;
    height: 0;
  }
  .tabs .tab,
  .tabs .tab.active {
    border: 1px solid #2f3033;
    border-radius: 10px;
  }
  [class*=col-] .mobile-fill:first-child {
    width: 98%;
  }
  .mobile-fill {
    width: 100%;
  }
  [class*=col-] .mobile-half-fill {
    width: 49.5%;
  }
  [class*=col-] .mobile-half-fill:nth-child(even) {
    margin-left: 0.5%;
  }
  [class*=col-] .mobile-half-fill:nth-child(odd) {
    margin-right: 0.5%;
  }
  .no-mobile {
    display: none !important;
  }
}
.icon, .special-e-icon, .special-icon, .arrow-down, .messages-icon, .friends-icon, .bits-icon, .bucks-icon, .royal-icon, .ace-icon, .mint-icon {
  vertical-align: top;
  background-image: url(/dist/css/sprites/82ba5758b51ed1ef5534.svg);
  background-repeat: no-repeat;
  background-size: auto auto;
  display: inline-block;
}

.mint-icon {
  margin-left: 3px;
  width: 24px;
  height: 24px;
  background-position: 0 0;
  vertical-align: sub;
}

.ace-icon {
  margin-left: 3px;
  width: 24px;
  height: 24px;
  background-position: -29px 0;
  vertical-align: sub;
}

.royal-icon {
  margin-left: 3px;
  width: 24px;
  height: 24px;
  background-position: -58px 0;
  vertical-align: sub;
}

.bucks-icon {
  width: 22px;
  height: 22px;
  background-position: 0 -29px;
}

.bits-icon {
  padding-right: 3px;
  width: 22px;
  height: 22px;
  background-position: -24.5px -28px;
}

.friends-icon {
  padding-right: 3px;
  width: 20px;
  height: 20px;
  background-position: -50px -29px;
}

.messages-icon {
  padding-right: 3px;
  width: 20px;
  height: 20px;
  background-position: -75px -29px;
}

.arrow-down {
  padding-right: 3px;
  width: 17px;
  height: 19px;
  background-position: 0 -140px;
  vertical-align: text-bottom;
  margin-left: 10px;
}

.special-icon {
  width: 60px;
  height: 60px;
  background-position: 1px -75px;
  position: absolute;
  top: 0;
  right: 0;
}

.special-e-icon {
  width: 60px;
  height: 60px;
  background-position: -64px -75px;
  position: absolute;
  top: 0;
  right: 0;
}

.owned-check-tri {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
}

.owned-check {
  height: 2em;
  font-size: 1em;
  transform: translateY(-135%) translateX(-135%);
  color: #fff;
  text-align: center;
}

.dropdown-arrow {
  font-size: 20px;
  color: #dfdfdf;
  cursor: pointer;
}
.dropdown-arrow:hover {
  font-weight: 600;
}

.item-more {
  font-size: 20px;
  color: #dfdfdf;
}

.item-more:hover {
  font-weight: 600;
}

.item-more-div {
  position: absolute;
  right: 0;
  margin-right: 5px;
  cursor: pointer;
}

.owned-check-tri.special {
  border-top: 50px solid #FFD52D;
}

.owned-check-tri.owns {
  border-top: 50px solid #4CB04C;
}

.img-white {
  filter: brightness(0) invert(1);
}

@font-face {
  font-family: "emote";
  src: url(/dist/css/font/fa6e8beec6d1d274c728.ttf), url(/dist/css/sprites/150dbd707ef7b5ad61c1.svg);
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'fontello';
        src: url('../font/fontello.svg?31647021#fontello') format('svg');
    }
}

Fontello emo font
*/
[class^=emote-]:before, [class*=" emote-"]:before {
  font-family: "emote";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.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: 0.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); */
}

.emote-happy:before {
  content: "\e800";
} /* '' */
.emote-wink:before {
  content: "\e801";
} /* '' */
.emote-sad:before {
  content: "\e802";
} /* '' */
.emote-sleep:before {
  content: "\e803";
} /* '' */
.emote-thumbsup:before {
  content: "\e804";
} /* '' */
.emote-surprised:before {
  content: "\e806";
} /* '' */
.emote-tongue:before {
  content: "\e807";
} /* '' */
.emote-coffee:before {
  content: "\e808";
} /* '' */
.emote-sunglasses:before {
  content: "\e809";
} /* '' */
.emote-displeased:before {
  content: "\e80a";
} /* '' */
.emote-grin:before {
  content: "\e80c";
} /* '' */
.emote-angry:before {
  content: "\e80d";
} /* '' */
.emote-saint:before {
  content: "\e80e";
} /* '' */
.emote-cry:before {
  content: "\e80f";
} /* '' */
.emote-squint:before {
  content: "\e811";
} /* '' */
.emote-laugh:before {
  content: "\e812";
} /* '' */
.emote-wink2:before {
  content: "\e813";
} /* '' */
/*
Any other questions about this strucuture?
See: https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization
(This is where I snagged the strucuture from)
~Mikuchan03 uwu
*/