/*
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: https://www.softganz.com/
Tags: fixed width, simple, clean
*/

@import url(/css/simple.css);
@import url(/css/layout-fix.css);
@import url(/calendar/css.calendar.css);
@import url(/project/css.project.css);
@import url('https://fonts.googleapis.com/css?family=Prompt:300');


:root {
	--max-width: 1280px;
	--header-height: 96px;
	--header-bg-color: #ffecc1;
	--font-color: #333;
	--link-color: #17599c;
	--link-hover-color: #1f84eb;
	--link-white-color: #fff;
	--bg-color: #fefaf3;
	--heading-color: #21293c;
	--footer-bg-color: #DBDBDB;
	--footer-text-color: #666;
	--footer-link-color: #999;
	--footer-link-hover-color: #888;
	--mainnav-bg-color: #17A43C;
	--mainnav-menu-color: #e1ffe9;

	--appbar-bg-color: #8F49F5;
	--appbar-text-color: #eee3ff;
	--appbar-nav-bg-color: transparent;
	--appbar-nav-btn-bg-color: #e5d4ff;
	--appbar-nav-btn-hover-color: #ddc6ff;
	--appbar-nav-text-color: #361a5f;
	--appbar-proposal-bg-color: #006cdb;
	--appbar-proposal-text-color: #d7ebff;
	--appbar-follow-bg-color: #FCB124;
	--appbar-follow-text-color: #714a00;

	--card-bg-color: #fff;
	/* 
	--side-nav-bg-color: #ffe3ff;
	--side-nav-hover-bg-color: #fed3fe;
	--side-nav-hots-bg-color: #C879FF;
	--side-nav-hots-text-color: #6f00bf; */
}

/* @Color palettes */
/* https://coolors.co/76b852-ee4f4f-168eea-fff9ea-323b43 */
.template.-color1 {background-color: #76b852;} /* Site Header */
.template.-color2 {background-color: #ee4f4f;} /* Main navigator */
.template.-color3 {background-color: #168eea;} /* Module navigator */
.template.-color4 {background-color: #fff9ea;} /* White */
.template.-color5 {background-color: #323b43;} /* Gray */

body {color: var(--font-color); background-color: var(--bg-color);}
a {color: var(--link-color);}
a:hover {color: var(--link-hover-color);}

h1,h2,h3,h4,h5,h6 {font-family: "Prompt"; color: var(--heading-color);}
h2 {font-size: 2.0rem;}
h2 {font-size: 1.9rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.6rem;}
h5 {font-size: 1.5rem;}
h6 {font-size: 1.5rem;}

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

.widget-appbar {
	.-title {color: var(--appbar-text-color);}
	&.-proposal {
		>.-title {
			background-color: var(--appbar-proposal-bg-color);
			>.-text {color: var(--appbar-proposal-text-color);}
		}
		>.-leading {
			background-color: var(--appbar-proposal-bg-color);
			.icon {color: var(--appbar-proposal-text-color);}
		}
		>.-trailing {background-color: var(--appbar-proposal-bg-color);}
	}
	&.-follow {
		>.-title {
			background-color: var(--appbar-follow-bg-color);
			>.-text {color: var(--appbar-follow-text-color);}
		}
		>.-leading {
			background-color: var(--appbar-follow-bg-color);
			.icon {color: var(--appbar-follow-text-color);}
		}
		>.-trailing {
			background-color: var(--appbar-follow-bg-color);
			.widget-row>*>a>.icon {color: var(--appbar-follow-text-color);}
		}
	}
}

.page {
	&.-header {
		opacity: 0.95;
		background-color: var(--header-bg-color);
		header {
			width: 40px; height: 40px;
			background-image:url(logo.png?v=2); background-size: 185px 40px; margin: 4px 0 0 4px; position: absolute;
		}
	}
	&.-nav {
		margin-left: 64px;
		>.nav {
			&.-owner {
				li.-profile {
					>a>span {display: inline-block;}
				}
				>ul>li>a {color: #333;}
				>ul>li>a>.icon {color: #714400;}
			}
			&.-main {
				.sg-navtoggle>.icon {color: #714400; font-weight: bold;}
				>ul>li>a {color: var(--mainnav-menu-color);}
			}
		}
		>.sg-responsivemenu.-active>.menu {
			background-color: #000;
			>a {color: #fff;}
		}
	}
	&.-content {
		padding-top: 48px;
	}
	&.-footer {
		color: var(--footer-text-color);
		background-color: var(--footer-bg-color);
		a {color: var(--footer-link-color);}
		a:hover {color: var(--footer-link-hover-color);}
	}
}


/* Set max page width */
.page.-header .wrapper, .page.-content, .page.-footer>.wrapper {max-width: var(--max-width);}
.widget-floatingactionbutton {max-width: calc(var(--max-width) - 16px);}

/*
.widget-appbar {
	margin-bottom: 8px; align-items: center;
	>.-trailing {
		height: 48px;
		>*>.-item {margin: 8px 4px;}
	}
	&.-follow>.search-box {display: none;}
}
*/


/******************
* This web only
******************/
.readall {
	margin:0 16px; padding: 0; text-align: right; clear: both;
	a {background-color: #f60; display: inline-block; padding:4px 10px; color: #fff; border-radius: 4px;}
	a:hover {background-color: #FF7B23;}
}

.readmore {
	padding: 2px 6px; display: inline-block; font-style: normal; border-radius: 2px 2px 0 2px;
	background-color: #ccc;
}

/*
.checkbox.-block {padding: 8px; display: block;}

.inline-edit-field {
	color: #79009E;
	.inlineedit-label {font-weight: bold;}
	textarea {font-size:1.0em; line-height: 1.5em; padding:0;}
}

.nav.-master {
	>ul {display: flex; flex-wrap: wrap;justify-content: flex-start;}
	.ui-item {width: 136px; height: 136px; margin: 0 32px 32px 0; background-color: #eee; border: none; text-align: center;}
	a {display: block; height: 100%; padding: 0;}
	span {position: absolute; bottom: 0; width: 100%; left: 0; padding: 8px 0;}
	.icon {width: 76px; height: 76px; display: block; margin: 8px auto 16px; background-color: transparent; border-radius: 50%; background-image: url('icons-local.png'); background-repeat: no-repeat;}
	.icon.-project {background-position: 0 -100px}
}
*/

.topic-list {
	margin:20px 10px; padding:0; list-style-type: none; box-shadow: 0 0 0 1px #aaa inset;
	>li {position: relative;}
	.title {margin:0; padding:5px; font-size: 2.0em;}
	.footer {clear: both;}
	.summary {margin:0 10px; padding: 0;}
	.image {width:100%; margin:0 auto; padding:0; border:none; display: block; float: none;}
}

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

.widget-paperlist {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; flex-direction: column;
	margin: 8px;
	>* {margin: 0; border-radius: 8px;}
}

.nav.-app-menu {
	--border-color: #eee;
	flex-direction: column;
	background-color: #fff;
	justify-content: center;
	gap: 0;
	margin: -2px 0 0 0; padding: 0;
	* {box-sizing: border-box;}
	>.-item {
		background-color: #fff;
		min-width: 0; height: 20rem;
		margin: 0; padding: 0; border-radius: 0;
		position: relative;
		>a {
			margin: 0; padding: 16px 0; height: auto;
			display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center;
			background-color: transparent; border-radius: 0;
			>* {flex: 1 0 100%; margin: 0; padding: 0;}
			.-label {font-size: 2.0rem; padding: 4px 0; height: 3rem;}
			.-desc {color: #999; height: 8.0rem; flex: 0 0 70%; margin: 0 auto;}
			.icon {
				width: 48px; height: 48px; font-size: 32px; padding: 8px; flex: 0 0 48px;
				border-radius: 4px; align-content: center;
				color: #686868; background-color: #d0d0d0;
			}
		}
		&::before {
			content: "";
			width: calc(100% - 68px);
			height: 1px;
			position: absolute;
			right: 34px; bottom: 0;
			background-color: var(--border-color);
		}
		&::after {
			content: "";
			width: 1px;
			height: calc(100% - 68px);
			position: absolute;
			right: 0; bottom: 34px;
			background-color: var(--border-color);
			display: none;
		}
		&:nth-child(1)>a>.icon {color: #2277B8; background-color: #7fc7ff;}
		&:nth-child(2)>a>.icon {color: #9d8f23; background-color: #ffeb4f;}
		&:nth-child(3)>a>.icon {color: #CA7501; background-color: #F99301;}
		&:nth-child(4)>a>.icon {color: #11822b; background-color: #1cc145;}
		&:nth-child(5)>a>.icon {color: #28718f; background-color: #47c9ff;}
		&:nth-child(6)>a>.icon {color: #85589c; background-color: #db94ff;}
		&:nth-child(7)>a>.icon {color: #804474; background-color: #ff86e6;}
		&:nth-child(8)>a>.icon {color: #9e7b16; background-color: #ffc623;}
		&:nth-child(9)>a>.icon {color: #6f913f; background-color: #b0e562;}
		&:nth-child(10)>a>.icon {color: #7c7e38; background-color: #dde05f;}
	}
}

.widget-dashboard {
	--text-color: #333;
	>* {flex-basis: 100%; max-width: calc(33.33333333% - 5.4px);}
	big {font-size: clamp(1.8rem, 2vw, 2.2rem); display: inline-block; padding: 0 4px;}
	>div:nth-child(6n + 1) {background-color: #7fc7ff;}
	>div:nth-child(6n + 2) {background-color: #ffeb4f;}
	>div:nth-child(6n + 3) {background-color: #F99301;}
	>div:nth-child(6n + 4) {background-color: #1cc145;}
	>div:nth-child(6n + 5) {background-color: #db94ff;}
	>div:nth-child(6n + 6) {background-color: #b0e562;}
}

.project-nxt-dashboard {
	.widget-dashboard {
		>* {flex-basis: 100%;}
		/* >* {flex-basis: clamp(100%, 768px, 33.333%);} */
		/* >* {flex-basis: clamp(100%, (768px - 100vw) * 1000, 33.333%);} */
		>*>.-value {text-align: right; padding-right: 1rem;}
	}
}

.module-home {
	.page.-content {position: unset;}
}

.home {
	display: flex; flex-wrap: wrap; gap: 16px; margin: 0 auto;
	* {box-sizing: border-box;}
	>* {flex: 0 0 100%; max-width: var(--max-width); overflow: hidden;}
	>.-banner {
		max-width: none;
		position: absolute; top: 0; left: 0; right: 0;
		height: 327px;
		background-size: contain;
		>div {
			text-align: center;
			font-size: 5rem;
			padding: 14rem 0;
			position: relative;
			z-index: 2;
			color: #4caf50;
			opacity: 0.8;
		}
		&::before {
			content: "";
			position: absolute;
			top: 0; left: 0;
			width: 100%;
			height: 100%;
			background: transparent url(banner-top-05-blur.jpg) repeat center center;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0; left: 0;
			width: 100%;
			height: 100%;
			background: transparent url(banner-top-05.jpg) no-repeat center center;
		}
	}

	>.-main-menu {
		--icon-size: 5rem;
		--text-color: #fff;
		display: flex; flex-direction: column;
		margin: 250px auto 0; padding: 0 0 32px 0;
		list-style-type: none;
		justify-content: center;
		max-width: var(--max-width);
		position: relative;
		z-index: 1;
		>li {
			height: 120px; position: relative;
			&:first-child {background-color: #FF9601;}
			&:nth-child(2) {background-color: #2C97EA;}
			&:nth-child(3) {background-color: #F0BC02;}
		}
		a {
			color: var(--text-color);
			position: absolute; width: 100%; height: 100%;
			padding: 2rem 0 0 2rem;
			display: flex; flex-wrap: wrap; flex-direction: row;
			opacity: 0.9;
			.icon.-main {
				font-size: var(--icon-size); width: var(--icon-size); height: var(--icon-size);
				margin: 0 1rem .6rem 0;
				color: var(--text-color);
			}
			.-title {
				font-size: 2.2rem;
				margin: 1.0rem 0 0 0;
			}
			.-desc {
				flex: 0 0 100%;
				margin: -2.0rem 0 0.6rem calc(var(--icon-size) + 1rem);
				font-size: small;
			}
			.icon.-more {
				margin: 0 0 1rem calc(var(--icon-size) + 1rem);
				background-color: rgba(255,255,255,0.5);
				border-radius: 50%;
			}
		}
	}

	>.-side {
		margin: 0 8px; flex: 1;
		>div {margin-bottom: 32px; border: 1px #D5DEE2 solid; border-radius: 8px;}
		h3 {padding: 12px 0; background: #F2F2F2; color: #555; text-align: center; font-weight: bolder; font-size: 1.2em;}
	}

	.-menu {
		margin:0 12px; padding: 0; list-style-type: none; font-weight: bold;
		>li {padding: 0; border-bottom: 1px #f4f4f4 solid;}
		>li:last-child {border: none;}
		>li>a {padding: 12px 8px; display: block;}
		>li>a>.icon {margin-right: 8px;}
	}

	>.-news, >.-activity {
		flex: 0 0 calc(100% - 8px); margin: 0 auto;
		h2 {margin: 0 0 16px 0; padding: 12px 24px; background-color: #0088CC; color: #BAD8EF; border-radius: 24px;}
		li {margin:0 0 40px 0; clear:both;}
		li>a>img {height:140px; width:200px; margin:0 10px 10px 0; display: block; float:left;}
		.timestamp {display: none; text-align: right; border-bottom: 1px #eee solid;}
		.summary {display: block; color: #999; padding: 4px;}
		.widget-content, .topic-list {
			display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; justify-content: space-between;
			box-shadow: none;
		}
		.widget-item, .topic-list>.ui-item {flex: 0 0 100%; overflow: hidden; margin: 0 0 8px 0; border: none; background-color: #f5f5f5; border-radius: 8px;}
		.topic-list h3 {font-family: sans-serif; font-weight: bold;}
		.topic-list>.ui-item>a {display: block; overflow: hidden;}
		.topic-list>.ui-item>a>img {width: 100%; height: auto;}
		.readall {flex: 1 0 100%; margin: 0; padding: 16px;}
	}
}

.project-chat-box {
	margin: 0 0 16px 0;
	>.ui-item {padding: 0; display: flex; flex-wrap: wrap; border-left: none; border-right: none;}
	>.ui-item>* {flex: 1 0 100%; padding: 0;}
	>.ui-item>.header {padding: 0; margin: 0; border-bottom: 1px #efefef solid; background-color: #f9f9f9;}
	>.ui-item>.header>h3 {padding: 0 8px; height: auto; font-size: 1em;}
	>.ui-item>div {padding: 16px 8px; display: flex; flex: 1;}
	>.ui-item img {width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px #ccc;}
	>.ui-item .form-text {width: 100%; height: 40px; padding: 0 24px; border-radius: 32px; cursor: text; line-height: 40px;}
	>.ui-item a {color:#666;}
	>.ui-item .btn.-link {padding: 0 8px; font-size: 10px; line-height: 8px;}
	>.ui-item .btn.-link>.icon {display: block;margin: 0 auto;}
	>.ui-item .btn.-link>span {padding: 0; line-height: 16px;}
}

.project-action {
		>.ui-item {border-left: none; border-right: none;}
		>.ui-item>.header {padding-bottom: 0;}
		>.ui-item>.detail {border-top: 1px #eee solid; border-bottom:none; }
		>.ui-item>.header .nav.-header {top: 2px; right: 2px; padding: 0;}

		.ui-album {justify-content: flex-start;}
		.ui-album>.ui-item {width: calc(33.3% - 4px); max-width: 97px;}
		.ui-album>.ui-item.-upload-btn {padding: 0; text-align: center; border-radius: 8px;}
		.ui-album>.ui-item.-upload-btn::before {padding: 0;}
		.ui-album>.ui-item.-upload-btn .btn {display: block; margin: 0; padding: 36px 0; font-size: 0.5em;}
		.ui-album>.ui-item.-upload-btn .btn>.icon {display: block; margin: 0 auto;}
		.ui-album>.ui-item.-upload-btn .btn>span {display: none;}

		.nav.-card {border-bottom: 1px #eee solid;}
		.-comment-form {padding: 12px;}
		.-comment-form .poster-photo {margin-right: 8px; box-shadow: 0 0 0 1px #e4e4e4;}
		.-comment-form .form-text {flex: 1; height: 1.55em; line-height: 1.55em; border-radius: 16px; background-color: #f5f5f5;}
		.-comment-form .form-textarea {flex: 1; padding: 6px 16px 14px 16px; height: 1em; line-height: 1.6em; border-radius: 16px; background-color: #f5f5f5;}

		.ui-item.-project-comment {margin: 0; padding: 0 8px 16px 32px; border: none; display: flex; position: relative; background-color: transparent;}
		.ui-item.-project-comment:first-child {padding-top: 8px;}
		.ui-item.-project-comment:last-child {padding-bottom: 8px;}
		.ui-card.project-action-comment .ui-item.-project-comment:last-child {padding-bottom: 8px; border-bottom: 1px #eee solid;}
		.ui-item.-project-comment>.header {flex: 0; padding: 0;}
		.ui-item.-project-comment .profile {font-weight: bold; display: inline-block; padding-right: 8px;}
		.ui-item.-project-comment>.header .poster-photo {width: 32px; height: 32px; margin: 0;}
		.ui-item.-project-comment .nav.-header {right: 16px; top: 5px;}
		.ui-item.-project-comment .nav.-header .sg-dropbox>a {background-color: transparent;}
		.ui-item.-project-comment .nav.-header .sg-dropbox>a:hover {background-color: transparent;}
		.ui-item.-project-comment.-hover-parent:hover>.-hover {background-color: transparent;}
		.ui-item.-project-comment.-hover-parent:hover>.-hover .sg-dropbox>a {background-color: #fff;}
		.ui-item.-project-comment .detail {flex: 1; padding: 4px 16px; border: 1px #ccc solid; border-radius: 24px; background-color: #f5f5f5;}

		.nav.-card .btn.-inactive {color: #ccc;}
		.nav.-card .btn.-inactive>.icon {color: #ccc;}
		.nav.-card .btn.-active {color: project; box-shadow: none;}
		.nav.-card .btn.-active>.icon {color: project;}
		.-activity-status {padding: 8px 8px 0; color: #ddd; font-size: 0.8em; font-style: italic; text-align: right; border-bottom: none;}

		iframe {display: block; margin: 16px auto;}

	.form.-action {
		.title {text-align: center; background-color: #fff; padding: 16px 0; margin: 8px;}
		.form-item {background-color: #fff; margin: 8px; border-radius: 8px; padding: 16px;}
		.form-item.-edit-action-save {background-color: transparent;}
	}
}

.project-card {
	&.-project h3 {background: #44ad3a; color: #fff; padding: 10px; line-height: 2em; border-radius: 0px; margin: 0px; text-align: center; }
	&.-info>.widget-listtile {padding: 8px;}
	&.-population .icon.-pop {width: 18px; height: 18px; font-size: 18px;}

	&.-guage h6 {font-family: sans-serif; font-size: 0.8em; color: #333; text-align: center;
		font-weight: bold;}
	&.-guage .sg-chart.-guage {min-height: auto; height: 140px; width: 140px;}
	&.-guage .sg-chart.-pie {min-height: auto; height: 135px; width: calc(100% - 0px);}
	&.-guage .sg-chart.-col {min-height: auto; height: 120px; width: 100%;}
	&.-guage>.widget-row {padding: 4px; justify-content: flex-start;}
	&.-guage>.widget-row>.-item {box-shadow: 0 0 0 1px #f3f3f3 inset; margin: 0 4px 4px 0; padding: 4px; flex: 0 0 calc(50% - 12px); height: 170px; max-width: 146px; overflow: hidden;}
	&.-guage>.widget-row>.-item:nth-child(n+4) {width: 260px;}
	&.-guage .sg-chart {margin: 0 auto;}

	&.-guage>.-value-base {
		display: flex; flex-wrap: wrap; align-items: flex-start;
		&.-guage>.-value-base>* {flex: 1 0 100%; font-size: 0.85em;}
		&.-guage>.-value-base>.-value-card {display: flex; flex-wrap: wrap; margin-bottom: 16px;}
		&.-guage>.-value-base>.-value-card>h5 {padding: 0; flex: 1 0 100%; text-align: center; background-color: #f7f7f7; margin-bottom: 8px; color: #333; height: 56px; line-height: 56px;}
		&.-guage>.-value-base .widget-listtile {flex: 0 0 100%; border-bottom: 1px #f5f5f5 solid;}
		&.-guage>.-value-base .widget-listtile>.-title {padding-left: 8px;}
		&.-guage>.-value-base .widget-listtile>.-title>.-title-text {height: 1.5em; line-height: 1.5em; overflow: hidden; font-weight: normal;}
		&.-guage>.-value-base .widget-listtile>.-leading {padding: 14px;}
		&.-guage>.-value-base .widget-listtile:nth-child(2)>.-leading {background-color: #999;}
		&.-guage>.-value-base .widget-listtile:nth-child(3)>.-leading {background-color: #d80000;}
		&.-guage>.-value-base .widget-listtile:nth-child(4)>.-leading {background-color: #009c00;}
		&.-guage>.-value-base .widget-listtile:nth-child(5)>.-leading {background-color: #10b2ff;}
		&.-guage>.-value-base .widget-listtile:nth-child(6)>.-leading {background-color: #ff4747;}
		&.-guage>.-value-base .widget-listtile:nth-child(7)>.-leading {background-color: #f60;}
		&.-guage>.-value-base .widget-listtile:nth-child(8)>.-leading {background-color: #8300a5;}
		&.-guage>.-value-base .widget-listtile:nth-child(9)>.-leading {background-color: #008000;}
		&.-guage>.-value-base .widget-listtile>.-leading>.icon {color: #fff; margin: 0;}
		&.-guage>.-value-base .widget-listtile>.-title>.-subtitle-text {font-weight: bold; padding-left: 1.3em;}
		&.-guage>.-value-base .widget-listtile em {font-style: normal; color: #0090d4;}
		&.-guage>.-value-base>.-value-table {font-size: 0.8em;}
		&.-guage>.-value-base>.-value-table>.widget-table td {padding: 4.5px 0; border-bottom: none;}
		&.-guage>.-value-base>.-value-table>.widget-table td:nth-child(1) {white-space: nowrap; max-width: 0; overflow: hidden;}
	}
}

.form-info {width: 210px;}
a.project-report-status-6 {background: #5484FF;}
#project-develop.inline-edit .inline-edit-field {color:#79009E;}
.module-project .box h3 {background-color: #F2F2F2; color: #21293c;}
.module-home .page.-primary>h2.title {display: none;}

.project-proposal-info {
	--bg-color: #fffaf1;
	--bg-hover-color: #fdf7ec;
	--header-bg-color: #f5f5f5;

	abbr {
		position: relative;
		input {opacity: 0; position: absolute; width: 0; height: 0;}
		span {
			display: flex; align-items: center; cursor: pointer; transition: color 0.2s ease;
			&::before {
				display: block;
				font-family: "Material Icons";
				-webkit-font-feature-settings: "liga";
				font-feature-settings: "liga";
				font-size: 2rem; width: 24px; height: 24px; margin-right: 8px;
				color: #999;
				transition: all 0.2s ease;
			}
		}
		input:checked + span {
			&::before {color: #4CAF50; transform: scale(1.1);}
		}
		&.checkbox {
			span {
				&::before {content: "check_box_outline_blank";}
			}
			input:checked + span {
				&::before {content: "check_box";}
			}
		}
		&.radio {
			span {
				&::before {content: "radio_button_unchecked";}
			}
			input:checked + span {
				&::before {content: "radio_button_checked";}
			}
		}
	}
	.-for-input {background-color: #fff; border-radius: 24px; padding: 0 16px;}
	.inlineedit-view {
		>label {display: block; margin-bottom: 8px;}
	}
	.inlineedit-method {
		>label {font-weight: bold; padding: 4px;}
	}
	.inlineedit-field {
		margin-bottom: 2px;
		display: block;
		>label {margin-bottom: 8px;}
		.-label {display: block; font-weight: bold;}
		.-for-input {margin-left: 2rem;}
		abbr {
			background-color: var(--bg-color);
			&:hover {background-color: var(--bg-hover-color);}
		}
		&.-hidden {display: none;}
	}
	.-section-title {background-color: var(--header-bg-color);}
	.-section-detail {
		>* {
			background-color: var(--bg-color);
		}
	}
	.-section-review {
		background-color: var(--bg-color); border-radius: 8px; margin: 8px; padding: 8px;
		.widget-inlineedit.-radio {background-color: transparent;}
	}
	/* >*>.widget-container {
		.widget-inlineedit {margin-bottom: 16px; border-radius: 8px; padding: 8px;}
		.widget-table {
			.widget-inlineedit {background-color: var(--bg-color); margin: 0; border-radius: 0; padding: 0;}
			.inlineedit-field {margin: 0;}
			.-for-input {margin: 0;}
		}
	} */
	.-list-order {
		padding: 0; margin: 0;
		counter-reset: item;
		list-style: none;
		.delete-button>.icon {color: #aaa;}
		label {font-weight: normal; width: auto;}
		>li {
			position: relative;
			margin: 0 0 8px 0;
			padding: 0 0 0 3rem;
			border-radius: 8px;
			/* background-color: #fff; */
			&::before {
				content: counter(item) ".";
				counter-increment: item;
				position: absolute;
				left: 8px;
				top: -0.1rem;
				width: 24px;
				height: 24px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
			}			
			&:hover {background-color: var(--bg-hover-color);}
		}
		.-for-input {margin: 0; flex: 1;}
		.inlineedit-view {
			display: flex; align-items: baseline; gap: 8px;
			>label {white-space: nowrap; margin: 0;}
			&:first-child {flex: 1 0 100%;}
		}
		.inlineedit-field {
			display: flex; gap: 8px; align-items: baseline;
			margin: 0;
		}
		.widget-inlineedit {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.widget-row {
			>.-item:first-child {flex: 1;}
		}
		.-new {
			.-hidden {display: none;}
		}

		/* .widget-inlineedit {
			margin: 0; padding: 2px 0; border-radius: 0;
			background-color: transparent;
		} */
		/* .-list {
			>.-item {
				&:first-child {flex: 1;}
			}
		} */
	}
	.-company {
		.widget-inlineedit {
			:first-child .-for-view {font-weight: bold;}
		}
		/* .widget-inlineedit {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.inlineedit-field {
			display: flex;
			align-items: center;
			gap: 8px;
			&:nth-child(1) {flex: 1;}
			.-for-input {flex: 1;}
			&.-hidden {display: none;}
		}
		.inlineedit-view {
			display: flex;
			gap: 8px;
			.-for-view {flex: 1;}
		} */
	}
	.-teacher {
		.widget-inlineedit {
			:first-child .-for-view {font-weight: bold;}
		}
		/* .widget-inlineedit {
			display: flex;
			flex-direction: column;
			gap: 8px;
			.inlineedit-field:not(.-hidden) {
				display: flex;
				align-items: center;
				gap: 8px;
			}
		}
		.inlineedit-field {
			&:nth-child(1) {flex: 1;}
			.-for-input {flex: 1;}
		}
		.inlineedit-view {
			display: flex;
			gap: 8px;
			label {font-weight: normal;}
			.-for-view {flex: 1;}
		} */
	}
	.-docs {
		.widget-card {
			background-color: var(--bg-color);
			margin-bottom: 32px;
			padding-bottom: 16px;
			border-radius: 8px;
		}
		li {
			&::before {
				top: 0.5rem;
			}
		}
		/* .-doc-list {
			font-weight: normal;
			a {font-weight: normal;}
		} */
	}

	&.-view-mode {
		.-list-order {
			.-for-view {margin: 0;}
		}
	}

	&.-edit-mode {
		.-list-order {
			>li {
				margin: 0 0 8px 0;
				padding: 8px 0 8px 3rem;
				background-color: #fff;
				&::before {
					top: 1.1rem;
				}
			}
		}
		.-docs {
			li {
				&::before {
					top: 1.3rem;
				}
			}
		}
	}


	&.-v1 {
		abbr {
			input {opacity: 1; position: relative; width: auto; height: auto; margin-right: 8px !important;}
			&.checkbox {
				span {
					&::before {display: none;}
				}
				input:checked + label>span {
					&::before {content: "check_box";}
				}
			}

		}
		.widget-inlineedit {
			&.inline-edit-item.-radio, &.inline-edit-item.-checkbox {
				margin: 4px 0;
    		label {
					display: inline-flex;
					margin: 0;
				}
				input {margin: 0 8px 0 0;}
			}
		}
		.project-proposal-info-section.-student {
			.-item {
				display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
				b {flex: 0 0 100%;}
			}
			.-for-input {margin: 0;}
			.inline-edit-item {
				margin: 0; padding: 0;
			}
			.inline-edit-field {margin: 0; padding: 0;}
		}
	}
}

.project-info {
	td:first-child {vertical-align: middle;}
	.project-info-latlng {width: calc(100% - 48px); margin-right: 32px;}
	.project-pin {position: absolute; margin-top: 4px; right: 16px;}
}

.project-report.-s3	{
	.signall {margin:60px 0 30px; text-align:center;}
	.signall div {margin-bottom:20px; height:10em;}
	div>p {text-indent: 1cm;}
}

#project-standard {
	.section {margin: 0 0 40px 0; border:1px #ccc solid; padding:10px;}
	.section>.form-item>label {margin: 20px 0;background-color: #eee; padding: 8px; border:1px #ccc solid;}
	.description {font-size: 1em; border-top:2px #ccc solid; margin-top:20px;}
	.description h3 {font-family: Arial; color:#333; font-size:1em; font-weight:bold;}
	.description h4 {font-family: Arial; color:#333; font-size:1em; font-weight:bold;}
}

.section.-indicator {
	position: relative;
	>.form-item {margin-right:220px;}
	.comment {margin:10px 0 0 0; padding:0 10px 10px 10px; width:180px; height: 90%; position:absolute; top:16px; right:16px; }
	.comment h4 {text-align: center;}
	.comment textarea {width:100%; height:90%; padding:0;}
}

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

@media (min-width:40em) { /* 640/16 = 40 */
	.toolbar.-main .search-box {width:240px; margin:0; border:none; }
	.toolbar.-main .search-box #search-box {opacity: 0.8;}

	.project-proposal-info {
		.-company {
			.widget-inlineedit {
				flex-direction: row; flex-wrap: wrap;
			}
			.inlineedit-field {
				&:nth-child(1) {flex: 1 0 100%;}
				&:nth-child(2) {flex: 1 0 100%;}
				&:nth-child(n+3) {flex: 0 0 calc(33.333333% - 8px);}
			}
		}
		.-teacher {
			.widget-inlineedit {
				flex-direction: row; flex-wrap: wrap;
			}
			.inlineedit-field {
				&:first-child(1) {flex: 1;}
				&:nth-child(n+2) {flex: 0 0 calc(50% - 4px);}
			}
		}
	}
}

@media (min-width: 43.75em) { /* 700/16 : Responsive Menu */
	.project-nxt-dashboard {
		.widget-dashboard {
			>* {flex-basis: 49%;}
		}
	}

	.page {
		&.-header {
			border-bottom: 48px var(--mainnav-bg-color) solid;
			header {width: 290px; height: 64px; margin-top: 2px; background-size: 280px 60px; z-index: 1101; pointer-events: none;}
		}
		&.-nav {
			margin-left: 0;
			flex-wrap: wrap;
			>.nav.-main {order: 99; padding-left: 60px; flex: 1 0 calc(100% - 60px);}
		}
		&.-content {padding-top: 96px;}
	}

	.nav.-app-menu {
		flex-direction: row; flex-wrap: wrap;
		>.-item {
			flex: 0 0 33.3333333%;
			padding: 0 16px; height: 18rem;
			&::after {display: block;}
			&:nth-child(3n)::after {display: none;} /* last column, hide right border */
			&:nth-last-child(-n + 3)::before {display: none;} /* last row, hide bottom border */
		}
	}

	.module-home {
		.page {
			&.-content {padding-top: 96px;}
		}
	}

	.home {
		>.-main-menu {margin-top: 231px;}
	}

	.widget-paperlist {
		flex-direction: row;
		>* {flex: 0 0 30%; margin: 0;}
	}
}

@media (min-width:48em) { /* 768/16 = 48 iPad */
	.project-nxt-dashboard {
		.widget-dashboard {
			>* {flex-basis: 33.33333333%;}
		}
	}
	.home {
		>.-banner {
			height: 460px;
		}

		>.-main-menu {
			flex: 1 0 100%; flex-direction: row; gap: 16px;
			margin-top: 320px; padding: 0 0 32px 0;
			>li {
				flex: 0 0 31%; height: 140px;
				border-radius: 16px;
			}
			a {
				.-title {font-size: 2.3rem;}
			}
		}

		>.-side {flex: 0 0 230px;}

		>.-slidenews {
			flex: 1;
			h3 {padding: 12px 8px; margin: 0; position: absolute; top: 0; left: 0; right: 0; background: #fff; opacity: 0.8; font-size: 2.4rem;}
			.photo {margin: 0; padding: 0;}
			.image {width: 100%; margin: 0; padding: 0; border: none;}
			.timestamp, .footer {display: none;}
			li {position: relative;}
		}

		>.-news , >.-activity {
			.widget-item, .topic-list>.ui-item {
				flex: 0 0 32%; height: 200px;
				>a {max-height: 120px;}
				>a>img {width: calc(100% - 2px);margin: 1px 0 0 1px; border-radius: 8px 8px 0 0;}
				.photo {height: 100%; margin: 0;}
			}
		}
	}
}

@media (min-width:80em) { /* 1280/16 = 80 */
	.page {
		&.-content {padding-top: 102px;}
	}

	.home {
		>.-banner {
			height: 600px;
		}

		>.-main-menu {
			margin-top: 460px;
		}
	}
}

/* hide project element */
.package-footer {display: none;}
nav#project-year {display: none;}
ul.project-list {display: none;}
#project-planning-view-budget,
#project-planning-view-todo,
#project-planning-view-develop {display: none;}
.project-detail-childdev {display: none;}
.nav.-submodule.-project .ui-item.-situation {display: none;}
.project-info-section.-plan .sg-tabs>.tabs>li:nth-child(3) {display: none !Important;}
/* Hide submpdule menu */
/*
.nav.-module.-project {display:none;}
.nav.-submodule.-my>ul>li:nth-child(3) {display:none;}
.nav.-page .ui-item {padding-right:4px;}
*/

@media print {
	body {margin: 0; padding: 0; font: 14pt/18pt "TH Sarabun New","TH SarabunPSK","Browallia New","BrowalliaUPC", Tahoma, Arial, Verdana, sans-serif; color: #000;}

	h1,h2,h3,h4,h5 {font: 16pt/18pt "TH Sarabun New","TH SarabunPSK","Browallia New","BrowalliaUPC", Tahoma, Arial, Verdana, sans-serif;}

	h2 {font-size:1.1em;}
	h3 {font-size:1.1em;}
	h4 {font-size:1.1em;}
	h5 {font-size: 1.1em; margin:1em 0 0 0; }
	h6 {font-size: 1.1em; margin:1em 0 0 0; }

	#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; border:none;}
	.widget-table>thead>tr>th {padding:2px;}
	.noprint {display: none;}
	.pagebreak {color: transparent; border: none; page-break-after:always;}

	/* body {padding:0 0 0 1.0in; font: 14pt/14pt "TH Sarabun New", Tahoma, Arial, Verdana, sans-serif; color: #000} */

	.page.-page, .page.-content, .page.-primary, .page.-main {margin:0; padding:0;}
	body#project h3 {font-size:1.4em;}
	body#project h4 {font-size:1em; margin:1em 0; font-family: "TH Sarabun New","TH SarabunPSK","Browallia New","BrowalliaUPC", Tahoma, Arial, Verdana, sans-serif; font-weight: bold;}


	.page.-header { height: 2em; background: #fff none center bottom no-repeat; position: relative;  box-shadow: none; overflow:hidden; display: none;}
	.page.-header header {width:100%; height: 100%; background: #fff none; text-indent: 0;}
	.page.-header h1 {height: auto; margin:0; padding: 0; font-size: 1.6em; line-height: 35px;}
	.page.-header nav {display: none;}
	.toolbar.-main form {display: none;}
	.toolbar.-main nav {display: none;}
	.project--info .tabs {display: none;}
	#project-map {display: none;}
	.reportbar {display: none;}

	.project__report .fixed-width {width:10em; margin: 0; padding: 0;}
	.widget-table td.col-money {text-align: right; padding-left: 10px; padding-right: 10px;}
	#project-form-m1-tr {line-height:14pt;}
	#project-form-m1-tr>tbody>tr>td.col-money {text-align: center;}

	body#project .project-report.-s3 .project-cover-page h3 {font-size:30pt; line-height: 34pt; margin:0; padding:0; text-indent: 0;}
	.project-report.-s3 .col-summary img.photo {height: 3.5cm;}
	.project-report.-s3 .signall {padding-top:0cm;}

	/*
	.project__report h3 {font-family: Tahoma; font-size: 1.4em;}
	.project__report h4 {font-family: Tahoma; font-size: 1.2em;}
	*/
}