* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

a { color: var(--link) }
body { color: var(--body) }
button { color:var(--lighttext); }
#external_wrap { background: var(--chatbg); }

/* background color for box element */
.background_chat { background: oklch(from var(--overall-bg) calc(l + 0.2) c h / alpha) }
.background_login { background: var(--overall-bg) }
.background_box { color: var(--lighttext); border:none;}
#input_table, #input_private { background: var(--chatbgbox); border-radius: 1rem; border: 2px solid hsl(from var(--overall-bg) h s calc(l + 25) / alpha); overflow: hidden; }
.background_menu_footer { background: var(--overall-bg) }
.background_menu_footer i, #chat_panel div div i, #tools_panel div i { color: oklch(from var(--overall-bg) 90% c h / alpha) }
i.logout_button { color: red; }
.panels { background: var(--overall-bg) url('themes/Default/images/grill.png') center center / cover; background-blend-mode: luminosity; padding: 1rem 1.5rem; box-sizing: border-box; }
#chat_error { background: hsl(from var(--chatbgbox) h s l / 100%) }
#inner_header, #header_login  { background: var(--headerimg) left center/auto 100% no-repeat }

/* chat logs switch colors */
#show_chat > li:nth-child(odd):not(.ad, .request, .join, .exit) {background: var(--chat-odd) }
#show_chat > li:nth-child(even):not(.ad, .request, .join, .exit) {background: var(--chat-even) }

.ch_logs { border-bottom:none;}

/* separator colors */
.user_separator { border-bottom: 1px solid var(--separator); }
.user_option_separator { border-bottom: 1px solid var(--separator); }
.top_separator:not(:first-of-type) { border-top: 2px solid oklch(from var(--overall-bg) 90% c h / alpha); }
.right_separator { border-right: 1px solid var(--separator); }
.bottom_separator { border-bottom: none; }
#closed hr, #open hr { border: none; border-top: 1px solid var(--separator); }

/* user list drop down colors */
.user_option_list { background:var(--button-bg); color:var(--lighttext); }

/* button and element colors */
.sub_button { background: var(--button-hover-bg); color: var(--lighttext);}
#submit_button { background: var(--button-hover-bg); border-radius: 0 1rem 1rem 0; } /* this is main button send */
.sub_element { background: var(--button-bg); color: var(--lighttext);}
.empty_element { background: var(--emptyel); color: var(--lighttext); }
.selected_element { background: var(--button-sel-bg); color: var(--darktext); }
.sel { color: var(--lighttext) !important; }
.hover_element:hover { background: var(--button-hover-bg); color: var(--lighttext)}

/* special colors and sub colors */
.error { color: red }
.success { color: green }
.away { color: oklch(70% 0 0 / 0.4); text-shadow: none !important; }
.my_notice { padding: 3px }

li.alert > div.my_text > p > .my_notice, li.alert2 > div.my_text > p > .my_notice, li.join > div.my_text > p > .my_notice, li.exit > div.my_text > p > .my_notice { background: hsl(from var(--mynotice) h s l / 0%) }

.room_userin { color: var(--lighttext); width: 2.5ch; text-align: right}
.hide_private_title { color: #ccc; }
.wrap_command:hover { background: hsl(132, 98%, 42%) !important; }
.tooltip:hover:before, .tooltip2:hover:before, .tooltip3:hover:before { border-color: var(--chatbg) transparent;}
.tooltip:hover:after, .tooltip2:hover:after, .tooltip3:hover:after { background: none repeat scroll 0 0 var(--chatbg); color: var(--lighttext);}

/* private chat color message */

.target_private { --_p: 100%; border-bottom-right-radius: 0 0 !important; place-self: end; }
.hunter_private { --_p: 0; border-bottom-left-radius: 0 0 !important; place-self: start; }

/* inside chat color */
.datechat {color: hsl(from var(--lighttext) h s l / 40%) }
.voted::before { font-family: 'Font Awesome 7 Free'; font-weight: 600; content: '\f772'; color: yellow; padding-right: 6px; }
.voted.hit::before {color: limegreen }
.voted.miss::before {color: red }
.voted.kill::before {color: gray }
.me {color: var(--col-me) !important; background: hsl(from var(--col-me) h s calc(l + 50)) !important;}
.me span.username { text-shadow: none; }
.me span.username::after { content: none }
.alert {color:var(--lighttext) !important; background: red !important; font-family: 'Bold'; font: 1.4em 'Bold'}
.alert2 {color: var(--darktext) !important; background: gold !important; font-family: 'Bold'; font: 1.4em 'Bold'}
.reqopen {color: var(--darktext) !important; background: greenyellow url('/img/mic.png') 1rem center/28px 35px no-repeat !important }
.reqclosed { color: var(--darktext) !important; background: salmon url('/img/mic.png') 1rem center/28px 35px no-repeat !important }
.request { color: var(--darktext) !important; background: navajowhite url('/img/micplus.png') 1rem center/ contain no-repeat !important }
.reqplay { color: var(--darktext) !important; background: pink url('/img/nowplaying_black.png') 1rem center/ contain no-repeat !important; width: 90%; margin: 5px 0; border-radius: 0 1em 1em 0;}
.sms { color: var(--darktext) !important; background: paleturquoise url('/img/mobilephone.png') 1rem center/ contain no-repeat !important }

.global {    color: var(--darktext) !important;
    background: url('/img/speaker.png') left center/35px 35px no-repeat, 
                    linear-gradient(hsl(from var(--colsys) h s calc(l - 5) / alpha) 0%, hsl(hsl(from var(--colsys) h s calc(l - 5)) / 80%) 5%, transparent 40%) no-repeat !important;
    border-top: 2px solid var(--separator);
    margin: 5px 5px 5px 10px !important}

.signup {color: var(--darktext) !important;
font-family: 'Bold' !important;
    background: url('/img/chat-signup.png') left center/35px 35px no-repeat,
                    linear-gradient(90deg, var(--signup) 0%, hsl(from var(--signup) h s l / 20%) 45%, transparent 60%) no-repeat !important;
    margin: 0px !important}

li.ad {
    background: blue !important;
    color: var(--lighttext);
}

li.ad a {
    color: var(--lighttext)f;
}

.join {color: var(--darktext) !important;
        font-family: 'Bold' !important;
        background: url('/img/chat-join.png') left center/auto 150% no-repeat,
            linear-gradient(90deg, var(--join) 0%, hsl(120 100% 50% / 20%) 45%, transparent 60%) no-repeat !important;
        margin: 5px !important;
}

.exit {color: var(--darktext) !important;
        font-family: 'Bold' !important;
        background: url('/img/chat-exit.png') -8px center/auto 150% no-repeat,
            linear-gradient(90deg, var(--exit) 0%, hsl(0 100% 50% / 20%) 45%, transparent 60%) no-repeat !important;
        margin: 5px !important;
}
.poll, .pollresult {color: var(--lighttext) !important;
background: url('/img/poll.png') .6rem top/42px 42px no-repeat,
linear-gradient(180deg, var(--poll) 0%, hsl(from var(--poll) h s l / 40%) 40%, transparent 60%) no-repeat,
hsl(from var(--poll) h s calc(l - 35) / alpha) !important;
    border-top: 2px solid var(--poll);
    margin: 0px !important;
    height: max-content;
}

.poll span.votes {
    display: block;
}
.poll button {
    background: red !important;
    padding: 0 0.5rem;
    font: 1rem 'Bold';
    cursor: pointer;
}
.poll button:not(:last-of-type) {
    margin-right: 0.1rem;
}
.poll button.pollclose {
    margin-left: 0.1rem;
}
.poll button:last-of-type {
    border-radius: 0 0.5rem 0.5rem 0;
}
.poll button:first-of-type {
    border-radius: 0.5rem 0 0 0.5rem;
}
.poll button:first-of-type:last-of-type {
    border-radius: 0.5rem;
}
.poll button:first-of-type:last-of-type {
    border-radius: 0.5rem;
}

.pollresult > div.my_text > p, .questionresult > div.my_text > p {
    line-height: 1em;
    font-family: 'Regular' !important;
}

.question, .qresult {color: var(--lighttext) !important;
    background: url('/img/quiz.png') .6rem top/42px 42px no-repeat,
                    linear-gradient(180deg, var(--question) 0%, hsl(from var(--question) h s l / 40%) 45%, transparent 60%) no-repeat, hsl(from var(--darktext) h s 25% / alpha) !important;
    border-top: 2px solid red;
    box-shadow: 3px 3px 3px var(--question);
    margin: 0px !important;
}

.poll, .question {
    font-family: 'Bold' !important;
    position: sticky !important;
    top: 0px;
    z-index: 11;
}

.reqopen, .reqclosed, .request, .sms, .alert {
	border-radius: 20px !important;
	font-family: 'Bold' !important;
	margin: 5px !important;
	}

.private { color: var(--col-pr1); background: hsl(from var(--col-pr1 h s calc(l + 50))) }
.private_reply { background: var(--col-pr4); color:var(--lighttext);}
.seen { color: var(--col-sn1); background: var(--col-sn2);}
.delete_log, .logs_date {color: var(--col-del1);}

/* user color and special user color */
.system { color: var(--col-sys) !important;}
.guest { color: var(--col-user) }
.user { color: var(--col-user) }
.vip { color: var(--col-vip) }
.modo  { color: var(--col-modo) !important;}
.admin{ color: var(--col-admin) }
.sadmin { color: var(--col-sadmin) }

/* color picker and tools bar */

.bar_options:not(:first-of-type) { padding-inline-start: 0.5rem; border-left: 2px solid var(--separator) } /* change the bar element separator */
#picker_box, #list_emoticon { background: var(--overall-bg); border: 2px solid white; } /* change the background color of box */
.sel_item { background: var(--emptyel) ;} /* change background of element when selected on bar */
.pick_color, #smile_content, .wrap_picker { border-left:1px solid var(--tooltip); border-bottom:1px solid var(--separator); border-top:1px solid var(--tooltip); border-right:1px solid var(--separator); } /* change border of element and chatbgement */
#smile_content { background: var(--overall-bg); } /* change background of emoticon content */

/* user list hover name */

.usertarget:hover { color:var(--lighttext) !important; opacity:1; }