.ve-frame {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2rem auto 2rem 1fr;
    grid-template-rows: auto auto 1fr auto auto auto;
    grid-template-areas:
        ". . overlay-timespan . ."
        ". . ve-toolbar . ."
        ". . ve-preview . ."
        ". . overlay-selector . ."
        ". . ve-timeline . ."
        ". . ve-controls . .";
}

.ve-canvas {
    grid-column: 2 / 5;
    grid-row: 1 / 7;
    background-color: #200050;
}

.ve-controls {
    grid-area: ve-controls;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-self: center;
    color: white;
    z-index: 100;
}

.ve-timeline {
    grid-area: ve-timeline;
    border: none;
    color: white;
    height: 1px;
    z-index: 121; 
    margin-bottom: 1.6rem;
}

.ve-timeline input[type="range"] {
    width: 100%;
    background: rgba(2, 71, 139, 0.9);
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.8);
    height: 2px;
}

.ve-timeline input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: .5rem;
    height: .5rem;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.8);
}

.ve-controls i {
    margin: .5rem .5rem 1.7rem .5rem;
    background-color: rgba(40, 40, 40, .6);
    border: solid 1px rgba(50, 50, 50, .5);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: .6rem;
    border-radius: 50%;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0);
}

.ve-controls i:hover {
    background-color: rgba(200, 200, 200, .8);
}

.ve-toolbar {
    grid-area: ve-toolbar;
    display: grid;
    grid-template-columns: 1fr auto auto auto auto auto auto auto auto 1fr;
    align-items: end;
    justify-items: center;
    margin-bottom: 1rem;
    z-index: 100;
    margin-top: 1.4rem;
}

.ve-toolbar i {
    margin: .2rem .2rem;
    background-color: rgba(40, 40, 40, .6);
    border: solid 1px rgba(40, 40, 40, .6);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    padding: .5rem;
    box-shadow: 0px 0px 8px 1px rgba(100, 100, 100, 0.7);
    text-shadow: 0px 0px 8px rgba(100, 100, 100, 0.8);
}

.ve-toolbar i.audio-file,.ve-toolbar i.mic
{
    /* display: none; */
}

.ve-toolbar i.stroke-width {
    position: relative;
}

.ve-toolbar i .stroke-width-selector {
    display: none;
    height: 4rem;
    position: absolute;
    bottom: 2.4rem;
    left: .6rem;
}

.show {
    display: block !important;
}

.ve-toolbar i:hover {
    background-color: rgba(200, 200, 200, .9);
}

.ve-toolbar input[type="color"] {
    position: absolute;
    visibility: hidden;
    width: 0px;
    height: 0px;
}

.ve-toolbar label {
    padding: 0;
    margin-bottom: 0;
}

.material-symbols-outlined.mic._active
{
    background-color: rgba(160, 0, 0, .9);
}

.ve-overlays {
    grid-area: overlay-selector;
    align-items: center;
    justify-items: center;
    margin-bottom: .3rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "start-time overlay-time end-time"
        "time time time";
    z-index: 100;
    opacity: 0;
}

.ve-overlays._selected {
    opacity: 1;
}

.ve-overlays input[type="range"] {
    grid-area: time;
    /* background-color: rgba(200, 200, 200, .5);
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.6); */
    height: 2px;
    width: 100%;
    color: white;
    cursor: pointer;
    pointer-events: none;
    margin-top: .8rem;
    margin-bottom: .8rem;
}

.ve-overlays input[type="number"] {
    display: none;
    background-color: rgba(200, 200, 200, .2);
    border: rgba(200, 200, 200, .3) 1px solid;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
    color: white;
    cursor: pointer;
    outline: none;
    padding: .3rem;
    border-radius: 1px;
    font-size: .8rem;
}

.ve-overlays .multi-range-start-val {
    grid-area: start-time;
    text-align: left;
}

.ve-overlays .multi-range-end-val {
    grid-area: end-time;
    text-align: right;
    direction: RTL;
}

.ve-overlays input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.8);
    -webkit-appearance: none;
    appearance: none;
    width: .3rem;
    height: .8rem;
    background: red;
    border-radius: 10%;
    cursor: pointer;
    pointer-events: all;
    z-index: 10;
}

input[type=range][orient=vertical] {
    -webkit-appearance: slider-vertical;
    /* WebKit */
    appearance: slider-vertical;
    /* CSS3 */
    width: 1rem;
    height: 5rem;
    padding: 0 5px;
    opacity: 0.9;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}