/* fallback */
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
}

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format("woff2");
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFW50bbck.woff2) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/oswald/v31/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/oswald/v31/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUJiZTaR.woff2) format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/oswald/v31/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUliZTaR.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/oswald/v31/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUhiZTaR.woff2) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/oswald/v31/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Panton";
    src: url("/static/css/fonts/Panton-Regular.eot");
    src:
        local("Panton"),
        local("Panton-Regular"),
        url("/static/css/fonts/Panton-Regular.eot?#iefix") format("embedded-opentype"),
        url("/static/css/fonts/Panton-Regular.woff2") format("woff2"),
        url("/static/css/fonts/Panton-Regular.woff") format("woff"),
        url("/static/css/fonts/Panton-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
/*! nouislider - 14.5.0 - 5/11/2020 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.noUi-target {
    position: relative;
}
.noUi-base,
.noUi-connects {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
    overflow: hidden;
    z-index: 0;
}
.noUi-connect,
.noUi-origin {
    will-change: transform;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    transform-origin: 0 0;
    transform-style: flat;
}
.noUi-connect {
    height: 100%;
    width: 100%;
}
.noUi-origin {
    height: 10%;
    width: 10%;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
    left: 0;
    right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
    width: 0;
}
.noUi-horizontal .noUi-origin {
    height: 0;
}
.noUi-handle {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
}
.noUi-touch-area {
    height: 100%;
    width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
}
.noUi-state-drag * {
    cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
    height: 18px;
}
.noUi-horizontal .noUi-handle {
    width: 34px;
    height: 28px;
    right: -17px;
    top: -6px;
}
.noUi-vertical {
    width: 18px;
}
.noUi-vertical .noUi-handle {
    width: 28px;
    height: 34px;
    right: -6px;
    top: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    left: -17px;
    right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #d3d3d3;
    box-shadow:
        inset 0 1px 1px #f0f0f0,
        0 3px 6px -5px #bbb;
}
.noUi-connects {
    border-radius: 3px;
}
.noUi-connect {
    background: #3fb8af;
}
/* Handles and cursors;
 */
.noUi-draggable {
    cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
    cursor: ns-resize;
}
.noUi-handle {
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    background: #fff;
    cursor: default;
    box-shadow:
        inset 0 0 1px #fff,
        inset 0 1px 7px #ebebeb,
        0 3px 6px -3px #bbb;
}
.noUi-active {
    box-shadow:
        inset 0 0 1px #fff,
        inset 0 1px 7px #ddd,
        0 3px 6px -3px #bbb;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #e8e7e6;
    left: 14px;
    top: 6px;
}
.noUi-handle:after {
    left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
    width: 14px;
    height: 1px;
    left: 6px;
    top: 14px;
}
.noUi-vertical .noUi-handle:after {
    top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
    background: #b8b8b8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
    cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.noUi-pips {
    position: absolute;
    color: #999;
}
/* Values;
 *
 */
.noUi-value {
    position: absolute;
    white-space: nowrap;
    text-align: center;
}
.noUi-value-sub {
    color: #ccc;
    font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
    position: absolute;
    background: #ccc;
}
.noUi-marker-sub {
    background: #aaa;
}
.noUi-marker-large {
    background: #aaa;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
    padding: 10px 0;
    height: 80px;
    top: 100%;
    left: 0;
    width: 100%;
}
.noUi-value-horizontal {
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
    margin-left: -1px;
    width: 2px;
    height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
    height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
    padding: 0 10px;
    height: 100%;
    top: 0;
    left: 100%;
}
.noUi-value-vertical {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
    width: 5px;
    height: 2px;
    margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
    width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
    width: 15px;
}
.noUi-tooltip {
    display: block;
    position: absolute;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    background: #fff;
    color: #000;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
    -webkit-transform: translate(50%, 0);
    transform: translate(50%, 0);
    left: auto;
    bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
    -webkit-transform: translate(0, -18px);
    transform: translate(0, -18px);
    top: auto;
    right: 28px;
}

/*!
 * Materialize v0.97.6 (http://materializecss.com)
 * Copyright 2014-2015 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */
.materialize-red {
    background-color: #e51c23 !important;
}

.materialize-red-text {
    color: #e51c23 !important;
}

.materialize-red.lighten-5 {
    background-color: #fdeaeb !important;
}

.materialize-red-text.text-lighten-5 {
    color: #fdeaeb !important;
}

.materialize-red.lighten-4 {
    background-color: #f8c1c3 !important;
}

.materialize-red-text.text-lighten-4 {
    color: #f8c1c3 !important;
}

.materialize-red.lighten-3 {
    background-color: #f3989b !important;
}

.materialize-red-text.text-lighten-3 {
    color: #f3989b !important;
}

.materialize-red.lighten-2 {
    background-color: #ee6e73 !important;
}

.materialize-red-text.text-lighten-2 {
    color: #ee6e73 !important;
}

.materialize-red.lighten-1 {
    background-color: #ea454b !important;
}

.materialize-red-text.text-lighten-1 {
    color: #ea454b !important;
}

.materialize-red.darken-1 {
    background-color: #d0181e !important;
}

.materialize-red-text.text-darken-1 {
    color: #d0181e !important;
}

.materialize-red.darken-2 {
    background-color: #b9151b !important;
}

.materialize-red-text.text-darken-2 {
    color: #b9151b !important;
}

.materialize-red.darken-3 {
    background-color: #a21318 !important;
}

.materialize-red-text.text-darken-3 {
    color: #a21318 !important;
}

.materialize-red.darken-4 {
    background-color: #8b1014 !important;
}

.materialize-red-text.text-darken-4 {
    color: #8b1014 !important;
}

.red {
    background-color: #f44336 !important;
}

.red-text {
    color: #f44336 !important;
}

.red.lighten-5 {
    background-color: #ffebee !important;
}

.red-text.text-lighten-5 {
    color: #ffebee !important;
}

.red.lighten-4 {
    background-color: #ffcdd2 !important;
}

.red-text.text-lighten-4 {
    color: #ffcdd2 !important;
}

.red.lighten-3 {
    background-color: #ef9a9a !important;
}

.red-text.text-lighten-3 {
    color: #ef9a9a !important;
}

.red.lighten-2 {
    background-color: #e57373 !important;
}

.red-text.text-lighten-2 {
    color: #e57373 !important;
}

.red.lighten-1 {
    background-color: #ef5350 !important;
}

.red-text.text-lighten-1 {
    color: #ef5350 !important;
}

.red.darken-1 {
    background-color: #e53935 !important;
}

.red-text.text-darken-1 {
    color: #e53935 !important;
}

.red.darken-2 {
    background-color: #d32f2f !important;
}

.red-text.text-darken-2 {
    color: #d32f2f !important;
}

.red.darken-3 {
    background-color: #c62828 !important;
}

.red-text.text-darken-3 {
    color: #c62828 !important;
}

.red.darken-4 {
    background-color: #b71c1c !important;
}

.red-text.text-darken-4 {
    color: #b71c1c !important;
}

.red.accent-1 {
    background-color: #ff8a80 !important;
}

.red-text.text-accent-1 {
    color: #ff8a80 !important;
}

.red.accent-2 {
    background-color: #ff5252 !important;
}

.red-text.text-accent-2 {
    color: #ff5252 !important;
}

.red.accent-3 {
    background-color: #ff1744 !important;
}

.red-text.text-accent-3 {
    color: #ff1744 !important;
}

.red.accent-4 {
    background-color: #d50000 !important;
}

.red-text.text-accent-4 {
    color: #d50000 !important;
}

.pink {
    background-color: #e91e63 !important;
}

.pink-text {
    color: #e91e63 !important;
}

.pink.lighten-5 {
    background-color: #fce4ec !important;
}

.pink-text.text-lighten-5 {
    color: #fce4ec !important;
}

.pink.lighten-4 {
    background-color: #f8bbd0 !important;
}

.pink-text.text-lighten-4 {
    color: #f8bbd0 !important;
}

.pink.lighten-3 {
    background-color: #f48fb1 !important;
}

.pink-text.text-lighten-3 {
    color: #f48fb1 !important;
}

.pink.lighten-2 {
    background-color: #f06292 !important;
}

.pink-text.text-lighten-2 {
    color: #f06292 !important;
}

.pink.lighten-1 {
    background-color: #ec407a !important;
}

.pink-text.text-lighten-1 {
    color: #ec407a !important;
}

.pink.darken-1 {
    background-color: #d81b60 !important;
}

.pink-text.text-darken-1 {
    color: #d81b60 !important;
}

.pink.darken-2 {
    background-color: #c2185b !important;
}

.pink-text.text-darken-2 {
    color: #c2185b !important;
}

.pink.darken-3 {
    background-color: #ad1457 !important;
}

.pink-text.text-darken-3 {
    color: #ad1457 !important;
}

.pink.darken-4 {
    background-color: #880e4f !important;
}

.pink-text.text-darken-4 {
    color: #880e4f !important;
}

.pink.accent-1 {
    background-color: #ff80ab !important;
}

.pink-text.text-accent-1 {
    color: #ff80ab !important;
}

.pink.accent-2 {
    background-color: #ff4081 !important;
}

.pink-text.text-accent-2 {
    color: #ff4081 !important;
}

.pink.accent-3 {
    background-color: #f50057 !important;
}

.pink-text.text-accent-3 {
    color: #f50057 !important;
}

.pink.accent-4 {
    background-color: #c51162 !important;
}

.pink-text.text-accent-4 {
    color: #c51162 !important;
}

.purple {
    background-color: #9c27b0 !important;
}

.purple-text {
    color: #9c27b0 !important;
}

.purple.lighten-5 {
    background-color: #f3e5f5 !important;
}

.purple-text.text-lighten-5 {
    color: #f3e5f5 !important;
}

.purple.lighten-4 {
    background-color: #e1bee7 !important;
}

.purple-text.text-lighten-4 {
    color: #e1bee7 !important;
}

.purple.lighten-3 {
    background-color: #ce93d8 !important;
}

.purple-text.text-lighten-3 {
    color: #ce93d8 !important;
}

.purple.lighten-2 {
    background-color: #ba68c8 !important;
}

.purple-text.text-lighten-2 {
    color: #ba68c8 !important;
}

.purple.lighten-1 {
    background-color: #ab47bc !important;
}

.purple-text.text-lighten-1 {
    color: #ab47bc !important;
}

.purple.darken-1 {
    background-color: #8e24aa !important;
}

.purple-text.text-darken-1 {
    color: #8e24aa !important;
}

.purple.darken-2 {
    background-color: #7b1fa2 !important;
}

.purple-text.text-darken-2 {
    color: #7b1fa2 !important;
}

.purple.darken-3 {
    background-color: #6a1b9a !important;
}

.purple-text.text-darken-3 {
    color: #6a1b9a !important;
}

.purple.darken-4 {
    background-color: #4a148c !important;
}

.purple-text.text-darken-4 {
    color: #4a148c !important;
}

.purple.accent-1 {
    background-color: #ea80fc !important;
}

.purple-text.text-accent-1 {
    color: #ea80fc !important;
}

.purple.accent-2 {
    background-color: #e040fb !important;
}

.purple-text.text-accent-2 {
    color: #e040fb !important;
}

.purple.accent-3 {
    background-color: #d500f9 !important;
}

.purple-text.text-accent-3 {
    color: #d500f9 !important;
}

.purple.accent-4 {
    background-color: #aa00ff !important;
}

.purple-text.text-accent-4 {
    color: #aa00ff !important;
}

.deep-purple {
    background-color: #673ab7 !important;
}

.deep-purple-text {
    color: #673ab7 !important;
}

.deep-purple.lighten-5 {
    background-color: #ede7f6 !important;
}

.deep-purple-text.text-lighten-5 {
    color: #ede7f6 !important;
}

.deep-purple.lighten-4 {
    background-color: #d1c4e9 !important;
}

.deep-purple-text.text-lighten-4 {
    color: #d1c4e9 !important;
}

.deep-purple.lighten-3 {
    background-color: #b39ddb !important;
}

.deep-purple-text.text-lighten-3 {
    color: #b39ddb !important;
}

.deep-purple.lighten-2 {
    background-color: #9575cd !important;
}

.deep-purple-text.text-lighten-2 {
    color: #9575cd !important;
}

.deep-purple.lighten-1 {
    background-color: #7e57c2 !important;
}

.deep-purple-text.text-lighten-1 {
    color: #7e57c2 !important;
}

.deep-purple.darken-1 {
    background-color: #5e35b1 !important;
}

.deep-purple-text.text-darken-1 {
    color: #5e35b1 !important;
}

.deep-purple.darken-2 {
    background-color: #512da8 !important;
}

.deep-purple-text.text-darken-2 {
    color: #512da8 !important;
}

.deep-purple.darken-3 {
    background-color: #4527a0 !important;
}

.deep-purple-text.text-darken-3 {
    color: #4527a0 !important;
}

.deep-purple.darken-4 {
    background-color: #311b92 !important;
}

.deep-purple-text.text-darken-4 {
    color: #311b92 !important;
}

.deep-purple.accent-1 {
    background-color: #b388ff !important;
}

.deep-purple-text.text-accent-1 {
    color: #b388ff !important;
}

.deep-purple.accent-2 {
    background-color: #7c4dff !important;
}

.deep-purple-text.text-accent-2 {
    color: #7c4dff !important;
}

.deep-purple.accent-3 {
    background-color: #651fff !important;
}

.deep-purple-text.text-accent-3 {
    color: #651fff !important;
}

.deep-purple.accent-4 {
    background-color: #6200ea !important;
}

.deep-purple-text.text-accent-4 {
    color: #6200ea !important;
}

.indigo {
    background-color: #3f51b5 !important;
}

.indigo-text {
    color: #3f51b5 !important;
}

.indigo.lighten-5 {
    background-color: #e8eaf6 !important;
}

.indigo-text.text-lighten-5 {
    color: #e8eaf6 !important;
}

.indigo.lighten-4 {
    background-color: #c5cae9 !important;
}

.indigo-text.text-lighten-4 {
    color: #c5cae9 !important;
}

.indigo.lighten-3 {
    background-color: #9fa8da !important;
}

.indigo-text.text-lighten-3 {
    color: #9fa8da !important;
}

.indigo.lighten-2 {
    background-color: #7986cb !important;
}

.indigo-text.text-lighten-2 {
    color: #7986cb !important;
}

.indigo.lighten-1 {
    background-color: #5c6bc0 !important;
}

.indigo-text.text-lighten-1 {
    color: #5c6bc0 !important;
}

.indigo.darken-1 {
    background-color: #3949ab !important;
}

.indigo-text.text-darken-1 {
    color: #3949ab !important;
}

.indigo.darken-2 {
    background-color: #303f9f !important;
}

.indigo-text.text-darken-2 {
    color: #303f9f !important;
}

.indigo.darken-3 {
    background-color: #283593 !important;
}

.indigo-text.text-darken-3 {
    color: #283593 !important;
}

.indigo.darken-4 {
    background-color: #1a237e !important;
}

.indigo-text.text-darken-4 {
    color: #1a237e !important;
}

.indigo.accent-1 {
    background-color: #8c9eff !important;
}

.indigo-text.text-accent-1 {
    color: #8c9eff !important;
}

.indigo.accent-2 {
    background-color: #536dfe !important;
}

.indigo-text.text-accent-2 {
    color: #536dfe !important;
}

.indigo.accent-3 {
    background-color: #3d5afe !important;
}

.indigo-text.text-accent-3 {
    color: #3d5afe !important;
}

.indigo.accent-4 {
    background-color: #304ffe !important;
}

.indigo-text.text-accent-4 {
    color: #304ffe !important;
}

.blue {
    background-color: #2196f3 !important;
}

.blue-text {
    color: #2196f3 !important;
}

.blue.lighten-5 {
    background-color: #e3f2fd !important;
}

.blue-text.text-lighten-5 {
    color: #e3f2fd !important;
}

.blue.lighten-4 {
    background-color: #bbdefb !important;
}

.blue-text.text-lighten-4 {
    color: #bbdefb !important;
}

.blue.lighten-3 {
    background-color: #90caf9 !important;
}

.blue-text.text-lighten-3 {
    color: #90caf9 !important;
}

.blue.lighten-2 {
    background-color: #64b5f6 !important;
}

.blue-text.text-lighten-2 {
    color: #64b5f6 !important;
}

.blue.lighten-1 {
    background-color: #42a5f5 !important;
}

.blue-text.text-lighten-1 {
    color: #42a5f5 !important;
}

.blue.darken-1 {
    background-color: #1e88e5 !important;
}

.blue-text.text-darken-1 {
    color: #1e88e5 !important;
}

.blue.darken-2 {
    background-color: #1976d2 !important;
}

.blue-text.text-darken-2 {
    color: #1976d2 !important;
}

.blue.darken-3 {
    background-color: #1565c0 !important;
}

.blue-text.text-darken-3 {
    color: #1565c0 !important;
}

.blue.darken-4 {
    background-color: #0d47a1 !important;
}

.blue-text.text-darken-4 {
    color: #0d47a1 !important;
}

.blue.accent-1 {
    background-color: #82b1ff !important;
}

.blue-text.text-accent-1 {
    color: #82b1ff !important;
}

.blue.accent-2 {
    background-color: #448aff !important;
}

.blue-text.text-accent-2 {
    color: #448aff !important;
}

.blue.accent-3 {
    background-color: #2979ff !important;
}

.blue-text.text-accent-3 {
    color: #2979ff !important;
}

.blue.accent-4 {
    background-color: #2962ff !important;
}

.blue-text.text-accent-4 {
    color: #2962ff !important;
}

.light-blue {
    background-color: #03a9f4 !important;
}

.light-blue-text {
    color: #03a9f4 !important;
}

.light-blue.lighten-5 {
    background-color: #e1f5fe !important;
}

.light-blue-text.text-lighten-5 {
    color: #e1f5fe !important;
}

.light-blue.lighten-4 {
    background-color: #b3e5fc !important;
}

.light-blue-text.text-lighten-4 {
    color: #b3e5fc !important;
}

.light-blue.lighten-3 {
    background-color: #81d4fa !important;
}

.light-blue-text.text-lighten-3 {
    color: #81d4fa !important;
}

.light-blue.lighten-2 {
    background-color: #4fc3f7 !important;
}

.light-blue-text.text-lighten-2 {
    color: #4fc3f7 !important;
}

.light-blue.lighten-1 {
    background-color: #29b6f6 !important;
}

.light-blue-text.text-lighten-1 {
    color: #29b6f6 !important;
}

.light-blue.darken-1 {
    background-color: #039be5 !important;
}

.light-blue-text.text-darken-1 {
    color: #039be5 !important;
}

.light-blue.darken-2 {
    background-color: #0288d1 !important;
}

.light-blue-text.text-darken-2 {
    color: #0288d1 !important;
}

.light-blue.darken-3 {
    background-color: #0277bd !important;
}

.light-blue-text.text-darken-3 {
    color: #0277bd !important;
}

.light-blue.darken-4 {
    background-color: #01579b !important;
}

.light-blue-text.text-darken-4 {
    color: #01579b !important;
}

.light-blue.accent-1 {
    background-color: #80d8ff !important;
}

.light-blue-text.text-accent-1 {
    color: #80d8ff !important;
}

.light-blue.accent-2 {
    background-color: #40c4ff !important;
}

.light-blue-text.text-accent-2 {
    color: #40c4ff !important;
}

.light-blue.accent-3 {
    background-color: #00b0ff !important;
}

.light-blue-text.text-accent-3 {
    color: #00b0ff !important;
}

.light-blue.accent-4 {
    background-color: #0091ea !important;
}

.light-blue-text.text-accent-4 {
    color: #0091ea !important;
}

.cyan {
    background-color: #00bcd4 !important;
}

.cyan-text {
    color: #00bcd4 !important;
}

.cyan.lighten-5 {
    background-color: #e0f7fa !important;
}

.cyan-text.text-lighten-5 {
    color: #e0f7fa !important;
}

.cyan.lighten-4 {
    background-color: #b2ebf2 !important;
}

.cyan-text.text-lighten-4 {
    color: #b2ebf2 !important;
}

.cyan.lighten-3 {
    background-color: #80deea !important;
}

.cyan-text.text-lighten-3 {
    color: #80deea !important;
}

.cyan.lighten-2 {
    background-color: #4dd0e1 !important;
}

.cyan-text.text-lighten-2 {
    color: #4dd0e1 !important;
}

.cyan.lighten-1 {
    background-color: #26c6da !important;
}

.cyan-text.text-lighten-1 {
    color: #26c6da !important;
}

.cyan.darken-1 {
    background-color: #00acc1 !important;
}

.cyan-text.text-darken-1 {
    color: #00acc1 !important;
}

.cyan.darken-2 {
    background-color: #0097a7 !important;
}

.cyan-text.text-darken-2 {
    color: #0097a7 !important;
}

.cyan.darken-3 {
    background-color: #00838f !important;
}

.cyan-text.text-darken-3 {
    color: #00838f !important;
}

.cyan.darken-4 {
    background-color: #006064 !important;
}

.cyan-text.text-darken-4 {
    color: #006064 !important;
}

.cyan.accent-1 {
    background-color: #84ffff !important;
}

.cyan-text.text-accent-1 {
    color: #84ffff !important;
}

.cyan.accent-2 {
    background-color: #18ffff !important;
}

.cyan-text.text-accent-2 {
    color: #18ffff !important;
}

.cyan.accent-3 {
    background-color: #00e5ff !important;
}

.cyan-text.text-accent-3 {
    color: #00e5ff !important;
}

.cyan.accent-4 {
    background-color: #00b8d4 !important;
}

.cyan-text.text-accent-4 {
    color: #00b8d4 !important;
}

.teal {
    background-color: #009688 !important;
}

.teal-text {
    color: #009688 !important;
}

.teal.lighten-5 {
    background-color: #e0f2f1 !important;
}

.teal-text.text-lighten-5 {
    color: #e0f2f1 !important;
}

.teal.lighten-4 {
    background-color: #b2dfdb !important;
}

.teal-text.text-lighten-4 {
    color: #b2dfdb !important;
}

.teal.lighten-3 {
    background-color: #80cbc4 !important;
}

.teal-text.text-lighten-3 {
    color: #80cbc4 !important;
}

.teal.lighten-2 {
    background-color: #4db6ac !important;
}

.teal-text.text-lighten-2 {
    color: #4db6ac !important;
}

.teal.lighten-1 {
    background-color: #26a69a !important;
}

.teal-text.text-lighten-1 {
    color: #26a69a !important;
}

.teal.darken-1 {
    background-color: #00897b !important;
}

.teal-text.text-darken-1 {
    color: #00897b !important;
}

.teal.darken-2 {
    background-color: #00796b !important;
}

.teal-text.text-darken-2 {
    color: #00796b !important;
}

.teal.darken-3 {
    background-color: #00695c !important;
}

.teal-text.text-darken-3 {
    color: #00695c !important;
}

.teal.darken-4 {
    background-color: #004d40 !important;
}

.teal-text.text-darken-4 {
    color: #004d40 !important;
}

.teal.accent-1 {
    background-color: #a7ffeb !important;
}

.teal-text.text-accent-1 {
    color: #a7ffeb !important;
}

.teal.accent-2 {
    background-color: #64ffda !important;
}

.teal-text.text-accent-2 {
    color: #64ffda !important;
}

.teal.accent-3 {
    background-color: #1de9b6 !important;
}

.teal-text.text-accent-3 {
    color: #1de9b6 !important;
}

.teal.accent-4 {
    background-color: #00bfa5 !important;
}

.teal-text.text-accent-4 {
    color: #00bfa5 !important;
}

.green {
    background-color: #4caf50 !important;
}

.green-text {
    color: #4caf50 !important;
}

.green.lighten-5 {
    background-color: #e8f5e9 !important;
}

.green-text.text-lighten-5 {
    color: #e8f5e9 !important;
}

.green.lighten-4 {
    background-color: #c8e6c9 !important;
}

.green-text.text-lighten-4 {
    color: #c8e6c9 !important;
}

.green.lighten-3 {
    background-color: #a5d6a7 !important;
}

.green-text.text-lighten-3 {
    color: #a5d6a7 !important;
}

.green.lighten-2 {
    background-color: #81c784 !important;
}

.green-text.text-lighten-2 {
    color: #81c784 !important;
}

.green.lighten-1 {
    background-color: #66bb6a !important;
}

.green-text.text-lighten-1 {
    color: #66bb6a !important;
}

.green.darken-1 {
    background-color: #43a047 !important;
}

.green-text.text-darken-1 {
    color: #43a047 !important;
}

.green.darken-2 {
    background-color: #388e3c !important;
}

.green-text.text-darken-2 {
    color: #388e3c !important;
}

.green.darken-3 {
    background-color: #2e7d32 !important;
}

.green-text.text-darken-3 {
    color: #2e7d32 !important;
}

.green.darken-4 {
    background-color: #1b5e20 !important;
}

.green-text.text-darken-4 {
    color: #1b5e20 !important;
}

.green.accent-1 {
    background-color: #b9f6ca !important;
}

.green-text.text-accent-1 {
    color: #b9f6ca !important;
}

.green.accent-2 {
    background-color: #69f0ae !important;
}

.green-text.text-accent-2 {
    color: #69f0ae !important;
}

.green.accent-3 {
    background-color: #00e676 !important;
}

.green-text.text-accent-3 {
    color: #00e676 !important;
}

.green.accent-4 {
    background-color: #00c853 !important;
}

.green-text.text-accent-4 {
    color: #00c853 !important;
}

.light-green {
    background-color: #8bc34a !important;
}

.light-green-text {
    color: #8bc34a !important;
}

.light-green.lighten-5 {
    background-color: #f1f8e9 !important;
}

.light-green-text.text-lighten-5 {
    color: #f1f8e9 !important;
}

.light-green.lighten-4 {
    background-color: #dcedc8 !important;
}

.light-green-text.text-lighten-4 {
    color: #dcedc8 !important;
}

.light-green.lighten-3 {
    background-color: #c5e1a5 !important;
}

.light-green-text.text-lighten-3 {
    color: #c5e1a5 !important;
}

.light-green.lighten-2 {
    background-color: #aed581 !important;
}

.light-green-text.text-lighten-2 {
    color: #aed581 !important;
}

.light-green.lighten-1 {
    background-color: #9ccc65 !important;
}

.light-green-text.text-lighten-1 {
    color: #9ccc65 !important;
}

.light-green.darken-1 {
    background-color: #7cb342 !important;
}

.light-green-text.text-darken-1 {
    color: #7cb342 !important;
}

.light-green.darken-2 {
    background-color: #689f38 !important;
}

.light-green-text.text-darken-2 {
    color: #689f38 !important;
}

.light-green.darken-3 {
    background-color: #558b2f !important;
}

.light-green-text.text-darken-3 {
    color: #558b2f !important;
}

.light-green.darken-4 {
    background-color: #33691e !important;
}

.light-green-text.text-darken-4 {
    color: #33691e !important;
}

.light-green.accent-1 {
    background-color: #ccff90 !important;
}

.light-green-text.text-accent-1 {
    color: #ccff90 !important;
}

.light-green.accent-2 {
    background-color: #b2ff59 !important;
}

.light-green-text.text-accent-2 {
    color: #b2ff59 !important;
}

.light-green.accent-3 {
    background-color: #76ff03 !important;
}

.light-green-text.text-accent-3 {
    color: #76ff03 !important;
}

.light-green.accent-4 {
    background-color: #64dd17 !important;
}

.light-green-text.text-accent-4 {
    color: #64dd17 !important;
}

.lime {
    background-color: #cddc39 !important;
}

.lime-text {
    color: #cddc39 !important;
}

.lime.lighten-5 {
    background-color: #f9fbe7 !important;
}

.lime-text.text-lighten-5 {
    color: #f9fbe7 !important;
}

.lime.lighten-4 {
    background-color: #f0f4c3 !important;
}

.lime-text.text-lighten-4 {
    color: #f0f4c3 !important;
}

.lime.lighten-3 {
    background-color: #e6ee9c !important;
}

.lime-text.text-lighten-3 {
    color: #e6ee9c !important;
}

.lime.lighten-2 {
    background-color: #dce775 !important;
}

.lime-text.text-lighten-2 {
    color: #dce775 !important;
}

.lime.lighten-1 {
    background-color: #d4e157 !important;
}

.lime-text.text-lighten-1 {
    color: #d4e157 !important;
}

.lime.darken-1 {
    background-color: #c0ca33 !important;
}

.lime-text.text-darken-1 {
    color: #c0ca33 !important;
}

.lime.darken-2 {
    background-color: #afb42b !important;
}

.lime-text.text-darken-2 {
    color: #afb42b !important;
}

.lime.darken-3 {
    background-color: #9e9d24 !important;
}

.lime-text.text-darken-3 {
    color: #9e9d24 !important;
}

.lime.darken-4 {
    background-color: #827717 !important;
}

.lime-text.text-darken-4 {
    color: #827717 !important;
}

.lime.accent-1 {
    background-color: #f4ff81 !important;
}

.lime-text.text-accent-1 {
    color: #f4ff81 !important;
}

.lime.accent-2 {
    background-color: #eeff41 !important;
}

.lime-text.text-accent-2 {
    color: #eeff41 !important;
}

.lime.accent-3 {
    background-color: #c6ff00 !important;
}

.lime-text.text-accent-3 {
    color: #c6ff00 !important;
}

.lime.accent-4 {
    background-color: #aeea00 !important;
}

.lime-text.text-accent-4 {
    color: #aeea00 !important;
}

.yellow {
    background-color: #ffeb3b !important;
}

.yellow-text {
    color: #ffeb3b !important;
}

.yellow.lighten-5 {
    background-color: #fffde7 !important;
}

.yellow-text.text-lighten-5 {
    color: #fffde7 !important;
}

.yellow.lighten-4 {
    background-color: #fff9c4 !important;
}

.yellow-text.text-lighten-4 {
    color: #fff9c4 !important;
}

.yellow.lighten-3 {
    background-color: #fff59d !important;
}

.yellow-text.text-lighten-3 {
    color: #fff59d !important;
}

.yellow.lighten-2 {
    background-color: #fff176 !important;
}

.yellow-text.text-lighten-2 {
    color: #fff176 !important;
}

.yellow.lighten-1 {
    background-color: #ffee58 !important;
}

.yellow-text.text-lighten-1 {
    color: #ffee58 !important;
}

.yellow.darken-1 {
    background-color: #fdd835 !important;
}

.yellow-text.text-darken-1 {
    color: #fdd835 !important;
}

.yellow.darken-2 {
    background-color: #fbc02d !important;
}

.yellow-text.text-darken-2 {
    color: #fbc02d !important;
}

.yellow.darken-3 {
    background-color: #f9a825 !important;
}

.yellow-text.text-darken-3 {
    color: #f9a825 !important;
}

.yellow.darken-4 {
    background-color: #f57f17 !important;
}

.yellow-text.text-darken-4 {
    color: #f57f17 !important;
}

.yellow.accent-1 {
    background-color: #ffff8d !important;
}

.yellow-text.text-accent-1 {
    color: #ffff8d !important;
}

.yellow.accent-2 {
    background-color: #ffff00 !important;
}

.yellow-text.text-accent-2 {
    color: #ffff00 !important;
}

.yellow.accent-3 {
    background-color: #ffea00 !important;
}

.yellow-text.text-accent-3 {
    color: #ffea00 !important;
}

.yellow.accent-4 {
    background-color: #ffd600 !important;
}

.yellow-text.text-accent-4 {
    color: #ffd600 !important;
}

.amber {
    background-color: #ffc107 !important;
}

.amber-text {
    color: #ffc107 !important;
}

.amber.lighten-5 {
    background-color: #fff8e1 !important;
}

.amber-text.text-lighten-5 {
    color: #fff8e1 !important;
}

.amber.lighten-4 {
    background-color: #ffecb3 !important;
}

.amber-text.text-lighten-4 {
    color: #ffecb3 !important;
}

.amber.lighten-3 {
    background-color: #ffe082 !important;
}

.amber-text.text-lighten-3 {
    color: #ffe082 !important;
}

.amber.lighten-2 {
    background-color: #ffd54f !important;
}

.amber-text.text-lighten-2 {
    color: #ffd54f !important;
}

.amber.lighten-1 {
    background-color: #ffca28 !important;
}

.amber-text.text-lighten-1 {
    color: #ffca28 !important;
}

.amber.darken-1 {
    background-color: #ffb300 !important;
}

.amber-text.text-darken-1 {
    color: #ffb300 !important;
}

.amber.darken-2 {
    background-color: #ffa000 !important;
}

.amber-text.text-darken-2 {
    color: #ffa000 !important;
}

.amber.darken-3 {
    background-color: #ff8f00 !important;
}

.amber-text.text-darken-3 {
    color: #ff8f00 !important;
}

.amber.darken-4 {
    background-color: #ff6f00 !important;
}

.amber-text.text-darken-4 {
    color: #ff6f00 !important;
}

.amber.accent-1 {
    background-color: #ffe57f !important;
}

.amber-text.text-accent-1 {
    color: #ffe57f !important;
}

.amber.accent-2 {
    background-color: #ffd740 !important;
}

.amber-text.text-accent-2 {
    color: #ffd740 !important;
}

.amber.accent-3 {
    background-color: #ffc400 !important;
}

.amber-text.text-accent-3 {
    color: #ffc400 !important;
}

.amber.accent-4 {
    background-color: #ffab00 !important;
}

.amber-text.text-accent-4 {
    color: #ffab00 !important;
}

.orange {
    background-color: #ff9800 !important;
}

.orange-text {
    color: #ff9800 !important;
}

.orange.lighten-5 {
    background-color: #fff3e0 !important;
}

.orange-text.text-lighten-5 {
    color: #fff3e0 !important;
}

.orange.lighten-4 {
    background-color: #ffe0b2 !important;
}

.orange-text.text-lighten-4 {
    color: #ffe0b2 !important;
}

.orange.lighten-3 {
    background-color: #ffcc80 !important;
}

.orange-text.text-lighten-3 {
    color: #ffcc80 !important;
}

.orange.lighten-2 {
    background-color: #ffb74d !important;
}

.orange-text.text-lighten-2 {
    color: #ffb74d !important;
}

.orange.lighten-1 {
    background-color: #ffa726 !important;
}

.orange-text.text-lighten-1 {
    color: #ffa726 !important;
}

.orange.darken-1 {
    background-color: #fb8c00 !important;
}

.orange-text.text-darken-1 {
    color: #fb8c00 !important;
}

.orange.darken-2 {
    background-color: #f57c00 !important;
}

.orange-text.text-darken-2 {
    color: #f57c00 !important;
}

.orange.darken-3 {
    background-color: #ef6c00 !important;
}

.orange-text.text-darken-3 {
    color: #ef6c00 !important;
}

.orange.darken-4 {
    background-color: #e65100 !important;
}

.orange-text.text-darken-4 {
    color: #e65100 !important;
}

.orange.accent-1 {
    background-color: #ffd180 !important;
}

.orange-text.text-accent-1 {
    color: #ffd180 !important;
}

.orange.accent-2 {
    background-color: #ffab40 !important;
}

.orange-text.text-accent-2 {
    color: #ffab40 !important;
}

.orange.accent-3 {
    background-color: #ff9100 !important;
}

.orange-text.text-accent-3 {
    color: #ff9100 !important;
}

.orange.accent-4 {
    background-color: #ff6d00 !important;
}

.orange-text.text-accent-4 {
    color: #ff6d00 !important;
}

.deep-orange {
    background-color: #ff5722 !important;
}

.deep-orange-text {
    color: #ff5722 !important;
}

.deep-orange.lighten-5 {
    background-color: #fbe9e7 !important;
}

.deep-orange-text.text-lighten-5 {
    color: #fbe9e7 !important;
}

.deep-orange.lighten-4 {
    background-color: #ffccbc !important;
}

.deep-orange-text.text-lighten-4 {
    color: #ffccbc !important;
}

.deep-orange.lighten-3 {
    background-color: #ffab91 !important;
}

.deep-orange-text.text-lighten-3 {
    color: #ffab91 !important;
}

.deep-orange.lighten-2 {
    background-color: #ff8a65 !important;
}

.deep-orange-text.text-lighten-2 {
    color: #ff8a65 !important;
}

.deep-orange.lighten-1 {
    background-color: #ff7043 !important;
}

.deep-orange-text.text-lighten-1 {
    color: #ff7043 !important;
}

.deep-orange.darken-1 {
    background-color: #f4511e !important;
}

.deep-orange-text.text-darken-1 {
    color: #f4511e !important;
}

.deep-orange.darken-2 {
    background-color: #e64a19 !important;
}

.deep-orange-text.text-darken-2 {
    color: #e64a19 !important;
}

.deep-orange.darken-3 {
    background-color: #d84315 !important;
}

.deep-orange-text.text-darken-3 {
    color: #d84315 !important;
}

.deep-orange.darken-4 {
    background-color: #bf360c !important;
}

.deep-orange-text.text-darken-4 {
    color: #bf360c !important;
}

.deep-orange.accent-1 {
    background-color: #ff9e80 !important;
}

.deep-orange-text.text-accent-1 {
    color: #ff9e80 !important;
}

.deep-orange.accent-2 {
    background-color: #ff6e40 !important;
}

.deep-orange-text.text-accent-2 {
    color: #ff6e40 !important;
}

.deep-orange.accent-3 {
    background-color: #ff3d00 !important;
}

.deep-orange-text.text-accent-3 {
    color: #ff3d00 !important;
}

.deep-orange.accent-4 {
    background-color: #dd2c00 !important;
}

.deep-orange-text.text-accent-4 {
    color: #dd2c00 !important;
}

.brown {
    background-color: #795548 !important;
}

.brown-text {
    color: #795548 !important;
}

.brown.lighten-5 {
    background-color: #efebe9 !important;
}

.brown-text.text-lighten-5 {
    color: #efebe9 !important;
}

.brown.lighten-4 {
    background-color: #d7ccc8 !important;
}

.brown-text.text-lighten-4 {
    color: #d7ccc8 !important;
}

.brown.lighten-3 {
    background-color: #bcaaa4 !important;
}

.brown-text.text-lighten-3 {
    color: #bcaaa4 !important;
}

.brown.lighten-2 {
    background-color: #a1887f !important;
}

.brown-text.text-lighten-2 {
    color: #a1887f !important;
}

.brown.lighten-1 {
    background-color: #8d6e63 !important;
}

.brown-text.text-lighten-1 {
    color: #8d6e63 !important;
}

.brown.darken-1 {
    background-color: #6d4c41 !important;
}

.brown-text.text-darken-1 {
    color: #6d4c41 !important;
}

.brown.darken-2 {
    background-color: #5d4037 !important;
}

.brown-text.text-darken-2 {
    color: #5d4037 !important;
}

.brown.darken-3 {
    background-color: #4e342e !important;
}

.brown-text.text-darken-3 {
    color: #4e342e !important;
}

.brown.darken-4 {
    background-color: #3e2723 !important;
}

.brown-text.text-darken-4 {
    color: #3e2723 !important;
}

.blue-grey {
    background-color: #607d8b !important;
}

.blue-grey-text {
    color: #607d8b !important;
}

.blue-grey.lighten-5 {
    background-color: #eceff1 !important;
}

.blue-grey-text.text-lighten-5 {
    color: #eceff1 !important;
}

.blue-grey.lighten-4 {
    background-color: #cfd8dc !important;
}

.blue-grey-text.text-lighten-4 {
    color: #cfd8dc !important;
}

.blue-grey.lighten-3 {
    background-color: #b0bec5 !important;
}

.blue-grey-text.text-lighten-3 {
    color: #b0bec5 !important;
}

.blue-grey.lighten-2 {
    background-color: #90a4ae !important;
}

.blue-grey-text.text-lighten-2 {
    color: #90a4ae !important;
}

.blue-grey.lighten-1 {
    background-color: #78909c !important;
}

.blue-grey-text.text-lighten-1 {
    color: #78909c !important;
}

.blue-grey.darken-1 {
    background-color: #546e7a !important;
}

.blue-grey-text.text-darken-1 {
    color: #546e7a !important;
}

.blue-grey.darken-2 {
    background-color: #455a64 !important;
}

.blue-grey-text.text-darken-2 {
    color: #455a64 !important;
}

.blue-grey.darken-3 {
    background-color: #37474f !important;
}

.blue-grey-text.text-darken-3 {
    color: #37474f !important;
}

.blue-grey.darken-4 {
    background-color: #263238 !important;
}

.blue-grey-text.text-darken-4 {
    color: #263238 !important;
}

.grey {
    background-color: #9e9e9e !important;
}

.grey-text {
    color: #9e9e9e !important;
}

.grey.lighten-5 {
    background-color: #fafafa !important;
}

.grey-text.text-lighten-5 {
    color: #fafafa !important;
}

.grey.lighten-4 {
    background-color: #f5f5f5 !important;
}

.grey-text.text-lighten-4 {
    color: #f5f5f5 !important;
}

.grey.lighten-3 {
    background-color: #eeeeee !important;
}

.grey-text.text-lighten-3 {
    color: #eeeeee !important;
}

.grey.lighten-2 {
    background-color: #e0e0e0 !important;
}

.grey-text.text-lighten-2 {
    color: #e0e0e0 !important;
}

.grey.lighten-1 {
    background-color: #bdbdbd !important;
}

.grey-text.text-lighten-1 {
    color: #bdbdbd !important;
}

.grey.darken-1 {
    background-color: #757575 !important;
}

.grey-text.text-darken-1 {
    color: #757575 !important;
}

.grey.darken-2 {
    background-color: #616161 !important;
}

.grey-text.text-darken-2 {
    color: #616161 !important;
}

.grey.darken-3 {
    background-color: #424242 !important;
}

.grey-text.text-darken-3 {
    color: #424242 !important;
}

.grey.darken-4 {
    background-color: #212121 !important;
}

.grey-text.text-darken-4 {
    color: #212121 !important;
}

.shades.black {
    background-color: #000000 !important;
}

.shades-text.text-black {
    color: #000000 !important;
}

.shades.white {
    background-color: #ffffff !important;
}

.shades-text.text-white {
    color: #ffffff !important;
}

.shades.transparent {
    background-color: transparent !important;
}

.shades-text.text-transparent {
    color: transparent !important;
}

.black {
    background-color: #000000 !important;
}

.black-text {
    color: #000000 !important;
}

.white {
    background-color: #ffffff !important;
}

.white-text {
    color: #ffffff !important;
}

.transparent {
    background-color: transparent !important;
}

.transparent-text {
    color: transparent !important;
}

/* ==========================================================================
   Materialize variables
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Colors
 *  2. Badges
 *  3. Buttons
 *  4. Cards
 *  5. Collapsible
 *  6. Chips
 *  7. Date Picker
 *  8. Dropdown
 *  10. Forms
 *  11. Global
 *  12. Grid
 *  13. Navigation Bar
 *  14. Side Navigation
 *  15. Photo Slider
 *  16. Spinners | Loaders
 *  17. Tabs
 *  18. Tables
 *  19. Toasts
 *  20. Typography
 *  21. Footer
 *  22. Flow Text
 *  23. Collections
 *  24. Progress Bar
 */
/* 1. Colors
   ========================================================================== */
/* 2. Badges
   ========================================================================== */
/* 3. Buttons
   ========================================================================== */
/* 4. Cards
   ========================================================================== */
/* 5. Collapsible
   ========================================================================== */
/* 6. Chips
   ========================================================================== */
/* 7. Date Picker
   ========================================================================== */
/* 8. Dropdown
   ========================================================================== */
/* 9. Fonts
   ========================================================================== */
/* 10. Forms
   ========================================================================== */
/* 11. Global
   ========================================================================== */
/* 12. Grid
   ========================================================================== */
/* 13. Navigation Bar
   ========================================================================== */
/* 14. Side Navigation
   ========================================================================== */
/* 15. Photo Slider
   ========================================================================== */
/* 16. Spinners | Loaders
   ========================================================================== */
/* 17. Tabs
   ========================================================================== */
/* 18. Tables
   ========================================================================== */
/* 19. Toasts
   ========================================================================== */
/* 20. Typography
   ========================================================================== */
/* 21. Footer
   ========================================================================== */
/* 22. Flow Text
   ========================================================================== */
/* 23. Collections
   ========================================================================== */
/* 24. Progress Bar
   ========================================================================== */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin.
 */
body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
    display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
    background: #ff0;
    color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    /* 1 */
    font: inherit;
    /* 2 */
    margin: 0;
    /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    box-sizing: content-box;
    /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

ul {
    list-style-type: none;
}

ul.browser-default {
    list-style-type: initial;
}

a {
    color: #039be5;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.valign-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.valign-wrapper .valign {
    display: block;
}

ul {
    padding: 0;
}

ul li {
    list-style-type: none;
}

.clearfix {
    clear: both;
}

.z-depth-0 {
    box-shadow: none !important;
}

.z-depth-1,
nav,
.card-panel,
.card,
.toast,
.btn,
.btn-large,
.btn-floating,
.dropdown-content,
.collapsible,
.side-nav {
    box-shadow:
        0 2px 5px 0 rgba(0, 0, 0, 0.16),
        0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.z-depth-1-half,
.btn:hover,
.btn-large:hover,
.btn-floating:hover {
    box-shadow:
        0 5px 11px 0 rgba(0, 0, 0, 0.18),
        0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.z-depth-2 {
    box-shadow:
        0 8px 17px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
    box-shadow:
        0 12px 15px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4,
.modal {
    box-shadow:
        0 16px 28px 0 rgba(0, 0, 0, 0.22),
        0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
    box-shadow:
        0 27px 24px 0 rgba(0, 0, 0, 0.2),
        0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

.hoverable {
    transition: box-shadow 0.25s;
    box-shadow: 0;
}

.hoverable:hover {
    transition: box-shadow 0.25s;
    box-shadow:
        0 8px 17px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.divider {
    height: 1px;
    overflow: hidden;
    background-color: #e0e0e0;
}

blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #ee6e73;
}

i {
    line-height: inherit;
}

i.left {
    float: left;
    margin-right: 15px;
}

i.right {
    float: right;
    margin-left: 15px;
}

i.tiny {
    font-size: 1rem;
}

i.small {
    font-size: 2rem;
}

i.medium {
    font-size: 4rem;
}

i.large {
    font-size: 6rem;
}

img.responsive-img,
video.responsive-video {
    max-width: 100%;
    height: auto;
}

.pagination li {
    display: inline-block;
    font-size: 1.2rem;
    padding: 0 10px;
    line-height: 30px;
    border-radius: 2px;
    text-align: center;
}

.pagination li a {
    color: #444;
}

.pagination li.active a {
    color: #fff;
}

.pagination li.active {
    background-color: #ee6e73;
}

.pagination li.disabled a {
    cursor: default;
    color: #999;
}

.pagination li i {
    font-size: 2.2rem;
    vertical-align: middle;
}

.pagination li.pages ul li {
    display: inline-block;
    float: none;
}

@media only screen and (max-width: 992px) {
    .pagination {
        width: 100%;
    }
    .pagination li.prev,
    .pagination li.next {
        width: 10%;
    }
    .pagination li.pages {
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
    }
}

.breadcrumb {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb i,
.breadcrumb [class^="mdi-"],
.breadcrumb [class*="mdi-"],
.breadcrumb i.material-icons {
    display: inline-block;
    float: left;
    font-size: 24px;
}

.breadcrumb:before {
    content: "\E5CC";
    color: rgba(255, 255, 255, 0.7);
    vertical-align: top;
    display: inline-block;
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 25px;
    margin: 0 10px 0 8px;
    -webkit-font-smoothing: antialiased;
}

.breadcrumb:first-child:before {
    display: none;
}

.breadcrumb:last-child {
    color: #fff;
}

.parallax-container {
    position: relative;
    overflow: hidden;
    height: 500px;
}

.parallax {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.parallax img {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.pin-top,
.pin-bottom {
    position: relative;
}

.pinned {
    position: fixed !important;
}

/*********************
  Transition Classes
**********************/
ul.staggered-list li {
    opacity: 0;
}

.fade-in {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

/*********************
  Media Query Classes
**********************/
@media only screen and (max-width: 600px) {
    .hide-on-small-only,
    .hide-on-small-and-down {
        display: none !important;
    }
}

@media only screen and (max-width: 992px) {
    .hide-on-med-and-down {
        display: none !important;
    }
}

@media only screen and (min-width: 601px) {
    .hide-on-med-and-up {
        display: none !important;
    }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
    .hide-on-med-only {
        display: none !important;
    }
}

@media only screen and (min-width: 993px) {
    .hide-on-large-only {
        display: none !important;
    }
}

@media only screen and (min-width: 993px) {
    .show-on-large {
        display: block !important;
    }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
    .show-on-medium {
        display: block !important;
    }
}

@media only screen and (max-width: 600px) {
    .show-on-small {
        display: block !important;
    }
}

@media only screen and (min-width: 601px) {
    .show-on-medium-and-up {
        display: block !important;
    }
}

@media only screen and (max-width: 992px) {
    .show-on-medium-and-down {
        display: block !important;
    }
}

@media only screen and (max-width: 600px) {
    .center-on-small-only {
        text-align: center;
    }
}

footer.page-footer {
    margin-top: 20px;
    padding-top: 20px;
    background-color: #ee6e73;
}

footer.page-footer .footer-copyright {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(51, 51, 51, 0.08);
}

table,
th,
td {
    border: none;
}

table {
    width: 100%;
    display: table;
}

table.bordered > thead > tr,
table.bordered > tbody > tr {
    border-bottom: 1px solid #d0d0d0;
}

table.striped > tbody > tr:nth-child(odd) {
    background-color: #f2f2f2;
}

table.striped > tbody > tr > td {
    border-radius: 0;
}

table.highlight > tbody > tr {
    transition: background-color 0.25s ease;
}

table.highlight > tbody > tr:hover {
    background-color: #f2f2f2;
}

table.centered thead tr th,
table.centered tbody tr td {
    text-align: center;
}

thead {
    border-bottom: 1px solid #d0d0d0;
}

td,
th {
    padding: 15px 5px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
}

@media only screen and (max-width: 992px) {
    table.responsive-table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        display: block;
        position: relative;
        /* sort out borders */
    }
    table.responsive-table td:empty:before {
        content: "\00a0";
    }
    table.responsive-table th,
    table.responsive-table td {
        margin: 0;
        vertical-align: top;
    }
    table.responsive-table th {
        text-align: left;
    }
    table.responsive-table thead {
        display: block;
        float: left;
    }
    table.responsive-table thead tr {
        display: block;
        padding: 0 10px 0 0;
    }
    table.responsive-table thead tr th::before {
        content: "\00a0";
    }
    table.responsive-table tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
    }
    table.responsive-table tbody tr {
        display: inline-block;
        vertical-align: top;
    }
    table.responsive-table th {
        display: block;
        text-align: right;
    }
    table.responsive-table td {
        display: block;
        min-height: 1.25em;
        text-align: left;
    }
    table.responsive-table tr {
        padding: 0 10px;
    }
    table.responsive-table thead {
        border: 0;
        border-right: 1px solid #d0d0d0;
    }
    table.responsive-table.bordered th {
        border-bottom: 0;
        border-left: 0;
    }
    table.responsive-table.bordered td {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    table.responsive-table.bordered tr {
        border: 0;
    }
    table.responsive-table.bordered tbody tr {
        border-right: 1px solid #d0d0d0;
    }
}

.collection {
    margin: 0.5rem 0 1rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

.collection .collection-item.avatar {
    min-height: 84px;
    padding-left: 72px;
    position: relative;
}

.collection .collection-item.avatar .circle {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    left: 15px;
    display: inline-block;
    vertical-align: middle;
}

.collection .collection-item.avatar i.circle {
    font-size: 18px;
    line-height: 42px;
    color: #fff;
    background-color: #999;
    text-align: center;
}

.collection .collection-item.avatar .title {
    font-size: 16px;
}

.collection .collection-item.avatar p {
    margin: 0;
}

.collection .collection-item.avatar .secondary-content {
    position: absolute;
    top: 16px;
    right: 16px;
}

.collection .collection-item:last-child {
    border-bottom: none;
}

.collection .collection-item.active {
    background-color: #26a69a;
    color: #eafaf9;
}

.collection .collection-item.active .secondary-content {
    color: #fff;
}

.collection a.collection-item {
    display: block;
    transition: 0.25s;
    color: #26a69a;
}

.collection a.collection-item:not(.active):hover {
    background-color: #ddd;
}

.collection.with-header .collection-header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 20px;
}

.collection.with-header .collection-item {
    padding-left: 30px;
}

.collection.with-header .collection-item.avatar {
    padding-left: 72px;
}

.secondary-content {
    float: right;
    color: #26a69a;
}

.collapsible .collection {
    margin: 0;
    border: none;
}

span.badge {
    min-width: 3rem;
    padding: 0 6px;
    text-align: center;
    font-size: 1rem;
    line-height: inherit;
    color: #757575;
    position: absolute;
    right: 15px;
    box-sizing: border-box;
}

span.badge.new {
    font-weight: 300;
    font-size: 0.8rem;
    color: #fff;
    background-color: #26a69a;
    border-radius: 2px;
}

span.badge.new:after {
    content: " new";
}

nav ul a span.badge {
    position: static;
    margin-left: 4px;
    line-height: 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.progress {
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: #acece6;
    border-radius: 2px;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden;
}

.progress .determinate {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #26a69a;
    transition: width 0.3s linear;
}

.progress .indeterminate {
    background-color: #26a69a;
}

.progress .indeterminate:before {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.progress .indeterminate:after {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

/*******************
  Utility Classes
*******************/
.hide {
    display: none !important;
}

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

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

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

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.no-select,
input[type="range"],
input[type="range"] + .thumb {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.enable-select {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.circle {
    border-radius: 50%;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

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

.no-padding {
    padding: 0 !important;
}

/* This is needed for some mobile phones to display the Google Icon font properly */
.material-icons {
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
}

.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}

@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}

.container .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.section.no-pad {
    padding: 0;
}

.section.no-pad-bot {
    padding-bottom: 0;
}

.section.no-pad-top {
    padding-top: 0;
}

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.row .col {
    float: left;
    box-sizing: border-box;
    padding: 0 0.75rem;
}

.row .col[class*="push-"],
.row .col[class*="pull-"] {
    position: relative;
}

.row .col.s1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.offset-s1 {
    margin-left: 8.3333333333%;
}

.row .col.pull-s1 {
    right: 8.3333333333%;
}

.row .col.push-s1 {
    left: 8.3333333333%;
}

.row .col.offset-s2 {
    margin-left: 16.6666666667%;
}

.row .col.pull-s2 {
    right: 16.6666666667%;
}

.row .col.push-s2 {
    left: 16.6666666667%;
}

.row .col.offset-s3 {
    margin-left: 25%;
}

.row .col.pull-s3 {
    right: 25%;
}

.row .col.push-s3 {
    left: 25%;
}

.row .col.offset-s4 {
    margin-left: 33.3333333333%;
}

.row .col.pull-s4 {
    right: 33.3333333333%;
}

.row .col.push-s4 {
    left: 33.3333333333%;
}

.row .col.offset-s5 {
    margin-left: 41.6666666667%;
}

.row .col.pull-s5 {
    right: 41.6666666667%;
}

.row .col.push-s5 {
    left: 41.6666666667%;
}

.row .col.offset-s6 {
    margin-left: 50%;
}

.row .col.pull-s6 {
    right: 50%;
}

.row .col.push-s6 {
    left: 50%;
}

.row .col.offset-s7 {
    margin-left: 58.3333333333%;
}

.row .col.pull-s7 {
    right: 58.3333333333%;
}

.row .col.push-s7 {
    left: 58.3333333333%;
}

.row .col.offset-s8 {
    margin-left: 66.6666666667%;
}

.row .col.pull-s8 {
    right: 66.6666666667%;
}

.row .col.push-s8 {
    left: 66.6666666667%;
}

.row .col.offset-s9 {
    margin-left: 75%;
}

.row .col.pull-s9 {
    right: 75%;
}

.row .col.push-s9 {
    left: 75%;
}

.row .col.offset-s10 {
    margin-left: 83.3333333333%;
}

.row .col.pull-s10 {
    right: 83.3333333333%;
}

.row .col.push-s10 {
    left: 83.3333333333%;
}

.row .col.offset-s11 {
    margin-left: 91.6666666667%;
}

.row .col.pull-s11 {
    right: 91.6666666667%;
}

.row .col.push-s11 {
    left: 91.6666666667%;
}

.row .col.offset-s12 {
    margin-left: 100%;
}

.row .col.pull-s12 {
    right: 100%;
}

.row .col.push-s12 {
    left: 100%;
}

@media only screen and (min-width: 601px) {
    .row .col.m1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.offset-m1 {
        margin-left: 8.3333333333%;
    }
    .row .col.pull-m1 {
        right: 8.3333333333%;
    }
    .row .col.push-m1 {
        left: 8.3333333333%;
    }
    .row .col.offset-m2 {
        margin-left: 16.6666666667%;
    }
    .row .col.pull-m2 {
        right: 16.6666666667%;
    }
    .row .col.push-m2 {
        left: 16.6666666667%;
    }
    .row .col.offset-m3 {
        margin-left: 25%;
    }
    .row .col.pull-m3 {
        right: 25%;
    }
    .row .col.push-m3 {
        left: 25%;
    }
    .row .col.offset-m4 {
        margin-left: 33.3333333333%;
    }
    .row .col.pull-m4 {
        right: 33.3333333333%;
    }
    .row .col.push-m4 {
        left: 33.3333333333%;
    }
    .row .col.offset-m5 {
        margin-left: 41.6666666667%;
    }
    .row .col.pull-m5 {
        right: 41.6666666667%;
    }
    .row .col.push-m5 {
        left: 41.6666666667%;
    }
    .row .col.offset-m6 {
        margin-left: 50%;
    }
    .row .col.pull-m6 {
        right: 50%;
    }
    .row .col.push-m6 {
        left: 50%;
    }
    .row .col.offset-m7 {
        margin-left: 58.3333333333%;
    }
    .row .col.pull-m7 {
        right: 58.3333333333%;
    }
    .row .col.push-m7 {
        left: 58.3333333333%;
    }
    .row .col.offset-m8 {
        margin-left: 66.6666666667%;
    }
    .row .col.pull-m8 {
        right: 66.6666666667%;
    }
    .row .col.push-m8 {
        left: 66.6666666667%;
    }
    .row .col.offset-m9 {
        margin-left: 75%;
    }
    .row .col.pull-m9 {
        right: 75%;
    }
    .row .col.push-m9 {
        left: 75%;
    }
    .row .col.offset-m10 {
        margin-left: 83.3333333333%;
    }
    .row .col.pull-m10 {
        right: 83.3333333333%;
    }
    .row .col.push-m10 {
        left: 83.3333333333%;
    }
    .row .col.offset-m11 {
        margin-left: 91.6666666667%;
    }
    .row .col.pull-m11 {
        right: 91.6666666667%;
    }
    .row .col.push-m11 {
        left: 91.6666666667%;
    }
    .row .col.offset-m12 {
        margin-left: 100%;
    }
    .row .col.pull-m12 {
        right: 100%;
    }
    .row .col.push-m12 {
        left: 100%;
    }
}

@media only screen and (min-width: 993px) {
    .row .col.l1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.offset-l1 {
        margin-left: 8.3333333333%;
    }
    .row .col.pull-l1 {
        right: 8.3333333333%;
    }
    .row .col.push-l1 {
        left: 8.3333333333%;
    }
    .row .col.offset-l2 {
        margin-left: 16.6666666667%;
    }
    .row .col.pull-l2 {
        right: 16.6666666667%;
    }
    .row .col.push-l2 {
        left: 16.6666666667%;
    }
    .row .col.offset-l3 {
        margin-left: 25%;
    }
    .row .col.pull-l3 {
        right: 25%;
    }
    .row .col.push-l3 {
        left: 25%;
    }
    .row .col.offset-l4 {
        margin-left: 33.3333333333%;
    }
    .row .col.pull-l4 {
        right: 33.3333333333%;
    }
    .row .col.push-l4 {
        left: 33.3333333333%;
    }
    .row .col.offset-l5 {
        margin-left: 41.6666666667%;
    }
    .row .col.pull-l5 {
        right: 41.6666666667%;
    }
    .row .col.push-l5 {
        left: 41.6666666667%;
    }
    .row .col.offset-l6 {
        margin-left: 50%;
    }
    .row .col.pull-l6 {
        right: 50%;
    }
    .row .col.push-l6 {
        left: 50%;
    }
    .row .col.offset-l7 {
        margin-left: 58.3333333333%;
    }
    .row .col.pull-l7 {
        right: 58.3333333333%;
    }
    .row .col.push-l7 {
        left: 58.3333333333%;
    }
    .row .col.offset-l8 {
        margin-left: 66.6666666667%;
    }
    .row .col.pull-l8 {
        right: 66.6666666667%;
    }
    .row .col.push-l8 {
        left: 66.6666666667%;
    }
    .row .col.offset-l9 {
        margin-left: 75%;
    }
    .row .col.pull-l9 {
        right: 75%;
    }
    .row .col.push-l9 {
        left: 75%;
    }
    .row .col.offset-l10 {
        margin-left: 83.3333333333%;
    }
    .row .col.pull-l10 {
        right: 83.3333333333%;
    }
    .row .col.push-l10 {
        left: 83.3333333333%;
    }
    .row .col.offset-l11 {
        margin-left: 91.6666666667%;
    }
    .row .col.pull-l11 {
        right: 91.6666666667%;
    }
    .row .col.push-l11 {
        left: 91.6666666667%;
    }
    .row .col.offset-l12 {
        margin-left: 100%;
    }
    .row .col.pull-l12 {
        right: 100%;
    }
    .row .col.push-l12 {
        left: 100%;
    }
}

nav {
    color: #fff;
    background-color: #ee6e73;
    width: 100%;
    height: 56px;
    line-height: 56px;
}

nav a {
    color: #fff;
}

nav i,
nav [class^="mdi-"],
nav [class*="mdi-"],
nav i.material-icons {
    display: block;
    font-size: 2rem;
    height: 56px;
    line-height: 56px;
}

nav .nav-wrapper {
    position: relative;
    height: 100%;
}

@media only screen and (min-width: 993px) {
    nav a.button-collapse {
        display: none;
    }
}

nav .button-collapse {
    float: left;
    position: relative;
    z-index: 1;
    height: 56px;
}

nav .button-collapse i {
    font-size: 2.7rem;
    height: 56px;
    line-height: 56px;
}

nav .brand-logo {
    position: absolute;
    color: #fff;
    display: inline-block;
    font-size: 2.1rem;
    padding: 0;
    white-space: nowrap;
}

nav .brand-logo.center {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media only screen and (max-width: 992px) {
    nav .brand-logo {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    nav .brand-logo.left,
    nav .brand-logo.right {
        padding: 0;
        -webkit-transform: none;
        transform: none;
    }
    nav .brand-logo.left {
        left: 0.5rem;
    }
    nav .brand-logo.right {
        right: 0.5rem;
        left: auto;
    }
}

nav .brand-logo.right {
    right: 0.5rem;
    padding: 0;
}

nav ul {
    margin: 0;
}

nav ul li {
    transition: background-color 0.3s;
    float: left;
    padding: 0;
}

nav ul li.active {
    background-color: rgba(0, 0, 0, 0.1);
}

nav ul a {
    transition: background-color 0.3s;
    font-size: 1rem;
    color: #fff;
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
}

nav ul a.btn,
nav ul a.btn-large,
nav ul a.btn-large,
nav ul a.btn-flat,
nav ul a.btn-floating {
    margin-top: -2px;
    margin-left: 15px;
    margin-right: 15px;
}

nav ul a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

nav ul.left {
    float: left;
}

nav .input-field {
    margin: 0;
}

nav .input-field input {
    height: 100%;
    font-size: 1.2rem;
    border: none;
    padding-left: 2rem;
}

nav .input-field input:focus,
nav .input-field input[type="text"]:valid,
nav .input-field input[type="password"]:valid,
nav .input-field input[type="email"]:valid,
nav .input-field input[type="url"]:valid,
nav .input-field input[type="date"]:valid {
    border: none;
    box-shadow: none;
}

nav .input-field label {
    top: 0;
    left: 0;
}

nav .input-field label i {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s;
}

nav .input-field label.active i {
    color: #fff;
}

nav .input-field label.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.navbar-fixed {
    position: relative;
    height: 56px;
    z-index: 998;
}

.navbar-fixed nav {
    position: fixed;
}

@media only screen and (min-width: 601px) {
    nav,
    nav .nav-wrapper i,
    nav a.button-collapse,
    nav a.button-collapse i {
        height: 64px;
        line-height: 64px;
    }
    .navbar-fixed {
        height: 64px;
    }
}

@font-face {
    font-family: "Roboto";
    src:
        local(Roboto Thin),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Thin.eot");
    src:
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Thin.eot?#iefix")
            format("embedded-opentype"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Thin.woff2") format("woff2"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Thin.woff") format("woff"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Thin.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Roboto";
    src:
        local(Roboto Light),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Light.eot");
    src:
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Light.eot?#iefix")
            format("embedded-opentype"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Light.woff2") format("woff2"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Light.woff") format("woff"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Light.ttf")
            format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Roboto";
    src:
        local(Roboto Regular),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Regular.eot");
    src:
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Regular.eot?#iefix")
            format("embedded-opentype"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Regular.woff2")
            format("woff2"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Regular.woff") format("woff"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Regular.ttf")
            format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Medium.eot");
    src:
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Medium.eot?#iefix")
            format("embedded-opentype"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Medium.woff2")
            format("woff2"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Medium.woff") format("woff"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Medium.ttf")
            format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Roboto";
    src: url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Bold.eot");
    src:
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Bold.eot?#iefix")
            format("embedded-opentype"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Bold.woff2") format("woff2"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Bold.woff") format("woff"),
        url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
}

a {
    text-decoration: none;
}

html {
    line-height: 1.5;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.87);
}

@media only screen and (min-width: 0) {
    html {
        font-size: 14px;
    }
}

@media only screen and (min-width: 992px) {
    html {
        font-size: 14.5px;
    }
}

@media only screen and (min-width: 1200px) {
    html {
        font-size: 15px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    line-height: 1.1;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: inherit;
}

h1 {
    font-size: 4.2rem;
    line-height: 110%;
    margin: 2.1rem 0 1.68rem 0;
}

h2 {
    font-size: 3.56rem;
    line-height: 110%;
    margin: 1.78rem 0 1.424rem 0;
}

h3 {
    font-size: 2.92rem;
    line-height: 110%;
    margin: 1.46rem 0 1.168rem 0;
}

h4 {
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.14rem 0 0.912rem 0;
}

h5 {
    font-size: 1.64rem;
    line-height: 110%;
    margin: 0.82rem 0 0.656rem 0;
}

h6 {
    font-size: 1rem;
    line-height: 110%;
    margin: 0.5rem 0 0.4rem 0;
}

em {
    font-style: italic;
}

strong {
    font-weight: 500;
}

small {
    font-size: 75%;
}

.light,
footer.page-footer .footer-copyright {
    font-weight: 300;
}

.thin {
    font-weight: 200;
}

.flow-text {
    font-weight: 300;
}

@media only screen and (min-width: 360px) {
    .flow-text {
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 390px) {
    .flow-text {
        font-size: 1.224rem;
    }
}

@media only screen and (min-width: 420px) {
    .flow-text {
        font-size: 1.248rem;
    }
}

@media only screen and (min-width: 450px) {
    .flow-text {
        font-size: 1.272rem;
    }
}

@media only screen and (min-width: 480px) {
    .flow-text {
        font-size: 1.296rem;
    }
}

@media only screen and (min-width: 510px) {
    .flow-text {
        font-size: 1.32rem;
    }
}

@media only screen and (min-width: 540px) {
    .flow-text {
        font-size: 1.344rem;
    }
}

@media only screen and (min-width: 570px) {
    .flow-text {
        font-size: 1.368rem;
    }
}

@media only screen and (min-width: 600px) {
    .flow-text {
        font-size: 1.392rem;
    }
}

@media only screen and (min-width: 630px) {
    .flow-text {
        font-size: 1.416rem;
    }
}

@media only screen and (min-width: 660px) {
    .flow-text {
        font-size: 1.44rem;
    }
}

@media only screen and (min-width: 690px) {
    .flow-text {
        font-size: 1.464rem;
    }
}

@media only screen and (min-width: 720px) {
    .flow-text {
        font-size: 1.488rem;
    }
}

@media only screen and (min-width: 750px) {
    .flow-text {
        font-size: 1.512rem;
    }
}

@media only screen and (min-width: 780px) {
    .flow-text {
        font-size: 1.536rem;
    }
}

@media only screen and (min-width: 810px) {
    .flow-text {
        font-size: 1.56rem;
    }
}

@media only screen and (min-width: 840px) {
    .flow-text {
        font-size: 1.584rem;
    }
}

@media only screen and (min-width: 870px) {
    .flow-text {
        font-size: 1.608rem;
    }
}

@media only screen and (min-width: 900px) {
    .flow-text {
        font-size: 1.632rem;
    }
}

@media only screen and (min-width: 930px) {
    .flow-text {
        font-size: 1.656rem;
    }
}

@media only screen and (min-width: 960px) {
    .flow-text {
        font-size: 1.68rem;
    }
}

@media only screen and (max-width: 360px) {
    .flow-text {
        font-size: 1.2rem;
    }
}

.card-panel {
    transition: box-shadow 0.25s;
    padding: 20px;
    margin: 0.5rem 0 1rem 0;
    border-radius: 2px;
    background-color: #fff;
}

.card {
    position: relative;
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    transition: box-shadow 0.25s;
    border-radius: 2px;
}

.card .card-title {
    font-size: 24px;
    font-weight: 300;
}

.card .card-title.activator {
    cursor: pointer;
}

.card.small,
.card.medium,
.card.large {
    position: relative;
}

.card.small .card-image,
.card.medium .card-image,
.card.large .card-image {
    max-height: 60%;
    overflow: hidden;
}

.card.small .card-content,
.card.medium .card-content,
.card.large .card-content {
    max-height: 40%;
    overflow: hidden;
}

.card.small .card-action,
.card.medium .card-action,
.card.large .card-action {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.card.small {
    height: 300px;
}

.card.medium {
    height: 400px;
}

.card.large {
    height: 500px;
}

.card .card-image {
    position: relative;
}

.card .card-image img {
    display: block;
    border-radius: 2px 2px 0 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
}

.card .card-image .card-title {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
}

.card .card-content {
    padding: 20px;
    border-radius: 0 0 2px 2px;
}

.card .card-content p {
    margin: 0px 0px 10px;
    color: inherit;
}

.card .card-content .card-title {
    line-height: 48px;
}

.card .card-action {
    position: relative;
    background-color: inherit;
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 20px;
    z-index: 2;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
    color: #ffab40;
    margin-right: 20px;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
    color: #ffd8a6;
}

.card .card-action + .card-reveal {
    z-index: 1;
    padding-bottom: 64px;
}

.card .card-reveal {
    padding: 20px;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    top: 100%;
    height: 100%;
    z-index: 3;
    display: none;
}

.card .card-reveal .card-title {
    cursor: pointer;
    display: block;
}

#toast-container {
    display: block;
    position: fixed;
    z-index: 10000;
}

@media only screen and (max-width: 600px) {
    #toast-container {
        min-width: 100%;
        bottom: 0%;
    }
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
    #toast-container {
        left: 5%;
        bottom: 7%;
        max-width: 90%;
    }
}

@media only screen and (min-width: 993px) {
    #toast-container {
        top: 10%;
        right: 7%;
        max-width: 86%;
    }
}

.toast {
    border-radius: 2px;
    top: 0;
    width: auto;
    clear: both;
    margin-top: 10px;
    position: relative;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    line-height: 1.5em;
    word-break: break-all;
    background-color: #323232;
    padding: 10px 25px;
    font-size: 1.1rem;
    font-weight: 300;
    color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.toast .btn,
.toast .btn-large,
.toast .btn-flat {
    margin: 0;
    margin-left: 3rem;
}

.toast.rounded {
    border-radius: 24px;
}

@media only screen and (max-width: 600px) {
    .toast {
        width: 100%;
        border-radius: 0;
    }
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
    .toast {
        float: left;
    }
}

@media only screen and (min-width: 993px) {
    .toast {
        float: right;
    }
}

.tabs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
    white-space: nowrap;
}

.tabs .tab {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: block;
    float: left;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0.8px;
    width: 15%;
    min-width: 80px;
}

.tabs .tab a {
    color: #ee6e73;
    display: block;
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color 0.28s ease;
}

.tabs .tab a:hover {
    color: #f9c9cb;
}

.tabs .tab.disabled a {
    color: #f9c9cb;
    cursor: default;
}

.tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #f6b2b5;
    will-change: left, right;
}

.material-tooltip {
    padding: 10px 8px;
    font-size: 1rem;
    z-index: 2000;
    background-color: transparent;
    border-radius: 2px;
    color: #fff;
    min-height: 36px;
    line-height: 120%;
    opacity: 0;
    display: none;
    position: absolute;
    text-align: center;
    max-width: calc(100% - 4px);
    overflow: hidden;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: top, left;
}

.backdrop {
    position: absolute;
    opacity: 0;
    display: none;
    height: 7px;
    width: 14px;
    border-radius: 0 0 14px 14px;
    background-color: #323232;
    z-index: -1;
    -webkit-transform-origin: 50% 10%;
    transform-origin: 50% 10%;
    will-change: transform, opacity;
}

.btn,
.btn-large,
.btn-flat {
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    outline: 0;
    padding: 0 2rem;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

.btn.disabled,
.disabled.btn-large,
.btn-floating.disabled,
.btn-large.disabled,
.btn:disabled .btn-large:disabled,
.btn-large:disabled .btn-large:disabled,
.btn-floating:disabled {
    background-color: #dfdfdf !important;
    box-shadow: none;
    color: #9f9f9f !important;
    cursor: default;
}

.btn.disabled *,
.disabled.btn-large *,
.btn-floating.disabled *,
.btn-large.disabled *,
.btn:disabled .btn-large:disabled *,
.btn-large:disabled .btn-large:disabled *,
.btn-floating:disabled * {
    pointer-events: none;
}

.btn.disabled:hover,
.disabled.btn-large:hover,
.btn-floating.disabled:hover,
.btn-large.disabled:hover,
.btn:disabled .btn-large:disabled:hover,
.btn-large:disabled .btn-large:disabled:hover,
.btn-floating:disabled:hover {
    background-color: #dfdfdf !important;
    color: #9f9f9f !important;
}

.btn i,
.btn-large i,
.btn-floating i,
.btn-large i,
.btn-flat i {
    font-size: 1.3rem;
    line-height: inherit;
}

.btn,
.btn-large {
    text-decoration: none;
    color: #fff;
    background-color: #26a69a;
    text-align: center;
    letter-spacing: 0.5px;
    transition: 0.2s ease-out;
    cursor: pointer;
}

.btn:hover,
.btn-large:hover {
    background-color: #2bbbad;
}

.btn-floating {
    display: inline-block;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 37px;
    height: 37px;
    line-height: 37px;
    padding: 0;
    background-color: #26a69a;
    border-radius: 50%;
    transition: 0.3s;
    cursor: pointer;
    vertical-align: middle;
}

.btn-floating i {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    line-height: 37px;
}

.btn-floating:hover {
    background-color: #26a69a;
}

.btn-floating:before {
    border-radius: 0;
}

.btn-floating.btn-large {
    width: 55.5px;
    height: 55.5px;
}

.btn-floating.btn-large i {
    line-height: 55.5px;
}

button.btn-floating {
    border: none;
}

.fixed-action-btn {
    position: fixed;
    right: 23px;
    bottom: 23px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

.fixed-action-btn.active ul {
    visibility: visible;
}

.fixed-action-btn.horizontal {
    padding: 0 0 0 15px;
}

.fixed-action-btn.horizontal ul {
    text-align: right;
    right: 64px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 100%;
    left: auto;
    width: 500px;
    /*width 100% only goes to width of button container */
}

.fixed-action-btn.horizontal ul li {
    display: inline-block;
    margin: 15px 15px 0 0;
}

.fixed-action-btn ul {
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
    bottom: 64px;
    margin: 0;
    visibility: hidden;
}

.fixed-action-btn ul li {
    margin-bottom: 15px;
}

.fixed-action-btn ul a.btn-floating {
    opacity: 0;
}

.btn-flat {
    box-shadow: none;
    background-color: transparent;
    color: #343434;
    cursor: pointer;
}

.btn-flat.disabled {
    color: #b3b3b3;
    cursor: default;
}

.btn-large {
    height: 54px;
    line-height: 54px;
}

.btn-large i {
    font-size: 1.6rem;
}

.btn-block {
    display: block;
}

.dropdown-content {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 100px;
    max-height: 650px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    z-index: 999;
    will-change: width, height;
}

.dropdown-content li {
    clear: both;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    min-height: 50px;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;
    text-transform: none;
}

.dropdown-content li:hover,
.dropdown-content li.active,
.dropdown-content li.selected {
    background-color: #eee;
}

.dropdown-content li.active.selected {
    background-color: #e1e1e1;
}

.dropdown-content li.divider {
    min-height: 0;
    height: 1px;
}

.dropdown-content li > a,
.dropdown-content li > span {
    font-size: 16px;
    color: #26a69a;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
}

.dropdown-content li > span > label {
    top: 1px;
    left: 3px;
    height: 18px;
}

.dropdown-content li > a > i {
    height: inherit;
    line-height: inherit;
}

/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    transition: all 0.3s ease-out;
}

.waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.7s ease-out;
    transition-property:
        opacity,
        -webkit-transform;
    transition-property: transform, opacity;
    transition-property:
        transform,
        opacity,
        -webkit-transform;
    -webkit-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45);
}

.waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7);
}

.waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7);
}

.waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7);
}

.waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7);
}

.waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7);
}

.waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7);
}

.waves-effect input[type="button"],
.waves-effect input[type="reset"],
.waves-effect input[type="submit"] {
    border: 0;
    font-style: normal;
    font-size: inherit;
    text-transform: inherit;
    background: none;
}

.waves-notransition {
    transition: none !important;
}

.waves-circle {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.waves-input-wrapper {
    border-radius: 0.2em;
    vertical-align: bottom;
}

.waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.waves-circle {
    text-align: center;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 50%;
    -webkit-mask-image: none;
}

.waves-block {
    display: block;
}

/* Firefox Bug: link not triggered */
a.waves-effect .waves-ripple {
    z-index: -1;
}

.modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 70%;
    width: 55%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
}

@media only screen and (max-width: 992px) {
    .modal {
        width: 80%;
    }
}

.modal h1,
.modal h2,
.modal h3,
.modal h4 {
    margin-top: 0;
}

.modal .modal-content {
    padding: 24px;
}

.modal .modal-close {
    cursor: pointer;
}

.modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%;
}

.modal .modal-footer .btn,
.modal .modal-footer .btn-large,
.modal .modal-footer .btn-flat {
    float: right;
    margin: 6px 0;
}

.lean-overlay {
    position: fixed;
    z-index: 999;
    top: -100px;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: #000;
    display: none;
    will-change: opacity;
}

.modal.modal-fixed-footer {
    padding: 0;
    height: 70%;
}

.modal.modal-fixed-footer .modal-content {
    position: absolute;
    height: calc(100% - 56px);
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
}

.modal.modal-fixed-footer .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
}

.modal.bottom-sheet {
    top: auto;
    bottom: -100%;
    margin: 0;
    width: 100%;
    max-height: 45%;
    border-radius: 0;
    will-change: bottom, opacity;
}

.collapsible {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    margin: 0.5rem 0 1rem 0;
}

.collapsible-header {
    display: block;
    cursor: pointer;
    min-height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    line-height: 3rem;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem;
}

.collapsible-body {
    display: none;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.collapsible-body p {
    margin: 0;
    padding: 2rem;
}

.side-nav .collapsible,
.side-nav.fixed .collapsible {
    border: none;
    box-shadow: none;
}

.side-nav .collapsible li,
.side-nav.fixed .collapsible li {
    padding: 0;
}

.side-nav .collapsible-header,
.side-nav.fixed .collapsible-header {
    background-color: transparent;
    border: none;
    line-height: inherit;
    height: inherit;
    padding: 0 30px;
}

.side-nav .collapsible-header:hover,
.side-nav.fixed .collapsible-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.side-nav .collapsible-header i,
.side-nav.fixed .collapsible-header i {
    line-height: inherit;
}

.side-nav .collapsible-body,
.side-nav.fixed .collapsible-body {
    border: 0;
    background-color: #fff;
}

.side-nav .collapsible-body li a,
.side-nav.fixed .collapsible-body li a {
    padding: 0 37.5px 0 45px;
}

.collapsible.popout {
    border: none;
    box-shadow: none;
}

.collapsible.popout > li {
    box-shadow:
        0 2px 5px 0 rgba(0, 0, 0, 0.16),
        0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin: 0 24px;
    transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.collapsible.popout > li.active {
    box-shadow:
        0 5px 11px 0 rgba(0, 0, 0, 0.18),
        0 4px 15px 0 rgba(0, 0, 0, 0.15);
    margin: 16px 0;
}

.chip {
    display: inline-block;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background-color: #e4e4e4;
}

.chip img {
    float: left;
    margin: 0 8px 0 -12px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.chip i.material-icons {
    cursor: pointer;
    float: right;
    font-size: 16px;
    line-height: 32px;
    padding-left: 8px;
}

.materialboxed {
    display: block;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    position: relative;
    transition: opacity 0.4s;
}

.materialboxed:hover {
    will-change: left, top, width, height;
}

.materialboxed:hover:not(.active) {
    opacity: 0.8;
}

.materialboxed.active {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

#materialbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #292929;
    z-index: 1000;
    will-change: opacity;
}

.materialbox-caption {
    position: fixed;
    display: none;
    color: #fff;
    line-height: 50px;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0% 15%;
    height: 50px;
    z-index: 1000;
    -webkit-font-smoothing: antialiased;
}

select:focus {
    outline: 1px solid #c9f3ef;
}

button:focus {
    outline: none;
    background-color: #2ab7a9;
}

label {
    font-size: 0.8rem;
    color: #9e9e9e;
}

/* Text Inputs + Textarea
   ========================================================================== */
/* Style Placeholders */
::-webkit-input-placeholder {
    color: #d1d1d1;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #d1d1d1;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #d1d1d1;
}

:-ms-input-placeholder {
    color: #d1d1d1;
}

/* Text inputs */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="time"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea.materialize-textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 15px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 0.3s;
}

input:not([type]):disabled,
input:not([type])[readonly="readonly"],
input[type="text"]:disabled,
input[type="text"][readonly="readonly"],
input[type="password"]:disabled,
input[type="password"][readonly="readonly"],
input[type="email"]:disabled,
input[type="email"][readonly="readonly"],
input[type="url"]:disabled,
input[type="url"][readonly="readonly"],
input[type="time"]:disabled,
input[type="time"][readonly="readonly"],
input[type="date"]:disabled,
input[type="date"][readonly="readonly"],
input[type="datetime"]:disabled,
input[type="datetime"][readonly="readonly"],
input[type="datetime-local"]:disabled,
input[type="datetime-local"][readonly="readonly"],
input[type="tel"]:disabled,
input[type="tel"][readonly="readonly"],
input[type="number"]:disabled,
input[type="number"][readonly="readonly"],
input[type="search"]:disabled,
input[type="search"][readonly="readonly"],
textarea.materialize-textarea:disabled,
textarea.materialize-textarea[readonly="readonly"] {
    color: rgba(0, 0, 0, 0.26);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.26);
}

input:not([type]):disabled + label,
input:not([type])[readonly="readonly"] + label,
input[type="text"]:disabled + label,
input[type="text"][readonly="readonly"] + label,
input[type="password"]:disabled + label,
input[type="password"][readonly="readonly"] + label,
input[type="email"]:disabled + label,
input[type="email"][readonly="readonly"] + label,
input[type="url"]:disabled + label,
input[type="url"][readonly="readonly"] + label,
input[type="time"]:disabled + label,
input[type="time"][readonly="readonly"] + label,
input[type="date"]:disabled + label,
input[type="date"][readonly="readonly"] + label,
input[type="datetime"]:disabled + label,
input[type="datetime"][readonly="readonly"] + label,
input[type="datetime-local"]:disabled + label,
input[type="datetime-local"][readonly="readonly"] + label,
input[type="tel"]:disabled + label,
input[type="tel"][readonly="readonly"] + label,
input[type="number"]:disabled + label,
input[type="number"][readonly="readonly"] + label,
input[type="search"]:disabled + label,
input[type="search"][readonly="readonly"] + label,
textarea.materialize-textarea:disabled + label,
textarea.materialize-textarea[readonly="readonly"] + label {
    color: rgba(0, 0, 0, 0.26);
}

input:not([type]):focus:not([readonly]),
input[type="text"]:focus:not([readonly]),
input[type="password"]:focus:not([readonly]),
input[type="email"]:focus:not([readonly]),
input[type="url"]:focus:not([readonly]),
input[type="time"]:focus:not([readonly]),
input[type="date"]:focus:not([readonly]),
input[type="datetime"]:focus:not([readonly]),
input[type="datetime-local"]:focus:not([readonly]),
input[type="tel"]:focus:not([readonly]),
input[type="number"]:focus:not([readonly]),
input[type="search"]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #26a69a;
    box-shadow: 0 1px 0 0 #26a69a;
}

input:not([type]):focus:not([readonly]) + label,
input[type="text"]:focus:not([readonly]) + label,
input[type="password"]:focus:not([readonly]) + label,
input[type="email"]:focus:not([readonly]) + label,
input[type="url"]:focus:not([readonly]) + label,
input[type="time"]:focus:not([readonly]) + label,
input[type="date"]:focus:not([readonly]) + label,
input[type="datetime"]:focus:not([readonly]) + label,
input[type="datetime-local"]:focus:not([readonly]) + label,
input[type="tel"]:focus:not([readonly]) + label,
input[type="number"]:focus:not([readonly]) + label,
input[type="search"]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #26a69a;
}

input:not([type]).valid,
input:not([type]):focus.valid,
input[type="text"].valid,
input[type="text"]:focus.valid,
input[type="password"].valid,
input[type="password"]:focus.valid,
input[type="email"].valid,
input[type="email"]:focus.valid,
input[type="url"].valid,
input[type="url"]:focus.valid,
input[type="time"].valid,
input[type="time"]:focus.valid,
input[type="date"].valid,
input[type="date"]:focus.valid,
input[type="datetime"].valid,
input[type="datetime"]:focus.valid,
input[type="datetime-local"].valid,
input[type="datetime-local"]:focus.valid,
input[type="tel"].valid,
input[type="tel"]:focus.valid,
input[type="number"].valid,
input[type="number"]:focus.valid,
input[type="search"].valid,
input[type="search"]:focus.valid,
textarea.materialize-textarea.valid,
textarea.materialize-textarea:focus.valid {
    border-bottom: 1px solid #4caf50;
    box-shadow: 0 1px 0 0 #4caf50;
}

input:not([type]).valid + label:after,
input:not([type]):focus.valid + label:after,
input[type="text"].valid + label:after,
input[type="text"]:focus.valid + label:after,
input[type="password"].valid + label:after,
input[type="password"]:focus.valid + label:after,
input[type="email"].valid + label:after,
input[type="email"]:focus.valid + label:after,
input[type="url"].valid + label:after,
input[type="url"]:focus.valid + label:after,
input[type="time"].valid + label:after,
input[type="time"]:focus.valid + label:after,
input[type="date"].valid + label:after,
input[type="date"]:focus.valid + label:after,
input[type="datetime"].valid + label:after,
input[type="datetime"]:focus.valid + label:after,
input[type="datetime-local"].valid + label:after,
input[type="datetime-local"]:focus.valid + label:after,
input[type="tel"].valid + label:after,
input[type="tel"]:focus.valid + label:after,
input[type="number"].valid + label:after,
input[type="number"]:focus.valid + label:after,
input[type="search"].valid + label:after,
input[type="search"]:focus.valid + label:after,
textarea.materialize-textarea.valid + label:after,
textarea.materialize-textarea:focus.valid + label:after {
    content: attr(data-success);
    color: #4caf50;
    opacity: 1;
}

input:not([type]).invalid,
input:not([type]):focus.invalid,
input[type="text"].invalid,
input[type="text"]:focus.invalid,
input[type="password"].invalid,
input[type="password"]:focus.invalid,
input[type="email"].invalid,
input[type="email"]:focus.invalid,
input[type="url"].invalid,
input[type="url"]:focus.invalid,
input[type="time"].invalid,
input[type="time"]:focus.invalid,
input[type="date"].invalid,
input[type="date"]:focus.invalid,
input[type="datetime"].invalid,
input[type="datetime"]:focus.invalid,
input[type="datetime-local"].invalid,
input[type="datetime-local"]:focus.invalid,
input[type="tel"].invalid,
input[type="tel"]:focus.invalid,
input[type="number"].invalid,
input[type="number"]:focus.invalid,
input[type="search"].invalid,
input[type="search"]:focus.invalid,
textarea.materialize-textarea.invalid,
textarea.materialize-textarea:focus.invalid {
    border-bottom: 1px solid #f44336;
    box-shadow: 0 1px 0 0 #f44336;
}

input:not([type]).invalid + label:after,
input:not([type]):focus.invalid + label:after,
input[type="text"].invalid + label:after,
input[type="text"]:focus.invalid + label:after,
input[type="password"].invalid + label:after,
input[type="password"]:focus.invalid + label:after,
input[type="email"].invalid + label:after,
input[type="email"]:focus.invalid + label:after,
input[type="url"].invalid + label:after,
input[type="url"]:focus.invalid + label:after,
input[type="time"].invalid + label:after,
input[type="time"]:focus.invalid + label:after,
input[type="date"].invalid + label:after,
input[type="date"]:focus.invalid + label:after,
input[type="datetime"].invalid + label:after,
input[type="datetime"]:focus.invalid + label:after,
input[type="datetime-local"].invalid + label:after,
input[type="datetime-local"]:focus.invalid + label:after,
input[type="tel"].invalid + label:after,
input[type="tel"]:focus.invalid + label:after,
input[type="number"].invalid + label:after,
input[type="number"]:focus.invalid + label:after,
input[type="search"].invalid + label:after,
input[type="search"]:focus.invalid + label:after,
textarea.materialize-textarea.invalid + label:after,
textarea.materialize-textarea:focus.invalid + label:after {
    content: attr(data-error);
    color: #f44336;
    opacity: 1;
}

input:not([type]).validate + label,
input[type="text"].validate + label,
input[type="password"].validate + label,
input[type="email"].validate + label,
input[type="url"].validate + label,
input[type="time"].validate + label,
input[type="date"].validate + label,
input[type="datetime"].validate + label,
input[type="datetime-local"].validate + label,
input[type="tel"].validate + label,
input[type="number"].validate + label,
input[type="search"].validate + label,
textarea.materialize-textarea.validate + label {
    width: 100%;
    pointer-events: none;
}

input:not([type]) + label:after,
input[type="text"] + label:after,
input[type="password"] + label:after,
input[type="email"] + label:after,
input[type="url"] + label:after,
input[type="time"] + label:after,
input[type="date"] + label:after,
input[type="datetime"] + label:after,
input[type="datetime-local"] + label:after,
input[type="tel"] + label:after,
input[type="number"] + label:after,
input[type="search"] + label:after,
textarea.materialize-textarea + label:after {
    display: block;
    content: "";
    position: absolute;
    top: 65px;
    opacity: 0;
    transition:
        0.2s opacity ease-out,
        0.2s color ease-out;
}

.input-field {
    position: relative;
    margin-top: 1rem;
}

.input-field label {
    color: #9e9e9e;
    position: absolute;
    top: 0.8rem;
    left: 0.75rem;
    font-size: 1rem;
    cursor: text;
    transition: 0.2s ease-out;
}

.input-field label.active {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%);
}

.input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    transition: color 0.2s;
}

.input-field .prefix.active {
    color: #26a69a;
}

.input-field .prefix ~ input,
.input-field .prefix ~ textarea {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

.input-field .prefix ~ textarea {
    padding-top: 0.8rem;
}

.input-field .prefix ~ label {
    margin-left: 3rem;
}

@media only screen and (max-width: 992px) {
    .input-field .prefix ~ input {
        width: 86%;
        width: calc(100% - 3rem);
    }
}

@media only screen and (max-width: 600px) {
    .input-field .prefix ~ input {
        width: 80%;
        width: calc(100% - 3rem);
    }
}

/* Search Field */
.input-field input[type="search"] {
    display: block;
    line-height: inherit;
    padding-left: 4rem;
    width: calc(100% - 4rem);
}

.input-field input[type="search"]:focus {
    background-color: #fff;
    border: 0;
    box-shadow: none;
    color: #444;
}

.input-field input[type="search"]:focus + label i,
.input-field input[type="search"]:focus ~ .mdi-navigation-close,
.input-field input[type="search"]:focus ~ .material-icons {
    color: #444;
}

.input-field input[type="search"] + label {
    left: 1rem;
}

.input-field input[type="search"] ~ .mdi-navigation-close,
.input-field input[type="search"] ~ .material-icons {
    position: absolute;
    top: 0;
    right: 1rem;
    color: transparent;
    cursor: pointer;
    font-size: 2rem;
    transition: 0.3s color;
}

/* Textarea */
textarea {
    width: 100%;
    height: 3rem;
    background-color: transparent;
}

textarea.materialize-textarea {
    overflow-y: hidden;
    /* prevents scroll bar flash */
    padding: 1.6rem 0;
    /* prevents text jump on Enter keypress */
    resize: none;
    min-height: 3rem;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* future version of deprecated 'word-wrap' */
    padding-top: 1.2rem;
    /* prevents text jump on Enter keypress */
}

/* Radio Buttons
   ========================================================================== */
[type="radio"]:not(:checked),
[type="radio"]:checked {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    transition: 0.28s ease;
    /* webkit (konqueror) browsers */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[type="radio"] + label:before,
[type="radio"] + label:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    transition: 0.28s ease;
}

/* Unchecked styles */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:before,
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
    border-radius: 50%;
}

[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
    border: 2px solid #5a5a5a;
}

[type="radio"]:not(:checked) + label:after {
    z-index: -1;
    -webkit-transform: scale(0);
    transform: scale(0);
}

/* Checked styles */
[type="radio"]:checked + label:before {
    border: 2px solid transparent;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
    border: 2px solid #26a69a;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
    background-color: #26a69a;
    z-index: 0;
}

[type="radio"]:checked + label:after {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

/* Radio With gap */
[type="radio"].with-gap:checked + label:after {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

/* Focused styles */
[type="radio"].tabbed:focus + label:before {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + label:before {
    border: 2px solid rgba(0, 0, 0, 0.26);
}

[type="radio"].with-gap:disabled:checked + label:after {
    border: none;
    background-color: rgba(0, 0, 0, 0.26);
}

/* Disabled style */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled + label {
    color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled:not(:checked) + label:before {
    border-color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled:checked + label:after {
    background-color: rgba(0, 0, 0, 0.26);
    border-color: #bdbdbd;
}

/* Checkboxes
   ========================================================================== */
/* CUSTOM CSS CHECKBOXES */
form p {
    margin-bottom: 10px;
    text-align: left;
}

form p:last-child {
    margin-bottom: 0;
}

/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

[type="checkbox"] {
    /* checkbox aspect */
}

[type="checkbox"] + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    /* mozilla browsers */
    -khtml-user-select: none;
    /* webkit (konqueror) browsers */
    -ms-user-select: none;
    /* IE10+ */
}

[type="checkbox"] + label:before,
[type="checkbox"]:not(.filled-in) + label:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #5a5a5a;
    border-radius: 1px;
    margin-top: 2px;
    transition: 0.2s;
}

[type="checkbox"]:not(.filled-in) + label:after {
    border: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="checkbox"]:not(:checked):disabled + label:before {
    border: none;
    background-color: rgba(0, 0, 0, 0.26);
}

[type="checkbox"].tabbed:focus + label:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.1);
}

[type="checkbox"]:checked + label:before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #26a69a;
    border-bottom: 2px solid #26a69a;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

[type="checkbox"]:checked:disabled + label:before {
    border-right: 2px solid rgba(0, 0, 0, 0.26);
    border-bottom: 2px solid rgba(0, 0, 0, 0.26);
}

/* Indeterminate checkbox */
[type="checkbox"]:indeterminate + label:before {
    top: -11px;
    left: -12px;
    width: 10px;
    height: 22px;
    border-top: none;
    border-left: none;
    border-right: 2px solid #26a69a;
    border-bottom: none;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

[type="checkbox"]:indeterminate:disabled + label:before {
    border-right: 2px solid rgba(0, 0, 0, 0.26);
    background-color: transparent;
}

[type="checkbox"].filled-in + label:after {
    border-radius: 2px;
}

[type="checkbox"].filled-in + label:before,
[type="checkbox"].filled-in + label:after {
    content: "";
    left: 0;
    position: absolute;
    /* .1s delay is for check animation */
    transition:
        border 0.25s,
        background-color 0.25s,
        width 0.2s 0.1s,
        height 0.2s 0.1s,
        top 0.2s 0.1s,
        left 0.2s 0.1s;
    z-index: 1;
}

[type="checkbox"].filled-in:not(:checked) + label:before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 20% 40%;
    transform-origin: 100% 100%;
}

[type="checkbox"].filled-in:not(:checked) + label:after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #5a5a5a;
    top: 0px;
    z-index: 0;
}

[type="checkbox"].filled-in:checked + label:before {
    top: 0;
    left: 1px;
    width: 8px;
    height: 13px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

[type="checkbox"].filled-in:checked + label:after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #26a69a;
    background-color: #26a69a;
    z-index: 0;
}

[type="checkbox"].filled-in.tabbed:focus + label:after {
    border-radius: 2px;
    border-color: #5a5a5a;
    background-color: rgba(0, 0, 0, 0.1);
}

[type="checkbox"].filled-in.tabbed:checked:focus + label:after {
    border-radius: 2px;
    background-color: #26a69a;
    border-color: #26a69a;
}

[type="checkbox"].filled-in:disabled:not(:checked) + label:before {
    background-color: transparent;
    border: 2px solid transparent;
}

[type="checkbox"].filled-in:disabled:not(:checked) + label:after {
    border-color: transparent;
    background-color: #bdbdbd;
}

[type="checkbox"].filled-in:disabled:checked + label:before {
    background-color: transparent;
}

[type="checkbox"].filled-in:disabled:checked + label:after {
    background-color: #bdbdbd;
    border-color: #bdbdbd;
}

/* Switch
   ========================================================================== */
.switch,
.switch * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.switch label {
    cursor: pointer;
}

.switch label input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch label input[type="checkbox"]:checked + .lever {
    background-color: #84c7c1;
}

.switch label input[type="checkbox"]:checked + .lever:after {
    background-color: #26a69a;
    left: 24px;
}

.switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 40px;
    height: 15px;
    background-color: #818181;
    border-radius: 15px;
    margin-right: 10px;
    transition: background 0.3s ease;
    vertical-align: middle;
    margin: 0 16px;
}

.switch label .lever:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 21px;
    height: 21px;
    background-color: #f1f1f1;
    border-radius: 21px;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
    left: -5px;
    top: -3px;
    transition:
        left 0.3s ease,
        background 0.3s ease,
        box-shadow 0.1s ease;
}

input[type="checkbox"]:checked:not(:disabled) ~ .lever:active::after,
input[type="checkbox"]:checked:not(:disabled).tabbed:focus ~ .lever::after {
    box-shadow:
        0 1px 3px 1px rgba(0, 0, 0, 0.4),
        0 0 0 15px rgba(38, 166, 154, 0.1);
}

input[type="checkbox"]:not(:disabled) ~ .lever:active:after,
input[type="checkbox"]:not(:disabled).tabbed:focus ~ .lever::after {
    box-shadow:
        0 1px 3px 1px rgba(0, 0, 0, 0.4),
        0 0 0 15px rgba(0, 0, 0, 0.08);
}

.switch input[type="checkbox"][disabled] + .lever {
    cursor: default;
}

.switch label input[type="checkbox"][disabled] + .lever:after,
.switch label input[type="checkbox"][disabled]:checked + .lever:after {
    background-color: #bdbdbd;
}

/* Select Field
   ========================================================================== */
select {
    display: none;
}

select.browser-default {
    display: block;
}

select {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
}

.select-label {
    position: absolute;
}

.select-wrapper {
    position: relative;
}

.select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 15px 0;
    padding: 0;
    display: block;
}

.select-wrapper span.caret {
    color: initial;
    position: absolute;
    right: 0;
    top: 16px;
    font-size: 10px;
}

.select-wrapper span.caret.disabled {
    color: rgba(0, 0, 0, 0.26);
}

.select-wrapper + label {
    position: absolute;
    top: -14px;
    font-size: 0.8rem;
}

select:disabled {
    color: rgba(0, 0, 0, 0.3);
}

.select-wrapper input.select-dropdown:disabled {
    color: rgba(0, 0, 0, 0.3);
    cursor: default;
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    /* mozilla browsers */
    -ms-user-select: none;
    /* IE10+ */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.select-wrapper i {
    color: rgba(0, 0, 0, 0.3);
}

.select-dropdown li.disabled,
.select-dropdown li.disabled > span,
.select-dropdown li.optgroup {
    color: rgba(0, 0, 0, 0.3);
    background-color: transparent;
}

.prefix ~ .select-wrapper {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

.prefix ~ label {
    margin-left: 3rem;
}

.select-dropdown li img {
    height: 40px;
    width: 40px;
    margin: 5px 15px;
    float: right;
}

.select-dropdown li.optgroup {
    border-top: 1px solid #eee;
}

.select-dropdown li.optgroup.selected > span {
    color: rgba(0, 0, 0, 0.7);
}

.select-dropdown li.optgroup > span {
    color: rgba(0, 0, 0, 0.4);
}

.select-dropdown li.optgroup ~ li.optgroup-option {
    padding-left: 1rem;
}

/* File Input
   ========================================================================== */
.file-field {
    position: relative;
}

.file-field .file-path-wrapper {
    overflow: hidden;
    padding-left: 10px;
}

.file-field input.file-path {
    width: 100%;
}

.file-field .btn,
.file-field .btn-large {
    float: left;
    height: 3rem;
    line-height: 3rem;
}

.file-field span {
    cursor: pointer;
}

.file-field input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

/* Range
   ========================================================================== */
.range-field {
    position: relative;
}

input[type="range"],
input[type="range"] + .thumb {
    cursor: pointer;
}

input[type="range"] {
    position: relative;
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    margin: 15px 0;
    padding: 0;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"] + .thumb {
    position: absolute;
    border: none;
    height: 0;
    width: 0;
    border-radius: 50%;
    background-color: #26a69a;
    top: 10px;
    margin-left: -6px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type="range"] + .thumb .value {
    display: block;
    width: 30px;
    text-align: center;
    color: #26a69a;
    font-size: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

input[type="range"] + .thumb.active {
    border-radius: 50% 50% 50% 0;
}

input[type="range"] + .thumb.active .value {
    color: #fff;
    margin-left: -1px;
    margin-top: 8px;
    font-size: 10px;
}

input[type="range"] {
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    background: #c2c0c2;
    border: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background-color: #26a69a;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    margin: -5px 0 0 0;
    transition: 0.3s;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type="range"] {
    /* fix for FF unable to apply focus style bug  */
    border: 1px solid white;
    /*required for proper track sizing in FF*/
}

input[type="range"]::-moz-range-track {
    height: 3px;
    background: #ddd;
    border: none;
}

input[type="range"]::-moz-range-thumb {
    border: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #26a69a;
    margin-top: -5px;
}

input[type="range"]:-moz-focusring {
    outline: 1px solid #fff;
    outline-offset: -1px;
}

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

input[type="range"]::-ms-track {
    height: 3px;
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
}

input[type="range"]::-ms-fill-lower {
    background: #777;
}

input[type="range"]::-ms-fill-upper {
    background: #ddd;
}

input[type="range"]::-ms-thumb {
    border: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #26a69a;
}

input[type="range"]:focus::-ms-fill-lower {
    background: #888;
}

input[type="range"]:focus::-ms-fill-upper {
    background: #ccc;
}

/***************
    Nav List
***************/
.table-of-contents.fixed {
    position: fixed;
}

.table-of-contents li {
    padding: 2px 0;
}

.table-of-contents a {
    display: inline-block;
    font-weight: 300;
    color: #757575;
    padding-left: 20px;
    height: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: 0.4;
    display: inline-block;
}

.table-of-contents a:hover {
    color: #a8a8a8;
    padding-left: 19px;
    border-left: 1px solid #ea4a4f;
}

.table-of-contents a.active {
    font-weight: 500;
    padding-left: 18px;
    border-left: 2px solid #ea4a4f;
}

.side-nav {
    position: fixed;
    width: 240px;
    left: 0;
    top: 0;
    margin: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    height: 100%;
    height: calc(100% + 60px);
    height: -moz-calc(100%);
    padding-bottom: 60px;
    background-color: #fff;
    z-index: 999;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-y: auto;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
}

.side-nav.right-aligned {
    right: 0;
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
    left: auto;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.side-nav .collapsible {
    margin: 0;
}

.side-nav li {
    float: none;
    line-height: 64px;
}

.side-nav li.active {
    background-color: rgba(0, 0, 0, 0.05);
}

.side-nav a {
    color: #444;
    display: block;
    font-size: 1rem;
    height: 64px;
    line-height: 64px;
    padding: 0 30px;
}

.side-nav a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.side-nav a.btn,
.side-nav a.btn-large,
.side-nav a.btn-large,
.side-nav a.btn-flat,
.side-nav a.btn-floating {
    margin: 10px 15px;
}

.side-nav a.btn,
.side-nav a.btn-large,
.side-nav a.btn-large,
.side-nav a.btn-floating {
    color: #fff;
}

.side-nav a.btn-flat {
    color: #343434;
}

.side-nav a.btn:hover,
.side-nav a.btn-large:hover,
.side-nav a.btn-large:hover {
    background-color: #2bbbad;
}

.side-nav a.btn-floating:hover {
    background-color: #26a69a;
}

.drag-target {
    height: 100%;
    width: 10px;
    position: fixed;
    top: 0;
    z-index: 998;
}

.side-nav.fixed a {
    display: block;
    padding: 0 30px;
    color: #444;
}

.side-nav.fixed {
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    position: fixed;
}

.side-nav.fixed.right-aligned {
    right: 0;
    left: auto;
}

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
    }
    .side-nav.fixed.right-aligned {
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
    }
}

.side-nav .collapsible-body li.active,
.side-nav.fixed .collapsible-body li.active {
    background-color: #ee6e73;
}

.side-nav .collapsible-body li.active a,
.side-nav.fixed .collapsible-body li.active a {
    color: #fff;
}

#sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 997;
    will-change: opacity;
}

/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
}

.preloader-wrapper.small {
    width: 36px;
    height: 36px;
}

.preloader-wrapper.big {
    width: 64px;
    height: 64px;
}

.preloader-wrapper.active {
    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
    -webkit-animation: container-rotate 1568ms linear infinite;
    animation: container-rotate 1568ms linear infinite;
}

@-webkit-keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-color: #26a69a;
}

.spinner-blue,
.spinner-blue-only {
    border-color: #4285f4;
}

.spinner-red,
.spinner-red-only {
    border-color: #db4437;
}

.spinner-yellow,
.spinner-yellow-only {
    border-color: #f4b400;
}

.spinner-green,
.spinner-green-only {
    border-color: #0f9d58;
}

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
    /* durations: 4 * ARCTIME */
    -webkit-animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-red {
    /* durations: 4 * ARCTIME */
    -webkit-animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-yellow {
    /* durations: 4 * ARCTIME */
    -webkit-animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-green {
    /* durations: 4 * ARCTIME */
    -webkit-animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation:
        fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
        green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer,
.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
    /* durations: 4 * ARCTIME */
    opacity: 1;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes fill-unfill-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
    }
    /* 0.5 * ARCSIZE */
    25% {
        -webkit-transform: rotate(270deg);
    }
    /* 1   * ARCSIZE */
    37.5% {
        -webkit-transform: rotate(405deg);
    }
    /* 1.5 * ARCSIZE */
    50% {
        -webkit-transform: rotate(540deg);
    }
    /* 2   * ARCSIZE */
    62.5% {
        -webkit-transform: rotate(675deg);
    }
    /* 2.5 * ARCSIZE */
    75% {
        -webkit-transform: rotate(810deg);
    }
    /* 3   * ARCSIZE */
    87.5% {
        -webkit-transform: rotate(945deg);
    }
    /* 3.5 * ARCSIZE */
    to {
        -webkit-transform: rotate(1080deg);
    }
    /* 4   * ARCSIZE */
}

@keyframes fill-unfill-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    /* 0.5 * ARCSIZE */
    25% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    /* 1   * ARCSIZE */
    37.5% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
    /* 1.5 * ARCSIZE */
    50% {
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }
    /* 2   * ARCSIZE */
    62.5% {
        -webkit-transform: rotate(675deg);
        transform: rotate(675deg);
    }
    /* 2.5 * ARCSIZE */
    75% {
        -webkit-transform: rotate(810deg);
        transform: rotate(810deg);
    }
    /* 3   * ARCSIZE */
    87.5% {
        -webkit-transform: rotate(945deg);
        transform: rotate(945deg);
    }
    /* 3.5 * ARCSIZE */
    to {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
    }
    /* 4   * ARCSIZE */
}

@-webkit-keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes red-fade-in-out {
    from {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
}

@keyframes red-fade-in-out {
    from {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
}

@-webkit-keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    76% {
        opacity: 0;
    }
}

@keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    76% {
        opacity: 0;
    }
}

@-webkit-keyframes green-fade-in-out {
    from {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes green-fade-in-out {
    from {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

.gap-patch .circle {
    width: 1000%;
    left: -450%;
}

.circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

.circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    /* STROKEWIDTH */
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.circle-clipper.left .circle {
    left: 0;
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
    transform: rotate(129deg);
}

.circle-clipper.right .circle {
    left: -100%;
    border-left-color: transparent !important;
    -webkit-transform: rotate(-129deg);
    transform: rotate(-129deg);
}

.active .circle-clipper.left .circle {
    /* duration: ARCTIME */
    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
    /* duration: ARCTIME */
    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
    }
    to {
        -webkit-transform: rotate(130deg);
    }
}

@keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    to {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
}

@-webkit-keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
    }
    to {
        -webkit-transform: rotate(-130deg);
    }
}

@keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    to {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
}

#spinnerContainer.cooldown {
    /* duration: SHRINK_TIME */
    -webkit-animation:
        container-rotate 1568ms linear infinite,
        fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
    animation:
        container-rotate 1568ms linear infinite,
        fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.slider {
    position: relative;
    height: 400px;
    width: 100%;
}

.slider.fullscreen {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slider.fullscreen ul.slides {
    height: 100%;
}

.slider.fullscreen ul.indicators {
    z-index: 2;
    bottom: 30px;
}

.slider .slides {
    background-color: #9e9e9e;
    margin: 0;
    height: 400px;
}

.slider .slides li {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: inherit;
    overflow: hidden;
}

.slider .slides li img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.slider .slides li .caption {
    color: #fff;
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    opacity: 0;
}

.slider .slides li .caption p {
    color: #e0e0e0;
}

.slider .slides li.active {
    z-index: 2;
}

.slider .indicators {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

.slider .indicators .indicator-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin: 0 12px;
    background-color: #e0e0e0;
    transition: background-color 0.3s;
    border-radius: 50%;
}

.slider .indicators .indicator-item.active {
    background-color: #4caf50;
}

.carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 400px;
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

.carousel .carousel-item {
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

.carousel .carousel-item img {
    width: 100%;
}

.carousel.carousel-slider {
    top: 0;
    left: 0;
    height: 0;
}

.carousel.carousel-slider .carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should *NOT* be styled more than what's here.
 */
.picker {
    font-size: 16px;
    text-align: left;
    line-height: 1.2;
    color: #000000;
    position: absolute;
    z-index: 10000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
 * The picker input element.
 */
.picker__input {
    cursor: default;
}

/**
 * When the picker is opened, the input element is "activated".
 */
.picker__input.picker__input--active {
    border-color: #0089ec;
}

/**
 * The holder is the only "scrollable" top-level container element.
 */
.picker__holder {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what's here.
 */
/**
 * Make the holder and frame fullscreen.
 */
.picker__holder,
.picker__frame {
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
}

/**
 * The holder should overlay the entire screen.
 */
.picker__holder {
    position: fixed;
    transition:
        background 0.15s ease-out,
        top 0s 0.15s;
    -webkit-backface-visibility: hidden;
}

/**
 * The frame that bounds the box contents of the picker.
 */
.picker__frame {
    position: absolute;
    margin: 0 auto;
    min-width: 256px;
    width: 300px;
    max-height: 350px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    transition: all 0.15s ease-out;
}

@media (min-height: 28.875em) {
    .picker__frame {
        overflow: visible;
        top: auto;
        bottom: -100%;
        max-height: 80%;
    }
}

@media (min-height: 40.125em) {
    .picker__frame {
        margin-bottom: 7.5%;
    }
}

/**
 * The wrapper sets the stage to vertically align the box contents.
 */
.picker__wrap {
    display: table;
    width: 100%;
    height: 100%;
}

@media (min-height: 28.875em) {
    .picker__wrap {
        display: block;
    }
}

/**
 * The box contains all the picker contents.
 */
.picker__box {
    background: #ffffff;
    display: table-cell;
    vertical-align: middle;
}

@media (min-height: 28.875em) {
    .picker__box {
        display: block;
        border: 1px solid #777777;
        border-top-color: #898989;
        border-bottom-width: 0;
        border-radius: 5px 5px 0 0;
        box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
    }
}

/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
    top: 0;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
    zoom: 1;
    background: rgba(0, 0, 0, 0.32);
    transition: background 0.15s ease-out;
}

.picker--opened .picker__frame {
    top: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

@media (min-height: 35.875em) {
    .picker--opened .picker__frame {
        top: 10%;
        bottom: auto;
    }
}

/**
 * For `large` screens, transform into an inline picker.
 */
/* ==========================================================================
   CUSTOM MATERIALIZE STYLES
   ========================================================================== */
.picker__input.picker__input--active {
    border-color: #e3f2fd;
}

.picker__frame {
    margin: 0 auto;
    max-width: 325px;
}

@media (min-height: 38.875em) {
    .picker--opened .picker__frame {
        top: 10%;
        bottom: auto;
    }
}

/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
    padding: 0 1em;
}

/**
 * The header containing the month and year stuff.
 */
.picker__header {
    text-align: center;
    position: relative;
    margin-top: 0.75em;
}

/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
    display: inline-block;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {
    height: 2em;
    padding: 0;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

.picker__select--month.browser-default {
    display: inline;
    background-color: #ffffff;
    width: 40%;
}

.picker__select--year.browser-default {
    display: inline;
    background-color: #ffffff;
    width: 26%;
}

.picker__select--month:focus,
.picker__select--year:focus {
    border-color: rgba(0, 0, 0, 0.05);
}

/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
    position: absolute;
    padding: 0.5em 1.25em;
    width: 1em;
    height: 1em;
    box-sizing: content-box;
    top: -0.25em;
}

.picker__nav--prev {
    left: -1em;
    padding-right: 1.25em;
}

.picker__nav--next {
    right: -1em;
    padding-left: 1.25em;
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
    cursor: default;
    background: none;
    border-right-color: #f5f5f5;
    border-left-color: #f5f5f5;
}

/**
 * The calendar table of dates
 */
.picker__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 1rem;
    width: 100%;
    margin-top: 0.75em;
    margin-bottom: 0.5em;
}

.picker__table th,
.picker__table td {
    text-align: center;
}

.picker__table td {
    margin: 0;
    padding: 0;
}

/**
 * The weekday labels
 */
.picker__weekday {
    width: 14.285714286%;
    font-size: 0.75em;
    padding-bottom: 0.25em;
    color: #999999;
    font-weight: 500;
    /* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
    .picker__weekday {
        padding-bottom: 0.5em;
    }
}

/**
 * The days on the calendar
 */
.picker__day--today {
    position: relative;
    color: #595959;
    letter-spacing: -0.3;
    padding: 0.75rem 0;
    font-weight: 400;
    border: 1px solid transparent;
}

.picker__day--disabled:before {
    border-top-color: #aaaaaa;
}

.picker__day--infocus:hover {
    cursor: pointer;
    color: #000;
    font-weight: 500;
}

.picker__day--outfocus {
    display: none;
    padding: 0.75rem 0;
    color: #fff;
}

.picker__day--outfocus:hover {
    cursor: pointer;
    color: #dddddd;
    font-weight: 500;
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
    cursor: pointer;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    border-radius: 50%;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    background: #0089ec;
    color: #ffffff;
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
    background: #bbbbbb;
}

/**
 * The footer containing the "today", "clear", and "close" buttons.
 */
.picker__footer {
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
    border: 1px solid #ffffff;
    background: #ffffff;
    font-size: 0.8em;
    padding: 0.66em 0;
    font-weight: bold;
    width: 33%;
    display: inline-block;
    vertical-align: bottom;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
    cursor: pointer;
    color: #000000;
    background: #b1dcfb;
    border-bottom-color: #b1dcfb;
}

.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
    background: #b1dcfb;
    border-color: rgba(0, 0, 0, 0.05);
    outline: none;
}

.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
    position: relative;
    display: inline-block;
    height: 0;
}

.picker__button--today:before,
.picker__button--clear:before {
    content: " ";
    margin-right: 0.45em;
}

.picker__button--today:before {
    top: -0.05em;
    width: 0;
    border-top: 0.66em solid #0059bc;
    border-left: 0.66em solid transparent;
}

.picker__button--clear:before {
    top: -0.25em;
    width: 0.66em;
    border-top: 3px solid #ee2200;
}

.picker__button--close:before {
    content: "\D7";
    top: -0.1em;
    vertical-align: top;
    font-size: 1.1em;
    margin-right: 0.35em;
    color: #777777;
}

.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
}

.picker__button--today[disabled]:before {
    border-top-color: #aaaaaa;
}

/* ==========================================================================
   CUSTOM MATERIALIZE STYLES
   ========================================================================== */
.picker__box {
    border-radius: 2px;
    overflow: hidden;
}

.picker__date-display {
    text-align: center;
    background-color: #26a69a;
    color: #fff;
    padding-bottom: 15px;
    font-weight: 300;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
    cursor: pointer;
    color: #000000;
    background: #a1ded8;
}

.picker__weekday-display {
    background-color: #1f897f;
    padding: 10px;
    font-weight: 200;
    letter-spacing: 0.5;
    font-size: 1rem;
    margin-bottom: 15px;
}

.picker__month-display {
    text-transform: uppercase;
    font-size: 2rem;
}

.picker__day-display {
    font-size: 4.5rem;
    font-weight: 400;
}

.picker__year-display {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.picker__box {
    padding: 0;
}

.picker__calendar-container {
    padding: 0 1rem;
}

.picker__calendar-container thead {
    border: none;
}

.picker__table {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.picker__day--infocus {
    color: #595959;
    letter-spacing: -0.3;
    padding: 0.75rem 0;
    font-weight: 400;
    border: 1px solid transparent;
}

.picker__day.picker__day--today {
    color: #26a69a;
}

.picker__day.picker__day--today.picker__day--selected {
    color: #fff;
}

.picker__weekday {
    font-size: 0.9rem;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    border-radius: 50%;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    background-color: #26a69a;
    color: #ffffff;
}

.picker__day--selected.picker__day--outfocus,
.picker__day--selected:hover.picker__day--outfocus,
.picker--focused .picker__day--selected.picker__day--outfocus {
    background-color: #a1ded8;
}

.picker__footer {
    text-align: right;
    padding: 5px 10px;
}

.picker__close,
.picker__today {
    font-size: 1.1rem;
    padding: 0 1rem;
    color: #26a69a;
}

.picker__nav--prev:before,
.picker__nav--next:before {
    content: " ";
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-right: 0.75em solid #676767;
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto;
}

.picker__nav--next:before {
    border-right: 0;
    border-left: 0.75em solid #676767;
}

button.picker__today:focus,
button.picker__clear:focus,
button.picker__close:focus {
    background-color: #a1ded8;
}

/* ==========================================================================
   $BASE-TIME-PICKER
   ========================================================================== */
/**
 * The list of times.
 */
.picker__list {
    list-style: none;
    padding: 0.75em 0 4.2em;
    margin: 0;
}

/**
 * The times on the clock.
 */
.picker__list-item {
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    margin-bottom: -1px;
    position: relative;
    background: #ffffff;
    padding: 0.75em 1.25em;
}

@media (min-height: 46.75em) {
    .picker__list-item {
        padding: 0.5em 1em;
    }
}

/* Hovered time */
.picker__list-item:hover {
    cursor: pointer;
    color: #000000;
    background: #b1dcfb;
    border-color: #0089ec;
    z-index: 10;
}

/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
    border-color: #0089ec;
    z-index: 10;
}

.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
    cursor: pointer;
    color: #000000;
    background: #b1dcfb;
}

/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
    background: #0089ec;
    color: #ffffff;
    z-index: 10;
}

/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
    border-color: #dddddd;
    z-index: auto;
}

/**
 * The clear button
 */
.picker--time .picker__button--clear {
    display: block;
    width: 80%;
    margin: 1em auto 0;
    padding: 1em 1.25em;
    background: none;
    border: 0;
    font-weight: 500;
    font-size: 0.67em;
    text-align: center;
    text-transform: uppercase;
    color: #666;
}

.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
    color: #000000;
    background: #b1dcfb;
    background: #ee2200;
    border-color: #ee2200;
    cursor: pointer;
    color: #ffffff;
    outline: none;
}

.picker--time .picker__button--clear:before {
    top: -0.25em;
    color: #666;
    font-size: 1.25em;
    font-weight: bold;
}

.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
    color: #ffffff;
}

/* ==========================================================================
   $DEFAULT-TIME-PICKER
   ========================================================================== */
/**
 * The frame the bounds the time picker.
 */
.picker--time .picker__frame {
    min-width: 256px;
    max-width: 320px;
}

/**
 * The picker box.
 */
.picker--time .picker__box {
    font-size: 1em;
    background: #f2f2f2;
    padding: 0;
}

@media (min-height: 40.125em) {
    .picker--time .picker__box {
        margin-bottom: 5em;
    }
}

/* Slider */
.slick-slider {
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after {
    display: table;

    content: "";
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir="rtl"] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list {
    background: #fff;
}

/* Icons */
@font-face {
    font-family: "slick";
    font-weight: normal;
    font-style: normal;

    src: url("./fonts/slick.eot");
    src:
        url("./fonts/slick.eot?#iefix") format("embedded-opentype"),
        url("./fonts/slick.woff") format("woff"),
        url("./fonts/slick.ttf") format("truetype"),
        url("./fonts/slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;

    opacity: 0.75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}
[dir="rtl"] .slick-prev {
    right: -25px;
    left: auto;
}
.slick-prev:before {
    content: "←";
}
[dir="rtl"] .slick-prev:before {
    content: "→";
}

.slick-next {
    right: -25px;
}
[dir="rtl"] .slick-next {
    right: auto;
    left: -25px;
}
.slick-next:before {
    content: "→";
}
[dir="rtl"] .slick-next:before {
    content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li {
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}
.slick-dots li button:before {
    font-family: "slick";
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: "";
    text-align: center;

    opacity: 0.25;
    color: unset !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
    opacity: 0.75;
    color: black;
}

/*General CSS*/

h1 {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    font-weight: 300 !important;
}

*:focus {
    outline: none;
}

body,
html {
    background-color: #26262c;
    color: #eee;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

a {
    cursor: pointer;
}

.lang-hidden {
    display: none;
}

.prefix-plus-sign:before {
    content: "+";
}

/* Interface Stuff */
#interface-wrapper {
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;

    /* this NEEDS to stay here! otherwise the recaptcha challange
    popup breaks the page by shifting the `html` element up by 400px */
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.chat-container {
    width: 275px;
    position: absolute;
    bottom: 0;
    left: 0;
    height: calc(100% - 100px);
    transition: left 300ms;
}

#loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #26262c;
    z-index: 12001;
}

#loading-screen .loading-screen-container {
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 10002;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loading-screen .loading-screen-message {
    color: #e8324e;
    font-size: 18px;
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.2px;
    text-align: center;
    animation: loading-fade 2s infinite;
    margin-top: -20px;
}

#loading-screen .loading-screen-image {
    height: 200px;
    width: 200px;
    background-image: url("/static/images/500logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: loading-fade 2s infinite;
}

@keyframes loading-fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

div#content-wrapper section {
    min-height: calc(100vh - 450px);
}

/*Chat*/
#social {
    position: absolute;
    top: 203px;
    left: 14px;
}

.social-logo {
    height: 16px;
    margin-left: 8px;
    margin-right: 2px;
}

#chat-wrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 250px;
    background-color: #1c1c22;
}

#chat-logo {
    cursor: pointer;
    height: 191px;
    background-color: #1c1c22;
    border-bottom: 1px #26262c solid;
    width: 100%;
    text-align: center;
}

#chat-logo img {
    height: 190px;
    background-color: #1c1c22;
}

#chat-players {
    position: absolute;
    top: 200px;
    right: 12px;
    color: #aaa;
    display: none;
}

#online {
    color: #c8354e;
    font-size: 14px;
    vertical-align: top;
}

#online-icon {
    color: #c8354e;
    font-size: 16px;
    margin-top: 1px;
}

#chat-tabs {
    position: absolute;
    display: table;
    top: 236px;
    left: 0;
    width: 251px;
    height: 40px;
    overflow: hidden;
    box-shadow: inset 0px -5px 10px rgba(0, 0, 0, 0.2);
}

#chat-tabs .tab {
    display: table-cell;
    position: relative;
    height: 35px;
    width: 33px;
    margin-left: -3px;
    margin-top: 5px;
    overflow: hidden;
    border-bottom: 1px solid #26262c;
    font-size: 11px;
}

#chat-tabs .tab .icon {
    display: block;
    position: absolute;
    left: 5px;
    top: 10px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
}

#chat-tabs .tab .icon.round img {
    border-radius: 100%;
}

#chat-tabs .tab .channel-select {
    position: absolute;
    height: 35px;
    line-height: 35px;
    width: 100%;
    cursor: pointer;
}

#chat-tabs .tab .name {
    display: block;
    position: absolute;
    left: 33px;
    display: none;
    color: #c8354e;
}

#chat-tabs .tab .icon img,
#chat-tabs .tab .icon i {
    position: absolute;
    left: 0px;
    top: 0px;
}

#chat-tabs .tab .icon img {
    width: 100%;
    height: 100%;
}

#chat-tabs .tab .icon i {
    top: -1px;
    left: -1px;
    font-size: 18px !important;
    color: #c8354e;
}

#chat-tabs .tab .channel-select[data-channel="mods"] * {
    color: #039be5;
}

#chat-tabs .tab:hover {
}

#chat-tabs .tab.active {
    width: 90px;
    border: 1px solid #26262c;
    border-bottom: none;
    background: #1c1c22;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.33);
}

#chat-tabs .tab.active .icon {
    left: 10px;
}

#chat-tabs .tab .icon.small {
    width: 14px;
    height: 14px;
    line-height: 16px;
    border: 1px solid #444;
}

#chat-tabs .tab .icon.first {
    left: 3px;
    top: 5px;
}

#chat-tabs .tab .icon.second {
    top: 15px;
    left: 12px;
}

#chat-tabs .tab.active .name {
    display: block;
}

#chat-fight-event {
    /* position: absolute; */
    /* top: 45px; */
    width: 100%;
}

#chat-raffle-event,
#scavenger-hunt {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    font-family: "Open Sans";
    /* margin-right: 12px; */
    height: 40px;
    /* border: 1px solid #282831; */
    background: #212129;
    /* border-radius: 4px; */
    margin: 0 1rem 15px 1rem;
    padding: 0 1rem;
    transition: background 100ms;
    /* width: 90%; */
    /* margin: 0 auto; */
    cursor: pointer;
    color: #c32d4f;
    box-shadow: 0px 1px 3px 0px #131115;
}

#scavenger-hunt {
    color: #c8354e;
    height: 80px;
}

.chat-fight-event-container,
.scavenger-hunt-container {
    height: 40px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease-out;
}

.scavenger-hunt-voucher {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -0.25rem !important;
}

.scavenger-hunt-voucher-input {
    flex: 1;
    border-bottom-width: 0 !important;
    margin: 0 !important;
    background: #1c1c22 !important;
    margin-right: 0.25rem !important;
    padding: 0 0.5rem !important;
    border-radius: 5px !important;
}

.chat-fight-event-notification {
    transition: transform 0.4s ease-out;
    text-align: center;
    font-weight: 600;
    height: 40px;
}

#chat-fight-event {
    color: white;
    margin-bottom: 10px;
}

#chat-fight-event {
    color: white;
}

.chat-fight-event-icon,
.scavenger-hunt-icon {
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scavenger-hunt-icon {
    margin-right: 4px;
}

.chat-fight-event-icon svg,
.scavenger-hunt-icon svg {
    height: 16px;
    width: auto;
    margin-right: 4px;
}

.chat-fight-event-icon svg path {
    fill: #c32d4f;
}

.scavenger-hunt-icon svg path:nth-child(2) {
    fill: #c8354e;
}

.chat-fight-event-amount {
    margin: 0 8px;
    display: flex;
    justify-content: center;
    color: #c8354e;
    align-items: center;
}

.chat-fight-event-timer,
.scavenger-hunt-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.chat-fight-event-amount-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-fight-event-amount-icon img {
    height: 16px;
    margin-right: 4px;
    width: auto;
}

.chat-fight-event-timer,
.scavenger-hunt-timer {
    color: #606073;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-fight-event-timer-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 4px;
}

.chat-fight-event-timer i {
    font-size: 18px;
}

#chat-raffle-event:hover {
    background: hsl(240, 11%, 9%);
}

/* .chat-fight-event-container:hover svg path {
    fill: #c8354e;
}

.chat-fight-event-container:hover .chat-fight-event-timer {
    color: #c8354e !important;
} */

.chat-wrapper--fight #chat-tabs {
    top: 85px !important;
}

.chat-wrapper--fight #chat {
    top: 143px !important;
}

.user-popup {
    display: absolute;
    left: 0px;
    top: 0px;
    z-index: 200;
}

.user-popup a {
    color: #c8354e;
    font-weight: 500;
}

.user-popup a.user-popup-toggle {
    display: block;
    position: absolute;
    height: 30px;
    width: 28px;
    line-height: 28px;
    text-align: center;
    background: #1c1c22;
    margin-top: 2px;
    top: 6px;
    right: 10px;
    display: none;
    z-index: 200;
}

.user-popup a.user-popup-toggle.open {
    border-bottom: none;
    top: 6px;
}

.user-popup .user-actions {
    position: absolute;
    top: 24px;
    right: 0px;
    background: hsl(240, 10%, 8%);
    display: none;
    width: 200px;
    z-index: 190;
    border-radius: 4px;
    overflow: hidden;
}

.user-popup .user-actions li a {
    display: block;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    padding: 1em;
    transition: background 100ms;
}

.user-popup .user-actions li a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.user-popup .user-actions li a.mod-action {
    color: #ffc76f;
    font-size: 12px;
    font-weight: 600;
}

.user-popup.active .user-popup-toggle {
    display: block;
}

.user-actions.active {
    display: block;
}

.pq-wrapper {
    width: 132px;
    overflow: hidden;
}

#chat-more {
    display: none;
    position: absolute;
    bottom: 50px;
    height: 30px;
    padding-top: 5px;
    text-align: center;
    left: 0;
    right: 0;
    color: #c8354e;
    background-color: rgba(28, 28, 34, 0.7);
    cursor: pointer;
}

.mute-popup {
    cursor: pointer;
}

#mute-modal {
    background-color: #1c1c22;
    font-family: "Open Sans", Helvetica, arial, sans-serif;
    width: 80%;
    min-width: 800px;
    z-index: 2001 !important; /* to overlay navbar on mobile */
}

#mute-modal strong {
    font-weight: bold;
}

#mute-modal .collapsible {
    border-color: #101014;
}

#mute-modal .collapsible .collapsible-header {
    background: #262631;
    border-color: #101014;
}

#mute-modal .collapsible .collapsible-body {
    border-color: #101014;
    padding: 5px;
}

#mute-modal h5 {
    font-size: 14px;
}

#mute-modal .tabs {
    background: rgba(0, 0, 0, 0.25);
}

#mute-modal .tabs .tab {
}

#mute-modal .tabs .tab a {
    color: #c8354e;
    font-weight: bold;
}

#mute-modal .tabs .indicator {
    background-color: #c8354e;
}

#mute-modal .moderation-message {
    border: 1px solid #333;
    font-size: 14px;
    padding: 5px 5px 15px;
    background: #151518;
}

#mute-modal .moderation-message .nav-button {
    font-size: 12px;
}

#mute-modal .moderation-message-content strong {
    color: #c8354e;
}

.progress {
    background-color: #333;
    margin-top: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
}

.progress .indeterminate {
    background-color: #c8354e;
}

#external-url {
    margin-left: 3px;
}

/* User Flags */
ul#user-flags {
}

ul#user-flags li {
    color: #64dd17;
    padding: 3px;
    margin: 2px;
}

ul#user-flags li.critical {
    background: #600;
    color: #fff;
}

/* User Notes */
ul#user-notes {
    max-height: 400px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
}

ul#user-notes li {
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    margin-top: 2px;
}

ul#user-notes li .author {
    color: #666;
}

ul#user-notes li p {
    margin: 5px 0px;
    padding: 0px;
}

div#maintenance-logo {
    width: 100%;
    text-align: center;
    margin-top: 100px;
}

div#maintenance-logo .nav-desktop-logo-text {
    font-size: 80px !important;
    display: inline-block;
    vertical-align: middle;
    color: #c8354e;
}

div#maintenance-logo img {
    display: inline-block;
    width: 200px;
    vertical-align: middle;
}

#maintenance-social .social-icon svg {
    fill: #c8354e;
}

#login-background {
    width: 100%;
    height: 100%;
    background-color: #0f0f13f0;
    opacity: 0;
    position: absolute;
    z-index: 1003;
    top: 0px;
    overflow: scroll;
}

#login-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    padding-left: 100px;
    padding-right: 100px;
    text-align: center;
}

.login-title {
    font-size: 60px;
    font-weight: 300;
    color: #c8354e;
    margin-bottom: 60px;
}

.login-big-block {
    width: 800px;
    margin: auto;
}

.login-block {
    height: 300px;
    width: 390px;
    margin: auto;
    display: inline-block;
    padding-top: 30px;
}

.login-subtitle {
    font-size: 30px;
    color: #c8354e;
    font-weight: 300;
}

.login-bucks {
    height: 125px;
}

.login-bucks2 {
    height: 115px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.login-bucks2-svg {
    height: 95px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.login-terms {
    margin-top: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #c8354e;
}

.login-subsubtitle {
    font-size: 30px;
    color: #c8354e;
    font-weight: 300;
}

.message-avatar {
    margin-right: 5px;
    vertical-align: middle;
    height: 25px;
    width: 25px;
    border-radius: 50%;
}

.message-author-regular {
    font-size: 14px;
    font-weight: 800;
    color: #a0a0a0;
    word-wrap: break-word;
}

.message-author-mod {
    font-size: 14px;
    font-weight: 600;
    color: #c8354e;
    word-wrap: break-word;
}

.message-author-veteran {
    font-size: 14px;
    font-weight: 600;
    color: #ffc870;
    word-wrap: break-word;
}

.message-author-content-creator {
    font-size: 14px;
    font-weight: 600;
    color: #ff71bf;
    word-wrap: break-word;
}

.message-content-creator .message-content {
    color: #bb5e91 !important;
}

/* VIP ranks */
.message-vip {
    font-size: 14px;
    word-wrap: break-word;
}

.message-vip .message-author-vip .vip-gem {
    width: 1.35em;
    height: 1.35em;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 5px;
    vertical-align: text-bottom;
}

.message-vip-1 .message-author-vip {
    color: hsl(0, 0%, 73%) !important;
}
.message-vip-2 .message-author-vip {
    color: hsl(37, 100%, 72%) !important;
}
.message-vip-3 .message-author-vip {
    color: hsl(255, 86%, 78%) !important;
}
.message-vip-4 .message-author-vip {
    color: hsl(90, 70%, 62%) !important;
}
.message-vip-5 .message-author-vip {
    color: hsl(350, 78%, 70%) !important;
}
.message-vip-6 .message-author-vip {
    color: hsl(201, 94%, 74%) !important;
}
.message-vip-7 .message-author-vip {
    color: hsl(180deg, 30%, 75%) !important;
}
.message-vip-8 .message-author-vip {
    color: hsl(233deg, 39%, 55%) !important;
}
.message-vip-9 .message-author-vip,
.message-vip-10 .message-author-vip {
    color: #fff !important;
    text-shadow:
        0px 0px 2px hsl(310deg 79% 66%),
        0px 0px 10px hsl(237deg 72% 38%);
}

.message-vip-1 .message-content {
    color: hsl(0, 0%, 73%);
}
.message-vip-2 .message-content {
    color: hsl(37, 40%, 57%);
}
.message-vip-3 .message-content {
    color: hsl(255, 34%, 78%);
}
.message-vip-4 .message-content {
    color: hsl(90, 28%, 62%);
}
.message-vip-5 .message-content {
    color: hsl(350, 30%, 70%);
}
.message-vip-6 .message-content {
    color: hsl(201, 37%, 74%);
}
.message-vip-7 .message-content {
    color: hsl(181deg, 30%, 72%);
}
.message-vip-8 .message-content {
    color: hsl(239deg, 30%, 66%);
}
.message-vip-9 .message-content {
    color: hsl(333deg, 32%, 70%);
}

.message-author-admin {
    font-size: 14px;
    font-weight: 600;
    color: #c8354e;
    word-wrap: break-word;
}

.message-author-system {
    font-weight: 600;
    color: #c8354e;
    word-wrap: break-word;
}

.message-author-chatmod {
    font-size: 14px;
    font-weight: 600;
    word-wrap: break-word;
}

.message {
    padding-top: 1.5rem;
    padding-bottom: 0px;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
}

.message-avatar-wrapper {
    display: inline-block;
    vertical-align: top;
    padding-top: 4px;
}

.message-content-wrapper {
    display: inline-block;
    vertical-align: top;
    max-width: 216px;
}

.message-content {
    word-wrap: break-word;
    font-size: 13px;
    color: #888;
    overflow: hidden;
    margin-top: 2px;
}

.message-error {
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    padding-right: 10px;
    word-wrap: break-word;
    color: #aaa;
}

.message-admin .message-content {
    color: #c8354e;
}

.message-mod .message-content {
    color: #c8354e;
}

.message-chatmod .message-content {
    color: #039be5;
}

.message-system .message-content {
    color: #c8354e;
}

.message.message-direct-message {
    background: #2e2e35;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #4c4c58;
    color: #fff !important;
}

.message.message-veteran.message-direct-message {
    border-color: 1px solid #ffc35f;
}

.message.message-direct-message a.author-link {
    color: #fff !important;
}

.message.message-direct-message .message-content {
    color: #fff !important;
}

.message.message-chatmod.message-direct-message {
    background: #012133;
    border-color: #003550;
}

.message.message-admin.message-direct-message,
.message.message-mod.message-direct-message {
    background: #48111d;
    border-color: #7d1e34;
}

.message.message-vip1.message-direct-message {
    background: #3d033e;
    border-color: #630775;
}

#chat-input {
    margin-top: -5px;
}

#chat-input-wrapper {
    position: absolute;
    bottom: 0;
    left: 13px;
    right: 13px;
    height: 50px;
    padding-top: 10px;
    color: #ccc;
    border-top: 1px #333 solid;
}

#channel-popup {
    position: absolute;
    margin: 0px;
    bottom: 15px;
    left: 8px;
}

#channel-popup .toggle-channels {
    padding: 5px;
    z-index: 100;
    position: absolute;
    bottom: -2px;
    cursor: pointer;
    font-size: 14px;
}

#chat-channels {
    border: 1px solid #252525;
    background: #1c1c22;
    position: absolute;
    bottom: 22px;
    width: 200px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.33);
    z-index: 40;
    display: none;
}

#channel-popup.active #chat-channels {
    display: block;
}

#channel-popup.active .toggle-channels {
    border: 1px solid #252525;
    border-top: none;
    background: #1c1c22;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

#chat-channels a.channel-select {
    display: block;
    padding: 8px;
    width: 100%;
    cursor: pointer;
    color: #c8354e;
}

#chat-channels a.channel-select:hover,
#chat-channels a.channel-select.active {
    background: #c8354e;
    color: #fff;
}

#chat-input-wrapper input[type="text"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    width: 200px;
    /* margin-left: 26px; */
}

/* label underline focus color */
#chat-input-wrapper input[type="text"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

::-webkit-input-placeholder {
    color: #777;
}

:-moz-placeholder {
    color: #777;
}

::-moz-placeholder {
    color: #777;
}

:-ms-input-placeholder {
    color: #777;
}

/* Nav */
#nav-wrapper {
    background-color: #1c1c22;
    width: 100%;
    margin: 0px;
    position: relative;
    height: 100px;
    z-index: 998;
}

#nav-custom {
    margin-bottom: 0px;
}

.nav-element {
    text-align: center;
    color: #444;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    position: relative;
    height: 40px;
    margin-top: 10px;
}

.nav-element a {
    color: #444;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
}

.nav-element.highlight {
    color: #ccc;
}

.nav-element i {
    position: absolute;
    left: 27px;
    top: 19px;
}

.nav-element a span.text {
    display: block;
    width: 0px;
    height: 0px;
    overflow: hidden;
    font: 0/0 a;
    visibility: hidden;
}

.nav-element.active {
    text-align: center;
    color: #c8354e;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    position: relative;
}

.nav-element.active .nav-icon svg path {
    fill: #c8354e;
}

.nav-element.active .nav-icon svg polygon {
    fill: #c8354e;
}

.nav-element.active .nav-icon svg circle {
    fill: #c8354e;
}

.nav-element.active a {
    color: #c8354e;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    padding-top: 24px;
    padding-bottom: 24px;
}

.nav-element:hover {
    color: #c8354e;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
}

.nav-element:hover a {
    color: #c8354e;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
}

#nav-border {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 65px;
    margin-top: 0px;
    border-left: 4px #c8354e solid;
    -webkit-transition: 200ms ease;
    -moz-transition: 200ms ease;
    -ms-transition: 200ms ease;
    -o-transition: 200ms ease;
    transition: 200ms ease;
}

.nav-icon {
    cursor: pointer;
    height: 24px;
    width: 24px;
}

.nav-icon svg path {
    fill: #444444;
}

.nav-icon svg polygon {
    fill: #444444;
}

.nav-icon svg circle {
    fill: #444444;
}

#nav-notification {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 6px;
    width: 6px;
    background-color: #c8354e;
    border-radius: 5px;
}

#nav-notification-desktop {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(calc(-50% + 8px));
    height: 5px;
    width: 5px;
    background-color: #c8354e;
    border-radius: 5px;
}

.nav-notification {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 6px;
    width: 6px;
    background-color: #c8354e;
    border-radius: 5px;
}

#duel-notification {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 6px;
    width: 6px;
    background-color: #c8354e;
    border-radius: 5px;
}

.nav-notification-new {
    position: absolute;
    bottom: -5px;
    right: 24px;
    font-size: 9px;
    line-height: 9px;
    font-weight: bold;
    color: #fff;
    background: #c8354e;
    border: 1px solid #222;
    padding: 2px 5px;
    border-radius: 5px;
}

.gotit-btn {
    display: inline-block;
    height: 50px;
    min-width: 150px;
    text-align: center;
    margin-top: 20px;
    padding: 10px 10px 0px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #c8354e solid;
    color: #c8354e;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.gotit-btn:hover {
    background-position: left bottom;
    border: 2px #c8354e solid;
    color: #26262c;
}

/* Content */
#content-wrapper {
    background-color: #26262c;
    overflow-y: scroll;
    overflow-x: scroll;
    width: calc(100% - 275px);
    height: 100%;
    left: 275px;
    top: 100px;
    position: absolute;
    transition:
        left 300ms,
        width 300ms;
}

#content-wrapper .content-inner {
    transition: margin 300ms;
}

.redtext {
    color: #c8354e;
}

.greentext {
    color: #37af59;
}

.goldtext {
    color: #ffc76f;
}

.redtext2 {
    color: #c8354e;
    font-size: 18px;
    margin-right: 10px;
}

.bigtext {
    font-size: 16px;
}

.content-btn {
    display: inline-block;
    height: 50px;
    min-width: 150px;
    max-width: 250px;
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 200ms ease;
    -moz-transition: 200ms ease;
    -ms-transition: 200ms ease;
    -o-transition: 200ms ease;
    transition: 200ms ease;
    border: 2px #c8354e solid;
    color: #c8354e;
    background: linear-gradient(to bottom, #26262c 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.content-btn,
.btn-toolbar {
    user-select: none;
}

.join-btn {
    display: inline-block;
    height: 50px;
    width: 150px;
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #c8354e solid;
    color: #c8354e;
    background: linear-gradient(to bottom, #222228 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.blue-join-btn {
    display: inline-block;
    height: 50px;
    width: 150px;
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #45b5da solid;
    color: #45b5da;
    background: linear-gradient(to bottom, #222228 50%, #45b5da 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.blue-content-btn {
    display: inline-block;
    height: 50px;
    width: 150px;
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #45b5da solid;
    color: #45b5da;
    background: linear-gradient(to bottom, #26262c 50%, #45b5da 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.content-btn-disabled {
    display: inline-block;
    height: 50px;
    width: 150px;
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
    cursor: not-allowed;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    max-width: 300px;
    border: 2px #666 solid;
    color: #666;
    opacity: 0.3;
}

.content-btn:disabled,
.content-btn[disabled="disabled"] {
    border: 2px #666 solid !important;
    color: #666 !important;
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent !important;
    line-height: 36px !important;
}

.slim-btn {
    display: inline-block;
    height: 32px;
    min-width: 110px;
    max-width: 200px;
    text-align: center;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
}

.grey-slim {
    border: 2px #666 solid;
    color: #666;
    background: linear-gradient(to bottom, #26262c 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.red-slim {
    border: 2px #c8354e solid;
    color: #c8354e;
    background: linear-gradient(to bottom, #26262c 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.blue-slim {
    border: 2px #45b5da solid;
    color: #45b5da;
    background: linear-gradient(to bottom, #26262c 50%, #45b5da 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.gold-slim {
    border: 2px #ffc870 solid;
    color: #ffc870;
    background: linear-gradient(to bottom, #26262c 50%, #ffc870 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.slim-content-btn {
    display: inline-block;
    height: 32px;
    min-width: 75px;
    margin-top: 10px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #c8354e solid;
    color: #c8354e;
    background: linear-gradient(to bottom, #26262c 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.slim-content-btn-disabled {
    display: inline-block;
    height: 32px;
    width: 75px;
    text-align: center;
    padding-top: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: not-allowed;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #666 solid;
    color: #666;
    opacity: 0.3;
}

.slim-filter-btn {
    display: inline-block;
    height: 32px;
    min-width: 100px;
    max-width: 200px;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #c8354e solid;
    color: #c8354e;
    background: linear-gradient(to bottom, #26262c 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.blue-slim-filter-btn {
    display: inline-block;
    height: 32px;
    min-width: 100px;
    max-width: 200px;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border: 2px #45b5da solid;
    color: #45b5da;
    background: linear-gradient(to bottom, #26262c 50%, #45b5da 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.content-btn:hover {
    background-position: left bottom;
    border: 2px #c8354e solid;
    color: #26262c;
}

.blue-content-btn:hover {
    background-position: left bottom;
    border: 2px #45b5da solid;
    color: #26262c;
}

.join-btn:hover {
    background-position: left bottom;
    border: 2px #c8354e solid;
    color: #222228;
}

.blue-join-btn:hover {
    background-position: left bottom;
    border: 2px #45b5da solid;
    color: #222228;
}

.grey-slim:hover {
    background-position: left bottom;
    border: 2px #666 solid;
    color: #26262c;
}

.red-slim:hover {
    background-position: left bottom;
    border: 2px #c8354e solid;
    color: #26262c;
}

.blue-slim:hover {
    background-position: left bottom;
    border: 2px #45b5da solid;
    color: #26262c;
}

.gold-slim:hover {
    background-position: left bottom;
    border: 2px #ffc870 solid;
    color: #26262c;
}

.slim-content-btn:hover {
    background-position: left bottom;
    border: 2px #c8354e solid;
    color: #26262c;
}

.slim-filter-btn:hover {
    background-position: left bottom;
    border: 2px #c8354e solid;
    color: #26262c;
}

.blue-slim-filter-btn:hover {
    background-position: left bottom;
    border: 2px #45b5da solid;
    color: #26262c;
}

#content-game {
    min-width: 940px;
    position: relative;
}

#content-duel {
    display: none;
    color: #aaa;
    font-size: 14px;
}

#content-profile {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

#content-inventory {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-deposit-options {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-deposit-options h1 {
    margin-bottom: 0px;
}

#content-withdraw-options {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-shop {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-transfer {
    display: none;
    color: #aaa;
    font-size: 16px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-phishing-scam img {
    max-width: 100%;
}

#content-phishing-scam li,
#content-bounty-program li,
#content-aml-kyc-policty li {
    cursor: unset !important;
}

#content-giveaways .iframe-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#content-giveaways .e-widget-wrapper,
#content-giveaways .e-widget-preloader {
    margin: 0 10px !important;
    flex: 1;
}

#content-deposit {
    display: none;
    color: #aaa;
    font-size: 16px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-shop {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-rewards {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

#content-faq {
    display: none;
    color: #aaa;
    font-size: 14px;
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; */
}

.content-style {
    color: #aaa;
    font-size: 14px;
}

.content-style h2 {
    margin-top: 0px;
    margin-bottom: 5px;
}

.content-style p {
    margin-top: 0px;
}

.content-style pre {
    font-size: 11px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.content-style {
    min-width: 940px;
    padding: 30px;
    /*text-align: center;*/
    padding-bottom: 50px;
}

.content-title {
    font-size: 40px;
    color: #c8354e;
    font-weight: 300;
}

.content-subtitle {
    font-size: 16px;
    color: #aaa;
}

.article-image {
    border: 2px solid transparent;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    cursor: zoom-in;
}

.article-image:hover {
    border-color: #c32d4f;
}

.article-image.open {
    cursor: zoom-out;
}

.article-image img {
    max-width: 500px;
    max-height: 300px;
    transition: all 1s;
    height: auto !important;
}

.article-image.open img {
    max-width: 100%;
    max-height: 500px;
}

ul.bullets li {
    list-style-type: disc;
    list-style-position: inside;
}

.subtitle {
    color: #c32d4f;
    padding-bottom: 20px;
    padding-top: 30px;
    font-size: 200%;
}

h2.subtitle {
    font-size: 200%;
}

h3.subtitle {
    font-size: 180%;
}

h4.subtitle {
    font-size: 160%;
    color: #ccc;
}

.content-logged-out {
    margin-top: 60px;
    display: none;
}

/* Duel */
#duel-coming-soon-wrapper {
    margin: auto;
    width: 100%;
    position: absolute;
}

#duel-coming-soon-title {
    font-size: 60px;
    font-weight: 200;
    color: #c8354e;
    text-align: center;
}

#duel-coming-soon-description {
    font-size: 24px;
    font-weight: 400;
    color: #c8354e;
    text-align: center;
}

#duel-coming-soon-description2 {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #c8354e;
    text-align: center;
}

#duel-grid {
    margin: auto;
    margin-top: 50px;
}

#duel-balance-wrapper {
    display: none;
    width: 100%;
    height: 30px;
    font-size: 12px;
    position: relative;
}

#duel-balance-wrapper .duel-balance-inner {
    position: absolute;
    left: 0px;
    top: 0px;
}

#duel-balance-wrapper .balance-coins {
    font-size: 18px;
}

#duel-create-switch {
    margin-bottom: 20px;
}

.switch label input[type="checkbox"]:checked + .lever:after {
    background-color: #45b5da;
}

.switch label .lever:after {
    background-color: #c8354e;
    border-radius: 21px;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    top: -4px;
}

.switch label input[type="checkbox"]:checked + .lever {
    background-color: #666;
}

.switch label .lever {
    background-color: #666;
    height: 5px;
}

.switch label {
    font-size: 12px;
}

#duel-create-wrapper {
    position: absolute;
    bottom: 0px;
    right: 10px;
}

#duel-create-switch {
    text-align: center;
}

#duel-create-amount-wrapper {
    position: absolute;
    top: 194px;
    right: 50px;
}

#duel-create-loader {
    display: none;
    margin-bottom: 0px;
    margin-top: 42px;
    margin-left: 51px;
    margin-right: 51px;
}

.duel-drop-btn {
    display: inline-block;
    height: 32px;
    width: 96px;
    text-align: center;
    padding-top: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    color: #c8354e;
}

.duel-drop-btn:hover {
    font-weight: 800;
}

.blue-duel-drop-btn {
    display: inline-block;
    height: 32px;
    width: 96px;
    text-align: center;
    padding-top: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    color: #45b5da;
}

.blue-duel-drop-btn:hover {
    font-weight: 800;
}

#duel-filter-wrapper {
    position: absolute;
    top: 164px;
    right: 50px;
    text-align: right;
}

.filter-dropdown {
    border-radius: 5px;
    border: 2px #c8354e solid;
    color: #c8354e;
    background-color: #26262c;
    padding-top: 10px;
    padding-bottom: 10px;
}

.filter-dropdown:hover {
    background-color: #26262c;
}

.blue-filter-dropdown {
    border-radius: 5px;
    border: 2px #45b5da solid;
    color: #45b5da;
    background-color: #26262c;
    padding-top: 10px;
    padding-bottom: 10px;
}

.blue-filter-dropdown:hover {
    background-color: #26262c;
}

.duel-drop-btn {
    display: inline-block;
    height: 32px;
    width: 96px;
    text-align: center;
    padding-top: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    color: #c8354e;
}

.shop-drop-btn:hover {
    font-weight: 800;
}

#red-duel-balance-icon {
    height: 30px;
    margin-bottom: -8px;
    margin-right: 6px;
}

#blue-duel-balance-icon {
    height: 30px;
    margin-bottom: -8px;
    margin-right: 6px;
    display: none;
}

#duel-balance {
    font-size: 20px;
    color: #c8354e;
    margin-right: 5px;
}

/* Account */
#account-username {
    margin-top: 14px;
    font-size: 26px;
}

#account-level {
    margin-top: 10px;
    font-size: 20px;
}

#account-details {
    width: 724px;
    min-height: 220px;
    display: inline-block;
    border-radius: 15px;
    border: 2px solid #393939;
    text-align: center;
    padding: 20px 20px 40px 20px;
    margin-top: 20px;
}

#account-level-bar-wrapper,
#account-withdraw-bar-wrapper {
    width: 500px;
    height: 40px;
    margin: auto;
    margin-top: 10px;
    position: relative;
    text-align: center;
}

#account-level-bar,
#account-withdraw-bar {
    width: 100%;
    height: 100%;
    position: absolute;
}

#account-level-bar-info,
#account-withdraw-bar-info {
    z-index: 1;
    position: relative;
    font-size: 16px;
}

#send-wrapper {
    margin-top: 40px;
}

#trade-url-wrapper,
#steam-trade-url-wrapper {
    /* margin-top: 40px; */
}

#opskins-trade-url-wrapper {
    margin-top: 40px;
}

#transfer-wrapper {
}

#send-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#trade-url-loader,
#steam-trade-url-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#transfer-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

.content-section-title {
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 24px;
    color: #c8354e;
}

.content-section-title2 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
    color: #c8354e;
}

#bet-refresh-wrapper {
    height: 30px;
}

#bet-table {
    margin-top: 20px;
}

#bet-table > thead {
    border-bottom: 1px solid #333;
    color: #c8354e;
}

#bet-table-body tr:hover {
    color: #eee;
}

#bet-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#transaction-refresh-wrapper {
    height: 30px;
}

#transaction-table,
#crypto-transaction-table {
    margin-top: 20px;
}

#transaction-table > thead,
#crypto-transaction-table > thead {
    border-bottom: 1px solid #333;
    color: #c8354e;
}

#transaction-table-body tr:hover,
#crypto-transaction-table-body tr:hover {
    color: #eee;
}

#transaction-loader,
#crypto-transaction-loader,
#market-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#ledger-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#sends-refresh-wrapper {
    height: 30px;
}

#sends-table {
    margin-top: 20px;
}

#sends-table > thead {
    border-bottom: 1px solid #333;
    color: #c8354e;
}

#sends-table-body tr:hover {
    color: #eee;
}

#sends-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#duel-refresh-wrapper {
    height: 30px;
}

#duel-table {
    margin-top: 20px;
}

#duel-table > thead {
    border-bottom: 1px solid #333;
    color: #c8354e;
}

#duel-table-body tr:hover {
    color: #eee;
}

#duel-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#ledger-table {
    margin-top: 20px;
}

#ledger-table > thead {
    border-bottom: 1px solid #333;
    color: #c8354e;
}

#ledger-table-body tr:hover {
    color: #eee;
}

/* Inventory */
#inventory-refresh-wrapper {
    margin-top: 20px;
    height: 30px;
}

#inventory-wrapper {
    position: relative;
    margin-left: 10px;
}

#inventory-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#inventory-empty {
    margin-top: 20px;
}

#inventory-item-section {
    position: relative;
    margin-top: 20px;
}

#inventory {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 25%;
    text-align: center;
    margin-left: -15px;
}

#inventory-checkout {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 75%;
    text-align: center;
    padding-top: 15px;
}

.balance-coins {
    font-size: 18px;
    color: #c8354e;
    margin-right: 5px;
}

#inventory-checkout-amount-wrapper {
    position: absolute;
    top: -55px;
    right: 50px;
}

#inventory-checkout-amount-wrapper div.balance-row {
    margin: 0px;
    height: 30px;
}

#inventory-checkout-wrapper {
    position: absolute;
    top: 100px;
    right: 40px;
}

#inventory-checkout-loader {
    display: none;
    margin-bottom: -54px;
    margin-left: 50px;
    margin-right: 50px;
}

#inventory-checkout-icon {
    height: 26px;
    margin-bottom: -8px;
    margin-right: 6px;
}

#inventory-search-wrapper {
    margin-top: 10px;
    height: 30px;
    display: inline-block;
}

#inventory-search-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 27px;
}

/* Shop */
#shop-refresh-wrapper {
    /* margin-top: 20px; */
    height: 30px;
}

#shop-wrapper {
    position: relative;
    margin-left: 10px;
}

#shop-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#shop-search-wrapper {
    margin-top: 10px;
    height: 30px;
    display: inline-block;
}

#shop-search-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 27px;
}

#shop-sort-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 40px;
    margin-right: 40px;
}

#shop-filter-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 40px;
    margin-right: 40px;
}

#shop-filter-dropdown {
    border-radius: 5px;
    border: 2px #c8354e solid;
    color: #c8354e;
    background-color: #26262c;
    padding-top: 10px;
    padding-bottom: 10px;
}

#shop-filter-dropdown:hover {
    background-color: #26262c;
}

.shop-drop-btn {
    display: inline-block;
    height: 32px;
    width: 96px;
    text-align: center;
    padding-top: 5px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    color: #c8354e;
}

.shop-drop-btn:hover {
    font-weight: 800;
}

#shop-pagination-top {
    width: 75%;
    padding-top: 30px;
    padding-right: 46px;
}

#shop-pagination-bottom {
    width: 75%;
}

.shop-previous-wrapper {
    height: 30px;
    display: inline-block;
    vertical-align: top;
}

.shop-previous {
    display: none;
}

.shop-previous-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

.shop-next-wrapper {
    height: 30px;
    float: right;
    display: inline-block;
    vertical-align: top;
}

.shop-next {
    display: none;
}

.shop-next-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#shop-empty {
    margin-top: 20px;
}

#shop-item-section {
    position: relative;
}

#shop {
    width: 75%;
    margin-top: 30px;
    text-align: center;
    margin-left: -24px;
}

#shop-checkout {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 75%;
    text-align: center;
    padding-top: 15px;
}

#shop-checkout-amount {
    font-size: 20px;
    color: #c8354e;
    margin-right: 5px;
}

#shop-checkout-amount-wrapper {
    position: absolute;
    top: 0px;
    right: 0;
}

/* #shop-checkout-wrapper {
    position: absolute;
    top: 0px;
    right: 40px;
} */

#shop-checkout-loader {
    display: none;
    margin-bottom: -54px;
    margin-left: 50px;
    margin-right: 50px;
}

#shop-checkout-icon {
    height: 30px;
    margin-bottom: -8px;
    margin-right: 6px;
}

/* Rewards */
#verify-loader {
    display: none;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
}

#referral-claim-loader {
    display: none;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
}

#reward-claim-loader {
    display: none;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
}

#notifications-reward-claim-loader {
    display: none;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
}

#group-claim-loader {
    display: none;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
}

#redeem-wrapper {
    display: none;
    text-align: center;
}

#redeem-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

#referral-loader {
    display: none;
    height: 20px;
    width: 20px;
    margin-left: 28px;
    margin-right: 28px;
}

.reward-title {
    font-size: 20px;
    margin-top: 24px;
}

.notifications-reward-title,
.vip-reward-title {
    font-size: 20px;
    margin-top: 24px;
}

#vip-reward-claim-description {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 62px;
    padding-bottom: 96px;
}

#vip-reward-claim-description #vip-balance-value {
    color: #c8354e;
    font-size: 32px;
    position: relative;
    margin-left: 5px;
}

#vip-reward-claim-loader {
    display: none;
}

.group-title {
    font-size: 20px;
    margin-top: 24px;
}

.vk-reward-follow-modal {
    position: absolute;
    z-index: 1000;
    box-sizing: content-box;
    left: 00px;
    top: 47px;
    width: 100%;
    background: #26262c;
}

.vk-reward-follow-modal .widget {
    width: 200px;
    margin-left: 47px;
    font-size: 11px;
}

.vk-reward-follow-modal .title {
}

.vk-reward-follow-modal .widget {
}

#reward-weekend {
    display: none;
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 20px;
    color: #c8354e;
    font-size: 16px;
}

#referral-claim-description {
    height: 180px;
    color: #c8354e;
    font-size: 46px;
    padding-top: 50px;
    padding-bottom: 40px;
}

#reward-claim-description {
    height: 180px;
    color: #c8354e;
    font-size: 46px;
    padding-top: 50px;
    padding-bottom: 40px;
}

#notifications-reward-claim-description {
    height: 180px;
    color: #c8354e;
    font-size: 46px;
    padding-top: 50px;
    padding-bottom: 40px;
    position: relative;
}

#notifications-reward-claim-info {
    padding: 0 20px;
}

#group-claim-description {
    height: 180px;
    color: #c8354e;
    font-size: 46px;
    padding-top: 50px;
    padding-bottom: 40px;
}

#referral-claim-amount {
    vertical-align: top;
}

#reward-claim-icon {
    height: 40px;
    margin-bottom: -6px;
    margin-right: 6px;
}

#notifications-reward-claim-icon {
    height: 40px;
    margin-bottom: -6px;
    margin-right: 6px;
    position: absolute;
    top: 0;
    left: 0;
}

#group-claim-icon,
#notifications-reward-claim-icon {
    width: 46px;
    margin-bottom: -6px;
    margin-right: 6px;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #18181d;
    border-radius: 50%;
    z-index: 1;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#referral-claim-icon {
    font-size: 40px;
    margin-right: 6px;
    margin-top: 13px;
}

#referral-level-icon {
    height: 20px;
    margin-right: 4px;
    vertical-align: top;
    margin-top: 2px;
}

#reward-claim-level {
    font-size: 16px;
    vertical-align: top;
    margin-bottom: -2px;
}

#notifications-reward-claim-info {
    font-size: 16px;
    vertical-align: top;
    margin-bottom: -2px;
    padding-top: 25px;
}

#group-claim-level {
    font-size: 16px;
    vertical-align: top;
    margin-bottom: -2px;
}

#referral-claim-level img.svg.svg-sm {
    margin-top: 4px;
}

#reward-loader {
    height: 20px;
    width: 20px;
    margin-left: 22px;
}

#referral-claim {
    /* width: 300px;
    height: 340px;
    display: inline-block;
    border-radius: 15px;
    border: 2px solid #393939;
    text-align: center;
    margin-bottom: 20px;
    margin-right: 20px; */
}

#reward-claim {
    /* width: 300px;
    height: 340px;
    display: inline-block;
    border-radius: 15px;
    border: 2px solid #393939;
    margin-right: 20px;
    vertical-align: top;
    text-align: center;
    position: relative;
    margin-bottom: 20px; */
}

#notifications-reward-claim {
    /* width: 300px;
    height: 340px;
    display: inline-block;
    border-radius: 15px;
    border: 2px solid #393939;
    margin-right: 20px;
    vertical-align: top;
    text-align: center;
    position: relative;
    margin-bottom: 20px; */
}

#group-claim {
    width: 300px;
    height: 340px;
    display: inline-block;
    border-radius: 15px;
    border: 2px solid #393939;
    vertical-align: top;
    text-align: center;
}

.rewards-title {
    text-align: center;
}

.reward-disclaimer {
    font-size: 16px;
    margin: 0px;
    padding: 0px !important;
}

.reward-disclaimer.bottom {
    color: rgb(102, 102, 102);
    font-size: 14px;
    margin-top: 10px;
}

.reward-box {
    font-family: "Open Sans", Roboto, Helvetica, Arial, sans-serif;
    width: 250px;
    height: 370px;
    display: inline-block;
    background: #18181d;
    border-radius: 0px;
    border: none;
    border-top: 1px solid #c32d4f;
    vertical-align: top;
    text-align: center;
    position: relative;
    margin-right: 15px;
    margin-top: 15px;
}

.reward-box .description {
    font-size: 16px;
    vertical-align: top;
    margin-bottom: -2px;
    padding-top: 25px;
    color: #c32d4f;
}

.reward-box.disabled {
    background: #18181d !important;
    opacity: 0.33;
}

.reward-box .content-btn,
.reward-box .content-btn-disabled {
    background: #c32d4f;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    padding: 0px;
    transition: background 0.5s;
    /* margin:  0px; */
    border-radius: 0px;
    border: none;
    border-bottom: 3px solid #ab2845;
}

.reward-box .content-btn-disabled,
.reward-box .content-btn.disabled,
.reward-box .content-btn[disabled="disabled"] {
    opacity: 0.33;
    background: #44444e;
    border-color: #32323a;
}

.reward-box .content-btn:hover {
    background: #ab2845;
}

@-webkit-keyframes pulsate {
    0% {
        border-color: #393939;
    }

    50% {
        border-color: #c8354e;
    }

    100% {
        border-color: #393939;
    }
}

.reward-box.pulsate {
    animation: pulsate 1s infinite;
}

.reward-box.pulsate-faster {
    animation: pulsate 0.5s infinite;
}

.reward-box.disabled {
    border-color: rgba(255, 0, 0, 0.33);
    background-color: rgba(255, 0, 0, 0.03);
}

.reward-winners-container ul {
    margin: 0px auto;
    padding: 0px 30px;
    height: 190px;
    overflow: auto;
}

.reward-winners-container ul li {
    text-align: left;
    width: 100%;
    display: block;
    float: left;
}

.reward-winners-container ul li a {
    float: left;
}

.reward-winners-container ul li .right {
    float: right;
    display: inline-block;
    text-align: right;
}

.reward-box .valued-at {
    display: block;
}

.reward-box .reward-description {
    padding-top: 60px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}

.reward-box .reward-description.has-item {
    padding-top: 20px;
}

.reward-box .reward-left-container p {
    margin: 0px;
}

.reward-box .reward-description.has-description.has-item,
.reward-box .reward-description.has-description.has-image {
    padding-top: 5px;
}

.reward-box .reward-item-image img {
    height: 180px;
}

.reward-box .reward-description.has-value .reward-item-image img {
    height: 100px;
}

.reward-box .reward-description.has-description.has-value .reward-item-image img {
    height: 70px;
}

.reward-box .participants-value-container {
    padding: 10px;
    color: #c8354e;
}

.reward-box .reward-item-name {
    font-weight: bold;
    color: #c8354e;
    margin-bottom: 5px;
}

.reward-box .reward-description span.reward-amount,
.reward-box #notifications-reward-claim-amount {
    height: 180px;
    color: #c8354e;
    font-size: 40px;
    position: relative;
}

.reward-box .reward-amount:after,
.reward-box #notifications-reward-claim-amount:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #c32d4f;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.reward-box .reward-description .reward-value-container img {
    width: 30px;
}

.reward-box .reward-description.has-description.has-image .reward-value-container img {
    width: 25px !important;
    height: auto !important;
}

.reward-box .reward-description.has-description.has-image .reward-value-container span.reward-amount {
    font-size: 20px;
}

.reward-box .notif-description {
    padding: 0px 10px;
}

.reward-box .reward-bottom-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 90px;
}

.reward-box.has-winners .reward-item-container,
.reward-box.has-winners .reward-value-container,
.reward-box.has-winners .reward-bottom-container,
.reward-box.has-winners .reward-description-container {
    display: none !important;
}

.reward-box.has-winners .reward-description {
    padding-top: 0px;
}

.reward-box .reward-claim-btn {
    margin: 0px auto !important;
}

.reward-box.has-cooldown {
}

.reward-box.has-cooldown .reward-description.has-image,
.reward-box.has-cooldown .reward-description.has-description {
    margin-top: 0px;
    padding-top: 0px;
}

.reward-box.has-cooldown .reward-description.has-description p {
    margin-top: 5px;
}

.reward-item-image.type-csgo500 {
    height: 100px;
}

.reward-item-image.type-vgo-item {
    overflow: hidden;
    height: 100px;
}

.reward-item-image.type-vgo-item img {
    width: 60%;
    height: auto !important;
    margin-top: -35px;
}

.reward-item-image.type-vgo-key {
    height: 100px;
}

#daily-reward-recaptcha {
    height: 100px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0px;
}

.reward-recaptcha-container {
    margin-top: -28px;
}

#daily-reward-recaptcha iframe,
.reward-recaptcha-container iframe,
.smaller-recaptcha {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    margin: 11px;
}

.small-recaptcha {
    transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    margin: 11px;
}

#referral-claim-submit-disabled {
    display: none;
}

#reward-claim-submit-disabled {
    display: none;
}

#notifications-reward-claim-submit {
    display: none;
    width: 150px;
    margin: 44px auto 0 auto;
}

#notifications-reward-claim-submit-disabled {
    display: block;
    margin: 48px auto 0 auto;
}

#reward-claim-note {
    color: #666;
    font-size: 14px;
}

#rewards-wrapper {
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    /* margin-top: 20px; */
    /*text-align: center;*/
}

/* #content-rewards-referrals {
    display: none;
}

#content-rewards-daily {
    display: none;
} */

#content-rewards #dynamicGiveawaysContainer {
    display: none !important;
}

#referral-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    max-width: 350px;
    text-transform: uppercase;
}

#redeem-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    max-width: 350px;
    text-transform: uppercase;
}

#send-bux-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    margin-right: 15px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    max-width: 300px;
}

#send-openid-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    max-width: 300px;
}

#trade-url-input,
#steam-trade-url-input {
    background-color: #18181d;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    max-width: 624px;
}

#transfer-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    width: 312px;
}

#inventory-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    max-width: 300px;
}

#shop-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    max-width: 300px;
}

#content-login {
    position: absolute;
    right: 40px;
    top: 70px;
    border: 2px #666 solid;
    border-radius: 5px;
    color: #666;
    height: 50px;
    margin: auto;
    cursor: pointer;
    padding: 20px;
    padding-top: 8px;
    z-index: 10;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    background: linear-gradient(to bottom, #26262c 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
    font-size: 20px;
}

#content-login:hover {
    background-position: left bottom;
    border: 2px #666 solid;
    color: #26262c;
}

#content-login img {
    width: 70px;
    height: 70px;
    margin-top: -20px;
}

#content-login:hover img {
    content: url("../images/steamiconblack.png");
}

#top-content {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    background: #1c1c22;
    height: 70px;
    box-shadow: 0px 13px 29px -17px rgba(0, 0, 0, 0.83);
}

.toast.notification {
    padding: 8px !important;
    max-width: 400px;
    display: block;
}

#content-logout {
    position: absolute;
    right: 40px;
    top: 40px;
    border: 2px #666 solid;
    border-radius: 5px;
    padding-top: 8px;
    text-align: center;
    color: #666;
    height: 50px;
    width: 100px;
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    background: linear-gradient(to bottom, #26262c 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
    max-width: 300px;
}

#content-logout:hover {
    background-position: left bottom;
    border: 2px #666 solid;
    color: #26262c;
}

.custom-btn {
    height: 50px;
    margin: auto;
    text-align: center;
    padding-top: 8px;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    max-width: 300px;
}

.duel-item {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 5px;
    border: 2px solid transparent;
    width: 260px;
    height: 265px;
    /*display: inline-block;*/
    color: #666;
    vertical-align: top;
    position: relative;
}

.duel-item-inner {
    position: relative;
    width: 256px;
    height: 261px;
}

.my-duel {
    border: 2px solid #484848;
}

.duel-joinable {
    border: 2px solid #303030;
    /*cursor: pointer;*/
}

.duel-joinable:hover {
    border: 2px solid #444;
    /*	 -moz-box-shadow: 3px 3px 4px #111;
	 -webkit-box-shadow: 3px 3px 4px #111;
	 box-shadow: 3px 3px 4px #111; */
    /*	 margin-bottom: 25px;
	 margin-top: 5px;*/
}

.duel-join-confirmation {
    /*display: none;*/
    opacity: 0;
    position: absolute;
    padding-top: 84px;
    width: 256px;
    height: 261px;
    text-align: center;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
}

.duel-joinable:hover .duel-join-confirmation {
    opacity: 1;
    /*display: block;*/
}

.duel-item-wheel-wrapper {
    position: absolute;
    top: 0px;
    margin-top: 60px;
    width: 256px;
    height: 138px;
    padding-bottom: 10px;
    transform: rotate(180deg);
}

.duel-item-wheel {
}

.duel-icon {
    height: 26px;
    margin-bottom: -7px;
    margin-right: 5px;
}

.duel-worth {
    font-size: 18px;
}

.duel-worth-hidden {
    display: none;
}

.duel-item-avatar {
    height: 16px;
    border-radius: 10px;
    vertical-align: -4px;
    margin-right: 4px;
}

.duel-item-name {
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.duel-item-header {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: #c8354e;
    padding: 14px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 300px;
    text-align: left;
}

.duel-item-footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: #45b5da;
    padding: 14px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 300px;
    text-align: left;
}

#content-wheel {
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

#content-wheel-pointer {
    position: absolute;
    width: 100%;
    transform: rotate(180deg);
    bottom: 35px;
}

.wheel-offline {
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 9000;
    top: 260px;
    display: none;
}

.wheel-offline.active {
    display: block;
}

.wheel-offline span {
    background: rgb(17 17 21 / 50%);
    padding: 8px 16px;
    font-size: 20px;
    color: #c8354e;
    display: inline-block;
}

#wheel-pointer {
    display: block;
    margin: auto;
    height: 24px;
    width: 24px;
    padding-top: 16px;
    -webkit-transition: 100ms ease;
    -moz-transition: 100ms ease;
    -ms-transition: 100ms ease;
    -o-transition: 100ms ease;
    transition: 100ms ease;
    color: transparent;
    opacity: 0;
}

.duel-wheel-pointer {
    position: absolute;
    width: 100%;
    transform: rotate(180deg);
    text-align: center;
    top: 145px;
    color: #333;
}

#content-wheel-canvas {
    height: 100%;
    width: 100%;
}

#content-wheel-canvas-wrapper {
    margin: auto;
    height: 400px;
    width: 400px;
    transform: rotate(180deg);
    pointer-events: none;
    overflow: hidden;
}

#wheel {
    display: block;
    margin: auto;
    margin-top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: url("/static/images/wheel_400.png") no-repeat center;
    background-size: 100%;
}

#content-wheel-balance {
    position: absolute;
    left: 40px;
    right: 0px;
    bottom: 60px;
    z-index: 1;
}

#content-wheel-balance .row {
    margin-bottom: 0;
}

#content-wheel-balance #balance {
    font-weight: 500;
}

#content-wheel-autobetter {
    /* position: absolute; */
    left: 40px;
    right: 0px;
    bottom: -20px;
    z-index: 1;
    display: none;
    font-size: 10px !important;
}

#content-wheel-timer {
    position: absolute;
    bottom: 75px;
    width: 100%;
}

#wheel-timer {
    display: none;
    margin: auto;
    width: 400px;
    opacity: 1;
    font-size: 30px;
    color: #444;
    text-align: center;
    font-weight: 300;
    transition:
        opacity 100ms linear,
        transform 100ms;
}

#content-past-queue {
    position: absolute;
    right: 40px;
    left: 50%;
    bottom: 60px;
    z-index: 5;
    height: 250px;
}

#past-queue {
    height: 225px;
    width: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

#past-queue-wrapper {
    width: 150px;
    padding-left: 30px;
    padding-top: 30px;
}

#past-queue-100 .last-100 {
    font-size: 10px;
    margin-bottom: 5px;
    line-height: 1.2;
}
#past-queue-100 .past {
    margin-bottom: 10px;
    display: inline-block;
    text-align: center;
    width: 25px;
    font-weight: bold;
}
#past-queue-100 .past-grey {
    color: #555555;
    /* border-bottom: 3px solid #555555; */
}

#past-queue-100 .past-red {
    color: #c8354e;
    /* border-bottom: 3px solid #c8354e; */
}

#past-queue-100 .past-blue {
    color: #45b5da;
    /* border-bottom: 3px solid #45b5da; */
}

#past-queue-100 .past-gold {
    color: #ffc870;
    /* border-bottom: 3px solid #ffc870; */
}

#past-queue-100 {
    display: block;
    margin-bottom: 10px;
    margin-left: 8px;
    width: 30px;
    position: absolute;
    text-align: center;
}
#past-queue-more {
    position: absolute;
    bottom: -5px;
    left: 110px;
    display: none;
}

#past-queue-more i {
    cursor: pointer;
    color: #555;
    -webkit-transition: 300ms ease-out;
    -moz-transition: 300ms ease-out;
    -ms-transition: 300ms ease-out;
    -o-transition: 300ms ease-out;
    transition: 300ms ease-out;
    transform: rotate(90deg);
}

#past-queue-more i:hover {
    color: #c8354e;
}

#classic-past-queue-more {
    visibility: hidden;
    opacity: 0;
    justify-content: center;
    align-items: center;
    transition: opacity 300ms ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

#classic-past-queue-more i {
    font-size: 22px;
    cursor: pointer;
    color: #555;
    -webkit-transition: 300ms ease-out;
    -moz-transition: 300ms ease-out;
    -ms-transition: 300ms ease-out;
    -o-transition: 300ms ease-out;
    transition: 300ms ease-out;
}

#classic-past-queue-more i:hover {
    color: #c8354e;
}

a.wheel-info {
    display: none;
    position: absolute;
    left: 110px;
    top: 0px;
}

.tooltip-0 {
    border-right: 5px solid #555;
}

.tooltip-0 > span {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.tooltip-1 {
    border-right: 5px solid #c8354e;
}

.tooltip-1 > span {
    font-size: 12px;
    color: #c8354e;
    font-weight: 600;
}

.tooltip-2 {
    border-right: 5px solid #45b5da;
}

.tooltip-2 > span {
    font-size: 12px;
    color: #45b5da;
    font-weight: 600;
}

.tooltip-3 {
    border-right: 5px solid #ffc870;
}

.tooltip-3 > span {
    font-size: 12px;
    color: #ffc870;
    font-weight: 600;
}

.classic-tooltip-0,
.classic-tooltip-1,
.classic-tooltip-2 {
    border-bottom: 5px solid transparent;
}

.classic-tooltip-0 {
    border-color: #c8354e;
}

.classic-tooltip-0:before {
    border-top: 8px solid #c8354e;
}

.classic-tooltip-0 > span {
    font-size: 12px;
    color: #c8354e;
    font-weight: 600;
}

.classic-tooltip-1 {
    border-color: #555;
}

.classic-tooltip-1:before {
    border-top: 8px solid #555;
}

.classic-tooltip-1 > span {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.classic-tooltip-2 {
    border-color: #33b349;
}

.classic-tooltip-2:before {
    border-top: 8px solid #33b349;
}

.classic-tooltip-2 > span {
    font-size: 12px;
    color: #33b349;
    font-weight: 600;
}

.tooltip-0:before {
    border-left: 8px solid #555;
}

.tooltip-1:before {
    border-left: 8px solid #c8354e;
}

.tooltip-2:before {
    border-left: 8px solid #45b5da;
}

.tooltip-3:before {
    border-left: 8px solid #ffc870;
}

.classic-tooltip-0:before {
    border-top: 8px solid #c8354e;
}

.classic-tooltip-1:before {
    border-top: 8px solid #555;
}

.classic-tooltip-2:before {
    border-top: 8px solid #33b349;
}

.past-queue-tooltip {
    background: #1c1c22;
    color: #aaa;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    width: 150px;
    display: none;
    font-size: 10px;
    word-wrap: break-word;
}

.past-queue-tooltip:before {
    content: "";
    height: 0;
    width: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    right: -10px;
    z-index: 10000;
}

.classic-past-queue-tooltip {
    background: #1c1c22;
    color: #aaa;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    width: 150px;
    display: none;
    font-size: 10px;
    word-wrap: break-word;
    text-align: left;
    line-height: 1.5;
    z-index: 100; /* to make sure it overlays the activity bar (top bar), which has a z-index of 10 as of writing */
}

.classic-past-queue-tooltip:before {
    content: "";
    height: 0;
    width: 0;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    bottom: -20px;
    left: 38px;
    z-index: 10000;
}

.past-tooltip,
.classic-past-tooltip {
    position: static;
    height: 9px;
    width: 70px;
    padding-top: 3px;
}

.past-color {
    display: block;
    margin-left: 20px;
    border-radius: 2px;
    transition: opacity 100ms;
    height: 3px;
}

.past-0 .past-color {
    width: 18px;
    background-color: #555;
}

.past-1 .past-color {
    width: 22px;
    background-color: #c8354e;
}

.past-2 .past-color {
    width: 28px;
    background-color: #45b5da;
}

.past-3 .past-color {
    width: 36px;
    background-color: #ffc870;
}

.past-spoiler .past-color {
    opacity: 0.4;
}

#past-queue-spoil {
    height: 1em;
    width: 1em;
    font-size: 14px;
    transition: all 100ms;
    border-radius: 50%;
    user-select: none;
    color: #555555;
    left: 60px;
}

#past-queue-spoil:hover,
#classic-past-queue-spoil:hover {
    box-shadow:
        inset 0 0 0 1em rgba(0, 0, 0, 0.35),
        0 0 0 0.5em rgba(0, 0, 0, 0.35);
}

#past-queue-spoil {
    position: absolute;
    bottom: -28px;
}

#past-queue-spoil:hover {
    color: #92394e;
}

#past-queue-spoil.active {
    color: #c32d4f;
}

#past-queue-spoil i {
    font-size: 14px;
}

#classic-past-queue-spoil {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
    color: #555555;
    transition:
        transform 300ms,
        box-shadow 100ms,
        color 100ms;
    transform: translateX(-22px);
    border-radius: 1em;
}

#classic-past-queue-spoil:hover {
    color: #92394e;
}

#classic-past-queue-spoil.active {
    color: #c32d4f;
}

#classic-past-queue-spoil i {
    font-size: 14px;
}

#balance-wrapper {
    margin: auto;
    width: 300px;
    position: relative;
}

#balance-icon {
    height: 28px;
    margin-bottom: -7px;
    margin-right: 7px;
}

#balance {
    font-size: 20px;
    color: #c8354e;
}

#bet-button-wrapper {
    margin-top: 20px;
}

#create-button-wrapper {
    color: #aaa;
    margin-top: 20px;
}

.bet-button {
    padding-top: 5px;
    border-radius: 3px;
    margin-right: 10px;
    margin-top: 5px;
    cursor: pointer;
    color: #aaa;
}

.bet-button:hover {
    color: #c8354e;
}

.blue-bet-button {
    padding-top: 5px;
    border-radius: 3px;
    margin-right: 10px;
    margin-top: 5px;
    cursor: pointer;
}

.blue-bet-button:hover {
    color: #45b5da;
}

#bet-input,
#mb-bet-input,
.mb-bet-input {
    background-color: #2c2c32 !important;
    padding-left: 10px !important;
    margin-left: -5px !important;
    border-radius: 5px !important;
    color: #ccc !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
}

#balance-wrapper #bet-input {
    margin-bottom: 0 !important;
}

#bet-input[type="number"],
#mb-bet-input[type="number"],
.mb-bet-input[type="number"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#bet-input[type="number"]:focus,
#mb-bet-input[type="number"]:focus,
.mb-bet-input[type="number"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#duel-input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    width: 300px;
}

#duel-input[type="number"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
    -moz-transition-property: none;
    -webkit-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
}

/* label underline focus color */
#duel-input[type="number"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#referral-input[type="text"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#referral-input[type="text"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#redeem-input[type="text"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#redeem-input[type="text"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#send-bux-input[type="number"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#send-bux-input[type="number"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#send-openid-input[type="number"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#send-openid-input[type="number"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

.fixed-recaptcha {
    width: 330px;
    border: 2px solid rgb(200, 53, 78);
    background: #2c2c32;
    padding: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -170px;
    z-index: 1000;
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.modal-iframe {
    width: 50%;
    height: 500px;
    border: 2px solid rgb(200, 53, 78);
    background: #2c2c32;
    padding: 10px;
    position: fixed;
    left: 50%;
    top: 50px;
    margin-left: -25%;
    z-index: 1000;
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.modal-iframe iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#trade-url-input[type="text"],
#steam-trade-url-input[type="text"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#trade-url-input[type="text"]:focus,
#steam-trade-url-input[type="text"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#transfer-input[type="number"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#transfer-input[type="number"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#inventory-input[type="text"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#inventory-input[type="text"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

#shop-input[type="text"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
#shop-input[type="text"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

.thumb {
    display: none;
}

#content-mybets {
    margin-bottom: 5px;
    margin-top: 5px;
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
}

#roulette-mybets {
    margin-bottom: 5px;
    margin-top: 5px;
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    max-width: 1200px;
}
#content-mybets {
    padding-left: 30px;
    padding-right: 30px;
}

.my-bets {
    text-align: center;
}

#my-bets-2x-wrapper,
#roulette-my-bets-black-wrapper {
    color: #666;
    opacity: 0;
}

#my-bets-3x-wrapper,
#roulette-my-bets-red-wrapper {
    color: #c8354e;
    opacity: 0;
}

#my-bets-5x-wrapper {
    color: #45b5da;
    opacity: 0;
}

#my-bets-50x-wrapper {
    color: #ffc870;
    opacity: 0;
}

#roulette-my-bets-green-wrapper {
    color: #33b349;
    opacity: 0;
}

#my-bets-2x-wrapper img,
#my-bets-3x-wrapper img,
#my-bets-5x-wrapper img,
#my-bets-50x-wrapper img,
#roulette-my-bets-red-wrapper img,
#roulette-my-bets-black-wrapper img,
#roulette-my-bets-green-wrapper img {
    margin-bottom: -2px !important;
}

#content-bets {
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 5px;
    font-size: 30px;
    position: relative;
}

.bet-btn {
    height: 60px;
    margin: auto;
    text-align: center;
    padding-top: 9px;
    border-radius: 7px;
    font-size: 24px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: 200ms ease;
    -moz-transition: 200ms ease;
    -ms-transition: 200ms ease;
    -o-transition: 200ms ease;
    transition: 200ms ease;
}

#bet-btn-2x,
#roulette-btn-black {
    display: block;
    border-top: 2px #666 solid;
    border-bottom: 2px #666 solid;
    color: #666;
    background: linear-gradient(to bottom, #1c1c22 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
}

#bet-btn-3x,
#roulette-btn-red {
    display: block;
    border-top: 2px #c8354e solid;
    border-bottom: 2px #c8354e solid;
    color: #c8354e;
    background: linear-gradient(to bottom, #1c1c22 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

#roulette-btn-green {
    display: block;
    border-top: 2px #33b349 solid;
    border-bottom: 2px #33b349 solid;
    color: #33b349;
    background: linear-gradient(to bottom, #1c1c22 50%, #33b349 50%);
    background-size: 100% 200%;
    background-position: left top;
}

#roulette-btn-green:hover {
    background-position: left bottom;
    border: 2px #33b349 solid;
    color: #26262c;
}

#roulette-btn-green-disabled {
    display: none;
    border-top: 2px #33b349 solid;
    border-bottom: 2px #33b349 solid;
    color: #33b349;
    opacity: 0.3;
}

#bet-btn-5x {
    border-top: 2px #45b5da solid;
    border-bottom: 2px #45b5da solid;
    color: #45b5da;
    background: linear-gradient(to bottom, #1c1c22 50%, #45b5da 50%);
    background-size: 100% 200%;
    background-position: left top;
}

#bet-btn-50x {
    border-top: 2px #ffc870 solid;
    border-bottom: 2px #ffc870 solid;
    color: #ffc870;
    background: linear-gradient(to bottom, #1c1c22 50%, #ffc870 50%);
    background-size: 100% 200%;
    background-position: left top;
}

#bet-btn-2x:hover,
#roulette-btn-black:hover {
    background-position: left bottom;
    border: 2px #666 solid;
    color: #26262c;
}

#bet-btn-3x:hover,
#roulette-btn-red:hover {
    background-position: left bottom;
    border: 2px #c8354e solid;
    color: #26262c;
}

#bet-btn-5x:hover {
    border: 2px #45b5da solid;
    background-position: left bottom;
    color: #26262c;
}

#bet-btn-50x:hover {
    border: 2px #ffc870 solid;
    background-position: left bottom;
    color: #26262c;
}

#bet-btn-2x-disabled,
#roulette-btn-black-disabled {
    display: none;
    border-top: 2px #666 solid;
    border-bottom: 2px #666 solid;
    color: #666;
    opacity: 0.3;
}

#bet-btn-3x-disabled,
#roulette-btn-red-disabled {
    display: none;
    border-top: 2px #c8354e solid;
    border-bottom: 2px #c8354e solid;
    color: #c8354e;
    opacity: 0.3;
}

#bet-btn-5x-disabled {
    display: none;
    border-top: 2px #45b5da solid;
    border-bottom: 2px #45b5da solid;
    color: #45b5da;
    opacity: 0.3;
}

#bet-btn-50x-disabled {
    display: none;
    border-top: 2px #ffc870 solid;
    border-bottom: 2px #ffc870 solid;
    color: #ffc870;
    opacity: 0.3;
}

.bet-btn-disabled {
    height: 60px;
    margin: auto;
    text-align: center;
    padding-top: 8px;
    border-radius: 7px;
    font-size: 24px;
    font-weight: 400;
    cursor: not-allowed;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    background: #1c1c22;
}

#content-allbets {
    margin-bottom: 5px;
    padding-left: 30px;
    padding-right: 30px;
    color: #ccc;
    font-size: 14px;
}

.bet-icon {
    height: 20px;
    margin-bottom: -5px;
    margin-right: 5px;
}

.bet-icon-svg {
    height: 14px;
    margin-bottom: -2px;
    margin-right: 5px;
}

.bet-header-icon {
    margin-bottom: -2px;
}

.bets-bttns-wrap {
    margin-bottom: 6px;
}

.all-bets-total,
.roulette-all-bets-total {
    margin: auto;
    max-width: 300px;
}

.all-bets-icon,
.roulette-all-bets-icon {
    font-size: 19px;
    margin-top: 0px;
}

#all-bets-2x-bets {
    vertical-align: top;
}

#all-bets-3x-bets {
    vertical-align: top;
}

#all-bets-5x-bets {
    vertical-align: top;
}

#all-bets-50x-bets {
    vertical-align: top;
}

#roulette-all-bets-red-bets,
#roulette-all-bets-green-bets,
#roulette-all-bets-black-bets {
    vertical-align: top;
}

div#all-bets-2x,
div#all-bets-3x,
div#all-bets-5x,
div#all-bets-50x,
div#roulette-all-bets-red,
div#roulette-all-bets-green,
div#roulette-all-bets-black {
    height: 500px;
    overflow: hidden;
}

.all-bets-left-wrapper,
.roulette-all-bets-left-wrapper {
    position: absolute;
    left: 10px;
    right: 10px;
    overflow: hidden;
    text-align: left;
}

.all-bets-right-wrapper,
.roulette-all-bets-left-wrapper {
    position: absolute;
    right: 10px;
    /* background-color: #26262C; */
}

.all-bets,
.roulette-all-bets {
    margin: auto;
}

.all-bets a.all-bets-profile-link:hover span,
.roulette-all-bets a.roulette-all-bets-profile-link:hover span {
    text-decoration: underline;
}

#all-bets-2x-wrapper,
#all-bets-2x-wrapper a.all-bets-profile-link {
    color: #666;
}

#all-bets-3x-wrapper,
#all-bets-3x-wrapper a.all-bets-profile-link {
    color: #c8354e;
}

#all-bets-5x-wrapper,
#all-bets-5x-wrapper a.all-bets-profile-link {
    color: #45b5da;
}

#all-bets-50x-wrapper,
#all-bets-50x-wrapper a.all-bets-profile-link {
    color: #ffc870;
}

#roulette-all-bets-red-wrapper,
#roulette-all-bets-red a.roulette-all-bets-profile-link {
    color: #c8354e;
}

#roulette-all-bets-black-wrapper,
#roulette-all-bets-black a.roulette-all-bets-profile-link {
    color: #666;
}

#roulette-all-bets-green-wrapper,
#roulette-all-bets-green a.roulette-all-bets-profile-link {
    color: #33b349;
}

.all-bets-content:first-child .level-badge,
.roulette-all-bets-content:first-child .level-badge {
    font-size: 16px !important;
}

.all-bets-content:not(:first-child) .level-badge,
.roulette-all-bets-content:not(:first-child) .level-badge {
    margin-bottom: unset !important;
    line-height: 16px !important;
}

.all-bets .all-bets-content:not(:first-child) .all-bets-content-user,
.roulette-all-bets .roulette-all-bets-content:not(:first-child) .roulette-all-bets-content-user {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 100px);
}

.all-bets .all-bets-content:not(:first-child) .all-bets-profile-link span .level-badge,
.roulette-all-bets .roulette-all-bets-content:not(:first-child) .roulette-all-bets-profile-link span .level-badge {
    min-width: 28px !important;
    max-width: 35px !important;
}

.all-bets-content {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 30px;
    position: relative;
}

.roulette-all-bets-content {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 30px;
    position: relative;
}

.all-bets-content.prev,
.all-bets-content.prev a,
.roulette-all-bets-content.prev,
.roulette-all-bets-content.prev a {
    color: #f00 !important;
    font-weight: bold;
}

.all-bets-content.new,
.all-bets-content.new a,
.roulette-all-bets-content.new,
.roulette-all-bets-content.new a {
    color: #0f0 !important;
    font-weight: bold;
}

.all-bets-content-user,
.roulette-all-bets-content-user {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 20px;
    overflow: hidden;
}

.roulette-all-bets-content--special,
.all-bets-content--special {
    border-radius: 4px;
}

.roulette-all-bets-content--special:first-child,
.all-bets-content--special:first-child {
    border-radius: 4px 4px 0 0 !important;
}

.roulette-all-bets-content--special:first-child span:not(.level-badge),
.all-bets-content--special:first-child span:not(.level-badge) {
    line-height: 30px !important;
}

.roulette-all-bets-content--special .level-badge,
.all-bets-content--special .level-badge {
    color: black !important;
    box-shadow: none !important;
}

.roulette-all-bets-content--special .roulette-all-bets-profile-link,
.all-bets-content--special .all-bets-profile-link {
    color: inherit !important;
}

.roulette-all-bets-content--special .vip-gem,
.all-bets-content--special .vip-gem {
    width: 1em !important;
    height: 1em !important;
    margin-left: 5px !important;
    display: inline-block;
    vertical-align: middle;
}

.roulette-all-bets-content--special .all-bets-content-bet,
.all-bets-content--special .all-bets-content-bet {
    vertical-align: bottom;
}

/* Horrible Wall of Color Vars */
.all-bets-content--vip1,
.roulette-all-bets-content--vip1 {
    color: #ccc !important;
    background: hsla(0, 0%, 73%, 0.025);
}
.all-bets-content--vip2,
.roulette-all-bets-content--vip2 {
    color: hsl(37, 100%, 72%) !important;
    background: hsla(37, 100%, 13%, 0.125);
}
.all-bets-content--vip3,
.roulette-all-bets-content--vip3 {
    color: hsl(255, 86%, 78%) !important;
    background: hsla(255, 86%, 38%, 0.05);
}
.all-bets-content--vip4,
.roulette-all-bets-content--vip4 {
    color: hsl(90, 70%, 62%) !important;
    background: hsla(90, 70%, 22%, 0.05);
}
.all-bets-content--vip5,
.roulette-all-bets-content--vip5 {
    color: hsl(350, 78%, 70%) !important;
    background: hsla(350, 78%, 30%, 0.1);
}
.all-bets-content--vip6,
.roulette-all-bets-content--vip6 {
    color: hsl(201, 94%, 74%) !important;
    background: hsla(201, 94%, 34%, 0.075);
}
.all-bets-content--vip7,
.roulette-all-bets-content--vip7 {
    color: rgb(195, 247, 244) !important;
    background: hsla(201, 94%, 34%, 0.075);
}
.all-bets-content--vip8,
.roulette-all-bets-content--vip8 {
    color: hsl(233deg, 39%, 55%) !important;
    background: hsl(275deg 94% 34% / 8%);
}
.all-bets-content--vip9,
.roulette-all-bets-content--vip9 {
    /* color: hsl(233deg, 39%, 55%) !important;  */
    color: #fff !important;
    text-shadow:
        0px 0px 2px hsl(310deg 79% 66%),
        0px 0px 10px hsl(237deg 72% 38%);
    background: hsl(325deg 65% 37% / 8%);
}

.all-bets-content--vip1 .level-badge,
.roulette-all-bets-content--vip1 .level-badge {
    background: hsl(0, 0%, 73%) !important;
}
.all-bets-content--vip2 .level-badge,
.roulette-all-bets-content--vip2 .level-badge {
    background: hsl(37, 100%, 72%) !important;
}
.all-bets-content--vip3 .level-badge,
.roulette-all-bets-content--vip3 .level-badge {
    background: hsl(255, 86%, 78%) !important;
}
.all-bets-content--vip4 .level-badge,
.roulette-all-bets-content--vip4 .level-badge {
    background: hsl(90, 70%, 62%) !important;
}
.all-bets-content--vip5 .level-badge,
.roulette-all-bets-content--vip5 .level-badge {
    background: hsl(350, 78%, 70%) !important;
}
.all-bets-content--vip6 .level-badge,
.roulette-all-bets-content--vip6 .level-badge {
    background: hsl(201, 94%, 74%) !important;
}

.all-bets-content--vip7 .level-badge,
.roulette-all-bets-content--vip7 .level-badge {
    background: hsl(180deg, 30%, 75%) !important;
}
.all-bets-content--vip8 .level-badge,
.roulette-all-bets-content--vip8 .level-badge {
    background: hsl(239deg, 31%, 57%) !important;
}
.all-bets-content--vip9 .level-badge,
.roulette-all-bets-content--vip9 .level-badge,
.all-bets-content--vip10 .level-badge,
.roulette-all-bets-content--vip10 .level-badge {
    background: hsl(322deg 69% 36%) !important;
    color: #fff !important;
    text-shadow:
        0px 0px 5px hsl(92deg 79% 66%),
        0px 0px 5px hsl(0deg 79% 66%);
}

/* first-bet border otherwise too bright */
.all-bets-content--special:first-child:after,
.roulette-all-bets-content--special:first-child:after {
    opacity: 0.65;
}

.all-bets-content--vip1:first-child:after,
.roulette-all-bets-content--vip1:first-child:after {
    opacity: 0.5;
}

/* first-bet border should be pink for content creators */
.all-bets-content--content-creator:first-child:after,
.roulette-all-bets-content--content-creator:first-child:after {
    color: #efa5e7;
}

.all-bets-content--content-creator.all-bets-content--special,
.roulette-all-bets-content--content-creator.roulette-all-bets-content--special {
    background: hsla(306, 50%, 59%, 0.05);
    border-radius: 5px;
    color: white !important;
}

.all-bets-content--content-creator.all-bets-content--special span,
.roulette-all-bets-content--content-creator.roulette-all-bets-content--special span {
    color: #efa5e7 !important;
}

.all-bets-content--content-creator.all-bets-content--special .level-badge,
.roulette-all-bets-content--content-creator.roulette-all-bets-content--special .level-badge {
    background: #ff71bf !important;
    color: white !important;
}

.all-bets-content-avatar,
.roulette-all-bets-content-avatar {
    height: 20px;
    border-radius: 10px;
    vertical-align: -5px;
    margin-right: 4px;
}

.all-bets-content-bet,
.roulette-all-bets-content-bet {
    position: absolute;
    right: 10px;
    /* background-color: #26262C; */
    padding-left: 10px;
}

.all-bets-content-total,
.roulette-all-bets-content-total {
    text-align: right;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    height: 32px;
    font-weight: 500;
}

/* Items */
.inventory-item {
    transition: border 0.2s ease;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 5px;
    border: 2px solid #333;
    width: 150px;
    height: 175px;
    display: inline-block;
    color: #666;
    vertical-align: top;
    position: relative;
    cursor: pointer;
}

.inventory-item-selected {
    text-align: center;
    cursor: pointer;
    min-height: 150px;
    position: relative;
    border: rgba(0, 0, 0, 0) solid 2px;
    border-bottom: #333 2px solid;
    border-radius: 5px;
    transition: 0.2s ease;
}

.inventory-item-selected:hover {
    border: #c8354e solid 2px;
    transition: 0.2s ease;
}

.inventory-item-faded {
    transition: border 0.2s ease;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 5px;
    border: 2px solid #333;
    width: 150px;
    height: 175px;
    display: inline-block;
    color: #666;
    vertical-align: top;
    position: relative;
    opacity: 0.3;
    cursor: not-allowed;
}

.inventory-item:hover {
    border: 2px solid #c8354e;
}

.shop-item {
    position: absolute;
    top: 0;
    bottom: 26px;
    left: 0;
    right: 0;
    cursor: pointer;
}

.shop-item-wrapper {
    transition: border 0.2s ease;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 5px;
    border: 2px solid #333;
    width: 150px;
    height: 200px;
    display: inline-block;
    color: #666;
    vertical-align: top;
    position: relative;
}

.shop-item-wrapper.notrade .shop-item {
    opacity: 0.25;
}

.shop-item-wrapper.notrade ul.stickers-container {
    opacity: 0.25 !important;
}

.shop-item-wrapper .item-cooldown {
    width: 100%;
    height: 60%;
    margin-top: 15%;
    position: absolute;
    z-index: 10;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
    font-weight: bold;
    font-size: 20px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.shop-item-wrapper:hover .item-cooldown {
    color: #c8354e;
}

.shop-item-wrapper-selected {
    transition: border 0.2s ease;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 5px;
    border: 2px solid #c8354e;
    width: 150px;
    height: 200px;
    display: inline-block;
    color: #666;
    vertical-align: top;
    position: relative;
}

.shop-item-selected {
    text-align: center;
    cursor: pointer;
    min-height: 150px;
    position: relative;
    border: rgba(0, 0, 0, 0) solid 2px;
    border-bottom: #333 2px solid;
    border-radius: 5px;
    transition: 0.2s ease;
}

.shop-item-selected:hover {
    border: #c8354e solid 2px;
    transition: 0.2s ease;
}

.shop-item-faded {
    transition: border 0.2s ease;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 5px;
    border: 2px solid #333;
    width: 150px;
    height: 200px;
    display: inline-block;
    color: #666;
    vertical-align: top;
    position: relative;
    opacity: 0.3;
    cursor: not-allowed;
}

.shop-item-wrapper:hover {
    border: 2px solid #c8354e;
}

.shop-item-wrapper:hover .item-link {
    border-top: 2px solid #c8354e;
    color: #c8354e;
}

.shop-item-wrapper .paintWear,
.inventory-item .paintWear,
.inventory-item-faded .paintWear {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 0px 3px 2px 5px;
    font-size: 10px;
    background: #333;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}

.shop-item-wrapper:hover .paintWear,
.inventory-item:hover .paintWear,
.inventory-item-faded:hover .paintWear {
    background-color: #c8354e;
    color: #fff;
}

.shop-item-wrapper .phase {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0px 5px 2px 3px;
    font-size: 10px;
    background: #333;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
    text-transform: capitalize;
}

.shop-item-wrapper:hover .phase {
    background-color: #c8354e;
    color: #fff;
}

.shop-item-wrapper .phase-ruby {
    color: #c00;
}

.shop-item-wrapper .phase-emerald {
    color: #0c0;
}

.shop-item-wrapper .phase-sapphire {
    color: #06f;
}

.shop-item-wrapper .phase-blackpearl {
    color: #000;
}

ul.stickers-container {
    position: absolute;
    left: 5px;
    top: 45px;
    padding: 0px;
    margin: 0px;
    z-index: 20;
}

.shop-item-selected ul.stickers-container,
.inventory-item-selected ul.stickers-container {
    top: 15px;
}

ul.stickers-container li.sticker {
    width: 35px;
    padding: 0px;
    margin: 0px;
}

ul.stickers-container li.sticker img {
    width: 100%;
    height: auto !important;
}

.item-link {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -ms-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    border-top: 2px solid #333;
    font-size: 10px;
    font-weight: 800;
    color: #444;
    background: linear-gradient(to bottom, #26262c 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}

.item-link:hover {
    background-color: #c8354e;
    color: #26262c !important;
    background-position: left bottom;
}

.shop-item-wrapper-selected .item-link {
    border-top: 2px solid #c8354e;
    color: #c8354e;
}

.item-name {
    font-size: 11px;
    color: #aaa;
    z-index: 1;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
}

.item-name-selected {
    font-size: 11px;
    color: #aaa;
    z-index: 1;
    padding-left: 40px;
    padding-right: 40px;
    position: absolute;
    top: 10px;
    left: 0px;
    width: 100%;
}

.item-icon {
    height: 24px;
    margin-right: 4px;
    vertical-align: top;
}

.item-icon-svg {
    height: 17px;
    margin-right: 4px;
    vertical-align: middle;
}

.item-price {
    position: absolute;
    bottom: 20px;
    left: 15px;
    right: 15px;
    text-align: center;
    font-size: 16px;
    color: #c8354e;
}

.item-price-selected {
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    text-align: center;
    font-size: 16px;
    color: #c8354e;
}

.item-image-wrapper {
    position: absolute;
    width: 100%;
    top: 45px;
}

.item-image {
    height: 90px;
    margin: 0 auto;
    display: block;
}

.item-image-selected {
    height: 75px;
    margin: 0 auto;
    display: block;
}

.item-image-selected-wrapper {
    position: absolute;
    width: 100%;
    top: 40px;
}

.shop-item-wrapper-vip {
    width: calc(20% - 30px);
    margin: 5px;
}

.shop-item-wrapper-vip .item-image-wrapper {
    top: 50px;
}

.shop-item-wrapper-vip .item-price {
    bottom: 10px;
}

.shop-item-wrapper-vip .item-delivery {
    position: absolute;
    bottom: 4px;
    font-size: 11px;
    text-align: center;
    width: 100%;
    word-break: break-word;
}

/* FAQ */
.question {
    font-size: 20px;
    color: #c8354e;
    font-weight: 300;
}

.fixed-recaptcha .rc-anchor-dark {
    background: rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Media Queries */
@media only screen and (max-width: 768px) {
    /**
     * NOTE: .sidebar-hidden does NOT always mean the sidebar is hidden
     *
     * by default, the sidebar is hidden on mobile when it is shown on desktop!
     * the naming of the class is bad here but all .sidebar-hidden really means
     * is that the toggle button (.collapse-menu-trigger) has been clicked
     * (so on mobile devices, .sidebar-hidden should really be .sidebar-shown)
     */
    .sidebar-hidden #content-wrapper,
    .sidebar-hidden #nav-wrapper {
        display: none;
    }

    .sidebar-hidden .chat-container {
        width: 100%;
        left: 0 !important;
        z-index: 13001 !important;
        height: 100% !important;
    }

    /* so it doesn't overlay the chat, see above */
    #reamaze-widget {
        z-index: 13000 !important;
    }

    /* login modal should overlay the chat (for the "log in to chat" link) */
    #modal-login-screen {
        z-index: 13002;
    }

    .sidebar-hidden .chat-container .chat-header > .collapse-menu-trigger {
        display: flex;
    }

    .message-content-wrapper {
        max-width: 282px !important; /* will work for devices as narrow as 340px in length */
    }

    #top-content {
        flex-direction: column;
        background: unset;
        box-shadow: unset;
    }

    div#all-bets-2x,
    div#all-bets-3x,
    div#all-bets-50x,
    div#all-bets-5x,
    div#all-bets-red,
    div#all-bets-green,
    div#all-bets-black {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .fw-jackpot-text > * {
        padding: 0 2rem;
    }
}

/* Martingale */
#autobetter-toggle {
    color: #9e9e9f;
    bottom: -28px;
    margin-top: 10px !important;
}

#autobetter-toggle.bet-button {
    margin: 0;
    padding: 0;
}

#autobetter-toggle-icon {
    line-height: 18px;
    vertical-align: -8px;
    margin-right: 5px;
}

.autobetter {
    font-size: 12px !important;
    color: #9e9e9e !important;
    margin: 0px auto;
    padding-left: 8px;
    z-index: 2000;
    min-width: 300px;
    /* width: 330px; */
    position: relative;
    margin-top: 20px;
}

.autobetter .autobetter-choose {
    /*
    position: absolute;
    right: 12px;
    top: -32px;
    */
    text-align: center;
    margin-bottom: 15px;
}

.autobetter .btn {
    /* width: 100%; */
    line-height: 25px;
    height: 25px;
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
}

.autobetter h5 {
    font-size: 13px;
    font-weight: bold;
    color: #777;
    line-height: 14px !important;
}

.autobetter p {
    margin: 0px;
    padding: 0px;
}

.autobetter input {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: 5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    height: 26px;
    width: 50px;
}

.autobetter input[type="number"] {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
}

/* label underline focus color */
.autobetter input[type="number"]:focus {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
}

.autobetter strong.heading {
    display: inline-block;
}

.autobetter strong.heading.block {
    display: inline;
    margin-top: 5px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.autobetter .autobetter-block-group {
    background: #1c1c22;
    border-radius: 5px;
    margin-top: 15px;
}

.autobetter .autobetter-block-group .autobetter-block {
    padding: 0.5em 1em;
}

.autobetter .autobetter-value-group > p {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

#martingale-starting-bet,
#martingale-max-bet,
#martingale-name {
    margin-top: 0;
}

#martingale-starting-bet,
#martingale-name {
    flex: 1;
}

#autobetter-choose-title {
    vertical-align: top;
    line-height: 2;
}

.autobetter label.radio {
    padding-left: 25px !important;
}

.ab-black:checked + label:after,
.ab-black.with-gap:checked + label:before,
.ab-black.with-gap:checked + label:after {
    background-color: #606060;
    border-color: #606060;
}

.ab-blue:checked + label:after,
.ab-blue.with-gap:checked + label:before,
.ab-blue.with-gap:checked + label:after {
    background-color: #45b5da;
    border-color: #45b5da;
}

.ab-red:checked + label:after,
.ab-red.with-gap:checked + label:before,
.ab-red.with-gap:checked + label:after {
    background-color: #c8354e;
    border-color: #c8354e;
}

.ab-gold:checked + label:after,
.ab-gold.with-gap:checked + label:before,
.ab-gold.with-gap:checked + label:after {
    background-color: #ffc870;
    border-color: #ffc870;
}

.ab-green:checked + label:after,
.ab-green.with-gap:checked + label:before,
.ab-green.with-gap:checked + label:after {
    background-color: #33b349;
    border-color: #33b349;
}

.ab-black:not(:checked) + label:before,
.ab-black:not(:checked) + label:after {
    border: 2px solid #404040;
}

.ab-blue:not(:checked) + label:before,
.ab-blue:not(:checked) + label:after {
    border: 2px solid #45b5da;
}

.ab-red:not(:checked) + label:before,
.ab-red:not(:checked) + label:after {
    border: 2px solid #c8354e;
}

.ab-gold:not(:checked) + label:before,
.ab-gold:not(:checked) + label:after {
    border: 2px solid #ffc870;
}

.ab-green:not(:checked) + label:before,
.ab-green:not(:checked) + label:after {
    border: 2px solid #33b349;
}

/*.radio-input:checked+label:after, .radio-input.with-gap:checked+label:after {
	background-color: #ffc870;
	border: 2px solid #ffc870;
}*/
#martingale-start {
    margin-top: 15px;
}

/* Input */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* non-prefixed version, currently
								  not supported by any browser */
}

.flex-filler {
    visibility: hidden;
}

/* Language Selector */
#language-selector,
#language-selector-desktop {
    display: block;
    width: 80px;
    height: 50px;
    text-align: center;
    position: absolute;
    right: -80px;
    bottom: 30px;
    background-color: #1c1c22;
    border-left: 1px solid #26262c;
    color: #a0a0a0;
    z-index: 300;
    cursor: pointer;
}

#language-selector #language-drawer,
#language-selector-desktop #language-drawer {
    width: 280px;
    position: absolute;
    z-index: 400;
    left: 78px;
    top: -13px;
    background-color: #1c1c22;
    height: 80px;
    display: none;
}

#language-selector.open,
#language-selector-desktop.open {
    box-shadow: 2px 6px 1px rgba(0, 0, 0, 0.25);
    /* border:1px solid #303030; */
}

#language-selector.open #language-drawer,
#language-selector-desktop.open #language-drawer {
    display: block;
    /* border:1px solid #303030; */
    border-left: none;
    box-shadow: 2px 6px 1px rgba(0, 0, 0, 0.25);
}

#language-selector .lang-selector,
#language-selector-desktop .lang-selector {
    padding: 5px;
    height: 40px;
    display: inline-block;
}

#language-selector img {
}

article a {
    color: #c8354e;
}

/*Scrollbar*/
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

/*Loading*/
.red-preloader {
    border-color: #c8354e;
}

.blue-preloader {
    border-color: #45b5da;
}

.preloader-wrapper {
    margin-top: 10px;
}

.toast {
    background-color: #a22238;
    border: 1px solid #c8354e;
    color: #fff;
    font-weight: 600;
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
    user-select: none;
}

.toast a {
    color: #fff;
    font-weight: 400;
    text-decoration: underline;
}

.toast-notification b {
    padding: 0px 4px !important;
}

#toast-container {
    top: 150px;
    z-index: 100001;
}

.tabs--provably-fair {
    border-radius: 5px;
    margin-top: 24px;
    background-color: transparent;
}

.tabs--provably-fair .tab {
    background: #1f1f25;
}

.tabs--provably-fair a .tab-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
}

.tabs--provably-fair a .tab-icon svg {
    height: 18px;
    width: auto;
    fill: #eee !important;
}

.tabs--provably-fair a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: #eee !important;
}

.tabs--provably-fair a.active,
.tabs--provably-fair a:hover {
    color: #c8354e !important;
}

.tabs--provably-fair a.active svg path,
.tabs--provably-fair a:hover svg path,
.tabs--provably-fair a.active svg polygon,
.tabs--provably-fair a:hover svg polygon {
    fill: #c8354e !important;
}

.tabs--provably-fair .indicator {
    background-color: #c8354e !important;
}

@media only screen and (max-width: 600px) {
    #toast-container {
        min-width: 100%;
        bottom: 0;
        top: auto !important;
    }
}

@media only screen and (max-width: 600px) {
    .tabs--provably-fair {
        flex-direction: column;
        height: unset;
        width: 100%;
    }

    .tabs--provably-fair .tab {
        flex: 1 0 100%;
        width: 100%;
    }

    .tabs--provably-fair .indicator {
        display: none;
    }
}

.external-link {
    color: #c8354e !important;
}

.external-link:hover {
    text-decoration: underline;
}

.steam-status {
    position: absolute;
    top: 50px;
    right: 50px;
}

.steam-status a {
    color: #c8354e !important;
    font-size: 16px;
}

.dark-select {
    background: #111;
    border-color: #333;
    display: inline !important;
}

#nav-custom span.bonus {
    color: #fff;
    position: absolute;
    top: 40px;
    right: 12px;
    font-size: 10px;
    font-weight: 900;
    background: #c8354e;
    padding: 1px 4px;
    display: block;
    border-radius: 10px;
}

.inventory-item,
.shop-item-wrapper,
.inventory-item-faded {
    width: -webkit-calc(25% - 30px);
    width: -moz-calc(25% - 30px);
    width: calc(25% - 30px);
    min-height: 210px;
    float: none;
}

.inventory-item.item-VGO .item-price,
.inventory-item-faded.item-VGO .item-price {
    bottom: 46px;
}

.shop-item-wrapper {
    min-height: 210px;
}

.connect-container {
    background: #26262c !important;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.connect-container .card {
    background-color: #17171a;
    font-size: 14px;
}

.connect-container .card .card-content .btn.btn-toolbar {
    padding: 0.25rem 1rem !important;
    margin-left: 95px;
    font-size: 14px;
}

.connect-container .card .card-title,
.connect-container .card .card-action a {
    color: #c8354e !important;
}

.success-container .card .card-title,
.success-container .card .card-action a {
    color: #37af59 !important;
}

.article-container .card {
    background-color: #17171a;
    font-size: 15px;
}

.article-container .card .card-title,
.article-container .card .card-action a {
    color: #c8354e !important;
}

.article-container {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #dfdfdf;
    font-weight: normal;
}

.article-container h1,
.article-container h2,
.article-container h3,
.article-container h4,
.article-container h5,
.article-container h6 {
    font-weight: 600;
    margin-top: 20px;
    color: #c8354e !important;
}

.article-container a {
    color: #c8354e;
}

.article-container h2 {
    font-size: 30px !important;
}

.article-container strong {
    font-weight: 800 !important;
}

.article-container ul li {
    list-style: disc;
    margin-left: 40px;
}

.article-container ul.spaced-list {
    margin-bottom: 20px;
}

.article-container code,
.article-container span.code {
    font-family:
        ubuntu mono,
        Consolas,
        monospace;
    background: #18181d;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d6c09e;
}

@media (max-width: 1500px) {
    .inventory-item,
    .shop-item-wrapper,
    .inventory-item-faded {
        width: -webkit-calc(33% - 30px);
        width: -moz-calc(33% - 30px);
        width: calc(33% - 30px);
        min-height: 180px;
        float: none;
    }

    .shop-item-wrapper {
        min-height: 210px;
    }
}

.modal-fullscreen {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    z-index: 1003;
    overflow: auto;
    padding: 20px;
}

.modal-fullscreen .modal-content {
    position: absolute;
    width: 700px;
    height: 440px;
    top: calc(50% - 220px);
    left: calc(50% - 300px);
}

.modal-fullscreen .modal-greybox {
    background: #26262c;
    background-color: rgba(38, 38, 44, 0.8);
    padding: 50px 0px 50px;
    border-radius: 8px;
}

.modal-fullscreen .modal-content.centered {
    text-align: center;
}

.modal-fullscreen .content-btn {
    background: #0a0a0b;
}

.modal-fullscreen .content-btn:hover {
    background: #c8354e;
}

.modal-reward-box {
    padding: 0px 30px !important;
}

.modal-reward-box.clickable {
    cursor: pointer;
}

.modal-reward-box img {
    max-width: 100%;
}

.modal-reward-box .reward-title {
    margin: 10px 0px;
}

.modal-reward-box .reward-title h3 {
    color: #c8354e;
    font-size: 18px !important;
    margin: 0px;
    padding: 0px;
}

.modal-reward-box .reward-description p {
    margin: 0px;
    padding: 0px;
}

.account-logout {
    display: none !important;
}

@media (max-width: 1320px) {
    #content-wheel-balance {
        left: 20px;
    }

    #content-past-queue {
        right: 0;
    }

    #bet-input {
        width: 230px;
    }

    .bet-button {
        margin-right: 5px;
    }

    #content-bets {
        padding: 0 20px;
    }

    .inventory-item,
    .shop-item-wrapper,
    .inventory-item-faded {
        width: -webkit-calc(33% - 30px);
        width: -moz-calc(33% - 30px);
        width: calc(33% - 30px);
        min-height: 180px;
        float: none;
    }

    .shop-item-wrapper {
        min-height: 210px;
    }
}

.nav-desktop-logo .nav-desktop-logo--animation {
    display: none;
}

.nav-desktop-logo .nav-desktop-logo--end {
    display: none;
}

.nav-desktop-logo.animating .nav-desktop-logo--start {
    display: none;
}

.nav-desktop-logo.animating .nav-desktop-logo--end {
    display: none;
}

.nav-desktop-logo.animating .nav-desktop-logo--animation {
    display: block;
}

.nav-desktop-logo.end .nav-desktop-logo--start {
    display: none;
}

.nav-desktop-logo.end .nav-desktop-logo--end {
    display: block;
}

.nav-desktop-logo.end .nav-desktop-logo--animation {
    display: none;
}

/* sidebar toggle */
#nav-wrapper .collapse-menu-trigger {
    position: static;
    height: 48px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    margin-bottom: -5px;
}

#nav-wrapper .collapse-menu-trigger > i {
    color: #666;
}

/*
NOTE: the chat has two .collapse-menu-triggers
- a top-level one (.chat-container .collapse-menu-trigger)
  for tablet devices that shows up next to it
- one for mobile devices (.chat-container .chat-header > .collapse-menu-trigger)
  that shows up next to the channel select inside of the chat
*/
.chat-container .collapse-menu-trigger {
    display: block;
}

.collapse-menu-trigger {
    display: block;
    text-align: center;
    position: absolute;
    right: -50px;
    bottom: 9px;
    color: #a0a0a0;
    z-index: 300;
    cursor: pointer;
    transition: color 100ms;
    user-select: none;
}

.collapse-menu-trigger:hover {
    color: white;
}

.collapse-menu-trigger .material-icons {
    vertical-align: middle;
}

.collapse-menu-trigger .material-icons.icon-triggered {
    display: none;
}

.sidebar-hidden .collapse-menu-trigger .material-icons.icon-triggered {
    display: inline-block;
}

.sidebar-hidden .collapse-menu-trigger .material-icons.icon-default {
    color: #fff;
    display: none;
}

#nav-wrapper .collapse-menu-trigger {
    display: none;
}

@media (min-width: 1241px) {
    .sidebar-hidden .chat-container {
        left: -275px;
    }

    .sidebar-hidden .chat-container *:not(.collapse-menu-trigger) {
        display: none;
    }

    .sidebar-hidden #content-wrapper {
        left: 0;
        width: 100%;
    }

    #content-wrapper.topbar-hidden .content-inner {
        margin-top: 0;
    }
}

@media (max-width: 1240px) {
    #interface-wrapper {
        flex-flow: row nowrap;
    }

    /* when sidebar is shown, show chat and move navbar to right */
    .chat-container {
        width: 250px;
        top: 0;
        left: -250px;
        height: 100%;
        z-index: 1000;
        box-shadow: 0 0 1.5px rgba(0, 0, 0, 0.35);
    }

    #nav-wrapper .collapse-menu-trigger {
        display: flex;
    }

    .chat-container > .collapse-menu-trigger {
        display: none;
    }

    .chat-container > .chat-content {
        display: none !important;
    }

    .sidebar-hidden .chat-container {
        left: 80px;
        z-index: 1001;
    }

    .sidebar-hidden .chat-container > .chat-content {
        display: flex !important;
    }

    #nav-wrapper {
        min-height: 100%;
        width: 80px;
    }

    #content-wrapper {
        width: calc(100% - 80px);
        top: 0;
        left: 80px;
    }

    .message-content-wrapper {
        max-width: 192px;
    }

    .inventory-item,
    .shop-item-wrapper,
    .inventory-item-faded {
        width: -webkit-calc(33% - 30px);
        width: -moz-calc(33% - 30px);
        width: calc(33% - 30px);
        min-height: 180px;
        float: none;
    }

    .shop-item-wrapper {
        min-height: 210px;
    }

    #nav-desktop {
        display: none;
    }

    .account-logout {
        display: flex !important;
    }
}

@media (min-width: 1241px) {
    #nav-custom {
        display: none;
    }

    #nav-desktop {
        display: flex;
        height: 100%;
    }

    .nav-desktop-logo {
        width: 275px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-desktop-logo-text {
        color: #c8354e;
        font-size: 24px;
        font-size: 32px;
        margin-right: -10px;
        font-family: "Oswald", sans-serif !important;
    }

    .nav-desktop-logo img {
        width: auto;
        max-height: 100%;
    }

    .nav-desktop-container {
        width: calc(100% - 275px);
    }

    .nav-desktop-container .nav-desktop-badge {
        position: absolute;
        background: #c32d4f;
        color: white;
        text-align: center;
        border-radius: 5px;
        height: 15px;
        width: 30px;
        line-height: 15px;
        top: 5px;
        right: 2px;
        font-size: 10px;
        font-weight: 500;
    }

    .mainnav-desktop-container {
        display: flex;
        align-items: center;
        height: 64px;
        position: relative;
    }

    .mainnav-selector {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px;
        /* width: 189px; */
        background: #c8354e;
        transition:
            transform 150ms,
            width 150ms;
    }

    .secondnav-desktop-container {
        background: #1f1f25;
        height: 36px;
        display: flex;
        align-items: center;
        padding-left: 15px;
        padding-right: 25px;
        justify-content: space-between;
    }

    .secondnav-left,
    .secondnav-right {
        display: flex;
    }

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

    .secondnav-right .xp-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-desktop-left,
    .nav-desktop-right {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .nav-desktop-left {
        height: 100%;
    }

    .nav-desktop-right {
        justify-content: flex-end;
        margin-right: 15px;
    }

    .nav-desktop-el {
        display: flex;
        cursor: pointer;
        padding: 0 15px;
        align-items: center;
        height: 100%;
        position: relative;
    }

    .nav-desktop-el-icon {
        margin-right: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-desktop-el-icon svg {
        height: 22px;
        width: 22px;
    }

    .nav-desktop-el-icon svg path {
        fill: #666;
    }

    .nav-desktop-el-icon svg polygon {
        fill: #666;
    }

    .nav-desktop-el-text {
        color: #666;
        font-size: 16px;
        letter-spacing: 0.6px;
    }

    .nav-desktop-el--rewards {
        position: relative;
    }

    /* .nav-desktop-el--giveaways .cls-1, */

    .nav-desktop-el:hover .nav-desktop-el-text,
    .nav-desktop-el.active .nav-desktop-el-text {
        color: #c8354e;
    }

    .nav-desktop-el:hover .nav-desktop-el-icon i,
    .nav-desktop-el.active .nav-desktop-el-icon i {
        background-position-x: calc(-24px * 5);
    }

    .nav-desktop-el:hover .nav-desktop-el-icon svg path,
    .nav-desktop-el.active .nav-desktop-el-icon svg path {
        fill: #c8354e;
    }

    .nav-desktop-el:hover .nav-desktop-el-icon svg path,
    .nav-desktop-el:hover .nav-desktop-el-icon svg,
    .nav-desktop-el.active .nav-desktop-el-icon svg path,
    .nav-desktop-el.active .nav-desktop-el-icon svg {
        animation: none;
    }

    .nav-desktop-el:hover .nav-desktop-el-icon svg polygon,
    .nav-desktop-el.active .nav-desktop-el-icon svg polygon {
        fill: #c8354e;
    }

    .secondnav-desktop-el {
        display: flex;
        justify-content: center;
        color: #666;
        cursor: pointer;
        position: relative;
    }

    .secondnav-desktop-el:not(:first-child) {
        margin-left: 20px;
    }

    .secondnav-desktop-el-icon {
        height: 15px;
        /* width: 100%; */
        margin-right: 5px;
    }

    .secondnav-desktop-el-icon svg {
        height: 15px;
        max-width: 100%;
    }

    .secondnav-desktop-el-icon svg circle,
    .secondnav-desktop-el-icon svg path {
        fill: #666;
    }

    .secondnav-desktop-el.active .secondnav-desktop-el-text,
    .secondnav-desktop-el:hover .secondnav-desktop-el-text {
        color: #c8354e !important;
        animation: unset !important;
    }

    .secondnav-desktop-el.active svg circle,
    .secondnav-desktop-el:hover svg circle,
    .secondnav-desktop-el.active svg path,
    .secondnav-desktop-el:hover svg path {
        fill: #c8354e;
        animation: unset !important;
    }

    .secondnav-desktop-el.active,
    .secondnav-desktop-el:hover {
        fill: #c8354e;
        animation: unset !important;
    }

    .nav-desktop-right .dropdown-content {
        background: #1c1c22;
    }

    .nav-desktop-right .dropdown-content li {
        min-height: 35px;
    }

    .nav-desktop-right .dropdown-content li:hover {
        background: #2f2f38;
    }

    .nav-desktop-right .dropdown-content li.divider {
        min-height: 0;
        background-color: #4e4e5e;
    }

    .nav-desktop-right .dropdown-content li a {
        color: rgba(255, 255, 255, 0.5);
        font-size: 14px;
        line-height: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        text-align: center;
    }

    .nav-desktop-right .dropdown-content li a i {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.5);
    }

    .nav-desktop-right .dropdown-content .sheet-account {
        background-position-x: calc(-24px * 8) !important;
        opacity: 0.5;
    }

    .nav-desktop-right .btn-sound-button {
        display: none;
        border-radius: 5px;
        text-align: center;
        padding: 5px;
        cursor: pointer;
    }

    .nav-desktop-right .btn-toolbar.btn-sound-button:disabled,
    .nav-desktop-right .btn-toolbar.btn-sound-button.disabled {
        border-color: transparent !important;
    }

    .nav-desktop-right .btn-sound-button.active {
        display: inline-block;
    }

    .nav-desktop-right .btn-sound-button i,
    .nav-desktop-right .btn-sound-button span {
        color: #878794 !important;
        display: none;
    }

    .nav-desktop-right .btn-sound-button.enabled i.enabled,
    .nav-desktop-right .btn-sound-button.enabled span.enabled {
        display: inline-block;
    }

    .nav-desktop-right .btn-sound-button.disabled i.disabled,
    .nav-desktop-right .btn-sound-button.disabled span.disabled {
        display: inline-block;
    }

    .nav-desktop-right .btn-logout i,
    .nav-desktop-right .btn-logout span {
        color: #878794 !important;
    }

    .nav-desktop-right .topbar-buttons {
        display: flex;
        flex-direction: row;
    }

    .nav-desktop-right .topbar-buttons a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-desktop-right .topbar-buttons svg {
        height: 16px;
        margin-right: 5px;
    }

    .nav-desktop-right .btn-toolbar {
        display: inline-block;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 15px;
        /* margin-left: 20px; */
        /* min-width: 150px; */
        /* text-align: center; */
        /* vertical-align: middle;; */
    }

    .nav-desktop-right .btn-toolbar.btn-toolbar-round {
        height: 40px;
        width: 40px;
        min-width: auto;
        border-radius: 100%;
        text-align: center;
        background: #fff;
        border: 2px solid #58595b;
        background-size: cover;
        background-position: center;
    }

    .nav-desktop-right .btn-toolbar.btn-toolbar-round img {
        display: block;
    }

    .nav-desktop-right .btn-toolbar.btn-toolbar-icon {
        background: transparent;
        border-color: transparent;
        color: #555;
        min-width: auto;
    }

    .nav-desktop-right .btn-toolbar i.nav-icon.sheet {
        background-position-x: calc(24px * 3);
    }

    .nav-desktop-right .btn-login {
        background: #c8354e;
        border-color: #c8354e;
        border-bottom-color: #b32b4a;
        font-size: 15px;
    }

    .nav-desktop-right .btn-login:hover {
        background-color: #c32d4f !important;
    }

    .nav-desktop-right .btn-balance {
        font-size: 15px;
        font-weight: 500;
        margin-right: 12px;
        height: 40px;
        border: 1px solid #353535;
        background: #212123;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        transition: opacity 0.2s linear;
    }

    .nav-desktop-right .btn-balance:hover {
        opacity: 0.8;
    }

    .nav-desktop-right .btn-balance:active {
        border-color: rgba(255, 255, 255, 0.9);
    }

    .nav-desktop-right .btn-balance img {
        height: 16px;
        margin-right: 5px;
    }

    .nav-desktop-right .btn-balance .user-balance {
        font-size: 16px !important;
    }

    .nav-desktop-right .btn-deposit {
        background: #c32d4f;
        border-color: #c32d4f;
        border-bottom-color: #b32b4a;
        font-size: 15px;
        margin-right: 12px;
        padding: 5px 10px;
        height: 40px;
    }

    .nav-desktop-right .btn-withdraw {
        background: #58595b;
        border-color: #58595b;
        border-bottom-color: #4b4c4e;
        font-size: 15px;
        margin-right: 20px;
        padding: 5px 10px;
        height: 40px;
    }

    .nav-desktop-right .btn-deposit,
    .nav-desktop-right .btn-withdraw,
    .nav-desktop-right .btn-profile {
        opacity: 1;
        transition: opacity 0.2s linear;
    }

    .nav-desktop-right .btn-deposit:hover,
    .nav-desktop-right .btn-withdraw:hover,
    .nav-desktop-right .btn-profile:hover {
        opacity: 0.8;
        /* transform: scale(1.05); */
        background-color: initial !important;
    }

    .nav-desktop-right .btn-deposit:hover {
        background-color: #c32d4f !important;
    }

    .nav-desktop-right .btn-withdraw:hover,
    .nav-desktop-right .btn-withdraw:focus {
        background-color: #58595b !important;
        border-color: #58595b !important;
    }

    .nav-desktop-right .btn-profile,
    .nav-desktop-right .btn-sound-button,
    .nav-desktop-right .btn-logout {
        height: 40px !important;
    }

    .nav-desktop-right .btn-logout i {
        margin-right: 5px;
    }

    #chat-wrapper #language-selector {
        display: none;
    }

    .nav-desktop-right #language-selector-desktop {
        display: flex;
        top: 0;
        right: 0;
        justify-content: center;
        align-items: center;
        position: relative;
        border-left: 0 !important;
    }

    .nav-desktop-right #language-selector-desktop #language-drawer {
        top: 30px;
        left: -215px;
    }

    #top-content {
        background: unset;
        box-shadow: unset;
    }

    #content-wrapper.topbar-hidden #top-content {
        pointer-events: none;
    }

    #site-activity,
    .site-activity-loading {
        width: 100% !important;
    }

    #site-activity .activity-item,
    .site-activity-loading .activity-item-loading-placeholder {
        background: #1c1c22;
    }

    #top-bar {
        display: none !important;
    }

    #chat-wrapper #chat-logo {
        display: none;
    }

    #chat-wrapper #social {
        top: 12px;
    }

    #chat-wrapper #chat-players {
        top: 10px;
    }

    #chat-wrapper #chat-tabs {
        top: 45px;
        width: 275px;
    }

    #chat-wrapper #chat {
        top: 162px;
    }

    #soundButton {
        display: none;
    }

    #site-activity .activity-items,
    .site-activity-loading .activity-items-loading {
        padding: 10px 0px 0px 30px !important;
    }

    .collapse-menu-trigger {
        width: 30px;
        right: -30px;
        background: transparent;
    }

    .content-style {
        padding: 0px 30px 50px 30px;
    }

    .match-container,
    .matches-appbar {
        margin-top: 10px !important;
    }

    .matches-loading {
        margin-top: 10px !important;
    }

    .matches-loading-text {
        font-size: 20px !important;
    }

    #content-crash,
    #content-duel {
        padding-top: 20px;
    }

    #content-rewards .content-title {
        margin-bottom: 0px;
    }

    #content-leaderboards .content-title h1 {
        padding: 0 0 1.68rem 0;
    }

    #content-profile .content-title h1 {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1650px) {
    .nav-desktop-el-text {
        /* display: none; */
        letter-spacing: 0;
    }

    #nav-notification-desktop {
        left: calc(50% + 5px);
        top: -2px;
        transform: translateX(-50%);
    }
}

@media (min-width: 1240px) and (max-width: 1600px), (max-width: 468px) {
    .topbar-buttons .btn-deposit,
    .topbar-buttons .btn-withdraw {
        width: 40px;
    }

    .topbar-buttons .btn-deposit span {
        display: none;
    }

    .topbar-buttons .btn-deposit svg {
        margin-right: 0px;
    }

    .topbar-buttons .btn-withdraw span {
        display: none;
    }

    .topbar-buttons .btn-withdraw svg {
        margin-right: 0px;
    }
}

@media (max-width: 1589px) {
    .nav-desktop-el-text {
        font-size: 14px;
    }

    .nav-desktop-el-icon svg {
        width: 18px;
        height: 18px;
    }

    .nav-desktop-el {
        padding: 0 8px;
    }

    .secondnav-desktop-el:not(:first-child) {
        margin-left: 5px;
    }
}

@media (max-width: 1320px) {
    .nav-desktop-el-text {
        font-size: 12px;
    }
    .secondnav-desktop-el-text {
        font-size: 11px;
    }
}

@media (max-width: 1024px) {
    #content-wheel-autobetter {
        position: static;
        padding: 0 0 0 10px;
    }

    #content-wheel-autobetter .row .col.s3 {
        width: 30%;
    }

    #content-wheel-timer {
        bottom: auto;
        top: 440px;
    }

    #content-wheel-pointer {
        bottom: auto;
        top: 500px;
    }

    /*
    #autobetter-toggle {
        display: none;
    }
    */

    .inventory-item,
    .shop-item-wrapper,
    .inventory-item-faded {
        width: -webkit-calc(33% - 30px);
        width: -moz-calc(33% - 30px);
        width: calc(33% - 30px);
        min-height: 180px;
        float: none;
    }

    .shop-item-wrapper {
        min-height: 210px;
    }
}

@media (max-width: 800px) {
    .login-big-block {
        width: 96%;
    }

    .login-block {
        width: 48%;
        vertical-align: top;
        padding: 24px 0 0 0;
    }

    #login-content {
        width: 100%;
        position: static;
        transform: none;
        padding: 0;
    }

    .login-terms {
        padding: 0 24px;
    }

    #content-login {
        right: auto;
        left: 24px;
        top: 40px;
    }

    .content-style {
        min-width: 96%;
        word-break: break-all;
    }

    #content-game {
        min-width: initial;
    }

    #content-wheel-balance {
        position: static;
    }

    #content-wheel-balance .row .col.s3 {
        width: 100%;
        padding: 0;
        float: none;
    }

    #wheel-pointer {
        position: relative;
        left: 4px;
    }

    #content-wheel-autobetter .row .col.s3 {
        width: 50%;
        float: none;
        margin: 0 auto;
    }

    #balance-wrapper {
        text-align: center;
    }

    .autobetter {
        width: auto;
    }

    #content-wheel-timer {
        bottom: 320px;
        left: -4px;
    }

    #content-bets {
        display: none;
    }

    #content-allbets.row .col.s3 {
        width: 100%;
        padding: 0 0 16px 0;
        float: none;
    }

    .all-bets {
        height: 150px;
        overflow: hidden;
    }

    .roulette-all-bets {
        height: 150px;
        overflow: hidden;
    }

    #content-login {
        position: static;
        margin: 16px auto 24px auto;
        display: block;
        width: 240px;
        text-align: center;
    }

    #top-content {
        position: static;
    }

    #duel-filter-wrapper {
        position: static;
        padding: 8px 0 0 0;
    }

    #account-details {
        width: 100%;
    }

    #transfer-submit {
        margin-top: 16px;
    }

    #content-past-queue {
        height: auto;
        pointer-events: none;
    }

    #past-queue {
        height: 100px;
        pointer-events: all;
    }

    #past-queue-spoil {
        left: 52px;
        bottom: -17px;
    }

    .inventory-item,
    .shop-item-wrapper,
    .inventory-item-faded {
        width: -webkit-calc(50% - 30px);
        width: -moz-calc(50% - 30px);
        width: calc(50% - 30px);
        min-height: 180px;
        float: none;
    }

    .shop-item-wrapper {
        min-height: 210px;
    }

    #inventory-checkout-amount-wrapper {
        position: relative;
        left: 0px;
        top: 0px;
        margin-top: 20px;
    }
}

@media (max-width: 800px) and (orientation: landscape) {
    .login-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .login-subtitle,
    .login-subsubtitle {
        font-size: 18px;
    }

    .login-bucks2,
    .login-bucks {
        height: 65px;
        margin: 0 auto;
    }

    .login-block {
        height: auto;
        min-height: 120px;
    }

    .login-terms {
        margin-top: 10px;
    }

    .gotit-btn {
        margin-top: 10px !important;
    }

    .content-style {
        padding: 10px;
        padding-bottom: 30px;
    }

    .steam-status {
        top: 30px;
        right: 10px;
    }

    /* #shop-checkout-wrapper {
        top: 80px;
        right: 10px;
    } */

    #inventory-checkout-wrapper {
        top: 80px;
        right: 10px;
    }

    /* #inventory-checkout-amount-wrapper {
        top: 205px;
        right: 10px;
    } */

    #inventory-item-section {
        margin-top: 40px;
    }

    .inventory-item,
    .shop-item-wrapper,
    .inventory-item-faded {
        width: -webkit-calc(50% - 30px);
        width: -moz-calc(50% - 30px);
        width: calc(50% - 30px);
        min-height: 180px;
        float: none;
    }

    .shop-item-wrapper {
        min-height: 210px;
    }
}

@media (max-width: 700px) {
    #content-wheel {
        padding-top: 40px;
    }

    #content-wheel-autobetter .row .col.s3 {
        width: 100%;
        padding: 0;
    }

    .autobetter {
        width: auto;
        display: table;
        margin: 0 auto;
        padding: 0;
        min-width: initial;
    }

    .login-subsubtitle {
        font-size: 18px;
    }

    #content-wheel-canvas-wrapper {
        width: 300px;
        height: 300px;
    }

    #top-content {
        position: static;
    }

    #content-past-queue {
        position: absolute;
        width: 100%;
        left: 0;
        top: 5px;
    }

    #content-past-queue .row {
        margin-bottom: 0;
    }

    #content-past-queue,
    #past-queue,
    #past-queue-wrapper {
        height: 40px;
    }

    #content-past-queue .col {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #past-queue-100 {
        display: none;
    }

    #past-queue-wrapper {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        overflow-y: scroll;
        align-items: center;
    }

    #past-queue,
    .pq-wrapper {
        width: 100%;
    }

    #past-queue-wrapper {
        padding: 0;
    }

    #past-queue-wrapper > * {
        margin-right: 5px;
        padding: 0;
    }

    .past-color {
        margin: 0;
        height: 7.5px;
        border-radius: 1.875px;
    }

    #past-queue-more,
    .past-queue-tooltip {
        display: none !important;
    }

    .fw-jackpot {
        border-top-color: transparent !important;
    }

    #past-queue-spoil {
        left: 15px;
        bottom: unset;
        top: -29px;
    }

    #past-queue-spoil:hover {
        box-shadow: none;
    }

    #past-queue-spoil > i {
        font-size: 18px;
    }

    #balance-wrapper {
        width: auto;
        margin: 10px auto;
        display: table;
    }

    #content-wheel-timer {
        bottom: auto;
        top: 370px !important;
    }

    #content-wheel-pointer {
        bottom: auto;
        top: 430px !important;
    }

    #duel-balance-wrapper {
        width: 100%;
        margin-left: 0;
    }

    #duel-create-wrapper {
        position: static;
    }

    #duel-input {
        width: 100%;
    }

    #duel-create-switch {
        padding-top: 10px;
    }

    #duel-create {
        margin: 0 auto;
        display: block;
        width: 120px;
        min-width: initial;
        max-width: initial;
        height: auto;
        padding: 8px;
    }

    #duel-filter-wrapper {
        text-align: center;
    }

    #account-level-bar-wrapper {
        width: 100%;
    }

    #content-logout {
        position: static;
        display: block;
        margin: 0 auto 16px auto;
        padding: 5px 8px;
        height: auto;
        font-size: 16px;
    }

    .last-10-stuff.row .col.s6 {
        float: none;
        width: 100%;
        padding: 16px 0;
        clear: both;
    }

    #transfer-input {
        width: 100%;
    }

    .content-style {
        padding: 10px;
        padding-bottom: 30px;
    }

    .steam-status {
        top: 30px;
        right: 10px;
    }

    /* #shop-checkout-wrapper {
        top: 80px;
        right: 10px;
    } */

    #inventory-checkout-wrapper {
        top: 80px;
        right: 10px;
    }

    /* #inventory-checkout-amount-wrapper {
        top: 205px;
        right: 10px;
        font-size: 12px !important;
    } */

    #inventory-item-section {
        margin-top: 40px;
    }

    #shop-pagination-top {
        width: 60%;
        padding-top: 60px;
    }

    #shop-pagination-bottom {
        width: 60%;
    }

    .inventory-item,
    .shop-item-wrapper,
    .inventory-item-faded {
        width: -webkit-calc(100% - 30px);
        width: -moz-calc(100% - 30px);
        width: calc(100% - 30px);
        min-height: 180px;
        float: none;
    }

    #shop {
        width: 60%;
    }

    #shop-checkout {
        width: 40%;
        left: 60%;
    }

    #inventory {
        width: 60%;
    }

    #inventory-checkout {
        width: 40%;
        left: 60%;
    }

    #shop-checkout-amount-wrapper {
        position: static;
    }

    #shop-pagination-top {
        padding: 16px 0;
        width: 100%;
    }

    #shop {
        margin-left: -12px;
    }

    .content-title {
        font-size: 32px;
    }

    .shop-item-selected ul.stickers-container,
    .inventory-item-selected ul.stickers-container {
        display: none;
    }

    .item-name-selected {
        font-size: 11px;
        color: #aaa;
        z-index: 1;
        padding-left: 10px;
        padding-right: 10px;
    }

    .modal-fullscreen .modal-content {
        top: 10px;
        left: 5%;
        width: 90%;
        margin-bottom: 50px;
    }
}

@media (max-width: 440px) {
    #wheel-timer {
        width: unset !important;
    }

    .fixed-recaptcha {
        width: 100%;
        left: 0px;
        margin-left: 0px;
        border-radius: 0px;
    }

    .fixed-recaptcha iframe {
        margin: 0px auto !important;
    }

    .all-bets {
        max-width: initial;
    }

    .roulette-all-bets {
        max-width: initial;
    }

    .login-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .login-subtitle,
    .login-subsubtitle {
        font-size: 18px;
    }

    .login-subsubtitle {
        min-height: 54px;
        display: block;
    }

    .login-bucks2,
    .login-bucks {
        height: 65px;
        margin: 5px auto;
    }

    .login-block {
        height: auto;
        min-height: 120px;
    }

    #language-selector img {
        max-width: 30px;
    }

    #language-selector #language-drawer {
        width: 250px;
    }

    #language-selector .lang-selector {
        padding: 0px 2px;
    }

    #content-allbets {
        padding: 0 20px;
    }

    #content-login {
        width: 180px;
        height: auto;
        padding: 8px;
        font-size: 16px;
    }

    .content-style {
        padding: 10px;
        padding-bottom: 30px;
    }

    .steam-status {
        top: 30px;
        right: 10px;
    }

    /* #shop-checkout-wrapper {
        top: 80px;
        right: 10px;
    } */

    #inventory-checkout-wrapper {
        top: 80px;
        right: 10px;
    }

    /* #inventory-checkout-amount-wrapper {
        top: 205px;
        right: 10px;
    } */

    #inventory-item-section {
        margin-top: 20px;
    }

    #shop-pagination-bottom {
        width: 60%;
    }

    #shop {
        width: 60%;
    }

    #shop-checkout {
        width: 40%;
        left: 60%;
    }

    #inventory {
        width: 60%;
        margin-left: -15px;
    }

    #inventory-checkout {
        width: 40%;
        left: 60%;
    }

    .item-name {
        min-height: 48px;
        top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .item-image {
        height: 75px;
    }

    .item-image-selected {
        height: 60px;
    }

    .item-image-wrapper {
        top: 50px;
    }

    .item-image-selected-wrapper {
        top: 50px;
    }

    .shop-item-wrapper {
        width: calc(100% - 30px);
    }

    .tb-right .btn-profile {
        display: none !important;
    }

    #content-wheel-timer {
        top: 370px !important;
    }

    #content-wheel-pointer {
        top: 430px !important;
    }
}

@media (max-width: 960px) {
    .fw-jackpot-container {
        width: calc(100% - 80px) !important;
        top: 100px !important;
        left: 40px;
        right: 40px;
    }
}

@media (max-width: 380px) {
    #content-wheel-canvas-wrapper {
        width: 240px;
        height: 240px;
    }

    #content-wheel-pointer {
        bottom: auto;
        top: 375px !important;
    }

    #content-wheel-timer {
        top: 315px !important;
    }

    #wheel-pointer {
        left: 0px;
    }

    #wheel-timer {
        width: unset;
        left: 0;
    }

    #language-selector.open #language-drawer {
        text-align: left;
    }

    .content-style {
        padding: 10px;
        padding-bottom: 30px;
    }

    .steam-status {
        top: 30px;
        right: 10px;
    }

    /* #shop-checkout-wrapper {
        top: 80px;
        right: 10px;
    } */

    #inventory-checkout-wrapper {
        top: 80px;
        right: 10px;
    }

    #inventory-checkout-amount-wrapper {
        top: 225px;
        right: 10px;
    }

    #inventory-item-section {
        margin-top: 20px;
    }

    #shop-pagination-top {
        width: 55%;
        padding-top: 60px;
    }

    #shop-pagination-bottom {
        width: 55%;
    }

    #shop {
        width: 55%;
    }

    #shop-checkout {
        width: 65%;
        left: 55%;
    }

    #inventory {
        width: 55%;
    }

    #inventory-checkout {
        width: 65%;
        left: 55%;
    }

    .item-name {
        min-height: 48px;
        top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .item-image {
        height: 75px;
    }

    .item-image-selected {
        height: 60px;
    }

    .item-image-wrapper {
        top: 50px;
    }

    .item-image-selected-wrapper {
        top: 50px;
    }

    .shop-item-wrapper {
        width: calc(100% - 30px);
    }

    .fw-jackpot-container {
        top: 70px !important;
    }
}

@media (max-width: 1240px) {
    #chat-fight-event {
        top: 240px !important;
    }

    .chat-wrapper--fight #chat-tabs {
        top: 280px !important;
    }

    .chat-wrapper--fight #chat {
        top: 340px !important;
    }

    .chat-fight-event-icon {
        display: none;
    }
}
.chat-content *,
.chat-content *:before,
.chat-content *:after {
    box-sizing: border-box;
}

.chat-content {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    background: #1c1c22;
    font-size: 14px;
    width: 100%;
    height: 100%;
}

/* Chat header */
.chat-header,
.chat-channel {
    height: 3.5rem;
    display: flex;
    flex-flow: row nowrap;
    padding: 0 1rem;
}

/* spacing below sections */
.chat-channel {
    margin-bottom: 1.75rem;
}

.hypetrain-container {
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.chat-online {
    flex: 2;
}

.chat-social {
    flex: 3;
}

.chat-social {
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

.chat-social > .social-icon,
.chat-social > .social-icon > svg {
    width: 1.6125rem;
    height: 1.6125rem;
}

.chat-social > .social-icon > svg {
    fill: #c8354e;
}

.chat-online {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.chat-online > .counter {
    margin-left: auto;
    font-weight: 600;
    color: #c8354e;
    position: relative;
    font-size: 14px;
}

.chat-online > .counter:before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #c8354e;
    position: absolute;
    left: -1em;
    top: 0.5em;
    animation: chat-counter-pulse 2.5s infinite;
}

@keyframes chat-counter-pulse {
    0% {
        box-shadow: 0 0 0 0 #c8354e80;
    }
    37.5% {
        box-shadow: 0 0 0 0.375rem #c8354e00;
    }
    100% {
        box-shadow: 0 0 0 0.375rem #c8354e00;
    }
}

.chat-header > .collapse-menu-trigger {
    position: static;
    justify-content: flex-end;
    align-items: center;
    flex: 0.5;
    display: none;
}

.chat-header > .collapse-menu-trigger > span {
    font-size: 12px;
    color: #a0a0a0;
    font-weight: 600;
    text-transform: uppercase;
}

/* Chat Channel Select */
.chat-channel {
    background: hsl(240, 10%, 10%);
    color: #c8354e;
    font-weight: 600;
    font-size: 14px;
}

/* These select classes are all generated by materialize */
.chat-channel .select-wrapper {
    width: 100%;
}

.chat-channel .select-wrapper input.select-dropdown {
    border: none;
    box-shadow: none;
    padding: 0.5rem 0;
}

.chat-channel span.caret {
    top: 12.5px;
}

.chat-channel span.caret,
.chat-channel .select-wrapper input.select-dropdown,
.chat-channel ul,
.chat-channel ul li {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

.chat-channel ul {
    border-radius: 4px;
}

.chat-channel ul li {
    padding: 0px;
    min-height: 30px !important;
    line-height: 1em;
    background: hsl(240, 10%, 14.5%) !important;
}

.chat-channel ul li:hover,
.chat-channel ul li.selected {
    background-color: hsl(240, 10%, 17%) !important;
}

.chat-channel ul li span {
    color: #c8354e;
    font-size: 14px;
    font-weight: 600;
    padding-right: 0;
}

.chat-channel ul li.disabled > span {
    color: rgba(255, 255, 255, 0.5);
    background: hsl(240, 10%, 14.5%);
    cursor: default;
}

/* Flags */
.chat-channel ul li img, /* blame materialize for this */
.chat-channel-flag /* flag in .chat-channel (selected dropdown option) */ {
    height: 14px;
    width: 22px;
    vertical-align: middle;
    margin-top: 17px;
    display: inline-block !important;
    border-radius: 4px;
}

.chat-channel-flag {
    margin-right: 14px;
}

/* Actual chat */
.chat-messages {
    min-height: 0;
    flex: 1 1 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

.chat-input {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background: #17171c;
}

.chat-input.login-required .login-notice {
    display: flex;
}

.chat-input > .chat-more {
    position: absolute;
    bottom: 100%;
    width: calc(100% - 2rem); /* 100% - 2 * margin */
    height: 3rem;
    padding: 0 1rem;
    margin: 1rem;
    border-radius: 4px;
    background: hsl(240, 10%, 8%);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    transition: all 100ms;
    opacity: 1;
    transform: translateY(0);
    z-index: 300; /* overlay gear icon (user actions popup toggle) */
}

.chat-more.hidden {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}

.chat-more:hover {
    transform: translateY(-1px);
    cursor: pointer;
}

.chat-input form {
    margin: 0;
    flex: 1;
    padding-left: 1rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    /* the height is being set by JS, see ui_chat.js */
    height: 0;
    min-height: 43px;
}

.chat-input textarea {
    border: none;
    padding: 1rem;
    background: inherit;
    margin: 0;
    margin-top: 0.125em;
    resize: none;
    font-size: 13px;
    overflow: auto;
    height: 100% !important;
}

.chat-input .input-icon {
    width: 1em;
    height: 1em;
    font-size: 2rem;
    color: #636373;
    transition: color 100ms;
    user-select: none;
    margin-right: 0.75rem;
}

.chat-input .input-icon:hover {
    color: #c8354e;
}

.chat-input .input-icon i {
    font-size: inherit;
    vertical-align: top;
}

.chat-input .input-icon.active {
    color: #c8354e;
}

.chat-input .login-notice {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: hsla(240, 10%, 8%, 0.95);
    justify-content: center;
    align-items: center;
    display: none;
}

.chat-input.login-required {
    pointer-events: none;
}

.chat-input.login-required .chat-more,
.chat-input.login-required .login-notice {
    pointer-events: all;
}

.login-notice a {
    color: #c8354e;
    font-weight: 500;
}

/* emoji drawer */
.emoji-drawer {
    position: absolute;
    background: #111217e0;
    width: calc(100% + 24px);
    height: 200px;
    display: none;
    bottom: 62px;
    width: 100%;
}

.emoji-list {
    width: 100%;
    height: 145px;
    overflow: scroll;
}

.emoji-list a {
    width: 23px;
    height: 23px;
    overflow: hidden;
    display: inline-block;
    margin: 0px 0px 6px 6px;
}

.emoji-list img {
    height: 100%;
}

.emoji-list a.add-media {
    width: calc(50% - 10px);
    height: 80px;
    text-align: center;
    background: #0a0a0c;
}

.emoji-list a.add-media img {
    height: auto;
    height: 100%;
}

.emoji-drawer input {
    border: none;
    background: #090a0e;
    padding: 2px;
    height: 12px;
    font-size: 11px;
    margin: 5px;
    width: calc(100% - 15px);
    border-radius: 4px;
}

.emoji-drawer input:focus {
    border: none !important;
    box-shadow: none !important;
}

[contenteditable="true"]:empty:before {
    content: attr(placeholder);
    display: block; /* For Firefox */
    color: #666;
}

.emoji-categories {
    background: #121319;
    border-top: 1px solid #c32d4f;
}
.emoji-categories .emoji-category {
    display: inline-block;
    width: 26px;
    height: 26px;
    padding: 3px;
    overflow: hidden;
    margin-top: 10px;
    background: #32323e;
    border-radius: 30px;
    text-align: center;
    color: #ccc;
}

.emoji-categories .emoji-category:hover,
.emoji-categories .emoji-category.active {
    background: #c32d4f;
}

.emoji-categories .emoji-category img {
    width: 20px;
    height: 20px;
    border-radius: 30px;
}

.emoji-categories .emoji-category i {
    vertical-align: middle;
    font-size: 20px;
}

.emoji-settings {
    padding: 10px;
    overflow: scroll;
    max-height: 145px;
}

.emoji-settings ul,
.emoji-settings ul li {
    margin: 0px;
    top: 0px;
}

.emoji-settings .btn-toolbar {
    display: block;
    padding: 2px;
    font-size: 11px;
    margin-bottom: 5px;
}

.emoji-settings .btn-toolbar.active {
    background-color: #c32d4f;
}

.emoji-settings .btn-toolbar.disabled {
    border: none;
    cursor: not-allowed;
}

.chat-previous {
    color: hsl(0, 0%, 45%);
    transition: color 100ms;
    margin-left: 10px;
}

.chat-previous:hover {
    color: #c8354e;
}

@media (max-width: 768px) {
    .chat-input {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .chat-messages {
        padding-bottom: 0; /* a margin-bottom that's the same height as .chat-input will be set by JS */
    }
}
.cform input {
    border: none !important;
    box-shadow: none !important;
    background: #18181d !important;
    color: #a1a1a7;
    font-size: 12px !important;
    border-radius: 4px !important;
    padding: 0px 10px !important;
    max-width: 644px !important;
    width: calc(100% - 40px);
}

.cform input[type="file"] {
    padding: 10px !important;
}

.cform select {
    display: inline-block;
    border: none !important;
    box-shadow: none !important;
    background: #18181d !important;
    color: #a1a1a7;
    font-size: 12px !important;
    border-radius: 8px !important;
    padding: 0px 10px !important;
    max-width: 644px !important;
    width: auto;
    outline: none;
}

.cform button {
    background: #18181d;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff;
    text-shadow: 1px 1px 0px #00000033;
}

.cform button:hover {
    background: #c32d4f;
}

.cform .toggle-button[data-checked="0"] {
    background: #c32d4f;
}

.cform .toggle-button[data-checked="0"]:hover {
    background: #902039;
}

.cform .toggle-button[data-checked="1"] {
    background: #37af59;
}

.cform .toggle-button[data-checked="1"]:hover {
    background: #278040;
}

.cform .toggle-button.disabled {
    background: #444 !important;
    color: #fff !important;
}

.cform em {
    display: block;
    font-size: 12px;
}

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

.cform .btn-red {
    background: #c32d4f;
    border: 2px solid #c32d4f;
}
.message-content .giveawayMessage {
    /*background: rgba(0,0,0, 0.33);
    padding: 10px;
    width: 100%;*/
}

.message-content .giveawayMessage .title {
    font-weight: bold;
    color: #999;
}

.message-content .giveawayMessage .name {
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    width: 100%;
}

.message-content .giveawayMessage .winners-wrapper p {
    margin-bottom: 0px;
    font-size: 11px;
    color: #999;
}

.message-content .giveawayMessage .winners-wrapper a {
    font-size: 11px;
    color: #c8354e;
}

.message-content .giveawayMessage .winners-wrapper ul {
    margin: 0px;
    padding-bottom: 3px;
}

.message-content .giveawayMessage .winners-wrapper ul li {
    margin: 0px;
    padding: 0px;
    line-height: 14px;
}

.message-content .giveawayMessage .winners-wrapper ul li a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 120px;
}

.message-type-giveaway {
    border: 1px solid #c8354e;
    width: 230px;
    margin-top: 10px;
    border-radius: 10px;
}

#btnDuelCreate {
    background: #c32d4f !important;
    border-color: #a02440 !important;
    border: none;
    border-bottom: 2px solid;
    color: #fff;
    border-radius: 4px !important;
    transition: 300ms;
    text-transform: uppercase !important;
}

#btnDuelCreate:hover {
    background: #ab2644 !important;
    border-color: #92203a !important;
    color: #fff;
}

.create-duel .duel-create-button {
    width: 100%;
    background: #c32d4f !important;
    height: 30px;
    border: none !important;
    border-bottom: 2px solid #a02440 !important;
    color: #fff !important;
    border-radius: 4px !important;
    transition: 300ms;
    text-transform: uppercase !important;
}

.create-duel .duel-create-button:hover {
    background: #ab2644 !important;
    border-color: #92203a !important;
    color: #fff;
}

.duel-filters-row {
}
.duel-filters-row .filter-heading {
    padding-right: 20px;
}

.duel-filters-row .duel-info {
    display: inline-block;
    padding: 5px;
}

.duel-filters-row .duel-info i {
    vertical-align: middle;
}

#duels-grid,
#duels-grid .grid {
    min-height: calc(100vh - 500px);
}

.duel {
    position: relative;
    width: 260px;
    height: 270px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #c32d4f;
    background: #18181d;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    transition:
        opacity 0.5s,
        background-color 0.5s;
    opacity: 0.33;
}

/*.duel-avatar {
    width:150px;
    height:150px;
    position: absolute;
    top: -20px;
    right: -20px;
    background: url('https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/92/9265813de0e732064b5660c50dff77ecc2bd8939_medium.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    mix-blend-mode: lighten;
    border-radius: 100%;
    opacity: 0.2;
}*/

.duel.zoomIn {
    opacity: 1;
    /*transform: scale(1);*/
}

.duel.zoomOut {
    opacity: 0 !important;
    /*transform: scale(0);*/
}

.duel-wheel-container {
    width: 100%;
    height: 130px;
    /*border: 1px solid red;*/
    text-align: center;
}

.duel .duel-worth .item-icon {
    width: 20px;
    height: 20px;
}

.duel .duel-worth {
    height: 50px;
    padding: 20px;
    font-size: 13px;
    color: #c32d4f;
}

.duel .duel-expire {
    position: absolute;
    bottom: 5px;
    font-size: 11px;
    color: #61616c;
    width: 100%;
    text-align: center;
}

.duel .hidden {
    display: none;
}

.duel-wheel-container {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0px auto;
}

.duel-wheel-container .duel-canvas {
    width: 130px;
    height: 130px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.duel-wheel-container .duel-winner {
    position: absolute;
    left: 15px;
    top: 30px;
    width: 100px;
    font-size: 13px;
    transition:
        top 0.8s ease-out,
        opacity 0.8s ease-out;
    opacity: 0;
}

.duel-wheel-container .duel-cancelled {
    position: absolute;
    z-index: 10;
    text-aling: center;
    width: 100%;
    top: 54px;
    font-size: 17px;
}

.duel-wheel-container .duel-winner.animate {
    top: 13px;
    opacity: 1;
}

.duel-wheel-container .duel-cash {
    position: absolute;
    width: 130px;
    text-align: center;
    top: 80px;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    transition:
        opacity 0.8s ease-out,
        top 0.8s ease-out;
    opacity: 0;
}

.duel-wheel-container .duel-cash.animate {
    top: 75px;
    opacity: 1;
}

.duel-wheel-container .duel-cash img {
    width: 21px;
    height: 21px;
}

.duel-winner .winner-avatar {
    display: inline-block;
    overflow: hidden;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.duel-winner .winner-avatar img {
    width: 100%;
    height: 100%;
    border: 2px solid #555;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.duel .duel-winner .winner-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    margin-top: -3px;
}

.duel-wheel-container .duel-countdown {
    position: absolute;
    left: 15px;
    top: 40px;
    width: 100px;
    font-size: 14px;
}

.duel .duel-countdown .countdown {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
}

.duel-spinner {
    display: none;
}
.duel-spinner.active {
    display: block;
    position: absolute;
    background: url(/static/images/500logo80.png);
    background-size: 40px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    animation: duel-spinner-anim 0.8s ease-in-out infinite;
}

@keyframes duel-spinner-anim {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}

.duel-participants-container {
    margin-top: 24px;
}

.duel .duel-participant {
    color: #61616c;
    font-size: 12px;
    border: 2px solid transparent;
    position: relative;
}

.duel .duel-container .duel-participant {
    line-height: 15px;
    height: 28px;
    padding: 5px;
    display: inline-block;
    width: 120px;
    position: relative;
    text-align: center;
}

.duel .duel-participant .level-badge {
    margin-bottom: unset !important;
}

.duel .duel-participant .emoji {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.duel .duel-container .participant-name {
    display: inline-block;
    max-width: 110px;
    height: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
}

.duel .duel-overlay .participant-link {
    display: flex;
    align-items: center;
}

.duel .duel-container .participant-name i {
    font-size: 14px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 2px;
}

.duel .duel-container .duel-participant:nth-child(2n) {
    margin-left: 15px;
    -webkit-border-top-left-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -moz-border-radius-topleft: 16px;
    -moz-border-radius-bottomleft: 16px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-right: none;
}

.duel .duel-container .duel-participant:nth-child(2n + 1) {
    -webkit-border-top-right-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    -moz-border-radius-topright: 16px;
    -moz-border-radius-bottomright: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-left: none;
}

.duel .duel-container .duel-participant:nth-child(2n) .participant-name {
    width: 90px;
    text-align: left;
    padding-left: 15px;
}

.duel .duel-container .duel-participant:nth-child(2n + 1) .participant-name {
    width: 90px;
    text-align: right;
    padding-right: 15px;
}

.duel .duel-container .duel-participant:nth-child(2n) .participant-name .user-avatar {
    left: 0px !important;
}

.duel .duel-container .duel-participant:nth-child(2n + 1) .participant-name .user-avatar {
}

.duel .duel-participant.joined:nth-child(1) {
    color: #c32d4f;
}
.duel .duel-participant.joined:nth-child(2) {
    color: #45b5da;
}
.duel .duel-participant.joined:nth-child(3) {
    color: #37af59;
}
.duel .duel-participant.joined:nth-child(4) {
    color: #ffc76f;
}

.duel .duel-participant.joined:nth-child(1) a {
    color: #c32d4f;
}
.duel .duel-participant.joined:nth-child(2) a {
    color: #45b5da;
}
.duel .duel-participant.joined:nth-child(3) a {
    color: #37af59;
}
.duel .duel-participant.joined:nth-child(4) a {
    color: #ffc76f;
}

.duel .duel-participant.winner:nth-child(1) {
    background: #c32d4f;
    color: #26262c;
}
.duel .duel-participant.winner:nth-child(2) {
    background: #45b5da;
    color: #26262c;
}
.duel .duel-participant.winner:nth-child(3) {
    background: #37af59;
    color: #26262c;
}
.duel .duel-participant.winner:nth-child(4) {
    background: #ffc76f;
    color: #26262c;
}

.duel .duel-participant.winner:nth-child(1) a {
    color: #26262c;
}
.duel .duel-participant.winner:nth-child(2) a {
    color: #26262c;
}
.duel .duel-participant.winner:nth-child(3) a {
    color: #26262c;
}
.duel .duel-participant.winner:nth-child(4) a {
    color: #26262c;
}

.duel .color-0 {
    color: #c32d4f;
    border-color: #c32d4f;
}
.duel .color-1 {
    color: #45b5da;
    border-color: #45b5da;
}
.duel .color-2 {
    color: #37af59;
    border-color: #37af59;
}
.duel .color-3 {
    color: #ffc76f;
    border-color: #ffc76f;
}

.duel .color-0 img {
    color: #c32d4f;
    border-color: #c32d4f;
}
.duel .color-1 img {
    color: #45b5da;
    border-color: #45b5da;
}
.duel .color-2 img {
    color: #37af59;
    border-color: #37af59;
}
.duel .color-3 img {
    color: #ffc76f;
    border-color: #ffc76f;
}

.duel .duel-participant.animated {
    /*animation: winneranim 0.5s 10;
   animation-timing-function: linear;*/
}

@-webkit-keyframes winneranim {
    50% {
        border-color: inherit;
    }
}

.duel:hover {
    border-color: #c8354e;
}

.duel.in-progress {
    border-color: transparent !important;
    box-shadow: none;
}

.duel.user-joined {
    border-color: #ffc870 !important;
}

.duel.old {
    opacity: 0.15;
    /*transform: scale(1);*/
    background: transparent;
    border-color: transparent !important;
    box-shadow: none;
}

.duel.old:hover {
    opacity: 0.5;
    border-color: #333333 !important;
}

.duel.old .duel-hash:hover {
    color: #c8354e;
}

.duel.old .duel-hash {
    color: #aaa;
}

.duel .duel-overlay-container {
}

.duel .duel-overlay {
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.9);
    position: absolute;
    left: 0px;
    top: 0px;
    transition:
        visibility 0s,
        opacity 0.4s;
    opacity: 0;
    visibility: hidden;
}

.duel:hover .duel-overlay {
    opacity: 1;
    visibility: visible;
}

.duel.old:hover .duel-overlay {
    display: none;
}

.duel .duel-overlay h3 {
    font-size: 14px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 0px;
    color: #ccc;
    padding: 0px;
}

.duel .duel-overlay .duel-overlay-separator {
    width: 20%;
    border: 1px solid #747474;
    margin: 16px auto;
}

.duel .duel-overlay .duel-participant {
    height: 35px;
    width: 200px;
    border: 0;
    border-bottom: 2px solid;
    position: relative;
    display: block;
    margin: 5px auto;
    font-size: 14px;
    text-align: center !important;
    transition: 300ms ease;
    cursor: pointer;
    border-radius: 4px;
}

.duel .duel-overlay .participant-name {
    display: inline-block;
    max-width: 170px;
    height: calc(100% - 2px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: text-bottom;
    font-size: 15px;
    line-height: 30px;
    margin-top: 2px;
}

.duel .duel-overlay .participant-name .user-avatar {
    width: 27px;
    height: 27px;
    border-radius: 100%;
    position: absolute;
    left: 5px;
    top: 2px;
}

.duel .duel-container .participant-name i.user-avatar {
    text-align: center;
    border-color: transparent;
}

.duel .duel-overlay .participant-name {
    display: inline-block;
    max-width: 170px;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: text-bottom;
    font-size: 15px;
    line-height: 30px;
}

.duel .duel-overlay .duel-participant.joined .participant-name {
    text-align: left;
    width: 145px;
    margin-left: 40px;
}

.duel .duel-container .participant-name .user-avatar {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 2px;
    top: 2px;
    border-radius: 100%;
    border: 2px solid;
}

.duel .duel-overlay .duel-participant.joined i {
    display: inline-block;
}

.duel .duel-overlay .duel-participant:nth-child(1) {
    background-color: #631527;
    border-color: #631527 !important;
}
.duel .duel-overlay .duel-participant:nth-child(2) {
    background-color: #143642;
    border-color: #143642 !important;
}
.duel .duel-overlay .duel-participant:nth-child(3) {
    background-color: #1d582e;
    border-color: #1d582e !important;
}
.duel .duel-overlay .duel-participant:nth-child(4) {
    background-color: #4c3b21;
    border-color: #4c3b21 !important;
}

.duel .duel-overlay .duel-participant.joined:nth-child(1) {
    background-color: #c32d4f;
    border-color: #9a253f !important;
}
.duel .duel-overlay .duel-participant.joined:nth-child(2) {
    background-color: #45b5da;
    border-color: #3999b9 !important;
}
.duel .duel-overlay .duel-participant.joined:nth-child(3) {
    background-color: #37af59;
    border-color: #2d8c48 !important;
}
.duel .duel-overlay .duel-participant.joined:nth-child(4) {
    background-color: #ffc76f;
    border-color: #b78e4e !important;
}

.duel .duel-overlay .duel-participant.joined:nth-child(1) a {
    background-color: #c32d4f;
    color: #26262c !important;
}
.duel .duel-overlay .duel-participant.joined:nth-child(2) a {
    background-color: #45b5da;
    color: #26262c !important;
}
.duel .duel-overlay .duel-participant.joined:nth-child(3) a {
    background-color: #37af59;
    color: #26262c !important;
}
.duel .duel-overlay .duel-participant.joined:nth-child(4) a {
    background-color: #ffc76f;
    color: #26262c !important;
}

.duel .duel-overlay .duel-participant:nth-child(1) {
    border-color: #c32d4f;
}
.duel .duel-overlay .duel-participant:nth-child(2) {
    border-color: #45b5da;
}
.duel .duel-overlay .duel-participant:nth-child(3) {
    border-color: #37af59;
}
.duel .duel-overlay .duel-participant:nth-child(4) {
    border-color: #ffc76f;
}

.duel .duel-overlay .duel-participant.winner {
    border-color: #fff;
}

/* .duel-overlay .duel-participant.slot-0 { background: linear-gradient(to bottom, transparent 50%, #C8354E 50%); background-size: 100% 200%; background-position: left top; }
.duel-overlay .duel-participant.slot-1 { background: linear-gradient(to bottom, transparent 50%, #45b5da 50%); background-size: 100% 200%; background-position: left top; }
.duel-overlay .duel-participant.slot-2 { background: linear-gradient(to bottom, transparent 50%, #37af59 50%); background-size: 100% 200%; background-position: left top; }
.duel-overlay .duel-participant.slot-3 { background: linear-gradient(to bottom, transparent 50%, #ffc76f 50%); background-size: 100% 200%; background-position: left top; }

.duel-overlay .duel-participant.slot-0 { background: linear-gradient(to bottom, transparent 50%, rgba(200,53,78, 0.5) 50%); background-size: 100% 200%; background-position: left top; }
.duel-overlay .duel-participant.slot-1 { background: linear-gradient(to bottom, transparent 50%, rgba(69,181, 218, 0.5) 50%); background-size: 100% 200%; background-position: left top; }
.duel-overlay .duel-participant.slot-2 { background: linear-gradient(to bottom, transparent 50%, rgba(55,175,89, 0.5) 50%); background-size: 100% 200%; background-position: left top; }
.duel-overlay .duel-participant.slot-3 { background: linear-gradient(to bottom, transparent 50%, rgba(255,199,111, 0.5) 50%); background-size: 100% 200%; background-position: left top; } */

.duel .duel-overlay .duel-participant:hover:nth-child(1) {
    background-color: #c32d4f;
    border-color: #9a253f !important;
}
.duel .duel-overlay .duel-participant:hover:nth-child(2) {
    background-color: #45b5da;
    border-color: #3999b9 !important;
}
.duel .duel-overlay .duel-participant:hover:nth-child(3) {
    background-color: #37af59;
    border-color: #2d8c48 !important;
}
.duel .duel-overlay .duel-participant:hover:nth-child(4) {
    background-color: #ffc76f;
    border-color: #b78e4e !important;
}

.duel-overlay .duel-participant:hover,
.duel-overlay .duel-participant:hover .participant-name {
    color: #fff !important;
}

/* .duel-overlay .duel-participant:hover,
.duel-overlay .duel-participant:hover .participant-name {
    background-position: left bottom;
    /*color: #26262C !important;*/
/* } */

/* Modal */

#duel-info p i {
    vertical-align: middle;
}

.invite-bot {
    display: none;
    border: unset !important;
    height: 30px;
    width: 74px;
    line-height: 30px;
    font-size: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 0 !important;
}

.invite-bot.hidden {
    display: none !important;
}

.duel.old .invite-bot {
    display: none !important;
}

div#duel-modal {
    max-width: 500px;
    max-height: 430px;
    background-color: #26262c;
    color: #aaaaaa;
    border-radius: 10px;
}

#duel-modal .modal-content {
    height: 100%;
}

div#duel-modal .modal-content {
    padding: 25px;
}

div#duel-modal .modal-footer {
    background-color: #26262c;
    border-color: #34343a;
}

.duels_count {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    margin-right: -10px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 0px;
    margin-bottom: 0px;
    border: none !important;
    box-shadow: none !important;
}

div#duel-modal h4 {
    border-bottom: 1px solid #34343a;
    padding-bottom: 15px;
    color: #c8354e;
    font-size: 19px;
    font-weight: bold;
}

#duel-modal .modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #666;
}

#duel-modal .modal-close:hover {
    color: #c8354e;
}

.create-duel {
}
.create-duel .h-duel-type {
    height: 70px;
    padding-top: 25px;
}
.create-duel .h-duel-color {
    height: 28px;
    padding-top: 3px;
}
.create-duel .h-duel-bux {
    height: 36px;
    padding-top: 7px;
}

.create-duel .choose-size {
    position: relative;
    margin: 0px;
    padding: 0px;
}

.create-duel .choose-size .duel-size {
    border: 2px solid #3e3e41;
    display: inline-block;
    width: 90px;
    height: 65px;
    margin-right: 10px;
    position: relative;
    border-radius: 4px;
    background: url(/static/images/duelsv2/duel_types.png) no-repeat;
    background-position: -12px -34px;
    color: #545459;
}

.create-duel .choose-size .duel-size:hover,
.create-duel .choose-size .duel-size.active {
    background-color: #c8354e;
    border-color: #c8354e;
    background-position-y: -134px;
    color: #ffffff;
}

.create-duel .choose-size .size-3 {
    background-position-x: -119px;
}

.create-duel .choose-size .size-4 {
    background-position-x: -229px;
}

.create-duel .choose-size .duel-size span {
    display: block;
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
}

.create-duel .choose-color {
    margin: 0px;
    padding: 0px;
}

.create-duel .choose-color .duel-color {
    display: inline-block;
    width: 23px;
    height: 23px;
    border: 2px solid #444;
    border-radius: 100%;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
    transition: background 0.1s;
    transition-delay: 0.15s;
}

.create-duel .choose-color .duel-color span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transition: transform 0.2s;
    transition-delay: 0s;
    transform: scale(0);
}

.create-duel .choose-color .duel-color:hover span,
.create-duel .choose-color .duel-color.active span {
    transform: scale(1);
}

.create-duel .choose-color .color-0 {
    border-color: #c7354d;
}
.create-duel .choose-color .color-1 {
    border-color: #45b5d9;
}
.create-duel .choose-color .color-2 {
    border-color: #37af77;
}
.create-duel .choose-color .color-3 {
    border-color: #ffc870;
}

.create-duel .choose-color .color-0 span {
    background-color: #c7354d;
}
.create-duel .choose-color .color-1 span {
    background-color: #45b5d9;
}
.create-duel .choose-color .color-2 span {
    background-color: #37af77;
}
.create-duel .choose-color .color-3 span {
    background-color: #ffc870;
}

.create-duel .choose-color .color-0:hover,
.create-duel .choose-color .color-0.active {
    background-color: #c7354d;
}
.create-duel .choose-color .color-1:hover,
.create-duel .choose-color .color-1.active {
    background-color: #45b5d9;
}
.create-duel .choose-color .color-2:hover,
.create-duel .choose-color .color-2.active {
    background-color: #37af77;
}
.create-duel .choose-color .color-3:hover,
.create-duel .choose-color .color-3.active {
    background-color: #ffc870;
}

.create-duel .duel-bux {
    background-color: #2c2c32;
    padding-left: 10px;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 0px;
    margin-bottom: 0px;
    border: none !important;
    box-shadow: none !important;
    width: calc(100% - 10px);
}

.create-duel .row {
    margin-top: 25px;
}

tr.duel-cancelled {
    opacity: 0.33;
}

.duel-hash {
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    color: #555;
}

.duel-hash:hover {
    color: #c32d4f;
}

#modal-duel-info {
    /* display: block;     */
    font-size: 13px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

#modal-duel-info .duel-hl-salt,
#modal-duel-info .duel-hl-hash {
    word-break: break-all;
}

.duel-verifier {
    text-align: right;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 8px 16px;
}

.duel-verifier a {
    background: #37af59;
    border-bottom: 2px solid #25753c;
}

.duel-verifier i {
    vertical-align: middle;
    font-size: 30px;
}

.duel-verifier a:hover {
    color: #fff;
    background: #25753c;
}

#account-duels-modal .duel-verifier {
    color: #37af59;
    font-size: 13px !important;
    text-transform: uppercase;
}
#account-duels-modal .duel-verifier:hover {
    color: #fff;
}

#account-duels-modal .duel-verifier i {
    font-size: 20px !important;
}

div#account-duels-modal input[type="text"] {
    height: auto;
    max-width: 100px;
    border: 1px solid #0e0e10;
    background: #0e0e10;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
    margin-top: 10px;
    font-family: "Ubuntu Mono", Consolas, monospace;
    font-size: 10px;
    box-shadow: none;
}

.duel-futureblock {
    position: absolute;
    font-size: 11px;
    color: #5d5d7b;
    bottom: 67px;
    width: 100%;
    text-align: center;
}

.duel-futureblock a {
    color: #5d5d7b;
}

.duel-futureblock em {
    font-style: normal;
    color: #7c7c9a;
}

.duel-futureblock a:hover,
.duel-futureblock a:hover em {
    color: #fff;
}

.duel-hl-result {
    background: #18181d;
    padding: 2px 10px;
    border-radius: 4px;
    vertical-align: baseline;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33);
}

.duel-hl-result-0 {
    background: #c32d4f;
}

.duel-hl-result-1 {
    background: #45b5da;
}

.duel-hl-result-2 {
    background: #37af59;
}

.duel-hl-result-3 {
    background: #ffc870;
}

#modal-duel-info strong {
    font-weight: 800;
}

#modal-duel-info p {
    margin-bottom: 0px;
}

#modal-duel-info h5 {
    font-size: 16px;
}

#modal-duel-info .modal-dialog {
    max-width: 500px;
    top: 50px;
    border: 2px solid rgb(200, 53, 78);
    background: #2c2c32;
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 10px;
}

.duel-subtitle {
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.duel-subtitle--badge {
    background: #c32d4f;
    color: white;
    text-align: center;
    border-radius: 5px;
    height: 26px;
    min-width: 34px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 5px;
    margin-right: 8px;
}
#nav-duels.has-widget {
}

.wheel-tab-widget {
    width: 100%;
    height: 20px;
    position: absolute;
    top: 23px;
    left: 0px;
    display: inline-block;
}

.wheel-tab-widget .dtw {
    height: 15px;
    padding: 0px 10px;
    line-height: 10px;
    display: inline-block;
    width: 100%;
}

.wheel-tab-widget .dtw.animated {
    opacity: 0px;
    left: 0px;
    top: 0px;
    width: 110px;
    position: absolute;
    animation-name: dtw-to-up;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

.wheel-tab-widget .dtw.animated span {
    background: #c8354e;
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
}
.wheel-tab-widget .dtw.animated.choice-0 span {
    background: #666;
}

.wheel-tab-widget .dtw.animated.choice-1 span {
    background: #c8354e;
}

.wheel-tab-widget .dtw.animated.choice-2 span {
    background: #45b5da;
}

.wheel-tab-widget .dtw.animated.choice-3 span {
    background: #ffc870;
}

.wheel-tab-widget .dti-color {
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: transparent;
    left: 50%;
    top: 50%;
    margin-left: 9px;
    margin-top: 5px;
}

.wheel-tab-widget .dti-time {
    display: block;
    position: absolute;
    width: 30px;
    height: 20px;
    color: #c8354e;
    font-size: 10px;
    left: 50%;
    top: 50%;
    margin-left: 0px;
    margin-top: 0px;
}

.wheel-tab-widget .hidden {
    display: none;
}

.duel-tab-widget {
    width: 100%;
    height: 20px;
    position: absolute;
    top: 23px;
    left: 0px;
    display: inline-block;
}

.duel-tab-widget .dtw {
    height: 15px;
    padding: 0px 10px;
    line-height: 10px;
    display: inline-block;
    width: 100%;
}

.duel-tab-widget .dtw.value {
    font-size: 10px;
}

.duel-tab-widget .dtw i {
    font-size: 10px !important;
    line-height: 10px;
}

.duel-tab-widget .dtw .svg {
    width: 10px;
}

.duel-tab-widget .dtw.animated {
    opacity: 0px;
    left: 0px;
    top: 0px;
    position: absolute;
    animation-name: dtw-to-up;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

.duel-tab-widget .dtw.animated span {
    background: #c8354e;
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
}

@keyframes dtw-to-left {
    from {
        left: 30px;
        opacity: 1;
    }
    to {
        left: 80px;
        opacity: 0;
    }
}
@keyframes dtw-to-up {
    from {
        top: -10px;
        left: 20px;
        opacity: 1;
    }
    to {
        top: -25px;
        left: 20px;
        opacity: 0;
    }
}
#onsiteSupportContainer {
    display: none;
}

.support-toggle {
    width: 48px;
    height: 48px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
}

.support-toggle a i {
    display: inline-block;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background: #c8354e;
    color: #fff !important;
    line-height: 48px;
    text-align: center;
    font-size: 32px;
    border-radius: 48px;
    opacity: 0.7;
}

.support-toggle a:hover i {
    opacity: 1;
}

.support-toggle.disabled a i {
    background: #999;
    color: #333 !important;
}

/* ==== */

.support-overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    left: 0px;
    top: 0px;
    z-index: 5000;
    width: 100%;
    height: 100%;
}

.support-form-container {
    z-index: 5010;
    position: absolute;
    min-width: 300px;
    max-width: 800px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow: scroll;
}

.support-form-container .block {
    padding: 50px 20px 50px;
    margin-top: 20px;
    background: #151519;
    font-size: 16px;
    text-align: center;
    position: relative;
}

.support-form-container .block h4 {
    color: #c8354e;
    font-size: 30px;
}

.support-form-container .block-actions {
    background: #0b0b0c;
    bottom: 0px;
    left: 0px;
    height: 50px;
    width: 100%;
    padding: 15px 20px;
    text-align: left;
    position: relative;
}

.support-form-container .block-actions .support-btn {
    background: #c8354e;
    color: #fff;
    padding: 6px 20px;
    border-radius: 4px;
    position: absolute;
    display: inline-block;
    width: 150px;
    text-align: center;
    left: 20px;
    top: 10px;
    /*display: none;*/
}

.support-form-container .block-actions .support-btn.right-side {
    right: 20px;
    left: auto;
}

.support-form-container .block-actions .support-btn.block {
    width: 100%;
    max-width: 760px;
    margin-top: 0px;
}

.support-form-container .field-wrapper {
    padding: 10px 20px;
}

.support-form-container .field-wrapper input {
    border: 2px solid #c8354e;
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
    font-size: 20px;
    color: #c8354e;
    border-radius: 5px;
    outline: none;
}

.support-form-container .field-wrapper input:focus {
    box-shadow: none;
    border: 2px solid #c8354e;
}

.support-form-container .field-wrapper textarea {
    border: 2px solid #c8354e;
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    color: #c8354e;
    border-radius: 5px;
    height: 120px;
    max-width: 100%;
    min-width: 100%;
    max-height: 250px;
    min-height: 50px;
    outline: none;
}

/* Select Field */

.support-form-container .select-wrapper {
    padding: 0px !important;
}

.support-form-container .select-wrapper .caret {
    color: #c8354e !important;
    top: 10px;
    right: 10px;
}

.support-form-container .select-wrapper .dropdown-content {
    background: #1c1c22;
    color: #c8354e;
    border: 2px solid #c8354e;
    border-radius: 6px;
}

.support-form-container .select-wrapper ul.dropdown-content li span {
    color: #c8354e;
}

.support-form-container .select-wrapper ul.dropdown-content li.disabled span {
    color: #65656d !important;
}

.support-form-container .select-wrapper ul.dropdown-content li.active,
.support-form-container .select-wrapper ul.dropdown-content li:hover {
    background: #c8354e !important;
}

.support-form-container .select-wrapper ul.dropdown-content li.active span,
.support-form-container .select-wrapper ul.dropdown-content li:hover span {
    color: #fff;
}

/* Upload Field */
.support-form-container .upload-wrapper {
}

.support-form-container .upload-wrapper li {
    text-align: left;
    border-bottom: 1px solid #c8354e;
    padding: 10px 0px;
}

.support-form-container .upload-wrapper li:last-child {
    border-bottom: none;
}

.support-form-container .upload-wrapper li a {
    color: #c8354e;
}

.support-form-container .upload-wrapper input[type="file"] {
    display: none;
}

.support-form-container .upload-wrapper label {
    display: block;
    border: 2px solid #c8354e;
    padding: 30px 10px;
    box-sizing: border-box;
    width: 100%;
    font-size: 20px;
    color: hsl(350, 58%, 50%);
    border-radius: 5px;
    cursor: pointer;
}

.support-form-container .upload-wrapper label:hover,
.support-form-container .upload-wrapper label.drag-over {
    background-color: rgba(200, 53, 78, 0.2);
}

.support-form-container p.counter-container {
    margin: 0px;
}
.support-form-container p.counter-container em {
    display: block;
    text-align: left;
    font-size: 10px;
    color: #666;
}

#ConnectModalContainer {
    /*display: none;*/
}

.full-overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    left: 0px;
    top: 0px;
    z-index: 10000;
    width: 100%;
    height: 100%;
}

.connect-modal {
    position: absolute;
    top: 10px;
    z-index: 10010 !important;
    min-width: 300px;
    max-width: 800px;
    position: absolute;
    top: 20px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow: scroll;
}

.connect-modal-body {
    padding: 50px 20px 50px;
    margin-top: 20px;
    background: #151519;
    font-size: 16px;
    text-align: center;
    position: relative;
}

.connect-modal-body h2 {
    color: #c8354e;
    font-size: 30px;
}

.connect-modal .reward-box {
    width: 100%;
    background: #26262c;
    margin-top: 0px;
}

.connect-modal .reward-box .reward-title {
    color: #c8354e;
    font-size: 30px;
}

.connect-modal .reward-box .description {
    font-size: 16px;
    margin-top: 20px;
}

.connect-modal .reward-box a {
    color: #c8354e;
}

.connect-modal .reward-description {
    padding-top: 10px;
}

a.connect-modal-dismiss {
    display: block;
    position: absolute;
    right: 20px;
    top: 10px;
    color: #c8354e;
    font-size: 30px;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: url("/static/images/overlay_70.png");
    z-index: 10000;
    display: none;
    animation: modal-fade-up 250ms cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-overlay .modal-dialog {
    min-width: 300px;
    max-width: 700px;
    width: 100%;
    background: #26262c;
    position: relative;
    margin: 20px auto;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

@keyframes modal-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-title {
    color: #c8354e;
}

.modal-title i {
    font-size: 35px;
    vertical-align: text-bottom;
    color: #fff;
}

a.modal-dismiss {
    color: #c32d4f;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 20;
    transition: color 100ms;
}

a.modal-dismiss:hover {
    color: #fff;
}

.modal-preview-item {
}
.modal-preview-item .preview-gallery {
}
.modal-preview-item .preview-image {
    width: 100%;
    height: auto;
}

.modal-preview-item .controls {
    position: absolute;
    bottom: 0;
    padding: 15px;
}

.modal-preview-item .controls a {
    background: rgba(0, 0, 0, 0.33);
    border-radius: 5px;
    margin-right: 10px;
    color: #fff;
    width: 40px;
    height: 30px;
    line-height: 47px;
    display: inline-block;
    text-align: center;
    opacity: 0.5;
}

.modal-preview-item .controls a:hover {
    opacity: 1;
}

.modal-preview-item .item-info {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 20;
    width: 80%;
}

.modal-preview-item .item-preview-name {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}

.modal-preview-item .item-preview-custom-name {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 300;
}

.modal-preview-item .item-paintwear-bar {
    position: absolute;
    width: 200px;
    bottom: 20px;
    right: 20px;
    z-index: 20;
}

.modal-preview-item .item-preview-holder video {
    margin-bottom: -10px;
}

.modal-preview-item .item-preview-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
}

/* item wear */

.item-wear {
    position: relative;
}

.item-wear .wear-pointer {
    position: absolute;
    left: -11px;
    top: -11px;
    z-index: 100;
}

.item-wear .wear-pointer i {
    padding: 0px !important;
    margin: 0px !important;
}

.item-wear .wear-progress {
    position: absolute;
    left: 0px;
    top: 0px;
    background: #000;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.item-wear .wear-progress .progress-bar {
    float: left;
    height: 10px;
}

.item-wear .wear-progress .progress-bar.progress-bar-fn {
    background: #228022;
}

.item-wear .wear-progress .progress-bar.progress-bar-success {
    background: #5cb85c;
}

.item-wear .wear-progress .progress-bar.progress-bar-warning {
    background: #f0ad4e;
}

.item-wear .wear-progress .progress-bar.progress-bar-danger {
    background: #d9534f;
}

.item-wear .wear-progress .progress-bar.progress-bar-bs {
    background: #993a38;
}

#modal-item-preview .modal-dialog {
    min-height: 380px;
}

#modal-pending-tradeoffer {
    /* display: block; */
}

#modal-pending-tradeoffer .progress {
    bottom: 5px;
    top: auto;
    width: calc(100% - 40px);
    margin-left: 20px;
}

#modal-pending-tradeoffer .modal-dialog {
    margin-top: 100px;
    padding: 20px;
    border: 2px solid #c32d4f;
    border-radius: 10px;
}

#modal-pending-tradeoffer {
    text-align: center;
}
#modal-pending-tradeoffer h4 {
    color: #c8354e;
}

#modal-pending-tradeoffer h5 {
    color: #666;
}

#modal-pending-tradeoffer h6 {
    margin-top: 20px;
}

#modal-pending-tradeoffer ul li {
    list-style: disc;
    list-style-position: inside;
}

#modal-pending-tradeoffer a.tradeurl {
    text-transform: uppercase;
    color: #fff;
    background: #c8354e;
    padding: 10px;
    font-size: 14px;
    margin-top: 15px;
    display: block;
}

.info-modal {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.info-modal .modal-dialog {
    max-width: 70%;
    padding: 10px;
}

.info-modal-small .modal-dialog {
    max-width: 50%;
    min-width: 300px;
}

.info-modal .title {
    color: #c32d4f;
}

.info-modal h2 {
    color: #c32d4f;
    font-size: 20px;
    font-weight: bold;
}

.info-modal p {
    font-size: 13px;
    color: #ccc;
    padding: 0px;
    margin: 0.5em 0px;
}

.info-modal .sep {
    width: 100%;
    height: 1em;
}

.info-modal code,
.info-modal span.code {
    font-family: "Ubuntu Mono", Consolas, monospace;
    background: #18181d;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d6c09e;
}

.info-modal a {
    color: #c8354e;
}

.info-modal .red {
    background: #18181d !important;
    color: #c8354e !important;
}
.info-modal .blue {
    background: #18181d !important;
    color: #45b5da !important;
}
.info-modal .green {
    background: #18181d !important;
    color: #37af59 !important;
}
.info-modal .gold {
    background: #18181d !important;
    color: #ffc76f !important;
}

.modal-generic {
}
.modal-generic .modal-dialog {
    padding: 15px;
    color: #ccc;
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
}

.modal-generic h2 {
    font-size: 28px;
    color: #c32d4f;
    margin-top: 15px;
}

.modal-generic h2:first-of-type {
    margin-top: 0px;
}

.modal-generic h3 {
    font-size: 20px;
    color: #c32d4f;
}

.modal-generic strong {
    font-weight: 600;
}

.modal-generic.modal-lg .modal-dialog {
    max-width: 60%;
}

@media (max-width: 800px) {
    .modal-generic.modal-lg .modal-dialog {
        max-width: 100%;
    }
}

.item-VGO .item-image-wrapper {
    max-height: 90px;
    overflow: hidden;
}

.item-VGO .item-image {
    height: 142px;
    margin-top: -27px;
}
#hypetrain-content {
    position: relative;
    background: #212129;
    background: hsl(240, 10%, 14.5%);
    z-index: 1;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    border-radius: 4px 4px 0 0;
    height: 100%;
    padding: 0 4px;
}

#hypetrain-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 40px;
}

#hypetrain-content .col.s3 {
    padding: 0 !important;
}

#hypetrain-progress {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0 0 4px 4px;
    width: 100%;
    opacity: 1;
    transition: opacity 1s ease-out;
    overflow: hidden;
}

#hypetrain-progress .ht-progress-background {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}

#hypetrain-progress .ht-progress-bar {
    width: 0%;
    height: 100%;
    background: #c32d4f;
    position: relative;
}

#hypetrain-progress .ht-progress-overlay {
    background: url("/static/images/hypetrain/striped_progress_light.png");
    animation: shift 0.6s ease-out infinite;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    display: none;
}

#hypetrain-progress .ht-progress-overlay.reverse {
    background: url("/static/images/hypetrain/striped_progress_dark.png");
    animation: shift_reverse 0.6s ease-out infinite;
}

.hypetrain-button {
    background: hsl(350, 62%, 47%);
    color: #eee;
    font-size: 11px;
    padding: 3.5px 1em;
    text-align: center;
    border-radius: 4px;
    opacity: 1;
    z-index: 1;
    font-weight: 500;
    transition: all 100ms;
    user-select: none;
}

.hypetrain-button:hover {
    background: hsl(350, 62%, 37%);
}

#hypetrain-inner .ht-progress-bubble {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    padding: 0px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#hypetrain-inner .ht-progress-bubble .inner {
    text-align: center;
    display: flex;
    align-items: center;
    font-weight: 500;
}

#hypetrain-inner .ht-progress-bubble .value {
    color: #c8354e;
    margin-right: 4px;
}

#hypetrain-inner .ht-mask {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    /* background: url('/static/images/hypetrain/ht_christmas2.png'); */
    background: url("/static/images/hypetrain/ht2.png");
}

#hypetrain-progress,
#hypetrain-progress.transitions .ht-progress-background,
#hypetrain-progress.transitions .ht-progress-bar,
#hypetrain-progress.transitions .ht-progress-bubble {
    transition:
        border-color 0.5s linear,
        width 0.05s linear;
}

#hypetrain-progress.level-2 {
    border-color: #45b5da;
}

#hypetrain-progress.level-2 .ht-progress-background {
    background-color: #c32d4f;
}

#hypetrain-progress.level-2 .ht-progress-bar {
    background-color: #45b5da;
}

#hypetrain-progress.level-3 {
    border-color: #ffc870;
}

#hypetrain-progress.level-3 .ht-progress-background {
    background-color: #45b5da;
}

#hypetrain-progress.level-3 .ht-progress-bar {
    background-color: #ffc870;
}

#hypetrain-progress.level-4 {
    border-color: #ffc870;
}

#hypetrain-progress.level-4 .ht-progress-background {
    background-color: #ffc870;
}

#hypetrain-progress.level-4 .ht-progress-bar {
    background-color: #ffc870;
}

#hypetrain-inner .ht-shine {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("/static/images/hypetrain/shine.png");
    opacity: 0;
    background-size: 500%;
    display: none;
}

#hypetrain-inner.pending {
}

#hypetrain-inner .ht-initializing {
    display: none;
}

#hypetrain-inner.pending .ht-progress-bar {
    display: none;
}

#hypetrain-inner.pending .ht-initializing {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    line-height: 35px;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

#hypetrain-inner.pending .ht-controls {
    display: none;
}

.ht-controls {
    height: 100%;
    width: 100%;
}

.ht-winner-bubble,
.fw-jackpot-winner-bubble,
.rj-winner-bubble {
    width: 24px;
    height: 24px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    border-radius: 100%;
    z-index: 10;
    animation: bubble-up 1s;
}

.ht-winner-bubble img,
.fw-jackpot-winner-bubble img,
.rj-winner-bubble img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

div#hypetrain-messages {
    width: 100%;
    max-height: calc(35px * 3); /* three messages max */
    overflow: hidden;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
}

.ht-user-badge {
    background-color: hsl(240, 9%, 27.5%) !important;
    width: 100%;
    height: 34px;
    padding: 2px;
    font-weight: 500;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    word-wrap: break-word;
    margin-bottom: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    transition: transform 200ms;
}

.ht-user-badge .pending {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(/static/images/hypetrain/striped_progress_dark.png);
    animation: shift 1s ease-out infinite;
}

.ht-user-badge.animate-start {
    animation: ht-user-badge-open 300ms ease-out 1;
}

.ht-user-badge.animate-end {
    width: 34px;
    animation: ht-user-badge-close 450ms ease-out 1;
}

.ht-user-badge strong {
    font-weight: 1000;
}

.ht-user-badge.ht-color-gold {
    background-color: #ffc870;
    color: rgba(0, 0, 0, 0.75);
}

.ht-user-badge.ht-color-red {
    background-color: #c32d4f;
}

.ht-user-badge.ht-color-blue {
    background-color: #45b5da;
}

.ht-user-badge.ht-color-green {
    background-color: #37af59;
}

.ht-user-badge.ht-color-gray {
    background-color: #666;
}

.ht-user-badge .avatar {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    overflow: hidden;
}

.ht-user-badge .avatar img {
    width: 100%;
    height: 100%;
}

.ht-user-badge .message {
    display: block;
    height: 100%;
    line-height: 30px;
    margin-left: 34px;
    padding: 0px;
    overflow: hidden;
}

#hypetrain-tip {
    background: hsl(240, 10%, 9%);
    padding: 1rem;
    border-radius: 4px;
    display: none;
    transition: transform 100ms;
}

#hypetrain-content > #hypetrain-tip {
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    position: absolute;
    z-index: 10;
    transform: translateY(-4px);
}

#hypetrain-tip .tip-button {
    position: relative;
    background: transparent;
    padding: 5px;
    font-size: 11px;
    cursor: pointer;
    color: #aaa;
    /* display: none; */
}

#hypetrain-tip .tip-button:hover {
    color: #c32d4f;
}

#hypetrain-tip .input-group {
    display: flex;
    flex-flow: row wrap;
    margin-top: 10px;
}

#hypetrain-tip input {
    background: #212129;
    border: none;
    margin: 0;
    padding: 4px 8px;
    height: 20px;
    border-radius: 4px;
    flex: 1;
    margin-right: 4px;
    height: 32px;
    box-sizing: border-box;
}

#hypetrain-tip .slim-content-btn {
    margin: 0;
    padding: 0px;
    border: none;
    text-transform: capitalize;
    font-weight: 500;
    color: #eee;
    background-color: #212129;
    border-radius: 4px;
    height: 32px;
}

#hypetrain-tip input:focus {
    border: none !important;
    box-shadow: none !important;
}

#hypetrain-help {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

#hypetrain-help-modal {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    animation: help-modal-fade-down 250ms cubic-bezier(0.25, 1, 0.5, 1);
    padding: 0 14px;
    background: #151519;
    z-index: 100;
    display: none;
    font-size: 13px;
    border-radius: 4px;
}

#fw-jackpot-help-modal,
#rj-help-modal {
    width: 500px;
    font-size: 14px;
    line-height: 1.65;
    /* min-width:320px; */
    max-width: 70%;
    background: #2c2c32;
    padding: 20px;
    position: fixed;
    left: calc(50% + 25px);
    top: 20%;
    margin-top: -50px;
    margin-left: -170px;
    z-index: 1000;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    display: none;
    animation: help-modal-fade-down 250ms cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes help-modal-fade-down {
    0% {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#hypetrain-help-modal .dismiss,
#fw-jackpot-help-modal .dismiss,
#rj-help-modal .dismiss {
    position: absolute;
    right: 8px;
    top: 8px;
    color: #c8354e;
    transition: color 100ms;
}

#hypetrain-help-modal .dismiss {
    right: 4px;
    top: 4px;
}

#hypetrain-help-modal .dismiss > i,
#fw-jackpot-help-modal .dismiss > i,
#rj-help-modal .dismiss > i {
    font-size: 20px;
    font-weight: bold;
}

#hypetrain-help-modal .dismiss > i {
    font-size: 18px;
}

#hypetrain-help-modal .dismiss:hover,
#fw-jackpot-help-modal .dismiss:hover,
#rj-help-modal .dismiss:hover {
    color: #fff;
}

#hypetrain-help-modal li,
#fw-jackpot-help-modal li #rj-help-modal li {
    margin-bottom: 10px;
}

#fw-jackpot-help-modal p,
#rj-help-modal p {
    margin: 4px 0;
}

#hypetrain-help-modal p > .hypetrain-button {
    vertical-align: middle;
    font-size: 0.675em;
    pointer-events: none;
}

#hypetrain-help-modal p > i.material-icons,
#fw-jackpot-help-modal p > i.material-icons,
#rj-help-modal p > i.material-icons {
    vertical-align: bottom;
}

.ht-beta {
    width: 55px;
    height: 35px;
    position: absolute;
    top: -2px;
    left: -2px;
    background: url("/static/images/hypetrain/beta.png");
}

.hypetrain-info {
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    box-sizing: border-box;
    top: -0.5em;
    left: -0.5em;
    background: #1c1c22;
    border-radius: 50%;
    font-size: 18px;
    user-select: none;
}

.hypetrain-info:hover {
    cursor: pointer;
}

.hypetrain-info:hover .material-icons {
    color: #c32d50bd;
}

.hypetrain-info .material-icons {
    font-size: inherit;
    color: #c32d4f;
    padding: 0.1375em;
}

.hypetrain-text {
    color: #b2b2b2;
    font-weight: 600;
    padding: 0 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    line-height: 15px;
    flex-basis: 130px;
    /* font-stretch: semi-condensed; */
}

.hypetrain-avatar {
    display: none;
}

.ht-enter {
    display: none !important;
}

.hypetrain-icon {
    height: 24px;
    width: 24px;
    padding: 10px;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hypetrain-icon i {
    color: hsl(350, 62%, 47%);
    font-size: 22px;
    cursor: pointer;
    user-select: none;
}

.hypetrain-icon i:hover {
    color: hsl(350, 62%, 37%);
}

.hypetrain-avatar img {
    border-radius: 4px;
    width: 24px;
    height: 24px;
}

div#hypetrain-help-modal i.material-icons.inline,
div#fw-jackpot-help-modal i.material-icons.inline,
div#rj-help-modal i.material-icons.inline {
    width: 18px;
    height: 18px;
    font-size: 17px;
    text-align: center;
    display: inline-block;
    vertical-align: bottom;
}

div#hypetrain-help-modal i.material-icons.inline.redtext,
div#fw-jackpot-help-modal i.material-icons.inline.redtext,
div#rj-help-modal i.material-icons.inline.redtext {
    border: none;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

@keyframes ht-user-badge-open {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ht-user-badge-close {
    from {
        width: 100%;
    }
    to {
        width: 34px;
    }
}

#past-queue-wrapper .past-color.shine {
    background-image: url("/static/images/hypetrain/shine_single.png");
    background-repeat: no-repeat;
    background-size: 400%;
    background-position: 0px 0px;
    animation: shift_shine_simple 2s ease-in-out;
}

@keyframes bubble-up {
    100% {
        top: -50px;
        width: 0px;
        height: 0px;
    }
}

@keyframes shift_shine {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        background-position: 200% 0px;
        opacity: 0;
    }
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(1px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(2px, 0, 0);
    }
}

@keyframes shift_shine_simple {
    100% {
        background-position: -200px 0px;
    }
}

@keyframes shift_shine_single {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        background-position: 100% 0px;
        opacity: 0;
    }
}

@keyframes shift {
    to {
        background-position: 120px 100%;
    }
}

@keyframes shift_reverse {
    to {
        background-position: -120px 100%;
    }
}

.fw-jackpot-ribbon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: auto;
    top: 50%;
}

.fw-jackpot-ribbon svg {
    max-width: 100%;
    height: 100%;
}

.fw-jackpot-ribbon svg path {
    fill: #19191f;
}

.fw-jackpot-ribbon--left {
    left: 0;
    transform: translate(-100%, -50%);
}

.fw-jackpot-ribbon--right {
    right: 0;
    transform: translate(100%, -50%) rotate(180deg);
}

.fw-jackpot-content.pending .fw-jackpot-pot-text,
.fw-jackpot-content.pending .fw-jackpot-pot-value {
    display: none;
}

.fw-jackpot-right-pending {
    display: none;
}

.fw-jackpot-content.pending .fw-jackpot-right-pending {
    display: block;
}

.fw-jackpot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    border-top: 2px solid #c8354e;
    max-width: 720px;
    background: #1c1c22;
    margin: 0 auto 20px auto;
    position: relative;
    height: 50px;
}

.fw-jackpot-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fw-jackpot-left,
.fw-jackpot-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
    justify-content: space-evenly;
}

.fw-jackpot-left {
    color: #c8354e;
}

.fw-jackpot-triangle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 250px;
    height: 100%;
    overflow: hidden;
}

.fw-jackpot-triangle {
    position: absolute;
    top: calc(50% - 5px);
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-top: 200px solid #1f1f25;
}

.fw-jackpot-info {
    user-select: none;
    cursor: pointer;
}

.fw-jackpot-info i {
    font-size: 24px;
    color: #c32d50;
}

.fw-jackpot-info:hover i {
    color: #c32d50bd;
}

.fw-jackpot-title {
    font-size: 13px;
    line-height: 1.35;
    color: #c8354e;
    font-weight: 500;
    display: flex;
    height: 100%;
    flex-flow: column wrap;
    justify-content: center;
    z-index: 100;
}

.fw-jackpot-title > * {
    text-align: center;
}

.fw-jackpot-title > *:first-child {
    font-weight: 400;
    color: #ccc;
}

.fw-jackpot-pot-text,
.fw-jackpot-right-pending {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-right: 8px;
}

.fw-jackpot-pot-value {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fw-jackpot-pot-amount {
    font-size: 16px;
    color: #c8354e;
}

.fw-jackpot-user-badge:last-child {
    margin-bottom: 15px;
}

.fw-jackpot-shine {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("/static/images/hypetrain/shine.png");
    opacity: 0;
    background-size: 500%;
    display: none;
}

div#fw-jackpot-messages {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(29px * 4);
    overflow: hidden;
    margin-top: 5px;
    color: white;
    transition:
        height 0.3s ease-in,
        max-height 0.2s ease-in;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1000;
}

.fw-jackpot-user-badge {
    background-color: #000;
    width: 100%;
    height: 28px;
    padding: 2px;
    font-weight: 500;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    word-wrap: break-word;
    margin-bottom: 1px;
}

.fw-jackpot-user-badge.fw-jackpot-color-gold {
    background-color: #ffc870;
    color: rgba(0, 0, 0, 0.75);
}

.fw-jackpot-user-badge.fw-jackpot-color-red {
    background-color: #c32d4f;
}

.fw-jackpot-user-badge.fw-jackpot-color-blue {
    background-color: #45b5da;
}

.fw-jackpot-user-badge.fw-jackpot-color-green {
    background-color: #37af59;
}

.fw-jackpot-user-badge.fw-jackpot-color-gray {
    background-color: #666;
}

.fw-jackpot-user-badge .pending {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(/static/images/hypetrain/striped_progress_dark.png);
    animation: shift 1s linear infinite;
}

.fw-jackpot-user-badge.animate-start {
    animation: ht-user-badge-open 1s linear 1;
}

.fw-jackpot-user-badge.animate-start .avatar img {
    animation: ht-user-badge-spin 1s ease-out 1;
}

.fw-jackpot-user-badge.animate-end {
    width: 28px;
    animation: ht-user-badge-close 1s linear 1;
}

.fw-jackpot-user-badge strong {
    font-weight: 1000;
}

.fw-jackpot-user-badge .avatar {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border: 2px solid #26262c;
    background: #26262c;
    overflow: hidden;
}

.fw-jackpot-user-badge .avatar img {
    width: 100%;
    height: 100%;
}

.fw-jackpot-user-badge .message {
    display: block;
    height: 100%;
    line-height: 24px;
    margin-left: 30px;
    padding: 0px;
    overflow: hidden;
}

.fw-jackpot-color {
    font-size: 15px;
    padding: 0.375em 1em;
    background: hsl(240, 10%, 14.5%);
    border-radius: 4px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-weight: 600;
}

.fw-jackpot-color.fw-jackpot-black {
    color: #666666;
}
.fw-jackpot-color.fw-jackpot-red {
    color: #c8354e;
}
.fw-jackpot-color.fw-jackpot-blue {
    color: #45b5da;
}
.fw-jackpot-color.fw-jackpot-yellow {
    color: #ffc870;
}

.fw-jackpot-color-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.fw-jackpot-color-icon > img {
    width: inherit;
    height: inherit;
}

@media (max-width: 1025px) {
    .fw-jackpot-ribbon {
        display: none;
    }

    .fw-jackpot {
        height: unset;
        padding: 1rem;
        word-break: break-word;
    }

    .fw-jackpot-triangle-container {
        display: none;
    }

    .fw-jackpot-info {
        display: none;
    }

    .fw-jackpot-left,
    .fw-jackpot-right {
        flex-flow: column wrap;
    }

    .fw-jackpot-left > .fw-jackpot-black,
    .fw-jackpot-right > .fw-jackpot-blue {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 440px) {
    .fw-jackpot-title {
        display: none;
    }

    .fw-jackpot-content,
    .fw-jackpot {
        max-height: 230px;
    }
}
.chat-editor {
    width: 100%;
    min-height: 30px;
}

.chat-editor .chat-input {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    width: 100%;
    padding: 7px 0px;
    outline: none;
}
.chat-editor .chat-input br {
    display: none;
}
.chat-editor .chat-input * {
    display: inline;
    white-space: nowrap;
}

.author-link .emoji {
    vertical-align: baseline;
    height: 14px;
    width: 14px;
}

.author-link .emoji-single {
    height: 14px;
    width: 14px;
}

.level-badge {
    padding: 2px 4px !important;
    background: #35353a;
    margin-right: 5px;
    margin-bottom: 2px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 11px;
    color: #8e8e9a;
    vertical-align: middle;
    display: inline-block;
    min-width: 30px;
    text-align: center;
}

.level-badge.badge-admin {
    color: #c8354e;
    background: #4c1b25;
    /* border: 1px solid #c8354e;     */
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 3px;
    margin-left: 4px;
    font-weight: 600;
}

.level-badge.badge-mod {
    color: #45b5da;
    background: #19445d;
    /* border: 1px solid #45b5da; */
    margin-left: 4px;
    font-family: "Open Sans";
    font-weight: 600;
}

.level-badge.lvl-100 {
    background: #595969;
    color: #b4b4d6;
}

.level-badge.lvl-200 {
    background: #193b46;
    color: #45b5da;
}

.level-badge.lvl-300 {
    background: #246980;
    color: #89e2ff;
}

.level-badge.lvl-400 {
    background: #1f6a8e;
    color: #fff;
}

.level-badge.lvl-500 {
    color: hsl(0, 0%, 25%);
    background: hsl(0, 0%, 75%);
}

.level-badge.lvl-600 {
    background: #ffc76f;
    color: #634b26;
}

.level-badge.lvl-700 {
    background: hsl(256, 42%, 65%);
    color: hsl(256, 42%, 20%);
}

.level-badge.lvl-800 {
    background: hsl(110, 43%, 49%);
    color: hsl(110, 43%, 10%);
}

.level-badge.lvl-900 {
    background: hsl(344, 64%, 47%);
    color: hsl(344, 64%, 90%);
}

.level-badge.lvl-1000 {
    background: hsl(201, 66%, 54%);
    color: hsl(201, 66%, 90%);
}

.level-badge.lvl-1100 {
    background: hsl(180deg, 30%, 75%);
    color: hsl(0, 0%, 9%);
}

.level-badge.lvl-1200 {
    background: hsl(239deg, 31%, 57%);
    color: hsl(0, 0%, 9%);
}

.level-badge.lvl-1300 {
    background: hsl(322deg 69% 36%) !important;
    color: #fff !important;
    text-shadow:
        0px 0px 5px hsl(92deg 79% 66%),
        0px 0px 5px hsl(0deg 79% 66%);
}

.level-badge.lvl-1400 {
    background: hsl(201, 66%, 54%);
    color: hsl(201, 66%, 90%);
}

.level-badge.lvl-1500 {
    background: hsl(201, 66%, 54%);
    color: hsl(201, 66%, 90%);
}

.role-icon {
    width: 15px;
    height: auto;
    margin-left: 4px;
}

.message-author-content-creator .level-badge {
    color: #ffffff;
    text-shadow:
        0px 0px 3px #00000099,
        1px 1px 0px #00000044;
    background: #ff71bf;
    box-shadow: 0px 0px 3px #ff71bf !important;
}

.message-vip .message-author-vip .level-badge {
    color: black;
    box-shadow: unset !important;
    font-weight: unset !important;
}

.message-vip-1 .message-author-vip .level-badge {
    background: hsl(0, 0%, 73%);
}
.message-vip-2 .message-author-vip .level-badge {
    background: hsl(37, 100%, 72%);
}
.message-vip-3 .message-author-vip .level-badge {
    background: hsl(255, 86%, 78%);
}
.message-vip-4 .message-author-vip .level-badge {
    background: hsl(90, 70%, 62%);
}
.message-vip-5 .message-author-vip .level-badge {
    background: hsl(350, 78%, 70%);
}
.message-vip-6 .message-author-vip .level-badge {
    background: hsl(201, 66%, 54%);
}
.message-vip-7 .message-author-vip .level-badge {
    background: hsl(180deg, 30%, 75%);
}
.message-vip-8 .message-author-vip .level-badge {
    background: hsl(239deg, 31%, 57%);
}
.message-vip-9 .message-author-vip .level-badge,
.message-vip-10 .message-author-vip .level-badge {
    background: hsl(322deg 69% 36%) !important;
    color: #fff !important;
    text-shadow:
        0px 0px 5px hsl(92deg 79% 66%),
        0px 0px 5px hsl(0deg 79% 66%);
}

.message video {
    max-width: 160px;
    height: 120px;
    background: #222;
    margin-top: 10px;
    border: 1px solid #2c2c33;
    border-radius: 8px;
}

.message em.removed-media {
    color: #484854;
    font-size: 12px;
}

.author-link {
    font-weight: 600 !important;
    font-size: 13px;
}

.author-link > * {
    vertical-align: text-bottom;
}

.author-link .level-badge {
    margin-bottom: unset !important;
}

.author-link svg {
    height: 18px;
    width: auto;
    margin-left: 4px;
}

.author-url {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 960px) {
    .level-badge {
        font-size: 9px;
    }
}
#marketplace-drawer-toggle {
    width: 48px;
    height: 48px;
    position: fixed;
    right: 100px;
    bottom: 20px;
    z-index: 12000;
    user-select: none;
}

#marketplace-drawer-toggle .icon {
    display: inline-block;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background: #c8354e;
    color: #fff !important;
    line-height: 48px;
    text-align: center;
    font-size: 32px;
    border-radius: 4px;
    opacity: 0.7;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}

#marketplace-drawer-toggle .icon,
#reamaze-widget,
#marketplace-drawer-toggle .ping {
    transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#marketplace-drawer-toggle:hover .icon {
    transform: translateY(-4px);
    box-shadow:
        0 2px 0px rgba(0, 0, 0, 0.09),
        0 4px 10px rgba(0, 0, 0, 0.24);
}

#marketplace-drawer-toggle:hover .ping {
    top: -4px;
}

#marketplace-drawer-toggle span.icon {
    font-size: 20px;
    font-weight: 600;
}

#marketplace-drawer {
    position: absolute;
    bottom: 80px;
    right: 10px;
    min-height: 200px;
    max-height: 500px;
    width: 500px;
    border-radius: 4px;
    background: #33333c;
    box-shadow: 1px 1px 5px #00000099;
    z-index: 20000;
    overflow: hidden;
    transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#marketplace-drawer:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

#marketplace-drawer.hidden {
    opacity: 0;
    transform: translateY(4px);
}

#marketplace-drawer-toggle .ping {
    background: #c8354e;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

#marketplace-drawer-toggle.animate .ping {
    transform-origin: 50% 50%;
    display: block;
    animation: marketplace-ping-anim 1.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.drawer-green .ping,
.drawer-green .icon,
.drawer-green .notify {
    background-color: #37af59 !important;
    border-color: #37af59 !important;
}

.drawer-gold .ping,
.drawer-gold .icon,
.drawer-gold .notify {
    background-color: #ffc76f !important;
    border-color: #ffc76f !important;
    color: #000 !important;
}

.drawer-warning .ping,
.drawer-warning .icon,
.drawer-warning .notify {
    background-color: #ff5f00 !important;
    border-color: #ff5f00 !important;
}

#marketplace-drawer-toggle .notify {
    display: none;
    background: #fff !important;
    width: 28px;
    height: 28px;
    line-height: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    border-radius: 28px;
    position: absolute;
    bottom: -5px;
    right: -5px;
    border: 2px solid #c8354e;
}

@keyframes marketplace-ping-anim {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    #marketplace-drawer {
        width: 90%;
    }
}

/* drawer actions */

.drawer-actions {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row wrap;
}
.drawer-actions li {
    flex: 1;
}
.drawer-tab {
    display: block;
    padding: 8px;
    text-align: center;
    color: #c8354e;
    font-weight: 600;
    height: 35px;
}

.drawer-tab,
.drawer-tab span {
    transition: 100ms;
}

.drawer-tab span {
    background: #c8354e;
    color: #fff;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: bottom;
    border-radius: 4px;
    margin: 0 0.5em;
    display: none;
}

/**
 * .drawer-tab.drawer-tab is a hack to make this selector more specific and avoid having to put
 * !important everywhere in order to override the .drawer-tab.active styles
 */
.drawer-tab.drawer-tab:hover {
    background: #a22a46;
    color: #fff;
}

.drawer-tab.drawer-tab:hover span {
    background: #fff;
    color: #a22a46;
}

.drawer-tab.active {
    background: #c8354e;
    color: #fff;
}

.drawer-tab.active span {
    background: #fff;
    color: #c8354e;
}

/* drawer content */

.drawer-content {
    padding: 10px;
    display: none;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

.drawer-content .row {
    margin-bottom: 2px;
    background: #1c1c22;
}

.drawer-content .col {
    height: 43px;
    padding: 5px;
}

.drawer-content .col-icon img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-top: 5px;
}

/* .drawer-content .col-action {
    padding: 0px;
} */

.drawer-content .drawer-item > .col {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

.drawer-content .drawer-item > .col-action {
    justify-content: flex-end;
}

.drawer-content .drawer-item-action {
    background: #c32d4f;
    display: block;
    padding: 5px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
}

.drawer-content .drawer-item-action.confirm {
    background: #2b8e47;
}

.drawer-content .drawer-item .app-icon {
    margin: 0;
    border-radius: 4px;
}

/* reamaze widget */
#reamaze-widget,
#reamaze-widget #reamaze-widget-icon {
    border-radius: 4px !important;
}
/* Market modal */

.market-modal .modal-title {
    font-size: 20px;
}

.market-modal .modal-dialog {
    padding: 5px 15px;
    min-width: 300px;
    max-width: 1000px;
    min-height: 500px;
}

/* spinner */

.market-modal .preloader-wrapper {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-left: calc(50% - 50px);
}

.market-modal .preloader-wrapper .spinner-layer {
    border-color: #444;
}

.modal-preview-market-listing .preview-contents .market-item-value .market-item-value-desc {
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    margin-bottom: 0.5rem;
}

.modal-preview-market-listing {
    padding: 15px;
    text-align: center;
    font-family: "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif;
}

.modal-preview-market-listing strong {
    font-weight: 800;
}

.modal-preview-market-listing h4 {
    color: #c8354e;
}

.modal-preview-market-listing h5 {
    margin: 20px 0px;
    color: #a6a6b6;
}

.modal-preview-market-listing h6 {
    font-size: 14px;
    font-weight: 600;
    color: #a6a6b6;
}

.modal-preview-market-listing .important {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    color: #9c9c9c;
    letter-spacing: 0.5px;
}

.modal-preview-market-listing .user-badge {
    background: #1c1c22;
    display: inline-block;
    padding: 8px 8px;
    font-size: 20px;
    color: #9e9e9e;
    border-radius: 48px;
    line-height: 0px;

    text-align: center;
}

.modal-preview-market-listing .user-badge img {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    margin-right: 5px;
}

.modal-preview-market-listing .user-badge .image {
    vertical-align: middle;
    display: inline-block;
}

.modal-preview-market-listing .user-badge .name {
    margin-right: 10px;
}

.modal-preview-market-listing .user-badge .steamJoinedContainer {
    margin-top: 5px;
}

.modal-preview-market-listing .steamJoinDate {
    font-weight: 800;
    color: #ffc870;
    text-transform: uppercase;
}

.modal-preview-market-listing .btn-toolbar {
    line-height: 29px;
    height: 40px;
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.modal-preview-market-listing .steam-verify-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    background: hsla(216, 54%, 3%, 0.85);
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.modal-preview-market-listing .steam-verify-box h5 {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0;
    margin-top: 1.25rem;
    margin-left: -2.25rem;
    font-size: 1.25rem;
    color: #606060;
}

.modal-preview-market-listing .steam-verify-box h5 img {
    height: 1.75rem;
    margin-right: 0.75rem;
    opacity: 0.35;
}

.modal-preview-market-listing .steam-verify-box .data > * {
    padding: 1rem;
    background: hsl(216, 27%, 10%);
    margin: 1rem;
    position: relative;
}

.modal-preview-market-listing .steam-verify-box .data > *:before {
    font-family: "Material Icons";
    content: "double_arrow";
    -webkit-font-feature-settings: "liga" 1;
    -moz-font-feature-settings: "liga" 1;
    font-feature-settings: "liga" 1;
    font-size: 2.25rem;

    position: absolute;
    top: 0;
    left: -3.5rem;

    color: hsl(346, 62%, 47%);

    animation: steam-verify-box-arrow-shine 6s infinite;
}

.modal-preview-market-listing .steam-verify-box .data > *:nth-child(1):before {
    animation-delay: 1s;
}

.modal-preview-market-listing .steam-verify-box .data > *:nth-child(2):before {
    animation-delay: 2s;
}

.modal-preview-market-listing .steam-verify-box .data > *:nth-child(3):before {
    animation-delay: 3s;
}

@keyframes steam-verify-box-arrow-shine {
    0% {
        color: hsl(346, 62%, 47%);
        transform: translateX(0);
    }
    20% {
        color: hsl(346, 62%, 52%);
        transform: translateX(5px);
    }
    50% {
        color: hsl(346, 62%, 47%);
        transform: translateX(0);
    }
}

.modal-preview-market-listing .steam-verify-box span {
    color: #fff;
    display: inline-block;
}

.modal-preview-market-listing .steam-verify-box .text-hinted * {
    position: relative;
}

.modal-preview-market-listing .steam-verify-box .text-hinted *:after {
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(216, 27%, 14%);
    position: absolute;
}

.modal-preview-market-listing .steam-verify-box .text-hinted .bluetext:after {
    background-color: hsla(202, 44%, 32%);
}

.modal-preview-market-listing .steam-verify-box .bluetext {
    color: hsla(202, 66%, 62%);
}

.modal-preview-market-listing .steam-verify-box .level {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.modal-preview-market-listing .steam-verify-box .level .level-circle {
    width: 30px;
    height: 30px;
    border: 2px solid hsl(216, 12%, 50%);
    border-radius: 50%;
    margin-right: 0.75em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-preview-market-listing .steam-verify-box .level .level-circle:after {
    display: none;
}

.modal-preview-market-listing .btn-toolbar:hover {
    background: #ffffff33;
    border-color: #ffffff;
}

.modal-preview-market-listing .modal-actions {
    text-align: right;
}

.modal-preview-market-listing .btn-cancel {
    background: #c32d4f;
    border-color: #c32d4f;
}

.modal-preview-market-listing .btn-cancel:hover {
    background: #c32d4fcc;
    border-color: #c32d4f;
}

.modal-preview-market-listing .btn-confirm {
    background: #37af59;
    border-color: #37af59;
}

.modal-preview-market-listing .btn-confirm:hover {
    background: #37af59cc;
    border-color: #37af59;
}

.modal-preview-market-listing .tradeurl-info {
    background: #26262c;
    padding: 10px 0px;
    border-radius: 8px;
}

.modal-preview-market-listing .tradeurl-info input {
    border: none !important;
    background: #1c1c22;
    border-radius: 8px;
    padding: 10px;
    height: 15px;
    width: calc(100% - 20px) !important;
    margin-top: 5px;
    box-shadow: none !important;
}

.btn-inspect {
    background: none;
    padding: 0;
    border: none;
    color: #c8354e;
    font-weight: 600;
    transition: color 100ms;
}

.btn-inspect a {
    color: inherit;
}

.btn-inspect i {
    font-size: 1.5rem;
    vertical-align: middle;
    padding: 0 0.5rem;
}

.btn-inspect:hover,
.btn-inspect:hover i {
    color: #c32d4f !important;
}

.btn-inspect:focus {
    background: none;
}

.modal-preview-market-listing .listing-name {
    font-size: 20px;
}

.modal-preview-market-listing .listing-app-icon {
    margin-bottom: 0.75rem;
}
.modal-preview-market-listing .listing-app-icon img {
    height: 1.5rem;
    margin: 0 -5px;
    filter: drop-shadow(0 0 0.375rem rgba(255, 255, 255, 0.15));
}

.modal-preview-market-listing .listing-items {
    margin-bottom: 1rem;
    text-align: left;
}

.modal-preview-market-listing .listing-item {
    background: rgb(28, 28, 34);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
}

.modal-preview-market-listing .listing-item-image {
    display: flex;
    height: 100%;
    padding: 1.25rem;
    border-right: 4px solid hsl(350, 58%, 50%);
    border-image: linear-gradient(to bottom, hsl(350, 58%, 50%), hsl(350, 58%, 40%)) 1 100%;

    background: radial-gradient(
        hsla(0, 0%, 33%, 0.175) 0%,
        hsla(0, 0%, 33%, 0.175) 20%,
        hsla(0, 0%, 25%, 0.125) 21%,
        hsla(0, 0%, 25%, 0.125) 34%,
        hsl(240, 10%, 12%) 35%
    );
}

.modal-preview-market-listing .listing-item-image img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
    position: relative;
}

.modal-preview-market-listing .listing-item-paintwear-wrapper {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.125rem;
    margin-left: 0.5rem;
}

.modal-preview-market-listing .listing-items-value-wrapper {
    position: absolute;
    bottom: 0.875rem;
    right: 0.875rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-preview-market-listing .listing-item-value {
    font-size: 1.5rem !important;
}

.modal-preview-market-listing .listing-item-info,
.modal-preview-market-listing .listing-item-data {
    padding: 2rem;
    position: relative;
    display: flex;
    flex-flow: column wrap;
}

@media (max-width: 600px) {
    .modal-preview-market-listing .listing-item-info {
        padding-bottom: 2rem;
    }
}

.modal-preview-market-listing .listing-item-data {
    background: rgba(0, 0, 0, 0.1);
    justify-content: space-between;
}

.modal-preview-market-listing .listing-item-name-weapon {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
}

.modal-preview-market-listing .listing-item-name-skin {
    color: #c8354e;
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-preview-market-listing .listing-item-name-skin:before {
    content: " | ";
    color: rgba(255, 255, 255, 0.3);
}

.modal-preview-market-listing .listing-item-name-wear {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
}

.modal-preview-market-listing .listing-item-data-note {
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    flex-flow: column wrap;
}

.modal-preview-market-listing .listing-item-data-note > span {
    color: rgba(255, 255, 255, 0.5);
}

.modal-preview-market-listing .listing-item-value {
    color: #c8354e;
    font-weight: 600;
    font-size: 16px;
}

.modal-preview-market-listing .tradeoffer-details h6 {
    font-weight: normal;
    line-height: 1.5em;
}

.modal-preview-market-listing .tradeoffer-container {
    display: block;
    margin: 10px -10px;
    padding: 1rem;
    background: #1c1c22;
    border-radius: 4px;
}

.modal-preview-market-listing .listing-tradeoffer-button {
    margin-top: 1rem;
    padding: 0 3rem;
}

.modal-preview-market-listing .tradeoffer-container .user-badge {
    padding: 0 2rem;
    margin-bottom: 1rem;
}

.modal-preview-market-listing .tradeoffer-container .user-badge .name {
    font-weight: bold;
    font-size: 1.25rem;
}

.modal-preview-market-listing .tradeoffer-container .user-badge img {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    border-radius: 24px;
}

.modal-preview-market-listing .tradeoffer-container .market-item-rating {
    margin-bottom: 1rem;
}

.modal-preview-market-listing .tradeoffer-timer .progress,
.modal-preview-market-listing .confirm-timer .progress {
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    top: -4px;
}
.modal-preview-market-listing .tradeoffer-timer .progress .determinate,
.modal-preview-market-listing .confirm-timer .progress .determinate {
    background-color: #c32d4f;
}

/* Non-Api-Key Options for the Buyer (I Received the Item/I Didn't Receive the Item) */
.modal-preview-market-listing .confirm-options > * > * {
    background: rgba(0, 0, 0, 0.15);
    padding-top: 1.5rem;
}
.modal-preview-market-listing .confirm-options .timer-info {
    margin-bottom: 1.5rem;
}
.modal-preview-market-listing .confirm-options .time-left {
    margin-top: 1.5rem;
}

.modal-preview-market-listing p.redtext {
    /* border: 2px solid #c32d4f; */
    font-weight: 600;
}

.modal-preview-market-listing p.redtext a {
    color: #ffc76f;
    text-decoration: underline;
}

.modal-preview-market-listing .market-deposit-warning .warning {
    font-size: 1.125rem;
    padding: 0.75rem;
    color: #fff;
    background: rgb(28, 28, 34);
    border: 1px solid rgba(255, 48, 48, 0.5);
    font-weight: 400;
    border-radius: 4px;
    line-height: 2.25em;
    list-style-type: none;
}

.modal-preview-market-listing .market-deposit-warning .warning.redtext {
    border: 1px solid rgba(255, 48, 48, 0.75);
    box-shadow: 0 0 8px rgba(255, 48, 48, 0.1);
    background: #802136;
}

.modal-preview-market-listing.success {
    /* border: 2px solid #37af59;     */
}

.modal-preview-market-listing.success h4 {
    color: #37af59;
}

.modal-preview-market-listing.success .market-balance {
    font-size: 24px;
}

.modal-preview-market-listing.success .redtext {
    color: #37af59;
    border-color: #37af59;
}

.modal-preview-market-listing .ratings {
    display: none;
    padding: 1rem;
    font-size: 14px;
    background: #1c1c22;
    border-radius: 4px;
    margin: 0 0.75em;
    margin-bottom: 1.25rem;
}

.modal-preview-market-listing .listing-rating {
    display: inline-block;
    border: 2px solid #c32d4f;
    width: 4rem;
    height: 4rem;
    border-radius: 4px;
    margin: 1rem;
    transition:
        color 100ms,
        background 100ms,
        transform 100ms,
        box-shadow 100ms;
}

@keyframes listing-rating-up-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(55, 175, 89, 0.5);
    }
    50% {
        box-shadow: 0 0 0 4.5px rgba(55, 175, 89, 0);
    }
}

@keyframes listing-rating-down-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(195, 45, 79, 1);
    }
    50% {
        box-shadow: 0 0 0 4.5px rgba(195, 45, 79, 0);
    }
}

.modal-preview-market-listing .listing-rating:hover {
    background: #c32d4f;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.modal-preview-market-listing .listing-rating.rate-up {
    color: #37af59;
    border-color: #37af59;
    animation: 4s listing-rating-up-pulse infinite;
}

.modal-preview-market-listing .listing-rating.rate-up:hover {
    background-color: #37af59;
}

.modal-preview-market-listing .listing-rating.rate-dn {
    color: #c32d4f;
    animation: 4s listing-rating-down-pulse infinite;
}

.modal-preview-market-listing .listing-rating i {
    font-size: 24px;
    line-height: calc(4rem - 2px);
    text-align: center;
}

.modal-preview-market-listing .twitter-hint {
    display: flex;
    font-size: 14px;
    line-height: 2em;
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    margin: 1rem;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(28, 28, 34, 0.5), rgba(28, 28, 34, 0) 67.5%);
}

.modal-preview-market-listing .twitter-hint .col {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-flow: column nowrap;
}

.modal-preview-market-listing .twitter-hint a {
    display: inline-block;
}

.modal-preview-market-listing .twitter-hint img {
    min-width: 100px;
    width: 67.5%;
    position: absolute;
    animation: twitter-box-float 4s infinite;
}

@keyframes twitter-box-float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0px);
    }
}

.tradeoffer-timer {
    margin: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
    display: none;
}

.tradeoffer-timer.active {
    display: block;
}

.tradeoffer-timer p {
    margin-top: 0px;
}

.tradeoffer-timer .btn-toolbar {
    background: #c32d4f;
    border-color: #c32d4f;
}

.tradeoffer-timer .btn-toolbar:hover {
    background: #c32d4fcc;
    border-color: #c32d4f;
}

.withdraw-received-timer .btn-toolbar {
    border-color: #37af59;
    background: #37af59;
    font-weight: bold;
}

.withdraw-received-timer .btn-toolbar:hover {
    border-color: #37af59;
    background: #2e8c49;
    font-weight: bold;
}

.tradeoffer-timer.withdraw-timer,
.tradeoffer-timer.withdraw-received-timer {
    min-height: 170px !important;
    display: block;
}

.tradeoffer-timer .timer-info {
    min-height: 60px;
}

.tradeoffer-timer.waiting .btn-toolbar {
    background: #42424c !important;
    border-color: #42424c !important;
    color: #26262c !important;
}

.tradeoffer-timer.reported {
    border-color: #37af59;
    color: #37af59;
    background: #162b1c;
}

.tradeoffer-timer.reported .btn-toolbar {
    background: #37af59 !important;
    border-color: #37af59 !important;
    color: #162b1c !important;
}

.listing-pos-link {
    font-weight: 600;
    color: #c8354e;
}

.listing-pos-link i {
    font-size: 17px;
    vertical-align: bottom;
}

.listing-rating-pre {
    margin-right: 5px;
    font-size: 14px;
    color: #999;
}

.tradeoffer-container .listing-rating-pre {
    display: none;
}

.listing-rating-container {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

.listing-rating-container i {
    font-size: 16px;
    vertical-align: text-bottom;
    margin-right: 5px;
}

.listing-rating-container.success {
    color: #37af59;
}

.listing-rating-container.danger {
    color: #c8354e;
    font-weight: bold;
}

.listing-rating-container.warning {
    color: #ffc76f;
}

.confirm-received-container {
    display: none;
}

.modal-preview-market-listing .confirm-cancel,
.modal-preview-market-listing .confirm-received,
.modal-preview-market-listing .confirm-lock {
    background: #1c1c22;
    margin-bottom: 10px;
    padding: 5px 10px;
    display: none;
}

.modal-preview-market-listing .confirm-cancel p.redtext,
.modal-preview-market-listing .confirm-received p.redtext,
.modal-preview-market-listing .confirm-lock p.redtext {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    border: none;
}

.modal-preview-market-listing .confirm-cancel strong,
.modal-preview-market-listing .confirm-received strong,
.modal-preview-market-listing .confirm-lock strong {
    color: #c32d4f;
}

.modal-preview-market-listing .confirm-cancel p {
    margin: 0px;
}

.modal-preview-market-listing .confirm-cancel .cancel-trade,
.modal-preview-market-listing .confirm-received .confirm-received-trade,
.modal-preview-market-listing .confirm-lock .lock-trade {
    color: #fff;
    border: 1px solid #c32d4f;
    background: #802136;
    padding: 5px 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    display: block;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
}

.modal-preview-market-listing .confirm-received .confirm-received-trade {
    color: #fff;
    border: 1px solid #37af59;
    background: #205d31;
}

.modal-preview-market-listing .confirm-cancel .cancel-trade:hover,
.modal-preview-market-listing .confirm-received .confirm-received-trade:hover {
    color: #ffffff;
    background: #c32d4f;
}

.modal-preview-market-listing .confirm-received .confirm-received-trade:hover {
    color: #fff;
    background: #37af59;
}

.confirm-received-error p {
    font-size: 16px;
    color: #fff !important;
    background: #c32d4f;
    padding: 5px;
}

#market-deposit-after-modal {
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
}

#market-deposit-after-modal.market-modal .modal-dialog {
    min-height: auto !important;
    max-width: 500px;
    font-size: 14px;
    border: 2px solid #37af59;
}

#market-deposit-after-modal.market-modal .modal-dialog h4 {
    color: #37af59;
}

#market-deposit-after-modal.market-modal .modal-dialog .modal-dismiss {
    color: #37af59;
}

#market-deposit-after-modal.market-modal .modal-dialog .btn-toolbar {
    background: #37af59;
    border-color: #37af59;
}

/* inventory layout */

#market-deposit-modal .modal-dialog {
    display: flex;
    flex-flow: column nowrap;
    height: calc(100vh - 40px);
}

#market-deposit-modal .main {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    overflow: hidden;
}

#market-deposit-modal > * {
    padding: 15px 30px;
}

#market-deposit-modal h4 {
    color: rgb(200, 53, 78);
    font-size: 2.28rem;
}

#market-deposit-modal p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

#market-deposit-modal hr {
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    margin: 30px 0;
}

.market-inventory-wrapper {
    display: flex;
    flex-flow: column nowrap;
    flex: 3;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 1rem;
}

.market-inventory-wrapper .actions {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.market-inventory-wrapper .actions > .market-filter {
    flex: 1;
    min-width: 10rem;
    margin-right: 1rem !important;
}

.market-inventory-wrapper #marketInventoryRefresh {
    align-self: flex-end;
    background: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.5em 0.75em;
    border-color: transparent;
}

.market-inventory-wrapper #marketInventoryRefresh:hover {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.075) !important;
}

.market-inventory-wrapper #marketInventoryRefresh i {
    font-size: 18px;
    vertical-align: bottom;
}

#market-deposit-modal .market-filter {
    border: none;
    box-shadow: none;
    background: #18181d;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    border-radius: 4px;
    padding: 0 1em;
    transition: color 150ms;
    height: 100%;
    margin: 0;
}

#market-deposit-modal .market-filter:focus {
    color: rgba(255, 255, 255, 0.85);
}

#market-deposit-modal .market-filter::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

.market-inventory,
.market-inventory-loading {
    display: flex;
    flex-flow: row wrap;
    overflow-y: scroll;
    margin-right: -1rem;
}

.market-inventory-selected {
    flex: 1;
    padding: 0 1rem;
    overflow-y: scroll;
}

.market-inventory-selected #marketListingSubmit {
    margin-top: 0;
    width: 100%;
}

.market-inventory-selected .total-container {
    border-left: 4px solid rgba(172, 172, 172, 0.15);
    margin-top: 1.5rem;
    padding-bottom: 1.5px;
    padding-left: 0.5rem;
}

.market-inventory-selected .total-container > div {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    padding-left: 0.75em;
    margin-bottom: 0.25em;
}

.market-inventory-wrapper .market-inventory-item {
    flex: 1;
    min-width: 150px;
    min-height: 17.5em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: stretch;
    position: relative;
}

.market-inventory-wrapper .market-inventory-item:hover {
    box-shadow: inset 0 0 0 2px #c8354e;
}

.market-inventory-wrapper .market-inventory-item .market-item-name {
    height: 3em;
    margin-bottom: 1em;
    padding: 0 1em;
}

.market-inventory-wrapper .market-inventory-item .market-item-image {
    flex: 1;
}
.market-inventory-wrapper .market-inventory-item .market-item-image img {
    margin-top: -1.375rem;
}

.market-inventory-wrapper .market-inventory-item.flex-filler {
    visibility: hidden;
}

.market-inventory-item .remove-from-cart {
    display: none;
}

.market-inventory-wrapper .market-inventory-loading .market-item.placeholder {
    width: 150px;
}

.btn-toolbar.btn-toolbar-red {
    background-color: #c8354e;
    border-color: #c8354e;
}

.btn-toolbar.btn-toolbar-red:hover {
    background-color: #a22b3f;
    border-color: #c8354e;
}

.btn-toolbar.btn-toolbar-green {
    background-color: #37af59 !important;
    border-color: #37af59 !important;
}

.btn-toolbar.btn-toolbar-green:hover {
    background-color: #37af59 !important;
    border-color: #37af59 !important;
}

/* market loading animation */
.market-item.placeholder {
    animation: market-loading-placeholder-fade 1s infinite;
}

@keyframes market-loading-placeholder-fade {
    0% {
        background: hsl(240, 9%, 10%);
    }
    50% {
        background: hsl(240, 9%, 7%);
    }
    100% {
        background: hsl(240, 9%, 10%);
    }
}

/* market list */
.market-list {
    display: flex;
    flex-flow: row wrap;
}

/* market items */
.market-item {
    width: 210px;
    background: #18181d;
    margin-bottom: 1em;
    margin-right: 1em;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    transition:
        border-color 100ms,
        box-shadow 100ms,
        background-color 100ms;
    overflow: hidden;
}

.market-item > .animation-container {
    opacity: 0;
    transition: opacity 100ms;
}

/* rarity borders */
.market-item:before {
    content: "";
    position: absolute;
    width: calc(100% + 4px);
    height: 100%;
    top: 0px;
    left: -2px;
    border: 1px solid transparent;
    border-width: 2px 0 0 0;
    transition: opacity 100ms;
    display: none;
}

.market-item.requested:before,
.market-item.tradeoffer:before,
.market-item.disabled:before {
    display: none !important;
}

.market-item.market-item:hover:before {
    opacity: 0;
}

.market-item[class*="rarity"] {
    padding-top: 2px;
}

.market-item[class*="rarity"] .listing-item-paintwear {
    margin-top: 2px;
}

.market-item[class*="rarity"]:before {
    display: block;
}

.market-item.rarity-common:before {
    /* consumer grade */
    border-color: rgba(175, 175, 175);
}
.market-item.rarity-uncommon:before {
    /* industrial grade */
    border-color: rgba(135, 199, 255);
}
.market-item.rarity-ancient:before {
    /* mil-spec */
    border-color: rgba(17, 85, 221);
}
.market-item.rarity-rare:before {
    /* restricted */
    border-color: rgba(136, 71, 255);
}
.market-item.rarity-mythical:before {
    /* classified */
    border-color: rgba(211, 44, 230);
}
.market-item.rarity-legendary:before {
    /* covert */
    border-color: rgba(235, 75, 75);
}
.market-item.rarity-exceedingly-rare:before {
    /* knives/gloves */
    border-color: rgba(202, 171, 5);
}
.market-item.rarity-immortal:before {
    /* contraband */
    border-color: rgba(242, 188, 75);
}

/* items in different states */
.market-item .pending {
    display: none;
}

.market-item:hover {
    box-shadow: 0 0 0 2px #c8354e;
    cursor: pointer;
}

.market-item.disabled {
    cursor: initial;
    opacity: 0.33;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.market-item.pending {
    cursor: initial;
    opacity: 0.6;
    margin-bottom: 1.25rem;
}

.market-item.pending .pending {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    position: absolute;
    border-radius: 4px;
    left: 25%;
    bottom: 1em;
}

.market-item.requested {
    box-shadow: 0 0 0 2px #37af59;
    background-color: #0e2d17;
}

.market-item .market-item-status .listing-status {
    font-size: 12px;
    min-height: 2.5em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
}

.market-item.requested .market-item-status {
    color: #37af59;
}

.market-item.requested .listing-item-paintwear {
    background: #37af59;
    color: #245a33;
}

.market-item.requested:hover {
    box-shadow: 0 0 0 2px #fff;
}

.market-item.requested:hover .listing-item-paintwear {
    background-color: #fff;
    color: #333;
}

.market-item.tradeoffer {
    box-shadow: 0 0 0 2px #45b5da;
    background-color: #0c2e3a;
}

.market-item.tradeoffer .market-item-status {
    color: #45b5da;
}

.market-item.tradeoffer .listing-item-paintwear {
    background: #45b5da;
    color: #245e71;
}

.market-item.tradeoffer:hover {
    box-shadow: 0 0 0 2px #fff;
}

.market-item.tradeoffer:hover .listing-item-paintwear {
    background-color: #fff;
    color: #333;
}

.market-item-name {
    margin-top: 20px;
    color: #c0c0c0;
    font-size: 12px;
    height: 45px;
}

.market-item-image {
    max-height: 90px;
    overflow: hidden;
    position: relative;
}

.market-item-image img {
    width: 70%;
    height: auto;
    vertical-align: middle;
    margin-top: -10px;
}

.market-item-value {
    color: #c8354e;
    font-size: 16px;
    font-weight: 600;
}

.market-item-value .discount-green {
    margin-left: 5px;
    color: #37af59;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-top: -4px;
}

.market-item-value .discount-gray {
    margin-left: 5px;
    color: #808096;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-top: -4px;
}

.market-item .market-item-action {
    display: none;
    background: #1c1c22;
    border: 2px solid #1c1c22;
    color: #fff;
    padding: 2px 5px;
    margin: 5px;
    border-radius: 4px;
    font-size: 12px;
}

.market-item .market-item-action.enabled {
    display: block !important;
}

.market-item .market-item-action:hover {
    background-color: #1c1c22;
    border-color: #c8354e;
}

.market-item .market-item-action:focus,
.market-item .market-item-action:active {
    background-color: #c8354e;
    border-color: #c8354e;
}

/* market listing items */

.market-list .market-item {
    max-width: 210px;
    height: 17.5em;
}

.market-list .market-item-name {
    height: 3em;
    padding: 0 1em;
}

.market-list .listing-item-image {
    max-height: 7.75em;
    overflow: hidden;
    position: relative;
}

#market-deposit-list .market-item {
    height: 18.5em;
}

#market-deposit-list .market-item.active .listing-item-image:after,
#market-shop-list .market-item:not(.disabled) .listing-item-image:after,
#account-market-list .market-item .listing-item-image:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, hsla(240, 9%, 10%, 0) 80%, #18181d 100%);
}

.market-list .listing-item-name,
.market-list .listing-item-value {
    display: none;
}

.market-list .listing-item-image img {
    width: 72.5%;
    height: auto;
    vertical-align: middle;
    margin-top: -1.375rem;
}

.market-listing-row {
    text-align: left;
}

.market-listing-item .listing-items {
    margin-bottom: 1.5em;
}

.market-listing-item .api-key-badge {
    position: absolute;
    bottom: 0;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    text-align: right;
}

.market-listing-item .api-key-badge i {
    color: #c8354e;
    font-size: 17px;
    vertical-align: top;
}

.market-listing-item.processing:hover {
    box-shadow: 0 0 0 2px #2f2f38;
    cursor: initial;
}

.market-listing-item.processing .listing-name,
.market-listing-item.processing .listing-item,
.market-listing-item.processing .market-item-value {
    opacity: 0.33;
}

.market-list .loader {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.market-list .loader .preloader-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

.market-list .loader .spinner-layer {
    border-color: #c8354e;
}

.market-listing-item .listing-item-paintwear {
    position: absolute;
    top: -2px;
    right: -2px;
    padding: 0.125rem 0.5rem;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 4px;
    transition:
        background-color 100ms,
        color 100ms;
}

.market-listing-item:hover .listing-item-paintwear {
    background-color: #c8354e;
    color: #fff;
}

.market-listing-item .listing-item-inspect {
    /* position: absolute;
    bottom: 10px;
    right: 10px; */
    display: none;
}

/* small items */
.market-list.small-items .market-item {
    max-width: 150px;
    height: 13.5em;
}

.market-list.small-items .market-item .listing-item-image img {
    margin-top: -0.5rem;
}

.market-list.small-items .market-item .api-key-badge {
    height: 20px;
}
.market-list.small-items .market-item .api-key-badge i {
    font-size: 14px;
    opacity: 0.75;
}

.market-list.small-items .market-item .listing-items {
    margin-bottom: 5px;
}

.market-list.small-items .market-item .listing-item-image {
    max-height: 80px;
}

.market-list.small-items .market-item .listing-name {
    font-size: 12px;
}

.market-list.small-items .market-item .market-item-value {
    font-size: 14px;
}

.market-list.small-items .market-item .market-item-value .bet-icon {
    height: 16px;
    margin-bottom: -3px;
    margin-right: 3px;
}

/* shopping cart */
#market-shop-cart .listing-item-image {
    height: 50px;
}

#market-shop-cart .listing-item-image img {
    height: 120% !important;
    width: auto !important;
    margin-top: 0px;
}

/* bundle css */

.market-listing-item.bundle .listing-name {
    height: 25px;
}

.market-listing-item.bundle .listing-item {
    width: calc(50% - 2px);
    height: calc(50% - 2px);
    float: left;
    position: relative;
    margin: 1px;
    background: #1c1c22;
}

.market-listing-item.bundle .listing-item-name {
    font-size: 8px;
    width: 100%;
    height: 12px;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #00000066;
    display: block;
}

.market-listing-item.bundle .listing-item-value {
    display: none;
}

.market-listing-item.bundle .listing-item-paintwear {
    background: #333 !important;
    color: #909090 !important;
}

.market-listing-item.bundle .listing-item-inspect {
    /* position: absolute;
    left: 3px;
    bottom: 12px; */
    display: none;
}

/* .market-listing-item.bundle .listing-item-inspect a i {
    font-size: 13px;
    color: #333;
} */

/* .market-listing-item.bundle .listing-item-inspect a:hover i {
    color: #c8354e;
} */

/* market overlay */

.market-item-overlay {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #000000e0;
    padding: 5px;
}

.market-listing-item.active:hover .market-item-overlay {
    display: block;
}

.market-item-overlay .overlay-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #c8354e;
}

.market-item-overlay .overlay-actions {
    margin-top: 50px;
    height: auto;
}

.market-item-overlay .overlay-actions li {
    display: block;
    margin-bottom: 5px;
}

.market-item-overlay .overlay-action {
    border: 2px solid #c8354e;
    border-radius: 4px;
    padding: 8px;
    color: #fff;
    display: block;
    width: 80%;
    margin: 0px auto;
}

.market-item-overlay .overlay-action:hover {
    background: #c8354e;
}

/* "fake" listing */
.fake-listing {
    background: hsl(240, 10%, 12%);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.fake-listing.btn-cooldown .preloader-wrapper {
    position: absolute;
    top: calc(50% - 45px);
    left: calc(50% - 24px);
}

.fake-listing:after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0%;
    z-index: -1;
    right: 0;

    font-family: "Material Icons";
    content: "new_releases";
    -webkit-font-feature-settings: "liga" 1;
    -moz-font-feature-settings: "liga" 1;
    font-feature-settings: "liga" 1;

    font-size: 10rem;

    color: hsl(240, 10%, 13.5%);
}

.fake-listing .listing-items {
    height: 90px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.fake-listing .listing-items i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 2rem rgba(255, 255, 255, 0.25);
    display: block !important;
    user-select: none;
}

/* cart */

.market-inventory-cart .market-item {
    width: 100%;
    max-width: 100%;
    border: none;
    box-shadow: none;
    cursor: default;
    background: #18181d;
    position: relative;
    z-index: 1;
    min-height: 10rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    transition: box-shadow 100ms;
    overflow: initial;
}

.market-inventory-cart .market-item:not(.trader-item) .slider-container {
    display: none;
}

.market-inventory-cart .market-item > .animation-container {
    opacity: 1;
}

.market-inventory-cart .market-item.trader-item {
    margin-bottom: 5rem;
    border-top: 8px solid hsl(240, 12%, 9%);
    border-radius: 4px 4px 0 0;
}

.market-inventory-cart .market-item:hover,
.market-inventory-cart .market-item:hover .slider-container {
    box-shadow: 0 0 0 2px #c32d4f;
}

.market-inventory-cart .remove-from-cart {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:
        opacity 100ms,
        background 100ms;
}

.market-inventory-cart .remove-from-cart:hover {
    opacity: 1;
    background: hsla(240, 9%, 8%, 0.9);
}

.market-inventory-cart .remove-from-cart i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 5rem;
}

.market-inventory-cart .market-item-name {
    font-size: 12px;
    height: 40px;
    padding: 0px 2em;
}

.market-inventory-cart .market-item-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 10rem;

    z-index: -1;
}

.market-inventory-cart .market-inventory-item.trader-item .market-item-image {
    min-height: calc(10rem - 8px);
}

.market-inventory-cart .market-item-image:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to left, hsla(240, 9%, 10%, 0.8), hsla(240, 9%, 10%, 1) 60%);
}

.market-inventory-cart .market-item-image img {
    left: 47.5%;
    top: -10%;
    position: absolute;
}

.market-inventory-cart .market-item-value {
    height: 2em;
}

.bonus-deposit-available {
    display: none;
    align-items: center;
    background: url("/static/images/deposit-bonus-bg.png") no-repeat center center;
    background-size: cover;
    margin: 15px 0.75rem;
    padding: 32px 28px;
    border-radius: 5px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bonus-deposit-left--title {
    font-size: 29px;
    color: #d33257;
    font-weight: 400;
    font-family: "Open Sans";
}

.bonus-deposit-left--subtitle {
    font-size: 12px;
    color: #888888;
    font-weight: 400;
}

.bonus-deposit-right {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    font-family: "Open Sans";
    margin-right: 80px;
}

.bonus-deposit-right .red-text {
    font-weight: 600 !important;
    color: #c32d4f !important;
}

.market-listing-totals {
    font-size: 14px;
    margin-bottom: 20px;
}

.market-listing-totals .btn-toolbar {
    width: calc(50% - 15px);
    margin-right: 10px;
}

.market-listing-totals img {
    margin-left: 10px;
}

.market-listing-totals .total {
    font-size: 16px;
    font-weight: 600;
}

/* slider */
.market-global-slider-container {
    display: none;
    margin-top: 1.375rem;
    background: #1d1d23;
    border-radius: 4px;
    padding: 1rem;
    color: #ccc;
}

.market-global-slider-container p,
.market-global-slider-container h5 {
    font-size: 14px !important;
}

.market-global-slider-container h5 {
    color: white;
}

.market-global-slider-container p:nth-of-type(2) {
    color: rgba(204, 204, 204, 0.5) !important;
}

.market-global-slider-container #cart-discount-slider {
    margin-top: 30px;
}

.market-inventory-item.trader-item .slider-container {
    position: absolute;
    background: #1d1d24;
    bottom: -3.5rem;
    height: 3.5rem;
    border-radius: 0 0 4px 4px;
    width: 100%;
    transition: box-shadow 100ms;
}

.noUi-target {
    border: none;
    box-shadow: none !important;
    border-radius: 4px;
    background: #26262c;
    height: 4px;
    margin: 18px 10px 10px 10px;
}

.market-inventory-cart .noUi-target {
    margin: 18px 20px 10px 20px;
}

.noUi-connects {
    border-radius: 0px;
    cursor: pointer;
}

.noUi-connect {
    background: #a52340;
}

.noUi-horizontal .noUi-handle {
    width: 10px;
    height: 12px;
    right: -5px;
    top: -4px;
    border-radius: 0px;
    border: none;
    background: #ca324c;
    box-shadow: none;
}

.noUi-horizontal .noUi-handle {
    cursor: move;
    cursor: grab;
}

.noUi-handle:before,
.noUi-handle:after {
    display: none;
}

.noUi-touch-area {
    width: 10px;
    height: 12px;
}

.noUi-tooltip {
    font-size: 12px;
    padding: 0.25em 0.5em;
    border-radius: 4px;
    color: #ccc;
    background: hsl(0, 0%, 4%);
    border: none;
}

@media (max-width: 1200px) {
    .market-list .market-item {
        width: 40%;
        max-width: 100%;
    }

    .market-list .listing-item-image img {
        max-width: auto;
        width: auto;
        height: 130px;
    }
}

@media (max-width: 800px) {
    .market-list .market-item {
        width: 100%;
        max-width: 100%;
    }

    .market-list .listing-item-image img {
        max-width: auto;
        width: auto;
        height: 130px;
    }

    .bonus-deposit-left--title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .bonus-deposit-right {
        font-size: 16px;
        margin-top: 8px;
    }
}

.market-section .market-title {
    color: #c8354e;
}

.market-toolbar {
    margin-bottom: 0;
}

.btn-toolbar i {
    vertical-align: middle;
}

.btn-toolbar .preloader-wrapper {
    width: 24px;
    height: 24px;
    margin-top: 0px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0px;
}

.btn-toolbar .preloader-wrapper .spinner-layer {
    border-color: #fff;
}

.btn-toolbar {
    background: #1c1c22;
    border: 2px solid #1c1c22;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    height: initial !important;

    transition: all 100ms;
}

/* a.btn-toolbar {
    display: block;
    text-align: center;
    font-size: 13px;
}

.modal-preview-market-listing a.btn-toolbar {
    font-size: 13px;
} */

.btn-toolbar:hover {
    background-color: #1c1c22;
    border-color: #c8354e;
}

.btn-toolbar:focus,
.btn-toolbar:active {
    background-color: #c8354e;
    border-color: #c8354e;
}

.btn-toolbar .spinner {
    width: 18px;
    height: 18px;
    display: none !important;
}

.btn-toolbar:disabled .spinner,
.btn-toolbar[disabled] .spinner,
.btn-toolbar[disabled="disabled"] .spinner {
    display: inline-block !important;
}

.btn-toolbar:disabled,
.btn-toolbar[disabled],
.btn-toolbar[disabled="disabled"] {
    color: #ffffff66;
}

.btn-toolbar-mini {
    padding: 2px 8px;
    font-size: 12px;
}

/* dropdown */
#market-shop-filters .toolbar {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: space-around;
    align-items: center;
}

.toolbar-dropdown {
    background: #1c1c22;
    border: 2px solid #c32d4f;
    border-radius: 4px;
    color: #fff;
}

.toolbar-dropdown li {
    height: auto !important;
    line-height: 1em !important;
    min-height: 30px;
    text-align: center;
}

.toolbar-dropdown li a {
    font-size: 13px;
    padding: 10px;
    color: #fff;
}

.toolbar-dropdown li a:hover {
    background: #c32d4f;
}

/* market shop */

/* shop cart */

#market-shop-cart .market-item.bundle .listing-items img {
    display: none;
}

#market-shop-cart .market-item.bundle .listing-items .listing-item {
    position: static;
    display: block;
    float: none;
    width: 100%;
    height: 20px;
    padding: 4px;
}

#market-shop-cart .market-item.bundle .listing-items .listing-item .listing-item-name {
    position: static;
    background: none;
    font-size: 11px;
    height: auto;
}
#market-shop-cart .market-item {
    width: 100%;
    max-width: 100%;
    height: 200px;
}

.market-balance {
    display: none;
    color: #c8354e;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

.market-balance img {
    margin-left: 5px;
    margin-right: 5px !important;
}

#market-shop-filters {
    position: relative;
}

#market-shop-filters > .row > .col {
    padding: 0;
}

.gameshop-checkbox-container,
#market-shop-filters span.p2p-custom-prices-container {
    margin-right: 30px;
    display: inline-block;
    background: #1c1c22;
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.gameshop-checkbox-container:not(:last-of-type) {
    margin-right: 5px;
}

.gameshop-checkbox-container .wait,
#market-shop-filters span.p2p-custom-prices-container.wait {
    opacity: 0.33;
}

.gameshop-checkbox-container label,
#market-shop-filters span.p2p-custom-prices-container label {
    padding-left: 25px;
    color: #fff;
    font-size: 14px;
}

/* search */
#market-shop-filters .toolbar-search-group {
    display: flex;
    flex-flow: row nowrap;
    margin-right: 30px;
}

#market-shop-filters .toolbar-search-group .btn-shop-search {
    background: transparent;
    border-radius: 0 4px 4px 0;
    border-width: 2px;
    user-select: none;
}

#market-shop-filters .toolbar-search-group input {
    border-radius: 4px 0 0 4px;
}

/* filters */
#market-shop-filters input.shop-search {
    width: 175px;
    max-width: 250px;
    background: #1c1c22;
    border: 2px solid #1c1c22;
    color: #fff;
    padding: 5px 1em;
    height: 30px;
    box-shadow: none !important;
    border: none !important;
    margin: 0;
}

#market-shop-filters input.shop-search::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

#market-shop-filters .btn-toolbar.shop-filter {
    text-align: center;
    min-width: initial;
}

#market-shop-filters .btn-toolbar.shop-filter.active {
    /* background:#c32d4f; */
    border-color: #c32d4f;
}
#market-shop-filters .shop-refresh {
    margin-right: 30px;
}

#market-shop-filters .shop-refresh,
#market-shop-filters .shop-refresh:active,
#market-shop-filters .shop-refresh:focus {
    background: #c8354e;
    border-color: #c8354e;
}
#market-shop-filters .shop-refresh i {
    font-size: 16px;
}

#market-shop-filters .shop-size-toggle {
    background: none;
    padding: 0;
    margin-left: 30px;
    border: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.35);
    transition: color 100ms;
}

#market-shop-filters .shop-size-toggle:hover {
    color: rgba(255, 255, 255, 0.75);
}

#market-shop-filters .shop-size-toggle i {
    font-size: 28px;
    margin-right: 4px;
}

a.market-health-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #37af59;
    border-radius: 16px;
    position: absolute;
    right: 24px;
    top: 5px;
}

a.market-health-indicator.warning {
    background-color: #ffc76f;
}

a.market-health-indicator.danger {
    background-color: #c32d4f;
}

a.marketplace-help-icon,
a.shop-help-icon {
    margin-left: 20px;
    display: inline-block;
}

a.marketplace-help-icon i,
a.shop-help-icon i {
    font-size: 24px;
    line-height: 0px;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.65);
}

#marketCreateListing {
    flex-flow: row nowrap;
    align-items: center;
}
#marketCreateListing i {
    padding: 4.5px;
}
#marketCreateListing svg {
    height: 16px;
    margin-right: 5px;
    margin-bottom: -2px;
}

ul.bullets li {
    margin-left: 20px;
    list-style-position: outside;
    margin-bottom: 5px;
}

.modal-overlay {
    overflow: scroll;
}

div#market-shop-wrapper .wait {
    opacity: 0.33;
}

.market-button-group button {
    margin-right: 12px;
}

.p2p-pagination {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 30px;
}

#market-shop-list ~ .p2p-pagination {
    margin-top: 30px;
    margin-bottom: 0;
}

.p2p-pagination .btn-toolbar {
    box-shadow: none;
    border-radius: 4px;
    padding: 0.75rem;
    background: #1c1c22;
    border-color: transparent;
    user-select: none;
}

.p2p-pagination .btn-toolbar:hover,
.p2p-pagination .pagination-page-select > .page-select:hover {
    border-color: #c8354e;
}

.p2p-pagination .btn-toolbar i {
    font-size: 26px;
    height: 0.5em;
    width: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p2p-pagination .btn-toolbar[disabled] {
    background-color: #1c1c22 !important;
    border-color: #1c1c22 !important;
    opacity: 0.3;
    pointer-events: none;
}

.p2p-pagination .pagination-page-select {
    margin: 0 1rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.p2p-pagination .pagination-page-select > .page-select {
    height: 2.5em;
    width: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin: 0 0.5rem;
    transition: border-color 100ms;
}

.p2p-pagination .pagination-page-select > .page-select.current-page {
    border-color: #c8354e;
}

.p2p-pagination.wait .pagination-page-select > .page-select {
    pointer-events: none !important;
    opacity: 0.33;
}

.p2p-pagination .pagination-page-select > .page-select:not([data-page]) {
    display: none;
}

@media (max-width: 800px) {
    .market-button-group button {
        width: 100%;
    }
}

@media (max-width: 800px) {
    #market-shop-filters .shop-refresh {
        margin-right: 5px;
    }

    .gameshop-checkbox-container,
    #market-shop-filters span.p2p-custom-prices-container {
        margin-bottom: 10px !important;
        margin-right: 5px;
        width: 100%;
        white-space: nowrap;
        text-align: center;
    }

    #market-shop-filters .toolbar-search-group {
        width: 100%;
        margin-right: 0;
    }

    #market-shop-filters .toolbar-search-group input {
        width: 100%;
    }

    .gameshop-checkbox-container label,
    #market-shop-filters span.p2p-custom-prices-container label {
        font-size: 12px;
    }

    #market-shop-filters .btn-toolbar {
        width: 100%;
        max-width: 100%;
    }
}

.deposit-preview-info-text {
    font-size: 13px;
}

.deposit-preview-info-text .btn-toolbar-red {
    background: #90233c;
    border-color: #90233c;
    font-weight: 800;
}

.deposit-preview-img {
    text-align: center;
}
.deposit-preview-img img {
    max-width: 100%;
}

.confirm-received-timer {
    background: #18181d;
    padding: 5px;
}

.confirm-received-timer .btn-toolbar {
    background: #1a502a;
    border-color: #1a502a;
}

.confirm-received-timer .btn-toolbar:hover {
    background: #37af59;
    border-color: #37af59;
}
@media (max-width: 800px) {
    .btn-toolbar {
        height: auto !important;
    }

    .steamJoinDate {
        display: block !important;
        margin-top: 20px;
    }

    .listing-tradeoffer-button {
        margin-top: 10px;
        word-wrap: break-word;
    }

    .drawer-content .row {
        height: 70px;
    }
    .modal-preview-market-listing h4 {
        margin-top: 40px;
    }

    .toolbar-search-group {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

#market-deposit-preview-modal .modal-dialog {
    max-width: 1000px;
    height: 770px;
    padding: 0;
}

#market-deposit-preview-modal .row {
    margin-bottom: 0;
    height: 100%;
    overflow: hidden;
}

#market-deposit-preview-modal .row > * {
    padding: 15px 30px;
}

#market-deposit-preview-modal p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

#market-deposit-preview-modal p span.note {
    margin: 0 3px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

#market-deposit-preview-modal h5 {
    display: inline-block;
}

#market-deposit-preview-modal hr {
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    margin: 30px 0;
}

#market-deposit-preview-modal .enter {
    background: #222228;
    color: white;
    height: 100%;
    position: relative;
}

#market-deposit-preview-modal .enter .action-group {
    position: absolute;
    bottom: 30px;
    width: calc(100% - 60px);
}

#market-deposit-preview-modal .enter .action-group > a {
    display: block;
    color: #c8354e;
    padding: 0.5em 0;
}

#market-deposit-preview-modal .api-input-wrapper i {
    padding: 0.25em;
    background: #18181d;
    border-radius: 4px 0 0 4px;
    vertical-align: bottom;
    display: inline-block;
    color: #c8354e;
    margin-right: -0.125em;
}

#market-deposit-preview-modal .api-input-wrapper input.api-input {
    border: none;
    box-shadow: none;
    background: #18181d;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    border-radius: 0 4px 4px 0;
    padding: 0;
    margin: 0;
    transition: color 150ms;
    display: inline-block;
    width: calc(100% - (36px + 0.125em));
}

#market-deposit-preview-modal input.api-input:focus {
    color: rgba(255, 255, 255, 0.85);
}

#market-deposit-preview-modal input.api-input::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

#market-deposit-preview-modal .register-community-wrapper {
    height: 30%;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

#market-deposit-preview-modal img.register-community {
    height: 100%;
    border-radius: 4px;
}

#market-deposit-preview-modal .deposit-preview-api-skip {
    background: none;
    color: rgba(255, 255, 255, 0.425);
    border: none;
    margin-left: 4.625em;
    padding: 0;
}

.shop-filters-container {
    margin-bottom: 20px;
    position: relative;
}

.shop-filters-container input.shop-search {
    max-width: 200px;
    background: #1c1c22;
    border: 2px solid #1c1c22;
    color: #fff;
    padding: 2px 10px;
    height: 30px;
    border-radius: 4px;
    margin-top: -5px;
    margin-right: 30px;
    margin-bottom: 0px;
    display: inline-block;
    box-shadow: none !important;
    border: none !important;
}

.shop-filters-container .btn-toolbar.shop-filter,
.shop-filters-container .btn-toolbar.shop-refresh {
    min-width: 140px;
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 5px;
}

.shop-filters-container .toolbar-left {
}
.shop-filters-container .toolbar-right {
    text-align: right;
}

.shop-filters-container .btn-toolbar.shop-filter.active {
    /* background:#c32d4f; */
    border-color: #c32d4f;
}
.shop-filters-container .shop-refresh {
    margin-right: 30px;
}

.shop-filters-container .shop-refresh,
.shop-filters-container .shop-refresh:active,
.shop-filters-container .shop-refresh:focus {
    background: #c8354e;
    border-color: #c8354e;
}
.shop-filters-container .shop-refresh i {
    font-size: 16px;
}

.instantshop-help-icon {
    display: block;
    margin: 20px 0px;
}

.instantshop-help-icon i {
    font-size: 30px;
    line-height: 0px;
    vertical-align: middle;
}

.message-type-purchase {
    /*   border: 2px solid #37af59; */
    margin-left: -10px;
    width: calc(102%);
    margin-top: 10px;
    /*   border-radius: 8px; */
    padding: 0px;
    background: #26262c;
    box-shadow: 0px 4px 0px #18181d;
    border-top: 1px solid #30303a;
    border-bottom: 1px solid #30303a;
}

.message-type-purchase .message-author-system {
    color: #c32d4f;
}

.message-type-purchase .message-avatar-wrapper {
    margin-left: 20px;
    margin-top: 10px;
}

.message-type-purchase .message-content-wrapper {
    width: 100%;
    max-width: 185px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.message-type-purchase .message-content {
    color: #aaa;
    font-size: 12px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.message-type-purchase .message-content .username {
    font-weight: 800;
    color: #fff;
}

.message-type-purchase .message-content .skin {
    font-weight: 800;
    display: block;
    color: #eee;
}

.message-type-purchase .message-content .value {
    font-weight: 800;
    color: #c32d4f;
}

.message-type-purchase .message-content .skin-image {
    width: 100%;
    height: 100px;
}

.message-type-purchase .message-content .skin-image img {
    height: 100%;
}

@media (max-width: 1200px) {
    .shop-filters-container {
        font-size: 12px;
    }
}

.gameshop-section .gameshop-title {
    color: #c8354e;
}

.gameshop-toolbar {
    margin-bottom: 0;
}

/* dropdown */
#gameshop-filters .toolbar {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: space-around;
    align-items: center;
}

.gameshop-balance {
    color: #c8354e;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

.gameshop-balance img {
    margin-left: 5px;
    margin-right: 5px !important;
}

#gameshop-filters {
    position: relative;
}

#gameshop-filters > .row > .col {
    padding: 0;
}

/* tags */
#gameshop-genre-filters {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: calc(25px - 0.5rem);
    margin-top: -20px;
    justify-content: stretch;
    position: relative;
    transition: opacity 100ms;
}

#gameshop-genre-filters .product-tag {
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
    text-align: center;
    flex-grow: 1;
    max-width: 10%;
    min-width: max-content;
    height: 2em;
}

#genre-filter-clear {
    margin-left: auto;
}

#genre-filter-collapse i {
    vertical-align: middle;
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

#genre-filter-clear,
#genre-filter-collapse {
    cursor: pointer;
    color: #999;
    transition: color 100ms;
    margin-right: 0.5em;
    user-select: none;
}

#genre-filter-clear:hover,
#genre-filter-collapse:hover {
    color: #ccc;
}

#gameshop-genre-filters.has-selected-tag > .product-tag:not(.selected) {
    opacity: 0.5;
}

/* search */
#gameshop-filters .toolbar-search-group {
    display: flex;
    flex-flow: row nowrap;
    margin-right: 30px;
}

#gameshop-filters .toolbar-search-group .btn-shop-search {
    background: transparent;
    border-radius: 0 4px 4px 0;
    border-width: 2px;
    user-select: none;
}

#gameshop-filters .toolbar-search-group input {
    border-radius: 4px 0 0 4px;
}

/* filters */
#gameshop-filters input.shop-search {
    width: 175px;
    max-width: 250px;
    background: #1c1c22;
    border: 2px solid #1c1c22;
    color: #fff;
    padding: 5px 1em;
    height: 30px;
    box-shadow: none !important;
    border: none !important;
    margin: 0;
}

#gameshop-filters input.shop-search::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

#gameshop-filters .btn-toolbar.shop-filter {
    text-align: center;
    min-width: initial;
}

#gameshop-filters .btn-toolbar.shop-filter.active {
    /* background:#c32d4f; */
    border-color: #c32d4f;
}
#gameshop-filters .shop-refresh {
    margin-right: 30px;
}

#gameshop-filters .shop-refresh,
#gameshop-filters .shop-refresh:active,
#gameshop-filters .shop-refresh:focus {
    background: #c8354e;
    border-color: #c8354e;
}
#gameshop-filters .shop-refresh i {
    font-size: 16px;
}

#gameshop-filters .shop-size-toggle {
    background: none;
    padding: 0;
    margin-left: 30px;
    border: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.35);
    transition: color 100ms;
}

#gameshop-filters .shop-size-toggle:hover {
    color: rgba(255, 255, 255, 0.75);
}

#gameshop-filters .shop-size-toggle i {
    font-size: 28px;
    margin-right: 4px;
}

a.gameshop-health-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #37af59;
    border-radius: 16px;
    position: absolute;
    right: 24px;
    top: 5px;
}

a.gameshop-health-indicator.warning {
    background-color: #ffc76f;
}

a.gameshop-health-indicator.danger {
    background-color: #c32d4f;
}

#gameshopCreateproduct {
    flex-flow: row nowrap;
    align-items: center;
}
#gameshopCreateproduct i {
    padding: 4.5px;
}
#gameshopCreateproduct svg {
    height: 16px;
    margin-right: 5px;
    margin-bottom: -2px;
}

div#gameshop-wrapper .wait {
    opacity: 0.33;
}

.gameshop-button-group button {
    margin-right: 12px;
}

.gameshop-pagination {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 30px;
}

#gameshop-list ~ .gameshop-pagination {
    margin-top: 30px;
    margin-bottom: 0;
}

.gameshop-pagination .btn-toolbar {
    box-shadow: none;
    border-radius: 4px;
    padding: 0.75rem;
    background: #1c1c22;
    border-color: transparent;
    user-select: none;
}

.gameshop-pagination .btn-toolbar:hover,
.gameshop-pagination .pagination-page-select > .page-select:hover {
    border-color: #c8354e;
}

.gameshop-pagination .btn-toolbar i {
    font-size: 26px;
    height: 0.5em;
    width: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gameshop-pagination .btn-toolbar[disabled] {
    background-color: #1c1c22 !important;
    border-color: #1c1c22 !important;
    opacity: 0.3;
    pointer-events: none;
}

.gameshop-pagination .pagination-page-select {
    margin: 0 1rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.gameshop-pagination .pagination-page-select > .page-select {
    height: 2.5em;
    width: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin: 0 0.5rem;
    transition: border-color 100ms;
}

.gameshop-pagination .pagination-page-select > .page-select.current-page {
    border-color: #c8354e;
}

.gameshop-pagination.wait .pagination-page-select > .page-select {
    pointer-events: none !important;
    opacity: 0.33;
}

.gameshop-pagination .pagination-page-select > .page-select:not([data-page]) {
    display: none;
}

@media (max-width: 800px) {
    .gameshop-button-group button {
        width: 100%;
    }

    .gameshop-item {
        max-width: 100% !important;
    }
}

@media (max-width: 800px) {
    #gameshop-filters .shop-refresh {
        margin-right: 5px;
    }

    #gameshop-filters .toolbar-search-group {
        width: 100%;
        margin-right: 0;
    }

    #gameshop-filters .toolbar-search-group input {
        width: 100%;
    }

    #gameshop-filters .btn-toolbar {
        width: 100%;
        max-width: 100%;
    }
}

/* product list */
.btn-toolbar.btn-toolbar-red {
    background-color: #c8354e;
    border-color: #c8354e;
}

.btn-toolbar.btn-toolbar-red:hover {
    background-color: #a22b3f;
    border-color: #c8354e;
}

.btn-toolbar.btn-toolbar-green {
    background-color: #37af59 !important;
    border-color: #37af59 !important;
}

.btn-toolbar.btn-toolbar-green:hover {
    background-color: #37af59 !important;
    border-color: #37af59 !important;
}

/* market list */
.gameshop-list {
    display: flex;
    flex-flow: row wrap;
}

/* market items */
.gameshop-item {
    background: #18181d;
    margin-bottom: 1.25em;
    margin-right: 1.25em;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    transition:
        border-color 100ms,
        box-shadow 100ms,
        background-color 100ms;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    box-shadow: 0 -2px 0 #c8354e;
}

/* rarity borders */
.gameshop-item:before {
    content: "";
    position: absolute;
    width: calc(100% + 4px);
    height: 100%;
    top: 0px;
    left: -2px;
    border: 1px solid transparent;
    border-width: 2px 0 0 0;
    transition: opacity 100ms;
    display: none;
}

.gameshop-item.requested:before,
.gameshop-item.tradeoffer:before,
.gameshop-item.disabled:before {
    display: none !important;
}

.gameshop-item.gameshop-item:hover:before {
    opacity: 0;
}

.gameshop-item[class*="rarity"] {
    padding-top: 2px;
}

.gameshop-item[class*="rarity"] .product-item-platform {
    margin-top: 2px;
}

.gameshop-item[class*="rarity"]:before {
    display: block;
}

.gameshop-item.rarity-common:before {
    /* consumer grade */
    border-color: rgba(175, 175, 175);
}
.gameshop-item.rarity-uncommon:before {
    /* industrial grade */
    border-color: rgba(135, 199, 255);
}
.gameshop-item.rarity-ancient:before {
    /* mil-spec */
    border-color: rgba(17, 85, 221);
}
.gameshop-item.rarity-rare:before {
    /* restricted */
    border-color: rgba(136, 71, 255);
}
.gameshop-item.rarity-mythical:before {
    /* classified */
    border-color: rgba(211, 44, 230);
}
.gameshop-item.rarity-legendary:before {
    /* covert */
    border-color: rgba(235, 75, 75);
}
.gameshop-item.rarity-exceedingly-rare:before {
    /* knives/gloves */
    border-color: rgba(202, 171, 5);
}
.gameshop-item.rarity-immortal:before {
    /* contraband */
    border-color: rgba(242, 188, 75);
}

/* items in different states */
.gameshop-item .pending {
    display: none;
}

.gameshop-item:hover {
    box-shadow: 0 0 0 2px #c8354e;
    cursor: pointer;
}

.gameshop-item.disabled {
    cursor: initial;
    opacity: 0.33;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.gameshop-item.pending {
    cursor: initial;
    opacity: 0.6;
    margin-bottom: 1.25rem;
}

.gameshop-item.pending .pending {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    position: absolute;
    border-radius: 4px;
    left: 25%;
    bottom: 1em;
}

.gameshop-item.requested {
    box-shadow: 0 0 0 2px #37af59;
    background-color: #0e2d17;
}

.gameshop-item .product-item-status .product-status {
    font-size: 12px;
    min-height: 2.5em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
}

.gameshop-item.requested .product-item-status {
    color: #37af59;
}

.gameshop-item.requested .product-item-platform {
    background: #37af59;
    color: #245a33;
}

.gameshop-item.requested:hover {
    box-shadow: 0 0 0 2px #fff;
}

.gameshop-item.requested:hover .product-item-platform {
    background-color: #fff;
    color: #333;
}

.gameshop-item.tradeoffer {
    box-shadow: 0 0 0 2px #45b5da;
    background-color: #0c2e3a;
}

.gameshop-item.tradeoffer .product-item-status {
    color: #45b5da;
}

.gameshop-item.tradeoffer .product-item-platform {
    background: #45b5da;
    color: #245e71;
}

.gameshop-item.tradeoffer:hover {
    box-shadow: 0 0 0 2px #fff;
}

.gameshop-item.tradeoffer:hover .product-item-platform {
    background-color: #fff;
    color: #333;
}

.product-item-name {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    color: #c0c0c0;
    min-height: 3em;
    overflow: hidden;
}

.product-item-image {
    overflow: hidden;
    position: relative;
    flex: 1;
}

.product-item-image:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, hsla(240, 9%, 10%, 0) 75%, hsla(240, 9%, 10%, 0.5));
    z-index: 1;
    transition: opacity 300ms;
}

.product-item-image img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.product-item-image.placeholder {
    width: 100%;
    background: hsl(240, 9%, 9.5%);
}

.product-item-image.placeholder:before {
    display: none;
}

.product-item-image.placeholder img {
    height: 66.5px !important;
    width: auto !important;
    margin-top: 50%;
    opacity: 0.125;
}

@media (min-width: 1241px) {
    .gameshop-item:hover > .product-item-image:before {
        opacity: 0;
    }
}

.product-item-value {
    color: #c8354e;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.product-item-value .discount-green {
    margin-left: 5px;
    color: #37af59;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-top: -4px;
}

.product-item-value .discount-gray {
    margin-left: 5px;
    color: #808096;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-top: -4px;
}

.gameshop-item .product-item-action {
    display: none;
    background: #1c1c22;
    border: 2px solid #1c1c22;
    color: #fff;
    padding: 2px 5px;
    margin: 5px;
    border-radius: 4px;
    font-size: 12px;
}

.gameshop-item .product-item-action.enabled {
    display: block !important;
}

.gameshop-item .product-item-action:hover {
    background-color: #1c1c22;
    border-color: #c8354e;
}

.gameshop-item .product-item-action:focus,
.gameshop-item .product-item-action:active {
    background-color: #c8354e;
    border-color: #c8354e;
}

/* market product items */

.gameshop-list .gameshop-item {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    height: 26em;
    animation: gameshop-item-fade 100ms;
}

@keyframes gameshop-item-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gameshop-list .gameshop-item.loading-filler {
    visibility: visible;
}

.gameshop-item.flex-filler {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.gameshop-item .product-item-name {
    height: 3em;
    padding: 0 1em;
}

#market-deposit-list .gameshop-item {
    height: 18.5em;
}

.gameshop-item .product-item-image img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.gameshop-item .loader {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.gameshop-list .loader .preloader-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

.gameshop-list .loader .spinner-layer {
    border-color: #c8354e;
}

.gameshop-item .product-item-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 4px 1em;
    font-size: 12px;
    background: hsla(240, 9%, 16%, 0.85);
    box-shadow: 0 0 8px hsl(240, 9%, 12%);
    transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);

    color: #ccc;
    text-shadow: 0.75px 0.65px rgba(0, 0, 0, 0.65);

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

@media (max-width: 1240px) {
    .gameshop-item .product-item-header {
        backdrop-filter: unset;
        transform: unset;
        text-shadow: unset;
        background: hsl(240, 9%, 13.5%);
    }
}

.gameshop-item:hover .product-item-header {
    background-color: #c8354e;
    color: #fff;
    box-shadow: 0 2px 0 #c8354e;
}

.alert-box.email-notverified-wrapper {
    margin-top: -10px;
    margin-bottom: 20px;
    background: linear-gradient(30deg, hsl(195, 92%, 12.5%), hsl(195, 92%, 14%));
    border-radius: 4px;
    line-height: 2.25;
    padding: 10px 20px;
}

/* preview modal */
#gameshop-preview-modal .modal-dialog {
    height: unset !important;
}

#gameshop-preview-modal .btn-toolbar {
    line-height: 29px;
    height: 40px;
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* preview modal */
#gameshop-preview-modal .gameshop-preview-modal-content {
    display: flex;
    flex-flow: row wrap;
    padding: 1rem 0;
}

#gameshop-preview-modal .gameshop-preview-modal-content .right {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    margin-left: 2rem;
    position: relative;
    float: unset !important;
}

#gameshop-preview-modal .gameshop-preview-modal-content .right .info {
    flex: 1;

    display: flex;
    flex-flow: column nowrap;
}

/* modal activation details */

.activation-details-wrapper {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 1.65em;
    max-height: calc(6 * 1.65em); /* show 6 lines, one of which is the header */
    overflow: hidden;
    position: relative;
    flex: 1;
}

.activation-details-wrapper:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #26262c00, #26262c);
    transition: opacity 100ms;
    pointer-events: none;
}

.activation-details-wrapper h6 {
    font-size: inherit;
    font-weight: bold;
    font-family: inherit;
    color: #bbb;
}

.activation-details {
    white-space: pre-line;
    padding-right: 1.5em;
    font-family: inherit;
}

/* expand activation details */

.expand-activation-details {
    align-self: flex-start;
    background: none !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    padding: 1rem 0;
    border-color: transparent !important;
    margin-left: -4px; /* needed because of the icon */
    transition: color 100ms;
}

.expand-activation-details:hover {
    color: rgba(255, 255, 255, 0.65);
}

.expand-activation-details i {
    font-size: 18px;
    vertical-align: bottom;
}

.activation-details-wrapper.expanded + .expand-activation-details i {
    transform: rotate(180deg);
}

.activation-details-wrapper.expanded {
    max-height: 100%;
    transition: max-height 300ms;
}

/* hide other elements when activation details are expanded */
.activation-details-wrapper.expanded:before {
    opacity: 0;
}

.activation-details-wrapper.expanded .activation-details {
    overflow-y: scroll;
    height: 100%;
    position: absolute;
}

.activation-details-wrapper.expanded .activation-details::-webkit-scrollbar {
    width: 4px;
}

/* modal item */

#gameshop-preview-modal .gameshop-item-wrapper {
    display: inline-block;
    pointer-events: none;
}

#gameshop-preview-modal .gameshop-item-wrapper,
#gameshop-preview-modal .gameshop-item {
    height: 500px;
    width: 336px;
    border-radius: 0 0 4px 4px;
}

#gameshop-preview-modal .gameshop-item .product-item-image img {
    height: 100%;
    width: auto;
}

#gameshop-preview-modal .gameshop-item .product-item-name {
    display: none;
}

#gameshop-preview-modal .gameshop-item .product-item-value {
    position: absolute;
    bottom: -0.25em;
    right: 0.75em;
    color: #c8354e;
    z-index: 1;
    padding: 0.5rem 1rem;
    background: hsla(240, 9%, 16%, 0.6);

    color: #ccc;
    backdrop-filter: blur(5px);
    border-radius: 4px;
    font-size: 14px;
}

#gameshop-preview-modal .gameshop-item .product-item-value img {
    height: 20px;
}

/* product region */

#gameshop-preview-modal .product-region {
    font-size: 18px;
    font-family: "Roboto", sans-serif;
}

#gameshop-preview-modal .product-region img {
    height: 1.375em;
    margin-right: 0.375em;
    vertical-align: top;
    border-radius: 3px;
}

#gameshop-preview-modal .right .info .region {
    margin-top: auto;
    position: relative;
    font-size: 14px;
    height: 17.5rem;
    display: flex;
    flex-flow: column nowrap;
}

#gameshop-preview-modal .right .info .region:not(.unrestricted) .region-container {
    margin-right: auto;
    padding: 12px 15px;
    border-radius: 4px;
    background: hsl(240, 9%, 13.5%);
}

#gameshop-preview-modal .right .info .region.unrestricted .region-container h6 {
    font-weight: normal;
    color: #a0a0a0;
}

#gameshop-preview-modal .right .info .region-container h6 {
    font-size: 14px;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
    color: #bbb;
    margin: 0;
    display: inline-block;
    color: #c8354e;
}

#gameshop-preview-modal .right .info .region:not(.unrestricted) .region-container h6 {
    margin-bottom: 1rem;
    margin-right: 24px; /* so spacing doesn't look off because of material-icons */
}

#gameshop-preview-modal .right .info .region:not(.unrestricted) .region-container h6:before {
    content: "warning";
    color: #c8354e;
    font-weight: normal;
    font-size: 24px;
    margin-top: -2px;
    font-family: "Material Icons";
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}

#gameshop-preview-modal .right .info .region.unrestricted .region-warning-text {
    top: 17px;
}

#gameshop-preview-modal .right .info .region .region-warning-text {
    font-size: inherit;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 86px;
    padding: 1rem;
    margin: -1rem;
    margin-top: 0;
}

#gameshop-preview-modal .right .info .region .region-warning-text .alert-box {
    padding: 0.75rem 1rem;
    background: #562231;
    border-color: #8c2740;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 0;
}

#gameshop-preview-modal .right .info .region .region-warning-text .alert-box p {
    margin: 0;
}

/* product tags */
.product-tag {
    padding: 0.25rem 1rem;
    background: hsl(240, 9%, 13.5%);
    border-radius: 50px;
    color: #888;
    font-family: "Roboto", sans-serif;

    transition:
        opacity 150ms,
        color 150ms;
}

.product-tag {
    margin-right: 0.5rem;
}

.product-tag.selected {
    color: #ccc;
}

#gameshop-preview-modal .product-tag:last-child {
    margin-right: 0;
}

/* actions */
#gameshop-preview-modal .right .actions {
    display: flex;
    flex-flow: column nowrap;
    flex: 0.33;
}

#gameshop-preview-modal .actions .confirm {
    margin-top: auto;
}

#gameshop-preview-modal .actions .btn-confirm-purchase {
    width: 100%;
    background: #37af59cc;
    border-color: #37af59;
    font-family: "Roboto", sans-serif;
    border-radius: 4px;
    font-size: 13px;
}

#gameshop-preview-modal .actions .btn-confirm-purchase:hover:not(:active) {
    background: #37af59;
}

#gameshop-preview-modal.wait .actions .btn-confirm-purchase {
    pointer-events: none;
    background: hsla(0, 0%, 34%, 0.8);
    border-color: hsl(0, 0%, 34%);
}

/* Order Sent Modal */
.gameshop-order-sent-modal-content {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    height: 530px;
    padding: 0 8rem;
    font-family: "Roboto", sans-serif;
}

.gameshop-order-sent-modal-content > * {
    width: 100%;
}

.gameshop-order-sent-modal-content p {
    font-size: 14px;
    text-align: center;
    margin-top: 0.25em;
}

.gameshop-order-sent-modal-content .info-text {
    text-align: center;
    position: relative;
}

.gameshop-order-sent-modal-content .info-text > p:nth-of-type(2) {
    color: #c8354e;
    font-weight: 500;
}

.gameshop-order-sent-modal-content .info-text i.material-icons {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 36px;
    margin-top: -0.175em;
}

.gameshop-order-sent-modal-content .activation-details-wrapper {
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    background: hsla(240, 9%, 10%, 0.5);
    border-radius: 4px;
    line-height: 2.25;
}

.gameshop-order-sent-modal-content .transaction-id {
    color: #a0a0a0;
    background: #18181d;
    padding: 2px 6px;
    border-radius: 4px;
}

.gameshop-order-sent-modal-content .activation-details-wrapper .activation-details {
    padding-bottom: 3em; /* otherwise you can't scroll all the way to the bottom */
}

.open-email-wrapper {
    margin-top: auto;
    margin-bottom: 1.125rem;
    width: unset;
    height: 5.75rem;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
}

.open-email-wrapper div {
    color: rgba(255, 255, 255, 0.5);
}

.open-email-wrapper .btn-open-email {
    font-size: 13px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    padding: 0.75rem 1.5rem;
}

/* genre filter collapse */
@media (min-width: 1241px) {
    #gameshop-genre-filters.collapse-toggled,
    #gameshop-genre-filters.collapse-toggled .product-tag {
        display: none;
    }

    #genre-filter-collapse.toggled i {
        transform: rotate(180deg);
        margin-top: -2px;
    }
}

@media (max-width: 1240px) {
    #gameshop-genre-filters.collapse-toggled,
    #gameshop-genre-filters.collapse-toggled .product-tag {
        display: flex;
    }

    #gameshop-genre-filters,
    #gameshop-genre-filters .product-tag {
        display: none;
    }

    #gameshop-preview-modal .modal-dialog {
        width: 100vw;
        max-width: 100vw;
    }
}

@media (min-width: 769px) {
    #gameshop-preview-modal.activation-details-expanded .region {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #gameshop-preview-modal .right .actions {
        min-width: 100%;
        margin-top: 6rem;
    }

    #gameshop-preview-modal .gameshop-item-wrapper {
        width: 100%;
        height: 200px;
        margin-bottom: 3rem;
    }

    #gameshop-preview-modal .gameshop-item-wrapper .gameshop-item {
        height: 100%;
        width: 100%;
        border-radius: 0 0 4px 4px;
    }

    #gameshop-preview-modal .region {
        margin-top: 6rem !important;
        text-align: center;
    }

    #gameshop-preview-modal .region .region-container {
        margin-right: 0 !important;
        border-radius: 4px 4px 0 0 !important;
        border: 1px solid #8c2740;
    }

    #gameshop-preview-modal .region .region-warning-text {
        margin: -0.25rem 0 !important;
        padding: 0 !important;
    }

    #gameshop-preview-modal .region .region-warning-text .alert-box {
        border-radius: 0 0 4px 4px !important;
        border-top-color: transparent !important;
    }

    #gameshop-preview-modal .activation-details-wrapper.expanded {
        min-height: 22.5rem;
    }

    #gameshop-preview-modal .activation-details-wrapper.expanded .activation-details {
        height: 20.5rem;
    }
}

.crash-loading {
    text-align: center;
    font-size: 20px;
    color: #c32d4f;
}

.crash-loading .spinner {
    margin-top: 20px;
}

.crash-canvas-container {
    width: 100%;
    height: 350px;
    background: #1c1c22;
}

.crash-canvas-container canvas {
    max-height: 350px !important;
}

.crash-players {
    font-size: 12px;
}

.crash-players .emoji {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.crash-players .user {
}
.crash-players .avatar img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.crash-players td {
    padding: 5px;
}

.crash-players .my-bet {
    background-color: #3d3d4666;
}

.crash-players .level-badge {
    line-height: 14px !important;
    margin-bottom: unset !important;
}

.crash-players a {
    color: #aaa;
}

.crash-players .cashed-out,
.crash-players .cashed-out a {
    color: #37af59;
    font-weight: bold;
}

.crash-players .cashed-out-blue,
.crash-players .cashed-out-blue a {
    color: #45b5da;
    font-weight: bold;
}

.crash-players .cashed-out-gold,
.crash-players .cashed-out-gold a {
    color: #ffc870;
    font-weight: bold;
}

.crash-players .crashed,
.crash-players .crashed a {
    color: #c8354e;
    font-weight: bold;
}

/* CONTROLS */
.crash-controls {
    background: #1c1c22;
    padding: 10px;
    height: 350px;
}

/* .crash-cashout-form, .crash-bet-form {
    display: none;
} */

.crash_balance_container {
    display: none;
    font-size: 24px;
}

.crash_balance_container img.svg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.crash_balance_container span {
    font-size: 24px;
}

.crash-autobetter-container {
    padding: 0 !important;
}

.crash-controls label {
    font-size: 13px;
    color: #444;
    margin: 0px;
}

.crash-controls input {
    background: #26262c;
    border: none !important;
    box-shadow: none !important;
    padding: 0px 10px !important;
    font-size: 14px;
    width: calc(100% - 20px);
    border-radius: 8px;
}

.crash-controls button {
    font-size: 18px;
    width: 100%;
}

.crash-controls .crash-btn.success {
    background: #37af59;
    border-color: #37af59;
    color: #fff !important;
}

.qb-container {
    display: block;
}

.qb-container li {
    display: inline-block;
}

.qb-container .qb {
    color: #999;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.qb-container .qb:hover {
    color: #c32d4f;
}

/* TOP BAR */

.crash-top-bar {
    margin-bottom: 5px;
}

.crash-top-bar p {
    margin-top: 3px;
}

.crash-history {
    display: inline-block;
    width: calc(100% - 94px);
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    margin: 0px;
    padding: 0px;
    margin-left: 10px;
}

.crash-history li {
    display: inline-block;
    overflow: visible;
    text-align: center;
    padding-right: 2px;
}

.crash-history li a {
    padding: 2px 5px;
    background: #b53248;
    border: 1px solid #b5354b;
    color: #fff;
    border-radius: 5px;
    text-shadow: 1px 1px 1px #00000066;
    font-weight: 500;
    font-size: 12px;
    margin-right: 3px;
}

.crash-history li.history-green a {
    background: #329e51;
    border-color: #3abd5f;
}

.crash-history li.history-blue a {
    background: #3d9ab9;
    border-color: #45b5da;
}

.crash-history li.history-gold a {
    background: #d2a050;
    border-color: #ffc76f;
}

.crash-history li.history-ltgreen a {
    background: #526959;
    border-color: #507159;
}

.crash-history li.history-gray a {
    background: #595969;
    border-color: #646473;
}

.history-tooltip {
    text-align: left;
    font-size: 11px;
    /* border: 1px solid #575767; */
    transition: none !important;
}

.history-tooltip strong {
    color: #f5f5f5;
}

.history-tooltip i {
    font-style: normal;
    font-family: Consolas, "Ubuntu Mono", monospace;
    color: #ffffff;
}

/* History Modal */

.crash-history-modal .modal-dialog {
    width: 70%;
    max-width: 70%;
    min-width: 300p;
    overflow: auto;
}

.crash-history-modal a.hash {
    display: block;
    width: 100%;
    min-width: 200px;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crash-history-modal table thead {
    border-color: #393942;
    color: #6e6e79;
}

.crash-history-modal table td:last-child {
    width: 200px;
}

.crash-history-modal table tbody tr {
    border-bottom: 1px solid #35353c;
}

.crash-history-modal table tbody tr.chain-old {
    opacity: 0.5;
}

.crash-history-modal table tbody tr.chain-sep td {
    background: #c32d4f;
    height: 1px;
    padding: 0px !important;
    margin: 0px !important;
}

.crash-history-modal table tbody tr.chain-sep td,
.crash-history-modal table tbody tr.chain-sep td a {
    font-size: 0 !important;
}

.crash-history-modal table tbody tr.chain-sep td a.verify {
    display: none;
}

.crash-history-modal table tbody td {
    margin: 0px;
    padding: 5px;
}

.crash-history-modal .round-row {
    background: #1c1c22;
    display: none;
}

.crash-history-modal .round-row td {
    padding: 20px;
}

.crash-history-modal .round-row .round_info {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.crash-history-modal .round-row .round_info p {
    margin: 0px;
    padding: 5px 0px;
}

.crash-history-modal .round-row table,
.crash-history-modal .round-row .round_info {
    background: #141419;
}

.crash-history-modal .round-row table td {
    padding: 5px;
}

.history-table-container {
    max-height: 620px;
    overflow: scroll;
}

table.history-table {
    background: #1c1c22;
    margin: 10px 0px;
}

table.history-table .td-nonce {
    width: 100px;
}

table.history-table tr.highlight {
    background: #42424a;
    border: none !important;
    box-shadow: 0px 0px 3px #42424a;
    font-weight: 900 !important;
}

table.history-table .round_hash {
    white-space: nowrap;
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    color: #dddddd;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-family: "Ubuntu Mono", Consolas, monospace;
}

table.history-table a.verify {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #00000066;
    border-radius: 26px;
    font-size: 14px;
    line-height: 14px;
    line-height: 14px;
    color: #37af59;
    vertical-align: middle;
    padding: 3px;
}

table.history-table a.verify-old {
    color: #ffc870;
}

table.history-table a.verify:hover {
    background: #000000cc;
    color: #fff;
}

table.history-table a.verify i {
    font-size: 18px;
    line-height: 18px;
}

table.history-table .round_nonce {
    color: #dddddd;
    text-decoration: underline;
}

table.history-table .avatar {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border-radius: 16px;
}

.text-green {
    color: #31d65f;
}
.text-red {
    color: #da204b;
}
.text-blue {
    color: #45b5da;
}
.text-gold {
    color: #ffc76f;
}
.text-gray {
    color: #9595ad;
}
.text-ltgreen {
    color: #628e6e;
}

.me {
    background: #333;
}

table.round_players thead,
table.round_players tbody,
table.round_players tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* even columns width , fix width of table too*/
}

table.round_players tbody {
    max-height: 200px;
    overflow: scroll !important;
    display: block;
    width: 100%;
}

/* Round Modal*/

.crash-round-modal .modal-dialog {
    width: 40%;
    max-width: 70%;
    min-width: 300p;
    overflow: auto;
    padding: 10px;
}

.crash-round-modal .round_info {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #141419;
}

.crash-round-modal .round_info p {
    margin: 0px;
    padding: 5px 0px;
}

.round_players_rows .avatar {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border-radius: 16px;
}

.round_players_rows .emoji {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.round_players_rows a {
    color: #999;
}

.round_players {
    background: #1c1c22;
    padding: 10px;
}

.round_players_rows td {
    margin: 0px;
    padding: 2px;
}

/* Crash INFO */

.crash-game-container {
    position: relative;
    user-select: none;
}

.crash-game-info {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.crash-info-box {
    font-size: 20px;
    color: #37af59;
    text-shadow: 1px 1px 1px #0f0f13;
    position: absolute;
    width: 100%;
    display: none;
}

.crash-info-box.active {
    display: block !important;
}

.crash-info-box .crash-info-text {
    background: #0f0f13;
    border-radius: 4px;
    display: inline-block;
    padding: 10px;
}

.crash-info-box p {
    margin: 0px;
    padding: 0px;
}

.crash-info-box.bottom {
    bottom: 10px;
    left: 0px;
}

.crash-info-box.middle {
    top: calc(50% - 30px);
    left: 0px;
    font-size: 30px;
}

.crash-info-box.top {
    top: 10px;
    left: 0px;
}

.crash-info-box.middle-auto {
    position: relative;
    font-size: 30px;
}

.crash-info-box.middle-auto:before {
    content: "";
    display: inline-block;
    position: relative;
    vertical-align: middle;
    height: 300px;
}

.crash-info-box.middle-auto .crash-info-text {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 10px 20px;
}

.crash-info-box.info-red,
.crash-info-box .info-red {
    color: #c32d4f;
}

.crash-info-box.info-gray,
.crash-info-box .info-gray {
    color: #9e9e9e;
}

.crash-info-box.info-blue,
.crash-info-box .info-blue {
    color: #45b5da;
}

.crash-info-box.info-gold,
.crash-info-box .info-gold {
    color: #ffc76f;
}

/* CRASH SUMMARY */

.crash-round-summary {
    margin: 0px;
    font-size: 14px;
}

.crash-round-summary p {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
}

.crash-round-summary i,
.crash-round-summary .bet-icon {
    vertical-align: middle;
}

.crash-round-summary .bet-icon {
    width: 24px;
    height: 24px;
    margin-top: -5px;
    margin-left: 10px;
}

/* Table */

.crash-bet-table {
    height: 600px;
    overflow: scroll;
}

.crash-bet-table .row {
    padding: 10px;
    background: #1c1c22;
}

.crash-bet-table table {
}
.crash-bet-table table thead {
    border-bottom: 1px solid #383844;
    margin: 0px;
}

.crash-bet-table table thead th {
    padding: 10px 0px;
    margin-top: 10px;
}

.crash-bet-table table tbody tr {
    border-bottom: 1px solid #2c2c35;
}

.crash-players-table {
}

.crash-players-table .thead .th {
    border-bottom: 1px solid #33333c;
}

.crash-players-table .tbody .td {
    border-bottom: 1px solid #33333c;
    padding: 3px;
}

.crash-players-table .thead .th.bet,
.crash-players-table .thead .th.cashout,
.crash-players-table .thead .th.profit {
    text-align: right;
    font-weight: bold;
}

.crash-players-table .td.bet,
.crash-players-table .td.cashout,
.crash-players-table .td.profit {
    text-align: right;
}

/* Autobetter */

.crash-autobetter {
    display: none;
}

.crash-autobetter .row {
    background: #1c1c22;
    margin: 0px;
    padding: 10px;
}

.crash-autobetter input {
    border: none !important;
    box-shadow: none !important;
    display: inline-block;
    width: 95%;
    background: #26262c;
    border-radius: 8px;
    padding: 0px 6px;
}

.crash-autobetter input.mini {
    display: inline-block;
    width: auto;
    min-width: 50px;
}

.crash-autobetter label.heading {
    font-size: 14px;
    color: #aaa;
    font-weight: 500;
}

button.crash-autobet-start {
    font-size: 20px;
    width: 100%;
    margin-top: 5px;
}
button.crash-autobet-start.active {
    background-color: #37af59;
    border-color: #37af59;
}

#crash-autobetter-log-link.danger,
.crash-autobetter-log .danger {
    color: #c8354e;
}

#crash-autobetter-log-link.success,
.crash-autobetter-log .success {
    color: #37af59;
}

#crash-autobetter-log-link.info,
.crash-autobetter-log .info {
    color: #f1d6ad;
}

.crash-controls .crash-enable-autobetter {
    font-size: 14px;
    width: 100%;
    padding: 5px;
    background: #26262c;
    border: none;
    word-break: normal;
}

.crash-controls .crash-enable-autobetter.active {
    background: #37af59;
}

.row.crash-autobetter .disabled {
    border: 1px solid #333 !important;
}

.row.crash-autobetter [type="radio"].disabled + label:before {
    border-color: #333;
    color: #333;
}

.row.crash-autobetter [type="radio"].disabled + label {
    border-color: #333;
    color: #333;
}

.row.crash-autobetter [type="radio"].disabled:checked + label:after {
    border-color: #333;
    background: #333;
    color: #333;
}

ul.crash-autobetter-log {
    max-height: 300px;
    background: #19191f;
    overflow: scroll;
}

ul.crash-autobetter-log li {
    border-bottom: 1px solid #26262c;
    padding: 3px;
}

ul.crash-autobetter-log li strong {
    color: #757575;
}

/* INFO MODAL */

.crash-modal {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.crash-modal .modal-dialog {
    max-width: 70%;
    padding: 10px;
}

.crash-modal .title {
    color: #c32d4f;
}

.crash-modal h2 {
    color: #c32d4f;
    font-size: 20px;
    font-weight: bold;
}

.crash-modal p {
    font-size: 13px;
    color: #ccc;
    padding: 0px;
    margin: 0.5em 0px;
}

.crash-modal .sep {
    width: 100%;
    height: 1em;
}

.crash-modal code,
.crash-modal span.code {
    font-family: "Ubuntu Mono", Consolas, monospace;
    background: #18181d;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d6c09e;
}

.crash-modal a {
    color: #c8354e;
}

.crash-modal .red {
    background: #18181d !important;
    color: #c8354e !important;
}
.crash-modal .blue {
    background: #18181d !important;
    color: #45b5da !important;
}
.crash-modal .green {
    background: #18181d !important;
    color: #37af59 !important;
}
.crash-modal .gold {
    background: #18181d !important;
    color: #ffc76f !important;
}

.rTable {
    display: table;
    width: 100%;
}
.rTable .tr {
    display: table-row;
}
.rTable .thead {
    display: table-header-group;
}
.rTable .tbody {
    display: table-row-group;
}
.rTable .tfoote {
    display: table-footer-group;
}
.rTable .td,
.rTable .th {
    display: table-cell;
}

/* Latency indicator */

.crash-game-container .crash-latency-indicator {
    position: absolute;
    left: 20px;
    bottom: 10px;
}

.crash-latency-popup {
    position: absolute;
    bottom: 30px;
    left: 40px;
    background: #00000066;
    border: 1px solid #444;
    max-width: 300px;
    min-width: 150px;
    padding: 10px 10px 10px;
    font-size: 12px;
    display: none;
}

.crash-latency-indicator {
    box-sizing: border-box;
    background-color: #00000066;
    padding: 4px;
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 16px;
    vertical-align: middle;
    cursor: pointer;
}

.crash-latency-indicator span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #666;
    border-radius: 100%;
}

/* Anim settings */

.crash-anim-settings-toggle {
    /* color:#62626d; */
    color: #c32d4f;
    position: absolute;
    right: 20px;
    bottom: 5px;
    background-color: #00000033;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 30px;
}
.crash-anim-settings-toggle:hover {
    color: #c32d4f;
    background-color: #00000099;
}

.crash-anim-settings-toggle i {
    font-size: 20px;
    line-height: 30px;
}

.crash-anim-settings {
    position: absolute;
    bottom: 30px;
    right: 40px;
    background: #00000066;
    max-width: 300px;
    min-width: 150px;
    padding: 0px 10px 10px;
    /* border-radius: 8px; */
    /* border: 1px solid #40404e; */
    display: none;
}

.crash-anim-settings h4 {
    font-size: 14px;
    font-weight: 800;
    color: #c32d4f;
}

.crash-anim-settings ul {
    margin: 0px;
    font-size: 12px;
}

.crash-anim-settings ul a {
    color: #9a9aaf;
    text-decoration: underline dotted;
}

.crash-anim-settings ul a:hover {
    color: #c32d4f;
    text-decoration: underline;
}

/* Text based ticker */

.crash-text-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    background: #1c1c22;
    display: none;
}

.crash-text-container .ticker {
    font-size: 80px;
}

.crash-text-container .middleInfo {
    font-size: 30px;
}

.crash-text-container .bottomInfo {
    font-size: 20px;
}

.crash-text-container .middle {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crash-text-container .bottom {
    position: absolute;
    left: 0px;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

@media (max-width: 1680px) {
    .crash-controls {
        height: auto;
    }

    .crash-controls ul {
        margin: 0px 0px 12px;
    }
}

@media (max-width: 800px) {
    .crash-controls {
        height: auto;
    }

    .crash-controls ul {
        margin: 0px 0px 10px;
    }
}

@media (max-width: 600px) {
    .crash-canvas-container {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .crash-canvas-container {
        height: 150px;
    }

    .crash-text-container .ticker {
        font-size: 40px;
    }

    .crash-text-container .middleInfo {
        font-size: 16px;
    }

    .crash-text-container .bottomInfo {
        font-size: 16px;
    }

    .rTable {
        display: block;
        width: 100%;
    }
    .rTable .tr {
        display: block;
        border: none;
    }
    .rTable .thead {
        display: block;
    }
    .rTable .tbody {
        display: block;
    }
    .rTable .tfooter {
        display: block;
    }
    .rTable .td,
    .rTable .th {
        display: inline-block;
        border: none !important;
    }
    .rTable .username {
        display: inline-block;
        width: 100px;
        overflow: hidden !important;
        height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

a#confettiButton {
    display: none;
    border-radius: 5px;
    position: absolute;
    z-index: 50;
    top: 90px;
    right: 10px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}

a#confettiButton .text {
    line-height: 30px;
    display: inline-block;
    height: 30px;
    margin-right: 5px;
    color: #4f4f5a;
}

a#confettiButton:hover .text {
    color: #6f6f70;
}

a#confettiButton .image {
    background-image: url(/static/images/confetti/confetti_button_white.png);
    background-size: contain;
    display: inline-block;
    width: 30px;
    height: 30px;
    opacity: 0.1;
    cursor: pointer;
    float: right;
}

a#confettiButton:hover {
    background: #333;
}

a#confettiButton:hover .image {
    opacity: 0.2;
}

a#confettiButton.active {
}

a#confettiButton.active .image {
    opacity: 1;
    background-image: url(/static/images/confetti/confetti_button_multi.png);
}

#interface-wrapper {
    /*z-index: 2;*/
}

#interface-wrapper #content-wrapper {
    background: transparent;
}

body.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}

.copy {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    font-family: "Futura", "Helvetica Neue", Helvetica;
    color: #333;
}
.copy h1 {
    margin: 0;
    color: white;
    letter-spacing: 1px;
    font-size: 7vmin;
    font-weight: 700;
}
.copy p {
    margin: 0;
}

#chat-logo img {
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -95px;
    background: transparent;
}

#chat-logo img.c {
    /*visibility: hidden;*/
}

#chat-logo.animate img.c {
    visibility: visible;
    animation-name: rotate;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#chat-logo.animate img.l {
    animation-name: fuzz;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.confetti-badge {
    z-index: 10000;
    position: absolute;
    padding: 5px;
    background: url("/static/images/confetti/confetti.png") no-repeat center center;
    overflow: hidden;
    z-index: 0;
}

.confetti-badge img {
    width: 100%;
    height: 100%;
    width: 24px;
    height: 24px;
    border-radius: 32px;
    border: 2px solid #c8354e;
}

.message.party {
    /* background: url('/static/images/confetti/confetti.png') no-repeat 0px 0px */
}

@keyframes fuzz {
    20% {
        transform: rotate(2deg);
    }
    40% {
        transform: rotate(-2deg);
    }
    60% {
        transform: rotate(2deg);
    }
    80% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

@media (max-width: 1144px) {
    #wheelLastBets {
        width: 240px;
    }
}
#wheelLastBets {
    margin-top: 10px;
    margin-left: -10px;
}
#wheelLastBets .header {
    margin-left: 5px;
    display: block;
    margin-bottom: 10px;
    color: #aaa;
}
@media (max-width: 1240px) {
    #wheelLastBets .bets {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-left: 10px;
    }
    #wheelLastBets .bets .last-bet {
        margin-bottom: 5px;
    }
}
@media (min-width: 1240px) {
    #wheelLastBets .bets {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
#wheelLastBets .bets .last-bet {
    text-align: center;
    background: #2c2c32;
    display: inline-block;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 5px;
    cursor: pointer;
    -webkit-transition: 200ms ease;
    -moz-transition: 200ms ease;
    -ms-transition: 200ms ease;
    -o-transition: 200ms ease;
    transition: 200ms ease;
}
#wheelLastBets .bets .last-bet.last-red {
    background: linear-gradient(to bottom, #1c1c22 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
    color: #c8354e;
}
#wheelLastBets .bets .last-bet.last-red:hover {
    background-position: left bottom;
    color: #26262c;
}
#wheelLastBets .bets .last-bet.last-grey {
    color: #666;
    background: linear-gradient(to bottom, #1c1c22 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
}
#wheelLastBets .bets .last-bet.last-grey:hover {
    background-position: left bottom;
    color: #26262c;
}
#wheelLastBets .bets .last-bet.last-blue {
    color: #45b5da;
    background: linear-gradient(to bottom, #1c1c22 50%, #45b5da 50%);
    background-size: 100% 200%;
    background-position: left top;
}
#wheelLastBets .bets .last-bet.last-blue:hover {
    background-position: left bottom;
    color: #26262c;
}
#wheelLastBets .bets .last-bet.last-gold {
    color: #ffc870;
    background: linear-gradient(to bottom, #1c1c22 50%, #ffc870 50%);
    background-size: 100% 200%;
    background-position: left top;
}
#wheelLastBets .bets .last-bet.last-gold:hover {
    background-position: left bottom;
    color: #26262c;
}

#previousbet-toggle {
    margin-top: 10px !important;
    color: #9e9e9f;
}

#previousbet-toggle.bet-button {
    margin: 0;
    padding: 0;
}

#previousbet-toggle-icon {
    line-height: 18px;
    vertical-align: -8px;
    margin-right: 5px;
}

i.nav-icon.sheet {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("/static/images/sidebar_sheet_v2.png?v=2223333");
    background-position-x: calc(-24px * 2);
    background-position-y: calc(-24px);
    transition: opacity 2s;
}

.nav-element.highlight i.nav-icon.sheet {
    background-position-x: calc(-24px * 8);
}

.nav-element:hover i.nav-icon.sheet,
.nav-element.active i.nav-icon.sheet {
    background-position-x: calc(-24px * 5);
}

.nav-icon.sheet.sheet-wheel {
    background-position-y: calc(-24px * 3);
}

.nav-icon.sheet.sheet-duels {
    background-position-y: calc(-24px * 5);
}

.nav-icon.sheet.sheet-account {
    background-position-y: calc(-24px * 7);
}

.nav-icon.sheet.sheet-inventory {
    background-position-y: calc(-24px * 9);
}

.nav-icon.sheet.sheet-shop {
    background-position-y: calc(-24px * 11);
}

.nav-icon.sheet.sheet-rewards {
    background-position-y: calc(-24px * 13);
}

.nav-icon.sheet.sheet-faq {
    background-position-y: calc(-24px * 15);
}

.nav-icon.sheet.sheet-crash {
    background-position-y: calc(-24px * 19);
}

.nav-icon.sheet.sheet-matchbet {
    background-position-y: calc(-24px * 23);
}
.nav-icon.sheet.sheet-leaderboards {
    background-position-y: calc(-24px * 21);
}

@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");

/*
Tipr 4.0.1
Copyright (c) 2018 Tipue
Tipr is released under the MIT License
http://www.tipue.com/tipr

Normal theme
*/

.tipr_content {
    font:
        11px "Source Code Pro",
        monospace;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #f1f1f1;
    padding: 7px 14px 8px 14px;
    border-radius: 3px;
}

.tipr_container_above,
.tipr_container_below {
    display: none;
    position: absolute;
    z-index: 1000;
}
.tipr_point_above,
.tipr_point_below {
    position: relative;
    background: #f1f1f1;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
}
.tipr_point_above:after,
.tipr_point_below:after {
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    border-width: 7px;
    left: 50%;
    margin-left: -7px;
}
.tipr_point_above:after {
    top: 100%;
    border-top-color: #f1f1f1;
}
.tipr_point_below:after {
    bottom: 100%;
    border-bottom-color: #f1f1f1;
}

#cryptoChooseAltcoins {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.crypto-choose {
    display: block;
    width: 300px;
    height: 100px;
    background: url("/static/images/shops/btc_shop.png") no-repeat;
    background-size: 250px;
    background-position: 20px 10px;
    border: 2px solid #c8354e;
    text-align: center;
    vertical-align: bottom;
    border-radius: 8px;
    margin-top: 10px;
    font: 0/0 a;
}

.crypto-choose.choose-altcoins {
    background-image: url("/static/images/shops/altcoin_shop.png");
    background-size: 280px;
    background-position: 10px 10px;
}

.coinswitch-coin-selector {
}

.csw-coin {
    display: inline-block;
    padding: 10px;
    text-align: center;
    background: #1c1c22;
    border: 2px solid #1c1c22;
    width: 150px;
    height: 100px;
    margin: 5px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.csw-coin .csw-logo {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0px auto;
}

.csw-coin .csw-name {
    display: block;
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: calc(100% - 10px);
    color: #c8354e;
}

.csw-coin:hover {
    background: #1c1c22;
    border: 2px solid #c32d4f;
}

.csw-coin:active {
    background: #c32d4f;
    border: 2px solid #c32d4f;
}

.csw-coin:active .csw-name {
    color: #fff;
}

.csw-coin:active img {
    -webkit-filter: drop-shadow(0px 0px 1px #ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#ffffff')";
    flter: drop-shadow(0px 0px 1px #ffffff);
}

.csw-preview-form {
}
.csw-preview-form h3 {
    color: #c8354e;
}

.csw-preview-form a {
    color: #c8354e;
    margin-top: 5px;
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.csw-preview-form h3 .csw-coin-logo {
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 35px;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #c8354e;
    background: #fff;
    padding: 0px;
    margin-top: -3px;
    position: relative;
}

.csw-preview-form h3 .csw-coin-logo img {
    width: 33px;
    text-align: center;
    margin: 0px auto;
    padding: 0px;
    position: absolute;
    left: -1px;
    top: -1px;
}

.csw-preview-form .custom-input-field {
    margin-top: 20px;
}

.csw-preview-form .custom-input-field p {
    margin: 10px 0px;
    color: #8a8aa2;
}

.csw-preview-form .custom-input-field label {
    color: #b0b0b1;
    font-size: 15px;
}

.csw-preview-info {
}

.csw-preview-info em {
    color: #ffc76f;
    font-style: normal;
    font-weight: 400;
    background: none !important;
}

.csw-preview-info em.red {
    color: #c8354e;
}

.coinswitch-spinner {
    width: 100%;
    text-align: center;
    margin: 20px;
    padding: 20px;
    border-radius: 8px;
}

.coinswitch-spinner .spinner-text {
    margin-bottom: 20px;
    color: #757586;
}

.coinswitch-spinner .spinner {
    border-color: #333;
    border-top-color: #c32d4f;
    width: 80px;
    height: 80px;
}

div#modal-csw-qr-code .modal-dialog {
    text-align: center;
}

@media (max-width: 480px) {
    .csw-coin {
        width: 100%;
        margin: 5px 0px;
    }
}
.voucher-selector {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    height: auto;
}

.voucher-card {
    height: 250px;
    width: 250px;
    display: flex;
    flex-flow: column nowrap;
    margin: 12.5px 25px;
}

.voucher-card > img {
    width: 100%;
    height: auto;
    transition: all 150ms ease-out;
}

.voucher-card:hover > img {
    transform: translateY(-1.5px);
    box-shadow: 0px 1.5px 1.5px rgba(0, 0, 0, 0.3);
}

.voucher-card > span {
    text-align: center;
    color: #ccc;
    font-weight: 500;
    padding: 0.5em;
    opacity: 0;
    transform: translateY(0);
    transition: all 150ms ease-out;
}

.voucher-card.voucher-red > span {
    color: hsl(350, 58%, 54%);
}

.voucher-card.voucher-blue > span {
    color: hsl(195, 68%, 64%);
}

.voucher-card.voucher-gold > span {
    color: hsl(37, 90%, 70%);
    text-shadow: 0 0 0.4125em hsla(37, 90%, 70%, 0.4);
}

.voucher-card:hover > span {
    transform: translateY(-3px);
    opacity: 1;
}

.voucher-card.hidden-flex-filler {
    visibility: hidden;
}
.grecaptcha-badge {
    margin-bottom: -100px;
    position: absolute;
    opacity: 0.5;
}

.modal-auth .auth-panel-login,
.modal-auth .auth-panel-register {
    display: none;
}

.modal-auth .modal-dialog {
    /* border-bottom: 4px solid #c8354e; */
    padding: unset;
}

.modal-auth .title {
    padding-top: 85px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin-bottom: 60px;
    z-index: 2;
}

.modal-auth .title-text {
    width: 120px;
    justify-content: center;
    cursor: pointer;
    margin: 0 25px;
    text-transform: uppercase;
    transition: transform 0.4s ease-in-out;
}

.modal-auth .title-text:hover {
    color: #c8354e;
}

.modal-auth .title-text-disabled {
    opacity: 0.7;
    cursor: not-allowed !important;
    touch-action: none !important;
    pointer-events: none !important;
}

.modal-auth .title-text-selected {
    color: #c8354e;
    transform: scale(1.1);
}

.modal-auth .title-text-selected span {
    border-bottom: 1px solid #c8354e;
}

.modal-auth .auth-loginscreen,
.modal-auth .auth-registerscreen {
    z-index: 100;
}

.modal-auth .title-text-login {
    text-align: right;
}

.modal-auth .title-text-register {
    text-align: left;
}

.modal-auth .social-login {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-auth .social-login > * {
    margin: 0 20px;
}

.modal-auth .social-login img {
    height: 60px;
    width: auto;
}

.social-login .disabled img {
    opacity: 0.33;
    cursor: wait;
}

.modal-auth .input-container {
    max-width: 420px;
    margin: 45px auto 0 auto;
}

.modal-auth .input-container input {
    margin: 0 -10px;
}

.modal-auth .input-container input {
    width: 100%;
}

.modal-auth .input-container .input-username,
.modal-auth .input-container .input-password {
    margin: 20px 0;
}

.modal-auth .input-container .input-submit {
    margin-top: 30px;
}

.modal-auth .input-container button {
    max-width: 200px !important;
    margin: 0 auto;
}

.modal-auth .or {
    font-size: 12px;
    color: #627075;
}

.modal-auth .modal-login-or {
    text-align: center;
    margin-top: 15px;
    /* max-width: 420px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-auth .modal-login-or p {
    text-align: center;
    margin: 0 5px !important;
}

.modal-auth .modal-login-or:before,
.modal-auth .modal-login-or:after {
    content: "";
    background: #627075;
    width: 100%;
    height: 1px;
    max-width: 210px;
}

.modal-auth .recover-password-container {
    text-align: center;
    margin-top: 20px;
}

.modal-auth .login-info-text {
    max-width: 420px;
    color: #627075;
    text-align: center;
    margin: 20px auto 0 auto;
}

.register-agree {
    margin-top: 20px;
}

.modal-auth .register-agree label {
    color: #627075 !important;
    font-size: 12px;
    line-height: 16px;
}

.modal-auth .recover-password {
    color: #627075;
    letter-spacing: 1px;
    font-weight: 700;
}

.modal-auth .recover-password:hover {
    color: #c8354e;
}

.modal-auth p.auth-info {
    color: #fff !important;
    font-size: 14px;

    padding: 10px;
    border: 1px solid #31313a;
    background: #18181d;
    margin-bottom: 20px !important;
}

.modal-auth .col {
    padding-left: 0px;
    padding-right: 0px;
}

.modal-auth .ffname {
    display: none;
}

.modal-auth .auth-panel-register .register-container,
.modal-auth .recover-panel {
    max-width: 420px !important;
    margin: 0 auto;
}

.modal-auth .auth-panel-waves svg {
    display: flex;
}

.modal-auth .register-password {
    margin-top: 40px;
}

.modal-auth .register-password p {
    margin-top: unset !important;
    font-size: 10px;
    color: #8b8b9c !important;
}

.modal-auth .register-password2 {
    margin-top: 20px;
}

.modal-auth .register-submit {
    margin-top: 40px;
    text-align: center;
}

.modal-auth .register-submit button {
    max-width: 200px;
    margin: 0 auto;
}

div.modal-auth .btn-toolbar {
    width: 100%;
    height: 40px;
    display: block;
    font-size: 14px;
}

div.modal-auth label {
    font-size: 14px;
    color: #8b8b9c;
}

div.modal-auth .cform input[type="text"],
div.modal-auth .cform input[type="password"] {
    margin-top: 5px;
    margin-bottom: 3px;
    background: #202026 !important;
    border: 1px solid #627075;
    height: 45px;
}

div.modal-auth .cform input:-webkit-autofill,
div.modal-auth .cform input:-webkit-autofill:hover,
div.modal-auth .cform input:-webkit-autofill:focus,
div.modal-auth .cform input:-webkit-autofill:active,
div.modal-auth .cform input:-internal-autofill-selected {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out" !important;
    transition:
        color 9999s ease-out,
        background-color 9999s ease-out !important;
    -webkit-transition-delay: 9999s !important;
    transition-delay: 9999s !important;
    font-size: 12px;
}

div.modal-auth .cform p {
    margin-top: 10px;
    margin-bottom: 3px;
    color: #627075;
}

div.modal-auth .cform input.valid-fail {
    border: 2px solid #c8354e !important;
}

div.modal-auth .cform input.valid-ok {
    border: 2px solid #37af59 !important;
}

.modal-auth .recover-submit-container {
    margin-top: 20px;
}

.modal-auth .recover-submit-container button {
    margin: 0 auto;
    padding: 0 15px;
    width: unset;
}

.modal-auth .modal-logo {
    position: absolute;
    height: 150px;
    width: 150px;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    background: #26262c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-auth .modal-logo img {
    max-width: 140%;
    height: auto;
}

.modal-auth .modal-dialog {
    margin: 100px auto 0 auto;
}

#modal-recoverpass-screen {
    z-index: 100001;
}

#modal-recoverpass-screen .modal-dialog {
    padding: 20px;
}

p.login-existing-user {
    text-align: center;
    font-size: 14px;
    color: #ccc !important;
}

p.login-existing-user i {
    vertical-align: middle;
    color: #ffc76f;
    font-size: 18px;
}

.btn-social-login {
    display: inline-block;
    background-color: #c32d4f;
    color: #fff;
    width: 120px;
    height: 50px;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    font: 0/0 a;
    text-indent: -10000px;
    overflow: hidden;
    border-radius: 5px;
}

.btn-social-login.disabled,
.btn-social-login.disabled:hover {
    background-color: #6b6b7b !important;
    opacity: 0.3;
    cursor: wait;
}

.btn-login-google {
    background-image: url("/static/images/login_google.png");
    background-color: #fff;
    border-bottom: 2px solid #ddd;
}

.btn-login-steam {
    background-image: url(/static/images/login_steam.png);
    background-color: #171a21;
    border-bottom: 2px solid #111319;
}

.btn-login-facebook {
    background-image: url("/static/images/login_facebook.png");
    background-color: #3b5998;
    border-bottom: 2px solid #324a7d;
}

@media (max-width: 800px) {
    .modal-auth .text-right {
        text-align: center !important;
        margin-top: 15px;
    }

    .modal-auth .social-login {
        display: block;
    }

    .btn-social-login {
        width: calc(100% - 10px);
        margin-bottom: 5px;
    }
}

@media (max-width: 1200px) {
    .modal-auth .text-right {
        margin-top: 15px;
    }
}

@media (max-width: 450px) {
    .auth-panel-register input {
        width: 100%;
        margin-left: -10px;
        margin-right: -10px;
    }

    .auth-panel-login,
    .auth-panel-register {
        padding: 0 10px !important;
    }

    .input-container,
    .register-container {
        padding: 0 10px;
    }
}

@media (max-width: 350px) {
    .modal-auth .title-text {
        width: unset;
    }
}
.vip-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding-left: 10px;
}

.vip-top {
    position: relative;
    z-index: 1;
    overflow: hidden;

    border-top: 2px solid #c8354e;
    width: 100%;
    background: #1f1f25;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    min-height: 12rem;
    padding: 2rem 0;

    background: #1f1f25;
}

.vip-waves {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -8px;
    left: 0;

    fill: hsl(240, 9%, 12%);
}

.vip-waves svg path {
    fill: inherit;
}

.vip-top-content {
    color: #c8354e;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 50%;
    padding: 2rem 0;
}

.vip-top-banner {
    font-size: 24px;
    font-weight: 500;
    display: flex;
    flex-flow: column wrap;
}

.vip-top-banner p {
    color: #aaa;
    margin: 0;
    padding: 1rem 0;
    font-size: 16px;
    font-weight: normal;
    word-break: normal;
    text-align: center;
}

.vip-top-progress {
    flex: 1;

    display: flex;
    flex-flow: row wrap;
    background: none;
    align-items: center;

    /* there's a lot of absolutely positioned elements in here */
    /* so we have to adjust the spacing a little */
    margin-top: -1rem;
    margin-bottom: 1rem;
}

.vip-top-progress > h5 {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: hsl(0, 0%, 50%);
}

.vip-top-content-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 1.65em;
    width: 1.65em;
    font-weight: bold;
}

.vip-top-content-middle:before,
.vip-top-content-middle:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.vip-top-content-middle:before {
    top: -25px;
    right: -25px;
    bottom: -25px;
    left: -25px;
    border: 0.4125em solid #522632;
    z-index: 1;
}

.vip-top-content-middle:after {
    top: -28px;
    right: -28px;
    bottom: -28px;
    left: -28px;
    border: 0.125em solid #c8354e;
    z-index: 1;
}

/* Gems */

.vip-gem {
    background-repeat: no-repeat;
}

.vip-gem[data-rank="0"] {
    /* Unranked */
    background-image: url("/static/images/vip/gem/Unranked.svg");
    color: #fff;
    opacity: 0.35;
}
.vip-gem[data-rank="1"] {
    /* Silver */
    background-image: url("/static/images/vip/gem/Silver.svg");
    color: hsl(0, 0%, 75%);
}
.vip-gem[data-rank="2"] {
    /* Gold */
    background-image: url("/static/images/vip/gem/Gold.svg");
    color: hsl(37, 100%, 72%);
}
.vip-gem[data-rank="3"] {
    /* Sapphire */
    background-image: url("/static/images/vip/gem/Sapphire.svg");
    color: hsl(256, 42%, 50%);
}
.vip-gem[data-rank="4"] {
    /* Emerald */
    background-image: url("/static/images/vip/gem/Emerald.svg");
    color: hsl(110, 43%, 49%);
}
.vip-gem[data-rank="5"] {
    /* Ruby */
    background-image: url("/static/images/vip/gem/Ruby.svg");
    color: hsl(344, 64%, 47%);
}
.vip-gem[data-rank="6"] {
    /* Diamond */
    background-image: url("/static/images/vip/gem/Diamond.svg");
    color: hsl(201, 66%, 54%);
}

.vip-gem[data-rank="7"] {
    /* Diamond */
    background-image: url("/static/images/vip/gem/Pearl2.svg");
    color: hsl(180deg, 30%, 75%);
}

.vip-gem[data-rank="8"] {
    /* Diamond */
    background-image: url("/static/images/vip/gem/Obsidian2.svg");
    color: hsl(239deg, 31%, 57%);
}
.vip-gem[data-rank="9"] {
    /* Diamond */
    background-image: url("/static/images/vip/gem/Opal3.svg");
    color: hsl(333deg, 62%, 50%);
    margin-left: 10px;
}

.vip-gem[data-rank="10"] {
    /* Diamond */
    background-image: url("/static/images/vip/gem/Opal3.svg");
    color: hsl(333deg, 62%, 50%);
}

/* Progress Bar */
.vip-progress {
    border-radius: 4px;
    flex: 1;
    position: relative;
    height: 1.75rem;
}

.vip-progress .progress {
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: relative;
    overflow: visible;
}

.vip-progress .progress .determinate {
    opacity: 0;
    border-radius: inherit;

    transition:
        opacity 100ms,
        width 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.vip-progress .progress-tooltip {
    position: absolute;
    left: 0;
    bottom: -3.5em;
    opacity: 0;
    transition:
        opacity 100ms,
        left 2s cubic-bezier(0.25, 1, 0.5, 1);

    padding: 0.5em 1em;
    background: hsl(240, 10%, 9%);
    border-radius: 4px;

    color: #ccc;
    font-size: 13px;
    font-family: "Roboto", sans-serif;

    z-index: 10;
    white-space: nowrap;
}

.vip-progress .progress-tooltip:before {
    content: "";
    height: 0;
    width: 0;
    border-bottom: 8px solid hsl(240, 10%, 9%);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    position: absolute;
    left: calc(50% - 8px);
    top: -8px;
}

/* Progress Bar Background */
.vip-progress[data-rank="0"] .progress .determinate {
    /* Unranked */
    background-color: hsl(240, 3%, 37%);
}
.vip-progress[data-rank="1"] .progress .determinate {
    /* Silver */
    background-color: hsl(0, 0%, 75%);
    background: linear-gradient(to right, hsl(240, 4%, 70%), hsl(0, 0%, 74%));
}
.vip-progress[data-rank="2"] .progress .determinate {
    /* Gold */
    background-color: hsl(37, 100%, 72%);
    background: linear-gradient(to right, hsl(37, 100%, 72%), hsl(38, 94%, 61.5%));
}
.vip-progress[data-rank="3"] .progress .determinate {
    /* Sapphire */
    background-color: hsl(256, 42%, 50%);
    background: linear-gradient(to right, hsl(256, 49%, 50%), hsl(256, 42%, 52.5%));
}
.vip-progress[data-rank="4"] .progress .determinate {
    /* Emerald */
    background-color: hsl(110, 43%, 49%);
    background: linear-gradient(to right, hsl(110, 49%, 48%), hsl(110, 44%, 51.5%));
}
.vip-progress[data-rank="5"] .progress .determinate {
    /* Ruby */
    background-color: hsl(344, 64%, 47%);
    background: linear-gradient(to right, hsl(344, 64%, 46%), hsl(344, 64%, 50%));
}
.vip-progress[data-rank="6"] .progress .determinate {
    /* Diamond */
    background-color: hsl(201, 66%, 54%);
    background: linear-gradient(to right, hsl(201, 68%, 52%), hsl(201, 66%, 57%));
}

.vip-progress[data-rank="7"] .progress .determinate {
    /* Diamond */
    background-color: hsl(181deg 92% 72%);
    background: linear-gradient(to right, hsl(181deg 49% 55%), hsl(181deg 87% 57%));
}

.vip-progress[data-rank="8"] .progress .determinate {
    /* Diamond */
    background-color: hsl(14deg 100% 74%);
    background: linear-gradient(to right, hsl(8deg 83% 55%), hsl(13deg 78% 58%));
}

.vip-progress[data-rank="8"] .progress .determinate {
    /* Diamond */
    background-color: hsl(239deg 36% 37%);
    background: linear-gradient(to right, hsl(239deg 36% 37%), hsl(239deg 35% 46%));
}

.vip-progress[data-rank="9"] .progress .determinate {
    /* Diamond */
    background-color: hsl(333deg 62% 50%);
    background: linear-gradient(to right, hsl(333deg 65% 50%), hsl(333deg 92% 63%));
}

/* Progress Bar Gems */
.vip-top-progress .vip-gem {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 1.5rem;
    position: relative;
}

.vip-top-progress .vip-gem:before {
    position: absolute;
    /**
     * hack to get centered text
     * if the text grows larger than 200% of the .vip-gem element,
     * this will not be correctly centered anymore
     **/
    width: 200%;
    left: -50%;
    text-align: center;

    bottom: -2em;
    color: inherit;
    font-size: 13px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}

.vip-top-progress .vip-gem[data-rank="0"]:before {
    content: "Unranked";
}
.vip-top-progress .vip-gem[data-rank="1"]:before {
    content: "Silver";
}
.vip-top-progress .vip-gem[data-rank="2"]:before {
    content: "Gold";
}
.vip-top-progress .vip-gem[data-rank="3"]:before {
    content: "Sapphire";
}
.vip-top-progress .vip-gem[data-rank="4"]:before {
    content: "Emerald";
}
.vip-top-progress .vip-gem[data-rank="5"]:before {
    content: "Ruby";
}
.vip-top-progress .vip-gem[data-rank="6"]:before {
    content: "Diamond";
}
.vip-top-progress .vip-gem[data-rank="7"]:before {
    content: "Pearl";
}
.vip-top-progress .vip-gem[data-rank="8"]:before {
    content: "Obsidian";
}
.vip-top-progress .vip-gem[data-rank="9"]:before {
    content: "Opal";
}

/* Info */
.vip-info {
    width: 100%;
    padding: 2rem;
    background: #1f1f25;
    margin-top: 2rem;
    border-radius: 4px;

    display: flex;
    flex-flow: row wrap;
}

/* Info Rank Select */
.vip-info .vip-rank-select {
    width: 25%;
}

.vip-info .vip-rank-select-option {
    padding: 1.375rem 2rem;
    background-repeat: no-repeat;
    background-size: 4rem;
    background-position: 3rem 50%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background-color: hsl(240, 10%, 12%);
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;

    transition: background 75ms;
}

.vip-info .vip-rank-select-option:hover {
    background: hsl(240, 10%, 9.5%);
}

.vip-info .vip-rank-select-option:not(:last-child) {
    margin-bottom: 1rem;
}

.vip-info .vip-rank-select-option .text h3 {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

.vip-info .vip-rank-select-option .text .level-info {
    font-size: 13px;
    color: #a0a0a0;
}

.vip-info .vip-rank-select-option .vip-gem {
    width: 2.75rem;
    height: 2.75rem;
    margin-right: 2rem;
    position: relative;
}

.vip-info .vip-rank-select-option .vip-gem:after {
    content: "";
    position: absolute;
    width: 165%;
    height: 165%;
    background: hsla(0, 0%, 70%, 0.04);
    top: -32.5%; /*   -1 * (height - 100%) * 0.5   */
    left: -32.5%; /*   -1 * (width  - 100%) * 0.5   */
    border-radius: 50%;
}

/* Giant Wall of Color Variables */
/* I know this isn't exactly readable but these definitions have to go somewhere ¯\_(ツ)_/¯ */

/* Select Option Color */
.vip-info .vip-rank-select-option[data-rank="1"] h3 {
    color: hsl(0, 0%, 73%);
}
.vip-info .vip-rank-select-option[data-rank="2"] h3 {
    color: hsl(37, 100%, 72%);
}
.vip-info .vip-rank-select-option[data-rank="3"] h3 {
    color: hsl(255, 86%, 78%);
}
.vip-info .vip-rank-select-option[data-rank="4"] h3 {
    color: hsl(90, 70%, 62%);
}
.vip-info .vip-rank-select-option[data-rank="5"] h3 {
    color: hsl(350, 78%, 70%);
}
.vip-info .vip-rank-select-option[data-rank="6"] h3 {
    color: hsl(201, 94%, 74%);
}
.vip-info .vip-rank-select-option[data-rank="7"] h3 {
    color: rgb(195, 247, 244);
}
.vip-info .vip-rank-select-option[data-rank="8"] h3 {
    color: hsl(233deg, 39%, 55%);
}
.vip-info .vip-rank-select-option[data-rank="9"] h3 {
    color: hsl(327deg, 57%, 57%);
}
.vip-info .vip-rank-select-option[data-rank="10"] h3 {
    color: hsl(327deg, 57%, 57%);
}

/* Border Color for Selected Option */
.vip-info .vip-rank-select-option[data-rank="1"].selected {
    background: hsla(0, 0%, 49%, 0.05);
    border-color: hsl(0, 0%, 73%);
}
.vip-info .vip-rank-select-option[data-rank="2"].selected {
    background: hsla(37, 40%, 22%, 0.05);
    border-color: hsl(37, 100%, 72%);
}
.vip-info .vip-rank-select-option[data-rank="3"].selected {
    background: hsla(255, 86%, 48%, 0.05);
    border-color: hsl(255, 86%, 78%);
}
.vip-info .vip-rank-select-option[data-rank="4"].selected {
    background: hsla(90, 70%, 32%, 0.05);
    border-color: hsl(90, 70%, 62%);
}
.vip-info .vip-rank-select-option[data-rank="5"].selected {
    background: hsla(350, 78%, 40%, 0.05);
    border-color: hsl(350, 78%, 70%);
}
.vip-info .vip-rank-select-option[data-rank="6"].selected {
    background: hsla(201, 94%, 44%, 0.05);
    border-color: hsl(201, 94%, 74%);
}
.vip-info .vip-rank-select-option[data-rank="7"].selected {
    background: hsla(175deg, 94%, 44%, 0.05);
    border-color: hsl(175deg, 94%, 44%);
}
.vip-info .vip-rank-select-option[data-rank="8"].selected {
    background: hsla(13deg, 78%, 58%, 0.05);
    border-color: hsl(8deg, 83%, 59%);
}
.vip-info .vip-rank-select-option[data-rank="8"].selected {
    background: hsla(239deg, 31%, 57%, 0.05);
    border-color: hsl(239deg, 31%, 57%);
}
.vip-info .vip-rank-select-option[data-rank="9"].selected {
    background: hsla(334deg, 79%, 53%, 0.05);
    border-color: hsl(327deg, 57%, 57%);
}
.vip-info .vip-rank-select-option[data-rank="10"].selected {
    background: hsla(334deg, 79%, 53%, 0.05);
    border-color: hsl(327deg, 57%, 57%);
}

/* Glow for Gems on Hover */
.vip-info .vip-rank-select-option[data-rank="1"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="1"].selected .vip-gem {
    filter: drop-shadow(0 0 4px hsla(0, 0%, 59%, 0.7));
}
.vip-info .vip-rank-select-option[data-rank="2"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="2"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(38, 100%, 43%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="3"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="3"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(255, 86%, 68%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="4"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="4"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(90, 70%, 52%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="5"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="5"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(350, 78%, 60%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="6"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="6"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(201, 94%, 64%, 0.6));
}

.vip-info .vip-rank-select-option[data-rank="7"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="7"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(201, 94%, 64%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="8"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="8"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(8deg, 83%, 59%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="8"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="8"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(238deg, 38%, 41%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="9"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="9"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(334deg, 79%, 53%, 0.6));
}
.vip-info .vip-rank-select-option[data-rank="10"]:hover .vip-gem,
.vip-info .vip-rank-select-option[data-rank="10"].selected .vip-gem {
    filter: drop-shadow(0 0 6px hsla(334deg, 79%, 53%, 0.6));
}

/* Info Perks */
.vip-info .vip-perks {
    flex: 1;

    display: flex;
    flex-flow: row wrap;

    /* Bad layout hack to make this work with flexbox */
    /* This should be using CSS Grid instead */
    padding: 0;
    margin: 0;
    margin-top: -0.5rem;
    margin-left: 1rem;
    margin-right: -0.5rem;
    margin-bottom: -1rem;

    align-content: flex-start;
}

.vip-perks .vip-perk {
    display: none;

    flex-flow: column nowrap;

    background: hsl(240, 7%, 11%);
    border-radius: 4px;

    width: calc((100% / 3) - 1rem);
    margin: 0.5rem;

    animation: vip-perk-fade-up 300ms;

    transition: color 150ms;
}

@keyframes vip-perk-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vip-container[data-rank="1"] .vip-perks > .vip-perk.rank-1 {
    display: flex;
    color: hsl(0, 0%, 73%);
}
.vip-container[data-rank="2"] .vip-perks > .vip-perk.rank-2 {
    display: flex;
    color: hsl(37, 100%, 72%);
}
.vip-container[data-rank="3"] .vip-perks > .vip-perk.rank-3 {
    display: flex;
    color: hsl(255, 86%, 78%);
}
.vip-container[data-rank="4"] .vip-perks > .vip-perk.rank-4 {
    display: flex;
    color: hsl(90, 70%, 62%);
}
.vip-container[data-rank="5"] .vip-perks > .vip-perk.rank-5 {
    display: flex;
    color: hsl(350, 78%, 70%);
}
.vip-container[data-rank="6"] .vip-perks > .vip-perk.rank-6 {
    display: flex;
    color: hsl(201, 94%, 74%);
}
.vip-container[data-rank="7"] .vip-perks > .vip-perk.rank-7 {
    display: flex;
    color: hsl(180deg, 30%, 75%);
}
.vip-container[data-rank="8"] .vip-perks > .vip-perk.rank-8 {
    display: flex;
    color: hsl(8deg, 83%, 55%);
}
.vip-container[data-rank="8"] .vip-perks > .vip-perk.rank-9 {
    display: flex;
    color: hsl(239deg, 31%, 57%);
}
.vip-container[data-rank="9"] .vip-perks > .vip-perk.rank-10 {
    display: flex;
    color: hsl(333deg, 62%, 50%);
}
.vip-container[data-rank="10"] .vip-perks > .vip-perk.rank-11 {
    display: flex;
    color: hsl(333deg, 62%, 50%);
}

.vip-perk > .perk-icon {
    border-radius: 4px;
    height: 6rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: hsl(240, 6%, 10%);
}

.vip-perk > .perk-icon svg {
    height: 3.5rem;
    width: auto;
    transition: fill 150ms;
}

.vip-perk > .perk-text {
    padding: 2rem;
}

.vip-perk > .perk-text > h5,
.vip-perk > .perk-text > p {
    margin: 0;
}

.vip-perk > .perk-text > h5 {
    margin-bottom: 1rem;
    word-break: normal;
    line-height: 1.35;
    text-align: center;
}

.vip-perk > .perk-text > p {
    color: #ccc;
    margin-bottom: 1.35em;
}

.vip-container[data-rank="1"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(0, 0%, 73%);
}
.vip-container[data-rank="2"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(37, 100%, 72%);
}
.vip-container[data-rank="3"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(255, 86%, 78%);
}
.vip-container[data-rank="4"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(90, 70%, 62%);
}
.vip-container[data-rank="5"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(350, 78%, 70%);
}
.vip-container[data-rank="6"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(201, 94%, 74%);
}
.vip-container[data-rank="7"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(180deg, 30%, 75%);
}
.vip-container[data-rank="8"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(239deg, 31%, 57%);
}
.vip-container[data-rank="9"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(333deg, 62%, 50%);
}
.vip-container[data-rank="10"] .vip-perks > .vip-perk > .perk-icon > svg {
    fill: hsl(333deg, 62%, 50%);
}

/* Media Queries */
@media (max-width: 1450px) {
    .vip-top {
        padding: 4rem;
    }
    .vip-top-content {
        width: calc(100% * 2 / 3);
    }
}

@media (max-width: 1260px) {
    .vip-container {
        margin: 30px auto 0 auto;
        padding-left: 0;
    }

    .vip-top-content {
        width: 75%;
    }

    .vip-top-progress {
        padding-left: 0;
        padding-right: 0;
    }

    .vip-info {
        flex-flow: column wrap;
    }

    .vip-rank-select {
        flex-flow: column wrap;
        width: 100% !important;
    }

    .vip-perks {
        margin-left: -0.5rem !important;
        margin-top: 1rem !important;
    }
}

@media (max-width: 760px) {
    .vip-top {
        padding: 0 1rem;
    }

    .vip-top-content {
        width: 100%;
        border-radius: 0;
        font-size: 28px;
    }

    .vip-top-banner h3 {
        font-size: 100%;
    }

    .vip-top-content-middle:before,
    .vip-top-content-middle:after {
        display: none;
    }

    .vip-perks .vip-perk {
        width: 100%;
    }
}
.content-inner {
    margin-top: 50px;
}

.content-inner {
    margin-top: 80px;
    position: relative;
}

#site-activity,
.site-activity-loading {
    margin-top: -10px;
    display: block;
    height: 70px !important;
    margin-top: 0px;
    width: calc(100% - 520px);
    position: relative;
}

#site-activity {
    visibility: hidden;
}

.activity-item-loading-placeholder {
    display: inline-block;
    padding: 2px 20px;
    height: 60px;
    width: 300px;
    /* background:#2c2c32; */
    /* border:1px solid #343442; */
    margin-right: 10px !important;
    margin-left: 10px !important;
    /* box-shadow:1px 2px 0 #18181d; */
    font-family:
        open sans,
        Helvetica,
        Arial,
        sans-serif;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    border-bottom: 1px groove #c8354e;
    animation: 1.5s loading-placeholder ease infinite;
    background: #1c1c22 url("/static/images/activtiy-placeholder-bg.png") no-repeat center !important;
}

#site-activity.active {
    visibility: visible;
}

#site-activity .activity-title {
    /* position: absolute; */
    font-size: 11px;
    color: #878794;
    text-align: center;
}

#site-activity .activity-left,
#site-activity .activity-right {
    display: inline-block;
}

#site-activity .activity-items,
.site-activity-loading .activity-items-loading {
    display: inline-block;
    width: 100%;
    overflow-y: hidden;
    height: 70px;
    overflow-x: scroll;
    white-space: nowrap;
    margin: 0px;
    padding: 5px 0px 0px 10px;
    margin-left: 0px;
}

#site-activity .toggle {
    color: #a0a0a0;
    position: absolute;
    right: 12px;
    top: 12px;
    height: 46px;
    width: 46px;
    padding: 12px;
    background: transparent;
    padding: 0;
    border: none;
    outline: none;
    z-index: 1000;
    transition:
        transform 100ms,
        color 100ms;
    background: #26262c;
    border-radius: 4px;
}

#site-activity .toggle:hover {
    color: white;
}

#site-activity.hidden {
    pointer-events: none;
}

#site-activity.hidden .toggle {
    pointer-events: all;
}

#site-activity .toggle > i {
    transition: transform 300ms;
}

#site-activity.hidden .toggle > i {
    transform: rotate(180deg);
}

@media (min-width: 1240px) {
    #site-activity:not(.hidden) .activity-items:after,
    .site-activity-loading .activtiy-items-loading:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        background: linear-gradient(to right, #26262c00 80%, #26262c 95%);
    }
}

#site-activity .activity-item {
    display: inline-block;
    padding: 2px 20px;
    height: 60px;
    /* width: 300px; */
    /* background:#2c2c32; */
    /* border:1px solid #343442; */
    margin-right: 10px !important;
    margin-left: 10px !important;
    /* box-shadow:1px 2px 0 #18181d; */
    font-family:
        open sans,
        Helvetica,
        Arial,
        sans-serif;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    border-bottom: 1px groove #c8354e;
}

#site-activity .activity-gold {
    border-color: #ffc76f;
}

#site-activity .activity-item-container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#site-activity .activity-item .activity-purchased-item {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
}

#site-activity .activity-item.animate {
    animation: activity-in 0.5s ease;
}

@keyframes activity-in {
    from {
        opacity: 0;
    }
}

#site-activity .activity-item .user-name {
    font-weight: 600;
    color: #858598;
    position: static;
    display: inline-block;
    vertical-align: text-top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
}

#top-bar .btn-profile {
    width: 40px;
    background-size: cover;
    border-radius: 50%;
}

.tb-balance > img {
    height: 20px;
    vertical-align: middle;
    display: inline-block !important;
    border-radius: 4px;
    margin-right: 6px;
}

.tb-balance span.caret,
.tb-balance .select-wrapper input.select-dropdown,
.tb-balance ul,
.tb-balance ul li {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

.tb-balance .select-wrapper input.select-dropdown {
    text-align: center;
}

.tb-balance .dropdown-content {
    min-width: 200px;
}

.tb-balance ul li {
    padding: 0px;
    min-height: 30px !important;
    line-height: 1em;
    background: hsl(240, 10%, 14.5%) !important;
}

.tb-balance ul li:hover,
.tb-balance ul li.selected {
    background-color: hsl(240, 10%, 17%) !important;
}

.tb-balance ul li span {
    color: #c8354e;
    font-size: 14px;
    font-weight: 600;
    padding-right: 0;
}

.tb-balance ul li.disabled > span {
    color: rgba(255, 255, 255, 0.5);
    background: hsl(240, 10%, 14.5%);
    cursor: default;
}

.tb-balance ul li img {
    height: auto !important;
    max-height: 50px !important;
    width: 60px !important;
    vertical-align: middle;
    margin: 16px 16px 0 0 !important;
    /* margin-top: 17px; */
    display: inline-block !important;
    /* border-radius: 4px; */
}

.tb-balance span.caret {
    font-size: 10px !important;
    z-index: 1;
    right: 6px;
}

.tb-balance .select-wrapper input.select-dropdown {
    border: none;
    box-shadow: none;
    padding: 0 16px;
    height: 40px;
    margin-bottom: 0;
    max-width: 110px;
    border: 1px solid #353535;
    background: #212123;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.tb-balance {
    margin-right: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s linear;
    min-width: 165px;
    color: #c32d4f;
    padding: 0 16px;
    height: 38px;
    font-size: 16px;
    font-weight: 500;
}

.tb-balance .balance-text-icon,
.tb-balance .balance-text-icon-usd {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 0 1rem;
    background: #c32d4f;
    height: 42px;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    min-width: 110px;
}

.tb-balance .balance-icon-svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

.tb-balance .balance-icon-svg img {
    max-height: 16px;
    width: auto;
}

.tb-balance .balance-text-icon-usd {
    display: none !important;
}

.tb-balance.usd .balance-text-icon-usd {
    display: flex !important;
}

.tb-balance.usd .balance-text-icon {
    display: none !important;
}

.balance-select {
    /* min-width: 200px; */
}

.tb-balance .usd-balance {
    display: none;
}

.tb-balance.usd img,
.tb-balance.usd .user-balance {
    /* display: none; */
}

.tb-balance.usd .usd-balance {
    display: block;
    color: #c8354e;
    font-size: 16px;
    font-weight: 500;
}

.tb-need-to-bet {
    margin-right: 12px;
    border: 1px solid #353535;
    background: #212123;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s linear;
    min-width: 100px;
    color: #c32d4f;
    padding: 0 16px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.tb-need-to-bet-amount {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tb-need-to-bet-info,
.tb-need-to-bet-claim-info {
    margin-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tb-need-to-bet-info .material-icons,
.tb-need-to-bet-claim-info .material-icons {
    font-size: 20px;
}

.tb-need-to-bet .tb-need-to-bet-claim {
    display: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.tb-need-to-bet-claim button {
    background: #c32d4f;
    border-color: #c32d4f;
    border-bottom-color: #b32b4a;
    font-size: 15px;
    padding: 5px 10px;
    height: 40px;
    width: 100%;
}

.tb-need-to-bet-claim button:hover {
    background: #c32d4f;
    border-color: #c32d4f;
    border-bottom-color: #b32b4a;
    opacity: 0.8;
}

.tb-need-to-bet.zero {
    padding: 0;
    border: none !important;
    background: none !important;
}

.tb-need-to-bet.zero .tb-need-to-bet-claim {
    display: flex;
}

.tb-need-to-bet.zero .tb-need-to-bet-amount {
    display: none;
}

#site-activity .activity-item .user-value {
    font-weight: 600;
    color: #858598;
}

#site-activity .activity-item .user-avatar {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    overflow: hidden;
    border-radius: 20px;
    background-color: #000;
    vertical-align: middle;
}

#site-activity .activity-item .user-avatar img {
    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;
}

#site-activity .item-name {
    font-size: 11px;
    position: unset;
    color: #606073;
    padding: 0px;
    text-align: center;
    padding-top: 5px;
    white-space: normal;
}

#site-activity .item-name .BUX {
    font-size: 11px;
}

#site-activity .item-image {
    /* position: absolute; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    top: 11px;
    right: -5px;
    width: 90px;
    text-align: center;
}

#site-activity .item-image svg {
    height: 32px;
    width: auto;
}

#site-activity .item-image svg path {
    fill: #c32d4f;
}

#site-activity .item-image img {
    max-height: 90%;
    margin-top: 0px;
    margin-left: 20px;
}

#site-activity .activity-matchbetting .item-image img {
    max-width: 100% !important;
    max-height: 95%;
}

#site-activity .item-image img.btc {
    width: 50%;
    max-width: 40px;
}

#site-activity .bet-bubble {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

#site-activity .bet-bubble:after {
    content: "";
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
}

#site-activity .bet-bubble.green {
    border: 2px solid #26262c;
    background: #1c1c22 !important;
    color: #298443;
}

#site-activity span.BUX {
    color: #606073;
    font-size: 15px;
}

/* #site-activity .activity-item.activity-matchbetting .item-image img {
  max-height: 40px;
  width: auto !Important;
} */

#site-activity .wheel-bet-bubble {
    display: inline-block !important;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

#site-activity .wheel-bet-bubble.gray {
    background: #404040 !important;
    color: #847e7e;
}

#site-activity .wheel-bet-bubble.red {
    background: #611e29 !important;
    color: #c32d4f;
}

#site-activity .wheel-bet-bubble.blue {
    background: #113946 !important;
    color: #287b96;
}

#site-activity .wheel-bet-bubble.gold {
    background: #5d4a2c !important;
    color: #ffc870;
}

#site-activity .wheel-bet-bubble.green {
    background: #33b349 !important;
    color: white;
}

/* Gameshop activity items */
.activity-item.activity-gameshop-transaction .activity-title {
    /* the game's title might be really, really long */
    max-width: 25rem;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.activity-item.activity-gameshop-transaction .item-image img {
    opacity: 0.65;
    max-width: 40px;
}

/* Top Bar */
#top-bar {
    width: 520px;
    /* border-left: 10px #26262C solid; */
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#top-bar .tb-right {
    /* position: absolute;
  right: 40px; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#top-bar .tb-right .dropdown-content {
    background: #1c1c22;
}

#top-bar .tb-right .dropdown-content li {
    min-height: 35px;
}

#top-bar .tb-right .dropdown-content li:hover {
    background: #2f2f38;
}

#top-bar .tb-right .dropdown-content li.divider {
    min-height: 0;
    background-color: #4e4e5e;
}

#top-bar .tb-right .dropdown-content li a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    line-height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    text-align: center;
}

#top-bar .tb-right .dropdown-content li a i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
}

#top-bar .tb-right .dropdown-content .sheet-account {
    background-position-x: calc(-24px * 8) !important;
    opacity: 0.5;
}

#nav-desktop .btn-sound-button {
    display: none;
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}

#nav-desktop .btn-toolbar.btn-sound-button:disabled,
#nav-desktop .btn-toolbar.btn-sound-button.disabled {
    border-color: transparent !important;
}

#nav-desktop .btn-sound-button.active {
    display: inline-block;
}

#nav-desktop .btn-sound-button i,
#nav-desktop .btn-sound-button span {
    /* color: #878794 !important; */
    display: none;
}

#nav-desktop .btn-sound-button.enabled i.enabled,
#nav-desktop .btn-sound-button.enabled span.enabled {
    display: inline-block;
}

#nav-desktop .btn-sound-button.disabled i.disabled,
#nav-desktop .btn-sound-button.disabled span.disabled {
    display: inline-block;
}

#top-bar .topbar-buttons {
    display: flex;
    flex-direction: row;
}

#top-bar .topbar-buttons a {
    display: flex;
    justify-content: center;
    align-items: center;
}

#top-bar .topbar-buttons svg {
    height: 16px;
    margin-right: 5px;
}

#nav-desktop .btn-toolbar,
#top-bar .btn-toolbar {
    /* display: inline-block; */
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 15px;
    /* margin-left: 20px; */
    /* min-width: 150px; */
    /* text-align: center; */
    /* vertical-align: middle;; */
}

#nav-desktop .btn-toolbar.btn-toolbar-round {
    height: 40px;
    width: 40px;
    min-width: auto;
    border-radius: 100%;
    text-align: center;
    background: #fff;
    border: 2px solid #58595b;
    background-size: cover;
    background-position: center;
}

#nav-desktop .btn-toolbar.btn-toolbar-round img {
    display: block;
}

#nav-desktop .btn-toolbar.btn-toolbar-icon {
    background: transparent;
    border-color: transparent;
    color: #555;
    min-width: auto;
}

#top-bar .btn-toolbar i.nav-icon.sheet {
    background-position-x: calc(24px * 3);
}

#top-bar .btn-login {
    background: #c32d4f;
    border-color: #c32d4f;
    border-bottom-color: #b32b4a;
    font-size: 15px;
}

#top-bar .btn-balance {
    font-size: 15px;
    font-weight: 500;
    margin-right: 12px;
    height: 40px;
    border: 1px solid #353535;
    background: #212123;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    transition: opacity 0.2s linear;
}

#top-bar .btn-balance:hover {
    opacity: 0.8;
}
#top-bar .btn-balance:active {
    border-color: rgba(255, 255, 255, 0.9);
}

#top-bar .btn-balance img {
    height: 16px;
    margin-right: 5px;
}

#top-bar .btn-balance .user-balance {
    font-size: 16px !important;
}

#top-bar .btn-deposit {
    background: #c32d4f;
    border-color: #c32d4f;
    border-bottom-color: #b32b4a;
    font-size: 15px;
    margin-right: 12px;
    padding: 5px 10px;
    height: 40px;
}

#top-bar .btn-withdraw {
    background: #58595b;
    border-color: #58595b;
    border-bottom-color: #4b4c4e;
    font-size: 15px;
    padding: 5px 10px;
    height: 40px;
}

#top-bar .btn-deposit,
#top-bar .btn-withdraw,
#top-bar .btn-profile {
    opacity: 1;
    transition: opacity 0.2s linear;
}

#top-bar .btn-deposit:hover,
#top-bar .btn-withdraw:hover,
#top-bar .btn-profile:hover {
    opacity: 0.8;
    /* transform: scale(1.05); */
}

#top-bar .btn-profile,
#top-bar .btn-sound-button,
#top-bar .btn-logout {
    height: 40px !important;
}

.secondnav-right .xp-progress-container {
    min-width: 200px;
    height: 18px;
    border: 1px solid #c32d4f;
    position: relative;
    background: #1c1c22;
    border-radius: 5px;
    color: #8e8e9a;
    border: 1px solid #35353a;
}

.secondnav-right .xp-progress {
    height: 100%;
    width: 0%;
    background: #35353a;
    border-radius: 5px;
}

.secondnav-right .xp-levelup {
    height: 100%;
    width: 0%;
    background: #c32d4f;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    box-shadow:
        0px 1px 3px #c32d4f inset,
        0px 0px 8px #c32d4f;
}

.xp-progress-container.lvl-100 {
    border: 1px solid #595969;
    color: #b4b4d6;
}

.xp-progress-container.lvl-100 .xp-progress {
    background: #595969;
}

.xp-progress-container.lvl-200 {
    border: 1px solid #193b46;
    color: #45b5da;
}

.xp-progress-container.lvl-200 .xp-progress {
    background: #193b46;
}

.xp-progress-container.lvl-300 {
    border: 1px solid #246980;
    color: #89e2ff;
}

.xp-progress-container.lvl-300 .xp-progress {
    background: #246980;
}

.xp-progress-container.lvl-400 {
    border: 1px solid #1f6a8e;
    color: #fff;
}

.xp-progress-container.lvl-400 .xp-progress {
    background: #1f6a8e;
}

.xp-progress-container.lvl-500 {
    border: 1px solid hsl(0, 0%, 75%);
    color: hsl(0, 0%, 90%);
}

.xp-progress-container.lvl-500 .xp-progress {
    background: hsl(0, 0%, 45%);
}

.xp-progress-container.lvl-600 {
    border: 1px solid #ffc76f;
    color: #ffc76f;
}

.xp-progress-container.lvl-600 .xp-progress {
    background: #634b26;
}

.xp-progress-container.lvl-700 {
    border: 1px solid hsl(256, 42%, 65%);
    color: hsl(256, 42%, 90%);
}

.xp-progress-container.lvl-700 .xp-progress {
    background: hsl(256, 42%, 50%);
}

.xp-progress-container.lvl-800 {
    border: 1px solid hsl(110, 43%, 49%);
    color: hsl(110, 43%, 49%);
}

.xp-progress-container.lvl-800 .xp-progress {
    background: hsl(110, 43%, 25%);
}

.xp-progress-container.lvl-900 {
    border: 1px solid hsl(344, 64%, 47%);
    color: hsl(344, 64%, 90%);
}

.xp-progress-container.lvl-900 .xp-progress {
    background: hsl(344, 64%, 37%);
}

.xp-progress-container.lvl-1000 {
    border: 1px solid hsl(201, 66%, 54%);
    color: hsl(201, 66%, 90%);
}

.xp-progress-container.lvl-1000 .xp-progress {
    background: hsl(201, 66%, 34%);
}

.xp-progress-container.lvl-1100 {
    border: 1px solid hsl(180deg, 30%, 75%);
    color: hsl(201, 66%, 90%);
}

.xp-progress-container.lvl-1100 .xp-progress {
    background: hsl(180deg, 12%, 43%);
}

.xp-progress-container.lvl-1200 {
    border: 1px solid hsl(239deg, 31%, 57%);
    color: hsl(201, 66%, 90%);
}

.xp-progress-container.lvl-1200 .xp-progress {
    background: hsl(239deg, 32%, 35%);
}

.xp-progress-container.lvl-1300 {
    border: 1px solid hsl(328deg, 60%, 39%);
    color: hsl(201, 66%, 90%);
}

.xp-progress-container.lvl-1300 .xp-progress {
    background: hsl(316deg, 59%, 26%);
}

.secondnav-right .xp-progress-amount {
    opacity: 0;
}

.secondnav-right .xp-progress-percent {
    opacity: 1;
}

.secondnav-right .xp-progress-percent.level-up {
    color: white !important;
}

.secondnav-right .xp-progress-amount,
.secondnav-right .xp-progress-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    transition: opacity 0.1s ease-in;
    cursor: default;
}

.secondnav-right .xp-progress-container:hover .xp-progress-amount {
    opacity: 1;
}

.secondnav-right .xp-progress-container:hover .xp-progress-percent {
    opacity: 0;
}

@keyframes progressGlow {
    0% {
        box-shadow:
            0px 1px 3px #c32d4f inset,
            0px 0px 8px #c32d4f;
    }

    50% {
        box-shadow: unset;
    }

    100% {
        box-shadow:
            0px 1px 3px #c32d4f inset,
            0px 0px 8px #c32d4f;
    }
}

#top-bar .btn-logout i {
    margin-right: 5px;
}

.secondnav-desktop-el--fights {
    color: #ffc870;
}

.secondnav-desktop-el--fights svg path {
    fill: #ffc870;
}

.secondnav-desktop-el--fights .secondnav-desktop-el-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fight-event-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
}

.fight-event-timer i {
    font-size: 16px;
    margin-left: 4px;
}

@keyframes loading-placeholder {
    0% {
        background-position-x: -100%;
    }
    100% {
        background-position-x: 100%;
    }
}

@media only screen and (max-width: 1240px) {
    #site-activity .toggle {
        background: #1c1c22;
        /* width and height are the other way around because of the rotation */
        width: 70px;
        height: 24px;
        top: 24px;
        right: -24px;
        transform: rotate(90deg);
    }

    .tb-balance {
        min-width: 286px;
        min-width: max-content;
    }

    #top-bar {
        width: unset;
        flex: 1;
    }

    #site-activity {
        min-width: 0;
        width: unset;
    }

    #site-activity .toggle {
        transform: rotate(-90deg);
    }

    #site-activity.hidden .toggle {
        right: 0;
        left: -24px;
    }
}

@media only screen and (max-width: 800px) {
    .content-inner {
        margin-top: 40px;
    }

    #site-activity {
        display: none !important;
    }

    .site-activity-loading {
        display: none !important;
    }

    #top-bar {
        height: unset;
        margin-top: 25px;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding-right: 20px;
        padding-left: 20px;
        flex-direction: column;
    }

    #top-bar .tb-right {
        /* margin-top: 30px; */
        position: relative;
        /* margin-left: 30px; */
        flex-wrap: wrap;
    }

    #top-bar .topbar-buttons {
        height: 40px;
        font-size: 12px;
        align-items: center;
        justify-content: space-around;
    }

    #top-bar .tb-balance {
        height: 32px;
        font-size: 12px;
    }

    #top-bar .balance-text-icon-usd,
    #top-bar .balance-text-icon,
    #top-bar .tb-need-to-bet,
    #top-bar .btn-bonus-claim,
    #top-bar input.select-dropdown {
        height: 32px;
        font-size: 12px !important;
    }

    #top-bar .tb-balance span.caret {
        top: 8px !important;
    }

    #top-bar .topbar-buttons > * {
        margin: 0 10px;
    }

    #top-bar .topbar-buttons a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #top-bar .topbar-buttons i {
        margin-right: 5px;
    }

    #top-bar .btn-deposit,
    #top-bar .btn-withdraw,
    #top-bar .btn-balance {
        display: block;
        width: 100%;
        font-size: 12px !important;
    }

    #top-bar .btn-balance {
        display: flex;
        height: 32px;
        text-align: center;
        margin-top: 10px;
    }

    #top-bar .tb-balance {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }

    #top-bar .tb-middle-xs {
        display: block;

        margin-left: 30px;
        text-align: right;
    }

    #top-bar .tb-need-to-bet {
        order: 2;
    }

    #top-bar .topbar-buttons {
        order: 1;
    }

    #top-bar .tb-balance {
        order: 3;
    }
}

@media only screen and (max-width: 600px) {
    #top-bar .btn-profile {
        display: none;
    }
}

@media only screen and (max-width: 390px) {
    .content-inner {
        margin-top: 75px;
    }
}

#content-matchbet {
    display: none;
    margin-top: 0px !important;
    padding: 10px 40px 30px 40px;
}

.matchbet-title-info {
    color: #039be5;
    cursor: pointer;
    margin-right: 10px;
}
.matchbet-title-info:hover {
    color: white;
}
.matches-appbar {
    display: none;
    justify-content: space-between;
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.matches-appbar-left {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.matches-appbar-right {
    margin-bottom: 10px;
}
.matches-games {
    display: none;
}
.matches-games-loading {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    touch-action: none;
}
.matches-app {
    display: flex;
    color: white;
    cursor: pointer;
    height: 40px;
    width: 110px;
    border: 2px solid transparent;
    background: #c8354e;
    border-radius: 8px;
    opacity: 0.5;
    justify-content: center;
    align-items: center;
}
.matches-app:hover {
    opacity: 1;
}
.matches-games-el {
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    width: 110px;
    border: 2px solid transparent;
    border-radius: 8px;
    opacity: 0.5;
    justify-content: center;
    align-items: center;
}
.matches-games-el:first-child {
    margin-right: 10px;
}
.matches-games-el:not(:first-child) {
    margin: 0 10px;
}
.matches-games-el.active {
    opacity: 1;
    border: 2px solid #c8354e;
}
.matches-games-el:hover {
    opacity: 1;
}
.matches-games-el img {
    max-width: 80%;
}

.matches {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(425px, 1fr));
    grid-gap: 20px;
}
.no-matches {
    display: none;
    text-align: center;
    margin-top: 20px;
}
.matches .matches-el {
    display: block;
    /* overflow: hidden; */
    position: relative;
    border: 2px #2a2a31 solid;
    border-radius: 10px;
    min-height: 130px;
    color: #aaa;
    /* background: url(/static/images/matchbet/gradient-red.png) 50px 0px; */
    background: #222228;
    background-size: 200% 100%;
    transition:
        background-position-x 0.3s ease,
        border-color 0.4s ease;
    cursor: pointer;
    font-weight: 500;
    margin: 20px 0;
    box-shadow: 0 0 10px #00000066;
}

.matches .matches-el-finished {
    /* background-image: url(/static/images/matchbet/gradient-finished.png); */
    opacity: 0.6;
}

.matches .matches-el-upcoming:hover {
    border-color: #209ec7 !important;
}

.matches .matches-el-live:hover {
    border-color: #c8354e !important;
}

.matches .matches-el:hover {
    border: 2px #666 solid;
    background-position-x: 100%;
}

.matches-el.matches-el-pinned--green {
    border-color: #1c522b;
    background-image: url(/static/images/matchbet/gradient-green.png);
}
.matches-el.matches-el-pinned--green:hover {
    border-color: #2a8a45;
}
/* .matches-el.matches-el-pinned--green .matches-el-info {
    background: linear-gradient(to bottom,#313631,transparent);
} */

.matches-el.matches-el-pinned--gold {
    /* border-color:#6e5830; */
    /* background-image: url(/static/images/matchbet/gradient-gold.png); */
    border-color: #c09857;
}

.matches-el.matches-el-pinned--red {
    background-image: url(/static/images/matchbet/gradient-red.png);
    border-color: rgba(200, 53, 77, 0.5) !important;
    box-shadow: 0 0 5px rgba(200, 53, 77, 0.5);
}

.matches-el.matches-el-pinned--blue {
    background-image: url(/static/images/matchbet/gradient-blue.png);
    border-color: #209dc773 !important;
    box-shadow: 0 0 5px #209dc773;
}

/* .matches-el.matches-el-pinned--gold .matches-el-info {
    background: linear-gradient(to bottom,#3b3a35,transparent);
} */

.matches .matches-el-teams {
    position: relative;
    display: flex;
    align-items: center;
    height: 130px;
}
.matches .matches-el-vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
}

.matches .matches-el-team-two,
.matches .matches-el-team-one {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(50% - 70px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 130px;
}

.matches-el-team-one-details,
.matches-el-team-two-details {
    flex: 1;
}

.matches .matches-el-team-one {
    left: 0;
    padding-left: 5px;
}

.matches .matches-el-team-two {
    right: 0;
    padding-right: 5px;
}

.matches-el-team-one-winner,
.matches-el-team-two-winner {
    display: none;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    text-align: center;
}

.matches-el-team-one-winner-text,
.matches-el-team-two-winner-text {
    display: inline-block;
    color: #777;
    font-size: 10px;
    font-weight: 600;
    border: 2px solid #777;
    padding: 2px 5px;
    border-radius: 4px;
}

.matches-el-team-one-score,
.matches-el-team-two-score {
    display: none;
    position: absolute;
    font-size: 24px;
}
.matches-el-team-one-score {
    top: 50%;
    right: -120px;
    transform: translate(0, -50%);
}
.matches-el-team-two-score {
    top: 50%;
    left: -120px;
    transform: translate(0, -50%);
}

.matches-el-team-one-bet,
.matches-el-team-two-bet {
    display: block;
    position: absolute;
    height: 80px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.matches-el-team-one-bet img,
.matches-el-team-two-bet img {
    height: 25px;
    opacity: 0.8;
    position: absolute;
}

.matches-el-team-one-bet img {
    top: 50%;
    right: 85%;
    transform: translate(-10px, -50%);
}
.matches-el-team-two-bet img {
    top: 50%;
    left: 85%;
    transform: translate(-10px, -50%);
}
.matches .matches-el-team-one-odds,
.matches .matches-el-team-two-odds {
    margin-top: 5px;
}

.matches .matches-el-team-one-name,
.matches .matches-el-team-one-odds,
.matches .matches-el-team-two-name,
.matches .matches-el-team-two-odds,
.matches .matches-el-vs {
    text-align: center;
}
.matches .matches-el-team-one-name,
.matches .matches-el-team-two-name {
    font-size: 15px;
    color: #ddd;
}

.matches .matches-el-team-one {
}

.matches .matches-el-team-one:hover {
}

.matches .matches-el-team-two {
}

.matches .matches-el-team-two:hover {
}
.matches .matches-el-team-one-logo,
.matches .matches-el-team-two-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    margin: 0 10px;
}

/* .matches .matches-el-team-one-logo {
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.matches .matches-el-team-one-details {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translate(0, -50%);
}

.matches .matches-el-team-two-logo {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.matches .matches-el-team-two-details {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translate(0, -50%);
} */

.matches .matches-el-team-one-logo img,
.matches .matches-el-team-two-logo img {
    max-width: 100%;
}
.matches .matches-el-info {
    height: 170px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    padding: 5px 8px;
    color: #aaa;
    margin: 0 !important;
    background: #1c1c22 !important;
    width: 140px;
    border-radius: 12px;
    border: 1px solid #c8354e;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 1;
}

.matches .matches-el-info-top {
    text-align: center;
    color: #aaa;
    font-size: 14px;
}

.matches .matches-el-info-tournament {
    display: flex;
    justify-content: center;
    border-radius: 10px;
    border-bottom: 1px solid #666;
    padding: 0 5px;
}

.matches .matches-el-info-tournament-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matches-el-info-score {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

.matches-el-info-score-team-one,
.matches-el-info-score-team-two {
    color: #c8354e;
    font-size: 30px;
    margin: 0 10px;
}
.matches-el-info-score-finished {
    color: #aaa;
}

.matches-el-info-score-finished .matches-el-info-score-team-one,
.matches-el-info-score-finished .matches-el-info-score-team-two {
    color: #aaa;
}

.matches-el-info-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.matches-el-info-bottom-status,
.match-details-middle-status {
    width: 90%;
    height: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    background: #666;
    line-height: 24px;
    font-size: 12px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.matches-el-info-bottom-live,
.match-details-middle-live {
    display: none;
    width: 90%;
    height: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    background: #329e51;
    line-height: 24px;
    font-size: 12px;
    border-radius: 4px;
    text-transform: uppercase;
}

.matches-loading {
    margin-top: 50px;
    text-align: center;
}
.matches-loading .matches-loading-text {
    padding-bottom: 40px;
}
.match-container {
    display: flex;
    /* margin-top: 30px; */
}
.match-container .match-bet-list,
.match-container .match-bet-summary {
    display: none;
    flex: 0 0 300px;
    background: #1c1c22;
    border-radius: 7px;
    min-height: calc(100vh - 80px);
    transition: flex-basis 0.5s linear;
}

.match-bet-list .match-bet-list-title {
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    cursor: pointer;
    /* line-height: 40px; */
    color: #c8354e;
    border-bottom: 1px solid #c8354e;
    font-size: 16px;
}
.match-bet-list-title-action {
    color: white;
    background: #c8354e;
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.3s ease-in-out;
    /* border-top-right-radius: 7px; */
}

.match-bet-list .match-bet-list-games,
.match-bet-list .match-bet-list-status {
    display: flex;
    /* padding: 10px; */
    margin: 10px 10px 0 10px;
    border-radius: 5px;
    overflow: hidden;
    flex-wrap: wrap;
}
.match-bet-list-games-el,
.match-bet-list-status-el {
    flex: 1 0 70px;
    display: flex;
    justify-content: center;
    height: 40px;
    align-items: center;
    background: #26262c;
}

.match-bet-list-status-el {
    height: 30px;
}

.match-bet-list-games-el:hover,
.match-bet-list-status-el:hover {
    background: #c8354da1;
    color: white;
    cursor: pointer;
}
.match-bet-list-games-el-selected,
.match-bet-list-games-el-selected:hover,
.match-bet-list-status-el-selected,
.match-bet-list-status-el-selected:hover {
    background: #c8354e;
    color: white;
}

.match-bet-list-content {
    padding: 10px 10px 0 10px;
}

@keyframes matchBetListAnimation {
    0% {
        background: initial;
    }
    50% {
        background: #c8354e;
    }
    100% {
        background: initial;
    }
}

@keyframes matchbetNewOddsAnimationUp {
    from {
        color: #aaa;
    }

    50% {
        color: #329e51;
    }

    to {
        color: #aaa;
    }
}

@keyframes matchbetNewOddsAnimationDown {
    from {
        color: #aaa;
    }

    50% {
        color: #c8354e;
    }

    to {
        color: #aaa;
    }
}

.match-bet-list-content-el {
    text-align: center;
    padding: 10px 0;
}
.match-bet-list-content-el-suspended,
.match-bet-list-content-el-deactivated {
    opacity: 0.4;
}
.match-bet-list-content-el-title {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-bet-list-content-el-title .material-icons {
    margin-left: 3px;
    cursor: pointer;
    font-size: 20px;
}
.match-bet-list-content-el-selections {
    padding: 0 20px;
}

.match-bet-list-content-el-selections-item {
    display: flex;
    margin: 8px 0;
    padding: 6px 20px;
    justify-content: space-between;
    border-radius: 5px;
    /* border: 1px solid #666; */
    background-color: #26262c;
    cursor: pointer;
}
.match-bet-list-content-el-suspended .match-bet-list-content-el-selections-item,
.match-bet-list-content-el-deactivated .match-bet-list-content-el-selections-item,
.match-bet-list-content-el-settled .match-bet-list-content-el-selections-item {
    cursor: not-allowed;
}

.match-bet-list-content-el-selections-item-odds {
    font-weight: 600;
    padding-left: 15px;
}

.match-bet-list-content-el-selections-item-updated {
    background-color: #2d2d33;
}

.match-bet-list-content-el-selections-item-text {
    text-align: left;
}

.match-bet-list-content-el-selections-item:hover {
    background: #c8354da1;
    color: white;
}

.match-bet-list-content-el-selections-item-selected {
    background: #c8354e !important;
    color: white;
}

.match-bet-list-content-el-selections-item-win {
    color: white;
    background: #329e51;
}

.match-bet-list-content-el-selections-item-win:hover {
    background: #3abd5f;
}
.match-bet-list-content-el-selections-item-lose {
    cursor: not-allowed;
    opacity: 0.4;
}

.match-bet-list-content-el-selections-item-void {
    color: white;
    background: #a2680a;
}

.match-container .match {
    flex: 1;
    padding: 0 20px;
}

.match-bet-summary-title {
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #c8354e;
    border-bottom: 1px solid #c8354e;
    font-size: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-bet-summary-title-count {
    position: absolute;
    background: #26262c;
    border-radius: 3px;
    top: 50%;
    display: none;
    right: 30px;
    transform: translateY(-50%);
    color: #aaa;
    height: 20px;
    line-height: 20px;
    text-align: center;
    padding: 1px 6px;
    font-weight: 600;
}

.match-bet-summary-title .matchbet-info-match {
    display: flex;
    margin-left: 5px;
}

.match-bet-summary-no-bets {
    margin: 20px 10px 0 10px;
    height: 40px;
    line-height: 40px;
    background: #26262c;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
}

.match-bet-summary-no-bets:hover {
    color: white;
    background: #c8354e;
    cursor: pointer;
}

.match-bet-summary-type {
    margin: 20px 10px 0px 10px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    display: flex;
    overflow: hidden;
}

.match-bet-summary-type-el {
    flex: 1;
    background: #26262c;
}

.match-bet-summary-type-el:hover {
    background: #c8354da1;
    color: white;
    cursor: pointer;
}

.match-bet-summary-type-el-selected,
.match-bet-summary-type-el-selected:hover {
    color: white;
    background: #c8354e;
}

.match-bet-summary-content {
    padding: 20px 10px 0 10px;
    display: none;
}

.match-bet-summary-content-el {
    padding: 10px 20px;
    background: #26262c;
    margin-bottom: 10px;
    border-radius: 5px;
}

.match-bet-summary-content-el-title {
    display: flex;
    justify-content: space-between;
}

.match-bet-summary-content-el-title-text {
    display: flex;
    font-size: 14px;
}

.match-bet-summary-content-el-title-text-odds {
    margin-left: 4px;
    color: #c8354e;
    font-weight: 600;
}
.match-bet-summary-content-el-title-remove {
    border-radius: 3px;
    color: #aaa;
    height: 20px;
    line-height: 20px;
    text-align: center;
    padding: 1px 6px;
    font-weight: 600;
    cursor: pointer;
}

.match-bet-summary-content-el-title-remove:hover {
    color: white;
}

.match-bet-summary-content-el-bet-name {
    color: #666;
}

.match-bet-summary-content-el-match {
    display: flex;
    align-items: center;
}
.match-bet-summary-content-el-match-icon {
    display: flex;
    align-items: center;
}
.match-bet-summary-content-el-match-icon img {
    height: 15px;
    width: auto;
    margin-right: 4px;
}
.match-bet-summary-content-el-single-bet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.match-bet-summary-content-el-single-bet-input {
    flex-basis: 80px;
}
.match-bet-summary-content-el-single-bet-winnings {
    flex: 1;
    text-align: right;
}
.match-bet-summary-content-el-single-bet-winnings-value {
    color: #c8354e;
    font-weight: 500;
}

.match-bet-summary-content-el-single-bet-action {
    margin-top: 10px;
}

.match-bet-summary-content-el-single-bet-action button {
    width: 100%;
}

.match-bet-summary-content-total {
    padding: 10px 20px;
    background: #26262c;
    margin: 20px 10px 0 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: right;
    color: #c8354e;
    font-weight: 600;
}

.match-bet-summary-bet-panel {
    border-radius: 5px;
    margin: 20px 10px 0 10px;
    background: #26262c;
}

.match-bet-summary-bet-panel-form {
    display: none;
    padding: 10px 20px;
}

.match-bet-summary-bet-panel-balance {
    /* display: flex; */
    display: none;
    align-items: center;
}

.match-bet-summary-bet-panel-balance .matchbet-info-match {
    display: flex;
}

.match-bet-summary-bet-panel-balance #balance-icon {
    margin-bottom: 0;
    margin-right: 6px;
}

.match-bet-summary-panel-potential-winnings {
    margin-top: 10px;
}

.match-bet-summary-panel-potential-winnings-value {
    color: #c8354e;
    font-weight: 600;
}

.match-bet-summary-panel-submit {
    margin-top: 5px;
}

.match-bet-summary-panel-submit button {
    width: 100%;
}
.match-details {
    background: #1c1c22;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 7px;
    position: relative;
    min-height: 120px;
}
.match-details-info {
    margin-bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.match-details-info > * {
    background: #1c1c22;
    border-radius: 5px;
    padding: 2px 5px;
    margin: 0 3px;
    flex: 1;
}
.match-details-info-tournament {
    display: flex;
    align-items: center;
}
.match-details-info-date {
    text-align: right;
    opacity: 0.6;
}
.match-details-info-tournament-icon {
    display: flex;
    align-items: center;
    margin-right: 5px;
}
.match-details-info-tournament-tier {
    opacity: 0.6;
}
.match-details-info-tournament-icon img {
    height: 25px;
}

.match-details-info-tournament-icon--game img {
    height: 22px !important;
}

.match-details-info-status {
    display: flex;
    align-items: center;
    font-weight: 600;
}
.match-details-custom-message {
    display: flex;
    align-items: center;
    opacity: 0.6;
}

.match-details-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1c1c22;
    width: 140px;
    height: 115%;
    z-index: 1;
    border-radius: 10px;
    border: 2px solid #333;
    display: flex;
    margin: 0;
    padding: 5px 8px;
    flex-direction: column;
    justify-content: space-around;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
}

.match-details-middle-top {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
}

.match-details-middle-bo-bets,
.matches-el-info-bo-bets {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 5px;
}

.match-details-middle-bo-value,
.matches-el-info-bo-value {
    margin-left: 2px;
}

.match-details-middle-bo-bets > *,
.matches-el-info-bo-bets > * {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.match-details-middle-bo-bets i,
.matches-el-info-bo-bets i {
    font-size: 24px;
}

.match-details-middle-tournament-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #666;
    border-radius: 10px;
    padding: 0 5px;
}

.match-details-middle-score {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-details-middle-score-team-one,
.match-details-middle-score-team-two {
    color: #c8354e;
    font-size: 30px;
    margin: 0 10px;
}

.match-details-middle-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.match-details-custom-message .material-icons {
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 2px;
}

.match-teams {
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 15px 0;
    color: #aaa;
    /* background: linear-gradient(45deg, transparent, #C8354E 50%, transparent) 0 0; */
    background-size: 200% 100%;
}
.match-teams-team-one,
.match-teams-team-two {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    font-weight: 500;
    font-size: 16px;
}
.match-teams-team-one-logo img,
.match-teams-team-two-logo img {
    max-height: 100%;
}
.match-teams-team-one-logo,
.match-teams-team-two-logo {
    height: 40px;
    position: absolute;
}
.match-teams-team-one-name,
.match-teams-team-two-name {
    font-size: 18px;
    color: #bbb;
}
.match-teams-team-one-logo {
    top: 50%;
    right: 20px;
    transform: translate(-80px, -50%);
}
.match-teams-team-two-logo {
    top: 50%;
    left: 20px;
    transform: translate(80px, -50%);
}
.match-teams-team-one-winner,
.match-teams-team-two-winner {
    display: none;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.match-teams-team-one-winner {
    background: url(/static/images/matchbet/gradientsWL.png);
    background-size: 100%;
}

.match-teams-team-two-winner {
    background: url(/static/images/matchbet/gradientsWR.png);
    background-size: 100%;
}

.match-teams-team-one-winner-text,
.match-teams-team-two-winner-text {
    display: inline-block;
    color: #444;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid #444;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
}

.match-teams-team-one-winner-text {
    left: 20px;
}

.match-teams-team-two-winner-text {
    left: unset;
    right: 20px;
}

.match-teams-vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
}

.match-custom-message {
    border: 1px dashed #c8354e;
    width: 100%;
    color: #c8354e;
    padding: 5px 10px;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
    display: none;
}

.match-info-matchlink {
    display: none;
}
.mb-bet-potential-winnings {
    font-size: 16px;
}
.mb-bet-potential-winnings-amount {
    color: #c8354e;
}

.mb-bet-info {
    margin-top: 20px;
}

#modal-place-matchbet {
    /* display: block;     */
    font-size: 18px;
}

#modal-place-matchbet strong {
    /* font-family: 'Ubuntu Mono', Consolas, monospace; */
    font-size: 22px;
}

#modal-place-matchbet h5 {
    color: #c8354e;
}

#modal-place-matchbet .modal-dialog {
    max-width: 600px;
    top: 50px;
    background: #2c2c32;
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 20px;
}

#modal-place-matchbet .modal-place-matchbet-content-description-betvalue,
#modal-place-matchbet .modal-place-matchbet-content-description-winnings {
    color: #c8354e;
}

#modal-place-matchbet .modal-actions {
    padding-top: 40px;
    text-align: right;
}

#modal-place-matchbet .btn-confirm {
    border-color: #37af59;
    background: #37af59;
}

#modal-place-matchbet .modal-place-matchbet-teams {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-around;
    border-radius: 7px;
    background: #1c1c22;
    /* padding: 5px 0; */
    margin: 15px 0;
}

#modal-place-matchbet .modal-place-matchbet-info {
    border-radius: 7px;
    background: #1c1c22;
    padding: 10px 20px;
    margin: 15px 0;
    font-size: 16px;
}

#modal-place-matchbet .match-bet-summary-content-el {
    background: #1c1c22;
    font-size: 14px;
}

#modal-place-matchbet .modal-place-matchbet-info-value {
    color: #c8354e;
}

#modal-place-matchbet .modal-place-matchbet-teams-vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#modal-place-matchbet .modal-place-matchbet-teams-team-one,
#modal-place-matchbet .modal-place-matchbet-teams-team-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
}

#modal-place-matchbet .modal-place-matchbet-teams-team-one-selected {
    background: linear-gradient(to right, #c8354e, transparent);
}

#modal-place-matchbet .modal-place-matchbet-teams-team-two-selected {
    background: linear-gradient(to left, #c8354e, transparent);
}

#modal-place-matchbet .modal-place-matchbet-teams-team-one-logo img,
#modal-place-matchbet .modal-place-matchbet-teams-team-two-logo img {
    height: 35px;
}

#modal-place-matchbet .modal-place-matchbet-teams-team-one-logo img,
#modal-place-matchbet .modal-place-matchbet-teams-team-two-logo img {
    max-height: 100%;
}

.match .btn-matchbet {
    width: 100%;
}
.match-back {
    color: #c8354e;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.match-back:hover {
    cursor: pointer;
}

.match-back-text:hover {
    text-decoration: underline;
}

#modal-place-matchbet #balance-icon {
    height: 26px;
}

#modal-info-matchbet .modal-dialog {
    min-width: 300px;
    max-width: 700px;
    /* width: 100%; */
    background: #26262c;
    /* margin: 20px; */
    padding: 20px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}

#modal-info-matchbet h4 {
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.14rem 0 0.912rem 0;
    color: #c8354e;
}

#modal-info-matchbet ul {
    margin-top: 20px;
}

#modal-info-matchbet ul li {
    cursor: default;
    margin-left: 20px;
    list-style-position: outside;
    margin-bottom: 5px;
    list-style-type: disc;
}

/* .match-container .match-info {
    background: #1c1c22;
    padding: 10px;
}

.match-container .match-bet-wrapper {
    background: #1c1c22;
    padding: 10px;
} */

.match-bet-wrapper .bet-balance {
    display: flex;
    align-items: center;
}

.match-container {
    margin-top: 20px;
}

.match-container .match-bet {
    display: none;
    background: #1c1c22;
    padding: 20px;
    margin-left: 20px !important;
    /* display: flex; */
    flex-direction: column;
    justify-content: space-around;
}

.match-top .match-stream-list {
    width: 100%;
    display: none;
    overflow: hidden;
}

.match-stream-list-el {
    flex: 1;
    text-align: center;
    background: #1c1c22;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-stream-list-el i {
    color: rgba(255, 0, 0, 0.75);
    font-size: 12px;
    margin-right: 5px;
}

.match-stream-list-el:hover {
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.match-stream-list-el-selected,
.match-stream-list-el-selected:hover {
    color: rgba(255, 255, 255, 0.9);
    background: #18181d;
}

.match-container .match-top #balance-icon {
    margin-bottom: 0;
}

.match-container .match-stream {
    overflow: hidden;
    padding-top: 56.3%;
    position: relative;
    height: 100%;
    width: 100%;
    transition: padding-top 0.6s ease-in-out;
}

.match-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.match-container .match-iframe-placeholder {
    display: none;
    border: 0;
    padding: 20px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: #1c1c22;
    color: #c8354e;
    font-size: 22px;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.match-bottom {
    margin-top: 20px;
}

.match-bottom-tabs {
    margin-bottom: 15px;
    display: flex;
}
.match-bottom-tabs-el {
    flex: 1;
    text-align: center;
    background: #1c1c22;
    border: 1px solid #1c1c22;
    cursor: pointer;
    height: 40px;
    line-height: 35px;
    font-size: 14px;
    color: #999;
}

.match-bottom-tabs-el-selected,
.match-bottom-tabs-el:hover {
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid #c8354e;
}

.match-bottom-wrapper {
    padding: 20px;
    background: #1c1c22;
}

.match-bottom-wrapper-players,
.match-bottom-wrapper-matches {
    display: flex;
    justify-content: space-between;
}

.match-bottom-wrapper-matches-team-one,
.match-bottom-wrapper-matches-team-two {
    flex-basis: 45%;
}

.match-bottom-wrapper-players {
    flex-direction: column;
}

.match-bottom-wrapper-players-info {
    font-size: 10px;
    color: #666;
}

.match-bottom-wrapper-players-team-two {
    margin-top: 15px;
}

.match-bottom-wrapper-players-team-one-header,
.match-bottom-wrapper-players-team-two-header,
.match-bottom-wrapper-matches-team-one-header,
.match-bottom-wrapper-matches-team-two-header {
    display: flex;
    position: relative;
    height: 60px;
    align-items: center;
    justify-content: center;
    /* border: 2px solid #333; */
    border-radius: 10px;
}

.match-bottom-wrapper-matches-team-one-header-img {
    margin-left: 10px;
    order: 2;
}

.match-bottom-wrapper-players-team-one-header-img {
    margin-right: 10px;
}

.match-bottom-wrapper-players-team-two-header-img,
.match-bottom-wrapper-matches-team-two-header-img {
    margin-right: 10px;
    /* position: absolute; */
    /* top: 0px; */
    /* left: 0px; */
}

.match-bottom-wrapper-players-team-one-header-text,
.match-bottom-wrapper-matches-team-one-header-text {
    order: 1;
}

.match-bottom-wrapper-players-team-one-header-text,
.match-bottom-wrapper-players-team-two-header-text,
.match-bottom-wrapper-matches-team-one-header-text,
.match-bottom-wrapper-matches-team-two-header-text {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.match-bottom-wrapper-players-team-one-header img,
.match-bottom-wrapper-players-team-two-header img,
.match-bottom-wrapper-matches-team-one-header img,
.match-bottom-wrapper-matches-team-two-header img {
    height: 40px;
}

.match-bottom-wrapper-players-team-one-header-image,
.match-bottom-wrapper-matches-team-one-header-image {
    margin-right: 10px;
}

.match-bottom-wrapper-players-team-two-header-image,
.match-bottom-wrapper-matches-team-two-header-image {
    margin-left: 10px;
}

.match-bottom-wrapper-matches-team-one-content,
.match-bottom-wrapper-matches-team-two-content {
    margin-top: 20px;
}

.match-bottom-wrapper-players-team-one-content,
.match-bottom-wrapper-players-team-two-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.match-bottom-wrapper-players-team-one-content-player,
.match-bottom-wrapper-players-team-two-content-player,
.match-bottom-wrapper-matches-team-one-content-match,
.match-bottom-wrapper-matches-team-two-content-match {
    display: flex;
    margin: 5px 0;
    position: relative;
    align-items: center;
    /* justify-content: center; */
}

.match-bottom-wrapper-players-team-one-content-player,
.match-bottom-wrapper-players-team-two-content-player {
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #26262c;
    margin: 5px;
    flex-basis: 150px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.match-bottom-wrapper-matches-team-one-content-match,
.match-bottom-wrapper-matches-team-two-content-match {
    padding: unset;
    height: 40px;
    border: 2px solid #333;
    overflow: hidden;
}

.match-bottom-wrapper-matches-team-one-content-match-win,
.match-bottom-wrapper-matches-team-two-content-match-win {
    border-color: #329e5161;
}

.match-bottom-wrapper-matches-team-one-content-match-lose,
.match-bottom-wrapper-matches-team-two-content-match-lose {
    border-color: #c8354da1;
}

.match-bottom-wrapper-matches-team-one-content-match-win .match-bottom-wrapper-matches-team-one-content-match-result,
.match-bottom-wrapper-matches-team-one-content-match-lose .match-bottom-wrapper-matches-team-one-content-match-result,
.match-bottom-wrapper-matches-team-two-content-match-win .match-bottom-wrapper-matches-team-two-content-match-result,
.match-bottom-wrapper-matches-team-two-content-match-lose .match-bottom-wrapper-matches-team-two-content-match-result {
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-bottom-wrapper-matches-team-one-content-match-win .match-bottom-wrapper-matches-team-one-content-match-result,
.match-bottom-wrapper-matches-team-two-content-match-win .match-bottom-wrapper-matches-team-two-content-match-result {
    background: #329e5161;
}

.match-bottom-wrapper-matches-team-one-content-match-lose .match-bottom-wrapper-matches-team-one-content-match-result,
.match-bottom-wrapper-matches-team-two-content-match-lose .match-bottom-wrapper-matches-team-two-content-match-result {
    background: #c8354da1;
}

.match-bottom-wrapper-matches-team-two-content-match {
    justify-content: flex-end;
}

.match-bottom-wrapper-players-team-one-content-player-image img,
.match-bottom-wrapper-players-team-two-content-player-image img {
    width: 100%;
}

.match-bottom-wrapper-players-team-one-content-player-nickname,
.match-bottom-wrapper-players-team-two-content-player-nickname {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding-bottom: 5px;
    flex-direction: column;
}

.match-bottom-wrapper-players-team-one-content-player-nickname img,
.match-bottom-wrapper-players-team-two-content-player-nickname img {
    height: 24px;
    width: auto;
    margin-left: 5px;
}

.match-bottom-wrapper-matches-team-one-content-match-opponent {
    order: 2;
}

.match-bottom-wrapper-matches-team-one-content-match-result {
    margin-right: 10px;
}

.match-bottom-wrapper-matches-team-two-content-match-result {
    margin-left: 10px;
}

/* .match-bottom-wrapper-stats {
    display: none;
} */

.match-bottom-wrapper-players {
    display: none;
}

.match-bottom-wrapper-matches {
    display: none;
}

.match-bottom-wrapper-bets {
    display: none;
}

.match-bottom-tabs-el--bets {
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-bottom-tabs-el--players {
    margin-right: 15px;
    margin-left: 15px;
}

.match-bottom-tabs-el--bets {
    margin-left: 15px;
}

.match-bottom-tabs-el--bets-count {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

.match-bottom-tabs-el--bets-count-val {
    padding: 5px 10px;
    background: #2a2a31;
    color: rgba(255, 255, 255, 0.9);
    line-height: normal;
    border-radius: 3px;
}

.match-bottom-tabs-el--bets-count .spinner {
    height: 15px;
    width: 15px;
    border-width: 2px;
}

.match-bets-loading {
    display: block;
    text-align: center;
    margin-top: 50px;
}
.match-bets-container {
    display: none;
}
.match-bets-title {
    font-size: 16px;
}
.match-bets-title-no-bets {
    display: none;
}
.match-bets-title-no-bets-count {
    display: none;
}
.match-bets {
    margin-top: 10px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.match-bets-el {
    /* padding: 20px; */
    border-radius: 5px;
    background: #1c1c22;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid #c8354da1;
}

.match-bets-el-pending {
    border: 2px solid #d2a0509e;
}

.match-bets-el-won {
    border: 2px solid #329e5161;
}

.match-bets-el-info {
    /* background: url(/static/images/matchbet/gradient-red.png); */
    /* border-bottom: 2px solid #666; */
    /* background-size: cover; */
    padding: 20px;
    border-radius: 5px;
    text-align: right;
}
.match-bets-el-info span {
    color: #c8354e;
    font-weight: 600;
}

.match-bets-el-title {
    overflow: hidden;
    color: white;
    font-size: 500;
    background: #c8354da1;
    text-align: center;
    height: 35px;
    line-height: 35px;
}

.match-bets-el-pending .match-bets-el-title {
    background: #d2a0509e;
}

.match-bets-el-won .match-bets-el-title {
    background: #329e5161;
}

.match-bets-el-content-el {
    margin-top: 20px;
    margin: 20px;
    padding: 10px;
    border: 2px #1c1c22 solid;
    background: #26262c;
    border-radius: 5px;
}

.match-bets-el-content-el--win {
    border: 2px #3abd5f28 solid;
    background: #052b0a3a;
}

.match-bets-el-content-el--lose {
    border: 2px #c8354d1a solid;
    background: #a2353513;
}

.match-bets-el-content-el--pending {
    border: 2px #e8a8425c solid;
    background: #96710b10;
}

.match-bets-el-content-el-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.match-bets-el-content-el-title-odds {
    color: #c8354e;
    font-weight: 600;
    margin-left: 5px;
}
.match-bets-el-content-el-market-name {
    color: #666;
}
.match-bets-el-content-el-match {
    display: flex;
    align-items: center;
}
.match-bets-el-content-el-match-icon {
    display: flex;
    align-items: center;
}
.match-bets-el-content-el-match-icon img {
    height: 15px;
    width: auto;
    margin-right: 4px;
}

.match-bottom-wrapper-stats-game {
    border: 2px solid #26262c;
    border-radius: 10px;
    overflow: hidden;
}
.match-bottom-wrapper-stats-game:first-child {
    margin-bottom: 30px;
}
.match-bottom-wrapper-stats-game:not(:first-child) {
    margin: 30px 0;
}

.match-bottom-wrapper-stats-game img {
    height: 40px;
}

.match-bottom-wrapper-stats-game-header {
    padding: 5px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #26262c;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    min-height: 60px;
}

.match-bottom-wrapper-header-stats-game-header-winner {
    display: flex;
    align-items: center;
}

.match-bottom-wrapper-header-stats-game-header-winner-value {
    margin: 0 4px;
}

.match-bottom-wrapper-stats-game-content {
    padding: 20px;
}

.match-bottom-wrapper-stats-game-content-begin-value,
.match-bottom-wrapper-stats-game-content-end-value,
.match-bottom-wrapper-stats-game-content-status-value,
.match-bottom-wrapper-stats-game-content-map-value {
    color: #c8354e;
    font-weight: 600;
}

.match-bottom-wrapper-stats-game-content-teams-lol-header img {
    height: 18px;
    width: auto;
}

.match-bottom-wrapper-stats-game-content-teams {
    margin-top: 15px;
}

.match-bottom-wrapper-stats-game-content-teams tr th {
    text-align: center;
}

.match-bottom-wrapper-stats-game-content-teams th,
.match-bottom-wrapper-stats-game-content-teams td {
    padding: 5px 10px;
    border-bottom: 1px solid #333;
}

.match-bottom-wrapper-stats-game-content-teams {
    width: unset !important;
}

.match-bottom-wrapper-stats-game-content-rounds-one,
.match-bottom-wrapper-stats-game-content-rounds-two {
    display: flex;
    flex-wrap: wrap;
}

.match-bottom-wrapper-stats-game-content-rounds-one {
    margin-top: 15px;
}

.match-bottom-wrapper-stats-game-content-rounds-one-team,
.match-bottom-wrapper-stats-game-content-rounds-two-team {
    width: 50px;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.match-bottom-wrapper-stats-game-content-rounds-one-team img,
.match-bottom-wrapper-stats-game-content-rounds-two-team img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

.match-bottom-wrapper-stats-game-content-rounds-one-round,
.match-bottom-wrapper-stats-game-content-rounds-two-round {
    height: 18px;
    width: 18px;
}

.match-bottom-wrapper-stats-game-content-rounds-one-round img,
.match-bottom-wrapper-stats-game-content-rounds-two-round img {
    height: 13px;
}

.match-teams-team-one-score,
.match-teams-team-two-score {
    position: absolute;
    font-size: 32px;
    font-weight: 500;
}

.match-teams-team-one-score {
    top: 50%;
    right: 50px;
    transform: translate(0, -50%);
}

.match-teams-team-two-score {
    top: 50%;
    left: 50px;
    transform: translate(0, -50%);
}
.btn-matchbet-login {
    width: 100%;
}
.matchbet-bets-closed-text {
    background-color: #a22238;
    border: 1px solid #c8354e;
    color: #fff;
    font-weight: 600;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    text-align: center;
    padding: 5px;
    width: 100%;
    display: block;
}
/* The container must be positioned relative: */
.tournament-select,
.status-select {
    position: relative;
    width: 150px;
}

.tournament-select select,
.status-select select {
    display: none; /*hide original SELECT element: */
}

.tournament-select .select-selected,
.status-select .select-selected {
    border-radius: 6px;
    background-color: #1c1c22;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
    color: #545354;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.4) transparent;
    cursor: pointer;
}

/* Style the arrow inside the select element: */
.tournament-select .select-selected:after,
.status-select .select-selected:after {
    position: absolute;
    content: "";
    top: 16px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #545354 transparent transparent transparent;
}

.tournament-select .select-selected.select-arrow-active,
.status-select .select-selected.select-arrow-active {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Point the arrow upwards when the select box is open (active): */
.tournament-select .select-selected.select-arrow-active:after,
.status-select .select-selected.select-arrow-active:after {
    border-color: transparent transparent #545354 transparent;
    top: 7px;
}

/* style the items (options), including the selected item: */
.tournament-select .select-items div,
.select-selected,
.status-select .select-items div,
.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.4) transparent;
    cursor: pointer;
}

/* Style items (options): */
.tournament-select .select-items,
.status-select .select-items {
    position: absolute;
    background-color: #1f1f25;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    text-align: left;
}

/* Hide the items when the select box is closed: */
.tournament-select .select-hide,
.status-select .select-hide {
    display: none;
}

.tournament-select .select-items div:hover,
.same-as-selected,
.status-select .select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.4);
}

.matches-el-bet-count {
    justify-content: center;
    align-items: flex-end;
    display: none;
    position: absolute;
    top: -24px;
    left: 10px;
    color: #666;
    line-height: 14px;
}

.matches-el-bet-count i {
    line-height: 14px;
    font-size: 18px;
}

.matches-el-date {
    position: absolute;
    top: -27px;
    right: 10px;
    color: #666;
}

.matches-el-tier {
    position: absolute;
    top: -27px;
    left: 10px;
    color: #666;
}

.matches-apps {
    display: flex;
    flex-wrap: wrap;
}
.status-select {
    margin-right: 10px;
}

.my-bets-button {
    color: #545354;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.4) transparent;
    cursor: pointer;
    background-color: #1c1c22;
    border-radius: 10px;
    width: 100px;
    height: 39px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-bets-button:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
}

.match-live-available-tooltip {
    font-size: 16px;
    cursor: pointer;
    margin-left: 5px;
}

.match-live-available-tooltip-container {
    font-size: 14px;
}

#account-matchbets-modal .account-info-table a,
#account-combo-matchbets-modal .account-info-table a {
    color: unset !important;
    display: flex;
    align-items: center;
}

#account-matchbets-modal .account-info-table a.redtext2 {
    color: #c8354e !important;
    font-size: 12px !important;
}

#account-matchbets-modal .td-match-link {
}

#account-matchbets-modal .td-match-name,
#account-combo-matchbets-modal .td-match-name {
    margin-right: 5px;
}

#account-matchbets-modal .account-matchbet-comboid {
    display: none;
}

#account-matchbets-modal .account-matchbet-action {
    display: none;
}

#account-matchbets-modal .material-icons,
#account-combo-matchbets-modal .material-icons {
    font-size: 14px;
}

@media only screen and (max-width: 1000px) {
    .matches {
        grid-template-columns: 100%;
    }
    .match-bets {
        flex-direction: column;
    }
    .match-bets-team {
        width: 100%;
    }
    .match-container .match-iframe-placeholder {
        font-size: 18px;
    }
    .match-container .match-top {
        display: block;
    }
    .match-container .match-bet {
        margin-left: 0px !important;
        margin-top: 20px;
    }
    .match-teams-team-one-logo,
    .match-teams-team-two-logo {
        height: 40px;
        width: 40px;
    }
}

@media only screen and (max-width: 720px) {
    .matches-el-team-one-logo,
    .matches-el-team-two-logo {
        display: none !important;
    }
    .match-teams-team-one-logo,
    .match-teams-team-two-logo {
        display: none !important;
    }
    #modal-place-matchbet {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1200px) {
    .match-container {
        flex-direction: column;
        padding: 0;
    }
    .match-container .match-bet-list,
    .match-container .match-bet-summary {
        min-height: unset !important;
    }
    .match-bet-list {
        order: 1;
    }
    .match-bet-summary {
        margin-top: 30px;
        order: 2;
    }
    .match {
        padding: 0 !important;
        margin-top: 30px;
        order: 3;
    }
    .match-bet-summary-bet-panel {
        margin: 20px 10px 10px 10px;
    }
    .match-bet-list-title-action {
        display: none;
    }
    .match-details-info {
        flex-direction: column;
    }
    .match-details-custom-message {
        justify-content: center;
    }
}

#content-deposit-options h4 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
}

#content-deposit-options {
    word-wrap: normal !important;
    white-space: normal !important;
    word-break: normal;
}

#content-deposit-options .row {
    margin-bottom: 15px;
}

section#content-deposit-options p {
    margin: 10px 0px 0px;
    color: #7e7e82;
}

section#content-deposit-options p.redtext {
    margin: 10px 0px 0px;
    color: #c8354e;
}

.deposit-options-loading,
.loading-spinner-xl {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

.deposit-options-loading .spinner-layer,
.loading-spinner-xl .spinner-layer {
    border-color: #c32d4f !important;
}

.deposit-options-loading .preloader-wrapper,
.loading-spinner-xl .preloader-wrapper {
    width: 100px;
    height: 100px;
}

.deposit-options-loaded {
    display: none;
}

.deposit-option-country-container label {
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.depositSelector {
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
}

.depositSelector .deposit-option {
    clear: both;
    min-height: 75px;
    max-width: 900px;
    background: #18181d;
    border: 2px solid #18181d;
    margin-bottom: 5px;
    padding: 10px;
    position: relative;
    color: #696979;
    white-space: normal !important;
    word-break: normal;
    display: inline-block;
    transition: all 150ms;
}

.depositSelector .deposit-option:first-child {
    border-radius: 4px 0 0 4px;
}

.depositSelector .deposit-option:last-child {
    border-radius: 0 4px 4px 0;
}

.depositSelector .deposit-option:first-child:last-child {
    border-radius: 4px;
}

.depositSelector .deposit-option-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.depositSelector .deposit-option:hover {
    border-color: #c32d4f;
    background: #16161b;
}

.depositSelector .deposit-option-list {
    display: table;
    min-height: 75px;
    padding: 10px 10px 40px 10px;
}

.depositSelector .deposit-option-item {
    display: inline-block;
    width: 300px;
    text-align: left;
}

.depositSelector .coming-soon {
    min-height: auto;
    padding: 10px;
}

.do-crypto-info span {
    margin-top: 10px;
    display: block;
    color: #ffc870;
}

.depositSelector .disabled,
.depositSelector .disabled:hover {
    background: #1f1f25 !important;
    border-color: #1f1f25 !important;
    color: #696979 !important;
    cursor: default;
}

.depositSelector .deposit-option .do-provider {
    width: 100px;
    height: 60px;
    background: url("/static/images/csgo500_sm.png") no-repeat;
    background-color: #1c1c22;
    border: 5px solid #1c1c22;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    border-radius: 4px;
}

.depositSelector .do-subtitle {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: calc(100% - 110px);
    text-align: center;
    font-weight: 800;
    color: hsl(240, 7%, 52%);
}

.depositSelector .deposit-option .do-provider-csgo {
    background-image: url("/static/images/payment/other/csgo.png");
    background-size: 100%;
}

.depositSelector .deposit-option .do-provider-dota2 {
    background-image: url("/static/images/shops/dota2_shop.png");
    background-size: 100%;
}

.depositSelector .deposit-option .do-provider-tf2 {
    background-image: url("/static/images/shops/tf2_shop.png");
    background-size: 100%;
    background-color: #523f26;
    border-color: #523f26;
}

.depositSelector .deposit-option .do-provider-rust {
    background-image: url("/static/images/shops/rust_shop.png");
    background-size: 100%;
    background-color: #732b21;
    border-color: #732b21;
}

.depositSelector .deposit-option .do-provider-btc {
    background-image: url("/static/images/payment/processed/crypto_bitcoin.png");
    background-size: 50%;
    background-color: #f79413;
    border-color: #f79413;
}

.withdrawSelector .withdraw-option .do-provider-ltc {
    background-image: url("/static/images/payment/processed/crypto_ltc.png");
    background-size: 50%;
    background-color: #8c8c8c;
    border-color: #8c8c8c;
}

.withdrawSelector .withdraw-option .do-provider-bch {
    background-image: url("/static/images/payment/processed/crypto_bch.png");
    background-size: 50%;
    background-color: #00c947;
    border-color: #00c947;
}

.withdrawSelector .withdraw-option .wo-provider-xrp {
    background-image: url("/static/images/payment/processed/crypto_xrp.png");
    background-size: 40%;
    background-color: #24292f;
    border-color: #24292f;
}

.withdrawSelector .withdraw-option .wo-provider-xlm {
    background-image: url("/static/images/payment/processed/crypto_xlm.png");
    background-size: 40%;
    background-color: #121315;
    border-color: #121315;
}

.withdrawSelector .withdraw-option .wo-provider-eos {
    background-image: url("/static/images/payment/processed/crypto_eos.png");
    background-size: 50%;
    background-color: #103294;
    border-color: #103294;
}

.depositSelector .deposit-option .do-provider-eth {
    background-image: url("/static/images/payment/processed/crypto_ethereum.png");
    background-size: 40%;
    background-color: #5e7def;
    border-color: #5e7def;
}

.depositSelector .deposit-option .do-provider-ltc {
    background-image: url("/static/images/payment/processed/crypto_litecoin.svg");
    background-size: 40%;
    background-color: #bebebe;
    border-color: #bebebe;
}

.depositSelector .deposit-option .do-provider-bch {
    background-image: url("/static/images/payment/processed/crypto_bitcoin_cash.png");
    background-size: 40%;
    background-color: #8dc351;
    border-color: #8dc351;
}

.depositSelector .deposit-option .do-provider-xrp {
    background-image: url("/static/images/payment/processed/crypto_xrp.png");
    background-size: 40%;
    background-color: #24292f;
    border-color: #24292f;
}

.depositSelector .deposit-option .do-provider-xlm {
    background-image: url("/static/images/payment/processed/crypto_xlm.png");
    background-size: 40%;
    background-color: #121315;
    border-color: #121315;
}

.depositSelector .deposit-option .do-provider-eos {
    background-image: url("/static/images/payment/processed/crypto_eos.png");
    background-size: 40%;
    background-color: #133294;
    border-color: #133294;
}

.depositSelector .deposit-option .do-provider-altcoins {
    background-image: url("/static/images/payment/processed/crypto_altcoins.png");
    background-size: 40%;
    background-color: #1c1c22;
    border-color: #1c1c22;
}

.depositSelector .deposit-option .do-provider-coinsell {
    background-image: url("/static/images/payment/resellers/coinsell.png");
    background-size: contain;
    background-color: #ed1f35;
    border-color: #ed1f35;
}

.depositSelector .deposit-option .do-provider-csgocoins {
    background-image: url("/static/images/payment/resellers/csgocoins.png");
    background-size: contain;
    background-color: #255f79;
    border-color: #255f79;
}

.depositSelector .deposit-option .do-provider-csgolombard {
    background-image: url("/static/images/payment/resellers/lombard.png");
    background-size: contain;
    background-color: #1e1e1e;
    border-color: #1e1e1e;
}

.depositSelector .deposit-option .do-provider-paypal {
    background-image: url("/static/images/payment/processed/paypal.png");
    background-size: 90%;
}

.depositSelector .deposit-option .do-provider-gpay {
    background-image: url(/static/images/payment/processed/gpay.png);
    background-size: 80%;
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}

.depositSelector .deposit-option .do-provider-paysafecard {
    background-image: url("/static/images/payment/processed/paysafecard.png");
}

.depositSelector .deposit-option .do-provider-visamastercard {
    background-image: url("/static/images/payment/rmt/visa_mastercard.png");
}

.depositSelector .deposit-option-list .do-provider {
    display: table-cell;
}

.depositSelector .do-payment-methods {
    vertical-align: middle;
    text-align: right;
}

.depositSelector .deposit-option-list .do-payment-methods {
    display: table-cell;
}

.depositSelector .do-payment-method {
    display: inline-block;
    width: 100px;
    height: 75px;
    margin: 3px;
    background: #26262c url("/static/images/payment/processed/alipay.png") no-repeat;
    background-size: 80%;
    background-position: center;
    vertical-align: middle;
    text-align: center;
}

.depositSelector .do-payment-method.do-payment-visa {
    background-image: url("/static/images/payment/processed/visa.png?v=1");
}

.depositSelector .do-payment-method.do-payment-mastercard {
    background-image: url("/static/images/payment/processed/mastercard.png?v=1");
}

.depositSelector .do-payment-method.do-payment-unionpay {
    background-image: url("/static/images/payment/processed/unionpay.png?v=1");
}

.depositSelector .do-payment-method.do-payment-qiwi {
    background-image: url("/static/images/payment/processed/qiwi.png?v=1");
}

.depositSelector .do-payment-method.do-payment-trustly {
    background-image: url("/static/images/payment/processed/trustly.png?v=1");
}

.depositSelector .do-payment--more {
    background: #26262c;
    padding: 2px;
    color: #a0a0a0;
    vertical-align: middle !important;
    display: inline-block;
}

.depositSelector .do-payment--more span {
    vertical-align: middle !important;
    display: inline-block;
    margin: auto;
    font-size: 13px;
    margin-top: 25px;
    /*     background: #00c; */
}

.depositSelector .do-description {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: #696979;
}

.depositSelector .deposit-option-dynamic {
    margin-right: 4px;
}

.depositSelector .deposit-option-dynamic .do-provider {
    background-size: contain;
}

.btn_deposit_back {
    font-size: 18px;
    padding: 0px 0px;
    margin: 0px;
    box-shadow: none;
    background: transparent;
    border: none;
}

.btn_deposit_back i {
    vertical-align: top;
    font-size: 20px;
}

.btn_deposit_back:hover {
    color: #c32d4f;
    box-shadow: none;
    background: transparent;
    border: none;
}

#content-deposit-options .content-title,
#content-inventory .content-title {
    margin-bottom: 0px !important;
}

.deposit-option-country-container .select-wrapper {
    max-width: 350px;
}

.deposit-option-country-container .select-wrapper input.select-dropdown {
    border: none;
    box-shadow: none;
    background: #18181d;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 20px;
    color: #fff;
    font-family: "Open Sans", Helvetica, sans-serif;
}

.deposit-option-country-container ul {
    background: #33333a;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
}

.deposit-option-country-container ul li:hover,
.deposit-option-country-container ul li.selected {
    background-color: #3e3e48;
}

.deposit-option-country-container ul li {
    padding: 0px;
    min-height: 30px !important;
    line-height: 1em;
}

.deposit-option-country-container ul li span {
    padding: 5px;
    /* height: 15px; */
    color: #fff;
    font-size: 14px;
}

.deposit-option-country-container ul li img {
    height: 15px;
    width: 25px;
    vertical-align: middle;
    margin-top: 8px;
    display: inline-block !important;
    border: 1px solid #9c9caf;
}

.rmt-deposit-form p.big {
    color: #ffc870cc;
    font-size: 20px;
}

.rmt-deposit-form p.big strong {
    font-weight: 800;
    color: #ffc870;
}

.rmt-dynamic-panel {
    background: #26262c;
    padding: 10px 10px;
    display: none;
    word-wrap: normal !important;
    white-space: normal !important;
    word-break: normal;
}

.rmt-dynamic-panel .btn-toolbar {
    margin: 20px 0px !important;
    display: inline-block;
    width: auto !important;
    text-align: center;
}

.rmt-dynamic-panel .rmt-provider-select {
    text-align: left;
    background-color: #1f1f24 !important;
    border: 1px solid #1f1f24;
    border-radius: 5px;
    padding: 5px;
}

.rmt-dynamic-panel .rmt-provider-button {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100% !important;
    padding: 3px 10px;
    margin: 0px 0px 5px !important;
    text-align: left;
    border: 1px solid #1f1f24;
    border-radius: 5px;
}

.rmt-dynamic-panel .rmt-provider-button .rmt-provider-img {
    align-self: center;
    flex: 1;
    max-width: 65px;
}

.rmt-dynamic-panel .rmt-provider-button .rmt-provider-name {
    align-self: center;
    flex: 1;
    margin-left: 10px;
    max-width: 100px;
}

.rmt-dynamic-panel .rmt-provider-button .recommended {
    vertical-align: middle;
    align-self: center;
    justify-content: flex-end;
    flex: 1;
    text-align: right;
    color: #ffffff99;
}

.rmt-dynamic-panel .rmt-provider-button:last-child {
    margin-bottom: 0px !important;
}

.rmt-dynamic-panel .rmt-deposit-submit {
    width: 100% !important;
    padding: 8px;
}

.rmt-dynamic-panel .rmt-provider-button.rmt-provider-active,
.rmt-dynamic-panel .rmt-provider-button:hover,
.rmt-dynamic-panel .rmt-provider-button:focus {
    background-color: #6b293b !important;
    /*     background-color: #1a1a1f !important; */
    outline: none;
}

.row.rmt_extra_field {
    background: #18181d;
    border-top: 1px solid #c32d4f;
    margin: 0px 10px;
    color: #ffffff;
    text-align: left;
    padding: 10px;
    font-size: 12px;
    /* margin-top: 10px; */
}

.row.rmt_extra_field:first-child {
    margin-top: 0px;
}

.row.rmt_extra_field p {
    margin: 0px 0px 15px !important;
}

.row.rmt_extra_field i.material-icons {
    vertical-align: middle;
}

.row.rmt_extra_field .btn-toolbar {
    margin: 0px !important;
}

.row.rmt_extra_field select {
    display: inline-block;
    background: #1c1c22;
    border: 1px solid #1c1c22 !important;
    outline: none;
}

.row.rmt_extra_field select option[value=""] {
    color: #878787;
}

.row.rmt_extra_field .rmt_birthdate_year::placeholder {
    color: #fff;
    font-size: 13px;
}

.row.rmt_extra_field .rmt_birthdate_day,
.row.rmt_extra_field .rmt_birthdate_month,
.row.rmt_extra_field .rmt_birthdate_year {
    width: 25% !important;
}

.rmt-modal .modal-dialog {
    padding: 10px 20px;
    font-family: "Open Sans", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    color: #ccc;
    border: 1px solid #37af59;
    box-shadow: 0px 0px 2px #37af59;
}

.rmt-modal .modal-dialog h4,
.rmt-modal .modal-dialog p.bux,
.rmt-modal .modal-dialog i {
    color: #37af59;
}

.rmt-modal .modal-dialog p.bux {
    font-size: 24px;
}

.payment-container {
}

.payment-container ul {
}
.payment-container ul li {
    list-style: disc;
    margin-left: 20px;
}

.payment-container .assistance {
    font-size: 13px;
    margin-top: 20px;
    color: #ccc;
}

.payment-container .assistance p {
    font-weight: 800;
}

.payment-container .assistance ul {
    font-family: "Ubuntu Mono", Consolas, monospace;
}

.tier-limit-warning {
    color: #fff !important;
    font-size: 14px;
    font-weight: bold;
    background: #c8354e;
    padding: 5px;
    text-align: center;
}

.depositSelector .deposit-option .do-provider.do-provider-csgo {
    background-color: #2b3254;
    border-color: #2b3254;
}
.depositSelector .deposit-option .do-provider.do-provider-dota2 {
    background-color: #2d2a2a;
    border-color: #2d2a2a;
}
.depositSelector .deposit-option .do-provider.do-provider-visamastercard {
    background-color: #00579f;
    border-color: #00579f;
    background-size: contain;
}
.depositSelector .deposit-option .do-provider.do-provider-paypal {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-provider-paysafecard,
.depositSelector .deposit-option .do-provider.do-paysafecard {
    background-color: #c7f7ff;
    border-color: #c7f7ff;
    background-size: 80%;
}

.depositSelector .deposit-option .do-provider.do-cards_global {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-mastercard_global {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-visa_global {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-visa_mastercard_uah_UA {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-visa_chile_CL,
.depositSelector .deposit-option .do-provider.do-visa_turkey_TR,
.depositSelector .deposit-option .do-provider.do-visa_debit_turkey_TR,
.depositSelector .deposit-option .do-provider.do-visa_nigeria_NG,
.depositSelector .deposit-option .do-provider.do-visa_debit_nigeria_NG,
.depositSelector .deposit-option .do-provider.do-visa_peru_PE,
.depositSelector .deposit-option .do-provider.do-visa_debit_peru_PE,
.depositSelector .deposit-option .do-provider.do-visa_south_africa_ZA,
.depositSelector .deposit-option .do-provider.do-visa_debit_south_africa_ZA,
.depositSelector .deposit-option .do-provider.do-visa_senegal_SN,
.depositSelector .deposit-option .do-provider.do-visa_debit_senegal_SN,
.depositSelector .deposit-option .do-provider.do-mastercard_senegal_SN,
.depositSelector .deposit-option .do-provider.do-mastercard_debit_senegal_SN,
.depositSelector .deposit-option .do-provider.do-visa_debit_uruguay_UY,
.depositSelector .deposit-option .do-provider.do-mastercard_debit_uruguay_UY,
.depositSelector .deposit-option .do-provider.do-mastercard_turkey,
.depositSelector .deposit-option .do-provider.do-mastercard_debit_turkey_TR,
.depositSelector .deposit-option .do-provider.do-mastercard_nigeria_NG,
.depositSelector .deposit-option .do-provider.do-mastercard_debit_nigeria_NG,
.depositSelector .deposit-option .do-provider.do-mastercard_peru_PE,
.depositSelector .deposit-option .do-provider.do-mastercard_debit_peru_PE,
.depositSelector .deposit-option .do-provider.do-mastercard_south_africa_ZA,
.depositSelector .deposit-option .do-provider.do-mastercard_debit_south_africa_ZA,
.depositSelector .deposit-option .do-provider.do-mastercard_uruguay_UY,
.depositSelector .deposit-option .do-provider.do-visa_uruguay_UY {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-visa_debit_chile_CL {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-troy_turkey_TR {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-visa_colombia {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-ru_pay_IN {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-carnet_credito_mexico_MX {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-oca_uruguay_UY {
    background-color: #7bc2de;
    border-color: #7bc2de;
}
.depositSelector .deposit-option .do-provider.do-visa_indonesia_ID {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-presto_chile_CL {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-mastercard_brazil_BR {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-aura_brazil_BR {
    background-color: #fff200;
    border-color: #fff200;
    background-size: 110%;
}
.depositSelector .deposit-option .do-provider.do-jcb_BR {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 110%;
}
.depositSelector .deposit-option .do-provider.do-jcb_ID {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 110%;
}
.depositSelector .deposit-option .do-provider.do-cmr_chile_CL {
    background-color: #1e3c34;
    border-color: #1e3c34;
    background-size: 110%;
}
.depositSelector .deposit-option .do-provider.do-inter_bank_PE {
    background-color: #1e3c34;
    border-color: #1e3c34;
}
.depositSelector .deposit-option .do-provider.do-american_express_brazil_BR,
.depositSelector .deposit-option .do-provider.do-american_express_turkey_TR,
.depositSelector .deposit-option .do-provider.do-american_express_peru_PE,
.depositSelector .deposit-option .do-provider.do-american_express_uruguay_UY,
.depositSelector .deposit-option .do-provider.do-american_express_south_africa_ZA {
    background-color: #0077a6;
    border-color: #0077a6;
}
.depositSelector .deposit-option .do-provider.do-hipercard_brazil_BR {
    background-color: #9c2017;
    border-color: #9c2017;
}
.depositSelector .deposit-option .do-provider.do-discover_brazil_BR {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-mastercard_chile_CL {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-skrill {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-german_banks_DE {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-american_express_chile_CL {
    background-color: #0077a6;
    border-color: #0077a6;
}
.depositSelector .deposit-option .do-provider.do-diners_club_peru_PE {
    background-color: #232121;
    border-color: #232121;
}
.depositSelector .deposit-option .do-provider.do-diners_club_uruguay_UY {
    background-color: #232121;
    border-color: #232121;
}
.depositSelector .deposit-option .do-provider.do-diners_club_chile_CL {
    background-color: #232121;
    border-color: #232121;
}
.depositSelector .deposit-option .do-provider.do-magna_chile_CL {
    background-color: #2f368a;
    border-color: #2f368a;
}
.depositSelector .deposit-option .do-provider.do-visa_debit_colombia_CO {
    background-color: #00579f;
    border-color: #00579f;
}
.depositSelector .deposit-option .do-provider.do-mastercard_colombia_CO {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-mastercard_debit_colombia_CO {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-american_express_colombia_CO {
    background-color: #0077a6;
    border-color: #0077a6;
}
.depositSelector .deposit-option .do-provider.do-diners_club_colombia_CO {
    background-color: #232121;
    border-color: #232121;
}
.depositSelector .deposit-option .do-provider.do-mastercard_indonesia_ID {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-american_express_indonesia_ID {
    background-color: #0077a6;
    border-color: #0077a6;
}
.depositSelector .deposit-option .do-provider.do-carnet_debito_mexico_MX {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-lider_uruguay_UY {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-web_money {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
    background-size: 120%;
}
.depositSelector .deposit-option .do-provider.do-advanced_cash {
    background-color: #7ad2b1;
    border-color: #7ad2b1;
}
.depositSelector .deposit-option .do-provider.do-cashu {
    background-color: #1b496f;
    border-color: #1b496f;
}
.depositSelector .deposit-option .do-provider.do-cash {
    background-color: #c8354e;
    border-color: #c8354e;
}
.depositSelector .deposit-option .do-provider.do-caja_arequipa_PE {
    background-color: #228a46;
    border-color: #228a46;
}
.depositSelector .deposit-option .do-provider.do-western_union_PE {
    background-color: #000000;
    border-color: #000000;
}
.depositSelector .deposit-option .do-provider.do-caja_huancayo_PE {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-caja_trujillo_PE {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-eps_AT {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-giropay_DE {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-caja_tacna_PE {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-interbank_PE {
    background-color: #224a30;
    border-color: #224a30;
}
.depositSelector .deposit-option .do-provider.do-scotiabank_PE {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_de_credito_PE {
    background-color: #17174a;
    border-color: #17174a;
}
.depositSelector .deposit-option .do-provider.do-bbva_continental_PE {
    background-color: #3a8cd2;
    border-color: #3a8cd2;
}
.depositSelector .deposit-option .do-provider.do-western_union_PA {
    background-color: #000000;
    border-color: #000000;
}
.depositSelector .deposit-option .do-provider.do-banamex_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_azteca_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-7_eleven_MX {
    background-color: #008061;
    border-color: #008061;
}
.depositSelector .deposit-option .do-provider.do-banco_inbursa_MX {
    background-color: #2020cc;
    border-color: #2020cc;
}
.depositSelector .deposit-option .do-provider.do-hsbc_mexico_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banorte_MX {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-scotiabank_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-santander_MX {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-punto_xpress_SL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_guayaquil_EC {
    background-color: #b5dfff;
    border-color: #b5dfff;
}
.depositSelector .deposit-option .do-provider.do-banco_pichincha_EC {
    background-color: #7bc2de;
    border-color: #7bc2de;
}
.depositSelector .deposit-option .do-provider.do-su_red_CO {
    background-color: #151573;
    border-color: #151573;
}
.depositSelector .deposit-option .do-provider.do-movil_red_CO {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-via_baloto_CO {
    background-color: #d88734;
    border-color: #d88734;
}
.depositSelector .deposit-option .do-provider.do-caja_vecina_CL {
    background-color: #ffddab;
    border-color: #ffddab;
}
.depositSelector .deposit-option .do-provider.do-serviestado_CL {
    background-color: #1a1a2b;
    border-color: #1a1a2b;
}
.depositSelector .deposit-option .do-provider.do-lider_CL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_itau_BR {
    background-color: #272726;
    border-color: #272726;
}
.depositSelector .deposit-option .do-provider.do-lotericas_BR {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-servipag_CL {
    background-color: #e0e2e3;
    border-color: #e0e2e3;
}
.depositSelector .deposit-option .do-provider.do-davivienda_CO {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-spei_MX {
    background-color: #716bd8;
    border-color: #716bd8;
}
.depositSelector .deposit-option .do-provider.do-pago_efectivo_PE {
    background-color: #ad881c;
    border-color: #ad881c;
}
.depositSelector .deposit-option .do-provider.do-spei_PE {
    background-color: #716bd8;
    border-color: #716bd8;
}
.depositSelector .deposit-option .do-provider.do-red_pagos_UY {
    background-color: #738042;
    border-color: #738042;
}
.depositSelector .deposit-option .do-provider.do-abitab_UY {
    background-color: #444f9a;
    border-color: #444f9a;
}
.depositSelector .deposit-option .do-provider.do-express_de_lider_CL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-a_cuenta_CL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-pichincha_mi_vecino_EC {
    background-color: #4987e4;
    border-color: #4987e4;
}
.depositSelector .deposit-option .do-provider.do-bodega_MX {
    background-color: #4caf50;
    border-color: #4caf50;
}
.depositSelector .deposit-option .do-provider.do-circle_k_MX {
    background-color: #c33d36;
    border-color: #c33d36;
}
.depositSelector .deposit-option .do-provider.do-el_asturiano_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmacias_benavides_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmacias_del_ahorro_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-sams_club_MX {
    background-color: #f1eaea;
    border-color: #f1eaea;
}
.depositSelector .deposit-option .do-provider.do-superama_MX {
    background-color: #8794f1;
    border-color: #8794f1;
}
.depositSelector .deposit-option .do-provider.do-walmart_MX {
    background-color: #1b1b67;
    border-color: #1b1b67;
}
.depositSelector .deposit-option .do-provider.do-boleto_flash_BR {
    background-color: #652734;
    border-color: #652734;
}
.depositSelector .deposit-option .do-provider.do-bbva_bancomer_MX {
    background-color: #3a8cd2;
    border-color: #3a8cd2;
}
.depositSelector .deposit-option .do-provider.do-banco_agrario_pse_CO {
    background-color: #25586f;
    border-color: #25586f;
}
.depositSelector .deposit-option .do-provider.do-banco_av_villas_pse_CO {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_caja_social_pse_CO {
    background-color: #b0e2ff;
    border-color: #b0e2ff;
}
.depositSelector .deposit-option .do-provider.do-banco_colpatria_pse_CO {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_cooperativo_coop_central_pse_CO {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}
.depositSelector .deposit-option .do-provider.do-banco_davivienda_pse_CO {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-banco_de_bogota_pse_CO {
    background-color: #243154;
    border-color: #243154;
}
.depositSelector .deposit-option .do-provider.do-banco_de_occidente_pse_CO {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_falabella_pse_CO {
    background-color: #caffdf;
    border-color: #caffdf;
}
.depositSelector .deposit-option .do-provider.do-banco_gnb_sudameris_pse_CO {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-banco_pichincha_pse_CO {
    background-color: #f7ea75;
    border-color: #f7ea75;
}
.depositSelector .deposit-option .do-provider.do-banco_popular_pse_CO {
    background-color: #1e3c34;
    border-color: #1e3c34;
}
.depositSelector .deposit-option .do-provider.do-banco_pro_credit_pse_CO {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-bancolombia_pse_CO {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-bancoomeva_pse_CO {
    background-color: #1e3c34;
    border-color: #1e3c34;
}
.depositSelector .deposit-option .do-provider.do-bbva_pse_CO {
    background-color: #3a8cd2;
    border-color: #3a8cd2;
}
.depositSelector .deposit-option .do-provider.do-citibank_pse_CO {
    background-color: #7ea8dc;
    border-color: #7ea8dc;
}
.depositSelector .deposit-option .do-provider.do-daviplata_pse_CO {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-itau_corpbanca_pse_CO {
    background-color: #c1b120;
    border-color: #c1b120;
}
.depositSelector .deposit-option .do-provider.do-nequi_pse_CO {
    background-color: #d842b1;
    border-color: #d842b1;
}
.depositSelector .deposit-option .do-provider.do-banco_bci_CL {
    background-color: #243154;
    border-color: #243154;
}
.depositSelector .deposit-option .do-provider.do-banco_estado_CL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-santander_CL {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-banrisul_BR {
    background-color: #161d31;
    border-color: #161d31;
}
.depositSelector .deposit-option .do-provider.do-caixa {
    background-color: #0e374e;
    border-color: #0e374e;
}
.depositSelector .deposit-option .do-provider.do-pse_CO {
    background-color: #062c7c;
    border-color: #062c7c;
}
.depositSelector .deposit-option .do-provider.do-upi_IN {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-net_banking_india_IN {
    background-color: #800e21;
    border-color: #800e21;
}
.depositSelector .deposit-option .do-provider.do-pay_tm_wallet_IN {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 80% !important;
}
.depositSelector .deposit-option .do-provider.do-virtual_accounts_ID {
    background-color: #222227;
    border-color: #222227;
}
.depositSelector .deposit-option .do-provider.do-xendit_wallet_ID {
    background-color: #222227;
    border-color: #222227;
}
.depositSelector .deposit-option .do-provider.do-retail_outlets_ID {
    background-color: #222227;
    border-color: #222227;
}
.depositSelector .deposit-option .do-provider.do-banco_do_brasil_peru_PE {
    background-color: #13133c;
    border-color: #13133c;
}
.depositSelector .deposit-option .do-provider.do-bbva_PE {
    background-color: #3a8cd2;
    border-color: #3a8cd2;
}
.depositSelector .deposit-option .do-provider.do-tbank_CL {
    background-color: #26262d;
    border-color: #26262d;
}
.depositSelector .deposit-option .do-provider.do-webpay_CL {
    background-color: #0a0a07;
    border-color: #0a0a07;
}
.depositSelector .deposit-option .do-provider.do-scotiabank_azul_CL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-safety_pay {
    background-color: #9adaeb;
    border-color: #9adaeb;
}
.depositSelector .deposit-option .do-provider.do-efecty_CO {
    background-color: #a58f4e;
    border-color: #a58f4e;
}
.depositSelector .deposit-option .do-provider.do-bancomer_MX {
    background-color: #3a8cd2;
    border-color: #3a8cd2;
}
.depositSelector .deposit-option .do-provider.do-po_li {
    background-color: #f0f5f9;
    border-color: #f0f5f9;
}
.depositSelector .deposit-option .do-provider.do-bradesco_BR {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-banco_do_brasil_BR {
    background-color: #13133c;
    border-color: #13133c;
}
.depositSelector .deposit-option .do-provider.do-santander_BR {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-advcash {
    background-color: #7ad2b1;
    border-color: #7ad2b1;
}
.depositSelector .deposit-option .do-provider.do-alfabank {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-alipay {
    background-color: #255f79;
    border-color: #255f79;
}
.depositSelector .deposit-option .do-provider.do-atf24 {
    background-color: #071a2b;
    border-color: #071a2b;
}
.depositSelector .deposit-option .do-provider.do-beeline {
    background-color: #b18d16;
    border-color: #b18d16;
}
.depositSelector .deposit-option .do-provider.do-boleto {
    background-color: #545454;
    border-color: #545454;
}
.depositSelector .deposit-option .do-provider.do-cashtocode {
    background-color: #9adaeb;
    border-color: #9adaeb;
}
.depositSelector .deposit-option .do-provider.do-cup {
    background-color: #1e4f88;
    border-color: #1e4f88;
}
.depositSelector .deposit-option .do-provider.do-cup_bank {
    background-color: #1e4f88;
    border-color: #1e4f88;
}
.depositSelector .deposit-option .do-provider.do-cup_p2p {
    background-color: #1e4f88;
    border-color: #1e4f88;
}
.depositSelector .deposit-option .do-provider.do-union_pay {
    background-color: #1e4f88;
    border-color: #1e4f88;
}
.depositSelector .deposit-option .do-provider.do-trustly {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-ecopayz {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-kassa24 {
    background-color: #c19e37;
    border-color: #c19e37;
}
.depositSelector .deposit-option .do-provider.do-megafon {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-mts {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-oxxo {
    background-color: #fdd68b;
    border-color: #fdd68b;
}
.depositSelector .deposit-option .do-provider.do-pagofacil {
    background-color: #f3447f;
    border-color: #f3447f;
}
.depositSelector .deposit-option .do-provider.do-promsviaz {
    background-color: #80a7d8;
    border-color: #80a7d8;
}
.depositSelector .deposit-option .do-provider.do-qiwi {
    background-color: #fe8c01;
    border-color: #fe8c01;
}
.depositSelector .deposit-option .do-provider.do-rapipago {
    background-color: #071a2b;
    border-color: #071a2b;
}
.depositSelector .deposit-option .do-provider.do-sberbank {
    background-color: #6bff76;
    border-color: #6bff76;
}
.depositSelector .deposit-option .do-provider.do-tele2 {
    background-color: #222227;
    border-color: #222227;
}
.depositSelector .deposit-option .do-provider.do-wechat {
    background-color: #2c3532;
    border-color: #2c3532;
}
.depositSelector .deposit-option .do-provider.do-yandex {
    background-color: #524d3e;
    border-color: #524d3e;
}
.depositSelector .deposit-option .do-provider.do-teleingreso_ES {
    background-color: #c4e6f1;
    border-color: #c4e6f1;
}
.depositSelector .deposit-option .do-provider.do-abn_amro_NL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-asn_bank_NL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-ing_NL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-knab_bank_NL {
    background-color: #8ea6c3;
    border-color: #8ea6c3;
}
.depositSelector .deposit-option .do-provider.do-rabobank_NL {
    background-color: #4cc8f9;
    border-color: #4cc8f9;
}
.depositSelector .deposit-option .do-provider.do-sns_regio_bank_NL {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-sns_bank_NL {
    background-color: #af97da;
    border-color: #af97da;
}
.depositSelector .deposit-option .do-provider.do-triodos_bank_NL {
    background-color: #ecf7ff;
    border-color: #ecf7ff;
}
.depositSelector .deposit-option .do-provider.do-van_lanschot_bankiers_NL {
    background-color: #adffb0;
    border-color: #adffb0;
}
.depositSelector .deposit-option .do-provider.do-access_bank_nigeria {
    background-color: #d2eaff;
    border-color: #d2eaff;
    background-size: 200% !important;
}
.depositSelector .deposit-option .do-provider.do-first_bank_plc {
    background-color: #8ea6c3;
    border-color: #8ea6c3;
}
.depositSelector .deposit-option .do-provider.do-gtbank_plc {
    background-color: #ff5722;
    border-color: #ff5722;
}
.depositSelector .deposit-option .do-provider.do-zenith_bank_plc {
    background-color: #eaeaea;
    border-color: #eaeaea;
}
.depositSelector .deposit-option .do-provider.do-sterling_bank_plc {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}
.depositSelector .deposit-option .do-provider.do-providus_bank {
    background-color: #fff9c6;
    border-color: #fff9c6;
}
.depositSelector .deposit-option .do-provider.do-unity_bank_plc {
    background-color: #375d38;
    border-color: #375d38;
}
.depositSelector .deposit-option .do-provider.do-uganda_mobile {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-bancontact_BE {
    background-color: #a5d5ff;
    border-color: #a5d5ff;
}
.depositSelector .deposit-option .do-provider.do-my_bank_IT {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-verkkopankki_FI {
    background-color: #d3e2ef;
    border-color: #d3e2ef;
}
.depositSelector .deposit-option .do-provider.do-7eleven_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmacias_del_ahorro_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-alsuper_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-benavides_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-calimax_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-comercialmexicana_MX {
}
.depositSelector .deposit-option .do-provider.do-extra_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmroma_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-kiosko_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-lamasbarata_MX {
}
.depositSelector .deposit-option .do-provider.do-paycash_MX {
    background-color: #add1ef;
    border-color: #add1ef;
}
.depositSelector .deposit-option .do-provider.do-paynet_MX {
    background-color: #cdeaf7;
    border-color: #cdeaf7;
}
.depositSelector .deposit-option .do-provider.do-soriana_MX {
    background-color: #cf4037;
    border-color: #cf4037;
}
.depositSelector .deposit-option .do-provider.do-stamaria_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-telecomm_MX {
    background-color: #c9f1dd;
    border-color: #c9f1dd;
}
.depositSelector .deposit-option .do-provider.do-waldos_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-walmart_MX {
    background-color: #243c50;
    border-color: #243c50;
}
.depositSelector .deposit-option .do-provider.do-airtel_UG {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-mtn_UG {
    background-color: #206dcc;
    border-color: #206dcc;
}
.depositSelector .deposit-option .do-provider.do-airtel_GH {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-mtn_GH {
    background-color: #206dcc;
    border-color: #206dcc;
}
.depositSelector .deposit-option .do-provider.do-vodafone_GH {
    background-color: #000;
    border-color: #000;
}
.depositSelector .deposit-option .do-provider.do-provider-rmt.do-united_kingdom_banks_GB {
    background-size: 155px;
    border-color: #fff;
}
.depositSelector .deposit-option .do-provider.do-provider-rmt.do-france_banks_FR {
    background-color: #fff;
    border-color: #fff;
}
.depositSelector .deposit-option .do-provider.do-provider-rmt.do-perfect_money {
    background-color: #fff;
    border-color: #fff;
}

.depositSelector .deposit-option .do-provider.do-tron {
    background-color: #c53027;
    border-color: #c53027;
    background-size: 50%;
}

.depositSelector .deposit-option .do-provider.do-acb_asia_commercial_VN {
    background-color: #d3f4fc;
    border-color: #d3f4fc;
}
.depositSelector .deposit-option .do-provider.do-agribank_VN {
    background-color: #2b4954;
    border-color: #2b4954;
}
.depositSelector .deposit-option .do-provider.do-an_binh_bank_VN {
    background-color: #eaeaea;
    border-color: #eaeaea;
}
.depositSelector .deposit-option .do-provider.do-bac_a_bank_VN {
    background-color: #eaeaea;
    border-color: #eaeaea;
}
.depositSelector .deposit-option .do-provider.do-bidv_VN {
    background-color: #eaeaea;
    border-color: #eaeaea;
}
.depositSelector .deposit-option .do-provider.do-cards_international {
    background-color: #232121;
    border-color: #232121;
}
.depositSelector .deposit-option .do-provider.do-dong_a_bank_dong_a_jsc_bank_VN {
    background-color: #d3f4fc;
    border-color: #d3f4fc;
}
.depositSelector .deposit-option .do-provider.do-eu_bank_transfers_volt {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-bank_transfer_NG {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-eximbank_VN {
    background-color: #2b3254;
    border-color: #2b3254;
}
.depositSelector .deposit-option .do-provider.do-gp_bank_VN {
    background-color: #807022;
    border-color: #807022;
}
.depositSelector .deposit-option .do-provider.do-hd_bank_VN {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-maritime_bank_VN {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-mb_bank_military_jsc_VN {
    background-color: #2b3254;
    border-color: #2b3254;
}
.depositSelector .deposit-option .do-provider.do-nam_a_bank_VN {
    background-color: #8dbacc;
    border-color: #8dbacc;
}
.depositSelector .deposit-option .do-provider.do-ncb_bank_national_citizen_VN {
    background-color: #232121;
    border-color: #232121;
}
.depositSelector .deposit-option .do-provider.do-neosurf_europa {
    background-color: #581c44;
    border-color: #581c44;
}
.depositSelector .deposit-option .do-provider.do-neosurf_canada {
    background-color: #581c44;
    border-color: #581c44;
}
.depositSelector .deposit-option .do-provider.do-neosurf {
    background-color: #581c44;
    border-color: #581c44;
}
.depositSelector .deposit-option .do-provider.do-ocb_bank_VN {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-ocean_bank_VN {
    background-color: #d3f4fc;
    border-color: #d3f4fc;
}
.depositSelector .deposit-option .do-provider.do-pg_bank_VN {
    background-color: #93baeb;
    border-color: #93baeb;
}
.depositSelector .deposit-option .do-provider.do-sacombank_VN {
    background-color: #d3f4fc;
    border-color: #d3f4fc;
}
.depositSelector .deposit-option .do-provider.do-sai_gon_bank_VN {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-se_a_bank_VN {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-shb_VN {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-techcombank_VN {
    background-color: #441413;
    border-color: #441413;
}
.depositSelector .deposit-option .do-provider.do-tp_bank_VN {
    background-color: #232121;
    border-color: #232121;
}
.depositSelector .deposit-option .do-provider.do-vib_VN {
    background-color: #c56f31;
    border-color: #c56f31;
}
.depositSelector .deposit-option .do-provider.do-viet_a_bank_VN {
    background-color: #7cb8ec;
    border-color: #7cb8ec;
}
.depositSelector .deposit-option .do-provider.do-vietcombank_VN {
    background-color: #529e89;
    border-color: #529e89;
}
.depositSelector .deposit-option .do-provider.do-vietin_bank_VN {
    background-color: #7cb8ec;
    border-color: #7cb8ec;
}
.depositSelector .deposit-option .do-provider.do-vp_bank_VN {
    background-color: #1e3c34;
    border-color: #1e3c34;
}

.depositSelector .deposit-option .do-provider.do-mach_pay_chile_CL {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-bancamia_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-banco_credi_financiera_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-banco_santander_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-banco_serfinanza_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-cfa_cooperativa_financiera_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-coltefinanciera_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-cotrafa_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-rappipay_CO {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-cooperativa_confiar_CO {
    background-color: #f1be1e;
    border-color: #f1be1e;
}
.depositSelector .deposit-option .do-provider.do-dimonex_CO {
    background-color: #f36e1d;
    border-color: #f36e1d;
}
.depositSelector .deposit-option .do-provider.do-banco_do_brasil_web_service_BR {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-bradesco_pag_facil_BR {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-pix_BR {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-multibanco_ES {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-pagaqui_ES {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-pago_en_tienda_ES {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-abanca_ES {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-superexpress_ES {
    background-color: #fabb15;
    border-color: #fabb15;
}
.depositSelector .deposit-option .do-provider.do-servicentro_ES {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-fdl_ES {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-coservi_ES {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-corazondemaria_ES {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-teledolar_ES {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-tiendas_pronto_ES {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-quick_stop_ES {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-dtodo_ES {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-santa_clara_ES {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-spei_robot_MX {
    background-color: #33548c;
    border-color: #33548c;
    background-size: 60%;
}
.depositSelector .deposit-option .do-provider.do-afirme_pay_cash_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-hsbc_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-afirme_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmacias_maria_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmacias_barata_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmacias_roma_MX {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-westernunion_EC {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-almacenestia_EC {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-micomisariato_EC {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-farmacia_911_EC {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-italian_banks_IT {
    background-color: #ffffff;
    border-color: #ffffff;
}
.depositSelector .deposit-option .do-provider.do-bcp_PE {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}
.depositSelector .deposit-option .do-provider.do-pago_express_PY {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}
.depositSelector .deposit-option .do-provider.do-mobile_money_KE,
.depositSelector .deposit-option .do-provider.do-mobile_money_CM,
.depositSelector .deposit-option .do-provider.do-mobile_money_GH,
.depositSelector .deposit-option .do-provider.do-mobile_money_SN,
.depositSelector .deposit-option .do-provider.do-bank_transfer_ZA,
.depositSelector .deposit-option .do-provider.do-klarna_spain {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}

.depositSelector .deposit-option .do-provider.do-local_credit_debit_cards_KR {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}
.depositSelector .deposit-option .do-provider.do-global_credit_debit_cards {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}
.depositSelector .deposit-option .do-provider.do-culture_gift_certificate_KR {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}
.depositSelector .deposit-option .do-provider.do-game_gift_certificate_KR {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}
.depositSelector .deposit-option .do-provider.do-book_gift_certificate_KR {
    background-color: #ffffff;
    border-color: #ffffff;
    background-size: 100px;
}

@media (max-width: 1024px) {
    .deposit-option.deposit-option-list .do-payment-method {
        width: 80px;
        height: 45px;
    }

    .depositSelector .do-payment--more span {
        vertical-align: middle !important;
        display: inline-block;
        margin: auto;
        font-size: 12px;
        margin-top: 3px;
        word-wrap: normal !important;
        white-space: normal !important;
        word-break: normal;
    }

    .row.rmt_extra_field .rmt_birthdate_day,
    .row.rmt_extra_field .rmt_birthdate_month {
        width: 100% !important;
        margin-top: 5px;
    }

    .row.rmt_extra_field .rmt_birthdate_year {
        width: calc(100% - 20px) !important;
        margin-top: 5px;
    }
}

@media (max-width: 800px) {
    .deposit-option.deposit-option-list {
        display: block;
        white-space: normal !important;
        word-break: normal;
        display: inline-block;
    }

    .deposit-option.deposit-option-list .do-provider {
        display: block;
        width: 100%;
    }

    .deposit-option.deposit-option-list .do-payment-methods {
        display: block !important;
        margin-bottom: 15px;
    }
    .deposit-option.deposit-option-list .do-payment-method {
        display: inline-block;
        height: 45px;
    }

    .deposit-option.deposit-option-item {
        width: 100%;
        border: none;
        border-radius: 4px !important;
    }

    .deposit-option.deposit-option-item .do-subtitle {
        word-wrap: normal !important;
        white-space: normal !important;
        word-break: normal;
        display: inline-block;
    }

    .deposit-option.deposit-option-item .do-provider {
        height: 30px;
        width: calc(100% + 20px);
        background-size: contain;
        background-color: transparent;
        border: none !important;
        margin-left: -10px;
        margin-bottom: 5px;
        border-radius: 0;
    }

    .deposit-option.deposit-option-item .do-subtitle {
        display: block;
        width: 100%;
        margin: 0px !important;
    }
}

.voucher-claim {
    display: flex;
    align-items: flex-end;
    flex-flow: column wrap;
    position: relative;
}

.topbar-hidden .voucher-claim {
    margin-right: 2rem;
    transition: margin 100ms;
}

@media (max-width: 600px) {
    .voucher-claim {
        align-items: flex-start;
        margin-bottom: 1em;
        margin-right: unset;
    }
}

.voucher-claim label {
    color: rgba(255, 255, 255, 0.35);
    padding: 0.25em;
    font-size: 16px;
}

.voucher-claim .input-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

.voucher-claim i {
    padding: 0.25em;
    background: #18181d;
    border-radius: 4px 0 0 4px;
}

.voucher-claim #claimVoucherInput,
#vem-voucher-input {
    border: none;
    box-shadow: none;
    background: #18181d;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    border-radius: 0 4px 4px 0;
    padding: 0px 1em;
    padding-left: 0;
    width: 100%;
    margin: 0;
    transition: color 150ms;
}

.voucher-claim #claimVoucherInput::placeholder,
#vem-voucher-input:placeholder {
    color: rgba(255, 255, 255, 0.15);
}

.voucher-claim #claimVoucherInput:focus,
#vem-voucher-input:focus {
    color: rgba(255, 255, 255, 0.85);
}

.voucher-claim .claim-btn {
    position: absolute;
    top: 100%;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 150ms;
    pointer-events: none;
}

.voucher-claim .claim-btn.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

#content-withdraw-options h4 {
    margin-top: 10px;
    margin-bottom: 0px;
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
    font-size: 22px;
}

#content-withdraw-options {
    word-wrap: normal !important;
    white-space: normal !important;
    word-break: normal;
}

.withdrawSelector {
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
}

.withdrawSelector .withdraw-option {
    clear: both;
    min-height: 75px;
    max-width: 900px;
    background: #18181d;
    border: 2px solid #18181d;
    margin-bottom: 5px;
    padding: 10px;
    position: relative;
    color: #696979;
    white-space: normal !important;
    word-break: normal;
    display: inline-block;
    transition: all 150ms;
}

.withdrawSelector .withdraw-option:first-child {
    border-radius: 4px 0 0 4px;
}

.withdrawSelector .withdraw-option:last-child {
    border-radius: 0 4px 4px 0;
}

.withdrawSelector .withdraw-option:first-child:last-child {
    border-radius: 4px;
}

.withdrawSelector .withdraw-option-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.withdrawSelector .withdraw-option:hover {
    border-color: #c32d4f;
    background: #16161b;
}

.withdrawSelector .withdraw-option-list {
    display: table;
    min-height: 75px;
    padding: 10px 10px 40px 10px;
}

.withdrawSelector .withdraw-option-item {
    display: inline-block;
    width: 300px;
    text-align: left;
}

.withdrawSelector .coming-soon {
    min-height: auto;
    padding: 10px;
}

.wo-crypto-info span {
    margin-top: 10px;
    display: block;
    color: #ffc870;
}

.withdrawSelector .disabled,
.withdrawSelector .disabled:hover {
    background: #1f1f25 !important;
    border-color: #1f1f25 !important;
    color: #696979 !important;
    cursor: default;
}

.withdrawSelector .withdraw-option .wo-provider {
    width: 100px;
    height: 60px;
    background: url("/static/images/csgo500_sm.png") no-repeat;
    background-color: #1c1c22;
    border: 5px solid #1c1c22;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    border-radius: 4px;
    position: relative;
}

.withdrawSelector .wo-subtitle {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: calc(100% - 110px);
    text-align: center;
    font-weight: 800;
    color: hsl(240, 7%, 52%);
}

.withdrawSelector .wo-subtitle small {
    display: none;
}

.withdrawSelector .withdraw-option .wo-provider-csgo {
    background-image: url("/static/images/payment/other/csgo.png");
    background-size: 100%;
    background-color: #2b3254;
    border-color: #2b3254;
}

.withdrawSelector .withdraw-option .wo-provider-dota2 {
    background-image: url("/static/images/shops/dota2_shop.png");
    background-size: 100%;
    background-color: #2d2a2a;
    border-color: #2d2a2a;
}

.withdrawSelector .withdraw-option .wo-provider-tf2 {
    background-image: url("/static/images/shops/tf2_shop.png");
    background-size: 100%;
    background-color: #523f26;
    border-color: #523f26;
}
.withdrawSelector .withdraw-option .wo-provider-rust {
    background-image: url("/static/images/shops/rust_shop.png");
    background-size: 100%;
    background-color: #732b21;
    border-color: #732b21;
}

.withdrawSelector .withdraw-option .wo-provider-wxp {
    background-image: url("/static/images/payment/other/csgo.png");
    background-size: 100%;
    background-color: #2b3254;
    border-color: #2b3254;
}

.withdrawSelector .withdraw-option .wo-provider-dota2-wxp {
    background-image: url("/static/images/shops/dota2_shop.png");
    background-size: 100%;
    background-color: #2d2a2a;
    border-color: #2d2a2a;
}

.withdrawSelector .withdraw-option .wo-provider-btc {
    background-image: url("/static/images/payment/processed/crypto_bitcoin.png");
    background-size: 50%;
    background-color: #f79413;
    border-color: #f79413;
}

.withdrawSelector .withdraw-option .wo-provider-ltc {
    background-image: url("/static/images/payment/processed/crypto_ltc.png");
    background-size: 50%;
    background-color: #8c8c8c;
    border-color: #8c8c8c;
}

.withdrawSelector .withdraw-option .wo-provider-bch {
    background-image: url("/static/images/payment/processed/crypto_bch.png");
    background-size: 50%;
    background-color: #00c947;
    border-color: #00c947;
}

.withdrawSelector .withdraw-option .wo-provider-xrp {
    background-image: url("/static/images/payment/processed/crypto_xrp.png");
    background-size: 40%;
    background-color: #24292f;
    border-color: #24292f;
}

.withdrawSelector .withdraw-option .wo-provider-xlm {
    background-image: url("/static/images/payment/processed/crypto_xlm.png");
    background-size: 40%;
    background-color: #121315;
    border-color: #121315;
}

.withdrawSelector .withdraw-option .wo-provider-eos {
    background-image: url("/static/images/payment/processed/crypto_eos.png");
    background-size: 50%;
    background-color: #103294;
    border-color: #103294;
}

.withdrawSelector .withdraw-option .wo-provider-eth {
    background-image: url("/static/images/payment/processed/crypto_ethereum.png");
    background-size: 40%;
    background-color: #5e7def;
    border-color: #5e7def;
}

.withdrawSelector .withdraw-option .wo-provider-game-shop-games {
    background-image: url("/static/images/payment/game_shop/controller.svg");
    background-color: #c8354e;
    border-color: #c8354e;
    background-size: 40%;
}

.withdrawSelector .withdraw-option .wo-provider-game-shop-giftcards {
    background-image: url("/static/images/payment/game_shop/giftcards.png");
    background-color: #2f368a;
    border-color: #2f368a;
    background-size: 85%;
}

.withdrawSelector .withdraw-option .wo-provider-game-shop-software {
    background-image: url("/static/images/payment/game_shop/software.png");
    background-color: #2b3254;
    border-color: #2b3254;
    background-size: 85%;
}

.withdrawSelector .withdraw-option .wo-provider-eth {
    background-image: url("/static/images/payment/processed/crypto_ethereum.png");
    background-size: 40%;
    background-color: #5e7def;
    border-color: #5e7def;
}

.withdrawSelector .withdraw-option .wo-provider-altcoins {
    background-image: url("/static/images/payment/processed/crypto_altcoins.png");
    background-size: 40%;
    background-color: #1c1c22;
    border-color: #1c1c22;
}

.withdrawSelector .withdraw-option .wo-provider-paypal {
    background-image: url("/static/images/payment/processed/paypal.png");
    background-size: 90%;
}

.withdrawSelector .withdraw-option .wo-provider-gpay {
    background-image: url(/static/images/payment/processed/gpay.png);
    background-size: 80%;
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}

.withdrawSelector .withdraw-option .wo-provider-paysafecard {
    background-image: url("/static/images/payment/processed/paysafecard.png");
}

.withdrawSelector .withdraw-option .wo-provider-visamastercard {
    background-image: url("/static/images/payment/rmt/visa_mastercard.png");
}

.withdrawSelector .withdraw-option-list .wo-provider {
    display: table-cell;
}

.withdrawSelector .withdraw-option .wo-provider-subtitle {
    display: block;
    width: calc(100% + 10px);
    position: absolute;
    bottom: -5px;
    left: -5px;
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0px 0px 5px 5px;
}

.withdrawSelector .withdraw-option .wo-provider.wo-has-subtitle {
    background-position-y: calc(50% - 5px);
}

.withdrawSelector .wo-description {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: #696979;
}

.withdrawSelector .withdraw-option-dynamic {
    margin-right: 4px;
}

.withdrawSelector .withdraw-option-dynamic .wo-provider {
    background-size: contain;
}

.btn_withdraw_back {
    font-size: 18px;
    padding: 0px 0px;
    margin: 0px;
    box-shadow: none;
    background: transparent;
    border: none;
}

.btn_withdraw_back i {
    vertical-align: top;
    font-size: 20px;
}

.btn_withdraw_back:hover {
    color: #c32d4f;
    box-shadow: none;
    background: transparent;
    border: none;
}

#content-inventory .content-title {
    margin-bottom: 0px !important;
}

@media (max-width: 800px) {
    .withdraw-option.withdraw-option-list {
        display: block;
        white-space: normal !important;
        word-break: normal;
        display: inline-block;
    }

    .withdraw-option.withdraw-option-list .wo-provider {
        display: block;
        width: 100%;
    }

    .withdraw-option.withdraw-option-list .wo-payment-methods {
        display: block !important;
        margin-bottom: 15px;
    }
    .withdraw-option.withdraw-option-list .wo-payment-method {
        display: inline-block;
        height: 45px;
    }

    .withdraw-option.withdraw-option-item {
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 4px !important;
        margin-bottom: 1rem;
        padding-top: 0.875rem;
    }

    .withdraw-option.withdraw-option-item .wo-subtitle {
        word-wrap: normal !important;
        white-space: normal !important;
        word-break: normal;
        display: inline-block;
    }

    .withdraw-option.withdraw-option-item .wo-provider {
        height: 3.5rem;
        width: 100%;
        background-size: contain;
        border-radius: 0;
    }

    .withdraw-option.withdraw-option-item .wo-subtitle {
        display: block;
        width: 100%;
        text-align: center;
        height: 3.5rem;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
    }
}

#footer-wrapper {
    margin-bottom: 100px;
    margin-top: 50px;
}

.footer {
    background: #1c1c22;
    padding: 30px;
    color: #b6bfbe;
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
    position: relative;
}

.footer-container {
    display: flex;
    padding: 0 30px;
}

.footer--left,
.footer--right {
    flex: 1;
    text-align: center;
}

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

.footer--right-pages {
    display: flex;
}

.footer--right-page-about {
    margin-right: 35px;
}

.footer--middle {
    flex: 1.5;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.footer a.footer-link {
    outline: none;
}

.footer a.footer-link img {
    max-width: 120px;
}

.footer .footer-left,
.footer .footer-left,
.footer .inner-right {
    min-height: 400px;
}

.footer .footer-left,
.footer .footer-right {
    position: relative;
}

.footer .footer-left p {
    max-width: 400px;
}

.footer .footer-left span {
    word-break: normal !important;
    word-wrap: normal !important;
    display: inline-block;
}

.footer-links-container {
    text-align: left;
}

.footer-items {
    display: flow-root;
}
.footer-items li {
    display: inline-block;
    width: calc(20% - 8px);
    max-width: 70px;
    min-width: 50px;
    margin: 3px;
    padding: 0px;
    position: relative;
    height: 50px;
    float: left;
}

.footer-items li.f-status-item {
    display: inline-block;
    width: 250px !important;
    max-width: 250px;
    height: 50px;
    padding-top: 15px;
    vertical-align: middle;
    text-align: middle;
}

.footer-items li.f-status-item a {
    color: #b7c0be;
}

.footer-items li.f-item.f-status-item img {
    width: 18px;
    height: 18px;
    border-radius: 16px;
    margin: 0px 10px;
    vertical-align: top;
}

.footer-items #f-ceg-seal-container {
    display: block;
    position: absolute;
    width: calc(100% - 20px);
    margin-left: 0px;
}

.footer-items li .f-item-link {
    display: block;
    width: 50px;
    height: 50px;
    /*     background-image: url(/static/images/footer/f_visa.png); */
    background-size: 100%;
    text-indent: -9999px;
    white-space: nowrap;
    font-size: 0px;
}
.footer-items li .f-item-link:hover {
    background-position: 0px -50px;
}

.footer-items li .f-item-link.visa {
    background-image: url(/static/images/footer/f_visa.png);
}
.footer-items li .f-item-link.mastercard {
    background-image: url(/static/images/footer/f_mastercard.png);
}
.footer-items li .f-item-link.skrill {
    background-image: url(/static/images/footer/f_skrill.png);
}
.footer-items li .f-item-link.qiwi {
    background-image: url(/static/images/footer/f_qiwi.png);
}
.footer-items li .f-item-link.esic {
    background-image: url(/static/images/footer/f_esic.png);
}

.footer-items li .f-item-link.gamcare {
    background-image: url(/static/images/footer/f_gamcare.png);
}
.footer-items li .f-item-link.ga {
    background-image: url(/static/images/footer/f_ga.png);
}
.footer-items li .f-item-link.gamblingtherapy {
    background-image: url(/static/images/footer/f_gamblingtherapy.png);
}
.footer-items li .f-item-link.gamstop {
    background-image: url(/static/images/footer/f_gamstop.png);
}
.footer-items li .f-item-link.plus18 {
    background-image: url(/static/images/footer/f_18plus.png);
}
.footer-items li .f-item-link.trustpilot {
    background-image: url(/static/images/footer/f_trustpilot.png);
}
.footer-items li .f-item-link.begambleaware {
    background-image: url(/static/images/footer/f_begambleaware.png);
    transform: scale(1.5);
    margin-left: 14px;
}

.footer-title {
    color: #b7c0be;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.footer .social-links {
    display: flex;
    justify-content: center;
}

.footer .social-links img {
    height: 32px;
    margin-left: 5px;
    margin-right: 5px;
    opacity: 0.8;
    transition:
        transform 0.2s ease-in-out,
        opacity 0.2s linear;
}

.footer .social-links img:hover {
    transform: scale(1.1);
    opacity: 1;
}

.footer ul.about-links li,
.footer ul.social-links li {
    /* margin: 10px 0px; */
    text-align: left;
}

.footer ul.about-links li a,
.footer ul.social-links li a {
    color: #b7c0be;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.footer ul.about-links li a:hover,
.footer ul.social-links li a:hover {
    color: #c8354e;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.footer ul.social-links .social-logo-container {
    display: inline-block;
    vertical-align: middle;
}

.footer .social-links--community li {
    margin: unset !important;
}

.footer--middle-status {
    display: inline-block;
    /* width: 250px !important;
    max-width: 250px;
    height: 50px; */
    /* padding-top: 15px; */
    vertical-align: middle;
    text-align: middle;
    margin: 0 auto;
    font-size: 10px;
}

.footer--middle-status a {
    color: #b7c0be;
}

.footer--middle-status img {
    width: 14px;
    height: 14px;
    border-radius: 16px;
    margin: 0px 10px;
    vertical-align: top;
}

.footer--middle-trustpilot {
    margin-bottom: 1em;
}

@media (max-width: 1600px) {
    .footer-items li {
        max-width: 60px;
        min-width: 60px;
    }

    .footer-items li .f-item-link:hover {
        background-position: 0px -60px;
    }

    .footer-items li .f-item-link {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 980px) {
    .footer .footer-left,
    .footer .footer-left,
    .footer .inner-right {
        min-height: 200px;
    }

    .footer .footer-left p {
        max-width: 100%;
    }

    .footer .footer-left span {
        display: inline;
    }

    .footer-links-container {
        position: relative !important;
        margin-top: 0px;
    }
}

@media (max-width: 720px) {
    .footer-links-container {
        position: relative !important;
        margin-top: 0px;
    }

    .footer-items li .f-item-link {
        width: 50px;
        height: 50px;
    }

    .footer-items li .f-item-link:hover {
        background-position: 0px 50px;
    }
}

@media only screen and (max-width: 980px) {
    .footer-container {
        flex-direction: column !important;
    }
    .footer--left {
        text-align: center !important;
    }
    .footer--middle {
        order: 3;
    }
    .footer--right .footer-title {
        text-align: center;
    }
    .footer-items {
        text-align: center;
    }
    .footer--right .about-links li {
        text-align: center !important;
    }
    .footer-items #f-ceg-seal-container {
        margin-top: 14px !important;
    }
    .footer--right-pages {
        justify-content: center;
    }
}
.alert-box {
    background: #033444;
    border: 1px solid #0c475a;
    border-radius: 8px;
    padding: 20px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.alert-box a {
    color: #45b5da;
}

.alert-box h2 {
    margin-bottom: 10px;
}

.alert-box p {
    margin-bottom: 0;
}

.alert-box button {
    margin-top: 10px;
}

.alert-box.alert-box-red {
    background: #861e36;
    border: 1px solid #c32d4f;
    border-radius: 4px;
    line-height: 1.65;
    padding: 1rem 1.25rem;
}

#account-verify-steam-wrapper h2 {
    color: #fff;
}

.connect-steam,
.connected-steam,
.connect-wax,
.connected-wax,
.account-verify-steam-wrapper,
.account-verify-email-wrapper,
.account-completion-wrapper {
    display: none;
}

.account-container {
    padding-top: 25px;
}
.account-container .account-name .emoji {
    vertical-align: middle;
}

.account-top {
    display: flex;
}

.account-top .account-top--left,
.account-top .account-top--right {
    flex: 1;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 60px 20px 20px 40px !important;
}

.account-top .account-top--left .account-links li i,
.account-top .account-top--right .account-links li i {
    font-size: 22px !important;
    margin-right: 6px;
}

.account-top .account-top--left .account-link,
.account-top .account-top--right .account-link {
    display: flex;
    align-items: center;
}

.account-top .account-top--middle {
    flex: 3;
    margin: 0 25px;
}

.account-bottom {
    display: flex;
}

.account-bottom h2 {
    color: #c8354e;
    font-size: 24px;
    font-weight: 600;
}

.account-bottom--left {
    flex: 1;
    margin-right: 10px;
}

.account-bottom--left-top {
    display: flex;
    margin-bottom: 20px;
}

.account-bottom--left-top-left {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 1;
    text-align: left;
    font-size: 12px;
}

.account-bottom--left-top-right {
    flex: 1;
}

.account-bottom--left-top .progress-bar {
    width: 100%;
}

.account-bottom--left-bottom {
    display: flex;
}

.account-bottom--left-bottom-left {
    margin-right: 10px;
}

.account-bottom--left-bottom-left,
.account-bottom--left-bottom-right,
.account-bottom--right {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left;
}

.account-bottom--left-bottom-left,
.account-bottom--left-bottom-right {
    flex: 1;
}

.account-bottom--left-bottom-left h2,
.account-bottom--left-bottom-right h2,
.account-bottom--right h2 {
    margin-bottom: 30px;
}

.account-bottom--left-bottom-left .rTable {
}

.account-bottom--left-bottom-left .displayName {
    margin-bottom: 2px;
}
.account-bottom--right .tbody .tr,
.account-bottom--left-bottom-left .tbody .tr {
    margin-bottom: 25px;
    display: block;
}

.account-bottom--left-bottom-right .tbody .tr {
    margin-bottom: 5px;
    display: block;
}

.account-bottom--right .tbody .tr .th,
.account-bottom--left-bottom-left .tbody .tr .th,
.account-bottom--left-bottom-right .tbody .tr .th {
    width: 200px;
    text-align: right;
    font-weight: 600;
    padding-right: 10px;
}
.account-bottom--right .tbody .tr .th {
    width: 160px;
}
.account-bottom--left-bottom-right .tbody p {
    font-size: 12px;
}
.account-bottom--left-bottom-right .tbody .tr .th {
    width: 180px;
    min-width: 180px;
}
.account-bottom--left-bottom-right .connect-steam img {
    margin-bottom: 15px;
}

.account-bottom--left-bottom-right .connect-steam {
    text-align: center;
}

.account-bottom--right {
    flex-basis: 450px;
}

.account-bottom .rTable em {
    margin-top: 4px;
}

.fav-game-select {
    width: 100% !important;
}

.account-self-exclusion-time-left {
    display: none;
}

.account-self-exclusion-time-left-button {
    display: inline;
}

.account-self-exclusion-info {
    margin-top: 10px;
}

.account-self-exclusion-set-buttons {
    display: flex;
    flex-wrap: wrap;
}

.account-self-exclusion:not(:last-child) {
    margin-right: 5px;
}

.account-self-exclusion {
    margin-bottom: 5px;
    width: 90px;
    text-align: center;
    padding: 0.5rem 0.8rem;
}

.account-p2p-container {
    margin-bottom: 20px;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left;
}

.account-p2p-container p {
    margin: 3px;
    font-size: 12px;
}

.account-p2p-container ul {
    font-size: 12px;
    padding-left: 16px;
}

.account-p2p-container ul li {
    list-style-type: disc !important;
    cursor: unset;
}

.account-p2p-info {
    padding-top: 10px;
}

.account-p2p-warning {
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 12px;
}

.account-summary {
    border: 2px solid #505056;
    border-radius: 10px;
    padding: 20px !important;
}

.account-summary--new {
    border-left: unset;
    border-right: unset;
    border-bottom: unset;
    border-radius: unset;
    border-top: 1px solid #c8354e;
    padding: 20px;
    background: #212127;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.account-summary .hidden {
    display: none;
}

.account-summary .account-badge {
    text-align: center;
    margin-bottom: 20px;
}

.account-summary .account-avatar {
    display: inline-block;
    margin-right: 10px;
}

.account-summary--new .account-avatar {
    display: block;
    margin: unset;
}

.account-summary--new .account-experience-container {
    width: 100%;
}

.account-summary--new .account-played-value-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.account-summary--new .account-played-value-el {
    flex: 0 0 120px;
    display: flex;
    justify-content: center;
    margin: 3px 6px;
    align-items: center;
    background: #1c1c22;
    border-radius: 5px;
    padding: 6px 10px;
}

.account-summary--new .account-played-value-el-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
}

.account-summary--new .account-played-value-el-icon svg {
    height: 16px;
    width: auto;
}

.account-summary--new .account-played-value-el-amount {
    display: flex;
    align-items: center;
    color: #6f6f7b;
}

.account-summary--new .account-played-value-el-amount img {
    height: 18px;
    width: auto;
    margin-left: 4px;
}

.account-summary--new .account-monthly-history {
    width: 100%;
}

.account-summary--new .account-monthly-history-els {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}
.account-summary--new .account-monthly-history-info {
    text-align: center;
    color: #6f6f7b;
    margin-bottom: 12px;
    font-weight: 600;
}

.account-summary--new .account-monthly-history-el {
    flex: 0 0 120px;
    display: flex;
    justify-content: center;
    margin: 3px 6px;
    align-items: center;
    background: #1c1c22;
    border-radius: 5px;
    padding: 6px 10px;
}

.account-summary--new .account-monthly-history-el-title {
    color: #c8354e;
    user-select: none;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-summary--new .account-monthly-history-el-title svg {
    height: 19px;
    width: auto;
    margin-right: 4px;
}

.account-summary--new .account-monthly-history-el-value {
    color: #6f6f7b;
}

.account-summary--new svg path,
.account-summary--new svg circle,
.account-summary--new svg polygon {
    fill: #c8354e;
}

.account-summary .account-info {
    display: inline-block;
}

.account-summary .account-avatar {
}
.account-summary .account-avatar span {
    display: block;
    overflow: hidden;
    width: 64px;
    height: 64px;
    border-radius: 64px;
    border: 2px solid #c32d4f;
    margin: 5px auto 0px;
}

.account-summary .account-avatar img {
    height: 64px;
    width: 64px;
    border-radius: 64px;
    margin-left: -2.5px;
    margin-top: -2.5px;
}

.account-summary .account-name {
    color: #c8354e;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-summary .account-name .emoji {
    width: 30px;
    vertical-align: middle;
}

.account-summary .account-2fa {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b3b3ca;
}

.account-summary .account-2fa-text {
    font-size: 12px;
    margin: 0 5px;
}

.account-summary .account-2fa button,
.kyc-upgrade {
    border: none;
    padding: 0 10px;
    border-radius: 4px;
    color: #fff;
    text-shadow: 1px 1px 0px #00000033;
    height: 26px;
    font-size: 12px;
}

.account-summary .account-2fa .account-2fa-button-disabled,
.kyc-upgrade {
    background: #c32d4f;
}

.kyc-upgrade {
    padding: 5px 10px;
    margin-left: 5px;
}

.account-summary .account-2fa .account-2fa-button-disabled:hover {
    background: #902039;
}

.account-summary .account-2fa .account-2fa-button-enabled {
    background: #37af59;
}

.account-summary .account-2fa .account-2fa-button-enabled:hover {
    background: #278040;
}

.account-summary .account-badge .account-id-container {
    font-size: 11px;
    margin-top: 5px;
    color: #6f6f7b;
}

.account-summary .account-badge .level-badge {
    width: unset !important;
}

.account-summary .account-level {
    font-size: 16px;
    text-align: center;
}

.account-summary .account-level .level-badge {
    font-size: inherit !important;
    line-height: inherit !important;
}

.account-summary .account-level .role-badge {
    font-size: inherit !important;
    line-height: inherit !important;
}

.account-summary .account-level .role-badge.role-admin,
.account-summary .account-level .role-badge.role-mod {
    color: #c32d4f;
}

.account-summary .account-level .role-badge.role-chatmod {
    color: #45b5da;
}

.account-summary .account-level .role-badge.role-veteran {
    color: #ffc76f;
}

.account-summary .account-level .role-badge.role-vip-1 {
    color: hsl(0, 0%, 75%);
}
.account-summary .account-level .role-badge.role-vip-2 {
    color: hsl(37, 100%, 72%);
}
.account-summary .account-level .role-badge.role-vip-3 {
    color: hsl(256, 49%, 50%);
}
.account-summary .account-level .role-badge.role-vip-4 {
    color: hsl(110, 49%, 48%);
}
.account-summary .account-level .role-badge.role-vip-5 {
    color: hsl(344, 64%, 46%);
}
.account-summary .account-level .role-badge.role-vip-6 {
    color: hsl(201, 68%, 52%);
}
.account-summary .account-level .role-badge.role-vip-7 {
    color: hsl(180deg, 30%, 75%);
}
.account-summary .account-level .role-badge.role-vip-8 {
    color: hsl(239deg, 31%, 57%);
}
.account-summary .account-level .role-badge.role-vip-9,
.account-summary .account-level .role-badge.role-vip-10 {
    color: #fff !important;
    text-shadow:
        0px 0px 2px hsl(310deg 79% 66%),
        0px 0px 10px hsl(237deg 72% 38%);
}

.account-summary .progress-bar,
.account-section .progress-bar,
.account-sponsored-play-need-to-bet .progress-bar {
    border: 1px solid #c32d4f;
    padding: 5px;
    text-align: center;
    background: #1c1c22;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    color: #fff;
    height: 35px;
    line-height: 24px;
}

.account-sponsored-play-need-to-bet p {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.account-sponsored-play-need-to-bet .progress-bar {
    max-width: 400px;
}

.account-summary .progress-bar .pb-bar,
.account-section .progress-bar .pb-bar,
.account-sponsored-play-need-to-bet .progress-bar .pb-bar {
    background: #c32d4f;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.account-summary .progress-bar .pb-text,
.account-section .progress-bar .pb-text,
.account-sponsored-play-need-to-bet .progress-bar .pb-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.account-section.bordered {
    border: 2px solid #505056;
    padding: 20px !important;
    border-radius: 10px;
    word-wrap: initial;
    word-break: initial;
}

.account-section strong {
    font-weight: 800;
}

.account-section .alert-box {
    background: #14333e;
    border: 1px solid #276579;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
}

.account-section .alert-box img.icon {
    width: 64px;
    height: 64px;
    margin-left: 8px;
    margin-top: 8px;
}

.account-section .alert-box-red {
    background: #571222;
    border: 1px solid #c32d4f;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
}

.account-section .settings-box .row .col {
    padding: 0px !important;
    margin: 0px !important;
}

.account-section .settings-box .row {
    margin-bottom: 0px;
}

.account-section.fixed-height,
.account-summary.fixed-height {
    height: 280px;
}

/* sponsored withdraw */
.account-sponsored-withdraw-container {
    display: none;
}

/* sponsored play */
.account-sponsored-play-container {
    display: none;
}

.account-sponsored-withdraw-container p,
.account-sponsored-play-container p {
    font-size: 12px;
    margin: 3px;
}

.account-sponsored-withdraw-container .btn-toolbar,
.account-sponsored-play-container .btn-toolbar {
    display: inline-block;
    margin-top: 6px;
}

.account-sponsored-withdraw-container .text-red,
.account-sponsored-play-container .text-red {
    color: #c32d4f;
}

.kyc-steps {
}

.kyc-tier {
    font-weight: 600;
}

.kyc-steps .kyc-step {
    display: block;
    background: #18181d;
    padding: 5px;
    color: #9e9e9e;
    cursor: default;
}

.kyc-steps .kyc-step i {
    vertical-align: middle;
    color: #444;
}
.kyc-steps .kyc-step.kyc-step-active {
    color: #d63458;
    font-weight: bold;
}

.kyc-steps .kyc-step-active i {
    color: #d63458;
}

.kyc-steps .kyc-step.kyc-step-completed {
    color: #37af59;
    font-weight: bold;
}

.kyc-steps .kyc-step-completed i {
    color: #37af59;
}

.account-kyc-level {
    text-align: center;
}

.account-kyc-level p {
    margin: 3px;
}

.kyc-limited,
.kyc-unlimited {
    display: none;
}

.kyc-upgrade-dynamic {
    display: none;
}

.account-section h2 {
    color: #c8354e;
    font-size: 22px;
    font-weight: 600;
}

.account-section .rTable {
}
.account-section .rTable .th {
    width: 20%;
    min-width: 100px;
    color: #9393a0;
    font-weight: 600;
    text-align: right;
}

.account-section .rTable .th,
.account-section .rTable .td {
    padding: 5px;
    margin-top: 2px;
}

.account-section .rTable .tr {
    margin-top: 20px;
}

.account-section .cform em {
    margin-top: 5px;
    max-width: 650px;
}

.account-section .cform input {
    margin-bottom: 0px !important;
}

.account-section .cform input[disabled] {
    color: #8686a5 !important;
    background-color: #242429 !important;
}

.account-section .settings-box {
    margin-bottom: 20px;
}

.modal-overlay .account-section {
    border: none;
    padding: 0px;
    margin: 0px;
    font-size: 14px;
}

.modal-overlay .account-section label {
    font-size: 14px;
}

.modal-overlay .account-section .td p {
    margin-top: 0px;
}

.modal-overlay .account-section p em {
    font-size: 12px;
    color: #999;
}

.account-links {
    margin: 0px;
    padding: 0px;
}

.account-links li {
    font-size: 13px;
    line-height: 1.5em;
    padding: 3px;
}

.account-links li.spacer {
    height: 10px;
}

.account-links li i {
    font-size: 13px;
}

.account-links li a {
    color: #b3b3ca;
    display: block;
    border-radius: 5px;
}

.account-links li a.account-moderate {
    color: #ffc76f;
    font-weight: 600;
}

.account-links li a:hover {
    color: #c32d4f;
}

.account-info-table-container {
    max-height: 620px;
    overflow: scroll;
}

table.account-info-table {
    background: #1c1c22;
    margin: 10px 0px;
}

table.account-info-table .td-nonce {
    width: 100px;
}

.account-info-table tr th,
.account-info-table tr td {
    padding: 5px 10px;
}

.account-info-table tr {
    border-bottom: 1px solid #26262c;
}

.account-info-table-filters {
}

.account-info-table-filters .btn-filter {
    background: #3d3d44;
    padding: 5px 10px;
    color: #fff;
    min-width: 50px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}

.account-info-table-filters .btn-filter.active {
    background: #c8354e;
}

#twofactor-settings-modal .modal-dialog {
    font-family: "Open Sans", Helvetia, Arial, Sans, sans-serif;
    font-size: 14px;
}

#twofactor-settings-modal p.tfa-status-value {
    font-size: 20px;
}

#twofactor-settings-modal p.tfa-status-value i {
    font-size: 30px;
    vertical-align: middle;
}

#twofactor-settings-modal p.tfa-status-value.tfa-not-active i {
    color: #c8354e !important;
}

#twofactor-settings-modal p.tfa-status-value.tfa-pending i {
    color: #c32d4f !important;
}

#twofactor-settings-modal p.tfa-status-value.tfa-active,
#twofactor-settings-modal p.tfa-status-value.tfa-active i {
    color: #37af59 !important;
}

#twofactor-settings-modal .tfa-qrcode {
    text-align: center;
}

#twofactor-settings-modal .tfa-qrcode img {
    width: 100%;
    max-width: 300px;
    text-align: center;
    margin: 0px auto !important;
}

.tfa-digit-field,
.tfa-code-field,
.cform input.tfa-code-field,
.cform input.tfa-digit-field {
    color: #ffffff !important;
    font-size: 40px !important;
    font-family: "Roboto Mono", "Ubuntu Mono", "Consolas", monospace !important;
    padding: 10px 20px !important;
    width: calc(100% - 40px) !important;
    text-align: center;
    letter-spacing: 0.2em;
}

.cform input.tfa-digit-field.small {
    font-size: 18px !important;
    padding: 3px 5px !important;
    width: calc(100% - 10px) !important;
    letter-spacing: 0.025em !important;
}

#twofactor-settings-modal .tfa-digit-field[readonly] {
    color: #bdbdbd !important;
    background: #2b2b31;
}

.email-token-container {
}
.email-token-container .tfa-readonly {
    background: #c32d4f;
    border-radius: 8px;
}

.email-token-container .email-token-input,
.email-token-container .tfa-email-input,
.cform .email-token-container .tfa-email-input,
.cform .email-token-container .email-token-input {
    width: calc(100% - 180px) !important;
}

.email-token-container .email-token-first-chars {
    display: inline-block;
    width: 100px !important;
    padding: 0px !important;
    line-height: 56px;
    vertical-align: top;
    text-align: center !important;
    letter-spacing: 5px;
    height: 56px;
}
.email-token-container .email-token-separator {
    display: inline-block;
    width: 20px !important;
    text-align: center;
    line-height: 56px;
    height: 56px;
    font-size: 40px;
}

.multifield-token-input {
}

.multifield-token-input .mft-input {
    display: inline-block;
    width: calc(12.5% - 5px) !important;
    height: 50px;
    margin-right: 1px;
    border-radius: 8px;
    padding: 0px;
    text-align: center;
    font-size: 30px;
    vertical-align: top;
    margin-bottom: 10px;
}

.multifield-token-input.mft-size-6 .mft-input {
    width: calc(16.5% - 5px) !important;
}

.multifield-token-input .mft-input.mft-digit-readonly {
    background: #c32d4f;
    color: #fff;
    margin-right: 2px;
}

.multifield-token-input .mft-input:last-child {
    margin-right: 0px;
}

#twofactor-settings-modal label {
    display: block;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    margin-top: 15px;
}

#twofactor-settings-modal em {
    display: block;
    font-style: normal;
    font-size: 14px;
    padding: 10px 0px;
}

#account-market-list::-webkit-scrollbar {
    width: 8px;
}

#modal-confirm-p2p h5 {
    color: #c8354e;
    margin-bottom: 30px;
}

#modal-confirm-p2p .btn-confirm-p2p {
    background: #37af59;
    border-color: #37af59;
}

#modal-confirm-p2p .modal-actions {
    margin-top: 20px;
}

#modal-confirm-self-exclusion h5 {
    color: #c8354e;
    margin-bottom: 30px;
}

#modal-confirm-self-exclusion .btn-confirm-self-exclusion {
    background: #37af59;
    border-color: #37af59;
}

#modal-confirm-self-exclusion .modal-actions {
    margin-top: 20px;
}

#modal-confirm-ref-code h5 {
    color: #c8354e;
    margin-bottom: 15px;
}

#modal-confirm-ref-code .btn-confirm-ref-code {
    background: #37af59;
    border-color: #37af59;
}

#modal-confirm-voucher-code {
    text-align: center;
}

#modal-confirm-voucher-code h5 {
    color: #c8354e;
    margin-bottom: 15px;
}

#modal-confirm-voucher-code .btn-confirm-voucher-code {
    background: #37af59;
    border-color: #37af59;
}

#modal-confirm-voucher-code .modal-confirm-voucher-code-icon {
    background: #1c1c22;
    padding: 1rem;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c8354e;
    margin: 0 auto;
}

#modal-confirm-voucher-code .material-icons {
    font-size: 30px;
}

#modal-confirm-voucher-code .modal-confirm-voucher-code-value {
    text-align: center;
    background: #1c1c22;
    padding: 0.5rem 1rem;
    font-size: 22px;
}

#modal-confirm-self-exclusion .modal-actions {
    margin-top: 20px;
}

#modal-sumsub .modal-content {
    background: #212127;
    border-top: 1px solid #c8354e;
}

#modal-logout h5 {
    color: #c8354e;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-logout h5 i {
    margin-right: 4px;
}

#modal-logout .modal-actions {
    text-align: center;
    padding-bottom: 15px;
}

#modal-logout .btn-confirm {
    background: #37af59;
    border-color: #37af59;
}

@media (max-width: 900px) {
    #twofactor-settings-modal .tfa-digit-field,
    #twofactor-settings-modal .cform input.tfa-digit-field {
        font-size: 29px !important;
    }

    .account-section.fixed-height,
    .account-summary.fixed-height {
        height: auto !important;
    }
}

@media (max-width: 800px) {
    .account-summary {
        height: auto;
    }

    .account-summary .account-avatar {
        width: 100%;
    }

    .account-summary .account-name {
        font-size: 18px;
    }

    .account-summary .account-name .emoji {
        width: 18px;
    }

    .account-summary .account-level {
        font-size: 12px;
    }

    .account-section .tbody.cform .tr {
        display: block;
        padding: 0px;
        margin: 0px 0px 25px;
    }

    .account-section .tbody.cform .th {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0px 5px;
    }
    .account-section .tbody.cform .td {
        display: block;
        padding: 0px 5px;
    }

    .email-token-container .email-token-separator {
        font-size: 20px !important;
        line-height: 30px !important;
        height: 30px !important;
    }

    .email-token-container .email-token-first-chars {
        font-size: 20px !important;
        line-height: 30px !important;
        height: 30px !important;
        width: 50px !important;
    }

    .email-token-container .email-token-input,
    .email-token-container .tfa-email-input,
    .cform .email-token-container .email-token-input,
    .cform .email-token-container .tfa-email-input {
        font-size: 20px !important;
        line-height: 30px !important;
        height: 30px !important;
        padding: 0px !important;
        width: calc(100% - 80px) !important;
    }
}

.account-steam-has-apikey,
.account-steam-no-apikey {
    margin: 1.5em 0 !important;
}

.account-steam-has-apikey .current {
    display: flex;
    flex-flow: column wrap;
    font-size: 12px;
    height: 4rem;
    margin-bottom: 1rem;
    align-items: flex-start;
    justify-content: space-around;
}

.account-steam-has-apikey .current .account-steam-delete-apikey {
    color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.5rem;
}

.account-steam-has-apikey .current .account-steam-delete-apikey i {
    font-size: 16px;
    vertical-align: bottom;
}

div#tfa-token-modal {
    z-index: 100000000;
}

@media (max-width: 1450px) {
    .account-top .account-top--left,
    .account-top .account-top--right {
        padding: 60px 10px 20px 20px !important;
    }

    .account-top--middle {
        margin: 0 10px !important;
    }

    /* .account-bottom .tbody .th {
        display: block;
        width: unset !important;
        text-align: unset !important;
    } */
    .account-bottom--left-top {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .account-bottom--left-top-right {
        margin-top: 20px;
    }

    .account-bottom--left-bottom {
        flex-direction: column;
    }
    .account-bottom--left-bottom-left {
        margin-right: 0 !important;
        margin-bottom: 20px;
    }
}

@media (max-width: 980px) {
    .content-style {
        min-width: 0 !important;
    }
    .account-top {
        flex-direction: column;
    }
    .account-top--middle {
        margin: 20px 0 !important;
    }

    .account-bottom--left-top-right {
        margin-top: 30px;
    }

    .account-bottom--left-bottom-left {
        margin-bottom: 30px;
    }

    .account-bottom--left-top {
        margin-bottom: 30px;
    }
    .account-top > * {
        flex: unset;
        margin: 10px 0;
    }

    .account-bottom {
        flex-direction: column;
    }

    .account-bottom--left {
        margin-right: 0;
        margin-bottom: 30px;
    }
}

@media (max-width: 680px) {
    .account-bottom .rTable .td,
    .account-bottom .rTable .th {
        display: block !important;
    }

    .account-bottom .tbody .th {
        width: unset !important;
        text-align: unset !important;
    }
}

/* Compromised Modal */
#account-compromised-modal {
    background: black;
    z-index: 100000;
}

#account-compromised-modal img {
    border-radius: 4px;
    max-height: 30rem;
}

#account-compromised-modal h1 {
    font-weight: bold !important;
    font-size: 3rem;
    margin-bottom: 0;
}

#account-compromised-modal h5 {
    margin-bottom: 1.5rem;
}

#account-compromised-modal p,
#account-compromised-modal ol {
    font-size: 16px;
}

#account-compromised-modal p {
    margin-bottom: 3.5rem;
}

#account-compromised-modal ol {
    line-height: 2.5em;
}

#account-compromised-modal li {
    margin-bottom: 1rem;
    padding: 0.5rem 2rem;
}

#account-compromised-modal strong {
    color: hsl(350, 68%, 50%);
    font-weight: normal;
}

#account-compromised-modal h4 {
    font-size: 1.75rem;
    margin-top: 0em;
    font-weight: bold;
}
#account-compromised-modal .deauth-hint {
    padding: 7px 15px;
    border-radius: 2px;
    background: rgb(29, 47, 69);
    background: linear-gradient(to bottom, hsl(215, 100%, 78%) 5%, hsl(215, 41%, 40%) 95%);
    color: white;
    white-space: nowrap;
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 15px;
}

#account-compromised-modal .revoke-api-key-hint {
    background-color: #1d1d1d;
    color: #e1e1e1;
    font-size: 13px;
    border: 1px #777777 solid;
    padding: 0 6px;
    border-radius: 2px;
    white-space: nowrap;
    font-family: "Arial", "Helvetica", sans-serif;
}

#account-compromised-modal .main-section {
    margin: 0 -15px;
    padding: 2rem 15px;
    padding-bottom: 0;
    background: rgba(0, 0, 0, 0.25);
}

#account-compromised-modal .confirm-section {
    display: flex;
    flex-flow: column nowrap;

    justify-content: space-between;
    align-items: center;

    margin-top: 2rem;
    margin-bottom: 0;

    height: 10rem;
}

#account-compromised-modal label {
    font-size: 16px;
    display: flex;
}

#account-compromised-modal label:after {
    top: 2px;
}

#account-compromised-modal .confirm-section .unlock-btn {
    font-size: 1.25rem;
    width: 100%;
    max-width: 30rem;

    background: hsl(350, 62%, 47%);
    border-color: hsl(350, 62%, 47%);
}

#account-compromised-modal .confirm-section .unlock-btn:hover {
    background: hsl(350, 62%, 40%);
    border-color: hsl(350, 62%, 40%);
}

#account-compromised-modal .confirm-section .unlock-btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

#account-compromised-modal a .short {
    display: none;
}

@media (max-width: 600px) {
    #account-compromised-modal a .short {
        display: initial;
    }
    #account-compromised-modal a .full {
        display: none;
    }
}

@media (max-width: 820px) {
    .account-monthly-history-el {
        flex-direction: column;
    }
    .account-monthly-history-el-title {
        flex-direction: column;
        margin-right: 0 !important;
    }

    .account-summary--new .account-monthly-history-el-title svg {
        margin-right: 0 !important;
        height: 14px;
    }
}

.autobets-badges {
    margin-top: 7px;
    margin-left: -5px;
    text-align: right;
}
.autobets-badges .badges {
    text-align: center;
    display: grid;
    margin-left: -5px;
    grid-template-columns: 1fr 1fr;
}
.autobets-badges .badge {
    display: inline-block;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    margin-left: 5px;
    margin-top: 5px;
    -webkit-transition: 200ms ease;
    -moz-transition: 200ms ease;
    -ms-transition: 200ms ease;
    -o-transition: 200ms ease;
    transition: 200ms ease;
    font-weight: bold;
    text-align: left;
}

.autobets-badges .badge.new {
    padding-left: 12px;
}
@media (min-width: 1240px) {
    .autobets-badges .badge.gold,
    .autobets-badges .badge.grey,
    .autobets-badges .badge.blue,
    .autobets-badges .badge.red {
        display: grid;
        grid-template-areas: "play name edit remove";
        grid-template-columns: 20% 60% 10% 10%;
    }
}
@media (max-width: 1240px) {
    .autobets-badges .badge.gold,
    .autobets-badges .badge.grey,
    .autobets-badges .badge.blue,
    .autobets-badges .badge.red {
        display: grid;
        grid-template-areas: "play name edit remove";
        grid-template-columns: 25% 50% 12% 12%;
    }
}
@media (max-width: 1144px) {
    #content-wheel-autobetter {
        width: 240px;
    }
}

.autobets-badges .badge .material-icons {
    line-height: 18px;
    vertical-align: -8px;
    width: 25px;
}
.autobets-badges .badge .material-icons.play {
    grid-area: play;
}
.autobets-badges .badge .name {
    grid-area: name;
    padding-top: 1px;
    line-height: 18px;
}
.autobets-badges .badge .material-icons.remove {
    font-size: 14px;
    vertical-align: -4px;
    grid-area: remove;
    opacity: 0;
}
.autobets-badges .badge .material-icons.edit {
    font-size: 14px;
    vertical-align: -4px;
    grid-area: edit;
    opacity: 0;
}

@media (max-width: 1024px) {
    .autobets-badges .badge .material-icons.edit,
    .autobets-badges .badge .material-icons.remove {
        opacity: 1;
    }
}
.autobets-badges .badge:hover > .material-icons.remove,
.autobets-badges .badge:hover > .material-icons.edit {
    opacity: 1;
}
.autobets-badges .badge.new {
    color: silver;
    background: linear-gradient(to bottom, #1c1c22 50%, silver 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.autobets-badges .badge.new:hover {
    background-position: left bottom;
    color: #26262c;
}
.autobets-badges .badge.red {
    color: #c8354e;
    background: linear-gradient(to bottom, #1c1c22 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.autobets-badges .badge.red:hover {
    background-position: left bottom;
    color: #26262c;
}

.autobets-badges .badge.blue {
    color: #45b5da;
    background: linear-gradient(to bottom, #1c1c22 50%, #45b5da 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.autobets-badges .badge.blue:hover {
    background-position: left bottom;
    color: #26262c;
}

.autobets-badges .badge.grey {
    color: #666;
    background: linear-gradient(to bottom, #1c1c22 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.autobets-badges .badge.grey:hover {
    background-position: left bottom;
    color: #26262c;
}

.autobets-badges .badge.gold {
    color: #ffc870;
    background: linear-gradient(to bottom, #1c1c22 50%, #ffc870 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.autobets-badges .badge.gold:hover {
    background-position: left bottom;
    color: #26262c;
}

@media (min-width: 1240px) {
    #modal-create-autobet-wheel .modal-dialog {
        padding: 50px;
        width: 400px;
    }
}
@media (max-width: 1240px) {
    #modal-create-autobet-wheel .modal-dialog {
        padding: 5px;
        width: 350px;
    }
}
#modal-create-autobet-wheel .modal-dialog h5 {
    text-align: center;
}
#modal-create-autobet-wheel .modal-dialog .slim-btn {
    margin-top: 20px;
}

#modal-create-autobet-wheel .modal-dialog .autobet-buttons {
    text-align: right;
}
#martingale-name {
    outline: none;
    border: 0;
    width: 160px;
    margin-left: 5px;
}
#martingale-name:disabled {
    color: #7d7b7b;
}
#martingale-starting-bet {
    margin-left: 14px;
}
#modal-create-autobet-wheel .create-autobet-modal-content .zoom15 {
    zoom: 1.5;
}

.all-bets .all-bets-content:first-child,
.roulette-all-bets .roulette-all-bets-content:first-child {
    height: 43px;
    margin-bottom: 5px;
    font-weight: 500 !important;
    position: relative;
}

.all-bets .all-bets-content:first-child:after,
.roulette-all-bets .roulette-all-bets-content:first-child:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    left: 0;
    bottom: -1px;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px;
}

.all-bets .all-bets-content:first-child .all-bets-content-user,
.roulette-all-bets .roulette-all-bets-content:first-child .roulette-all-bets-content-user {
    height: 40px;
    overflow: hidden;
}

.all-bets .all-bets-content:first-child .all-bets-content-user a {
}

.all-bets .all-bets-content:first-child img.all-bets-content-avatar,
.roulette-all-bets .roulette-all-bets-content:first-child img.roulette-all-bets-content-avatar {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    overflow: hidden;
    display: inline-block;
    position: absolute;
}

.all-bets .all-bets-content:first-child span,
.roulette-all-bets .roulette-all-bets-content:first-child span {
    font-size: 18px;
    line-height: 26px;
}

.all-bets .all-bets-content:first-child .all-bets-profile-link span,
.roulette-all-bets .roulette-all-bets-content:first-child .roulette-all-bets-profile-link span {
    display: inline-block;
    height: 30px;
    margin-left: 18px;
    margin-bottom: unset !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 100px);
}

.all-bets .all-bets-content:first-child .all-bets-profile-link .level-badge,
.roulette-all-bets .roulette-all-bets-content:first-child .roulette-all-bets-profile-link .level-badge {
    min-width: 36px;
    max-width: 40px;
    font-size: 14px !important;
}

.all-bets .all-bets-content:first-child .bet-icon-svg,
.roulette-all-bets .roulette-all-bets-content:first-child .bet-icon-svg {
    width: 20px;
    vertical-align: middle;
    margin-top: -7px;
}

.hourglass-container {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition:
        visibility 0.2s ease-in,
        opacity 0.2s ease-in;
}

.hourglass {
    transform: scale(0.5);
    height: 40px;
    width: 41px;
    margin: 40px auto;
    animation: rotate 3s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}

.hourglass-text {
    color: #c8354e;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
}

.top {
    position: relative;
}

.topBg {
    position: absolute;
    z-index: 0;
    top: -18px;
    width: 100%;
    height: 20px;
    border-top: 5px solid #000;
    background: #c8354e;
}

.topBg::after {
    content: "";
    position: absolute;
    bottom: -20px;
    border-top: 20px solid #c8354e;
    border-right: 20px solid transparent;
    border-left: 21px solid transparent;
}

.topProgress {
    border-top: 20px solid #fff;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    height: 0;
    width: 1px;
    transform: scale(1) translateY(0);
    transform-origin: 50% 100%;
    animation: topProgress 3s linear infinite;
}

.line {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px;
    height: 0;
    width: 0;
    border-left: 1px solid #fff;
    animation: lineProgress 3s linear infinite;
}

.bottom {
    position: relative;
}

.bottomBg {
    position: absolute;
    z-index: 0;
    bottom: -5px;
    width: 100%;
    height: 20px;
    border-bottom: 5px solid #000;
    background: #c8354e;
}

.bottomBg::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -20px;
    border-bottom: 20px solid #c8354e;
    border-right: 20px solid transparent;
    border-left: 21px solid transparent;
}

.bottomProgress {
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
    border-left: 20px solid transparent;
    height: 0;
    width: 1px;
    margin-top: 15px;
    transform: scale(0) translateY(0);
    transform-origin: 50% 100%;
    animation: bottomProgress 3s linear infinite;
}

@keyframes rotate {
    90% {
        transform: scale(0.5) rotate(0deg);
    }
    100% {
        transform: scale(0.5) rotate(180deg);
    }
}

@keyframes topProgress {
    3% {
        transform: scale(1) translateY(0);
    }
    90% {
        transform: scale(0) translateY(0);
    }
    100% {
        transform: scale(0) translateY(0);
    }
}

@keyframes lineProgress {
    10% {
        height: 35px;
    }
    90% {
        height: 35px;
    }
    100% {
        height: 0;
    }
}

@keyframes bottomProgress {
    10% {
        transform: scale(0) translateY(0);
    }
    90% {
        transform: scale(1) translateY(0);
    }
    100% {
        transform: scale(1) translateY(-15px);
    }
}
#content-rewards-daily {
    padding-top: 20px;
}

.mini-wheel-container {
    margin-left: 0.75rem;
    background: #1f1f25;
    padding: 30px 40px 10px 40px;
    border-top: 5px solid #c32d4f;
    display: none;
}

.mini-wheel-loading {
    margin-left: 0.75rem;
    background: #1f1f25;
    padding: 30px 40px 30px 40px;
    border-top: 5px solid #c32d4f;
    display: flex;
}

.mini-wheel-loading .spinner {
    margin: 4px 10px 0 10px;
    border: 3px solid #c32d4f;
    border-top-color: #eee;
}

.mini-wheel-info {
    flex: 1;
}

.mini-wheel-title {
    color: #c32d4f;
    font-size: 32px;
    margin-bottom: 20px;
}

.mini-wheel-subtitle {
    color: #c32d4f;
    font-size: 16px;
    margin-bottom: 10px;
    display: none;
}

.mini-wheel-info.double-weekend .mini-wheel-title {
    margin-bottom: 0;
}

.mini-wheel-info.double-weekend .mini-wheel-subtitle {
    display: block;
}

.mini-wheel-description {
    color: #626267;
    font-size: 13px;
    margin-bottom: 20px;
}

.mini-wheel-description p {
    margin: 0;
}

.mini-wheel-info-counters {
    display: flex;
    justify-content: space-between;
}

.mini-wheel-info-counter {
    flex-basis: 48%;
    background: #1c1c22;
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    color: #7c7c7c;
}

.mini-wheel-info-counter-description {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-wheel-info-counter-title {
    display: inline-flex;
}

.mini-wheel-info-counter-bux {
    display: inline-flex;
    align-items: center;
}

.mini-wheel-info-counter-bux img {
    max-width: 20px;
    height: auto;
    margin-right: 4px;
}

.mini-wheel-info-counter-bux-value {
    color: #c32d4f;
}

.mini-wheel-info-counter-progress {
    position: relative;
    height: 18px;
    width: 100%;
    background: #26262c;
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.mini-wheel-info-counter-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 0%;
    background: #c32d4f;
    border-radius: 10px;
    overflow: hidden;
}

.mini-wheel-info-counter-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
    line-height: 18px;
    height: 18px;
    width: 100%;
    color: #fff;
    overflow: hidden;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.mini-wheel-current-reward {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #7c7c7c;
    background: #1c1c22;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}

.mini-wheel-current-reward img {
    max-width: 20px;
    height: auto;
    margin-right: 4px;
    margin-left: 8px;
}

.mini-wheel-current-reward-value {
    color: #c32d4f;
}

.mini-wheel {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.mini-wheel-wrapper {
    position: relative;
    width: 70%;
    height: 70%;
    max-width: 450px;
}

.mini-wheel-pointer {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    color: #ffc870;
}

.mini-wheel-pointer i {
    font-size: 22px;
}

.mini-wheel svg {
    /* max-height: 200px;
    max-width: 200px; */
    width: 100%;
    height: 100%;
}

.mini-wheel #free-spins-claim {
    display: none;
}

.mini-wheel #reward-claim-submit,
.mini-wheel #free-spins-claim,
.mini-wheel #reward-claim-submit-disabled,
.mini-wheel #free-spins-claim-disabled {
    background: #c32d4f;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    padding: 0px;
    transition: background 0.5s;
    /* margin: 0px; */
    border-radius: 0px;
    border: none;
    border-bottom: 3px solid #ab2845;
}

.mini-wheel .mini-wheel-buttons {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.mini-wheel #reward-claim-submit-disabled,
.mini-wheel #free-spins-claim-disabled {
    cursor: not-allowed;
    background: unset;
    border: 1px solid #666;
    color: #666;
}

.mini-wheel .mini-wheel-claim:hover {
    background: #ab2845;
}

.mini-wheel-winnings {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mini-wheel-winnings-el {
    background: #1c1c22;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    border-radius: 10px;
    margin-bottom: 20px;
    height: 40px;
}

.mini-wheel-winnings-el-info {
    display: flex;
    align-items: center;
    height: 80%;
    padding-left: 10px;
}

.mini-wheel-winnings-el-info-multiplier {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: black;
    background: #404040;
    border-radius: 5px;
    width: 60px;
    text-align: center;
    font-size: 13px;
    margin-right: 10px;
}

.mini-wheel-winnings-el-info-odds {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #26262c;
    color: #7c7c7c;
    text-align: center;
    border-radius: 5px;
    width: 60px;
    font-size: 13px;
}

.mini-wheel-winnings-el-bux {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #666;
}

.mini-wheel-winnings-el-bux img {
    max-height: 20px;
    width: auto;
    margin-right: 8px;
}

.mini-wheel-winnings-el--red .mini-wheel-winnings-el-info-multiplier {
    background: #c32d4f;
}

.mini-wheel-winnings-el--red .mini-wheel-winnings-el-bux {
    color: #c32d4f;
}

.mini-wheel-winnings-el--blue .mini-wheel-winnings-el-info-multiplier {
    background: #45b5da;
}

.mini-wheel-winnings-el--blue .mini-wheel-winnings-el-bux {
    color: #45b5da;
}

.mini-wheel-winnings-el--gold .mini-wheel-winnings-el-info-multiplier {
    background: #ffc870;
}

.mini-wheel-winnings-el--gold .mini-wheel-winnings-el-bux {
    color: #ffc870;
}

#redeem-wrapper .col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#redeem-wrapper .bigtext {
    color: #7c7c7c;
}

#redeem-wrapper .redeem-container {
    margin-top: 5px;
    background: #1f1f25;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px 10px 0;
    border-radius: 10px;
    min-width: 500px;
}

#redeem-wrapper .preloader-wrapper {
    margin-top: 0;
}

.redeem-container #redeem-input {
    margin: 0;
    padding: 0;
    background: #1f1f25;
    margin-right: 10px;
    padding-left: 10px;
}

.redeem-container #redeem-submit {
    margin: 0;
    min-width: 100px;
    border-width: 1px;
    min-height: 36px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rewards-title {
    margin-top: 30px;
}

@media (max-width: 1400px) {
    .mini-wheel-buttons > * {
        width: 120px;
        min-width: 120px;
    }
}

@media (max-width: 1240px) {
    #content-rewards-daily {
        margin-top: unset;
    }
}

@media (max-width: 1200px) {
    .mini-wheel-container {
        flex-direction: column;
    }

    .mini-wheel {
        margin: 20px 0;
    }

    .mini-wheel-wrapper {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 680px) {
    .mini-wheel-info-counters {
        flex-direction: column;
    }

    .mini-wheel-info {
        word-break: break-word;
    }

    #redeem-wrapper .redeem-container {
        min-width: unset;
        width: 100%;
    }

    #redeem-wrapper .col {
        padding-right: 0;
    }

    .mini-wheel-info-counter--deposit {
        margin-bottom: 10px;
    }

    .mini-wheel-buttons {
        flex-direction: column;
    }
}

@media (max-width: 450px) {
    .mini-wheel-container {
        padding: 10px;
    }

    .mini-wheel-title {
        font-size: 18px;
    }

    .mini-wheel-info-counter-description {
        flex-direction: column;
    }

    .mini-wheel-current-reward {
        font-size: 13px;
        flex-direction: column;
    }

    .mini-wheel-winnings-el {
        flex-direction: column;
        font-size: 10px;
    }

    .mini-wheel-winnings-el-info {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .mini-wheel-winnings-el {
        height: unset;
    }

    .mini-wheel-winnings-el-info-multiplier {
        margin-right: unset;
        font-size: 10px;
    }

    .mini-wheel-winnings-el-info-odds {
        font-size: 10px;
    }

    .mini-wheel-winnings-el-bux img {
        max-height: 14px;
        margin-right: 4px;
    }
}

@media (min-width: 1201px) and (max-width: 1240px) {
    .mini-wheel-pointer {
        bottom: 80px !important;
    }
}

@media (min-width: 1241px) and (max-width: 1349px) {
    .mini-wheel-pointer {
        bottom: 115px !important;
    }
}

@media (min-width: 1350px) and (max-width: 1399px) {
    .mini-wheel-pointer {
        bottom: 100px !important;
    }
}

@media (min-width: 1400px) and (max-width: 1449px) {
    .mini-wheel-pointer {
        bottom: 80px !important;
    }
}

@media (min-width: 1450px) and (max-width: 1550px) {
    .mini-wheel-pointer {
        bottom: 70px !important;
    }
}

@media (min-width: 1551px) and (max-width: 1630px) {
    .mini-wheel-pointer {
        bottom: 50px !important;
    }
}
.affiliates-container {
    margin-left: 0.75rem;
}

#referral-wrapper .col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#referral-wrapper .bigtext {
    color: #7c7c7c;
}

#referral-wrapper .referral-container,
#referral-wrapper .referral-link-container {
    margin-top: 5px;
    background: #1f1f25;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 0;
    border-radius: 10px;
    min-width: 500px;
}

#referral-wrapper .preloader-wrapper {
    margin-top: unset;
}

.referral-container #referral-input {
    margin: 0;
    padding: 0;
    background: #1f1f25;
    margin-right: 10px;
    padding-left: 10px;
}

.referral-container #referral-submit,
.referral-link-container #referral-link-copy {
    margin: 0;
    min-width: 100px;
    border-width: 1px;
    min-height: 36px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.referral-link-container .referral-link-value {
    padding: 0 10px;
    width: 100%;
}

.affiliates-info,
.affiliates-description {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px auto 0 auto;
}

.affiliates-description {
    margin: 20px auto 0 auto;
}

.affiliates-info-loading {
    display: none;
}

.affiliates-info.loading .affiliates-info-el {
    display: none;
}

.affiliates-info.loading .affiliates-info-loading {
    display: block;
}

.affiliates-info-el,
.affiliates-description-el {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-evenly; */
    margin: 0 30px;
    background: #1f1f25;
    border-top: 1px solid #c32d4f;
    padding: 20px;
    min-height: 200px;
    max-width: 300px;
}

.affiliates-info-el-title {
    text-align: center;
    text-transform: uppercase;
    color: #aaa;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.affiliates-info-el-subtitle {
    color: #626267;
    font-weight: 500;
    margin-bottom: 30px;
    text-align: center;
}

.affiliates-info-el-counter {
    display: flex;
    align-items: center;
}

.affiliates-info-el-counter-value--commission {
    display: flex;
    justify-content: center;
    align-items: center;
}

.affiliates-info-el-counter-value--commission .redtext {
    font-size: 36px;
    font-weight: 600;
    margin-right: 8px;
}

.affiliates-info-el-counter-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.affiliates-info-el-counter svg,
.affiliates-info-el-counter img {
    height: 30px;
    width: auto;
}

.affiliates-info-el-counter svg path,
.affiliates-info-el-counter svg circle {
    fill: #c32d4f;
}

.affiliates-info-el-counter-value {
    margin-left: 8px;
    font-size: 22px;
}

.affiliates-action {
    margin-top: 25px;
}

.affiliates-description-el {
    flex: 3;
    justify-content: space-between;
    min-height: unset;
}

.affiliates-description-arrow {
    flex: 1;
    max-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.affiliates-description-arrow svg {
    max-width: 100%;
    height: auto;
}

.affiliates-description-arrow path {
    fill: #c32d4f;
}

.affiliates-description-el-step {
    color: #aaa;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #c32d4f;
    font-size: 30px;
}

.affiliates-description-el-title {
    text-align: center;
    text-transform: uppercase;
    color: #aaa;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    margin-top: 35px;
}

.affiliates-description-el-subtitle {
    color: #626267;
    font-weight: 500;
    margin-bottom: 30px;
    text-align: center;
    margin-top: 20px;
}

.affiliates-action #referral-claim-submit,
.affiliates-action #referral-claim-submit-disabled,
.affiliates-action #vip-balance-submit,
.affiliates-action #vip-balance-submit-disabled {
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-transform: uppercase;
    font-size: 12px;
    border: 1px solid #c32d4f;
}

.affiliates-action #referral-claim-submit-disabled,
.affiliates-action #vip-balance-submit-disabled {
    cursor: not-allowed;
    background: unset;
    border: 1px solid #666;
    color: #666;
}

.affiliates-text {
    margin-top: 30px;
    background: #1f1f25;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    font-size: 12px;
}

.affiliates-text p {
    margin: 0;
}

.affiliates-text .affiliates-btn {
    padding: 0;
    line-height: 50px;
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 10px;
}

.affiliates-title {
    width: 100%;
    text-align: center;
    color: #c32d4f;
    font-size: 28px;
    margin-top: 20px;
}

@media (max-width: 980px) {
    #referral-wrapper .referral-container,
    #referral-wrapper .referral-link-container {
        min-width: unset;
        width: 100%;
    }

    #referral-wrapper .col {
        padding-left: 0;
    }

    #referral-wrapper .col {
        padding-right: 0;
    }
    .affiliates-info,
    .affiliates-description {
        flex-direction: column;
    }
    .affiliates-info-el,
    .affiliates-description-el,
    .affiliates-description-arrow {
        margin: 10px 0;
        max-width: unset;
    }

    .affiliates-description-arrow {
        transform: rotate(90deg);
        max-height: 40px;
    }

    .affiliates-description-arrow svg {
        max-height: 40px;
        width: auto;
    }
}

@media (max-width: 500px) {
    #referral-wrapper .referral-container,
    #referral-wrapper .referral-link-container {
        flex-direction: column;
        padding: 20px;
    }

    .referral-container #referral-submit,
    .referral-link-container #referral-link-copy {
        margin-top: 10px;
    }
}
.roulette-autobets-badges {
    text-align: right;
}
.roulette-autobets-badges .badges {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.roulette-autobet {
    height: 74px;
}
.roulette-autobets-badges .badge {
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: 200ms ease;
    -moz-transition: 200ms ease;
    -ms-transition: 200ms ease;
    -o-transition: 200ms ease;
    transition: 200ms ease;
    font-weight: bold;
    text-align: left;
    width: 175px;
    padding: 10px;
    padding-left: 5px;
    margin-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
}

.roulette-autobets-badges .badge.new {
    padding-left: 12px;
}

@media (min-width: 1240px) {
    .roulette-autobets-badges .badge.black,
    .roulette-autobets-badges .badge.green,
    .roulette-autobets-badges .badge.red {
        display: grid;
        grid-template-areas: "play name edit remove";
        grid-template-columns: 20% 60% 10% 10%;
    }
}
@media (max-width: 1240px) {
    .roulette-autobets-badges .badge.black,
    .roulette-autobets-badges .badge.green,
    .roulette-autobets-badges .badge.red {
        display: grid;
        grid-template-areas: "play name edit remove";
        grid-template-columns: 25% 50% 12% 12%;
    }
    .roulette-autobets-badges {
        /*height: 80px;*/
    }
    .roulette-autobet {
        height: initial;
    }
}
@media (max-width: 1144px) {
    #content-wheel-autobetter {
        width: 240px;
    }
}

.roulette-autobets-badges .badge .material-icons {
    line-height: 18px;
    vertical-align: -8px;
    width: 25px;
}
.roulette-autobets-badges .badge .material-icons.play {
    grid-area: play;
}
.roulette-autobets-badges .badge .name {
    grid-area: name;
    padding-top: 1px;
    line-height: 18px;
}
.roulette-autobets-badges .badge .material-icons.remove {
    font-size: 14px;
    vertical-align: -4px;
    grid-area: remove;
    opacity: 0;
}
.roulette-autobets-badges .badge .material-icons.edit {
    font-size: 14px;
    vertical-align: -4px;
    grid-area: edit;
    opacity: 0;
}

@media (max-width: 1024px) {
    .roulette-autobets-badges .badge .material-icons.edit,
    .roulette-autobets-badges .badge .material-icons.remove {
        opacity: 1;
    }
}
.roulette-autobets-badges .badge:hover > .material-icons.remove,
.roulette-autobets-badges .badge:hover > .material-icons.edit {
    opacity: 1;
}
.roulette-autobets-badges .badge.new {
    color: silver;
    background: linear-gradient(to bottom, #1c1c22 50%, silver 50%);
    background-size: 100% 200%;
    background-position: left top;
    width: 48px;
}
.roulette-autobets-badges .badge.new:hover {
    background-position: left bottom;
    color: #26262c;
}
@media (max-width: 1240px) {
    .roulette-autobets-badges .badge.new {
        background: linear-gradient(to bottom, #26262c 50%, silver 50%);
        background-size: 100% 200%;
        background-position: left top;
    }
}
.roulette-autobets-badges .badge.red {
    color: #c8354e;
    background: linear-gradient(to bottom, #1c1c22 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.roulette-autobets-badges .badge.red:hover {
    background-position: left bottom;
    color: #26262c;
}

.roulette-autobets-badges .badge.green {
    color: #33b349;
    background: linear-gradient(to bottom, #1c1c22 50%, #33b349 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.roulette-autobets-badges .badge.green:hover {
    background-position: left bottom;
    color: #26262c;
}

.roulette-autobets-badges .badge.black {
    color: #666;
    background: linear-gradient(to bottom, #1c1c22 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.roulette-autobets-badges .badge.black:hover {
    background-position: left bottom;
    color: #26262c;
}

@media (max-width: 1240px) {
    .roulette-autobets-badges .badge.red {
        color: #c8354e;
        background: linear-gradient(to bottom, #26262c 50%, #c8354e 50%);
        background-size: 100% 200%;
        background-position: left top;
    }
    .roulette-autobets-badges .badge.green {
        color: #33b349;
        background: linear-gradient(to bottom, #26262c 50%, #33b349 50%);
        background-size: 100% 200%;
        background-position: left top;
    }
    .roulette-autobets-badges .badge.black {
        color: #666;
        background: linear-gradient(to bottom, #26262c 50%, #666 50%);
        background-size: 100% 200%;
        background-position: left top;
    }
}
@media (min-width: 1240px) {
    #modal-create-autobet-roulette .modal-dialog {
        padding: 50px;
        width: 400px;
    }
}
@media (max-width: 1240px) {
    #modal-create-autobet-roulette .modal-dialog {
        padding: 5px;
        width: 350px;
    }
}
#modal-create-autobet-roulette .modal-dialog h5 {
    text-align: center;
}
#modal-create-autobet-roulette .modal-dialog .slim-btn {
    margin-top: 20px;
}

#modal-create-autobet-roulette .modal-dialog .autobet-buttons {
    text-align: right;
}
#martingale-roulette-name {
    outline: none;
    border: 0;
    width: 160px;
    margin-left: 5px;
}
#martingale-roulette-name:disabled {
    color: #7d7b7b;
}
#martingale-roulette-starting-bet {
    margin-left: 13px;
    width: 127px;
    margin-top: 0px;
}
#modal-create-autobet-roulette .create-autobet-modal-content .zoom15 {
    zoom: 1.5;
}
#martingale-roulette-max-bet {
    margin-top: 0px;
}
#modal-create-autobet-roulette .autobetter-choose {
    margin-bottom: 5px;
}
#content-roulette {
    max-width: 1300px;
    padding-top: 20px;
    margin: auto;
    margin-top: 15px;
    /*margin: 0 10px;*/
}

.roulette-container {
    display: flex;
    height: 128px;
    align-items: center;
    background: #1c1c22;
    border-radius: 4px;
    position: relative;
}

.roulette-offline {
    position: absolute;
    left: 0px;
    top: 40px;
    width: 100%;
    z-index: 9000;
    text-align: center;
    display: none;
}

.roulette-offline.active {
    display: block;
}

.roulette-offline span {
    font-size: 20px;
    min-height: 36px;
    padding: 10px 20px;
    background: rgb(25 25 29 / 93%);
    color: #c8354e;
    display: inline-block;
    width: 100%;
    word-wrap: initial;
    word-break: normal;
}

.roulette-past-queue {
    display: flex;
    justify-content: space-between;
}

.roulette-past-queue--previous-rolls,
.roulette-past-queue--last-100 {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.roulette-past-queue--previous-rolls {
    position: relative;
}

.roulette-past-queue--previous-rolls-container,
.roulette-past-queue--last-100-container {
    display: flex;
    align-items: center;
}

.roulette-past-queue--previous-rolls-container {
    width: 340px;
    overflow-x: scroll;
    overflow-y: auto;
    margin-left: -4px;
    scroll-behavior: smooth;
}

.roulette-past-queue--previous-rolls-container-el {
    height: 30px;
    width: 30px;
    min-width: 30px;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    margin: 0 2px;
    font-size: 14px;
    color: white;
    padding: 0px !important;
    user-select: none;
    transition: background 100ms;
}

.roulette-past-queue--last-100-text {
    color: #626060;
    margin-right: 1em;
}

.roulette-past-queue--last-100-el-red,
.roulette-past-queue--last-100-el-black,
.roulette-past-queue--last-100-el-green {
    display: flex;
    align-items: center;
}

.roulette-past-queue--last-100-el-red-color,
.roulette-past-queue--last-100-el-green-color,
.roulette-past-queue--last-100-el-black-color {
    margin-right: 0.25em;
}

.roulette-past-queue--last-100-el-red-amount,
.roulette-past-queue--last-100-el-green-amount,
.roulette-past-queue--last-100-el-black-amount {
    color: #8c8b8b;
    font-size: 14px;
}

.roulette-past-queue--last-100-el-red,
.roulette-past-queue--last-100-el-green {
    margin-right: 1em;
}

.roulette-past-queue--previous-rolls-container--red,
.roulette-past-queue--last-100-el-red-color {
    background: #c8354e;
}

.roulette-past-queue--previous-rolls-container--black,
.roulette-past-queue--last-100-el-black-color {
    background: #404040;
}

.roulette-past-queue--previous-rolls-container--green,
.roulette-past-queue--last-100-el-green-color {
    background: #33b349;
}

.roulette-past-queue--previous-rolls-container--red.roulette-past-queue--previous-rolls-container--spoil {
    background: hsla(350, 58%, 50%, 0.35);
}

.roulette-past-queue--previous-rolls-container--black.roulette-past-queue--previous-rolls-container--spoil {
    background: hsla(0, 0%, 25%, 0.35);
}

.roulette-past-queue--previous-rolls-container--green.roulette-past-queue--previous-rolls-container--spoil {
    background: hsla(130, 56%, 45%, 0.35);
}

.roulette-past-queue--last-100-el-red-color,
.roulette-past-queue--last-100-el-green-color,
.roulette-past-queue--last-100-el-black-color {
    height: 1em;
    width: 1em;
    border-radius: 4px;
    line-height: 1em;
    text-align: center;
    color: white;
}

.roulette-info {
    background: #1c1c22;
    color: white;
    text-align: center;
    height: 26px;
    width: 100%;
    margin: 20px 0;
    line-height: 26px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.roulette-info-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 100ms;
    opacity: 1;
}

.roulette-info-text.hidden-1 {
    transform: translate(-50%, calc(-50% + 26px));
}

.roulette-info-text.hidden-2 {
    transform: translate(-50%, calc(-50% - 26px));
    transition-duration: 0ms;
}

.roulette-info-text i {
    font-size: 18px;
    margin: 0 5px;
}

.roulette-info-progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 26px;
    background: #c8354e;
    border-radius: 4px;
}

.roulette-info-progress--red {
    background: #c8354e;
}

.roulette-info-progress--black {
    background: #404040;
}

.roulette-info-progress--green {
    background: #33b349;
}

.roulette-indicator {
    position: absolute;
    height: 20px;
    width: auto;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
}

.roulette-indicator--top {
    transform: translate(-50%, -50%) rotate(90deg);
    top: 0;
}

.roulette-indicator--bottom {
    transform: translate(-50%, 50%) rotate(-90deg);
    bottom: 0;
}

.roulette-indicator svg {
    height: 100%;
    width: auto;
}

.roulette-indicator svg path {
    fill: #c8354e;
}

.roulette-container-shadow--left,
.roulette-container-shadow--right {
    z-index: 1000;
    position: absolute;
    top: 0;
    bottom: 0;
    background: url("/static/images/simple-gradient.png") no-repeat center;
    height: 100%;
    width: 150px;
    opacity: 0.8;
}

.roulette-container-shadow--left {
    transform: rotate(180deg);
    left: 0;
}

.roulette-container-shadow--right {
    right: 0;
}

.roulette-container-line--top,
.roulette-container-line--bottom {
    position: absolute;
    left: 0;
    background-color: #c8354e;
    right: 0;
    height: 2px;
    width: 100%;
    transition: background-color 0.4s ease-in;
}

.roulette-container-line--top {
    top: 0;
}

.roulette-container-line--bottom {
    bottom: 0;
}

.roulette-container-line--red {
    background-color: #c8354e;
}

.roulette-container-line--green {
    background-color: #33b349;
}

.roulette-container-line--black {
    background-color: #404040;
}

.roulette-container-line--mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #26262c 3%, transparent, #26262c 97%);
}

.roulette-wrapper {
    overflow: hidden;
}

.roulette-el-container {
    display: flex;
    height: 104px;
    align-items: center;
    position: relative;
}

.roulette-el {
    height: 64px;
    min-width: 64px;
    line-height: 64px;
    text-align: center;
    color: white;
    border-radius: 4px;
    margin: 0 2px;
    font-weight: 600;
    font-size: 24px;
    overflow: hidden;
}

.roulette-el--red {
    background: #c8354e;
}

.roulette-el--black {
    background: #404040;
}

.roulette-el--green {
    background: #33b349;
}

.roulette-bet-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #1c1c22;
    padding: 10px;
    margin: 20px 0;
    border-radius: 5px;
}

.roulette-bet-container-left,
.roulette-bet-container-right {
    display: flex;
    width: 100%;
    align-items: center;
}

.roulette-bet-container-right-left,
.roulette-bet-container-right-right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
}

.roulette-bet-container-left {
    flex: 1;
    margin-right: 30px;
}

.roulette-bet-container-right {
    flex: 2;
}

.roulette-previous-bet .previous-text {
    grid-area: previous;
    font-size: 11px;
    margin-left: 1px;
    margin-bottom: 5px;
    font-weight: normal;
}
.roulette-previous-bet {
    display: inline-grid;
    grid-template-areas: "previous previous previous" "red green bblck";
    /* padding: 10px; */
    font-weight: bold;
    width: 100%;
}
.roulette-previous-bet .bet {
    max-width: 100px;
    width: 90%;
    text-align: center;
    margin-left: 5px;
    cursor: pointer;
    -webkit-transition: 200ms ease;
    -moz-transition: 200ms ease;
    -ms-transition: 200ms ease;
    -o-transition: 200ms ease;
    transition: 200ms ease;
    border-radius: 5px;
    color: white;
    padding: 10px;
    margin-right: 5px;
}
.roulette-previous-bet .bet-red {
    display: inline-grid;
    grid-area: red;
    color: #c8354e;
    background: linear-gradient(to bottom, #1c1c22 50%, #c8354e 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.roulette-previous-bet .bet-red:hover {
    background-position: left bottom;
    color: #1c1c22;
}
.roulette-previous-bet .bet-green {
    display: inline-grid;
    grid-area: green;
    color: #33b349;
    background: linear-gradient(to bottom, #1c1c22 50%, #33b349 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.roulette-previous-bet .bet-green:hover {
    display: inline-grid;
    grid-area: green;
    background-position: left bottom;
    color: #1c1c22;
}
.roulette-previous-bet .bet-black {
    display: inline-grid;
    grid-area: bblck;
    color: #666;
    background: linear-gradient(to bottom, #1c1c22 50%, #666 50%);
    background-size: 100% 200%;
    background-position: left top;
}
.roulette-previous-bet .bet-black:hover {
    background-position: left bottom;
    color: #1c1c22;
}

.roulette-balance {
    text-align: left;
    padding: 13px;
    background: #1c1c22;
    border-radius: 5px;
    text-align: right;
    height: 55px;
    margin-top: 10px;
    display: inline-grid;
    grid-template-areas: "balance refresh";
    grid-template-columns: 80% 20%;
    /*
    display: flex;
    align-items: center;
    justify-content: center;
    background: #26262c;
    height: 42px;
    padding: 0 15px;
    border-radius: 5px;
    margin-right: 20px;
    font-weight: 500;
    */
}
.roulette-balance .balance {
    grid-area: balance;
    text-align: left;
    padding-top: 2px;
}
.roulette-balance .balance_sync {
    grid-area: refresh;
    text-align: right;
    padding-top: 3px;
}

.roulette-balance #balance-icon {
    height: 16px;
}

.roulette-balance #balance {
    font-size: 18px;
    margin-right: 5px;
}

.roulette-balance i {
    font-size: 22px;
}

.roulette-balance img {
    margin-bottom: unset !important;
}

.roulette-input {
    background: #26262c;
    height: 42px;
    padding: 0 15px;
    border-radius: 5px;
    margin-right: 4px;
    flex: 2;
}

.roulette-input input {
    border-bottom: unset !important;
    box-shadow: unset !important;
    background: #26262c !important;
    margin: unset !important;
    height: 100%;
    min-width: 200px;
    font-size: 14px;
}

.roulette-btn {
    background-color: #26262c;
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    color: #aaa;
    border-radius: 5px;
    margin: 0 4px;
    cursor: pointer;
    transition:
        color 0.1s ease-in,
        background-color 0.1s ease-in;
    flex: 1;
    text-align: center;
}

.roulette-btn:hover {
    background-color: #c8354e;
    color: white;
}

#roulette-allbets {
    max-width: 1200px;
}
.roulette-autobet-switch {
    margin: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.roulette-autobet-switch span.material-icons {
    transition: transform 0.2s ease-in;
}

.roulette-autobet-switch:hover {
    color: white;
}

.roulette-autobet-switch-off span.material-icons {
    transform: rotate(180deg);
}

#roulette-autobet-container {
    height: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #1c1c22;
    border-radius: 5px;
    margin: 0;
}

@media (max-width: 1700px) {
    #roulette-autobet-container {
        height: auto !important;
    }
}

.roulette-autobet-settings {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    opacity: 1;
}

.roulette-autobet-settings > * {
    min-width: 300px;
    margin: 20px 10px;
    flex: 1;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;
    justify-content: space-between;
}

.roulette-autobet-base-container > *,
.roulette-autobet-action > *,
.roulette-autobet-cond > * {
    padding: 0.5rem;
}

.roulette-autobet-settings > *:first-child {
    margin-left: 0;
}

.roulette-autobet-settings > *:last-child {
    margin-right: 0;
}

.roulette-autobet-inputs {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    flex-basis: 100%;
}

.roulette-autobet-onwin-container,
.roulette-autobet-onlose-container {
    display: flex;
    align-items: center;
}

#roulette-autobet-startingbet,
#roulette-stop-balance-startingbet,
#roulette-stop-balance-less,
#roulette-stop-balance-more {
    margin-top: 5px;
}

label[for="roulette_martingale_on_lost_increase"],
label[for="roulette_martingale_on_win_increase"] {
    /* width: 150px; */
    margin-left: 10px;
}

#roulette_martingale_on_win_multiplier,
#roulette_martingale_on_lost_multiplier {
    width: 40px;
    margin-left: 6px !important;
}

.roulette-autobet-start-container {
}

.roulette-autobet-choice {
    font-size: 11px;
    color: #8a8a8f;
}

.roulette-autobet-start {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 10px;
    padding-bottom: 0;
}

.roulette-autobet-start-button {
    min-height: 32px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: 300ms;
}

.roulette-autobet-start-button > span {
    color: white;
}

.roulette-autobet-start-button--red {
    background: #c8354e;
}

.roulette-autobet-start-button--black {
    background: #606060;
}

.roulette-autobet-start-button--green {
    background: #33b349;
}

.roulette-autobet-start-button--running {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.75;
    }
    100% {
        opacity: 1;
    }
}

.roulette-autobet-start-button:hover {
    opacity: 0.8;
}

#roulette-autobet-container input {
    border-bottom: unset !important;
    box-shadow: unset !important;
    background: #26262c !important;
    margin-bottom: unset !important;
    height: 32px;
    box-sizing: border-box !important;
    padding-left: 8px !important;
    border-radius: 5px !important;
}

.roulette-autobet-label {
    font-size: 11px;
    color: #8a8a8f;
}

.rj-shine {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("/static/images/hypetrain/shine.png");
    opacity: 0;
    background-size: 500%;
    display: none;
}

.roulette-jackpot-ribbon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: auto;
    top: 50%;
}

.roulette-jackpot-ribbon svg {
    max-width: 100%;
    height: 100%;
}

.roulette-jackpot-ribbon svg path {
    fill: #19191f;
}

.roulette-jackpot-ribbon--left {
    left: 0;
    transform: translate(-100%, -50%);
}

.roulette-jackpot-ribbon--right {
    right: 0;
    transform: translate(100%, -50%) rotate(180deg);
}

div#rj-messages {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(29px * 4);
    overflow: hidden;
    margin-top: 5px;
    color: white;
    transition:
        height 0.3s ease-in,
        max-height 0.2s ease-in;
    height: 0;
}

.rj-user-badge {
    background-color: #000;
    width: 100%;
    height: 28px;
    padding: 2px;
    font-weight: 500;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    word-wrap: break-word;
    margin-bottom: 1px;
}

.rj-user-badge .pending {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(/static/images/hypetrain/striped_progress_dark.png);
    animation: shift 1s linear infinite;
}

.rj-user-badge.animate-start {
    animation: ht-user-badge-open 1s linear 1;
}

.rj-user-badge.animate-start .avatar img {
    animation: ht-user-badge-spin 1s ease-out 1;
}

.rj-user-badge.animate-end {
    width: 28px;
    animation: ht-user-badge-close 1s linear 1;
}

.rj-user-badge strong {
    font-weight: 1000;
}

.rj-user-badge.rj-color-gold {
    background-color: #ffc870;
    color: rgba(0, 0, 0, 0.75);
}

.rj-user-badge.rj-color-red {
    background-color: #c32d4f;
}

.rj-user-badge.rj-color-blue {
    background-color: #45b5da;
}

.rj-user-badge.rj-color-green {
    background-color: #37af59;
}

.rj-user-badge.rj-color-gray {
    background-color: #666;
}

.rj-user-badge .avatar {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border: 2px solid #26262c;
    background: #26262c;
    overflow: hidden;
}

.rj-user-badge .avatar img {
    width: 100%;
    height: 100%;
}

.rj-user-badge .message {
    display: block;
    height: 100%;
    line-height: 24px;
    margin-left: 30px;
    padding: 0px;
    overflow: hidden;
}

.roulette-jackpot.pending .roulette-jackpot-pot-text,
.roulette-jackpot.pending .roulette-jackpot-pot-value {
    display: none;
}

.roulette-jackpot-right-pending {
    display: none;
}

.roulette-jackpot.pending .roulette-jackpot-right-pending {
    display: block;
}

.roulette-jackpot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #c8354e;
    /*
    animation: colorchange2 10s infinite alternate;
    */
    max-width: 720px;
    background: #1c1c22;
    margin: 0 auto 20px;
    position: relative;
    height: 50px;
}

.roulette-jackpot-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.roulette-jackpot-left,
.roulette-jackpot-right {
    margin: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.roulette-jackpot-left {
    color: #c8354e;
}

.roulette-jackpot-triangle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 250px;
    height: 100%;
    overflow: hidden;
}

.roulette-jackpot-triangle {
    position: absolute;
    top: calc(50% - 5px);
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-top: 200px solid #1f1f25;
}

.roulette-jackpot-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    z-index: 1;
}

.roulette-jackpot-info .material-icons {
    cursor: pointer;
}

.roulette-jackpot-info .material-icons:hover {
    color: #c32d50bd;
}

.roulette-jackpot-title {
    font-size: 18px;
}

.roulette-jackpot-center {
    background: #1f1f25;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid #c8354e;
    height: 90px;
    width: 90px;
    /*
    animation: colorchange 10s infinite alternate;
    */
}

.roulette-jackpot-center img {
    max-width: 100%;
    height: auto;
    padding: 20px;
}

.roulette-jackpot-pot-text,
.roulette-jackpot-right-pending {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-right: 8px;
}

.roulette-jackpot-pot-value {
    display: flex;
    justify-content: center;
    align-items: center;
}

.roulette-jackpot-pot-image {
    height: 16px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
}

.roulette-jackpot-pot-image img {
    max-height: 100%;
    width: auto;
}

.roulette-jackpot-pot-amount {
    font-size: 19px;
    color: #c8354e;
    font-weight: bold;
}

.rj-user-badge:last-child {
    margin-bottom: 15px;
}

@media (max-width: 1600px) {
    .roulette-btn {
        padding: 0 10px;
    }
}

@media (max-width: 1442px) {
    .roulette-input input {
        min-width: 100px;
    }

    .roulette-autobet {
        margin: 0 20px;
    }
}

@media (max-width: 1300px) {
    .roulette-bet-container-left {
        margin-right: 4px;
    }

    .roulette-btn-10k {
        margin-right: 4px;
    }
}

@media (max-width: 1080px) {
    .roulette-bet-container {
        flex-direction: column;
    }

    .roulette-bet-container-left {
        margin-bottom: 10px;
    }

    .roulette-bet-container-right {
        margin-bottom: 10px;
    }

    #roulette-autobet-container {
        flex-direction: column;
    }
    .roulette-autobet-onwin-container,
    .roulette-autobet-onlose-container {
        justify-content: center;
    }

    .roulette-autobet-choice {
        margin-top: 15px;
        text-align: center;
    }

    .roulette-autobet-start {
        margin-top: 15px;
    }

    .roulette-autobet-label {
        text-align: center;
    }

    .roulette-offline {
        top: 31px;
    }

    .roulette-offline span {
        font-size: 15px;
        min-height: 66px;
        padding: 15px 20px;
    }
}

@media (max-width: 830px) {
    .roulette-bet-container-right {
        flex-direction: column;
    }

    .roulette-bet-container-right-left {
        margin-bottom: 10px;
    }

    .roulette-past-queue {
        flex-direction: column;
    }

    .roulette-past-queue--previous-rolls {
        margin-bottom: 10px;
    }
}

@media (max-width: 630px) {
    .roulette-bet-container-left {
        flex-direction: column;
    }

    .roulette-balance {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .roulette-input {
        width: 100%;
        margin-bottom: 10px;
    }

    .roulette-max {
        width: 100%;
        text-align: center;
    }
}

#roulette-all-bets-red-total.plus-sign:before,
#roulette-all-bets-black-total.plus-sign:before,
#roulette-all-bets-green-total.plus-sign:before {
    content: "+";
}

@media (max-width: 601px) {
    #roulette-all-bets-red,
    #roulette-all-bets-black,
    #roulette-all-bets-green {
        display: none;
    }

    #roulette-mybets {
        display: none !important;
    }
    .roulette-past-queue--previous-rolls,
    .roulette-past-queue--last-100 {
        flex-direction: column;
    }

    .roulette-past-queue--last-100-text {
        margin-bottom: 5px;
    }
    .roulette-container-shadow--left,
    .roulette-container-shadow--right {
        display: none;
    }

    #classic-past-queue-spoil {
        margin-right: unset;
        margin-bottom: 4px;
    }
}

@media (max-width: 450px) {
    .roulette-past-queue--previous-rolls-container {
        width: 90%;
    }
}

@media (max-width: 420px) {
    .roulette-bet-container {
        font-size: 10px;
    }
}

@media (max-width: 860px) {
    .roulette-jackpot-ribbon {
        display: none;
    }

    .roulette-jackpot {
        padding: 10px 0;
        height: unset;
        flex-direction: column;
        word-break: break-word;
    }

    .roulette-jackpot-title,
    .roulette-jackpot-pot-amount {
        font-size: 14px;
    }

    .roulette-jackpot-pot-image {
        height: 14px;
    }

    .roulette-jackpot-triangle-container {
        display: none;
    }

    .roulette-jackpot-center {
        display: none;
    }
}

/* @media (max-width: 370px) {
    .roulette-past-queue--previous-rolls-container-el:nth-child(1),
    .roulette-past-queue--previous-rolls-container-el:nth-child(2),
    .roulette-past-queue--previous-rolls-container-el:nth-child(3) {
        display: none;
    }
} */

@keyframes colorchange {
    0% {
        border: 2px solid #cc203d;
    }
    100% {
        border: 2px solid #c8354e;
    }
}
@keyframes colorchange2 {
    0% {
        border-top: 2px solid #cc203d;
    }
    100% {
        border-top: 2px solid #c8354e;
    }
}
.balance-wrapper-roulette {
    width: 450px;
    font-size: 12px;
    border-radius: 5px;
    /*
    margin: auto;
    */
    display: inline-block;
}
#bet-button-wrapper-roulette {
    font-size: 14px;
    display: inline-flex;
    background-color: #1c1c22;
}
.bet-button-r {
    background: #26262c;
    margin-left: 6px;
    cursor: pointer;
    color: silver;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 9px;
}
#bet-input-r {
    margin: 0;
    width: 120px;
    border-bottom: 0px;
    font-size: 16px;
    color: silver;
    padding-left: 5px;
    width: 100%;
    padding-right: 5px;
}
.roulette-balance-container {
    margin-top: 10px;
}
.roulette-autobet {
    display: inline-grid;
    margin-left: 5px;
    /*
    grid-template-areas:
        "auto-previous auto-previous auto-previous"
        "red green black";
    */
    font-weight: bold;
}
.roulette-autobet .previous-text {
    grid-area: auto-previous;
    font-size: 11px;
    margin-left: 1px;
    margin-bottom: 5px;
    font-weight: normal;
}
.roulette-header {
    display: grid;
    grid-template-areas: "balance betvalue betvalue" "previous autoa autoa";
    grid-template-columns: 25% 35% 40%;
}

.roulette-header .roulette-balance {
    grid-area: balance;
}
.roulette-header .roulette-betvalue {
    grid-area: betvalue;
    display: grid;
    grid-template-areas: "inputbox buttons more";
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    margin-bottom: 0px;
    background-color: #1c1c22;
    margin-left: -5px;
    border-radius: 5px;
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 4px;
    margin-left: 10px;
    font-size: 16px;
    padding: 10px;
    width: 99%;
    height: 55px;
    grid-template-columns: 20% 70% 10%;
}
.roulette-header .roulette-betvalue .inputbox {
    grid-area: inputbox;
}
.roulette-header .roulette-betvalue .buttons {
    grid-area: buttons;
}
.roulette-header .roulette-betvalue .more {
    grid-area: more;
    text-align: right;
    font-size: 12px;
    cursor: pointer;
    padding-top: 9px;
    color: silver;
    font-weight: bold;
}
.roulette-header .roulette-previous {
    grid-area: previous;
}
.roulette-header .roulette-previous .header {
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.roulette-header .roulette-autobet {
    grid-area: autoa;
}
.roulette-header .roulette-autobet .header {
    font-size: 12px;
    margin-left: 6px;
    margin-bottom: 5px;
    margin-top: 10px;
    font-weight: normal;
}
#bet-btn-double-r,
#bet-btn-half-r {
    background: #373740;
}
.roulette-jackpot-content {
    margin-bottom: 20px;
}
#roulette-autobetter-toggle-icon {
    line-height: 18px;
    vertical-align: -8px;
    margin-right: 5px;
}
#bet-input-form {
    border-bottom: 1px solid #26262c;
}

@media (max-width: 1240px) {
    .roulette-header {
        grid-template-areas: "balance" "betvalue" "previous" "autoa";
        grid-template-columns: 100%;
        margin-bottom: 20px;
    }
    .roulette-header .roulette-betvalue {
        grid-template-areas: "inputbox" "buttons" "more ";
        grid-template-columns: 100%;
        height: 100%;
        width: 100%;
        margin-left: 0px;
        margin-top: 0px;
    }
    #bet-button-wrapper-roulette {
        font-size: 14px;
        display: block;
        background-color: #1c1c22;
        margin-top: 10px;
        word-break: initial;
        text-align: center;
    }
    .bet-button-r {
        display: inline-flex;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        margin-left: 6px;
    }
    #bet-btn-half-r,
    #bet-btn-double-r,
    #bet-btn-min-r {
        padding-left: 20px;
        padding-right: 20px;
    }
    #bet-btn-max-r {
        display: inline;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    #openAutoRoulette {
        border-top: 1px solid #26262c;
        text-align: center;
    }
    .roulette-autobets-badges .badges {
        grid-template-columns: 1fr;
    }
    .roulette-autobets-badges .badge {
        width: 100%;
        margin-bottom: 10px;
    }
    .roulette-previous {
        margin-left: 2px;
        padding: 10px;
    }
    .roulette-autobet {
        margin-left: -2px;
        margin-right: 8px;
        padding: 9px;
    }
    .roulette-header {
        background: #1c1c22;
        /*
        padding-bottom: 10px;
        */
    }
    .roulette-previous-bet .bet {
        width: 93px;
        margin-left: 0px;
    }
    .roulette-previous-bet .bet-red {
        background: linear-gradient(to bottom, #26262c 50%, #c8354e 50%);
        background-size: 100% 200%;
        background-position: left top;
    }
    .roulette-previous-bet .bet-green {
        background: linear-gradient(to bottom, #26262c 50%, #33b349 50%);
        background-size: 100% 200%;
        background-position: left top;
    }
    .roulette-previous-bet .bet-black {
        background: linear-gradient(to bottom, #26262c 50%, #666 50%);
        background-size: 100% 200%;
        background-position: left top;
    }
    .roulette-autobets-badges .badge.black,
    .roulette-autobets-badges .badge.green,
    .roulette-autobets-badges .badge.red {
        grid-template-columns: 10% 75% 10% 5%;
    }
}

#content-home {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 40px;
    padding-top: 20px;
}

.home-header,
.home-games {
    width: 100%;
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    max-width: 1000px;
}

#content-home .home-games-container {
    flex: 1;
    width: 100%;
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 120px 120px; */
    grid-gap: 20px;
    margin-bottom: 20px;
}

#content-home .home-games-container--dual {
    flex: 1;
    margin-top: 20px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

#content-home .home-games-container--dual-top {
    margin-bottom: 20px;
}

.home-game {
    background: #1c1c22;
    border-top: 2px solid #c8354e;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    position: relative;
}

.home-game:not(.home-game--coming-soon):hover .home-game-image img {
    transform: scale(1.1);
}

.home-game:not(.home-game--coming-soon):hover .home-game-title {
    color: #c8354e;
}

.home-game.home-game--coming-soon {
    cursor: not-allowed;
}

.home-game-image {
    margin: 10px 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
}

.home-game-image-fav {
    color: #999;
    position: absolute;
    bottom: 9px;
    right: 10px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
}

.home-game-image-fav .spinner {
    height: 24px;
    width: 24px;
    margin-right: 5px;
}

.home-game-image-fav--checked .outline {
    display: none;
}

.home-game-image-fav .full {
    display: none;
}

.home-game-image-fav--checked .full {
    display: block;
}

.home-game-image-fav:hover {
    color: #c8354e;
}

.home-game-image-fav--checked {
    color: #c8354e;
}

.home-game-image img {
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.home-game-title {
    text-align: center;
    font-size: 16px;
    background: #1a1a20;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #97979b;
    font-weight: 600;
    line-height: 40px;
    height: 40px;
    transition: color 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.home-select-fav-game {
    display: flex;
    width: 100%;
    max-width: 1000px;
    justify-content: space-between;
    background: #1c1c22;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #949191;
    padding: 15px 30px;
    font-weight: 600;
    font-size: 12px;
}

.home-select-fav-game-title {
    display: flex;
    align-items: center;
}

.home-select-fav-game-options label {
    padding-left: 30px !important;
}

.home-select-fav-game-options label:not(:last-child) {
    margin-right: 10px;
}

.home-select-fav-game-options label:before,
.home-select-fav-game-options label:after {
    border-radius: unset !important;
}

.home-select-fav-game-options .ab-red:not(:checked) + label:before,
.ab-red:not(:checked) + label:after {
    border: 2px solid #5a5a5a;
}

.home-header {
    text-align: center;
    margin-bottom: 20px;
    word-break: break-word;
}

.home-header-greet {
    color: #c8354e;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: normal;
}

.home-header-info p {
    margin: unset;
    color: #666;
    font-size: 16px;
    line-height: 20px;
}

.home-header .vip-top-progress {
    width: 75%;
    margin-bottom: 1.5rem;
}

.greeting-name {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
}

.greeting-name .emoji {
    line-height: 26px;
}

@media (max-width: 860px) {
    #content-home .home-games-container--dual,
    #content-home .home-games-container {
        grid-template-columns: 1fr;
    }

    .home-header .vip-top-progress {
        width: 100%;
    }
}

.home-carousel {
    max-width: min(1000px, calc(100% - 40px));
    background: #1c1c22;
    border-radius: 10px;
    margin-bottom: 50px !important;
}

.home-carousel-slide {
    /* text-align: center; */
    padding: 20px 40px;
    display: flex !important;
    flex-direction: column;
    height: 180px;
    justify-content: space-evenly;
    word-break: break-word;
    border-radius: 10px;
}

.home-carousel-slide--1 {
    background: url("/static/images/homescreen/slider/1.png") no-repeat center center;
    background-size: cover;
}

.home-carousel-slide--2 {
    background: url("/static/images/homescreen/slider/2.png") no-repeat center center;
    background-size: cover;
}

.home-carousel-slide--3 {
    background: url("/static/images/homescreen/slider/3.png") no-repeat center center;
    background-size: cover;
}

.home-carousel-slide--4 {
    background: url("/static/images/homescreen/slider/4.png") no-repeat center center;
    background-size: cover;
}

.home-carousel-slide--5 {
    background: url("/static/images/homescreen/slider/5.png") no-repeat center center;
    background-size: cover;
}

.home-carousel-slide-title {
    color: #c8354e;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: 24px;
    z-index: 1;
    margin-bottom: 4px;
}

.home-carousel-slide-second-title {
    color: rgba(255, 255, 255, 0.9);
    font-family: "Open Sans";
    font-size: 24px;
    z-index: 1;
}

.home-carousel-slide-second-title .red-text {
    color: #c8354e !important;
    font-weight: 600;
}

.home-carousel-slide-subtitle {
    font-size: 12px;
    font-weight: 500;
    max-width: 420px;
    color: #888;
    z-index: 1;
    line-height: 14px;
}

.slick-dots li.slick-active button {
    background: #c8354e;
}

.slick-dots li button {
    content: "";
    width: 20px;
    height: 2px !important;
    background: #1c1c22;
    border-radius: 15px;
}

.slick-prev {
    left: 15px;
    z-index: 10000;
}

.slick-next {
    right: 15px;
    z-index: 10000;
}

.home-carousel-slide-button {
    cursor: pointer;
    background: #c8354e;
    border-color: #c8354e;
    border-bottom-color: #b32b4a;
    font-size: 14px;
    max-width: 200px;
    margin-top: 12px;
    text-align: center;
    z-index: 1;
}

.home-carousel-slide-button:hover {
    background: #c32d4f !important;
}

@media (max-width: 860px) {
    .home-carousel-slide {
        position: relative;
        text-align: center;
    }

    .home-carousel-slide:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        height: 100%;
        width: 100%;
        border-radius: 10px;
    }

    .home-carousel-slide-button {
        margin: 12px auto;
    }
}

@media (max-width: 700px) {
    .home-carousel-slide-title {
        font-size: 18px;
    }
    .home-carousel-slide-second-title {
        font-size: 12px;
    }
    .home-carousel-slide-subtitle {
        display: none;
    }
    .home-carousel-slide-button {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .home-game-title {
        font-size: 10px;
        font-weight: 500;
    }
}
#content-provably-fair p {
    line-height: 165%;
    margin: 1.5em 0;
    font-size: 15px;
}

#content-provably-fair .redtext,
#pf-wheel-seed-table tbody .hash-only,
#pf-roulette-seed-table tbody .hash-only {
    font-weight: bold;
    color: #c8354e;
}

#content-provably-fair pre {
    margin: 0.5rem 0;
    background: rgba(0, 0, 0, 0.25);
    padding: 1em 1.5em;
    border-radius: 4px;
    font-size: 14px;
}

#provably-wheel,
#provably-roulette,
#provably-duels,
#provably-crash {
    padding: 0 2rem !important;
}

#pf-wheel-seed-table,
#pf-roulette-seed-table {
    background: #1f1f25;
    border-radius: 4px;
}

#pf-wheel-seed-table td,
#pf-roulette-seed-table td {
    padding: 1.5rem;
}

#pf-wheel-seed-table > thea,
#pf-roulette-seed-table > thead,
#pf-wheel-seed-table input,
#pf-roulette-seed-table input {
    border: none;
}

#pf-wheel-seed-table input,
#pf-roulette-seed-table input {
    margin: 0;
    font-size: inherit;
    text-overflow: ellipsis;
    position: relative;
    transition: color 100ms;
}

#pf-wheel-seed-table tbody tr,
#pf-roulette-seed-table tbody tr {
    color: hsl(240, 4%, 60%);
    transition: all 100ms;
}

#pf-wheel-seed-table tbody tr:hover,
#pf-roulette-seed-table tbody tr:hover {
    background: #1a1a1f !important;
    cursor: pointer;
    color: hsl(240, 4%, 80%);
}

#wheel-round-history-modal .modal-dialog,
#roulette-round-history-modal .modal-dialog {
    padding: 3rem 2rem;
}

#wheel-round-history-modal h3,
#roulette-round-history-modal h3 {
    margin: 0;
}

#wheel-round-history-modal .history,
#roulette-round-history-modal .history {
    display: flex;
    flex-flow: row wrap;
}

#wheel-round-history-modal ul.history > li,
#roulette-round-history-modal ul.history > li {
    flex: 12rem;
    max-width: 18rem;
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 4px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    text-align: center;
    font-size: 15px;
    transition: background 100ms;
}

#wheel-round-history-modal ul.history > li {
    padding: 1rem;
    margin: 1rem;
}

#wheel-round-history-modal ul.history > li {
    background: rgba(0, 0, 0, 0.25);
}

#wheel-round-history-modal ul.history > li > .title,
#roulette-round-history-modal ul.history > li > .title {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5em;
}

#wheel-round-history-modal ul.history > li > .title {
    margin-bottom: 1em;
}

#wheel-round-history-modal ul.history > li:hover {
    background: rgba(0, 0, 0, 0.325);
}

#wheel-round-history-modal ul.history > li > .random,
#roulette-round-history-modal ul.history > li > .random {
    padding: 0.25em 0.5em;
    font-weight: bold;
    color: white;
    border-radius: 4px;
    transition: 100ms;
}

#roulette-round-history-modal ul.history > li > .random {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}

/* wheel modal entry colors */
#wheel-round-history-modal ul.history > li.choice-0 > .random {
    background: #555555;
}

#wheel-round-history-modal ul.history > li.choice-1 > .random {
    background: #c8354e;
}

#wheel-round-history-modal ul.history > li.choice-2 > .random {
    background: #45b5da;
}

#wheel-round-history-modal ul.history > li.choice-3 > .random {
    background: #ffc870;
    color: #1c1c21;
    text-rendering: optimizeLegibility;
    font-weight: bold;
}

/* roulette modal entry colors */
#roulette-round-history-modal ul.history > li.choice-0 > .random {
    background: #c8354e;
}

#roulette-round-history-modal ul.history > li.choice-1 > .random {
    background: #404040;
}

#roulette-round-history-modal ul.history > li.choice-2 > .random {
    background: #33b349;
}

#wheel-round-history-modal .bet-verifier,
#roulette-round-history-modal .bet-verifier {
    align-self: flex-end;
    background: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.5em 0.75em;
    border-color: transparent;
    transition: all 100ms;
    border: 2px solid transparent;
    border-radius: 4px;
    font-weight: bold;
    align-self: center;
    margin-top: 0.5rem;
}

#wheel-round-history-modal .bet-verifier {
    margin-top: 1rem;
}

#wheel-round-history-modal .bet-verifier:hover,
#roulette-round-history-modal .bet-verifier:hover {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.075) !important;
}

#wheel-round-history-modal .bet-verifier i,
#roulette-round-history-modal .bet-verifier i {
    font-size: 18px;
    vertical-align: bottom;
}

.pf-seed-table-pagination {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0;
}

.pf-seed-table-pagination > * > span {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: hsl(240, 4%, 38%);
    margin: 0 0.5em;
}

.pf-seed-table-pagination .btn-toolbar {
    box-shadow: none;
    border-radius: 4px;
    padding: 0.75rem;
    background: #1c1c22;
    border-color: transparent;
    user-select: none;
}

.pf-seed-table-pagination .btn-toolbar:hover,
.pf-seed-table-pagination .pagination-page-select > .page-select:hover {
    border-color: #c8354e;
}

.pf-seed-table-pagination .btn-toolbar i {
    font-size: 26px;
    height: 0.5em;
    width: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.pf-seed-table-pagination .btn-toolbar[disabled] {
    background-color: #1c1c22 !important;
    border-color: #1c1c22 !important;
    opacity: 0.3;
    pointer-events: none;
}

#content-casino {
    margin-left: 0.75rem;
    margin-top: 110px;
    position: relative;
}

.casino-appbar {
    position: absolute;
    top: 2px;
    right: 0px;
    text-align: right;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    transition:
        transform 0.2s ease-out,
        opacity 0.2s ease-out;
}

.casino-games-title {
    font-size: 27px;
    color: #c8354e;
    font-weight: 700;
    font-family: "Roboto";
    margin-bottom: 30px;
}

.casino-games-title--all {
    display: inline-flex;
    align-items: center;
}

.casino-chips {
    display: inline-flex;
    align-items: center;
    z-index: 1;
}

.casino-chips .chip {
    margin: 0 8px;
    background: #1c1c22;
    color: #545354;
}

.casino-games--top {
    margin-bottom: 35px;
}

.casino-games--top .casino-games-container,
.casino-games--top .casino-games-container--placeholder {
    overflow-x: scroll;
    white-space: nowrap;
    overflow-y: hidden;
}

.casino-games--top .casino-games-container--placeholder {
    display: none;
}

.casino-games--all {
    position: relative;
}

.casino-games--all .casino-games-container,
.casino-games--all .casino-games-container--placeholder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-gap: 20px;
    align-items: center;
}

.casino-games--all .casino-games-container--placeholder {
    display: none;
}

.casino-games-select {
    display: flex;
    margin-bottom: 30px;
}

.casino-games-select-el {
    height: 39px;
    background-color: #1c1c22;
    border-radius: 6px;
    padding: 0 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #545354;
    cursor: pointer;
}

.casino-games-select-el:hover {
    background: #c32d4f;
    color: rgba(255, 255, 255, 0.8);
}

.casino-games-select-el--selected {
    background: #c8354e !important;
    color: rgba(255, 255, 255, 1) !important;
}

.casino-games-select-el--selected {
    margin-right: 14px;
}

.casino-games-select-el:not(:last-child) {
    margin-right: 14px;
}

.casino-games--top .casino-games-el:not(:first-child) {
    margin-left: 20px;
}

.casino-games-el {
    display: inline-block;
    width: 250px;
    height: 222px;
    border-radius: 7px;
    background-color: #1c1c22;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.casino-games-el.country-blocked {
    cursor: not-allowed;
}

.casino-games-el.country-blocked .casino-games-el-image-container,
.casino-games-el.country-blocked .casino-games-el-info,
.casino-games-el.country-blocked .casino-games-el-fav {
    opacity: 0.5;
}

.casino-games-el .country-blocked-info {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: #c32d4f;
    color: #eceaea;
    font-size: 13px;
    font-weight: 700;
    font-family: "Roboto";
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    opacity: 0;
    z-index: 1;
    transform: translateY(15px) scale(0);
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out;
}

.casino-games-el:hover .country-blocked-info {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.casino-games-el-subtitle {
    font-size: 9px;
    color: #65656e;
    font-weight: 400;
    font-family: "Roboto";
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100% - 36px);
}

.casino-games-el-title {
    font-size: 13px;
    color: #eceaea;
    font-weight: 700;
    font-family: "Roboto";
    transition: color 0.2s ease-out;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100% - 36px);
}

.casino-games-el-fav,
.casino-game-fav {
    color: #65656e;
    display: flex;
    justify-content: center;
    align-items: center;
}

.casino-game-fav {
    cursor: pointer;
    margin-left: 8px;
}

.casino-games-el-fav {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.casino-games-el-fav .outline:hover,
.casino-game-fav .outline:hover {
    color: #c8354e;
}

.casino-game .casino-game-fav {
    margin-right: 10px;
}

.casino-games-el.fav .casino-games-el-fav .outline,
.casino-game.fav .casino-game-fav .outline {
    display: none;
}

.casino-games-el.fav .casino-games-el-fav .full,
.casino-game.fav .casino-game-fav .full {
    display: block;
}

.casino-games-el-fav .spinner,
.casino-game-fav .spinner {
    display: none;
    height: 22px;
    width: 22px;
}

.casino-games-el-fav.loading .spinner,
.casino-game-fav.loading .spinner {
    display: block;
}

.casino-games-el-fav .full,
.casino-game-fav .full {
    display: none;
    color: #c8354e;
}

.casino-games-el-fav.loading .outline,
.casino-games-el-fav.loading .full,
.casino-game-fav.loading .outline,
.casino-game-fav.loading .full {
    display: none !important;
}

.casino-games-el-image-container {
    height: calc(100% - 30px);
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.casino-games-el-tournament {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    max-height: 160px;
    width: 50%;
    max-width: 160px;
}

.casino-games-el-tournament img {
    height: 100%;
    width: auto;
}

.casino-games-el-image {
    margin: 0 auto;
    transition: transform 0.2s ease-out;
    height: 100%;
    width: 100%;
}

.casino-games-el:hover .casino-games-el-image {
    transform: scale(1.1);
}

.casino-games-el:hover .casino-games-el-title {
    color: #c8354e;
}

.casino-games--all .casino-games-el {
    height: 215px;
    width: 100%;
    display: block;
}

.casino-select {
    position: relative;
    width: 150px;
    height: 40px;
}

.casino-select:not(:last-child) {
    margin-right: 14px;
}

.casino-select select {
    display: none;
}

.casino-select .select-selected {
    border-radius: 6px;
    background-color: #1c1c22;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
    color: #545354;
}

.casino-select .select-selected:after {
    position: absolute;
    content: "";
    top: 16px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #545354 transparent transparent transparent;
}

.casino-select .select-selected.select-arrow-active {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.casino-select .select-selected.select-arrow-active:after {
    border-color: transparent transparent #545354 transparent;
    top: 7px;
}

.casino-select .select-items div,
.select-selected {
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.4) transparent;
    cursor: pointer;
}

.casino-select .select-items {
    position: absolute;
    background-color: #1f1f25;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    text-align: left;
}

.casino-select .select-hide {
    display: none;
}

.casino-sort-select,
.casino-sort-select .select-selected {
    width: 80px;
}

.casino-select .select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.4);
}

.casino-game-type-select .select-items,
.casino-provider-select .select-items {
    max-height: 330px;
    overflow-y: scroll;
}

.casino .toolbar-search-group {
    display: flex;
    flex-flow: row nowrap;
}

.casino .casino-search {
    width: 130px;
    max-width: 250px;
    background: #1c1c22;
    border: 2px solid #1c1c22;
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 0;
    height: 30px;
    box-shadow: none !important;
    border: none !important;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    margin: 0;
}

.casino .btn-toolbar i {
    font-size: 20px;
}

.casino .btn-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #545354;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.casino .btn-toolbar:hover,
.casino .btn-toolbar:active {
    border-color: #1c1c22;
    background-color: #1c1c22;
}

.casino-pagination {
    text-align: center;
}

.casino-pagination li,
.casino-pagination li a {
    border-color: #999 !important;
    color: #999 !important;
    background-color: transparent !important;
}

.casino-pagination li.disabled,
.casino-pagination li.disabled a {
    border-color: #555 !important;
    color: #555 !important;
    background-color: transparent !important;
}

.casino-pagination li a {
    color: #545354;
}

.casino-pagination li.active {
    background-color: #1c1c22;
}

.casino-pagination.disabled {
    cursor: not-allowed !important;
    pointer-events: none;
    touch-action: none;
}

.casino-pagination.disabled li {
    cursor: not-allowed !important;
}

.casino .casino-games-title .spinner {
    display: none;
}

.casino.loading .casino-games-title .spinner {
    display: inline-flex;
    height: 28px;
    width: 28px;
}

.casino.loading .casino-games--all .casino-games-container {
    display: none;
}

.casino.loading .casino-games--all .casino-games-container--placeholder {
    display: grid;
    animation: fadeInOut 2s infinite;
    pointer-events: none;
}

.casino.loading .casino-games--top .casino-games-container {
    display: none;
}

.casino.loading .casino-games--top .casino-games-container--placeholder {
    display: block;
    animation: fadeInOut 2s infinite;
    pointer-events: none;
}

.casino-games-none {
    display: none;
}

.casino-games-no-fav {
    display: none;
    align-items: center;
}

.casino-games-no-fav i {
    margin: 0 4px;
}

.casino-games-no-free-spins {
    display: none;
    align-items: center;
}

.casino-games.casino-no-games .casino-games-none {
    display: block;
}

.casino-games.casino-no-games .casino-games-container,
.casino-games.casino-no-games .casino-games-container--placeholder {
    display: none;
}

.casino-game-loading {
    display: none;
}

.casino-game-back {
    font-size: 14px;
    color: #555559;
    font-weight: 400;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s ease-out;
    background: #15151b;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
    margin-right: 20px;
}

.casino-game-back .material-icons {
    font-size: 16px;
    margin-right: 6px;
}

.casino-game-back:hover {
    color: #c8354e;
}

.casino-game-balance {
    background: #15151b;
    color: #c8354e;
    font-size: 13px;
    font-weight: 400;
    padding: 3px 6px;
    cursor: pointer;
    transition: opacity 0.2s ease-out;
}

.casino-game-balance:hover {
    opacity: 0.8;
}

.casino-game.loading .casino-game-loading {
    display: block;
}

.casino-game.loading .casino-game-container {
    display: none;
}

.casino-game.loading .casino-game-loading .spinner {
    display: block;
    margin: 0 auto;
}

.casino-game-container {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    transition:
        width 0.2s ease-out,
        height 0.2s ease-out;
}

.casino-game-topbar {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    background: #1c1c22;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 40px;
    align-items: center;
}

.casino-game-topbar-left,
.casino-game-topbar-right {
    display: flex;
    align-items: center;
}

.casino-game-bottombar {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    background: #1c1c22;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 40px;
    align-items: center;
}

.casino-game-leaderboard {
    font-size: 14px;
    color: #fff;
    text-align: right;
    display: flex;
    align-items: center;
    margin-left: 16px;
    background-color: #c32d4f;
    padding: 0 8px;
    height: 40px;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.casino-game-leaderboard:hover {
    opacity: 0.8;
}

.casino-game-leaderboard i {
    font-size: 20px;
    margin-right: 4px;
}

.casino-game-title {
    font-size: 16px;
    color: #848283;
    font-weight: 400;
    text-align: right;
    margin-right: 10px;
}

.casino-game-frame {
    position: relative;
    height: 100%;
    max-height: calc(100vh - 365px);
    overflow: hidden;
    background: #1c1c22;
    transition: max-height 0.3s ease-out;
}

.casino-game-frame:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.casino-game-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.casino-game-frame .casino-game-image {
    display: none;
}

.casino-game-bottombar-mobile-buttons {
    display: none;
}

.casino-game-bottombar.mobile .casino-game-bottombar-mobile-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.casino-game-bottombar.mobile {
    padding: 15px 0;
}

.casino-game-bottombar.mobile .casino-game-bottombar-left,
.casino-game-bottombar.mobile .casino-game-bottombar-right {
    display: none;
}

.casino-game-frame.mobile iframe {
    display: none;
}

.casino-game-frame.mobile .casino-game-image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.casino-game-frame.mobile .casino-game-image img {
    max-height: 100%;
    width: auto;
}

.casino-game-frame-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.casino-game-frame.mobile .casino-game-frame-overlay {
    display: none;
}

.casino-game-frame-overlay-button,
.casino-game-bottombar-mobile-button {
    color: rgba(255, 255, 255, 0.7);
    background: #c32d4f;
    font-size: 14px;
    font-weight: 600;
    font-family: "Oswald", sans-serif;
    margin-right: 12px;
    padding: 5px 12px;
    height: 35px;
    line-height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 4px;
    transition: opacity 0.2s ease-out;
    z-index: 2;
}

.casino-game-bottombar-mobile-button {
    margin: 0 !important;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}

.casino-game-frame-overlay-button:hover {
    opacity: 0.8;
}

.casino-game-frame-overlay-button .material-icons {
    margin-right: 4px;
    font-size: 18px;
}

.casino-game-frame-overlay-real-play,
.casino-game-bottombar-mobile-real-play {
    background: #33b349;
}

.casino-game-toolbar {
    height: 40px;
    width: 100%;
    background: #1c1c22;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.casino-game-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}

.casino-game-toolbar-left {
    display: flex;
    align-items: center;
}

.casino-game-bottombar-button {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
}

.casino-game-bottombar-button:hover {
    color: white;
}

.casino-game-bottombar-button.enabled {
    color: white;
}

.casino-game-toolbar .casino-game-max .material-icons {
    font-size: 20px;
}

.casino-game-bottombar .switch label .lever {
    width: 35px;
    height: 8px;
}

.casino-game-bottombar .switch label .lever:after {
    background-color: #33b349;
    height: 18px;
    width: 18px;
    top: -5px;
}

.casino-game-bottombar .switch label input[type="checkbox"]:checked + .lever:after {
    background-color: #c8354e;
    left: 15px;
}

.casino-game.casino-game-maximized .casino-game-max {
    color: white;
}

.casino-game.casino-game-maximized .casino-game-frame {
    position: relative;
    height: 100%;
    max-height: calc(100vh - 255px);
}

.casino-game-bottombar .switch.disabled label {
    cursor: not-allowed !important;
}

.casino-game-bottombar .switch label input[type="checkbox"][disabled] + .lever:after,
.switch label input[type="checkbox"][disabled]:checked + .lever:after {
    background-color: #666 !important;
    cursor: not-allowed;
}

.casino-game-bottombar-right {
    display: flex;
    align-items: center;
}

.casino-filters {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-family: "Roboto";
    background: #1c1c22;
    text-align: center;
    margin-bottom: 15px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.casino-filters-hide {
    display: none;
    background: #c8354e;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    color: white;

    font-size: 13px;
    margin: 12px 0;
    border-radius: 4px;
}

.casino-filters-hide .material-icons {
    font-size: 16px;
    margin-right: 4px;
}

.casino-appbar.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    z-index: 100;
}

#account-casino-modal .account-info-table a {
    color: unset !important;
    display: flex;
    align-items: center;
}

#account-casino-modal .material-icons {
    font-size: 14px;
}

.casino-carousel {
    width: 100%;
    word-break: break-word;
    max-height: 180px;
    background: #1c1c22;
    border-radius: 10px;
    margin-bottom: 50px !important;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    font-family: "Panton", sans-serif;
}

.casino-carousel.hidden {
    visibility: hidden;
    position: absolute;
}

.casino-carousel-slide {
    /* text-align: center; */
    padding: 20px 40px;
    display: flex !important;
    /* flex-direction: column; */
    height: 180px;
    justify-content: space-between;
    align-items: center;
    word-break: break-word;
    border-radius: 10px;
    position: relative;
}

.casino-carousel-slide--1 {
    background: url("/static/images/casino/cash-splash-banner.png") no-repeat center center;
    background-size: cover;
    position: relative;
    justify-content: start;
}

.casino-carousel-slide-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
}

.casino-carousel-slide--1 .casino-carousel-title {
    color: white;
}

.casino-carousel-slide--1 .casino-carousel-slide-middle img {
    max-height: 135px;
}

.casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-title {
    font-size: 60px;
}
.casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-title {
    font-size: 32px;
    /* font-weight: 600; */
}

.casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-subtitle {
    font-size: 26px;
    margin-top: -10px;
}

.casino-carousel-slide--1 .casino-carousel-slide-middle {
    margin-top: -10px;
    margin-left: 180px;
}

.casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-subtitle {
    font-size: 20px;
    padding: 0 20px;
    text-align: right;
}

.casino-carousel-slide--1 .casino-carousel-slide-right {
    text-align: center;
}

.casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-fake-button {
    background: #c8354e;
    padding: 12px 18px;
    text-align: center;
    font-size: 24px;
    border-radius: 8px;
    margin-top: 16px;
    cursor: pointer;
    display: block;
}

.casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-subtitle {
    font-size: 16px;
    margin-top: -2px;
}

.casino-carousel-slide--2 {
    background: url("/static/images/casino/banner-2.png") no-repeat center center;
    background-size: cover;
    position: relative;
}

.casino-carousel-slide--2-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
}

.casino-carousel-slide--2 .casino-carousel-title {
    color: #c8354e;
}

.casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-title {
    font-size: 42px;
}

.casino-carousel-slide--2 .casino-carousel-slide-middle {
    max-height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -40px;
}
.casino-carousel-slide--2 .casino-carousel-slide-middle img {
    height: 290px;
    width: auto;
}

.casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-subtitle {
    font-size: 26px;
    margin-top: -10px;
}

.casino-carousel-slide--2 .casino-carousel-slide-middle {
    margin-top: -10px;
}

.casino-carousel-slide--2 .casino-carousel-slide-middle .casino-carousel-subtitle {
    font-size: 20px;
    margin-top: -18px;
}

.casino-carousel-slide--2 .casino-carousel-slide-right {
    text-align: center;
}

.casino-carousel-slide--2 .casino-carousel-slide-right .casino-carousel-fake-button {
    background: #c8354e;
    padding: 12px 18px;
    text-align: center;
    font-size: 24px;
    border-radius: 8px;
    margin-top: 16px;
    cursor: pointer;
    display: block;
}

.casino-carousel-slide--2 .casino-carousel-slide-right .casino-carousel-subtitle {
    font-size: 16px;
    margin-top: -2px;
}

.casino-carousel-slide--3 {
    background: url("/static/images/casino/slide-3.png") no-repeat center center;
    background-size: cover;
    position: relative;
}

.casino-carousel-slide--3 img {
    max-height: 160px;
    width: auto;
}

.casino-carousel-slide--3-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
}

.casino-carousel-slide--4 {
    background: url("/static/images/casino/banner-money-train-2.png") no-repeat center center;
    background-size: cover;
    position: relative;
}

.casino-carousel-slide--4-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
}

.casino-carousel-slide--4 .casino-carousel-title {
    color: white;
}

.casino-carousel-slide--4 .casino-carousel-slide-left {
    text-shadow: 1px 1px #000000;
}

.casino-carousel-slide--4 .casino-carousel-slide-middle img {
    max-height: 250px;
}

.casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-title {
    color: white;
    font-size: 42px;
}
.casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-title {
    font-size: 52px;
    /* font-weight: 600; */
}

.casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-subtitle {
    color: white;
    font-size: 32px;
    margin-top: -10px;
}

.casino-carousel-slide--4 .casino-carousel-slide-middle {
    color: #1f1f25;
    margin-top: -10px;
}

.casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-title {
    color: #1f1f25;
}

.casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-title .grey-text {
    color: #c32d4f !important;
}

.casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-subtitle {
    font-size: 20px;
    margin-top: -18px;
}

.casino-carousel-slide--4 .casino-carousel-slide-right {
    text-align: center;
}

.casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-fake-button {
    background: #c8354e;
    padding: 12px 18px;
    text-align: center;
    font-size: 24px;
    border-radius: 8px;
    margin-top: 16px;
    cursor: pointer;
    display: block;
}

.casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-subtitle {
    font-size: 14px;
    margin-top: -2px;
    color: white;
}

.casino-carousel-slide-title {
    color: #c8354e;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: 24px;
    z-index: 1;
    margin-bottom: 4px;
}

.casino-carousel-slide-subtitle {
    font-size: 12px;
    font-weight: 500;
    max-width: 400px;
    color: #888;
    z-index: 1;
    line-height: 14px;
}

.slick-dots li.slick-active button {
    background: #c8354e;
}

.slick-dots li button {
    content: "";
    width: 20px;
    height: 5px !important;
    background: #1c1c22;
    border-radius: 15px;
}

.slick-dots li button:before {
    height: 5px;
}

.slick-prev {
    left: 15px;
    z-index: 10000;
}

.slick-next {
    right: 15px;
    z-index: 10000;
}

.casino-carousel-slide-button {
    cursor: pointer;
    background: #c8354e;
    border-color: #c8354e;
    border-bottom-color: #b32b4a;
    font-size: 14px;
    max-width: 200px;
    margin-top: 12px;
    text-align: center;
    z-index: 1;
}

.casino-carousel-slide-button:hover {
    background: #c32d4f !important;
}

@keyframes fadeInOut {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 0.7;
    }
}

@media (max-width: 860px) {
    .casino-carousel-slide {
        position: relative;
        text-align: center;
    }

    .casino-carousel-slide-button {
        margin: 12px auto;
    }

    .casino-carousel-slide--4 .casino-carousel-title {
        color: black;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-left .white-text {
        color: black !important;
    }
}

@media (max-width: 500px) {
    .casino-carousel-slide-title {
        font-size: 18px;
    }
    .casino-carousel-slide-subtitle {
        display: none;
    }
    .casino-carousel-slide-button {
        font-size: 12px;
    }

    .casino-game-topbar-right {
        flex-direction: column;
    }
}

@media (max-width: 1240px) {
    .casino-appbar {
        top: 0;
    }
}

@media (max-width: 990px) {
    #content-casino {
        margin-top: 50px;
    }

    .casino-filters {
        display: flex;
    }

    .casino-filters-hide {
        display: flex;
    }

    .casino-appbar {
        visibility: hidden;
        opacity: 0;
        height: unset;
        flex-direction: column;
        align-items: center;
        background: rgba(0, 0, 0, 0.9);
        padding: 14px 0;
        border-radius: 4px;
        transform: translateX(-20px);
    }

    .casino-appbar > * {
        margin-bottom: 4px;
    }

    .casino-carousel-slide--3 {
        flex-direction: column;
    }

    .casino-carousel-slide--3 img {
        max-height: 80px;
    }
}

@media (max-width: 570px) {
    .casino-game-topbar {
        height: unset;
        flex-direction: column;
        padding-right: unset;
    }

    .casino-game-topbar-left {
        flex-direction: column;
        width: 100%;
    }

    .casino-game-topbar-right {
        padding: 8px 0;
    }

    .casino-game-back {
        margin-right: 0;
        width: 100%;
        justify-content: center;
    }

    .casino-game-bottombar {
        padding-top: 8px;
        height: unset;
        flex-direction: column;
    }

    .casino-game-bottombar-right {
        margin-top: 8px;
        padding-bottom: 8px;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle img {
        width: 100%;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-middle img {
        width: 100%;
    }
}

@media (max-width: 1560px) {
    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-title {
        font-size: 18px !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-subtitle {
        font-size: 18px !important;
        margin-top: -10px;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-title {
        font-size: 34px !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-subtitle {
        font-size: 14px !important;
        margin-top: -8px !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-fake-button {
        font-size: 16px !important;
        padding: 4px 14px;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-subtitle {
        font-size: 14px !important;
        margin-top: -2px !important;
    }
    .casino-carousel-slide--1 .casino-carousel-slide-middle {
        margin-top: unset !important;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-title {
        font-size: 18px !important;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-subtitle {
        font-size: 18px !important;
        margin-top: -10px;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-title {
        font-size: 34px !important;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-subtitle {
        font-size: 14px !important;
        margin-top: -8px !important;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-fake-button {
        font-size: 16px !important;
        padding: 4px 14px;
    }

    .casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-subtitle {
        font-size: 14px !important;
        margin-top: -2px !important;
    }
    .casino-carousel-slide--4 .casino-carousel-slide-middle {
        margin-top: unset !important;
    }
}

@media (max-width: 900px) {
    .casino-carousel-slide--1,
    .casino-carousel-slide--4,
    .casino-carousel-slide--2 {
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left,
    .casino-carousel-slide--4 .casino-carousel-slide-left,
    .casino-carousel-slide--2 .casino-carousel-slide-left {
        display: flex;
        align-items: center;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-title,
    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-title,
    .casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-title {
        font-size: 26px !important;
        margin-right: 6px;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-subtitle,
    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-subtitle,
    .casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-subtitle {
        font-size: 26px !important;
        margin-top: unset !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle,
    .casino-carousel-slide--4 .casino-carousel-slide-middle {
        display: flex;
        align-items: center;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle {
        margin-left: unset !important;
    }

    .casino-carousel-slide--2 .casino-carousel-slide-middle {
        margin-left: unset !important;
    }

    .casino-carousel-slide--2 .casino-carousel-slide-middle img {
        height: 200px;
    }

    .casino-carousel-slide--2 .casino-carousel-slide-right {
        display: none;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-title,
    .casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-title {
        font-size: 26px !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-subtitle,
    .casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-subtitle {
        display: none;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-fake-button,
    .casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-fake-button {
        font-size: 16px !important;
        padding: 4px 14px;
        margin-top: unset !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-subtitle,
    .casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-subtitle {
        display: none;
    }
}

@media (max-width: 600px) {
    .casino-games-select {
        flex-direction: column;
    }

    .casino-games-select-el {
        margin-right: unset !important;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-title,
    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-title,
    .casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-title {
        font-size: 18px !important;
        margin-right: 6px;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-subtitle,
    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-subtitle,
    .casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-subtitle {
        font-size: 18px !important;
        margin-top: unset !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-title,
    .casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-title {
        font-size: 18px !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-fake-button,
    .casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-fake-button {
        font-size: 12px !important;
        padding: 4px 14px;
        margin-top: unset !important;
    }
}

@media (max-width: 460px) {
    .casino-carousel-slide--1 .casino-carousel-slide-left,
    .casino-carousel-slide--4 .casino-carousel-slide-left,
    .casino-carousel-slide--2 .casino-carousel-slide-left {
        flex-direction: column;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-title,
    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-title,
    .casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-title {
        font-size: 12px !important;
        margin-right: 6px;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-left .casino-carousel-subtitle,
    .casino-carousel-slide--4 .casino-carousel-slide-left .casino-carousel-subtitle,
    .casino-carousel-slide--2 .casino-carousel-slide-left .casino-carousel-subtitle {
        font-size: 12px !important;
        margin-top: unset !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-middle .casino-carousel-title,
    .casino-carousel-slide--4 .casino-carousel-slide-middle .casino-carousel-title {
        font-size: 12px !important;
    }

    .casino-carousel-slide--1 .casino-carousel-slide-right .casino-carousel-fake-button,
    .casino-carousel-slide--4 .casino-carousel-slide-right .casino-carousel-fake-button {
        font-size: 10px !important;
        padding: 4px 14px;
        margin-top: unset !important;
    }
}

@media (max-width: 800px) {
    .casino-carousel-slide--1 .casino-carousel-slide-left {
        flex-direction: column;
    }
}

.scavenger-hunt-icon svg path {
    fill: #c32d4f;
}

.v-slot {
    width: 1px;
    height: 1px;
    display: inline;
    margin: 0px;
    padding: 0px;
    font-size: 1px;
}

.v-slot.v-slot-active {
    width: fit-content;
    max-width: 300px;
    height: auto;
    display: block;
}

span.v--c2020 {
    display: block;
    width: 250px;
    max-width: 100%;
    filter: hue-rotate(190deg) contrast(2) brightness(2);
}

div#wheel .v-slot {
    position: absolute;
    left: calc(50% - 130px);
    top: calc(50% - 40px);
    z-index: 500000;
}

.duel .v-slot {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 50%;
}

.message-content-wrapper .v-slot {
    width: 100%;
}

div#site-activity.hidden .v-slot {
    display: none;
}

.casino-games-el-image-container .v-slot .v--c2020 {
    position: absolute;
    background: #00000099;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.casino-games-el-image-container .v-slot .v--c2020 img {
    display: inline-block;
    margin-top: calc(40% - 50px);
}

.matches-el-teams .v-slot .v--c2020 {
    position: absolute;
    width: fit-content;
    max-width: 200px;
}

.v--c2020.vr--common {
    animation: va-filter-common 2s infinite;
}
.v--c2020.vr--uncommon {
    animation: va-filter-uncommon 2s infinite;
}
.v--c2020.vr--rare {
    animation: va-filter-rare 2s infinite;
}
.v--c2020.vr--epic {
    animation: va-filter-epic 1s infinite;
}
.v--c2020.vr--legendary {
    animation: va-filter-legendary 1s infinite;
}

span.v--c2020 img {
    width: 100%;
}

/** Modal **/

.modal-voucher-event {
}
.modal-voucher-event .modal-dialog {
    padding: 20px;
    max-width: 500px;
    z-index: 1;
    overflow: hidden;
    min-height: 310px;
    display: flex;
    flex-direction: column;
}

.modal-voucher-event .modal-dialog:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, transparent 50%, #26262c);
}

.vem-title {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #888;
    z-index: 1;
    margin-bottom: 0;
}

.vem-shell {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.vem-shell-up {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 75px;
    background-image: url("/static/images/voucher-event/eggs/egg-1.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 150px;
}
.vem-shell-down {
    position: absolute;
    top: 75px;
    width: 100%;
    height: 75px;
    background-image: url("/static/images/voucher-event/eggs/egg-1.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 150px;
}

.vem-shell.rarity-0 .vem-shell-up,
.vem-shell.rarity-0 .vem-shell-down {
    background-image: url("/static/images/voucher-event/eggs/egg-0.png");
}

.vem-shell.rarity-1 .vem-shell-up,
.vem-shell.rarity-1 .vem-shell-down {
    background-image: url("/static/images/voucher-event/eggs/egg-1.png");
}

.vem-shell.rarity-2 .vem-shell-up,
.vem-shell.rarity-2 .vem-shell-down {
    background-image: url("/static/images/voucher-event/eggs/egg-2.png");
}

.vem-shell.rarity-3 .vem-shell-up,
.vem-shell.rarity-3 .vem-shell-down {
    background-image: url("/static/images/voucher-event/eggs/egg-3.png");
}

.vem-shell.rarity-4 .vem-shell-up,
.vem-shell.rarity-4 .vem-shell-down {
    background-image: url("/static/images/voucher-event/eggs/egg-4.png");
}

.vem-shell.rarity-5 .vem-shell-up,
.vem-shell.rarity-5 .vem-shell-down {
    background-image: url("/static/images/voucher-event/eggs/egg-5.png");
}

.vem-shell .vem-reward {
    width: 100%;
    text-align: center;
    opacity: 0;
}

.vem-reward svg {
    margin-top: 35px;
}

.vem-reward .event-mid-section--ticket {
    max-width: 200px;
    margin: 25px auto 0px;
}

.vem-reward .event-mid-section--ticket .vem-reward-name {
    margin-top: -40px;
    margin-left: -30px;
}

span.vem-reward-spin {
    background: url("/static/images/voucher-event/reward_spin.png");
    display: inline-block;
    width: 145px;
    height: 100px;
    border-radius: 8px;
    margin-top: 10px;
}

.vem-reward .vem-reward-name {
    position: absolute;
    transform: translate(-100%, 50%);
    padding: 10px 20px;
    background: #151519;
    border-radius: 5px;
    opacity: 0;
    animation: vem-reward-name-appear 0.5s forwards;
    animation-delay: 2s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vem-reward .vem-reward-name:before {
    content: "";
    height: 16px;
    width: 16px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #151519;
    transform: translateX(6px) translateY(-50%);
    position: absolute;
    right: -10px;
    top: 50%;
}

.vem-shell.vem-reveal .vem-shell-up {
    animation: egg-shell-up 2s forwards;
    animation-iteration-count: 1;
}
.vem-shell.vem-reveal .vem-shell-down {
    animation: egg-shell-down 2s forwards;
    animation-iteration-count: 1;
}

.vem-shell.vem-reveal .vem-reward {
    animation: egg-appear 1s forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vem-shell.vem-shake .vem-shell-up {
    animation: shake 1s;
    animation-iteration-count: infinite;
}
.vem-shell.vem-shake .vem-shell-down {
    animation: shake 1s;
    animation-iteration-count: infinite;
}

.vem-shell.vem-show-reward .vem-reward {
    opacity: 1;
}

.vem-shell.vem-show-reward .vem-shell-up,
.vem-shell.vem-show-reward .vem-shell-down {
    display: none;
}

@keyframes egg-appear {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes egg-shell-up {
    0% {
        transform: translate(1px, 1px);
        opacity: 1;
    }
    100% {
        transform: translate(1px, -120px) rotate(-20deg) scale(0);
        opacity: 0;
    }
}

@keyframes egg-shell-down {
    0% {
        transform: translate(1px, 1px) rotate(0deg) scale(1);
    }
    100% {
        transform: translate(-5px, 180px) rotate(20deg);
    }
}

/** EGGS **/

.ve-egg {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: url("/static/images/voucher-event/eggs/egg-shadow.png");
    background-size: 80px;
    background-repeat: no-repeat;
    background-position: 25px 65px;
}

section#content-affiliates .ve-egg,
section#content-vip .ve-egg,
section#content-rewards .ve-egg,
section#content-profile .ve-egg,
section#content-roulette .ve-egg,
section#content-deposit-options .ve-egg,
section#content-withdraw-options .ve-egg,
section#content-duels .ve-egg,
section#content-faq .ve-egg,
section#content-terms-of-service .ve-egg,
section#content-provably-fair .ve-egg,
section#content-bounty-program .ve-egg,
section#content-aml-kyc-policy .ve-egg,
section#content-raffle .ve-egg,
section#content-leaderboards .ve-egg {
    position: absolute;
    z-index: 10000;
}

.message-content-wrapper .ve-egg {
    position: absolute;
    z-index: 10000;
}

.modal-overlay .ve-egg {
    position: absolute;
}

.account-section .ve-egg {
    position: relative;
}

span.ve-egg.ve-standalone {
    position: absolute;
    z-index: 999999999999999; /* god help me */
}

.ve-egg .egg {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url("/static/images/voucher-event/eggs/egg-0.png");
    background-repeat: no-repeat;
    background-size: 60px;
    background-position: center;
    transform-origin: 50% 50%;
}

.ve-rarity-1 .egg {
    background-image: url("/static/images/voucher-event/eggs/egg-1.png");
}
.ve-rarity-2 .egg {
    background-image: url("/static/images/voucher-event/eggs/egg-2.png");
}
.ve-rarity-3 .egg {
    background-image: url("/static/images/voucher-event/eggs/egg-3.png");
}
.ve-rarity-4 .egg {
    background-image: url("/static/images/voucher-event/eggs/egg-4.png");
}
.ve-rarity-5 .egg {
    background-image: url("/static/images/voucher-event/eggs/egg-5.png");
}

.ve-egg.shake .egg {
    animation: egg-shake 1s;
    animation-iteration-count: infinite;
}

@keyframes egg-shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg) scale(1);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg) scale(1.02);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg) scale(1.04);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg) scale(1.06);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg) scale(1.08);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg) scale(1.1);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg) scale(1.08);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg) scale(1.06);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg) scale(1.04);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg) scale(1.02);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg) scale(1);
    }
}

/* .vem-reward-joke {
    font-size: 20px;
    font-weight: 600;
    font-family: "Comic Sans MS", "Comic Sans", "Roboto";

    background: -webkit-linear-gradient(90deg,#CC344C, #F23D5A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    padding: 0.5em 1em;
    border-radius: 5px;

    transition: filter 20s, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
} */

.vem-joke-emote {
    margin-bottom: 10px;
}

.vem-joke-emote .emoji {
    width: 50px !important;
    height: 50px !important;
}

.vem-reward-joke {
    font-size: 14px;
    font-weight: 600;
    background: #151519;
    padding: 0.5em 1em;
    border-radius: 5px;
    border: 1px solid #151519;
}

.vem-reward-joke:hover {
    border: 1px solid #c8354e;
    cursor: pointer;
}

.vem-joke-copy {
    margin-bottom: auto !important;
}

.vem-claim-voucher {
    align-items: center;
}

.vem-claim-voucher .content-btn {
    position: static;
}

.vem-action {
    flex: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-end;
    animation: 0.3s vem-action-fade-in forwards;
    padding: 10px;
}

.vem-action > * {
    width: 100%;
    text-align: center;
}

.vem-action p {
    font-size: 15px;
    margin: 1.5em 0;
    color: #999;
    font-weight: 500;
}

.vem-action .btn-toolbar-lg {
    font-size: 14px;
    padding: 10px 20px;
}

@keyframes vem-action-fade-in {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.vem-delay--wheel {
    position: absolute;
    right: -150px;
    top: 100px;
    z-index: -2;
    width: 80%;
    height: auto;
}

.vem-delay--wheel #circle {
    animation: 3s vem-wheel-spin forwards;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin: center;
    transform-box: fill-box;
}

.vem-delay--wheel #arrow-and-glow {
    animation: 1s vem-wheel-arrow-glow forwards;
    animation-delay: 3s;
    opacity: 0;
}

@keyframes vem-reward-name-appear {
    from {
        transform: translate(-100%, 50%);
        opacity: 0;
    }

    to {
        transform: translate(calc(-100% - 20px), 50%);
        opacity: 1;
    }
}

@keyframes vem-wheel-spin {
    from {
        transform: rotateZ(0);
        opacity: 0;
    }

    to {
        transform: rotateZ(360deg);
        opacity: 1;
    }
}

@keyframes vem-wheel-arrow-glow {
    0% {
        filter: drop-shadow(0 0 0px #ffc870);
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    100% {
        filter: drop-shadow(0 0 20px #ffc870);
        opacity: 1;
    }
}

.modal-voucher-event .btn-toolbar {
    display: block;
}

@media (max-width: 480px) {
    .vem-joke-emote .emoji {
        width: 32px !important;
        height: 32px !important;
    }

    .vem-reward-joke {
        font-size: 13px;
    }
}
#modal-first-deposit-bonus-free-spins .modal-dialog {
    min-height: 300px;
    padding: 20px;
    max-width: 900px;
}

#modal-first-deposit-bonus-free-spins .modal-loading {
    display: none;
}

.modal-first-deposit-bonus-free-spins-content .title {
    font-size: 34px;
    color: #c32d4f;
    font-weight: 400;
}

.modal-first-deposit-bonus-free-spins-content .subtitle {
    font-size: 13px;
    color: #888888;
    font-weight: 400;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 20px;
}

.modal-first-deposit-bonus-free-spins-content .info {
    font-size: 14px;
    color: #c32d4f;
    font-weight: 400;
    margin-bottom: 20px;
}

#modal-first-deposit-bonus-free-spins.loading .modal-loading {
    display: block;
}

#modal-first-deposit-bonus-free-spins.loading .modal-first-deposit-bonus-free-spins-content {
    display: none;
}

#modal-first-deposit-bonus-free-spins .first-deposit-bonus-free-spins-games-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 14px;
    align-items: center;
}

#modal-first-deposit-bonus-free-spins .first-deposit-bonus-free-spins-games-grid img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

#modal-first-deposit-bonus-free-spins .modal-actions {
    margin-top: 20px;
    text-align: center;
}

#modal-first-deposit-bonus-free-spins button {
    background: #c32d4f;
    border-color: #c32d4f;
    border-bottom-color: #b32b4a;
    font-size: 15px;
    margin-right: 12px;
    padding: 5px 10px;
    height: 40px;
}
.utorg-container {
    display: flex;
    flex-flow: row wrap;

    justify-content: space-between;
    align-items: center;

    background: #16161b;
    padding: 2rem 1rem;
    border-radius: 4px;

    position: relative;
}

.utorg-logo {
    position: absolute;
    top: 6px;
    right: -10px;
    pointer-events: none;
}

.utorg-logo svg {
    height: 10px;
}

.utorg-logo svg path {
    fill: hsl(240, 7%, 38%);
}

.utorg-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.utorg-icon img {
    max-height: 48px;
    width: auto;
    margin-right: 1rem;
}

.utorg-description {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.utorg-description-title {
    font-size: 20px;
    font-weight: 500;
    font-family: "Open Sans", "Roboto", Helvetica, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.7);
}

.utorg-description-subtitle {
    font-weight: 800;
    color: hsl(240, 7%, 52%);
}

.utorg-deposit {
    max-height: 36px;
    font-size: 14px;
}

#modal-utorg-deposit .modal-dialog {
    padding: 1.67rem;
}

#modal-utorg-deposit .modal-utorg-deposit-content {
    margin-top: 3rem;
}

#modal-utorg-deposit .modal-utorg-deposit-content .input-label {
    margin: 0.5rem;
}

#modal-utorg-deposit .modal-utorg-deposit-content label {
    left: 0;
    font-size: 14px;
}

#modal-utorg-deposit .custom-input-field label {
    display: block;
    margin-bottom: 4px;
}

#modal-utorg-deposit .utorg-deposit-currency {
    margin-top: 2.4rem;
}

#modal-utorg-deposit .input-field label {
    top: -25px !important;
}

#modal-utorg-deposit .modal-dialog {
    max-width: 850px;
}

#modal-utorg-deposit .modal-actions {
    margin-top: 2rem;
}

#modal-utorg-deposit .modal-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 14px;
    color: hsl(240, 7%, 52%);
}

#modal-utorg-deposit .select-dropdown {
    background: #1c1c22;
    border: none;
    padding: 10px;
    width: calc(100% - 20px);
    /* height: 20px; */
    border-radius: 8px;
    margin: 0px;
    font-size: 15px;
    border: 1px solid #1c1c22 !important;
    box-shadow: none !important;
}

#modal-utorg-deposit .select-dropdown:not(.active) {
    /* height: 20px; */
}

.utorg-warning {
    text-align: center;
    margin-top: 1rem;
    font-size: 14px;
    padding: 1.5rem 2.25rem;
    background: #562231;
    border: 1px solid #8c2740;
}

.btn-utorg-deposit {
    width: 100%;
    font-size: 16px;
}

.utorg-deposit-currency .select-wrapper {
    width: 100%;
}

.utorg-deposit-currency .select-wrapper input.select-dropdown {
    border: none;
    box-shadow: none;
    padding: 0.5rem 0;
}

.utorg-deposit-currency span.caret {
    top: 12.5px;
    right: 10px;
    z-index: 1;
    pointer-events: none;
}

.utorg-deposit-currency input.select-dropdown {
    height: 1.667rem;
}

.utorg-deposit-currency span.caret,
.utorg-deposit-currency .select-wrapper input.select-dropdown,
.utorg-deposit-currency ul,
.utorg-deposit-currency ul li {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

.utorg-deposit-currency ul {
    border-radius: 4px;
}

.utorg-deposit-currency ul li {
    padding: 0px;
    min-height: 30px !important;
    line-height: 1em;
    background: hsl(240, 10%, 14.5%) !important;
}

.utorg-deposit-currency ul li:hover,
.utorg-deposit-currency ul li.selected {
    background-color: hsl(240, 10%, 17%) !important;
}

.utorg-deposit-currency ul li span {
    color: #c8354e;
    font-size: 14px;
    font-weight: 600;
    padding-right: 0;
}

.utorg-deposit-currency ul li.disabled > span {
    color: rgba(255, 255, 255, 0.5);
    background: hsl(240, 10%, 14.5%);
    cursor: default;
}

@media (max-width: 768px) {
    .utorg-container {
        text-align: center;
        justify-content: center;
    }

    .utorg-description {
        justify-content: center;
    }

    .utorg-icon img {
        margin-right: 0;
    }
}

/* RAFFLE TAG */
#content-raffle {
    margin-top: 110px;
    margin-left: 0.75rem;
    word-break: break-word;
}
#content-raffle .event_progress {
    max-width: 300px;
    height: 5px;
    background: #26262c;
    border-radius: 4px;
}

#content-raffle .event_progress .bar {
    width: 0px;
    height: 5px;
    background: #ce3351;
    border-radius: 4px;
}

.event-top-section {
    background: #1c1c22;
    border-radius: 5px;
    padding: 20px;
    /* background: #1c1c22 url('/static/images/raffle/background-top-header.png'); */
    /* background-size: cover; */
}

.event-top-section--left-title {
    margin: 0 0 10px 0;
    color: #ce3351;
    font-weight: 500 !important;
    font-size: 33px;
}

.event-top-section--left-subtitle {
    color: #b5b5ba;
    font-size: 13px;
    font-weight: 500;
    margin: 0px;
}

.event-top-section--left-subtitle strong {
    color: #fff;
}

.event-top-section--left-footer {
    color: #74747e;
    font-size: 14px;
    /* font-weight: 600; */
    margin: 0px;
}

.event-top-section--left-date {
    color: #b5b5ba;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 36px;
}

.event-mid-section--info {
    margin-top: 24px;
}

.event-top-section--left-info,
.event-mid-section--info {
    display: flex;
    align-items: center;
    height: 44px;
    width: 200px;
}

.event-top-section--left-info {
    margin: 0 auto;
}

.event-top-section--left-info-icon,
.event-mid-section--info-icon {
    background: #c32d4f;
    height: 100%;
    width: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1;
}

.event-top-section--left-info-icon svg,
.event-mid-section--info-icon svg {
    max-height: 22px;
    width: auto;
}

.event-top-section--left-info-icon svg path,
.event-mid-section--info-icon svg path {
    fill: #fff;
}

.event-top-section--left-info-content,
.event-mid-section--info-content {
    height: 100%;
    background: #662631;
    color: #fff;
    font-size: 13px;
    padding: 0 12px 0 22px;
    line-height: 44px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-weight: 400 !important;
    margin-left: -10px;
    /* width: 100%; */
    width: 170px;
    text-align: center;
}

.ev-status-started {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.event-top-section--highlight {
    padding: 5px 10px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.event-top-section--staytuned {
    font-size: 16px;
    color: #c8354e;
    font-weight: bold;
    padding-top: 5px;
}

.event-top-section--staytuned a {
    color: #b5b5ba;
    transition: color 0.2s ease-out;
}

.event-top-section--staytuned a:hover {
    color: #fff;
}

.event_timer {
    font-size: 16px;
    color: #ce3351;
    font-weight: 600;
    margin-bottom: 5px;
}

.event-top-section--right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.event-top-section--right img {
    max-height: 200px;
    width: auto;
}

.event-top-section--right .user_name {
    color: #ce3351;
    font-weight: 500 !important;
    font-size: 32px;
    border-bottom: 2px solid #ce3351;
    margin-bottom: 4px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.event-top-section--right .user_tickets {
    margin-top: 10px;
    font-size: 13px;
    border-radius: 5px;
    background-color: #c8354e;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    padding: 6px 16px;
}

.event-top-section--right .user_name .emoji {
    display: inline;
}

.event-top-section--right .user_name img {
    width: 24px;
    height: auto;
}

.event-top-section--right .user_xp_container {
    color: #6f6d6f;
    font-size: 14px;
    font-weight: 600;
}

.event-top-section--right .user_xp_container span {
    color: #ce3351;
}

.event-mid-section {
    margin: 32px 0;
    /* display: flex; */
    /* justify-content: space-evenly; */
    /* align-items: center; */
    /* background: #1c1c22; */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 4px solid #c8354e;
    padding: 20px;
    background: #1b1c22;
}

.event-mid-section.event-casino {
    background: url("/static/images/raffle/background-casino-section.png") no-repeat;
    background-size: cover;
}

.event-casino--text {
    margin: 10px auto 30px auto;
    text-align: center;
    width: 100%;
    max-width: 750px;
    font-size: 16px;
    color: #ce3351;
    font-weight: 500;
}

.event-casino--container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.event-casino--container a {
    height: 150px;
    width: auto;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.event-casino--container a img {
    max-height: 100%;
    width: auto;
}

.event-casino--text a {
    color: #b5b5ba;
}

.event-mid-section--title {
    color: #c8354e;
    margin-top: 10px;
    font-size: 54px;
    font-weight: 800;
}

.event-mid-section--subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #d9d3d4;
    max-width: 400px;
}

.event-mid-section--subtitle a {
    color: #c32d4f;
}

.event-mid-section--subtitle a:hover {
    color: #fff;
}

.event-mid-section--price {
    position: relative;
    text-align: center;
    padding: 12px 30px;
    font-size: 27px;
    color: #ffffff;
    font-weight: 800;
    border-radius: 7px;
    max-width: 220px;
    margin: 70px 0 20px 0;
    height: 57px;
    line-height: 57px;
}

.event-mid-section--left {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.event-mid-section--price span {
    z-index: 1;
}

.event-mid-section--bg {
    background: #c8354e;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 7px;
}

.event-mid-section--shadow {
    content: "";
    position: absolute;
    top: 8px;
    right: -8px;
    bottom: -8px;
    left: 8px;
    border-radius: 7px;
    background: #872234;
}

.event-mid-section--prizes {
    margin: 0 auto 20px auto;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.event-mid-section--prize {
    flex-basis: 15%;
    min-width: 170px;
    margin: 10px;
    background: #1a1a1f;
    position: relative;
    border-top: 2px solid #c8354e;
    padding: 1rem;
    box-shadow: 0 5px 4px 0px #131115;
}

.event-mid-section--prize-price {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 18px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    font-size: 10px;
    color: #ffffff;
    background: #c8354e;
    font-weight: bold;
    font-family: "Panton";
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-mid-section--prize-qty {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12px;
    color: #ffffff;
    background: #c8354e;
    font-weight: bold;
    font-family: "Panton";
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-mid-section--prize-image {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-mid-section--prize-image img {
    height: 160px;
    width: auto;
}

.event-mid-section--prize-title {
    font-size: 13px;
    color: #c8354e;
    font-weight: 600;
    font-family: "Open Sans";
    text-align: center;
}

.event-mid-section--games {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr 1fr;
}

.event-mid-section--games img {
    /* max-height: 40px; */
    width: 100%;
    border-radius: 5px;
}

.event-mid-section--small-title {
    margin: 10px 0 30px 0;
    font-size: 21px;
    color: #ce3351;
    font-weight: 500;
    font-family: "Roboto";
    text-align: center;
}

.event-mid-section--info-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
}

.event-mid-section--info-el {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.event-mid-section--info-el-icon {
    height: 105px;
    width: 105px;
    display: flex;
    background: #1a1a20;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.event-mid-section--info-el-icon svg {
    height: 47px;
    width: 47px;
}

.event-section--info-el-icon-rewards svg {
    height: 38px;
    width: 38px;
}

.event-mid-section--info-el-icon svg path {
    fill: #c8354e;
}

.event-mid-section--info-el-title {
    font-size: 15px;
    color: #b5acac;
    font-weight: 500;
    font-family: "Roboto";
    text-align: center;
}

.event-mid-section--info-el-subtitle {
    background: #1a1a20;
    color: #b5acac;
    padding: 1rem;
    border-radius: 5px;
    width: 90%;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.event-mid-section--tickets-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.event-mid-section--ticket {
    position: relative;
    min-width: 180px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #8a303e;
    margin: 10px 20px;
    border-radius: 4px;
}

.event-mid-section--buton-more {
    max-width: 100px;
    background: #8a303e;
    text-align: center;
    padding: 6px 16px;
    color: #fff;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 20px;
}

.event-mid-section.event-scavenger .event-mid-section--title {
    font-size: 35px;
}

.event-mid-section--buton-more:hover {
    background: #912637;
}

.event-mid-section--ticket-top-left,
.event-mid-section--ticket-middle-left,
.event-mid-section--ticket-bottom-left {
    position: absolute;
    height: 13px;
    width: 18px;
    border-radius: 5px;
    background: #8a303e;
    left: 2px;
    transform: translateX(-50%);
}

.event-mid-section--ticket-top-right,
.event-mid-section--ticket-middle-right,
.event-mid-section--ticket-bottom-right {
    position: absolute;
    height: 13px;
    width: 18px;
    border-radius: 5px;
    background: #8a303e;
    right: 2px;
    transform: translateX(50%);
}

.event-mid-section--ticket-top-left,
.event-mid-section--ticket-top-right {
    top: 5px;
}

.event-mid-section--ticket-middle-left,
.event-mid-section--ticket-middle-right {
    top: 50%;
}

.event-mid-section--ticket-middle-left {
    transform: translate(-50%, -50%);
}

.event-mid-section--ticket-middle-right {
    transform: translate(50%, -50%);
}

.event-mid-section--ticket-bottom-left,
.event-mid-section--ticket-bottom-right {
    bottom: 5px;
}

.event-mid-section--ticket-entry {
    height: 36px;
    width: 72%;
    border: 3px solid #1c1c22;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 500;
}

.event-mid-section.event-bux {
    border-top: none;
}

.event-mid-section.event-bux .event-mid-section--title {
    font-size: 43px;
}

.car-image {
    max-width: 100%;
    max-height: 330px;
    height: auto;
}

.event-mid-section--bux {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: url("/static/images/raffle/bux-background.png");
    border-radius: 10px;
    padding: 20px 0;
    flex-wrap: wrap;
    word-break: keep-all;
}

.event-mid-section.event-free-spins .event-mid-section--bux {
    width: 90%;
    margin-top: 40px;
}

.event-mid-section--bux-value {
    font-size: 61px;
    color: #fff;
    font-weight: 800;
    text-shadow: 0 3px #b8b4b4;
}

.event-mid-section--bux-icon {
    height: 108px;
    width: 108px;
    border-radius: 50%;
    background: #1c1c22;
    border: 2px solid #c32d4f;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.event-mid-section--bux-icon img {
    max-height: 50px;
    width: auto;
}

.event-place {
    background: #1a1a1f;
    border-radius: 5px;
    text-align: center;
    padding: 16px;
    min-height: 200px;
    flex-basis: 300px;
}

.event-place .user_avatar img {
    height: 80px;
    width: auto;
    border-radius: 50%;
    border: 2px solid #ce3351;
}

.event-place .user_name {
    color: #ce3351;
    font-size: 16px;
    font-weight: 600;
    margin: 8px 0;
}

.event-place .user_name a {
    color: #ce3351;
}

.event-place .user_reward {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 4px 0;
    border: 1px solid #ce3351;
    color: #ce3351;
    font-size: 14px;
}

.event-place .user_reward img {
    height: 18px;
    margin-right: 6px;
}

.event-place .user_xp {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 14px;
    padding: 4px 0;
    background: #26262c;
    color: #5f5f5e;
}

.event-place .user_reward,
.event-place .user_xp {
    max-width: 150px;
    margin-left: auto;
    margin-right: auto;
}

.event-place .user_xp img {
    height: 18px;
    margin-right: 6px;
}

.event-place .user_badge {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
}

.event-place .user_badge img {
    max-height: 100%;
    width: auto;
}

.event-place-1 .user_avatar img,
.event-place-1 .user_name,
.event-place-1 .user_name a,
.event-place-1 .user_reward {
    border-color: #ffc870;
    color: #ffc870 !important;
}

.event-place-2 .user_avatar img,
.event-place-2 .user_name,
.event-place-2 .user_name a,
.event-place-2 .user_reward {
    border-color: #41a9c2;
    color: #41a9c2 !important;
}

.event-place .user_name a:hover {
    color: white !important;
}

.event-place-1 {
    margin-bottom: 22px;
}

.event-table-section tbody tr {
    background: #1c1c22;
    border-top: 8px solid #262626;
    border-bottom: 8px solid #262626;
}

.event-table-section thead tr {
    /* border-top: 4px solid #ce3351;
    border-bottom: 8px solid #262626; */
    background: #1c1c22;
}

.event-table-section tr td:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    text-align: center;
}

.event-table-section tr td:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.event-table-section th {
    border-top: 4px solid #ce3351;
    color: #404043;
}

.event-table-section th:first-child {
    border-bottom-left-radius: 15px;
    text-align: center;
}

.event-table-section th:last-child {
    border-bottom-right-radius: 15px;
}

.event-table-section .place {
    font-size: 18px;
    color: #ce3351;
    font-weight: 600;
}

.event-table-section tr {
    color: #ce3351;
    font-size: 16px;
}

.event-table-section .user img {
    border-radius: 50%;
    height: 32px;
    margin-right: 8px;
    border: 2px solid #ce3351;
}

.event-table-section .user .level-badge {
    margin-bottom: unset !important;
}

.event-table-section .user a {
    color: #ce3351;
}

.event-table-section .user a:hover {
    color: white;
}

.event-table-section .user img.emoji.emoji-single,
.event-place img.emoji.emoji-single {
    border: none;
    border-radius: 0px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.event-table-section .user img.emoji,
.event-place img.emoji {
    border: none;
    border-radius: 0px;
    width: auto;
    height: 16px;
    vertical-align: baseline;
}

.event-table-section .user .emoji {
    margin: 0px;
    padding: 0px;
    width: 18px;
}
.event-table-section .user .emoji img {
    border: 0px !important;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin: 0px;
}

.event-table-section .avatar {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.event-table-section .xp img,
.event-table-section .reward img {
    height: 18px;
}

.event-bottom-section {
    border-radius: 5px;
    background: #1c1c22;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.event-bottom-section-left,
.event-bottom-section-right {
    text-align: center;
    font-size: 12px;
    color: #b5acac;
    font-weight: 400;
    font-family: "Roboto";
    flex: 1;
}

.event-table-section table.placeholder th,
.event-table-section table.placeholder td {
    width: 50%;
    text-align: center;
    padding: 5px;
}

.gloves-mobile {
    display: none;
}

.event-table-section .bet-icon-svg {
    margin-bottom: -3px;
}

.event-table-section td.user {
    display: flex;
    align-items: center;
}

.raffle-ticket-form {
    display: flex;
    align-items: center;
}

.raffle-ticket-form .preloader-wrapper {
    display: none;
    height: 24px;
    width: 24px;
    margin-top: 0;
    margin-left: 10px;
}

.raffle-ticket-form.loading .preloader-wrapper {
    display: inline-block;
}

.raffle-ticket-form.loading button {
    display: none;
}

.raffle-ticket-form input {
    margin-top: 5px;
    margin-bottom: 3px;
    background: #202026 !important;
    border: 1px solid #627075;
    height: 40px;
    border: none !important;
    box-shadow: none !important;
    background: #18181d !important;
    color: #a1a1a7;
    font-size: 12px !important;
    border-radius: 4px !important;
    padding: 0px 10px !important;
    max-width: 400px !important;
    width: calc(100% - 40px);
}

.raffle-ticket-form button {
    background: #c32d4f;
    border-color: #c32d4f;
    border-bottom-color: #b32b4a;
    font-size: 15px;
    margin-right: 12px;
    padding: 5px 10px;
    height: 40px;
    margin-left: 8px;
}

.raffle-ticket-form button:hover {
    background: #c32d4f;
    opacity: 0.9;
}

#raffle-ticket-info-modal h5 {
    color: #c32d4f;
    text-align: center;
}

#raffle-ticket-info-modal .modal-content {
    text-align: center;
}

#raffle-ticket-info-modal .avatar-username {
}

#raffle-ticket-info-modal .avatar-username img {
    border-radius: 50%;
    height: 50px;
    width: 50px;
}

#raffle-ticket-info-modal .raffle-ticket-info-modal-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 4px;
    padding: 8px 15px;
    background: #1c1c22;
    font-size: 14px;
    margin-top: 18px;
}

#raffle-ticket-info-modal .raffle-ticket-info-modal-content .user-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

#raffle-ticket-info-modal .username {
    max-width: 240px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#raffle-ticket-info-modal .raffle-ticket-info-modal-content .username {
    font-weight: 800;
    color: #c32d4f;
}

#raffle-ticket-info-modal .modal-dialog {
    padding: 24px;
}

@media (max-width: 990px) {
    #content-fights {
        margin-top: 60px;
    }

    .event-top-section--left-title {
        font-size: 24px;
    }
    .gloves-desktop {
        display: none;
    }

    .gloves-mobile {
        display: block;
    }
    .event-top-section {
        background: #1a1a1f;
        border-radius: unset;
    }
    .event-top-section--left {
        text-align: center;
    }

    .event-top-section--right .user_name {
        font-size: 24px;
    }

    .event-top-section--right .user_name {
        display: inline-block;
        word-wrap: normal !important;
        line-height: normal;
        word-break: initial;
    }
    .event-top-section--right .user_name .emoji {
        display: inline-flex;
        vertical-align: middle;
        margin: 0px;
        padding: 0px;
        width: auto;
        height: auto;
    }

    .event-table-section tbody tr {
        border-bottom: 10px solid #262626;
    }
    .event_progress {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    .event-mid-section {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }
    .event-place {
        width: 100%;
        margin: 10px 0;
        flex-basis: unset;
        border-radius: unset;
    }

    .event-place-1 {
        order: 1;
    }

    .event-place-2 {
        order: 2;
    }

    .event-place-3 {
        order: 3;
    }

    .event-table-section thead {
        display: none;
    }

    .event-table-section td {
        padding: unset;
    }

    .event-table-section tr {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: #1a1a1f !important;
        border-radius: 5px;
        text-align: center;
        padding: 16px;
        min-height: 200px;
    }

    .event-table-section tr .level-badge {
        display: none;
    }

    .event-table-section .place {
        order: 5;
        margin-top: 8px;
        color: black;
        background: #ce3351;
        height: 26px;
        width: 26px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .event-table-section .user {
        order: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .event-table-section .user img {
        height: 80px;
        width: auto;
        border-radius: 50%;
        border: 2px solid #ce3351;
    }

    .event-table-section .user a {
        color: #ce3351;
        font-size: 16px;
        font-weight: 600;
        margin: 8px 0;
    }

    .event-table-section .xp {
        order: 3;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        font-size: 14px;
        padding: 4px 0;
        background: #26262c;
        color: #5f5f5e;
        width: 100%;
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
    }

    .event-table-section .reward {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        padding: 4px 0;
        border: 1px solid #ce3351;
        color: #ce3351;
        font-size: 14px;
        width: 100%;
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
    }

    .event-mid-section--info-container {
        flex-direction: column;
    }

    .event-bottom-section {
        flex-direction: column;
    }

    .event-mid-section--title {
        font-size: 28px !important;
    }

    .event-mid-section--bux-value {
        font-size: 18px !important;
        text-shadow: none !important;
    }

    .event-mid-section--bux-icon {
        height: 50px;
        width: 50px;
    }

    .event-mid-section--bux-icon img {
        max-height: 20px;
        width: auto;
    }

    .event-mid-section--price {
        margin: 20px 0;
    }

    .event-mid-section--bux {
        width: 100% !important;
        margin: 15px 0 !important;
    }
}

@media (max-width: 400px) {
    .event-top-section--left-info {
        flex-direction: column;
        height: unset;
    }

    .event-top-section--left-info-icon,
    .event-top-section--left-info-content {
        width: 100%;
        border-radius: unset !important;
        margin: unset !important;
    }

    .event-top-section--left-info-icon {
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }

    .event-top-section--left-info-content {
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }
}
/* END RAFFLE TAG */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition-delay: 9999s;
    transition-property: background-color, color;
}

input:focus {
    border-bottom: unset !important;
    box-shadow: unset !important;
}

.autocomplete-hack[readonly] {
    color: #7e7e90 !important;
}

#login-security-warning-modal {
    font-family: "Open Sans", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

#login-security-warning-modal .modal-dialog {
    background: #1d2021;
    border: 2px solid #c32d4f;
}

#login-security-warning-modal h2 {
    max-width: 90%;
}

#login-security-warning-modal .img-container {
    background: #181a1b;
    text-align: center;
}

#login-security-warning-modal img {
    width: 500px;
    max-width: 100%;
    margin: 0px auto;
}

#chat,
#site-activity div,
#content-wrapper,
.horizontal-scroll {
    scrollbar-width: none;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}

#need-to-bet {
    margin-top: 15px;
}

#toast-container {
    top: 150px;
}

.emoji:not(html) {
    width: 26px;
    height: 26px;
    margin-left: 2px;
    vertical-align: bottom;
    display: inline-block;
}

.emoji:not(html) > img {
    max-width: 100%;
    max-height: 100%;
}

.emoji.emoji-single.emoji-pepesadj {
    width: 40px;
    height: 40px;
}

.block {
    width: 100%;
}

.disabled,
.disabled:hover {
    border-color: #555 !important;
    color: #555 !important;
    background-color: transparent !important;
}

.text-small {
    font-size: 12px;
}

.text-medium {
    font-size: 13px;
}

.text-large {
    font-size: 14px;
}

.text-larger {
    font-size: 16px;
}

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

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

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

.text-middle {
    vertical-align: middle;
}

.last-10-stuff .row {
    display: flex;
    flex-wrap: wrap;
}

.last-10-stuff .col {
    background: #1c1c22;
    margin-right: 10px;
    border-radius: 8px;
    flex: 1;
}

.last-10-stuff .col:last-child {
    margin-right: -15px;
}

.last-10-stuff .col:last-child {
    margin-right: -15px;
}

.last-10-stuff td {
    border-bottom: 1px solid #26262c;
    padding: 3px;
    font-size: 12px;
}

.last-10-stuff th {
    font-size: 12px;
}

div#maintenance {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: #26262c;
    text-align: center;
}

div#maintenance h1 {
    font-size: 40px;
    color: #c8354e;
    font-weight: 300;
}

div#maintenance h2 {
    font-size: 20px;
    color: #c8354e;
    font-weight: 300;
}

div#maintenance .maintenance-logo {
    margin: 20px 0px;
}

div#maintenance .maintenance-logo img {
    width: 200px;
    height: 200px;
}

.maintenance {
    background: #1c1c22;
    color: #c8354e !important;
}

.maintenance #login-background {
    width: 100%;
    height: 100%;
    /* background-color: rgba(0,0,0,0.4); */
    opacity: 1;
    position: absolute;
    z-index: 10;
    left: 0%;
    top: 100px;
}

.maintenance #login-content {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    padding-left: 100px;
    padding-right: 100px;
    text-align: center;
}

.maintenance .login-title {
    font-size: 60px;
    font-weight: 300;
    color: #c8354e;
    margin-bottom: 60px;
}

.maintenance .login-big-block {
    width: 800px;
    margin: auto;
}

.maintenance .login-block {
    height: 300px;
    width: 390px;
    margin: auto;
    display: inline-block;
    padding-top: 30px;
}

.maintenance .login-subtitle {
    font-size: 30px;
    color: #c8354e;
    font-weight: 300;
}

.maintenance .login-bucks {
    height: 125px;
}

.blurrable {
    /*transition: filter 0.5s;*/
}

.blurred {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.svg {
    width: 26px;
    height: auto;
}

.svg.svg-sm {
    width: 18px;
}

.svg.svg-20 {
    width: 20px;
}

.svg.svg-md {
    width: 23px;
}

.svg.svg-xl {
    width: 40px;
}

.svg.svg-middle {
    vertical-align: middle;
}

.svg.svg-fill-gray {
    fill: #696969 !important;
}

span.i18n_missing {
    background: #ff0;
    color: red;
    font-weight: bold;
    border: 2px solid red !important;
    padding: 2px;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.2;
    }
}

.spinning {
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#shop-notification p {
    border: 1px solid #c32d4f;
    background: #861e36;
    text-align: center;
    padding: 5px 20px;
    /* max-width: 1055px; */
    margin-top: 30px;
    margin-bottom: 0px;
    color: #fff;
    border-radius: 5px;
}

.shop-tab-btn {
    border: 2px solid transparent;
    background: transparent url("/static/images/shops/csgo_shop2.png");
    background-repeat: no-repeat;
    background-size: 130px;
    background-position: center;
    width: 140px;
    height: 50px;
    font: 0/0 a;
    opacity: 0.5;
    border-radius: 8px;
    margin: 0px 10px;
}

.shop-tab-btn:active,
.shop-tab-btn:focus,
.shop-tab-btn:hover {
    opacity: 1;
    background-color: transparent;
}

.shop-tab-btn.pubg {
    background-image: url("/static/images/shops/pubg_shop.png");
    background-size: cover;
    width: 140px;
    background-size: 130px;
}

.shop-tab-btn.dota2 {
    background-image: url("/static/images/shops/dota2_shop.png");
}

.shop-tab-btn.h1z1 {
    background-image: url("/static/images/shops/h1z1_shop2.png");
}

.shop-tab-btn.rust {
    background-image: url("/static/images/shops/rust_shop.png");
}

.shop-tab-btn.btc {
    background-image: url("/static/images/shops/btc_shop.png");
}

#content-inventory .shop-tab-btn.btc {
    background-image: url("/static/images/shops/crypto_shop.png");
}

.shop-tab-btn.active {
    /*background-color:#c8354e;*/
    border-color: #c8354e;
    opacity: 1;
}

.shop-tab-btn.btn-disabled {
    opacity: 0.15;
    cursor: not-allowed;
}

.coming-soon-wrapper {
    display: inline-block;
    position: relative;
}

.coming-soon-wrapper span {
    position: absolute;
    display: inline-block;
    bottom: -7px;
    right: 4px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    color: #999 !important;
}

.bonus-wrapper {
    display: inline-block;
    position: relative;
}

.bonus-wrapper span {
    position: absolute;
    right: 10px;
    bottom: 0px;
    font-size: 10px;
    font-weight: 800;
    display: block;
    background-color: #c32d4f;
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 12px;
    font-family: "Roboto", sans-serif;
}

.bonus-wrapper .shop-tab-btn {
    background-position-y: 1px;
}

.gameSwitcher.small .shop-tab-btn {
    height: 40px;
    width: 110px;
    background-size: 100px;
}

.gameSwitcher.small {
    width: 80%;
}

.gameSwitcher.small button,
.gameSwitcher.small .bonus-wrapper {
    margin-top: 10px;
}

.gameSwitcher.small .bonus-wrapper button {
    margin-top: 0px;
}

#content-rewards-verfication .modal-dialog {
    background: #121821;
}

#content-rewards-verfication .cform {
}

#content-rewards-verfication .cform input {
    background: #26303e;
    border: 1px solid #364251 !important;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #fff;
}

#content-rewards-verfication .cform a {
    color: #45b5da;
}

#content-rewards-verfication .cform p {
    margin-top: 0px;
}

.bot-profile-badge {
    display: inline-block;
    background: #111;
    padding: 10px;
    border-radius: 48px;
    position: relative;
}

.bot-profile-badge img {
    border-radius: 100%;
    border: 1px solid #c32d4f;
    width: 48px;
    position: absolute;
}

.bot-profile-badge span {
    line-height: 48px;
    margin-left: 58px;
    font-size: 20px;
}

li.skin-preview {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 130px;
    overflow: hidden;
    margin: 5px;
    padding: 10px;
    background: #17171b;
    border-radius: 5px;
}

li.skin-preview .skin-image {
    max-width: 100px;
    position: absolute;
    left: 10px;
    top: -5px;
}

li.skin-preview .skin-name {
    position: absolute;
    bottom: 0px;
    font-size: 11px;
}

li.skin-preview .skin-value {
    display: none;
}

/* Tooltips */

.tt-container {
    position: relative;
}

/* Tooltip text */
.tt-container .tt {
    visibility: hidden;
    min-width: 150px;
    max-width: 300px;
    background-color: #222227;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    box-shadow: 0px 0px 1px #7e7e8a;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 10;
}

.tt-container:hover .tt {
    visibility: visible;
}

.tt-container .tt-right {
    top: -5px;
    left: 150%;
}

.tt-container .tt-right::after {
    content: " ";
    position: absolute;
    top: 15px;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #222227 transparent transparent;
}

#site-notifications {
    position: absolute;
    width: calc(100% + 5px);
    top: -7px;
    left: 1px;
    height: 35px;
    z-index: 100;
}

#site-notifications .notification {
    /* background-color: rgba(200,53,78,0.3); */
    background-color: #333;
    width: 100%;
    min-height: 40px;
    position: absolute;
    color: #fff;
    padding: 10px;
    font-size: 13px;
    text-align: center;
}

#site-notifications .notification a {
    color: rgb(247, 74, 104);
    font-weight: bold;
    /* text-decoration: underline; */
    display: inline-block;
}

#site-notifications .notification a:hover {
    color: #fff;
    text-decoration: underline;
}

#site-notifications .dismiss {
    position: absolute;
    z-index: 1010;
    color: #fff;
    top: 8px;
    right: 10px;
    opacity: 0.3;
}

#site-notifications .material-icons {
    font-size: 19px;
    vertical-align: middle;
}

#site-notifications .red {
    color: #c32d4f;
    background: transparent !important;
}

#site-notifications .blue {
    color: #45b5da;
    background: transparent !important;
}

#site-notifications .green {
    color: #37af59;
    background: transparent !important;
}

#site-notifications .yellow {
    color: #ffc76f;
    background: transparent !important;
}

#site-notifications .dismiss:hover {
    opacity: 1;
}

@media (max-width: 1240px) {
    .hypetrain-container {
        top: 301px !important;
    }

    #fw-jackpot-help-modal,
    #rj-help-modal {
        top: 180px;
        left: 100px;
        max-width: calc(100% - 120px);
        width: calc(100% - 30px);
        margin-left: 0px;
    }
}

div#crypto_qrcode img {
    width: 100%;
}

.crypto-form pre.crypto_deposit_address,
.crypto-form pre.crypto_deposit_memo {
    background: hsl(240, 12%, 8%);
    font-size: 18px;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
}

.ethereum-deposit-info,
.bitcoin-deposit-info {
    margin: 0 auto;
    text-align: center;
}

.ethereum-deposit-info #crypto_qrcode img,
.bitcoin-deposit-info #crypto_qrcode img {
    max-width: 225px;
    border-radius: 4px;
}

#cryptoChooseEthereum .pending {
    text-align: center;
    margin-top: 25px;
}

#cryptoChooseEthereum .pending .zero-transactions {
    display: none;
}

#cryptoChooseEthereum .pending.no-transactions .zero-transactions {
    display: block;
}
#cryptoChooseEthereum .pending.no-transactions .pending-transactions-container {
    display: none;
}

#cryptoChooseEthereum .pending-ethereum-transactions a {
    color: #c8354e;
}

.crypto-form {
    font-size: 15px;
}

.crypto-form h4 {
    font-size: 22px;
    margin: 0;
}

.crypto-form .row {
    margin-bottom: 3rem;
}

.crypto-form .row:last-child {
    margin-bottom: 0;
}

.crypto-form p.big {
    color: #ffc870cc;
    font-size: 22px;
    margin-bottom: 1rem;
}

.crypto-form p.big strong {
    font-weight: 800;
    color: #ffc870;
}

.crypto-form p.warning {
    font-weight: 500;
    color: #c8354e;
}

.crypto-form p.warning-yellow {
    font-weight: 500;
    color: #ffc870;
}

.crypto-form .content-btn {
    background-image: linear-gradient(to bottom, #222228 50%, #c8354e 50%);
    margin: 0;
}

.crypto-form .form {
    background: hsl(240, 7%, 14.5%); /* #222228 */
    border-radius: 4px;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

.crypto-form .form > div {
    padding: 3.5rem;
}

.crypto-form .form > div:last-child {
    background: hsl(240, 7%, 13.5%);
}

.crypto-form .crypto_withdraw_success {
    background: linear-gradient(to right, hsl(240, 10%, 9.5%), hsl(240, 10%, 11%));
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 2rem;
    height: unset !important;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    animation: crypto-withdraw-success-fade-up 450ms;
    animation-fill-mode: forwards;
}

@keyframes crypto-withdraw-success-fade-up {
    0% {
        height: 0;
        margin-bottom: 0;
    }

    50% {
        height: 4.5rem;
    }

    100% {
        height: 4.5rem;
        margin-bottom: 1rem;
    }
}

.crypto-form .crypto_withdraw_success > * {
    margin: 0;
    padding: 0;
    font-weight: 500 !important;
    font-size: 16px;
    display: block;
}

.crypto-form .crypto_withdraw_success strong {
    color: #37af59;
}

.crypto-form .crypto_withdraw_success a {
    color: #c8354e;
}

.crypto-form .custom-input-field label {
    font-size: inherit;
}

.crypto-form .custom-input-field input {
    margin-top: 4px;
    border-radius: 4px;
}

.crypto-form .custom-input-field input::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

.crypto-form .crypto_withdraw_usd_rate {
    font-weight: 500;
}

.crypto-form .crypto_transaction_values,
.crypto-form .crypto_transaction_values .row {
    height: 100%;
}

.crypto-form .crypto_transaction_values .values {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

.crypto-form .crypto_transaction_values .values > * {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

/* Crypto Info: Label */
.crypto-form .crypto_transaction_values .values > * > span:first-child {
    color: #808080;
}

/* Crypto Info: Value */
.crypto-form .crypto_transaction_values .values > * > span:last-child {
    color: #888;
    font-weight: 500;
}

.crypto-form .crypto_transaction_values .transaction-fee {
    margin-top: auto;
    margin-bottom: 3rem;
    margin-left: -4.25rem;
    margin-right: -5rem;
    padding: 1.5rem 4.25rem;
    width: calc(100% + 4.25rem * 2);
    background: #562231;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #8c2740;
}

.crypto-form .crypto_transaction_values .transaction-fee--eth {
    background: #033444;
    border: 1px solid #0c475a;
}

.crypto-form .crypto_transaction_values .transaction-fee.transaction-fee--available {
    background: #033444;
    border: 1px solid #0c475a;
}

.crypto-form .crypto_transaction_values .transaction-fee > span {
    color: #ccc !important;
}

.crypto-form .crypto_transaction_values .transaction-fee > div {
    color: #909090;
    font-size: 15px;
    margin-right: 33%; /* limit width while still making sure it wraps around */
    margin-top: 0.75rem;
}

.crypto_withdraw_history {
    background: none !important;
    text-transform: uppercase;
    padding: 0.5em 0.75em;
    margin: -0.5em -0.75em !important;
    margin-right: auto;
    border-color: transparent;
    transition: all 100ms;
    border: 2px solid transparent;
    border-radius: 4px;
    font-weight: bold;
    width: unset !important;
}

.crypto_withdraw_history > span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #666 !important;
    transition: all 100ms;
}

.crypto_withdraw_history > span > i.material-icons {
    font-size: 22px !important;
    margin-bottom: 2.5px;
    margin-right: 0.25em;
    vertical-align: middle;
}

.crypto_withdraw_history > span:hover {
    color: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.075) !important;
}

/* Crypto Deposit */
#deposit-crypto-wrapper.crypto-form .form {
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

#deposit-crypto-wrapper.crypto-form .deposit-info {
    background: hsl(240, 7%, 12.75%);
    padding: 3.5rem;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

#deposit-crypto-wrapper.crypto-form h4 {
    margin-bottom: 2rem;
}

#deposit-crypto-wrapper.crypto-form .deposit-info > .col {
    /* height: 225px; */
}

#deposit-crypto-wrapper.crypto-form .deposit-info > .col:last-of-type {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-left: 2.5rem;
}

#deposit-crypto-wrapper.crypto-form .deposit-info .warning {
    margin: 0;
    margin-top: auto;
    font-weight: normal;
    color: hsl(350, 62%, 47%);
    margin-bottom: -4px; /* for some reason the inner element is 4px shorter than the .warning */
}

#deposit-crypto-wrapper.crypto-form .deposit-info p {
    margin: 0px;
}

#deposit-crypto-wrapper.crypto-form .deposit-info .crypto_deposit_address,
#deposit-crypto-wrapper.crypto-form .deposit-info .crypto_deposit_memo {
    margin: 1rem 0;
    /*     width: 100%; */
    min-width: 240px;
    padding: 1rem 1.5rem;
    text-align: left;
    font-family: "Roboto Mono", monospace;
}

#deposit-crypto-wrapper.crypto-form .deposit-info .crypto_deposit_memo_info p {
    margin: 0px 0px 20px !important;
}

#deposit-crypto-wrapper.crypto-form .deposit-info .crypto_deposit_memo_info ol {
    text-align: center;
    list-style-position: inside;
}

#deposit-crypto-wrapper.crypto-form .deposit-info .crypto_deposit_address > div {
    color: #888;
}

.custom-input-field .label-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.custom-input-field .label-row a {
    color: #808080;
    font-weight: 500;
    user-select: none;
    transition: color 100ms;
}

.custom-input-field .label-row a:hover {
    color: #c8354e;
}

.custom-input-field input {
    background: #1c1c22;
    border: none;
    padding: 10px;
    width: calc(100% - 20px);
    height: 20px;
    border-radius: 8px;
    margin: 0px;
    font-size: 15px;
    border: 1px solid #1c1c22 !important;
    box-shadow: none !important;
}

.custom-input-field input[readonly] {
    background: #212127;
    color: #808094;
    border: 1px solid #2d2d33;
    box-shadow: none !important;
}

.custom-input-field label {
    font-size: 12px;
}

.custom-input-field input:focus {
    box-shadow: none !important;
}

@media (max-width: 960px) {
    .last-10-stuff {
        display: block;
    }

    .last-10-stuff .col {
        width: 100%;
    }
}

@media (max-width: 800px) {
    #site-notifications .notification {
        padding-right: 35px;
    }

    #site-notifications {
        position: relative;
        width: calc(100% + 5px);
        height: 80px;
    }

    .last-10-stuff {
        display: block;
    }

    .last-10-stuff .col {
        width: 100%;
        margin-bottom: 10px;
    }

    .gameSwitcher {
        margin-top: 10px;
    }

    .gameSwitcher button {
        display: block;
        width: calc(100% - 20px) !important;
        border-color: #44444c;
        margin-top: 5px;
    }

    .gameSwitcher .bonus-wrapper {
        width: 100% !important;
    }
}

@media (max-width: 500px) {
}

@media (max-width: 360px) {
}

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinner-spin 1s ease-in-out infinite;
    -webkit-animation: spinner-spin 1s ease-in-out infinite;
}

.spinner.red {
    border: 3px solid #c32d4f33;
    border-top-color: #c8354e;
}

.spinner.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}

.spinner.left {
    float: none !important;
    margin-left: 0px;
    margin-right: 10px;
}

.spinner.right {
    float: none !important;
    margin-left: 10px;
    margin-right: 0px;
}

@keyframes spinner-spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner-spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.cf:before,
.cf:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.cf:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    zoom: 1;
}

/* RETARDED CRASH */

.crash-section {
    text-align: center;
    display: none;
}

.crash-section.active {
    display: block;
}

.crash-section img.splash {
    display: block;
    margin: 0px auto;
    width: 700px;
    max-width: 95%;
}

#content-crash {
    display: none;
}

.crashbg {
    background-image: url("/static/images/fun/crashbg.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.bitskins-withdraw-info {
    margin-top: 20px;
    font-size: 13px;
}

.bitskins-withdraw-more {
    margin-top: 20px;
    display: none;
    font-size: 13px;
}

.bitskins-withdraw-more img {
    width: 100%;
}

.bitskins-withdraw-info a {
    color: #c32d4f;
    font-size: 13px;
}

.bitskins-withdraw-info i {
    font-size: 14px;
    vertical-align: middle;
}

/* #content-wrapper section {
    margin-top: 40px;
} */

#content-wrapper section#content-game {
    margin-top: 0px;
}

.balance_sync {
    color: #4b4b5d;
    margin: 0px;
    padding: 0px;
    display: inline-block !important;
    vertical-align: middle;
    transition: color 100ms;
}

.balance_sync i {
    vertical-align: middle;
}

.balance_sync:hover {
    color: #c32d4f;
}

.balance_sync.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

.market-balance .balance_sync i {
    font-size: 18px;
}

.crash_balance_container .balance_sync i {
    font-size: 24px;
}

#balance-wrapper .balance_sync i {
    font-size: 20px;
    margin-bottom: 5px;
}

#inventory-checkout-amount-wrapper .balance_sync i,
#shop-checkout-amount-wrapper .balance_sync i {
    font-size: 22px;
    margin-bottom: 5px;
}

.spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* FAQ */
#content-faq {
    display: none;
}

#content-faq .question {
    cursor: pointer;
}

#content-faq .question.active {
    font-weight: 600;
}

#content-faq .answer {
    display: none;
}

#content-faq .ch,
#content-faq .ch-link {
    font-family: "Material Icons";
    font-size: 28px;
    vertical-align: middle;
    font-weight: 400;
}

#content-faq .link {
    font-size: 20px;
    color: #c8354e;
    font-weight: 300;
}

#content-faq .ch-link:before {
    content: "link";
}

#content-faq .ch:before {
    content: "keyboard_arrow_down";
}

#content-faq .active .ch:before {
    content: "keyboard_arrow_up";
}

#content-faq h3 {
    font-size: 20px;
    padding: 0px;
    margin: 10px 0px 0px;
    font-weight: 400;
}

#content-faq h5 {
    font-size: 18px;
    margin-top: 20px;
}

/* TOS */
#content-terms-of-service,
#content-privacy-policy,
#content-provably-fair,
#content-responsible-gaming {
    display: none;
}

.terms-of-service .card-content {
    padding: 1.5rem 2.25rem;
    font-size: 15px;
    line-height: 1.65;
    color: #ccc;
}

.terms-of-service .card-title {
    margin-top: 0;
}

.terms-of-service ul li {
    cursor: unset;
}

#content-privacy-policy ul li {
    cursor: unset;
}

#content-privacy-policy h6 {
    font-size: 14px;
}

.terms-of-service h6 {
    font-size: inherit !important;
    color: inherit !important;
}

.terms-of-service .tos-tabs {
    background: none;
    max-width: 50%;
    margin: 2.5rem 0;
    margin-bottom: 1.5rem;
}

.terms-of-service .tos-tabs button.tab {
    border: none;
}

.terms-of-service .tos-tabs .tab {
    color: #999;
    background: hsl(240, 9%, 8%);
    border-radius: 4px;
    display: inline-block;
    padding: 1rem 2rem;
    cursor: pointer;
    user-select: none;
    transition: all 150ms;
    margin-left: 0;
}

.terms-of-service .tos-tabs .tab:not(:last-child) {
    margin-right: 1rem;
}

.terms-of-service .tos-tabs .tab.active {
    color: #c8354e !important;
    background: hsl(240, 9%, 6%);
}

/* Leaderboard */

#content-leaderboards {
    display: none;
}

#content-leaderboards h1 {
    margin-bottom: 0px;
}

#content-leaderboards .content-title {
    margin-bottom: 0px;
}

.lb-container {
    display: flex;
}

.lb-container-left {
    flex: 1;
    padding-right: 50px;
}

.lb-container-right,
.lb-top-filters {
    flex-basis: 400px;
    text-align: right;
}

.lb-container-right .level-badge {
    width: unset !important;
}

.lb-container h3 {
    font-size: 25px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    color: #c8354e;
    border-bottom: 1px solid #c8354e;
    margin-bottom: 20px;
}

.lb-top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 50px;
}

.lb-top-title {
    flex: 1;
}

.lb-top-title h1 {
    padding: 0 0 1.68rem;
}

.lb-container-left-top {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 80px;
}

.lb-container-left-top a {
    color: unset !important;
}

.lb-container-left-top > * {
    display: none;
    background: #18181d;
    flex-basis: 20%;
    text-align: center;
    position: relative;
    box-shadow: 10px 10px 37px -15px rgba(0, 0, 0, 0.75);
    padding-bottom: 40px;
}

.lb-container-left-top-1 {
    order: 2;
    margin-bottom: 5px;
    flex-basis: 30%;
    border-top: 2px solid #f6c26d;
    color: #f6c26d;
    fill: #f6c26d;
    font-size: 16px;
}

.lb-container-left-top-medal {
    position: absolute;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
}

.lb-container-left-top-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    overflow: hidden;
    padding: 2px;
    margin-top: 20px;
    margin-bottom: 5px;
}

.lb-container-left-top-1 .lb-container-left-top-medal {
    bottom: -70px;
    width: 60px;
}

.lb-container-left-top-username {
    font-weight: 600;
    margin-bottom: 20px;
}

.lb-container-left-top-bet {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8f8888 !important;
    margin-bottom: 20px;
}

.lb-container-left-top-bet-icon {
    height: 18px;
    margin-right: 5px;
}

.lb-container-left-top-bet-icon img {
    height: 100%;
    width: auto;
}

.lb-container-left-top-reward {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lb-container-left-top-reward-icon {
    height: 18px;
    margin-right: 5px;
}

.lb-container-left-top-reward-icon svg {
    height: 100%;
    width: auto;
}

.lb-container-left-top-1 .lb-container-left-top-username {
    font-size: 20px;
}

.lb-container-left-top-1 .lb-container-left-top-reward {
    margin-bottom: 40px;
}

.lb-container-left-top-medal img {
    width: 100%;
    height: auto;
}

.lb-container-left-top-2 {
    order: 1;
    border-top: 2px solid #8f8888;
    fill: #696969;
    color: #8f8888;
}

.lb-container-left-top-3 {
    order: 3;
    border-top: 2px solid #c86730;
    color: #c86730;
    fill: #c86730;
}

.lb-filters {
    /*     background: #1c1c22; */
    padding: 5px 0px;
}

.lb-filter {
    color: #c32d4f;
    background: #18181d;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    height: 30px;
    vertical-align: middle;
}

.lb-filter.active,
.lb-filter:hover {
    background: #c32d4f;
    color: #fff;
}

.lb-pagination {
}

.lb-pagination a {
    color: #c32d4f;
    background: #18181d;
    display: inline-block;
    border-radius: 4px;
    font-size: 20px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

.lb-pagination a:hover {
    background: #c32d4f;
    color: #fff;
}

.lb-pagination span {
    display: inline-block;
    border-radius: 4px;
    line-height: 30px;
    height: 30px;
    padding: 0px 10px;
    text-align: center;
    vertical-align: middle;
}

.lb-bets-table {
    background: #18181d;
    border-top: 4px solid #c8354e;
}

.lb-bets-table .thead {
    background: #212127;
}

.lb-bets-table .th {
    padding: 0 10px;
}

.lb-bets-table .td.rewards {
    padding: 3px 10px 3px 3px !important;
}

.lb-bets-table .td.place {
    padding: 3px 3px 3px 10px !important;
}

.lb-bets-table .thead .th {
    height: 40px;
    line-height: 40px;
    color: #666 !important;
}

.lb-bets-table .tr .td {
    border-bottom: 5px solid #26262c;
    padding: 3px;
}

.lb-bets-table .tr .value,
.lb-bets-table .tr .rewards {
    text-align: right;
}

.lb-bets-table .avatar {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    border-radius: 16px;
    display: inline-flex;
}

.lb-bets-table .level-badge {
    margin: 0px 5px 2px 5px;
    font-size: 12px;
    padding: 2px 0;
}

.lb-bets-table .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.lb-bets-table .tr,
.lb-bets-table .tr a {
    color: #999;
    /* font-size: 13px; */
}

.lb-bets-table .tr {
    height: 35px;
    line-height: 35px;
    font-size: 16px !important;
}

.lb-bets-table a:hover {
    color: #fff !important;
}

.lb-bets-table .tr.lb-bigger,
.lb-bets-table .tr.lb-bigger a {
    font-weight: 800;
    font-size: 16px;
}

.lb-bets-table .tr.lb-bigger .avatar {
    width: 24px;
    height: 24px;
}

.lb-bets-table .tr.lb-gold,
.lb-bets-table .tr.lb-gold a {
    color: #ffc76f;
}

.lb-bets-table .tr.lb-silver,
.lb-bets-table .tr.lb-silver a {
    color: #c1c1d6;
}

.lb-bets-table .tr.lb-bronze,
.lb-bets-table .tr.lb-bronze a {
    color: #ea754a;
}

.lb-bets-table .tr.lb-other,
.lb-bets-table .tr.lb-other a {
    color: #c32d4f;
    font-weight: 600;
}

.lb-bets-table .reward {
}

.lb-bets-table .reward i {
    font-size: 14px;
}

.lb-bets-table .reward {
    display: inline-block;
    position: relative;
    width: 100%;
}

.lb-bets-table .tr .rewards span {
    padding-right: 25px;
}

.lb-bets-table .reward .reward-icon {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.lb-bets-table .reward.projected {
    color: #55555f !important;
}

.tbody.lb-bets-container svg {
    fill: #999;
}

.tbody.lb-bets-container .lb-other svg {
    fill: #ce3351;
}

.lb-mvp {
    background: #18181d;
    border-radius: 10px;
    padding: 10px 10px 20px 10px;
    text-align: center;
}

.lb-mvp h4 {
    font-size: 20px;
    color: #c8354e;
    text-transform: uppercase;
}

.lb-mvp .avatar {
    width: 72px;
    height: 72px;
    border-radius: 100%;
    overflow: hidden;
    padding: 2px;
    margin: 20px auto 5px auto;
}

.lb-mvp .level-badge {
    font-size: 14px;
}

.lb-mvp .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.lb-mvp .user,
.lb-mvp .user a {
    font-size: 18px;
    color: #c32d4f;
}

/* chat same-user-messages */

.message-same-user {
    padding-top: 5px;
    padding-bottom: 0px;
}

.message-same-user .message-avatar-wrapper {
    width: 30px;
    height: 1px;
}

.message-same-user .message-avatar-wrapper .message-avatar {
    visibility: hidden;
    height: 1px;
}

.message-same-user .author-link {
    display: none;
}

.message-same-user .author-url {
    display: none;
}

.message-same-user .message-content-wrapper {
    padding: 0px;
    margin: 0px;
}

.message-same-user br {
    display: none;
}

.message-content i {
    font-size: 18px;
    vertical-align: middle;
}

.message-content .red {
    background: transparent !important;
    color: #c32d4f;
}

#modal-user-report .modal-dialog {
    padding: 10px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

#modal-user-report h2 {
    margin: 10px 0px 0px;
    padding: 0px;
    font-size: 20px;
    color: #c32d4f;
    font-weight: 600;
}

#modal-user-report p {
    margin: 0px;
}

#modal-user-report p.message {
    padding: 5px;
    background: #1c1c22;
    color: #ccc;
    margin: 10px 0px;
}

#modal-user-report .btn-toolbar {
    display: block;
    width: 100%;
    margin-top: 5px;
}

#modal-raffle-bux h5 {
    color: #c32d4f;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-raffle-bux .modal-raffle-bux-content {
    font-size: 16px;
    margin-top: 24px;
    text-align: center;
}

#modal-raffle-bux .modal-raffle-bux-value,
#modal-raffle-bux .modal-raffle-bux-count {
    color: #c32d4f;
    font-weight: 800;
}

ul#user-reports {
    background: #131317;
    max-height: 400px;
    overflow: scroll;
    padding: 10px;
}

ul#user-reports .user-report-container {
    border: 1px solid #26262c;
    padding: 10px;
    background: #19191d;
}

ul#user-reports .user-report-container .report {
    border-bottom: 1px solid #26262c;
    padding: 0px 0px 10px;
    display: none;
}

ul#user-reports .user-report-container.active .report {
    display: block;
}

ul#user-reports .user-report-container .report .message {
    margin: 0px;
    padding: 0px;
    font-size: 11px;
    color: #797998;
    padding: 10px;
}
ul#user-reports .user-report-container .report .mauthor {
    display: block;
    margin-top: 5px;
    line-height: 5px;
    color: #c32d4f;
}

ul#user-reports .user-report-container .report .msg {
    color: #ccc;
    display: block;
    margin: 0px;
}

ul#user-reports .user-report-container .report .target {
    color: #fc0;
}

ul#user-inspects {
    max-height: 500px;
    overflow: scroll;
    background: #18181d;
    padding: 10px;
}

ul#user-inspects li {
    border-bottom: 1px solid #333;
}

ul#user-inspects li strong {
    display: block;
    color: #c32d4f;
}

ul#user-inspects li span {
    display: block;
    color: #ccc;
}

.message.hover {
    /* background: #18181d; */
}

.message.hover .user-popup-toggle {
    /* background: #18181d; */
}

.message-same-user.hover .user-popup-toggle {
    margin-top: -5px;
    height: auto;
}

.message-same-user.hover .user-actions {
    margin-top: 3px;
}

#ceg-seal-container {
    display: block;
    width: 80px;
    height: 50px;
    text-align: center;
    position: absolute;
    right: -80px;
    bottom: 90px;
    background-color: #1c1c22;
    border-left: 1px solid #26262c;
    color: #a0a0a0;
    z-index: 300;
    cursor: pointer;
}

#ceg-seal-container img {
    width: 38px !important;
    height: auto !important;
}

#login-content {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

#login-content .col {
    text-align: center !important;
}

#login-content .login-subtitle {
    display: block;
    text-align: center;
}

#login-content .login-subsubtitle {
    display: block;
    text-align: center;
    font-size: 20px;
}

#login-content .login-subtitle-image {
    height: 120px;
    display: block;
    margin: 20px auto;
}

#login-content .login-screen-footer {
    color: #9e9e9e;
}

#login-background label {
    font-size: 14px;
}

#login-background [type="checkbox"] + label:before,
#login-background [type="checkbox"]:not(.filled-in) + label:after {
    width: 24px;
    height: 24px;
    border: 2px solid #c8354e;
}

#login-background [type="checkbox"]:checked + label:before {
    width: 16px;
    height: 26px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #37af59;
    border-bottom: 2px solid #37af59;
}

#login-terms-modal .card {
    background-color: #26262c;
    font-size: 14px;
    box-shadow: none;
    border: none;
}

#login-terms-modal .card .card-action a,
#login-terms-modal .card .card-title {
    color: #c8354e !important;
}

#login-terms-modal ul li {
    cursor: unset;
}

.all-bets-content-user .emoji,
.roulette-all-bets-content-user .emoji {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.all-bets .all-bets-content:first-child .emoji,
.roulette-all-bets .roulette-all-bets-content:first-child .emoji {
    width: 24px;
    height: 24px;
}

@media (max-width: 1400px) {
    .lb-container-left-top > * {
        flex-basis: 25%;
    }

    .lb-container-left-top-1 {
        flex-basis: 35%;
    }
}

@media (max-width: 1200px) {
    .lb-top-title {
        text-align: center;
    }

    .lb-top-container {
        flex-direction: column;
    }

    .lb-container-right,
    .lb-top-filters {
        flex-basis: 0;
        margin-top: 20px;
    }
}

@media (max-width: 980px) {
    .lb-container {
        flex-direction: column;
    }

    .lb-container-right {
        flex-basis: 0;
    }

    .lb-container-left {
        padding-right: unset;
    }

    .lb-bets-table .level-badge {
        width: unset !important;
    }
}

@media (max-width: 650px) {
    .lb-container-left-top {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .lb-container-left-top > * {
        flex-basis: unset;
        width: 100%;
    }

    .lb-container-left-top-1 {
        order: 0;
        margin-bottom: 40px;
    }

    .lb-container-left-top-1 .lb-container-left-top-medal {
        width: 40px;
        bottom: 0;
    }

    .lb-container-left-top-2 .lb-container-left-top-medal,
    .lb-container-left-top-3 .lb-container-left-top-medal {
        width: 30px;
        bottom: -15px;
    }

    .lb-container-left-top-2 {
        margin-bottom: 30px;
    }

    .lb-container-left-top-3 {
    }

    .lb-bets-table {
        border-top: unset;
    }

    .lb-bets-table .thead {
        display: none;
    }

    .lb-bets-table {
        background: unset !important;
    }

    .lb-bets-table .tr {
        border-top: 2px solid #c8354e;
        height: unset;
        line-height: unset;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #18181d;
        margin-bottom: 30px;
        padding: 20px 10px;
        font-weight: 400 !important;
    }

    .lb-bets-table .td {
        display: block;
        border-bottom: unset !important;
        text-align: center;
    }

    .lb-bets-table .td.place {
        order: 4;
        color: rgba(255, 255, 255, 0.9);
        background: #c8354e;
        border-radius: 50%;
        padding: 0 !important;
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lb-bets-table .td.user {
        order: 1;
        margin-bottom: 20px;
    }

    .lb-bets-table .td.user .username {
        height: unset !important;
        display: inline-flex;
    }

    .lb-bets-table .td.value {
        order: 2;
        margin-bottom: 20px;
    }

    .lb-bets-table .td.rewards {
        order: 3;
        margin-bottom: 20px;
    }

    .crypto-form .crypto_transaction_values .values > * {
        flex-flow: column wrap;
        align-items: center;
    }
}

@media (max-width: 650px) {
    .crypto-form .form .col:first-child {
        order: 2;
    }

    .crypto-form .form .col:last-child {
        order: 1;
    }
}