body{
    font-size: 13px;
    font-family: 'OpenSansRegular';
}
.control-group .controls ul li {
    list-style: none;
}
.content{
	background-color: #fff;
}
.login-title{
	color: #555;
	font-size: 20px;
	margin-top: 50px;
	font-family: 'OpenSansRegular'!important;
}
.active-form{
    max-width: 370px;
    padding: 0;
    margin: auto;
}
.active-form .spam-note{
    background: #fff2cf;
    border-radius: 4px;
    padding: 10px;
    font-size: 11px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.login-form{
	padding: 10px 30px;
}
.signin-header h2{
	font-size: 20px;
	margin-top: 0px;
	font-family: 'OpenSansRegular'!important;
}
.signin{
	margin: 50px auto;
	width: 100%;
	padding: 20px 25px 10px;
	background: white;
	border-bottom: 1px solid #c4c4c4;
	border-radius: 2px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	margin-bottom: 20px;
	margin-top: 25px;
}
.active{
    left: 0;
}
.tab-payment{
    color: #555;
    border-radius: 0px!important;
}
.tab-payment img{
    height: 30px;
}
.tab-payment p{
    margin-bottom: 0px;
}
.line-through{
    text-decoration: line-through;
}

.signin-input{
	width: 100%;
	height: 45px;
	margin-bottom: 10px;
	padding: 0 15px 2px;
	font-size: 13px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 -2px #ddd;
	box-shadow: inset 0 -2px #ddd;
}
.signin-input:focus {
    border-color: #4c87ed;
    outline: none;
    -webkit-box-shadow: inset 0 -2px #4c87ed;
    box-shadow: inset 0 -2px #4c87ed;
}
.payment-control:focus {
    border-color: #57CBFF;
    outline: none;
    -webkit-box-shadow: inset 0 0px #57CBFF;
    box-shadow: inset 0 0px #57CBFF;
}
.signin-button{
	position: relative!important;
	vertical-align: top!important;
	width: 100%!important;
	height: 45px!important;
	padding: 0px!important;
	font-size: 15px!important;
	color: white!important;
	text-align: center!important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25)!important;
	background: #ffce0f!important;
	border: 0!important;
	border: 1px solid #FFAD00!important;
	border-radius: 4px!important;
	cursor: pointer!important;
}

.signin-button:hover{
	position: relative!important;
	vertical-align: top!important;
	width: 100%!important;
	height: 45px!important;
	padding: 0px!important;
	font-size: 15px!important;
	color: white!important;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25)!important;
	background: #ffce0f!important;
	border: 0!important;
	border: 1px solid #FFAD00!important;
	cursor: pointer!important;
}
.facebook-button{
	background-color: #3f5e7c!important;
	border: 1px solid #224160!important;
	margin-bottom: 10px!important;
        border-radius: 4px!important;
}
.google-plus-button{
	background-color: #DD4B39!important;
	border: 1px solid #c65c4b!important;
	margin-bottom: 10px!important;
            border-radius: 4px!important;
}
.facebook-button:hover{
	background-color: #3f5e7c!important;
	border: 1px solid #224160!important;
}
.google-plus-button:hover{
	background-color: #DD4B39!important;
	border: 1px solid #c65c4b!important;
}
.register-yet, .forgot-pass{
	list-style-type: none;
	margin-left: -40px;
}
.help-block{
    color: red;
    font-size: 13px;
}
.success-message{
    color: green;
}
.captcha{
    width: 130px;
    float: left;
    height: 45px;
}
input.captcha{
    margin-left: 10px;
}
img.captcha{
    height: 45px;
}
.fill{
    margin-bottom: 5px;
    display: block;
    font-family: OpenSansBold;
    margin-top: 10px;
    font-size: 13px;
}
.question-protect{
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}
@media (min-height: 800px){
    .login-account{
        min-height: 900px;
    }
}
@media (min-height: 1000px){
    .login-account{
        min-height: 1100px;
    }
}
@media (min-width: 1025px) { 
    .login-form{
        padding: 10px 60px;
    }
}
@media (min-width: 768px) and (max-width: 991px){ 
    .login-form{
        padding: 10px 100px;
    }
    
}

@media screen and (min-width: 768px){
    .carousel-indicators{
        bottom: -5px;
    }   
}
@media (min-width: 400px) and (max-width: 499px){ 
    .login-form{
        padding: 10px 50px;
    }
}
@media (min-width: 500px) and (max-width: 599px){ 
    .login-form{
        padding: 10px 70px;
    }
}
@media (min-width: 600px) and (max-width: 767px){ 
    .login-form{
        padding: 10px 150px;
    }
}

/**modal login**/
.modal-login-content{
    border-radius: 0px;
    padding: 20px;
}
.msg-error{
    font-size: 10px;
    margin-bottom: 10px;
    display: inline-block;
    margin-top: -10px;
    color: #F00;
}
.agree-register-service{
    font-size: 13px;
}
.logon-text{
    font-size: 13px;
}
.login-now{
    display: none;
}
.register-by-voca{
    display: none;
}

.description-process{
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
    position: relative;
}
.process-number{
    display: inline-block;
    padding-left: 6px;
    border: 1px solid #ededed;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    padding-top: 0px;
    color: #FFF;
}
.arrow-login{
    display: inline-block;
    position: absolute;
    top: 30px;
}
.process-deactive{
    background: #BFBFBF;
}
.process-active{
    background: #4CB1F1;
}
.process-text-deactive{
    color: #BFBFBF;
    margin-left: 1px;
}.process-text-active{
    color: #4CB1F1;
    margin-left: 1px;
}
.process-payment{
    margin-left: 0px;
}
.voca-login-icon{
	width: 105px;
}
body{
	background-color: #336699;
	font-family:'OpenSansRegular'!important;
}
/*begin sub menu*/
.sub-menu{
    background: #fff;
    height: 50px;
    position: fixed;
    WIDTH: 100%;
    border: 1px solid #e1e1e1;
    z-index: 25;
    top: 50px;
    line-height: 47px;
}
.sub-menu a{
    text-decoration: none!important;
}

.sub-menu li{
    display:  inline-block;
    position: relative;
    text-transform: uppercase;
    font-size: 15px;
}
.sub-menu li:hover{
    border-bottom: 3px solid #00b2f0;
}
.sub-menu li a:hover{
    text-decoration: none;
}
.sub-menu-personal span{
    color: #313131!important;
    font-family: OpenSansSemiBold;
    font-size: 15px!important;
    margin-left: 10px;
}
.sub-menu-separate{
    margin-left: 25px;
    margin-right: 25px;
    font-family: opensansregular;
}
.sub-menu-library span, .sub-menu-library-community span{
    color: #313131!important;
    font-family: OpenSansSemiBold!important;
    font-size: 15px!important;
}
.sub-menu-guide span, .sub-menu-intro span, .sub-menu-community span, .sub-menu-project span, .sub-menu-blog, .sub-menu-promotion span, .sub-menu-phone, .sub-menu-newspapers, .sub-menu-guide{
    
    color: #313131!important;
    font-family: OpenSansSemiBold!important;
    font-size: 15px!important;
    outline: none!important;
}
.sub-menu-community, .sub-menu-project, .sub-menu-promotion, .sub-menu-library-community {
	margin-left: 50px;
}
.sub-menu-blog, .sub-menu-phone, .sub-menu-newspapers, .sub-menu-guide{
	font-family: opensansregular;
	margin-left: 50px;
	
}
 .sub-menu-library, .sub-menu-personal{
}
.sub-menu-phone span, .sub-menu-newspapers span, .sub-menu-guide span,.sub-menu-blog span{
    color: #313131;
    
    font-size: 15px!important;
    outline: none!important;
    text-decoration: none!important;
}
.sub-menu-personal span.menu-active,
.sub-menu-home span.menu-active,
.sub-menu-intro span.menu-active, 
.sub-menu-card span.menu-active, 
.sub-menu-guide span.menu-active, 
.sub-menu-phone span.menu-active, 
.sub-menu-newspapers span.menu-active,
.sub-menu-library span.menu-active, 
.sub-menu-library-community span.menu-active,
.sub-menu-community span.menu-active, 
.sub-menu-project span.menu-active, 
.sub-menu-blog span.menu-active,
.sub-menu-promotion span.menu-active{
    color: #4c87ed!important;
    font-family: opensanssemibold!important;
	
}
.sub-menu-item-border{
	/**border-bottom: 1px solid #4c87ed;**/
}
.sub-menu-card span{
    margin-right: 10px;
    color: #003366;
    font-family: opensansregular;
}
.sub-menu-phone .fa-apple, .sub-menu-phone .fa-android{
    float: left;
    font-size: 14px;
    color: #313131!important;
    margin-right: 5px;
    margin-top: 2px;
}
.drop-sub-menu{
    border: 1px solid #ddd;
    border-radius: 0px;
    margin-top: -2px;
}
.drop-sub-menu{
    display: block;
    padding-top: 0px;
    padding-bottom: 0px;
    background: #fff;
    border: 0px;
    border-radius: 0px;
    margin-top: 2px;
	z-index: 1000000;
    min-width: 230px;
    transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    transform-origin: center top 0px;
    -moz-transform-origin: center top 0px;
    -webkit-transform-origin: center top 0px;
    transform: matrix3d(1, 0, 0, 0, 0, 0, 1, 0.008, 0, -1, 0, 0, 0, 0, 0, 1);
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 0, 1, 0.008, 0, -1, 0, 0, 0, 0, 0, 1);
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0, 1, 0.008, 0, -1, 0, 0, 0, 0, 0, 1);
}
.sub-menu li:hover .drop-sub-menu{
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    
}
.drop-sub-menu li{
    display: list-item;
    padding: 0px;
}
.drop-sub-menu>li>a{
    display: block;
    padding: 0px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    height: 47px;
    padding-left: 10px;
    line-height: 47px;
    font-size: 14px;
    font-family: opensanssemibold;
    border-bottom: 1px solid #ddd;
}
.drop-sub-menu>li:focus, .drop-sub-menu>li:hover, .drop-sub-menu>li>a:focus, .drop-sub-menu>li>a:hover {
    background: #00b2f0;
    color: #fff;
    border-bottom: 0;
}
.drop-sub-menu>li>a>i{
    font-style: normal;
}



/*end sub menu*/
h3{
	font-size: 18px;
	font-family: 'OpenSansRegular';
	font-weight: 700;
}
.title-vocabulary{
    font-size: 20px;
    font-family: OpenSansLight!important;
    color: #fff;
}
#side-nav{
    height: 100%;
    overflow: auto!important;
}
.page-title-li{
    font-size: 20px;
    font-family: 'OpenSansLight'!important;
}
.page-title p{
    font-size: 20px;
    font-family: 'OpenSansLight'!important;
}
.main-wrapper{
    overflow: hidden;
}
.intro-menu{
	color: #FFFFFF;
	
	font-size: 13px;
	height: 50px;
	line-height:50px;
	background-color: #003366;	
}
.itnro-item-menu{
	
		
}
.intro-item-menu li{
	list-style-type:none;
	
}
.intro-item-menu li a{
	color: #FFFFFF;
	text-decoration: none;
}

.intro-login{
	text-align:right;
	margin-right:10px;
}
.intro-item-menu li .intro-text-menu{
        font-size: 11px;
	margin-left:-5px;
	text-align:left;
}
.intro-text-menu{
    color: #FFF;
    font-size: 12px;
}
.intro-text-menu:hover, .intro-text-menu:focus{
    color:#FFF;
    text-decoration: none;
}
.icon-menu.fa.fa-bars-size{
    font-size: 18px;
}
.intro-menu-button, .intro-menu-button:focus, .intro-menu-button:hover{
    border: 0px;
    border-radius: 0px;
    margin-top: 0px;
    background: transparent!important;
    width: 34px;
    padding: 5px;
}
.content{
	background-color: #336699;
        overflow: hidden;
}
.intro-content{
	margin-top: 135px;
}
.intro-focus{
	font-size:36px;
	color: #FFFFFF;
	font-family: 'OpenSansLight'!important;
	font-weight: 300;
	
}
.menu-title-item{
    font-size: 12px;
    color: #FFF!important;
	font-family: opensansbold;
}
.menu-title-item:hover{
    color:#567593!important;
}

.btn-register-home{
    margin-top: -10px;
}
.intro-account-setting{
    margin:20px 0px 0 15px;
    overflow: hidden;
    margin-bottom: 0px;
    max-height:50px;
}
.intro-learn-voca{
	font-size:52px;
	color:#FFFFFF;
	font-family: 'OpenSansBold'!important;
	font-weight:800;
	
}
.intro-congratulation, .intro-together{
	
	color: #FFFFFF;
}
.intro-together{
	font-family: 'OpenSansLight'!important;
	font-size:18px;
        margin-top: 10px;
        line-height: 35px;
}
.intro-together strong{
	font-family: 'OpenSansBold'!important;
}
.intro-congratulation{
        margin-top: 35px;
	font-family: 'OpenSansLight'!important;
	font-size:21px;
}
.btn-register{
	border-radius: 0;
	background-color: #FFE303;
	width: 280px;
	height: 45px;
	line-height: 30px;
	font-size: 20px;
	color: #555;
	text-align:center;
	
}
.count-notification{
    vertical-align: text-bottom;
    line-height: 30px;
    padding: 1px 5px;
    border-radius: 10px;
    background: #F00;
    font-size: 10px;
}
.nav-dash-board{
    color: gray;
}
.btn-register-slidebar{
	border-radius: 0;
	background-color: #FFE303;
	min-width: 200px;
	height: 45px;
	line-height: 30px;
	font-size: 20px;
	color: #555;
	text-align:center;
	margin-left:10px;
}
.margin-bottom-30{
	margin-bottom:30px;
}
.img-facebook{
	width:280px;
}
.logo-btn-slidebar{
    margin-top:50px;
    text-align: center;
    margin-bottom: 30px;
}
.logo-btn-slidebar img{
	width: 120px;
	height: 35px;
	
}
.logo-btn-slidebar p{
    font-size: 10px;
    color: #FFFFFF;
    margin-left: 15px;
}
.intro-account{
    text-align: left;
    width: 70%;
    padding-top: 10px;
    padding: 5px 10px;
    line-height: 45px;
    font-size: 13px;
}
.intro-account a{
    color: #FFF;
}
.intro-logout{
    text-align: right;
    width: 30%;
    padding-top: 10px;
    padding: 5px 10px 5px 5px;
    line-height: 45px;
}
.margin-left-260{
	width:100%;
	margin-left: 260px;
	transition: all 0.4s ease 0s;
}
.remove-margin-left-260{
	width:100%;
	//margin-left: 0px;
	transition: all 0.4s ease 0s;
}
.intro-three-steps{
	text-align: center;
}
.intro-three-steps h2{
	font-size: 25px;
	color: #555;
	margin-top:60px;
	font-family: 'OpenSansLight'!important;
	margin-bottom:90px;
	font-weight:500;
}
.container-2{
	background-color: #FFFFFF;
	position: relative;
        overflow: hidden;
	margin-top:30px;
	
}
.container-3{
	background-color: #FEFEFE;
	margin-top:0px;
	padding-top:90px;
	margin-bottom:-100px;
}
.container-4{
	background-color: #FEFEFE;
	
	margin-top:100px;
}
.nav-avatar a{
    margin-top: 10px;
    margin-left: 5px;
    height:50px;
    line-height:45px;
}
.nav-avatar{
    overflow: hidden;
    margin-left: 5px;
    height: 50px;
}
.span-avatar, .span-avatar-group, .span-library{
    padding: 1px;
    border-radius: 30px;
    margin-left: 20px;
    margin-top: 5px;
}
.span-avatar .tooltip-inner{
    position: fixed;
    right: 10px;
    max-width: 310px;
    min-width: 280px;
    border-radius: 4px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: 1px;
}
.btn-edit-avatar.avatar-picture.avatar-picture-item + .change-avatar:hover{
    cursor: pointer;
}
.span-avatar .tooltip{
    margin-top: 3px;
    opacity: 1;
    position: fixed;
    z-index: 1032;
}
.span-library .tooltip{
    position: fixed;
}
.intro-name{
    color: #063561;
    font-family: OpenSansBold;
    margin-left: -20px;
    margin-bottom: 5px;
}
.intro-level{
    color: #747A7A;
    margin-left: -20px;
    margin-bottom: 5px;
}
.intro-language{
    color: #063561;
    margin-left: -20px;
}
.intro-language select{
    height: 28px;
    width: 170px;
    color: #003366;
}
i.fa.fa-camera.change-avatar{
    background: #555;
    width: 50px;
    height: 50px;
    line-height: 50px!important;
    font-size: 25px;
    color: #fff;
    border-radius: 50%;
    opacity: 0.7;
    margin-top: -69px;
    visibility: hidden;
    margin-bottom: 20px;
}
.line-silver{
    height: 1px;
    background-color: #ccc;
}
.intro-btn-logoff{
    background: #FFF;
    color: #555;
    border-radius: 4px;
    margin-top: 10px;
    border: 1px solid #ccc;
    font-size: 11px;
    width: 120px;
}
.span-avatar .tooltip.bottom .tooltip-arrow{
    border-bottom-color: #fff;
    margin-top: 1px;
}

.user-name{
    font-size: 13px;
    margin-top: 5px;
}
.avatar-img{
    border-radius: 3px;
    width: 25px;
    height: 25px;
    margin-top: 9px;
    transition: 0.3s all linear;
    border: 1px solid #fff;
}
.avatar-img:hover{
    cursor: pointer;
}
.title-Topics{
    margin-left: 14px;
    font-size: 15px;
    margin-top: 20px;
    display: block;
    color: #fff;
    background: #4c87ed;
    padding: 10px;
}
.li-flag{
    margin-bottom: 70px;
}
.awsome{
	font-size: 25px;
	color: #555;
	font-family: 'OpenSansLight'!important;
	text-align:center;
	margin-bottom: 100px;
}
.img-awsome{
	width: 76px;
        height: 76px;
        border-radius: 41px;
       
}
.img-awsome:hover{
    
}
.img-awsome:hover .img-awsome-item{
    width: 70px;
    height: 70px;
    
}
.img-awsome-item{
    width: 65px;
    height: 65px;
    border-radius: 35px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
     padding: 3px;
     border: 1px solid #ededed;
}
.content-awsome{
    padding: 0px 50px 30px 100px;
}
.content-awsome .content-awsome-1{
    font-size: 13px;
}
.content-awsome .content-awsome-2{
    font-size: 10px;
    font-family: 'OpenSansBold';
    text-transform: uppercase;
}
.nav-topic-item{
    text-transform: uppercase;
}
.row-register-voca{
	height: 250px;
	background: #336699;
	text-align:center;
}
.row-register-voca p{
	line-height: 250px;
	color: #FFFFFF;
	font-size: 16px;
}
.content-container-3{
	
	background:#F7F7F7;
}
.intro-three-steps2{
	padding: 10px 70px;;
	text-align:center;
	margin-bottom: 40px;
}
.intro-three-steps2 img{
	width: 165px;
	height: 115px;
}
.intro-three-steps2 p{
	text-align:justify;
}
.intro-topic{
	padding: 20px;
}
.intro-topic1{
	padding: 20px 20px 20px 20px;
	max-width: 370px;
        margin: 0 auto;
}   
.intro-topic4{
	padding: 20px 20px 20px 20px;
}
.intro-topic-item{
	height: 381px;
	border: 1px solid #ebebeb;
	background-color:#FFFFFF;
}
.intro-topic-item h4{
	margin-left: 10px;
	color: #75A2C1;
	font-size: 14px;
	font-weight: 600;
}
.topic-rating{
	text-align: left;
	margin-left: 10px;
	margin-top:-10px;
}
.topic-description {
	margin: 0px 10px 0px 10px;
	min-height: 137px;
	text-align: justify;
}
.dashboard-topic-description{
    margin: 0px 10px 0px 10px;
    min-height: 145px;
    text-align: justify;
}
.dashboard-topic-description-empty{
    min-height: 135px;
}
.dashboard-topic-description .not-choose{
    text-align: center;
    font-size: 40px;
    color: #BCE4FD;
    margin-top: 120px;
    margin-bottom: 63px;
}
.dashboard-topic-description  p{
    color: #75A2C1;
}
.dashboard-tooltip{
    cursor: pointer;
}
.dashboard-ranking-3,
.dashboard-ranking-2,
.dashboard-ranking-1,
.show-ranking-3,
.show-ranking-2,
.show-ranking-1{
    opacity: 0;
}
.topic-description  p{
	text-align: justify;
	color:#75A2C1;
	font-size: 13px;
}
.topic-rating span{
	color: #ffe303;
	font-size: 16px;
}
.link-voca{
	height: 50px;
	background: #003366;
	margin-bottom: -100px;
	color:#FFFFFF;
}
.link-voca-text1{
	line-height: 50px;
	margin-left: 50px;
}
.link-voca-text1 a{
	color: #FFFFFF;
	text-decoration:none;
}
.link-voca-text1 a{
	text-decoration: none;
}
.link-voca-text2{
	margin-left: 200px;
}
.topic-stat{
	margin: 10px 0px 0px 0px;
	height: 61px;
	border-top: 1px solid gainsboro;
	text-align: center;
        background: url('../img/topic-item-bg.jpg') repeat-x;
}
.topic-stat .stat-learning{
	border-right: 1px solid gainsboro;
}
.topic-stat .stat-learning, .topic-stat .stat-view{
	width: 50%;
	height: 100%;
	display: inline-block;
	float: left;
	text-align: center;
}
.topic-stat .stat-learning p, .topic-stat .stat-view p{
	text-align:center;
	margin-top: 10px;
}
.topic-stat .stat-learning strong p, .topic-stat .stat-view strong p{
	font-family: 'OpenSansBold'!important;
        color: #555;
}

.topic-stat .stat-learning .count-view, .topic-stat .stat-view .count-view{
	margin-top: -10px;
	color: #75A2C1;
}
.topic-img{
	padding:10px 11px 0 10px;
}
.topic-img img{
	width: 100%;
}
.fa-bars-size{
    font-size: 20px;
    margin-top: -4px;
}
.intro-share-size{
    width: 90px!important;
}
.fb-share-button span iframe {
    margin-top: -4px!important;
}
.share-button-intro{
    margin-left: 30px;
}
a:hover{
    text-decoration: none;
}
.intro-topic-item:hover{
    border: 1px solid #FEC21C;
}
.is-free{
	background: #E20782;
    top: 5px;
    right: 5px;
    color: #fff;
    text-align: center;
    position: absolute;
    min-width: 70px;
    height: 22px;
}
.is-free span{
	padding:5px;
        font-size: 12px;
        line-height: 22px;
}
.sidebar-brand a{
	padding-left: 32px;
        font-size: 13px;
        transition:0.1s all linear;
}
.sidebar-brand a span{
    display:inline-block;
    margin-right:8px;
}
.sidebar-brand a:hover{
	background-color: #4c87ed;
        color: #fff;
}

.slide-bar-item{
	margin-left: 15px;
}
.sidebar-nav li a.slidebar-active{
    //background-color: #4c87ed;
        //color: #fff;
}

.slidebar-active-avatar{
    background-color: #4c87ed;
    width: 150%;
}
#voca-wrap{
    padding-bottom:0px !important;
}


/*-------------------------------*/
#sidebar-wrapper {
	  margin-left: -260px;
	  left: 0;
	  top:0;
	  width: 280px;
	  background: #282828;
	  position: fixed;
	  height: 100%;
	  overflow-y: auto;
	  z-index: 1000;
	  transition: all 0.4s ease 0s;
	}
	.sidebar-nav {
	  position: absolute;
	  top: 0;
	  width: 100%;
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  
	}
	
	.sidebar-nav li {
	  line-height: 40px;
	  
	}

	.sidebar-nav li a {
	  color: #555;
	  display: block;
	  text-decoration: none;
	}
	.li-sound-type{
	   list-style-type: none;
	}
    .sound-checked-radio{
        float: right;
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 1px solid #aaa;
        border-radius: 8px;
        margin-top: 15px;
        padding: 1px;
    }
    .sound-value-checked{
        background: #85cb21;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 4px;
    }
    .ul-sound-type{
        display: none;
    }
	.active {
	  position: relative;
	  left: 260px;
	}
    .sidebar-brand{
		
	}
	.active #sidebar-wrapper {
	  left: 260px;
	  width: 280px;
	  transition: all 0.4s ease 0s;
	}
	
	@media (max-width:767px) {

		#wrapper {
		  padding-left: 0;
		}

		#sidebar-wrapper {
		  left: 0;
		  top: 0;
		}

		#wrapper.active {
		  position: relative;
		  left: 260px;
		}

		#wrapper.active #sidebar-wrapper {
		  top: 0;
		  left: 260px;
		  width: 280px;
		  transition: all 0.4s ease 0s;
		}

		#menu-toggle {
		  display: inline-block;
		}

		.inset {
		  padding: 15px;
		}

	}
/*--------------------------------------------------------*/
.left-content{
	display: none;
	position: relative;
	left:-260px;
	margin-top:-10px;
	height:100%;
	width:300px;
	margin-left:0px;
}
.right-content{
	position:relative;
}



#uvTab{
    border: 0px solid!important;
    box-shadow: none!important;
    border-radius: 0px!important;
    bottom: 0px!important;
    right: 0px!important;
    top: auto!important;
    text-align: center;
    height: 30px;
    background: #ECC21B!important;
    z-index: 1039!important;
}
#uvTabLabel{
    padding: 5px 10px 5px 15px!important;
}
#uvTabLabel img{
    
}
/*NNOTIFICATION*/
.notification, .mobile-notification {
    display: block;
    height: 31px;
    line-height: 31px;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 25;
}
.mobile-notification{
    z-index: 1010;
}
.close-notification,.mobile-close-notification{
    position: fixed;
    z-index: 1001;
    width: 21px;
    height: 21px;
    border-radius: 10px;
    background: #4c87ed;
    padding: 1px 7px;
    right: 2px;
    margin-right: 5px;
    margin-top: 5px;
    color: #fff;
}
.mobile-close-notification{
    margin-top: -25px;
    padding: 0px 7px;
    line-height: 21px;
}
.diplay-notification{
    display: block;
}
.message-bar{
    height: 30px;
    position: fixed;
    bottom: 0;
    background: #073561;
    width: 100%;
    line-height: 30px;
    color: #fff;
    padding: 0 30px;
    font-size: 13px;
    z-index: 1000;
}
.message-content{
    width: 420px;
    border-top: 1px solid silver;
    height: 220px;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    background: #fff;
    position: fixed;
    left: 10px;
    bottom: -420px;
    transition: all 0.7s ease-in-out;
}
.message-header{
    height: 15px;
    background: #33669A;
    text-align: right;
}
.hide-message{
    color: #fff;
    line-height: 10px;
    font-size: 11px;
    padding: 0 5px;
}
.li-exam-message{
    width: 100px;
    padding: 0 10px;
}
.li-exam-message:hover{
    background: #001658;
}
.message-content-item img{
    width: 100%;
    height: 100%;
}
.blockUI{
    z-index: 11000!important;
}
@media (min-width: 600px) and (max-width: 991px) { 
	.intro-text-menu img{
		width: 90px;
	}
	
	.intro-topic-item {
		height: 381px;
	}
	.row-register-voca p {
		line-height: 120px;
		color: #FFFFFF;
		font-size: 16px;
	}
	.link-voca{
		padding: 0 10px 0 50px;
		height:60px;
	}
	.link-voca-text1{
		line-height:0;
		margin-left:0;
	}
	.link-voca-text2{
		margin-left:0;
	}
	.intro-content{
		margin-top: 100px;
	}
	.intro-congratulation{
		font-size: 20px;
		color: #FFFFFF;
	}
	.intro-together{
		font-size:17px;
		color: #FFFFFF;
	}
	.intro-focus{
		font-size:34px;
		color: #FFFFFF;
	}
	.intro-learn-voca{
		font-size:50px;
		color:#FFFFFF;
		font-weight:900;
	}
	.logo-btn-slidebar{
		text-align:center;
	}
        .intro-account-setting{
            margin:10px 0px 0 15px;
            overflow: hidden;
        }
}

@media (min-width: 320px) and (max-width: 380px) { 
        .message-content{
            width: 290px;
            left: 15px;
        }
        .share-button-intro{
            margin-left: 20px;
        }
	.intro-text-menu img{
		width: 80px;
	}
	.intro-topic-item{
		height: 381px;
	}
	.content-awsome{
		padding:0;
                margin-bottom: 20px;
	}
	.img-awsome{
		margin-left: 30px;
	}
	.content-awsome .content-awsome-1{
		text-align: left;
	}
	.row-register-voca p {
		line-height: 140px;
		color: #FFFFFF;
		font-size: 13px;
	}
	.link-voca{
		text-align: center;
		padding: 0 20px;
		height: 80px;
	}
	.link-voca-text1{
		line-height: 0px;
		text-align:center;
		margin: 0;
		
	}
	.link-voca-text2{
		line-height: 0px;
		text-align:center;
		margin: 0;
	}
	.content-awsome .content-awsome-2{
		margin-bottom: 10px;
	}
	.intro-three-steps2{
		padding: 10px;
	}
	.intro-content{
		margin-top: 70px;
	}
	.intro-focus{
		font-size:26px;
		color: #FFFFFF;
		margin: 20px 10px 0 10px;
	}
	.intro-learn-voca{
		font-size:40px;
		color:#FFFFFF;
		font-weight:900;
		margin: 20px 10px 0 10px;
	}
	.intro-congratulation{
		font-size: 15px;
		color: #FFFFFF;
		margin: 15px 10px 0 10px;
	}
	.intro-three-steps h2{
		font-size: 20px;
	}
	.intro-together{
		font-size:14px;
		color: #FFFFFF;
		margin: 15px 10px 0 10px;
	}
	.btn-register, .img-facebook{
		width:250px;
	}
        
	.page-title p{
		font-size:12px;
	}
}

@media (min-width: 320px) and (max-width: 767px) { 
	.intro-focus, .intro-learn-voca, .intro-congratulation, .intro-together{
		text-align: center;
	}
}
@media (min-width: 992px) and (max-width: 1199px) { 
	.intro-focus{
		font-size:28px;
	}
	.intro-learn-voca{
		font-size:45px;
	}
	.intro-congratulation{
		font-size:17px;
	}
	.intro-together{
		font-size:16px;
	}
}
@media (min-width: 368px) and (max-width: 767px) {
	.intro-together{
		text-align: center;
		margin-bottom: 30px;
	}
	.div-intro-together{
		width: 380px;
		margin: 0 auto;
	}
}


h2{
    font-family: 'OpenSansRegular'!important;
    font-size:20px;
}
.page-title{
    text-transform: uppercase;
}

/* BEGIN INFORM BAR CSS */
.inform-bar{
    position: fixed;
    top:50px;
    width:100%;
    left:0px;
    height:30px;
    line-height: 30px;
    background: #FFCE0F;
    color:#787878;
}
.remove-inform span{
    display:block;
    height:30px;
    line-height: 30px;
    cursor:pointer;
}
/* END INFORM BAR CSS */
.library-detail-topics-items img{
    border:2px solid #fff;
    transition:0.3s all linear;
}

.library-detail-topics-items:hover img{
    border:2px solid #FFCE0F;
}
.library-detail-modal-dialog{
    margin-top: 50px
}
.library-detail-modal-content{
    border-radius: 2px;
    padding: 15px;
}
.btn-learn-new, .test-btn-learn-new{
    color: #555;
    height: 45px;
    border: 0;
    border-radius: 0;
    margin-top: 10px;
    min-width: 130px;
    font-family: 'OpenSansBold';
    font-size: 13px;
    margin-right: 15px;
}
.btn-learn-new, .test-btn-learn-new{
    background-color: #FFE303;
}
.library-detail-modal-title{
    color: #555;
    font-size: 15px;
}
/* BEGIN LAYOUT VERSION 2 CHILD CSS */
/* topbar css */
.navbar-text{
    margin:15px;
}
.navbar-right{
    float:right!important;
}
.navbar-title{
    
    text-align: center;
}
.top-bar-left,.top-bar-right,.top-bar-center{
    color:#fff;
    height:50px;
    line-height:50px;
    font-size:15px;
    font-family: OpenSansRegular;
    text-transform:uppercase;
}
.top-bar-left{
    text-align: left;
    padding-left:25px;
}
.top-bar-right{
    text-align: right;
    padding-right:25px;
}
.top-bar-center{
    text-align:center;
}
.topic-detail-review-navbar{
    height:50px;
    background:#063561;
}
.topic-detail-review-topbar{
    margin:0 auto;
    height:50px;
}
.topic-detail-review-topbar .glyphicon{
    cursor:pointer;
    font-size:13px;
    line-height: 45px;
}
.notify-user span{
    font-size: 16px;
    color: #05B2D2;
    margin-bottom: 10px;
    display: inline-block;
}
/* END LAYOUT VERSION 2 CHILD CSS */

.help-icon{
    display: inline-block;
    width: 15px;
    text-align: center;
    margin-right: 5px;
    background: #FFCE0F;
    border-radius: 50%;
    height: 15px;
    line-height: 15px;
    color: #fff;
}
.pronounciation-lema {
	font-family:monospace;
}



/* line 22, sass/screen.scss */
#viewport-shadow {
  position: relative;
  width: 680px;
  padding: 0 140px 70px;
 
}

/* line 29, sass/screen.scss */
/*.viewport, .box, .slide {
    width: 100%!important;
    height: 290px;
    border: none;
    padding-left: 18px;
    padding-right: 28px;
}*/

/* line 34, sass/screen.scss */
.viewport {
  overflow: hidden;
}



/* line 37, sass/screen.scss */
#controls {
  position: relative;
  //top: -40px;
  float: right;
  overflow: hidden;
}
/* line 43, sass/screen.scss */
#controls li {
  display: inline;
}

/* line 46, sass/screen.scss */
.goto-slide {
  margin-left: 10px;
  width: 14px;
  height: 14px;
  display: block;
  float: left;
  border: solid 1px #000;
  background-color: #555;
  border-radius: 8px;
  -webkit-box-shadow: inset 0px 0px 8px #333;
  -moz-box-shadow: inset 0px 0px 8px #333;
  box-shadow: inset 0px 0px 8px #333;
}
/* line 59, sass/screen.scss */
.goto-slide.current {
  background-color: #2edbac;
}

/* line 62, sass/screen.scss */
.next, #prev {
  position: absolute;
  top: 80px;
  width: 30px;
  height: 300px;
  
  display: block;
  -webkit-transition: background .4s;
  -moz-transition: background .4s;
  transition: background .4s;
}
/* line 73, sass/screen.scss */
.next:hover, #prev:hover {
  
  border: none;
}

/* line 79, sass/screen.scss */
#prev {
  left: 90px;
}

/* line 80, sass/screen.scss */
.next, .next:hover {
  left: 840px;
  background-position: -30px 0;
}

/* line 83, sass/screen.scss */
#effect-switcher h2 {
  border-bottom: solid 1px #555;
  margin: 0 0 10px;
}

/* line 89, sass/screen.scss */
#effect-list {
  overflow: hidden;
}
/* line 91, sass/screen.scss */
#effect-list li {
  display: inline;
}

/* line 94, sass/screen.scss */
.effect, .effect:hover {
  display: block;
  float: left;
  margin: 10px 10px 0 0;
  border: solid 1px black;
  border-radius: 7px;
  padding: 10px 12px 6px;
  color: #ccc;
  text-decoration: none;
  background-color: #555;
  -webkit-box-shadow: inset 0px 0px 8px #000;
  -moz-box-shadow: inset 0px 0px 8px #333;
  box-shadow: inset 0px 0px 8px #333;
  position: relative;
}
/* line 109, sass/screen.scss */
.effect.current, .effect:hover.current {
  color: #2edbac;
}
/* line 113, sass/screen.scss */
.effect span, .effect:hover span {
  font-size: .7em;
  position: absolute;
  top: -8px;
  right: -4px;
  background-color: red;
  border-radius: 6px;
  border: solid 1px #555;
  color: white;
  padding: 3px 4px 2px;
  display: inline-block;
}

/* line 127, sass/screen.scss */
#time-indicator {
  width: 0px;
  height: 3px;
  background-color: #2edbac;
  position: absolute;
  top: 460px;
  left: 140px;
}

/* line 136, sass/screen.scss */
#credits {
  margin: 20px 0 40px;
  padding: 10px 0 0;
  color: #555;
  font-size: .9em;
}

#content-login-loading,
#content-signup-loading,
#content-register-loading{
    margin: 0 -15px;
}

.fullwidth .expand { 
	width: 95%;
	height:1px; 
	margin:2px 0; 
	background:#2187e7; 
	position:absolute;
	box-shadow: 0px 0px 1px 0px rgba(0,198,255,0.7);
        -moz-animation: fullexpand 1.3s ease-out;
	-webkit-animation: fullexpand 1.3s ease-out;
}

@-moz-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:89%%;}	
}
@-webkit-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:89%%;}	
}
.trigger, .triggerFull, .triggerBar {
	background: #000000;
	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	text-decoration: none;
	text-transform: lowercase;
	text-align: center;
	color: #fff;
	padding: 10px;
	border-radius: 3px;
	display: block;
	margin: 0 auto;
	width: 140px;
}
.alert-message-success, .alert-message-error{
    display: none;
    text-align: center;
    width: 500px;
    left: 35%;
    top: 30%;
    position: fixed;
    height: 50px;
    line-height: 20px;
    border-radius: 2px;
}
html {
	position: relative;
	height: 100%;
}

body {
	margin: 0;
	color: #555;
	overflow-x: hidden;
	overflow-y: scroll;
	height: 100%;
	background-color: #fff;
}

#voca-wrap {
	background-color: #fff;
	padding: 0px;
	min-height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	
}
#top-nav {
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	height:50px;
	background: black;
	z-index:1000;
}
.nav-bar-menu{
    background: #003366!important;
    border: 0px;
    border-radius: 0px;
}
#side-nav {
	position: absolute;
	z-index: -2;
	top: 0px;
	left: 0px;
	bottom: 0;
	width: 0px;
	background-color: #fff;
        border: 1px solid #ddd;
	overflow: hidden;
	display: none;
}

body.menu-open #close-menu-overlay {
	position: fixed;
	top: 0px;
	left: 280px;
	bottom: 0px;
	right: 0px;
	z-index: 6000;
	cursor: default;
	display: block;
}
/*REMOVE when you add bootstrap*/

.pull-left {
	float: left;
}
#top-nav ul li a {
	color: #fff;
	display:block;
}

.pull-right {
	float: right;
}

#frame, 
.description{
	margin: 20px auto auto auto;
	width: 100%;
	height: 400px;
	}
	
.playlists .special{
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: 420px;
	}

.playlists .ytv-list-header > a{
	-webkit-animation: pulse 2s infinite;
	-moz-animation: pulse 2s infinite;
	-o-animation: pulse 2s infinite;
	animation: pulse 2s infinite;
	}
	.playlists .ytv-list-header.ytv-playlist-open > a{
		-webkit-animation: none;
		-moz-animation: none;
		-o-animation: none;
		animation: none;
		}


/*
 * YouTube TV
 */

/*
 * Base Canvas
 */
.ytv-canvas{
	display: block;
	background: #282828;
	overflow: hidden;
	font-family: arial, sans-serif;
	}
.ytv-canvas ::-webkit-scrollbar{
	border-left: 1px solid #000;
	width: 10px;
	}
.ytv-canvas ::-webkit-scrollbar-thumb{
	background: rgba(255,255,255,0.1);
	}

/*
 * Video
 */
.ytv-video{
	position: absolute;
	top: 0;
    right: 300px;
    bottom: 0;
    left: 0;
    height: 100%;
	}
	.ytv-video iframe{
		width: 100%;
		height: 100%;
		border: none;
		outline: none;
		display: block;
		}

/*
 * List
 */
.ytv-list{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 300px;
	}
	.ytv-list-inner{
		overflow: auto;
		position: absolute;
		top: 52px;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    -webkit-overflow-scrolling: touch;
		}
	.ytv-list ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
		}
		.ytv-list .ytv-active a{
			border-left: 2px solid #fff;
			background: rgba(255,255,255,0.05);;
			}
		.ytv-list a{
			display: block;
			text-decoration: none;
			font-size: 11px;
			color: #FEFEFE;
			padding: 10px;
			padding-left: 8px;
			border-top: 1px solid rgba(255,255,255,0.1);
			border-bottom: 1px solid rgba(0,0,0,0.5);
			border-left: 2px solid transparent;
			}
			.ytv-list a b{		
			    max-height: 45px;
			    overflow: hidden;
			    display: block;
			    text-overflow: ellipsis;
				}
			.ytv-list li:first-child a{ border-top: none; }
			.ytv-list li:last-child a{ border-bottom: none; }
			.ytv-list a:hover,
			.ytv-list-header .ytv-playlists a:hover{ background: rgba(255,255,255,0.05); }
			.ytv-list a:active,
			.ytv-list-header .ytv-playlists a:active{ background: rgba(0,0,0,0.05); }
		
		.ytv-list .ytv-content{ padding-left: 125px; }
		.ytv-list .ytv-thumb-stroke{
			position: absolute;
			top: 1px;
			left: 1px;
			bottom: 1px;
			right: 1px;
			z-index: 2;
			outline: 1px solid rgba(255,255,255,0.1);
			}
		.ytv-list .ytv-thumb{
			float: left;
			position: relative;
			outline: 1px solid rgba(0,0,0,0.5);
			}
			.ytv-list .ytv-thumb img{
				width: 120px;
				display: block;
				}
			.ytv-list .ytv-thumb span{
				position: absolute;
				bottom: 5px;
				right: 5px;
				color: #eee;
				background: rgba(0,0,0,0.7);
				font-size: 11px;
				font-weight: bold;
				padding: 0px 4px;
				
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				}
		.ytv-views{
		    display: block;
		    margin-top: 5px;
		    font-size: 10px;
		    font-weight: normal;
		    opacity: 0.3;
			}


	.ytv-list-header{
		height: 52px;
		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		}
		.ytv-list-header a{
			background: rgba(255,255,255,0.05);
    		position: relative;
    		z-index: 10;
			}
		.ytv-list-header img,
		.ytv-list .ytv-playlists .ytv-thumb img{
			width: 30px;
			vertical-align: middle;
			}
		.ytv-list-header span{		
		    padding-left: 10px;
		    font-size: 12px;
		    font-weight: bold;
			}

/*
 * Playlists
 */
.ytv-playlists{
    z-index: 9;
    position: absolute;
    background: #282828;
    top:52px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    display: none;
	}
	.ytv-playlists img,
	.ytv-list-header img{
	    float: left;
		}
	.ytv-playlists a span,
	.ytv-list-header a span{	
	    white-space: nowrap;
	    padding-left: 10px;
	    display: block;
	    overflow: hidden;
	    text-overflow: ellipsis;
		}
	.ytv-list-header > a span{
		line-height: 30px;
		}
	.ytv-list-header .ytv-playlists a{
		background: none;
		}
	.ytv-playlist-open .ytv-playlists{
		display: block;
		}

/*
 * Modifiers
 */
.ytv-relative{
	position: relative;
	width: 100%;
	height: 100%;
	}
.ytv-full{
	position: fixed;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	}
.ytv-arrow {
	height: 10px;
	width: 0;
	position: relative;
	top: 10px;
	right: 5px;
	border: 10px solid transparent;
	float: right;
	border-top-color: rgba(0,0,0,0.4);
	display: none;
	}
	.ytv-has-playlists .ytv-arrow{
		display: inline-block;
		}
	.ytv-playlist-open .ytv-arrow{
		border-color: transparent;
		border-bottom-color: rgba(0,0,0,0.4);
		top: -10px;
		}

.ytv-list-header a:after,
.ytv-clear:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}
@font-face{
	font-family: OpenSansLight;
	src: url(../fonts/OpenSans-Light.ttf);
}
@font-face{
	font-family: OpenSansBold;
	src: url(../fonts/OpenSans-Bold.ttf);
	font-weight:800;
}
@font-face{
	font-family: opensansbold;
	src: url(../fonts/OpenSans-Bold.ttf);
	font-weight:800;
}

@font-face{
	font-family: OpenSansRegular;
	src: url(../fonts/OpenSans-Regular.ttf);
	font-weight:400;
}
@font-face{
	font-family: OpenSansSemibold;
	src: url(../fonts/OpenSans-Semibold.ttf);
	font-weight:600;
}
@font-face{
	font-family: OpenSansItalic;
	src: url(../fonts/OpenSans-Italic.ttf);
	font-weight:600;
}
@font-face{
	font-family: helvaticaregular;
	src: url(../fonts/helvatica-regular.ttf);
	font-weight:400;
}
@font-face{
	font-family: cocogoose;
	src: url(../fonts/COCOGOOSE_TRIAL.OTF);
	font-weight:400;
}
@font-face{
	font-family: RobotoLight;
	src: url(../fonts/ROBOTO-LIGHT.TTF);
	font-weight:400;
}
@font-face{
 font-family: uvnvanbold;
 src: url(../fonts/uvnvan-bold.ttf);
 font-weight:600;
}
@font-face{
 font-family: uvnvan;
 src: url(../fonts/uvnvan.ttf);
 font-weight:600;
}
@font-face{
 font-family: dumpling;
 src: url(../fonts/dumpling.otf);
 font-weight:600;
 }
/*Begin learning guide*/
.content-learning-guide{
    padding: 20px 80px;
}
.topic-name{
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 25px;
    padding-left: 10px;
    font-family: 'OpenSansLight';
}
#main{
    padding-left: 10px;
}
.voca-intro-step-lib, .voca-intro-lib {
    margin-top: 0px;
    text-transform: uppercase;
    font-size: 14px;
    font-family:OpenSansBold!important;
    color: #555;
    margin-top: 20px;
}
.voca-intro-step-lib {
    font-size: 20px;
}
.voca-intro-section{
  
}
.voca-intro-section p{
    text-align: justify;
    font-size: 15px;
}
.voca-intro-section.short-guide p{
    font-size: 15px;
}
.step p, .step a{
    font-size: 13px;
}
.rate-child11 span{
    font-size: 13px;
}
.voca-video-features-video:hover, .voca-video-features-video {
    display: block;
    text-decoration: none;
    margin-bottom: 20px;
}
.rate-learning-guide {
    position: relative;
    background: #F3F7F9;
    float: left;
    margin-top: 0px;
    margin-bottom: -10px;
}
.rate-child1 {
    float: left;
    display: inline;
    margin-right: 10px;
    margin-top: -20px;
}
.rate-child1 h2 {
    color: #0782C1;
    font-size: 20px;
}
.star {
    color: #FFCE0F;
}
.rate-child2 {
    float: left;
    display: inline;
    margin-right: 10px;
    margin-top: 2px;
    width: 100px;
}
.sign-up-button {
    position: relative;
    vertical-align: top;
    width: 100%;
    height: 45px;
    padding: 0px;
    font-size: 18px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #ffce0f;
    border: 0;
    border: 1px solid #FFAD00;
    cursor: pointer;
}
.voca-overlay-box {
    position: absolute;
    text-align: left;
    min-width: 500px;
    z-index: 2;
    top: 20%;
    left: 20%;
    display: none;
    left: 31%;
    display: none;
}
.voca-overlay-wrapper {
    position: relative;
    box-shadow: 0 0 18px rgba(0,0,0,0.4);
    background-color: #1d61b3;
    background-color: rgba(29,97,179,0.8);
    overflow: hidden;
    padding: 7px;
}
.voca-overlay-wrapper .body {
    background: #fff;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    border: 0 none;
    padding: 10px;
    min-width: 370px;
}
.library-detail-modal-dialog{
    margin-top: 50px;
}
.library-detail-modal-content{
    border-radius: 0px;
}
@media (max-width: 600px){
    .content-learning-guide{
        padding: 10px 15px;
    }
    .rate-child11 span{
        font-size: 11px;
    }
}
@media screen and (min-width: 601px) and (max-width: 991px){
    .content-learning-guide{
        padding: 10px 20px;
    }
}
/*End leaning guide*/
.filter-data-title h1 {
	font-size: 25px;
	font-family: 'OpenSansLight';
	margin-top: 25px;
}
.filter-data{
	background: #FFF;
	padding: 10px 80px;
}
.filter-data-stars .glyphicon-star {
	font-size: 18px;
	color: #FFCF0E;
}
.filter-data-count {
	color: #aaa;
	font-size: 11px;
}
.btn-filter-data, .btn-learn, .btn-test, .btn-ranking,.btn-know, .btn-dont-know{
	color: #555;
	height: 45px;
	border: 0;
	border-radius: 0;
	margin-top: 10px;
	min-width: 130px;
	font-family: 'OpenSansBold';
	font-size: 13px;
	margin-right: 15px;
}


.btn-filter-data{   
    background-color: #FFE303;
}
.btn-filter-data:hover{
    background-color: #f9f349;
    transition: all 0.5s ease-in-out;
}
.btn-learn{
	background-color: #FFE303;
}
.btn-test{
	background-color: #F56365;
	color: #FFF;
}

.text-disable{
	color: #555;
}
.bg-disabled{
    background-color: #DDD;
}
.btn-know{
	background-color: #58B6FE;
	color: #FFF;
}
.btn-know:hover{
    background-color: #8bd5f8;
    -webkit-transition: 0.5s all linear;
}
.btn-dont-know{
	background-color: #F0F0F0;
	color: #3A7CB6;
}
.btn-dont-know:hover{
    background-color: #e3e1e1;
    -webkit-transition: 0.5s all linear;
}
.user-filter-data{
	margin-top: -10px;
}
.users-comment h2 {
	font-size: 20px;
	color: #555;
	font-family: 'OpenSansRegular';
}

.wrapper-context-filter {
	width: 100%;
	height: 360px;
	background: #E8E4DE;
	margin-top: 10px;
	border: 1px solid #E4E4E4;
	border-radius: 2px;
	padding: 20px;
}
.kontext-items{
	background: #FFF;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	padding: 20px;
}
.progress{
	margin-top: 20px;
        border-radius: 2px;
}
.voca-word{
	font-size: 40px;
	font-family: 'OpenSansRegular';
	color: #FFAB02;
}
.vocabulary{
    overflow: hidden
}
.type-word{
	margin-top: 42px;
	display: inline-block;
	padding-left: 10px;
	font-family: 'OpenSansBold';
	color: #888;
}
.line-dark{
	border-bottom: 1px solid #ededed;
	margin-top: 20px;
}
.pronounce{
	margin-top: 10px;
}
.pronounce-content{
	font-size: 25px;
	font-family: Helvetica, Arial, sans-serif!important;
}
.sound{
	font-size: 20px;
        color: #555;
}
.process-bar {
  
    border: 1px solid #e0e0e0;
    
    text-align: center;
    height: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.process-bar .process-percent {
    height: 100%;
    width: 0%;
    color: #143F69;
    background: #003366;
    transition: 0.1s all linear;
    -moz-transition: 0.1s all linear;
    -webkit-moz-transition: 0.1s all linear;
    color: #fff;
    line-height: 15px;
}
@media screen and (max-width: 600px){
	.filter-data{
		padding: 10px 15px;
	}
	.filter-data-title h1 {	
		margin-top: 5px;
                font-size: 17px;
	}
	.filter-data-stars .glyphicon-star {
		font-size: 14px;
	}
	.filter-data-count {
		font-size: 11px;
	}
	.btn-filter-data, .btn-learn, .btn-test, .btn-ranking, .btn-know, .btn-dont-know{
		margin-right: 5px;
	}
	.wrapper-context-filter{
		padding: 10px;
	}
}

@media screen and (min-width: 571px) and (max-width: 991px){
	.filter-data{
		padding: 10px 20px;
	}
	.filter-data-title h1 {	
		margin-top: 5px;
                font-size: 17px;
	}
        .title-vocabulary{
            font-size: 17px;
        }
}
@media (max-width: 370px){
	.voca-word {
		font-size: 20px;
	}
	.type-word{
		margin-top: 23px;
	}
	.pronounce-content{
		font-size: 18px;
	}
	.sound{
		font-size: 18px;
	}
	.btn-filter-data, .btn-learn, .btn-test, .btn-ranking, .btn-know, .btn-dont-know {
		font-size: 9px;
	}
}
@media (max-width: 700px) and (min-width: 371px){
	.btn-filter-data, .btn-learn, .btn-test, .btn-ranking, .btn-know, .btn-dont-know {
		font-size: 10px;
	}
	.voca-word {
		font-size: 25px;
	}
	.pronounce-content{
		font-size: 20px;
	}
	.sound{
		font-size: 20px;
	}
	.type-word{
		margin-top: 28px;
	}
}
@media (max-width: 900px) and (min-width: 701px){
	.voca-word {
		font-size: 30px;
	}
	.pronounce-content{
		font-size: 22px;
	}
	.sound{
		font-size: 22px;
	}
	.btn-filter-data, .btn-learn, .btn-test, .btn-ranking, .btn-know, .btn-dont-know {
		font-size: 10px;
	}
	.type-word{
		margin-top: 33px;
	}
}
@media (min-width: 562px) and (max-width: 570px){
	.btn-filter-data, .btn-learn, .btn-test, .btn-ranking, .btn-know, .btn-dont-know {
		margin-right: 0px;
	}
}
/*!
 * kontext
 * http://lab.hakim.se/kontext
 * MIT licensed
 *
 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 */
.kontext {
	width: 100%;
	height: 100%;	
        position: relative;
}

.kontext .layer {
       position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}

.kontext .layer.show {
	visibility: visible;
         position: absolute;
}

.kontext.capable {
	/*-webkit-perspective: 1000px;
	   -moz-perspective: 1000px;
	        perspective: 1000px;*/

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.kontext.capable .layer {
	/*-webkit-transform: translateZ( -100px );
	   -moz-transform: translateZ( -100px );
	        transform: translateZ( -100px );*/
}

.kontext.capable .layer.show {
	-webkit-transform: translateZ( 0px );
	   -moz-transform: translateZ( 0px );
	        transform: translateZ( 0px );
}

.kontext.capable.animate .layer.show.right {
	-webkit-animation: show-right 1s forwards ease;
	   -moz-animation: show-right 1s forwards ease;
	        animation: show-right 1s forwards ease;
}

.kontext.capable.animate .layer.hide1.right {
	-webkit-animation: hide1-right 1s forwards ease;
	   -moz-animation: hide1-right 1s forwards ease;
	        animation: hide1-right 1s forwards ease;
}

.kontext.capable.animate .layer.show.left {
	-webkit-animation: show-left 1s forwards ease;
	   -moz-animation: show-left 1s forwards ease;
	        animation: show-left 1s forwards ease;
}

.kontext.capable.animate .layer.hide1.left {
	-webkit-animation: hide1-left 1s forwards ease;
	   -moz-animation: hide1-left 1s forwards ease;
	        animation: hide1-left 1s forwards ease;
}


/* CSS animation keyframes */

@-webkit-keyframes show-right {
	0%   { -webkit-transform: translateZ( -200px ); }
	40%  { -webkit-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -webkit-transform: translateZ( 0px ); }
}

@-webkit-keyframes hide1-right {
	0%   { -webkit-transform: translateZ( 0px ); visibility: visible; }
	40%  { -webkit-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -webkit-transform: translateZ( -200px ); visibility: hidden; }
}

@-moz-keyframes show-right {
	0%   { -moz-transform: translateZ( -200px ); }
	40%  { -moz-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -moz-transform: translateZ( 0px ); }
}

@-moz-keyframes hide1-right {
	0%   { -moz-transform: translateZ( 0px ); visibility: visible; }
	40%  { -moz-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -moz-transform: translateZ( -200px ); visibility: hidden; }
}

@keyframes show-right {
	0%   { transform: translateZ( -200px ); }
	40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { transform: translateZ( 0px ); }
}

@keyframes hide1-right {
	0%   { transform: translateZ( 0px ); visibility: visible; }
	40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { transform: translateZ( -200px ); visibility: hidden; }
}


@-webkit-keyframes show-left {
	0%   { -webkit-transform: translateZ( -200px ); }
	40%  { -webkit-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -webkit-transform: translateZ( 0px ); }
}

@-webkit-keyframes hide1-left {
	0%   { -webkit-transform: translateZ( 0px ); visibility: visible; }
	40%  { -webkit-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -webkit-transform: translateZ( -200px ); visibility: hidden; }
}

@-moz-keyframes show-left {
	0%   { -moz-transform: translateZ( -200px ); }
	40%  { -moz-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -moz-transform: translateZ( 0px ); }
}

@-moz-keyframes hide1-left {
	0%   { -moz-transform: translateZ( 0px ); visibility: visible; }
	40%  { -moz-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -moz-transform: translateZ( -200px ); visibility: hidden; }
}

@keyframes show-left {
	0%   { transform: translateZ( -200px ); }
	40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { transform: translateZ( 0px ); }
}

@keyframes hide1-left {
	0%   { transform: translateZ( 0px ); visibility: visible; }
	40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { transform: translateZ( -200px ); visibility: hidden; }
}


/* Dimmer */

.kontext .layer .dimmer {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	background: transparent;
	
}

	.kontext.capable.animate .layer .dimmer {
		-webkit-transition: background 0.7s ease;
		   -moz-transition: background 0.7s ease;
		        transition: background 0.7s ease;
	}

	.kontext.capable.animate .layer.hide1 .dimmer {
		visibility: hidden;
		background: #fff;
                margin:0;padding:0;
	}


.topics-detail-new-lesson{
	background: #FFF;
	padding: 10px 70px;
        margin-top:60px;
}
.topic-detail-title h1{
	font-size: 25px;
	font-family: 'OpenSansLight';
        text-transform: uppercase;
}
.topic-detail-content{
	
}
.topic-detail-stars .glyphicon-star{
	font-size: 20px;
	color: #FECD0E;
}
.topic-detail-count{
	color: #999;
        font-size: 12px;
}
.learn-now{
	background-color: #FFE303;
	color: #555;
	height: 45px;
	border: 0;
	border-radius: 0;
	margin-top: 10px;
	min-width: 150px;
	font-family:'OpenSansBold';
	font-size: 13px;
        transition:0.3s all linear;
}
.learn-now:hover{
    background:#FFF38A;
}
.new-vocabulary {
	padding-bottom: 20px;
}
.new-vocabulary  h2{
	font-size: 25px;
	font-family:'OpenSansLight';
}

.img-content {
	padding-top: 5px;
        padding-left: 10px;
}
.img-topic-item {
	width: 70px;
	height: 70px;
	border-radius: 35px;
	float: left;
}
.library-detail-topics-content {
	margin-bottom: 2px;
	text-align: justify;
}
.topic-item-title {
	font-size: 20px;
	margin-bottom: 0px;
	text-align: justify;
	color: #555;
}
.topic-item-content {
	font-size: 13px;
	margin-bottom: 10px;
}
.category{
	margin: 0 3px 0 1px;
	font-size: 13px;
}
.pronounce{
	margin-right: 3px;
	font-size: 15px;
        font-family: monospace;
        font-weight: 100;
}
.sound{
	font-size: 15px;
        color: #555;
}
.sound:active{
    color: blue;
}
.word-content{
	border-bottom: 1px solid silver;
	padding-bottom: 20px;
	padding-top: 10px;
	min-height: 130px;
}
 .border-top{
	border-top: 1px solid silver;
 }
 .users-comment h2{
	font-size: 20px;
	color: #555;
	font-family: 'OpenSansRegular';
 }
 .library-detail-modal-dialog{
    margin-top: 50px
}
.library-detail-modal-content{
    border-radius: 2px;
    padding: 15px;
}
.btn-test-review, .btn-learn-new{
    color: #555;
    height: 45px;
    border: 0;
    border-radius: 4px;
    margin-top: 10px;
    min-width: 160px;
    font-family: 'OpenSansBold';
    font-size: 13px;
    margin-right: 15px;
}
.btn-test-review{
    background-color: #F56365;
    color: #FFF;
}
.btn-learn-new{
    background-color: #FFE303;
}
.btn-learn-new-disabled{
    background: #ededed;
}
.library-detail-modal-title{
    color: #555;
    font-size: 15px;
}
.slide-intro-item{
    padding: 0px 0px;
}
 @media screen and (max-width: 570px){
	.topics-detail-new-lesson {
            padding: 10px 15px;
	}
        .slide-intro-item{
            padding: 0px 30px;
        }
}
@media screen and (max-width: 385px){
	.topic-detail-stars .glyphicon-star {
		font-size: 14px;
	}
	.topic-detail-count{
		font-size: 11px;
	}
        .topic-detail-title h1{
            font-size: 17px;
        }
}
@media screen and (min-width: 992px)and (max-width: 1200px){
	.library-detail-topics-content {
		margin-left: 10px;
	}
}


.filter-data-title h1 {
	font-size: 25px;
	font-family: 'OpenSansLight';
	margin-top: 25px;
}
.filter-data{
	background: #FFF;
	padding: 10px 80px;
}
.filter-data-stars .glyphicon-star {
	font-size: 18px;
	color: #FFCF0E;
}
.filter-data-count {
	color: #aaa;
	font-size: 11px;
}
.btn-filter-data, .test-btn-learn, .btn-exam, .btn-ranking, .btn-right-answer,.btn-know, .btn-dont-know{
	color: #555;
	height: 45px;
	border: 0;
	border-radius: 3px;
	margin-top: 10px;
	min-width: 130px;
	font-family: 'OpenSansBold';
	font-size: 13px;
	margin-right: 15px;
}

.btn-filter-data{
	background-color: #DDD;
}
.test-btn-learn{
	background-color: #fff;
        border:1px solid #ededed;
}
.test-btn-learn:hover{
    background: #f9f349!important;
    transition: all 0.5s ease-in-out;
}
.btn-exam{
	background-color: #ffce0f;
	color: #FFF;
}
.btn-exam:hover{
    background: #f9f349!important;
    transition: all 0.5s ease-in-out;
}

.btn-right-answer{
    background-color: #fff;
    color: #333;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #4c87ed;
    font-family: opensanssemibold;
}
.btn-right-answer-sample{
     font-family: opensansregular;
}
.btn-right-answer-sample.text-big{
    font-size: 14px;
}
.btn-right-answer:active{
    border: 1px solid #4c87ed!important;
    border-radius:4px!important;
    background: #fff!important;
    border-color: #4c87ed!important;
    cursor: progress;
}

.btn-know{
    background-color: #58B6FE;
    color: #FFF;
}
.btn-dont-know{
    background-color: #F0F0F0;
    color: #3A7CB6;
}
.count-timer{
    background: #FFF;
    width: 30px;
    height: 30px;
    border-radius: 25px;
    display: inline-block;
    font-size: 15px;
    line-height:29px;
    font-family: 'OpenSansBold';
    transition: 1s all linear;
    color: #1958A7;
    border: 1px solid #1958A7;
}
.text-disable{
    color: #BBB;
}
.user-filter-data{
    margin-top: -10px;
}
.users-comment h2 {
    font-size: 20px;
    color: #555;
    font-family: 'OpenSansRegular';
}
.filter-data-content{
    margin-top: 15px;
}
.test-wrapper-context-filter {
    width: 100%;
    height: 390px;
    background: #E8E4DE;
    margin-top: 10px;
    border: 1px solid #E4E4E4;
    border-radius: 2px;
    padding: 15px;
}
.kontext-items{
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    padding: 20px;
}
.progress{
    margin-top: 15px;
    border-radius: 2px;
}
.voca-word{
    font-size: 40px;
    font-family: 'OpenSansRegular';
    color: #FFAB02;
}
.type-word{
    margin-top: 42px;
    display: inline-block;
    padding-left: 10px;
    font-family: 'OpenSansBold';
    color: #888;
}
.line-dark{
    border-bottom: 1px solid #ededed;
    margin-top: 5px;
}
.pronounce{
    margin-top: 10px;
}
.pronounce-content{
    font-size: 25px;
    font-family: 'OpenSansLight';
}
.sound{
    font-size: 50px;
    color: #58B6FE;
}
.user-answer-type-1{
    position: absolute;
    bottom: 20px;
}
.user-answer-type-1 p{
    margin-bottom: 0px;
    font-size: 15px;
}
.vocabulary p{
    font-size: 25px;
    color: #FFAB02;
}
.img-responsive-test{
    max-width: 100%;
    height: 190px;
}
.txt-right-answer{
    height: 45px;
    width: 300px;
    margin-right: 10px;
    padding-left: 10px;
}
.highlight{
    color: #FF0000;
    transition: 0.7s all linear;
    border: 1px solid #FF0000;
}
@media screen and (max-width: 570px){
    .filter-data{
        padding: 10px 15px;
    }
    .filter-data-title h1 {	
        margin-top: 5px;
        font-size: 17px;
    }
    .filter-data-stars .glyphicon-star {
        font-size: 14px;
    }
    .filter-data-count {
        font-size: 11px;
    }
    .btn-filter-data, .test-btn-learn, .btn-test, .btn-exam, .btn-ranking, .btn-know, .btn-dont-know{
        margin-right: 5px;
    }
}
@media (max-width: 370px){
    .btn-filter-data, .test-btn-learn, .btn-test, .btn-exam, .btn-ranking, .btn-right-answer, .btn-know, .btn-dont-know {
        height: 40px;
        margin-top: 5px;
        font-size: 9px;
        margin-right: 10px;
        width: 100%;
    }
    .user-answer-type-1 {
        padding-right: 10px;
    }
    .wrapper-context-filter{
        padding: 10px;
    }
    .kontext-items{
        padding: 10px;
    }
    .user-answer-type-1{
            bottom: 10px;
    }
    .voca-word{
        font-size: 20px;
    }
    .sound{
        font-size: 40px;
    }
    .vocabulary p {
        font-size: 13px;
    }
    .img-responsive-test {
        height: 100px;
        width: 100%;
    }
    .txt-right-answer{
        width: 100%;
    }
    .user-answer-type-1 p {
        font-size: 11px;
    }
    .count-timer{
        background: #FFF;
        padding: 2px 4px 4px 4px;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        display: inline-block;
        font-size: 11px;
        font-family: 'OpenSansBold';
        color: #1958A7;
        line-height: 1.5;   
        margin-left: -15px;
        border: 1px solid #1958A7;
    }
    .highlight{
        transition: 0.7s all linear;
    }
}
@media (min-width: 371px) and (max-width:  700px){
    .btn-filter-data, .test-btn-learn, .btn-test, .btn-exam, .btn-ranking, .btn-right-answer, .btn-know, .btn-dont-know{
        margin-right: 5px;
        font-size: 10px;
    }
    .wrapper-context-filter{
        padding: 10px;
    }
    .kontext-items{
        padding: 10px;
    }
    .voca-word{
        font-size: 25px;
    }
    .user-answer-type-1{
        width: 100%;
    }
    .btn-right-answer{
        width: 47%;
    }
    .user-answer-type-1 p{
        font-size: 13px;
    }
    .user-answer-type-1{
        bottom: 10px;
    }
    .vocabulary p{
        font-size: 15px;
    }
    .img-responsive-test{
        height: 180px;
    }
    .btn-right-answer-write{
        width: 0%;
    }
    .txt-right-answer{
        font-size: 10px;
    }
}
@media (min-width: 701px) and (max-width:  900px){
    .btn-filter-data, .test-btn-learn, .btn-test, .btn-ranking, .btn-right-answer, .btn-know, .btn-dont-know{
        margin-right: 10px;
        font-size: 10px;
    }
    .voca-word{
        font-size: 30px;
    }
    .txt-right-answer{
        font-size: 10px;
    }
    .vocabulary p{
        font-size: 20px;
    }
    .sound{
        font-size: 45px;
    }
}
@media screen and (max-width: 570px){
    .filter-data{
        padding: 10px 15px;
    }
    .filter-data-title h1 {	
        margin-top: 5px;
    }
}
@media screen and (min-width: 571px) and (max-width: 991px){
    .filter-data{
        padding: 10px 20px;
    }
    .filter-data-title h1 {	
        margin-top: 5px;
    }
}
@media (min-width: 562px) and (max-width: 570px){
    .btn-filter-data, .test-btn-learn, .btn-exam, .btn-ranking, .btn-know, .btn-dont-know {
        margin-right: 0px;
    }
}
h2{
    font-size:20px;
}
h1{
    font-size:25px;
}
h5{
    font-size:11px;
}
h3{
    font-size:15px;
}
h4{
    font-size:13px;
}
.active{
    left:0;
}
/* topbar css */
.navbar-text{
    margin:15px;
}
.navbar-right{
    float:right!important;
}
.navbar-title{
    
    text-align: center;
}
.top-bar-left,.top-bar-right,.top-bar-center{
    color:#fff;
    height:50px;
    line-height:50px;
    font-size:15px;
    font-family: OpenSansRegular;
    text-transform:uppercase;
}
.top-bar-left{
    text-align: left;
    padding-left:25px;
}
.top-bar-right{
    text-align: right;
    padding-right:25px;
}
.top-bar-center{
    text-align:center;
}
.topic-detail-review-navbar{
    height:50px;
    background:#063561;
}
.topic-detail-review-topbar{
    max-width:1300px;
    margin:0 auto;
    height:50px;
}
.topic-detail-review-topbar .glyphicon{
    cursor:pointer;
    font-size:15px;
}
.notify-user {
    border-radius: 0px;
    margin: 0 15px 10px 15px;
    color: #05B2F6;
    margin-bottom: 10px;
    font-size: 12px;
    vertical-align: bottom;
    border: 0;
}
/* CONTENT CSS */

/* TITLE CSS */
.topics-review-content{
    max-width:1150px;
    margin:0 auto;
    margin-top: 50px;
    padding-top: 15px;
    overflow: hidden;
}
.content-title h1,.topic-review-title{
    font-family: OpenSansLight;
    text-transform: uppercase
}
.topic-info{
    margin:15px 0px 20px 0px;
    color:#aaa;
}
.topic-info .glyphicon{
    color:#FFCD10;
    font-size:20px;
}
.show-more-user{
    font-size: 13px;
}
.content-title{
    margin-bottom:10px;
}
.content-title-button-wrap{
    margin-bottom:20px;
}
.content-title-button-wrap a{
    display: inline-block;
    min-width: 130px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 11px;
    font-family: OpenSansBold;
    font-weight: bold;
    color:#fff;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
.content-title-button-wrap .review{
    background: #ffe303;
    color:#413f42
}
.content-title-button-wrap .review:hover{
    background: #f9f349!important;
    transition: all 0.5s ease-in-out;
}
.content-title-button-wrap .retest{
    background: #f56364;
}
.content-title-button-wrap .retest:hover{
    background: #fc2f2f!important;
    transition: all 0.5s ease-in-out;
}
.content-title-button-wrap .viewrank{
    background: #58b6fe;
}
.content-title-button-wrap .viewrank:hover{
    background-color: #8bd5f8!important;
    transition: all 0.5s ease-in-out;
}

/* LEFT CONTENT CSS */
.nav-tabs li{
    margin-bottom:-1px;
}
.nav-tabs li a{
    border-radius:2px;
    color:#494949;
    font-size: 11px;
    height: 45px;
    line-height: 25px;
}
.nav-tabs li.active a{
    color: #555;
}
.nav-tabs li.active a.tab-payment{
    background: #ffce0f;
}
.tab-content .tab-pane{
    padding-top:15px;
}
.number-user-learned{
    background: #E14932;
    font-family: OpenSansLight;
    padding:3px;
    margin-left:10px;
    min-width: 20px;
}
.user-learned{
    padding-left:30px;
    margin-bottom:20px;
}
.user-avatar{
    width:30px;
    height: 30px;
    border-radius:50%;
    cursor:pointer;
}
.user-avatar:hover{
    width:35px;
    height: 35px;
    border-radius:50%;
    transition: all 0.5s ease-in-out;
}
.user-learned-name{
    font-family: OpenSansBold;
    font-size:11px;
    margin-left: 10px;
}
.facebook-comment.iphone{
    display:none;
}

/* RIGHT CONTENT CSS */
.topic-review-title{
    font-size:25px;
    border-top:none!important;
    margin-bottom:-5px;
}
.topic-review-title.unknow-word{
    color:#e14934;
}
.unremember-word .word-info{
    color:#e14934;
}
.unremember-word .word-info h2{
    font-family: OpenSansLight;
}
.word-info{
    padding-left:10px;
}
.word-info h2,.word-info h4, .word-info .glyphicon.glyphicon-volume-up{
    display: inline;
    color:#494949;
}
.word-info h2{
    text-transform:uppercase;
}
.word-info .word-info-definition{
    font-size:12px;
}
.word-info .glyphicon.glyphicon-volume-up{
    font-size:15px;
    margin-left:5px;
    cursor:pointer;
}
.word-info .glyphicon.glyphicon-volume-up:active{
    color:#E14932;
}
.word-image{
    text-align:center;
    padding-right:0px;
}
.word-image img{
    width:66px;
    border-radius:50%;
    height:66px;
    cursor: pointer;
}
.word-image img:hover{
    width:70px;
    border-radius:50%;
    height:70px;
    border:2px solid #FEBF10;
    transition: all 0.5s ease-in-out;
}
.unremember-word,.remember-word{
    border-bottom:1px solid #ddd;
    padding:15px 0px;
}
.unremember-word:hover,.remember-word:hover{
    background: #fafafa;
}


/* RANKING BOARD VERSION2 */
.show-ranking-board .modal-dialog{
    width:auto;
}
.ranking-version2{
    color:#fff;
    box-shadow: none;
    border-radius:2px;
    margin-top:30px;
    padding:15px;
}
.ranking-board-title{
    margin-bottom:10px;
}
.ranking-icon img{
    max-width:100%;
}
.ranking-board-title h4{
    color:#aaa;
    font-size:17px;
    font-family: OpenSansLight;
}
.ranking-row{
    background:#196185;
    padding:5px;
    min-height:40px;
    text-align: left;
}
.ranking-row p{
    margin:0px;
    line-height: 30px;
}
.ranking-row.row-a{
    background: #2b6e8f;
}
.ranking-head p{
    margin: 0px;
    display: block;
    height:100%;
    line-height:30px;
}
.ranking-head{
    background: #221e1f;
    height: 30px;
}
.ranking-avatar img{
    max-height:30px;
    border-radius:50%;
}
.ranking-me span.badge{
    min-width:30px;
    background:#FDBE10;
    margin-top:5px;
}
.show-your-rank{
    color:#555;
    margin-top:15px;
}
.show-your-rank col-xs-12{
    margin-left:0px;
}
.ranking-name p{
    display: inline-block;
}
.ranking-name img{
    max-width: 15px;
    margin-top: -3px;
}
.ranking-name span.glyphicon{
    color:#000;
}
.btn-learn-new, .btn-test-review{
    color: #555;
    height: 45px;
    border: 0;
    border-radius: 4px;
    margin-top: 10px;
    min-width: 130px;
    font-family: 'OpenSansBold';
    font-size: 13px;
    margin-right: 15px;
    background-color: #FFE303;
}
.btn-learn-new-disabled{
    background: #ededed;
}
.btn-test-review{
    background: #F00;
    color: #FFF;
}
.library-detail-modal-dialog{
    margin-top: 50px
}
.library-detail-modal-content{
    border-radius: 2px;
    padding: 15px;
}
@media screen and (max-width:580px){
    .ranking-name img, .ranking-name span.glyphicon{
        display: none;
    }
}
/* END RANKING BOARD VERSION 2 CSS */

/* RESPONSE CSS */
@media only screen and (max-width:320px){
    .user-learned{
        padding-left:0px;
    }
    .content-title-button-wrap a{
        width:100%;
    }
    .retest,.viewrank{
        margin-top:10px;
    }
    .facebook-comment.iphone{
        display:block;
    }
    .facebook-comment.normal{
        display: none;
    }
    .topic-info-detail{
        font-size:10px;
    }
    .topic-info .glyphicon{
        font-size:15px;
    }
    .nav-tabs li.active a{
        font-size: 9px;
    }
}
@media only screen and (max-width:320px){
    .content-title h1, .topic-review-title{
        font-size: 17px;
    }
}



.library-href-content{
    color: #555;
}
.notification-expire{
    display: block;
    height: 30px;
    line-height: 30px;
    background: #f0d153;
    position: fixed;
    width: 100%;
    z-index: 5000;
    top: 50px;
    font-size: 14px;
    left:0px;
    right: 0px;
}
.close-notification-expire{
    position: fixed;
    z-index: 1001;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #fff;
    padding: 0px 6px;
    right: 0;
    margin-right: 5px;
    margin-top: 5px;
    line-height: 20px;
}
.library-btn-learn{
    margin-top: 10px;
    height: 25px;
    border-radius: 0;
    padding: 0;
    text-shadow: none;
    color: #fff;
    width: 65px;
    font-size: 9px;
    border: none;
    box-shadow: none;
}
.new-lesson{
    background: #FCF7CF;
}

.library-btn-learn:hover{
    color:#FFF;
}
.content-topics{
    margin-right: 30px;
}
.library-detail-right-content{
    overflow: hidden;
}
.library-btn-learn-again{
    background: #007FC6!important;
    
}
.container-right{
    background: #fcfcfc;
    padding-bottom: 20px;
}
.library-btn-test{
    background: #F56363!important;
    
}
.commitment{
    padding: 10px 10px 0px 10px;
    border: 1px dashed #00B0F0;
    font-size: 13px;
    line-height: 20px;
    background: #D9E6F0;
}
.newsletter{
    background: #DDEBF7;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px dashed #999;
    border-radius: 0px;
    margin-top: 20px;
}
.library-btn-filter{
    background: #FFE203!important;
    color: #555;   
}
.library-btn-filter:hover{
    color:#555;
}
.library-share{
    margin-top:10px;
    margin-bottom:20px;
}
.library-detail-topics-button{
    margin-top: 20px;
    margin-bottom: 10px;
}
.library-detail-modal-dialog{
    margin-top: 50px
}
.library-detail-modal-content{
    border-radius: 2px;
    padding: 15px;
}
.btn-test-review, .btn-learn-new{
    color: #555;
    height: 45px;
    border: 0;
    border-radius: 4px;
    margin-top: 10px;
    min-width: 160px;
    font-family: 'OpenSansBold';
    font-size: 13px;
    margin-right: 15px;
}
#learning-question button, #learn-question button, #learning-flashcard button, #learning-writing button, #learning-speaking button, #learning-context button{
    margin-right: 0;
    width: 100%;
    border-radius: 45px;
    margin-left: 0px;
}
#learning-question button:focus, #learn-question button:focus, #learning-flashcard button:focus, #learning-writing button:focus, #learning-speaking button:focus, #learning-context button:focus{
    outline: none;
}
.btn-test-review{
    background-color: #F56365;
    color: #FFF;
}
.btn-learn-new{
    background-color: #FFE303;
}
.btn-learn-new-disabled{
    background: #ededed;
}
.library-detail-modal-title{
    color: #555;
    font-size: 15px;
}
.text-open-time{
    font-size: 12px;
}
.content-open-time{
    font-size: 20px;
    color: #336699;
}
.count-word-tested{
    font-size: 10px;
    padding-left: 15px;
    font-family: 'OpenSansBold';
    color: #555;
}
.ranking-board-title h4 {
    color: #aaa;
    font-size: 17px;
    font-family: OpenSansLight;
}
.count-word-tested strong{
    font-size: 13px;
}
.is-know{
    color: #007EC5;
}
.is-dont-know{
    color:#FF0000;
}
.test-times{
    color: #F0918F;
}
.time{
    color:#D7AB04;
}
.frame-video{
    padding-left: 0px;
    padding-right: 0px;
}
.container-fluid{
    overflow: hidden;
}
.library-detail-header{
    position: relative;
    border-bottom: 1px solid #ededed;
}
.library-detail-header-item{
    padding-left: 63px;  
    padding-right: 13px;
    width: 100%;
    border-bottom: 1px solid #ededed;
    position: relative;
    right: 0;
    top: 0;
    background: #FFF;
    -webkit-transition: width 0.5s, height 0.5s,-webkit-transform 0.5s;  /* For Safari 3.1 to 6.0 */
    transition: width 0.5s, height 0.5s, transform 0.5s;
}
.learning-header-item{
    padding-left: 100px;
    padding-right: 85px;
    width: 100%;
    position: relative;
    right: 0;
    top: 0;
    background: #FFF;
    -webkit-transition: width 0.5s, height 0.5s,-webkit-transform 0.5s;  /* For Safari 3.1 to 6.0 */
    transition: width 0.5s, height 0.5s, transform 0.5s;
}
.filter-header-item{
    padding-left: 80px;
    padding-right: 65px;
}
.padding-left-right-85{
    padding-left: 85px;
    padding-right: 85px;
}
.line-black{
    border-top: 1px solid #ccc;
    width: 100%;
    position: absolute;
    left: 0;
    margin-bottom: 30px;
}
.learning-header{
    margin-bottom: 40px;
}
.feedback-modal-dialog{
    text-align: left;
    padding: 10px 30px 30px;
}
.feedback-modal-title{
    text-align: left;
    margin-bottom: 10px;
    color: #555;
    font-size: 15px;
}
.library-detail-header h1{
    font-size: 20px;
    font-family: 'OpenSansLight'!important;
    color: #063561;
    margin-top: 11px;
}
.lbrary-detail-header-title ul li{
    list-style-type: none;
    display: inline-block;
    margin-top: 10px;
    line-height: 30px;
    padding-left: 15px;
}
.lbrary-detail-header-title ul li a{
    color: #08c;
    cursor: pointer;
}
.black-color{
    color: #999999!important;
}
.library-detail-learn-trial, .library-detail-payment{
    border: 1px #ededed;
    text-align: center;
    padding-left: 10px!important;
    padding-right: 10px;
    margin-left: 10px;
    background: #3879D9;
    font-family: 'OpenSansBold';
    font-size: 10px;
    width: 90px;
    border-radius: 2px;
}
.library-detail-video-intro{
    margin: 20px 0;
}
.library-detail-intro{
    margin: 20px 0px;
}
.library-detail-community-share{
    margin-bottom: 20px;
}
.library-detail-learn-trial{
    background: #3879D9;
}
.library-detail-payment{
    background: #F9F349;
    
}
.library-detail-payment a{
    color: #555!important;
}
.library-detail-learn-trial a{
    color: #FFF!important;
}
.library-detail{
	min-height: 700px;
	background-color: #fff;
        overflow: hidden;
}
.library-detail-content-left{
    padding: 21px 30px 10px 93px;
    overflow: hidden;
}
.library-detail-content-left .library-detail-title{
    border-bottom: 1px solid #ededed;
}
.library-detail-left{
	padding: 10px 30px 10px 93px;
        overflow: hidden;
}
.lbrary-detail-title h1, .library-detail-title h1{
	font-size: 25px;
	font-family: 'OpenSansLight'!important;
	color: #555;
	margin-top: 25px;
}
.libary-count .glyphicon-star{
	font-size: 18px;
	color: #FECD0E;
}
.libary-count span{
	font-size: 12px;
        color: #999;
}
.signup-now{
	background-color: #FFE303;
	color: #555;    
	height: 45px;
	border: 0;
	border-radius:0;
	margin-top: 10px;
	min-width: 120px;
	font-size: 11px;
	font-family: 'OpenSansBold';
	margin-right: 15px;
}
.signup-now:hover{
    background: #f9f349!important;
    transition: all 0.5s ease-in-out;
}
.signup-captcha-text{
    margin-bottom: 5px;
}
.signup-captcha-img, .signup-captcha-input{
    height: 35px;
}

.share-now, .like-now{
	background-color: #3C599B;
	color: #FFF;
	height: 45px;
	border:0;
	border-radius:0;
	margin-top:10px;
	min-width: 120px;
        font-size: 11px;
	font-family: 'OpenSansBold';
	margin-right: 15px;
}
.share-now{
    
}
.active{
	left:0;
}
.tab-nav{
	margin-top: 20px;
}
.nav-tabs li a{
	font-size: 11px;
	color: #555;
        border-radius: 0px;
}
.promotion-code-area{
    padding: 10px 0px 10px;
}
.title-short-description{
    font-size: 10px;
    background: #3C599B;
    padding: 3px 3px;
    color: #fff;
}
.nav-tabs .active a{
	font-family: 'OpenSansBold'!important;
}
.video-form{
	padding: 25px 70px 20px 25px;
}
.video-intro{
	width: 100%;
	height: 450px;
}
.video-share{
    margin-top: 10px;
    color: #3C599B;
    font-size: 15px;
}
.img-video-share{
    width: 40px;
    height: 40px;
}
.video-description{
    font-size: 12px;
    margin-top: 0px;
    padding: 10px 10px 0px 10px;
    border: 1px dashed #00B0F0;
    font-style: italic;
    margin-bottom: 10px;
}
.product-title{
    font-size: 18px;
}

.img-short-description{
    width: 65px;
    height: 25px;
}
.text-short-description{
    font-size: 13px;
    color: #777;
}
.content-positive-reviews p{
	margin-bottom:5px;
	text-align: justify;
}
.content-positive-reviews-1{
	font-size: 12px;
}
.content-positive-reviews-2{
	font-size: 9px;
}
.item-positive-reviews{
	overflow: hidden;
	margin-top: 20px;
}
.library-benefit{
	/*padding-right: 30px;*/
        clear: both;
}
.container-user{
	padding: 20px;
	
}
.container-user-item{
	background: #fcfcfc;
}
.border-img{
	width: 76px;
        height: 76px;
        border-radius: 41px;
}
.border-img:hover .img-positive-reviews{
    width: 70px;
    height: 70px;
    
}
.img-positive-reviews{
	width: 65px;
        height: 65px;
        border-radius: 35px;
        cursor: pointer;
        transition: all 0.5s ease-in-out;
        padding: 3px;
        border: 1px solid #ededed;
}
.content-positive-reviews{
	padding-right: 15px;
}
.positive-reviews-cotnents{
	margin-left: -10px;
}
.benefit-title, .positive-reviews-title, .opinion-title{
    font-size: 16px;
}
.benefit-item{
    margin-left: 10px;
    text-align: justify;
    font-size: 12px;
}
.library-detail-topics{
    padding-top: 10px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 20px;
    margin-top: 10px;
}
.library-detail-topics h2{
    font-size: 25px;
    font-family: 'OpenSansLight'!important;
    color: #555
}
.count-topics{
    margin-top: 25px;
    margin-left: 5px;
    background-color: red;
    color: #FFF;
    padding: 3px 10px;
}
.user-name{
    font-size: 11px;
    color: #063561;
    font-family: 'OpenSansLight';
}
.img-content {
    padding:10px 0px 10px 0px;
    margin-top: 20px;
}
.library-detail-topics-content{
    margin-top: 10px;
}
.library-detail-topics-items{
    border-bottom: 1px solid #ededed;
    float:left;
    padding-bottom: 5px;
}
.library-detail-topics-items:hover{
    background: #fafafa;
}
.library-detail-topics-content p{
    margin-bottom: 2px;
    text-align: justify;
}
.topic-item-title{
	font-size: 14px;
	text-transform: uppercase;
}
.library-detail-topics-items{
	overflow: hidden;
}
.facebook-comment.iphone{
    display:none;
}
.img-topic-item{
	width: 66px;
	height:66px;
	border-radius: 32px;
	float: left;
        cursor:pointer;
	transition: all 0.5s ease-in-out;
	border:1px solid #ededed;
}
.img-topic-item:hover{
	width: 70px;
	height:70px;
	border-radius: 35px;

}
.topic-item-content{
	font-size: 12px;
}
.img-user-item{
	width: 30px;
	height:30px;
	border-radius: 15px;
	margin-right: 3px;
        cursor:pointer;
	padding: 1px;
	border: 1px solid #ededed;
}
.img-user-item:hover {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    transition: all 0.5s ease-in-out;
}
.user-learning{
	padding: 20px 20px 0px 10px;
}
.show-more{
	padding-left:50px;
	margin-top: 10px;
	margin-bottom: 20px;
        font-size: 12px;
}
.home-carousel-control{
    width: 8%;
}
.home-carousel-control.left, .home-carousel-control.right{
    background: transparent;
}
.home-carousel-indicators .active{
    border: 1px solid #063561;
}
.home-carousel-indicators li{
    border: 0px;
    background: #ABABAB;
}
.home-three-step-content{
    padding: 20px 10px 30px 10px;
}
.home-three-step-title{
    font-size: 25px;
    font-family:OpenSansLight;
    color: #063561;
    margin-bottom: 40px;
}
.three-step-item{
    margin-bottom: 5px;
    font-family: OpenSansBold;
    color: #4CB1F1;
    font-size: 12px;
}
.three-step-content{
    font-size: 11px;
    color: #aaa;
    text-align: justify;
}
.notify-user {    
    margin-bottom: 10px;
    color: #05B2F6;
    margin-bottom: 20px;
    font-size: 12px;
    vertical-align: bottom;
    border: 0;
}
.notify-user .error{
    color: #F00;
}
.video-form-community{
	padding: 20px 10px 20px 30px;
}
.video-community{
	height: 370px;
	width: 100%;
}
.video-form-community-small{
	padding-top: 20px;
}
.video-community-small{
	height: 120px;
	width: 100%;
}
.library-detail-right{
	padding: 0 80px 10px 0px;
        overflow: hidden;
}
.frame-video{
    padding-left: 0px;
    padding-right: 0px;
}
.topic-detail-items{
	background: #FFF;
}
.library-href-content:hover{
    color: #555;
}
.open-yet{
    color: silver;
}
.open{
    color: #555;
}
.content-library-detail-right{
    background: #FCFCFC;
}
.bg-library-why{
    padding: 0px 20px 0px 0px;
    text-align: justify;
    background: #FFF;
}
.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }

/* ranking borard vesion 1 css */
.close{
    opacity:1!important;
}
.show-ranking-board .modal-content{
    padding:20px;
}
.show-ranking-board .top-three{
    padding-bottom:20px;
    border:1px solid #5290BC;
    background: #F3F7FA;
    margin: 10px 0px 0px 0px;
}
.top-three-item{
    text-align:center;
}
.top-three-item .ranking-chart{
    width:100%;
    margin:0 auto;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius:2px;
    transition: 2s all linear;
}
.top-three-item .space-blank,.top-three-item .person-name{
    width:100%;
    height:30px;
    line-height:30px;
}
.top-three-item .person-name{
    text-align: center;
    color:#494949;
    font-size: 14px;
}
.person-avatar{
    max-width:100%;
    padding-bottom:15px;
}
.person-avatar img{
    width: 75px;
    height: 75px;
    border-radius:50%;
    border: 1px solid gainsboro;
    cursor:pointer;
    transition: 0.3s all linear;
    padding: 1px;
}
.person-avatar img:hover{
    border:2px solid #FEBF10;
}
.person-score{
    color:#494949;
    height:50%;
}
.person-rank{
    height:50%;
    font-size:30px;
    color:#143F69;
}
.top-three-item{
    text-align:center;
    min-height:360px;
    max-height:380px;
    height:380px;
    overflow:hidden;
}
.top-three-item.item-1 .ranking-chart{
    height:170px;
    line-height:120px;
    background:rgb(246, 248, 25);
}
.top-three-item.item-2 .ranking-chart{
    height:140px;
    line-height:90px;
    background:#EAEAEA;
}
.top-three-item.item-3 .ranking-chart{
    height:100px;
    line-height:50px;
    background:rgb(251, 192, 152);
}
.top-three-item.item-1 .space-blank{
    height:90px;
}
.top-three-item.item-2 .space-blank{
    height:120px;
}
.top-three-item.item-3 .space-blank{
    height:160px;
}
.show-ranking-board .seven-more{
    text-align:left;
    padding:0px 15px 0px 0px;
}
.show-ranking-board .seven-more-title{
    
}
.show-ranking-board .seven-more-item{

}
.show-ranking-board .show-your-rank{
    margin-top: 20px;
}
.seven-more-title .seven-title-name{
    font-size:20px;
    text-align:center;
}
.your-rank p{
    color:#494949;
    font-size: 14px;
}
.your-rank{
    margin-top:10px;
}
.seven-more-wrapper-in{
    text-align:left;
    padding:20px;
}
.table-seven-more tr td{
    font-size: 14px;
}
.table-seven-more tr:first-child{
    color:#0066cc;
    font-size:11px!important;
}
.dialog-fadein{
    display: none;
}
.space-blank{
    transition:0.5s all linear;
}
.space-blank.begin{
    height:261px!important;
}
.person-avatar,.person-name,.person-score{
    transition: 1s all linear;
}
.person-avatar.begin,.person-name.begin,.person-score.begin{
    opacity:0;
}
.total-ranking-title h4{
    font-family: OpenSansLight;
    color:#aaa;
}
.title-comment{
    margin-bottom: 0px;
    border-bottom: 1px solid #ededed;
    margin-top: 20px;
    padding: 5px 0px;
    color: #777;
}
.normal-style{
    font-style: normal;
    margin: 0 0 8px;
}
.comment-like{
    margin-right:15px;
    color: #3C559B;
    
}

.video-library-overview{
    max-width: 100%!important;
    height: 315px!important;
}
.img-library-overview{
    max-width: 100%;
}
/* end ranking board version 1 */
@media screen and (max-width: 570px) {
	.video-library-overview{
		width: 100%!important;
		height: 300px!important;
	}
        .img-library-overview{
            width: 100%!important;
            height: auto!important;
        }
	.lbrary-detail-title h1{
		font-size: 18px;
	}
	.library-detail-left{
		padding: 10px 30px 10px 30px;
	}
	.libary-count .glyphicon-star{
		font-size: 15px;
	}
	.libary-count span{
		font-size: 11px;
	}
	.share-now, .like-now{
		min-width: 85px;
	}
	.nav-tabs li a{
		font-size: 9px;
                border-radius: 0;
                padding: 10px 5px;
	}
	.video-form {
		padding: 20px 30px 20px 0;
	}
	.video-intro, .video-community, .video-community-small{
		height: 280px;
	}
	.user-learning{
		padding: 20px 20px 0 5px;
	}
	.user-name{
		font-size: 9px;
	}
	.img-user-item {
		width: 30px;
		height: 30px;
		border-radius: 15px;
	}
	.video-form-community {
		padding: 20px 40px 20px 10px;
	}
	.video-form-community-small {
		padding-top: 0px;
		padding-left: 10px;
		padding-right: 40px;
	}
	.library-benefit{
		/*padding-right: 30px;*/
	}
	.item-positive-reviews {
		margin-bottom: 20px;
		overflow: hidden;
		padding-left: 15px;
	}
	.library-detail-topics h2 {
		font-size: 26px;
		font-family: 'OpenSansLight'!important;
		color: #555;
	}
	.library-detail-topics-items {
		padding-left: 15px;
	}
	.topic-item-title{
		font-size: 16px;
	}
}
@media screen and (min-width: 571px) and (max-width: 800px) {
        .library-detail-content-left{
                padding: 23px 30px 10px 53px;
        }
        .library-detail-header-item{
            padding-left: 23px;
        }
	.video-form {
		padding: 20px 50px 20px 20px;
	}
	.video-form-community {
		padding: 20px 40px 20px 20px;
	}
	.video-form-community-small {
		padding-top: 20px;
		padding-right: 40px;
		padding-left: 20px;
	}
	.video-community, .video-community-small{
		height: 280px;
	}
	.library-benefit{
		/*padding-right: 40px;*/
	}
	.library-detail-topics {
		padding-left: 55px;
	}
	.library-detail-topics-content {
		margin-top: -10px;
	}
	.library-detail-topics-items {
		padding-top: 20px;
	}
        .img-topic-item{
		margin-top: -15px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1024px) {
        .library-detail-content-left{
                padding: 23px 30px 10px 53px;
        }
        .library-detail-header-item{
            padding-left: 23px;
        }
        .lbrary-detail-header-title ul{
            padding-left: 0px;
        }
        .library-detail-right{
		padding: 0 20px 10px 0px;
	}
        .library-detail-left{
		padding: 10px 10px 10px 30px;
	}
	.library-detail-topics-items {
		padding-right: 0px;
	}
        
}
@media (min-width: 992px){
        .library-btn-learn{
            margin-left: -15px;
        }
        .profile-form-item{
            margin-left: -15px;
        }
}
@media screen and (min-width: 992px) and (max-width: 1140px) {
    .library-btn-learn{
            margin-left: -25px;
        }
}
@media(min-width: 1360px){
    .library-detail-header-right{
        padding-left: 110px;
    }
    .library-detail-header-right-free{
        padding-left: 210px;
    }
}
@media screen and (max-width: 363px){
        .video-library-overview{
                width: 100%!important;
                height: 200px!important;
        }
        .library-detail-content-left{
                padding: 23px 30px 10px 33px;
        }
        .library-detail-header-item{
            padding-left: 0px;
        }
        .lbrary-detail-header-title ul{
            padding-left: 0px;
        }
        .facebook-comment.iphone{
            display:block;
        }
        .facebook-comment.normal{
            display: none;
        }
	.signup-now{
		margin-right: 5px;
		min-width: 100px;
	}
	.share-now, .like-now{
		margin-right: 5px;
	}
	.topic-item-title {
		font-size: 16px;
	}
        .nav-tabs li a{
            font-size: 8.4px;
            padding: 11px 4px;
            border-radius: 0;
        }
}
@media screen and (max-width: 768px)
{
	.library-detail-right {
		padding: 0 50px 10px 40px;
	}
        .learn-result-wrap{
            padding:0px;
        }
        .learn-result-wrap.know, .learn-result-wrap.unknow, .learn-result-wrap.learned, .learn-result-wrap.not-learned{
            padding-left:3px !important;
            padding-right:3px !important;  
        }
        .learn-result-wrapper{
            padding:0px 15px;
        }
        
}
@media screen and (max-width: 800px){
    .library-detail-content-left{
            padding: 23px 30px 10px 53px;
    }
    .library-detail-header-item{
        padding-left: 0px;
    }
    .library-detail-header-right{
        padding-left: 0px;
        padding-right: 0px;
    }
    .lbrary-detail-header-title ul{
            padding-left: 0px;
        }
    #frame, .description{
        height: 500px;
    }
    .ytv-video{
        position: absolute;
        top: 0;
        right: 0px;
        bottom: 0;
        left: 0;
        height: 60%;
    }
    .ytv-list {
        position: absolute;
        top: 300px;
        right: 0;
        bottom: 0;
        height: 200px;
        width: 100%;
    }
}

@media screen and (max-width: 480px){
    .video-library-overview{
            width: 100%!important;
            height: 250px!important;
    }
}
@media screen and (max-width: 385px){
	.library-detail-right{
		padding: 0 15px 10px 15px;
	}
        .container-user{
            padding: 0;
        }
        .btn-learn{
            margin-left: 28%;
            margin-top: -25px;
        }
        .count-word-tested{
            margin-left: 25%;
        }
        .learn-result-container{
            padding-right:35px;
        }
        .newsletter{
            padding: 20px;
        }
}
@media screen and (min-width: 386px) and (max-width: 767px){
    .btn-learn{
        margin-left: 26%;
        margin-top: -30px;
    }
    .count-word-tested{
        margin-left: 25%;
        margin-top: -5px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    .btn-learn{
        
        margin-top: -25px;
    }
    .count-word-tested{
        margin-left: 25%;
        margin-top: -5px;
    }
}
@media screen and (min-width: 571px) and (max-width: 991px){
	.library-detail-right{
		padding: 0 15px 10px 15px;
	}
	.library-detail-left{
		padding: 10px 33px;
	}
	.lbrary-detail-title h1{
		margin-top: 5px;
	}
}
@media (min-width: 992px){
	.library-detail-right-content{
		padding-left: 5px;
	}
}
/* CSS Voca learning diary */
.learn-result-wrapper{
    padding-right:12px;
}
.learn-result-wrap{
    text-align:center;
    padding-right:7px;
    padding-left:7px;
    padding-bottom: 7px;
}
.learn-result-wrap.know{
    padding-left:15px;
    color:#4280ef;
}
.learn-result-wrap.not-learned{
    padding-right:15px;
    color:#dcdcdc;
}
.learn-result-wrap.unknow{
    color:#e14b33;
}
.learn-result-wrap.learned{
    color:#a4a4a4;
}
.learn-result-wrap .learn-result{
    border-radius:0px;
    border:1px solid #dedede;
    background:#f5f5f5;
    height:85px;
    padding-top:10px
}
.learn-result-wrap .number-learn-result{
    font-size:30px;
    font-family: OpenSansLight;
}
.learn-result-wrap .word-learn-result{
    font-size:13px;
    font-family: OpenSansLight;
}


.container-fluid{
    overflow: hidden;
}
.library-container{
    padding:40px 70px;
    min-height: 600px;
    overflow: hidden;
}
.library-add-vocabulary, 
.library-share-fb, 
.hide-vocabulary-temp,
.stop-receive-remind-vocabulary,
.receive-remind-vocabulary{
    left: 34px;
    top: 33px;
    padding: 2px;
    width: 25px;
    height: 25px;
    opacity: 0.7;
    background: #000;
    border-radius: 4px;
    margin: 3px;
    min-width: 25px;
}
.library-add-vocabulary:hover,
.library-share-fb:hover, 
.hide-vocabulary-temp:hover,
.stop-receive-remind-vocabulary:hover,
.receive-remind-vocabulary:hover{
    background: #09ADEF;
}
.library-share-fb-margin-top,
.stop-receive-remind-vocabulary-margin-top,
.receive-remind-vocabulary-margin-top{
    margin-top: 31px;
}
.dashboard-share-fb-margin-top{
    margin-top: 59px;
}
.library-add-vocabulary + .tooltip > .tooltip-arrow, 
.library-share-fb + .tooltip > .tooltip-arrow, 
.hide-vocabulary-temp + .tooltip > .tooltip-arrow,
.stop-receive-remind-vocabulary + .tooltip > .tooltip-arrow,
.receive-remind-vocabulary + .tooltip > .tooltip-arrow{
    opacity: 0.8;
    border-right-color: #000;
}
.library-add-vocabulary + .tooltip > .tooltip-inner, 
.library-share-fb + .tooltip > .tooltip-inner,
.hide-vocabulary-temp + .tooltip > .tooltip-inner,
.stop-receive-remind-vocabulary + .tooltip > .tooltip-inner,
.receive-remind-vocabulary + .tooltip > .tooltip-inner{
    opacity: 0.8;
    background: #000;
}

.library-add-icon{
    line-height: 24px!important;
    font-size: 10px;
    color: #fff;
}
.active{
	left:0px;
}
.intro-three-steps2{
	padding:0px;
}
#library-tab{
    margin-right: 5px;
}
#library-tab a{
	border-radius:0px !important;
        font-size: 11px;
        color: #555;
}
#library-tab .active a{
    font-family: OpenSansBold;
}
.no-result{
    font-size: 17px;
    text-align: center;
    color: #333;
}
/*.library-search{
	padding:20px;
	margin-bottom: -20px;
}
.library-search input{
	height:38px;
	width:100%;
	background: url("../img/search-bg.jpg") no-repeat left;
	border:1px solid gainsboro;
	padding-left: 30px;
        margin-bottom: 0px;
}*/
.library-title{
        font-size: 25px;
	font-family: "OpenSansLight";
}
.libray-title-span{
    font-size: 20px;
    color: #CCCCCC;
}

/*.library-search::-webkit-input-placeholder {
    font-size: 11px;
    line-height: 22px;
}*/
@media (max-width: 760px){
	.library-container{
		padding:50px 10px;
	}
}
/*@media (max-width:600px){
	.library-search{
		margin-bottom: 0px;
	}
}*/
.warning-alert{
    padding: 20px 25px 0px;
    font-size: 13px;
    display: none;
    trasition: width 2s linear 2s;
}
.notify-active-product {
    border-radius: 2px;
    margin-bottom: 20px;
    font-size: 11px;
    vertical-align: bottom;
    border: 0;
}
.notify-success{
    color: #05B2F6;
}
.notify-warning{
    color: #F00;
}
.login-form{
    padding: 0 60px 10px 60px;
}
.signin-button{
    margin-bottom: 10px;
    height: 40px;
    width: 100%;
    background: #ffe303;
    border: 0;
    font-size: 11px;
    font-family: OpenSansBold;
    color: #666;
}
.signin-button:hover{
    margin-bottom: 10px;
    height: 40px;
    width: 100%;
    background: #ffe303;
    border: 0;
    font-size: 11px;
    font-family: OpenSansBold;
    color: #666;
}
.signin-button:active{
    margin-bottom: 10px;
    height: 40px;
    width: 100%;
    background: #ffe303;
    border: 0;
    font-size: 11px;
    font-family: OpenSansBold;
    color: #666;
}
.signin{
    margin-top:0px;
}
.login-form{
    padding: 0 25px 10px 25px;
}
::-webkit-input-placeholder {
   font-size: 13px;
}

:-moz-placeholder { /* Firefox 18- */
   font-size: 13px;  
}

::-moz-placeholder {  /* Firefox 19+ */
   font-size: 13px; 
}

:-ms-input-placeholder {  
   font-size: 13px; 
}
.warning-license{
    margin-top: 20px;
}

.content{
	background-color: #fff;
}
.login-title{
	font-family: 'OpenSansLight';
	font-size: 25px;
	color: #555;
	margin: 40px 0px;
}
.payment-content{
	padding: 30px 15px 30px 15px;
}
.apply-promotion-code-result{
    font-size: 13px;
}
.payment-header{
	width: 100%;
	height: 50px;
	background: #4cb1f1;
	border: 1px solid #ededed;
	line-height: 50px;
	color: #FFF;
	padding-left: 30px;
	font-size: 13px;
}
.lock{
	font-size: 20px;
}
.payment-content-item{
	width: 100%;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	border-right: 1px solid #ededed;
	padding: 20px;
}
.provide-information{
	font-size: 13px;
	color: #f00;
        font-family: OpenSansBold;
        margin-bottom: 0px;
        margin-top: 10px;
}
.notify-warning{
    margin-top: 10px;
    margin-bottom: 0px;
    border: 0;
    border-radius: 0;
    color: red;
}
.group-control{
	margin-bottom: 10px;
}
.form-group p{
	font-size: 12px;
	margin-bottom: 5px;
}
.payment-control{
    height: 40px;
    border-radius: 0px;
    font-size: 13px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}
.payment-method h2{
	font-size: 11px;
	font-family: Opensansbold;
	color: #999;
	margin-top: 40px;
	margin-bottom: 20px;
}
.card-item{
    margin-bottom: 20px;
}
.card-item p{
	margin-bottom: 5px;
	font-size: 13px;
}
.card-item img{
        height: 30px;
}
.promotion-code{
	margin-left: -25px;
	margin-bottom: 10px;
}
.promotion-code-text{
	font-size: 13px;
}
.if-have{
	font-size: 11px;
	color: #f00;
}
.payment-now{
	width: 100%;
	height: 45px;
	background: #ffe303;
	border: 0;
	font-size: 11px;
	font-family: OpenSansBold;
	color: #666;
}
.total-value{
	margin-bottom: 20px;
}
.total-value-item{
	width: 100%;
	min-height: 45px;
	background: #f2faff;
	line-height: 45px;
	padding-left: 15px;
	margin-bottom: 20px;
}
.total-value-banking-item{
	width: 100%;
	min-height: 45px;
	background: #f2faff;
	padding-left: 30px;
	margin-bottom: 20px;
}
.error-message{
    color: #F00;
    font-size: 13px;
}
.value-text{
	font-size: 13px;
	margin-right: 10px;
}
.value-number{
	font-size: 15px;
	color: #85BB03;
}
.real-value-number{
        font-size: 25px;
        font-family: 'OpenSansBold';
}
.total-money, .discount-money{
        font-family: OpenSansRegular;
}
.payment-gate{
	font-size: 11px;
	color: #f00;
}
.apply-promotion{
    margin-top: 10px;
    font-size: 13px;
}
.div-promotion{
    display: none;
}
.div-apply-promotion-code-result{
    display: block;
}
.newsletter{
    margin-top: 30px;
    background: #DDEBF7;
    padding: 20px;
    border: 1px dashed #999;
    border-radius: 2px;
}
.card-payment{
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    border-left: 1px solid #ededed;
    padding: 10px 20px 20px 20px;
}
.type-card{
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}
.bank-online-methods{
    list-style-type: none;
}
.boxContent{
    padding-left: 20px;
    border: 1px solid #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
}
.cardList{
    padding: 10px;
}
.message-card{
    font-size: 13px;
    color: #F00;
}
.description-process{
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
    position: relative;
}
.arrow-payment{
    display: inline-block;
    position: absolute;
    top: 30px;
    left: 125px;
}
.arrow-active-product{
    display: inline-block;
    position: absolute;
    top: 30px;
    left: 250px;
}
.arrow-login {
    display: inline-block;
    position: absolute;
    top: 30px;
}
.warning-payment{
    font-size: 20px;
    color: #FCD208;
}
.text-support{
    color: #F00;
    margin-left: 24px;
    font-size: 13px;
}
.process-number{
    display: inline-block;
    padding-left: 8px;
    border: 1px solid #ededed;
    border-radius: 13px;
    width: 26px;
    height: 26px;
    padding-top: 2px;
    color: #FFF;
}
.process-deactive{
    background: #BFBFBF;
}
.process-active{
    background: #4CB1F1;
}
.process-text-deactive{
    color: #BFBFBF;
    margin-left: 5px;
}.process-text-active{
    color: #4CB1F1;
    margin-left: 5px;
}
.process-payment{
    margin-left: 20px;
}
.seperator{
	border-top: 2px solid #ebebeb;
	margin: 17px 0;
	height: 0;
	text-align: center;
}
.seperator span{
	background-color: #ffffff;
	position: relative;
	top: -12px;
	padding: 0 5px;
	text-transform: uppercase;
	font-family: OpenSansBold;
	color: #4CB1F1;
        font-size: 13px;
}
.payment-login{
    padding: 20px 100px;
}
.popup-charge-card-text{
    font-size: 16px;
    margin-top: 10px;
}
.popup-charge-card-number{
    font-size: 20px;
    font-family: OpenSansBold;
}
.popup-charge-card-button, .popup-charge-card-button-fail{
    width: 130px;
    height: 40px;
    border: 0px;
    background: #4cb1f1;
    color: #fff;
    font-size: 14px;
    border-radius: 2px;
}
.popup-charge-card-button-fail{
    background: #ddd;
    color: #4cb1f1;
}
@media (max-width: 420px){
	.promotion-code{
		margin-left: 0px;
	}
	.card-item p{
		font-size: 12px;
	}
	.promotion-code-text {
		font-size: 12px;
	}
	.value-text{
		font-size: 12px;
	}
        .card-image img{
            width: 70px;
        }
}
@media (max-width: 320px){
	.nganluong img{
		width: 70px;
	}
	.payment-gate{
		font-size: 7px;
	}
}
@media (min-width: 321px) and (max-width: 500px){
	.nganluong img{
		width: 80px;
	}
	.payment-gate{
		font-size: 9px;
	}
}
@media (max-width: 1280px){
    .learning-header-item{
        padding-left: 65px;
        padding-right: 55px;
    }
    .filter-header-item {
        padding-left: 80px;
        padding-right: 65px;
    }
}
@media (max-width: 1024px){
    
    .payment-login{
        padding: 20px 10px;
    }
    .library-detail-header-right{
        padding-left: 0px;
        padding-right: 0px;
    }
    .learning-header-item {
        padding-left: 40px;
        padding-right: 30px;
    }
    .filter-header-item {
        padding-left: 80px;
        padding-right: 80px;
    }
}
@media (max-width: 991px){
    .filter-header-item {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 768px){
    .learning-header-item {
        padding-left: 20px;
        padding-right: 10px;
    }
    .filter-header-item {
        padding-left: 20px;
        padding-right: 20px;
    }
    .lbrary-detail-header-title{
        margin-top: 20px;
    }
    
}
@media (min-width: 500px) and (max-width: 780px){
    .report-faults{
        max-width: 120px;
    }
}
.boxContent {
    display: block;
    margin-bottom: 10px;
}
i.VISA, i.MASTE, i.AMREX, i.JCB, i.VCB, i.TCB, i.MB, i.VIB, i.ICB, i.EXB, i.ACB, i.HDB, i.MSB, i.NVB, i.DAB, i.SHB, i.OJB, i.SEA, i.TPB, i.PGB, i.BIDV, i.AGB, i.SCB, i.VPB, i.VAB, i.GPB, i.SGB,i.NAB,i.BAB 
{ width:80px; height:30px; display:block; background:url(https://www.nganluong.vn/webskins/skins/nganluong/checkout/version3/images/bank_logo.png) no-repeat;}
i.MASTE { background-position:0px -31px}
i.AMREX { background-position:0px -62px}
i.JCB { background-position:0px -93px;}
i.VCB { background-position:0px -124px;}
i.TCB { background-position:0px -155px;}
i.MB { background-position:0px -186px;}
i.VIB { background-position:0px -217px;}
i.ICB { background-position:0px -248px;}
i.EXB { background-position:0px -279px;}
i.ACB { background-position:0px -310px;}
i.HDB { background-position:0px -341px;}
i.MSB { background-position:0px -372px;}
i.NVB { background-position:0px -403px;}
i.DAB { background-position:0px -434px;}
i.SHB { background-position:0px -465px;}
i.OJB { background-position:0px -496px;}
i.SEA { background-position:0px -527px;}
i.TPB { background-position:0px -558px;}
i.PGB { background-position:0px -589px;}
i.BIDV { background-position:0px -620px;}
i.AGB { background-position:0px -651px;}
i.SCB { background-position:0px -682px;}
i.VPB { background-position:0px -713px;}
i.VAB { background-position:0px -744px;}
i.GPB { background-position:0px -775px;}
i.SGB { background-position:0px -806px;}
i.NAB { background-position:0px -837px;}
i.BAB { background-position:0px -868px;}

ul.cardList li {
    cursor: pointer;
    float: left;
    margin-right: 0;
    padding: 5px 4px;
    text-align: center;
    width: 90px;
}
.transfer-item, .card-item{
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 20px;
    background: #F4F4F4;
}
.filter-data-sound, .filter-speaker{
    font-size: 20px;
    color: #555;
    margin-left: 5px;
}
.first-learn-now{
    display: inline-block;
    color: #555;
    min-height: 40px;
    min-width: 120px;
    text-align: center;
    line-height: 40px;
    background: #ffe303;
}
.first-learn-right{
    display: inline-block;
    color: #FFF;
    min-height: 40px;
    min-width: 120px;
    text-align: center;
    line-height: 40px;
    background: #3879D9;
}
/*Learning Page*/
.user-learning-wrapper{
    max-width: 1150px;
	margin: 0 auto;
	overflow: hidden;
}
.user-learning-title{
    font-size: 25px;
    font-family: OpenSansLight !important;
    text-transform: capitalize;
    line-height: 5px;
    color: #043464; 
}
.user-learning-modal-title{
    font-size: 20px;
    font-family: OpenSansLight !important;
    text-transform: capitalize;
    line-height: 5px;
    color: #043464; 
}

.user-learning-nav .voca-filter a {
	background: #ddd;
	color: #b2b2b2;
}
.user-learning-nav .voca-viewrank a {
	color: #555;
	border: 1px solid #ddd;
	width: 140px;
}

.voca-viewrank a:hover{
    background-color: #8bd5f8!important;
    transition: all 0.5s ease-in-out;
}
.voca-viewrank:hover{
    background-color: #8bd5f8!important;
    transition: all 0.5s ease-in-out;
}
.front{
    margin-top: 40px;
}
.user-learning-nav li a {
	min-width: 130px;
	height: 45px;
	text-align: center;
	font-size: 11px;
	line-height: 38px;
	font-weight: bold;
	border-radius: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
        font-family: OpenSansBold;
}
.user-learning-nav li .report-faults{
    border: 1px solid #ededed;
    color: #555;
    background: #CCE1F6;
    line-height: 36px;
}
.user-learning-nav li .report-faults:hover{
    background: #CCE1F6;
}
.user-learning-nav li .report-faults span{
    color: #FFFFFF;
    margin-left: 25px;
    font-size: 16px;
}
.user-learning-voca-process ul li.active a {
    background-color: #ffce0f;
}
.user-learning-flash-card {
    margin-bottom: 10px;
}
.user-learning-nav li {
    margin-right: 10px;
}
.user-learning-nav .voca-test a {
	border: 1px solid #ddd;
	background: #fff;
	color: #494949;
}
.user-learning-nav .voca-learn a {
	background: #FFE303;
	color: #5B563C!important;
}
.user-learning-nav .voca-learn a:hover{
    background: #f9f349!important;
    transition: all 0.5s ease-in-out;
}
.user-learning-nav .voca-test a:hover{
    background: #f9f349!important;
    transition: all 0.5s ease-in-out;
}
.user-learning-analyzic {
    margin: 10px 0px 15px 0px;
    font-size: 18px;
}
.user-learning-nav-tabs{
    margin-bottom: 15px;	
}
.user-learning-nav-tabs li.active a {
    color: #000;
}
.nav-tabs li a {
	height: 40px;
	font-size: 11px;
	line-height: 20px;
	color: #aaa;
	border-radius: 0px;
}
.user-learning-tab-pane {
    margin-bottom: 15px;
	padding-top: 0px!important;
}
.user-learning-tab-pane.active{
    left:0;	
}
.user-action-learning.iphone-ngang {
    display: none;
}
.user-action-learning.iphone-ngang .process-button .prevBtn-learning {
	float: left;
	margin-left: 10px;
}
.user-action-learning.iphone-ngang .process-button .nextBtn-learning {
	float: right;
	margin-right: 10px;
}
.user-action-learning.iphone-ngang .process-button .btn {
	margin-bottom: 0px;
	height: 25px;
	line-height: 13px;
	width: 60px;
}
.user-action-learning .btn, .user-action-writing .btn {
	min-width: 130px;
	border-radius: 4px;
	height: 45px;
	line-height: 27px;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	margin: 0px 10px 25px 10px;
}
.user-learning-back{
    position: relative!important;
    margin-left: 20px;
}
.user-learning-back .user-learning-back-item{
    width: 100%; 
    margin-left: -9px;
    height: 306px;
    background: #fff;
    padding: 10px 5px;
}

.user-learning-complete .user-learning-card-info{
    width: 64%;
    float: left;
    padding-top: 10px;
}
.user-learning-complete voca-lema{
    font-size: 18px;
}
.btn-faults{
    margin:0!important;
    color: #fff;
    background: #F00;
}
.btn-faults:hover{
    color: #fff;
}
.report-faults{
    color: #F00;
    cursor: pointer;
}
.fault-menu{
    position: absolute;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    font-size: 14px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    margin-left: 5px;
    border-radius: 0px;
    padding: 10px;
}
.slt-fault{
    font-size: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    height: 40px;
    border: 1px solid #4c87ed;
    
}
.fault-content{
    border-radius: 4px;
    font-size: 15px;
    border: 1px solid #4c87ed;
    resize: none;
}
.fault-content-error{
    margin-bottom: 10px;
    margin-top: -10px;
}
.message-feedback{
    margin-top: -20px;
    margin-left: 5px;
    

}
.btn-send-fault, .btn-cancel-fault{
    margin: 0px 0px 0px 15px!important;
    width: 120px!important;
    border-radius: 4px;
    height: 40px;
    font-family: opensansbold;
}
.btn-send-fault{
    background: #4c87ed;
    border: 0px;
    color: #fff;
    font-family: arial;
    font-weight: bold;
}
.btn-cancel-fault{
    color: #555;
    background: #fff;
    border: 1px solid #ddd
}
.btn-send-fault:hover, .btn-send-fault:active{
    background: #2B72D8;
    border: 0px;
    color: #FFF;
}
.btn-cancel-fault:hover{
    background: #eee;
}
.user-action-learning {
	margin-left: 0;
	margin-top: 10px;
	padding-top: 10px;
}
.user-action-learning.iphone-ngang .process-button {
	overflow: hidden;
	padding: 0px 15px;
	width: 100%;
        text-align: center;
	margin-bottom: 10px;
}
.user-learning-process-bar {
	width: 99%;
	margin-top: 0px;
	margin-bottom: 20px;
	box-shadow: none;
	border-radius: 0px;
	border: 1px solid #e0e0e0;
	text-align: center;
        height: 20px;
	background-color: #f5f5f5;
}
.user-learning-flash-card-wrapper {
	width: 100%;
	height: 390px;
	background: #E8E4DE;
	margin-top: 5px;
	border: 1px solid #E4E4E4;
	border-radius: 0px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
        padding-left: 15px;
        padding-right: 30px;
}
.user-learning-wrapper-card {
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
    height: 275px;
    border-radius: 2px;
    box-shadow: none;
    position: relative;
    background: #fff;
    border: 1px solid #e1e1e8;
    padding: 10px;
}
.user-learning-card-img {
	margin-right: 10px;
	float:left;
}
.user-learning-card-info {
	width: 69%;
	min-height: 210px;
	margin-left: 5px;
	padding-top: 20px;
	float:left;
}
.user-learning-card-img img, .wrapper-card-learning-end img {
	width: 220px;
	height: 220px;
	margin-top: 10px;
	margin-left: 10px;
	max-width: 100%;
	display: inline-block;
	padding: 3px;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #ededed;
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.voca-ex {
	margin-top: 10px;
	font-size: 12px;
	color: #4D4D4D;
}
.voca-example-learning {
	font-size: 16px;
	color: #5675b5;
}
.user-learning-card-info h3 {
	margin-bottom: 10px;
	font-family: 'OpenSansLight'!important;
	font-size: 30px;
	color: #ffab00;
	margin-top: 10px;
}
.learning-speak-sample{
    margin-right: 5px;
    cursor: pointer;
}
.line-dark {
	height: 1px;
	background-color: #ededed;
}

.user-learning-card-info h3.voca-pronounciation {
	margin-bottom: 18px;
	margin-top: 15px;
	font-family: 'OpenSansLight'!important;
	color: #3f71a1;
	font-size: 18px;
}
.face-th {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #1958A7;
	font-size: 15px;
	line-height: 30px;
	font-family: OpenSansBold;
	text-align: center;
	float: right;
        border: 1px solid #1958A7;
}
.learning-definition-vi-sound{
    font-size: 16px;
    margin-left: 15px;
    padding: 1px 5px;
    border-radius: 20px;
}
.learning-definition-vi-sound .fa-volume-up{
    color: #1958A7;
}
.learning-definition-pos{
    font-size:15px;
    margin-left: 15px;
    color: #555;
}
.learning-definition-pronounce .fa-volume-up{
    margin-left: 60px;
    border-radius: 15px;
    color: #1958A7;
    font-size: 15px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px
}
.view-back {
	position: absolute;
	width: 100px;
	height: 50px;
	text-align: center;
	color: #5476B5;
	bottom: 10px;
	right: -17px;
	cursor: pointer;
}
.pronounciation-lema {
	color: #555;
	font-weight: 100;
	font-family: monospace;
}
.social.facebook.ipad,.social.facebook.tablet,.social.facebook.iphone{
    display:none;
}
.change-sample {
    display: inline-block;
    border-radius: 15px;
    line-height: 25px;
    cursor: pointer;
    color: #4c87ed;
    padding-right: 2px;
    margin-left: 30px;
    width: 25px;
    height: 25px;
    text-align: center;
}
.voca-example-learning {
    font-size: 16px;
    color: #5675b5;
}
.voca-example.vn {
    display: none;
}
.learning-sample-text{
    font-size: 15px;
    color: #333;
    font-family: arial;
}
.learning-sample-text .fa-volume-up{
    margin-left: 10px;
    color: #1958A7;
    font-size: 15px;
    width: 25px;
    height: 25px;
    line-height: 22px;
    text-align: center;
}
.learning-story-content{
    font-size: 13px;
    text-align: justify;
}

.process-button {
	width: 100%;
	text-align: center;
}
.btn-known:hover {
    color: #fff;
	background-color: #39b3d7;
	border-color: #269abc;
}
.btn-known {
    border: 1px solid #3ca4f4;
	background-color: #58b6ff;
}
.frontBtn, .backBtn, .nextBtn, .prevBtn {
	cursor: pointer;
	text-decoration: none;
}
..ready-or-not .btnange{
    border-bottom: 1px solid #ffe303;
}
.havent-active {
	background-color: inherit;
	border: none;
	border-radius: inherit;
	height: auto;
}
.user-learning-card-sample {
	height: 223px;
	color: #ffab02;
	font-size: 30px;
	margin: 20px;
	padding-top: 20px;
}
.user-leaning-definition{
    padding: 1px;
}
.user-learning-sound-image {
	font-size: 50px;
	margin-left: 0px;
	margin-top: 0px;
}
.user-action.user-action-writing {
    margin-left: 0;
    margin-top: 20px;
}
.process-bar.process-bar-writing {
	width: 99%;
	border-radius: 2px;
	box-shadow: none;
}
.process-percent-writing {
		height: 100%;
		background: #3A80BC;
		transition: 0.2s all linear;
}
.process-button-writing {
     text-align: center;
	 margin-top: 20px;
}
.user-learning-answer-write {
	font-size: 16px;
	color: #555;
	margin-left: 12px;
	margin-top: 10px;
        padding-left: 10px;
}
.user-learning-card-img-write {
	height: 210px;
	margin-top: 5px;
	margin-left: 15px;
}
.user-learning-answer-write-img {
	font-size: 14px;
	color: #555;
	margin-left: 12px;
	margin-top: -10px;
}
.learning-write-definition{
    margin-top: 10px;
    font-size: 13px;
    cursor: pointer;
    color: #3A80BE;
    position: relative;
}
.learning-write-definition-en .tooltip{
    margin-left: -15px;
}
.learning-write-definition-vi .tooltip{
    margin-left: -40px;
}
.learning-write-definition-synonym .tooltip{
    margin-left: -58px;
}
.learning-write-definition-en-orange .tooltip .tooltip-arrow,
.learning-write-definition-vi-orange .tooltip .tooltip-arrow,
.learning-write-definition-synonym-orange .tooltip .tooltip-arrow{
    border-bottom-color: #FDBF03;
}
.learning-write-definition-en-orange .tooltip .tooltip-inner,
.learning-write-definition-vi-orange .tooltip .tooltip-inner,
.learning-write-definition-synonym-orange .tooltip .tooltip-inner{
    background: #FFFFFF;
    border-radius: 0px;
    text-align: justify;
    color: #FDBF03;
    border: 1px solid #FDBF03;
}

.learning-write-definition-en-blue .tooltip .tooltip-arrow,
.learning-write-definition-vi-blue .tooltip .tooltip-arrow,
.learning-write-definition-synonym-blue .tooltip .tooltip-arrow{
    border-bottom-color: #3781C0;
}
.learning-write-definition-en-blue .tooltip .tooltip-inner,
.learning-write-definition-vi-blue .tooltip .tooltip-inner,
.learning-write-definition-synonym-blue .tooltip .tooltip-inner{
    background: #FFFFFF;
    border-radius: 0px;
    text-align: justify;
    color: #3781C0;
    border: 1px solid #3781C0; 
}

.learning-write-definition-en-red .tooltip .tooltip-arrow,
.learning-write-definition-vi-red .tooltip .tooltip-arrow,
.learning-write-definition-synonym-red .tooltip .tooltip-arrow{
    border-bottom-color: #C51414;
}
.learning-write-definition-en-red .tooltip .tooltip-inner,
.learning-write-definition-vi-red .tooltip .tooltip-inner,
.learning-write-definition-synonym-red .tooltip .tooltip-inner{
    background: #FFFFFF;
    border-radius: 0px;
    text-align: justify;
    color: #C51414;
    border: 1px solid #C51414;  
}


.learning-write-definition span{
    margin-right: 20px;
}
.learning-write-definition i{
    margin-left: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid;
    text-align: center;
    line-height: 18px;
    border-radius: 9px;
}
.user-learning-img-responsive-write {
	display: inline-block;
	height: 210px;
	width: 300px;
	max-width: 100%;
	padding: 4px;
	line-height: 1.428571429;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.user-learning-card-info h3 {
	margin-bottom: 10px;
	font-family: 'OpenSansLight'!important;
}
.user-learning-card-info h4.request {
    line-height: 30px;
    font-size: 15px;
}

.asking-button {
    background: #58B6FE;
    color: #fff;
    display: inline-block;
    min-width: 130px;
    height: 45px;
    line-height: 45px;
    margin-top: 15px;
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    border-radius: 0px;
    font-family: OpenSansBold;
    margin-right: 10px;
}
.asking-button-learn{
	background: #ffe303;
	color: #555;
}
.asking-button-test {
	background: #f56364;
	color: #fff;
}
.form-control-card {
	width: 30%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.428571429;
	vertical-align: middle;
	border: 1px solid #ccc;
	border-radius: 0px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn-check {
	border-radius: 0px;
	border: 0px;
	background: #58B6FE;
	text-transform: uppercase;
	font-size: 13px;
	padding: 10px 15px;
}
.user-learning-wrapper-card-test {
	margin-top: -70px!important;
	border-radius: 1px;
	width: 1110px;
	margin-left: -210px;
	box-shadow: none;
	margin-bottom: 20px;
	background-color: white;
	height: 330px;
}

.user-learning-complete{
    margin-top: -32px!important;
    border-radius: 1px;
    padding-left: 20px;
}
/* RESPONSE CSS */
/* IPAD NGANG */
@media only screen and (max-width:1024px) and (min-width:805px){
    .wrapper-content-box.learning-title-box {
        margin: 0px;
    }
    .user-learning-wrapper-card {
        width: 103%;
        margin-left: -6%;
    }
    .user-learning-card-img {
        width: 31%;
        height: 100%;
		padding-left:10px;
    }
    .user-learning-card-info {
        width: 60%;
    }
    .user-learning-card-img img, .wrapper-card-learning-end img{
        max-height: 95%
    }
    .user-learning-wrapper-card-test{
        margin-left: -113px !important;
        width: 923px!important;
    }
    .wrapper-card-box.wrapper-card-learning-end{
        margin-left: -56px;
        width: 929px;
    }
    .wrapper-card-box.wrapper-card-learning-end .user-learning-card-info h3{
        font-size:17px;
        line-height:24px
    }
    h4.request{
        font-size:13px;
    }
    .user-learning-card-info .asking-button{
        width:135px;
        height:40px;
        font-size:11px;
        line-height:40px;
        text-transform: uppercase;
    }
    .user-learning-process-bar{
        width: 100% !important;
    }
    .user-learning-nav{
        padding:0px 41px;
    }
    .title-wrapper{
        padding:0px 25px
    }
    .social.facebook.ipad{
        display: block;
        margin-left:32px
    }
    .social.facebook.normal{
        display: none;
    }
}

/* SMALL TABLET NGANG */
@media only screen and (max-width:800px) and (min-width:770px){
    .user-learning-flash-card-wrapper{
        width: 765px;
        margin-left: -7px;
    }
    .wrapper-content-box.learning-title-box {
        margin: 0px;
    }
    .user-learning-wrapper-card {
        width: 730px;
        margin-left: 45px;
        margin-top: 5px;
        height: 348px;
    }
    .user-learning-card-img {
        width: 40%;
        height: 100%;
    }
    .user-learning-card-info{
        width: 55%;
        margin-left:0px;
    }
    .user-learning-card-img img, .wrapper-card-learning-end img{
        max-height: 95%
    }
    .user-learning-nav-tabs{
        margin-left: -8px;
        width: 100%;
    }
    #racing-word{
        margin:0px 15px;
        padding:10px;
    }
    .user-learning-process-bar{
        margin-left: -8px;
        width: 765px !important;
        height: 13px;
    }
    .user-learning-wrapper-card-test{
        width: 800px!important;
        margin-left: 23px !important;
        height: 327px!important;
        width: 656px !important;
    }
    .wrapper-card-box.wrapper-card-learning-end {
        margin-left: 37px;
        width: 741px;
        height: 349px;
        margin-top: -5px;
    }
    .wrapper-card-box.wrapper-card-learning-end.user-learning- .card-info h3{
        font-size:17px;
        line-height:24px
    }
    h4.request{
        font-size:13px;
    }
    .user-learning-card-info .asking-button{
        width:135px;
        height:40px;
        font-size:11px;
        line-height:40px;
        text-transform: uppercase;
    }
    .user-learning-nav{
        padding:0px 32px;
    }
    .title-wrapper{
        padding:0px 15px
    }
    .user-learning-title{
        margin-top:20px;
    }
    .social.facebook.tablet{
        display: block;
        margin-left:23px;
    }
    .social.facebook.normal{
        display: none;
    }
}

/* IPAD */
@media only screen and (max-width:800px) and (min-width:605px){
    .wrapper-content-box.learning-title-box {
        margin: 0px;
    }
    .user-learning-wrapper-card {
        width: 79%;
        margin-left: 6%;
    }
    .user-learning-card-img{
        width: 40%;
        height: 100%;
    }
    .user-learning-card-info {
        width: 50%!important;
        padding-left:10px;
    }
    .user-learning- img, .wrapper-card-learning-end img{
        max-height: 95%
    }
    .user-learning-wrapper-card-test{
        margin-left: -2px!important;
        width: 707px!important;
    }
    .wrapper-card-box.wrapper-card-learning-end{
        margin-left: 7%;
        width: 88%;
    }
    .wrapper-card-box.wrapper-card-learning-end .user-learning-card-info h3{
        font-size:17px;
        line-height:24px
    }
    h4.request{
        font-size:13px;
    }
    
    .user-learning-card-info .asking-button{
        width:135px;
        height:40px;
        font-size:11px;
        line-height:40px;
        text-transform: uppercase;
    }
    .user-learning-process-bar{
        width: 751px !important;
    }
    .user-learning-nav{
        padding:0px 25px;
    }
    .title-wrapper{
        padding:0px 9px
    }
    .show-ranking-board .modal-content {
        width: 750px;
        left: 50%;
        margin-left: -375px;
        padding: 20px;
    }
    .social.facebook.ipad{
        display: block;
        margin-left:15px;
    }
    .social.facebook.normal{
        display: none;
    }
}

@media screen and (max-width:700px){
    .wrapper-content-box{
        padding: 0px 15px;
    }
    
}
/* SMALL TABLET*/
@media only screen and (max-width:600px) and (min-width:575px){
    .user-learning-flash-card-wrapper{
        width: 92%;
        margin-left: 25px;
    }
    .btn-faults{
        margin-left: 25px!important;
    }
    .fault-menu{
        margin-left: 15px;
    }
    .wrapper-content-box.learning-title-box {
        margin: 0px;
    }
    .user-learning-wrapper-card {
        width: 556px;
        margin-left: 127px;;
        margin-top: 5px;
        height: 348px;
    }
    .user-learning-nav li a{
        margin-right: -2px;
    }
    .wrapper-card{
        margin-left: 5px;
    }
    .user-learning-card-img {
        width: 40%;
        height: 100%;
    }
    .user-learning-card-info{
        width: 51%;
        padding-left:15px;
    }
    .user-learning- img, .wrapper-card-learning-end img{
        max-height: 95%
    }
    .user-learning-nav-tabs{
        margin-left: 25px;
        width: 92%;
    }
    #racing-word{
        margin:0px 15px;
        padding:10px;
    }
    .user-learning-process-bar{
        margin-left: 23px;
        width: 583px !important;
        height: 11px;
    }
    .user-learning-wrapper-card-test{
        margin-top: -58px!important;
        border-radius: 2px;
        margin-left: 71px !important;
        width: 558px !important;
        height: 349px !important;
    }
    .wrapper-card-box.wrapper-card-learning-end {
        margin-left: 128px;
        width: 560px;
        height: 349px;
        margin-top: -5px;
    }
    .wrapper-card-box.wrapper-card-learning-end .user-learning-card-info h3{
        font-size:17px;
        line-height:24px
    }
    h4.request{
        font-size:13px;
    }
    .user-learning-card-info .asking-button{
        width:135px;
        height:40px;
        font-size:11px;
        line-height:40px;
        text-transform: uppercase;
    }
    .user-learning-nav{
        padding:0px 25px;
    }
    .title-wrapper{
        padding:0px 9px
    }
    .social.facebook.tablet{
        display: block;
        margin-left:15px;
    }
    .message-feedback{
        margin-left:15px;
    }
    .report-faults{
        margin-left:15px;
    }
    .social.facebook.normal{
        display: none;
    }
    
}


/* IPHONE NGANG */
@media only screen and (max-width:568px) and (min-width:321px){
    .wrapper-card{margin-left: 5px;}
    .topic-learning-analyzic .glyphicon{
        font-size: 14px;
    }
    .topic-learning-analyzic .counting{
        font-size: 11px;
    }
    .title-wrapper{
        padding:0px 10px;
    }
    .user-learning-voca-process{
        padding:0px 25px;
    }
    .user-learning-nav li a{
        margin-right: 5px;
    }
    .user-learning-title{
        margin-top:20px;
        font-size:17px;
    }
    .user-learning-analyzic{
        margin-bottom:-10px;
    }
    .view-story{
        display: block;
        margin-top: 15px;
    }
    .user-learning-nav-tabs{
        margin-left: 25px;
        width: 300px;
    }
    .user-learning-nav li{
        margin:0px !important;
    }
    .user-learning-nav li a{
        margin-top:15px !important;
        width:127px !important;
    }
    .user-learning-nav .voca-viewrank a {
        margin-right:0px!important;
    }
    .user-learning-flash-card-wrapper{
        width: 548px;
        margin-left: 25px;
    }
    .user-learning-wrapper-card{
        width: 530px;
        margin-left: 140px;
        margin-top: 5px;
        height:350px;
    }
    .wrapper-content-box
    {
        padding:0px;
    }
    .user-learning-card-img{
        width:35%;
        max-height:50%;
    }
    .user-learning-card-img.img-thumbnail{
        width:100%;
        margin:0px;
        max-height:148px;
    }
    .user-learning-card-info h3.voca-pronounciation {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .user-learning-card-info{
        width:60%;
        padding-left:10px !important;
        min-height:165px;
        max-height:165px;
    }
    .user-learning-card-info h3{
        height: 15px;
        line-height: 15px;
        font-size: 15px;
    }
    .view-back{
        bottom: -10px;
        right: -25px;
        opacity: 0.5;
    }
    .face-th{
        height: 30px;
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        line-height: 30px;
        display: none;
    }
    .view-back img{
        width:25px;
    }
    .view-back p{
        display: none;
    }
    .voca-example.voca-example-learning{
        font-size:14px;
    }
    .user-learning-wrapper-card-test{
        margin-left: 86px !important;
        width: 528px !important;
        margin-top: -60px !important;
        height: 194px;
    }
    .user-learning-complete{
        margin-top: -40px !important;
        height: 350px;
    }
    .user-learning-complete .user-learning-card-info{
        width: 100%;
        padding-right: 10px;
    }
    .card-sample{
        height:33%;
    }
    .card-sample p{
        font-size:13px;
    }
    .wrapper-context-filter {
        width: 100%;
        height: 215px;
        background: #E8E4DE;
        margin-top: 10px;
        border: 1px solid #E4E4E4;
        border-radius: 3px;
        padding: 20px;
    }
    .user-learning-answer-write-img{
        width:45%;
        float:left;
        padding-top:15px;
    }
    .user-learning-card-img-write.card-sample{
        margin:0px!important;
        width:40%;
    }
    .user-learning-card-img-write.card-sample h2{
        margin:0px;
    }
    .user-learning-card-img-write.card-sample h2 img{
        max-height:172px;
    }
    .user-learning-wrapper-card-test .user-learning-card-img-write {
        height: 100%;
        margin-left: 15px;
        width: 50%;
        float: left;
    }
    .user-learning-wrapper-card-test .user-learning-card-img-write img{
        max-height:172px;
    }
    .user-learning-sound-image{
        font-size:60px;
    }
    .form-control-card{
        width:57%;
    }
    .user-learning-process-bar {
        margin-left: 23px;
        width:550px !important;
        margin-bottom:10px;
        height: 11px;
    }
    .user-action-learning{
        margin-top:0px;
    }
    .user-action .btn{
        width:138px;
    }
    .wrapper-card-box.wrapper-card-learning-end {
        margin-left: 145px;
        width: 526px;
        height: 349px;
        margin-top: -5px;
    }
    .wrapper-card-box.wrapper-card-learning-end .user-learning-card-info h3 {
        font-size: 13px;
        line-height: 24px;
    }
    .wrapper-card-box.wrapper-card-learning-end .request{
        line-height:20px;
        font-size:13px;
    }
    .user-learning-card-info .asking-button {
        width: 135px;
        height: 40px;
        font-size: 10px;
        line-height: 29px;
        text-transform: uppercase;
        display: inline;
        border:none;
        background: none;
        color: #143F69;
    }
    .asking-button.go-test{
        margin-left:38px;
    }
    .modal-dialog{
        margin-top: 50px;
    }
    .social.facebook.iphone{
        display: block;
        margin-left:15px;
    }
    .social.facebook.normal{
        display: none;
    }
    .user-action-learning{
        display: none;
    }
    .user-action-learning.iphone-ngang{
        display:block;
    }
    .user-action-learning.iphone-ngang .process-bar-learning{
        margin-top:10px;
    }
    .front {
        margin-top: 20px;
        height: 350px;
        background: #FFF;
    }
    .user-learning-front .user-learning-card-sample{
        margin: 0px;
        padding: 10px;
    }
}

/* IPHONE*/
@media only screen and (max-width:320px){
    .user-learning-analyzic .glyphicon{
        font-size: 14px;
    }
    .user-learning-analyzic .counting{
        font-size: 11px;
    }
    #uvTab{
        display:none !important;
    }
    .title-wrapper{
        padding:0px 10px;
    }
    .user-learning-voca-process{
        padding:0px 15px;
    }
    .user-learning-voca-process .user-learning-nav li:first-child a,.voca-process .user-learning-nav li:nth-child(3) a{
        margin-right:13px;
    }
    .user-learning-title{
        margin-top: 30px;
        font-size:17px;
    }
    .user-learning-analyzic{
        margin-bottom:-10px;
    }
    .view-story{
        display: block;
        margin-top: 15px;
    }
    .nav.nav-tabs{
        margin-left: 25px;
        width: 300px;
    }
    .user-learning-nav .voca-learn a,.user-learning-nav .voca-viewrank a{
        margin-right:0px;
    }
    .user-learning-nav li{
        margin:0px !important;
    }
    .user-learning-nav li a{
        margin-top:15px !important;
        width:143px !important;
		font-size: 10px;
    }
    .user-learning-flash-card-wrapper{
        width: 88%;
        margin-left: 15px;
    }
    .user-learning-wrapper-card{
        width: 282px;
        margin-left: 269px;
        margin-top: 0px;
        height:358px;
    }
    .user-learning-card-img{
        width:100%;
        max-height:50%;
    }
    .user-learning-card-img .img-thumbnail{
        width:100%;
        margin:0px;
        height:100%;
    }
    .user-learning-card-info{
        width:100%;
        padding:0px !important;
        min-height:165px;
        max-height:165px;
    }
    .user-learning-complete .user-learning-card-info{
        padding-left: 5px;
        padding-right: 10px!important;
    }
    .user-learning-card-info h3{
        height: 15px;
        line-height: 15px;
        font-size: 15px;
    }
    .view-back{
        bottom: -10px;
        right: -25px;
        opacity: 0.5;
    }
    .card-sample p{
        font-size:13px;
    }
    .user-learning-card-sample p{
        font-size: 13px;
    }
    .user-learning-front .user-learning-card-sample p{
        font-size: 20px;
    }
    .user-learning-back{
        margin-left: 0px!important;
    }
    .user-learning-back .user-learning-back-item{
        width: 99%; 
        height: 326px;
    }
    .user-learning-back .user-learning-back-img{
        height: 100px;
    }
    .user-learning-complete{
        padding-left: 5px;
    }
    .user-learning-complete .user-learning-card-info{
        width: 100%;
    }
    .user-learning-complete voca-lema{
        font-size: 15px;
    }
    .user-learning-complete .user-learning-card-info h4.request{
        font-size: 13px;
        text-align: justify;
        line-height: 20px;
    }
    
    .face-th{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #1958A7;
        font-size: 15px;
        line-height: 30px;
        display: none;
    }
    .view-back img{
        width:25px;
    }
    .view-back p{
        display: none;
    }
    .voca-example.voca-example-learning{
        font-size:12px;
    }
    #racing-world{
        padding: 0px 25px;
    }
    .user-learning-wrapper-card-test{
        margin-left: 208px !important;
        width: 283px !important;
        margin-top: -60px !important;
        height: 350px;
    }
    .user-learning-complete{
        margin-top: -40px!important;
    }
    .form-control-card{
        width:57%;
    }
    .user-learning-process-bar {
        margin-left: 23px;
        width: 302px !important;
        margin-bottom:10px;
        height: 11px;
    }
    .user-action-learning{
        margin-top:0px;
    }
    .user-action-learning .btn{
        margin: 0px 10px 15px -3px;
        min-width: 90px;
    }
    .user-action .btn{
        width:90px;
    }
    .btn-faults{
        margin-left: 25px!important;
    }
    .fault-menu{
        margin-top: -35px;
        margin-left: 15px;
    }
    .wrapper-card-box.wrapper-card-learning-end {
        margin-left: 267px;
        width: 281px;
        height: 349px;
        margin-top: -5px;
    }
    .wrapper-content-box
    {
        padding:0px;
    }
    .wrapper-card-box.wrapper-card-learning-end .user-learning-card-info h3 {
        font-size: 13px;
        line-height: 24px;
    }
    .wrapper-card-box.wrapper-card-learning-end .request{
        line-height:20px;
        font-size:13px;
    }
    .user-learning-card-info .asking-button {
        width: 110px;
        height: 40px;
        font-size: 10px;
        line-height: 40px;
        text-transform: uppercase;
        border:none;
        min-width: 110px;
    }
    .user-learning-complete .user-learning-card-info asking-button-learn{
        background-color: #ffe303;
        color: #555;
    }
    .user-learning-complete .user-learning-card-info asking-button-test{
        background-color: #f56364;
        color: #fff;
    }
    .asking-button.go-test{
        margin-left:38px;
    }
    .modal-dialog{
        margin-top: 50px;
    }
    .social.facebook.iphone{
        display: block;
        margin-left:15px;
    }
    .report-faults{
        margin-left:15px;
    }
    .message-feedback{
        margin-top: -20px;
        margin-left:15px;
    }
    .social.facebook.normal{
        display: none;
    }
    .wrapper-context-filter {
        width: 86%;
        height: 370px;
        background: #E8E4DE;
        margin-top: 10px;
        border: 1px solid #E4E4E4;
        border-radius: 2px;
        padding: 20px;
       
    }
    .process-bar.process-bar-writing {
        width: 86%;
        margin-left: 24px;
        height: 12px;
    }
    .process-button-writing{
        text-align:center;
    }
    .process-bar-writing .btn{
        margin-left:0px;
        width:138px;
    }
    .learning-help{
        padding:0px 20px;
    }
	.user-learning-voca-guide{
	    margin-left: 13px!important;
	}
}
/*Begin setting*/
.setting-profile{
	background-color: #FFFFFF;
        min-height: 600px;
}
.link-voca{
    margin-top: 50px;
}
.row-profile-content{
	padding-left:70px; 
}
.change-email{
	margin-left: 15px;
	margin-top: 10px;
	font-size: 13px;
	
}
.setting-account-text{
	font-family:'OpenSansLight';
	font-size:25px;
	margin-left:70px;
	margin-top:40px;
}
.line-dark{
	border-bottom: 1px solid ededed;
}
.nav-tabs li a{
	color:#000;
	font-size:11px;
        border-radius: 0px;
}
.img-avatar{
	width: 90px;
	height: 90px;
	border-radius: 45px;
        border: 1px solid #063561;
        padding: 2px;
}
.avatar{
	width: 100px;
	height: 100px;
	border-radius: 50px;
	padding: 3px;
}
.div-avartar{
	padding: 15px 0px 0px 30px;
}
.modal-dialog-update-email{
    margin-top: 30px;
}
.modal-dialog-update-password{
    margin-top: 30px;
}
.modal-footer-update-email{
    margin-top: 0px;
}
.update-password-success{
    
    color: green;
}
.input-update-email{
    width: 100%;
    height: 45px;
    margin-bottom: 10px;
    padding: 0 15px 2px;
    font-size: 17px;
    background: white;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 -2px #ebebeb;
    box-shadow: inset 0 -2px #ebebeb;

}
.input-update-email:focus{
    border-color: #57CBFF;
    outline: none;
    -webkit-box-shadow: inset 0 -2px #57CBFF;
    box-shadow: inset 0 -2px #57CBFF;
}
.link-update-email{
    color: #000;
}
.text-error{
    color:#f00;
    font-size: 13px;
}
.text-success{
    color:green;
    font-size: 13px;
}
.margin-form-group{
    margin: 5px 10px 5px 50px;
}
.btn-change-info{
    width: 150px;
    margin-right: 10px;
    border-radius: 0px;
    margin-top: 10px;
}
.active-product-fa-circle{
    color: #FFF;
    font-size: 8px;
    margin-right: 5px;
}
.help-block{
    color: #f00;
}
.label-form-group{
	font-size: 11px;
	font-family:OpenSansRegular;
	font-weight: 400;
	color: #000;
	margin-bottom:8px;
}
.control-change-info{
	border-radius:0px;
}
#profile{
    padding-bottom: 15px;
}
.modal-content{
    border-radius: 0;
    font-size: 12px;
}
input::-webkit-input-placeholder {
   font-size: 13px;
}
.btn-cancel-update-password, .btn-update-password, .btn-update-email, .btn-update-username{
    min-width: 100px;
}
.table-vocabulary{
    font-size: 11px;
    margin-top: 10px;
}
.table-list-vocabulary-user thead{
    background: #ededed;
    font-size: 9px;
}
.table-list-vocabulary-user thead tr th{
    width: 104px;
}
.newsletter{
    background: #DDEBF7;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px dashed #999;
    border-radius: 2px;
}
.blockOverlay{
    z-index: 10000!important;
}
.blockMsg{
    z-index: 11000!important;
}
@media (max-width: 400px) { 
	.row-profile-content{
		padding: 0 10px;
	}
        .nav-tabs li a{
            font-size: 9px;
            padding-left: 5px;
            padding-right: 5px;
        }
}
@media (min-height: 800px){
    .setting-profile{
        min-height: 900px;
    }
}
@media (min-height: 1000px){
    .setting-profile{
        min-height: 1100px;
    }
}
/*End setting*/
.filter-data-btn{
    background-color:  #FFE303;
}
.filter-data-sound:active, .preview-sound:active {
    color: #428bca;
}
.preview-sound{
    font-size: 18px;
	color: #555;
}
/*Begin Payment*/
.tab-content .tab-pane-payment{
    padding-top: 0px;
}
.tab-payment{
    background: #E2F3FA;
}
.card-payment-warning{
    margin-top: 0px;
}

.alert-message-payment{
    line-height: 20px;
}
#alert-payment-method{
    display:none;
}
/*End payment*/
/*Begin user learning diary*/
.diary-notify-user{
    margin: 0 15px 20px 0px;
}
.slt-topic-library{
    border-radius: 0px;
    height: 35px;
}
/*End user learning diary*/
/*Begin lerning page*/
.choose-words-content{
    padding-top: 10px;
}
.choose-words-item{
    padding: 5px;
    min-height: 29px;
}
.choose-words-content-item p{
    margin: 0px;
    font-size: 13px;
}
.btn-choose-learn-word{
    margin-bottom: 10px;
}

input[type=checkbox].css-checkbox {
        position: absolute;
        z-index: -1;
        overflow: hidden;
        /* clip: rect(0 0 0 0); */
        height: 25px;
        width: 34px;
        padding: 0;
        border: 0;
        background: transparent;
}

input[type=checkbox].css-checkbox + label.css-label {
        padding-left:37px;
        height:32px; 
        display:inline-block;
        line-height:32px;
        background-repeat:no-repeat;
        background-position: 0 0;
        font-size:32px;
        vertical-align:middle;
        cursor:pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 0 -32px;
}
label.css-label {
    background-image:url(../img/checkbox.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.shoose-learn-word-sound a{
    color: #4c87ed;
    
}

.shoose-learn-word-sound a .glyphicon-volume-up{
    padding: 4px 5px 6px;
}
.shoose-learn-word-sound a .glyphicon-volume-up:hover{
    background: #4c87ed;
    color: #fff;
    
    border-radius: 50%;
}
.user-learning-back{
    margin-top: -290px!important;
    border-radius: 1px;
    position: relative!important;
    margin-left: 20px;
}
.learning-definition-title{
    color: #3A80BE;
}
.learning-definition-text{
    font-size: 16px;
    color: #111;
    font-family: arial;
}
/*End learning page*/
/*Begin filter chart*/
.filter-chart-btn-group{
    margin-bottom:0px;
}
.filter-chart-btn-item{
    margin-bottom:10px;
}
/*End filter chart*/

/*FLIP Animation*/

.flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 2000;
}

		
#flip-toggle.flip .flipper {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.flipper {
        -webkit-transition: 0.5s;
        -webkit-transform-style: preserve-3d;

        -moz-transition: 0.5s;
        -moz-transform-style: preserve-3d;

        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
        margin-top:-45px;
        
}

.front, .back {
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        -webkit-backface-visibility: hidden;
        
}

@media only screen and (max-width:320px){
    .front{
        margin-top: 0px;
    }
}
/*.front {
        z-index: 1000;
        -webkit-transition: 0.5s;
        -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);
}
.back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
}*/
    
                


.vertical .back {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg) ;
        transform: rotateX(180deg) ;
        -webkit-transform: rotateX(180deg) ;
        transition: 0.5s;
}

/*.vertical.flip-container .flipper {
        -webkit-transform-origin: 100% 125px;
        -moz-transform-origin: 100% 125px;
        transform-origin: 100% 125px;
}*/
.flipX
 {
        -webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
}
/*End Flip Animation*/
/*Begin user dashboard*/
.userdashboard-action{
    background: #fafafa;
    min-height: 70px;
    padding: 10px;
    margin-bottom: 10px;
}
.userdashboard-action p{
    margin: 0px;
}
.user-dashboard-learn-result{
    font-size: 16px;
    text-transform: uppercase;
}
.user-result-tooltip,
.user-level-beginer,
.user-level-highbeginer,
.user-level-preimmediate,
.user-level-immediate,
.user-level-highimmediate,
.user-level-preadvanced,
.user-level-advanced,
.user-level-expert  
{
    cursor: pointer;
}
.user-result-tooltip{
    color: #1E90FF;
}

.user-result-tooltip + .tooltip > .tooltip-inner,
.user-level-beginer + .tooltip > .tooltip-inner,
.user-level-highbeginer + .tooltip > .tooltip-inner,
.user-level-preimmediate + .tooltip > .tooltip-inner,
.user-level-immediate + .tooltip > .tooltip-inner,
.user-level-highimmediate + .tooltip > .tooltip-inner,
.user-level-preadvanced + .tooltip > .tooltip-inner,
.user-level-advanced + .tooltip > .tooltip-inner,
.user-level-expert + .tooltip > .tooltip-inner
{
    background: #1E90FF;
    border-radius: 0px;
    text-align: left;
}
.user-result-tooltip + .tooltip > .tooltip-arrow,
.user-level-beginer + .tooltip > .tooltip-arrow,
.user-level-highbeginer + .tooltip > .tooltip-arrow,
.user-level-preimmediate + .tooltip > .tooltip-arrow,
.user-level-immediate + .tooltip > .tooltip-arrow,
.user-level-highimmediate + .tooltip > .tooltip-arrow,
.user-level-preadvanced + .tooltip > .tooltip-arrow,
.user-level-advanced + .tooltip > .tooltip-arrow,
.user-level-expert + .tooltip > .tooltip-arrow
{
    border-top-color: #1E90FF;
}
.userdashboard-ruler{
    width: 10.4%;
}
.userdashboard-progress-ruler{
    position: relative;
    margin-top:3px;
    border-radius: 0px;
    margin-bottom: 0px;
    height: 80px;
}
.userdashboard-note-level{
    margin-top: 5px;
}
.userdashboard-note-level-item {
    width: 15px;
    height: 15px;
    display: inline-block;
}
.userdashboard-expert{
    background: #A9CEAD;
}
.userdashboard-advanced{
    background: #FAC1E6;
}
.userdashboard-preadvanced{
    background: #81CEF2;
}
.userdashboard-highimmediate{
   background: #00C7F6; 
}
.userdashboard-immediate{
   background: #76E888;
}
.userdashboard-preimmediate{
    background: #FAF754;
}
.userdashboard-highbeginer{
    background: #F7DA41;
}
.userdashboard-beginer{
    background: #FA0000;
}
.userdashboard-ranking-chart{
     width: 100%;
     height: 400px;
     margin: 10px auto;
}
.user-learned a{
    color: #063561;
}
/*End user dashboard*/
.capitalize-text{
    text-transform: capitalize;
}
/*Begin Test ground */
#test-ground{
    width:100%;
    height:100%;
    left:0;
    top:0px;
    z-index: 1001;
    background:#fff;
    position:absolute;
}
#test-ground .testing-rule{
    padding:15px;
    margin-top:40px;
    color:#fff;
}
#test-ground .testing-rule .rule-detail{
    margin: 20px 0px;
}
#test-ground .testing-rule .rule-detail ul{
    padding: 0 0px 0px 15px;
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    text-align: justify;
}
.span-bold{
    font-family: OpenSansBold;
}
#test-ground .testing-rule p{
    font-size:15px;
    color:#fff;
}
#test-ground .testing-rule h3{
    font-size: 36px;
    color: #fff;
    font-weight: 300;
}
.ready-or-not{
    margin-top:30px;
}
.ready-or-not .btn{
    min-width: 130px;
    background: #ffe303;
    color: #fff;
    margin-right: 15px;
    font-size: 13px;
    border-radius: 0px;
    font-family: OpenSansBold;
    height: 45px
}
.line-orange{
    border-bottom: 1px solid #ffe303;
}
.btn-not-known{
    background-color: #F0F0F0;
    color: #3A7CB6;
    font-family: OpenSansBold;
}
.btn-not-known:hover{
    color: #3A7CB6;
}
.btn-known {
    background-color: #58B6FE;
    color: #FFF;
    font-family: OpenSansBold;
}
.btn-known:hover {
    background-color: #8bd5f8;
    -webkit-transition: 0.5s all linear;
    border-color: #58B6FE
}
.learning-last-card{
    margin-left: 15px;
}
.learning-last-card h3{
    font-size: 25px;
    color: #ffe303;
}
.learning-last-card .request span{
    font-family: OpenSansBold;
    color: #063561;
}
/*end text ground*/
.bell-not-notification,bell-not-mission{
    margin-top: -15px;
}
.bell-has-notification, .bell-has-mission {
    margin-top: -30px;
    margin-right: 0px;
}
.bell-flag{
    margin-top: -17px;
    margin-right: 13px;
}
.bell-has-notification .tooltip-arrow,
.bell-not-notification .tooltip-arrow{
    top: 0;
    left: 193px;
    margin-left: -5px;
    border-bottom-color: #fff;
    border-width: 0 5px 5px;
    margin-top: -5px;
}
.bell-has-mission .tooltip-arrow,
.bell-not-mission .tooltip-arrow{
    top: 0;
    right: 88px;
    margin-left: -5px;
    border-bottom-color: #fff;
    border-width: 0 5px 5px;
    margin-top: -5px;
}
.bell-not-notification .tooltip-arrow{
    left: 198px;
}
.bell-not-mission .tooltip-arrow{
    left: 327px;
}
.bell-has-notification .dropdown-menu, 
.bell-not-notification .dropdown-menu,
.bell-has-mission .dropdown-menu, 
.bell-not-mission .dropdown-menu{
    right: 10px!important;
    border-radius: 5px!important;
    position: fixed;
    top: 50px;
    max-width: 400px;
    left: auto;
    min-width: 400px;
    background: #fff;
    border: 1px solid #4c87ed;
}
.bell-notification-item{
    padding : 0 10px 10px;
    margin-top: -5px;
}
.bell-notification-header{
    font-size: 13px;
    line-height: 15px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.bell-notification-content{
    max-height: 550px;
    font-size: 13px;
    position: relative;
    line-height: 15px;
}
.bell-notification-content-items{
    position: relative;
}
.bell-notification-content-item{
    border-bottom: 1px solid #CCC;
    padding: 20px 5px 20px;
    text-align: justify;
}
.bell-notification-content-item:hover{
    cursor: pointer;
    background: #F8F8F8;
}
.no-notification-item:hover{
    background: #EBF1F1
}
.bell-notification-content-item p{
    margin: 0 0 5px;
}
.bell-has-notification .slimScrollBar,
.bell-not-notification .slimScrollBar,
.bell-has-mission .slimScrollBar,
.bell-not-mission .slimScrollBar{
    opacity: 0.7!important;
    background: #CCC!important;
}
.btn-upload-avatar{
    margin-bottom: 20px;
    border-radius: 0px;
    margin-top: 15px;
    font-family: OpenSansBold;
    font-size: 11px;
    background: #bdbdbd;
    border: 0px;
    padding: 8px 15px;
}
.btn-put-avatar{
    background: #B1CDE5;
    border: 0px;
    padding: 7px 10px;
    color: #FFFFFF;
    margin-right: 10px;
}
.btn-change-avatar{
    min-width: 130px;
    margin-bottom: 20px;
    border-radius: 2px;
    margin-top: 10px;
    background: #FFCC00;
    border: 0px;
    color: #FFF;
    margin-left: -15px;
    font-size: 12px;
    padding: 4px 12px;
}
.carousel-control .img-arrow-right, .carousel-control .img-arrow-left{
    position: absolute;
    top: 40%;
    left: 20%;
    z-index: 5;
    display: inline-block;
    width: 60px;
}

.avatar-picture{
    border-radius: 50%;
    width: 32px;
    height: 32px;
    margin-top: 3px;
    transition: 0.3s all linear;
    //border: 1px solid #4c87ed;
    cursor: pointer;
}
.avatar-picture-item{
    width: 90px;
    height: 90px;
}
.menu-user-name{
    color: #fff;
    margin-right: 5px;
    font-size: 14px;
    margin-top: 10px;
    float: left;
}
.btn-change-img{
    border: 0px;
    height: 25px;
    border-radius: 0px;
    font-size: 13px;
    color: #063561;
    background: #D9E2E7;
    padding: 4px 8px;
    margin-top: 3px;
    margin-bottom: 10px;
}
.userdashboard-recent-action {
    border: 1px solid #ededed;
    background: #EEEEEE;
    margin-bottom: 20px;
}
.userdashboard-recent-action-header{
    padding: 5px 15px;
}
.userdashboard-recent-action-item {
    padding: 5px 15px;
    max-height: 500px;
    overflow-y: scroll;
    background: #EEEEEE;
}
.userdashboard-recent-action-header-item{
    border-bottom: 1px solid #777;
}
.userdashboard-recent-action-content{
    border-bottom: 3px solid #007FC6;
    display: inline-block;
}
.shape-note{
    width: 27px;
    height: 25px;
    display: inline-block;
    margin-right: 5px;
}
.dashboard-user-info{
    opacity: 0;
}
.beginner-chart{
    width: 68px;
    height: 50px;
    background: #CDDC39;
    opacity: 0;
    margin-top: 80px;
}
.high-beginner-chart{
    width: 68px; 
    height: 100px; 
    background: #8BC34A; 
    margin-top: 30px;
    opacity: 0;
}
.pre-immediate-chart{
    width: 68px; 
    height: 150px; 
    background: #4CAF50; 
    margin-top: -20px;
    opacity: 0;
}
.immediate-chart{
    width: 68px; 
    height: 200px; 
    background: #C6FF00; 
    margin-top: -70px;
    opacity: 0;
}
.high-immediate-chart{
    width: 68px; 
    height: 250px; 
    background: #ffe303; 
    margin-top: -120px;
    opacity: 0;
}
.advanced-chart{
    width: 68px;
    height: 179px;
    background: #ffb509;
    margin-top: -162px;
    opacity: 0;
}
.high-advanced-chart{
    width: 68px;
    height: 223px;
    background: #ff5900;
    margin-top: -206px;
    opacity: 0;
}
.expert-chart{
    width: 68px;
    height: 261px;
    background: #dc0000;
    margin-top: -244px;
    opacity: 0;
}
.beginner-number{
    width: 38px;
    height: 38px;
    border: 1px solid #FFF;
    border-radius: 40px;
    line-height: 30px;
    position: absolute;
    left: 15px;
    top: 6px;
    background: #FFF;
}
.beginner-number-item{
    text-align: center; 
    width: 32px;
    height: 32px;
    border: 1px solid #8eef65;
    border-radius: 30px;
    position: absolute;
    left: 2px;top: 2px;
}
.beginner-avatar{
    position: absolute;
    left: 0;
    width: 68px;
    height: 68px;
    border-radius: 68px;
    padding: 2px;
    border: 1px solid #ededed;
    top: -125px;
}
.beginner-avatar img{
    left: 2px;
    width: 62px;
    height: 62px;
    border-radius: 68px;
}
.beginner-text{
    position: absolute;
    left: 10px;
    top: -50px; 
    font-size: 14px; 
    font-family: light; 
    color:#cdcdcd;
    text-align: center;
}
.beginner-progress{
    position: absolute;
    left: 0;
    top: -45px;
}
.beginner-progress .progress{
    width: 68px;
    height: 5px;
    border-radius: 0px;
}
.beginer-img{
    background: #CDDC39;
}
.beginner-text-color{
    color: #CDDC39;
}
.high-beginner-text-color{
    color: #8BC34A;
}
.pre-immediate-text-color{
    color: #4CAF50;
}
.immediate-chart-text-color{
    color: #C6FF00;
}
.high-immediate-chart-text-color{
    color: #ffe303;
}
.your-level-scale{
    font-size: 18px;
    margin-bottom: 0px;
}
.pre-immediate-img{
    background: #4CAF50;
}
.high-immediate-img{
    background: #FFE303;
}
.high-advanced-img{
    background: #FF5900;
}
.high-beginer-img{
    background: #8BC34A;
}
.immediate-img{
    background: #C6FF00;
}
.advanced-img{
    background: #FFB509;
}
.expert-img{
    background: #DC0000;
}
.level-text{
    font-size: 25px;
    font-family: opensanssemibold;
    margin-bottom: 0px;
}
.user-dashboard-text-note{
    font-size: 12px;
}
.profile-note-item{
    padding: 34px 0px 0px 0px;
}
.profile-note{
    padding: 15px;
    border: 1px solid #ededed;
    background: #F9FFFF;
}
.profile-note-title{
    color: #063561;
    font-size: 14px;
}
.profile-note-content{
    color: #007B00;
    text-align: justify;
    margin-top: 10px;
}
.profile-form-label{
    margin-left: 15px;
}
.profile-label{
    padding-top: 10px;
}
.profile-label label{
    font-size: 13px;
    color: #063561; 
}
.btn-update-info{
    margin-top: 15px;
    border: 0px;
    border-radius: 2px;
    min-width: 130px;
    text-transform: uppercase;
    font-size: 11px;
    height: 29px;
}
.btn-update-info-disable{
    background: #EBEBEB;
    color: #AEBAC6;
}
.btn-update-info-able{
    background: rgb(0, 141, 246);
    color: #FFF;
}
.profile-note-content span{
    font-family: OpenSansBold;
}
.profile-note p{
    margin: 0px;
}
.jscroll-added{
    text-align: center;
}
.bg-notification-me{
    background: #EEBF18;
}
.profile-content-item .nav-tabs{
    border-bottom: 1px solid #ededed;
}
.profile-content-item .nav-tabs li.active a{
    border: 0px;
    color: #555;
}
.profile-content-item .nav-tabs li a{
    color: #CCCCCC;
}
.profile-content-item .nav-tabs li{
    margin-bottom: 0px;
}
/*.bg-notification-remind{
    background: #BE111E;
}*/
/*Begin remind review*/
.content-remind-review{
    background: #FFF;
    padding: 10px 70px;
    margin: 30px 0px;
}
.remind-review-title{
    margin-bottom: 30px;
}
.remind-review-item{
    padding: 20px 0px;
    min-height: 122px;
}
.btn-remind-review,.btn-remind-view{
    margin-top: 0px;
    font-family: OpenSansBold;
    background-color: #FFE303!important;
    color: #555;
    height: 35px;
    border-radius: 0;
    padding: 0 10px;
    text-shadow: none;
    width: 87px;
    font-size: 10px;
    border: none;
    box-shadow: none;
}
.btn-remind-view{
    color: #FFF;
    background: #3879D9!important;
}
.btn-remind-review:hover{
    color: #555;
}
.userdashboard-word-not-know:hover{
    color: #4280ef;
    decoration: none;
}
.btn-remind-view:hover{
    color: #FFF;
}
.review-topic-name{
    color: #063561;
}
.review-parent-name{
    color: #CCC;
    margin-left: 10px;
    font-size: 14px;
}
.revie-late{
    color: #FF0000;
}
.remind-word-container{
    max-width: 1200px;
    margin: auto;
    margin-top: 15px
}
.remind-review-img img{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    cursor: pointer;
    -webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; 
    transition: width 0.5s, height 0.5s, transform 0.5s;
}
.dashboard-level-link, .dashboard-invite-friends{
    margin-right: 20px;
}
.dashboard-invite-friends:hover{
    text-decoration: underline;
}

.dashboard-level-link img, .dashboard-ranking-link img{
    width: 15px;
    height: 15px;
    margin-left: 5px;
}
.dashboard-level-link span, .dashboard-ranking-link span, .dashboard-invite-friends span{
    font-size: 12px;
    color: #08c;
    cursor: pointer;
}
.dashboard-invite-friends .fa-user-plus, .dashboard-invite-friends .fa-info-circle{
    font-size: 17px;
    margin-left: 5px;
    color: #7b7979;
}
.dashboard-avatar{
    margin-top: 0px;
}
.dashboard-title{
    font-size: 20px;
    font-family: OpenSansBold;
    color: #063561;
    margin-top: 15px;
}
.dashboard-choose-library{
    font-size: 18px;
    font-family: OpenSansLight;
}
.dashboard-lirary{
    font-size: 14px;
    color: #08c;
}
.dashboard-lirary:hover{
    color: #08c;
}
.dashboard-avatar img{
    width: 100px;
    height: 100px;
    border-radius: 70px;
    border: 1px solid #ededed;
    padding: 2px;
}

@media screen and (max-width: 570px){
    .content-remind-review {
        padding: 10px 10px;
    }
}

/*End remind review*/
/*Begin Me info content*/
.me-info-content{
    padding-top: 60px;
    padding-bottom: 30px;
}
.me-info-item{
    padding: 0px 24px;
}
.me-info-img-title img{
    width: 170px;
}
.me-info-img-title{
    padding: 20px 0px;
    border-bottom: 1px solid #9BAEC1;
}
.me-owner{
    font-size: 16px;
    color:#58b6fe;
    margin: 0 0 0px;
}
.me-info-btn{
    margin: 20px 0px;
}
.me-explain{
    border: 1px solid #9BAEC1;
    margin-bottom: 20px;
}
.me-explain-item{
    padding: 20px 100px;
}
.me-explain-item-1{
    border-bottom: 1px solid #9BAEC1;
}
.me-explain-title{
    font-size: 26px;
    color: #063561;
}
.me-explain-img{
    width: 120px;
    margin: 20px 0px;
}
.me-explain-content{
    font-size: 14px;
}
/*End Me info content*/
/*Begin support*/
.support-child-item{
    color: #063561;
}
.support-open{
    display: block;
}
.support-close{
    display: none;
}
.support-active{
    background: #3a5795;
    color: #FFFFFF;
}
.support-active a{
    color: #FFFFFF;
    font-family: OpenSansBold;
}
.support-active a:hover{
    color: #FFFFFF;
    font-family: OpenSansBold;
}
.support-post-item{
    color: #08c;
    cursor: pointer;
}
.support-content-answer{
    display: none;
}
.support-title-item{
    font-size: 25px;
}
.support-items a span:hover,
.support-open:hover, 
.support-open a:hover,
.support-close:hover,
.support-close a:hover{
    background: #EBEEF4;
    color: #428bca;
}
.support-post-items{
    border-top: dashed 1px #e5e5e5;
    padding: 10px;
}
.support-post-item:hover{
    text-decoration: underline;
}
.menu-title-item-active{
    color: #B2B2B2!important;
}
@media (min-width: 1200px){
    .slide-intro-item{
        padding: 0px 30px;
    }
}
@media (min-width: 1300px){
    .support-header .container {
        padding-right: 0px;
    }
    .support-header .hotline{
        margin-right: -73px;
    }
    .slide-intro-item{
        padding: 0px 70px;
    }
}
.support-header{
    background: #4c87ed;
    padding: 15px 0px;
}
.support-header .home-icon{
    color: #fff;
    font-size: 14px;
    margin-right: 5px;
}
.support-header .hotline{
    font-size: 14px; 
    color: #FFF;
    font-family: OpenSansBold;
}
.support-header .support-title{
    font-family: OpenSansBold;
    color: #fff;
    font-size: 14px;
}
/*End support*/
/*Begin Invite Facebook Friends*/
.invite-friends-title{
    font-size: 15px;
    color: #063561;
}
.btn-view-more-friends, .btn-invite-friends{
    background-color: #58B6FE;
    color: #FFF;
    font-family: OpenSansBold;
    font-size: 10px;
    min-width: 77px;
    min-height: 25px;
    border-radius: 2px;
    border: 0px;
}
.fb-friend-content{
    padding-left: 10px;
    padding-right: 30px;
    min-height: 120px;
}
.fb-friend-item{
    padding-top: 20px;
    padding-bottom: 30px;
    border-top: 1px solid #cdcdcd;
}
.btn-view-more-friends{
    background-color: #efbf10;
}
.img-invite-friends{
    width: 60px;
    border-radius: 30px;
}
.img-invite-friends:hover{
    width: 66px;
    border-radius: 33px;
    cursor: pointer;
    -webkit-transition: width 1s; /* Safari */
    transition: width 1s;
}
/*End invite facebook friends*/
/*Begin library share modal*/
.library-share-header{
     width: 100%;
    height: 50px;
    padding: 10px;
    color: #fff;
    border-radius: 4px;
}
.library-share-header-content{
    font-size: 17px;
    display: inline-block;
    margin-top: 5px;
    color: #fff;
}

.library-share-content{
    padding: 20px;
}
.library-share-input-link{
    width: 100%;
    height: 30px;
    padding: 5px;
    border: 2px solid #d8d8d8;
    color: #888;
    font-size: 13px;
}
.share-social-img{
    margin-right: 5px;
}
.library-share-textarea-link{
    width: 100%;
    padding: 5px;
    border: 2px solid #d8d8d8;
    color: #888;
    font-size: 13px;
}
.btn-cancel-share, .btn-send-msg{
    margin: 10px 0px;
    height: 30px;
    font-size: 11px;
    width: 60px;
    border-radius: 0px;
}

.btn-send-msg{
    background: #D8EEF9;
    border: 0px;
    color: #555;
    font-family: arial;
    font-weight: bold;
}
.btn-cancel-share{
    border: 0px;
    color: #555;
    font-family: arial;
    font-weight: bold;
}
.btn-send-msg:hover, .btn-send-msg:active{
    background: #008DF6;
    border: 0px;
    color: #FFF;
}
.btn-cancel-share:hover{
    color: #FFF;
    background: #5E6265
}

.share-email-list{
    padding: 5px;
    list-style-type: none; 
    float: left;
}
.share-email-list li{
    display: inline; 
    font-size: 13px;
}
.share-email-list-item{
    width: 200px;
    margin-right: 10px;
    height: 35px;
    padding: 6px 0px;
}
.share-email-list-item .email-icon{
    border: 1px solid;
    padding: 2px 6px 3px;
    font-size: 16px;color: #888;
    border-radius: 16px;
    margin-right: 5px;
}
.msg-content{
    margin-top: 10px;
    clear: left;
}
.email-items:hover{
    background : #FEDDDF;
    cursor: pointer;
}
.share-msg{
    margin-top: 10px;
    padding: 10px;
    background-color: #efd;
    border: 1px dashed #cdb;
    color: #6C756C;
    display: none;
}
/*End library share modal*/
.story-text{
    font-size: 20px;
    margin-top: 10px;
    color: #4c87ed;
}
.notification-me-learning + .tooltip{
    position: fixed;
    font-size: 9px;
}

.notification-me-learning + .tooltip > .tooltip-inner{
   padding: 3px 5px;
}

.library-learning + .tooltip > .tooltip-inner{
   padding: 3px 3px;
}
.vip-line-caro{
    height: 6px;
    background-image: url("../img/vip-caro.png");
    background-repeat: repeat-x;
}
button.modal-btn-close{
    color: #f00;
    width: 30px;
    margin: 20px;
    border: 1px solid;
    height: 30px;
    border-radius: 15px;
    float: none;
}
button.modal-btn-close: hover{
    color: #f00;
}
.modal-vip-content{
    background: #e2e8f4;
}

/*Begin dashboard popup*/
.remind-modal-dialog, .result-modal-dialog{
    min-width: 640px;
    margin-top: 20px;
    max-width: 800px;
}
.remind-modal-content, .result-modal-content{
    padding: 20px;
}
.remind-popup-footer{
    height: 10px;
    margin-top: 20px;
    background: #f72121;
}
.remind-popup-content{
    margin-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
}
.remind-popup-text-content{
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 15px;
}
.btn-remind{
    color: #555;
    height: 50px;
    border: 0;
    border-radius: 4px;
    margin-top: 10px;
    min-width: 170px;
    font-family: 'OpenSansBold';
    font-size: 13px;
    margin-right: 30px;
    margin-left: 30px;
}
.btn-remind-no{
    background: #cecece;
}
.btn-remind-now{
    background: #ffff00;
}
.remind-narrow{
    margin-top: -23px;
    margin-bottom: -20px;
}
.resullt-popup-title{
    font-size: 16px;
    font-family: opensanssemibold;
    margin-top: 5px;
    color: #003366;
}
.result-test-image{
    margin-top: 50px;
}
#result-test-footer{
    height: 10px;
    margin-top: 20px;
}
.result-popup-text{
    margin-top: 30px;
    font-size: 20px;
    font-family: opensansbold;
}
.result-popup-msg{
    padding-left: 60px;
    padding-right: 60px;
    font-size: 15px;
}
.result-popup-msg span{
    font-family: opensansbold; 
    color: #1580dd;
}
.fail-footer{
    background: #2c437c;
}
.fail-color{
    color: #2c437c;
}
.good-footer{
    background: #5edd3a;
}
.good-color{
    color: #5edd3a;
}
.very-good-footer{
    background: #f4c500;
}
.very-good-color{
    color: #f4c500;
}
.excellent-footer{
	background: #ff9700;
}
.excellent-color{
	color: #ff9700;
}
.very-excellent-footer{
	background: #ff0000;
}
.very-excellent-color{
	color: #ff0000;
}
.memory-test-footer{
	background: #00d890;	
}
.memory-test-color{
	color: #00d890;	
}
/*End dashboard popup*/
.welcome-title{
    font-size: 30px;
    color: #0086ff;
    margin-top: 30px;
    font-family: opensanssemibold;
}
.welcome-modal-dialog{
    min-width: 700px;
    margin-top: 20px;
}
.welcome-modal-content{
    padding: 20px;
}
.welcome-user{
    font-size: 20px;
    margin-top: 20px;
}
.welcome-user span{
    margin-left: 10px;
    margin-right: 10px;
}
.welcome-user img{
    vertical-align: baseline;
}
.let-support-user{
    font-size: 16px;
}
.let-support-user span{
    font-family: opensansbold;
}
.welcom-img{
    margin-top: 30px;
}
.welcome-footer{
    height: 10px;
    margin-top: 20px;
    background: #0086ff;
}
.report-faults:hover{
    background-color: #8bd5f8;
    transition: all 0.5s ease-in-out;
}
.report-faults{
    background: #58b6fe;
    color: #fff;
}
.pronounce-test{
    border-bottom: 1px solid #ededed;
    padding-bottom: 10px;
}
.div-close{
    width: 23px;
    height: 23px;
    margin-top: 10px;
    margin-right: 10px;
    background: url('../img/close.png') 0 0;
}
.div-close:hover{
    cursor: pointer;
    background: url('../img/close.png') 0 -23px;
}
.div-close-white{
    background: url('../img/close-white.png') 0 0;
}
.div-close-white:hover{
    background: url('../img/close-white.png') 0 -23px;
}
/*begin mission notification*/
#dLabel{
	display:inline-block;
	border:solid 1px;
	width:40px;
	height:40px;
	font-size:14px;
	text-align:center;
	margin-left:400px;
	margin-top:20px;
	border-radius:4px;
}
#dLabel span{
	font-size:14px;
	padding-top:10px;
}
.tooltip-arrow-triangle{
	margin-top: -17px;
	width:10px;
	height:10px;
        margin-left: 63px;
        border-width: 0 10px 11px;
        border-bottom-color: black;
}
.popup{
	width:420px;
	max-height:356px;
	margin-left:350px;
	margin-top:15px;
}
.popup #title{
	font-size:18px;
	color:#4C87ED;
	margin-top:16px;
	font-family: OpenSansSemibold;
}
.popup img-text{
	color:#4C87ED;
	font-size:18px;
	margin-top:10px;
	width:418px;
	height:3px;
}
.content-popup{
	padding-left:15px;
	padding-right:15px;
}
.content-popup .item-popup{
	height:95px;
	border-bottom:solid 1px;
	border-color:#A7A8AA;
	padding-top:20px;
	padding-left:10px;
}
.content-popup .item-popup-no-notification{
	height: 95px;
        border-bottom: solid 1px;
        padding-top: 20px;
        padding-left: 10px;
        padding-bottom: 100px;
        border: 0;
}
.content-popup .item-popup-no-notification img{
    width: 70px; height: 70px;
}
.content-popup .item-popup .square-topic{
	width:55px;
	height:55px;
	border:solid 1px;
	border-color:#F9AA05;
	border-radius:7px;
}
.content-popup .item-popup .topic-popup{
	margin-top:12px;
}
.content-popup .item-popup .square-words{
	width:55px;
	height:55px;
	border:solid 1px;
	border-color:#4C87ED;
	border-radius:7px;
}
.content-popup .item-popup .words-popup{
	font-family: OpenSansSemibold;
	color:#4C87ED;
	margin-top:17px;
}
.content-popup .item-popup .topic-popup-text{
	font-family: OpenSansSemibold;
	color:#F9AA05;
	margin-top:17px;
}
.content-popup .item-popup .not-padding-popup{
	padding-left:0px;
	margin-top:-3px;
	margin-left:-10px
}
.bell-has-notification .content-popup .item-popup .not-padding-popup{
    max-height: 150px;
    overflow-y: scroll;
}
.content-popup .hello-student{
	color:#4C87ED;
	font-size:12px;
}
.content-popup .content-for-student{
	font-size:12px;
	margin-top:-7px;
	color:#000
}
.item-popup .number-topic{
	color:#F7352E;
	font-family: OpenSansBold;
	font-size:15px;
}
.item-popup .glyphicon-chevron-right{
	color:#4C87ED;
	display:inline-block;
	margin-top:15px;
	padding-left:13px;
}
.line-popup img{
    width: 100%;
    height: 3px;
}
.topic-popup img{
    width: 30px; 
    height: 30px;
}
/*end mission notification*/
.volumne-word-sound{
    font-size: 14px;
    color: #4c87ed;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
}
.volumne-word-sound:hover{
    background: #4c87ed;
    color: #fff;
}
.modal-bar{
    width: 100%;
    height: 5px;
}
.modal-popular{
    max-width: 600px;
    margin: auto;
}
.modal-content-popular{
    margin-top: 20px;
    padding: 20px;
}
label{
    font-weight: 100;
}

#learn-question .library-detail-modal-content{
    max-width: 600px;
    margin: auto;
}
.avatars-text{
    background: #FEBF10;
    width: 90px;
    height: 90px;
    display: inline-block;
    border-radius: 4px;
    font-size: 40px;
    line-height: 80px;
    color: #fff;
    margin-top: 1px;
}
.last-card-learn-btn{
    border-radius: 4px;
    background: #e04a32!important;
    
}
.last-card-test-btn{
    border-radius: 4px;
    background: #4c87ed!important;
    color: #fff;
}
.last-card-learn-btn:hover, .last-card-test-btn:hover{
    text-shadow: 1px 1px 1px #bbb;
}


.story-content-box{
	height:430px;
	overflow-y:scroll;
	border: 1px solid #4c87ed;
        padding: 10px;
}

.logo-menu{
    width: 66px;
    margin-top: 12px;
    margin-left: 260px;
}
.logo-menu-in{
    margin-left: 0px;
    width: 66px;
    margin-top: 12px;
}
.left-avatar-text{
    width: 25px;
    height: 25px;
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    line-height: 25PX;
    FONT-SIZE: 16PX;
    margin-top: 7px;
    border-radius: 2px;
    padding-left: 5px;
}
.right-avatar-text{
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    font-size: 20px;
    margin-top: 4px;
    border-radius: 50%;
    line-height: 28px;
    text-align: center;
}
.learn-unknow-word-btn{
    background: #e04a32;
    color: #fff;
    width: 150px;
}
.learn-choose-word-btn{
    background: #ffce0f;
    color: #555;
    width: 150px;
}
.learn-know-word-btn{
    background: #4c87ed;
    color: #fff;
    width: 150px;
    margin-right: 0px;
}
.learning-speaking-btn{
    background: #85cb21;
    margin-left: 15px;
}
.learning-context-btn{
    background: #ef3737;
    margin-left: 15px;
}
.vip-menu-icon{
    text-decoration: none;
    height: 26px;
    margin-top: 2px;
    width: 99px;
    border-radius: 2px;
    background: #4c87ed;
    color: #fff!important;
    line-height: 26px;
    text-align: right;
    padding: 0px 8px;
    font-size: 11px;
    background-image: url(../img/voca-vip.png);
    background-position: 0 -21px; 
    background-repeat: no-repeat;
    font-family: opensansbold;
}
.vip-menu-icon:hover{
    background: #5299ff;
    background-image: url(../img/voca-vip.png);
    background-repeat: no-repeat;
    background-position: 0 -21px; 
    color: #fff!important;
}
/*begin facebook chat*/
.facebook-chat-group{
    height: 35px;
    background: #7ac70c;
    width: 225px;
    padding-left: 10px;
    border-radius: 4px 4px 0px 0px;
    position: fixed;
    bottom: 0;right: 10px;
    margin-bottom: 0;
}
.facebook-chat-group:hover{
    cursor:pointer;
}
.facebook-chat-box{
    position: fixed; 
    bottom: -585px;
    right: 10px;
    z-index: 10;
}
.facebook-chat-box-top{
    width: 300px; 
    height: 35px;
    background: #7ac70c;
    border-radius: 4px 4px 0px 0px;
    padding-left: 10px;
}
.facebook-chat-box-hide{
    float: right;
    color: #fff;
    font-size: 20px;
    margin-top: 5px;
    margin-right: 10px;
}
.facebook-chat-box-hide:hover{
    cursor: pointer;
}
.facebook-support{
    float: right;
    margin-right: 90px;
    font-size: 16px;
    font-family: opensansbold;
    color: #fff;
    margin-top: 6px;
}
/*end facebook chat*/
.menu-navbar-header{
    margin-left: 10px;
    width: 100%;
    padding-right: 25px;
}
.menu-left-icon{
    float: left;
    margin-top: 18px;
}
.menu-logo-center{
    text-align: center;
    clear: both;
    float: none;
}
.menu-logo-center img{
    margin-top: -22px;
    margin-left: 0px;
}
.menu-nav-right{
    margin-top: -50px;
}
.menu-search-vocabulary{
    padding-top: 9px;
}
.menu-search-vocabulary img{
    margin-left: 15px;
    margin-right: 15px;
	width: 83px;
}
.txt-search{
    height: 30px;
    width: 500px;
    border-radius: 2px;
    border: 0;
    padding-left: 10px;
}
.txt-search:focus{
    outline: none;
}

.btn-suggest{
    min-width: 80px;
    height: 30px;
    background: #7ac60c;
    border: 0;
    margin-left: 15px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
}
.btn-suggest:hover{
    background: #75b624;
}
.btn-suggest:focus{
    outline: none;
}
.btn-upgrade-vip{
    display: inline-block;
    margin-left: 15px;
    min-width: 105px;
    background: #4c87ed;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
}
.btn-upgrade-vip:hover{
    color: #fff;
    background: #4e78ed;
}
.btn-upgrade-vip:focus{
    text-decoration: none;
    color: #fff;
}
.learning-left-menu{
    height: 50px;
    padding-top: 10px;
    color: #fff;
    float: left;
}
.avatar-menu-group{
    margin-top: -42px;
}
.back-menu{
    display: inline-block!important;
    visibility: visible!important;
    width: 25px;
    height: 25px;
    margin-top: 4px;
    float: left;
    margin-left: 5px;
}
.learning-vocabulary-name{
    color: #fff;
    font-size: 16px;
    margin-top: 6px;
    float: left;
    margin-left: 10px;
    text-transform: uppercase;
}
.learning-center-menu{
    width: 100%;
    float: left;
    margin-top: -50px;
    height: 50px;
    text-align: center;
    position: relative;
    z-index: -1;
}
.learning-right-menu{
        height: 50px;
    margin-top: -50px;
    float: right;
    padding-right: 15px;
}
/**begin suggest popup**/
.fix-padding-modal-body{
    padding: 30px 65px 30px 65px;
}
.suggest-the-word-dialog{
	max-width: 1024px!important;
	width: 100%;
}
.content-group {
    margin-top: 15px;
}
.suggest-title{
	font-size: 20px;
    color: #4c87ed;
    margin-top: 0px;
    margin-bottom: 20px;
    font-family: OPenSansLight;
}
.suggest-song-dialog .modal-content{
	border-radius: 6px;
}
.suggest-song-dialog  .modal-body{
	padding-left: 30px;
    padding-right: 30px;
    padding-top: 40px;
    padding-bottom: 45px;
}
.suggest-title{
	font-size: 20px;
    color: #4c87ed;
    margin-top: 0px;
    margin-bottom: 20px;
    font-family: OPenSansLight;
}
.logo{
	text-align: center;
    margin-top: 15px;
}
.logo img{
	width: 100px;
}

.title-msg{
	margin-top: -15px;
    background: #fff;
    width: 230px;
    text-align: center;
    display: inline-block;
}
.content-group{
	margin-top: 15px;
}

.content-control{
	
}
.captcha-group{
	margin-top: 15px;
}
.captcha-group p{
	font-family: arial;
}
.img-captcha{
	height: 34px;
    
}
.txt-captcha{
	width: 41%;
    display: inline;
    margin-left: 10px;
}
.txt-suggest-song{
	height: 35px;
}
.txt-suggest-song:focus {
    border-color: #75b924;
    outline: none;
    -webkit-box-shadow: inset 0 -2px #67a329;
    box-shadow: inset 0 -2px #67a329;
}
.refresh-captcha-search{
    color: #4c87ed;
    font-size: 20px;
    width: 10%;
    text-align: center;
    height: 34px;
    float: right;
    margin-top: 4px;
}
.refresh-captcha-search:hover{
	cursor: pointer;
}
.agree-group{
	margin-top: 10px;
}
.agree-group i{
	font-style: normal;
	color: #4c87ed;
}
.suggest-msg-search{
    margin-bottom: 0px;
    margin-top: 10px;
    color: #f00;
}
.btn-send-suggest-home{
	width: 120px;
	margin-left: 5px;
	margin-right: 5px;
    height: 35px;
    border: 0px;
    background: #7ac60c;
    color: #fff;
    font-family: opensansbold;
    font-size: 13px;
    box-shadow: 0px 2px 0px #67a329;
    border-radius: 4px;
	margin-top: 20px;
}
.btn-send-suggest-home:hover{
    background: #75ba24;
}
.btn-send-suggest-home:active, .btn-send-suggest-home:focus{
    outline: none;
}
.btn-cancel-suggest{
	width: 120px;
    margin-left: 5px;
    margin-right: 5px;
    height: 36px;
    border: 0px;
    background: #fff;
    color: #888;
    font-family: opensansbold;
    font-size: 13px;
    border-radius: 4px;
    margin-top: 20px;
    border: 1px solid #ddd;
}
.img-suggest-song{
	width: 80px;
}
.suggest-the-word-msg-home{
    color: #f00;
    font-size: 13px;
    margin-top: 5px;
}
.title-input{
    font-size: 14px;
    font-family: OPenSansSemiBold;
}
.txt-suggest-song {
    margin-bottom: 30px;
}
.suggest-the-word-img{
    margin-top: 50px;
}

.btn-send-suggest-idea {
    width: 120px;
    margin-left: 5px;
    margin-right: 5px;
    height: 35px;
    border: 0px;
    background: #75b924;
    color: #fff;
    font-family: opensansbold;
    font-size: 13px;
    box-shadow: 0px 2px 0px #67a329;
    border-radius: 4px;
    margin-top: 20px;
}
.box-img-success{
    display: none;
}
.result-success{
    font-size: 20px;
    font-family: OpenSansBold;
    color: #7ac50c;
    margin-top: 40px;
   
}
.margin-top-text{
    margin-top: 20px;
}
.thank-you{
    font-family: OpenSansRegular;
    font-size: 20px;
    color: #4c87ed;
}
.design-txt{
    margin-bottom: 20px;
    border: solid 1px #4c87ed;
}
.margin-btn{

}
.summary-idea-home{
    height: 160px!important;
}
.source-book-home-idea{
    height: 70px!important;
}
.if-have-title{
        color: #4c87ed;
    font-family: OpenSansItalic;
}
.summary-idea-home-tab-difference{
    height: 245px!important;
}
/**end suggest popup**/

/**begin custom search on menu**/
/*style search register*/
.box-result-the-word, .box-search-vocabulary-result{
    position: absolute;
    top: 50%;
    left: 0px;
    background: #fff;
    width: 100%;
    margin-top: 50px;
    border: solid 1px #4c87ed;
    border-radius: 4px;
    z-index: 100;
    text-align: left;
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
    display: inline-block;
    display: none;
}
.box-search-vocabulary-result{
    width: 100%;
    margin-top: 20px;
}
.box-left-learn{
    float: left;
    width: 49%;
    margin-right: 1%;
}
.box-right-learn{
    float: left;
    width: 49%;
    margin-left: 1%;
}
.box-list-learn{
    padding: 15px;
    padding-top: 5px;
    border: dotted 1px #ddd;
}
.icon-title-the-word-search{
    width: 14px;
    height: 19px;
    margin-top: -8px;
}
.title-the-word-learn{
    font-family: OpenSansRegular;
    font-size: 16px;
    margin-bottom: 20px;
    
}
.item-left-learn-box{
    margin-top: 10px;
    padding: 10px 20px 10px 20px;
    background: #ededed;
    border-radius: 20px;
    color: #6b6b6b;
    font-family: OpenSansBold;
    font-size: 14px;
}
.item-left-learn-box:hover{
    background: #4c87ed;
    color: #fff;
}
.not-text-decoration:hover{
    text-decoration: none;
}
.btn-watch-all-search{
    text-align: center;
     padding: 9px 20px 9px 20px;
     font-family: OpenSansBold;
    font-size: 14px;
    color: #4c87ed;
    border-radius: 20px;
    border: solid 1px #4c87ed;
    margin-top: 10px;
}
.item-right-learn-box{
    margin-top: 10px;
    padding: 10px 20px 10px 20px;
    background: #ededed;
    border-radius: 20px;
    color: #6b6b6b;
    font-family: OpenSansBold;
    font-size: 14px;
}
.item-right-learn-box:hover{
    background: #7ac60c;
    color: #fff;
}
.box-search-register-the-word, .box-search-result-item{
    display: none;
}
/*end style search register*/



/*style search not register*/
.box-search-not-register{
    display: none;
}
.title-the-word-learn-big{
    font-size: 25px;
    font-family: OpenSansRegular;
    color: #000;
    text-align: center;
}
.icon-title-the-word-search-big{
    width: 22px;
    height: 30px;
    margin-top: -14px;
}
.box-list-learn-big{
    width: 100%;
    padding: 15px;
    padding-top: 5px;
    border: dotted 1px #ddd;
    display: inline-block;
    
}
.box-search-result{
    width: 100%;
    display: inline-block;
    
}
.search-result-text{
    font-size: 14px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.search-result-line{
    border: 1px dashed #ededed;
    margin-top: 10px;
}
.item-right-learn-box-big{
    margin-top: 10px;
    padding: 10px 20px 10px 20px;
    background: #ededed;
    border-radius: 20px;
    color: #6b6b6b;
    font-family: OpenSansBold;
    font-size: 14px;
    width: 49%;
    float: left;
}
.item-right-learn-box-big:hover{
    background: #7ac60c;
    color: #fff;
}
.odd-margin{
    margin-right: 2%;
}
/*end style search not register*/

/*style search thất bại*/

.not-find-result {
    font-family: OpenSansRegular;
    font-size: 14px;
    color: #494949;
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
}
.not-find-result span {
    font-family: OpenSansBold;
}
.box-suggest-the-word-you-like {
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    background: #DEEDFF;
    display: inline-block;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    border-radius: 6px;
    border: solid 1px #4c87ed;
    width: 100%;
}
.suggest-text-box-find{
    font-family: OpenSansRegular;
    font-size: 15px;
    color: #4c87ed;
    display: inline-block;
    max-width: 68%;
    float: left;
}
.suggest-style-search {
    display: inline-block;
    font-family: OpenSansSemiBold;
    font-size: 14px;
    color: #fff;
    background: #4c87ed;
    width: 125px;
    float: right;
    border-radius: 4px;
    margin-top: 4px;
    cursor: pointer;
    text-align: center;
    height: 30px;
    padding-top: 6px;
    box-shadow: 0 2px #4a78ec ;
    text-shadow: 1px 1px 5px #044570;
}
.avt-msg{
    margin-top: 15px;
    color: #ef3737;
}
@media (min-width: 0px) and (max-width: 768px) {
    .suggest-style-search {
        float:none;
    }
    .suggest-text-box-find{
        width: 100%;
        max-width: 100%;
        float:none;
    }
}
/*end style search thất bại*/

@media (max-width: 767px) { 
    .avatar-right-menu{
            margin-right: 10px!important;
    }
}

/**end custom search on menu**/
.menu-register-system{
	color: #fff;
    display: inline-block;
    padding: 4px 14px!important;
    border-radius: 4px;
    font-size: 13px;
    font-family: opensanssemibold;
    margin-top: 9px;
    margin-right: 10px;
    border: 1px solid #7ac60c;
    background: #7ac60c;
}
ul li a.menu-register-system:hover, .menu-register-system:focus {
    color: #fff!important;
    border: 1px solid #75ba24!important;
    background: #75ba24!important;
}

.menu-login-system{
	font-size: 13px;
    text-shadow: 1px 1px 1px #e89400;
    padding: 4px 10px!important;
    color: #fff;
    border: 1px solid #ffbf22;
    border-radius: 4px;
    margin-top: 9px;
    background: #ffce0f;
    margin-right: 15px;
    font-family: opensanssemibold;
}
ul li a.menu-login-system:hover, .menu-login-system:focus {
    color: #fff!important;
    background: #ffb600!important;
    border: 1px solid #ffbf22!important;
}
b,strong{
    font-weight: 100;
    font-family: opensansbold;
}

/**Begin rate group voca community**/
.rate-group-item{
    display: inline-block;
    background: url(../img/star-gray.png);
    width: 65px;
    height: 10px;
    position: relative;
}
.rate-group-item-active{
    display: inline-block;
    background: url(../img/star-yellow.png);
    width: 65px;
    height: 10px;
    position: absolute;
    left: 0px;
}
.star-rating.fa-star, .fa-star{
    color: #ffd803!important;
}
.star-rated{
    font-size: 15px;
    padding: 2px 3px 2px 3px;
    border-radius: 2px;
    margin-right: 3px;
    background: #00bdfd!important;
    color: #fff!important;
    margin-top: 7px;
}
/**End rate group voca community**/

/**begin pin word**/
.pin-word, .pin-word-icon{
    background: url(../img/img-pin.png);
    display: inline-block;
    width: 40px;
    height: 40px;
}
.pin-word:hover, .pin-word-icon:hover{
    background-position: 0 40px;
    cursor: pointer;
}
.pin-word-learning{
    background: url(../img/img-pin-30.png);
    width: 30px;
    height: 30px;
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
    background-position: 0 30px;
    right: 32px;
    top: 5px;
}
.pin-word-learning:hover{
    background-position: 0 0px;
    cursor: pointer;
}
.pin-search-word-content-item{
    height: 60px;
    background: #e9e9e9;
    margin-bottom: 0px;
    padding-left: 10px;
    line-height: 60px;
}
.pin-search-word-content-item:hover{
    background: #fff;
    cursor: pointer;
}
.pin-search-word-content-item .pin-word-word{
    font-size: 16px;
    font-family: opensanssemibold;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 150px;
}
.pin-search-word-content-item .pin-word-word-type{
    font-size: 14px;
    font-family: opensanssemibold;
    color: #898989;
    margin-right: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 50px;
}
.pin-search-word-content-item .pin-word-mean{
    font-size: 14px;
    color: #313131;
    font-family: opensanssemibold;
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 150px;
}
.pin-search-word-content-item .pin-word-icon{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}
.pin-search-word-content-item .pin-word-icon + .tooltip > .tooltip-arrow{
    border-left-color: #979797;
}
.pin-search-word-content-item .pin-word-icon + .tooltip > .tooltip-inner{
    background: #979797;
    padding: 5px 10px;
}
/**end pin word*/
/**Begin hot line**/
.hotline{
    bottom: 0px;
    LEFT: 10px;
    position: fixed;
    width: 21%;
    z-index: 5;
}
.hotline-rotate {
    display: block;
    animation-name: hotline-rotate;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 12; 
    animation-iteration-count: 12;
    animation-duration: 0.7s;
    animation-direction: alternate;
    margin-right: 5px;
    
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

 @keyframes hotline-rotate {
      0% {
      opacity:1;
    }
    45% {
    opacity:1;
    }
    55% {
    transform: rotate(100deg);
    }
    100% {
    transform: rotate(100deg);
    }
    } 
    
/**End hot line**/