/* CSS file generated by BBNIT */
/* last modify 2019-5-27 */ 

.bbn_f_black_normal{font-weight:normal;font-size:1em;color:#000000;vertical-align:middle}
.bbn_f_black{font-weight:bold;font-size:1em;color:#000000;vertical-align:middle}
.bbn_bg_green{font-weight:bold;font-size:1em;background-color:#006633;color:#ffffff;text-align:center;vertical-align:middle}
.bbn_f_green{font-weight:bold;font-size:1em;color:#006633;vertical-align:middle}
.bbn_bg_red{font-weight:bold;font-size:1em;background-color:red;color:#ffffff;text-align:center;vertical-align:middle;font-style: normal;}
.bbn_f_red{font-weight:bold;font-size:1em;color:red;vertical-align:middle}
.student_top_info1{font-weight:bold;font-size:1em;color:#fff;background-color:#008852;vertical-align:middle}
.bbn_challeng_view{   
   font-size: 1.5em;
   font: Helvetica, Verdana, sans-serif;  
   /*border-left-style:"dashed red" ;
   border-top-style:"dashed red" ;
   border:"dashed red" ; 
   border-bottom: 1px solid #ccc; */
 }
td {
	font-size: 1rem;
}
.td.bbn_f_red.bbn_no_border.bbn_challeng_view{
	border-top-width:0px;
	border-left-width:0px;
}
.inputGroupPatch {
	margin-bottom: auto !important;
	width: auto! important;
	}
.bbn_no_border {
   border:0px;
   }
/* jquery-value need*/
   .bbn_help-block {
    display: block;
    margin-top: auto;
	margin-bottom: auto;
	margin-left:0.5rem;
    color: #EB0808;
    border-color: #F07575;
    font-weight:bold;
   }
.bbntable_verse {
    font-size: 1.25em;   
    font: Helvetica, Verdana, sans-serif;   
   }

.BBN_spoiler111 {
	font-size: 1.5em;
	/*color:#006633;  /*未修改成功*/
	font: Helvetica, Verdana, sans-serif;   	
}
.BBN_buttonLikeLink {
    background:none!important;
     border:none; 
     padding:0!important;
    
    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:rgb(9, 32, 243);
     text-decoration:underline;
     cursor:pointer;
}
.BBN_buttonLikeLink:hover {
    background: #356094;
    border: solid 0px #2A4E77;
    text-decoration: none;
}
.BBN_table_td {
	padding-top: .75rem;
    padding-bottom: .75rem;
   /* background-color: rgba(86,61,124,.15); */
    border: 1px solid rgba(25, 12, 150, 0.918);
}
/* fontawesome 4.7.0 verson 动画单选钮，复选框 */
/*@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); for make-faith-promise   wating for check */
label{
	position: relative;
	cursor: pointer;
	color: #666;
	font-size: 30px;
}

input[type="checkbox"], input[type="radio"]{
	position: absolute;
	right: 9000px;
}

/*Check box*/
input[type="checkbox"] + .label-text:before{
	content: "\f096";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 1.5rem;
	text-transform: none;
	line-height: 2;
	-webkit-font-smoothing:antialiased;
	width: 1rem;
	display: inline-block;
	margin-right: 1rem;
}

input[type="checkbox"]:checked + .label-text:before{
	content: "\f14a";
	color: #2980b9;
	animation: effect 250ms ease-in;
}

input[type="checkbox"]:disabled + .label-text{
	color: #aaa;
}

input[type="checkbox"]:disabled + .label-text:before{
	content: "\f0c8";
	color: #ccc;
}

/*Radio box*/

input[type="radio"] + .label-text:before{
	content: "\f10c";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 1.5rem;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1rem;
	display: inline-block;
	margin-right: 1rem;
}

input[type="radio"]:checked + .label-text:before{
	content: "\f192";
	color: #8e44ad;
	animation: effect 250ms ease-in;
}

input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

input[type="radio"]:disabled + .label-text:before{
	content: "\f111";
	color: #ccc;
}

/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before{
	content: "\f204";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before{
	content: "\f205";
	color: #16a085;
	animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

.toggle input[type="radio"]:disabled + .label-text:before{
	content: "\f204";
	color: #ccc;
}


@keyframes effect{
	0%{transform: scale(0);}
	25%{transform: scale(1.3);}
	75%{transform: scale(1.4);}
	100%{transform: scale(1);}
}
/* fontawesome 4.7.0 verson end*/

/* fontawesome 5.7 verson  https://codepen.io/rstrahl/pen/yyEYBx   动画单选钮，复选框.未修改完成。
/*@import url(//netdna.bootstrapcdn.com/font-awesome/5.7.0/css/font-awesome.css); *-/
@import url(https://use.fontawesome.com/releases/v5.7.0/css/all.css);


/*** basic styles ***-/   
body { margin: 30px; } 
h1 { font-size: 1.5em; }
label { font-size: 24px; }
container { 
  width: 175px; 
  margin-left: 20px;
}

input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
    
input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";  
    display: inline-block;
    content: "\f111";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}

input[type=radio].with-font:checked ~ label:before,
input[type=checkbox].with-font:checked ~ label:before  {
    content: "\f192";
    font-size: 1.2em;
    color: darkgreen;
    letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {        
    content: "\f0c8";
}
input[type=checkbox].with-font:checked ~ label:before {
    content: "\f14a";        
    color: darkgreen;
}
input[type=radio].with-font:focus ~ label:before,
input[type=checkbox].with-font:focus ~ label:before,
input[type=radio].with-font:focus ~ label,
input[type=checkbox].with-font:focus ~ label
{                
    color: green;
}

fontawesome 5.7 verson */

/*html5 audio player begin*/
@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

body {
	font-family: 'Roboto';
	font-weight: 600;
	width: 100vw;
	height: 100vh;
	margin: 0;
	@include flex-center;
}

.AudioContainer {
	width: 80%;
}

@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

@mixin overflow($type) {
	overflow: hidden;
	text-align: left;
	text-overflow: #{$type};
	white-space: nowrap;
}

.playr {
	width: 100%;
	background-color: #38354a;
	padding: 10px;
	color: #d2d9e5;
}

.playr-ui {
	display: flex;
	align-items: stretch;
}

.playr-controls {
	width: 16%;
	padding: 0 15px;
	@include flex-center;
}

.playr-panel {
	@include flex-center;
	width: 90%;
	padding: 0 15px;
	position: relative;
}

.playr-ui.volume-controls .playr-panel {
	width: 70%;
}

.playr-controls button {
	color: #d2d9e5;
	background-color: transparent;
	border: medium none;
	padding: 0;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
}

.playr-controls button:hover {
	color: #fff;
}
@font-face {
	font-family: 'Material Design Icons';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/materialdesignicons-webfont.woff2') format('woff2');
  }
  
  .material-icons {
	font-family: 'Material Design 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;
  }
/*@font-face {
	font-family: "Material Design Icons";
	src: 
	url('https://cdn.jsdelivr.net/npm/material-design-icons-iconfont@6.7.0/dist/fonts/MaterialIcons-Regular.woff2')  format('woff2'),
		url('https://cdn.jsdelivr.net/npm/material-design-icons-iconfont@6.7.0/dist/fonts/MaterialIcons-Regular.ttf')  format('truetype'),
		url('../fonts/materialdesignicons-webfont.woff') format('woff'),
		url('../fonts/materialdesignicons-webfont.ttf') format('truetype');
} */
.playr-controls button::after {
	font-family: "Material Design Icons";
	@include flex-center;
}

.playr-play::after {
	content: "\f040a";	
	
}

.playr.playing .playr-play::after {
	content: "\f03e4";
}

.playr-fastforward::after {
	/*content: "\f0211";*/
	content: "\f11f8";

}

.playr-rewind::after {
	/*content: "\f045f";*/
	content: "\f11f9";
}

.playr-rewind::after,
.playr-fastforward::after {
	font-size: 21px;
}

.playr-progress {
	background-color: #5f6672;
	height: 4px;
	bottom: 2px;
	left: 15px;
	position: absolute;
	width: calc(100% - 30px);
	cursor: pointer;
}

.playr-progress-bar {
	background-color: #d2d9e5;
	height: 100%;
	transform: scale3d(0, 1, 1);
	transform-origin: 0 0 0;
	width: 100%;
}

.playr-duration,
.playr-filename {
	font-size: 12px;
	position: absolute;
	top: 0;
	width: 50%;
	font-weight: 600;
}

.playr-filename {
	left: 15px;
	text-align: left;
	left: 15px;
	@include overflow('ellipsis');
}

.playr-duration {
	right: 15px;
	text-align: right;
}

.playr-volume {
	position: relative;
	width: 100%;
	@include flex-center;
}

.playr-volume-box.hidden {
	background-color: #38354a;
	bottom: 0;
	height: 100px;
	position: absolute;
	width: 35px;
	display: none;
}

.playr-volume-box {
	background-color: #5f6672;
	height: 4px;
	width: 100%;
	cursor: pointer;
}

.playr-volume-box span {
	display: block;
	background-color: #d2d9e5;
	height: 100%;
	width: 100%;
	transform: scale3d(1, 1, 1);
	transform-origin: 0 0 0;
}


/* compact */

.playr.compact .playr-rewind,
.playr.compact .playr-fastforward {
	display: none;
}

.playr-filename.overflow span {
	animation: 5000ms linear 0ms normal forwards infinite running scroll;
	display: inline-block;
	margin-right: 0;
	padding-right: 100%;
	transform: translate3d(0px, 0px, 0px);
}

@keyframes scroll {
	0% {
		transform: translate3d(0px,0px,0px);
	}
	100% {
		transform: translate3d(-100%,0px,0px);
	}
}

/*html5 audio player end*/