@import url('/css/mm/roboto.css');


@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(../../iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
	src: local('Material Icons'),
	local('MaterialIcons-Regular'),
	url(../../iconfont/MaterialIcons-Regular.woff2) format('woff2'),
	url(../../iconfont/MaterialIcons-Regular.woff) format('woff'),
	url(../../iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.to_login{position: absolute;top:0px;right: 0px;padding: 13px;font-size: 15px;color:#fff;}
.to_login span{margin-left: 5px;}
.head {
	width: 100%;
	height: 50px;
	background-color: #5780ab;
	z-index: 1000;
}
.head .left {
  height: 50px;
  cursor: pointer;
  width: 60px;
  display: flex;
  color: #ffffff;
  float: left;
  box-sizing: border-box;
  border-right: transparent;
}
.head .left i {
  margin: auto;
  font-size: 28px;
  line-height: 28px;
}
.head .center {
  height: 50px;
  width: calc(100% - 10px);
  float: left;
  font-size: 20px;
  font-weight: 100;
  display: flex;
}
.head .center img {
  margin: auto;
}
.head .center strong {
  color: #64aa46;
}
.head .center span {
  margin: auto;
  color: #ffffff;
  font-size: 30px;
  font-weight: 400;
}
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: inherit;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}

.iconSize1 {
	width: 24px !important;
	height: 24px !important;
	font-size: 24px !important;
}

.svgStandart {
	width: 24px;
	height: 24px;
	font-size: 24px;
	margin: auto;
}

.svgStandart path {
	fill: #000;
}

.whiteSvg path {
	fill: #fff;
}

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


body{
	font-size: 14px;
	padding: 0px;
	margin: 0px;
	background: #5780ab;
	color:#000;
	line-height: 1.182;
	font-weight: normal;
	overflow-x:hidden;
	font-family: Roboto !important;
	}

input, textarea, select{outline: none;border: 1px solid #B9C4D1;width: 100%;font-size: 13px;}

body, input, button, textarea{font-family: Lucida Grande,Verdana,Tahoma,Arial,Sans-Serif,Lucida Sans;}
a{text-decoration: none;cursor: pointer;color: rgb(255 255 255);}
a:hover{/* text-decoration: underline; */}

.fl_l{float: left;}
.fl_r{float: right;}
.clear{clear: both;}
.bsbb, .head_title, input, textarea{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}
.no_select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
.no_display{display: none;}
.shadow{box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.1);}
.mob_online{width: 6px;height: 6px;background-color: #6BA86B;display: inline-block;border-radius: 4px;margin-left: 4px;}
.audioLoadBut{text-align: center;padding: 10px;background-color: rgba(87, 128, 171, 0.08);color: #5780ab;border-radius: 3px;margin-bottom: 10px;cursor: pointer;}
#page{margin-bottom: 15px;}
.info_center{text-align: center;color:#777;padding: 100px 20px;}
.online{color: rgb(107, 168, 107);font-size: 10px;}
.fixed{position: fixed;}

.kj_wrap {
	width: 900px;
	margin: 0px auto;
	position: relative;
}

.head_wrap{width: 100%;background: orange;}
.site_head{
	width: 100%;
	left:0;
	top:0;
	height: 43px;
	position: fixed;
	z-index: 100;
	background: #5780ab;
	transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}
.site_logo{width: 100%;height: 43px;background: url('/img/m/logo.png') 10px center no-repeat;cursor: pointer;background-size: 70%;}
.site_logo:hover{background-color: #416386;}

.white_wrap{padding: 10px;background: #fff;}
.white_wrap.border{padding: 0px;border:1px solid #e4e5e6;border-top: 0px;}

/* left */
.left_wrap{width:260px;position: absolute;top:0;left:0;z-index: 99;}
.site_head .left_wrap{height: 43px;}

/* right */
.right_wrap{margin-left: 260px;position: relative;}
.site_head .right_wrap{height: 43px;}


/* menu */
.site_nemu{list-style: none;}
.site_nemu a{
	padding: 15px 15px 15px 15px;
	color: rgb(93, 121, 150);
	display: block;
	text-decoration: none;
}
.site_nemu a:first-child, .site_nemu.gray a{border-top: 0px;}
.site_nemu a:hover{background: #fff;}
.site_nemu a .icon{font-size: 20px;margin: 0 20px 0 10px;position: relative;}
.site_nemu a .value{
	font-weight: 400;
	margin-top: 1px;
	font-family: Roboto;
	display: inline;
	float: left;
	font-size: 15px;
	color: rgb(53, 53, 53);
}
.site_nemu a .value .new, .site_nemu a .icon .new{background-color: #5780ab;padding: 3px 4px;border-radius: 2px;margin-left: 10px;color: #ffffff;}
.site_nemu a .value .new:empty, .site_nemu a .icon .new:empty{display: none;}
.site_nemu a .icon .new{display: none;position: absolute;bottom: -5px;right: -18px;font-size: 12px;font-weight: bold;border-radius: 100%;padding: 2px 4px;}
.site_nemu i {
	float: left;
	margin-right: 15px;
	font-size: 16px;
}
.site_nemu.gray{margin-top: 10px;}
.site_nemu.gray a{color:#8a8a8a;}
.site_nemu.gray a .value{font-weight: normal;}
.site_nemu.gray a:hover{background-color:#e7e7e7;}

.box_menu{padding: 10px;background-color: #F7F7F7;border-bottom: 1px solid #DAE1E8;}

/* navigation */
.head_title{height: 43px;margin-right: 247px;color: rgb(255, 255, 255);font-family: Roboto;font-size: 1.29em;padding: 0px 23px;line-height: 42px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.head_title.back:hover{text-decoration: underline}
.head_title.back{background: url('/img/m/back_black.png') no-repeat 6px center;cursor: pointer;}

/* head tools */
.head_right_tools{height: 43px;width: auto;padding-left:10px;}

.head_tools_buttons{list-style: none;}
.head_tools_buttons li, .nav_show_but{padding: 0 4px;cursor: pointer;font-size: 25px;color: rgb(255, 255, 255);height: 43px;line-height: 43px;position: relative;}
.head_tools_buttons li:hover, .nav_show_but:hover{color: #e4eaf0 !important;}
.head_tools_buttons li .num, .nav_show_but .num {
	position: absolute;
	color: rgb(255, 255, 255);
	top: 7px;
	right: 6px;
	padding: 2px 5px;
	background: rgb(212, 105, 103);
	font-size: 11px;
	line-height: 100%;
	border-radius: 7px;
}
.head_tools_buttons li .num:empty, .nav_show_but .num:empty{display: none;}

.nav_show_but{position: absolute;top:0px;left:0px;}
.nav_show_but.hide{transform: rotate(180deg);left:initial;right: 0px;width: 35px;background: url('/img/m/back_black.png') no-repeat center center;}


/* search */
.search_wrap{width: 275px;height: 43px;}
.search_wrap input{
    width: 180px;
    padding: 7px 13px;
    border: 0px;
    margin-top: 8px;
    border-radius: 16px;
    background: rgb(255, 255, 255);
    color:rgba(0,0,0,0.7);
}

.search_wrap input::-webkit-input-placeholder, .head_search input::-webkit-input-placeholder{color:rgba(0,0,0,0.7);}
.search_wrap input::-moz-input-placeholder, .head_search input::-moz-input-placeholder{color:rgba(0,0,0,0.7);}

.head_search input{box-sizing:border-box;border:0;border-bottom: 1px solid rgba(0,0,0,0.05);width: 100%;height: 100%;padding: 12px 55px 12px 43px;font-size: 15px;background: #5780ab url('/img/m/se_head_black.png') no-repeat 15px center;color: #fff;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.head_search input::placeholder{color:#bbb}

/* button */
.button{background: rgb(107, 168, 107);border: 0;padding: 9px 15px;text-align: center;color: #fff;font-family:Roboto;font-weight: 400;cursor: pointer;outline: none;border-radius: 4px;font-size: 14px;line-height: 100%;}
.button.red{
	background: rgb(243, 236, 236);
	color: rgb(169, 101, 101);
}
.button.inline{background: transparent;color:#588f4c;font-weight: normal;}

/* birthday */
.bd_block{border:1px solid #ddd;padding:5px;background: #E1E7ED;margin: 10px;position: relative;}
.bd_title{color: rgb(70, 128, 68);font-weight: bold;}
.bd_block .icon-gift{font-size: 18px;color: rgb(70, 128, 68);}
.bd_text{margin-top: 3px;margin-left: 28px;color: #777;}
.bd_users{margin-top:5px;margin-left: 26px;}
.bd_users img{width:30px;height:30px;border-radius: 3px;cursor: pointer;margin: 3px 6px 0 0;}
.bd_close{position: absolute;top:5px;right:5px;font-size:18px;color: rgb(70, 128, 68);cursor: pointer;}

/* items */
.items_title{padding: 7px 10px;color: #5780ab;background: #d2d8e0;font-weight: bold;margin: 0px -12px;}
.one_item{padding: 13px 10px;border-top:1px solid 1px solid #eee;color: #3f6082;font-weight: bold;margin: 0px -12px;}
.one_item:first-child{border-top: 0px;}


.mainWhiteBox {
	width: 100%;
	background: rgb(255,255,255);
}
.main {
	width: 100%;
	float: left;
}
.topPadding15 {
	padding-top: 15px;
}
.bottomPadding15 {
	padding-bottom: 15px;
}
.boxPadd15 {
	width: calc(100% - 30px);
	float: left;
	box-sizing: border-box;
	margin: 0 15px;
}
.border1Bottom {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.border1Top {
	border-top: 1px solid rgba(0,0,0,0.1);
}
.border1Left {
	border-left: 1px solid rgba(0,0,0,0.1);
}
.border1Right {
	border-right: 1px solid rgba(0,0,0,0.1);
}
.profileInfoLeft {
	width: calc(100% - 120px);
	float: left;
	box-sizing: border-box;
	padding-right: 10px;
}
.profileInfoRight {
	width: 120px;
	float: right;
	height: 120px;
	position: relative;
}
.profile_avatar {
	width: 120px;
	float: left;
	height: 120px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	display: flex;
}
.cover_shadow {
	width: 120px;
	position: absolute;
	height: 120px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	display: flex;
	background: -moz-radial-gradient(center, ellipse cover, rgba(14,61,0,0) 0%, rgba(44,76,32,0.65) 100%);
	background: -webkit-radial-gradient(center, ellipse cover, rgba(14,61,0,0) 0%,rgba(44,76,32,0.65) 100%);
	background: radial-gradient(ellipse at center, rgba(14,61,0,0) 0%,rgba(44,76,32,0.65) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000e3d00', endColorstr='#a62c4c20',GradientType=1 );

}
.profile_avatar img {
	margin: 10px;
	width: 100px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.p_username {
	float: left;
	width: 100%;
	color: #000;
}
.p_username .name_t {
	font-size: 25px;
	font-family: Roboto;
	font-weight: 600;
	color: rgb(53, 53, 53);
}
.online_t .mob_online {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-left: 10px;
}
.p_status {
	width: 100%;
	float: left;
	margin-top: 5px;
}
.p_status span {
	font-size: 16px;
	font-family: Roboto;
	font-weight: 100;
	line-height: 22px;
	color: rgb(85, 85, 85);
}
.p_edit {
	margin-top: 5px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 3px 6px;
	font-size: 12px;
	font-family: Roboto;
	color: rgb(144, 144, 144);
	float: left;
}
.p_info_field {
	float: left;
	width: 100%;
	font-family: Roboto;
	font-size: 13px;
	margin-top: 5px;
}

.headerFirst {
	height: 42px;
	background-color: rgb(255, 255, 255);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	box-sizing: border-box;
	transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}

.balance_title {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	font-size: 20px;
	text-align: center;
}

.balance_num {
	width: 100%;
	display: flex;
}

.balance_num .divBalanceNum {
	color: rgb(255, 255, 255);
	margin: auto;
	box-sizing: border-box;
	padding: 14px 8px 12px 13px;
	font-size: 15px;
	text-align: center;
	background-color: #5780ab;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.balance_num .divBalanceNum b {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding: 5px 12px;
	background-color: white;
	color: #000;
	margin-left: 5px;
}

.balance_descr {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	color: rgb(51, 51, 51);
	line-height: 23px;
}

.headerFixed {
	height: 85px;
	width: 100%;
}

.headerHide .headerFirst {
	top: -42px !important;
}

.headerHide .headerFixed {
	height: 42px !important;
}

.headerHide {
	padding-top: 0 !important;
}

@media(max-width: 900px) {
	.kj_wrap{width: 100%;}
}

@media(max-width: 800px) {
	.left_wrap{width: 69px;}
	#kj_wrap .left_wrap{border-right: 1px solid #ddd;}
	.right_wrap{margin-left: 70px;}
	.site_logo{background-image: url('/img/m/kab_ico30.png');background-position: center;}

	/* menu */
	.site_nemu{background: #fff;}
	.site_nemu a .value{display: none;}
	.site_nemu a .icon{float: none;}
	.site_nemu a{text-align: center;}
	.site_nemu a .icon .new{display: block;}
	.site_nemu.gray{background-color: transparent;}

	#audioInfo_left{display: none;}
	.playerPlayBtn{float: none;text-align: center;}
}

@media(max-width: 800px) and (min-width: 471px){
	#str_bd_tt, .bd_close, .bd_text{display: none;}
	.bd_users{margin-left: 4px;}
	.bd_title{text-align: center;}
}

@media(max-width: 470px) {
	.left_wrap{width: 0px;display: none;border-right:0px !important;}
	.right_wrap{margin-left: 0px;}
	.site_head .search_wrap{display: none;}

	.head_title{text-align: center;margin: 0 43px;}
	.nav_show_but{display: block;}

	.left_wrap.shown{width: 100%;display: block;}
	.left_wrap.shown .value{display: block;}
	.left_wrap.shown .site_nemu a .icon{float: left;}
	.left_wrap.shown .site_nemu a{text-align: left;}
	.left_wrap.shown .site_nemu a .icon .new{display: none;}

	.left_wrap.shown .head_search{display: block;}
	.left_wrap.shown .site_logo, .left_wrap.shown ~ .right_wrap{display: none;}

	.left_wrap.shown #audioInfo_left{display: block;}
	.left_wrap.shown .playerPlayBtn{float: left;text-align: left;}

	body{background: rgb(87 128 171);}
}

.div_focus {
	outline: none;
}

/* Как видно, начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */

.div_focus.attch_gif img {
	visibility: visible;
	max-width: 100%;
	background: none !important;
}

.div_focus.attch_gif:focus {
	background: none;
}

.div_focus.attch_gif .gif_preloader {
	opacity: 1 !important;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition:  all 0.3s ease;
	-moz-transition:  all 0.3s ease;
}

.div_focus.attch_gif:focus .gif_preloader, .im_post .div_focus.attch_gif .gif_preloader {
	opacity: 0 !important;
}

.im_post .div_focus.attch_gif {
	background: none !important;
}

.im_post .div_focus.attch_gif img {
	visibility:visible !important;
	border:0;
}

.div_focus.attch_gif:focus img {
	visibility: visible;
	border:0;
}