#comment-system{
	position:inherit;
	margin-left:calc(7.5% - 50px);
	display:flex;
	justify-content:center;
	align-items:center;
	width:85%;
	padding:50px;
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
	border-radius: 5px;
	background-color: rgba(170, 170, 170, .55);backdrop-filter: blur(10px);
	}
.main{
	position:relative;
	display:block;
	width:100%;
	height:auto;
	}
.comment-container{
	height:auto;
	z-index:2;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap-reverse;
	gap:10px 0px;
	width:100%;
	}
.write-comment{
	display:block;
	max-width:97.5vw;
	width:100%;
	}
#temporary-comments{
	display:none;
	}
#temporary-comments .comment{
    display:block;
    padding:10px;
	position:relative;
	max-width:98%;
	margin-left:0%;
	margin-top:70px
	}
#timer{display:block;width:100%;height:20px;font-size:20px}
.comment{
	position:relative;
	display:none;
	background-color: rgba(255, 255, 255, .10);
	backdrop-filter: blur(10px);
	opacity:0.6;
	border:2px solid rgb(220, 220, 220);
	border-radius:10px;
	padding:20px;
	width:100%!important;
	margin-left:0%;
	height:auto;
	font-size:20px;
	text-align:center;
	}
.comment p{
	line-height:200%;
	min-width:100%;
	margin-top:20px
	}
.comment-photo {
    max-width: 100%;
    height: auto;
}
.typograph{
	font-size:20px;
	color:#eee;
	margin:10px;
	margin-left:0px;
	text-align:left
	}
.form-control, .emojionearea .emojionearea-editor ::placeholder { 
    font-family: 'myFont', Arial, Helvetica, sans-serif;
    opacity: 1; /* Firefox */
    }

.form-control, .emojionearea .emojionearea-editor :-ms-input-placeholder { 
    font-family: 'myFont', Arial, Helvetica, sans-serif;
    }

.form-control, .emojionearea .emojionearea-editor ::-ms-input-placeholder { 
    font-family: 'myFont', Arial, Helvetica, sans-serif;
    }
.form-control{
      font-family: 'myFont', Arial, Helvetica, sans-serif;
      color: #eee;
      background-color: black;
      opacity: 0.7;
	  width:100%;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      z-index: 1000; /* Verhoog de z-index indien nodig */
	  word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: pre-wrap; /* Zorgt ervoor dat witruimte behouden blijft */
    }
#comment {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap; /* Zorgt ervoor dat witruimte behouden blijft */
}

#reply {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap; /* Zorgt ervoor dat witruimte behouden blijft */
}

.emoji-area {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap; /* Zorgt ervoor dat witruimte behouden blijft */
}
.comment-text,
.reply-text,
.emoji-area,
textarea,
input {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap; /* Zorgt ervoor dat witruimte behouden blijft */
    max-width: 100%; /* Zorgt ervoor dat de elementen niet breder worden dan hun container */
    box-sizing: border-box; /* Zorgt ervoor dat padding en borders bij de breedte worden opgeteld */
}
.form-control:focus{
      outline: none;
      background-color: black;
      opacity: 0.6;
    }
.reply-input{
	display:none;
	position:relative;
	}
.btn-reply{
	color:white;
	background-color: rgba(255, 255, 255, .10);
	backdrop-filter: blur(10px);
	opacity:0.9;
	border-radius:.25rem;
	border:1px solid #eee;
	width:100%;
	display:none;
	position:inherit;
	height:50px;
	margin-top:10px;
	line-height:50px;
	font-size:1rem;
	font-weight:400;
	cursor:pointer;
	vertical-align:middle;
	position:relative;
}
.btn{
	color:white;
	background-color: rgba(255, 255, 255, .10);
	backdrop-filter: blur(10px);
	opacity:0.9;
	border-radius:.25rem;
	border:1px solid #eee;
	width:100%;
	display:block;
	height:50px;
	margin-top:10px;
	line-height:50px;
	font-size:1rem;
	font-weight:400;
	cursor:pointer;
	vertical-align:middle;
	position:relative;
	}
b, strong{
	font-weight:bolder
	}
#display-comments{
	display:block;
}
.view-comment-button, .hide-comment-button{
	font-size:20px;
	margin-top:15px;
	padding-left:0;
	margin-left:0;
	background:none;
	border:none;
	color:#eee;
	text-decoration:none;
	cursor:pointer;
	position:relative;
	float:left;
	left:0%;
	width:200px;
	text-align:left;
	height:50px
	}
#pagination-list{
	position:relative;
	float:right;
	right:2%;
	margin-top:15px;
	height:50px;
	}
.pagination{
	font-size:20px;
	list-style-type:none;
	}
.pagination a{
	text-decoration:none;
	color:#eee
	}
.pagination li .active-page{
	color:black;
	font-size:22px
	} 
 .comment-option, .comment-save-cancel{
	margin:0px 0px 15px 5px;
	text-align:left;
	display:flex;
    justify-content: center;
    align-items: center;
	gap:80px;
	}
.reply-button, .edit-button, .delete-button, .save-button, .cancel-button{
	margin-top:0px;
	font-size:14px;
	background:none;
	border:none;
	color:rgb(0, 0, 200);
	text-decoration:none;
	cursor:pointer;
	position:relative
	}
.like-button {
    background: none;
    border: none;
    color: red;
    font-size: 1.2em;
    cursor: pointer;
	position:absolute;
	float:right;
	right:10px;
}