/**
* GTGwebShop glavna css datoteka
*
* @author Danijel Galić
* @copyright 2019 Grafotisak d.o.o.
* @license
*
* @link http://www.grafotisak.com
*
* @since 0.0.2 GTGwebShop alpha
*
* @version 1.0
*/
body {position: relative; background-color: var(--boja-pozadina); height: auto; min-height: 100vh; width: 100vw; font-family: 'GTGwebShop', sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--boja-tekst); overflow: hidden auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
body.puni_zaslon {position: initial;}
a {position: relative; color: var(--boja-link);}
a:hover {text-decoration: none;}
a:after {content: ''; position: absolute; display: block; background: var(--boja-domena); left: 0; bottom: 0; height: 1px; width: 100%; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
a:hover:after {opacity: 100%;}
iframe {border: 0;}
table {border-spacing: 0;}
svg {touch-action: none;}
*::selection, *::-moz-selection {background: var(--boja-domena); color: var(--boja-bijela);}
.gtm_nojs {display: none; visibility: hidden; height: 0; width: 0;}

/** animacije **/
@-webkit-keyframes GumbAktivno {
    from {transform: scale(0); opacity: 1;} to {transform: scale(10); opacity: 0;}
}
@keyframes GumbAktivno {
    from {transform: scale(0); opacity: 1;} to {transform: scale(10); opacity: 0;}
}
@-webkit-keyframes kontrolni_okvir_ukljuci {
    0% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;}
    50% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;}
    100% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;}
}
@keyframes kontrolni_okvir_ukljuci {
    0% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;}
    50% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;}
    100% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;}
}
@-webkit-keyframes kontrolni_okvir_iskljuci {
    0% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;}
    25% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;}
    50% {margin-top: -3px; margin-left: 7px; height: 0; width: 0; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
    51% {margin-top: -1px; margin-left: -1px; height: 20px; width: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 10px inset; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {margin-top: 0; margin-left: -1px; height: 20px; width: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
}
@keyframes kontrolni_okvir_iskljuci {
    0% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;}
    25% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;}
    50% {margin-top: -3px; margin-left: 7px; height: 0; width: 0; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
    51% {margin-top: -1px; margin-left: -1px; height: 20px; width: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 10px inset; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {margin-top: 0; margin-left: -1px; height: 20px; width: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
}
@-webkit-keyframes valovi_ukljuci {
    0% {opacity: 0.5;}
    100% {opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13);}
}
@keyframes valovi_ukljuci {
    0% {opacity: 0.5;}
    100% {opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13);}
}
@-webkit-keyframes valovi_iskljuci {
    0% {opacity: 0.5;}
    100% {opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13);}
}
@keyframes valovi_iskljuci {
    0% {opacity: 0.5;}
    100% {opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13);}
}
@-webkit-keyframes disanje_akcija {
    50% {border: 1px solid var(--boja-crvena); -webkit-box-shadow: 0 0 3px 3px var(--boja-crvena-p); -moz-box-shadow: 0 0 3px 3px var(--boja-crvena-p); box-shadow: 0 0 3px 3px var(--boja-crvena-p);}
}
@keyframes disanje_akcija {
    50% {border: 1px solid var(--boja-crvena); -webkit-box-shadow: 0 0 3px 3px var(--boja-crvena-p); -moz-box-shadow: 0 0 3px 3px var(--boja-crvena-p); box-shadow: 0 0 3px 3px var(--boja-crvena-p);}
}
@-webkit-keyframes radio_animacija {
    0% {box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);}
    50% {box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.1);}
    100% {box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);}
}
@keyframes radio_animacija {
    0% {box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);}
    50% {box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.1);}
    100% {box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);}
}

/** kontrole **/
::placeholder {font-style: italic; color: var(--boja-placeholder);}
:-ms-input-placeholder {font-style: italic; color: var(--boj-placeholder);}
::-ms-input-placeholder {font-style: italic; color: var(--boja-placeholder);}
button, .gumb {position: relative; display: block; background-color: var(--boja-druga-domena); background-position: center; padding: 12px 30px; height: 40px; color: var(--boja-tekst); border-width: 1px; border-style: solid; border-radius: 3px; border-color: var(--boja-granica-svjetlije); cursor: pointer; outline: none !important; overflow: hidden;}
button:after, .gumb:after {content: ''; display: none; position: absolute; background-color: rgba(0, 0, 0, 0.3); top: 10%; left: 10%; margin-top: -50px; margin-left: -50px; height: 100px; width: 100px; border-radius: 50%; opacity: 0; animation: GumbAktivno 1s;}
button:focus:not(:active):after, .gumb:focus:not(:active):after {display: block;}
button.mali, .gumb.mali {padding: 8px 20px; height: 30px;}
button.ikona, .gumb.ikona {display: inline-flex;}
button.ikona > svg, .gumb.ikona > svg {fill: var(--boja-domena); height: 15px; width: 15px;}
button.ikona > span, .gumb.ikona > span {text-indent: 5px;}
button.ikona[data-boja] > svg, .gumb.ikona > svg {fill: var(--boja-bijela);}
.gumb {display: inline-block;}
.gumb:hover {text-decoration: none;}
input {font-size: 0.8rem; color: var(--boja-tekst); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
input[type="number"] {-moz-appearance: textfield; appearance: textfield; margin: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
input[type="color"] {margin: 5px; padding: 3px !important;}
label.unos {position: relative; display: grid; grid-template-columns: 30px auto; grid-gap: 0;}
label.unos svg {grid-column: 1 / 2; grid-row: 1 / 2; padding: 5px; height: 30px; width: 30px;}
label.unos input {grid-column: 2 / 3; grid-row: 1 / 2; padding: 8px; height: 30px; width: 100%; border-width: 0 0 1px 0 !important; border-style: solid !important; border-color: var(--boja-granica-svjetlije) !important;}
label.unos input.dodano {background-color: var(--boja-domena); color: var(--boja-bijela);}
label.unos input.dodano + span.naslov {background-color: transparent;}
label.unos input.dodano:focus + span.naslov, label.unos input.dodano:not(:placeholder-shown) + span.naslov {top: -14px;}
label.unos input.dodano_nema_stanje {background-color: var(--boja-crvena); color: var(--boja-bijela);}
label.unos input.dodano_nema_stanje + span.naslov {background-color: transparent;}
label.unos input.dodano_nema_stanje:focus + span.naslov, label.unos input.dodano_nema_stanje:not(:placeholder-shown) + span.naslov {top: -14px;}
label.unos input:focus {outline: none;}
label.unos input:invalid {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
label.unos > span.naslov {grid-column: 2 / 3; grid-row: 1 / 2; justify-content: left; display: flex; position: absolute; background-color: var(--boja-bijela); top: 7px; width: 100%; font-size: 0.8rem; color: var(--boja-placeholder); pointer-events: none; transition: 350ms ease top, 350ms ease font-size;}
label.unos > span.naslov svg {fill: green; padding: 2px; height: 15px; width: 15px; opacity: 0;}
label.unos input:focus + span.naslov svg, label.unos input:valid:not(:placeholder-shown) + span.naslov svg {height: 12px; width: 12px;}
label.unos input:valid + span.naslov svg {opacity: 1;}
label.unos input:focus + span.naslov, label.unos input:not(:placeholder-shown) + span.naslov {top: -10px; background: transparent; font-size: 0.7rem;}
label.unos input:focus:invalid:not(:placeholder-shown) + span.naslov, label.unos input:invalid:not(:placeholder-shown) + span.naslov {color: red;}
label.unos input ~ svg {fill: var(--boja-placeholder);}
label.unos input:focus:invalid:not(:placeholder-shown) ~ svg, label.unos input:invalid:not(:placeholder-shown) ~ svg {fill: red;}
label.unos input:disabled {background-color: var(--boja-bijela); cursor: not-allowed;}
label.unos span.granica {grid-column: 2 / 3; grid-row: 1 / 2; position: absolute; display: block; bottom: 0; width: 100%}
label.unos span.granica:before, span.granica:after {content: ''; position: absolute; bottom: 0; height: 2px; width: 0; transition: 350ms ease width;}
label.unos span.granica:before {left: 50%;}
label.unos span.granica:after {right: 50%;}
label.unos input:focus ~ span.granica:before, label.unos input:focus ~ span.granica:after {width: 50%;}
label.unos input:invalid:not(:placeholder-shown) ~ span.granica:before, label.unos input:invalid:not(:placeholder-shown) ~ span.granica:after {background-color: red; width: 50%;}
label.unos span.upozorenje {grid-column: 2 / 3; grid-row: 2 / 3; font-size: 0.7rem;}
label.unos span.upozorenje:after {content: 'Polje nije ispravno'; opacity: 0; color: red;}
label.unos input:invalid:not(:placeholder-shown) ~ span.upozorenje:after {opacity: 1;}
label.unos span.pomoc {grid-column: 2 / 3; grid-row: 3 / 4; font-size: 0.7rem; font-style: italic;}

label.select {position: relative; display: block;}
label.select select {position: relative; background-color: transparent; padding: 8px 8px 8px 4px; width: 100%; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.12); appearance: none; -webkit-appearance:none}
label.select select:focus {border-bottom: 1px solid rgba(0, 0, 0, 0); outline: none;}
label.select:after {content: ''; position: absolute; top: 10px; right: 7px; padding: 0; height: 0; width: 0; border-top: 6px solid var(--boja-granica-svjetlije); border-left: 6px solid transparent; border-right: 6px solid transparent; pointer-events: none;}
label.select .select-odaberite {position: absolute; top: 0; left: 0; color: var(--boja-placeholder); pointer-events: none; transition: 350ms ease top, 350ms ease font-size;}
label.select select:focus ~ .select-odaberite, label.select select:valid ~ .select-odaberite, label.select select:focus ~ .select-odaberite {top: -20px; font-size: 0.7rem;}
label.select .select-granica {position: relative; display: block; width: auto;}
label.select .select-granica:before, label.select .select-granica:after {content: ''; position: absolute; bottom: 1px; height: 2px; width: 0; transition: 350ms ease width;}
label.select .select-granica:before {left: 50%;}
label.select .select-granica:after {right: 50%;}
label.select select:focus ~ .select-granica:before, label.select select:focus ~ .select-granica:after {width: 50%;}
label.select .select-odabrano {position: absolute; top: 25%; left: 0; height: 60%; width: 100px; opacity: 0.5; pointer-events: none;}

label.tekst {position: relative; display: block; margin-top: 10px;}
label.tekst textarea {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23e2e2e2' d='M630.1 206.8c-32.7 8.4-77.1 30.8-108.7 49.6-14.7 8.8-29.9 17.9-41.5 23.4-31.3 15.2-58.3 28.2-84.1 28.2-12.9 0-23-4.3-29.9-12.7-11.3-13.8-11.3-35.3-7.9-63.3 3.3-26.9.6-47.8-7.6-57.3-4.4-5-10-6.9-18.7-6.3C307 170 257 210.8 169.6 300.9l-54.4 56 70-187.6c11.8-31.6 3.6-66.1-20.9-87.8C145 64.3 112 54.3 77.3 78L3.5 127.8c-3.5 2.3-4.5 7-2.5 10.6l9.2 16.2c2.3 4.1 7.6 5.3 11.5 2.7L97.5 106c6.6-4.5 14-6.8 21.4-6.8 9.1 0 17.6 3.4 24.8 9.8 13.2 11.7 17.6 30.2 11.3 47.1L55.2 423.7c-1.9 5.2-1 12.6 2.2 17.7 2.4 3.7 6.6 6.1 11.3 6.6 4.9.3 9.7-1.4 13-4.9C125 396.8 239.5 278.4 298 228.4l20.4-17.4c3.4-2.9 8.5-.3 8.2 4.1l-2.1 27.9c-2 27.3-2.4 55.9 16.8 78.6 12.4 14.5 30.7 21.9 54.6 21.9 32.7 0 64.1-15.1 97.3-31.1 10.2-4.9 24.9-14.1 39.2-23 30.9-19.3 72.3-40.5 101.8-47.7 3.5-.9 5.9-4 5.9-7.6v-17.3c-.1-7.4-5-11.2-10-10z' class=''%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; padding: 8px; height: 100px; width: 100%; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.12); resize: none;}
label.tekst textarea:focus {outline: none;}
label.tekst .naslov {position: absolute; top: 7px; left: 0; width: 100%; font-size: 0.8rem; color: var(--boja-placeholder); pointer-events: none; transition: 350ms ease top, 350ms ease font-size;}
label.tekst textarea:focus + span.naslov, label.tekst textarea:not(:placeholder-shown) + span.naslov {top: -10px; background: transparent; font-size: 0.7rem;}
label.tekst textarea:focus:invalid:not(:placeholder-shown) + span.naslov, label.tekst textarea:invalid:not(:placeholder-shown) + span.naslov {color: red;}
label.tekst .granica {position: relative; display: block; width: auto;}
label.tekst .granica:before, label.tekst .granica:after {content: ''; position: absolute; bottom: 1px; height: 2px; width: 0; transition: 350ms ease width;}
label.tekst .granica:before {left: 50%;}
label.tekst .granica:after {right: 50%;}
label.tekst textarea:focus ~ .granica:before, label.tekst textarea:focus ~ .granica:after {width: 50%;}

label.kontrolni_okvir {display: grid; grid-template-columns: 20px auto; grid-gap: 10px; height: auto; width: auto; cursor: pointer; -webkit-transform: translateZ(0); transform: translateZ(0);}
label.kontrolni_okvir input[type=checkbox] {display: none; overflow: hidden; pointer-events: none; opacity: 0; z-index: -1;}
label.kontrolni_okvir span.kontrolni_okvir {grid-column: 1 / 2; grid-row: 1 / 2; position: relative; display: inline-block; height: 20px;}
label.kontrolni_okvir span.kontrolni_okvir:before {content: ""; position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 8px; left: 8px; height: 4px; width: 4px; border-radius: 100%; z-index: 1;}
label.kontrolni_okvir span.kontrolni_okvir .ukljuceno {position: relative; display: inline-block; height: 20px; width: 20px; border: 1px solid; border-radius: 2px; overflow: hidden; z-index: 1;}
label.kontrolni_okvir span.kontrolni_okvir .ukljuceno:before {content: ""; position: absolute; display: block; margin-top: -2px; margin-left: 7px; height: 0; width: 0; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: kontrolni_okvir_iskljuci 0.3s forwards ease-out; animation: kontrolni_okvir_iskljuci 0.3s forwards ease-out;}
label.kontrolni_okvir input[type=checkbox]:focus + span.kontrolni_okvir .ukljuceno:after {opacity: 0.2;}
label.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno:before {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; -webkit-animation: kontrolni_okvir_ukljuci 0.3s forwards ease-out; animation: kontrolni_okvir_ukljuci 0.3s forwards ease-out;}
label.kontrolni_okvir input[type=checkbox]:not(:checked) + span.kontrolni_okvir:before {-webkit-animation: valovi_iskljuci 700ms forwards ease-out; animation: valovi_iskljuci 700ms forwards ease-out;}
label.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir:before {-webkit-animation: valovi_ukljuci 700ms forwards ease-out; animation: valovi_ukljuci 700ms forwards ease-out;}
label.kontrolni_okvir input[type=checkbox]:not(:checked) + span.kontrolni_okvir .ukljuceno:after {-webkit-animation: valovi_iskljuci 700ms forwards ease-out; animation: valovi_iskljuci 700ms forwards ease-out;}
label.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno:after {-webkit-animation: valovi_ukljuci 700ms forwards ease-out; animation: valovi_ukljuci 700ms forwards ease-out;}
label.kontrolni_okvir input[type=checkbox][disabled]:not(:checked) ~ span.kontrolni_okvir .ukljuceno:before,
label.kontrolni_okvir input[type=checkbox][disabled] + .circle {opacity: 0.5;}
label.kontrolni_okvir input[type=checkbox][disabled] + span.kontrolni_okvir .ukljuceno:after {background-color: rgba(0, 0, 0, 0.84); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
label.kontrolni_okvir span.naslov {grid-column: 2 / 3; grid-row: 1 / 2; line-height: 20px;}
label.kontrolni_okvir span.opis {grid-column: 2 / 3; grid-row: 2 / 3; font-size: 0.7rem;}

label.unos.tag div.tagovi_input {grid-column: 2 / 3; grid-row: 1 / 2;}
label.unos.tag div.tagovi_input span.tag {float: left; display: block; background: linear-gradient(60deg, var(--boja-domena-svjetlije), var(--boja-domena-tamnije)); border-radius: 3px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-domena-rgba); margin: 2px 2px 5px 2px; padding: 5px; height: 25px; text-decoration:none; color: var(--boja-bijela);}
label.unos.tag div.tagovi_input span.tag span, label.unos.tag div.tagovi_input span.tag a {font-size: 0.7rem; font-weight: 300; color: var(--boja-bijela);}
label.unos.tag div.tagovi_input input {background: transparent; margin: 0 0 5px 5px; padding: 5px; width: 80px; height: 30px; font-size: 0.7rem;}
label.unos.tag div.tagovi_input div {float: left; display: block;}
label.unos.tag div.tagovi_input div.tagovi_ocisti {clear: both; margin-top: 0; height: 0; width: 100%;}
label.unos.tag input:focus + div.tagovi_input + span.naslov svg, label.unos.tag input:valid:not(:placeholder-shown) + div.tagovi_input + span.naslov svg {height: 12px; width: 12px;}
label.unos.tag input:valid + div.tagovi_input + span.naslov svg {opacity: 1;}
label.unos.tag input:focus + div.tagovi_input + span.naslov, label.unos.tag input:not(:placeholder-shown) + div.tagovi_input + span.naslov {top: -13px; background: transparent; font-size: 0.7rem;}
label.unos.tag input:focus:invalid:not(:placeholder-shown) + div.tagovi_input + span.naslov, label.unos.tag input:invalid:not(:placeholder-shown) + div.tagovi_input + span.naslov {color: red;}
label.unos.tag input + div.tagovi_input + span.naslov {top: -13px; background: transparent; font-size: 0.7rem;}

div.radio {margin: 16px 0;}
div.radio input[type="radio"] {display: none;}
div.radio input[type="radio"]:checked + label:before {border-color: var(--boja-granica); animation: radio_animacija 0.2s linear forwards;}
div.radio input[type="radio"]:checked + label:after {transform: scale(1);}
div.radio label {display: inline-block; position: relative; padding: 0 30px; margin-bottom: 0; vertical-align: bottom; min-height: 20px; line-height: 20px; cursor: pointer;}
div.radio label:before, .radio label:after {content: ''; position: absolute; border-radius: 50%; transition: all .3s ease; transition-property: transform, border-color;}
div.radio label:before {top: 0; left: 0; height: 20px; width: 20px; border: 1px solid var(--boja-granica-svjetlije);}
div.radio label:after {background: var(--boja-domena); top: 5px; left: 5px; height: 10px; width: 10px; transform: scale(0);}

fieldset {border: 1px solid var(--boja-granica-svjetlije);}
fieldset legend {visibility: visible; padding: 0 5px; color: var(--boja-tekst-svjetlije);}
fieldset.detalji {margin-bottom: 15px;}
fieldset.detalji ul li {float:left; margin: 5px; border: 1px solid var(--boja-granica-svjetlije);}
fieldset.detalji ul li img {height: 100px; width: 100px;}

div.input_slika, div.input_slika img {cursor: pointer;}
input[type="file"] {display: none;}

/* Baza */
.input-baza {position: relative; display: inline-block !important; vertical-align: middle; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
.input-baza * {-webkit-box-sizing: border-box; box-sizing: border-box;}
.input-baza .input-ispod {display: initial; position: absolute; background-color: white; width: 100%; border-width: 0 1px 1px 1px; border-style: solid; border-color: var(--boja-granica-svjetlije); clip: rect(0, 0, 0, 0); -webkit-clip-path: inset(100% 100%); clip-path: inset(100% 100%); z-index: 1010;}
.input-baza.input-sa-ispod .input-ispod {clip: auto; -webkit-clip-path: none; clip-path: none;}
.input-baza a {cursor: pointer;}
.input-baza .trazi-odabir .ime-grupe, .input-baza .input-jedno .ime-grupe {margin-right: 4px; font-weight: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.input-baza .trazi-odabir .ime-grupe:after, .input-baza .input-jedno .ime-grupe:after {content: ":"; padding-left: 2px; vertical-align: top;}
/* Jedan select */
.input-baza-single .input-jedno {position: relative; display: block; background-clip: padding-box; padding: 0 40px 0 10px; height: 35px; width: 100%; line-height: 35px; text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--boja-granica-svjetlije); overflow: hidden;}
.input-baza-single .input-jedno span {display: block; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.input-baza-single .input-jedno-with-deselect span {margin-right: 38px;}
.input-baza-single .input-jedno abbr {position: absolute; display: block; top: 8px; right: 26px; height: 12px; width: 12px; font-size: 1px;}
.input-baza-single .input-jedno abbr:hover {background-position: -42px -10px;}
.input-baza-single.input-onemoguceno .input-jedno abbr:hover {background-position: -42px -10px;}
.input-baza-single .input-jedno div {position: absolute; display: none; top: 0; right: 0; height: 100%; width: 21px;}
.input-baza-single .input-jedno div b {display: block; height: 100%; width: 100%; border-left: 1px solid #d7d7d7;}
.input-baza-single .input-trazi {position: relative; margin: 0; padding: 3px 4px; white-space: nowrap; z-index: 1010;}
.input-baza-single .input-trazi input[type="text"] {margin: 1px 0; padding: 4px 20px 4px 5px; height: 35px !important; width: 100%; line-height: normal; outline: 0; border: 1px solid var(--boja-granica-svjetlije);}
.input-baza-single .input-ispod {background-clip: padding-box; margin-top: -1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 0 0 4px 4px;}
.input-baza-single.input-baza-single-nosearch .input-trazi {position: absolute; clip: rect(0, 0, 0, 0); -webkit-clip-path: inset(100% 100%); clip-path: inset(100% 100%);}
/* Grupni rezultat */
.input-baza .input-rezultat {position: relative; margin: 0 4px 4px 0; padding: 0 0 0 4px; max-height: 240px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.input-baza .input-rezultat li {display: none; margin: 0; padding: 7px 6px; list-style: none; line-height: 15px; word-wrap: break-word; text-align: left; -webkit-touch-callout: none;}
.input-baza .input-rezultat li.prva {background-color: #f4f4f4; font-weight: bold; color: #5f5f5f; border: 1px solid #e5e5e5;}
.input-baza .input-rezultat li.druga {font-weight: bold; text-indent: 10px; color: #5f5f5f;}
.input-baza .input-rezultat li.treca {font-size: 10px; text-indent: 30px;color: #5f5f5f;}
.input-baza .input-rezultat li.cetvrta {font-size: 9px; font-style: italic; text-indent: 50px;}
.input-baza .input-rezultat li.aktivni-rezultat {display: list-item; width: 100%; cursor: pointer;}
.input-baza .input-rezultat li.onemogucen-rezultat {display: list-item; color: #ccc; cursor: default;}
.input-baza .input-rezultat li.oznacen {background-color: var(--boja-domena); color: white;}
.input-baza .input-rezultat li.nema-rezultata {display: list-item;}
.input-baza .input-rezultat li.grupa-rezultat {display: list-item; font-weight: bold; cursor: default;}
.input-baza .input-rezultat li.grupa-opcija {padding-left: 15px;}
.input-baza .input-rezultat li em {font-style: normal; text-decoration: underline;}
/* Multi grupa rezultat */
.input-baza-multi .input-odabir {position: relative; display: block; margin: 5px 1px 0 0; padding: 0 27px 0 9px; height: auto; line-height: 40px; text-decoration: none; white-space: nowrap; border-width: 0 0 1px 0; border-style: solid; border-color: var(--boja-granica-svjetlije); cursor: text; overflow: hidden;}
.input-baza-multi .input-odabir li {float: left; list-style: none;}
.input-baza-multi .input-odabir li.trazi-polje {margin: 0; padding: 0; white-space: nowrap;}
.input-baza-multi .input-odabir li.trazi-polje input[type="text"] {background: transparent !important; margin: 1px 0; padding: 0; height: 25px; width: 25px; line-height: normal; border: 0 !important; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; outline: 0;}
.input-baza-multi .input-odabir li.trazi-odabir {position: relative; background: linear-gradient(60deg, var(--boja-domena-svjetlije), var(--boja-domena-tamnije)); margin: 10px 5px 5px 0; padding: 5px 20px 5px 5px; max-width: 100%; line-height: 13px; color: var(--boja-bijela); border-radius: 3px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-domena-rgba); cursor: default;}
.input-baza-multi .input-odabir li.trazi-odabir span {word-wrap: break-word; font-size: 0.7rem; font-weight: 300;}
.input-baza-multi .input-odabir li.trazi-odabir .trazi-odabir-zatvori {position: absolute; display: block; top: 5px; right: 3px; height: 12px; width: 12px;}
.input-baza-multi .input-odabir li.trazi-odabir .trazi-odabir-zatvori:hover {background-position: -42px -10px;}
.input-baza-multi .input-odabir li.trazi-odabir .trazi-odabir-zatvori:after {content: 'x'; bottom: initial; opacity: 1; color: var(--boja-bijela);}
.input-baza-multi .input-odabir li.trazi-odabir-disabled {background-color: white; padding-right: 5px; border: 1px solid #e9ecef;}
.input-baza-multi .input-odabir li.trazi-odabir-fokus {background: #d4d4d4;}
.input-baza-multi .input-odabir li.trazi-odabir-fokus .trazi-odabir-zatvori {background-position: -42px -10px;}
.input-baza-multi .input-rezultat {margin: 0; padding: 0;}
.input-baza-multi .input-ispod .rezultat-odabrano {display: list-item;color: #ccc; cursor: default;}
/* Grupa aktivno  */
.input-baza-active .input-jedno {}
.input-baza-active.input-sa-ispod .input-jedno {}
.input-baza-active.input-sa-ispod .input-jedno div {background: transparent; border-left: none;}
.input-baza-active.input-sa-ispod input[type="text"] {border: 1px solid #d7d7d7;}
.input-baza-active .input-odabir {}
.input-baza-active .input-odabir li.trazi-polje input[type="text"] {color: #222 !important;}
/* Grupa onemoguceno */
.input-onemoguceno {opacity: 0.5 !important; cursor: default;}
.input-onemoguceno .input-jedno {cursor: default;}
.input-onemoguceno .input-odabir .trazi-odabir .trazi-odabir-zatvori {cursor: default;}

.datumvrijeme {display:none; position: absolute; background: var(--boja-bijela); padding: 2px 8px 8px 2px; border: 1px solid var(--boja-granica-svjetlije); box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); z-index: 9999;}
.datumvrijeme.rtl {padding: 8px 0 8px 8px;}
.datumvrijeme iframe {position: absolute; background: transparent; top: 0; left: 0; height: 210px; width: 75px; border: 0;}
.datumvrijeme button {border: none !important;}
.datumvrijeme_bez_selekta {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
.datumvrijeme_bez_selekta::selection {background: transparent;}
.datumvrijeme_bez_selekta::-moz-selection {background: transparent;}
.datumvrijeme.datumvrijeme_inline {display: inline-block; position: static; box-shadow: none;}
.datumvrijeme * {-moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
.datumvrijeme .datumvrijeme_datum_picker,.datumvrijeme .datumvrijeme_vrijeme_picker {display: none;}
.datumvrijeme .datumvrijeme_datum_picker.active,.datumvrijeme .datumvrijeme_vrijeme_picker.active {display: block;}
.datumvrijeme .datumvrijeme_datum_picker {float: left; margin-left: 8px; width: 224px;}
.datumvrijeme.rtl .datumvrijeme_datum_picker {float: right; margin-left: 0; margin-right: 8px;}
.datumvrijeme.datumvrijeme_pokazi_tjedne .datumvrijeme_datum_picker {width: 256px;}
.datumvrijeme .datumvrijeme_vrijeme_picker {width:58px;float:left;text-align:center;margin-left:8px;margin-top:0}
.datumvrijeme.rtl .datumvrijeme_vrijeme_picker {float: right; margin-left: 0; margin-right: 8px;}
.datumvrijeme .datumvrijeme_datum_picker.active+.datumvrijeme_vrijeme_picker {margin-top: 8px; margin-bottom: 3px;}
.datumvrijeme .datumvrijeme_mjesec_picker {position: relative; text-align: center;}
.datumvrijeme .datumvrijeme_label i, .datumvrijeme .datumvrijeme_prije, .datumvrijeme .datumvrijeme_dalje,.datumvrijeme .datumvrijeme_danas {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC);}
.datumvrijeme .datumvrijeme_label i {display: inline-block; background-position: -92px -19px; opacity: .5; height: 20px; width: 9px; vertical-align: middle;}
.datumvrijeme .datumvrijeme_prije {float: left; background-position:-20px 0;}
.datumvrijeme .datumvrijeme_danas {float: left; background-position: -70px 0; margin-left: 5px;}
.datumvrijeme .datumvrijeme_dalje {float: right; background-position: 0 0;}
.datumvrijeme .datumvrijeme_dalje, .datumvrijeme .datumvrijeme_prije, .datumvrijeme .datumvrijeme_danas {display:block; position: relative; background-color: transparent; background-repeat: no-repeat; padding: 0; height: 30px; width: 20px; min-width: 0; text-indent: 100%; white-space: nowrap; border: 0 none; cursor: pointer; opacity: .5; -ms-filter:"alpha(opacity=50)"; outline: medium none; overflow: hidden;}
.datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_prije,.datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_dalje {float: none; display: block; background-position: -40px -15px; margin-top: 7px; margin-left: 14px; height: 15px; width: 30px;}
.datumvrijeme.rtl .datumvrijeme_vrijeme_picker .datumvrijeme_prije,.datumvrijeme.rtl .datumvrijeme_vrijeme_picker .datumvrijeme_dalje {float: none; margin-left: 0; margin-right: 14px;}
.datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_prije {background-position: -40px 0; margin-top: 0; margin-bottom: 7px;}
.datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_vrijeme_box {height: 151px; border-bottom: 1px solid var(--boja-granica); overflow: hidden;}
.datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_vrijeme_box>div>div {background: #f5f5f5; height: 25px; line-height: 25px; text-align:center; border-top: 1px solid var(--boja-granica); border-bottom-width: 0; border-collapse: collapse; cursor: pointer;}
.datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_vrijeme_box>div>div:first-child {border-top-width: 0;}
.datumvrijeme .datumvrijeme_danas:hover, .datumvrijeme .datumvrijeme_dalje:hover, .datumvrijeme .datumvrijeme_prije:hover {opacity: 1; -ms-filter: "alpha(opacity=100)";}
.datumvrijeme .datumvrijeme_label {float: left; display: inline; position: relative; margin: 0; padding: 5px 3px; width: 182px; color: var(--boja-domena); text-align: center; cursor: pointer; z-index: 9999;}
.datumvrijeme .datumvrijeme_label:hover>span {text-decoration: underline;}
.datumvrijeme .datumvrijeme_label:hover i {opacity: 1.0;}
.datumvrijeme .datumvrijeme_label>.datumvrijeme_odabir {display: none; position: absolute; background: #fff; top: 30px; right: 0; max-height: 160px; border: 1px solid var(--boja-granica-svjetlije); overflow-y: hidden; z-index: 101;}
.datumvrijeme .datumvrijeme_label>.datumvrijeme_odabir.datumvrijeme_mjesec_odabir {right: -7px;}
.datumvrijeme .datumvrijeme_label>.datumvrijeme_odabir.datumvrijeme_godina_odabir {right: 2px;}
.datumvrijeme .datumvrijeme_label>.datumvrijeme_odabir>div>.datumvrijeme_opcija:hover {background: #ff8000; color: var(--boja-bijela);}
.datumvrijeme .datumvrijeme_label>.datumvrijeme_odabir>div>.datumvrijeme_opcija {padding: 2px 10px 2px 5px; text-decoration: none !important;}
.datumvrijeme .datumvrijeme_label>.datumvrijeme_odabir>div>.datumvrijeme_opcija.datumvrijeme_trenutno {background: #3af; color: var(--boja-bijela); font-weight: 700; box-shadow: #178fe5 0 1px 3px 0 inset;}
.datumvrijeme .datumvrijeme_mjesec {width: 100px; text-align: right;}
.datumvrijeme .datumvrijeme_kalendar {clear: both;}
.datumvrijeme .datumvrijeme_godina {margin-left: 5px; width: 48px;}
.datumvrijeme .datumvrijeme_kalendar table {width: 100%; border-collapse: collapse;}
.datumvrijeme .datumvrijeme_kalendar table tbody tr {height: auto;}
.datumvrijeme .datumvrijeme_kalendar td>div {padding-right:5px;}
.datumvrijeme .datumvrijeme_kalendar th {height: 25px;}
.datumvrijeme .datumvrijeme_kalendar td, .datumvrijeme .datumvrijeme_kalendar th{background: #f5f5f5; width: 14.2857142%; padding: 0; height: 25px; text-align: right; vertical-align: middle; border: 1px solid var(--boja-granica-svjetlije); border-collapse: collapse; cursor: pointer;}
.datumvrijeme.datumvrijeme_pokazi_tjedne .datumvrijeme_kalendar td,.datumvrijeme.datumvrijeme_pokazi_tjedne .datumvrijeme_kalendar th {width: 12.5%;}
.datumvrijeme .datumvrijeme_kalendar th {background: #f1f1f1;}
.datumvrijeme .datumvrijeme_kalendar td.xdsoft_today {color: var(--boja-domena);}
.datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_oznaceno_zadano {background: var(--boja-domena);}
.datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_oznaceno_mint{background: var(--boja-domena);}
.datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_zadano, .datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_trenutno, .datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_vrijeme_box>div>div.datumvrijeme_trenutno {background: var(--boja-domena); color: var(--boja-bijela); font-weight: 700;}
.datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_drugi_mjesec, .datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_iskljuceno, .datumvrijeme .datumvrijeme_vrijeme_box>div>div.datumvrijeme_iskljuceno {opacity: .5; -ms-filter: "alpha(opacity=50)"; cursor: default;}
.datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_drugi_mjesec.datumvrijeme_iskljuceno {opacity: .2 ;-ms-filter: "alpha(opacity=20)";}
.datumvrijeme .datumvrijeme_kalendar td:hover, .datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_vrijeme_box>div>div:hover {color:var(--boja-bijela) !important; background: var(--boja-domena) !important; box-shadow:none !important;}
.datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_trenutno.datumvrijeme_iskljuceno:hover, .datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_vrijeme_box>div>div.datumvrijeme_trenutno.datumvrijeme_iskljuceno:hover {background: var(--boja-domena) !important; color: var(--boja-bijela) !important;}
.datumvrijeme .datumvrijeme_kalendar td.datumvrijeme_iskljuceno:hover,.datumvrijeme .datumvrijeme_vrijeme_picker .datumvrijeme_vrijeme_box>div>div.datumvrijeme_iskljuceno:hover{background: inherit !important; color: inherit !important; box-shadow: inherit !important;}
.datumvrijeme .datumvrijeme_kalendar th {color: var(--boja-granica); font-weight: 700; text-align: center; cursor: default;}
.datumvrijeme_vrijeme_box {position: relative; border: 1px solid var(--boja-granica);}
.datumvrijeme_scrollbar>.datumvrijeme_scroller {background: var(--boja-granica) !important; height: 20px; border-radius: 3px;}
.datumvrijeme_scrollbar {position: absolute; right: 0; top: 0; bottom: 0; width:7px; cursor: pointer;}
.datumvrijeme.rtl .datumvrijeme_scrollbar {left: 0; right: auto;}
.datumvrijeme_scroller_okolo {position: relative;}

/** loader **/
.loader {display: block; margin: auto; height: 50px; width: 50px; -webkit-animation: loader_rotacija 1.4s linear infinite; animation: loader_rotacija 1.4s linear infinite;}
.loader_putanja {stroke-dasharray: 187; stroke-dashoffset: 0; -webkit-transform-origin: center; transform-origin: center; -webkit-animation: loader_povlaka 1.4s ease-in-out infinite, loader_boje 5.6s ease-in-out infinite; animation: loader_povlaka 1.4s ease-in-out infinite, loader_boje 5.6s ease-in-out infinite;}
#loader_sadrzaj {grid-column: 2 / 6; grid-row: 1 / 2;}
main#naslovna #loader_sadrzaj {grid-row: 2 / 3;}
@-webkit-keyframes loader_rotacija {
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-webkit-transform: rotate(270deg);transform: rotate(270deg);}
}

@keyframes loader_rotacija {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(270deg); transform: rotate(270deg);
    }
}
@-webkit-keyframes loader_boje {
    0% {stroke: #4285F4;}
    25% {stroke: #DE3E35;}
    50% {stroke: #F7C223;}
    75% {stroke: #1B9A59;}
    100% {stroke: #4285F4;}
}
@keyframes loader_boje {
    0% {stroke: #4285F4;}
    25% {stroke: #DE3E35;}
    50% {stroke: #F7C223;}
    75% {stroke: #1B9A59;}
    100% {stroke: #4285F4;}
}
@-webkit-keyframes loader_povlaka {
    0% {stroke-dashoffset: 187;}
    50% {stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
    100% {stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg);}
}
@keyframes loader_povlaka {
    0% {stroke-dashoffset: 187;}
    50% {stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
    100% {stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg);}
}

/** potvrda **/
svg.potvrda .putanja {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}
svg.potvrda .putanja.krug {
    -webkit-animation: putanja_povlaka 0.9s ease-in-out;
    animation: putanja_povlaka 0.9s ease-in-out;
}
svg.potvrda .putanja.linija {
    stroke-dashoffset: 1000;
    -webkit-animation: putanja_povlaka 0.9s 0.35s ease-in-out forwards;
    animation: putanja_povlaka 0.9s 0.35s ease-in-out forwards;
}
svg.potvrda .putanja.odabir {
    stroke-dashoffset: -100;
    -webkit-animation: putanja_povlaka_potvrda 0.9s 0.35s ease-in-out forwards;
    animation: putanja_povlaka_potvrda 0.9s 0.35s ease-in-out forwards;
}
@-webkit-keyframes putanja_povlaka {
    0% {stroke-dashoffset: 1000;}
    100% {stroke-dashoffset: 0;}
}
@keyframes putanja_povlaka {
    0% {stroke-dashoffset: 1000;}
    100% {stroke-dashoffset: 0;}
}
@-webkit-keyframes putanja_povlaka_potvrda {
    0% {stroke-dashoffset: -100;}
    100% {stroke-dashoffset: 900;}
}
@keyframes putanja_povlaka_potvrda {
    0% {stroke-dashoffset: -100;}
    100% {stroke-dashoffset: 900;}
}


/** dialog **/
#dialog_okolo {display: none; position: fixed; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; overflow-y: scroll;}
#dialog {display: none; grid-template-columns: 15px auto 15px; grid-template-rows: 50px auto auto; grid-row-gap: 15px; background-color: var(--boja-bijela); margin: 100px auto; height: auto; width: 100%; max-width: max-content; min-width: 600px; box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); border-radius: 6px;}
#dialog > .naslov {grid-column: 2 / 3; grid-row: 1 / 2; display: flex; background: linear-gradient(60deg, var(--boja-domena-svjetlije), var(--boja-domena-tamnije)); margin: -15px 0 20px 0; padding: 0; width: 100%; color: var(--boja-bijela); border-radius: 3px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-domena-rgba);}
#dialog > .naslov h4 {margin-left: 52px; width: 100%; line-height: 5px; font-size: 0.9rem; font-weight: 300; text-align: center;}
#dialog .dialog_zatvori {margin: 15px}
#dialog .dialog_zatvori svg {fill: var(--boja-bijela); height: 16px; width: 16px; cursor: pointer;}
#dialog .dialog_zatvori svg:hover {fill: var(--boja-tekst-svjetlije);}
#dialog .sadrzaj {grid-column: 2 / 3; grid-row: 2 / 3;}
#dialog .sadrzaj > div > h2 {text-align: center;}
#dialog .sadrzaj .podatci div.naruci label.unos input::placeholder {font-size: 0.5rem;}
#dialog .kontrole {grid-column: 2 / 3; grid-row: 3 / 4; display: flex; flex-wrap: wrap; justify-self: center; align-items: center; max-width: 500px;}
#dialog .kontrole > * {margin: 5px 0 5px 0;}
#dialog .kontrole button[name="prijavi_se"] {flex-basis: 100%;}
#dialog .kontrole a.zaboravljena_lozinka {margin-left: auto;}
#dialog .kontrole span.registracija, #dialog .kontrole .prijava {flex-basis: 100%; text-align: center;}

/** gdpr **/
#gdpr {position: fixed; display: block; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; right: 0; bottom: 0; z-index: 9998;}
#gdpr div {position: fixed; display: block; background-color: white; left: 0; right: 0; bottom: 0; text-align: center; border-top: 3px solid var(--boja-domena); z-index: 9999;}

/** zaglavlje **/
header {font-size: 0.7rem; line-height: 20px; color: var(--boja-bijela);}
body#terenskikomercijalist header {grid-template-rows: 90px 100px auto;}
header > div.info .input-baza .input-rezultat li {color: var(--boja-tekst);}
header > div.info {grid-column: 1 / 9; grid-row: 1 / 2; display: grid; grid-template-columns: auto 700px 700px auto; align-content: center; text-align: left; box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.4);}
header > div.info span {grid-column: 2 / 3; grid-row: 1 / 2;}
header > div.info span a {font-weight: 900; color: var(--boja-bijela);}
header > div.info span a:hover:after {background: var(--boja-bijela);}
header > div.info span .dug {display: initial; margin-left: 5px;}
header > div.info span > form[name="terenskikomercijalistipartner"] .input-baza-single .input-jedno {height: auto; line-height: normal;}
header > div.info span > form[name="terenskikomercijalistipartner"] .input-baza-single .input-jedno span {white-space: normal;}
header > div.info ul {grid-column: 3 / 4; grid-row: 1 / 2; justify-self: right;}
header > div.info ul li {float: left; margin-left: 10px;}
header > div.info ul li div {display: flex; align-items: center;}
header > div.info ul li div svg {fill: var(--boja-bijela); margin-right: 5px; height: 15px; width: 15px;}
header > div.info ul li div a {color: var(--boja-bijela);}
header > a.logo {grid-column: 2 / 3; grid-row: 2 / 3; justify-self: left; background-size: auto 100px; background-repeat: no-repeat; background-position: center; height: 100px; width: 300px;}
header > a.logo:after {background-color: transparent;}
header > form[data-oznaka="trazi_artikal"] {grid-column: 3 / 6; grid-row: 2 / 3; display: flex; flex-direction: column;}
header > form[data-oznaka="trazi_artikal"] > label {margin: 40px 0 10px 0; line-height: initial;}
header > form[data-oznaka="trazi_artikal"] > label > .naslov {text-indent: 5px;}
header > div.jezik {grid-column: 6 / 8; grid-row: 2 / 3; display: flex; justify-content: end; font-size: 1rem;}
header > div.jezik label {margin: 40px 0 10px 0;}
header > div.jezik label select {margin: -5px 10px 0 0;}
header > nav {grid-column: 1 / 9; grid-row: 3 / 4; color: var(--boja-tekst);}
header > nav > ul {display: flex; flex-wrap: nowrap; align-items: stretch; margin: auto; height: 50px; max-width: 1260px;}
header > nav > ul > li {float: left; margin-left: -1px; height: 50px; max-width: 170px; border-right: 1px solid var(--boja-granica-svjetlije);}
header > nav > ul > li > a {display: flex; justify-content: center; align-items: center; margin-left: 40px; height: 50px; font-size: 0.8rem; text-transform: uppercase; color: var(--boja-tekst);}
header > nav > ul > li.pocetna a {background-color: var(--boja-domena); margin-left: 0; padding-left: 20px; padding-right: 20px;}
header > nav > ul > li.pocetna a span {display: none;}
header > nav > ul > li.pocetna a svg {fill: white; height: 15px; width: 15px;}
header > nav > ul > li.preuzimanja a {background-color: var(--boja-domena); color: white;}
header > nav > ul > li.preuzimanja .glavni_meni_podmeni h4:hover {text-decoration: none;}
header > nav > ul > li.preuzimanja .glavni_meni_podmeni h4 a {cursor: default;}
header > nav > ul > li.preuzimanja .glavni_meni_podmeni div table tr td > div {display: inline-flex; align-items: center; padding-top: 5px;}
header > nav > ul > li.preuzimanja .glavni_meni_podmeni div table tr td > div svg {height: 30px; width: 30px;}
header > nav > ul > li > a:hover, header > nav > ul > li.glavni_meni_otvoren a {text-decoration: none; color: var(--boja-bijela); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
header > nav > ul > li > a > span {max-width: 110px; line-height: initial; text-align: center;}
header > nav > ul > li.glavni_meni_otvoren .glavni_meni_podmeni {display: block; text-transform: lowercase; box-shadow: 0 0 30px -10px rgb(0, 0, 0);}
header > nav > ul > li .glavni_meni_podmeni {display: none; position: absolute; background-color: var(--boja-domena); left: 0; width: 100%;}
header > nav > ul > li .glavni_meni_podmeni h4 {display: inline-flex; margin: 0 0 0 10px; padding: 20px 0 10px 0; font-size: 1rem; font-weight: 300; color: #d7d7d7; cursor: pointer;}
header > nav > ul > li .glavni_meni_podmeni h4 svg {fill: var(--boja-bijela); height: 30px; width: 20px;}
header > nav > ul > li .glavni_meni_podmeni h4 a {margin-left: 5px;}
header > nav > ul > li .glavni_meni_podmeni h4 a:hover:after {background: var(--boja-bijela);}
header > nav > ul > li .glavni_meni_podmeni table a {font-size: 0.8rem; line-height: 22px; color: var(--boja-bijela);}
header > nav > ul > li .glavni_meni_podmeni table a:before {content: '- ';}
header > nav > ul > li .glavni_meni_podmeni table a:hover:after {background: var(--boja-bijela);}
header > nav > ul .glavni_meni_podmeni_unutra {margin: auto; width: 100%; max-width: 1260px;}
header > nav > ul .glavni_meni_podmeni_unutra table tr, header > nav > ul .glavni_meni_podmeni_unutra table td {display: flex; padding-left: 10px; height: auto; line-height: normal;}
header > nav .glavni_meni_podmeni_unutra {column-count: 4; column-gap: 10px;}
header > nav .glavni_meni_podmeni_unutra > div {display: inline-block; width: 100%;}
header > nav .glavni_meni_podmeni_unutra:before, header > nav .glavni_meni_podmeni_unutra:after {content: ""; display: table;}
header > nav .glavni_meni_podmeni_unutra:after {clear: both;}

/** sadrzaj **/
main {margin-bottom: 30px}
main > *:not(#loader_sadrzaj) {visibility: hidden;}
main#naslovna > .reklama {grid-column: 2 / 6; grid-row: 1 / 2; padding: 10px; border: 1px solid var(--boja-granica-svjetlije); border-radius: 6px; -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);}
main#naslovna > .obavijesti {position: relative; margin: auto; height: 400px; width: 100%; overflow: hidden;}
main#naslovna > .obavijesti .obavijesti_okolo {position: relative; height: 100%; width: 100%;}
main#naslovna > .obavijesti .obavijest {display: none; position: absolute; top: 0; left: 0; padding: 50px 70px 50px 50px; height: 100%; width: 100%; font-size: 0.9rem; text-align: center; color: white;}
main#naslovna > .obavijesti .obavijest h1 {font-weight: 100;}
main#naslovna > .obavijesti .obavijest:first-child {display: block;}
main#naslovna > .obavijesti .obavijest div.opis {display: inline-block;}
main#naslovna > .obavijesti .obavijest div.opis > * {margin: 5px; max-width: 600px; color: white;}
main#naslovna > .obavijesti .obavijest div.opis a {font-weight: 600;}
main#naslovna > .obavijesti .strelice a {position: absolute; top: 43%; left: 15px; font-size: 42px; font-weight: 400; line-height: 1; color: black;}
main#naslovna > .obavijesti .strelice a.dalje {left: initial; right: 35px;}
main#naslovna > .naslov {grid-row: 2 / 3;}
main#naslovna > form {grid-row: 3 / 4;}
main#naslovna > .reklame {display: flex; flex-direction: row; grid-column: 2 / 6; grid-row: 2 / 3; gap: 20px; justify-self: center; margin-top: 50px;}
main#naslovna > .reklame > .reklama {display: flex;}
main#naslovna > .reklame > .reklama > img {width: 100%; border: 1px solid var(--boja-granica-svjetlije); border-radius: 6px; -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);}
main > .naslov {grid-column: 2 / 6; grid-row: 1 / 2; display: block; padding: 10px 20px 0 20px; font-size: 0.8rem; font-weight: 300; line-height: 2;}
main > form {grid-column: 2 / 6; grid-row: 2 / 3; margin-top: 20px;}
main > form.puni_zaslon {position: absolute; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 10px 0 10px; z-index: 3;}
main > form.puni_zaslon > section {margin-bottom: 0;}
main > form section {grid-template-rows: auto;}
main > form section .zaglavlje {margin: -20px 0 20px 0; max-width: 100%; overflow: hidden;}
main > form section .zaglavlje h4 {font-size: 0.8rem; text-transform: uppercase;}
main > form section .naruci label.unos > span.naslov {justify-content: center;}
main > form[data-oznaka="profil_spremi"] section, main > form[data-oznaka="registracija"] section, main > form[data-oznaka="registracija_mpc"] section, main > form[data-oznaka="registracija_zahtjev"] section {margin-bottom: 40px;}
main > form[data-oznaka="profil_spremi"] section:last-of-type, main > form[data-oznaka="registracija"] section:last-of-type {grid-template-rows: 40px auto 70px;}
main > form[data-oznaka="rezultat"] {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px 0;}
main#rezultat > .naslov .rezultat_akcija {display: flex; align-items: center;}
main#rezultat > .naslov .rezultat_akcija svg {margin: 10px; height: 50px; width: 50px;}
main > form[data-oznaka="potvrda_registracije"] .sadrzaj p, main > form[data-oznaka="oporavak_lozinke"] .sadrzaj p {font-size: 1rem; line-height: 30px; text-align: center;}
main > form[data-oznaka="potvrda_registracije"] .sadrzaj a.gumb, main > form[data-oznaka="oporavak_lozinke"] .sadrzaj a.gumb {margin: 20px auto; width: max-content; font-size: 0.8rem;}
main > form[data-oznaka="narudzbe"] table tr {height: 40px;}
main > form[data-oznaka="narudzbe"] table tr td {padding: 0; height: 40px; border-width: 0 1px 1px 0; border-style: solid; border-color: var(--boja-granica-svjetlije);}
main > form[data-oznaka="narudzbe"] table tr td a {display: flex; align-items: center; padding-left: 10px; height: 100%; width: 100%; color: var(--boja-tekst); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
main > form[data-oznaka="narudzbe"] table tr:hover td a {background-color: var(--boja-domena); color: var(--boja-bijela); text-decoration: none;}
main > form[data-oznaka="narudzbe"] table tr:hover td a:after {background-color: transparent;}
main > form[data-oznaka="narudzbe"] table tr td svg {fill: var(--boja-domena); height: 23px; width: 23px;}
main > form[data-oznaka="narudzbe"] table tr:hover td svg {fill: var(--boja-bijela);}
main > nav[data-oznaka="narudzbe_navigacija"] {grid-column: 2 / 6; grid-row: 3 / 4; margin: auto;}
main > nav[data-oznaka="narudzbe_navigacija"] ul li {float: left; margin-left: 5px;}
main > form[data-oznaka="kontakt"] table tr td textarea {height: 300px;}
main > form[data-oznaka="artikal"] section > h2 {margin: 15px;}
main#download > form {display: grid; grid-template-columns: repeat(3, 1fr);}
main#download > form > a {display: flex; flex-direction: column; align-items: center; height: 300px; width: 200px;}
main#download > form > a img {height: 250px; width: 200px;}
main#download > form > a span {margin-top: 10px;}
main#osobni_podatci p {margin: 0;}

/** podnozje **/
footer > nav > ul > li {height: 20px;}
footer > nav > ul > li > a {font-weight: 200; color: white;}
footer > nav.fokus {grid-column: 2 / 3; grid-row: 1 / 2; justify-self: center;}
footer > nav.fokus > h2 > a.logo {display: block; background-size: 100px 50px; background-repeat: no-repeat; background-position: center; margin-top: 30px; height: 55px; width: 115px;}
footer > nav.fokus > h2 > a.logo:after {background-color: transparent;}
footer > nav.webshop {grid-column: 3 / 4; grid-row: 1 / 2; justify-self: center;}
footer > nav.meni {grid-column: 4 / 5; grid-row: 1 / 2;}
footer > nav.kontakt {grid-column: 5 / 8; grid-row: 1 / 2; display: flex; flex-wrap: wrap; align-content: flex-start;}
footer > nav.kontakt > h2 {width: 100%;}
footer > nav.kontakt ul {flex: 1 1 0;}
footer > nav.kontakt ul li.naslov {padding-top: 5px; font-style: italic; color: var(--boja-domena);}
footer > nav.preuzimanja {grid-column: 4 / 5; grid-row: 1 / 2;}
footer > nav.drustvene_mreze {grid-column: 5 / 6; grid-row: 1 / 2;}
footer > nav.drustvene_mreze svg {fill: white; height: 30px; width: 30px;}
footer > nav.drustvene_mreze > ul > li {float: left; width: 40px;}
footer > nav h2 {font-size: 1.3rem; font-weight: 100; color: var(--boja-domena);}
footer > nav ul li div {display: flex; align-items: center; padding: 5px;}
footer > nav ul li div svg {fill: var(--boja-domena); margin-right: 5px; height: 15px; width: 15px;}
footer > nav ul li div a {color: var(--boja-domena);}
footer > nav ul li div a:hover:after {background: var(--boja-bijela);}

/** tabela **/
table {width: 100%;}
table tbody tr {height: 70px;}
table tbody tr.poruka {height: auto;}
section.modul {display: grid;}
section.modul > div.opcije {grid-column: 2 / 3; grid-row: 1 / 2; justify-self: end; display: inline-flex;}
section.modul > div.opcije a {margin: 10px; height: 17px; width: 17px;}
section.modul > div.opcije a:after {display: none;}
section.modul > div.opcije a svg {fill: var(--boja-placeholder); height: 17px; width: 17px;}
section.modul > div.opcije input[type="submit"] {display: none;}
section.modul > div.opcije label svg {margin: 10px; padding: 0; height: 17px; width: 17px; cursor: pointer;}
section.modul > div.opcije a label svg {margin: 0;}
section.modul > div.sadrzaj {display: initial;}
section.modul > div.sadrzaj > label.unos {margin-top: 20px; width: 100%;}
section.modul > div.sadrzaj > label.unos.mali {float: left; margin-top: 0; width: auto;}
table.tabela {font-weight: 300;}
table.tabela tr {height: 50px;}
table.tabela tr th {padding: 3px; height: 50px;}
table.tabela tr td {padding: 7px;}
table.tabela thead tr th {font-size: 1rem; font-weight: 300; text-align: left;}
table.tabela thead tr th > div {display: flex; align-items: center; cursor: pointer;}
table.tabela thead tr th > div div.poredaj {margin-left: 10px; height: 32px; width: 15px;}
table.tabela thead tr th > div svg {height: 15px; width: 15px; opacity: 0.1;}
table.tabela thead tr th > div svg.aktivno {opacity: 1;}
table.tabela tbody tr:hover {background-color: var(--boja-pozadina);}
table.tabela tbody tr td {height: 40px; border-bottom: 1px solid rgba(0,0,0,.06);}
table.tabela tbody tr td img {height: 100px; width: 100px;}
table.tabela tr td div.status {padding: 3px; font-size: 0.7rem; color: var(--boja-bijela); border-radius: 30%;}
table.tabela tr td div.status[data-boja="zelena"] {background-color: var(--boja-zelena);}
table.tabela tr td div.status[data-boja="crvena"] {background-color: var(--boja-crvena);}
table.tabela tbody tr td.uredi {cursor: pointer;}
table.tabela tfoot tr {font-weight: 600;}
fieldset table.tabela thead th {padding: 0 70px 0 0;}
table.podatci {padding: 10px; width: 100%; border-collapse: separate; border-spacing: 0 10px;}
table.podatci caption {padding: 10px; font-size: 1.1rem; text-align: left;}
table.podatci.kontrolni_okvir tbody tr {height: auto;}
table.podatci tbody tr td.naslov {font-weight: 300; color: var(--boja-domena);}
table.podatci tbody tr td > label > span:first-of-type {display: block; padding: 0 10px 10px 0;}
table.podatci tbody tr td > label.unos > span:first-of-type {display: flex; padding: initial;}
table.podatci tbody tr td label.kontrolni_okvir > span:first-of-type {line-height: 20px;}
table.podatci tbody tr td span.kontrolni_okvir, table.podatci tbody tr td span.ukljuceno {padding: 0;}
table.podatci tbody tr td div {display: flex; position: relative;}
table.podatci tbody tr td div input {background-color: var(--boja-bijela);}
table.podatci tbody tr td div input {padding: 0 40px 0 10px; height: 35px; width: 100%; border: 1px solid var(--boja-granica-svjetlije);}
table.podatci tbody tr td div input:hover {border: 1px solid var(--boja-granica);}
table.podatci tbody tr td div input:disabled {background-color: var(--boja-pozadina); cursor: not-allowed;}
table.podatci tbody tr td div input[readonly] {background-color: var(--boja-pozadina); cursor: copy;}
table.podatci tbody tr td div input:focus {border: 1px solid var(--boja-domena);}
table.podatci tbody tr td div input:focus + div {border: 1px solid var(--boja-domena);}
table.podatci tbody tr td div div.ikona input {width: calc(100% - 35px);}
table.podatci tbody tr td div div.ikona {order: -1; float: left; background-color: var(--boja-bijela); height: 35px; width: 35px; border-width: 1px 0 1px 1px; border-style: solid; border-color: var(--boja-granica-svjetlije);-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
table.podatci tbody tr td div div.ikona svg {margin: 9.5px; height: 15px; width: 15px;}
form.mala .tabela thead tr th {font-size: 0.9rem;}
form.mala .tabela tbody tr td {font-size: 0.75rem;}
form.mala > section .zaglavlje.veliko  {grid-gap: 0;}
form.mala > section .zaglavlje.veliko h4 {font-size: 1rem;}
form.mala > section .zaglavlje.veliko h6 {font-size: 0.8rem;}

/** model **/
section {background-color: var(--boja-bijela); border: 1px solid var(--boja-granica-svjetlije); border-radius: 6px; -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);}
section {display: grid; grid-template-columns: 10px minmax(0, 1fr) 10px; grid-template-rows: 40px auto 50px; grid-row-gap: 15px;}
section .zaglavlje {grid-column: 2 / 3; grid-row: 1 / 2; align-self: center; display: flex; align-items: center; background: linear-gradient(60deg, var(--boja-domena-svjetlije), var(--boja-domena-tamnije)); margin: -15px 0 20px 0; padding: 0 15px 0 15px; width: max-content; color: var(--boja-bijela); border-radius: 3px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-domena-rgba);}
section .zaglavlje:hover {text-decoration: none;}
section .zaglavlje h4 {margin: 13px; font-size: 0.9rem; font-weight: 300;}
section .zaglavlje div svg {fill: white; height: 20px; width: 20px;}
section div.sadrzaj {grid-column: 2 / 3; grid-row: 2 / 3; display: grid; grid-gap: 15px;}
section div.sadrzaj .slika img {height: 200px; width: 200px;}
section div.sadrzaj ul.slike li img {height: 100px; width: 100px;}
section div.sadrzaj a.naziv {display: inline-flex; flex-wrap: nowrap;}
section div.sadrzaj a.naziv h4 {margin: 0 10px; font-size: 0.9rem; font-weight: 400; text-align: center; color: var(--boja-tekst);}
section div.sadrzaj a.naziv:hover h4 {color: var(--boja-domena);}
section div.sadrzaj a.naziv:after {display: none;}
section div.sadrzaj a.naziv svg {height: 15px; width: 15px;}
section div.sadrzaj a.naziv:hover svg {fill: var(--boja-domena);}
div.kontrole {grid-column: 2 / 3; grid-row: 3 / 4; display: flex; justify-self: center; align-items: center; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; min-height: 70px;}
div.kontrole ul li {float: left; padding: 3px;}

/** rezolucija **/
.w768, .w1260 {display: none;}

#slika_zoom {position: absolute; visibility:hidden; padding: 5px 5px 5px 5px; z-index: 9999; overflow: hidden; border: 1px solid #e0e0e0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: crosshair;}
#slika_zoom img {display: block !important; position: absolute !important; height: auto !important; width: auto;}
#slika_zoom.mobitel {overflow: scroll; -webkit-overflow-scrolling: touch;}
#slika_zoom_div {display: flex; position: absolute; visibility: hidden; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; overflow: hidden; pointer-events: none;}
#slika_zoom_div .ikonica {background-color: #333; margin: 100px auto; height: 40px; width: 40px; border-radius: 100%; -webkit-animation: slika_zoom 1.0s infinite ease-in-out; animation: slika_zoom 1.0s infinite ease-in-out;}
@-webkit-keyframes slika_zoom {
    0% {-webkit-transform: scale(0);}
    100% {-webkit-transform: scale(1.0); opacity: 0;}
}
@keyframes slika_zoom {
    0% {-webkit-transform: scale(0); transform: scale(0);}
    100% {-webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0;}
}

/** mapa **/
.mapa_okolo {position: relative; height: 100%; width: 100%; overflow: hidden; touch-action: none;}
.mapa-tip {display: none; position: absolute; background: var(--boja-domena); padding: 3px; font-size: 0.7rem; color: var(--boja-bijela); border: 1px solid var(--boja-granica); z-index: 1000;}
.mapa-plus, .mapa-minus, .mapa-natrag {position: absolute; left: 10px; background: var(--boja-domena); padding: 5px; line-height: 20px; text-align: center; color: var(--boja-bijela); cursor: pointer;}
.mapa-plus, .mapa-minus {height: 30px; width: 30px;}
.mapa-plus {top: 10px;}
.mapa-minus {top: 50px;}
.mapa-natrag {bottom: 10px; padding: 6px; z-index: 1000;}
.mapa-spiner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: center no-repeat url(data:image/gif;base64,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);}
.jvectormap-legend-title {font-size: 14px; font-weight: bold; text-align: center;}
.jvectormap-legend-cnt {position: absolute;}
.jvectormap-legend-cnt-h {right: 0; bottom: 0;}
.jvectormap-legend-cnt-v {top: 0; right: 0;}
.jvectormap-legend {background: black; color: white; border-radius: 3px;}
.jvectormap-legend-cnt-h .jvectormap-legend {float: left; margin: 0 10px 10px 0; padding: 3px 3px 1px 3px;}
.jvectormap-legend-cnt-h .jvectormap-legend .jvectormap-legend-tick {float: left;}
.jvectormap-legend-cnt-v .jvectormap-legend {margin: 10px 10px 0 0; padding: 3px;}
.jvectormap-legend-cnt-h .jvectormap-legend-tick {width: 40px;}
.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {height: 15px;}
.jvectormap-legend-cnt-v .jvectormap-legend-tick-sample {display: inline-block; vertical-align: middle;height: 20px;width: 20px;}
.jvectormap-legend-tick-text {font-size: 12px;}
.jvectormap-legend-cnt-h .jvectormap-legend-tick-text {text-align: center;}
.jvectormap-legend-cnt-v .jvectormap-legend-tick-text {display: inline-block; vertical-align: middle; padding-left: 3px; line-height: 20px;}

@media only screen and (min-width: 1590px) {

    body#terenskikomercijalist header {grid-template-rows: 90px 100px auto;}
    header > div.info {grid-template-columns: auto 700px 700px auto;}
    header > nav > ul {max-width: 1470px;}

}

@media only screen and (max-width: 1260px) {

    header > div.info {grid-column: 1 / 4; grid-row: 1 / 2; grid-template-columns: auto auto;}
    header > div.info span {grid-column: 1 / 3; margin-left: 15px;}
    header > div.info ul {grid-column: 3 / 4; margin-right: 15px;}
    header > a.logo {grid-column: 1 / 2; grid-row: 2 / 3;}
    header > form[data-oznaka="trazi_artikal"] {grid-column: 2 / 3; grid-row: 2 / 3;}
    header > div.jezik {grid-column: 3 / 4; grid-row: 2 / 3; justify-content: center;}
    header > nav > ul > li > a {margin-left: 20px; font-size: 0.7rem;}

    footer > a.logo {grid-column: 1 / 4; grid-row: 1 / 2;}
    footer > nav.meni {grid-column: 1 / 2; grid-row: 2 / 3; justify-self: center;}
    footer > nav.kontakt {grid-column: 2 / 4; grid-row: 2 / 3; justify-self: center;}

    .w1260 {display: block;}

}

@media only screen and (max-width: 768px) {

    header {text-align: center;}
    header > div.info {grid-column: 1 / 3; grid-row: 1 / 2; grid-template-columns: auto;}
    header > div.info span {grid-column: 1 / 3; grid-row: 1 / 2; justify-self: center; margin-left: 0;}
    header > div.info ul {grid-column: 1 / 3; grid-row: 2 / 3; justify-self: center; margin-right: 0;}
    header > a.logo {grid-column: 1 / 3; grid-row: 2 / 3;}
    header > form[data-oznaka="trazi_artikal"] {grid-column: 1 / 2; grid-row: 3 / 4; justify-self: center; width: 90%;}
    header > div.jezik {grid-column: 2 / 3; grid-row: 3 / 4;}
    body#partner header {grid-template-rows: 90px 100px auto;}
    body#partner header > div.info .dug {display: block; margin-left: 0; width: 100%;}
    body#terenskikomercijalist header {grid-template-rows: 120px 100px auto;}
    body#terenskikomercijalist header > div.info .dug {display: block; margin-left: 0; width: 100%;}
    header > nav {grid-column: 1 / 3; grid-row: 4 / 5; color: var(--boja-tekst);}
    header > nav > ul > li .glavni_meni_podmeni {position: relative; text-align: left;}
    header > nav > ul > li .glavni_meni_podmeni_unutra > div {float: none; padding: 0 2em;}
    header > nav > ul {display: initial; height: auto;}
    header > nav > ul > li {float: none; display: block; height: auto; width: 100%; max-width: 100%; border-bottom: 2px solid var(--boja-domena);}
    header > nav > ul > li > a {justify-content: left; font-size: 0.8rem;}
    header > nav > ul > li > a > span {margin-left: 20px; margin-right: 20px;}
    header > nav > ul > li .glavni_meni_podmeni_unutra {column-count: 1; column-gap: 0;}
    header > nav > ul > li .glavni_meni_podmeni_unutra > div {float: left; width: 100%;}

    main#naslovna > .obavijesti {height: 600px;}
    section div.sadrzaj a.naziv h4 {text-align: center;}

    footer > a.logo {grid-column: 1 / 2; grid-row: 1 / 2;}
    footer > nav.meni {grid-column: 1 / 2; grid-row: 2 / 3; justify-self: center;}
    footer > nav.kontakt {grid-column: 1 / 2; grid-row: 3 / 4; justify-self: center; justify-content: space-around;}
    footer > nav h2 {text-align: center;}

    #dialog {min-width: 95vw;}

    .w768 {display: block;}

}

@media only screen and (max-width: 600px) {

    header > nav > ul > li > a {margin-left: 0;}

}

/** boja **/
svg[data-boja="boja"] {fill: var(--boja-domena) !important;}
button[data-boja="boja"], .gumb[data-boja="boja"] {background-color: var(--boja-domena); color: var(--boja-bijela); border-color: var(--boja-domena); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-domena-rgba);}
button[data-boja="boja"] svg, .gumb[data-boja="boja"] svg {fill: var(--boja-bijela);}
section[data-boja="boja"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-domena-svjetlije), var(--boja-domena-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-zuta-rgba);}
section[data-boja="boja"] div.sadrzaj table thead tr th {color: var(--boja-domena);}
section[data-boja="boja"] > div.opcije a svg:hover {fill: var(--boja-domena);}
fieldset[data-boja="boja"] table.tabela thead tr th {color: var(--boja-domena);}
label.unos[data-boja="boja"] input:focus + span.naslov {color: var(--boja-domena);}
label.unos[data-boja="boja"] input:focus ~ svg {fill: var(--boja-domena);}
label.unos[data-boja="boja"] input ~ span.granica:before, label[data-boja="boja"] input ~ span.granica:after {background-color: var(--boja-domena);}
label.kontrolni_okvir[data-boja="boja"] span.kontrolni_okvir .ukljuceno {color: var(--boja-domena);}
label.kontrolni_okvir[data-boja="boja"] span.kontrolni_okvir:before {background-color: var(--boja-domena);}
label.kontrolni_okvir[data-boja="boja"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-domena);}
label.select select:focus ~ .select-odaberite, label.select select:focus ~ .select-odaberite {color: var(--boja-domena);}
label.select .select-granica:before, label.select .select-granica:after {background: var(--boja-domena);}
label.tekst[data-boja="boja"] textarea:focus + span.naslov {color: var(--boja-domena);}
label.tekst .granica:before, label.tekst .granica:after {background: var(--boja-domena);}
svg[data-boja="boja"] {fill: var(--boja-domena) !important;}
path[data-boja="boja"] {fill: var(--boja-domena);}
section div.zaglavlje[data-boja="boja"] {background: linear-gradient(60deg, var(--boja-domena-svjetlije), var(--boja-domena-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-domena-rgba);}
fieldset[data-boja="boja"] table.tabela thead tr th {color: var(--boja-domena);}

/** ostale boje **/
button[data-boja="zuta"], .gumb[data-boja="zuta"] {background-color: var(--boja-zuta); color: var(--boja-bijela); border-color: var(--boja-zuta); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-zuta-rgba);}
section[data-boja="zuta"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-zuta-svjetlije), var(--boja-zuta-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-zuta-rgba);}
section[data-boja="zuta"] div.sadrzaj table thead tr th {color: var(--boja-zuta);}
section[data-boja="zuta"] > div.opcije a svg:hover {fill: var(--boja-zuta);}
fieldset[data-boja="zuta"] table.tabela thead tr th {color: var(--boja-zuta);}
label.unos[data-boja="zuta"] input:focus + span.naslov {color: var(--boja-zuta);}
label.unos[data-boja="zuta"] input:focus ~ svg {fill: var(--boja-zuta);}
label.unos[data-boja="zuta"] input ~ span.granica:before, label[data-boja="zuta"] input ~ span.granica:after {background-color: var(--boja-zuta);}
label.kontrolni_okvir[data-boja="zuta"] span.kontrolni_okvir .ukljuceno {color: var(--boja-zuta);}
label.kontrolni_okvir[data-boja="zuta"] span.kontrolni_okvir:before {background-color: var(--boja-zuta);}
label.kontrolni_okvir[data-boja="zuta"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-zuta);}
svg[data-boja="zuta"] {fill: var(--boja-zuta) !important;}
path[data-boja="zuta"] {fill: var(--boja-zuta);}
li[data-boja="zuta"] {color: var(--boja-zuta);}

button[data-boja="narancasta"], .gumb[data-boja="narancasta"] {background-color: var(--boja-narancasta); color: var(--boja-bijela); border-color: var(--boja-narancasta); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-narancasta-rgba);}
section[data-boja="narancasta"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-narancasta-svjetlije), var(--boja-narancasta-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-narancasta-rgba);}
section[data-boja="narancasta"] div.sadrzaj table thead tr th {color: var(--boja-narancasta);}
section[data-boja="narancasta"] > div.opcije a svg:hover {fill: var(--boja-narancasta);}
fieldset[data-boja="narancasta"] table.tabela thead tr th {color: var(--boja-narancasta);}
label.unos[data-boja="narancasta"] input:focus + span.naslov {color: var(--boja-narancasta);}
label.unos[data-boja="narancasta"] input:focus ~ svg {fill: var(--boja-narancasta);}
label.unos[data-boja="narancasta"] input ~ span.granica:before, label[data-boja="narancasta"] input ~ span.granica:after {background-color: var(--boja-narancasta);}
label.kontrolni_okvir[data-boja="narancasta"] span.kontrolni_okvir .ukljuceno {color: var(--boja-narancasta);}
label.kontrolni_okvir[data-boja="narancasta"] span.kontrolni_okvir:before {background-color: var(--boja-narancasta);}
label.kontrolni_okvir[data-boja="narancasta"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-narancasta);}
svg[data-boja="narancasta"] {fill: var(--boja-narancasta) !important;}
path[data-boja="narancasta"] {fill: var(--boja-narancasta);}
li[data-boja="narancasta"] {color: var(--boja-narancasta);}

button[data-boja="zelena"], .gumb[data-boja="zelena"] {background-color: var(--boja-zelena); color: var(--boja-bijela); border-color: var(--boja-zelena); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-zelena-rgba);}
section[data-boja="zelena"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-zelena-svjetlije), var(--boja-zelena-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-zelena-rgba);}
section[data-boja="zelena"] div.sadrzaj table thead tr th {color: var(--boja-zelena);}
section[data-boja="zelena"] > div.opcije a svg:hover {fill: var(--boja-zelena);}
fieldset[data-boja="zelena"] table.tabela thead tr th {color: var(--boja-zelena);}
label.unos[data-boja="zelena"] input:focus + span.naslov {color: var(--boja-zelena);}
label.unos[data-boja="zelena"] input:focus ~ svg {fill: var(--boja-zelena);}
label.unos[data-boja="zelena"] input ~ span.granica:before, label[data-boja="zelena"] input ~ span.granica:after {background-color: var(--boja-zelena);}
label.kontrolni_okvir[data-boja="zelena"] span.kontrolni_okvir .ukljuceno {color: var(--boja-zelena);}
label.kontrolni_okvir[data-boja="zelena"] span.kontrolni_okvir:before {background-color: var(--boja-zelena);}
label.kontrolni_okvir[data-boja="zelena"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-zelena);}
table.tabela tbody tr td[data-boja="zelena"] {background-color: var(--boja-zelena-rgba);}
svg[data-boja="zelena"] {fill: var(--boja-zelena) !important;}
path[data-boja="zelena"] {fill: var(--boja-zelena);}
li[data-boja="zelena"] {color: var(--boja-zelena);}

button[data-boja="plava"], .gumb[data-boja="plava"] {background-color: var(--boja-plava); color: var(--boja-bijela); border-color: var(--boja-plava); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-plava-rgba);}
section[data-boja="plava"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-plava-svjetlije), var(--boja-plava-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-plava-rgba);}
section[data-boja="plava"] div.sadrzaj table thead tr th {color: var(--boja-plava);}
section[data-boja="plava"] > div.opcije a svg:hover {fill: var(--boja-plava);}
fieldset[data-boja="plava"] table.tabela thead tr th {color: var(--boja-plava);}
label.unos[data-boja="plava"] input:focus + span.naslov {color: var(--boja-plava);}
label.unos[data-boja="plava"] input:focus ~ svg {fill: var(--boja-plava);}
label.unos[data-boja="plava"] input ~ span.granica:before, label[data-boja="plava"] input ~ span.granica:after {background-color: var(--boja-plava);}
label.kontrolni_okvir[data-boja="plava"] span.kontrolni_okvir .ukljuceno {color: var(--boja-plava);}
label.kontrolni_okvir[data-boja="plava"] span.kontrolni_okvir:before {background-color: var(--boja-plava);}
label.kontrolni_okvir[data-boja="plava"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-plava);}
table.tabela tbody tr td[data-boja="plava"] {background-color: var(--boja-plava-rgba);}
svg[data-boja="plava"] {fill: var(--boja-plava) !important;}
path[data-boja="plava"] {fill: var(--boja-plava);}
li[data-boja="plava"] {color: var(--boja-plava);}

button[data-boja="siva"], .gumb[data-boja="siva"] {background-color: var(--boja-siva); color: var(--boja-bijela); border-color: var(--boja-siva); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-siva-rgba);}
section[data-boja="siva"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-siva-svjetlije), var(--boja-siva-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-siva-rgba);}
section[data-boja="siva"] div.sadrzaj table thead tr th {color: var(--boja-siva);}
section[data-boja="siva"] > div.opcije a svg:hover {fill: var(--boja-siva);}
fieldset[data-boja="siva"] table.tabela thead tr th {color: var(--boja-siva);}
label.unos[data-boja="siva"] input:focus + span.naslov {color: var(--boja-siva);}
label.unos[data-boja="siva"] input:focus ~ svg {fill: var(--boja-siva);}
label.unos[data-boja="siva"] input ~ span.granica:before, label[data-boja="siva"] input ~ span.granica:after {background-color: var(--boja-siva);}
label.kontrolni_okvir[data-boja="siva"] span.kontrolni_okvir .ukljuceno {color: var(--boja-siva);}
label.kontrolni_okvir[data-boja="siva"] span.kontrolni_okvir:before {background-color: var(--boja-siva);}
label.kontrolni_okvir[data-boja="siva"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-siva);}
table.tabela tbody tr td[data-boja="siva"] {background-color: var(--boja-siva-rgba);}
svg[data-boja="siva"] {fill: var(--boja-siva) !important;}
path[data-boja="siva"] {fill: var(--boja-siva);}
li[data-boja="siva"] {color: var(--boja-siva);}

button[data-boja="crvena"], .gumb[data-boja="crvena"] {background-color: var(--boja-crvena); color: var(--boja-bijela); border-color: var(--boja-crvena); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-crvena-rgba);}
section[data-boja="crvena"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-crvena-svjetlije), var(--boja-crvena-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-crvena-rgba);}
section[data-boja="crvena"] div.sadrzaj table thead tr th {color: var(--boja-crvena);}
section[data-boja="crvena"] > div.opcije a svg:hover {fill: var(--boja-crvena);}
fieldset[data-boja="crvena"] table.tabela thead tr th {color: var(--boja-crvena);}
label.unos[data-boja="crvena"] input:focus + span.naslov {color: var(--boja-crvena);}
label.unos[data-boja="crvena"] input:focus ~ svg {fill: var(--boja-crvena);}
label.unos[data-boja="crvena"] input ~ span.granica:before, label[data-boja="crvena"] input ~ span.granica:after {background-color: var(--boja-crvena);}
label.kontrolni_okvir[data-boja="crvena"] span.kontrolni_okvir .ukljuceno {color: var(--boja-crvena);}
label.kontrolni_okvir[data-boja="crvena"] span.kontrolni_okvir:before {background-color: var(--boja-crvena);}
label.kontrolni_okvir[data-boja="crvena"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-crvena);}
table.tabela tbody tr td[data-boja="crvena"] {background-color: var(--boja-crvena-rgba);}
svg[data-boja="crvena"] {fill: var(--boja-crvena) !important;}
path[data-boja="crvena"] {fill: var(--boja-crvena);}
li[data-boja="crvena"] {color: var(--boja-crvena);}

button[data-boja="roza"], .gumb[data-boja="roza"] {background-color: var(--boja-roza); color: var(--boja-bijela); border-color: var(--boja-roza); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-roza-rgba);}
section[data-boja="roza"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-roza-svjetlije), var(--boja-roza-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-roza-rgba);}
section[data-boja="roza"] div.sadrzaj table thead tr th {color: var(--boja-roza);}
section[data-boja="roza"] > div.opcije a svg:hover {fill: var(--boja-roza);}
fieldset[data-boja="roza"] table.tabela thead tr th {color: var(--boja-roza);}
label.unos[data-boja="roza"] input:focus + span.naslov {color: var(--boja-roza);}
label.unos[data-boja="roza"] input:focus ~ svg {fill: var(--boja-roza);}
label.unos[data-boja="roza"] input ~ span.granica:before, label[data-boja="roza"] input ~ span.granica:after {background-color: var(--boja-roza);}
label.kontrolni_okvir[data-boja="roza"] span.kontrolni_okvir .ukljuceno {color: var(--boja-roza);}
label.kontrolni_okvir[data-boja="roza"] span.kontrolni_okvir:before {background-color: var(--boja-roza);}
label.kontrolni_okvir[data-boja="roza"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-roza);}
table.tabela tbody tr td[data-boja="roza"] {background-color: var(--boja-roza-rgba);}
svg[data-boja="roza"] {fill: var(--boja-roza) !important;}
path[data-boja="roza"] {fill: var(--boja-roza);}
li[data-boja="roza"] {color: var(--boja-roza);}

button[data-boja="ljubicasta"], .gumb[data-boja="ljubicasta"] {background-color: var(--boja-ljubicasta); color: var(--boja-bijela); border-color: var(--boja-ljubicasta); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-ljubicasta-rgba);}
section[data-boja="ljubicasta"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-ljubicasta-svjetlije), var(--boja-ljubicasta-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-ljubicasta-rgba);}
section[data-boja="ljubicasta"] div.sadrzaj table thead tr th {color: var(--boja-ljubicasta);}
section[data-boja="ljubicasta"] > div.opcije a svg:hover {fill: var(--boja-ljubicasta);}
fieldset[data-boja="ljubicasta"] table.tabela thead tr th {color: var(--boja-ljubicasta);}
label.unos[data-boja="ljubicasta"] input:focus + span.naslov {color: var(--boja-ljubicasta);}
label.unos[data-boja="ljubicasta"] input:focus ~ svg {fill: var(--boja-ljubicasta);}
label.unos[data-boja="ljubicasta"] input ~ span.granica:before, label[data-boja="ljubicasta"] input ~ span.granica:after {background-color: var(--boja-ljubicasta);}
label.kontrolni_okvir[data-boja="ljubicasta"] span.kontrolni_okvir .ukljuceno {color: var(--boja-ljubicasta);}
label.kontrolni_okvir[data-boja="ljubicasta"] span.kontrolni_okvir:before {background-color: var(--boja-ljubicasta);}
label.kontrolni_okvir[data-boja="ljubicasta"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-ljubicasta);}
table.tabela tbody tr td[data-boja="ljubicasta"] {background-color: var(--boja-ljubicasta-rgba);}
svg[data-boja="ljubicasta"] {fill: var(--boja-ljubicasta) !important;}
path[data-boja="ljubicasta"] {fill: var(--boja-ljubicasta);}
li[data-boja="ljubicasta"] {color: var(--boja-ljubicasta);}

button[data-boja="suza"], .gumb[data-boja="suza"] {background-color: var(--boja-suza); color: var(--boja-bijela); border-color: var(--boja-suza); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-suza-rgba);}
section[data-boja="suza"] div.zaglavlje {background: linear-gradient(60deg, var(--boja-suza-svjetlije), var(--boja-suza-tamnije)); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px var(--boja-suza-rgba);}
section[data-boja="suza"] div.sadrzaj table thead tr th {color: var(--boja-suza);}
section[data-boja="suza"] > div.opcije a svg:hover {fill: var(--boja-suza);}
fieldset[data-boja="suza"] table.tabela thead tr th {color: var(--boja-suza);}
label.unos[data-boja="suza"] input:focus + span.naslov {color: var(--boja-suza);}
label.unos[data-boja="suza"] input:focus ~ svg {fill: var(--boja-suza);}
label.unos[data-boja="suza"] input ~ span.granica:before, label[data-boja="suza"] input ~ span.granica:after {background-color: var(--boja-suza);}
label.kontrolni_okvir[data-boja="suza"] span.kontrolni_okvir .ukljuceno {color: var(--boja-suza);}
label.kontrolni_okvir[data-boja="suza"] span.kontrolni_okvir:before {background-color: var(--boja-suza);}
label.kontrolni_okvir[data-boja="suza"] span.kontrolni_okvir input[type=checkbox]:checked + span.kontrolni_okvir .ukljuceno {color: var(--boja-suza);}
table.tabela tbody tr td[data-boja="suza"] {background-color: var(--boja-suza-rgba);}
svg[data-boja="suza"] {fill: var(--boja-suza) !important;}
path[data-boja="suza"] {fill: var(--boja-suza);}
li[data-boja="suza"] {color: var(--boja-suza);}