.container {
    margin:auto;
    max-width: 1200px;
}

.v-btn {
    text-transform: unset !important;
}

video{
    max-width: 100%;
}

.z-100 {
    z-index: 100;
}


:root {
    --svg-scale: 1;
}

.browse-asset {
    position: absolute !important;
    bottom: 44px;
    &.edit{
        left: 22px;
    }
    &.remove {
        right: 22px;
    }
}

.asset-browser{
    background-color: rgba(128,128,128,.05);
}

.img-preview {
    display: flex;
    flex-direction: column;
    .img-wrapper{
        flex-grow: 1;
        overflow: hidden;
        max-width: 270px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        height:180px;
    }
    img{
        display: block;
        max-height:180px;
        max-width: 95%;
        transition: all 1s;
        margin: auto;
        &:hover{
            max-width: 125%;
        }
    }
}

.svg-container{
    svg{
        image{
            clip-path: circle(50% at 50% 50%);
        }
        circle {
            stroke: rgba(var(--v-theme-primary), .7);
            fill:rgba(255,255,255,.5);
            stroke-width: 2px;
        }
        g{
            &.selected circle{
                fill: rgba(var(--v-theme-secondary), .9);
            }
        }
        line, path{
            stroke: rgb(213, 226, 231);
            stroke-width: calc( 2px * var(--svg-scale) );
        }
        g.selector {
            line {
            stroke-dasharray: 0 calc(8 * var(--svg-scale)) 0;
            }
        }
        text {
            text-anchor: middle;
            fill:rgb(var(--v-theme-on-surface));
            stroke-width: 0;//calc( .1px * var(--svg-scale) );;
            user-select: none;
        }
        background-color: rgba(128,128,128,.05);
    }
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - 244px);
    &.pan {
        cursor: grab;
    }
    &.Scene, &.GameObject, &.Task {
        cursor: grabbing;
    }
}