@charset "utf-8";



#sidepanel {
    position: absolute;
    right: 0px;
    top: 8px;
    bottom: 0px;
    z-index: 91;
    overflow: hidden;
    white-space: nowrap;
    width: 0px;
    transition: all 0.4s;
}



#sidepanel.aktiv {
    z-index: 100;
    width: 260px;
}



#sidepanel h2 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #488925;
    text-align: center;
}



#nippel_bereich {
    display: inline-block;
    vertical-align: bottom;
    position: absolute;
    width: 36px;
    right: 0px;
    bottom: 16px;
    z-index: 91;
    transition: all 0.4s;
}



#nippel_bereich.aktiv {
    right: 260px;
}



#nippel_bereich .nippel {
    filter: saturate(0.4);
    padding: 8px;
    border-radius: 8px 0px 0px 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 2px;
}


#nippel_bereich .nippel .status_anzeige.rot, .status_anzeige.gruen {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


#nippel_bereich .nippel .status_anzeige.rot {
    background-color: #ff0000;
}

#nippel_bereich .nippel .status_anzeige.gruen {
    background-color: #00ff08;
}

#nippel_bereich .nippel .status_anzeige {
    position: absolute;
    top: 5px;
    right: 5px;
}


#nippel_bereich .nippel.aktiv {
    filter: saturate(1.0);
}



#nippel_bereich .nippel:hover {
    filter: brightness(1.2) saturate(0.7);
}



#nippel_bereich .nippel img {
    width: 20px;
}



#sidepanel .sidepanel_inhalt {
    width: 252px;
    background-color: #e5e5e5;
    display: none;
    vertical-align: top;
    padding: 8px 0px 8px 8px;
    border-radius: 8px 0px 0px 8px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 24px);
}



#sidepanel hr {
    margin: 16px 0px 16px 0px;
    border: none;
    border-top: 1px solid #898989;
}



@media screen and (max-width: 500px) {

    #nippel_bereich {
        width: 32px;
    }

    #nippel_bereich .nippel img {
        width: 16px;
    }
    
}



/* BEREICH GLOCKE */



#sidepanel .sidepanel_inhalt_glocke h3{
    font-size: 14px;
    margin-bottom: 2px;
    margin-top: 8px;
    color: #626262;
    text-align: center;
}



#sidepanel .glocke_zeile {
    padding: 4px;
    margin-bottom: 4px;
    background-color: #fff;
    cursor: pointer;
    white-space: normal;
    border-radius: 4px;
}



#sidepanel .glocke_zeile:hover {
    background-color: #efffe6;
}



#sidepanel .glocke_zeile .icon {
    float: right;
    margin-left: 8px;
}



#sidepanel .glocke_zeile .icon img {
    width: 24px;
}



#sidepanel .glocke_zeile .kopf {
    color: #656565;
    margin-bottom: 4px;
    font-size: 10px;
}



#sidepanel .glocke_zeile .titel {
    margin-bottom: 4px;
    font-size: 12px;
}



#sidepanel .glocke_zeile .text {
    color: #656565;
    font-size: 10px;
}



/* BEREICH TELEFON */



#sidepanel .switch {
    background-color: #488925;
    border-radius: 12px;
    height: 24px;
    padding: 0px;
    margin: 8px 16px 8px 0px;
    cursor: pointer;
    transition: all 0.4s;
}

#sidepanel .switch .handle {
    background-color: #fff;
    border-radius: 12px;
    height: 24px;
    width: 24px;
    padding: 0px;
    margin: 0px;
    position: relative;
    left: 0px;
    transition: left 0.4s;
    display: inline-block;
    vertical-align: middle;
    box-shadow: inset #00000033 0px 0px 10px, #00000099 0px 0px 7px;
}



#sidepanel .switch .text_erreichbar {
    color: #fff;
    white-space: nowrap;
    font-weight: bold;
    text-align: center;
    width: calc(100% - 32px);
    opacity: 1.0;
    transition: all 0.4s;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

#sidepanel .switch .text_dnd {
    color: #fff;
    white-space: nowrap;
    font-weight: bold;
    text-align: center;
    width: 0px;
    opacity: 0.0;
    transition: all 0.4s;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

#sidepanel .switch.dnd .text_erreichbar {
    width: 0px;
    opacity: 0.0;
}

#sidepanel .switch.dnd .text_dnd {
    width: calc(100% - 32px);
    opacity: 1.0;
}


#sidepanel .switch .text_verfuegbar {
    color: #fff;
    white-space: nowrap;
    font-weight: bold;
    text-align: center;
    width: calc(100% - 32px);
    opacity: 1.0;
    transition: all 0.4s;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

#sidepanel .switch .text_abwesend {
    color: #fff;
    white-space: nowrap;
    font-weight: bold;
    text-align: center;
    width: 0px;
    opacity: 0.0;
    transition: all 0.4s;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

#sidepanel .switch.abwesend .text_verfuegbar {
    width: 0px;
    opacity: 0.0;
}

#sidepanel .switch.abwesend .text_abwesend {
    width: calc(100% - 32px);
    opacity: 1.0;
}



#sidepanel .switch.dnd {
    background-color: #892525;
}

#sidepanel .switch.dnd .handle {
    left: 8px;
}



#sidepanel .switch.abwesend {
    background-color: #892525;
}

#sidepanel .switch.abwesend .handle {
    left: 8px;
}



#sidepanel .sidepanel_inhalt_telefon h3{
    font-size: 14px;
    margin-bottom: 2px;
    margin-top: 8px;
    color: #626262;
    text-align: center;
}



#sidepanel .telefon_zeile {
    padding: 4px;
    margin-bottom: 4px;
    background-color: #fff;
    cursor: pointer;
    white-space: normal;
    border-radius: 4px;
}



#sidepanel .telefon_zeile:hover {
    background-color: #efffe6;
}



#sidepanel .telefon_zeile .zeit {
    color: #656565;
    margin-bottom: 4px;
    font-size: 10px;
}



#sidepanel .telefon_zeile .art {
    margin-bottom: 4px;
    font-size: 12px;
}



#sidepanel .telefon_zeile .von {
    font-size: 12px;
}



#sidepanel .telefon_zeile .an {
    font-size: 12px;
}



#sidepanel .telefon_zeile .todo {
    font-size: 12px;
    font-weight: bold;
    color: #840000;
}



#sidepanel .telefon_zeile .voicemail audio {
    margin-top: 8px;
    width: 240px;
    height: 35px;
}



#sidepanel .rtcm_zeile {
    padding: 4px;
    margin-bottom: 4px;
    background-color: #fff;
    white-space: normal;
    border-radius: 4px;
}



#sidepanel .rtcm_zeile .nummer {
    margin-bottom: 8px;
    border-bottom: 1px solid #c9c9c9;
    padding: 4px;
}



#sidepanel .rtcm_zeile .bilduniknopf {
    background-color: #999;
}



#sidepanel .rtcm_zeile .bilduniknopf:hover {
    background-color: #b7b7b7;
}



#sidepanel .rtcm_zeile .bilduniknopf.rot {
    background-color: #892525;
    margin-right: 16px;
}



#sidepanel .rtcm_zeile .bilduniknopf.rot:hover {
    background-color: #b53232;
}



#sidepanel .rtcm_zeile .bilduniknopf.orange {
    background-color: #c15900;
}



#sidepanel .rtcm_zeile .bilduniknopf.orange:hover {
    background-color: #ea6c00;
}



#sidepanel .benutzer_zeile {
    padding: 4px;
    margin-bottom: 4px;
    background-color: #fff;
    white-space: normal;
    border-radius: 4px;
}



#sidepanel .benutzer_zeile.dnd {
    background: -moz-linear-gradient(90deg, rgba(255,212,180,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,212,180,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%);
    background: linear-gradient(90deg, rgba(255,212,180,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd4b4",endColorstr="#ffffff",GradientType=1);
}



#sidepanel .benutzer_zeile .bereich_name {
    vertical-align: middle;
    display: inline-block;
    width: 60px;
    font-size: 12px;
}



#sidepanel .benutzer_zeile .bereich_name .zusatz_info {
    font-size: 10px;
    font-weight: bold;
}



#sidepanel .benutzer_zeile .bereich_nummern {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 73px);
    padding-left: 4px;
    margin-left: 4px;
    border-left: 1px solid #d9d9d9;
}


#sidepanel .benutzer_zeile .bereich_status {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 73px);
    text-align: right;
}


#sidepanel .benutzer_zeile .bereich_nummern .nummer {
    border-bottom: 1px solid #d9d9d9;
    padding: 4px;
    margin: 2px;
    background-color: #fff;
    white-space: normal;
    cursor: pointer;
}



#sidepanel .benutzer_zeile .bereich_nummern .nummer span {
    display: inline-block;
    vertical-align: middle;
    color: #6c6c6c;
    font-size: 12px;
}



#sidepanel .benutzer_zeile .bereich_nummern .nummer .led {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 7px;
    background-color: #d4d4d4;
    margin-right: 8px;
    vertical-align: middle;
}



#sidepanel .benutzer_zeile .bereich_nummern .nummer.belegt {
    cursor: not-allowed;
}

#sidepanel .benutzer_zeile .bereich_nummern .nummer.belegt span {
    color: #252589;
}

#sidepanel .benutzer_zeile .bereich_nummern .nummer.belegt .led {
    background-color: #252589;
}



#sidepanel .benutzer_zeile .bereich_nummern .nummer:last-child {
    border-bottom: none;
}




#sidepanel .chats_uebersicht .chat {
    display: flex;
    padding: 8px 10px;
    margin: 8px 0px;
    background-color: #ffff;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    border-radius: 8px 0px 0px 8px;
    transition: all .3s;
}


#sidepanel .chats_uebersicht .chat .neu_anzahl {
    background-color: #ac1614;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffff;
    position: absolute;
    right: 8px;
}


#sidepanel .chats_uebersicht .chat:hover {
    cursor: pointer;
    background-color: #c0dab2;
}

#sidepanel .chats_uebersicht .chat_bild {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 0px 4px 0px 0px;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #3e3e3e;
    background-size: cover;
    background-position: center center;
}

#sidepanel .chats_uebersicht .chat_inhalt {
    flex-basis: calc(100% - 64px);
    max-width: calc(100% - 64px);
    color: #161616;
    margin-left: 10px;
}

#sidepanel .chats_uebersicht .chat_titel {
    font-weight: bold;
}

#sidepanel .chats_uebersicht .letzte_nachricht {
    font-size: 12px;
    opacity: 0.6;
    overflow: hidden;
    width: 100%;
    max-width: 160px;
    word-break: break-all;
}



#popup.sipgate_transfer .benutzer_zeile {
    padding: 4px;
    margin-bottom: 4px;
    background-color: #fff;
    white-space: normal;
    border-radius: 4px;
}



#popup.sipgate_transfer .benutzer_zeile.dnd {
    background: -moz-linear-gradient(90deg, rgba(255,212,180,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,212,180,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%);
    background: linear-gradient(90deg, rgba(255,212,180,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd4b4",endColorstr="#ffffff",GradientType=1);
}



#popup.sipgate_transfer .benutzer_zeile .bereich_name {
    vertical-align: middle;
    display: inline-block;
    width: 60px;
    font-size: 12px;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_name .zusatz_info {
    font-size: 10px;
    font-weight: bold;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_nummern {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 73px);
    padding-left: 4px;
    margin-left: 4px;
    border-left: 1px solid #d9d9d9;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer {
    border-bottom: 1px solid #d9d9d9;
    padding: 4px;
    margin: 2px;
    background-color: #fff;
    white-space: normal;
    cursor: pointer;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer span {
    display: inline-block;
    vertical-align: middle;
    color: #6c6c6c;
    font-size: 12px;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer:hover span {
    font-weight: bold;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer .led {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 7px;
    background-color: #d4d4d4;
    margin-right: 8px;
    vertical-align: middle;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer.belegt {
    cursor: not-allowed;
}

#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer.belegt span {
    color: #252589;
}

#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer.belegt .led {
    background-color: #252589;
}

#popup .benutzer_zeile .bereich_status .led.gruen {
    background-color: #6cbb3e;
}



#popup.sipgate_transfer .benutzer_zeile .bereich_nummern .nummer:last-child {
    border-bottom: none;
}



/* BENACHRICHTIGUNGEN */


#benachrichtigung_neu {
    background-color: #fff;
    box-shadow: #00000055 0px 0px 10px;
    padding: 8px;
    position: absolute;
    display: inline-block;
    right: 64px;
    bottom: 32px;
    width: 200px;
    border-radius: 4px;
    z-index: 150;
    animation-name: benachrichtigung_ein;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

#benachrichtigung_neu p {
    font-size: 12px;
}

#benachrichtigung_neu img {
    width: 24px;
    float: right;
}



@keyframes benachrichtigung_ein {
    
    0% {
        opacity: 0.0;
        transform: scale(0.0);
        outline: 0px solid #892525;
    }
    
    90% {
        opacity: 1.0;
        transform: scale(1.2);
        outline: 5px solid #892525;
    }
    
    100% {
        opacity: 1.0;
        transform: scale(1.0);
        outline: 0px solid #892525;
    }
    
}



@keyframes benachrichtigung_aus {
    
    0% {
        right: 64px;
        opacity: 1.0;
        transform: scale(1.0);
    }
    
    99% {
        opacity: 0.0;
        transform: scale(0.0);
        right: -100px;
    }
    
    100% {
        display: none;
    }
    
}


/*  Chat  */

#sidepanel .aktiver_chat {
    height: calc(100% - 240px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 40px;
}

div#sidepanel_chat_textarea {
    width: calc(100% - 16px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    opacity: 0;
    transition: all .5s;
    position: absolute;
    bottom: 8px;
}

#sidepanel_chat_textarea .senden_knopf img {
    width: 20px;
    aspect-ratio: 1;
}

#sidepanel_chat_textarea textarea.nachricht_textarea {
    flex-basis: 100%;
    height: 38px;
    min-width: unset;
    max-width: unset;
    min-height: unset;
}

#sidepanel_chat_textarea .senden_knopf {
    padding: 6px;
    margin: 0px 4px;
    background-color: #a5c991;
    border-radius: 6px;
}

#sidepanel .nachricht {
    display: inline-block;
    text-align: left;
    padding: 6px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    max-width: 75%;
}

#sidepanel .nachricht_container.eigene {
    text-align: right;
}

#sidepanel .nachricht_container.datum {
    text-align: center;
}

#sidepanel .aktionen .antworten {
    position: absolute;
    opacity: 0;
}

#sidepanel .aktionen .antworten img {
    width: 20px;
}

#sidepanel .nachricht .nachricht_datei img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

#sidepanel .nachricht .nachricht_datei {
    padding: 4px;
}

#sidepanel .nachricht_container.eigene .nachricht {
    background-color: #eef5ee;
}

#sidepanel .nachricht_container:not(.eigene) .nachricht {
    background-color: #efefef;
}

#sidepanel .nachricht .nachricht_datum {
    font-size: 10px;
    display: inline-block;
}

#sidepanel .nachricht_benutzer {
    font-size: 10px;
}

#sidepanel .nachricht_inhalt {
    padding: 6px 0px;
    word-break: break-word;
    white-space: initial;
}

#sidepanel .lademarkierung.chat_raum .chat_titel {
    font-weight: bold;
    padding: 8px;
    margin-bottom: 14px;
    background-color: #fff;
    border-radius: 4px;
}

#sidepanel .lademarkierung.chat_raum .chat_titel .kleinbilduniknopf {
    vertical-align: middle;
}

#sidepanel .lademarkierung.chat_raum .chat_titel .bezeichnung_chat {
    vertical-align: middle;
    padding-left: 6px;
    border-left: 1px solid #a7a7a7;
}

#sidepanel .nachricht_container.datum .nachricht {
    padding: 4px;
    background-color: #efefef;
}

#sidepanel .nachricht_container.datum .nachricht .nachricht_inhalt {
    font-size: 10px;
    color: #3e3e3e;
}



#sidepanel .gaia_zeile {
    background-color: #f0f0f0;
    padding: 8px;
    border-radius: 6px;
    margin-top: 8px;
}

#sidepanel .gaia_zeile .gaia_aktion {
    margin-top: 4px;
    border-left: 5px solid #75aa57;
    border-radius: 4px;
}

#sidepanel .gaia_zeile .gaia_aktion span {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 32px);
    padding-left: 4px;
}

#sidepanel .gaia_zeile .gaia_aktion .kleinbilduniknopf {
    vertical-align: middle;
}