.relab-sample-player-widget {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 5px;
}

.relab-sample-player-thumbnail {
    width: 200px;
    height: 200px;
}

.relab-sample-player-controls-container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.relab-sample-player-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    color: #ddd !important;
    background-color: transparent !important;
    border: none !important;
    outline-color: transparent !important;
}

.relab-sample-player-button:hover {
    color: #ccc !important;
}

.relab-sample-player-button:active {
    color: #bbb !important;
}

.relab-sample-player-button-icon {
    display: none;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.relab-sample-player-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.relab-sample-player-track-toggle {
    position: relative;
    display: block;
    height: 1.5rem;
    width: 2.75rem;
    flex-shrink: 0;
    border-radius: 9999px !important;
    border-width: 2px;
    border-color: transparent;
    background-color: #ddd !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    outline-color: transparent !important;
}


.relab-sample-player-track-toggle:hover {
    background-color: #ccc !important;
}

.relab-sample-player-track-toggle-toggled {
    background-color: #3b82f6 !important;
}

.relab-sample-player-track-toggle-toggled:hover {
    background-color: #2563eb !important;
}

.relab-sample-player-track-toggle-span {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    flex-shrink: 0;
    height: 1.25rem !important;
    width: 1.25rem !important;
    transform: translateX(0rem);
    border: 1px solid #bbb !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    background-color: white !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.relab-sample-player-track-toggle-span-toggled {
    transform: translateX(1.25rem);
    border: 1px solid #3b82f6 !important;
}