@charset "utf-8";

.comment-wrap-c { display: flex; gap: 20px; padding: 0px 15px; }

.comment-box-c img { margin: 0px !important; }

.comment-box-c textarea { margin: 0px 0px 10px !important; width: unset !important; text-indent: 0px !important; }

.comment-image-labal-c input { display: none; }

.comment-image-labal-c { width: 80px; height: 80px; display: block; border-radius: 50%; overflow: hidden; cursor: pointer; transition: box-shadow 0.3s ease-in-out; }

.comment-image-labal-c:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 6px 20px; }

.comment-image-labal-c img { width: 100%; object-fit: cover; }

.comment-form-c { display: flex; flex-direction: column; width: calc(100% - 100px); }

.comment-form-text, .comment-form-name { padding: 10px; border-radius: 10px; font-size: 18px; border: 1px solid rgb(194, 162, 162); }

.comment-form-name { width: 100%; display: block; font-size: 18px; outline: none; transition: border-color 0.3s ease-in-out; margin-bottom: 10px; }

.comment-form-text { resize: none; outline: none; margin-bottom: 10px; }

.comment-form-text:focus { border-color: rgb(52, 152, 219); box-shadow: rgba(52, 152, 219, 0.5) 0px 0px 10px; }

.comment-form-name:focus { border-color: rgb(52, 152, 219); box-shadow: rgba(52, 152, 219, 0.5) 0px 0px 10px; }

.comment-label-files-c { cursor: pointer; display: flex; align-items: center; gap: 10px; }

.comment-label-files-c:hover img { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 6px 20px; }

.comment-label-files-c input { display: none; }

.comment-label-files-c img { width: 50px !important; aspect-ratio: 1 / 1; }

.comment-label-files-c img { font-size: 17px; }

.comment-form-bottom { display: flex; justify-content: space-between; }

.comment-form-button { background-color: blue; border: none; color: white; font-size: 18px; cursor: pointer; border-radius: 10px; padding: 10px 20px; }

@media (max-width: 524px) {
  .comment-label-files-c span { display: none; }
  .comment-image-labal-c { width: 50px; height: 50px; }
  .comment-form-c { width: calc(100% - 70px); }
}

.modal { display: none; position: fixed; z-index: 1; left: 0px; top: 0px; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); }

.modal-content { top: 20%; position: relative; max-width: 400px; right: 0px; left: 0px; margin: 0px auto; background: none 0% 0% repeat scroll rgb(255, 255, 255); text-align: center; padding: 10px 10px 20px; border-radius: 10px; animation: 0.7s ease 0s 1 normal none running pop-up-appear; }

.close { position: absolute; top: 0px; right: 10px; font-size: 30px; font-weight: bold; cursor: pointer; }

.form-container { margin-top: 10px; }

.form-container h2 { margin-top: 0px; }

.article h2 { font-size: 1.25em; margin-bottom: 16px; }

.form-container form { align-items: center; display: flex; flex-direction: column; margin-top: 20px; }

.form-container form { max-width: 525px !important; }

.form-container input { width: 90%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 16px; }

.form-container input { width: 90%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 16px; }

.form-container input[type="submit"] { background-color: rgb(76, 175, 80); color: rgb(255, 255, 255); border: none; cursor: pointer; }

.form-container input { width: 90%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 16px; }

.result-1 { display: none; padding: 30px 20px; }

.comment-title-c { font-size: 22px; font-weight: bold; padding: 0px 20px; }