@media only screen and (max-width : 320px) {
	#container_chat, #menu_container_inside, #inner_header {
		width:98%;
		padding-left:1%;
		padding-right:1%;
	}
	.panelone {
		width:100%;
		margin-right:-100%;
		box-shadow:none;
	}
	.paneltwo {
		width:100%;
		margin-right:-100%;
		box-shadow:none;
	}
	.panelthree {
		width:100%;
	}
}
@media only screen and (min-width : 321px) and (max-width : 479px) {
	#container_chat, #menu_container_inside, #inner_header {
		width:98%;
		padding-left:1%;
		padding-right:1%;
		border:none;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:100%;
		margin-right:-100%;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 480px) and (max-width : 768px) {/*--- tablet portrait ---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:98%;
		padding-left:1%;
		padding-right:1%;
		border:none;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:75%;
		margin-right:-75%;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {/*--- tablet landscape ---*/
	#container_chat, #menu_container_inside, #inner_header{
		width:98%;
		padding-left:1%;
		padding-right:1%;
		border:none;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1025px) and (max-width : 1099px) {/*--- tablet landscape ---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:65%;
		float:left;
	}
	.panelone {
		width:32%;
		margin-right:-32%;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:32%;
	}
}
@media only screen and (min-width : 1100px) and (max-width : 1224px) {/*--- tablet landscape ---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:750px;
		float:right;
		margin-right:340px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1225px) and (max-width : 1300px) {/*--- pc small screen---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:770px;
		float:left;
		margin-left:125px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1301px) and (max-width : 1440px) {/*--- pc small screen---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:820px;
		float:right;
		margin-right:340px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1441px) and (max-width : 1540px) {

	#container_chat, #menu_container_inside, #inner_header {
		width:900px;
		float:right;
		margin-right:340px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
	
}
@media only screen and (min-width : 1541px) and (max-width : 1880px) {

	#container_chat, #menu_container_inside, #inner_header {
		width:900px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:600px;
		margin-right:-600px;
	}
	.panelthree {
		width:320px;
	}
	
}

@media only screen and (min-width : 1880px) {
	#container_chat, #menu_container_inside, #inner_header {
		width:1000px;
		margin:0 auto;
	}
	.panelone {
		width:400px;
		margin-right:-400px;
	}
	.paneltwo {
		width:600px;
		margin-right:-600px;
	}
	.panelthree {
		width:400px;
	}
	
}
@media screen and (max-width:360px){
	#container_login, #container_kicked, #inner_header {
		width:100%;
		height:100%;
		min-width:300px;
		z-index:15;
		top:0;
		left:0;
		margin:0 auto;
		padding:0;
		box-shadow:none;
		border:none;
	}
}
@media screen and (max-height:360px){
	#container_login, #container_kicked, #inner_header {
		width:100%;
		height:100%;
		z-index:15;
		top:0;
		left:0;
		margin:0 auto;
		padding:0;
		box-shadow:none;
		border:none;
	}
	#room_topic {
		display:none;
	}
	#main_emoticon {
		border:none !important;
	}
	#header {
		display:none;
	}
}
@media screen and (max-height:480px){
	#main_emoticon {
		border:none !important;
	}
	#room_topic {
		display:none;
	}
}
@media screen and (max-height:480px){
	#header {
		display:none;
	}
}
@media screen and (max-width:480px){
	.hide_mobile {
		display:none;
	}
	.addon_button, .test_button, .other_panels {
		margin-right:3px;
	}
	#header {
		display:none;
	}
}
@media only screen and (max-device-width: 1024px) and (max-device-height: 768px) {
	#show_chat li, #show_private li {
		font-size:1.2em;
	}
}
@media screen and (max-width:1024px){
	.panelone, .paneltwo {
		box-shadow:none;
	}
	#header {
		height:50px;
	}
	#inner_header {
		width:95%;
	}
	#container_chat {
		border-radius:0px;
	}
}
@media screen and (max-width:480px){
	.private_friend .hide_private_title {
		display:none;
	}	
}
@media screen and (max-width:560px){
	#container_login {
		width:100%;
		max-width:100%;
		margin:0 auto;
		top:0;
		left:0;
		min-height:100%;
		height:auto;
		padding:0;
		padding-bottom:50px;
		border:none;
	}
	#header_login, #content_login {
		width:86%;
		max-width:320px;
	}
	#content_login_right, #content_login_left, #fsubmit_control, #fsubmit_rules {
		width:100%;
		float:none;
		margin:0 auto;
		display:block;
	}
	#login_welcome {
		margin-top:30px;
	}
}

@media screen and (max-height:360px){
	#container_login {
		width:100%;
		max-width:100%;
		margin:0 auto;
		top:0;
		left:0;
		min-height:100%;
		height:auto;
		padding:0;
		padding-bottom:50px;
		border:none;
	}
	#header_login, #content_login {
		width:86%;
		max-width:320px;
	}
	#content_login_right, #content_login_left, #fsubmit_control, #fsubmit_rules {
		width:100%;
		float:none;
		margin:0 auto;
		display:block;
	}
	#login_welcome {
		margin-top:30px;
	}
}
/* Reverse message order */
.chat_messages, #messages, .messages_list {
    display: flex !important;
    flex-direction: column-reverse !important;
}

/* Message input area layout */
#input_area, .input_area {
    display: flex !important;
    align-items: center;
}
#message_input, .message_input {
    flex: 1;
    padding: 10px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #ccc;
}
#send_button, .send_button {
    padding: 10px 20px;
    border: none;
    background: #0cf;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
}
#send_button:hover, .send_button:hover {
    opacity: 0.9;
}
