/*
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
*/

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

:root {
	--max-width: 1600px;
	--primary-color: #2dba9a;		/* #2dba9a, #02B417 */
	--secondary-color: #ECF1EC;
	--bg-color: #ECF1EC;
	--header-bg-color: #26A387;	/* #26A387, #02B417 */
	--card-bg-color: #fff;
	--footer-bg-color: #eee;
	--head-bg-color: #e5e5e5;
}

.theme-dark {
	--footer-bg-color: #909090;
	--head-bg-color: #525252;
}

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

* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 4px 0;
	font-family: "Prompt";
	line-height: 1.2em;
	font-weight: normal;
}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.3em;}
h5 {font-size: 1.2em;}
h6 {font-size: 1.1em;}

.page {
	&.-header {
		height: var(--header-height);
		background-color: var(--header-bg-color);
		opacity: 1;
		align-content: center;
		header {
			height: 48px;
			flex: 1 0 100%;
			background: #000 url(logo-header.png) center center no-repeat;
			background-size: contain;
			h1 {
				margin:0; padding: 0; font-size: 1.6em; line-height: 48px; text-align: center;
				/* background: transparent url(logo.jpg) center center no-repeat; background-size: contain; */
				a {display: block; color: #7cd2ff;}
			}
		}
	}

	&.-nav {
		margin: 0 auto;
		>nav {
			&.-owner {
				>*>*>a>.icon {color: #fff !important;}
			}
			&.-main {
				>ul>li>a {font-weight: bold; color: #ffffff;}
			}
		}
	}

	&.-content {padding: 96px 0 0 0;}

	&.-footer {
		background-color: #111;
		color: #aaa;
	}
}

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

.nav.-app-menu {
	--border-color: #dbeaf1;
	--bg-color: #eef9ff;
	flex-direction: column;
	background-color: var(--bg-color);
	justify-content: center;
	gap: 0;
	margin: 32px 0;
	padding: 0;
	* {
		box-sizing: border-box;
	}
	> .-item {
		background-color: transparent;
		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: 2rem;
				padding: 4px 0;
				height: 3rem;
			}
			.-desc {
				color: #999;
				height: 8rem;
				flex: 0 0 70%;
				margin: 0 auto;
				white-space: normal;
				text-align: center;
			}
			.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-card {
	border-radius: 8px;
}

.widget-form {
	--row-input-bg-color: #faebd7;
	--row-input-border-color: #ffd9a6;
	.theme-dark & {
		--row-input-bg-color: #897e6f;
		--row-input-border-color: #a68b66;
	}
	.-row-input {
		background-color: var(--row-input-bg-color);
		border: 2px var(--row-input-border-color) solid;
		&:hover {background-color: var(--row-input-bg-color);}
	}
}

.widget-appbar {
	margin-bottom: 8px;
	>.-leading {border-radius: 8px 0 0 8px;}
	>.-trailing {border-radius: 0 8px 8px 0;}
	>.-nav {
		>ul {
			flex: 1;
			>div {flex: 1;}
		}
	}
}

.project-list {
	&.-proposal {
		.-row-input {
			td:first-child {border-left: 4px #ffd9a6 solid;}
		}
		tr.-version-1>td:first-child {border-left: 4px #ccc solid;}
		tr.-version-2>td:first-child {border-left: 4px green solid;}
	}
}

.project-summary {
	background: var(--primary-color); color: #fff;
	p {margin:0; padding:0 0 0 16px; white-space: nowrap;}
	.itemvalue {font-size: 1.2em; line-height:1.2em;}
	>*>* {flex: 0 0 33.33%; padding: 8px;}
	>div>span {display:block;}
}

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

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

/* Responsive menu */
@media (min-width: 43.75em) { /* 700/16 = 43.75 */
	.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 */
		}
	}
}

@media (min-width: 45em) { /* 720/16 = 45 */
}

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

@media (min-width: 50em) { /* 800/16 = 50 */
	.page.-nav > .nav.-owner li.-profile > a > span {
		display: inline;
	}
}

@media (min-width: 56.25em) { /* 900/16 = 56.25 */
}

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

@media (min-width: 80em) { /* 1280/16 = 80 */
	.page {
		&.-content {
			padding: 104px 8px 8px 8px;
		}
	}
	.widget-appbar {
	.widget-appbar {
		border-radius: 4px;
		>.-leading {border-radius: 4px 0 0 0;}
		>.-trailing {border-radius: 0 4px 0 0;}
		>.-nav {border-radius: 0 0 4px 4px;}
	}
	}
}

@media print {
	body {
		font-size: 16pt;
		line-height: 16pt;
		font-family: "TH Sarabun New", "BrowalliaUPC", "Browallia New", sans-serif;
	}
	h1, h2, h3,h4, h5 {
		color: #000;
		font-size: 18pt;
		font-family: "TH Sarabun New", "BrowalliaUPC", "Browallia New", sans-serif;
	}
}