:root {
        /* basic colors */

        /* --comment-color: #fff;

        --comment-bg-color: #222; */
        /* needs to be slightly above black to not get keyed out */

        /*TODO: Da formato al coment y el tamaño de la fuente  */
        --comment-border-radius: 0px;

        --comment-font-size: 40px;

        /* --author-color: #222;

        --author-bg-color: #ffa500; */

        /* --author-avatar-border-color: var(--author-bg-color); */

        /* --author-border-radius: 0px; */

        /* TODO: da un borde al avatar del autor  y el tama;o del avatar y todo*/
        --author-avatar-border-size: 3px;

        --author-avatar-size: 128px;

        --author-font-size: 30px;

        --author-left: 113px;

        /* donation/superchat specific */
        

        --donation-color: #5a4211;

        --donation-bg-color: #fff;

        --donation-gradient-stop0: #bf953f;

        --donation-gradient-stop1: #ede599;

        --donation-gradient-stop2: #b38728;

        --donation-label-color: #fff;

        --donation-shadow-color: #fff;

        --image-content-max-height: 300px;

        --shown-comment-bg-color: #555555;

        --highlighted-comment-bg-color: #f0f07d;

        --highlight-chat-left: 0px;

        --rounded-border-radius: 0px;

        /*


LAYOUT


*/

        --comment-width: auto;
        /* go 100% for a full screen lower third style*/

        --comment-padding: 20px 35px 20px 145px;

        --comment-area-height: 70vh;

        --comment-scale: 1;

        --comment-area-size-offset: 0;

        --comment-area-bottom: 10px;

        /*


STYLE


*/

        --font-family: Avenir Next, Helvetica, Geneva, Verdana, Arial,
          sans-serif;

        --highlight-chat-font-weight: 600;

        --author-font-weight: 700;

        --comment-font-weight: 600;
      }

      body {
        background-color: #0000;

        left: 0px;

        background-color: rgba(0, 0, 0, 0);

        margin: 0px auto;

        overflow: hidden;
      }

      #output {
        transform: translateY(30px);

        transition: 0.5s all cubic-bezier(0.25, 0.25, 0.105, 1.2);

        margin: 0 0 0 15px;

        position: absolute;

        bottom: 30px;

        min-height: calc(
          var(--author-avatar-size) + 15px +
            calc(2 * var(--author-avatar-border-size))
        );
      }

      .supersticker {
        max-width: 200px !important;

        max-height: 200px !important;

        min-height: 120px !important;

        min-width: 120px !important;

        vertical-align: center;

        z-index: 1;

        object-fit: contain;

        padding: 0 5px 1px 5px;
      }

      .fade {
        animation: fade 0.5s;

        webkit-transition: opacity 0.5s ease-in-out;

        transition: opacity 0.5 ease-in-out;

        opacity: 0;
      }

      @keyframes fade {
        0% {
          opacity: 1;
        }

        100% {
          opacity: 0;
        }
      }

      .dropout {
        transform: translateY(340px) !important;

        opacity: 0;

        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

        will-change: transform, opacity;
      }

      .swipe {
        transform: translateX(-100vw) !important;

        webkit-transition: opacity 0.5s ease-in-out;

        transition: opacity 0.5 ease-in-out;

        opacity: 0;
      }

      .ffz--inline {
        display: inline-block;
      }

      .bttv-tooltip-wrapper {
        display: inline-block;
      }

      .chat-image__container {
        display: inline-block;
      }

      yt-live-chat-app {
        margin-bottom: var(--comment-area-height);

        height: calc(100vh - var(--comment-area-height)) !important;
      }

      tp-yt-paper-tooltip {
        display: none;
      }

      .chat-line__message--emote-button {
        display: inline-block;
      }

      .chat-line__message {
        cursor: pointer;
      }

      div.hl-message > div {
        display: inline-block;
      }

      .tooltip {
        display: none;
      }

      .tw-tooltip {
        display: none;
      }

      #tooltip {
        display: none;
      }

      svg.regular-emote,
      img.regular-emote {
        margin: auto 0;
      }

      .sourcetype {
        position: absolute;

        top: calc(var(--author-avatar-size) - 27px);

        max-width: 36px !important;

        max-height: 36px !important;

        left: 94px;

        margin: 0 !important;

        z-index: 4;
      }

      .dono .sourcetype {
        max-width: 32px !important;

        max-height: 32px !important;

        left: 122px;

        top: calc(var(--author-avatar-size) - 47px);
      }

      .noavatar-source {
        bottom: -4px;

        max-width: 50px !important;

        max-height: 50px !important;

        left: -20px;

        margin: 0 !important;

        z-index: 20;
      }

      .sourceOffset {
        left: 78px;

        top: -39px;
      }

      .btn-clear {
        position: absolute;

        z-index: 99999;

        bottom: calc(var(--comment-area-height) + 60px);

        right: 20px;

        font-size: 30px;

        border: 1px #bbb solid;

        border-radius: 4px;

        color: #fff;

        background: #444;
      }

      .highlighted-comment {
        background-color: var(--highlighted-comment-bg-color) !important;
      }

      html[dark]
        .highlighted-comment
        .hl-message.yt-live-chat-text-message-renderer {
        color: black;
      }

      html[dark]
        .highlighted-comment:hover
        .hl-message.yt-live-chat-text-message-renderer {
        color: white;
      }

      html[dark] .highlighted-comment #author-name.yt-live-chat-author-chip {
        color: #444;
      }

      html[dark]
        .highlighted-comment:hover
        #author-name.yt-live-chat-author-chip {
        color: #ddd;
      }

      yt-live-chat-text-message-renderer:hover {
        background-color: #eee !important;
      }

      html[dark] yt-live-chat-text-message-renderer:hover {
        background-color: #444 !important;
      }

      yt-live-chat-text-message-renderer.shown-comment {
        background-color: var(--shown-comment-bg-color) !important;

        opacity: 0.4;
      }

      .shown-comment:hover {
        opacity: 0.5;
      }

      /* example of how to remotely load a font */

      @font-face {
        font-family: "opendyslexic";

        src: url("https://vdo.ninja/examples/OpenDyslexic-Regular.otf");

        font-style: normal;

        font-weight: normal;
      }

      @font-face {
        font-family: NotoColorEmojiLimited;

        unicode-range: U+1F1E6-1F1FF;

        src: url(./thirdparty/NotoColorEmoji.ttf);

        font-display: swap;
      }

      /* latin-ext */

      @font-face {
        font-family: "Sora";

        font-style: normal;

        font-weight: 200;

        font-display: swap;

        src: url(./thirdparty//xMQbuFFYT72XzQspDre2.woff2) format("woff2");

        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
          U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      }

      /* latin */

      @font-face {
        font-family: "Sora";

        font-style: normal;

        font-weight: 200;

        font-display: swap;

        src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");

        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
          U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
          U+2212, U+2215, U+FEFF, U+FFFD;
      }

      /* latin-ext */

      @font-face {
        font-family: "Sora";

        font-style: normal;

        font-weight: 400;

        font-display: swap;

        src: url(./thirdparty/xMQbuFFYT72XzQspDre2.woff2) format("woff2");

        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
          U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      }

      /* latin */

      @font-face {
        font-family: "Sora";

        font-style: normal;

        font-weight: 400;

        font-display: swap;

        src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");

        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
          U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
          U+2212, U+2215, U+FEFF, U+FFFD;
      }

      /* latin-ext */

      @font-face {
        font-family: "Sora";

        font-style: normal;

        font-weight: 700;

        font-display: swap;

        src: url(./thirdparty//xMQbuFFYT72XzQspDre2.woff2) format("woff2");

        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
          U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      }

      /* latin */

      @font-face {
        font-family: "Sora";

        font-style: normal;

        font-weight: 700;

        font-display: swap;

        src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");

        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
          U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
          U+2212, U+2215, U+FEFF, U+FFFD;
      }

      .highlight-chat {
        font-family: "NotoColorEmojiLimited", var(--font-family);

        font-weight: var(--highlight-chat-font-weight);

        position: relative;

        left: var(--highlight-chat-left);

        box-sizing: border-box;

        font-size: 30px;
      }

      .highlight-chat.preview {
        border: 1px #ccc solid;
      }

      .hl-c-cont {
        position: relative;

        padding: 20px;

        width: 100%;

        margin: 0 auto;

        z-index: 1;
      }

      .hl-name {
        position: absolute;

        top: -20px;

        left: var(--author-left);

        font-weight: var(--author-font-weight);

        background: var(--author-bg-color);

        color: var(--author-color);

        padding: 10px;

        transform: rotate(-0deg);

        z-index: 1;

        border-radius: var(--author-border-radius);

        font-size: var(--author-font-size);

        white-space: nowrap;

        z-index: 2;

        border-radius: var(--rounded-border-radius);

        display: flex;

        align-items: center;
      }

      .hl-message {
        position: relative;

        width: var(--comment-width);

        font-weight: var(--comment-font-weight);

        padding: var(--comment-padding);

        color: var(--comment-color);

        background-color: var(--comment-bg-color);

        border-radius: var(--comment-border-radius);

        font-size: var(--comment-font-size);

        word-break: break-word;

        z-index: 1;

        border-radius: var(--rounded-border-radius);

        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
      }

      .hl-message-img {
        position: absolute;

        width: 63%;

        font-weight: var(--comment-font-weight);

        padding: var(--comment-padding);

        color: var(--comment-color);

        background-color: var(--comment-bg-color);

        border-radius: var(--comment-border-radius);

        font-size: var(--comment-font-size);

        word-break: break-word;

        z-index: 1;
      }

      .hl-message:empty {
        background-color: #0000 !important;

        width: 200px;

        min-height: 37px;

        margin-left: auto;

        margin-right: 0;

        box-shadow: 0 0;
      }

      .hl-name:empty {
        background-color: #0000 !important;

        z-index: 1;

        display: none;
      }

      .hl-message img,
      .hl-message svg {
        max-width: 200px;

        height: 45px;

        vertical-align: sub;

        z-index: 1;

        object-fit: contain;

        margin: auto 1px;

        position: relative;

        display: inline-block;
      }

      .hl-message a {
        color: #dde6ff;

        z-index: 1;

        display: contents;

        text-decoration: none;
      }

      .hl-img {
        position: absolute;

        top: 0;

        z-index: 1;

        left: calc(-0.5 * var(--author-avatar-border-size));

        width: var(--author-avatar-size);

        height: var(--author-avatar-size);

        background: var(--author-avatar-border-color);

        border-radius: 50%;

        border: 0;

        padding: var(--author-avatar-border-size);

        z-index: 3;
      }

      .hl-img img,
      .hl-img video {
        display: inline-block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        overflow: hidden;

        border-radius: 50%;

        z-index: 1;

        margin: auto auto;
      }

      .hl-message img + img,
      .hl-message img + svg,
      .hl-message svg + img,
      .hl-message svg + svg {
        margin: auto 0px;
      }

      .hl-imgContent {
        max-height: 100vh;

        max-width: 40%;

        display: inline-block;

        position: absolute;

        margin: 0;

        padding: 0;

        right: 0;

        z-index: 0;

        bottom: 0px;

        height: max(100%, 200px);
      }

      .largeImage {
        padding: 0;

        left: 120px;

        background-color: unset;

        box-shadow: unset;
      }

      .largeImage > img,
      .largeImage > video {
        max-width: calc(100vw - 200px);

        max-height: 240px;

        max-height: 240px;

        min-height: 160px;
      }

      .hl-imgContent > img,
      .hl-imgContent > video {
        object-fit: contain;

        display: block;

        margin: 0;

        height: 100%;

        min-height: calc(var(--author-avatar-size) + 30px);

        max-width: 100%;
      }

      /* overlay a very faint white layer to bump the blacks above the luma key cutoff */

      .hl-img:after {
        content: "";

        display: block;

        height: 100%;

        width: 100%;

        top: 0;

        left: 0;

        border-radius: 50%;

        position: absolute;

        pointer-events: none;

        z-index: 3;
      }

      .hl-img::after {
        background: rgba(255, 255, 255, 0.04);

        mix-blend-mode: lighten;
      }

      .hl-badges {
        display: inline-block;

        margin-left: 5px;
      }

      .hl-badges {
        max-height: 24px;
      }

      .hl-badges:empty {
        background-color: #0000;
      }

      .hl-badge {
        margin: 0 1px;

        min-height: 18px;

        max-width: 28px;

        display: inline-block;
      }

      span.hl-badge {
        width: 20px;

        height: 18px;
      }

      @keyframes bitties {
        from {
          transform: rotate(9deg) translate3D(-250px, 0, 0);
        }
      }

      .donation {
        position: absolute;

        display: inline-block;

        text-align: center;

        top: 97px;

        left: 70px;

        z-index: 3;

        min-width: 148px;

        border-radius: 10px;

        overflow: hidden;

        background: linear-gradient(
          to right,
          var(--donation-gradient-stop0),
          var(--donation-gradient-stop1),
          var(--donation-gradient-stop2)
        );

        color: var(--donation-color);

        transform: rotate(-5deg) translateX(-50%);

        line-break: loose;

        max-width: 149px;

        width: min-content;
      }

      .donation-title {
        width: 100%;

        font-size: 18px;

        text-align: center;

        background-color: rgba(0, 0, 0, 0.23);

        border-radius: 10px 10px 0 0;

        padding: 9px 2px 6px;

        display: block;

        color: var(--donation-label-color);
      }

      .youtubedonation.donation-title {
      }

      .membership.donation-title {
      }

      .subtitle {
        font-size: 18px;

        padding: 3px 0 5px;
      }

      .donation .subtitle {
        font-size: 22px;

        padding: 3px 0 5px;

        color: #2d2108;
      }

      .donation::after {
        content: "";

        position: absolute;

        top: -50%;

        left: 0;

        height: 200%;

        width: 1px;

        background-color: var(--donation-bg-color);

        box-shadow: 0 0 20px 20px var(--donation-shadow-color);

        opacity: 0.7;

        transform: rotate(9deg) translate3D(250px, 0, 0);

        animation: superchat 3s ease-in-out infinite;
      }

      @keyframes superchat {
        from {
          transform: rotate(9deg) translate3D(-250px, 0, 0);
        }
      }

      /* hide chat input to give more space to the chat */

      /*


#input-panel, yt-live-chat-viewer-engagement-message-renderer {


	display: none !important;


}


*/

      yt-live-chat-item-list-renderer {
        margin-bottom: 20px;
      }

      yt-live-chat-text-message-renderer {
        font-size: 24px !important;

        line-height: 32px;
      }

      yt-live-chat-text-message-renderer,
      yt-live-chat-paid-message-renderer,
      yt-live-chat-membership-item-renderer {
        cursor: pointer;
      }

      yt-live-chat-text-message-renderer[is-deleted],
      yt-live-chat-paid-message-renderer[is-deleted],
      yt-live-chat-membership-item-renderer[is-deleted] {
        cursor: default;
      }

      span.zero-width-parent {
        display: inline-block;

        width: 0;

        position: absolute;
      }

      span.zero-width-parent img.zero-width-emote {
        position: absolute;

        right: 0;
      }

      .stacked {
        margin-top: 30px;
      }

      .dono {
        min-height: 195px;
      }

      .alignright.output {
        left: unset;

        right: 0;

        margin: 0 15px 0 0 !important;
      }

      .alignright .highlight-chat {
        right: var(--highlight-chat-left);

        left: unset;

        margin-left: auto;

        margin-right: 0;

        text-align: right;
      }

      .alignright .hl-name {
        right: var(--author-left);

        left: unset;
      }

      .alignright .hl-img {
        right: calc(-0.5 * var(--author-avatar-border-size));

        left: unset;
      }

      .alignright .hl-message {
        display: inline-flex;
      }

      .alignright .donation {
        right: -70px;

        left: unset;
      }

      .alignright .sourcetype {
        right: 100px;

        left: unset;
      }

      .alignright .sourcetype {
        right: 100px;

        left: unset;
      }

      .alignright .dono .sourcetype {
        right: 122px;

        left: unset;
      }

      .emote-container {
        display: inline-grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr;

        vertical-align: top;

        justify-items: center;
        /* Center horizontally */

        align-items: center;
        /* Center vertically */

        vertical-align: sub;
      }

      .emote-container .regular-emote,
      .emote-container .zero-width-emote-centered,
      .emote-container .zero-width-emote {
        grid-column: 1;

        grid-row: 1;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;
      }

      .emote-container .zero-width-emote-centered,
      .emote-container .zero-width-emote {
        z-index: 1;
      }

      .regular-emote,
      .zero-width-emote,
      .zero-width-emote-centered {
        vertical-align: top;
      }

      .hl-c-cont.highlight-chat.stacked {
        width: fit-content;
        /* Allow container to shrink to content */

        max-width: 100%;
        /* Prevent overflow */

        margin-left: 15px;
        /* Match the original left margin */

        position: relative;
        /* Ensure proper stacking context */

        clear: both;
        /* Prevent floating issues */

        padding: 30px;
      }

      .hl-c-cont.highlight-chat.stacked .hl-message {
        width: fit-content !important;
        /* Force message to fit content */

        max-width: calc(100vw - 160px);
        /* Prevent overflow, accounting for avatar and padding */

        min-width: 200px;
        /* Minimum width to maintain layout */

        display: inline-block;
        /* Allow block to shrink to content */
      }

      /* Ensure avatar and badges maintain position */

      .hl-c-cont.highlight-chat.stacked .hl-img {
        position: absolute;

        left: calc(-0.5 * var(--author-avatar-border-size));
      }

      .hl-c-cont.highlight-chat.stacked .sourcetype {
        position: absolute;
      }

      /* Keep donations/membership badges properly positioned */

      .hl-c-cont.highlight-chat.stacked .donation,
      .hl-c-cont.highlight-chat.stacked .membership {
        position: absolute;

        z-index: 3;
      }

      /* Handle right alignment option if needed */

      .alignright .hl-c-cont.highlight-chat.stacked {
        margin-left: auto;

        margin-right: 15px;
      }

      /* Styles for when avatar is hidden */

      .no-avatar-donation {
        position: relative;

        display: flex;

        flex-direction: row;

        margin-top: 7px;

        transform: none;

        max-width: none;

        width: auto;

        z-index: 2;

        border-radius: 3px;

        overflow: hidden;
      }

      .no-avatar-donation .donation-title {
        display: inline-block;

        padding: 3px 8px;

        font-size: 20px;

        background: linear-gradient(
          to right,
          var(--donation-gradient-stop0),
          var(--donation-gradient-stop1),
          var(--donation-gradient-stop2)
        );

        color: var(--donation-color);

        font-weight: bold;

        width: unset;

        border-radius: 3px;

        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      }

      .no-avatar-donation .subtitle {
        display: inline-block;

        font-size: 20px;

        padding: 3px 8px;

        background-color: var(--donation-bg-color);

        color: var(--donation-color);
      }

      /* For just membership or just subtitle */

      .no-avatar-donation.single-item .donation-title,
      .no-avatar-donation.single-item .subtitle {
        border-radius: 3px;
      }

      /* Position membership/donation info relative to message in no avatar mode */

      .no-avatar .hl-c-cont {
        position: relative;
      }

      /* Fix name positioning */

      .no-avatar .hl-name {
        margin-bottom: 0;
        /* Remove the gap */

        max-width: calc(100% - 20px);

        overflow: hidden;

        text-overflow: ellipsis;

        z-index: 3;
      }

      .no-avatar .hl-message {
        margin-bottom: 0;

        border-radius: var(--rounded-border-radius);
      }

      /* Adjustments for source icon in no avatar mode */

      .no-avatar .noavatar-source {
        position: relative;

        bottom: auto;

        left: auto;

        display: inline-block;

        margin-left: 5px !important;

        vertical-align: middle;
      }

      /* When stacked with no avatar */

      .stacked.no-avatar .hl-name {
        position: relative;

        top: 0;

        left: 0;

        margin-left: 20px;
      }

      /* Specific style for sponsorship label to match example image */

      .no-avatar-donation.sponsorship {
        display: inline-block;

        background: #eee;

        border-radius: 3px;

        padding: 2px 6px;

        font-size: 20px;

        font-weight: bold;

        color: #555;

        text-transform: uppercase;

        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      }

      /* Handle mobile/small screens */

      @media (max-width: 600px) {
        .no-avatar-donation {
          left: 20px;
        }
      }

      .no-avatar .donation {
        position: relative;

        left: auto;

        top: auto;

        transform: none;

        width: 100%;

        margin-top: 0;

        display: flex;

        flex-direction: row;

        border-radius: 0;

        z-index: 2;
      }

      .no-avatar .donation .donation-title {
        text-align: center;

        background-color: var(--donation-gradient-stop0);

        color: black;

        padding: 8px 15px;

        font-size: 20px;

        flex-grow: 1;

        border-radius: 0;

        width: unset;
      }

      .no-avatar .donation .subtitle {
        background-color: var(--donation-gradient-stop1);

        color: var(--donation-color);

        padding: 8px 15px;

        font-size: 20px;

        font-weight: bold;

        border-radius: 0;
      }

      .no-avatar .donation::after {
        display: none;
      }
      
    .webinar-container {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      color: #333;
    }
    
    .header {
      text-align: center;
      padding: 20px 0;
    }
    
    .header h1 {
      font-size: 2rem;
      margin-bottom: 10px;
    }
    
    #commentsSection {
      max-width: 700px;
      margin: 0 auto;
      padding: 0 20px 40px;
    }
    
    .comment-link {
      display: block;
      margin: 10px 0;
      padding: 14px 18px;
      border-radius: 12px;
      background-color: white;
      color: #333;
      font-size: 1rem;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
      transition: all 0.2s ease;
      word-wrap: break-word;
    }
    
    .comment-link:hover {
      background-color: #f0f0f0;
      transform: translateX(3px);
    }
    
    .button {
      display: inline-block;
      margin-top: 10px;
      padding: 10px 20px;
      border: none;
      background-color: #ff5e5e;
      color: white;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    
    .button:hover {
      background-color: #e34747;
    }
    
    html, body {
      height: auto !important;
      min-height: 100% !important;
      overflow: visible !important;
    }