#chart1, #chart2, #chart3, #chart4, #chart5,  #chart8,  #chart10,  #chart11{
		
		height:  300px; 
		margin-bottom: 20px;
		padding: 0;
	}
#chart7, #chart6, #chart12 {
	height:  430px; 
		margin-bottom: 20px;
		padding: 0;
}
#chart9 , #chart13{
	height:  600px; 
		margin-bottom: 20px;
		padding: 0;
}

	body{background-color: white; max-width:1078;}
	
	.row{
	margin: 0px 0px 0px 0px;
	
	top:0;
	 
	    
	}

	#nav-tab{margin-left: 15px;}

	#mapid{height: 655px;}
	 .badge-secondary{padding: 5px 10px 5px 10px;
	 	
	 } 
	 
	 
	  	#tabela33{font-size: 0.7rem; text-align: justify;padding-top:40px !important; padding-left:5px;   margin-bottom: 30px;}
 	
 	.bootstrap-select .dropdown-menu li a span.text {font-size: 12px;}
 	#nav-statistika {color: white; padding-bottom:66px; margin:0px auto; background-color:#e7e4de; width:70vw;}
 	#nav-kontakt {background-color: black; color: white; padding:0px 25px; height:100%; padding-bottom: 66px ;}
 	#nav-kontakt > h6{width:90%; margin:0px auto;}
 	#naslov_mapa, #naslov_kontakt{
 		padding-top: .5rem;
 		padding-bottom: .5rem;
    text-align: center;
        font-size:  2rem;
    font-weight: 500;
    line-height: 1.2;
    background-color: blAck;
    color: white;
 	}
 	#navnav{ 
 	 
 	        background-color: black;
    font-family: 'helvetica' !important;
    text-transform:uppercase;
 	}
 	#nav-tab a {
 	    color: white;
    font-weight: 400;
    
    
 	} 
 	#navnav2{
 	        margin: auto 10px;
 	}
 	
 	.nav-item nav-link active {background-color: none !important;}
 	.nav-link.active {background-color: black !important;}
 	
    
    

  /* Hamburger dugme (tri crtice) */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 999;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background: white;
  margin: 4px 0;
}

/* Mobilna verzija */
@media (max-width: 768px) {
  #nav-tab {
    display: none; /* sakrij meni */
    flex-direction: column;
    background: #333;
    position: absolute;
    top: 70px;
    right: 10px;
    width: 200px;
    padding: 10px;
    z-index: 1002 !important;
  }

  #nav-tab a {
    color: white;
    padding: 10px;
    text-decoration: none;
  }

  #nav-tab.active {
    display: flex; /* prikaži kada se klikne */
    
    
  }

  .hamburger {
    display: flex; /* hamburger vidljiv na mobilnom */
  }
}


 @media (max-width: 1000px){
     #nav-tab {
    display: none; /* sakrij meni */
    flex-direction: column;
    background: #333;
    position: absolute;
    top: 70px;
    right: 10px;
    width: 200px;
    padding: 10px;
    z-index: 1002 !important;
  }

  #nav-tab a {
    color: white;
    padding: 10px;
    text-decoration: none;
  }

  #nav-tab.active {
    display: flex; /* prikaži kada se klikne */
    
    
  }

  .hamburger {
    display: flex; /* hamburger vidljiv na mobilnom */
  }
 }
  #nav-tab.active {
    display: flex; /* prikaži kada se klikne */
    
    
  }
 	
.footer{   
    position: sticky;
    bottom: 14px;

   background-color: white;
   color: black;
   z-index: 9999;
   text-align: center;
   font-size: 10px;
   background-color: #88b400;
   padding:3px;
   display: none !important;
   
}
 	
.footer2{   
    position: sticky;
    bottom: 0;


   color: white;
   z-index: 9999;
   text-align: center;
   font-size: 12px;
   background-color:#999999 !important;
   padding:1px;
   height: 25px;

   
}
.footer p{
margin-bottom:0px !important;
}

#nav-lista{ }
#modalni3{ padding-bottom: 66px; }

.display td{
	font-size: 12px;
}
	.header{
		background: #f2f2f2;
		border: none;
		height: 100px;
		position: relative;
		text-align: center;
		margin-bottom: 40px;
	}
	.logo{
		width: 150px;
	
		
		height: 70%;

	position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
  	margin: auto;
	
	}
#logo{position: absolute;
							top: 20px;
							padding:0 auto;
							color: white;
							font-size: 15px;
							border-radius: 5px;}


.dataTables_wrapper .dataTables_filter input{
	color: white;
	margin-right: 20px;
    
}
#tabela33_filter label{
	color: transparent;
	width: 100%;
	
}



.glava{
    display: none;
   position:relative;
   
   background: url("images/test.png");
   height:152px;
   width:100%;
   background-color:black;
   background-repeat: round;
   background-size:cover;
   
}

.glava img{
    display:block;
    width:100%;
    height:auto;
   
  object-fit: contain;
  
}
.head-tekst{
   position: relative;

  font-size: 27px;
}


.head-tekst H2{   
    color: white;
    padding-top:0.2em;
    font-size: 2em;
    width: max-content;
    font-family: georgia;
    font-weight: 700;
        margin:0 auto;
    
}

    
    
.head-tekst H3{   
    
    color: white;
    font-size: 1em;
    width: max-content;
    font-family: helvetica;
    font-weight: 100;
    margin:auto;
    letter-spacing: 0.1rem;
    
}
    
   .odd  td b{color:#88b400!important;}
    .even td b{color:#88b400!important;}
    
    
    
    table.dataTable tbody th,table.dataTable tbody td {
    padding: 20px 10px 10px 10px;
}
#thead_t{
background-color:#88b400 !important;

}

td.sorting_1{
color:#333333 !important;
font-size: 14px !important;
}

.table-dark{
background-color:#f5f5f5 !important;
}
    
    
    .container{
    padding:0px !important; 
    max-width:100vw;
    }
    
    .tab-content{font-family: "Helvetica";}
    #podnaslov {font-weight:700;}
    
    
    
    
    #nav-tabContent{background-color:#e6e6e6;}
    #nav-kontakt{width:70vw; margin: 0px auto;}
    #nav-lista{width:70vw; margin: 0px auto; height:100%;
        }

button.dt-button:first-child {display: none;}

button.dt-button:nth-child(2){display: none;}


@media screen and(max-width: 300px)
{
    .modal-xl {max-width: 95vw !important;}
   .dtsp-verticalPanes {
    width: 55%;
    float: left;
    display: block;
    padding-left: 5px;
}


.dtsp-searchPanes{
    display:none;
}
    
}


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

.modal-xl {max-width: 95vw !important;}
    
    
    .glava {background-repeat:round;}
    
    .dtsp-searchPanes{
    display:none;}
    
    
    
   #nav-kontakt{width:100vw; margin: 0px auto;}
   #nav-lista {width:100vw; margin: 0px auto;}
   #nav-statistika {width:100vw; margin: 0px auto;}

    .head-tekst{position: relative;    font-size: 13px;}
    #naslov_gore{   font-size:13px;}
    #podnaslov{font-size:7px;}
    #naslov{font-size:3vw;}

    .footer{
        position: sticky;
        font-size: 7px;
        padding:3px;
        bottom:15px;
            }
    .footer2{
        position: sticky;
        font-size: 7px;
        padding:3px;
        bottom:0px;
            }

.head-tekst H2{   
    color: white;
    padding-top:0.3em;
    font-size: 1em;
    width: max-content;
    font-family: georgia;
    font-weight: 700;
    
}
    
    
.glava{
   position:relative;
   background: url("images/test.png");
   height:32px;
   width:100vw ;
   background-color:black;
   background-size:cover;
   background-repeat: round;
   
}
   .container{    height: 300px;}
   body {  height:300px; }
  
}





@media only screen and (max-width: 800px) 
{
    .modal-xl {max-width: 95vw !important;}
.head-tekst H2
    {   
        font-size: small;
   }
.head-tekst H3
    {   
        font-size: xx-small;
   }
 .container
    {
        height: 300px;
    }
   body 
   {
       height:300px;
   }
}

#loader {
    position: fixed;      /* Loader će biti fiksiran u sredini ekrana */
    left: 50%;            /* Pomera loader na sredinu ekrana po horizontalnoj osi */
    top: 50%;             /* Pomera loader na sredinu ekrana po vertikalnoj osi */
    transform: translate(-50%, -50%); /* Centriranje loadera */
    z-index: 1000;        /* Osigurava da je loader iznad drugih elemenata */
}

#loader img {
    width: 100px;         /* Veličina loader slike (opciono) */
    height: 100px;        /* Veličina loader slike (opciono) */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Zatamnjeno pozadinsko sloj */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Loader će biti iznad svega */
}

@media only screen and (max-width: 750px) {
    .modal-xl {max-width: 95vw !important;}
    
#nav-tab a {    font-size: small !important;}
.dtsp-verticalPanes{display: none !important;}
#nav-lista{width:70vw !important;}
#nav-tab a{ font-size:small;   }


}

@media only screen and (max-width: 1100px) {
    .modal-xl {max-width: 95vw !important;}

#nav-lista{width:100vw; margin: 0px auto; height:100%;

}}


#tbl_zrtva tr td:nth-child(2) {
     white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    
}


.badge{white-space:break-spaces; font-weight:100;}

	#navnav{ 
 	height: 100px;
 	background: linear-gradient( 90deg, rgba(106,142,1,1) 0%, rgba(135,180,1,1) 38%, rgba(106,142,1,1) 100%);
    font-family: 'helvetica' !important;
    text-transform:uppercase;

	align-items:center;
 	}
 	#nav-tab a {
 	    color: white;
    font-weight: 400;
   
    
 	} 
 	#navnav2{
 	        margin-left: auto;
 	}
 	
 	.nav-item nav-link active {background-color: none !important;}
 	.nav-link.active {background-color: #00800000 !important; color:yellow !important; border:none;}
 	
 	.open_data { background-color: #88B400; border-radius: 12px !important; margin-bottom: 5px; border:0; height:40px; padding:0px 30px !important; box-shadow: 4px 4px 4px 0px #00000040; }
 	.nav-tabs{border: none;}
     span.active {
      
	  color:#88b400 !important;
      
    }
    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {border-color: none; border:none;}

    * {
  font-family: 'Roboto', sans-serif;
}
 .dtsp-nameColumn{
    font-size: 14px;
 }
 .dtsp-pill{
    background-color: transparent  !important;
    border:none !important;
    color: #88b400 !important;
 }
 div.dtsp-topRow{
    border-radius: 12px 12px 0px 0px ;
 }
table.dataTable thead .sorting_desc{
    
    font-size: 14px;
 }
 table.dataTable thead .sorting{

    font-size: 14px !important;
    border:none;
 }

 

div.dtsp-searchPane input.dtsp-search::placeholder {
    color: white !important;
    opacity: 1; /* obavezno da ne bude providan */
    font-size: 16px;
    padding-left: 5px;
    
}



.dt-button span{font-size: 14px !important;}
.paginate_button.disabled{
    color:black;
}
div.dtsp-panesContainer div.dataTables_wrapper div.dataTables_scrollBody td.dtsp-nameColumn{
    border-bottom: 1px solid black;
}
div.dtsp-panesContainer div.dataTables_wrapper div.dataTables_scrollBody {padding: 0px 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; overflow-y: scroll !important}
.prvired{font-size: 20px;   font-family: 'Libre Bodoni', serif; font-weight: 400;}

#sl{
display:block; position: relative; left:50px; z-index:401; height:100%;

}
@media(max-width:500px){
     #sl img{
        position:relative !important;
        z-index: 0 !important;
     width: 25vw !important;
     height: 125px;
    }
    .overlay-text{
        line-height: 0.5 !important;
    }
    .prvired {
        font-size: 14px !important;
    }
    .drugired{
        font-size: 11px !important;
    }

    #navnav
    {
        height: 100px !important;

    }
        #navnav>div {
        left: 10px !important;
    }
 

}


.drugired{font-size:16px; font-family: 'Roboto', serif; font-weight: 300;} 


.modal-xl {max-width: 70vw !important;}
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* kontrast na slici */
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}

.naslov_tbl{
   
    margin-top: 30px;
        margin-bottom: 15px;
    font-size: large;
    text-align: center;
    color: orange;
    font-weight: 600;
}
@media (max-width: 500px) {
    .modal-xl {max-width: 95vw !important;}
  /* Unutrašnji kontejner koji sadrži sve SearchPanes */
  div.dtsp-panesContainer div.dtsp-scrollContainer {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* dve kolone */
    gap: 8px !important; /* razmak između */
  }

  /* Pojedinačni paneli (filtri) */
  div.dtsp-searchPane.dtsp-columns-3 {
    width: 40% !important;
    box-sizing: border-box !important;
  }

  div.dtsp-searchPanes{
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
  }
  div.dtsp-coliumns-3{
    max-width: 45% !important;
    min-width: 45% !important;
  }


}

.footer2{display: none;}