/* 18.1 compatibility layer
   Template upgraded from the DLE 10.3 generation.
   Covers template changes introduced in DLE 10.4–18.1. */

/* Ratings: DLE 10.4, 13.1 */
.rating, .unit-rating, .ratingtypeplusminus, .ratingtypeplus, .ratingtypefour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ratingzero { color: #6b7280; }
.ratingtypeplusminus .ratingplus,
.ratingtypeplusminus .ratingminus,
.ratingtypeplus .ratingplus,
.ratingtypefour .ratingplus,
.ratingtypefour .ratingminus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #d7dcdf;
  border-radius: 4px;
  background: #fff;
  color: #376273;
  cursor: pointer;
}
.ratingtypeplusminus .ratingplus:hover,
.ratingtypeplus .ratingplus:hover,
.ratingtypefour .ratingplus:hover { color: #16833d; border-color: #83bb94; }
.ratingtypeplusminus .ratingminus:hover,
.ratingtypefour .ratingminus:hover { color: #c23a31; border-color: #dca29d; }
.ratingtypefour .ratingplus svg,
.ratingtypefour .ratingminus svg { width: 16px; height: 16px; fill: currentColor; }

/* Tree comments and replies: DLE 10.5 */
.comments-tree-list { margin: 0; padding: 0; list-style: none; }
.comments-tree-list .comments-tree-list { margin-left: 34px; }
.comments-tree-list > li { position: relative; }
.comments-tree-list > li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  bottom: 0;
  border-left: 1px solid #d9e1e4;
}
.comments-tree-list > li::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 28px;
  width: 14px;
  border-top: 1px solid #d9e1e4;
}
.comments-tree-list > li:last-child::before { bottom: auto; height: 29px; }
#dlefastreplycomments { margin-top: 12px; }

/* Editors, uploads and extra fields: DLE 10.6–13.3 */
.bb-editor textarea, .wysiwyg-editor textarea,
#short_story, #full_story { box-sizing: border-box; max-width: 100%; }
.xfieldsnote { color: #7b858a; font-size: 12px; margin-top: 5px; }
.xfieldimagegallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.xfieldimagegallery li { position: relative; list-style: none; }
.xfieldimagegallery img { width: 90px; height: 70px; object-fit: cover; border-radius: 4px; }
.xfieldimagegallery .xfimagedelete { position: absolute; right: 3px; top: 3px; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: .6;
}
.uploadedfile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  background: #fff;
}
.uploadedfile .uploadimage { flex: 0 0 auto; }
.uploadedfile .info { flex: 1 1 auto; min-width: 0; }
.uploadedfile .info p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sortable-ghost { opacity: .45; background: #e6f5f7; }
.ui-front { z-index: 1000; }
.ui-button-icon-only .ui-icon { margin-left: -8px; }

/* Emoji picker: DLE 11.0, 14.0 */
.emoji_box {
  position: absolute;
  z-index: 1010;
  width: min(340px, calc(100vw - 30px));
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #d9e0e3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.13);
}
.emoji_box img, .emoji_box .emoji { width: 24px; height: 24px; cursor: pointer; }
.native-emoji { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

/* Embedded social content: DLE 11.3 */
.instagram-media, .twitter-tweet { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }

/* Code highlighting: DLE 14.3 */
pre code.hljs { display: block; overflow-x: auto; padding: 1em; }
code.hljs { padding: 3px 5px; }
.hljs-comment, .hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: #d73a49; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: #005cc5; }
.hljs-string, .hljs-doctag { color: #032f62; }
.hljs-title, .hljs-section, .hljs-selector-id { color: #6f42c1; font-weight: 600; }
.hljs-type, .hljs-class .hljs-title { color: #e36209; }
.hljs-tag, .hljs-name, .hljs-attribute { color: #22863a; }

/* Editor figures: DLE 15.1 */
figure.image, figure.image-style-align-left, figure.image-style-align-right,
figure.image-style-align-center, figure.image-style-side {
  display: table;
  clear: both;
  margin: .9em auto;
  text-align: center;
  max-width: 100%;
}
figure.image img { display: block; max-width: 100%; height: auto; }
figure.image figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: .45em;
  color: #6b7478;
  font-size: 13px;
}
figure.image-style-align-left { float: left; margin-right: 1.5em; }
figure.image-style-align-right, figure.image-style-side { float: right; margin-left: 1.5em; }

/* Comment images and table of contents: DLE 15.3 */
.comments-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.comments-image-gallery a { display: block; }
.comments-image-gallery img {
  display: block;
  width: 110px;
  height: 90px;
  object-fit: cover;
  border-radius: 5px;
}
.dle-content .image, .dle-content img { max-width: 100%; height: auto; }
.dle_toc { margin: 16px 0; padding: 14px 18px; border: 1px solid #dce4e7; border-radius: 6px; background: #f8fafb; }
.dle_toc_title { font-weight: 700; margin-bottom: 8px; }
.dle_toc ol { margin: 0; padding-left: 22px; }

/* Images and user profile in comments: DLE 16.0 */
.image-bordered { border: 1px solid #d7dde0; }
.image-shadows { box-shadow: 0 5px 18px rgba(0,0,0,.22); }
.image-bordered.image-shadows { border-color: transparent; }
.comments-user-profile { min-width: 220px; }
.comments-user-profile img { max-width: 100%; height: auto; }

/* Spoilers: DLE 16.1 */
.title_spoiler svg { width: 16px; height: 16px; vertical-align: middle; margin-right: 5px; fill: currentColor; }
.title_spoiler { cursor: pointer; }

/* Accordion, account removal: DLE 17.0 */
.mce-accordion { border: 1px solid #dce3e6; border-radius: 4px; margin: 1em 0; }
.mce-accordion summary { cursor: pointer; padding: 10px 12px; font-weight: 600; }
.mce-accordion > :not(summary) { padding-left: 12px; padding-right: 12px; }
.self_delete_link { color: #c62828; }

/* Push notifications: pill design for DLE 18.1 */
.DLEPush {
  z-index: 2001;
  position: fixed;
  top: 20px;
  right: 20px;
  width: min(476px, calc(100vw - 40px));
  max-width: none;
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes DLEPush-show {
  0% { transform: translateX(28px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.DLEPush-notification.wrapper {
  animation: DLEPush-show .35s ease-out both;
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 70px;
  margin: 0 0 12px;
  padding: 0;
  box-sizing: border-box;
  color: #555;
  background: #fff;
  border: 1px solid rgba(30, 30, 30, .06);
  border-radius: 999px;
  box-shadow: 0 9px 28px rgba(25, 25, 25, .16);
  overflow: hidden;
}

.DLEPush-notification .DLEPush-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin-left: 14px;
  box-sizing: border-box;
  color: #fff;
  border-radius: 50%;
  text-align: center;
}

.DLEPush-notification .DLEPush-icon svg {
  width: 24px;
  height: 24px;
  scale: none;
  fill: currentColor;
}

.DLEPush-notification .DLEPush-header {
  grid-column: 2;
  grid-row: 1;
  margin: 11px 48px 0 0;
  padding: 0;
  color: #3f3f3f;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.DLEPush-notification .DLEPush-header:empty { display: none; }

.DLEPush-notification .DLEPush-message {
  grid-column: 2;
  grid-row: 2;
  margin: 13px 48px 13px 0;
  padding: 0;
  color: #555;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.DLEPush-notification .DLEPush-header:not(:empty) + .DLEPush-message {
  margin-top: 3px;
}

.DLEPush-notification .DLEPush-message ul,
.DLEPush-notification .DLEPush-message li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.DLEPush-notification .DLEPush-close {
  position: absolute;
  top: 50%;
  right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px !important;
  height: 26px !important;
  margin: 0;
  padding: 0 !important;
  transform: translateY(-50%);
  color: #a6a6a6;
  background: rgba(120, 120, 120, .07) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  outline: none;
  opacity: 1;
}
.DLEPush-notification .DLEPush-close:hover {
  color: #666;
  background: rgba(120, 120, 120, .14) !important;
}
.DLEPush-notification .DLEPush-close svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.DLEPush-notification.wrapper.push-success {
  background: #fbfffd;
  border-color: rgba(28, 163, 97, .12);
}
.DLEPush-notification.wrapper.push-success .DLEPush-icon { background: #20a464; }

.DLEPush-notification.wrapper.push-warning {
  background: #fffdf8;
  border-color: rgba(255, 174, 42, .18);
}
.DLEPush-notification.wrapper.push-warning .DLEPush-icon { background: #ffae2a; }

.DLEPush-notification.wrapper.push-error {
  background: #fff9f9;
  border-color: rgba(239, 64, 64, .15);
}
.DLEPush-notification.wrapper.push-error .DLEPush-icon { background: #ef4040; }

@media only screen and (max-width: 600px) {
  .DLEPush {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
  }
  .DLEPush-notification.wrapper {
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 64px;
  }
  .DLEPush-notification .DLEPush-icon {
    width: 38px;
    height: 38px;
    min-height: 38px;
    margin-left: 12px;
  }
  .DLEPush-notification .DLEPush-message {
    margin-right: 42px;
    font-size: 14px;
  }
  .DLEPush-notification .DLEPush-close { right: 10px; }
}

input[type="text"].comments_author_field {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* Dialog delete and check controls: DLE 17.3 */
.ui-dialog-buttonset button.ui-button-delete {
  background-color: #f44336;
  border-color: #f44336;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(51,51,51,.5);
}
.ui-dialog-buttonset button.ui-button-delete:hover { background-color: #db3a2f; border-color: #db3a2f; }
.form-check-label { cursor: pointer; }
.form-check-input {
  color: #0c5f7eed;
  flex-shrink: 0;
  width: 1.12rem;
  height: 1.12rem;
  margin: -.188rem .625rem 0 0;
  appearance: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #0c5f7eed;
  vertical-align: middle;
}
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230c5f7eed' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230c5f7eed'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox] { border-radius: .25rem; }
.form-check-input[type=radio] { border-radius: 50%; }

/* Private messages: DLE 18.0 */
.pm { width: 100%; border-collapse: collapse; }
.pm th { text-align: left; font-weight: 500; white-space: nowrap; }
.pm th.pm_checkbox { text-align: center; }
.pm_list.pm_subj, .pm_list.pm_icon, .pm_list.pm_last_user { cursor: pointer; }
.pm_list.pm_icon svg { width: 1.4rem; height: 1.4rem; vertical-align: middle; }
.pm_list.pm_icon.pm-unread-image { color: #3394e6; }
.pm td.pm_list.pm_icon, .userstop td, th.pm_head.pm_icon { border-bottom: none; }
.pm_list.pm_icon.pm-reply-image { color: #087e02c4; }
.pm_list.pm_icon.pm-read-image { color: #afafaf; }
.pm_list .pm_last_message, .pm_list .pm_last_date, .pm_list .pm_with_user { color: #64748b; font-size: .8rem; }
.pm tbody > tr:hover { background-color: #e2e8f099; }
.pm_navigation { margin-top: 1rem; }
.pm_navigation .navigation {
  display: inline-block;
  color: #333;
  background-color: #f5f5f5;
  border-radius: .188rem;
  padding: .4rem;
}
.pm_navigation .navigation a, .pm_navigation .navigation span { padding: .5rem; min-width: 2.25rem; }
.pm_navigation .navigation span { background-color: #4581d0; color: #fff; }
.pm_navigation .navigation a { text-decoration: none; color: #000; }
.pm_navigation .navigation a:hover { background-color: #e2e8f0; }
.pm-conversation { display: grid; gap: 12px; }
.pm-message { padding: 12px; border: 1px solid #dce3e6; border-radius: 7px; background: #fff; }
.pm-message__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pm-message__avatar { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.pm-reply { margin-top: 18px; }

/* Quote source link: DLE 18.1 */
.quote_link { float: right; }
.quote_link svg { color: #6c838e; vertical-align: middle; }

/* Local theme integration for upgraded DLE markup */
.tg-rating { display:inline-flex; align-items:center; gap:5px; }
.tg-rating__button { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:1px solid #c9d3d6; border-radius:50%; background:#fff; color:#17738b; font-weight:700; cursor:pointer; }
.tg-rating__value { min-width:18px; text-align:center; }
.tg-comment-card__rating { margin-top:8px; }
.tg-comments-upload, .tg-comments-subscribe { margin-top:8px; }
.dle-xfields { width:100%; box-sizing:border-box; }
.xfieldsrow { display:grid; grid-template-columns:minmax(140px,30%) 1fr; gap:10px; align-items:center; padding:6px 0; }
.xfieldscolleft, .xfieldscolright { float:none; width:auto; min-width:0; }
.pm-menu { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.pm-menu a, .pm-menu span { display:inline-block; padding:7px 11px; border-radius:4px; background:#e8f2f3; color:#174c58; }
.pm-message__head > div { display:flex; align-items:center; gap:8px; }
.pm-message__text { overflow-wrap:anywhere; }
@media (max-width:700px) {
  .comments-tree-list .comments-tree-list { margin-left:16px; }
  .xfieldsrow { grid-template-columns:1fr; }
  .pm-message__head { flex-direction:column; align-items:flex-start; }
}

/* Star rating without external bitmap assets */
.ratebox, .ratebox2, .ratebox3 { display:inline-flex; align-items:center; }
ul.unit-rating {
  position:relative;
  display:block;
  width:85px;
  height:17px;
  margin:0;
  padding:0;
  overflow:hidden;
  list-style:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9ced2' d='m12 2.2 2.98 6.04 6.67.97-4.83 4.7 1.14 6.64L12 17.42l-5.96 3.13 1.14-6.64-4.83-4.7 6.67-.97z'/%3E%3C/svg%3E") repeat-x 0 0;
}
.unit-rating li { display:block; margin:0; padding:0; list-style:none; }
.unit-rating li a {
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  display:block;
  height:17px;
  padding:0;
  overflow:hidden;
  text-indent:-9999px;
  background:transparent;
}
.unit-rating li a:hover,
.unit-rating li.current-rating {
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='m12 2.2 2.98 6.04 6.67.97-4.83 4.7 1.14 6.64L12 17.42l-5.96 3.13 1.14-6.64-4.83-4.7 6.67-.97z'/%3E%3C/svg%3E") repeat-x 0 0;
}
.unit-rating li.current-rating {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 17px;
    overflow: hidden;
    text-indent: -9999px;
}
.unit-rating li a.r1-unit {
    width: 20%;
    z-index: 25;
}

.unit-rating li a.r2-unit {
    width: 40%;
    z-index: 24;
}

.unit-rating li a.r3-unit {
    width: 60%;
    z-index: 23;
}

.unit-rating li a.r4-unit {
    width: 80%;
    z-index: 22;
}

.unit-rating li a.r5-unit {
    width: 100%;
    z-index: 21;
}
.emoji { border:0; vertical-align:middle; width:22px; height:22px; }
.sort { list-style:none; padding:0; margin:0; }
.sort > li, .sort { display:inline; }
.sort > li { margin-left:3%; }
.sort > li a { color:#353535; }
.sort > li.asc a, .sort > li.desc a { color:#3394e6; }


/* DLE system dialogs and user profile popup */
.ui-widget-overlay {
  position: fixed;
  inset: 0;
  z-index: 1998;
  background: rgba(11, 25, 31, .55);
}
.ui-dialog {
  position: absolute;
  z-index: 1999;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 30px));
  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 30px);
  overflow: hidden;
  border: 1px solid #c9d5d9;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
  color: #26363c;
}
.ui-dialog .ui-dialog-titlebar {
  position: relative;
  min-height: 22px;
  padding: 11px 44px 11px 16px;
  border: 0;
  background: linear-gradient(#138e9a, #06616c);
  color: #fff;
  font-weight: 700;
  line-height: 22px;
}
.ui-dialog .ui-dialog-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  font-size: 0;
}
.ui-dialog .ui-dialog-titlebar-close::before {
  content: "×";
  display: block;
  font: 24px/26px Arial, sans-serif;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, .28);
}
.ui-dialog .ui-dialog-titlebar-close .ui-button-text,
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none;
}
.ui-dialog .ui-dialog-content {
  position: relative;
  box-sizing: border-box;
  max-height: calc(100vh - 105px);
  padding: 16px;
  overflow: auto;
  border: 0;
  background: #fff;
}
.ui-dialog .ui-dialog-buttonpane {
  padding: 10px 14px;
  border-top: 1px solid #dce4e7;
  background: #f5f8f9;
  text-align: right;
}
.ui-dialog .ui-dialog-buttonset {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ui-dialog .ui-dialog-buttonset button {
  margin: 0;
}
.ui-helper-clearfix::before,
.ui-helper-clearfix::after {
  content: "";
  display: table;
}
.ui-helper-clearfix::after {
  clear: both;
}
.ui-resizable-handle {
  position: absolute;
  display: block;
}
.ui-resizable-se {
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  cursor: se-resize;
}
.ui-dialog .comments-user-profile,
.ui-dialog #dleprofilepopup {
  min-width: 0;
  width: auto;
  overflow-wrap: anywhere;
}
.ui-dialog .comments-user-profile img,
.ui-dialog #dleprofilepopup img {
  max-width: 110px;
  height: auto;
}
@media (max-width: 600px) {
  .ui-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px);
  }
  .ui-dialog .ui-dialog-content {
    padding: 12px;
  }
}


/* Precise centering for DLE dialog close button */
.ui-dialog button.ui-dialog-titlebar-close.ui-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 !important;
  margin: -14px 0 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
  line-height: 1 !important;
}
.ui-dialog button.ui-dialog-titlebar-close.ui-button::before {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  line-height: 1;
  transform: translateY(-1px);
  text-decoration: none;
}
.ui-dialog button.ui-dialog-titlebar-close.ui-button::after {
  display: none !important;
  content: none !important;
}


/* DLE news actions dropdown: [edit][X][/edit] */
#dropmenudiv {
  box-sizing: border-box !important;
  width: 190px !important;
  padding: 10px 0 !important;
  overflow: hidden !important;
  z-index: 10050 !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16) !important;
  font-family: Arial, sans-serif !important;
}
#dropmenudiv a {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 7px 18px !important;
  border: 0 !important;
  background: transparent !important;
  color: #555 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
}
#dropmenudiv a:hover,
#dropmenudiv a:focus {
  background: #f1f7f7 !important;
  color: #087e86 !important;
  outline: 0 !important;
}


/* Compact DLE news actions dropdown */
#dropmenudiv {
  width: 156px !important;
  padding: 6px 0 !important;
  border-radius: 9px !important;
}
#dropmenudiv a {
  padding: 5px 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* ===== РАСКРЫВАЮЩАЯСЯ ЗАГРУЗКА ИЗОБРАЖЕНИЙ ===== */

#dle-comments-form .tg-comments-upload {
    margin-top: 10px;
}

/* Текстовая кнопка */

#dle-comments-form .tg-comments-upload__toggle {
    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;

    cursor: pointer;
    background: transparent;
    border: 0;

    color: #138b92;
    font: 500 14px/1.35 "Roboto", Arial, Helvetica, sans-serif;
    text-decoration: none;
}

#dle-comments-form .tg-comments-upload__toggle:hover,
#dle-comments-form .tg-comments-upload__toggle:focus-visible {
    color: #0c6f75;
    text-decoration: underline;
    outline: none;
}

/* Плавно раскрывающаяся область */

#dle-comments-form .tg-comments-upload__panel {
    display: grid;
    grid-template-rows: 0fr;

    margin-top: 0;
    opacity: 0;
    visibility: hidden;

    transition:
        grid-template-rows 0.25s ease,
        margin-top 0.25s ease,
        opacity 0.2s ease,
        visibility 0s linear 0.25s;
}

#dle-comments-form .tg-comments-upload.is-open
    .tg-comments-upload__panel {
    grid-template-rows: 1fr;

    margin-top: 10px;
    opacity: 1;
    visibility: visible;

    transition:
        grid-template-rows 0.25s ease,
        margin-top 0.25s ease,
        opacity 0.2s ease,
        visibility 0s;
}

#dle-comments-form .tg-comments-upload__panel-inner {
    min-height: 0;
    overflow: hidden;
}

/* Штатный загрузчик DLE */

#dle-comments-form .tg-comments-upload__native .plupload_wrapper,
#dle-comments-form .tg-comments-upload__native .plupload_container,
#dle-comments-form .tg-comments-upload__native
    .plupload_filelist_content {
    box-sizing: border-box;
    width: 100% !important;
}

#dle-comments-form .tg-comments-upload__native .plupload_container {
    min-height: 150px;

    background: #fff;
    border: 1px dashed #d2d9da;
    border-radius: 10px;
}

#dle-comments-form .tg-comments-upload__native .plupload_header {
    display: none;
}

#dle-comments-form .tg-comments-upload__native .plupload_filelist {
    min-height: 82px;
    margin: 0;
    padding: 10px;
}

#dle-comments-form .tg-comments-upload__native .plupload_droptext {
    color: #8a9293;
    font-size: 14px;
}

#dle-comments-form .tg-comments-upload__native
    .plupload_filelist_footer {
    box-sizing: border-box;
    padding: 10px;

    background: #fafbfb;
    border-top: 1px solid #edf0f0;
}

#dle-comments-form .tg-comments-upload__native .plupload_button,
#dle-comments-form .tg-comments-upload__native .plupload_add {
    background: #138b92 !important;
    border: 0 !important;
    border-radius: 7px !important;

    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Изображения внутри комментариев */
.tg-comment-card__text > .comments-image-gallery {
    margin: 14px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.tg-comment-card__text .comments-image-gallery ul,
.tg-comment-card__text ul.comments-image-gallery {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.tg-comment-card__text .comments-image-gallery li {
    display: block !important;
    width: 200px !important;
    height: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tg-comment-card__text .comments-image-gallery img {
    display: block !important;
    width: 200px !important;
    height: 100px !important;
    margin: 0 !important;
    border-radius: 7px;
    object-fit: cover;
}