@import url("onsen-css-theme-cpg/onsen-css-components.css");
@import url("onsen-css-theme-cpg/theme.css");
@import url("../fonts/kanit/css/stylesheet.css");
@import url("../fonts/sarabun/css/stylesheet.css");
@import url("../fonts/material/css/stylesheet.css");
@import url("../fonts/icofont/icofont.css");
@import url("../fonts/icofont2/icofont.css");
@import url("../fonts/icofont3/icofont.css");
@import url("../fonts/icofont4/style.css");
@import url("../fonts/social/css/stylesheet.css");

html {

}
body {
	xmax-width:1140px;margin:0 auto;
}

div.pure-g div.pure-u-0 {
	display:none;
}

div[class*="title"],div,span,div.pure-g [class*="pure-u"],input[type="tel"],input[type="text"],input[type="password"],input[type="email"],
.toolbar-button,
.button,
span,
div {
	font-family:'Kanit' !important;xfont-weight:300;
	/*line-height:1.3em;*/
}

ons-toolbar div.center {
	/*line-height:2.6em;*/
}

.color-hl {
	color:#d20000;
}
.color-violet {
	color:#8b42c5;
}
.bold {
	font-weight:bold;
}
.underline {
	text-decoration:underline;
}
.padding {
	margin:5px 0;
}
.text-left {
	text-align:left;
}
.text-right {
	text-align:right;
}
.text-center {
	text-align:center;
}
div.content-inner {
	width:85%;margin:0 auto;text-align:left;
}


ons-list {
	background:none !important;
}
ons-list ons-list-item {
	border:none !important;
}
#menu .list-item {
	color:#fff;	
}

.list-item--appinfo div {
	color:#aaa;/*#71a63e;*/
	line-height:1.6em;
}

img.logo-big {
	width:35%;max-width:180px;margin:0 auto;display:block;padding:10px 0;padding-bottom:0;padding-top:30px;
}
img.logo-top {
	width:45px;margin:0 auto;display:block;padding:10px 0;
	border-radius:0;position:relative;left:5px;
}
ons-input.search-text {
	width:88%;border-radius:5px;background:rgba(255,255,255,0.7);height:30px;line-height:30px;padding:2px 2%;margin-left:5%;margin-right:5%;padding-bottom:3px;
}
ons-input.search-text input:focus {
	background:rgba(255,255,255,0.9);
}

div.headline {
	text-align:left;padding-bottom:15px;margin-top:10px;
}
div.headline1 {
	font-size:1.8em;color:#555
}
div.headline2 {
	font-size:1em;color:#999;	
	font-weight:500;color:#000;font-size:1.2em;
	text-align:center;
}
div.pane {
	text-align: center; background:#fff;xheight:100%;
}
div.pane.height100 {
	margin-top:60px;
}	


.toolbar-1 {
	position:absolute;width:180%;height:33px;background:#be0000;z-index:-1;
	
}
html[onsflag-iphonex-portrait] .toolbar-1 {
	top:-44px;height:77px;
}

ons-icon[icon="md-menu"] {
	font-size:22px;
}

ons-select select {
	color:#aaa !important;	
}

div.app-content {
	width:auto;position:relative;padding:0;margin:0;
}
div.app-content.margin {
	margin:5px 0;
}
div.app-content.margin2 {
	margin:5px 10px;
}

#page-browsecourse div.app-content {
	margin-top:84px;
}
#page-browsecourse .page__background {
	background:#eee;
}

.card {
	margin:18px 10px;padding:0;
	line-height:2.5em;
	padding-bottom:15px;
	overflow:hidden;	
}
.card img.thumb {
	width: 100%;padding:0;margin:0;border:0;
}
.card img.thumb.small {
	margin:20px 10px;
}
.card div.title {
	font-size:1.15em;
	line-height:1.4em;
	margin:0 10px;padding:15px 0;padding-bottom:0;font-weight:500;
}
.card div.title.no-margin {
	padding:0;
}

.card div.category-title {
	font-size:0.9em;
	line-height:1.4em;
	margin:0 10px;padding:5px 0;padding-bottom:0;font-weight:normal;
	opacity:0.6;
	margin-bottom:5px;margin-top:10px;
}
.card div.category-title div {
	text-align:left;
}
.card div.lecturer {
	font-size:0.9em;
	line-height:1.4em;
	margin:0 10px;padding:5px 0;padding-bottom:0;font-weight:normal;
	opacity:0.6;
	margin-bottom:5px;
}
.card div.shortdesc {
	font-size:1em;
	line-height:1.5em;
	margin:0 10px;padding:10px 0;padding-bottom:0;font-weight:normal;
}
.card div.rating {
	margin:0 10px;padding:0;padding-bottom:5px;
}
.card div.content {
	font-size:0.9em;
	line-height:1.4em;
	margin:15px 10px;padding-bottom:5px;font-weight:200;color:#666;
}

.card div.action {
	margin-top:10px;	
}
.card ons-button.button {	
	font-size:1em;
}
.card ons-button.button ons-icon {
	font-size:2em;
	line-height:0.5em;
}
.card ons-button.button2 {	
	font-size:1em !important;
	width:49% !important;display:inline-block !important;
	min-width:auto !important;
}
.card ons-button.button2:nth-child(1) {	
	margin-right:2% !important;
	width:44% !important;
	background:#9245ce !important;

	xdisplay:none !important;
}
.card ons-button.button2:nth-child(2) {	
	width:54% !important;

	xwidth:100% !important;
}

.card.event-items {
	font-size:0.9em;
	padding:15px 10px;
	line-height:1em;
	margin:18px 10px;
}
.card.event-items div.title {
	margin:0;padding:0;margin-top:10px;
}
.card.event-items ons-button.button {
	font-size:1em;
	/*line-height:1em;*/
	font-family:'Kanit';
	vertical-align:middle;
}

.card.food-items {
	font-size:0.9em;
	padding:15px 10px;
	line-height:1em;
	margin:18px 10px;
	position:relative;
}
.card.food-items div.title {
	margin:0;padding:0;margin-top:0;
	font-size:1.1em;
}
.card.food-items div.content {
	margin:0;padding:10px 0;
}
.card.food-items ons-button.button {
	font-size:1em;
	/*line-height:1em;*/
	font-family:'Kanit';
	vertical-align:middle;
}
.card.food-items.info {
	padding:15px 0;
}
.card.food-items div.outofstock-mask {
	display:inline-block;background:rgba(255,255,255,0.8);
	width:100%;height:100%;top:0;left:0;
	position:absolute;
}
.card.food-items img.outofstock {
	position:absolute;right:0;bottom:0;
	height:50%;
}

.page--food-info .page__background {
	background:#fff;
}

.card.food-items.info,
.card--noborder {
	box-shadow:none;background:#fff;border:0;
}
.card.food-items.info div.title {
	margin:0 10px;padding:0;margin-top:20px;text-align:center;
	font-size:1.34em;	 
}
.card.food-items.info div.content {
	margin:0 10px;padding:10px 0;
	font-size:1em;
}

.text-input--add-qty {
	background:none;font-size:1.3em;text-align:center;padding:10px 0;height:auto;color:#000;padding-top:8px;
	display:block;
	width:80%;margin:0 3%;margin-right:17%;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.text-input--add-qty:focus {
	background:none;
}

.button--inline {
	background:none;display:inline;padding:0;margin:0;line-height:1em;
	color:#d20000;box-shadow:none;font-weight:normal;
}

.button--outline2 {
	background:none;border-width:2px;font-size:2.8em;border-color:#ccc;
	color:#a2cd37;box-shadow:none;
	width:36px;height:36px;padding:0;margin:0;
	line-height:1.7em;
}

.hide {
	display:none;
}

.button {
	border-radius:10px;
}

.dialog--fullwidth {
	width:90%;
}

.button--large-gray {
	background:#eee;display:block;padding:0;margin:0;line-height:1em;
	width:80%;margin:0 5%;text-align:center;border-radius:10px;padding:20px 5%;
	color:#888;box-shadow:none;font-weight:normal;
}

img.food-thumbnail {
	width:93%;
}

.card--step-order {
	padding:0 15px;
}
.card--step-order .intro-order {
	padding:15px;
}


ons-splitter ons-splitter-side ons-page.page div.page__background {
	background: rgb(210,0,0);
	background: linear-gradient(264deg, rgba(210,0,0,1) 0%, rgba(190,54,46,1) 100%);
}

.tabbar--white {
	background:#fff;
	box-shadow:0 0 15px rgba(0,0,0,0.2);
	xheight:0px;
}

.tabbar--violet {	
	background:#fff;
	box-shadow:0 0 15px rgba(0,0,0,0.2);
	xheight:0px;
	color:#fff;
	background: linear-gradient(20deg, rgba(139,66,197,1) 0%, rgba(158,75,223,1) 100%);
	
}

.tabbar--violet ons-tab button {
	background: linear-gradient(20deg, rgba(139,66,197,1) 0%, rgba(158,75,223,1) 100%);
	color:#fff;
}

.tabbar--violet ons-tab.active button {
	background: linear-gradient(20deg, rgba(249,153,18,1) 0%, rgba(255,208,109,1) 100%);
	color:#fff;
}

.splitter-side--white .page,
.splitter--white .page {
	background:#fff;
}	

.page--white .page__background {
	background:#fff !important;
	color:#222;
}	
.page--white .page__content {	
	color:#222;
}	

.toolbar {
	background: rgb(210,0,0);
	background: linear-gradient(264deg, rgba(210,0,0,1) 0%, rgba(190,54,46,1) 100%);
}


.toolbar--eh {
	height:70px !important;
}
.toolbar--eh > div {
	height:70px !important;line-height:70px !important;
}

.toolbar--white,
.toolbar--white2 {
	background:#fff;border-bottom:0 solid #eee;
}
.toolbar--white {
	height:60px;
}
.toolbar--white div {
	height:60px;line-height:60px;
}
.toolbar--white2 {
	height:70px;
}
.toolbar--white2 div {
	height:70px;line-height:70px;
}
.toolbar--white .back-button__icon,
.toolbar--white2 .back-button__icon {
	display:inline-flex;fill:rgba(0,0,0,0.5);
	color:#333;
}
.toolbar--white ons-icon,
.toolbar--white .button,
.toolbar--white .back-button,
.back-button__icon,
.toolbar--white div,
.toolbar--white .button * {
	color:#333;
}

.toolbar--violet,
.toolbar--violet2 {
	background: linear-gradient(20deg, rgba(139,66,197,1) 0%, rgba(158,75,223,1) 100%);
	border-bottom:0 solid #eee;
}
.toolbar--violet {
	height:60px;
}
.toolbar--violet div {
	height:60px;line-height:60px;
}
.toolbar--violet2 {
	height:70px;
}
.toolbar--violet2 div {
	height:70px;line-height:70px;
}
.toolbar--violet .back-button__icon,
.toolbar--violet2 .back-button__icon {
	display:inline-flex;fill:rgba(255,255,255,0.5);top:5px;position:relative;
}
.toolbar--violet ons-icon,
.toolbar--violet .button,
.toolbar--violet .back-button,
.back-button__icon,
.toolbar--violet div,
.toolbar--violet .button * {
	color:#fff;
}

.toolbar-button--info-right {
	font-size:0.8em;
}
.toolbar-button--info-right .ons-icon {
	font-size:1.6em;position:relative;top:3px;right:3px;
}
.bottom-bar--actions {
	text-align:center;background:none;padding:0px 20px;
	margin-bottom:5px;
	background:#f2f2f2;
}

.toolbar--height100 {
	height:100px;
}
.toolbar--height100 > div {
	height:100%;
}
.toolbar--height100 ons-back-button {
	position:relative;top:-5px;font-size:0.8em;
}

.toolbar--height130 {
	height:130px;
}
.toolbar--height130 > div {
	height:100%;
}
.toolbar--height130 ons-back-button {
	position:relative;top:-5px;font-size:0.8em;
}

span.user-name {
	font-size:0.9em;
}

.expandable-content {
	padding:0;background:#fafafa;
	padding-bottom:10px;border-bottom:1px solid #eee;margin-bottom:10px;
}

ons-splitter ons-list.list#menu-items {
	margin-top:10px;
}

ons-splitter ons-list.list#menu-items ons-list-item.list-item {
	border-color:#fff;
	color:#fff;padding-right:15px;padding-left:20px;
	color:#222;
}
ons-splitter ons-list.list#menu-items ons-list-item.list-item div {
	line-height:1.4em;
}
ons-splitter ons-list.list#menu-items ons-list-item.list-item .list-item {
	padding-left:15px;padding-right:0;margin-right:0;
	padding-top:0;padding-bottom:0;
	font-size:0.9em;
}
ons-splitter ons-list.list ons-list-item.list-item {
	color:#222 !important;
}

ons-splitter ons-list.list#menu-footer ons-list-item.list-item {
	xpadding:0;xmargin:0;
}

.list-header {
	background:#fafafa !important;margin-top:20px;
}

.button {
	font-size:1em;
}
.button--fixed-bottom {
	padding:5px 0;position:fixed;bottom:15px;z-index:300;
	margin:0 2.5%;width:95%;display:inline-block;
}
.text-input--underbar {
	background-size:100% 2px;
	background-color:none;	
	padding-bottom:10px;
	padding-top:10px;
	height:33px;	
}

.text-input--search {
	background-size:100% 2px;
	background-color:none;	
	padding-bottom:10px;
	padding-top:17px;
	height:45px;
	font-size:24px;
}

/*
.area-search {
	position:fixed;top:60px;width:100%;height:auto;background:rgba(255,255,255,0.95);z-index:10;padding:0 0;
	display:none;
	transition:all 0.2s;
	transform:translate3d(0,-20px,0);
	opacity:0;
}
html[onsflag-iphonex-portrait] .area-search {
	top:104px;
}
*/


.browse-category-title	{
	position:fixed;top:60px;height:35px;padding:5px 20px;margin-top:0;background:rgba(255,255,255,0.75);color:#000;line-height:35px;font-size:1.3em;border-top:1px solid #eee;margin-top:16px;font-weight:500;
	z-index:10;width:100%;
	padding:5px 5%;padding-top:10px;margin-top:0;height:auto;
}

html[onsflag-iphonex-portrait] .browse-category-title	{
	top:104px;
}

div.ui-qty {
	width:50%;margin:10px auto;
}

.cart-item {
	position:relative;padding:15px 0 !important;
	
}

.cart-item:not(:last-child) {
	border-bottom:1px solid #eee;
}

.cart-item .food-thumbnail {
	
}

.cart-item .title {
	font-size:1em !important;padding-bottom:0 !important;display:block;margin-top:0;
}

.cart-item .price {
	font-size:1em !important;padding-bottom:0 !important;display:block;margin-top:0;
	opacity:0.7;
	position:absolute;bottom:15px;
}

.cart-item div.ui-qty {
	width:80%;margin:10px 0;
}

.cart-item .button--outline2 {
	background:none;border-width:2px;font-size:2.8em;
	color:#a2cd37;box-shadow:none;
	width:36px;height:36px;padding:0;margin:0;
	line-height:1.7em;
}

.cart-item .text-input--add-qty {
	background:none;font-size:1.3em;text-align:center;padding:10px 0;height:auto;color:#000;
	display:block;
	width:60%;margin:0 3%;margin-right:0;
	-webkit-appearance: none;
	-moz-appearance: none;
}


.order-item .title,
.order-title {
	font-size:1.2em !important;padding-bottom:0 !important;display:block;margin-top:0;font-weight:500;
	line-height:1.3em;overflow-wrap: normal;word-wrap: normal;word-break: normal
}



.toast--ui-toast {
	padding:30px 20px;
	margin:0 auto;
	margin-top:30%;
}
.toast--ui-toast div {
	font-size:1.2em;text-align:center;font-family:'Kanit';
}


#btn-order-start,
#order-point {
	display:none;
}

.tabbar__button {
	color:#666;
}

div.error-msg {
	text-align:left;margin:5px 0;
	line-height:1.4em !important;
}

.select-input--xunderbar {
	font-size:1em !important;
	color:#222 !important;
}

#btn-order-cart,
#btn-order-start {
	font-size:1.1em;
}

#btn-order-cart.disabled {
	background:#aaa;
}

.button.disabled,
.button.disabled:active {
	background:#ccc !important;color:#888 !important;
}

.segment__button.disabled {
	background:#fff !important;color:#888 !important;border-color:#888 !important;
}

.modal-wrapper {
	text-align: center;background:#fff;height:100%;width:90%;padding:0 5%;position:relative;
}
.modal-wrapper .modal-content {
	text-align: left;xbackground:#f8f8f8;width:100%;margin:0;padding:0;overflow:auto;padding-top:20px;color:#000;padding-bottom:85px;
	height:auto;
}
.modal-wrapper .modal-action {
	padding:20px 10%;height:40px;text-align:center;position:fixed;bottom:0;left:0;width:80%;display:block;background:rgba(255,255,255,0.8);
}

div.app-loading,
div.app-preload {
	position:absolute;top:0;left:0;width:100%;height:100%;z-index:300;background:rgba(255,255,255,0.6);text-align:center;
	display:none;transition:all 0.2s;background:rgba(0,0,0,0.15);
}
div.app-loading.active,
div.app-preload.active {
	display:inline;
}
div.app-loading ons-progress-circular,
div.app-preload ons-progress-circular {
	position:relative;top:45% !important;
}
div.app-preload span.text {
	position:absolute;top:45% !important;margin-top:40px;
	color:#9245ce;font-weight:600;font-size:1em;
	font-family:'Kanit' !important;width:100%;
	display:block;text-align:center;
}
.progress-circular--cpg .progress-circular__primary,
.progress-circular--cpg .progress-circular__secondary {
	stroke: #9f4cdf;
}

#page-map .page__background {
	/*background-color:transparent !important;*/
	/*background:transparent !important;*/
}

select,
select option,
button,
button span 
.button,
.button span,
ons-alert-dialog-button {
	font-family:'Kanit' !important;	
}
select {
	font-size:1.2em !important;
}

.action-sheet-button--cpg {
	background:#d20000 !important;color:#fff;font-weight:bold !important;
	width:90%;border-radius:10px !important;margin:10px auto !important;
	display:block !important;
	text-align:center !important;
	font-family:'Kanit' !important;
}
.action-sheet--cpg {
	background:#fff !important;
}


div.frame {
	font-size:1em;
	padding:15px 15px;
	line-height:1.5em;
	margin:18px 10px;
	background:#fff;box-shadow:1px 1px 2px #ccc;border-radius:6px;
}
div.frame div.section-title {
	margin:0;padding:0;margin-top:15px;font-size:0.8em;opacity:0.6;
}
div.frame div.section-title.order-status {
	margin:0;padding:0;margin-top:15px;font-size:0.8em;opacity:0.9;
	text-align:right;padding:2px 10px;margin:0;
	background:#f4f4f4;display:inline-block;border-radius:5px;
}

div.frame.xnodata {
	background:none;box-shadow:none;
}
div.frame.frame2 {
	margin-bottom:250px;
}

div.frame ons-button.button {
	font-size:1em;
	/*line-height:1em;*/
	font-family:'Kanit';
	vertical-align:middle;
}
div.frame a.btn-remove-item {
	font-size:0.8em;color:red;
	position:absolute;
	bottom:15px;right:0;
	letter-spacing:0;
}

ons-toolbar-button {
	position:relative;
}
ons-toolbar-button .badge {
	width:18px;height:18px;background:red;color:#fff;border-radius:50%;position:absolute;top:-4px;right:2px;line-height:18px;text-align:center;
	display:none;
}
ons-toolbar-button .badge.active {	
	display:inline-block;
}

div.grid-inner {
	width:100%;
}
div.grid-inner.margin {
	width:90%;margin:0 5%;
}
div.grid-inner img {
	width:100%;
}

#main-food {
	margin-bottom:0px;
}

#main-food-cart {
	margin-bottom:0;
}

#main-food-cart div.ui-qty {

}
#main-food-cart div.ui-qty .text-input--add-qty {
	width:80%;margin:0 3%;margin-right:12%;
}
#main-food-cart div.ui-qty .btn-qty-add,
#main-food-cart div.ui-qty .btn-qty-sub {
	line-height:30px;
}

.btn-qty-add,
.btn-qty-sub {
	text-align:center;
}

#main-food-info div.title {
	font-size:1.4em;padding:10px 0;
}
#main-food-info .food-desc,
#main-food-info .food-nutri {
	line-height:1.6em;	
}

.food-items .food-title {
	font-size:1.6em;
}
.food-items .food-shortdesc {
	line-height:1.6em !important;
	margin:0 !important;
}

span.order-status {
	font-size:1em;font-weight:normal;
	display:inline-block;padding:3px 6px;
	background:#f4f4f4;color:#222;border-radius:3px;
}
span.order-status.status-0,
div.frame div.section-title.order-status.status-0 {
	color:#999;
}
span.order-status.status-1,
div.frame div.section-title.order-status.status-1 {
	color:#c00009;
	background:#c00009;color:#fff;
}
span.order-status.status-2,
div.frame div.section-title.order-status.status-2 {
	color:#222;
}
span.order-status.status-3,
div.frame div.section-title.order-status.status-3 {
	color:#222;
}
span.order-status.status-4,
div.frame div.section-title.order-status.status-4 {
	color:#faab00;
	background:#faab00;color:#fff;
}
span.order-status.status-5,
div.frame div.section-title.order-status.status-5 {
	color:#79be0c;
	background:#79be0c;color:#fff;
}
span.order-status.status-6,
div.frame div.section-title.order-status.status-6 {
	color:#222;
}
span.order-status.status-7,
div.frame div.section-title.order-status.status-7 {
	color:#1fd2ff;
	background:#1fd2ff;color:#fff;
}

.btn-phone {
	text-decoration:none;
}

#info-help .frame,
#info-policy .frame {
	margin:0;padding:0;
}

div.section {
	border-top:1px solid #f0f0f0;
	margin:10px auto;padding:10px 0;
	line-height:1.5em;
}
div.section:nth-child(1) {
	border:0;
}
div.section:nth-last-child {
	
}



div.course-attachment-item {
	margin:0;padding:15px 0;
	border-bottom:1px solid #eee;
}
div.course-attachment-item:last-child {
	padding-bottom:0;
	border:0;
}
.course-attachment-title {
	display:block;
	font-weight:600;	
	margin-bottom:5px;
	display:none;
}
.course-attachment-desc {
	display:block;font-size:0.9em;
	font-weight:600;	
}
ons-icon.course-attachment-thumbnail {
	font-size:30px;text-align:right;
}
img.course-attachment-thumbnail {
	width:85%;
	/*width:100%;margin:0 auto;margin-bottom:5px;*/
}

ul.rating {
	display:inline-block;margin:0;padding:0;list-style:none;overflow:hidden;
}
ul.rating li {
	margin:0 2px;padding:0;float:left;
}
ul.rating ons-icon {
	font-size:16px;color:#ecc200;
}
span.rating-score {
	position:relative;top:-4px;margin-left:5px;
}
.card span.rating-score {
	position:relative;top:-12px;margin-left:5px;
}

#login .page__content {
	background:#fff !important;
}
#main-home .page__content,
#page-myproduct .page__content,
#page-product .page__content {
	background-color:#f6f6f6 !important;
}
#course-view .page__content {
	padding-bottom:0;
}
#course-view .course-files .section {
	display:none;
}
#course-view  .data-course-desc img {
	width:100%;margin:10px 0;
}


div.mobile-lf {
	display:block;
}
div.rating {
	xdisplay:none !important;	
}

.data-lecturer_title {
	font-size:1.6em;color:#000;padding-bottom:8px;display:block;
	font-weight:bold;
}
.area-view {
	opacity:0.6;font-size:0.9em;margin-top:12px;display:inline-block;
}
.area-view.price {
	font-size:1.6em;font-weight:bold;color:#9e4bdf;padding-bottom:8px;display:block;padding-top:8px;opacity:1;margin-top:0;
}
.data-video-title {
	font-weight:500;font-size:1.1em;
}

.attachment-photo {
	width:99%;margin:0.5%;
}

.area-search {
	position:fixed;top:60px;width:100%;height:auto;background:rgba(255,255,255,0.95);z-index:10;padding:0 0;
	display:none;
	transition:all 0.2s;
	transform:translate3d(0,-20px,0);
	opacity:0;
}
html[onsflag-iphonex-portrait] .area-search {
	top:104px;
}
.area-search.active {
	transform:translate3d(0,0,0);
	opacity:1;
	display:block;
}

div.marker-info {
	padding:5px;border-radius:5px;xbackground:#ffe6e3;text-align:center;margin:0 auto;display:block;
}
.marker-title {
	font-weight:bold;display:block;margin-bottom:10px;text-align:center;
}

@media screen and (min-width: 1024px) {
	div.pure-g div.pure-u-0 {
		display:inline-block;
	}
	div.mobile-lf {
		display:none;
	}
}


@media print {
	html,body,
	#nav-main,
	ons-page,
	.page,
	.page__background,
	.page__content {
		height:auto !important;
		overflow: visible !important;
		overflow-y: visible !important;
	}
}


	#page-shop .banners,
	#product-view .product-images {
		xwidth:100%;margin:0;
		overflow:hidden;position:relative;
	}
	#page-shop .banner img,
	#product-view .product-images img {
		width:100%;margin:10px auto;text-align:center;border-radius:5px;
	}

	.tns-outer {
		position:relative;
	}
	.tns-nav {
		position:absolute;bottom:-34px;z-index:2;text-align:center;width:100%;
	}
	.tns-nav button {
		width:3px;height:3px;border-radius:50% !important;padding:0 !important;margin:0 3px !important;border:0 !important;position:relative;top:-30px;		
		outline:none !important;
		background:#ccc;
	}
	.tns-nav button.tns-nav-active {
		width:8px;height:8px;border-radius:50% !important;padding:0 !important;margin:0 3px !important;border:0 !important;top:-28px;
	}
	.tns-nav button.tns-nav-active { 
		background:#9245ce !important;
	}

	.section {
		display:block;margin:0;padding:0;overflow:hidden;
		background:#fff;
	}
	.section.padding {
		width:95%;padding:10px 2.5%;margin:0;
	}
	.section .section-title {
		display:block;margin:0;
		font-weight:500;color:#000;
	}
	.section .section-content {
		display:block;margin-top:20px;
	}

	.section#section-product {
		margin-top:20px;padding-top:10px;
	}

	.category-item {
		width:100%;text-align:center;
	}
	.category-item img {
		width:50%;padding:15%;border-radius:50%;border:1px solid #eee;max-width:100px;
	}

	.category-item.special img {
		width:50%;padding:5%;padding-bottom:0;border-radius:50%;border:1px solid #eee;max-width:100px;
	}


.card--horo-product {
	padding:0;
	line-height:2.5em;
	padding-bottom:0;
	padding-top:10px;
	overflow:hidden;
	margin:10px 5px;	
	box-shadow:0 0 3px #aaa;
	position:relative;
}
.card--horo-product img.thumb {
	width:100%;max-width: 90%;padding:0;margin:0 auto;border:0;display:block;
	xheight:80px;width:auto !important;
}
.card--horo-product img.thumb.small {
	margin:20px 10px;
}
.card--horo-product div.title {
	font-size:1em;
	line-height:1.4em;
	margin:0 10px;padding:15px 0;padding-bottom:0;font-weight:500;
}
.card--horo-product div.title.no-margin {
	padding:0;
}

.card--horo-product div.category-title {
	font-size:0.9em;
	line-height:1.4em;
	margin:0 10px;padding:5px 0;padding-bottom:0;font-weight:normal;
	opacity:0.6;
	margin-bottom:5px;margin-top:10px;
}
.card--horo-product div.category-title div {
	text-align:left;
}
.card--horo-product div.rating {
	margin:0 10px;padding:0;padding-bottom:5px;
	margin-bottom:0;padding-bottom:0;
}
.card--horo-product div.content {
	font-size:1em;
	line-height:1.4em;
	margin:5px 10px;padding-bottom:5px;font-weight:200;color:#666;
}
.card--horo-product div.shortdesc {
	font-size:1em;
	line-height:1.5em;
	margin:0;padding:10px 0;padding-bottom:0;font-weight:200;color:#666;
	height:80px;overflow:hidden;
}
.card--horo-product div.price {
	color:#8B42C5;font-weight:500;padding:4px 0;font-size:1.1em;margin-top:5px;
}
.card--horo-product div.action {
	margin-top:10px;	
}
.card--horo-product ons-button.button {	
	font-size:1em;display:block;text-align:center;
}
.card--horo-product ons-button.button ons-icon {
	font-size:2em;
	line-height:0.5em;
}
.card--horo-article div.shortdesc {
	font-size:1em;
	line-height:1.5em;
	margin:0;padding:10px 0;padding-bottom:0;font-weight:200;color:#666;	
}





.card--horo-template {
	padding-bottom:0;margin-bottom:0;margin-top:10px;
}
.templates > div:last-child .card--horo-template {
	margin-bottom:10px;
}
.card--horo-template img.thumb {
	width:80%;margin:0 auto;display:block;margin:20px 10%;position:relative;left:auto;top:auto;
}
.card--horo-template .title {
	margin:0;padding:0 !important;
}
.card--horo-template .content {
	margin:0;padding:0 !important;
}
.card--horo-template .actions {
	margin-top:15px;text-align:right;margin-bottom:0 !important;padding-bottom:0 !important;line-height:1em;
}
.card--horo-template .actions ons-icon {
	font-size:20px;margin:0 5px;
}


#page-product #section-category {
	position:fixed;top:60px;z-index:4;
}
html[onsflag-iphonex-portrait] #page-product #section-category	{
	top:104px;
}
#page-product #section-product {
	margin-top:104px;
}
html[onsflag-iphonex-portrait] #page-product #section-product	{
	margin-top:104px;
}



#page-report #section-category {
	position:fixed;top:60px;z-index:4;
	vertical-align:center;
	display:block;
	padding-left:0;padding-right:0;
	width:100%;
	padding-bottom:0;
}
html[onsflag-iphonex-portrait] #page-report #section-category	{
	top:104px;
}
#page-report #section-product {
	margin-top:104px;
	padding-top:0;
}
html[onsflag-iphonex-portrait] #page-report #section-product	{
	margin-top:104px;
}

#page-report table.tb-report {
	width:100%;padding:0;margin:0;border:0;
}
#page-report table.tb-report thead th {
	background:#ccc;color:#000;padding:3px 0;text-align:center;
}
#page-report table.tb-report tbody tr:nth-child(even) td {
	background:#f2f2f2;
}
#page-report table.tb-report tbody tr.total td {
	background:#ccc;
	font-weight:bold;
}
#page-report table.tb-report tbody tr.expense td,
#page-report table.tb-report tbody tr.sharing td {
	background:#f8dadd;
}
#page-report table.tb-report tbody tr.net td {
	background:#e1d0f0;
	font-weight:bold;
}



#page-report table.tb-report tbody td {
	padding:3px 10px;
}
#page-report table.tb-report tbody td:nth-child(2),
#page-report table.tb-report tbody td:nth-child(3) {
	text-align:right;
}
#page-report table.tb-report tbody td:nth-child(4) {
	text-align:right;
}

#page-report table.tb-report thead th:nth-child(1),
#page-report table.tb-report tbody td:nth-child(1) {
	width:40%;
}
#page-report table.tb-report thead th:nth-child(2),
#page-report table.tb-report tbody td:nth-child(2) {
	width:17%;
}
#page-report table.tb-report thead th:nth-child(3),
#page-report table.tb-report tbody td:nth-child(3) {
	width:17%;
}
#page-report table.tb-report thead th:nth-child(4),
#page-report table.tb-report tbody td:nth-child(4) {
	width:26%;
}


#product-exec-02 .product-steps {
	display:block;margin:0 auto;
	max-width:640px;
}

html[onsflag-iphonex-portrait] #product-exec-02 .product-steps	{
	margin-top:10px;
}

#page-myproduct .card--horo-product {
	padding-bottom:10px;
}
#page-myproduct .card--horo-product .content {
	#display:none;
}

#page-article .section-content {
	margin:0;padding:0;
}
#page-article #section-product {
	background:none;
	margin-top:0;paddin-top:0;
}

.bottom-bar--product-actions {
	height:60px;
}
.bottom-bar--product-actions div.pure-g {
	height:60px;line-height:60px;vertical-align:middle;
}
.bottom-bar--product-actions .tabbar {
	height:100%;vertical-align:middle;
}
.bottom-bar--product-actions .tabbar__button {
	height:100%;vertical-align:middle;
	color:#fff;
}
.bottom-bar--product-actions .tabbar__button div {
	font-size:0.85em;
}
.bottom-bar--product-actions .tabbar__button .ons-icon {
	font-size:1.4em;
}
.button--red {
	background:#fb7181
}


.bottom-bar--template-actions {
	height:60px;
}
.bottom-bar--template-actions div.pure-g {
	height:60px;line-height:60px;vertical-align:middle;
}
.bottom-bar--template-actions .tabbar {
	height:100%;vertical-align:middle;
}
.bottom-bar--template-actions .tabbar__button {
	height:100%;vertical-align:middle;
	color:#fff;
}
.bottom-bar--template-actions .tabbar__button div {
	font-size:0.85em;
}
.bottom-bar--template-actions .tabbar__button .ons-icon {
	font-size:1.4em;
}
.bottom-bar--template-actions > ons-tabbar {
	display:none;
}
.bottom-bar--template-actions > ons-tabbar.active {
	display:block;
}
.bottom-bar--template-actions ons-col.disabled {
	background:#ccc !important;
}

html[onsflag-iphonex-portrait] #tab-product-actions ons-col,
html[onsflag-iphonex-portrait] .bottom-bar--template-actions ons-col {
	margin-top:30px;
}

span.btn-expand {
	display:inline-block;margin:0 auto;margin-bottom:0;padding-bottom:0;padding-top:30px;position:relative;top:-20px;text-align:center;display:block;color:#9e4bdf;background:linear-gradient(0deg, rgba(255,255,255,1) 70%, rgba(255,255,255,0.5) 100%);
}
span.btn-expand ons-icon {
	font-size:34px;font-weight:100;position:relative;top:-5px;
}

.section .section-title2 {
	font-weight:bold;font-size:1.3em;
}
.section.section-desc {
	height:200px;overflow:hidden;margin-bottom:10px;
}
.section.section-desc.expanded {
	height:auto;overflow:hidden;margin-bottom:10px;
}
.product-info1 {
	height:auto;width:95%;margin:0 2.5%;border-bottom:1px solid #eee;
}
.btn-fav {
	xdisplay:none;font-size:24px;font-weight:100;border-radius:50%;xborder:2px solid #c0362e;padding:3px;color:#888;position:relative;top:2px;
}
.btn-fav-added {
	display:none;font-size:24px;font-weight:100;border-radius:50%;xborder:2px solid #c0362e;padding:3px;color:#888;position:relative;top:2px;
}
.btn-share {
	xdisplay:none;font-size:24px;font-weight:100;border-radius:50%;xborder:2px solid #c0362e;padding:3px;color:#888;position:relative;top:0;
}
#page-myproduct .page__background,
#page-myproduct .page__content {
	background:#fff !important;
}
#product-exec-02 .page__content {
	margin-bottom:20px;overflow-x:hidden;
}
#product-exec-02 .pane .pane-02 {
	padding-top:80px;
}
#product-exec-02 .pane .pane-03 {
	padding-top:20px;
}
#product-exec-02 .pane .pane-02 div.cards {
	position:absolute;z-index:3;background:red;
	overflow:visible;
	width:100%;margin-top:20px;
}
#product-exec-02 .pane .pane-02 div.cards .card {	

  transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
  
  perspective: 1000;
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  
  float: left;
  width: 100px;
  height: auto;
  background-color:none;
  
  position: absolute;
  top: 0;
  left: 0;
  margin: 30px 0 15px 15px;
  padding:0;
  
  &:nth-child(5n) {
      margin-right: 0;
  }
  
  &.ani0 {
      right: 948px;
      bottom: 326px;
  }
  
  &.ani1 {
      right: 711px;
      bottom: 326px;
  }
  
  &.ani2 {
      right: 474px;
      bottom: 326px;
  }
  
  &.ani3 {
      right: 237px;
      bottom: 326px;
  }
  
  &.ani4 {
      right: 0;
      bottom: 326px;
  }
  
  &.ani5 {
      right: 948px;
      bottom: 0;
  }
  
  &.ani6 {
      right: 711px;
      bottom: 0;
  }
  
  &.ani7 {
      right: 474px;
      bottom: 0;
  }
  
  &.ani8 {
      right: 237px;
      bottom: 0;
  }
  
}
#product-exec-02 .pane .pane-03 div.cards {
	position:absolute;z-index:3;
	overflow:visible;
	width:100%;margin-top:0;
}
html[onsflag-iphonex-portrait] #product-exec-02 .pane .pane-03 div.cards	{
	margin-top:20px;
}
#product-exec-02 .pane .pane-03 div.cards img.card {
	width:100px;
	position:absolute;
	z-index:3;
	top:0;
	overflow:hidden;border:0;margin:0;padding:0;
	transition:all 0.3s;
}
#product-exec-02 .pane .pane-03 div.cards img.card.selected {
	transition:all 0.3s;
	transform:translate3d(0,-15px,0);border-top:2px solid #53d1b6;
}
#product-exec-02 .page__background,
#product-exec-03 .page__background {
	background:#fff;
}
#product-exec-02 .pane .pane-01 .title {
	display:block;text-align:center;font-size:1.1em;font-weight:500;margin-bottom:15px;
}
#product-exec-02 .pane .pane-01 .data-thumbnail {
	display:block;text-align:center;margin:10px 10%;height:auto;width:80%;
}
#product-exec-02 .pane .pane-01 .data-thumbnail img {
	display:block;width:100%;height:auto;overflow:hidden;
}
#product-exec-02 .product-steps > div {
	display:none;
	transition:all 0.2s;
}
#product-exec-02 .product-steps > div.active {
	display:block;
	transition:all 0.2s;
}

.card-layout {
	position:relative;width:100%;max-width:420px;margin:0 auto;top:0;left:0;z-index:300;
}
.card-layout.result {
	position:relative;top:auto;left:auto;
}
.card-result {
	display:inline-block;
	perspective: 1000px;
}
.card-result .flip-card-inner {
	position: relative;
	width:100%;height:100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	border:0;
	overflow:visible;
}
.card-result.active .flip-card-inner {
	transform: rotateY(180deg);
	border:0;
}
.card-result .flip-card-front,
.card-result .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	overflow:visible;
	border:0;
}
.card-result .flip-card-front {
	background-color: none;
	color: black;
}
.card-result .flip-card-back {
	background-color: none;
	color: white;
	transform: rotateY(180deg);
}
.card-result .flip-card-front,
.card-result .flip-card-back {
	width:100%;padding:0;height:auto;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bottom-info {
	font-size:1.1em;
	z-index:100;width:100%;background:rgba(255,255,255,1);position:fixed;left:0;padding:5px 10px;text-align:center;color:#8104ff;
}


.cards-detail {
	margin-top:10px;position:relative;top:350px;
}
.cards-detail .card-detail {
	margin:10px 0;margin-bottom:30px;
}
.card-detail .title {
	padding:5px 10px;background:#9f4cdf;color:#fff;font-weight:bold;font-size:1.2em;
	text-align:center;
}
.card-detail .desc {
	margin-top:10px;margin-bottom:20px;
}

.card-detail .desc .headline {
	color:#fb7181;margin-bottom:0;padding-bottom:0;
}

a.btn-view-card,
a.btn-view-card:active,
a.btn-view-card:visited,
a.btn-view-card:link {
	background:#40bfff;color:#fff;font-weight:bold;display:inline-block;padding:5px 20px;margin:0 auto;font-size:1.1em;
}

a.btn,
a.btn:active,
a.btn:visited,
a.btn:link {
	background:#9245ce;color:#fff;font-weight:bold;display:inline-block;padding:5px 20px;margin:0 auto;font-size:1.1em;
	border-radius:5px;
}

.action-sheet-mask {
	background:rgba(0, 0, 0, 0.4);
}

#product-exec-02 .btn-result-action {
	display:none;
}
#product-exec-02 .btn-result-action.active {
	display:inline;
}

span.back-button__icon:before {
    font-family: uicons-regular-rounded !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	content:'\f110';
	opacity:0.55;font-size:34px;position:relative;top:3px;
}
span.back-button__icon svg {
	display:none;
]

div.action-sheet .action-sheet-button span.payment-channel {
	display:block !important;width:100% !important;text-align:left !important;
	background:red;
}

.list-item--longdivider > div {
	background:red !important;
	display:none;
}

.card--horo-order {
	padding:10px 15px;
	line-height:1.2em !important;
	padding-bottom:0;
	padding-top:10px;
	overflow:hidden;
	margin:5px 5px;
	box-shadow:0 0 3px #aaa;
	position:relative;
}
.card--horo-order > div {
	width:90% !important;margin:0 auto;
	line-height:1.2em !important;
}

.card--horo-product div.price span#color-green,
.card--horo-product div.price span.color-green,
.cart-item div.price span.color-green {
	color:#1ace80 !important;
}


div.horo-card {
	width:90% !important;margin:0 auto;display:block;
	position:relative !important;
	overflow:hidden;
}

.mobile-margin {
	max-width:960px !important;	display:block !important;margin:0 auto !important;
		display:block;margin:0 auto;
	max-width:640px;
}

.remark {
	color:red;display:inline-block;margin-left:3px;
}