@font-face{
    font-family: "Gotham-Book";
    src: url(./Gotham-Book.ttf);
}

.flex-row {
    display: flex;
    justify-content: space-between;
}
.flex-row-center {
    display: flex;
    justify-content: center;
}
.flex-row-around {
    display: flex;
    justify-content: space-around;
}
.flex-row-start {
    display: flex;
    justify-content: flex-start;
}
.flex-row-between {
    display: flex;
    justify-content: space-between;
}
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tag-button p {
    color: white;
}
.tag-text, .provider {
    text-align: center;
    font-size: 14px !important;
    font-family: "Gotham-Book";
}
.tag-text:hover {
    color: #6ed97d;
}
.provider {
    min-width: 80px;
    font-weight: 900;
}
.icon-button:hover {
    color: #6ed97d
}
.button {
    color: white;
    border: 1px solid white;
    font-family: "Gotham-Book";
    font-size: 16px;
    background-color: black;
    border-radius: 50px;
    width: 100%;
    padding: 4px 15px 4px 15px;
    margin-bottom: 15px;
}
.filter-text {
    color: white;
    font-family: "Gotham-Book";
}
.icon-button {
    color: white;
    border: 1px solid white;
    font-family: "Gotham-Book";
    font-size: 16px;
    background-color: black;
    border-radius: 50px;
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
}
.reset-button {
    color: white;
    border: 1px solid white;
    font-family: "Gotham-Book";
    font-size: 20px;
    background-color: black;
    border-radius: 50px;
    width: 100%;
    padding: 6px 8px 3px 8px;
    margin-bottom: 15px;
}
.reset-button:hover {
    color: #30d87b;
    border-color: #30d87b;
}
.icon {
    width: 50px;
}
.underline-select {
    width: 70%;
    display: none;
}
.tag-active {
    border-color: #30d87b;
    display: block;
}
.tag-inactive {
    display: none;
}
.dropdown-active {
    display: block;
    height: 100%;
}
.filters-inactive {
    display: none;
}
.btn-active {
    color: black;
    border: 1px solid black;
    background-color: #30d87b;
    font-family: "Gotham-Black" !important;
}
.btn-inactive {
    color: white;
    border: 1px solid white;
    background-color: black;
}

/* #filter-button {
    width: 30%;
} */
#filter-button-container, 
#reset-button-container {
    width: 29%;
}
#fav-button-container {
    width: 40%;
}
#filter-button, #fav-button-container > button,
#reset-btn-big {
    height: 75%;
    min-height: 45px;
    align-items: center;
    position: relative;
}
/* #filter-button button > img + p {
    display: none;
    margin-right: 5px;
    position: relative;
    top: 2px;
} */
#filter-button {
    justify-content: flex-end;
    padding: 4px 35px 4px 15px;
}
#filter-button p {
    margin-top: 0;
}
#filter-button > img {
    position: absolute;
    left: 0px;
}
#tag1-mb {
    background-color: white;
    color: black;
    padding: 4px 0px 4px 15px;
    justify-content: center;
}
#tag1-mb > img {
    position: absolute;
    left: 0px;
}
#tag1-mb p {
    font-family: "Gotham-Black";
}
#desktop-filter-counter {
    background-color: #30d87b;
    padding: 6px;
    border-radius: 50px;
    width: 25px;
    height: 25px;
    color: black;
    font-family: "Gotham-Black";
    font-size: 12px;
    display: none;
}
#mobile-filter-counter {
    position: absolute;
    left: 30px;
    top: 5px;
    background-color: #30d87b;
    padding: 2px 3px 6px 3px;
    border-radius: 50px;
    width: 15px;
    height: 15px;
    color: black;
    font-family: "Gotham-Black";
    font-size: 10px;
    display: none;
}

#result-panel {
    display: none;
    justify-content: center;
    align-items: center;
    font-family: "Gotham-Book";
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
#result-panel > p {
    display: none;
    margin-top: 0 !important;
}
#filter-button button > img + p + p {
    margin-top: 0 !important;
}
#filter-button button, 
#filter-button-desktop button, 
#active-filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center
}
.filter-inner-section {
    align-items: center;
}
#desktop-filter-counter-container {
    width: 20%;
}
#filter-button > button > img {
    width: 40px;
}
.filter-selection {
    color: black;
    border: 1px solid black;
    background-color: #6ed97d;
    font-family: "Gotham-Book";
    font-size: 16px;
    border-radius: 50px;
    padding: 5px 10px;
    margin: 0 5px;
}
#tag-selector {
    margin-top: 20px;
    margin-bottom: 20px;
}
#name-search, #name-search-desktop {
    display: flex;
    justify-content: flex-start;
}
#name-search > img, #name-search-desktop > img {
    width: 50px;
}
#name-search > img + input, 
#name-search-desktop > img + input, 
#name-search > img + input + input {
    border: none;
    background: black;
    padding: 0 0 0 10px;
    margin: 0;
    width: 80%;
    color: white;
}
#name-search > img + input::placeholder,
#name-search-desktop > img + input::placeholder {
    color: white;
    font-family: "Gotham-Book";
}
#provider-search ul, #provider-search-desktop ul {
    list-style: none;
}
#provider-search ul {
    margin-bottom: 0 !important;
}

.game-tag1, .game-tag2, 
.game-tag3, .game-tag4, 
.game-tag1-big, .game-tag2-big, 
.game-tag3-big, .game-tag4-big {
    position: absolute;
    width: auto;
}
.game-tag1-big, .game-tag2-big, 
.game-tag3-big, .game-tag4-big {
    -webkit-transform: scale(0.5) !important;
}

.game-tag1-big, 
.game-tag3-big, .game-tag4-big {
   right: 37%;
   top: -16px;
   height: 50px !important;
}

.game-tag2-big {
    right: 33%;
    top: -16px;
    height: 50px !important;
}

/* -- Dropdown filter styles -- */
#dropdown-filter {
    padding: 20px;
}
#filter-body > div {
    display: flex;
    justify-content: space-evenly;
}
.filter-column {
    display: flex;
    flex-direction: column;
}
.filter-column > div {
    display: flex;
    justify-content: space-between;
}
#column-left, #column-right {
    width: 40%;
}
#cluster2, #cluster4, #cluster5 {
    margin-top: 10px;
}
.filter-column label {
    font-size: 12px;
    margin-bottom: 7px;
}
.filter-group-title {
    font-size: 14px;
    margin-bottom: 5px;
    font-family: "Gotham-Black";
}
input[type="checkbox"], 
input[type="radio"] {
    display: flex;
}

input[type="radio"]+label::before {
    display: none;
}
.radio-label {
    position: relative;
    cursor: pointer;
    width: initial;
    display: inline-block;
}
.radio-label:hover {
    color: #6ed97d;
}
.sort-label:hover {
    color: #6ed97d;
    cursor: pointer;
}
input[type="checkbox"], 
input[type="radio"] {
    width: 1px;
    height: 1px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 5px;
    margin-bottom: 4px !important;
    background-color: black;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    border-radius: 20px;
    position: relative;
    padding: 8px 8px !important;
}
input[type="checkbox"]:hover, 
input[type="radio"]:hover {
    cursor: pointer;
}
/* .radio-checkbox:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #6ed97d;
    position: absolute;
    top: 3px;
    left: 3px;
} */
.radio-checkbox:checked::after {
    content: "";
    width: 41px;
    height: 41px;
    border-radius: 50%;
    border: none;
    background-image: url("./good-check.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -13px;
    left: -12px;
}
#filter-footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
#clear-btn {
    background-color: #30d87b;
    color: black;
    font-weight: 900;
    border-color: black;
    text-align: center;
    font-size: 14px !important;
    min-width: 80px;
    width: 180px;
    font-family: "Gotham-Black";
    padding: 8px 15px 8px 15px;
}
#apply-btn {
    background-color: #30d87b;
    color: black;
    font-weight: 900;
    border-color: black;
    text-align: center;
    font-size: 14px !important;
    min-width: 80px;
    padding: 8px 15px 8px 15px;
    width: 180px;
    font-family: "Gotham-Black";
    margin-left: 10px;
}
#clear-btn:hover, #apply-btn:hover {
    cursor: pointer;
}
/* -- End of dropdown filter styles -- */

@media screen and (max-width: 600px) {
    #dropdown-filter {
        overflow: scroll;
    }
    #mobile-filter-container {
        display: block;
    }
    #desktop-filter-container {
        display: none;
    }
    #filter-header {
        display: flex;
        justify-content: space-between;
        margin: 0 6vw 10px 1vw;
    }
    #filter-header > div {
        display: flex;
        justify-content: flex-start;
        top: 10px;
    }
    #filter-close-button {
        width: 30px;
        height: 30px;
        font-size: 15px;
        padding: 4px 8px 0 9px !important;
    }
    #reset-btn-mobile {
        font-size: 15px;
        position: relative;
        top: 4px;
    }
    #clear-btn {
        background-color: white;
    }
    #filter-button button{
        min-width: 80px;
    }
    #filter-close-button-desktop {
        display: none;
    }
    #result-panel {
        top: 20px;
    }
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 6.7vw;
        top: -8px;
        height: 35px !important;
    }
    .game-tag2 {
        right: 4.2vw;
        top: -8px;
        height: 35px !important;
    }
    #tag6 {
        position: relative;
        top: 2px;
    }
    /* .body {
        overflow: scroll;
    } */
    .dropdown-active {
        height: 120vh;
    }
}
@media screen and (min-width: 501px) and (max-width: 600px) {
    .provider {
        width: 120px !important;
    }
    /* #reset-btn-big {
        display: block;
    }
    #reset-btn-mobile {
        display: none;
    } */
    .provider {
        padding: 10px 15px 10px 15px !important;
    }
}
@media screen and (min-width: 451px) and (max-width: 500px) {
    .provider {
        width: 110px !important;
        font-size: 12px !important;
        padding: 10px 15px 10px 15px !important;
    }
    /* #reset-btn-big {
        display: block;
    }
    #reset-btn-mobile {
        display: none;
    } */
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 5.5vw;
        top: -9px;
        height: 35px !important;
    }
    .game-tag2 {
        right: 3.2vw;
        top: -9px;
        height: 35px !important;
    }
    .button {
        font-size: 14px
    }
    #filter-button {
        padding: 4px 27px 4px 15px;
    }
    #tag-selector {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 40px;
    }
    .tag-button {
        margin: 0 10px;
    }
}
@media screen and (min-width: 401px) and (max-width: 450px) {
    .icon-button {
        font-size: 14px;
    }
    .provider {
        width: 90px !important;
        font-size: 10px !important;
        padding: 10px 15px 10px 15px !important;
    }
    .tag-text {
        font-size: 12px !important;
    }
    /* #reset-btn-big {
        display: block;
    }
    #reset-btn-mobile {
        display: none;
    } */
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 5.5vw;
        top: -9px;
        height: 35px !important;
    }
    .game-tag2 {
        right: 3.2vw;
        top: -9px;
        height: 35px !important;
    }
    #tag1-mb > img {
        left: -6px;
    }
    .button {
        font-size: 14px
    }
    #filter-button {
        padding: 4px 15px 4px 15px;
    }
    #tag-selector {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 40px;
    }
    .tag-button {
        margin: 0 10px;
    }
}
@media screen and (min-width: 384px) and (max-width: 400px) {
    #tag-selector {
        padding: 0 10px;
    }
}
@media screen and (min-width: 351px) and (max-width: 400px) {
    .icon-button {
        font-size: 12px;
    }
    .icon-button p {
        position: relative;
        right: 5px;
    }
    #name-search > img + input::placeholder {
        font-size: 16px;
    }
    .provider {
        width: 80px !important;
        font-size: 10px !important;
        padding: 10px 5px 10px 5px !important;
    }
    .tag-text {
        font-size: 12px !important;
    }
    /* #reset-btn-big {
        display: none;
    }
    #reset-btn-mobile {
        display: block;
    } */
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 3.5vw;
        top: -8px;
        height: 30px !important;
    }
    .game-tag2 {
        right: 1.5vw;
        top: -8px;
        height: 30px !important;
    }
    #tag1-mb {
        justify-content: flex-end;
    }
    #tag1-mb > img{
        left: -6px;
    }
    #tag1-mb p{
        padding-right: 10px;
    }
    .button {
        font-size: 12px
    }
    #filter-button {
        padding: 4px 10px 4px 15px;
    }
    #filter-button > img {
        left: -6px;
    }
    #mobile-filter-counter {
        left: 24px;
    }
    #tag-selector {
        flex-wrap: wrap;
        justify-content: center;
    }
    .tag-button {
        margin: 0 10px;
    }
}
@media screen and (min-width: 300px) and (max-width: 350px) {
    #tag-selector {
        padding: 0 10px;
    }
}
@media screen and (max-width: 350px) {
    #tag-selector {
        flex-wrap: wrap;
        justify-content: center;
    }
    .tag-button {
        margin: 0 10px 0 10px;
    }
    .tag-text {
        font-size: 10px !important;
    }
    .icon-button {
        font-size: 12px;
    }
    .icon-button p {
        position: relative;
        right: 5px;
    }
    #name-search > img + input::placeholder {
        font-size: 14px;
    }
    .provider {
        width: 80px !important;
        font-size: 10px !important;
        padding: 10px 5px 10px 5px !important;
        margin: 5px 10px 5px 10px;
    }
    #provider-search ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* #reset-btn-big {
        display: block;
    }
    #reset-btn-mobile {
        display: none;
    } */
    #filter-button {
        margin: 0 auto;
    }
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 3.5vw;
        top: -8px;
        height: 30px !important;
    }
    .game-tag2 {
        right: 1.5vw;
        top: -8px;
        height: 30px !important;
    }
    #tag1-mb {
        padding: 0;
    }
    #tag1-mb > img {
        display: none;
    }
    #filter-button {
        justify-content: center;
        padding: 4px 15px 4px 15px;
    }
    #filter-button > img {
        left: 3vw;
    }
    #filter-button > img + p + p {
        display: none;
    }
    #mobile-filter-counter {
        left: 13vw;
    }
    .button {
        font-size: 12px;
    }
}
@media screen and (max-width: 405px) {
    /* #filter-body > div {
        flex-direction: column;
    } */
    #clear-btn {
        font-size: 12px !important;
    }
    #apply-btn {
        font-size: 12px !important;
    }
}
@media screen and (min-width: 281px) and (max-width: 320px) {
    #name-search > img + input::placeholder {
        font-size: 14px;
        position: relative;
        right: 10px;
    }
    /* #tag3 {
        position: relative;
        right: 10px;
    } */
}
@media screen and (max-width: 300px) {
    #filter-body > div {
        flex-direction: column;
        align-items: center;
    }
    #cluster3 {
        margin-top: 15px;
    }
}
@media screen and (max-width: 280px) {
    #filter-footer > ul li {
        width: 30vw;
        min-width: 100px;
    }
    #clear-btn {
        font-size: 10px !important;
    }
    #apply-btn {
        font-size: 10px !important;
    }
    #name-search > img + input::placeholder {
        font-size: 14px;
        position: relative;
        right: 10px;
    }
    /* #filter-button {
        position: relative;
        right: 10px;
    } */
    #name-searchbox {
        display: none;
    }
    #name-searchbox-mini {
        display: block;
    }
    #name-searchbox-mini::placeholder {
        font-size: 14px;
        color: white;
        position: relative;
        bottom: 5px;
        right: 7px;
    }
    #tag3 {
        position: relative;
        right: 10px;
    }
}
@media screen and (min-width: 281px) {
    #name-searchbox-mini {
        display: none;
    }
}
@media screen and (min-width: 601px) {
    #mobile-filter-container {
        display: none;
    }
    #desktop-filter-container {
        display: block;
        height: 300px;
        position: relative;
    }
    #filter-header {
        display: none;
    }

    #tag-selector-desktop {
        margin-top: 20px;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }
    #tag-selector-desktop button {
        margin: 0 10px 0 10px;
    }
    .tag-button-desktop {
        position: relative;
        top: 2vh;
    }
    #tag6 > img {
        position: relative;
        bottom: 6px;
    }

    .desktop-input-container {
        max-height: 60px;
    }
    .desktop-input-group {
        width: 65%;
    }
    .provider-desktop, #reset-btn-desktop {
        min-width: 10vw;
        font-weight: 900;
        height: 45px;
    }
    #reset-btn-desktop {
        font-weight: 900;
        text-align: center;
        font-size: 16px;
        font-family: "Gotham-Book";
        border-radius: 50px;
        width: 100%;
        padding: 4px 15px 4px 15px;
        margin-bottom: 15px;
        width: 15%;
    }
    #name-search-desktop {
        width: 47%;
    }
    #filter-button-desktop {
        width: 35%;
        position: relative;
    }
    #filter-button-desktop button{
        height: 45px;
        position: relative;
    }
    #filter-btn-arrow {
        position: absolute;
        right: 10px;
    }
    .arrow-reverse {
        transform: rotate(180deg);
    }
    #result-panel {
        top: 40px;
    }
    #sort-tool {
        width: 23.5%;
        padding: 4px 0px 4px 15px;
    }
    #sort-tool p {
        padding-top: 4px;
    }
    #sort-tool > p + p {
        margin-top: 0 !important;
        font-weight: 900;
    }
    #sort-btn:hover {
        cursor: pointer;
        color: #6ed97d;
    }
    #sort-selection {
        margin: 0 15px;
        font-family: "Gotham-Black";
    }
    
    #filter-tool {
        width: 50.5%;
    }
    #dropdown-filter {
        position: relative;
        background-color: black;
        min-height: 520px;
        z-index: 9000;
        border: none;
        border-radius: 35px;
        right: 1vw;
    }
    #filter-close-btn-container {
        display: flex;
        justify-content: flex-end;
    }
    #filter-close-button-desktop {
        width: 30px;
        height: 30px;
        font-size: 16px;
        padding: 6px 8px 10px 8px;
    }
    #clear-btn {
        margin: 0 auto;
    }
    #apply-btn {
        display: none;
    }
    #dropdown-sort-tool {
        position: absolute;
        right: 1px;
        top: 60px;
        background-color: black;
        height: 200px;
        z-index: 9000;
        border: none;
        border-radius: 15px;
        width: 100%;
        left: 1vw;
    }
    #dropdown-sort-tool > div {
        align-items: space-between !important;
    }
    .sort-method {
        width: 100%
    }
    #sort-reset-btn {
        font-weight: 900;
        text-align: center;
        font-size: 14px;
        font-family: "Gotham-Book";
        border-radius: 50px;
        width: 180px;
        padding: 8px 15px 8px 15px;
        margin-bottom: 15px;
        margin-top: 30px;
        font-family: "Gotham-Black"
    }

    .dropdown-desktop-active {
        display: block;
    }

    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 4.2vw;
        top: -9px;
        height: 35px !important;
    }
    .game-tag2 {
        right: 2.5vw;
        top: -9px;
        height: 35px !important;
    }
}
@media screen and (min-width: 601px) and (max-width: 815px) {
    .button, #reset-btn-desktop, 
    .icon-button > img + p {
        font-size: 12px;
    }
    #sort-tool {
        width: 40%;
    }
    #desktop-filter-counter-container {
        width: 40%;
    }
    /* #filter-button-desktop {
        width: 58%;
    } */
    #provider-search-desktop {
        width: 60%;
    }
    /* #name-search-desktop {
        width: 37%;
    } */
    #name-search-desktop > img + input::placeholder {
        position: relative;
        right: 10px;
    }
    #name-search-desktop > img + input::placeholder {
        font-size: 12px;
    }
    /* #filter-body > div {
        flex-direction: column;
    }
    #clear-btn {
        font-size: 12px !important;
    }
    #apply-btn {
        font-size: 12px !important;
    }
    #dropdown-filter {
        width: 34%;
        height: 950px;
        right: 70px;
    } */
    .filter-selection {
        font-size: 14px;
    }
    #filter-footer > ul {
        flex-direction: column;
        align-items: center;
    }
    /* #clear-btn, #apply-btn {
        margin-left: 20px;
        width: 80% !important;
    } 
    #sort-reset-btn {
        font-size: 12px !important;
        width: 150px;
        max-width: none !important;
    } */
}
@media screen and (min-width: 601px) and (max-width: 682px) {
    /* #sort-tool p {
        font-size: 10px;
    } */
    #desktop-filter-counter-container {
        width: 40%;
    }
}
@media screen and (min-width: 683px) and (max-width: 815px) {
    #desktop-filter-counter-container {
        width: 34%;
    }
}
/* @media screen and (min-width: 600px) and (max-width: 716px) {
    #antiguo {
        margin: 5px 0 5px 0;
    }
    #animales {
        margin-top: 10px;
    }
} */
@media screen and (min-width: 816px) and (max-width: 909px) {
    .button, #reset-btn-desktop, 
    #name-search-desktop > img + input::placeholder, 
    .icon-button > img + p {
        font-size: 12px;
    }
    #sort-tool {
        width: 30%;
    }
    #desktop-filter-counter-container {
        width: 30%;
    }
    /* #filter-button-desktop {
        width: 68%;
    }
    #filter-body > div {
        flex-direction: column;
    }
    #clear-btn {
        font-size: 12px !important;
    }
    #apply-btn {
        font-size: 12px !important;
    }
    #dropdown-filter {
        width: 34%;
        height: 950px;
    } */
    #filter-footer > ul {
        flex-direction: column;
        align-items: center;
    }
    /*#clear-btn, #apply-btn {
        margin-left: 20px;
        width: 80% !important;
    } */
    #sort-reset-btn {
        font-size: 14px !important;
    }
}
@media screen and (min-width: 910px) and (max-width: 1010px) {
    .button, #reset-btn-desktop, 
    #name-search-desktop > img + input::placeholder, 
    .icon-button > img + p {
        font-size: 12px;
    }
    /* #sort-tool p {
        font-size: 10px;
    } */
    #desktop-filter-counter-container {
        width: 26%;
    }
}
@media screen and (min-width: 1011px) and (max-width: 1110px) {
    .button, #reset-btn-desktop, 
    #name-search-desktop > img + input::placeholder, 
    .icon-button > img + p  {
        font-size: 14px;
    }
    /* #sort-tool p {
        font-size: 11px;
    } */
    #desktop-filter-counter-container {
        width: 26%;
    }
}
/*@media screen and (min-width: 1111px) and (max-width: 1200px) {
    #sort-tool p {
        font-size: 12px;
    }
} */
@media screen and (min-width: 1200px) {
    .game-tag1-big, 
    .game-tag3-big,
    .game-tag2-big, 
    .game-tag4-big {
        top: -12px;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1440px) {
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 3.6vw;
        top: -12px;
        height: 50px !important;
    }
    .game-tag2 {
        right: 2.3vw;
        top: -12px;
        height: 50px !important;
    }
}


@media screen and (min-width: 1441px) and (max-width: 1600px) {
    #provider-search-desktop {
        width: 60%;
    }
    /* #name-search-desktop {
        width: 40%;
    } */
    #desktop-filter-container {
        max-height: 300px;
    }
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 3.2vw;
        top: -12px;
        height: 50px !important;
    }
    .game-tag2 {
        right: 2vw;
        top: -12px;
        height: 50px !important;
    }
}

@media screen and (min-width: 1601px) and (max-width: 1800px) {
    #provider-search-desktop {
        width: 70%;
    }
    /* #name-search-desktop {
        width: 29%;
    } */
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 2.9vw;
        top: -12px;
        height: 50px !important;
    }
    .game-tag2 {
        right: 2vw;
        top: -12px;
        height: 50px !important;
    }
    #sort-tool {
        padding: 4px 0px 4px 10px;
    }
    #sort-tool p {
        font-size: 14px;
    }
}

@media screen and (min-width: 1801px) and (max-width: 2000px) {
    #provider-search-desktop {
        width: 70%;
    }
    /* #name-search-desktop {
        width: 29%;
    } */
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 55px;
        top: -12px;
        height: 50px !important;
    }
    .game-tag2 {
        right: 35px;
        top: -12px;
        height: 50px !important;
    }
}

@media screen and (min-width: 2001px) and (max-width: 2400px) {
    .tag-button > img{
        position: relative;
        top: 5px;
    }
    #tag6 > img {
        top: 0 !important;
        bottom: 0;
    }
    
    #provider-search-desktop {
        width: 70%;
    }
    /*#name-search-desktop {
        width: 29%;
    } */
    .filter-column label, .sort-label {
        font-size: 14px;
    }
    #dropdown-filter {
        height: 660px;
    }
    input[type="checkbox"], 
    input[type="radio"] {
        margin-bottom: 6px !important;
    }
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 65px;
        top: -12px;
        height: 50px !important;
    }
    .game-tag2 {
        right: 40px;
        top: -12px;
        height: 50px !important;
    }
}

@media screen and (min-width: 2401px) {
    .tag-button > img{
        position: relative;
        top: 8px;
    }
    #tag6 > img {
        top: 2px !important;
        bottom: 0;
    }
    
    #provider-search-desktop {
        width: 80%;
    }
    /* #name-search-desktop {
        width: 19%;
    } */
    .filter-column label, .sort-label {
        font-size: 14px;
    }
    #dropdown-filter {
        height: 660px;
    }
    #name-search-desktop > img + input::placeholder {
        position: relative;
        right: 10px;
    }
    input[type="checkbox"], 
    input[type="radio"] {
        margin-bottom: 5px !important;
    }
    .game-tag1, 
    .game-tag3, 
    .game-tag4 {
        right: 70px;
        top: -12px;
        height: 50px !important;
    }
    .game-tag2 {
        right: 50px;
        top: -12px;
        height: 50px !important;
    }
}