/* search stuff */
#searchContainer {
    font-size: 15px;
    position: fixed;
    z-index: 9;
    top: calc(50px + var(--mobileTopAnchorHeight));
    /*height: 90px;*/
    display: block;
    width: 100%;
    text-align: left;
    color: #CAC1C1;
    background-color: rgb(54, 54, 54);
    max-width: 1280px;
}

#itemSearchContainer {
    pointer-events: auto;
    opacity: 1;
    width: 94%;
    margin: 10px 3% 8px;
    transition: opacity 1s;
}

#itemSearchContainer.pageLoading1 {
    pointer-events: none;
}

#itemSearchContainer.pageLoading2 {
    opacity: .3;
}

.searchInfoWithin {
    display: none;
    position: absolute;
    font-size: 10px;
    top: 20px;
    right: 17px;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    color: black;
}

#itemSearch:focus + .searchInfoWithin {
    opacity: .5;
}

.ccpaContainerMobile{
    display:block;
    margin: 30px 0;
}

/* PRICE VERSION SELECTION */

#priceVersionContainerMobile {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    margin: 0;
    padding: 0 3%;
    transition: height .2s;
    box-shadow: 0 6px 10px -4px rgba(0,0,0,.35);
}

#collapsedIndicatorsContainer {
    display: none;
    transition: opacity 0.2s;
    opacity: 0;
}

.versionContainerMobileCollapsed #collapsedIndicatorsContainer, #collapsedIndicatorsContainerExp {
    margin: 0;
}

.priceVersionWrapper {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    margin: 0 0 15px 0 !important;
    
}

.versionContainerMobileCollapsed .priceVersionWrapper {
    display: none !important;
}


.priceVersionTitle {
    font-size: 15px;
    font-weight: lighter;
    display: inline-block;
    padding: 13px 0 8px;
    text-align: left;
    text-transform: uppercase;
    color: #CAC1C1;
}

.priceVersionSliderWrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

/* .sliderLabel{
    text-transform: uppercase;
    font-size: 12px;
    color: #CAC1C1;
}

.sliderlabel span{
    text-transform: uppercase;
    font-size: 10px;
    color: rgba(202,193,193,0.7);
} */


/* VERSION SLIDER STYLES */

/* TOP SLIDER */

/* The switch - the box around the slider */
.priceVariantSwitch {
    position: relative;
    display: inline-block;
    width: 270px;
    height: 34px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    /* border-style: solid; */
    border-width: 1px;
    border-radius: 2px;
    border-color: #c9f3e1;
}

/* Hide default HTML checkbox */
.priceVariantSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.priceVariantSlider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
}

.priceVariantSlider:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.priceVariantSlider:hover .labelRightVariant {
    color: rgba(0, 170, 255, 1) !important;
}

.priceVariantSlider:hover .labelLeftVariant {
    color: rgba(255, 184, 0, 1) !important;
}

.priceVariantSlider:before {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 128px;
    height: 26px;
    content: "";
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2px;
    background-color: rgba(10, 5, 0, 0.4);
    box-shadow: 0 0 2px #f3b421;
}

input:checked + .priceVariantSlider {
    /*background-color: rgba(32, 146, 238, 0.8);*/
}

input:focus + .priceVariantSlider {
    box-shadow: 0 0 0px #2196F3;
}

input:checked + .priceVariantSlider:before {
    -webkit-transform: translateX(133px);
    -ms-transform: translateX(133px);
    transform: translateX(133px);
    box-shadow: 0 0 2px #2196F3;
}

.labelLeftVariant {
    font-size: 12px;
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 43px;
    -webkit-transition: color .1s;
    transition: color .1s;
    text-transform: uppercase;
    color: rgba(255, 184, 0, 1);
}

.labelRightVariant {
    font-size: 12px;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 22px;
    -webkit-transition: color .1s;
    transition: color .1s;
    text-transform: uppercase;
    color: rgba(0, 170, 255, 0.8);
}

input:checked + .priceVariantSlider .labelLeftVariant {
    color: rgba(255, 184, 0, 0.8);
}

input:checked + .priceVariantSlider .labelRightVariant {
    color: rgba(0, 170, 255, 1);
}

/* BOTTOM SLIDER */

/* The switch - the box around the slider */
.priceVersionSwitch {
    position: relative;
    display: inline-block;
    width: 270px;
    height: 34px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    /* border-style: solid; */
    border-width: 1px;
    border-radius: 2px;
    border-color: #c9f3e1;
}

/* Hide default HTML checkbox */
.priceVersionSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.priceVersionSlider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .2s;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
}

.sliderDisabled {
    cursor: not-allowed !important;
}

.sliderDisabled .labelRightVersion {
    color: rgb(140, 140, 140);
}

.sliderDisabled .labelRightVariant {
    color: rgb(140, 140, 140);
}

.sliderDisabled:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.priceVersionSlider:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.priceVersionSlider:hover .labelRightVersion {
    color: rgba(0, 170, 255, 1) !important;
}

.priceVersionSlider:hover .labelLeftVersion {
    color: rgba(255, 184, 0, 1) !important;
}

.sliderDisabled:hover .labelRightVersion {
    color: rgb(140, 140, 140) !important;
}

.sliderDisabled:hover .labelRightVariant {
    color: rgb(140, 140, 140) !important;
}

.priceVersionSlider:before {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 128px;
    height: 26px;
    content: "";
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2px;
    background-color: rgba(10, 5, 0, 0.4);
    box-shadow: 0 0 2px #f3b421;
}

input:checked + .priceVersionSlider {
    /*background-color: rgba(32, 146, 238, 0.8);*/
}

input:focus + .priceVersionSlider {
    box-shadow: 0 0 0px #2196F3;
}

input:checked + .priceVersionSlider:before {
    -webkit-transform: translateX(133px);
    -ms-transform: translateX(133px);
    transform: translateX(133px);
    box-shadow: 0 0 2px #2196F3;
}
.labelLeftVersionContainer, .labelLeftVariantContainer {
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 5px;
    height: 24px;
    width: 126px;
}

.labelRightVersionContainer, .labelRightVariantContainer {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 5px;
    height: 24px;
    width: 126px;
}

.labelLeftVersion, .labelLeftVariant {
    text-align: center;
    font-size: 11px;
    position: absolute;
    z-index: 1;
    -webkit-transition: color .1s;
    transition: color .1s;
    text-transform: uppercase;
    color: rgba(255, 184, 0, 1);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 126px;
}

.labelRightVersion, .labelRightVariant {
    text-align: center;
    font-size: 11px;
    position: absolute;
    z-index: 1;
    -webkit-transition: color .1s;
    transition: color .1s;
    text-transform: uppercase;
    color: rgba(0, 170, 255, 0.8);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 126px;
}

input:checked + .priceVersionSlider .labelLeftVersion {
    color: rgba(255, 184, 0, 0.8);
}

input:checked + .priceVersionSlider .labelRightVersion {
    color: rgba(0, 170, 255, 1);
}

.infoTextVersions {
    font-size: 15px;
    font-weight: lighter;
    line-height: 20px;
    margin: 20px 0;
    padding: 0 10px 0 0;
    text-align: left;
    color: rgb(150, 150, 150);
}

.infoTextHighlighted {
    color: rgb(220, 220, 220) !important;
}

#infoExpandIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 0 10px;
}

#infoExpandIcon img {
    width: 20px;
    height: 20px;
    filter: saturate(0) invert(0.5);
}

#infoExpandOverlay {
    position: fixed;
    z-index: 100;
    top: 50px;
    left: 0;
    overflow-y: scroll;
    width: calc(100vw - 50px);
    height: calc(100vh - 50px);
    padding: 40px 30px 0 20px;
    transition: opacity .3s;
    opacity: 0 !important;
    background-color: rgba(0, 0, 0, 0.9);
}


#infoExpandOverlay.infoExpandOverlayShown {
    opacity: 1 !important;
}

/*non-crate overlay*/

#ncOverlayButton {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    background-color: rgba(255,255,255,.1);
    padding: 10px 25px;
    width: fit-content;
    margin: 50px auto;
    border-radius: 3px;
    box-shadow: 0 0 8px 1px rgba(255,255,255,.1);
    color: white;
}

#overlayButtonLabel {
    height: 18px;
    line-height: 18px;
    margin-right: 15px;
}

#overlayButtonIcon {
    height: 20px;
    width: 20px;
    filter: invert(1);
    opacity: .8;
}

#overlayButtonIcon img {
    height: 100%;
    width: 100%;
}

#ncExpandOverlay {
    position: fixed;
    z-index: 100;
    top: 50px;
    left: 0;
    overflow-y: scroll;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    padding: 0 20px;
    transition: opacity .3s;
    opacity: 0 !important;
    background-color: rgba(0, 0, 0, 0.9);
}

#ncExpandOverlay::-webkit-scrollbar {
    width: 5px;
}

#ncExpandOverlay.ncExpandOverlayShown {
    overflow-y: scroll;
    opacity: 1 !important;
}

#ncBlankSpaceTop {
    height: 30px;
    width: 100%;
}

#ncExpandNavbar {
    position: sticky;
    z-index: 10;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: calc(100% + 40px);
    /*max-width: 450px;*/
    margin: 15px 0 15px -20px;
    padding: 15px 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,.7);
    top: 0;
    box-shadow: 0 6px 10px -4px rgba(0,0,0,.35);
}

#ncExpandNavbar>div {
    height: 20px;
    width: 20px;
    margin: 0;
}

#ncExpandNavbar>div img {
    height: 100%;
    width: 100%;
}

#ncButtonBack img {
    display: none;
}

.ncInfoActive #ncButtonBack img {
    display: block;
}

#ncExpandNavbar div{
    filter: brightness(.7);
}

#ncExpandContent {
    display:none !important;
    position: absolute;
    width: calc(100% - 40px);
    max-width: 450px;
    transform: translateX(0);
    transition: transform .3s;
}

.ncInfoActive #ncExpandContent {
    transform: translateX(-100vw);
}

/*nc info*/

#ncInfoContent {
    z-index: 9;
    width: 100%;
    /*max-width: 450px;*/
    transform: translateX(100vw);
    transition: transform .3s;
    
    display: block;
    padding-bottom: 80px;
    text-align: left;
    line-height: 27px;
    font-size: 16px;
    color: rgb(180,180,180);
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#ncInfoContent::-webkit-scrollbar {
    display: none;  /* Chrome */
}

.ncInfoActive #ncInfoContent {
    transform: translateX(0);
}

#ncInfoContent span {
    text-align: left;
}

#ncInfoContent .highlighted {
    color: white;
}

#ncInfoContent .infoSubtitle {
    color: white;
    text-transform: uppercase;
    margin: 65px 0 25px 0;
}

.infoSubtitle:first-child {
    margin-top: 0 !important;
}

#ncInfoContent .infoImage {

}

#ncInfoContent .infoImageWrapper {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

#ncInfoContent .infoImageContainer {
    display: flex;
    flex-flow: column-reverse nowrap;
    justify-content: flex-end;
    height: 400px;
    margin-bottom: 25px;
}

#ncInfoContent .infoImageContainer .infoImage {
    width: 270px;
    margin: 0 30px 0 0;
}

#ncInfoContent .infoImageHorizontal {
    height: 235px;
    margin: 20px 0;
}

#ncInfoContent .infoImageHorizontal .infoImage {
    height: 235px;
    width: auto;
}

#ncInfoContent .infoImageLabel {
    font-style: italic;
    margin-bottom: 10px;
}

#ncInfoContent .inlineImg {
    height: 30px;
    margin-top: -12px;
    transform: translateY(9px);
    padding: 0;
    display: inline-block;
}

.paragraphSpace {
    width: 1px;
    height: 12px;
    margin: 0;
}

.bottomNavButton {
    margin: 50px 0;
    text-decoration: underline;
    cursor: pointer;
}

/* end nc info*/

#nonCrateTableContainer {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 15px 22px 15px;
    background-color: rgb(50,50,50);
}

#ncTitle {
    margin: 0 0 25px;
    font-size: 16px;
    text-align: left;
    color: white;
    font-weight: 400;
    display: block;
}

.ncItemContainer {
    display:flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: 100%;
}

.ncItemContainer:not(.ncUncommon) {
    margin-bottom: 20px;
}

.ncRow {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.ncRow div {
    font-size: 14px;
}

.subRow {
    font-size: 12px;
    line-height: 12px;
    opacity: .7 !important;
    text-align: left;
}

.ncLabel {
    text-align: left;
    white-space: nowrap;
}

.ncData {
    text-align: right;
    white-space: nowrap;
}

.ncExotic div {
    color: #c7bb77;
}

.ncImport div {
    color: #ed908e;
}

.ncVeryRare div {
    color: #b48eed;
}

.ncRare div {
    color: #8e9ded;
}

.ncUncommon div {
    color: #8ecfed;
}

#ncInfoTrigger {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px 15px 0;
}

#ncInfoIcon {
    height: 18px;
    width: 18px;
    filter: saturate(0) invert(.5);
}

#ncInfoIcon img {
    height: 100%;
    width: 100%;
}

#ncInfoHint {
    font-size: 12px;
    line-height: 18px;
    color: rgb(150, 150, 150);
    margin-left: 9px;
}

/*info overlays*/

.infoTitleMobile {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0;
    text-transform: uppercase;
    color: white;
}

.infoTitleFirst {
    margin-top: 40px;
}

.infoTextMobile {
    font-size: 15px;
    font-weight: lighter;
    line-height: 22px;
    margin: 0 0 25px 0;
    text-transform: none;
    color: rgb(200, 200, 200);
}

.infoTextHighlightedMobile {
    text-transform: uppercase;
    color: white;
}

/* blank scpace */
#blankSpace {
    top: 0;
    height: calc(240px + var(--mobileTopAnchorHeight));
    margin: 0;
    transition: height .2s;
}

#blankSpace.versionContainerMobileCollapsed{
    height: calc(15px + var(--mobileTopAnchorHeight));
}

#newsContainer {
    display: block;
    /* position: relative; */
    width: calc(100% - 20px);
    margin: 0 auto;
    margin-top: 20px;
    padding: 0 10px;
}

#newsContainer a img {
    width: 90%;
    margin: 0 auto;
}

#newsHeader {
    font-size: 18px;
    color: #E5DCE5;
}

/* ad container */

#advertisement {
    background-color: transparent;
    width: 100%;
    height: 270px;
    margin: 50px 0 20px 0;
    padding: 5px 0;
}

.report-link {
    z-index: 1 !important;
}


/* trending stuff */
#trendingItemsContainer, #ncBarContainer {
    position: static;
    display: block;
    width: calc(100% - 24px);
    /*noinspection CssReplaceWithShorthandSafely*/
    margin: 0;
    /*noinspection CssReplaceWithShorthandSafely*/
    margin-top: 20px;
    padding: 10px 12px;
    transition: margin-top .2s;
}

#trendingItemsContainer.hidden, #ncBarContainer.hidden {
    display: none;
}

/*
#trendingItemsContainer.versionContainerMobileCollapsed {
    margin-top: 50px;
}
*/

#trendingItemsHeader, #ncBarHeader {
    font-size: 16px;
    color: #E5DCE5;
}

#trendingItems, #ncBarItems {
    position: static;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    margin: 0;
    margin-top: 5px;
    margin-bottom: 8px;
    padding: 0;
    padding-bottom: 5px;
}

#ncBarItems {
    justify-content: center;
    margin-bottom: 0;
    height: 70px;
}

#trendingItems div, #ncBarItems div {
    display: inline-block;
    overflow-y: hidden;
    flex-grow: 1;
    width: 70px;
    height: 70px;
    padding: 0;
}

#ncBarItems div {
    max-width: 70px;
    max-height: 70px;
    position: relative;
    font-weight: 700;
    margin: 0 2px;
}

#trendingItems div img, #ncBarItems div img {
    width: 100%;
    margin: 0;
    padding: 0;
}

.ncItem {
    background: url("/img/spritesheets/nc_ppm.png");
    background-size: auto 70px;
}

::-webkit-scrollbar-track {
    border-radius: 4px;
}

::-webkit-scrollbar {
    position: absolute;
    height: 6px;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
}


/* prices stuff */
#itemPricesContainer {
    font-size: 15px;
    position: static;
    display: block;
    width: 94%;
    margin: 0 3%;
    padding-bottom: 10px;
    text-align: center;
}

.priceTableContainer {
    display: block;
    width: 100%;
    margin: 0;
}

.tableHeader {
    margin: 50px 20px 20px;
    text-align: center !important;
}

.itemPicsContainer {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: calc(100% - 10px);
    padding: 0 5px;
    text-align: center;
    color: white;
}

.item {
    position: relative;
    display: block;
    flex-grow: 0;
    width: 90px;
    height: 90px;
    margin: 2px;
    border-radius: 5px;
    background-color: black;
}

.itemName {
    box-sizing: border-box;
    padding: 2px;
    font-size: 12px;
    position: absolute;
    bottom: 20%;
    left: 0;
    display: block;
    width: 100%;
    transform: translateY(20%);
    text-align: center;
    background-color: rgba(54, 54, 54, .6);
    word-break: break-word;
}

.itemName span.blueprintIsWorthless {
    color: rgb(130, 130, 130);
}

.priceRange.blueprintIsWorthless {
    color: rgb(100, 100, 100);
}

.itemPriceUnpainted {
    font-size: 1.2em;
    position: relative;
    left: 0;
    display: block;
    text-align: center;
    filter: grayscale(.6);
}

.longName {
    font-size: 10px;
}

.itemImg {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-size: 100%;
}

.emptyCell {
    height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.uncommon {
    color: #cbf0fe !important;
}

.rare {
    color: #c7d5f7 !important;
}

.veryrare {
    color: #d8cbfe !important;
}

.import {
    color: #f4bdba !important;
}

.exotic {
    color: #f7f1c4 !important;
}

.blackmarket {
    color: #ff99ff !important;
}

.limited {
    color: #fcc9b0 !important;
}


/* ____________________________________________________________________________________________ */
/* ____________________________________________________________________________________________ */

/* settings dropdown */

/* price settings dropdown */

/*.selectionDropdownContainer {
    font-size: 12px;
    line-height: 30px;
    position: relative;
    display: block;
    width: 270px;
    cursor: pointer;
    color: rgb(180, 180, 180);
    background-color: rgba(0, 0, 0, 0.2);
    text-align: left;
    margin: 5px 0;
} */


.settingsField {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    /*padding-left: 8px;*/
}

.settingsDropdownContent {
    position: absolute;
    z-index: 20;
    display: none;
    box-sizing: border-box;
    width: 100%;
    height: fit-content;
    min-width: 180px;
    max-height: calc(90vh - 310px);
    /*margin-left: -8px;*/
    padding: 5px 0 5px 0;
    background-color: #1e1e1e;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    right: 0px;
    overflow-y: scroll;
    cursor: default;
}

.dropdownExpanded .settingsDropdownContent {
    display: block;
}

.settingsDropdownContent div {
    display: block;
    padding: 0px 10px;
    text-decoration: none;
    color: rgb(220, 220, 220);
    cursor: pointer;
}

.settingsOptionContainer {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: flex-start;
    height: 25px;
    padding: 5px 8px !important;
}

.settingsOptionContainer:first-child {
    margin-top: 10px;
}

.settingsOptionIcon, .settingsIcon {
    background: url('/img/spritesheets/pricesettings.png');
    background-size: 80px auto;
    height: 20px;
    width: 20px;
    margin: 2px 7px 0 0;
    padding: 0 !important;
}

.settingsIcon {
    margin: 5px 8px 0 0;
    background-position-x: 0;
    opacity: .8;
}

.settingsOptionLabel {
    line-height: 25px;
    padding: 0 !important;
}

/* end settings dropdown */

/* dropdown filter styles */

.selectionsField {
    font-size: 12px;
    font-weight: 400;
    line-height: 30px;
    cursor: pointer;
    transition: background-color .15s;
    color: rgb(180, 180, 180);
}

#selectionDropdownFlexHelper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0 0 10px 0;
    max-width: 1000px;
}

.selectionDropdownContainer {
    margin-top: 10px;
    font-size: 12px;
    line-height: 30px;
    position: relative;
    display: inline-block;
    width: 270px;
    box-sizing: border-box;
    padding-left: 8px;
    cursor: pointer;
    color: rgb(180, 180, 180);
    background-color: rgba(0, 0, 0, 0.2);
}

.selectionDropdownContainer.dropdownExpanded {
    color: rgb(220, 220, 220);
    background-color: rgba(0, 0, 0, 0.4);
}

.selectionDropdownContainer.filterTitleHighlighted {
    color: rgb(220, 220, 220);
    background-color: rgba(0, 0, 0, 0.4);
}

.selectionDropdownContainer.dropdownExpanded .filterLabel{
    color: rgb(220, 220, 220);
}

.selectionDropdownContainer.filterTitleHighlighted .filterLabel{
    color: rgb(220, 220, 220);
}

.selectionDropdownContainer.dropdownExpanded .selectionDropdownContent {
    display: block;
}

.selectionDropdownContainer.dropdownExpanded .rarityDropdownContent {
    display: block;
}

.selectionDropdownContainer.dropdownExpanded .typeDropdownContent {
    display: block;
}

.selectionDropdownContent {
    position: absolute;
    z-index: 1;
    display: none;
    box-sizing: border-box;
    width: 100%;
    max-height: calc(100vh - 384px);
    margin-left: -8px;
    padding: 5px 0;
    background-color: #1e1e1e;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* note for future maintenance:
.rarityDropdownContent is only needed because of unequal width rounding of the 3 dropdown menues (%-based).
only difference to .selectionDropdownContent is 1px width, all .rarityDropdownContent selectors should be removed if total width changes and width rounding is equal again.
*/
.rarityDropdownContent {
    position: absolute;
    z-index: 1;
    display: none;
    width: 100%;
    max-height: calc(100vh - 355px);
    margin-left: -8px;
    padding: 5px 0;
    background-color: #1e1e1e;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.typeDropdownContent {
    position: absolute;
    z-index: 1;
    display: none;
    width: 100%;
    max-height: calc(100vh - 354px);
    overflow-y: scroll;
    margin-left: -8px;
    padding: 5px 0;
    background-color: #1e1e1e;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/*
.selectionDropdownContent:hover .selectionDropdownContainer {
    color: rgb(220, 220, 220);
    background-color: rgba(0, 0, 0, 0.4);
}

.rarityDropdownContent:hover .selectionDropdownContainer {
    color: rgb(220, 220, 220);
    background-color: rgba(0, 0, 0, 0.4);
}*/


.selectionDropdownContent a {
    display: block;
    padding: 7px 10px;
    text-decoration: none;
    color: rgb(220, 220, 220);
    line-height: 16px;
}

.rarityDropdownContent a {
    display: block;
    padding: 0px 10px;
    text-decoration: none;
    color: rgb(220, 220, 220);
}

.typeDropdownContent a {
    display: block;
    padding: 0px 10px;
    text-decoration: none;
    color: rgb(220, 220, 220);
}

.selectionDropdownContent .anchorContainerCentering:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.selectionDropdownContent .anchorContainerCentering:hover a {
    color: white;
}

.rarityDropdownContent a:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.typeDropdownContent a:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.crateDropdownCategoryContainer > div:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

#selectionDropdownContentCrates {
    right: 0px;
    overflow-y: scroll;
    padding-bottom: 25px;
    padding-left: 9px;
    cursor: default;
    max-height: calc(100vh - 420px);
}

#selectionDropdownContentCratesHelper {
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
    justify-content: space-between;
}

.crateDropdownCategoryContainer {
    width: 180px;
    padding: 0;
    
}

.crateDropdownCategoryTitle {
    font-size: 11px;
    line-height: 20px;
    padding: 20px 0px 9px 10px;
    cursor: default !important;
    text-transform: uppercase;
    color: rgb(140, 140, 140);
}

.crateDropdownCategoryTitle:hover {
    color: rgb(140, 140, 140) !important;
    background-color: transparent !important;
}

.crateDropdownItemContainer {
    cursor: pointer;
    display:flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    height: fit-content;
}

.crateDropdownItemContainer div {
    display: block;
    
}

.miniCrateSpritesheet {
    width: 25px;
    height: 25px;
    margin: auto;
}

.miniCrateSpritesheetBlank {
    width: 25px;
    height: 25px;
    margin: auto;
}

.customCrateSprite {
    /*width: 20px;*/
    /*height: 20px;*/
}

.crateDropdownItemText{
    font-size:12px;
    line-height:16px;
    padding:7px 0;
    width: 130px;
}

.rarityDropdownItemContainer {
    cursor: pointer;
}

.rarityDropdownItemContainer:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.rarityDropdownItemContainer div {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0px 10px -8px 10px;
}

.typeDropdownItemContainer {
    cursor: pointer;
}

.typeDropdownItemContainer:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.typeDropdownItemContainer div {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0px 10px -8px 10px;
}


.selectionIconContainer {
    position: absolute;
    width: 25px;
    height: 25px;
    margin: -1px 0 0 -2px;
}

#priceVersionContainerMobile .selectionIconPassive {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity .1s;
    opacity: 0.8;
}

#priceVersionContainerMobile .selectionIconActive {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity .1s;
    opacity: 0;
}

#rarityIcon {
    width: 100%;
    height: 100%;
}

.raritySpritesheet, #rarityIcon {
    background: url(/img/spritesheets/stars.png);
    background-size: 75px auto;
}

#typeIcon {
    width: 100%;
    height: 100%;
}

#typeIconPassive {
    transition: transform .2s, opacity .2s !important;
}

.dropdownExpanded #typeIconPassive {
    transform: rotate(90deg);
    opacity: 1;
}

.typeSpritesheet, #typeIcon {
    background: url(/img/spritesheets/types.png);
    background-size: 100px auto;
}

.sortingIconContainer {
    position: relative;
    float: left;
    width: 25px;
    height: 25px;
    margin: 2px 5px 0 0;
}

/*.clearFilterContainerPassive{
    display:none;
    position:relative;
    float:right;
    height:20px;
    width:20px;
    margin:5px 5px 0 0;

}*/
#itemRarityLabel, #itemTypeLabel {
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    overflow-x: visible;
    width: auto;
    height: 24px;
    margin: 3px 0 3px 27px;
}

#itemCrateLabel, #baseItemLabel {
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    height: 24px;
    margin: 3px 3px 3px 27px;
}

.clearFilterContainerActive {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    width: 20px;
    height: 20px;
    margin: 5px 5px 0 0;
    opacity: 0.85;
    background-color: rgba(0, 0, 0, 0.3);
    
}

.clearFilterContainerActive img {
    width: 100%;
}

/*.clearFilterContainerPassive img{
    width:100%;
}*/
.sortingLabel {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    max-width: 140px;
    height: 30px;
    margin-left: 27px;
    white-space: nowrap;
}

.sortingIcon {
    position: absolute;
    width: 100%;
    transition: opacity .1s, transform .1s;
    transform: rotate(0deg);
    opacity: 0.6;
    filter: invert(1);
}

.selectionDropdownContainer:hover .sortingIcon {
    transform: rotate(-180deg);
    opacity: 1;
}

.selectionDropdownContent:hover .sortingIcon {
    transform: rotate(-180deg);
    opacity: 1;
}

.rarityDropdownContent:hover .sortingIcon {
    transform: rotate(-180deg);
    opacity: 1;
}

.typeDropdownContent:hover .sortingIcon {
    transform: rotate(-180deg);
    opacity: 1;
}

.baseItemCategoryContainer > div:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

#selectionDropdownContentBaseItems {
    right: 0;
    overflow-y: scroll;
    padding-bottom: 25px;
    padding-left: 9px;
    cursor: default;
}

#selectionDropdownContentBaseItemsHelper {
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
}

.baseItemCategoryContainer {
    width: 180px;
    padding: 0;
}

.baseItemDropdownItemContainer {
    cursor: pointer;
    display:flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    height: fit-content;
    align-content:center;
}

.baseItemDropdownItemContainer div {
    display: block;
    
}

.baseItemDropdownItemContainer {
    cursor: pointer;
    display:flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    height: fit-content;
    align-items: center;
}

.baseItemDropdownItemContainer div {
    display: block;
    
}


.baseItemSpritesheet {
    width: 25px;
    height: 25px;
    min-width: 25px;
    overflow: hidden;
    margin: 2px 12px 2px 12px;
    box-sizing: border-box;
    
}

.baseItemDropdownItemName {
    line-height: 13px;
    padding: 7px 0;
}

#baseItemFilter .selectionIconPassive {
    opacity: 1;
    background: url(/img/icons/baseitemIcon.png);
    width: 100%;
    height: 100%;
    background-size: 50px auto;
    background-position: 0 0;
    transition: opacity .3s;
}


#baseItemIconActive {
    background-image: url(https://img.rl.insider.gg/spritesheets/allItemsUnpainted/2.jpg);
    background-size: 500px auto;
    opacity: 0;
}


#baseItemIcon {
    background: url(/img/icons/baseitemIcon.png);
    width: 100%;
    height: 100%;
    background-size: 50px auto;
    background-position: 25px 0;
}

.baseItemCategoryContainer {
    width: 180px;
    padding: 0;
}

.baseItemDropdownItemContainer {
    cursor: pointer;
    display:flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    height: fit-content;
}

.baseItemDropdownItemContainer div {
    display: block;
    
}

.baseItemSpritesheet {
    width: 25px;
    height: 25px;
    margin: 2px 12px 2px 12px;
}

/* ____________________________________________________________________________________________ */
/* ____________________________________________________________________________________________ */

/* price expanded */
#pricesExpandedContainer {
    position: fixed;
    z-index: 9001;
    display: none;
    transition-duration: .25s;
}

#pricesExpandVersionInfoContainer {
    position: absolute;
    top: 63px;
    left: 31px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    opacity: 1 !important;
}

#expandedVariantInfo {
    font-size: 10px;
    line-height: 18px;
    height: 18px;
    margin-right: 8px;
    padding: 2px 10px;
    text-transform: uppercase;
    color: rgba(255, 184, 0, 1);
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 2px #f3b421;
}

#expandedVersionInfo {
    font-size: 10px;
    line-height: 18px;
    height: 18px;
    margin-right: 8px;
    padding: 2px 10px;
    text-transform: uppercase;
    color: rgba(255, 184, 0, 1);
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 2px #f3b421;
}

.expandedOption2 {
    color: rgba(0, 170, 255, 1) !important;
    box-shadow: 0 0 2px #2196F3 !important;
}

#pricesExpandedBackground {
    position: absolute;
    z-index: 13;
    top: -20px;
    left: 0;
    display: block;
    width: 100vw;
    height: 105vh;
    background-color: rgba(0, 0, 0, .8);
}

#pricesExpandedContainerInside {
    position: absolute;
    z-index: 13;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

#pricesExpandedContentContainer {
    position: relative;
    z-index: 14;
    left: 8vw;
    display: block;
    width: calc(84vw - 20px);
    margin: 0 0 20px 0;
    padding: 10px;
}



#pricesExpandedAdContainer {
    position: relative;
    left: calc((100vw - 320px) / 2);
    display: block;
    width: 320px;
    margin: 0;
    padding: 0;
}


#pricesExpandedHeaderContainer {
    line-height: 50px;
    width: 100%;
    min-height: 50px;
    background-color: white;
}

#pricesExpandedItemName {
    position: absolute;
    z-index: 15;
    right: 15%;
    left: 15%;
    display: block !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: black;
}

#pricesExpandedX {
    position: absolute;
    z-index: 16;
    right: 15px;
    display: block !important;
    height: 32px;
    margin-top: 8px;
    color: black;
}

.pricesExpandedTable {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    background-color: white;
    column-count: 1;
}

.pricesExpandedTable tr {
    font-size: 15px;
    line-height: 24px;
    color: black;
    border: 1px solid black;
}

.colorName {
    font-size: .9em;
    padding-left: 10px;
    text-align: left;
}

.priceRange {
    font-weight: bold;
    padding-right: 10px;
    text-align: right;
}

.detailsIcon {
    height: 14px;
}

@media only screen and (orientation: landscape) {
    /* #searchContainer{
        height: 40px;
    } */
    #itemSearchContainer {
        height: 20px;
        margin-top: 9px;
    }
    
    #pricesExpandedHeaderContainer {
        line-height: 30px;
        min-height: 30px;
    }
    
    #pricesExpandedX {
        height: 24px;
        margin-top: 3px;
    }
    
    #pricesExpandedTable tr {
        font-size: 13px;
        line-height: 14px;
    }
    
    .detailsIcon {
        height: 10px;
    }
}

@media only screen and (orientation: landscape) and (min-height: 360px) {
    #pricesExpandedHeaderContainer {
        line-height: 36px;
        min-height: 36px;
    }
    
    #pricesExpandedX {
        height: 28px;
        margin-top: 4px;
    }
    
    #pricesExpandedTable tr {
        font-size: 14px;
        line-height: 16px;
    }
    
    .detailsIcon {
        height: 12px;
    }
}

.mobilePriceLabelDefault {
    background: #efefef;
}

#pricesExpandedDefault {
    background: #DDDDDD;
}

.mobilePriceLabelBlack {
    color: white;
    background: #000;
}

#pricesExpandedBlack {
    color: black;
    background: #999999;
}

.mobilePriceLabelWhite {
    background: #fff;
}

#pricesExpandedWhite {
    background: #fff;
}

.mobilePriceLabelGrey {
    background: #999999;
}

#pricesExpandedGrey {
    background: #d9d9d9;
}

.mobilePriceLabelCrimson {
    background: #ff6363;
}

#pricesExpandedCrimson {
    background: #e6b7b7;
}

.mobilePriceLabelPink {
    background: #f89eff;
}

#pricesExpandedPink {
    background: #e7d7e6;
}

.mobilePriceLabelCobalt {
    background: #506ec9;
}

#pricesExpandedCobalt {
    background: #bbcfe4;
}

.mobilePriceLabelSkyBlue {
    background: #63ffff;
}

#pricesExpandedSkyBlue {
    background: #dfeef1;
}

.mobilePriceLabelBurntSienna {
    background: #b46f45;
}

#pricesExpandedBurntSienna {
    background: #e1d0c5;
}

.mobilePriceLabelSaffron {
    background: #ffff63;
}

#pricesExpandedSaffron {
    background: #feffe4;
}

.mobilePriceLabelLime {
    background: #63ff63;
}

#pricesExpandedLime {
    background: #dfffe0;
}

.mobilePriceLabelForestGreen {
    background: #457337;
}

#pricesExpandedForestGreen {
    background: #a3e39c;
}

.mobilePriceLabelOrange {
    background: #ffaa63;
}

#pricesExpandedOrange {
    background: #f5e7ce;
}

.mobilePriceLabelPurple {
    background: #a862fc;
}

#pricesExpandedPurple {
    background: #bdb7cf;
}

.mobilePriceLabelGold {
    background: #fcd364;
}

#pricesExpandedGold {
    background: #ebd8ad;
}

@media (min-width: 601px) {
    
    #partnershipImage1 {
        width: 550px;
        margin-top: 5px;
    }
    
    #partnershipImage2 {
        display: none;
    }
    
    #priceVersionContainerMobile {
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    
    .selectionDropdownContainer {
        width: calc(25% - 5px);
    }
    
    .selectionDropdownContainer.settings {
        min-width: 240px;
    }
    
    .rarityDropdownContent, .typeDropdownContent, #selectionDropdownContentCrates {
        max-height: calc(100vh - 192px);
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
    #ncInfoContent .infoImageWrapper {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
    
    #ncExpandContent {
        margin-left: calc((100% - 450px) / 2);
    }
    
    .priceVersionWrapper {
        margin: 0 !important;
    }
    
    #trendingItemsContainer {
        margin: 20px 0 0 0;
    }
    
    #blankSpace{
        height: calc(80px + var(--mobileTopAnchorHeight));
    }
}

#versionExpandCollapseIcon{
    display:none;
}

@media (min-width: 800px) {
    #searchContainer {
        top: 50px;
    }
    
    #blankSpace {
        height: 80px;
    }
    
    #blankSpace.versionContainerMobileCollapsed{
        height: 15px;
    }
}

@media (max-width: 600px) {
    #partnershipImage1 {
        display: none;
    }
    
    #partnershipImage2 {
        width: 320px;
        margin-top: 5px;
    }
    
    #selectionDropdownFlexHelper {
        flex-flow: column nowrap;
        justify-content: flex-start;
        margin: 0;
    }
    
    #versionExpandCollapseIcon {
        display: flex;
        justify-content: center;
        opacity: 1 !important;
        margin: 0;
        height: 20px;
        margin-top: 20px;
    }
    
    #versionExpandCollapseIcon img {
        width: 35px;
        height: 20px;
        transition: filter .2s, transform .2s, margin .2s;
        transform: rotate(180deg);
        filter: invert(0.6);
    }
    
    #priceVersionContainerMobile.versionContainerMobileCollapsed {
        height: 30px;
        flex-flow: row nowrap;
        justify-content: flex-start;
        padding: 0 calc(3% + -10px) 0 calc(3% + 1px);
    }
    
    #versionExpandCollapseIcon.versionContainerMobileCollapsed img {
        margin-top: -4px;
        transform: rotate(0deg);
    }
    
    
    #priceVersionContainerMobile div {
        opacity: 1;
    }
    
    #priceVersionContainerMobile.versionContainerMobileCollapsed div {
        margin: 5px 0;
        opacity: 0;
    }
    
    #priceVersionContainerMobile.versionContainerMobileCollapsed .selectionDropdownContainer {
        display:none;
    }
    
    .versionContainerMobileCollapsed #collapsedIndicatorsContainer, #collapsedIndicatorsContainerExp {
        display: flex;
        
        flex-flow: row nowrap;
        justify-content: flex-start;
        margin: 0;
        
        opacity: 1 !important;
    }
    

    
    .versionContainerMobileCollapsed #collapsedIndicatorsContainer div, #collapsedIndicatorsContainerExp div {
        margin: 0 8px 0 0;
    }
    
    #versionExpandCollapseIcon.versionContainerMobileCollapsed {
        height: 11px !important;
    }
    
    #priceVersionContainerMobile.versionContainerMobileCollapsed #collapsedIndicatorsContainer div {
        opacity: 1;
    }
    
    #priceVersionContainerMobile.versionContainerMobileCollapsed #collapsedIndicatorsContainer {
        margin: 0;
        opacity: 1;
    }
    
    
    .collapsedSelectionContainer {
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        justify-content: start;
        font-size: 10px;
        line-height: 18px;
        height: 18px;
        margin-right: 10px;
        padding: 2px 10px;
        text-transform: uppercase;
        color: rgba(255, 184, 0, 1);
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 2px #f3b421;
    }
    
    #olsHandlerFilters {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 !important;
    }
    
    .collapsedOption2 {
        color: rgba(0, 170, 255, 1);
        box-shadow: 0 0 2px #2196F3;
    }
    
    .filtersActive {
        color: rgba(0, 170, 255, 1);
        box-shadow: 0 0 2px #2196F3;
    }
    
    .collapsedIndicators {
        display: none;
        margin: 0 -3px 0 8px !important;
        max-height: 20px;
    }
    
    .collapsedIndicators.filterActive {
        display: block;
    }
    
    #priceSettingIndicator, #priceSettingIndicatorExpanded {
        display: block;
        width: 15px;
        height: 15px;
        background: url('/img/spritesheets/pricesettings_colored.png');
        background-size: 60px auto;
        filter: hue-rotate(-2deg);
        margin-left: 7px !important;
    }
    
    #priceSettingIndicator.mainSettingActive, #priceSettingIndicatorExpanded.mainSettingActive {
        display: none !important;
    }
    
    #rarityIndicator {
        height: 10px;
        width: 10px;
        border-radius: 5px;
        filter: saturate(2) brightness(0.75);
    }
    
    #typeIndicator {
        height: 15px;
        width: 15px;
        background: url("/img/spritesheets/types.png");
        background-size: 60px auto;
        filter: sepia(1) brightness(0.5) saturate(10) hue-rotate(-225deg) contrast(2);
    }
    
    #collectionIndicator {
        width: 15px;
        height: 15px;
        /* note: background URL is set in GPP because its auto-versioned */
        background-size: 75px auto;
    }
    
    #collectionIndicator.blue {
        filter: sepia(1) brightness(0.56) saturate(10) hue-rotate(-195deg) contrast(4);
    }
    
    #expandedVariantInfo.collapsedOption2, #expandedVersionInfo.collapsedOption2 {
        color: rgba(0, 170, 255, 1);
        box-shadow: 0 0 2px #2196F3;
    }
    
}
@media (min-width: 370px) {
    .pricesExpandedTable tr {
        font-size: 18px;
    }
}


@media (max-width: 400px) {
    #versionExpandCollapseIcon.versionContainerMobileCollapsed.versionExpandCollapseIconNeedsShifting {
        margin-left: 5vh;
    }
}

@media (max-height: 600px) {
    #pricesExpandedContainerInside {
        top: calc((600px - 100vh) / 2);
    }
}

[name=IL_IN_ARTICLE] + div.IL_BASE {
    margin-top: 20px !important;
}

/* mobile skeleton */

.priceTableContainer.skeletonClass .itemImg {
    animation-name: loadingmobilecontent;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background-image: url('https://cdn.discordapp.com/attachments/661272352004243463/836621655719411732/rarity_overlay_spritesheet.png');
    background-position: 90px 0px; /* obviously change depending on rarity */
    background-size: initial;
}

.priceTableContainer.skeletonClass .itemName {
    padding: 0;
    opacity: 0;
}

/* animation */
@keyframes loadingmobilecontent {
    0% {
        filter: saturate(.4);
        opacity: .75;
        -webkit-filter: saturate(.4);
    }
    50% {
        filter: saturate(.7);
        opacity: 1;
        -webkit-filter: saturate(.7);
    }
    100% {
        filter: saturate(.4);
        opacity: .75;
        -webkit-filter: saturate(.4);
    }
}

/* transition */
.item .itemImg, .item .itemName {
    transition: padding .4s, opacity .4s;
}

/* trending skeleton */
#trendingItems.skeletonClass a {
    pointer-events: none;
}

.trendingItem {
    transition: opacity 1s;
    opacity: 1;
}

.trendingItem.skeletonClass {
    opacity: 0;
}

#trendingItems a {
    background-color: rgb(35, 35, 35);
    height: 70px;
    width: 70px;
    margin: 0 2px;
}

.hidden {
    display: none !important;
}

#selectionDropdownContentBaseItemsHelper {
    flex-flow: column nowrap;
}

.baseItemCategoryContainer {
    width: calc(100% - 20px);
}

