@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Siemreap&subset=khmer');
/* ==========================================================================
   Reset CSS
   ========================================================================== */
.checkbox { display: none }

html, body {
	/* font-family: 'Siemreap', 'Nunito', sans-serif; */
	font-family: 'Roboto';
}

/* ==========================================================================
   Utilities CSS
   ========================================================================== */
.gradient-red { background-image: linear-gradient(0deg, #720000, #BA0C0C); color: white }
.gradient-blue { background-image: linear-gradient(0deg, #006AAC, #007BE5); color: white }

.wis-btn, a.wis-btn {
	position: relative;
	display: inline-block;
	border: 0;
	border-radius: .75em;
	/*box-shadow: 0 3px 6px rgba(0, 0, 0, .16);*/
	text-transform: uppercase;
	font-weight: bold;
	background-color: #00ADFA;
	color: white;
	border-bottom: .2em solid #02379D;
}
.wis-btn[appearance="secondary"], a.wis-btn[appearance="secondary"] {
	background-color: white;
	color: black;
	border: none;
}
.wis-btn:active { top: .1em }
.wis-btn[disabled] { border: 0; background: lightgrey !important }

.wis-heading {
	border-bottom: .1em solid #e3e3e3;
	/* color: #720000; */
	color: black;
	font-size: 1.3em;
	font-weight: bold;
	padding-left: 0;
	padding-right: 0;
	text-transform: uppercase;
}

.wis-form label { font-weight: bold }

.wis-form input[type="text"] {
	width: 100%;
	border: .1em solid #e3e3e3;
	border-radius: .3em;
	color: #646464;
}

.wis-form [type="submit"] {
	/*
	display: block;
	margin: 3.2em auto 0;
	background-color: #FFA700;
	box-shadow: none;
	*/
	margin-top: 1.6em;
}

.wis-link, a.wis-link {
	text-decoration: underline;
}

.wis-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 2;
	display: none;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}
.wis-modal[style*="display: block"] { display: flex !important }

.wis-modal:before {
	content: '';
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: -1;
	background-color: rgba(0, 0, 0, .5);
}

.wis-dialog {
	position: relative;
	max-width: 40em;
	margin: auto;
	text-align: center;
	border-radius: .5em;
	box-shadow: 0 0.125em 0.25em 0 rgba(0, 0, 0, .3);
	background-image: linear-gradient(#007BE5, #006AAC);
    color: white;
}

.wis-dialog.info { background-color: white }
.wis-dialog.info .button { text-transform: uppercase }

.wis-dialog .dialog-content {
	min-height: 3em;
}

.wis-dialog .dialog-content h3 { font-size: 1.3em; padding-bottom: .3em; text-transform: uppercase }

/* ==========================================================================
   App CSS
   ========================================================================== */

html, body { height: 100% }
main { overflow-x: hidden; overflow-y: auto }

header .toolbar {
	position: relative;
}

header .toolbar > * { z-index: 1 }
/*
header .toolbar .logo {
	position: absolute;
	top: 25%; left: 0; right: 0; bottom: -25%;
	text-align: center;
	z-index: 0;
}

header .toolbar .logo img { width: auto; height: 120% }
*/
/* header .toolbar .logo { padding: 1em 1.6em; height: 5em }
header .toolbar .logo img { width: auto; height: 100% } */
header .toolbar .logo { padding: 1em 1.6em; width: 100%; max-width: 20em; min-width: 10em; }
header .toolbar .logo img { width: 100%; height: auto }

header .toolbar .flx_fill { padding: 1em 0 }
header .toolbar [for="menu"] { padding: 1.6em }

/*---------*/
header { background-position: top center; background-size: 100% 100%; }

#menu { display: none !important }
#menu:checked ~ header { background-size: 100% 300% }
#menu:checked ~ header nav { padding-top: 2em; height: initial }
header hr {
	position: relative;
	top: -2em;
	margin: 0;
	z-index: 2;
	color: #006AAC;
	border-color: #006AAC; /* fix::safari */
	border-width: .15em;
	box-shadow: 0 2px 3px rgba(255, 255, 255, .36);
}

header nav {
	position: absolute;
	width: 100%;
	top: 5em;
	z-index: 1;
	height: 0;
	max-height: 100%;
	max-height: calc(100vh - 5em);
	overflow-x: hidden;
	overflow-y: scroll;
	background-image: inherit;
}

header nav a,
header nav .select label {
	display: block;
	padding: .6em 0;
	text-transform: uppercase;
	user-select: none;
}

header .select ul {
	display: none;
	/*margin-right: 1.15em;*/
	margin-left: 1.15em;
}

header .select .checkbox:checked ~ ul { display: block }

header .select label:before {
	content: '';
	display: inline-block;
	/*margin-left: .6em;*/
	margin-right: .6em;
	border: .3em solid transparent;
	border-top-color: inherit;
	vertical-align: middle;
}

header .select [for] ~ ul a span {
	position: relative;
	top: -.175em;
	margin-left: 1em;
	padding: .5em 1em;
	border-radius: 2em;
	font-size: .65em;
	font-weight: 700;
	background-color: #ffb400;
	color: black;
}

header .select .checkbox:checked ~ label:before {
	border-top-color: transparent;
	border-bottom-color: inherit;
	/*margin-top: -.3em*/;
	margin-top: -.6em;
}

footer nav {
	/*
	background-color: black;
	color: white;
	*/
	text-align: center;
}

footer nav a { display: inline-block }

.pagelet-auth {
	text-align: center;
	animation: fade_in .3s ease;
}

.pagelet-auth .auth-thumbnail {
	margin: auto;
	width: 100%;
	max-width: 10em;
}

.pagelet-auth .auth-thumbnail img {
	width: 100%;
	animation: bounce 2s forwards;
}

.pagelet-docs h3 {
	padding: 1em 0 .5em;
	font-size: 1.3em;
}

.pagelet-docs ul li {
	list-style-type: disc;
	margin-left: 1.1em;
	padding-left: .5em;
}
	/*
.pagelet-docs ul li:before {
	content: '\2022';
	position: relative;
	top: -.1em;
	margin-right: 1em;
}
*/

.pagelet-docs ol li {
	margin-left: 1.1em;
	padding-left: .5em;
	padding-bottom: .5em;
	list-style-type: decimal;
}

.pagelet-docs ol li ol li {
	list-style-type: lower-alpha;
	padding-bottom: 0;
}

.pagelet-docs ol li ul li {
	list-style-type: disc;
	padding-bottom: 0;
}

.pagelet-docs ol li ul ol li {
	list-style-type: lower-roman;
}

@keyframes fade_in {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@keyframes bounce {
	0% { transform: matrix3d(0.49, 0, 0, 0, 0, 0.49, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	3.4% { transform: matrix3d(0.653, 0, 0, 0, 0, 0.653, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	4.7% { transform: matrix3d(0.735, 0, 0, 0, 0, 0.735, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	6.81% { transform: matrix3d(0.869, 0, 0, 0, 0, 0.869, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	9.41% { transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	10.21% { transform: matrix3d(1.049, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	13.61% { transform: matrix3d(1.14, 0, 0, 0, 0, 1.14, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	14.11% { transform: matrix3d(1.146, 0, 0, 0, 0, 1.146, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	17.52% { transform: matrix3d(1.139, 0, 0, 0, 0, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	18.72% { transform: matrix3d(1.123, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	21.32% { transform: matrix3d(1.081, 0, 0, 0, 0, 1.081, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	24.32% { transform: matrix3d(1.033, 0, 0, 0, 0, 1.033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	25.23% { transform: matrix3d(1.021, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	29.03% { transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	29.93% { transform: matrix3d(0.983, 0, 0, 0, 0, 0.983, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	35.54% { transform: matrix3d(0.983, 0, 0, 0, 0, 0.983, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	36.74% { transform: matrix3d(0.985, 0, 0, 0, 0, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	41.04% { transform: matrix3d(0.995, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	44.44% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	52.15% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	59.86% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	63.26% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	75.28% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	85.49% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	90.69% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

.wis-snackbar {
	position: fixed;
	left: 0; right: 0; bottom: -100%;
	margin: 1em;
	z-index: 3;
	border-radius: 2.6em;
	box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, .15);
	background-image: linear-gradient(150deg, #4CD964, #71DDC4);
	color: white;
}

.wis-snackbar.error { background-image: linear-gradient(150deg, #cb1717, #e65656) }
.wis-snackbar.warning { background-image: linear-gradient(150deg, #FD8000, #FDB913) }

.wis-snackbar.is_open { animation: wis-snackbar-open 1s forwards }
.wis-snackbar.is_close { animation: wis-snackbar-close 1s forwards }
.wis-snackbar.is_timeout { animation: wis-snackbar-timeout 9s forwards }

.wis-snackbar .wis-snackbar_message { margin-left: .3em }
.wis-snackbar .wis-snackbar_close {
	margin: -1em -1em -1em 0;
	padding: 1em;
}

@keyframes wis-snackbar-open {
	0% { bottom: -100% }
	100% { bottom: 0 }
}

@keyframes wis-snackbar-close {
	0% { bottom: 0 }
	100% { bottom: -100% }
}

@keyframes wis-snackbar-timeout {
	0% { bottom: -100% }
	15% { bottom: 0 }
	85% { bottom: 0 }
	100% { bottom: -100% }
}