body{
animation-duration: 0ms !important;
opacity: 1 !important;

}

.text-justify{text-align:justify}
.audio-player-container {display:inline}
/* Ukloni zatamnjenje (overlay) */
.custom-modal-transparent .modal-backdrop {
  background: transparent !important;
}
.chevron-icon {
  transition: transform 0.3s ease;
}
.chevron-icon.rotated {
  transform: rotate(180deg);
}

.icon-rotates {
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}

.icon-rotates.rotate {
  -moz-transition: rotate(180deg);
  -webkit-transition: rotate(180deg);
  transition: rotate(180deg);
}


.dropdown.dropdown-toggle .icon-rotates {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
/* Ili potpuno ukloni overlay */
body.modal-open .modal-backdrop {
  opacity: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

/* Modal content – nema border, shadow, header, padding */
.custom-modal-transparent .modal-content {
  background: transparent;
  border: none;
  box-shadow: none;
  height: 100vh;
  overflow: hidden;
}

/* Modal body bez paddinga, fullscreen video */
.custom-modal-transparent .modal-body {
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-dialog-centered{height:100vh; margin:0 auto; width: 488px;background-color: transparent;}
.modal-dialog-centered>.modal-content{background:transparent; border:none; height:100vh;}
.modal-dialog-centered>.modal-content>.modal-body{height: 100vh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;}
.modal-video{object-fit: cover;background-color: transparent;height: 100vh;padding: 0; margin: 0;width: auto;}
/* Samo X vidljivo */
.custom-close-x {
  background: none;
  border: none;
  font-size: 32px;
  color: white;
  opacity: 1;
  z-index: 9999;
  position: absolute;
  top: 16px;
  right: 24px;
}

.play-btn {position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            background:rgba(0,0,0,0.6);
            border:none;
            border-radius:50%;
            width:80px; height:80px;
            display:flex; align-items:center; justify-content:center;
            z-index:10;
			opacity:0.5}
.play-btn:hover {opacity:1}
/* Video fullscreen s crnom pozadinom */
#modalVideo {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: black;
}
.audio-container {
visibility: hidden;
height: 0;
overflow: hidden;
transition: visibility 0.2s ease, height 0.2s ease;
}

.audio-container.visible {
visibility: visible;
height: auto;
margin-top: 10px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start {
    margin-right: 2px;
    margin-top: 2px;
}
.event-modal-header {
  background: #117ea7;
 background-color: #08c1b8;
    border-color: #08c1b8;
  border-bottom: 2px solid #0c4969;
  min-height: 66px;
  position: relative;
}

/* NASLOV MODALA */
.event-modal-title {
  font-family: 'Ethnocentric', Arial, sans-serif !important;
  text-transform: uppercase;
  color: #fff !important;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 1.42em;
  line-height: 1.22;
  margin: 0;
  padding-right: 50px;
}


.event-modal-close {
  color: #fff !important;
  font-size: 2.2em !important;
  font-weight: bold !important;
  opacity: 1 !important;
  position: absolute;
  right: 20px;
  top: 11px;
  z-index: 11;
  text-shadow: none;
}
.zatvori {position: absolute;
    top: 10px;
    right: 28px;
    color: #08c1b8;
    font-size: 50px;
	opacity:0.5}
.zatvori:hover {opacity:1;color: #ff0000; }	
	
.event-modal-close:hover,
.event-modal-close:focus {
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none;
  outline: none;
}

/* MODAL BODY */
#eventModalBody {
  background: #f7fafd;
  border-radius: 0 0 12px 12px;
  min-height: 120px;
}
.timeline-wrapper {
  width: 100%;
  margin:30px  0;
  background: #fff;
  border-radius: 18px;
  /*box-shadow: 0 6px 24px #0001;*/
  padding: 10px;
  text-align: center;
}

.timeline-title {
  font-size: 1.3em;
 color: #626768;;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: 'Ethnocentric', sans-serif;
}
.timeline-content {
  min-height: 100px;
  margin-bottom: 15px;
  transition: min-height 0.3s;
}
.timeline-item {
  display: none;
}
.timeline-item.active {
  display: block;
  animation: fadeIn 0.5s;
}
.timeline-date {
  font-weight: bold;
  color: #03afa6;
  font-size: 1.16em;
  margin-bottom: 7px;
  letter-spacing: 1px;
  font-family: 'Ethnocentric', sans-serif;
}
.timeline-desc {
  color: #444;
  font-size: 1.07em;
  margin-bottom: 8px;
  line-height: 1.6;
}
.timeline-bar-container {
  width: 100%;
  margin: 0 auto 22px auto;
  position: relative;
  height: 75px;
  user-select: none;
}
.timeline-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 47px;
  height: 5px;
  background: #dde5f3;
  border-radius: 4px;
  z-index: 1;
}
.timeline-dots {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  min-height: 52px;
}
.timeline-dot-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 32px;
  flex: 1 1 0;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.3s;
  position: relative;
}
.timeline-dot-label {
  font-size: 0.95em;
  color: #225;
  margin-bottom: 7px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 2px 5px #fff9;
  opacity: 0.66;
  transition: opacity 0.3s;
}
.timeline-dot-group.active .timeline-dot-label {
  opacity: 1;
}
.timeline-dot {
  width: 22px;
  height: 22px;
  background: #0096888c;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 0 rgba(0,123,255,0.5);
  transition: background 0.3s, box-shadow 0.35s, transform 0.23s;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity:0.7;
}
.timeline-dot:hover { background: #03afa6;opacity:1}


.timeline-dot.active {
  background: #03afa6;
  box-shadow: 0 0 0 7px rgba(0,123,255,0.17);
  transform: scale(1.18);
  z-index: 3;
  transition: background 0.18s, box-shadow 0.24s, transform 0.15s;
  animation: pop 0.27s;
}
.timeline-dot:focus {
  outline: 2px solid #007bff;
  outline-offset: 3px;
}
@keyframes pop {
  0% { transform: scale(1);}
  65% { transform: scale(1.26);}
  100% { transform: scale(1.18);}
}
.timeline-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 23px;
}
.timeline-controls button {
  padding: 7px 28px;
  font-size: 1.08em;
  border: none;
  color: #fff;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
  outline: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.timeline-controls button:disabled,
.timeline-controls button[aria-disabled="true"] {
  background: #bbb;
  cursor: default;
}
.timeline-controls .arrow {
  font-size: 1.18em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px);}
  to { opacity: 1; transform: none;}
}
@media (max-width: 900px) {text-align: left;
}
}
@media (max-width: 480px) {
  .timeline-dot-label { font-size: 0.75em; }
  .timeline-bar-container { height: 92px; }
}
@media (max-width: 600px) {
  .event-modal-header, #eventModalBody {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .modal-dialog {
    margin: 18px auto;
    width: 98%;
  }
  .modal-dialog-centered{width:100%;margin:0;background-color: transparent;}
}








    #sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 440px;
      max-width: 90vw;
      background: #181a1b;
      color: #f2f2f2;
      z-index: 9999;
      box-shadow: 2px 0 8px 0 rgba(0,0,0,0.12);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-top: 24px;
      transform: translateX(-100%);
      transition: transform 0.33s cubic-bezier(.4,2,.6,1);
      overflow-y: auto;
      opacity: 1;
       pointer-events: auto !important;
	   
    }
	.tooltip {
  z-index: 10001 !important;
}
    #sidebar.expanded {
      transform: translateX(0);
      pointer-events: auto !important;
    }
    .sidebar-toggle {
      position: fixed;
      left: 1%;
      bottom:20px;
      width: auto;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-color: rgb(153 140 140 / 74%);
      z-index: 10000;
      border-radius: 0 14px 14px 0;
      box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.09);
      transition: background 0.16s;
	  padding:10px;
	  color:#fff;
    }
	.sidebar-toggle>span{margin-right:10px;font-family: 'Ethnocentric', sans-serif;color: #fff;}
  .sidebar-toggle {
    background-color: rgb(153 140 140 / 74%);
    color: #fff;
    transition: background 0.16s;
}
.sidebar-toggle.active {
    background-color: #08c1b8;
    color: #FFF;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus {
    background-color: #08c1b8;
    color: #FFF;
}
    .sidebar-toggle .fa {

      transition: transform 0.35s;
      
    }
    #sidebar.expanded + .sidebar-toggle .fa,
    .sidebar-toggle.active .fa {
      transform: rotate(180deg);
    }
    .sidebar-menu-wrapper {
      width: 100%;
      padding-left: 22px;
	  margin-top: 25px
    }
	.fc-toolbar-title {
  text-transform: capitalize;
}
	
    #brand {
      font-size: 22px;
      font-weight: 600;
      margin: 0;
      color: #08c1b8;
      letter-spacing: 0.5px;
      white-space: nowrap;
      font-family: 'Ethnocentric', sans-serif;
      text-align: left;
    }
    #brand-opis {
      font-size: 15px;
      font-weight: 400;
      margin: 0;
      color: #FFF;
      opacity: 0.8;
      text-align: left;
    }
    .hr-short {
      width: 40px;
      border: 1px solid #FFCC00;
      margin: 8px 0 22px 0;
    }
    .menuitems {
      list-style: none;
      padding: 0;
      margin: 0 0 10px 0;
	 text-transform: uppercase;



    }
.menuitems,
.menuitems li {
  overflow: visible !important;
  position: static !important;
}
ul.menuitems, ul.menuitems li, ul.menuitems li a {
  overflow: visible !important;
  position: static !important;
  z-index: auto !important;
}
    .menuitems li a {
      display: flex;
      align-items: center;
      color: #f2f2f2;
      text-decoration: none;
      padding: 5px 0 5px 8px;
      border-radius: 0 18px 18px 0;
      font-size: 15px;
      transition: background 0.17s, color 0.17s;
      white-space: nowrap;
	  border: 1px solid #333;
    margin: 8px;
	width: 90%;
    }
    .menuitems li a .fa {
      margin-right: 11px;
      color: #FFf;
      font-size: 17px;
      min-width: 20px;
    }
    .menuitems li a:hover, .menuitems li a:focus {
      background: #08c1b8;
      color: #fff;
    }
 .mt-80 {margin-top:85px} 
 .mt-80>.tab-pane {min-height:100vh}

	
	
/*Kalendar*/
#event-kalendar {margin-top:2%!important;
 vertical-align:top!important;}
 #event-list {margin-top:0%!important;
 vertical-align:top!important;
    display: block;
    padding: 0;
    float: none;}
 .fc-daygrid-event:hover{cursor:pointer!important}
.fc-scrollgrid-sync-inner{text-transform:uppercase!important;}
.fc-scrollgrid-sync-inner>a{text-transform:uppercase!important;color:#000!important}
.fc-toolbar-title {text-transform:uppercase!important; font-family: 'Ethnocentric', sans-serif;!important;font-size:22px!important;color:#08c1b8!important;}

#kalendar>.split-box>.container-fluid>.row>.row-lg-height>.col-lg-6>.split-box-content{padding:4%}
.fc-event-title{
  font-size:14px!important;
}

#event-list > div:first-child > div:first-child {
  font-family: 'Ethnocentric', sans-serif!important ;
    font-size: 22px!important;color:#626768!important;
}
#event-list > div:first-child > div:nth-child(2) {
  color: #08c1b8!important;
  font-weight:bold!important;
 
}
.fc-daygrid-day--noevent a {
  pointer-events: none;
  cursor: default !important;
  color: #aaa !important;
  text-decoration: none !important;
}
.fc-daygrid-day--noevent {
  background: #f7f7f7;
  color: #b1b1b1;
  cursor: default !important;
}
.fc-daygrid-day--has-event {
  cursor: pointer !important;
}
.fc-event-protekli {
  background: #c9302c !important;   /* crvena */
  border-color: #c9302c !important;
  opacity: 0.5 !important;
  color: #fff !important;
}
.fc-event-nadolazeci {
  background: #1cb15e !important;   /* zelena */
  border-color: #27ae60 !important;
  color: #fff !important;
  opacity: 1 !important;
}
.fc-day-today {
    background-color:#626768!important;
	 color: #08c1b8 !important;
}

.fc-toolbar-chunk>.fc-button-primary{ background-color: #000!important;color:#08c1b8!important}



.filters {
   padding: 12px;
   background: #fff;
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 9999;
   border-radius: 8px;
   box-shadow: 0 3px 10px rgba(0,0,0,0.13);
}




@media (max-width: 1497px) {
 .title-index {padding-top:3% }
 .sidebar-toggle {bottom:70px}
}


@media (max-width: 1200px) {

 .sidebar-toggle {bottom:20px}
}





   .tooltip.top .tooltip-arrow {
  border-top-color: #fff !important;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #fff !important;
}

.menuitems li a.active {
    box-shadow: inset 4px 0 0 0 #08c1b8;
    background: rgba(8, 193, 184, 0.07); /* lagana pozadina za bolji efekt */
    color: #08c1b8;
    transition: all 0.2s;
}
.tooltip.left .tooltip-arrow {
  border-left-color: #fff !important;
}
.tooltip.right .tooltip-arrow {
  border-right-color: #fff !important;
}
.sidebar-toggle:not(.active):not(:hover):not(:focus) {
    background-color: rgb(153 140 140 / 74%) !important;
    color: #fff !important;
}
.sticky-tabs {
position:relative;
 background-color:#000!important;
  z-index: 1040; /* iznad Bootstrap navbar-a */
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
  width:100%;
 font-family: 'Ethnocentric', sans-serif;
}
.sticky-tabs:hover {opacity:1;}
.sticky-tabs>li>a:hover {opacity:1; background-color:#08c1b8!important;color:#fff!important}
.sticky-tabs>.active { background-color:#08c1b8!important;color:#fff!important;background: #08c1b8;}
.sticky-tabs > li > a { background-color:transparent!important;text-align:center; text-transform:uppercase}
.sticky-tabs > li {
  float: left;
  /* width: 25%; -- koristiš inline style u HTML-u da Bootstrap 3 ne pokvari layout */
}
@media (max-width: 700px) {
  .sticky-tabs > li {
    width: 50% !important;
  }
   .sidebar-menu-wrapper {
      width: 100%;
      padding-left: 15px;
	  margin-top: 65px
    }
	
	.fc-event-title{
  font-size:12px!important;
}
}

    @media (hover: none) and (pointer: coarse), (max-width:700px) {
      #sidebar { width: 254px; }
      #sidebar.expanded { width: 95%; }
      #brand { font-size: 18px; }
      .menuitems li a { font-size: 14px; 
 
    padding: 5px 0 5px 8px;
    border-radius: 0 18px 18px 0;
  
    margin: 5px;
    width: 90%;
}
	#header #logo img {
    width: 80%;
    height: auto;
} 
    }
.audio-container { display: none; }
.audio-container.visible { display: block; }

 @media (hover: none) and (pointer: coarse), (max-width:1000px) {
.mt-80 {
    margin-top: 62px;
}
 }
 
 @media (hover: none) and (pointer: coarse), (max-width:1367px) {
.menuitems li a {
   
    padding: 3px 0 3px 8px;
    margin: 6px;
   
}
/*.modal-video{object-fit: contain;background-color: #000;}
 }


 @media (hover: none) and (pointer: coarse), (max-width:700px) {


.modal-video{object-fit: cover;background-color: transparent;background-color: transparent;height: 100vh;padding: 0; margin: 0;width:520px;}
 .modal-dialog-centered {
    height: 100vh;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    top: 0;
}
}*/
 .modal {
    background-color: #fff!important;
}