:root {
    --filterBackgroundScaling: 1;
    --filterScaling: 1;
    --test-var: 2;
}


#contentContainer {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
}

#contentWrapper {
    margin: 20px 0;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

#headerPartnership {
    width: 320px;
    height: 50px;
    padding: 0;
    margin: 50px auto 50px auto;
    /*background-color: cornflowerblue;*/
}

#headerPartnership div {
    margin: 0 auto !important;
}

#columnRight .vm-placement {
    display:flex;
    justify-content: space-around;
    align-items: center;
    margin: 30px 0;
    height:250px;
}

#searchContainer {
    width: 70%;
    margin: 50px auto 0 auto;
    padding: 0 10px;
    transition-duration: .2s;
    z-index: 1;
}

#itemSearchContainer {
    position: relative;
    display: inline-block;
    width: 96%;
    height: 35px;
    margin: 15px 0;
    border-radius: 3px;
}

.searchInfoWithin {
    display: none;
}

.searchInfoBottom {
    display: none;
}

#itemSearchErrorMsg {
    display: block;
    float: left;
    opacity: 0;
    margin: 0;
    line-height: 30px;
    color: #AB3D3D;
    font-weight: bold;
    padding: 0 2px;
    transition-duration: .3s;
}

.searchButton {
    display: inline-block;
    margin: 20px 0;
    padding: 0 10px;
    line-height: 35px;
    border-radius: 3px;
    border: 1px solid #CAC1C1;
    cursor: pointer;
    width: fit-content;
    width: -moz-fit-content;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#trendingBar {
    display:flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin: 0 0 110px 0;
}

#trendingItems {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    box-sizing: border-box;
    width: calc(100% - 40px);
    height: 90px;
    margin: -5px auto 0 auto;
    padding: 10px 0 0;
    overflow-x: scroll;
    opacity: 0;
}

#trendingItems::-webkit-scrollbar {
    position: absolute;
    height: 4px;
}

.trendingItem {
    width: 80px;
    height: 80px;
    margin: 0 5px;
    background-color: rgb(80, 80, 80);
}

#trendingTitle {
    display: none;
}

#filters {

}

#filtersPlaceholder {

}

#itemsContainer {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: calc(100% - 40px);
    margin: 20px;
}

.typesGroup {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin: 18px 0 0;
}

.typesGroupTitle {
    width: 100%;
    margin: 20px 0 15px 0;
    text-align: left !important;
    font-size: 17px;
    padding: 0;
    color: white;
    font-weight: bold;
}

.typesGroupTitle:first-child {
    margin-top: 0;
}

.typesGroupItems {
    width: calc(100% + 16px);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: 0 0 0 -8px;
}

.item {
    display: block;
    width: 80px;
    height: 80px;
    margin: 8px;
    background-color: black;
    cursor: pointer;
    flex-grow: 0;
    border-radius: 5px;
    overflow: visible;
    position: relative;
}

.itemImg {
    background-color: black;
    background-size: initial;
    background-position: 0 0;
    border-radius: 4px;
}

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

.item:hover {
    filter: brightness(1.2);
}

.decalGroup {

}

.decalDropdown {
    display: none;
    background-color: #1e1e1e;
    position: fixed;
    width: 70vw;
    height: fit-content;
    max-height: 70vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px;
    text-align: left;
    z-index: 2;
    overflow-y: scroll;
    transition: opacity .2s;
}

#decalDropdownBackground {
    position: fixed;
    display: none;
    opacity: 0;
    background-color: rgb(0,0,0);
    height: 100vh;
    width: 100vw;
    z-index: 1;
    transition: opacity .2s;
}

#closeDropdownMobile {
    display: block;
    position: relative;
}

#closeDropdownMobile img {
    filter: invert(1) brightness(.8);
    height: 25px;
    float: right;
    margin: 20px 0 0 0;
}

.dropdownSection {
    margin: 20px 0;
}

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

.sectionItems {

}

.sectionItemContainer {
    display: flex;
    flex-flow: row nowrap;
}

.sectionItemContainer:hover {
    background-color: rgba(0,0,0,.5);
}

.sectionItemContainer:hover .sectionItem {
    color: white;
}

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

.sectionItem {
    font-weight: normal;
    cursor: pointer;
    word-break: break-word;
    font-size: 12px;
    line-height: 16px;
    padding: 7px 0;
    width: 130px;
    color: rgb(220,220,220)
}

#platformSelect {
    font-size: 13px;
    margin: 20px 0;
    padding: 0 10px;
    display: inline-block;
    height: 35px;
    width: 96%;
    background-color: white;
    color: rgb(120, 120, 120) !important;
    border: 1px solid rgb(200, 200, 200) !important;
    border-radius: 3px !important;
}

#platformSelect:focus {
    outline: none;
}

select {
    color: #CAC1C1 !important;
    border-radius: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

option {
    font-style: normal !important;
    padding: 2px;
    color: rgb(100, 100, 100) !important;
    border-radius: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#itemListContainer {
    position: relative;
    display: none;
    opacity: 0;
    clear: both;
    width: calc(100% - 40px);
    /* height: 100px; */
    transition-duration: .3s;
    background-color: rgba(0,0,0,0.6);
    padding: 20px;
}

#itemChoices {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
}

#itemChoices::-webkit-scrollbar {
    position: absolute;
    left: 5px;
    height: 8px !important;
}

.itemChoice {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0 4px 5px 0;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.searchTip {
    color: rgb(170,170,170) !important;
}

.lastChoice {
    margin: 0 !important;
}

.itemChoiceName {
    display: none;
    font-size: 12px;
}

.typesGroup .itemImg {
    width: 80px;
    height: 80px;
    background-size: 1600px auto;
}

.carMiniImg, .baseItemSpritesheet {
    background-size: 500px auto;
}

.common .itemName {
    color: rgb(180, 180, 180) !important;
}

.uncommon .itemName {
    color: #cbf0fe !important;
}

.rare .itemName {
    color: #c7d5f7 !important;
}

.veryrare .itemName {
    color: #d8cbfe !important;
}

.import .itemName {
    color: #f4bdba !important;
}

.exotic .itemName {
    color: #f7f1c4 !important;
}

.blackmarket .itemName {
    color: #ff99ff !important;
}

.limited .itemName {
    color: #fcc9b0 !important;
}

.premium .itemName {
    color: #afe0af !important;
}

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

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

#itemTypeAll div {
    background-position: 0 0;
}

#itemTypeNew div {
    background-position: calc(-44px * var(--filterScaling)) 0;
}

#newTabHot {
    background-position: calc(-88px * var(--filterScaling)) 0 !important;
}

#itemType9 div {
    background-position: calc(-132px * var(--filterScaling)) 0;
}

#itemType2 div {
    background-position: 0 calc(-44px * var(--filterScaling));
}

#itemType5 div {
    background-position: calc(-44px * var(--filterScaling)) calc(-44px * var(--filterScaling));
}

#itemType10 div {
    background-position: calc(-88px * var(--filterScaling)) calc(-44px * var(--filterScaling));
}

#itemType1 div {
    background-position: calc(-132px * var(--filterScaling)) calc(-44px * var(--filterScaling));
}

#itemType3 div {
    background-position: 0 calc(-88px * var(--filterScaling));
}

#itemType4 div {
    background-position: calc(-44px * var(--filterScaling)) calc(-88px * var(--filterScaling));
}

#itemType6 div {
    background-position: calc(-88px * var(--filterScaling)) calc(-88px * var(--filterScaling));
}

#itemType7 div {
    background-position: calc(-132px * var(--filterScaling)) calc(-88px * var(--filterScaling));
}

#itemType8 div {
    background-position: 0 calc(-132px * var(--filterScaling));
}

#itemType12 div {
    background-position: calc(-44px * var(--filterScaling)) calc(-132px * var(--filterScaling));
}

#itemType11 div {
    background-position: calc(-88px * var(--filterScaling)) calc(-132px * var(--filterScaling));
}

#itemType13 div {
    background-position: calc(-132px * var(--filterScaling)) calc(-132px * var(--filterScaling));
}

/* FILTER BAR CSS COPIED FROM PRICES */


#searchFiltersPaintsBar {
    z-index: 1;
    /*width: 949px;*/
    width: calc(100% - 40px);
    margin: 30px 20px 5px 20px;
}

#filtersContainer {
    position: static;
    z-index: 9;
    display: block;
    width: calc(100% - 20px);
    height: 30px;
    margin: -10px 0 20px 0;
    padding: 10px 10px;
    text-align: left;
}

#searchBarContainer {
    position: relative;
    float: left;
    width: 35%;
    height: 30px;
}

#clearSearch {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
}

#clearSearch img {
    width: 100%;
}

input {
    -webkit-appearance: none;
}

#searchBar {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    cursor: text;
    transition: background-color .15s;
    transform: translateY(-50%);
    text-align: left;
    color: white;
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
}

#searchBar:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

input#searchBar:focus {
    background-color: rgba(0, 0, 0, 0.4);
}


#selectionsContainer {
    display: flex;
    float: right;
    justify-content: space-between;
    width: 60%;
    height: 30px;
}

#searchInfoText {
    display: none;
    opacity: 0;
    white-space: nowrap;
    position: absolute;
    top: 36px;
    left: 12px;
    font-size: 14px;
    color: rgb(130, 130, 130);
}

.searchInfoExpandable {
    padding: 10px 10px 32px 10px !important;
}

.searchInfoExpandable #searchInfoText {
    display: block;
    opacity: 1;
}

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

#searchBar:focus + .searchInfoWithin {
    opacity: .3;
}

/* dropdowns for filters */

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

.selectionDropdownContainer {
    font-size: 12px;
    line-height: 30px;
    position: relative;
    display: inline-block;
    width: 31%;
    padding-left: 8px;
    cursor: pointer;
    color: rgb(180, 180, 180);
    background-color: rgba(0, 0, 0, 0.2);
}

.selectionDropdownContent {
    position: absolute;
    z-index: 1;
    display: none;
    min-width: 180px;
    max-height: calc(100vh - 700px);
    margin-left: -8px;
    padding: 5px 0;
    background-color: #1e1e1e;
    box-shadow: 0 8px 16px 0 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;
    min-width: 181px;
    width: calc(165px * var(--filterScaling));
    max-height: calc(90vh - 485px);
    margin-left: -8px;
    padding: 5px 0;
    background-color: #1e1e1e;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}


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

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



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

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

#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;
}

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

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

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

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

.crateDropdownItemContainer 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;
    
}

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

.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;
}

.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 div {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 10px -8px 10px;
}


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

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

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

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

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



#baseItemIconActive {
    background-size: 500px auto;
    opacity: 0;
}


.raritySpritesheet, #rarityIcon {
    background: url(/img/spritesheets/stars.png);
    background-size: 75px 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 {
    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: 0;
    right: 0;
    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);
}



/* filter dropdown hovers only for PC version */
@media (min-width: 1008px) {
    .selectionDropdownContainer:hover {
        color: rgb(220, 220, 220);
        background-color: rgba(0, 0, 0, 0.4);
    }
    
    .selectionDropdownContainer:hover .selectionDropdownContent {
        display: block;
    }
    
    .selectionDropdownContainer:hover .rarityDropdownContent {
        display: block;
    }
    
    .selectionDropdownContainer:hover {
        color: rgb(220, 220, 220);
        background-color: rgba(0, 0, 0, 0.4);
    }
    
    .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 .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);
    }
    
    .crateDropdownCategoryContainer > div:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .baseItemCategoryContainer > div:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .selectionDropdownContainer:hover .selectionIconActive {
        opacity: 1;
    }
    
    .selectionDropdownContainer:hover .selectionIconPassive {
        opacity: 0;
    }
    
    .selectionDropdownContent:hover .selectionIconActive {
        opacity: 1;
    }
    
    .selectionDropdownContent:hover .selectionIconPassive {
        opacity: 0;
    }
    
    .rarityDropdownContent:hover .selectionIconActive {
        opacity: 1;
    }
    
    .rarityDropdownContent:hover .selectionIconPassive {
        opacity: 0;
    }
    
    .crateDropdownCategoryTitle:hover {
        color: rgb(140, 140, 140) !important;
        background-color: transparent !important;
    }
    
    .rarityDropdownItemContainer:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    #baseItemFilter:hover .selectionIconPassive {
        background-position: 25px 0;
    }
    
    .selectionDropdownContainer:hover .sortingIcon {
        transform: rotate(-180deg);
        opacity: 1;
    }
    
    .selectionDropdownContent:hover .sortingIcon {
        transform: rotate(-180deg);
        opacity: 1;
    }
    
    .rarityDropdownContent:hover .sortingIcon {
        transform: rotate(-180deg);
        opacity: 1;
    }
}

/* end filter dropdowns */

/* price settings dropdown */

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

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

.settingsDropdownContainer:hover .settingsIcon {
    filter: brightness(1.5);
}

.settingsDropdownContainer:hover .settingsDropdownContent {
    display: block;
}

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

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

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

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

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

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

.settingsOptionContainer:hover .settingsOptionLabel {
    color: white;
}

.settingsOptionContainer:hover .settingsOptionIcon {
    filter: brightness(1.5);
}

.settingsOptionIcon, .settingsIcon {
    background: url('/img/spritesheets/pricesettings.png');
    background-size: 80px auto;
    height: 20px;
    width: 20px;
    margin: 2px 8px 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 */

/* type tabs etc */

#typeTabsContainer {
    display: flex;
    align-items: center;
    justify-content: left;
    width: calc(100% - 15px);
    margin-top: -20px;
    padding: 5px 10px;
    
}

.typeTabs {
    width: calc(100% / 15);
    margin-right: 5px;
    padding: 6.6px;
    cursor: pointer;
    transition: background-color .1s;
    background-color: rgba(0, 0, 0, 0.18);
}

.typeTabsText {
    height: calc(45px * var(--filterScaling));
}

.typeTabsText div{
    position: absolute;
    background: none !important;
    padding: 0 !important;
    line-height: 44px;
    color: rgb(180,180,180);
    text-transform: uppercase;
    font-weight: 900;
    font-family: "arial black", sans-serif;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.typeTabsText div#newTabHot{
    color: red;
}

.typeTabs:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.typeTabs:hover.typeTabsText div{
    color: white;
}

.typeTabs:hover #newTabHot {
    color: rgb(245, 40, 40);
    filter: saturate(1);
}

.typeTabs div {
    width: 100%;
    padding-top: 100%;
    background: url(/img/spritesheets/types.png);
    background-size: calc(176px * var(--filterScaling)) auto;
    filter: invert(0.5);
    -webkit-filter: invert(0.5);
}

.typeTabs:hover div {
    filter: invert(0.1);
    -webkit-filter: invert(0.1);
}

.typeTabs.typeTabsSelected {
    margin-top: -12px;
    padding-top: 19px;
    background-color: rgb(50, 50, 50);
}

.typeTabs.typeTabsText.typeTabsSelected div{
    color: rgb(235,235,235);
    transform: translate(-50%, -37%);
}

.typeTabs.typeTabsText.typeTabsSelected div#newTabHot{
    color: rgb(235, 64, 52);
    filter: saturate(1);
}

.typeTabs.typeTabsSelected div {
    filter: invert(0);
    -webkit-filter: invert(0);
}

.typeTabs #newTabHot {
    filter: saturate(0.65);
    -webkit-filter: saturate(0.65);
}

.typeTabs:hover #newTabHot {
    filter: saturate(0.8);
    -webkit-filter: saturate(0.8);
}

.typeTabs.typeTabsSelected #newTabHot {
    filter: saturate(1);
    -webkit-filter: saturate(1);
}

#topTableTitle {
    font-size: 17px;
    font-weight: 700;
    margin: 32px 0 0 1px;
    text-align: left;
    color: white;
}

#itemSearchContainer {
    width: 100%;
    margin: 0;
}

#filtersContainer h1 {
    margin: 15px 0;
    text-align: left;
}

#filtersContainer p {
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
}

#newItemText {
    line-height: 20px;
    display: block;
    margin-top: 10px;
    color: #CAC1C1;
}

#newItem {
    float: left;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
    padding: 0;
    border: 1px solid #CAC1C1;
    -webkit-appearance: none;
    appearance: none;
}

#newItem:checked {
    outline: none;
    background-color: rgba(172, 86, 86, 0.69);
}

#newItem:focus {
    outline: none;
}

#clearFilters {
    margin: 20px 0;
    cursor: pointer;
    color: #AB3D3D;
}

.filterDropdown {
    font-size: 11px;
    top: 0;
    display: block;
    width: 100%;
    height: 20px;
    margin: 10px 0;
    padding: 0 10px;
    color: rgb(120, 120, 120) !important;
    border: 2px solid rgb(200, 200, 200) !important;
    border-radius: 2px !important;
    background-color: white;
    filter: brightness(90%);
}

.filterDropdown:focus {
    outline: none;
}

.notDefault {
    filter: none !important;
}

select {
    color: #CAC1C1 !important;
    border-radius: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

option {
    font-style: normal !important;
    padding: 2px;
    color: rgb(100, 100, 100) !important;
    border-radius: 0 !important;
}

#noItemsFound {
    font-size: 17px;
    font-weight: 700;
    display: none;
    margin-top: 60px;
    margin-left: 322px;
    text-align: left;
    color: white;
}

/* end types tabs etc */


/* END FILTER BAR COPY */





@media (min-width: 1008px) {
    
    .decalDropdown {
        position: absolute;
        top: 100%;
        width: 270px;
        max-height: 50vh;
        transform: unset;
    }
    
    
    .decalGroup:hover .decalDropdown {
        display: block !important;
        opacity: 1 !important;
    }
    
    .decalDropdown:hover {
        display: block !important;
        opacity: 1 !important;
    }
    
    #closeDropdownMobile {
        display: none;
    }
    
    .selectionDropdownContainer.types {
        display: none;
    }
    
    #contentWrapper {
        margin: 60px 0;
    }
    
    #headerPartnership {
        width: 100%;
        height: 90px;
    }
    
    #searchContainer {
        position: relative;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        height: 35px;
        margin: 0 0 20px 0;
        /*padding-top: 40vh;*/
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: space-around;
    }
    
    #searchWrapper{
        width: 49.5%;
    }
    
    #searchBarWrapper{
        display: flex;
        justify-content: space-between;
    }
    
    #itemSearchContainer {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 33px;
        margin: 0;
        background-color: white;
    }
    
    #itemSearch {
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 10px;
        cursor: text;
        transition: background-color .15s;
        transform: translateY(-50%);
        text-align: left;
        color: black;
        border: none;
        background-color: rgb(230, 230, 230);
    }
    
    #itemSearch:hover {
        background-color: white;
    }
    
    input#itemSearch:focus {
        background-color: white;
    }
    
    .searchInfoWithin {
        position: absolute;
        font-size: 10px;
        top: 11px;
        right: 11px;
        text-transform: uppercase;
        opacity: 0;
        pointer-events: none;
        color: black;
    }
    
    .searchInfoBottom {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 45px);
    }
    
    #itemSearch:focus + .searchInfoWithin {
        opacity: .4;
    }
    
    #itemChoices {
        max-height: none;
        overflow: visible;
    }
    
    .searchButton {
        font-size: 12px;
        display: inline-block;
        height: 33px;
        margin: 0 0 0 20px;
        padding: 0 10px;
        white-space: nowrap;
        background-color: rgba(0, 0, 0, .2);
    }
    
    .searchButton:hover {
        background-color: rgba(0,0,0,.4);
    }
    
    #platformSelect {
        font-size: 12px;
        display: inline-block;
        width: auto;
        height: 35px;
        margin: 0 20px 0 0;
    }
    
    #itemListContainer {
        display: none;
        clear: both;
        width: calc(100% - 10px);
        /* height: 100px; */
        margin: 10px 0;
        opacity: 1;
        background-color: rgba(30,30,30,1);
        padding: 10px 0 10px 10px;
    }
    
    #itemChoiceText {
        line-height: 22px;
        color: rgb(220,220,220);
        text-align: left;
    }
    
    .itemChoice {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin: 0 9px 5px 0;
    }
    
    .itemChoiceName {
        display: none;
        font-size: 12px;
    }
    
    .trendingRow {
    
    }
    
    .trendingItem {
        display: inline-block;
        width: 64px;
        height: 64px;
        margin: 2px;
        background-color: black;
        padding: 0;
        border: none;
    }
    
    .trendingItem img {
        height: 100%;
        width: 100%;
    }
}

@media (min-width: 1250px) {
    #searchContainer {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1008px) and (min-height: 1030px) {
    #headerPartnership {
        height: 90px;
    }
}

@media (max-width: 1007px) {
    
    #headerPartnership {
        display: none;
    }
    
    #typeTabsContainer {
        display: none;
    }
    
    #trendingBar {
        display: none;
    }
    
    #searchBarContainer {
        display: none;
    }
    
    #selectionsContainer {
        flex-flow: column nowrap;
        float: left;
        height: fit-content;
    }
    
    .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: 800px;
    }
    
    .selectionDropdownContainer {
        margin-top: 10px;
        font-size: 12px;
        line-height: 30px;
        position: relative;
        display: inline-block;
        width: 272px;
        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 .typeDropdownContent {
        display: block;
    }
    
    .selectionDropdownContainer.dropdownExpanded .rarityDropdownContent {
        display: block;
    }
    
    .selectionDropdownContent {
        position: absolute;
        z-index: 1;
        display: none;
        box-sizing: border-box;
        width: 100%;
        max-height: calc(100vh - 480px);
        margin-left: -8px;
        padding: 5px 0;
        background-color: #1e1e1e;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    #selectionDropdownContentCrates {
        max-height: calc(100vh - 500px);
    }
    
    .typeDropdownContent {
        position: absolute;
        z-index: 1;
        display: none;
        overflow-y: scroll;
        width: 100%;
        max-height: calc(100vh - 400px);
        margin-left: -8px;
        padding: 5px 0;
        background-color: #1e1e1e;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .rarityDropdownContent {
        max-height: calc(100vh - 440px);
        width: 100% !important;
    }
    
    
    .selectionDropdownContent a {
        display: block;
        padding: 7px 10px;
        text-decoration: none;
        color: rgb(220, 220, 220);
        line-height: 16px;
    }
    
    .typeDropdownContent a {
        display: block;
        padding: 0 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;
    }
    
    .typeDropdownContent a:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .crateDropdownCategoryContainer {
        width: 180px;
        padding: 0;
    }
    
    .baseItemCategoryContainer {
        width: 180px;
        padding: 0;
    }
    
    .crateDropdownCategoryTitle {
        font-size: 11px;
        line-height: 20px;
        padding: 20px 0 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;
        
    }
    
    .baseItemDropdownItemContainer {
        cursor: pointer;
        display:flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        height: fit-content;
    }
    
    .baseItemDropdownItemContainer div {
        display: block;
        
    }
    
    .miniCrateSpritesheet {
        width: 25px;
        height: 25px;
        margin: auto;
    }
    
    .baseItemSpritesheet {
        width: 25px;
        height: 25px;
        margin: 2px 12px 2px 12px;
    }
    
    .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: 0 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: 0 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;
    }
    
    
    #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;
    }
    
    #itemTypeLabel {
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        overflow-x: visible;
        width: auto;
        height: 24px;
        margin: 3px 0 3px 27px;
    }
    
    .clearFilterContainerActive {
        position: absolute;
        top: 0;
        right: 0;
        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%;
    }
    
    .sortingLabel {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto;
        max-width: 140px;
        height: 30px;
        margin-left: 27px;
        white-space: nowrap;
    }
    
    #filtersContainer {
        background-color: transparent;
        padding: 0;
    }
    
    /* mobile dropdown css */
    
    #selectionDropdownContentBaseItemsHelper {
        flex-flow: column nowrap;
    }
    
    .baseItemCategoryContainer {
        width: calc(100% - 20px);
    }
    
    #selectionDropdownContentCratesHelper {
        flex-flow: column nowrap;
    }
    
}

.typesGroup.hidden, .item.hidden {
    display: none;
}

.typeTabs div {
    transition: opacity .3s;
    opacity: 1;
}

.typeTabsHidden .typeTabs div {
    opacity: 0;
}