.jw-text-track-display {
    top: 80% !important;
    bottom: 0px !important;
    text-align: center;
    /* the big area is never painted: only the box around the text is */
    background: transparent !important;
    box-shadow: none !important;
}

/* ONE box around all the lines of a caption, as wide as the longest line */
.jw-text-track-cue {
    display: inline-block !important;
    text-align: center;
    border-radius: 10px !important;
    padding: 0.2em 0.6em !important;
    line-height: 1.3 !important;
}

/* the box is painted by "Background" (color + opacity); the window controls are not used */
.cc-settings__option:has(#windowColor),
.cc-settings__option:has(#windowOpacity) {
    display: none;
}

.cc-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5 !important;
    display: none;
}

.cc-overlay--show-controls {
    bottom: 2.5rem;
}

.cc-overlay__inner {
    display: flex;
    width: 100%;
    height: 100%;
}

.slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.slider-value {
    min-width: 45px;
    margin-left: 10px;
    text-align: right;
}


.cc-settings__preview-header {
    margin: 16px;
    font-size: 1em;
    font-weight: normal;
}

.cc-settings__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin: 16px;
    /* the picture of the original (subtitle-background.png) is not in the project: a plain dark checker instead */
    background: #1c1c1c repeating-conic-gradient(#2a2a2a 0% 25%, #1c1c1c 0% 50%) 50% / 24px 24px;
}


.cc-settings {
    width: 100%;
    height: 100%;
}

.cc-settings__modal {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 99%;
    margin: 0;
    background: #2e2e2e;
    color: #e0e0e0;
    border: 1px solid #4b4b4b;
    z-index: 1;
}

.cc-settings__form {
    position: relative;
    max-height: calc(100% - 78px);
    overflow-y: auto;
    overflow-x: hidden;
}


@media (min-width: 1025px) {
    .cc-settings {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cc-settings__overlay {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 10;
    }

    .cc-settings__modal {
        width: 1024px;
        max-height: 500px;
        margin-bottom: 32px;
        z-index: 11;
    }
}

.cc-settings__modal-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-color: #646464;
}

.cc-settings__title {
    margin: 0;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
}

@media (min-width: 600px) {
    .cc-settings__title {
        font-size: 16px;
    }
}

.cc-settings__close {
    padding: 10px;
    font-size: 10px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

@media (min-width: 600px) {
    .cc-settings__close {
        font-size: 16px;
    }
}

.cc-settings__close img {
    width: 16px;
    height: 16px;
}

@media (min-width: 450px) {
    .cc-settings__form {
        padding: 0 32px;
    }
}

@media (min-width: 600px) {
    .cc-settings__form {
        max-height: calc(100% - 90px);
        padding: 0;
    }
}

.cc-settings__options {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 16px;
    border-top: 1px dashed #4b4b4b;
}

@media (min-width: 600px) {
    .cc-settings__options {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 768px) {
    .cc-settings__options {
        flex-wrap: nowrap;
    }
}

.cc-settings__basic-styles {
    margin-bottom: 16px;
}

.cc-settings__colors {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 16px;
}

@media (min-width: 600px) {
    .cc-settings__colors {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        order: -1;
    }

    .cc-settings__colors>.cc-settings__option {
        width: 200px;
        margin: 0;
    }
}

@media (min-width: 768px) {
    .cc-settings__colors {
        display: block;
        min-width: 400px;
        max-width: 400px;
        order: 0;
    }

    .cc-settings__colors>.cc-settings__option {
        width: auto;
        margin: 0 16px;
    }
}

.cc-settings__opacity {
    margin: 0 5px 16px 0;
}

@media (min-width: 600px) {

    .cc-settings__basic-styles,
    .cc-settings__opacity {
        width: 48%;
    }
}

.cc-settings__option {
    margin: 0 auto 20px auto;
}

@media (min-width: 600px) {
    .cc-settings__option {
        padding: 0 16px;
    }
}

.cc-settings__option p {
    margin-bottom: 10px;
}

.cc-settings__option select {
    display: block;
    width: 100%;
    height: 30px;
}

.cc-settings__option input[type="range"] {
    width: 100%;
    height: 30px;
    padding: 0;
}

.cc-settings__button-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50px;
    border-top: 1px dashed #4b4b4b;
    background: #2e2e2e;
}

.cc-settings__button {
    float: right;
    margin-left: 8px;
    padding: 10px 20px;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    margin: 6px;
}

@media (min-width: 600px) {
    .cc-settings__button {
        margin-left: 16px;
        padding: 10px 30px;
        font-size: 16px;
    }
}

.cc-settings__reset-button {
    background-color: #86898e;
}

.cc-settings__save-button {
    background-color: #00aaeb;
}

.color-picker {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.color-picker__color {
    min-width: 25px;
    min-height: 25px;
    margin: 5px;
    border: 1px solid #fff;
    cursor: pointer;
}

.color-picker__color--active {
    outline: 3px solid #3eafe6;
}

@media (min-width: 600px) {
    .color-picker {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .color-picker__color {
        min-width: 30px;
        min-height: 30px;
    }
}

@media (min-width: 768px) {
    .color-picker {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: none;
    }
}
/* The rules below changed the look of the WHOLE player (size of the settings menu, of the time and of the progress knob).
   They are not about subtitles and are switched off; remove the comment marks if you want them.

.jw-rightclick {
    display: none !important
}

.jw-settings-menu {
    width: 135px !important;
}
.jw-breakpoint-7 .jw-settings-menu,
.jw-breakpoint-6 .jw-settings-menu,
.jw-breakpoint-5 .jw-settings-menu,
.jw-breakpoint-4 .jw-settings-menu,
.jw-breakpoint-3 .jw-settings-menu {
    max-height: 220px !important;
    height: 220px !important;
}

.jw-settings-content-item {
    font-size: 15px
}

.jw-settings-content-item.jw-settings-item-active {
    color: #35c2ff
}

.jw-text-elapsed,
.jw-text-duration {
    font-size: 15px
}

.jw-slider-horizontal .jw-slider-container {
    height: 10px
}

.jw-knob {
    height: 16px;
    width: 16px
}
*/

/* the button icon: the button keeps the player's own width (so the spacing is the same as the other buttons);
   the player limits button pictures to 24px high, ours is 22px (about 24x22 like the glyphs of the other buttons) */
.jw-controlbar .jw-cc-settings-btn .jw-button-image {
    width: 100% !important;
    height: 22px !important;
    max-height: none !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-size: contain !important;
}