@import url(/css/layout-fix.css);
@import url(/css/simple.css?v=5);
@import url(/set/css.set.css?v=1);

/*
Theme Name:  SoftGanz Simple
Theme URI: http://www.softganz.com/sharing/simple/
Description: SoftGanz Simple is a base of responsive web design.
Copyright: 2014
Version: 0.10
Author: SoftGanz by Little Bear
Author URI: http://www.softganz.com/
Tags: fixed width, simple, clean
*/

:root {
	--bg-color: #333;
}
.widget-form, .form {
	.widget-form {
		--bg-color: #5e5e5e;
	}
}

@media (prefers-color-scheme: dark) {
	.widget-form {
		--bg-color: #5e5e5e;
		--hover-bg-color: #5e5e5e;
		--focus-bg-color: #5e5e5e;
	}
}

/* @Color palettes */
/* https://coolors.co/e76f00-f1e500-0063e0-4aa900-000c47 */
.template.-color1 {background-color: #4aa900;} /* Kelly Green : Main navigator */
.template.-color2 {background-color: #e76f00;} /* Spanish Orange : Module navigator */
.template.-color3 {background-color: #f1e500;} /* Titanium Yellow */
.template.-color4 {background-color: #0063e0;} /* True Blue : Floating button */
.template.-color5 {background-color: #000c47;} /* Oxford Blue : Header */

h1,h2,h3,h4,h5,h6 {margin:0; padding:16px 0;font-family: "Mitr"; line-height: 1.1em; font-weight: bold;}
h2 {font-size: 1.3em; color: #0066ff;}
h3 {font-size: 1.2em; color: #0066ff;}
h4 {font-size: 1.1em; color: #0066ff;}
h5 {font-size: 1.0em; color: #0066ff;}
h6 {font-size: 1.0em; color: #0066ff;}

h2.header {text-align: right; font-size: 1.2em;}

.page.-header header {margin: 4px; width:40px; height:40px; overflow: hidden; background: transparent url(logo.png) -3px -38px no-repeat; text-indent: -999em; border-radius: 50%;}

/* @group navigator */
.page.-nav>.nav.-main>ul.-main {margin-left:  48px; align-items: center; gap: 16px;}
.page.-nav>.nav.-main>ul>li>a {padding: 8px; border-radius: 50%; display: flex;}
.page.-nav>.nav.-main .menu.-main>li>a:hover {background: #0068C4;}
.page.-nav>.nav.sg-responsivemenu.-active>ul>li>a {align-items: center; padding: 0 8px;}
.page.-nav>.nav.sg-responsivemenu.-active>ul>li>a>span {display: inline-block; margin-left: 8px;}
/* @end */


.page.-content {padding:48px 4px 32px;}

.page.-primary {}
.page.-secondary {display: none;}

.page.-footer { margin:0; padding:10px; color: #333; font-size: 8pt; background: transparent; text-align: center;}
.page.-footer>.wrapper {margin:0 auto;}
.page.-footer p {margin: 0;padding:0;}
.page.-footer a {color: #666;}
.page.-footer a:hover {color: #333;}

/* Set max page width */
.page.-header .wrapper { max-width: 1050px;}
.page.-content {max-width: 1050px;}
.page.-footer>.wrapper {max-width: 1050px;}

.page.-main .detail {padding: 16px 0;}

.search-box {margin: 0 8px; box-shadow: none;}

.topic-list {margin: 32px 8px 64px 8px; padding: 0; list-style-type: none;}
.topic-list>li {position: relative;}
.topic-list .title {margin:0; padding:8px; font-size: 1.3em; background-color: #d0f2ff;}
.topic-list .title>a {padding: 0;}
.topic-list .footer {clear: both;}
.topic-list .summary {margin:0 10px; padding: 0;}
.topic-list .image {width:100%; margin:0 auto; padding:0; border:none; display: block; float: none;}


.widget-content {}
.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;}
/* @end */

/******************
* Responsive web
******************/

@media (min-width:30em){    /* 480/16 */
}

@media (min-width:40em){    /* 640/16 */
}

@media (min-width:45em) { /* 720/16 */
	.page.-header {overflow-x:initial;}
}

@media (min-width:60em) {    /* 960/16 */
	.page.-header .wrapper { height:48px; margin:0 auto;}
	.page.-content {}
}


/******************
* Responsive web for this web only
******************/
.page.-header {box-shadow: none;}

.toolbar.main h3 {color:#999; font-family: Tahoma; font-weight:normal; font-size:1em;}

.module-set {}
	.module-set .page.-header {max-width: none;}
	.module-set .page.-header .wrapper {margin-left: 4px;}
	.module-set .page.-content {margin: 52px auto 32px; position: relative; max-width: none;}


.set-title {height: 36px; padding:0 0 0 4px; line-height: 36px; position: fixed; top: 6px; z-index: 1000; color: #fff; left: 54px;}
	.set-title a {color: #fff;}

.set-search {height: 36px; width: 80px; position: fixed; z-index: 1000; right: 120px; top: 6px; border:none; box-shadow: none; border-radius: 2px; z-index: 1001;}
	.set-search .search-box {height: 100%; border: none; box-shadow: none; border-radius: 24px;}
	.set-search .search-box .form-text {margin-left: 0; text-transform: uppercase;}
	.set-search .search-box > [role="icon"] {position: absolute; top: 50%; margin-top: -9px; left: 8px; color: #848d95; transition: opacity .25s cubic-bezier(.165, .84, .44, 1); fill: currentColor; display: none;}
#set-refresh {border-radius: 24px;}





/* Tag : Lyric */
.paper-tag-198 .form-item.-edit-topic-body .form-textarea {font-family: monospace; font-size: 1.2em;}

blockquote.code {display:block; margin: 8px; background: #5f5f5f; padding: 8px; color: #dcdcdc; font-size: 1em; line-height: 1.4em; border-radius: 4px;}
pre { -moz-tab-size: 1; -o-tab-size: 1; tab-size: 1;}

.module-docs {}
	.docs-nav {left:auto; width:256px; height:100%; position: relative; top:0; float: left; background: #f7f7f7;}
	.docs-nav>ul {padding: 8px 16px;}
	.docs-nav>ul>li {border-bottom:1px #ddd solid;}
	.docs-nav>ul>li>a {padding:8px 0; display:block;font-weight:bold;}
	.docs-nav>ul ul {margin:0px 0 8px 15px;}
	.docs-nav>ul ul>li {}
	.docs-nav>ul ul>li>a {padding:4px 0; display: block;}

	.module-docs pre {font-size: 0.8em;}
	.module-docs .page.-main h3 {background-color: #ccc; color: #666; margin: 8px 0; border-radius: 8px; padding: 8px;}
	.module-docs .page.-main h4 {background-color: #ccc; color: #666; margin: 8px 0; border-radius: 8px; padding: 8px;}
	.module-docs .code {margin: 0 0 32px 0; background-color: #131313; color: #9c9c9c;}

	.docs-page-nav-list {margin:8px 0 16px 0; padding:0 0 0 10px; list-style-type:none; border-left:4px #039be5 solid; font-size:0.9em; line-height: 1.8em;}
	.tool-link {display: flex; flex-wrap: wrap;}
	.tool-link>li {flex: 0 0 200px; height: 100px; margin:0 8px 8px 0; text-align: center; border: 1px #ccc solid; background-color: #eee; border-radius: 8px;overflow: hidden; position: relative;}
	.tool-link>li>a {display: block; height: 100%;}
	.tool-link>li>a>img {display: block; height: auto; max-height: 60px; margin: 4px auto;}


@media (min-width:22em){    /* 360/16 = 22.5 */
	.set-search {width: 120px;}
}


@media (min-width:30em){    /* 480/16 = 30 */
	.module-set #app-sidebar {z-index: 1000;}
	.set-search {width: 140px;}
}


@media (min-width:37em){    /* 640/16 = 40 */

}


@media (min-width:45em) { /* 720/16 = 45 */
	body#home div#ribbon {width:200px; position:fixed; border:none;background:transparent;top:48px; z-index:10;}
	body#home ul li.head {display:none;}
	body#home li#user-menu-edit {display:block;}
	body#home ul#user-menu li a {border:none;}
}


@media (min-width:48em) { /* 768/16 = 48 iPad */
}


@media (min-width:50em) {    /* 800/16 = 50 */
}


@media (min-width:56.25em) {    /* 900/16 = 56.25 */
	.module-set .page.-header .wrapper {margin-left: 16px;}
	.page.-content {margin: 64px auto 32px; padding:0 16px;}
	.home.-topnews {height: 320px;}
	.page.-header {background-position: center top; }

	.toolbar.-main {border-radius: 2px;}
	.set-title {width: 1050px; left: auto; padding-left: 64px; }
}


@media (min-width:61.25em) {    /* 980/16 = 61.25 */
}


@media (min-width:80em) {    /* 1280/16 = 80 */
}


.module-publicmon {background-color: #e5e5e5;}
.module.-app .page.-header,
.module.-app .page.-footer,
.module.-app .package-footer,
.module.-app .toolbar.-main h2,
.module.-app .toolbar.-main .search-box
{display: none;}

.module.-app .toolbar.-main {display: none;}
.module.-app.-home .toolbar.-main {display: block;}
.module.-app.-report .toolbar.-main {display: block;}
.module.-app.-admin .toolbar.-main {display: block;}

.module-publicmon .page.-content {background-color: transparent;}

.module.-app .page.-content {margin: 0;}

.nav.-submodule {background-color: #149bdf;}
.nav.-submodule>.ui-nav .ui-item {text-align: center;}
.nav.-submodule>.ui-nav .ui-item>a>i {display: block; margin: 0 auto;}
.nav .sg-dropbox.-atright>a {padding: 6px;}

.toolbar {margin: 0 0 1px 0; background-color: #0480be;}
.toolbar .search-box {margin: 4px;}

.ui-card>.ui-item {background-color: #fff; box-shadow: none;}
.ui-card>.ui-item>.detail {padding: 0 16px 16px 16px;}

.ui-card .type {display: block; width: 64px; height: 64px; background-color: #eee; margin:0 16px 8px 16px; float: left; text-align: center;}
.ui-card .type .icon {display: block; margin:4px auto;}
.ui-card .sg-upload {padding: 32px;}
.ui-card .owner {font-size: 1em; display: block; font-weight: bold;}
.ui-card .owner-photo {border-radius: 50%;vertical-align: middle; margin-right: 8px; display: block;float: left;}
.ui-card .timestamp {font-size: 0.7em;}

.publicmon-home-send .ui-item {padding: 32px 8px; display: flex;}
.publicmon-home-send .ui-item>img {width: 40px; height: 40px; border-radius: 50%;}
.publicmon-home-send .ui-item>.form-text {width: 100%; padding: 6px 24px; border-radius: 32px; cursor: text;}
.publicmon-home-send .ui-item>a {color:#666;}
.publicmon-home-send .ui-item>.btn.-link {padding: 0 8px; font-size: 10px; line-height: 8px;}
.publicmon-home-send .ui-item>.btn.-link>.icon {display: block;margin: 0 auto;}
.publicmon-home-send .ui-item>.btn.-link>span {padding: 0; line-height: 16px;}


.nav.-card-like {margin: 0 8px; padding: 0; border-top: 1px #eee solid;}

.module-set .page.-nav {display: none;}
.module-set.-view .page.-content {margin: 0; padding: 0;}
#app-sidebar-menu>ul>li>a {border: none;}
#app-sidebar-content ul li>a {margin: 0; padding: 0; text-align: center; border-radius: 24px;}
.module-set .tabs {background-color: #aaa;}


@media (min-width:37em){    /* 640/16 = 40 */
	.toolbar .search-box {margin: 0; top: 2px; right: 2px;}
	#app-sidebar-menu>ul>li>a {margin: 0; padding: 0; text-align: center; border: none; border-radius: 24px;}
}





/* Light Theme */
body {color: #666; background-color: var(--bg-color);}
a {color: #17599c;}
a:hover {color: #1f84eb;}
.page.-header {background-color: #fff;}
.widget-card {background-color: #fff; border-radius: 4px;}

.set-search {background-color: #fff;}
	.set-search .search-box .form-text:hover {background-color: #fff;}
	.set-search .search-box .form-text:focus {background-color: #fff;}
	.set-search .search-box button {background-color: #fff;}


/* Dark Theme */
@media (prefers-color-scheme: dark) {
	body {color: #c5c5c5;;}
	a {color: #fafafa;}
	a:hover {color: #ddd;}
	h1,h2,h3,h4,h5,h6 {color: #eee;}

	.page.-header {background-color: #333;}
	.page.-content {background-color: #333;}
	.page.-footer {background-color: #444; color: #ccc; border-top: 1px #666 solid;}
	.page.-footer a {color: #ccc;}
	.page.-footer a:hover {color: #ddd;}

	.icon {color: #fafafa;}

	.btn {background-color: #999; box-shadow: none;}
	.btn.-link:hover>.icon {color: #666;}

	input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], textarea, .ui-autocomplete-input, .uneditable-input {
		background-color: #434343;
		box-shadow: 0 0 0 1px #575757 inset;
		color: #fff;
	}

	.form-text, .form-password, .form-textarea, .form-select {background-color: #434343; box-shadow: 0 0 0 1px #575757 inset; color: #fff;}
	.form-item.-fieldset>label:first-child {background-color: #666;}
	input.form-select {background: #000 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z'/%3E%3Cpath d='M0-.75h24v24h-24z' fill='none'/%3E%3C/svg%3E") right center no-repeat;}
	.form-text:hover, .form-password:hover, .form-select:hover, .form-textarea:hover {
		background-color: #5f5f5f;
	}
	.form-text:focus, .form-password:focus, .form-select:focus, .form-textarea:focus {background-color: #5f5f5f;}
	.form-text.-require, .form-select.-require, .form-textarea.-require {box-shadow: 0 0 0 1px #dddddd inset;}
	.form-text.-require:hover, .form-select.-require:hover, .form-textarea.-require:hover {background-color: #444; box-shadow: 0 0 0 1px #86b7fe inset;}

	.widget-card {background-color: #4b4b4b; border-radius: 8px;}

	.inline-edit-field {color: #eaab81;}
	.sg-inline-edit .inline-edit-field>span:hover, .inline-edit .inline-edit-field>span:hover {background-color: #666; box-shadow: 0 0 0 1px #999 inset;}
	.inline-edit-field .placeholder {color: #8c8c8c;}

	.ui-like-status a {color: #ccc;}
	.sg-dropbox .sg-dropbox--content {background-color: #6f6f6f; box-shadow: none; border-color: #888888;}
	.sg-dropbox>a {background-color: transparent;}
	.sg-dropbox .ui-item a {color: #eee;}
	.sg-dropbox .ui-item a:hover {background-color: #555;}
	.sg-dropbox .ui-item.-sep hr {border-color: #888888;}
	.sg-dropbox .icon.-material {color: #fff;}

	.nav.-icons .sg-dropbox>a:hover {background-color: transparent;}
	.nav.-main .menu.-main > li > a {color: #aaa;}

	.nav.-page .icon.-material {color: #ddd;}
	.nav.-main .menu.-main ul {box-shadow: none;}

	.-hover-parent:hover>.nav.-icons.-hover {background-color: #666;}
	.-hover-parent:hover>.nav.-icons.-hover a:hover .icon {color: #333;}

	.widget-table {background-color: #393939;}
	.widget-table thead .icon.-sg-active {color: #fff;}
	.widget-table thead .icon.-sg-inactive {color: #909090;}
	.widget-table tbody tr:hover {background-color: #444444;}
	.widget-table caption {color: #f1f1f1; background-color: #2c2c2c;}
	.widget-table tfoot {color: #ccc; background-color: #555;}
	.widget-table th {color: #ccc; background-color: #555; border-bottom:1px #555 solid; border-right:1px #555 solid;}
	.widget-table td {border-bottom:1px #555 solid;}
	.widget-table .subfooter {background-color: #555;}
	.widget-table tr:hover>td.-hover-parent>.-hover {background-color: #2c2c2c;}

	.item__card>tbody>tr>td:first-child {border-bottom:1px #555 solid;}

	#colorbox, #colorbox #cboxWrapper, #colorbox #cboxContent, #colorbox #cboxLoadedContent {background-color: #333;}
	#cboxTitle {background-color: #000;}
	#cboxLoadingOverlay {background-color: #333;}
	#cboxLoadedContent .header:first-child {background-color: #000;}
	#cboxLoadedContent .widget-appbar>.-title {color: #dfdfdf;}
	#cboxLoadedContent .widget-appbar>.-leading .icon {color: #dfdfdf;}
	#cboxLoadedContent>.box-page>.header:first-child h3 {color: #dfdfdf;}





	.page.-nav>.nav.-owner li.-profile>ul {background-color: #333;}
	.menu.-pulldown ul {box-shadow: 0 0 0 1px #5d5d5d;}
	.menu.-pulldown ul>li {border-bottom: #5d5d5d 1px solid;}
	.menu.-pulldown ul>li:hover>a {background-color: #666;}

	.nav.-submodule .ui-nav a {color: #666;}
	.nav.-main .menu.-sub>li>a {color: #666;}
	.nav.-submodule .sg-dropbox .icon.-material {color: #eee;}

	.admin-panel h3 {background-color: #365564;}

	.sidebar {background-color: #6f6f6f; box-shadow: none;}
	.sidebar .ui-action a {color: #333;}
	.sidebar .header {margin: 0;}
	.sidebar .header>h3 {background-color: #505050; color: #ccc;}
	.sidebar h4 {background-color: #5d5d5d; color: #ccc;}
	.sidebar .ui-item>h3 {background-color: #5d5d5d;}
	.sidebar .ui-item>a {color: #d6d6d6}
	.sidebar .ui-item>a:hover {background-color: #555}
	.sidebar .ui-item>a .icon {color: #b5b5b5}
	.sidebar .ui-item.-sep hr {border-bottom: 1px #999 solid}

	.login {background-color: #333; border: none;}

	.checkbox.-block:hover {background-color: #4c4c4c;}

	blockquote.code {background-color: #003346; color: #009CD3;}
	.topic-list .title {background-color: #00597b;}
	.topic-list .footer {border: none;}

	#calendar-body {background-color: #585858;}
	#calendar-body .dayname {background-color: #585858;}
	#calendar-body .daynum {background-color: #989898;}
	#calendar-body .month_event {background-color: #b1b1b1;}
	#calendar-body .currentdaybox {background-color: #dcdcbb}

	.comment_page span, .comment_page a {background-color: #666;}
	.comment_page strong {color: #f60; background-color: #cecece;}
	.paper.-comment .comment .odd {background-color: #212121;}
	.paper.-comment .comment .even {background-color: #3d3d3d;}
	.paper.-comment .comment .block {background-color: #353535;}

	/* @ set */
	.-set-down, .-set-down a {color: red;}
	.-set-up, .-set-up a {color: #00A400;}
	.module-set .page.-header {background-color: #222;}
	#app-sidebar-menu>ul {background-color: transparent;}
	#app-sidebar-menu>ul>li>a {background-color: #343434;}
	#app-sidebar-content ul li>a {background-color: #343434;}
	.module-set .tabs {background-color: #aaa;}
	.module-set .tabs>li {border: none;}
	.module-set .tabs>li.-active {border: none;}
	.set-symbol-list-price>tbody>tr.subtotal>td {background-color: #2c2c2c}
	.set-card>tfoot>tr>td {background-color: #3e3e3e;}
	.set-up {background-color: #00b100;}
	.set-symbol-list-price.active>tbody>tr>td.cost {background-color: #2c2c2c;}
	.set-symbol-list-price.active>tbody>tr>td.last {background-color: #2c2c2c;}
	.set-symbol-list-price.active>tbody>tr>td.margin,
	.set-symbol-list-price.active>tbody>tr>td.margin-all {background-color: #2c2c2c;}
	/* @end */


	.docs-nav {background-color: #888888;}
	.docs-nav>ul>li {border-bottom: 1px #9e9e9e solid;}
	.tool-link>li {background-color: #b1b1b1;}

	.set-search {background-color: #222;}
		.set-search .search-box .form-text:hover {background-color: #5c5c5c;}
		.set-search .search-box .form-text:focus {background-color: #5c5c5c;}
		.set-search .search-box button {background-color: transparent;}
}



@media print {
	body {font: 12pt/14pt "CordiaUPC","Cordia New", Tahoma, Arial, Verdana, sans-serif; color: #000;}
	.page.-header {height:30px;overflow:hidden; display: none;}
	.page.-header h1 {font-size:1em;text-align:right;height:30px;overflow:hidden;}
	#cse-search-box {display:none;}
	.page.-footer {display:none;}
	#paper-footer, .package-footer {display:none;}
	.widget-table {margin:0;padding:0;float:none;display:table;width:100%; border:none;}
	.widget-table>thead>tr>th {padding:2px;}
	.noprint {display: none;}
	.pagebreak {color: transparent; border: none; page-break-after:always;}

	.page.-content {margin:0; padding: 0;}

	.col-center {text-align: center;}
	.col-money {text-align: center;}
	.widget-table .col-no {text-align:center; padding-left:4px; padding-right:4px;}
	.widget-table .col-no:after {content:".";}
	.col-amt {text-align:center;}
	.col-tool {text-align:center;}
	.col-date {text-align:center;white-space:nowrap;}
	.col-status {text-align:center;}
	.col-poster {text-align:center;}

	.widget-table .subheader {font-weight: bold; background-color: #ddd;}
	.widget-table .subfooter {font-weight:bold; background-color: #eaeaea;}

	.ads, .social, .paper.-relate-topics, .paper.-footer, .paper.-comment {display: none;}
	.google-auto-placed {display: none;}

	.page.-primary>h2.header {display: none;}
	.page.-primary>#ribbon {display: none;}
	.page.-main>.timestamp {display: none;}
}