/*review-recept-publiceren.css*/
/*De reviews over een recept staan in het recept zelf - review-publiceren-####.html*/

/* Tabel container voor scrollen - Pas de hoogte aan zoals je wilt */
.table-container{
width: 89.44444%;
overflow: hidden;
border: 1px solid green;
border-radius: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-top: 10px;
margin-left:45px;
background-color:#f0f3e7;
max-height: 300px; /* Pas dit aan naar je gewenste hoogte */
}

.table-container h1{
font-size:1.0em;
color:green;
font-style:italic;
margin:2px 0;
font-weight:normal;
text-shadow:1px 1px 1px #c0c0c0;
text-align:center
}

/* Algemeen stijlen voor de tabellen */
table{
width: 100%;
font-size:0.9em;
border-collapse: collapse;background-color:#fff;
table-layout: fixed; /* Zorgt ervoor dat de kolommen dezelfde breedte krijgen */
}

th, td{
padding: 4px 4px;
text-align: left;
border: 1px solid #ddd;
word-wrap: break-word;
vertical-align: top; /* Zorgt ervoor dat de tekst aan de bovenkant van de cel staat */
}

th{
background-color: #f2f2f2;
}

/* Kolombreedte verdeling: de tweede kolom (met sterren) wordt 50px */
.sticky-header th:nth-child(2), table td:nth-child(2){
width: 20px;
text-align:center; padding:2px
}

/* Verander de breedte van de andere kolommen om te zorgen dat ze gelijkmatig verdeeld worden */
.sticky-header th:nth-child(1), .sticky-header th:nth-child(3), table td:nth-child(1), table td:nth-child(3){
width: 50.0%;
padding:2px /* Zorg ervoor dat de overige kolommen zich flexibel aanpassen */}

/* Maak de tabelbody scrollbaar */
.reviews-body-wrapper{
display: block;
overflow-y: auto; /* Zorgt ervoor dat alleen de tbody scrollt */
overflow-x: hidden; /* Verbergt de horizontale scrollbar */
max-height: 400px; /* Stelt een maximale hoogte in voor de scrollbare ruimte */
}

/* Sticky Header */
.sticky-header thead, .sticky-header th{
position: sticky;
top: 0;
background-color: #f2f2f2;
z-index: 1; /* Zorgt ervoor dat de header boven de inhoud blijft */
}

/* Styling voor de antwoorden */
.answer-container{
background-color: beige;
padding: 5px;
border-top: 0px solid #ddd;
font-style: italic;
width: 100%; /* Zorgt ervoor dat het antwoord zich over de hele breedte uitstrekt */
min-height: 20px; /* Zorgt voor een minimumhoogte */
max-height: 80px; /* Maximale hoogte van de answer-container */
overflow-y: auto; /* Zorgt ervoor dat lange antwoorden scrollbaar zijn */
}

/* Verwijder padding alleen van de td-cel waarin de answer-container zit */
td.answer-cell{
padding: 0; /* Verwijdert de padding in deze specifieke td */
}

/* Verberg de scrollbars */
.reviews-body-wrapper::-webkit-scrollbar{
width: 0px;
height: 0px;
}

.reviews-body-wrapper::-webkit-scrollbar-thumb{
background: transparent;
}

/* Voor Firefox */
.reviews-body-wrapper{
scrollbar-width: none;
}

/* Styling voor de "meer" knop */
.show-more-btn{
display: block;
font-size:1.0em;
background-color: green;
color: white;
padding: 5px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 0px;
margin-bottom:5px;
text-align: center;
width: 95%; /* Maak de knop breed zodat deze mooi onder de tekst staat */
margin-left: auto;  /* Center horizontaal */
margin-right: auto; /* Center horizontaal */        }

.show-more-btn:hover{
background-color: red;
}

/* Styling voor de "scrollen voor meer" knop */
.scroll-more-btn{
display: none; /* Verberg de knop in eerste instantie */
display: block;
background-color: green;
font-size:1.0em;
color: white;
padding: 5px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
text-align: center;
width: 89.44444%;
margin-top: 5px;
margin-bottom:5px;
margin-left: 45px;  /* Center horizontaal */
margin-right: auto; /* Center horizontaal */        }
}

.scroll-more-btn:hover{
background-color: #0b7dda;
}