/*
 * 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?v=1);
@import url(/imed/css.imed.css?v=24);
@import url('https://fonts.googleapis.com/css?family=Prompt:200,300');

:root {
	--max-width: 980px;
	--header-height: 48px;
	--bg-color: #F0F8FF;
	--font-color: #444;
	--link-color: #17599c;
	--link-hover-color: #1f84eb;
	--link-white-color: #fff;
	--mainnav-bg-color: var(--bg-color);
	--mainnav-menu-color: #333;
	--mainnav-menu-hover-text-color: #1652CF;
	--mainnav-menu-hover-bg-color: transparent;
	--card-bg-color: #fff;
	--parent-info-background-color: #fff4f4;
	--box-title-bg-color: red;
	--nav-card-bg-color: #b7b7b7;
}
.theme-dark {
	--font-color: #A3A3A3;
	--link-color: #D4D4D4;
	--link-hover-color: #b6daff;
	--bg-color: #171717;
	--mainnav-bg-color: var(--bg-color);
	--mainnav-menu-color: #e1e1e1;
	--mainnav-menu-hover-text-color: #1652CF;
	--mainnav-menu-hover-bg-color: transparent;
	--card-bg-color: #373737;
	--parent-info-background-color: #fff4f4;
}
.module.-car {
	--appbar-background-color: #009231;
	--appbar-text-color: #cfffd3;
	--box-title-bg-color: #009231;	
}


/* Color template from http://colormind.io/ */
.template {
	&.-color1 {background:#14110D; }
	&.-color2 {background:#557B65; }
	&.-color3 {background:#76A6B2; }
	&.-color4 {background:#BFB769; }
	&.-color5 {background:#1F9615; }
}

/* @group General */
* {box-sizing: border-box;}
body {color: var(--font-color);}
h1,h2,h3,h4 {margin:0; padding:4px 0;font-family: "Prompt"; line-height: 1.1em; font-weight: normal;}
h2 {font-size: 1.7em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.3em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}

h2.header {text-align: right; font-size: 1.2em;}
header.header {margin:0 0 16px 0; background-color: #fff;}
/* @end */


.page {
	&.-page {margin: 0; padding: 0 0 56px 0;}
	&.-header {
		height: var(--header-height); margin: 0 auto; padding: 0; background-color: var(--mainnav-bg-color); background-repeat: no-repeat; position: fixed; z-index:1000; top: 0; bottom: auto; left:0; right:0; opacity: 0.925; align-items: center;
		header {width: 48px; background: transparent url(logo.png) 0 0 no-repeat; background-size: auto 48px; text-indent: -999em; border-radius: 50%; overflow: hidden;}
		h1 {margin: 0; padding: 0; line-height: var(--header-height);}
		h1>a {height: 100%; display: block;}
		>.wrapper {height: var(--header-height); display: flex; align-items: center; margin: 0 auto;}
	}
	&.-nav {
		height: 48px;
		>.nav {
			&.-main {
				display: none;
				height: 100%;
				>ul {flex: 1; justify-content: space-around; align-items: center;}
				>ul>li>a {
					color: var(--mainnav-menu-color); padding: 2px 8px; line-height: 1; font-size: 1.5rem;
					>.icon {color: var(--mainnav-menu-color); margin: 0 auto 0.8rem;}
					&:hover {color: red; background-color: #fff3f3; border-radius: 8px;}
					&:hover>.icon {color: red;}
				}
			}
		}
	}
	&.-content {}

	&.-secondary {display: none;}
	&.-footer {display: none;}
	.package-footer {display: none;}
}


/* @group navigator */
.nav {
	/* &.-main {
		flex: 1; height: var(--header-height); display: flex; align-items: center;
		.menu.-main {
			display: flex; flex-wrap: nowrap; justify-content: space-around; flex: 1;
			>li {float: none;}
			>li.-desktoponly {display: none;}
			>li>a {padding: 2px 8px; color: var(--mainnav-menu-color); white-space: nowrap; line-height: 20px; font-size: 1.3rem;}
			>li>a:hover {color: red; background-color: #eee; border-radius: 8px;}
			>li>a>.icon {display: block; margin: 0 auto; color: var(--mainnav-menu-color);}
			>li>a:hover>.icon {color: red;}
			>.-profile .profile-photo {display: block; margin: 0 auto; width: 22px; height: 22px; border: none; padding: 1px;}
			>.-profile>a>strong {font-weight: normal;}
		}
	} */
	&.-page {margin:0 0 4px 0;}
	&.-app-menu {
		margin: 0 8px 16px 8px; background-color: var(--card-bg-color); border-radius: 8px;
		&.-app-menu {
			>ul {display: flex; flex-wrap: wrap; flex: 1;}
			.header {flex: 1 0 100%; padding: 0; margin: 0; border-radius: 8px; background-color: transparent;}
			.header>h3 {padding: 8px; margin: 0; height: auto; line-height: unset; font-size: 1.3em;}
			.ui-item {margin: 8px; flex: 0 0 calc(25% - 16px); text-align: center; background-color: var(--card-bg-color); border-radius: 8px; position: relative; overflow: hidden;}
			.ui-item:hover {background-color: #fee;}
			.ui-item>a {height: 100%; padding: 8px 0; display: block; font-size: 0.85em;}
			.ui-item .icon {display: block; margin: 0 auto 6px; color: #e04646; width: 3.2rem; height: 3.2rem; font-size: 3.2rem; border-radius: 50%; padding: 0;}
		}
		&.-banner-menu {
			margin: 8px; border-radius: 8px; padding: 4px;
			>.ui-action {display: flex; flex-wrap: wrap;justify-content: space-around;}
			>.ui-action>.ui-item {flex: 1 0 100%; margin: 8px 0; text-align: center; padding: 0; position: relative;}
			>.ui-action>.ui-item>a {width: 100%; padding: 4px 0; background-color: #99ff70; box-shadow: none; color: #333; border-radius: 64px;}
			>.ui-action>.ui-item>a>.icon {margin: 8px auto; display: block; color: #000;}
			>.ui-action>.ui-item>a>span {display: block;}
			.-number {position: absolute; top: 4px; right: 4px; background-color: green; color: #fff; display: block; font-size: 0.8em; width: 2em; height: 2em; line-height: 2em; border-radius: 50%; pointer-events: none;}
		}
	}
	&.-card {
		a, .widget-button.-link {color: var(--link-color);}
		.icon {color: var(--link-color);}
	}
}
/* @end */


/* 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) !important;}
/* @end */






/* For this website only */
.card-item {background-color: var(--card-bg-color); margin: 16px 0;}
.navbar {box-shadow: none; border:1px #ddd solid; border-top:none;}
.user-register-form legend {padding: 8px 16px; border-radius: 24px;}

.ui-card>.ui-item {background-color: var(--card-bg-color)}
.ui-tag .ui-item {border-radius: 4px; padding: 2px 16px;}
.ui-state-disabled.more {color: #000; text-align: center;}


.-bigheader>label:not(.option) {padding:16px; background-color: #ddd;}

.header.-sub {background: #3da238; color: #fff; text-align: center; font-size: 1.3em;}

.inline-edit-item.-radio {padding: 4px 16px 8px 16px; border: 1px #eee solid; margin: 0 0 4px 0; border-radius: 8px; background: #f5f5f5; display: block;}
.inline-edit-item.-radio>label {display: block;}
.imed-visit-qt-menu.-app-menu .ui-item {flex: 0 0 calc(100% - 16px);}


.qrcode {
	text-align: center;
	.-url {display: block;}
}

.banner-top {
	padding: 0; background-color: #fff; margin: 0;
	img {width: 100%; display: block; margin: 0 auto;}
}

.congratulation {
	text-align: center; padding: 64px 0; text-align: center;
	&:before {content: ""; display: block; height: 200px; background-image: url(congratulation.png); background-size: contain; background-repeat: no-repeat; background-position: center center; margin: 0 0 16px 0;}
}

.login {
	
	.-guideline {font-size: 0.8em;}
	.-info p {font-size: 0.8em;}
	>.-form>.ui-action {text-align: center; display: block; padding: 0 0 32px;}
}

.chat-box {
	margin: 0 0 14px 0; padding: 8px 8px; display: flex; flex-wrap: nowrap; border: none; border-radius: 8px;
	>img {width: 40px; height: 40px; border-radius: 50%;}
	.form-item {margin: 0; padding: 0;}
	.form-text {width: 100%; height: 40px; padding: 0 8px; cursor: text; line-height: 40px;}
	>a {color:#666; position: relative; display: block; overflow: hidden; border-radius: 32px;}
	>a>.icon {position: absolute; right: 8px; top: 8px;}
	.btn.-link {padding: 0 8px; font-size: 10px; line-height: 8px;}
	.btn.-link>.icon {display: block;margin: 0 auto;}
	.btn.-link>span {padding: 0; line-height: 16px;}
	>.form {
		flex: 1; margin: 0; padding: 0;
		&.-person-search {
			flex: 1; margin: 0; padding: 0;
			>.form-item>.form-group {border-radius: 32px;}
			.btn {padding: 0 0 0 8px; background-color: transparent;}
			.btn>.icon {padding: 0;}
			.form-group {
				.btn.-add-new {border-radius: 50%; margin-left: 4px; background-color: green; border: none; box-shadow: none; width: 40px; height: 40px; padding: 0; display: flex; align-items: center;}
				.btn.-add-new>.icon {color: #fff;}
			}
			>.form-text {box-shadow: none;}
			>.form-text:focus {background-color: transparent;}
			>.form-text:hover {background-color: transparent;}
			>.form-item>*>* {background-color: transparent;}
			>.form-item>*>*>* {border: none;}
			>.form-item>*>*>span:first-child>a {padding-left: 8px;}
			.form-text {padding:  0 8px;}
		}
	}

	&.-imed-app-home {
		position: relative; z-index: 1000; background-color: var(--card-bg-color);
		>a.form-text {font-size: 0.9em;}
		&.-scroll-up {position: absolute;}
		&.-fixed {position: fixed; top: 0; opacity: 0.9;}
	}
}

.widget-report {
	--bgcolor-1 : #f7f7f7;
	--bgcolor-2 : #ddedff;
	--bgcolor-3 : #ffb2b2;
	--bgcolor-4 : #ffe4bc;
	--bgcolor-5 : #c9f5cb;
	--bgcolor-6 : #ffdbff;
	--bgcolor-7 : #edffe5;
	--bgcolor-8 : #fff7db;
	--bgcolor-9 : #dbfaff;

	.report-output-summary {
		margin: 16px 0;
		>.widget-table th {white-space: nowrap; border: none;}
		>.widget-table>thead>tr:first-child>th:first-child {border-bottom: 1px #fff solid;}
		>.widget-table>thead>tr:nth-child(2)>th {border-bottom: 1px #fff solid;}

		/* >.widget-table>thead>tr:first-child>th              {background-color: var(--bgcolor-1);}
		>.widget-table>thead>tr:first-child>th:nth-child(2) {background-color: var(--bgcolor-2);}
		>.widget-table>thead>tr:first-child>th:nth-child(3) {background-color: var(--bgcolor-3);}
		>.widget-table>thead>tr:first-child>th:nth-child(4) {background-color: var(--bgcolor-4);}
		>.widget-table>thead>tr:first-child>th:nth-child(5) {background-color: var(--bgcolor-5);}
		>.widget-table>thead>tr:first-child>th:nth-child(6) {background-color: var(--bgcolor-6);}
		>.widget-table>thead>tr:first-child>th:nth-child(7) {background-color: var(--bgcolor-7);}
		>.widget-table>thead>tr:first-child>th:nth-child(8) {background-color: var(--bgcolor-8);}
		>.widget-table>thead>tr:first-child>th:nth-child(9) {background-color: var(--bgcolor-9);}

		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+1)  {background-color: var(--bgcolor-2);}
		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+4)  {background-color: var(--bgcolor-3);}
		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+7)  {background-color: var(--bgcolor-4);}
		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+10) {background-color: var(--bgcolor-5);}
		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+13) {background-color: var(--bgcolor-6);}
		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+16) {background-color: var(--bgcolor-7);}
		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+19) {background-color: var(--bgcolor-8);}
		>.widget-table>thead>tr:nth-child(2)>th:nth-child(n+22) {background-color: var(--bgcolor-9);}

		>.widget-table td:first-child     {background-color: var(--bgcolor-1); white-space: nowrap;}
		>.widget-table td:nth-child(n+2)  {background-color: var(--bgcolor-2);}
		>.widget-table td:nth-child(n+5)  {background-color: var(--bgcolor-3);}
		>.widget-table td:nth-child(n+8)  {background-color: var(--bgcolor-4);}
		>.widget-table td:nth-child(n+11) {background-color: var(--bgcolor-5);}
		>.widget-table td:nth-child(n+14) {background-color: var(--bgcolor-6);}
		>.widget-table td:nth-child(n+17) {background-color: var(--bgcolor-7);}
		>.widget-table td:nth-child(n+20) {background-color: var(--bgcolor-8);}
		>.widget-table td:nth-child(n+23) {background-color: var(--bgcolor-9);} */

		>.widget-table .-col-set-0 {background-color: var(--bgcolor-1);}
		>.widget-table .-col-set-1 {background-color: var(--bgcolor-2);}
		>.widget-table .-col-set-2 {background-color: var(--bgcolor-3);}
		>.widget-table .-col-set-3 {background-color: var(--bgcolor-4);}
		>.widget-table .-col-set-4 {background-color: var(--bgcolor-5);}
		>.widget-table .-col-set-5 {background-color: var(--bgcolor-6);}
		>.widget-table .-col-set-6 {background-color: var(--bgcolor-7);}
		>.widget-table .-col-set-7 {background-color: var(--bgcolor-8);}

	}
}

.nav {
	&.-banner-menu>.ui-action>.ui-item:nth-child(1)>a {background-color: #99ff70;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(2)>a {background-color: #ffc3ff;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(3)>a {background-color: #88d8ff;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(4)>a {background-color: #ffca86;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(5)>a {background-color: #9bb0ff;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(6)>a {background-color: #ff9dff;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(7)>a {background-color: #92b2ce;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(8)>a {background-color: #add48b;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(9)>a {background-color: #c7ca4e;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(10)>a {background-color: #92b2ce;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(11)>a {background-color: #add48b;}
	&.-banner-menu>.ui-action>.ui-item:nth-child(12)>a {background-color: #c7ca4e;}
}

.user-register-form {
	legend {padding: 8px 16px; border-radius: 24px;}
	.user-register-form-account {
		background-color: #fff5e9; border: 1px #ffdfb8 solid;
		>legend {background-color: #ffdfb8;}
	}
	.user-register-form-personal {
		background-color: #dce8ff; border: 1px #c6daff solid;
		>legend {background-color: #c6daff;}
	}
}




.widget-dropbox {
	>* {
		>.-content {
			background-color: var(--card-bg-color);
			opacity: 0.9;
			.icon {color: var(--link-color);}
		}
	}
}

.widget-card {
	background-color: var(--card-bg-color);
}

.widget-listtile {
	background-color: var(--card-bg-color);
	.-trailing {
		.icon {color: var(--link-color);}
		.widget-dropbox>a:hover {background-color: var(--link-hover-color);}
	}
	>.-leading>.profile-photo {width: 32px; height: 32px;}
}

.widget-nav {
	&.-vertical>ul>li>a {align-items: center;}
}

.widget-appbar {
	--bg-color: #0087ef;
	--text-color: #cae7ff;
	--text-hover-color: #ff6565;
	--trailing-btn-bg-color: #49adff;
	--trailing-btn-bg-color-hover: #6fbeff;
	--nav-bg-color: var(--bg-color);
	--nav-text-color: var(--text-color);
	--nav-btn-bg-color: var(--trailing-btn-bg-color);
	--nav-btn-hover-color: var(--trailing-btn-bg-color-hover);

	.theme-dark & {
		--bg-color: #6e0000;
		--text-color: #fce6e6;
		--text-hover-color: #ff6565;
		--trailing-btn-bg-color: #ff7272;
		--trailing-btn-bg-color-hover: #ff6a6a;
		--nav-bg-color: var(--bg-color);
		--nav-text-color: var(--text-color);
		--nav-btn-bg-color: var(--trailing-btn-bg-color);
		--nav-btn-hover-color: var(--trailing-btn-bg-color-hover);
	}

	height: 4.8rem; flex-wrap: nowrap; margin-bottom: 8px;
	.widget-dropbox {
		>a {box-shadow: none; margin-top: 4px; padding: 6px;}
	}
	>.-title>.-text {font-size: 1.1em; line-height: 3.8rem; font-weight: bold;}
	>.-nav {
		flex: 0; order: 2; padding: 0; overflow: initial;
		a {padding: 0 6px; height: 48px; overflow: hidden; margin-top: 0;}
		a:only-child {width: 36px; height: 36px; padding: 6px; margin: 6px; border-radius: 50%;}
		a>span {margin-top: -4px; line-height: 1rem;}
	}
	>.-trailing {
		order: 3; padding-right: 8px;
	}
	.-has-dropbox>.-nav {flex: 0;}
	>.-dropbox {order: 3;}

	.widget-button.-with-number {
		padding: 6px;
		>.-label {position: absolute; top: 0; right: 0; color: #fff; font-size: 1rem; background-color: #ff9a9a; border-radius: 50%; line-height: 1.5rem; width: 1.5rem; height: 1.5rem; text-align: center; display: block; padding: 0;}
	}
}

.imed-patient-menu {
	&.-banner-menu {
		padding: 0;
		.-number {position: absolute; top: 4px; right: 4px; background-color: green; color: #fff; display: block; font-size: 0.8em; width: 3em; height: 3em; line-height: 3em; border-radius: 50%; pointer-events: none; text-align: center;}
		>ul {display: flex; justify-content: space-around;}
		>ul>li {flex: 1 0 100%; margin: 8px 0; text-align: center; padding: 0; position: relative;}
		>ul>li>.btn {width: 100%; height: auto; padding: 4px 0; background-color: #99ff70; box-shadow: none; color: #333; border-radius: 64px; flex-wrap: wrap;}
		>ul>li>.btn>.icon {margin: 8px auto; display: block; color: #000; flex: 1 0 100%;}
		>ul>li>.btn>span {flex: 1 0 100%; padding: 0;}
		>ul>li>.btn>span.lang-text.-en {display: none;}
		>ul>li:nth-child(1)>a {background-color: #99ff70;}
		>ul>li:nth-child(2)>a {background-color: #ffc3ff;}
		>ul>li:nth-child(3)>a {background-color: #88d8ff;}
		>ul>li:nth-child(4)>a {background-color: #ffca86;}
		>ul>li:nth-child(5)>a {background-color: #9bb0ff;}
		>ul>li:nth-child(6)>a {background-color: #ff9dff;}
		>ul>li:nth-child(7)>a {background-color: #92b2ce;}
		>ul>li:nth-child(8)>a {background-color: #add48b;}
		>ul>li:nth-child(9)>a {background-color: #c7ca4e;}
		>ul>li:nth-child(10)>a {background-color: #92b2ce;}
		>ul>li:nth-child(11)>a {background-color: #add48b;}
		>ul>li:nth-child(12)>a {background-color: #c7ca4e;}
	}
}

.imed-full {
	display: flex; flex-wrap: wrap; gap: 16px;
	.imed-box {flex: 1 0 100%;}
	.imed-app {flex: 1;}
}

.imed-patient-card {
	justify-content: flex-start; flex-wrap: nowrap; overflow: scroll;
	>.ui-item {margin: 8px; border-radius: 16px; position: relative; padding: 4px; text-align: center;}
	span {display: block; position: absolute;}
	.-name {bottom: 4px; left: 0; right: 0; font-size: 0.7em; height: 1.5em; overflow: hidden;}
	.-number {top: 4px; right: 4px; width: 2em; height: 2em; line-height: 2em; text-align: center; border-radius: 50%; background-color: #ccc; font-size: 0.6em;}
	.-photo {width: 64px; height: 64px; margin: 0px auto 8px; display: block; border-radius: 50%; border: 2px #eee solid;}
}

.imed-notify {
	margin: 16px 0 8px;
	>.ui-item {
		border-radius: 8px; display: flex; justify-content: space-between; background-color: #ffd640;
		>.detail {padding: 16px 8px;}
		>.nav.-card {margin-right: 8px;}
		>.nav.-card a {border-radius: 32px; padding-left: 16px; padding-right: 16px;}
	}
}

.imed-my-note {
	margin: 0;
	>.ui-item>.nav.-card .btn>span {display: none;}
	&.-need>.ui-item>.header>* {flex: 0 0 100%;}
	&.-need>.ui-item>.header .poster-photo {width: 32px; height: 32px;}
}

.imed-patient-photo-wrapper {
	margin:0 0 16px; padding: 16px 0; position:relative; background-color: var(--card-bg-color);
	>.-patient-photo {width: 196px; height: 196px; margin: 0px auto 32px; display: block; border-radius: 50%; overflow: hidden; border: 2px #eee solid;}
}


.imed-need-item {
	.-status-change {
		background-color: #e7e7e7;
		.icon {color: #767676;}
	}	
	&.-urgency-1 .-status-change {background-color: #ffff6f;}
	&.-urgency-5 .-status-change {background-color: #ffeadc;}
	&.-urgency-9 .-status-change {background-color: #ff9191;}
	.-status-done .-status-change {
		background-color: green;
		.icon {color: #fff;}
	}
	>.-need {padding: 8px 16px; display: flex; flex-direction: row; justify-items: center; gap: 8px;}
	>.-detail {padding: 8px 16px;}
}



.page.-map {
	position: absolute; top: 48px; bottom: 0;
	.map-info {
		font-size: 0.9em;
		.btn.-cancel {margin:0; padding: 2px 8px;}
	}
}



body {
	.page.-map {top: 0;}
	&.-congratulation {display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0 auto; padding: 0;}
	&.-screen-risk-sk-form {
		.page.-header {display: none;}
		.page.-content {padding: 0px 0 64px;}
	}


	&.module-imed.-softganz-app.-app-theme-dark .widget-appbar>.-nav .ui-item {background-color: transparent;}
}

.module.-softganz-app {
	margin:0; padding: 0;
	h2 {font-family: Arial; font-weight: bold; font-size: 1.1em;}

	.page {
		&.-header {display: none !important;}
		&.-footer {display: none !important;}
		&.-page {border: none; border-radius: 0; margin: 0 auto !important; padding: 0 !important}
		&.-content {padding: 0; max-width: none;}
	}

	.package-footer {display: none;}

	.sg-toolbar.-main {margin: 0; display: block; position: fixed; width: 100%; height:48px; z-index: 1001; border: none; top: 0; left: 0; right: 0; margin: 0 auto;}

	.toolbar {
		&.-main {
			margin: 0 auto; display: block; width: 100%; height:47px; z-index: 1001;
			position: fixed; top: 0; left: 0; right: 0;
			border-radius: 0; border-bottom: 1px #eee solid;
			h2 {font-size: 1.2em;}
		}
	}

	.chat-box.-imed-app-home {top: 0;}
	.chat-box.-imed-app-home.-fixed {top: 0;}

	.form-textarea:focus {box-shadow: none;}
	.nav.-page.-app-icon .ui-item>a {font-size: 1.1em;}

	.notify-main {width: 100%; padding: 8px !important; top: 0; left: 0; right: 0; width: 100%; max-width: none; margin: 0; border-radius: 0; background-color: #ffecba;}

	.widget-appbar {
		z-index: 1001; position: fixed; top: 0; left: 0; right: 0;
		.-title {
			font-size: 1.2em;
			>.-text {font-weight: normal; font-size: 2.0rem;}
		}
	}

	.widget-signform {margin: 0 auto; height: 100vh; width: 100%;}
	.login {
		margin: 0 auto; max-width: unset; width: unset; border-radius: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0;
		h3 {display: none;}
	}

	&.-module-has-toolbar .page.-content {padding-top: 48px;}
}

/******************
* Responsive web
******************/
@media (min-width: 21.25em) {		/* 340/16 = 21.25 */
}

@media (min-width: 22.5em) {		/* 360/16 = 22.5 */
}

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

@media (min-width:40em) {		/* 640/16 = 40 */
	.nav.-banner-menu {margin: 8px 0;}
	.nav.-main .menu.-main>li.-desktoponly {display: block;}

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

	.module.-screen-risk-sk-form .page.-content {padding-top: 8px;}
}

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

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

@media (min-width:52.5em) {	/* 840/16 = 52.5 */
	.page {
		&.-header {
			top: 0; bottom: auto;
		}
		&.-content {margin: 0 auto; padding: var(--header-height) 0 0 0; top: 0px; bottom: auto;}
		&.-nav>.nav.-main {
			.menu.-main {justify-content: start; gap: 8px;}
			.menu.-main>li>a {padding: 2px 24px;}
		}
	}
	.chat-box.-imed-app-home.-fixed {top: var(--header-height);}
}

@media (min-width:61.25em) {	/* 980/16 - Max Width */
	.widget-appbar {border-radius: 4px;}
	.imed-home-banner>img {border-radius: 8px;}
}





/* Mobile App */
@media screen and (min-width: 24px) and (max-width: 820px) {
	.page.-header header:before {content: ""; display: block; height: var(--header-height); width: 1px;}
	.nav.-main .menu.-main {font-size: 1.2rem;}
	.page.-content {}
	.page.-map {top: 0; bottom: var(--header-height); height: calc(100vh - var(--header-height)) !important; min-height: calc(100vh - var(--header-height)) !important;}
	.module-imed.-app.-module-has-toolbar:not(.-softganz-app) .page.-content {padding-top: 0;}
	.widget-floatingactionbutton {bottom: 5.2rem;}
}

/* iPadMini 768 x 1024 PX */
/* iPadAir 820 x 1180 PX */
@media screen and (min-width:820px) and (max-width:  820px) {
	body {font-size:  1.6rem;}
}

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



/* iMed Car */
.module-imed.-car.-module-has-sidebar {
	.widget-sidebar {position: fixed; top: 2px; margin-left: -106px;}
	.page.-primary {margin-left: 108px;}
}
/* .-status-รอตรวจสอบ {background-color: #ffe7e7;} */
.-status-อนุมัติ {background-color: #d4ffcd;}
.-status-เรียบร้อย {background-color: #92eca1;}
.-status-รออนุมัติ {background-color: #fdffcd;}
.-status-ไม่อนุมัติ {background-color: #e7e7e7;}
.-status-ยกเลิก {background-color: #d7d7d7;}

.imed-car-group-list.-vertical>ul>li>a {width: 100%; flex-direction: column; border-radius: 0;}
.imed-car-group-list.-vertical>ul>li>a>span {padding-left: 16px;}
.imed-car-book-form>.form-container.-type-div {margin: 8px 0 32px; border-radius: 8px; background-color: #fff;}
.imed-car-book-list {padding-bottom: 15rem; max-height: calc(100vh - 64px - 48px - 32px); overflow: scroll;}

.imed-car-group-list.-vertical {
	padding: 0 !important; gap: 16px;
	/* &.-vertical {display: flex; flex-direction: column;} */
	.widget-button {
		background-color: #baf0ff; color: #000; flex-wrap: nowrap; height: auto;

		.icon {color: #000; font-size: 3rem; height: 3rem; width: 3rem;}
	}
	.widget-button.-primary {
		background-color: #00a100; color: #d8ffcb;
		.icon {color: #d8ffcb;}
	}
	>ul {
		box-sizing: border-box; width: 70%; max-width: 480px; margin: 0 auto; gap: 16px;
	}
}
.imed-car-group-list.-vertical::before {
	content: "";
	display: block;
	height: 80px;
	width: 100%;
	background-image: url(./banner-car-01.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 0;
	box-sizing: border-box;
}

@media (min-width:30em) {		/* 480/16 = 30 */
	.imed-car-group-list.-vertical::before {height: 160px;}
}

@media (min-width:52.5em) {	/* 840/16 = 52.5 */
	.module-imed.-car.-module-has-sidebar {
		.widget-sidebar {position: fixed; top: 64px;}
	}
}


/************
* @Print
************/
@media print {
	.page.-header {box-shadow: none;}
	.page.-header nav {display: none;}
	.page.-header header {float:none;}
	.page.-footer {display: none;}
	.tabs {display: none;}
	form.search-box.sg-form {display: none; border:1px #000 solid;}
	.widget-table {width:100%;}
	.widget-table>thead>tr>th {border: none;}
}