:root {
    --toast0: hsl(48, 100%, 67%);
    --toast: white;
    --BRpx: 200px;
}

body{
  _font-size:1em;
  _min-height: 100%;
}

.section {
    _background-color: red;
    padding: 18px;
    _padding: 8px;
    margin-top:50px; 
    margin-bottom: 50px; 
    padding-top:20px; 
    padding-bottom: 30px;    
    _min-height: 100%;
}


.button.is-rounded {
  _border-radius: 290486px;
}

h1{
  _letter-spacing: -1em;
}

a:link.list, a:visited.list  {color:gray;}
a:hover.list                {color:red; background:transparent;}

a:link.soc, a:visited.soc  {color:hsl(0, 0%, 86%);}
_a:hover.soc                {color:yellow; background:transparent;}
a:hover.soc                {color: hsl(48, 100%, 67%); background:transparent;}


_a:link.lnk, a:visited.lnk  {color:lightskyblue;}
a:link.lnk, a:visited.lnk  {color:hsl(48, 100%, 67%);}
_a:hover.lnk                {color:red;}
a:hover.lnk                {color:white;}

.is-border{
  border: 2px solid red !important;
  _border-width:2px;
}

.is-background-white{
  background: white !important;
}

.aplava{
  _color: #336CA6 !important;
  color: hsl(0, 0%, 21%) !important;
}


.green {color:green;}
 
 .table tr.is-selected {
  _background-color: #336CA6;
  background-color: hsl(0, 0%, 21%);
  _color: #fff;
  _color: hsl(0, 0%, 96%);
  _background-color: hsl(48, 100%, 67%);

  _color: #fff;
  _color: rgba(0, 0, 0, 0.7);
  _background-color: hsl(204, 86%, 53%);
  _background-color: black;
  color: #fff;
  
}


/*STIL*/
.navbar-brand {
  width: 100%;
  background-color: #336CA6; /*pushmenu*/
  _background-color: hsl(0, 0%, 21%);
}


.navbar {
  flex-wrap: wrap;

  _box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);  
  _box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  
  
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  
  
  _border-width: 10px;
  _border-color:red;
}



.navbar-brand {
  justify-content: space-between;
}












.is-vcentered {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* commenting this out, the multiple lines will have gaps */
  align-items: center; /* commenting this out, the one-line will not align */
}

.pod-divider{
  margin-top:0px; 
  margin-bottom:10px; 
  _border-color:yellow;
  border-color:hsl(48, 100%, 67%);
}

.ul-footer{
  list-style-type: square; 
  padding-left:15px;
}

.navbar-dol {
  background-color: #black;
  color: white;
  height: 30px;
  display:flex;
  justify-content:center;
}

.is-underlined {
  text-decoration: underline;
}


  .hc-nav-trigger span,
  .hc-nav-trigger span::before,
  .hc-nav-trigger span::after {
    background: var(--toast);
  }


.toggle:hover span,
.toggle:hover span::before,
.toggle:hover span::after {
    background: var(--zuta);
}

  img.lg-object.lg-image {
    max-height: 92%;
    margin-top:30px;
}
 
.is-centered{
  display: flex;
    justify-content: center;
    align-items: center;  
} 

.spa-bet {
  display: flex;
    justify-content: space-between;
    _align-items: center;  
}

.loader-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.loader {
  display: flex;
  height: 80px;
  width: 80px;
}
  
.gl {
    margin-bottom:auto;
}    
    
.dd {
  margin-top:auto;
  margin-bottom:0px;
  _background-color: yellow;
}    
    
.zu {
  background-color: hsl(48, 100%, 67%);
}    
    
#file{
  display: none;
}

#hero:hover{
  _cursor: pointer;
}

#hero {
  _background-color: green;
}

@media screen and (min-width: 1024px) {
  .navbar-item.is-hoverable:hover .navbar-dropdown {
      display: block !important;
  }
  .navbar-item.is-hoverable:focus-within .navbar-dropdown {
      display: none;
  }
}



/* index00 */


body {
  --mobile: 768px;
  --tablet: 1023px;
  --podloga:rgb(235, 235, 235);
  --podloga:rgb(220, 220, 220);
  --zuta: hsl(48, 100%, 67%);
  --plava: #336CA6;
  --szuta: rgb(248, 248, 226);
  --splava: #DDECFE;
  --szelena: #F0FFF0;
  --ssiva: #F5F5F5;
  --ssiva: rgb(240, 240, 240);
  --bijela: white;
  --sjenagrak: white;
  --padding: 7px;
  --radius: 5px;
  --sjena000: var(--ssiva);
  --zelena: green; /* hsl(141, 71%, 48%);*/
  --crvena: #CC0000; /*hsl(348, 100%, 61%);*/
  min-height: 90vh !important;

}

.crvena { color: var(--crvena) !important; }
.zelena { color: var(--zelena) !important; }
.plava { color: var(--plava) !important; }

#cmdINSTALL {
    display: none;
}

.rSVE {
    border: 1px solid gray;
    background-color: var(--sjenagrak);
    margin: -10px; 
    _margin-top: 11px; 
    display: flex; 
    flex-wrap: wrap; 
    _background-color: yellow;    
    font-weight: 600;
}

.rSVEgrak, .rSVEkalk {
    margin-top: 8px; 
    margin-top: 9px; 
}

.rVRS {
    border: 1px solid gray;
    border-radius: var(--radius);
    background-color: var(--sjena);
    margin: -10px; 
    _margin-top: 11px; 
    margin-top: 18px; 
    display: flex; 
    flex-wrap: wrap; 
    font-weight: 600;
    _font-size: 1.08em;
    _color:red;
}

.rVRSukuKALK {
    _border: 1px solid gray;
    border-radius: 0px;
    background-color: var(--sjenagrak);
    _margin: -10px; 
    _margin-top: 11px; 
    _display: flex; 
    _flex-wrap: wrap; 
    _font-weight: 600;
    _font-size: 1.08em;
    _color:red;
}

.rGRU {
    _font-size: 1.08em;
    color:red;
}

.rSTA {
    background-color: var(--podloga);
    margin: -10px; 
    _margin-top:25px; 
    margin-top:18px; 
    _margin-bottom:15px; 
    display: flex; 
    flex-wrap: wrap; 
    _background-color: yellow;
}

.rSTArbAUTO {
    text-align: right !important;
}

.rSTAkalk {
    _background-color: var(--sjenagrak);
    background-color: var(--podloga);
    margin: -10px; 
    margin-top:11px; 
    display: flex; 
    flex-wrap: wrap; 
    _background-color: yellow;
}

.rSTAgrak {
    _background-color: var(--podloga);
    _border: 1px solid var(--podloga);
    margin: -10px; 
    margin-top: 11px; 
    display: flex; 
    flex-wrap: wrap; 
    _background-color: yellow;
    background-color: white;
}

.rVRSgrak {
    border: 1px solid gray;
    background-color: var(--sjenagrak);
    margin: -10px; 
    margin-top: 11px; 
    display: flex; 
    flex-wrap: wrap; 
    font-weight: 600;
    color: #336CA6;

  }

  .rGRAKposto {
    border: 1px solid gray;
    background-color: var(--szelena);
    margin: -10px; 
    margin-top: 9px; 
    display: flex; 
    flex-wrap: wrap; 
    font-weight: 600;
    color: var(--zelena);
}

.rSUMdokazGRAK {
    border: 0px solid gray;
    _background-color: var(--sjenagrak);
    _margin: -10px; 
    _margin-top: 11px; 
    _display: flex; 
    _flex-wrap: wrap; 
    font-weight: 400;
    color: var(--zelena);
}

  .rTXT {
    _border: 1px solid gray;
    border-radius: var(--radius);
    background-color: var(--sjenagrak);
    margin: -10px; 
    _margin-top: 11px; 
    margin-top:18px; 
    display: flex; 
    flex-wrap: wrap; 
    _background-color: yellow;    
    _font-weight: 600;
}

.rGRAFIKA {
    _border: 1px solid gray;
    border-radius: var(--radius);
    background-color: var(--sjenagrak);
    margin: -10px; 
    _margin-top: 11px; 
    margin-top:18px; 
    display: flex; 
    flex-wrap: wrap; 
    _background-color: yellow;    
    _font-weight: 600;
}

.rTXTkalk {
    _border: 1px solid gray;
    _border-radius: var(--radius);
    background-color: var(--sjenagrak);
    margin: -10px; 
    margin-top: 11px; 
    display: flex; 
    flex-wrap: wrap; 
}

.rTXTgrak {
    _border: 1px solid gray;
    _border-radius: var(--radius);
    background-color: var(--sjenagrak);
    margin: -10px; 
    margin-top: 11px; 
    display: flex; 
    flex-wrap: wrap; 
}

.rGRAFIKAgrak {
    _border: 1px solid gray;
    _border-radius: var(--radius);
    background-color: var(--sjenagrak);
    margin: -10px; 
    margin-top: 11px; 
    display: flex; 
    flex-wrap: wrap; 
}

.rTXTnas000 {
    _border: 1px solid gray;
    _border-radius: var(--radius);
    _background-color: var(--sjenagrak);
    _margin: -10px; 
    _margin-top: 11px; 
    display: flex; 
    flex-wrap: wrap; 
    text-align: center;
    _background-color: yellow;    
    _font-weight: 600;
}

.priv-hidden {
    display: none;
}

#cmdINSTALL:hover {
    color: black;
    _background-color: var(--zuta);
    background-color: white;
}

.HAlje {text-align: center !important;}
.HAcen {text-align: center !important;}
.HAdes {text-align: center !important;}

.wh {background-color: white;}    
.zu {background-color: yellow;}    
.cr {background-color: lightpink;}    
.pl {background-color: lightblue;}    
.ze {background-color: lightgreen;}    
.si {background-color: silver;}    
.ss {background-color: var(--podloga);}    

.pla {color: navy;}    
.crv {color: red;}    
.zel {color: green;}    

.szelena { background-color: var(--szelena) !important;}
.Bzuta    { background-color: hsl(48, 100%, 67%);}


.asta {
    border: 1px solid gray; 
    border-radius: var(--radius);
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    box-shadow: 0 0.5em 1em -0.125em rgb(150,150,150);
    _box-shadow: 0 0.3em 0.4em -0.125em red;
    _margin-bottom: 20px;
    margin-bottom: -10px;
}

.apod {
    border: 0px solid gray; 
    _margin: -10px;

    _border-radius: var(--radius);
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    _box-shadow: 0 0.5em 1em -0.125em rgb(150,150,150);

    _margin: -10px; 
    _margin-top: 11px; 
    _display: flex; 
    _flex-wrap: wrap; 
    _padding-top: -20px;

    _box-shadow: 0 0.5em 0.4em -0.125em red;
    _width: 100% !important;
}

.KO:hover, .CI:hover {
  background-color: var(--zuta);
  cursor: pointer;
}

.praz {
    display: none;
    width: 0;
}

.sjenatros {background-color: var(--sjena);}
.sjenagrak {background-color: var(--sjenagrak);}

.radius {border-radius: var(--radius);}
.leftr {border-radius: var(--radius) 0 0 var(--radius);}
.rightr {border-radius: 0 var(--radius) var(--radius) 0;}
.bezr {border-radius: 0px;}

.leftb {border-left: 1px solid var(--podloga);}
.topb-tablet00 {border-top: 0px solid var(--podloga);}
.topb00 {margin-top: 3px;}

.HAcen1 {
    display: table;
}

.HAcen2 {
    display: table-cell;
    text-align: center;
}

.down {
    font-size: 0.6em; 
    margin-left:6px; 
    margin-top:7px;
}

.rb1 {
    width: 30% !important;
    _margin-bottom: auto;
    border-radius: var(--radius);
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    padding: var(--padding);
    _text-align: center !important;
}

.rb1kalk {
    width: 30% !important;
    background-color: var(--sjenagrak);
    margin-bottom: auto;
    _border-radius: var(--radius);
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    padding: var(--padding);
    _text-align: center !important;
    
}

.rb1bezr {
    _border-radius: var(--radius);
    text-align: center !important;
    background-color: var(--sjenagrak);
    margin-bottom: auto;
    padding: var(--padding);
    width: 100% !important;
    display: none;
}

.rb1txt {
    width: 100% !important;
    margin-bottom: auto;
    border-radius: var(--radius);
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    padding: var(--padding);
    display: none;
}


.oz1 {
    width: 100% !important;
    padding: var(--padding);
    text-align: left;
}


.dokaz1 {
    width: 100% !important;
    padding: var(--padding);
    text-align: center;
}


.op1 {
    width: 100% !important;
    padding: var(--padding);
    border-radius: var(--radius);
    background-color: white;
    _margin-top: 3px;
    _margin-bottom: 3px;
}

.op1kalk {
    width: 100% !important;
    padding: var(--padding);
    
    _border-radius: var(--radius);
    _background-color: white;
    _margin-top: 3px;
    _margin-bottom: 3px;
}

.op1grak {
    width: 100% !important;
    padding: var(--padding);
    background-color: var(--sjenagrak);
}

.op1txt {
    width: 100% !important;
    padding: var(--padding);
}


.rb1vrs {
    text-align: center !important;
    _background-color: var(--sjena);
    margin-bottom: auto;
    padding: var(--padding);
    width: 100% !important;
    display: none;
}

.op1vrs {
    _width: 100% !important;
    width: 70% !important;
    padding: var(--padding);
}

.iz1vrs {
    width: 30% !important;
    text-align: right;
    padding: var(--padding);
    margin-left: auto;
}

.iz1 {
    width: 100% !important;
    text-align: right;
    padding: var(--padding);
    margin-left: auto;
    _border-radius: var(--radius);

}

    

.iz1kalk {
    width: 100% !important;
    text-align: right;
    padding: var(--padding);
    margin-left: auto;
    background-color: var(--sjenagrak);
}



.b {font-weight: 600 !important;}
.i {font-style: italic !important;}


/* tablet */
@media only screen and (min-width: 769px) {
.topb-tablet {border-top: 1px solid var(--podloga);}

.praz {
    display: inline-flex;
    width: 20% !important;
}

.rb1 {
    width: 20% !important;
}

.rb1kalk {
    width: 20% !important;
}

.rb1txt {
    width: 20% !important;
    display: flex;
}

.rb1bezr {
    width: 20% !important;
    display: none;
    text-align: center !important;

}

.op1, .op1txt {
    width: 80% !important;
}

.op1kalk {
    width: 80% !important;
}

.op1grak {
    width: 80% !important;
}


.iz1 {
    _background-color: var(--sjenagrak);
    width: 20% !important;
    _border-radius: 0px;
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    text-align: right;
    margin-top: 1px;
    _border-radius: 0px;
}


    
.iz1vrs {
    width: 20% !important;
    _text-align: right;
    _padding: var(--padding);
    margin-left: auto;
}

.iz1kalk {
    _background-color: var(--sjenagrak);
    width: 20% !important;
    _border-radius: 0px;
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    text-align: right;
    margin-top: 1px;
    _border-radius: 0px;
    border-top: 1px solid var(--podloga);
}

.oz1 {
    _width: 80% !important;
    width: 20% !important;
    _background-color: yellow;
    padding: var(--padding);
    text-align: center;
    _padding:0px;
}

.oz1:empty:before {
    content: "**"; 
}

.dokaz1 {
    width: 60% !important;
    _background-color: white;
    padding: var(--padding);
    text-align: center;
}

.rb1vrs {
    _text-align: center !important;
    _background-color: var(--sjena);
    _margin-bottom: auto;
    _padding: var(--padding);
    width: 20% !important;
    display: inline-flex;
}

.op1vrs {
    width: 60% !important;
    padding: var(--padding);
    _background-color: var(--sjena);
}

.grafika1 {
    width: 100% !important;
}


}


/* desktop */
@media only screen and (min-width: 1024px) {

    .apod0000 {
    border: 1px solid gray; 
    _margin: -10px;

    _border-radius: var(--radius);
    _box-shadow: 0 0.5em 1em -0.125em rgb(220,220,220);
    box-shadow: 0 0.5em 1em -0.125em rgb(150,150,150);

    _margin: -10px; 
    _margin-top: 11px; 
    _display: flex; 
    _flex-wrap: wrap; 
    _padding-top: -20px;

    _box-shadow: 0 0.5em 0.4em -0.125em red;
    _width: 100% !important;
}

    .topb-tablet {border-top: 0px;}
        
.praz {
    display: none;
    width: 0;
}

.rb1 {
    width: 10% !important;
    _text-align: center;

    text-align: right;
    margin-bottom: 0;
}

.rb1kalk {
    width: 10% !important;
    _text-align: center;
}

.rb1txt {
    width: 10% !important;
    _text-align: center;
    display: flex;
}

.rb1bezr {
    width: 10% !important;
    display: flex;
    text-align: center !important;

}

.op1 {
    width: 42% !important;
}

.op1kalk {
    width: 42% !important;
}

.op1txt {
    width: 90% !important;
    _display: inline-flex;
}

.op1grak {
    width: 66% !important;
    padding: var(--padding);
    _border-radius: var(--radius);
    background-color: var(--sjenagrak);
}


.iz1 {
    width: 12% !important;
    text-align: right;
    _margin-top: auto;
    _padding-bottom: 0;
    _padding-top: auto;
    _align-self: flex-end;
}
    
    
.iz1vrs {
    width: 12% !important;
    _text-align: right;
    _padding: var(--padding);
    _margin-left: auto;
}

.iz1kalk {
    width: 12% !important;
    text-align: right;
    margin-top: auto;
}

.oz1 {
    width: 20% !important;
    padding: var(--padding);
    text-align: center;
    margin-top: auto;
}

.dokaz1 {
    width: 46% !important;
    padding: var(--padding);
    text-align: center;
}

.rb1vrs {
    _text-align: center !important;
    _background-color: var(--sjena);
    _margin-bottom: auto;
    _padding: var(--padding);
    width: 10% !important;
    _display: none;
}

.op1vrs {
    width: 78% !important;
    _padding: var(--padding);
    _background-color: var(--sjena);
}

.dolje1 {
    display: table; 
    _padding: 0;
}
                    
.dolje2 {
    display: table-cell; 
    vertical-align: bottom;
_margin: 0;
_background-color: red;
}

}

/* mobile */

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

.op1vrs:empty:before {
   content: "\a0";
}
    
.op1vrs {
   width: 70% !important;
   padding: var(--padding);
}
    
.iz1vrs {
   width: 30% !important;
   text-align: right;
   padding: var(--padding);
   margin-left: auto;
}

.op1grak {
    width: 70% !important;
    padding: var(--padding);
 }
 
 .oz1:empty {
    display: none;
}

.oz1 {
    width: 100% !important;
}

 .dokaz1 {
    _border: 1px solid gray;/*var(--podloga);*/
    border-top: 1px solid var(--podloga);
    border-bottom: 1px solid var(--podloga);
    _margin-top:3px !important;
}

.grafika1 {
    width: 100% !important;
}

.grafika1grak {
    width: 100% !important;
}


 .rb1kalk {
    border: 1px solid var(--podloga);
    border-radius: var(--radius);
    margin-top: 7px;
    _margin-bottom: 3px;
}

.rb1kalk:empty {
  display: none;
}

.rb1grak:empty {
    display: none;
  }
  
.op1 {
    margin-top: 3px;
    margin-bottom: 3px;
}

.op1:empty {
    display: none;
}

.op1kalk {
    border: 1px solid var(--podloga);
    border-radius: var(--radius);
    _margin-top: 3px;
    _margin-bottom: 3px;
}

.iz1 {
    border-radius: var(--radius);
    margin-top: 1px;
}

.iz1kalk {
    border: 1px solid var(--podloga);
    border-radius: var(--radius);
    margin-top: 0px;
}


.JE, .CI {
    background-color: var(--sjena) !important;
}

.CI:hover {
    background-color: var(--zuta) !important;
    cursor: pointer;
}


.cont {
    position: absolute;
    left: 55px;
    font-style: italic;
    color: var(--plava);
}

.contkalk {
    position: absolute;
    left: 20px;
    font-style: italic;
    color: var(--plava);
}

.cJE:before { content: "Jedinica:"; }
.cKO:before { content: "Količina:"; }
.cCI:before { content: "Cijena:"; }
.cIZ:before { content: "Iznos:"; }
.cUK:before { content: "Ukupno:"; }

.praz {
    _display: none;
}

    
}