.dataku-diskominfo-widget {
display: flex;
gap: 20px;
flex-wrap: wrap;
font-family: inherit;
color: #222;
max-width: 100%;
}
.dataku-diskominfo-widget * {
box-sizing: border-box;
}
.dd-sidebar {
flex: 0 0 280px;
max-width: 100%;
background: #f6f7f9;
border: 1px solid #e2e4e8;
border-radius: 8px;
padding: 14px;
}
.dd-sidebar-title {
margin: 0 0 10px;
font-size: 15px;
font-weight: 700;
color: #1c3d6e;
}
.dd-dataset-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 480px;
overflow-y: auto;
}
.dd-dataset-list li {
margin: 0 0 4px;
} .dd-dataset-link {
display: block;
width: 100%;
padding: 8px 10px;
border-radius: 6px;
font: inherit;
font-size: 13px;
line-height: 1.4;
text-align: left;
color: #333;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
}
.dd-dataset-link:hover {
background: #eef2f8;
}
.dd-dataset-link:focus-visible {
outline: 2px solid #1c3d6e;
outline-offset: 1px;
}
.dd-dataset-link.active {
background: #1c3d6e;
color: #fff;
font-weight: 600;
}
.dd-content {
flex: 1 1 420px;
min-width: 0;
background: #fff;
border: 1px solid #e2e4e8;
border-radius: 8px;
padding: 16px 18px;
}
.dd-content-header {
display: block;
margin-bottom: 4px;
}
.dd-title {
margin: 0 0 10px 0;
font-size: 17px;
font-weight: 700;
color: #1c3d6e;
}
.dd-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.dd-year-label {
font-size: 12px;
color: #555;
display: flex;
align-items: center;
gap: 6px;
}
.dd-year-select {
padding: 5px 8px;
border-radius: 5px;
border: 1px solid #ccc;
font: inherit;
font-size: 13px;
}
.dd-export {
position: relative;
}
.dd-export-btn {
padding: 6px 12px;
background: #1c3d6e;
color: #fff;
border: none;
border-radius: 5px;
font-size: 13px;
cursor: pointer;
}
.dd-export-btn:focus-visible {
outline: 2px solid #1c3d6e;
outline-offset: 2px;
} .dd-export-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
margin-top: 4px;
width: 100%;
background: #ffffff;
border: 1px solid #ccd0d5;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
z-index: 10;
overflow: hidden;
}
.dd-export.open .dd-export-menu {
display: block;
}
.dd-export-menu button {
display: block;
width: 100%;
text-align: left;
padding: 6px 12px;
background: transparent;
color: #333333;
border: none;
font-size: 13px;
cursor: pointer;
}
.dd-export-menu button:hover,
.dd-export-menu button:focus-visible {
background: #f0f2f5;
color: #1c3d6e;
}
.dd-source {
font-size: 12px;
color: #777;
margin: 4px 0 14px;
} .dd-table-wrap {
overflow-x: auto;
position: relative;
border-radius: 4px; }
.dd-table-wrap:focus-visible {
outline: 2px solid #1c3d6e;
outline-offset: 2px;
}
.dd-table-wrap.dd-scrollable {
cursor: grab;
}
.dd-table-wrap.dd-dragging {
cursor: grabbing;
user-select: none;
}
.dd-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px; table-layout: auto;
}
.dd-table th,
.dd-table td {
border-bottom: 1px solid #e2e4e8;
border-right: 1px solid #e2e4e8;
padding: 7px 10px;
text-align: left;
white-space: nowrap;
}
.dd-table th:first-child,
.dd-table td:first-child {
border-left: 1px solid #e2e4e8;
}
.dd-table thead th {
border-top: 1px solid #e2e4e8;
}
.dd-table th {
background: #1c3d6e;
color: #fff;
font-weight: 600;
position: sticky;
top: 0;
z-index: 2;
}
.dd-table td {
text-align: right;
}
.dd-table td:first-child,
.dd-table td:nth-child(2) {
text-align: left;
} .dd-fit {
width: 1px;
white-space: nowrap;
}
.dd-row-total td {
font-weight: 700;
background: #f2f4f7;
}
.dd-row-kecamatan td {
font-weight: 700;
background: #eaf0fa;
}
.dd-cell-msg {
text-align: left !important;
color: #777;
padding: 16px !important;
white-space: normal;
border-left: 1px solid #e2e4e8;
}
.dd-retry {
margin-left: 6px;
padding: 3px 10px;
background: #1c3d6e;
color: #fff;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.dd-retry:hover,
.dd-retry:focus-visible {
background: #163055;
} .dd-table--frozen .dd-freeze-1 {
position: sticky;
z-index: 1;
background: #fff;
}
.dd-table--frozen thead .dd-freeze-1 {
z-index: 3;
background: #1c3d6e;
}
.dd-table--frozen tbody .dd-row-total .dd-freeze-1 {
background: #f2f4f7;
}
.dd-table--frozen tbody .dd-row-kecamatan .dd-freeze-1 {
background: #eaf0fa;
} .dd-table-wrap.dd-scrollable.dd-is-scrolled .dd-table--frozen .dd-freeze-1 {
box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 720px) {
.dataku-diskominfo-widget {
flex-direction: column;
} .dd-sidebar,
.dd-content {
flex: 1 1 auto;
width: 100%;
}
.dd-dataset-list {
max-height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.dd-table-wrap {
scroll-behavior: auto;
}
} .dd-table td.dd-text {
text-align: left;
white-space: normal;
min-width: 120px;
}
.dd-table th.dd-text {
text-align: left;
} .dataku-diskominfo-widget [hidden] {
display: none !important;
} .dd-table td.dd-num.dd-num {
text-align: right;
} .dd-table th.dd-num.dd-num,
.dd-table td.dd-num.dd-num {
text-align: right;
}
.dd-table th.dd-center.dd-center,
.dd-table td.dd-center.dd-center {
text-align: center;
}