.prototypes {display:none;}

.chat-display {padding:0px 0px;background:#eee;overflow-y:scroll;overflow-x:hidden;word-wrap:break-word;margin:5px 0; border-radius:5px; font-size:14px;}

/** Mesage **/
.message {color:#111;padding:5px 10px;position:relative;line-height:20px;}
.message:nth-child(even) {background:#ddd;}
.message .timestamp{font-weight:bold;display:inline-block;}
.message .sender {font-weight:bold;display:inline-block;padding-right:4px;}
.message:hover {background:#ee9;cursor:default;}
.message .face, .message .face-placeholder {border-radius:5px;margin-bottom:-3px;display:none;}
.message .face-placeholder {background:black;display:inline-block;background:url('img/ajax-loader.gif') center no-repeat #ccc;}
.message .info {display:none;cursor:help;width:20px;height:20px;position:absolute;right:5px;top:5px;font-weight:bold;color:#eee;text-align:center;border-radius:5px;background:#ddd;line-height:20px;}
/*.message:nth-child(even) .info {background:#eee;}*/
.message .info:hover {background:#003;color:#ee9;line-height:20px;}
.message a {color:#00a;}
.message-is-system  .sender {color:#009;} 
.message strong {font-weight:bold;margin:0;padding:0;} 

/** Chat **/
body, *, html {font-family:arial; }
body *:focus {outline:0;}
body {background:url("themes/default/bg.png");background-color:#003;color:#111;}
h1 {color:#eee;float:left;margin:0px 0;position:relative;}
h1 .logo {display:none;position:absolute;top:0;left:0;}
.wrapper {width:100%;max-width:1000px;margin:0 auto;}
.load-older {background:#ddd;cursor:pointer;display:none;}
.load-older .abort {color:#00a;}
.load-older .abort:hover {color:#d00;}
.load-older:hover {cursor:pointer;}
.load-older:hover .load-links {display:block;}
.load-older .load-links {display:none;float:right;font-weight:bold;margin-right:-5px;}
.load-older .load-links a {background:#ddd;color:#ddd;text-decoration:none;display:inline-block;float:left;border-radius:5px;margin-left:5px;width:30px;text-align:center;}
.load-older:hover .load-links a {color:#eee;}
.load-older .load-links a:hover{background:#003;color:#ee9;}

.clickable-text {color:#00a;}
.no-load-older {display:none;}
.load-older .ajax-loader{display:none;}
.load-older .ajax-loader img {margin-bottom:-2px; height:14px;}
.chat-loader .ajax-loader {}
.chat-loader .ajax-loader img {margin-bottom:-2px; height:14px;}

.toolbar {text-align:right;float:right;margin-top:4px;}
.toolbar .tool {line-height:32px;background:#eee;color:#003;display:inline-block;width:32px;height:32px;border-radius:5px;text-align:center;font-size:28px;margin:0;float:left;margin-left:5px;}
.toolbar .tool:hover{background:#ee9;cursor:pointer;}
.toolbar .suggest-tool {font-size:24px;}
.toolbar .userlist-tool {font-size:24px;}
.toolbar .theme-tool {font-size:24px;}

.userlist {margin-top:5px;}
.userlist-loader {text-align:center;}
.userlist-loader  img {margin:5px auto;margin-bottom:10px;}
.userlist-container {display:none;margin-top:5px;min-width:250px;}
.userlist-container .l-title {float:left;font-size:16px;}
.userlist-container .l-title-2 {font-weight:bold;}
.userlist-container .userlist-checkbox {float:right;font-size:14px;width:100px;margin-top:-4px;font-size:12px;padding:3px;}
.userlist-container .userlist-checkbox .fontello{display:inline-block;width:18px;text-align:left;}
.userlist-container .online-users {margin-bottom:10px;}
.userlist-user {border-radius:5px;background:#ddd;padding:0;margin:5px 0;width:100%;}
.userlist-user .u-inner{padding:5px 10px;}
.userlist-user:hover {background:#ee9;cursor:default;}
.userlist-user.active {background:#9e9;}
.userlist-user.inactive {background:#e99;}
.userlist-user.offline {background:#ccc;}
.userlist-user .sender {font-weight:bold;}
.userlist-user .info {font-size:13px;padding:2px;}
@media (min-width:450px) {
	.userlist-container {display:none;margin-top:5px;min-width:350px;}
}

.suggest .upload-progress {display:none;}
.suggest img {margin:5px auto;}
.suggest .error {margin:5px 5px;color:#c00;display:none;}
.suggest .has-error {/*border:1px solid #c00 !important; color :#c00 !important;*/}
.suggest form {margin-bottom:0}

.message-lightbox {text-align:center;}
.message-lightbox .msg-title {font-weight:bold;margin-bottom:5px;}
.message-lightbox .msg-text {margin:5px 0;}

input, button {border-radius: 5px;padding:5px;border:0; font-size:14px;}
input:hover, button:hover, input:active, button:active, input:focus, button:focus, input.i-active  {background:#ee9;}

.chat-form table {width:100%;border-collapse:collapse;margin:0;padding:0;}
.chat-form table td {padding:0;margin:0;}
.chat-form table .spacer {width:3px;}
.chat-form input, .chat-form button{width:100%;}
.chat-input-div {position:relative;}
.chat-input-ajax-loader {position:absolute;top:5px;right:5px;display:none;opacity:0.75;}
.td-sender {position:relative;}
.td-sender .random-name {width:25px;background:transparent;font-size:16px;color:white;visibility:hidden;font-size:22px;line-height:17px;}
.td-sender .random-name:hover {cursor:pointer;color:#ee9;visibility:visible;}
.td-sender .random-name-parent {position:absolute;left:-32px;top:0;width:25px;padding-right:8px;} 
.td-sender:hover .random-name {display:block;visibility:visible;}
.td-sender:active .random-name {color:white;}

.fontello {font-family:fontello;}

.lightbox {display:none;border-radius:5px;border:5px solid #111;z-index:100;max-height:80%;overflow-y:auto;overflow-x:hidden;}
.lightbox, .lightbox * {font-size:14px;}
.lightbox  {padding:20px; background:#eee; color:#111;}
.lightbox  {position: fixed;	top: 50%;left: 50%;transform: translate(-50%, -50%);}
.lightbox-overlay {display:none;position:fixed;width:100%;height:100%;background:#111;z-index:10;left:0;top:0;opacity:0.5;}
.lightbox .l-inner {}
.lightbox .l-title {font-weight:bold;margin-bottom:5px;}
.lightbox input[type=submit], 
.lightbox input[type=text], 
.lightbox input[type=file], 
.lightbox input[type=button], 
.lightbox button{border:1px solid #111;margin-top:5px;width:100%;}
.lightbox  .progress{margin-top:5px;}

.faces-lightbox {padding:5px;font-size:14px;width:680px;}
.faces-lightbox.advanced {width:682px;}
@media (max-width:720px){
	.faces-lightbox {width:460px;}
	.faces-lightbox.advanced{width:422px;}
}
@media (max-width:480px){
	.faces-lightbox {width:240px;}
	.faces-lightbox.advanced{width:231px;}
}
.faces-lightbox .l-title {float:left;font-size:16px;margin:5px;}
.faces-lightbox .faces-checkbox {float:right;font-size:14px;width:100px;margin-top:2px;font-size:12px;padding:3px;margin-right:8px;}
.faces-lightbox .faces-checkbox .fontello{display:inline-block;width:18px;text-align:left;}
.faces-lightbox .face-button {float:left;overflow:hidden;white-space:break-word;background:#ddd;border-radius:5px;padding:5px;margin:5px;width:200px;}
.faces-lightbox .face-button:hover {cursor:pointer;background:#ee9;}
.faces-lightbox .face-image{margin-right:3px;border-radius:5px;display:inline-block;width:40px;height:40px;vertical-align:middle;background-position:center;background-repeat:no-repeat;}
.faces-lightbox.advanced .face-button{width:40px;margin:3px;padding:3px;} 
.faces-lightbox.advanced .face-name{display:none;}

.settings.lightbox a {color:#00a;}
.settings.lightbox a:hover {color:#a00;}

.theme-lightbox {padding:10px;} 
.theme-lightbox a.row {display:block;border-radius:5px;background:#ddd;padding:6px 10px;border:1px solid #111;margin:5px 2px;text-decoration:none;}
.theme-lightbox a.row:hover {}
.theme-lightbox a.row .name {display:inline;}
.theme-lightbox a.row.selected {border:#d00 3px solid;}

.about {text-align:center;}
.about p {margin-top:5px;margin-bottom:5px;}
.about .heartbeat{border-radius:5px;padding:5px;}
.about .heartbeat:hover{}

.no-user-select {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;-o-user-select: none;user-select: none;}

.clearfix {clear:both;}

.w100pc {width:100%;}
.center-text {text-align:center;}
.btn-primary:hover {color:#111;}
.btn-primary, .btn-primary:disabled {background:#003;color:#eee;}
.btn-primary:disabled {opacity:0.5;}
.progress {border:1px solid #111;width:100%;background:white;height:20px;border-radius:5px;}
.progress .progress-display {width:0;background:#337ab7;height:100%;}

/** Flexbox **/
html, body {height: 100%;margin: 0; padding: 0; margin:0 3px; overflow:hidden;}
.wrapper {display: flex; height: 100%; flex-direction: column; padding-top:5px;}
.header {}
.body {flex: 1;}
.footer{}

/** Responsive **/
@media (min-width:600px){
	.chat-form .td-sender {width:170px;}
	.chat-form .td-message {}
	.chat-form .td-faces {width:90px;}
	.chat-form .td-submit {width:90px;}
	.chat-form .td-submit {width:70px;}
	.chat-form .chat-submit-small {display:none;}
	.chat-form .faces-button-small {display:none;}
}
@media (max-width:800px){
	.chat-form .td-sender {width:130px;}
}
@media (max-width:600px){
	.chat-form .td-sender {width:90px;}
	.chat-form .td-message {}
	.chat-form .td-faces {width:45px;}
	.chat-form .td-submit {width:45px;}
	.chat-form .chat-submit-big {display:none;}
	.chat-form .faces-button-big {display:none;}
}
@media (max-width:500px){
	.load-older .load-links {display:none !important;}
}
@media (max-width:425px){
	h1{font-size:1.7em;margin-top:4px;}
}
@media (max-width:375px){
	h1{font-size:1.4em;margin-top:8px;}
}