div.sidebar {
    display:flex;
    position:absolute;
    right:0px;
    width:200px;
    top:175px;
    flex-direction:column;
    overflow:visible;
    z-index:100;
    padding-right:8px;
}

div.sidebarclosebox {
    display:flex;
    flex:0 0 24px;
    position:relative;
    width:200px;
    justify-content:end;
    border: 1px solid #333;
    border-radius: 5px;
    flex-direction:row;
    margin-bottom:5px;
    z-index:100;
    margin-left:200px;
    background:#000;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.3s forwards; 
}

/*------------sidebar buttons -------------------*/

.sidebarclosebutton {
    display:flex;
    flex:0 0 24px;
    position:absolute;
    right:2px;
    top:0px;
    color:#eee;
    height:24px;
    width:24px;
    font-size:20px;
    line-height:20px;

    filter:drop-shadow(-4px 4px 3px #111);
    align-items: center;
    justify-content: center;
    border:0;
    background:none;
}

.sidebarbutton {
    display:flex;
    flex:0 0 18px;
    position:absolute;
    right:2px;
    top:0px;
    color:#eee;
    height:18px;
    width:18px;
    font-size:14px;
    align-items: center;
    justify-content: center;
    border:0;
    background:none;
}

.sidebarbutton:hover, .sidebarclosebutton:hover {
    color:#777;
}

/*----------sidebar message box / content---------*/

div.sidebarbox {
    display:flex;
    position:relative;
    width:200px;
    border: 1px solid #333;
    border-radius: 5px;
    flex-direction:column;
    background:#000;
    filter:drop-shadow(-4px 4px 3px #111);
    margin-bottom:5px;
    z-index:100;
    margin-left:200px;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.3s forwards;  
}

@-webkit-keyframes slide {
    100% { margin-left: 0; }
}

@keyframes slide {
    100% { margin-left: 0; }
}

div.sidebartitle {
    padding:3px 0px 4px 0px;
    margin: 0px 4px 0px 4px;
    font-weight:bold;
    font-family:"Tahoma";
    font-size:12px;
    color:#5fd4f1;
    width:192px;
    background-color:#000;
    text-transform: uppercase;
    user-select:none;
    box-sizing: border-box;
    border-top-left-radius: 3px;
    border-top-right-radius:3px;
    /*border-bottom:1px solid #79c9dd;*/
}

div.sidebarinfo {
    padding:4px 4px 4px 8px;
    font-family:'Courier New';
    font-size:14px;
    font-weight:bold;
    color:#eee;
    width:200px;
    user-select:none;
    box-sizing: border-box;
}