@charset "UTF-8";

/*
Theme Name: Simple
Theme URI: http://softganz.com
Description: A simple theme.
Template: options
Author: Panumas Nontapan
Author URI: http://softganz.com
Version: 1.0
Last Modify : 2018-10-15
*/

@import url(reset.css);
@import url(modules.css);
@import url(icons.css?v=5);
@import url(basic/jquery.ui-1.10.css);

html, body {height: 100%;}
p {margin-bottom: 8px;}
ul , ol {margin-bottom: 8px; padding-left: 30px;}
img {border:none;}

:focus, :active {outline: 0;}
::-moz-focus-inner {border-color: transparent;}

._text-center {text-align: center !important;}
._text-right {text-align: right !important;}
._text-left {text-align: left !important;}

.-hidden {display: none;}
.-error {color:#f00;}
.-inlineblock {display: inline-block;}
.-fixed {position: fixed;}
.-at-bottom {bottom:16px;}
.-at-right {right:16px;}
.-block {display: block;}
.-clearfix::after {content: ""; display: block; clear: both;}
.-nowrap {white-space: nowrap !important;}


.row {}
.col {min-height: 1px;}
.col-xs {} /* 0 – 576 px */
.col-sm {} /* 576+ px */
.col-md {} /* 768+ px */
.col-lg {} /* 992+ px */
.col-xl {} /* 1200 px */

.container>.row.-flex {}
.container>.row>.col {display: block;}





.-sg-clearfix::after {clear: both; content: " "; display: table;}
.-sg-pulled-left {float: left !important;}
.-sg-pulled-right {float: right !important;}
.-sg-clipped {overflow: hidden !important;}
.-sg-size-1 {font-size: 3rem !important;}
.-sg-size-2 {font-size: 2.5rem !important;}
.-sg-size-3 {font-size: 2rem !important;}
.-sg-size-4 {font-size: 1.5rem !important;}
.-sg-size-5 {font-size: 1.25rem !important;}
.-sg-size-6 {font-size: 1rem !important;}
.-sg-size-7 {font-size: 0.75rem !important;}
.-sg-paddingless {padding: 0 !important;}
.-sg-paddingnorm {padding: 8px !important;}
.-sg-paddingmore {padding: 16px !important;}
.-sg-marginless {margin: 0 !important;}
.-sg-text-center {text-align: center;}
.-sg-text-left {text-align: left;}
.-sg-text-right {text-align: right;}
.-sg-block-center {display: block; margin-left: auto; margin-right: auto;}
.-sg-circle {border-radius: 50%;}
.-sg-block {display: block;}
.-sg-inline-block {display: inline-block;}
.-sg-nowrap {white-space: nowrap !important;}


.-sg-16 {width: 16px !important; height: 16px !important; font-size: 16px !important;}
.-sg-24 {width: 24px !important; height: 24px !important; font-size: 24px !important;}
.-sg-32 {width: 32px !important; height: 32px !important; font-size: 32px !important;}
.-sg-48 {width: 48px !important; height: 48px !important; font-size: 48px !important;}
.-sg-64 {width: 64px !important; height: 64px !important; font-size: 64px !important;}

.-sg-padding-8>* {padding: 8px;}
.-sg-padding-16>* {padding: 16px;}

.-sg-is-mobile {display: initial;}
.-sg-is-desktop {display: none;}

.-sg-scroll-width {width: 100%; overflow: scroll;}

.-sg-flex {display: flex !important; flex-wrap: wrap; justify-content: space-between;align-items:stretch; margin: 0 -8px; padding: 0; list-style-type: none;}
.-sg-flex.-justify-left {justify-content: flex-start;}
.-sg-flex.-justify-right {justify-content: flex-end;}
.-sg-flex.-flex-nowrap {flex-wrap: nowrap;}
.-sg-flex.-co-1>* {flex: 0 0 100%;}
.-sg-flex.-co-2>* {flex: 1 0 60%;}
.-sg-flex.-co-3>* {flex: 1 0 60%;}
.-sg-flex.-co-4>* {flex: 1 0 80%;}
.-sg-flex>.-full {flex: 0 0 100%;}
.-sg-flex>.-fill {flex: 1;}



.-sg-level {}
.-sg-level.-level-1 {color: #dada00;}
.-sg-level.-level-2 {color: #90ce00;}
.-sg-level.-level-3 {color: #84cc01;}
.-sg-level.-level-4 {color: green;}
.-sg-level.-level-5 {color: green;}
.-sg-level.-level-6 {color: green;}


.sg-action {cursor: pointer;}

.-new {background-image:url(https://softganz.com/library/img/new.1.gif); background-repeat: no-repeat; background-position: right;}

.sg-view.-co-2 {display: flex; flex-wrap: wrap;}
.sg-view.-co-2>.header {flex: 1 0 100%; border-bottom: 1px rgb(220, 226, 230) solid;}
	.sg-view.-co-2>.-sg-view {margin: 0; padding: 0;}
	.sg-view.-co-2>.-sg-view:first-of-type {flex: 1 0 1px;}
	.sg-view.-co-2>.-sg-view:nth-of-type(2) {flex: 0 0 100px; border-left: 1px rgb(220, 226, 230) solid; background-color: rgb(247, 249, 250);}
	.sg-view.-co-2>.-sg-view:nth-of-type(2)>* {display: block; margin: 0; padding: 8px; border-bottom: 1px  rgb(220, 226, 230) solid; width: auto;}
	.sg-view.-co-2>.-sg-view:nth-of-type(2)>.header {background-color: rgb(247, 249, 250);}

	.sg-view header.header>.nav.-back {display: none;}
	.sg-view.-sg-view:first-of-type>header.header:first-of-type>.nav.-back {display: flex;}



.map-canvas {width:300px; height:300px; background-color: #eee;}
.map-info {width:300px;}
.jconfirm-box {width: 200px;}

.pagenotfound {margin:40px 0; border:1px solid rgb(210, 210, 210);background-color: rgb(241, 241, 241);padding:30px;border-radius:10px;}
.pagenotfound hr {margin:10px 0;border: none; height:1px; background: #ccc;}


div.photo {margin:10px 0;clear:both;}
	div.photo img {padding: 3px; border:1px #999 solid; border-top:1px #ddd solid; border-left:1px #ddd solid;
	}
	div.photo ul {list-style-type:none;margin:0;padding:0;text-align:center;}
	div.photo ul li {float:none;display:inline;margin:0;padding:0;}
	div.photo ul li p {margin:2px 0 10px 0;font-weight:normal;font-size:10pt;}
	div.photo-single {width:70%;margin:0 auto;}
	div.photo-single img {width:100%;}

	div.photo-tall {margin:20px auto;}
	div.photo-multiple {margin:20px auto;text-align:center;}
	div.photo-multiple img.photo-wide {width:230px;height:160px;}
	div.photo-multiple img.photo-tall {height:160px;}


.module.-softganz-app .-sg-is-desktop {display: none;}
.module.-page-full .page.-main {height: 100% !important; padding: 0 !important; margin: 0 !important;}
.module .-map-wrapper {width: 100%; height: 100%; min-height: 700px;}
.module .map_canvas {min-width: 100%; min-height: 100%;}

@media (min-width:30em) {		/* 480/16 = 30 */
	.-sg-flex:not(.form)>* { margin-left: 8px; margin-right: 8px;}
}

@media (min-width:40em) {		/* 640/16 = 45 */
	.-sg-flex.-co-2>* {flex: 1 0 45%;}
	.-sg-flex.-co-3>* {flex: 1 0 27%;}
	.-sg-flex.-co-4>* {flex: 1 0 18%;}

	.sg-view.-co-2>.-sg-view:nth-of-type(2) {flex: 0 0 240px;}

}


@media (min-width:45em) {		/* 720/16 = 45 */
	.-sg-is-mobile {display: none;}
	.ui-card.-flex.-sg-is-mobile {display: none;}
	.-sg-is-desktop {display: initial;}
	table.item.-sg-is-desktop {display: table;}
}




/*------------------------------------*
$SCREENS
*------------------------------------*/
/**
* CONTENTS............
*
* For screen only
*/
@media screen {

	body {
		font:1em/1.4em Tahoma, Arial, Verdana, sans-serif;
		font-size:1em;
		font-size:100%;
		color:#333333;
		background:#fff;
	}

	blockquote {
		margin:5px 20px;
		padding:5px 20px;
		background:#FFFFEE none left top no-repeat;
		border-left:2px solid #F5F8EF;
	}

	a {cursor:pointer;}
	a.tagadelic {margin:0 0 4px 0; padding: 4px 8px;line-height:16pt; background: #eee; display: inline-block; border-radius: 4px;}
	a.level1 {font-size:100%;}
	a.level2 {font-size:120%;}
	a.level3 {font-size:140%;}
	a.level4 {font-size:160%;}
	a.level5 {font-size:180%;}
	a.-fill {display: block;}

	h1 {font-size:2em;}
	h2 {margin:10px 0;font-size:1.6em;}
	h3 {margin:10px 0;font-size:1.4em;}
	h4 {margin:10px 0;font-size:1.2em;}
	h5,h6 {margin:6px 0;font-size:1em;}

	dl {margin:10px 0;}
	dl dt {font-weight:bold;} /* height:1%; fixed bug ribbon-toolbar for IE6 */
	dl dd {margin:5px 0 5px 20px;}

	td,th {padding:2px;}

	legend {padding:0 10px;font-weight:bold;font-style:italic;}

	input::placeholder, textarea::placeholder {color:#999; font-style: italic; font-size: 0.9em;}


	.-left {text-align: : left;}
	.-right {text-align: right;}
	.-center {text-align: : center;}
	.-bigsize {font-style: 1.2em;}
	.-uppercase {text-transform: uppercase;}
	.-forprint {margin:20px; padding:20px; border:2px #ccc solid; box-shadow: 2px 2px 10px #ccc; position: relative;}


	.header {padding:8px;}

	.loader.-rotate {
		width: 24px;
		height: 24px;
		display: inline-block;
		vertical-align: middle;
		margin-right: 8px;
		border: 4px solid rgba(0, 82, 236, 0.25);
		border-top-color: #0052ec;
		border-radius: 50%;
		position: relative;
		animation: loader-rotate 1s linear infinite;
		top: 50%;
	}
	.loader.-center {display: block; margin:0 auto;}

	@keyframes loader-rotate {
		0% { transform: rotate(0); }
		100% {transform: rotate(360deg); }
	}

	.loading {
		width:120px;
		height:20px;
		margin:5px;
		padding:3px;
		position:absolute;
		text-align:center;
		background:#fff url(https://softganz.com/library/img/loading.gif) no-repeat 10px 5px;
		border:1px green solid;
		border-radius:10px;
	}

	/* Class look like bootstrap4 */
	.btn {
		margin:0px;
		padding: 6px 8px;
		font-size: 1em;
		line-height: 24px;
		color: #666;
		border: none;
		border-radius: 4px;
		box-shadow: 0px 0px 0px 1px #d2d2d2 inset;
		display: inline-block;
		background-color:#eee;
		cursor:pointer;
		text-align: center;
		white-space: nowrap;
	}
	.btn:hover {color: #555; background-color: #f0f0f0;}
	.btn.-sg-16 {padding: 0;}
	.btn.-sg-24 {padding: 0;}
	.btn.-sg-32 {padding: 0;}
	.btn.-sg-32>.icon {margin-top: 4px;}
	.btn.-sg-48 {padding: 0;}
	.btn.-sg-48>.icon {margin-top: 12px;}
	.btn.-sg-64 {padding: 0;}
	.btn.-sg-64>.icon {margin-top: 20px;}
	.btn.-big {padding-top:16px; padding-bottom: 16px;}
	.btn.-primary {font-weight: normal; color: #E5F2FF; box-shadow: 0 0 0 1px #1477D5 inset; cursor: pointer; background-color:#1477D5;}
	.btn.-primary:hover {background-color: #1B87EF;}
	.btn.-secondary {}
	.btn.-primary>.icon {opacity: 0.8;}
	.btn.-primary>.icon.-material {color: #f5f5f5;}
	.btn.-primary>span {opacity: 0.9;}
	.btn.-secondary:hover {}
	.btn.-success {color: #c5ffc6; background-color:#5FB660; box-shadow: 0 0 0 1px #5BAF5C inset;}
	.btn.-success:hover {background-color: #67C768;}
	.btn.-success>.icon {color: #c5ffc6;}
	.btn.-info {color: #E5F2FF; background-color:#60C0DC; box-shadow: 0 0 0 1px #55B6D2 inset;}
	.btn.-info:hover {background-color: #65C7E4;}
	.btn.-warning {color: #FFEEDB; background-color:#EEAC57; box-shadow: 0 0 0 1px #E6A755 inset;}
	.btn.-warning:hover {background-color: #F9B45A;}
	.btn.-danger {color: #FFE0E0; background-color:#D75452; box-shadow: 0 0 0 1px #C74F4D inset;}
	.btn.-danger:hover {background-color: #E05755;}
	.btn.-link {background-color:transparent; box-shadow: none;}
	.btn.-link:hover {background-color: #eee;}
	.btn.-cancel {color: #999; margin-right: 16px;}
	.btn.-cancel>.icon {color: #ccc;}
	.btn.-floating {color:#FFE0E0; background-color: #DB4437; border:none; box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)}
	.btn.-floating:hover {background-color: #f60;}
	.btn.-floating.-right {right:16px; position: absolute;}
	.btn.-floating.-bottom {bottom:16px; position: fixed;}
	.btn.-floating .icon.-material {color: #ffc8c3;}

	.btn.-circle24 {width: 24px; height: 24px; padding: 0px; border-radius:50%;}
	.btn.-circle32 {width: 24px; height: 24px; padding: 4px; border-radius:50%;}
	.btn.-circle48 {width: 24px; height: 24px; padding: 12px; border-radius:50%;}
	button.btn.-circle32 {width: 32px; height: 32px; padding:0;}
	button.btn.-circle48 {width: 48px; height: 48px; padding:0;}

	.btn.-hidden {display: none;}
	.btn>span {padding-left:6px; padding-right: 6px; line-height: 24px; vertical-align: middle; display: inline-block;}
	.btn>span.-hidden {display: none;}
	.btn.-fill {width:100%; width: calc(100% - 16px);}
	.btn.-wrap {white-space: normal;}
	.btn.-disabled {background-color: #ddd; box-shadow: 0 0 0 1px #ccc inset; color: #f5f5f5;}
	.btn.-active {box-shadow: 0 0 0 1px #ffba8c inset;}

	.btn.-upload>input.form-file {display: none;}
	.btn.-upload>label {margin: 0;}
	.btn.-sg-text-center .icon {display: block; margin: 0 auto;}

	.btn-floating {}
		.btn-floating.-right-top {width: 100%; padding-right:72px; text-align:right;}
		.btn-floating.-right-top>.btn {position: fixed; z-index: 1;}
		.btn-floating.-right-bottom {padding-right:72px; text-align:right;}
		.btn-floating.-right-bottom>.btn {position: fixed; bottom: 16px; z-index: 2;}
		.btn-floating.-right-bottom>.btn:nth-child(2) {bottom: 78px;}
		.btn-floating>span.btn.-floating:hover>ul {display: block; position: absolute; bottom: 48px; right: 0;}

	/* End of class look like bootstrap4 */
	

	.box {margin: 16px 0 64px 0; padding: 8px; box-shadow: 4px 4px 8px 2px hsla(0, 0%, 0%, 0.1);}
	.-sg-box {margin: 16px 0 64px 0; padding: 8px; box-shadow: 4px 4px 8px 2px hsla(0, 0%, 0%, 0.1);}


	/* Layout */
	.col.-xs {} /* 0 – 576 px */
	.col.-sm {} /* 576+ px */
	.col.-md {} /* 768+ px */
	.col.-lg {} /* 992+ px */
	.col.-xl {} /* 1200 px */
	
	@media (min-width:45em) { /* 720/16 */
		.container>.row>.col {margin: 0; padding: 0; display: block; float: left;}
		.container>.row>.col.-md-1 {width: 8.3333%;}
		.container>.row>.col.-md-2 {width: 16.6666%;}
		.container>.row>.col.-md-3 {width: 25.0000%;}
		.container>.row>.col.-md-4 {width: 33.3333%;}
		.container>.row>.col.-md-5 {width: 41.6666%;}
		.container>.row>.col.-md-6 {width: 50.0000%;}
		.container>.row>.col.-md-7 {width: 58.3333%;}
		.container>.row>.col.-md-8 {width: 66.6666%;}
		.container>.row>.col.-md-9 {width: 75.0000%;}
		.container>.row>.col.-md-10 {width: 83.3333%;}
		.container>.row>.col.-md-11 {width: 91.6666%;}
		.container>.row>.col.-md-12 {width: 100.0000%;}

		.container>.row.-flex {display: flex;}
		.container>.row.-flex>.col {float: none;}
	}
	/* @end */





	#core-message {background:#FFCC33;text-align:center;padding:5px;font-size:1.1em; position: absolute;z-index:100000; width:100%; top:0;}
	#core-message h3, #core-message h4, #core-message dl {text-align:left;font-size:9pt;}



	.left {	margin:0 20px 0 0; display:block; float:left;	}
	.right {margin:0 0 0 20px; display:block; float:right;}
	.center {margin:0 auto; display:table; float:none;	}
	.big {font-size: 1.3em;}

	.notify {background: #FAD163; padding:5px; text-align: center;}
	span.notify {padding:0 2px; margin: 0 5px; display: inline-block; border-radius: 10px; cursor: pointer;}

	.messages {padding:10px; width:70%; margin:20px auto; background:#eee; border-radius:0; border-left: 2px #999 solid;}
		.messages.-error { color: #D0227E; background: #FFCCCC; border-left: 2px #D0227E solid;}
		.messages.-notify { color: #ef7f00; background: #ffe0b6; border-left: 2px #ef7f00 solid;}
		.messages.-success {color: #199000; background: #d9ffd1; border-left: 2px #199000 solid;}
		.messages dl {display:inline-block;}
		.messages form {margin:2px 0 0 0;padding:0 10px 10px 10px;background:#F0F0F0;color:#666;border-radius:3px;}

	.error {color:#666;}

	.pagebreak {display: block;height:1px; opacity: 0;}


	.card {margin:0 0 16px 0; padding:0; list-style-type: none; box-shadow: 1px 1px 2px #aaa;}
		.card>li {margin:10px; box-shadow: 2px 2px 5px #aaa; position: relative;}
		.card>li>a {display: block; padding:10px;font-size:1.0em; text-align: center;}

		.card.-photo>li {position: relative;}
		.card-item.-upload {padding:64px 0;box-shadow: none;}
		.card.-photo .iconset {position: absolute; top: 0; right: 0; }


	.debug {width:100%;background:#fff;font-size:9pt;}

	.notify-main {
		margin:5px 0;
		padding:4px 20px !important;
		padding:0;
		display:none;
		font-weight:bold;
		white-space:nowrap;
		font-size:9pt;
		text-align:center;
		line-height:1.6em;
		background-color: #FAD163;
		overflow:auto;
		position: fixed;
		top: 4px;
		border-radius:5px;
		z-index:999999;
		max-width: 70%;
		max-height: 30%;
	}
	.notify-main ul {text-align: left;}
	#overlay {
		z-index:1000;
		position:fixed !important;
		position:absolute;
		top:25%;
		left:20%;
		width:60%;
		height:50%;
		padding:10px 20px;
		background:#fff;
		border:1px #f60 solid;
		border-radius:20px;
		opacity:0.9;
		visibility:hidden;
		overflow:auto;
	}
	a.close {
		width:24px;
		height:24px;
		display:block;
		position:absolute;
		right:20px;
		top:20px;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23808080' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z'/%3E%3Cpath d='M0 0h24v24h-24z' fill='none'/%3E%3C/svg%3E");
		overflow:hidden;
		z-index: 100;
		outline:none;
	}

	.spamword {
		margin:5px 0;
		font-size:13pt;
		color:#f00;
		display:inline-block;
		width:4em;
		text-align:center;
		border:1px #f00 solid;
		background:#FFCFD1;
		border-radius:15px;
	}

	.-disabled:not(.module) {pointer-events: none; cursor: default; color:#ccc;}
	a.-disabled {color:#ccc;}


	.icon {}
	/* icons are in file icons.css */
	/*
		.icon.-hover {display: none; position: absolute;}
		tr:hover>td>a>.icon.-hover {display: inline-block;}

	.iconset.-parent-hover {display: none; position: absolute; top: 2px; right: 2px; background-color: #fff; border-radius: 2px; padding: 2px;}
	tr.-parent-of-hover>td {position: relative;}
	tr:hover>td>.-parent-hover {display: inline-block;}
	*/




	.iconset {background-color: #fff; border-radius: 2px; padding: 2px; white-space: nowrap; list-style-type: none;}
		.iconset>li {display: inline-block; margin:0 4px;}
		.iconset>li:first-child {margin-left:0;}
		.iconset>li:last-child {margin-right:0;}
		.iconset.-vertical>li {display: block;}
		.iconset>div {white-space: normal;}



		/* Hover DOM controle with -hover-parent */
	.-hover-parent {position: relative;}
	.-hover {display: none; position: absolute; z-index: 1;}
	.-hover.-center-right {top: calc( 50% - 12px); right: 4px;}
	.-hover.-top-right {top: 4px; right: 4px;}
	.-hover.-top-left {top: 4px; left: 4px;}
	.-hover.-bottom-right {bottom: 4px; right: 4px;}
	.-hover.-bottom-left {bottom: 4px; left: 4px;}
		.-hover-parent:hover>.-hover {display: inline-block; background-color: #fff;}
		.ui-card.-hover-parent:hover .-hover {display: inline-block;}
		.ui-menu.-hover-parent:hover .-hover {display: inline-block; top: 0; right: 0;}
		tr:hover>td.-hover-parent>.-hover {display: inline-block; top: 8px; right: 8px; background-color: #fff;}


	button, .button {
		font-size: 1em;
		color: #050505;
		margin-right:20px;
		padding: 3px 10px;
		border-radius: 2px;
		display: inline-block;
		background:#f0f0f0;
		box-shadow: 0px 0px 0px 1px #d2d2d2 inset;
		border:none;
	}
	button:hover, .button:hover {background: #e5e5e5;}
	.button.-save {font-size:1.4em;}
	.button.-floating {margin:0; padding: 4px 10px; box-shadow: 2px 2px 3px #aaa; font-weight: normal; color: #fff; border: none; cursor: pointer; display: inline-block; background-color:#0065bd;}
	.button.-highlight {margin-left:8px; margin-right:8px;}
	.button.-disabled {color:#ccc;}
	.button .icon {margin:0 4px 0 0; float:left; vertical-align: middle; border-radius: 50%; }
	.button.-disabled .icon {opacity: 0.5;}
	.button span {display: inline-block; height: 24px; line-height: 24px;}

	.button.-floating:hover, .button.-save:hover {background-color: #286090; color: #fff; border:none;}
	.button.-circle {border-radius: 50%;padding:8px;}
	.button.-circle .icon {margin:0;}
	.button.-circle span {text-indent:-999em; text-align: left;}
	.button.-addmain {position:fixed;right:24px;bottom:24px;padding:16px;}
	.button.-addmain.-top {position:absolute; bottom: auto; top:0;}

	.floating, .button-save {color:#fff; background-color:#0065bd; border-radius: 2px; border:none; }
	.floating:hover, .button-save:hover {background-color: #286090; color: #fff;}
	.floating .icon {border-radius: 50%; background-color: #fff;}
	.circle {width:24px; height:24px; line-height:24px; background-color:#db4437; border:16px #db4437 solid; border-radius:50%;text-align:center;padding:0;}
	.circle32 {width:32px; height:32px; border-radius: 32px; line-height: 32px; font-size: 16px;}
	/* @end */

	.ui-nav {}
	.ui-nav.-sg-text-center {text-align: left;}
	.ui-nav.-sg-text-center>li {text-align: center;}
	.ui-nav.-sg-text-center>li>a>.icon {margin:0 auto; display: block;}



	/* @group menu */
	.menu {margin:0; padding: 0; list-style-type: none;}
		.menu.-horizontal {}
		.menu.-vertical>li {border-bottom:1px #fff solid;}
		.menu.-vertical a {padding:4px; display: block; background: #eee;}
		.menu.-vertical>.ui-item.-sep {padding: 8px 0; background-color: transparent;}
		.menu.-vertical>.ui-item.-sep>hr {display: none;}
		.menu a.-new {background-image: url(https://softganz.com/library/img/new.1.gif); background-position: center right; background-repeat: no-repeat;}
	/* @end */



	/* @group item */
	.item {}
	table.item {width:100%; margin:0 0 10px 0; border-collapse: collapse;border-spacing: 0; border:none; background: #fff;line-height: 1.8em; display: table;}
	table.item.-table {width:auto;}
		.item caption {margin:0;padding:4px;font-size:1.1em;color:#333;font-weight:bold; background: #f1f1f1; border-radius: 0;}
		.item tfoot {font-weight:bold;background:#e5e5e5;}
		.item tbody tr:hover {background: #fafafa;}
			.item th {padding:8px 4px; background: #f7f7f7; border-bottom:1px #fff solid; border-right:1px #fff solid; vertical-align: middle;}
			.item th:last-child {border-right: none;}
			.item.-header-nowrap th {white-space: nowrap;}
			.item td {padding:8px 4px;vertical-align:top; border-bottom:1px #f5f5f5 solid;}
			.item td.-fill {width: 100%;}
			.item .subheader {font-weight: bold; background-color: #ddd;}
			.item .subfooter {font-weight:bold; background-color: #eaeaea;}
			.item .newitem td {background-color: #E5BBA0;}
			.item.-center td, .item.-center th {text-align: center;}
			.item.-cols8 td {width:12.5%;}
			.item .col.-center {text-align: center;}
			.item .col.-left {text-align: left;}
			.item .col.-right {text-align: right;}
			.item .col.-money {text-align: center;}
			.item .col.-no {width: 1px;text-align: center;white-space: nowrap;}
			.item .col.-no:after {content:".";}
			.item .col.-amt {text-align:center;}
			.item .col.-date {text-align:center;white-space:nowrap;}
			.item .col.-nowrap {white-space: nowrap;}
			.item .col.-icons {text-align:left; width:24px;}
			.item .col.-icons.-c2 {width: 52px;}
			.item .col.-icons.-c3 {width: 72px;}
			.item .col.-icons.-c4 {width: 110px;}
			.item .col.-icons.-c5 {width: 140px;}
			.item .col.-icons.-center {text-align: center;}
		.item tbody .order {background: #eee;}

		.item .-datainput>td {padding:8px;}
		.item>tbody>tr.-cancel>td {text-decoration: line-through; color:gray;}
		.item td .form-item {margin: 0; padding: 0;}

	.item__card>thead {display: none;}
	.item__card>tbody>tr>td {display: block; float:none; width: auto;}
	.item__card>tbody>tr>td:first-child {font-weight:bold; border-bottom:none;}
	.item__card col {width:100%;}
	/* @end */



	.ui-action {list-style-type: none; margin:0; padding: 0;}
		.ui-item.-sep {list-style-type: none; height:1px; padding:2px 0;}
		.ui-item.-sep hr {height: 0; margin: 0; padding: 0; border: none; border-bottom: 1px #eee solid;}
		.ui-item.-hidden {display: none;}

	.ui-autocomplete {}
	.ui-autocomplete.ui-widget-content {margin: 4px 0 0 0; z-index:999999; list-style-type: none; padding: 0; text-align: left;}
		.ui-autocomplete .ui-menu-item {cursor: pointer;}
		.ui-autocomplete .ui-menu-item {background-color: #fff;}
		.ui-autocomplete .ui-menu-item:nth-child(2n+1) {background-color: #f9f9f9;}
		.ui-autocomplete .ui-menu-item>a {padding:8px; color: #666;}
		.ui-autocomplete .ui-menu-item>a:hover {background-color: #eee; border: none; display: block; color: #333; font-weight: normal;}
		.ui-autocomplete .ui-menu-item p {margin:0;padding: 0; color:#999; font-size:0.9em;}
		.ui-autocomplete .ui-menu-item a.ui-state-active {padding: 8px; box-shadow: none;}
		.ui-autocomplete .ui-state-active {border: none;}
		.ui-autocomplete img {display: inline-block; vertical-align: top;}
		.ui-autocomplete .email {display: inline-block; padding-left:8px;}



	.ui-card {list-style-type: none; width: 100%; margin: 0; padding: 0;}
		.ui-card>.ui-item {position: relative; margin-bottom:16px; border: 1px #efefef solid; display: block; /* box-shadow: 4px 4px 8px 2px hsla(0, 0%, 0%, 0.1); */}
		.ui-card>.ui-item:hover {}
		.ui-card>.ui-item.-link {}
		.ui-card>.ui-item.-link:hover {}
		.ui-card>.ui-item>h3 {padding: 8px;}
		.ui-card>.ui-item>p {padding: 8px;}
		.ui-card>.ui-item>.header {padding: 8px; position: relative; flex: 1 0 100%; display: flex; flex-wrap: wrap;}
		.ui-card>.ui-item>.header>.profile {flex: 1;}
		.ui-card>.ui-item>.header .poster-name {font-weight: bold;}
		.ui-card>.ui-item>.header .timestamp {display: block;}
		.ui-card>.ui-item>.header .poster-photo {margin:0 8px 8px 0; border-radius: 50%; width: 40px; height: 40px; float: left; border: 1px #e0e0e0 solid;}
		.ui-card>.ui-item>.header .nav.-header {position: absolute; top: 8px; right: 8px; display: flex;}
		.ui-card>.ui-item>.header .nav.-header>ul {display: flex;}
		.ui-card>.ui-item>.header .sg-dropbox>a {background-color: transparent;}

		.ui-card>.ui-item>.detail {padding: 8px;}
		.ui-card>.ui-item>.footer {margin: 4px 0; padding: 8px 0; font-size: 1em; font-style: normal; border-top: 1px #eee solid; text-align: left;}

		.ui-card .comment {padding: 16px 0 16px 32px; border-top: 1px #eee solid;}
		.ui-card .comment-box {padding: 0 16px 0 0; display: flex;}
		.ui-card .comment-box .form-textarea {height: 20px; border-radius: 32px; width: 100%; padding: 10px 16px; line-height: 20px;}
		.ui-card .comment .ui-item {display: flex; margin-bottom: 16px;}
		.ui-card .comment .owner-photo {width: 32px; height: 32px;}
		.ui-card .comment .owner-name {font-weight: bold;}
		.ui-card .comment .message {display: block; padding: 8px 16px; border-radius: 16px; background-color: #f5f5f5; font-size: 0.9em;}
		.ui-card .comment .message-text {margin: 0 0 0 8px;}
		.ui-card .comment .message-footer {font-size: 0.8em; text-align: right; color: #666;}
		.ui-card .nav.-card {padding: 8px 0;}
		.ui-card>.ui-item.-empty {margin: 0 !important
			; padding: 0 !important; border: none; height: 0 !important; overflow: hidden !important;}
		.ui-card .album {margin: 0; padding: 8px; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between;}
		.ui-card .album>li {width: 48%; margin: 0 2px 8px 2px; position: relative; position: relative;}
		.ui-card .album>li>a>img {width:100%;}
		.ui-card .album .iconset {position: absolute;top: 4px; right: 4px;}
		.ui-card .album .iconset .icon {border:1px #fff solid; background-color: #fff; border-radius: 50%;}
		.ui-card .album .sg-upload {margin:0 auto; display: block;}



	.ui-album {list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
		.ui-album.-justify-left {justify-content: flex-start;}
		.ui-album>.ui-item {width: 206px; padding: 0; margin: 2px; position: relative; overflow: hidden;}
		.ui-album>.ui-item::before { content: ""; float: left; padding-top: 100%; }
		.ui-album>.ui-item.-sg-128 {width: 128px; padding-top: 128px;}
		.ui-album>.ui-item .photoitem {height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
		.ui-album>.ui-item .photoitem.-wide {height: 100%; width: auto;}
		.ui-album>.ui-item .photoitem.-tall {height: auto; width: 100%;}
		.ui-album .inline-edit-item.-photodetail {position: absolute; bottom: 0; left: 0; right: 0;}
		.ui-album>.ui-item>.nav.-icons {position: absolute; top: 4px; right: 4px;}
		.ui-album>.ui-item.-upload {background-color: #ddd;}
		.ui-album>.ui-item.-upload>form {position: absolute; margin: 0; padding: 0; top: 0; left: 0; right: 0; bottom: 0;}
		.ui-album>.ui-item.-upload>form .btn {display: block; padding: calc(50% - 12px); background-color: #ddd;}
		.ui-album>.ui-item.-upload>form .btn:hover {background-color: #eee;}

	.ui-menu {width: auto; margin: 0; padding: 0; list-style-type: none;}
		.ui-menu>.ui-item>a {padding: 6px 8px; display: block;}
		.ui-menu>.ui-item>a:hover {background-color: #eee;}
		.ui-menu>.ui-item>a>.icon {margin-right:8px;}
		.ui-menu>.ui-item>h3 {background: #ddd; padding: 4px 8px;}
		.ui-menu .ui-menu {position: relative; margin:0;}
		.ui-menu .ui-menu>.ui-item:last-child {border-bottom: none;}
		.ui-menu .ui-menu>.ui-item>a {padding-left: 24px;}

	.ui-tag {margin:0; padding: 4px 0; list-style-type: none;}
		.ui-tag .ui-item {margin: 0 20px 10px 0; padding: 0 40px 0 16px; display: inline-block; border: 1px #ccc solid; border-radius:12px; position: relative;}
		.ui-tag .ui-item .icon {border-radius:50%;}
		.ui-tag .nav {position: absolute; right: 0; top: 0;}

	.ui-tab {padding:0; margin:0; list-style-type:none; text-align:left; background:#fff; border-bottom:1px #ccc solid;}
		.ui-tab>li { margin: 0 0 -1px 0; padding: 0; display: inline-block;border:1px transparent solid; border-bottom:1px #ccc solid; border-radius: 2px 2px 0 0;}
		.ui-tab>li>a {margin:0; padding:4px 10px; display:inline-block; color:#666;}
		.ui-tab>li>a:hover {background-color:#fafafa;color:#222;}
		.ui-tab>li.-active {border:1px #ccc solid; border-bottom:1px #fff solid;}
		.ui-tab>li.-active>a:hover {color:#222;background-color:#fafafa;}


	.ui-like-status {font-size: 0.8em;}
	.ui-like-status>.ui-item:nth-child(n+2)>a>span {display: none;}
	.ui-like-status .btn.-disabled {border: none; box-shadow: none; background-color: transparent; color: #ccc; pointer-events: initial; cursor: default;}
	.ui-like-status .btn.-disabled:hover {background-color: #eee;}

	/* jQuery Ui */
	.ui-datepicker .ui-datepicker-buttonpane button {border: none;}
	.ui-datepicker td .ui-state-default {}

	/* @group dropdown */
	ul.dropdown , ul.dropdown ul {margin:0;padding:0;list-style-type:none;}
	ul.dropdown li ul , ul.dropdown li ul ul , ul.dropdown li:hover ul ul , ul.dropdown li.sfhover ul ul {position:absolute;left:-999em;}
	ul.dropdown li:hover ul , ul.dropdown li.sfhover ul , ul.dropdown li li:hover ul , ul.dropdown li li.sfhover ul {left:auto;}
	/* @end */

	/* @gallery */
	.gallery {}
		.gallery>ul {margin: 0; padding: 0; list-style-type: none;}
		.gallery>ul>li {margin: 0 10px 48px 0; display: inline-block; position: relative;}
		.gallery.-fixedheight .photo {height: 200px; display: block; margin:0 auto 10px;}
		.gallery .ui-action {height:24px; line-height:24px; position: absolute; top: 10px; right: 10px;}
		.gallery .ui-action .icon {display: inline-block; border-radius: 50%;}
	/* @end */

	/* @group ribbon */
	/* reference from http://www.manageengine.com/products/applications_manager/demo.html?sm */
	.ribbon {
		height:24px;
		margin:1px 0 4px 0;
		padding: 0;
		font-size:13px;
		color: #20454A;
		text-align: left;
		border-top:1px #c2c2c2 solid;
		border-bottom:1px #c2c2c2 solid;
		background: #e5e5e5; /* Old browsers */
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
		background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
	}
	.ribbon-toolbar {padding:0 5px;clear:both;background:#eee;border:none;border-radius:7px;}
		.ribbon-toolbar form.member-zone {height:28px;display:block;margin:0;padding:5px 5px;}
		.ribbon-toolbar form.member-zone label {font-weight:normal;display:inline;}
		.ribbon-toolbar form.member-zone .form-item {width:auto;height:28px;margin:0;padding:0;float:left;display:inline-block;}
		.ribbon-toolbar form.member-zone .button {margin:0 0 0 10px;padding:1px 10px;font-size:1.05em;}
		.ribbon-toolbar form.member-zone .form-password,
		.ribbon-toolbar form.member-zone .form-text {width:80px;height:16px;margin:0 5px 0 0;padding:2px;}
		.ribbon-toolbar form.member-zone .form-password {font-size:10px;}
		.ribbon-toolbar form.member-zone .form-select {height:22px;font-size:10px;background:#fff;border:1px #666 solid;}
		.ribbon-toolbar form.member-zone ul {margin:0;padding:0;line-height:20px;}
		.ribbon-toolbar form.member-zone ul li {float:left;display:inline-block;list-style-type: square;margin:0 5px 0 5px;padding:0;}
	/* @end */

	/* @group user-menu */
	.user-menu , .user-menu ul {margin:0;padding:0;list-style-type:none;font-size:13px;line-height:24px;}
	.user-menu {position:relative;z-index:10;}
		.user-menu li.head>a>.icon.-sg-16 {padding: 4px;}
		.user-menu ul {background:#fafafa;border:1px #c2c2c2 solid;}
		.user-menu li {float:left;}
		.user-menu li a {padding:0 5px;display:block;color:#777;border-right:1px #c2c2c2 solid;}
		.user-menu li a:hover {color:#666;}
		.user-menu li a img {height:14px;padding:3px 0;}
		.user-menu li li {float:none;margin:0;padding:0;border-bottom:1px #f4f4f4 solid;}
		.user-menu li li a {padding:2px 5px;margin:0;border:none;}
		.user-menu li li a:hover {background:#eee;border-left:2px #ccc solid;padding-left:3px;}
		.user-menu li ul , .user-menu li ul ul , .user-menu li:hover ul ul , .user-menu li.sfhover ul ul {position:absolute;left:-999em; min-width: 200px}
		.user-menu li:hover ul , .user-menu li.sfhover ul , .user-menu li li:hover ul , .user-menu li li.sfhover ul {left:auto;}
	/* @end */

	/* @group code */
	.code {padding:5px; border:none; background:#222 none; color:#fff; overflow:auto; border-radius:0;}
	/* @end */

	.timestamp {font-size:0.8em;color:#999;}
	.footer {text-align:right;color:#999;font-size:0.8em;font-style:italic;}
	.package-footer {padding:0 10px 0 0;clear:both;font-size:0.8em;text-align:right;color:#999;font-style:italic;}

	.sg-info {width:16px; height:16px; margin:0 5px; background: #ccc; border-radius: 10px; display: inline-block; text-align: center; font:10px/16px Tahoma;  font-weight: normal; color:#333; cursor: pointer; vertical-align: top;}




	/* @group inline-edit-field */
	.inline-edit-field {padding: 0; margin: 0; color: #333; display: inline-block; min-width: 100px; width: auto; min-height: 1.4em; vertical-align: middle;}

	.inline-edit-field>span {display: block; padding: 5px 8px;}
	.inline-edit-field.-fill {width:-moz-available !important; width:calc(100%);}
	.inline-edit-field.-inline {padding: 0;}
	.inline-edit-field.-active {box-shadow: 0 0 0 1px #ffb685 inset; background-color:#ffffcc;}

	.inline-edit-field-disable {color:blue; display:inline-block; min-width:100px; min-height: 1.4em; border-bottom: 1px dotted #ccc; vertical-align: top;}
	.inline-edit-field.-disabled {color:#999;}
	.inline-edit-field.-primary {font-weight: bold; background-color: #f5f5f5; box-shadow: 0 0 0 1px #999 inset; border: none;}
	.inline-edit-field.-datepicker {text-align: center;}

	.inline-edit-field>span {min-height:25px;border:none;}
	.inline-edit-field.-textarea {width: 100%; padding: 0;}
	.inline-edit-field.-money {text-align: center;}
	.inline-edit-field.-numeric {text-align: center;}
	.inline-edit-field.-incomplete {color:#999;}

	.inline-edit-view.-primary {font-weight: bold;}

	.sg-inline-edit .inline-edit-field>span, .inline-edit .inline-edit-field>span {border-bottom: 1px dotted #ccc;}
	.sg-inline-edit .inline-edit-field>span:hover,
	.inline-edit .inline-edit-field>span:hover {background-color: #ffffcc; box-shadow: 0 0 0 1px #ffb685 inset;}

		.inline-edit-field .placeholder {color: #ccc; font-style: italic; font-size: 0.9em;}

		.inline-edit-field>form {display:block; margin:0; padding:0;}
			.inline-edit-field .form-text {width: calc(100% - 16px); padding: 5px 7px; font-size: 1em; border:none; box-shadow: none; display: block; border:1px #ffb685 solid;}
			.inline-edit-field .form-select {width: 100%; padding: 5px 7px; height: 36px; font-size: 1em; border:none;}
			.inline-edit-field .form-textarea {width: calc(100% - 16px); margin: 0; padding: 6px 8px; font-size: 1em;  border:1px #ffb685 solid; box-shadow: none; background: #ffffcc; border-radius: 0;}
			.inline-edit-field.-money .form-text {margin: 0; text-align: center;}
			.inline-edit-field.-numeric .form-text {text-align: center;}
			.inline-edit-field.-datepicker .form-text {text-align: center;}
			.inline-edit-field>form>div {padding: 8px; margin-right: 1px; background-color: #fff; text-align: right;}

			.inline-edit-field .form-text:focus,
			.inline-edit-field .form-textarea:focus,
			.inline-edit-field .form-select:focus {border:1px #ffffcc solid; border-bottom: 1px #4285F4 solid; border-radius: 0;}
			/* .inline-edit-field .form-textarea:focus {position: absolute; width: 90%; height: auto; z-index: 10001; left:50px; right: 50px; top:50px; bottom: 50px;} */

		.inline-edit-field.-textarea p {margin:0 0 10px 0; padding: 0; }
		.inline-edit-field.-textarea ul,
		.inline-edit-field.-textarea ol {margin:0 0 10px 0; padding: 0 0 0 32px;}


	.inline-edit-field.-hidden {display: none;}


	input[type="checkbox"].inline-edit-field,
	input[type="radio"].inline-edit-field {min-width: 1em; vertical-align: middle; border: none; box-shadow: none;}
	/* @end */



	/* @group inlineedit */
	.editable {width:auto;min-width:100px;margin:1px 3px;padding:0px 3px;cursor:pointer;display:inline-block;border:1px #DDDDDD solid;}
	.editable:hover {font-style:italic;border:1px #ccc solid;background:#fff; }

	.editable form	{display:inline;margin:0;padding:0;}
	.editable form input {font-size:1.0em;}
	.editable form textarea {height:auto;}
	.editable input {border:none;padding:0;background:#fff;}
	.editable input:hover {background:#fff; }
	.editable input:focus {outline:none; }
	.editable select {width:100%;margin:0;font-size:1em;border:none;padding:2px 0px;background:#fff;}

	.editable textarea {font-size:1em;border:none;padding:0;background:#fff;}
	.editable textarea:focus {outline:none; }

	span[cssclass="inlineedit-block"] {display:inline-block;min-width:100px;width:auto;}
	span[cssclass="inlineedit-num"] {display:inline-block;min-width:2em;width:auto;text-align:center;}
	span[cssclass="inlineedit-num"] input {text-align:center;}
	/* @end */






	.w {}
		.w-1 {min-width:10%;}
		.w-2 {min-width:20%;}
		.w-3 {min-width:30%;}
		.w-4 {min-width:40%;}
		.w-5 {min-width:50%;}
		.w-6 {min-width:60%;}
		.w-7 {min-width:70%;}
		.w-8 {min-width:80%;}
		.w-9 {min-width:90%;}
		.w-10 {width:100%; min-width:100%;}
		.w-center {text-align: center;}





	/*@group form */
	input[type="text"],input[type="number"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], .ui-autocomplete-input, textarea, .uneditable-input {padding:6px 8px; line-height: 24px; font-family: Tahoma; font-size: 1em; box-shadow: 0 0 0 1px #ccc inset; border:none;}

	.form {}
	.form.-sg-flex {margin: 0;}
	.form.-sg-flex.-nowrap {flex-wrap: nowrap;}
	.form.-hots {margin:0 0 40px 0;padding:10px;border:2px #f60 solid;background:#FCF0DB;}

	fieldset { padding:10px;margin:20px 0; border:1px #c2c2c2 solid;border-radius:3px;}

	.form-item {margin: 0; padding: 8px; position: relative;}
	.form-item.-hidden {display: none;}
	.form-item.-inlineblock {display: inline-block;}
	.form-item.-fieldset { border: 1px #ccc solid; margin-top: 32px; padding: 16px; position: relative;}

   	.form-item.-fieldset>label:first-child {display: inline-block; background: #fff; padding: 4px 8px; position: absolute; top: -24px; border: 1px #ccc solid; border-radius: 4px;}

		.form-item label {margin:5px 0;font-weight:bold;display:block;}
		.form-item .label--option {padding-left:10px; font-weight: normal; display: inline-block;}
		.form-item .option {font-weight:normal;}
		.form-item ul {margin:0 20px;padding:0;}
		.form-item .description {color:gray;font-size:.8em;margin:5px 0;}
		.form-item .form-required {color:#ff6600;}

		.form-text,
		.form-password,
		.form-textarea {padding:10px 8px; font-family: Tahoma; font-size: 1em; -webkit-appearance: none; box-shadow: 0 0 0px 1px #ccc inset; border:none;}

		.form-select {height:36px; font-family:Tahoma;font-size:1em;border-radius:4px;background-color: #fff; box-shadow: 0 0 0 1px #ccc inset; border:none;}

		.form-text.-line {box-shadow: none;border-bottom:1px #E0E0E0 solid; border-radius: 0;}
		.form-select.-line {height: 37px;box-shadow: none;border-bottom:1px #E0E0E0 solid; border-radius: 0;}
		.form-textarea.-line {box-shadow: none;border-bottom:1px #E0E0E0 solid; border-radius: 0;}

		.form-text:focus,
		.form-password:focus,
		.form-textarea:focus {background-color: #ffffcc;}

		.form-text.-line:focus,
		.form-textarea.-line:focus,
		.form-text.-select:focus {border-bottom: 2px #4285F4 solid;}

		.form-text:hover,
		.form-password:hover,
		.form-select:hover,
		.form-textarea:hover {background:#ffffcc;}

		.form-text.-hidden,
		.form-password.-hidden,
		.form-textarea.-hidden,
		.form-select.-hidden {display:none;}


		.form-text.-fill,
		.form-password.-fill,
		.form-textarea.-fill {width: calc(100% - 16px);}
		.form-select.-fill {width:100%;}
		.form-select.-fill:focus {outline:1px solid #ccc; background-color: #ffffcc;}
    .form-select.-fill:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;box-shadow: 0 0 0 1px #666 inset; outline: none;}

		.form-select.-line:focus {outline:0; border-radius: 0; background-color: #ffffcc; border-bottom:2px #4285F4 solid;}
    .form-select.-line:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;box-shadow: none; outline: none;}

		.form-text.-numeric {text-align: center;}
		.form-text.-money {text-align:center;}
		.form-text.-date {text-align:center;}
		.form-text.-time {text-align:center;}
		.form-text.-readonly {color:gray;}

		.form-text.-require,
		.form-select.-require,
		.form-textarea.-require {box-shadow: 0 0 0 1px #ffd8be inset;}

		.form-text.-highlight,
		.form-password.-highlight,
		.form-select.-highlight {padding-top:8px; padding-bottom: 8px; font-size:1.2em;}

		.form-item.-group>.form-group {position: relative; display: flex; flex-wrap: nowrap;}
		.form-item.-group>.form-group>.form-text {border-radius: 3px 0 0 3px;}
		.form-item.-group>.form-group>.input-prepend {border: 1px #ccc solid; border-right: none; border-radius: 3px 0 0 3px; background-color: #eee; display: flex; line-height: 34px;}
		.form-item.-group>.form-group>.input-prepend+.form-text {border-radius: 0;}
		.form-item.-group>.form-group>.input-prepend>span {padding: 0 4px;}
		.form-item.-group>.form-group>.input-prepend>span:not(:last-child) {border-left: 1px #ccc solid;}
		.form-item.-group>.form-group>.input-prepend a,
		.form-item.-group>.form-group>.input-prepend button {padding: 4px 0; line-height: 24px; display: block;}
		.form-item.-group>.form-group>.input-prepend a.-sg-16 {padding: 9px 0;}

		.form-item.-group>.form-group>.input-append {border: 1px #ccc solid; border-left: none; border-radius: 0 3px 3px 0; background-color: #eee; display: flex; line-height: 34px;}
		.form-item.-group>.form-group>.input-append>span {padding: 0 4px;}
		.form-item.-group>.form-group>.input-append>span:not(:last-child) {border-right: 1px #ccc solid;}
		.form-item.-group>.form-group>.input-append>*>a,
		.form-item.-group>.form-group>.input-append>*>button {margin: 0; padding: 4px 0; line-height: 24px; display: block; border: none; box-shadow: none; background-color: transparent;}
		.form-item.-group>.form-group>.input-append a.-sg-16 {padding: 9px 0;}

		.form-item .editor {margin:1px 0;border:1px gray solid;background-color:#D6D3CE;}
		.form-item .editor img {cursor:pointer;}

		.options-group {display: block;}
		.options-group-label {display: block; font-weight: bold;}
		.option.-inline {display: inline;}

	.form.-inlineitem .form-item {display: inline-block; vertical-align: top;}
	.form.-inlineitem .form-item.-hidden {display: none;}
	.form.-inlineitem .form-item label {display: inline-block;}
	/* @end */

	.has-icons-right .icons.is-right {position: absolute; right: 0; top:0;}
	.form-item.has-icons-right .icons.is-right {top: 29px; }

	/*** Not work
	.form-select:not(.is-multiple):not(.is-loading)::after {
		border: 3px solid #000;
		border-radius: 2px;
		border-right: 0;
		border-top: 0;
		content: " ";
		display: block;
		height: .625em;
		margin-top: -.4375em;
		pointer-events: none;
		position: absolute;
		top: 50%;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transform-origin: center;
		transform-origin: center;
		width: .625em;
	}
	.form-select:not(.is-multiple):not(.is-loading)::after {
			border-color: #3273dc;
			right: 1.125em;
			z-index: 4;
		}
	.form-select.is-primary:not(:hover)::after {
		border-color: #00d1b2;
	}
	*/

	/* @group tabs */
	div.tabs {padding: 2px; border: 1px #D3D3D3 solid; border-radius:3px; }
	ul.tabs {padding:0; margin:0; list-style-type:none; text-align:left; background:#fff; border-bottom:1px #ccc solid;}
		ul.tabs>li { margin: 0 0 -1px 0; padding: 0; display: inline-block;border:1px transparent solid; border-bottom:1px #ccc solid; border-radius: 2px 2px 0 0;}
		ul.tabs>li>a {margin:0; padding:4px 10px; display:inline-block; color:#666;}
		ul.tabs>li>a:hover {background-color:#fafafa;color:#222;}
		ul.tabs>li.-active {border:1px #ccc solid; border-bottom:1px #fff solid;}
		ul.tabs>li.-active>a:hover {color:#222;background-color:#fafafa;}
	/* @end */

	/* @group tabs_Input */
	div.tabs_input {display:none;}
	/* @end */






	/* @group top-bar */
	.top-bar {height:30px; z-index: 1001; background:#7E7E7E; position:relative;}
		.top-bar ul {padding:0; margin:0; font-size:12px; line-height:30px; list-style-type:none; white-space:nowrap; list-style-image:none;}
		.top-bar ul.top-bar-left {}
		.top-bar ul.top-bar-right {width:auto; position:absolute; right:0;}
		.top-bar li {float: left; list-style-image:none;}
		.top-bar a {padding:0px 15px; text-decoration:none; color:#fff; font-weight:normal; display: block;}
		.top-bar a:link , .top-bar a:visited { color:#fff;}
		.top-bar a:hover {color:#cdcd00; text-decoration:none; background:#7E7E7E;}
		.top-bar ul ul {width:auto; margin: -1px 0 0 0; padding: 0; border:1px solid #666; border-top:none; text-align:left; font-size:12px; line-height:22px; background:#fff; line-height:20px; position: absolute; left: -999em; overflow:hidden; border-radius:0 0 7px 7px;}
		.top-bar ul li ul , .top-bar ul li ul ul , .top-bar ul li:hover ul ul , .top-bar ul li.sfhover ul ul {position:absolute;left:-999em;}
		.top-bar ul li:hover ul , .top-bar ul li.sfhover ul , .top-bar ul li li:hover ul , .top-bar ul li li.sfhover ul {left:auto;}
		.top-bar ul ul li {float:none;border-bottom:1px #fff solid;}
		.top-bar ul li:hover ul , .top-bar ul li.sfhover ul { left: auto; }
		.top-bar ul ul a {padding:2px 15px; color:#4c7aae; }
		.top-bar ul ul a:link , .top-bar ul ul a:visited { color:#4c7aae;}
		.top-bar ul ul a:hover { color:#fff;background:#75a8bf none; }
	/* @end */






	/* @group shortcut */
	.shortcut { width:auto;margin:0 5px 0 0; padding:0; list-style-type:none; display:block;font-size:8pt;border-radius:7px;}
		.shortcut li { margin:0 5px; float:left; display:inline;}
		.shortcut li a {text-indent:-9999px;display:block;background-repeat:no-repeat;line-height:14px;}
		.shortcut li a.quote { width:100px; height:22px; text-indent:25px; background-image:url(https://softganz.com/library/img/richtext/quote.gif);line-height:22px;}
		.shortcut li a.reply { width:100px; height:22px; text-indent:25px; background-image:url(https://softganz.com/library/img/edit-doc.png);line-height:22px;}
		.shortcut li a.edit { width:14px; height:14px; background-image:url(https://softganz.com/library/img/edit.png);}
		.shortcut li a.delete { width:14px; height:14px; background-image:url(https://softganz.com/library/img/delete.png);}
		.shortcut li a.disable { width:16px; height:16px; background-image:url(https://softganz.com/library/img/edit-delete.png);}
	/* @end */






	.search-box {height:40px; margin:0; padding:0; position:relative; overflow:hidden; box-shadow: 0 0 0 1px #999 inset; border:none; border-radius: 4px; display: flex; flex-wrap: nowrap;}
		.search-box .form-item {padding: 0; margin: 0;}
		.search-box .form-item:first-child {flex: 1 0 1%;}
		.search-box input[type="text"] {width: calc(100% - 16px); height:100%; font-size:1.0em; margin:0; padding:0 8px; border:none; box-shadow: none; display: block; opacity: 0.5; position: relative; top:0; left: 0; right: 0; bottom: 0;}
		.search-box .button {height:100%; height: calc(100% - 2px); margin: 0; padding: 0 4px; position: absolute; top: 1px; right: 1px; bottom: 1px; color: #300; font-size: 1em; font-weight: normal; background-color:#F0F0F0; border: none; border-left: 1px #ccc solid; border-radius: 0 4px 4px 0; box-shadow: none;}
		.search-box button {height:100%; height: calc(100% - 2px); margin: 0; padding: 0 4px; position: absolute; top: 1px; right:1px; bottom: 1px; border: none; background-color: transparent; box-shadow: none; border-radius: 0 4px 4px 0; background-color:#F0F0F0;}





	/* sg-dropbox : dropdown box on click or hover */
	.sg-dropbox {position: relative; background-color: transparent; border: none; box-shadow: none;}
		.sg-dropbox .sg-dropbox--wrapper {display: block; max-width: 400px; overflow: auto;}
		.sg-dropbox.hover:hover .sg-dropbox--wrapper {display: block;}
		.sg-dropbox.click .sg-dropbox--wrapper {margin-top: 4px;}
		.sg-dropbox.leftside .sg-dropbox--wrapper {right:6px; left:auto;}
		.sg-dropbox>a {display: inline-block;padding:4px; color:#ccc; border-radius: 50%; box-shadow: 0 0 0 1px #fff inset; border:none; background-color: #f5f5f5;}
		.sg-dropbox>a:hover {color:#999; background-color: #fff;}
		.sg-dropbox.-atright>a {}
		.sg-dropbox .sg-dropbox--wrapper { padding:11px 0 8px; display: none; position: absolute; z-index:100; left:-10px; right:auto;}
		.sg-dropbox ul {margin:0; padding:0; list-style-type: none;}
			.sg-dropbox .ui-item a {display: block; padding: 4px 0; color:#666; white-space: nowrap;}
			.sg-dropbox .ui-item a:hover {color:#999; background: #f5f5f5;}
			.sg-dropbox a.-disabled {color:#ccc;}
			.sg-dropbox a.-disabled .icon {opacity: 0.4;}
			.sg-dropbox .sg-dropbox--content>ul {padding: 0;}
			.sg-dropbox .sg-dropbox--content>ul>li {padding: 0;}
			.sg-dropbox .sg-dropbox--content>ul>li>a {padding: 4px 24px 4px 16px; white-space: nowrap; display: block;}
			.sg-dropbox .sg-dropbox--content>ul>li>a>.icon {margin-right: 4px;}
			.sg-dropbox .sg-dropbox--content>ul>li>.iconset {padding: 0;}
			.sg-dropbox .sg-dropbox--content>ul>li>.iconset>a {padding: 0;}
			.sg-dropbox .sg-dropbox--content>ul>li.-sep {height: 4px; margin: 0; padding: 3px 0 0 0;}
			.sg-dropbox .sg-dropbox--content>.ui-action>.ui-item.-sep {width: auto;}

		.sg-dropbox .sg-dropbox--arrow {
			height: 8px;
			width: 12px;
			background-image: url('https://softganz.com/library/img/iconset.png');
			background-repeat: no-repeat;
			background-size: auto auto;
			background-position: -4px -1235px;
			right: auto;
			left: 10px;
			top:1px;
			position: absolute;
			text-indent: -999em;
		}
		.sg-dropbox.leftside .sg-dropbox--arrow {left: auto; right: 6px;}
		.sg-dropbox .sg-dropbox--content {margin-top: -4px; padding: 0; border: 1px #D2D2D2 solid; background-color: #f5f5f5; opacity: 1; box-shadow: 4px 4px 4px #aaa; text-align: left; border-radius: 4px 4px 2px 2px;}
		.sg-dropbox form {padding:0 10px;}

	.sg-dropbox.-atright {position: absolute; right: 4px; top:4px;}






	/* @group navigator */
	.nav {}
		.nav--header {display: none;}
		.nav ul {margin:0;padding:0;list-style-type:none;}
		.nav .-sg-flex>* {margin-left: 0; margin-right: 0;}
		/*
		.nav>ul span {display:inline-block;vertical-align: top;white-space: nowrap;}
		.nav>ul>li {padding:0;display:inline-block;white-space: nowrap;}
		.nav>ul>li>a {padding:0px 5px; line-height: 24px; display:block;white-space:nowrap;}
		.nav>ul>li:hover>a {}
		.nav>ul a>img {width:24px;height:24px;margin:0 5px 0 0;display:block;float:left;margin-left:-2px;}

		.nav>ul ul {min-width:200px; margin:0; padding:0; list-style-type:none; position:relative; border-radius:5px; border-top:2px transparent solid; border-bottom:1px #D3D3D3 solid;}
		.nav>ul ul>li {margin:0;padding:0px;background:#EBEBEB; border:1px #D3D3D3 solid;border-bottom:#ccc 1px solid;border-top:#fff 1px solid;}
		.nav>ul ul>li:first-child {border-top:1px #D3D3D3 solid; border-radius:5px 5px 0 0;}
		.nav>ul ul>li:last-child {border-bottom: none; border-radius:0 0 5px 5px;}
		.nav>ul ul>li>a {margin:0; padding:3px 20px; border:none; font-size:1em; display:block;}
		.nav>ul ul>li:hover>a {background-color:#DBDBDB;}
		.nav>ul ul, .nav>ul li:hover ul ul, .nav>ul li:hover ul ul ul, .nav>ul li.sfhover ul ul, .nav>ul li.sfhover ul ul ul {position:absolute;left:-999em;}
		.nav>ul li:hover ul , .nav>ul li.sfhover ul {left:auto;}
		.nav>ul ul li:hover ul , .nav>ul ul li.sfhover ul , .nav>ul ul li li:hover ul , .nav>ul ul li li.sfhover ul {left: 100px;margin-top: -10px;width: 240px;}
		.nav>ul form {margin:0;padding:0;}
		*/
	/* @end */

	/* @group navigator of web site */
	.nav.-main {}
		.nav.-main {height:48px; margin:0; position: relative; z-index:1100;}
		.nav.-main .-header {display: none;}
		.nav.-main .menu.-main {height:48px;}
		.nav.-main .menu.-main li.-has-sub {}
		.nav.-main .menu.-main li.-has-sub:after {content : ''; position: absolute; margin-top: -24px; left: auto; right: 8px; width: 0px; height: 0px; display: inline-block; border-bottom: 4px solid transparent; border-top: 4px solid transparent; border-left: 4px solid #2f2f2f; font-size: 0px; line-height: 0px;}
		.nav.-main .menu.-main>li {display: block; float: left;}
		.nav.-main .menu.-main>li>a {padding:0 9px;line-height:48px; color: #F4F9FF;display:block;}
		.nav.-main .menu.-main>li:hover>a {background-color: #006DF2;}
		.nav.-main .menu.-main ul {border-radius:0; border:none;background: #eee; box-shadow: 2px 2px 2px #aaa; height: auto; min-width: 200px;}
		.nav.-main .menu.-main ul>li {margin:0;padding:0px;background:transparent;border-bottom:#ccc 1px solid;}
		.nav.-main .menu.-main ul>li:first-child {border-top:none; border-radius:0;}
		.nav.-main .menu.-main ul>li:last-child {border-bottom:#ccc 1px solid; border-radius:0;}
		.nav.-main .menu.-main .profile-photo {width:28px;height:28px;margin:0 5px 0 0; padding:2px; display:inline-block; background:#ddd; border-radius: 50%; border:none; vertical-align: middle;}
		.nav.-main .menu.-sub>li>a {padding: 10px; display: block;}
		.nav.-main .menu.-sub>li.sep {height:4px;}

		.nav.-main .menu.-main ul {position: absolute; left: -999em;}
		.nav.-main .menu.-main li:hover {position: relative;}
		.nav.-main .menu.-main ul>li:hover>a {background-color:#DBDBDB;}
		.nav.-main .menu.-main li:hover>ul {left: 100px; margin-top: -10px;}
		.nav.-main .menu.-main>li:hover>ul {left: 0; margin-top:0;}
		.nav.-main .menu.-main li.-left-side:hover>ul {left: auto; right: 100px;}
		.nav.-main .menu.-main>li.-left-side:hover {position: relative;}
		.nav.-main .menu.-main>li.-left-side:hover>ul {right: 0;}

		.nav.-main .menu.-main .icon.-person {border-radius: 50%; background-color: #e5e5e5;margin-right: 8px;}
		.nav.-main .signform {margin:0; padding: 16px 16px 0 16px;}
		.nav.-main .signform .form-item {padding: 0;}
		.nav.-main .signform .form-item #edit-username,
		.nav.-main .signform .form-item #edit-password {text-align: center;}
		.nav.-main .signform .form-item .form-select {background: #fff; text-align: center;}
		.nav.-main .signform .form-item .btn.-primary {width: 100%;}
		.nav.-main .signform a {display: block; padding: 8px; text-align: center;}


	/* @group navigator of module */
	.nav.-module {position: relative;display:block;overflow-x: scroll; background-color: #eee;}
		.nav.-module .ui-nav {display: inline-block;}
		.nav.-module .ui-item {padding:0;display:inline-block;white-space: nowrap;}
		.nav.-module .ui-item a {padding:8px 6px; display: block;}

	/* @group navigator of submodule */
	.nav.-submodule {padding: 0;position: relative;display:block; background-color: #dedede;}
		.nav.-submodule::-webkit-scrollbar {width: 0 !important; height:0;}
		.nav.-submodule .ui-nav {margin:0; display: inline-block;}
		.nav.-submodule .ui-nav.-toright {display:inline-block; top:0; position: absolute; right:0;}
		.nav.-submodule .ui-nav.-toright>li {position: relative;}
		.nav.-submodule .ui-nav .ui-item:not(.-sep) {padding:0;display:inline-block;white-space: nowrap;}
		.nav.-submodule .ui-nav .ui-item a {padding:8px; display: block; line-height: 20px;}
		.nav.-submodule .ui-nav .ui-item .button {padding:2px 10px;}
		.nav.-submodule>.ui-nav>.ui-item.-sep {width: 4px; height: 100%; margin: 0; padding: 0; display: inline-block;background-color: rgba(255,255,255,0.5); border: none;}
		.nav.-submodule>.ui-nav>.ui-item.-sep>hr {display: none;}
		.nav.-submodule .sg-dropbox .ui-action>.ui-item {display: block;}
		.nav.-submodule .sg-dropbox>a {padding: 4px;}
		.nav.-submodule .ui-nav.-sg-text-center a {padding: 4px 8px;}


	/* @group navigator of page */
	.nav.-page {margin: 0; padding: 2px 0; position: relative;}
		.nav.-page .ui-nav {display: inline-block;}
		.nav.-page .ui-nav.-atright {display:block; text-align: right;}
		.nav.-page .ui-item {padding:0;display:inline-block;white-space: nowrap; vertical-align: middle;}
		.nav.-page .ui-item>.btn {margin-right: 4px;}
		.nav.-page .ui-item>a:not(.btn) {padding:4px 8px; display: block;}
		.nav.-page .ui-item>form {margin:0;}
		.nav.-page .sg-dropbox.-atright>a {width:24px; height:24px; padding: 4px; display: inline-block; background-color: #eee; border-radius: 50%;		box-shadow: 0px 0px 0px 1px #d2d2d2 inset;}
		.nav.-page .sg-dropbox>a:hover {background-color: #eee;}
		.nav.-page .sg-dropbox>a>.icon:hover {background-color: transparent;}
		.nav.-page .sg-dropbox .ui-item {display: block;}
		.nav.-page .sg-dropbox .ui-item.-sep {padding:8px 0;}
		.nav.-page .sg-dropbox .ui-item>a:hover {background-color: #eee;}

	.nav.-card {position: relative;}
	.nav.-card>ul {display: flex; justify-content: space-around;}
	.nav.-card .sg-dropbox>a {padding: 6px; background-color: transparent;}

	.nav.-ver {margin:0;padding:0;}
		.nav.-ver .ui-item {padding:0;}
		.nav.-ver .ui-item>a {padding:8px 10px; display: block; margin: 0;}
		.nav.-ver .ui-item>a:hover {background: #f5f5f5;}
		.nav.-ver li ul {margin: 0; padding: 0; list-style-type: none;}
		.nav.-ver li ul a {margin: 0; padding: 8px 0 8px 20px; display: block;border-bottom: #f0f0f0 1px solid;}

	.nav.-icons {background-color: transparent; border-radius: 2px; padding: 0; list-style-type: none;}
		.nav.-icons>ul {display: flex;}
		.nav.-icons.-vertical>ul>li {display: block;}
		.nav.-icons a {margin: 0 4px 0 0; display: inline-block;}
		.nav.-icons a:hover {background-color: #f5f5f5;}
		.nav.-icons.-btn a {background-color: #f5f5f5; border-radius: 4px;}
		.nav.-icons.-btn a:hover {background-color: #eee;} 
		.nav.-icons.-vertical a {margin:0 0 4px 0;}
		.nav.-icons>ul>li:last-child>a {margin-right:0; margin-bottom:0;}
		.nav.-icons>span>span:last-child>a {margin-right:0; margin-bottom:0;}

		.nav.-icons .ui-item>a.btn {margin-right:4px;}
		.nav.-icons._text-center a {display: block;}
		.nav.-icons._text-center .icon {display: block; margin: 0 auto;}
		.nav.-icons._text-center span {display: block;}

	.nav.-btn>.ui-action>.ui-item {padding-right: 4px;}

	.nav.-step {margin: 16px 0px; position: relative;}
	.nav.-step>hr {margin: 0; padding: 0; position: absolute; top: 16px; z-index: 0; left: 30px; right: 30px;}
	.nav.-step .ui-step {display: flex; justify-content : space-between; text-align: center; position: relative; z-index: 2;}
	.nav.-step .ui-item {}
	.ui-step span {display: block;}
	.ui-step .step-num {display: block; width: 32px; height: 32px; border: 1px #ccc solid; line-height: 32px; border-radius: 50%; margin: 0 auto 8px; font-weight: bold; background: #fff;}
	.ui-step>.ui-item.-done .step-num {background: green; color: #fff; border: 1px green solid;}
	
	.nav .form-item {margin: 0; padding: 0 8px 0 0;}
	.nav .page-nv {margin: 0;}
	/* @group navigator wrapper */
	.navbar {margin:0; padding:0; position:relative;}
		.navbar .nav {display: inline-block;}
	/* @end */



	/* @group toolbar */
	.toolbar {position: relative;}
		.toolbar h2 {padding:10px; background-color: #ccc;}

	.toolbar.-report {}
		.toolbar.-report .-filter {display: flex; margin-bottom: 8px;}
			.toolbar.-report .-filter>* {display: block;}
			.toolbar.-report .-filter .form-text {padding: 0 8px;}
			.toolbar.-report .-filter .-text {background-color: #eee;padding: 6px; border-radius: 4px 0 0 4px; border: 1px #ddd solid; white-space: nowrap;}
			.toolbar.-report .-filter .-select {margin: 0 16px 0 0; padding: 4px; border-radius: 0 4px 4px 0; border: 1px #ddd solid; border-left: none; flex: 1; display: flex;}
			.toolbar.-report .-filter .-select>.-item {display: flex; flex-wrap: wrap; flex: 1;}
			.toolbar.-report .-filter .-select>.-item>span {padding: 2px 0 2px 6px; margin: 0 8px 2px 0; background-color: #eee; border-radius: 4px; }

		.toolbar.-report .-group {position:relative; height: 60px; margin: 0 0 9px 0; display: flex; border: 1px #ccc solid; border-bottom: 2px #dddddd solid; border-radius: 4px;}
			.toolbar.-report .-group>* {display: block;}

			.toolbar.-report .group-nav {flex:0 0 29px; width: 29px; margin:0; padding:0; height:60px; text-align:center; font-size:20px; line-height:60px; z-index: 1; background-color: #fff;}
			.toolbar.-report .group-nav.-left {left:4px; border-radius: 4px 0 0 4px; border-right: 1px #dddddd solid;}
			.toolbar.-report .group-nav.-left:focus {outline:none;}
			.toolbar.-report .group-nav.-right {right:4px; border-left: 1px #dddddd solid; border-radius: 0 4px 4px 0; position: absolute; right: 0;}
			.toolbar.-report .group-nav.-right:focus {outline:none;}
			.toolbar.-report .group-nav .icon {margin-top: 18px;}

			.toolbar.-report .-group>ul {flex: 1; height: 60px; display: flex; flex-wrap: nowrap; margin: 0; padding:0; position:relative; list-style-type: none;}
			.toolbar.-report .-group>ul>li {width: 90px; height: 100%; border-right: 1px #dddddd solid; position: relative; display: flex;  align-items: center;}
			.toolbar.-report .-group>ul>li:last-child {}
			.toolbar.-report .-group>ul>li:hover {border-bottom:2px #FF7D13 solid; background-color: #eee;}
			.toolbar.-report .-group>ul>li.-active {border-bottom:2px #66BD29 solid; background-color: #f5f5f5;}
			.toolbar.-report .-group>ul>li.-active:hover {background-color: #eee;}

			.toolbar.-report .-group .-group-name {height: 100%; flex: 1; padding-right: 24px;}
			.toolbar.-report .-group .-group-name>a { display: flex; align-items: center; height: 100%;padding: 0px 0 0 15px; font-size: 0.9em; background: transparent; color: #666;}
			.toolbar.-report .-group .-group-name>a:hover {color:#444; border:none;}

			.toolbar.-report .-group .sg-dropbox {flex: 0 0 24px; position: absolute; top: 0; right: 0; bottom: 0;}
			.toolbar.-report .-group .sg-dropbox>a {height: 100%; width: 24px; border-radius: 0; display: block; padding: 0; box-shadow: none; background-color: transparent;}
			.toolbar.-report .-group .sg-dropbox>a:hover {background-color: #f3f3f3;}
			.toolbar.-report .-group .sg-dropbox>a>.icon {position: absolute; top: calc( 50% - 12px); right: 0;}
			.toolbar.-report .-group .sg-dropbox .sg-dropbox--content {width: 200px; height: 240px; font-size: 0.85em; background-color: #fff;}
			.toolbar.-report .-group .sg-dropbox.rightside .sg-dropbox--wrapper {left: -6px;}
			.toolbar.-report .-group.-no-name .sg-dropbox.rightside .sg-dropbox--wrapper {left: 0;}

			.toolbar.-report .-group .sg-dropbox .nav {height: 24px; padding: 8px;}
			.toolbar.-report .-group .sg-dropbox .nav a {padding: 0 8px;}
			.toolbar.-report .-group .sg-dropbox .nav.-footer a {padding: 0 32px;}
			.toolbar.-report .-group .sg-dropbox label {padding: 4px 0; display: flex;}
			.toolbar.-report .-group .sg-dropbox label:hover {background-color: #eee;}

			.toolbar.-report .-group.-no-name .sg-dropbox {height: 100%; flex: 1 0 100%; position: relative;}
			.toolbar.-report .-group.-no-name .sg-dropbox>a {width: 100%; height: 100%; display: flex; align-items: center; position: relative;}
			.toolbar.-report .-group.-no-name .sg-dropbox>a>span {padding: 0 24px 0 8px; color: #666; font-size: 0.9em;}
			.toolbar.-report .-group.-no-name .sg-dropbox>.icon {position: relative;}

			.toolbar.-report .-group .-checkbox {height: calc(240px - 80px); overflow: auto;}
			.toolbar.-report .-group .-check-count {flex: 1; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 0.7em; color: #bbbbbb; pointer-events: none;}
			.toolbar.-report .-group .-check-count>* {display: inline-block;}
			.toolbar.-report .-group .-check-count>.-amt {padding-right: 4px;}

		.toolbar.-report .-options {display: flex;}
			.toolbar.-report .-options>ul {display: flex; flex: 1; list-style-type: none; margin: 0; padding: 0; align-items: center; border: 1px #ccc solid; border-radius: 4px;}
			.toolbar.-report .-options>ul>li {border-right: 1px #ccc solid; padding: 2px;}
			.toolbar.-report .-options>ul>li:last-child {border-right: none;}

		/*
		.toolbar.-report .-group>ul {width:2000px;height:60px;margin:0;padding:0;float:left;background:#f2f2f2;border-top:1px #cccccc solid;border-bottom:2px #cccccc solid;position:relative;list-style-type: none;}
		.toolbar.-report .-group>ul>li {width:91px;height:100%;float:left;border-top:1px #cccccc solid;border-bottom:2px #cccccc solid;border-left:1px #dddddd solid;border-right:none;border-top:none;position:relative;}
		*/
		/*
		.toolbar.-report .-group>ul {width:2000px;height:60px;margin:0;padding:0; background:#f2f2f2;border-top:1px #cccccc solid;border-bottom:2px #cccccc solid;position:relative;list-style-type: none;}
		.toolbar.-report .-group>ul>li {width:91px;height:100%;float:left;border-top:1px #cccccc solid;border-bottom:2px #cccccc solid;border-left:1px #dddddd solid;border-right:none;border-top:none;position:relative;}
		*/

	/* @end */







	.array-value.-inline>li {display: inline-block; padding:0 4px; border: 1px #eee solid; margin-bottom: 2px;}

	.arrow-right {
		width:0px;
		height:0px;
		display:inline-block;
		border-bottom:5px solid transparent;  /* left arrow slant */
		border-top:5px solid transparent; /* right arrow slant */
		border-left:5px solid #2f2f2f; /* bottom, add background color here */
		font-size:0px;
		line-height:0px;
	}

	.arrow-top {
		width:0px;
		height:0px;
		display:inline-block;
		border-bottom:5px solid transparent;  /* left arrow slant */
		border-top:5px solid transparent; /* right arrow slant */
		border-left:5px solid #2f2f2f; /* bottom, add background color here */
		font-size:0px;
		line-height:0px;
	}



	.listing {margin:0; padding: 0; list-style-type: none;}
		.listing .-title {font-size:1.3em;}
		.listing .-logo {display: block; margin:0 auto;}

		.listing>li {height:220px; overflow: hidden;}
		.listing.-grid {text-align: center;}
		.listing.-grid>li {margin:0 0 16px 0; text-align: center; border:1px #ddd solid;}
		.listing.-grid .-title {}

		.listing.-view {}
		.listing.-view>li {margin:0 0 16px 0; border:1px #ddd solid;}
		.listing.-view .-header {height:50%; text-align: center;}
		.listing.-view .-info {padding:10px; margin: 0;}





	.fileinput-button {
		position: relative;
		overflow: hidden;
		margin:0;
		padding: 6px 16px;
		display: inline-block;
		position: relative;
	}
		.fileinput-button input {
			width:100%;
			height:100%;
			position: absolute;
			top: 0;
			right: 0;
			margin: 0;
			opacity: 0;
			direction: ltr;
			cursor: pointer;
		}

	.hover-icon {display: none; position: relative; white-space: nowrap;}
	.hover-icon.-tr {}
	.hover-icon.-li {}
	tr:hover .hover-icon.-tr {display: inline-block;}
	li:hover .hover-icon.-li {display: inline-block;}

	li.hover {position: relative; display: inline-block; padding-right:40px;}
	li.hover .hover {display: none; position: absolute; right:0;}
	li.hover:hover .hover {display: inline-block;}

	.hover--menu {display: none; position: absolute;}
	.hover--menu.-relative {position: relative;}
	tr:hover .hover--menu {display: inline-block;}




	.sg-chart {min-height: 200px;}
		.sg-chart h3 {font-family:Tahoma; font-size:1em; color:#999;}
		.sg-chart .item {color:#999;}

	.photocard {margin:0; padding:0; list-style-type:none;}
		.photocard>li {height: 300px; margin:0 4px 4px 0; float: left; overflow:hidden; position: relative; display: inline-block;}
		.photocard .photoitem {width:auto; height:100%;}
		.photocard .ui-action {position: absolute; top:4px; right:4px;}
		.photocard .ui-action>a {background: #fff; border-radius: 50%; display: inline-block;border:#fff 1px solid}
		.photocard .ui-action>a:hover .icon {border-radius: 50%; background-color: red;}





	.sidebar {}
		.sidebar .header {background-color: #b5b5b5; text-align: center;}
		.sidebar .header>h3 {height: auto; line-height: 1.8em; padding: 0; color: #333;}
		.sidebar h4 {padding: 4px 10px; background-color: #ccc; color: #333;}
		.sidebar select {width:100%;overflow:hidden;}
		.sidebar .button {width:100%;}
		.sidebar .form-select {margin:0 0 10px 0;}
		.sidebar .box {padding: 10px; margin:0 0 20px 0; background:#dadada;}
		.sidebar form {margin:4px;padding:0;}
		.sidebar .navbar {margin:0;padding:0;}
		.sidebar .navbar__menu {margin: 0; padding: 0; list-style-type: none;background: #fff;}
		.sidebar .navbar__menu>li>a {margin: 0; padding: 8px 10px; display: block; border-bottom: #f0f0f0 1px solid;}
		.sidebar .navbar__menu>li>a:hover {background: #f5f5f5;}
		.sidebar .navbar__menu>li ul {margin: 0; padding: 0; list-style-type: none;}
		.sidebar .navbar__menu>li ul a {margin: 0; padding: 8px 0 8px 20px; display: block;border-bottom: #f0f0f0 1px solid;}



	.login {margin:20px; border:1px #ccc solid; padding: 10px; background-color:#F5F5F5;}
		.login .-form {margin-bottom: 64px;}
		.login .-info {}
		.login h3 {margin-bottom: 16px; font-size: 1.3em;}

		.signform .form-item {margin-bottom: 16px; position: relative;}
		.signform label {position: absolute; margin-left: 8px; color: #666; font-style: italic; font-size: 0.9em; font-weight: normal;}
		.signform .form-text, .form.signform .form-password {padding-top: 24px;}

		.login .member-zone {padding: 10px; margin-bottom: 0; border-bottom:1px #ccc solid;}
		.login .member-zone .form-item {padding: 4px;}
		.login .member-zone .form-item #edit-username,
		.login .member-zone .form-item #edit-password {width: 100%; width: calc(100% - 16px); padding:8px; text-align: left;}
		.login .member-zone .form-item .form-select {width: 100%; background: #fff; text-align: left;}
		.login .member-zone .form-item .btn.-fill {width: 100%; padding:8px 0; }
		.login .member-zone .form-item .button-signin:hover {background-color: #286090; color:#fff;}
		.login h5 {margin:0;padding:16px 0 0 0;border-top:1px #ccc solid;clear:both;}
		.login .btn.-fill {width: 100%; padding: 8px 0;}




	.page-nv {margin:8px 0;padding: 4px 0;text-align:right;font-size:10pt;}
		.page-nv span {padding: 0em;display: inline;}
		.page-nv .page-current, .page-nv a { padding: 2px 8px; margin: 0 2px 0 0; font-weight:bold;}
		.page-nv .page-current {}
		.page-nv .page-items {font-weight:bold;font-style:italic;margin:0 8px 0 0;}




	/* @group profile */
	.profile-photo { width: 32px; height: 32px; margin: 0 8px 0 0; display: inline-block; border-radius: 50%; overflow: hidden; border: 2px #eee solid; vertical-align: middle;}
	.profile-photo.-sg-big {margin: 0px auto 32px; width: 196px; height: 196px; display: block; }

	.profile-content img.member-photo {
		width:200px;
		height:200px;
		margin:0 10px;
		display:block;
		float:right;
	}
	ul.profile-list {
		margin:0;
		padding:0;
		list-style-type:none;
		list-style-image:none;
	}
	ul.profile-list h3 {
		font-size:1em;
		margin:5px 0;
	}
	ul.profile-list li {
		width:33.33%;
		display:inline;
		float:left;
		margin:20px 0;
		padding:0;
		list-style-type:none;
		list-style-image:none;
		text-align:center;
	}
	ul.profile-list li img {
		width:96px;
		height:96px;
		margin:10px auto;
		padding:0;
		display:block;
	}
	/* @end */

	/* @group topic-list */
	.topic-list .title {font-size:1.4em; font-weight:normal;}

	.topic-list .timestamp {margin:0; padding:5px 10px; font-style:italic;}
	.topic-list .summary {margin:0; padding:0 0 0 10px;}
	.topic-list .image {width:180px; margin:0 15px 10px 10px; float:left;
		display:block;}
	.topic-list .footer {margin:0 0 20px 0; padding:0 20px 5px 0; font-size:0.875em; font-style:italic; text-align:right; border-bottom:1px #eee solid;}

	ul.topic-list .title {padding:0;margin:0;font-size:0.9em;font-weight:normal;display:inline;}
	ul.topic-list .timestamp {padding:0;font-size:0.8em;font-style:normal;}

	table.topic-list {width:100%;}
	table.topic-list caption, table.topic-list thead th {
		padding:4px;
		background-color:#f1e6b8;
		font-weight:bold;
		text-align:center;
	}
	table.topic-list thead th {white-space:nowrap;}
	table.topic-list thead th.title {width:100%;}
	table.topic-list tr.odd td {background-color:#fffdf7; }
	table.topic-list tr.even td {background-color:#fcf7e4; }
	table.topic-list tr td.title {font-size:1em;}
	table.topic-list tr td.title a {
		padding:5px 20px;
		display:block;
		font-weight:bold;
	}
	table.topic-list td.title a:hover {}
	table.topic-list tr.sticky td {background-color:#f1e6b8;}
	table.topic-list tr.sticky td.title {background:#f1e6b8 url(https://softganz.com/library/img/sticky.gif) right center no-repeat;}
	table.topic-list tr td.title-status-normal a {background:transparent url(https://softganz.com/library/img/format-justify-fill.png) 0 7px no-repeat;}
	table.topic-list td.title-status-hot a {background:transparent url(https://softganz.com/library/img/document-new.png) 0 7px no-repeat;}
	table.topic-list td.title-status-veryhot a {background:transparent url(https://softganz.com/library/img/bookmark-new.png) 0 7px no-repeat;}
	table.topic-list td.timestamp {
		margin:0;
		padding:0;
		font-size:8pt;
		color:#777;
		white-space:nowrap;
	}
	table.topic-list td.created_date {}
	table.topic-list td.poster {
		font-size:0.9em;
		color:#666;
		text-indent:20px;
	}
	table.topic-list-single td.poster {
		font-size:1em;
		text-indent:0;
	}
	table.topic-list td.poster span.owner {
		padding-left:18px;
		background:transparent url(https://softganz.com/library/img/owner.png) left center no-repeat;
	}
	table.topic-list-single td.poster span.owner {
		padding-left:0;
		padding-right:14px;
		background-position:right center;
	}
	table.topic-list td.poster span.timestamp {font-size:0.75em;}
	table.topic-list td.stat {font-size:8pt;color:#777;text-align:center;}
	table.topic-list td.stat-reply {font-weight:bold;color:#ff6600;}
	table.topic-list tr.comment_page td {padding-left:20px;}
	table.topic-list tfoot {
		background-color:#f1e6b8;
		border:10px transparent solid;
		font-size:8pt;
		color:#666;
	}
	table.topic-list tfoot ul.title-status {
		margin:10px 40px;
		line-height:25px;
		list-style-type:none;
	}
	table.topic-list tfoot ul.title-status li {
		float:left;
		margin-right:40px;
	}
	table.topic-list tfoot ul.title-status li.title-status-normal {
		list-style-image:url(https://softganz.com/library/img/format-justify-fill.png);
	}
	table.topic-list tfoot ul.title-status li.title-status-hot {
		list-style-image:url(https://softganz.com/library/img/document-new.png);
	}
	table.topic-list tfoot ul.title-status li.title-status-veryhot {
		list-style-image:url(https://softganz.com/library/img/bookmark-new.png);
	}

	.tag-topics.-flex {display: flex; flex-wrap: wrap; justify-content: space-between;}
	.tag-topics.-flex>.topic-list {flex: 0 0 100%; margin:0 0 32px 0;}
	.tag-topics.-flex.-co-2>.topic-list {flex: 0 0 48%;}
	.tag-topics.-flex.-co-3>.topic-list {flex: 0 0 31%;}
	.tag-topics.-flex.-co-4>.topic-list {flex: 0 0 23%;}
	/* @end */




	/* @group content */
	.body div.slide {width:400px;height:300px;margin:20px auto;}

	.body div.detail {clear:both;}

	.topic-list.-relate-topics {margin:0 0 32px 0; box-shadow: none; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.topic-list.-relate-topics>li {margin: 0 8px 8px 8px; flex: 1 0 30%; }
		.topic-list.-relate-topics h3 {font-size:1.1em;}
		.topic-list.-relate-topics .title {}
		.topic-list.-relate-topics .timestamp {font-size:0.9em;}
		.topic-list.-relate-topics img {width:140px;height:100px;margin:0 10px 10px 0;display:block;float:left;}
		.topic-list.-relate-topics ul {margin:10px 0;padding:0;}

	div.content div.docs {margin:60px 0 0 0;}

	.preview {margin:0 0 10px 0; background-color:#FFF9DF; border:#FFEB8F solid 1px;}
		.preview h3 {background-color:#FFEB8F; padding:2px; }
		.preview .message-body {margin:0 5px;}




	/* @group paper */
	.paper.-footer {margin: 0 16px; font-style: italic; color: gray; text-align: right;}

	.paper.-comment .comment {margin:0;}
		.paper.-comment .comment .item {height:1%;margin:0 0 1px 0;padding:0 0 10px 0;clear:both;}
		.paper.-comment .comment .odd { background-color:#FFF9DF;}
		.paper.-comment .comment .even {background-color:#FFFEEF;}
		.paper.-comment .comment .no {padding:4px 5px; font-weight:bold; background:#eee; border-radius:3px 3px 0 0; line-height: 24px;}
		.paper.-comment .comment .no span {padding-right:10px;}
		.paper.-comment .comment ul.shortcut {padding: 0; float:right; border:none; background-color:transparent;; border-radius:none; position:relative; top:-28px; right:2px;}
		.paper.-comment .comment ul.shortcut li a {text-indent: 0;}
		.paper.-comment .comment .owner {height:40px; margin:5px; display:inline; font-size:.9em; color: #999;}
		.paper.-comment .comment .owner img.owner-photo {width:40px;margin:2px 5px 5px 2px; display:inline;float:left;}
		.paper.-comment .comment .owner span.owner-name {margin:0;}
		.paper.-comment .comment .timestamp {color:#999;}
		.paper.-comment .comment .message {margin:20px; clear:both; }
		.paper.-comment .comment .footer { margin:0;clear:both;}
		.paper.-comment .comment .footer>ul>li {display: inline-block; margin-right: 16px;}
		.paper.-comment .comment .block {color:gray; text-decoration:line-through; background:#fff url(https://softganz.com/library/img/edit-delete.png) 5px 0 no-repeat; padding-left:30px; border-left:3px #000 solid; }
		.paper.-comment .comment .waiting {color:gray; background:#fff url(https://softganz.com/library/img/dialog-warning.png) 5px 0 no-repeat; padding-left:30px; border-left:3px #f00 solid;}
		.paper.-comment .comment div.photo {margin:10px auto;text-align: center;}
		.paper.-comment .comment div.photo img.photo {width:100%; border:1px #999 solid; border-top:1px #ddd solid; border-left:1px #ddd solid;}
		.paper.-comment .comment .photo-wide {width:400px;}
		.paper.-comment .comment .photo-tall {width:350px;}

		.comment_page span {margin:0 1px;padding:0 5px;background:#FF953F;}
		.comment_page a,.comment_page strong {margin:0 1px;padding:0 5px;background:#FFE59F;}

		#comment-list>tbody>tr>td img {width:200px;}
		#comment-list>tbody>tr>td img.emotion {width:auto;}
	/* @end */








	/* @group ads */
	.ads ul {
		list-style:none;
		margin:0;
		padding:0;
		text-align:center;
	}
	/* @end */

	/* @group user */
	.user-list img.profile {width:48px;margin:0 5px 0 0;display:block;float:left;}
	.user-list .user-waiting, .user-list .user-disable, .user-list .user-block {background:#ccc;}
	/* @ end */

	/* @group spcial_links */
	.bookmarks_links {
		clear:both;
	}
	.bookmarks_links ul {
		margin:0;
		padding:0;
		list-style-type:none;
	}
	.bookmarks_links li {
		display:inline;
	}

	#admin_content img {width:100px;margin:0 5px;display:inline-block;}
	/* @end */

	/* @group confirm form */
	#confirm {
		width:70%;
		margin:20px auto;
	}
	#confirm #form-item-edit-message .form-item {
		margin:20px;
		display:inline-block;
	}
	/* @end */

	#edit-message-body {
		height:45px;
		padding:5px;
		font-size:12pt;
		border-radius:5px;
	}
	#form-item-edit-message-button {
		width:30%;
		float:right;
		text-align:right;
	}
	#form-item-edit-message-button input {
		font-size:1.3em;
		padding:4px 20px;
	}

	/* @group table item column */
	.col-checkbox {width:20px;text-align:center;}
	/* @end */




	#online-vdo {width:640px;height:360px;margin:0 auto;}


	#tooltip {
		display: none;
		position: absolute;
		z-index: 9999;
		padding: 8px;
		background: #EEEFEB;
		color: #000000;
		border: 1px solid #ccc;
		margin: 0px;
		box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
		opacity:.9;
		border-radius: 8px;
	}
	#tooltip h3, #tooltip div { margin: 0; }
	#tooltip h3 {font-size:1em;}
	#tooltip p {margin:0;padding:0;font-size:0.75em;text-indent:0;}

	.admin-list dd {margin-bottom:24px;}

	br.clear {height:0; display: block;}

	/* Group widget Label */
	.label-size {padding-right:0.8em;line-height:16pt;}
		.label-size-1 {font-size:100%;}
		.label-size-2 {font-size:115%;}
		.label-size-3 {font-size:130%;}
		.label-size-4 {font-size:145%;}
		.label-size-5 {font-size:160%;}
	/* @end */

	/* a.pdflink {padding-right:28px;background:transparent url(https://softganz.com/library/img/download.gif) right center no-repeat;} */




	.widget-item {margin:20px 10px; background: #fff; box-shadow: 1px 1px 2px #aaa; position: relative;}
		.widget-item h2 {margin:0; padding:5px; color: green;}
		.widget-item .summary {margin:0 10px; padding:0; overflow: hidden;}
		.widget-item div.photo {margin:10px 0; padding:0; border:none;}
		.widget-item .photo-th {width:100%; width: calc(100% + 14px); margin-left: calc(-7px); overflow:hidden;}
		.widget-item img.image {width:100%;height:auto; margin:0; padding:0; border:none;}
		.widget-item p {margin:0; padding:0;}
		.widget-item h3 {margin:0; padding:5px; font-size: 1.6em;}
		.widget-item .timestamp {position: absolute; left:10px; bottom:0;}

		.widget.-col2 {}
		.widget.-col3 {}
			.widget.-col2 .widget-item {}
			.widget.-col3 .widget-item {}


	.actionbar {margin:10px 0; text-align: right;}

	#calendar-mapcanvas {width:320px;height:320px; margin:10px 0; border:1px #ccc solid; background: #eee;}



	.admin-panel h3 {padding:8px;background-color: #ccc;}

	.icon.rating-star {color: #ccc; border-radius: 50%; border: none;}
	.rating-star.-rate-0 {color: #dfff00; border: 1px #dfff00 solid;}
	.rating-star.-rate-1 {color: #dfff00; border: 1px #dfff00 solid;}
	.rating-star.-rate-2 {color: #ffcc00; border: 1px #ffcc00 solid;}
	.rating-star.-rate-3 {color: #a5ff00; border: 1px #a5ff00 solid;}
	.rating-star.-rate-4 {color: #84cc00; border: 1px #84cc00 solid;}
	.rating-star.-rate-5 {color: #3a8c00; border: 1px #3a8c00 solid;}

	.sg-datepicker {z-index: 999999;}



	/* JQUERY UI */
	.ui-widget-content .ui-button {padding: 8px 16px; border: none;}
	.ui-widget-content .ui-button .ui-button-text {background-color: transparent;}
	.ui-dialog {padding: 0; z-index: 10001; }
	.ui-dialog .ui-dialog-titlebar {padding: 0; border: none;}
	.ui-dialog .ui-dialog-title {}
	.ui-dialog .ui-dialog-titlebar-close {margin: -16px 0 0 0;}
	.ui-dialog .ui-dialog-titlebar-close:hover {margin-top: -8px; margin-right: -2px;}
	.ui-dialog .ui-dialog-buttonpane {margin: 16px 0; border: none;}




	.jconfirm .jconfirm-box .jconfirm-buttons>button.-cancel {margin-right: 32px;}


	.social {min-height: 64px; margin: 16px 0;}
		.social .fb-share-button {width: 59px; height: 40px;}



	header.header {margin: 0 0 4px 0; padding:0; position: relative; color:#333; text-align: left; border: none; box-shadow: none; display: flex; flex-wrap: nowrap; background-color: transparent;}
		header.header.-hidden {display: none;}
		header.header>h3 {margin: 0; padding: 0 16px; height: 48px; line-height: 48px; flex: 7 0; background-color: transparent; overflow: hidden;}
		header.header>.nav {margin: 0; padding: 6px 8px;}
		header.header>.nav.-back {margin: 0 0 0 8px; padding: 0;}
		header.header>.nav.-back a:not(.btn) {margin: 0; padding: 12px 0; display: inline-block;}
		header.header>.nav.-back a:not(.btn) .icon {margin: 0; padding: 0;}
		header.header>.nav>ul {white-space: nowrap;}
		header.header>.nav>ul>li {display: inline-block;}
		header.header>.nav>ul>li>a:not(.btn) {margin-left: 4px; margin-right: 4px; display: block;}
		header.header>.nav>ul>li>a:hover:not(.btn)>.icon {color: #999;}
		header.header>.nav>ul>li>a:not(.btn)>.icon {margin: 0;}
		header.header>.nav>ul>li>a.btn {position: relative; top: 0; margin: 0 4px;}
		header.header>.nav .sg-dropbox {top: 0; margin: 0 8px;}





		/* SoftGanz Application CSS */
	.module.-softganz-app {}
		.module.-softganz-app .-app-hide {display: none !important;}
		.module.-softganz-app header.header.-app-hide-header>.nav.-back {display: none;}
		.module.-softganz-app header.header.-app-hide-header>h3 {text-indent: -9999em;}

	/*
	    Colorbox Core Style:
	    The following CSS is consistent between example themes and should not be altered.
	*/
	#colorbox {}
		#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:1100; overflow:hidden;}
		#cboxWrapper {max-width:none;}
		#cboxOverlay{position:fixed; width:100%; height:100%;}
		#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
		#cboxContent{position:relative;}
		#cboxLoadedContent{overflow: auto; -webkit-overflow-scrolling: auto !important;}
		#cboxTitle{margin:0;}
		#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
		#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
		.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
		.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
		#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

		/* 
		    User Style:
		    Change the following styles to modify the appearance of Colorbox.  They are
		    ordered & tabbed in a way that represents the nesting of the generated HTML.
		*/
		#cboxOverlay {background:#000;}
		#colorbox {outline:0; background: #fff; border-radius: 2px; border-radius: 10px;}
		#cboxWrapper {border-radius: 2px;}
		#cboxContent{margin-top:48px; overflow:visible; border:none; position: relative;}

			#cboxLoadedContent .-hover {z-index: 1001;}

			#cboxLoadedContent header.header {}
			#cboxLoadedContent header.header>.nav.-back {display: none;}
			#cboxLoadedContent header.header h2,
			#cboxLoadedContent header.header h3 {color: #333; line-height: 48px; overflow: hidden;}
			#cboxLoadedContent header>.nav:not(.-back) {padding: 6px 0 6px 0;}
			#cboxLoadedContent header>.nav:not(.-back) .ui-item>a {padding: 6px;}
			#cboxLoadedContent header>.nav form {display: inherit; vertical-align: middle;}
			#cboxLoadedContent header>.nav .sg-dropbox>a {box-shadow: none; background-color: transparent;}
			#cboxLoadedContent .box-page {}
			#cboxLoadedContent .box-page>header.header:first-of-type,
			#cboxLoadedContent .box-page>*:first-of-type>header.header:first-of-type
			 {width: calc( 100% - 32px ); margin: 0; position: absolute; color:#333; top: -48px; left:0; z-index: 1; background-color: #eee; text-align: left; border: none; box-shadow: none; display: flex; flex-wrap: nowrap;}
			#cboxLoadedContent .box-page>header.header:first-of-type>.nav {display: block;}
			#cboxLoadedContent .box-page>header.header:first-of-type>.nav.-back,
			#cboxLoadedContent .box-page>*:first-of-type>header.header:first-of-type>.nav.-back {display: flex;}

			#cboxLoadedContent .form:not(.search-box) {padding-bottom: 48px;}
			#cboxLoadedContent .form-item.-sg-box-bottom {position: absolute; bottom: 0; display: inline-block;}
			#cboxLoadedContent .form-item.-sg-box-bottom.-sg-text-right {right: 8px;}


			/*
			#cboxLoadedContent .title.-box {display: none;}
			#cboxLoadedContent .title.-box:first-child {margin:-49px 0 0 0; padding:0 0 0 16px; height: 48px; line-height: 48px; position: absolute; overflow: hidden; display: block; font-size: 1.6em; color:#333; font-weight: normal; width:calc( 100% - 48px ); top:0;left:0;z-index: 1;background-color: #eee; text-align: left; border: none; box-shadow: none;}

			#cboxLoadedContent>.nav.-box:first-child {height: 48px; margin:0; padding:0; position: absolute; overflow: hidden; display: block; top: -49px; right: 36px; z-index: 2; background-color: transparent; box-shadow: none; border: none;}
			#cboxLoadedContent .nav.-box>.ui-action {height: 100%;}
			#cboxLoadedContent .nav.-box>.ui-action>.ui-item {display: inline-block; height: 100%;}
			#cboxLoadedContent .nav.-box a {display: block; height: 100%; width: 28px;}
			#cboxLoadedContent .nav.-box a:hover .icon {color: #999;}
			#cboxLoadedContent .nav.-box .icon {margin: 13px 0 0 2px;}

			#cboxContent .toolbar .title {position: absolute;top:-31px; left:40px; height:30px; margin:0;padding: 0;line-height: 30px; background: #fff;z-index:1;}

			#cboxLoadedContent .toolbar nav {height:100%; margin:0 0 0 20px;display: inline-block; overflow: hidden;}
			#cboxLoadedContent .toolbar ul>li>a {border:none; border-radius:0;}
			#cboxLoadedContent .toolbar ul>li:first-child>a {border:none; border-radius:0;}
			#cboxLoadedContent .toolbar ul>li:last-child>a {border:none; border-radius:0;}
			#cboxLoadedContent .toolbar ul>li>a:hover {border:none;}

			#cboxContent .add--main {display: block; position: absolute; bottom:20px; right:20px; z-index:2;}

			#cboxContent .back {height:30px;position: absolute;top:-31px; left:0px; display: inline-block; width:40px; text-align: center;z-index: 2; line-height: 24px; font-size:14pt;background: #fff; color:#999;}
			#cboxContent .back:hover {color:#333;}
			*/

			.cboxIframe {background: #fff;}
			#cboxError {padding: 50px; border: 1px solid #ccc;}
			#cboxLoadedContent {padding: 0; overscroll-behavior-y: contain;}
			#cboxLoadingGraphic {background: url(https://softganz.com/library/img/loading.1.gif) no-repeat center center;}
			#cboxLoadingOverlay {background: #fff;}
			#cboxTitle {position: absolute; margin: 0; top: -48px; left:0px; width: calc( 100% - 32px ); color: #333; height: 48px; line-height: 48px; padding: 0 0 0 32px; z-index: 0; background-color: #eee;}
			#cboxCurrent {position: absolute; top: -22px; right: 205px; text-indent: -9999px; z-index: 2;}

			/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
			#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:24px; height:24px; position:absolute; top:-36px; z-index:2;box-shadow: none;}

			/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
			#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

			#cboxPrevious {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23444444' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.09l-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6z'/%3E%3Cpath d='M0-.5h24v24h-24z' fill='none'/%3E%3C/svg%3E"); right: 88px;}
			#cboxPrevious:hover {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23808080' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.09l-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6z'/%3E%3Cpath d='M0-.5h24v24h-24z' fill='none'/%3E%3C/svg%3E");}
			#cboxNext {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23444444' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59 1.41-1.41 6 6-6 6z'/%3E%3Cpath d='M0-.25h24v24h-24z' fill='none'/%3E%3C/svg%3E"); right: 58px;}
			#cboxNext:hover {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23808080' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59 1.41-1.41 6 6-6 6z'/%3E%3Cpath d='M0-.25h24v24h-24z' fill='none'/%3E%3C/svg%3E");}
			#cboxClose {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23555555' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z'/%3E%3Cpath d='M0 0h24v24h-24z' fill='none'/%3E%3C/svg%3E"); right: 8px;}
			#cboxClose:hover {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23A0A0A0' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z'/%3E%3Cpath d='M0 0h24v24h-24z' fill='none'/%3E%3C/svg%3E");}
			.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {right:66px;}
			.cboxSlideshow_on #cboxSlideshow {background-position:-300px -25px; right:44px;}
			.cboxSlideshow_on #cboxSlideshow:hover {background-position:-325px -25px;}
			.cboxSlideshow_off #cboxSlideshow {background-position:-325px 0px; right:44px;}
			.cboxSlideshow_off #cboxSlideshow:hover {background-position:-300px -25px;}

			#cboxContent .login {width: auto; margin: 0; border: none; background-color: transparent;}


	.colorbox.-map #cboxLoadedContent {padding: 0;}

	.jconfirm-content-pane em {color: red;}







	@media (min-width:30em){    /* 480/16 = 30 */
		.listing>li {height:220px; overflow: hidden;}
		.listing.-grid {text-align: center;}
		.listing.-grid>li {width:212px; margin-right:16px; display: block; float: left;}
		.listing.-grid .-title {}

		.listing.-view {}
		.listing.-view>li {margin:0 0 16px 0; border:1px #ddd solid;}
		.listing.-view .-header {width: 220px; height:100%; float:left; border-right: 1px #ddd solid;}
		.listing.-view .-info {margin-left: 220px;}
		
		.card>li {width: 45%; margin:10px 2.5%; float: left;}
	}

	@media (min-width:40em){    /* 640/16 = 40 */
		.ui-like-status>.ui-item:nth-child(n+2)>a>span {display: initial;}

		.toolbar .search-box {width:240px; margin:0; position:absolute; top:5px; right:5px;}
		.login {}
		.login .-form {width:50%; float: left;}
		.login .-info {width:40%; padding:0 5%; float: right;}
		.login .member-zone {border-right:1px #ccc solid; border-bottom: none;}


		.page.-main.main--withsidebar {width: auto; margin-left:250px;}
		.sidebar {width:220px; margin:0 0 0 0; float:left; overflow:hidden; box-shadow: 4px 4px 8px 0px #eee;}
		.page.-main.main--withsidebar .page-nv {clear:none;}
		.page.-main.main--withsidebar .toolbar {clear:none;}

		#cboxLoadedContent .box--sidebar {width:44%; margin-left:1%; float: right; top:0; right:0; overflow: auto;}
		#cboxLoadedContent .box--mainbar {width:55%; float: left;}
	}

	@media (min-width:45em) {		/* 720/16 = 45 */
		.login {width:560px; margin:20px auto;}

		.toolbar .search-box {width:300px;}
		.item__card>thead {display: table-header-group;}
		.item__card>tbody>tr>td {display: table-cell; float:none; width:auto;}
		.item__card>tbody>tr>td:first-child {width:30%; font-weight:normal; border-bottom: 1px #efefef solid;}
		.item__card col {width:auto;}

		.widget.-col2 {}
			.widget.-col2 .widget-item {width:45%; height:280px; margin:0 2.5% 30px; float: left; overflow:hidden;}
		.widget.-col3 {}
			.widget.-col3 .widget-item {width:45%; height:280px; margin:0 2.5% 30px; float: left;}

		.widget .widget-item {min-height:100px; overflow: hidden;}
		.widget .widget-item h3 {width:100%; max-height: 2em; position: absolute; background-color: #aaa; opacity: 0.8; overflow: hidden; z-index:1;}
		.widget .widget-item .summary {margin:0; padding: 0 10px;height: 5.5em; overflow: hidden; position: absolute; bottom: 0; background: #fff; opacity: 0.8;}
		.widget .widget-item div.photo {margin:0;}
		.widget .widget-item .photo-th {width:100%; margin-left:0; overflow:hidden;}
		.widget .widget-item .timestamp {width:100%; margin:0; left:0; z-index: 1; background: #fff;}
		.widget .widget-item .footer {margin:0; position: absolute; bottom: 0; right:10px;z-index:1;}
	}

	@media (min-width:56.25em) {    /* 900/16 = 56.25 */
		.card>li {width: 30%; margin:10px 1.5%; float: left;}
	}

	@media (min-width:56.25em) {		/* 960/16 = 56.25 */
			.widget.-col2 .widget-item {height:360px;}
			.widget.-col3 {}
			.widget.-col3 .widget-item {width:30%; height:280px; margin:0 1.5% 30px;}
			.widget .widget-item .summary {width: 100%;}
	}


}
/* @end media Screen */







/*------------------------------------*
$PRINT
*------------------------------------*/
@media print {
	a:link, a:visited {color:#000;}
	.noprint, .-noprint {display: none !important;}
	.-toprint {display: initial !important;}

	.timestamp {text-align:right;color:#666;}
	.search-box {display:none;}
	.toolbar {display:none;}
	.pagebreak {display: block;height:1px;color:#fff;border:none;page-break-after: always;}

	.-nowrap {white-space: nowrap !important;}
	.-forprint {margin:0; padding:0; border:none; box-shadow:none; position: relative;}

	.page-nv {display: none;}

	h2.title {margin:0;padding:10px;font-size:26pt;}
	h2.header {text-align:right;}

	table.item {padding:0;border:1px #ccc solid; clear:none; display: block; width: 100%;}
	table.item.-noprint {display: none;}
	table.item tr td {padding:4px;border:none;border-bottom:1px #ccc solid;border-radius:0;vertical-align:top;}
	table.item thead tr th {padding:4px 0px;border:none;border-top:1px #ccc solid; border-bottom:1px #ccc solid;border-radius:0;}
	table.item table.item {border-left:none;border-right:none;border:none;}
		.item.-center td {text-align: center;}
		.item.-cols8 td {width:12.5%;}
		.item .col.-center {text-align: center;}
		.item .col.-money {text-align: center;}
		.item .col.-no {width: 1px;text-align: center;white-space: nowrap;}
		.item .col.-no:after {content:".";}
		.item .col.-amt {text-align:center;}
		.item .col.-tool {text-align:center;}
		.item .col.-date {text-align:center;white-space:nowrap;}
		.item .col.-status {text-align:center;}
		.item .col.-poster {text-align:center;}

	#secondary , #navigator , .ribbon ,#edit-comment {display:none;}
	#header-wrapper {margin:0;padding: 0; background: #fff none; color:#000; text-indent: 0;}
	#header-wrapper h1 {width:100%;text-align:left;font-style:normal;font-size:18pt; background: #fff none; color:#000; float:none;}
	#header-wrapper h1 a {color:#999;}
	#header-wrapper nav {display: none;}
	#header-wrapper header {width: 100%; float:none; background: #000 none; text-indent: 0; color:#000;}

	.sidebar {display: none;}

	.container>.row.-flex {display: flex; justify-content: space-between;}
	.container>.row>.col.-md-* {margin:0;padding: 0; display: block; float: left;}
	.container>.row>.col.-md-1 {width: 8.3333%; float:left;}
	.container>.row>.col.-md-2 {width:16.6666%; float:left;}
	.container>.row>.col.-md-3 {width:25.0000%; float:left;}
	.container>.row>.col.-md-4 {width:33.3333%; float:left;}
	.container>.row>.col.-md-5 {width:41.6666%; float:left;}
	.container>.row>.col.-md-6 {width:50.0000%; float:left;}
	.container>.row>.col.-md-7 {width:58.3333%; float:left;}
	.container>.row>.col.-md-8 {width:66.6666%; float:left;}
	.container>.row>.col.-md-9 {width:75.0000%; float:left;}
	.container>.row>.col.-md-10 {width:83.3333%; float:left;}
	.container>.row>.col.-md-11 {width:91.6666%; float:left;}
	.container>.row>.col.-md-12 {width:100.0000%; float:left;}

	.box {padding: 0; border: none; box-shadow: none;}

	.inline-edit-view.-text.-fill {display: block;}

}







/* FIXED Other side effect by my css */
.gm-style button {box-shadow: none;} /* Google Map Info close button */