.curentSpeach,
.curentSpeach * {
    background-color: #FFFF00 !important;
}

#textToSpeach {
    background-color: white;
    border: 1px outset rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 255, 0, 0.2) inset;
    text-align: center;
    user-select: none;
}

#textToSpeach h4 {
    margin: 0 0 0.3em 0;
    color: #118852;
}

#textToSpeach input[type='range'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    width: calc(100% - 24px);
}

#textToSpeach input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: #676774;
    border-radius: 50%;
    border: 2px solid white;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px gray;
}

#textToSpeach input[type=range]:hover::-moz-range-thumb {
    background-color: #484851;
}

#textToSpeach input[type=range]:active::-moz-range-thumb {
    background-color: #00df60;
}

#textToSpeach input[type="range"]::-moz-range-progress {
    background-color: #00df60;
    height: 6px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

#textToSpeach input[type="range"]:hover::-moz-range-progress {
    background-color: #23ff74;
}

#textToSpeach input[type=range]::-moz-range-track {
    position: relative;
    height: 4px;
    background-color: #e9e9ed;
    border-radius: 3px;
    border: 1px solid #bcbcc5;
}

#textToSpeach input[type=range]:hover::-moz-range-track {
    background-color: #d0d0d7;
    border-color: #676774;
}

#textToSpeach input[type=range]::-webkit-slider-thumb {
    top: 50%;
    width: 20px;
    height: 20px;
    background-color: #676774;
    border-radius: 50%;
    border: 2px solid white;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px gray;
    -webkit-appearance: none;
    transform: translateY(-50%);
}

#textToSpeach input[type=range]:hover::-webkit-slider-thumb {
    background-color: #484851;
}

#textToSpeach input[type=range]:active::-webkit-slider-thumb {
    background-color: #00df60;
}

#textToSpeach input[type="range"]::-webkit-slider-runnable-track {
    position: relative;
    height: 4px;
    background-color: #e9e9ed;
    border-radius: 3px;
    border: 1px solid #bcbcc5;
}

#textToSpeach input[type="range"]:hover::-webkit-slider-runnable-track {
    background-color: #d0d0d7;
    border-color: #676774;
}

#textToSpeach span,
#volumeSlider label {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 0.3em;
}

#textToSpeach span:hover,
#volumeSlider label:hover {
    cursor: pointer;
    box-shadow: 0 0 10px gray inset;
}

#textToSpeach span:active,
#volumeSlider label:active {
    box-shadow: 0 0 10px white inset, -1px -1px 2px black;
}

#textToSpeach span>i,
#volumeSlider label>i {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background-color: #26c778;
    mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#textToSpeach span:first-of-type>i {
    mask-image: url("/global/textToSpeach/images/speak.png");
    mask-size: contain;
    -webkit-mask-image: url("/global/textToSpeach/images/speak.png");
    -webkit-mask-size: contain;
}

#textToSpeach span:last-of-type>i {
    mask-image: url("/global/textToSpeach/images/quiet.png");
    mask-size: contain;
    -webkit-mask-image: url("/global/textToSpeach/images/quiet.png");
    -webkit-mask-size: contain;
}

#volumeSlider {
    white-space: nowrap;
}

#volumeSlider label {
    display: inline-block;
    left: 0;
    transform: translate(0, -10px);
    top: 3px;
    vertical-align: middle;
}

#volumeSlider label>i {
    mask-image: url("/global/textToSpeach/images/volume.png");
    mask-size: contain;
    -webkit-mask-image: url("/global/textToSpeach/images/volume.png");
    -webkit-mask-size: contain;
    background-color: #23ff74;
}

#volumeSlider label.haft>i {
    mask-image: url("/global/textToSpeach/images/volume50.png");
    mask-size: contain;
    -webkit-mask-image: url("/global/textToSpeach/images/volume50.png");
    -webkit-mask-size: contain;
    background-color: #26c778;
}

#volumeSlider label.mute>i {
    mask-image: url("/global/textToSpeach/images/mute.png");
    mask-size: contain;
    -webkit-mask-image: url("/global/textToSpeach/images/mute.png");
    -webkit-mask-size: contain;
    background-color: #8E8E8E;
}

#volumeValue {
    position: absolute;
    display: none;
    padding: 3px 6px 0 6px;
    background-color: #fff;
    color: #000;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #67676C;
    user-select: none;
    z-index: 10;
}

#volume:active+#volumeValue,
#volume:focus+#volumeValue {
    display: block;
}

#volume:focus-visible {
    outline: none;
}

@media screen and (max-width: 768px) {
    .rightPanel {
        position: absolute;
        right: 9999px;
        display: block;
        top: 0;
        /*height: calc(100vh - 129px);*/
        width: 100%;
    }

    #textToSpeach {
        position: fixed;
        width: 24px;
        height: 24px;
        overflow: hidden;
        z-index: 999;
        box-sizing: border-box;
        left: 50%;
        transform: translateX(-50%);
        bottom: 35px;
        border-radius: 5px;
    }

    #textToSpeach> :not(span:first-of-type) {
        display: none;
    }

    #textToSpeach span:first-of-type {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    #textToSpeach:hover {
        position: fixed;
        width: 80%;
        height: revert;
        overflow: visible;
        padding-top: 20px;
    }

    #textToSpeach:hover>span {
        display: inline-block;
    }

    #textToSpeach:hover> :not(span) {
        display: block;
    }

    #textToSpeach:hover span:first-of-type {
        position: revert;
        top: revert;
        left: revert;
        pointer-events: auto;
    }

    #volumeValue {
        top: 4px;
    }

    #volumeSlider label {
        transform: translate(0, 10px);
        top: revert;
        vertical-align: revert;
    }
}