video::cue {
            background-color: transparent;
            text-shadow: 1px 1px 2px #666666;
        }

        video::-webkit-media-text-track-display {
            position: relative !important;
            transform: none !important;
        }

        #videoPlayer::cue {
            background-color: #deffc0c0;
            color: #000000;
            text-shadow: 1px 1px 2px #666666;
            outline-style: solid;
            outline-color: #89a34c;
            font-size: 38px;
            font-family: "Times New Roman", cursive;
        }

        .red1 {
            background-color: #9dff00;
        }

        .red2 {
            background-color: #9dff00;
        }

        body {
            height: 100%;
            overflow: hidden;
        }

        html {
            height: 100%;
            overflow: hidden;
        }

        #videoPlayer {
            width: 100%;
            height: 100%;
        }

        div#subtitleList1 {
            /* max-height: 50%;
            height: 50%; */
            flex: 1;
            overflow-y: scroll;
            overflow-y: scroll;
        }

        div#subtitleList2 {
            /* max-height: 50%;
            height: 50%; */
            flex: 1;
            overflow-y: scroll;
            overflow-y: scroll;
        }

        .subtitleList {
            font-size: 26px;
            background: white;
        }

        #contender {
            height: 100%;
            display: flex;
        }

        #boxVideo {
            float: left;
            height: 100%;
            background: black;
            width: 75%;
        }

        #rightBox {
            float: right;
            width: 32%;
            min-width: 340px;
            display: flex;
            flex-direction: column;
        }

        #leftBox {
            float: right;
            width: 25%;
            display: flex;
            flex-direction: column;
        }

        .help {
            white-space: pre;
            font-family: monospace;
        }

        .help::before {
            content: 'small screen';
        }

        @media screen and (min-width: 801px) and (max-width: 1024px) {
            .help::before {
                content: 'small screen';
            }
        }

        @media screen and (min-width: 641px) and (max-width: 800px) {
            .help::before {
                content: '2';
            }
        }

        @media screen and (max-width: 640px) {
            .help::before {
                content: '1';
            }
        }