/* =========================================================
   REPRESENTATIVE PAGE
   Color:
   Navy #001229
   Gold #FBB801
========================================================= */

:root {
    --rep-navy: #001229;
    --rep-navy-2: #061d3d;
    --rep-gold: #FBB801;
    --rep-gold-light: #fff4cf;

    --rep-white: #ffffff;
    --rep-bg: #f6f7f9;

    --rep-text: #001229;
    --rep-muted: #687386;
    --rep-border: #e5e8ed;

    --rep-shadow:
        0 8px 25px rgba(0, 18, 41, 0.06);

    --rep-radius: 14px;
}


/* =========================================================
   RESET
========================================================= */

.representative-page,
.representative-page * {
    box-sizing: border-box;
}

.representative-page {
    width: 100%;
    background: var(--rep-bg);
    color: var(--rep-text);
    font-size: 20px;
}

.representative-page button,
.representative-page input,
.representative-page select {
    font-family: inherit;
}


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

.representative-header {
    min-height: 122px;
    color: #fff;
    background-image: url('../img/representative-city-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    background-color: #001229;
    border-bottom: 2px solid var(--rep-gold);
}


.representative-header-inner {

    max-width: 1500px;

    min-height: 122px;

    margin: auto;

    padding: 15px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* BRAND */

.header-brand {

    display: flex;

    align-items: center;

    gap: 18px;
}


.header-brand-icon {

    width: 76px;
    height: 76px;

    border: 2px solid var(--rep-gold);

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--rep-gold);

    font-size: 35px;
}


.header-title h1 {

    margin: 0;

    font-size: 32px;

    line-height: 1.2;

    font-weight: bold;
}


.header-title p {

    margin: 0;

    color: var(--rep-gold);

    font-size: 24px;

    font-weight: 600;
}


/* HEADER STATS */

.header-stat-list {

    display: flex;

    gap: 10px;
}


.header-stat {

    min-width: 190px;

    padding: 10px 20px;

    border: 1px solid var(--rep-gold);

    border-radius: 10px;

    background: rgba(255, 255, 255, .025);

    display: flex;

    align-items: center;

    gap: 15px;
}


.header-stat-icon {

    color: var(--rep-gold);

    font-size: 30px;
}


.header-stat strong {

    display: block;

    font-size: 35px;

    line-height: 1;

    font-weight: bold;
}


.header-stat span {

    display: block;

    font-size: 24px;

    color: rgba(255, 255, 255, .8);
}


/* =========================================================
   CONTAINER
========================================================= */

.representative-container {

    max-width: 1500px;

    margin: 0 auto;

    padding: 0 26px 35px;
}


/* =========================================================
   TABS
========================================================= */

.representative-tabs {

    height: 62px;

    display: flex;

    border-bottom: 1px solid var(--rep-border);

    background: #fff;

    margin-top: 10px;

}


.representative-tab {
    position: relative;
    width: 100%;
    padding: 0 20px;
    border: 0;
    background: #eff0f0;
    color: var(--rep-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 30px;
    font-weight: 700;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}


.representative-tab i {

    font-size: 25px;
}


.representative-tab.active {

    background: var(--rep-navy);

    color: #fff;
}


.representative-tab.active i {

    color: var(--rep-gold);
}


.representative-tab.active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 4px;

    background: var(--rep-gold);
}


/* =========================================================
   TAB CONTENT
========================================================= */

.representative-tab-content {
    display: none;
}

.representative-tab-content.active {
    display: block;
}


/* =========================================================
   PROVINCE LAYOUT
========================================================= */

.province-layout {
    padding-top: 14px;
}


/* =========================================================
   CARDS
========================================================= */

.province-map-card,
.province-list-card {

    background: var(--rep-white);

    border: 1px solid var(--rep-border);

    border-radius: var(--rep-radius);

    box-shadow: var(--rep-shadow);

    overflow: hidden;
}


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

.card-heading {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 18px 20px 10px;
}


.card-heading h2 {

    margin: 0;

    font-size: 30px;

    font-weight: bold;
}


.card-heading p {

    margin: 5px 0 0;

    font-size: 22px;

    color: var(--rep-muted);
}


/* =========================================================
   MAP
========================================================= */

.map-area {

    position: relative;

    height: 395px;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;
}


/*
    ตัวนี้เป็น Placeholder
    สามารถเอา SVG แผนที่จริงมาทับได้
*/

.fake-thailand-map {

    width: 270px;

    height: 365px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}


.map-country-shape {

    width: 190px;

    height: 340px;

    position: relative;

    background:
        linear-gradient(145deg,
            #d9e7f9,
            #91b9ec);

    clip-path: polygon(48% 0%,
            64% 4%,
            73% 14%,
            82% 18%,
            74% 29%,
            87% 35%,
            80% 47%,
            70% 55%,
            67% 67%,
            59% 74%,
            58% 87%,
            52% 100%,
            42% 87%,
            45% 72%,
            38% 62%,
            40% 51%,
            29% 43%,
            31% 34%,
            22% 27%,
            31% 19%,
            37% 9%);

    filter:
        drop-shadow(0 5px 7px rgba(0, 18, 41, .14));
}


/* MAP REGIONS */

.map-region {

    position: absolute;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    background: var(--rep-navy);

    color: #fff;

    border: 3px solid #fff;

    box-shadow:
        0 3px 8px rgba(0, 18, 41, .25);

    display: flex;

    align-items: center;
    justify-content: center;
}


.map-region b {

    font-size: 20px;
}


.map-region.north {
    top: 35px;
    left: 70px;
}


.map-region.northeast {
    top: 93px;
    right: 15px;
}


.map-region.central {
    top: 165px;
    left: 83px;
}


.map-region.east {
    top: 195px;
    right: 32px;
}


.map-region.south {
    bottom: 35px;
    left: 85px;
}


/* ZOOM */

.map-zoom {
    display: flex;
    align-items: center;
    position: absolute;
    left: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rep-border);
    background: #fff;
    color: var(--rep-navy);
    font-size: 23px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .04);
}


.map-zoom:hover {

    background: var(--rep-navy);

    color: var(--rep-gold);
}


.zoom-in {
    top: 25px;

    border-radius: 7px 7px 0 0;
}


.zoom-out {
    top: 65px;

    border-radius: 0 0 7px 7px;
}


/* =========================================================
   LEGEND
========================================================= */

.map-legend {

    padding: 0 20px 14px;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.legend-item {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #596579;

    font-size: 20px;
}


.legend-color {

    width: 14px;
    height: 14px;

    border-radius: 50%;
}


.legend-dark {
    background: var(--rep-navy);
}


.legend-medium {
    background: #5686c9;
}


.legend-light {
    background: #b9d2f4;
}


.legend-empty {
    background: #e3e5e8;
}


/* =========================================================
   MAP SUMMARY
========================================================= */

.map-summary {

    padding: 0 14px 14px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}


.map-summary-card {

    min-height: 70px;

    border: 1px solid var(--rep-border);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 10px 0px;
}


.map-summary-card>i {

    color: var(--rep-gold);

    font-size: 25px;
}


.map-summary-card strong {

    display: block;

    font-size: 35px;

    line-height: 1;

    font-weight: bold;
}


.map-summary-card span {
    display: block;
    color: var(--rep-muted);
    font-size: 25px;
    font-weight: bold;
}


/* =========================================================
   PROVINCE LIST HEADER
========================================================= */

.province-list-header {

    min-height: 74px;

    padding: 14px 18px;

    border-bottom: 1px solid var(--rep-border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.province-heading {

    display: flex;

    align-items: flex-start;

    gap: 11px;
}


.province-heading-icon {

    color: var(--rep-gold);

    font-size: 27px;
}


.province-heading h2 {

    margin: 0;

    font-size: 30px;

    font-weight: bold;
}


.province-heading p {

    margin: 4px 0 0;

    color: var(--rep-muted);

    font-size: 22px;
}


/* TOOLS */

.province-tools {

    display: flex;

    gap: 8px;
}


.representative-search {

    width: 245px;

    height: 50px;

    border: 1px solid var(--rep-border);

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0 12px;
}


.representative-search i {

    color: #66748a;

    font-size: 20px;
}


.representative-search input {

    width: 100%;

    border: none !important;

    outline: 0;

    font-size: 20px;

    color: var(--rep-text);
}


.representative-search input::placeholder {

    color: #8b95a5;
}


.representative-sort {

    width: 125px;

    height: 50px;

    border: 1px solid var(--rep-border);

    border-radius: 8px;

    padding: 0 10px;

    background: #fff;

    color: var(--rep-text);

    outline: 0;
}


/* =========================================================
   PROVINCE ROW
========================================================= */

.province-agent-row {

    min-height: 107px;

    padding: 13px 18px;

    border-bottom: 1px solid #edf0f3;

    display: grid;

    grid-template-columns:
        90px minmax(170px, 1fr) minmax(180px, 1fr) 130px;

    align-items: center;

    gap: 13px;

    transition: .2s;
}


.province-agent-row:hover {

    background: #fcfcfd;
}


/* AVATAR */

.representative-avatar {

    width: 78px;
    height: 78px;

    border-radius: 50%;

    overflow: hidden;

    background: #eef1f4;

    border: 1px solid #e0e4e8;
}


.representative-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* PERSON */

.representative-person h3 {

    margin: 0;

    font-size: 24px;

    font-weight: bold;
}


.representative-location {

    margin-top: 8px;

    font-size: 22px;

    color: #657086;
}


.representative-location i {

    color: var(--rep-gold);

    margin-right: 5px;
}


/* CONTACT */

.representative-contact {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 22px;

    color: #536074;
}


.representative-contact i {

    width: 20px;

    color: var(--rep-gold);

    text-align: center;
}


/* BUTTON */

.representative-detail {

    height: 38px;

    border: 1px solid var(--rep-gold);

    border-radius: 6px;

    background: var(--rep-navy);

    color: var(--rep-gold);

    font-size: 22px;

    font-weight: 700;

    transition: .2s;
}


.representative-detail:hover {

    background: var(--rep-gold);

    color: var(--rep-navy);
}


/* =========================================================
   PAGINATION
========================================================= */

.representative-pagination {

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;
}


.representative-pagination a {

    width: 32px;
    height: 32px;

    border-radius: 6px;

    text-decoration: none;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--rep-text);

    font-size: 20px;
}


.representative-pagination a:hover {

    background: #f1f3f6;
}


.representative-pagination a.active {

    background: var(--rep-navy);

    color: var(--rep-gold);

    font-weight: bold;
}


.representative-pagination a.disabled {

    opacity: .3;

    pointer-events: none;
}


.representative-pagination span {

    color: var(--rep-muted);

    padding: 0 4px;
}


/* =========================================================
   EMPTY
========================================================= */

.representative-empty {

    min-height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--rep-muted);
}


.representative-empty i {

    color: var(--rep-gold);

    font-size: 35px;

    margin-bottom: 10px;
}


.representative-empty p {

    margin: 0;

    font-size: 24px;
}


/* =========================================================
   BRANCH TAB
========================================================= */

#branch-tab {

    padding-top: 14px;
}


.branch-header {

    min-height: 70px;

    background: #fff;

    border: 1px solid var(--rep-border);

    border-radius: var(--rep-radius);

    padding: 14px 18px;

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;
    box-shadow: var(--rep-shadow);
}


.branch-header h2 {

    margin: 0;

    font-size: 30px;

    font-weight: bold;
}


.branch-header h2 i {

    color: var(--rep-gold);

    margin-right: 7px;
}


.branch-header p {

    margin: 5px 0 0;

    color: var(--rep-muted);

    font-size: 25px;
}


.branch-search {

    width: 260px;

    height: 50px;

    border: 1px solid var(--rep-border);

    border-radius: 8px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    gap: 8px;
}


.branch-search i {

    color: #66748a;
}


.branch-search input {

    width: 100%;

    border: none !important;

    outline: 0;

    font-size: 20px;
}


/* =========================================================
   BRANCH GRID
========================================================= */

.branch-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}


.branch-card {

    background: #fff;

    border: 1px solid var(--rep-border);

    border-radius: 11px;

    padding: 12px;

    display: grid;

    grid-template-columns: 76px 1fr;

    grid-template-rows: auto auto;

    gap: 10px 12px;

    transition: .2s;

    box-shadow: var(--rep-shadow);
}


.branch-card:hover {

    border-color: var(--rep-gold);

    box-shadow:
        0 8px 20px rgba(0, 18, 41, .08);

    transform: translateY(-2px);
}


.branch-card-top {

    grid-row: 1 / 3;
}


.branch-avatar {

    width: 76px;
    height: 76px;

    border-radius: 50%;

    overflow: hidden;

    background: #eef1f4;
}


.branch-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.branch-card-body {

    min-width: 0;
}


.branch-card-body h3 {

    margin: 4px 0 8px;

    font-size: 24px;

    font-weight: bold;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.branch-data {

    margin-top: 6px;

    font-size: 22px;

    color: #596579;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.branch-data i {

    width: 17px;

    color: var(--rep-gold);

    text-align: center;

    margin-right: 4px;
}


.branch-detail {

    grid-column: 1 / 3;

    height: 34px;

    border: 1px solid var(--rep-gold);

    background: #fff;

    color: var(--rep-navy);

    border-radius: 5px;

    font-size: 22px;

    font-weight: 700;
}


.branch-detail:hover {

    background: var(--rep-navy);

    color: var(--rep-gold);
}

/* =========================================================
   THAILAND PROVINCE MAP
========================================================= */

.map-area {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
}


/* =========================================================
   LEAFLET MAP
========================================================= */

#thailandProvinceMap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 700px;
    background: #ffffff;
    overflow: hidden;
    z-index: 1;
}


/* Leaflet container */

#thailandProvinceMap .leaflet-container {
    width: 100%;
    height: 100%;
    background: #ffffff !important;
    font-family: inherit;
}


/* เอาพื้นหลัง tile ออก */

#thailandProvinceMap .leaflet-tile-pane {
    display: none !important;
}


/* เอา attribution ออก */

#thailandProvinceMap .leaflet-control-attribution {
    display: none !important;
}


/* ไม่ให้มีเงาหรือพื้นหลังจาก pane */

#thailandProvinceMap .leaflet-map-pane,
#thailandProvinceMap .leaflet-overlay-pane,
#thailandProvinceMap .leaflet-shadow-pane {
    background: transparent !important;
}


/* =========================================================
   PROVINCE GEOJSON
========================================================= */

#thailandProvinceMap path.leaflet-interactive {
    stroke: #ffffff;
    stroke-width: 1;
    stroke-opacity: 1;

    fill-opacity: 0.95;

    cursor: pointer;

    transition:
        fill 0.15s ease,
        stroke 0.15s ease,
        stroke-width 0.15s ease;
}


/* =========================================================
   MAP ZOOM BUTTON
========================================================= */

.map-zoom {
    position: absolute;

    left: 12px;

    width: 36px;
    height: 36px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    background: #ffffff;

    color: #001229;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 18px;

    cursor: pointer;

    z-index: 1000;

    box-shadow:
        0 2px 8px rgba(0, 18, 41, 0.08);

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.map-zoom:hover {
    background: #001229;
    color: #FBB801;
    border-color: #001229;
}

.map-zoom.zoom-in {
    top: 12px;
}

.map-zoom.zoom-out {
    top: 54px;
}


/* =========================================================
   CUSTOM MAP TOOLTIP
========================================================= */

#provinceMapTooltip {
    position: absolute;

    display: none;

    z-index: 99999;

    min-width: 160px;

    padding: 12px 15px;

    background: #ffffff;

    border: 1px solid #dce3ec;

    border-radius: 8px;

    box-shadow:
        0 5px 18px rgba(0, 18, 41, 0.16);

    pointer-events: none;

    transform: translate(-50%, -100%);

    margin-top: -12px;

    white-space: nowrap;
}


/* Tooltip arrow */

#provinceMapTooltip::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -7px;

    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;

    border-top: 7px solid #ffffff;
}


/* Tooltip arrow border */

#provinceMapTooltip::before {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 8px solid transparent;
    border-right: 8px solid transparent;

    border-top: 8px solid #dce3ec;

    z-index: -1;
}


/* =========================================================
   TOOLTIP CONTENT
========================================================= */

.province-tooltip-name {
    color: #001229;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 6px;
}

.province-tooltip-count {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.4;
}

.province-tooltip-count i {
    color: #FBB801;

    font-size: 15px;
}

.province-tooltip-count strong {
    color: #001229;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   MAP ERROR
========================================================= */

.map-error {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 8px;

    background: #ffffff;

    color: #001229;

    font-size: 15px;
}

.map-error i {
    font-size: 32px;

    color: #FBB801;
}


/* =========================================================
   REMOVE OLD LEAFLET TOOLTIP
========================================================= */

/*
   เราใช้ #provinceMapTooltip แทน
   ดังนั้นไม่ต้องใช้ Leaflet tooltip
*/

#thailandProvinceMap .province-map-tooltip {
    display: none !important;
}


/* =========================================================
   MAP CARD
========================================================= */

.province-map-card {
    background: #ffffff;
}

.province-map-card .card-heading {
    background: #ffffff;
}

/* =========================================================
   PROVINCE CLICK POPUP
========================================================= */

.province-click-popup-wrapper .leaflet-popup-content-wrapper {
    padding: 0;

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 18, 41, 0.18);
}

.province-click-popup-wrapper .leaflet-popup-content {
    margin: 0;

    min-width: 190px;
}

.province-click-popup-wrapper .leaflet-popup-tip {
    background: #ffffff;
}


/* =========================================================
   POPUP CONTENT
========================================================= */

.province-click-popup {
    padding: 14px 16px;
}

.province-click-title {
    margin-bottom: 8px;

    color: #001229;

    font-size: 16px;

    font-weight: 700;
}

.province-click-count {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #64748b;

    font-size: 13px;
}

.province-click-count i {
    color: #FBB801;

    font-size: 17px;
}

.province-click-count strong {
    color: #001229;

    font-size: 16px;

    font-weight: 700;
}

.province-click-status {
    margin-top: 10px;

    padding-top: 8px;

    border-top: 1px solid #edf1f5;

    color: #001229;

    font-size: 12px;

    font-weight: 600;
}

.province-click-status.empty {
    color: #94a3b8;
}

/* =========================================================
   PROVINCE COUNT MARKER
========================================================= */

.province-count-marker {
    background: transparent !important;
    border: none !important;
}

.province-count-marker span {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #001229;
    color: #ffffff;

    border: 2px solid #ffffff;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 3px 8px rgba(0, 18, 41, 0.25);
}

.province-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #FBB801;
    border-radius: 6px;

    color: #001229;
    font-size: 20px;
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;

    transition: all .2s ease;
}

.province-reset:hover {
    background: #001229;
    border-color: #001229;
    color: #FBB801;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

    .branch-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 1000px) {

    .representative-header-inner {

        align-items: flex-start;

        flex-direction: column;
    }


    .header-stat-list {

        width: 100%;
    }


    .header-stat {

        flex: 1;
    }


    .province-agent-row {

        grid-template-columns:
            80px 1fr 1fr 110px;
    }


    .branch-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 768px) {

    .representative-container {

        padding: 0 12px 30px;
    }


    .header-brand-icon {

        width: 60px;
        height: 60px;

        font-size: 27px;
    }


    .header-stat-list {

        flex-direction: column;
    }


    .representative-tabs {

        overflow-x: auto;
    }


    .province-list-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .province-tools {

        width: 100%;
    }


    .representative-search {

        flex: 1;

        width: auto;
    }


    .province-agent-row {

        grid-template-columns:
            70px 1fr;

        padding: 15px;
    }


    .representative-avatar {

        width: 65px;
        height: 65px;
    }


    .representative-contact {

        grid-column: 1 / 3;

        padding-left: 5px;
    }


    .representative-detail {

        grid-column: 1 / 3;

        width: 100%;
    }


    .branch-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .branch-search {

        width: 100%;
    }


    .branch-grid {

        grid-template-columns: 1fr;
    }

    /* --------------- map -------------- */

    .map-zoom {
        width: 34px;
        height: 34px;
    }

    #provinceMapTooltip {
        min-width: 145px;
        padding: 10px 12px;
    }

    .province-tooltip-name {
        font-size: 13px;
    }

    .province-tooltip-count {
        font-size: 11px;
    }

}


@media (max-width: 500px) {

    .header-brand {

        align-items: flex-start;
    }

    .map-area {

        height: 500px;
    }


    .map-summary {

        grid-template-columns: 1fr;
    }


    .province-tools {

        flex-direction: column;
    }


    .representative-search,
    .representative-sort {

        width: 100%;
    }

}