/*
Theme Name :  SoftGanz For SCCCRN
Theme URI  : https://www.softganz.com
Copyright  : 2023
Version    : 0.0.01
Author     : Little Bear
Author URI : https://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(/calendar/css.calendar.css?v=2);
@import url('https://fonts.googleapis.com/css?family=Prompt:300');

/* @group General */
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.6rem;}
h5 {font-size: 1.5rem;}
h6 {font-size: 1.5rem;}
/* @end */

.page.-header {font-family: "Prompt"; font-weight: bold;}
.page.-header header {width: 40px; height: 40px;}
.page.-nav {margin-left: 48px;}


.page.-header header {background-image:url(logo.png); background-size: cover; margin: 4px 0 0 4px; position: absolute; border-radius: 50%;}

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

.page.-nav>.sg-responsivemenu.-active>.menu.-main>li>a {margin: 0;}

.widget-card {border-radius: 8px;}

.widget-nav.-button-menu {}
	.widget-nav.-button-menu>ul>li {position: relative;}
	.widget-nav.-button-menu>ul>li>a {line-height: 4.8rem; border-radius: 4.8rem; margin: 8px 0; align-items: center; padding: 0;}
	.widget-nav.-button-menu>ul>li>a>span {text-align: center; font-size: 1.6rem;}
	.widget-nav.-button-menu>ul>li>a>.icon {border-radius: 50%; padding: 12px; opacity: 0.8;}

.home-banner {height: 100px; margin: 0 0 8px 0; background: transparent url(banner-01.png) center center no-repeat; background-size: cover;}

.cctv-photo {position: relative;}

.flood-camera-view {display: flex; flex-wrap: wrap; margin:0; overflow:auto; position: relative;}
	.flood-camera-view .-timestamp {position: absolute;top: 4px; right: 4px; text-align: center; background-color: #fff; padding: 4px; opacity: 0.5; border-radius: 4px;font-size: 0.8em; line-height: 1.3em;}
	.flood-camera-view .-timestamp>span {display: block;}
	.flood-camera-view .photo-last {flex: 1 0 100%; position: relative;}
	.flood-camera-view .photo-last .-photo {width:100%;}
	.flood-camera-view .-ad {height: 60px; display: flex; margin: 4px; position: relative; border-radius: 4px; font-size: 1.2rem; align-items: center;}
		.flood-camera-view .-ad {background-color: #fffdf6; border: 1px #d8cc9e solid;}

	.flood-camera-view .-ad>span {flex: 1; padding: 16px;}
	.flood-camera-view .-ad img {width: 50px; height: 50px; margin: 5px; background: transparent url(youradhere.jpg) center center no-repeat; border-radius: 8px;}
	.flood-camera-view .photo-last .flood-camera-overlay {position: absolute; width: 100%; top:-5px; left:0; pointer-events:none;}
	.flood-camera-view .photo-thumbnail {flex: 0 0 100%; overflow: auto; margin: 8px 0 32px 0;}
	.flood-camera-view .photo-thumbnail>ul {display: flex; flex-wrap: nowrap;}
	.flood-camera-view .photo-thumbnail>ul>li {flex: 0 0 98px;}

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

	.photo-thumbnail {padding: 0 4px;}
	.photo-thumbnail>.-item {overflow: hidden; flex: 0 0 80px; height: 80px; border-radius: 4px;}
	.photo-thumbnail>.-item>a {display: block; height: 100%;}
	.photo-thumbnail>.-item>a>img {display: block; width: 100%; height: 100%;}
	.photo-thumbnail>.-item>p {margin: 0; width: 100%; font-size: 0.6rem; line-height: normal; white-space: nowrap; position: absolute; bottom: 0; text-align: center; pointer-events: none;}


	.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-slider {margin: 8px; padding: 0; z-index: 1; overflow: hidden; flex: 0 0 calc(100% - 16px); display: flex; align-items: center; height: 40px; gap: 10px;}
	.flood-slider>div {}
	#slider-range-wrapper {flex: 1;}
	#slider-range {height: 6px;}
	.flood-slider a {width: 24px; height: 24px; margin: 0 2px; padding: 8px; display:block; text-align:center; border:none; border-radius: 50%;}
	.flood-slider .ui-widget-content {border: none; background: #ccc;}

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


.flood-beach-view {margin: 0 8px;}
	.flood-beach-view .widget-card {margin-bottom: 24px; position: relative;}
	.flood-beach-view .photo-beach img.-full {width: 100%; height: auto;}
	.flood-beach-view .widget-card>a {display: block;}
	.flood-beach-view .-level {font-size: 2.4rem; line-height: normal; padding: 0 8px;}
	.flood-beach-view .-photo {width: 100%; height: auto; border-radius: 8px 8px 0 0;}
	.flood-beach-view .widget-card>.widget-nav.-icons {position: absolute; top: 8px; right: 8px;}


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

	body {background-color: aliceblue;}
	.page.-header {background-color: #06C3CB; background: linear-gradient(90deg, rgba(6,195,203,1) 0%, rgba(67,112,208,1) 100%)}
	.page.-nav>.nav>ul>li>a {color: #fff;}
	.page.-nav>.nav.-owner>ul>li>a {color: #fff;}
	.page.-nav>.nav.-owner>ul>li>a>.icon {color: #fff;}
	.page.-nav>.nav>ul>li.-hots>a {background-color: #71B6DF; margin: 8px 4px; border-radius: 4px; line-height: 32px;}
	.page.-nav>.sg-responsivemenu.-active>.menu.-main {background-color: #000;}
	.widget-card {background-color: #ffffff;}

	.widget-nav.-button-menu>ul>li>a {background-color: #999; color: #fff;}
	.widget-nav.-button-menu>ul>li>a>.icon {background-color: #fff;}
	.widget-nav.-button-menu>ul>li:nth-child(1)>a {background-color: #92C739;}
	.widget-nav.-button-menu>ul>li:nth-child(2)>a {background-color: #11B0DE;}
	.widget-nav.-button-menu>ul>li:nth-child(3)>a {background-color: #EB1A2F;}
	.widget-nav.-button-menu>ul>li:nth-child(4)>a {background-color: #81308D;}
	.widget-nav.-button-menu>ul>li:nth-child(5)>a {background-color: #FEA411;}
	.widget-nav.-button-menu>ul>li:nth-child(6)>a {background-color: #622FCF;}
	.widget-nav.-button-menu>ul>li:nth-child(7)>a {background-color: #297FB8;}
	.widget-nav.-button-menu>ul>li:nth-child(8)>a {background-color: #E91668;}
	.widget-nav.-button-menu>ul>li:nth-child(9)>a {background-color: #36485F;}
	.widget-nav.-button-menu>ul>li:nth-child(10)>a {background-color: #12AA84;}
	.widget-nav.-button-menu>ul>li:nth-child(11)>a {background-color: #9B59B3;}
	.widget-nav.-button-menu>ul>li:nth-child(12)>a {background-color: #576475;}
	.widget-nav.-button-menu>ul>li:nth-child(13)>a {background-color: #7E8C8D;}
	.widget-nav.-button-menu>ul>li:nth-child(14)>a {background-color: #3CB04A;}
	.widget-nav.-button-menu>ul>li:nth-child(15)>a {background-color: #BD1B85;}
	.widget-nav.-button-menu>ul>li:nth-child(16)>a {background-color: #FD6400;}





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

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

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

@media (min-width: 43.75em) { /* 700/16 : Responsive Menu */
}

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

@media (min-width:50em) {    /* 800/16 = 50 */
	.home-banner {height: 200px;}
}

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

@media (min-width:60em) {    /* 1000/16 = 60 */
}

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

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