.ripple {
    position: relative;
    overflow: hidden;
    --color-ripple: rgba(255, 255, 255, 0.15);
}

.Ripple {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

.Ripple > span {
    position: absolute;
    background: var(--color-ripple);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
    animation: ripple .75s ease-out;
}

@keyframes ripple {
    to {
        -webkit-transform: scale(4);
        transform: scale(4);
        opacity: 0;
    }
}

@media screen and (max-width: 800px) {
    .Ripple > span {
        animation: ripple .5s ease-out;
    }
}
.Button {
    --color-scheme-rgb: var(--rgb-accent-color);
    --color-scheme: rgba(var(--color-scheme-rgb), 1);

    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 0;
    position: relative;
    color: var(--color-scheme);
    border: 2px solid var(--color-scheme);
    padding: 0.35rem 2.5rem;
    cursor: pointer;
    background-color: transparent;
    transition: all .15s;
    font-weight: 500;
    font-size: 1.1rem;
    float: left;
    max-width: 100%;
}

.Button.primary:not(.disabled) {
    background-color: var(--color-scheme);
    color: #fff;
}

.Button.negative {
    --color-scheme-rgb: 229, 57, 53;
}

.Button:not(.disabled):active {
    transform: scale(.99); 
}

.Button:not(.disabled):hover, 
.Button:not(.disabled):active {
    background-color: var(--color-scheme);
    color: #fff;
}

.Button.secondary {
    --ripple-color: rgba(var(--color-scheme-rgb), .1);
    color: var(--color-scheme);
    border: none;
    background: none;
}

.Button.secondary:not(.disabled):hover, 
.Button.secondary:not(.disabled):active {
    color: var(--color-scheme) !important;
    background: rgba(var(--color-scheme-rgb), .1) !important;
}

.Button.disabled {
    cursor: default;
    opacity: .65;
}

@media screen and (max-width: 800px) {
    .Button {
        font-size: 1rem;
        padding: 0.35rem 1rem;
        background-color: var(--color-scheme);
        color: #fff;
    }

    .Button:not(.disabled):active {
        transform: scale(.95); 
    }
}
.Modal {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 25;
    overflow: hidden auto;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .25s;
    backdrop-filter: blur(4px);
}

.Modal.removed {
    opacity: 0;
    pointer-events: none;
}

.Modal.removed .align {
    animation: modalFadeOut .25s;
}

.Modal .align {
    max-width: 95% !important;
    width: 25rem;
    padding: 0 1.5rem 1rem;
    background-color: var(--color-background-modal);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    min-height: 5rem;
    box-shadow: 0 .25rem .5rem .125rem rgba(0, 0, 0, 0.45);
    animation: modalFadeIn .25s;
}

.Modal .align .title {
    width: 100%;
    padding: 1rem 0;
    float: left;
    font-weight: 550;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

.Modal .align .title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Modal .align .subtitle {
    width: 100%;
    float: left;
    font-size: 1rem;
}

.Modal .align .actions {
    width: 100%;
    float: left;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.Modal .align .actions .Button {
    max-width: 1005%;
    padding: .5rem 1rem;
    line-height: 1.2;
    font-size: 1rem;
    font-weight: 550;
    text-transform: uppercase;
}

.Modal .align .actions .Button:not(:first-child) {
    margin-top: .25rem;
}

@keyframes modalFadeOut {
    0% {
        margin-top: 0rem;
        opacity: 1;
    } 100% {
        margin-top: 2rem;
        opacity: 0;
    }
}

@keyframes modalFadeIn {
    0% {
        margin-top: -2rem;
        opacity: 0;
    } 100% {
        margin-top: 0rem;
        opacity: 1;
    }
}

/* --- --- */
.Modal.item-info-modal .subtitle {
    display: flex;
    justify-content: center;
}

.Modal.item-info-modal .Item {
    aspect-ratio: 1.3/1;
    width: unset;
    height: 10rem;
    margin: 0;
}

.Modal.item-info-modal .Item .info .price,
.Modal.item-info-modal .Item .info .quality {
    font-size: 1rem !important;
    padding: 5px 6px;
}
.Modal.item-info-modal .Item .name .weapon-name {
    font-size: .9rem !important;
}
.Modal.item-info-modal .Item .name {
    font-size: 1rem !important;
    line-height: .95rem !important;
}
.Dropdown {
    position: relative;
    float: left;
    border: 1px solid var(--color-secondary);
    background-color: var(--color-background-secondary);
    border-radius: 0rem;
}

.Dropdown .preview {
    display: flex;
    float: left;
    width: 100%;
    height: 100%;
    padding: .3rem .3rem .3rem .75rem;
    cursor: pointer;
}

.Dropdown .preview .current-text {
    flex: 2;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    animation: 200ms opacity-fade;
    text-overflow: ellipsis;
}
.Dropdown .preview .indicator {
    width: 1.5rem;
    display: flex;
    float: left;
    justify-content: center;
    align-items: center;
}
.Dropdown .preview .indicator i {
    transition: all .2s;
    font-size: 1.25rem;
}

.Dropdown .dropdown-list {
    width: 100%;
    display: none;
    position: absolute;
    z-index: 15;
    top: calc(100% + .15rem);
    border-radius: 0 0 .75rem .75rem;
    border: 1px solid var(--color-secondary);
    background-color: var(--color-background-modal);
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 0 15px 0 var(--color-shadow);
    max-height: 30rem;
    overflow: auto;
}

.Dropdown .dropdown-list .list-item {
    width: 100%;
    float: left;
    padding: .35rem .75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Dropdown .dropdown-list .list-item.active {
    background-color: rgba(var(--rgb-accent-color), .25);
}
.Dropdown .dropdown-list .list-item:not(.active):hover {
    background-color: var(--color-hover);
}

.Dropdown.open .dropdown-list {
    display: block;
    animation: list-spawn .15s;
    transform-origin: top;
}
.Dropdown.open .preview .indicator i {
    transform: rotate(-180deg);
}

@keyframes list-spawn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    } 100% {
        transform: scale(1);
        opacity: 1;
    }
}
.Menu {
    width: var(--actionbar-width);
    height: 100%;
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    transition: all 250ms cubic-bezier(0.33, 1, 0.68, 1);
    overflow: hidden;
    box-shadow: 2px 0 5px 0 var(--color-shadow);
}

.Menu.open {
    width: 100%;
    background-color: rgba(0,0,0, .5);
}

.Menu .menu-bar {
    width: calc(3 * var(--actionbar-width));
    height: 100%;
    background-color: var(--color-active);
    transition: all .25s;
    display: flex;
    flex-direction: column;
}

.Menu .menu-tabs {
    width: 100%;
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.Menu .secondary-tabs {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0;
    flex: 0;
}

.Menu .menu-snippet,
.Tab {
    width: 100%;
    height: var(--actionbar-width);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.Tab {
    transition: all .25s;
    float: left;
    cursor: pointer;
}

.Menu .menu-snippet .uil {
    font-size: 2.25rem;
}

.Tab .uil {
    width: var(--actionbar-width);
    height: var(--actionbar-width);
    display: inline-flex;
    float: left;
    font-size: 2.25rem;
    padding-bottom: .25rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.Tab span {
    display: inline-flex;
    float: left;
    width: calc(2 * var(--actionbar-width));
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: .65rem;
    font-size: 1.35rem;
}

.Tab.active {
    color: var(--color-accent);
    background-color: rgba(var(--rgb-accent-color), .10);
    cursor: default;
    pointer-events: none;
} 

.Tab:not(.active):hover {
    background-color: var(--color-hover);
}

.Tab:active {
    background-color: var(--color-active);
}

.settings-modal .settings-row {
    width: 100%;
    height: 3rem;
    float: left;
    padding: .5rem 0;
}

.settings-modal .settings-column {
    width: 55%;
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
}

.settings-modal .settings-column .Dropdown,
.settings-modal .settings-column input {
    width: 100%;
    height: 100%;
}

.settings-modal .settings-column input {
    width: 4.5rem;
    margin-right: .5rem;
}

.settings-modal .settings-column:first-child {
    width: 45%;
    padding-left: 1rem;
}

.settings-modal .settings-footer {
    width: 100%;
    float: left;
    padding-top: 1rem;
    color: var(--color-secondary);
    font-size: 0.895rem;
}

.settings-modal .settings-footer .footer-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: .25rem;
    float: left;
    align-items: center;
}
.Loader {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.Loader.filled {
    background-color: var(--background-color);
}

.Loader svg {
    width: 6rem;
    height: 6rem;
    fill: var(--color-accent);
}

.Loader span {
    font-weight: 500;
    letter-spacing: .15rem;
}
.Highlight {
    display: inline;
}

.Highlight .highlight {
    display: inline;
    background-color: rgba(var(--rgb-accent-color), .65);
    padding: 0 .1rem;
    border-radius: .25rem;
    color: #fff;
    font-weight: 500;
}
.ItemImage {
    width: 100%;
    float: left;
}

.ItemImage img {
    animation: opacity-fade 160ms;
}


.ItemImage .Loader svg {
    fill: rgba(255, 255, 255, .5);
}
.Item {
    --background-shade: 255, 255, 255;

    width: 9rem;
    height: 9rem;
    float: left;
    border: 1px solid var(--color-hover);
    position: relative;
    margin: .25rem;
    cursor: pointer;
    background-color: #4b525f;
}

.Item span.selected-mark,
.Item span.recent-mark {
    display: flex;
    position: absolute;
    width: 3rem;
    height: 2.5rem;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    color: lightgreen;
    animation: opacity-fade .15s;
}

.Item span.recent-mark {
    width: unset;
    height: unset;
    top: .5rem;
    right: .5rem;
    transition: all .15s;
    color: #fff;
    padding: .25rem .35rem;
    background-color: rgba(255, 0, 0, .75);
    font-size: 0.875rem;
}

.Item.selected span.recent-mark {
    opacity: 0;
    transform: scale(0);
}

.Item span.selected-mark i {
    font-size: 1.625rem;
}

.Item img {
    display: block;
    width: calc(100% - 40px);
    margin: 10px 20px 0 20px;
    float: left;
    -webkit-user-drag: none;
}

.Item .info {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.Item .info .meta {
    width: 100%;
    float: left;
}

.Item .info .price,
.Item .info .quality {
    float: left;
    font-size: .90rem;
    color: #fff;
    background-color: var(--color-hover);
    padding: 3px 6px;
    text-align: center;
    border-bottom-right-radius: .5rem;
}

.Item .info .price .price-chunk,
.ShowcaseItem .meta .price .price-chunk {
    color: #fff !important;
}

.Item .info .quality {
    border-radius: 0;
    padding-right: 4px;
    border-right: 1px solid #4b525f;
}

.Item .info .name {
    width: 100%;
    float: left;
    font-size: .95rem;
    padding: 5px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background-color: #4b525f;
}

.Item.weapon .name .weapon-name {
    font-size: .75rem;
}

.Item.weapon .ItemImage {
    width: 100%;
    margin: 0 0 0 .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Item.weapon .ItemImage img {
    filter: brightness(1.10) drop-shadow(0 0 5px var(--color-shadow));
    max-width: 90%;
    width: auto;
    margin: 0;
    float: left;
}

.Item.weapon {
    background-image: radial-gradient(rgba(var(--background-shade), .6), var(--color-hover));
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Item.weapon::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: .5rem;
    height: 100%;
    background-color: rgba(var(--background-shade), 1);
}
.Item.weapon .info {
    height: 100%;
    justify-content: space-between;
}

.Item.weapon .name {
    line-height: .9rem;
    text-align: left;
    font-size: .9375rem;
    padding: 2px 0 .35rem .85rem;
    background: transparent;
}

.Item.weapon font.QualityShade, .ShowcaseItem font.QualityShade,
.Item.weapon font.PatternShade {
    color: rgba(var(--background-shade), 1);
}

.Item.weapon .meta {
    padding-left: .5rem;
}

.PatternShade.ruby { --background-shade: var(--color-ruby); }
.PatternShade.emerald { --background-shade: var(--color-emerald); }
.PatternShade.sapphire { --background-shade: var(--color-sapphire); }
.PatternShade.black-pearl { --background-shade: var(--color-black-pearl); }

.QualityShade.stattrack { --background-shade: var(--color-stattrack) }
.QualityShade.souvenir { --background-shade: var(--color-souvenir) }
.QualityShade.FN { --background-shade: var(--color-fn) }
.QualityShade.MW { --background-shade: var(--color-mw) }
.QualityShade.FT { --background-shade: var(--color-ft) }
.QualityShade.WW { --background-shade: var(--color-ww) }
.QualityShade.BS { --background-shade: var(--color-bs) }

.Item.gold, .RarityShade.gold { --background-shade: var(--color-gold); }
.Item.covert, .RarityShade.covert { --background-shade: var(--color-covert); }
.Item.classified, .RarityShade.classified { --background-shade: var(--color-classified); }
.Item.restricted, .RarityShade.restricted { --background-shade: var(--color-restricted); }
.Item.mil-spec, .RarityShade.mil-spec { --background-shade: var(--color-milspec); }
.Item.industrial, .RarityShade.industrial { --background-shade: var(--color-industrial); }
.Item.base, .RarityShade.base { --background-shade: var(--color-base); }
.Item.service, .RarityShade.service { --background-shade: 0,0,0; }

font.RarityShade.colored,
font.QualityShade.colored,
font.PatternShade.colored {
    color: rgba(var(--background-shade), 1);
}

.items-list {
    --columns-count: 4;
    --items-margin: 0.25rem; 
    --item-width: calc(100% / var(--columns-count) - 2 * var(--items-margin));

    width: 100%;
    height: 100%;
    float: left;
}

.items-row {
    width: 100%;
    margin-top: 1px;
    float: left;
    display: flex;
    justify-content: left;
}

.items-row .Item {
    width: var(--item-width);
    height: unset;
    margin: var(--items-margin);
    aspect-ratio: 1.35/1;
}

.VoidShowcaseItem {
    --background-shade: var(--rgb-accent-color);

    width: calc(100% / 4 - 1rem);
    aspect-ratio: 1/1;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .5rem;
    position: relative;
    border: 2px dashed var(--color-main);
}
.VoidShowcaseItem:first-child,
.ShowcaseItem:first-child {
    margin: 0;
}
.VoidShowcaseItem span {
    color: var(--color-main);
    font-size: 1.5rem;
    font-weight: 550;
}
.VoidShowcaseItem .item-video-background {
    opacity: .25;
}

.item-video-background {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}
.item-video-background video {
    object-fit: cover !important;
}
.item-video-background .color-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    mix-blend-mode: overlay;
    opacity: 0.8;
    background: rgba(var(--background-shade), .85);
}

.ShowcaseItem {
    width: calc(100% / 4 - 1rem);
    aspect-ratio: 1/1;
    float: left;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .5rem;
    position: relative;
    border: 1px solid var(--color-border);
}
.ShowcaseItem img {
    width: 90%;
    filter: drop-shadow(6px 6px 2px rgba(0,0,0,.65));
}
.ShowcaseItem .info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ShowcaseItem .info .quality {
    width: 100%;
    display: block;
    text-align: center;
    font-weight: 500;
    padding: .35rem 0;
    float: left;
}
.ShowcaseItem .info .meta {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-image: linear-gradient(0deg, rgba(var(--background-shade), 0.5) 0%, transparent 100%)
}
.ShowcaseItem .meta .price {
    padding: .3125rem 0.375rem;
    float: left;
    font-weight: 550;
    color: var(--color-main);
    font-size: .9375rem;
}
.ShowcaseItem .meta .name {
    width: 100%;
    padding: 0 0.375rem .3125rem 0.375rem;
    float: left;
    color: var(--color-main);
    font-size: 1rem;
}
.ShowcaseItem .meta .name .weapon-name {
    font-size: .8rem;
}

@media screen and (max-width: 800px) {
    .Item.with-price img,
    .Item.collection img {
        margin-top: 0 !important;
    }

    .Item .name .weapon-name {
        font-size: .65rem !important;
    }

    .Item .name, 
    .Item .info .price,
    .Item .info .quality {
        font-size: .75rem !important;
        line-height: .7rem !important;
    }
}
.Profile {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
}

.profile-widget {
    width: 100%;
    height: 10rem;
    overflow: hidden;
    position: relative;
}

.profile-background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    background-position: 50% 50%;
    background-size: 100% auto;
}

.profile-background-image img {
    width: 100%;
    user-select: none;
    margin-top: -20%;
}

.user-info {
    padding: 0 2% 4rem 2%;
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(25deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.84));
}

.user-info .user-main {
    width: 40%;
    float: left;
    height: 100%;
    padding-left: 1.5rem;
}

.user-info .user-image {
    width: 4rem;
    height: 4rem;
    float: left;
    border-radius: 50%;
    margin: 0.8rem 0;
    background-color: var(--color-background-secondary);
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 150ms;
}

.user-info .user-image:hover {
    border-color: var(--color-accent);
}

.user-info .user-image i {
    font-size: 3.7rem;
}

.user-info .user-meta {
    width: calc(100% - 4rem);
    height: 4.75rem;
    padding: 1.25rem 0 0 1rem;
    float: left;
}
.user-info .user-meta span {
    display: block;
    float: left;
    width: 100%;
    height: 50%;
}

.user-info .user-meta span.name {
    display: flex;
    align-items: flex-start;
}
.user-info .user-meta span.name input {
    width: 85%;
    margin-bottom: .25rem;
}
.user-info .user-meta span.balance {
    padding-top: .375rem;
}
.user-info .extra-info {
    width: 60%;
    height: 100%;
    float: left;
}

.user-info .extra-info .inventory-meta,
.user-info .extra-info .inventory-actions {
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-info .extra-info .inventory-actions {
    align-items: center;
}

.user-info .extra-info .inventory-meta span {
    display: block;
    float: left;
    width: 100%;
    margin: .15rem 0;
    display: flex;
    justify-content: center;
}

.user-info .extra-info .Button {
    font-size: 1rem;
    max-width: 75%;
    padding: 0.25rem 1.25rem;
}

.profile-content {
    position: absolute;
    width: 100%;
    height: calc(100% - 6rem);
    z-index: 5;
    top: 6rem;
    background-color: var(--color-background-secondary);
    padding: 0.35rem 2% 0 2%;
    border-radius: 2rem 2rem 0 0;
    box-shadow: 0 0 50px 0px rgba(var(--rgb-accent-color), .15);
    float: left;
    display: flex;
    flex-direction: column;
}

.profile-inventory-tabs {
    width: 100%;
    flex: 2;
    overflow: hidden;
}

.profile-inventory-tabs .ItemPage {
    width: 100%;
    margin: 0;
}

.profile-showcase {
    width: 100%;
    height: 100%;
    float: left;
}

.showcase-row {
    width: 100%;
    padding: .35rem .25rem;
    float: left;
}

.showcase-row .showcase-row-title {
    width: 100%;
    float: left;
    padding: .45rem 0;
    font-size: 1.125rem;
    color: var(--color-secondary);
}
.showcase-row-items {
    width: 100%;
    float: left;
    margin-top: .45rem;
}
.showcase-description {
    width: 100%;
    float: left;
    padding: .15rem 2.5rem 1rem 1.5rem;
    font-size: 1.1rem;
}

.item-info-modal .align > .subtitle {
    flex-direction: column;
    align-items: center;
}

.item-info-modal .item-detailed-info {
    width: 100%;
    float: left;
    padding: 1rem 0;
    margin-top: 1rem;
    border-bottom: 1px solid rgba(255,255,255, 0.1);
    border-top: 1px solid rgba(255,255,255, 0.1);
}

.item-info-modal .item-detailed-info.storage-selector {
    border-bottom: none;
    padding-bottom: 0;
}

.item-info-modal .item-detailed-info.storage-selector .Dropdown {
    min-width: 90%;
}

.item-info-modal .item-detailed-info .detailed-line {
    width: 100%;
    float: left;
    margin-bottom: .5rem;
}

.item-info-modal .item-detailed-info .detailed-line .price-chunk {
    font-weight: 550;
}

.item-info-modal .item-detailed-info .detailed-line > span {
    width: calc(100% - 7rem);
    float: left;
    padding: 0 .5rem;
}

.item-info-modal .item-detailed-info .detailed-line > span.custom-scroll {
    max-height: 8rem;
    overflow: auto;
}

.item-info-modal .item-detailed-info .detailed-line .RarityShade,
.item-info-modal .item-detailed-info .detailed-line .QualityShade {
    color: rgba(var(--background-shade, (255, 255, 255)), 1);
}

.item-info-modal .item-detailed-info .detailed-line > span:first-child {
    width: 7rem;
    font-weight: 550;
}

.item-info-modal .item-detailed-info .detailed-line font.collection-name {
    width: 100%;
    float: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 550;
    margin-bottom: .5rem;
}

.item-info-modal .item-detailed-info .detailed-line font.collection-name:last-child {
    margin-bottom: 0;
}

.item-info-modal.RarityShade .align {
    background-image: linear-gradient(20deg, var(--color-background-modal) 0%, rgba(var(--background-shade), .08));
}

.item-info-modal .item-detailed-info .detailed-line .price {
    font-weight: 550;
    color: gold;
}

.item-info-modal .same-available {
    display: flex;
    justify-content: space-between;
    padding: 0 2rem 0 .5rem !important;
}

.item-multiple-options .item-detailed-info.storage-selector {
    border: none;
}

.storage-buy-modal .subtitle input {
    width: 50%;
    margin: .5rem 0 .5rem 0;
}

.storage-buy-modal .subtitle .warning {
    color: rgb(61, 255, 61);
    font-weight: 550;
}

.storage-buy-modal .subtitle .warning.error {
    color: red;
}

.profile-picture-modal .subtitle {
    border-bottom: 1px solid rgba(255,255,255, 0.1);
}

.profile-picture-modal .profile-picture-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
}

.profile-picture-modal .profile-picture-preview {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    margin-bottom: 2rem;
    overflow: hidden;
}

img.profile-image {
    width: 100%;
    min-height: 100%;
    -webkit-user-select: none;
    user-select: none;
    object-position: 50% 0;
    object-fit: cover;
}

.profile-picture-modal .profile-picture-preview.no-photo {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #fff;
    background-color: var(--color-background-modal);
    font-size: 1.15rem;
}

@media screen and (max-width: 800px) {
    .profile-widget, .profile-inventory,
    .profile-content, .Profile .ItemPage {
        width: 100%;
        border-radius: 0;
    }

    .profile-content, .Profile .ItemPage .current-page {
        padding: 0;
    }
}
.ItemPage {
    --row-count: 4;
    --columns-count: 4;
    --items-margin: 0.25rem; 

    --item-width: calc(100% / var(--columns-count) - 2 * var(--items-margin));
    --item-height: calc(100% / var(--row-count) - 2 * var(--items-margin));

    --page-border-color: rgba(255, 255, 255, 0.03);

    width: 98%;
    height: 100%;
    float: left;
    margin: 0 1%;
    border-radius: .75rem .75rem 0 0;
    border: 2px solid var(--color-background);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ItemPage .interactive-header {
    width: 100%;
    float: left;
    background-color: var(--color-background);
    height: 3rem;
    border-bottom: 1px solid var(--page-border-color);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
}

.ItemPage .interactive-header .header-tool {
    height: 100%;
    float: left;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 250ms;
    border-radius: 50%;
}

.ItemPage .interactive-header .header-tool.disabled {
    opacity: 0.15;
    pointer-events: none;
}

.ItemPage .interactive-header .header-tool i {
    font-size: 2.375rem;
}

.ItemPage .interactive-header .header-tool:hover {
    background-color: var(--color-hover);
}

.ItemPage .interactive-header .header-inventory-path {
    width: calc(40% - 3rem);
    height: 100%;
    float: left;
    padding-left: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-size: 1.35rem;
}

.ItemPage .interactive-header .header-inventory-path .price-chunk {
    font-size: 0.875rem;
    margin-left: 1rem;
}

.ItemPage .interactive-header .filters {
    width: 60%;
    display: flex;
    float: left;
    height: 100%;
}

.ItemPage .interactive-header .filters .search-input {
    flex: 2;
    height: 100%;
    float: left;
    text-align: right;
    position: relative;
    padding-right: 1rem;
}

.ItemPage .interactive-header .filters .overlay-filters {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: left;
    top: 0;
    display: flex;
    justify-content: space-between;
    transition: all 250ms;
    opacity: 0;
    pointer-events: none;
    background-color: var(--color-background);
    padding-right: 1rem;
    left: 0;
}

.ItemPage .interactive-header .filters .overlay-filters .Dropdown {
    width: calc(100% / 3.15);
}

.ItemPage.filters-open .interactive-header .filters .overlay-filters {
    opacity: 1;
    pointer-events: all;
}

.ItemPage .interactive-header .filters input {
    padding: .4rem;
    height: 100%;
    width: 60%;
}

.ItemPage .interactive-header .header-tool.filters-link i {
    font-size: 1.5rem;
}

.ItemPage .filters .selections .Dropdown {
    width: 8.5rem;
    max-width: calc(100% / 3.4);
}

.ItemPage .current-page {
    width: 100%;
    float: left;
    flex: 2;
    padding: .25rem;
    position: relative;
    overflow: hidden !important;
    background-color: var(--color-background);
}
.ItemPage .current-page .Item {
    width: var(--item-width);
    height: var(--item-height);
    margin: var(--items-margin);

    background-color: var(--color-background-secondary);
    float: left;
}

.ItemPage .current-page .empty-page {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    color: #525358;
}

.ItemPage .current-page .empty-page .Button {
    margin-top: 1rem;
}

.ItemPage .control {
    width: 100%;
    float: left;
    background-color: var(--color-background);
    border-top: 1px solid var(--page-border-color);
    height: 3.2rem;
}

.ItemPage .control .control-slider {
    width: 100%;
    height: 100%;
    float: left;
}

.ItemPage.selection-enabled .control .control-slider {
    width: 50%;
    float: left;
    height: 100%;
}

.ItemPage .control .arrow-slide {
    width: 30%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .1s;
}
.ItemPage .control .arrow-slide:hover {
    background-color: var(--color-hover);
}

.ItemPage .control .arrow-slide.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.ItemPage .control .arrow-slide i {
    font-size: 3.1rem;
}

.ItemPage .control .page-numeral {
    width: 40%;
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ItemPage .control .page-numeral input {
    text-align: center;
    padding: .4rem;
    height: auto;
    max-width: 3rem;
}

.ItemPage .control .page-numeral > span {
    padding-left: .5rem;
    font-size: 1.10rem;
    font-weight: 550;
    color: var(--color-secondary);
}

.ItemPage .control .control-toolbar {
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
}

.ItemPage .selection-helper {
    width: 100%;
    float: left;
    opacity: 1;
    display: flex;
    height: 100%;
    right: 0;
    transition: all .2s cubic-bezier(0.19, 0.02, 0, 0.98);
}

.ItemPage .selection-helper .counter i.uil,
.ItemPage .selection-helper .counter span {
    transition: all .2s;
    opacity: 0.15;
    pointer-events: none;
}

.ItemPage .selection-helper.open .counter i.uil,
.ItemPage .selection-helper.open .counter span {
    opacity: 1;
    pointer-events: all;
}

.ItemPage .selection-helper .counter {
    height: 100%;
    width: 45%;
    justify-content: center;
    display: flex;
    float: left;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-right: 1px solid var(--page-border-color);
    border-left: 1px solid var(--page-border-color);
    font-size: 1.15rem;
}
.ItemPage .selection-helper .counter i {
    margin-right: .25rem;
    font-size: 1.525rem;
    cursor: pointer;
}

.ItemPage .selection-helper .actions {
    flex: 2;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ItemPage .selection-helper .actions .Button {
    max-width: calc(100% - 2rem);
}

@media screen and (max-width: 800px) {
    .ItemPage .filters {
        padding: .5rem .25rem;
    }
    .ItemPage .filters .selections {
        justify-content: left;
    }
    .ItemPage .filters > span {
        display: none;
    }
}
.Cases {
    --preview-height: 16rem;

    width: 100%;
    height: 100%;
    float: left;
    padding-top: .5rem;
}

.best-drop {
    width: 96%;
    height: 7rem;
    float: left;
    background-color: var(--color-background);
    animation: opacity-fade .40s cubic-bezier(0.19, 0.02, 0, 0.98);
    padding: 0;
    border-radius: 0 .75rem .75rem 0;
    display: flex;
}

.best-drop .item-container {
    float: left;
    height: 100%;
    width: 10rem;
}

.best-drop .Item {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
.best-drop .item-info {
    flex: 2;
    float: left;
    height: 100%;
    display: flex;
    padding: .5rem 1.5rem;
    flex-direction: column;
    font-size: 1.15rem;
    align-items: left;
}
.best-drop .item-info span {
    margin-bottom: .5rem;
}

.case-content {
    float: left;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
}

.current-preview {
    width: 96%;
    height: var(--preview-height);
    background-color: var(--color-background);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    position: relative;
    justify-content: center;
}

.current-list {
    flex: 2;
    padding-top: .35rem;
    width: 96%;
    float: left;
    overflow: hidden;
}

.current-list .tab-title {
    text-align: center;
}

.current-list.collections-list {
    display: flex;
    flex-direction: column;
}
.current-list.collections-list .items-list {
    flex: 2;
}
.current-list.collections-list .Item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.current-list.collections-list .Item .ItemImage {
    margin-top: -2.5rem;
    width: auto;
    height: 70%;
}

.current-list.collections-list .Item .ItemImage img {
    max-height: 100%;
}

.current-list.collections-list .Item .info {
    box-shadow: 0 -1px 30px 1px var(--color-shadow);
}

.current-list.collections-list .Item .name {
    background-color: transparent;
    backdrop-filter: blur(8px);
}

.current-list.case-contains .Item {
    opacity: 0;
    transition: all .55s cubic-bezier(0.33, 1, 0.68, 1);
    transform: translateY(.75rem);
}

@keyframes current-list-spawn {
    0% {
        transform: rotate3d(1, 0, 0, 50deg) perspective(1px) scale(1.10);
        opacity: 0;
    } 100% {
        transform: rotate3d(0, 0, 0, 0) perspective(0) scale(1);
        opacity: 1;
    }
}

.current-list.case-contains .Item.weapon.gold .ItemImage {
    animation: glow 3500ms infinite;
}

@keyframes glow {
    0% {
        filter: brightness(1);
    } 50% {
        filter: brightness(1.15);
    }
}

.choose-case {
    display: flex;
    font-size: 1.25rem;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.current-case-actions {
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
    animation: opacity-fade 250ms;
}

.current-case-actions .case-action {
    padding: .25rem .5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 250ms;
}

.current-case-actions .case-action:hover {
    background-color: rgba(255, 255, 255, 0.0625);
}

.current-case-actions .case-action i {
    margin-right: .5rem;
}

.current-case-actions .case-action.favorite.active i {
    color: gold;
}

.current-case-main,
.dropped-item {
    width: 100%;
    height: 100%;
    float: left;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    animation: ghost-spawn .55s cubic-bezier(0.19, 0.02, 0, 0.98);
}

.current-case-main {
    width: unset;
}

.current-case-main .image {
    cursor: pointer;
    width: 8rem;
    aspect-ratio: 1/1;
    border: 1px dashed var(--color-hover);
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    position: relative;
}

.current-case-main .image img {
    width: 90%;
    -webkit-user-drag: none;
}

.current-case-main .image span.price {
    position: absolute;
    background-color: var(--color-background);
    padding: .25rem;
    bottom: 0;
    right: 0;
    font-size: .90rem;
}

.current-case-main .image span.price .price-chunk {
    color: #fff !important;
}

.current-case-main .actions,
.dropped-item .item-info {
    flex: 2;
    height: 100%;
    padding: .75rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

span.action-line .Selection > span {
    padding: .35rem 1rem;
}

.current-case-main .actions span.action-line,
.dropped-item .item-info span.action-line {
    width: 100%;
    float: left;
    font-weight: 500;
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-overflow: ellipsis;
}

.current-case-roll {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
}

.current-case-roll .roll {
    width: 98%;
    margin: 0 1%;
    border-radius: .75rem;
    height: 10rem;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.current-case-roll span.caret {
    z-index: 5;
    background-color: var(--color-accent);
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    box-shadow: 0 0 100px 20px rgba(var(--rgb-accent-color), .35);
    height: 100%;
    animation: opacity-fade .5s;
}

.CaseItem {
    margin: 0;
    float: none;
    height: 100%;
    aspect-ratio: 1.2/1 !important;
    margin-left: 4px;
    border: none;
    display: inline-block;
    transition: margin 5.5s cubic-bezier(0.19, 0.02, 0, 0.98);
    background: var(--color-background-secondary);
    position: relative;
    overflow: hidden;
}
.CaseItem .image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.CaseItem img {
    max-width: 95%;
    filter: brightness(1.15);
    z-index: 1;
}
.CaseItem span.rarity-color {
    position: absolute;
    display: block;
    width: 100%;
    height: 0.625rem;
    background-color: rgba(var(--background-shade), 1);
    bottom: 0;
    box-shadow: 0 -5px 2rem 1.5rem rgba(var(--background-shade), .45);
}

.current-case-roll .roll .CaseItem.first-item {
    margin-left: 100%;
}

@keyframes ghost-spawn {
    0% {
        opacity: 0;
        transform: translateY(.5rem);
    } 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropped-item .item-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropped-item .item-preview .Item {
    aspect-ratio: 1.5/1;
    height: 8rem;
    width: auto;
    margin: 0;
}

.dropped-item .item-info .Button {
    margin-right: .5rem;
}

@media screen and (max-width: 800px) {
    .Cases {
        --preview-height: 8.8rem;
    }

    .current-preview,
    .current-list {
        width: 100%;
        border-radius: 0;
    }

    .item-info,
    .current-case-main .actions {
        padding-right: 0 !important;
    }

    .Cases .tab-title {
        padding: .35rem 0;
    }

    .current-list.collections-list .Item .name {
        font-size: .8rem;
    }
}
.Shop {
    width: 100%;
    height: 100%;
    float: left;
}

.Shop .collection-pick {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    padding: .5rem 2%;
}

.Shop .collections-list {
    width: 100%;
    flex: 2;
    float: left;
    overflow: hidden;
}

.Shop .collections-list .items-list {
    width: 100%;
    height: 100%;
    float: left;
}

.Shop .available-items-list {
    padding: .5rem 0;
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Shop .available-items-list .controls {
    width: 100%;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Button.item-quality-buy {
    width: 100%;
    margin-bottom: .5rem;
    justify-content: space-between;
}

.Modal.buy-item-modal .Button.stattrack {
    --color-scheme-rgb: var(--color-stattrack);
}

.Modal.buy-item-modal .Button.disabled {
    opacity: 0.2;
}

.Modal.buy-item-modal .Item {
    width: 10rem;
    height: unset;
    aspect-ratio: 2/1.5;
}

.Modal.buy-item-modal .subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Modal.buy-item-modal .subtitle .offer {
    width: 100%;
    float: left;
    margin-top: .75rem;
    padding: .5rem 0;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: rgba(255,255,255, 0.1);
}

.Modal.buy-item-modal .subtitle .meta-info, 
.Modal.buy-item-modal .subtitle .inputs {
    width: 65%;
    height: 100%;
    float: left;
}

.Modal.buy-item-modal .subtitle .inputs {
    width: 35%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: .25rem;
}

.Modal.buy-item-modal .subtitle .inputs input {
    max-width: 60%;
    margin-left: .25rem;
}

.Modal.buy-item-modal .subtitle .meta-info span {
    width: 100%;
    float: left;
    padding: .25rem;
}

.Roulette {
    width: 100%;
    height: 100%;
    float: left;
    padding: .75rem;
    display: flex;
    flex-direction: column;
}

.Roulette .roulette-roll {
    width: 100%;
    float: left;
    height: 10rem;
    background-color: var(--color-background-secondary);
    border-radius: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.Roulette .current-roll {
    height: 5rem;
    border-radius: 1rem;
    width: 100%;
    float: left;
    overflow: hidden;
    padding: .35rem 0;
    white-space: nowrap;
    background-color: var(--color-background);
}

.Roulette .current-roll > .roll-animate-area {
    width: 100%;
    height: 100%;
    float: left;
    animation: opacity-fade 1s;
}

.Roulette .current-roll .roll-item {
    float: none;
    height: 100%;
    aspect-ratio: 1/1 !important;
    margin-left: 8px;
    border-radius: .5rem;
    border: none;
    display: inline-block;
    transition: margin 5.5s cubic-bezier(0.19, 0.02, 0, 0.98);
    position: relative;
    overflow: hidden;
}

.Roulette .caret {
    z-index: 5;
    position: absolute;
    top: 0;
    left: calc(50% - 1.5rem);
    color: #fff;
    height: 100%;
    font-size: 3rem;
}

.Roulette .caret.top {
    top: 1rem;
}

.Roulette .caret.bottom {
    transform: rotate(180deg);
    top: -1rem;
}

.Roulette .current-roll .roll-item.color-bg {
    background-color: rgba(var(--color-scheme), 1);
}

.Roulette .bet {
    width: 100%;
    flex: 2;
    float: left;
    padding-top: 1.25rem;
}

.available-bids {
    width: 100%;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.available-bids .bet-btn {
    width: calc(100% / 3.15);
    height: 2.8rem;
    margin-bottom: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: rgba(var(--color-scheme), 1);
    background-color: rgba(var(--color-scheme), .2);
    transition: all 250ms;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: .75rem;
}

.available-bids .bet-btn.blue,
.available-bids .bet-btn.green {
    width: calc(97.62% / 2);
}

.available-bids .bet-btn:not(.active):not(.disabled):hover {
    background-color: rgba(var(--color-scheme), .7);
    box-shadow: 0 0 17px 0 rgba(var(--color-scheme), .5);
    color: #fff;
}

.available-bids .bet-btn.active {
    background-color: rgba(var(--color-scheme), 1);
    box-shadow: 0 0 17px 0 rgba(var(--color-scheme), .85);
    color: #fff;
}

.available-bids .bet-btn.disabled {
    opacity: .35;
    pointer-events: none;
}

.Roulette .color-bg {
    --color-scheme: 255, 255, 255;
}

.Roulette .color-bg.green { --color-scheme: 12, 217, 157; }
.Roulette .color-bg.blue { --color-scheme: 0, 132, 255; }
.Roulette .color-bg.gold { --color-scheme: 243, 188, 47; }
.Roulette .color-bg.red { --color-scheme: 212, 61, 55; }
.Roulette .color-bg.orange { --color-scheme: 233, 116, 51; }

.Roulette .controls {
    width: 100%;
    float: left;
    margin-top: 2rem;
}

.Roulette .controls span.control-line {
    width: 100%;
    float: left;
    margin: .5rem 0;
    font-size: 1.25rem;
}

.Roulette .controls .popup-notify {
    margin-left: 1rem;
}

.Roulette .controls input {
    max-width: 8rem;
    margin-left: .5rem;
    font-size: 1rem;
}

.Roulette .controls .roll-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3rem !important;
}

.Roulette .controls .roll-button .Button {
    font-size: 1.35rem;
}
.Crash {
    width: 100%;
    height: 100%;
    float: left;
}

.Crash .main-area {
    width: calc(100% - 4rem);
    height: 19rem;
    padding: 1rem 0 0 0;
    margin: 0 2rem;
    transition: all .15s;
    display: flex;
}

.Crash .canvas-controls.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.Crash .main-area canvas {
    height: 100%;
    background-color: var(--color-background);
    aspect-ratio: 1.5/1;
    border-radius: 0 .5rem .5rem 0;
}

.Crash .main-area .canvas-controls {
    height: 100%;
    flex: 2;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
}

.Crash .main-area .canvas-controls .control-line {
    width: 100%;
    float: left;
    font-size: 1.15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.Crash .main-area .canvas-controls .control-line:first-child {
    border-top: none;
}

.Crash .main-area .canvas-controls .control-line span {
    display: block;
    width: 50%;
    height: 100%;
    float: left;
}

.Crash .main-area .canvas-controls .control-line.button {
    flex: 2;
    flex-direction: column;
    padding-bottom: 0;
}

.Crash .main-area .canvas-controls .control-line.button .Button {
    font-size: 1.75rem;
}

.Crash .latest-multipliers {
    width: calc(100% - 4rem);
    height: 2.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.Crash .latest-multipliers .latest {
    float: left;
    margin-right: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--background-shade), .20);
    font-weight: 550;
    border-radius: .35rem;
    transition: all 250ms;
    color: rgb(var(--background-shade));
    padding: .25rem .5rem;
    animation: final-item-spawn 250ms;
}

.Crash .latest-multipliers .latest:hover {
    background-color: rgba(var(--background-shade), .85);
    color: #fff;
    cursor: pointer;
}

.Crash .latest-multipliers .subtitle {
    margin-right: .5rem;
}

.Crash .inputs-area {
    width: 100%;
    height: calc(100% - 20rem);
    padding: 1.5rem 2rem 1rem 2rem;
}

.Crash .inputs-area .input-column {
    width: 50%;
    height: 60%;
    float: left;
    padding: .25rem 1.5rem;
}

.Crash .inputs-area .input-column.target-input {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.Crash .inputs-area .tab-list {
    padding-right: 50%;
}

.Crash .inputs-area .input-line {
    width: 100%;
    float: left;
    padding: .35rem;
    font-size: 1.15rem;
    height: 2.5rem;
}

.Crash .inputs-area .input-line span {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    float: left;
}

.Crash .inputs-area .auto-stop-at-input {
    margin-left: .25rem;
    max-width: 5rem;
}

.Crash .inputs-area .crash-bet {
    margin-right: .35rem;
    max-width: 6rem;
}

.Crash .inputs-area .crash-selected-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
}

.Crash .inputs-area .crash-selected-item .VoidItem,
.Crash .inputs-area .crash-selected-item .Item {
    width: 55%;
    aspect-ratio: 1/1;
    height: unset;
    margin: 0;
}

.Crash .crash-input-errors {
    width: 100%;
    float: left;
    margin-top: 3rem;
}

.Crash .input-error {
    width: 100%;
    display: flex;
    float: left;
    justify-content: center;
    margin-top: .35rem;
    font-size: 1.0625rem;
    animation: opacity-fade 100ms;
    color: #e53935;
}

.Crash .crash-popup-notify {
    width: 100%;
    float: left;
    font-size: 1.15rem;
    margin-top: .5rem;
    text-align: center;
    height: 1.15rem;
}
.Radio {
    --size: 1.25rem;
    width: 100%;
    height: 2.5rem;
    max-height: 100%;
    float: left;
    cursor: pointer;
}

.Radio .radio-button {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

.Radio.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.Radio .radio-button input:checked + .animation {
    border-color: var(--color-accent);
    transition: all 0.25s;
}

.Radio .radio-button input:checked + .animation::before {
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
}

.Radio .radio-button .animation {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid var(--color-secondary);
    position: relative;
    display: flex;
    transition: all 0.2s;
    justify-content: center;
    align-items: center;
    float: left;
}

.Radio .radio-button .animation::before {
    content: "";
    border-radius: 50%;
    width: 0;
    height: 0;
    transition: all 0.2s;
    background: var(--color-accent);
}

.Radio .radio-label {
    width: calc(100% - 2.5rem);
    height: 100%;
    float: left;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: var(--color-main);
}

.Radio .radio-label .radio-label-title {
    width: 100%;
    float: left;
    font-weight: 500;
    font-size: 1.1rem;
}

.Radio .radio-label .radio-label-subtitle {
    width: 100%;
    float: left;
    color: var(--color-secondary);
    font-size: 0.875rem;
}

.RadioGroup {
    width: 100%;
    float: left;
    padding: 0.5rem 0;
}

.RadioGroup:last-child {
    border-bottom: none;
}

.RadioGroup:first-child {
    border-top: none;
}

.RadioGroup .title {
    width: 100%;
    float: left;
    padding: 0.35rem 0;
    font-weight: 550;
    font-size: 1.25rem;
    color: var(--color-main);
}

.RadioGroup .buttons .Radio {
    margin: 0.35rem 0;
}

.Craft {
    width: 100%;
    height: 100%;
    float: left;
}

.Craft .craft-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    float: left;
}

.Craft .target-selection .radio-selection-row {
    margin-top: 4rem;
    width: 100%;
    float: left;
}

.Craft .target-selection .radio-group-column {
    width: 50%;
    height: 100%;
    float: left;
    padding: 3.5rem 0.5rem 3.5rem 3.75rem;
}

.Craft .target-selection .radio-group-column:last-child {
    padding: 3.5rem 3.75rem 3.5rem 0.5rem;
}

.Craft .target-selection .radio-group-column .RadioGroup {
    border-radius: 1rem;
    background-color: var(--color-background);
    height: auto;
    padding: 1rem 0 1.5rem 2rem;
}

.Craft .target-selection .radio-group-column .RadioGroup span.RarityShade {
    display: block;
    width: 75%;
    height: 0.15rem;
    border-radius: 1rem;
    margin-top: .375rem;
    float: left;
    transition: width 200ms;
    background-color: rgba(var(--background-shade), 1);
}

.Craft .target-selection .radio-group-column .RadioGroup span.craft-traget-rarity-name {
    display: flex;
    justify-content: space-between;
    padding-right: 1rem;
}

.Craft .target-selection .radio-group-column .RadioGroup span.craft-traget-rarity-name span:last-child {
    color: var(--color-secondary);
    font-size: 0.9em;
}

.Craft .target-selection .target-actions {
    width: 100%;
    height: 2.35rem;
    float: left;
    display: flex;
    justify-content: center;
}

.Craft .items-selection .tab-title span {
    text-transform: none;
}

.Craft .craft-stage font.QualityShade,
.Craft .craft-stage font.RarityShade {
    color: rgba(var(--background-shade), 1);
}

.Craft .craft-spinner-container {
    width: 100%;
    height: 70%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Craft .craft-spinner {
    height: 85%;
    aspect-ratio: 1/1;
    float: left;
    border-radius: 50%;
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    box-shadow: inset 0px 0px 30px 5px var(--color-background-secondary);
}

.Craft .craft-spinner .craft-spinner-inside {
    height: calc(100% - 5rem);
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    transition: height 400ms, box-shadow 1s;
    position: relative;
}

.Craft .craft-spinner .spinner-interactive-item {
    position: absolute;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 250ms, opacity 1600ms, filter 2s;
    pointer-events: none;
    box-shadow: 0px 0px 6px 0px var(--color-background-secondary);
    z-index: 1;
}

.Craft .craft-spinner .interactive-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.Craft .craft-spinner .spinner-interactive-item img {
    width: 120%;
    filter: brightness(1.15) drop-shadow(0 0 5px var(--color-shadow));
    transition: all 250ms;
}

.Craft .craft-spinner .item-video-background {
    border-radius: 50%;
    z-index: 0;
}

.Craft .craft-spinner .item-video-background .color-bg {
    transition: all 250ms;
}

.Craft .craft-spinner .craft-spinner-inside .craft-result-area {
    position: absolute;
    margin: 20%;
    width: 60%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-background-secondary);
    z-index: 5;
    transition: box-shadow 250ms;
    box-shadow: inset 0 0 80px 10px rgba(var(--background-shade), 0.7);
}

.Craft .result-item {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: final-item-spawn .4s cubic-bezier(0.33, 1, 0.68, 1.5);
}

.Craft .result-item img {
    width: 80%;
}

.Craft .result-item .weapon-name {
    font-size: 0.875rem;
}

.Craft .result-item .skin-name {
    font-size: 1.1rem;
    font-weight: bold;
}

.Craft .craft-result-actions {
    width: 100%;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 15%;
}

.Craft .craft-result-actions .craft-subtitle {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 0;
    align-items: center;
    font-size: 1.25rem;
}

.Craft .craft-result-actions .Button {
    font-size: 1.5rem;
    margin: 0.5rem;
}

.Craft .craft-result-actions .Button.symbol {
    padding: 0.35rem 1rem;
}

.Craft .craft-spinner.spinning .craft-spinner-inside {
    height: 100%;
    box-shadow: 0 0 100px 0px rgba(var(--background-shade), 0.4);
}

.Craft canvas {
    overflow: hidden;
}

.Modal.craft-help-modal .outcomes {
    width: 100%;
    max-height: 25rem;
    padding-right: .5rem;
}

.Modal.craft-help-modal .outcomes .item-row {
    width: 100%;
    float: left;
    height: 4rem;
    border-bottom: 1px solid rgba(255,255,255, 0.05);
    padding: 0.25rem 0.25rem 0.25rem 0;
}
.Modal.craft-help-modal .outcomes .item-row:last-child {
    border-color: transparent;
}

.Modal.craft-help-modal .outcomes .item-row .item-column {
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.Modal.craft-help-modal .outcomes .item-row .item-column.image {
    width: 5.5rem;
}

.Modal.craft-help-modal .outcomes .item-row .item-column.chance {
    width: 3.5rem;
    justify-content: flex-end;
}

.Modal.craft-help-modal .outcomes .item-row .item-column.name {
    width: calc(100% - 9rem);
    flex-direction: column;
    padding: 0.875rem .5rem 0;
}

.Modal.craft-help-modal .outcomes .item-row .item-column.name .item-fullname,
.Modal.craft-help-modal .outcomes .item-row .item-column.name .item-price {
    width: 100%;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.Modal.craft-help-modal .outcomes .item-row .item-column.name .item-price {
    font-size: 0.85em;
    padding-top: 0.1875rem;
}

.Modal.craft-help-modal .outcomes .item-row .item-column img {
    height: 100%;
}
.Selection {
    float: left;
    overflow: hidden;
    border: 1px solid var(--color-hover);
    background-color: var(--color-background);
}

.Selection > span {
    padding: .5rem 1rem;
    font-size: 1.15rem;
    display: block;
    float: left;
    cursor: pointer;
    border-right: 1px solid var(--color-hover);
    transition: all .15s;
}
.Selection > span:last-child {
    border-color: transparent;
}
.Selection > span.active {
    cursor: default;
    background-color: rgba(var(--rgb-accent-color), .8);
}

.Selection.disabled {
    pointer-events: none;
    opacity: 0.65;
}
.Upgrader {
    width: 100%;
    height: 100%;
    float: left;
}

.Upgrader .items-preview {
    margin-top: 4.5rem;
    width: 100%;
    display: flex;
    float: left;
    align-items: center;
}

.Upgrader .item-selection,
.FreeContract .item-selection,
.Crash .item-selection {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
}
.Upgrader .item-selection .ItemPage,
.FreeContract .item-selection .ItemPage,
.Crash .item-selection .ItemPage {
    flex: 2;
}

.items-preview .upgrader-item {
    width: calc(100% / 3.5);
    aspect-ratio: 1/1;
    float: left;
    padding: 1rem;
}

.items-preview .upgrader-item .Item {
    width: 100%;
    height: 100%;
    float: left;
    margin: 0;
}

.VoidItem {
    width: 100%;
    height: 100%;
    float: left;
    margin: 0;
    border: 2px dashed var(--color-secondary);
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 550;
    color: var(--color-secondary);
}

.upgrade-settings {
    width: 100%;
    float: left;
    padding: 0 1.5rem;
    margin-top: 2rem;
}

.upgrade-settings .setting {
    width: 50%;
    float: left;
}

.upgrade-settings .setting > span {
    width: 100%;
    display: block;
    float: left;
    font-size: 1.25rem;
    padding-bottom: .5rem;
}

.upgrade-settings .setting .selection-container {
    width: 100%;
    float: left;
    display: flex;
    justify-content: space-between;
}

.upgrade-settings .setting .selection-container .Dropdown {
    min-width: 40%;
    height: 100%;
}

.interactive-upgrader {
    width: calc(100% / 2.34);
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.interactive-upgrader .Button.reroll-item {
    padding: 0.35rem;
    margin-left: .65rem;
}
.interactive-upgrader .Button.reroll-item i {
    font-size: 1.76rem;
}
.interactive-upgrader .Button {
    margin-top: 2.5rem;
    font-size: 1.5rem;
}

.Spinner {
    --color-scheme-rgb: var(--color-milspec);
    --color-scheme: rgba(var(--color-scheme-rgb), 1);

    width: 80%;
    aspect-ratio: 1/1;
    float: left;
    border-radius: 50%;
    border: 2px solid var(--color-background);
    padding: 15px;
    position: relative;
    transition: all .25s;
}

.Spinner > span.spinner-content {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    border-radius: 50%;
    background-color: var(--color-background);
    font-size: 3.15rem;
    justify-content: center;
    border: 2px solid var(--color-background);
    align-items: center;
    animation: spinner-content-spawn .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Spinner > span.spinner-content img {
    width: 80%;
    animation: spinner-content-spawn .4s cubic-bezier(0.33, 1, 0.68, 1.5);
}
.Spinner > span.spinner-content .loss {
    animation: spinner-content-spawn .4s cubic-bezier(0.33, 1, 0.68, 1.5);
}

.Spinner i.spinner-indicator {
    position: absolute;
    top: 5px;
    left: calc(50% - 1rem);
    z-index: 1;
    color: #fff;
    font-size: 2rem;
    transform-origin: 0px 5rem;
    transition: transform 6.5s cubic-bezier(0.19, 0.02, 0, 0.98);
}

.Spinner > span.spinner-content span.spinner-chance-preview::after {
    content: "%";
    font-size: 1.5rem;
}

.no-items-available {
    width: 100%;
    text-align: center;
    animation: opacity-fade .25s;
    color: #e53935;
    font-weight: 550;
    margin-top: 2rem;
    font-size: 1.15rem;
    float: left;
}

@keyframes spinner-content-spawn {
    0% {
        transform: scale(0.6);
    } 50% {
        transform: scale(1);
    }
}

@media screen and (max-width: 800px) {
    .items-preview .upgrader-item, 
    .items-preview .arrows,
    .Upgrader .item-selection .ItemPage .current-page  {
        padding: 0;
    }

    .interactive-upgrader {
        margin-top: 0;
    }

    .Spinner {
        width: 55%;
    }

    .Upgrader .item-selection .ItemPage {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
}
.FreeContract {
    width: 100%;
    height: 100%;
    float: left;
}

.ContractBody {
    width: 100%;
    height: 100%;
    float: left;
}

.ContractBody .items-preview {
    width: 96%;
    height: 10rem;
    float: left;
    margin: .75rem 2%;
    padding: .75rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: .75rem;
    background-color: var(--color-background);
}

.ContractBody .items-preview .Item {
    margin: 0;
}

.ContractBody .contract-meta {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
    align-items: center;
    font-size: 1.25rem;
}

.contract-arc {
    width: 100%;
    float: left;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.background-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 0;
    left: 0;
}

.background-canvas canvas {
    width: 100%;
    height: 100%;
    background-color: transparent;
    float: left;
}

.contract-arc .sign-contract-area {
    width: 100%;
    position: absolute;
    float: left;
    display: flex;
    justify-content: center;
    padding: .75rem;
    align-items: center;
    transition: all .6s cubic-bezier(0.64, -0.44, 0.58, 1);
}

.contract-arc .sign-contract-area .canvas-area {
    width: 40%;
    aspect-ratio: 1/1;
    position: relative;
    background-color: var(--color-background);
    border-radius: .75rem;
}

.contract-arc .sign-contract-area .pen-icon {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

.contract-arc .sign-contract-area .pen-icon i {
    font-size: 8rem;
    opacity: .015;
}

.contract-arc .sign-contract-area .HSV-picker {
    position: absolute;
    top: 0;
    left: -3rem;
    width: 1.25rem;
    height: 100%;
}

.contract-arc .sign-contract-area .HSV-picker:active,
.contract-arc .sign-contract-area .HSV-picker canvas:active {
    cursor: grabbing;
}

.contract-arc .sign-contract-area .HSV-picker .indicator {
    position: absolute;
    width: 2.25rem;
    height: .5rem;
    border: 1px solid #000;
    top: 0;
    left: -0.5rem;
    background-color: #fff;
    display: block;
    pointer-events: none;
    border-radius: .75rem;
}

.contract-arc .sign-contract-area .HSV-picker canvas {
    width: 100%;
    height: 100%;
    float: left;
    cursor: pointer;
}

.contract-arc .sign-contract-area .canvas-tools {
    position: absolute;
    top: 0;
    right: -6rem;
    width: 5rem;
    height: 100%;  
}

.contract-arc .sign-contract-area .canvas-tools input {
    width: 100%;
    height: unset;
    margin-top: 1rem;
    aspect-ratio: 2/1;
}

.contract-arc .sign-contract-area .canvas-tools .current-color-preview {
    width: 100%;
    aspect-ratio: 1.5/1;
    border: 2px solid #fff;
}

.ContractBody .sign-contract-area canvas {
    width: 100%;
    height: 100%;
    float: left;
    cursor: crosshair;
}

.contract-arc .spinner {
    width: 40%;
    border: 2px solid var(--color-background);
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 1s;
}

.contract-arc:not(.spinning) .spinner {
    transform: scale(0);
}
.contract-arc.spinning .sign-contract-area {
    transform: scale(0);
}

.contract-arc .spinner .item-video-background {
    opacity: 1;
    animation: spinner-idle 15s infinite ease, linear-rotate 20s infinite linear;
}
.contract-arc .spinner .item-video-background .color-bg {
    transition: all .5s;
}

.contract-arc .spinner-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    aspect-ratio: 1/1;
    margin: 15%;
    border: 2px solid var(--color-background);
    border-radius: 50%;
    background-image: radial-gradient(rgba(var(--background-shade), 1) -600%, var(--color-background-secondary));
    transition: all .25s;
    overflow: hidden;
}

.contract-arc .spinner-inside .final-item {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0;
}

.contract-arc .spinner-inside .final-item.open {
    opacity: 1;
    animation: final-item-spawn .4s cubic-bezier(0.33, 1, 0.68, 1.5);
}

.contract-arc .spinner-inside .final-item img {
    width: 80%;
    filter: brightness(1.10) drop-shadow(-5px 5px 2px var(--color-shadow));
}
.contract-arc .spinner-inside .final-item span {
    color: gold;
    font-size: 1.25rem;
}

.ContractBody .controls {
    width: 100%;
    float: left;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.ContractBody .controls .Button {
    font-size: 1.5rem;
}

@keyframes final-item-spawn {
    0% {
        transform: scale(0.6);
        opacity: 0;
    } 100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spinner-idle {
    0% {
        transform: scale(1);
    } 50% {
        transform: scale(2);
    }
}

@keyframes linear-rotate {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}
.Casino {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.casino-widgets {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.casino-page-widget {
    cursor: pointer;
    overflow: hidden;
    width: calc(60%);
    height: 3.5rem;
    transition: transform .25s;
    border: 2px solid var(--color-accent);
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
    position: relative;
}

.casino-page-widget img {
    position: absolute;
    max-width: 90%;
    transition: all .25s;
    z-index: -1;
}

.casino-page-widget .icon {
    position: absolute;
    bottom: 0;
    left: .5rem;
    z-index: 1;
    height: 2.8rem;
    width: 4.5rem;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
    background-color: #fff;
}

.casino-page-widget .icon i {
    font-size: 2.25rem;
    color: var(--color-accent)
}

.casino-page-widget > .title {
    width: 100%;
    height: 100%;
    transition: all .1s;
    background-color: rgba(var(--rgb-accent-color), .35);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1.15rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Casino .tab-title {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.Casino .tab-title:first-child {
    margin: 0;
}

.casino-page-widget:hover > .title {
    background-color: rgba(var(--rgb-accent-color), .85);
} 

.casino-page-widget.shop img {
    width: 80%;
    height: auto;
}

.casino-page-widget.right-icon .icon {
    top: 0;
    right: .5rem;
    left: unset;
    border-radius: 0 0 1.5rem 1.5rem;
}

.casino-page-widget.rifles-background img {
    width: 70%;
    height: auto;
    transform: translateX(7rem) translateY(1rem) rotate(-15deg);
}

.casino-subtitle {
    width: 100%;
    text-align: center;
    margin-top: 2.5rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.casino-page {
    width: 100%;
    height: 100%;
    float: left;
    animation: opacity-fade .15s;
}
.casino-page-header {
    width: 100%;
    float: left;
    height: 3.5rem;
    background-color: var(--color-background-secondary);
    box-shadow: 0 2px 3px 0 var(--color-shadow);
}

.casino-page-header > .back-button {
    width: 3.5rem;
    height: 100%;
    float: left;
    margin: 0 .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.casino-page-header > .back-button:hover i {
    background-color: var(--color-hover);
}
.casino-page-header > .back-button i {
    font-size: 2.25rem;
    border-radius: 50%;
    transition: all .15s;
    padding: .25rem;
}
.casino-page-header > .title {
    height: 100%;
    display: flex;
    font-size: 1.5rem;
    align-items: center;
}

.casino-page-content {
    width: 100%;
    float: left;
    height: calc(100% - 3.5rem);
}
.MiddleTab {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    transition: all 200ms cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 0;
    left: -10rem;
    pointer-events: none;
}

.MiddleTab.active {
    left: 0;
    pointer-events: all;
    opacity: 1;
}


@media screen and (max-width: 800px) {
    .MiddleTab {
        transition: all 100ms cubic-bezier(0.33, 1, 0.68, 1);
        left: 0;
    }
}
.Statistics {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
}

.Statistics .statistics-title {
    width: 100%;
    float: left;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 550;
}

.Statistics .statistics-body {
    width: 100%;
    flex: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
}

.Statistics .statistics-table {
    width: calc(50% - .2rem);
    float: left;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: .75rem;
    padding: .5rem 1rem 1rem 1rem;
}

.Statistics .statistics-table .row {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    font-size: 1.25rem;
    align-items: center;
    padding: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.Statistics .statistics-table .row:first-child {
    padding-top: .25rem;
}

.Statistics .statistics-table .row:last-child {
    border: none;
    padding-bottom: 0;
}

.Statistics .statistics-table .column {
    width: 40%;
    display: inline-flex;
    font-size: 1.125rem;
    justify-content: center;
    align-items: center;
}

.Statistics .statistics-table .column:first-child {
    justify-content: left;
    width: 60%;
}
.MiddleContent {
    width: calc(100% - var(--actionbar-width));
    position: relative;
    height: 100%;
    float: left;
    margin-left: var(--actionbar-width);
}
/* cyrillic-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.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: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.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: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72.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: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jvWyNL4U.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: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jtGyNL4U.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jvGyNL4U.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3js2yNL4U.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jvmyNL4U.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: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jsGyN.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: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, 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-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.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-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.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-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.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: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.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: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v121/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
}

i.icon, i.uil {
    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";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

:root {
    --rgb-accent-color: 212, 0, 255;

    --color-main: #fff;
    --color-secondary: #b1b1b1;
    --color-accent: rgba(var(--rgb-accent-color), 1);
    --color-shadow: rgba(0,0,0, 0.25098);

    --color-background: #181920;
    --color-background-secondary: #252a34;
    --color-hover: #363d4c;
    --color-active: #2f3541;
    --color-border: #181920;
    --color-background-modal: rgba(37, 42, 52, 0.82);

    --header-height: 0rem;
    --actionbar-width: 5.5rem;

    --font-size: 1rem;
    --font-family: 'Roboto', sans-serif;

    --color-gold: 202, 172, 0;
    --color-covert: 234, 47, 47;
    --color-classified: 227, 52, 200;
    --color-restricted: 138, 43, 226;
    --color-milspec: 65, 105, 225;
    --color-industrial: 39, 155, 240;
    --color-base: 221, 221, 221;

    --color-stattrack: 229, 134, 78;
    --color-souvenir: 248, 215, 73;
    --color-fn: 0, 211, 255;
    --color-mw: 132, 178, 53;
    --color-ft: 223, 192, 74;
    --color-ww: 240, 134, 64;
    --color-bs: 235, 87, 87;

    --color-sapphire: 49, 213, 255;
    --color-ruby: 255, 51, 92;
    --color-emerald: 19, 255, 176;
    --color-black-pearl: 0, 11, 69;
} 

:root.new-design {
    --color-background: #1d181f;
    --color-background-secondary: #2e2734;
    --color-active: #393241;
    --color-hover: #43394c;
    --color-background-modal: rgb(46, 39, 52, 0.82);
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-main);
    font-family: var(--font-family);
    font-size: var(--font-size);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

* {
    box-sizing: border-box;
}

#root {
    width: 100%;
    height: 100%;
    float: left;
    background: var(--color-background);
    display: flex;
    justify-content: center;
}

#portals {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
}

.App {
    width: 60rem;
    position: relative;
    max-width: 100%;
    background-color: var(--color-background-secondary);
    height: 100%;
    float: left;
    box-shadow: 0 0 25px 0 rgba(var(--rgb-accent-color), .16);
    overflow: hidden;
    animation: app-shadow-animation 8s infinite;
}

@keyframes app-shadow-animation {
    0%, 100% {
        box-shadow: 0 0 10px 0 rgba(var(--rgb-accent-color), .16);
    } 50% {
        box-shadow: 0 0 36px 0 rgba(var(--rgb-accent-color), .26);
    }
}

.Main {
    width: 100%;
    float: left;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.Header {
    width: 100%;
    height: var(--header-height);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--color-background-secondary);
    box-shadow: 0 2px 5px 0 var(--color-shadow);
    padding: 0 1.5rem;
}

.Header > span {
    width: 100%;
    height: 100%;
    color: var(--color-main);
    font-size: 1.65rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.tab-title {
    width: 100%;
    float: left;
    text-transform: uppercase;
    padding: .75rem 1.5rem;
    font-size: 1.45rem;
}
.tab-title.mini {
    font-size: 1.15rem;
}

.tab-title > span {
    border-bottom: 2px solid var(--color-accent);
}

.custom-scroll {
    scrollbar-width: thin;
    overflow: hidden overlay !important;
    scrollbar-color: rgba(90, 90, 90, 0) transparent;
    transition: scrollbar-color 0.3s ease;

    -webkit-overflow-scrolling: touch;
}
.custom-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}
.custom-scroll::-webkit-scrollbar {
    width: 0.3rem;
    background-color: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.01);
}
.custom-scroll:hover,
.custom-scroll:focus,
.custom-scroll:focus-within {
    scrollbar-color: rgba(90, 90, 90, 0.45) transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(var(--rgb-accent-color), 0.25);
}

.tab-list {
    width: 100%;
    float: left;
    padding: .5rem 0;
    display: flex;
    justify-content: space-evenly;
}

.tab-list.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.tab-list > span {
    display: block;
    float: left;
    width: 40%;
    text-align: center;
    padding: .35rem;
    margin: 0 .5rem;
    font-size: 1.15rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all .2s;
    text-transform: uppercase;
}
.tab-list > span:hover {
    border-color: var(--color-active);
}
.tab-list > span.active {
    border-color: var(--color-accent);
    pointer-events: none;
    cursor: default;
}

.Modal.version-release-notes-modal .subtitle ul {
    padding-inline-start: 2rem;
}
.Modal.version-release-notes-modal .subtitle li {
    padding: .35rem 0;
    font-size: 1.15rem;
}
.Modal.version-release-notes-modal .subtitle {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

input[type="text"],
input[type="number"] {
    width: 100%;
    height: 100%;
    appearance: none;
    outline: 0;
    border: 1px solid var(--color-secondary);
    border-radius: 0;
    background-color: transparent;
    padding: .3rem .4rem;
    font-size: 1rem;
    font-weight: 550 !important;
    font: var(--font-family);
    color: #fff;
    transition: all .15s;
}

input[type="text"]:focus,
input[type="number"]:focus {
    border-color: var(--color-accent);
}

input.hidden {
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

a, .link {
    cursor: pointer;
    text-decoration: none;
    color: var(--color-accent);
}

.price-chunk {
    color: gold;
}

@keyframes opacity-fade {
    0% {
        opacity: 0;
    } 100% {
        opacity: 1;
    }
}

@media screen and (max-width: 800px) {
    :root {
        --header-height: 0px;
        --actionbar-height: 3.65rem;
    }
}

/*# sourceMappingURL=main.053323763e47d8ad3b2d.css.map*/