* {
    font-family: "Arial", sans-serif;
    /*font-family: "Calisto MT", "Big Caslon", "Garamond", "Georgia", "Times New Roman", serif;*/
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/*Content*/
.content {
    color: rgb(0, 0, 0);
    /*background-color: rgb(255, 255, 255);*/
    max-width: 1100px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

/*links*/
a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: rgb(73, 73, 73);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
} 

a:visited {
    color: #000000;
    text-decoration-color: #000000;
}

a:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

a:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

hr {
    border-top: 1px solid #858585
}

.rpgid-link {
    color: #0057c9;
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: #0057c9;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
} 

.rpgid-link:visited {
    color: #0057c9;
    text-decoration-color: #0057c9;
}

.rpgid-link:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

.rpgid-link:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

.boardgameid-link {
    color: #706e00;
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: #706e00;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
} 

.boardgameid-link:visited {
    color: #706e00;
    text-decoration-color: #706e00;
}

.boardgameid-link:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

.boardgameid-link:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

.videogameid-link {
    color: #d30023;
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: #d30023;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
} 

.videogameid-link:visited {
    color: #d30023;
    text-decoration-color: #d30023;
}

.videogameid-link:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

.videogameid-link:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}


.black-link {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: rgb(73, 73, 73);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
} 

.black-link:visited {
    color: black;
}

.black-link:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

.black-link:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

.rpgid-link {
    color: #0057c9;
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: #0057c9;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
} 

.influence {
    color: #666;
    font-weight: normal;
    text-decoration: none;
    text-decoration-color: #666;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    font-size: 12px;
} 

.influence:visited {
    color: #666;
    text-decoration-color: #666;
}

.influence:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

.influence:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

#logo:visited {
    color: rgb(0, 0, 0);
    text-decoration-color: #494949;
}

#logo:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

#logo:active {
    color: rgb(231, 123, 0);
    text-decoration-color: rgb(231, 123, 0);
}

nav a:visited {
    color: rgb(0, 0, 0);
    text-decoration-color: #494949;
}

nav a:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

nav a:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

.understated-link {
    color: #666;
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: rgb(73, 73, 73);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
} 

.understated-link:visited {
    color: #666;
    text-decoration-color: #858585;
}

.understated-link:hover {
    color: rgb(211, 0, 35);
    cursor: pointer;
    text-decoration-color: rgb(211, 0, 35);
}

.understated-link:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

/*text*/
h1 {
 font-weight: normal;
 color: #d30023;
}

.main-text {
    position: relative;
    padding: 0 10px;
    /*padding-top: 10px;*/
}

.red-text {
    color: #d30023;
}

.blue-text {
    color: #0057c9;
}

.grey-text {
    color: #666
}

.rated-text {
    color: #008A0B;
    margin-right: 10px;
}

.owned-text {
    color: #b900b9;
    margin-right: 10px;
}

.rated-span {
    color: #008A0B;
}

.owned-span {
    color: #b900b9;
}


/*body*/
body {
    background-color:#ffffff;
    margin-bottom: 125px;
}

/*header*/
header {
      border-bottom: solid 1px #c7c7c7;
      color: rgb(0, 0, 0);
      margin-bottom: 20px;
}

.headerFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    max-width: 1100px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px
}

#logo {
    font-weight: normal;
}

nav {
    margin-left: auto
}

nav li {
    display: inline-block;
    padding-left: 25px;
}

.highlight {
    position: relative;
}

.highlight::before {
    content: '';
    position: absolute;
    top: -10px; /* Adjust as needed */
    left: -10px; /* Adjust as needed */
    right: -10px; /* Adjust as needed */
    bottom: -10px; /* Adjust as needed */
    border: 1px solid #d30023; /* Change this to your preferred outline color and thickness */
    z-index: -1;
    animation: fadeOut 2.5s forwards; /* Adjust the duration as needed */
}

@keyframes fadeOut {
    0% {
        border-color: #d30023;
    }
    100% {
        border-color: transparent;
    }
}

/*input*/
.formContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

#homepageSubmit {
    padding-top:10px;
}

.form-inline {
    display: flex;
    flex-grow: 1;
    align-items: center;
    margin-bottom: 0px;
}

.textInput {
    flex-grow: 1;
    margin-right: 0px;
    border: 0;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-top: 7px;
    
}

#username-submit-btn {
    border-radius: 5px;
    padding: 7px 0px 7px 16px;
}

#bgg-username-input {
    outline: 1px solid rgb(199, 199, 199);
    /*max-width: 29ch;*/
}
    
#bgg-username-input:hover {
    outline: 1px solid #9e9e9e; /* Sets a 2px dashed red outline on focus */
}

#bgg-username-input:focus {
    outline: 1px solid rgb(0, 0, 0); /* Sets a 2px dashed red outline on focus */
}

/*buttons
.button {
    background-color: rgb(45, 54, 61);
    border: 0;
    outline: none;
}

.button:hover{
    background-color: rgb(155, 0, 26);
    cursor: pointer;
    border: 0;
    outline: none;
}

.button:active{
    background-color: rgb(114, 0, 19);
    border: 0;
    outline: none;
}*/


/*filters*/
.filter-type-label {
    margin-right: 10px;
    margin-bottom: 5px;
}

.filter-label {
    margin-right: 10px;
}

.filter-label-header {
    margin-bottom: 5px;
    margin-right: 10px;
}

.filters-subsection {
    margin-bottom: 10px;
}

.filters-bottom-section {
    margin-bottom: 0px;
}


/* The switch - the box around the slider */
/* Common Styles */
.filter-group {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    grid-auto-rows: min-content;
    column-gap: 20px; /* Horizontal gap */
    row-gap: 0px; /* No vertical gap */
    justify-content: start;
  }

.filter-group > div {
  padding-right: 20px; /* Add some padding inside the divs */
  border-right: 1px solid #888; /* Add border between columns */
}

.filter-group > div:nth-child(3n) {
    border-right: none; /* Remove border from the last column in each row */
  }

.platform-checkbox-group {
  column-count: 5; /* or 2, or auto for responsiveness */
  column-gap: 0em;
  margin-top: 0.5em;
}

.platform-checkbox-group label {
  display: block;
  break-inside: avoid;
  font-size: 1em;
  cursor: pointer;
  padding: 2px 0;
}
.platform-checkbox-group input[type="checkbox"] {
  margin-right: .5em;
}

@media (max-width: 1005px) {
    .platform-checkbox-group {
        column-count: 4; /* or 2, or auto for responsiveness */
        column-gap: 0em;
        margin-top: 0.5em;
    }
}

@media (max-width: 890px) {
    .platform-checkbox-group {
        column-count: 3; /* or 2, or auto for responsiveness */
        column-gap: 0;
        margin-top: 0.5em;
    }
}

@media (max-width: 680px) {
    .platform-checkbox-group {
        column-count: 2; /* or 2, or auto for responsiveness */
        column-gap: 0em;
        margin-top: 0.5em;
    }
}

@media (max-width: 430px) {
    .platform-checkbox-group {
        column-count: 1; /* or 2, or auto for responsiveness */
        column-gap: 0em;
        margin-top: 0.5em;
    }
}
  
@media (max-width: 800px) {
    
    .filter-group {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        grid-auto-rows: min-content;
        column-gap: 20px; /* Horizontal gap */
        row-gap: 0px; /* No vertical gap */
        justify-content: start;
    }
    .filter-group > div {
        padding-right: 20px; /* Add some padding inside the divs */
        border-right: none;
    }
    .filter-group > div:nth-child(1n) {
        border-right: 1px solid #888;; /* Remove border from the last column in each row */
    }
    .filter-group > div:nth-child(2n) {
        border-right: none; /* Remove border from the last column in each row */
    }
}

.recommender-link::after {
    content: 'TabletopRecommender';
}

@media (max-width: 550px) {
    nav li {
        display: inline-block;
        padding-left: 10px;
    }

    .recommender-link::after {
        content: 'TabletopRecommender';
    }
    .recommender-link {
        visibility: hidden;
    }
    .recommender-link::after {
        visibility: visible;
    }
}

  
@media (max-width: 550px) {
    .filter-group {
      grid-template-columns: 1fr; /* One column on small screens */
    }
    .filter-group > div:nth-child(1n) {
        border-right: none; /* Remove border from the last column in each row */
    }
}

@media (max-width: 390px) {
    nav li {
        display: inline-block;
        padding-left: 1px;
    }

    .recommender-link::after {
        content: 'Recommender';
    }
    .recommender-link {
        visibility: hidden;
    }
    .recommender-link::after {
        visibility: visible;
    }
}
  
.filter-group-two-column {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-auto-rows: min-content;
    column-gap: 20px; /* Horizontal gap */
    row-gap: 0px; /* No vertical gap */
    justify-content: start;
}

.filter-group-two-column  > div {
    padding-right: 20px; /* Add some padding inside the divs */
    border-right: 1px solid #888; /* Add border between columns */
  }
  
.filter-group-two-column  > div:nth-child(2n) {
    border-right: none; /* Remove border from the last column in each row */
}
  
@media (max-width: 810px) {
    .filter-group-two-column {
      grid-template-columns: 1fr; /* Two columns on medium screens */
    }

    .filter-group-two-column  > div:nth-child(1n) {
        border-right: none; /* Remove border from the last column in each row */
    }
}
  
  
.filter-header {
    padding: 10px;
    margin-bottom: 0px;
}
  
  

.switch-wrapper-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 5px;
}

.switch-wrapper-stacked {
    margin-bottom: 5px;
}

.switch-label {
    margin-left: 5px;
}

/* Switch styles */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .2s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

.select-only-group {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* Hide original radio button */
input[type="radio"] {
    display: none;
}

/* Custom radio button style */
.radio-wrapper-inline {
    display: inline-block;
    margin-right: 20px;
}

.radio-label {
    cursor: pointer;
    position: relative;
    padding-left: 24px;
}

.radio-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: px solid #000000; /* Border color */
    border-radius: 50%;
    background-color: #ccc; /* Background color */
}

input[type="radio"]:checked + .radio-label::before {
    background-color: #ffffff; /* Checked color */
    box-shadow: inset 0 0 0 3px #000000 /* Inner circle */
}

/* Boardgame Switch Color */
.boardgames-slider {
    background-color: #ccc; /* Tomato */
}

input:checked + .boardgames-slider {
    background-color: #000000; /* OrangeRed */
}

input:checked + .boardgames-slider:before {
    transform: translateX(14px);
}

/* RPG Switch Color */
.rpgs-slider {
    background-color: #ccc; /* CornflowerBlue */
}

input:checked + .rpgs-slider {
    background-color: #000000; /* RoyalBlue */
}

input:checked + .rpgs-slider:before {
    transform: translateX(14px);
}

.videogames-slider {
    background-color: #ccc; /* Tomato */
}

input:checked + .videogames-slider {
    background-color: #000000; /* OrangeRed */
}

input:checked + .videogames-slider:before {
    transform: translateX(14px);
}

/* Exclude Switch Color */
.exclude-slider {
    background-color: #ccc; /* CornflowerBlue */
}

input:checked + .exclude-slider {
    background-color: #000000; /* RoyalBlue */
}

input:checked + .exclude-slider:before {
    transform: translateX(14px);
}

.boardgames-label {
    color: #706e00;
}

.rpgs-label {
    color: #0057c9;
}

.videogames-label {
    color: #d30023;
}


.link-button {
    background: none;
    border: none;
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: #000000;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    /*text-decoration-style: dashed;
    cursor: pointer;
    padding: 0;
    font: inherit; /* Ensure the font matches the surrounding text */
}

.link-button:hover {
    color: #d30023;
    text-decoration-color: #d30023;
}

.link-button:active {
    color: #e77b00;
    text-decoration-color: #e77b00;
}

#last-updated {
    margin-right: 5px;
}

/*table*/
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
}

td {
    color: black;
    /*background-color: rgb(223, 223, 223);*/
}

th {
    /*background-color: rgb(0, 110, 255);*/
    padding-bottom: 10px;
    text-align: left;
    font-weight: normal;
}





td {
    padding: 12px 10px 12px 10px;
    border-top: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
}


.table-inline {
    margin-left: 10px; /* Adjust the spacing as needed */
    font-style: italic; /* Optional: style the category differently */
    color: #666; /* Optional: change the color */
}

.small-text {
    margin-left: 5px; 
    font-size: 15px;
}

#search-bar {
    margin-top: 5px;
    margin-bottom: 0;
}

#close-search {
    color: #006ace;
    text-decoration-color: #006ace;
}

#close-search:visited {
    color: #006ace;
    text-decoration-color: #006ace;
}

#close-search:hover {
    color: #d30023;
    text-decoration-color: #d30023;
}

#close-search:active {
    color: rgb(231, 123, 0);
    text-decoration-color: rgb(231, 123, 0);
}

#search-submit-btn {
    margin-right: 20px;
}

#update-recs-form {
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 0;
    padding-bottom: 0px;
}

#search-recs-input {
    margin-right: 10px;
    max-width: 400px;
    outline: 1px solid rgb(199, 199, 199);
}
    
#search-recs-input:hover {
    outline: 1px solid rgb(158, 158, 158); /* Sets a 2px dashed red outline on focus */
}

#search-recs-input:focus {
    outline: 1px solid rgb(0, 0, 0); /* Sets a 2px dashed red outline on focus */
}

#boardgame-type-label {
    color: #706e00;
}

#rpg-type-label {
    color: #0057c9;
}

#videogame-type-label {
    color: #d30023;
}

.boardgame-type-label {
    color: #706e00;
}

.rpg-type-label {
    color: #0057c9;
}

.videogame-type-label {
    color: #d30023;
}

.platform-label {
    color: #8f0018;
}

.rec-score{ 
    position: relative;
    color: rgb(255, 255, 255);
    text-align: right;
    /*font-weight: bold;*/
    /*text-shadow: 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black, 0px 1px 3px black;*/
    /*text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px  1px 0 #000,
        1px  1px 0 #000;*/
    z-index: 1;
 }
 
 .rec-score::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .1); /* Adjust the color and opacity as needed */
    z-index: -2; /* Ensure the pseudo-element is below the text */
}

.rec-score::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle, rgba(0, 0, 0, .5), transparent);*/
    background: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 90%);
    z-index: -1; /* Ensure the vignette is above the background image but below the text */
}

@media (max-width: 1150px) {
    .rec-score::after {
        background: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 85%);
    }
}

@media (max-width: 900px) {
    .rec-score::after {
        background: linear-gradient(to right, rgba(0,0,0,.2) 0%, rgba(0,0,0,.8) 60%);
    }
}

@media (max-width: 675px) {
    .rec-score::after {
        background: linear-gradient(to right, rgba(0,0,0,.3) 0%, rgba(0,0,0,.8) 60%);
    }
}

 .rec-score:hover { 
    cursor: pointer;
    filter: brightness(1.25);
}

.first-row td {
    border-top: none;
}

.increment-num {
    text-align: center;
    /*color: #c2c2c2;*/
}

/*update button */
#update-button {
    padding-left: 0;
    margin: 0;
}

/*more recommendations*/

#recommendations-table {
    margin-bottom: 10px;
}

#more {
    display: inline-block;
    margin-top: 10px;
}

/*footer*/
footer {
    margin-top: 20px;
    padding-bottom: 10px;
}

footer img {
    max-height: 33px;
    float: right;
}

footer img:hover {
    filter:brightness(1.25);
}

#home-footer-offset {
    height: 10px;
}

#loading {
    /*display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    text-align: center;*/
    color: #333;
}

.loader {
    border: 4px solid #ffffff; /* Light grey */
    border-top: 4px solid #006ace; /* Blue */
    border-radius: 75%;
    width: 15px;
    height: 15px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Load more button */

#no-more-btn {
    color: #666;
}


/* The overlay (background) */
.overlay {
    position: fixed;
    display: none; /* Hidden by default */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
    z-index: 1000; /* Sit on top */
    cursor: default;
}

/* Overlay content (image) */
.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    z-index: 1001; /* Ensure image is above the overlay but below the close button */
}

/* Close button */
.closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 1002; /* Ensure close button is above everything else */
    text-shadow: 0 4px 8px rgba(0, 0, 0, 1); /* Add drop shadow */
}

.closebtn:hover,
.closebtn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}




#close-overlay {
    color: white;
    text-decoration: underline;
    text-decoration-color: rgb(255, 255, 255);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

#close-overlay:hover {
    color: rgb(235, 235, 235);
    text-decoration: underline;
    text-decoration-color: rgb(235, 235, 235);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

#close-overlay:active {
    color: rgb(206, 206, 206);
    text-decoration: underline;
    text-decoration-color: rgb(206, 206, 206);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.bottom-bar-container {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(0, 0, 0); /* Optional: Background color for visibility */
    text-align: center; /* Center the content horizontally */
    z-index: 1000; /* Ensure it stays on top of other elements */
}

.bottom-bar {
    max-width: 1060px;
    margin: 0 auto; /* Center the .bottom-bar within the container */
    border-top: 1px solid rgb(0, 0, 0); /* Apply the border */
    border-collapse: collapse;
    padding: 15px 0; /* Optional: Padding for spacing */
    padding-left: 20px;
    padding-right: 20px;
}

.filter-bar-container {
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Optional: Background color for visibility */
    text-align: center; /* Center the content horizontally */
}

.filter-bar {
    max-width: 1060px;
    margin: 0 auto; /* Center the .bottom-bar within the container */
    border-top: 1px solid #c7c7c7; /* Apply the border */
    border-collapse: collapse;
    padding-top: 15px; /* Optional: Padding for spacing */
    padding-left: 20px;
    padding-right: 20px;
    
}

.back-to-top {
    /*display: none;*/ /* Hide the link initially */
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    background-color: #000000; 
    padding: 13px 20px;
    
}

.back-to-top:visited {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

.back-to-top:hover {
    color: #c7c7c7;
    text-decoration-color: #c7c7c7;
}

.back-to-top:active {
    color: white;
    text-decoration-color: white;
}

.up-arrow {
    font-size: large;
}

/* Filters overlay Panel */
.filters-overlay {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .10);
}

.filters-overlay-content {
    position: absolute;
    background-color: #ffffff;
    margin: 0px auto; /* Margin to create space outside */
    padding: 10px;
    border: #000000 solid 1px;
    width: 80%;
    max-width: 700px;
    min-width: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    border-radius: 5px; */
    max-height: 100vh;
    max-height: 100svh;
  }

  #filters-scroll {
    overflow-y: auto;
    max-height: 89vh;
    max-height: 89svh;
  }
  
.filters-closebtn {
    position: absolute;
    top: 47px;
    right: 45px;
    color: white;
    z-index: 1002; /* Ensure close button is above everything else */
}

.filters-closebtn:hover,
.filters-closebtn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#close-filters-btn {
    color: white;
    text-decoration: underline;
    text-decoration-color: rgb(255, 255, 255);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

#close-filters-btn:hover {
    color: rgb(235, 235, 235);
    text-decoration: underline;
    text-decoration-color: rgb(235, 235, 235);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

#close-filters-btn:active {
    color: rgb(206, 206, 206);
    text-decoration: underline;
    text-decoration-color: rgb(206, 206, 206);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}


@media (max-width: 600px) {
    #close-filters-btn {
        color: rgb(0, 0, 0);
        text-decoration: underline;
        text-decoration-color: rgb(0, 0, 0);
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
    }
    
    #close-filters-btn:hover {
        color: #494949;
        text-decoration: underline;
        text-decoration-color: #494949;
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
    }
    
    #close-filters-btn:active {
        color: rgb(206, 206, 206);
        text-decoration: underline;
        text-decoration-color: rgb(206, 206, 206);
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
    }
}

#apply-filters {
    margin-left: 0px;
    margin-bottom: 10px;
    
}



.range-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  display: none; /* Hide by default */
}

.range-wrapper.visible {
  display: flex; /* Show when toggled */
}

.range-wrapper input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 350px; /* Updated width */
  height: 2px; /* Adjust height */
  background: #84c4ff;
  outline: none;
  opacity: 1;
  transition: opacity .2s;
  margin: 5px 0; /* Spacing between sliders */
  position: relative;
}

.range-wrapper input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px; /* Thumb size */
  height: 15px;
  background: #006ace; /* Thumb color */
  border-radius: 50%; /* Make thumb circular */
  cursor: pointer;
}

.range-wrapper input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #006ace;
  border-radius: 50%; /* Make thumb circular */
  cursor: pointer;
}
  
.checkbox {
    transform: scale(1.25); /* Adjust the scale */
    margin: 5px 2px 0 1px;
}
#fewer-wrapper {
    margin-top: 3px;
}

.filter-indicators {
    margin-top: 10px;
}

.filter-indicator {
    font-size: .9em;
    margin-right: 10px;
    padding-top: 10px;
}

.negative-indicator {
    color: #666;
}

.filter-group-btn {
  display: inline-flex;
  margin-right: 10px;
}

.filter-btn, .only-btn, .dropfilter-btn {
    padding: 3px 12px;
    font-size: .9em;
    border: 1px solid #b3b3b3;
    background: #fff;
    color: #000000;
    cursor: pointer;
}



.filter-btn,
.only-btn,
.dropfilter-btn {
    transition: border-color 0.15s;
}

.category-btn {
    padding: 2px 5px 2px 0px;
    font-size: .9em;
    border: 0px solid #b3b3b3;
    background: #fff;
    color: #666;
    cursor: pointer;
}



.filter-btn.active,
.only-btn.active {
    background: #000000;
    border-color: #000000;
    color: #fff;
}

.only-btn.active {
    border-left-color: #fff;
}

/*.filter-btn.active[data-type="boardgames"] {
    background: #706e00;
}

.filter-btn.active[data-type="rpgs"] {
    background: #706e00;
}

.filter-btn.active[data-type="videogames"] {
    background: #706e00;
}*/

.dropfilter-btn.active {
    background: #858585;
    border-color: #858585;
    border-left-color: #fff;
    color: #fff;
}


.category-btn.active {
    background: #ffffff;
    color: #000000;
}


/* Hover state */
.filter-btn:hover,
.only-btn:hover,
.dropfilter-btn:hover {
    border: 1px solid #0057c9;
}

/* Hover state */
.category-btn:hover {
    color: #0057c9;
}

/* Hover state */
.filter-btn:active,
.only-btn:active,
.dropfilter-btn:active {
    border: 1px solid #ffffff;
}

/* Hover state */
.category-btn:active {
    color: #e77b00;
}

#double-indicator {
    color: #00af0f;
}

.add-users-field {
    border-radius: 0px;
    border: 1px solid #000000;
    padding: 5px 5px;
    background: #ffffff;
    color: #000;
    margin-right: 10px;
    max-width: 400px;
}

.year-filter-field {
    width: 60px;
    margin-left: 5px;
    border-radius: 0px;
    border: 1px solid #b3b3b3;
    padding: 2px 5px;
    background: #ffffff;
    font-size: .9em;
    color: #000;
}

.bg-player-count-filter-field {
    width: 40px;
    margin-left: 5px;
    border-radius: 0px;
    border: 1px solid #b3b3b3;
    padding: 2px 5px;
    background: #ffffff;
    font-size: .9em;
    color: #000;
}

#year-operator,
#bg-player-count-operator {
    width: 50px;
    margin-left: 5px;
    border-radius: 0px;
    border: 1px solid #b3b3b3;
    padding: 2px 5px;
    background: #ffffff;
    font-size: .9em;
    color: #000;
}

.dropfilter-btn:focus, #year-operator:focus, #bg-player-count-operator:focus {
    outline: none;
    box-shadow: none;
}

.add-users-field:focus, #year-operator:focus {
    outline: none;
    box-shadow: none;
}

.year-filter-field:focus, #year-operator:focus {
    outline: none;
    box-shadow: none;
}

.bg-player-count-filter-field:focus, #bg-player-count-operator:focus {
    outline: none;
    box-shadow: none;
}


.filter-section {
    border-bottom: 1px solid #000000;
    padding: 0px 0px 10px 0px;
}

.dropfilter-btn.section-active-boardgames {
    background: #706e00;
    color: #fff;
    border-color: #706e00;
    border-left-color: #fff;
}
.dropfilter-btn.section-active-rpgs {
    background: #0057c9;
    color: #fff;
    border-color: #0057c9;
    border-left-color: #fff;
}
.dropfilter-btn.section-active-videogames {
    background: #d30023;
    color: #fff;
    border-color: #d30023;
    border-left-color: #fff;
}

#platforms-options {
    color:#666
    /* Add your custom styles here */
}

#platforms-options label {
    margin-right: 12px;
    font-size: .9em;
    /* Add more label styles as needed */
}

#platforms-options input[type="checkbox"] {
    margin-right: 2px;
    /* Style checkboxes if desired */
}

#platforms-options input[type="checkbox"]:checked {
    accent-color: #8f0018; /* Modern browsers */
}

/* For older browsers that don't support accent-color, you can add a custom style: */
#platforms-options input[type="checkbox"]:checked + label {
    color: #8f0018;
}

#platforms-options label:has(input[type="checkbox"]:checked) {
    color: #8f0018;
}

.category-btn.active-boardgames {
    color: #706e00;
}
.category-btn.active-rpgs {
    color: #0057c9;
}
.category-btn.active-videogames {
    color: #d30023;
}

#platform-indicator {
    color: #8f0018;       
}

.category-btn.active[data-type="toggleplatforms"],
.category-btn.active-videogames[data-type="toggleplatforms"] {
    color: #8f0018;           /* Your platform color */
}

.rated-label,
.owned-label {
    font-size: inherit;
}

/* When the button is active, use different colors */
.category-btn.active .rated-label {
    color: #008A0B;         /* Example: white when active */
}
.category-btn.active .owned-label {
    color: #b900b9;         /* Example: white when active */
}

/* Default: horizontal layout */
.gametype-btn-group {
    display: inline-block;
}


/* Mobile: stack vertically */
@media (max-width: 595px) {
    .gametype-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        flex-direction: column;
    }
    
}

.expansion-btn-row {
    display: inline-block;
}


.year-group-btn {
    display: inline-block;
}

@media (max-width: 885px) {
  .year-group-btn {
    display: block;
    width: 100%;
  }
}

/* Show only the 4-wide row by default */
.ownership-btn-row-4 { display: inline-block; }
.ownership-btn-row-2x2, .ownership-btn-row-1x4 { display: none; }

/* Medium: show 2x2, hide others */
@media (max-width: 580px) {
    .ownership-btn-row-4 { display: none; }
    .ownership-btn-row-2x2 { display: inline-block; }
}

@media (max-width: 585px) {
    .expansion-btn-row {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column
        }
}