@import url('https://abcg.icarsmile.com/css/simple.css?v=10');
@import url('https://fonts.googleapis.com/css?family=Prompt:100,200');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;600&display=swap');

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

/* @Color palettes */
/* https://coolors.co/e76f00-f1e500-0063e0-4aa900-000c47 */
/* Color template from http://colormind.io/ */
.template.-color1 {background:#4AA900; }
.template.-color2 {background:#F48559; }
.template.-color3 {background:#D6AC4F; }
.template.-color4 {background:#37B1C0; }
.template.-color5 {background:#005CAD; }

/* @group General */
html {height: 100%; font-size: 62.5%;}
body {height: 100%; font: 1.4rem/2.1rem Tahoma, Arial, Verdana, sans-serif;}
a {color: #17599c;}
a:hover {color: #1f84eb;}
a:link, a:visited, a:active, a:hover {text-decoration: none;}
a:focus {outline:none; }

h1,h2,h3,h4,h5,h6 {margin:0; padding:4px 0; line-height: 1.1em; font-weight: bold;}
h1,h2,h3,h4 {font-family: "Prompt"; font-weight: normal; }
h2 {font-size: 1.6em; color: #114189;}
h3 {font-size: 1.6em; color: #114189;}
h4 {font-size: 1.6em; color: #114189;}
h5 {font-size: 1.1em; color: #114189;}
h6 {font-size: 1.0em; color: #114189;}
/* @end */

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

.page {
	&.-page {margin: 0; padding: 0;}
	&.-header {
		height: 48px; margin: 0 auto; padding-left: 10px; background: #005CAD none center bottom no-repeat; position: fixed; z-index: 1000; top: 0; left: 0px; right: 0; overflow-x: auto;
		header {width: 48px; height: 48px; float: left; overflow: hidden; background: transparent url(logo.png) 0 -32px no-repeat; text-indent: -999em;}
		h1 {margin: 0; padding: 0; font-size: 1.6em; line-height: 35px;}
		h1>a {height: 100%; display: block; color: #fff;}
		.nav.-main .menu.-main>li>a {color: #baddff;}
		.nav.-main .menu.-main>li>a:hover {background: #0068C4;}
	}

	&.-content {margin: 0 0 32px 0; padding: 48px 0 0 0; background: #fff; position: relative;}

	&.-secondary {display: none;}

	&.-footer {
		margin:0; padding:10px; color: #333; font-size: 8pt; background: transparent; text-align: center; position: fixed; bottom:0; right:0;
		>.wrapper {margin:0 auto;}
		p {margin: 0;padding:0;}
		a {color: #666;}
		a:hover {color: #333;}
	}
}

.widget-listtile {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 8px; align-items: flex-start;}
	.widget-listtile>.-title {flex: 1;}
	.widget-listtile>.-title>* {display: block;}
	.widget-listtile>.-title>.-title-text {font-weight: bold;}
	.widget-listtile>.-title>.-subtitle-text {font-size: 0.85em;}
	.widget-listtile>.-leading {padding-right: 8px;}

.widget-card {margin: 8px 0; background-color: #f5f5f5;}

/******************
* Responsive web for this web only
******************/



.sg-toolbar.-main {background-color: #37B1C0; border-radius: 0;}
.sg-toolbar.-main.-garage {margin: 0px;}
.sg-toolbar.-main>h2 {font-size: 1.2em; background-color: transparent; color:#fff;}
.sg-toolbar.-main .search-box {height: 36px; border:none; box-shadow: none;}
.sg-toolbar.-main .search-box input {opacity: 0.8;}
.sg-toolbar.-main>.nav {overflow: initial;padding: 0; background-color: #FDF9ED;  border-bottom: 1px #eee solid;}
.sg-toolbar.-main>.nav.-is-more-nav {padding-right: 48px; width: calc(100% - 48px); flex: 0 0 calc(100% - 48px);}

.sg-toolbar.-main>.nav>.ui-nav {margin: 0;}
.sg-toolbar.-main>.nav>.ui-nav>.ui-item {padding: 6px 6px 6px 0;}
.sg-toolbar.-main>.nav>.ui-nav>.ui-item:first-child {padding-left: 6px;}
.sg-toolbar.-main>.nav>.ui-nav>.ui-item>.btn {margin: 0;}
/* .sg-toolbar.-main>.nav>.ui-nav>.ui-item>.btn>.icon {display: block; margin: 0 auto;} */
.sg-toolbar.-main>.nav>.ui-nav.-more {top: 0; right: 0;}
.sg-toolbar.-main>.nav>.ui-nav.-more .sg-dropbox>a {padding:6px; background-color: #fff; box-shadow: 0 0 0 1px #ffedb6 inset;}
.sg-toolbar.-main>.nav>.ui-nav.-more .sg-dropbox>a:hover {background-color: #FDF9ED;}
.sg-toolbar>.nav>.form {padding: 4px;}

.sg-toolbar>nav>ul>li>a {padding: 7px 4px;}
.sg-toolbar>nav>ul>li>a>.icon {display: inline-block;}




.icon.-i48 {width: 76px; height: 76px;}
.icon.-i48.-carin {background-position: -10px -200px;}
.icon.-i48.-job {background-position: -310px -100px;}
.icon.-i48.-do {background-position: -610px -100px;}
.icon.-i48.-part {background-position: -210px -100px;}
.icon.-i48.-finance {background-position: -710px -100px;}
.icon.-i48.-report {background-position: -110px -100px;}
.icon.-i48.-addjob {background-position: -610px -100px;}




.ui-statusbar {margin:8px 0 32px 0; padding: 0; list-style-type: none; height:24px; border-bottom: 1px #ccc solid; display: flex; flex-wrap: nowrap; justify-content: space-between;}
.ui-statusbar .ui-item {display: block; flex: 0 0 48px; text-align: center;}
.ui-statusbar .ui-item .status {display: block; width: 48px; height: 48px; margin: 0 auto; background-color: #eee; line-height: 48px; border-radius: 50%;}
.ui-statusbar .ui-item .status:hover {background-color: #f5f5f5;}
.ui-statusbar .ui-item .status.-active {background-color: green; color:#fff;}
.ui-statusbar .ui-item .status.-active:hover {background-color: #008912;}
.ui-statusbar .ui-item .status.-s4.-active {background-color: red;}
.ui-statusbar .ui-item .status.-process-1.-active {background-color: yellow; color: #333;}
.ui-statusbar .ui-item .status.-process-2.-active {background-color: orange;}
.ui-statusbar .ui-item .status.-process-3.-active {background-color: magenta;}
.ui-statusbar .ui-item .status.-process-4.-active {background-color: blue;}
.ui-statusbar .ui-item .status.-process-5.-active {background-color: green;}


.ui-autocomplete {overflow: auto;}
.ui-autocomplete.-repaircode .ui-menu-item>a {white-space: nowrap;}
.ui-autocomplete.-repaircode .ui-menu-item>a>p {display: inline;}

.searchbox .button, .search-box .button {border:none; border-radius: 0 4px 4px 0;}


.sg-dropbox .sg-dropbox--content {border:1px #aaa solid;}

.form-text.-disabled, .form-select.-disabled {border:1px transparent solid; box-shadow: none; background-color: #f0f0f0;}

.item tr.-input td {border-bottom: none; background-color: #FFEDD8;}
.item.-edit tr.-input td {background-color: #F0D6FF;}
.item .-highlight td {background-color: #DBFFD3;}
.item th.-noprint, .item td.-noprint {color:#bbb;}

.item tr.status--1 {color:#ccc; text-decoration: line-through; background-color: #f5f5f5;}

.form-select.-fill {
	margin: 0;
	width: 100%;
	width:-moz-available;
	color:#666;
	outline:none;
	cursor:pointer;
	text-align: center;
 }

.sidebar {background-color: #ffffff; margin-top: 0px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); }
.sidebar>h3 {background-color: transparent; padding:8px 16px; color:#b1aeae; letter-spacing: 0.05em;}
.sidebar>ul {width:auto;margin:0; padding: 0; list-style-type: none;}
.sidebar>ul a {padding: 8px 16px; display: block; color:#666;}
.sidebar>ul a:hover {background:#FDF9ED;}


.form.-report .form-item.-edit-insurer .form-select {width:200px;}
.form.-report .form-text.sg-datepicker {width:80px;text-align: center;}

.reportform .form-item.-edit-insurer .form-select {width:200px;}
.reportform .form-text.sg-datepicker {width:80px;text-align: center;}

.nav.-report {margin:0 0 4px 0;}
.nav.-report .form-item {margin:0;}



.nav.-master {margin-left:8px;}
.nav.-master .icon.-i48 {color: #444; display: block; margin:0 auto 8px; background-image: url(icons-128.png?1); border-radius: 0; font-size: 48px; line-height: 76px;}
.nav.-master>.ui-card {display: flex; flex-wrap: wrap;}
.nav.-master>.ui-card>.ui-item {width:136px; height:136px; margin:8px 8px 8px 0; background-color: #37B1C0; text-align: center; border-radius: 2px; border: none; box-shadow: none; position: relative;}
.nav.-master>.ui-card>.ui-item a {height:120px; padding:8px 0; display: block; color:#EAF5FF;}
.nav.-master>.ui-card>.ui-item:hover {background-color: #67ABEF;}
.nav.-master>.ui-card>.ui-item.-addjob {background-color:#f60; color: #fff; font-size: 1.2em;}
.nav.-master>.ui-card>.ui-item.-addjob:hover {background-color: #ff781e;}
.nav.-master .ui-action.-user {position: absolute; top: 2px; right: 2px;}
.nav.-master .ui-action.-user img {border-radius: 50%;}
.nav.-master .ui-action.-user .icon {width: 24px; height: 24px; color: #fff;}

.nav.-master .count {background-color: #ff3a3a; border-radius: 50%; display: block; width: 2.5em; height: 2.5em;  line-height: 2.5em; text-align: center; font-size: 0.7em; color: #ffdfdf;}

.nav.-master .-car-type-1 {background: url(car-1.png) center 4px no-repeat; background-size: 40px;}
.nav.-master .-car-type-2 {background: url(car-2.png) center 4px no-repeat; background-size: 40px;}
.nav.-master .-car-type-3 {background: url(car-3.png) center 4px no-repeat; background-size: 40px;}


.nav.-submaster {margin-left: 8px;}
.nav.-submaster>.ui-card {display: flex; flex-wrap: wrap;}
.nav.-submaster>.ui-card>.ui-item {width: 64px; height: 64px; margin: 8px 8px 8px 0; background-color: #37B1C0; text-align: center; border: none; box-shadow: none;}
.nav.-submaster>.ui-card>.ui-item>a {height: 56px; padding: 4px 0; display: block; color: #333;}
.nav.-submaster>.ui-card>.ui-item>a:hover {background-color: #67ABEF;}
.nav.-submaster>.ui-card>.ui-item>a>span {font-size: 0.75em;}
.nav.-submaster>.ui-card>.ui-item>a>.icon {width: 32px; height: 32px; font-size: 32px; display: block; margin: 4px auto;}
.nav.-submaster>.ui-card>.ui-item>a>.icon:hover {background-color: #67ABEF;}

.nav.-page {padding: 8px 0; background-color: #fff;}
.nav.-report {padding: 8px; background-color: #fff;}

.sg-view {border-bottom: 1px #eee solid;}


.item>tbody>.-shop-หาดใหญ่ {border-left: 4px green solid; background-color: #ffffff;}
.item>tbody>.-shop-หาดใหญ่:hover {background-color: #ffffff;}
.item>tbody>.-shop-จ็อบนอก {border-left: 4px #ddd solid; background-color: #ffffff;}
.item>tbody>.-shop-จ็อบนอก:hover {background-color: #ffffff;}

.item>tbody>.-shop-สงขลา {border-left: 4px #ff008e solid; background-color: #fbf7f9;}
.item>tbody>.-shop-สงขลา:hover {background-color: #fbf7f9;}
.item>tbody>.-shop-จ็อบนอก-สงขลา {border-left: 4px #ff008e solid; background-color: #fbf7f9;}
.item>tbody>.-shop-จ็อบนอก-สงขลา:hover {background-color: #fbf7f9;}

.item>tbody>.-shop-ราษฎร์ยินดี {border-left: 4px #6cb6ff solid; background-color: #f1f8ff;}
.item>tbody>.-shop-ราษฎร์ยินดี:hover {background-color: #e8f3ff;}
.item>tbody>.-shop-จ็อบนอก-ราษฎร์ยินดี {border-left: 4px #6cb6ff solid; background-color: #f1f8ff;}
.item>tbody>.-shop-จ็อบนอก-ราษฎร์ยินดี:hover {background-color: #e8f3ff;}

.item>tbody>.-shop-จะนะ {border-left: 4px #ffd900 solid; background-color: #ffffed;}
.item>tbody>.-shop-จะนะ:hover {background-color: #ffffed;}
.item>tbody>.-shop-จ็อบนอก-จะนะ {border-left: 4px #ffd900 solid; background-color: #ffffed;}
.item>tbody>.-shop-จ็อบนอก-จะนะ:hover {background-color: #ffffed;}





.home {background-color: #1a67af; color:#fff;}
	.home h2 {margin:32px 0; color:#fff; font-weight:normal; font-size:1.6em; opacity: 0.9; letter-spacing: 0.1em; font-family: Arial; text-align: center;}
	.home .login {color:#333;}
	.home .search-box {width:auto; height:48px; margin: 8px 8px 32px 8px; border: none; box-shadow: none; border-radius: 4px;}
	.home .search-box .form-text {width:100%;}
	.home .present {width:100%; height:280px; margin:0 0 16px 0; float:left; background-color: #E8F4FF; color:#1A67AF;}
	.home .present h3 {padding:4px 8px;}


.module-home {
	color:#baddff;
	background-color: #1a67af;
	h3, h4, h5 {color: #baddff;}
	.page.-content {background-color: transparent;}
	.package-footer {display: none;}
	.page.-primary .login {border-radius: 8px; border: none;}
	.notify-main {color: #333;}
	.login {
		--input-height: 56px;
		* {box-sizing: border-box;}
		h5 {border: none;}
		>.-form>.form { background-color: #eff7ff;}
		label {margin: 0 0 0 8px;}
		.form-text, .form-password {height: var(--input-height); border-radius: var(--input-height); padding: 8px 32px 0 32px; width: 100%;}
		.form-select {height: var(--input-height); border-radius: var(--input-height);}
		button {height: var(--input-height); border-radius: var(--input-height);}
	}
}






.garage-job-statusbar {margin: 0 0 4px 0; padding: 0 8px; flex: 1 0 calc(100% - 18px); background-color: rgb(253, 249, 237); border: 1px rgb(253, 249, 237) solid;}
.garage-job-statusbar h3 {display: none;}



.garage-bill {
	&>.-header {
		display: flex; flex-wrap: wrap;
		>address {flex: 0 0 60%; font-style: normal; text-align: left; font-weight: normal; font-size: 0.9em; margin-bottom: 32px;}
		>.-title {flex: 0 0 40%; text-align: right;}
		>.-info {flex: 1; margin-bottom: 16px; padding: 8px; border: 2px #333 solid;}
		>.-date {flex: 0 0 30%; margin-bottom: 16px;padding: 8px; border: 2px #333 solid; border-left: none;}
		>.-description {flex: 0 0 100%; margin-bottom: 16px;}
	}

	.-indent {text-indent: 2em;}
	.card {box-shadow: none;}
	.card-item {display: inline-block;}
	.card-item .label {display: inline-block; margin-right:8px;}
	&>.-tran tbody>tr>th:first-child {text-align: left;}

	&>.-footer {
		flex: 0 0 100%; margin-top: 32px;
		>.-sign {flex: 0 0 100%; text-align: center; display: flex; flex-wrap: wrap;}
		>.-sign.-co-2>* {flex: 0 0 50%;}
		>.-sign>*>span {display: block;}
		>.-sign>*>.-signname {width: 100%; max-width: 200px; margin: 0 auto; display: flex;}
		>.-sign>*>.-signname>span {flex: 1;}
	}

	&.-job-qt .-description .nav.-page>* {margin-bottom: 8px;}

	&.-billing {
		>.-header {
			>address {flex: 0 0 100%; margin-bottom: 16px; text-align: center;}
			>.-title {flex: 0 0 100%; text-align: center;}
			>.-date {flex: 0 0 100%; margin: 0; padding: 0; text-align: right; border: none; order: 2;}
			>.-info {flex: 0 0 100%; padding: 0; border: none; margin: 0; order: 3;}
			>.-description {order: 4;}
		}

		>.-footer {
			>.-shopname {width: 50%; margin: 0 0 48px auto; text-align: center;}
		}
	}
}

.garage-job-list {
	td {position: relative;}
	.form-text.-jobno {width: 5em;}
	.form-text.-date {width: 6em;}
	.-remain-many .-toret {color: green;}
	.-carnotin td {color: #a2a2a2;}
	.-remain-late .-toret {color: red;}
	.-remain-today .-toret {color: red; font-weight: bold;}
	.-remain-1 .-toret {color: red;}
	.-remain-2 .-toret {color: #ff9e5e;}
	.-remain-3 .-toret {color: #e4e400;}
	td.-customer-name {text-align: left;}
	td.-customer-name>.form-group>.input-append {background: #fff;}
}

.garage-job-new {background-color: transparent;}
	.garage-job-new h3 {background-color: #ccc; text-align: center; font-size:1.4em;padding:8px 0;}
	.garage-job-new .form-item {position: relative;}
	.garage-job-new .form-text {width: -moz-available; width: calc(100% - 16px); color:#666;}
	.garage-job-new .form-select.-disabled {background-color: #f0f0f0;}
	.garage-job-new .button-save {margin:20px 0; padding:8px 0px; width:100%; font-size: 1.4em;}
	.garage-job-new option {color:#666;background:#f0f0ef;white-space:nowrap;appearance:button;text-overflow:ellipsis; padding:2px;}
	.garage-job-new .sg-box.-addcode {position:absolute; margin:0; right:0; top:25px; border:1px #ccc solid; padding: 8px 6px 0 6px; height:32px; border-radius: 4px; z-index: 1;}
	.garage-job-new .sg-box.-addcode:hover {background-color: #eee;}
	.garage-job-new .sg-box.-addcode .icon:hover {background-color: transparent;}
	.garage-job-new .form-item.-edit-job-jobno .form-text,
	.garage-job-new .form-item.-edit-job-plate .form-text {text-transform: uppercase;}



.garage-job-view {display: flex; flex-wrap: wrap;}
	.garage-job-view>.-side {flex: 0 0 200px; position: relative;}
	.garage-job-view>.-detail {flex: 1; padding: 0 0 0 16px; overflow: auto;}
	.garage-job-view .label {display: block;}
	.garage-job-view .value {display: block; font-weight: bold; padding:4px; margin-bottom:10px; background-color: #eee;}

	.garage-job-view>.-side h3 {padding:8px; background-color: #e5e5e5; text-align: center;}
	.garage-job-view>.-side .header {padding: 0;}
	.garage-job-view>.-side .header a {position: absolute; top: 4px; right: 4px; background: #fff; border-radius: 50%; height: 29px; width: 29px;}
	.garage-job-view>.-side .header .icon {margin: 2px auto; display: block;}
	.garage-job-view>.-side .menu {margin-bottom:32px; box-shadow:0 0 1px 1px #ccc inset;}
	.garage-job-view>.-side .menu .ui-menu a {padding:8px; width:auto;}
	.garage-job-view>.-side .menu .ui-menu a:hover {background-color: #eee;}
	.garage-job-view>.-tran .inputblock {margin:0 0 4px 16px; display: inline-block; white-space: nowrap; padding:4px; color:#999; background-color: #fff; opacity: 0.8; border-radius: 4px; font-size:0.9em; display: none;}

.form-select.-damagecode {width: 4em;}
.item.-garage-job-tran .-highlight td {background-color: #DBFFD3;}
.item.-garage-job-tran thead .icon {display:none;}
.item.-garage-job-tran .nav.-hover {opacity: 0.8;}
.item.-garage-job-tran tr.-wait {color: red;}
.item.-garage-job-tran .-wait>.icon {color: gray;}
.item.-garage-job-tran tr.-wait .-wait>.icon {color: red;}

.garage-job-title>* {padding: 4px; margin: 4px;}

.garage-job-do>.garage-job-title {flex: 0 0 200px;}
.garage-job-do>.garage-job-title>* {flex: 1 0 100%;}
.garage-job-do>.garage-job-tran {flex: 1 0 1px;}
.garage-job-do>.remark {flex: 1 0 100%;}
.garage-job-do>.garage-job-title.-sg-view:nth-of-type(2) {flex: 0 0 160px;}

.garage-job-assign>.ui-item {margin-bottom: 4px;}
.garage-job-assign>.ui-item.-active {background-color: #c7ffc7;}

.garage-job-tech {
	>.ui-item {margin: 0 8px 64px 8px; padding: 0; border: 1px #999 solid; border-radius: 8px; box-shadow: none;}
	>.ui-item>.header {flex: 1 0 90%; text-align: center; background-color: #ff7272; margin: 0 0 8px 0; padding: 8px 0; display: block; border-radius: 7px 7px 0 0;}
	>.ui-item>.header>h3 {color: #fff;}
	>.ui-item>.do-photo {flex: 1 0 100%;  margin: 4px 0 8px 0; padding-bottom: 64px; position: relative;}
	>.ui-item>.header .nav.-header {position: relative; top: 0; right: 0;}
	>.ui-item>.header .nav.-header>ul {margin: 0 auto;}
	.ui-album>.ui-item {width: 49%; margin:0 2% 2% 0;}
	.ui-album>.ui-item:nth-child(2n+2) {margin-right:0;}
	.do-photo h5 {text-align: center; background-color: #ddd; margin: 0 0 4px 0; padding: 8px 0;}
	.do-photo.-photo1 {background-color: #deffc5;}
	.do-photo.-photo1 h5 {background-color: #4AA900;}
	.do-photo.-photo2 {background-color: #e2daa3;}
	.do-photo.-photo2 h5 {background-color: #a99400;}
	.do-photo.-photo3 {background-color: #d1fdff;}
	.do-photo.-photo3 h5 {background-color: #00a1a9;}
	.do-photo.-photo4 {background-color: #ffe6dc; margin-bottom: 0; border-radius: 0 0 7px 7px;}
	.do-photo.-photo4 h5 {background-color: #F48559;}
	.do-photo.-photo5 {background-color: #ffd1fd;}
	.do-photo.-photo5 h5 {background-color: #ffa3fb;}
	.do-photo.-photo6 {background-color: #c5ecff; margin-bottom: 0; border-radius: 0 0 7px 7px;}
	.do-photo.-photo6 h5 {background-color: #7bd5ff;}
	.nav.-card {padding: 8px 0; position: absolute; bottom: 0; width: 100%; text-align: center;}
	.ui-album .timestamp {z-index: 1; position: absolute; font-size: 0.8em; bottom: 0; background-color: #fff; opacity: 0.6; padding: 4px; right: 0; left: 0; text-align: center;}

	.do-photo {
		.-profile {
			position: absolute;
			top: 4px;
			left: 4px;
			>a {display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px #fff solid;}
		}
	}
}


.garage-do-cmd {display:block; margin:0 auto; width:20px; height:20px; line-height:20px; font-size:20px; border-radius:50%; border:1px #eee solid;}
.garage-do-cmd.-active {background-color:green; color:#DAFFCE; border:1px green solid;}
.garage-do-cmd.-inactive {background-color:#eee; color:#ddd;}



.garage-code-trans td {position: relative;}
.garage-code-trans .col-code {width:10%;}
.garage-code-trans .col-description {width:90%;}
.garage-code-trans .-input .-floating {white-space: nowrap; margin: 8px 0 0 auto;display: block;}
.garage-code-trans .-input .button-cancel {width:120px;white-space:nowrap;margin:8px 0 0 auto; display:block;text-align:right;}
.garage-code-trans .search {position: absolute;margin: 0; padding: 0; border:none; background-color: transparent; top: 12px; right: 6px;}



.garage-qt {
	.garage-qt-form .form-item.-edit-insuname {width: 160px;}
	.garage-qt-form .form-item.-edit-searchqt {width: 120px;}
	.garage-bill.-job-qt>.-header>address {flex: 0 0 100%; margin-bottom: 16px; text-align: center;}
	.garage-bill.-job-qt>.-header>.-title {flex: 0 0 100%; text-align: center;}
	.garage-bill.-job-qt>.-header>.-date {flex: 0 0 100%; margin: 0; padding: 0; text-align: right; border: none; order: 2;}
	.garage-bill.-job-qt>.-header>.-info {flex: 0 0 100%; padding: 0; border: none; margin: 0; order: 3;}
	.garage-bill.-job-qt>.-header>.-description {order: 4;}
	.garage-bill.-job-qt .-bill-id {display: none;}
}


.garage-report-home {
	.-menu .ui-item {display: flex; padding: 2px; border-bottom: 1px #eee solid;}
	.-menu .-desc {flex: 1; white-space: nowrap;}
	.-menu .-value {flex: 0 0 7em; background-color: #ddd; border-radius: 4px; padding: 4px; text-align: center; white-space: nowrap;}
}


.garage-job-in {
	.garage-job-in-form {flex: 1; padding: 8px;}
	.garage-job-in-form .icon.-select-active {width: 24px; height: 24px; margin: 0; display: block; position: absolute; bottom: 4px; left: calc(50% - 12px); border-radius: 50%; background-color: #fff; color: gray; opacity: 0.8;}
	.garage-job-in-form>.nav>.ui-card>.ui-item.-active>.icon {display: block; color: #fff; background-color: green;}
	.garage-job-in-form .-car-type-1 {background: url(car-1.png) center 4px no-repeat; background-size: 40px;}
	.garage-job-in-form .-car-type-2 {background: url(car-2.png) center 4px no-repeat; background-size: 40px;}
	.garage-job-in-form .-car-type-3 {background: url(car-3.png) center 4px no-repeat; background-size: 40px;}

	.garage-in-form  {flex: 0 0 100%;}
	.-car {flex: 0 0 100px; position: relative;}
	.-car-photo {width: 120px; height: 240px; margin: 32px auto; background-image: url(car-1.png); background-size: contain; background-repeat: no-repeat; position: relative;}
	.-car-photo.-type-1 {background-image: url(car-1.png);}
	.-car-photo.-type-2 {background-image: url(car-2.png);}
	.-car-photo.-type-3 {background-image: url(car-3.png);}

	.-car-pos {width: 32px; height: 32px; display: block; background-color: red; border-radius: 50%; text-align: center; color: #fff; line-height: 32px; position: absolute; border: 2px #fff solid;}

	.-car-pos.-pos-1 {top: 0; left: 10%;}
	.-car-pos.-pos-2 {top: 0; right: 10%;}
	.-car-pos.-pos-3 {top: 20%; left: 2%;}
	.-car-pos.-pos-4 {top: 20%; right: 2%;}
	.-car-pos.-pos-5 {top: 40%; left: 2%;}
	.-car-pos.-pos-6 {top: 40%; right: 2%;}
	.-car-pos.-pos-7 {top: 58%; left: 2%;}
	.-car-pos.-pos-8 {top: 58%; right: 2%;}
	.-car-pos.-pos-9 {top: 75%; left: 2%;}
	.-car-pos.-pos-10 {top: 75%; right: 2%;}
	.-car-pos.-pos-11 {top: 95%; left: 10%;}
	.-car-pos.-pos-12 {top: 95%; right: 10%;}
	.-car-pos.-pos-13 {top: calc(50% - 16px); left: calc(50% - 16px);}

	.garage-job-in-form .sg-tabs>div {border: 1px #ccc solid; border-top: none; padding-bottom: 8px; margin-bottom: 32px;}
	.nav.-code-add {margin: 0 8px;}
	.nav.-code-add .btn>span>span {display: inline-block; background-color: red; width: 1.7em; border-radius: 50%; height: 1.7em; line-height: 1.7em; color: #fff;}

	.nav.-close {position: absolute; top: -4px; right: 0;}
	.garage-job-in-form>.-search {margin: 0 0 16px;}

	.garage-job-in-before .subheader {background-color: #eee;}
	.garage-job-in-before .ui-album>.ui-item {width: 120px; height: 120px;}
	.garage-job-in-before .header {text-align: center; background-color: #eee; margin-bottom: 8px;}
	.garage-job-in-before .ui-album {margin-bottom: 64px;}
	.garage-job-in-before {
		.-profile {
			position: absolute;
			top: 4px;
			left: 4px;
			>a {display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px #fff solid;}
		}		
	}
}


.module-garage {
	&.-job-type-จ็อบใน .sg-toolbar.-main {background-color: green;}
	&.-job-type-จ็อบนอก .sg-toolbar.-main {background-color: gray;}
	&.-job-type-สงขลา .sg-toolbar.-main {background-color: #008aff;}
}

/* Softganz APP */
.module.-softganz-app {background-color: #eee;}
	.module.-softganz-app .page.-header {display: none; max-width: none;}
	.module.-softganz-app .page.-content {padding: 0; margin:0; max-width: none;}
	.module.-softganz-app.-module-has-toolbar .page.-content {padding-top: 0; margin: 0;}
	.module.-softganz-app .sg-toolbar.-main {height: auto; position: relative; border: none;}
	.module.-softganz-app .page.-footer {display: none;}
	.module.-softganz-app .package-footer {display: none;}
	.module-garage.-softganz-app.-job.-tech .sg-toolbar {display: none;}
	.module-garage.-softganz-app .nav.-submodule {display: none;}
	.module-garage.-softganz-app .sg-toolbar.-main>h2 {display: none;}

	.module-garage.-softganz-app .sg-toolbar.-main .search-box {height: 48px; border-radius: 0; background-color: #fff; position: relative; width: 100%; top: 0; left: 0; margin-bottom: 16px; }
	.module-garage.-softganz-app .sg-toolbar.-main .search-box input {opacity: 1;}
	.module-garage.-softganz-app .sg-toolbar.-main .search-box .btn {background-color: #fff; padding-left: 16px; padding-right: 16px;}
	.module-garage.-softganz-app .sg-toolbar.-main .search-box .btn>span {display: none;}





/******************
* Responsive web
******************/
@media (min-width:30em){    /* 480/16 = 30 */
	.home h2 {font-size:2em; text-align: left; margin:0 0 32px 0;}
	.home .present {height: 280px;}
	.home .present .sg-chart {height: 280px;}

	.garage-job-tech {
		>.ui-item>.do-photo {flex: 0 0 47%; margin: 8px 1.5% 8px 1.5%;}
		.do-photo.-photo3 {margin-bottom: 16px; border-radius: 0;}
		.do-photo.-photo4 {margin-bottom: 16px; border-radius: 0;}
		.do-photo.-photo5 {margin-bottom: 16px; border-radius: 0;}
		.do-photo.-photo6 {margin-bottom: 16px; border-radius: 0;}
	}
}

@media (min-width:37em){    /* 640/16 = 40 */
	.page.-header header {width:48px; overflow: hidden; float: left;}
	.home.-topnews {height: 200px;}

	.home.-news {width:48%; float:left;}
		.home.-news h2 {font-size:1.6em;}
	.home.-intro {width:48%; float:right;}
		.home.-intro h2 {font-size:1.6em;}

	.home.-area {width:48%; float:left; min-height: 400px;}
	.home.-area.-a11 {float:left;}
	.home.-area.-a12 {float:right;}
	.home.-area.-a12 h2 {background-position: top right;}

	.home.-facebook {width:48%; float:left;}
	.home.-facebook.-fb12 {float:right;}

	.home.-links li {width: 23%; display: block; float: left; margin-right: 2%;}
	.home.-links li:last-child {margin-right:0;}

}

@media (min-width:45em) { /* 720/16 = 45 */
	.page.-header {overflow-x:initial;}
	.module-home div#ribbon {width:200px; position:fixed; border:none;background:transparent;top:48px; z-index:10;}
	.module-home ul li.head {display:none;}
	.module-home li#user-menu-edit {display:block;}
	.module-home ul#user-menu li a {border:none;}

	.widget .widget-item h3 {position: relative; height: 2em; overflow: hidden;}
	.widget .widget-item .summary {width: 100%; position: relative;}


	.nav.-master {margin-left:0;}
	.nav.-submaster {margin-left:0;}
	.nav.-submaster .ui-item span {font-size:0.80em;}

	.home .search-box {width:702px;}

	.garage-job-new.-info {width:200px; float:left;}
	.garage-job-new.-trans {margin-left:220px;}
	#form-item-edit-job-submit1 {display: none;}

	.garage-job-in {
		.-car {flex: 0 0 200px;}
		.-car-photo {width: 180px; height: 360px;}
	}
}

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

@media (min-width:50em) {    /* 800/16 = 50 */
	.home .present {width: 370px; height:340px; margin:0 16px 0px 0; float:left;}
	.home .present .sg-chart {height: 300px;}
}


@media (min-width:56.25em) {    /* 900/16 = 56.25 */
	.page.-content {margin: 0 16px 32px; padding: 64px 0 0 0;}
	.home.-topnews {height: 320px;}
	.page.-header {background-position: center top; }

	.home .search-box {width:710px; margin-left:0; margin-right:0;}

	.garage-job-new.-info {width:300px; float:left;}
	.garage-job-new.-trans {margin-left:320px;}
}


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

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




@media print {
	body {font: 2.2rem/2.4rem "CordiaUPC", "Cordia New", "Sarabun", sans-serif; color:#000;}
	/* body {font: 14pt/14pt "CordiaUPC", "Cordia New", sans-serif; color:#000;} */
	.page.-header {height:30px;overflow:hidden; display: none;}
	.page.-header h1 {font-size:1em;text-align:right;height:30px;overflow:hidden;}
	#cse-search-box {display:none;}
	.page.-footer {display:none;}
	#paper-footer, .package-footer {display:none;}
	.noprint {display: none;}
	.pagebreak {color: transparent; border: none; page-break-after:always;}

	.page.-content {margin:0; padding: 0;}

	table.item {margin:0;padding:0;float:none;display:table;width:100%; border:none;}
	table.item tr td,
	table.item thead tr th {border-bottom:2px #333 solid;}
	table.item thead tr th {border-top:2px #333 solid;}
	table.item>thead>tr>th {padding:2px;}
	table.item>tbody>tr>td {padding-left:8px; padding-right: 8px; border-bottom: 2px #000 solid;}

	.col-center {text-align: center;}
	.col-money {text-align: center;}
	.col-amt {text-align:center;}
	.col-tool {text-align:center;}
	.col-date {text-align:center;white-space:nowrap;}
	.col-status {text-align:center;}
	.col-poster {text-align:center;}

	.item .col-no {text-align:center; padding-left:4px; padding-right:4px;}
	.item .col-no:after {content:".";}
	.item .subheader {font-weight: bold; background-color: #ddd;}
	.item .subfooter {font-weight:bold; background-color: #eaeaea;}

	.module:not(.-report) .sg-toolbar.-main {display: none;}
	.module.-report .sg-toolbar.-main nav {display: block;}
	.module.-report .sg-toolbar.-main form {display: block;}
	.sg-toolbar.-main h2 {font-size:1.2em;color:#000; margin:0; padding: 0;}
	.sg-toolbar .search-box {display: none;}

	.nav.-submodule {display:none;}

	.garage-job-statusbar {display: none;}
	.garage-job-view>.-side {flex: 1 0 100%; margin:0 0 0.25cm 0;}
	.garage-job-view>.-side .card-item {display: inline-block; margin:0 0.5em 0 0;}
	.garage-job-view>.-tran {flex: 1 0 100%; margin: 0;}
	.garage-job-view>.-tran table.item.-garage-job-tran {width:100%; display: table;}
	.garage-job-view>.-tran table.item.-garage-job-tran thead {display: none;}

	.garage-bill {font-size:105%;}
	.garage-bill.-info {margin:0 0 0.2cm;}

	.garage-job-new.-info {width: 100%; float: none;}
		.garage-job-new.-info .form-item {display: inline-block; width:auto; margin:0 0.5em 0 0; white-space: nowrap;}
		.garage-job-new.-info .-disabled {color:#000;}
		.garage-job-new.-info label {display: inline-block;}
		#garage-job-new .garage-job-new.-info input.form-text {margin:0; padding:0 2px; display: inline; overflow: hidden; text-align: left; white-space: nowrap;}
	.garage-job-new.-trans {width: 100%; clear: both; float: none; margin: 0;}
		.garage-job-new.-trans table.item {width:100%; display: table;}
		.item.-garage-job-tran {border:1px #000 solid;}
		.item.-garage-job-tran td,.item.-garage-job-tran th {padding:4px; border-right:1px #000 solid; border-bottom:1px #000 solid;}
		.item.-garage-job-tran .-damage {font-weight: bold;}
		.item.-garage-job-tran .-damage>span {display:block; color:#000; font-weight: bold; width:1.15em;height:1.15em; margin:0 auto; line-height: 1em; text-align: center;}

	.garage-do-cmd.-inactive {color:transparent; border:1px #f5f5f5 solid; display: none;}

	.form.-report .btn {display: none;}
	.form.-report.-inlineitem .form-item {display: inline;width:auto;}
	.form.-report .form-text,.form.-report .form-select {color:#333;border:none;box-shadow: none;}

	.reportform .btn {display: none;}
	.reportform.-inlineitem .form-item {display: inline;width:auto;}
	.reportform .form-text,.reportform .form-select {color:#333;border:none;box-shadow: none;}

	.garage-job-do>.garage-job-title {flex: 1 0 100%;}
	.module-garage.-job.-do .sg-toolbar.-main {display: block;}
	.garage-job-do>.garage-job-title>* {flex: 0 0 auto;}
	.garage-job-do>.garage-job-title>.insurer {flex: 1 0 100%;}
	.garage-job-do>.garage-job-title>.customer {flex: 1 0 100%;}

}