|
|
|
|
|
|
|
|
|
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
background-color: #f4f4f4; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
padding: 20px 0; |
|
|
} |
|
|
|
|
|
.header .logo { |
|
|
font-size: 24px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.nav { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.nav ul { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.nav li { |
|
|
display: inline; |
|
|
margin: 0 15px; |
|
|
} |
|
|
|
|
|
.nav a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
background: url('../images/hero-bg.jpg') no-repeat center center/cover; |
|
|
color: white; |
|
|
padding: 60px 0; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
.map-section { |
|
|
padding: 40px 0; |
|
|
background-color: white; |
|
|
} |
|
|
|
|
|
.map-container { |
|
|
height: 500px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.control-panel { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.legend { |
|
|
margin-top: 20px; |
|
|
padding: 10px; |
|
|
background-color: #f9f9f9; |
|
|
border: 1px solid #ddd; |
|
|
} |
|
|
|
|
|
|
|
|
.statistics-section { |
|
|
padding: 40px 0; |
|
|
background-color: #f4f4f4; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: white; |
|
|
border-radius: 5px; |
|
|
padding: 20px; |
|
|
margin: 10px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
padding: 20px 0; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.footer-section { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.social-link { |
|
|
color: white; |
|
|
margin: 0 10px; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
|
|
|
.info-panel { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
background-color: white; |
|
|
border: 1px solid #ddd; |
|
|
z-index: 1000; |
|
|
width: 300px; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.info-panel-header { |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
padding: 10px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.close-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 20px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
#kasusTable { |
|
|
border-collapse: collapse; |
|
|
width: 100%; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
#kasusTable th, #kasusTable td { |
|
|
border-bottom: 1px solid #ddd; |
|
|
padding: 6px 8px; |
|
|
} |
|
|
|
|
|
#kasusTable tr:nth-child(even) { |
|
|
background: #f9f9f9; |
|
|
} |
|
|
|
|
|
#kasusTable th { |
|
|
background: #efefef; |
|
|
font-weight: bold; |
|
|
border-bottom: 2px solid #ccc; |
|
|
} |
|
|
|
|
|
.summary-card { |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
|
|
|
} |
|
|
|
|
|
.summary-title { |
|
|
font-size: 14px; |
|
|
color: #555; |
|
|
font-weight: 600; |
|
|
margin-bottom: 5px; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.summary-value { |
|
|
font-size: 26px; |
|
|
font-weight: 700; |
|
|
color: #1f77b4; |
|
|
} |
|
|
|