#formContent {	
	background-color: #d0e2e2 !important;
}
.sidebar-left-vocabulary{
	display: inline-block;
	float: left;
}
.sidebar-right-vocabulary{
	display: inline-block;
	background-color: white;
	float: right;
}

.information {
	background: white;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}
.information .ui-menu .ui-menu-list .ui-menuitem {
    border: 0;
    border-bottom: 1px dashed;
}

.information span:hover {
    color: #ff650b;
    display: block;
}
.information .ui-menu .ui-menuitem-link {
	width: 100%;
	line-height: 21px;
}
.information .ui-menu .ui-menuitem-link:hover {
	background-color: #eee;	
}
.information  a.ui-menuitem-link.ui-corner-all.active{
	background-color: #0099ff;
	color: #fff;
}
.information  a.ui-menuitem-link.ui-corner-all:hover {
    border-left: 3px solid #0099ff;
}
.information .ui-menu {
   padding: 0;
}
i.fa.fa-2x.fa-codepen {
    color: #ff5753;
}
.title-voca{
	border-bottom: 2px solid #d0e2e2;
	width: 100%;
	margin-bottom: 20px;
	padding: 10px;
}
.list-vocabulary h3, .describe h3{
    padding: 0px;
    width: 100%;
    line-height: 50px;
    color: #ff5753;
    display: inline;
}
.list-vocabulary ul >li{
	text-align: center;
	list-style-type: none;
	float: left;
	padding: 0 20px;
}
.list-vocabulary ul >li:hover{
	background-color:  rgba(128, 128, 128, 0.45);
	color: #fff;
	border-radius: 5px;
}
.list-vocabulary img{
	max-width: 100%;
	margin: 10px;
}
.list-voca td:hover {
    background-color: #bfcc94;
}
.sidebar-left-vocabulary.ui-widget-content {
	margin: 0px;
}
/*grammar start*/

/*grammar end*/

p.regis-link {
    font-size: 25px;
    border: 1px dashed red;
    padding: 0 10px;
}
.simple-sub-btn .i-right {
    margin-bottom: 5px;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    padding: 0 10px;
}
.simple-sub-btn a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
.simple-sub-btn .btn_orange_sm {
    width: auto;
    background: #ff8700;
    border: 1px solid #ff8700;
    color: #FFF;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.simple-sub-btn .btn_orange_sm:hover{
	background:#0075d3;
}
.ebook {
	text-align: center;
	margin-bottom: 15px;
}
#btn-docu {
	text-align: center;
}
#btn-docu .ui-button {
    background: none !important;
    background-color: #0078d6 !important;
    color: white !important;
    border: none !important;
    border-radius: 0px !important;
    padding: 10px;
    width: auto !important;
    font-size: 13px;
    
}
#btn-docu .fa-download:before {
    content: "\f019";
    font-size: 37px;
}
#btn-docu span.ui-button-text.ui-c {
    float: left;
    font-size: 22px;
}
#btn-docu .ui-button:hover{
	background-color: #f58634 !important;
}
.grammar-skill {
/*     height: 105px; */
    overflow: hidden;
    padding: 27px 0;
    display: inline-block;
}
.language-eng p {
    display: inline-block;
}
.language-eng .simple-sub-img img {
    width: 20%;
}
 .language-eng{
    width: 40%;
    margin: 0;
    padding: 0;
    display: inline-block;
}
.ui-button {
    background: none !important;
    background-color: #0073d0 !important;
    color: #f9f4f4 !important;
    border: none !important;
    border-radius: 0px !important;
    width: auto !important;
    font-size: 13px;
    margin-top: 10px;
}

.btn-sub .simple-sub-btn .i-right {
	display: inline-block;
	float: left;
}
.btn-grammar-skill {
    vertical-align: middle;
    display: inline-block;
    padding: 16px 0px;
}
.grammar-img img{
	max-width: 200px;
}
.title-gra h4, .title-gra p{
	display: inline-block;
	margin: 0;
}
.skill-test{
	display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.skill-question {
    box-shadow: 0px 0px 12px 10px #0081e1;
    margin: 10px;
    padding: 30px 0;
}
.grammar-sub .title-gra{
/* 	text-align: center; */
	padding: 10px 0 !important;
}
.grammar-sub p {
	margin: 0 !important;
}
.skill-test .ui-button {
    margin: 13px 3px;
    background: none !important;
    background-color: #0082e3 !important;
    color: white !important;
    border: none !important;
    border-radius: 0px !important;
    width: auto !important;
    font-size: 13px;
}

.skill-test .ui-button-icon-only .ui-button-text {
    padding: 1.3em 5em;
    text-indent: -9999999px;
}
.ui-button-text-only .ui-button-text {
    padding: 1.3em 4em !important;
    text-shadow: none;
}
.skill-test .ui-icon{
	background: #fff;
}
.skill-grammar {
    border: 1px solid gray;
    background: #fff;
    text-align: center;
    margin-bottom: 10px;
}
.title-gra img{
    width: 70px;
    margin: 0 20px;
}
.btn-prev{
	margin: 0 auto;
	text-align: center;
}
.ans-ques .ui-button {
    margin: 13px 20px;
    background: none !important;
    background-color: rgb(255, 255, 255) !important;
    color: #007cdb !important;
    border: 1px solid #0083e3!important;
    border-radius: 6px !important;
    width: auto !important;
    font-size: 13px;
}
.ans-ques .ui-button:hover {
    background-color: rgb(255, 112, 6) !important;
    color: #fff !important;
}
.ans-ques.ui-button-text-only .ui-button-text {
    padding: 1.3em 7em !important;
}

/*Vocabulary css*/
.vocabulary-content, .vocabulary-content .vocabulary > div:not(.clear):not(.img-turn) {
	height: 300px !important;
	overflow: hidden;
}
.vocabulary-content .vocabulary > div {
	overflow-y: auto;
}
.vocabulary-sub {
	width: 100%;
	margin: 0 5px;
	background-color: #fff;
	border: 1px solid #d0e2e2;
	border-radius: 5px;
	padding: 5px;
	display: inline-block;
	
}
.vocabulary-img img {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    padding: 10px 0;
}
.title-vocabulary a{
	display: inline-block;
}
.vocabulary-word h4 {
	color: #13802c;
    font-weight: bold;
}
.vocabulary-sentences-example > p {
	margin-top:  10px;
	color: #e86708;
}
.vocabulary-sentences-example > label, .vocabulary-sentences-example > label * {
	color: #13802c;
}

.vocabulary-guess .vocabulary-guess input[type=text], input[type=password], textarea {
    min-width: 1px;
    width: 40%;
    padding: 3px;
    margin: 5px 20px !important;
    max-width: 100%;
    background: white;
    border: 1px solid #c5c5c5;
    border-radius: 5px;
    box-shadow: none;
}
.vocabulary-guess .ui-button-text-only .ui-button-text {
    padding: 0.8em 1em !important;
    text-shadow: none;
    background-color: #f58634;
}
.voca-subjects {
    padding: 0;
    display: inline-block;
}
.voca-subject-sub {
    background-color: #fff;
    display: inline-block;
    width: 100%;
    padding: 10px 0px;
    box-shadow: 2px 2px 4px 0px rgba(128, 128, 128, 0.49);
}

.voca-learn, .voca-test, .voca-exam{
	background-color: #f58634!important;
}

.flip-container {
    width: 100%;
    margin-bottom: 10px;
    perspective: 600;
    position: relative;
}
.flipper {
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.back, .front {
   height: 100%;
    width: 100%;
    display: block;
    position: relative;
    backface-visibility: hidden;
}
.front {
    /* background-color: red; */
}
.back {
    /* background-color: blue; */
    transform: rotateY(180deg);
}
.flipped {
    animation: spin180 1s 1 forwards;
}
.second-flip {
    animation: spin360 1s 1 forwards;
}

@keyframes spin180 {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes spin360 {
    0% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}
.display-none {
   display: none;
 	}
.display-block {
 	display: block;
}
.userAnswer {
 	color: blue!important;
}
.correctAnswer {
 	color: red!important;
}
.btn-te {
    text-align: center;
}
.btn-te a{
    padding: 6px 30px;
    min-width: 120px;
    margin: 5px 15px;
    background-color: #0073d0;
    color: white;
}
.btn-te .btn_orange_sm:hover {
    background: none !important;
    background-color: #f58634 !important;
    color: #fff !important;
    padding: 6px 30px;
    min-width: 120px;
}
.btn-anse {
	text-align: center;
}
.btn-anse .ui-widget-content {
  border: none !important;
  background: none !important;
}
.btn-anse .ui-panelgrid .ui-panelgrid-cell{
	border: none !important;
}
.btn-anse button {
    background: none;
    background-color: #008ef1;
    padding: 5px 10px;
    color: #fff;
    max-width: 170px;
    border: none;
    border-radius: 0px;
    min-width: 170px;
}
.btn-anse button:hover{
	padding: 5px 10px;
	color: #fff;
  		background: #f58634;
}
.btn-anse .ui-button-text-only .ui-button-text {
    padding: 1.3em 0em !important;
    max-height: 50px;
    min-height: 50px;
    vertical-align: middle;
    text-align: center;
}
/* 		, .ui-widget-content .ui-state-hover */
.btn-anse .ui-state-hover{
	border: none !important;
	background: none !important;
	background-color: none !important;
}
.asn-infor .ui-panelgrid .ui-panelgrid-cell{
	border: none !important;
}
.asn-infor .ui-widget-content{
	border: none !important;
	background: none !important;
}
.asn-infor .vocabulary-test-content td .ui-button {
	min-width: 200px;
}
.asn-infor .ui-button .ui-button-text {
    padding: 15px !important;
    overflow: hidden;
}
.asn-infor .ui-widget .ui-widget{
	margin: 0 auto;
}
.img-turn {
	position: absolute;
	right: 30px;
	bottom: 50px;
	text-align: center;
}
/*End*/

.f-test {
	position: relative;
}
.voca-timer {
	position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
    color: #c50404;
    font-weight: bold;
    border: 2px dotted #7cc764;
    border-radius: 50%;
    width: 30px;
}
.test-right {
	background-color: #1a9b3d !important;
}
.ui-inputtext.test-right, .ui-inputtext.test-choose {
	color: #fff !important;
}

.test-choose {
	background-color: red !important;
}

.asn-infor .ui-progressbar {
	background-color: #1cabc8 !important;
	margin-top: 20px !important;
}
.asn-infor .ui-progressbar .ui-progressbar-value {
	margin: unset;
	background-color: red;
}
.lbl-text-answer {
	display: inline-block;
	color: #115d22;
	width: 100%;
}
.frame-ques {
	height: 200px;
	overflow: hidden;
	overflow-y: auto;
}
.img-test {
    max-height: 230px;
    top: 0px;
    left: 20px;
    height: auto;
    width: auto;
}

@media ( max-width: 385px) {
	.simple-sub-btn .i-right i {
		display: none;
	}
}

@media ( max-width: 480px) {
	.asn-infor .vocabulary-test-content td .ui-button {
		min-width: 50px;
	}
}

@media ( max-width : 767px) {
	.vocabulary-content, .vocabulary-content .vocabulary > div:not(.clear):not(.img-turn) {
	    height: 500px !important;
	}
	.vocabulary-content .vocabulary-img img {
		max-width: 250px;
	}
	.back, .front {
	    position: absolute;
	}
	.flipped {
		position: relative;
	}
	.img-turn {
		position: relative;
        right: 10px;
    	float: right;
	}
}