@charset "UTF-8";

html {
	overflow-x: hidden
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	user-select: none
}

form.example input[type=text] {
	padding: 10px;
	font-size: 9px;
	float: left;
	width: 80px;
	background: #f1f1f1;
	border-radius: 40px 0 0 40px;
	border: none
}

form.example button {
	float: left;
	padding: 10px;
	background: #2196f3;
	color: #fff;
	font-size: 0;
	cursor: pointer;
	border-radius: 0 40px 40px 0;
	border: none
}

form.example button:hover {
	background: #0b7dda
}

form.example:after {
	content: "";
	clear: both;
	display: table
}

:root {
	--space: 2rem;
	--space-xs: calc(var(--space)/3);
	--space-sm: calc(var(--space)/2);
	--space-md: calc(var(--space)*2);
	--color-primary: #d3d3d3;
	--color-accent: #f5f5f5;
	--color-dark: #000;
	--color-mid: grey;
	--color-light: #fff;
	--color-highlight: #1e90ff;
	--main-color: #340a4e;
	--secondary-color: #9626e1;
	--radius: .125rem
}

* {
	box-sizing: border-box
}

main {
	margin: 0 auto;
	padding: 0 var(--space);
	font-family: Helvetica Neue, sans-serif;
	font-size: 1.25rem;
	line-height: 1.4;
	display: flex;
	flex-wrap: wrap
}

.content {
	flex-basis: 0;
	flex-grow: 999;
	min-width: 40%
}

.sidebar {
	--offset: var(--space);
	flex-grow: 1;
	flex-basis: 300px;
	align-self: start;
	position: sticky;
	top: var(--offset)
}

.component {
	display: grid;
	grid-template-rows: auto 1fr auto
}

.col-sm-5 {
	flex: 0 0 40.33333%;
	max-width: 40.33333%
}

.list-with-gap {
	align-items: center
}

.sidebar .component {
	max-height: calc(100vh - var(--offset)*2)
}

.visually-hidden {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}

[hidden] {
	display: none
}

h2 {
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.2
}

.text-justify {
	text-align: justify
}

h2 {
	font-size: 25px;
	text-align: left;
	margin: 17px 0 5px
}

.margin-0 {
	margin: 0
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vh;
	color: #fff;
	background: linear-gradient(45deg, #223f62, #37474f);
	margin-top: 20px
}

main {
	margin-bottom: calc(var(--space-md)*-1);
	margin-left: calc(var(--space-md)*-1)
}

main>* {
	margin-bottom: var(--space-md);
	margin-left: var(--space-md)
}

article>*+* {
	margin-top: var(--space)
}

.component {
	position: relative;
	border: 1px solid var(--color-primary);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .03), 0 8px 16px rgba(0, 0, 0, .03), 0 16px 32px rgba(0, 0, 0, .02), 0 32px 64px rgba(0, 0, 0, .02)
}

.component .footer {
	text-align: center
}

.component .header {
	padding: var(--space-sm);
	text-align: center;
	background-color: #35ab88;
	color: #fff;
	border-bottom: inherit
}

.component .footer {
	border-top: inherit
}

.component .content {
	padding: var(--space-sm);
	max-height: 500px;
	overflow-y: auto;
	color: var(--color-dark)
}

.empty-text {
	text-align: center;
	color: var(--color-primary)
}

.empty-text,
.item {
	padding: var(--space)
}

.item {
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	outline: none;
	width: 100%;
	background-color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	cursor: pointer
}

.item:active {
	transform: translateY(1px)
}

.item:focus {
	outline: 2px solid var(--color-highlight)
}

.item>* {
	pointer-events: none
}

.info {
	width: 100%
}

.thumbnail {
	flex-shrink: 0;
	width: var(--size);
	height: var(--size);
	background: var(--color-primary);
	border-radius: var(--radius)
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-gap: var(--space-sm)
}

.grid .item {
	flex-direction: column;
	text-align: center
}

.grid .info {
	display: flex;
	flex-direction: column;
	align-items: center
}

.grid .thumbnail {
	--size: 100px;
	margin-bottom: var(--space)
}

.list>*+* {
	margin-top: var(--space-xs)
}

.list .item {
	padding: var(--space-sm)
}

.list .item:before {
	content: "×";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: var(--space-sm);
	font-size: 2rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .05rem;
	color: var(--color-primary);
	pointer-events: none
}

.list .thumbnail {
	--size: 50px;
	margin-right: var(--space-sm)
}

.button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: var(--space-xs) var(--space-sm);
	font-family: inherit;
	font-size: 1rem;
	color: #fff;
	background-color: var(--color-dark);
	border: 1px solid var(--color-dark);
	cursor: pointer;
	border-radius: var(--radius);
	box-shadow: 4px 4px rgba(#000, .1)
}

.button:active {
	transform: translateY(1px);
	box-shadow: none
}

.empty-cart {
	color: var(--color-mid);
	border-color: var(--color-mid);
	background-color: var(--color-light)
}

#update_nav-header a {
	text-decoration: none;
	color: #fff
}

#update_nav-header {
	background: #1e262d;
	width: 100%;
	position: relative
}

#update_nav-header:after {
	content: "";
	clear: both;
	display: block
}

#update_nav-header .search {
	float: right;
	padding: 11px 30px
}

#update_nav-header input {
	border: none;
	padding: 10px;
	border-radius: 20px;
	margin-top: 10px
}

#update_nav-header .logo {
	float: left;
	padding: 10px 0 26px
}

#update_nav-header .logo a {
	font-size: 36px;
	font-weight: 600;
	display: block;
	padding: 9px 0 0 20px
}

#update_nav-header nav {
	float: right
}

#update_nav-header nav>ul {
	float: left;
	position: relative
}

#update_nav-header nav li {
	list-style: none;
	float: left
}

#update_nav-header nav .dropdown {
	position: relative
}

#update_nav-header nav li a {
	float: left;
	padding: 15px 20px
}

#update_nav-header nav li a:hover {
	background: #2c3e50
}

#update_nav-header nav li ul {
	display: none
}

#update_nav-header nav li:hover ul {
	display: inline
}

#update_nav-header nav li li {
	float: none
}

#update_nav-header nav .dropdown ul {
	position: absolute;
	left: 0;
	top: 100%;
	background: #fff;
	padding: 20px 0;
	border-bottom: 3px solid #34495e
}

#update_nav-header nav .dropdown li {
	white-space: nowrap
}

#update_nav-header nav .dropdown li a {
	padding: 10px 35px;
	font-size: 13px;
	min-width: 200px
}

#update_nav-header nav .mega-dropdown {
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	overflow: hidden;
	padding: 20px 35px;
	border-bottom: 3px solid #34495e;
	z-index: 5
}

#update_nav-header nav li li a {
	float: none;
	color: #333;
	display: block;
	padding: 8px 10px;
	border-radius: 3px;
	font-size: 13px
}

#update_nav-header nav li li a:hover {
	background: #bdc3c7;
	background: #fafbfb
}

#update_nav-header .mega-col {
	width: 25%;
	float: left
}

#update_nav-header #menu-icon {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -12px;
	margin-right: 30px;
	display: none
}

#update_nav-header #menu-icon span {
	border: 2px solid #fff;
	width: 30px;
	margin-bottom: 5px;
	display: block;
	-webkit-transition: all .2s;
	transition: all .1s
}

@media only screen and (max-width:1170px) {
	#update_nav-header nav>ul>li>a {
		padding: 35px 15px
	}
}

@media only screen and (min-width:960px) {
	#update_nav-header nav {
		display: block !important
	}
}

@media only screen and (max-width:959px) {

	.col-md-2,
	.col-md-3 {
		flex: 0 0 auto;
		width: 100% !important
	}

	#update_nav-header nav {
		display: none;
		width: 100%;
		clear: both;
		float: none;
		max-height: 400px;
		overflow-y: scroll
	}

	#update_nav-header #menu-icon {
		display: inline;
		top: 45px;
		cursor: pointer
	}

	#update_nav-header #menu-icon.active .first {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		margin-top: 10px
	}

	#update_nav-header #menu-icon.active .second {
		transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		position: relative;
		top: -9px
	}

	#update_nav-header #menu-icon.active .third {
		display: none
	}

	#update_nav-header .search {
		float: none
	}

	#update_nav-header .search input {
		width: 100%
	}

	#update_nav-header nav {
		padding: 10px
	}

	#update_nav-header nav li,
	#update_nav-header nav ul {
		float: none
	}

	#update_nav-header nav ul li a {
		float: none;
		padding: 8px;
		display: block
	}

	#update_nav-header #update_nav-header nav ul ul {
		display: block;
		position: static;
		background: none;
		border: none;
		padding: 0
	}

	#update_nav-header #update_nav-header nav a {
		color: #fff;
		padding: 8px
	}

	#update_nav-header #update_nav-header nav a:hover {
		background: #fff;
		color: #333;
		border-radius: 3px
	}

	#update_nav-header #update_nav-header nav ul li li a:before {
		content: "-"
	}

	#update_nav-header .mega-col {
		width: 100%
	}
}

a {
	color: #0b3564;
	text-decoration: none;
	background-color: transparent
}

.list-size {
	width: 100%;
	display: block;
	font-size: 25px
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

select {
	word-wrap: normal
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
	cursor: pointer
}

textarea {
	overflow: auto;
	resize: vertical
}

.row {
	margin-right: -15px;
	margin-left: -15px
}

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px
}

.col-sm-4 {
	flex: 0 0 30.33333%;
	max-width: 30.33333%
}

.form-control {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #4a5568;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #cbd5e0;
	border-radius: .25rem
}

.form-control::placeholder {
	color: #a0aec0;
	opacity: 1
}

.form-control:disabled,
.form-control[readonly] {
	background-color: #edf2f7;
	opacity: 1
}

textarea.form-control {
	height: auto
}

.form-group {
	margin-bottom: 1rem
}

.btn {
	display: inline-block;
	font-weight: 400;
	color: #1a202c;
	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: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem
}

.btn:not(:disabled):not(.disabled) {
	cursor: pointer
}

.btn-primary,
.sw .toolbar>.btn {
	color: #fff;
	background-color: #467bcb;
	border-color: #467bcb
}

.btn-secondary {
	color: #fff;
	background-color: #718096;
	border-color: #718096
}

.btn-success {
	color: #fff;
	background-color: #37474f
}

.btn-group-sm>.btn,
.btn-sm {
	padding: .25rem .5rem;
	font-size: .875rem;
	line-height: 1.5;
	border-radius: .2rem
}

.fade:not(.show) {
	opacity: 0
}

.fade {
	transition: opacity .15s
}

.custom-select {
	display: inline-block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem 1.75rem .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #4a5568;
	vertical-align: middle;
	background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%232d3748' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
	border: 1px solid #cbd5e0;
	border-radius: .25rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

.custom-select-sm {
	height: calc(1.5em + .5rem + 2px);
	padding-top: .25rem;
	padding-bottom: .25rem;
	padding-left: .5rem;
	font-size: .875rem
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 0 solid rgba(0, 0, 0, .125);
	border-radius: .25rem
}

.card-body {
	flex: 1 1 auto;
	min-height: 1px;
	padding: 1rem
}

.card {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
}

.close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: inherit;
	text-shadow: none;
	opacity: .5
}

button.close {
	padding: 0;
	background-color: transparent;
	border: 0
}

.mb-2,
.my-2 {
	margin-bottom: .5rem !important
}

.mt-2,
.mx-2 {
	margin-top: .5rem !important
}

.text-secondary {
	color: #718096 !important
}

.text-danger {
	color: #d35f41 !important
}

.row:after {
	content: "";
	display: table;
	clear: both
}

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #000;
	background-color: rgba(0, 0, 0, .4)
}

.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 350px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: .4s;
	animation-name: animatetop;
	animation-duration: .4s
}

@-webkit-keyframes animatetop {
	0% {
		top: -300px;
		opacity: 0
	}

	to {
		top: 0;
		opacity: 1
	}
}

@keyframes animatetop {
	0% {
		top: -300px;
		opacity: 0
	}

	to {
		top: 0;
		opacity: 1
	}
}

.model-btn-close {
	color: #fff;
	float: right;
	font-size: 28px;
	font-weight: 700;
	cursor: pointer
}

.modal-header {
	padding: 5px 10px;
	background-color: #d6ddeb;
	color: #263238;
	font-weight: 700;
	border-radius: 5px;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .2), 0 4px 24px 0 rgba(0, 0, 0, .19)
}

.modal-body {
	padding: 10px 16px
}

.modal-footer {
	padding: 12px 16px;
	background-color: #d6ddeb;
	color: #1f5a9d;
	box-shadow: 0 -3px 15px 0 rgba(0, 0, 0, .13), 1px -3px 15px 0 rgba(0, 0, 0, .19)
}

.list-inline,
.list-unstyled {
	padding-left: 0;
	list-style: none
}

.list-inline-item {
	display: inline-block
}

.list-inline-item:not(:last-child) {
	margin-right: .5rem
}

.initialism {
	font-size: .875em;
	text-transform: uppercase
}

.blockquote {
	margin-bottom: 1rem;
	font-size: 1.25rem
}

.blockquote>:last-child {
	margin-bottom: 0
}

.blockquote-footer {
	margin-top: -1rem;
	margin-bottom: 1rem;
	font-size: .875em;
	color: #6c757d
}

.blockquote-footer:before {
	content: "— "
}

.img-fluid,
.img-thumbnail {
	max-width: 100%;
	height: auto
}

.img-thumbnail {
	padding: .25rem;
	background-color: #fff;
	border: 1px solid var(--bs-border-color);
	border-radius: .375rem
}

.figure {
	display: inline-block
}

.figure-img {
	margin-bottom: .5rem;
	line-height: 1
}

.figure-caption {
	font-size: .875em;
	color: #6c757d
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	width: 100%;
	padding-right: calc(var(--bs-gutter-x)*0.5);
	padding-left: calc(var(--bs-gutter-x)*0.5);
	margin-right: auto;
	margin-left: auto
}

@media (min-width:576px) {

	.container,
	.container-sm {
		max-width: 540px
	}
}

@media (min-width:768px) {

	.container,
	.container-md,
	.container-sm {
		max-width: 720px
	}
}

@media (min-width:992px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm {
		max-width: 960px
	}
}

@media (min-width:1200px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1140px
	}
}

@media (min-width:1400px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1320px
	}
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(var(--bs-gutter-y)*-1);
	margin-right: calc(var(--bs-gutter-x)*-0.5);
	margin-left: calc(var(--bs-gutter-x)*-0.5)
}

.row>* {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x)*0.5);
	padding-left: calc(var(--bs-gutter-x)*0.5);
	margin-top: var(--bs-gutter-y)
}

.col {
	flex: 1 0 0%
}

@media (min-width:768px) {
	.col-md {
		flex: 1 0 0%
	}

	.col-md-auto {
		flex: 0 0 auto;
		width: auto
	}

	.col-md-1 {
		flex: 0 0 auto;
		width: 8.33333333%
	}

	.col-md-2 {
		flex: 0 0 auto;
		width: 16.66666667%
	}

	.col-md-3 {
		flex: 0 0 auto;
		width: 25%
	}

	.col-md-4 {
		flex: 0 0 auto;
		width: 33.33333333%
	}

	.col-md-5 {
		flex: 0 0 auto;
		width: 41.66666667%
	}

	.col-md-6 {
		flex: 0 0 auto;
		width: 50%
	}

	.col-md-7 {
		flex: 0 0 auto;
		width: 58.33333333%
	}

	.col-md-8 {
		flex: 0 0 auto;
		width: 66.66666667%
	}

	.col-md-9 {
		flex: 0 0 auto;
		width: 75%
	}

	.col-md-10 {
		flex: 0 0 auto;
		width: 83.33333333%
	}

	.col-md-11 {
		flex: 0 0 auto;
		width: 91.66666667%
	}

	.col-md-12 {
		flex: 0 0 auto;
		width: 100%
	}
}

.cta {
	display: flex;
	padding: 10px 45px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	color: #fff;
	background: #6225e6;
	transition: 1s;
	box-shadow: 6px 6px 0 #000;
	transform: skewX(-15deg);
	margin-top: 20px
}

.cta:focus {
	outline: none
}

.cta:hover {
	transition: .5s;
	box-shadow: 10px 10px 0 #fbc638
}

.cta span:nth-child(2) {
	transition: .5s;
	margin-right: 0
}

.cta:hover span:nth-child(2) {
	transition: .5s;
	margin-right: 45px
}

.cta span {
	transform: skewX(15deg)
}

.cta span:nth-child(2) {
	width: 20px;
	margin-left: 30px;
	position: relative;
	top: 12%
}

path.one {
	transition: .4s;
	transform: translateX(-60%)
}

path.two {
	transition: .5s;
	transform: translateX(-30%)
}

.cta:hover path.three {
	-webkit-animation: color_anim 1s .2s infinite;
	animation: color_anim 1s .2s infinite
}

.cta:hover path.one {
	transform: translateX(0);
	-webkit-animation: color_anim 1s .6s infinite;
	animation: color_anim 1s .6s infinite
}

.cta:hover path.two {
	transform: translateX(0);
	-webkit-animation: color_anim 1s .4s infinite;
	animation: color_anim 1s .4s infinite
}

@-webkit-keyframes color_anim {
	0% {
		fill: #fff
	}

	50% {
		fill: #fbc638
	}

	to {
		fill: #fff
	}
}

@keyframes color_anim {
	0% {
		fill: #fff
	}

	50% {
		fill: #fbc638
	}

	to {
		fill: #fff
	}
}

.cardsbox {
	position: relative;
	width: 95%;
	height: 290px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
	font-size: 1.3rem;
	margin: 10px 0;
	transition: border .1s, transform .3s
}

.cardsbox:hover {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	cursor: pointer
}

.cardsbox .number:before {
	content: "";
	position: absolute;
	top: -84px;
	right: -54px;
	width: 90px;
	height: 180px;
	background: var(--main-color);
	transform: rotate(-49deg);
	z-index: -1;
	box-shadow: 0 0 .7rem rgba(0, 0, 0, .5)
}

.cardsbox .number {
	position: absolute;
	margin: -14px -5px;
	top: 15px;
	right: 15px;
	color: hsla(0, 0%, 100%, .7);
	transform: translate(-3%, 11%)
}

.cardsbox .number:hover:before {
	background: var(--secondary-color)
}

.cardsbox .cardtextarea {
	margin: 20px
}

.cardsbox input {
	width: 100%;
	transition: .3s
}

.cardsbox .btnmybutton p {
	background: var(--main-color);
	text-align: center;
	color: #fff;
	padding: 1rem 0;
	width: 100%;
	font-family: var(--sans);
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	transition: .2s ease-out
}

.cardsbox .btnmybutton p:hover {
	background: var(--secondary-color);
	cursor: pointer
}

.tabslist {
	position: absolute;
	opacity: 0;
	z-index: -1
}

.tabs {
	border-radius: 8px;
	box-shadow: 0 4px 4px -2px rgba(0, 0, 0, .5)
}

.tab,
.tabs {
	overflow: hidden
}

.tab {
	width: 100%;
	color: #fff
}

.tab:hover {
	color: #000
}

.PracticeList {
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: .5em;
	background: #2c3e50;
	cursor: pointer;
	margin: 5px
}

.PracticeList a {
	color: #fff
}

.PracticeList:hover {
	background: #1f2c39;
	color: #fff
}

.PracticeList:after {
	content: "❯";
	width: 1em;
	height: 1em;
	text-align: center;
	transition: all .35s
}

.tab-label {
	display: flex;
	justify-content: space-between;
	padding: .5em;
	background: #2c3e50;
	cursor: pointer
}

.tab-label:hover {
	background: #e8ecef;
	color: #000
}

.tab-label:after {
	content: "❯";
	width: 1em;
	height: 1em;
	text-align: center;
	transition: all .35s
}

.tab-content {
	max-height: 0;
	padding: 0 1em;
	font-size: .2em;
	background: #fff;
	transition: all .35s
}

.tab-content,
.tab-content a {
	color: #2c3e50
}

.tab-content li:hover {
	background: #e9e9e9
}

.tab-close {
	display: flex;
	justify-content: flex-end;
	padding: 1em;
	font-size: .67em;
	background: #2c3e50;
	cursor: pointer
}

.tab-close:hover {
	background: #e8ecef;
	color: #000
}

.tabslist:checked+.tab-label {
	background: #f6f7f9;
	color: #000
}

.tabslist:checked+.tab-label:after {
	transform: rotate(90deg)
}

.tabslist:checked~.tab-content {
	max-height: 100vh;
	padding: .5em;
	font-size: 1em
}

.Custom-Social {
	white-space: nowrap;
	margin: 0;
	padding: 0 0 0 10px
}

.Custom-Social li {
	list-style: none;
	margin: 0 3px
}

.Custom-Social li,
.Custom-Social li a {
	display: inline-block;
	position: relative
}

.Custom-Social li a {
	color: #262626;
	text-align: center;
	line-height: 20px
}

.Custom-Social li a svg {
	width: 20px;
	fill: #262626
}

.incorrect_char {
	color: red;
	text-decoration: underline
}

.correct_char {
	color: #1e9bf3
}

.restart_btn {
	display: none
}

@media (max-width:768px) {
	.mob-hide {
		display: none !important
	}
}

.table {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%
}

.table td,
.table th {
	border: 1px solid #ddd;
	padding: 8px
}

.table tr:nth-child(2n) {
	background-color: #f2f2f2
}

.table tr:hover {
	background-color: #ddd
}

.table th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #1c6676;
	color: #fff
}

.btnside {
	text-align: center;
	width: 250px;
	cursor: pointer
}

.custom-box-1 {
	list-style-type: none;
	padding: 5%;
	background-color: #0b4f64;
	color: #fff;
	margin-top: 15px
}

.btn-one {
	width: 100%;
	position: relative;
	padding: 3%;
	margin: 15px 0
}

.btn-one,
.btn-one a {
	color: #fff;
	transition: all .3s
}

.btn-one:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all .3s;
	border-top: 1px solid hsla(0, 0%, 100%, .5);
	border-bottom: 1px solid hsla(0, 0%, 100%, .5);
	transform: scaleX(.1)
}

.btn-one:hover a {
	letter-spacing: 2px
}

.btn-one:hover:before {
	opacity: 1;
	transform: scale(1)
}

.btn-one:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all .3s;
	background-color: hsla(0, 0%, 100%, .1)
}

.btn-one:hover:after {
	opacity: 0;
	transform: scaleX(.1)
}

.box-2 {
	background-color: #701f9d
}

.box-2,
.box-3 {
	padding: 2% 11% 2% 8%;
	color: #fff
}

.box-3 {
	background-color: #19538f
}

.btn-2 {
	color: #fff;
	transition: all .5s;
	position: relative;
	padding: 3%;
	margin: 15px 0
}

.btn-2:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: hsla(0, 0%, 100%, .1);
	transition: all .3s
}

.btn-2:hover:before {
	opacity: 0;
	transform: scale(.5)
}

.btn-2:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all .3s;
	border: 1px solid hsla(0, 0%, 100%, .5);
	transform: scale(1.2)
}

.btn-2:hover:after {
	opacity: 1;
	transform: scale(1)
}

footer a {
	color: #fff
}

.m-0 {
	margin: 0 !important
}

.p-0 {
	padding: 0 !important
}

.pb-0 {
	padding-bottom: 0 !important
}

.py-3 {
	padding-top: 3px !important;
	padding-bottom: 3px !important
}

.py-5 {
	padding-top: 5px !important;
	padding-bottom: 5px !important
}

.m-auto {
	margin: auto !important
}

.nowrap {
	white-space: nowrap
}

.heading-link,
.text-center {
	text-align: center
}

.heading-link {
	color: transparent;
	float: left;
	margin-left: -1.5rem;
	opacity: .4;
	position: relative;
	text-decoration: none;
	width: 1.5rem
}

.lesson-card-ico {
	width: 30px;
	fill: #f7f7f7
}

.lesson-card-ico-sm {
	width: 20px;
	fill: #f7f7f7
}

#msg-toast {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: #2fc614;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 1;
	left: 50%;
	bottom: 60px;
	font-size: 17px;
	border-radius: 1px
}

#msg-toast.show {
	visibility: visible;
	-webkit-animation: fadein .5s, fadeout .5s 2.5s;
	animation: fadein .5s, fadeout .5s 2.5s
}

@-webkit-keyframes fadein {
	0% {
		bottom: 0;
		opacity: 0
	}

	to {
		bottom: 60px;
		opacity: 1
	}
}

@keyframes fadein {
	0% {
		bottom: 0;
		opacity: 0
	}

	to {
		bottom: 60px;
		opacity: 1
	}
}

@-webkit-keyframes fadeout {
	0% {
		bottom: 60px;
		opacity: 1
	}

	to {
		bottom: 0;
		opacity: 0
	}
}

@keyframes fadeout {
	0% {
		bottom: 60px;
		opacity: 1
	}

	to {
		bottom: 0;
		opacity: 0
	}
}

.LF1 {
	background-color: #dcf6ff
}

.LF2 {
	background-color: #fcd1f3
}

.LF3 {
	background-color: #dbf7d3
}

.LF4 {
	background-color: #d1dbfa
}

.RF1 {
	background-color: #e3e7ff
}

.RF2 {
	background-color: #edf2d1
}

.RF3 {
	background-color: #dbf7d3
}

.RF4 {
	background-color: #fcd1f3
}

.RF5 {
	background-color: #dcf6ff
}

.btnKeyboard.select {
	background-color: #1f5a9d !important;
	color: #fff;
	box-shadow: inset 1px 1px 1px 0 #ccdbe8, inset -1px -1px 1px 0 hsla(0, 0%, 100%, .5)
}

.close-dark {
	color: #000;
	padding: 3px 15px
}

.extra-shadow {
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .38), 0 1px 8px 0 rgba(0, 0, 0, .33)
}

.one_line_h_limit {
	overflow: hidden;
	height: 28px;
	margin: 0
}

.green {
	color: green
}

.blue {
	color: #00f
}

form.searchform input[type=text] {
	padding: 10px;
	font-size: 17px;
	float: left;
	width: 80%;
	background: #f1f1f1;
	border-radius: 40px 0 0 40px;
	border: none
}

form.searchform button {
	float: left;
	width: 20%;
	padding: 10px;
	background: #2196f3;
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	border-radius: 0 40px 40px 0;
	border: none
}

form.searchform button:hover {
	background: #0b7dda
}

form.searchform:after {
	content: "";
	clear: both;
	display: table
}

.font-14 {
	font-size: 14px
}

#home-content p a {
	color: #00f
}

.game-info {
	margin: 10px 0;
	display: flex;
	justify-content: center;
	gap: 10px;
    max-height: 37px;
}

.game-info p {
	margin: 0;
	padding: 10px;
	display: inline;
	background: #333;
	color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
	border-radius: 5px
}

.game-info span {
	font-weight: 800;
	color: #fff
}

.containerTP {
	margin: 10px;
	background: linear-gradient(180deg, #c6e5ea, #6ec4e7);
	padding: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
	border-radius: 10px
}

.containerTP .heading {
	text-align: center
}

.containerTP .game-info {
	margin: 10px 0;
	display: flex;
	justify-content: center;
	gap: 10px
}

.containerTP .game-info p {
	margin: 0;
	padding: 10px;
	display: inline;
	background-color: #1e262d;
	color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
	border-radius: 5px;
	font-size: 12px
}

.containerTP {
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	background-color: hsla(0, 0%, 100%, .75);
	border-radius: .75rem;
	border: 1px solid rgba(209, 213, 219, .3)
}

.containerTP .typing_field {
	opacity: 0;
	z-index: -999;
	position: absolute
}

.containerTP .sectionTP {
	padding: 10px;
	border-radius: .625rem;
	border: var(--border);
	background-color: #fff
}

.containerTP .sectionTP .typing_quote::-webkit-scrollbar {
	width: 0
}

.containerTP .sectionTP .typing_quote p {
	font-size: 1.125rem;
	text-align: justify;
	letter-spacing: .063rem;
	word-break: break-all
}

.containerTP .sectionTP .typing_quote p span {
	position: relative
}

.containerTP .sectionTP .typing_quote p span.correct {
	color: azure;
	background-color: #49ad3e
}

.containerTP .sectionTP .typing_quote p span.incorrect {
	color: azure;
	background-color: #ec5454
}

.containerTP .sectionTP .typing_quote p span.active {
	color: var(--main-color)
}

.containerTP .sectionTP .typing_quote p span.active:before {
	position: absolute;
	content: "";
	height: .125rem;
	width: 100%;
	bottom: 0;
	left: 0;
	opacity: 0;
	border-radius: .313rem;
	background: var(--main-color);
	animation: blink 1s ease-in-out infinite
}

@keyframes blink {
	50% {
		opacity: 1
	}
}

@media (max-width:745px) {
	.sectionTP .typing_quote {
		max-height: 100%
	}

	.typing_quote p {
		text-align: left
	}

	.contentTP button {
		width: 100%;
		font-size: 15px;
		padding: 10px 0;
		margin-top: 20px
	}
}

@media (max-width:518px) {
	.tooltip .tooltiptext-2 {
		display: none
	}
}

.secactive {
	color: #602bff !important;
	font-weight: 700
}

.cursor {
	cursor: pointer
}

.contentTP {
	text-align: right;
	font-size: 13px
}

.tooltip {
	position: relative;
	display: inline-block
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: rgba(0, 0, 0, .701);
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -60px
}

.tooltip .tooltiptext:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #000
}

.tooltip:hover .tooltiptext {
	visibility: visible
}

.level:hover {
	font-weight: 700
}

#main-TPoutput {
	border: solid
}

#TP_O_preload {
	position: absolute;
	left: 50%;
	transform: translateX(-50%)
}

#scriptSelector {
	background-color: #1e262d;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	border: 0
}

#scriptSelector::-webkit-scrollbar {
	width: 1px
}

#scriptSelector::-webkit-scrollbar-thumb {
	background-color: #888
}

#scriptSelector::-webkit-scrollbar-thumb:hover {
	background-color: #555
}

#scriptSelector::-webkit-scrollbar-track {
	background-color: #1e262d
}

.containerrate {
	position: relative;
	padding: 20px 30px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column
}

.containerrate .post {
	display: none
}

.containerrate .text-1 {
	font-size: 25px;
	color: #666;
	font-weight: 500
}

.containerrate .edit-1 {
	right: 200px;
	position: absolute;
	top: 30px;
	font-size: 16px;
	color: #666;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline
}

.containerrate .edit-1:hover {
	color: #fd4
}

.containerrate .star-widget input {
	display: none
}

.containerrate .star-widget label {
	font-size: 35px;
	color: #000;
	padding: 10px;
	float: right;
	transition: all .2s ease
}

.containerrate input:checked~label,
.containerrate input:not(:checked)~label:hover,
.containerrate input:not(:checked)~label:hover~label {
	color: #fd4
}

.containerrate input#TT_rate-5:checked~label {
	color: #ffcd3c
}

.containerrate #TT_rate-1:checked~form header:before {
	content: "I just hate it 😡"
}

.containerrate #TT_rate-2:checked~form header:before {
	content: "I don't like it 😔"
}

.containerrate #TT_rate-3:checked~form header:before {
	content: "It is awesome 😊"
}

.containerrate #TT_rate-4:checked~form header:before {
	content: "I just like it 🤩"
}

.containerrate #TT_rate-5:checked~form header:before {
	content: "I just love it 😍"
}

.containerrate input#rate-5:checked~label {
	color: #ffcd3c
}

.containerrate #rate-1:checked~form header:before {
	content: "I just hate it 😡"
}

.containerrate #rate-2:checked~form header:before {
	content: "I don't like it 😔"
}

.containerrate #rate-3:checked~form header:before {
	content: "It is awesome 😊"
}

.containerrate #rate-4:checked~form header:before {
	content: "I just like it 🤩"
}

.containerrate #rate-5:checked~form header:before {
	content: "I just love it 😍"
}

.containerrate form {
	display: none
}

.containerrate input:checked~form {
	display: block
}

.containerrate form header {
	width: 100%;
	font-size: 25px;
	color: #000;
	font-weight: 500;
	margin: 5px 0 20px;
	text-align: center;
	transition: all .2s ease
}

.containerrate form .textarea {
	height: 100px;
	width: 100%;
	overflow: hidden
}

.containerrate form .textarea textarea {
	height: 100%;
	width: 100%;
	outline: none;
	color: #eee;
	border: 1px solid #333;
	background: #222;
	padding: 10px;
	font-size: 17px;
	resize: none
}

.containerrate .textarea textarea:focus {
	border-color: #444
}

.containerrate form .btn {
	height: 45px;
	width: 100%;
	margin: 15px 0
}

.containerrate form .btn button {
	height: 100%;
	width: 100%;
	border: 1px solid #444;
	outline: none;
	background: #222;
	color: #999;
	font-size: 17px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	transition: all .3s ease
}

.containerrate form .btn button:hover {
	background: #1b1b1b
}

.containerrate .rating {
	font-size: 20px;
	color: #000;
	padding: 3px 30px;
	float: right;
	transition: all .2s ease
}

.containerrate #scriptSelector {
	background-color: #298897;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	border: 0
}

.containerrate form {
	clear: both
}

.tooltip .tooltiptext-2 {
	visibility: hidden;
	background-color: rgba(1, 2, 2, .6078431372549019);
	color: #fff;
	text-align: center;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	bottom: 94%;
	left: 50%;
	margin-left: -90px;
	font-size: 15px;
	padding: 3px 10px
}

.tooltip .tooltiptext-2:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #000
}

.tooltip:hover .tooltiptext-2 {
	visibility: visible
}

.font-lg {
	font-size: 25px
}

.containerTT .game-info p {
	margin: 0;
	padding: 10px;
	display: inline;
	background-color: #1e262d;
	color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
	border-radius: 5px;
	font-size: 12px
}

#ddlLesson {
	background-color: #1e262d;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	border: 0
}

#ddlLesson option:disabled {
	color: #f2f1e2
}

.fb-color {
	background-color: #1264ce !important
}

.wa-color {
	background-color: #008069 !important
}

.font-p {
	font-size: 15px !important
}

.font-p p {
	margin: 7px
}

.logo p {
	font-size: 24px;
	font-weight: bold;
	color: white;
	padding: 0px 0px 0px 20px;
	margin: 15px 10px 0px 10px;
}


.logo small {
	display: block;
	font-size: 12px;
	color: white;
	float: right;
}

.register-box {
	background: white;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	display: inline-block;
	max-width: 400px;
}

.register-box h2 {
	color: #007bff;
}

.register-box p {
	font-size: 16px;
	margin-bottom: 20px;
}

.register-btn {
	background: #007bff;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.register-btn:hover {
	background: #0056b3;
}