@charset "utf-8";

/*==================================
	base
==================================*/
*{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
	/* font-feature-settings: "palt"; */
	word-break:normal;
	word-wrap:break-word;
}
html{
	font-size:16px;
}
body{
	font-size:1rem;
	background-color:#f8f9fb;
	color: #576574;
}
body.body-white{
	background-color: #fff;
}
body.body-lesson{
	background-color:#fff;
}
body.body-lesson .main,
body.body-monitor .main{
	padding: 25px 20px;
}

/*
 * クラスのサイドナビゲーションなしのページ(ベース)
 */
body:not(.body-lesson):not(.body-is-left-nav) header,
body:not(.body-lesson):not(.body-is-left-nav) footer,
body:not(.body-lesson):not(.body-is-left-nav) .main{
	min-width: 920px;
}
body:not(.body-lesson):not(.body-is-left-nav) .main{
	width: 920px;
}

/*
 * クラスのサイドナビゲーションありのページ(先生 クラスのベース)
 */
body.body-is-left-nav header,
body.body-is-left-nav footer,
body.body-is-left-nav .main{
	min-width:1420px;
}
body.body-is-left-nav .main{
	width: 1130px;
}

/*
 * 例外１：トップページ（やや幅が広いページ）
 */
body.body-lg:not(.body-lesson):not(.body-is-left-nav) header,
body.body-lg:not(.body-lesson):not(.body-is-left-nav) footer,
body.body-lg:not(.body-lesson):not(.body-is-left-nav) .main{
	min-width: 1420px;
}
body.body-lg:not(.body-lesson):not(.body-is-left-nav) .main{
	width: 1420px;
}

/*
 * 例外２：モニターページ
 */
body.body-is-left-nav.body-monitor header,
body.body-is-left-nav.body-monitor footer,
body.body-is-left-nav.body-monitor .main{
	min-width: 1650px;
}
body.body-is-left-nav.body-monitor .main{
	width: 1320px;
}

/*
 * 例外３：レッスン画面（サイドメニューなし）
 */
body.body-lesson:not(.body-is-left-nav) header,
body.body-lesson:not(.body-is-left-nav) footer,
body.body-lesson:not(.body-is-left-nav) .main{
	min-width: 1320px;
}
body.body-lesson:not(.body-is-left-nav) .main{
	width: 1320px;
}
/*
 * 例外４：レッスン画面（サイドメニューあり）
 */
 body.body-lesson.body-is-left-nav header,
 body.body-lesson.body-is-left-nav footer,
 body.body-lesson.body-is-left-nav .main{
 	min-width: 1620px;
 }
 body.body-lesson:not(.body-is-left-nav) .main{
 	width: 1320px;
 }

/*==================================
	text
==================================*/
p{
	line-height:1.7;
}
.p-introduction{
	font-size: 1.07rem;
  margin-bottom: 10px;
  margin-left: 10px;
	/*
	font-size:1.3125rem;
	margin-bottom:30px;
	*/
	color:#222f3e;
}
.ellipsis{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.text-danger{
	color: #ee5253 !important;
}
.text-success{
	color: #10ac84 !important;
}
.text-primary{
	color: #2e86de !important;
}
.text-primary-light{
	color: #54A0FF !important;
}
.text-secondary{
	color: #576574 !important;
}
.text-emerald{
	color: #1dd1a1 !important;
}
.text-mossgreen{
	color: #01A3A4 !important;
}
.text-muted{
	color: #8095a8 !important;
}
.text-info{
	color: #0ABDE3 !important;
}
.text-warning{
	color: #FECA57 !important;
}
.text-danger-light{
	color: #FF6B6B !important;
}
.text-xs{
	font-size:.75rem !important;
}
.text-sm{
	font-size:.875rem !important;
}
.text-md{
	font-size:1rem !important;
}
.text-lg{
	font-size:1.125rem !important;
}
.text-ll{
	font-size:1.375rem !important;
}
.text-xl{
	font-size:1.5rem !important;
}
.text-xsl{
	font-size:1.625rem !important;
}
.text-xml{
	font-size:1.75rem !important;
}
.text-xxl{
	font-size:1.875rem !important;
}
.text-xxxl{
	font-size:2rem !important;
}
a:not(.mx-btn){
	color:#2e86de;
}
a:not(.mx-btn):hover{
	color:#54a0ff;
}
.line-height-unset{
	line-height: unset !important;
}
.text-normal{
	font-weight: 300 !important;
}

/*==================================
	bg color
==================================*/
.bg-primary-light{
	background-color: #54A0FF !important;
}
.bg-success{
	background-color: #10ac84 !important;
}
.bg-success-light{
	background-color: #1dd1a1 !important;
}
.bg-disabled{
	background-color: #c8d6e5 !important;
}
.bg-warning{
	background-color: #feca57 !important;
}
.bg-orange{
	background-color: #ff9f43 !important;
}
.bg-danger-light{
	background-color: #ff6b6b !important;
}
.bg-danger{
	background-color: #ee5253 !important;
}
.bg-secondary{
	background-color: #8393a6 !important;
}
.bg-info{
	background-color: #0abde3 !important;
}

/*==================================
	error message
==================================*/
.div-errors{
	display:none;
}
.div-errors .error-message{
	font-size:.875rem;
	color:#e11920;
}
.div-errors .error-message{
	padding-left:30px;
	background-repeat:no-repeat;
	background-size:20px;
	background-position:left 1px;
	background-image:url(../images/icons/svg/icon_warning.svg);
}
.form-control-error{
	border:1px solid #e11920 !important;
}

/*==================================
	page container
==================================*/
html,
body{
	height:100%;
}
.mx-container {
	min-height: 100%;
	height: auto;
	position: relative;
	padding-top:85px;
}
.mx-screen {
	padding-bottom: 60px;
}

/*==================================
	common object style
==================================*/
hr{
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-top: 1px solid #c8d6e5;
}
.a-download{
	display: inline-block;;
	padding-left: 28px;
	background-repeat: no-repeat;;
	background-position: left center;
	background-size: 20px;
	background-image: url(../images/icons/svg/icon_download_primary.svg);
}
.scroll-y{
	overflow-y: scroll;
}
.count-down-div{
    font-size: 80px;
    text-align: center;
}
/*==================================
	footer
==================================*/
footer{
	height: 60px;
	width: 100%;
	position: absolute;
	padding:15px 25px;
	bottom: 0;
	background-color:#f0f0f0;
	z-index:1020;
}
footer .copyright{
	font-size:.75rem;
	margin:0;
	color:#8395a7;
}

/*==================================
	header
==================================*/
header{
	border-top:5px solid #2e86de;
	background-color:#fff;
	border-bottom:5px solid #f7f8fa;
	position:fixed;
	z-index:1020;
	top:0;
	left:0;
	right:0;
	height:85px;
}
header.admin-header{
	border-top:5px solid #00d2d3;
}
header.student-header,
header.guest-header{
	border-top:5px solid #ee5253;
}
header.do-header{
	height: 5px;
	border-bottom: none;
	position: static;
}
header .navbar{
	padding:12px 30px;
}
header .navbar .navbar-brand,
header .navbar-menu,
header .navbar-user-info{
	background-image:url(../images/icons/svg/line.svg);
	background-repeat:no-repeat;
	background-size:auto 32px;
}
header .navbar-menu,
header .navbar-user-info{
	background-position:left center;
}
header .navbar .navbar-brand{
	color:#576574;
	font-size:1.5rem;
	font-weight:700;
	padding:0 20px 0 0;
	line-height:1.3;
	margin-right:20px;
	background-position:right center;
	vertical-align:middle;
}
header .navbar .navbar-brand *{
	display:block;
}
header .navbar .navbar-brand .brand-name{
	color:#8395a7;
	font-size:1rem;
	vertical-align:middle;
}
header .div-class-name{
	display:none;
}
header .div-class-name a{
	font-size:1.3125rem;
	color:#8395a7 !important;
	text-decoration: none !important;
}
body.body-is-class header .div-class-name{
	display:inline-block;
}
header .navbar-timer,
header .navbar-menu,
header .navbar-user-info{
	display:inline-block;
	vertical-align:middle;
}
header .navbar-right{
	background-position:left center;
}
header .navbar-timer{
	/*display: none;*/
	min-height: 32px;
	margin-right: 15px;
	min-width: 75px;
}
.accepting-header-view,
.attend-header-view{
	display: inline-block;
}
header .navbar-timer .badge{
	display: inline-block;
	vertical-align: top;
	min-width: 100px;
	height: 24px;
	line-height: 24px;
	padding: 0 15px;
	border-radius: 3px;
	font-size: .875rem;
	font-weight: 300;
	position: relative;
	top: 2px;
}
header .navbar-timer.navbar-class-regist-timer .badge{
	color: #fff;
	background-color: #feca57;
}
header .navbar-timer.navbar-class-attend-timer .badge,
header .navbar-timer.navbar-class-accepting-timer .badge,
header .navbar-timer.navbar-class-quiz-do-timer .badge{
	color: #fff;
	background-color: #1dd1a1;
}
header .navbar-timer.navbar-class-agent-timer .badge,
header .navbar-timer.navbar-class-lock-timer .badge,
header .navbar-timer.navbar-class-senddesktop-timer .badge,
header .navbar-timer.navbar-class-allcall-timer .badge{
	color: #fff;
	background-color: #ee5253;
}
header .navbar-timer.navbar-class-classwork-timer .badge{
	color: #fff;
	background-color: #feca57;
}
header .navbar-timer.navbar-class-classwork-attend-timer .badge{
	color: #fff;
	background-color: #1dd1a1;
}
header .navbar-timer .div-reception-timer,
header .navbar-timer .div-common-timer{
	margin-bottom: 0;
	text-align: left;
	display: inline-block;
	margin: 0 -5px 0 10px;
	min-width: 65px;
}
header .div-common-timer .timer > .jst-hours,
header .div-common-timer .timer > .jst-minutes,
header .div-common-timer .timer > .jst-seconds{
	display: inline-block;
}
header .navbar-timer .div-reception-timer .timer > .jst-hours,
header .navbar-timer .div-reception-timer .timer > .jst-minutes,
header .navbar-timer .div-reception-timer .timer > .jst-seconds,
header .navbar-timer .div-common-timer .timer > .jst-hours,
header .navbar-timer .div-common-timer .timer > .jst-minutes,
header .navbar-timer .div-common-timer .timer > .jst-seconds{
	font-size: 1.25rem;
	color: #1dd1a1;
}
header .div-common-timer .timer > .jst-hours,
header .div-common-timer .timer > .jst-minutes{
	min-width: 37px;
}
header .div-common-timer .timer > .jst-seconds{
	min-width: 30px;
}
header .navbar-menu{
	min-height:32px;
	padding: 0 20px 0 25px;
}
header .navbar-menu .navbar-menu-item{
	margin-right:20px;
	position:relative;
	z-index:1;
	display:inline-block;
}
header .navbar-menu .navbar-menu-item:last-child{
	margin-right:0;
}
header .navbar-menu .navbar-menu-item img{
	max-height:30px;
	width:auto;
}
header .navbar-menu-item-myword{
	margin-right:20px;
	position:relative;
	z-index:1;
	display:inline-block;
}
header .navbar-menu-item-myword:last-child{
	margin-right:0;
}
header .navbar-menu-item-myword img{
	max-height:30px;
	width:auto;
}
header .navbar-menu .navbar-menu-item.active::before{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	z-index: 1;
	border-radius: 8px;
	background-color: #ee5253;
	left: 16px;
	top: 10px;
	border: 2px solid #fff;
	box-sizing: content-box;
}
header .navbar-user-info{
	position:relative;
	cursor:pointer;
	padding-left: 20px;
}
header.guest-header .navbar-user-info{
	background-image: none;
}
header .navbar-user-info .span-user-name,
header .navbar-user-info .div-thumbnail,
header .navbar-user-info .div-user-name{
	font-size:1rem;
	font-weight:700;
	display:inline-block;
	vertical-align:middle;
}
header .navbar-user-info .span-user-name{
	margin-right:20px;
}
header .div-dropdown-details{
	position:absolute;
	z-index:10;
	min-width:300px;
	max-width:500px;
	border:1px solid #d8d9da;
	right:0;
	top:80px;
	background-color:#fff;
	display:none;
	cursor:default;
}
header .div-dropdown-details-body{
	position:relative;
}
header .div-dropdown-details-body::before{
	content:'';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 12.5px 19px 12.5px;
	border-color: transparent transparent #d8d9da transparent;
	position: absolute;
	z-index: 1;
	top: -19px;
	right: 4px;
}
header .div-dropdown-details-body::after{
	content:'';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 11.5px 17px 11.5px;
	border-color: transparent transparent #ffffff transparent;
	position: absolute;
	z-index: 2;
	top: -17px;
	right: 5px;
}
header .div-dropdown-details-header{
	padding:15px 20px 15px 112px;
	border-bottom:2px solid #c8d6e5;
	min-height:112px;
	position:relative;
}
header .div-dropdown-details-header .div-thumbnail{
	position:absolute;
	z-index:1;
	left:20px;
	top:50%;
	margin-top:-36px;
}
header .div-dropdown-details-header .div-user-email{
	color:#999;
	font-weight:400;
	font-size:.875rem;
	margin-bottom:10px;
}
header .div-dropdown-details .list-group{
	overflow-y: auto;
}
header .div-dropdown-details .list-group-item{
	border:none;
	border-bottom:1px solid #c8d6e5;
	color:#576574;
	font-weight:700;
	padding:19px 20px 19px 70px;
	position:relative;
	font-size:.875rem;
	margin-bottom:0;
}
header .div-dropdown-details .list-group-item .div-thumbnail,
header .div-dropdown-details .list-group-item img.list-group-item-left-content{
	position:absolute;
	z-index:1;
	left:20px;
	top:50%;
}
header .div-dropdown-details .list-group-item .div-thumbnail{
	margin-top:-16px;
}
header .div-dropdown-details .list-group-item img.list-group-item-left-content{
	max-height:36px;
	max-width:40px;
	height:auto;
	width:auto;
	margin-top:-16px;
}
header .div-dropdown-details-footer{
	padding:15px 20px;
}

/*==================================
	main column
==================================*/
.main{
	padding:25px 20px;
	margin:0 auto;
}
.main.main-padding-top-sm,
.main.padding-top-sm{
	padding-top: 25px !important;
}
.main .main-body{
	width:1090px;
	margin:0 auto;
}
.main .main-body-sm{
	width:880px;
    margin: 0 auto;
}
.main .main-body-lg{
	width:1280px;
    margin: 0 auto;
}
.main .row{
	justify-content: space-between;
}
.main .row,
.main .row > .col-left,
.main .row > .col-right{
	margin:0;
	padding:0;
}
.main .row > .col-left{
	flex-basis:74%;
	max-width:74%;
}
.main .row > .col-right{
	flex-basis:24%;
	max-width:24%;
}

/*==================================
	login
==================================*/
.mx-login-container{
	margin:70px auto;
	width:540px;
}
.div-form-login{
	border-radius:10px;
	background-color:#fff;
	border:1px solid #c8d6e5;
	padding:50px 90px;
}
.div-form-login h1,
.div-form-login h2,
.div-form-login .p-description{
	text-align:center;
}
.div-form-login h1{
	font-size:1.5rem;
	margin-bottom:35px;
}
.div-form-login h1 strong{
	display:block;
}
.div-form-login h1 img{
	width:173px;
	height:auto;
}
.div-form-login h2{
	font-size:2rem;
}
.div-form-login .p-description{
	margin-bottom:40px;
}
.div-form-login .small-label{
	line-height:2rem;
	font-size:1rem;
	margin-bottom:5px;
	display:block;
}
.div-form-login .small-label-password{
	margin-top:20px;
}
.div-form-login .form-control{
	height:60px;
	line-height:40px;
	padding:10px 20px;
	font-size:1.3125rem;
	color:#576574 !important;
	background-position:14px center;
	background-repeat:no-repeat;
}
.div-form-login .form-control.form-loginid{
	background-size:25px auto;
	background-image:url(../images/icons/svg/icon_form_user.svg);
}
.div-form-login .form-control.form-password{
	margin-bottom:10px;
	background-size:26px auto;
	background-image:url(../images/icons/svg/icon_form_locked.svg);
}
.div-form-login .form-control:focus,
.div-form-login .form-control.is-value{
	background-image:none;
}
.div-form-login .form-control label{
	margin-bottom:15px;
}
.div-form-login .div-flex{
	display:flex;
	justify-content:flex-start;
}
.div-form-login .div-flex a:first-child{
	margin:0 auto 0 0;
	line-height:60px;
}
.div-form-login .div-flex .mx-btn{
	flex-basis:200px;
	height:60px;
	font-size:1.5rem;
}

/*==================================
	side menu
==================================*/
.col-right .card.mx-parent-card{
	margin-bottom:30px;
}
.col-right .section-header{
	min-height:35px;
	border-bottom:1px solid #c8d6e5;
	color:#c8d6e5;
	font-weight:700;
	padding:.3rem 0;
}
.col-right .div-section-items .div-section-item{
	padding:20px 0;
	border-bottom:1px solid #c8d6e5;
}
.col-right .div-section-items .div-section-item .div-section-date{
	margin-bottom:10px;
}
.col-right .div-section-items .div-section-item .div-section-message{
	margin-bottom:5px;
}
.col-right .section-informations .div-section-items .div-post-information dl{
	margin-bottom:0;
}
.col-right .section-informations .div-section-items .div-post-information dl dt,
.col-right .section-informations .div-section-items .div-post-information dl dd{
	float:left;
	font-weight:400;
}
.col-right .section-informations .div-section-items .div-post-information dl dt{
	width:3.5rem;
}
.col-right .section-informations .div-section-items .div-post-information dl dd{
	margin-bottom:0;
	width:calc(100% - 3.5rem);
}
.col-right .section-informations .div-section-items .div-section-item .div-section-message{
	margin-bottom:20px;
}

/*==================================
	class left nav
==================================*/
body.body-is-left-nav .main{
	padding-left:320px;
}
body.body-is-left-nav .div-left-nav{
	width:300px;
	position:fixed;
	z-index:12;
	top:85px;
	bottom:0;
	left:0;
	background-color:#fff;
}
.nav-header{
	padding:20px;
	position:relative;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-image: url(../images/jpg/side_bg.jpg);
}
.nav-header .stop-barrage{
	content:'';
	position:absolute;
	z-index:3;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:none;
}
.nav-header .nav-header-bg-gradient{
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.13) 0%,rgba(0, 0, 0, 0.57) 100%);
	position:absolute;
	z-index:1;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
.nav-header .nav-header-content{
	position:relative;
	z-index:2;
}
.nav-header .nav-header-class-name,
.nav-header .nav-header-class-room-name{
	color:#fff;
}
.nav-header .nav-header-class-name{
	font-weight:700;
}
.nav-header .nav-header-class-room-name{
	min-height: 21px;
}
.nav-header .img-nav-toggle-container{
	margin-bottom:2px;
}
.nav-header .img-nav-toggle{
	cursor:pointer;
}
.nav-header .nav-header-search-members{
	margin-top:20px;
}
.nav-header .nav-header-search-members .form-control{
	width:215px;
	padding-left: 35px;
	background-repeat: no-repeat;;
	background-image: url(../images/icons/svg/icon_search.svg);
	background-size: 16px;
	background-position: 10px center;
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
}
.div-left-nav .nav-contents{
	height:100%;
}
.div-left-nav .nav-body{
	overflow-y: auto;
}
.div-left-nav #scrollY{
	position:relative;
}
.div-left-nav .list-group .list-group-item{
	border:none;
	height:72px;
	padding:10px 0;
	color:#555;
}
.div-left-nav .list-group .list-group-item:hover{
	background-color:transparent;
}
.div-left-nav .list-group .list-group-item.active{
	background-color:#ebebeb;
	z-index:unset;
}
.div-left-nav .list-group .list-group-item.submitted{
	background-color: #e2f5f2;
}
.div-left-nav .list-group .list-group-item .list-group-item-left,
.div-left-nav .list-group .list-group-item .list-group-item-right{
	float:left;
}
.div-left-nav .list-group .list-group-item .list-group-item-left{
	position:relative;
	width:29%;
	text-align:center;
}
.div-left-nav .list-group .list-group-item .list-group-item-right{
	width:71%;
	padding-right:10px;
}
.div-left-nav .list-group .list-group-item .div-member-thumbnail{
	width:52px;
	height:52px;
	line-height: 52px;
	color: #fff;
	font-size: 1.375rem;
	position: relative;
}
.div-left-nav .list-group .list-group-item .div-member-thumbnail::before{
	content: '';
	width: 14px;
	height: 14px;
	position: absolute;
	z-index: 1;
	border-radius: 8px;
	background-color: #eee;
	right: -6px;
	bottom: -1px;
	border: 2px solid #fff;
	box-sizing: content-box;
}
.div-left-nav .list-group .list-group-item.unset-thumbnail .div-member-thumbnail{
	background-image: none !important;
}
.div-left-nav .list-group .list-group-item.status-online .div-member-thumbnail::before{
	background-color: #10ac84;
}
.div-left-nav .list-group .list-group-item.status-online-nonattend .div-member-thumbnail::before{
	background-color: #ee9753;
}
.div-left-nav .list-group .list-group-item.status-offline .div-member-thumbnail::before{
	background-color: #ee5253;
}
.div-left-nav .list-group .list-group-item.status-instant .div-member-thumbnail::before{
	background-color: #a2d0ff;
}
.div-left-nav .list-group .list-group-item.done .div-thumbnail.div-member-thumbnail,
.div-left-nav .list-group .list-group-item.is-listening .div-thumbnail.div-member-thumbnail,
.div-left-nav .list-group .list-group-item.is-reading .div-thumbnail.div-member-thumbnail,
.div-left-nav .list-group .list-group-item.is-writing .div-thumbnail.div-member-thumbnail,
.div-left-nav .list-group .list-group-item.is-speaking .div-thumbnail.div-member-thumbnail,
.div-left-nav .list-group .list-group-item.is-alldone .div-thumbnail.div-member-thumbnail,
.div-left-nav .list-group .list-group-item.is-alldone-success .div-thumbnail.div-member-thumbnail{
	background-size: 52px;
}
.div-left-nav .list-group .list-group-item.done .div-thumbnail.div-member-thumbnail{
	background-image: url(../images/icons/svg/icon_user_checkdone.svg) !important;
}
.div-left-nav .list-group .list-group-item.is-listening .div-thumbnail.div-member-thumbnail{
	background-image: url(../images/icons/svg/icon_user_listening.svg) !important;
}
.div-left-nav .list-group .list-group-item.is-reading .div-thumbnail.div-member-thumbnail{
	background-image: url(../images/icons/svg/icon_user_reading.svg) !important;
}
.div-left-nav .list-group .list-group-item.is-writing .div-thumbnail.div-member-thumbnail{
	background-image: url(../images/icons/svg/icon_user_writing.svg) !important;
}
.div-left-nav .list-group .list-group-item.is-speaking .div-thumbnail.div-member-thumbnail{
	background-image: url(../images/icons/svg/icon_user_speaking.svg) !important;
}
.div-left-nav .list-group .list-group-item.is-alldone .div-thumbnail.div-member-thumbnail{
	background-image: url(../images/icons/svg/icon_user_alldone.svg) !important;
}
.div-left-nav .list-group .list-group-item.is-alldone-success .div-thumbnail.div-member-thumbnail{
	background-image: url(../images/icons/svg/icon_user_alldone_success.svg) !important;
}
.div-left-nav .list-group .list-group-item.done .div-thumbnail.div-member-thumbnail::before,
.div-left-nav .list-group .list-group-item.is-listening .div-thumbnail.div-member-thumbnail::before,
.div-left-nav .list-group .list-group-item.is-reading .div-thumbnail.div-member-thumbnail::before,
.div-left-nav .list-group .list-group-item.is-writing .div-thumbnail.div-member-thumbnail::before,
.div-left-nav .list-group .list-group-item.is-speaking .div-thumbnail.div-member-thumbnail::before,
.div-left-nav .list-group .list-group-item.is-alldone .div-thumbnail.div-member-thumbnail::before,
.div-left-nav .list-group .list-group-item.is-alldone-success .div-thumbnail.div-member-thumbnail::before{
	display: none;
}
.div-left-nav .list-group .list-group-item .list-group-member-name{
	line-height:52px;
	cursor:pointer;
}
.div-left-nav .list-group .list-group-item .list-group-member-file-icon{
	position:absolute;
	z-index:1;
	right:25px;
	top:50%;
	margin-top:-12.5px;
}
body.body-is-left-nav.body-left-nav-sm .div-left-nav{
	width:87px;
}
body.body-is-left-nav.body-left-nav-sm .div-left-nav .nav-header{
	width:52px;
	padding:0;
	border-radius:52px;
	margin:10px 17.5px;
	overflow:hidden;
}
body.body-is-left-nav.body-left-nav-sm .div-left-nav .img-nav-toggle{
	padding:18.5px 16px;
	width:52px;
	height:52px;
}
body.body-is-left-nav.body-left-nav-sm .div-left-nav .nav-header-content .nav-header-class-name,
body.body-is-left-nav.body-left-nav-sm .div-left-nav .nav-header-content .nav-header-class-room-name,
body.body-is-left-nav.body-left-nav-sm .div-left-nav .nav-header-content .nav-header-search-members,
body.body-is-left-nav.body-left-nav-sm .div-left-nav .nav-body .list-group-item-right{
	display:none;
}
body.body-is-left-nav.body-left-nav-sm .div-left-nav .list-group-item-left{
	width:100%;
}
body.body-is-left-nav.body-left-nav-sm .main{
	padding-left:107px;
}

/*==================================
	form
==================================*/
.form-control{
	height: 32px;
	padding: .2rem .5rem;
	font-size:.875rem;
	border:1px solid #c8d6e5;
	color: #576574;
}
.form-control:focus{
	outline: none;
	box-shadow: none;
	border:1px solid #2e86de;
}
.form-control::placeholder{
	color:#c8d6e5;
}
.form-control.form-control-md{
	height:50px;
	min-width:50px;
	font-size:1rem;
	padding: .2rem 1.25rem;
}
.form-control.form-control-lg{
	height:70px;
	min-width:70px;
	font-size:1.125rem;
	padding: .2rem 1.25rem;
}
.form-control.form-control-square{
	height: 70px;
	width: 70px;
	min-width:70px;
	font-size:1.125rem;
	padding: .2rem;
	text-align: center;
}
textarea.form-control.form-control-lg{
	height: auto;
	padding: 1rem 1.25rem;
}
input[type="number"].form-control.form-control-lg{
	padding: .2rem .5rem;
}
.form-control-minute.form-control-lg,
.form-control-second.form-control-lg{
	width:70px;
}
.form-control.form-control-only-border-bottom{
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #c8d6e5;
}
.form-control.form-control-only-border-bottom:focus{
	border-bottom:1px solid #2e86de;
}
.form-control.form-control-resize-none{
	resize: none;
}
input[type="radio"],
input[type="checkbox"]{
	position:relative;
	top:2px;
}
.div-mx-select-btns{
	display:flex;
	justify-content:flex-start;
	margin-bottom:20px;
}
.div-mx-select-btns.div-mx-select-btns-center{
	justify-content:center;
}
.div-mx-select-btns > label{
	min-width:120px;
	padding:0 25px;
	height:70px;
	line-height:70px;
	color:#fff;
	background-color:#c8d6e5;
	margin-right:10px;
	border-radius:4px;
	text-align:center;
	font-size:1.125rem;
	font-weight:700;
	position:relative;
	cursor:pointer;
	transition-property: all;
	transition: 0.3s linear;
}

.div-mx-select-btns-classwork > label{
    padding:0px;
}
.div-mx-select-btns.div-mx-select-btns-square > label{
	min-width:180px;
	flex-basis: 180px;
	height: 180px;
	line-height: 180px;
	border-radius: 8px;
	font-size: 1.3125rem;
	font-weight: 300;
}
.div-mx-select-btns > label input[type="radio"],.div-mx-select-btns > label input[type="checkbox"]{
	position:absolute;
	z-index:-1;
	opacity:0;
}
.div-mx-select-btns > label.checked,
.div-mx-select-btns > label:hover{
	background-color:#2e86de;
}
.div-mx-select-btns.mx-select-day-of-the-week,
.div-mx-select-btns.mx-select-th-class{
	margin-bottom: 10px;
}
.div-mx-select-btns.mx-select-location{
	margin-bottom: 0;
	flex-wrap: wrap;
}
.div-mx-select-btns.mx-select-day-of-the-week > label,
.div-mx-select-btns.mx-select-th-class > label,
.div-mx-select-btns.mx-select-location > label,
.div-mx-select-btns.mx-select-number > label,
.div-mx-select-btns.mx-select-choice-quantity > label{
	min-width:70px;
	margin-bottom: 0;
}
.div-mx-select-images{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-bottom: 20px;
}
.div-mx-select-images > label{
	margin: 0 10px 10px 0;
	position: relative;
}
.div-mx-select-images > label input[type="radio"]{
	position:absolute;
	z-index:-1;
	opacity:0;
}
.div-mx-select-images > label .div-select-class-thumbnail,
.div-mx-select-images-preview .div-select-class-thumbnail{
	background-color: transparent;
	background-repeat: no-repeat;;
	background-position: center;
	background-size: cover;
}
.div-mx-select-images > label .div-select-class-thumbnail{
	border:3px solid transparent;
	width: 120px;
	height: 72px;
	cursor: pointer;;
}
.div-mx-select-images > label.checked .div-select-class-thumbnail{
	border:3px solid #2e86de;
}
.form-regist-class-code{
	display: flex;
	justify-content: center;
}
.form-regist-class-code .form-control{
	flex-basis: 50px;
	max-width: 50px;
	min-width: 50px;
	font-size: 1.5rem;
	padding: 0;
	margin-right: 10px;
}
.form-regist-class-code .form-control:last-child{
	margin-right: 0;
}
.div-inline-forms{
	position: relative;
}
.div-inline-forms .form-control.form-control-only-border-bottom{
	padding-right: 80px;
	padding-left: 0;
}
.div-inline-forms .mx-btn.mx-btn-md{
	position: absolute;
	z-index: 1;
	right: 0;
	top: 10px;
	min-width: 70px;
	max-width: 70px;
}
.div-inline-forms .mx-btn.mx-btn-md.button-send-message img{
	position: relative;
	top: -2px;
}
.div-message-histories .mx-btn.mx-btn-md{
	margin: 0 10px 10px 0;
	min-width: 0;
	max-width: 100%;
	padding: 0 20px;
	font-weight: 700;
	color: #fff;
	background-color: #c8d6e5;
	font-size: 1.125rem;
	height: 70px;
	line-height: 70px;
}
.div-message-histories .mx-btn.mx-btn-md:hover{
	background-color: #2e86de;
	opacity: 1 !important;
}
.div-lock-message-histories .mx-btn.mx-btn-md{
	margin: 0 10px 10px 0;
	min-width: 0;
	max-width: 100%;
	padding: 0 20px;
	font-weight: 700;
	color: #fff;
	background-color: #c8d6e5;
	font-size: 1.125rem;
	height: 70px;
	line-height: 70px;
}
.div-lock-message-histories .mx-btn.mx-btn-md:hover{
	background-color: #2e86de;
	opacity: 1 !important;
}



/*bootstrap custom-control*/
.mx-custom-control:not(.custom-switch) .custom-control-label::before{
	border:1px solid #cdcdcd;
}
.mx-custom-control .custom-control-input:checked~.custom-control-label::before{
	background-color: #2e86de;
	border-color: #cdcdcd;
}
.mx-custom-control.custom-radio .custom-control-input:checked~.custom-control-label::after{
	background-image: none;
}
.mx-custom-control.custom-switch{
	padding-left: 0;
	min-height: 40px;
	min-width: 82px;
}
.mx-custom-control.custom-switch .custom-control-label::before,
.mx-custom-control.custom-switch .custom-control-label::after{
	cursor: pointer;
}
.mx-custom-control.custom-switch .custom-control-label::before {
	width: 82px;
	height: 40px;
	border-radius: 82px;
	top: 0;
	left: 0;
	background-color: #c8d6e5;
	border: none;
	box-shadow: none !important;
}
.mx-custom-control.custom-switch .custom-control-input:checked~.custom-control-label::before {
	border-color: #2e86de;
	background-color: #2e86de;
}
.mx-custom-control.custom-switch .custom-control-label::after{
	width: calc(40px - 4px);
	height: calc(40px - 4px);
	border-radius: 40px;
	top: 2px;
	left: 2px;
	background-color: #fff;
	box-shadow: none;
}
.mx-custom-control.custom-switch .custom-control-input{
	position: absolute;
}
.custom-switch .custom-control-input:checked~.custom-control-label::after{
	transform: translateX(41px);
}

/*==================================
	fade load
==================================*/
body::after{
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#fff;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	-webkit-transition: opacity .8s ease;
	transition: opacity .8s ease;
}
body.fadeout{
	overflow:hidden;
}
/*body.fadeout::after {
	opacity: 1;
}*/
body.fadeout .a-fade-link.active{
	/*-webkit-transition: transform .8s ease-out;
	transition: transform .8s ease-out;
	-webkit-transform:scale(1.2);
	transform:scale(1.2);*/
}
body.fadeout .animsition-link{
	/*
	-webkit-transition: transform .8s ease-out;
	transition: transform .8s ease-out;
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	*/
}

/*==================================
	badge
==================================*/
.badge-material-info{
	min-width: 60px;
	position: relative;
	top: -2px;
}
.badge.badge-md{
	padding: .4rem .75rem;
	font-size: 1rem;
	font-weight: 300;
}
.badge-danger{
	background-color: #ee5253;
}
.badge-secondary{
	background-color: #8395a7;
}

/*==================================
	thumbnail
==================================*/
.div-thumbnail{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius:100rem;
	display:inline-block;
	background-color:#c8d6e5;
}
.div-thumbnail-sm{
	width:36px;
	height:36px;
}
.div-thumbnail-md{
	width:72px;
	height:72px;
}
.div-thumbnail-lg{
	width: 120px;
	height: 120px;
}
.div-member-thumbnail{
	background-image:url(../images/icons/svg/user.svg);
}

.div-user-profile-thumbnail.notification-hvr-grow::before{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: 1;
    border-radius: 15px;
    background-color: #ee5253;
    right: -2px;
    bottom: 0px;
    box-sizing: content-box;
}

.div-class-thumbnail{
	background-image:url(../images/jpg/side_bg.jpg);
}
.div-left-nav .list-group .list-group-item .div-member-thumbnail,
.div-questionnaire-balloons .div-member-thumbnail{
	background-image:url(../images/icons/svg/icon_user_circle.svg);
}

/*==================================
	button
==================================*/
.mx-btn{
	display: inline-block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: .22rem 1.1rem;
	font-size:.875rem;
	line-height: 1.5;
	border-radius: .25rem;
	text-decoration:none;
	white-space:nowrap;
	border:none;
}
.mx-btn:hover,
.mx-btn:active{
	text-decoration:none;
	outline:none;
	border:none;
}
.mx-btn.disabled{
	opacity: .5;
	cursor: not-allowed;
}
.mx-btn.mx-btn-md{
	height:50px;
	min-width:200px;
	font-size: 1rem;
	line-height: 50px;
	padding-top: 0;
	padding-bottom: 0;
}
.mx-btn.mx-btn-sm{
	height:26px;
	line-height:26px;
	font-size:.75rem;
	padding:0 .625rem;
	line-height:1.3;
}
.mx-btn.mx-btn-sm .icon{
	position:relative;
	top:-1px;
}
.mx-btn.mx-btn-search{
	min-width: 50px;
	line-height: 1.5;
}
.mx-btn.mx-btn-primary{
	background-color:#2e86de;
	color:#fff;
}
.mx-btn.mx-btn-primary.disabled{
	opacity: 1;
	background-color: #c8d6e5;
}
.mx-btn.mx-btn-transparent{
	background-color:transparent;
	color:#576574 !important;
}
.mx-btn.mx-btn-secondary{
	background-color:#8395a7;
	color:#fff;
}
.mx-btn.mx-btn-danger{
	background-color:#ee5253;
	color:#fff;
}
.mx-btn.mx-btn-muted{
	background-color:#c8d6e5;
	color:#fff;
}
.mx-btn.mx-btn-orange{
	background-color:#ff530d;
	color:#fff;
}
.mx-btn.mx-btn-dark{
	background-color:#576574;
	color:#fff;
}
.div-page-btns{
	display: flex;
	justify-content: space-between;
}
.div-page-btns.text-right,
.div-page-btns.text-center{
	display:block;
}
.div-page-btns .mx-btn{
	height: 50px;
	padding: 0 30px;
	line-height: 50px;
	white-space: nowrap;
	min-width: 160px;
	font-size:1rem;
}
.mx-btn .icon-left,
.mx-btn .icon-right,
.div-page-btns .mx-btn > span{
	vertical-align: baseline;
}
.mx-btn .icon-left,
.mx-btn .icon-right{
	position: relative;
	top: 2px;
}
.mx-btn .icon-left{
	margin-right: 12px;
}
.mx-btn .icon-right{
	margin-left: 12px;
}
.div-page-btns .mx-btn > span{
	position:relative;
	top: -3px;
}
.div-page-btns .mx-btn.mx-btn-link{
	padding: 0;
	min-width:0;
}
.mx-btn-file-upload{
	border: 1px solid #c8d6e5;
	border-radius: 2px;
	background-color: #fff;
	padding: 0 30px;
	text-align: center;
	height: 70px;
	line-height: 70px;
	font-size: 1.125rem;
	color: #2e86de;
	min-width: 210px;
	cursor: pointer;
	white-space: nowrap;
}
.mx-btn.mx-btn-md.mx-btn-remove,
.mx-btn.mx-btn-md.mx-btn-cancel,
.mx-btn.mx-btn-md.mx-btn-submit{
	min-width: 160px;
}
.mx-btn.mx-btn-md.mx-btn-remove .icon-right{
	top: 0;
}
.topic-next-button{
    list-style-type: none;
}
.quiz_updated::before{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: 1;
    border-radius: 15px;
    background-color: #feca57;
    left: 20px;
    box-sizing: content-box;
}
.quiz_updated_span{
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 15px;
    background-color: #feca57;
}
/*==================================
	button hover effect
==================================*/
.mx-btn-fade-to-left,
.mx-btn-fade-to-right,
.mx-btn-fade-to-top,
.mx-btn-fade-to-bottom{
	position:relative;
	overflow:hidden;
}
.mx-btn-fade-to-left:before,
.mx-btn-fade-to-right:before,
.mx-btn-fade-to-top:before,
.mx-btn-fade-to-bottom:before{
	content: "";
	position: absolute;
	height: 100%;
	width: 0;
	background : #fff;
	transition: all .3s;
	opacity: 0.3;
}
.mx-btn-fade-to-left:before{
	left:0;
	bottom: 0;
}
.mx-btn-fade-to-left:not(.disabled):hover:before {
	width: 100%;
}
.mx-btn-fade-to-right:before {
	left: 100%;
	bottom: 0;
}
.mx-btn-fade-to-right:not(.disabled):hover:before {
	width: 100%;
	left:0;
}
.mx-btn-fade-to-top:before {
	left: 0;
	top: 0;
}
.mx-btn-fade-to-top:not(.disabled):hover:before {
	height: 100%;
}
.mx-btn-fade-to-bottom:before {
	left: 0;
	bottom: 0;
}
.mx-btn-fade-to-bottom:not(.disabled):hover:before {
	height: 100%;
}
.mx-btn:not(.mx-btn-fade-to-left):not(.mx-btn-fade-to-right):not(.mx-btn-fade-to-top):not(.mx-btn-fade-to-bottom){
	transition-property: all;
	transition: 0.3s linear;
}
.mx-btn:not(.mx-btn-fade-to-left):not(.mx-btn-fade-to-right):not(.mx-btn-fade-to-top):not(.mx-btn-fade-to-bottom):hover{
	opacity: .75;
}
.btn-blank-link {
    font-weight: 400;
    color: #007bff;
    text-decoration: none;
}
/*==================================
	modal
==================================*/
.modal-backdrop{
	background-color: #1c334b;
}
.modal-backdrop.show{
	opacity: .75;
}
.modal-content{
	border-radius: 9px;
}
.modal-header{
	min-height: 50px;
	padding: 18px 50px 18px 18px;
	position: relative;
	border-bottom: none;
}
.modal-header .mx-modal-close{
	position: absolute;
	z-index: 1;
	right: 20px;
	top: 20px;
	width: 15px;
	height: auto;
	cursor: pointer;
}
.modal-footer{
	border-top: none;
	min-height: 50px;
}
.modal-alert .modal-body,
.modal-search-setting .modal-body,
.modal-personal-message-setting .modal-body,
.modal-regist .modal-body,
.modal-attend .modal-body,
.modal-form .modal-body{
	padding-top: 0;
	padding-bottom: 0;
}
.modal-body-title{
	font-size: 1.5rem;
}
.div-flex .modal-body-title .div-table{
	height: 100%;
	display: table;
	width: 100%;
}
.div-flex .modal-body-title .div-table .div-table-cell{
	display: table-cell;
	vertical-align: middle;
}
.modal-alert .modal-dialog,
.modal-search-setting .modal-dialog,
.modal-personal-message-setting .modal-dialog,
.modal-regist .modal-dialog,
.modal-attend .modal-dialog,
.modal-form .modal-dialog{
	display: table;
	height: 100%;
	margin: 0 auto;
}
.modal-alert .modal-dialog .modal-table-cell,
.modal-search-setting .modal-dialog .modal-table-cell,
.modal-personal-message-setting .modal-dialog .modal-table-cell,
.modal-regist .modal-dialog .modal-table-cell,
.modal-attend .modal-dialog .modal-table-cell,
.modal-form .modal-dialog .modal-table-cell{
	display: table-cell;
	vertical-align: middle;
}
.modal-form:not(.modal-alert) .modal-header{
	padding-top: 13px;
	padding-bottom: 13px;
}
.modal-form:not(.modal-alert) .modal-header,
.modal-form:not(.modal-alert) .modal-footer{
	min-height: 40px;
}
.modal .div-modal-title{
	padding-bottom: 10px;
	font-size: 1.5rem;
	color: #8395a7;
	border-bottom: 2px solid #c8d6e5;
	font-weight: 300;
}
.modal .div-modal-title .img-icon{
	margin-right: 20px;
}
.div-modal-body-content{
	padding: 40px 0;
}
.modal .div-modal-class-material-info{
	padding: 25px 0;
}
.modal .div-modal-class-material-info,
.modal .div-modal-material-detail-time-limit,
.modal .div-modal-material-detail-content{
	border-bottom: 1px solid #c8d6e5;
}
.modal .div-modal-class-material-info .div-modal-material-title{
	font-size: x-large;
	font-weight: 700;
}
.modal .div-modal-class-material-info .div-modal-class-title{
	font-size: 1rem;
}
.modal .div-modal-material-detail-time-limit{
	padding: 10px 0;
}
.modal .div-modal-material-detail-content{
	line-height: 2rem;
	padding: 20px 0;
}
.modal .div-modal-material-detail-quiz-content{
    line-height: 2rem;
    padding: 20px 0;
}
.modal .div-mx-info-title{
	padding: 25px 0;
	font-size: 1.3125rem;
	line-height: 2rem;
	font-weight: 700;
}
.modal .div-mx-info-body{
	padding: 1.25rem 0;
	line-height: 2rem;
	border-top: 1px solid #c8d6e5;
	border-bottom: 1px solid #c8d6e5;
}
.modal .modal-body.modal-body-sm{
	width: 425px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
}
/* modal-create-lessson-speech */
.modal-create-lessson-speech .modal-dialog{
	width: 740px;
	max-width: 740px;
}
.modal-create-lessson-speech .modal-dialog .modal-body{
	padding-left: 50px;
	padding-right: 50px;
}
.modal-create-lessson-speech .modal-dialog .modal-body .modal-body-title{
	font-size: 1.3125rem;
	color: #576574;
	margin-bottom: 20px;
}
.modal-create-lessson-speech .modal-dialog .modal-body .form-control{
	padding: 15px;
	resize: none;
	border-radius: 0;
}
.modal-create-lessson-speech .modal-dialog .modal-footer{
	padding: 20px 50px;
}
.modal-create-lessson-speech .modal-dialog .modal-footer .mx-btn{
	min-width: 160px;
}
.modal-create-lessson-speech .modal-dialog .modal-footer .mx-btn img{
	position: relative;
	top: -2px;
}
.p-loading-text,
.p-accept-text{
	color: #8395A7;
	text-align: center;
	margin: 50px 0 45px 0;
	font-size: 1.3125rem;
}
.modal-create-lessson-speech .modal-dialog .div-audio-icon-body{
	width: 120px;
	height: 120px;
	border-radius: 4px;
	border: 1px solid #C8D6E5;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70px auto;
	background-image: url(../images/icons/svg/icon_text_volume_lg.svg);
	margin: 0 auto;
}
.modal-create-lessson-speech .modal-dialog .div-audio-name{
	margin-top: 10px;
	margin-bottom: 30px;
	font-size: .875rem;
	color: #2E86DE;
	text-align: center;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller{
	margin-bottom: 20px;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player{
	position: relative;
	background-color: #fff;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player audio{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller{
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-btns .div-play,
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-btns .div-pause{
	display: block;
	width: 26px;
	height: 22px;
	margin-right: 8px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 22px;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-btns .div-play{
	background-image: url(../images/icons/svg/icon_play.svg);
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-btns .div-pause{
	background-image: url(../images/icons/svg/icon_pause.svg);
	display: none;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-progress{
	width: 200px;
	position: relative;
	padding-top: 8.5px;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-progress .div-progress-bar{
	width: 200px;
	height: 5px;
	background-color: #C8D6E5;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-progress .div-passed{
	position: absolute;
	z-index: 2;
	height: 5px;
	width: 0%;
	left: 0;
	top: 9px;
	background-color: #576574;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .div-progress .div-handle{
	display: none;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .time{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-left: 10px;
	font-size: .875rem;
	color: #8395A7;
	line-height: 22px;
}
.modal-create-lessson-speech .modal-dialog .div-audio-controller .audio-player .div-audio-controller .time .div-separator{
	margin-left: 2px;
	margin-right: 2px;
}

@media (min-width: 576px){
	.modal-alert .modal-dialog{
		width: 480px;
		max-width: 480px;
	}
	.modal-search-setting .modal-dialog{
		width: 400px;
		max-width: 400px;
	}
	.modal-personal-message-setting .modal-dialog{
		width: 640px;
		max-width: 640px;
	}
	.modal-regist .modal-dialog,
	.modal-attend .modal-dialog,
	.modal-form .modal-dialog{
		width: 640px;
		max-width: 640px;
	}
	.modal-regist .modal-dialog.modal-lg,
	.modal-attend .modal-dialog.modal-lg,
	.modal-form .modal-dialog.modal-lg{
		width: 800px;
		max-width: 800px;
	}
	.modal-regist .modal-dialog.modal-xl,
	.modal-attend .modal-dialog.modal-xl,
	.modal-form .modal-dialog.modal-xl{
		width: 1024px;
		max-width: 1024px;
	}
}

/*==================================
	ABLish content
==================================*/
.modal-ablish .modal-body{
	padding: 0;
}
.modal-ablish .modal-body .div-forms,
.div-ablish-materials .div-forms{
	display: flex;
	justify-content: flex-start;
	padding: 0 10px;
	margin-bottom: 10px;
}
.modal-ablish .modal-body .div-forms .div-select-category,
.modal-ablish .modal-body .div-forms .div-select-sort,
.div-ablish-materials .div-forms .div-select-category,
.div-ablish-materials .div-forms .div-select-sort{
	flex-basis: 25%;
	max-width: 25%;
	min-width: 25%;
	position: relative;
}
.modal-ablish .modal-body .div-forms .div-search-text,
.div-ablish-materials .div-forms .div-search-text{
	flex-basis: 50%;
	max-width: 50%;
	min-width: 50%;
}
.modal-ablish .modal-body .div-forms select.form-control,
.div-ablish-materials .div-forms select.form-control{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	color: #ff9900;
	padding-right: 25px;
	margin-right: 10px;
}
.modal-ablish .modal-body .div-forms .span-arrow,
.div-ablish-materials .div-forms .span-arrow{
	position: absolute;
	z-index: 1;
	right: 7px;
	top: 13px;
	display: block;
	color: #ff9900;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 5px 0 5px;
	border-color: #ff9900 transparent transparent transparent;
}
.modal-ablish .modal-body .div-forms .div-search-text .div-search-text-body,
.div-ablish-materials .div-forms .div-search-text .div-search-text-body{
	display: flex;
	justify-content: flex-start;
	padding-left: 10px;
}
.modal-ablish .modal-body .div-forms .div-search-text .form-control,
.div-ablish-materials .div-forms .div-search-text .form-control{
	flex-basis: 75%;
	min-width: 75%;
	max-width: 75%;
	border-radius: 10rem 0 0 10rem;
	padding-left: 1rem;
}
.modal-ablish .modal-body .div-forms .div-search-text .mx-btn,
.div-ablish-materials .div-forms .div-search-text .mx-btn{
	flex-basis: 25%;
	min-width: 25%;
	max-width: 25%;
	border-radius: 0 10rem 10rem 0;
	color: #fff;
	background-color: #ff9900;
	padding-left: 0;
	padding-right: 0;
}
.modal-ablish .modal-body .list .table tbody tr,
.div-ablish-materials .list .table tbody tr{
	cursor: pointer;
}
.modal-ablish .modal-body .list .table th,
.modal-ablish .modal-body .list .table td,
.div-ablish-materials .list .table th,
.div-ablish-materials .list .table td{
	font-size: .875rem;
	vertical-align: middle;
}
.modal-ablish .modal-body .list .table tbody tr:hover th,
.modal-ablish .modal-body .list .table tbody tr:hover td,
.div-ablish-materials .list .table tbody tr:hover th,
.div-ablish-materials .list .table tbody tr:hover td{
	background-color: #f9f9f9;
}
.modal-ablish .modal-body .list .table thead tr th,
.div-ablish-materials .list .table thead tr th{
	background-color: #d9d9d9;
	color: #808080;
	border-bottom: none;
}
.modal-ablish .modal-body .list .table .div-category-name,
.div-ablish-materials .list .table .div-category-name{
	color: #2CBCC5;
	font-size: .75rem;
}
.modal-ablish .modal-body .list .table .div-datetime,
.div-ablish-materials .list .table .div-datetime{
	font-size: .75rem;
	color: #808080;
	margin-right: 20px;
}
.modal-ablish .modal-body .div-display{
	min-height: 654px;
	padding: 0 90px;
	position: relative;
	width: 100%;
}
.modal-ablish .modal-body .div-display .div-display-body{
	height: 654px;
	margin-bottom: 40px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	padding: 15px;
}
.modal-ablish .modal-body .div-display .button-submit{
	min-width: 200px;
	height: 50px;
	font-size: 1rem;
}
.modal-ablish .modal-body .div-display .div-prev,
.modal-ablish .modal-body .div-display .div-next{
	width: 40px;
	height: 40px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40px;
	position: absolute;
	z-index: 2;
	top: 50%;
	margin-top: -20px;
	cursor: pointer;
}
.modal-ablish .modal-body .div-display .div-prev{
	background-image: url(../images/icons/svg/icon_modal_left_circle.svg);
	left: 25px;
}
.modal-ablish .modal-body .div-display .div-prev:hover{
	background-image: url(../images/icons/svg/icon_modal_left_circle_active.svg);
}
.modal-ablish .modal-body .div-display .div-next{
	background-image: url(../images/icons/svg/icon_modal_right_circle.svg);
	right: 25px;
}
.modal-ablish .modal-body .div-display .div-next:hover{
	background-image: url(../images/icons/svg/icon_modal_right_circle_active.svg);
}
.modal-ablish .modal-body .div-ablish-material-detail .tab-pane.fade{
	opacity: 1;
}
.modal-ablish .modal-body .div-ablish-material-detail .content-head-title{
	position: relative;;
	padding-left: 150px;
	min-height: 105px;
}
.modal-ablish .modal-body .div-ablish-material-detail .content-head-title .content-head-img{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
}
.modal-ablish .modal-body .div-ablish-material-detail .content-head-title .content-head-img img{
	width: 100px;
}
.modal-ablish .modal-body .div-ablish-material-detail .content-head-title .content_category_name{
	font-size: .875rem;
	color: #2CBCC5;
}
.modal-ablish .modal-body .div-ablish-material-detail .content-head-title .topic-description {
	display: block;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.modal-ablish .modal-body .div-ablish-material-detail .content-head-title .content_topic_name{
	line-height: 40px;
	margin-top: 12px;
	font-size: 1.75rem;
}
.modal-ablish .modal-body .div-ablish-material-detail .long-content-text {
	height: 434px;
	overflow-y: auto;
}
.modal-ablish .modal-body .div-ablish-material-detail .long-content-text,
.modal-ablish .modal-body .div-ablish-material-detail .long-content-text-half,
.modal-ablish .modal-body .div-ablish-material-detail .long-content-text-translation{
	font-size: 1rem !important;
	color: #000 !important;
	line-height: 1.7;
}
.modal-ablish .modal-body .div-ablish-material-detail .long-text-control-div{
	margin: 0 -15px -15px -15px;
	height: 84px;
	background: rgb(217, 217, 217);
	box-shadow: 1px -1px 4px 0 rgba(0,0,0,0.20);
	position: relative;
	display: flex;
}
.modal-ablish .modal-body .div-ablish-material-detail .long-text-control-div .text-audio-play-div{
	width: 50%;
	flex-basis: 50%;
	max-width: 50%;
	min-width: 50%;
	border-right: 1px solid rgba(0,0,0,0.3);
	position: relative;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider{
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider .hide{
	display: none;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider.slider-horizontal{
	width: 100%;
	height: 6px !important;
	top: -11px;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider.slider-horizontal .slider-track{
	position: absolute;
	cursor: pointer;
	background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
	background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
	background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	width: 100%;
	margin-top: -5px;
	top: 50%;
	left: 0;
	height: 6px !important;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider-track-low,
.modal-ablish .modal-body .div-ablish-material-detail .slider-track-high{
	position: absolute;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 4px;
	height: 100%;
	top: 0;
	bottom: 0;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider-selection{
	position: absolute;
	background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
	background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
	background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 4px;
	height: 100%;
	top: 0;
	bottom: 0;
	background-color: #FF9900 !important;
	background-image: none !important;
	border-radius: 0px;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider-track-high{
	height: 100%;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,0.26);
	border-radius: 0px;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider-handle{
	position: absolute;
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
	filter: none;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	border: 0px solid transparent;
	border-radius: 50%;
	background-color: #FF9900 !important;
	background-image: none !important;
	width: 16px !important;
	height: 16px !important;
	top: -7px !important;
	outline: none !important;
}
.modal-ablish .modal-body .div-ablish-material-detail .slider.slider-horizontal .slider-tick,
.modal-ablish .modal-body .div-ablish-material-detail .slider.slider-horizontal .slider-handle{
	margin-left: -10px;
}
.modal-ablish .modal-body .div-ablish-material-detail .text-audio-time {
	font-size: 12px;
	color: rgba(0,0,0,0.50);
	line-height: 12px;
	position: absolute;
	left: 5px;
	top: 10px;
}
.modal-ablish .modal-body .div-ablish-material-detail .m-img {
	width: 32px;
	height: 32px;
}
.modal-ablish .modal-body .div-ablish-material-detail .text-img-margin-right {
	margin-right: 24px;
}
.modal-ablish .modal-body .div-ablish-material-detail .l-img {
	width: 44px;
	height: 44px;
}
.modal-ablish .modal-body .div-ablish-material-detail .voice-control{
	display: none;
	width: 32px;
	height: 128px;
	background: #FFFFFF;
	box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.30);
	border-radius: 4px;
	position: absolute;
	margin-left: 0;
	float: left;
	z-index: auto;
	bottom: 50px;
	left: 220px !important;
	top: -103px;
	text-align: left;
}
.modal-ablish .modal-body .div-ablish-material-detail .text-speed-div {
	display: inline-block;
	margin-right: 32px;
}
.modal-ablish .modal-body .div-ablish-material-detail .speed-text {
	vertical-align: -2px;
	margin-right: 3px;
	color: rgba(128,128,128,1);
}
.modal-ablish .modal-body .div-ablish-material-detail .speed-select {
	border-radius: 12px;
	background: rgba(0,0,0,0.50);
	color: #fff;
	text-align: center;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	height: 24px;
	width: 48px;
	margin: 0;
	border: 0px;
	font-size: 12px;
	padding-left: 15px;
	outline: none !important;
}
.modal-ablish .modal-body .div-ablish-material-detail #short-text-audio-replay-control{
	margin-left: 35px;
}
.modal-ablish .modal-body .div-ablish-material-detail .text-control-bar-div{
	padding-top: 20px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	color: rgba(128,128,128,1);
}
.modal-ablish .modal-body .div-ablish-material-detail .content-control-bar-btn1{
	margin-left: 32px;
}
.modal-ablish .modal-body .div-ablish-material-detail .content-control-bar-btn2{
	margin-left: 24px;
}
.modal-ablish .modal-body .div-ablish-material-detail .control-bar-text{
	vertical-align: top;
	display: inline-block;
	position: relative;
	top: 9px;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch {
	position: relative;
	width: 51px;
	height: 32px;
	margin: 0;
	margin-top: 8px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select: none;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-checkbox {
	display: none;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border-radius: 16px;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-inner {
	display: block;
	width: 200%;
	margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-inner::before, .testswitch-inner::after {
	display: block;
	float: right;
	width: 50%;
	height: 30px;
	padding: 0;
	line-height: 30px;
	font-size: 14px;
	color: white;
	font-weight: bold;
	box-sizing: border-box;
	background: rgba(0,0,0,0.10);
	border-radius: 16px;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-inner::after {
	content: attr(data-on);
	padding-left: 10px;
	background-color: #FF9900;
	color: #FFFFFF;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-inner::before {
	content: attr(data-off);
	padding-right: 10px;
	background-color: rgba(0,0,0,0.20);
	color: #999999;
	text-align: right;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-switch {
	position: absolute;
	display: block;
	width: 28px;
	height: 28px;
	margin: 0;
	top: 0;
	bottom: 0;
	right: 22px;
	background: #FFFFFF;
	border: 0 solid rgba(0,0,0,0.04);
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15), 0 1px 1px 0 rgba(0,0,0,0.16), 0 3px 1px 0 rgba(0,0,0,0.10);
	border-radius: 20px;
	transition: all 0.3s ease-in 0s;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
	margin-left: 0;
}
.modal-ablish .modal-body .div-ablish-material-detail .testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
	right: 0px;
}
.div-listening-materials .div-pager{
	margin-top: 15px;
}
.div-listening-materials .div-pager .pager-page-count{
	margin-bottom: 5px;
	color: #576574;
	font-size: .875rem;
}
.div-listening-materials .div-pager .div-pagenation{
	display: flex;
	justify-content: flex-end;
}
.div-listening-materials .div-pager .div-pagenation .div-left,
.div-listening-materials .div-pager .div-pagenation .div-right{
	display: flex;
	flex-wrap: nowrap;
}
.div-listening-materials .div-pager .div-pagenation .div-left{
	margin-right: 15px;
}
.div-listening-materials .div-pager .div-pagenation .div-right{
	margin-left: 15px;
}
.div-listening-materials .div-pager .div-pagenation .div-left span,
.div-listening-materials .div-pager .div-pagenation .div-right span{
	position: relative;
	width: 30px;
	height: 30px;
	display: block;
	margin: 5px auto;
}
.div-listening-materials .div-pager .div-pagenation .div-left span::before,
.div-listening-materials .div-pager .div-pagenation .div-left span::after,
.div-listening-materials .div-pager .div-pagenation .div-right span::before,
.div-listening-materials .div-pager .div-pagenation .div-right span::after,
.div-listening-materials .div-pager .div-pagenation .div-right span i,
.div-listening-materials .div-pager .div-pagenation .div-left span i{
	content: '';
	position: absolute;
	z-index: 1;
	height: 13px;
	width: 1px;
	background-color: #C8D6E5;
}
.div-listening-materials .div-pager .div-pagenation .div-right span i,
.div-listening-materials .div-pager .div-pagenation .div-left span i{
	height: 19px;
}
.div-listening-materials .div-pager .div-pagenation .div-left .a-first span::before,
.div-listening-materials .div-pager .div-pagenation .div-left .a-prev span::before{
	transform: rotate(45deg);
	top: 3px;
	left: 13px;
}
.div-listening-materials .div-pager .div-pagenation .div-left .a-first span::after,
.div-listening-materials .div-pager .div-pagenation .div-left .a-prev span::after{
	transform: rotate(135deg);
	top: 12px;
	left: 13px;
}
.div-listening-materials .div-pager .div-pagenation .div-left .a-first span i{
	left: 7px;
	top: 5px;
}
.div-listening-materials .div-pager .div-pagenation .div-right .a-last span::before,
.div-listening-materials .div-pager .div-pagenation .div-right .a-next span::before{
	transform: rotate(135deg);
	top: 3px;
	right: 13px;
}
.div-listening-materials .div-pager .div-pagenation .div-right .a-last span::after,
.div-listening-materials .div-pager .div-pagenation .div-right .a-next span::after{
	transform: rotate(45deg);
	top: 12px;
	right: 13px;
}
.div-listening-materials .div-pager .div-pagenation .div-right .a-last span i{
	right: 7px;
	top: 5px;
}
.div-listening-materials .div-pager .div-pagenation a{
	display: block;
	margin: 0 1px;
	width: 40px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	border-radius: 40px;
	border: 1px solid #C8D6E5;
	color: #C8D6E5;
	text-decoration: none !important;
	opacity: 1 !important;
	font-size: .875rem;
}
.div-listening-materials .div-pager .div-pagenation a.active{
	background-color: #C8D6E5;
	color: #fff;
}
.div-listening-materials .div-forms{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 20px;
	flex-wrap: nowrap;
}
.div-listening-materials .div-forms .div-search{
	flex-basis: 400px;
	min-width: 400px;
	max-width: 400px;
	margin-right: 20px;
	position: relative;
}
.div-listening-materials .div-forms .div-select{
	flex-basis: 220px;
	min-width: 220px;
	max-width: 220px;
	margin-right: 20px;
}
.div-listening-materials .div-forms .form-control{
	width: 100%;
	height: 60px;
	padding: 16px;
	font-size: 1rem;
}
.div-listening-materials .div-forms .div-search .form-control{
	width: 340px;
	border-radius: 4px 0 0 4px;
}
.div-listening-materials .div-forms .div-search .form-control:-ms-input-placeholder{
	color: #576574;
}
.div-listening-materials .div-forms .div-search .form-control::-webkit-input-placeholder{
	color: #576574;
}
.div-listening-materials .div-forms .div-search .form-control::placeholder{
	color: #576574;
}
.div-listening-materials .div-forms .div-search .mx-btn{
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 0 4px 4px 0;
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	padding: 0;
}
.div-listening-materials .div-forms .div-select .form-control{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-repeat: no-repeat;
	background-image: url(../images/icons/svg/icon_sort_down.svg);
	background-size: 16px auto;
	background-position: right 12px center;
}
.div-listening-materials .table thead th{
	font-size: 1rem;
	font-weight: 700;
	padding: 18px 20px;
	background-color: #F7F8FA;
	border: none;
}
.div-listening-materials .table tbody td{
	border-bottom: 1px solid #DEE2E6;
	border-top: none;
	padding: 18px 20px;
	vertical-align: middle;
	text-align: left;
	cursor: pointer;
}
.div-listening-materials .table tbody tr:hover td{
	background-color: #f9f9f9;
}
.div-listening-materials .table tbody td.td-date{
	font-size: .75rem;
}
.div-listening-materials .table tbody td .label-category{
	font-size: .75rem;
	color: #54A0FF;
}
.div-listening-materials .table tbody td .a-link{
	text-decoration: none !important;
	color: #576574;
}
.div-listening-materials .table .th-date,
.div-listening-materials .table .td-date{
	width: 1%;
	white-space: nowrap;
	padding-right: 30px;
}

/*==================================
	flex box
==================================*/
.main .div-flex,
.modal .div-flex{
	display:flex;
	justify-content: flex-start;
}

/*==================================
	list style
==================================*/
/* ol-steps */
.ol-steps{
	list-style: none;
	margin: 0;
	padding: 0;
	margin-right: 18px;
}
.ol-steps li{
	position: relative;
	float: left;
	height: 36px;
	line-height: 36px;
	padding: 0 10px;
	background-color: #c8d6e5;
	color: #fff;
	padding-left: 30px;
}
.ol-steps li:first-child{
	border-radius: 2px 0 0 2px;
	padding-left: 10px;
}
.ol-steps li a{
	text-decoration: none !important;
	color: #fff !important;
	text-decoration: none !important;
}
.ol-steps li.current{
	background-color: #54a0ff;
}
.ol-steps li::before,
.ol-steps li::after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 0 18px 18px;
	position: absolute;
	top: 0;
}
.ol-steps li::after{
	border-color: transparent transparent transparent #c8d6e5;
	z-index: 2;
	right: -17px;
}
.ol-steps li::before{
	border-color: transparent transparent transparent #fff;
	z-index: 1;
	left: 1px;
}
.ol-steps li:first-child::before{
	border: none;
}
.ol-steps li.current::after{
	border-color: transparent transparent transparent #54a0ff;
}
.ol-steps li .span-step{
	margin-right: 8px;
}

/* ul-check-list */
ul.ul-check-list,
ul.ul-check-list li{
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.ul-check-list li{
	padding-left: 30px;
	line-height: 1.5;
	background-repeat: no-repeat;
	background-position: left .4375rem;
	background-size: 19px auto;
	background-image: url(../images/icons/svg/icon_check_gray.svg);
}

/*==================================
	blinking
==================================*/
.blinking{
	-webkit-animation:blink 0.75s ease-in-out infinite alternate;
	-moz-animation:blink 0.75s ease-in-out infinite alternate;
	animation:blink 0.75s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}
@-moz-keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}

/*==================================
	table
==================================*/
/* table */
.table{
	color: #576574;
}

/* table-sm */
.table.table-sm th,
.table.table-sm td {
	font-size: .75rem;
	padding: 6px;
	border: none;
	border-bottom: 1px solid #e3eaf2;
}

/* table-borderless */
.table-borderless th,
.table-borderless td{
	padding: 15px;
}
.table-borderless th{
	color: #576574;
	font-weight: 700;
}
/* table-csv-members */
.table-csv-members th,
.table-csv-members td{
	padding: 6px;
}
.table-csv-members thead th{
	color: #c8d6e5;
	font-weight: 700;
	border-top: none;
	border-bottom: 1px solid #e6e6e6;
}
.table-csv-members tbody .td-number{
	padding-left: 0;
	color: #c8d6e5;
	font-weight: 700;
}
.table-csv-members tbody td{
	border-top: 1px solid #e6e6e6;
}

/* table-regist-class-list */
.table-regist-class-list th,
.table-regist-class-list td{
	padding: 1.25rem;
	vertical-align: middle;
	border-top: 1px solid #c8d6e5;
}
.table-regist-class-list tr:last-child th,
.table-regist-class-list tr:last-child td{
	border-bottom: 1px solid #c8d6e5;
}
.table-regist-class-list .th-class-name{
	padding-left: 0;
}
.table-regist-class-list .td-timer{
	width: 160px;
	padding-right: 1rem;
}
.table-regist-class-list .td-btn{
	padding-right: 0;
	padding-left: 0;
	width: 1%;
}

/* table-csv */
.table-csv th,
.table-csv td{
	padding: .55rem;
	font-size: .9375rem;
}

/* table-content-list */
.table-content-list tr:last-child th,
.table-content-list tr:last-child td{
	border-bottom: 1px solid #c8d6e5;
}

/* table-modal-x-list */
.table-modal-x-list{
	margin-bottom: 0;
}
.table-modal-x-list thead tr th:first-child,
.table-modal-x-list tbody tr td:first-child{
	padding-left: 0;
}
.table-modal-x-list thead tr th:last-child,
.table-modal-x-list tbody tr td:last-child{
	padding-right: 0;
}
.table-modal-x-list thead th{
	border-bottom: 1px solid #c8d6e5;
}
.table-modal-x-list tbody th,
.table-modal-x-list tbody td{
	border-top: none;
	border-bottom: 1px solid #c8d6e5;
	padding: 1rem .75rem;
}

/* table-score-rank */
.table-score-rank{
	width: 100%;
}
.table-score-rank th,
.table-score-rank td{
	padding: 7px 7px 7px 0;
	vertical-align: middle;
}
.table-score-rank .th-number{
	width: 60px;
}
.table-score-rank .td-name{
	width: 125px;
}
.table-score-rank .td-point{
	text-align: right;
}
.table-score-rank .td-point strong,
.table-score-rank .td-point span {
	display: inline-block;
	vertical-align: bottom;
	color: #3294ec;
}
.table-score-rank .td-point strong{
	font-size: 2rem;
	font-weight: 300;
}
.table-score-rank .td-point span {
	position: relative;
	top: -7px;
}
.table-score-rank .div-crown{
	width: 40px;
	height: 36px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40px 36px;
	background-image: url(../images/icons/svg/icon_royal_crown.svg);
	font-size: .75rem;
	color: #fff;
	text-align:center;
	padding-top: 14px;
	line-height: 1;
}

/* table-attend-list & table-grade-list */

.table-attend-list tbody td .span-attend,
.table-attend-list tbody td .span-absent,
.table-attend-list tbody td .span-dropout{
	font-weight: 300;
}
.table-attend-list tbody td .span-attend{
	color: #1DD1A1;
}
.table-attend-list tbody td .span-absent{
	color: #FF6B6B;
}
.table-attend-list tbody td .span-dropout{
	color: #C8D6E5;
}
.table-attend-list,
.table-attend-list th,
.table-attend-list td,
.table-grade-list,
.table-grade-list th,
.table-grade-list td{
	border: none;
}
.table-attend-list th,
.table-attend-list td,
.table-grade-list th,
.table-grade-list td{
	text-align: center;
	font-size: .875rem;
}
.table-attend-list thead th,
.table-attend-list thead td,
.table-grade-list thead th,
.table-grade-list thead td{
	padding: 0;
}
.table-attend-list tbody th,
.table-attend-list tbody td,
.table-grade-list tbody th,
.table-grade-list tbody td{
	padding: 9.5px 10px;
}
.table-attend-list thead tr th:first-child,
.table-attend-list tbody tr td:first-child,
.table-grade-list thead tr th:first-child,
.table-grade-list tbody tr td:first-child{
	padding-left: 0;
}
.table-attend-list thead th,
.table-grade-list thead th{
	border-bottom: 2px solid #C8D6E5;
}
.table-attend-list thead th,
.table-attend-list thead th *,
.table-grade-list thead th,
.table-grade-list thead th *{
	font-weight: 700;
}
.table-attend-list thead th .div-th,
.table-grade-list thead th .div-th{
	padding: 4.5px;
	position: relative;
	border-bottom: 3px solid #fff;
	border-right: 1px solid #C8D6E5;
	width: 100%;
	padding-right: 20px;
	padding-left: 20px;
	line-height: 1;
}
.table-attend-list thead tr th:last-child .div-th,
.table-grade-list thead tr th:last-child .div-th{
	border-right: none;
}
.table-attend-list thead th.text-left .div-th,
.table-grade-list thead th.text-left .div-th{
	padding-left: 0;
}
.table-attend-list thead th .div-th .div-icon-table-sort,
.table-grade-list thead th .div-th .div-icon-table-sort{
	position: absolute;
	z-index: 1;
	cursor: pointer;
	width: 11px;
	right: 5px;
	top: 1px;
	line-height: 1;
}
.table-attend-list .text-primary,
.table-grade-list .text-primary{
	color: #0ABDE3 !important;
}
.table-grade-list .text-primary.member-name,
.table-attend-list .text-primary.member-name{
	color: #2E86DE !important;
}
.table-attend-list .text-success,
.table-grade-list .text-success{
	color: #1DD1A1 !important;
}
.table-attend-list .text-warning,
.table-grade-list .text-warning{
	color: #FECA57 !important;
}
.table-attend-list .text-danger,
.table-grade-list .text-danger{
	color: #FF6B6B !important;
}
.table-attend-list tbody th,
.table-attend-list tbody td,
.table-grade-list tbody th,
.table-grade-list tbody td{
	border-bottom: 1px solid #C8D6E5;
}
.table-attend-list tbody tr:nth-child(even) th,
.table-grade-list tbody tr:nth-child(even) th,
.table-attend-list tbody tr:nth-child(even) td,
.table-grade-list tbody tr:nth-child(even) td{
	background-color: #fbfcfd;
}
.table-attend-list .border-right,
.table-grade-list .border-right{
	border-right: 1px solid #C8D6E5 !important;
}
.table-attend-list tbody tr:last-child th,
.table-attend-list tbody tr:last-child td,
.table-grade-list tbody tr:last-child th,
.table-grade-list tbody tr:last-child td{
	border-bottom: none;
}

/* table cell size */
.table .cell-lg,
.table .cell-md,
.table .cell-sm{
	padding: 0;
}
.table .cell-lg .cell-body,
.table .cell-md .cell-body,
.table .cell-sm .cell-body{
	display: block;
}
.table thead .cell-lg .cell-body,
.table thead .cell-md .cell-body,
.table thead .cell-sm .cell-body{
	padding: 4.5px;
}
.table tbody .cell-lg .cell-body,
.table tbody .cell-md .cell-body,
.table tbody .cell-sm .cell-body{
	padding: 9.5px 10px;
}
.table .cell-lg{
	width: 140px;
}
.table .cell-lg .cell-body{
	min-width: 140px;
}
.table .cell-md{
	width: 130px;
}
.table .cell-md .cell-body{
	min-width: 130px;
}
.table .cell-sm{
	width: 100px;
}
.table .cell-sm .cell-body{
	min-width: 100px;
}

/*==================================
	nav tabs
==================================*/
.mx-nav-tabs{
	margin: 30px 30px 0 30px;
}
.mx-nav-tabs .nav-tabs{
	border-bottom: 1px solid #C8D6E5;
}
.mx-nav-tabs .nav-tabs .nav-item{
	padding: 0 0 8px 0;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
	border-bottom: 3px solid transparent;
	font-size: 1.1rem;
	/*font-size: 1.3125rem;*/
	margin-right: 45px;
	font-weight: 400;
	color: #576574;
	transition-property: all;
	transition: 0.2s linear;
}
.mx-nav-tabs .nav-tabs .nav-item.active,
.mx-nav-tabs .nav-tabs .nav-item:hover{
	border-bottom-color: #2e86de;
	color: #2e86de;
	font-weight: 700;
}

/*==================================
	list group item
==================================*/
.list-group-item,
.list-group-item:hover{
	text-decoration:none;
}
.list-group-item:hover{
	background-color:#f9f9f9;
}

/*==================================
	drag and drop area
==================================*/
.p-drop-area-text{
	margin:10px 0 35px 0;
	color:#c8d6e5;
}

/*==================================
	dropzone custom
==================================*/
.dz-preview{
	margin-bottom: 20px;
}
.dz-preview .dz-size,
.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark,
.dz-preview.dz-error .dz-image{
	display: none;
}
.dz-preview .dz-details,
.dz-preview .dz-progress,
.dz-preview .dz-error-message{
	display: inline-block;
}
.dz-preview .dz-filename{
	color: #576574;
}
.dz-preview .dz-error-message{
	color: #ee5253;
}
.dz-preview .dz-remove,
.dz-preview .dz-cancel{
	font-size: .875rem;
	height: 24px;
	line-height: 24px;
	padding: 0 10px;
	border-radius: 2px;
	text-decoration: none;
	border: 1px solid #c8d6e5;
	color: #2e86de;
}
.dz-drag-hover{
	background-color:rgba(254, 202, 87, 0.129) !important;
}

/*==================================
	card
==================================*/
.card.mx-parent-card{
	background-color:#fff;
	border:none;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.05);
	border-radius: .56rem;
}
body.body-white .card.mx-parent-card{
	box-shadow: none;
	border-radius: .625rem;
	border: 1px solid #C8D6E5;
}
.card.mx-parent-card.card-success{
	background-color:#10ac84;
	color: #fff;
	box-shadow: none;
}
.card.mx-parent-card.card-bordered{
	box-shadow: none;
	border: 1px solid #c8d6e5;
}
.card.mx-parent-card .card-header{
	background-color: transparent;
	margin: 0 30px;
	border-bottom: 1px solid #c8d6e5;
	padding: 1.35rem 0;
	min-height: 60px;
	font-size: 1.1rem;
	/*
	min-height: 80px;
	font-size: 1.3125rem;
	*/
}
.card.mx-parent-card .card-header,
.card.mx-parent-card .card-header *{
	color:#576574;
	font-weight:700;
}
.card.mx-parent-card .card-body{
	padding:30px;
}
body.body-white .card.mx-parent-card .card-body{
	padding: 50px;
}
.card.mx-parent-card.mx-parent-card-sm .card-header{
	min-height:60px;
	border-bottom:1px solid #c8d6e5;
	padding:15px 0;
	font-size:1rem;
}
.card.mx-parent-card.mx-parent-card-sm .card-header .img-icon{
	margin-right:15px;
	display:inline-block;
	vertical-align:middle;
}
.card.mx-parent-card.mx-parent-card-sm .card-header strong{
	position:relative;
	top:4px;
}
.card.mx-parent-card.mx-class-card{
	margin-bottom:50px;
}
.card.mx-parent-card.mx-class-card .card-header{
	padding:20px 30px 20px 50px;
	margin:0;
	border-bottom:1px solid #f8f9fb;
	display:flex;
	justify-content: space-between;
}
.card.mx-parent-card.mx-class-card.card-bordered .card-header{
	min-height: 70px;
}
.card.mx-parent-card.mx-class-card.card-bordered .card-header .div-dropdown{
	height: 30px;
}
.card.mx-parent-card.mx-class-card .card-header .card-header-left{
	font-weight:400;
}
.card.mx-parent-card.mx-class-card .card-header .icon{
	margin-right:15px;
}
.card.mx-parent-card.mx-class-card .card-header .div-dropdown{
	width: 40px;
	height: 70px;
	cursor:pointer;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:16px 9px;
	background-image:url(../images/icons/svg/icon_arrow_up.svg);
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}
.card.mx-parent-card.mx-class-card.card-close .card-header,
.card.mx-parent-card.mx-class-card.mx-lesson-card.card-close .card-header{
	border-bottom:none;
}
.card.mx-parent-card.mx-class-card.card-close .card-header .div-dropdown{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(1800deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.card.mx-parent-card.mx-class-card .drop-body,
.card.mx-parent-card.mx-class-card .card-body{
	padding:30px 50px;
}
.card.mx-parent-card.mx-class-card.mx-form-card{
	margin-bottom:20px;
}
.card.mx-parent-card.mx-class-card.mx-form-card .card-body{
	padding:50px;
}
.card.mx-parent-card.mx-class-card.mx-form-card .card-body.card-body-padding-top-bottom-lg{
	padding:70px 50px;
}
.card.mx-parent-card.mx-class-card .drop-body{
	min-height:214px;
	padding:30px 49px;
}
.drop-body.ui-droppable-hover{
	background-color:rgba(254, 202, 87, 0.129);
}
.drop-body.ui-droppable-hover .hvr-grow,
#use-material-card .ui-droppable-active .hvr-grow {
    transform: scale(1.1);
}{
	transform: scale(1.1);
}
.card.mx-parent-card.mx-class-card.mx-class-card-dotted{
	border:1px dashed #ccc;
}
.card.mx-parent-card.mx-class-card.mx-lesson-card{
	box-shadow:none;
	border:1px solid #c8d6e5;
	border-radius:4px;
	margin-bottom:30px;
}
.card.mx-parent-card.mx-class-card.mx-lesson-card .card-header{
	margin:0 30px;
	border-bottom:1px solid #c8d6e5;
	padding: 10px 0 10px 0;
	min-height:50px;
	font-size:1.125rem;
	color:#576574;
}
.card.mx-parent-card.mx-class-card.mx-lesson-card .card-header .div-dropdown{
	height:30px;
	margin-right: -10px;
}
.card.mx-parent-card.mx-class-card.mx-lesson-card .card-body{
	padding:10px 30px 30px 30px;
}
.row.row-cards,
.row.row-cards > .col{
	margin:0;
	padding:0;
}
.row.row-cards > .col,
.row.row-cards > .col > .col-header{
	overflow: visible !important;
}
.row.row-cards{
	justify-content: flex-start;
}
.row.row-cards > .col{
	min-height:330px;
	/*min-height:340px;*/
	/* 追加 */
	max-height:330px;
	border-radius: .56rem;
	background-color:#fff;
	border:1px solid #c8d6e5;
	overflow:hidden;
	margin-bottom:30px;
	position:relative;
	text-decoration:none !important;
}
.row.row-cards.row-cards-col-4 > .col{
	flex-basis:20%;
	max-width:24%;
	margin-right:10px;
	/*flex-basis:31.25%;
	max-width:31.25%;
	margin-right:3%;*/
}
.row.row-cards.row-cards-col-4 > .col:nth-child(3n){
	/*margin-right:0;*/
}
.row.row-cards > .col > .col-header{
	background-color:#c8d6e5;
	text-align:center;
	height:180px;
	line-height:180px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	padding: 0 30px;
	color: #fff;
	border-radius: .56rem .56rem 0 0;
}
.row.row-cards > .col > .col-header.line-height-unset{
	line-height: 1.5 !important;
}
.row.row-cards > .col > .col-body{
	padding: 15px 25px;
}
.row.row-cards > .col > .col-body.col-body-table-view{
	display: table;
	height: calc(100% - 180px);
	width: 100%;
	padding: 0 25px 15px 25px;
}
.row.row-cards > .col > .col-body.col-body-table-view .col-body-table-find-table-obj{
	display: table-cell;
	vertical-align: middle;
}
.row.row-cards > .col > .col-body .col-title{
	color: #576574;
	font-weight: 700;
	font-size: 1.05rem;
	/*font-size: 1.3125rem;*/
}
.row.row-cards > .col > .col-body .col-description{
	color:#8395A7;
	font-size:.875rem;
	margin-top:15px;
}
.row.row-cards > .col > .col-footer{
	padding:0 30px 20px 30px;
	color:#8395a7;
	position:absolute;
	z-index:1;
	left:0;
	right:0;
	bottom:0;
}
.row.row-cards .div-class-edit-menu{
	position: absolute;
	z-index: 3;
	right: 5px;
	top: 4px;
}
.row.row-cards .div-class-edit-menu .div-class-edit-icon{
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	border-radius: 36px;
	position: relative;
	transition-property: all;
	transition: 0.3s linear;
}
.row.row-cards .div-class-edit-menu .div-class-edit-icon:hover{
	background-color: rgba(34, 47, 62, 0.5);
}
.row.row-cards .div-class-edit-menu .div-class-edit-icon span,
.row.row-cards .div-class-edit-menu .div-class-edit-icon::before,
.row.row-cards .div-class-edit-menu .div-class-edit-icon::after{
	display: block;
	width: 4px;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
	position: absolute;
	z-index: 1;
	top: 50%;
	margin-top: -2px;
}
.row.row-cards .div-class-edit-menu .div-class-edit-icon span{
	left: 50%;
	margin-left: -2px;
}
.row.row-cards .div-class-edit-menu .div-class-edit-icon::before,
.row.row-cards .div-class-edit-menu .div-class-edit-icon::after{
	content: '';
}
.row.row-cards .div-class-edit-menu .div-class-edit-icon::before{
	left: 10px;
}
.row.row-cards .div-class-edit-menu .div-class-edit-icon::after{
	right: 10px;
}
.row.row-cards .div-class-edit-menu .div-menu-list{
	display: none;
	position: absolute;
	z-index: 2;
	top: 30px;
	left: -20px;
	border: 1px solid #C8D6E5;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
	background-color: #fff;
	padding: 10px 20px;
	min-width: 200px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list{
	border-bottom: 1px solid #C8D6E5;
	padding: 15px 0 15px 25px;
	cursor: pointer;
	font-size: .875rem;
	background-position: 10px center;
	background-repeat: no-repeat;
	line-height: 1;
	color: #576574;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list:hover{
	background-color: #f9f9f9;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list:last-child{
	border-bottom: none;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list.div-edit{
	background-image: url(../images/icons/svg/icon_menu_edit.svg);
	background-size: 20px 20px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-addTeacher{
    background-image: url(../images/icons/svg/icon_menu_addstudent.svg);
    background-size: 16px 20px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list.div-copy{
	background-image: url(../images/icons/svg/icon_menu_copy.svg);
	background-size: 16px 20px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list.div-remove{
	background-image: url(../images/icons/svg/icon_menu_remove.svg);
	background-size: 17px 19px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list.div-archive{
    background-image: url(../images/icons/svg/icon_star_active.svg);
    background-size: 17px 19px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list.div-cancel-archive{
    background-image: url(../images/icons/svg/icon_folder_remove.svg);
    background-size: 17px 19px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list.div-teams{
	background-image: url(../images/icons/svg/icon_menu_teams.svg);
	background-size: 17px 19px;
}
.row.row-cards .div-class-edit-menu .div-menu-list .div-list.div-teams-import{
	background-image: url(../images/icons/svg/icon_menu_teams.svg);
	background-size: 17px 19px;
}

/*==================================
	class icons
==================================*/
.div-icons-row{
	display:flex;
	flex-wrap:wrap;
}
.div-icons-row .a-icon{
	width:140px;
	flex-basis:140px;
	margin-right:30px;
	margin-bottom:30px;
}
.div-icons-row .a-icon,
.div-icons-row .a-icon:hover,
.div-icons-row .a-icon:active,
.div-icons-row .a-icon:focus{
	text-decoration:none;
}
.div-icons-row .a-icon:nth-child(6n){
	margin-right:0;
}
.div-icons-row .a-icon .div-tool-content{
	position: relative;
}
.div-icons-row .a-icon .div-tool-content .div-remove{
	position: absolute;
	z-index: 1;
	width: 12px;
	height: 12px;
	right: 10px;
	top: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px;
	background-image: url(../images/icons/svg/icon_times_xs_white.svg);
	cursor: pointer;
}
.div-tool{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	border-radius:7px;
}
.div-tool.div-tool-warning{
	background-color:#feca57;
}
.div-tool.div-tool-danger{
	background-color:#ff6b6b;
}
.div-tool.div-tool-success{
	background-color:#1dd1a1;
}
.div-tool.div-tool-emerald{
	background-color:#00d2d3;
}
.div-tool.div-tool-primary{
	background-color:#54a0ff;
}
.div-tool.div-tool-bluehawaii{
	background-color:#0ABDE3;
}
.div-tool img{
	position:relative;
}
.div-tool.div-tool-success.notification-hvr-grow::before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
    border-radius: 15px;
    background-color: #ee5253;
    right: -4px;
    top: -4px;
    box-sizing: content-box;
		border: solid 1px #f8f9fb;
}
.div-tool.div-tool-danger.notification-hvr-grow::before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
    border-radius: 15px;
    background-color: #ee5253;
    right: -4px;
    top: -4px;
    box-sizing: content-box;
		border: solid 1px #f8f9fb;
}
.div-icons-row > .a-icon .div-tool{
	width:140px;
	height:140px;
	line-height:140px;
	border-radius: 16px;
}
.div-icons-row > .a-icon .div-tool.adjust-icon img{
	right:-5px;
}
.div-icons-row > .a-icon .div-tool.adjust-balloon-icon img{
	left: -18px;
}
.div-icons-row > .a-icon .div-tool-name{
	white-space:nowrap;
	margin-top:10px;
	text-align:center;
	color:#576574;
	text-decoration:none;
}
.div-page-title{
	margin:0 0 25px 0;
	font-size:2rem;
}
body.body-lesson .div-page-title{
	margin:0 0 30px 0;
}
.div-page-title .div-tool,
.table-content-list .div-tool{
	width:70px;
	height:70px;
	line-height:70px;
	margin-right:20px;
	display:inline-block;
	border-radius: 12px;
}
.table-content-list .div-tool{
	margin-right: 0;
}
.div-page-title .div-tool.adjust-icon img,
.table-content-list .div-tool.adjust-icon img{
	right:-3px;
}
.div-page-title .div-tool img{
	vertical-align:middle;
	top:-3px;
}
.div-page-title .div-tool .fas,
.div-page-title .div-tool .fa,
.div-page-title .div-tool .fab,
.div-page-title .div-tool .far{
	font-size: 2.5rem;
	color: #fff;
	position: relative;
	top: 2px;
}
.div-page-title .span-sub-label{
	display: inline-block;
	height: 32px;
	line-height: 30px;
	padding: 0 15px;
	margin-left: 10px;
	font-size: 1.125rem;
	text-align: center;
	border: 1px solid #8395A7;
	border-radius: 4px;
	color: #8395A7;
	vertical-align: top;
	position: relative;
	top: 17px;
}
.div-h-icon-circle{
	width: 70px;
	height: 70px;
	display: inline-block;
	text-align: center;
	margin-right: 13px;
	line-height: 70px;
	border-radius: 70px;
	overflow: hidden;
	vertical-align: middle;
}
.div-h-icon-circle.div-h-icon-circle-secondary{
	background-color: #8395A7;
}
.div-h-icon-circle img{
	line-height: 1;
}
.no-tool-message a{
	color: #576574;
	text-decoration: underline;
}
.no-tool-message a:hover{
	text-decoration: none;
}

/*==================================
	help
==================================*/
.div-help{
	display:inline-block;
	vertical-align:baseline;
	margin-left:5px;
	position:relative;
}
.div-help .span-help-toggle{
	cursor:pointer;
}
.div-help .div-help-content{
	position:absolute;
	z-index:11;
	display:none;
}
.div-help .div-help-content .div-help-content-body{
	position:relative;
	border:1px solid #c8d6e5;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.122);
	padding:25px 25px 25px 15px;
	border-radius:3px;
	color:#666;
	font-size:1rem;
	background-color:#fff;
}
.div-help .div-help-content .div-help-content-body::before{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 12px 9px;
	border-color: transparent transparent #c8d6e5 transparent;
	position: absolute;
	z-index: 1;
	top: -12px;
	left: 11px;
}
.div-help .div-help-content .div-help-content-body::after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 10px 8px;
	border-color: transparent transparent #ffffff transparent;
	position: absolute;
	z-index: 2;
	top: -10px;
	left: 12px;
}
.div-help.div-help-arrow-left .div-help-content .div-help-content-body::before{
	top: 17px;
	left: -12px;
	border-width: 9px 12px 9px 0;
	border-color: transparent #c8d6e5 transparent transparent;
}
.div-help.div-help-arrow-left .div-help-content .div-help-content-body::after{
	top: 18px;
	left: -10px;
	border-width: 8px 10px 8px 0;
	border-color: transparent #ffffff transparent transparent;
}
.div-help .div-help-content .div-help-content-body ul{
	margin-bottom:0;
}
.div-help .div-help-content .div-help-content-body ul li{
	line-height: 1.7;
	margin-bottom: 5px;
}
.div-help .div-help-content .div-help-content-body ul li:last-child,
.div-help .div-help-content .div-help-content-body p{
	margin-bottom:0;
}
.div-page-title .div-help{
	top: 5px;
}
.div-page-title .div-help .div-help-content{
	top: 52px;
	left:-12px;
}
.div-page-btns .div-center-btns .div-help .div-help-content{
	top: -8px;
	left: 30px;
}
.div-page-title .div-help .div-help-content .div-help-content-body{
	width:720px;
}
.div-page-title .div-help.div-help-xs .div-help-content .div-help-content-body{
	width:180px;
	padding: 15px;
}
.div-help.div-help-sm .div-help-content .div-help-content-body{
	width:300px;
	padding: 15px;
}
.table-borderless th .div-help{
	vertical-align: top;
	top: -5px;
}
.table-borderless th .div-help .div-help-content{
	left: -110px;
	top: 45px;
}
.table-borderless th .div-help .div-help-content .div-help-content-body{
	width:190px;
	padding: 10px 15px;
	font-size: .875rem;
}

/*==================================
	fixed message
==================================*/
body .div-fixed-message{
	display: none;
}
body.body-visible-fixed-message{
	overflow: hidden;
}
body.body-visible-fixed-message .div-fixed-message{
	display: block;
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #222f3e;
	color: #fff;
}
body.body-visible-fixed-message .div-fixed-message .div-fixed-message-table{
	display: table;
	width: 100%;
	height: 100%;
}
body.body-visible-fixed-message .div-fixed-message .div-fixed-message-table-cell{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 3vh 3vw;
	font-size: 11.1111vh;
}

/*==================================
	class lesson
==================================*/
.div-row-lesson{
	display:flex;
	justify-content:flex-start;
}
.div-row-lesson.div-row-lesson-column{
	flex-direction:column;
}
.div-row-lesson .col-left{
	width:720px;
	flex-basis:720px;
	margin-right:auto;
}
.div-row-lesson .col-right{
	width:480px;
	flex-basis:480px;
}
.div-row-lesson .col-right .div-search{
	margin-bottom:50px;
	display:flex;
	justify-content:flex-start;
}
.div-row-lesson .col-right .div-search .form-control{
	width:calc(100% - 60px);
	flex-basis:calc(100% - 60px);
	margin-right:auto;
}
.div-row-lesson .col-right .div-search .mx-btn{
	padding-left:0;
	padding-right:0;
	min-width:50px;
}
.div-row-lesson .col-right section{
	margin-bottom:25px;
}
.div-row-lesson .col-right section .div-section-title{
	margin-bottom:10px;
	color:#8395a7;
}
.div-row-lesson .col-right section .div-section-title span{
	display:inline-block;
	vertical-align:middle;
}
.div-row-lesson .col-right section .div-section-title .icon{
	margin-right:20px;
}
.div-row-lesson .col-right section .div-section-body{
	min-height:130px;
	background-color:#ebebeb;
}
.div-row-lesson .col-right section .div-section-body.div-section-item-none{
	background-color: #fff;
	border: 1px solid #EBEBEB;
}
.div-row-lesson .col-right section .div-section-body .a-add-library{
	display: block;
	text-decoration: none !important;
	height: 130px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 52px;
	background-image: url(../images/icons/svg/icon_plus_circle_gray.svg);
}
.div-row-lesson .col-right section .div-section-body .div-section-item{
	padding:20px;
	display:flex;
	justify-content:flex-start;
}
.div-row-lesson .col-right section .div-section-body .div-section-item .div-video-thumbnail{
	background-color:#000;
	width:160px;
	flex-basis:160px;
	height:90px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	margin-right:auto;
}
.div-row-lesson .col-right section .div-section-body .div-section-item .div-section-item-right{
	width:calc(100% - 170px);
	flex-basish:calc(100% - 170px);
	padding-bottom:26px;
	position:relative;
}
.div-row-lesson .col-right section .div-section-body .div-section-item .div-section-item-right .div-video-title{
	margin-bottom:10px;
	color:#576574;
}
.div-row-lesson .col-right section .div-section-body .div-section-item .div-section-item-right .button-position-bottom{
	position:absolute;
	z-index:1;
	bottom:0;
	right:0;
}
.div-waveform .div-waveform-controller{
	display:flex;
	justify-content:flex-start;
	margin-bottom:15px;
}
.div-waveform .div-waveform-controller .div-control-left{
	margin-right:auto;
}
.div-waveform .div-waveform-controller .div-control-left > img{
	margin-right:8px;
	cursor:pointer;
}
.div-waveform .div-waveform-controller .div-control-right .div-video-times span{
	display:inline-block;
	color:#8395a7;
	margin-left:5px;
}
.div-row-lesson .div-script,
.div-speech-correction-view .div-script{
	max-height:270px;
	margin-top:20px;
	overflow-y:auto;
	position:relative;
}
.div-row-lesson .div-script .div-script-body,
.div-speech-correction-view .div-script .div-script-body{
	line-height:2.25;
	color:#576574;
}
.div-row-lesson .div-script .div-script-body .div-script-item,
.div-speech-correction-view .div-script .div-script-body .div-script-item{
	margin-bottom:30px;
}
.div-row-lesson .col-left .section-script-input{
	margin-bottom: 30px;
}
.div-row-lesson .col-left .section-script-input .mx-btn,
.div-row-lesson .card-form-submission-form .mx-btn{
	min-width: 80px;
	height: 36px;
	line-height: 34px;
	border-radius: 4px;
	border: 1px solid #8395a7;
	font-size: .875rem;
	color: #8395a7;
}
.div-row-lesson .col-left .section-script-input .mx-btn.mx-btn-dark,
.div-row-lesson .card-form-submission-form .mx-btn.mx-btn-dark{
	border: 1px solid #576574;
	color: #fff;
}
.div-row-lesson .col-left .section-script-input .mx-btn img,
.div-row-lesson .card-form-submission-form .mx-btn img{
	position: relative;
	top: -2px;
}
.div-count-up-timer{
	margin-bottom: 10px;
	cursor: pointer;
}
.div-count-up-timer .div-count-up-timer-body{
	display: inline-block;
	min-width: 200px;
	height: 40px;
	border-radius: 4px;
	background-color: #8395a7;
	color: #fff;
	text-align: left;
	position: relative;
}
.div-count-up-timer .div-count-up-timer-body .div-icon-timer,
.div-count-up-timer .div-count-up-timer-body .div-reading-timer,
.div-count-up-timer .div-count-up-timer-body .div-icon-reset{
	display: inline-block;
}
.div-count-up-timer .div-count-up-timer-body .div-icon-timer{
	width: 75px;
	padding-right: 20px;
	line-height: 40px;
	text-align: right;
	font-size: 1.4rem;
}
.div-count-up-timer .div-count-up-timer-body .div-reading-timer{
	line-height: 40px;
	font-size: 1.25rem;
	position: relative;
	top: 2px;
}
.div-count-up-timer .div-count-up-timer-body .div-icon-reset{
	position: absolute;
	right: 20px;
	bottom: 9px;
	text-align: right;
	z-index: 2;
}
.div-count-up-timer .div-count-up-timer-body .div-count-start,
.div-count-up-timer .div-count-up-timer-body .div-count-stop{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.div-count-up-timer .div-count-up-timer-body .span-unit{
	position: relative;
	top: -4px;
	margin-right: 2px;
}
.div-count-up-timer .div-result-wpm{
	display: none;
	width: 320px;
	height: 130px;
	position: absolute;;
	z-index: 2;
	border: 1px solid #c8d6e5;
	background-color: #f4f4f4;
	border-radius: 3px;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.122);
	right: 110px;
	top: 50px;
}
.div-count-up-timer .div-result-wpm .div-result-wpm-body{
	padding: 24px 60px;
	text-align: center;
	position: relative;
}
.div-count-up-timer .div-result-wpm .div-result-wpm-body::before{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 12px 9px;
	border-color: transparent transparent #c8d6e5 transparent;
	position: absolute;
	z-index: 1;
	top: -12px;
	right: 11px;
}
.div-count-up-timer .div-result-wpm .div-result-wpm-body::after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 10px 8px;
	border-color: transparent transparent #f4f4f4 transparent;
	position: absolute;
	z-index: 2;
	top: -10px;
	right: 12px;
}
.div-count-up-timer .div-result-wpm .div-result-wpm-body p{
	margin-bottom: 0;
	color: #576574;
}
.div-count-up-timer .div-result-wpm .div-result-wpm-body p strong,
.div-count-up-timer .div-result-wpm .div-result-wpm-body p span{
	font-weight: 700;
	color: #54a0ff;
}
.div-count-up-timer .div-result-wpm .div-result-wpm-body p strong{
	font-size: 2rem;
}
.div-script-text span{
	position: relative;;
}
.div-script-text span.active-menu{
	color: #8395a7;
}
.div-script-text span.learned{
	color: #54a0ff;
}
.div-script-text span.unlearned{
	color: #ee5253;
}
.div-script-text span .div-menu{
	position: absolute;
	z-index: 2;
	border: 1px solid #c8d6e5;
	background-color: #f4f4f4;
	border-radius: 3px;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.122);
	width: 250px;
	padding: 14px;
	font-weight: 300;
	cursor: default;
}
.div-script-text span .div-menu.right{
	left: 20px;
}
.div-script-text span .div-menu.bottom{
	top: 30px;
}
.div-script-text span .div-menu.left{
	right: 0;
}
.div-script-text span .div-menu.top{
	bottom: 30px;
}
.div-script-text span .div-menu a{
	display: block;
	font-size: .75rem;
}
.div-script-text span .div-menu .div-seach{
	color: #576574;
}
.div-script-text span .div-menu .div-seach .div-word,
.div-script-text span .div-menu .div-seach .div-meaning{
	font-size: .875rem;
}
.div-script-text span .div-menu .div-seach .div-word{
	font-weight: 700;
}
body .div-remote-message{
	display: none;
	position: fixed;
	z-index: 12;
	bottom: 60px;
	right: 10px;
	border: 1px solid #111;
	background-color: #333;
	border-radius: 3px;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.122);
	width: 250px;
	padding: 14px;
	font-weight: 300;
	cursor: default;
	color: #fff;
}
body .div-remote-message p{
	margin-bottom: 0;
	font-size: .875rem;
}
body .div-remote-message p.p-word-name{
	font-weight: 700;
	font-size: 1rem;
}
.video-container .no-video{
	width: 720px;
	height: 365px;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 720px auto;
	background-image: url(../images/png/no-movie.png);
}
.div-row-lesson .col-right .div-questions{
	border: 1px solid #C8D6E5;
}
.div-row-lesson .col-right .div-questions .div-questions-header{
	position: relative;
	padding: 20px 30px 20px 0;
	color: #576574;
	font-size: 1.125rem;
	cursor: pointer;
	margin: 0 20px;
}
.div-row-lesson .col-right .div-questions .div-questions-header .div-toggle-arrow{
	position: absolute;
	z-index: 1;
	width: 30px;
	height: 17px;
	background-image: url(../images/icons/svg/icon_arrow_down.svg);
	background-repeat: no-repeat;
	background-size: 17px auto;
	background-position: center;
	right: 0;
	top: 26px;
	transition-property: all;
	transition: 0.3s linear;
}
.div-row-lesson .col-right .div-questions .div-questions-header .div-toggle-arrow.rotated{
	transform: rotateX(180deg);
}
.div-row-lesson .col-right .div-questions .div-questions-body{
	margin: 0 20px;
	border-top: 1px solid #C8D6E5;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question{
	padding-top: 20px;
	padding-left: 70px;
	position: relative;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-number{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 20px;
	color: #fff;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 4px;
	background-color: #8395A7;
	font-size: 1.375rem;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-question-text{
	line-height: 1.5rem;
	margin-bottom: 14px;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-check-list label{
	display: block;
	position: relative;
	margin-bottom: 19px;
	min-height: 35px;
	padding-left: 50px;
	cursor: pointer;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-check-list label .div-check-number{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	color: #fff;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border-radius: 2px;
	background-color: #C8D6E5;
	font-size: 1.125rem;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-check-list label .label-text{
	margin-top: 7px;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-check-list label input[type="radio"],
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-check-list label input[type="checkbox"]{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-check-list label.checked .label-text{
	color: #10AC84;
}
.div-row-lesson .col-right .div-questions .div-questions-body .div-question .div-check-list label.checked .div-check-number{
	background-color: #10AC84;
}
.div-row-lesson .col-right .div-questions-submit{
	margin: 40px 0 20px 0;
	text-align: right;
}
.div-row-lesson .col-right .div-questions-submit .mx-btn{
	width: 200px;
	height: 50px;
	font-size: 1rem;
}
.arrow_right_rotetd{
	transform: rotateY(180deg);
}
body.body-lesson.body-lesson-bg-gray{
	background-color: #F7F8FA;
}
.card.mx-parent-card.mx-class-card.mx-lesson-card.mx-class-card-gray{
	border: none;
}
.card.mx-parent-card.mx-class-card.mx-lesson-card.mx-class-card-gray .card-header{
	margin: 0;
	min-height: 50px;
	padding: 10px 30px;
	background-color: #C8D6E5;
}
.card.mx-parent-card.mx-class-card.mx-lesson-card.mx-class-card-gray .card-header *{
	color: #fff;
	font-size: 1.125rem;
}
.div-wave-controller{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-top: 50px;
}
.div-wave-controller .div-wave-controller-left{
	flex-basis: 720px;
	min-width: 720px;
	max-width: 720px;
}
.div-wave-controller .div-wave-controller-right{
	flex: 1;
	margin-left: auto;
}
.div-wave-controller .video-timeline{
	display: none;
}
.div-wave-controller .div-wave-controller-right .div-btns{
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.div-wave-controller .div-wave-controller-right .div-btns .div-btn{
	width: 32px;
	height: 32px;
	margin-left: 10px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px;
}
.div-wave-controller .div-wave-controller-right .div-btns .div-text{
	margin-left: 30px;
	color: #8395A7;
	line-height: 32px;
}
.div-wave-controller .div-wave-controller-right .div-btns .div-btn.div-dl{
	/*background-color: #F8FAFB;
	border-radius: 4px;*/
	background-image: url(../images/icons/svg/icon_wave_dl.svg);
	/*background-size: 14px auto;*/
}
.div-wave-controller .div-wave-controller-right .div-btns .div-btn.div-lg{
	background-image: url(../images/icons/svg/icon_wave_large.svg);
}
.div-wave-controller .div-wave-controller-right .div-btns .div-btn.div-sm{
	background-image: url(../images/icons/svg/icon_wave_small.svg);
}
.div-wave-controller .div-wave-controller-right .div-btns .div-btn.div-zoomout{
	background-image: url(../images/icons/svg/icon_wave_zoomout.svg);
}
.div-wave-controller .div-wave-controller-right .div-btns .div-btn.div-fill{
	background-image: url(../images/icons/svg/icon_wave_fill.svg);
}
.div-wave-controller .div-wave-controller-right .div-btns .div-btn.div-zoomin{
	background-image: url(../images/icons/svg/icon_wave_zoomin.svg);
}
.div-speech-correction-view .div-wave{
	margin-top: 10px;
	overflow-x: auto;
	white-space: nowrap;
}
.div-speech-correction-view .div-rec-parts,
.div-speech-correction-view .div-rec-parts .div-rec,
.div-speech-correction-view .div-rec-parts .div-rec-player,
.div-speech-correction-view .div-rec-parts .div-rec-levels,
.div-speech-correction-view .div-rec-parts .div-rec-levels-bar{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-speech-correction-view .div-rec-parts .button-rec,
.div-speech-correction-view .div-rec-parts .button-stop{
	flex-basis: 70px;
	min-width: 70px;
	line-height: 70px;
	height: 50px;
	line-height: 50px;
	border-radius: 6px;
	color: #fff;
	font-size: 1.125rem;
	padding: 0;
	margin-right: 20px;
}
.div-speech-correction-view .div-rec-parts .button-rec{
	background-color: #EE5253;
}
.div-speech-correction-view .div-rec-parts .button-stop{
	background-color: #576574;
}
.div-speech-correction-view .div-rec-parts .div-rec-levels-bar{
	flex-basis: 126px;
	min-width: 126px;
	height: 18px;
	margin-top: 18px;
	position: relative;
}
.div-speech-correction-view .div-rec-parts .div-rec-levels .div-rec-bar-border{
	background: repeating-linear-gradient(to right, #C8D6E5, #C8D6E5 2px, transparent 2px, transparent 4px);
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.div-speech-correction-view .div-rec-parts .div-rec-levels .div-rec-bar{
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background-color:#EE5253;
}
.div-speech-correction-view .div-rec-parts .div-times{
	margin-left: 14px;
	line-height: 50px;
	white-space: nowrap;
}
.div-speech-correction-view .div-rec-parts .div-rec-player{
	margin-left: 28px;
}
.div-speech-correction-view .div-rec-parts .div-rec-player .div-play{
	flex-basis: 30px;
	min-width: 30px;
	height: 50px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(../images/icons/svg/icon_play.svg);
	background-size: 30px auto;
	margin-right: 25px;
	cursor: pointer;
}
.div-speech-correction-view .div-rec-parts .div-rec-player .div-pause{
	flex-basis: 30px;
	min-width: 30px;
	height: 50px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(../images/icons/svg/icon_pause.svg);
	background-size: 25px auto;
	margin-right: 25px;
	cursor: pointer;
}
.div-speech-correction-view .div-rec-parts .div-rec-player .div-play.disabled{
	background-image: url(../images/icons/svg/icon_play_disabled.svg);
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller{
	width: 95px;
	flex-basis: 95px;
	margin-top: 8px;
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-rec-audio-volume-controller-body{
	height: 100%;
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-rec-audio-volume-btns{
	float: left;
	height: 100%;
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-muted {
	height: 100%;
	width: 27px;
	background-position: center 8px;
	background-image: url(../images/icons/svg/icon_volume.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	margin-right: 7px;
	cursor: pointer;
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-muted.disabled{
	background-image: url(../images/icons/svg/icon_volume_disabled.svg);
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-unmuted {
	height: 100%;
	width: 27px;
	background-position: center 8px;
	background-image: url(../images/icons/svg/icon_volume_muted.svg);
	background-repeat: no-repeat;
	background-size: 22px auto;
	margin-right: 7px;
	cursor: pointer;
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-rec-audio-volume-bars{
	margin-top: 16px;
	float: left;
	height: 100%;
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-rec-audio-volume-bars .rec-audio-volume{
	width: 60px;
	height: 5px;
	background-color: #c8d6e5;
	cursor: pointer;
}
.div-speech-correction-view .div-rec-parts .div-rec-audio-volume-controller .div-rec-audio-volume-bars .rec-audio-volume-bar{
	height: 100%;
	width: 0%;
	background-color: #576574;
}
.div-speech-correction-view .div-panels{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
	margin-top: 20px;
}
.div-speech-correction-view .div-panels .div-panel{
	min-height: 270px;
	background-color: #F8FAFB;
}
.div-speech-correction-view .div-panels .div-panel.panel-left{
	flex-basis: 270px;
	min-width: 270px;
	max-width: 270px;
	margin-right: 30px;
}
.div-speech-correction-view .div-panels .div-panel.panel-center{
	flex-basis: 700px;
	min-width: 700px;
	max-width: 700px;
	margin-right: 30px;
}
.div-speech-correction-view .div-panels .div-panel.panel-right{
	flex-basis: 190px;
	min-width: 190px;
	max-width: 190px;
}
.div-speech-correction-view .div-panels .div-panel .div-panel-header{
	background-color: #C8D6E5;
	padding: 5px 10px;
	font-size: 1.125rem;
	color: #fff;
}
.div-speech-correction-view .div-panels .div-panel .div-panel-body{
	padding: 10px 27px;
}
.div-speech-correction-view .div-panels .div-panel .div-panel-body .div-bars .div-label{
	font-size: .875rem;
	margin-bottom: 2px;
}
.div-speech-correction-view .div-panels .div-panel .div-panel-body .div-bars .progress{
	border: 1px solid #C8D6E5;
	border-radius: 0;
	margin-bottom: 2px;
	background-color: transparent;
}
.div-speech-correction-view .div-panels.submit-files .div-panel {
	flex: 1;
	min-height: 0;
	background-color: transparent;
}
.div-speech-correction-view .div-panels.submit-files .div-panel .div-panel-body{
	padding: 10px 0 0 0;
}
.div-speech-correction-view .div-panels.submit-files .div-list-item{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
	border-bottom: 1px solid #C8D6E5;
	padding: 10px 0;
}
.div-speech-correction-view .div-panels.submit-files .div-list-item .div-file-name{
	padding-left: 50px;
	position: relative;
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(../images/icons/png/icon-music-document.png);
	background-size: 37px auto;
	min-height: 50px;
	color: #2E86DE;
	display: flex;
	align-items: center;
}
.div-speech-correction-view .div-panels.submit-files .div-list-item .div-audio-controller{
	margin-left: 23px;
	margin-top: 7px;
}
.div-speech-correction-view .div-panels.submit-files .div-list-item .audio-player-secondary .div-audio-controller{
	background-color: transparent;
	padding: 0;
	border-radius: 0;
}
.div-speech-correction-view .div-panels.submit-files .div-list-item .audio-player-secondary .div-audio-controller .div-progress,
.div-speech-correction-view .div-panels.submit-files .div-list-item .audio-player-secondary .div-audio-controller .time{
	display: none;
}
.div-speech-correction-view .div-panels.submit-files .div-file-remove{
	padding-top: 12px;
	cursor: pointer;
}
.div-speech-correction-view .div-panels.submit-files .button-submit-file{
	margin-left: auto;
	flex-basis: 200px;
	min-width: 200px;
	max-width: 200px;
	height: 50px;
	padding: 0;
	line-height: 50px;
	border-radius: 6px;
	font-size: 1.125rem;
}
.div-speech-correction-view .div-panels.submit-files .button-submit-file .icon-right{
	margin-left: 8px;
	position: relative;
	top: 4px;
}

/*==================================
	class lesson record parts
==================================*/
.mx-rec-card{
	box-shadow: none;
	border: 1px solid #c8d6e5;
	border-radius: 4px;
	background-color: #fff;
}
.mx-rec-card .card-body{
	padding: 30px !important;
}
.div-recording-panel,
.div-recording-panel .div-recording-controls{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-recording-panel .div-recording-panel-title{
	flex-basis: 200px;
	min-width: 200px;
	max-width: 200px;
}
.div-recording-panel .div-recording-controls .div-time{
	flex-basis: 70px;
	min-width: 70px;
	max-width: 70px;
}
.div-recording-panel .div-recording-panel-title,
.div-recording-panel .div-recording-controls .div-time,
.div-recording-panel .div-recording-controls .div-media-byte{
	line-height: 40px;
}
.div-recording-panel .div-recording-controls .div-start-rec,
.div-recording-panel .div-recording-controls .div-stop-rec{
	width: 40px;
	height: 40px;
	border-radius: 40px;
	line-height: 40px;
	text-align: center;
	background-color: #c8d6e5;
	margin-right: 23px;
    cursor: pointer;
}
.div-recording-panel .div-recording-controls .div-start-rec .fas{
	color: #e82c0c;
	font-size: 1.375rem;
	position: relative;
	top: 1px;
}
.colorGray{
    color: #abb4c1 !important;
}
.div-recording-panel .div-recording-controls .div-stop-rec .fas{
	color: #576574;
	font-size: 1.0625rem;
	position: relative;
	top: -1px;
}
.div-recording-panel .div-recording-controls .div-rec-progress{
	width: 126px;
	height: 18px;
	margin-top: 11px;
	background-color: #c8d6e5;
	position: relative;
}
.div-recording-panel .div-recording-controls .div-rec-progress .progress-bar-entity{
	height: 18px;
	width: 0;
	background-color: #576574;
}
.div-recording-panel .div-recording-controls .div-rec-progress .progress-bar-mesh{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18px;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.div-recording-panel .div-recording-controls .div-rec-progress .progress-bar-mesh span{
	display: block;
	height: 18px;
	width: 2px;
	margin-right: 2px;
	background-color: #fff;
}
.div-recording-panel .div-recording-controls .div-rec-progress .progress-bar-mesh span:last-child{
	margin-right: 0;
}
.div-recording-panel .div-recording-controls .div-media-byte{
	margin-left: 25px;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body{
	padding: 20px;
	position: relative;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item{
	margin-bottom: 20px;
	padding: 0;
	flex-wrap: nowrap;
	border-bottom: none;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item:last-child{
	margin-bottom: 0;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-icon{
	flex-basis: 23px;
	max-width: 23px;
	min-width: 23px;
	margin-right: 12px;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-title{
	font-size:.875rem;
	flex-basis: 200px;
	max-width: 160px;
	min-width: 160px;
	margin-right: 10px;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-title span{
	display: block;
	height: 32px;
	line-height: 32px;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-btns{
	flex-basis: 190px;
	max-width: 230px;
	min-width: 230px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-top: 3px;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-btns .mx-btn{
	width: 60px;
	padding: 0;
	margin-right: 5px;
	border-radius: 2px;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-btns .mx-btn:not(.mx-btn-dark){
	background-color: transparent;
	color: #8395a7;
	border: 1px solid #8395a7;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-btns .mx-btn.mx-btn-dark{
	border:1px solid transparent;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-btns .mx-btn:last-child{
	margin-right: 0;
}
.div-row-lesson .col-right section .div-section-body.div-section-list-body .div-section-items .div-section-item .div-submission-btns .div-easy-audio-player{
	position: relative;;
	top: -2px;
}

/*==================================
	class lesson grade
==================================*/
.div-lesson-grades .div-grade-header{
	padding-bottom: 10px;
	border-bottom: 1px solid #C8D6E5;
	margin-bottom: 30px;
	display: flex;
	justify-content: flex-start;
	width: 100%;
}
.div-lesson-grades .div-grade-header .div-left {
	display: flex;
	justify-content: flex-start;
}
.div-lesson-grades .div-grade-header .div-left .div-points{
	display: flex;
	justify-content: flex-start;
	color: #8395A7;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-point,
.div-lesson-grades .div-grade-header .div-left .div-points .div-separator,
.div-lesson-grades .div-grade-header .div-left .div-points .div-max{
	font-size: 3.75rem;
	line-height: 1;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-point{
	color: #10AC84;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-separator{
	font-size: 3rem;
	position: relative;
	top: 4px;
	margin: 0 3px;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-unit{
	font-size: 1.3125rem;
	font-size: 1.3125rem;
	position: relative;
	top: 28px;
}
.div-lesson-grades .div-grade-header .div-left .div-stars{
	margin: 29px 0 0 15px;
}
.div-lesson-grades .div-grade-header .div-right{
	margin-left: auto;
}
.div-lesson-grades .div-grade-header .div-right .div-time{
	margin-top: 32px;
	color: #8395A7;
}
.div-lesson-grades .div-grade-header .div-right .div-time img{
	position: relative;
	top: -2px;
	margin-right: 2px;
}
.div-lesson-grades .div-grade-header .div-right .div-time .span-time{
	margin-left: 15px;
}
.div-lesson-grades .div-grade-body .section{
	height: 283px;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,.15);
	overflow-y: auto;
	margin-bottom: 20px;
}
.card .div-lesson-grades .div-grade-body .section{
	height: auto;
	border-radius: 0;
	box-shadow: none;
	padding-bottom: 20px;
	border-bottom: 1px solid #C8D6E5;
}
.card .div-lesson-grades .div-grade-body .section:last-child{
	padding-bottom: 0;
	border-bottom: none;
}
.card .div-lesson-grades .div-grade-body .section .section-body{
	margin-left: 0;
	margin-right: 0;
}
.div-lesson-grades .div-grade-body .section .section-body{
	margin: 30px;
	padding-left: 80px;
	position: relative;
}
.div-lesson-grades .div-grade-body .section .section-body .div-icon-correct,
.div-lesson-grades .div-grade-body .section .section-body .div-icon-miss{
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 50px;
	top: 0;
	left: 0;
	display: none;
}
.div-lesson-grades .div-grade-body .section .section-body .div-icon-correct{
	border: 3px solid #10AC84;
	border-radius: 50px;
}
.div-lesson-grades .div-grade-body .section .section-body .div-icon-miss{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px;
	background-image: url(../images/icons/svg/icon_times_danger_lg.svg);
}
.div-lesson-grades .div-grade-body .section.correct .section-body .div-icon-correct,
.div-lesson-grades .div-grade-body .section.miss .section-body .div-icon-miss{
	display: block;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question{
	padding-left: 80px;
	position: relative;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 4px;
	background-color: #8395A7;
	color: #fff;
	font-size: 1.375rem;
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-question-text{
	margin-top: 10px;
	font-size: 1.125rem;
	margin-bottom: 30px;
	font-weight: 700;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice{
	position: relative;
	margin-bottom: 20px;
	padding-left: 50px;
	min-height: 35px;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice:last-child{
	margin-bottom: 0;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice .div-choices-number{
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border-radius: 2px;
	font-size: 1.125rem;
	color: #fff;
	background-color: #C8D6E5;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice .div-choices-text{
	margin-top: 4px;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.selected .div-choices-number{
	background-color: #FF6B6B;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.selected .div-choices-text{
	color: #FF6B6B;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.correct .div-choices-number{
	background-color: #10AC84 !important;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.correct .div-choices-text{
	color: #10AC84 !important;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade{
	margin-bottom: 30px;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-label{
	width: 170px;
	height: 50px;
	line-height: 50px;
	padding: 0 19px;
	border-radius: 4px;
	background-color: #10AC84;
	color: #fff;
	font-size: 1.375rem;
	margin-bottom: 30px;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .my-answer .div-label{
	background-color: #8395A7;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .correct-answer{
	margin-bottom: 30px;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-correct-text{
	font-size: 1.3125rem;
	line-height: 2rem;
	color: #576574;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-correct-text .span-u{
	position: relative;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-correct-text .span-u::before{
	content: '';
	height: 1px;
	background-color: #ee5253;
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 50%;
	margin-top: -0.1px;
}

/*==================================
	class lesson speaking unit
==================================*/
.div-lesson-speaking-units .div-lesson-unit-header{
	border-bottom: 1px solid #C8D6E5;
	display: flex;
	justify-content: flex-start;
	width: 100%;
}
.div-lesson-speaking-units .div-lesson-unit-header .div-unit{
	font-size: 1.5rem;
	color: #54A0FF;
	border-bottom: 5px solid #54A0FF;
	padding: 5px 0;
	margin-right: 45px;
}
.div-lesson-speaking-units .div-lesson-unit-header .div-unit-title{
	font-size: 1.125rem;
	padding: 10px 0;
}
.div-lesson-speaking-units .div-units{
	margin: 0 -50px;
}
.div-lesson-speaking-units .table-unit-list{
	width: 100%;
}
.div-lesson-speaking-units .table-unit-list th,
.div-lesson-speaking-units .table-unit-list td{
	padding: 27px 15px;
	vertical-align: middle;
	border-bottom: 1px solid #C8D6E5;
	cursor: pointer;
}
.div-lesson-speaking-units .table-unit-list tr:hover th,
.div-lesson-speaking-units .table-unit-list tr:hover td{
	background-color: #F6F6F6;
	transition-property: all;
	transition: 0.3s linear;
}
.div-lesson-speaking-units .table-unit-list .th-level{
	padding-left: 50px;
	width: 160px;
	color: #54A0FF;
	font-weight: 700;
	font-size: 1.125rem;
}
.div-lesson-speaking-units .table-unit-list .td-ja{
	width: 200px;
}
.div-lesson-speaking-units .table-unit-list .td-ja,
.div-lesson-speaking-units .table-unit-list .td-en{
	font-size: .875rem;
}
.div-lesson-speaking-units .table-unit-list .td-stars{
	width: 90px;
	padding-right: 0;
	white-space: nowrap;
}
.div-lesson-speaking-units .table-unit-list .td-stars img{
	margin-right: 3px;
}
.div-lesson-speaking-units .table-unit-list .td-arrow{
	padding-right: 50px;
	width: 67px;
	padding-left: 0;
}

.div-lesson-speaking-writing-unit-form .div-unit-header{
	margin-left: -50px;
	margin-right: -50px;
	border-bottom: 1px solid #F0F3F3;
	padding: 16px 20px;
	display: flex;
	justify-content: flex-start;
	width: calc(100% + 100px);
	margin-bottom: 10px;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-unit-name{
	font-size: 1.125rem;
	color: #54A0FF;
	font-weight: 700;
	margin-right: auto;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin-top: 2px;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level .div-text{
	display: flex;
	justify-content: flex-start;
	color: #C8D6E5;
	font-weight: 700;
	margin-right: 10px;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level .div-stars{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level .div-stars img{
	margin-right: 3px;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question{
	border-bottom: 1px solid #C8D6E5;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-section-label{
	margin-top: 30px;
	border-radius: 70px;
	height: 70px;
	color: #fff;
	font-size: .875rem;
	display: flex;
	align-items: center;
	margin-right: 30px;
	flex-basis: 70px;
	max-width: 70px;
	min-width: 70px;
	padding: 0 5px;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-section-label span{
	flex: 1;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-question-text{
	margin-top: 30px;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-question-text .div-word{
	font-size: 2rem;
	line-height: 2rem;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-question-text .div-ja{
	line-height: 2rem;
	color: #C8D6E5;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-image{
	margin-left: auto;
	flex-basis: 200px;
	max-width: 200px;
	min-width: 200px;
	text-align:right;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-image img{
	max-width: 200px;
}
.div-lesson-speaking-writing-unit-form .section-form{
	padding-top: 20px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form{
	padding-left: 100px;
	position: relative;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-number{
	position: absolute;
	z-index: 1;
	width: 70px;
	height: 70px;
	line-height: 70px;
	border-radius: 6px;
	color: #fff;
	background-color: #54A0FF;
	text-align: center;
	top: 0;
	left: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-number strong{
	font-size: 1.75rem;
	font-weight: 300;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-number span{
	font-size: .875rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-img{
	margin-left: auto;
	flex-basis: 200px;
	text-align:right;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-img img{
	max-width: 400px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-question-text{
	font-size: 1.125rem;
	margin-bottom: 32px;
	margin-top: 20px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents{
	flex: 1;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 20px;
	background-color: #F7F8FA;
	border-radius: 6px;
	padding: 10px 18px;
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .div-audio-text{
	flex-basis: 130px;
	display: flex;
	align-items: center;
	line-height: 2rem;
	position: relative;
	top: -2px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .div-audio-controller{
	display: flex;
	align-items: center;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .audio-player-secondary .div-audio-controller{
	background-color: transparent;
	padding: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well{
	padding: 13px 18px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 10px;
	background-color: #54A0FF;
	border-radius: 6px;
	width: 100%;
	position: relative;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text{
	color: #fff;
	margin-right: 30px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text strong,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text span{
	display: block;
	line-height: 2rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text strong{
	font-size: 1.3125rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text span{
	font-size: .875rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-controller{
	align-items: center;
	display: flex;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder{
	padding: 0;
	background-color: transparent;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder .div-progress .div-progress-border{
	background: repeating-linear-gradient(90deg, #54a0ff 0, #54a0ff, transparent 3px, transparent 3px);
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder .div-rec,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder .div-stop{
	margin-right: 5px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-hint{
	padding-left: 50px;
	margin-top: 30px;
	position: relative;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-hint .div-label{
	width: 40px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background-color: #c8d6e5;
	border-radius: 2px;
	font-size: .75rem;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-hint .div-hint-text{
	font-size: .875rem;
	margin-top: 2px;
	color: #8395A7;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 10px;
	background-color: #576574;
	border-radius: 6px;
	padding: 25px 18px;
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-audio-text{
	flex-basis: 130px;
	display: flex;
	align-items: center;
	line-height: 2rem;
	position: relative;
	top: -2px;
	color: #fff;
	font-weight: 700;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-audio-controller{
	display: flex;
	align-items: center;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .audio-player-secondary .div-audio-controller{
	background-color: transparent;
	padding: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-btns .div-play{
	background-image: url(../images/icons/svg/icon_play_white.svg);
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-btns .div-pause{
	background-image: url(../images/icons/svg/icon_pause_white_radius.svg);
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .audio-player-secondary .div-progress{
	margin-top: 3px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .audio-player-secondary .time{
	color: #fff;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .div-separator,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .max-time,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-separator,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .max-time{
	display: none;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-reset{
	color: #fff;
	padding-left: 33px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 30px;
	background-image: url(../images/icons/svg/icon_reset.svg);
	height: 30px;
	font-size: .75rem;
	margin-left: 12px;
	padding-top: 7px;
	cursor: pointer;
}
.div-grade-unit-body .div-answer-header{
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	border-radius: 4px;
	margin-bottom: 30px;
}
.div-grade-unit-body .div-answer-section{
	margin-bottom: 30px;
}
.div-grade-unit-body .div-answer-section-header{
	padding-left: 70px;
	margin-bottom: 10px;
	position: relative;
	min-height: 50px;
}
.div-grade-unit-body .div-answer-section-header .div-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	font-size: 1.75rem;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	background-color: #54A0FF;
	border-radius: 4px;
}
.div-grade-unit-body .div-answer-section-header .div-point{
	color: #8395A7;
	font-size: 1.75rem;
	margin-top: 5px;
}
.div-grade-unit-body .div-answer-section-header .div-point,
.div-grade-unit-body .div-answer-section-header .div-point *{
	font-weight: 700;
}
.div-grade-unit-body .div-answer-section-header .div-point strong{
	color: #54A0FF;
}
.div-grade-unit-body .div-correct-answer,
.div-grade-unit-body .div-my-answer{
	padding: 25px 0;
	display: flex;
	justify-content: flex-start;
	width: 100%;
	border-bottom: 1px solid #F0F3F3;
}
.div-grade-unit-body .div-correct-answer .div-correct-answer-text,
.div-grade-unit-body .div-my-answer .div-my-answer-text{
	flex-basis: 120px;
	border-right: 1px dotted #C8D6E5;
	min-height: 34px;
	font-size: 1.125rem;
	color: #54A0FF;
	padding-top: 2px;
}
.div-grade-unit-body .div-question-text{
	min-height: 34px;
	font-size: 1.125rem;
	border-left: 1px dotted #C8D6E5;
	padding-left: 20px;
	padding-top: 2px;
}
.div-grade-unit-body .audio-player-secondary .div-audio-controller{
	background-color: #fff;
	padding: 5px 17px;
}
.div-grade-unit-body .audio-player-secondary .div-progress,
.div-grade-unit-body .audio-player-secondary .time{
	display: none;
}
.div-grade-unit-body .audio-player-secondary .div-btns{
	margin-right: 0;
}
.div-grade-unit-body .audio-player-secondary .div-btns .div-play {
	background-image: url(../images/icons/svg/icon_play_primary.svg);
}
.div-grade-unit-body .audio-player-secondary .div-btns .div-pause {
	background-image: url(../images/icons/svg/icon_pause_primary.svg);
}
.div-grade-unit-body .div-answer-header-toggle{
	cursor: pointer;
	position: relative;
}
.div-grade-unit-body .div-answer-header-toggle .icon-arrow{
	position: absolute;
	z-index: 1;
	right: 20px;
	top: 20px;
	transition-property: all;
	transition: 0.3s linear;
}
.div-grade-unit-body .hide-body .div-answer-header-toggle .icon-arrow{
	transform: rotateX(180deg);
}
.div-grade-unit-body .div-answer-body .div-section-question {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-label {
	margin-top: 10px;
	border-radius: 70px;
	height: 70px;
	color: #fff;
	font-size: .875rem;
	display: flex;
	align-items: center;
	margin-right: 30px;
	flex-basis: 70px;
	max-width: 70px;
	min-width: 70px;
	padding: 0 5px;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-label span {
	flex: 1;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-question-text {
	margin-top: 10px;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-question-text .div-word {
	font-size: 2rem;
	line-height: 2rem;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-question-text .div-ja {
	line-height: 2rem;
	color: #C8D6E5;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-image {
	margin-left: auto;
	flex-basis: 200px;
	max-width: 200px;
	min-width: 200px;
	text-align: right;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-image img {
	max-width: 200px;
}
.div-grade-unit-body .div-info-list{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 30px;
}
.div-grade-unit-body .div-info-list .div-info-uls{
	flex:1;
	flex-basis: 580px;
	margin-right: auto;
}
.div-grade-unit-body .div-info-list .div-info-uls ul,
.div-grade-unit-body .div-info-list .div-info-uls ul li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.div-grade-unit-body .div-info-list .div-info-uls ul li{
	margin-bottom: 20px;
	padding-left: 20px;
	line-height: 1.875rem;
	position: relative;
}
.div-grade-unit-body .div-info-list .div-info-uls ul li::before{
	content: '';
	width:12px;
	height: 12px;
	background-color: #FECA57;
	display: block;
	border-radius: 12px;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 9px;
}
.div-grade-unit-body .div-info-list .div-info-uls ul li .div-examples{
	margin-top: 20px;
}
.div-grade-unit-body .div-info-list .div-info-uls ul li .div-examples .div-example{
	margin-bottom: 30px;
	padding-left: 35px;
	position: relative;;
}
.div-grade-unit-body .div-info-list .div-info-uls ul li .div-examples .div-example .span-label{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 5px;
	font-size: .75rem;
	color: #fff;
	background-color: #8495a6;
	border-radius: 2px;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
}
.div-grade-unit-body .div-info-list .div-info-images{
	display: flex;
	flex-direction: column;
}
.div-grade-unit-body .div-info-list .div-info-images .div-info-image-item{
	margin-bottom: 10px;
}
.div-grade-unit-body .div-relation-info{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
	margin-bottom: 30px;
}
.div-grade-unit-body .div-relation-info .div-left{
	flex-basis: 420px;
	margin-right: auto;
}
.div-grade-unit-body .div-relation-info .div-left .div-table{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
}
.div-grade-unit-body .div-relation-info .div-left .div-table-head{
	color: #1DD1A1;
	font-weight: 700;
	padding-right: 15px;
	border-right: 2px solid #C8D6E5;
	margin-right: 15px;
}
.div-grade-unit-body .div-relation-info .div-left .div-table-body .div-table-body-item{
	position: relative;
	padding-left: 1.5rem;
}
.div-grade-unit-body .div-relation-info .div-left .div-table-body .div-table-body-item::before{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 1px;
	content: '□';
}
.div-grade-unit-body .div-relation-info .div-image{
	flex-basis: 360px;
	text-align: right;
}
.div-grade-unit-body .div-scripts{
	display: flex;
	width: 100%;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-grade-unit-body .div-scripts .div-left,
.div-grade-unit-body .div-scripts .div-right{
	flex-basis: 380px;
	min-width: 380px;
	max-width: 380px;
}
.div-grade-unit-body .div-scripts .div-left{
	margin-right: 20px;
}
.div-grade-unit-body .div-scripts .div-scripts-header{
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
	background-color: #F7F8FA;
	color: #576574;
	font-weight: 700;
	margin-bottom: 20px;
}
.div-grade-unit-body .div-scripts table{
	width: 100%;
}
.div-grade-unit-body .div-scripts table th{
	width: 75px;
	font-weight: 700;
}
.div-grade-unit-body .div-scripts table th,
.div-grade-unit-body .div-scripts table td{
	line-height: 1.875rem;
	vertical-align: top;
}
.div-lesson-speaking-writing-unit-form .secition-writing-header{
	border-bottom: 1px solid #C8D6E5;
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 20px;
}
.div-lesson-speaking-writing-unit-form .secition-writing-header .div-unit {
	font-size: 1.5rem;
	color: #54A0FF;
	border-bottom: 5px solid #54A0FF;
	padding: 5px 0;
	margin-right: 45px;
}
.div-lesson-speaking-writing-unit-form .secition-writing-header .div-unit-title {
	font-size: 1.125rem;
	padding: 10px 0;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question .div-number{
	flex-basis: 70px;
	max-width: 70px;
	min-width: 70px;
	line-height: 70px;
	height: 70px;
	text-align: center;
	color: #fff;
	border-radius: 70px;
	margin-right: 20px;
	background-color: #54A0FF;
	font-size: 1.75rem;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question .div-image{
	flex-basis: 200px;
	min-width: 200px;
	max-width: 200px;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question .div-image img{
	max-width: 200px;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form{
	flex: 1;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .div-question-text-ja{
	font-size: 1.125rem;
	margin-bottom: 25px;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .div-well{
	border-radius: 4px;
	background-color: #F7F8FA;
	padding: 15px;
	margin-bottom: 40px;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .table-writing-question-form{
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .table-writing-question-form th{
	white-space: nowrap;
	font-weight: 700;
	vertical-align: top;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .table-writing-question-form .form-control{
	height: 40px;
	font-size: 1rem;
	padding: 0 0 10px 0;
}

/*==================================
	class lesson grade
==================================*/
.div-lesson-grades .div-grade-header{
	padding-bottom: 10px;
	border-bottom: 1px solid #C8D6E5;
	margin-bottom: 30px;
	display: flex;
	justify-content: flex-start;
	width: 100%;
}
.div-lesson-grades .div-grade-header .div-left {
	display: flex;
	justify-content: flex-start;
}
.div-lesson-grades .div-grade-header .div-left .div-points{
	display: flex;
	justify-content: flex-start;
	color: #8395A7;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-point,
.div-lesson-grades .div-grade-header .div-left .div-points .div-separator,
.div-lesson-grades .div-grade-header .div-left .div-points .div-max{
	font-size: 3.75rem;
	line-height: 1;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-point{
	color: #10AC84;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-separator{
	font-size: 3rem;
	position: relative;
	top: 4px;
	margin: 0 3px;
}
.div-lesson-grades .div-grade-header .div-left .div-points .div-unit{
	font-size: 1.3125rem;
	font-size: 1.3125rem;
	position: relative;
	top: 28px;
}
.div-lesson-grades .div-grade-header .div-left .div-stars{
	margin: 29px 0 0 15px;
}
.div-lesson-grades .div-grade-header .div-right{
	margin-left: auto;
}
.div-lesson-grades .div-grade-header .div-right .div-time{
	margin-top: 32px;
	color: #8395A7;
}
.div-lesson-grades .div-grade-header .div-right .div-time img{
	position: relative;
	top: -2px;
	margin-right: 2px;
}
.div-lesson-grades .div-grade-header .div-right .div-time .span-time{
	margin-left: 15px;
}
.div-lesson-grades .div-grade-body .section{
	height: 283px;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,.15);
	overflow-y: auto;
	margin-bottom: 20px;
}
.card .div-lesson-grades .div-grade-body .section{
	height: auto;
	border-radius: 0;
	box-shadow: none;
	padding-bottom: 20px;
	border-bottom: 1px solid #C8D6E5;
}
.card .div-lesson-grades .div-grade-body .section:last-child{
	padding-bottom: 0;
	border-bottom: none;
}
.card .div-lesson-grades .div-grade-body .section .section-body{
	margin-left: 0;
	margin-right: 0;
}
.div-lesson-grades .div-grade-body .section .section-body{
	margin: 30px;
	padding-left: 80px;
	position: relative;
}
.div-lesson-grades .div-grade-body .section .section-body .div-icon-correct,
.div-lesson-grades .div-grade-body .section .section-body .div-icon-miss{
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 50px;
	top: 0;
	left: 0;
	display: none;
}
.div-lesson-grades .div-grade-body .section .section-body .div-icon-correct{
	border: 3px solid #10AC84;
	border-radius: 50px;
}
.div-lesson-grades .div-grade-body .section .section-body .div-icon-miss{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px;
	background-image: url(../images/icons/svg/icon_times_danger_lg.svg);
}
.div-lesson-grades .div-grade-body .section.correct .section-body .div-icon-correct,
.div-lesson-grades .div-grade-body .section.miss .section-body .div-icon-miss{
	display: block;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question{
	padding-left: 80px;
	position: relative;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 4px;
	background-color: #8395A7;
	color: #fff;
	font-size: 1.375rem;
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-question-text{
	margin-top: 10px;
	font-size: 1.125rem;
	margin-bottom: 30px;
	font-weight: 700;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice{
	position: relative;
	margin-bottom: 20px;
	padding-left: 50px;
	min-height: 35px;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice:last-child{
	margin-bottom: 0;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice .div-choices-number{
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border-radius: 2px;
	font-size: 1.125rem;
	color: #fff;
	background-color: #C8D6E5;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice .div-choices-text{
	margin-top: 4px;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.selected .div-choices-number{
	background-color: #FF6B6B;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.selected .div-choices-text{
	color: #FF6B6B;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.correct .div-choices-number{
	background-color: #10AC84 !important;
}
.div-lesson-grades .div-grade-body .section .section-body .div-question .div-choices .div-choice.correct .div-choices-text{
	color: #10AC84 !important;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade{
	margin-bottom: 30px;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-label{
	width: 170px;
	height: 50px;
	line-height: 50px;
	padding: 0 19px;
	border-radius: 4px;
	background-color: #10AC84;
	color: #fff;
	font-size: 1.375rem;
	margin-bottom: 30px;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .my-answer .div-label{
	background-color: #8395A7;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .correct-answer{
	margin-bottom: 30px;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-correct-text{
	font-size: 1.3125rem;
	line-height: 2rem;
	color: #576574;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-correct-text .span-u{
	position: relative;
}
.div-lesson-grades .div-grade-body .sectoin-data-grade .div-correct-text .span-u::before{
	content: '';
	height: 1px;
	background-color: #ee5253;
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 50%;
	margin-top: -0.1px;
}

/*==================================
	class lesson speaking unit
==================================*/
.div-lesson-speaking-units .div-lesson-unit-header{
	border-bottom: 1px solid #C8D6E5;
	display: flex;
	justify-content: flex-start;
	width: 100%;
}
.div-lesson-speaking-units .div-lesson-unit-header .div-unit{
	font-size: 1.5rem;
	color: #54A0FF;
	border-bottom: 5px solid #54A0FF;
	padding: 5px 0;
	margin-right: 45px;
}
.div-lesson-speaking-units .div-lesson-unit-header .div-unit-title{
	font-size: 1.125rem;
	padding: 10px 0;
}
.div-lesson-speaking-units .div-units{
	margin: 0 -50px;
}
.div-lesson-speaking-units .table-unit-list{
	width: 100%;
}
.div-lesson-speaking-units .table-unit-list th,
.div-lesson-speaking-units .table-unit-list td{
	padding: 27px 15px;
	vertical-align: middle;
	border-bottom: 1px solid #C8D6E5;
	cursor: pointer;
}
.div-lesson-speaking-units .table-unit-list tr:hover th,
.div-lesson-speaking-units .table-unit-list tr:hover td{
	background-color: #F6F6F6;
	transition-property: all;
	transition: 0.3s linear;
}
.div-lesson-speaking-units .table-unit-list .th-level{
	padding-left: 50px;
	width: 160px;
	color: #54A0FF;
	font-weight: 700;
	font-size: 1.125rem;
}
.div-lesson-speaking-units .table-unit-list .td-ja{
	width: 200px;
}
.div-lesson-speaking-units .table-unit-list .td-ja,
.div-lesson-speaking-units .table-unit-list .td-en{
	font-size: .875rem;
}
.div-lesson-speaking-units .table-unit-list .td-stars{
	width: 90px;
	padding-right: 0;
	white-space: nowrap;
}
.div-lesson-speaking-units .table-unit-list .td-stars img{
	margin-right: 3px;
}
.div-lesson-speaking-units .table-unit-list .td-arrow{
	padding-right: 50px;
	width: 67px;
	padding-left: 0;
}

.div-lesson-speaking-writing-unit-form .div-unit-header{
	margin-left: -50px;
	margin-right: -50px;
	border-bottom: 1px solid #F0F3F3;
	padding: 16px 20px;
	display: flex;
	justify-content: flex-start;
	width: calc(100% + 100px);
	margin-bottom: 10px;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-unit-name{
	font-size: 1.125rem;
	color: #54A0FF;
	font-weight: 700;
	margin-right: auto;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin-top: 2px;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level .div-text{
	display: flex;
	justify-content: flex-start;
	color: #C8D6E5;
	font-weight: 700;
	margin-right: 10px;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level .div-stars{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-lesson-speaking-writing-unit-form .div-unit-header .div-level .div-stars img{
	margin-right: 3px;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question{
	border-bottom: 1px solid #C8D6E5;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-section-label{
	margin-top: 30px;
	border-radius: 70px;
	height: 70px;
	color: #fff;
	font-size: .875rem;
	display: flex;
	align-items: center;
	margin-right: 30px;
	flex-basis: 70px;
	max-width: 70px;
	min-width: 70px;
	padding: 0 5px;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-section-label span{
	flex: 1;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-question-text{
	margin-top: 30px;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-question-text .div-word{
	font-size: 2rem;
	line-height: 2rem;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-question-text .div-ja{
	line-height: 2rem;
	color: #C8D6E5;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-image{
	margin-left: auto;
	flex-basis: 200px;
	max-width: 200px;
	min-width: 200px;
	text-align:right;
}
.div-lesson-speaking-writing-unit-form .div-unit-body .section-question .div-image img{
	max-width: 200px;
}
.div-lesson-speaking-writing-unit-form .section-form{
	padding-top: 20px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form{
	padding-left: 100px;
	position: relative;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-number{
	position: absolute;
	z-index: 1;
	width: 70px;
	height: 70px;
	line-height: 70px;
	border-radius: 6px;
	color: #fff;
	background-color: #54A0FF;
	text-align: center;
	top: 0;
	left: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-number strong{
	font-size: 1.75rem;
	font-weight: 300;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-number span{
	font-size: .875rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-img{
	margin-left: auto;
	flex-basis: 200px;
	text-align:right;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-img img{
	max-width: 400px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-question-text{
	font-size: 1.125rem;
	margin-bottom: 32px;
	margin-top: 20px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents{
	flex: 1;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 20px;
	background-color: #F7F8FA;
	border-radius: 6px;
	padding: 10px 18px;
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .div-audio-text{
	flex-basis: 130px;
	display: flex;
	align-items: center;
	line-height: 2rem;
	position: relative;
	top: -2px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .div-audio-controller{
	display: flex;
	align-items: center;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .audio-player-secondary .div-audio-controller{
	background-color: transparent;
	padding: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well{
	padding: 13px 18px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 10px;
	background-color: #54A0FF;
	border-radius: 6px;
	width: 100%;
	position: relative;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text{
	color: #fff;
	margin-right: 30px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text strong,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text span{
	display: block;
	line-height: 2rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text strong{
	font-size: 1.3125rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-text span{
	font-size: .875rem;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-rec-controller{
	align-items: center;
	display: flex;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder{
	padding: 0;
	background-color: transparent;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder .div-progress .div-progress-border{
	background: repeating-linear-gradient(90deg, #54a0ff 0, #54a0ff, transparent 3px, transparent 3px);
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder .div-rec,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-well .div-recorder-layer .audio-recorder .div-stop{
	margin-right: 5px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-hint{
	padding-left: 50px;
	margin-top: 30px;
	position: relative;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-hint .div-label{
	width: 40px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background-color: #c8d6e5;
	border-radius: 2px;
	font-size: .75rem;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-hint .div-hint-text{
	font-size: .875rem;
	margin-top: 2px;
	color: #8395A7;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 10px;
	background-color: #576574;
	border-radius: 6px;
	padding: 25px 18px;
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-audio-text{
	flex-basis: 130px;
	display: flex;
	align-items: center;
	line-height: 2rem;
	position: relative;
	top: -2px;
	color: #fff;
	font-weight: 700;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-audio-controller{
	display: flex;
	align-items: center;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .audio-player-secondary .div-audio-controller{
	background-color: transparent;
	padding: 0;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-btns .div-play{
	background-image: url(../images/icons/svg/icon_play_white.svg);
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-btns .div-pause{
	background-image: url(../images/icons/svg/icon_pause_white_radius.svg);
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .audio-player-secondary .div-progress{
	margin-top: 3px;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .audio-player-secondary .time{
	color: #fff;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .div-separator,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-audio-well .max-time,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-separator,
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .max-time{
	display: none;
}
.div-lesson-speaking-writing-unit-form .section-form .div-form .div-form-body .div-contents .div-rec-audio-well .div-reset{
	color: #fff;
	padding-left: 33px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 30px;
	background-image: url(../images/icons/svg/icon_reset.svg);
	height: 30px;
	font-size: .75rem;
	margin-left: 12px;
	padding-top: 7px;
	cursor: pointer;
}
.div-grade-unit-body .div-answer-header{
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	border-radius: 4px;
	margin-bottom: 30px;
}
.div-grade-unit-body .div-answer-section{
	margin-bottom: 30px;
}
.div-grade-unit-body .div-answer-section-header{
	padding-left: 70px;
	margin-bottom: 10px;
	position: relative;
	min-height: 50px;
}
.div-grade-unit-body .div-answer-section-header .div-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	font-size: 1.75rem;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	background-color: #54A0FF;
	border-radius: 4px;
}
.div-grade-unit-body .div-answer-section-header .div-point{
	color: #8395A7;
	font-size: 1.75rem;
	margin-top: 5px;
}
.div-grade-unit-body .div-answer-section-header .div-point,
.div-grade-unit-body .div-answer-section-header .div-point *{
	font-weight: 700;
}
.div-grade-unit-body .div-answer-section-header .div-point strong{
	color: #54A0FF;
}
.div-grade-unit-body .div-correct-answer,
.div-grade-unit-body .div-my-answer{
	padding: 25px 0;
	display: flex;
	justify-content: flex-start;
	width: 100%;
	border-bottom: 1px solid #F0F3F3;
}
.div-grade-unit-body .div-correct-answer .div-correct-answer-text,
.div-grade-unit-body .div-my-answer .div-my-answer-text{
	flex-basis: 120px;
	border-right: 1px dotted #C8D6E5;
	min-height: 34px;
	font-size: 1.125rem;
	color: #54A0FF;
	padding-top: 2px;
}
.div-grade-unit-body .div-question-text{
	min-height: 34px;
	font-size: 1.125rem;
	border-left: 1px dotted #C8D6E5;
	padding-left: 20px;
	padding-top: 2px;
}
.div-grade-unit-body .audio-player-secondary .div-audio-controller{
	background-color: #fff;
	padding: 5px 17px;
}
.div-grade-unit-body .audio-player-secondary .div-progress,
.div-grade-unit-body .audio-player-secondary .time{
	display: none;
}
.div-grade-unit-body .audio-player-secondary .div-btns{
	margin-right: 0;
}
.div-grade-unit-body .audio-player-secondary .div-btns .div-play {
	background-image: url(../images/icons/svg/icon_play_primary.svg);
}
.div-grade-unit-body .audio-player-secondary .div-btns .div-pause {
	background-image: url(../images/icons/svg/icon_pause_primary.svg);
}
.div-grade-unit-body .div-answer-header-toggle{
	cursor: pointer;
	position: relative;
}
.div-grade-unit-body .div-answer-header-toggle .icon-arrow{
	position: absolute;
	z-index: 1;
	right: 20px;
	top: 20px;
	transition-property: all;
	transition: 0.3s linear;
}
.div-grade-unit-body .hide-body .div-answer-header-toggle .icon-arrow{
	transform: rotateX(180deg);
}
.div-grade-unit-body .div-answer-body .div-section-question {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-label {
	margin-top: 10px;
	border-radius: 70px;
	height: 70px;
	color: #fff;
	font-size: .875rem;
	display: flex;
	align-items: center;
	margin-right: 30px;
	flex-basis: 70px;
	max-width: 70px;
	min-width: 70px;
	padding: 0 5px;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-label span {
	flex: 1;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-question-text {
	margin-top: 10px;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-question-text .div-word {
	font-size: 2rem;
	line-height: 2rem;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-section-question-text .div-ja {
	line-height: 2rem;
	color: #C8D6E5;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-image {
	margin-left: auto;
	flex-basis: 200px;
	max-width: 200px;
	min-width: 200px;
	text-align: right;
}
.div-grade-unit-body .div-answer-body .div-section-question .div-image img {
	max-width: 200px;
}
.div-grade-unit-body .div-info-list{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 30px;
}
.div-grade-unit-body .div-info-list .div-info-uls{
	flex:1;
	flex-basis: 580px;
	margin-right: auto;
}
.div-grade-unit-body .div-info-list .div-info-uls ul,
.div-grade-unit-body .div-info-list .div-info-uls ul li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.div-grade-unit-body .div-info-list .div-info-uls ul li{
	margin-bottom: 20px;
	padding-left: 20px;
	line-height: 1.875rem;
	position: relative;
}
.div-grade-unit-body .div-info-list .div-info-uls ul li::before{
	content: '';
	width:12px;
	height: 12px;
	background-color: #FECA57;
	display: block;
	border-radius: 12px;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 9px;
}
.div-grade-unit-body .div-info-list .div-info-images{
	display: flex;
	flex-direction: column;
}
.div-grade-unit-body .div-info-list .div-info-images .div-info-image-item{
	margin-bottom: 10px;
}
.div-grade-unit-body .div-relation-info{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
	margin-bottom: 30px;
}
.div-grade-unit-body .div-relation-info .div-left{
	flex-basis: 420px;
	margin-right: auto;
}
.div-grade-unit-body .div-relation-info .div-left .div-table{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
}
.div-grade-unit-body .div-relation-info .div-left .div-table-head{
	color: #1DD1A1;
	font-weight: 700;
	padding-right: 15px;
	border-right: 2px solid #C8D6E5;
	margin-right: 15px;
}
.div-grade-unit-body .div-relation-info .div-left .div-table-body .div-table-body-item{
	position: relative;
	padding-left: 1.5rem;
}
.div-grade-unit-body .div-relation-info .div-left .div-table-body .div-table-body-item::before{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 1px;
	content: '□';
}
.div-grade-unit-body .div-relation-info .div-image{
	flex-basis: 360px;
	text-align: right;
}
.div-grade-unit-body .div-scripts{
	display: flex;
	width: 100%;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-grade-unit-body .div-scripts .div-left,
.div-grade-unit-body .div-scripts .div-right{
	flex-basis: 380px;
	min-width: 380px;
	max-width: 380px;
}
.div-grade-unit-body .div-scripts .div-left{
	margin-right: 20px;
}
.div-grade-unit-body .div-scripts .div-scripts-header{
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
	background-color: #F7F8FA;
	color: #576574;
	font-weight: 700;
	margin-bottom: 20px;
}
.div-grade-unit-body .div-scripts table{
	width: 100%;
}
.div-grade-unit-body .div-scripts table th{
	width: 75px;
	font-weight: 700;
}
.div-grade-unit-body .div-scripts table th,
.div-grade-unit-body .div-scripts table td{
	line-height: 1.875rem;
	vertical-align: top;
}
.div-lesson-speaking-writing-unit-form .secition-writing-header{
	border-bottom: 1px solid #C8D6E5;
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 20px;
}
.div-lesson-speaking-writing-unit-form .secition-writing-header .div-unit {
	font-size: 1.5rem;
	color: #54A0FF;
	border-bottom: 5px solid #54A0FF;
	padding: 5px 0;
	margin-right: 45px;
}
.div-lesson-speaking-writing-unit-form .secition-writing-header .div-unit-title {
	font-size: 1.125rem;
	padding: 10px 0;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question .div-number{
	flex-basis: 70px;
	max-width: 70px;
	min-width: 70px;
	line-height: 70px;
	height: 70px;
	text-align: center;
	color: #fff;
	border-radius: 70px;
	margin-right: 20px;
	background-color: #54A0FF;
	font-size: 1.75rem;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question .div-image{
	flex-basis: 200px;
	min-width: 200px;
	max-width: 200px;
}
.div-lesson-speaking-writing-unit-form .secition-writing-question .div-image img{
	max-width: 200px;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form{
	flex: 1;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .div-question-text-ja{
	font-size: 1.125rem;
	margin-bottom: 25px;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .div-well{
	border-radius: 4px;
	background-color: #F7F8FA;
	padding: 15px;
	margin-bottom: 40px;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .table-writing-question-form{
	width: 100%;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .table-writing-question-form th{
	white-space: nowrap;
	font-weight: 700;
	vertical-align: top;
}
.div-lesson-speaking-writing-unit-form .div-writing-script-form .table-writing-question-form .form-control{
	height: 40px;
	font-size: 1rem;
	padding: 0 0 10px 0;
}

/*==================================
	english test record parts
==================================*/
.div-recorder-layer {
	display: inline-block;
}
.div-recorder-layer .audio-recorder{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	padding: 14px 43px 14px 20px;
	background-color: #8395A7;
}
.div-recorder-layer .audio-recorder .div-rec,
.div-recorder-layer .audio-recorder .div-stop{
	width: 30px;
	height: 30px;
	margin-right: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px;
	cursor: pointer;
}
.div-recorder-layer .audio-recorder .div-rec{
	background-image: url(../images/icons/svg/icon_recorder_rec.svg);
}
.div-recorder-layer .audio-recorder .div-stop{
	background-image: url(../images/icons/svg/icon_recorder_stop.svg);
}
.filter-opacity{
    filter: opacity(0.5);
}
.div-recorder-layer .audio-recorder .div-progress{
	width: 126px;
	height: 18px;
	margin-top: 6px;
	position: relative;
	background-color: #fff;
}
.div-recorder-layer .audio-recorder .div-progress .div-progress-bar{
	background-color: #EE5253;
	height: 18px;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}
.div-recorder-layer .audio-recorder .div-progress .div-progress-border{
	height: 18px;
	position: absolute;
	width: 126px;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(90deg, #8395A7 0, #8395A7, transparent 3px, transparent 3px);
}
.div-rec-status-label{
	display: inline-block;
	vertical-align: top;
	padding: 0 11px;
	height: 30px;
	line-height: 30px;
	border-radius: 4px;
	background-color: #1DD1A1;
	color: #fff;
	margin-left: 10px;
	margin-top: 15px;
}
.div-rec-status-label img{
	margin-right: 3px;
	position: relative;
	top: -2px;
}

/*==================================
	class settings
==================================*/
.div-class-numbers{
	display: flex;
	justify-content: flex-start;
}
.div-class-numbers span{
	margin-right: 10px;
	flex-basis: 50px;
	min-width: 50px;
	height: 70px;
	line-height: 70px;
	border-radius: 3px;
	background-color: #feca57;
	color: #fff;
	font-size: 2.25rem;
	text-align: center;
}
.div-class-numbers span:last-child{
	margin-right: 0;
}
.div-class-numbers-lg{
	justify-content: center;
}
.div-class-numbers-lg span{
	height: 105px;
	line-height: 105px;
	flex-basis: 75px;
	max-width: 75px;
	font-size: 3.375rem;
}

.div-mx-select-images-preview .div-select-class-thumbnail{
	width: 300px;
	height: 180px;
	padding: 20px;
	position: relative;
}
.div-mx-select-images-preview .div-select-class-thumbnail .div-select-class-thumbnail-body{
	position: relative;
	z-index: 2;
}
.div-class-thumbnail-gradient{
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.33) 0%,rgba(0, 0, 0, 0.57) 100%);
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.div-mx-select-images-preview .div-select-class-thumbnail .a-cog-link{
	position: absolute;
	z-index: 3;
	right: 20px;
	bottom: 20px;
}

/*==================================
	regist class member & files submission setting
==================================*/
.div-select-regist-member-mode,
.div-select-files-submission-mode,
.div-select-questionnaire-type,
.div-select-quiz-type,
.div-select-form-material-type{
	display:flex;
	justify-content:flex-start;
}
.div-select-form-material-type{
	flex-wrap: wrap;
}
.div-select-regist-member-mode > .a-select,
.div-select-files-submission-mode > .a-select,
.div-select-questionnaire-type > .label-select,
.div-select-quiz-type > .label-select,
.div-select-form-material-type > .a-select{
	width:32.25%;
	flex-basis:32.25%;
	margin-right:3.3%;
	position:relative;
	min-height:315px;
	background-color:#fff;
	border-radius:9px;
	border:1px solid transparent;
	text-align:center;
	padding:45px 0;
	cursor:pointer;
}
.div-select-form-material-type > .a-select{
	margin-right:1.625%;
	margin-bottom: 20px;
}
.div-select-questionnaire-type > .label-select{
	padding: 40px 0;
	min-height: 280px;
	border-color:#c6d6e5;
	display: inline-block;
}
.div-select-quiz-type > .label-select{
	width: 205px;
	flex-basis: 205px;
	margin:0 20px 20px 0;
	min-height: 205px;
	padding: 25px 0 0 0;
	border-color: transparent;
	display: inline-block;
}
.div-select-quiz-type > .label-select:last-child{
	margin-right: 0;
}
.div-select-regist-member-mode > .a-select,
.div-select-regist-member-mode > .a-select:hover,
.div-select-regist-member-mode > .a-select:active,
.div-select-regist-member-mode > .a-select:focus,
.div-select-files-submission-mode > .a-select,
.div-select-files-submission-mode > .a-select:hover,
.div-select-files-submission-mode > .a-select:active,
.div-select-files-submission-mode > .a-select:focus,
.div-select-form-material-type > .a-select:hover,
.div-select-form-material-type > .a-select:active,
.div-select-form-material-type > .a-select:focus{
	text-decoration:none;
}
.div-select-regist-member-mode > .a-select:last-child,
.div-select-files-submission-mode > .a-select:last-child,
.div-select-questionnaire-type > .label-select:last-child,
.div-select-form-material-type > .a-select:nth-child(3n){
	margin-right:0;
}
.div-select-regist-member-mode > .a-select:hover,
.div-select-files-submission-mode > .a-select:hover,
.div-select-questionnaire-type > .label-select.checked,
.div-select-form-material-type > .a-select:hover{
	border-color:#2e86de;
}
.div-select-questionnaire-type > .label-select input[type="radio"],
.div-select-quiz-type > .label-select input[type="radio"]{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	opacity: 0;
}
.div-select-regist-member-mode .div-select-regist-title,
.div-select-files-submission-mode .div-select-files-submission-title,
.div-select-questionnaire-type .div-select-questionnaire-title,
.div-select-quiz-type .div-select-quiz-title,
.div-select-form-material-type .div-select-material-type-title{
	font-size:1.3125rem;
	color:#2e86de;
	font-weight:700;
	white-space:nowrap;
}
.div-select-regist-member-mode .div-select-regist-icon-container,
.div-select-files-submission-mode .div-select-files-submission-icon-container,
.div-select-questionnaire-type .div-select-questionnaire-type-icon-container,
.div-select-form-material-type .div-select-material-type-icon-container{
	text-align:center;
}
.div-select-regist-member-mode .div-select-regist-icon-container,
.div-select-files-submission-mode .div-select-files-submission-icon-container,
.div-select-quiz-type .div-select-quiz-type-icon-container,
.div-select-questionnaire-type .div-select-questionnaire-type-icon-container,
.div-select-form-material-type .div-select-material-type-icon-container{
	height:140px;
	line-height:140px;
}
.div-select-questionnaire-type .div-select-questionnaire-type-icon-container img,
.div-select-quiz-type .div-select-quiz-type-icon-container img{
	pointer-events: none;
}
.div-select-form-material-type .div-select-material-type-icon-container .fas,
.div-select-form-material-type .div-select-material-type-icon-container .fa,
.div-select-form-material-type .div-select-material-type-icon-container .fab,
.div-select-form-material-type .div-select-material-type-icon-container .far{
	font-size: 5rem;
	line-height: 140px;
	color: #ccc !important;
}

.div-select-regist-member-mode p,
.div-select-files-submission-mode p,
.div-select-questionnaire-type p,
.div-select-form-material-type p{
	margin:0;
	color:#576574;
}
.div-csv-members{
	overflow-y: auto;
	max-height: 400px;
}

/*==================================
	flatpickr wrapper & setting
==================================*/
.main .row.row-datepickers{
	width: 750px;
	margin: 15px auto 0 auto;
}
.main .row.row-datepickers > .col-6{
	padding: 0;
	text-align: center;;
}
.main .row.row-datepickers .flatpickr-wrapper{
	position: relative;
	display: inline-block;
}
.main .row.row-datepickers .flatpickr-wrapper input.flatpickr-input{
	position: absolute;
	z-index: -1;
	opacity: 0;
	left: 0;
	top: 0;
}
.main .row.row-datepickers .p-datepicker-title{
	margin-bottom: 25px;
}
.main .row.row-datepickers .flatpickr-months .flatpickr-month,
.main .row.row-datepickers .flatpickr-current-month,
.main .row.row-datepickers .flatpickr-months .flatpickr-prev-month,
.main .row.row-datepickers .flatpickr-months .flatpickr-next-month{
	height: 40px;
}
.main .row.row-datepickers .flatpickr-current-month .numInputWrapper{
	width: 5rem;
}
.main .row.row-datepickers .flatpickr-current-month span.cur-month{
	margin-left: 2rem;
}

/*==================================
	timer
==================================*/
.div-reception-timer,
.div-common-main-timer{
	text-align:center;
	margin-bottom:20px;
}
.div-reception-timer .timer > .jst-hours,
.div-reception-timer .timer > .jst-minutes,
.div-reception-timer .timer > .jst-seconds,
.div-common-main-timer .timer > .jst-hours,
.div-common-main-timer .timer > .jst-minutes,
.div-common-main-timer .timer > .jst-seconds{
	display:inline-block;
	font-size:8rem;
	color:#10ac84;
}
.div-common-main-timer .timer > .jst-hours,
.div-common-main-timer .timer > .jst-minutes{
	min-width: 240px;
}
.div-common-main-timer .timer > .jst-seconds{
	min-width: 190px;
}
.div-reception-timer .timer > .jst-hours{
	display:none;
}
.row.row-cards > .col .div-reception-timer .timer > .jst-hours,
.row.row-cards > .col .div-reception-timer .timer > .jst-minutes,
.row.row-cards > .col .div-reception-timer .timer > .jst-seconds{
	color: #fff;
	font-size: 3rem;
}
.inline-timer .jst-hours{
	display: none;
}
.inline-timer *:not(.jst-hours){
	display: inline-block;;
}
.card.mx-parent-card.card-success .div-reception-timer .timer > .jst-hours,
.card.mx-parent-card.card-success .div-reception-timer .timer > .jst-minutes,
.card.mx-parent-card.card-success .div-reception-timer .timer > .jst-seconds{
	color: #fff;
}

/*==================================
	class grade page
==================================*/
.div-grade-cards{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 -12.5px;
}
.div-grade-cards .card {
	border-radius: 9px;
	border: none;
	flex-basis: 320px;
	flex-wrap: wrap;
	margin-right: 12.5px;
	margin-left: 12.5px;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.05);
	background-color: #fff;
	position: relative;
	min-height: 400px;
	margin-bottom: 20px;
}
.div-grade-cards .card.bg-primary{
	background-color: #3294ec !important;
	color: #fff;
}
.div-grade-cards .card.card-visible-footer{
	padding-bottom: 40px;
}
.div-grade-cards .card .card-header{
	background-color: transparent;
	border-bottom: none;
	padding: 20px 15px;
}
.div-grade-cards .card .card-body{
	padding: 0 15px;
}
.div-grade-cards .card .card-footer{
	height: 40px;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	padding: 0 15px;
	border-top: none;
}
.div-grade-cards .card .div-chart-controls{
	display: flex;
	justify-content: flex-start;
}
.div-grade-cards .card .div-chart-controls .div-chart-switch{
	display: flex;
	justify-content: flex-start;
}
.div-grade-cards .card .div-chart-controls .div-chart-switch .mx-btn{
	flex-basis: 26px;
	height: 26px;
	line-height: 26px;
	background-color: #c8d6e5;
	border-radius: 3px;
	color: #fff;
	font-size: .75rem;
	padding: 0;
	min-width: 26px;
	margin-right: 5px;
}
.div-grade-cards .card .div-chart-controls .div-chart-switch .div-label{
	flex-basis: 100px;
	min-width: 100px;
	text-align: center;
	height: 26px;
	line-height: 26px;
	border-radius: 3px;
	background-color: #3294ec;
	color: #fff;
	font-size: .75rem;
	padding: 0;
}
.div-grade-cards .card .div-chart-controls .div-chart-switch .div-label.div-label-secondary{
	background-color: #697A8C;
}
.div-grade-cards .card.bg-primary .div-chart-controls .div-chart-switch .div-label{
	background-color: #fff;
	color: #3294ec;
}
.div-grade-cards .card .div-chart-controls .div-chart-switch .mx-btn.active{
	background-color: #2e86de;
}
.div-grade-cards .card .div-chart-controls .div-chart-switch.div-chart-switch-secondary .mx-btn.active{
	background-color: #697A8C;
}
.div-grade-cards .card .div-chart-controls .div-select-terminals{
	margin-left: auto;
	text-align: right;
}
.div-grade-cards .card .div-chart-controls .div-select-terminals .div-terminal,
.div-grade-list .div-grade-list-control .div-terminal{
	display: inline-block;
	vertical-align: bottom;
	cursor: pointer;
	background-position: center;
	background-repeat: no-repeat;
}
.div-grade-cards .card .div-chart-controls .div-select-terminals .div-terminal.div-terminal-pc,
.div-grade-list .div-grade-list-control .div-terminal.div-terminal-pc{
	width: 26px;
	height: 22px;
	margin-right: 10px;
	background-size: 26px 22px;
	background-image: url(../images/icons/svg/icon_pc.svg);
}
.div-grade-list .div-grade-list-control .div-terminal.div-terminal-pc{
	margin-left: 5px;
}
.div-grade-cards .card.bg-primary .div-chart-controls .div-select-terminals .div-terminal.div-terminal-pc{
	background-image: url(../images/icons/svg/icon_pc_white.svg);
}
.div-grade-cards .card .div-chart-controls .div-select-terminals .div-terminal.div-terminal-pc.active,
.div-grade-list .div-grade-list-control .div-terminal.div-terminal-pc.active{
	background-image: url(../images/icons/svg/icon_pc_active.svg);
}
.div-grade-cards .card .div-chart-controls .div-select-terminals.div-select-terminals-secondary .div-terminal.div-terminal-pc.active{
	background-image: url(../images/icons/svg/icon_pc_secondary_active.svg);
}
.div-grade-cards .card.bg-primary .div-chart-controls .div-select-terminals .div-terminal.div-terminal-pc.active{
	background-image: url(../images/icons/svg/icon_pc_white_active.svg);
}
.div-grade-cards .card .div-chart-controls .div-select-terminals .div-terminal.div-terminal-mobile,
.div-grade-list .div-grade-list-control .div-terminal.div-terminal-mobile{
	width: 14px;
	height: 26px;
	margin-right: 5px;
	background-size: 14px 26px;
	background-image: url(../images/icons/svg/icon_mobile.svg);
}
.div-grade-cards .card.bg-primary .div-chart-controls .div-select-terminals .div-terminal.div-terminal-mobile{
	background-image: url(../images/icons/svg/icon_mobile_white.svg);
}
.div-grade-cards .card .div-chart-controls .div-select-terminals .div-terminal.div-terminal-mobile.active,
.div-grade-list .div-grade-list-control .div-terminal.div-terminal-mobile.active{
	background-image: url(../images/icons/svg/icon_mobile_active.svg);
}
.div-grade-cards .card .div-chart-controls .div-select-terminals.div-select-terminals-secondary .div-terminal.div-terminal-mobile.active{
	background-image: url(../images/icons/svg/icon_mobile_secondary_active.svg);
}
.div-grade-cards .card.bg-primary .div-chart-controls .div-select-terminals .div-terminal.div-terminal-mobile.active{
	background-image: url(../images/icons/svg/icon_mobile_white_active.svg);
}
.div-grade-cards .card .card-footer .div-chart-labels p{
	margin: 0 6px 0 0;
	font-size: .75rem;
	display: inline-block;
}
.div-grade-cards .card .card-footer .div-chart-labels p .span-circle{
	display: inline-block;
	margin-right: 2px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}
.div-grade-cards .card .card-footer .div-chart-labels p .span-circle.chart-color-1{
	background-color: #2874cb;
}
.div-grade-cards .card .card-footer .div-chart-labels p .span-circle.chart-color-2{
	background-color: #3294ec;
}
.div-grade-cards .card .card-footer .div-chart-labels p .span-circle.chart-color-3{
	background-color: #69b3f1;
}
.div-grade-cards .card .card-footer .div-chart-labels p .span-circle.chart-color-4{
	background-color: #bcddf9;
}
.div-grade-cards .card .card-footer.card-footer-link{
	padding-top: 5px;
	border-top: 1px solid #e3eaf2;
	text-align: right;
}
.div-grade-cards .card .card-footer.card-footer-link a{
	font-size: .875rem;
}
.div-grade-cards .card .card-footer.card-footer-link a .img-link-arrow{
	margin-left: 10px;
	position: relative;
	top: -1px;
}
.div-grade-cards .card .div-time{
	width: 185px;
	height: 185px;
	border-radius: 185px;
	border: 1px solid #69b3f1;
	position: relative;
	margin: 24px auto 0 auto;
}
.div-grade-cards .card .div-time span{
	position: absolute;
	z-index: 1;
	width: 80px;
	height: 24px;
	top: 50%;
	right: -3px;
	margin-top: -5px;
	font-size: 1.3125rem;
	line-height: 1;
}
.div-grade-cards .card .div-time .div-strong{
	position: absolute;
	z-index: 1;
	width: 100px;
	height: 60px;
	text-align: center;
	top: 50%;
	left: 5px;
	margin-top: -35px;
	font-size: 3.75rem;
	line-height: 1;
	font-weight: 700;
}
.div-zoom-text strong{
	white-space: nowrap;
	font-weight: 300;
}
.div-grade-cards .card .div-times{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 19px;
}
.div-grade-cards .card .div-times .div-times-body{
	flex-basis: 50%;
	min-width: 50%;
	padding-left: 7px;
	margin-bottom: 10px;
}
.div-grade-cards .card .div-times .div-times-body span,
.div-grade-cards .card .div-times .div-times-body .div-strong{
	display: inline-block;
	vertical-align: bottom;
	color: #fff;
}
.div-grade-cards .card .div-times.div-times-secondary .div-times-body span,
.div-grade-cards .card .div-times.div-times-secondary .div-times-body .div-strong{
	color: #8395A7;
}
.div-grade-cards .card .div-times .div-times-body span{
	font-size: .75rem;
}
.div-grade-cards .card .div-times .div-times-body span.span-label{
	min-width: 57px;
}
.div-grade-cards .card .div-times.div-times-secondary .div-times-body span{
	font-size: .875rem;
	position: relative;
	top: 3px;
	left: -5px;
	font-weight: 300;
}
.div-grade-cards .card .div-times.div-times-secondary .div-times-body span.span-label{
	min-width: 39px;
	font-weight: 700;
	position: relative;
	top: -2px;
	left: 0;
}
.div-grade-cards .card .div-times .div-times-body span.span-label.span-color-primary{
	color: #0ABDE3;
}
.div-grade-cards .card .div-times .div-times-body span.span-label.span-color-success{
	color: #1DD1A1;
}
.div-grade-cards .card .div-times .div-times-body span.span-label.span-color-warning{
	color: #FECA57;
}
.div-grade-cards .card .div-times .div-times-body span.span-label.span-color-danger{
	color: #FF6B6B;
}
.div-grade-cards .card .div-times .div-times-body .div-strong{
	font-size: 1.75rem;
	font-weight: 700;
	width: 42px;
}
.div-grade-cards .card .div-times .div-times-body .div-strong,
.div-grade-cards .card .div-times .div-times-body .div-strong strong{
	line-height: 1;
}
.div-grade-cards .card .div-attendance-rate{
	height: 90px;
	line-height: 90px;
	text-align: center;
	margin-bottom: 25px;
}
.div-grade-cards .card .div-attendance-rate strong,
.div-grade-cards .card .div-attendance-rate span{
	display: inline-block;
	vertical-align: bottom;
	color: #2287ed;
}
.div-grade-cards .card .div-attendance-rate strong{
	font-size: 4rem;
	font-weight: 300;
}
.div-grade-cards .card .div-attendance-rate span{
	font-size: 1.3125rem;
	position: relative;
	top: 20px;
}
.div-grade-cards .card .div-attendance-rate-images{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.div-grade-cards .card .div-attendance-rate-images svg{
	flex-basis: 40px;
	max-width: 40px;
	min-width: 40px;
	height: 75px;
	margin: 0 5px 10px 5px;
}
.div-grade-cards .card .div-select-date{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin-bottom: 15px;
}
.div-grade-cards .card .div-select-date .div-select{
	flex-basis: 50%;
	min-width: 50%;
	max-width: 50%;
}
.div-grade-cards .card .div-select-date .div-select.div-select-left{
	padding-right: 5px;
}
.div-grade-cards .card .div-select-date .div-select.div-select-right{
	padding-left: 5px;
}
.div-grade-cards .card .div-select-activity,
.div-grade-cards .card .div-select-date .div-select{
	position: relative;
}
.div-grade-cards .card .div-select-activity::after,
.div-grade-cards .card .div-select-date .div-select::after{
	content: '';
	width: 12px;
	height: 6px;
	display: block;
	position: absolute;
	z-index: 1;
	right: 7px;
	top: 10px;
	background-repeat: no-repeat;
	background-image: url(../images/icons/svg/icon_arrow_down.svg);
	background-size: 12px auto;
}
.div-grade-cards .card .div-select-date .div-select.div-select-left::after{
	right: 12px;
}
.div-grade-cards .card .div-select-date .div-select .form-control,
.div-grade-cards .card .div-select-activity .form-control{
	height: 26px;
	font-size: .75rem;
	background-position: 6px center;
	background-repeat: no-repeat;
	background-size: 10px;
	line-height: 1;
	padding: 1px 27px 1px 20px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.div-grade-cards .card .div-select-activity{
	width: 100px;
	margin-right: 5px;
}
.div-grade-cards .card .div-chart-controls-activity .div-chart-switch .mx-btn{
	margin-right: 3px;
}
.div-grade-cards .card .div-select-activity .form-control{
	padding-left:.25rem;
}
.div-grade-cards .card .div-select-date .div-select.div-select-left .form-control{
	background-image: url(../images/jpg/grade-select-bg1.jpg);
}
.div-grade-cards .card .div-select-date .div-select.div-select-right .form-control{
	background-image: url(../images/jpg/grade-select-bg2.jpg);
}
.div-grade-cards .card .div-canvas-learning-score{
	width: 280px;
	height: 280px;
	padding: 40px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 280px auto;
	background-image: url(../images/svg/grade-rader-chart-bg.svg);
	margin: 0 auto;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja{
	height: 240px;
	padding: 20px 40px;
	background-size: 200px auto;
	background-image: url(../images/svg/grade-rader-chart-bg-only-border.svg);
	position: relative;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static{
	position: absolute;
	z-index: 1;
	text-align: center;
	font-size: .875rem;
	line-height: 20px;
	height: 20px;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-top{
	top: 0;
	right: 0;
	left: 0;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-right{
	right: 0;
	white-space: nowrap;
	top: 50%;
	margin-top: -10px;
	margin-left: -28px;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-bottom{
	bottom: 0;
	right: 0;
	left: 0;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-left{
	left: 0;
	white-space: nowrap;
	top: 50%;
	margin-top: -10px;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-primary{
	color: #0ABDE3;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-success{
	color: #1DD1A1;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-warning{
	color: #FECA57;
}
.div-grade-cards .card .div-canvas-learning-score.div-canvas-learning-score-ja .label-static-danger{
	color: #FF6B6B;
}
.div-grade-cards .card .div-canvas-learning-time-2{
	padding: 0 53px;
	position: relative;
}
.div-grade-cards .card .div-canvas-learning-time-2 .div-time{
	position: absolute;
	z-index: 1;
	margin: 0 auto;
	top: 28px;
	left: 81px;
	width: 128px;
	height: 128px;
	border: none;
}
.div-grade-cards .card .div-canvas-learning-time-2 .div-time .div-strong{
	width: 70px;
	height: 50px;
	left: 5px;
	margin-top: -25px;
	font-size: 3rem;
}
.div-grade-cards .card .div-canvas-learning-time-2 .div-time strong,
.div-grade-cards .card .div-canvas-learning-time-2 .div-time span {
	color: #3294ec;
}
.div-grade-cards .card .div-canvas-learning-time-2 .div-time.div-time-secondary strong,
.div-grade-cards .card .div-canvas-learning-time-2 .div-time.div-time-secondary span {
	color: #576574;
}
.div-grade-cards .card .div-canvas-learning-time-2 .div-time span{
	font-size: .875rem;
	width: 55px;
	height: 18px;
	right: 5px;
	margin-top: 3px;
	text-align: right;
}
.div-grade-cards .card .div-canvas-learning-time-2 .div-time.div-time-secondary span{
	margin-top: 5px;
}
.div-grade-cards .card .table.table-sm thead tr th:first-child,
.div-grade-cards .card .table.table-sm tbody tr td:first-child{
	padding-left: 0;
	width: 90px;
}
.div-grade-cards .card .table.table-sm thead tr th:last-child,
.div-grade-cards .card .table.table-sm tbody tr td:last-child{
	padding-right: 0;
}
.div-grade-cards .card .div-distribution-list.scroll-y,
.div-grade-cards .card .div-used-material-list.scroll-y,
.div-grade-cards .card .div-submission-list.scroll-y{
	height: 280px;
}
.div-grade-cards .card .div-distribution-list .table.table-sm,
.div-grade-cards .card .div-used-material-list .table.table-sm,
.div-grade-cards .card .div-submission-list .table.table-sm{
	margin-bottom: 0;
}
.div-grade-cards .card .div-distribution-list .table.table-sm tbody a.ellipsis,
.div-grade-cards .card .div-used-material-list .table.table-sm tbody a.ellipsis,
.div-grade-cards .card .div-submission-list .table.table-sm tbody a.ellipsis{
	width: 200px;
	display: block;
}
.div-grade-cards .card .div-distribution-list .table.table-sm tbody tr td,
.div-grade-cards .card .div-used-material-list .table.table-sm tbody tr td,
.div-grade-cards .card .div-submission-list .table.table-sm tbody tr td{
	cursor: pointer;
}
.div-grade-cards .card .div-distribution-list .table.table-sm tbody tr:hover a,
.div-grade-cards .card .div-used-material-list .table.table-sm tbody tr:hover a,
.div-grade-cards .card .div-submission-list .table.table-sm tbody tr:hover a{
	color:#54a0ff;
	text-decoration: underline;
}
.div-grade-cards .card .div-period-control{
	display: flex;
	justify-content: flex-start;
}
.div-grade-cards .card .div-period-control .div-left,
.div-grade-cards .card .div-period-control .div-right{
	flex-basis: 50%;
	min-width: 50%;
}
.div-grade-cards .card .div-period-control .div-right{
	text-align: right;
}
.div-grade-cards .card .div-period-control .mx-btn{
	height: 26px;
	line-height: 26px;
	background-color: transparent;
	border-radius: 3px;
	color: #2e86de;
	font-size: .75rem;
	padding: 0;
	min-width: 26px;
}
.div-grade-cards .div-chart-badge-labels{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin: 10px 5px 0 5px;
	font-size: .875rem;
	text-align: center;
	font-weight: 700;
}
.div-grade-cards .div-chart-badge-labels .div-badge-label{
	flex-basis: 66px;
	max-width: 66px;
	min-width: 66px;
	height: 26px;
	line-height: 24px;
	margin-right: 5px;
	border-radius: 4px;
	border: 1px solid #C8D6E5;
	cursor: pointer;
}
.div-grade-cards .div-chart-badge-labels .div-badge-label:last-child{
	margin-right: 0;
}
.div-grade-cards .div-chart-badge-labels .div-badge-label.div-primary-color{
	color: #0ABDE3;
}
.div-grade-cards .div-chart-badge-labels .div-badge-label.div-success-color{
	color: #1DD1A1;
}
.div-grade-cards .div-chart-badge-labels .div-badge-label.div-warning-color{
	color: #FECA57;
}
.div-grade-cards .div-chart-badge-labels .div-badge-label.div-danger-color{
	color: #FF6B6B;
}
.div-grade-cards .div-chart-badge-labels .div-badge-label.active{
	border: 1px solid #576574;
}
.div-grade-cards .table.table-sm thead th,
.div-grade-cards .table.table-sm thead td{
	padding: 10px;
}
.div-grade-cards .table.table-sm tbody th,
.div-grade-cards .table.table-sm tbody td{
	padding: 13px;
}

/*==================================
	grade list
==================================*/
.div-grade-list .div-grade-list-control,
.div-grade-list .div-grade-list-control .control-obj{
	display: flex;
	justify-content: flex-end;
}
.div-grade-list .div-grade-list-control .control-obj{
	padding-right: 15px;
	border-right: 1px solid #C3D6E5;
	margin-right: 15px;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details{
	display: flex;
	justify-content: flex-start;
	border-bottom: 1px solid #C8D6E5;
	padding-bottom: 10px;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-prev,
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-next{
	flex-basis: 9px;
	min-width: 9px;
	max-width: 9px;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-prev{
	margin-right: 15px;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-next{
	margin-left: 15px;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-prev img,
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-next img{
	cursor: pointer;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-quiz-control-details-center{
	flex-basis: 600px;
	min-width: 600px;
	max-width: 600px;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-quiz-control-details-center table th,
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-quiz-control-details-center table td{
	font-size: 1.125rem;
}
.div-grade-list .div-grade-list-control .div-quiz-control-details .div-quiz-control-details-center table td{
	font-weight: 700;
	padding-right: 15px;
}
.div-grade-list .div-grade-list-control .form-control-sm{
	width: auto;
	border-radius: 2px;
	height: 32px;
	font-size: .75rem;
	background-repeat: no-repeat;
	line-height: 1;
	padding: 1px 27px 1px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/icons/svg/icon_arrow_down.svg);
	background-size: 12px auto;
	background-position: center right 7px;
	border:1px solid #C3D6E5;
	min-width: 150px;
	font-size: 1rem;
}
.div-grade-list .div-grade-list-control .div-control-btns a{
	font-size: .75rem;
}
.div-grade-list .div-grade-list-control .div-control-btns a .icon-left{
	margin-right: 4px;
	vertical-align: middle;
	display: inline-block;
	position: relative;
	top: -1px;
}
.div-grade-list .div-question-detail{
	border-radius: 10px;
	border:1px solid #C8D6E5;
	padding: 30px 30px 30px 90px;
	position: relative;
	width: 880px;
	margin: 0 auto;
}
.div-grade-list .div-question-detail .div-move-left,
.div-grade-list .div-question-detail .div-move-right{
	width: 26px;
	height: 60px;
	position: absolute;
	z-index: 1;
	top: 50%;
	margin-top: -30px;
	border:1px solid transparent;
	background-repeat: no-repeat;
	background-size: 8px auto;
	background-position: center center;
	cursor: not-allowed;
	border-radius: 4px;
	border: 1px solid #E4EBF3;
	background-color: #fff;
	background-image: url(../images/icons/svg/icon_slide_control_left.svg);
}
.div-grade-list .div-question-detail .div-move-left{
	left: -13px;
}
.div-grade-list .div-question-detail .div-move-right{
	transform: rotateZ(180deg);
	right: -13px;
}
.div-grade-list .div-question-detail .div-move-left.active,
.div-grade-list .div-question-detail .div-move-right.active{
	background-image: url(../images/icons/svg/icon_slide_control_right.svg);
	border-color: #2E86DE;
	cursor: pointer;
}
.div-grade-list .div-question-detail .div-move-left.active{
	transform: rotateZ(180deg);
}
.div-grade-list .div-question-detail .div-move-right.active{
	transform: rotateZ(0deg);
}
.div-grade-list .div-question-detail .div-flex{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-grade-list .div-question-detail .div-flex .div-question-content{
	flex-basis: 570px;
	max-width: 570px;
	min-width: 570px;
	border-right: 1px solid #C8D6E5;
	margin-right: 20px;
	padding-right: 20px;
}
.div-grade-list .div-question-detail .div-flex .div-chart-container{
	flex-basis: 150px;
	max-width: 150px;
	min-width: 150px;
	margin-left: auto;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 4px;
	color: #fff;
	background-color: #2E86DE;
	font-size: 1.375rem;
	position: absolute;
	z-index: 1;
	left: 30px;
	top: 30px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-description-container{
	padding-left: 93px;
	position: relative;
	margin-bottom: 19px;
	min-height: 50px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-description-container .div-label{
	width: 84px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	font-size: .875rem;
	border-radius: 18px;
	background-color: #C8D6E5;
	position: absolute;
	left: 0;
	top: 10px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-description-container .div-description{
	font-size: .875rem;
	line-height: 1.75rem;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section{
	margin-bottom: 15px;
	font-size: .875rem;
	position: relative;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section:last-child{
	margin-bottom: 0;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-select .div-answer-section,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-input .div-answer-section,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-fill .div-answer-section,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-sort .div-answer-section{
	padding-left: 58px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-select .div-answer-section .div-select-number,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-input .div-answer-section .div-select-number,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-fill .div-answer-section .div-select-number,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-sort .div-answer-section .div-select-number{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	font-size: 1.125rem;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	color: #fff;
	background-color: #C8D6E5;
	border-radius: 2px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-input .div-answer-section .div-select-number,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-fill .div-answer-section .div-select-number,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-sort .div-answer-section .div-select-number{
	font-size: .75rem;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section .div-select-text,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section .div-select-result{
	margin-top: 7px;
	display: inline-block;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section .div-select-text{
	margin-right: 22px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-fill .div-answer-section .div-select-text,
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers.div-answers-sort .div-answer-section .div-select-text{
	margin-top: 3px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section.correct .div-select-number{
	background-color: #1DD1A1;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section.correct .div-select-result{
	color: #10AC84;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section.miss .div-select-result{
	color: #FF6B6B;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section .div-view-fill-inputs .form-control:disabled,
.div-grade-list .table-grade-list .div-view-fill-inputs .form-control:disabled {
	background-color: #fff;
	cursor: not-allowed;
	display: inline-block;
	margin-right: 2px;
	vertical-align: middle;
	width: auto;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section .div-view-sort-list,
.div-grade-list .table-grade-list .div-view-sort-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.div-grade-list .table-grade-list .div-view-sort-list{
	margin-top: 10px;
}
.div-grade-list .div-question-detail .div-flex .div-question-content .div-answers .div-answer-section .div-view-sort-list .sort-item,
.div-grade-list .table-grade-list .div-view-sort-list .sort-item {
	padding: 4px 9px;
	border-radius: 2px;
	margin-bottom: 10px;
	margin-right: 5px;
	background-color: #0abde3;
	color: #fff;
	font-weight: 700;
}

/*==================================
	material list
==================================*/
.share-navs .nav-link.active{
    background-color:#f8f9fb
}
.div-material-list .table{
	font-size: .875rem;
}
.folder-option-header td,
.share-folder-option-header td{
    border-bottom: 1px solid #dee2e6;
}
.scrollbar-tab-content{
    overflow-x: auto;
    overflow-y: auto;
}
.materials-list-view .table,
.materials-list-view .table thead,
.materials-list-view .table tbody,
.materials-list-view .table th,
.materials-list-view .table td{
	display: block;
}
.materials-list-view .table tr{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
        height:60px;
}
.div-material-list{
    display: flex;
}
.div-material-list .table thead th{
	font-weight: 300;
	color: #8395A7;
}
.div-material-list .table tbody{
	/*overflow-y: auto;*/
	max-height: 500px;
}
.div-material-list .table thead th,
.div-material-list .table tbody th,
.div-material-list .table tbody td{
	border-top: none;
	border-bottom: 1px solid #E4EBF3;
}
.div-material-list .table tbody tr:last-child th,
.div-material-list .table tbody tr:last-child td{
	border-bottom: none;
}
.div-material-list .table .ui-draggable-dragging th,
.div-material-list .table .ui-draggable-dragging td{
	border-bottom: none;
}
.div-material-list .table tbody th,
.div-material-list .table tbody td{
	padding: 15px;
}
.div-material-list .table tbody tr:nth-child(even) th,
.div-material-list .table tbody tr:nth-child(even) td{
	background-color: #F9FAFC;
}
.materials-list-view .th-checkbox,
.materials-list-view .td-checkbox{
    flex-basis: 60px;
    max-width: 60px;
    min-width: 60px;
}
.materials-list-view .th-preview,
.materials-list-view .td-preview{
    flex-basis: 30px;
    max-width: 30px;
    min-width: 30px;
}
.materials-list-view .th-btns,
.materials-list-view .td-btns{
    flex-basis: 60px;
    max-width: 60px;
    min-width: 60px;
}
.materials-list-view .th-download,
.materials-list-view .td-download{
    flex-basis: 110px;
    max-width: 110px;
    min-width: 110px;
}
.materials-list-view .th-resource-class,
.materials-list-view .td-resource-class{
    flex-basis: 110px;
    max-width: 110px;
    min-width: 110px;
}
.materials-list-view .th-btns,
.materials-list-view .td-btns{
    flex-basis: 60px;
    max-width: 60px;
    min-width: 60px;
}
.materials-list-view .th-name,
.materials-list-view .td-name{
	flex-basis: 400px;
	max-width: 400px;
	min-width: 400px;
}
.materials-list-view .th-material-count,
.materials-list-view .td-material-count{
	flex-basis: 80px;
	max-width: 80px;
	min-width: 80px;
}
.materials-list-view .th-r-datetime,
.materials-list-view .td-r-datetime,
.materials-list-view .th-m-datetime,
.materials-list-view .td-m-datetime{
	flex-basis: 170px;
	max-width: 170px;
	min-width: 170px;
}
.materials-list-view .td-form-checkbox,
.materials-list-view .all-material-checkbox,
.materials-list-view .all-share-material-checkbox,
.materials-list-view .share-material-checkbox,
.materials-list-view .material-checkbox{
    width: 20px;
    height: 20px;
}
.materials-list-view .th-btns,
.materials-list-view .td-btns{
	flex: 1;
}

/*share table*/
.materials-list-view .th-share-checkbox,
.materials-list-view .td-share-checkbox{
    flex-basis: 60px;
    max-width: 60px;
    min-width: 60px;
}
.materials-list-view .th-share-preview,
.materials-list-view .td-share-preview{
    flex-basis: 30px;
    max-width: 30px;
    min-width: 30px;
}
.materials-list-view .th-share-btns,
.materials-list-view .td-share-btns{
    flex-basis: 60px;
    max-width: 60px;
    min-width: 60px;
}
.materials-list-view .th-share-download,
.materials-list-view .td-share-download{
    flex-basis: 110px;
    max-width: 110px;
    min-width: 110px;
}
.materials-list-view .th-share-resource-class,
.materials-list-view .td-share-resource-class{
    flex-basis: 110px;
    max-width: 110px;
    min-width: 110px;
}
.materials-list-view .th-share-btns,
.materials-list-view .td-share-btns{
    flex-basis: 60px;
    max-width: 60px;
    min-width: 60px;
}
.materials-list-view .th-share-name,
.materials-list-view .td-share-name{
    flex-basis: 400px;
    max-width: 400px;
    min-width: 400px;
}
.materials-list-view .th-share-material-count,
.materials-list-view .td-share-material-count{
    flex-basis: 80px;
    max-width: 80px;
    min-width: 80px;
}
.materials-list-view .th-share-r-datetime,
.materials-list-view .td-share-r-datetime,
.materials-list-view .th-share-m-datetime,
.materials-list-view .td-share-m-datetime{
    flex-basis: 170px;
    max-width: 170px;
    min-width: 170px;
}
.materials-list-view .td-share-form-checkbox,
.materials-list-view .all-material-checkbox,
.materials-list-view .all-share-material-checkbox,
.materials-list-view .share-material-checkbox,
.materials-list-view .material-checkbox{
    width: 20px;
    height: 20px;
}
.materials-list-view .th-share-btns,
.materials-list-view .td-share-btns{
    flex: 1;
}
/*end share table*/
.div-material-list .ui-draggable-dragging{
	opacity: .5;
}
.materials-list-view .div-material-list .ui-droppable-hover th,
.materials-list-view .div-material-list .ui-droppable-hover td,
.materials-list-view .div-material-list .ui-droppable-hover .div-folder-name,
.materials-list-view .div-material-list .table tbody tr:hover th,
.materials-list-view .div-material-list .table tbody tr:hover td,
.materials-list-view .div-material-list .table tbody tr:hover th .div-folder-name,
.materials-list-view .div-material-list .table tbody tr:hover td .div-folder-name,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked th,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked td,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked th .div-folder-name,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked td .div-folder-name{
	color: #fff;
}
.materials-list-view .div-material-list .ui-droppable-hover th,
.materials-list-view .div-material-list .ui-droppable-hover td,
.materials-list-view .div-material-list .table tbody tr:hover th,
.materials-list-view .div-material-list .table tbody tr:hover td,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked th,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked td{
	background-color: #2E86DE !important;
}
.materials-list-view .div-material-list .table tbody tr:hover th,
.materials-list-view .div-material-list .table tbody tr:hover td{
	cursor: pointer;
}
.div-material-list .a-folder .div-folder-icon{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 24px;
	height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px auto;
	background-image: url(../images/icons/svg/icon_folder_sm_dark.svg);
}
.div-material-list .tr-master-folder .a-folder .div-folder-icon{
	background-image: url(../images/icons/svg/icon_folder_info.svg);
}
.materials-list-view .div-material-list .ui-droppable-hover .div-folder-icon,
.materials-list-view .div-material-list .table tbody tr:hover th .div-folder-icon,
.materials-list-view .div-material-list .table tbody tr:hover td .div-folder-icon{
	background-image: url(../images/icons/svg/icon_folder_white.svg);
}
.div-material-list .a-folder,
.div-material-list .div-label-material{
	display: block;
	padding-left: 55px;
	text-decoration: none !important;
	position: relative;
}
.div-material-list .drag-obj .a-folder .div-folder-icon,
.div-material-list .drag-obj .div-label-material .div-material-icon{
	cursor: move;
}
.div-material-list .div-material-list-item .div-material-icon{
	width: 32px;
	height: 32px;
	line-height: 32px;
	color: #fff;
	background-color: #c9d7e6;
	border-radius: 4px;
	display: inline-block;
	margin-right: 10px;
	text-align: center;
	font-size: 1.125rem;
}
.div-material-list .a-folder .div-folder-name,
.div-material-list .div-label-material .div-material-icon,
.div-material-list .div-material-list-item .div-folder-name,
.div-material-list .div-material-list-item .div-material-name,
.div-material-list .div-material-list-item .span-count,
.div-material-list .div-material-list-item .span-datetime{
	display: inline-block;
	color: #576574;
	position: relative;
	top: 0;
	max-width: 215px;
}
.div-material-list .a-folder,
.div-material-list .div-label-material,
.div-material-list .td-material-count .div-count,
.div-material-list .td-r-datetime .span-datetime,
.div-material-list .td-m-datetime .span-datetime{
	position: relative;
	top: 2px;
}
.div-material-list .div-folder-edit,
.div-material-list .div-folder-remove{
	cursor: pointer;
	color: #c9d7e6;
}
.div-material-list .a-material-edit,
.div-material-list .div-material-remove{
	cursor: pointer;
	color: #c9d7e6 !important;
	text-decoration: none !important;
}
.materials-list-view .table tbody tr .div-count .span-text,
.materials-list-view .table tbody tr .div-datetime .span-text{
	display: none;
}
.materials-list-view .div-control-btns{
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #C8D6E5;
}
.materials-list-view .div-control-btns a{
	width: 40px;
	height: 40px;
	display: inline-block;
	position: relative;
	border-radius: 4px;
	background-position: center;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0s linear;
}
.materials-list-view .div-control-btns a .span-label{
	display: none;
	padding: 10px;
	font-size: .875rem;
	color: #fff !important;
	text-decoration: none !important;
	text-align: center;
	position: absolute;
	z-index: 3;
	bottom: -45px;
	white-space: nowrap;
}
.materials-list-view .div-control-btns a.a-folder-form .span-label{
	background-color: #2E86DE;
	width: 154px;
	left: -90px;
}
.materials-list-view .div-control-btns a.a-folder-move .span-label{
	background-color: #576574;
	width: 154px;
	left: -56px;
}
.materials-list-view .div-control-btns a.a-folder-remove .span-label{
	background-color: #576574;
	width: 154px;
	left: -56px;
}
.materials-list-view .div-control-btns a:hover .span-label{
	display: block;
}
.materials-list-view .div-control-btns a:hover{
	background-color: #2E86DE;
}
.materials-list-view .div-control-btns a.a-folder-form{
	background-size: 24px auto;
	background-image: url(../images/icons/svg/icon_folder_center_plus_sm.svg);
}
.materials-list-view .div-control-btns a.a-folder-form:hover{
	background-size: 40px auto;
	background-image: url(../images/icons/svg/icon_folder_center_plus_sm_active.svg);
}
.materials-list-view .div-control-btns a.a-folder-move{
	background-size: 24px auto;
	background-image: url(../images/icons/svg/icon_folder_arrow_right_sm.svg);
}
.materials-list-view .div-control-btns a.a-folder-move:hover{
	background-size: 26px auto;
	background-image: url(../images/icons/svg/icon_folder_arrow_right_sm_active.svg);
}
.materials-list-view .div-control-btns a.a-folder-remove{
	background-size: 17px auto;
	background-image: url(../images/icons/png/icon_folder_remove.png);
}
.materials-list-view .div-control-btns a.a-folder-remove:hover{
	background-size: 19px auto;
	background-image: url(../images/icons/png/icon_folder_remove_active.png);
}
.materials-list-view .button-add-material-for-class.mx-btn-secondary{
	background-color: #8395A7 !important;
	opacity: 1 !important;
}
.div-material-list .div-label-material{
	cursor: pointer;
}
.div-material-list .div-label-material input[type="checkbox"]{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.div-material-list .div-label-material .div-material-icon{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	background-color: #0ABDE3;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background-position: center;
	background-repeat: no-repeat;
}
.div-material-list [data-type="word"] .div-label-material .div-material-icon{
	background-size: 13px;
	background-image: url(../images/icons/svg/icon_w.svg);
}
.div-material-list [data-type="input"] .div-label-material .div-material-icon{
	background-size: 14px;
	background-image: url(../images/icons/svg/icon_aa.svg);
}
.div-material-list [data-type="media"] .div-label-material .div-material-icon{
	background-size: 13px;
	background-image: url(../images/icons/svg/icon_video_play_circle.svg);
}
.materials-list-view .div-control{
	position: relative;
	display: inline-block;
	top: 16px;
}
.materials-list-view .text-center.td-btns{
	padding: 0px;
}
.materials-list-view .div-control .div-control-icon{
	position: relative;
	width: 32px;
	height: 32px;
}
.materials-list-view .div-control .div-control-icon span,
.materials-list-view .div-control .div-control-icon span::before,
.materials-list-view .div-control .div-control-icon span::after{
	position: absolute;
	z-index: 1;
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background-color: #8395A7;
}
.materials-list-view .div-control .div-control-icon span::before,
.materials-list-view .div-control .div-control-icon span::after{
	content: '';
}
.materials-list-view .div-control .div-control-icon span{
	left: 50%;
	margin-left: -2px;
	top: 6px;
}
.materials-list-view .div-control .div-control-icon span::before{
	left: -6px;
	top: 0;
}
.materials-list-view .div-control .div-control-icon span::after{
	right: -6px;
	top: 0;
}
.materials-list-view .table tbody tr:hover .div-control .div-control-icon span,
.materials-list-view .table tbody tr:hover .div-control .div-control-icon span::before,
.materials-list-view .table tbody tr:hover .div-control .div-control-icon span::after,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked .div-control .div-control-icon span,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked .div-control .div-control-icon span::before,
.materials-list-view .div-material-list .table tbody tr.tr-material.checked .div-control .div-control-icon span::after{
	background-color: #fff;
}
.materials-list-view .div-control .div-menu-list,
.div-controller-view .div-menu-list{
	position: absolute;
	z-index: 1051;
	border: 1px solid #C8D6E5;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
	background-color: #fff;
	padding: 10px 20px;
	min-width: 200px;
}
.materials-list-view .div-control .div-menu-list{
	display: none;
	top: -20px;
	left: 40px;
}
.materials-list-view .div-control .div-menu-list .div-list,
.div-controller-view .div-menu-list .div-list{
	border-bottom: 1px solid #C8D6E5;
	padding: 15px 15px 15px 45px;
	cursor: pointer;
	font-size: .875rem;
	background-position: 10px center;
	background-repeat: no-repeat;
	line-height: 1;
	color: #576574;
	text-align: left;
	white-space: nowrap;
}
.materials-list-view .div-control .div-menu-list .div-list:hover,
.div-controller-view .div-menu-list .div-list:hover{
	background-color: #F9F9F9;
}
.materials-list-view .div-control .div-menu-list .div-list.div-edit,
.div-controller-view .div-menu-list .div-list.div-edit {
	background-image: url(../images/icons/svg/icon_menu_edit.svg);
	background-size: 20px 20px;
}
.materials-list-view .div-control .div-menu-list .div-list.div-remove,
.div-controller-view .div-menu-list .div-list.div-remove {
	background-image: url(../images/icons/svg/icon_menu_remove.svg);
	background-size: 17px 19px;
}
.div-controller-view .div-menu-list .div-list.div-copy {
	background-image: url(../images/icons/svg/icon_menu_copy.svg);
	background-size: 16px 20px;
}
.div-controller-view .div-menu-list .div-list.div-add-class {
	background-image: url(../images/icons/svg/icon_plus_circle_gray.svg);
	background-size: 20px;
}
.div-controller-view .div-menu-list .div-list.div-move {
	background-image: url(../images/icons/svg/icon_folder_arrow_right_sm.svg);
	background-size: 20px auto;
}
.materials-list-view .div-control .div-menu-list .div-list:last-child,
.div-controller-view .div-menu-list .div-list:last-child{
	border-bottom: none;
}
.materials-list-view .div-control .div-menu-list.skeleton{
	position: absolute;
	z-index: -1;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	min-width: 0;
	padding: 0;
}
.div-controller-view{
	position: absolute;
	z-index: 1039;
}
.modal-material-destination .div-select-folder{
	height: 250px;
	border: 1px solid #C8D6E5;
	overflow-y: scroll;
	overflow-x: hidden;
	margin-bottom: 20px;
}
.modal-material-destination .div-select-folder label{
	display: block;
	width: 100%;
	padding: 15px 15px 15px 50px;
	background-color: #fff;
	border-bottom: 1px solid #E4EBF3;
	font-size: .875rem;
	background-position: 14px 15px;
	background-repeat: no-repeat;
	background-image: url(../images/icons/svg/icon_folder_sm_dark.svg);
	background-size: 24px auto;
	cursor: pointer;
	position: relative;
	margin-bottom: 0;
}
.modal-material-destination .div-select-folder label:last-child{
	border-bottom: none;
}
.modal-material-destination .div-select-folder label.checked,
.modal-material-add-class .div-select-class label.checked{
	background-color: #d5e7f8;
}
.modal-material-destination .div-select-folder label input[type="radio"],
.modal-material-destination .div-select-folder label input[type="checkbox"]{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.modal-material-destination .div-select-folder-create{
	margin-bottom: 20px;
	display: flex;
}
.modal-material-destination .div-select-folder-create .div-icon{
	margin: 11px 25px 0 15px;
}
.modal-material-destination .div-select-folder-create .form-control{
	flex: 1;
	height: 50px;
	padding-left: 17px;
	padding-right: 17px;
}
.modal-material-add-class .div-select-class{
	height: 350px;
	overflow-y: scroll;
	overflow-x: hidden;
}
.modal-material-add-class .div-select-class label{
	border: 1px solid #C8D6E5;
	border-radius: 6px;
	padding: 16px 25px;
	font-size: 1.125rem;
	margin-bottom: 10px;
	cursor: pointer;
	position: relative;
	display: block;
}
.modal-material-add-class .div-select-class label:last-child{
	margin-bottom: 0;
}
.modal-material-add-class .div-select-class label input[type="checkbox"],
.modal-material-add-class .div-select-class label input[type="radio"]{
	position: absolute;
	z-index: -1;
	opacity: 0;
}

/*==================================
	monitors
==================================*/
.div-monitors{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.div-monitors .label-monitor{
	position: relative;
	/*flex-basis: 180px;*/
	/*max-width: 180px;*/
	/*min-width: 180px;*/
	border: 1px solid #c8d6e5;
	margin: 0 40px 40px 0;
	cursor: pointer;
	display:inline-block;
}
.div-monitors .label-monitor:nth-child(6n){
	/*margin-right: 0;*/
}
.div-monitors .label-monitor .div-monitor-body{
	width: 176px;
	height: 99px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid transparent;
	box-sizing: content-box;
}
.div-monitors .label-monitor .div-monitor-body img,
.div-monitors .label-monitor .div-monitor-body object,
.div-monitors .label-monitor .div-monitor-body embed,
.div-monitors .label-monitor .div-monitor-body iframe,
.div-monitors .label-monitor .div-monitor-body canvas,
.div-monitors .label-monitor .div-monitor-body video{
	width: 100%;
	height: 100%;
	pointer-events: none;
	border: none;
}
.div-monitors .label-monitor .div-monitor-footer{
	height: 24px;
	background-color: #c8d6e5;
	line-height: 24px;
	font-size: .75rem;
	color: #fff;
	padding: 0 8px;
}
.div-monitors .label-monitor input[type="checkbox"]{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	opacity: 0;
}
.div-monitors .label-monitor.checked{
	border: 1px solid #2e86de;
}
.div-monitors .label-monitor.checked .div-monitor-body{
	border: 1px solid #2e86de;
}
.div-monitors .label-monitor.checked .div-monitor-footer{
	background-color: #2e86de;
}

/*==================================
	questionnaire
==================================*/
.div-questionnaire-do-title{
	font-size: 1.375rem;
	padding-bottom: 20px;
	border-bottom: 1px solid #c8d6e5;
	margin-bottom: 20px;
}
.div-questionnaire-balloons table{
	width: 100%;
}
.div-questionnaire-balloons table th,
.div-questionnaire-balloons table td{
	vertical-align: top;
	padding: 5px 15px;
}
.div-questionnaire-balloons table th{
	width: 102px;
	text-align: center;
}
.div-questionnaire-balloons table th .div-thumbnail{
	width: 50px;
	height: 50px;
}
.div-questionnaire-balloons table th .div-member-name{
	width: 72px;
}
.div-questionnaire-balloons .div-balloon{
	position: relative;
	min-height: 60px;
	background-color: #10ac84;
	color: #fff;
	padding: 16px 27px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 700;
	display: inline-block;
}
.div-questionnaire-balloons .div-balloon::after{
	border: solid transparent;
	content:'';
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	border-width:10px;
	margin-top: -10px;
	border-right-color: #10ac84;
	right:100%;
	top: 30px;
}
.div-questionnaire-balloons.div-anonymizations .div-thumbnail{
	background-image: url(../images/icons/svg/icon_user_circle.svg) !important;
}
.div-questionnaire-balloons.div-anonymizations .div-member-name{
	visibility: hidden;
}
.div-questionnaire-singlechoice-result .span-label{
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.3125rem;
	color: #fff;
	border-radius: 4px;
	text-align: center;
}
.div-questionnaire-singlechoice-result table,
.div-questionnaire-input-result table{
	width: 100%;
}
.div-questionnaire-singlechoice-result table th,
.div-questionnaire-singlechoice-result table td,
.div-questionnaire-input-result table th,
.div-questionnaire-input-result table td{
	vertical-align: middle;
}
.div-questionnaire-singlechoice-result table th{
	width: 50px;
}
.div-questionnaire-singlechoice-result table th,
.div-questionnaire-input-result table th{
	padding: 0 15px 15px 0;
}
.div-questionnaire-singlechoice-result table td,
.div-questionnaire-input-result table td{
	padding: 0 0 15px 0;
}
.div-questionnaire-singlechoice-result table td p,
.div-questionnaire-input-result table td p{
	margin-bottom: 0;
}
.question-animsition{
	min-height: 400px;
}
.div-questionnaire-do-form .questionnaire-do-title{
	font-size: 1.3125rem;
	margin-bottom: 50px;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices{
	width: 550px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	margin: 0 auto;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice{
	padding: 20px 20px 20px 80px;
	min-height: 70px;
	font-size: 1.125rem;
	position: relative;
	border: 1px solid #c8d6e5;
	border-radius: .25rem;
	background-color: #fff;
	margin-bottom: 10px;
	cursor: pointer;
	transition-property: all;
	transition: 0.1s linear;
	color: #576574;
	text-decoration: none !important;
	text-align: left;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice.disabled{
	opacity: .5;
	outline: none;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice.disabled.selected{
	opacity: 1;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice .span-number{
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.3125rem;
	color: #fff;
	border-radius: 4px;
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	text-align: center;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice[data-form-number="1"] .span-number{
	background-color: #10ac84;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice[data-form-number="2"] .span-number{
	background-color: #1dd1a1;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice[data-form-number="3"] .span-number{
	background-color: #feca57;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice[data-form-number="4"] .span-number{
	background-color: #ff9f43;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice[data-form-number="5"] .span-number{
	background-color: #ff6b6b;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice[data-form-number="6"] .span-number{
	background-color: #ee5253;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices .button-singlechoice.disabled{
	cursor: default;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices:not(.number-only) .button-singlechoice:not(.disabled):hover,
.div-questionnaire-do-form .questionnaire-do-singlechoices:not(.number-only) .button-singlechoice.disabled.selected{
	background-color: #1dd1a1;
	border: 1px solid #1dd1a1;
	color: #fff;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices:not(.number-only) .button-singlechoice:not(.disabled):hover .span-number,
.div-questionnaire-do-form .questionnaire-do-singlechoices:not(.number-only) .button-singlechoice.disabled.selected .span-number{
	background-color: #fff;
	color: #1dd1a1;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only{
	flex-direction: row;
	width: 650px;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice{
	padding: 0;
	border: none;
	margin-right: 10px;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice:last-child{
	margin-right: 0;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice .span-number{
	position: static;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 2.5rem;
	border-radius: 6px;
	border: 1px solid transparent;
	transition-property: all;
	transition: 0.1s linear;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice:not(.disabled):hover .span-number{
	background-color: #fff;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice[data-form-number="1"]:not(.disabled):hover .span-number{
	color: #10ac84;
	border-color: #10ac84;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice[data-form-number="2"]:not(.disabled):hover .span-number{
	color: #1dd1a1;
	border-color: #1dd1a1;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice[data-form-number="3"]:not(.disabled):hover .span-number{
	color: #feca57;
	border-color: #feca57;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice[data-form-number="4"]:not(.disabled):hover .span-number{
	color: #ff9f43;
	border-color: #ff9f43;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice[data-form-number="5"]:not(.disabled):hover .span-number{
	color: #ff6b6b;
	border-color: #ff6b6b;
}
.div-questionnaire-do-form .questionnaire-do-singlechoices.number-only .button-singlechoice[data-form-number="6"]:not(.disabled):hover .span-number{
	color: #ee5253;
	border-color: #ee5253;
}
.div-questionnaire-my-answer{
	text-align: center;
	margin-bottom: 50px;
}
.div-questionnaire-my-answer .div-my-answer{
	font-weight: 700;
	font-size: 1.75rem;
}
.div-questionnaire-my-answer .span-label {
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.3125rem;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	margin-right: 15px;
}

/*==================================
	quiz
==================================*/
.div-quiz-form-sections{
	margin-top: 10px;
}
.div-quiz-form-sections .card.mx-parent-card{
	margin-bottom: 60px;
}
.div-quiz-form-sections #new-section .card.mx-parent-card,
.div-quiz-form-sections .div-section-number{
	margin-bottom: 30px;
}
.div-quiz-form-sections .div-section-number{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.div-quiz-form-sections .div-section-number .span-number{
	width: 50px;
	min-width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.3125rem;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	display: inline-block;
	background-color: #2e86de;
}
.div-quiz-form-sections .div-section-number .span-number.ui-sortable-handle{
	cursor: move;
}
.div-quiz-form-sections .div-section-number .div-sort-btns{
	width: 16px;
	height: 32px;
	position: relative;
	display: inline-block;
}
.div-quiz-form-sections .div-section-number .div-sort-btns .div-sort-up,
.div-quiz-form-sections .div-section-number .div-sort-btns .div-sort-down{
	height: 10px;
	cursor: pointer;
	position: absolute;
	z-index: 1;
	left: 0;
	line-height: 1;
}
.div-quiz-form-sections .div-section-number .div-sort-btns .div-sort-up{
	top: 0;
}
.div-quiz-form-sections .div-section-number .div-sort-btns .div-sort-down{
	bottom: 5px;
}
.div-quiz-form-sections #div-sortble .div-section:first-child .div-sort-btns .div-sort-up,
.div-quiz-form-sections #div-sortble .div-section:last-child .div-sort-btns .div-sort-down{
	display: none;
}
.div-quiz-form-sections .div-section-number .div-quiz-type-name,
.div-quiz-form-sections .div-section-number .badge.badge-md{
	padding: 7px 14px;
	background-color: #c8d6e5;
	height: 38px;
	border-radius: 30px;
	margin-top: 6px;
	color: #fff;
	min-width: 95px;
	text-align: center;
	line-height: 22px;
}
.div-quiz-form-sections .div-section-number .div-quiz-type-name{
	margin-left: 15px;
}
.div-quiz-form-sections .div-section-number .badge.badge-md{
	margin-left: 15px;
}
.div-quiz-edit-form{
	display: none;
}
.div-quiz-edit-form .div-quiz-control-btns .mx-btn-save,
.div-quiz-edit-form .div-quiz-control-btns .button-quiz-form-cancel{
	min-width: 160px;
}
.div-quiz-edit-form .div-quiz-control-btns .mx-btn-remove{
	color: #ee5253 !important;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice,
.div-quiz-edit-form .div-form-multichoices .div-choice,
.div-quiz-edit-form .div-form-inputs .div-input{
	position: relative;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice .div-number,
.div-quiz-edit-form .div-form-multichoices .div-choice .div-number{
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	width: 50px;
	height: 50px;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice .div-number .label-number,
.div-quiz-edit-form .div-form-multichoices .div-choice .div-number .label-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.3125rem;
	color: #fff;
	border-radius: 4px;
	position: relative;
	text-align: center;
	background-color: #c8d6e5;
	cursor: pointer;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice .div-number .label-number.checked,
.div-quiz-edit-form .div-form-multichoices .div-choice .div-number .label-number.checked{
	background-color: #1dd1a1;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice .div-number .label-number input[type="radio"],
.div-quiz-edit-form .div-form-multichoices .div-choice .div-number .label-number input[type="checkbox"]{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice .form-control,
.div-quiz-edit-form .div-form-multichoices .div-choice .form-control,
.div-quiz-edit-form .div-form-inputs .div-input .form-control{
	padding-right: 50px;
	margin-bottom: 10px;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice .form-control,
.div-quiz-edit-form .div-form-multichoices .div-choice .form-control{
	padding-left: 80px;
}
.div-quiz-edit-form .div-form-singlechoices .div-choice .div-remove-choice,
.div-quiz-edit-form .div-form-multichoices .div-choice .div-remove-choice,
.div-quiz-edit-form .div-form-inputs .div-input .div-remove-input{
	position: absolute;
	right: 17px;
	top: 20px;
	line-height: 1;
	font-size: 1.5rem;
	cursor: pointer;
	color: #c8d6e5;
	transition-property: all;
	transition: 0.3s linear;
}
.div-quiz-edit-form .div-fill-forms .div-fill-form{
	margin-bottom: 10px;
	position: relative;
}
.div-quiz-edit-form .div-fill-forms .div-fill-form .div-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.3125rem;
	color: #fff;
	border-radius: 4px;
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	text-align: center;
	background-color: #c8d6e5;
}
.div-quiz-edit-form .div-fill-forms .div-fill-form .form-control{
	padding-right: 50px;
	padding-left: 80px;
}
.div-quiz-edit-form .div-fill-forms .div-fill-form input.form-control{
	height: 70px;
	min-width: 70px;
}
.div-quiz-edit-form .div-fill-forms .div-fill-form textarea.form-control{
	height: auto;
}
.div-quiz-edit-form .div-fill-forms .div-fill-form .div-remove-fill{
	position: absolute;
	right: 17px;
	top: 20px;
	line-height: 1;
	font-size: 1.5rem;
	cursor: pointer;
	color: #c8d6e5;
	transition-property: all;
	transition: 0.3s linear;
}
.div-quiz-edit-form .div-sort-form-control-btns .mx-btn{
	height: 32px;
}
.div-quiz-edit-form .div-sorts{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.div-quiz-edit-form .div-sorts .word{
	transition-property: all;
	transition: 0.3s linear;
	display: inline-block;
	padding: 4px 9px;
	border-radius: 2px;
	margin-bottom: 10px;
	background-color: #0abde3;
	color: #fff;
	margin-right: 4px;
}
.div-quiz-edit-form .div-sorts .word.disassembly{
	background-color: #10ac84;
	cursor: pointer;
}
.div-quiz-form-sections .div-view-choices .div-view-choice,
.div-quiz-form-sections .div-view-inputs .div-view-input,
.div-quiz-form-sections .div-view-fills .div-view-fill,
.div-quiz-form-sections .div-view-sorts .div-view-sort{
	position: relative;
	margin-bottom: 10px;
	padding: 10px 10px 10px 50px;
}
.div-quiz-form-sections .div-view-choices .div-view-choice .div-number,
.div-quiz-form-sections .div-view-inputs .div-view-input .div-number,
.div-quiz-form-sections .div-view-fills .div-view-fill .div-number,
.div-quiz-form-sections .div-view-sorts .div-view-sort .div-number{
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 1.25rem;
	color: #fff;
	border-radius: 3px;
	position: absolute;
	z-index: 1;
	top: 5px;
	left: 0px;
	text-align: center;
	background-color: #c8d6e5;
}
.div-quiz-form-sections .div-view-choices .div-view-choice .div-number.correct,
.div-quiz-form-sections .div-view-inputs .div-view-input .div-number,
.div-quiz-form-sections .div-view-fills .div-view-fill .div-number,
.div-quiz-form-sections .div-view-sorts .div-view-sort .div-number{
	background-color: #1dd1a1;
}
.div-quiz-form-sections .div-view-inputs .div-view-input .div-number,
.div-quiz-form-sections .div-view-fills .div-view-fill .div-number,
.div-quiz-form-sections .div-view-sorts .div-view-sort .div-number{
	font-size: .875rem;
	font-weight: 700;
}
.div-quiz-form-sections .div-view-fills .div-view-fill .div-number,
.div-quiz-form-sections .div-view-sorts .div-view-sort .div-number{
	top: 8px;
}
.div-quiz-form-sections .div-view-fills .div-view-fill .div-view-fill-inputs span,
.div-quiz-form-sections .div-view-fills .div-view-fill .div-view-fill-inputs .form-control{
	display: inline-block;
	margin-right: 2px;
	vertical-align: middle;
	width: auto;
}
.div-quiz-form-sections .div-view-fills .div-view-fill .div-view-fill-inputs .form-control:disabled{
	background-color: #fff;
	cursor: not-allowed;
}
.div-quiz-form-sections .div-view-sorts .div-view-sort .div-view-sort-list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.div-quiz-form-sections .div-view-sorts .div-view-sort .div-view-sort-list .sort-item{
	padding: 4px 9px;
	border-radius: 2px;
	margin-bottom: 10px;
	margin-right: 5px;
	background-color: #0abde3;
	color: #fff;
	font-weight: 700;
}
.div-quiz-form-sections .div-section-number .div-quiz-control-btns{
	margin-left: auto;
	position: relative;
	top: 9px;
	display: flex;
	justify-content: flex-start;
}
.div-quiz-form-sections .button-quiz-form-copy,
.div-quiz-form-sections .button-quiz-form-remove,
.div-quiz-form-sections .button-quiz-form-edit{
	min-width: 32px !important;
	height: 32px !important;
	padding: 0;
	line-height: 32px;
	margin-right: 10px;
}
.div-distribution-quizzes{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
	position: relative;
}
.div-distribution-quizzes .label-section,
.div-distribution-quizzes .label-section .div-icon-quiz,
.div-distribution-quizzes .label-section .div-icon-quiz-view-questions{
	transition-property: all;
	transition: 0.2s linear;
}
.div-distribution-quizzes .label-section{
	flex-basis: 205px;
	min-width: 205px;
	max-width: 205px;
	height: 205px;
	margin: 0 10px  20px 10px;
	border-radius: 9px;
	border: 1px solid transparent;
	position: relative;
	padding-top: 40px;
	background-color: #fff;
	cursor: pointer;
}
.div-distribution-quizzes .label-section.checked,
.div-distribution-quizzes .label-section:hover{
	border-color: #2e86de;
}
.div-distribution-quizzes .label-section input[type="radio"]{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.div-distribution-quizzes .label-section .div-icon-quiz{
	height: 76px;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 60px auto;
	background-position: 62px top;
	background-image: url(../images/icons/svg/icon_quiz.svg);
}
.div-distribution-quizzes .label-section .div-quiz-title{
	margin: 12px 15px 0 15px;
	font-weight: 700;
	text-align: center;
}
.div-distribution-quizzes .label-section.checked .div-icon-quiz,
.div-distribution-quizzes .label-section:hover .div-icon-quiz{
	background-image: url(../images/icons/svg/icon_quiz_primary.svg);
}
.div-distribution-quizzes .label-section .div-icon-quiz-view-questions{
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-size: 18px auto;
	background-position: center;
	background-image: url(../images/icons/svg/icon_quiz_search.svg);
	position: absolute;
	z-index: 1;
	top: 97px;
	left: 128px;
}
.div-distribution-quizzes .label-section.checked .div-icon-quiz-view-questions,
.div-distribution-quizzes .label-section:hover .div-icon-quiz-view-questions{
	background-image: url(../images/icons/svg/icon_quiz_search_primary.svg);
}
.div-distribution-quizzes .label-section .div-quiz-r-date{
	text-align: center;
	font-size: .875rem;
	margin-top: 5px;
	color: #8395a7;
}
.div-distribution-quizzes .label-section .div-popup-preview{
	position: absolute;
	z-index: 20;
	top: 130px;
	left: 116px;
	display: none;
	padding-top: 20px;
	margin-top: -20px;
}
.div-distribution-quizzes .label-section .div-hover-area:hover .div-popup-preview,
.div-distribution-quizzes .label-section .div-hover-area .div-popup-preview:hover{
	display: block;
	transition-property: all;
	transition: 0.5s linear;
}
.div-distribution-quizzes .label-section .div-hover-area.left .div-popup-preview{
	left: unset;
	right: 37px;
}
.div-distribution-quizzes .label-section .div-hover-area.top .div-popup-preview{
	top: unset;
	bottom: 122px;
	left: 114px;
	padding-top: 0;
	margin-top: 0;
	padding-bottom: 20px;
	margin-bottom: -20px;
}
.div-distribution-quizzes .label-section .div-hover-area.top.left .div-popup-preview{
	left: unset;
	right: 46px;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body{
	position: relative;
	border: 1px solid #c8d6e5;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.122);
	padding: 25px;
	border-radius: 3px;
	font-size: 1rem;
	background-color: #fff;
	width: 320px;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body::before{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 12px 9px;
	border-color: transparent transparent #c8d6e5 transparent;
	position: absolute;
	z-index: 1;
	top: -12px;
	left: 11px;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body::after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 10px 8px;
	border-color: transparent transparent #ffffff transparent;
	position: absolute;
	z-index: 2;
	top: -10px;
	left: 12px;
}
.div-distribution-quizzes .label-section .div-hover-area.top .div-popup-preview .div-popup-preview-body::before,
.div-distribution-quizzes .label-section .div-hover-area.top .div-popup-preview .div-popup-preview-body::after{
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.div-distribution-quizzes .label-section .div-hover-area.top .div-popup-preview .div-popup-preview-body::before{
	top: unset;
	bottom: -12px;
}
.div-distribution-quizzes .label-section .div-hover-area.top .div-popup-preview .div-popup-preview-body::after{
	top: unset;
	bottom: -10px;
}
.div-distribution-quizzes .label-section .div-hover-area.bottom.left .div-popup-preview .div-popup-preview-body::before{
	left: unset;
	right: 19px;
}
.div-distribution-quizzes .label-section .div-hover-area.bottom.left .div-popup-preview .div-popup-preview-body::after{
	left: unset;
	right: 20px;
}
.div-distribution-quizzes .label-section .div-hover-area.top.left .div-popup-preview .div-popup-preview-body::before{
	left: unset;
	right: 11px;
}
.div-distribution-quizzes .label-section .div-hover-area.top.left .div-popup-preview .div-popup-preview-body::after{
	left: unset;
	right: 12px;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .scroll-y{
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 250px;
	margin-right: -10px;
	padding-right: 10px;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections{
	font-size: .875rem;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-section-number{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .span-number{
	width: 30px;
	min-width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 1rem;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .badge.badge-md{
	padding: 4px 8px;
	height: 25px;
	margin-top: 3px;
	min-width: 75px;
	line-height: 16px;
	font-size: .875rem;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-point{
	margin-left: auto;
	line-height: 30px;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-point span{
	display: inline-block;
	margin-right: 5px;
	font-size: .875rem;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-point .strong-point{
	font-size: 1rem;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .card.mx-parent-card{
	box-shadow: none;
	border-radius: 0;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .card.mx-parent-card .card-body{
	padding: 0;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .card.mx-parent-card .card-body .badge.badge-md{
	font-size: .875rem;
	padding: .3rem .55rem;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-choices .div-view-choice,
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-inputs .div-view-input,
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-fills .div-view-fill,
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-sorts .div-view-sort {
	margin-bottom: 0px;
	padding: 7px 7px 7px 38px;
}
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-choices .div-view-choice .div-number,
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-inputs .div-view-input .div-number,
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-fills .div-view-fill .div-number,
.div-distribution-quizzes .label-section .div-popup-preview .div-popup-preview-body .div-quiz-form-sections .div-view-sorts .div-view-sort .div-number{
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: .875rem;
}
.div-form-quizzes{
	color: #222f3e;
}
.div-form-quizzes .div-section{
	margin-bottom: 40px;
	border-bottom: 1px solid #c8d6e5;
	padding-bottom: 40px;
	position: relative;
}
.div-form-quizzes .div-section:last-child{
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}
.div-form-quizzes .div-section .div-section-number{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: flex-start;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.div-form-quizzes .div-section .div-section-number .div-point{
	margin-left: auto;
	line-height: 50px;
	min-width: 50px;
	max-width: 50px;
	text-align: center;
	margin-top: 16px;
	line-height: 1;
	color: #2e86de;
}
.div-form-quizzes .div-section .div-section-number .div-point .span-point{
	white-space: nowrap;
}
.div-form-quizzes .div-section .div-section-number .div-point span,
.div-form-quizzes .div-section .div-section-number .div-point .strong-point{
	display: inline-block;
}
.div-form-quizzes .div-section .div-section-number .div-point .strong-point{
	font-size: 1.5rem;
	margin-left: 5px;
}
.div-form-quizzes .div-section .card.mx-parent-card{
	box-shadow: none;
	border-radius: 0;
	margin-left: 80px;
}
.div-form-quizzes .div-section .card.mx-parent-card .card-body{
	padding: 0;
}
.div-form-quizzes .div-section .div-form-singlechoices .custom-control,
.div-form-quizzes .div-section .div-form-multichoices .custom-control{
	margin-bottom: 26px;
	padding-left: 36px;
}
.div-form-quizzes .div-section .div-form-singlechoices .custom-control .custom-control-input,
.div-form-quizzes .div-section .div-form-multichoices .custom-control .custom-control-input{
	position: absolute;
}
.div-form-quizzes .div-section .div-form-singlechoices .custom-control .custom-control-label::before,
.div-form-quizzes .div-section .div-form-multichoices .custom-control .custom-control-label::before{
	border: 1px solid #c8d6e5;
}
.div-form-quizzes .div-section .div-form-singlechoices .custom-control .custom-control-label::before,
.div-form-quizzes .div-section .div-form-singlechoices .custom-control .custom-control-label::after,
.div-form-quizzes .div-section .div-form-multichoices .custom-control .custom-control-label::before,
.div-form-quizzes .div-section .div-form-multichoices .custom-control .custom-control-label::after{
	left: -36px;
	top: 0;
	width: 24px;
	height: 24px;
}

.div-form-quizzes .div-section .div-form-singlechoices .custom-control:last-child,
.div-form-quizzes .div-section .div-form-multichoices .custom-control:last-child{
	margin-bottom: 0;
}
.div-form-quizzes .div-section .p-quiz-question-text{
	margin-bottom: 30px;
}
.div-form-quizzes .div-section .div-form-fills .form-control{
	display: inline-block;
	width: auto;
}
.div-form-quizzes .div-section .div-form-fills input[type="text"].form-control{
	min-width: 4rem;
}
.div-form-quizzes .div-section .div-form-sorts .div-form-sort .div-form-sort-list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.div-form-quizzes .div-section .div-form-sorts .div-form-sort .div-form-sort-list .sort-item {
	padding: 4px 9px;
	border-radius: 2px;
	margin-bottom: 10px;
	margin-right: 5px;
	background-color: #0abde3;
	color: #fff;
	font-weight: 700;
	cursor: move;
}
.div-form-quizzes .div-section .div-form-sorts .div-form-sort .div-form-sort-list .ui-sortable-helper{
	background-color: #000 !important;
}
.div-form-quizzes .div-section .div-form-sorts .div-form-sort .div-form-sort-list .ui-sortable-placeholder{
	background-color: #1dd1a1 !important;
	visibility: visible !important;
}

/*==================================
	english test
==================================*/
.div-description-content-header{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	min-height: 40px;
	border-bottom: 1px solid #C8D6E5;
	width: 100%;
	margin-bottom: 45px;
}
.div-description-content-header .div-title{
	margin-right: auto;
	color: #54A0FF;
	font-size: 1.5rem;
	line-height: 2.25rem;
	padding-bottom: 5px;
}
.div-description-content-header .div-step-proggless,
.div-description-content-header .div-step-proggless .div-step-proggless-bar{
	width: 213px;
	height: 10px;
	position: relative;
}
.div-description-content-header .div-step-proggless{
	margin-top: 13px;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar{
	background-color: #C8D6E5;
	border-radius: 10px;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-passed-bar{
	background-color: #54A0FF;
	border-radius: 10px;
	height: 10px;
	width: 0%;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-step-circle{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	position: absolute;
	z-index: 2;
	top: 0;
	background-color: #fff;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-step-circle.div-step1{
	left: 33%;
	margin-left: -5px;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-step-circle.div-step2{
	left: 66%;
	margin-left: -5px;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-step-circle.div-step3{
	right: 0;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-step-circle.div-current{
	width: 20px;
	height: 20px;
	top: -5px;
}
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-step-circle.div-step1.div-current,
.div-description-content-header .div-step-proggless .div-step-proggless-bar .div-step-circle.div-step2.div-current{
	margin-left: -10px;
}
.div-description-content-body .p-title{
	font-size: 1.3125rem;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	padding-left: 28px;
}
.div-description-content-body .p-title::before{
	content: '';
	position: absolute;
	z-index: 1;
	width: 16px;
	height: 16px;
	border-radius: 16px;
	top: 10px;
	left: 0;
	background-color: #C8D6E5;
}
.div-description-content-body ul.ul-checks,
.div-description-content-body ul.ul-checks li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.div-description-content-body ul.ul-checks{
	margin-left: 28px;
}
.div-description-content-body ul.ul-checks li{
	font-size: 1.125rem;
	padding-left: 55px;
	background-image: url(../images/icons/svg/icon_check_sm_muted.svg);
	background-position: left 2px;
	background-size: 30px auto;
	background-repeat: no-repeat;
	margin-bottom: 30px;
}
.div-description-content-body ul.ul-checks li .img-icon{
	margin: 0 5px;
	position: relative;
	top: -2px;
}
.audio-player-secondary{
	display: inline-block;
}
.audio-player-secondary .div-audio-controller{
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	padding: 18px;
	background-color: #C8D6E5;
	border-radius: 2px;
}
.audio-player-secondary audio{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.audio-player-secondary .div-btns{
	margin-right: 17px;
}
.audio-player-secondary .div-btns .div-pause,
.audio-player-secondary .div-btns .div-play{
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-size: auto 24px;
	background-position: center;
	cursor: pointer;
}
.audio-player-secondary .div-btns .div-pause{
	background-image: url(../images/icons/svg/icon_pause.svg);
}
.audio-player-secondary .div-btns .div-play{
	background-image: url(../images/icons/svg/icon_play.svg);
}
.audio-player-secondary .div-progress{
	position: relative;
	width: 120px;
	margin-top: 7px;
}
.audio-player-secondary .div-progress .div-progress-bar{
	width: 120px;
	height: 10px;
	background-color: #fff;
}
.audio-player-secondary .div-progress .div-passed{
	position: absolute;
	z-index: 2;
	height: 10px;
	width: 0;
	background-color: #EE5253;
	left: 0;
	top: 0;
}
.audio-player-secondary .div-progress .div-handle{
	display: none;
}
.audio-player-secondary .time{
	margin-left: 13px;
	white-space: nowrap;
}
.audio-player-secondary .time *{
	display: inline-block;
	white-space: nowrap;
}
.div-time-description-message{
	margin-top: 30px;
	padding-left: 67px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 50px;
	background-image: url(../images/icons/svg/icon_clock.svg);
	font-size: 1.5rem;
	line-height: 2.25rem;
}
.div-english-do-header{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	width: 100%;
	padding-right: 120px;
	position: relative;
	border-bottom: 1px solid #C8D6E5;
	min-height: 73px;
	margin-bottom: 20px;
}
.div-english-do-header .div-tab{
	padding-left: 41px;
	padding-top: 25px;
	height: 72px;
	background-repeat: no-repeat;
	background-position: left 25px;
	background-size: 36px auto;
	white-space: nowrap;
	flex-basis: 141px;
	min-width: 141px;
	margin-right: 20px;
	border-bottom: 2px solid transparent;
}
.div-english-do-header .div-tab.div-tab-listening{
	background-image: url(../images/icons/svg/icon_listening_muted.svg);
	flex-basis: 120px;
	min-width: 120px;
}
.div-english-do-header .div-tab.div-tab-reading{
	background-image: url(../images/icons/svg/icon_reading_muted.svg);
	background-position: left 30px;
}
.div-english-do-header .div-tab.div-tab-writing{
	background-image: url(../images/icons/svg/icon_writing_muted.svg);
}
.div-english-do-header .div-tab.div-tab-speaking{
	background-image: url(../images/icons/svg/icon_speaking_muted.svg);
}
.div-english-do-header .div-tab strong,
.div-english-do-header .div-tab span{
	display: block;
	color: #C8D6E5;
	line-height: 1;
}
.div-english-do-header .div-tab strong{
	font-weight: 700;
	margin-bottom: 7px;
}
.div-english-do-header .div-tab span{
	font-size: .875rem;
}
.div-english-do-header .div-tab.div-tab-listening.active{
	background-image: url(../images/icons/svg/icon_listening.svg);
	border-bottom: 2px solid #0ABDE3;
}
.div-english-do-header .div-tab.div-tab-listening.active strong,
.div-english-do-header .div-tab.div-tab-listening.active span{
	color: #0ABDE3;
}
.div-english-do-header .div-tab.div-tab-reading.active{
	background-image: url(../images/icons/svg/icon_reading.svg);
	border-bottom: 2px solid #FECA57;
}
.div-english-do-header .div-tab.div-tab-reading.active strong,
.div-english-do-header .div-tab.div-tab-reading.active span{
	color: #FECA57;
}
.div-english-do-header .div-tab.div-tab-writing.active{
	background-image: url(../images/icons/svg/icon_writing.svg);
	border-bottom: 2px solid #FF6B6B;
}
.div-english-do-header .div-tab.div-tab-writing.active strong,
.div-english-do-header .div-tab.div-tab-writing.active span{
	color: #FF6B6B;
}
.div-english-do-header .div-tab.div-tab-speaking.active{
	background-image: url(../images/icons/svg/icon_speaking.svg);
	border-bottom: 2px solid #1DD1A1;
}
.div-english-do-header .div-tab.div-tab-speaking.active strong,
.div-english-do-header .div-tab.div-tab-speaking.active span{
	color: #1DD1A1;
}
.div-english-do-timer{
	position: absolute;
	z-index: 2;
	width: 120px;
	height: 60px;
	border-radius: 2px;
	background-color: #8395A7;
	text-align: center;
	top: 0;
	right: 0;
}
.div-english-do-timer .div-question-pager{
	color: #fff;
	margin-top: 2px;
}
.div-english-do-timer .div-question-pager .span-unit{
	font-size: .875rem;
}
.div-english-do-timer .div-common-main-timer{
	margin-bottom: 0;
}
.div-english-do-timer .div-common-main-timer .jst-hours,
.div-english-do-timer .div-common-main-timer .jst-minutes,
.div-english-do-timer .div-common-main-timer .jst-seconds{
	font-size: 1.375rem;
	color: #fff;
}
.div-english-do-timer .div-common-main-timer .jst-hours{
	display: none;
}
.div-english-do-timer .div-common-main-timer .jst-hours,
.div-english-do-timer .div-common-main-timer .jst-minutes{
	min-width: 45px;
}
.div-english-do-timer .div-common-main-timer .timer > .jst-seconds{
	min-width: 33px;
}
.div-english-do-body .div-question-title,
.div-div-english-do-titles .div-question-title{
	font-size: 1.3125rem;
	font-weight: 700;
	margin-bottom: 40px;
}
.div-english-do-body .div-question-number{
	font-size: .875rem;
	font-weight: 700;
	margin-bottom: 30px;
}
.div-english-do-body .fieldset-question-radio-inputs label{
	padding-left: 40px;
	position: relative;
	font-size: 1.125rem;
	margin-bottom: 20px;
	cursor: pointer;
	display: block;
}
.div-english-do-body .fieldset-question-radio-inputs label input[type="radio"]{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.div-english-do-body .fieldset-question-radio-inputs label .span-label-number{
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	color: #fff;
	font-size: .875rem;
	text-align: center;
	line-height: 30px;
	background-color: #8395A7;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}
.div-english-do-body .div-question-long-text{
	max-height: 250px;
	border-bottom: 1px solid #C8D6E5;
	line-height: 2rem;
	padding: 5px 0;
	overflow-y: auto;
	margin-bottom: 20px;
}
.div-english-do-body .div-question-fill{
	font-size: 1.125rem;
	line-height: 2rem;
}
.div-english-do-body .div-question-fill .form-control{
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #C8D6E5;
	height: 27px;
	display: inline-block;
	margin: 0 2px;
	padding: 0;
	font-size: 1.125rem;
}
.div-english-do-body .div-audio-flex{
	display: flex;
	justify-content: flex-start;
	width: 100%;
}
.div-english-do-body .div-audio-flex > .div-question-title{
	margin-right: auto;
	padding-right: 10px;
}
.div-english-do-body .audio-player-secondary .div-audio-controller,
.div-english-do-body .div-recorder-layer .audio-recorder{
	background-color: #fff;
}
.div-english-do-body .div-recorder-layer .audio-recorder .div-progress .div-progress-border{
	background: repeating-linear-gradient(90deg, #C8D6E5 0, #C8D6E5, transparent 3px, transparent 3px);
}
.div-english-do-body .div-recorder-layer .audio-recorder{
	padding-left: 0;
}
.div-english-do-body .audio-player-secondary .div-progress .div-progress-bar{
	background-color: #C8D6E5;
}
.div-english-do-body section[data-question-type="0"] .div-question-number{
	color: #0ABDE3;
}
.div-english-do-body section[data-question-type="0"] .fieldset-question-radio-inputs label.checked .span-label-number{
	background-color: #0ABDE3;
}
.div-english-do-body section[data-question-type="1"] .div-question-number{
	color: #FECA57;
}
.div-english-do-body section[data-question-type="1"] .fieldset-question-radio-inputs label.checked .span-label-number{
	background-color: #FECA57;
}
.div-english-do-body section[data-question-type="2"] .div-question-number{
	color: #FF6B6B;
}
.div-english-do-body section[data-question-type="2"] .fieldset-question-radio-inputs label.checked .span-label-number{
	background-color: #FF6B6B;
}
.div-english-do-body section[data-question-type="3"] .div-question-number{
	color: #1DD1A1;
}
.div-english-do-body section[data-question-type="3"] .fieldset-question-radio-inputs label.checked .span-label-number{
	background-color: #1DD1A1;
}
.div-english-do-body section[data-question-type="0"] .div-question-fill .form-control:focus{
	border-bottom: 1px solid #0ABDE3;
}
.div-english-do-body section[data-question-type="1"] .div-question-fill .form-control:focus{
	border-bottom: 1px solid #FECA57;
}
.div-english-do-body section[data-question-type="2"] .div-question-fill .form-control:focus{
	border-bottom: 1px solid #FF6B6B;
}
.div-english-do-body section[data-question-type="3"] .div-question-fill .form-control:focus{
	border-bottom: 1px solid #1DD1A1;
}

/*==================================
	vocabulary
==================================*/
.div-vocabulary-form .div-section,
.div-vocabulary-grade-list .div-section{
	padding-bottom: 30px;
	border-bottom: 1px solid #c8d6e5;
	margin-bottom: 35px;
	padding-right: 75px;
	position: relative;
}
.div-vocabulary-form .div-section:last-child,
.div-vocabulary-grade-list .div-section:last-child{
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}
.div-vocabulary-form .div-question-word,
.div-vocabulary-grade-list .div-question-word{
	margin-bottom: 30px;
	padding-right: 160px;
}
.div-vocabulary-grade-list .div-question-word{
	position: relative;
}
.div-vocabulary-grade-list .div-section .div-question-word .div-times,
.div-vocabulary-grade-list .div-section .div-question-word .div-circle{
	display: inline-block;
	width: 4rem;
	position: relative;
	min-height: 1px;
}
.div-vocabulary-grade-list .div-section .div-question-word .div-times span,
.div-vocabulary-grade-list .div-section .div-question-word .div-circle span{
	position: absolute;
	z-index: 1;
	line-height: 1;
	font-weight: 700;
}
.div-vocabulary-grade-list .div-section .div-question-word .div-times span{
	color: #ff6b6b;
	font-size: 4rem;
	top: -37px;
}
.div-vocabulary-grade-list .div-section .div-question-word .div-circle span{
	color: #2e86de;
	font-size: 3.6rem;
	top: -34px;
}
.div-vocabulary-grade-list .div-section.correct .div-question-word .div-times,
.div-vocabulary-grade-list .div-section.miss .div-question-word .div-circle{
	display: none;
}
.div-vocabulary-form .div-question-word .span-number,
.div-vocabulary-form .div-question-word .strong-word-name,
.div-word-question .div-section .div-do-table .div-question-word .div-number,
.div-word-question .div-section .div-do-table .div-question-word .strong-word-name,
.div-vocabulary-grade-list .div-question-word .span-number,
.div-vocabulary-grade-list .div-question-word .strong-word-name{
	display: inline-block;
	vertical-align: middle;
}
.div-vocabulary-form .div-question-word .span-number,
.div-vocabulary-grade-list .div-question-word .span-number{
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.3125rem;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	margin-right: 20px;
}
.div-vocabulary-form .div-question-word .strong-word-name,
.div-vocabulary-grade-list .div-question-word .strong-word-name{
	font-size: 1.375rem;
	font-weight: 700;
}
.div-vocabulary-form .div-choises,
.div-vocabulary-grade-list .div-choises{
	margin-left: 75px;
}
.div-vocabulary-form .div-score-form{
	justify-content: flex-end;
	position: absolute;
	z-index: 1;
	right: 75px;
	top: 0;
}
.div-vocabulary-form .div-score-form .form-control{
	width: 60px;
	height: 50px;
	font-size: 1.125rem;
}
.div-vocabulary-grade-list .div-word-score{
	text-align: right;
	position: absolute;
	z-index: 1;
	right: 75px;
	top: 3px;
}
.div-vocabulary-grade-list .div-word-score span,
.div-vocabulary-grade-list .div-word-score strong{
	display: inline-block;
	vertical-align: bottom;
}
.div-vocabulary-grade-list .div-word-score span{
	position: relative;
	top: -5px;
}
.div-vocabulary-form .div-choises .div-choises-word,
.div-vocabulary-grade-list .div-choises .div-choises-word{
	margin-bottom: 5px;
}
.div-vocabulary-form .div-choises .div-choises-word .div-choises-word-form{
	position: relative;
}
.div-vocabulary-form .div-choises .div-choises-word .div-choises-word-form .div-choises-word-form-cover{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom:0;
	left: 0;
	z-index: 1;
	cursor: move;
}
.div-vocabulary-form .div-choises .div-choises-word .div-choises-word-form .form-control{
	font-size: 1.125rem;
	padding: .2rem 1.25rem;
	height: 50px;
}
.div-vocabulary-grade-list .div-choises .div-choises-word .div-word{
	font-size: 1.125rem;
	padding: .6rem 1.25rem;
	height: 50px;
	border: 1px solid #c8d6e5;
	background-color: #fff;
	border-radius: .25rem;
}
.div-vocabulary-form .div-choises .div-choises-word.correct-word .div-choises-word-form .form-control,
.div-vocabulary-grade-list .div-choises .div-choises-word .div-word.correct{
	font-weight: 700;
	color: #2e86de;
}
.div-vocabulary-grade-list .div-choises .div-choises-word .div-word.chose:not(.correct){
	font-weight: 700;
	color: #ff6b6b;
}
.div-vocabulary-form .div-choises .div-choises-word .div-choises-word-form .form-control:disabled,
.div-vocabulary-form .div-choises .div-choises-word .div-choises-word-form .form-control[readonly]{
	border: 1px solid #c8d6e5;
	background-color: #fff;
}
.div-vocabulary-grade-list .div-score{
	font-size: 6.5rem;
	margin-bottom: 30px;
}
.div-vocabulary-grade-list .div-score strong,
.div-vocabulary-grade-list .div-score span{
	letter-spacing: -.75rem;
	font-weight: 300;
}
.div-vocabulary-grade-list .div-score .span-split{
	font-size: 3.5rem;
	position: relative;
	top: -10px;
}
.div-vocabulary-grade-list .div-score .max-point{
	font-size: 4.5rem;
}
.div-vocabulary-grade-list .div-score .span-unit{
	font-size: 2rem;
	position: relative;
	top: -2px;
}
.div-word-question{
	position: relative;
}
.div-word-question .div-section{
	padding: 0 40px;
	min-height: 400px;
	position: relative;
}
.div-word-question .div-move-page-prev,
.div-word-question .div-move-page-next{
	position: absolute;
	z-index: 1;
	cursor: pointer;
	width: 20px;
	top: 50%;
	margin-top: -18px;
}
.div-word-question .div-move-page-prev img,
.div-word-question .div-move-page-next img{
	width: 20px;
	height: auto;
}
.div-word-question .div-move-page-prev{
	left: 10px;
}
.div-word-question .div-move-page-next{
	right: 10px;
}
.div-word-question .div-section .div-do-table{
	display: table;
	min-height: 400px;
	width: 100%;
}
.div-word-question .div-section .div-do-table .div-do-table-cell{
	display: table-cell;
	vertical-align: middle;
}
.div-word-question .div-section .div-do-table .div-question-word{
	margin: 40px 0;
	text-align: center;
}
.div-word-question .div-section .div-do-table .div-question-word .div-number{
	min-width: 75px;
	height: 75px;
	line-height: 75px;
	font-size: 2.25rem;
	color: #fff;
	border-radius: 8px;
	text-align: center;
	margin-right: 20px;
	padding: 0 10px;
}
.div-word-question .div-section .div-do-table .div-question-word .div-number span{
	font-size: .875rem;
	letter-spacing: -5px;
}
.div-word-question .div-section .div-do-table .div-question-word .div-number span.span-split{
	position:relative;
	top: -2px;
}
.div-word-question .div-section .div-do-table .div-question-word .div-number strong{
	font-weight: 300;
	letter-spacing: -5px;
}
.div-word-question .div-section .div-do-table .div-question-word .strong-word-name{
	font-size: 3rem;
	font-weight: 700;
}
.div-word-question .div-section .div-do-table .div-words{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 70%;
	margin: 0 auto 70px auto;
}
.div-word-question .div-section .div-do-table .div-words .div-word{
	font-size: 1.875rem;
	margin-bottom: 15px;
	padding: 10px;
	border-radius: 8px;
	border:1px solid #c8d6e5;
}
.div-word-question .div-section .div-do-table .div-words .div-word:hover{
	color: #fff;
	background-color: #1dd1a1;
	border: 1px solid #1dd1a1;
	cursor: pointer;
	transition-property: all;
	transition: 0.2s linear;
}

/*==================================
	video player
==================================*/
.section-video-player,
.section-video-player .video-container{
	position:relative;
}
.section-video-player .div-video-title{
	margin:10px 0 40px 0;
	font-size:1.3125rem;
	color:#8395a7;
}
.section-video-player .div-video-title .label-category{
	font-size: .75rem;
	color: #54A0FF;
	margin-top: 5px;
}
.section-video-player .video-container #video-layer-standby{
	position:absolute;
	z-index:10;
	top:0;
	right:0;
	bottom:0;
	left:0;
	cursor:pointer;
}
.section-video-player .video-container #video-layer-standby .div-play-standby{
	position:absolute;
	z-index:1;
	width:80px;
	height:80px;
	background-color:#fff;
	border-radius:80px;
	top:50%;
	left:50%;
	margin-top:-40px;
	margin-left:-40px;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url(../images/icons/svg/icon_play_dark.svg);
	background-size:20px auto;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.39);
}
.section-video-player .video-container .video-fullscreen,
.section-video-player .video-container .exit-video-fullscreen{
	position:absolute;
	z-index:11;
	right:20px;
	bottom:20px;
	width:32px;
	height:auto;
	cursor:pointer;
}
.section-video-player .video-container .exit-video-fullscreen{
	display:none;
}
.section-video-player .video-controller{
	margin-top:10px;
	margin-bottom:50px;
}
.section-video-player .video-controller .video-timeline{
	display:flex;
	flex-wrap:nowrap;
	justify-content:flex-start;
	margin-bottom:30px;
}
.section-video-player .video-controller .video-timeline .video-progress-container{
	width:600px;
	flex-basis:600px;
	height:10px;
	margin:9px auto 9px 0;
}
.section-video-player .video-controller .video-timeline .video-progress-container #video-progress{
	height:10px;
	width:100%;
	background-color:#c8d6e5;
	cursor:pointer;
}
.section-video-player .video-controller .video-timeline .video-progress-container #video-progress #video-progress-bar{
	height:100%;
	width:0%;
	background-color:#576574;
}
.section-video-player .video-controller .video-timeline .div-video-time{
	color:#8395a7;
}
.div-video-control-parts .div-video-control-parts-body{
	height:50px;
	display:flex;
	justify-content:flex-start;
}
.div-video-control-parts .div-back,
.div-video-control-parts .div-play,
.div-video-control-parts .div-pause,
.div-video-control-parts .div-stop,
.div-video-control-parts .div-forword,
.div-video-control-parts .div-area-repeat,
.div-video-control-parts .div-clear-rate,
.div-video-control-parts .div-muted,
.div-video-control-parts .div-unmuted,
.div-video-control-parts .div-rec{
	background-repeat:no-repeat;
}
.div-video-control-parts .div-back{
	height:100%;
	width:46px;
	flex-basis: 46px;
	background-position:top center;
	background-image:url(../images/icons/svg/icon_back.svg);
	background-size:100% auto;
	margin-right:25px;
	cursor: pointer;
}
.div-video-control-parts .div-play{
	height:100%;
	width:30px;
	flex-basis:30px;
	background-position:center center;
	background-image:url(../images/icons/svg/icon_play.svg);
	background-size:30px auto;
	margin-right:25px;
	cursor: pointer;
}
.div-video-control-parts .div-pause{
	display: none;
	height:100%;
	width:30px;
	flex-basis:30px;
	background-position:top center;
	background-image:url(../images/icons/svg/icon_pause.svg);
	background-size:100% auto;
	margin-right:25px;
	cursor: pointer;
}
.div-video-control-parts .div-forword{
	height:100%;
	width:46px;
	flex-basis:46px;
	background-position:top center;
	background-image:url(../images/icons/svg/icon_forword.svg);
	background-size:100% auto;
	margin-right:30px;
	cursor: pointer;
}
.div-video-control-parts .div-area-repeat{
	height:100%;
	width:52px;
	flex-basis:52px;
	background-position:top center;
	background-image:url(../images/icons/svg/icon_repeat_ab.svg);
	background-size:100% auto;
	margin-right:30px;
	cursor: pointer;
}
.div-video-control-parts .div-video-rate-controller{
	width:175px;
	flex-basis:175px;
	margin-right: 30px;
}
.div-video-control-parts .div-video-rate-controller,
.div-video-control-parts .div-video-rate-controller .div-video-rate-controller-body,
.div-video-control-parts .div-video-rate-controller .div-video-rate-btns,
.div-video-control-parts .div-video-rate-controller .div-video-rate-bars{
	height:100%;
}
.div-video-control-parts .div-video-rate-controller .div-video-rate-btns,
.div-video-control-parts .div-video-rate-controller .div-video-rate-bars{
	float:left;
}
.div-video-control-parts .div-clear-rate{
	height:100%;
	width:34px;
	flex-basis:34px;
	background-position:center 8px;
	background-image:url(../images/icons/svg/icon_speed.svg);
	background-size:100% auto;
	margin-right:20px;
	cursor: pointer;
}
.div-video-control-parts .div-video-rate-controller .div-video-rate-bars{
	margin-top: 16px;
	width: 120px;
}
.div-video-control-parts .div-video-rate-controller .div-video-rate-bars .ui-widget.ui-widget-content,
.div-video-control-parts .div-video-rate-controller .div-video-rate-bars .ui-slider .ui-slider-handle{
	cursor: pointer;;
}
.div-video-control-parts .div-video-rate-controller .div-video-rate-bars .ui-widget.ui-widget-content{
	border: none;
	border-radius: 0;
	background: none;
	background-color: #576574;
	height: 5px;
}
.div-video-control-parts .div-video-rate-controller .div-video-rate-bars .ui-slider .ui-slider-handle{
	border: none;
	background: none;
	background-color: #576574;
	height: 15px;
	width:15px;
	border-radius: 15px;
	outline: none;
}
.div-video-control-parts .div-rate-steps{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin:10px -15px 0 -15px;
}
.div-video-control-parts .div-rate-steps span{
	flex-basis: 20%;
	width: 20%;
	text-align: center;
	font-size: .75rem;
	color: #576574;
}
.div-video-control-parts .div-video-volume-controller{
	width:95px;
	flex-basis:95px;
	margin-right: 30px;
}
.div-video-control-parts .div-video-volume-controller,
.div-video-control-parts .div-video-volume-controller .div-video-volume-controller-body,
.div-video-control-parts .div-video-volume-controller .div-video-volume-btns,
.div-video-control-parts .div-video-volume-controller .div-video-volume-bars{
	height:100%;
}
.div-video-control-parts .div-video-volume-controller .div-video-volume-btns,
.div-video-control-parts .div-video-volume-controller .div-video-volume-bars{
	float:left;
}
.div-video-control-parts .div-muted{
	height:100%;
	width:27px;
	background-position:center 8px;
	background-image:url(../images/icons/svg/icon_volume.svg);
	background-size:100% auto;
	margin-right:7px;
	cursor: pointer;
}
.div-video-control-parts .div-unmuted{
	height:100%;
	width:27px;
	background-position:center 8px;
	background-image:url(../images/icons/svg/icon_volume_muted.svg);
	background-size:22px auto;
	margin-right:7px;
	cursor: pointer;
	display: none;
}
.div-video-control-parts .div-video-volume-controller .div-video-volume-bars{
	margin-top:16px;
}
.div-video-control-parts .div-video-volume-controller .div-video-volume-bars #video-volume{
	width:60px;
	height:5px;
	background-color:#c8d6e5;
	cursor: pointer;;
}
.div-video-control-parts .div-video-volume-controller .div-video-volume-bars #video-volume #video-volume-bar{
	height:100%;
	width:0%;
	background-color:#576574;
}

.div-video-control-parts .div-video-rec-controller{
	width:100px;
	flex-basis:100px;
}
.div-video-control-parts .div-video-rec-controller,
.div-video-control-parts .div-video-rec-controller .div-video-rec-controller-body,
.div-video-control-parts .div-video-rec-controller .div-video-rec-btns,
.div-video-control-parts .div-video-rec-controller .div-video-rec-bars{
	height:100%;
}
.div-video-control-parts .div-video-rec-controller .div-video-rec-btns,
.div-video-control-parts .div-video-rec-controller .div-video-rec-bars{
	float:left;
}
.div-video-control-parts .div-rec{
	height:100%;
	width:21px;
	background-position:center 5px;
	background-image:url(../images/icons/svg/icon_rec.svg);
	background-size:100% auto;
	margin-right:10px;
	cursor: pointer;
}
.div-video-control-parts .div-video-rec-controller .div-video-rec-bars{
	margin-top:16px;
}
.div-video-control-parts .div-video-rec-controller .div-video-rec-bars #video-rec{
	width:60px;
	height:5px;
	background-color:#c8d6e5;
	cursor: pointer;;
}
.div-video-control-parts .div-video-rec-controller .div-video-rec-bars #video-rec #video-rec-bar{
	height:100%;
	width:0%;
	background-color:#576574;
}

/*
 * fullscreen mode
 */

body.body-fullscreen .section-video-player,
body.body-fullscreen .section-video-player .video-container,
body.body-fullscreen .section-video-player .video-container #video-player,
body.body-fullscreen .section-video-player .video-container #video-layer-standby,
body.body-fullscreen .section-video-player .video-container .exit-video-fullscreen,
body.body-fullscreen .section-video-player .video-controller{
	position:fixed;
}
body.body-fullscreen .section-video-player,
body.body-fullscreen .section-video-player .video-container,
body.body-fullscreen .section-video-player .video-container #video-player,
body.body-fullscreen .section-video-player .video-container #video-layer-standby{
	top:0;
	right:0;
	bottom:0;
	left:0;
}
body.body-fullscreen .section-video-player{
	z-index:1;
}
body.body-fullscreen .section-video-player .video-container{
	z-index:2;
}
body.body-fullscreen .section-video-player .video-container #video-player{
	z-index:3;
	height: 100%;
	width: auto;
	margin: 0 auto;
}
body.body-fullscreen .section-video-player .video-container #video-layer-standby{
	z-index:4;
}
body.body-fullscreen .section-video-player .video-container .exit-video-fullscreen{
	z-index:6;
	right:20px;
	bottom:10px;
	width:18px;
}
body.body-fullscreen .section-video-player .div-video-title{
	display:none;
}
body.body-fullscreen .section-video-player .video-controller{
	z-index:5;
	right:50px;
	bottom:0;
	left:0;
	margin:0;
	padding:7px 20px;
}
body.body-fullscreen .section-video-player .video-controller .video-timeline{
	margin-bottom:10px;
	margin-right:-50px;
}
body.body-fullscreen .section-video-player .video-controller .video-timeline .video-progress-container{
	width:100%;
	flex-basis:100%;
	margin:0;
}
body.body-fullscreen .section-video-player .video-controller .video-timeline .video-progress-container #video-progress{
	background-color:#fff;
}
body.body-fullscreen .section-video-player .video-controller .video-timeline .div-video-time{
	position:fixed;
	z-index:7;
	left:20px;
	bottom:10px;
	white-space:nowrap;
	color:#fff;
}
body.body-fullscreen .div-video-control-parts .div-play{
	order:1;
	width:14px;
	flex-basis:14px;
	background-image:url(../images/icons/svg/icon_play_white.svg);
	background-size:14px auto;
	margin-right:20px;
}
body.body-fullscreen .div-video-control-parts .div-pause{
	order:2;
	width:14px;
	flex-basis:14px;
	background-position:center center;
	background-image:url(../images/icons/svg/icon_pause_white.svg);
	background-size:13px auto;
	margin-right:20px;
}
body.body-fullscreen .div-video-control-parts .div-back{
	order:3;
	width:18px;
	flex-basis:18px;
	background-position:center center;
	background-image: url(../images/icons/svg/icon_back_white.svg);
	margin-right:9px;
}
body.body-fullscreen .div-video-control-parts .div-forword{
	order:4;
	width:18px;
	flex-basis:18px;
	background-position:center center;
	background-image: url(../images/icons/svg/icon_forword_white.svg);
	margin-right:20px;
}
body.body-fullscreen .div-video-control-parts .div-area-repeat{
	order:5;
	width:30px;
	flex-basis:30px;
	background-position:center center;
	background-image: url(../images/icons/svg/icon_repeat_ab_white.svg);
	margin-right:20px;
}
body.body-fullscreen .div-video-control-parts .div-video-rate-controller{
	order:6;
	width:115px;
	flex-basis: 115px;
	margin-right:17px;
}
body.body-fullscreen .div-video-control-parts .div-clear-rate{
	width:26px;
	flex-basis:26px;
	background-position:center center;
	background-image: url(../images/icons/svg/icon_speed_white.svg);
	margin-right:13px;
}
body.body-fullscreen .div-video-control-parts .div-video-rate-controller .div-video-rate-bars{
	width:70px;
	margin-top:13px;
}
body.body-fullscreen .div-video-control-parts .div-rate-steps{
	display:none;
}
body.body-fullscreen .div-video-control-parts .div-video-rate-controller .div-video-rate-bars .ui-widget.ui-widget-content,
body.body-fullscreen .div-video-control-parts .div-video-rate-controller .div-video-rate-bars .ui-slider .ui-slider-handle{
	background-color:#fff;
}
body.body-fullscreen .div-video-control-parts .div-video-volume-controller{
	order:7;
	width:87px;
	flex-basis:87px;
	margin-right:17px;
}
body.body-fullscreen .div-video-control-parts .div-muted{
	width:17px;
	flex-basis:17px;
	background-position:center center;
	background-image: url(../images/icons/svg/icon_volume_white.svg);
}
body.body-fullscreen .div-video-control-parts .div-unmuted{
	width:17px;
	flex-basis:17px;
	background-position:center center;
	background-image: url(../images/icons/svg/icon_volume_muted_white.svg);
}
body.body-fullscreen .div-video-control-parts .div-video-volume-controller .div-video-volume-bars{
	margin-top:13px;
}
body.body-fullscreen .div-video-control-parts .div-video-volume-controller .div-video-volume-bars #video-volume{
	background-color: #566574;
}
body.body-fullscreen .div-video-control-parts .div-video-volume-controller .div-video-volume-bars #video-volume #video-volume-bar{
	background-color:#fff;
}
body.body-fullscreen .div-video-control-parts .div-video-rec-controller{
	order:8;
	width:87px;
	flex-basis:87px;
	margin-right:17px;
}
body.body-fullscreen .div-video-control-parts .div-rec{
	width:14px;
	flex-basis:14px;
	background-position:center center;
	background-image: url(../images/icons/svg/icon_rec_white.svg);
}
body.body-fullscreen .div-video-control-parts .div-video-rec-controller .div-video-rec-bars{
	margin-top:13px;
}
body.body-fullscreen .div-video-control-parts .div-video-rec-controller .div-video-rec-bars #video-rec{
	background-color: #566574;
}
body.body-fullscreen .div-video-control-parts .div-video-rec-controller .div-video-rec-bars #video-volume #video-rec-bar{
	background-color:#fff;
}
body.body-fullscreen .section-video-player .video-controller .div-video-control-parts{
	padding-left:110px;
}
body.body-fullscreen .section-video-player .video-controller .div-video-control-parts .div-video-control-parts-body{
	height:29px;
}

/*==================================
	easy audio player
==================================*/
.div-easy-audio-player{
	position: relative;
}
.div-easy-audio-player .button-easy-audio-pause{
	display: none;
}
.div-easy-audio-player audio{
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	opacity: 0;
}

/*==================================
	bootstrap tooltip
==================================*/
.tooltip.show {
	opacity: 1;
}
.tooltip-inner{
	background-color: #8395a7;
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before{
	border-top-color: #8395a7;
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before{
	border-right-color: #8395a7;
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: #8395a7;
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before{
	border-left-color: #8395a7;
}

/*==================================
	Tiny mce
==================================*/
.mce-tinymce.mce-panel{
	border: none;
}
.mce-tinymce.mce-container:not(.mce-top-part):not(.mce-edit-area):not(.mce-statusbar):not(.mce-toolbar-grp):not(.mce-stack-layout):not(.mce-toolbar):not(.mce-flow-layout-item){
	border: 1px solid #c8d6e5;
	border-radius: 10px;
}
.mce-tinymce,
.mce-top-part::before{
	box-shadow: none !important;
}
.mce-statusbar.mce-stack-layout-item{
	display: none;
}
div.mce-edit-area{
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}
.mce-toolbar-grp.mce-panel{
	background-color: transparent;
}
.mce-edit-area.mce-container.mce-panel{
	border: 0 solid #c8d6e5;
	border-width: 1px 0px 0px;
}
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group{
	padding: 10px 0;
	margin-left: 22px;
}
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group .mce-btn{
	border: none !important;
	padding: 0;
	margin-right: 10px;
}
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group .mce-btn button{
	padding: 0;
	line-height: 1;
}
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group .mce-btn button .mce-ico{
	background-position: center;
	background-size: 32px;
}
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group .mce-btn button .mce-ico.mce-i-glexaquizfill,
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group .mce-btn button .mce-ico.mce-i-glexaquizselect{
	width: 32px;
	height: 32px;
	line-height: 32px;
}
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group .mce-btn button .mce-ico.mce-i-glexaquizfill{
	background-image: url(../images/icons/svg/icon_mce_fill_text.svg);
}
.mce-tinymce.mce-panel .mce-container-body .mce-toolbar .mce-btn-group .mce-btn button .mce-ico.mce-i-glexaquizselect{
	background-image: url(../images/icons/svg/icon_mce_fill_select.svg);
}
.mce-tooltip{
	opacity: 1 !important;
	filter: alpha(opacity=100) !important;
}
.mce-tooltip-inner{
	background-color: #8395a7 !important;
	padding: 0.25rem 0.5rem !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	border-radius: 0.25rem;
	font-weight: 300;
	font-family: 'Noto Sans JP', sans-serif !important;
}
.mce-tooltip-arrow{
	border: 5px dashed #8395a7 !important;
	border-bottom-style: solid !important;
	border-top: none !important;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
}
.pyramid {
    margin-top: 100px;
    width: 800px;
    height: 600px;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(to bottom, #ecf1f6 100%, transparent 95%, transparent 0) center 0%,
        linear-gradient(to bottom, #acd0f5 100%, transparent 95%, transparent 0) center 25%,
        linear-gradient(to bottom, #00caff 100%, transparent 95%, transparent 0) center 50%,
        linear-gradient(to bottom, #1783f8 100%, transparent 95%, transparent 0) center 75%;
    background-size: 100% 20%;
    background-repeat: no-repeat;
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}

.pyramid >div{
    flex-basis: 20%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
}
/*==================================
	-webkit scrollbar
==================================*/
.custom-scrollbar::-webkit-scrollbar{
	width:6px;
}
.custom-scrollbar::-webkit-scrollbar:horizontal{
	height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
	background-color:transparent;
}
.custom-scrollbar::-webkit-scrollbar-corner{
	background-color:transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb{
	background-color:#576574;
	border-radius:12px;
}
.custom-scrollbar-muted::-webkit-scrollbar-thumb{
	background-color:#C8D6E5;
}
/*==================================
	-calaboex
==================================*/
.main .content{
    width:100%;
    padding: 20px;
    display:flex;
}
.main .ex-main-body{
    /*height:660px;*/
		min-height: 600px;
}
.main .side-menu{
    width:100%;
}

.ex-main .content{
    width:100%;
    padding: 20px;
    display:flex;
}
.ex-main .ex-main-body{
    height:660px;
}
.ex-main .side-menu{
    width:100%;
}
.side-menu .card-body{
    padding:20px 20px 0px 20px !important;
}

.side-main-menu .a-icon,
.side-sub-menu .a-icon,
.side-mat-menu .a-icon,
.side-lang-menu .a-icon{
    margin-bottom: 10px;
}
.side-main-menu .div-tool-content .div-tool,
.side-sub-menu .div-tool-content .div-tool,
.side-mat-menu .div-tool-content .div-tool,
.side-lang-menu .div-tool-content .div-tool{
    width: 230px;
    height: 40px;
    line-height: 15px;
    border-radius: 7px;
}
.side-main-menu .div-tool-content .div-tool img,
.side-sub-menu .div-tool-content .div-tool img,
.side-mat-menu .div-tool-content .div-tool img,
.side-lang-menu .div-tool-content .div-tool img{
    display: inline-block;
    width: 30px;
    height: 30px;
}
.side-main-menu .div-tool-content .div-tool .div-tool-name,
.side-sub-menu .div-tool-content .div-tool .div-tool-name,
.side-mat-menu .div-tool-content .div-tool .div-tool-name,
.side-lang-menu .div-tool-content .div-tool .div-tool-name{
    display: inline-block;
    color: white;
    width: 110px;
}

.ex-sub-footer{
    bottom:95px;
    height:60px;
    padding: 0 30px;
    width:100%;
}
.ex-sub-footer .card-body{
    padding:10px !important;
}
.ex-sub-footer .div-icons-row{
    justify-content: flex-end;
}
.ex-sub-footer .a-icon{
    margin-bottom: 0px;
    width: 170px;
    flex-basis: 170px;
    margin-right: 10px;
}
.ex-sub-footer .div-tool-content .div-tool{
    width: 170px;
    height: 50px;
    line-height: normal;
    border-radius: 7px;
}
.ex-sub-footer .div-tool-content .div-tool img{
    display: inline-block;
    width: 24px;
    height: 24px;
    right:0px;
}
.ex-sub-footer .div-tool-content .div-tool .div-tool-name{
    display: inline-block;
    color: white;
}

.ex-tool-content .a-icon{
    margin-bottom: 0px;
    width: 170px;
    flex-basis: 190px;
    margin-right: 10px;
}
.ex-tool-content .div-tool{
    width: 170px;
    height: 50px;
    line-height: 50px;
}
.ex-tool-content .div-tool img{
    display: inline-block;
    width: 30px;
    height: 30px;
    right:5px;
}
.ex-tool-content .div-tool-name{
    display: inline-block;
    color: white;
}
.ex-footer{
    height: 75px;
    padding:0px;
}
.ex-footer .navbar{
    padding:10px 0;
}
.ex-footer .ex-fluid-left{
    width:50%;
    justify-content: flex-start;
}
.ex-footer .ex-fluid-right{
    width:50%;
    justify-content: flex-end;
}
.ex-footer .ex-fluid-left .navbar-header{
    margin-left:15px;
}
.ex-footer .ex-fluid-right .navbar-header{
    margin-right:15px;
}
.ex-navbar-menu .div-tool img{
    max-height: 36px;
    width: 36px;
}