@media (max-width: 1250px) {
    #menu {
        display: none;
    }
    
    #contentContainer {
        display: none;
    }
    
    #subHeader {
        display: none;
    }
    
    #bodyBackground {
        display: none;
    }
    
    #mobileRedirectHandler {
        display: block;
        width: 100vw;
        height: 100vh;
        background-color: rgb(50, 50, 50);
    }
}

@media (min-width: 1250px) {
    
    #mobileRedirectHandler {
        display: none;
    }
    
    #subHeader {
        background-color: rgb(50,50,50) !important;
        box-shadow: none !important;
    }
    
    #priceHoverFullnameContainer {
        display: none;
        position: absolute;
        width: fit-content;
        height: 18px;
        line-height: 18px;
        margin: 0;
        padding: 0px 4.5px;
        background-color: #dddddd;
        z-index: 3000;
        /* border:0.5px solid rgb(0,0,0); */
        border: none;
        pointer-events: none;
        color: black;
        font-weight: bold;
        font-size: 12px;
        transition: width 1s, -webkit-mask-image 1s;
    }
    
    #fullNameOverlay {
        position: absolute;
        display: none;
        height: 20px;
        width: 100px;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 9002;
    }
    
    #priceHoverContainer {
        position: absolute;
        z-index: 3000;
        display: none;
        width: 470px;
        pointer-events: none;
        border: 1px solid rgb(25, 25, 25);
        background-color: rgba(30, 30, 30, .96);
    }
    
    #itemHoverContainer {
        position:absolute;
        z-index: 3000;
        display: none;
        width: fit-content;
        font-size: 16px;
        line-height: 40px;
        font-weight: bold;
        margin: 0;
        padding: 0 12px;
        text-align: left;
        color: #fefefe;
        background-color: rgba(30, 30, 30, .96);
        left: 0;
        top: 0;
    }
    
    #priceHoverPricesTable {
        position: relative;
        display: block;
        width: 372px;
        margin: 0 0 0 9px;
        opacity: .9;
        border: none;
        background-color: transparent;
    }
    
    #priceHoverPricesTable tr {
        height: 20px;
    }
    
    #priceHoverPricesTable td {
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.7);
    }
    
    #priceHoverRowEnglishName {
    }
    
    #priceHoverMatrix, #priceHoverSecondaryInfo {
        box-sizing: border-box;
        width: calc(100% - 18px);
        margin: 0 0 5px 9px;
        /*background-color: rgba(255,255,255,.05);*/
        table-layout: fixed;
        border-collapse: collapse;
        color: rgb(160, 160, 160);
        border: none;
    }
    
    #priceHoverSecondaryInfo {
        margin-bottom: 25px;
    }
    
    /* horizontal and vertical headers */
    .matrixRow:first-child, #priceHoverMatrix td:first-child {
    
    }
    
    .matrixRow {
    
    }
    
    .matrixRow td {
        width: 20%;
        font-size: 12px;
    }
    
    .matrixRow td:first-child {
        width: 40%;
    }
    
    .secondaryRow {
    
    }
    
    .secondaryRow td {
        font-size: 12px;
        text-align: left;
    }
    
    .secondaryLabel {
        width: 100%;
        padding-left: 29px;
    }
    
    .priceHoverTableLabel {
        width: 162px;
        max-width: 162px;
        text-align: left;
    }
    
    .priceHoverTableData {
        overflow-x: visible;
        width: 200px;
        max-width: 200px;
        text-align: right;
    }
    
    .emptyRow {
        height: 6px !important;
    }
    
    .pfPrice {
    
    }
    
    .activePlatform div, .activePlatform td{
        color: white !important;
    }
    
    .activePlatform img{
        filter: brightness(1) !important;
    }

    .pfFlexHelper {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }
    
    .pfIcon {
        display: inline-block;
        float: left;
        height: 20px;
        width: 20px;
        margin: 10px 0;
    }
    
    .pfIcon img{
        height: 100%;
        width: 100%;
        filter: brightness(.6);
    }
    
    .pfLabel {
        display: none;
        margin-left: 7px;
        line-height: 20px;
    }
    
    .hoverSettingsFlexHelper {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        height:20px;
        margin-left: 2px;
    }
    
    .hoverSettingsLabel {
        margin-left: 7px;
        line-height: 20px;
        text-align: left;
        width: 115px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .hoverSettingsIcon {
        margin: 0 1px 1px 0;
        height: 18px;
        width: 18px;
        background: url('/img/spritesheets/pricesettings.png');
        background-size: 72px auto;
        display: inline-block;
    }
    
    #priceHoverGraphicsContainer {
        position:relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin: 10px;
    }
    
    #priceHoverImage {
        position: relative;
        display: block;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: black;
        filter: contrast(115%) saturate(110%);
        -webkit-filter: contrast(115%) saturate(110%);
    }
    
    .anchorContainerCentering{
        min-height: 30px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    
    #priceHoverOverlay {
        position: absolute;
        display: block;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-image: url(/img/spritesheets/colorcorners.png);
        background-position-x: 0;
        background-size: 1500px 100px;
    }
    
    #priceHoverGraph {
        position: relative;
        display: block;
        width: 335px;
        height: 100px;
        border: 1px solid black;
        background-color: rgb(50,50,50);
    }
    
    h3 {
        font-size: 16px;
        line-height: 25px;
        position: absolute;
        display: block;
        margin: 0;
        padding: 0;
        text-align: left;
        color: #fefefe;
    }
    
    #priceHoverItemName {
        position: relative;
        margin-top: 5px;
        margin-left: 10px;
    }
    
    #priceHoverKeyPrice {
        top: 5px;
        right: 10px;
    }

    #ATFContainer {
        height: 250px;
        width: 970px;
        margin: 10px auto -10px;
        /*transition: height 1s ease;*/
    }

    #contentFlexer {

    }

    #sidebar {
        position: absolute;
        z-index: 10;
        top: 390px;
        display: flex;
        flex-direction: column;
    }
    
    #searchFiltersPaintsBar {
        position: absolute;
        z-index: 1;
        width: 949px;
        margin-top: -12px;
        margin-left: 321px;
        background: #20252d;
    }
    
    #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: 30%;
        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: 0px;
        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: 618px;
        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: 140px;
        padding-left: 8px;
        cursor: pointer;
        color: rgb(180, 180, 180);
        background-color: rgba(0, 0, 0, 0.2);
    }
    
    .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 {
        position: absolute;
        z-index: 1;
        display: none;
        min-width: 180px;
        max-height: calc(90vh - 315px);
        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;
        min-width: 181px;
        max-height: calc(90vh - 315px);
        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);
    }
    
    .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);
    }
    
    #selectionDropdownContentCrates {
        right: 0px;
        overflow-y: scroll;
        padding-bottom: 25px;
        padding-left: 9px;
        cursor: default;
    }
    
    #selectionDropdownContentCratesHelper {
        display: flex;
        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;
    }
    
    
    .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%;
    }
    
    .raritySpritesheet, #rarityIcon {
        background: url(/img/spritesheets/stars.png);
        background-size: 75px auto;
    }
    
    .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;
    }
    
    .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: 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;
    }
    
    .carMiniImg, .baseItemSpritesheet {
        background-image: url(https://img.rl.insider.gg/spritesheets/allItemsUnpainted/2.jpg);
        background-size: 500px auto;
    }
    
    .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-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;
    }
    
    #baseItemFilter:hover .selectionIconPassive {
        background-position: 25px 0;
    }
    
    #baseItemIconActive {
        background-image: url(https://img.rl.insider.gg/spritesheets/allItemsUnpainted/2.jpg);
        background-size: 500px auto;
        opacity: 0;
    }
    
    /* 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;
        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: hidden;
        cursor: default;
    }
    
    .settingsDropdownContent div {
        padding: 0px 10px;
        text-decoration: none;
        color: rgb(220, 220, 220);
        cursor: pointer;
    }
    
    .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 */
    
    /* volatility dropdowns */
    
    
    .volatilityField {
        font-size: 12px;
        font-weight: 400;
        line-height: 30px;
        cursor: pointer;
        transition: background-color .15s;
        color: rgb(180, 180, 180);
    }
    
    .volatilityDropdownContainer {
        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;
    }
    
    .volatilityDropdownContainer:hover {
        color: rgb(220, 220, 220);
        background-color: rgba(0, 0, 0, 0.4);
    }
    
    .volatilityDropdownContainer:hover .volatilityDropdownContent {
        display: block;
    }
    
    .volatilityDropdownContent {
        position: absolute;
        z-index: 1;
        display: none;
        min-width: 180px;
        max-height: calc(90vh - 310px);
        /*margin-left: -8px;*/
        padding: 5px 0;
        background-color: #1e1e1e;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }
    
    .volatilityDropdownContent a {
        display: block;
        padding: 0px 10px;
        text-decoration: none;
        color: rgb(220, 220, 220);
    }
    
    
    .volatilityDropdownContent a:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .volatilityDropdownContent a:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .volatilityInfoContainer{
        /* height: 100px; */
        /* width: calc(100% - 136px); */
        padding: 20px 10px 0 10px;
        /* display: none; */
    }
    
    .volatilityDropdownCategoryContainer > div:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    #volatilityDropdownContentCrates {
        right: 0px;
        overflow-y: scroll;
        padding-bottom: 25px;
        padding-left: 9px;
        cursor: default;
    }
    
    #volatilityDropdownContentCratesHelper {
        display: flex;
        align-content: flex-start;
        justify-content: space-between;
    }
    
    .volatilityDropdownCategoryContainer {
        width: 128px;
        padding: 0;
    }
    
    .volatilityDropdownCategoryTitle {
        font-size: 11px;
        padding: 15px 0px 6px 10px;
        cursor: default !important;
        text-transform: uppercase;
        color: rgb(140, 140, 140);
    }
    
    .volatilityDropdownCategoryTitle:hover {
        font-size: 11px;
        padding: 15px 0px 6px 10px;
        text-transform: uppercase;
        color: rgb(140, 140, 140) !important;
        background-color: transparent !important;
    }
    
    .volatilityDropdownItemContainer {
        cursor: pointer;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        height: 38px;
        align-items: center;
    }
    
    .volatilityDropdownItemContainer div {
        margin: 0 0 1px 7px;
        vertical-align: middle;
    }
    
    .volatilityOptionImgContainer{
        display: inline-block;
        width: 25px;
        height: 25px;
    }
    
    .volatilityOptionText{
        font-size: 12px;
        line-height: 14px;
    }
    
    .volatilityOptionImgContainer img{
        height:100%;
        filter: invert(0.65);
    }
    
    .volatilityIcon {
        position: relative;
        float: left;
        width: 25px;
        height: 25px;
        margin: 2px 5px 0 5px;
        transition: opacity .1s, transform .1s;
        transform: rotate(0deg);
        background-image: url(/img/volatility.png);
        background-size: 50px 50px;
        filter: invert(1) opacity(0.6);
    }
    
    .volatilityDropdownContainer:hover .volatilityIcon {
        background-position-y: 25px;
    }
    
    .volatilityDropdownContainer .volatilityIcon.enabled {
        background-position-x: 25px;
        filter: none;
    }
    
    #itemVolatilityLabel {
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        overflow-x: visible;
        width: auto;
        height: 24px;
        margin: 3px 0 3px 27px;
    }

    .volatilityLabel {
        width: auto;
        margin-left: 27px;
    }
    
    /* end volatility dropdowns */
    
    #typeTabsContainer {
        display: flex;
        align-items: center;
        justify-content: left;
        width: calc(100% - 15px);
        margin-top: -20px;
        padding: 5px 10px;
        
    }
    
    .typeTabs {
        width: 44px;
        height: 44px;
        margin-right: 5px;
        padding: 6.6px;
        cursor: pointer;
        transition: background-color .1s;
        background-color: rgba(0, 0, 0, 0.18);
    }
    
    .typeTabsText div{
        background: none !important;
        line-height: 44px;
        color: rgb(180,180,180);
        text-transform: uppercase;
        font-weight: 900;
        font-family: "arial black", sans-serif;
    }
    
    .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%;
        height: 100%;
        background: url(/img/spritesheets/types.png);
        background-size: 176px auto;
        filter: invert(0.5);
        -webkit-filter: invert(0.5);
    }
    
    .typeTabs:hover div {
        filter: invert(0.1);
        -webkit-filter: invert(0.1);
    }
    
    .typeTabs.typeTabsSelected {
        width: 50px;
        height: 50px;
        margin-top: -6px;
        margin-right: 2px;
        margin-left: -3px;
        background-color: rgb(50, 50, 50);
    }
    
    .typeTabs.typeTabsText.typeTabsSelected div{
        line-height: 50px;
        color: rgb(235,235,235);
    }
    
    .typeTabs.typeTabsText.typeTabsSelected div#newTabHot{
        color: rgb(235, 64, 52);
        filter: saturate(1);
    }
    
    .typeTabs.typeTabsSelected div {
        background-size: 200px auto;
        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;
        margin-right: 5px;
        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;
        margin-left: 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 {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0px !important;
        color: #CAC1C1 !important;
    }
    
    option {
        font-style: normal !important;
        padding: 2px;
        color: rgb(100, 100, 100) !important;
        border-radius: 0px !important;
    }
    
    #noItemsFound {
        font-size: 17px;
        font-weight: 700;
        display: none;
        margin-top: 60px;
        margin-left: 322px;
        text-align: left;
        color: white;
    }
    
    #ppDisclaimer {
        font-size: 13px;
        line-height: 20px;
        margin-top: 60px;
        margin-bottom: 100px;
        margin-left: 322px;
        text-align: left;
        color: rgb(200, 200, 200);
    }
    
    #ppDisclaimer a {
        line-height: 2px;
        text-decoration: underline;
        color: rgb(160, 160, 160);
    }
    
    #ppDisclaimer p {
        margin: 0 0;
    }
    
    #ppDisclaimer div {
        margin-top: 15px;
    }
    
    .upperCase {
        text-transform: uppercase;
    }
    
    #partnershipContainer {
        font-size: 12px;
        font-weight: 600;
        display: block;
        overflow-y: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    
    #partnershipContainer::-webkit-scrollbar {
        position: absolute;
        width: 4px !important;
        display: none;
    }
    
    #partnershipContainer>div {
        min-height: 600px;
        text-align: center;
        min-width: 300px;
        width: 300px;
        position: relative;
        align-items: flex-start !important;
    }
    
    #ads_ppDesktopBottomLeaderboard {
        min-height: 90px;
        height: 90px;
        width: calc(100% - 322px);
        min-width: 728px;
        overflow: hidden;
    }
    
    #blankSpace {
        height: 30px;
    }
    
    #newsContainer {
        font-size: 11px;
        font-weight: 600;
        position: static;
        z-index: 7;
        top: 0;
        display: block;
        margin-top: 20px;
        margin-bottom: -8px;
        padding: 15px 10px;
        padding-bottom: 5px;
        text-align: left;
        color: black;
        background-color: rgb(50, 50, 50);
    }
    
    .newsContainerBoxes {
        font-size: 11px;
        font-weight: 600;
        position: static;
        z-index: 7;
        top: 0;
        display: block;
        margin-bottom: -8px;
        padding: 15px 10px;
        padding-bottom: 5px;
        text-align: left;
        color: black;
        background-color: rgb(50, 50, 50);
    }
    
    #newsHeader {
        font-size: 15px;
        font-weight: lighter;
        display: inline;
        text-align: left !important;
        color: #CAC1C1;
    }
    
    #trendingItemsContainer {
        font-size: 11px;
        font-weight: 600;
        position: static;
        z-index: 9;
        top: 0;
        display: block;
        width: calc(76vw - 20px);
        margin-top: 20px;
        margin-left: calc(24vw - 30px);
        padding: 10px 10px;
        padding-bottom: 8px;
        text-align: left;
        color: black;
    }
    
    #trendingItemsHeader {
        height: 17px;
        font-size: 15px;
        font-weight: lighter;
        display: inline-block;
        text-align: left !important;
        color: #CAC1C1;
    }
    
    #trendingItems {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: space-between;
        width: 100%;
        height: 80px;
        margin: 0;
        margin-top: 5px;
        margin-bottom: 0px;
        padding: 0;
        padding-bottom: 8px;
    }
    
    #trendingItems div {
        display: inline-block;
        overflow-y: hidden;
        flex-grow: 1;
        width: 70px;
        height: 70px;
        padding: 0;
        cursor: pointer;
    }
    
    #trendingItems div img {
        width: 70px;
        height: 70px;
        margin: 0;
        padding: 0;
        filter: contrast(115%) saturate(110%);
        -webkit-filter: contrast(115%) saturate(110%);
    }
    
    .trendingItem:hover {
        filter:brightness(115%) saturate(110%) contrast(90%);
    }
    
    #colorLabels {
        font-size: 12px;
        z-index: 10;
        top: 437px; /* no news box: 290px; with news box: 367px */
        display: table;
        width: 76vw;
        margin: 0;
        margin-top: 8px;
        padding: 0;
        border-collapse: collapse;
        text-align: center;
        color: black;
    }
    
    #nameLabel {
        width: 11.5% !important;
        padding-left: 4px !important;
        text-align: left !important;
        background-color: #DDDDDD;
    }
    
    #itemPricesContainer {
        position: static;
        width: 76%;
        margin: 0;
        margin-top: 182px;
        margin-left: calc(24% - 30px);
        padding: 0;
        text-align: left;
    }
    
    #itemPricesContainer.searchInfoExpandable{
        margin-top: 204px !important;
        padding: 0 !important;
    }
    
    h2 {
        padding: 3px 0;
        padding-left: 1px;
    }
    
    .priceTable {
        font-size: 12px;
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
        color: black;
        table-layout: fixed;
    }
    
    .priceTable td {
        white-space: nowrap;
    }
    
    .priceTableHeader {
        display: block;
        max-width: 57px;
        white-space: nowrap;
    }

    .headerRow td, .priceTable tr td {
        line-height: 18px !important;
        position: relative;
        width: 5.9%;
        margin: 0 !important;
        padding: 2px 0 !important;
        /* transition-duration: .15s; */
        text-align: center;
        border: none;
        border: 1px solid black;
    }
    
    .blueprintIsWorthless {
        color: rgb(100, 100, 100);
    }

    .priceTable td:first-child {
        display: table-cell !important;
        width: 11.5% !important;
        max-width: 200px;
        padding-left: 10px;
        text-align: left !important;
    }
    
    .itemNameSpan {
        font-weight: bold;
        width: calc(100% - 5px) !important;
        padding-left: 5px;
        text-align: left !important;
        -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 98%);
    }

    .smallItemName {
        font-size: 10px;
    }

    .priceTable td:not(:first-child) {
        font-size: 11px;
        display: table-cell !important;
        width: 5.9% !important;
        cursor: pointer;
    }

    .priceTable td:not(:first-child):hover {
        filter: brightness(65%) contrast(135%);
        -webkit-filter: brightness(65%) contrast(135%);
    }

    .priceTable tr:hover td:first-child {
        filter: brightness(80%) contrast(110%);
        -webkit-filter: brightness(80%) contrast(110%);
    }

    .priceTable tr:hover {
        filter: brightness(95%) contrast(105%);
        -webkit-filter: brightness(95%) contrast(105%);
    }

    .priceTable tr:hover .fnl {
        display: block;
        opacity: 1;
    }
    
    .fnl:hover {
        display: none !important;
        opacity: 0 !important;
    }
    
    .unpaintable table {
        border: none !important;
    }
    
    .unpaintable table tbody {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        text-align: left;
        border: none;
    }
    
    .unpaintable table tbody tr {
        display: inline-flex;
        width: 32.6%;
        border: none !important;
    }
    
    .unpaintable table tbody tr td {
        border-width: .5px;
        border-bottom: none !important;
    }
    
    .emptyCell {
        height: 0px;
    }

    .unpaintable table tbody tr td:nth-child(2) {
        width: 36% !important;
        border-left: none !important;
    }

    .unpaintable table tbody tr td:nth-child(1) {
        width: 64% !important;
    }

    .unpainted td:first-child .itemNameSpan {
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
        padding-left: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    ::-webkit-scrollbar {
        position: absolute;
        width: 8px !important;
        height: 8px !important;
    }
    
    
    #sidebar {
        width: 300px;
        max-height: calc(100vh - 170px);
        margin-left: 10px;
        z-index: 0;
    }
    
    #partnershipContainer {
        width: calc(100%);
        height: 620px;
        margin: 0;
        background-color: transparent;
    }
    
    #newsContainer {
        left: 0;
        width: 927px;
        margin-left: 321px;
    }
    
    #newsContainerImage {
        float: left;
        width: 42px;
        height: 42px;
        margin-left: 1px;
    }
    
    #trendingItemsContainer {
        left: 0;
        width: 929px;
        height: 116px;
        margin-left: 321px;
    }
    
    #colorLabels {
        width: 100%;
        margin-top: 5px;
        box-shadow: 0 3px 5px rgba(0,0,0,.3);
    }
    
    #itemPricesContainer {
        width: 949px;
        margin-left: 321px;
    }
    
    
    /* PRICE VERSION SELECTION */
    #priceVersionsContainer {
        display: block;
        width: calc(100% - 20px);
        height: fit-content;
        /* max-height: 430px; */
        margin: 0 0 10px 0;
        padding: 0 10px 10px 10px;
        /* transition: max-height .2s ease-out; */
        background-color: rgb(50, 50, 50);
    }
    
    .priceVersionWrapper {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
    }
    
    .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 VARIANT SLIDER */
    /* The switch - the box around the slider */
    .priceVariantSwitch {
        position: relative;
        display: inline-block;
        /* width: 245px; */
        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: 130px;
        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(141px);
        -ms-transform: translateX(141px);
        transform: translateX(141px);
        box-shadow: 0 0 2px #2196F3;
    }
    
    input:checked + .priceVariantSlider .labelLeftVariant {
        color: rgba(255, 184, 0, 0.8);
    }
    
    input:checked + .priceVariantSlider .labelRightVariant {
        color: rgba(0, 170, 255, 1);
    }
    
    /* VERSION SLIDER */
    /* The switch - the box around the slider */
    .priceVersionSwitch {
        position: relative;
        display: inline-block;
        /* width: 245px; */
        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: 130px;
        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(141px);
        -ms-transform: translateX(141px);
        transform: translateX(141px);
        box-shadow: 0 0 2px #2196F3;
    }
    
    .labelLeftVersionContainer, .labelLeftVariantContainer, .labelLeftColorContainer {
        position: absolute;
        z-index: 1;
        top: 5px;
        left: 5px;
        height: 24px;
        width: 126px;
    }
    
    .labelRightVersionContainer, .labelRightVariantContainer, .labelRightColorContainer {
        position: absolute;
        z-index: 1;
        top: 5px;
        right: 5px;
        height: 24px;
        width: 126px;
    }
    
    .labelLeftVersion, .labelLeftVariant, .labelLeftColor {
        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, .labelRightColor {
        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);
    }
    
    /* BOTTOM COLOR SLIDER */
    /* The switch - the box around the slider */
    .priceColorSwitch {
        position: relative;
        display: inline-block;
        /* width: 245px; */
        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 */
    .priceColorSwitch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    /* The slider */
    .priceColorSlider {
        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);
    }
    
    .priceColorSlider:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .priceColorSlider:hover .labelRightVariant {
        color: rgba(0, 170, 255, 1) !important;
    }
    
    .priceColorSlider:hover .labelLeftVariant {
        color: rgba(255, 184, 0, 1) !important;
    }
    
    .priceColorSlider:before {
        position: absolute;
        bottom: 4px;
        left: 4px;
        width: 130px;
        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 + .priceColorSlider {
        /*background-color: rgba(32, 146, 238, 0.8);*/
    }
    
    input:focus + .priceColorSlider {
        box-shadow: 0 0 0px #2196F3;
    }
    
    input:checked + .priceColorSlider:before {
        -webkit-transform: translateX(141px);
        -ms-transform: translateX(141px);
        transform: translateX(141px);
        box-shadow: 0 0 2px #2196F3;
    }
    
    input:checked + .priceColorSlider .labelLeftColor {
        color: rgba(255, 184, 0, 0.8);
    }
    
    input:checked + .priceColorSlider .labelRightColor {
        color: rgba(0, 170, 255, 1);
    }
    
    
    /* INFO TEXT STYLES */
    
    .infoTextVersionsContainer{
        height: fit-content;
        max-height: calc(100vh - 450px);
        overflow-y: auto;
        margin-top: 15px;
    }
    
    .versionContainerCollapsed .infoTextVersionsContainer {
        overflow-y: hidden;
        margin-top: 0 !important;
    }
    
    .infoTextVersions {
        font-size: 12px;
        font-weight: lighter;
        line-height: 15px;
        margin: 10px 0;
        padding: 0 10px 0 0;
        /* transition: height .2s, opacity .2s, margin .2s; */
        text-align: left;
        color: rgb(150, 150, 150);
    }
    
    .infoTextVolatility {
        font-size: 12px;
        font-weight: lighter;
        line-height: 15px;
        margin: 10px 0;
        padding: 0 10px 0 0;
        transition: height .2s, opacity .2s, margin .2s;
        text-align: left;
        color: rgb(150, 150, 150);
    }
    
    #smallInfoText {
        font-style: italic;
        font-size: 11px;
        margin: 0 0 20px;
    }
    
    .infoTableVolatility {
        table-layout: fixed;
        margin: 5px 0 4px;
        width: 100%;
        border-collapse: collapse;
    }
    
    .infoTableVolatility td {
        color: black;
        text-align: center;
        height: 20px;
        line-height: 20px;
        font-size: 10px;
        width: calc(100% / 7);
        border: solid 1px black;
        white-space: nowrap;
    }
    
    .rank-3 {
        background-color: #d16d6a;
    }
    
    .rank-2 {
        background-color: #df9d9b;
    }
    
    .rank-1 {
        background-color: #eecdcd;
    }
    
    .rank0 {
        background-color: #ffffff;
    }
    
    .rank1 {
        background-color: #dce9d5;
    }
    
    .rank2 {
        background-color: #bdd5ac;
    }
    
    .rank3 {
        background-color: #9dc184;
    }
    
    .infoTextHighlighted {
        color: rgb(220, 220, 220) !important;
    }
    
    #versionExpandCollapseIcon {
        /*display: flex;*/
        display: none;
        justify-content: center;
        margin: 6px 0 0 0;
    }
    
    #versionExpandCollapseIcon img {
        width: 35px;
        height: 20px;
        transition: filter .2s, transform .2s, margin .2s;
        transform: rotate(180deg);
        filter: invert(0.6);
    }
    
    #versionExpandCollapseIcon:hover img {
        filter: invert(1);
    }
    
    #versionExpandCollapseIcon:hover {
        cursor: pointer;
    }
    
    #priceVersionsContainer.versionContainerCollapsed {
        /* max-height: 212px; */
    }
    
    #priceVersionsContainer.versionContainerCollapsed .infoTextVersions {
        height: 0;
        margin: 1px;
        opacity: 0;
        margin-top: 0px !important;
    }
    
    #priceVersionsContainer.versionContainerCollapsed img {
        transform: rotate(0deg);
    }
    
    .sidebarTitleWrapper {
        margin: 10px 0 0 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }
    
    #sidebarTopWrapper {
        margin-top: -1px;
    }
    
    .sidebarTitleText {
        margin-right: 10px;
        line-height: 20px;
    }
    
    .infoIconHolder {
        position: relative;
        height: 20px;
        width: 20px;
        padding: 13px 0 8px;
        cursor: pointer;
        filter: brightness(1.3);
        transition: filter .2s;
    }
    
    .infoIconHolder:hover img{
        filter: brightness(3);
    }
    
    .infoIconHolder img {
        height: 100%;
        width: 100%;
    }
    
    .infoOverlay {
        position: fixed;
        opacity: 0;
        transition: opacity .3s;
    }
    
    #ncInfoContent {
        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 */
    }
    
    #bpInfoContent {
        display: none;
        text-align: left;
        line-height: 25px;
    }
    
    .infoOverlayActive .infoOverlay {
        opacity: 1;
    }
    
    .infoOverlayActive:not(.blueprintInfo) #bpIndicator {
        opacity: 0 !important;
    }
    
    .infoOverlayActive.blueprintInfo #ncIndicator {
        opacity: 0 !important;
    }
    
    .blueprintInfo #bpInfoContent {
        display: block;
    }
    
    .blueprintInfo #ncInfoContent {
        display: none;
    }
    
    #ncInfoContent span {
        text-align: left;
    }
    
    #ncInfoContent .highlighted {
        color: white;
    }
    
    #ncInfoContent .infoSubtitle {
        color: white;
        text-transform: uppercase;
        margin: 75px 0 25px 0;
    }
    
    .infoSubtitle:first-child {
        margin-top: 0 !important;
    }
    
    #ncInfoContent .infoImage {
    
    }
    
    #ncInfoContent .infoImageWrapper {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
    
    #ncInfoContent .infoImageContainer {
        display: flex;
        flex-flow: column-reverse nowrap;
        justify-content: flex-end;
        height: 400px;
    }
    
    #ncInfoContent .infoImageContainer .infoImage {
        height: 350px;
        width: auto;
        margin: 0 30px 0 0;
    }
    
    #ncInfoContent .infoImageHorizontal {
        height: 350px;
        margin: 20px 0;
    }
    
    #ncInfoContent .infoImageHorizontal .infoImage {
        height: 350px;
        width: auto;
    }
    
    #ncInfoContent .infoImageLabel {
        font-style: italic;
        margin-bottom: 10px;
    }
    
    #ncInfoContent .inlineImg {
        height: 30px;
        margin-top: -12px;
        transform: translateY(9px);
        padding: 0 5px;
        display: inline-block;
    }
    
    .paragraphSpace {
        width: 1px;
        height: 12px;
        margin: 0;
    }
    
    .bottomNavButton {
        margin-top: 50px;
        text-decoration: underline;
        cursor: pointer;
    }
    
    .infoOverlayIndicator {
        position: absolute;
        border: 15px solid transparent;
        border-right-color: rgba(20,20,20,.95);
        top: 8px;
        left: 11px;
        padding: 0;
        margin: 0;
    }
    
    #ncOverlayContentContainer {
        left: calc(((100% - 1280px) / 2) + 321px);
        width: 949px;
        top: 120px;
        height: calc(100% - 150px);
        background-color: rgba(20,20,20,.95);
        z-index: 20;
        padding: 50px;
        box-sizing: border-box;
    }
    
    #ncOverlayWrapper {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        height: calc(100% + 50px);
    }
    
    #ncNavbar {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        margin-bottom: 50px;
    }
    
    #ncNavbar>div {
        height: 20px;
        width: 20px;
        margin: 0;
        opacity: .7;
        transition: opacity .2s;
        cursor: pointer;
    }
    
    #ncNavbar>div:hover {
        opacity: 1;
    }
    
    #ncNavbar>div img {
        height: 100%;
        width: 100%;
    }
    
    #nonCrateItems {
        display: table;
        table-layout: fixed;
        width: 100%;
        border: none;
        border-collapse: collapse;
        margin: 2px 0;
        cursor: default;
    }
    
    #nonCrateItems tr {
        height: 22px;
        background-color: rgba(0,0,0,.2);
    }
    
    #nonCrateItems tr:nth-child(even) td {
        /*background-color: rgba(255,255,255,.1);*/
    }
    
    #nonCrateItems td {
        /*color: rgb(180,180,180);*/
        font-size: 12px;
        line-height: 15px;
    }
    
    .ncLabel {
        text-align: left;
        width: 75%;
        white-space: pre-wrap;
        padding: 5px 5px;
    }
    
    .ncLabel .faded {
        opacity: .75;
        white-space: nowrap;
    }
    
    .ncData {
        text-align: right;
        width: 25%;
        padding: 1px 5px 1px 0;
    }
    
    .ncExotic td {
        color: #c7bb77;
    }
    
    .ncImport td {
        color: #ed908e;
    }
    
    .ncVeryRare td {
        color: #b48eed;
    }
    
    .ncRare td {
        color: #8e9ded;
    }
    
    .ncUncommon td {
        color: #8ecfed;
    }

    .ncUncommon {
        display: none;
    }
    
}


.priceTableHeaderDefault {
    background: #cac3b8;
}

.priceTable td:nth-child(2) {
    background: #f0e7da;
}

.priceTable tr:nth-of-type(even) td:nth-child(2) {
    background: #dbd2c7;
}

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

.priceTable td:nth-child(3) {
    color: rgb(0,0,0);
    background: #999999;
}

.priceTable tr:nth-of-type(even) td:nth-child(3) {
    background: #8a8a8a;
}

.priceTableHeaderWhite {
    background: #fff;
}

.priceTable td:nth-child(4) {
    background: #fff;
}

.priceTable tr:nth-of-type(even) td:nth-child(4) {
    background: #f2f3f4;
}

.priceTableHeaderGrey {
    background: #999999;
}

.priceTable td:nth-child(5) {
    background: #d9d9d9;
}

.priceTable tr:nth-of-type(even) td:nth-child(5) {
    background: #c4c4c4;
}

.priceTableHeaderCrimson {
    background: #ff6363;
}

.priceTable td:nth-child(6) {
    background: #e6b7b7;
}

.priceTable tr:nth-of-type(even) td:nth-child(6) {
    background: #cfa4a4;
}

.priceTableHeaderPink {
    background: #f89eff;
}

.priceTable td:nth-child(7) {
    background: #e7d7e6;
}

.priceTable tr:nth-of-type(even) td:nth-child(7) {
    background: #cdbecc;
}

.priceTableHeaderCobalt {
    background: #506ec9;
}

.priceTable td:nth-child(8) {
    background: #bbcfe4;
}

.priceTable tr:nth-of-type(even) td:nth-child(8) {
    background: #aabdd0;
}

.priceTableHeaderSkyBlue {
    background: #63ffff;
}

.priceTable td:nth-child(9) {
    background: #dfeef1;
}

.priceTable tr:nth-of-type(even) td:nth-child(9) {
    background: #cbdadc;
}

.priceTableHeaderBurntSienna {
    background: #b46f45;
}

.priceTable td:nth-child(10) {
    background: #e1d0c5;
}

.priceTable tr:nth-of-type(even) td:nth-child(10) {
    background: #d5c4b9;
}

.priceTableHeaderSaffron {
    background: #ffff63;
}

.priceTable td:nth-child(11) {
    background: #feffe4;
}

.priceTable tr:nth-of-type(even) td:nth-child(11) {
    background: #e7e8d0;
}

.priceTableHeaderLime {
    background: #63ff63;
}

.priceTable td:nth-child(12) {
    background: #dfffe0;
}

.priceTable tr:nth-of-type(even) td:nth-child(12) {
    background: #c0ddc2;
}

.priceTableHeaderForestGreen {
    background: #457337;
}

.priceTable td:nth-child(13) {
    background: #a3e39c;
}

.priceTable tr:nth-of-type(even) td:nth-child(13) {
    background: #92ca8c;
}

.priceTableHeaderOrange {
    background: #ffaa63;
}

.priceTable td:nth-child(14) {
    background: #f5e7ce;
}

.priceTable tr:nth-of-type(even) td:nth-child(14) {
    background: #f8e1b9;
}

.priceTableHeaderPurple {
    background: #a862fc;
}

.priceTable td:nth-child(15) {
    background: #bdb7cf;
}

.priceTable tr:nth-of-type(even) td:nth-child(15) {
    background: #a6a1b7;
}

.priceTableHeaderGold {
    background: #fcc42b;
}

.priceTable td:nth-child(16) {
    background: #f5eace;
}

.priceTable tr:nth-of-type(even) td:nth-child(16) {
    background: #f7e7ba;
}

.priceTable td:nth-child(1) {
    background: #efefef;
}

.priceTable tr:nth-of-type(even) td:nth-child(1) {
    background: #DDDDDD;
}

.priceTable td:first-child {
    background: #efefef;
    white-space: nowrap;
    /* overflow: hidden; */
    cursor: default;
}

.priceTable tr:nth-of-type(even) td:nth-child(1) {
    background: #DDDDDD;
}

/* override properties for price table full item name tooltips */

/*

.priceTable .hint--left:after{
    color: white;
    font-weight: bold;
    bottom: 100%;
    left: 0;
}

.priceTable .hint--left:after{
    -webkit-transform: translate(-100%, calc(100% - 8px));
    -moz-transform: translate(-100%, calc(100% - 8px));
    transform: translate(-100%, calc(100% - 8px));
    border-radius: 1px;
}

.priceTable .hint--left:before {
    display:none !important;
}

.priceTable .hint--left:hover:after{
    -webkit-transform: translate(-100%, calc(100% - 8px));
    -moz-transform: translate(-100%, calc(100% - 8px));
    transform: translate(-100%, calc(100% - 8px));
}

.priceTable [class*="hint--"]:before, .priceTable [class*="hint--"]:after {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

.priceTable [class*="hint--"]:hover:before, .priceTable [class*="hint--"]:hover:after {
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    transition-delay: 0ms;
}

.priceTable [class*="hint--"]:after {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
*/

.fnl {
    display: none;
    opacity: 0;
    transition: opacity .1s;
    
    position: absolute;
    right: 100%;
    top: -6px;
    
    height: 32px;
    padding: 0 10px;
    width: fit-content;
    
    background-color: rgb(30,30,30);
    color: rgb(230, 230, 230);
    
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    
    z-index: 100000;
}

/* end tooltip override */

.uncommon {
    background: linear-gradient(to bottom, transparent 0, rgba(125, 217, 253, .4) 80%);
}

.rare {
    background: linear-gradient(to bottom, transparent 0, rgba(116, 151, 235, .4) 80%);
}

.super-rare {
    background: linear-gradient(to bottom, transparent 0, rgba(149, 107, 242, .4) 80%);
}

.very-rare {
    background: linear-gradient(to bottom, transparent 0, rgba(158, 124, 252, .4) 80%);
}

.import {
    background: linear-gradient(to bottom, transparent 0, rgba(227, 90, 82, .4) 80%);
}

.exotic {
    background: linear-gradient(to bottom, transparent 0, rgba(236, 219, 108, .4) 80%);
}

.limited {
    background: linear-gradient(to bottom, transparent 0, rgba(247, 121, 57, .4) 80%);
}

.black-market {
    background: linear-gradient(to bottom, transparent 0, rgba(255, 0, 255, .4) 80%);
}

.key {
    background: linear-gradient(to bottom, transparent 0, rgba(107, 241, 174, .4) 80%);
}

.noHover {
    cursor: not-allowed;
    filter: none !important;
}

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

.typeTabs.hint--top:before {
    border-top-color: rgba(20, 20, 20, 0.8);
}

.typeTabs.hint--top:after {
    background: rgba(20, 20, 20, 0.8);
}

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

#itemTypeNew div {
    background-position: -44px 0px;
}

#newTabHot {
    background-position: -88px 0px !important;
}

#itemType9 div {
    background-position: -132px 0px;
}

#itemType2 div {
    background-position: 0px -44px;
}

#itemType5 div {
    background-position: -44px -44px;
}

#itemType10 div {
    background-position: -88px -44px;
}

#itemType1 div {
    background-position: -132px -44px;
}

#itemType3 div {
    background-position: 0px -88px;
}

#itemType4 div {
    background-position: -44px -88px;
}

#itemType6 div {
    background-position: -88px -88px;
}

#itemType7 div {
    background-position: -132px -88px;
}

#itemType8 div {
    background-position: 0px -132px;
}

#itemType12 div {
    background-position: -44px -132px;
}

#itemType11 div {
    background-position: -88px -132px;
}

#itemType13 div {
    background-position: -132px -132px;
}

#itemTypeAll.typeTabsSelected div {
    background-position: 0px 0px;
}

#itemTypeNew.typeTabsSelected div {
    background-position: -50px 0px;
}

.typeTabsSelected #newTabHot {
    background-position: -100px 0px !important;
}

#itemType9.typeTabsSelected div {
    background-position: -150px 0px;
}

#itemType2.typeTabsSelected div {
    background-position: 0px -50px;
}

#itemType5.typeTabsSelected div {
    background-position: -50px -50px;
}

#itemType10.typeTabsSelected div {
    background-position: -100px -50px;
}

#itemType1.typeTabsSelected div {
    background-position: -150px -50px;
}

#itemType3.typeTabsSelected div {
    background-position: 0px -100px;
}

#itemType4.typeTabsSelected div {
    background-position: -50px -100px;
}

#itemType6.typeTabsSelected div {
    background-position: -100px -100px;
}

#itemType7.typeTabsSelected div {
    background-position: -150px -100px;
}

#itemType8.typeTabsSelected div {
    background-position: 0px -150px;
}

#itemType12.typeTabsSelected div {
    background-position: -50px -150px;
}

#itemType11.typeTabsSelected div {
    background-position: -100px -150px;
}

#itemType13.typeTabsSelected div {
    background-position: -150px -150px;
}

.invisibleColumn {
    display: none !important;
}

.priceTable td.VR-3 {
    background: #d16d6a !important;
}

.priceTable td.VR-2 {
    background: #df9d9b !important;
}

.priceTable td.VR-1 {
    background: #eecdcd !important;
}

.priceTable td.VR0 {
    background: #ffffff !important;
}

.priceTable td.VR1 {
    background: #dce9d5 !important;
}

.priceTable td.VR2 {
    background: #bdd5ac !important;
}

.priceTable td.VR3 {
    background: #9dc184 !important;
}

/* this selector might be redundant due to animation css */
.priceTableContainer.skeletonClass .priceTable {
    opacity: .6;
    filter: saturate(.7);
    -webkit-filter: saturate(.7);
}

.priceTableContainer.skeletonClass td {
    border: 1px solid rgb(120, 120, 120);
}

.priceTableContainer td {
    height: 18px;
}

.priceTableContainer.skeletonAnimation .priceTable {
    animation-name: loadingcontent;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.priceTableContainer.skeletonClass td:nth-child(3) {
    filter: brightness(1.2) !important;
    -webkit-filter: brightness(1.2) !important;
}

.priceTableContainer.skeletonClass tr {
    pointer-events: none;
}

@keyframes loadingcontent {
    0%   {
        filter: saturate(.7);
        opacity: .6;
        -webkit-filter: saturate(.7);
    }
    50%  {
        filter: saturate(.2);
        opacity: .4;
        -webkit-filter: saturate(.2);
    }
    100% {
        filter: saturate(.7);
        opacity: .6;
        -webkit-filter: saturate(.7);
    }
}

/* transition */

.priceTableContainer .priceTable {
    opacity: 1;
    filter: saturate(1);
    transition: filter .5s, -webkit-filter .5s, opacity .5s;
}

.priceTableContainer td {
    border: 1px solid black;
    transition: border .5s;
}

.priceTableContainer td:nth-child(3) {
    filter: brightness(1);
    transition: filter .5s, -webkit-filter .5s;
}




/* 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;
}