body {
background: #f4f4f9;
font-size: 14px;
font-family: 'Play', Arial;
color: #fff;
}

hr {
margin: 10px 0;
padding: 0;
height: 0;
border: none;
border-top: 2px dashed #ddd;
}

form {
margin-top: 6px;
}

.lobster {
font-family: 'Lobster', cursive;
font-size: 20px;
color: #8ac858;
display: inline;
}

.online_count {
background: #f4f4f2;
float: right;
border: 1px solid #e8e8e8;
border-radius: 3px;
padding: 0 4px;
color: #8ac858;
font-size: 14px;
}

.avatartwo {
float: left;
margin-left: 2px;
margin-top: 3px;
height: 34px;
width: 34px;
border: 2px solid #fff;
border-radius: 100px;
}

.tablet_img {
background: url(../img/tablet.png) no-repeat center;
height: 210px;
background-size: auto auto;
}

.head_bar {
background: #f5f4f5;
margin-bottom: 3px;
text-align: right;
border-radius: 2px;
border: 1px solid #d2d2d2;
padding: 6px 0;
}

.head_bar a {
margin-left: 4px;
border-radius: 2px;
border: 1px solid #d2d2d2;
color: #a09fa2;
padding: 8px 6px;
}

.head_bar i {
color: #5cbe59;
}


.site {
background: #f4f4f9;
margin-top: -20px;
padding-top: 20px;
min-height: 100vh;
}

.blocked {
margin: 4px 0;
background: #f4f4f2;
display: block;
color: #605e5e;
font-size: 14px;
}

.blocked:hover {
background: #f6f6f5;
}

.blocked img {
width: 50px;
height: 50px;
border-radius: 4px;
margin: 0 10px 0 0;
}

h1 {
display: none;
}

.photo_user_block {
max-width: 100%;
max-height: 100%;
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}

.photo_user {
text-align: center;
position: relative;
display: inline-block;
margin: 4px;
border-radius: 4px;
border: 3px solid #d9d9d8;
width: 155px;
height: 155px;
}

#toTop {
width:50px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
display:none;
color:#bfbebe;
font-family:verdana;
font-size:11px;
}

a { 
color: #94a52b; 
font-size: 14px;
text-decoration: none;
}

a:hover { 
color: #94a52b; 
text-decoration: none;
}

a:active { 
text-decoration: none;
}

img {
vertical-align: middle;
}

.dropdown-link a {
background: #fff;
color: #818080;
display: block;
padding: 7px;
border-bottom: 1px solid #c9c8c8;
margin: 0 6px;
}


.dropdown-link a:hover {
background: #f6f5f5;
}

.dropdown-menu {
background: #e6e5e5;
width: 100%;
display: none;
margin-top: 16px;
}

.dropdown-menu:after {
        bottom: 100%;
        right: 0;
top: -19px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-bottom-color: #e6e5e5;
        border-width: 10px;
        margin-left: -10px;
      }

.dropdown-menu img {
padding: 8px;
}

.dropdown-menu img:hover {
background: #d8d9d8;
}

.photo_post {
display: block;
max-width: 100%;
max-height: 140px;
border-radius: 4px;
background: #ecebeb;
padding: 6px;
}

.gray {
color: #b0b1af;
font-size: 18px;
float: right;
margin-right: -6px;
margin-top: -24px;
padding: 6px;
}

.page_link {
background: #9d9999;
color: #fff;
font-size: 14px;
padding: 3px 10px;
margin: 0 2px;
border-radius: 4px;
}

.page_act {
background: #8ac858;
color: #fff;
font-size: 14px;
padding: 3px 10px;
margin: 0 2px;
border-radius: 4px;
}

.page_act:hover {
color: #d0fcbc;
}

.ismobile {
margin-top: -3px;
}

.us_ava {
height: 50px;
width: 50px;
border-radius: 4px;
position: absolute;
}

.mess{
background: #f4f4f4;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 65px;
color: #5f6060;
font-size: 14px;
padding: 8px;
border-radius: 4px;
line-height: 25px;
word-wrap: break-word;
position: relative;
line-height: 1em;
}

.mess:before {
content: '';
position: absolute;
width: 0px;
height: 0px;
left: -20px;
top: 13px;
border: 10px solid transparent;
border-right: 10px solid #f4f4f4;
}


.link {
background: #dcdddb;
border-radius: 4px;
margin-top: 6px;
padding: 10px;
display: block;
color: #61c533;
}

label {
display: block;
font-weight: normal;
}

textarea {
background: #fff;
padding: 10px;
border: 1px solid #eee;
margin: 3px 0;
color: #605e5e;
cursor: pointer;
font-size: 16px;
border-radius: 2px;
width: 100%;
-webkit-box-shadow: inset 0 1px 3px #D8DEE2;
-moz-box-shadow: inset 0 1px 3px #D8DEE2;
-o-box-shadow: inset 0 1px 3px #D8DEE2;
box-shadow: inset 0 1px 3px #D8DEE2;
}

input[type="text"], select {
background: #fff;
padding: 9px;
border: 1px solid #eee;
margin: 3px 0;
color: #605e5e;
font-size: 16px;
border-radius: 2px;
width: 100%;
-webkit-box-shadow: inset 0 1px 3px #D8DEE2;
-moz-box-shadow: inset 0 1px 3px #D8DEE2;
-o-box-shadow: inset 0 1px 3px #D8DEE2;
box-shadow: inset 0 1px 3px #D8DEE2;
}

.submit{
background: #8ac858;
border: none;
color: #fff;
border-radius: 2px;
padding: 10px 12px;
margin: 6px 0 0 0;
display: block;
font-size: 16px;
width: 100%;
}

.submit:hover {
background: #9adc64;
}

.submite {
background: #8ac858;
color: #fff;
border-radius: 2px;
border-bottom: 2px solid #78b547;
padding: 6px 9px;
font-size: 16px;
margin: 0 0 4px 0;
border-top: none;
border-left: none;
border-right: none;
}

.submite:hover {
background: #9adc64;
}

.submite:active {
border: none;
}


input[class="add_mess"] {
background: #e6e7e7;
border-top: 1px solid #d1d3d3;
border-bottom: 1px solid #d1d3d3;
border-left: none;
border-right: none;
color: #9b9b9b;
border-radius: 4px;
padding: 5px 10px;
font-size: 15px;
margin-top: 14px;
display: inline;
}

div[class*="col-"]{
padding-left:4px;
padding-right:4px;
}

.time {
font-size: 12px;
float: right;
margin-top: -2px;
}

.icon_input {
display: inline;
float: right;
padding: 6px;
margin: -40px 0 0 4px;
}

.file_input {
font-size: 17px;
cursor:pointer;
display: inline;
float: right;
color: #9f9f9e;
padding: 6px;
margin: -35px 32px 0 4px;
}

.delete {
float: right;
color: #fcaaaa;
margin: 4px 4px 0 4px;
}

.delete:hover {
color: #fc8c8c;
}

.answer {
float: right;
color: #70cf57;
margin: 4px 4px 0 4px;
}

.answer:hover {
color: #54c137;
}

.inline {
background: #eaeaea;
border-radius: 4px;
display: inline-block;
padding: 7px;
margin: 4px;
}

.error {
background: #F7CECE;
color: #e79393;
padding: 10px;
font-size: 16px;
border-radius: 2px;
margin: 4px 0;
}

.message {
background: #dbf7ce;
color: #6dc148;
padding: 10px;
font-size: 16px;
border-radius: 2px;
margin: 4px 0;
}

.user_icon {
margin-bottom: 5px;
}

.head {
background: #8ac858;
border-bottom: 1px solid #7dba4b;
margin-bottom: 10px;
position: relative;
}

.logo {
padding: 3px 6px;
}

.block_chat {
background: #f4f4f2;
padding: 5px;
font-size: 14px;
color: #605e5e;
border-top: 1px solid #e2e1e1;
}

.block {
background: #ffffff;
padding: 10px;
border-radius: 4px;
font-size: 16px;
color: #605e5e;

}

a.block_link {
padding: 7px 0;
display: block;
margin: 4px 2px 4px 0;
color: #605e5e;
font-size: 16px;
text-indent: 4px;
}

a.block_link:hover {
background: #fdfdfd;
}

.block_link_icon {
color: #8ac858;
margin-right: 4px;
margin-bottom: -4px;
}

a.room {
overflow: hidden;
padding: 4px 0;
display: block;
color: #605e5e;
font-size: 16px;
}

a.room:hover {
background: #fdfdfd;
}

.room_img {
width: 60px;
margin: 2px 6px;
height: 60px;
float: left;
border-radius: 4px;
}

.room_img_min {
width: 20px;
margin: 0 6px 0 0;
height: 20px;
float: left;
border-radius: 2px;
vertical-align: middle;
}

.count {
font-size: 12px;
color: #605e5e;
}

.title {
color: #7fc447;
font-size: 17px;
display: block;
padding: 4px 0 8px 0;
margin-top: -6px;
border-bottom: 1px solid #e2e1e1;
}

a.mobile_menu_block {
float: right;
border-left: 1px solid #7eb750;
border-right: 1px solid #94d55f;
font-size: 24px;
color: #ffffff;
padding: 9px 10px 2px 10px;
}

.mobile_menu_block:hover {
background: #7cb94b;
}

.mobile_menu {
float: right;
border-left: 1px solid #7eb750;
text-align: right;
padding: 4px 3px;
font-size: 23px;
display: inline-block;
color: #578e2b;
}

.mobile_menu:hover {
background: #7cb94b;
}

.menu_ava {
color: #fff;
padding: 0 4px;
font-size: 9px;
}

.set_chat {
float: right;
font-size: 18px;
color: #c3c4c2;
padding: 8px 0 8px 8px;
margin-top: -26px;
}
.set_chat:hover {
color: #8ac858;
}