/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Version:      1.0.0
*/


/** General Style  **/
.is-dev-site #profile-icon-wrapper {background-color: #d63638!important}
.is-uat-site #profile-icon-wrapper {background-color: #fd753c!important}
.is-dev-site #rr-workspace {border-color: #d63638!important}
.is-uat-site #rr-workspace {border-color: #fd753c!important}

.page-id-5923 #rr-workspace, .page-id-7639 #rr-workspace, .page-id-7642 #rr-workspace, .page-id-7653 #rr-workspace {padding: 0!important}

/* Scroll bar mods */
*::-webkit-scrollbar {
  width: 6px;
  height: 7px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #eaecf5;
  border-radius: 8px;
  transition: background 0.2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: #eaecf5;
  cursor: pointer;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

.no-margin p {margin: 0!important}
.payment-method-button a {padding: 9px 18px}
.svg-stroke svg {color: #575760}
.list-hover li {align-items: center; display: flex; gap: 8px; padding: 5px 10px!important; border-radius: 8px; text-align: left; color: #575760; transition: background-color 0.2s ease-in-out; cursor: pointer; background: transparent; user-select: none}
.list-hover li svg {flex-shrink: 0; width: 18px; height: 18px}
.list-hover li:hover {background: #f2f2f2; color: #000!important}
.svg-stroke-accent svg {color: #ccc; transition: color 0.2s ease-in-out}
.svg-stroke-accent svg:hover {color: #753cfd!important}
#svg-stroke-logout svg {color: #FF6673}
#svg-stroke-logout li:hover {background: #ffeeee; color: #FF6673!important}
.help-icons:not(.hidden-icon) {cursor: pointer!important; user-select: none!important}
.help-icons:not(.hidden-icon) svg {border-radius: 6px!important; padding: 4px!important; box-sizing: content-box!important}
.help-icons:not(.hidden-icon) svg:hover {background-color: #e7ebef; border-radius: 6px!important; padding: 3px; box-sizing: content-box; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08)!important}
.help-icons:not(.hidden-icon) svg:active {background-color: #d0d4da!important}
.admin-bar #page-wrapper {min-height: calc(91vh - 32px)}
#profile-icon-wrapper {max-height: 32px!important; margin-top: 5px!important}
#profile-icon {cursor: pointer; user-select: none!important; line-height: 14px!important}
img {user-drag: none!important; -webkit-user-drag: none!important}
#sidebar-new {all: unset; display: block; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; font-size: 15px; font-weight: 500; border-radius: 10px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; background-color: #635bff; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); outline: none;}
#sidebar-new:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
#sidebar-new:focus-visible {box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.4);}
#upload-instructions-text {user-select: none}
.subscriber-badge {display: inline-block; padding: 5px 8px; font-size: 14px; font-weight: 400; color: #3b37d7; background-color: #e3e2ff; border-radius: 8px; user-select: none}
.status-badge {display: inline-block; padding: 4px 10px; font-size: 14px; font-weight: 500; color: #333; background-color: #b08fff; border: 1px solid #e1e4e9; border-radius: 6px; user-select: none}
#sidebar-links li:nth-of-type(6) {display: none}
.hidden-icon svg {color: #FFFFFF00!important}
#rr-workspace {display: flex; min-width: 900px}
#rr-review-col-2 {display: flex; min-width: 300px}
#sidebar-wrapper {display: flex; min-width: 190px; max-width: 190px}
#header-wrapper {min-height: clamp(45px, 4vh, 100px); max-height: 4vh}
#page-wrapper {min-height: 94vh; max-height: 94vh; overflow-y: auto}


/** Lottie Loading **/
.loading-animation-wrapper {position: relative}
.loading-animation-content, .loading-animation-overlay {width: 100%; height: 100%; transition: opacity 0.25s ease}
.loading-animation-content {opacity: 1}
.loading-animation-overlay  {opacity: 0; pointer-events: none}
.show-loading .loading-animation-content {opacity: 0}
.show-loading .loading-animation-overlay {opacity: 1}
.loading-animation-spinner {
	position: absolute;
	z-index: 7;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
}


/** Login & Signup **/
.page-id-90 input, .page-id-3782 input, .page-id-3870 input, .page-id-10 input {margin-bottom: 20px}
#login-wrapper, #signup-wrapper {min-width: 425px; max-width: 450px; flex-shrink: 0;}
#login-logo, #signup-logo {min-width: 150px!important; max-width: 150px}
#login-form label, #signup-form label {font-weight: 500; padding-bottom: 7px; display: inline-block}
#login-form input, #signup-form input {width: 100%; padding: 10px 12px; border: 1px solid #d3d3d3; border-radius: 8px; font-family: Inter; font-size: 15px; font-weight: 400; outline: none; transition: border-color 0.15s ease;}
#login-form input:hover, #signup-form input:hover {border-color: #d3d3d3;}
#login-form input:focus, #signup-form input:focus {border-color: #000; outline: 1px solid #000}
#login-form input:-webkit-autofill, #signup-form input:-webkit-autofill {box-shadow: 0 0 0 1000px white inset !important;-webkit-box-shadow: 0 0 0 1000px white inset !important;background-color: white !important;}
#mfa-code-wrapper {display: none}
#login.disabled a, #signup.disabled a {cursor: wait; background-color: #b4b2ff!important}
#forgot-password {position: absolute; top: 0; right: 0; color: #626262; cursor: pointer; font-size: 13px; font-weight: 500}
#forgot-password:hover {color: #000}
#reset-password.disabled a {cursor: not-allowed; background-color: #b4b2ff!important}
.password-wrapper {position: relative}
.show-password {position: absolute; top: 5px; right: 8px}
.show-password i {font-size: 22px; color: #555; cursor: pointer}
.show-password i:hover {color: #000}


/** TEMP PRICING PAGE!!!!!! **/
#select-basics a, #select-essentials a, #select-pro a {cursor: pointer}


/** Verify Email Page **/
#verify-email {font-weight: bold}


/** Checkout Style **/
.bi-info-circle {cursor: help}
.checkout-button {cursor: pointer; user-select: none!important}
.addon-disabled {opacity: 0.5; cursor: not-allowed}
.addon-disabled:hover {border-color: #7A7A7A!important}
.interval-active .elementor-widget-container {cursor: pointer; border: 1px solid var(--e-global-color-primary)!important; outline: 1px solid var(--e-global-color-primary)}
#checkout-monthly .elementor-widget-container, #checkout-yearly .elementor-widget-container {cursor: pointer; transition: none!important}
#addon-relay-text {line-height: 1.2em}
#upload-tax-doc {transition: all 0.4s ease!important}
.page-id-126 .drag-hover {border: 5px dashed var(--e-global-color-primary); background-color: rgba(176, 91, 255, 0.5); padding: 10px 0 10px 0!important}
.page-id-126 .drag-pending {border: 5px dashed rgb(255, 235, 59); background-color: rgba(255, 235, 59, 0.5); padding: 10px 0 10px 0!important}
#upload-tax-doc-browse {text-decoration: underline; color: var(--e-global-color-primary); cursor: pointer; user-select: none}
#upload-tax-doc-browse:hover {color: var(--e-global-color-accent)}

.elementor-element-9ac2641 {min-height: 54px!important}
.page-id-126 #payment-method-cancel a {display: none}
.page-id-126 #payment-method-save .elementor-button-text {min-width: 28px}
#payment-form-html {display: none; overflow: hidden} /* max-height: 326 for submit */
#payment-details {display: none}

#form-field-promo {border: none}
#promo-apply:hover {cursor: pointer; background-color: var(--e-global-color-primary); user-select: none}
#promo-apply:hover .elementor-element-4408887 {color: #FFFFFF}
#promo-response {display: none}

#subscribe-submit {cursor: pointer}
#subscribe-submit .checkout-disabled, #subscribe-submit .checkout-disabled:hover {cursor: not-allowed; background-color: #b4b2ff; color: #FFF}


/** Relays List Style **/
#upload-relay {cursor: pointer}
#upload-relay:hover .svg-stroke-accent svg {color: #753cfd}
#dropbox-wrapper .e-con-inner {margin: 0!important}
#dropbox-wrapper .dropbox-dropin-btn {font-size: 13px!important}
.page-id-53 .drag-hover {border-color: var(--e-global-color-primary)!important; background-color: rgba(241, 236, 255, 0.5)!important}
/*.page-id-53 .drag-pending {border-color: rgb(255, 235, 59)!important; background-color: rgba(255, 235, 59, 0.5)!important}*/
#relays-used-wrapper {position: relative; width: 100%; height: 5px; background-color: #753cfd; border-radius: 5px; overflow: hidden}
#relays-used {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #E1E4E9; transform: translateX(-100%)}
#relays-used-text {color: #333; font-size: 12px; margin-top: 3px; user-select: none}

#empty-state-wrapper {text-align: center}
#empty-state-wrapper img {margin: 10% 0}
#rr-relays-list-main-loop {max-height: 65vh!important}
#rr-relays-list-main-loop.overflow {overflow: auto}
#rr-presets-list-main-loop {max-height: 65vh; overflow: visible}
#rr-presets-list-main-loop.overflow {overflow: auto}
#rr-live-stream-list-main-loop {max-height: 60vh; overflow: visible}
#rr-live-stream-list-main-loop.overflow {overflow: auto}
#relay-table, #presets-table, #live-stream-table {display: flex; width: 100%; min-width: 800px}
#relay-table-headers.has-scrollbar, #presets-table-headers.has-scrollbar, #live-stream-table-headers.has-scrollbar {padding-right: 16px}
/*#relay-header {display:flex; min-width: 450px}*/
#refresh-relay-list:hover {cursor: pointer; color: var(--e-global-color-primary)}
.relay-list-item, .preset-list-item, .live-stream-list-item {font-size: 14px}
.relay-list-item:not(:first-child), .preset-list-item:not(:first-child), .live-stream-list-item:not(:first-child) {border-top: 1px solid #f1f1f1}
.relay-list-item:last-child, .preset-list-item:last-child, .live-stream-list-item:last-child {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px}
.relay-list-item-thumbnail-container, .preset-list-item-thumbnail-container, .live-stream-list-item-thumbnail-container {display:flex; min-width: 150px!important}
.relay-list-item-status .elementor-widget-container.relay-status-heartbeat-working {
    background-image: linear-gradient(100deg, #64748b 0%, #7e8da0 30%, #bcc6d2 50%, #7e8da0 70%, #64748b 100%);
    background-size: 200% 100%;
    background-position: 120% 50%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rrRelayHeartbeatStatusWave 1.6s linear infinite;
}
@keyframes rrRelayHeartbeatStatusWave {
    from { background-position: 120% 50%; }
    to { background-position: -120% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .relay-list-item-status .elementor-widget-container.relay-status-heartbeat-working {
        animation: none;
        background-position: 50% 50%;
    }
}
.relay-list-item-thumbnail, .preset-list-item-thumbnail, .live-stream-list-item-thumbnail {height: 70px; width: 124px; max-width: 124px; max-height: 124px; min-height: 70px; min-width: 124px; display: block;}
.relay-list-item-thumbnail {position: relative; overflow: hidden; border-radius: 6px}
.relay-list-item-thumbnail img, .preset-list-item-thumbnail img, .live-stream-list-item-thumbnail img {border-radius: 6px!important}
.relay-list-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.relay-list-item-thumbnail.is-processing.has-real-thumbnail img {
    filter: grayscale(0.35) brightness(1.08) saturate(0.72);
}
.relay-list-thumbnail-processing-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    background: rgba(255, 255, 255, 0.08);
}
.relay-list-item-thumbnail.show-processing-spinner .relay-list-thumbnail-processing-overlay {
    opacity: 1;
}
.relay-list-thumbnail-spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #ffffff;
    animation: relayToastSpin 0.8s linear infinite;
    box-shadow: 0 0 0 6px rgba(17, 24, 39, 0.12);
}
.relay-list-item-thumbnail.is-placeholder-thumbnail .relay-list-thumbnail-processing-overlay {
    opacity: 0 !important;
}

/*.relay-list-platforms {padding: 8px 16px; background-color: #ffffff; border: 1px solid #dee2e8; border-radius: 6px; color: #000000; padding: 2px 10px; font-size: 13px; margin-right: 5px; margin-bottom: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)}*/

/* Relay list actions: icon-only segmented control */
#rr-relays-list-main-loop .relay-list-item-actions .elementor-widget-container {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 0 !important;
}

#rr-relays-list-main-loop .relay-list-item-actions .elementor-widget-container > * {
    margin: 0 !important;
    flex: 0 0 auto;
}

/* Keep download trigger in the same row */
#rr-relays-list-main-loop .relay-list-item-actions .download-relay-wrapper {
    display: inline-flex !important;
    position: relative;
    vertical-align: middle;
    margin: 0 !important;
}

/* Base button look */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dee2e8 !important;
    border-radius: 0 !important; /* center segments square by default */
    background: #fff !important;
    color: #64748b !important;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
    vertical-align: middle;
    z-index: 1;
}

/* Perfect seam: collapse interior borders */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action + .relay-list-item-action {
    margin-left: -1px !important;
}
#rr-relays-list-main-loop .relay-list-item-actions .download-relay-wrapper + .relay-list-item-action,
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action + .download-relay-wrapper .relay-list-item-action,
#rr-relays-list-main-loop .relay-list-item-actions .download-relay-wrapper + .download-relay-wrapper .relay-list-item-action {
    margin-left: -1px !important;
}

/* Outer corners from JS helper classes */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action.is-first-action {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action.is-last-action {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* Anchor-wrapped icons fill the button */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
}

/* Optional tiny nudge only for download if needed */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-action="download-relay"] .rr-icons {
    transform: translateY(1px);
}

/* Larger icons */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action .rr-icons {
    pointer-events: none;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    display: inline-block;
}
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action .rr-icons::before {
    font-size: 18px !important;
}

/* Hover/focus/active */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action:hover,
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action:focus,
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action:active {
    background-color: #f2f5f7 !important;
    color: #1e293b !important;
    z-index: 2;
}

/* Delete intent */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-action="delete-relay"] {
    color: #dc2626 !important;
}
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-action="delete-relay"]:hover,
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-action="delete-relay"]:focus,
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-action="delete-relay"]:active {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

/* Tooltip */
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -22px;
    left: 50%;
    background: #111827;
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 2px);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1300;
}

/* Toast */
#relay-relays-list-toast.relay-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(8px);
    background: #111827;
    color: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#relay-relays-list-toast.relay-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#relay-relays-list-toast.relay-toast.is-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#relay-relays-list-toast.relay-toast .relay-toast-message {
    line-height: 1.2;
}
#relay-relays-list-toast.relay-toast .relay-toast-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    flex-shrink: 0;
    animation: relayToastSpin 0.8s linear infinite;
}
@keyframes relayToastSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

    /* Presets toast */
    #preset-list-toast.relay-toast {
        position: fixed;
        left: 50%;
        bottom: 22px;
        transform: translateX(-50%) translateY(8px);
        background: #111827;
        color: #fff;
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        z-index: 2500;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    #preset-list-toast.relay-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    #preset-list-toast.relay-toast.is-loading {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }

    #preset-list-toast.relay-toast .relay-toast-message {
        line-height: 1.2;
    }

    #preset-list-toast.relay-toast .relay-toast-spinner {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.35);
        border-top-color: #fff;
        animation: relayToastSpin 0.8s linear infinite;
        flex-shrink: 0;
    }

#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-tooltip]:hover::after,
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-tooltip]:focus::after,
#rr-relays-list-main-loop .relay-list-item-actions .relay-list-item-action[data-tooltip]:active::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Keep dropdown above segmented row */
#rr-relays-list-main-loop .relay-list-item-actions .download-relay-options {
    z-index: 1400;
}

.download-relay-wrapper {position: relative}
.download-relay-options {
	position: absolute;
    top: 100%;
    left: auto !important;
	right: 0 !important;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	margin-top: 3px;
    padding: 4px;
    min-width: 220px;
    z-index: 1000;
    display: none;
}
.download-relay-wrapper.flip .download-relay-options {top: auto; bottom: calc(100% + 5px)}
.download-relay-options button.download-relay-option,
.download-relay-options .download-relay-option {
	display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none !important;
    background: none !important;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.25;
    color: #1e293b;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.download-relay-options button.download-relay-option:focus-visible,
.download-relay-options .download-relay-option:focus-visible {
    outline: none;
}
.download-relay-options button.download-relay-option:hover,
.download-relay-options button.download-relay-option:active,
.download-relay-options button.download-relay-option:focus,
.download-relay-options .download-relay-option:hover,
.download-relay-options .download-relay-option:active,
.download-relay-options .download-relay-option:focus,
#rr-relays-list-main-loop .download-relay-options button.download-relay-option:hover,
#rr-relays-list-main-loop .download-relay-options button.download-relay-option:focus,
#rr-relays-list-main-loop .download-relay-options button.download-relay-option:active,
#rr-relays-list-main-loop .download-relay-options .download-relay-option:hover,
#rr-relays-list-main-loop .download-relay-options .download-relay-option:focus,
#rr-relays-list-main-loop .download-relay-options .download-relay-option:active {
    background-color: #f2f5f7 !important;
    color: #1e293b !important;
}

.download-relay-options .download-relay-option-group {position: relative}
.download-relay-option.download-relay-option-has-submenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.download-relay-option.download-relay-option-has-submenu > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.download-relay-option.download-relay-option-has-submenu:hover,
.download-relay-option.download-relay-option-has-submenu:active,
.download-relay-option.download-relay-option-has-submenu:focus {
    background-color: #f2f5f7;
    color: #1e293b;
}
.download-relay-option .submenu-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 1;
}
.download-relay-option .submenu-chevron .rr-icons::before {
    font-size: 20px !important;
}
.download-relay-submenu {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% - 1px);
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    padding: 4px;
    min-width: 170px;
    z-index: 1002;
}
.download-relay-option-group.submenu-left > .download-relay-submenu {
    left: auto;
    right: calc(100% - 1px);
}
.download-relay-option-group:hover > .download-relay-submenu,
.download-relay-option-group:focus-within > .download-relay-submenu,
.download-relay-option-group.submenu-open > .download-relay-submenu {
    display: block;
}
.download-relay-option-group::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 10px;
    height: 100%;
}
.download-relay-option-group.submenu-left::after {
    left: auto;
    right: 100%;
}
.download-relay-submenu .download-relay-option {white-space: nowrap}


/* =========================
   Live Stream - Unified Actions
========================= */

/* Action row wrapper from shortcode output */
#rr-live-stream-list-main-loop .live-stream-list-item-actions .elementor-widget-container > div {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 0 !important;
}

/* Base live stream action button */
#rr-live-stream-list-main-loop .live-stream-list-item-action {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dee2e8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #64748b !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease;
    vertical-align: middle;
}

/* Collapse seams */
#rr-live-stream-list-main-loop .live-stream-list-item-action + .live-stream-list-item-action {
    margin-left: -1px !important;
}

/* Outer corners */
#rr-live-stream-list-main-loop .live-stream-list-item-actions .elementor-widget-container > div .live-stream-list-item-action:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-actions .elementor-widget-container > div .live-stream-list-item-action:last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* Hover/focus */
#rr-live-stream-list-main-loop .live-stream-list-item-action:hover,
#rr-live-stream-list-main-loop .live-stream-list-item-action:focus,
#rr-live-stream-list-main-loop .live-stream-list-item-action:active {
    background-color: #f2f5f7 !important;
    color: #1e293b !important;
    border-color: #dee2e8 !important;
}

/* Icon sizing/centering */
#rr-live-stream-list-main-loop .live-stream-list-item-action .rr-icons {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none;
}
#rr-live-stream-list-main-loop .live-stream-list-item-action .rr-icons::before {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Hide text labels so this matches Relay icon-only look */
#rr-live-stream-list-main-loop .live-stream-list-item-action {
    font-size: 0 !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-action .rr-icons {
    font-size: 16px !important; /* restore icon size after font-size:0 */
}

/* Name editor buttons (check/x) should match button language */
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
}

/* Name editor action grouping (Edit, Save, Cancel) */
#rr-live-stream-list-main-loop .live-stream-list-item {
    position: relative;
}
#rr-live-stream-list-main-loop .live-stream-list-item .elementor-5814 .elementor-element-d19825f,
#rr-live-stream-list-main-loop .live-stream-list-item .elementor-5814 .elementor-element-de7cddc,
#rr-live-stream-list-main-loop .live-stream-list-item .elementor-5814 .elementor-element-3344ddd,
#rr-live-stream-list-main-loop .live-stream-list-item .elementor-5814 .elementor-element-3344ddd .elementor-widget-container,
#rr-live-stream-list-main-loop .live-stream-list-item .elementor-5814 .elementor-element-3344ddd .elementor-shortcode,
#rr-live-stream-list-main-loop .live-stream-list-item .elementor-5814 .elementor-element-3344ddd .elementor-shortcode p {
    overflow: visible !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .elementor-widget-container,
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .elementor-widget-container p {
    overflow: visible !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name,
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .elementor-widget-container {
    position: relative;
    z-index: 25;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .video-name {
    overflow: visible !important;
    text-overflow: clip !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .elementor-widget-container p {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action[data-action="edit-name"] {
    border-radius: 6px !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action[data-action="save-new-name"] {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action[data-action="cancel-new-name"] {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action[data-action="save-new-name"] + .live-stream-list-item-action[data-action="cancel-new-name"] {
    margin-left: -1px !important;
}

/* Name input preserves uniqueness but aligns visual style */
#rr-live-stream-list-main-loop .live-stream-new-name {
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid #dee2e8 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #1e293b !important;
    box-shadow: none !important;
    margin: 0 6px 0 0 !important;
}
#rr-live-stream-list-main-loop .live-stream-new-name:hover,
#rr-live-stream-list-main-loop .live-stream-new-name:focus {
    border-color: #c7ced8 !important;
    box-shadow: none !important;
}

/* Shared tooltip bubble style */
#rr-live-stream-list-main-loop .live-stream-list-item-action::after,
.preset-listitem-actions a::after,
.preset-listitem-actions button::after {
    position: absolute;
    top: -22px;
    left: 50%;
    background: #111827;
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 2px);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 3500;
}

/* Show tooltips on hover/focus/active */
#rr-live-stream-list-main-loop .live-stream-list-item-action:hover::after,
#rr-live-stream-list-main-loop .live-stream-list-item-action:focus::after,
#rr-live-stream-list-main-loop .live-stream-list-item-action:active::after,
.preset-listitem-actions a:hover::after,
.preset-listitem-actions a:focus::after,
.preset-listitem-actions a:active::after,
.preset-listitem-actions button:hover::after,
.preset-listitem-actions button:focus::after,
.preset-listitem-actions button:active::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Live Stream tooltip text from data-action */
#rr-live-stream-list-main-loop .live-stream-list-item-action[data-action="watch"]::after { content: "Watch"; }
#rr-live-stream-list-main-loop .live-stream-list-item-action[data-action="start-relay"]::after { content: "Start Relay"; }
#rr-live-stream-list-main-loop .live-stream-list-item-action[data-action="download"]::after { content: "Download"; }
#rr-live-stream-list-main-loop .live-stream-list-item-action[data-action="edit-name"]::after { content: "Edit Name"; }
#rr-live-stream-list-main-loop .live-stream-list-item-action[data-action="save-new-name"]::after { content: "Save Name"; }
#rr-live-stream-list-main-loop .live-stream-list-item-action[data-action="cancel-new-name"]::after { content: "Cancel"; }

/* Keep name-cell tooltips above buttons */
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action::after {
    top: -22px;
    transform: translate(-50%, 2px);
}
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action:hover::after,
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action:focus::after,
#rr-live-stream-list-main-loop .live-stream-list-item-video-name .live-stream-list-item-action:active::after {
    transform: translate(-50%, 0);
}

/* Keep action buttons above local header stacking contexts */
#rr-live-stream-list-main-loop .live-stream-list-item-action,
#rr-presets-list-main-loop .preset-listitem-actions a,
#rr-presets-list-main-loop .preset-listitem-actions button {
    position: relative;
    z-index: 2000;
}

#rr-live-stream-list-main-loop .live-stream-list-item-action:hover,
#rr-live-stream-list-main-loop .live-stream-list-item-action:focus,
#rr-live-stream-list-main-loop .live-stream-list-item-action:active,
#rr-presets-list-main-loop .preset-listitem-actions a:hover,
#rr-presets-list-main-loop .preset-listitem-actions a:focus,
#rr-presets-list-main-loop .preset-listitem-actions a:active,
#rr-presets-list-main-loop .preset-listitem-actions button:hover,
#rr-presets-list-main-loop .preset-listitem-actions button:focus,
#rr-presets-list-main-loop .preset-listitem-actions button:active {
    z-index: 3000;
}

/* Presets tooltip text by button position/class */
.preset-listitem-actions > a::after { content: "Edit Preset"; }
.preset-listitem-actions > button:not(.trash-preset):nth-of-type(1)::after { content: "Duplicate Preset"; }
.preset-listitem-actions > .trash-preset::after { content: "Delete Preset"; }

/* Presets seam collapse (remove double borders between icons) */
#rr-presets-list-main-loop .preset-listitem-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
}
#rr-presets-list-main-loop .preset-listitem-actions > * {
    margin: 0 !important;
    border-radius: 0 !important;
}
#rr-presets-list-main-loop .preset-listitem-actions > * + * {
    margin-left: -1px !important;
}

/* Presets outer corners */
#rr-presets-list-main-loop .preset-listitem-actions > :first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
#rr-presets-list-main-loop .preset-listitem-actions > :last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* Presets default icon/button color darker (match Relay feel) */
#rr-presets-list-main-loop .preset-listitem-actions a,
#rr-presets-list-main-loop .preset-listitem-actions button {
    color: #475569 !important;
}
#rr-presets-list-main-loop .preset-listitem-actions svg {
    stroke: currentColor !important;
}

/* Preserve unique trash intent */
#rr-presets-list-main-loop .preset-listitem-actions .trash-preset {
    color: #dc2626 !important;
}
#rr-presets-list-main-loop .preset-listitem-actions .trash-preset:hover,
#rr-presets-list-main-loop .preset-listitem-actions .trash-preset:focus,
#rr-presets-list-main-loop .preset-listitem-actions .trash-preset:active {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/** Relays Editor Style **/
#relay-editor-next a {padding: 8px 18px}
#video-controls ul li {cursor: pointer!important; user-select: none!important}
#video-controls ul li:nth-child(6) {margin-left: 15px}
#video-controls li svg {border-radius: 6px!important; padding: 3px!important; box-sizing: content-box!important}
#video-controls li svg:hover {background-color: #eff2f6; border-radius: 6px!important; padding: 3px; box-sizing: content-box; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08)!important}
#video-controls li svg:active {background-color: #d0d4da!important}
#video-seek-slider {width: 100%}
#trim-markers li {position: absolute; left: 0}
#start-time-controls li, #end-time-controls li {cursor: pointer; user-select: none!important}
#start-time-controls li svg, #end-time-controls li svg {border-radius: 6px!important; padding: 3px!important; box-sizing: content-box!important}
#start-time-controls li svg:hover, #end-time-controls li svg:hover {background-color: #eff2f6; border-radius: 6px!important; padding: 3px; box-sizing: content-box; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08)!important}
#start-time-controls li svg:active, #end-time-controls li svg:active {background-color: #d0d4da!important}
#video-seek-slider {accent-color: #753cfd; user-select: none!important}
#input-start-time, #input-end-time, #input-start-time:hover, #input-end-time:hover {border: 1px inset rgb(118, 118, 118); border-radius: 3px}
#input-start-time:focus, #input-end-time:focus {outline: none!important}
/*input[type="checkbox"] {cursor: pointer; vertical-align: middle; margin-right: 2px}*/
.checkbox-label {cursor: pointer; user-select: none!important; font-size: 13px; font-weight: 500}
#video-seek-slider:hover {accent-color: #6c36ec}
input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid #c3c3cc;border-radius:4px;background:#fff;display:inline-block;position:relative;cursor:pointer;transition:all .12s ease;box-shadow:0 1px 3px rgba(0,0,0,0.05);vertical-align:middle;}input[type="checkbox"]:checked{background:#635bff;border-color:#635bff;}input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
@keyframes shake {
	0%   { transform: translateX(0); }
	20%  { transform: translateX(-5px); }
	40%  { transform: translateX(5px); }
	60%  { transform: translateX(-5px); }
	80%  { transform: translateX(5px); }
	100% { transform: translateX(0); }
}
.input-error-shake {
	border: 2px solid red!important;
	transition: 0.2s !important;
	animation: shake 0.7s ease;
}
#select-current-frame-thumbnail {cursor: pointer}
#select-current-frame-thumbnail a {padding: 5px 12px; font-size: 13px; line-height: 1.2}
#relay-screenshot {text-align: left}
#relay-screenshot img {max-height: 175px; margin-top: 5px; margin-left: 15px}
#submit-trim a {cursor: pointer; user-select: none; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 15px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; text-decoration: none; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; background-color: #635bff; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); outline: none;}
#submit-trim a:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
#submit-trim a:focus-visible {box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.4);}
#submit-trim.disabled a {cursor: wait; background-color: #b4b2ff!important}

/** Relays Details Style **/
[contenteditable], .dropdown-suggestion {padding: 0 5px}
#relay-speaker, #relay-series, #relay-visibility, #youtube-playlist, #relay-scheduled-date, #relay-scheduled-time, #preset-selection {padding: 5px 15px; z-index: 2; background: transparent; position: relative; border: none; cursor: pointer}
.dropdown-suggestion {position: absolute; top: 12px; left: 17px; color: #B5B5B5; z-index: 1}
[contenteditable]:focus, #relay-speaker:focus, #relay-series:focus, #relay-visibility:focus, #youtube-playlist:focus, #preset-name:focus, #preset-selection {border: none!important; outline: none!important; box-shadow: none!important}
#relay-title {white-space: pre; overflow: hidden; font-size: 15px; font-weight: 400}
#relay-description {min-height: 192px; max-height: 350px; overflow-y: auto; font-size: 15px; font-weight: 400; line-height: 24px;}
#relay-message-title, #youtube-playlist-title {font-size: 15px}
.text-field-focus {border: 1px solid #000!important}
.relay-tag {
    color: #1a1f36;
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    margin: 3px 6px 3px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
[contenteditable] .relay-tag {margin-right: 0px}
.relay-tag i {margin-top: 2px}
.relay-tag i.hidden {display: none!important}
.relay-tag .rr-x {
    color: #6b7280;
    border-radius: 999px;
    padding: 2px;
    transition: background-color 0.16s ease, color 0.16s ease;
}
.relay-tag .rr-x:hover {
    color: #1a1f36;
    background-color: #e9edf5;
}
.relay-tag:hover,
.relay-tag:focus,
.relay-tag:focus-visible {
    color: #1a1f36;
    background-color: #eef1f6;
    border-color: rgba(99, 91, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.35);
    outline: none;
}

/*.relay-ai-tag {color: #333; background-color: #f0dfff; border: 1px solid #e5cdfd;}
.relay-ai-tag:hover, .relay-ai-tag:focus {color: #333; background-color: #f0dfff; border: 1px solid #e5cdfd; box-shadow: 0 0 0 1px rgba(99, 91, 255, 0.4)}
.rr-ai {background-color: #9372de}*/
.relay-ai-tag {background:linear-gradient(135deg,rgba(102,126,234,0.18) 0%,rgba(118,75,162,0.18) 100%);border:1px solid rgba(102,126,234,0.5);border-radius:15px;padding:6px 12px;font-size:12px;font-weight:500;color:#111;cursor:pointer;font-family:Inter,sans-serif;display:inline-block;position:relative;overflow:hidden;transition:all 0.3s ease}
.relay-ai-tag::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.6) 50%,transparent 100%)}
.relay-ai-tag:hover::before{left:100%;transition:left 0.6s ease}
.relay-ai-tag:hover{background:linear-gradient(135deg,rgba(102,126,234,0.35) 0%,rgba(118,75,162,0.35) 100%);border-color:rgba(102,126,234,0.75);color:#111;box-shadow:0 4px 12px rgba(102,126,234,0.3)}
.relay-ai-tag:focus{outline:none;box-shadow:0 0 0 3px rgba(102,126,234,0.2);border-color:rgba(102,126,234,0.7);color:#111}
.relay-ai-tag.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:transparent;color:white}
.relay-ai-tag.active::before{display:none}
.relay-ai-tag.active:hover{background:linear-gradient(135deg,#5568d3 0%,#65408b 100%);color:white;transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}

#relay-message-title-wrapper.disabled, #youtube-playlist-dropdown-wrapper.disabled .elementor-widget-container {background-color: #e1e4e9; cursor: not-allowed}
#youtube-playlist-dropdown-wrapper.disabled #youtube-playlist {cursor: not-allowed!important}
#youtube-playlist-dropdown-wrapper.disabled .dropdown {display: none!important}
.dropdown-arrow {cursor: pointer; color: #D3D3D3}
.dropdown {background-color: #FFFFFF; z-index: 3; position: absolute; width: 100%; left: 0; top: 52px; display: none; transition: none; font-family: Inter, sans-serif; margin-bottom: 5px}
.dropdown ul, .dropdown-card {width: 100%; margin: 0 auto; border: 1px solid #e1e4e9; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); padding: 10px}
.dropdown ul li {list-style: none; cursor: pointer; padding: 7px 12px; border-radius: 8px}
.dropdown ul li:hover {background-color: #f4f6f8}
.dropdown ul li[data-disabled="yes"] {cursor: not-allowed; color: #B5B5B5; font-style: italic}
.dropdown ul li[data-disabled="yes"]:hover {background-color: inherit}
#refresh-youtube-playlists {display: inline-block}
#refresh-youtube-playlists i {cursor: pointer}
#new-youtube-playlist, #cancel-new-youtube-playlist {position: absolute; top: 0; right: 3px; cursor: pointer}
#new-youtube-playlist:hover {color: var(--e-global-color-primary)}
#cancel-new-youtube-playlist:hover {color: red}
#submit-details a, #save-preset a {cursor: pointer; user-select: none; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 15px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; text-decoration: none; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; background-color: #635bff; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); outline: none;}
#submit-details a:hover, #save-preset a:hover {background-color: #5851e4; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}
#submit-details a:focus-visible, #save-preset a:focus-visible {background-color: #5851e4; box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.4)}
#submit-details.disabled a, #save-preset.disabled a {cursor: wait; background-color: #b4b2ff!important}
.relay-destination {accent-color: #875AEE}
#youtube-guidelines {font-size: 13px; text-decoration: none; color: #5188e0 !important}
#youtube-guidelines:visited {color: #5188e0}
#youtube-kids-selector li {cursor: pointer}
#relay-scheduled-wrapper {min-width: 270px}
.dropdown-wrapper {user-select: none}
.input-svg div {padding-left: 32px!important}
.input-svg i {position: absolute; left: 8px; font-size: 24px; top: 13px; background-color: var(--e-global-color-secondary)}
.dropdown-cal-btn {border-radius: 10px; border: none; color: #000000; cursor: pointer; text-align: center; padding: 0}
.dropdown-cal-btn.header {width: 36px; height: 36px; transform: translatey(2px)}
.dropdown-cal-btn.footer {width: 66px; height: 33px}
.dropdown-cal-btn:hover {background-color: #f3f6fb; color: #000000}
.dropdown-cal-btn:focus {background-color: #FFFFFF; color: #000000}
.dropdown-cal-btn i {font-size: 18px}
.dropdown-cal-header, .dropdown-cal-footer, .dropdown-time-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px}
.dropdown-cal-footer {margin-top: 24px}
.dropdown-cal-month {font-weight: 500; color: #111}
.dropdown-cal-days-grid {display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; font-size: 13px; color: #9aa3ad; margin-bottom: 10px}
.dropdown-cal-day:not(.blank) {padding: 8px 6px; border-radius: 8px; cursor: pointer; color: #111111; font-weight: 600}
.dropdown-cal-day.label {color: #9aa3ad; font-weight: 500; font-size: 12px}
.dropdown-cal-day.cell:not(.blank):not(.selected):hover {background: #f3f6fb}
.dropdown-cal-day.selected:not(.blank) {background: var(--e-global-color-primary); color: #FFFFFF}
.dropdown-time-list {max-height: 220px; overflow-y: auto; padding: 8px}
.dropdown-time-item {padding: 12px 14px; border-radius: 8px; margin-bottom: 6px; cursor: pointer}
.dropdown-time-item:hover {background: #f3f6fb}
.dropdown-time-item.selected {background: var(--e-global-color-primary); color: #FFFFFF; font-weight: 700}


/** Relays Thumbnail Style **/
.page-id-2092 .drag-hover {border-color: var(--e-global-color-primary)!important; background-color: rgba(241, 236, 255, 0.5)!important}
#thumbnail-image-upload {cursor: pointer}
#thumbnail-image-upload:hover .svg-stroke-accent svg {color: #753cfd}
#toggle-upload-type {color: #838383}
#toggle-upload-type:hover {color: #000; cursor: pointer; text-decoration: none}
.thumbnail-image {text-align: center!important}
.thumbnail-image img, #template-preview-thumbnails img {max-height: 150px}
.thumbnail-image.enable-select img, .thumbnail-image.enable-select .thumbnail-image-select {cursor: pointer}
.thumbnail-image img {transition: opacity 0.2s ease; border: 2px solid #FFFFFF!important}
.thumbnail-image img.selected {border: 3px solid #635bff!important}
.thumbnail-image img.image-hover {opacity: 0.5}
.thumbnail-tempates-carousel {position: relative; display: flex; align-items: center; max-width: 100%; padding: 0 10px}
.carousel-arrow {
    color: #1a1f36;
    border: 1px solid transparent;
	border-radius: 100%;
	font-size: 1.5rem;
	width: 40px;
	height: 40px;
	align-items: center;
	cursor: pointer;
	z-index: 3;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
	line-height: 1em
}
.carousel-arrow:hover,
.carousel-arrow:focus,
.carousel-arrow:focus-visible {
    color: #1a1f36;
    background-color: #eef1f6;
    border-color: #e2e2e2;
    box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.06);
    outline: none;
}
.carousel-container {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 1rem;
	padding: 1rem;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.carousel-container::-webkit-scrollbar {display: none}
.template-card {
	flex: 0 0 auto;
	/* width: 280px; */
	width: 175px;
    border: 1px solid #e2e2e2;
	border-radius: 6px;
	scroll-snap-align: start;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.template-card:hover,
.template-card:focus,
.template-card:focus-visible,
.template-card:focus-within {
    border-color: rgba(99, 91, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.35);
    background: #fafbfd;
    outline: none;
}
.template-card.selected {
    border-color: rgba(99, 91, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.35);
    background: rgba(99, 91, 255, 0.06);
}
.template-name {
	text-align: left;
	font-family: Inter;
	font-weight: 500;
	padding: 0.5rem;
	border-bottom: 2px solid #e1e4e9;
	font-size: 0.95rem;
	overflow: hidden;
	white-space: nowrap;
}
.template-name.selected {background-color: rgba(99, 91, 255, 0.06)}
.template-thumb {width: 100%; height: auto; display: block}
.select-template {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
    background: #635bff;
	color: white;
	font-family: Inter;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
	z-index: 2;
}
.select-template:hover,
.select-template:focus,
.select-template:focus-visible {
    background-color: #564ef5;
    box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.06);
    outline: none;
}
.select-template:active {
    background-color: #4c45dc;
}
.template-card:hover .select-template,
.template-card:focus-within .select-template,
.template-card.selected .select-template {
    display: block;
}
.thumb-wrapper {position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden}
.template-thumb {width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease}
.template-card:hover .template-thumb,
.template-card:focus-within .template-thumb {opacity: 0.55}
#submit-thumbnail a {cursor: pointer; user-select: none; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 15px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; text-decoration: none; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; background-color: #635bff; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); outline: none;}
#submit-thumbnail a:focus-visible {box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.4)}
#submit-thumbnail.disabled a {cursor: wait; background-color: #b4b2ff!important}

/* Integrations Style */
.integration-wrapper {min-width: 500px !important; max-width: 500px !important;}
.integration-button {cursor: pointer}
.integration-button a {padding: 8px 16px; background-color: #753cfd!important; border: 1px solid #dee2e8; border-radius: 6px; color: #000000; font-size: 14px; margin-right: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)}
.page-id-2501 .disabled a {padding: 8px 16px; background-color: #b4b2ff!important; border: 1px solid #dee2e8; cursor: not-allowed; user-select: none}
.page-id-2501 .disconnect a {background-color: #F4F6F8!important; color: #e61947!important; border: 1px solid transparent!important}
.page-id-2501 .disconnect:hover a {background-color: #eceeef!important; color: #000!important; border: 1px solid #dadde2!important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); font-weight: 500}
.page-id-2501 .rr-unlink {background-color: #e61947}
.page-id-2501 .disconnect:hover .rr-unlink,
.page-id-2501 .rr-unlink:hover {background-color: #000!important}

/* Integrations - RTMP Stream Key Field */
#live-streaming-wrapper .rr-rtmp-key-field {
    position: relative;
    display: block;
    width: 100%;
    max-width: 560px;
}

#live-streaming-wrapper .rr-rtmp-key-label {
    color: #2b2b2b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 3px 0;
}

#live-streaming-wrapper .rr-rtmp-key-input {
    width: 100%;
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 84px 6px 0;
    color: #111;
    font-size: 11px;
    letter-spacing: 0.01em;
    outline: none;
    line-height: 1.15;
}

#live-streaming-wrapper .rr-rtmp-key-input.masked {
    letter-spacing: 0.14em;
    color: #111;
    -webkit-text-fill-color: #111;
    font-size: 13px;
}

#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dee2e8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #64748b !important;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
    vertical-align: middle;
}

#live-streaming-wrapper #rr-rtmp-stream-key-toggle.relay-list-item-action {
    right: 31px;
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

#live-streaming-wrapper #rr-rtmp-copy-key-btn.rr-rtmp-key-copy.relay-list-item-action {
    right: 0;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action:hover,
#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action:focus,
#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action:active {
    background-color: #f2f5f7 !important;
    color: #1e293b !important;
    z-index: 2;
}

#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action .rr-icons {
    pointer-events: none;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    display: inline-block;
}

#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action .rr-icons::before {
    font-size: 18px !important;
}

#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -22px;
    left: 50%;
    background: #111827;
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 2px);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1300;
}

#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action[data-tooltip]:hover::after,
#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action[data-tooltip]:focus::after,
#live-streaming-wrapper .rr-rtmp-key-field .relay-list-item-action[data-tooltip]:active::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

#rr-rtmp-copy-toast.relay-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(8px);
    background: #111827;
    color: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#rr-rtmp-copy-toast.relay-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Relay list confirm modal */
body.relay-confirm-modal-open {overflow: hidden}

#rr-relay-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#rr-relay-confirm-modal {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    padding: 22px;
    border: 1px solid #e5e7eb;
}

#rr-relay-confirm-title {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
}

#rr-relay-confirm-message {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #334155;
}

#rr-relay-confirm-modal .rr-relay-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

#rr-relay-confirm-modal .rr-relay-confirm-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

#rr-relay-confirm-modal .rr-relay-confirm-btn:hover,
#rr-relay-confirm-modal .rr-relay-confirm-btn:focus {
    background: #f9fafb;
    border-color: #9ca3af;
    outline: none;
}

#rr-relay-confirm-modal .rr-relay-confirm-btn.danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

#rr-relay-confirm-modal .rr-relay-confirm-btn.danger:hover,
#rr-relay-confirm-modal .rr-relay-confirm-btn.danger:focus {
    background: #b91c1c;
    border-color: #b91c1c;
}

@media (max-width: 640px) {
    #rr-relay-confirm-backdrop {
        padding: 14px;
    }

    #rr-relay-confirm-modal {
        padding: 18px;
        max-width: 100%;
    }

    #rr-relay-confirm-modal .rr-relay-confirm-actions {
        flex-direction: column-reverse;
    }

    #rr-relay-confirm-modal .rr-relay-confirm-btn {
        width: 100%;
    }
}

/* Review Relay */
#publish-relay a {cursor: pointer; user-select: none; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 15px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; text-decoration: none; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; background-color: #635bff; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); outline: none}
#publish-relay a:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}
#publish-relay.disabled a:hover {box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15)}
#publish-relay.disabled a {cursor: not-allowed; background-color: #b4b2ff!important}
#save-draft.disabled a {opacity: 0.7; background-color: #f2f2f2!important}
#save-draft.publishing a:hover {border: 1px solid #dee2e8; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)}
#publish-relay.publishing a, #save-draft.publishing a {cursor: wait}
#save-draft.saved a {padding-left: 38px; color: #753CFD!important}
#save-draft.saved .rr-check {position: absolute; left: 16px; font-size: 20px; background-color: #753CFD}
#label-relay-title .loading-animation-content, #label-relay-description .loading-animation-content {opacity: 1!important}
#relay-title-wrapper.disabled, #relay-description-wrapper.disabled {background-color: #EDEDED; cursor: progress}
#label-relay-title .loading-animation-spinner, #label-relay-description .loading-animation-spinner {top: 0; right: -10px; width: auto; left: initial; transform: initial}
.preview-text {font-size: 14px}
#play-preview-video, #play-preview-audio {cursor: pointer}
.modal {display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6)}
.modal-content {position: absolute; width: 80%; max-width: 800px; padding: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center}
.modal video {width: 850%; height: auto}
.modal audio {outline: none}
.modal .close {position: absolute; top: 10px; right: 15px; color: white; font-size: 30px; cursor: pointer; z-index: 999}
#preview-audio-modal .close {display: none}
.page-id-2634 #new-youtube-playlist, .page-id-2634 #cancel-new-youtube-playlist {right: calc(30% + 3px)}
#save-draft a {cursor: pointer; padding: 8px 16px; background-color: #ffffff; border: 1px solid #dee2e8; border-radius: 6px; color: #000000; font-size: 15px; margin-right: 5px; margin-bottom: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)}
#save-draft a:hover {background-color: #ffffff; color: #000000; border-color: #999; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08)}
p[data-destination-type] {display: inline-block; padding: 4px 8px; border: 0.0625rem solid #d7d3c9;border-radius: 0.25rem;}
#destinations-wrapper .elementor-widget-container { display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px; border: 1px solid #D3D3D3; border-radius: 8px; cursor: pointer; transition: all 0.15s ease;}
#destinations-wrapper .relay-destination { margin: 0; flex-shrink: 0; cursor: pointer; }
#destinations-wrapper .checkbox-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 15px; line-height: 1em}
#destinations-wrapper .checkbox-label img { height: 12px; width: auto; display: block; }
#destinations-wrapper .elementor-widget-container:hover { border-color: #000; }
#destinations-wrapper .elementor-widget-container:has(.relay-destination:checked) { border-color: #6a37f1; background-color: rgba(156, 126, 238, 0.167); }






/* Settings Page */
.settings-card {transition: background 0.2s ease, box-shadow 0.2s ease; border: 1px solid transparent; cursor: pointer}
.settings-card:hover {background: #FCFBFC; box-shadow: 0 2px 2px rgba(0,0,0,0.05); border: 1px solid #EFEFEF}
.settings-card .elementor-icon-wrapper {max-height: 24px}
.settings-card .elementor-icon-wrapper svg {color: var(--e-global-color-primary)}
.settings-card:hover .icon-wrapper {border-color: #FCFBFC!important}
.breadcrumbs {font-size: 14px; font-weight: 600}
.breadcrumbs a {text-decoration: none; transition: color 0.2s}
.breadcrumbs a:hover {color: #6634dc; text-decoration: none}
.breadcrumbs .divider {margin: 0 10px; color: #a8a8a8; font-size: 20px}
.breadcrumbs .current {color: #3d3d3d; font-weight: 500}

.profile-new-value input, #profile-password input {padding: 8px 12px; font-size: 14px; border: 1px solid #ccc!important; border-radius: 8px!important; outline: none; transition: border-color 0.2s ease, outline 0.2s ease; box-sizing: border-box}
.profile-new-value input:hover, #profile-password input:hover {border-color: #888!important}
.profile-new-value input:focus, #profile-password input:focus {border-color: #000!important; outline: 1px solid #000}
.profile-button a {padding: 4px 15px; text-align: center; cursor: pointer}
.profile-button a.disabled {background-color: #b4b2ff!important; cursor: not-allowed}
.profile-button a.setting-save {background-color: var(--e-global-color-primary)!important; color: #ffffff!important}

.subpage-tabs-wrapper {border-bottom: 1px solid #ddd; padding-bottom: 6px}
.subpage-tabs-wrapper .tab-link {margin-right: 20px; padding: 3px 6px; text-decoration: none; color: #333; font-weight: 500; border-radius: 6px; transition: background 0.2s; font-size: 15px; font-weight: 500}
.subpage-tabs-wrapper .tab-link:hover {background: #f5f5f5}
.subpage-tabs-wrapper .tab-link.active {color: #763cfd}
.subpage-tabs-wrapper .tab-indicator {position: absolute;bottom: 0;height: 2px;background: #6c2bd9;border-radius: 2px;transition: left 0.3s ease, width 0.3s ease}

.page-id-4408 #payment-method-card-type .elementor-icon {transform: translateY(3px)}

#rr-invoices-list-wrapper {max-height: 60vh; overflow: auto}
.invoice-list-item:hover {background-color: #ebedf0}
.invoice-list-item:not(:first-child) {border-top: 1px solid #f1f1f1}
.invoice-list-item:last-child {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px}
.invoice-list-item-action {padding: 8px 16px; background-color: #eff2f6!important; border: 1px solid #dee2e8; border-radius: 6px; color: #000000; padding: 2px 10px; font-size: 14px; margin-right: 5px; margin-bottom: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)}
.invoice-list-item-action:hover, .invoice-list-item-action:focus {background-color: #d0d4da; color: #000000;border-color: #999; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08)}
.invoice-list-item-action .rr-link  {background-color: var(--e-global-color-primary)}

/* Relay Presets */
#preset-name {padding: 0 5px; background: transparent; border: none}
#create-preset-button a {cursor: pointer; user-select: none}
#create-preset-button a:active, #create-preset-button a:focus, #create-preset-button a:focus-visible {background-color: #3e3a9f!important}
.relay-tag.media-type-active {
    color: #1a1f36;
    background: rgba(99, 91, 255, 0.06);
    border: 1px solid rgba(99, 91, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.35);
}
.relay-tag.media-type-active:hover,
.relay-tag.media-type-active:focus,
.relay-tag.media-type-active:focus-visible {
    color: #1a1f36;
    background: rgba(99, 91, 255, 0.06);
    border: 1px solid rgba(99, 91, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.35);
    outline: none;
}

/* =========================
   Presets - Unified Actions
========================= */

.preset-listitem-actions {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border: none !important; /* use per-button borders like Relay */
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Base preset action buttons/links */
.preset-listitem-actions a,
.preset-listitem-actions button {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dee2e8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #64748b !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

/* Collapse seams */
.preset-listitem-actions > * + * {
    margin-left: -1px !important;
}

/* Outer corners */
.preset-listitem-actions > :first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
.preset-listitem-actions > :last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* Hover/focus */
.preset-listitem-actions a:hover,
.preset-listitem-actions button:hover,
.preset-listitem-actions a:focus,
.preset-listitem-actions button:focus {
    background: #f2f5f7 !important;
    color: #1e293b !important;
}

/* Icon sizing */
.preset-listitem-actions svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}

/* Preserve unique trash red behavior */
.preset-listitem-actions .trash-preset {
    color: #dc2626 !important;
}
.preset-listitem-actions .trash-preset:hover,
.preset-listitem-actions .trash-preset:focus {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}
.preset-listitem-actions .trash-preset svg {
    stroke: currentColor !important;
}

/* Start Relay Panel */
body:not(.page-id-53) #start-relay-overlay {z-index: 9998!important}
.page-id-53 #start-relay-overlay {/*display: none; */z-index: -9998}
#start-relay-overlay.front {/*display: block*/z-index: 9998}
.page-id-53 #start-relay-backdrop {opacity: 0; transition: opacity .2s linear}
#start-relay-overlay.active #start-relay-backdrop {display: block; opacity: 1; transition: opacity .2s linear}
#start-relay-panel {min-height: 92vh; max-height: 92vh; overflow: auto!important}
#start-relay-panel-buttons {min-height: 8vh; max-height: 8vh; bottom: 0!important}
.page-id-53 #start-relay-panel, .page-id-53 #start-relay-panel-buttons {transform: translateX(660px); transition: transform .2s linear}
#start-relay-overlay.active #start-relay-panel, #start-relay-overlay.active #start-relay-panel-buttons {transform: translateX(0); transition: transform .2s linear}
#new-relay-sidebar-close p {cursor: pointer; user-select: none}
#preset-selection {padding: 0 5px; z-index: 2; background: transparent; position: relative; border: none; cursor: pointer}
#preset-selection:focus {border: none!important; outline: none!important; box-shadow: none!important}
#new-relay-image-upload img {margin-top: 12px; width: auto; max-width: 215px; height: auto; max-height: 180px}
#start-relay-panel-buttons button {width: 245px; font-size: 14px; padding: 8px 16px; border-radius:8px; cursor: pointer; font-family: Inter, sans-serif; transition: background-color 0.2s ease, border-color 0.2s ease}
#start-relay-panel-buttons .primary-btn {background-color: #635bff; color: #FFFFFF; border: none; font-weight: 700}
#start-relay-panel-buttons .primary-btn:hover, #start-relay-panel-buttons .primary-btn:focus {background: #524be5}
#start-relay-panel-buttons .muted-btn {background:#f5f6f9; border:1px solid #e8e9ef;  color: #635bff; font-weight: 500}
#start-relay-panel-buttons .muted-btn:hover, #start-relay-panel-buttons .muted-btn:focus {background: #e6e7ed; border-color: #d0d2da}