.mediaplayer {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.mediaplayer__header {
    /*
    --color-text: initial;
    --font-family: initial;
    --font-size: initial;
    --font-style: initial;
    --font-weight: initial;
    --line-height: initial;
     */
}

.mediaplayer__bodytext {
    --color: var(--root-color-text);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

/* Override for the Media Player CSS */

.mediaplayer {
    margin-top: 3rem;
    margin-bottom: calc(3rem + 40px); /* 40px is the control bar */
}

.mediaplayer__header + .mejs__offscreen + .mejs__container,
.mediaplayer__bodytext + .mejs__offscreen + .mejs__container {
    margin-top: 1rem;
}

/* Override the focus, set by the mediaplayer.js CSS */
.mejs__container *:focus {
    outline: 3px solid #2D73DC !important;
}

/* Create some space below the player for the controls to move into. */
.mejs__container.mejs__video {
    margin-bottom: 40px;
}

/* Move the controls into the space below the player. */
.mejs__container.mejs__video .mejs__controls {
    bottom: -40px;
}

/* Override the background color of the control bar */
.mejs__controls:not([style*='display: none']) {
    background-color: black;
}

.mejs__overlay-button {
    padding: 0;
}

/* Make the font size of the time bar bigger */
.mejs__time {
    font-size: 1rem;
}

/* Change the font size of the time rail and the floating indicator */
.mejs__time-float {
    height: 1.25rem;
    width: 3rem;
}

.mejs__time-float-current {
    width: auto;
    margin: 0.25rem;
}

.mejs__time-rail {
    font-size: 1rem;
}

/* Remove captions selector fully when one track, because of tab order */
.mejs__captions-selector.mejs__offscreen {
    display: none;
}

/* Change the background color of the closed captions */
.mejs__captions-text,
.mejs__captions-text * {
    background-color: black !important;
    box-shadow: 5px 0 0 black, -5px 0 0 black !important;
}

/* Raise the font size of the closed captions */
.mejs__captions-layer {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* Change the opacity of the closed captions buttons when enabled/disabled */
.mejs__captions-button > button {
    opacity: 0.7;
}

.mejs__captions-button.mejs__captions-enabled > button {
    opacity: 1;
}

/* Override the closed captions selector background color */
.mejs__captions-button > .mejs__captions-selector,
.mejs__chapters-button > .mejs__chapters-selector {
    background: black;
    width: initial;
}

/* Override the styling closed captions selector */
.mejs__captions-selector-label,
.mejs__chapters-selector-label {
    font-size: 1rem;
    padding: 0.25rem 1rem;
}

.mejs__captions-selector-list-item {
    color: white !important;
    padding-left: 0 !important;
    margin: 0;
}

.mediaplayer {
    font-size: var(--font-size, 1rem);
}

.mediaplayer__header {
    color: var(--color-text, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.777em);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.mediaplayer__bodytext {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}