/* ../assets/css/items.css */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #697367;
  color: #fff;
}

img {
  height: 25px;
  width: 25px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 100px auto 0;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.title,
.header {
  font-family: "Cabin", sans-serif;
  font-size: larger;
  margin-bottom: 20px;
}

.header {
  text-align: center;
}

.top-bar {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.table {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: 1px solid #464d457e;
  border-radius: 5px;
  box-shadow: 0 0 5px 5px #464d45;
  background: #464d457e;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

@media (max-width: 768px) {
  .left {
    flex-direction: column;
    align-items: start;
  }
}

.verkoopitem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info {
  margin-top: 20px;
}

.titel,
.prijs,
.detail {
  display: flex;
  align-items: center;
}

.titel {
  display: flex;
  justify-content: center;
  text-align: center;
  height: 50px;
}

.prijs {
  justify-content: center;
  align-items: center;
  height: 20px;
  padding: 10px;
}

.detail {
  width: 100%;
  padding: 4px 6px;
  cursor: pointer;
  background-color: #464d45;
  border: none;
  border-radius: 4px;
  justify-content: center;
  margin-top: 10px;
}

.detail a {
  text-decoration: none;
  color: #fff;
}

.detail:hover {
  background: #323631;
}

.verkoopfoto {
  display: flex;
  width: 200px;
  margin: 20px;
  height: auto;
}

.image {
  display: flex;
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
  position: relative;
  height: auto; /* Hoogte dynamisch instellen */
  max-height: 450px; /* Maximale hoogte instellen */
  margin-top: 10px;
}

#current-image {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Stel de hoogte in op 100% */
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
  overflow: hidden;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg); /* Centreer het watermerk en draai met 45 graden */
  font-size: 16px; /* Grootte van het watermerk aanpassen */
  color: rgba(
    255,
    255,
    255,
    0.05
  ); /* Halfdoorzichtige witte kleur voor het watermerk */
  z-index: 2; /* Zorg ervoor dat het watermerk bovenop de overlay wordt weergegeven */
  pointer-events: none; /* Zorg ervoor dat het watermerk geen interactie heeft met de gebruiker */
  white-space: nowrap; /* Voorkom dat tekst wordt afgebroken */
  line-height: 1.5; /* Spatie tussen de verschillende lijnen */
}

.watermark::before {
  content: "COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII \A \A \A \A COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII \A \A \A \A COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII \A \A \A \A COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII \A \A \A \A COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII \A \A \A \A COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII \A \A \A \A COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII COLLECTORWWII"; /* Tekst die moet worden herhaald */
  position: relative; /* Absoluut gepositioneerd ten opzichte van de overlay */
  top: 0; /* Positie bovenaan de overlay */
  left: 0; /* Positie links van de overlay */
  transform-origin: left top; /* Draaipunt linksboven */
  white-space: pre; /* Behoudt de witruimtes en nieuwe regels */
}