:root {
    --bs-font-sans-serif: "commissioner-variable", "Roboto", Helvetica, Arial, sans-serif;
    /* font-family: "commissioner-variable", sans-serif;
    font-variation-settings: "VOLM" 0, "FLAR" 0, "slnt" 0, "wght" 100; */
}
.dark-version {
    background-color: #151A2C!important;
    .main-content {
        background-color: transparent!important;
    }
    input.form-control {
        color: #fff!important;
       -webkit-text-fill-color: #fff !important; 
    }
}

.container-fluid{
    padding-left: 16px;
    padding-right: 16px;
}
.sidenav-header {
    .d-flex {
        img {
            margin: auto 20px auto 0;
        }
    }
}

.navbar.navbar-main {
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    & ~ .navbar-vertical.navbar-expand-xs {
        top: 78px;
        width: 100px;

        position: sticky;
        display: inline-block;
        top: 2px;
        bottom: auto;
        vertical-align: top;
    }
}

@media (max-width: 1200px) {
    .g-sidenav-show:not(.rtl) .sidenav {
        position: fixed!important;
    }
}
@media (min-width: 1200px) {
    .sidenav.fixed-start.tu-block + .main-content {
        margin-left: 120px;

        margin-left: 0;
        display: inline-block;
        width: calc(100% - 130px);
    }

    .tu-editor-container {
        .upper-wrap {
            grid-template-columns: auto 1fr!important;
        }
    }
}





.btn {
    display: inline-flex;
    white-space: nowrap;
    text-transform: none;
    background-size: auto 100%;
    background-position: center;
    border-radius: 3px;
    padding: .4rem .6rem;;

    span,
    .material-icons {
        margin-top: auto;
        margin-bottom: auto;      
    }

/*    .material-icons {
        height: 1rem;
    }*/
    .txt {
        line-height: 1.6;
        .tu-icon + & {
            margin-left: 2px;
        }
    }
}
    

.btn-primary {
    background-color: #E73874;
    box-shadow: none;
    border: none;
    font-weight: 500;
    font-size: .9rem;
    &:hover{
        background-color: #D32F6A;
        box-shadow: none;
    }
}

#filelist:empty {
    display: none;
} 

.navbar-nav .dropdown-menu {
    overflow: visible;
    &:before {
        color: #202940;
    }
}




/* Theme upgrade beta styles */

.tu-icon {
    width: 20px;
    height: 20px;
    margin: auto;
    stroke: #fff;
    &.sidenav-toggler-inner {
        display: flex;
        margin: auto;
        justify-content: center;
        flex-direction: column;
    }
    &.fast-forward {
        transform: rotate(180deg);
    }
    &.convert {
        width: 23px;
        height: 23px;
    }
    &.redo {
        transform: scaleX(-1);
    }
}

.tu-title-6,
h6.tu-title-6 {
    font-size: .8rem!important;
    font-weight: 400;
}

.theme-upgrade,
.dark-version .main-content.theme-upgrade {
    background-color: #151A2C!important;
}

.dark-version {
    --tu-block-bg: #1A2035;
    --tu-block-radius: 4px;

}

.navbar-nav.tu-head-nav {
    display: flex;
    gap: 30px;
    margin-left: 30px;
    .nav-link {
        display: flex;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        background: #212943;
        border-radius: 50%;;
        .tu-icon {
            margin: auto;
        }
    }

    .dropdown-menu-end {
        .dropdown:not(.dropdown-hover) &.dropdown-menu.show {
             margin-top: 3rem !important;
        }
        margin-top: 3rem !important;
        margin-right: 0 !important;
        min-width: 0;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        &:before {
            right: 13px;
        }
        li {
            white-space: nowrap;
            color: #fff;
        }
    }

}

/* grid edit */

.streaming-page .player {
    height: 281px;
    /* aspect-ratio: 1.77778; 16/9 */
    font-size: 0;
    video {
        height: 100%;
    }
}


.tu-editor-container {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 6px 2px;
    .upper-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;  
        .sidenav.navbar.navbar-vertical {
            margin-right: 0!important;
            width: 100px;
            max-height: 520px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,.15) transparent;
            .streaming-page & {
                max-height: 600px;
            }   
        }
        .player-controls {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 6px;
            .draggable-items-panel {
                position: relative;
                margin: 0;
                padding: 0;
                width: auto;            
                height: 100%;
                max-width: none;
                overflow: visible;
                .toggle-btn {
                    position: absolute;
                    right: -5px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 18px;
                    height: 56px;
                    background: linear-gradient(-90deg, var(--tu-block-bg) 0%, var(--tu-block-bg) 40%, transparent 40%, transparent 100%);
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    .tu-icon.arrow {
                        width: 10px;
                        height: 6px;
                        stroke:#fff;
                        transform: rotate(90deg);
                        opacity: .45;
                        margin-right: 0;
                        .toggle-btn:hover & {
                            opacity: 1;
                        }
                        .draggable-items-panel.closed & {
                            transform: rotate(-90deg);
                        }                      
                    }
                }
            }
            .draggable-items-panel-wrapper {
                margin: 0;
                padding: 0;
                width: 375px;            
                height: 100%;
                max-width: none;
                overflow: hidden;
                transition:  width .7s;
                
                & > .nav,
                & > .tab-content {
                    min-width: 375px;
                    scrollbar-width: thin;
                    scrollbar-color: rgba(255,255,255,.15) transparent;
                    border-top-left-radius: var(--tu-block-radius);
                    border-top-right-radius: var(--tu-block-radius);
                }
                .draggable-items-panel.open & {
                    width: 375px;
                }
                .draggable-items-panel.closed & {
                    width: 0;
                }
                
            }
        }
    }
}

.tu-block,
.dark-version .tu-block {
    background-color: var(--tu-block-bg)!important;
    border-radius: var(--tu-block-radius);
    padding: 8px;
    /* overflow: hidden; */

    &.main-content {
        max-height: none!important;
    }
}

.tu-nav-vert {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    font-size: 12px;

   .tu-icon {
        width: 24px;
        height: 24px;
        stroke:#fff;

        .nav-tabs & {            
            width: 20px;
            height: 20px;
        }

        &.assets {
            width: 16px;
        }
        &.news {
            width: 14px;
        }
        &.templates {
            width: 14px;
        }
    }

    &.nav-link {
        border-radius: 3px!important;
        padding: 12px 0;
        margin: 0!important;
        font-size: 12px;
        color: #fff;
        border: none;
        .sidenav & {
            margin: 0 0 8px 0!important;
            &.active {
                background-color: #EB4175!important;
            }
        }
        .nav-tabs & {
            padding: 11px!important;
            margin-left: 11px!important;
            &.active {
                background-color: transparent!important;
                color: #EB4175;
                border: none;
                
                .tu-icon {
                    stroke:#EB4175;
                }
            }
        } 
    }
}

.tu-block .nav-tabs {
    border: none;
    background: #212843;
}

.tu-block .tab-pane {
    padding: 11px;
}

.tu-block h6.tu-title-6,
.tu-block.draggable-items-panel  h6.tu-title-6 {
    margin-bottom: .75rem!important;
}

.tu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px 8px;
    margin-bottom: 1rem;
    .tu-card,
    .tu-card-xs {
        border: none;
        .tu-thumb-wrap {
            display: flex;
            height: 62px;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 4px;
            border: none;
            overflow: hidden;
            background: #151A2C;
            img {
                margin: auto;
                width: 100%;
                height: 100%;
            }
        }
        .tu-card-text {
            font-size: 12px;
            color: #808080;
            text-align: left;
            margin: 0;
        }
    }
}

.tu-block .main-content {
    .preview-section {
        padding: 10px 0 0;
    }
}

.tu-editor-container .tab-pane {
    max-height: 450px;
}

.tu-block.video-editor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
.canvas-settings-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    gap: 10px;
    width: 180px;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #3B4466;
    background: #212843;

    &:has(.open) {
        border-radius: 6px 6px 0 0;
        
    }

    .color-picker-position {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 1px;
        background: red;
    }
    .tu-label {
        display: flex;
        justify-content: center;
        gap: 5px;
        font-size: 12px;
        color: #fff;

        .tu-icon.size {
            width: 14px;
            height: 14px;
        }
    }

    .select-box {
        display: flex;
        position: static;
        z-index: 100;
        width: 80px;
        height: 100%;
        padding: 0;
        font-family: inherit;

        .tu-icon.down {
            margin-left: 6px;
            width: 11px;
        }

        &.open {
            .tu-icon.down {
                transform: rotate(180deg);
            }
        }

        .select-display {
            position: relative;
            z-index: 1;
            display: flex;
            width: auto;
            height: 100%;
            padding: 0 !important;
            flex-grow: 0;
            background: transparent;
            border: none !important;
            box-shadow: none !important;
            line-height: normal !important;

            span {
                margin: auto -15px auto 0;
                padding-right: 15px;
            }

            .tu-option-note {
                display: none;
            }
        }
    }

    .options {
        border-radius: 0 0 6px 6px !important;
        border: 1px solid #3B4466 !important;
        background: #212843;
        box-shadow: none !important;
        margin: 0 -1px -1px;
        padding: 2px !important;

        .tu-option-note {
            padding: 0;
            position: relative;
            display: block;
            color: #808080;
            margin-top: 5px;

            .lanscape-icon,
            .portrait-icon {
                position: absolute;
                display: inline-block;
                bottom: 20px;
                right: 0;
                width: 12px;
                height: 12px;
                margin-right: 3px;
                border: 1px solid #fff;
            }

            .lanscape-icon {
                width: 17px;
                height: 10px;
            }

            .portrait-icon {
                width: 10px;
                height: 17px;
            }
        }
    }
}

.color-picker-container {
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 100%;
    z-index: 50;
}

.tu-icon.paint {
    position: absolute;
    right: 7px;
    bottom: 3px;
    width: 25px;
    height: 34px;
    cursor: pointer;
}

.sp-container.sp-dark {    
    border-radius: 0 0 6px 6px !important;
    border: 1px solid #3B4466 !important;
    background: #212843;
    box-shadow: none !important;
    margin: 0 -1px 0 0px;
    padding: 2px !important;
    .sp-picker-container {
        width: 160px !important;
        padding-left: 7px;
        padding-right: 7px;
        border: 0!important;
    }
    .sp-clear, .sp-color, .sp-hue, .sp-alpha, .sp-alpha-inner {
        border: none!important;
    }
    .sp-color, .sp-sat, .sp-val {
        border-radius: 4px;;
    }
    .sp-color {
        right: 9%;
    }
    .sp-dragger {
            width: 8px;
            height: 8px;
            opacity: 1;
             border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.3);
            outline: 1px solid #384061;
            background: transparent;
            background-clip: content-box;
            backdrop-filter: blur(10px);
    }
    .sp-hue {
        left: auto;
        width: 4px;
        border-radius: 2px;
        overflow: visible;        
        .sp-slider {
            left: -4px;
            right: -4px;
            padding: 1px;
            width: 8px;
            height: 8px;
            opacity: 1;
            border-radius: 50%;
            outline: 1px solid #8691C1;
            background: rgba(0,0,0,0.3);
            backdrop-filter: brightness(10) blur(10px);
        }
    }
    .sp-alpha {
        height: 4px;
        border-radius: 2px;
        .sp-alpha-handle {
            left: -4px;
            right: -4px;
            padding: 0;
            width: 8px;
            height: 8px;
            opacity: 1;
            border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.3);
            outline: 1px solid #8691C1;
            background: transparent;
            background-clip: content-box;
            backdrop-filter: blur(4px);
        }
    }

    .sp-input-container {
        display: inline-block;
        max-width: 37%;
        float: none;
        margin-bottom: 0;
        margin-top: 8px;
    }
    .sp-input {
        border: none!important;
        outline: none!important;
        background: #121729!important;
        color: #fff!important;
        border-radius: 3px;
        font-size: .7rem!important;
    }
    .sp-button-container {
        text-align: right;
        max-width: 60%;
        margin-top: 9px;
        .sp-cancel {
            display: inline-block;
            font-weight: 300;
            font-size: .7rem;
            font-family: var(--bs-font-sans-serif);
        }
        .sp-choose {
            display: inline-block;
            background: #E73874!important;
            border: none!important;
            border-radius: 3px;;
            color: #fff!important;
            font-weight: 300;
            font-size: .8rem;
            font-family: var(--bs-font-sans-serif);
            line-height: .8;
            padding: 3px 4px 6px;
        }
    }
}

.preview-container {
    flex: 0 1 auto!important;
    margin-bottom: auto;
}

.btn.tu-control {
    margin: 0;
    padding: 0;
    .tu-icon {
        margin: auto 2px;
        &:first-child:last-child {
            margin: auto;
        }
    }
    span {
        margin: auto;
        font-weight: 400;
    }
    
}

.controls {
    margin: auto!important;
    max-width: 712px;
    justify-content: space-between!important;
    .tu-icon {
        stroke: none;
        &.rewind, 
        &.fast-forward {
            height: 7px;
        }
        &.previous-video {
            height: 10px;
        }
    }
    #playPause {
        display: flex;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #D53C6B;
        .tu-icon.play {
            height: 12px;
        }
        .tu-icon.pause {
            height: 16px;
        }

    }
    .timeLabel {
        .current {
            color: #EB4175;
        }
    }
    .center-btns {
        margin-left: auto!important;
        margin-right: auto!important;
        display: flex;
        gap: 15px;
    }

    #fullScreenBtn {
        margin: auto -.6rem auto 1.6rem;
    }
}


.tu-editor-container .timeline-section {
    border: 0!important;
    background: transparent!important;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2px;
    height: auto;
    .tu-block.timeline-toolbar {
        padding: 0 20px!important;
        .btn {
            margin: 0 .4rem 0 0;
            padding: 0 .3rem;
            border: none;
            &:disabled {
                opacity: .35;
            }
        }
        .tu-icon {
            stroke: none;
            height: 36px;
            margin: auto;
            stroke: #fff;
            &.trash {
                width: 24px;
            }
        }
    }
}
.tu-block.timeline-wrapper {
    padding-top: 0!important;
    height: auto;
    min-height: 225px;
}
.timeline-content {
    padding-top: 0!important;
    margin-left: 0;
    top: 0!important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}

.timeline-ruler {
    background: transparent!important;
    border-bottom: none!important;
    .time-marking {
        border-left: 1px solid rgba(255,255,255,.15);
        color: #7C7C7C;
        padding: 2px 0 0 0;
        font-size: 12px;
        background: url('../../img/icons/tu/decimal.svg') repeat-x top left;
        background-position: -1px 0!important;
        background-size: 10% 6px;
        background-origin: border-box;
        box-sizing: border-box;
        margin-left: -1px;
    }
}
.tracks-container {
    background: transparent!important;
    .track {
        background: #1F263E!important;
        border-radius: 3px;
        border: none!important;
        margin-bottom: 4px;
        min-height: 20px;
        height: auto!important;
        &:has( .segment[data-asset-type="asset"]) {
            height: 70px!important;
        }   
    }
   
    #timeline-playhead {
        background: #fff!important;
        width: 1px;
        &:before {
            display: none;
        }
        &:after {
            content: "";
            position: absolute;
            top: -16px;
            left: -5px;
            width: 11px;
            height: 16px;
            background: #D53C6B;
            border-radius: 2px;
            border: none!important;
        }
    }
}

.segment {
    top: 0!important;
    height: 70px!important;
    padding: 12px 0 14px;
    background: #1E4141 url('../../img/icons/tu/wave-objects.svg') repeat-x bottom!important;
    background-size: auto 13px!important;
    border: 0!important;

    &[data-asset-type="logo"] {
        height: 20px!important;
        padding: 3px 0 2px;
        background: #1E4141!important;
        .segment-label {
            left: 37px;
        }
        .segment-thumbnails {
            background-color: #151A2C;
        }
        .mute-btn {
            left: 12px!important;
            bottom: 0px!important;
        }
        
    }

    

    .segment-label {
        position: absolute;
        top: 5px;
        left: 10px;
        font-size: 10px;
        color: #fff;
        padding: 0;
    }
    .segment-thumbnails {
        background-position: left center!important;
        background-size: contain!important;
    }
}

/* LAPTOP RESOLUTION */
.hidden-high {
    display: none!important;
}
@media (max-height: 750px) {

    .hidden-short {
        display: none!important;
    }

    .hidden-high {
        display: block!important;
        &.canvas-settings-bar {
            display: inline-flex!important;
        }
    }

    .navbar.navbar-main {
        padding: .2rem 0;   
        .canvas-settings-bar {
            margin-right: .5rem;
            border-radius: 4px;
            &:has(.open) {
                border-radius: 4px 4px 0 0;                
            }

            & .select-box {
                .select-display {
                    height: 20px;
                }   
            }        
        }        
    }
    .navbar-brand {
        padding-bottom: 0;
        padding-top: 0;
        img {
            max-height: 35px;
        }
    }

    .navbar-nav.tu-head-nav {
        .nav-link {
            width: 35px;
            height: 35px;
        }
    }

    
    .tu-editor-container {
        & .upper-wrap {
            .sidenav.navbar.navbar-vertical {
                max-height: 450px;
            }
        }
    }

    .tu-block .main-content {
        .preview-section {
            padding: 0;
            min-height: 405px!important;
            .preview-container {
                margin-bottom: 0;
            }
        }
    }


    .tu-editor-container.streaming-page {
        .upper-wrap {
            .sidenav.navbar.navbar-vertical {                
                max-height: 420px;                 
            }
        }
    }

    .streaming-page .player {
        height: 281px!important;
    }

    
    

}

@media screen and (min-height: 800px) {
    .streaming-page .player {
        height: 480px!important;
    }
}

.fa, .fab, .fad, .fal, .far, .fas {
    line-height: 1.6 !important;
}

.upper-wrap .controls-grid .controls {
    margin: .5rem auto 0 !important;
}