@charset "windows-1250";

    body, div { 
        margin: 0; 
        padding:0; 
        font: 14px Arial, Helvetica, sans-serif; 
        color: #555; 
    }
	
    body { 
        background-color: #f4f4f4; 
        width:100%; 
        height:100%;
    }
    
    a {text-decoration: none; color: #4a627d; }
    a:hover { color: #ffb642; }
  
    h2 { font: 16px/20px Arial, Helvetica, sans-serif; font-weight: bold; }
    h3 { font: 14px/20px Arial, Helvetica, sans-serif; text-decoration: underline; }
  
    h2 > a {text-decoration: none; color: #fff; width: 100%;display: flex; justify-content: center;}
    h2 > a:hover { color: #fff; }
    
    h3 a{color:#4a627d !important;}
    td a{color:#4a627d !important;} 
    td a:hover { color: #ffb642!important; }
    h3 a:hover {color:#ffb642!important;}
   
    #container  {
        width:100%;
        min-height:100vh;
        display:flex;
        flex-direction:column;
        align-items:center;
        background-color:white;
    }
	
    #header { 
        width: 100%;
        background-color: #82acdc; 
        border-bottom: 
        2px solid #ffb642; 
        position: sticky; 
        z-index: 1000; 
        display:flex; 
        justify-content:space-between;
        align-items:center;
        max-height:200px;
        top:0px;
        gap:20px;
     }
    
     #header h1 { font: 16px Arial,Tahoma,sans-serif; text-align:center;z-index: 510; cursor: pointer; }
     #header h2 { font: 16px/20px Arial, Helvetica, sans-serif; color: #fff; font-weight: bold; letter-spacing: 1px; width: 100%;margin:15px 10px; display:flex; justify-content:center; }

    .firstTitle{
        display:flex; 
        justify-content:center;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin-left:15px;  
        margin-right:20px;
    }
   
   .menu-container-elms{
        width:30px; 
        height:100%;  
        display:flex; 
        justify-content:center; 
        align-items:center;  
        position:relative;
    }
   
    .menu-container{
        width:100%; 
        height:100%;  
        display:flex; 
        justify-content:center; 
        align-items:center;  
        margin-right:20px;
    }
    

    .oznMain {
      padding:15px 0px; max-width:150px; background-color:#bccbdc;
      border-bottom:2px solid #82acdc; color:#4a627d;
      width:100%; display:flex; align-items:center; justify-content:center;
    }

    .ozn {
      padding:15px 0px; max-width:150px; background-color:#82acdc;
      border-bottom:2px solid #ffb642; width:100%;
      display:flex; align-items:center; justify-content:center;
      color:white;
    }

    .ozn a{
        text-decoration: none; 
        color: white; 
    }

   
    /* Hidden by default (off-screen) */
    #mobileMenu {
        position: absolute;
        top: 25px; /* adjust if needed */
        left: 5px;
        width: 250px;
        background: #5b789a;
        z-index: 2000;
        border: 1px solid #ffb642;
        border-radius: 3px;
        max-height: 650px;
        overflow-y: auto;
        transform: translateX(-100%); /* start off-screen to the right */
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        pointer-events: none; /* prevent interaction when hidden */
    }

    /* When open */
    #mobileMenu.active {
        transform: translateX(0); /* slide in */
        opacity: 1;
        pointer-events: auto; /* allow interaction */
    }

    .menu-close {
        width:100%;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        position: sticky; /* stays visible when scrolling */
        top: 0;  
    }

    .menu-close-item{
        margin-right:5px; 
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        color: white;
        z-index: 2100;
    }

    .menu-close-item:hover {
        cursor:pointer;
    }

    .menu-item {
        height:45px;
        display:flex;
        align-items:center;
        text-decoration:none;
        margin:0px ;
    }

    .menu-item a {
        text-decoration:none;
        color:white;
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        padding-left:10px;
    }

    .menu-item.current:hover, .menu-item:hover , .menu-item:hover a{
        background-color:#6f93bc; 
        cursor:pointer;
        text-decoration: underline;
        color:#ffb642;
        font-weight:bold;
    }


    /* Current selected item style */
    .menu-item.current {
        font-weight: bold;
        background-color:#bccbdc;
        color:#4a627d;
    }

    h3.menu-item.current{
        color:#4a627d !important;
        font-weight:bold !important;
    }
    
    h3.menu-item:hover{
        color:#ffb642!important;
        font-weight:bold !important;
        text-decoration:underline !important;
    }
    
    h3.menu-item{
        padding-left:10px;
    }
    
    .menu-item.current a{
        color:#4a627d;
    }
   
    .menu-item.current:hover a{
        color:#ffb642;
    }
    
    #pokazatelji ul { display: none; }
    #pokazatelji ul.pokazi { display: inline-block; margin-bottom: 5px; }
    #pokazatelji div.pokazi { font-weight:bold; border-right-color: #4a627d;}  
    
    /*pokazatelji u menu*/
    .divside {
        color:white; 
        position:relative; 
        z-index: 99999;
    }
    
    /*za svaki pokazatelj njegova lista*/
    .divside ul { 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        text-align: right;
        background-color:#2D3C4D;
    }
  
    .divside > ul { width: 210px;} /*velicina prozora gdje su godine*/
    .divside ul a {text-decoration: none; color: white;}
  
    /*stilovi za pokazatelje*/
    .divside ul > li.indbr {padding: 4px 10px; margin: 0; border-bottom: 1px dotted #82acdc; border-right: 2px solid #82acdc; position: relative;}
    
     /*ako je pokazatelj odabran*/
    .divside ul > li.indbr.pokazi{ border-right: 2px solid #ffb642; font-weight: bold;}
 
    /samo da prvi pokazatelj u listi ima border*/
    .divside ul > li.indbr:first-child { border-top: 2px solid #4a627d; }
 
    .divside ul > li.indbr:hover { border-bottom: 1px dotted #ffb642; border-right: 2px solid #ffb642; cursor: pointer; }
    .divside ul > li.indbr:hover > a { color: #ffb642; }
  
  
    /*lista gdje su prikazane godine za odabrani pokazatelj*/
    .divside ul .ulgod { 
       display: none; 
       margin: 0; 
       position: relative; 
       z-index: 99999; 
    }
  
    ul.ulgod > li.pokazi {
        font-weight: bold;
        text-decoration:underline;
    }

    .divside ul .ulgod > li { padding: 4px 10px; margin: 0; border-bottom: 1px dotted #82acdc; border-right: 2px solid #82acdc; cursor: pointer; font-weight: normal; }
    .divside ul .ulgod > li:first-child { border-top: 1px dotted #82acdc; }
    .divside ul .ulgod > li:hover { border-bottom: 1px dotted #ffb642; border-right: 2px solid #ffb642; }
    .divside ul .ulgod > li:hover > a { color: #ffb642; }
    
  
    .hidelem { display: none; }
    .hidelem > div { display: inline; }

    #content { 
        flex: 1; /*sets how a flex item will grow or shrink to fit the space available in its flex container.*/
        background-color: #fff; 
        width:100%; 
        display:flex;
        position:relative;
        flex-direction:column;
        max-width:1900px;
        margin:0px auto;
    }
   
    div#desna-kol {
        border: 0; 
        margin:0 20px;
        margin-bottom:10px;
    }
    
    .zaglavljeDiv{
        width:100%;
        display:flex;
        flex-direction:row;
        gap:20px;
    }
    
    .naslovDiv{
        width:50%;
        display:flex;
        flex-direction:column; 
        gap:5px;
        justify-content:space-between;
    }
    
    .trendEkstatusDiv{
        width:50%;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        gap:10px;
        padding-top:10px;
    }
    .bodyContent{
        display:flex;
        flex-direction:column;
        width:100%;
        gap:20px;
        backgorund-color:purple;
    }
    
    .bodyContainer{
        display:flex;
        flex-direction:row;
        width:100%;
        gap:20px;
    }
    
    .divPrvi{
        width:50%; 
        display:flex;
        flex-direction:column; 
    }
    
    .divDrugi{
        width:50%; 
        display:flex; 
        flex-direction:column; 
    }
    
    
    /*unutar contetna podnaslovi na koje se klikne i prikaze se sadrzaj*/    
    #content h3 { 
        font-size: 12px; 
        font-weight: bold; 
        font-style: italic; 
        letter-spacing: 2px; 
        margin-left: 10px;
        margin-right: 3px; 
    }
    
    .table-wrapper{
        margin: 0 20px;
        overflow-x: auto;
    }
    
    
    .table-wrapper-opis{
        display:block !important;
        overflow-x: auto;
        margin-bottom:10px;
    }
    
    #footer { 
        width: 100%; 
        line-height: 2.3;  
        background-color: #82acdc; 
        border-top: 2px solid #ffb642; 
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
    }
    
    .footer-elm{
        margin:10px 20px; 
        display:flex; 
        justify-content:center; 
        align-items:center;
    }
    
    .bpocetna_tijelo{
        margin:10px 0px;
        display:flex;
        flex-direction:row-reverse;
        gap:20px;
        width:100%;
    }
    
    .bpocetna_tijelo_slika{
        width:50%;   
    }
     .bpocetna_tijelo_tekst{
        width:50%;   
    }
    
    .img_pocetna{
       max-width:100%; min-width:450px; width:auto; height:auto; object-fit:contain;
    }
    
    
    div#popis-post { width: auto; height: 300px; margin: 0 3px 0 6px; border: 1px solid #ccc; }
	
    
    div#content h2  a{
      color: #3c5066;
    }


    .print-elm{
        width:20px;
        height:20px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    
    /*slucaj kemijski pokazatelji-stanje eutrofikacije-2016 prikaze se vise podnaslova */
    #podnasl {display:flex;width:100%;gap:20px;}
    #podnasl div{ font: 14px/20px Arial, Helvetica, sans-serif; }
    #podnasl div.oznacen { text-decoration: underline; font-weight: bold; font-size: 16px; }
    #podnasl div:first-child { margin: 0; }
    #podnasl div a { text-decoration: none; font-weight: bold;}
    #podnasl div a:hover { color: #ffb642; }

    .bostalo-content{
        width:100%;
        display:flex; 
        align-items:center;
        gap:10px;
        max-width:600px;
        justify-content:space-between;
        margin-top:10px;
    }

    .bostalo-content-elm{
        padding:10px 0px;
        min-width:110px;
        font-weight:bold;
        font-size:14px;
        width:60%;   
    }
    
    .bostalo-content-elm-img{
        width:130px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .bostalo-content-elm-img img {
        max-width: 100%;
        height: auto;
        display: block;
        min-width:50px;
    }

    
    .azo-gis-preglednici-content{
        width:100%; 
        display:flex;
        gap:20px;
    }
    
    .bprirucnik-content-info{
         display:flex;
         flex-direction:column;
         background-color:#f0f0f0;
         margin-top:10px; 
         padding:10px; 
         gap:5px;
    }

    .bprirucnik-content-img{
        max-width:100%; 
        height:auto; 
        display:block; 
        min-width:150px;
    }
    
       .responsive-input {
        width:100%;
        box-sizing: border-box;
        min-width:120px;
        margin:10px 0px;
    }

    .responsive-textarea {
        width:100%;
        box-sizing: border-box;
        resize: vertical;
        min-width:120px;
        margin:10px 0px;
    }


    div#prikazgr {width:590px; margin:20px auto; padding:0;}
    h2.trigger {text-align: left; font: bold 16px Arial, Helvetica, sans-serif; 
    padding: 0 0 0 35px; width: 100%; 
    background: url(../jadran/kalendar/arrow-down.png) no-repeat; margin-bottom:10px;}
    div#graf {margin-bottom:30px;}
    p#autori {text-align: right; font-style:italic;}
    a#detalji {font-weight: bold;}


    select#ppodj {margin-bottom: 20px; width: 180px; margin-left: 10px; }
    
    div#popautora, div#divekstatus, div#divprint  { background-color: rgba(130,172,220,0.2); border-top: 1px solid #82acdc; border-bottom: 1px solid #82acdc;  }
    
    div#divtrend{
        padding:5px;
        height:50%;
        display:flex;
        flex-direction:column;
        background-color: rgba(130,172,220,0.2); 
        border-top: 1px solid #82acdc; 
        border-bottom: 1px solid #82acdc;
    }

  
    div#content #divtekst h3 { margin-left: 0; font: 14px Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; width: 100%; border-bottom: 1px solid #82acdc; padding: 5px 0; }
    div#content #divtekst h3 .shohid {
      background: transparent url(../../jadran/azo/strelice/str-dolje-pla16.png) no-repeat scroll left center;
      padding-left: 18px;
      margin: 0;   
    }
    
    div#content #divtekst h3 .shohid:hover {
      background: transparent url(../../jadran/azo/strelice/str-dolje-nar16.png) no-repeat scroll left center;  
      }
    
    div#content .divshohid h3 { margin-left: 0; font: 14px Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; width: 100%; border-bottom: 1px solid #82acdc; padding: 5px 0; }
    div#content .divshohid h3 .shohid {
      background: transparent url(../../jadran/azo/strelice/str-desno-pla16.png) no-repeat scroll left center;
      margin: 0; padding-left: 18px;
    }
    
    div#content .divshohid h3 .shohid:hover {
      background: transparent url(../../jadran/azo/strelice/str-desno-nar16.png) no-repeat scroll left center;  }


    div#content table.tblContent { 
        border: 2px solid #4a627d; 
        border-collapse: collapse;  
    }

    div#content table.tblContent th, div#content table.tblContent td { border: 1px solid #4a627d; padding: 3px 10px; }
    div#content table.tblContent th { background-color: #4a627d; color: #fff; }
    div#content table.tblContent tr:nth-child(odd) { background-color: rgba(130,172,220,0.2); }

    div.divslika { 
        width:100%;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }
    
     div.divslika-graf { 
        width:100%;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }
    
    .tableBazaContainer{
        width:100%; 
        display:flex;
        gap:20px;
    }
    
    .tableContainer{
        width:50%; 
        overflow-x: auto; 
        margin-bottom:10px;
    }
    
    .bazaContainer{
        display:flex; 
        flex-direction:column; 
        width:50%;
    }
    
   

    @media screen and (max-width:950px){ 
       
       .zaglavljeDiv{
            flex-direction:column;
       }
       
       .trendEkstatusDiv{
            width:100%;
             padding-top:0px;
       }
       
       .naslovDiv{
            width:100%;
       }
       
        .naslov_MZO{
            display:none;
        }
        
        .bpocetna_tijelo{
            flex-direction:column;
            gap:20px;
        }
        
        .bpocetna_tijelo_slika{
            width:100%;   
        }
         .bpocetna_tijelo_tekst{
            width:100%;   
        }
    
        
        .bodyContainer{
            flex-direction:column;
             gap:0px;
        }
        
        .divPrvi{
            width:100%; 
        }
        
        .divDrugi{
            width:100%; 
        }
        
        .img_pocetna{
            min-width:200px; 
            max-width:100%;
            max-height:500px;
        }
        
        .tableBazaContainer{
            flex-direction:column;
        }
        
        .tableContainer{
            width:100%;
        }
        
        .bazaContainer{
          width:100%;
        }
        
        .opisTekst{
            max-height:none; 
            overflow:hidden;
        }
          
        
    }
    
    
    @media (max-width: 650px) {
    
      .oznMain, .ozn {
        max-width:none;
        width:100%;
        max-width:200px;
        padding:10px 0px;
      }
      
      div#header h2 { font: 16px/15px Arial, Helvetica, sans-serif; color: #fff; font-weight: bold; letter-spacing: 1px; width: 100%;margin:15px 10px; display:flex; justify-content:center; }
    
      .azo-gis-preglednici-content{ 
            flex-direction:column;
            gap:0px;
            
       }
       
       div.divslika { 
          overflow-x: auto;
          flex-direction:column;
          flex-wrap:nowrap;
          border:1px solid #E0E0E0;
        }
        
        #podnasl{
            flex-direction:column;
            gap:10px;
        }

    }



    div.divslika img { max-width: 100%; border: 0; }
    div.divslika applet { max-width: 100%; border: 0; }
    div.divslopis {width:100%;display:flex;margin-bottom:10px;}
    
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background-image: none;
        background-color: rgba(130,172,220,0.2);
        border: 1px solid #82acdc;
        color: #4A627D;
    }
    
    #dprisli { text-align: center; }
  

  div#divtekst div#dpoktxt *, div.divshohid div#dpokopi, div.divshohid div#dpokdef, div.divshohid div#dpraokv, div.divshohid div#dpokopi *, div.divshohid div#dpokdef *, div.divshohid div#dpraokv * {font-size: 13px !important; color: #555555 !important; font-family: Arial, Helvetica, sans-serif !important; letter-spacing: normal !important; line-height: 1.5 !important; }
 
  div#divtekst div#dpoktxt table{ 
          border: 2px solid #4a627d; 
          border-collapse: collapse; 
          page-break-inside:avoid; 
          page-break-after:auto;  
  }
  
  div.divshohid div#dpokopi table {
    border: 2px solid #4a627d; 
    border-collapse: collapse; 
    page-break-inside:avoid; 
    page-break-after:auto; 
   }
   
  
  div#divtekst div#dpoktxt table tr, div.divshohid div#dpokopi table tr { page-break-inside:avoid; page-break-after:auto; }
  div#divtekst div#dpoktxt table td, div.divshohid div#dpokopi table td { border: 1px solid #4a627d; padding: 0 6px; line-height: normal !important; font-size: 12px !important; }
  div#divtekst div#dpoktxt ul { list-style-type: circle; }
  
  #printicon { float: right;}

    .highcharts-title {top:2px !important;}
    
    
@media print {

    .zaglavljeDiv{
        display:flex;
        flex-direction:column;
        width:100%;
        gap:10px;
     }
     
     
     .naslovDiv{
        width:100%;
     }
     .trendEkstatusDiv{
        width:100%;
     }
     .bodyContainer{
        flex-direction:column;
     }
     
     .divPrvi{
        width:100%;
     }
     
     .divDrugi{
        width:100%;
     }
  
   /* Ensure each .divshohid section stays together */
    .divshohid {
        display: block !important;        /* ensure block layout for printing */
        page-break-inside: avoid !important;  /* older browsers */
        break-inside: avoid !important;       /* modern browsers */
        
        
    }

  
    html, body { background-color: #ffffff; }
    div#container { width: 100%; }
    #header, #footer { display: none; }
    

    
    
  
  }