* { box-sizing: border-box; }

body, html{ width:100%; height:100%; }
body.nobg { background: none; overflow:hidden; font-family: Segoe UI, sans-serif; font-size:90%; }

.chatmenu { font-size:85%; font-family:'Segoe UI',sans-serif; }
.chatmenu li{ text-align:center; background-color:#fafafa;margin:0;padding:0;list-style:none;display:block;float:left; }
.chatmenu li a{display:block;padding:16px 0px;text-decoration:none; color:#000; border:1px solid #e4e4e4; margin-right:-1px; }
.chatmenu li a:hover{background-color:#fff;}
.chatmenu li.current{background-color:#fff;display:block;padding:15px 0px; color:#F4595F; border:1px solid #e4e4e4; border-bottom:1px solid #fff; margin-right:-1px; /*height:20px;*/}

.w_rooms { width: 50%; }
.w_rules { width: 50%; }

.room_list, .rules_list {
	border-left:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	border-right:1px solid #e4e4e4;
	margin-top: -2px;
	padding: 15px 0;
}
.rules_list { padding: 15px; }
.room_div { 
	/*background:#eee;*/
	width:233px;
	display:inline-block;
	/*border: 1px solid #D5D5D5;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height:60px; 
	line-height:48px; */
	box-sizing: border-box;
	padding: 0px 5px;
	vertical-align: middle;
}

.room_users { position:relative; height:190px; overflow:hidden; margin-top:20px; padding:5px; border:1px solid #e4e4e4; }
.room_users ul { position:absolute; width:2446px; left:5.5px; }
.users_title { text-align:left;display:inline-block;width:49%; }
.users_but_next { text-align:right;display:inline-block;width:50.4%; }
/*.room_users .cover { background:#FFF; position:absolute; top:0; height: 155px; width:12px; right:0; }*/
li.users_block { display:inline-block; list-style: none; padding: 1.82px; }
li.users_block img.image { height:110px; width:110px; vertical-align: middle; }
.u_login.woman { color: #FF006E; }
.u_login.man { color: #1979FF; }
.u_login { font-size: 90%; }
.u_town { font-size: 78%; }

.room_enter { float:right; }
.room_enter  i { font-size:35px; color:#DEDEDE; vertical-align: middle; }
.room_enter  i:hover { color: #000; }

/* ROOM DETAIL */

#user_zone { overflow-y: auto; overflow-x: hidden; font-size:90%; }


/* PROSTREDIE CHATU */
.chat_main_menu { background-image:url('../obrazky/logo_bg.png'); height:50px; width:100%; }
.chat_main_menu div.item {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  padding: 0px 10px;
  cursor: pointer;
}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

nav { height: auto; /*width: 100%;*/ position: relative; display:inline-block; }
nav ul { padding: 0; margin: 0 auto; /*width: 600px;*/ height: 50px; }
nav li { display: inline; float: left; padding: 0px 8px; }
nav a { color: #fff; display: inline-block; /*width: 100px;*/ text-align: center; line-height: 50px; /*text-shadow: 1px 1px 0px #283744;*/ }
nav a:hover, nav a:active { background: #373D4B; text-decoration:none; }
nav a#pullmenu { display: none; }

.chat_main_menu div.item:hover, .chat_main_menu li.item:hover { background: #373D4B; }
.chat_main_menu .nopad { font-family: Segoe UI, sans-serif; font-size: 90%; color: #A4ACBF; padding:0; }
.mainpad { padding: 0px 0.5% 0px 1%; height:auto; }
.room_title { width: 100%; padding: 10px 0.5% 10px 1%;}
.room_title h3 { padding:0; margin:0;}

/* POLE SPRAV */
.msg_box { width:86.5%; height: 30px; display:inline-block; }
.usr_msg_box { width:100%; height: 30px; }
.usr_msg_box.active-input { border:1px solid #578CFE; background-color:#DFE9FD; padding-right:23px; }
.usr_msg_box_label { width:13%; position:relative; padding:0; margin:0; display:inline-block; }
.usr_msg_box_label .remove-user { position:absolute; bottom:8px; right:7px; /*width:10px; height:10px;*/ color:#A2A2A2; cursor:pointer; display:none; }

.send_btn { width: 10%; min-width:80px; height: 30px; padding: 3px; display:inline-block; padding-top:5px; }
.msg_input { width: 100%; }
.msg_line { padding-left: 5px; /*background:#eee;*/ min-height:30px; line-height:25px; border-bottom:1px solid #eee; }
/*.msg_line:nth-child(odd) { background:#FFF; }*/

#msg_window { width: 100%; /*height: 100%;*/ overflow-y: auto; overflow-x: hidden; position:relative; }
#msg_loader { font-size:15px; height:50px; line-height:50px; text-align:center; }
/*.emotions_smile { background: url('../obrazky/chat/emotions/emotion_grin_small_nocolor.png') no-repeat 99% 8px; }
.emotions_smile:hover { background: url('../obrazky/chat/emotions/emotion_grin_small.png') no-repeat 99% 8px; }*/
#msg_container { width:88%; height: 40px; position:relative; padding:0; margin:0; display:inline-block; }
#emotions_menu { background: url('../obrazky/chat/emotions/emotion_grin_small_nocolor.png') no-repeat; position:absolute; bottom:10px; right:10px; width:22px; height:22px; cursor:pointer; }
#emotions_menu:hover { background: url('../obrazky/chat/emotions/emotion_grin_small.png') no-repeat; width:22px; height:22px; }
#emotions_list { z-index: 1; color:#FFF; position: absolute; width:190px; height:37px; background-color:rgba(0,0,0,0.5); padding: 5px; text-align: center; }
#emotions_list:after { content: ""; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(0,0,0,0.5); width: 0; height: 0; position: absolute; bottom: 37px; left: 170px; }


/* RPCHAT - VSEOBECNE */
.ui-state-disabled.ui-draggable-disabled { opacity : 1;} /* ZMENA FADEOUT OPACITY PRI MOVE RPCHATU */
#rp_window { position:fixed; bottom:8%; right:20%; height:350px; width:530px; background:#FFF; border:1px solid #949494; }
#rp_window .title { height:35px; line-height:35px; width:100%; border-bottom:1px solid #949494; padding:0 12px; }
.actions_buttons { float:right; color:#000; }
.actions_buttons a { font-size:120%; padding-left:3px; }
.actions_buttons a:hover i { color:#F4595F; }
#rp_window .content { position:relative; height:100%; }
#rp_window .content .loader { position:absolute; top:43%; left:34%; }
#rp_window .content .author { height:60px; width:100%; background:#EAF1F9; border-bottom:1px solid #949494; padding:0 6px; }
#rp_window .content .msg_window { position:relative; height:255px; width:100%; overflow: hidden; }
#rp_window .content .msg_list { height:254px; width:474px; border-right:1px solid #949494; padding:4px; overflow-y:hidden;}
#rp_window .content .rpusers { position:absolute; right:-125px; top:0; height:254px; width:180px; background:#FFF; border-left:1px solid #949494; border-bottom:1px solid #949494; padding:4px; }
/*#rp_window .content .rpusers:hover { background:#EEE; }*/
#rp_window .content .rpusers a.username { padding-left:7px; font-size:90%; font-weight:normal; }
div.rpmsg_line { font-size: 90%; padding-left: 5px; /*background: #eee;*/ min-height: 20px; line-height: 20px; border-bottom: 1px solid #eee;}
.msg_list .dateline { text-align:center; border-bottom:1px solid #B2B2B2; color:#B2B2B2; font-size:80%; margin-top: 6px; }
.msg_list .send_time { color:#959595; font-weight:bold; display:inline-block; padding:0px 4px 0px 10px; }
.msg_list .message_text { color: rgb(110, 110, 110); display:inline-block; }
.msg_list .send_time.author-user { color:#468cfe;font-weight:bold; display:inline-block; padding:0px 4px 0px 10px; }
.msg_list .message_text.author-user { color:#000; display:inline-block; font-weight:600; }
/*.msg_list .author_user { display:inline-block; }*/

.rp-avatar { height:40px; width:40px; }
.rp_user_data { height: 100%; padding-top:10px; padding-left:10px; }
.rp_user_data div.user_data { display:inline-block; position:relative; bottom:7px; left:7px; font-size:90%; }
.rp_user_data .user_info { display:block; }
.rp_user_data .user_info .sex { color:#949494; }
.rp_user_data .user_addinfo  { float:right; position:relative; top:4px; right:7px; font-size:120%; }
.rp_user_data .user_name { font-weight:bold; }
.rp_user_data .user_town { display:block; }
.rp_msg_input { display:none; height:40px; width:474px; border-bottom:1px solid #949494; padding:4px; }
.rp_msg_box { margin:0;height: 30px;width:80%; padding:3px; display:inline-block; }
.rp_send_btn { width:18%; height:30px; padding:3px; display:inline-block; padding-top:5px; margin-left:3px; }

.start_rpchat { height:255px; margin:70px auto; text-align:center; }
.start_rpchat input.txtbox { width:200px; padding:6px; line-height:35px; height:35px; margin-left:4px; }
.start_rpchat div.btnbox { width:200px; padding:6px; margin:7px auto; }

.rp_uline { margin-top:3px; cursor:pointer; }
.rp_uline:hover { background: #EAF1F9; }
i.fa.status1 { color: #478DFF; font-size:9px; padding:0px 7px 0px 4px; } /*ONLINE V CHATE*/
i.fa.status2 { color: #00D921; font-size:9px; padding:0px 7px 0px 4px; } /*ONLINE*/
i.fa.status3 { color: #D5D5D5; font-size:9px; padding:0px 7px 0px 4px; } /*OFFLINE*/
i.fa.status4 { color: red; font-size:12px; padding-right:5px; padding-left:2px; } /*NOVA SPRAVA*/

#rp_window_line { position:fixed; bottom:8%; right:20%; height:35px; line-height:35px; width:180px; background:#FFF; border:1px solid #949494; padding:0 9px; }
#rp_window_line .title  { font-size:90%; }
#rp_window_line .title  .titlepad { padding-left:10px; }

.msg_author { font-weight:bold; }
.msg_time { color:#B8B8B8; }
.sp-avatar.small { width: 25px; height:25px; vertical-align:middle; }
.msg_text_detail { display:inline; font-size:81%; }
.msg_info_detail { display:inline; font-size:81%; cursor:pointer; }
.emotion { vertical-align: middle; width: 16px; height:16px; }
.emotion.medium { width: 22px; height:22px; }
.emotion.link{ cursor:pointer; }
.txt_emotions_load {margin-top:2px;}
.reply_author { background: #606B84; padding: 1px 3px; color: #FFF; border: 1px solid #000; }


.new_msg_ball { background-color:#DE5258; color:#FFF; padding: 0px 3px; }

.chat_main_menu div.logo_item {
	display: inline-block;
	vertical-align: middle;
	height: 50px;
	line-height: 50px;
	padding: 0px 10px;
	cursor: pointer;
}

#popuser:after { content: ""; width:0; height:0; position:absolute; bottom:32px; left:-9px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid rgba(0,0,0,0.5); }
#popuser { font-size:95%; color:#FFF; position:absolute; left:50px; top:50px; width:260px; height:78px; background-color: #2E3641; border:1px solid #999999; }
#popuser .usrname { position:absolute; top:0; left:0; font-weight:bold; /*text-decoration:underline;*/ color:#FFF !important; }
#popuser .charinfo { position:absolute; top:0; right:0; color:#eee; font-size:90%; }
#popuser img.sp-avatar { margin:4px 0 0 4px; float:left; width:70px; height:70px; }
#popuser .galery_icon { position:absolute; bottom:0; left:0; }
#popuser .msg_icon { position:absolute; bottom:0; right:0; }
#popuser .towninfo { position:absolute; top:18px; left:0; color:#eee; font-size:85%; }

#popuser_full:after { content: ""; width:0; height:0; position:absolute; bottom:32px; right:-9px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:8px solid rgba(0,0,0,0.5); }
#popuser_full { font-size:95%; color:#FFF; position:absolute; left:50px; top:50px; width:260px; height:78px; background-color: #2E3641; border:1px solid #999999; }
#popuser_full .usrname { position:absolute; top:0; left:0; font-weight:bold; /*text-decoration:underline;*/ color:#FFF !important; }
#popuser_full .charinfo { position:absolute; top:0; right:0; color:#eee; font-size:90%; }
#popuser_full img.sp-avatar { margin:4px 0 0 4px; float:left; width:70px; height:70px; }
#popuser_full .galery_icon { position:absolute; bottom:0; left:0; }
#popuser_full .msg_icon { position:absolute; bottom:0; right:0; }
#popuser_full .towninfo { position:absolute; top:18px; left:0; color:#eee; font-size:85%; }

/* POLE POUZIVATELOV */
.cleardiv { clear:left; }
#user_zone div { vertical-align:top; }
#active_users { font-weight:bold; }
#active_users_list { overflow-y: auto; overflow-x: hidden; }
.border_count_users { height:12px;}
.uline { height:25px; line-height:25px; }
.uline span.left { float:left; }
.uline span.right { float:right; }
/*.uline i.fa-male { color:#1979FF; }
.uline i.fa-female { color:#FF006E; }*/
.uline i.fa-circle.active { color: #00D921; font-size:10px; }
.uline i.fa-circle.unactive { color:#FF9100; font-size:10px;  }
.uline i.fa-circle.unactive2 { color: #F4595F; font-size:10px; }
.male { color:#1979FF !important; }
.female { color:#FF006E !important; }

/* RESPONZIVE PARAMETERS */
@media (min-width: 980px) {
	#msg_zone { /*max-*/width: 82%; margin-right: 0.5%; display:inline-block; }
	#user_zone { width: 17%; display:inline-block; vertical-align:top; }
}
@media only screen and (max-width : 905px) { #msg_container  { width:82% !important; } }
@media only screen and (max-width : 860px) { #user_chat_panel { display:none; } }
@media (min-width: 800px) and (max-width: 980px) {
	#msg_zone { /*max-*/width: 79%; margin-right: 0.5%; display:inline-block; }
	#user_zone { width: 19%; max-width: 195px;	display:inline-block; vertical-align:top; }
}
@media (min-width: 580px) and (max-width: 800px) {
	#msg_zone { /*max-*/width: 79%; margin-right: 0.5%; display:inline-block; }
	#user_zone { width: 19%; max-width: 195px;	display:inline-block; vertical-align:top; }
	.count_users { display:none; }
}
@media only screen and (max-width : 620px) {
	.nopad { display: block; }
	#chat_logo { background-color: #2E3641; float:none; display:block; text-align:center; width:100%; }
	nav { border-bottom:0; width:100%; }
	nav ul { display:none; height:auto; }
	nav li { display:block; float:none; width:100%; }
	nav a#pullmenu { display: block; background-image:url('../obrazky/logo_bg.png'); width:100%; font-size: 90%; color:#A4ACBF; position: relative; }
	nav a#pullmenu:after { content:""; background: url('../obrazky/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 15px; }
}
@media (min-width: 580px) and (max-width: 640px) { .status_indicator { display:none; } }
@media only screen and (max-width : 520px) { #msg_container  { width:78% !important; } }
@media (min-width: 320px) and (max-width: 580px){
	body.nobg { overflow:auto; }
	#msg_window { height:100% !important; overflow-y: hidden; }
	#msg_zone { /*max-*/width:100%; margin-right:1%; display:block; }
	#user_zone { max-width:100%;  display:block; vertical-align:top; }
	.send_btn { width: 19.2%; }
	.chat_menu_settings { margin-top:14px; }
	#msg_container  { width:74% !important; }
	.send_btn { min-width:20%; }
}
@media (max-width: 320px){ .send_btn { min-width:20%; } }