.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;
}
.tv-screen-wrap
{
    background: #000;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.95);
}

/* TV frame */
.tv-wrap { display: inline-block; position: relative; }
.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);
    border-radius: 2px;
}
.tv-antenna-l { transform: rotate(-20deg); transform-origin: bottom center; }
.tv-antenna-r { transform: rotate(20deg);  transform-origin: bottom center; }
.tv-frame { position: relative; z-index: 1; }
.tv-frame {
    --tv-color: #1a7a9a;
    display: inline-grid;
    grid-template-columns: 20px auto 20px;
    grid-template-rows: 20px auto 50px;
    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: 5px solid #CCC;
    box-shadow:
        0 0 12px 8px rgba(255,255,255,0.3),
        4px 6px 22px rgba(0,0,0,0.9),
        0 1px 0 rgba(255,255,255,0.15),
        inset 0 2px 8px rgba(255,255,255,0.18),
        inset 0 -3px 6px rgba(0,0,0,0.35);
}
.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; }
.tv-bezel-b
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: -10px 12px 0 12px;
}
.tv-grill
{
    width: 120px;
    height: 28px;
    background-image: radial-gradient(circle, rgba(0,0,0,0.45) 1.5px, transparent 1.5px);
    background-size: 6px 6px;
    border-radius: 4px;
    margin-top: -4px;
}
.tv-btn
{
    color: #000 !important;
    font-size: 1.2rem;
}
.tv-knob {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 35% 35%, #666, #1a1a1a);
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.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-play-pause
{
	color: var(--green);
}
.btn-stop
{
	color: var(--red);
}
.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-dump
{
	color: #987654;
}
#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;
}