.tm-era-navigator {
    order: 3;

    margin:
        0
        0
        14px;

    padding:
        10px
        12px
        12px;

    border:
        1px solid
        rgba(76,111,137,.42);

    border-radius:
        11px;

    background:
        rgba(4,16,25,.56);
}


.tm-era-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        9px;
}


.tm-era-header strong {
    display:
        block;

    color:
        #ead7a5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;
}


.tm-era-header span {
    display:
        block;

    margin-top:
        2px;

    color:
        #718897;

    font-size:
        9px;
}


.tm-era-header small {
    color:
        #596f7e;

    font-size:
        8px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.tm-era-strip {
    display:
        grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0,1fr)
        );

    gap:
        5px;
}


.tm-era {
    position:
        relative;

    min-width:
        0;

    min-height:
        75px;

    padding:
        8px
        7px
        24px;

    overflow:
        hidden;

    border:
        1px solid
        #29465e;

    border-radius:
        8px;

    background:
        linear-gradient(
            180deg,
            #0b1d29,
            #07141e
        );

    color:
        #d3dde2;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease;
}


.tm-era:hover {
    border-color:
        #806c40;

    transform:
        translateY(-1px);
}


.tm-era.active {
    border-color:
        #c7a65e;

    background:
        linear-gradient(
            180deg,
            #17282f,
            #0b1c26
        );

    box-shadow:
        inset 0 -2px 0
        #c7a65e;
}


.tm-era-name {
    display:
        block;

    overflow:
        hidden;

    color:
        #e8d9b3;

    font-size:
        10px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-era-range {
    display:
        block;

    margin-top:
        2px;

    overflow:
        hidden;

    color:
        #69808f;

    font-size:
        7px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-era-count {
    position:
        absolute;

    left:
        7px;

    bottom:
        6px;

    color:
        #667f8e;

    font-size:
        7px;

    pointer-events:
        none;
}


.tm-era-density {
    position:
        absolute;

    left:
        6px;

    right:
        6px;

    bottom:
        20px;

    height:
        16px;

    border-bottom:
        1px solid
        rgba(89,119,139,.32);
}


.tm-era-dot {
    position:
        absolute;

    bottom:
        -3px;

    min-width:
        4px;

    min-height:
        4px;

    padding:
        0;

    transform:
        translateX(-50%);

    border:
        1px solid
        #dec477;

    border-radius:
        50%;

    background:
        #c7a65e;

    box-shadow:
        0 0 5px
        rgba(199,166,94,.42);

    cursor:
        pointer;
}


.tm-era-dot:hover {
    z-index:
        10;

    transform:
        translateX(-50%)
        scale(1.8);
}


.tm-playback-speed {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        36px;

    padding:
        5px
        8px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #7890a1;
}


.tm-playback-speed span {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


.tm-playback-speed select {
    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #e0e7ea;

    font:
        inherit;

    font-size:
        11px;

    cursor:
        pointer;
}


.tm-playback-speed option {
    background:
        #0b1b27;

    color:
        #e0e7ea;
}


/*
 * The workspace stylesheet assigns explicit
 * flex ordering to the chronology children.
 */
.tm-era-navigator {
    order:
        3;
}

.tm-range-inputs {
    order:
        4 !important;
}

.tm-preset-row {
    order:
        5 !important;
}

.tm-dual-slider {
    order:
        6 !important;
}

.tm-timeline-scale {
    order:
        7 !important;
}


@media (max-width: 1000px) {

    .tm-era-strip {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 600px) {

    .tm-era-strip {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .tm-era {
        min-height:
            68px;
    }


    .tm-era-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}