.talkify-control-center.local {
    display: inline-block;
    position: relative;
}

    .talkify-control-center.local i {
        cursor: pointer;
    }

    .talkify-control-center.local button {
        cursor: pointer;
    }

    .talkify-control-center.local button {
        background-color: transparent;
        border: none;
    }

    .talkify-control-center.local > div {
        display: flex;
        border: 1px solid;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .talkify-control-center.local > div, .talkify-control-center.local button {
        font-size: 14px;
    }

        .talkify-control-center.local > div > * {
            padding: 5px;
            border-right: 1px solid #eee;
        }

    .talkify-control-center.local .talkify-more-settings > div {
        display: flex;
        align-items: center;
        border: none;
    }

    .talkify-control-center.local .talkify-more-settings {
        display: none;
        position: absolute;
        width: 99%;
    }

    .talkify-control-center.local #talkify-local-settings:checked + .talkify-more-settings {
        display: block;
    }


    .talkify-control-center.local .talkify-disabled {
        color: #000000b5 !important
    }

    /*sliders*/
    .talkify-control-center.local input[type=range] {
        /*removes default webkit styles*/
        -webkit-appearance: none;
        /*required for proper track sizing in FF*/
        width: 100px;
        background: transparent;
        border: 0;
        padding: 0;
        outline: none;
    }

    .talkify-control-center.local .volume-slider,
    .talkify-control-center.local .rate-slider {
        padding: 10px;
    }

    .talkify-control-center.local input[type=range]::-webkit-slider-runnable-track {
        height: 10px;
        border: none;
    }

    .talkify-control-center.local input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 10px;
        width: 10px;
        /* margin-top: -2.5px; */
    }

    .talkify-control-center.local input[type=range]:focus {
        outline: none;
    }

    .talkify-control-center.local input[type=range]::-moz-range-track {
        width: 100%;
        height: 5px;
        border: none;
    }

    .talkify-control-center.local input[type=range]::-moz-range-thumb {
        border: none;
        height: 12px;
        width: 12px;
    }

    /*hide the outline behind the border*/
    .talkify-control-center.local input[type=range]:-moz-focusring {
        outline: 1px solid white;
        -ms-outline-offset: -1px;
        outline-offset: -1px;
    }

    .talkify-control-center.local input[type=range]::-ms-track {
        /* width: 75px; */
        height: 3px;
        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;
        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;
    }

    .talkify-control-center.local input[type=range]::-ms-fill-lower {
        border-radius: 10px;
    }

    .talkify-control-center.local input[type=range]::-ms-fill-upper {
        border-radius: 10px;
    }

    .talkify-control-center.local input[type=range]::-ms-thumb {
        border: none;
        height: 12px;
        width: 12px;
        -ms-border-radius: 50%;
        border-radius: 50%;
        margin-top: -1px;
    }