@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
body {
	margin: 0;
	padding: 0;
	font-family: 'Nunito', sans-serif;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
h1, h2, h3, h4, h5 { font-family: 'Alice', serif }
a:hover { color: #c8a165 }
.mt5 { margin-top: 15px }
.mt10 { margin-top: 15px }
.mt15 { margin-top: 15px }
.mt25 { margin-top: 25px }
.mr15 { margin-right: 15px }
.mr25 { margin-right: 25px }

.pr5 { padding-right: 5px }
.pl5 { padding-left: 5px }

.flex_box { display: flex }
.text_center { text-align: center }
.btn {
	background-color: #ffe266;
	font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
	border-radius: 16px;
	padding: 5px 25px;
}
.btn:hover { background-color: #fed857 }

.wrap {
	width: 900px;
	margin: 0 auto;
}
.main_menu_area {
	padding: 15px 0;
	background-color: #f3f3f1;
	position: relative;
}
.main_menu_area .go_site {
    float: left;
    margin-left: 15px;
    text-decoration: none;
    color: #777;
}
.main_menu_area .go_site:hover { color: #333 }
.main_menu {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    align-content: center;
}
.main_menu a {
    list-style: none;
    display: flex;
    width: 100%;
    justify-content: center;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    padding: 0 10px;
    text-decoration: none;
    color: #333;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
	opacity: .6;
}
.main_menu a:hover,
.main_menu a.active { opacity: 1 } 
.main_menu a i {
    max-height: 48px;
    width: 48px;
    height: 48px;
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
}
.main_menu a span { margin-left: 10px }

.learn_area { padding: 25px 0 }
.card_box {
	border-radius: 35px;
	box-shadow: 0px 0px 30px 1px rgb(20 191 159 / 15%);
	padding: 15px;
}
.card_title {
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
    padding-bottom: 15px;
    font-size: 18px;
    position: relative;
}
.card_title:after {
    background: #eee none repeat scroll 0 0;
	margin: auto;
    right: 0;
    left: 0;
    bottom: 12px;
    content: "";
    height: 2px;
    position: absolute;
    width: 35px;
}
.card_box input[type=text],
.card_box input[type=password] {
    border: 1px solid #ffe266;
    width: 100%;
    border-radius: 25px;
    outline: none;
    padding: 10px 15px;
    font-size: 14px;
    margin: 5px 0;
}

.level_box {
	background-color: #f7f7f7;
	border: 2px solid #eee;
	border-radius: 16px;
	padding: 10px 0;
	margin-bottom: 25px;
}
.level_header {
	display: flex;
	position: relative;
	padding: 5px 15px;
	align-items: center;
	margin-bottom: 15px;
}
.level_header h4 {
	margin-left: 15px;
	margin-bottom: 0;
	flex: 1;
}
.level_header a {
	display: flex;
	text-decoration: none;
	padding: 5px;
	border-radius: 5px;
	width: 48px;
	height: 48px;
	justify-content: center;
	align-items: center;
	color: rgb(0, 0, 0, .3);
	font-size: 42px;
	font-weight: bold;
}
.level_header a:hover { color: #555 }
.level_icon {
	font-style: normal;
	padding: 5px 12px;
	border-radius: 10px;
	background-color: #82bf56;
	border-bottom: 3px solid #669644;
	color: #fff;
	font-size: 24px;
	font-weight: 900;
	font-family: 'Alice', serif;
	text-shadow: 0px -2px #669644;
}
.level_icon.a2 {
	background-color: #3498db;
	border-bottom: 3px solid #2980b9;
}
.level_tab_box {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.level_tab {
	margin: 0;
    padding: 0;
    text-align: right;
    width: max-content;
	background-color: #fff;
	border-radius: 14px;
}
.level_tab li {
	display: inline-block;
	list-style: none;
	text-align: center;
	padding: 5px 25px;
    display: inline-block;
    list-style: none;
    text-align: center;
    padding: 5px 25px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
	border-radius: 14px;
	cursor: pointer;
	position: relative;
}
.level_tab li:before {
    content: '';
    position: absolute;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
	background-color: #eee;
}
.level_tab li.active { background-color: #eee }
.level_tab li:hover:before,
.level_tab li.active:before { background-color: #fec007 }

.level_items { padding-top: 15px }
.lesson_block {
    width: 49%;
    display: inline-block;
    padding: 10px;
}
.lesson_btn {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 50px;
    align-items: center;
    box-shadow: 0px 0px 30px 1px rgb(0 0 0 / 6%);
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    z-index: 1;
	overflow: hidden;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}
.lesson_btn.complete { background-color: rgb(130, 191, 86, .1) }
.lesson_btn a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.lesson_btn:hover { background-color: rgb(0,0,0,.01) }
.lesson_btn em {
    position: absolute;
    display: block;
    height: 3px;
    left: 0;
    bottom: 0;
	width: 0;
	background-color: #82bf56;
}
.lesson_btn .lesson_title {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    color: #333;
}
.lesson_link {}
.lesson_icon {
    width: 20%;
    margin-right: 10px;
}
.lesson_icon img {
    max-width: 100%;
    border-radius: 10px;
}
.training_area {
	
}

.learn_categories {
	 display: flex;
	 flex-wrap: wrap;
}
.btn_learn_category_box {
    flex: 0 0 50%;
    width: 50%;
	margin-bottom: 15px;
}
.btn_learn_category {
    font-style: normal;
    padding: 25px;
    border-radius: 25px;
    background-color: #10be99;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    font-family: 'Alice', serif;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    height: 100%;
}
.btn_learn_category .btn_img_box {
    background-color: #fce36c;
    border-radius: 50%;
    margin: auto;
    min-width: 150px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_learn_category:hover .btn_img_box { box-shadow: 0px 0px 30px 1px rgb(252 227 108 / 50%) }
.btn_learn_category:hover { color: #def9f3 }
.btn_learn_category img {
    max-height: 100px;
    max-width: 100px;
}
.btn_learn_category:hover img {
    -webkit-filter: drop-shadow(0 0 .7px #777);
    filter: drop-shadow(0 0 .7px #777)
}
.word_btn:focus, .word_btn { background-color: rgb(255, 255, 255, .8) }

.grammar_block { width: 100% }
.grammar_box table {
    background-color: rgb(255, 255, 255, .8);
    margin: 10px auto;
}
.grammar_box table td {
	border: 1px solid #eee;
	padding: 10px;
}
.grammar_box {
	display: none;
	margin: 15px 0;
}
.grammar_box.show { display: block }
.content_box p.continue {
	margin: 25px 0 15px;
	text-align: center;
}
.content_box p.continue.hide {
	opacity: 0;
	pointer-events:none;
}

.continue a {
	margin: 15px auto;
    text-decoration: none;
    border-radius: 10px;
	background-color: #5f90c6;
	color: #fff!important;
	padding: 10px 35px;
	font-weight: 400;
	font-size: 18px;
	text-transform: uppercase;
	cursor: pointer;
	opacity: .8;
}
.continue a:hover { opacity: 1 }

.testing_box .tips {
	text-align: center;
	font-size: 20px;
	padding: 15px 0;
}
.testing_box .tips a {
	font-size: 18px;
	color: #777;
	cursor: pointer;
	text-decoration: none;
}
.testing_box .tips a:hover { color: #3498db }
.testing_box .tips a i {
	margin-right: 10px;
	color: #3498db;
}
.testing_box .quest_text {
	text-align: center;
	font-size: 32px;
	color: #555;
	margin-bottom: 5px;
}
.testing_box .quest_translation {
	text-align: center;
	font-size: 24px;
}
.testing_box .quest_text b.h {
	color: #f7f7f7;
	border-bottom: 5px dotted #555;
}
.testing_box .quest_text b.h.show {
	background-color: #82bf56;
	color: #fff;
	border-bottom: none;
}
.answers_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.answers_box a {
    position: relative;
    width: 300px;
    padding: 10px 0;
    text-align: center;
    color: #555;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 700;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
}
.answers_box a.valid_key {
	background-color: #82bf56;
    color: #fff;
	pointer-events:none;
}
.answers_box a.invalid_key {
	background-color: #ff637b;
    color: #fff;
}
.answers_box a i {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto;
    height: 18px;
}
.disabled { pointer-events:none }
.answers_box a:hover { background-color: #efefef }
.swal_guide { width: 55em!important }
.swal_guide table {
	background-color: #eee;
    margin: 10px auto;
}
.swal_guide table td {
	border: 1px solid #fff;
	padding: 10px;
}

.level_select_box { position: relative }
.level_select_box:hover .level_list { display: flex }
.level_list {
	display: none;
	flex-direction: column;
	padding: 10px;
	background-color: #fff;
	position: absolute;
	z-index: 999;
	border-radius: 10px;
	overflow: hidden;
	left: -100px;
	border: 1px solid #eee;
}
.level_list a {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 5px 0;
	text-decoration: none;
	border-bottom: 1px dashed #eee;
	width: max-content;
}
.level_list a:last-child { border-bottom: 1px solid #fff }

.phrases_table {
	display: flex;
	flex-direction: column;
	margin: 25px 15px;
	background-color: #fff;
	border-radius: 10px;
}
.phrases_table .phrase_audio { 
    width: 75px;
    display: flex;
    align-items: center;
}
.phrases_table .phrase_audio.disabled { opacity: .4 }
.phrases_table .audio {
    width: 32px;
    height: 32px;
	margin: 0 auto;
    display: block;
    cursor: pointer;
    color: rgb(126, 145, 159);
	border-radius: 5px;
}
.phrases_table .audio:hover { background-color: rgb(255, 255, 255, .5) }
.phrases_table audio { display: none}
.phrases_table .phrase_title {
	flex-grow: 10;
	font-size: 18px;
}
.phrases_table .phrase_title b {
	display: block;
    font-weight: 600;
    font-style: normal;
    color: #333;
}
.phrases_table .phrase_title i {
	display: block;
    font-weight: 600;
    font-style: normal;
    color: #555;
}
.phrases_table .phrases_box {
	border-bottom: 1px dashed #eee;
	display: flex;
}
.phrases_table .phrases_box:last-child { border: none }
.phrases_table .phrases_box div { padding: 10px 0 }
.phrases_table .phrases_box:hover { background-color: #efefef }
.phrases_table .phrases_box .phrase_translate {
    display: flex;
    align-items: center;
}
.phrases_table .phrases_box .phrase_translate a {
	width: 32px;
	height: 32px;
	display: inline-block;
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 5px;
	padding: 8px;
	border-radius: 5px;
	background-color: rgba(25,133,251,.08);
}
.phrases_table .phrases_box .phrase_translate a.google { background-image: url('/static/images/learn/google.png') }
.phrases_table .phrases_box .phrase_translate a.yandex { background-image: url('/static/images/learn/yandex.png') }

.task_box {
    display: flex;
    flex-wrap: wrap;
}
.task_btn {
    flex: 0 0 auto;
    width: 33.3333333333%;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
    text-align: center;
	cursor: pointer;
	position: relative;
}
.task_btn a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9;
}
.task_btn:hover .task_title {
	background-color: #fff;
	color: #333;
}
.task_btn .task_image img { width: 100% }
.task_btn .task_title {
    background-color: rgb(255, 255, 255, .7);
    border-bottom: 2px solid #fec007;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 5px;
    min-height: 75px;
	color: #555;
}
.task_btn .task_title.text_title {
    text-transform: none;
    line-height: 16px;
}

.swal_video { width: 50em!important }
.btn_start {
    font-style: normal;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #3498db;
    border-bottom: 3px solid #2980b9;
    text-shadow: 0px -2px #2980b9;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
}
.btn_start:hover {
	-webkit-filter: brightness(105%);
	filter: brightness(105%);
	color: #fff;
}
#video_box { text-align: center }
#video_box video {
    width: 600px;
    height: 340px;
    margin: 15px auto;
    object-fit: cover;
}

.clause_box { display:none }
.clause_box.showed { display: block }
.selected_area {
	height: 45%;
	max-height: 300px;
	margin: 15px;
}
.selected_box {
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
    position: relative;
	padding: 15px 10px;
	border-radius: 6px;
    min-height: 69px;
}

.tokens_list {
	width: 100%;
	display: table;
}
.tokens {
	width: 100%;
	padding: 0 15px;
	text-align: left;
	display: table;
}
.tokens .token_wrap {
	margin-right: 5px;
	margin-bottom: 5px;
	position: relative;
	display: inline-block;
	/* height: 33px; */
	/* width: 38px; */
	/* display: block; */
	float: left;
    min-width: 38px;
	height: 34px;
}
.tokens .token_shadow {
	padding: 0 9px;
	margin-right: 5px;
	border-radius: 7px;
	text-transform: uppercase;
	color: transparent;
	background-color: #f6f6f6;
	position: absolute;
	font-size: 18px;
    min-width: 38px;
	height: 26px;
}
.tokens .token_box {
    display: flex;
    align-items: center;
    min-width: 38px;
    height: 26px;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    padding: 0 10px;
    background-color: #3498db;
	color: #fff!important;
    border-radius: 7px;
    margin-right: 5px;
    margin-bottom: 9px;
    top: 0;
    left: 0;
    cursor: pointer;
    font-size: 18px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}

.verify_box {
	display: table;
	width: 100%;
	padding: 25px 0;
	margin-top: 25px;
}
.verify_button {
    font-style: normal;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #3498db;
    border-bottom: 3px solid #2980b9;
    text-shadow: 0px -2px #2980b9;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
}
.verify_button:hover {
	color: #fff;
	-webkit-filter: brightness(105%);
	filter: brightness(105%);
}
.tokens .token_box:hover {
    -webkit-filter: brightness(115%);
    filter: brightness(115%);
}
.tokens .token_box.success { background-color: #90c65f }

.kaz_text, .rus_text {
    display: block!important;
    float: left;
}
.text_box { padding: 25px 0 }
.text_box p { text-align: justify }
.text_box em {
	font-style: normal;
	word-break: normal;
	position: relative;
}
.text_box em.hover,
.text_box em:hover {
	cursor: pointer;
	color: #fff;
	background-color: #82bf56;
}
.text_box em.down {
	color: #fff;
	background-color: #82bf56;
}

.sign_up,
.forgot_password {
    font-size: 14px;
    display: block;
    text-align: left;
    text-decoration: none;
    color: #5f90c6;
    cursor: pointer;
}
.sign_up { display: inline }
.sign_up_box {
	font-size: 14px;
    border-top: 1px dotted #ccc;
	margin-top: 15px;
    padding-top: 10px;
}

.card_body { position: relative }
.sign_error_box {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: absolute;
	z-index: 9;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background-color: rgb(255, 255, 255, .9);
}
.sign_error_box p {
	font-size: 18px;
	color: #e46a76;
}
.sign_error_box a {
	background-color: #eee;
	padding: 5px 25px;
	border-radius: 15px;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
}
.sign_error_box.show { display: flex }

.form_box {
	display: none;
}
.form_data { margin-bottom: 15px }
.form_data.invalid { border-color: #fc5b62 }

.img_crop_wrap.hide,
.img_upload.hide { display: none }
.img_upload.avatar { max-width: 205px }
.img_upload {
	position: relative;
	margin: 0 auto;
}
.img_upload .img_edit {
    position: absolute;
    right: 10px;
    z-index: 1;
    bottom: 7px;
}
.img_upload.avatar .img_edit { right: 25px }
.img_upload .img_edit label:hover {
	background: #f1f1f1;
	border-color: #d6d6d6;
}
.img_upload .img_edit input { display: none }
.img_upload .img_edit input + label {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 0;
	background: #fff;
	border-radius: 100%;
	border: 1px solid transparent;
	box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 12%);
	cursor: pointer;
	font-weight: normal;
	transition: all 0.2s ease-in-out;
}
.img_upload.circle .img_edit input + label { border-radius: 100% }

.img_upload .img_preview {
    position: relative;
    border: 6px solid #f8f8f8;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
}
.img_upload.avatar .img_preview {
    width: 192px;
    height: 192px;
}
.img_upload.circle .img_preview { border-radius: 100% }
.img_upload .img_preview .preview_box {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.img_upload.circle .img_preview .preview_box{ border-radius: 100% }

.img_crop_wrap {
	position: relative;
    width: max-content;
    margin: 0 auto;
}
.img_crop_wrap .img_remove {
    position: absolute;
    top: 10px;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #fff;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 12%);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
    z-index: 2;
}
.img_crop_wrap.avatar .img_remove {
	display: flex;
	align-items: center;
	justify-content: center;
	right: 70px;
	color: #e46a76;
}
.img_crop_wrap .img_remove:hover {
	background: #f1f1f1;
	border-color: #d6d6d6;
}

.croppie-container .cr-boundary { border: 3px solid #ccc }
.croppie-container .cr-resizer, .croppie-container .cr-viewport { border: none }

.swal_user { width: 50em!important }
.flex { display: flex!important }
div.spinner {
	position: relative;
	width: 54px;
	height: 54px;
	display: inline-block;
	padding: 10px;
}
.form_loading {
	position: absolute;
	z-index: 99999;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	justify-content: center;
	align-items: center;
	display: flex;
	background-color: rgb(255, 255, 255, .6);
	display: none;
}
div.spinner {
	position: relative;
	width: 100px;
	height: 100px;
	display: inline-block;
	padding: 10px;
	border-radius: 10px;
}
div.spinner div {
	width: 6%;
	height: 16%;
	background: #ccc;
	position: absolute;
	left: 49%;
	top: 43%;
	opacity: 0;
	-webkit-border-radius: 50px;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	-webkit-animation: fade 1s linear infinite;
}
@-webkit-keyframes fade {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.25;
	}
}
div.spinner div.bar1 {
	-webkit-transform: rotate(0deg) translate(0, -130%);
	-webkit-animation-delay: 0s;
}
div.spinner div.bar2 {
	-webkit-transform: rotate(30deg) translate(0, -130%);
	-webkit-animation-delay: -0.9167s;
}
div.spinner div.bar3 {
	-webkit-transform: rotate(60deg) translate(0, -130%);
	-webkit-animation-delay: -0.833s;
}
div.spinner div.bar4 {
	-webkit-transform: rotate(90deg) translate(0, -130%);
	-webkit-animation-delay: -0.7497s;
}
div.spinner div.bar5 {
	-webkit-transform: rotate(120deg) translate(0, -130%);
	-webkit-animation-delay: -0.667s;
}
div.spinner div.bar6 {
	-webkit-transform: rotate(150deg) translate(0, -130%);
	-webkit-animation-delay: -0.5837s;
}
div.spinner div.bar7 {
	-webkit-transform: rotate(180deg) translate(0, -130%);
	-webkit-animation-delay: -0.5s;
}
div.spinner div.bar8 {
	-webkit-transform: rotate(210deg) translate(0, -130%);
	-webkit-animation-delay: -0.4167s;
}
div.spinner div.bar9 {
	-webkit-transform: rotate(240deg) translate(0, -130%);
	-webkit-animation-delay: -0.333s;
}
div.spinner div.bar10 {
	-webkit-transform: rotate(270deg) translate(0, -130%);
	-webkit-animation-delay: -0.2497s;
}
div.spinner div.bar11 {
	-webkit-transform: rotate(300deg) translate(0, -130%);
	-webkit-animation-delay: -0.167s;
}
div.spinner div.bar12 {
	-webkit-transform: rotate(330deg) translate(0, -130%);
	-webkit-animation-delay: -0.0833s;
}

.swal2-actions { z-index: 0!important }
.form-control:focus {
	box-shadow: none!important;
	border-color: #999!important;
}
.nice-select { border: solid 1px #ced4da!important }

.user_box {
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
}
.user_box img {
	width: 50px;
	border-radius: 50%;
	margin-right: 10px;
}
.user_box a.sign_out {
	display: block;
	cursor: pointer;
	color: #ff637b!important;
	text-decoration: none;
	font-size: 14px;
}
.user_box a.sign_out:hover { text-decoration: underline!important }

.training_info {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.training_info>span{ flex-grow: 1 }
.training_info .info_icon {
    display: block;
    background-color: #14bf9f;
	max-width: 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 15px;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.training_info .info_title {
	font-size: 18px;
	flex-grow: 10;
}
.training_info .info_val {
	font-weight: bold;
	font-size: 24px;
	text-align: left;
}
.learning_info .info_icon { background-image: url(/assets/images/learning.svg) }
.memorization_info .info_icon { background-image: url(/assets/images/memorization.svg) }
.repetition_info .info_icon { background-image: url(/assets/images/repetition.svg) }
.audition_info .info_icon { background-image: url(/assets/images/audition.svg); background-color: #90c65f }
.writing_info .info_icon { background-image: url(/assets/images/writing.svg); background-color: #90c65f }
.fastening_info .info_icon { background-image: url(/assets/images/fastening.svg); background-color: #ff637bs }

.lang_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.lang_box a {
    margin: 0 5px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    border-radius: 10px;
    background-color: #fff;
	cursor: pointer;
}
.lang_box a.active {
	padding: 0 10px;
	background-color: #eee;
}
.lang_box a:hover { background-color: #f6f6f6 }
._hello_box { display: none } 
.hello_box { background: #14bf9f!important }
.hello_box .language_select_box {
    display: flex;
    flex-flow: wrap;
}
.hello_box .language_select_box a {
    display: flex;
    width: 50%;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    margin-bottom: 5px;
    cursor: pointer;
    text-decoration: none;
    color: #555;
    background: #fffef8;
    border: 1px solid #f5e671;
}
.hello_box .language_select_box a.current {
	color: #555;
	background-color: #ffe665;
}
.hello_box .language_select_box a.current:hover { background-color: #fce36c }
.hello_box .language_select_box a:hover { background-color: #fde06a }
.hello_box .language_select_box a img { max-width: 28px }
.hello_box .language_select_box a span {
	margin-left: 15px;
	font-weight: 600;
}

.hello_box .level_select_box {
    text-align: left;
    font-weight: 700;
    padding: 15px 10px;
    background-color: rgb(0, 0, 0, .04);
    border-radius: 15px;
}
.hello_box .level_select_box a {
    display: block;
    padding: 5px;
    cursor: pointer;
	border-radius: 5px;
	text-decoration: none;
    background: rgb(255,255,255, .5);
    margin-bottom: 5px;
	color: #555;
}
.hello_box .level_select_box a.current {
	color: #555;
	background-color: #fde06a;
}
.hello_box .level_select_box a.current:hover { background-color: #fde06a }
.hello_box .level_select_box a:hover { background-color: #fde06a }
.hello_box .level_select_box a span { display: none }
.hello_box .level_select_box a span.current { display: block }

.hello_box .learn_start {
    display: block;
    width: 50%;
    padding: 5px;
    margin: 15px auto;
    cursor: pointer;
    border-radius: 15px;
    text-decoration: none;
    background-color: #fce36c;
    color: #555;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 24px;
}
.hello_box .learn_start.disabled {
	pointer-events: none;
	opacity: .5;
}
.hello_box .learn_start span { display: none }
.hello_box .learn_start span.current { display: block }
#sign_in {
    font-size: 18px;
    border-radius: 25px;
    padding: 5px 45px;
}