body
{
	font-family: 'Prompt', sans-serif;
	font-size: 11pt;
}

#x-logo
{
	display:none;
}

#x-mini-title
{
	display:block;
}

#x-title
{
	position:relative;
	z-index:2;
	display:block;
	float:none;
}

#x-title h3
{
	color:#fff;
	font-weight:600;
	letter-spacing:.3px;
	margin:0;
}

#x-title h5
{
	color:rgba(255,255,255,.85);
	margin:0;
	font-weight:400;
}

#x-title img
{
	filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

#x-mini-logo
{
	background-image: url('/images/s-logo.png');
	background-repeat: no-repeat;
	background-position: center;
	width:49px;
	height:49px;
	display:block;
	float:left;
}

#x-branding
{
	color: #FFFFFF;
	text-shadow: 2px 2px 8x #000000;
	font-size: 12pt;
}

#x-mini-branding
{
	padding: 10px 0px;
	width: 450px;
	color: #FFFFFF;
	font-size: 16pt;
}

#x-organize
{
	width: 500px;
	display: block;
	color: #000000;
}

/* =========================================================
PAGE LAYOUT FIX
========================================================= */

#x-page-layout
{
	display:block;
	width:100%;
	position:relative;
}

#x-header-wrapper
{
	display:block;
	width:100%;
	position:relative;
	z-index:20;
	clear:both;
}

#x-error-wrapper
{
	display:block;
	width:100%;
	position:relative;
	clear:both;
}

#x-breadcrumb-wrapper
{
	display:block;
	width:100%;
	position:relative;
	clear:both;
}

#x-table-wrapper
{
	display:block;
	width:100%;
	position:relative;
	clear:both;
}

#x-footer-wrapper
{
	display:block;
	width:100%;
	position:relative;
	clear:both;
}

/* =========================================================
HEADER
========================================================= */

#x-header-space
{
	background:linear-gradient(135deg,#1e3c72 0%,#2f6fed 40%,#4facfe 100%);
	color:#fff;
	position:relative;
	display:block;
	overflow:hidden;
	min-height:100px;
	width:100%;
	z-index:5;
	clear:both;
}

/* hexagon */
#x-header-space:before
{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url("data:image/svg+xml,%3Csvg width='120' height='104' viewBox='0 0 120 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L90 0L120 52L90 104L30 104L0 52Z' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E");
	background-size:120px 104px;
	opacity:.5;
	pointer-events:none;
}

/* flare */
#x-header-space:after
{
	content:'';
	position:absolute;
	top:-60px;
	right:-80px;
	width:300px;
	height:300px;
	background:radial-gradient(circle,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0) 70%);
	pointer-events:none;
}

#x-header-space + *
{
	position:relative;
	z-index:3;
}

#x-header-bar
{
	display:flex;
	align-items:center;
	width:100%;
	padding:4px 5px;
	color:#8b8a8a;
	margin:0;
	min-height:30px;
}

#x-header-left
{
	display:flex;
	align-items:center;
	gap:15px;
}

#x-header-right
{
	margin-left:auto;
	text-align:right;
	white-space:nowrap;
}

#x-header-bar a
{
	text-decoration:none;
}

#x-header-bar i
{
	margin-right:4px;
}

#x-header-bar:after
{
	content:'';
	display:block;
	clear:both;
}

#x-extend-bar
{
	margin-left:auto;
	text-align:right;
	white-space:nowrap;
}

#x-header-bar a:link,
#x-header-bar a:visited
{
	color:#8b8a8a;
	cursor:auto;
}

#x-header-bar a:link:active,
#x-header-bar a:visited:active
{
	color:#f9bab8;
}

#x-mini-header
{
	background-color:#e09f67;
	width:100%;
	text-align:left;
	margin:0;
	padding:0;
	min-height:100px;
	position:relative;
	display:block;
	clear:both;
}

#x-mini-header-space
{
	min-width:492px;
	height:80px;
	background:#e46c0a;
	padding:0px 10px 0px 10px;
}

/* =========================================================
BODY / CONTENT
========================================================= */

#x-body
{
	background-color:#FFFFFF;
	overflow:hidden;
	word-wrap:break-word;
	width:100%;
	min-height:calc(100vh - 197px);
}

#x-menu-bar
{
	background-color:#4472c4;
	color:#FFFFFF;
	width:100%;
}

#x-message-bar
{
	position: absolute;
	display: table;
    z-index: 1;
	margin-top: 15%;
    margin-left: 20%;
	width: 60%;
	height: 100px;
	text-align:center;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	filter: alpha(opacity=80);
    opacity: 0.9;
}

#x-message-bar x-message
{
	width : 100%;
	height : 100%;
	display: table-cell;
	vertical-align: middle;
}

#x-message-bar ul
{
	list-style: none;
}

#x-error-bar
{
	border:1px solid #fedb1f;
	background-color:#fffdc8;
	color:#e71b25;
	position:relative;
	width:100%;
	min-height:80px;
	margin:0;
	padding:10px;
}

#x-error-bar ul
{
	list-style:none;
	margin:0;
	padding:0;
}

#x-content
{
	background-color:#fff;
	width:100%;
	overflow:hidden;
	word-wrap:break-word;
	padding:0px;
	margin:0px;
	min-height:calc(100vh - 185px);
	display:block;
	position:relative;
	box-sizing:border-box;
}

#x-content:after
{
	content:'';
	display:block;
	clear:both;
}

#x-content #left-sidebar
{
	float:left;
	background-color:#99b3e4;
	display:none;
	min-height:790px;
}

#x-content #main
{
	background:#f1f1f1;
	overflow:hidden;
	word-wrap:break-word;
	min-height:790px;
}

#x-content #workspace
{
	padding:5px;
}

.work-area
{
	width:100%;
	display:block;
	position:relative;
	box-sizing:border-box;
}

#x-footer
{
	background-color:#7a67b6;
	padding:3px 5px;
	color:#fff;
	position:relative;
	display:block;
	clear:both;
}

/* =========================================================
BREADCRUMB / SCREEN / BAR
========================================================= */

.cn-screen
{
	display:block;
	width:100%;
	position:relative;
	clear:both;
	box-sizing:border-box;
}

.cn-breadcrumb,
#x-breadcrumb
{
	display:block;
	width:100%;
	position:relative;
	clear:both;
	margin-top:5px;
	box-sizing:border-box;
	z-index:5;
}

.bar-1
{
	background:#88bbd6;
	color:#222;
	display:block;
	width:100%;
	position:relative;
	clear:both;
	box-sizing:border-box;
}

.bar-2
{
	background:#8781bd;
	color:#fff;
	padding:3px 5px;
	display:block;
	width:100%;
	position:relative;
	clear:both;
	box-sizing:border-box;
}

/* =========================================================
NAVIGATOR
========================================================= */

#x-navigator
{
	display:inline-block;
}

#x-navigator .cn-menu-topic
{
	padding:1px 5px;
	overflow:hidden;
	cursor:pointer;
	border-right:1px solid #bbb;
	display:inline-block;
}

#x-navigator .cn-menu
{
	display:none;
	position:absolute;
	background-color:#f9f9f9;
	min-width:160px;

	-webkit-box-shadow:10px 12px 9px -8px rgba(0,0,0,0.22);
	-moz-box-shadow:10px 12px 9px -8px rgba(0,0,0,0.22);
	box-shadow:10px 12px 9px -8px rgba(0,0,0,0.22);

	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

	z-index:1;
}

#x-navigator .cn-menu a
{
	color:#000000;
}

#x-navigator:hover .cn-menu
{
	display:block;
}

#x-navigator .cn-menu-topic:last-child
{
	border-right:none;
}

#x-navigator a
{
	color:#FFFFFF;
	padding:7px 6px;
	text-decoration:none;
	display:block;
}

#x-navigator a:hover
{
	background-color:#666;
	color:#white;
}

#x-vertical-navigator
{
	width:100%;
	margin:auto;
	display:block;
}

#x-vertical-navigator .cn-menu-topic
{
	background-color:#dae3f3;
	display:block;
	padding:5px;
	cursor:pointer;
}

#x-vertical-navigator .cn-menu-topic a
{
	color:black;
	font-weight:bold;
}

#x-vertical-navigator a
{
	text-decoration:none;
}

#x-user-name
{
	padding:2px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:18px;
	color:#FFFFFF;
}

#x-user
{
	padding:3px;
	text-align:center;
	text-decoration:none;
	background-color:transparent;
	border:0px;
	display:inline-block;
	cursor:pointer;
}

#x-user .cn-menu
{
	display:none;
	position:absolute;
	background-color:#f9f9f9;

	-webkit-box-shadow:10px 12px 9px -8px rgba(0,0,0,0.22);
	-moz-box-shadow:10px 12px 9px -8px rgba(0,0,0,0.22);
	box-shadow:10px 12px 9px -8px rgba(0,0,0,0.22);

	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

	z-index:1;
}

#x-user .cn-menu a
{
	color:#000000;
}

#x-user:hover .cn-menu
{
	display:block;
	width:160px;
}

#x-user a:hover
{
	background-color:#666;
	color:white;
}

#x-menu
{
	list-style-type:none;
	margin:0;
	padding:0;
}

#x-menu a
{
	display:block;
	padding:8px 16px;
	text-decoration:none;
}

#x-menu a:hover
{
	text-decoration:none;
}

/*==============================================
 Menu Type
==============================================*/
.c-menu
{
	margin:0;
	padding:0;
	background-color:#555;
}

.c-menu .indent-1
{
	margin-left:10px;
}

.c-menu .indent-2
{
	margin-left:20px;
}

.c-menu .indent-3
{
	margin-left:30px;
}

/* ======== Set 1 =========*/
.c-menu-1 .menu-area
{
	margin:0;
	padding:0;
	background-color:#ccc;
}

.c-menu-1 .menu-item
{
	margin:0;
	padding:0;
	background-color:#697184;
	color:#fff;
	font-weight:bold;
}

.c-menu-1 .menu-item:hover
{
	background-color:#f2f1ef;
	color:#333;
}

.c-menu-1 .item
{
	background-color:#697184;
	padding:5px 5px;
	cursor:default;
}

.c-menu-1 .item:hover
{
	background-color:#f2f1ef;
	cursor:default;
}

.c-menu-1 .item a
{
	text-decoration:none;
	color:#fff;
}

.c-menu-1 .item a:hover
{
	color:#333;
}

/* ======== Set 2 =========*/
.c-menu-2 .menu-area
{
	margin:0;
	padding:0;
	background-color:#ccc;
}

.c-menu-2 .menu-item
{
	margin:0;
	padding:0;
	background-color:#ced3e4;
	color:#333;
}

.c-menu-2 .menu-item:hover
{
	background-color:#f2f1ef;
	color:#333;
}

.c-menu-2 .item
{
	background-color:#ced3e4;
	padding:5px 5px;
	cursor:default;
}

.c-menu-2 .item:before
{
	/* content: "■ "; */
}

.c-menu-2 .item:hover
{
	background-color:#f2f1ef;
}

.c-menu-2 .item a
{
	text-decoration:none;
	color:#333;
}

.c-menu-2 .item a:hover
{
	background-color:#f2f1ef;
	color:#333;
}

/* ======== Set 3 =========*/
.c-menu-3 .menu-area
{
	margin:0;
	padding:0;
	background-color:#ccc;
}

.c-menu-3 .menu-item
{
	margin:0;
	padding:0;
	background-color:#b8bbc1;
	color:#697184;
}

.c-menu-3 .menu-item:hover
{
	background-color:#f2f1ef;
	color:#333;
}

.c-menu-3 .item
{
	background-color:#b8bbc1;
	padding:5px 5px;
	cursor:default;
}

.c-menu-3 .item:hover
{
	background-color:#f2f1ef;
}

.c-menu-3 .item:before
{
	/* content: "■ "; */
}

.c-menu-3 .item a
{
	text-decoration:none;
	color:#333;
}

.c-menu-3 .item a:hover
{
	color:#000;
}

/* ======== Set 4 =========*/
.c-menu-4 .menu-area
{
	margin:0;
	padding:0;
	background-color:#ccc;
}

.c-menu-4 .menu-item
{
	margin:0;
	padding:0;
	background-color:#b1a6a4;
	color:#fff;
}

.c-menu-4 .menu-item:hover
{
	background-color:#f2f1ef;
	color:#000;
}

.c-menu-4 .item
{
	background-color:#b1a6a4;
	padding:5px 5px;
	cursor:default;
}

.c-menu-4 .item:hover
{
	background-color:#f2f1ef;
	color:#000;
	cursor:default;
}

.c-menu-4 .item:before
{
	/* content: "● "; */
}

.c-menu-4 .item a
{
	text-decoration:none;
	color:#000;
}

.c-menu-4 .item a:hover
{
	color:#000;
}

/* ======== Set 5=========*/
.c-menu-5 .menu-area
{
	margin:0;
	padding:0;
	background-color:#ccc;
}

.c-menu-5 .menu-item
{
	margin:0px 0px 1px 0px;
	padding:0;
	background-color:powderblue;
	font-weight:bold;
}

.c-menu-5 .menu-item:hover
{
	background-color:#f2f1ef;
	color:#333;
}

.c-menu-5 .item
{
	background-color:powderblue;
	padding:8px 5px;
	cursor:default;
}

.c-menu-5 .item:hover
{
	background-color:#f2f1ef;
	color:#333;
	cursor:default;
}

.c-menu-5 .item a
{
	text-decoration:none;
	color:#333;
}

.c-menu-5 .item a:hover
{
	color:#333;
}

/*==============================================
 Banner
==============================================*/
.banner-1
{
	padding:0px 5px;
	border:1px solid #bbb;
}

.banner-2
{
	padding:0px 5px;
	background-color:#fff;
	border:1px solid #bbb;
}

.banner-3
{
	padding:0px 5px;
	background-color:#ddd;
	border:1px solid #bbb;
}

.banner-4
{
	padding:0px 5px;
	border:1px solid #bbb;
	border-radius:10px;
}

.banner-5
{
	background-color:#ddd;
	padding:0px 5px;
	border-radius:10px;
}

@media only screen and (min-width:1024px)
{
	#x-content #left-sidebar
	{
		display:table-cell;
	}

	#x-menu-bar
	{
		display:none;
	}

	#x-logo
	{
		background-image:url('../images/ku.png');
		background-repeat:no-repeat;
		background-position:center;
		width:63px;
		height:93px;
		display:block;
		margin:auto;
	}

	#x-branding
	{
		font-size:20pt;
	}

	#x-mini-branding
	{
		font-size:18pt;
		width:469px;
	}
}

@media only screen and (min-width:900px)
{
	#x-mini-title
	{
		display:none;
	}

	#x-title
	{
		display:block;
	}

	#x-extend-bar
	{
		float:right;
		display:inline;
	}
}

#x-target-space
{
	background-color:#fac090;
	color:#000000;
	text-align:left;
}

#x-prj-target1
{
	padding:10px 10px 10px 10px;
}

#x-prj-target2
{
	padding:10px 10px;
	text-align:right;
}

#x-target-total
{
	border:2px solid #71893f;
	background-color:#9bbb59;
	padding:5px;
	width:170px;
	display:inline-block;
	text-align:center;
}

/*==============================================
 Icon color
==============================================*/
.x-icon-red
{
	border-color:#df0909;
	background-color:#f62b2b;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#f62b2b), to(#d20202));
	background-image:-webkit-linear-gradient(top, #f62b2b, #d20202);
	background-image:-moz-linear-gradient(top, #f62b2b, #d20202);
	background-image:-ms-linear-gradient(top, #f62b2b, #d20202);
	background-image:-o-linear-gradient(top, #f62b2b, #d20202);
	background-image:linear-gradient(to bottom, #f62b2b, #d20202);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f62b2b, endColorstr=#d20202);
	color:#fff;
}

.x-icon-green
{
	border-color:#91b41a;
	background-color:#b6e026;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#b6e026), to(#abdc28));
	background-image:-webkit-linear-gradient(top, #b6e026, #abdc28);
	background-image:-moz-linear-gradient(top, #b6e026, #abdc28);
	background-image:-ms-linear-gradient(top, #b6e026, #abdc28);
	background-image:-o-linear-gradient(top, #b6e026, #abdc28);
	background-image:linear-gradient(to bottom, #b6e026, #abdc28);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#b6e026, endColorstr=#abdc28);
	color:#000;
}

.x-icon-blue
{
	border-color:#15aeec;
	background-color:#49c0f0;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
	background-image:-webkit-linear-gradient(top, #49c0f0, #2CAFE3);
	background-image:-moz-linear-gradient(top, #49c0f0, #2CAFE3);
	background-image:-ms-linear-gradient(top, #49c0f0, #2CAFE3);
	background-image:-o-linear-gradient(top, #49c0f0, #2CAFE3);
	background-image:linear-gradient(to bottom, #49c0f0, #2CAFE3);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#49c0f0, endColorstr=#2CAFE3);
	color:#000;
}

.x-icon-yellow
{
	border-color:#ffc826;
	background-color:#ffd65e;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#ffd65e), to(#febf04));
	background-image:-webkit-linear-gradient(top, #ffd65e, #febf04);
	background-image:-moz-linear-gradient(top, #ffd65e, #febf04);
	background-image:-ms-linear-gradient(top, #ffd65e, #febf04);
	background-image:-o-linear-gradient(top, #ffd65e, #febf04);
	background-image:linear-gradient(to bottom, #ffd65e, #febf04);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);
	color:#000;
}

.footer-contact
{
	margin-top:60px;
	padding:55px 20px 65px;
	background:#7f8ea3; /* เทาฟ้า */
	color:#ffffff;
	text-align:center;
}

.footer-contact__inner
{
	max-width:850px;
	margin:auto;
}

.footer-contact__logo img
{
	height:95px;
	margin-bottom:18px;
}

.footer-contact__addr
{
	font-size:16px;
	line-height:1.7;
	margin-bottom:8px;
}

.footer-contact__tel
{
	font-size:16px;
	margin-bottom:8px;
}

.footer-contact__help
{
	margin-top:10px;
	font-size:16px;
	font-weight:500;
}

/* =========================================================
SAFETY OVERRIDE FINAL
========================================================= */

.cn-content > div:first-child
{
	height:auto !important;
	min-height:0 !important;
}

#x-header-wrapper,
#x-error-wrapper,
#x-breadcrumb-wrapper,
#x-table-wrapper,
#x-content,
#x-footer-wrapper
{
	float:none !important;
}

#x-header-bar *,
#x-error-bar *,
.cn-breadcrumb *,
.bar-1 *
{
	float:none;
}

.cn-side-nav
{
	z-index:50;
}

.permit-summary
{
	padding: 14px 18px;
	background: #f8fafc;
	border-top: 1px solid #e5e7eb;
}

.permit-info-grid
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.permit-info-item
{
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 10px 12px;
}

.permit-label
{
	font-size: 13px;
	color: #64748b;
	margin-bottom: 4px;
}

.permit-value
{
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
}

.permit-renew-status
{
	margin-top: 12px;
}

.permit-badge
{
	display: inline-block;
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

.permit-badge-warning
{
	background: #fff7ed;
	color: #c2410c;
	border: 1px solid #fed7aa;
}

.permit-badge-danger
{
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

.permit-badge-success
{
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
}

@media (max-width: 768px)
{
	.permit-info-grid
	{
		grid-template-columns: 1fr;
	}
}