body {

margin: 0;

font-family: Arial;

overflow: hidden;

}

#pageContainer {

display: flex;

height: 100vh;

}

#imageOverlay {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,.9);

justify-content: center;

align-items: center;

z-index: 9999;

}

#overlayImage {

max-width: 95%;

max-height: 95%;

object-fit: contain;

cursor: pointer;

}

/* ::: LEFT FILTER COLUMN ::: */

#leftMenu {

width: 280px;

overflow-y: auto;

padding: 15px;

border-right: 1px solid #ccc;

background: #f5f5f5;

box-sizing: border-box;

}

/* ::: EXTERNAL SITE BUTTONS ::: */

#externalButtons {

  display: flex;

  flex-direction: column;

  gap: 20px;

  align-items: center;

  margin-bottom: 20px;

}

#mainMenuButton,
#kmtcPicturesButton {

  background: #1157d8;

  color: white;

  border: 3px solid white;

  border-radius: 10px;

  padding: 16px 40px;

  font-size: 24px;

  cursor: pointer;

  box-shadow:
    0 4px 10px
    rgba(0,0,0,.35);

}

.menuSection {

margin-bottom: 25px;

}

.menuSection h3 {

margin-bottom: 10px;

}

.menuButton {

width: 100%;

padding: 8px;

margin-bottom: 8px;

cursor: pointer;

}

.menuContent {

display: none;

max-height: 300px;

overflow-y: auto;

padding-left: 8px;

}

#clearFiltersButton {

width: 100%;

padding: 10px;

margin-bottom: 20px;

cursor: pointer;

}

/* ::: RIGHT THUMBNAIL AREA ::: */

#thumbnailArea {

flex: 1;

overflow-y: auto;

padding: 20px;

box-sizing: border-box;

}

#thumbnailGrid {

display: grid;

grid-template-columns:
repeat(
auto-fill,
minmax(180px,1fr)
);

gap: 20px;

}

/* ::: ACTIVE FILTERS ::: */

#clearFiltersButton.filtersActive {

  background: #d02020;

  color: white;

  font-weight: bold;

  border: 3px solid white;

}

/* ::: THUMBNAIL CARD ::: */

.thumbnailCard {

border: 1px solid #ccc;

padding: 10px;

background: white;

}

.thumbnailCard img {

width: 100%;

height: 160px;

object-fit: contain;

background: #eee;

}

.thumbnailTitle {

font-size: 14px;

margin-top: 8px;

word-break: break-word;

}

.checkboxRow {

margin-bottom: 4px;

}