.voc-list-header h2 {color:#db9008;text-align: center;}
.voc-list-header p {text-align: center;}
.voc_ch_header{width:12%;}
.voc_stroke_header{width:5%;text-align:center;}
.voc_pinyin_header{width:18%;}
.voc_sound_header{width:5%;}
.voc-list-body th{background: #e7e7e7;color:#555;}
.voc-list-body table{border:#ccc 1px solid;margin-top: 10px;width:80%;margin:10px auto;}
.voc-list-body th{border:none;text-align:center;font-size:14px;}
.voc-list-body td{border-top:none;border-right:none;border-left:none;border-bottom:1px solid #b6b2b2;text-align:center;background:#f5f5f5;    padding: 5px;}
.pinyin-trial-start-now{text-align:center;}
.pinyin-trial-start-now .submit {
	width: 250px;
	font-size: 20px;
	line-height:0.5em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.voc-list-content-popup{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    overflow-x: auto;
    overflow-y: scroll;
    background: rgba(0, 0, 0, 0.46);
    transition: opacity 0.3s ease 0s;
    padding-top: 190px;
}

.voc-list-content{
    padding-bottom: 10px;
    position: relative;
    z-index: 1001;
    border-radius: 4px;
    background: #FFF none repeat scroll 0% 0%;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    height: auto;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
}
.pinyin-trial-title {
    text-align: center;
    font-size: 30px;
    font-family: Courier, Monaco, monospace;
}
#practise-wrapper {
    margin: 10px;
}
.play-content-header {
    margin-top: -10px;
    background: #444 none repeat scroll 0% 0%;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    font-family: arial;
    padding: 0.1em 0.5em;
}
.play-header-left {
    display: inline-block;
    width: 49%;
    vertical-align: top;
    margin-right: 0;
    text-align: left;
}
.play-header-right {
    display: inline-block;
    width: 49%;
    vertical-align: top;
    margin-left: 0;
    text-align: right;
}
.play-header-var-color {
    color: #e9df1c;
}
.play-header-child {
    display: inline-block;
}
.play-content-body-left{
    width:20%;
    display:inline-block;
    vertical-align:top;
    background: #d8d8d8;
    text-align:center;
    height:550px;
    overflow-y:auto;
    box-shadow:0 0 7px #777;
}
.play-content-body-mid {
    width: 63%;
    display:inline-block;
    vertical-align:top;
    line-height:2.5em;
    font-size:16px;
    background: #eee;
    padding:0;margin:0;
    height:550px;  
    margin-left:-1px;
}
.play-content-body-right {
    width:15.9%;
    display:inline-block;
    vertical-align:top;
    text-align:center;
    background: #d8d8d8;
    padding:5px 0;
    height:550px;
    box-shadow: 0 0 7px #777;
    margin-left:-2px;
}


.play-content-body-right ul li {
    list-style-type: none;
    text-align: center;
    border: #b7b49b solid 2px;
    border-radius: 10px;
    margin: 20px 10px 15px 10px;
    line-height: 2em;
    font-size: 20px;
    text-align: center;
    background: #e6e6dc;
}
.switch-menu {
    height: auto;
    text-align: left;
    padding: 5px 5px;
    cursor: pointer;
    margin: 0 10px;
    font-size: 16px;
    font-weight: bold;
    background: #444;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    color:#ffffff;
}
.menu-sw-sign {font-weight: bold;font-size: 25px;text-align: center;width: 15%;line-height: 1.1em;}
.hide-range{background: #777 !important;}


.choice-question .option-div {width: 570px;margin: 0 auto;}
.choice-question h2 {height: 160px;font-size: 260%;color: #254C98;padding: 20px 0 0 0;cursor: pointer;text-align:center;}
.option-div ul {list-style-type: none;margin: 0;padding: 0;}
.option-div ul li{
line-height:1.2em;
width: 265px;
height: 83px;
float: left;
border: 3px solid #fff;
background-color: #F8F8F8;
margin: 0 8px 15px 8px;
text-align: center;
padding: 8px 4px 0 2px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 1px 1px 3px;
border-radius: 4px;
font-size: 140%;

}
.body-mid-button{width:100%;display:inline-block;}
.body-mid-button p button{background:#444 none repeat scroll 0% 0%;border:1px solid #444;width: 150px;}
.body-mid-button p{padding:5px 10px;width:150px;margin:auto;}
.clicked-op{border: 3px Solid #e9df1c !important;}
.ExitButton {cursor: pointer;
background: #444 none repeat scroll 0% 0%;
color: #ffffff;
width: 150px;
padding: 5px;
text-align: center;
border: 1px solid #444;
display: block;
margin: 10px auto;}

.range-menu-toggle{display: none;}
.menu-mobile-view{display: none;}














.popup {
display:none;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 10000000000;
overflow-x: auto;
overflow-y: scroll;
background: rgba(0, 0, 0, 0.46);
transition: opacity 0.3s ease 0s;

}
/* Inner */
.popup-inner {
border-radius: 4px;
background: #FFF none repeat scroll 0% 0%;
max-width:800px;
width:100%;
margin-left: auto;
margin-right: auto;
min-height: 420px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);

}
.popup-inner h2{margin-top: 6px;text-align: center;}
.popup-inner .close{padding-bottom: 50px;}
.popup-inner .close a{float: right;}
.popup-base span span{margin-left:5%;}
 
/* Close Button */
.popup-close {
    width:30px;
    height:30px;
    padding-top:4px;
    display:inline-block;
    position:relative;
    top:0px;
    right:auto;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:1000px;
    background:rgba(0,0,0,0.8);
    font-family:Arial, Sans-Serif;
    font-size:20px;
    text-align:center;
    line-height:100%;
    color:#fff;
    float: right;
    z-index: 1000;
    cursor:pointer;
}
 
.popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    background:rgba(0,0,0,1);
    text-decoration:none;
    color: #fff;
}

.ajaxsuccess{margin-top: 24%;color: #07b107;}

.popup{padding: 100px;}
.popup-inner textarea{width: 100%;margin-left: 0;}
.popup-base span span{margin:0;}
#popupcon{width:100%;padding-top:30px ;padding-left: 4%;padding-right: 4%;}
.popup-child,.popup-base { width:100%;margin: 0;}
.popup-child-left{width: 50%;float: left;}
.popup-child-right{width: 50%;float: right;text-align: right;}
    

   



button.submit:hover {background-color: darkgreen !important;border-color: darkgreen !important;}
















@media screen and (max-width: 1200px) {
    .popup{padding: 80px;}
        
}
@media screen and (max-width: 1023px) {
    .popup{padding: 50px;}
    .play-content-header {height: 1.4em;}

        
}
@media screen and (max-width: 735px) {
    .popup{padding: 30px;}
    #popupcon{padding-top:20px;}
    .popup-child-left{width: 100%;float: left;padding: 0;}
    .popup-child-right{width: 100%;float: left;text-align:left;padding: 0;}
    .popup-close{float:left;left:-30px;}
    #content{padding: 0;}
    #practise-wrapper {margin: 0;}
    .play-header-right,.play-header-left { font-size: 13px;}
    #practise-title {font-size: 20px;margin-bottom: 5px;}
	.menu-mobile-view{display: none;margin-top: 30px;position: absolute;background: #f1f1f1;
	z-index: 100;opacity: 0.96;width: 50%;}
	.switch-range,.mobile-switch-menu{height: 30px;text-align: left;padding: 0 5px;cursor:pointer;background: #ddd;
text-align: center;}
     .mobile-switch-menu{border-left: 1px solid #777;}
	.range-menu-toggle{display: block;}
	.menu-mobile-view{float: right;right: 0;}
	.switch-range,.mobile-switch-menu{width: 50%;float: left;}
	.play-content-body-left{height: auto;}
	.play-content-body-right{display: none;}
	.hide-menu{background: #f1f1f1 !important;border-bottom: none !important;}
	.menu-mobile-view .play-content-body-right-menu-view ul{width: 70%;margin: 0 auto;}
	.menu-mobile-view .play-content-body-right-menu-view ul li{width: 88%;}
	.play-content-range-view-list li{width: 100% !important;}
	.play-content-ch {  margin: 0 0 20px 0;}
	.play-content-body-left-title{display: none;}
	.play-content-body-left{width:100%;}
	.play-content-body-mid {width: 100%;padding:5px;}
	.play-content-body-right-menu-view{display:block !important; }
	.switch-menu,.play-content-body-left{display:none;}
	.play-content-body-mid {box-shadow: 2px 0 0px #777;background:#f1f1f1;}
	.voc-list-content{width:97%;}
   
}
@media screen and (max-width: 567px) {
#breadcrumb-list{padding:0;}
.play-content-body-mid {width: 100%;padding:2px;}
.voc-list-body table img{min-width:20px;}
.voc-list-body table{width:97%;font-size: 12px;}
.choice-question .option-div {width: 100%;}
.option-div ul li{width:230px;} 
.play-content-header {height: 50px;}  
.play-header-left {
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: center;
}
.play-header-right {
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: center;
}
#practise-title {font-size: 15px;}
.voc_ch_header {width: 28%;}
.voc_pinyin_header {width: 24%;}

.choice-question h2 {height: 80px;font-size: 140%;}
.option-div ul li {width: 97%;font-size:90%;height:42px;}
.voc-list-content-popup{padding-top:10px;}
.play-content-body-right ul li{font-size: 16px;margin: 0px 10px 10px 10px;}
.menu-mobile-view .play-content-body-right-menu-view ul{width: 92%;}
}

@media screen and (max-width: 360px) {
    .popup{padding: 10px;}
    .error-submit1{margin-left: 36% !important;}
    #popupcon{padding-top:10px ;}
    .popup-inner,.popup-child,.popup-base { width: 100%;}
}


.miv-voc-test-horz {
    margin-top: 30px;
    border-bottom: 1px solid #c8c6c6;
    margin-bottom: 30px;
    margin-left: 15px;
    margin-right: 15px;
}
.question_type_toggle {
    font-weight: 600;
	cursor: pointer;
}
#type_selector_placeholder {
    width: 80%;
    margin: auto;
}
.question_type_toggle_ul {
    margin: 0px;
    font-size: 13px;
}
.question-part {
    align-content: center;
    text-align: center;
    font-size: 28px;
}
.perfect-answer{
	border: 3px Solid #41a24c !important;
}
.wrong-answer{
	border: 3px Solid #d21c15 !important;
}
.not-active {
   pointer-events: none;
   cursor: default;
}
.hide-block{
	display: none;
}
.question_type_selector  li.selected{
	background-color: #eef;
	border: 1px solid #00c;
	margin-bottom: 4px;
}

.question_type_selector li {
    background-color: #eee;
    border: 1px solid #ccc;
    margin-bottom: 4px;
    padding: 3px;
    cursor: pointer;
    list-style-type: none;
    text-align: left;
}

.voc_word_result_table_mobile{display: none;}
.voc_word_result_table{display:block;}
.mobil_transltion{color: #0b0bb3;font-style: italic;border-top: 1px dashed #9b9b9e;
border-bottom: 1px solid #dcd0d0;
}
embed, iframe, object, video {
   	width: 400px;
   	height: 380px;
    margin-bottom: 0;
    max-width: 100%;
    vertical-align: middle;
}
object#soundtest{
	height: 40px !important;
}
#soundtest object{
	height: 40px !important;
}
.flash-detect-msg{padding:5px;color:#ff0000; text-align:center;font-size:14px;padding-top:150px;}

input:focus{border:#b3fa0f 1px solid !important;}
.pinyinStroke img,.pinyinStrokeForSentence  img {margin-left: 10px;height: 375px;}
@media screen and (max-width: 1199px) {
  #practise-content{padding: 0 10px;}
}
@media screen and (max-width: 1023px) {
  #content{padding:0;}
  #practise-content{padding: 0 10px;}
  .emptyContent{padding:150px 60px;}
}
@media screen and (max-width: 735px) {
  
    .Delta-icon-open{border-width: 0 10px 10px !important;}
    th, td {padding: 0.275em;}
	.dict_search_results{font-size: 14px;}
	.play-header-var-color{font-size: 20px;}
	#content{padding:0;}
    .noneemptyContent{padding: 5px 5px !important;}
    .voc_pinyin_results{font-size:13px;}
    .Show_product{top:40px; width:150px;}
	.emptyContent {min-height: 200px;padding: 60px 5px!important;}
	.voc_ch_header{width:30% ;}
	.voc_stroke_header{width:9%;text-align:center;}
	.voc_pinyin_header{width:20%;}
	.voc_sound_header{width:10%;}
	.Delta_icon,.delta_icon{margin-top: 7px;}
	.me_pinyin_sound,.claigraphy-image-pinyin {width: 30px;}
	.voc_word_result_table_mobile{display: block;}
	.voc_word_result_table{display: none;}
	.example-left-control { width: 60%;}
    .example-right-control {width: 10%;}
    
    .show_product_link{right:0 !important;}
  .show_product_link {
    margin-top: -5px;
}

   .pinyinStroke{top: 70px;}
	.play-caligraphy-popup{    padding-top: 70px;}
	.voc_practice_header {
    width: 20%;
}


}
@media screen and (max-width: 567px) {
  .emptyContent{padding:0 5px;}
  	.pinyinStroke{top: 140px;}
	.play-caligraphy-popup{    padding-top: 140px;}
  
}
@media screen and (max-width: 467px) {
	.word-example-toogle{font-size: 12px;}
	.voc_pinyin_header{width:22%;}
	.voc_ch_header{width:28% ;}
	.voc_pinyin_header,.voc_ch_header,.mobil_transltion{font-size: 13px;}
	.related-word-switch{height: 30px;padding-top: 5px;}
	.play-caligraphy-popup-inner,.pinyinStroke p, .pinyinStrokeForSentence p{width:310px;}
	.pinyinStroke{margin-left:0;}
	.strokePrev{top:150px;}
	.strokeNext{top:110px;}
   embed, iframe, object, video {
   	width: 310px;
   	height: 340px;
   }
   .voc_practice_header {
    width: 28%;
}

   .result-switch{margin: 0 0 5px 0;padding-top:5px;height:30px;font-size:12px;}
	.play-caligraphy-popup-inner{height: 340px;}
	.pinyinStroke img,.pinyinStrokeForSentence  img {margin-left: 10px;height: 300px;margin-top:20px;}
	}
.word-example-toogle {
    width: 100%;
    height: 30px;
}
.results-toogle {
    width: 100%;
    height: 40px;
}
.cnpn-play-caligraphy-popup {
    background: rgba(15, 15, 15, 0.04) !important;
}