.video-tab {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding-bottom: 10px;
}

/* Style the buttons inside the tab */
.video-tab button {
    background-color: #e9e9e9;
    border: 1px solid rgb(49, 49, 49);
    padding: 8px 5px;
    color: black;
    font-size: 14px;
    transition: 0.3s;
}

/* Create an active/current tablink class */
.video-tab button.active {
    background-color: #6c6;
    border: 1px solid rgb(49, 49, 49);
}

/* Change background color of buttons on hover */
.video-tab button:not(.active):hover {
    background-color: #706f6f;

}


/* Style the tab content */
.tab-content {
    display: none;
    /* padding: 6px 12px; */
    max-width: 100%;
    border-top: none;
    text-align: center;
}


.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.video-container video,
.video-container iframe {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    width: auto;
    box-sizing: content-box;
}

.page-fragment {
    margin: 0 auto;
    max-width: 1340px;
}

.tab-content .controls-button {
    background-color: #ececec;
    border: 1px solid rgb(49, 49, 49);
    padding: 5px 8px;
    color: black;
    font-size: 11px;
}

.comments-user-badge__name {
    padding: 2px 12px;
    --link-line: none;
    --link-color: #fff;
    --link-hover-color: initial;
    --link-active-color: initial;
    background-color: #66e7b6;
    border-radius: 1em;
}

.start {
    display: flex; 
    flex-direction: row;
    margin-bottom: 10px;
}

.start-name {
    width: 10%;
}

.start-steps {
    display: flex;
    flex-direction: row; 
    background-color: white;
}