:root {
	--chatadheight: 70px;
	--red: #992929ff;
}

@font-face {
	font-family: 'Regular';
	src: url('/font/bould-regular-webfont.woff') format("woff");
	}
@font-face {
	font-family: 'RegularItalic';
	src: url('/font/bould-regularitalic-webfont.woff') format("woff");
	}
@font-face {
	font-family: 'Bold';
	src: url('/font/bould-bold-webfont.woff') format("woff");
	}

@keyframes mention {

	0%, 100% {
		
	}  
	
	50% {
		background: rgb(255 255 255 / 0.1);
		color: yellow;
	}
}

html { 
	margin: 0em; 
	padding: 0; 
	height:100%;
	width:100%;
	font: 16px 'Regular';
	-webkit-font-smoothing: antialiased;
}
a {
	outline:none;
}
body { 
	margin:0;
	padding: 0; 
	font-family: 'Regular', sans-serif,'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica,sans-serif;
	font-size:15px;
	width:100%;
	height:100%;
}
strong {
	font-family: 'Bold';
	font-weight: normal;
}
input:focus, select:focus, textarea:focus, button:focus {
	outline:0;
}
p {
	padding:0;
	margin:0;
}
img {
	border:0px;
}

h1, h2, h3{ 
	margin: 0; 
	padding: 0; 
}
h2 {
	font-size:1.5em;
	margin-bottom:5px;
}
ul {
	margin: 0;
	padding: 0;
	list-style:none;
}
li {
	list-style:none;
}
button { 
	border:none;
    outline: none !important; 
}
textarea, input{
	font-size:14px;
	font-family: 'Regular', sans-serif,"trebuchet ms","lucida grande","lucida sans unicode",arial,helvetica,sans-serif;
}
#wrap_login {
	width:100%;
	height:100%;
}
.fa {
	cursor:pointer;
}
.icon_bottom_out {
	margin-top:5px;
}
.icon_priv {
	margin-right:10px;
	font-size:1.8em;
	margin-top:2px;
}
.icon_smile {
	font-size:1.2em;
	margin-top:1px;
	margin-left:3px;
}
#private_close {
	float:right;
}
#private_count{
	width:20px;
	height:20px;
	background:red;
	display:none;
	position:absolute;
	text-align:center;
	font-size:13px;
	font-family: 'Bold';
	border-radius:10px;
	border:1px solid #fff;
	top:35%;
}
#chat_theme {
	height:100%;
	width:100px;
	float:left;
}
.option_list {
    clear: both;
    width: calc(100% - 50px);
    display: none;
    margin-left: 50px;
    margin-top: -6px;
}
.option_list li {
	width:96% !important;
	padding: 3px 2%;
	cursor:pointer;
}
.option_list ul {
	height:auto !important;
	clear:both;
	width:100% !important;
	margin:5px 0;
	border-radius:6px;
}
.option_list ul p {
	padding-left:5px;
}
.username {
	cursor:pointer;
	text-shadow: 2px 2px 2px black;
}
.username::after {
	content: ':';
	padding-right: 0.5ch;
}
.user_option_separator:last-child { 
	border-bottom:none; 
}
.open_user {
    overflow:hidden;
    height: 40px;
    width: 100%;
    cursor:pointer;
	display: flow-root;
}

.open_user p {
    height: 20px;
	padding-left: 25px;
	padding-top: 5px;
    margin: 5px 0 5px 20px;
	padding-bottom: 5px;
    border-radius: 0 15px 15px 0;
	text-shadow: 2px 2px 2px black;
	background-color: var(--button-bg);
}
.open_user p i {
	text-shadow: none !important;
}
.open_user p.away::before {
	padding-right: 0.5rem;
    font: normal 900 1em/1 'Font Awesome 7 Free';
	color: oklch(70% 0 0 / 0.4);
	content: '\f7b6';
}
.addon_button, .addon_button a, #submit_button, .pv_name, #user_list li , .roombutton {
	cursor:pointer;
}
#external_wrap {
	width:100%;
	height:100%;
}
.clear {
	width:100%;
	height:1px;
	clear:both;
}
#header {
	width:100%;
	height:60px;
	margin:0 auto;
	position:relative;
	top:0;
	padding:10px 0;
}
#inner_header {
	width:100%;
	margin:0 auto;
	height:100%;
	padding:0 8px;
	text-align: right;
}
#inner_header a {
	color: var(--link);
	font-size: 16px;
	margin-inline-end: 1rem;
}
#inner_header img {
	height:100%;
	display:block;
	width:auto;
	float:left;
}
#asking {
	float:right;
	width:150px;
}
#asking p {
	padding-top:15px;
	padding-left:10px;
}
#wrap_topic {
	container-type: inline-size;
}
#room_topic {
	width:100%;
	font-size:17px;
	font-weight: bold;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	background: url(/ads-imgs/bmp1.svg) left center / contain no-repeat;
	padding-inline-start: cqh(100%);
}



#room_topic, #main_emoticon, #main_emoticon i, .top_option i {
	color: oklch(from var(--overall-bg) 90% c h / alpha);
}
#main_error {
	height:15px;
	width:50%;
	float:right;
	margin-top:-26px;
	margin-bottom:3px;
	z-index:2000;
	display:none;
	text-align:right;
}
#main_input {
	height:38px;
	width:100%;
	margin:4px 0 6px 0;
}
#content {
	height:100%;
	padding:0;
	font-size:16px;
	flex: 12 1 1rem;
}
#inside_group , #input_table, #td_group {
	width:100%;
	height:100%;
}
#inside_group , #input_table, #td_group, #inputt_left, #inputt_right, #td_input {
	border-collapse: collapse;	
	padding:0;
}
#input_table {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
#input_table.rev {
	flex-flow: row-reverse nowrap
}
#input_table i {
	flex: 0 0 max-content;
	padding-inline: 0.5rem;
	font-size:24px;
	z-index:1;
	position:relative;
}
#send_image {
	border-radius:0px;
}
#emo_item i , #send_image i{
	opacity:0.4;
}

.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
#container_input_top{
	padding:10px 10px 0px 10px;
}
#submit_button {
	height:100% !important;
	font-family: 'Bold';
	box-shadow:none !important;
	padding:0;
	border:none !important;
	font-size:18px;
	flex: 1 0 8ch;
}
#container_chat {
	margin:0 auto;
	padding:8px;
	border-radius:10px;
}
#chat_left {
	width:100%;
	float:left;
}
#container_show_chat {
	width: 100%;
	height: 100%;
	position:relative;
}
#show_chat {
	width:100%;
	height:100%;
	overflow:auto;
	overflow-x: hidden;
}
#wrap_chat {
	height:100%;
	width:100%;
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5rem 0;
}
#wrap_chat.rev {
	flex-flow: column-reverse nowrap;
}
#wrap_chat.rev #container_input {
    flex-flow: column-reverse nowrap;
}
#container_input {
    display: flex;
    flex-flow: column nowrap
}
#wrap_show_chat {
	height:78%;
	overflow:hidden;
}
#show_chat ul {
	width:100%;
	z-index:1;
	position:relative;
	display: flex;
	flex-flow: row wrap;
	gap: 0 5rem;
}
#wrap_chat.rev #show_chat ul {
	flex-flow: column-reverse nowrap;
}
#show_chat ul.res {
	padding-bottom: 5px;
}
#show_chat ul.res strong {
    padding-inline-end: 0.75ch ;
}
#show_chat ul.res li.ans {
	padding-block-start: 0.25rem;
	font: 1em/1 'Bold'
}
#show_chat ul.res li.ans::before {
	color: red;
	content: 'The Correct Answer Was:';
	padding-inline-end: 1ch;
}
.ch_logs {
	padding: 0.25rem 0.25rem 0.5rem 0.5rem;
	word-wrap: break-word;
}
.avatar_chat {
	display:block;
	height:40px;
	width:auto;
	clip-path: circle();
	overflow:hidden;
}
.my_avatar {
	float:left;
	width:50px;
}
.my_text {
	display: flex;
	flex-flow: column nowrap;
	line-height: 1.1;
	flex: 1 1 1rem;
	padding-inline-start: 0.5rem;
}
.ch_logs.join .my_text {
	flex-flow: row;
}
#menu_container_inside {
	margin:0 auto;
	height: 100%;
}
.delete_log {
font-family: 'Bold';
cursor:pointer;
padding:0 4px;
}
.my_notice {
	padding:3px;
}
.advice {
	font-size:12px;
}
.system, .usystem {
	width:98%;
	font-size:12px;
	font-family: 'Regular' !important;
}
#chat_error {
	width:98%;
	min-height:20px;
	margin-bottom:-30px;
	z-index:21;
	position:absolute;
	padding:5px 1%;
	display:none;
	bottom: 30px;
}
.chat_emoticon {
	cursor:pointer;
}
.public {
	font-size:15px;
}
.admin, .sadmin, .modo, .user, .vip, .away, .guest{
	font-family: 'Bold';
}
.bold {
	font-family: 'Bold';
}
.datechat2 {
	font-size:13px;
}
.datechat {
	font-family: 'Bold';
    padding-inline-end: 0.5rem;
}
.addon_button, .test_button, .other_panels {
	float:left;
}
.private_reply {
	float:right;
	cursor:pointer;
	padding:0 20px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	font-family: 'Bold';
	margin-bottom:-8px;
}
#full_form_submit {
	width:100%;
	height:auto;
	clear:both;
}
#fsubmit_control {
	width:46%;
	float:right;
	min-width:210px;
	max-width:330px;
}
#fsubmit_rules {
	width:46%;
	float:left;
	min-width:210px;
	max-width:330px;
}
.agree_rules {
	margin-top:30px;
	float:left;
	margin-bottom:10px;
}
.agree_normal {
	margin-top:14px;
	margin-bottom:0;
}
.rules_p {
	float:left;
	margin-top:26px;
	font-size:16px;
	margin-left:5px;
	margin-bottom:10px;
}
.rules_p_normal {
	margin-top:12px;
	margin-bottom:0;
}
.rules_link {
	text-decoration:none;
	cursor:pointer;
}
#rules_box h4{
 font-size:16px;
}
#rules_box ul {
	padding:0 10px;
}
#rules_box ul li {
	list-style:decimal;
	margin-bottom:10px;
}
#rules_box strong {
	font-size:15px;
	font-family: 'Bold';
}
#rules_box p {
	font-size:14px;
}
#menu img {
	width:40px;
	height:auto;
}
#menu {
	width:100%;
	height:100%;
}
#container_login {
     position:absolute;
     max-width:620px;
	 width:620px;
     height:auto;
     z-index:15;
     top:50%;
     left:50%;
	 padding:20px 20px 20px 20px;
     margin:-280px 0 0 -325px;
	 border-radius:10px;
}
#container_kicked {
     position:absolute;
     width:330px;
     height:auto;
     z-index:15;
     top:50%;
     left:50%;
	 padding:20px;
     margin:-165px 0 0 -180px;
	 border-radius:10px;
}
#header_login {
	width:95%;
	height:60px;
	margin:0 auto;
	padding-bottom:6px;
}
#header_login img {
	height:100%;
	width:auto;
}
#content_login {
	max-width:95%;
	height:auto;
	margin:0 auto;
	padding-top:5px;
}
#content_login_left {
	width:46%;
	float:left;
	min-width:210px;
	max-width:330px;
}
#content_login_right {
	width:46%;
	float:right;
	height:auto;
	min-width:210px;
	max-width:330px;
}
#login_member_online {
	padding-top:10px;
}
#login_member_online a {
	color: hsl(from var(--link) h s calc(l + 45) / alpha);
}
.member_login {
	padding-top:5px;
}
#login_welcome {
	margin-top:10px;
	padding-bottom:10px;
}
#login_gage {
	height:30px;
}
.login_select {
	width:100%;
	padding:9px;
}
.login_select option {
	width:100%;
	border:none;
	padding-left:0;
	padding-right:0;
}
.login_label {
	padding:6px 0 2px 0;
	font-size:16px;
	clear:both;
}
#login_welcome  p {
	margin:5px 0;
}
#login_sexe {
	width:48%;
	float:left;
}
#login_age {
	width:48%;
	float:right;
}
#login_control {
	width:100%;
	height:auto;
}
#content_kicked {
	width:95%;
	height:auto;
	margin:0 auto;
	padding-top:5px;
	text-align:center;
}
#content_kicked h1 {
	margin-top:30px;
}
#content_kicked h2 {
	margin-top:20px;
}
#kicked_button, #activate_button, #resend_button {
	width:50%;
	margin:0 auto;
	height:40px;
	font-size:20px;
	margin-top:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:5px;
	cursor:pointer;
}
#activate_button {
	width:48%;
	float:left;
}
#resend_button {
	width:48%;
	float:right;
}
#kicked_button p, #activate_button p, #resend_button p {
	padding-top:8px;
}
.email_verification {
	padding:5px 0;
}
.reason {
	font-size:18px;
	margin-top:5px;
}
.login_form {
	width:100%;
	height:auto;
	margin:0 auto;
}
.input_data {
	width:94%;
	padding:5px 3%;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:none;
	background: var(--extwrap) !important;
	font-size:22px;
}
.forgot {
	padding-top:5px;
	padding-bottom:5px;
}
#login_button, #register_button, #recovery_button, #newpass_button, .bridge_button, .bridge_button2 {
	margin-top:18px;
	width:100%;
	text-align:center;
	font-family: 'Bold';
	font-size:18px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	cursor:pointer;
}
.bridge_button2 {
	margin-top:25px;
}
.bridge_button {
	margin-top:8px;
}
#back_login, #guest_button, #guest_ok {
	margin-top:43px;
	height:40px;
	width:100%;
	text-align:center;
	font-family: 'Bold';
	font-size:18px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	cursor:pointer;
	clear:both;
}
#login_register, #login_login{
	margin-top:8px;
	height:40px;
	width:100%;
	text-align:center;
	font-family: 'Bold';
	font-size:18px;
	float:right;
	border-radius:5px;
	cursor:pointer;
}
#login_guest {
	margin-top:10px;
	height:30px;
	width:100%;
	text-align:center;
	font-family: 'Bold';
	font-size:16px;
	cursor:pointer;
}
#login_button, #register_button, #recovery_button, #newpass_button  {
	float:left;
}
#login_button p, #register_button p, #recovery_button p, #back_login p, #newpass_button p, #guest_button p, #guest_ok p, .bridge_button p, .bridge_button2 p, #login_register p, #login_login p{
	padding-top:9px;
}
#guest_button, #guest_ok {
	margin-top:8px;
	clear:both;
}
#login_error {
	width:100%;
	margin:0 auto;
	height:auto;
}
#login_error_inside {
	font-size:16px;
}
.recover_ok {
	text-align:center;
}
.open_smilies {
	float:none;
	width:auto;
	height:20px;
}
.tooltip {
    display: inline;
    position: relative;
}
.tooltip:hover:after {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    bottom: 50px;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    width: auto;
    z-index: 98;
}
.tooltip:hover:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-style: solid;
    border-width: 6px 6px 0;
    bottom: 44px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
.tooltip2 {
    display: inline;
    position: relative;
}
.tooltip2:hover:after {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    bottom: -26px;
    content: attr(title);
    right: 20%;
    padding: 5px 15px;
    position: absolute;
    width: auto;
    z-index: 98;
}
.tooltip2:hover:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-style: solid;
    border-width: 0 6px 6px;
    bottom: 0px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
.tooltip3 {
    display: inline;
    position: relative;
}
.tooltip3:hover:after {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    bottom: -26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    width: auto;
    z-index: 98;
}
.tooltip3:hover:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-style: solid;
    border-width: 0 6px 6px;
    bottom: 0px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
.forgot_password {
	cursor:pointer;
	text-decoration: underline;
}
#show_chat_ads {
	width:100%;
	height:auto;
	z-index:2;
	position:absolute;
	display:none;
	overflow:hidden;
}
 .ads2, .ads3 {
	display:none;
}
.avatar_userlist {
	display: block;
	height: 100%;
	aspect-ratio: 1;
	float: left;
	-moz-border-radius: 20px;
	/* -webkit-border-radius: 20px; */
	/* border-radius: 20px; */
	overflow: hidden;
	cursor: pointer;
	clip-path: circle();
}
.chat_avatar_wrap {
	cursor:pointer;
}
#logout_box {
	width:280px;
	height:auto;
	border-radius:10px;
	border: 2px solid white;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-150px;
	margin-left:-150px;
	z-index:11000;
	padding:10px 10px 20px 10px;
	display:none;
}
.close_logout {
	display:block;
	float:right;
	margin-right:5px;
	margin-top:5px;
}
.logout_h2 {
	padding-top:5px;
	margin-bottom:15px;
}
.logout_text {
	padding-top:10px;
}
.out_button {
	font-size:18px;
}
#menu_container {
	height:50px;
}
#wrap_footer {
	height:auto;
	width:100%;
	position:fixed;
	bottom:0;
	left:0;
	z-index:200;
}
#my_menu {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	gap: 0 1rem;
	width:100%;
	height:100%;
	justify-content: center;
}
#my_menu i {
    font-size: 30px;
}
#my_menu i::after {
    display: block;
    font: 0.9rem 'Regular';
	justify-content: center;
}
.box_menu, .box_menu div {
    display: flex;
    align-items: flex-end;
}
i.menu_header::after {
    content: 'MENU';
}
i.notify_chat::after {
    content: 'OPTIONS'
}
i.ic_play::after {
    content: 'PLAYER'
}
i.ic_vol::after {
    content: 'VOLUME'
}
i.fa-id-card::after {
	content: 'PROFILE';
}
i.fa-user-pen::after {
	content: 'PERSONAL';
}
i.fa-users::after {
	content: 'SOCIAL';
}
#my_menu i.fa-sign-out-alt::after {
	content: 'LOG OUT';
	font: 0.9rem 'Bold';
	display: block;
}
#my_menu i.fa-sign-out-alt {
    width: max-content;
	align-items: center;
}
ul.background_chat li i {
    font-size: 20px !important;
    padding-inline-end: 0.5rem !important
}
.logout_button {
    color: red;
}
.menu_drop {
	position:absolute;
	width:200px;
	height:auto;
	bottom:100%;
	z-index:100000;
	border-radius:8px;
	overflow:hidden;
	display:none;
	border: 2px solid var(--separator);
	box-shadow: 5px 5px 5px black;
}
.head_li {
	text-decoration:none;
	font-size:18px;
	padding:8px 0 8px 8px;
	width:192px;
	display:block;
	height:auto;
	cursor:pointer;
}
.head_li a {
	color:inherit;
	text-decoration:none;
	display:block;
	width:100%;
	height:100%;
}
.login_facebook {
	width:100%;
	height:auto;
	margin-top:20px;
}
.fbl_button {
	background:#3b5998;
	color:#fff;
	font-size:17px;
	height:40px;
	width:100%;
	border-radius:5px;
	margin-top:25px;
	cursor:pointer;
}
.fbl_button2 {
	background:#3b5998;
	color:#fff;
	font-size:17px;
	padding:8px 0px;
	width:100%;
	border-radius:5px;
	margin-top:8px;
	cursor:pointer;
}
.fbl_button:hover {
	background:#1f3a72;
}
.ficon_login {
	width:25px;
	background:none !important;
	color:#fff !important;
}
.hover_element:hover, button:hover {
	transition: 0.5s;
}
#upload_box {
	width:280px;
	height:auto;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-160px;
	z-index:100000;
	border-radius:8px;
	border: 2px solid white;
	padding:5px;
	display:none;
}
#upload_header {
	height:25px;
	width:100%;
	padding-bottom:20px;
}
.close_upload {
	font-size:25px;
	float:right;
}
#upload_control {
	width:100%;
	height:auto;
	padding-bottom:8px;
}
#upload_content {
	width:100%;
	height:auto;;
}

.fileUpload {
    position: relative;
    overflow: hidden;
	text-align:center;
	height:auto;
	width:100%;
	font-size:25px;
	font-family: 'Bold';
	padding:8px 0;
	border-radius:8px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
#upload_span {
	width:100%;
	height:50px;
}

#warnupload {
	height:20px;
	width:100%;
	font-size:18px;
	display:none;
	text-align:center;
}

.progress {
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1) inset;
    height: 20px;
    overflow: hidden;
	width:100%;
	display:none;
	margin-top:4px;
}
.bar {
    background-color: #5cb85c;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #fff;
    float: left;
    font-size: 12px;
    height: 100%;
    line-height: 20px;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 0;
}
.progress_mobile {
	font-size:40px;
	text-align:center;
	display:none;
}
#element_progress {
	height:22px;
	width:100%;
}
#display_file {
	text-align:center;
}
#private_input {
	margin-bottom:5px;
}
#private_content {
	width:96%;
	float:left;
	border:none;
	height:100%;
	padding:0 2% 0 2%;
}
#p_input {
	height:100%;
}
#private_left {
	width:75%;
	height:100%;
}
#priv_inside, #submit_private, #input_private, #private_input {
	width:100%;
	height:100%;
	min-height:35px;
}
#priv_inside, #private_left, #private_right, #p_input, #input_private, #p_image {
	border-collapse:collapse;
	padding:0;
}
#p_image {
	width:35px;
	height:35px;
	text-align:center;
	font-size:24px;
}
#input_private {
	border-radius:5px;
	overflow:hidden;
}
#p_image i {
	opacity:0.4;
}
#private_input_wrap {
	width:100%;
	height:35px;
}
#private_right {
	width:25%;
}
#player_content {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.nofb {
	margin-top:25px !important;
}
.option_list ul {
	overflow:hidden;
}
.a_ico { color:#999 !important; }
.sa_ico { background: -webkit-radial-gradient(white, yellow, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.m_ico { color:#888 !important; }
.v_ico { color:#888 !important; }

.boy { color:#0066ff; }
.girl { color:#ff66ff;}

.open_user p i {
	float:right;
	padding-inline-end: 0.25rem;
	font-size:18px;
}

#poll-result {
	display: none
}

span.answer {
    display: inline-block;
    padding-right: 20px;
}

/* general colors */
a {color: var(--link) }
body {color: var(--body) }
button { color: var(--body); }
#external_wrap { background: var(--extwrap) center center/100% auto no-repeat;}

/* background color for box element */
.background_chat { background: var(--chatbg); }
.background_login { background: var(--chatbg);}
.background_box { background: hsl(0 0 0 / 12.5%) ; color: var(--chatbgbox); border: none;}
#tools_panel .background_box { background: hsl(0 0 0 / 50%) }
.background_menu_footer { background: var(--chatbgbox); }
.panels { background: var(--chatbg);}
#chat_error { background: var(--chatbgbox); }
#inner_header, #header_login  { background: var(--headerimg) left center/auto 100% no-repeat }

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

.ch_logs { border-bottom:none;}

/* user list drop down colors */
.user_option_list { background: var(--chatbg); color:#fff; }

/* button and element colors */
.sub_button { background: var(--separator); color:#fff; padding: 0.5rem 0; border-radius: 0.5rem;}
#submit_button { background: var(--separator); } /* this is main button send */
.sub_element { background: var(--chatbg); color:#fff;}
.empty_element { background: var(--emptyel); color:#fff; }
.selected_element { background: var(--emptyel); color:#fff; }
.hover_element:hover { background: var(--emptyel); color:#fff}

/* ads background */
#show_chat_ads { background: var(--adbg) !important;}

/* special colors and sub colors */
.error { color: red;}
.success { color: green;}
.away { color: #3b3b3b; }
.my_notice { padding: 3px; margin: 0 0.5rem; animation: mention 2s 10; }
.my_notice::before {
	content: '↝';
	padding-inline-end: 0.25rem;
}
.my_notice::after {
	content: '↜';
	padding-inline-start: 0.25rem;
}

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: transparent }

li:not(.join) span.time {
	display: none;
}

li.ch_logs span.time::before {
	font-family: 'Font Awesome 7 Free';
	font-weight: 600;
	content: '\f017';
	padding-inline-end: 1ch;
}

li.ch_logs span.time::after {
	content: ' |';
	padding-inline-end: 0.5ch;
}

li.join p {
	display: inline;
}

.sub_color2 { color: var(--sub2) }
.sub_color { color: hsl(from var(--extwrap) h 20 calc(l + calc(var(--multiplier) * 45)) / alpha) }
#content_login .sub_color { color: oklch(from var(--chatbg) calc(l + 0.2) c h / alpha); }

.tooltip:hover:before, .tooltip2:hover:before, .tooltip3:hover:before { border-color: var(--tooltip) transparent;}
.tooltip:hover:after, .tooltip2:hover:after, .tooltip3:hover:after { background: none repeat scroll 0 0 var(--tooltip); color: #fff;}

/* private chat color message */

.target_private { color: var(--lighttext); background-color: var(--col-pr1) }
.hunter_private { color: var(--darktext); background-color: var(--col-pr2)}

/* inside chat color */
.datechat {color:#666;}
.voted::before { font-family: 'Font Awesome 7 Free'; font-weight: 600; content: '\f772'; color: #FF0F; padding-right: 6px; }
.voted.hit::before {color: #0F0}
.voted.miss::before {color: #F00}
.voted.kill::before {color: #888}
.me {color: #003366 !important; background: var(--col-me) !important;}
.alert {color: #fff !important; background: var(--col-al1) !important; font: 1.4em 'Bold' }
.alert2 {color: #000 !important; background: var(--col-al2) !important; font: 1.4em 'Bold' }
.reqopen {color: #000 !important; background: var(--col-reqo) url('/img/mic.png') left center/28px 35px no-repeat !important }
.reqclosed { color: #000 !important; background: var(--col-reqc) url('/img/mic.png') left center/28px 35px no-repeat !important }
.request { color: #000 !important; background: var(--col-req) url('/img/micplus.png') left center/35px 35px no-repeat !important }
.reqplay { color: #000 !important; background: var(--col-reqp) url('/img/nowplaying_black.png') left center/35px 35px no-repeat !important; width: 90%; margin: 5px 0; border-radius: 0 1em 1em 0;}
.sms { color: #000 !important; background: var(--col-sms) url('/img/mobilephone.png') left center/35px 35px no-repeat !important }

.global {    color: #000 !important;
    background: url('/img/speaker.png') left center/35px 35px no-repeat, 
                    linear-gradient(var(--global) 0%, var(--global) 5%, transparent 40%) no-repeat !important;
    border-top: 2px solid black;
    margin: 5px 5px 5px 10px !important}

.signup {color: #000 !important;
font-family: 'Bold' !important;
    background: url('/img/chat-signup.png') left center/auto 150% no-repeat,
                    linear-gradient(90deg, var(--signup) 0%, var(--signup) 45%, transparent 60%) no-repeat !important;
    margin: 0px !important}

li.ad {
    background: blue !important;
    color: #fff;
}

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

.exit {color: #000 !important;
font-family: 'Bold' !important;
    background: url('/img/chat-exit.png') left center/auto 150% no-repeat,
                    linear-gradient(90deg, var(--exit) 0%, var(--exit) 45%, transparent 60%) no-repeat !important;
    margin: 5px !important
}
.poll, .pollresult {color: #000f !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 hsl(275, 35%, 44%);
    margin: 5px !important;
}

.poll {
    font-family: 'Bold' !important;
    position: sticky !important;
    top: 0px;
}

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

.question, .qresult {color: #000f !important;
    background: url('/img/quiz.png') 1%/42px 42px no-repeat,
                    linear-gradient(180deg, var(--question) 0%, var(--question) 45%, transparent 60%) no-repeat, var(--resbg) !important;
    border-top: 2px solid #f00;
    margin: 0px !important;
}

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

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

.reqopen, .reqclosed, .request, .sms, .alert {
	border-radius: 20px !important;
	font-family: 'Bold' !important;
	margin: 5px !important;
	width: max-content;
	max-width: calc(98% - 10px - 2rem);
	}

.private { color: var(--col-pr1); background: var(--col-pr2); }
.private_reply { background: var(--col-pr3); color: var(--col-pr4); }
.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; }
.admin { color: var(--col-admin); }
.sadmin { color: var(--col-sadmin); }
.modo  {color: var(--col-modo) !important; }
.vip { color: var(--col-vip); }
.user { color: var(--col-user); }
.guest { color: var(--col-guest); }

/* color picker and tools bar */

#picker_box, #list_emoticon { background: var(--overall-bg);} /* 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: #fff !important; opacity:1; }

/* Chat Ads */

.chatcontainer {
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: #FFFFFF;	
}

div.adlogo {
	flex: 0 0 auto;
	height: var(--chatadheight);
}

div.adtext {
	flex: 1 1 auto;
	text-align: center;
	font-family: 'Regular';
	color: #000000;
	font-size: calc(var(--chatadheight) / 4);
	line-height: calc(var(--chatadheight) / 4);
	padding-left: 25px;
	z-index: 3;
	max-height: var(--chatadheight);;
}

.adtitle {
	display: block;
	color: #992929;
	text-align: center;
	font-family: 'Bold';
	font-size: calc(var(--chatadheight) / 3);
	line-height: calc(var(--chatadheight) / 3);
}

div.adphoto {
	flex: 0 0 auto;
	max-height: var(--chatadheight);
	height: max-content;
	width: auto;
}

div.adlogo img {
	position: relative;
	height: var(--chatadheight);
	width: auto;
	z-index: 3;
}

#show_chat_ads div.myads:first-child div.chatcontainer div.adphoto img {
	height: calc(var(--chatadheight) - 10px)
}

div.adphoto img {
	height: var(--chatadheight);
	width: auto;
}

@media screen and (min-aspect-ratio: 2.04/1) {
	html {
		font-size: min(2.3cqh, 16px);
	}
}
@media screen and (min-width: 2000px) {
	html {
		font: 1.75dvh 'Regular';	
	}
}
@media screen and (max-width: 650px) {
	html {
		font-size: 13px;
	}
}
@media screen and (max-width: 750px) and (max-height: 400px) {
    html {
        font-size: 12px;
	}
}