.slider {
    -webkit-appearance: none;
    width: 50%;
    height: 30px;
    border-radius: 5px;
    background: #e9eaee;
    outline: 0
}

.slider:hover {
    opacity: 1
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #007bff;
    cursor: pointer
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 10px;
    border-radius: 50%;
    background: #04aa6d;
    cursor: pointer
}

#speakButton,
#stopButton {
    color: #fff;
    
    float: right;
    margin-top: 10px
}

.speach-all-user-inputs,
.speach-output-div,
[name=speach-container] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .5)
}

#speakButton {
    padding: 13px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: none !important;
    background-color: #007bff;
    border: none;
    padding: 10px;
    border-radius: 15px
}

#stopButton {
    margin-bottom: 5px;
    height: 40px;
    background-color: crimson;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    display: none;
    cursor: none
}

#decreasePitchButton:active,
#decreaseSpeedButton:active,
#decreaseVolumeButton:active,
#editModeIcon:,
#increasePitchButton:hover,
#increaseSpeedButton:active,
#increaseVolumeButton:active,
#pasteButton:active,
#speakButton:active,
#stopButton:active {
    transform: scale(1.1)
}



#decreasePitchButton:active,
#decreaseSpeedButton:active,
#decreaseVolumeButton:active,
#editModeIcon:active,
#increasePitchButton:active,
#increaseSpeedButton:active,
#increaseVolumeButton:active,
#pasteButton:active,
#speakButton:active,
#stopButton:active {
    transform: scale(1.1)
}

#language:focus {
    border: 1.5px dashed #007bff !important;
    outline: 0
}

@media screen and (min-width:600px) {
    #textToSpeak {
        line-height: 50px !important;
        width: 97.5% !important
    }
}

[name=speach-container] {
    max-width: 1200px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
}

.speach-all-user-inputs {
    background: #fff;
    border-radius: 5px;
    padding-bottom: 10px
}

[name=speach-user-div-1] {
    width: 100%;
    height: 100px;
    background: #fff;
    display: flex;
    border-radius: 5px;
    margin-right: 5px
}

[name=speach-search-language] {
    
    border-radius: 10px;
    width: 120px;
    height: 40px;
    margin-right: 10px;
    margin-top: 20px;
    margin-left: 10px;
    background: #e9eaee;
    border: 1px solid #ccc
}

[name=speach-arrow-icon] {
    
    color: #454746;
    margin-top: 15px
}

[name=speach-select-country] {
    
    border-radius: 10px;
    width: 100px;
    height: 40px;
    margin-top: 20px;
    margin-left: 5px;
    background: #e9eaee;
    border: 1px solid #ccc
}

[name=speach-past-icon],
[name=speach-toggle-icon] {
    
    margin-top: 70px;
    height: 40px;
    position: absolute;
    color: #454746
}

[name=speach-toggle-icon] {
    margin-right: 100px;
    margin-left: 150px
}

[name=speach-past-icon] {
    margin-right: 10px;
    margin-left: 70px
}

[name=speacn-text-input-div] {
    width: 96%;
    background: #fff;
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 5px
}

[name=speach-textarea] {
    height:400px;width:93.5%;background:#e9eaee;font-size:20px;padding-top:10px;border-radius:7px;resize:none;font-family:Roboto,sans-serif;padding-left:7px;resize:vertical;line-height:30px;margin-top:5px;margin-left:5px;margin-right:5px;border:1px solid #ccc
}

.speach-output-div {
    background: #fff;
    border-radius: 5px
}

[name=speach-speak-button-div] {
    width: 96%;
    height: 70px;
    background: #fff;
    margin-top: 20px;
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 5px
}

[name=speach-speak-img] {
    background: #fff;
    margin-left: 10px;
    margin-top: 10px;
    width: 80px;
    height: 40px;
    display: none;
}

[name=speach-con-div-929444],
[name=speach-controls],
[name=speach-pitch-div] {
    display: flex;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    margin-top: 5px
}

[name=speach-con-1],
[name=speach-con-div-6567777],
[name=speach-p-div-67] {
    display: flex;
    width: 96%;
    height: 100px;
    background: #fff;
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 5px
}

[name=speach-label-1] {
    position: absolute;
    margin-left: 30%;
    
    margin-top: 10px;
    color: #454746
}

[name=speach-dec-icon-6776667],
[name=speach-dec-icon-677],
[name=speach-icon-1] {
    margin-left: 5%;
    height: 1px;
    width: 30px;
    background: 0 0;
    padding-bottom: 40px;
    
    margin-top: 40px;
    margin-right: 20px;
    color: #454746
}

[name=speach-step-1],
[name=speach-step-input-666666777],
[name=speacn-p-976555] {
    height: 20px;
    width: 350px;
    margin-top: 45px;
    margin-left: 10px;
    margin-right: 10px
}

[name=speach-output-1],
[name=speach-output-4925],
[name=speach-output-675456] {
    position: relative;
    margin-top: 5px;
    
    color: #454746;
    padding: 10px;
    width: 100px
}

[name=speach-inc-83787777],
[name=speach-inc-9766],
[name=speach-inc-val-icon-67777] {
    position: relative;
    margin-right: 5%;
    text-align: center;
    height: 70px;
    margin-top: 40px;
    
    color: #454746
}

[name=speach-con-label-8765555],
[name=speach-p-label-67] {
    position: absolute;
    margin-left: 30%;
    
    color: #454746;
    margin-top: 10px
}


    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');