@charset "UTF-8";
/*** Colors ***/
/*** Fonts ***/
:root { /*** default varables ***/
  /*** Colors ***/
  --clr-main:	#F15B24;
  --clr-second:	#BC202F;
  --clr-black:	#080808;
  --clr-white:	#FFF;
  --clr-IB-gray:	#EAEAEA;
  --clr-IB-color:	#F15B24;
  --clr-img-caption:	#F6F6F6;
  --clr-art-suptitle:	#F2F2F2;
  --clr-art-head:	#080808;
  --clr-art-subhead:	#080808;
  --clr-art-date:	#F2F2F2;
  --clr-art-author:	#080808;
  --clr-art-text:	#080808;
  --clr-art-share-icon:	#FFF;
  --clr-art-share-backg:	#F2F2F2;
  --clr-art-tag:	#666766;
  --clr-art-tag-backg:	#FFF;
  --clr-SectionColor:	#F15B24;
  --clr-mod-head:	#F2F2F2;
  --clr-mod-head-border:	#F2F2F2;
  --clr-card-suptitle:	#EAEAEA;
  --clr-card-head:	#080808;
  --clr-izbori:	#193D62;
  /*** section colors  ***/
  --clr-section-danas:	#D90000;
  --clr-section-sport:	#0059B2;
  --clr-section-hot:	#B74497;
  --clr-section-magazin:	#719427;
  --clr-section-webcafe:	#DBA418;
  --clr-section-zena:	#BF2175;
  --clr-section-specijal:	#F15B24;
  /*
  --clr-card-subhead: 	#EAEAEA;
  --clr-card-author: 		#080808;
  --clr-card-date: 		#080808;
  */
  --clr-IB-title:	#080808;
  --clr-IB-backg:	#FFF;
  --clr-IBquote-title:	#BC202F;
  --clr-IBquote-text:	#BC202F;
  --clr-foot:	#F2F2F2;
  --clr-foot-backg:	#EAEAEA;
  --clr-button-backg:	#F15B24;
  --clr-button:	#FFF;
  --clr-gal-name:	#F15B24;
  --clr-gal-desc:	#080808;
  --clr-gal-imgcap:	#080808;
  /*** Fonts ***/
  --font-main: proxima-nova, ArialToProximaNova, sans-serif;
  --font-second: proxima-nova-condensed, ArialToProximaNovaCond, sans-serif;
  --font-third:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-art-imginfo:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-art-suptitle:	proxima-nova-condensed, ArialToProximaNovaCond, sans-serif;
  --font-art-head:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-art-subhead:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-art-date:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-art-author:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-art-text:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-art-tag:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-card-suptitle:	proxima-nova-condensed, ArialToProximaNovaCond, sans-serif;
  --font-card-head:	proxima-nova, ArialToProximaNova, sans-serif;
  /* 
  --font-card-subhead: 	proxima-nova, ArialToProximaNova, sans-serif;
  --font-card-author: 	proxima-nova, ArialToProximaNova, sans-serif;
  --font-card-date: 		proxima-nova, ArialToProximaNova, sans-serif;
  */
  --font-IB-title:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-IBquote-title:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-IBquote-text:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-gal-name:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-gal-desc:	proxima-nova, ArialToProximaNova, sans-serif;
  --font-gal-imgcap:	proxima-nova, ArialToProximaNova, sans-serif;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
body {
  font-family: Arial, sans-serif;
  margin: 0;
}

svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */
.se-container {
  border: 1.5px solid rgba(91, 91, 91, 0.2);
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .se-container {
    border-radius: 10px;
  }
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */
.above-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid rgba(91, 91, 91, 0.2);
  box-sizing: border-box;
  position: absolute;
  z-index: 9;
  top: 0;
  width: 100%;
  background-color: transparent;
}
@media (max-width: 767.98px) {
  .above-container {
    padding: 5px 10px;
  }
}
@media (min-width: 768px) {
  .above-container {
    padding: 10px 20px;
  }
}
@media (max-width: 767.98px) {
  .above-container img {
    width: 180px;
  }
}

/* Result Info Section */
.result-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-info-title {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -3%;
  text-align: right;
  margin: 0;
}
@media (max-width: 767.98px) {
  .result-info-title {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .result-info-title {
    font-size: 20px;
  }
}

.result-data span,
.result-data p {
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -3%;
  text-align: right;
  margin: 0;
  color: #193D62;
}
@media (max-width: 767.98px) {
  .result-data span,
  .result-data p {
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .result-data span,
  .result-data p {
    font-size: 14px;
  }
}
.result-data span:first-child {
  margin-right: 10px;
}

/* ==========================================================================
   WIDGET CONTAINER
   ========================================================================== */
.widget-container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  /* State Management - No Active Region */
  /* State Management - Has Active Region */
}
@media (max-width: 767.98px) {
  .widget-container {
    flex-direction: column;
  }
}
.widget-container:not(:has(.region.active)) #data-display,
.widget-container:not(:has(.region.active)) #cities,
.widget-container:not(:has(.region.active)) #zoom-reset {
  display: none;
}
.widget-container:not(:has(.region.active)) #map-container {
  max-width: 635px;
}
.widget-container:has(.region.active) .label-container {
  display: none;
}

/* ==========================================================================
   MAP CONTAINER
   ========================================================================== */
#map-container {
  width: 100%;
  min-width: 50%;
  position: relative;
  /* Map Hover States - No Active Region */
}
@media (max-width: 767.98px) {
  #map-container {
    margin-top: 60px;
  }
}
@media (min-width: 768px) {
  #map-container {
    margin-top: 80px;
  }
}
#map-container .region > g:not(.city):not(.Zagreb-name):not(.active) {
  fill: darkgray;
}
#map-container .region > g:not(.city):not(.Zagreb-name):not(.active) .city-dot {
  display: none;
}
#map-container:not(:has(.region.active)):hover #map .region path {
  fill: #D2D2D2;
}
#map-container:not(:has(.region.active)) #map .region:hover path:not(.zagreb-dot) {
  fill: #E7C4AD !important;
}
#map-container:not(:has(.region.active)) #map .region:hover .city g path,
#map-container:not(:has(.region.active)) #map .region:hover .city path:not([class*=st]),
#map-container:not(:has(.region.active)) #map .region:hover .city .Zagreb-name path,
#map-container:not(:has(.region.active)) #map .region:hover .city .zagreb-dot {
  fill: #193D62 !important;
}

/* ==========================================================================
   MAP STYLES
   ========================================================================== */
#map {
  /* Map States - Has Active Region */
  /* Map States - No Active Region */
}
#map:has(.region.active) .region:not(.active) path {
  fill: #EFEFEF;
}
#map:has(.region.active) .region:not(.active):hover path {
  fill: #FFE7D5;
}
#map:has(.region.active) .region:not(.active) .city path:not(.st1),
#map:has(.region.active) .region:not(.active) #Velika_Gorica .st1:not(:first-child),
#map:has(.region.active) .region:not(.active) .st0,
#map:has(.region.active) .region:not(.active) .Zagreb-name {
  display: none;
}
#map:has(.region.active) #XXI_Grad_Zagreb:not(.active) .zagreb-dot {
  fill: #efefef !important;
}
#map:has(.region.active) .region.active .city path {
  fill: #E7C4AD;
}
#map:has(.region.active) .region.active .zagreb-dot {
  fill: #193D62 !important;
}
#map:has(.region.active) .region.active .city:hover path {
  fill: #FFE7D5;
}
#map:has(.region.active) .region.active g:not(.city):not(.active) path {
  fill: darkgray;
}
#map:has(.region.active) .region.active path {
  fill: #E7C4AD;
}
#map:not(:has(.region.active)) .region path:not(.zagreb-dot) {
  fill: #E7C4AD;
}
#map:not(:has(.region.active)) #XXI_Grad_Zagreb:hover .zagreb-dot {
  fill: #193D62 !important;
}

/* Region Base Styles */
.region {
  stroke-width: 1px;
  transition: fill 0.3s, transform 2.3s ease-in-out;
  cursor: pointer;
}

/* Zagreb Specific Styles */
.widget-container #map-container #map g#XXI_Grad_Zagreb path.zagreb-dot {
  fill: #193D62;
}

.city {
  z-index: 1000;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */
select {
  border: none;
  outline: none;
  scrollbar-width: none;
  background-color: transparent;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  color: #0084DD;
}
select option {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  color: #193D62;
}

/* Region Select - Responsive Display */
@media (min-width: 768px) {
  #region-select {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .label-container {
    display: none;
  }
}
/* ==========================================================================
   DATA DISPLAY PANEL
   ========================================================================== */
#data-display {
  background-color: transparent;
  right: 0;
  max-height: 590px;
  overflow: scroll;
  scrollbar-width: none;
  border-radius: 4px;
  z-index: 10;
}
@media (min-width: 768px) {
  #data-display {
    position: absolute;
    max-height: 77%;
    max-width: 50%;
    top: 140px;
    width: 590px;
    margin-right: 38px;
  }
}
@media (max-width: 767.98px) {
  #data-display {
    border: 1px solid #ccc;
    width: 100%;
    margin-top: -20px;
    padding: 15px;
    box-sizing: border-box;
  }
}
#data-display h3 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: -3%;
  margin: 0;
}

/* Data Display Upper Section */
.data-display-upper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data-display-upper select {
  border: none;
  outline: none;
  background-color: transparent;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  color: #0084DD;
  cursor: pointer;
  padding: 0.5rem 1rem;
}
.data-display-upper select option {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  color: #193D62;
}

/* ==========================================================================
   LISTING COMPONENTS
   ========================================================================== */
.lista,
.lista2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 3000px;
  transition: max-height 0.3s ease-in-out;
}

.listing {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-items: center;
  position: relative;
  border: 1px solid rgba(25, 61, 98, 0.2);
  background-color: #fff;
  height: 60px;
  /* Top 2 Items - Larger Font */
  /* Items 3+ - Smaller Font */
}
@media (min-width: 768px) {
  .listing:nth-child(-n+2) .listing-ime,
  .listing:nth-child(-n+2) .listing-posto {
    font-size: 28px;
  }
}
@media (max-width: 767.98px) {
  .listing:nth-child(-n+2) .listing-ime,
  .listing:nth-child(-n+2) .listing-posto {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .listing:nth-child(n+3) .listing-ime,
  .listing:nth-child(n+3) .listing-posto {
    font-size: 20px;
  }
}
@media (max-width: 767.98px) {
  .listing:nth-child(n+3) .listing-ime,
  .listing:nth-child(n+3) .listing-posto {
    font-size: 14px;
  }
}

/* Listing Background */
.listing-background {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, rgba(253, 239, 229, 0.5) 0%, rgba(207, 137, 91, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
  max-width: 100%;
}

/* Listing Left Section */
.listing-left {
  z-index: 1;
}
.listing-left p {
  margin: 0 0 0 10px;
}

.listing-stranke {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  max-height: 18px;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  color: rgba(25, 61, 98, 0.5);
  margin: 0 0 10px 10px;
}

.listing-ime {
  font-family: var(--font-main);
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -3%;
  color: rgb(25, 61, 98);
  margin: 10px 0 10px 10px;
}

/* Listing Right Section */
.listing-right {
  text-align: end;
  min-width: 25%;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 1;
}
.listing-right p {
  margin: 0 10px 0 0;
}

.listing-posto {
  font-family: var(--font-main);
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -3%;
  color: rgb(25, 61, 98);
  margin-top: 10px;
}

.broj-glasova {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  color: rgba(25, 61, 98, 0.5);
}

.broj-mandata {
  padding: 2px 6px;
  border-radius: 20px;
  background-color: #193D62;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: -3%;
  color: #FFFFFF;
  margin-bottom: 10px;
}

/* ==========================================================================
   COLLAPSIBLE LIST
   ========================================================================== */
#data-display:has(#collapse:checked) .lista2 {
  max-height: 0;
  overflow: hidden;
}
#data-display:has(#collapse:checked) img {
  transform: rotate(180deg);
}

.list-collapse {
  margin-top: 10px;
}
.list-collapse img {
  transition: transform 0.3s ease-in-out;
}
.list-collapse label {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  color: #0084DD;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-collapse input {
  display: none;
}

/* ==========================================================================
   CONTROLS & BUTTONS
   ========================================================================== */
#zoom-reset {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0084DD;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -3%;
  padding: unset;
  border: none;
  outline: none;
  background-color: transparent;
  position: absolute;
  z-index: 9;
  padding: 1rem;
}
@media (min-width: 768px) {
  #zoom-reset {
    top: 15%;
    right: 44.7%;
  }
}
@media (max-width: 767.98px) {
  #zoom-reset {
    top: 80px;
  }
}

.controls {
  margin-bottom: 15px;
}

button {
  padding: 8px 12px;
  margin-right: 10px;
  cursor: pointer;
}

/* ==========================================================================
   LABEL CONTAINER
   ========================================================================== */
.label-container {
  display: flex;
  flex-direction: row;
}
@media (max-width: 560px) {
  .label-container {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .label-container {
    margin-top: 80px;
  }
}
.label-container label {
  padding: 0.5rem 0.75rem;
}

.label-row {
  display: flex;
  flex-direction: column;
}
.label-row label {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: -3%;
  color: #193D62;
  cursor: pointer;
}

/* ==========================================================================
   DEBUG INFO
   ========================================================================== */
.debug-info {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  font-family: monospace;
}

/* ============= IZBORNA TRAKA =============== */
.container {
  border: 1.5px solid rgba(91, 91, 91, 0.2);
  border-radius: 10px;
}
.container .container-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid rgba(91, 91, 91, 0.2);
  box-sizing: border-box;
  z-index: 9;
  top: 0;
  width: 100%;
  background-color: transparent;
  padding: 10px;
}
.container .container-top .result-data {
  color: rgba(25, 61, 98, 0.5);
}
@media (max-width: 767.98px) {
  .container .container-top .result-data {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .container .container-top .result-data span {
    margin: 0;
  }
}
@media (min-width: 768px) {
  .container .container-top .result-data span {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 400;
    letter-spacing: -0.042rem;
  }
}
@media (max-width: 767.98px) {
  .container .container-top .result-data span {
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 400;
    letter-spacing: -0.036rem;
  }
}
@media (min-width: 768px) {
  .container .container-top img {
    width: 280px;
  }
}
@media (max-width: 767.98px) {
  .container .container-top img {
    width: 180px;
  }
}
.container .container-top .result-info-widget {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-right: 5.7%;
}
.container .container-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap: 20px;
  padding: 15px;
}
@media (min-width: 768px) {
  .container .container-bottom .header h1 {
    font-size: 2.4rem;
    line-height: 2.4rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 700;
    letter-spacing: -0.072rem;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom .header h1 {
    font-size: 1.6rem;
    line-height: 1.6rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 700;
    letter-spacing: -0.048rem;
  }
}
.container .container-bottom .tabs {
  display: flex;
  overflow: scroll;
  max-width: 100%;
  scrollbar-width: none;
}
.container .container-bottom .tabs .tab {
  margin: 0;
  border: 1px solid var(--clr-izbori);
}
.container .container-bottom .tabs .tab:not(.active) {
  color: var(--clr-izbori);
  background-color: var(--clr-white);
}
.container .container-bottom .tabs .tab.active {
  color: var(--clr-white);
  background-color: var(--clr-izbori);
}
.container .container-bottom .tabs .tab:first-child {
  border-radius: 300px 0 0 300px;
}
.container .container-bottom .tabs .tab:last-child {
  border-radius: 0 300px 300px 0;
}
.container .container-bottom .tabs .tab:not(:first-child), .container .container-bottom .tabs .tab:not(:last-child) {
  border-width: 1px 0.5px 1px 0.5px;
}
@media (min-width: 768px) {
  .container .container-bottom .tabs .tab {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.072rem;
    padding: 0.8rem 2.4rem;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom .tabs .tab {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.042rem;
    padding: 0 0.8rem;
  }
}
.container .container-bottom #results {
  width: 95%;
}
.container .container-bottom #results .lista {
  gap: 5px;
}
.container .container-bottom #results .lista .listing-container {
  display: flex;
  gap: 5px;
}
@media (min-width: 768px) {
  .container .container-bottom #results .lista .listing-container img {
    width: 160px;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom #results .lista .listing-container img {
    width: 20%;
  }
}
.container .container-bottom #results .lista .listing-container .listing {
  height: unset;
  width: 100%;
}
.container .container-bottom #results .lista .listing-container .listing .listing-right {
  gap: 0;
}
@media (min-width: 768px) {
  .container .container-bottom #results .lista .listing-container:first-child {
    height: 65px;
  }
  .container .container-bottom #results .lista .listing-container:first-child img {
    width: 65px;
    height: 65px;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom #results .lista .listing-container:first-child {
    height: 65px;
  }
  .container .container-bottom #results .lista .listing-container:first-child img {
    width: 65px;
    height: 65px;
  }
}
@media (min-width: 768px) {
  .container .container-bottom #results .lista .listing-container:first-child .listing {
    color: rgba(25, 61, 98, 0.5);
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-left .listing-ime {
    font-size: 2rem;
    line-height: 2rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.06rem;
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-left .listing-stranke {
    max-height: unset;
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.042rem;
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-right .listing-posto {
    font-size: 2rem;
    line-height: 2rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.06rem;
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-right .broj-glasova {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.042rem;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom #results .lista .listing-container:first-child .listing {
    color: rgba(25, 61, 98, 0.5);
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-left .listing-ime {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.042rem;
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-left .listing-stranke {
    max-height: unset;
    font-size: 1rem;
    line-height: 1rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.03rem;
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-right .listing-posto {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.042rem;
  }
  .container .container-bottom #results .lista .listing-container:first-child .listing .listing-right .broj-glasova {
    font-size: 1rem;
    line-height: 1rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.03rem;
  }
}
.container .container-bottom #results .lista .listing-container:last-child {
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .container .container-bottom #results .lista .listing-container:last-child {
    margin-left: 0.5rem;
    height: 58px;
  }
  .container .container-bottom #results .lista .listing-container:last-child img {
    width: 58px;
    height: 58px;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom #results .lista .listing-container:last-child {
    margin-left: 1.45rem;
    height: 58px;
  }
  .container .container-bottom #results .lista .listing-container:last-child img {
    width: 58px;
    height: 58px;
  }
}
@media (min-width: 768px) {
  .container .container-bottom #results .lista .listing-container:last-child .listing {
    color: rgba(25, 61, 98, 0.5);
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-left .listing-ime {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.042rem;
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-left .listing-stranke {
    max-height: unset;
    font-size: 1.1rem;
    line-height: 1.1rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.033rem;
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-right .listing-posto {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.042rem;
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-right .broj-glasova {
    font-size: 1.1rem;
    line-height: 1.1rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.033rem;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom #results .lista .listing-container:last-child .listing {
    color: rgba(25, 61, 98, 0.5);
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-left .listing-ime {
    font-size: 1.1rem;
    line-height: 1.1rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.033rem;
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-left .listing-stranke {
    max-height: unset;
    font-size: 1rem;
    line-height: 1rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.03rem;
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-right .listing-posto {
    font-size: 1.1rem;
    line-height: 1.1rem;
    font-family: var(--font-main);
    color: var(--clr-izbori);
    font-weight: 800;
    letter-spacing: -0.033rem;
  }
  .container .container-bottom #results .lista .listing-container:last-child .listing .listing-right .broj-glasova {
    font-size: 1rem;
    line-height: 1rem;
    font-family: var(--font-main);
    color: inherit;
    font-weight: 500;
    letter-spacing: -0.03rem;
  }
}
@media (min-width: 768px) {
  .container .container-bottom select {
    font-size: 1.6rem;
    line-height: 1.6rem;
    font-family: var(--font-main);
    color: #0084DD;
    font-weight: 700;
    letter-spacing: -0.048rem;
  }
}
@media (max-width: 767.98px) {
  .container .container-bottom select {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-family: var(--font-main);
    color: #0084DD;
    font-weight: 700;
    letter-spacing: -0.042rem;
  }
}

/* ============= END IZBORNA TRAKA =============== */
/*BACKUP

@import './variables.scss';
@import './mixins.scss';
body {
    font-family: Arial, sans-serif;
    margin: 0;
}
.se-container{
    border: 1.5px solid rgba(91, 91, 91, 0.2);
    @include bp-up(md){
        border-radius: 10px;
    }
    max-width: 1180px;
    margin: 0 auto;
    .above-container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1.5px solid rgba(91, 91, 91, 0.2);

        @include bp-dn(sm){
            padding: 5px 10px;
        }
        @include bp-up(md){
            padding: 10px 20px;
        }
        box-sizing: border-box;
        position: absolute;
        z-index: 9;
        top: 0;
        width: 100%;
        background-color: transparent;
        img{
            @include bp-dn(sm){
                width: 180px;
            }
        }
        .result-info{
            display: flex;
            flex-direction: column;
            gap: 10px;
            &-title{
                font-family: var(--font-main);
                font-weight: 700;
                @include bp-dn(sm){
                    font-size: 14px;
                }
                @include bp-up(md){
                    font-size: 20px;
                }
                line-height: 100%;
                letter-spacing: -3%;
                text-align: right;
                margin: 0;
            }
            .result-data{
                span, p{
                    font-family: var(--font-main);
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 100%;
                    letter-spacing: -3%;
                    text-align: right;
                    margin: 0;
                    color: #193D62;
                    @include bp-dn(sm){
                        font-size: 12px;
                    }
                    @include bp-up(md){
                        font-size: 14px;
                    }
                }
                span:first-child{
                    margin-right: 10px;
                }
            }
        }
    }

    .widget-container {
        display: flex;
        position: relative;
        @include bp-dn(sm){
            flex-direction: column;
        }
        align-items: center;
        justify-content: space-around;
        gap: 20px;

        // Sakrivanje elemenata kad nijedna županija nije aktivna
        &:not(:has(.region.active)) {
            #data-display, #cities, #zoom-reset {
                display: none;
            }
            #map-container{
                max-width: 635px;
            }
        }

        // Sakrivanje labele kad je neka županija aktivna
        &:has(.region.active) {
            .label-container{
                display: none;
            }
        }

        #map-container {
            width: 100%;
            //max-width: 640px;
            min-width: 50%;
            position: relative;
            @include bp-dn(sm){
                margin-top: 60px;
            }
            @include bp-up(md){
                margin-top: 80px;
            }
            // Kad nema aktivne županije i hoveramo na kartu
            &:not(:has(.region.active)) {
                &:hover {
                    #map .region path {
                        fill: #D2D2D2; // Sve županije su sive na hover
                    }
                }

                // Kad hoveramo na pojedinu županiju (bez aktivnih)
                #map .region:hover{
                    path:not(.zagreb-dot) {
                        fill: #E7C4AD !important; // Hoverana županija postaje bež
                    }
                    .city{
                        g path, path:not([class*="st"]), .Zagreb-name path, .zagreb-dot{
                            fill: #193D62 !important;
                        }
                    }
                } 

            }
        }

        #map {
            // Kad je neka županija aktivna
            &:has(.region.active) {
                // Za županije koje nisu aktivne
                .region:not(.active) {
                    path {
                        fill: #EFEFEF; // Neaktivne županije su sive
                    }
                    &:hover path {
                        fill: #FFE7D5; // Na hover neaktivne županije postaju svijetlo bež
                    }
                    .city path:not(.st1), #Velika_Gorica .st1:not(:first-child), .st0, .Zagreb-name{
                        display: none;
                    }

                }
                #XXI_Grad_Zagreb:not(.active){
                    .zagreb-dot{
                        fill: #efefef !important;
                    }
                }
                // Za aktivnu županiju
                .region.active {
                    path {
                        fill: #E7C4AD; // Aktivna županija je bež
                    }
                    .zagreb-dot{
                        fill: #193D62 !important;
                    }

                    // Hover na općine unutar aktivne županije
                    .city:hover path {
                        fill: #FFE7D5; // Hoverane općine su svijetlo bež
                    }
                }
            }

            // Početno stanje - sve županije su bež
            &:not(:has(.region.active)) {
                .region path:not(.zagreb-dot) {
                    fill: #E7C4AD;
                }
                #XXI_Grad_Zagreb:hover{
                    .zagreb-dot{
                        fill: #193D62 !important;
                    }
                }
            }
        }
        @include bp-up(md){
            #region-select{
                display: none;
            }
        }
        @include bp-dn(sm){
            .label-container{
                display: none;
            }   
        }
        select{
            border: none;
            outline: none;
            scrollbar-width: none;
            background-color: transparent;
            font-family: var(--font-main);
            font-weight: 700;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: -3%;
            color: #0084DD;
            option{
                font-family: var(--font-main);
                font-weight: 700;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: -3%;
                color: #193D62;
            }
        }
    }
}
svg {
    width: 100%;
    height: auto;
    display: block;
}

.region {
    //stroke: #193d62;
    stroke-width: 1px;
    transition: fill 0.3s;
    cursor: pointer;
    transition: transform 2.3s ease-in-out;
}

#data-display {
    background-color: transparent;
    right: 0;
    max-height: 590px;
    overflow: scroll;
    scrollbar-width: none;
    border-radius: 4px;
    z-index: 10;
    @include bp-up(md){
        position: absolute;
        max-height: 77%;
        max-width: 50%;
        top: 140px;
        width: 590px;
        margin-right: 38px;
    }
    @include bp-dn(sm){
        border: 1px solid #ccc;
        width: 100%;
        margin-top: -20px;
        padding: 15px; 
        box-sizing: border-box;
    }
    h3{
        font-family: var(--font-main);
        font-weight: 700;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: -3%;
        margin: 0;
    }
    .lista, .lista2{
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 3000px;
        transition: max-height 0.3s ease-in-out;
        .listing{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            position: relative;
            border: 1px solid rgba(25, 61, 98, 0.2);
            background-color: #fff;
            &:nth-child(-n+2) {
                .listing-ime, .listing-posto{
                    @include bp-up(md){
                        font-size: 28px;
                    }
                    @include bp-dn(sm){
                        font-size: 18px;
                    }
                }
            }
            &:nth-child(n+3) {
                .listing-ime, .listing-posto{
                    @include bp-up(md){
                        font-size: 20px;
                    }
                    @include bp-dn(sm){
                        font-size: 14px;
                    }

                }
            }
            &-background{
                position: absolute;
                height: 100%;
                background: linear-gradient(90deg, rgba(253, 239, 229, 0.5) 0%, rgba(207, 137, 91, 0.5) 100%);
                pointer-events: none;
                z-index: 0;
                max-width: 100%;
            }
            &-left{
                z-index: 1;
                .listing-stranke{
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 90%;
                    max-height: 18px;
                    font-family: var(--font-main);
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 100%;
                    letter-spacing: -3%;
                    color: rgba(25, 61, 98, 0.5);
                    margin: 0 0 10px 10px;
                }
                .listing-ime{
                    font-family: var(--font-main);
                    font-weight: 800;
                    line-height: 100%;
                    letter-spacing: -3%;
                    color: rgba(25, 61, 98, 1);
                    margin: 10px 0 10px 10px;
                }
                p{
                    margin: 0 0 0 10px;
                }
            }
            &-right{
                text-align: end;
                min-width: 25%;
                align-self: center;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 10px;
                z-index: 1;
                p{
                    margin: 0 10px 0 0;
                }
                .listing-posto{
                    font-family: var(--font-main);
                    font-weight: 800;
                    line-height: 100%;
                    letter-spacing: -3%;
                    color: rgba(25, 61, 98, 1);
                    margin-top: 10px;
                }
                .broj-glasova{
                    font-family: var(--font-main);
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 100%;
                    letter-spacing: -3%;
                    color: rgba(25, 61, 98, 0.5);
                }
                .broj-mandata{
                    padding: 2px 6px;
                    border-radius: 20px;
                    background-color: #193D62;
                    font-family: var(--font-main);
                    font-weight: 700;
                    font-size: 12px;
                    line-height: 100%;
                    letter-spacing: -3%;
                    color: #FFFFFF;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .data-display-upper{
        display: flex;
        align-items: center;
        justify-content: space-between;
        select{
            border: none;
            outline: none;
            background-color: transparent;
            font-family: var(--font-main);
            font-weight: 700;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: -3%;
            color: #0084DD;
            option{
                font-family: var(--font-main);
                font-weight: 700;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: -3%;
                color: #193D62;
            }
        }
    }
    &:has(#collapse:checked){
        .lista2{
            max-height: 0;
            overflow: hidden;
        }
        img{
            transform: rotate(180deg);

        }
    }
    .list-collapse{
        margin-top: 10px;
        img{
            transition: transform 0.3s ease-in-out;
        }
        label{
            font-family: var(--font-main);
            font-weight: 700;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: -3%;
            color: #0084DD;
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        input{
            display: none;
        }
    }
}

#zoom-reset{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0084DD;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -3%;
    padding: unset;
    border: none;
    outline: none;
    background-color: transparent;
    position: absolute;
    z-index: 9;
    @include bp-up(md){
        top: 17%;
        right: 46%;  
    }
    @include bp-dn(sm){
        top: 80px;
    }
}

.controls {
    margin-bottom: 15px;
}

button {
    padding: 8px 12px;
    margin-right: 10px;
    cursor: pointer;
}

.debug-info {
    margin-top: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    font-family: monospace;
}

.label-container {
    display: flex;
    flex-direction: row;
    @include bp-up(md){
        margin-top: 80px;
    }
    .label-row{
        display: flex;
        flex-direction: column;
        label{
            font-family: var(--font-main);
            font-weight: 500;
            font-size: 20px;
            line-height: 35px;
            letter-spacing: -3%;
            color: #193D62;
            cursor: pointer;
        }
    }
}

.label-container label {
    padding: 0.5rem 0.75rem;
}

.city{
    z-index: 1000;
}
.widget-container #map-container #map g#XXI_Grad_Zagreb{
    path.zagreb-dot{
        fill: #193D62;
    }
} 


*//*# sourceMappingURL=style.css.map */