/**
 * Theme Name:  SoftGanz Flood Monitoring
 * Theme URI: http://www.softganz.com
 * Description: Flood Monitoring is a SoftGanz simple theme. This work is distributed under the terms of the GNU General Public License. Please leave the link in the footer, or donate if you would like to remove it.
 * Copyright: 2008
 * Modify  :: 2025-11-22
 * Version :: 2
 * Author  :: Little Bear
 * Author URI: http://www.softganz.com
 * Tags    :: fixed width, simple, clean, widget ready, two columns, blue
 */

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

:root {
	--max-width: 1280px;
	--header-height: 48px;
	--bg-color: #F0F8FF;
	--font-color: #444;
	--link-color: #17599c;
	--link-hover-color: #1f84eb;
	--link-white-color: #fff;
	--mainnav-bg-color: #B2E6D2;
	--mainnav-menu-color: #005433;
	--mainnav-menu-hover-text-color: #1652CF;
	--mainnav-menu-hover-bg-color: transparent;
	--appbar-bg-color: #eaa3ff;
	--appbar-text-color: #9300af;
	--appbar-nav-bg-color: #ffdcff;
	--appbar-nav-btn-bg-color: #eaf3ff;
	--appbar-nav-text-color: #9300af;
	--card-bg-color: aliceblue;
	--side-nav-hover-bg-color: #eee;
	--card-bg-color: #fff;
	--form-child-bg-color: #fff;
	--form-child-font-color: #707070;

	--chat-wrapper-bg-color: transparent;
	--chat-box-bg-color: #fff2e0;
	--slider-bg-color: #ededed;
	--slider-link-bg-color: #d3d3d3;
}

.module.-app-theme-dark {
	--bg-color: #0B0B0C;
	--font-color: #a5a5a5;
	--card-bg-color: #121212;
	--form-child-bg-color: #353535;
	--form-child-font-color: #707070;
	--appbar-bg-color: #eaa3ff;
	--appbar-text-color: #9300af;
	--appbar-nav-bg-color: #ffdcff;
	--appbar-nav-btn-bg-color: #eaf3ff;
	--appbar-nav-text-color: #9300af;
	--card-bg-color: #121212;
	--side-nav-hover-bg-color: #eee;

	--chat-box-bg-color: #b8b8b8;
	--chat-wrapper-bg-color: #696969;
	--slider-bg-color: #363636;
	--slider-link-bg-color: #d3d3d3;
}

/* @group General */
* {box-sizing: border-box;}
body {background-color: var(--bg-color); color: var(--font-color);}
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family: "Prompt";}
h2 {font-size: 2.0rem;}
h2 {font-size: 1.9rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.7rem;}
h5 {font-size: 1.7rem;}
h6 {font-size: 1.7rem;}
h2.header {margin: 5px 0 10px; padding: 5px 10px; text-align: right; font-size: 1em; font-weight: normal; border-radius: 5px;}
h2.title {margin: 0; padding: 16px; font-weight: normal;}
/* @end */

/* @general class */
.iframe-clean {overflow-x: hidden; border: none;}
/* @end */

.page {
	&.-header {
		background-color: var(--mainnav-bg-color);
		header {width: 40px; height: 40px; background-image:url(logo.png?v3); background-size: cover; margin: 4px 0 0 4px; position: absolute; border-radius: 50%;}
	}
	&.-nav {
		margin-left: 48px;
		>.nav>ul>li>a {color: var(--mainnav-menu-color);}
		>.nav.-owner>ul>li>a>.icon {color: #714400;}
	}
}

/* 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)}
#colorbox.-full {max-width: var(--max-width);}

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: var(--form-child-bg-color); box-shadow: 0 0 0 1px var(--form-child-bg-color) inset; color: var(--form-child-font-color);}
.form-select {background-color: var(--form-child-bg-color); box-shadow: 0 0 0 1px var(--form-child-bg-color) inset; color: var(--form-child-font-color);}

/* widget */
.widget-card {background-color: var(--card-bg-color); border-radius: 8px;}
.widget-table {
	background-color: var(--card-bg-color);
	>thead {background-color: var(--card-bg-color);}
	>tbody>tr:hover {background-color: var(--card-bg-color);}
	td {border-bottom: 1px var(--bg-color) solid;}
	th {border-right: 1px var(--card-bg-color) solid;}
}

#cboxLoadedContent {background-color: var(--bg-color);}
.box-page>.widget-appbar {background-color: var(--mainnav-bg-color);}

.topic-list {
	display: flex; flex-wrap: wrap; padding: 0 8px;
	>* {flex: 1 0 100%; margin: 0; padding: 0;}
}

.widget-nav {
	&.-button-menu {
		>ul>li {position: relative;}
		>ul>li>a {background-color: #999; line-height: 4.8rem; border-radius: 4.8rem; margin: 8px 0; align-items: center; padding: 0; color: #fff;}
		>ul>li>a>span {text-align: center; font-size: 1.6rem;}
		>ul>li>a>.icon {background-color: #fff; border-radius: 50%; padding: 12px; opacity: 0.8;}
		>ul>li:nth-child(1)>a {background-color: #92C739;}
		>ul>li:nth-child(2)>a {background-color: #11B0DE;}
		>ul>li:nth-child(3)>a {background-color: #EB1A2F;}
		>ul>li:nth-child(4)>a {background-color: #81308D;}
		>ul>li:nth-child(5)>a {background-color: #FEA411;}
		>ul>li:nth-child(6)>a {background-color: #622FCF;}
		>ul>li:nth-child(7)>a {background-color: #297FB8;}
		>ul>li:nth-child(8)>a {background-color: #E91668;}
		>ul>li:nth-child(9)>a {background-color: #36485F;}
		>ul>li:nth-child(10)>a {background-color: #12AA84;}
		>ul>li:nth-child(11)>a {background-color: #9B59B3;}
		>ul>li:nth-child(12)>a {background-color: #576475;}
		>ul>li:nth-child(13)>a {background-color: #7E8C8D;}
		>ul>li:nth-child(14)>a {background-color: #3CB04A;}
		>ul>li:nth-child(15)>a {background-color: #BD1B85;}
		>ul>li:nth-child(16)>a {background-color: #FD6400;}
	}
}

.sponsor {
	background-color: transparent;
	a {display: block;}
	img {display: block; overflow: hidden;}
	>.widget-row {flex-wrap: wrap; gap: 8px; margin: 16px 4px; padding: 0; justify-content: start;}
	>*>.-item {background-color: #FCFCF7; border-radius: 6px; overflow: hidden;}
	>.-logo>.-item {flex: 0 0 10.3%; max-width: 80px;}
	>.-logo img {width: 100%; height: 100%;}
	>.-banner>.-item {flex: 0 0 100%; background-color: #e4eee7;}
	>.-banner img {width: 100%; height: auto;}

	>.-sponsor img {width: 100%; height: 100%; display: block; max-width: 140px; max-height: 140px;}

	>.-premium {
		gap: 8px; margin: 0 0 4px 0;
		>.-item {flex: 0 0 18%;}
		>.-item:nth-child(n+6) {display: none;}
	}

	>.-gold {
		gap: 4px;
		img {max-width: 100px; max-height: 100px;}
		>.-item {flex: 0 0 15.5%;}
	}

	>.-silver {
		gap: 4px;
		img {max-width: 100px; max-height: 100px;}
		>.-item {flex: 0 0 15.5%;}
	}
}

.home-donate {margin: 0;}
.home-banner>img {display: block; width: 100%;}

.home-hots {
	background-color: #fff;
	padding: 8px;
	border-radius: 8px;
	margin-bottom: 32px;
	>h2 {text-align: left; padding: 8px; margin: 0 0 16px 0; font-size: 2.0rem;}
	.widget-content {
		gap: 1%; display: flex; flex-direction: column;
		padding: 0 8px;
		.widget-item {
			margin: 0 0 32px 0;
			>h3 {font-family: 'Arial'; font-size: 1.6rem; font-weight: bold; margin: 0; padding: 0; display: none;}
			>h3>a {color: #000;}
			>.photo {border-radius: 8px; overflow: hidden;}
			>.summary {height: 6.3rem; overflow: hidden; display: none;}
			>.timestamp {display: none;}
			>.footer {display: none;}
		}
	}
}

.flood-hots-article {
	flex-wrap: wrap; margin: 0 4px 8px 4px; gap: 4px;
	>.-item {flex: 0 0 calc(25% - 3px); max-height: 120px;}
	img {width: 100%; height: 100%; border-radius: 8px;}
}

/** @group Flood Module */

.flood-warning {
	color: #fff;
	padding: 8px; display: flex; gap: 8px; align-items: flex-start;
	>h3 {padding: 0; margin: 0; font-weight: bold;}
	>.-flag {display: block; width: 32px; height: 32px; border-radius: 50%; background: #fff none center center no-repeat; background-size: 26px;}
	>.-text {
		flex: 1;
		>h3 {color: #fff; margin: 0;}
	}
	&.-normal {
		background-color: #5595ff; color: #f4ff92; font-size: 1.6rem; text-align: center;
		>.-flag {background-color: transparent; display: none;}
		>.-text {text-align: center;}
	}
	&.-green {
		background-color: #009322;
		>.-flag {background-color: #82e682; background-image: url('flag-green.png');}
	}
	&.-yellow {
		background-color: #efef39; color: #6c6c00;
		>.-text>h3 {color: #6c6c00;}
		>.-flag {background-image: url('flag-yellow.png');}
	}
	&.-red {
		background-color: #ff5050; color: #ffdddd;
		>.-text>h3 {color: #ffdddd;}
		>.-flag {background-image: url('flag-red.png');}
	}
	&.-highload {
		background-color: #5595ff; color: #f4ff92; font-size: 1.6rem; text-align: center;
		>.-flag {display: none;}
	}
}

.flood-camera-basin {
	margin: 0 0 16px 0;
	.-basin-map img {width: 100%; height: auto;}
}

/* Flood Camera In Home Page */
.flood-camera {
	gap: 4px; margin: 0 4px; padding: 0 0 8px 0; flex-wrap: nowrap;
	* {box-sizing: border-box;}
	.-photo {width: 100%; height: 100%; margin: 0; display: block;}
	.-photo:hover {opacity: .8;}
	.-status-dot {width: 8px; height: 8px; display: block; position: absolute; top: 2px; right: 2px; border-radius: 50%;}
	p {margin:0;}
	.-photo {width: 177%; height: 100%; position: absolute; margin-left: -40%;}
	.-timestamp {position: absolute; top: 4px; right: 4px; text-align: center; background-color: #fff; padding: 2px; opacity: 0.5; border-radius: 4px;font-size: 0.5rem; line-height: 1.0rem; pointer-events: none;}
	.-date {display: none;}
	.-ad {width: 16px; height: 16px; margin: 0; left: 2px; bottom: 16px; position: absolute;}
	.loader {display: block; margin: 0 auto;}
	.-camera-no {font-size: 1rem; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; display: block; text-align: center; border-radius: 50%; position: absolute; z-index: 1; left: 2px; top: 2px; background-color: #1b5eff; color: #fff;}
	.-camera-status {position: absolute; right: 0; bottom: 2px; z-index: 2; border-radius: 50%; color: #fff; width: 12px; height: 12px; font-size: 12px; display: none;}
	.-error {position: absolute; top: calc(50% - 1.3em); margin: 0; padding: 5px 0; font-size:0.6em; height: 1.3em; line-height: 1.4em; width: auto; left: 4px; right: 4px; text-align: center; background: #ccc; color: #fff; pointer-events: none;}
	.-timestamp>span {display: block;}
	.-ad img {width: 100%; height: 100%; border-radius: 50%;}
	.-banner {width: 100%; height: 100%; display: block;}
	.-status-msg {padding: 2px 0; position: absolute; background-color: #fff; top: calc(50% - 2rem); left: 8px; right: 8px; border-radius: 24px; text-align: center; opacity: 0.6; pointer-events: none; font-size: 0.8rem;}

	>.-item {
		flex: 0 0 calc(27% - 4px); margin: 0; padding: 0; overflow: hidden; position: relative; border: none; border-radius: 4px;
		.detail {padding: 0; height: 100%;}
		.-title {position: absolute; margin: 0; padding: 0px 0; bottom: 0; left: 0; right: 0; flex: 0 0 100%; background-color: #999; color: #fff; font-size: 0.8rem; border-radius: 2px; z-index: 1; text-align: center; opacity: 0.9; height: 1.4rem; line-height: 1.4rem;}
		>div {height: 100%;}
		>div>a {display: block; height: 100%; border: none; border-radius: 3px; overflow: hidden;}
		>.-update .-error {display: none;}
		>.-not-update .-error {display: block; display: none;}
		>.-update .-camera-status {display: block;}
		&::before { content: ""; float: left; padding-top: 100%; }
	}
}

/* Flood Camera View Page */
.flood-camera-view {
	display: flex; flex-direction: row; flex-wrap: wrap; margin: 0; overflow: auto; position: relative;
	.-timestamp {
		position: absolute; top: 4px; right: 4px; text-align: center; background-color: #fff; margin: 0; padding: 4px; opacity: 0.8; border-radius: 4px; font-size: 0.8em; font-weight: bold; line-height: 1.3em;
		>span {display: block;}
	}

	.-slider {
		margin: 8px 0; padding: 0px; z-index: 1; overflow: hidden; flex: 0 0 calc(100% - 8px); display: flex; align-items: center; height: 40px; gap: 10px; border-radius: 24px; background-color: var(--slider-bg-color);
		#slider-range-wrapper {flex: 1;}
		#slider-range {height: 6px;}
		a {width: 40px; height: 40px; margin: 0; padding: 8px; display: block; text-align: center; border: none; border-radius: 50%; background-color: var(--slider-link-bg-color);}

		.ui-widget-content {border: none;}
		.ui-slider-horizontal .ui-slider-handle {width:16px; height:16px; margin-top:-1px; background: #ff0000; border:none; box-shadow: none; border-radius: 50%;}
		.ui-slider-horizontal .ui-slider-range {background: #ff0000;box-shadow: none;}
	}

	.-ad {
		display: flex; flex: 1 0 100%; margin: 8px 0; position: relative; border-radius: 4px; font-size: 1.2rem; align-items: center;
		background-color: #fffdf6;
		&.-multiple {display: block;}
		>span {flex: 1; padding: 0 16px;}
		img {width: 55px; height: 55px; margin: 5px; border-radius: 8px;}
	}

	.-photo {
		flex: 1 0 100%; position: relative;
		.-image {width: 100%; height: auto; display: block;}
		.-overlay {position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}
		.widget-scrollview:has(.photo-thumbnail) {margin: 0 8px; width: calc(100% - 16px);}
	}

	.-input-checkbox abbr span::after {display: block; font-family: "Material Icons"; -webkit-font-feature-settings: "liga"; font-size: 3.2rem; content: "toggle_off"; border-radius: 50%; color: #e0e0e0;}

	.-status {
		position: absolute; top: calc(50% - 2rem); left: 8px; right: 8px; text-align: center; background-color: #fff; padding: 32px 0 8px 0; border-radius: 48px; opacity: 0.6; pointer-events: none; z-index: 2;
		&:before {content: "error"; font-family: "Material Icons"; -webkit-font-feature-settings: "liga"; display: block; position: absolute;
			width: 3.0rem; height: 3.0rem; font-size: 3.0rem; color: red;
			top: 8px; left: calc(50% - 1.5rem);
			opacity: 1.2; border-radius: 50%; z-index: -1; padding: 0;}
	}

	.-thumbnails {
		gap: 4px; overflow: auto; margin: 0;
		a {display: block; height: 100%;}
		img {display: block; width: 100%; height: 100%;}
		p {margin: 0; padding: 4px 0; width: 100%; font-size: 1rem; line-height: 0.8rem; white-space: nowrap; position: absolute; bottom: 0; text-align: center; pointer-events: none; background-color: #666; color: #fff; align-content: center;}
		>.-item {flex: 0 0 98px; overflow: hidden; flex: 0 0 100px; height: 100px; border-radius: 4px;}
		>.-item.-realtime {
			p {background-color: green;;}
		}
	}
	>.-description {
		margin: 8px 0; padding: 8px;
	}
	.flood-for-delveloper {flex: 0 0 100%;}
}

.module-map {
	.page.-header {display: none;}
	.page.-footer {display: none;}
	.package-footer {display: none;}
	.page.-header .wrapper, .page.-content, .page.-footer>.wrapper {max-width: 100%;}
}

/* @Mapping */
.module-map {
	height: 100vh;
	* {box-sizing: border-box;}
	h2.title {display:none;}
	.page.-header, .module-app-map .page.-footer {display:none;}
	.page.-page {width:100%;height:100%;margin:0;padding:0;background:#fff;border-radius:0;}
	.page.-content {width:100%;margin:0;padding:0; max-width: none;}
	.page.-primary {width:100%;margin:0;padding:0;}
	.package-footer {display:none;}
	.page.-footer {display:none;}

	.widget-appbar {margin: 0;}

	.nav {
		&.-map {
			width:100%; height: 48px; background-color: #55C400; position: relative; opacity:1.0;}
		>ul {
			height: 48px;margin:0;padding:0;list-style-type:none;background-color: #55C400; display: flex; align-items: center;
			>li {
				height:100%;display:block;float:left;border:none; align-items: center;
				>a {padding: 0 10px; display: block; outline: none; color: #fff; height: 100%;}
				>form {margin:0;border:none; width: 10rem;}
				>form label {display:none;}
				>form .form-text {border:none;border-radius:2px; opacity: 1;}
				>&.active {background-color: #60DD00;}
			}
			>li:first-child {border-left:none;}
			>li:nth-child(2) {align-content: center;}
			>li:nth-child(n+2):hover>a {background-color: #60DD00;}
		}
	}
	.app-footer {height:24px;line-height:24px;position:absolute;bottom:20px;z-index:100;display:none;}
	.close {position:absolute;right:0;}

	.map-list {
		margin:0; padding:0; list-style-type: none;
		>li {
			margin:16px 0; padding: 4px; border:1px #ddd solid;box-shadow: 0px 5px 5px #ddd;
			>a {font-weight: bold;}
		}
	}

	div.photo {
		max-height:200px; overflow:auto;
		ul.photo {
			text-align:left;margin:0; padding:0; list-style-type: none;
			img {height:60px;display:block;}
			>li {
				width:auto; margin:2px; display:inline-block; position:relative;
				.ui-action {width:auto;font-size:10px;height:16px;line-height:16px;text-align:right;right:1px;bottom:1px;text-align:center;position:absolute;background:#fff;opacity:.8;}
			}
		}
		ul.doc {
			list-style-type:decimal;text-align:left;margin:20px;padding:20px;
			>li {list-style-type:decimal;display:block;}
			>li .ui-action {padding:0 5px;display:inline-block;text-align:right;}
		}
	}

	.progress {clear:both;position:relative; width:200px; background:#fff;border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
	.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
	.percent { position:absolute; display:inline-block; top:3px; left:48%; }


	.map-box {
		display: none; position: absolute; left: 0; top: 48px; z-index: 100;
		width: 20rem; height: calc(100vh - 48px); padding: 4px;
		background-color: #fff;
		overflow: auto;
		h3 {padding: 8px; font-size: 1.2em; background-color:#ddd;}
		>h3 {background-color:transparent;}
		.box {margin:8px 0; padding:0 0 8px 0; box-shadow: 0 0 0 1px #ccc;}
		.form {margin:0;}
		.form-item {margin:0 8px;}
		>.nav {
			position: absolute; right: 8px; z-index: 1;
			a {border: 1px #eee solid; border-radius: 4px; width: 24px; height: 24px; display: inline-block; padding: 4px; background: #fff;}
		}
		.form-item.-edit-mapping-submit {margin: 16px 8px;}
	}

	.nav.-map a>.icon {margin-top: 12px;}
	.nav.-map .profile-photo {width: 24px; height: 24px; border-radius: 50%; margin-top: 12px;}
	.nav.-map .search-box button {background-color: #fff;}

	@media (min-width: 43.75em) { /* 700/16 : Responsive Menu */
		.map-box {width: 40rem;}
	}
}
/* @end */





.module.-softganz-app {}
	.module.-softganz-app .page.-header,
	.module.-softganz-app .page.-footer,
	.module.-softganz-app .package-footer {display: none;}
	.module.-softganz-app .toolbar.-main.-flood {margin: 0; position: fixed; width: 100%;z-index: 999999; top: 0; border-bottom: 1px #eee solid; background-color: #f5f5f5;}
	.module.-softganz-app .toolbar.-main.-flood>h2 {display: none;}
	.module.-softganz-app .page.-content {padding: 0; margin:  0;}
	.module.-softganz-app .nav.-submodule {background-color: #f5f5f5;}
	.module.-softganz-app .flood-chat-send .ui-item {border-top: none;}
	.module.-softganz-app .nav.-submodule .ui-nav .ui-item a {padding: 12px 11px 11px 12px;}
	/* .module.-softganz-app.-module-has-toolbar .page.-content {padding-top: 48px;} */

	.module.-softganz-app .sg-toolbar.-flood {display: none;}
	.module.-softganz-app .page.-primary>h2.title {display: none;}
	.module.-softganz-app .flood-app-camera-view>.header {display: none;}

/* Light Theme Color */
	a {color: #17599c;}
	a:hover {color: #1f84eb;}
	h1, h2, h3, h4, h5, h6 {color: #E55B00;}
	h2.header {color: #666; background-color: #EEEEEE; border: 1px #CCCCCC solid;}


	.flood-camera .-update .-title {color: #ecffea; background-color: #009322;}
	.flood-camera .-not-update {color: #fff; background-color: #999;}
	.flood-camera h3>a {color:#fff;}
	.flood-camera h3>a:hover {color:#eee;}
	.flood-camera>.-item .-status-dot {border: 2px #fff solid;}
	.flood-camera>.-item>.-update .-camera-status {color: #ccffcc;}
	.flood-camera>.-item>.-update .-status-dot {background-color: green;}
	.flood-camera>.-item>.-not-update .-status-dot {background-color: gray;}

	.nav.-home-main {background-color: #5BE1E6; background: linear-gradient(90deg, rgba(91,201,225,1) 0%, rgba(91,225,224,1) 28%, rgba(91,225,224,1) 100%);}


/* Dark Theme Color */
	.module.-app-theme-dark .notify-main {color: #000;}


	.module.-app-theme-dark .notify {color: #000;}

	.module.-app-theme-dark .flood-camera .-timestamp {color: #333;}
	.module.-app-theme-dark .flood-camera-view .-timestamp {color: #333;}

	.module.-app-theme-dark .flood-event-show-comment .form-textarea {background-color: #333; box-shadow: none;}
	.module.-app-theme-dark .flood-event-show-item {border-bottom: 1px #121212 solid;}
	.module.-app-theme-dark .flood-event-show-item .iconset {background-color: transparent;}

	.module.-app-theme-dark .flood-camera>* {background-color: #6d6d6d;}
	.module.-app-theme-dark .nav.-app-menu {background-color: #333;}
	.module.-app-theme-dark .nav.-app-menu .-item {background-color: #6d6d6d; border: none; box-shadow: none;}
	.module.-app-theme-dark .nav.-app-menu .-item>a {color: #fff;}
	.module.-app-theme-dark .nav.-app-menu .-item>a>.icon {color: #fff;}
	.module.-app-theme-dark .card-item {background-color: #333;}
	.module.-app-theme-dark .card-item a {color: #fff;}
	.module.-app-theme-dark .card-item .ui-menu>.ui-item>a:hover {background-color: #444;}
	.module.-app-theme-dark .card-item a>.icon {color: #fff;}








/* Maybe not used */
.photo-list {margin:0; padding:0; list-style-type: none;}
.photo-list>li {height:98px; margin:0 4px 4px 0; display: block;overflow:hidden; position:relative; border:1px #555 solid;}
.photo-list>li>h4 {height:1.3em;font-size:1em;text-align:center;overflow:hidden;}
.photo-list>li>a {height:100%;display:block;}
.photo-list>li>a>img {width:100%;height:100%;}
.photo-list>li>p {width:100%; height: 2em; line-height: 2em; margin:0;padding:0;font-size:0.7em;text-align:center;position:absolute; bottom:0;opacity:.6; background: #fff;}
.photo-list .iconset {position: absolute; top: 1px; right: 1px;}
.photo-list .iconset a {display: inline-block;}
.photo-list .iconset .icon {border-radius: 50%;}
.photo-list>li:hover .iconset {display: block;}

.flood-camera-thumb {flex: 0 0 100%; overflow: auto; margin: 8px 0;}
.flood-camera-thumb>ul {display: flex; flex-wrap: nowrap; margin: 0; padding: 0; list-style-type: none;}
.flood-camera-thumb>ul>li {flex: 0 0 48px; height: 48px; margin:0 8px 0 0;}
.flood-camera-thumb>ul>li img {width:100%; height: 100%; margin:0 auto; display: block; border: none;}
.flood-camera-thumb>ul>li img:hover {opacity: .7;}
.flood-camera-thumb>ul>li>h3 {display: none;}
.flood-camera-thumb .flood-cam-error { margin:0; padding:0; position: absolute; bottom:0; display: none;}

#flood-water-current {width:100%; text-align:center;}
#photo-desc {right:0px; top:20px; padding:0 5px; font-weight:normal; text-align:right; position:absolute; background:transparent; border-radius:4px; z-index: 1;}

.icons-list {margin: 0;padding: 0;list-style-type: none;}
.icons-list>li {display:block; width:20%;height:120px; margin: 0 0 20px 0; float: left; overflow: hidden;}
.icons-list>li>a>img {width:auto;height:90px;display:block;margin:0 auto;}
.icons-list>li>span {display:block;text-align:center;}

.flood-event>h2 {margin:0; padding:10px 0; text-align: center; background: #999; color: #fff; font-family: Tahoma; }
#flood__event--signform {padding: 0 10px;}
.flood__event--signform {}
	.flood__event--signform .login {border: none;}
	.flood__event--signform .-info {display: none;}
	.flood__event--signform h5 {display: none;}
	.flood__event--signform .login>ul {display: none;}
	.flood__event--signform .login .member-zone {border:none;}

#flood-event-post {}
	#flood-event-post .form-text {}
	#flood-event-post .btn {}
	#flood-event-post #form-event-level {padding:0 0 10px 0;border-bottom: 1px #ccc solid; margin-bottom:10px;}
	#flood-event-post.flood__event__post--send {width: 100%;}

	.flood-event-photo {display:block; margin:0 auto; width: 100%;}
	#flood-event-post .fileinput-button {margin:0 10px 4px 0; float: left;}
	#flood-event-phototh {width: 50px;height:50px; border:1px #ccc solid;}

	.flood-event-remark {background:#e5e5e5;padding:5px 10px;}
	#flood-event-msg {height: 60px; }
	#flood-event-show {clear:both; overflow-y: auto; margin: 0;box-shadow: 0 0 0 1px #eee;}
	.flood-event-show-item {margin: 16px 0; padding: 16px;  border-bottom: 1px #E9E9E9 solid; position: relative; display: flex; flex-wrap: wrap; gap: 8px;}
	.flood-event-show-item .photo-th {clear: both; margin-top: 16px; flex: 0 0 100px;}
	.flood-event-show-item .flood-event-photo {}
	.flood-event-show-item .poster {min-height:24px; flex: 0 0 100%;}
	.flood-event-show-item .msg {margin: 0px; padding: 8px 0; flex: 1;}
	.flood-event-show-item .profile {margin:0 5px 0 0; display: block; float: left;}
	.flood-event-show-item .iconset {position: absolute; top: 8px; right: 8px;}
	.flood-event-show-item .icon16-delete {display:block; position: absolute; top:0; right:0;text-align:center;}

	.flood-event-show-comment {margin:0 0 0 40px; flex: 0 0 calc(100% - 40px)}
	.flood-event-show-comment .form-textarea {width: 80%; border-radius: 32px; height:1.1em;}
	.flood-event-show-comment-item {margin:0 0 2px 0; padding:7px; clear: both; font-size: .9em;}
	#flood-event .status {margin: 10px 0 10px 40px; color: #999; font-size: 0.8em; flex: 0 0 calc(100% - 40px);}
	#flood-event-refresh {width: 80px; padding:5px; clear: both; display: block; text-align: center;}

	#cctv .flood-event>h2 {background: #f60; color: #fff; font-family: Tahoma; }

.flood__camera__list {margin: 0; padding: 0; list-style-type: none;}
	.flood__camera__list>li {position: relative; margin:0 10px 10px 0;}
	.flood__camera__list>li> h4 {width:100%;margin:0; padding:4px 0;text-align:center;position: absolute;top:0; background: green; color:#fff;}
	.flood__camera__list>li> h4 a {color:#fff;}
	.flood__camera__list>li {display: inline-block;}
	.flood__camera__list>li img {width: 200px; height:200px;}
	.flood__camera__list>li p {width:100%; margin:0; padding: 4px 0; font-size: 0.8em; text-align: center; position: absolute;bottom: 0; background: #fff; opacity: .8;}

	.flood-event .map-output {width:80%; height: 300px; margin:0 auto;}

	.form-item--station div {margin:20px 0; padding:20px; background: #eee;}
	.form-item--station div.active {background: #ccc;}
	.form-item--station .form-select {width: 100%;}

	.form-item--flag {width: 60%; margin:0; padding: 0; float: left;}
	.form-item--flag div {margin:10px 0; padding: 16px; border-radius: 10px;}
	.form-item--flag .flag--red {border:1px red solid; border-left:4px red solid;}
	.form-item--flag .flag--red.active {background: red;}
	.form-item--flag .flag--yellow {border:1px yellow solid; border-left:4px yellow solid;}
	.form-item--flag .flag--yellow.active {background: yellow;}
	.form-item--flag .flag--green {border:1px green solid; border-left:4px green solid;}
	.form-item--flag .flag--green.active {background: green;}
	.form-item--flag input {}

	.form-item--photo {width:40%; float: left;}
	.form-item--msg {clear: both;}

#flood-event-post .form-item--photo .fileinput-button {margin:0 10px; float: none; display: block; text-align: center;}

.flood-chat-send {padding: 8px; gap: 8px; background-color: var(--chat-wrapper-bg-color);}
.flood-chat-send>.-item:nth-child(2) {flex: 1;}
.flood-chat-send .form-text {display: block; padding: 0 24px; border-radius: 32px; cursor: text; line-height: 36px; box-shadow: none; background-color: var(--chat-box-bg-color);}
.flood-chat-send .widget-profilephoto {border: none;}

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

.flood-event-show-item .status {margin: 10px 0 10px 0px; color: #999; font-size: 0.8em;}
.flood-event-show-item .profile {width: 32px; height: 32px; border-radius: 50%;}
/* @end */


/* Home Page */
.home {
	>.-home-tabs-info {display: flex; flex-wrap: wrap; gap:  16px;}
	.site-desc {display: none; padding: 0 32px 16px;}
	.module-home h2.title {display: none;}

	.introduction-banner {display: block; width: 100%; margin: 0 0 32px;}

	>.-home-tabs-info {flex: 0 0 100%; margin:0 0 40px 0; display: flex; flex-wrap: wrap;}
	>.-home-tabs-info>* {flex: 1 0 100%;}
	>.-home-tabs-info h2 {flex: 0 0 100%; margin: 0; padding: 0; height: 48px; line-height: 48px; text-align: center; background: #3f51b5; color: #fff;}
	>.-home-tabs-info h2>a {color: #fff;}
	.-home-cctv {flex: 0 0 100%; padding: 0;}
	.-home-info {flex: 0 0 100%;}
	>.-home-tabs-info>.flood-camera {flex: 1 0 100%;}

	.-flood-camera-top {display: flex; flex-wrap: wrap;}
	.-flood-camera-top>.sg-load {flex: 0 0 100%;}
	.-flood-camera-top>.-flood-line {flex: 0 0 100%;}
	.-flood-camera-top .flood-camera>.-item {flex: 0 0 100%;}

	.flood-camera {display: none;}
	.flood-event .flood-warning {display: none;}

	.flood-event {height: auto; overflow: auto;}

	.flood-situation {flex-wrap: wrap; margin: 8px 4px; gap: 8px; justify-content: center;}
		.flood-situation>.-item {flex: 0 0 calc(50% - 2px); max-height: 80px;}
		.flood-situation img {width: 100%; height: 60px; display: block;}


	.home-sponsor {
		display: flex;
		flex-direction: column;
		>.-notify {background-color: #ffe4c9;}
	}
}









@media (min-width:20em) {    /* 320/16 = 20 */
}

@media (min-width:30em) {    /* 480/16 = 30 */
	.nav.-map>ul>li>form {margin-top:3px;border:none;}
	.nav.-map>ul>li:nth-child(2) {padding:0 10px;position: relative;top:0px;width: auto;}
	#mapSearch {width:180px;}
}

@media (min-width:40em) {    /* 640/16 = 40 */
	.home>.-home-tabs-info>.flood-camera-realtime {flex: 1; overflow: hidden;}
	.home>.-home-tabs-info>.-home-info {flex: 0 0 300px; overflow: hidden;}
	.home .flood-event {height: 4000px;}
	.home-sponsor {
		flex-direction: row;
		>:first-child {
			flex: 1;
			>.-premium {width: 100%;}
			>.widget-row {flex: 1;}
		}
		>:last-child {flex: 0 0 50%;}
	}
	.home-hots {
		>.widget-content {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0;
			.widget-item {
				margin: 0;
				flex: 0 0 32%; overflow: hidden;
				>h3 {line-height: 2.4rem; height: 2.6rem; overflow: hidden;}
				>.photo {height: 240px;}
			}
		}
		.readall {flex: 1 0 100%;}
	}
	.sponsor>.-banner>.-item {flex: 0 0 calc(33.3333% - 6px);}
	.flood-camera>.-item .-title {font-size: 1.2rem; height: auto; line-height: unset;}
	.flood-camera .-timestamp {font-size: 0.8rem;}
	.flood-camera .-camera-no {font-size: 1.2rem; width: 1.8rem; height: 1.8rem; line-height: 1.8rem;}
	.flood-camera .-ad {width: 24px; height: 24px; bottom: 24px;}
	.flood-camera .-camera-status {width: 18px; height: 18px; font-size: 18px;}
	.flood-camera .-status-msg {font-size: 1.2rem;}

	.sponsor>.-premium>.-item {flex: 0 0 9%;}
	.sponsor>.-premium>.-item:nth-child(n+6) {display: block;}
	.sponsor>.-gold>.-item {flex: 0 0 8%;}
	.sponsor>.-silver>.-item {flex: 0 0 8%;}

	.flood-camera-view .-ad img {width: 70px; height: 70px;}

	.flood-situation>.-item {flex: 0 0 calc(25% - 2px);}
}

@media (min-width: 43.75em) { /* 700/16 : Responsive Menu */
	.module-home .page.-header header {width: 64px; height: 64px;}
	.module-home .page.-nav {margin-left: 86px;}
	.page.-nav>.nav.-owner li.-profile>a>span {display: inline;}

	.module-home .ribbon {top: 96px;}
	.home .flood-event {height: 1000px;}

	.nav.-owner .-change-layout {display: block;}

	.flood-camera {gap: 8px;}
	.flood-camera>.-item {flex: 0 0 calc(25% - 6px);}

	.flood-change-layout-dense {display: block;}

	.module.-layout-dense .flood-camera>.-item {flex: 0 0 calc(12.4% - 3px);}
	.module.-layout-dense .flood-camera .-title {padding: 0; font-size: 1.1rem;}
	.module.-layout-dense .flood-camera .-status-msg {font-size: 1.1rem;}

.flood-camera-view {
	.-status {
		position: absolute; top: calc(50% - 2rem); left: 8px; right: 8px; text-align: center; background-color: #fff; padding: 64px 0 16px 0; border-radius: 48px; opacity: 0.6; pointer-events: none; font-size: 1.8rem; z-index: 2;
		&:before {content: "error"; font-family: "Material Icons"; -webkit-font-feature-settings: "liga"; display: block; position: absolute;
			width: 4.0rem; height: 4.0rem; font-size: 4.0rem; color: red;
			top: 16px; left: calc(50% - 2rem);
			opacity: 1.2; border-radius: 50%; z-index: -1; padding: 0;}
	}
}

}

@media (min-width:48em) {    /* 768/16 = 48 */
	.flood-camera>.-item .-title {font-size: 1.4rem;}
	.flood-camera .-status-msg {font-size: 1.4rem;}
/*
	.flood-line-ranger {height: 80px;}
	.flood-line-ranger img {height: 80px;}
	.flood-line-ranger a {font-size: 1.4rem;}
*/
}

@media (min-width:50em) {    /* 800/16 = 50 */
	.flood-camera {flex-wrap: wrap;}
}

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

@media (min-width:60em) {    /* 1000/16 = 60 */
	.home .-flood-camera-top>.sg-load {flex: 1;}
	.home .-flood-camera-top>.-flood-line {flex: 0 0 33.33%;}
	.home .-flood-camera-top .flood-camera.-hots>.-item {flex: 0 0 calc(50% - 16px);}
	.home .flood-event {height: 1400px;}
}

@media (min-width:64em) {    /* 1024/16 = 64 */
}

@media (min-width:80em) {    /* 1280/16 = 80 */
	.nav.-home-main {margin: 4px 0 16px 0; width: 100%;}
	.flood-camera {gap: 8px; margin: 0; padding: 8px;}
	.flood-camera .-ad {width: 32px; height: 32px; bottom: 24px;}
	.flood-camera-view .-ad img {width: 80px; height: 80px;}

	.flood-situation img {height: 100%;}

	.flood-hots-article {margin: 32px 0;}
	.flood-hots-article>.-item {flex: 0 0 calc(25% - 4px);}
}