html {
    --selection-background: rgba(0,0,0,0.8);
    --vi-color: #FFFF00;
    --en-color: #FFFFFF;
    --font-size: 1.2em;
    --font-size-768-991: 1.3em;
    --font-size-992-1119: 1.3em;
    --font-size-1200-1600: 1.3em;
    --font-size-1601: 1.3em;
    --font-size-lookup: 1.6em;
    --fontSizeDict: 1.2em;
    --fontSizeDict-768-991: 1.2em;
    --fontSizeDict-992-1119: 1.4em;
    --fontSizeDict-1200-1600: 1.4em;
    --fontSizeDict-1601: 1.4em;
}
::cue {
    background: none;
}
.english {
    color: var(--en-color);
    white-space: pre-wrap;
}
::cue(.english) {
    color: var(--en-color);
    background: var(--selection-background);
    white-space: pre-wrap;
}

.vietnam {
    color: var(--vi-color);
    white-space: pre-wrap;
}
::cue(.vietnam) {
    color: var(--vi-color);
    background: var(--selection-background);
    white-space: pre-wrap;
}
video::-webkit-media-text-track-display {
    background: none !important;
}
.english span, .vietnam span {
    background: var(--selection-background);
    padding: 0px 10px;
    border-radius: 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.english span {
    margin-bottom: 3px;
}


#myModalSubTool .row {
    margin-top: 4px;
}
@media only screen and (max-width: 767px) {
    .english,  ::cue(.english), .vietnam, ::cue(.vietnam) {
        font-size: var(--font-size);
        line-height: var(--font-size);
    }
    .loolkupword a {
        color: #000;
        border-bottom: 1px dotted;
        font-size: var(--fontSizeDict);
        cursor: pointer;
    }

}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .english,  .vietnam {
        font-size: var(--font-size-768-991);
        line-height: var(--font-size-768-991);
    }
    .loolkupword a {
        color: #000;
        border-bottom: 1px dotted;
        font-size: var(---fontSizeDict-768-991);
        cursor: pointer;
    }

}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .english,  ::cue(.english), .vietnam, ::cue(.vietnam) {
        font-size: var(--font-size-992-1119);
        line-height: var(--font-size-992-1119);
    }
    .loolkupword a {
        color: #000;
        border-bottom: 1px dotted;
        font-size: var(--fontSizeDict-992-1119);
        cursor: pointer;
    }

}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .english,  ::cue(.english), .vietnam, ::cue(.vietnam) {
        font-size: var(--font-size-1200-1600);
        line-height: var(--font-size-1200-1600);
    }
    .loolkupword a {
        color: #000;
        border-bottom: 1px dotted;
        font-size: var(--fontSizeDict-1200-1600);
        cursor: pointer;
    }
}
@media only screen and (min-width: 1601px) {
    .english,  ::cue(.english), .vietnam, ::cue(.vietnam) {
        font-size: var(--font-size-1601);
        line-height: var(--font-size-1601);
    }
    .loolkupword a {
        color: #000;
        border-bottom: 1px dotted;
        font-size: var(--fontSizeDict-1601);
        cursor: pointer;
    }
}