/* page initilize */
html {
	height: 100%;
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	font-size: 16px;
}
body {
	font-family: Prompt;
	font-weight: 300;
	color: #333;
	height: 100% !important;
	/*overflow: hidden;*/
	overflow-x: hidden;
	min-width: 1280px;
}

/* layout */
header {
	width: 100%;;
	/* min-width: 1280px; */
	position: absolute;
	z-index: 999;
	padding: 1.25em 0;
}
header.client {
	position: relative;
	padding: 0;
}
header.academy {
	height: 19em;
	background-position: center top;
	background-size: cover;
}
header .brand-logo {
	height: 100%;
	right: 100%;
	margin-right: 1rem;
}
/* header #user {
	position: absolute;
	right: -10em;
} */
.brand-logo img {
	/* vertical-align: middle; */
}
.brand-logo-right img {
/* 	height: 2.5vw;
	line-height: 2.5vw; */
	/* vertical-align: middle; */
}
header .btn {
	/* margin: auto 6px;
	width: 126px; */
}
header .btn-flat {

}
header .banner .btn-flat {

}
.top-bar {
	/*height: 4.1667vw;
	line-height: 4.1667vw;*/
	/* height: 2vw;
	line-height: 2vw; */
	vertical-align: middle;
	height: 75%;
}
.main {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.container {
	width: 100%;
	max-width: 1280px;
	margin: auto;
	padding: 0 40px;
	/* padding: 4.5rem; */
}
footer {
	
}
/* footer #sitemap logo {
	height: 8em;
} */
footer .copyright {
	height: 44px;	
}
footer .copyright img {
	height: 32px;
}
main {
	flex: 1 0 auto;
	background-color: #F5F5F5;
	min-width: 1280px;
}
/* .top-bar .right .btn-flat {
	margin: 0;
} */

/* element */
#authen.left {
	margin-left: 25%;
}
#authen.right {
	margin-right: 25%;
}
#authen .page-footer {
	margin-bottom: 1em;
	/* padding: 0.5em 0.25em; */
	padding: 0.8em 0.25em;
}
.help-block {
	padding-bottom: 18px; 
	font-size: 1.5625em;
}
.help-block .btn-forgot {
	margin-left: -0.3em;
}
/*#nav-academy {
	margin: 0 1.5vw;
}
#nav-academy a {
	/*font-size: max(12px, 1.25vw);*
	line-height: 2.5vw;
	/*margin: auto 0.25vw;*
	font-size: 1.125vw;
}
#banner-top {
	min-height: 81.25vw;
}*/
/*.head-text {
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 1em;
}*/
/* #sitemap {
	padding: 4rem 8.75rem 2rem;
}
#sitemap .logo img {
	height: 3.5rem;
} */
/* #sitemap .contact {
	margin-left: 0.75em;
	
}
#sitemap .contact .phone::before {
	content: url(../img/icon/icon-phone.png);
	float: left;
	margin-top: 2px;
	margin-left: -32px;
	margin-right: 8px;
}
#sitemap .contact .line > a {
	line-height: 24px;
}
#sitemap .contact .line::before {
	content: url(../img/icon/icon-line.png);
	float: left;
	margin-left: -32px;
	margin-right: 8px;
}
#sitemap .map-menu {
	/*padding-top: 6em;*
	display: flex;
	justify-content: space-between;
}
#sitemap .overline-text {
	padding-top: 1em;
} */
/* .highlight {
	margin-top: -10em;
} */
#user {
	height: 100%;
	display: flex;
	align-items: center;
	margin-left: 2em;
}
#user-photo {
	width: 12.5em;
	height: 12.5em;
	margin: auto;
}
/* course */
#banner {
	max-width: 100%;
	margin-top: 3.275em;
}
.outline {
	height: 30em;
}
#chapter-next .chapter {
	min-height: 16em;
	height: auto;
}
.timeline .chapter.h0 {
	height: auto;
	min-height: 1em;
}
.outline .title {
	height: 2.5em;
	line-height: 100%;
	/* line-height: 86%; */
}

/* block layout */
.page-wrapper {
	/* padding: 0 2em; */
	/*min-width: 1280px; /* 1280×800 (HD, WXGA), 16:10 */
}
.banner-wrapper {
	height: 30rem;
	/* height: 100%; */
}
/* .valign-wrapper {
	height: 100%;
} */
/*.page-wrapper.row {
	min-height: 25vw;
	margin-bottom: 0;
}*/
.academy-wrapper {
/* 	padding: 2em 16em;
	padding-top: 5em; */
	/*margin-bottom: 7em;*/
}
.program-wrapper {
	/* padding: 2em 7.5rem; */
}
.highlight-wrapper {
	padding: 6em 0;
}
.course-wrapper {
/* 	padding: 4em 13.125rem; */
	padding: 4em 0;
}
.outline-wrapper {
/* 	padding: 9em 7.5rem; */
	padding: 9em 0;
	padding-bottom: 0;
}
.nav-wrapper {
	padding: 0 10em;
	padding-right: 2.5em !important;
}
.nav-wrapper.container {
	max-width: inherit;
	min-width: 1440px;
}
.timeline-wrapper {
	/* padding: 3.33%; */
	padding: 0 3.75em;
}
.message-wrapper {
	padding: 2em;
	text-align: center;
}
.content-wrapper {
	max-width: 1280px;
	padding: 8em 12em;
	min-height: 38em;
}
.course-wrapper > .content-wrapper {
	padding: 4em;
	min-height: 40em;
	margin-bottom: 10em;
}
.highlight-wrapper {
	padding: 4em 12rem;
}
.user-wrapper {
	padding: 4em;
	padding-top: 12em;
}
.profile-wrapper {
	padding: 2em 15rem;
	padding-top: 24em;
}
.panel-wrapper {
	padding: 4em 6em;
	min-height: 10em;
	margin-bottom: 2em;
}
.certificate-wrapper {
	padding: 2em 7.5rem;
}
.panel-content {
	margin-top: 4em;
}
.row .col.teaser-wrapper {
	padding: 4em;
}
.bottom {
	position: absolute;
	width: 100%;
	bottom: 0;
}
.course-wrapper > .bottom {
	padding: 0 0 2em 4em;
}
.moodle-wrapper {
	/*margin-top: 2em;
	margin-left: 3.75em;
	margin-right: -3.75em;*/
}
.full-page {
	min-height: 100%;
	min-width: 100%;
}
.full-width {
	margin-left: -20%;
	margin-right: -20%;
	padding-left: 20%;
	padding-right: 20%;
}
/* enroll course */
.enroll-wrapper {
	margin: 6em;
	/*min-height: 40em;
	padding-bottom: 6em*/
}
.enroll-wrapper .nav-wrapper {
	padding-left: 2em;
	padding-right: 2em;
}
.enroll-wrapper .card {
	margin-left: 2em;
	margin-right: 2em;
	border-radius: 0.75em;
}
.enroll-wrapper .card-content {
	padding: 2.5em;
	padding-top: 1.5em;
}
.enroll-wrapper .card-title {
	line-height: 3.75em;
}
.enroll-wrapper .card h4 label span {
	font-size: 2.2em;
	font-weight: 500;
}
.enroll-wrapper .card .large label span {
	font-size: 2.75em;
}
.enroll-confirm .card-image .cover {
	margin: 2em;
}
/* chapter timeline */
.timeline-wrapper h1.heading {
	/* margin-top: -1em; */
	/* margin-left: -0.1em; */
	margin-left: -4rem;
}
.timeline {
	position: relative;
	margin-top: 2em;
	padding-left: 3.75em;
	margin-left:  -3.75rem;
}
.timeline:before {
	content: "";
	position: absolute;
	left: 1em;
	/* height: 100%; */
	width: 1px;
	background-color: #707070;
	margin-top: 0.6em;
	top: 0rem;
	bottom: 1rem;
}
.navigator-wrapper .timeline:before {
	background-color: #CCCCCC;
}
.timeline .outline {
	/*min-height: 16em;*/
	height: auto;
	/* padding-bottom: 4em; */
}
.timeline .outline .content {
/* 	margin-top: -1em; */
	padding-left: 0em;
}
.timeline .outline:before {
	content: "lens";
	font-family: 'Material Icons';
	color: red;
	font-size: 1.2em;
	margin-left: -2.15em;
	margin-top: 0em;
	position: absolute;
}
.timeline .outline .catchphrase {
	padding-top: 0.5em;
	padding-left: 2.6em;
}
.timeline #outline-content, .timeline #outline-message  {
/* 	padding: 2em 0; */
	padding: 5em 0; 
	min-height: 4em;
}
.timeline #outline-message {
	background-color: white;
	margin-left: -12%;
	margin-right: -12%;
}
#outline-content ul li {
	list-style-type: disc;
}
#outline-next {
	margin-left: 2.8125em;
}
#outline-next:before {
	content: "lens";
	font-family: 'Material Icons';
	color: red;
	font-size: 1.2em;
	margin-left: -2.8125em;
	margin-top: -0.625em;
	position: absolute;	
}
#outline-next.outline .title {
	/*margin-left: -0.325em;*/
	margin-top: 0.75em;
} 
/* course navigator */
#course-navigator {
	padding-bottom: 3em;
}
#course-navigator nav {
	border-radius: 0 0 1.25em 1.25em;
	height: 64px;
	line-height: 3.75em;
	background-color: #2C2C2C !important;
}
#course-navigator nav i.material-icons {
	font-size: 2em;
}
#course-navigator nav ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#course-navigator nav ul a {
	/*line-height: 2em;*/
	line-height: 60px;
	user-select: none;
	padding-top: 4px;
}
#course-navigator nav ul a:hover {
	color: #ccc !important;
	background-color: transparent;
}
#course-navigator .course-panel, #course-navigator .panel {
	position: absolute;
	width: 100%;
	height: 0;
	bottom: 5.25em;
	background-color: white;
	border: solid 1px #707070;
	border-radius: 1.25em 1.25em 0 0;
	overflow: hidden;
	transition: all .3s ease-out;
	padding: 0 2em;
}
#course-navigator .course-panel.show, #course-navigator .panel.show {
	transition: all .7s ease-in;
	height: auto;
}
#course-navigator .course-panel .timeline {
	margin-top: 1em;
	padding-left: 1em;
	margin-bottom: 4em;
	/*padding-left: 2.38%;
	padding-right: 2.38%;
	margin-top: 1.65em;
	margin-bottom: 1.65em;
	/*margin-top: 1.3em;
	margin-bottom: 1.3em;*/
}
#course-navigator .course-panel .timeline .item {
/* 	margin-left: 2.125em; */
	margin-left: 1.4rem;
}
#course-navigator .course-panel .timeline h3 {
	margin-top: 0.25em;
}
#course-navigator .course-panel .timeline .row .col {
	margin-top: -1em;
	margin-bottom: -2em;
}
.course-panel .timeline-wrapper {
	margin: 0;
	position: relative;
	padding: 1em 2em 4em;
}
.course-panel .timeline h3:before {
	content: "lens";
	font-family: 'Material Icons';
	font-size: 0.54em;
	color: #ccc;
	margin-left: -1.75rem;
	position: absolute;
}
.course-panel .timeline h5 {
}
.course-panel .timeline h5:before {
	content: "lens";
	font-family: 'Material Icons';
	font-size: 0.6em;
	color: #707070;
	margin-left: -1.8em;
	position: absolute;
}
.course-panel .timeline .done :before,
.course-panel .timeline .current>h3:before,
.course-panel .timeline .current>h5:before {
	color: red;
}
.course-panel .course-progress {
	margin: 2.5em 0;
}
.timeline small {
	margin-top: -1em;
}
.timeline .sub-timeline {
	position: relative;	
	overflow: hidden;
	height: 0;
}
.timeline .toggle.current .sub-timeline {
	height: auto;
	margin-bottom: 0.65em;
}
.timeline .sub-timeline:before {
	content: "";
	position: absolute;
	left: 0.5em;
	height: 100%;
	width: 1px;
	background-color: #707070;
	margin-top: 0.75em;
}
.timeline ul {
	margin-top: 0.5em;
	margin-bottom: -0.65em;
	margin-left: 1.425rem;
}
.timeline ul >li {
	margin-top: -0.16em;
	margin-bottom: 0.32em;
}
.timeline nav ul {
  margin-left: 0;
}
nav i.promptskill-icons {
	width: 1.375em;
	padding: 0.6em 0;
}
nav i.prev.promptskill-icons {
	content: url('../img/icon/icon_prev.png');
}
nav i.next.promptskill-icons {
	content: url('../img/icon/icon_next.png');
}
.panel.show .alert-panel {
	min-height: 12em;
	color: #990000;
	text-align: center;
	width: 100%;
	font-size: 1.2rem;
}
.card-timecountdown {
	width: 100%;
	padding: 0 1em;
	border-radius: 0 0 20px 20px;
}
.card-timecountdown .icon-timecountdown,
.card-timecountdown .timecountdown {
	margin: 0 1em;
}

/* style */
.photo {
	background-position: center bottom;
	background-size: contain;
	background-repeat: no-repeat;
}
.photo>i {
	background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0) 50%);
}
.photo .name {
/* 	margin-bottom: 1.3232vw; */
	font-size: 1.5625vw;
	margin-bottom: 0.7291vw;
	line-height: 1.26;
}
.photo .brief {
/* 	font-size: 1.145833vw; */
	font-size: 0.625vw;
	line-height: 1.4;
	height: 1.8333vw;
/* 	margin-bottom: 2.469vw; */
	margin-bottom: 1.0416vw;
/* 	margin-top: 1.3232vw; */
	margin-top: 0.7291vw;
}
.background-image {
	background-position: center top !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}
.background-contain {
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
}
.cover {
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}
.center {
	background-position: center center;
}
.bg-bottom {
	background-position: center bottom;
}
.background-image.width {
	/* background-size: 100% auto; */
	background-size: 100% auto;
}
.background-image.fit {
	/* background-size: cover; */
	background-attachment: scroll;
}
.background-image.attach-fixed {
	background-attachment: fixed;
	background-position-y: 64px;
}
.background-image.ratio {
	position: relative;
}
.background-image.ratio>span {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
.background-image.bt-bottom {
	background-position: center bottom;
}
.underline-text {
	display: inline-block;
	position: relative;
	/* padding-bottom: 0.43em; */
	padding-bottom: 9px;
}
.underline-text:after {
	content: "";
	height: 0;
	width: 33%;
	min-width: 3em;
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom: 4px solid red;
	margin-bottom: 2px;
}
.underline-text.short:after {
	width: 25%;
}
.underline-text.full:after {
	width: 100%;
}
.overline-text {
	display: inline-block;
	position: relative;
	padding-top: 0.475em;
/* 	more */
	margin: 0;
}
.overline-text:before {
	content: "";
	height: 0;
	width: 33%;
	min-width: 4em;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 4px solid red;
}
/*.bottom {
	position: absolute;
	/*width: 100%;
	bottom: 0;
}*/
.avatar {
	display: inline-block;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.avatar.small {
	width: 2.5em;
	height: 2.5em;
}
.avatar.large {
	width: 6.54em;
	height: 6.54em;
	border: solid 1px white;
	z-index: 9999;
}
/* color */
.ulink button {
	background-color: rgb(28, 57, 72);
}
.ulink button:hover {
	background-color: rgb(28, 57, 72);
}

/* form */
form .relative {
	height: 100%;
}
form.full-page {
	padding: 2em 4em;
}
form .form-input {
	margin-top: 1em;
	margin-bottom: -1em;
}
form p {
	margin-top: 0;
	margin-bottom: 0em;
}
form button {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

/* authen form */
#authen .underline-text {
	margin-top: 0;
}
#authen form {
	width: 25.5em;
	height: 34.5em;
	/*min-width: 306px;*/
	/*min-height: 34.5em;*/
	border-radius: 0.625em;
	border: solid 1px #707070;
	padding: 1.25em 2.25em 0;
}
#authen.signin .input-field {
	margin-top: 2em;
	margin-bottom: 3em;
}
#authen.signin .form-helper {
	/*height: 3em;
	line-height: 3em;*/
}
#authen.signin .form-submit {
	margin-top: 1em;
}
/* materializecss hack */
.page-footer {
	padding-top: 0;
	z-index: 1;
}
.page-footer .footer-copyright {
	padding: 0;
}
.btn-large {
	/*height: 2.5em;
	line-height: 2.5em;
	min-width: 6em;
	font-size: 1.5rem;
	padding: 0 1em;*/
}
nav ul a.btn-flat {
	margin-left: 0;
	margin-right: 0;
}
.row {
	margin-bottom: 0;
}
.col .row {
	/*margin-left: -1%;
	margin-right: -1%;*/
}
.row .col {
	/*padding: 0 1em;*/
}
.grid.row .col {
	padding: 1% 1%;
}
.highlight .row .col {
	padding: 2em;
}
.content-wrapper .col .row {
	margin-left: -4%;
	margin-right: -4%;
}
.content-wrapper .row .col {
	padding: 0 4%;
}
.course-wrapper .catchphrase {
	padding: 0;
}
.outlines .col .row {
	margin-left: -2em;
	margin-right: -2em;
}
.outlines .row .col {
/* 	padding: 1.25em 3.5em; */
	padding: 1.25em 2em;
}
.course-panel .col .row {
	margin-left: 0;
	margin-right: 0;
	/*margin-bottom: 6em;*/
}
.course-panel .row .col {
	padding: 0;
}
/* form input */
#authen .input-field>label:not(.label-icon).active {
	transform: none;
}
#authen .input-field {
	margin-top: 0;
	margin-bottom: 0;
}
#authen .input-field:last-child {
	margin-bottom: 0.5em;
}

.w6 { width: 50%; }
.w12 { width: 100%; }
.space-between { justify-content: space-between; }
/* loading */
.loading {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.86);
	position: fixed;
	vertical-align: middle;
}

/* page loding */
.loading {
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.98);
	position: fixed;
	z-index: 9999999;
	text-align: center;
}
.loading:after {
	/*content: url('/loading.gif');*/
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.fixed {
	position: fixed;
	top: 0;	
	z-index: 9999;
}
.fixed + .main {
	padding-top: 64px;
}

/* wysiwyg */
.btgrid > .row {
	display: flex;
	margin: 0;
}
.col-md-6 {
	width: 50%;
	padding: 0 4%;
}

/* video */
video .media-controls button {
	width: 160px !important;
	height: 160px !important;
}
iframe {
	overflow: hidden;
/*     pointer-events:none; */
}

/* enroll timeline */
.timeline-state {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	margin-top: 16em;
	height: 4em;
	max-width: 100%;
	position: relative;
	z-index: 0;
}
.line-progress {
	/*z-index: -1;*/
	background-color: #CCCCCC;
	width: 100%;
	height: 0.25em;
	transform: translateX(-46%);
}
.line-progress:first-child {
	background-color: transparent !important;
}
.milestone {
	width: 1em;
	height: 1em;
	background-color: #CCCCCC;
	border-radius: 50%;
	margin-left: auto;
	margin-top: -0.425em;
}
.milestone span::after {
	content: attr(data-text);
	top: 1em;
	font-size: 1em;
	width: 6em;
	position: absolute;
	text-align: center;
	white-space: nowrap;
	margin-left: -2.5em;
}

/* dashboard */
.dashboard h3 {
	margin-top: 0.15em;
	height: 3em;
}
.dashboard .course-id {
	margin-top: -1.0em;
	text-transform: uppercase;
}
.dashboard .course.card {
	border-radius: 0 0 1em 1em;
}

/* aboutus */
.about-wrapper {
	padding: 2em 6.25%;
	padding-top: 12em;
}
.name-academy {
	margin: 4em;
}

.flex-center {
	display: flex; 
	font-size: 1.5em; 
	align-items: center;
}

/* state */
.disabled {
	pointer-events: none !important;
	cursor: none;
	color: #ccc !important
}

/* promptskill id */
.required::after {
  content: " *" !important;
  color: red;
  font-size: 1.48em;
  font-weight: 500;
}

/* collapsible style */
#collapsible.collapsible {
	border: none;
}
#collapsible .collapsible-header, #collapsible .collapsible-body {
	border-bottom: 2px solid #ddd;
}
.collapsible-body {
	padding: 1rem;
}
.collapsible li.active i {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* privacy policy cookie */
.privacy {
	display: flex;
	position: fixed;
	bottom: 0;
	z-index: 10;
	align-items: end;
	/* padding: 20px; */
	width: 100%;
	animation-name: slide-bar;
	animation-direction: normal;
	animation-duration: 900ms;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes slide-bar {
  from {
	height: 0%;
  }
  to {
	height: 25%;
  }
}

.policy-banner {
	background: black;
	color: white;
	opacity: 0.9;
	/* padding: 20px; */
	width: 100vw;
	max-width: 100%;
	margin: 0 auto;
	/* border: 1px solid rgb(232, 232, 232); */
	/* border-radius: 8px; */
	box-shadow: rgb(0 0 0 / 20%) 0px 2px 8px 0px;
}

.policy-action {
	margin: auto;
}

.btn-accept {
	margin-top: 1.5rem;
}

.policy-title {
	font-weight: bold;
	margin: 5px 0;
}

.policy-link {
	color: white;
	text-decoration: underline;
}

@media only screen and (max-width: 480px) {
	.btn-accept {
		/* margin-top: 1em; */
		width: 100%;
	}
}

/* sweet alert2 style */
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
	background: rgba(0,0,0,.8);
}

.swal2-icon {
	background-repeat: no-repeat;
	background-size: contain;
	width: 5em;
	height: 5em;
	border: none;
}

.swal2-success {
	background-image: url('//services.promptskill.com/app/public/img/icon/icon-alert-success.png');
}

.swal2-error {
	background-image: url('//services.promptskill.com/app/public/img/icon/icon-alert-error.png');
}

.swal2-warning {
	background-image: url('//services.promptskill.com/app/public/img/icon/icon-alert-warning.png');
}

.swal2-info {
	background-image: url('//services.promptskill.com/app/public/img/icon/icon-alert-info.png');
}

.swal2-question {
	background-image: url('//services.promptskill.com/app/public/img/icon/icon-alert-question.png');
}

.swal2-icon-show {
	animation: none !important;
}

.swal2-icon div, .swal2-icon span {
	display: none !important;
}

.swal2-confirm {
	font-family: 'Prompt';	
}

/* h5p */
/* .h5p-interactive-video .h5p-splash-wrapper.no-description.no-title .h5p-splash {
	width: 100%;
	height: 100%;
} */