@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
	--theme-color: #f7974d;
	--theme-hover-color: #df823a;
}

@keyframes background-seen {
	0% {
		background: #f7974d75;
	}

	50% {
		background: #f9ceae59;
	}

	100% {
		background: #f7974d75;
	}
}

@keyframes checked-box {
	0% {
		width: 0;
		height: 0;
		border-color: #212121;
		transform: translate(0, 0) rotate(45deg);
	}

	33% {
		width: 4px;
		height: 0;
		border-color: #212121;
		transform: translate(0, 0) rotate(45deg);
	}

	100% {
		width: 4px;
		height: 8px;
		border-color: #212121;
		transform: translate(0, -8px) rotate(45deg);
	}
}

@keyframes bounce {
	0% {
		transform: scale(1);
	}

	33% {
		transform: scale(.7);
	}

	100% {
		transform: scale(1);
	}
}

body {
	font-family: 'Quicksand', sans-serif !important;
	margin: 0;
	background-color: #fff !important;
}

.login-contain {
	display: flex;
	width: 45%;
	box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.12);
	border-radius: 5px;
	background-color: #fff;
	overflow: hidden;
}

.login-wrapper {
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
	background-color: #f3f2f2;
}

.login-contain-left {
	display: flex;
	width: 40%;
}

.login-contain-right {
	width: 55%;
	display: flex;
	padding: 2rem;
}

.login-contain-left {
	width: 45%;
	height: auto;
	min-height: 100%;
	background-color: var(--theme-color);
}

.login-contain-left > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.form-title {
	font-size: 30px;
	font-weight: 500;
	color: #454545;
}

.form-desc {
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.65;
}

.form-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

.form-group-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 3rem;
}

.form-group-content {
	display: flex;
	align-items: center;
	height: 55px;
	width: 100%;
	gap: 1rem;
}

.login-contain-right form {
	width: 100%;
}

.form-group-content-ikon {
	display: flex;
	width: 30px;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.form-group-content-input {
	display: flex;
	width: calc(100% - 30px);
	height: 100%;
}

.form-group-content-ikon > i {
	font-size: 25px;
	color: #454545;
}

.form-group-content-input > input {
	width: 100%;
	height: 100%;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
	background-color: transparent !important;
	outline: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.form-group-content-input > input:focus {
	border-color: var(--theme-color) !important;
}

.form-group-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 3rem;
}

.form-group-btn > button {
	display: flex;
	background-color: var(--theme-color);
	width: 130px;
	border: none !important;
	cursor: pointer;
	padding: 1rem;
	align-items: center;
	justify-content: center;
	border-radius: 25px;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.13);
	transition: .3s ease-in-out;
}

.form-group-btn > button:hover {
	transform: translateY(-5px);
	background-color: var(--theme-hover-color);
}

.login-video-top {
	background-color: var(--theme-color);
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	padding: .3rem;
}

.login-video-center {
	display: flex;
	padding: 2rem;
	gap: 1rem;
	height: 440px;
}

.login-video-gif {
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-video-text {
	width: 25%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 1rem;
	border-radius: 10px;
	background-color: #fff;
}

.login-video-content {
	width: 50%;
	border-radius: 10px;
	overflow: hidden;
}

.login-video-gif > img {
	width: 100%;
}

.login-video-text-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--theme-color);
	margin-bottom: 1rem;
}

.login-video-text-desc {
	overflow: auto;
	height: 300px;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.85;
	line-height: 1.8;
}

.login-video-text-desc::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background: #e6e6e6;
	border-radius: 5px;
}

.login-video-text-desc::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 5px;
}

.login-video {
	width: 100%;
	height: 100%;
}

.login-video-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.login-video-share {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	width: 330px;
}

.login-video-share > ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 1rem;
}

.login-video-share > ul > li {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.13);
	transition: .3s ease-in-out;
}

.login-video-share > ul > li:nth-child(1) {
	background-color: #3b5998;
}

.login-video-share > ul > li:nth-child(2) {
	background-color: #000;
}

.login-video-share > ul > li:nth-child(3) {
	background-color: #FF0000;
}

.login-video-share > ul > li:nth-child(4) {
	background-color: #007bb5;
}

.login-video-share > ul > li:nth-child(5) {
	background-color: #ff0050;
}

.login-video-share > ul > li:nth-child(6) {
	background-color: #cb2027;
}

.login-video-share > ul > li > a > i {
	display: flex;
	font-size: 16px;
	color: #fff;
}

.login-video-share > ul > li > a {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 100%;
}

.login-video-share > ul > li:hover {
	transform: translateY(-5px);
}

.login-video-share-text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	width: 330px;
}

.login-video-share-text > img {
	width: 40px;
}

.login-video-share-text > span {
	font-size: 19px;
	font-weight: 700;
	color: var(--theme-color);
}

.login-video-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	width: 330px;
}

.login-video-btn > a {
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
}

.login-video-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.header-left-menu {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 20%;
	padding: 0.5rem;
}

.header-left-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.header-left-menu ul > li {
	display: flex;
	flex-direction: column;
	height: 50px;
	position: relative;
	justify-content: center;
	cursor: pointer;
	box-sizing: unset;
}

.header-left-menu ul > li > a {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border: 1px solid rgba(0, 0, 0, .075);
	background-color: #fff;
	border-radius: 0.5rem;
	padding: 0 .5rem;
	transition: .2s ease-in-out;
}

.account-li-image {
	display: flex;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
}

.account-li-image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.account-li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border: 1px solid rgba(0, 0, 0, .075);
	background-color: #fff;
	border-radius: 0.5rem;
	padding: 0.5rem;
}

.account-li-text > p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.65;
}

.account-li-text > span {
	font-size: 1rem;
	font-weight: 700;
	color: #454545;
	transition: .2s ease-in-out;
}

.account-li-text:hover > span {
	color: var(--theme-color);
}

.main-menu-sub {
	display: flex;
	width: 100%;
	margin-top: 0.5rem;
}

.menu-sub {
	position: absolute;
	width: calc(100% - .5rem);
	left: 0;
	top: 55px;
	margin-left: .5rem;
}

.main-menu-sub > ul {
	width: 100%;
	gap: 5px;
}

.header-left-menu ul > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 0.9rem;
	font-weight: 700;
	color: #454545;
	text-decoration: none;
	position: relative;
}

.main-menu-sub > ul > li:nth-child(1) > a {
	background-color: var(--theme-color);
	color: #fff;
}

.main-menu-sub > ul > li {
	transition: .2s ease-in-out;
}

.menu-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
}

.menu-icon > i {
	color: #000;
	opacity: 0.65;
}

.main-menu-sub > ul > li:nth-child(3) {
	margin-top: 5px;
}

.menu-sub > ul {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.menu-sub > ul > li {
	height: 45px;
	transform: translateY(-15px);
	opacity: 0;
	visibility: hidden;
	transition: transform .2s ease-in-out, opacity 50ms ease-in-out, visibility 50ms ease-in-out;
}

.menu-sub > ul > li:nth-child(1) {
	transition-delay: .075s;
}

.menu-sub > ul > li:nth-child(2) {
	transition-delay: .15s;
}

.menu-sub > ul > li:nth-child(3) {
	transition-delay: .225s;
}

.menu-sub > ul > li:nth-child(4) {
	transition-delay: 0.3s;
}

.menu-sub > ul > li.active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.menu-sub > ul > li > a {
	font-size: .8rem;
}

.header-left-menu ul > li > a > i {
	margin-right: 0.5rem;
}

.header-left-menu ul > li > a:hover {
	background-color: #f7974d75;
}

.main-menu-sub > ul > li:nth-child(1) > a:hover {
	background-color: var(--theme-hover-color);
}

.page-wrapper {
	margin-left: calc(20% + 1rem);
	padding-right: .5rem;
	padding-top: 0.5rem;
}

.page-info {
	display: flex;
	align-items: center;
	padding: 1rem;
	background-color: #f7974d75;
	border-bottom: 2px solid var(--theme-color);
	border-radius: 5px;
}

.page-info-text > span {
	font-size: 0.9rem;
	font-weight: 700;
	color: #454545;
}

.page-info-icon > i {
	color: #454545;
}

.page-info-icon {
	margin-right: 0.5rem;
}

.individual-video-wrapper {
	display: flex;
	padding: 2rem;
	gap: 1rem;
}

.individual-video-gif {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.individual-video-text {
	width: 40%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 1rem;
	border-radius: 10px;
	background-color: #fff;
}

.individual-video-content {
	width: 60%;
	border-radius: 10px;
	overflow: hidden;
}

.individual-video-gif > img {
	width: 100%;
}

.individual-video-text-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--theme-color);
	margin-bottom: 1rem;
}

.individual-video-text-desc {
	overflow: auto;
	height: 300px;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.85;
	line-height: 1.8;
}

.individual-video-text-desc::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background: #e6e6e6;
	border-radius: 5px;
}

.individual-video-text-desc::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 5px;
}

.individual-video {
	width: 100%;
	height: 100%;
}

.individual-video-text-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--theme-color);
	margin-bottom: 1rem;
}

.individual-video-text-desc {
	overflow: auto;
	height: 280px;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.85;
	line-height: 1.8;
}

.individual-video-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
}

.individual-video-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.individual-video-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.individual-video-gif > img {
	width: 20%;
}

.header-left-menu > ul > li {
	height: auto !important;
}

.personal-learning-test-contain {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

.personal-learning-test-content > button {
	display: flex;
	align-items: center;
	width: 100%;
	border: none !important;
	border-radius: 10px !important;
	outline: 0 !important;
	transition: .2s ease-in-out;
}

.personal-learning-test-content:nth-child(1) > button {
	background-color: #CC7351 !important;
}

.personal-learning-test-content:nth-child(2) > button {
	background-color: #E08F62 !important;
}

.personal-learning-test-content:nth-child(3) > button {
	background-color: var(--theme-color) !important;
}

.personal-learning-test-content > button:hover {
	opacity: .8;
}

.personal-learning-test-content > button > p {
	margin: 0;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	margin-right: 1rem;
	color: var(--theme-color);
	font-weight: bold;
}

.personal-learning-test-content > button > span {
	font-size: 17px;
	font-weight: 600;
}

.personal-learning-test-modal .modal-footer .btn-primary {
	background-color: var(--theme-color) !important;
	border: none !important;
	transition: .2s ease-in-out;
}

.personal-learning-test-modal .modal-footer .btn-primary:hover {
	background-color: var(--theme-hover-color) !important;
}

.personal-learning-test-modal-text {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 600;
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}

.personal-learning-test-answer {
	display: flex;
	align-items: center;
	width: 150px;
	justify-content: center;
}

.personal-learning-test-answer label {
	display: flex;
	align-items: center;
	position: relative;
	font-size: 0.8rem;
	font-weight: 700;
	color: #454545;
	cursor: pointer;
}

.personal-learning-test-answer input {
	width: 0;
	height: 0;
	opacity: 0;
}

.personal-learning-test-answer label > span {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	border: 2px solid #9e9e9e;
	margin-right: 5px;
	border-radius: 3px;
	transition: all .3s;
	position: relative;
}

.personal-learning-test-answer input:checked+label > span {
	border: 10px solid var(--theme-color);
	animation: bounce 250ms;
}

.personal-learning-test-answer input:checked+label > span::before {
	content: '';
	position: absolute;
	top: 4px;
	left: -1px;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	transform: rotate(45deg);
	animation: checked-box 125ms 250ms forwards;
}

.personal-learning-question {
	display: flex;
	align-items: center;
	padding: 2rem 1rem;
	border-radius: 10px;
	box-shadow: 0 2px 4px 0 rgb(0 0 0/8%);
	background-color: #fff;
	position: relative;
	transition: .3s ease-in-out;
}

.personal-learning-test-number {
	min-width: 40px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f7974d75;
	margin-right: 1rem;
	border: 7px solid var(--theme-color);
}

.personal-learning-test-number > span {
	font-size: 18px;
	font-weight: 600;
	color: #454545;
}

.personal-learning-test-desc {
	width: calc(100% - 190px);
	font-size: 0.8rem;
	font-weight: 700;
	color: #454545;
}

.personal-learning-test {
	display: none;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
}

.personal-learning-test.active {
	display: flex;
}

.personal-learning-question.active {
	background-color: #f7974d2b;
}

.personal-learning-test-modal .modal-title {
	font-size: 18px;
	font-weight: 600;
}

.personal-learning-test-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.personal-learning-test-btn > button,
.personal-learning-test-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.personal-learning-test-btn > button:hover,
.personal-learning-test-btn > a:hover {
	background-color: var(--theme-hover-color);
}

#personal-learning-result-chart {
	height: 420px;
	background-color: #fff;
	border-radius: 5px;
}

.personal-learning-result-btn > a {
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.personal-learning-result-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.personal-learning-result-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid var(--theme-color);
	margin-bottom: 1rem;
	background-color: #fff;
	padding: 1rem;
	border-radius: 5px;
}

.personal-learning-result-info {
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 rgb(0 0 0/8%);
	border: 1px solid rgba(0, 0, 0, .1);
}

.personal-learning-result-info > ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.1rem;
}

.personal-learning-result-info > ul > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem;
}

.personal-learning-result-info > ul > li:nth-child(1) {
	background-color: #CC7351 !important;
}

.personal-learning-result-info > ul > li:nth-child(2) {
	background-color: #E08F62 !important;
}

.personal-learning-result-info > ul > li:nth-child(3) {
	background-color: var(--theme-color) !important;
}

.personal-learning-result-info > ul > li > span {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	margin-right: 0.5rem;
}

.personal-learning-result-info > ul > li > p {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.test-title {
	display: flex;
	align-items: center;
	border: 2px solid var(--theme-color);
	padding: 0 1rem;
	border-radius: 10px;
	gap: 0.5rem;
}

.test-title > span {
	font-size: 18px;
	font-weight: 700;
	color: var(--theme-color);
}

.test-title-gif {
	width: 60px;
}

.test-title-contain {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.5rem;
}

.personal-learning-result-modal-text {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	background-color: var(--theme-color);
	border-radius: 5px;
	padding: .5rem;
}

.personal-learning-result-modal-image {
	width: 80%;
}

.personal-learning-result-modal .modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.personal-learning-test-modal-image {
	width: 80%;
}

.personal-learning-test-modal .modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.affective-attr-test-tr {
	transform: rotate(180deg);
	writing-mode: vertical-rl;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 5px;
	padding: 1rem 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--theme-color);
}

.affective-attr-test-title {
	display: flex;
	width: 20%;
	gap: .5rem;
}

.affective-attr-test-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 0.5rem;
}

.affective-attr-test-number {
	min-width: 40px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f7974d75;
	margin-right: 1rem;
	border: 7px solid var(--theme-color);
}

.affective-attr-test-number > span {
	font-size: 18px;
	font-weight: 600;
	color: #454545;
}

.affective-attr-test-contain {
	position: relative;
	display: flex;
	align-items: center;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 5px;
	padding: 1rem .5rem;
	background-color: #fff;
	transition: .3s ease-in-out;
}

.affective-attr-test-contain.active {
	background-color: #f7974d2b;
}

.affective-attr-test-content {
	display: flex;
	align-items: center;
	width: 80%;
}

.affective-attr-test-answer {
	display: flex;
	width: 20%;
}

.affective-attr-test-bottom {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: .5rem;
}

.affective-attr-test-answer-td {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.affective-attr-test-answer-td label {
	display: flex;
	align-items: center;
	position: relative;
	font-size: 0.8rem;
	font-weight: 700;
	color: #454545;
	cursor: pointer;
}

.affective-attr-test-answer-td input {
	width: 0;
	height: 0;
	opacity: 0;
}

.affective-attr-test-answer-td label > span {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	border: 2px solid #9e9e9e;
	margin-right: 0;
	border-radius: 3px;
	transition: all .3s;
	position: relative;
}

.affective-attr-test-answer-td input:checked+label > span {
	border: 10px solid var(--theme-color);
	animation: bounce 250ms;
}

.affective-attr-test-answer-td input:checked+label > span::before {
	content: '';
	position: absolute;
	top: 4px;
	left: -1px;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	transform: rotate(45deg);
	animation: checked-box 125ms 250ms forwards;
}

.affective-attr-test-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.affective-attr-test-btn > button,
.affective-attr-test-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.affective-attr-test-btn > button:hover,
.affective-attr-test-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.affective-attr-test {
	margin-bottom: 1rem;
}

.affective-attr-test-question {
	font-size: 0.8rem;
	font-weight: 700;
	color: #454545;
	width: calc(100% - 40px);
}

.affective-attr-total > span {
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background-color: var(--theme-color);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.affective-attr-total {
	display: flex;
	padding: 1rem 0;
}

.affective-info {
	margin-bottom: 1rem;
}

.affective-result-video {
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 1rem;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.affective-result-video-content {
	display: flex;
	flex-direction: column;
	width: calc(25% - (1rem * 3) / 4);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 0.5rem;
	border-radius: 10px;
}

.affective-result-video-contain {
	display: flex;
	gap: 1rem;
}

.affective-result-video-content > button {
	background-color: var(--theme-color);
	border: none;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	padding: .5rem;
	transition: .2s ease-in-out;
}

.affective-result-video-content > button:hover {
	background-color: var(--theme-hover-color);
}

.affective-result-video > video {
	height: 100%;
	width: 100%;
}

.affective-attr-result-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.affective-attr-result-btn > button,
.affective-attr-result-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.affective-attr-result-btn > button:hover,
.affective-attr-result-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.attention-perception-video-wrapper {
	display: flex;
	padding: 2rem;
	gap: 1rem;
}

.attention-perception-video-gif {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.attention-perception-video-text {
	width: 40%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 1rem;
	border-radius: 10px;
	background-color: #fff;
}

.attention-perception-video-content {
	width: 60%;
	border-radius: 10px;
	overflow: hidden;
}

.attention-perception-video-gif > img {
	width: 100%;
}

.attention-perception-video-text-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--theme-color);
	margin-bottom: 1rem;
}

.attention-perception-video-text-desc {
	overflow: auto;
	height: 300px;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.85;
	line-height: 1.8;
}

.attention-perception-video-text-desc::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background: #e6e6e6;
	border-radius: 5px;
}

.attention-perception-video-text-desc::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 5px;
}

.attention-perception-video {
	width: 100%;
	height: 100%;
}

.attention-perception-video-text-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--theme-color);
	margin-bottom: 1rem;
}

.attention-perception-video-text-desc {
	overflow: auto;
	height: 280px;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.85;
	line-height: 1.8;
}

.attention-perception-video-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
}

.attention-perception-video-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.attention-perception-video-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.attention-perception-video-gif > img {
	width: 20%;
}

.attention-perception-test-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.attention-perception-test-btn > button,
.attention-perception-test-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.attention-perception-test-btn > button:hover,
.attention-perception-test-btn > a:hover {
	background-color: var(--theme-hover-color);
}


.attention-perception-test-answer-group label {
	display: flex;
	cursor: pointer;
	font-weight: 500;
	position: relative;
	overflow: hidden;
}

.attention-perception-test-answer-group label input {
	position: absolute;
	left: -9999px;
}

.attention-perception-test-answer-group label input:checked+span {
	background-color: #d6d6e5;
}

.attention-perception-test-answer-group label input:checked+span:before {
	box-shadow: inset 0 0 0 0.4375em var(--theme-color);
}

.attention-perception-test-answer-group label span {
	display: flex;
	align-items: center;
	padding: 0.375em 0.75em 0.375em 0.375em;
	border-radius: 99em;
	transition: 0.25s ease;
}

.attention-perception-test-answer-group label span:hover {
	background-color: #d6d6e5;
}

.attention-perception-test-answer-group label span:before {
	display: flex;
	flex-shrink: 0;
	content: "";
	background-color: #fff;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	margin-right: 0.375em;
	transition: 0.25s ease;
	box-shadow: inset 0 0 0 0.125em var(--theme-color);
}

.attention-perception-test-content {
	position: relative;
	display: flex;
	align-items: flex-start;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: .5rem;
	border-radius: 10px;
	flex-direction: column;
}

.attention-perception-test-number {
	min-width: 40px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f7974d75;
	margin-right: 1rem;
	border: 7px solid var(--theme-color);
}

.attention-perception-test-number > span {
	font-size: 18px;
	font-weight: 600;
	color: #454545;
}

.attention-perception-test-answer {
	display: flex;
	width: 300px;
	gap: .5rem;
}

.attention-perception-test-question {
	display: flex;
	width: calc(100% - 40px);
}

.attention-perception-test-question > img {
	width: 100%;
}

.attention-perception-test-contain {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.attention-perception-test-top {
	display: flex;
	align-items: flex-start;
}

.attention-perception-test-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 1rem;
	background-color: #f0f0f0;
	border-radius: 5px;
	padding: .3rem;
}

.attention-perception-test-total {
	display: flex;
	padding: 1rem 0;
}

.attention-perception-test-total > span {
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background-color: var(--theme-color);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.attention-perception-return-test-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.attention-perception-return-test-btn > button,
.attention-perception-return-test-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.attention-perception-return-test-btn > button:hover,
.attention-perception-return-test-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.attention-perception-return-test-tab {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.return-test-tab-content {
	display: flex;
	width: calc(20% - (1rem * 3) / 4);
}

.return-test-tab-content > button {
	background-color: #f7974d59;
	border: none;
	border-radius: 10px;
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	padding: 0.5rem 0;
	animation: background-seen 2s infinite linear;
}

.return-test-tab-content > button > span {
	font-size: 1rem;
	font-weight: 700;
	color: #000;
}

.return-test-tab-content > button > img {
	width: 40px;
}

.attention-perception-return-top,
.attention-perception-return-bottom {
	display: none;
}

.attention-perception-return-top.active,
.attention-perception-return-bottom.active {
	display: block;
}

.sas-result-total {
	display: flex;
	padding: 1rem 0;
}

.sas-result-total > span {
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background-color: var(--theme-color);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.sas-result-info > ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
	gap: .5rem;
}

.sas-result-info > ul > li {
	width: calc(25% - (.5rem * 3) / 4);
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 5px;
    justify-content: space-between;
}

.sas-result-info > ul > li > span {
	font-size: 0.9rem;
	font-weight: 700;
	color: #000;
	margin-right: 0.5rem;
}

.sas-result-info > ul > li > p {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #000;
}


.sas-info-total {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
}

.sas-info-total > span {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: .4rem 2rem;
	font-size: 1.1rem;
	font-weight: 700;
	border-radius: 5px;
	background-color: var(--theme-hover-color);
	color: #fff;
    text-align: center;
}

#sas-chart-general-contain {
	height: 420px;

}

.sas-chart-list > div {
	height: 210px;
	width: calc(50% - (1rem) / 2);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 10px;
}

.sas-chart-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 1rem;
	margin-top: 1rem;
}

.sas-chart-wrapper {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	padding: 2rem 0;
	padding-top: 1rem;
}

.sas-chart-general {
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 10px;
}

.sas-result-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.sas-result-btn > button,
.sas-result-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.sas-result-btn > button:hover,
.sas-result-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.sas-recommend-list-wrapper {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	margin-bottom: 1rem;
}

.sas-recommend-list-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 1rem;
}

.sas-recommend-list-title > span {
	font-size: 17px;
	font-weight: 700;
	border-bottom: 2px solid;
	padding-bottom: .5rem;
}

.sas-recommend-list-contain {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 0 1rem;
	border-radius: 10px;
	margin: 1rem 0;
	margin-bottom: 0;
}

.sas-recommend-list-content {
	display: flex;
	align-items: flex-start;
	padding: 1.5rem 0;
	position: relative;
}

.sas-recommend-list-content:not(:last-child) {
	border-bottom: 1px dashed rgba(0, 0, 0, .1);
}

.sas-recommend-number {
	min-width: 40px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f7974d75;
	margin-right: 1rem;
	border: 7px solid var(--theme-color);
}

.sas-recommend-number > span {
	font-size: 18px;
	font-weight: 600;
	color: #454545;
}

.sas-recommend-desc {
	width: calc(100% - 40px);
	font-size: 0.8rem;
	font-weight: 700;
	color: #454545;
}

.sas-recommend-list-wrapper-bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-top: 1rem;
	padding-right: 1rem;
}

.sas-recommend-list-wrapper-bottom > span {
	font-size: 1rem;
	font-weight: 700;
	color: #000;
}

.sas-recommen-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.sas-recommen-btn > button,
.sas-recommen-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.sas-recommen-btn > button:hover,
.sas-recommen-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.reading-understanding-video-wrapper {
	display: flex;
	padding: 2rem;
	gap: 1rem;
}

.reading-understanding-video-gif {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reading-understanding-video-text {
	width: 40%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 1rem;
	border-radius: 10px;
	background-color: #fff;
}

.reading-understanding-video-content {
	width: 60%;
	border-radius: 10px;
	overflow: hidden;
}

.reading-understanding-video-gif > img {
	width: 100%;
}

.reading-understanding-video-text-desc {
	overflow: auto;
	height: 300px;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.85;
	line-height: 1.8;
}

.reading-understanding-video-text-desc::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background: #e6e6e6;
	border-radius: 5px;
}

.reading-understanding-video-text-desc::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 5px;
}

.reading-understanding-video {
	width: 100%;
	height: 100%;
}

.reading-understanding-video-text-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--theme-color);
	margin-bottom: 1rem;
}

.reading-understanding-video-text-desc {
	overflow: auto;
	height: 280px;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	opacity: 0.85;
	line-height: 1.8;
}

.reading-understanding-video-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
}

.reading-understanding-video-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.reading-understanding-video-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.reading-understanding-video-gif > img {
	width: 20%;
}

.reading-paragraph-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.word-count,
.reading-paragraph-second {
	width: auto;
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 5px;
}

.word-count > span,
.reading-paragraph-second > span {
	font-size: 0.9rem;
	font-weight: 700;
	color: #000;
	margin-right: 0.5rem;
}

.word-count > p,
.reading-paragraph-second > p {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #000;
}

.reading-paragraph-start,
.reading-paragraph-btn,
.reading-test-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.reading-paragraph-start > button,
.reading-paragraph-start > a,
.reading-paragraph-btn > button,
.reading-paragraph-btn > a,
.reading-test-btn > button,
.reading-test-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.reading-paragraph-start > button:hover,
.reading-paragraph-start > a:hover,
.reading-paragraph-btn > button:hover,
.reading-paragraph-btn > a:hover,
.reading-test-btn > button:hover,
.reading-test-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.reading-paragraph {
	font-size: 1rem;
	font-weight: 700;
	color: #454545;
	line-height: 2;
}

.reading-paragraph-content {
	padding: 1rem;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.reading-paragraph-bottom {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.reading-paragraph-top-left {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.reading-test-top {
	padding: 1rem;
	background-color: #f0f0f0;
}

.readin-test-top-title {
	display: flex;
	align-items: center;
}

.readin-test-top-title > i {
	margin-right: 0.5rem;
}

.readin-test-top-title > span {
	font-size: 1.1rem;
	font-weight: 700;
	color: #454545;
}

.readin-test-top-desc {
	font-size: 0.9rem;
	font-weight: 600;
	color: #454545;
	margin-top: 0.5rem;
}

.reading-test-number {
	min-width: 40px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f7974d75;
	margin-right: 1rem;
	border: 7px solid var(--theme-color);
}

.reading-test-number > span {
	font-size: 18px;
	font-weight: 600;
	color: #454545;
}


.reading-test-answer-content label {
	display: flex;
	align-items: center;
	position: relative;
	font-size: 1rem;
	font-weight: 700;
	color: #454545;
	cursor: pointer;
	flex-direction: column-reverse;
}

.reading-test-answer-content input {
	width: 0;
	height: 0;
	opacity: 0;
}

.reading-test-answer-content label > span {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	border: 2px solid #9e9e9e;
	margin-right: 0;
	border-radius: 3px;
	transition: all .3s;
	position: relative;
}

.reading-test-answer-content input:checked+label > span {
	border: 10px solid var(--theme-color);
	animation: bounce 250ms;
}

.reading-test-answer-content input:checked+label > span::before {
	content: '';
	position: absolute;
	top: 4px;
	left: -1px;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	transform: rotate(45deg);
	animation: checked-box 125ms 250ms forwards;
}

.reading-test-content {
	position: relative;
	display: flex;
	align-items: center;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 5px;
	padding: 1rem 0.5rem;
	background-color: #fff;
	transition: .3s ease-in-out;
}

.reading-test-question {
	font-size: 0.8rem;
	font-weight: 700;
	color: #454545;
	margin-right: 1rem;
}

.reading-test-answer {
	display: flex;
	gap: .5rem;
	margin-right: 1rem;
}

.reading-test-answer-content {
	display: flex;
	flex-direction: column;
}

.reading-test {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 1rem 0;
}

.reading-test-bottom {
	margin-bottom: 1rem;
}

.reading-test-content.active {
	background-color: #f7974d2b;
}

.reading-understanding-result-wrapper {
	margin-top: 2rem;
}

.reading-paragraph-list > ul,
.reading-test-list > ul {
	display: flex;
	list-style: none;
	padding: 0;
	gap: 1rem;
}

.reading-paragraph-list > ul > li,
.reading-test-list > ul > li {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 1rem;
	border-radius: 10px;
}

.reading-paragraph-list > ul > li > p,
.reading-test-list > ul > li > p {
	margin: 0;
	display: flex;
	font-size: 25px;
	font-weight: 600;
	margin-top: .5rem;
}

.reading-paragraph-list > ul > li > span,
.reading-test-list > ul > li > span {
	font-size: 17px;
	font-weight: 600;
	color: var(--theme-color);
	border-bottom: 2px solid var(--theme-color);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-bottom: .5rem;
}

.reading-understanding-result-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.reading-understanding-result-btn > button,
.reading-understanding-result-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
}

.reading-understanding-result-btn > button:hover,
.reading-understanding-result-btn > a:hover {
	background-color: var(--theme-hover-color);
}

.reading-result-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.reading-result-title > span {
	font-size: 19px;
	font-weight: 600;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	width: 200px;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

.reading-understanding-general-result-wrapper {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 2rem;
}

.reading-result-chart {
	height: 420px;
}

.reading-paragraph-result-contain {
	padding-bottom: 2rem;
	border-bottom: 2px dashed rgba(0, 0, 0, .1);
}

.reading-general-result-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.reading-general-result-btn > button,
.reading-general-result-btn > a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--theme-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0.6rem 2rem;
	border-radius: 8px;
	transition: .2s ease-in-out;
	border: none !important;
	outline: 0 !important;
	text-align: center;
}

.reading-general-result-btn > button:hover,
.reading-general-result-btn > a:hover {
	background-color: var(--theme-hover-color);
}