/*wegen Safari-bug*/                                                                          /*margin:auto; */                                          /**/
#DCML { position:fixed; right:0; top:0; height:100%; max-width:calc(90% - 28px); white-space: nowrap; z-index:111111; pointer-events: none; display:flex; align-items: center;  }
#DCML * { box-sizing:border-box;}
#DCML_E_CONT { position:relative; max-height:100%; max-width:100%; pointer-events: auto; }
                                                         /*83+ 7*42  min-height:293px;*/
#DCML_E_CONT { width:280px; /*variable Höhe*/ height:377px; display:flex; flex-direction: column;  }

#DCML_E_CONT > * {  font-size:13px; }

#DCML > div { vertical-align:middle; color:#FFF;  }

#DCML_E_CONT,
#DCML_E_OPEN { transition:left 300ms, width 300ms; }

#DCML_E_OPEN { width:28px; left:-28px; top:calc(50% - 40px); position:absolute;  line-height:90px; height:90px; max-height:100%; text-align:center; cursor:pointer; font-weight:bold; font-size:30px;  }

#DCML_E_CONT > #DCML_E_CONT_INTRO { padding:10px; display:flex; }
#DCML_E_CONT > #DCML_E_CONT_INTRO > * { display:inline-block; line-height:18px; }
#DCML_E_CONT > #DCML_E_CONT_INTRO > h2 { flex:1; font-weight:bold; font-size:18px; white-space: nowrap; margin:0; color:#fff; }
#DCML_E_CONT > #DCML_E_CONT_INTRO > span[onclick] { width:20px; cursor:pointer; text-align:center; font-weight:bold;  }
#DCML_E_CONT > #DCML_E_CONT_INTRO > span[onclick]:hover { background-color:rgba(255,255,255,0.9); color:#555; }


#DCML_E_CONT > #DCML_E_CONT_LIST { padding:0;  flex:1; overflow-y:auto; display:flex; flex-direction:column; }
#DCML_E_CONT > #DCML_E_CONT_LIST > div { flex:1; }
#DCML_E_CONT > #DCML_E_CONT_LIST > div > div { padding:6px 10px 6px 10px; height:42px; transition:height 300ms; overflow:hidden; display:flex; }

#DCML_E_CONT > #DCML_E_CONT_LIST > div > div:hover { background-color:rgba(255,255,255,0.2); }

#DCML_E_CONT > #DCML_E_CONT_LIST > div > div > * { display:inline-block; white-space: nowrap; height:30px; line-height:30px; }
#DCML_E_CONT > #DCML_E_CONT_LIST > div > div > a { line-height:14px; width:50px; flex:1; color:#FFF; font-size:14px; font-family:Arial; overflow:hidden; text-overflow: ellipsis; text-decoration:none;  }
#DCML_E_CONT > #DCML_E_CONT_LIST > div > div > a > img { border-radius:15px; margin-right:5px; float:left; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); height:28px; width:28px; margin-top:1px; margin-left:1px;/*box-shadow: 0 0 1px 0 #555; */}


#DCML_E_CONT > #DCML_E_CONT_LIST > div > div > a > p:not(:empty) { margin:0; margin-top:2px; font-size:11px; color:rgba(255,255,255,0.75);  }


#DCML_E_CONT > #DCML_E_CONT_LIST > div[data-merken='0'] > div > a { color:#555;  }
#DCML_E_CONT > #DCML_E_CONT_LIST > div[data-merken='0'] > div > a > p:not(:empty) { color:#888;  }


#DCML_E_CONT > #DCML_E_CONT_LIST > div[data-merken='0']:not(:empty) { background-color:rgba(255,255,255,0.4);  }
#DCML_E_CONT > #DCML_E_CONT_LIST > div[data-merken='0']:not(:empty)::before { content: attr(data-fulltext);
                                         font-size:11px;  display:block; padding:10px 10px 5px;
                                          color:#555;
                                         white-space: nowrap;   overflow:hidden; text-overflow: ellipsis;
                                         }

#DCML_E_CONT > #DCML_E_CONT_LIST > div[data-merken='1']:empty::before { content: attr(data-leertext);
                                         font-size:11px; display:block; padding:10px 10px 5px;
                                           color:rgba(255,255,255,0.75);
                                           max-height:48px; overflow:hidden; white-space: normal;

                                         }


#DCML_E_CONT > #DCML_E_CONT_LIST > div > div > span { width:20px; cursor:pointer; display:inline-block; width:20px; text-align:center; }
#DCML_E_CONT > #DCML_E_CONT_LIST > div > div > span:hover { color:#555; background-color:rgba(255,255,255,0.9); }


#DCML_E_CONT > #DCML_E_CONT_LIST > div > div > span[data-ismplus] { font-size:9px; font-weight:bold; }

#DCML_E_CONT > #DCML_E_CONT_LIST > div > div[data-noaction='1'] > a {/* color:rgba(255,255,255,0.75);*/ }
#DCML_E_CONT > #DCML_E_CONT_LIST > div > div[data-noaction='1'] > *:last-child{  pointer-events: none; background-color:none; color:rgba(0,0,0,0.1); }




#DCML_E_CONT > #DCML_E_CONT_OUTRO { padding:10px; }

#DCML_E_CONT > * { overflow:hidden; white-space: nowrap; }

#DCML[data-count='0'] #DCML_E_OPEN{ width:0; left:0; }

#DCML[data-count='0'] #DCML_E_CONT,
#DCML[data-status='0'] #DCML_E_CONT{ width:0; }

#DCML_E_CONT_OUTRO  *[onclick] { display:block; text-align:center; padding:5px; background-color:rgba(255,255,255,0.8); color:#000; cursor:pointer; text-transform:uppercase; font-weight:bold;  }
#DCML_E_CONT_OUTRO  *[onclick]:hover { background-color:rgba(255,255,255,0.9); }

/* abgedimmt normal */
#DCML_E_OPEN { background-color:rgba(140,140,145,0.8); }

/* aufgeklappt / active */
#DCML_E_CONT_INTRO { background-color:rgba(247,101,3,0.95); }

#DCML_E_CONT_LIST,
#DCML_E_CONT_OUTRO { background-color:rgba(140,140,145,0.95);  }

#DCML_E_OPEN:hover,
#DCML[data-status='1'] #DCML_E_OPEN { background-color:rgb(130,130,135);  }

#DCML[data-status='0']:not([data-count='0']) #DCML_E_OPEN,
#DCML[data-status='1'] #DCML_E_CONT { box-shadow: 0px 0px 5px 2px #fff; }

.DCML_OPEN_ANI { animation: dcml_open 500ms 3; }

@keyframes dcml_open {
    0%  {  }
    50% { background-color:rgba(247,101,3,0.95);  }
    100% {  }
}

/* FIX für SAFARI (1.1.2021, Standard für alle (schadet nicht) */

#DCML { width:280px; transition:width 300ms;}
#DCML[data-count='0'], #DCML[data-status='0'] { width:0; }