/* ========================================================================================
   readspeaker.css: CSS fuer Readspeaker
   ======================================================================================== */

    /* Custom Layout für Compact Skin Desktop-Version */
    .rsbtn {
        z-index: 0;
        margin-bottom: 1rem;
        min-height: 2rem;
    }

    .rsbtn.compactskin.rsexpanded .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause {
        padding-left: 10px;
        padding-right: 10px;
    }

    .rsbtn.compactskin.rsexpanded .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn.rsicn-pause {
        display: inline-block;
        width: 14px;
    }

    .rsbtn.compactskin.rsexpanded .rsbtn_exp .rsbtn_exp_inner .rsbtn_speed {
        display: inline-block;
    }

    .rsbtn.compactskin .rsbtn_play .rsbtn_left {
        border-right: none;
        margin-left: 0.75rem;
    }

    .rs_addtools .rsbtn_play .rsbtn_right, .rsbtn .rsbtn_play .rsbtn_right {
        border-left: none;
        margin: 0 0.5rem 0 0;
        padding: 0;
    }

    .rsbtn .rsbtn_exp .rsbtn_exp_inner,
    .rsbtn.compactskin .rsbtn_play {
        background: transparent;
        border: solid 2px var(--theme-bg-highlight);
        border-radius: 5px;
    }

    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item {
        border-left: 2px solid var(--theme-bg-highlight);
    }

    .rs_addtools .rsbtn_play:hover, .rsbtn .rsbtn_play:hover {
        /* background: #fff; */
        border: solid 2px var(--theme-bg-highlight-hover);
    }

    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:hover {
        /* background: #fff; */
    }

    .rsbtn.compactskin.rsexpanded .rsbtn_play {
        border: solid 0px var(--theme-bg-highlight);
    }

    .rs_addtools a, .rs_addtools span, .rsbtn a, .rsbtn span,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_stop span.rsicn,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause span.rsicn,
    .rs_addtools .rsbtn_play .rsbtn_left .rsbtn_text::before,
    .rsbtn .rsbtn_play .rsbtn_left .rsbtn_text::before,
    .rs_addtools .rsbtn_play .rsbtn_right:before,
    .rsbtn .rsbtn_play .rsbtn_right:before {
        color: var(--theme-bg-highlight);
    }

    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:hover span.rsicn,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:hover span.rsicn,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_stop:hover span.rsicn,
    .rs_addtools .rsbtn_play:hover .rsbtn_left .rsbtn_text::before,
    .rsbtn .rsbtn_play:hover .rsbtn_left .rsbtn_text::before,
    .rs_addtools .rsbtn_play:hover .rsbtn_right:before,
    .rsbtn .rsbtn_play:hover .rsbtn_right:before {
        color: var(--theme-bg-highlight-hover);
    }

    .rs_addtools .rsbtn_play:focus .rsbtn_right::before,
    .rsbtn .rsbtn_play:focus .rsbtn_right::before {
        color: var(--theme-bg-highlight);
    }

    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:active,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:focus {
        background: var(--theme-bg-highlight);
    }

    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active:hover,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus:hover,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active:hover .rsbtn_btnlabel,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus:hover .rsbtn_btnlabel {
        background: var(--theme-bg-highlight-hover);
        color: #fff;
    }

    .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:active .rsicn:before,
    .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:focus .rsicn:before,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active:hover span.rsicn,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus:hover span.rsicn {
        color: #fff;
    }

    .rsbtn .rs-player-loadindicator {
        background: #fff;
        border: 2px solid var(--theme-bg-highlight);
        border-radius: 2px;
        height: 1rem;
        top: calc(100% + 0.5rem);
        width: calc(100% + 4px);
        margin-left: -2px;
    }

    .rsbtn .rs-player-loadindicator .rsbtn-progress,
    .rsbtn .rs-player-loadindicator .rsbtn-loading {
        background: var(--theme-bg-highlight-hover);
        height: 0.8rem;
    }

    /* Zusätzliche in der Funktion sehr reduzierte Bedienleiste die rechts unten erscheint sobald der Player arbeitet,
    keine Möglichkeit Lautstärke oder Geschwindigkeit einzustellen, Mehrwert nicht erkannt, daher ausgeblendet*/
    #rsbtn_scrollcontrols {
        display: none;
    }

    /* Tausch von fettem Schliessen-Icon gegen reguläres bei Hover und Focus*/
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:focus span.rsicn:before,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:hover span.rsicn:before {
        content: "\e90b";
    }

    /*Statusanzeige zB für Fehlermeldung*/
    span.rsbtn_status {
        font-size: 0.6rem;
    }

    .rsbtn .rsbtn_exp_inner .rsbtn_status_overlay {
        background-color: #fff;
    }

    /* Vorlesen-Button der bei der Markierung von Textpassagen erscheint*/
    .rspopup {
        background: var(--theme-bg-highlight);
        border: 2px solid var(--theme-bg-highlight);
        border-radius: 5px;
        border-top: none;
        box-shadow: 0 0 5px var(--theme-bg-highlight);
        box-sizing: inherit;
        color: #fff;
        display: inline-block;
        display: block;
        left: 300px;
        position: absolute;
        top: 100px;
    }

    .rspopup .rspopup_btn:hover {
        background: #009abd;
        border-top: 2px solid var(--theme-bg-highlight-hover);
        color: #fff;
    }

    .rspopup .rspopup_btn {
        border-top: 2px solid var(--theme-bg-highlight);
    }

    /* Mobile Version des RS-Players, ausklappbar am rechten unteren Rand */
        #rsmpl_container {
        background: none;
        border: none;
        border-bottom-right-radius: 0;
        border-radius: 5px;
        border-right: none;
        border-top-right-radius: 0;
        bottom: 7rem;
        box-shadow: none;
        box-sizing: content-box;
        display: inline-block;
        display: block;
        padding: 0;
        position: fixed;
        right: -100%;
        transition: right .3s;
    }

    /* Mobile Version des RS-Players im NL */
    #binding-nl ~ #rsmpl_container {
        bottom: 11.8125rem;
    }

    #rsmpl_container .rsmpl-progress {
        background: #fff;
        border: 2px solid var(--theme-bg-highlight);
        border-bottom: none;
        border-radius: 2px;
        height: 0.8rem;
        margin: 0 0 0 27%;
        width: 73%;
    }
    #rsmpl_container .rsmpl-progress .rsmpl-progress-inner {
        background: var(--theme-bg-highlight-hover);
    }

    .rsmpl-dl {
        display: none;
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool.rsmpl-collapse {
        border-right: none;
    }

    #rsmpl_container div.rsmpl-tools {
        background: #fff;
        border: 2px solid var(--theme-bg-highlight);
        border-radius: 2px;
        box-sizing: inherit;
        color: #333;
        display: flex;
        margin: 0;
        outline: 0;
        padding: 0px;
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool button .rsicn {
        font-size: 22px;
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool button {
    padding: 11px;
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool .rsmpl-playpause .rsicn,
    #rsmpl_container .rsmpl-tools .rsmpl-tool .rsmpl-stop .rsicn,
    #rsmpl_container .rsmpl-tools .rsmpl-tool button .rsicn     {
        color: var(--theme-bg-highlight);
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool button:focus,
    #rsmpl_container .rsmpl-tools .rsmpl-tool button:active {
        background: var(--theme-bg-highlight);
        color: #fff;
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool button:focus .rsicn,
    #rsmpl_container .rsmpl-tools .rsmpl-tool button:active .rsicn {
        color: #fff;
    }

    #rsmpl_container.rs_collapsed .rsmpl-tools .rsmpl-tool.rsmpl-collapse .rsicn:before,
    .rsicn-slide-right:before {
        content: "\e916"; /*Austausch von Pfeil gegen RS-Logo-Icon */
    }

    #rs-controlpanel {
        display: none;
    }

    /* Nachstyling 14.09.2022 */

    .rs_addtools .rsbtn_play .rsbtn_left .rsbtn_text::after,
    .rsbtn .rsbtn_play .rsbtn_left .rsbtn_text::after,
    .rs_addtools .rsbtn_play .rsbtn_left .rsbtn_text::before,
    .rsbtn .rsbtn_play .rsbtn_left .rsbtn_text::before,
    .rs_addtools .rsbtn_play .rsbtn_right,
    .rsbtn .rsbtn_play .rsbtn_right,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_stop span.rsicn,
    .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause span.rsicn,
    .rs_addtools a, .rs_addtools span, .rsbtn a, .rsbtn span {
    color: var(--theme-bg-highlight);
    }

    .rs_addtools .rsbtn_play, .rsbtn .rsbtn_play {
    border: 2px solid var(--theme-bg-highlight);
    border-radius: 5px;
    }

    .rspopup .rspopup_btn.rspopup_play::before,
    .rspopup .rspopup_btn.rspopup_play::after {
    color: #fff;
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool.active button:active,
    #rsmpl_container .rsmpl-tools .rsmpl-tool.active button:focus {
    background: var(--theme-bg-highlight-hover);
    color: #fff;
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool.active button{
    background-color: #fff;
    }

    #rsmpl_container .rs-player-loadindicator .rsbtn-loading,
    .rsbtn .rs-player-loadindicator .rsbtn-loading {
    background: var(--theme-bg-highlight-hover);
    }

    #rsmpl_container .rsmpl-tools .rsmpl-tool.active button .rsicn .rsicn-click-listen::before,
    #rsmpl_container .rsmpl-tool.active .rsicn-click-listen {
    color: #fff;
    }

    .rs-outline {
    outline: 2px solid var(--theme-bg-highlight-hover)!important;
    }