/* Single Ticket Style Sheet */

.thub-ticket-details>h3,
.thub-ticket-details>div:not(.thub-ticket-images):not(.thub-related-tickets),
.thub-ticket-details>a,
.thub-ticket-comments {
  padding-bottom: 20px;
}

.thub-ticket-details>h3 {
  margin-top: 30px;
}

.thub-ticket-comment {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.thub-ticket-details h4,
.thub-ticket-comments h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.thub-ticket-comments h4 {
  font-size: 1.5rem;
}

.thub-ticket-attachments {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.thub-back-to-archive {
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  padding-bottom: unset !important;
  margin-left: 5px;
}

.thub-back-to-archive svg {
  margin-right: 10px;
}

.thub-back-to-archive:hover {
  border-bottom: 2px solid #000000;
}

.thub-ticket-image {
  width: 300px;
  transition: filter 0.3s ease;
}

.thub-ticket-image:hover {
  filter: brightness(50%);
}

.thub-ticket-info {
  display: flex;
  justify-content: space-between;
}

.thub-comment-date>p {
  color: #999;
}

.thub-image-container {
  width: min-content;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thub-image-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  max-height: 100%;
  max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67.3 67.24'%3E%3Cstyle%3E.st0%7Bfill:%23FFFFFF;%7D%3C/style%3E%3Cg transform='translate(0 -0.17)'%3E%3Cpath class='st0' d='M33.83,2.35c-17.72,0-32.08,14.36-32.08,32.08s14.36,32.08,32.08,32.08s32.08-14.36,32.08-32.08 C65.9,16.72,51.54,2.37,33.83,2.35 M33.83,62.95c-15.75,0-28.52-12.76-28.53-28.51c0-15.75,12.76-28.52,28.51-28.53 c15.75,0,28.52,12.76,28.53,28.51c0,0,0,0.01,0,0.01C62.33,50.17,49.57,62.93,33.83,62.95'/%3E%3Cpath class='st0' d='M44.52,32.65h-8.91v-8.91c0-0.98-0.8-1.78-1.78-1.78c-0.98,0-1.78,0.8-1.78,1.78l0,0v8.91h-8.91 c-0.98,0-1.78,0.8-1.78,1.78c0,0.98,0.8,1.78,1.78,1.78l0,0h8.91v8.91c0,0.98,0.8,1.78,1.78,1.78c0.98,0,1.78-0.8,1.78-1.78v-8.91 h8.91c0.98,0,1.78-0.8,1.78-1.78C46.31,33.45,45.51,32.65,44.52,32.65'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thub-image-container:hover::after {
  opacity: 1;
}

.thub-comment-wrapper {
  position: relative;
}

.thub-vertical-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #eee;
  border-radius: 5px;
}

.thub-comment-area {
  resize: none;
  font-size: 1rem;
  padding: 30px;
  background: #eee;
  border-radius: 5px;
  border: none;
  margin-bottom: 30px;
  color: #24133b;
  max-width: 600px;
}

.thub-comment-area::placeholder {
  color: #24133b;
}

.thub-ticket-details+hr {
  background-color: #D1D1D1;
  margin-bottom: 50px;
  height: 1px;
  border: 0;
}

/* Lightbox */

.thub-lightbox-backdrop {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.thub-lightbox-content {
  margin: 10% auto;
  display: flex;
  max-width: 100vw;
}

.thub-lightbox-backdrop img {
  -webkit-animation-name: zoom;
  animation-name: zoom;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.thub-related-tickets {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  background-color: #eee;
  padding: 10px 15px 10px 30px;
  border-radius: 50px;
  flex-shrink: 1;
  margin-bottom: 20px;
}

.thub-related-tickets>div:not(:first-child) {
  background-color: #000;
  padding: 8px 16px;
  border-radius: 25px;
}

.thub-related-tickets>div:not(:first-child) a {
  color: #eee;
  text-decoration: none;
}

.thub-related-tickets>div:not(:first-child):hover {
  background-color: #262626;
}

#thub-comment-form {
  display: flex;
  flex-direction: column;
}

#thub-comment-form .thub-button {
  width: fit-content;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.thub_ticket-comment-form .logged-in-as {
  display: none;
}

@media (max-width: 999px) {
  .thub-ticket-info {
    display: unset;
  }

  .ticket-field {
    padding-bottom: 20px;
  }
}

.thub-ticket-details::before {
  content: '';
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="13" viewBox="0 0 22 13"><g id="Gruppe_54" data-name="Gruppe 54" transform="translate(21.648 13) rotate(180)"><g id="Gruppe_53" data-name="Gruppe 53" transform="translate(-0.355)"><path id="Pfad_16" data-name="Pfad 16" d="M21.639,6.363a1.071,1.071,0,0,0-.258-.657L16.289.3A1.093,1.093,0,0,0,14.9.217a.994.994,0,0,0,.01,1.392l3.58,3.8H.955a.955.955,0,1,0,0,1.909H18.487l-3.58,3.8a1.052,1.052,0,0,0-.01,1.392,1.079,1.079,0,0,0,1.392-.08l5.092-5.41A.919.919,0,0,0,21.639,6.363Z" transform="translate(0.364 0)" /></g></g></svg>');
  display: inline-block;
  width: 22px;
  height: 13px;
}