:root {
  --brand-0: #000000;
  --brand-50: #ffffff;
  --brand-100: #e6e7e8;
  --brand-200: #b4b9bb;
  --brand-300: #848c90;
  --brand-400: #525e64;
  --brand-500: #202e35;
  --brand-600: #07171f;

  --brand-blue-100: #e9f0f8;
  --brand-blue-200: #bdd2ed;
  --brand-blue-300: #92b4e1;
  --brand-blue-400: #6796d4;
  --brand-blue-500: #4078c8;
  --brand-blue-600: #1b69bf;

  --brand-red-100: #f9e7ea;
  --brand-red-200: #eeb9c0;
  --brand-red-300: #e68b98;
  --brand-red-400: #de5c6d;
  --brand-red-500: #d52a41;
  --brand-red-600: #d10f2b;

  --brand-orange-100: #fdf2ed;
  --brand-orange-200: #fad9c8;
  --brand-orange-300: #f8c0a5;
  --brand-orange-400: #f5a780;
  --brand-orange-500: #f38d59;
  --brand-orange-600: #f28145;

  --brand-green-100: #edf6f6;
  --brand-green-200: #cbe5e4;
  --brand-green-300: #aad5d3;
  --brand-green-400: #88c3c1;
  --brand-green-500: #66b1af;
  --brand-green-600: #57a9a6;

  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 100px;

  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 24px;
  --spacing-xl: 48px;

  --transition-015: all 0.15s ease-in-out;
  --transition-03: all 0.3s ease-in-out;

  --font-barlow: 'Barlow';
  --font-lora: 'Lora';
}
.noselect {
  -webkit-touch-callout: none;
  -user-select: none;
}
.grafika-obal {
  color: var(--brand-600);
  box-sizing: border-box;
  font-family: var(--font-barlow);
}
.clearfix:after, .clearfix:before {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
/*vysledkova grafika*/
.grafika-obal.neaktivni::before {
  content: "načítám data";
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  z-index: 10;
  font-size: 1.125rem;
}
.grafika-obal.neaktivni::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--brand-50);
  top: 0;
  left: 0;
  opacity: 0.5;
}


/* Souvisejici */
.grafika-obal .souvisejici-obal {
margin-top: var(--spacing-xl);
}
.grafika-obal .souvisejici-obal h4 {
text-align: center;
font-size: 1.25rem;
font-family: var(--font-barlow);
margin: 0;
margin-bottom: var(--spacing-s);
}
.grafika-obal .souvisejici-clanky .radek-obal p a em {
font-family: var(--font-barlow);
font-weight: bold;
}
/* Souvisejici */


.grafika-obal button {
width: auto;
overflow: visible;
cursor: pointer;
}

.grafika-obal .box-container {
  position: relative;
  font-family: var(--font-barlow);
  width: 100%;
  height: auto;
  max-width: 576px;
  background: var(--brand-blue-100);
  padding: var(--spacing-l);
  border-radius: var(--radius-l);
  box-sizing: border-box;
  margin: 0 auto;
  margin-bottom: var(--spacing-s);
  border: 1px solid var(--brand-blue-200);
  box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 4px 0px inset;
}
.grafika-obal .box-container .zdroj-data {
margin: 0;
padding: 0;
font-family: var(--font-barlow);
font-size: 0.875rem;
color: var(--brand-300);
margin-top: var(--spacing-m);
text-align: left;
}

@media (max-width: 1024px) {
  .grafika-obal .box-container {
    max-width: none;
    padding: 20px;
  }
}
@media (max-width: 480px) {
  .grafika-obal .box-container {
      width: 94%;
  }
}


/*ucast a secteno*/
.grafika-obal .ucast-secteno {
  display: flex;
  justify-content: center;
  gap: var(--spacing-l);
}

.grafika-obal .ucast-secteno .progress {
  position: relative;
}
.grafika-obal .ucast-secteno .progress svg {
  width: 100%;
  max-width: 200px;
}
.grafika-obal .ucast-secteno .progres-track {
  stroke: var(--brand-50);
  stroke-width: 12;
  fill: none;
  stroke-linecap: round;
}
.grafika-obal .ucast-secteno .progres-bar {
  stroke: var(--brand-blue-600);
  stroke: url(#gradient);
  stroke-width: 12;
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}
.grafika-obal .ucast-secteno .progress-info {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.grafika-obal .ucast-secteno .progress-nazev {
  text-align: center;
  font-size: 0.875rem;
  color: var(--brand-400);
  margin-bottom: var(--spacing-xs);
  line-height: 1;
}
.grafika-obal .ucast-secteno .values {
  font-size: 2rem;
  font-weight: 600;
  color: var(--brand-blue-600);
  text-align: center;
  line-height: 1;
}
.grafika-obal .ucast-secteno .values span {
font-size: 0.875rem;
font-weight: bold;
}

/* Mapa container */
.grafika-obal .select-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: var(--spacing-l);
gap: var(--spacing-s);
flex-wrap: wrap;
}

.grafika-obal .select-wrapper .select-region {
position: relative;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
/* width: calc(50% - var(--spacing-xs)); */
width: 100%;
background: var(--brand-50);
border: 1px solid var(--brand-100);
border-radius: var(--radius-m);
padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing-m);
font-size: 1rem;
color: var(--brand-400);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z'/></svg>");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.25rem;
transition: var(--transition-015);
}
.grafika-obal .select-wrapper .select-region:hover {
border: 1px solid var(--brand-blue-300);
}
.grafika-obal .select-wrapper .select-region:focus {
outline: none;
border: 1px solid var(--brand-blue-300);
}
.grafika-obal .map-svg-container,
.grafika-obal .snemovna-svg-container {
width: 100%;
display: flex;
justify-content: center;
margin: 0 auto;
}
.grafika-obal .map-svg-container { max-width: 400px;}
.grafika-obal .map-svg-container svg,
.grafika-obal .snemovna-svg-container svg {
width: 100%;
box-sizing: border-box;
height: auto;
max-width: 576px;
}
.grafika-obal .st0.active {
transition: var(--transition-015);
fill: var(--brand-100);
cursor: pointer;
stroke: var(--brand-50);
opacity: 1;
}
.grafika-obal .st0.active:hover {
opacity: 0.75;
}
.grafika-obal .map-svg-container svg.has-selected .st0.active { opacity: 0.35; }
.grafika-obal .map-svg-container svg.has-selected .st0.active.selected { opacity: 1; }

/* Sněmovna legend under SVG */
.grafika-obal .snemovna-slozeni .snemovna-parties {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-m) var(--spacing-l);
flex-wrap: wrap;
margin-top: calc(var(--spacing-l) - 4px);
}
.grafika-obal .snemovna-slozeni .snemovna-parties .party-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-s);
}
.grafika-obal .snemovna-slozeni .snemovna-parties .party-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-300);
}
.grafika-obal .snemovna-slozeni .snemovna-parties .party-name {
font-size: 1rem;
color: var(--brand-600);
}

.grafika-obal .region-name { display: none;}
.grafika-obal .box-container h4 {
font-family: var(--font-barlow);
font-weight: bold;
color: var(--brand-blue-600);
font-size: 1.25rem;
line-height: 1.3;
margin: 0;
margin-bottom: var(--spacing-xs);
}
.grafika-obal .grafy a.bx {
text-decoration: none;
cursor: default;
}


.grafika-obal .grafy a.bx.hidden { display: none;}

.grafika-obal .grafy .bx-container {
  position: relative;
  display: flex;
  align-items: center;
}

.grafika-obal .grafy .bx-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.grafika-obal .grafy .bx-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Threshold line styles */
.grafika-obal .grafy .threshold-line-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 227px;
  padding-left: 14px;
  padding-right: 14px;
}

.grafika-obal .grafy .threshold-line {
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    var(--brand-blue-300) 0px,
    var(--brand-blue-300) 4px,
    transparent 4px,
    transparent 8px
  );
  position: relative;
  z-index: 2;
}

.grafika-obal .grafy .threshold-label {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--brand-blue-300);
  text-align: center;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  z-index: 3;
  cursor: default;
}

.grafika-obal .grafy .bx-nav {
  background: var(--brand-blue-400);
  color: var(--brand-50);
  border: none;
  border-radius: 80px;
  padding: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.grafika-obal .grafy .bx-nav:hover:not(:disabled) {
  background: var(--brand-blue-600);
}
.grafika-obal .grafy .bx-nav:disabled {
  opacity: 0.5;
  cursor: default;
}
.grafika-obal .grafy .bx-nav svg {
  width: 26px;
  height: 26px;
  position: absolute;
}

.grafika-obal .grafy .bx-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}
.grafika-obal .grafy .bx-nav-left {
  order: 1;
  left: 0;
}

.grafika-obal .grafy .bx-wrapper {
  order: 2;
}

.grafika-obal .grafy .bx-nav-right {
  order: 3;
  right: 0;
}

.grafika-obal .grafy .name-percentage-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-s);
}
.grafika-obal .grafy a.bx .jmeno {
color: var(--brand-600);
font-size: 1rem;
text-align: center;
}
.grafika-obal .grafy .graf {
position: relative;
width: 100%;
margin-bottom: var(--spacing-s);
}
.grafika-obal .grafy .graf::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--brand-blue-200);
}
.grafika-obal .sl-obal {
position: relative;
width: 100%;
min-width: 86px;
display: flex;
flex-direction: column;
align-items: center;
transition: var(--transition-015);
}
.grafika-obal .sl-pozadi {
display: block;
position: relative;
width: var(--spacing-l);
height: 160px;
background: var(--brand-50);
border-radius: 4px 4px 0 0;
overflow: hidden;
}
.grafika-obal .sl {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
border-radius: 4px 4px 0 0;
}
.grafika-obal .name-percentage-wrapper .hodnota {
position: relative;
color: var(--brand-600);
font-size: 1rem;
text-align: center;
font-weight: bold;
line-height: 1;
}
.grafika-obal .name-percentage-wrapper .hodnota span {
  font-size: 0.75rem;
  font-weight: bold;
  }
.grafika-obal .hlasy {
width: 100%;
text-align: center;
font-size: 0.75rem;
color: var(--brand-300);
line-height: 1;
transition: var(--transition-015);
}
.grafika-obal .grafy a.bx:hover .hlasy,
.grafika-obal .grafy a.bx:hover .hodnota,
.grafika-obal .grafy a.bx:hover .jmeno { color: var(--brand-blue-600);}

/* Navigation buttons */
.grafika-obal .nav-container {
  display: flex;
  justify-content: center;
  gap: var(--spacing-m);
  margin: var(--spacing-m) 0;
}

.grafika-obal .nav-btn {
  background: var(--brand-blue-600);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-015);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.grafika-obal .nav-btn:hover {
  background: var(--brand-blue-700);
  transform: scale(1.05);
}

.grafika-obal .nav-btn:active {
  transform: scale(0.95);
}

.grafika-obal .nav-btn:disabled {
  background: var(--brand-300);
  cursor: not-allowed;
  transform: none;
}


/*zvoleni poslanci*/
.grafika-obal .mandates .strana {
border-bottom: 1px solid var(--brand-50);
padding-block: var(--spacing-m);
}
.grafika-obal .mandates .strana:first-of-type {
padding-top: 0;
}
.grafika-obal .mandates .strana:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.grafika-obal .strana p.radek-strana {
position: relative;
width: 100%;
margin: 0;
display: flex;
align-items: start;
justify-content: start;
font-family: var(--font-barlow);
box-sizing: border-box;
}
.grafika-obal .radek-strana .nazev,
.grafika-obal .radek-strana .pocet {
position: relative;
display: block;
box-sizing: border-box;
font-size: 1rem;
line-height: 1;
}
.grafika-obal .radek-strana .nazev {
text-align: left;
left: 0;
transition: var(--transition-015);
padding-left: var(--spacing-l);
width: 55%;
}
.grafika-obal .strana p.radek-strana:hover .nazev {
left: var(--spacing-xs);
}
.grafika-obal .radek-strana .pocet {
font-weight: bold;
text-align: center;
padding: 0 var(--spacing-m);
width: 20%;
}
.grafika-obal .radek-strana .kruh {
display: block;
width: 14px;
height: 14px;
position: absolute;
left: 0;
top: 2px;
border-radius: var(--radius-l);
}
.grafika-obal button, .grafika-obal input[type=button] {
width: auto;
overflow: visible;
}
.grafika-obal .zobraz-vsechny {
position: relative;
color: var(--brand-50);
background: var(--brand-blue-500);
display: block;
font-size: 0.75rem;
text-transform: uppercase;
border: none;
border-image: initial;
margin: var(--spacing-m) auto 0;
transition: var(--transition-015);
line-height: 1;
border-radius: var(--radius-xl);
padding: 14px 28px 12px 18px;
color: var(--brand-50);
}
.grafika-obal .zobraz-vsechny:hover {
background: var(--brand-blue-600);
}
.grafika-obal .zobraz-vsechny span { position: relative;}
.grafika-obal .zobraz-vsechny span::after {
content: "";
display: block;
height: 14px;
width: 14px;
position: absolute;
right: -16px;
top: 1px;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2232%22%20viewBox%3D%220%200%2011%2032%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%221.5%2010%205.5%206%209.5%2010%22%2F%3E%3Cpolyline%20points%3D%221.5%2022%205.5%2026%209.5%2022%22%2F%3E%3C%2Fsvg%3E") center bottom no-repeat;
}


.grafika-obal .radek-strana button {
position: relative;
font-size: 0.75rem;
text-transform: uppercase;
white-space: nowrap;
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
background: none;
text-align: right;
color: var(--brand-blue-600);
line-height: 1;
width: 25%;
}
.grafika-obal .radek-strana button:hover {
text-decoration: underline;
}
.grafika-obal .hidden {
display: none !important;
}

.grafika-obal .map-domestic.hidden,
.grafika-obal .map-abroad.hidden {
display: none !important;
}
.grafika-obal .radek-strana button span {
display: flex;
justify-content: end;
align-items: center;
gap: var(--spacing-s);
}
.grafika-obal .radek-strana button span::before {
content: "";
display: block;
height: 16px;
width: 16px;
position: relative;
right: 0;
top: 0;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTggMTU4Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMWM2OWJmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPGc+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc5LDBDMzUuMzcsMCwwLDM1LjM3LDAsNzlzMzUuMzcsNzksNzksNzksNzktMzUuMzcsNzktNzlTMTIyLjYzLDAsNzksMFpNNzksMTQzYy0zNS4zNSwwLTY0LTI4LjY1LTY0LTY0UzQzLjY1LDE1LDc5LDE1czY0LDI4LjY1LDY0LDY0LTI4LjY1LDY0LTY0LDY0WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDcsNzEuNWgtMjAuNXYtMjAuNWMwLTQuMTQtMy4zNi03LjUtNy41LTcuNXMtNy41LDMuMzYtNy41LDcuNXYyMC41aC0yMC41Yy00LjE0LDAtNy41LDMuMzYtNy41LDcuNXMzLjM2LDcuNSw3LjUsNy41aDIwLjV2MjAuNWMwLDQuMTQsMy4zNiw3LjUsNy41LDcuNXM3LjUtMy4zNiw3LjUtNy41di0yMC41aDIwLjVjNC4xNCwwLDcuNS0zLjM2LDcuNS03LjVzLTMuMzYtNy41LTcuNS03LjVaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");
background-repeat: no-repeat;
background-position: center;
}
.grafika-obal .radek-strana button.detail span::before { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTggMTU4Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMWM2OWJmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPGc+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc5LDBDMzUuMzcsMCwwLDM1LjM3LDAsNzlzMzUuMzcsNzksNzksNzksNzktMzUuMzcsNzktNzlTMTIyLjYzLDAsNzksMFpNNzksMTQzYy0zNS4zNSwwLTY0LTI4LjY1LTY0LTY0UzQzLjY1LDE1LDc5LDE1czY0LDI4LjY1LDY0LDY0LTI4LjY1LDY0LTY0LDY0WiIvPgogICAgICA8cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjcxLjUiIHk9IjQzLjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSI3MSIgcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU4IDApIHJvdGF0ZSg5MCkiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");}
.grafika-obal .radek-strana button span::after{ content:'zobraz osoby';}
.grafika-obal .radek-strana button.detail span::after{ content:'skrýt osoby';}
.grafika-obal .grafy .strana p.zvoleni-poslanci {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
margin: 0;
margin-block: var(--spacing-m);
}
.grafika-obal .zvoleni-poslanci span.zvoleny {
font-size: 0.875rem;
line-height: 1;
display: block;
box-sizing: border-box;
padding: var(--spacing-s) var(--spacing-m);
margin-left: var(--spacing-l);
font-family: var(--font-barlow);
border-radius: var(--radius-m);
}
.grafika-obal .zvoleni-poslanci span.zvoleny:nth-of-type(odd) {
background: var(--brand-50);
}
.grafika-obal .zvoleni-poslanci span.zvoleny em {
font-style: normal;
}
.grafika-obal .regions-name {
font-size: 1.125rem;
color: var(--brand-blue-400);
margin-bottom: var(--spacing-l);
line-height: 1;
}



/* Varianty koalic */
.grafika-obal .box-container .checkbox-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-m) var(--spacing-l);
flex-wrap: wrap;
margin-bottom: var(--spacing-l);
}
.grafika-obal .box-container .checkbox-wrapper .checkbox-button {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--spacing-s);
padding: 0;
border: none;
background: none;
cursor: pointer;
left: 0;
transition: var(--transition-015);
}
.grafika-obal .box-container .checkbox-wrapper .checkbox-button:hover { left: var(--spacing-xs);}
.grafika-obal .box-container .checkbox-wrapper .checkbox-button .svg-icon {
width: 28px;
height: 28px;
border-radius: 50px;
background-color: var(--brand-50);
}
.grafika-obal .box-container .checkbox-wrapper .checkbox-button .checkbox-name {
font-size: 1rem;
color: var(--brand-300);
font-family: var(--font-barlow);
}
.grafika-obal .box-container .checkbox-wrapper .checkbox-button.active .checkbox-name {
color: var(--brand-600);
}
.grafika-obal .box-container .bar-container {
position: relative;
background: var(--brand-50);
border: 1px solid var(--brand-100);
border-radius: var(--radius-m);
height: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.grafika-obal .box-container .bar-container .majority-line {
position: absolute;
left: 50%;
top: -12px;
transform: translateX(-50%);
height: calc(100% + var(--spacing-l));
width: 2px;
background: var(--brand-blue-600);
border-left: 2px solid var(--brand-blue-100);
border-right: 2px solid var(--brand-blue-100);
z-index: 2;
}
.grafika-obal .box-container .bar-container .majority-line::after {
content: "100 mandátů";
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
padding: 0 var(--spacing-xs);
font-size: 0.875rem;
color: var(--brand-50);
background: var(--brand-blue-600);
padding: var(--spacing-xs) var(--spacing-s);
border-radius: var(--radius-xl);
white-space: nowrap;
line-height: 1;
z-index: 3;
}
.grafika-obal .box-container .bar-container .bar {
position: relative;
border-radius: var(--radius-m);
overflow: hidden;
height: 100%;
display: flex;
}
.grafika-obal .box-container .mandaty {
font-size: 1rem;
font-weight: bold;
display: flex;
justify-content: start;
align-items: center;
/* gap: var(--spacing-xs); */
margin-bottom: var(--spacing-s);
}
.grafika-obal .box-container .mandaty svg {position: relative; top: 1px;}
.grafika-obal .box-container .coalition {
font-size: 0.875rem;
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-s);
}
.grafika-obal .box-container .coalition .coalition-name {
color: var(--brand-600);
}

@media (max-width: 480px) {
.grafika-obal .box-container .checkbox-wrapper { gap: var(--spacing-s) var(--spacing-m);}
.grafika-obal .box-container .checkbox-wrapper .checkbox-button .checkbox-name { font-size: 0.875rem;}
}
/* Varianty koalic */



p.datum-aktualizace.comment {
border-bottom: 1px dashed #a2abaf;
position: relative;
padding-right: 100px;
min-height: 25px;
}
p.datum-aktualizace.comment a {
position: absolute;
right: 0;
top: 0;
padding-left: 22px;
background: url(https://graphics.stdout.cz/common1/reload-orange._0_.svg) left center / 17px 17px no-repeat;    
}


.grafika-obal.neaktivni .seznam-obvodu-wr {
display: none;
}
.grafika-obal .seznam-obvodu {
column-count: 2;
column-gap: var(--spacing-s);
margin-top: calc(var(--spacing-l) - 4px);
}
.grafika-obal .seznam-obvodu a {
position: relative;
width: 100%;
display: block;
padding-block: 0 var(--spacing-s);
text-decoration: underline;
color: var(--brand-600);
left: 0;
transition: var(--transition-015);
}
.grafika-obal .seznam-obvodu a:hover {
left: var(--spacing-xs);
}

.grafika-obal .zpet-na-uvod-d {
color: white;
display: block;
font-size: 17px;
line-height: 3;
text-transform: uppercase;
background: rgb(27 105 191);
border-width: 1px;
border-style: solid;
border-color: rgb(217, 217, 217);
border-image: initial;
border-radius: 2px;
margin: 0 auto 2rem;
padding: 0px 1.2rem;
}

.grafika-obal .box-container .flourish-embed {
margin-top: calc(var(--spacing-l) - 4px);
}

.grafika-obal .box-container .article-wr {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-m);
  text-decoration: none;
  color: var(--brand-600);
}
.grafika-obal .box-container .article-wr:hover {
  text-decoration: underline;
}
.grafika-obal .box-container .article-wr img {
  width: 30%;
  border-radius: var(--radius-s);
  overflow: hidden;
}
.grafika-obal .box-container .article-wr .article-sm-title {
  width: 70%;
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--brand-600);
}


@media screen and (max-width: 600px) {
.grafika-obal .radek-strana .nazev { width: 45%;}
.grafika-obal .radek-strana .pocet { width: 16%;}
.grafika-obal .radek-strana button { width: 39%;}
.grafika-obal .radek-strana button span::before { height: 14px; width: 14px;}
.grafika-obal .radek-strana .pocet,
.grafika-obal .snemovna-slozeni .snemovna-parties .party-name { font-size: 0.875rem;}
.grafika-obal .select-wrapper {flex-direction: column;}
.grafika-obal .select-wrapper .select-region { width: 100%;}

.grafika-obal .sl-obal { min-width: 84px;}
.grafika-obal .sl-pozadi { height: 140px;}
.grafika-obal .ucast-secteno .values { font-size: 1.5rem;}
.grafika-obal .grafy .threshold-line-container { height: 207px;}
.grafika-obal .box-container .article-wr .article-sm-title { font-size: 0.875rem;}

}

@media screen and (max-width: 480px) {
.grafika-obal .st0.active:hover { opacity: 1;}
.grafika-obal .grafy a.bx:hover .hodnota,
.grafika-obal .grafy a.bx:hover .jmeno,
.grafika-obal .grafy a.bx:hover .hlasy { color: var(--brand-600);}
.grafika-obal .radek-strana button { text-decoration: underline;}

.grafika-obal .seznam-obvodu a:hover,
.grafika-obal .box-container .checkbox-wrapper .checkbox-button:hover,
.grafika-obal .strana p.radek-strana:hover .nazev { left: 0;}

.grafika-obal .name-percentage-wrapper .hodnota,
.grafika-obal .grafy a.bx .jmeno { font-size: 0.875rem;}

}