.wgis-main {
	background-image: url('../images/bg_top.png'), url('../images/bg_bottom.png');
	background-position: left top, right bottom;
	background-repeat: no-repeat, no-repeat;
	font-family: "Prompt";
	padding: 15px;
}
.wgis-main .wgis-title {
	font-size: 48px;
	font-weight: bold;
	text-align: center;
	color: #DC1266;
	padding-top: 50px;
	padding-bottom: 25px;
	margin-bottom: 25px;
	text-shadow: 0 0 2px white, 0 0 5px white;
}

.wgis-main .wgis-summary {
	display: flex;
	gap: 15px;
}

.wgis-main .wgis-summary .wgis-summary-box {
	display: flex;
	flex: 1;
	flex-direction: column;
	text-align: center;
	gap: 5px;
	align-items: center;
	cursor: pointer;
}
.wgis-main .wgis-summary .wgis-summary-box .wgis-summary-img {
	height: 150px;
    width: 150px;
    margin-bottom: 15px;
    border-radius: 50%;
    border: 10px solid #E4E4E4;
    padding: 25px;
    background-color: #fff;
}
.wgis-main .wgis-summary .wgis-summary-box .wgis-summary-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.wgis-main .wgis-summary .wgis-summary-box .wgis-summary-text {
	font-family: 'Kanit';
	font-size: 20px;
	margin-bottom: 15px;
}
.wgis-main .wgis-summary .wgis-summary-box .wgis-summary-amount {
	
}
.wgis-main .wgis-summary .wgis-summary-box .wgis-summary-amount span {
	display: inline-block;
	padding: 5px 50px;
	border-radius: 20px;
	background-color: #E4E4E4;
	color: #000;
}

.wgis-main .wgis-summary .wgis-summary-box.wgis-summary-box-active .wgis-summary-img {
	border-color: red;
}
.wgis-main .wgis-summary .wgis-summary-box.wgis-summary-box-active .wgis-summary-amount span {
	background-image: linear-gradient(90deg, rgb(237, 119, 73) 0%, rgb(235, 16, 107) 35%, rgb(216, 32, 117) 60%, rgb(182, 24, 198) 85%, rgb(182, 24, 198) 100%);
	color: #fff;
	position: relative;
}

.wgis-main .wgis-summary .wgis-summary-box.wgis-summary-box-active .wgis-summary-amount span::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(-1 * 13px); /* วางไว้ด้านล่างนอก span */
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #D80D98; /* ทิศที่เป็นสีคือ top -> จะเป็นสามเหลี่ยมคว่ำ */
	pointer-events: none;
}




.wgis-main .wgis-map {
	margin-top: 50px;
	display: flex;
}

.wgis-main .wgis-map-info {
	flex: 1;
	padding: 15px;
}
.wgis-main .wgis-map-info .wgis-map-info-titile {
	font-size: 48px;
	margin-bottom: 15px;
}
.wgis-main .wgis-map-info .wgis-map-info-titile em {
	display: inline-block;
	width: 90px;
	height: 90px;
	background-color: red;
	background-image: linear-gradient(135deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 98, 1) 0%, rgba(182, 24, 198, 1) 73%, rgba(182, 24, 198, 1) 100%, rgba(182, 24, 198, 1) 100%);
	border-radius: 50%;
	font-size: 40px;
    line-height: 90px;
    text-align: center;
	color: #fff;
	margin-right: 15px;
}

.wgis-main .wgis-map-info .wgis-map-info-amount {
	font-family: 'Kanit';
	font-size: 30px;
	display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}
.wgis-main .wgis-map-info .wgis-map-info-amount span {
	color: #BF15BA;
	font-weight: bold;
	font-size: 64px;
}

.wgis-main .wgis-map-info .wgis-map-info-region {
	padding: 15px;
}
.wgis-main .wgis-map-info .wgis-map-info-region-row {
	display: flex;
	margin-bottom: 20px;
}
.wgis-main .wgis-map-info .wgis-map-info-region-row .wgis-map-info-region-label {
	flex: 1;
	font-size: 30px;
}
.wgis-main .wgis-map-info .wgis-map-info-region-row .wgis-map-info-region-amount {
	width: 150px;
	font-size: 24px;
}
.wgis-main .wgis-map-info .wgis-map-info-region-row .wgis-map-info-region-amount span {
	display: block;
	width: 100%;
	padding: 10px 25px;
	border-radius: 25px;
	background-color: #ccc;
	color: #fff;
	text-align: center;
}
.wgis-main .wgis-map-info .wgis-map-info-region-row:nth-of-type(1) .wgis-map-info-region-amount span {
	background: linear-gradient(135deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 98, 1) 0%, rgba(182, 24, 198, 1) 73%, rgba(182, 24, 198, 1) 100%, rgba(182, 24, 198, 1) 100%);
}
.wgis-main .wgis-map-info .wgis-map-info-region-row:nth-of-type(2) .wgis-map-info-region-amount span {
	background: linear-gradient(135deg, rgba(242, 1, 139, 1) 0%, rgba(242, 1, 139, 1) 0%, rgba(14, 201, 254, 1) 0%, rgba(89, 88, 247, 1) 49%, rgba(117, 44, 245, 1) 100%, rgba(117, 44, 245, 1) 100%);
}
.wgis-main .wgis-map-info .wgis-map-info-region-row:nth-of-type(3) .wgis-map-info-region-amount span {
	background: linear-gradient(135deg, rgba(242, 1, 139, 1) 0%, rgba(242, 1, 139, 1) 0%, rgba(254, 151, 0, 1) 0%, rgba(255, 0, 129, 1) 44%, rgba(255, 0, 25, 1) 100%, rgba(255, 0, 25, 1) 100%);
}
.wgis-main .wgis-map-info .wgis-map-info-region-row:nth-of-type(4) .wgis-map-info-region-amount span {
	background: linear-gradient(135deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 102, 1) 0%, rgba(240, 153, 56, 1) 0%, rgba(228, 32, 116, 1) 37%, rgba(189, 33, 118, 1) 69%, rgba(129, 9, 46, 1) 100%, rgba(129, 9, 46, 1) 100%);
}
.wgis-main .wgis-map-info .wgis-map-info-region-row:nth-of-type(5) .wgis-map-info-region-amount span {
	background: linear-gradient(135deg, rgba(242, 1, 139, 1) 0%, rgba(242, 1, 139, 1) 0%, rgba(14, 201, 254, 1) 0%, rgba(89, 88, 247, 1) 49%, rgba(117, 44, 245, 1) 100%, rgba(117, 44, 245, 1) 100%);
}




.wgis-main .wgis-map-map {
	flex: 1;
	padding: 45px 25px 25px;
	display: flex;
	flex-direction: column;
}

.wgis-main .wgis-map-map .wgis-map-map-search {
	display: flex;
	margin-bottom: 15px;
	gap: 15px;
}
.wgis-main .wgis-map-map .wgis-map-map-search .wgis-map-map-search-label {
}
.wgis-main .wgis-map-map .wgis-map-map-search .wgis-map-map-search-control {
	flex: 1;
}
.wgis-main .wgis-map-map .wgis-map-map-search .wgis-map-map-search-control input {
	border-width: 0;
    background-color: #F2F2F2;
	border-radius: 10px 0px 0px 10px;
}
.wgis-main .wgis-map-map .wgis-map-map-search .wgis-map-map-search-control button {
	border-width: 0;
    background-color: #F2F2F2;
	border-radius: 0px 10px 10px 0px;
}

.wgis-main .wgis-map-map .wgis-map-map-zone { 
	height: 100%;
}
.wgis-main .wgis-map-map .wgis-map-map-zone > div { 
	height: 100%;
	border-radius: 15px;
}
.wgis-main .wgis-map-map .leaflet-popup-content-wrapper,
.wgis-main .wgis-map-map .leaflet-popup-tip {
	background: linear-gradient(135deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 98, 1) 0%, rgba(182, 24, 198, 1) 73%, rgba(182, 24, 198, 1) 100%, rgba(182, 24, 198, 1) 100%);
}
.wgis-main .wgis-map-map .gis-map-info { width: 250px; font-family: 'Prompt'; font-size: 16px; color: #fff; text-align: center; }
.wgis-main .wgis-map-map .gis-map-info-img { width: 100%; margin-bottom: 5px; }
.wgis-main .wgis-map-map .gis-map-info-img img { width: 100%; }
.wgis-main .wgis-map-map .gis-map-info-title { color: #fff;font-weight: bold; font-size: 16px; margin-bottom: 5px; }
.wgis-main .wgis-map-map .gis-map-info-section { margin-bottom: 5px; font-size: 13px;   }
.wgis-main .wgis-map-map .gis-map-info-section .btn-navi {
	display: block;
	border-radius: 5px;
	text-align: center;
	padding: 5px;
	background-image: linear-gradient(to bottom, #fff, #e6e6e6);
	color: #000;
}
.wgis-main .wgis-map-map .gis-map-info-section .btn-navi em {
	margin-right: 10px;
}

.wgis-main .wgis-map-map .wgis-map-map-zone .leaflet-container .leaflet-control-attribution { 
	background-color: #fff !important;
}
.wgis-main .wgis-map-map .wgis-map-map-zone .leaflet-container a { 
	color: #005f86;
}
.wgis-main .wgis-map-map .wgis-map-map-zone .marker-cluster-medium div { 
	background-color: rgba(240, 194, 12, 1);
}
.wgis-main .wgis-map-map .wgis-map-map-zone .marker-cluster-medium div span  { 
	color: #373737 !important;
}
.wgis-main .wgis-map-map .wgis-map-map-zone .marker-cluster-small div { 
	background-color: rgba(110, 204, 57, 1);
}
.wgis-main .wgis-map-map .wgis-map-map-zone .marker-cluster-small div span { 
	color: #2a2a2a !important;
}
.wgis-main .wgis-map-map .wgis-map-map-zone .marker-cluster-large div {
	background-color: rgba(241, 128, 23, 1);
}
.wgis-main .wgis-map-map .wgis-map-map-zone .marker-cluster-large div span { 
	color: #444 !important;
}

/* table */
.wgis-list {
	margin-top: 25px;
}
.wgis-list .wgis-list-title {
	font-family: 'Kanit';
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 25px;
	text-align: center;
}

.wgis-list .wgis-list-search {
	display: flex;
	gap: 15px;
	font-family: 'Prompt';
	font-size: 16px;
	margin-bottom: 20px;
}

.wgis-list .wgis-list-search .wgis-list-search-text {
	flex: 2;
}
.wgis-list .wgis-list-search .wgis-list-search-text input {
	background-color: #CF1E8A;
	color: #fff;
}
.wgis-list .wgis-list-search .wgis-list-search-text input::placeholder {
	color: #fff;
}
.wgis-list .wgis-list-search .wgis-list-search-select {
	flex: 1;
}
.wgis-list .wgis-list-search .wgis-list-search-select select[name='areagroup'],
.wgis-list .wgis-list-search .wgis-list-search-select select[name='region'] {
	background-color: #9b00ab;
	color: #fff;
}
.wgis-list .wgis-list-search .wgis-list-search-select select[name='areagroup'] option,
.wgis-list .wgis-list-search .wgis-list-search-select select[name='region'] option {
	background-color: #9b00ab;
}
.wgis-list .wgis-list-search .wgis-list-search-select select[name='province'],
.wgis-list .wgis-list-search .wgis-list-search-select select[name='district'],
.wgis-list .wgis-list-search .wgis-list-search-select select[name='subdistrict'] {
	background-color: rgb(102 102 102 / 65%);
	color: #fff;
}
.wgis-list .wgis-list-search .wgis-list-search-select select[name='province'] option,
.wgis-list .wgis-list-search .wgis-list-search-select select[name='district'] option,
.wgis-list .wgis-list-search .wgis-list-search-select select[name='subdistrict'] option {
	background-color: #fff;
	color: #000;
}
.wgis-list .wgis-list-search .wgis-list-search-select.wgis-list-search-select-selectpicker .bootstrap-select>.dropdown-toggle {
	font-size: 16px;
	background-color: #595959;
	color: #fff;
}
.wgis-list .wgis-list-search .wgis-list-search-select.wgis-list-search-select-selectpicker .bootstrap-select>.dropdown-toggle .filter-option-inner-inner {
	background-color: #595959;
	color: #fff;
}
.wgis-list .wgis-list-search .wgis-list-search-button {}
.wgis-list .wgis-list-search .wgis-list-search-button .btn.btn-search {
	background: #B00049 !important;
	border-color: #B00049 !important;
}
.wgis-list .wgis-list-search .form-control {
	font-size: 16px;
}


.wgis-list .wgis-list-tbl {
	width: 100%;
	position: relative;
}
.wgis-list .wgis-list-tbl .table {
	width: 100%;
	border-color: #D7D7D7;
}

.wgis-list .dataTable thead tr th {
	background-color: #B00049;
	color: #fff;
}

.wgis-list .dataTable thead tr th {
	text-align: center;
	border-bottom: 0px;
	font-family: 'Prompt';
	font-size: 17px;
	font-weight: normal;
}
.wgis-list .dataTable tbody tr td {
	border-color: #D7D7D7;
	font-family: 'tahoma';
	font-size: 14px;
}
.wgis-list .dataTable tbody tr.even td {
	background-color: #E4E4E4;
}

.wgis-list .dataTable .bottom .dataTables_info,
.wgis-list .dataTable .bottom .dataTables_length,
.wgis-list .dataTable .bottom .dataTables_paginate {
	text-align: center;
	font-family: 'Prompt';
	font-size: 14px;
	padding-top: 8px;
}
.wgis-list .dataTable .bottom .dataTables_length label {
	font-family: 'Prompt';
}
.wgis-list .dataTable .bottom .dataTables_length select {
	font-size: 12px;
}

.wgis-list table.dataTable thead>tr>th.sorting_disabled {
	padding-right: 8px;
}

.wgis-list table.dataTable .dataTables_empty {
	text-align: center;
}

.wgis-list .wgis-list-tbl .pagination>li>a {
	color: #565656;
}

/* responsive */
@media (max-width: 991px) {
	.wgis-main .wgis-map {
		flex-direction: column;
	}
	.wgis-main .wgis-map-map .wgis-map-map-zone > div { 
		height: 450px;
	}

	.wgis-list .wgis-list-search {
		flex-wrap: wrap;
	}
	.wgis-list .wgis-list-search .wgis-list-search-text {
		flex: unset;
		width: 100%;
	}
	.wgis-list .wgis-list-search .wgis-list-search-select {
		flex: unset;
		width: calc(33.33% - 12px);
	}
	.wgis-list .wgis-list-search .wgis-list-search-button {
		width: 100%;
	}
	.wgis-list .wgis-list-search .wgis-list-search-button .btn {
		width: 100%;
		margin-bottom: 5px;
	}
}
@media (max-width: 767px) {
	.wgis-main .wgis-summary {
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.wgis-main .wgis-summary .wgis-summary-box {
		width: calc(50% - 15px);
		flex: none;
	}
}
@media (max-width: 576px) {
	.wgis-main .wgis-summary {
		flex-direction: column;
        gap: 30px;
	}
	.wgis-main .wgis-summary .wgis-summary-box {
		width: calc(100% - 15px);
		flex: none;
	}
	.wgis-main .wgis-map-info .wgis-map-info-titile {
		font: 40px;
	}
	.wgis-main .wgis-map-info .wgis-map-info-region-row .wgis-map-info-region-label {
		font-size: 24px;
	}
	.wgis-main .wgis-map-info .wgis-map-info-region-row .wgis-map-info-region-amount {
		font-size: 20px;
	}

	.wgis-list .wgis-list-search {
		flex-wrap: wrap;
	}
	.wgis-list .wgis-list-search .wgis-list-search-text {
		flex: unset;
		width: 100%;
	}
	.wgis-list .wgis-list-search .wgis-list-search-select {
		flex: unset;
		width: 100%;
	}
	.wgis-list .wgis-list-search .wgis-list-search-button {
		width: 100%;
	}
	.wgis-list .wgis-list-search .wgis-list-search-button .btn {
		width: 100%;
	}
}

.wgis-page.wgis-page-list {
	margin-top: 15px;
}