@charset "UTF-8";

/* Default */
:focus {
  outline: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  text-shadow: none;
}

:root {
  --zakon-plava: #0074e0;
}

/* @media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
} */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.15;

  /*   scroll-behavior: smooth; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: none;
}

@media (min-width: 2048px) {
  html {
    font-size: calc(1rem + 0.0875vw);
  }
}

@font-face {
  font-family: "GolosText";
  src: url("./assets/fonts/GolosText-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 700;
  font-optical-sizing: auto;
  font-display: block;
  font-style: normal;
}

body {
  margin: 0;
  color: #252525;
  background-color: #e4e4e7;
  font-family: "GolosText", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  word-spacing: -0.05rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.as-h1,
.as-h2,
.as-h3,
.as-h4,
.as-h5,
.as-h6 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.15;
  font-weight: 500;
}

.as-h0 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.0625rem;
  padding: 0;
  word-wrap: break-word;
}

h1,
.as-h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.0625rem;
  padding: 1em 0;
}

h2,
.as-h2 {
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  padding: 1em 0;
  line-height: 1.142856;
  letter-spacing: -0.03125rem;
}

h3,
.as-h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.03125rem;
  padding: 1em 0;
}

h4,
.as-h4 {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.016rem;
  padding: 1em 0;
}

h5,
.as-h5 {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.25;
  letter-spacing: -0.016rem;
  padding: 1em 0;
}

h6,
.as-h6 {
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.016rem;
  padding: 1em 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 1rem;
  line-height: 1.6;
}

.content p {
  font-size: 1.125rem;
}

.as-p {
  font-size: 1rem;
  padding: 0;
}

small,
.small {
  font-size: 0.875rem;
  display: inline-block;
}

img {
  width: 100%;
  height: auto;
}

blockquote {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 0;
}

em,
i,
.em,
.i {
  font-family: "silka-regular-italic", sans-serif;
  font-weight: normal;
  font-style: normal;
}

/* li:not(.menu-item) {
  position: relative;
  margin-bottom: 0.5rem;
}

li::before:not(.menu-item) {
  content: '';
  display: inline-block;
  background-image: url('../images/check-icon.svg');
  background-size: contain;
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  left: 0;
  top: 0.5rem;
} */

/* li:not(.menu-item, .single-content ul li) {
  padding-left: 0.25rem;
  position: relative;
} */

/* .ul-icon,
.wp-block-list {
  padding: 1rem; 
  list-style: none;
  margin-bottom: 0;
  padding-bottom: 1rem;
} */

/* .ul-icon li::before,
.wp-block-list li::before {
  content: '';
  display: inline-block;
  background-image: url('../images/check-icon.svg');
  background-size: contain;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0;
  top: 0.3rem;
}

.ul-icon li,
.wp-block-list li {
  padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.ul-icon li:nth-last-of-type(1) {
    margin-bottom: 0rem;
} */

/* .single-content ul {
  list-style: none;
}

.single-content ul li::before {
  content: '';
  display: inline-block;
  background-image: url('../images/check-icon.svg');
  background-size: contain;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0;
  top: 0.3rem;
}

.single-content ul li{
  padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.25rem;
}

@media (max-width: 575px) {
  .single-content > .container {
    padding: 0;
  }
} */

ul {
  list-style: none;
}

.zakon-page li::before,
.info li::before,
.register-list li::before {
  content: "\2014";
  font-size: 1rem;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.2rem;
}

.zakon-page li,
.info li,
.register-list li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0 !important;
  line-height: inherit;
}

.register-list {
  margin-bottom: 0.25rem !important;
  margin-top: 0.5rem;
}

.register-list li::before {
  top: -0.1rem;
}

strong,
b {
  font-weight: 600;
}

.strong {
  font-weight: 600;
}

sub,
sup {
  position: relative;
  font-size: 0.75rem;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25rem;
}

sup {
  top: -0.5rem;
}

img,
svg {
  vertical-align: middle;
}

iframe {
  border: 0;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 0.063rem;
  vertical-align: baseline;
}

td {
  padding: calc(0.25rem + 0.5vw);
  font-size: 0.875rem;
}

td p {
  padding-bottom: 0.125rem;
}

label {
  display: inline-block;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

select:disabled {
  opacity: 1;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

a {
  text-decoration: underline;
  color: #0061bd;
  font-weight: 600;
  transition:
    color 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  cursor: pointer;
}

nav a,
.button,
.google-container,
.swiper-slide,
.znacka a,
.odabir-container,
.rezultat-pretrage,
.show-more-button,
.zakon-preuzmi,
.main-content-buttons,
.mm-potpis,
.odjava-container a,
.sidebar-nav-item,
.right-pane-button,
.kategorija-rezultata-pretrage {
  text-decoration: none;
  color: #252525;
}

/* a {
  color: #252525;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
} 

a:not(
    nav a,
    .button,
    .google-container,
    .swiper-slide,
    .znacka a,
    .odabir-container,
    .login-box a,
    .rezultat-pretrage,
    .show-more-button,
    .zakon-preuzmi,
    .main-content-buttons,
    .mm-potpis,
    .odjava-container a,
    .sidebar-nav-item,
    .right-pane-button,
    .kategorija-rezultata-pretrage
  ) {
  text-decoration: underline;
  color: #0061bd;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
  cursor: pointer;
} 

a:not(
    .button,
    .google-container,
    .swiper-slide,
    .odabir-container,
    .login-box a,
    .rezultat-pretrage,
    .show-more-button,
    .zakon-preuzmi,
    .main-content-buttons,
    .mm-potpis,
    .odjava-container a,
    .sidebar-nav-item,
    .right-pane-button
  ):hover {
  color: #0074e0;
}
  */

/* helper klase */

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.m-0 {
  margin: 0;
}

.container,
.container-fluid {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 992px) {
  .container {
    --bs-gutter-x: 2.5rem;
    padding-right: calc(var(--bs-gutter-x) * 1.5);
    padding-left: calc(var(--bs-gutter-x) * 1.5);
  }
}

@media (min-width: 1600px) {
  .container {
    --bs-gutter-x: 5rem;
    padding-right: calc(var(--bs-gutter-x) * 1.5);
    padding-left: calc(var(--bs-gutter-x) * 1.5);
  }
}

:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
  --zakon-crna: #242442;
  --zakon-siva: #d6d6db;
  --button-border-radius: 0.5rem;
  --side-red-button-padding: 0.5rem 1rem;
  --side-button-padding: 0.5rem;
  --inside-sections-margin: 1.25rem;
  --wp--style--unstable-gallery-gap: 1.25rem !important;
  /* block editor varijabla mora biti kao inside section margin */
  --big-section-margin: 2.5rem;
  --small-section-margin: 2rem;
  --xl-section-margin: 3rem;
  --inside-border-radius: 0.5rem;
  --block-border-radius: 0.625rem;
  --big-border-radius: 1rem;
}

@media (min-width: 992px) {
  :root {
    --inside-sections-margin: 1.25rem;
    --big-section-margin: 4rem;
    --small-section-margin: 2.5rem;
    --xl-section-margin: 6.25rem;
  }
}

/*   NAV    */

/*   NAV - Hambi menu    */

/* Hamburger icon */
#hamburger-icon {
  width: 1.5rem;
  height: 2rem;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 6;
  margin-left: 2rem;
}

@media (min-width: 1300px) {
  #hamburger-icon {
    display: none;
  }
}

#hamburger-icon span {
  display: block;
  position: absolute;
  height: 0.125rem;
  width: 100%;
  background: black;
  border-radius: 0.0625rem;
  opacity: 1;
  left: 0;
  -webkit-transform: translateY(-50%) rotate(0deg);
  -moz-transform: translateY(-50%) rotate(0deg);
  -o-transform: translateY(-50%) rotate(0deg);
  transform: translateY(-50%) rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#hamburger-icon span:nth-child(1) {
  top: 25%;
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease,
    top 0.25s ease 0.25s,
    transform 0.25s ease;
}

#hamburger-icon span:nth-child(2) {
  top: 50%;
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

#hamburger-icon span:nth-child(3) {
  top: 75%;
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease,
    top 0.25s ease 0.25s,
    transform 0.25s ease;
}

#hamburger-icon.open span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease,
    top 0.25s ease,
    transform 0.25s ease 0.25s;
}

#hamburger-icon.open span:nth-child(2) {
  visibility: hidden;
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

#hamburger-icon.open span:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg);
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease,
    top 0.25s ease,
    transform 0.25s ease 0.25s;
}

#hamburger-icon.open {
  width: 1.5rem;
  height: 1rem;
}

/*   NAV- MOBILE    */

.nav-holder {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--hzsu-body);
  transform: translate3d(-100%, 0, 0);
  width: 100%;
  flex-direction: column;
  max-height: 100dvh;
  height: 100dvh;
  padding-top: 7rem;
  transition: transform 0.5s ease;
  /*   overflow-y: hidden !important; */
  z-index: 5;
  background-color: #ffffff;
  display: flex;
}

.is-open .nav-holder {
  transform: translate3d(0, 0, 0);
  /*   display: flex;*/
}

nav {
  position: fixed;
  width: 100%;
  background-color: #e4e4e7;
  z-index: 102;
  transition: transform 0.2s ease-in-out;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

nav.hidden-nav {
  transform: translateY(-100%);
}

nav + * {
  padding-top: 6rem;
}

.nav-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.nav-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* .nav-list {
  margin-left: 1rem;
} */

.nav-list ul {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  list-style: none;
  justify-content: space-between;
  gap: 2.25rem;
  align-items: center;
}

.nav-list ul li,
.moj-profil {
  font-size: 1.125rem;
  line-height: 1.1;
  font-weight: 500;
}

.nav-list ul li a,
.moj-profil,
.sidebar-nav-item {
  font-weight: 500;
  opacity: 0.6;
}

.nav-list ul li a:hover,
.moj-profil:hover,
.sidebar-nav-item:hover,
.nav-list ul li a.active,
.moj-profil.active,
.sidebar-nav-item.active {
  opacity: 1;
}

.nav-icons img {
  width: 1.875rem;
  height: 1.875rem;
}

@media (min-width: 1300px) {
  .nav-list ul li a,
  .moj-profil {
    font-size: 1rem;
  }
  .nav-icons img {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.nav-icons {
  display: flex;
  flex-direction: row;
  margin: 1rem 1rem 2.5rem 1rem;
  justify-content: space-between;
}

.nav-registration {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.nav-registration img {
  width: 1.75rem;
  height: 1.75rem;
}

.nav-logo-wrapper {
  z-index: 6;
  height: 4.188rem;
}

.nav-logo-wrapper > a {
  height: 100%;
  width: 100%;
  display: flex;
}

.nav-logo-wrapper img {
  height: auto;
  width: 10.313rem;
}

.nav-holder span {
  margin-left: 1rem;
  margin-top: 2.25rem;
}

.nav-right {
  display: none;
}

@media (min-width: 1300px) {
  .nav-logo-wrapper img {
    height: 100%;
    width: auto;
  }

  .nav-holder {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    position: initial;
    height: initial;
    max-height: initial;
    background-color: transparent;
    padding-top: 0;
    transition: none;
    will-change: initial;
    transform: none;
  }

  .nav-list ul {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    list-style: none;
    justify-content: space-between;
    gap: 2.25rem;
  }

  .nav-list {
    margin-left: auto;
    margin-right: 4rem;
  }

  .nav-icons {
    display: flex;
    flex-direction: row;
    gap: 1.875rem;
    align-items: center;
    margin-right: clamp(2rem, -0.138rem + 3.448vw, 4rem);
    margin-top: 0;
    margin-left: 5rem;
    margin-bottom: 0;
  }

  .nav-right {
    display: inline-block;
    margin-left: 1rem;
  }

  .nav-holder span {
    margin-left: 0;
    margin-top: 0;
    font-size: 0.9375em;
    font-weight: 500;
  }
}

.moj-profil {
  text-align: center;
  margin-top: 2rem;

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

/* body.nav-is-open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
   touch-action: none; 
}  */

.body-wrapper.open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  touch-action: none;
}

.main-section-nav {
  margin-top: 3rem;
}

@media (min-width: 1300px) {
  .main-section-nav {
    margin-top: 5rem;
  }

  .moj-profil {
    margin-left: 0;
    margin-top: 0;
  }
}

.bg-gray {
  background-color: #838d97;
  transition: background-color 0.3s ease-out;
}

.bg-gray:hover {
  background-color: #767e87;
  color: white;
}

.bg-green {
  background-color: #32c065;
  transition: background-color 0.3s ease-out;
}

.bg-green:hover {
  background-color: #2eb35e;
  color: white;
}

.bg-blue {
  background-color: #0077a8;
  transition: background-color 0.3s ease-out;
}

.bg-blue:hover {
  background-color: #005b81;
  color: white;
}

.bg-gold {
  background-color: #e0ab2d;
  transition: background-color 0.3s ease-out;
}

.bg-gold:hover {
  background-color: #b98e26;
  color: white;
}

.bg-zakon-blue {
  background-color: #1a46f8;
  transition: background-color 0.3s ease-out;
}

.bg-zakon-blue:hover {
  background-color: #1539c7;
  color: white;
}

.swiper {
  width: 100%;
}

/* .navigacija-swiper {
   overflow: visible;
  overflow-x: hidden; 
} */

.navigacija-swiper .swiper-pagination {
  bottom: -1.5rem;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.125;
}

.swiper-slide > a {
  color: white;
  font-size: 0.875rem;
  line-height: 150%;
}

@media (min-width: 1330px) {
  .swiper {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
  }

  .swiper-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
  }

  .swiper-slide {
    width: 19%;
    height: 100%;
    padding: 0.75rem 1.5rem;
  }

  .swiper-slide > a {
    color: white;
    font-size: 0.875rem;
    line-height: 150%;
  }

  .swiper-pagination {
    display: none;
  }
}

/*   SEARCH  */

.home .search-section-container {
  margin: 0 0 1.625rem 0;
}

.search-section-container {
  margin: 0 0 3.625rem 0;
}

.search-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  position: relative;
  padding-left: 0;
}

.input-mobile-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10rem;
  padding-left: 0.5rem;
}

.input-mobile-container.active {
  border-radius: 2rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.search-container button[type="submit"] {
  background-color: #0074e0;
  border: 0.063rem solid #0074e0;
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
  color: #fff;
  transition: 200ms ease-in-out;
  cursor: pointer;
}

.search-container button[type="submit"]:hover {
  background-color: #025aac;
  border: 0.063rem solid #025aac;
}

.search-container.active {
  border-radius: 1.7rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media (min-width: 992px) {
  .search-container {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    border-radius: 10rem;
    width: 66.666%;
    z-index: 99;
    padding: 0 0.5rem;
  }

  .input-mobile-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
  }

  .search-container button[type="submit"] {
    background-color: #0074e0;
    border: 0.063rem solid #0074e0;

    margin-top: 0;
    justify-content: initial;
    width: initial;
    color: #ffffff;
  }
}

.small-button {
  background-color: #d6d6db;
  border-radius: 10rem;
  padding: 0.75rem 1.5rem;
  color: var(--zakon-crna);
  line-height: 1.1;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  border: 0.063rem solid #d6d6db;
}

.small-button::after {
  content: "";
  background: url("./assets/images/down-icon.svg") no-repeat;
  background-position: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0;
}

.dropdown-container {
  padding-right: 0.5rem;
  border-right: 0.063rem solid #e4e4e7;
  position: relative;
}

.input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.input-container input[type="text"] {
  width: 100%;
  border: none;
  background-color: transparent;
  font-size: 1rem;
  line-height: 1.1;
  color: #252525;
  padding: 1.25rem 0 1.25rem 0.5rem;
}

.input-container input[type="text"]::placeholder {
  color: rgba(0, 0, 0, 50%);
}

@media (min-width: 692px) {
  .dropdown-container {
    padding-right: 1.5rem;
  }

  .input-container input[type="text"] {
    padding-left: 1.5rem;
  }

  .small-button::after {
    margin-left: 1.125rem;
  }
}

.dropdown-container > .is-open {
  display: block;
}

.sve-baze {
  cursor: pointer;
}

.dropdown-items {
  display: none;
  list-style: none;
  position: absolute;
  background-color: #ffffff;
  border-radius: 0.5rem;
  z-index: 10;
  cursor: pointer;
}

.dropdown-item {
  white-space: nowrap;
  padding: 0.5rem 1rem 0 1rem;
}

.dropdown-item:first-of-type {
  padding-top: 1rem;
}

.dropdown-item:last-of-type {
  padding-bottom: 1rem;
}

.search-container button[type="submit"]::after {
  margin-left: 0.625rem;
  background: url("./assets/images/search-icon.svg") no-repeat;
  background-position: center;
  width: 1.25rem;
  height: 1.25rem;
}

.search-info-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  margin-top: 1.5rem;
}

.vazeci-propisi {
  margin-left: 0;
  color: var(--zakon-crna);
  background-color: #d6d6db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.upute-za-pretrazivanje {
  margin-left: 0;
  color: var(--zakon-crna);
  background-color: #d6d6db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
  .search-info-container {
    flex-direction: row;
  }

  .vazeci-propisi {
    margin-left: auto;
    margin-bottom: 0;
  }

  .upute-za-pretrazivanje {
    margin-left: 0.75rem;
    margin-bottom: 0;
  }
}

.search-section-container > .container {
  display: flex;
  flex-direction: column;
}

.baza-info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 1.25rem;
  width: 100%;
}

.baza-info-container > span {
  background-color: #c9c9cf;
  width: 100%;
  height: 0.063rem;
}

.baza-info {
  color: #646473;
  font-size: 0.75rem;
  display: flex;
  flex-direction: row;
  white-space: normal;
  min-width: 90%;
  padding: 0 0.5rem;
  justify-content: center;
  text-align: center;
}

@media (min-width: 576px) {
  .baza-info {
    white-space: nowrap;
    padding: 0 0.75rem;
    min-width: initial;
  }
}

@media (min-width: 768px) {
  .baza-info-container {
    order: initial;
    padding-bottom: 1.25rem;
    padding-top: 0;
  }
}

.upute-za-pretrazivanje::after {
  content: "";
  margin-left: 0.625rem;
  background: url("./assets/images/search-icon.svg") no-repeat;
  background-position: center;
  width: 1.25rem;
  height: 1.25rem;
}

.input-container > .input-open {
  display: block;
}

.input-focus-container {
  display: none;
  height: auto;
  width: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 3.5rem;
  /*4,55 je blizu*/
  display: none;
  border-radius: 1.7rem;
  z-index: 99999;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.focus-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-size: 0.875rem;
}

.focus-content.active {
  display: block;
  opacity: 1;
  /*   border-radius: 2rem; */
  overflow: hidden;
}

.zakon-page,
.regular-page {
  display: flex;
  position: relative;
  /*   --bs-gutter-x: 1rem;
  padding-right: calc(var(--bs-gutter-x)* 1);
  padding-left: calc(var(--bs-gutter-x)* 1); */
}

.search-page {
  display: flex;
  --bs-gutter-x: 1rem;
  padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1);
}

@media (min-width: 992px) {
  .zakon-page,
  .search-page,
  .regular-page {
    display: flex;
    --bs-gutter-x: 2.5rem;
    padding-right: calc(var(--bs-gutter-x) * 1.5);
    padding-left: calc(var(--bs-gutter-x) * 1.5);
  }

  .input-focus-container {
    margin-top: 3.7rem;
  }
}

@media (min-width: 1600px) {
  .zakon-page,
  .search-page,
  .regular-page {
    --bs-gutter-x: 5rem;
  }
}

.no-resizer {
  gap: 2rem;
  flex-direction: column;
}

.left {
  width: 100%;
  position: relative;
}

.right {
  position: sticky;
  height: 70vh;
  overflow-y: auto;
  top: 1rem;
  width: 33%;
}

.zakon-page .right,
.regular-page .right,
.search-page .right {
  flex: 1;
}

.zakon-page .container,
.regular-page .container {
  display: flex;
}

.resizer {
  display: none;
}

.zakon-page .right,
.regular-page .right,
.search-page .right {
  display: none;
}

.no-resizer .right {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .resizer {
    background-color: transparent;
    cursor: col-resize;
    width: 2rem;
    display: flex;
    justify-content: center;
  }

  .resizer-img-wrapper {
    height: fit-content;
    margin-top: 45vh;
    position: sticky;
    top: 49vh;
    pointer-events: none;
  }

  .resizer-img-wrapper span {
    background-image: url("./assets/images/dragger.svg");
    background-size: cover;
    width: 0.75rem;
    height: 2rem;
    display: block;
  }

  .left {
    width: 66.666%;
    height: auto;
  }

  .no-resizer {
    flex-direction: row;
  }

  .no-resizer .right {
    width: 33.333%;
  }
}

.search > .container {
  display: flex;
  gap: calc(0.25rem + 2vw);
}

.medium {
  font-family: "GolosText";
  font-weight: 500;
}

.semibold {
  font-family: "GolosText";
  font-weight: 600;
}

.regular {
  font-family: "GolosText";
  font-weight: 400;
}

.large {
  font-size: 1.125rem;
}

.larger {
  font-size: 1.25rem;
}

/*    focus-content    */

.focus-content-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f7f7f8;
}

.focus-content-header .propisi,
.focus-content-header .upute {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  border-bottom: 0.063rem solid #c2c2cb;
  border-right: 0.063rem solid #c2c2cb;
}

.focus-content-header .zatvori-container {
  width: 6%;
  border-bottom: 0.063rem solid #c2c2cb;
  display: none;
}

.zatvori {
  width: 100%;
  height: 100%;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.zatvori > img {
  height: 3rem;
  width: 3rem;
}

/* @media (min-width: 1200px) {
  .zatvori>img {
    padding: 1rem;
  }
}

@media (min-width: 1600px) {
  .zatvori>img {
    padding: 1.5rem;
  }
} */

.focus-content-header .upute > span {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.focus-content-header .upute > span::after {
  content: "";
  background: url("./assets/images/arrow-right.svg") no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  background-position: center;
  margin-left: 0.5rem;
}

.checkbox-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media (min-width: 992px) {
  .focus-content-header {
    flex-direction: row;
  }

  .focus-content-header .propisi,
  .focus-content-header .upute {
    width: 47%;
  }

  .focus-content-header .zatvori-container {
    display: block;
  }
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox-wrapper input[type="checkbox"] {
    --active: #275efe;
    --active-inner: #fff;
    --focus: 0.125rem rgba(39, 94, 254, 0.3);
    --border: #bbc1e1;
    --border-hover: #275efe;
    --background: #fff;
    --disabled: #f6f8ff;
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 1.313rem;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 0.063rem solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition:
      background 0.3s,
      border-color 0.3s,
      box-shadow 0.2s;
  }

  .checkbox-wrapper input[type="checkbox"]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition:
      transform var(--d-t, 0.3s) var(--d-t-e, ease),
      opacity var(--d-o, 0.2s);
  }

  .checkbox-wrapper input[type="checkbox"]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }

  .checkbox-wrapper input[type="checkbox"]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .checkbox-wrapper input[type="checkbox"]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .checkbox-wrapper input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
  }

  .checkbox-wrapper input[type="checkbox"]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .checkbox-wrapper input[type="checkbox"]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .checkbox-wrapper input[type="checkbox"]:not(.switch) {
    width: 1.313rem;
  }

  .checkbox-wrapper input[type="checkbox"]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .checkbox-wrapper input[type="checkbox"]:not(.switch):checked {
    --o: 1;
  }

  .checkbox-wrapper input[type="checkbox"] + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 0.5rem;
  }

  .checkbox-wrapper input[type="checkbox"]:not(.switch) {
    border-radius: 0.438rem;
  }

  .checkbox-wrapper input[type="checkbox"]:not(.switch):after {
    width: 0.313rem;
    height: 0.563rem;
    border: 0.125rem solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 0.438rem;
    top: 0.25rem;
    transform: rotate(var(--r, 20deg));
  }

  .checkbox-wrapper input[type="checkbox"]:not(.switch):checked {
    --r: 43deg;
  }
}

.checkbox-wrapper * {
  box-sizing: inherit;
}

.checkbox-wrapper *:before,
.checkbox-wrapper *:after {
  box-sizing: inherit;
}

.focus-content-upute {
  display: flex;
  flex-direction: column;
  padding: 1.875rem;
}

.left-content > span {
  padding-bottom: 1rem;
  display: block;
}

.focus-content-upute .right-content {
  padding-top: 2rem;
  border-top: 0.063rem solid #c2c2cb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.focus-content-recent-search {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 0.063rem solid #c2c2cb;
  margin: 3rem 1.875rem 4rem 1.875rem;
}

.recent-search-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.recent-search {
  padding: 0.5rem;
  background-color: #d6d6db;
  border-radius: 0.25rem;
  font-weight: 500;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  line-height: 1;
}

@media (min-width: 992px) {
  .focus-content-upute {
    flex-direction: row;
    gap: 1rem;
  }

  .focus-content-upute .left-content {
    width: 65%;
  }

  .focus-content-upute .right-content {
    width: 35%;
    padding-top: 0;
    border-top: none;
    padding-left: 2rem;
    border-left: 0.063rem solid #c2c2cb;
  }
}

.recent-search > span {
  background-image: url("./assets/images/close.svg");
  width: 1rem;
  height: 100%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 1rem;
}

.search-and-google-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(0.25rem + 2vw);
  z-index: 101;
}

.google-container {
  display: flex;
  width: 100%;
  align-items: center;
  background-color: #d6d6db;
  padding: 0.5rem 1rem;
  flex-direction: row;
  border-radius: 10rem;
}

@media (min-width: 576px) {
  .google-container {
    padding: 0.5rem 2rem;
  }
}

.google-container > .google-image {
  width: 2.625rem;
  height: 100%;
  margin-right: 1rem;
}

.google-container .arrow-image {
  width: 1.25rem;
  height: 100%;
  margin-left: auto;
}

@media (min-width: 992px) {
  .search-and-google-container {
    flex-direction: row;
    margin-right: 2rem;
  }

  .google-container {
    width: 33%;
  }
}

.left-section {
  width: 67%;
}

.right-section {
  width: 33%;
}

.main-right-section-container {
  border-radius: 0.5rem;
}

.zakoni-container {
  /*   background-color: #F7F7F8; */
  background-color: #f2f2f3;
  padding: 1rem;
  border-radius: 0.5rem;
}

.zakoni-container:last-of-type {
  margin-bottom: 0;
}

/* .zakoni-container>p {
  margin-bottom: .5rem;
} */

ul.znacka {
  padding: 0;
  list-style-type: none;
}

ul.znacka li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

ul.znacka li .znacka-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.75rem;
  height: 1.188rem;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.188rem;
}

ul.znacka li .znacka-label:hover {
  color: #fff;
}

ul.znacka a {
  padding-left: 0;
  display: flex;
  width: fit-content;
}

section {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.main-page-zakoni-section {
  flex-direction: column;
}

.right-section {
  width: 100%;
}

.left-section {
  width: 100%;
  gap: calc(0.25rem + 1vw);
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .left-section {
    width: 66.666%;
  }

  .right-section {
    width: 33.333%;
  }

  .main-page-zakoni-section {
    display: flex;
    flex-direction: row;
    gap: calc(0.25rem + 2vw);
    --bs-gutter-x: 2.5rem;
    padding-right: calc(var(--bs-gutter-x) * 1.5);
    padding-left: calc(var(--bs-gutter-x) * 1.5);
  }
}

@media (min-width: 1600px) {
  .main-page-zakoni-section {
    --bs-gutter-x: 5rem;
  }
}

/* FOOTER */

footer {
  margin-top: 8rem;
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  footer {
    margin-top: 8rem;
    margin-bottom: 5rem;
  }
}

.footer-copyright {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
  flex-wrap: wrap;
}

.mm-potpis {
  color: rgba(36, 36, 66, 0.4);
  /*   font-size: 0.75rem; */
  font-weight: 500;
}

.as-p {
  font-size: 1rem;
}

/* footer novi */

.footer-container-div {
  background-color: #0000000d;
  padding: 0 2rem;
  border-radius: 0.5rem;
}

.footer-first-div {
  padding: 2.25rem 0 2.5rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border-bottom: 0.063rem solid #b2b2bc;
  align-items: center;
}

.footer-first-div .button {
  display: inline-flex;
}

.footer-legal {
  padding: 1.75rem 0 0.25rem;
}

.footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-legal-links a {
  color: var(--zakon-plava);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus {
  text-decoration: underline;
}

.footer-company {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-company-info {
  color: rgba(36, 36, 66, 0.6);
  font-size: 0.875rem;
  line-height: 1.4;
}

.footer-disclaimer {
  margin: 0;
  padding: 1.25rem 0 2rem;
  border-top: 0.063rem solid #b2b2bc;
  color: rgba(36, 36, 66, 0.6);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.footer-disclaimer strong {
  color: rgba(36, 36, 66, 0.85);
  font-weight: 600;
}

@media (min-width: 768px) {
  .footer-legal-links {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 0.875rem;
  }
}

.back-to-top-button {
  background-image: url("./assets/images/back-to-top.svg");
  background-repeat: no-repeat;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
}

/*    main zakon    */

.main-content-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  margin-bottom: 2rem;
  --bs-gutter-x: 1rem;
  padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1);
}

.main-content-buttons {
  background-color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  color: var(--zakon-plava);
  width: 100%;
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  align-items: center;
  line-height: 1.125;
  border: 0.063rem solid #fff;
}

.main-content-buttons::after {
  content: "";
  background: url(./assets/images/arrow-right-blue.svg) no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  margin-left: auto;
}

.text-page {
  padding-bottom: 2.625rem !important;
}

.main-zakon-container {
  /*   background-color: #fff; */
  background-color: #f2f2f3;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.main-zakon-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

.main-zakon-headline {
  font-size: 1.5rem;
  padding: 0;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-align: center;
}

@media (min-width: 992px) {
  .main-zakon-headline {
    text-align: initial;
  }

  .main-content-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0;
  }

  .main-zakon-container {
    padding: 2.625rem;
    padding-bottom: 7.5rem;
  }
}

.zakon-preuzmi {
  margin: 2rem 0;
  border-radius: 10rem;
  background-color: var(--zakon-plava);
  color: #fff;
  padding: 1rem 2rem;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.15;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  transition: 200ms ease-in-out;
  display: none;
}

.zakon-preuzmi:hover {
  background-color: #025aac;
}

.zakon-preuzmi span {
  font-size: 0.875rem;
  font-weight: 400;
  color: #ffffffcc;
}

.zakon-preuzmi > div {
  display: flex;
  flex-direction: column;
}

.zakon-preuzmi::after {
  content: "";
  background: url(./assets/images/download.svg) no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

@media (min-width: 992px) {
  .zakon-preuzmi {
    display: flex;
  }
}

/*  .main-zakon-container-sidebar {
  height: 100%;
} 
 */
#alati {
  position: fixed;
  left: 1rem;
  background-color: rgb(36 36 66 / 40%);
  bottom: 2rem;
  border-radius: 10rem;
  width: fit-content;
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
  gap: 0.25rem;
  z-index: 2;
  margin-right: 1rem;
}

@media (min-width: 992px) {
  #alati {
    left: 6.375rem;
  }
}

@media (min-width: 1600px) {
  #alati {
    left: 10.125rem;
  }
}

#alati > div,
#alati > a {
  background-color: #f7f7f8;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  border-radius: 10rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#alati .search-bar {
  height: auto;
  display: block;
  height: 3rem;
}

#alati .search-bar.search-bar-denied {
  background-image: url("./assets/images/search.svg");
}

#alati .search-bar.active {
  width: 60%;
}

/* cool search */

#cool_find_div {
  height: 100%;
  display: flex !important;
  justify-content: center;
  padding: 0 0.5rem;
  background-color: transparent;
}

#cool_find_div > .cool_find_btn {
  border: none !important;
  background-color: transparent;
  background-image: url("./assets/images/search.svg");
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  margin: 0;
  padding: 0;
}

#cool_find_div > .cool_find_btn.open-cool-menu {
  border: none !important;
  background-color: transparent;
  background-image: url("./assets/images/alati-close.svg");
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  margin: 0;
  padding: 0;
}

.cool_find_btn svg {
  display: none;
}

.search-bar.active .cool_find_menu {
  background-color: transparent !important;
  height: 100% !important;
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
}

#cool_find_msg {
  padding: 0 0.5rem;
  display: none;
}

@media (min-width: 992px) {
  #cool_find_div {
    display: inline-block;
  }
}

.cool_find_input {
  max-width: initial !important;
  width: 100% !important;
}

.cool_find_menu > button {
  border: none !important;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  margin: 0;
  padding: 0;
}

.cool_find_menu > button:first-of-type {
  background-image: url("./assets/images/alati-left.svg");
}

.cool_find_menu > button:last-of-type {
  background-image: url("./assets/images/alati-right.svg");
}

/* .cool_find_input {
  height: 100% !important;
} */

/* filip css alati */

#alati > div:hover {
  background-color: #ffffff;
  opacity: 1;
}

#alati > a:hover {
  background-color: #eea620;
  opacity: 1;
}

/* TOC u desnom panelu */
.toc-pane-title {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.toc-pane .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-pane .toc-list li {
  margin: 0.125rem 0;
  font-size: 0.875rem;
  line-height: 1.35;
  list-style: none;
  text-align: left;
}

.toc-pane .toc-list li::before,
.toc-pane .toc-list li::marker {
  content: none;
  display: none;
}

.toc-pane .toc-list a {
  text-decoration: none;
  color: #242442;
  display: block;
  text-align: left;
}

/* poništi centriranje/blok-stilove iz HTML-a naslova */
.toc-pane .toc-list a * {
  display: inline;
  text-align: left;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.toc-pane .toc-list a:hover {
  color: #1440f0;
  text-decoration: underline;
}

.toc-pane .toc-h1 {
  font-weight: 600;
  margin-top: 0.5rem;
  padding-left: 0;
}

.toc-pane .toc-h2 {
  font-weight: 500;
  padding-left: 0.75rem;
}

.toc-pane .toc-h3 {
  padding-left: 1.5rem;
}

.toc-pane .toc-h4 {
  padding-left: 2.25rem;
  font-size: 0.8125rem;
}

/* old alati fade-in:
.alati {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  animation: alati-fadein 0.5s 5s forwards;
}
*/
.alati {
  opacity: 1;
  pointer-events: auto;
}

@keyframes alati-fadein {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

#alati > div.hidden,
#alati > a.hidden {
  display: none;
}

#cool_find_text::placeholder {
  font-size: 0.875rem;
}

#cool_find_text {
  -webkit-appearance: none;
  outline: none;
  border: none;
  background-color: #e4e4e7;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
}

.cool_find_menu form {
  margin-right: 0.5rem;
}

@media (max-width: 992px) {
  #alati .search-bar.active {
    width: 100%;
  }

  button.cool_find_btn {
    padding-left: 2.5em;
  }
}

#alati .bell {
  background-image: url("./assets/images/bell.svg");
}

#alati > a.bell.bell-active {
  background-color: rgba(238, 166, 32, 0.35);
}

#alati > a.bell.bell-active:hover {
  background-color: #eea620;
}

#alati .prijava {
  background-image: url("./assets/images/prijava.svg");
}

#alati .zakon-ai {
  background-color: #1440f0;
  background-image: url("./assets/images/zakon-ai-text.svg");
}

#alati .toc {
  background-image: url("./assets/images/toc.svg");
}

#alati .to-top {
  background-image: url("./assets/images/alati-back-to-top.svg");
  cursor: pointer;
}

#alati .info-link {
  text-decoration: none;
}

#alati .info-modal {
  top: auto;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

#alati .search-bar.active .info-modal {
  display: none !important;
}

.rezultati-pretrage-headline-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 0.063rem solid #c9c9cf;
}

.rezultati-pretrage-headline-container h4 {
  padding: 0;
  font-weight: 500;
}

.kategorija-rezultata-pretrage-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kategorija-rezultata-pretrage {
  background-color: #d6d6db;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 0.25rem;
}

@media (min-width: 1400px) {
  .rezultati-pretrage-headline-container {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}

.rezultati-pretrage-kategorija-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.povezani-zakoni-pane > h1 {
  font-size: 1.5rem;
  font-weight: 600;
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.povezani-zakoni-pane .rezultati-pretrage-kategorija-container {
  gap: 1rem;
  margin: 1.5rem 0;
}

.povezani-zakoni-pane .rezultat-pretrage {
  padding: 1rem;
}

.povezani-zakoni-pane .rezultat-pretrage h3 {
  font-size: 1.1rem;
  padding-bottom: 0;
}

.other-versions-pane .rezultat-pretrage {
  padding: 0.75rem 1rem;
}

.other-versions-pane .rezultat-pretrage h3 {
  font-size: 1.1rem;
  padding-bottom: 0;
}

.other-versions-pane .other-version-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.other-versions-pane .other-version-item .rezultat-pretrage {
  flex: 1;
}

.other-versions-pane .usporedi-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0074e0;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

.other-versions-pane .usporedi-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.other-versions-pane .usporedi-icon img {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.other-versions-pane .usporedi-icon:hover {
  opacity: 1;
}

.other-versions-pane .usporedi-icon-placeholder {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
}

.other-versions-pane .other-versions-upute {
  margin-bottom: 1rem;
}

.other-versions-pane .usporedi-icon-inline {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: text-bottom;
}

.other-versions-pane .other-version-current .rezultat-pretrage h3 {
  font-weight: 700;
}

.rezultati-pretrage-kategorija-container > h2 {
  font-size: 1.25rem;
  font-weight: 500;
  padding-bottom: 0;
  padding-top: 0;
}

.rezultat-pretrage {
  padding: 1.5rem;
  /*   background-color: #F7F7F8; */
  background-color: #f2f2f3;
  height: 100%;
  width: 100%;
  display: block;
  border-radius: 0.5rem;
}

.rezultat-pretrage:hover h3,
.rezultat-pretrage:hover .rezultat-pretrage-title {
  color: #0074e0;
}

.rezultat-pretrage h3 {
  font-size: 1.25rem;
  font-weight: 500;
  padding-top: 0;
  padding-bottom: 1rem;
  transition: all 0.3s ease-in-out;
}

.rezultat-pretrage-title {
  color: inherit;
  text-decoration: none;
}

.rezultat-pretrage-title:hover {
  color: #0074e0;
}

.search-preview-btn {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.search-preview-btn:hover,
.search-preview-btn:focus-visible {
  opacity: 1;
}

.rezultat-pretrage p {
  padding-bottom: 0;
}

.rezultat-pretrage h3 b,
.rezultat-pretrage p b {
  background-color: #d0e8ff;
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
}

.show-more-button {
  border-radius: 10rem;
  background-color: var(--zakon-plava);
  border: 0.063rem solid var(--zakon-plava);
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-more-button:hover {
  background-color: #025aac;
  border: 0.063rem solid #025aac;
}

.no-padding {
  padding: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mb-5 {
  margin-bottom: 5rem;
}

/*   LOGIN    */

.login-left-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*   padding: 1.75rem 0; */
}

.login-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* .login-container-responsive {
  max-width: calc(100% - 1.5rem);
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 700px) {
  .login-container-responsive {
    max-width: calc(100% - 7rem);
  }
}

@media (min-width: 1200px) {
  .login-container-responsive {
    max-width: calc(100% - 20rem);
  }
}

@media (min-width: 1400px) {
  .login-container-responsive {
    max-width: calc(100% - 30rem);
  }
} */

.login-box {
  background-color: #f2f2f3;
  border-radius: 0.5rem;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*   gap: 8.125rem; */
}

.new-registration-container {
  padding: 2rem 2rem 2.5rem 2rem;
  background-color: #0074e0;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: white;
  width: 100%;
}

.new-registration-container-white {
  padding: 2rem 2rem 2.5rem 2rem;
  background-color: white;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.justify-content-center {
  display: flex;
  justify-content: center;
}

/* @media (min-width: 992px) {
  .login-box {
    width: calc(100% - 38vw);
  }

  .new-registration-container,
  .new-registration-container-white {
    width: calc(100% - 38vw);
  }
} */

@media (max-width: 575px) {
  .button-responsive {
    width: 100% !important;
  }
}

.forgotten-password {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 765px) {
  .login-box {
    padding: 2rem 2rem 2.5rem 2rem;
  }
}

.register-box .login-box-bottom {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.small-headline {
  font-size: 1.5rem;
  line-height: 1.2;
}

.login-box .small-headline {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  margin-bottom: 2.5rem;
}

.form-group-inner {
  position: relative;
}

.form-group:not(.active) .form-group-inner {
  overflow: hidden;
}

.form-group-inner input,
.form-group-inner textarea {
  width: 100%;
}

.delay-clip {
  animation: delayClip 100ms forwards;
}

@keyframes delayClip {
  0%,
  90% {
    overflow: visible;
  }
  100% {
    overflow: hidden;
  }
}

.login-box .form-group {
  margin-bottom: 2.5rem;
}

.form-group label {
  line-height: 1.25;
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  transition: 200ms ease-in-out;
  color: #6b7580;
  white-space: nowrap;
  cursor: text;
}

.form-group input,
.form-group textarea {
  padding: 0.75rem 1rem 0.75rem;
  border-radius: 0.25rem;
  border: 0.063rem solid #c9c9cf;
  line-height: 1.5;
  background-color: #f2f2f3;
  transition: background-color 200ms ease-in-out;
}
.form-group textarea {
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  background-color: #f2f2f3;
  border: 0.063rem solid #0074e0;
}

.form-group.active label {
  top: -0.875rem;
  left: 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.125rem;
  background: #f2f2f3;
  padding: 0.25rem 0.325rem;
  cursor: default;
}

.login-box .checkbox-wrapper {
  margin-bottom: 2.5rem;
}

.button {
  background-color: #d6d6db;
  border-radius: 0.5rem;
  padding: 0.875rem 1.5rem 1rem 1.5rem;
  color: var(--zakon-crna);
  line-height: 1.1;
  flex-direction: row;
  white-space: nowrap;
  border: 0.063rem solid #0074e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 500 !important;
  transition:
    background-color 200ms ease-in-out,
    border 200ms ease-in-out,
    color 200ms ease-in-out;
}

.button:hover {
  background-color: #bbbbbd;
  border: 0.063rem solid #bbbbbd;
}

.button-blue {
  background-color: #0074e0;
  color: #fff;
  border: 0.063rem solid #0074e0;
  width: 100%;
}

.button-blue:hover {
  background-color: #025aac;
  border: 0.063rem solid #025aac;
}

.button-outline,
.button-outline-white {
  background-color: transparent;
}

.button-outline {
  color: #0074e0;
  border: 0.063rem solid #0074e0;
}

.button-outline-white {
  color: white;
  border: 0.063rem solid white;
}

.button-outline:hover {
  background-color: #0074e0;
  color: #fff;
  border: 0.063rem solid #0074e0;
}

.button-outline-white:hover {
  background-color: white;
  color: #025aac;
  border: 0.063rem solid white;
}

.full-width {
  width: 100% !important;
}

/* .login-box .button {
  margin-bottom: 1.25rem;
} */

.login-box .new-password {
  display: block;
  width: 100%;
  text-align: center;
  color: #0074e0;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: underline;
  font-size: 0.875rem;
}

.divider {
  display: block;
  width: 100%;
  background-color: #d6d6db;
  height: 0.063rem;
}

.register-box .checkbox-wrapper {
  margin-bottom: 0.75rem;
}

.register-box .divider {
  margin-bottom: 0.75rem;
}

/* .register-box .button {
  margin-top: auto;
} */

.register-box .login-box-bottom span {
  text-align: center;
}

.register-header {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.benefiti-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.benefit {
  background-color: #32c065;
  color: #fff;
  padding: 0.25rem 0.375rem;
  font-size: 0.875rem;
  line-height: 1.2;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.benefit::before {
  content: "";
  background: url("./assets/images/benefit.svg") no-repeat;
  width: 1rem;
  height: 1rem;
  display: block;
  background-position: center;
}

.benefiti-text {
  margin-top: 4.25rem;
}

.main-section {
  display: flex;
  flex-direction: column;
  gap: calc(0.25rem + 2vw);
  justify-content: center;
}

@media (min-width: 992px) {
  .main-section {
    flex-direction: row;
  }
}

.blue {
  color: #0061bd;
}

/*    Profil   */

.profil-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding-bottom: 2rem;
}

.custom-heading {
  font-size: 1.25rem;
}

.odjava-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.left-section-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.right-section-content {
  width: 100%;
}

@media (min-width: 992px) {
  .left-section-nav {
    width: 33.33333%;
    display: flex;
    flex-direction: column;
  }

  .right-section-content {
    width: 66.66666%;
  }
}

.info-container {
  background-color: #79dc9d;
  padding: 2rem;
  border-radius: 0.5rem;
}

.wrap-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.email-container,
.pretplata-container,
.preuzimanja-container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.preostalo {
  font-size: 4.5rem;
}

.maksimalno,
.preuzimanja-container > div {
  font-size: 1.5rem;
}

.info-container .pretplata-container {
  margin-top: 3.125rem;
}

.ai-token-bar {
  width: 100%;
  height: 0.625rem;
  margin-top: 0.4rem;
  background-color: #e0e0e0;
  border-radius: 0.3125rem;
  overflow: hidden;
}

.ai-token-bar-fill {
  height: 100%;
  background-color: #2e7d32;
  border-radius: 0.3125rem;
  transition: width 0.3s ease;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
}

.sidebar-nav-item {
  display: flex;
  flex-direction: row;
  font-size: 1.25rem;
  padding-bottom: 1rem;
  padding-top: 0.5rem;
  border-bottom: 0.063rem solid #c2c2cb;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 2rem 1rem 2rem;
}

.sidebar-nav-item.active {
  opacity: 1;
}

.sidebar-nav-item > img {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0;
}

.content-section {
  background-color: #f2f2f3;
  border-radius: 0.5rem;
  padding: 3.75rem 2.5rem;
}

.content-section h2 {
  margin-bottom: 2rem;
}

.form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 3.375rem;
}

.form-two-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-two-group .form-group {
  width: 100%;
}

.form-two-group:last-of-type .form-group {
  width: 100%;
}

@media (min-width: 600px) {
  .form-two-group {
    flex-direction: row;
  }

  .form-two-group:last-of-type .form-group {
    width: calc(50% - 0.625rem);
  }
}

.content-section .zapamti-me-container {
  padding: 0.75rem 0;
  border-bottom: solid 0.063rem #d6d6db;
  border-top: solid 0.063rem #d6d6db;
}

#podaci .button {
  display: inline-flex;
  margin-top: 1.5rem;
}

/* samostlani serach */

.samostalni-search-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-out;
  z-index: 101;
  position: relative;
}

.samostalni-search-container .container {
  overflow: hidden;
}

.samostalni-search-container.active {
  grid-template-rows: 1fr;
}

.samostalni-search-container.overflow-active .container {
  overflow: visible;
}

.samostalni-search-container.active .overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #252525;
  opacity: 0.75;
}

.samostalni-search-container .search-container {
  z-index: 2;
  width: 100%;
  margin-bottom: 2rem;
}

.no-single-search-overlay {
  transition: 200ms ease-in-out;
}

.no-single-search-overlay.open {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #252525;
  opacity: 0.75;
  z-index: 22;
}

/* PRETPLATE */

.content-section-pretplate {
  background-color: transparent;
  padding: 0;
}

.pretplate-container-small {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 765px) {
  .pretplate-container-small {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
}

.pretplata-container {
  background-color: #f7f7f8;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
  gap: 2rem;
  border-radius: 0.5rem;
  width: 100%;
  transition: 200ms ease-in-out;
}

.pretplata-container:hover {
  background-color: #ebf9f0;
}

.pretplata-transparent {
  background-color: transparent;
  border: 0.063rem solid #242442;
}

.pretplate-container-small:nth-of-type(2),
.pretplate-container-small:nth-of-type(3) {
  margin-top: 2rem;
}

.pretplata-header h3 {
  font-size: 1.5rem;
  font-weight: 500;
  padding-bottom: 2rem;
}

@media (min-width: 992px) {
  .pretplata-header h3 {
    padding-bottom: 3.25rem;
  }
}

.toggle-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.25rem;
  background-color: #ffffff;
  border-radius: 10rem;
  width: fit-content;
  margin-bottom: 1.25rem;
}

.toggle-container span {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.625rem 1rem 0.625rem 1rem;
  border-radius: 10rem;
  cursor: pointer;
}

.toggle-container span.active {
  border: 0.063rem solid #0074e0;
  color: #0074e0;
}

.prethodni-paket-text {
  margin-top: 1.875rem;
}

.prethodni-paket-text,
.paket-benefiti > li {
  /*   display: flex;
  flex-direction: row; */
  position: relative;
  padding: 0.25rem 1rem 0.5rem 2.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.paket-benefiti li::before {
  content: "";
  display: inline-block;
  background-image: url("./assets/images/green-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0.875rem;
  top: 0.5rem;
}

.highlighted-blue::before {
  top: 0.85rem !important;
}

.prethodni-paket-text::before {
  content: "";
  display: inline-block;
  background-image: url(./assets/images/green-circle.svg);
  background-size: contain;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0.875rem;
  top: 0.5rem;
  background-repeat: no-repeat;
}

.highlighted-blue,
.highlighted-green {
  background-color: hsl(209deg 100% 44% / 10%);
  border-radius: 0.25rem;
  padding: 0.5rem 1rem 0.75rem 2.5rem !important;
  gap: 0.5rem;
  justify-content: space-between;
}

.highlighted-green {
  background-color: hsl(142deg 59% 47% / 10%);
}

/*  .highlighted-blue::after {
  content: '';
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('./assets/images/zakon-ai.svg') !important;
  width: 8rem !important;
  height: 5rem !important;
  background-position: center;
} 

@media (min-width: 576px) {
  .highlighted-blue::after {
    width: 5rem !important;
  }
} */

.pretplata-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 0.063rem solid hsl(240deg 29% 20% / 30%);
  flex-wrap: wrap;
  gap: 1rem;
}

.paket-lista {
  display: flex;
  flex-direction: column !important;
  gap: 0.5rem;
  align-items: flex-start !important;
}

.cijena-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cijena-container .cijena-broj {
  font-size: 2.25rem;
  line-height: 1;
}

.cijena-tekst {
  color: #646473;
}

.cijena-container .small,
.odabrani-paket-header .small,
.podaci-container .small {
  color: #646473;
  font-size: 0.75rem;
}

.cjenik-container {
  display: flex;
  flex-direction: column;
  gap: calc(0.25rem + 2vw);
}

@media (min-width: 1400px) {
  .cjenik-container {
    flex-direction: row;
    justify-content: center;
  }

  .cjenik-container .pretplata-container {
    max-width: 45rem;
  }
}

.cjenik-container .button.button-outline.full-width {
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}

.info-container-pretplata {
  display: flex;
  flex-direction: column;
}

.pretplate-navigation-container {
  padding: 0 calc(1vw + 0.25rem);
}

.pretplate-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  line-height: 1.125;
}

@media (min-width: 762px) {
  .pretplate-navigation {
    padding: 1rem;
  }
}

.odabir-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  justify-content: center;
}

.odabir-container .number,
.radio-btn .number {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 10rem;
  background-color: transparent;
  font-size: 0.75rem;
  padding: 0.85rem;
  color: #32c065;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.063rem solid #32c065;
}

.odabir-container.checked .number,
input[type="radio"]:checked + label .number,
.consent-check input[type="checkbox"]:checked ~ label .number {
  width: 1.75rem;
  height: 1.75rem;
  background-image: url(./assets/images/green-circle.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.75rem 1.75rem;
  border-color: transparent;
}

.odabir-container.active .number {
  background-color: #32c065;
  color: #fff;
}

.pretplate-divider {
  height: 0.063rem;
  background-color: #c2c2cb;
  width: min(5rem);
}

/* Placanje */

.middle-split .left-section,
.middle-split .right-section {
  width: 100%;
}

.cijena-big-container {
  display: flex;
  flex-direction: column;
  border-bottom: 0.063rem solid #d6d6db;
  padding-bottom: 1.875rem;
}

.cijena-big-container .cijena-container {
  width: 100%;
}

.cijena-big-container .cijena-container:last-of-type {
  border-top: 0.063rem solid #d6d6db;
  padding-top: 1rem;
  margin-top: 1.875rem;
}

.cijena-container .button,
.cijena-container .outline-button {
  margin-top: 1.5rem;
}

.start-paket-cijene > div {
  border-left: none !important;
}

@media (min-width: 576px) {
  .cijena-big-container {
    flex-direction: row;
  }

  .cijena-big-container .cijena-container:first-of-type {
    padding-right: 1rem;
  }

  .cijena-big-container .cijena-container:last-of-type {
    border-left: 0.063rem solid #d6d6db;
    padding-left: 1rem;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
}

/* Podaci o platitelju */

.podaci-left-section {
  width: 100%;
  order: 3;
}

.podaci-right-section,
.ponuda-right-section {
  width: 100%;
}

@media (min-width: 992px) {
  .podaci-left-section,
  .ponuda-right-section {
    width: 100%;
    order: initial;
  }
}

.podaci-right-section,
.ponuda-right-section {
  background-color: #f2f2f3;
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
}

.podaci-right-section p {
  width: 100%;
}

.podaci-forma {
  margin-top: 2rem;
}

.podaci-forma label {
  font-weight: 400;
  font-family: "GolosText";
}

.return-button {
  justify-content: flex-start;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.return-button:hover span {
  mix-blend-mode: screen;
}

@media (min-width: 992px) {
  .podaci-left-section {
    width: 33.3333%;
  }

  .podaci-right-section,
  .ponuda-right-section {
    width: 66.66666%;
  }

  .podaci-right-section p {
    width: 50%;
  }

  .return-button {
    margin-bottom: 0;
  }
}

.return-button span {
  background-image: url("./assets/images/return.svg");
  width: 2rem;
  height: 2rem;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 1rem;
}

.podaci-left-section .pretplata-container {
  background-color: #ebf9f0;
}

.odabrani-paket-container {
  display: flex;
  flex-direction: row;
  padding-bottom: 1.875rem;
  border-bottom: 0.063rem solid #d6d6db;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.5rem;
}

.odabrani-paket-header {
  display: flex;
  flex-direction: column;
}

.odabrani-paket-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.75rem;
}

.odabrani-paket-container h3 {
  font-size: 2.125rem;
}

.odabrani-paket-title .cijena-broj {
  font-size: 2.25rem;
  line-height: 1;
}

/* Ponuda */

.ponuda-right-section {
  height: 100%;
}

.ponuda-right-section .info,
.ponuda-right-section .osnovni-podaci {
  padding-bottom: 2rem;
  border-bottom: 0.063rem solid #d6d6db;
  display: flex;
  flex-direction: column;
}

/* .ponuda-right-section .osnovni-podaci {
  margin-top: 2rem;
} */

.podaci-barkod-container {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.podaci-barkod-container div {
  width: 100%;
}

.podaci-barkod-container .podaci-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
  border-bottom: 0.063rem solid #d6d6db;
}

.podaci-container p {
  padding-bottom: 0;
}

.podaci-barkod-container .barkod-container {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.barkod-container span {
  align-self: center;
}

.barkod-container .button {
  margin-top: 2rem;
}

.ponuda-slanje {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0.063rem solid #d6d6db;
}

@media (min-width: 765px) {
  .podaci-barkod-container {
    flex-direction: row;
  }

  .podaci-barkod-container .podaci-container {
    padding-right: 2rem;
    border-right: 0.063rem solid #d6d6db;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .podaci-barkod-container .barkod-container {
    margin-top: 0;
    padding-left: 2rem;
  }

  .barkod-container .button {
    margin-top: auto;
  }
}

/* .zahvala-podaci-container {
  width: 100%;
  background-color: #F7F7F8;
  border-radius: 0.5rem;
  padding: 2.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.podaci-za-placanje-container {
  border-bottom: 0.063rem solid #D6D6DB;
  padding-bottom: 1rem;
}

.barkod-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  padding-bottom: 2rem;
} */

/**/

.right .main-zakon-header .zakon-preuzmi {
  display: none;
}

.highlight {
  background-color: blue;
}

.find_selected {
  background-color: green;
}

.mt-1-8 {
  margin-top: 1.875rem;
}

.mt-1 {
  margin-top: 1rem;
}

.no-border-top {
  border-top: none !important;
}

/*  Ciscenje zakona  */

.tablica-wrapper {
  -webkit-overflow-scrolling: touch;
  overlay: auto;
  height: auto;
  display: block;
  text-align: left !important;
}

.outer {
  width: 100%;
  overflow: auto;
  position: relative;
}

.inner {
  width: auto;
}

.clanak {
  text-align: center;
}

.img-wrapper .inner > img {
  width: 100%;
  height: initial;
  display: block;
  margin: auto;
}

@media (min-width: 662px) {
  .img-wrapper .inner > img {
    width: initial;
  }
}

.paket-benefiti {
  margin-top: 2rem;
  list-style: none;
}

.pdv-text {
  padding-top: 1rem;
  border-top: 0.063rem solid #d6d6db;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 4rem;
}

.pdv-text p {
  padding-bottom: 0;
}

.pdv-text div a {
  display: inline-block;
}

.more-info-container {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  border-radius: 0.5rem;
  padding: 5rem 1.5rem 1.5rem 1.5rem;
  gap: 2rem;
}

.more-info-container > .more-info-left {
  width: 100%;
}

.more-info-container > .more-info-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  .more-info-container {
    flex-direction: row;
  }

  .more-info-container > .more-info-right {
    width: 66.666%;
  }

  .more-info-container > .more-info-left {
    width: 33.333%;
  }
}

.odabir-container > .text {
  display: none;
}

.odabir-container > .mobile-show {
  display: block;
  /*   white-space: nowrap; */
  font-size: 0.75rem;
  position: absolute;
  top: 120%;
  text-align: center;
}

@media (min-width: 762px) {
  .odabir-container > .text {
    display: block;
  }

  .odabir-container > .mobile-show {
    display: block;
    white-space: nowrap;
    position: initial;
    font-size: 0.875rem;
  }
}

/*  chat   */

.main-zakon-container-chat {
  background-color: #d6d6db;
  color: #242442;
  display: flex;
  padding: 0;
  height: auto;
}

.right.open .main-zakon-container-chat {
  height: 100%;
}

.chat-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 2rem;
  height: 100%;
}

.chat-container .icon {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ffffff;
  padding: 0.125rem;
  border-radius: 99%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-container header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
}

.chat-container header .icon {
  width: 2rem;
  height: 2rem;
}

.chat-container header .icon:hover {
  cursor: pointer;
}

.chat-container .chat-hamburger-inner {
  width: 1.2rem;
  margin: auto;
  height: 100%;
  position: relative;
}

.chat-container header .chat-hamburger-inner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 0.063rem;
  background-color: #252525;
  border-radius: 0.063rem;
  transition: all 0.3s ease;
  transform-origin: center;
}

.chat-container header .chat-hamburger-inner span:nth-child(1) {
  transform: translate(-50%, -0.25rem);
}

.chat-container header .chat-hamburger-inner span:nth-child(2) {
  transform: translate(-50%, 0.25rem);
}

.chat-container header .icon.active span:nth-child(1),
.chat-container header .icon.active span:nth-child(2) {
  top: 50%;
}

.chat-container header .icon.active span:nth-child(1) {
  transform: translateX(-50%) rotate(45deg);
}

.chat-container header .icon.active span:nth-child(2) {
  transform: translateX(-50%) rotate(-45deg);
}

.chat-container .icon img {
  width: auto;
  height: auto;
}

.chat-container .chat-box-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-container .chat-box {
  /*flex-grow: 1;*/
  height: calc(100% - 7.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 0.5rem;
}

.chat-container .item {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  width: 100%;
}

.chat-container .item .icon {
  margin-top: 1.5rem;
}

.chat-container .item.user .icon {
  background-color: #0074e0;
}

.chat-container .item.bot .icon {
  padding-left: 0.188rem;
  padding-right: 0.188rem;
}

.chat-container .msg {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
  font-size: 1rem;
  flex-grow: 1;
  font-size: 0.875rem;
}

.chat-container .msg p {
  padding-bottom: 0.4rem;
}

.chat-container .msg .msg-text {
  word-break: break-word;
}

/* clanak reference links in AI chat - inherit text color, not blue, not bold */
.chat-container .msg .msg-text a.clanak-anchor {
  color: inherit;
  text-decoration: underline;
  font-weight: normal;
}

.chat-container .chat-box-container .small-text {
  font-size: 0.75rem;
  color: rgba(36, 36, 36, 0.5);
}

@media (min-width: 2048px) {
  .chat-container .msg {
    font-size: 0.8rem;
  }

  .chat-container .chat-box-container .small-text {
    font-size: 0.6rem;
  }

  .chat-container .item .icon {
    margin-top: 1.2rem;
  }
}

.chat-container .msg .msg-name {
  font-weight: 600;
}

.chat-container .msg .msg-btns {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  margin-top: 0.4rem;
}

.chat-container .msg .msg-btns button {
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  background-color: inherit;
}

.chat-container .msg .response-count {
  display: flex;
  align-items: center;
}

.chat-container .msg .response-count span {
  margin-left: 0.25rem;
}

.chat-container .input-section {
  position: relative;
  width: 100%;
  height: auto;
  background-color: transparent;
}

.chat-container .chat-character-count {
  padding: 0.5rem 0.8rem;
  text-align: right;
  width: 100%;
}

.chat-container .input-wrapper {
  position: relative;
  height: 5rem;
  z-index: 2;
  width: 100%;
  margin-bottom: 1rem;
}

.chat-container .msg-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.chat-container .textarea-wrapper {
  width: 100%;
  background-color: white;
  padding: 0.8rem 0.75rem 0.4rem 1.5rem;
  box-sizing: border-box;
  z-index: 3;
  border-radius: 2rem;
}

.chat-container .input-wrapper textarea {
  position: relative;
  overflow: hidden;
  resize: none;
  /*min-height: 2.5rem;*/
  max-height: 10rem;
  padding: 0rem 2.375rem 0rem 0rem;
  line-height: 1.5;
  font-size: 1rem;
  border: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 4;
  background: white;
  transition: height 0.2s ease;
  scrollbar-width: thin;
}

.chat-container .input-wrapper textarea::placeholder {
  color: black;
}

.chat-container .send-btn {
  position: absolute;
  bottom: 0.55rem;
  right: 0.75rem;
  z-index: 5;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.chat-container .chat-warning {
  font-family: "Helvetica";
  font-size: 0.75rem;
  color: rgba(36, 36, 36, 0.5);
  padding: 0 1rem;
}

@media (min-width: 2048px) {
  .chat-container .chat-warning {
    font-size: 0.6rem;
  }
}

/* Topic sidebar */

.chat-container .sidebar {
  position: absolute;
  background-color: #d6d6db;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem 0;
  overflow-y: auto;
  z-index: 1000;

  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.chat-container .sidebar.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  z-index: 1000;
}

.chat-container .sidebar ul {
  list-style: none;
  padding: 0;
}

.chat-container .sidebar li {
  margin-bottom: 1rem;
}

.chat-container .sidebar li a {
  display: block;
  width: 100%;
  background-color: rgba(247, 247, 248, 0.5);
  border-radius: 0.25rem;
  padding: 0.75rem;
  text-decoration: none;
}

.chat-container .sidebar li p {
  padding: 0;
}

.chat-container .sidebar .topic-title {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 2048px) {
  .chat-container .sidebar .topic-title {
    font-size: 0.8rem;
  }
}

.chat-container .sidebar-close-btn span:hover {
  cursor: pointer;
}

/* end chat */

.search-overlay {
  transition: 200ms ease-in-out;
}

.search-overlay.active {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #252525;
  opacity: 0.75;
  z-index: 100;
  top: 0;
  transition: 200ms ease-in-out;
}

.no-padding-side {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.right {
  overflow: visible;
}

/* .search-bar-sidebar {
  margin-top: -7.325rem;
} */

@media (min-width: 992px) {
  /* Pull ad-only sidebar up next to search headline.
     When the sidebar is also a preview pane (main-zakon-container-sidebar),
     keep margin at 0 so pop-up/close controls stay visible. */
  .search-bar-sidebar:not(.main-zakon-container-sidebar) {
    margin-top: -7.325rem;
  }
}

.info-link {
  position: relative;
  text-decoration: underline;
}

.info-modal {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 15rem;
  padding: 0.5rem;
  background: #252525e3;
  color: #f7f7f8;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
  white-space: normal;
  font-size: 0.875rem !important;
  line-height: 1.4;
  cursor: default;
}

@media (min-width: 992px) {
  .info-link:hover .info-modal {
    display: block;
  }
}

.status-zakona {
  padding: 0.313rem 0.375rem 0.375rem 0.375rem;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.1;
  font-weight: 500;
  border-radius: 0.25rem;
  width: fit-content;
  align-self: flex-end;
  margin-bottom: 1rem;
  position: relative;
}

@media (min-width: 992px) {
  .status-zakona {
    top: -1.5rem;
    right: -1.5rem;
  }
}

.status-zakona#nepoznat {
  background-color: #d6d6db;
  color: #646473;
}

.status-zakona#na-snazi {
  background-color: #32c065;
}

.status-zakona#prestalo-vaziti {
  background-color: #e25454;
}

.zakon-page h1,
.zakon-page h2,
.zakon-page h3,
.zakon-page h4,
.zakon-page h5,
.zakon-page h6 {
  text-align: center;
}

.main-zakon-container-sidebar {
  background-color: #d6d6db;
}

.main-zakon-container-forma {
  background-color: #f2f2f3 !important;
}

.pane-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1.5rem;
  justify-content: flex-end;
  gap: 1rem;
  position: fixed;
  right: 1rem;
}

@media (min-width: 992px) {
  .pane-buttons-container {
    position: initial;
  }
}

.right-pane-button {
  width: 2rem;
  height: 2rem;
  background-color: #f7f7f8;
  border: 0.063 solid #f7f7f8;
  border-radius: 10rem;
  padding: 0.5rem;
  background-repeat: no-repeat;
  background-position: center;
}

.right-pane-button#pop-up-pane {
  background-image: url(./assets/images/pop-up.svg);
}

.right-pane-button#close-pane {
  background-image: url(./assets/images/close.svg);
}

.zakon-page .right,
.regular-page .right {
  width: 100%;
}

.zakon-page .right.open,
.regular-page .right.open,
.search-page .right.open {
  position: fixed;
  top: 0;
  display: block;
  z-index: 102;
}

.zakon-page .right.open,
.search-page .right.open {
  height: 100%;
  overflow: scroll;
}

@media (min-width: 992px) {
  .zakon-page .right,
  .search-page .right {
    position: sticky;
    /*     height: calc(100vh - 2rem); */
    height: calc(100vh - 10rem);
    overflow-y: auto;
    /*     top: 1rem; */
    top: 6rem;
    width: 33%;
    display: block;
    border-radius: 0.5rem;
  }

  .regular-page .right {
    position: sticky;
    overflow-y: auto;
    top: 6rem;
    width: 33%;
    display: block;
    border-radius: 0.5rem;
  }
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: hidden;
}

.modal-content {
  background: white;
  padding: 1.5rem;
  max-width: 30rem;
  width: 90%;
  border-radius: 0.5rem;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
  font-size: 2.5rem;
}

.modal-close-btn {
  cursor: pointer;
}

.overlay-active nav {
  z-index: 100;
}

.podaci-right-section h3,
.ponuda-right-section h1 {
  font-size: 1.5rem;
  font-weight: 500;
  padding-bottom: 2rem;
}

.home-heading-container h1 {
  color: #646473;
}

.mt-a {
  margin-top: auto;
}

.profil-right-section .content-section {
  height: 100%;
}

.kontakt-forma .text {
  height: 7rem;
}

.error-msg {
  color: #ff0000;
  font-size: 0.667rem;
  position: absolute;
  bottom: -1rem;
  right: 0.25rem;
}

.main-zakon-header h1 {
  padding-top: 0;
}

.main-zakon-header p {
  padding: 0;
  font-weight: 500;
  text-align: center;
}

.notification-wrapper {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 99;
  background-color: #292d3d;
  padding: 1.125rem 1.625rem 1.25rem 1.625rem;
  color: #fff;
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateX(-150%);
  animation: slideIn 0.75s ease forwards;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: space-between;
  max-width: fit-content;
  right: 1rem;
  animation-delay: 500ms;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification-wrapper .text-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  max-width: 36ch;
}

.notification-wrapper .text-container a,
.notification-wrapper .text-container a:hover,
.notification-wrapper .text-container a:visited,
.notification-wrapper .text-container a:focus {
  color: #fff;
}

.notification-wrapper .background-icon {
  background-image: url(./assets/images/notification-info.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 2.5rem;
  height: 2.5rem;
  display: block;
}

.notification-wrapper.notification-info .background-icon {
  background-image: url(./assets/images/notification-info.svg);
}

.notification-wrapper.notification-error .background-icon {
  background-image: url(./assets/images/notification-error.svg);
}

.notification-wrapper.notification-success .background-icon {
  background-image: url(./assets/images/notification-success.svg);
}

.notification-wrapper.notification-warning .background-icon {
  background-image: url(./assets/images/notification-warning.svg);
}

.notification-wrapper .button {
  padding: 0.75rem 1rem 0.813rem 1rem;
  font-size: 0.875rem;
  width: 100%;
}

.notification-wrapper .button-container {
  width: 100%;
}

@media (min-width: 576px) {
  .notification-wrapper {
    flex-direction: row;
    gap: 2.25rem;
    align-items: center;
  }
  .notification-wrapper .button-container {
    width: initial;
  }
}

@media (min-width: 992px) {
  .notification-wrapper {
    bottom: 2rem;
    left: 2rem;
  }
}

.modal .buttons-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.modal h2 {
  padding-right: 2rem;
}

.modal .buttons-container .button {
  width: 7rem;
}

.modal.delete-account .buttons-container .button {
  width: fit-content;
}

.dropdown-text {
  display: inline;
}

@media (max-width: 551px) {
  .dropdown-text {
    display: none;
  }
}

.form-error {
  position: absolute;
  top: 3rem;
  color: #ff0000;
  font-size: 0.75rem;
}

.border-error {
  border: 0.063rem solid #ff0000 !important;
}

.text-error {
  top: 4.5rem;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 0s 600000s,
    color 0s 600000s !important;
}

/* .existing-account-section {
  height: fit-content;
} */

.new-users-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.new-users-div {
  justify-content: end !important;
}

.login-box-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-link {
  display: flex;
  justify-content: center;
}

.cms-section h1 {
  font-size: 1.5rem;
  text-align: center;
}

.cms-text-wrapper {
  position: relative;
  max-height: 20rem;
  overflow: hidden;
}

.cms-text-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;

  background: linear-gradient(to bottom, transparent 0.8rem, #f2f2f3);
}

.right .cms-text-wrapper::before {
  background: linear-gradient(to bottom, transparent 0.8rem, #d6d6db);
}

.disclaimer {
  display: flex;
  gap: 2.25rem;
  margin-top: 5rem;
  background-color: rgba(41, 45, 61, 0.1);
  padding: 1.125rem 1.625rem 1.25rem 1.625rem;
  border-radius: 0.5rem;
}

.upozorenje-text-wrapper img {
  height: 3rem;
  width: fit-content;
}

.upozorenje-text-wrapper,
.upozorenje-buttons-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.upozorenje-buttons-wrapper a {
  height: min-content;
  padding: 0.75rem 1rem 0.813rem 1rem;
  font-weight: 400;
}

.disclaimer-wrapper {
  container-type: inline-size;
  container-name: disclaimer;
}

@container disclaimer (max-width: 800px) {
  .disclaimer {
    flex-direction: column;
  }
}

@container disclaimer (max-width: 500px) {
  .upozorenje-buttons-wrapper {
    flex-direction: column;
  }
}

@container disclaimer (max-width: 280px) {
  .upozorenje-text-wrapper {
    flex-direction: column;
  }

  .upozorenje-buttons-wrapper a {
    white-space: wrap;
    text-align: center;
  }
}

.screen-height {
  height: calc(100vh - 10rem) !important;
}

input:-webkit-autofill {
  animation-name: autofill;
  animation-duration: 0.01s;
}

@keyframes autofill {
  from {
  }
  to {
  }
}

.radio-btns {
  display: flex;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  gap: 0.75rem;
  width: 100%;
  flex-direction: column;
}

@media (min-width: 576px) {
  .radio-btns {
    flex-direction: row;
  }
}

.radio-btns + .form-error {
  position: static;
  display: block;
  margin: -1rem 0.75rem 1.5rem;
}

.radio-btns input[type="radio"],
.radio-btns input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Base button style */
.radio-btn {
  color: rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  padding: 0.65rem 1.125rem 0.75rem 1.125rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  width: 100%;
  flex-direction: column;
  gap: 0.375rem;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.radio-btn img {
  width: auto;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.radio-btn-title {
  white-space: nowrap;
}

.radio-btn-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400 !important;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.55);
  white-space: normal;
  text-align: center;
}

/* Hover / desktop */
.radio-btn:hover {
  background-color: #fff;
  color: #252525;
  border: none;
}

.radio-btn:hover img {
  opacity: 1;
}

/* Checked button */
input[type="radio"]:checked + label {
  background-color: #fff;
  color: #252525;
}

input[type="radio"]:checked + label img {
  opacity: 1;
}

.consent-checks {
  flex-direction: column;
}

.consent-check {
  position: relative;
  width: 100%;
}

.consent-checks .radio-btn {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  transition: none;
  border: 0.063rem solid transparent;
}

.consent-checks .button.radio-btn:hover,
.consent-check input[type="checkbox"]:checked ~ label,
.consent-check input[type="checkbox"]:checked ~ label:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
  border: 0.063rem solid transparent;
}

.consent-check-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}

.consent-checks .radio-btn-title {
  white-space: normal;
  text-align: left;
}

.consent-checks .radio-btn-hint {
  margin-top: 0;
  text-align: left;
}

.consent-checks .form-error {
  position: static;
  top: auto;
}

.consent-checks a {
  text-decoration: underline;
}

/* Checked + hover ONLY on devices that can hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  input[type="radio"]:checked + label:hover {
    background-color: #fff;
    color: #252525;
  }

  input[type="radio"]:checked + label:hover img {
    opacity: 1;
  }
}

.payment-radio .radio-btn {
  padding: 1.125rem;
  gap: 0.375rem;
}