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-red-300);
    opacity: 1;
    display: block;
    cursor: pointer;
    z-index: 1;
    width: 4.5%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* opacity: 0.6; */
}

.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: 84.1%; left: 37%; background: var(--brand-green-300);}
.grafika-obal .box-container .xtrig-2 { top: 38.3%; left: 19.9%;}
.grafika-obal .box-container .xtrig-3 { top: 45.5%; left: 55%; background: var(--brand-green-300);}
.grafika-obal .box-container .xtrig-4 { top: 29.4%; left: 48.2%; background: var(--brand-green-300);}
.grafika-obal .box-container .xtrig-5 { top: 63%; left: 81.6%; background: var(--brand-green-300);}
.grafika-obal .box-container .xtrig-6 { top: 87.8%; left: 29.6%; background: var(--brand-green-300);}
.grafika-obal .box-container .xtrig-7 { top: 36.4%; left: 9%;}
.grafika-obal .box-container .xtrig-8 { top: 39.5%; left: 14.2%;}
.grafika-obal .box-container .xtrig-9 { top: 28%; left: 28.9%;}
.grafika-obal .box-container .xtrig-10 { top: 17.6%; left: 57.6%;}
.grafika-obal .box-container .xtrig-11 { top: 40%; left: 63.8%;}
.grafika-obal .box-container .xtrig-12 { top: 41.9%; left: 70%;}
.grafika-obal .box-container .xtrig-13 { top: 17.2%; left: 49.9%;}
.grafika-obal .box-container .xtrig-14 { top: 58%; left: 88.4%;}
.grafika-obal .box-container .xtrig-15 { top: 71.8%; left: 73.3%;}


.grafika-obal .box-container .xtrig:hover { background: var(--brand-red-600);}
.grafika-obal .box-container .xtrig.selected { background: var(--brand-red-600);}

.grafika-obal .box-container .xtrig-1:hover,
.grafika-obal .box-container .xtrig-1.selected,
.grafika-obal .box-container .xtrig-3:hover,
.grafika-obal .box-container .xtrig-3.selected,
.grafika-obal .box-container .xtrig-4:hover,
.grafika-obal .box-container .xtrig-4.selected,
.grafika-obal .box-container .xtrig-5:hover,
.grafika-obal .box-container .xtrig-5.selected,
.grafika-obal .box-container .xtrig-6:hover,
.grafika-obal .box-container .xtrig-6.selected { background: var(--brand-green-600);}


.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;
}