.cosmeticsFilterRarityContainer::-webkit-scrollbar,
.cosmeticsFilterSourceContainer::-webkit-scrollbar,
.cosmeticsFilterTypeContainer::-webkit-scrollbar {
    background: #ffffff00;
}

.cosmeticsFilterRarityContainer::-webkit-scrollbar-thumb,
.cosmeticsFilterTypeContainer::-webkit-scrollbar-thumb,
.cosmeticsFilterSourceContainer::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 18px;
}

@media only screen and (max-width : 1200px) {
    .cosmeticsFilters {
        display: flex;
        margin: 80px auto 0;
        width: 100%;
        height: 100%;
    }

    .cosmeticsFiltersContainer {
        width: 100%;
        height: 100%;
        display: block;
    }

    .cosmeticsFilterName {
        width: auto;
        height: 40px;
        display: flex;
        /* background-color: rgb(29, 29, 29, 1); */
        background-color: #FFC107;
        overflow: hidden;
        border-radius: 15px;
        margin: 5px;
    }

    .cosmeticsFilterName input {
        border: none;
        outline: none;
    }

    .cosmeticsFilterNameInput {
        width: 100%;
        border-radius: 15px;
        transition: .3s;
        display: flex;
    }

    .cosmeticsFilterNameInput:focus {
        box-shadow: 0 0 0 2px white;
        color: white;
        /* background-color: rgb(19, 19, 105); */
        background-color: #cd9a00;
        margin: 2px;
    }

    .cosmeticsFilterName .button-cta {
        display: flex;
        margin: auto 5px;
        width: 150px;
        height: 90%;
        border-radius: 15px;
    }

    .cosmeticsFilterName .button-cta p {
        display: flex;
        margin: auto;
        text-align: center;
        font-size: 13px;
    }

    .cosmeticsFilterRarity,
    .cosmeticsFilterType,
    .cosmeticsFilterSource {
        width: auto;
        height: 40px;
        display: flex;
        margin: 5px;
        position: relative;
    }

    .cosmeticsFilterRarityCategory,
    .cosmeticsFilterTypeCategory,
    .cosmeticsFilterSourceCategory {
        display: flex;
        margin: auto;
        width: 100%;
        height: 100%;
        /* background-color: rgb(29, 29, 29, 1); */
        background-color: #FFC107;
        border-radius: 15px;
    }

    .cosmeticsFilterRarityCategoryP,
    .cosmeticsFilterTypeCategoryP,
    .cosmeticsFilterSourceCategoryP {
        text-align: center;
        display: flex;
        margin: auto;
    }

    .cosmeticsFilterRarityContainer,
    .cosmeticsFilterTypeContainer,
    .cosmeticsFilterSourceContainer {
        flex-flow: row wrap;
        position: absolute;
        z-index: 5;
        top: 100%;
        left: 0;
        margin: 5px auto;
        padding: 5px 5px 5px 0;
        border-radius: 15px;
        width: auto;
        height: 300px;
        overflow: auto;
        /* background-color: rgb(29, 29, 29, 1); */
        background-color: #FFC107;
    }

    .filterRarityItem,
    .filterTypeItem,
    .filterSourceItem {
        width: 100%;
        height: 30px;
        display: flex;
        margin: 4px;
    }

    .filterRarityItem-active,
    .filterTypeItem-active,
    .filterSourceItem-active {
        background-color: #c0940f;
    }

    .filterRarityItemP,
    .filterTypeItemP,
    .filterSourceItemP {
        display: flex;
        margin: auto 5px;
        text-align: left;
        font-size: 13px;
        width: 100%;
    }
}

@media only screen and (min-width : 1200px) {
    .cosmeticsFilters {
        display: flex;
        margin: auto;
        width: 70%;
        height: 40px;
    }

    .cosmeticsFiltersContainer {
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
    }

    .cosmeticsFilterName {
        width: 100%;
        height: 100%;
        display: flex;
        /* background-color: rgb(29, 29, 29, 1); */
        background-color: #FFC107;
        overflow: hidden;
        border-radius: 15px;
        margin: auto 5px;
    }

    .cosmeticsFilterName input {
        border: none;
        outline: none;
    }

    .cosmeticsFilterNameInput {
        width: 100%;
        border-radius: 15px;
        transition: .3s;
        display: flex;
    }

    .cosmeticsFilterNameInput:focus {
        box-shadow: 0 0 0 2px white;
        color: white;
        /* background-color: rgb(19, 19, 105); */
        background-color: #cd9a00;
        margin: 2px;
    }

    .cosmeticsFilterName .button-cta {
        display: flex;
        margin: auto 5px;
        width: 150px;
        height: 80%;
        border-radius: 10px;
    }

    .cosmeticsFilterName .button-cta p {
        display: flex;
        margin: auto;
        text-align: center;
        font-size: 16px;
    }

    .cosmeticsFilterRarity,
    .cosmeticsFilterType,
    .cosmeticsFilterSource {
        min-width: 250px;
        /* width: auto; */
        width: 100%;
        height: 100%;
        display: flex;
        margin: auto 2px;
        position: relative;
    }

    .cosmeticsFilterRarityCategory,
    .cosmeticsFilterTypeCategory,
    .cosmeticsFilterSourceCategory {
        display: flex;
        margin: auto;
        width: 100%;
        height: 100%;
        /* background-color: rgb(29, 29, 29, 1); */
        background-color: #FFC107;
        border-radius: 15px;
    }

    .cosmeticsFilterRarityCategoryP,
    .cosmeticsFilterTypeCategoryP,
    .cosmeticsFilterSourceCategoryP {
        text-align: center;
        display: flex;
        margin: auto;
    }

    .cosmeticsFilterRarityContainer,
    .cosmeticsFilterTypeContainer,
    .cosmeticsFilterSourceContainer {
        flex-flow: row wrap;
        position: absolute;
        z-index: 5;
        top: 110%;
        left: 0;
        right: 0;
        padding: 5px;
        border-radius: 15px;
        width: auto;
        height: auto;
        max-height: 300px;
        overflow: auto;
        /* background-color: rgb(29, 29, 29, 1); */
        background-color: #FFC107;
    }

    .filterRarityItem,
    .filterTypeItem,
    .filterSourceItem {
        width: auto;
        min-width: 80px;
        min-height: 30px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4px 4px 4px 6px;
        border-radius: 10px;
    }

    .filterRarityItem-active,
    .filterTypeItem-active,
    .filterSourceItem-active {
        background-color: #c0940f;
    }

    .filterRarityItemP,
    .filterTypeItemP,
    .filterSourceItemP {
        display: flex;
        margin: auto 5px;
        text-align: left;
        font-size: 13px;
        padding: 0 5px;
    }
}