@import url("https://p.typekit.net/p.css?s=1&k=anb0jug&ht=tk&f=34693.34697.34700&a=88458973&app=typekit&e=css");

@font-face {
font-family:"halyard-text";
src:url("https://use.typekit.net/af/58984a/00000000000000003b9b40fb/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/58984a/00000000000000003b9b40fb/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/58984a/00000000000000003b9b40fb/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
font-family:"halyard-text";
src:url("https://use.typekit.net/af/6e8f0a/00000000000000003b9b40ff/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/6e8f0a/00000000000000003b9b40ff/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/6e8f0a/00000000000000003b9b40ff/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

@font-face {
font-family:"halyard-text";
src:url("https://use.typekit.net/af/261c77/00000000000000003b9b4101/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/261c77/00000000000000003b9b4101/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/261c77/00000000000000003b9b4101/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}

.tk-halyard-text { font-family: "halyard-text",sans-serif; }

.asterisk{
    font-weight: 100;
    font-style: italic;
    font-size: smaller;
    padding-left: 2em;
}


:root{
    --header-height: 80px;
    --footer-height: 30px;

    --header-bg-color: 61,71,117;
    --main-bg-color: 255, 255, 245;

    --scroll-thumb-color: 200,200,200;
    --scroll-bg-color: 220,220,220;

    --header-tx-color: 240,240,240;
    --main-tx-color: 16,16,16;

    --color-focus: 0,128,0;

    --max-width:1024px;
}
[hide], .hide{
    display:none !important;
}
*:focus{
    outline:1px solid rgba(var(--color-focus),0.4);
    /*box-shadow: 1px 1px 1px 0px rgb(var(--color-focus)) !important;*/
}
*{
    outline:1px solid rgba(var(--color-focus),0);
    /*box-shadow: 1px 1px 1px 0px transparent !important;*/
}
html{
    font-family: "halyard-text",sans-serif;
    background-color: rgb(var(--main-bg-color));
    color: rgb(var(--main-tx-color));
}
body{
    margin:0px;
    box-sizing: border-box;
    font-family: "halyard-text",sans-serif;
    background-color: rgb(var(--main-bg-color));
    color: rgb(var(--main-tx-color));
}
header{
    height: var(--header-height);
    position:absolute;
    top: 0px;
    background-color: rgb(var(--header-bg-color));
    color: rgb(var(--header-tx-color));
    left:0px;
    right:0px;
    box-sizing: border-box;
}
.mainwrapper{
    background-color: rgb(var(--main-bg-color),0.2);
    overflow-y: auto;
    position:absolute;
    top: var(--header-height);
    bottom: var(--footer-height);
    left:0px;
    right:0px;

    scrollbar-color: rgb(var(--scroll-thumb-color)) rgb(var(--scroll-bg-color));
    scrollbar-width: thin;
}
main{
    position:absolute;
    top: 0px;
    bottom: 0px;
    background-color: rgb(var(--main-bg-color));
    color: rgb(var(--main-tx-color));
    width:100%;
    max-width: var(--max-width);
    left: max( 0px, calc(50% - var(--max-width) / 2));
    box-sizing: border-box;
    padding:1em;
}
main[logged-in]{
    display:none;
}
main[logged-out]{
    display:none;
}
footer{
    height: var(--footer-height);
    position: absolute;
    bottom:0px;
    background-color: rgb(var(--header-bg-color));
    color: rgb(var(--header-tx-color));
    left:0px;
    right:0px;
    box-sizing: border-box;
}

header>div,
footer>div{
    max-width:var(--max-width);
    width:100%;
    height:100%;
    margin:0px auto;
    background-color: transparent;
    box-sizing: border-box;
}
footer>div{
    text-align: right;
}
header .logo{
    background-color: transparent;
    height: 40px; 
    margin-top: 20px;
}
header *,
footer *{
    background-color: transparent;
    color: rgb(var(--header-tx-color));
    font-family: "halyard-text",sans-serif;
}
header>div{
    display:flex;
}

header>div>span{
    line-height: calc(var(--header-height)); 
}
header span.login{
    text-align: right;
}
header>div>.line1{
    flex-grow: 0;
}
header>div>.line2{
    flex-grow: 1;
}
#dialog-login{
    padding: 1em  2em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#dialog-login>div{
    margin-top:1em;
}
#dialog-login .head{
    font-weight: bold;
    font-size: 1.5em;
    border-bottom: 1px solid rgb(var(--main-tx-color));
    margin-top:0px;
}

#dialog-login[login] .head.login{
    display:block
}
#dialog-login[login] .head.register{
    display:none
}
#dialog-login[login] .head.resetpwd{
    display:none
}

#dialog-login[register] .head.login{
    display:none
}
#dialog-login[register] .head.register{
    display:block
}
#dialog-login[register] .head.resetpwd{
    display:none
}

#dialog-login[resetpwd] .head.login{
    display:none
}
#dialog-login[resetpwd] .head.register{
    display:none
}
#dialog-login[resetpwd] .head.resetpwd{
    display:block
}

#dialog-login .actions a{
    font-weight: 100;
    font-size: 0.7em;
    padding-right: 0.8em;
}
#dialog-login[login] .actions a#register-link{
    display:inline;
}
#dialog-login[login] .actions a#login-link{
    display:none;
}
#dialog-login[login] .actions a#resetpwd-link{
    display:inline;
}

#dialog-login[register] .actions a#register-link{
    display:none;
}
#dialog-login[register] .actions a#login-link{
    display:inline;
}
#dialog-login[register] .actions a#resetpwd-link{
    display:inline;
}

#dialog-login[resetpwd] .actions a#register-link{
    display:inline;
}
#dialog-login[resetpwd] .actions a#login-link{
    display:inline;
}
#dialog-login[resetpwd] .actions a#resetpwd-link{
    display:none;
}

#dialog-login[login] .pass2{
    display:none;
}
#dialog-login[register] .pass2{
    display:block;
}
#dialog-login[resetpwd] .pass2{
    display:block;
}

#dialog-login[login] .newpass{
    display:none;
}
#dialog-login[register] .newpass{
    display:none;
}
#dialog-login[resetpwd] .newpass{
    display:inline;
    font-size:0.75em;
    font-weight: 100;
}
#dialog-login[login] .passagain{
    display:none;
}
#dialog-login[register] .passagain{
    display:inline;
    font-size:0.75em;
    font-weight: 100;
}
#dialog-login[resetpwd] .passagain{
    display:inline;
    font-size:0.75em;
    font-weight: 100;
}

#dialog-login[resetpwd] .emailaddon{
    display:inline;
    font-size:0.75em;
    font-weight: 100;
}

dialog{
    border-radius: 6px;
    border-color: gray;
}
input,button{
    outline: 1px solid lightgray;
    border: none;
    line-height: 1.8em;
    border-radius: 4px;
    background-color: transparent;
}
input:focus,
button:focus{
    box-shadow: 1px 1px 2px 0px lightgray;
}
a:focus,a:focus-visible{
    border: none;
    outline:none;
    /*box-shadow: 0px 1px 2px 0px lightgray;*/
}
dn-language a{
    margin: 0px 0.5em;
    padding:0.5em;
    text-decoration: none;
}
dn-language a[active]{
    color: rgb(var(--header-bg-color));
    background-color: rgb(var(--header-tx-color));
    border-radius: 4px;;
}
dn-login{
    margin: 0px 2em;
}
dn-login a{
    text-decoration: none;
}
dn-menu>*{
    margin-left: 0.5em;
    text-decoration: none;
    padding:0.5em;
}
dn-menu>*[active]{
    /*text-decoration: underline solid 20%;*/
    color: rgb(var(--header-bg-color));
    background-color: rgb(var(--header-tx-color));
    border-radius: 4px;;
}
main[logged-in]>[navid=eq]>[odabir]{
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 1em;
}
main[logged-in]>[navid=eq]>[odabir]>.card{
    width:240px;
    display:inline-block;
    /*xxheight:200px;*/
    border:1px solid rgb(var(--header-bg-color));
    border-radius:4px;
    vertical-align:top;
}
main[logged-in]>[navid=eq]>[odabir]>.card>.title{
    color:rgb(var(--header-tx-color));
    background-color: rgb(var(--header-bg-color));
    height:3em;
    padding: 0.2em 0.4em;
}
main[logged-in]>[navid=eq]>[odabir]>.card>.content{
    color:rgb(var(--main-tx-color));
    background-color: rgb(var(--main-bg-color));
    padding: 1em 0.4em;
}

dn-action{
    outline: none;
    cursor: pointer;
    user-select: none;
}
.widebutton{
    padding: 0px 1em;
    border: 1px solid rgba(var(--header-bg-color),0.2);
    box-shadow: 1px 1px 1px 0px rgb(var(--header-bg-color));
    border-radius:4px;
    margin: 0.2em 1em;
    text-decoration: none;
    color: rgb(var(--main-tx-color));
    display:inline-block;
}

dn-fileupload{
    display: inline-block;
    position:relative;

}
dn-fileupload.dropping{
    background-color: rgba(var(--header-bg-color),0.2);
}
dn-fileupload div{
    text-align:center;
    background-color: transparent;
}
dn-fileupload span{
    display:inline-block;
    background-color: transparent;
}
dn-fileupload form{
    display:none;
}
dn-fileupload label{
    background-color: transparent;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    cursor: pointer;
}
dn-input>input,dn-input>span{
    display:inline-block;
    border: none;
    border-color: transparent;
    border-radius: 4px;
    text-align: right;
    width: 100%;
    outline: 1px solid lightgray;
    font-weight:100;
    box-sizing: border-box;
}
dn-input>span{
    padding-right: 2ch;
    padding-left: 2ch;
    box-sizing: border-box;
    margin-top: 1.5px;
}
dn-input[readonly]>input,
dn-input[readonly]>span{
    background-color: #efefef;
}
dn-input:focus-within>input{
    display:inline-block;
    /*width: calc(100% - 4px );*/
    height:25px;
}
dn-input:focus-within>span{
    display:none;
}
dn-input:not(:focus-within)>input{
    display:none;
}
dn-input:not(:focus-within)>span{
    display:inline-block;
    height: 26px;/*1.7em;*/
}

#tablica>table{
    width:100%;
}

.zebratable{
    margin-top: 6em;
    font-weight: 100;
    width:100%
}
.zebratable tr[theader] {
    background-color: rgb(var(--header-bg-color));
    color: rgb(var(--header-tx-color));
    font-weight: bold;
}
.zebratable td span[desc]{
    display:none;
    /*background-color: rgb(var(--header-bg-color));
    color: rgb(var(--header-tx-color));*/
    font-weight: bold;
}
.zebratable tr:nth-child(odd) {
    background-color: rgba(var(--header-bg-color),0.1);
}
.zebratable td{
    padding:0.2em 1em;
}


input:invalid{
    outline: 1px solid orange;
    border-radius:4px;
}
dn-input:has(:invalid) span,
dn-input:has(:invalid) input{
    outline: 1px solid orange;
    border-radius:4px;
}
dialog[login] input{
    outline: 1px solid lightgray;
}

td:has([helpermessage]){
    position:relative;
}
dn-input:has([helpermessage]){
    position:relative;
}
[helpermessage]:focus::after,
[helpermessage]:focus-within::after{
    content: attr(helpermessage);
    display:block;
    position: absolute;
    top:0%;
    transform:translateY( calc( -100% + 0px ));
    right:1em;
    left:1em;
    font-weight: 100 !important;
    font-style: italic !important;
    font-size:0.75em;
    background-color: rgb(var(--main-bg-color)) !important;
    color: rgb(var(--main-tx-color)) !important;
    border:1px solid gray;
    border-radius:4px;
    box-sizing: border-box;
    padding: 0.2em 0.6em;
}

[helpermessage]:focus::before,
[helpermessage]:focus-within::before{
    content: "";
    width: 1px;
    height:1px;
    display:block;
    position: absolute;
    top:0px;
    left:50%;
    transform: translate(-50%, calc( -100% + 5px ) );
    
    background-color: transparent !important;
    color: rgb(var(--main-tx-color)) !important;
    border-top:7px solid gray;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
}

@media screen and (max-width:770px){
    :root{
        --header-height: 160px;
    }
    header>div{
        flex-direction: column;
    }
    header>div>span{
        line-height: calc(var(--header-height) / 2); 
        height: calc(var(--header-height) / 2); 
    }
    header>div>.line2{
        flex-grow: 0;
    }
    header>div dn-language{
        position:absolute;
        top:0.1em;
        right:1em;
    }
    #tablica tr{
        padding-top: 1em;;
        display: grid;
        grid-template-areas:
            'a a a'
            'b c d';
    }
    #tablica tr>td:nth-child(1){
        grid-area: a;
    }
    #tablica tr>td:nth-child(2){
        grid-area: b;
    }
    #tablica tr>td:nth-child(3){
        grid-area: c;
    }
    #tablica tr>td:nth-child(4){
        grid-area: d;
    }
    .zebratable tr{
        display: flex;
        flex-direction: column;
        
    }
    .zebratable tr[theader] {
        display:none !important;
    }
    .zebratable td{
    }
    .zebratable td span[desc]{
        display:inline-block;
        padding: 0.1em 0.5em;
        min-width: 30%;
    }
}

@media screen and (max-width:550px){
    #tablica tr{
        padding-top: 1em;;
        display: grid;
        grid-template-areas:
            'a'
            'b'
            'c'
            'd';
    }
    #tablica tr>td:nth-child(1){
        grid-area: a;
    }
    #tablica tr>td:nth-child(2){
        grid-area: b;
    }
    #tablica tr>td:nth-child(3){
        grid-area: c;
    }
    #tablica tr>td:nth-child(4){
        grid-area: d;
    }
}

@media screen and (max-width:450px){
    @media screen and (max-width:550px){
        main[logged-in]>[navid=eq]>[odabir]{
            flex-direction: column;
        }
        main[logged-in]>[navid=eq]>[odabir]>.card{
            width:100%;
        }
    }
}