:root {
    --rp-size: 1;
}

.pehkreader .recorder_panel{
	z-index: 199;
	position: absolute;
	left: calc(3px * var(--rp-size));
	top: calc(2px * var(--rp-size));
	transform-origin: 0 0;
	font-family: microsoft yahei;
}

.pehkreader .recorder_panel .record_panel {
	position: absolute;
	border: calc(10px * var(--rp-size)) #7bccff solid;
	border-radius: calc(20px * var(--rp-size));
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	/*z-index: 200;
	*/min-width: calc(690px * var(--rp-size));
	min-height: calc(315px * var(--rp-size));
	-webkit-border-radius: calc(20px * var(--rp-size));
	-moz-border-radius: calc(20px * var(--rp-size));
	-ms-border-radius: calc(20px * var(--rp-size));
	-o-border-radius: calc(20px * var(--rp-size));
}

.pehkreader .recorder_panel .record_panel .media_panel_header {
	padding: 0 calc(10px * var(--rp-size)) calc(10px * var(--rp-size)) calc(10px * var(--rp-size));
	border-top-left-radius: calc(10px * var(--rp-size));
	border-top-right-radius: calc(10px * var(--rp-size));
	background-color: #ceedff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: calc(90px * var(--rp-size));
	cursor: pointer;
}

.pehkreader .recorder_panel .record_panel .media_panel_body {
	padding: 0 calc(10px * var(--rp-size));
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*flex-grow: 1;*/
}

.pehkreader .recorder_panel .record_panel .media_panel_body .media_panel_progress {
	width: calc(520px * var(--rp-size));
	height: calc(70px * var(--rp-size));
	/* padding: 0 calc(10px * var(--rp-size)); */
	background-color: #8fd6e8;
	border: calc(1px * var(--rp-size)) solid #99b5c4;
	border-radius: calc(10px * var(--rp-size));
	display: flex;
	align-items: center;
	/* flex-grow: 1; */
	font-size: calc(35px * var(--rp-size));
}

.pehkreader .recorder_panel .record_panel .media_panel_body .media_panel_progress .media_panel_time {
	margin-left: calc(10px * var(--rp-size));
	/*font-size: calc(18px * var(--rp-size));*/
	/*position: relative;*/
	/*top: calc(1px * var(--rp-size));*/
}

.pehkreader .recorder_panel .record_panel .media_panel_footer {
	padding: 0 calc(10px * var(--rp-size)) calc(5px * var(--rp-size)) calc(10px * var(--rp-size));
	background-color: #ffffff;
	border-bottom-left-radius: calc(5px * var(--rp-size));
	border-bottom-right-radius: calc(5px * var(--rp-size));
	display: flex;
	align-items: center;
}

.pehkreader .recorder_panel .record_panel .media_panel_footer .text {
	/*margin-left: calc(5px * var(--rp-size));*/
	color: grey;
}
/* record end*/

/*player_panel*/
.pehkreader .recorder_panel .player_panel {
	position: absolute;
	border: calc(10px * var(--rp-size)) #7bccff solid;
	background-color: #ffffff;
	border-radius: calc(20px * var(--rp-size));
	display: flex;
	flex-direction: column;
	/* z-index: 200; */
	min-width: calc(870px * var(--rp-size));
	min-height: calc(405px * var(--rp-size));
}

.pehkreader .recorder_panel .player_panel .media_panel_header {
	height: calc(90px * var(--rp-size));
	padding: 0 calc(10px * var(--rp-size)) calc(10px * var(--rp-size)) calc(10px * var(--rp-size));
	border-top-left-radius: calc(10px * var(--rp-size));
	border-top-right-radius: calc(10px * var(--rp-size));
	background-color: #ceedff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*.pehkreader .recorder_panel .player_panel .media_panel_header .media_panel_icon {
	width: calc(30px * var(--rp-size));
	height: calc(40px * var(--rp-size));
}
*/


.pehkreader .recorder_panel .player_panel .media_panel_body {
	background-color: #ffffff;
	padding: 0 calc(20px * var(--rp-size));
}

.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up {
	width: 100%;
	display: flex;
}

.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up .media_panel_progress {
	width: 100%;
    /* width: calc(calc(818px * var(--rp-size))); */
    height: calc(70px * var(--rp-size));
    margin: calc(25px * var(--rp-size)) 0 calc(15px * var(--rp-size)) 0;
    background-color: #8fd6e8;
    border: calc(1px * var(--rp-size)) solid #99b5c4;
    border-radius: calc(10px * var(--rp-size));
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
    /* background-image: url(../../recorder/image/bg_radio@2x.png?t=202511041746); */
    display: flex;
    align-items: center;
    /* flex-grow: 1; */
    font-size: calc(35px * var(--rp-size));
}

.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up .media_panel_progress .media_panel_time, .pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up .media_panel_progress .media_panel_time_end {
	margin: 0 calc(20px * var(--rp-size));
	position: relative;
	top: calc(1px * var(--rp-size));
}
.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up .media_panel_progress .media_panel_bar {
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up .media_panel_progress .media_panel_bar .media_panel_ready{
	width: 100%;
	height: calc(2px * var(--rp-size));
	background-color: grey;
}

.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up .media_panel_progress .media_panel_bar .media_panel_current{
	position: absolute;
	width: 0;
	height: calc(2px * var(--rp-size));
	background-color: #3f9df4;
}
.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_up .media_panel_progress .media_panel_bar .media_panel_current .media_panel_dot {
	position: absolute;
    top: calc(-12px * var(--rp-size));
    right: calc(-10px * var(--rp-size));
    width: calc(24px * var(--rp-size));
    height: calc(28px * var(--rp-size));
    /* background-color: #d7dde3; */
    /* border-radius: 50%; */
	background-image: url(../../recorder/image/btn_bar_radio@2x.png?t=202511041746);
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_down {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_down .media_panel_volume {
	display: flex;
    align-items: center;
    padding: calc(10px * var(--rp-size)) calc(35px * var(--rp-size)) calc(10px * var(--rp-size)) calc(17px * var(--rp-size));
    /* margin-right: calc(5px * var(--rp-size)); */
    border-radius: calc(35px * var(--rp-size));
    background-color: #8fd6e8;
}
.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_down .media_panel_volume .media_panel_volume_bg {
	background-color: #185571;
	padding: calc(5px * var(--rp-size)) calc(5px * var(--rp-size)) calc(5px * var(--rp-size)) 0;
	border-radius: calc(25px * var(--rp-size));
	height: calc(50px * var(--rp-size));
	width: calc(375px * var(--rp-size));
}
.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_down .media_panel_volume .media_panel_triangle {
	width: calc(70px * var(--rp-size));
	height: 0;
	border-bottom: calc(35px * var(--rp-size)) solid #3386ac;
	border-left: calc(375px * var(--rp-size)) solid transparent;
}

.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_down .media_panel_volume .media_panel_volume_cover {
	max-width: calc(345px * var(--rp-size));
	position: absolute;
	right: calc(45px * var(--rp-size));
	width: 0;
	height: calc(57px * var(--rp-size));
	background-color: #8fd6e8;
	border-top-right-radius: calc(25px * var(--rp-size));
	border-bottom-right-radius: calc(25px * var(--rp-size));
}
.pehkreader .recorder_panel .player_panel .media_panel_body .media_panel_down .media_panel_volume .media_panel_btn_volume {
	position: absolute;
	top: calc(-7px * var(--rp-size));
	left: calc(-50px * var(--rp-size));
}
.pehkreader .recorder_panel .player_panel .media_panel_footer {
	padding: 0 calc(20px * var(--rp-size)) calc(5px * var(--rp-size)) calc(20px * var(--rp-size));
	border-bottom-left-radius: calc(5px * var(--rp-size));
	border-bottom-right-radius: calc(5px * var(--rp-size));
	background-color: #ffffff;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;

}
.pehkreader .recorder_panel .record_panel .media_panel_footer .media_panel_text {
	font-size: calc(40px * var(--rp-size));
	opacity: 0;
}

.pehkreader .recorder_panel .player_panel .media_panel_footer .media_panel_text {
	font-size: calc(40px * var(--rp-size));
	opacity: 1 !important; 
}


.pehkreader .recorder_panel .media_panel_date {
	position: relative;
	top: calc(1px * var(--rp-size));
}



/*btn & icon*/
.pehkreader .recorder_panel .min_media_panel {
	width: calc(90px * var(--rp-size));
	height: calc(90px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../images/tip_radio@2x.png?t=202511041746);
	cursor: pointer;
	/*z-index: 200;*/
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_btn, .pehkreader .recorder_panel .player_panel .media_panel_btn, .pehkreader .recorder_panel .player_panel .media_panel_dot{
	cursor: pointer;
}
.pehkreader .recorder_panel .player_panel .media_panel_dot:hover {
	/*background-color: #e8eef4 !important;*/
}

.pehkreader .recorder_panel .record_panel .media_panel_btn_del, .pehkreader .recorder_panel .player_panel .media_panel_btn_del {
	width: calc(70px * var(--rp-size));
	height: calc(70px * var(--rp-size));
	margin: 0 calc(10px * var(--rp-size)) 0 calc(10px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_del, .pehkreader .recorder_panel .player_panel .media_panel_icon_del{
	background-image: url(../../recorder/image/btn_bookmark_del@2x.png?t=202511041746);
	background-repeat: no-repeat;
	background-size: contain;
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_del:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_del:hover {
	background-image: url(../../recorder/image/btn_bookmark_del_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_btn_hide, .pehkreader .recorder_panel .player_panel .media_panel_btn_hide {
	width: calc(70px * var(--rp-size));
    height: calc(70px * var(--rp-size));
    margin: 0 calc(10px * var(--rp-size));
    background-repeat: no-repeat;
    background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_hide, .pehkreader .recorder_panel .player_panel .media_panel_icon_hide {
	background-image: url(../../recorder/image/btn_bookmark_hide@2x.png?t=202511041746);
	background-repeat: no-repeat;
	background-size: contain;
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_hide:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_hide:hover {
	background-image: url(../../recorder/image/btn_bookmark_hide_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_btn_record, .pehkreader .recorder_panel .player_panel .media_panel_btn_record {
	width: calc(100px * var(--rp-size));
	height: calc(100px * var(--rp-size));
	margin: calc(15px * var(--rp-size)) 0 calc(5px * var(--rp-size)) calc(5px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_record, .pehkreader .recorder_panel .player_panel .media_panel_icon_record {
	background-image: url(../../recorder/image/btn_radio_ready@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_record:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_record:hover {
	background-image: url(../../recorder/image/btn_radio_ready_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_btn_play, .pehkreader .recorder_panel .player_panel .media_panel_btn_play {
	width: calc(100px * var(--rp-size));
	height: calc(100px * var(--rp-size));
	margin: calc(5px * var(--rp-size)) calc(25px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_play, .pehkreader .recorder_panel .player_panel .media_panel_icon_play {
	background-image: url(../../recorder/image/btn_radio_play@2x.png?t=202511041746);
	background-repeat: no-repeat;
	background-size: contain;
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_play:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_play:hover {
	background-image: url(../../recorder/image/btn_radio_play_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_btn_volume, .pehkreader .recorder_panel .player_panel .media_panel_btn_volume {
	width: calc(70px * var(--rp-size));
	height: calc(70px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_volume, .pehkreader .recorder_panel .player_panel .media_panel_icon_volume {
	background-image: url(../../recorder/image/btn_volume@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_volume:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_volume:hover {
	background-image: url(../../recorder/image/btn_volume_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_btn_stop, .pehkreader .recorder_panel .player_panel .media_panel_btn_stop {
	width: calc(70px * var(--rp-size));
	height: calc(70px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_stop, .pehkreader .recorder_panel .player_panel .media_panel_icon_stop {
	background-image: url(../../recorder/image/btn_radio_stop@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_stop:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_stop:hover {
	background-image: url(../../recorder/image/btn_radio_stop_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_pause, .pehkreader .recorder_panel .player_panel .media_panel_icon_pause {
	width: calc(100px * var(--rp-size));
	height: calc(100px * var(--rp-size));
	margin: calc(5px * var(--rp-size)) calc(25px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_pause, .pehkreader .recorder_panel .player_panel .media_panel_icon_pause {
	background-image: url(../../recorder/image/btn_radio_pause@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_pause:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_pause:hover {
	background-image: url(../../recorder/image/btn_radio_pause_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_volume, .pehkreader .recorder_panel .player_panel .media_panel_icon_volume {
	width: calc(70px * var(--rp-size));
	height: calc(70px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_volume, .pehkreader .recorder_panel .player_panel .media_panel_icon_volume {
	background-image: url(../../recorder/image/btn_volume@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_icon_volume:hover, .pehkreader .recorder_panel .player_panel .media_panel_icon_volume:hover {
	background-image: url(../../recorder/image/btn_volume_press@2x.png?t=202511041746);
}

.pehkreader .recorder_panel .record_panel .media_panel_gif, .pehkreader .recorder_panel .player_panel .media_panel_gif {
	position: relative;
	top: calc(-2px * var(--rp-size));
	width: calc(120px * var(--rp-size));
	height: calc(55px * var(--rp-size));
	margin-left: calc(5px * var(--rp-size));
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_radio1, .pehkreader .recorder_panel .player_panel .media_panel_icon_radio1 {
	background-image: url(../../recorder/image/radio1@2x.png?t=202511041746);
	background-repeat: no-repeat;
	background-size: contain;
}
.pehkreader .recorder_panel .record_panel .media_panel_icon_radio3, .pehkreader .recorder_panel .player_panel .media_panel_icon_radio3 {
	background-image: url(../../recorder/image/radio3@2x.png?t=202511041746);
	background-repeat: no-repeat;
	background-size: contain;
}