@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 {
	--header-bg-color: var(--bg-color);
	--link-color: #54a9ff;
	--link-hover-color: #1f84eb;
}

/* Dark Theme Color */
.theme-dark {
	--header-bg-color: var(--bg-color);
}

/* @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.-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;}
.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;}


/******************
* 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 {
	.page.-header {max-width: none;}
	.page.-header .wrapper {margin-left: 4px;}
	.page.-content {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>a {padding:4px 0; display: block;}

	pre {font-size: 0.8em;}
	.page.-main h3 {background-color: #ccc; color: #666; margin: 8px 0; border-radius: 8px; padding: 8px;}
	.page.-main h4 {background-color: #ccc; color: #666; margin: 8px 0; border-radius: 8px; padding: 8px;}
	.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: 0 auto; padding: 64px 16px 0;}
	.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%; 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;}
}








@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;}
}