/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); }
#shoutbox .head { padding: 8px; }
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0 -8px 0 0; font-size: 13px; }
#shoutbox .head .right a { padding: 8px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }
#shoutbox input.text { margin: 0; padding: 10px 8px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #000; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }
#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; border-top: solid 2px rgba(0,0,0,0.1); font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; }
#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }
#shoutbox .entry:target { background-color: rgba(50,200,255,0.1); }
#shoutbox .entry > div { border-bottom: dashed 1px rgba(0,0,0,0.05); }
#shoutbox .entry:last-child > div { border-bottom: none; }

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

#shoutbox .avatar { height: 22px; }
#shoutbox .avatar img { margin: 0 auto; vertical-align: middle; max-height: 20px; max-width: 20px; border: solid 1px rgba(255,255,255,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; }
#shoutbox .user { border-right: solid 1px rgba(0,0,0,0.05); text-align: right; white-space: nowrap; }
#shoutbox .text { width: 100%; color: #555; word-break: break-all; word-wrap: break-word; }
#shoutbox .info { font-size: 11px; color: #AAA; white-space: nowrap; text-align: right; }
#shoutbox .entry.unread .info:before { display: inline-block; margin-right: 10px; height: 4px; width: 4px; content: ''; background: rgba(255,100,0,0.8); border-radius: 10px; vertical-align: middle; }
#shoutbox .info a { color: inherit; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }
#shoutbox  .ip { margin-right: 10px; color: #CECECE; }

.chat-archive-body{
	background:var(--trow-bg);
	border: 1px solid var(--default-border-color);
	border-radius: 0 0 calc(var(--default-border-radius) / 4) calc(var(--default-border-radius) / 4);
	padding: calc(var(--default-padding) / 1);
}

#chatbox {
    background: var(--trow-bg);
    margin: var(--default-margin) 0;
    border: 1px solid var(--default-border-color);
    border-radius: calc(var(--default-border-radius) * .75)
}

.chatbox-title svg,.chatbox-archivelink svg{
	fill: white;
	width:1rem;
	height:1rem;
	margin-right: calc(var(--default-margin) / 4)
}

.chatbox-body{
	padding: calc(var(--default-padding) / 2) calc(var(--default-padding) / 2) calc(var(--default-padding) / 2) calc(var(--default-padding) / 2);
}

#chatbox .window{
	overflow:overlay;
	padding-right:calc(var(--default-padding) / 2)
}
		
.chatbox-row-avatar {
    width: 1.5rem;
    height: 1.5rem;
}

.chatbox-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--default-border-color)
}

.chatbox-row-user {
    margin: 0 calc(var(--default-margin) / 2)
}

.chatbox-row-message {
	flex:1;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
    padding-right: calc(var(--default-padding) * 1);
	word-break:break-word;
}

.chatbox-row {
    display: flex;
    align-items: flex-start;
    padding: calc(var(--default-padding) / 4) calc(var(--default-padding) * .375);;
    border-radius: calc(var(--default-border-radius));
}

.chatbox-row:hover {
    background: var(--body-bg);
}

.chatbox-row:last-of-type {
    border-bottom: none
}



.chatbox-row-info .ip{
	margin-right:calc(var(--default-margin) / 2);
}

.chatbox-info-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: calc(var(--default-margin) / 2);
    transition: 250ms ease-in-out
}

.chatbox-info-btn svg {
    width: 1rem;
    height: 1rem;
    transition: 250ms ease;
    fill: rgba(0,0,0,0.25);
	fill: var(--default-avatar-border2)
}

.chatbox-info-btn.chatbox-edit:hover svg {
    fill: var(--positive)
}

.chatbox-info-btn.chatbox-delete:hover svg {
    fill: var(--negative)
}

#chatbox .panel {
    display: flex;
    /* flex: 1; */
}

#chatbox .panel form,#chatbox .panel input {
    flex: 1;
    width: 100%;
}

#chatbox .panel input {
    background: var(--body-bg);
	margin:calc(var(--default-margin) / 4) 0;
    padding: calc(var(--default-margin) * .625);
    border: 1px solid var(--default-border-color);
    border-radius: calc(var(--default-border-radius) / 2);
    outline: 0;
    transition: 250ms ease;
    color: var(--default-color);
}

#chatbox .panel input::-webkit-input-placeholder {
    font-style: italic
}