/*  Shoutbox */
#shoutbox { margin-bottom: 10px; margin-top: 3px; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px; border: 1px solid rgb(42, 42, 42);background-color: rgb(48, 48, 48);border-radius: 0.375rem; }

#shoutbox .head { padding: 8px; background: #6674de; color: rgb(255, 255, 255); border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem; }

#shoutbox.front .head { cursor: pointer; }

#shoutbox.front .head strong{font-size: 13px; padding: 4px 12px;border-radius: 3px;background: rgba(0,0,0,0.1);display: inline-block;font-weight: bolder;}

#shoutbox .head .right { float: right; margin: 0px; font-size: 13px; }

#shoutbox.collapsed .head { opacity: 0.6; }

#shoutbox.collapsed .body { display: none; }

#shoutbox .user { color: rgb(255, 255, 255); }

#shoutbox .panel .sb_pvt { position: absolute; display: inline-block; height: 20px; top: 8px; left: 5px; opacity: 0; transition: opacity 0.3s ease 0s; z-index: 1; }

#shoutbox .panel .sb_pvt.visible { opacity: 1; }

#shoutbox .panel .sb_pvt .closer { color: red; cursor: pointer; }
#shoutbox .data .entry:nth-child(2n){background-color: #ffffff05;}
#shoutbox .panel { border-top: 2px solid rgb(102 116 222); }
#shoutbox form{margin: 5px;}
#shoutbox input.text { margin: 0px; padding: 12px 10px; width: 100%; box-sizing: border-box; border: none; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px inset; font-family: Roboto, sans-serif; background: rgb(32,32,32); font-size: 14px; color: rgb(170, 170, 170); border-radius: 0.375rem; }

#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .data .entry:hover{
    background-color: #00000014;}
#shoutbox .panel.minposts { background: rgb(32, 32, 32); color: rgb(221, 64, 48); }

#shoutbox .panel.blocked { background: rgb(32, 32, 32); color: rgb(221, 64, 48); }

#shoutbox .panel p { margin: 0px; }

#shoutbox .window { overflow-y: scroll; background: rgb(35, 35, 35); }
#shoutbox .window::-webkit-scrollbar {
    width: 3px;
}
#shoutbox .data { display: table; width: 100%; border-top: 2px solid rgba(0, 0, 0, 0.1); font-family: Roboto, sans-serif; font-size: 13px; }

#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row; width: 100%; transition: background-color 0.2s ease 0s; }

#shoutbox .system > .text { color: rgb(255, 162, 0); font-style: italic; }

#shoutbox .entry:nth-child(2n) { background-color: rgba(48, 48, 48, 0.01); }

#shoutbox .entry.new { background-color: rgba(48, 48, 48, 0.1); }

#shoutbox .entry:target { background-color: rgba(48, 48, 48, 0.1); }



#shoutbox .entry:last-child > div { border-bottom: none; }

#shoutbox .entry > div { display: table-cell; padding: 6px; overflow: hidden; }

#shoutbox .avatar img { margin: 0px auto; vertical-align: middle; max-height: 20px; max-width: 20px; cursor: pointer; padding: 2px; border-radius: 4px; }

#shoutbox .user { border-right: 1px solid rgb(42, 42, 42); text-align: right; white-space: nowrap; }

#shoutbox .text { width: 100%; color: rgb(170, 170, 170); word-break: break-word; overflow-wrap: break-word; }

#shoutbox .info { font-size: 11px; color: rgb(170, 170, 170); white-space: nowrap; text-align: right; }

#shoutbox .entry.unread .info::before { display: inline-block; position: relative; top: -2px; margin-right: 10px; height: 4px; width: 4px; content: ""; background: rgba(255, 100, 0, 0.8); border-radius: 10px; }

#shoutbox .info a { color: inherit; }

#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: rgb(170, 170, 170); text-decoration: none; }

#shoutbox .mod:nth-of-type(2) { margin-right: 5px; }

#shoutbox .ip { margin-right: 10px; color: rgb(206, 206, 206); }

#shoutbox .shoutbox-messages { height: 100%; }

#shoutbox .entry.private .text { color: rgb(192, 57, 43); }

#shoutbox .entry::before { content: ""; }

.entry.mention .avatar { box-shadow: red 2px 0px 0px 0px inset; }

#shoutbox .entry code { background-color: rgb(25, 25, 25); border-radius: 3px; font-family: courier, monospace; padding: 0px 3px; }

#shoutbox .user-wrap { display: flex; align-items: center; justify-content: flex-end; }

#shoutbox .input.text:focus, #shoutbox input.text:focus { outline: 0px !important; }

#shoutbox .info, #shoutbox .user { white-space: nowrap; text-align: right; }

#shoutbox .private { color: rgb(192, 57, 43); }

#shoutbox .item-icon { vertical-align: middle; margin-left: 3px; }

<script>
dvz_shoutbox.callbacks['update'].push(function(){
    if ($('#shoutbox .entry.new').length) {
        var audio = new Audio(rootpath + '/images/dvz_shoutbox.mp3');
        audio.volume = 0.5;
        audio.play();
}


}

);
</script>
.panel {
position: relative;
}

.popupsmilesbyanonshare {
    width: 20px;
    height: 20px;
    content: ' ';
    position: absolute;
    right: 4px;
    top: 10px;
    cursor: pointer;
}

/* Popup container */
.popupsmilesbyanonshare {
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popupsmilesbyanonshare .popuptextbyanonshoutbox {
    visibility: hidden;
    width: 250px;
    background-color: #525151;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: -33px;
    left: -257px;
}

/* Popup arrow */
.popupsmilesbyanonshare .popuptextbyanonshoutbox::after {
content: "";
    position: absolute;
    top: 46%;
    left: 100%;
    border-width: 5px;
    border-style: solid;
    border-color: #fff0 #af1f1f00 #03ff3a00 #555555;
}

/* Toggle this class when clicking on the popup container (ZPpviHxiepsswybISdFj and show the popup) */
.popupsmilesbyanonshare .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
 Â to {opacity:1 ;}
}
		
		
		
	
	
		
		
		
		
		
		
		
		
		
		
		
		
		
		


		
		
		
		
		
		
		
		
		s