var egradani_traka = new function () {

    this.url = "https://eusluge-nav.gov.hr/";
    this.url_egradani = "https://gov.hr";
    this.url_eposlovanje = "";

    this.impaired_querystring_on = null;
    this.impaired_querystring_off = null;

    this.selectEntityUrl = "";

    this.messagesInterval = 30000;

    this.debug = false;

    if (this.debug) {
        //this.impaired_querystring_on = "impaired=1";
        //this.impaired_querystring_off = "impaired=0";
    }

    this.query = null;
    var query = null;
    this.accent = { "š": "s", "đ": "d", "č": "c", "ć": "c", "ž": "z" };


    this.services = [];

    this.options = {
        show_vision_impaired: true,
        show_dyslexia: true,
        show_font_resize: true,
        show_login_button: true,
        user: {},
        mailboxUrl: "",
        loginUrl: "",
        language: "hr"
    };

    var parent = this;

    this.init = function (options) {
        if (options) {
            this.options = options;
        }

        var me = this;
        window.jQuery && jQuery.fn && /^(1\.[8-9]|2\.[0-9]|1\.1[0-2]|3\.[0-9])/.test(
            jQuery.fn.jquery) ? 
            (window.console && console.log("Using existing jQuery version " + jQuery.fn.jquery), query = window.jQuery, parent.query = query, preloadFiles(), me.setOptions()) 
                : 
                (window.console && console.log("Loading jQuery"), loadJavaScript(parent.url + "js/jquery3.4.1.min.js", 
                    function() {
                        parent.query = jQuery.noConflict(!0);
                        jQuery = parent.query;
                        query = parent.query;
                        preloadFiles();
                        me.setOptions();
                       
                    }
                )
            );

        
    };

    this.initServices = function (servicesString) {

        parent.services = [];
        this.serviceGroups = servicesString;
        this.serviceGroups.map(function (obj) {
            query(obj.sl).each(function (i, el) {
                parent.services.push(el);
            });
        });

        parent.services = parent.services.sort(compareByName);
    }

    this.setOptions = function () {
        query("#vision_impaired").css("display", this.options.show_vision_impaired ? "block" : "none");
        query("#dyslexia").css("display", this.options.show_dyslexia ? "block" : "none");
        query("#resize").css("display", this.options.show_font_resize ? "block" : "none");
        query(".user_logged").css("display", this.options.user.vjerodajnica > 0 ? "block" : "none");
        query(".log_in").css("display", this.options.user.vjerodajnica == 0 ? "" : "none");
        query(".log_out").css("display", this.options.user.vjerodajnica > 0 ? "" : "none");
        query("#log_button").css("display", this.options.show_login_button ? "" : "none");

        query(".foreign_user").css("display", this.options.user.personidentifier =="" ? "block" : "none");
        query("#egradani_user_person_identifier").css("display", this.options.user.personidentifier != "" ? "block" : "none");
        

        this.setLanguage(this.options.language);
        
        //query("#user_home").children().prop("href", this.options.loginUrl);

        query("#zastupanje-subjekti").prop("action", "");

        buildEntityList(this.options.entityList);


        
    }

    function buildEntityList(entityList) {
        
        var li = "";
        query.each(entityList, function (i, obj) {
            li += "<li><label><span class='radio_select'><input type='radio' name='rg0' value='' id='r_" + i + "' data-id='" + i + "' data-oib='" + obj.oib + "'><span class='zgl-area'></span></span></label><label for='r_" + i + "'>" + obj.name + " / " + obj.oib + "</label></li>";
        });
        query(".selection fieldset ul").empty().append(li);
    }

    function renderVjerodajnica(vjerodajnica) {
        switch (vjerodajnica) {
            case 2:
                return parent.options.translation["niska"];
            case 3:
                return parent.options.translation["značajna"];
            case 4:
                return parent.options.translation["visoka"];
        }
        return vjerodajnica;
    }

    function preloadFiles() {
        log("preloadFiles");
        
        buildHeader();
        initSearch();

        css();
        cssImpaired();
        cssDyslexic();
        //fonts();

        loadJavaScript(parent.url + 'js/zaglavlje.js');

        checkLoadJavascript(query.creaseFont, 'js/jquery.creaseFont.min.js', function () {
            initCreaseFont();
        });

        checkLoadJavascript(query.magnificPopup, 'js/jquery.magnific-popup.min.js', function () {
            initMagnificPopup();
        });
        

        if (parent.impaired_querystring_on != null) {
            if (location.search.indexOf(parent.impaired_querystring_on) > -1) {
                parent.toggleImpaired();
            }
        }
        parent.getMessagesCount();
        setInterval(parent.getMessagesCount, parent.messagesInterval);
    }

    function checkLoadJavascript(library, source, callback) {
        if (library == null) {
            loadJavaScript(parent.url + source, function () {
                callback();
                console.log("Loaded " + source);
            });
        }
        else {
            
            callback();
        }
    }

    function initMagnificPopup() {
        var interval = setInterval(function () {
            if (query('.zgl-dialog-popup').magnificPopup !== undefined) {
                query('.zgl-dialog-popup').magnificPopup({
                    type: 'inline',
                    fixedContentPos: true,
                    closeOnBgClick: false
                });
                clearInterval(interval);
                setTimeout(function () {
                    eval("");
                }, 500);
            }
        }, 50);
        
        
    }

    function initCreaseFont() {
        var interval = setInterval(function () {
            if (query.magnificPopup !== undefined) {
                query.creaseFont({
                    content: '.resizeable',
                    maxSize: 120,
                    minSize: 80,
                    stepSize: 5,
                    bFontLarge: '#larger',
                    bFontDefault: '#default',
                    bFontSmall: '#smaller',
                    animate: true,
                    cookieLifetime: 365
                });
                clearInterval(interval);
            }
        }, 50);
    }

    function loadImpairedUrl() {
        if (parent.impaired_querystring_on != null) {
            var param = parent.impaired_querystring_on.split("=");
            if (param.length > 1) {
                var query_param_value = getParameterByName(param[0]);
                if (query_param_value == null) {
                    document.location.href += document.location.href.indexOf("?") == -1 ? "?" + parent.impaired_querystring_on : parent.impaired_querystring_on;
                }
                else if (query_param_value != param[1]){
                    var replaceQuery = param[0] + "=" + query_param_value;
                    document.location.href = document.location.href.replace(replaceQuery, parent.impaired_querystring_on);
                }
                else {
                    var replaceQuery = parent.impaired_querystring_on;
                    if (parent.impaired_querystring_off == null) parent.impaired_querystring_off = "";
                    document.location.href = document.location.href.replace(replaceQuery, parent.impaired_querystring_off);
                }
            }
        }
    }

    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    function checkImpaired() {
        if (parent.impaired_querystring_on != null) {
            loadImpairedUrl();
        }
        else {
            toggleImpaired();
        } 
    }


    function checkBig() {
        if (parent.big_querystring_on != null) {
            loadBigUrl();
        }
        else {
            toggleBig();
        } 
    }


    function loadBigUrl() {
        if (parent.big_querystring_on != null) {
            var param = parent.big_querystring_on.split("=");
            if (param.length > 1) {
                var query_param_value = getParameterByName(param[0]);
                if (query_param_value == null) {
                    document.location.href += document.location.href.indexOf("?") == -1 ? "?" + parent.big_querystring_on : parent.big_querystring_on;
                }
                else if (query_param_value != param[1]) {
                    var replaceQuery = param[0] + "=" + query_param_value;
                    document.location.href = document.location.href.replace(replaceQuery, parent.big_querystring_on);
                }
                else {
                    var replaceQuery = parent.big_querystring_on;
                    if (parent.impaired_querystring_off == null) parent.impaired_querystring_off = "";
                    document.location.href = document.location.href.replace(replaceQuery, parent.impaired_querystring_off);
                }
            }
        }
    }

    this.toggleImpaired = function (impaired) {
        parent.impaired = impaired;
        query("#css_impaired").attr("media", parent.impaired ? "all" : "none");
        query("#css_impaired").attr("disabled", !parent.impaired);
    }
    this.toggleDyslexic = function (dyslexic) {
        parent.dyslexic = dyslexic;
        query("#css_dyslexic").attr("media", parent.dyslexic ? "all" : "none");
        query("#css_dyslexic").attr("disabled", !parent.dyslexic);
    }


    function buildHeader() {
        log("buildHeader");
        var egradani_traka_holder = query(".egradani_traka-holder");
        if (egradani_traka_holder.length == 0) egradani_traka_holder = query("body");

        egradani_traka_holder.empty().prepend("\
    <div id='egradjani' class='notranslate' translate='no'>\
\
        <div class='top_ribbon'>\
\
            <div id='logo' class='zgl-section'>\
\
                <div class='zgl-segment'>\
                    <a href='https://gov.hr' alt='Početna stranica portala' id='egradani_pocetna_stranica_portala_alt'>\
                        <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/logo.svg' alt='Logotip e-Građani' class='zgl-image'></div>\
                        <div class='zgl-label'>\
                            <span id='site_title'>e-Građani</span>\
                            <span id='site_subtitle'>Informacije i usluge</span>\
                        </div>\
                    </a>\
                </div>\
\
                <div id='navmainswitch' class='zgl-segment'>\
                    <a href='javascript:void(0);' class='zgl-icon'>&#xe918;</a>\
                </div>\
\
            </div>\
\
\
            <nav id='shell'>\
                <div id='function' class='zgl-section'>\
\
                    <div id='filter' class='zgl-segment'>\
                        <a href='javascript:void(0);' id='filterswitch'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/filtar_usluge.svg' alt='Filtrirajte e-usluge' class='zgl-image' id='egradani_filtriraje_eusluge_alt'></div>\
                            <div class='zgl-label' id='egradani_filtriraje_eusluge'>Filtrirajte e-usluge</div>\
                        </a>\
                    </div>\
\
                    <div id='user_home' class='zgl-segment user_logged'>\
                        <a href='https://mojprofil.gov.hr/'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/profil_zaglavlje.svg' alt='Moj profil' class='zgl-image' id='egradani_moj_profil_alt'></div>\
                            <div class='zgl-label' id='egradani_moj_profil'>Moj profil</div>\
                        </a>\
                    </div>\
\
                    <div class='zgl-segment user_logged' id='user_inbox'>\
                        <a href='javascript:void(0);'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/pretinac.svg' alt='Korisnički pretinac' class='zgl-image' id='egradani_korisnicki_pretinac_alt'></div>\
                            <div class='zgl-label' id='egradani_korisnicki_pretinac'>Korisnički pretinac</div>\
                            <div class='unread_messages'></div>\
                        </a>\
                    </div>\
\
                    <div id='log_button' class='zgl-segment user_not_logged'>\
                        <a href='https://m.samaragrad.ru/namabetre-wequaher-tredas-lavebenuk-jertaw-tafrediko/' class='zgl-button log_in'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/prijava.svg' alt='Prijava' class='zgl-image' id='egradani_prijava_alt'></div>\
                            <div class='zgl-label' id='egradani_prijava'>Prijava</div>\
                        </a>\
                        <a href='https://mojprofil.gov.hr/Home/LogOut' class='zgl-button log_out'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/odjava.svg' alt='Odjava' class='zgl-image' id='egradani_odjava_alt'></div>\
                            <div class='zgl-label' id='egradani_odjava'>Odjava</div>\
                        </a>\
                    </div>\
\
                    <div class='zgl-segment' id='vision_impaired'>\
                        <a href='javascript:void(0);' id='nonimpaired' class='zgl-tooltip'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/impaired.svg' alt='Prilagodba slabovidnosti' id='egradani_prilagodba_slabovidnosti_alt'></div>\
                            <div class='zgl-label' id='egradani_prilagodba_slabovidnosti'>Prilagodba slabovidnosti</div>\
                        </a>\
                        <a href='javascript:void(0);' id='impaired' class='zgl-tooltip'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/non-impaired.svg' alt='Ukloni prilagodbu slabovidnosti' id='egradani_prilagodba_slabovidnosti_ukloni_alt'></div>\
                            <div class='zgl-label' id='egradani_prilagodba_slabovidnosti_ukloni'>Ukloni prilagodbu slabovidnosti</div>\
                        </a>\
                    </div>\
\
                    <div class='zgl-segment' id='dyslexia'>\
                        <a href='javascript:void(0);' id='nondyslexic' class='zgl-tooltip'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/dyslexic.svg' alt='Prilagodba disleksiji' id='egradani_prilagodba_disleksiji_alt'></div>\
                            <div class='zgl-label' id='egradani_prilagodba_disleksiji'>Prilagodba disleksiji</div>\
                        </a>\
                        <a href='javascript:void(0);' id='dyslexic' class='zgl-tooltip'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/non-dyslexic.svg' alt='Ukloni prilagodbu disleksiji' id='egradani_prilagodba_disleksiji_ukloni_alt'></div>\
                            <div class='zgl-label' id='egradani_prilagodba_disleksiji_ukloni'>Ukloni prilagodbu disleksiji</div>\
                        </a>\
                    </div>\
\
                    <div class='zgl-segment' id='resize'>\
                        <a href='javascript:void(0);' id='fontsize' class='zgl-tooltip'>\
                            <div class='zgl-icon'><img src='https://eusluge-nav.gov.hr/img/velicina_pisma.svg' alt='Veličina pisma' id='egradani_velicina_pisma_alt'></div>\
                            <div class='zgl-label' id='egradani_velicina_pisma'>Veličina pisma</div>\
                        </a>\
                    </div>\
\
                </div>\
            </nav>\
\
\
            <div id='fontsize_slideout'>\
                <a href='javascript:void(0);' class='zgl-close zgl-icon'>&#xe907;</a>\
                <div class='lining'>\
                    <span class='zgl-label' id='egradani_velicina_pisma_2'>Veličina pisma:</span> <a href='javascript:void(0);' id='smaller' class='zgl-icon'>&#xe954;</a><a href='javascript:void(0);' id='default' class='zgl-icon'>&#xe981;</a><a href='javascript:void(0);' id='larger' class='zgl-icon'>&#xe955;</a>\
                </div>\
            </div>\
\
        </div>\
\
        <div id='current_user' class='user_logged'>\
            <div class='zgl-trigger'>\
                <div class='zgl-icon'>&#xe945;</div>\
                <a href='javascript:void(0);' id='user_switch'></a>\
            </div>\
\
            <div id='user_slideout'>\
                <p class='zgl-icon'>&#xe945;</p>\
                <p class='user_name'></p>\
                <p id='egradani_user_oib'>OIB: </p>\
                <p id='egradani_user_razina_sigurnosti'>Razina sigurnosti: </p>\
                <p class='unread'><a href='javascript:void(0);' id='egradani_user_novih_poruka' class='unread'>Novih poruka: </a></p>\
                <a id='egradani_user_promjena_subjekta' href='#promjena_subjekta' class='action zgl-dialog-popup'>Promjena subjekta</a>\
            </div>\
        </div>\
\
        <div id='filter_holder' class='resizeable'>\
            <div id='filter_slideout'>\
                <div class='zgl-column_width'>\
\
                    <a href='javascript:void(0);' id='filter_close' class='zgl-icon'>&#xe907;</a>\
                    <div class='asymmetric'>\
                        <div class='search'>\
                            <form id='form0' name='form0' method='get' action=''>\
                                <h3><label for='filter_search' id='egradani_filter_filtrirajte_eusluge'>Filtrirajte e-usluge</label></h3>\
                                <div class='zgl-searchbox'>\
                                    <input id='filter_search' name='filter_search' class='zgl-inputfield' type='text' value='' size='20' maxlength='250' placeholder=''>\
                                    <input class='zgl-icon zgl-searchbutton' id='btn' name='btn' value='&#xf002;'>\
                                </div>\
                            </form>\
                        </div>\
                        <div class='zgl-sidekick'>\
                            <p class='filter_results' id='filterSummary' style='display:none;'></p>\
                        </div>\
                    </div>\
\
                    <div class='filter_results' style='display:none;'>\
                        <h4 id='egradani_filter_rezultati_filtriranja'>Rezultati filtriranja:</h4>\
\
                        <div class='filtering_results'>\
                            <ul>\
                            </ul>\
                        </div>\
                    </div>\
                    <div class='zgl-showmore'><a href='#' id='egradani_filter_prikazi_sve_rezultate'>Prikaži sve rezultate</a></div>\
\
                </div>\
            </div>\
        </div>\
\
    </div>\
\
\
\
    <!-- start modal Promjena subjekta -->\
\
    <div class='zgl-modal resizeable large mfp-hide' id='promjena_subjekta'>\
        <div class='lining'>\
\
            <div class='assist'><a href='https://gov.hr/hr/pomoc/22' class='zgl-icon'></a></div>\
\
            <h3 id='egradani_modal_izaberite_subjekt'>Izaberite subjekt</h3>\
            <div class='form_container'>\
                <form id='zastupanje-pretraga' name='zastupanje-pretraga' method='get' action=''>\
                    <label for='x' class='block_label' id='egradani_izaberite_subjekt_koji_zelite_zastupati'>Izaberite subjekt koji želite zastupati u sustavu:</label>\
                    <div class='zgl-searchbox'>\
                        <input name='view' type='hidden' id='view' value='search'>\
                        <input id='filter_entity_search' name='x' class='zgl-inputfield' type='text' placeholder='Pretražite subjekte' size='20' maxlength='250'>\
                        <input class='zgl-icon zgl-searchbutton' name='btnPotvrdite_2' id='btnPotvrdite_2' type='button' value='&#xf002;'>\
                    </div>\
                </form>\
            </div>\
\
            <div class='results'>\
                <form id='zastupanje-subjekti' name='zastupanje-subjekti'>\
\
                    <div class='selection scroll_me'>\
                        <fieldset>\
                            <ul>\
                            </ul>\
                        </fieldset>\
                    </div>\
                    <input class='submit_button short' id='btnPotvrdite' onclick='' type='button' value='Potvrdite odabir'>\
                </form>\
            </div>\
\
        </div>\
    </div>\
\
    <!-- end modal Promjena subjekta -->\
");
        initHeader();
    }

    function initSearch() {
        query("#filter_search").on("keydown", function (event) {
            if (event.which == 13) event.preventDefault();
            setTimeout(function () {
                searchServices(query("#filter_search").val());
            }, 100);
        });

        query("#filter_entity_search").on("keydown", function (event) {
            if (event.which == 13) event.preventDefault();
            setTimeout(function () {
                searchEntity(query("#filter_entity_search").val());
            }, 100);
        });

        query("#egradani_filter_prikazi_sve_rezultate").on("click", function () {
            searchServices("", true);
        });
    }

    function initHeader() {

        query("#btnPotvrdite, #btnPotvrdite_2").on("click", function () {
            if (parent.selectEntityUrl == undefined || parent.selectEntityUrl == "") {
                query.magnificPopup.close();
                return;
            }
            var url = parent.selectEntityUrl;
            var selectedEntity = query("#promjena_subjekta input[type=radio]:checked");
            if (selectedEntity.length > 0) {
                //var id = selectedEntity.data("id");
                //var entity = parent.options.entityList[id];
                var oib = selectedEntity.data("oib");
                var entity = parent.options.entityList.find(e => e.oib == oib);


                if (entity.isPerson) {
                    url = url.replace(/{ForPersonOib}/gi, entity.oib);
                    url = url.replace(/{ForLegalIps}/gi, "");
                    url = url.replace(/{ForLegalIzvor_reg}/gi, "");
                    url = url.replace(/{ToLegalIps}/gi, "");
                    url = url.replace(/{ToLegalIzvor_reg}/gi, "");
                }
                else {
                    url = url.replace(/{ForPersonOib}/gi, "");
                    url = url.replace(/{ForLegalIps}/gi, entity.oib);
                    url = url.replace(/{ForLegalIzvor_reg}/gi, entity.forLegalIzvor_reg);
                    url = url.replace(/{ToLegalIps}/gi, entity.toLegalIps);
                    url = url.replace(/{ToLegalIzvor_reg}/gi, entity.toLegalIzvor_reg);
                }

                document.location.href = url;
                query.magnificPopup.close();
            }
        });

    };

    function showEntitySearch() {
        query.magnificPopup.open({
            items: {
                src: '#promjena_subjekta', // can be a HTML string, jQuery object, or CSS selector
                type: 'inline'
            }
        });
    }
    
    function replaceAccent(s) {
        if (s == undefined) return "";
        var res = "";
        for (var i = 0; i < s.length; i++) {
            res += parent.accent[s[i]] || s[i];
        }
        res = res.toLowerCase();
        return res;
    }

    var tim = 0;
    function prepareSearchTerms(filter) {
        var searchTerms = filter.trim().replace(/\s+/g, " ").toLowerCase().split(" ");
        for (var i = 0; i < searchTerms.length; i++) {
            var obj = replaceAccent(searchTerms[i]);
            if (obj != "" && obj.length > 3) {
                obj = obj.slice(0, obj.length - 1);
                searchTerms[i] = obj;
            }
        };
        return searchTerms;
    }

    function searchEntity(filter) {
        var searchTerms = prepareSearchTerms(filter);

        if (searchTerms == "" || searchTerms == undefined) {
            buildEntityList(parent.options.entityList);
            return;
        }

        clearInterval(tim);
        tim = setInterval(function () {
            log("tražim '" + searchTerms + "'");
            
            var filteredList = [];

            query.each(parent.options.entityList, function (i, entity) {
                var found = true;
                query.each(searchTerms, function (i, searchTerm) {
                    if (replaceAccent(entity.name.toLowerCase()).indexOf(searchTerm) == -1 && entity.oib.indexOf(filter) == -1) {
                        found = false;
                        return false;
                    }
                });
                if (found) {
                    filteredList.push(entity);
                }
            })

            buildEntityList(filteredList);

            clearInterval(tim);
        });
    }

    function searchServices(filter, showAll) {
        var searchTerms = prepareSearchTerms(filter);

        clearInterval(tim);
        tim = setInterval(function() {
            log("tražim '" + searchTerms + "'");


            if (searchTerms == "" && !showAll) {
                query(".filter_results").hide();
            }
            else {
                query(".filter_results").show();
            }

            var filteredServices = [];

            if (showAll) {
                filteredServices = parent.services;
            }
            else {
                query(parent.services).each(function (i, service) {
                    var foundService = false;
                    query.each(searchTerms, function (i, obj) {
                        if (replaceAccent(service.name).indexOf(obj) > -1 || replaceAccent(service.napomena).indexOf(obj) > -1) {
                            foundService = true;
                            return;
                        }
                        else {
                            foundService = false;
                        }
                    });
                    if (foundService) {
                        filteredServices.push(service);
                    }
                });
            }

            query(".noresults").remove();

            if (filteredServices.length > 0) {
                var li = "<ul>";
                query(filteredServices).each(function (i, service) {
                    li += "<li><a href='" + service.urlProd +"'>" + service.name + "</a></li>"
                });
                li += "</ul>";
                query(".filtering_results").empty().append(li).show();
                
            }
            else {
                query(".filtering_results").hide();
                query(".filter_results h4").after("<span class='noresults'>" + parent.searchNoResults + "</span>");
            }

            query("#filterSummary").html(parent.searchSummary
                .replace("{0}", filteredServices.length)
                .replace("{1}", parent.services.length));

            clearInterval(tim);


        }, 250);   
    }

    function loadCSS(src) {
        query("<link>")
            .appendTo(query("head"))
            .attr({
                type : "text/css",
                rel : "stylesheet",
                href : src
            });
    }

    function loadJavaScript(src, callback) {
        
        var c = document.getElementsByTagName("head")[0];
        var a = document.createElement("script");
        a.type = "text/javascript", a.src = src, callback != undefined && (
            a.onload = a.onreadystatechange = function () {
                log("callback");
                if(a.readyState != undefined) log(a.readyState);
                (!a.readyState || /loaded|complete/.test(a.readyState)) && (a.onload = a.onreadystatechange = null, c && a.parentNode && c.removeChild(a), a = undefined, callback())
            }
            ), c.insertBefore(a, c.firstChild);

    }

    function log(msg) {
        if (parent.debug) console.log(msg);
    }
	
    function css(){
        var cssInline = "@charset 'utf-8';\
/* CSS Document v. 1.3*/\
\
/* Magnific Popup */\
\
.mfp-bg {\
top: 0;\
left: 0;\
width: 100%;\
height: 100%;\
z-index: 1042;\
overflow: hidden;\
position: fixed;\
background: #0b0b0b;\
opacity: 0.8;\
}\
.mfp-wrap {\
top: 0;\
left: 0;\
width: 100%;\
height: 100%;\
z-index: 1043;\
position: fixed;\
outline: none !important;\
-webkit-backface-visibility: hidden;\
}\
.mfp-container {\
text-align: center;\
position: absolute;\
width: 100%;\
height: 100%;\
left: 0;\
top: 0;\
}\
.mfp-container:before {\
content: '';\
display: inline-block;\
height: 100%;\
vertical-align: middle;\
}\
.mfp-align-top .mfp-container:before {\
display: none;\
}\
.mfp-content {\
position: relative;\
display: inline-block;\
vertical-align: middle;\
margin: 0 auto;\
text-align: left;\
z-index: 1045;\
}\
.mfp-inline-holder .mfp-content,\
.mfp-ajax-holder .mfp-content {\
width: 100%;\
cursor: auto;\
}\
.mfp-ajax-cur {\
cursor: progress;\
}\
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {\
cursor: -moz-zoom-out;\
cursor: -webkit-zoom-out;\
cursor: zoom-out;\
}\
.mfp-zoom {\
cursor: pointer;\
cursor: -webkit-zoom-in;\
cursor: -moz-zoom-in;\
cursor: zoom-in;\
}\
.mfp-auto-cursor .mfp-content {\
cursor: auto;\
}\
.mfp-close,\
.mfp-arrow,\
.mfp-preloader,\
.mfp-counter {\
-webkit-user-select: none;\
-moz-user-select: none;\
user-select: none;\
}\
.mfp-loading.mfp-figure {\
display: none;\
}\
.mfp-hide {\
display: none !important;\
}\
.mfp-preloader {\
color: #ccc;\
position: absolute;\
top: 50%;\
width: auto;\
text-align: center;\
margin-top: -0.8em;\
left: 8px;\
right: 8px;\
z-index: 1044;\
}\
.mfp-preloader a {\
color: #ccc;\
}\
.mfp-preloader a:hover {\
color: #fff;\
}\
.mfp-s-ready .mfp-preloader {\
display: none;\
}\
.mfp-s-error .mfp-content {\
display: none;\
}\
button.mfp-close,\
button.mfp-arrow {\
overflow: visible;\
cursor: pointer;\
background: transparent;\
border: 0;\
-webkit-appearance: none;\
display: block;\
outline: none;\
padding: 0;\
z-index: 1046;\
box-shadow: none;\
touch-action: manipulation;\
}\
button::-moz-focus-inner {\
padding: 0;\
border: 0;\
}\
.mfp-close {\
width: 44px;\
height: 44px;\
line-height: 44px;\
position: absolute;\
right: 0;\
top: 0;\
text-decoration: none;\
text-align: center;\
opacity: 0.65;\
padding: 0 0 18px 10px;\
color: #fff;\
font-style: normal;\
font-size: 28px;\
font-family: 'Roboto';\
}\
.mfp-close:hover,\
.mfp-close:focus {\
opacity: 1;\
}\
.mfp-close:active {\
top: 1px;\
}\
.zgl-modal .mfp-close {\
top: 0;\
right: 0;\
width: 51px;\
height: 51px;\
padding: 0;\
font-size: 1px;\
line-height: 1px;\
opacity: 1;\
color: transparent;\
border-left: 1px solid #fff;\
border-bottom: 1px solid #fff;\
border-top-right-radius: 4px;\
}\
\
.zgl-modal .mfp-close::before {\
display: block;\
height: 50px;\
font-family: 'Icomoon' !important;\
content: '\\e95a';\
font-size: 22px;\
line-height: 50px;\
text-align: center;\
color: #ca1720;\
background-color: #e0e0e4;\
border-top-right-radius: 4px;\
}\
.zgl-modal .mfp-close:hover::before {\
color: #000;\
}\
.mfp-image-holder .mfp-close,\
.mfp-iframe-holder .mfp-close {\
color: #ccc;\
right: -6px;\
text-align: right;\
padding-right: 6px;\
width: 100%;\
}\
.mfp-counter {\
position: absolute;\
top: 0;\
right: 0;\
color: #ccc;\
font-size: 12px;\
line-height: 18px;\
white-space: nowrap;\
}\
.mfp-arrow {\
position: absolute;\
opacity: 0.65;\
margin: 0;\
top: 50%;\
margin-top: -55px;\
padding: 0;\
width: 90px;\
height: 110px;\
-webkit-tap-highlight-color: transparent;\
}\
.mfp-arrow:active {\
margin-top: -54px;\
}\
.mfp-arrow:hover,\
.mfp-arrow:focus {\
opacity: 1;\
}\
.mfp-arrow:before,\
.mfp-arrow:after {\
content: '';\
display: block;\
width: 0;\
height: 0;\
position: absolute;\
left: 0;\
top: 0;\
margin-top: 35px;\
margin-left: 35px;\
border: medium inset transparent;\
}\
.mfp-arrow:after {\
border-top-width: 13px;\
border-bottom-width: 13px;\
top: 8px;\
}\
.mfp-arrow:before {\
border-top-width: 21px;\
border-bottom-width: 21px;\
opacity: 0.7;\
}\
\
.mfp-arrow-left {\
left: 0;\
}\
.mfp-arrow-left:after {\
border-right: 17px solid #fff;\
margin-left: 31px;\
}\
.mfp-arrow-left:before {\
margin-left: 25px;\
border-right: 27px solid #3f3f3f;\
}\
\
.mfp-arrow-right {\
right: 0;\
}\
.mfp-arrow-right:after {\
border-left: 17px solid #fff;\
margin-left: 39px;\
}\
.mfp-arrow-right:before {\
border-left: 27px solid #3f3f3f;\
}\
.mfp-iframe-holder {\
padding-top: 40px;\
padding-bottom: 40px;\
}\
.mfp-iframe-holder .mfp-content {\
line-height: 0;\
width: 100%;\
max-width: 900px;\
}\
.mfp-iframe-holder .mfp-close {\
top: -40px;\
}\
.mfp-iframe-scaler {\
width: 100%;\
height: 0;\
overflow: hidden;\
padding-top: 56.25%;\
}\
.mfp-iframe-scaler iframe {\
position: absolute;\
display: block;\
top: 0;\
left: 0;\
width: 100%;\
height: 100%;\
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);\
background: #000;\
}\
img.mfp-img {\
width: auto;\
max-width: 100%;\
height: auto;\
display: block;\
line-height: 0;\
box-sizing: border-box;\
padding: 40px 0 40px;\
margin: 0 auto;\
}\
.mfp-figure {\
line-height: 0;\
}\
.mfp-figure:after {\
content: '';\
position: absolute;\
left: 0;\
top: 40px;\
bottom: 40px;\
display: block;\
right: 0;\
width: auto;\
height: auto;\
z-index: -1;\
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);\
background: #444;\
}\
.mfp-figure small {\
color: #bdbdbd;\
display: block;\
font-size: 12px;\
line-height: 14px;\
}\
.mfp-figure figure {\
margin: 0;\
}\
.mfp-bottom-bar {\
margin-top: -36px;\
position: absolute;\
top: 100%;\
left: 0;\
width: 100%;\
cursor: auto;\
}\
.mfp-title {\
text-align: left;\
line-height: 18px;\
color: #f3f3f3;\
word-wrap: break-word;\
padding-right: 36px;\
}\
.mfp-image-holder .mfp-content {\
max-width: 100%;\
}\
.mfp-gallery .mfp-image-holder .mfp-figure {\
cursor: pointer;\
}\
\
\
@media all and (max-width: 900px) {\
\
.mfp-arrow {\
-webkit-transform: scale(0.75);\
transform: scale(0.75);\
}\
.mfp-arrow-left {\
-webkit-transform-origin: 0;\
transform-origin: 0;\
}\
.mfp-arrow-right {\
-webkit-transform-origin: 100%;\
transform-origin: 100%;\
}\
\
}\
\
@media all and (max-width: 800px) and (orientation: landscape), all and (max-height: 300px) {\
\
.mfp-img-mobile .mfp-image-holder {\
padding-left: 0;\
padding-right: 0;\
}\
.mfp-img-mobile img.mfp-img {\
padding: 0;\
}\
.mfp-img-mobile .mfp-figure:after {\
top: 0;\
bottom: 0;\
}\
.mfp-img-mobile .mfp-figure small {\
display: inline;\
margin-left: 5px;\
}\
.mfp-img-mobile .mfp-bottom-bar {\
background: rgba(0, 0, 0, 0.6);\
bottom: 0;\
margin: 0;\
top: auto;\
padding: 3px 5px;\
position: fixed;\
box-sizing: border-box;\
}\
.mfp-img-mobile .mfp-bottom-bar:empty {\
padding: 0;\
}\
.mfp-img-mobile .mfp-counter {\
right: 5px;\
top: 3px;\
}\
.mfp-img-mobile .mfp-close {\
top: 0;\
right: 0;\
width: 35px;\
height: 35px;\
line-height: 35px;\
background: rgba(0, 0, 0, 0.6);\
position: fixed;\
text-align: center;\
padding: 0;\
} \
\
}\
\
@media all and (max-width: 479px) {\
\
.zgl-modal .mfp-close,\
.zgl-modal .mfp-close::before {\
border-radius: 0;\
}\
\
}\
\
@charset 'utf-8';\
/* CSS Document  Zaglavlje v. 1.5 */\
\
body {\
    min-height: 100vh;\
    margin: 0;\
    padding: 0;\
    background-color: #f7f7f7;\
}\
\
/**** Stilovi za zaglavlje ****/\
\
@font-face {\
    font-family: 'Roboto';\
    src: url('https://eusluge-nav.gov.hr/fonts/roboto-regular.woff') format('woff');\
    font-weight: 400;\
    font-style: normal;\
}\
\
@font-face {\
    font-family: 'Roboto';\
    src: url('https://eusluge-nav.gov.hr/fonts/roboto-italic.woff') format('woff');\
    font-weight: 400;\
    font-style: italic;\
}\
\
@font-face {\
    font-family: 'Roboto';\
    src: url('https://eusluge-nav.gov.hr/fonts/roboto-medium.woff') format('woff');\
    font-weight: 500;\
    font-style: normal;\
}\
\
@font-face {\
    font-family: 'Roboto';\
    src: url('https://eusluge-nav.gov.hr/fonts/roboto-mediumitalic.woff') format('woff');\
    font-weight: 500;\
    font-style: italic;\
}\
\
@font-face {\
    font-family: 'Roboto';\
    src: url('https://eusluge-nav.gov.hr/fonts/roboto-bold.woff') format('woff');\
    font-weight: 700;\
    font-style: normal;\
}\
\
@font-face {\
    font-family: 'Roboto';\
    src: url('https://eusluge-nav.gov.hr/fonts/roboto-bolditalic.woff') format('woff');\
    font-weight: 700;\
    font-style: italic;\
}\
\
@font-face {\
    font-family: 'Icomoon';\
    src: url('https://eusluge-nav.gov.hr/fonts/icomoon17.woff') format('woff');\
    font-weight: normal;\
    font-style: normal;\
}\
\
[class*='zgl-icon'],\
#egradjani a::before,\
#egradjani a::after,\
#egradjani #current_user span::before,\
.zgl-area::before {\
    font-family: 'Icomoon' !important;\
    speak: none;\
    font-style: normal;\
    font-weight: normal !important;\
    font-variant: normal;\
    text-transform: none;\
    -webkit-font-smoothing: antialiased;\
    -moz-osx-font-smoothing: grayscale;\
}\
\
#egradjani,\
.zgl-modal * {\
    box-sizing: border-box;\
}\
\
    #egradjani *,\
    #egradjani *::before, #egradjani *::after,\
    .zgl-modal *::before, .zgl-modal *::after {\
        box-sizing: inherit;\
    }\
\
@supports (appearance: none) or (-moz-appearance: none) or (-webkit-appearance: none) {\
    #egradjani input,\
    .zgl-modal input,\
    #egradjani .zgl-button,\
    .zgl-modal .zgl-button {\
       /* outline: none;*/\
        margin: 0;\
        -webkit-appearance: none;\
        -moz-appearance: none;\
        appearance: none;\
    }\
}\
\
#egradjani {\
    font-family: 'Roboto', sans-serif;\
    font-size: 16px;\
    font-weight: 400;\
    line-height: 1.5;\
    color: #000;\
    -moz-osx-font-smoothing: grayscale;\
    -webkit-font-smoothing: antialiased;\
    -ms-hyphens: none;\
    -webkit-hyphens: none;\
    hyphens: none;\
    text-size-adjust: none;\
}\
\
    #egradjani #egradani_user_person_identifier {\
        display:none;\
    }\
\
#egradjani .zgl-column_width {\
    position: relative;\
    margin: 0 auto;\
    width: 100%;\
    max-width: 1386px;\
    padding: 0 20px;\
}\
\
    #egradjani .zgl-image {\
        display: block;\
        border: none;\
    }\
\
    #egradjani a,\
    #egradjani a:hover,\
    #egradjani a:focus {\
        text-decoration: none;\
    }\
\
    #egradjani .top_ribbon a,\
    #egradjani #current_user a {\
        color: #fff;\
    }\
\
    #egradjani p {\
        margin: 0 0 8px;\
    }\
\
#egradjani {\
    display: flex;\
    flex-direction: column;\
    background-color: #ca1720;\
}\
\
    #egradjani .top_ribbon {\
        position: relative;\
        padding: 19px 30px 17px;\
        display: flex;\
        flex-flow: row nowrap;\
        justify-content: space-between;\
        align-items: center;\
    }\
\
    #egradjani .zgl-section {\
        flex: 1 1 auto;\
    }\
\
        #egradjani .zgl-section#logo {\
            flex: 0 1 auto;\
        }\
\
        #egradjani .zgl-section#function {\
            flex: 1 0 auto;\
            display: flex;\
            flex-flow: row nowrap;\
            align-items: stretch;\
            justify-content: flex-end;\
            font-size: 14px;\
            text-transform: uppercase;\
            white-space: normal;\
        }\
\
    #egradjani .zgl-segment {\
        position: relative;\
        padding-left: 20px;\
    }\
\
        #egradjani .zgl-segment a {\
            display: flex;\
            align-items: center;\
        }\
\
    #egradjani #function a {\
        height: 100%;\
        padding: 8px;\
        line-height: 17px;\
        color: #fff;\
        background-color: rgba(255, 255, 255, .25);\
        border-radius: 3px;\
        transition: background-color 0.33s ease;\
    }\
\
        #egradjani #function a:hover,\
        #egradjani #function a:focus {\
            background-color: rgba(0, 0, 0, .25);\
        }\
\
    #egradjani #function .zgl-icon .zgl-image {\
        height: 32px;\
    }\
\
    #egradjani .zgl-segment .zgl-label {\
        padding-left: 8px;\
    }\
\
#user_inbox .unread_messages {\
    padding: 8px;\
    background: rgba(0, 0, 0, 0.3);\
    border-radius: 3px;\
    transition: background 0.33s ease;\
}\
\
#user_inbox a:hover .unread_messages {\
    background: rgba(255, 255, 255, .4);\
}\
\
#user_inbox .zgl-label {\
    padding-right: 8px;\
}\
\
#egradjani .zgl-segment a.zgl-tooltip .zgl-label {\
    display: none;\
}\
\
#egradjani .zgl-segment a.zgl-tooltip:hover .zgl-label {\
    display: block;\
    position: absolute;\
    top: 54px;\
    right: 0;\
    padding: 9px 13px 7px;\
    color: #000;\
    background-color: #f7f7f7;\
    border-radius: 3px;\
    z-index: 100011;\
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);\
}\
\
#egradjani .zgl-segment a.zgl-tooltip .zgl-label::after {\
    content: '';\
    display: block;\
    width: 7px;\
    height: 7px;\
    position: absolute;\
    top: -3px;\
    right: 21px;\
    transform: rotate(45deg);\
    background-color: #f7f7f7;\
}\
\
#egradjani #logo .zgl-segment {\
    padding: 0;\
}\
\
#egradjani #logo .zgl-label {\
    padding-left: 20px;\
}\
\
#egradjani #logo .zgl-icon .zgl-image {\
    width: 42px;\
}\
\
#egradjani #logo a {\
    display: flex;\
    transition: opacity 0.33s ease;\
}\
\
    #egradjani #logo a:hover {\
        opacity: .75;\
    }\
\
#egradjani #site_title,\
#egradjani #site_subtitle {\
    display: block;\
    white-space: nowrap;\
}\
\
#egradjani #site_title {\
    font-weight: 500;\
    font-size: 26px;\
    line-height: 1;\
    letter-spacing: 0.063em;\
    margin-top: -3px;\
}\
\
#egradjani #site_subtitle {\
    line-height: 1;\
    margin-top: 5px;\
}\
\
#egradjani #filter .zgl-label {\
    max-width: 88px;\
}\
\
#egradjani #user_home .zgl-label {\
    max-width: 55px;\
}\
\
#egradjani #user_inbox .zgl-label {\
    max-width: 92px;\
}\
\
#egradjani #function a#impaired,\
#egradjani #function a#dyslexic {\
    display: none;\
}\
\
#egradjani #function a#non-impaired,\
#egradjani #function a#non-dyslexic {\
    display: flex;\
}\
\
#egradjani #current_user {\
    position: relative;\
    padding: 0 30px;\
    text-align: right;\
    font-size: 15px;\
    line-height: normal;\
    color: #fff;\
    border-top: 1px solid #f7f7f7;\
}\
\
    #egradjani #current_user .zgl-trigger {\
        display: flex;\
        justify-content: flex-end;\
        align-items: flex-end;\
    }\
\
#egradjani .zgl-trigger .zgl-icon {\
    padding: 0 10px 17px 0;\
    line-height: 1;\
}\
\
#egradjani a#user_switch {\
    display: inline-block;\
    padding: 13px 0;\
}\
\
    #egradjani a#user_switch::before {\
        content: '\\e902';\
        display: block;\
        float: right;\
        margin: -13px 0 -13px 15px;\
        padding: 13px 10px;\
        font-size: 20px;\
        line-height: 1;\
        vertical-align: middle;\
        background-color: rgba(255, 255, 255, .25);\
    }\
\
    #egradjani a#user_switch.zgl-open::before {\
        transform: rotate(180deg);\
    }\
\
    #egradjani a#user_switch:hover::before {\
        background-color: rgba(0, 0, 0, .25);\
    }\
\
#egradjani #user_slideout {\
    display: none;\
    position: absolute;\
    right: 30px;\
    margin: 0;\
    width: 280px;\
    text-align: left;\
    padding: 15px 20px 20px;\
    color: #000;\
    line-height: normal;\
    background-color: #fff;\
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);\
    z-index: 30;\
}\
\
    #egradjani #user_slideout .zgl-icon {\
        display: block;\
        font-size: 35px;\
        line-height: 1;\
        color: #c69c6c;\
        margin-bottom: 15px;\
    }\
\
    #egradjani #user_slideout .user_name {\
        font-weight: 500;\
    }\
\
    #egradjani #user_slideout .zgl-unread a {\
        margin-top: 15px;\
        font-size: 16px;\
        font-weight: 500;\
        line-height: 1;\
        color: #000;\
    }\
\
        #egradjani #user_slideout .zgl-unread a:hover {\
            color: #ca1720;\
        }\
\
        #egradjani #user_slideout .zgl-unread a::before {\
            content: '\\e5c8';\
            font-size: 16px;\
            color: #ca1720;\
            line-height: 1;\
            vertical-align: -2px;\
            padding-right: 5px;\
        }\
\
        #egradjani #user_slideout .zgl-unread a:hover::before {\
            color: #000;\
        }\
\
    #egradjani #user_slideout a.action {\
        display: block;\
        margin-top: 20px;\
        padding: 10px;\
        font-size: 16px;\
        color: #000;\
        text-align: center;\
        text-transform: none;\
        border: 2px solid #c69c6c;\
        border-radius: 3px;\
    }\
\
        #egradjani #user_slideout a.action:hover {\
            border-color: #2cad56;\
            opacity: 1;\
        }\
\
#egradjani #fontsize_slideout {\
    display: none;\
    position: fixed;\
    right: 0;\
    top: 0;\
    line-height: 24px;\
    color: #000;\
    background-color: #f7f7f7;\
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);\
    z-index: 100020;\
}\
\
    #egradjani #fontsize_slideout .lining {\
        padding: 20px;\
    }\
\
    #egradjani #fontsize_slideout a.zgl-close {\
        display: block;\
        padding: 8px 20px;\
        font-size: 22px;\
        line-height: 1;\
        color: #a4a4a4;\
        background-color: #444;\
        transition: all 0.33s ease;\
    }\
\
        #egradjani #fontsize_slideout a.zgl-close:hover {\
            color: #fff;\
            opacity: 1;\
        }\
\
        #egradjani #fontsize_slideout a.zgl-close:active {\
            background-color: #999;\
        }\
\
    #egradjani #fontsize_slideout .zgl-label {\
        display: inline-block;\
        padding-right: 10px;\
    }\
\
    #egradjani #fontsize_slideout a {\
        display: inline-block;\
        vertical-align: middle;\
        font-size: 24px;\
        color: #333;\
    }\
\
        #egradjani #fontsize_slideout a:hover {\
            color: #2cad56;\
        }\
\
        #egradjani #fontsize_slideout a:focus {\
            color: #ca1720;\
        }\
\
        #egradjani #fontsize_slideout a#default {\
            margin: 0 10px;\
        }\
\
#egradjani #filter_holder {\
    position: relative;\
}\
\
#egradjani a#filter_close {\
    display: block;\
    position: relative;\
    float: right;\
    margin: -25px 0 0 0;\
    padding: 25px 5px 20px;\
    font-size: 22px;\
    line-height: 1;\
    color: #a4a4a4;\
    background-color: #444;\
    transition: all 0.33s ease;\
}\
\
    #egradjani a#filter_close::after {\
        content: '';\
        position: absolute;\
        left: 5px;\
        bottom: -11px;\
        width: 22px;\
        height: 22px;\
        background: #ededed;\
        transform: rotate(45deg);\
        z-index: 1;\
    }\
\
    #egradjani a#filter_close:hover {\
        color: #fff;\
    }\
\
    #egradjani a#filter_close:active {\
        background-color: #999;\
    }\
\
#egradjani #filter_slideout {\
    display: none;\
    position: absolute;\
    top: 0;\
    left: 0;\
    width: 100%;\
    padding: 25px 0 40px;\
    background-color: #ededed;\
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);\
    z-index: 100000;\
}\
\
#egradjani .sidekick p {\
    margin: 0;\
}\
\
#egradjani #filter_slideout .zgl-searchbox {\
    border-color: #d5d5d2;\
}\
\
#egradjani #filter_slideout h3 {\
    font-weight: 500;\
    font-size: 18px;\
    margin: 0 0 16px;\
}\
\
#egradjani #filter_slideout h4 {\
    font-weight: 500;\
    font-size: 17px;\
    margin: 24px 0 8px;\
}\
\
#egradjani .filtering_results {\
    columns: 280px 4;\
    column-gap: 2em;\
    column-rule: 1px dotted #666;\
    background-color: #fff;\
    padding: 20px;\
    border-radius: 4px;\
}\
\
    #egradjani .filtering_results ul {\
        margin: 0;\
        padding-left: 16px;\
        line-height: normal;\
        color: #ca1720;\
    }\
\
        #egradjani .filtering_results ul li {\
            margin-bottom: 0.5em;\
            -webkit-column-break-inside: avoid;\
            page-break-inside: avoid;\
            break-inside: avoid;\
        }\
\
            #egradjani .filtering_results ul li:hover {\
                color: #000;\
            }\
\
        #egradjani .filtering_results ul a {\
            color: #000;\
        }\
\
            #egradjani .filtering_results ul a:hover {\
                color: #ca1720;\
            }\
\
#egradjani #filter_slideout .zgl-showmore {\
    margin: 20px 0 0 0;\
}\
\
#egradjani .asymmetric {\
    display: flex;\
    flex-flow: row nowrap;\
    justify-content: space-between;\
    align-items: flex-end;\
}\
\
\
#egradjani .search {\
    flex: 1 1 66.66%;\
    border-right: 10px solid transparent;\
}\
\
#egradjani .zgl-sidekick {\
    flex: 1 1 33.33%;\
    max-width: 33.33%;\
    border-left: 10px solid transparent;\
}\
\
#egradjani .zgl-showmore a {\
    display: inline-block;\
    line-height: 40px;\
    margin-top: 20px;\
    padding: 0 20px;\
    color: #fff;\
    background-color: #444;\
    border-radius: 4px;\
    transition: background 0.33s ease;\
}\
\
    #egradjani .zgl-showmore a:hover {\
        color: #fff;\
        background-color: #ca1720;\
    }\
\
    #egradjani .zgl-showmore a:active {\
        background-color: #999;\
    }\
\
\
\
#egradjani #navmainswitch {\
    display: none;\
}\
\
    #egradjani #navmainswitch a {\
        font-size: 30px;\
        line-height: 42px;\
        padding: 0 8px;\
        color: #fff;\
        background-color: rgba(255, 255, 255, .25);\
        border-radius: 3px;\
        transition: background-color 0.33s ease;\
    }\
\
        #egradjani #navmainswitch a:hover {\
            background-color: rgba(0, 0, 0, .25);\
        }\
\
#egradjani .zgl-searchbox {\
    position: relative;\
    background-color: #fff;\
    border: 1px solid #d5d5d2;\
    border-radius: 3px;\
}\
\
#egradjani .zgl-inputfield {\
    width: 100%;\
    padding: 0 60px 0 15px;\
    background-color: transparent;\
    border: none;\
    font: 400 16px/50px 'Roboto', sans-serif;\
    color: #999;\
}\
\
    #egradjani .zgl-inputfield:focus {\
        color: #000;\
    }\
\
#egradjani .zgl-searchbutton {\
    position: absolute;\
    top: 0;\
    right: 5px;\
    width: 44px;\
    height: 50px;\
    font-size: 22px;\
    line-height: 50px;\
    padding: 0 10px;\
    border: none;\
    text-align: right;\
    color: #666;\
    background: transparent;\
    cursor: pointer;\
}\
\
    #egradjani .zgl-searchbutton:hover {\
        color: #ca1720;\
    }\
\
    #egradjani .zgl-searchbutton:active {\
        color: #000;\
    }\
\
\
\
/** pop-up dialog **/\
\
\
.zgl-modal {\
    position: relative;\
    min-width: 320px;\
    max-width: 400px;\
    margin: 0 auto;\
    font-family: 'Roboto', sans-serif;\
    font-weight: 400;\
    font-size: 16px;\
    color: #000;\
    box-sizing: border-box;\
}\
\
    .zgl-modal.large {\
        max-width: 600px;\
    }\
\
    .zgl-modal .lining {\
        border-top: 51px solid transparent;\
        padding: 30px 20px 40px;\
        background-color: #f7f7f7;\
        background-clip: padding-box;\
        border-radius: 4px;\
    }\
\
    .zgl-modal h3 {\
        position: absolute;\
        top: 0;\
        left: 0;\
        width: calc(100% - 5px);\
        font-weight: 500;\
        font-size: 17px;\
        line-height: 50px;\
        margin: 0;\
        padding: 0 112px 0 20px;\
        background-color: #e0e0e4;\
        border-top-left-radius: 4px;\
        border-bottom: 1px solid #fff;\
    }\
\
    .zgl-modal p {\
        margin: 0 0 8px;\
    }\
\
    .zgl-modal fieldset {\
        margin: 0;\
        padding: 0;\
        border: none;\
    }\
\
    .zgl-modal .block_label {\
        display: block;\
        margin-bottom: 15px;\
        font-weight: 400;\
    }\
\
    .zgl-modal input.submit_button {\
        width: 100%;\
        margin: 20px 0 0;\
        padding: 16px;\
        font-family: 'Roboto', sans-serif;\
        font-weight: 400;\
        font-size: 16px;\
        text-align: center;\
        color: #fff;\
        border: none;\
        border-radius: 3px;\
        background: linear-gradient(0deg, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 100%);\
        cursor: pointer;\
    }\
\
input.submit_button.short {\
    width: auto;\
    padding: 12px 20px;\
    margin-bottom: 0;\
}\
\
.zgl-modal input.submit_button:hover {\
    background: #2cad56;\
}\
\
.zgl-modal ul {\
    list-style: none;\
    margin: 0;\
    padding: 0;\
}\
\
    .zgl-modal ul li {\
        padding: 10px;\
        border-bottom: 1px dotted #999;\
    }\
\
        .zgl-modal ul li:first-child {\
            border-top: 1px dotted #999;\
        }\
\
        .zgl-modal ul li:hover {\
            background-color: #fff;\
        }\
\
.zgl-modal .results {\
    margin: 20px 0 0;\
    line-height: normal;\
}\
\
.zgl-modal .scroll_me {\
    max-height: 321px;\
    overflow-y: auto;\
}\
\
.zgl-modal .selection ul li {\
    padding-right: 40px;\
}\
\
.zgl-modal .assist {\
    position: absolute;\
    top: 0;\
    right: 51px;\
    width: 51px;\
    height: 51px;\
    border-left: 1px solid #fff;\
    z-index: 1;\
}\
\
    .zgl-modal .assist a {\
        display: block;\
        text-align: center;\
        position: relative;\
        color: #ca1720;\
        text-decoration: none;\
    }\
\
        .zgl-modal .assist a::before {\
            content: '\\e97a';\
            font-size: 16px;\
            line-height: 50px;\
        }\
\
        .zgl-modal .assist a:hover {\
            color: #000;\
        }\
\
.zgl-modal .zgl-searchbox {\
    position: relative;\
    background-color: #fff;\
    border: 1px solid #d5d5d2;\
    border-radius: 3px;\
}\
\
.zgl-modal .zgl-inputfield {\
    width: 100%;\
    padding: 0 60px 0 15px;\
    background-color: transparent;\
    border: none;\
    font: 400 16px/50px 'Roboto', sans-serif;\
    color: #999;\
}\
\
    .zgl-modal .zgl-inputfield:focus {\
        color: #000;\
    }\
\
.zgl-modal .zgl-searchbutton {\
    position: absolute;\
    top: 0;\
    right: 5px;\
    width: 44px;\
    height: 50px;\
    font-size: 22px;\
    line-height: 50px;\
    padding: 0 10px;\
    border: none;\
    text-align: right;\
    color: #666;\
    background: transparent;\
    cursor: pointer;\
}\
\
    .zgl-modal .zgl-searchbutton:hover {\
        color: #ca1720;\
    }\
\
    .zgl-modal .zgl-searchbutton:active {\
        color: #000;\
    }\
.zgl-modal .scroll_me label {\
    display: block;\
    margin: 0;\
    font-weight: 400;\
}\
\
.radio_select {\
    display: block;\
    position: relative;\
    width: 20px;\
    height: 20px;\
    float: right;\
    margin-right: -27px;\
    vertical-align: middle;\
    margin: 0 -27px 0 0;\
}\
\
    .radio_select .zgl-area::before {\
        content: '\\e966';\
        font-size: 20px;\
        color: #999;\
        line-height: 1rem;\
    }\
\
    .radio_select input:checked + .zgl-area::before {\
        content: '\\e97c';\
        color: #2cad56;\
    }\
\
    .radio_select input:hover + .zgl-area::before {\
        color: #000;\
    }\
\
    .radio_select input:focus + .zgl-area::before {\
        color: #2cad56;\
    }\
\
\
#egradjani #current_user .unread a {\
    color: #000 !important;\
}\
\
\
\
@media all and (max-width: 1386px) {\
\
    #egradjani .top_ribbon,\
    #egradjani #current_user {\
        padding-left: 20px;\
        padding-right: 20px;\
    }\
\
    #egradjani #user_slideout {\
        right: 20px;\
    }\
\
    #egradjani a#filter_close {\
        padding: 20px 9px 25px;\
        font-size: 22px;\
    }\
\
        #egradjani a#filter_close::after {\
            bottom: -15px;\
            width: 30px;\
            height: 30px;\
        }\
}\
\
\
@media all and (max-width: 1070px) {\
\
    #egradjani .zgl-segment {\
        padding-left: 10px;\
    }\
}\
\
\
\
@media all and (max-width: 1023px) {\
\
\
    #egradjani .top_ribbon {\
        flex-direction: column;\
        align-items: flex-start;\
        padding: 0;\
    }\
\
    #egradjani #navmainswitch {\
        display: block;\
    }\
\
    #egradjani .zgl-section#logo {\
        width: 100%;\
        display: flex;\
        justify-content: space-between;\
        padding: 20px 20px 19px;\
    }\
\
    #egradjani .zgl-segment {\
        padding-left: 0;\
    }\
\
    #egradjani .zgl-section#function {\
        width: 100%;\
        padding: 10px 19px;\
        flex-flow: row wrap;\
    }\
\
    #egradjani .zgl-segment a.zgl-tooltip:hover .zgl-label {\
        display: inherit;\
        position: inherit;\
        padding: 0 0 0 8px;\
        color: inherit;\
        background-color: transparent;\
        border-radius: 0;\
        box-shadow: none;\
    }\
\
    #egradjani .zgl-segment a.zgl-tooltip .zgl-label::after {\
        display: none;\
    }\
\
    #egradjani #shell {\
        display: none;\
        width: 100%;\
        border-top: 1px solid #f7f7f7;\
    }\
\
    #egradjani #function .zgl-segment {\
        flex: 1 1 50%;\
        border: 1px solid transparent;\
    }\
\
    #egradjani #function a {\
        height: 100%;\
        padding: 8px 12px;\
    }\
\
    #egradjani #filter .zgl-label,\
    #egradjani #user_home .zgl-label,\
    #egradjani #user_inbox .zgl-label {\
        max-width: none;\
    }\
\
    #egradjani #vision_impaired .zgl-label,\
    #egradjani #resize .zgl-label,\
    #egradjani #dyslexia .zgl-label {\
        display: block;\
    }\
\
    #egradjani #user_inbox a {\
        justify-content: space-between;\
    }\
\
    #egradjani #user_inbox .zgl-icon,\
    #egradjani #user_inbox .unread_messages {\
        flex: 0;\
    }\
\
    #egradjani #user_inbox .zgl-label {\
        flex: 1;\
    }\
\
    #egradjani a#user_switch::before,\
    #egradjani a#user_switch:hover::before {\
        margin: -13px 0 -13px 15px;\
        padding: 13px 0;\
        background-color: transparent;\
    }\
\
    #egradjani #filterswitch {\
        order: 1;\
    }\
\
    #egradjani #user_home {\
        order: 3;\
    }\
\
    #egradjani #user_inbox {\
        order: 5;\
    }\
\
    #egradjani #vision_impaired {\
        order: 2;\
    }\
\
    #egradjani #dyslexia {\
        order: 4;\
    }\
\
    #egradjani #resize {\
        order: 6;\
    }\
\
    #egradjani #log_button {\
        order: 7;\
    }\
\
    #egradjani a#filter_close {\
        margin: -18px -10px 0 0;\
        color: #ca1720;\
        background-color: transparent;\
    }\
\
        #egradjani a#filter_close::after {\
            display: none;\
        }\
\
        #egradjani a#filter_close:hover {\
            color: #000;\
        }\
\
        #egradjani a#filter_close:active {\
            background-color: transparent;\
        }\
}\
\
\
@media all and (max-width: 767px) {\
\
    #egradjani .filtering_results {\
        column-rule: 1px solid #d5d5d2;\
    }\
}\
\
@media all and (max-width: 680px) {\
\
    #egradjani .asymmetric {\
        display: block;\
    }\
\
    #egradjani .search, .zgl-sidekick {\
        border: none;\
    }\
\
    #egradjani .zgl-sidekick {\
        margin-top: 10px;\
        max-width: none;\
        text-align: left;\
    }\
}\
\
@media all and (max-width: 480px) {\
\
    #egradjani .zgl-section#function {\
        flex-direction: column;\
    }\
\
    #egradjani #current_user {\
        padding: 0 20px;\
        text-align: left;\
        line-height: normal;\
    }\
\
        #egradjani #current_user .zgl-trigger {\
            justify-content: flex-start;\
            align-items: flex-start;\
        }\
\
    #egradjani .zgl-trigger .zgl-icon {\
        flex: 0;\
        padding: 13px 10px 0 0;\
    }\
\
    #egradjani a#user_switch {\
        flex: 1;\
    }\
\
    #egradjani #filterswitch {\
        order: 1;\
    }\
\
    #egradjani #user_home {\
        order: 2;\
    }\
\
    #egradjani #user_inbox {\
        order: 3;\
    }\
\
    #egradjani #vision_impaired {\
        order: 4;\
    }\
\
    #egradjani #dyslexia {\
        order: 5;\
    }\
\
    #egradjani #resize {\
        order: 6;\
    }\
\
    #egradjani #log_button {\
        order: 7;\
    }\
\
    #egradjani #user_slideout {\
        width: calc(100% - 40px);\
    }\
}\
\
@media all and (max-width: 479px) {\
\
    #egradjani a#filter_close {\
        margin: -18px 0 0 0;\
    }\
\
    #egradjani .zgl-column_width {\
        padding: 0 10px;\
    }\
}\
";
        query("<style>").html(cssInline).appendTo(query("head"));
    }

    function cssImpaired() {
        var cssInline = "@charset 'utf-8';\
/* CSS Document  Zaglavlje v. 1.5 */\
\
#egradjani #function a:hover {\
    background-color: rgba(255, 255, 255, .4);\
}\
\
#egradjani #user_inbox .unread_messages {\
    background: rgba(0, 0, 0, 0.4);\
}\
\
#egradjani #user_inbox a:hover .unread_messages {\
    background: rgba(0, 0, 0, .5);\
}\
\
#egradjani #navmainswitch a:hover {\
    color: #fff;\
    background-color: rgba(255, 255, 255, .4);\
}\
\
#egradjani #function a#nonimpaired {\
    display: none;\
}\
\
#egradjani #function a#impaired {\
    display: flex;\
}\
\
#egradjani #function a#nondyslexic {\
    display: flex;\
}\
\
#egradjani #function a#dyslexic {\
    display: none;\
}\
\
.zgl-segment a.zgl-tooltip:hover .zgl-label,\
.zgl-segment a.zgl-tooltip .zgl-label::after {\
    background-color: #fff;\
}\
\
#egradjani {\
    background-color: #000;\
}\
\
    #egradjani #user_slideout .zgl-icon {\
        color: #000;\
    }\
\
    #egradjani #user_slideout a.action {\
        color: #000;\
        border: 2px solid #666;\
    }\
\
        #egradjani #user_slideout a.action:hover {\
            border-color: #2cad56;\
        }\
\
    #egradjani #current_user {\
        border-top: 1px solid #666;\
    }\
\
    #egradjani #fontsize_slideout {\
        background-color: #fff;\
    }\
\
        #egradjani #fontsize_slideout a {\
            position: relative;\
            text-decoration: none;\
        }\
\
            #egradjani #fontsize_slideout a.zgl-close {\
                color: #fff;\
            }\
\
            #egradjani #fontsize_slideout a:hover {\
                color: #000;\
            }\
\
                #egradjani #fontsize_slideout a:hover::before {\
                    content: '';\
                    display: block;\
                    position: absolute;\
                    left: 7px;\
                    top: -10px;\
                    width: 0;\
                    height: 0;\
                    border-left: 5px solid transparent;\
                    border-right: 5px solid transparent;\
                    border-top: 7px solid #000;\
                    color: #000;\
                }\
\
    #egradjani a#filter_close {\
        color: #fff;\
        background-color: #000;\
    }\
\
        #egradjani a#filter_close::after {\
            background: #444;\
        }\
\
        #egradjani a#filter_close:hover {\
            color: #fff;\
        }\
\
    #egradjani #filter_slideout {\
        color: #fff;\
        background-color: #444;\
    }\
\
        #egradjani #filter_slideout .zgl-searchbox {\
            border-color: transparent;\
        }\
\
    #egradjani .filtering_results {\
        column-rule: 1px dotted #999;\
        background-color: #000;\
    }\
\
        #egradjani .filtering_results ul,\
        #egradjani .filtering_results ul li:hover,\
        #egradjani .filtering_results ul a,\
        #egradjani .filtering_results ul a:hover {\
            color: #fff;\
        }\
\
    #egradjani .zgl-showmore a {\
        background-color: #000;\
    }\
\
        #egradjani .zgl-showmore a:hover {\
            color: #000;\
            background-color: #fff;\
        }\
\
    #egradjani .zgl-searchbox {\
        background-color: #000;\
        border: 1px solid #000;\
    }\
\
    #egradjani .zgl-inputfield {\
        color: #fff;\
    }\
\
        #egradjani .zgl-inputfield:focus {\
            color: #fff;\
        }\
\
    #egradjani .zgl-searchbutton {\
        color: #fff;\
    }\
\
        #egradjani .zgl-searchbutton:hover {\
            color: #2cad56;\
        }\
\
        #egradjani .zgl-searchbutton:active {\
            color: #ccc;\
        }\
\
.zgl-modal .lining {\
    color: #000;\
    background-color: #fff;\
}\
\
.zgl-area::before {\
    color: #000;\
}\
\
.radio_select .zgl-area::before {\
    color: #000;\
}\
\
.radio_select input:checked + .zgl-area::before,\
.checkit input:checked + .zgl-area::before {\
    content: '\\e97c';\
    color: #000;\
}\
\
\
\
@media all and (max-width: 1023px) {\
\
    #egradjani #shell {\
        border-top: 1px solid #666;\
    }\
\
    #egradjani a#filter_close,\
    #egradjani a#filter_close:active {\
        background-color: transparent;\
    }\
\
        #egradjani a#filter_close::after {\
            display: none;\
        }\
}\
\
@media all and (max-width: 679px) {\
\
    #egradjani .zgl-section#function {\
        flex-direction: column;\
    }\
\
    #egradjani #current_user {\
        padding: 0 20px;\
        text-align: left;\
        line-height: normal;\
    }\
\
        #egradjani #current_user .zgl-trigger {\
            justify-content: flex-start;\
            align-items: flex-start;\
        }\
\
    #egradjani .zgl-trigger .zgl-icon {\
        flex: 0;\
        padding: 13px 10px 0 0;\
    }\
\
    #egradjani a#user_switch {\
        flex: 1;\
    }\
\
    #egradjani #filterswitch {\
        order: 1;\
    }\
\
    #egradjani #user_home {\
        order: 2;\
    }\
\
    #egradjani #user_inbox {\
        order: 3;\
    }\
\
    #egradjani #vision_impaired {\
        order: 4;\
    }\
\
    #egradjani #dyslexia {\
        order: 5;\
    }\
\
    #egradjani #resize {\
        order: 6;\
    }\
\
    #egradjani #log_button {\
        order: 7;\
    }\
}\
";
        query("<style>").attr({ id: "css_impaired", media: "none" }).html(cssInline).appendTo(query("head"));

    }

    function cssDyslexic() {
        var cssInline = "@charset 'utf-8';\
/* CSS Document  Zaglavlje v. 1.5 */\
\
\
\
\
\
@font-face {\
    font-family: 'OmoType';\
    src: url('https://eusluge-nav.gov.hr/fonts/OmoType-MediumStdTwo.ttf') format('woff');\
    font-weight: 400;\
    font-style: normal;\
}\
\
@font-face {\
    font-family: 'OmoType';\
    src: url('https://eusluge-nav.gov.hr/fonts/OmoType-BoldStdTwo.ttf') format('woff');\
    font-weight: 500;\
    font-style: normal;\
}\
\
@font-face {\
    font-family: 'OmoType';\
    src: url('https://eusluge-nav.gov.hr/fonts/OmoType-BlackStdTwo.ttf') format('woff');\
    font-weight: 800;\
    font-style: normal;\
}\
\
body,\
#egradjani,\
#predlozak,\
#predlozak button,\
#predlozak input,\
#predlozak select,\
#predlozak textarea {\
    font-family: 'OmoType', sans-serif;\
    font-weight: 400;\
}\
\
#egradjani .zgl-inputfield {\
    font: 400 1em/50px 'OmoType', sans-serif;\
}\
\
#egradjani .zgl-tooltip {\
    font-family: 'OmoType', sans-serif;\
}\
\
#egradjani #site_title {\
    font-weight: 700;\
    letter-spacing: 0;\
}\
\
#egradjani #filter .zgl-label {\
    max-width: 107px;\
}\
\
#egradjani #user_home .zgl-label {\
    max-width: 63px;\
}\
\
#egradjani #user_inbox .zgl-label {\
    max-width: 107px;\
}\
\
#egradjani #function a#nondyslexic {\
    display: none;\
}\
\
#egradjani #function a#dyslexic {\
    display: flex;\
}\
\
#egradjani #function a#nonimpaired {\
    display: flex;\
}\
\
#egradjani #function a#impaired {\
    display: none;\
}\
\
#egradjani #filter_slideout h3 {\
    font-weight: 700;\
}\
\
#egradjani #top_box h3,\
#egradjani #filter_slideout h4 {\
    font-weight: 700;\
}\
\
#egradjani #user_slideout .user_name,\
#egradjani #user_slideout .zgl-unread a,\
.zgl-modal h3,\
input.submit_button {\
    font-weight: 800;\
}\
\
\
#egradjani #current_user {\
    font-size: 16px;\
}\
\
#egradjani #top_nav div {\
    max-width: 150px;\
}\
\
\
\
\
\
\
\
\
\
\
\
.zgl-modal {\
    max-width: 600px;\
    font-family: 'OmoType', sans-serif;\
    font-size: 14px;\
}\
\
.zgl-modal input.submit_button {\
    font-family: 'OmoType', sans-serif;\
}\
\
.zgl-modal .zgl-inputfield {\
    font: 400 16px/50px 'OmoType', sans-serif;\
}\
\
\
\
@media all and (max-width: 1200px) {\
\
    #egradjani .zgl-segment {\
        padding-left: 10px;\
    }\
}\
\
\
\
\
@media all and (max-width: 1070px) {\
\
    #egradjani .top_ribbon {\
        flex-direction: column;\
        align-items: flex-start;\
        padding: 0;\
    }\
\
    #egradjani #navmainswitch {\
        display: block;\
    }\
\
    #egradjani .zgl-section#logo {\
        width: 100%;\
        display: flex;\
        justify-content: space-between;\
        padding: 20px 20px 19px;\
    }\
\
    #egradjani .zgl-segment {\
        padding-left: 0;\
    }\
\
    #egradjani .zgl-section#function {\
        width: 100%;\
        padding: 10px 19px;\
        flex-flow: row wrap;\
    }\
\
    #egradjani .zgl-segment a.zgl-tooltip:hover .zgl-label {\
        display: inherit;\
        position: inherit;\
        padding: 0 0 0 8px;\
        color: inherit;\
        background-color: transparent;\
        border-radius: 0;\
        box-shadow: none;\
    }\
\
    #egradjani .zgl-segment a.zgl-tooltip .zgl-label::after {\
        display: none;\
    }\
\
    #egradjani #shell {\
        display: none;\
        width: 100%;\
        border-top: 1px solid #f7f7f7;\
    }\
\
    #egradjani #function .zgl-segment {\
        flex: 1 1 50%;\
        border: 1px solid transparent;\
    }\
\
    #egradjani #function a {\
        height: 100%;\
        padding: 8px 12px;\
    }\
\
    #egradjani #filter .zgl-label,\
    #egradjani #user_home .zgl-label,\
    #egradjani #user_inbox .zgl-label {\
        max-width: none;\
    }\
\
    #egradjani #user_inbox a {\
        justify-content: space-between;\
    }\
\
    #egradjani #user_inbox .zgl-icon,\
    #egradjani #user_inbox .unread_messages {\
        flex: 0;\
    }\
\
    #egradjani #user_inbox .zgl-label {\
        flex: 1;\
    }\
\
    #egradjani a#user_switch::before,\
    #egradjani a#user_switch:hover::before {\
        margin: -13px 0 -13px 15px;\
        padding: 13px 0;\
        background-color: transparent;\
    }\
\
    #egradjani #filterswitch {\
        order: 1;\
    }\
\
    #egradjani #user_home {\
        order: 3;\
    }\
\
    #egradjani #user_inbox {\
        order: 5;\
    }\
\
    #egradjani #vision_impaired {\
        order: 2;\
    }\
\
    #egradjani #dyslexia {\
        order: 4;\
    }\
\
    #egradjani #resize {\
        order: 6;\
    }\
\
    #egradjani #log_button {\
        order: 7;\
    }\
\
    a#filter_close {\
        margin: -18px -10px 0 0;\
        color: var(--red);\
        background-color: transparent;\
    }\
\
    a#filter_close::after {\
        display: none;\
    }\
\
    a#filter_close:hover {\
        color: #000;\
    }\
\
    a#filter_close:active {\
        background-color: transparent;\
    }\
}\
\
\
\
\
@media all and (max-width: 980px) {\
\
    #egradjani #top_nav div {\
        max-width: none;\
    }\
}\
\
\
@media all and (max-width: 690px) {\
\
    #egradjani .zgl-section#function {\
        flex-direction: column;\
    }\
\
    #egradjani .zgl-section#function {\
        flex-direction: column;\
    }\
\
    #egradjani #filterswitch {\
        order: 1;\
    }\
\
    #egradjani #user_home {\
        order: 2;\
    }\
\
    #egradjani #user_inbox {\
        order: 3;\
    }\
\
    #egradjani #vision_impaired {\
        order: 4;\
    }\
\
    #egradjani #dyslexia {\
        order: 5;\
    }\
\
    #egradjani #resize {\
        order: 6;\
    }\
\
    #egradjani #log_button {\
        order: 7;\
    }\
}\
";
        query("<style>").attr({ id: "css_dyslexic", media: "none" }).html(cssInline).appendTo(query("head"));

    }

    function fonts() {
        var fontsInline = "[FONTS_INLINE]";
        query("<style>").html(fontsInline).appendTo(query("head"));
    }

    this.getMessagesCount = function () {
        if (query(".odjava-link").length == 0) {
            return;
        }

        $.ajax({
            type: "GET",
            url: parent.url + "e_gradani.aspx?action=getMessagesCount&__=LCN1DawAzBLkd5vx35R8ec5KrDoV1UAc5528RpCHyqFuIm1ovTwIpoCuwKW55ZAS0GabNHbO1a95olz51jYBJo4Nj8hwSq5jBs5W%2boGtHzd3k%2fPbroJpErydhM8dP66j",
            cache: false,
            //clear custom headers from services
            headers: {},
            beforeSend: function (xhr) {
            }
        }).done(function (res) {
            if (res != undefined && res.length > 0 && !isNaN(parseInt(res)) && parseInt(res) > 0) {
                var messageCount = parseInt(res);
                query(".msg-num").html(messageCount);
                if (query(".msg").length == 0) {
                    $.each(query(".user_messages_desktop"), function (i, obj) {
                        $(obj).append("<span class='msg'>" + messageCount + "</span>");
                    })
                }
                else {
                    query(".msg").html(messageCount);
                }
            }
            else {
                query(".msg").remove();
                query(".msg-num").html(0);
            }
        });
    }

    this.getServices = function () {
        var me = this;
        query.ajax({
            type: "GET",
            url: parent.url + "getServices.aspx?action=jsonScript&language=" + this.options.language,
            cache: false,
            //clear custom headers from services
            headers: {},
            beforeSend: function (xhr) {
            }
        }).done(function (res) {
            me.initServices(res);
        });
    }

    function compareByName (a, b) {
        var aName = a.name.toLowerCase();
        var bName = b.name.toLowerCase();
        if (aName < bName) {
            return -1;
        }
        if (aName > bName) {
            return 1;
        }
        return 0;
    }

    this.setLanguage = function (language) {
        if (language == "en") {
            parent.options.language = "en";
            parent.options.translation = getTranslationsEn();
        }
        else {
            parent.options.language = "hr";
            parent.options.translation = getTranslationsHr();
        }
        this.getServices();
        this.setUILanguage();
    }

    this.setUILanguage = function () {
        setAlt("egradani_pocetna_stranica_portala_alt", "Početna stranica portala");
        setHtml("site_title", "e-Građani");
        setHtml("site_subtitle", "Informacije i usluge");
        setHtml("egradani_filtriraje_eusluge", "Filtrirajte e-usluge");
        setHtml("egradani_moj_profil", "Moj profil");
        setHtml("egradani_korisnicki_pretinac", "Korisnički pretinac");
        setHtml("egradani_prijava", "Prijava");
        setHtml("egradani_odjava", "Odjava");
        setHtml("egradani_prilagodba_slabovidnosti", "Prilagodba slabovidnosti");
        setHtml("egradani_prilagodba_slabovidnosti_ukloni", "Ukloni prilagodbu slabovidnosti");
        setHtml("egradani_prilagodba_disleksiji", "Prilagodba disleksiji");
        setHtml("egradani_prilagodba_disleksiji_ukloni", "Ukloni prilagodbu disleksiji");
        setHtml("egradani_velicina_pisma", "Veličina pisma");
        setHtml("egradani_velicina_pisma_2", "Veličina pisma");

        setHtml("egradani_user_oib", "OIB");
        setHtml("egradani_user_person_identifier", "Person Identifier");
        setHtml("egradani_user_razina_sigurnosti", "Razina sigurnosti");
        
        setHtml("egradani_user_promjena_subjekta", "Promjena subjekta");

        setHtml("egradani_filter_filtrirajte_eusluge", "Filtrirajte e-usluge");
        setHtml("egradani_filter_rezultati_filtriranja", "Rezultati filtriranja");
        setHtml("egradani_filter_prikazi_sve_rezultate", "Prikaži sve rezultate");

        setHtml("egradani_modal_izaberite_subjekt", "Izaberite subjekt");
        setHtml("egradani_izaberite_subjekt_koji_zelite_zastupati", "Izaberite subjekt koji želite zastupati u sustavu");
        query("#filter_entity_search").attr("placeholder", parent.options.translation["Pretražite subjekte"]);
        query("#btnPotvrdite").val(parent.options.translation["Potvrdite odabir"]);

        query("#user_switch").html(this.options.user.prijavljeni_naziv);
        query(".user_name").html(this.options.user.prijavljeni_naziv);
        //query("#egradani_user_oib").html(this.options.translation["OIB"] + " " + this.options.user.oib);
        query("#egradani_user_oib").html(this.options.user.prijavljeni_naziv_oib + ": " + this.options.user.oib);
        query("#egradani_user_person_identifier").html(this.options.translation["Person Identifier"] + " " + this.options.user.personidentifier);
        query("#egradani_user_razina_sigurnosti").html(this.options.translation["Razina sigurnosti"] + " " + renderVjerodajnica(this.options.user.vjerodajnica));
        query("#egradani_user_novih_poruka").html(this.options.translation["Novih poruka"] + " " + this.options.user.broj_poruka).prop("href", this.options.mailboxUrl);
        query(".unread_messages").html(this.options.user.broj_poruka).parent().prop("href", this.options.mailboxUrl);

        this.searchSummary = this.options.translation["Prikazanih rezultata: {0} od {1}"];
        this.searchNoResults = this.options.translation["Nažalost nema rezultata za traženi pojam"];

    }

    function setAlt(id, key) {
        query("#" + id).attr("alt", parent.options.translation[key]);
    }

    function setHtml(id, key) {
        var _id = "#" + id;
        query(_id).html(parent.options.translation[key]);

        var altId = id + "_alt";
        setAlt(altId, key);
    }

    function getTranslationsHr() {
        var language = {
            "Prikazanih rezultata: {0} od {1}": "Prikazanih rezultata: {0} od {1}",
            "Nažalost nema rezultata za traženi pojam": "Nažalost nema rezultata za traženi pojam.",
            "Razina sigurnosti": "Razina sigurnosti:",
            "Novih poruka": "Novih poruka:",
            "niska": "niska",
            "značajna": "značajna",
            "visoka": "visoka",
            "Početna stranica portala": "Početna stranica portala",
            "e-Građani": "e-Građani",
            "Informacije i usluge": "Informacije i usluge",
            "Filtrirajte e-usluge": "Filtrirajte e-usluge",
            "Moj profil": "Moj profil",
            "Korisnički pretinac": "Korisnički pretinac",
            "Prijava": "Prijava",
            "Odjava": "Odjava",
            "Prilagodba slabovidnosti": "Prilagodba slabovidnosti",
            "Ukloni prilagodbu slabovidnosti": "Ukloni prilagodbu slabovidnosti",
            "Prilagodba disleksiji": "Prilagodba disleksiji",
            "Ukloni prilagodbu disleksiji": "Ukloni prilagodbu disleksiji",
            "Veličina pisma": "Veličina pisma",
            "OIB": "OIB:",
            "Person Identifier": "Person Identifier:",
            "Promjena subjekta": "Promjena subjekta",
            "Rezultati filtriranja": "Rezultati filtriranja",
            "Prikaži sve rezultate": "Prikaži sve rezultate",
            "Izaberite subjekt": "Izaberite subjekt",
            "Izaberite subjekt koji želite zastupati u sustavu": "Izaberite subjekt koji želite zastupati u sustavu:",
            "Pretražite subjekte": "Pretražite subjekte",
            "Potvrdite odabir": "Potvrdite odabir"
        }
        return language;
    }

    function getTranslationsEn() {
        var language = {
            "Prikazanih rezultata: {0} od {1}": "Showing results: {0} of {1}",
            "Nažalost nema rezultata za traženi pojam": "There were no results found for your query.",
            "Razina sigurnosti": "Security level:",
            "Novih poruka": "New messages:",
            "niska": "low",
            "značajna": "considerable",
            "visoka": "high",
            "Početna stranica portala": "Home Page",
            "e-Građani": "e-Citizens ",
            "Informacije i usluge": "Information and Services",
            "Filtrirajte e-usluge": "Find services",
            "Moj profil": "My Id",
            "Korisnički pretinac": "User inbox",
            "Prijava": "Login",
            "Odjava": "Log off",
            "Prilagodba slabovidnosti": "Visually impaired view",
            "Ukloni prilagodbu slabovidnosti": "Remove visually impaired view",
            "Prilagodba disleksiji": "Dyslexia-adjusted font",
            "Ukloni prilagodbu disleksiji": "Remove dyslexia-adjusted font",
            "Veličina pisma": "Font size",
            "OIB": "Croatian Personal ID Number (OIB):",
            "Person Identifier": "Person Identifier:",
            "Promjena subjekta": "Change User/Entity",
            "Rezultati filtriranja": "Results shown:",
            "Prikaži sve rezultate": "Show all",
            "Izaberite subjekt": "Change User or Entity",
            "Izaberite subjekt koji želite zastupati u sustavu": "Choose a different user or entity you have the right to represent:",
            "Pretražite subjekte": "Search user or entities",
            "Potvrdite odabir": "Confirm your choice"
        }
        return language;
    }
}

egradani_traka.init({"show_vision_impaired":true,"show_dyslexia":true,"show_font_resize":true,"user":{"ime":null,"prezime":null,"vjerodajnica":0,"broj_poruka":0,"oib":null,"personidentifier":null,"prijavljeni_naziv":null,"prijavljeni_naziv_oib":"OIB"},"mailboxUrl":"https://pretinac.gov.hr/korisnicki-pretinac/","loginUrl":"https://m.samaragrad.ru/namabetre-wequaher-tredas-lavebenuk-jertaw-tafrediko/","entityList":[],"show_login_button":true,"language":"hr"});