mapillary-js/styles/SequenceComponent.css

.SequenceContainer {
    position: absolute;
    top: 14px;
    pointer-events: none;
    font-size: 0;
    z-index: 10;
    width: 100%;
}

.SequenceStepper,
.SequenceControls {
    position: absolute;
    left: 50%;
    cursor: pointer;
}

.SequenceStepper {
    transform: translate(-50%, 0);
}

.SequenceExpanderButton,
.SequencePlaybackButton,
.SequenceTimelineButton {
    display: inline-block;
    height: 100%;
    pointer-events: auto;
}

.SequenceExpanderButton {
    width: calc(100% * 16 / 88);
    background: rgba(24, 25, 28, 0.3);
}

.SequenceExpanderBar {
    background-color: white;
    width: 12.5%;
    border-radius: 1px;
    height: calc(100% * 16 / 30);
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.SequencePlaybackButton,
.SequenceTimelineButton {
    width: 0;
    background: rgba(24, 25, 28, 0.5);
    transition: width 0.15s ease-out;
}

.SequenceSpeedContainer,
.SequencePositionContainer,
.SequencePositionContainerDisabled {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    background: rgba(24, 25, 28, 0.5);
    pointer-events: auto;
    padding-right: 3px;
}

.SequenceSpeedContainer {
    padding-left: 3px;
}

.SequencePositionContainer,
.SequencePositionContainerDisabled {
    padding-left: 16px;
}

.SequenceSpeed,
.SequencePosition {
    margin: 0;
    padding: 0;
    margin-top: 7px;
    height: 16px;
    cursor: pointer;
    outline: none;
    background: none;
    -webkit-appearance: none;
}

.SequencePositionContainerDisabled .SequencePosition {
    cursor: default;
}

.SequenceFastIcon,
.SequenceFastIconGrey,
.SequenceTimelineIcon,
.SequenceTimelineIconGrey,
.SequenceSlowIcon,
.SequenceSwitchIcon,
.SequenceCloseIcon {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
}

.SequenceFastIcon,
.SequenceTimelineIcon {
    transition-delay: 0s;
    transition-property: opacity;
}

.SequenceFastIcon,
.SequenceFastIconGrey,
.SequenceTimelineIcon,
.SequenceTimelineIconGrey,
.SequenceSlowIcon {
    width: calc(100% * 24 / 36);
    height: calc(100% * 24 / 30);
}

.SequenceSwitchIcon,
.SequenceCloseIcon {
    width: calc(100% * 16 / 36);
    height: calc(100% * 16 / 30);
}

.SequenceFastIcon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+CiAgICAgIGZhc3QKICAgIDwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgPHBhdGggZD0iTTIwLjE0ODQgMTMuNWMtMi4xNTE3IDAtMi41NDc4Ljg2Mi0zLjU2NzYgMS4zNjA1LTEuODUzMy45MDYtMy4wOTkzIDIuMDcyNi0zLjA5OTMgNC4yNjQ1IDAgMS4xNjE0LS4wMTAzIDEuODc1LS4zNzAzIDEuODc1LS42NTc1IDAtLjk5MzgtLjY5MS0xLjI5ODgtMS4yMi0uMjA4Mi4wNjktLjQyNjcuMTAxMi0uNjQ1Ny4wOTUtLjg0MzcgMC01LjQ2My0xLjY4NjctNS40NjMtMi42MjUgMC0uNTUxLjM3MDMtLjg0Ny4zNzAzLTEuNXYtLjAxYy0uMDE2NS0uNTUzNC0uMjg2Ny0xLjA2NzMtLjczMDgtMS4zOS0uNTk0My0uNDMwNS0xLjA0NC0xLjAzNS0xLjI4ODItMS43MzIzLS4xNzkyLjA4NjMtLjM3NS4xMzE1LS41NzM1LjEzMjNDMi43NzA1IDEyLjc1IDIgMTEuODczIDIgMTAuNWMwLTEuMzY5NC4yNjYtMS44NzUuNTU1Ni0xLjg3NS4zNzU0IDAgLjQ2My4xODc1LjQ2My4xODc1cy4yNTY4LS45NDEuNzc5OC0uOTQxYy4yNzEyLjAwMzcuNTE3Ny4xNjAyLjYzOS40MDU3Ljg4MDItMS4wMDk3IDIuMTU5LTEuNTY5NiAzLjQ4ODQtMS41MjcyIDUuMzcyIDAgNS43Mjk3IDMuMzc1IDcuNDA3NSAzLjM3NS42MjE0IDAgMS4xMTEtLjg5MjcgMS4xMTEtMS4xMjUgMC0uNzIwNi0zLjMzMzMtMi4wNzU3LTMuMzMzMy01LjI1IDAtLjQ5Ni4zOTM1LS43NS45MjYtLjc1LjQ2MyAwIDEuNDUxMy42MTA0IDIuMDM3IDEuNS44OTUgMS4zNTk0Ljc1OSAzIDEuODUyIDMuNzUuNDA5LjI4MDggMS40NTE4LjI2MDMgMi4yMjIuNzUuNzcwNS40ODk3IDEuMjQ2NCAxLjMwMjcgMS40ODE2IDEuNS4yMTcuMTkwMy4zNTAyLjQ2LjM3MDQuNzUgMCAuMzYxMy0uODA1MyAyLjI1LTEuODUxNiAyLjI1em0tOC44ODkgM2MtLjk5MDctLjAxODgtMS45NjY1LS4yNDg0LTIuODY0LS42NzM4LS4wNTkyLjIxOTgtLjA5MjUuNDQ2LS4wOTkuNjczOCAwIC42MjczLjQ3OTcuODY4IDIuMjIyIDEuNS4zOTE2LjEzNC43Njk3LjMwNTIgMS4xMjkzLjUxMTMuMDQwNC0uNjgzLjExNTQtMS4zNjMyLjIyNS0yLjAzODMtLjIwMDQuMDE0My0uNDAyMi4wMjctLjYxMzMuMDI3eiIgaWQ9ImEiLz4KICAgIDwvZGVmcz4KICAgIDx1c2UgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYSIvPgogIDwvc3ZnPg==');
}

.SequenceFastIconGrey {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPHRpdGxlPgogICAgZmFzdAogIDwvdGl0bGU+CiAgPGRlZnM+CiAgICA8cGF0aCBkPSJNMjAuMTQ4NCAxMy41Yy0yLjE1MTcgMC0yLjU0NzguODYyLTMuNTY3NiAxLjM2MDUtMS44NTMzLjkwNi0zLjA5OTMgMi4wNzI2LTMuMDk5MyA0LjI2NDUgMCAxLjE2MTQtLjAxMDMgMS44NzUtLjM3MDMgMS44NzUtLjY1NzUgMC0uOTkzOC0uNjkxLTEuMjk4OC0xLjIyLS4yMDgyLjA2OS0uNDI2Ny4xMDEyLS42NDU3LjA5NS0uODQzNyAwLTUuNDYzLTEuNjg2Ny01LjQ2My0yLjYyNSAwLS41NTEuMzcwMy0uODQ3LjM3MDMtMS41di0uMDFjLS4wMTY1LS41NTM0LS4yODY3LTEuMDY3My0uNzMwOC0xLjM5LS41OTQzLS40MzA1LTEuMDQ0LTEuMDM1LTEuMjg4Mi0xLjczMjMtLjE3OTIuMDg2My0uMzc1LjEzMTUtLjU3MzUuMTMyM0MyLjc3MDUgMTIuNzUgMiAxMS44NzMgMiAxMC41YzAtMS4zNjk0LjI2Ni0xLjg3NS41NTU2LTEuODc1LjM3NTQgMCAuNDYzLjE4NzUuNDYzLjE4NzVzLjI1NjgtLjk0MS43Nzk4LS45NDFjLjI3MTIuMDAzNy41MTc3LjE2MDIuNjM5LjQwNTcuODgwMi0xLjAwOTcgMi4xNTktMS41Njk2IDMuNDg4NC0xLjUyNzIgNS4zNzIgMCA1LjcyOTcgMy4zNzUgNy40MDc1IDMuMzc1LjYyMTQgMCAxLjExMS0uODkyNyAxLjExMS0xLjEyNSAwLS43MjA2LTMuMzMzMy0yLjA3NTctMy4zMzMzLTUuMjUgMC0uNDk2LjM5MzUtLjc1LjkyNi0uNzUuNDYzIDAgMS40NTEzLjYxMDQgMi4wMzcgMS41Ljg5NSAxLjM1OTQuNzU5IDMgMS44NTIgMy43NS40MDkuMjgwOCAxLjQ1MTguMjYwMyAyLjIyMi43NS43NzA1LjQ4OTcgMS4yNDY0IDEuMzAyNyAxLjQ4MTYgMS41LjIxNy4xOTAzLjM1MDIuNDYuMzcwNC43NSAwIC4zNjEzLS44MDUzIDIuMjUtMS44NTE2IDIuMjV6bS04Ljg4OSAzYy0uOTkwNy0uMDE4OC0xLjk2NjUtLjI0ODQtMi44NjQtLjY3MzgtLjA1OTIuMjE5OC0uMDkyNS40NDYtLjA5OS42NzM4IDAgLjYyNzMuNDc5Ny44NjggMi4yMjIgMS41LjM5MTYuMTM0Ljc2OTcuMzA1MiAxLjEyOTMuNTExMy4wNDA0LS42ODMuMTE1NC0xLjM2MzIuMjI1LTIuMDM4My0uMjAwNC4wMTQzLS40MDIyLjAyNy0uNjEzMy4wMjd6IiBpZD0iYSIvPgogIDwvZGVmcz4KICA8dXNlIGZpbGw9IiNEN0RBREQiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2EiLz4KPC9zdmc+');
}

.SequenceTimelineIcon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8dGl0bGU+CiAgICBzY3J1YmJlcgogIDwvdGl0bGU+CiAgPHBhdGggZD0iTTE4IDhoMmMuNTUyMyAwIDEgLjQ0NzcgMSAxdjEwYzAgLjU1MjMtLjQ0NzcgMS0xIDFIN2MtLjU1MjMgMC0xLS40NDc3LTEtMXYtM0g0Yy0uNTUyMyAwLTEtLjQ0NzctMS0xVjVjMC0uNTUyMy40NDc3LTEgMS0xaDEzYy41NTIzIDAgMSAuNDQ3NyAxIDF2M3pNNy41IDljLS4yNzYgMC0uNS4yMjQtLjUuNXY5YzAgLjI3Ni4yMjQuNS41LjVoMTJjLjI3NiAwIC41LS4yMjQuNS0uNXYtOWMwLS4yNzYtLjIyNC0uNS0uNS0uNWgtMTJ6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+');
}

.SequenceTimelineIconGrey {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDx0aXRsZT4KICAgICAgc2NydWJiZXIKICAgIDwvdGl0bGU+CiAgICA8cGF0aCBkPSJNMTggOGgyYy41NTIzIDAgMSAuNDQ3NyAxIDF2MTBjMCAuNTUyMy0uNDQ3NyAxLTEgMUg3Yy0uNTUyMyAwLTEtLjQ0NzctMS0xdi0zSDRjLS41NTIzIDAtMS0uNDQ3Ny0xLTFWNWMwLS41NTIzLjQ0NzctMSAxLTFoMTNjLjU1MjMgMCAxIC40NDc3IDEgMXYzek03LjUgOWMtLjI3NiAwLS41LjIyNC0uNS41djljMCAuMjc2LjIyNC41LjUuNWgxMmMuMjc2IDAgLjUtLjIyNC41LS41di05YzAtLjI3Ni0uMjI0LS41LS41LS41aC0xMnoiIGZpbGw9IiNEN0RBREQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDwvc3ZnPg==');
}

.SequenceSlowIcon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+CiAgICAgIHNsb3cKICAgIDwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgPHBhdGggZD0iTTE4LjkzMzcgMTMuMjIyMmwtLjc4MTYgMS44OTYzYy4zMzE3LjI1MDMgMS4zMzUgMS4xMDAyIDEuMzM1IDIuMjUxNi0uMDIyMy4zMTMtLjE1OC42MDctLjM4MTYuODI3LS4wNzY4LjA4MDMtLjE4MzQuMTI1NC0uMjk0Ni4xMjQzaC0yLjY1OGMtLjE0NTIgMC0uMjc5Ni0uMDc2Ny0uMzUzNC0uMjAxN2wtLjcxMzYtMS4yMDc0Yy0uMTIwMi0uMjAzNy0uMTQ2OC0uNDQ5Mi0uMDczLS42NzRsLjEyNDgtLjM4MDVINy40Yy4zNjEuNDIzNC41Njg4Ljk1NjMuNTg5OCAxLjUxMjUtLjAyMi4zMTMtLjE1NzcuNjA3LS4zODEzLjgyNjctLjA3NjcuMDgwNC0uMTgzNC4xMjU1LS4yOTQ2LjEyNDRINC42NTZjLS4xNDUyIDAtLjI3OTYtLjA3NjctLjM1MzUtLjIwMTdsLS43MTM2LTEuMjA3NWMtLjEyMDQtLjIwMzYtLjE0Ny0uNDQ5Mi0uMDczMi0uNjc0bC4wMDgyLS4wMjQ2Yy0uNjI5LjQ4MzItMS4zODQuNzc0Ny0yLjE3NDMuODM5Ni0uMTE5Ny4wMTc2LS4yMzg1LS4wMzcyLS4zMDMtLjEzOTctLjA2NDMtLjEwMjUtLjA2Mi0uMjMzNC4wMDU3LS4zMzM3QzMuNDI0NiAxMy40MDE1IDIuNzA4IDYuMDAyMiAxMS4zMTMgNi4wMDIyYzIuNjk0NS0uMDU5IDUuMjc1NSAxLjA4NSA3LjA0MTcgMy4xMjE3Ljc4Ni0uMjQyMiAxLjQ2NS0uNzQ2NyAxLjkyNDItMS40MjkyLjM1My0uNDUzNC45NzI0LS42MDMgMS40OTM1LS4zNjA3bDEuOTg4Ny45MjVjLjE2NDUuMDc2My4yNTk4LjI1MS4yMzUuNDMwOC0uMjAyNSAxLjQ1NTQtMS43ODg2IDMuNzY2Mi01LjA2MjUgNC41MzI0eiIgaWQ9ImEiLz4KICAgIDwvZGVmcz4KICAgIDx1c2UgZmlsbD0iI0Q3REFERCIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYSIvPgogIDwvc3ZnPg==');
}

.SequenceSwitchIcon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDx0aXRsZT4KICAgICAgcGxheV9kaXJlY3Rpb24KICAgIDwvdGl0bGU+CiAgICA8cGF0aCBkPSJNNiA0aDhjLjU1MjMgMCAxIC40NDc3IDEgMXMtLjQ0NzcgMS0xIDFINnYyLjA1ODRjLS4wMDM0LjE2NjgtLjExMTguMzE4Mi0uMjgxNS4zOTM0LS4xNjk4LjA3NS0uMzczLjA2MTctLjUyOC0uMDM1TC4yMTQzIDUuMzU4NEMuMDggNS4yNzcgMCA1LjE0MyAwIDVjMC0uMTQzLjA4LS4yNzcuMjE0My0uMzU4NWw0Ljk3NjItMy4wNTgzYy4xNTUtLjA5NjcuMzU4My0uMTEuNTI4LS4wMzUuMTY5OC4wNzUyLjI3OC4yMjY2LjI4MTUuMzkzNFY0em00IDZWNy45NDE2Yy4wMDM0LS4xNjY4LjExMTctLjMxODIuMjgxNS0uMzkzNC4xNjk3LS4wNzUuMzczLS4wNjE3LjUyOC4wMzVsNC45NzYyIDMuMDU4M0MxNS45MiAxMC43MjMgMTYgMTAuODU3IDE2IDExYzAgLjE0My0uMDguMjc3LS4yMTQzLjM1ODRsLTQuOTc2MiAzLjA1ODRjLS4xNTUuMDk2Ny0uMzU4Mi4xMS0uNTI4LjAzNS0uMTY5Ny0uMDc1Mi0uMjc4LS4yMjY2LS4yODE1LS4zOTM0VjEySDJjLS41NTIzIDAtMS0uNDQ3Ny0xLTFzLjQ0NzctMSAxLTFoOHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDwvc3ZnPg==');
}

.SequenceCloseIcon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDx0aXRsZT4KICAgICAgY2xvc2UKICAgIDwvdGl0bGU+CiAgICA8cGF0aCBkPSJNOS4yNzM0IDguMDA0N2wzLjQ0MTMgMy40NDE0Yy4yMzE1LjIyOS4zMjI3LjU2NDYuMjM5Ljg3OTMtLjA4MzguMzE0Ny0uMzI5Ni41NjA0LS42NDQzLjY0NC0uMzE0Ny4wODQtLjY1LS4wMDczLS44NzktLjIzODhMNy45ODg4IDkuMjg5bC0zLjQzNjUgMy40MzY1Yy0uMzU2LjM0Ni0uOTI0LjM0MTctMS4yNzUtLjAwOTMtLjM1MS0uMzUxLS4zNTUtLjkxOS0uMDA5LTEuMjc1bDMuNDM2Mi0zLjQzNjQtMy40NDk1LTMuNDQ5NmMtLjM0NDQtLjM1NjMtLjMzOTYtLjkyMy4wMTA4LTEuMjczNC4zNTA0LS4zNTA0LjkxNy0uMzU1MiAxLjI3MzMtLjAxMDhMNy45ODkgNi43MjA1bDMuNDU0NC0zLjQ1NDVjLjIyOTQtLjIyOTQuNTYzOC0uMzE5Ljg3NzItLjIzNS4zMTM1LjA4NC41NTgzLjMyODcuNjQyMy42NDIyLjA4MzguMzEzNC0uMDA1OC42NDc4LS4yMzUyLjg3NzJMOS4yNzM0IDguMDA0N3oiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDwvc3ZnPg==');
}

.SequenceIconVisible {
    opacity: 1;
}

.SequenceControlsExpanded .SequenceFastIcon,
.SequenceControlsExpanded .SequenceTimelineIcon {
    opacity: 1;
    transition-delay: 0.12s;
    transition: 0.2s ease-in;
    transition-property: opacity;
}

.SequenceControlsExpanded .SequencePlaybackButton,
.SequenceControlsExpanded .SequenceTimelineButton {
    width: calc(100% * 36 / 88);
}

.SequencePlayback,
.SequenceTimeline {
    position: absolute;
    height: 30px;
    width: 405px;
    max-width: 80%;
    min-width: 271px;
    left: 50%;
    padding-left: 5px;
    transform: translate(-50%, 0);
}

.SequenceSwitchButton,
.SequenceSwitchButtonDisabled,
.SequenceSlowContainer,
.SequenceFastContainer,
.SequenceCloseButton {
    width: 36px;
    height: 100%;
    display: inline-block;
    pointer-events: auto;
    background: rgba(24, 25, 28, 0.5);
}

.SequenceSwitchButton,
.SequenceSwitchButtonDisabled,
.SequenceCloseButton {
    cursor: pointer;
}

.SequencePlay,
.SequencePlayDisabled,
.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepNextHighlight,
.SequenceStepPrev,
.SequenceStepPrevDisabled,
.SequenceStepPrevHighlight {
    display: inline-block;
    width: calc(100% / 3);
    height: 100%;
    pointer-events: auto;
}

.SequencePlay,
.SequencePlayDisabled,
.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepPrev,
.SequenceStepPrevDisabled {
    background: rgba(24, 25, 28, 0.3);
}

.SequenceStepNextHighlight,
.SequenceStepPrevHighlight {
    background: rgba(24, 25, 28, 0.6);
}

.SequenceSwitchButton,
.SequenceSwitchButtonDisabled,
.SequencePositionContainer,
.SequencePositionContainerDisabled {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.SequenceCloseButton {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.Play.SequenceComponentIcon,
.PlayDisabled.SequenceComponentIcon {
    background-image: url('./stepper-play.svg');
}

.Stop.SequenceComponentIcon,
.StopDisabled.SequenceComponentIcon {
    background-image: url('./stepper-stop.svg');
}

.SequenceStepPrev .SequenceComponentIcon,
.SequenceStepPrevDisabled .SequenceComponentIcon,
.SequenceStepPrevHighlight .SequenceComponentIcon {
    background-image: url('./stepper-left.svg');
}

.SequenceStepNext .SequenceComponentIcon,
.SequenceStepNextDisabled .SequenceComponentIcon,
.SequenceStepNextHighlight .SequenceComponentIcon {
    background-image: url('./stepper-right.svg');
}

.PlayDisabled.SequenceComponentIcon,
.SequenceStepNextDisabled .SequenceComponentIcon,
.SequenceStepPrevDisabled .SequenceComponentIcon,
.SequenceSwitchButtonDisabled .SequenceSwitchIcon,
.StopDisabled.SequenceComponentIcon {
    opacity: 0.35;
}

.SequenceComponentIcon {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% * 16 / 36);
    height: calc(100% * 16 / 30);
    background-size: contain;
    background-repeat: no-repeat;
}

.SequenceSpeed::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    background: #dee5ed;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SequencePosition::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    background: #ff861b;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SequencePositionContainerDisabled .SequencePosition::-webkit-slider-thumb {
    border: none;
    background: none;
    box-shadow: none;
}

.SequenceSpeed::-webkit-slider-runnable-track,
.SequencePosition::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background-color: white;
}

.SequencePositionContainerDisabled .SequencePosition::-webkit-slider-runnable-track {
    background-color: #d7dadd;
}

.SequenceSpeed::-moz-focus-outer,
.SequencePosition::-moz-focus-outer {
    border: 0;
}

.SequenceSpeed::-moz-range-track,
.SequencePosition::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background-color: white;
}

.SequencePositionContainerDisabled .SequencePosition::-moz-range-track {
    background-color: #d7dadd;
}

.SequenceSpeed::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: #dee5ed;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SequencePosition::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: #ff861b;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SequencePositionContainerDisabled .SequencePosition::-moz-range-thumb {
    border: none;
    background: none;
    box-shadow: none;
}

.SequenceSpeed::-ms-track,
.SequencePosition::-ms-track {
    height: 2px;
    border-radius: 2px;
    background-color: white;
}

.SequencePositionContainerDisabled .SequencePosition::-ms-track {
    background-color: #d7dadd;
}

.SequenceSpeed::-ms-fill-lower,
.SequencePosition::-ms-fill-lower {
    height: 0;
    background: none;
}

.SequenceSpeed::-ms-fill-upper,
.SequencePosition::-ms-fill-upper {
    height: 0;
    background: none;
}

.SequenceSpeed::-ms-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: #dee5ed;
    cursor: pointer;
    margin-top: 0;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SequencePosition::-ms-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: #ff861b;
    cursor: pointer;
    margin-top: 0;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SequencePositionContainerDisabled .SequencePosition::-ms-thumb {
    border: none;
    background: none;
    box-shadow: none;
}

.SequenceSpeed::-ms-tooltip,
.SequencePosition::-ms-tooltip {
    display: none;
}

@media (hover: hover) {
    .SequencePlay:hover,
    .SequenceStepPrev:hover,
    .SequenceStepNext:hover {
        background: rgba(24, 25, 28, 0.6);
    }

    .SequencePlayDisabled:hover,
    .SequenceStepPrevDisabled:hover,
    .SequenceStepNextDisabled:hover {
        background: rgba(24, 25, 28, 0.3);
    }

    .SequenceSwitchButtonDisabled:hover {
        background: rgba(24, 25, 28, 0.5);
    }

    .SequencePlaybackButton:hover,
    .SequenceTimelineButton:hover,
    .SequenceSwitchButton:hover,
    .SequenceCloseButton:hover {
        background: rgba(24, 25, 28, 0.75);
    }
}