.br-30 { border-radius: 30px; }
.br-50 { border-radius: 50px; }

.ui-autocomplete { position: absolute; z-index: 1000; }
#tag-input-wrap .ui-autocomplete { bottom: 100%; top: auto !important; left: 20px !important; }
.form-control:focus,
.form-control-lg:focus
{
    border: 2px solid #e289f8 !important;
    box-shadow: none !important;
    outline: none;
}
.ui-autocomplete .ui-ac-tag
{
    background: #555;
    color: #fff;
    cursor: pointer;
    padding: 4px 8px;
    list-style: none;
}
.ui-autocomplete .ui-ac-tag:hover { background: #777; }

.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu.bg-dark .dropdown-item { color: #fff; }
.dropdown-menu.bg-dark .dropdown-item:hover
{
    background-color: #fff;
    color: #000;
}
pre { background: #FFF; }

a { text-decoration: none; color: #e289f8; }
a:hover { text-decoration: underline; color: #c721f3; }

.video-preview
{
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}
/* ===== BEGIN TV ===================== 2026-03-17 09:26:21 */

/* Outer wrapper - inline-block so it shrinks to fit the frame */
.tv-wrap { display: inline-block; position: relative; }

/* Rabbit-ear antennas - absolutely positioned above the frame */
.tv-antenna-wrap
{
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 24px;
}
.tv-antenna
{
    width: 4px;
    height: 80px;
    background: linear-gradient(to top, #888, #DDD); /* darker at base, lighter at tip */
    border-radius: 2px;
}
.tv-antenna-l { transform: rotate(-20deg); transform-origin: bottom center; }
.tv-antenna-r { transform: rotate(20deg);  transform-origin: bottom center; }

/* The TV body - 3x3 grid: corner bezels + screen center + bottom controls row */
.tv-frame
{
    --tv-color: #1A7A9A;  /* overridable per-instance via inline style */
    position: relative;
    z-index: 1;
    display: inline-grid;
    grid-template-columns: 20px auto 20px; /* left bezel | screen | right bezel */
    grid-template-rows: 20px auto 70px;    /* top bezel | screen | bottom controls */
    background:
        linear-gradient(145deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(0,0,0,0.2) 100%),
        var(--tv-color);
    border-radius: 20px;
    border: none;
    box-shadow:
        4px 6px 22px rgba(0,0,0,0.9),          /* drop shadow */
        0 1px 0 rgba(255,255,255,0.15),          /* top highlight edge */
        inset 0 2px 8px rgba(255,255,255,0.18),  /* inner top shine */
        inset 0 -3px 6px rgba(0,0,0,0.35);       /* inner bottom shadow */
}

/* Corner/edge bezels - transparent grid cells that carry the frame's border-radius */
.tv-bezel { background: transparent; }
.tv-bezel-tl { border-radius: 20px 0 0 0; }
.tv-bezel-tr { border-radius: 0 20px 0 0; }
.tv-bezel-bl { border-radius: 0 0 0 20px; }
.tv-bezel-br { border-radius: 0 0 20px 0; }

/* Screen area - gray recessed bezel, darkest nearest screen, lightening outward */
.tv-screen-wrap
{
    background: #222;  /* innermost, darkest - recessed shadow */
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.95), /* deep inner vignette on the screen */
        0 0 0 3px #444,                   /* mid bezel ring */
        0 0 0 6px #666;                   /* outer bezel ring, lightest */
}


/* Bottom cell - holds the controls bar */
.tv-bezel-b
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0 0 0;
}

/* Controls bar along the bottom - play, stop, share knobs + decorative dots + LED */
.tv-controls
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.35),
        0 1px 0 rgba(255,255,255,0.15);
    width: calc(100% + 12px);
    margin: 0 -6px;
}
/* Push knobs to the right - LED + speaker grills stay left */
.tv-controls > a:first-of-type { margin-left: auto; }
/* Extra gap between LED and speaker grills */

/* Clickable knobs - play, stop, share */
.tv-knob
{
    color: #CCC;
    font-size: 12px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 38% 32%, #4A3C2C, #221A10); /* brown bakelite look */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 3px 6px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.12);
    transition: color .2s, box-shadow .15s;
    text-decoration: none;
}
.tv-knob:hover
{
    color: #FFF;
    box-shadow:
        0 3px 10px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.18);
    text-decoration: none;
}
.tv-knob.active,
.tv-knob:active
{
    color: #5CF;
    box-shadow:
        0 0 10px rgba(80,200,255,0.5),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Decorative dot-grid circles - purely cosmetic, mimic old TV tuner dials */
.tv-dot-circle
{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.25);
    background-image: radial-gradient(circle, rgba(0,0,0,0.6) 1.5px, transparent 1.5px);
    background-size: 6px 6px;
    box-shadow:
        inset 0 1px 4px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.1);
    flex-shrink: 0;
}

/* Power LED - red when off, green when playing */
.tv-led
{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #CC0000;
    box-shadow: 0 0 7px 3px rgba(200,0,0,0.55);
    transition: background .3s, box-shadow .3s;
    flex-shrink: 0;
    margin-right: 12px;
}
.tv-led.on
{
    background: #00FF99;
    box-shadow: 0 0 9px 4px rgba(0,255,140,0.55);
}

/* Nudge fa-share-alt left - glyph has inherent right-side whitespace */
.tv-share-icon { margin-left: -2px; font-size: 1.25em; }
/* Nudge fa-play right - triangle glyph sits left of its bounding box; fa-pause is centered so no nudge */
.tv-play-icon.fa-play { margin-left: 2px; margin-top: 1px; }
/* ===================== END TV ===================== */

.btn-share-wrap
{
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: top;
}
.btn-share-wrap .fa-circle    { position: absolute; top: 0; left: 0; }
.btn-share-wrap .fa-share-alt { position: absolute; top: 50%; left: 38%; transform: translate(-50%, -50%) scale(0.65); }
.btn-share-wrap .fa-edit      { position: absolute; top: 50%; left: 43%; transform: translate(-50%, -50%) scale(0.65); }

.btn-media:hover
{
    filter: brightness(85%);
}
.btn-edit
{
    color: var(--blue);
}

#btn-video-play-pause
{
	color: var(--green);
}
#btn-video-stop
{
	color: var(--red);
}
#btn-dump
{
	color: #987654;
}
#btn-preview-step2
{
	color: var(--purple);
}
#btn-save-youtube
{
	color: #F00;
}

.btn-tags
{
    background-color: var(--orange);
    color: var(--dark);
    padding: 2px 6px 2px 6px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 25px;
}
.btn-tags:hover
{
    text-decoration: none;
	background-color: var(--danger);
	transition: all .1s ease-in;
    ilter: brightness(85%);
}


        .inputDisplay
        {
            width: 100px;
            font-size: 1.3em;
            border: 0px;
            font-weight: bold;

        }
        .ui-slider .ui-slider-handle
        {
            height: 1.5em;
            width: 1.5em;
            background: #000;
            border: 1px solid #FFF;
            border-radius: 50%;
			cursor: pointer;
        }

        .ui-slider-horizontal
        {
            height: 1em; /* standard size .8em */
            background: var(--white);
        }

        .ui-widget-header
        {
            background: #F00;
        }

        .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 20px; }
        .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 20px; }
        .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 20px; }
        .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 20px; }


        ui-slider-horizontal ui-state-default
        {
            background: red url(ttps://bestanimations.com/Signs&Shapes/Arrows/Right/right-arrow-35.gif) no-repeat scroll 50% 50%;
            content: '222';
        }

        .btn-rounded
        {
            height: 2em;
            width: 2em;
            font-weight: bold;
            font-size: 1.5em;
            border-radius: 50%;
        }

        /*  BEGIN Number Type Formatting */
            input[type="number"] {
              -webkit-appearance: textfield;
              -moz-appearance: textfield;
              appearance: textfield;
            }

            input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
              -webkit-appearance: none;
            }

            .number-input {
              border: 2px solid #555;
              display: inline-flex;
              border-radius: 50px;
              background-color: #343a40;
              overflow: hidden;
            }

            .number-input,
            .number-input * {
              box-sizing: border-box;
            }

            .number-input button {
              outline:none;
              -webkit-appearance: none;
              background-color: transparent;
              border: none;
              align-items: center;
              justify-content: center;
              width: 2rem;
              height: 2rem;
              cursor: pointer;
              margin: 0;
              position: relative;
              color: #fff;
              font-size: .8rem;
            }

            .number-input button:before,
            .number-input button:after {
              display: none;
            }

            .number-input input[type=number] {
              font-family: sans-serif;
              max-width: 5rem;
              padding: .5rem;
              border: solid #555;
              border-width: 0 2px;
              font-size: 1.5rem;
              height: 2rem;
              font-weight: bold;
              text-align: center;
              background-color: #343a40;
              color: #fff;
            }
        /*  END Number Type Formatting */



.media-label { font-size: .6rem; } /* Clauded: 2026-03-10 15:48:22 */

/* Clauded: 2026-03-12 11:30:58 */
.meta-icon-tip { position: relative; }
.meta-icon-tip .tip-text { display: none; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-size: .8rem; pointer-events: none; }
.meta-icon-tip:hover .tip-text,
.meta-icon-tip:active .tip-text { display: block; }

/* Clauded: 2026-03-11 14:42:59 */
@media (max-width: 1199.98px)
{
    .navbar-nav .nav-link { font-size: 1.25rem; }
    .navbar-nav .nav-item { border-bottom: 1px solid #444; }
    .navbar-nav .nav-item:last-child { border-bottom: none; }
    .navbar-nav .nav-link:active { background-color: var(--dark); color: var(--light) !important; }
}

.navbar-nav .nav-link:hover { background-color: var(--dark); color: var(--light) !important; }


.new-spin {
    -webkit-animation: fa-spin .6s infinite linear reverse;
    animation: fa-spin .4s infinite linear reverse;
}