:root {
  --font_family: "Roboto Mono";
  --font_size: 13px;
  --font_boja: rgb(50, 50, 50); /* 484848 - svetla tema; CCCCCC - tamna tema */
  --pozadina_boja: rgb(240, 240, 240); /* EEEEEE - svetla tema; 333333 - tamna tema   rgb(204, 204, 204)*/
  --nav_font_boja: #282828; /* 282828 - svetla tema; CCCCCC - tamna tema */
  --nav_pozadina_boja: #AAAAAA; /* AAAAAA - svetla tema; 282828 - tamna tema */

  --dugme_pozadina_boja: rgb(80, 80, 80);
  --dugme_tekst_boja: rgb(240, 240, 240);


  --footer_pozadina_boja: rgb(235, 235, 235);

  --blok_pozadina_boja: rgb(245, 245, 245);
  --blok_senka_1: rgba(0, 0, 0, 0.16);
  --blok_senka_2: rgba(0, 0, 0, 0.12);

  --vremenska_linija_sadrzaj_pozadina_boja: rgb(240, 240, 240);



  /* NOTE: INTRO Light */
  /*
  --intro_pozadina_boja_svetlije: rgb(75, 75, 90);
  --intro_pozadina_boja_tamnije: rgb(50, 50, 50);
  --intro_tekst_boja: rgb(240, 240, 240);
  --intro_tekst_boja_invert: rgb(50, 50, 50);
  --intro_simboli_boja: rgba(255, 255, 255, 0.8);
  --intro_balon_boja: rgba(255, 255, 255, 0.6);
  --intro_foto_boja: rgba(200, 200, 200, 255);
  */


  /*
  --intro_pozadina_boja_svetlije: rgb(175, 175, 190);
  --intro_pozadina_boja_tamnije: rgb(150, 150, 150);
  */
  --intro_pozadina_boja_svetlije: rgb(20, 20, 30);
  --intro_pozadina_boja_tamnije: rgb(10, 10, 45);
  --intro_tekst_boja: rgb(240, 240, 240);
  --intro_tekst_boja_invert: rgb(50, 50, 50);
  --intro_simboli_boja: rgba(255, 255, 255, 0.8);
  --intro_balon_boja: rgba(255, 255, 255, 0.6);
  --intro_foto_boja: rgba(200, 200, 200, 255);
}

button {
  padding: 10px 30px;
  color: var(--dugme_tekst_boja);
  background-color: var(--dugme_pozadina_boja);
  border: none;
  border-radius: 5px;
  opacity: 90%;
  cursor: pointer;
}
button:hover {
  opacity: 100%;
  transform: scale(1.1);
}

@font-face {
  font-family: "Roboto Mono";
  src: url("font/Roboto_Mono.ttf");
}


@font-face {
    font-family: 'Material Design Icons';
    src: url("materialdesignicons-webfont.woff2") format("woff2");
    font-weight:normal;
    font-style:normal
}
.mdi {
    font: normal normal normal 24px/1 "Material Design Icons";
    display: inline-block;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.mdi_icon {
  font-size: 20px;
  transform: translateY(3px);
}
.mdi-rotate-45 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.mdi-rotate-90 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.mdi-rotate-135 {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
.mdi-rotate-180 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.mdi-rotate-225 {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}
.mdi-rotate-270 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
.mdi-rotate-315 {
    -webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg);
}
.mdi-flip-h {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
.mdi-flip-v {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
.mdi-spin {
    -webkit-animation: mdi-spin 2s infinite linear;
    animation: mdi-spin 2s infinite linear;
 }
 @-webkit-keyframes mdi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
 }
 @keyframes mdi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
 }
 .neselektuj {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

* {
  box-sizing: border-box;
}

body {
  /* NOTE: POSITION */
  position: relative;
  height: 100vh;
  width: 100vw;
  /* NOTE: DISPLAY */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  /* NOTE: BOXING */
  margin: 0;
  border: 0;
  padding: 0;
  /* NOTE: STYLE */
  background-color: var(--pozadina_boja);
  color: var(--font_boja);
  /* NOTE: FONT */
  font-family: "Roboto Mono";
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.4px;
}

header {
  /* NOTE: POSITION */
  /* NOTE: DISPLAY */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-basis: 40px;
  /* NOTE: BOXING */
  /* NOTE: STYLE */
  /* NOTE: FONT */
}

main {
  /* NOTE: POSITION */
  position: relative;
  height: 100%;
  /* NOTE: DISPLAY */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  /* NOTE: BOXING */
  flex-grow: 1;
  /* NOTE: STYLE */
  overflow: auto;
  /* NOTE: FONT */
}

footer {
  /* NOTE: POSITION */
  z-index: 10;
  /* NOTE: DISPLAY */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-basis: 40px;
  /* NOTE: BOXING */
  padding: 10px;
  /* NOTE: STYLE */
  background-color: var(--footer_pozadina_boja);
  /* NOTE: FONT */
}

nav {
  /* NOTE: POSITION */
  position: fixed;
  top: 0;
  right: 0;
  /*height: 30px;*/
  z-index: 9;
  /* NOTE: DISPLAY */
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* NOTE: BOXING */
  padding: 5px 10px;
  /* NOTE: STYLE */
  background-color: transparent;
  /* NOTE: FONT */
  font-size: 1.3em
}
nav span {
  cursor: pointer;
}
nav span:hover {
  transform: scale(1.2);
}
nav img:hover {
  transform: scale(1.2);
}

a:link {
  color: inherit;
  text-decoration: none;
}
a:visited {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
  text-decoration: underline;
}
a:active {
  color: inherit;
  text-decoration: underline;
}

img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.levo {
  /* NOTE: POSITION */
  position: relative;
  width: 420px;
  height: calc(100% - 4px);
  /* NOTE: DISPLAY */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: stretch;
  /* NOTE: BOXING */
  /* NOTE: STYLE */
  /* NOTE: FONT */
}
.desno {
  /* NOTE: POSITION */
  position: relative;
  width: 800px;
  height: calc(100% - 20px);
  /* NOTE: DISPLAY */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: stretch;
  /* NOTE: BOXING */
  margin: 10px 0;
  /* NOTE: STYLE */
  /* NOTE: FONT */
}

.desno ul {
  list-style-type: circle;
  padding-left: 16px;
  margin: 0;
}
.desno ul ul {
  list-style-type: "- ";
}
.desno table {
  width: 100%;
  border-collapse: collapse;
}
.desno table td {
  padding-bottom: 5px;
  padding-top: 5px;
}

#desno_nosac {
  margin-top: 30px;
  border: 1px solid var(--blok_pozadina_boja);
  border-top: 0;
  border-radius: 5px;
}
#desno_izbor {
  display: flex;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  gap: 2px;
}
#desno_izbor span {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  background-color: black;
  border-radius: 10px 10px 0 0;
  color: var(--font_boja);
  background-color: var(--blok_pozadina_boja);
  opacity: 80%;
}
#desno_izbor .aktivan {
  color: var(--dugme_tekst_boja);
  background-color: var(--dugme_pozadina_boja);
}
#desno_izbor span:hover {
  opacity: 100%;
}
#radno_iskustvo {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
#vremenska_linija {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
#vremenska_linija::after {
  content: '';
  position: absolute;
  width: 2px;
  height: calc(100% - 20px);
  background-color: rgba(175, 175, 175, 255);
  top: 10px;
  bottom: 0;
  left: 10px;
  margin-left: 9px;
}
#vremenska_linija article {
  margin-left: 45px;
  position: relative;
  width: calc(100% - 55px);
}
#vremenska_linija article::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  left: -37px;
  background-color: var(--blok_pozadina_boja);
  border: 2px solid rgba(175, 175, 175, 255);
  top: 20px;
  border-radius: 50%;
  z-index: 1;
  margin: 0 5px;
}
#vremenska_linija .radna_pozicija {
  font-size: 1.2em;
}
#vremenska_linija ul {
  list-style-type: circle;
  padding-left: 16px;
  margin: 0;
}
#vremenska_linija table {
  width: 100%;
  border-collapse: collapse;
}
#vremenska_linija table td {
  padding-bottom: 5px;
  padding-top: 5px;
}
.vremenska_linija_sadrzaj::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 17px;
  width: 0;
  z-index: 1;
  left: -10px;
  border: medium solid var(--blok_pozadina_boja);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--blok_pozadina_boja) transparent transparent;
}
.vremenska_linija_sadrzaj::after {
  content: " ";
  height: 0;
  position: absolute;
  top: 17px;
  width: 0;
  z-index: 0;
  left: -12px;
  border: medium solid transparent;
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--blok_senka_2) transparent transparent;
}

.blok_nosac {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.blok_nosac::-webkit-scrollbar {
  display: none;
}
#opsti_podaci_adresa {
  cursor: pointer;
}

article {
  width: calc(100% - 20px);
  margin: 10px;
  padding: 10px 30px;
  box-shadow: 0 2px 5px 0 var(--blok_senka_1), 0 2px 10px 0 var(--blok_senka_2);
  border-radius: 5px;
  background-color: var(--blok_pozadina_boja);
}

.tabela_lista td {
  padding: 2px 10px;
  align-content: baseline;
}
.tabela_lista th:first-child, .tabela_lista td:first-child {
  width: 25px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.modal_sadrzaj {
  background-color: var(--blok_pozadina_boja);
  max-width: 80%;
  max-height: 80%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 50px;
  border-radius: 5px;
}
.modal_zatvori {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2em;
  opacity: 50%;
}
.modal_zatvori:hover {
  opacity: 100%;
  transform: scale(1.2);
}

.modal_dugmici {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
}
.modal_dugmici button {
  cursor: pointer;
  padding: 5px 20px;
  margin: 0 5px;
}
#fotografija_nosac {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  min-height: 300px;
  padding: 0;
  background-color: #E5E2E9;
}
#fotografija_foto {
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 5px;
}
#fotografija_pozadina_dugme {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}
#qr_kod {
  cursor: pointer;
  position: absolute;
  top: 65px;
  right: 20px;
  font-size: 3em;
}
#pdf {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 3em;
}
#ime_prezime {
  position: absolute;
  bottom: 10px;
  left: 25px;
  font-size: 2.3em;
  font-weight: bold;
  color: rgb(50, 50, 50);
}











@keyframes blink {
  50% {
    border-color: transparent;
  }
}







.zastavice {
  font-size: 2em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.zastavice img {
  width: 20px;
  height: 15px;
  cursor: pointer;
}






/* NOTE: INTRO */
#modal_intro {
  display: none;
}

#intro_sadrzaj {
  max-width: 100vw;
  max-height: 100vh;
  width: 80%;
  height: 80%;
  justify-content: flex-start;
  padding-bottom: 90px;
  background: linear-gradient(to bottom right, var(--intro_pozadina_boja_tamnije), var(--intro_pozadina_boja_svetlije) 35%), url("sky.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: local;
  background-size: contain;
  background-blend-mode: color;
  color: var(--intro_tekst_boja);
}
#intro_fotografija_nosac {
  margin: 50px;
  margin-bottom: 10px;
  border-radius: 50%;
  width: 192px;
  height: 192px;
}
#intro_fotografija_foto {
  width: 200px;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 4px double var(--intro_foto_boja);
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.7em;
  white-space: nowrap;
  transform: translate(-4px, -4px);
}
#intro_tekst {
  max-height: 100%;
  max-width: 80%;
  color: var(--intro_tekst_boja);
  animation: blink 0.7s steps(2, start) infinite;
  overflow: auto;
  font-size: 1.7em;
  white-space: normal;
}
#intro_tekst::-webkit-scrollbar {
  display: none;
}
#intro_format {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#intro_format span {
  width: 50px;
  border: 1px solid rgba(50, 50, 50, 255);
  border-radius: 5px;
  padding: 2px 10px;
  background-color: var(--intro_simboli_boja);
  cursor: pointer;
  color: var(--intro_tekst_boja_invert);
  font-size: 1em;
  text-align: center;
}
.intro_simboli {
  color: var(--intro_simboli_boja);
  opacity: 50%;
  cursor: pointer;
  font-size: 2em;
}
.intro_simboli:hover {
  opacity: 100%;
  transform: scale(1.2);
}
#intro_prethodno {
  position: absolute;
  bottom: 40px;
  left: calc(50% - 100px);
  display: none;
  font-size: 4em;
}
#intro_sledece {
  position: absolute;
  bottom: 40px;
  right: calc(50% - 100px);
  font-size: 4em;
}
#intro_ne_prikazuj_tekst {
  font-size: 1em;
}
#intro_ne_prikazuj_label {
  position: absolute;
  bottom: 40px;
  left: 40px;
  display: block;
  align-items: center;
  font-size: 1em;
}
#intro_ne_prikazuj_label input {
  display: none;
}
#intro_ne_prikazuj_label .checkbox_icon {
  color: var(--intro_simboli_boja);
  transition: color 0.3s, transform 0.3s;
  font-size: 24px;
}
#intro_ne_prikazuj_label input:checked + .checkbox_ikona {
  transform: scale(1.2);
}
#intro_ne_prikazuj_label input:checked + .checkbox_ikona::before {
  /*content: "󰱒";*/
  color: var(--intro_simboli_boja);
  opacity: 100%;
}
#intro_ne_prikazuj_label input:not(:checked) + .checkbox_ikona::before {
  /*content: "󰄱";*/
  color: var(--intro_simboli_boja);
  opacity: 50%;
}
#intro_zastavice {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 2em;
}
#intro_zastavice img {
  width: 30px;
  height: 22.5px;
  cursor: pointer;
  opacity: 50%;
}
#intro_zastavice img:hover {
  transform: scale(1.2);
  opacity: 100%;
}
#intro_zvuk {
  position: absolute;
  top: 20px;
  right: 60px;
}
#intro_upomoc {
  position: absolute;
  top: 20px;
  right: 100px;
}
.intro_pomoc_balon {
  position: absolute;
  padding: 10px 20px;
  background-color: white;
  color: var(--intro_tekst_boja_invert);
  opacity: 75%;
}
.intro_pomoc_pokazivac {
  position: absolute;
  color: var(--intro_simboli_boja);
  opacity: 80%;
  transition: transform 0.2s;
  font-size: 2em;
}
#intro_zvuk_balon {
  top: 55px;
  right: 100px;
  border-radius: 5px 0 5px 5px;
}
#intro_zvuk_pokazivac {
  top: 39px;
  right: 84px;
  animation: pomerajZatvoriEfekat 1s infinite alternate;
}
#intro_zatvori_balon {
  top: 101px;
  right: 80px;
  border-radius: 5px 0 5px 5px;
}
#intro_zatvori_pokazivac {
  top: 85px;
  right: 63px;
  animation: pomerajZatvoriEfekat 1s infinite alternate;
}
#intro_zastavice_balon {
  top: 66px;
  left: 117px;
  border-radius: 0 5px 5px 5px;
}
#intro_zastavice_pokazivac {
  top: 50px;
  left: 100px;
  animation: pomerajZastaviceEfekat 1s infinite alternate;
}
#intro_ne_prikaz_balon {
  bottom: 83px;
  left: 82px;
  border-radius: 5px 5px 5px 0;
}
#intro_ne_prikaz_pokazivac {
  bottom: 67px;
  left: 64px;
  display: inline-block;
  animation: pomerajNePrikazEfekat 1s infinite alternate;
}
#intro_nastavi_balon {
  bottom: 104px;
  left: calc(50% - 10px);
  transform: translate(50%);
  border-radius: 5px;
}
#intro_nastavi_pokazivac {
  bottom: 72px;
  right: calc(50% - 97px);
  display: inline-block;
  animation: pomerajNastaviEfekat 1s infinite alternate;
}



#intro_format_balon {
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}
#intro_format_pokazivac {
  top: 55px;
  left: calc(50% - 10px);
  display: inline-block;
  animation: pomerajNastaviEfekat 1s infinite alternate;
}





#intro_visina_indikator {
  position: absolute;
  bottom: 70px;
  right: 30px;
  display: none;
  font-size: 3em;
  opacity: 50%;
  color: tomato;
  cursor: inherit;
}
@keyframes pomerajZatvoriEfekat {
  0% {
    transform: translate(0, 0); /* Početna pozicija */
  }
  100% {
    transform: translate(10px, -10px); /* Pomeranje ka gore-levo za 10px */
  }
}
@keyframes pomerajZastaviceEfekat {
  0% {
    transform: translate(0, 0); /* Početna pozicija */
  }
  100% {
    transform: translate(-10px, -10px); /* Pomeranje ka gore-levo za 10px */
  }
}
@keyframes pomerajNePrikazEfekat {
  0% {
    transform: translate(0, 0); /* Početna pozicija */
  }
  100% {
    transform: translate(-10px, 10px);
  }
}
@keyframes pomerajNastaviEfekat {
  0% {
    transform: translate(0, 0); /* Početna pozicija */
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes pomerajZvukEfekat {
  0% {
    transform: translate(0, 0); /* Početna pozicija */
  }
  100% {
    transform: translateX(-10px);
  }
}








#forma_pdf input[type="radio"] {
  display: none;
}
#forma_pdf .mdi {
  font-size: 1em;
  cursor: pointer;
}
#forma_pdf label {
  cursor: pointer;
}
/* */