/*----------------------------------------------------- FONTS --------------------------------------------------------*/
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-ExtraLight.woff2") format("woff2"),
    url("fonts/Manrope-ExtraLight.woff") format("woff"),
    url("fonts/Manrope-ExtraLight.ttf") format("ttf");
  font-weight: 1;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-ExtraLight.woff2") format("woff2"),
    url("fonts/Manrope-ExtraLight.woff") format("woff"),
    url("fonts/Manrope-ExtraLight.ttf") format("ttf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-Light.woff2") format("woff2"),
    url("fonts/Manrope-Light.woff") format("woff"), url("fonts/Manrope-Light.ttf") format("ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-Regular.woff2") format("woff2"),
    url("fonts/Manrope-Regular.woff") format("woff"),
    url("fonts/Manrope-Regular.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-Medium.woff2") format("woff2"),
    url("fonts/Manrope-Medium.woff") format("woff"),
    url("fonts/Manrope-Medium.ttf") format("ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-SemiBold.woff2") format("woff2"),
    url("fonts/Manrope-SemiBold.woff") format("woff"),
    url("fonts/Manrope-SemiBold.ttf") format("ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-Bold.woff2") format("woff2"),
    url("fonts/Manrope-Bold.woff") format("woff"), url("fonts/Manrope-Bold.ttf") format("ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: Manrope;
  src: url("fonts/Manrope-ExtraBold.woff2") format("woff2"),
    url("fonts/Manrope-ExtraBold.woff") format("woff"),
    url("fonts/Manrope-ExtraBold.ttf") format("ttf");
  font-weight: 800;
  font-style: normal;
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Generated by Glyphter (http://www.glyphter.com) on  Thu May 23 2024*/
@font-face {
    font-family: 'zvukradio';
    src: url('fonts/zvukradio.woff') format('woff'),
         url('fonts/zvukradio.svg#Zvukradio.com') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='rs-']:before{
	display: inline-block;
	font-family: 'zvukradio';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.rs-waves:before{content:'\0041';}
.rs-volume:before{content:'\0042';}
.rs-person:before{content:'\0043';}
.rs-star:before{content:'\0044';}
.rs-cog:before{content:'\0045';}
.rs-play:before{content:'\0046';}
.rs-dot:before{content:'\0047';}
.rs-triangle-rounded:before{content:'\0048';}
.rs-smile:before{content:'\0049';}
.rs-refresh:before{content:'\004a';}
.rs-back:before{content:'\004b';}
.rs-mail:before{content:'\004c';}
.rs-microfone:before{content:'\004d';}
.rs-melody:before{content:'\004e';}
.rs-a:before{content:'\004f';}
.rs-folder:before{content:'\0050';}
.rs-ant:before{content:'\0051';}
.rs-pencil:before{content:'\0052';}
.rs-href:before{content:'\0053';}
.rs-plus:before{content:'\0054';}
.rs-clock:before{content:'\0055';}
.rs-close:before{content:'\0056';}
.rs-info:before{content:'\0057';}
.rs-check:before{content:'\0058';}
.rs-camera::before{content: '\0059';}
.rs-video::before{content: '\0060';}
.rs-random:before {content:"\0062";}
.rs-next:before {content:"\0063";}
.rs-replace:before {content:"\0064";}
.rs-poll:before {content:"\0065";}
.rs-mic-off:before {content:"\0066";}
.rs-clip:before {content:"\0067";}
.rs-chat:before {content:"\0068";}
.rs-upload:before {content:"\0069";}
.rs-trash:before {content:"\0070";}
.rs-management:before {content:"\0071";}
.rs-question:before {content:"\0072";}
.rs-deny:before {content:"\0073";}

/*---------------------------------------------------- GLOBAL --------------------------------------------------------*/
:root{  
	--bgcolor: #009fe3;  
	--mhheight: 46px;  
	--maincolor: #ee0b21; 
	--bordermaincolor: #ee0b2166;
	--mainincolor: #0000004d; 
	--mainbgcolor: #dedede;
	--colortabs: #00000080;
	--errorcolor: #ee0b21; 
	--linkcolor: #0080ca;
	--linkcolorhover: #ee0b21;
}
.modal-open .modal{
	padding-right: 0!important;
}
.spacer{height: 200px;  }
.content{
	max-width: 1640px;
	padding: 0 15px;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	height: 100%;
}
.top_menu_right{
	flex-grow: 1;
	justify-content: flex-end;
}
.main_content{
	padding-top: var(--mhheight); 
	transition: 0.4s; 
	box-sizing: border-box;
	min-height: calc(100vh - 250px);
}
.main_content.drawer_open{margin-left: 260px;}
body{ color: black; margin: 0; font-family: Manrope;line-height:normal;}
.hidden{display: none !important;}
.uppercase{text-transform: uppercase;}
input.check_bad, textarea.check_bad{border: 1px solid var(--errorcolor)!important;}
input.check_bad:focus, textarea.check_bad:focus{outline: none;}
a:focus{outline: none;}
input[type='file']{display: none;}
/*----------------------------------LEFT PANEL-------------------------------*/
#left_panel{
	top: var(--mhheight);
	max-height: 100%;
	overflow-y: auto;
	max-width: 320px;
	width: 75%;
	height:calc(100% -  var(--mhheight));
	left: 0px;
	bottom: 0;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	background: white;
	position: fixed;
	z-index: 20;
	opacity: 0.001;
	-webkit-box-shadow: 3px 0 16px -3px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 3px 0 16px -3px rgba(0, 0, 0, 0.4);
	-ms-box-shadow: 3px 0 16px -3px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 3px 0 16px -3px rgba(0, 0, 0, 0.4);
	box-shadow: 3px 0 16px -3px rgba(0, 0, 0, 0.4);
}
.drawer_bg {
  position: fixed;
  background: rgba(0, 0, 0, 0.5) !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 19;
  opacity: 0.001;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}
#left_panel.drawer_open{
	left: 0;
	box-shadow: 1px 1px 5px 3px rgba(80, 68, 68, 0.4);
}
#left_panel.move{transition: none;}
#left_panel > *{
	box-sizing: border-box;
	background: white;
}
#left_menu{	
	margin: 1px 0;
	min-height: fit-content;
    height: calc(100vh - 231px);
}
#left_menu.login{min-height: calc(100vh - 416px);height: fit-content;}
.left_menu_item{
	color: #000000;
	font-size: 14px;
	padding: 12px 30px;
	display: block;
	text-decoration: none;
	cursor: pointer;
}
.icons_menu{
	margin-right: 8px;	
}
.left_menu_h2 .left_menu_item{
	padding: 25px 30px 25px 0 ;
}
.left_menu_h2 .left_menu_item, .icons_menu{
	font-size: 18px;
}
.left_menu_h2 a span{
	font-family: Manrope;
	margin-left: 12px;
	font-weight: bold;
	font-size: 15px;
}
.left_menu_item--info{
	float: right;
	border: 1px solid #0bbbee;
    border-radius: 25px;
    height: 23px;
    width: 23px;
    text-align: center;
    background-color: #0bbbee;
    color: white;
	font-size: 12px;	
	margin-top: -3px;
	padding-top: 4px;
	margin-right: -8px;
}

.left_menu_item:hover, .left_menu_item.current_page{color: var(--maincolor);}
.left_menu_item__icon{
	font-family: "Material Icons";
	font-size: 18px;
	margin-right: 18px;
	vertical-align: middle;
}
.left_panel_icon{
	display: inline-block;
	height: 25px;
}
.left_panel_icon img{height: 100%;}
#left_panel_share{
	height: 85px;
	padding-top: 20px; 
	font-size: 12px;
	line-height: 17px;
	margin-left: 44px;
}
#left_panel_share a{  color: rgba(0, 0, 0, 0.4);  }
#left_panel_share a:hover{
	color: rgba(0, 0, 0, 0.4);
}
#left_panel_footer{
	color: #62687f;
	height: 80px;
	margin-top: 18px;
	font-size: 14px;	
	padding:30px 0 0 44px;
}
.left_menu_h1{
	padding-left: 41px;
	height: auto;
    min-height: 67px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07)
}
.left_menu_h2{
	padding-left: 41px;
	height: auto;
    min-height: 67px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07)
}
.left_menu_h1_my_station{  border-top: 1px solid rgba(0, 0, 0, 0.07)  }
.left_menu_block_header .left_menu_item--info{font-size: 12px;  font-weight: normal;  }
.left_menu_h1:hover, .left_menu_h2 a:hover{ color: #000000;  }
.left_menu_h2 .left_menu_block_header{  padding-top: 0px;  padding-bottom: 0px;  }
.left_menu_block_header{
	padding-top: 23px;
	padding-bottom: 13px;
	font-weight: bold;
	cursor: pointer;
	font-size: 15px;
}
.left_menu_block_header#balanse {
	cursor: default;
}
.left_menu_block_header#balanse .left_menu_item{
	cursor: default;
}
.left_menu_h1_content{  padding-bottom: 20px;  }
left_menu_h1_content span {color: black;}
.left_menu_open{   
    position: absolute;
	right: 24px;
	margin-top: -16px;
	transition: transform 0.3s;
	transform: rotate(-90deg);
	font-size: 17px;
}
.left_menu_h1.open .left_menu_open{  transform:rotate(90deg);  }
.left_menu_h1.open .left_menu_block_header{  color: var(--maincolor);  }
.left_menu_h1.open{  background-color: #f2f7fd  }
.left_menu_h1.open #left_menu_logo.left_menu_radio {  background-position: -42px -130px;  }
#left_panel a:hover{  text-decoration: none;  }
.left_menu_h1.open .left_menu_item--info, .left_menu_h1 .left_menu_item--info{  color: white;  }


/*----------------LANG SELECT BLOCK-----------------------*/
#header_lang_select_wrapper{
	display:inline-block;
	width:fit-content;
	vertical-align:top;
	color:#000;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	transform: translateY(-6px);
	position: relative;
	margin-top: 3px;
}
#header_lang_select_wrapper i{transition:transform 0.3s}
#header_lang_select_wrapper span{margin-right:5px;}
#header_lang_select_current,.header_lang_select_item{cursor:pointer;}
#header_lang_select_list{display:none;bottom:calc(100% + 2px);position:absolute;width:100%;}
#header_lang_select_wrapper > *{background:rgb(245,249,253);border-radius:3px;border:1px solid #dedede;}
#header_lang_select_wrapper.show #header_lang_select_list{display:block;}
#header_lang_select_list{
	background: white;
    margin-bottom: 2px;
    padding-bottom: 2px;
}
#header_lang_select_current{
	padding:6.5px 8.5px;
}
.header_lang_select_item {
	color: #000;
	padding: 2px 10px;
	margin-top: 2px;
}
.header_lang_select_item:hover {
	background:rgb(245,249,253);
}
#header_lang_select_wrapper.show .fas.fa-angle-up{
	transform: rotate(180deg);
}

/*----------------------------USER BLOCK-------------------------------*/
#left_user_menu{
	padding-top: 21px;
	padding-bottom: 22px;
	margin-left: 41px;

}
#left_user_menu--logo{
	height: 86px;
	margin-bottom: 11px;
	width: 86px;
	border-radius: 50%;
	background-position: center center;
	background-size: contain;
}
#left_user_menu--info{
	font-size: 15px;
	line-height: 26px;
	font-weight: bold;
}	
#left_user_menu--balance{
	float: right;
	margin-top: -7px;
	font-weight: normal;
	font-family: Manrope;
	font-size: 13px;
}
.add_money_user{
	cursor: pointer;
    text-decoration: underline;
}
#left_user_menu--id, #left_user_menu--balance{
	color: rgba(0,0,0,0.6);
	line-height: 20px;
}
#left_user_menu--id{
	font-size: 14px;
}

#left_user_menu--editbtn {
    position: absolute;
	color: rgba(0,0,0,0.6);
    right: 27px;
    left: auto;
	font-size: 14px;
	margin-top: 13px;
}
	
/*--------------------------SHARE PANEL-----------------------------------*/
#left_panel_share__icons{
	display:inline-block;
	vertical-align: top;
	margin-left:31px;
}
.left_panel_share_icon{
	height: 25px;
	width: 25px;
	margin-right:15px;
	display: inline-block;
	color: black;
	font-size: 24px;
	vertical-align: top;
}
.left_panel_share_icon.icon-odnoklassniki{
    font-size: 18px;
    line-height: 25px;
    text-align: center;
}
.left_panel_share_icon:hover{color: black;}
.left_panel_share_icon:last-child{margin:0;}

/*--------------------------------CUSTOM SELECT---------------------------*/
#select_folder_to_media .vselect_wrapper.dropdown{
	margin-bottom: 20px;
	width: 100%;
}
.vselect_wrapper{
	position: relative;
	width: 272px;
	font-family: "Manrope";
	cursor: pointer;
	text-align: left;
	display: inline-block;
	background: #fff;
}
.vselect_wrapper.show .vselect_current{border: 1px solid #0080ca;}
.vselect_wrapper > *{
	width: 100%;
	box-shadow: 0px 1px 3.84px 0.16px rgba(3, 1, 1, 0.18);
}
.vselect_select{display:none;}
.vselect_current{
	padding: 14px 12px;
	height: 40px;
	border-radius: 3px;
	max-height:100%;
}
.vselect_current:after{content: none;}
.vselect_current__span{
	font-size: 14px;
	color: rgba(0,0,0,0.7);
	display: inline-block;
	max-width: calc(100% - 25px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1;
	vertical-align: top;
}
.vselect_current__span[data-value]{color:rgba(0,0,0,0.7);}
.vselect_current__arrow{
	float: right;
    transition: all 0.3s;
    height: 21px;
    margin-top: -5px;
	font-size: 21px;
	color: #000;
}
.vselect_wrapper.show .vselect_current__arrow{transform:rotate(180deg);}
.vselect_list{
	background: #fff;
	min-width:100%;
	height: max-content;
	overflow: auto;
	max-height: 350px;
	font-size: 14px;
	z-index: 2;
}
.vselect_wrapper.open .vselect_list{display: block;}
.vselect_list_item.dropdown-item{	
	color: #000;
	margin-bottom:4px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:.25rem 13px;
}


/*-----------------------------SHARE------------------------------------------*/
#social_btn{text-align: center;}
.social_icon{
	height: 40px;
	width: 40px;
	background-image: url('/view/pages/images/social_buttons.png');
	background-repeat: no-repeat;
	background-position-y: center;
	margin-right: 10px;
	display: inline-block;
}
#twitter_btn{background-position-x: -41px;}
#google_btn{background-position-x: -83px;}

/*----------------------------------------AJAX LOADER-------------------------
------------------------------------------------------------------------------*/
#ajax_loader{
	position:absolute;
	width:110px;
	height:110px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.circularG{
	position:absolute;
	background-color:rgb(255,255,255);
	width:26px;
	height:26px;
	border-radius:17px;
		-o-border-radius:17px;
		-ms-border-radius:17px;
		-webkit-border-radius:17px;
		-moz-border-radius:17px;
	animation-name:bounce_circularG;
		-o-animation-name:bounce_circularG;
		-ms-animation-name:bounce_circularG;
		-webkit-animation-name:bounce_circularG;
		-moz-animation-name:bounce_circularG;
	animation-duration:1.1s;
		-o-animation-duration:1.1s;
		-ms-animation-duration:1.1s;
		-webkit-animation-duration:1.1s;
		-moz-animation-duration:1.1s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#circularG_1{
	left:0;
	top:45px;
	animation-delay:0.41s;
		-o-animation-delay:0.41s;
		-ms-animation-delay:0.41s;
		-webkit-animation-delay:0.41s;
		-moz-animation-delay:0.41s;
}

#circularG_2{
	left:11px;
	top:11px;
	animation-delay:0.55s;
		-o-animation-delay:0.55s;
		-ms-animation-delay:0.55s;
		-webkit-animation-delay:0.55s;
		-moz-animation-delay:0.55s;
}

#circularG_3{
	top:0;
	left:45px;
	animation-delay:0.69s;
	-o-animation-delay:0.69s;
	-ms-animation-delay:0.69s;
	-webkit-animation-delay:0.69s;
	-moz-animation-delay:0.69s;
}

#circularG_4{
	right:11px;
	top:11px;
	animation-delay:0.83s;
	-o-animation-delay:0.83s;
	-ms-animation-delay:0.83s;
	-webkit-animation-delay:0.83s;
	-moz-animation-delay:0.83s;
}

#circularG_5{
	right:0;
	top:45px;
	animation-delay:0.97s;
	-o-animation-delay:0.97s;
	-ms-animation-delay:0.97s;
	-webkit-animation-delay:0.97s;
	-moz-animation-delay:0.97s;
}

#circularG_6{
	right:11px;
	bottom:11px;
	animation-delay:1.1s;
	-o-animation-delay:1.1s;
	-ms-animation-delay:1.1s;
	-webkit-animation-delay:1.1s;
	-moz-animation-delay:1.1s;
}

#circularG_7{
	left:45px;
	bottom:0;
	animation-delay:1.24s;
	-o-animation-delay:1.24s;
	-ms-animation-delay:1.24s;
	-webkit-animation-delay:1.24s;
	-moz-animation-delay:1.24s;
}

#circularG_8{
	left:11px;
	bottom:11px;
	animation-delay:1.38s;
	-o-animation-delay:1.38s;
	-ms-animation-delay:1.38s;
	-webkit-animation-delay:1.38s;
	-moz-animation-delay:1.38s;
}


@keyframes bounce_circularG{
	0%{	transform:scale(1);}
	100%{transform:scale(.3);}
}

@-o-keyframes bounce_circularG{
	0%{-o-transform:scale(1);}
	100%{-o-transform:scale(.3);}
}

@-ms-keyframes bounce_circularG{
	0%{-ms-transform:scale(1);}
	100%{-ms-transform:scale(.3);}
}

@-webkit-keyframes bounce_circularG{
	0%{	-webkit-transform:scale(1);}
	100%{-webkit-transform:scale(.3);}
}

@-moz-keyframes bounce_circularG{
	0%{	-moz-transform:scale(1);}
	100%{-moz-transform:scale(.3);}
}




/*####################################################################################################################*/
/*################################################## TABLET ##########################################################*/
/*####################################################################################################################*/
@media screen and (min-width:768px){

}
@media screen and (max-width:1199px){

}
@media screen and (max-width:996px){

}

/*####################################################################################################################*/
/*################################################### PHONE ##########################################################*/
/*####################################################################################################################*/
@media screen and (max-width:767px){

}
@media screen and (max-width:575px){
	.white_button{font-size:14px;}
	.content{padding: 0 16px;}
}
@media screen and (max-width:499px){
	.fav_rj_logo{height: 50px;}
	.rj{height: 50px;}
	#bc-list_dlg a{
		width: 40px; overflow: hidden; padding: 0; 
		min-width: 10px;
		background-image: url('images/icons/ic_dlg_stations.png');
		background-repeat: no-repeat;
		text-indent: 40px;
	}
	.left_panel_share_icon{margin-right:7px;}

}