body {
    margin: 0;
    padding: 0;
}

.grafika-obal .box-container .top-info-container {
    margin-bottom: var(--spacing-l);
    padding-bottom: var(--spacing-l);
    padding-right: 40px;
    border-bottom: 1px solid var(--brand-200);
}

.grafika-obal .box-container .usek-nazev {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-s);
    color: var(--brand-600);
}

.grafika-obal .box-container .usek-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-xl);
}

.grafika-obal .box-container .usek-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
}

.grafika-obal .box-container .usek-info-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-400);
}

.grafika-obal .box-container .usek-info-value {
    font-size: 1rem;
    font-weight: 400;
    color: var(--brand-600);
}

.grafika-obal .box-container .mapa-podklad-obr {
    position: relative;
    margin-bottom: var(--spacing-m);
}
.grafika-obal .box-container .mapa-img {
    position: relative;
    width: 100%;
}

.grafika-obal .box-container .xtrig {
    position: absolute;
    border-radius: 50px;
    background: var(--brand-green-600);
    opacity: 1;
    display: block;
    cursor: pointer;
    z-index: 1;
    width: 4.5%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.grafika-obal .box-container .xtrig::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52%;
    height: 52%;
    background-image: url('../infographics-lib/assets/plus-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.grafika-obal .box-container .xtrig-1 { top: 61.6%; left: 80.9%;}
.grafika-obal .box-container .xtrig-2 { top: 36.8%; left: 24%;}
.grafika-obal .box-container .xtrig-3 { top: 38.5%; left: 17.4%;}
.grafika-obal .box-container .xtrig-4 { top: 27.3%; left: 46%;}
.grafika-obal .box-container .xtrig-5 { top: 45.5%; left: 54.8%;}
.grafika-obal .box-container .xtrig-6 { top: 55%; left: 69.2%;}
.grafika-obal .box-container .xtrig-7 { top: 39.9%; left: 64.2%;}
.grafika-obal .box-container .xtrig-8 { top: 63%; left: 73.8%;}

.grafika-obal .box-container .xtrig:hover { background: #009FDA;}
.grafika-obal .box-container .xtrig.selected { background: #009FDA;}

.grafika-obal .box-container .mapa-detail {
    position: relative;
    margin-top: var(--spacing-m);
    margin-bottom: var(--spacing-m);
    display: none;
}

.grafika-obal .box-container .mapa-detail.is-visible { display: block;}

.grafika-obal .box-container .mapa-detail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xs);
}

.grafika-obal .mapa-podklad-obr .prevBtn {
    left: -10px;
  }
.grafika-obal .mapa-podklad-obr .nextBtn {
    right: -10px;
}