@charset "utf-8";
/* CSS Document */
html{height:100%;}
html, body{font-family:'Noto Sans', sans-serif; font-weight:400; color:#2e3c54;}
a{text-decoration:none; color:inherit; outline:none; cursor:pointer;}
h1{font-size:32px; line-height:38px; margin:15px 0 30px 0; padding:0; font-weight:700;}
h2{font-size:26px; line-height:32px; margin:0 0 20px 0; padding:0; font-weight:400;}
p{margin:0 0 10px 0; overflow:hidden;}
p:last-child{margin:0;}
.transition2s{transition:all 0.2s linear 0s; -webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; -ms-transition:all 0.2s linear 0s;}
.transition3s{transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s; -ms-transition:all 0.3s linear 0s;}
.toggleMenu{display:none; background:#333; color:#fff; font-size:14px; padding:10px; position:absolute; top:10px; left:10px; cursor:pointer; z-index:1;}
.black{color:#000;}
.green{color:#3cc76a;}
.red{color:#c00;}

.tooltip{position:absolute;z-index:1070;display:block;font-size:12px;font-weight:400;line-height:1.4;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=100);opacity:1}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:5px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#2e3c54;border-radius:4px; font-size:12px !important; line-height:normal !important;}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}

/*------------- login -------------- */	
#loginbg {background:url(../img/login-bg.jpg) 0 0 / cover no-repeat;}
#loginMsg {width:480px; height:45px; padding:10px; margin:40px auto;}
.error, .zerror {display:none; background:#ffd2d3; border:1px solid #df8f90; -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; color:#871414; padding:15px; text-align:center;}
.success, .zsuccess {display:none; background:#d4ffcd; border:1px solid #9adf8f; -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; color:#258815; padding:15px; text-align:center;}
#loginForm{width:500px; margin:50px auto; background:rgba(0,0,0,0.2); padding:30px; display:table;}
.dlabel{color:#444; font-size:15px;}
.loginIcon{width:10%; height:36px; line-height:36px; text-align:center; background:#eee; color:#666;}
.tekst{width:90%; float:left; border:none; padding:0 15px; height:36px; background:#fff;}
#loginSubmit{float:right; background:#db5031; color:#fff; padding:5px 20px; border:none; font-size:14px;}

.headerLogo{margin:0px 40px; padding:30px 0; border-bottom:1px dotted #d6d6d6; display:block;}
.headerLogo img{width:100%; display:block;}

#whole_page_container{-moz-box-orient:vertical; bottom:0; display:flex; /*flex-direction:column;*/ left:0; overflow-x:auto; overflow-y:hidden; position:fixed; right:0; top:0; z-index:0; background:url(../img/bg.jpg) 0 0 repeat;}

#navigation{-moz-box-orient:vertical; background:#364b6d; box-sizing:content-box; display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; position:relative; width:300px; z-index:0; height:100%; left:0;}
#navigation.hide{margin-left:-300px;}
#mainContent{-moz-box-flex:1; -moz-box-orient:vertical; display:flex; flex:1 1 0; flex-direction:column; min-width:1px; z-index:0; overflow-y:scroll;}

#left_pane{-moz-box-flex:1; -moz-box-orient:vertical; display:flex; flex:1 1 auto; flex-direction:column; min-height:1px;}
.navigationClose{position:absolute; top:10px; right:10px; font-size:13px; line-height:11px; display:block; font-weight:700; color:#fff; cursor:pointer;}
.navigationLinks{list-style:none; color:#fff; margin:0; padding:0; font-size:14px; line-height:20px;}
.navigationLinks>li{padding:12px 20px; margin-bottom:1px; position:relative;}
.navigationLinks>li.dark{background:#1b2432;}
.navigationLinks>li>i:hover{background:#1b2432;}
.navigationLinks>li>a>i{margin:0 10px 0 0;}
.navigationLinks>li>i{position:absolute; right:20px; top:10px; cursor:pointer; width:20px; height:20px; text-align:center; line-height:20px; display:block; border-radius:50%;}
.navigationSublinks{list-style:none; margin:10px 0; padding:0 0 0 25px; display:none;}
.navigationSublinks a{font-size:13px; line-height:21px; display:block; color:#d6d6d6;}
.wfLogo{bottom:20px; left:0; position:absolute; right:0; text-align:center;}
.wfLogo>img{display:inline-block;}

.topBar{flex-shrink:0; height:90px; min-width:920px; position:relative; z-index:10; border-bottom:1px solid #d6d6d6; background:#fff;}
.navigationOpen{position:absolute; top:0; left:0; border:1px solid #ccc; padding:12px; background:#fff; display:block; color:#bbb; font-size:16px;}
.navigationOpen.hide{top:-45px;}
.pretraga{position:absolute; top:20px; right:300px; border:1px solid #d6d6d6; border-radius:20px; padding:5px 15px; background:#fff;}
.pretraga i{margin:0 10px 0 0; color:#bbb; font-size:16px;}
.pretraga input{border:none; font-size:13px; line-height:23px; color:#999; width:300px;}
.logOut{position:absolute; top:15px; right:15px; background:#ff7266; color:#fff; font-size:11px; line-height:11px; font-weight:700; padding:8px 15px; border-radius:4px;}
.logOut i{margin:0 5px 0 0;}
.user{font-size:13px; line-height:13px; font-weight:700; color:#fff; padding:20px; margin:0;}
.user i{margin:0 5px 0 0; border:1px solid #fff; border-radius:50%; height:30px; width:30px; text-align:center; line-height:27px;}
.circle{background:rgb(255, 165, 0); color:#fff; width:20px; height:20px; border-radius:50%; display:inline-block; text-align:center; line-height:20px; font-size:10px; margin:0 0 0 10px;}

.content{/*padding:40px;*/ display:table; margin:0 auto; width:100%;}
.formGroup{margin:0 0 20px 0; overflow:hidden; position:relative;}
.formGroup span.dimension{background:#454545; color:#fff; font-size:11px; margin:7px; padding:5px; position:absolute; right:0; top:0;}
.formGroup>label{background:#ddd; color:#2e3c54; display:inline-block; float:left; font-size:14px; font-weight:700; padding:11px; width:30%; height:40px;}
.formGroup.small>label{width:50%;}
.formGroup.small>.formInput, .formGroup.small>.formSelect, .formGroup.small>.formArea{width:50%;}
.formInput{border:none; border-bottom:1px solid #ddd; font-size:16px; line-height:17px; padding:10px 15px; width:70%; height:40px; background:#fff;}
.formInput[disabled], .formInput[readonly]{cursor:not-allowed; opacity:0.5;}
.formSelect{border:none; border-bottom:1px solid #ddd; font-size:16px; line-height:17px; padding:10px 15px; width:70%; height:40px;}
.formArea{border:none; border-bottom:1px solid #ddd; font-size:16px; line-height:17px; padding:10px 15px; width:70%; height:75px;}
.radioHolder{float:left; width:15%; margin:0 0 0 10%;}
input.radio:empty{margin-left:-999px;}
input.radio:empty ~ label{position:relative; float:left; line-height:2.5em; text-indent:3.25em; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
input.radio:empty ~ label:before{position:absolute; display:block; top:0; bottom:0; left:0; content:''; width:2.5em; background:#D1D3D4;}
input.radio:hover:not(:checked) ~ label:before{content:'\2714'; text-indent:.9em; color:#C2C2C2;}
input.radio:hover:not(:checked) ~ label{color:#888;}
input.radio:checked ~ label:before{content:'\2714'; text-indent:.9em; color:#c9ffd7; background-color:#1ed068;}
input.radio:checked ~ label{color:#777;}
.formData button{background:#0091ea; color:#fff; border:none; padding:10px 25px; font-size:14px; margin:50px 0 0 0; float:right;}
.formData button:first-of-type{margin-left: 20px;}
.formData button>i{margin:0 0 0 15px;}
.addDoc{color:#fe7c01; padding:10px; background:#fff; margin:0 10px 0 0; cursor:pointer;}
.addDoc>span{font-family:'Roboto', sans-serif; margin:0 0 0 10px; font-size:13px;}
.itemViewIcon {background:#ddd; padding:12px; position:absolute; right:0; top:0;}
.picDeleteIcon, .itemDeleteIcon, .danDeleteIcon, .videoDeleteIcon {background:#ddd; padding:12px; position:absolute; right:41px; top:0;}
.downloadZahtev{background:#3cc76a; color:#fff; padding:10px 15px; font-size:12px; line-height:12px; margin-bottom:10px; display:block; float:left;}
.downloadZahtev i{margin:0 5px 0 0;}
.formGroup.small .brojProtokola{width: 35%; margin-right: 25px;}
.formGroup.small .brojProtokolaIco{vertical-align: middle;}
.hiddenInput{display: none;}
.nalogLokacija{border: 1px solid #000; width: 100%; background-color: #fff; margin-top: 50px; margin-bottom: 20px; padding: 10px;}
.nalogLokacija h3{margin: 0 0 10px 0; padding: 0; font-weight: 400;}
.noviProtokoli{width: 100%; background-color: #fff; margin-bottom: 60px; padding: 10px; }
.noviProtokoliDodaj{width: 100%; background-color: #fff; margin-bottom: 60px; padding: 10px; overflow-y: scroll; height: 150px;}
.trakaPopuni{margin-left: 50px;}
.dodajBrojProtokola{position: relative;}
#brojProtokola{position: absolute; top: 0; margin: 0;}
.protokolSearch{margin-left: 25px; font-size: 25px; cursor: pointer;}
.searchBox{width: 100%; margin: 20px 0 40px 0; display: none;}
.searchBox.open{display: block;}
.searchBox > .formData{position: relative;}
.searchBox > .formData > button{margin-top: 15px; margin-left: 0; float: none;}
.searchCloseLink{margin-left: 25px;}
.searchClose{font-size: 25px;}
.iconHolder{display: inline-block;}

.table{border-collapse:collapse !important;}
.table{width:100%; max-width:100%; margin-bottom:40px; float:right; font-size:inherit;}
.table > thead{background-color:#ddd;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td{padding:5px 10px; font-size:13px; line-height:1.5; vertical-align:middle; border-top:1px solid #ddd;}
.table > thead > tr > th{border-top:none;}
.table > thead > tr > th{vertical-align:bottom; border-bottom:2px solid #ddd;}
/*.table-striped > tbody > tr:nth-of-type(even){background-color:#f9f9f9;}
.table-striped > tbody > tr:nth-of-type(odd){background-color:#eee;}*/
.table-striped > tbody > tr.bela{background-color:#f9f9f9;}
.table-striped > tbody > tr.siva{background-color:#eee;}
.table .naslovTabele{text-align:left; font-size:13px;}
.tableEditButton{background:#6BB9F0; color:#fff; padding:10px; float:right; margin:0 0 0 5px;}
.tableDeleteButton{background:#ec644b; color:#fff; padding:10px; float:right; margin:0 0 0 5px;}
.tableEditButtonAdmin{color:#6BB9F0; margin:0 15px;}
.tableDeleteButtonAdmin{color:#ec644b; margin:0 15px;}
tr.view{cursor: pointer;}
tr.fold{display: none;}
tr.fold.open{display: table-row;}
tr.fold.open h2{text-align: center;}
.print-table{max-width: 1030px; margin: 0 auto; float: none; empty-cells: show;}
.emptyRow{height: 50px;}
.nalogdetalji{display: inline-block; width: 24%;}
/*.nalogdetalji:last-of-type{width: 10%;}*/
.nalogdetalji p{margin: 0;}
.sub-table{border: 1px solid #eee;}
.sub-table th{background-color: #eee;}
.printSubTableRow td{border-right: 2px solid #ddd;}
.detalji{background-color: #fff;}
.stavke-bez-izmena::after{content: ''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;}
.protokolH1{display: inline-block;}
.dodajProtokol{background:#0091ea; color:#fff; border:none; padding:10px 25px; font-size:14px; margin:15px 0 0 15px; float:right;}
.buttonRed{background: #f73e3e;}
.dodajProtokol>i{margin:0 0 0 15px;}
.popuniStavkuRazdelnik{margin-bottom: 35px;}
.addRow{font-size: 28px; cursor: pointer;}
.dodajPodstavku{background: #0091ea; color: #fff; border: none; padding: 10px 25px; font-size: 14px; margin: 50px 0 0 20px; float: right;}
.zavrsiStavku{padding:10px 40px !important}
.detaljiStavke{margin: 0 0 5px 0 !important; font-size: 14px;}
.printProtokol{float: right; margin-left: 30px; background-color: #0091ea; color: #fff; padding: 11px; margin-top: 16px;}
  

/* Obaveštenja */
.obavestenjeTitle{font-weight:600; font-size:16px; line-height:22px; margin:0 0 5px 0;}
.obavestenjeTitle img{float: left; margin:4px 15px 0 0; width: 28px;}
.obavestenjeDate{font-style:italic; font-size:13px; line-height:13px; margin:0 0 15px 0;}
.obavestenjeText{margin:0 0 15px 0;}
.obavestenjeZaposleni{font-style:italic; font-size:13px; color:#6bb9f0;}

/* Događaj */
.izbrisiDogadjaj{background:#ec644b; color:#fff; float:left; margin:50px 0; padding:10px 25px; font-size:14px;}
.izbrisiDogadjaj>i{margin:0 0 0 15px;}
.kalendarIzbrisiDokumentaciju {float: right;}

/* Kalendar */
.printHolder{float:right; display:block; padding:7px 15px; margin:-66px 0 10px 0; font-size:12px; line-height:20px; background:#2e3c54; color:#fff;}
.printHolder i{margin:0 10px 0 0;}
.docItemHolder{padding:5px 10px; background:#eee; border-bottom:1px solid #ddd; margin:0 0 5px 0;}
.docItemHolder i{color:#2e3c54; margin:0 10px 0 0;}

/* Zahtevi */
.pretragaZahteva input{font-size:13px; line-height:23px; color:#999; width:200px; border:1px solid #d6d6d6; border-radius:5px; padding:5px 15px;}
.pretragaZahteva select{font-size:13px; line-height:23px; color:#999; border:1px solid #d6d6d6; border-radius:5px; padding:5px 15px;}
.pretragaZahteva button{font-size:13px; line-height:21px; color:#fff; background:#0091ea; border:none; border-radius:5px; padding:5px 15px;}

/*----------------- Paging ---------------*/
.paging{font-size:12px; color:#333; margin:0 0 20px 0; background:#fff; padding:10px; display:block; border-top:1px solid #e2e2e2;}
.page-first, .page-previous, .page-last, .page-next{display:block; float:left; height:24px; width:24px; text-align:center; margin-right:5px; border:1px solid #ddd; line-height:20px; font-size:18px; color:#666; background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */
}
.page-info{float:left; line-height:24px; padding:0 15px; height:24px; font-size:14px;}
.page-select{padding:2px; font-size:12px;width:45px; border:1px solid #cccccc;}
.clear{clear: both; font-size: 0; height: 0; line-height: 0; margin: 0; padding: 0;}

.fc-day-grid-container{overflow:visible !important;}

.infoWidget {color:#fff; font-size:18px; display: block; clear: both; padding:5px 0; margin:0 0 30px 0; background:rgba(255,255,255,0.1)}
.infoWidget .left{width:60%; float:left; margin:0; text-align:center;}
.infoWidget .right{width:40%; float:right; border-left:1px dotted #fff; text-align:center;}
.infoWidget .wather-icon {padding: 0; margin: 0;}
.infoWidget .wather-temp {}
#sat {margin:25px 0; font-size:20px; line-height:25px; display:inline-block;}
.previewSlika{border-radius:27px; -moz-border-radius:27px; -webkit-border-radius:27px; float:left; margin:5px 10px 0 0; width:54px;}
.previewSlikaH{border-radius:18px; -moz-border-radius:18px; -webkit-border-radius:18px; float:left; margin:5px 10px 0 0; width:36px;}
.previewImeH{line-height:40px;}

/*-------------------------- Modal popup ------------------------*/
.modalHolder{display:none; position:fixed; top:150px; width: auto; max-width: 60%; color:#000; background-color:#fff; z-index:9999; -webkit-box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.5); box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.5);}
.modalBack{display: none;position:fixed; height:100%; width:100%; top:0; left:0; z-index:9998; background:rgba(255,255,255,0.8);}
.modalContent{padding:50px; font-size:16px; line-height:20px;}
.modalContent .description{font-size:20px; line-height:24px; margin:0 0 20px 0; font-weight:600;}
#modalform{margin:0 0 30px 0;}
#modalform textarea{width:100%; border:1px solid #ddd; resize:none; padding:10px; font-size:14px; line-height:20px; color:#666;}
.buttonsHolder{display:block; width:100%; text-align:center;}
.modalContent>.title{font-weight: 700;}
.buttonsHolder>button{display:inline-block; margin:0 0 0 15px; border:none; padding:8px 15px; color:#fff; font-size:12px;}
.buttonsHolder>button:first-child{margin:0;}
.buttonsHolder>button.yes{background:#2ecc71;}
.buttonsHolder>button.no{background:#e74c3c;}
.buttonsHolder>button.ok{background:#3498db;}

/*-------------------------- Dashboard ------------------------*/
.dashboardHolder{display: flex; justify-content: space-between; align-items: flex-start; margin-top: 50px;}
.dashboardHolder > div{width: 30%; min-height: 370px; background-color: #fff; box-shadow: 3px 5px 5px #999; padding: 20px; position: relative;}
.dashboardHolder > div > i{width: 100%; text-align: center; color: #0091ea; font-size: 30px; margin-bottom: 20px;}
.dashboardHolder > div > h2{text-transform: uppercase; text-align: center;}
.dashboardHolder > div > hr{margin: 0;}
.dashboardHolder > div > a{position: absolute; bottom: 20px; right: 15px;}

/*-------------------------- Protokol - slika ------------------------*/

.card {
    border: initial;
    background: #fff;
    border-radius: calc(.15rem - 1px);
    box-shadow: 0 1px 15px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.04);
	margin-bottom: 1rem !important;
    width: 40%;
}

.card .card-body {
    padding: 1.75rem 1.75rem 1.75rem 1.75rem;
	-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}

.form-control {
    border-radius: .1rem;
    outline: initial !important;
    box-shadow: none !important;
    font-size: .8rem;
    padding: .7rem .75rem .65rem;
    line-height: 1.5;
    border: 1px solid #d7d7d7;
    background: #fff;
    color: #212121;
	display: block;
width: 100%;
	-webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}
.form-control:focus {
    border-color: rgba(241,128,36,.6);
}
.form-control:focus {
    background: #fff;
    color: #212121;
}

.form-img input {display:none;}
.form-img label {cursor: pointer;}
.form-img-preview>.img-thumbnail {height: 120px; width: 120px;}
.labelFileButton{width:100%; height:170px; border:1px solid #eee; text-align:center; display:block; font-size: 13px; line-height: 22px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; position:relative; margin:0 0 40px 0; color: #ccc;}
.labelFileButtonProductImg{width:400px; height:400px; border:1px solid #eee; text-align:center; display:block; font-size: 13px; line-height: 22px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; position:relative; margin:0 0 40px 0; color: #ccc;}
.labelFileButton .labelText, .labelFileButtonProductImg .labelText{position:absolute; bottom:0; left:0; right:0; padding:20px; z-index:1; color:#333; background: rgba(255,255,255,0.5);
background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.5)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );}
.labelFileButton .icon-plus{position: absolute; top: 30%; left: 50%; font-size: 40px; color: #eee; z-index: 2;transform: translateX(-50%) translateY(-50%);}
.labelFileButton i{margin:0 5px 0 0;}
.featuredImageDelete{float:left;}

.btn-danger {color:#fff; background-color:#dc3545; border-color:#dc3545; border-radius: 50px; outline: initial !important; box-shadow: none !important; font-size: .8rem; padding: .75rem 1.3rem .6rem;position: relative; z-index: 5;}
.btn-danger:hover {color:#fff; background-color:#c82333; border-color:#bd2130}
.btn-danger.focus,.btn-danger:focus {-webkit-box-shadow:0 0 0 .2rem rgba(220,53,69,.5); box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}
.btn-danger.disabled,.btn-danger:disabled { color:#fff; background-color:#dc3545; border-color:#dc3545}
.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle {color:#fff; background-color:#bd2130; border-color:#b21f2d}
.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus {-webkit-box-shadow:0 0 0 .2rem rgba(220,53,69,.5); box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}

.btn-info {color:#fff; background-color:#17a2b8; border-color:#17a2b8; border-radius: 50px; outline: initial !important; box-shadow: none !important; font-size: .8rem; padding: .75rem 1.3rem .6rem;}

/*-------------------------- Modal popup ------------------------*/
.wf-modal-holder{display:none; position:fixed; top:150px; width: auto; max-width: 60%; color:#000; background-color:#fff; z-index:9999; -webkit-box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.5); box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.5);}
.wf-modal-back{display: none;position:fixed; height:100%; width:100%; top:0; left:0; z-index:9998; background:rgba(255,255,255,0.8);}
.wf-modal-content{padding:40px;}
.buttonsHolder{display:block; width:100%; text-align:right;}
.wf-modal-content>.title{font-weight: 700;}
.buttonsHolder>button{display:inline-block; margin:0 0 0 15px; border:none; padding:8px 20px; color:#fff;}
.buttonsHolder>button:first-child{margin:0;}
.buttonsHolder>button.yes{background:#2ecc71;}
.buttonsHolder>button.no{background:#e74c3c;}
.buttonsHolder>button.ok{background:#3498db;}

.redBell{color:red}

.protokolUNalozimaBoxStyling{display: none; background-color: #fff; position: absolute; padding: 5px 10px; right: 0;}
.protokolUNalozimaBoxStyling.open{display: block; width: 900px;}
.protokolUNalozimaBoxStyling.open a{display: block; margin:5px 0}

/*-------------------------- Protokol - Viber ------------------------*/
.protokolToolsCell{white-space:nowrap; text-align:right; min-width:180px;}
.protokolToolsCell .tableEditButton,
.protokolToolsCell .tableDeleteButton,
.protokolToolsCell .tableViberButton{float:none; display:inline-block; vertical-align:middle; margin:0 0 0 5px; box-sizing:border-box;}
.tableViberButton{background:#7360f2; color:#fff; padding:10px;}
.tableViberButton:hover{background:#5d49e6; color:#fff;}
.protokolViberModalOpen{overflow:hidden;}
.protokolViberModalBack{display:none; position:fixed; inset:0; z-index:10020; background:rgba(18,25,38,0.72);}
.protokolViberModalBack.open{display:block;}
.protokolViberModal{display:none; position:fixed; z-index:10021; top:50%; left:50%; width:620px; max-width:calc(100% - 40px); max-height:calc(100vh - 40px); transform:translate(-50%, -50%); background:#fff; color:#2e3c54; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.35); overflow:hidden;}
.protokolViberModal.open{display:flex; flex-direction:column;}
.protokolViberModalHeader{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid #e4e8ef; background:#f7f8fb;}
.protokolViberModalHeader h2{margin:0; font-size:22px; line-height:28px; font-weight:700;}
.protokolViberModalClose{border:0; background:transparent; color:#657187; font-size:30px; line-height:30px; padding:0; cursor:pointer;}
.protokolViberModalBody{padding:22px 24px; overflow-y:auto;}
.protokolViberField{margin:0 0 20px 0;}
.protokolViberField:last-child{margin-bottom:0;}
.protokolViberField label{display:block; margin:0 0 8px 0; font-size:14px; font-weight:700;}
.protokolViberSelect,
.protokolViberPoruka{display:block; width:100%; box-sizing:border-box; border:1px solid #cfd6e0; border-radius:5px; background:#fff; color:#2e3c54; font-family:'Noto Sans', sans-serif; font-size:14px;}
.protokolViberSelect{height:44px; padding:8px 12px;}
.protokolViberPoruka{min-height:220px; padding:12px; line-height:1.55; resize:vertical;}
.protokolViberPoruka[readonly]{background:#f8f9fb;}
.protokolViberTelefon{min-height:20px; margin-top:7px; color:#657187; font-size:13px;}
.protokolViberStatus{display:none; margin:0 0 18px 0; padding:11px 13px; border-radius:5px; font-size:13px; line-height:19px;}
.protokolViberStatus:not(:empty){display:block;}
.protokolViberStatus.loading{background:#eef4ff; color:#2458a6; border:1px solid #c8daf8;}
.protokolViberStatus.success{background:#e7f8ed; color:#1f7a3e; border:1px solid #b8e2c7;}
.protokolViberStatus.error{background:#fff0f0; color:#a82c2c; border:1px solid #efc1c1;}
.protokolViberStatus.warning{background:#fff8e5; color:#8a6416; border:1px solid #ead49c;}
.protokolViberModalFooter{display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid #e4e8ef; background:#f7f8fb;}
.protokolViberModalFooter button{border:0; border-radius:5px; padding:11px 18px; font-size:14px; cursor:pointer;}
.protokolViberCancel{background:#e3e7ed; color:#344258;}
.protokolViberSend{background:#7360f2; color:#fff;}
.protokolViberSend:hover{background:#5d49e6;}
.protokolViberModalFooter button:disabled{cursor:not-allowed; opacity:0.55;}

/* ======================================================================
   ZOOHIGIJENA ADMIN UI/UX — stabilizovana i utegnuta verzija
   Vizuelna dorada je ograničena na admin okvir, meni i njegove komponente,
   bez globalnog menjanja dimenzija svih elemenata aplikacije.
   ====================================================================== */
:root{
	--zh-sidebar-width:286px;
	--zh-app-bg:#f4f7fb;
	--zh-card:#ffffff;
	--zh-sidebar:#0e1b2d;
	--zh-sidebar-soft:#162943;
	--zh-primary:#078fdb;
	--zh-primary-dark:#0678b8;
	--zh-text:#26344c;
	--zh-muted:#7b879b;
	--zh-border:#dfe6ef;
	--zh-danger:#ef6259;
	--zh-success:#2fbf71;
	--zh-radius:10px;
	--zh-shadow:0 10px 30px rgba(25,43,70,.08);
}

html,body{
	width:100%;
	height:100%;
	margin:0;
	background:var(--zh-app-bg);
	color:var(--zh-text);
}

#whole_page_container{
	display:flex;
	width:100%;
	height:100%;
	min-width:0;
	overflow:hidden;
	background:var(--zh-app-bg);
}

/* Levi meni */
#navigation{
	flex:0 0 var(--zh-sidebar-width);
	width:var(--zh-sidebar-width);
	min-width:var(--zh-sidebar-width);
	box-sizing:border-box;
	background:linear-gradient(180deg,var(--zh-sidebar) 0%,#12253d 58%,#0b1728 100%);
	box-shadow:10px 0 30px rgba(17,31,52,.14);
	transition:margin-left .24s ease,transform .24s ease;
	z-index:120;
}
#navigation.hide{margin-left:calc(var(--zh-sidebar-width) * -1);}
#left_pane{
	overflow-y:auto;
	overflow-x:hidden;
	padding-bottom:96px;
	scrollbar-width:thin;
	scrollbar-color:rgba(255,255,255,.18) transparent;
}
#left_pane::-webkit-scrollbar{width:5px;}
#left_pane::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:10px;}

.headerLogo{
	box-sizing:border-box;
	margin:0;
	padding:24px 26px 20px;
	border-bottom:1px solid rgba(255,255,255,.09);
	background:rgba(255,255,255,.025);
}
.headerLogo img{
	width:auto;
	max-width:180px;
	max-height:74px;
	margin:0 auto;
	object-fit:contain;
}

.navigationClose{
	top:13px;
	right:13px;
	width:28px;
	height:28px;
	box-sizing:border-box;
	border:1px solid rgba(255,255,255,.16);
	border-radius:50%;
	font-size:0;
	line-height:26px;
	text-align:center;
	background:rgba(255,255,255,.06);
	transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.navigationClose:before{content:'\00d7'; font-size:19px; font-weight:400; color:#fff;}
.navigationClose:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); transform:rotate(90deg);}

.user{
	display:flex;
	align-items:center;
	gap:11px;
	box-sizing:border-box;
	margin:14px 14px 8px;
	padding:13px 14px;
	border:1px solid rgba(255,255,255,.08);
	border-radius:10px;
	background:rgba(255,255,255,.055);
	font-size:13px;
	line-height:18px;
}
.user i{
	flex:0 0 34px;
	width:34px;
	height:34px;
	box-sizing:border-box;
	margin:0;
	border:0;
	background:rgba(7,143,219,.22);
	color:#7bcfff;
	line-height:34px;
}
.user .previewImeH{line-height:18px;}
.userRole,.user-role{display:block; margin-top:2px; color:rgba(255,255,255,.56); font-size:10px; line-height:13px; font-weight:400; text-transform:uppercase; letter-spacing:.55px;}

.navigationLinks{
	box-sizing:border-box;
	width:100%;
	padding:8px 12px 24px;
	font-size:13px;
	line-height:18px;
}
.navigationLinks .navigationLinks{padding:0;}
.navigationLinks>li{
	box-sizing:border-box;
	margin:3px 0;
	padding:0;
	border:1px solid transparent;
	border-radius:8px;
	background:transparent;
	transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.navigationLinks>li:hover{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.06);}
.navigationLinks>li.dark,
.navigationLinks>li.active,
.navigationLinks>li.current,
.navigationLinks>li.selected{
	background:linear-gradient(90deg,rgba(7,143,219,.25),rgba(7,143,219,.09));
	border-color:rgba(86,193,248,.18);
}
.navigationLinks>li>a{
	display:flex;
	align-items:center;
	min-height:44px;
	box-sizing:border-box;
	padding:11px 43px 11px 13px;
	border-radius:8px;
	color:#edf6ff;
	font-weight:600;
}
.navigationLinks>li>a>i{
	flex:0 0 23px;
	width:23px;
	margin:0 9px 0 0;
	color:#8ccff3;
	font-size:15px;
	text-align:center;
}
.navigationLinks>li>i{
	top:9px;
	right:10px;
	width:26px;
	height:26px;
	line-height:26px;
	color:rgba(255,255,255,.66);
	transition:background .18s ease,transform .18s ease,color .18s ease;
}
.navigationLinks>li>i:hover{background:rgba(255,255,255,.1); color:#fff;}
.navigationLinks>li.dark>i{transform:rotate(180deg);}
.navigationSublinks{
	box-sizing:border-box;
	margin:0;
	padding:2px 10px 10px 44px;
}
.navigationSublinks li{margin:2px 0;}
.navigationSublinks a{
	display:block;
	box-sizing:border-box;
	padding:7px 8px;
	border-radius:6px;
	color:rgba(236,246,255,.68);
	font-size:12px;
	line-height:17px;
	transition:background .18s ease,color .18s ease,transform .18s ease;
}
.navigationSublinks a:hover,
.navigationSublinks a.active,
.navigationSublinks a.current{
	background:rgba(255,255,255,.07);
	color:#fff;
	transform:translateX(2px);
}
.navigationSublinks a i{margin-right:7px; color:#61bdf0;}

.wfLogo{bottom:15px; padding:12px 20px 5px; opacity:.58;}
.wfLogo:hover{opacity:.92;}
.wfLogo>img{max-width:105px; max-height:30px;}

/* Glavni sadržaj */
#mainContent{
	flex:1 1 auto;
	width:0;
	min-width:0;
	overflow-x:hidden;
	overflow-y:auto;
	background:var(--zh-app-bg);
}
#mainContent .topBar{
	position:sticky;
	top:0;
	flex:0 0 auto;
	height:68px;
	min-width:0;
	box-sizing:border-box;
	border:0;
	border-bottom:1px solid var(--zh-border);
	background:rgba(255,255,255,.96);
	box-shadow:0 4px 16px rgba(25,43,70,.045);
	backdrop-filter:blur(8px);
	z-index:100;
}
.topBarTitle,.topBar .pageTitle,.topBar .moduleTitle{
	position:absolute;
	left:72px;
	top:19px;
	margin:0;
	color:var(--zh-text);
	font-size:18px;
	line-height:28px;
	font-weight:700;
}
.navigationOpen{
	top:13px;
	left:18px;
	width:40px;
	height:40px;
	box-sizing:border-box;
	padding:0;
	border:1px solid var(--zh-border);
	border-radius:9px;
	background:#fff;
	color:#607089;
	font-size:16px;
	line-height:38px;
	text-align:center;
	box-shadow:0 3px 10px rgba(29,50,79,.05);
}
.navigationOpen:hover{border-color:#b8dff5; color:var(--zh-primary); background:#f7fcff;}
.navigationOpen.hide{top:-55px;}
.logOut{
	top:17px;
	right:20px;
	box-sizing:border-box;
	padding:9px 14px;
	border-radius:8px;
	background:#fff3f2;
	color:#c64c45;
	font-size:11px;
	line-height:15px;
	box-shadow:inset 0 0 0 1px #ffd4d1;
	transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.logOut:hover{background:var(--zh-danger); color:#fff; box-shadow:none;}

#mainContent>.container{
	width:auto;
	max-width:none;
	box-sizing:border-box;
	margin:0;
	padding:28px 30px 44px;
}
#mainContent .content{
	display:block;
	width:100%;
	min-width:0;
	margin:0;
}
#mainContent h1{color:var(--zh-text); font-size:29px; line-height:36px; margin:6px 0 26px; letter-spacing:-.35px;}
#mainContent h2{color:var(--zh-text);}

/* Forme — ograničeno samo na glavni admin sadržaj */
#mainContent .formData{max-width:100%;}
#mainContent .formGroup{
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 0 0 1px var(--zh-border);
	background:#fff;
}
#mainContent .formGroup>label{
	box-sizing:border-box;
	border:0;
	background:#f1f5fa;
	color:#4f6078;
	font-size:12px;
	letter-spacing:.15px;
}
#mainContent .formInput,
#mainContent .formSelect,
#mainContent .formArea{
	box-sizing:border-box;
	border:0;
	border-left:1px solid var(--zh-border);
	background:#fff;
	color:var(--zh-text);
	outline:none;
	transition:box-shadow .18s ease,background .18s ease;
}
#mainContent .formInput:focus,
#mainContent .formSelect:focus,
#mainContent .formArea:focus{background:#fbfdff; box-shadow:inset 0 -2px 0 var(--zh-primary);}
#mainContent .formData button,
#mainContent .dodajProtokol,
#mainContent .dodajPodstavku{
	box-sizing:border-box;
	border-radius:8px;
	background:linear-gradient(180deg,#14a0eb 0%,var(--zh-primary) 100%);
	box-shadow:0 5px 14px rgba(7,143,219,.18);
	transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
#mainContent .formData button:hover,
#mainContent .dodajProtokol:hover,
#mainContent .dodajPodstavku:hover{
	background:linear-gradient(180deg,#0e96df 0%,var(--zh-primary-dark) 100%);
	box-shadow:0 7px 18px rgba(7,143,219,.24);
	transform:translateY(-1px);
}
#mainContent .buttonRed{background:linear-gradient(180deg,#ff6f67 0%,#e9534b 100%);}
#mainContent .printProtokol{
	box-sizing:border-box;
	border-radius:8px;
	background:#fff;
	color:var(--zh-primary);
	box-shadow:inset 0 0 0 1px #cfe9f8,0 4px 12px rgba(25,43,70,.05);
	transition:background .18s ease,color .18s ease,transform .18s ease;
}
#mainContent .printProtokol:hover{background:var(--zh-primary); color:#fff; transform:translateY(-1px);}
#mainContent .protokolSearch,
#mainContent .searchClose{color:#607089; transition:color .18s ease;}
#mainContent .protokolSearch:hover,
#mainContent .searchClose:hover{color:var(--zh-primary);}
#mainContent .searchBox{
	box-sizing:border-box;
	padding:22px;
	border:1px solid var(--zh-border);
	border-radius:12px;
	background:#fff;
	box-shadow:var(--zh-shadow);
}

/* Standardne tabele ostaju stabilne; protokol ima sopstveni prikaz ispod */
#mainContent .table:not(.protokolOverviewTable){
	float:none;
	width:100%;
	max-width:100%;
	margin-bottom:32px;
	background:#fff;
	box-shadow:0 8px 24px rgba(25,43,70,.055);
}
#mainContent .table:not(.protokolOverviewTable)>thead{background:#eef3f8;}
#mainContent .table:not(.protokolOverviewTable)>thead>tr>th{
	padding:10px 12px;
	border-bottom:1px solid #dce4ed;
	color:#43536a;
	font-size:11px;
	font-weight:700;
	letter-spacing:.25px;
}
#mainContent .table:not(.protokolOverviewTable)>tbody>tr>td{padding:9px 12px; border-top:1px solid #edf1f5; color:#3d4c62;}
#mainContent .table:not(.protokolOverviewTable)>tbody>tr:hover{background:#f8fbfe;}

#mainContent .tableEditButton,
#mainContent .tableDeleteButton,
#mainContent .tableViberButton{
	box-sizing:border-box;
	border-radius:7px;
	box-shadow:0 3px 9px rgba(25,43,70,.09);
	transition:transform .16s ease,filter .16s ease;
}
#mainContent .tableEditButton:hover,
#mainContent .tableDeleteButton:hover,
#mainContent .tableViberButton:hover{transform:translateY(-1px); filter:brightness(.96); color:#fff;}
#mainContent .tableEditButton{background:#42a9e5;}
#mainContent .tableDeleteButton{background:#ee6258;}
#mainContent .tableViberButton{background:#7360f2;}

#mainContent .paging{
	box-sizing:border-box;
	border:1px solid var(--zh-border);
	border-radius:9px;
	background:#fff;
	box-shadow:0 5px 16px rgba(25,43,70,.045);
}
#mainContent .page-first,
#mainContent .page-previous,
#mainContent .page-last,
#mainContent .page-next{
	box-sizing:border-box;
	border-color:var(--zh-border);
	border-radius:6px;
	background:#fff;
	filter:none;
}
#mainContent .page-first:hover,
#mainContent .page-previous:hover,
#mainContent .page-last:hover,
#mainContent .page-next:hover{border-color:#b8ddf3; color:var(--zh-primary); background:#f3faff;}
#mainContent .page-select{border-color:var(--zh-border); border-radius:6px; background:#fff;}

#mainContent .card,
#mainContent .dashboardHolder>div{
	box-sizing:border-box;
	border:1px solid var(--zh-border);
	border-radius:var(--zh-radius);
	box-shadow:var(--zh-shadow);
	background:var(--zh-card);
}
#mainContent .dashboardHolder{gap:24px;}
#mainContent .dashboardHolder>div{width:calc(33.333% - 16px); min-height:350px;}
#mainContent .dashboardHolder>div>i{color:var(--zh-primary);}

.modalHolder,.wf-modal-holder{
	box-sizing:border-box;
	border:1px solid var(--zh-border);
	border-radius:12px;
	box-shadow:0 24px 70px rgba(20,36,59,.22);
	overflow:hidden;
}
.modalBack,.wf-modal-back{background:rgba(12,24,42,.55); backdrop-filter:blur(2px);}
.modalContent,.wf-modal-content{box-sizing:border-box; padding:34px;}
.buttonsHolder>button{border-radius:7px;}

#loginbg{background:linear-gradient(rgba(11,25,43,.72),rgba(11,25,43,.84)),url(../img/login-bg.jpg) center/cover no-repeat fixed;}
#loginForm{
	box-sizing:border-box;
	border:1px solid rgba(255,255,255,.2);
	border-radius:14px;
	background:rgba(255,255,255,.94);
	box-shadow:0 26px 70px rgba(8,20,36,.28);
}
#loginSubmit{border-radius:7px; background:var(--zh-primary); padding:9px 22px;}

.navigationOverlay,.navigationBackdrop,.sidebarOverlay{
	display:none;
	position:fixed;
	inset:0;
	z-index:110;
	background:rgba(9,20,35,.52);
	backdrop-filter:blur(2px);
}
.navigationOverlay.open,.navigationBackdrop.open,.sidebarOverlay.open{display:block;}

/*-------------------------- Protokoli - profesionalni pregled ------------------------*/
#mainContent .protokolTablePanel{
	position:relative;
	width:100%;
	margin:4px 0 34px;
	border:1px solid #dfe5ed;
	border-radius:12px;
	background:#fff;
	box-shadow:0 10px 30px rgba(36,52,77,.07);
	box-sizing:border-box;
}
#mainContent .protokolTableHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	min-height:70px;
	padding:14px 18px;
	border-bottom:1px solid #e8edf3;
	background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%);
	border-radius:12px 12px 0 0;
	box-sizing:border-box;
}
#mainContent .protokolTableSummary{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
	color:#6a768a;
	font-size:11px;
}
#mainContent .protokolTableEyebrow{
	padding-right:12px;
	border-right:1px solid #dce3eb;
	color:#34445d;
	font-size:11px;
	line-height:15px;
	font-weight:800;
	letter-spacing:.55px;
	text-transform:uppercase;
}
#mainContent .protokolTableCount{
	display:inline-flex;
	align-items:baseline;
	gap:4px;
	white-space:nowrap;
}
#mainContent .protokolTableCount strong{
	color:#1f2f47;
	font-size:20px;
	line-height:24px;
}
#mainContent .protokolTableRange{white-space:nowrap;}
#mainContent .protokolActiveFilter{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:5px 8px;
	border:1px solid #cfe4f3;
	border-radius:14px;
	background:#edf8ff;
	color:#2476a8;
	font-weight:700;
	white-space:nowrap;
}
#mainContent .protokolTableLegend{
	display:flex;
	align-items:center;
	gap:14px;
	color:#69768a;
	font-size:10px;
	font-weight:700;
	white-space:nowrap;
}
#mainContent .protokolTableLegend>span{display:inline-flex; align-items:center; gap:6px;}
#mainContent .protokolLegendDot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#9ca7b7;}
#mainContent .protokolLegendDot.urgent{background:#ef5d55; box-shadow:0 0 0 3px rgba(239,93,85,.12);}
#mainContent .protokolLegendDot.processed{background:#37a866; box-shadow:0 0 0 3px rgba(55,168,102,.12);}
#mainContent .protokolTableViewport{
	width:100%;
	padding:0 12px 12px;
	box-sizing:border-box;
}
#mainContent .protokolOverviewTable{
	width:100%;
	max-width:100%;
	float:none;
	table-layout:fixed;
	border-collapse:separate !important;
	border-spacing:0 7px;
	margin:0;
	background:transparent;
	box-shadow:none;
}
#mainContent .protokolOverviewTable>thead{background:transparent;}
#mainContent .protokolOverviewTable>thead>tr>th{
	box-sizing:border-box;
	padding:12px 10px 8px;
	border:0;
	background:transparent;
	color:#6d798b;
	font-size:10px;
	line-height:14px;
	font-weight:800;
	letter-spacing:.45px;
	text-align:left;
	text-transform:uppercase;
	vertical-align:middle;
	word-break:normal;
	overflow-wrap:anywhere;
}
#mainContent .protokolOverviewTable>thead>tr>th:last-child{text-align:center;}
#mainContent .protokolOverviewTable>tbody>tr{
	background:#fff;
	box-shadow:0 2px 10px rgba(39,55,79,.065);
	transition:box-shadow .18s ease,transform .18s ease;
}
#mainContent .protokolOverviewTable>tbody>tr:hover{
	background:#fff;
	box-shadow:0 8px 22px rgba(39,55,79,.12);
	transform:translateY(-1px);
}
#mainContent .protokolOverviewTable>tbody>tr>td{
	box-sizing:border-box;
	padding:14px 10px;
	border-top:1px solid #e8edf3;
	border-bottom:1px solid #e8edf3;
	border-left:0;
	border-right:0;
	background:#fff;
	color:#49576c;
	font-size:11px;
	line-height:16px;
	vertical-align:top;
	white-space:normal;
	word-break:normal;
	overflow-wrap:anywhere;
}
#mainContent .protokolOverviewTable>tbody>tr>td:first-child{
	border-left:4px solid transparent;
	border-radius:8px 0 0 8px;
}
#mainContent .protokolOverviewTable>tbody>tr.is-urgent>td:first-child{border-left-color:#ef5d55;}
#mainContent .protokolOverviewTable>tbody>tr>td:last-child{
	border-right:1px solid #e8edf3;
	border-radius:0 8px 8px 0;
}
#mainContent .protokolOverviewTable .protokolColMeta{width:9%;}
#mainContent .protokolOverviewTable .protokolColPerson{width:14%;}
#mainContent .protokolOverviewTable .protokolColReport{width:20%;}
#mainContent .protokolOverviewTable .protokolColLocation{width:10%;}
#mainContent .protokolOverviewTable .protokolColComment{width:17%;}
#mainContent .protokolOverviewTable .protokolColOperations{width:14%;}
#mainContent .protokolOverviewTable .protokolColStatus{width:8%;}
#mainContent .protokolOverviewTable .protokolColTools{width:8%;}
#mainContent .protokolMetaTop{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px; margin:0 0 9px;}
#mainContent .protokolNumber{color:#21324b; font-size:15px; line-height:18px; font-weight:800; letter-spacing:-.2px; white-space:nowrap; overflow-wrap:normal;}
#mainContent .protokolUrgentBadge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:3px 6px;
	border:1px solid #e1e6ed;
	border-radius:12px;
	background:#f2f5f8;
	color:#6c788a;
	font-size:8px;
	line-height:11px;
	font-weight:800;
	letter-spacing:.35px;
	text-transform:uppercase;
	white-space:nowrap;
	overflow-wrap:normal;
}
#mainContent .protokolUrgentBadge.urgent{border-color:#ffd1cd; background:#fff0ee; color:#ca4137;}
#mainContent .protokolDateGroup{display:flex; flex-direction:column; gap:2px;}
#mainContent .protokolDateLine{display:block; color:#748095; font-size:10px; line-height:15px; white-space:nowrap;}
#mainContent .protokolDateLine i{width:13px; color:#9aa5b4; text-align:center;}
#mainContent .protokolPrimaryValue{
	display:block;
	margin:0 0 7px;
	color:#263750;
	font-size:12px;
	line-height:17px;
	font-weight:700;
}
#mainContent .protokolPhoneLink{
	display:inline-flex;
	align-items:center;
	gap:5px;
	max-width:100%;
	color:#397aa7;
	font-size:10px;
	line-height:15px;
	font-weight:700;
	text-decoration:none;
}
#mainContent .protokolPhoneLink:hover{color:#245f89; text-decoration:underline;}
#mainContent .protokolAddressLine{
	display:flex;
	align-items:flex-start;
	gap:6px;
	color:#657287;
	font-size:10px;
	line-height:15px;
}
#mainContent .protokolAddressLine i{flex:0 0 auto; margin-top:2px; color:#e06b5f;}
#mainContent .protokolDataBlock{display:block; margin:0 0 9px;}
#mainContent .protokolDataBlock:last-child{margin-bottom:0;}
#mainContent .protokolDataBlock strong{display:block; color:#31425a; font-size:11px; line-height:16px;}
#mainContent .protokolInfoLabel{
	display:block;
	margin:0 0 2px;
	color:#8a95a6;
	font-size:8px;
	line-height:11px;
	font-weight:800;
	letter-spacing:.35px;
	text-transform:uppercase;
}
#mainContent .protokolCommentCell{color:#526077;}
#mainContent .protokolCommentWrap{min-width:0;}
#mainContent .protokolCommentText{line-height:17px; overflow-wrap:anywhere;}
#mainContent .protokolCommentWrap.has-overflow:not(.is-expanded) .protokolCommentText{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:4;
	max-height:68px;
	overflow:hidden;
}
#mainContent .protokolCommentToggle{
	display:inline-flex;
	align-items:center;
	gap:5px;
	float:none;
	width:auto;
	height:auto;
	margin:7px 0 0;
	padding:0;
	border:0;
	background:transparent;
	box-shadow:none;
	color:#2f7caf;
	font:inherit;
	font-size:9px;
	line-height:14px;
	font-weight:800;
	cursor:pointer;
}
#mainContent .protokolCommentToggle:hover{background:transparent; color:#225f89; text-decoration:underline;}
#mainContent .protokolCommentToggle:focus{outline:2px solid rgba(47,124,175,.25); outline-offset:2px;}
#mainContent .protokolCommentToggle i{margin:0;}
#mainContent .protokolOperationalLine{
	display:flex;
	align-items:flex-start;
	gap:7px;
	margin:0 0 7px;
}
#mainContent .protokolOperationalLine>i{
	flex:0 0 22px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	border-radius:6px;
	background:#eef4f9;
	color:#5680a0;
	font-size:10px;
}
#mainContent .protokolOperationalLine>span{min-width:0;}
#mainContent .protokolOperationalLine small{display:block; color:#8a95a6; font-size:8px; line-height:10px; text-transform:uppercase;}
#mainContent .protokolOperationalLine strong{display:block; color:#35465e; font-size:10px; line-height:14px; font-weight:700;}
#mainContent .protokolDispatcherEdit{
	display:block;
	padding-top:4px;
	border-top:1px dashed #e2e7ed;
	color:#8994a5;
	font-size:8px;
	line-height:12px;
}
#mainContent .protokolDispatcherEdit i{margin-right:3px;}
#mainContent .protokolStatusCell{text-align:left;}
#mainContent .protokolStatusWrap{position:relative; display:inline-block; max-width:100%;}
#mainContent .protokolStatusBadge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	max-width:100%;
	padding:6px 8px;
	border:1px solid #d9e4f1;
	border-radius:16px;
	background:#eef4fb;
	color:#47709a;
	font-size:9px;
	line-height:13px;
	font-weight:800;
	white-space:nowrap;
	box-sizing:border-box;
}
#mainContent .protokolStatusBadge>i:first-child{font-size:7px;}
#mainContent .protokolStatusBadge.new{border-color:#f0dfad; background:#fff8e7; color:#8f6a13;}
#mainContent .protokolStatusBadge.processed{border-color:#c7ead4; background:#eaf8ef; color:#247443; text-decoration:none;}
#mainContent .protokolStatusBadge.processed:hover{border-color:#addfc0; background:#ddf3e5; color:#1d6438;}
#mainContent .protokolStatusBadge.processed .statusArrow{font-size:10px; transition:transform .18s ease;}
#mainContent .protokolStatusBadge.processed.is-open .statusArrow{transform:rotate(180deg);}
#mainContent .protokolOverviewTable .protokolToolsCell{
	min-width:0;
	width:auto;
	padding:12px 7px;
	text-align:center;
	white-space:normal;
}
#mainContent .protokolToolsGrid{
	display:grid;
	grid-template-columns:repeat(2,32px);
	justify-content:center;
	gap:6px;
}
#mainContent .protokolOverviewTable .protokolActionButton{
	display:flex;
	align-items:center;
	justify-content:center;
	float:none;
	width:32px;
	height:32px;
	margin:0;
	padding:0;
	border:1px solid transparent;
	border-radius:7px;
	box-sizing:border-box;
	box-shadow:0 2px 6px rgba(30,47,72,.11);
	transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
#mainContent .protokolOverviewTable .protokolActionButton:hover{
	transform:translateY(-2px);
	box-shadow:0 5px 11px rgba(30,47,72,.17);
	filter:none;
}
#mainContent .protokolOverviewTable .protokolActionButton:focus{outline:2px solid rgba(47,124,175,.28); outline-offset:2px;}
#mainContent .protokolOverviewTable .protokolImageButton{background:#607d96;}
#mainContent .protokolOverviewTable .protokolUNalozimaBoxStyling.open{
	display:block;
	position:absolute;
	top:calc(100% + 8px);
	right:0;
	width:420px;
	max-width:calc(100vw - 70px);
	padding:10px;
	z-index:40;
	border:1px solid #dce3eb;
	border-radius:9px;
	background:#fff;
	box-shadow:0 14px 35px rgba(36,52,77,.2);
	box-sizing:border-box;
}
#mainContent .protokolOverviewTable .protokolOrderLink{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:3px 10px;
	margin:0 0 7px;
	padding:10px;
	border:1px solid #e4eaf1;
	border-radius:7px;
	background:#f9fbfd;
	color:#617087;
	font-size:9px;
	line-height:13px;
	text-decoration:none;
}
#mainContent .protokolOverviewTable .protokolOrderLink:last-child{margin-bottom:0;}
#mainContent .protokolOverviewTable .protokolOrderLink:hover{border-color:#bad7ea; background:#f1f9fe;}
#mainContent .protokolOverviewTable .protokolOrderLink strong{grid-column:1/-1; color:#2b435f; font-size:11px;}
#mainContent .protokolOrdersLoading,
#mainContent .protokolOrdersEmpty{display:block; padding:10px; color:#738095; font-size:10px; text-align:center;}
#mainContent .protokolEmptyValue{color:#9aa4b4; font-style:italic;}
#mainContent .protokolEmptyState{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:230px;
	margin:4px 0 34px;
	padding:35px;
	border:1px dashed #ccd6e2;
	border-radius:12px;
	background:#fbfcfe;
	color:#7b8799;
	text-align:center;
	box-sizing:border-box;
}
#mainContent .protokolEmptyState>i{margin-bottom:14px; color:#9aabc0; font-size:38px;}
#mainContent .protokolEmptyState>strong{margin-bottom:5px; color:#34465f; font-size:16px;}
#mainContent .protokolEmptyState>span{font-size:11px;}

/* ======================================================================
   PROTOKOLI — uvećan font za bolju čitljivost
   Scope je samo modul Protokoli preko #mainContent.protokolPage.
   ====================================================================== */
#mainContent.protokolPage{
    font-size:16px;
    line-height:1.55;
}
#mainContent.protokolPage h1{font-size:32px; line-height:40px;}
#mainContent.protokolPage h2{font-size:28px; line-height:35px;}

/* Filteri, unos i izmena protokola */
#mainContent.protokolPage .formGroup>label{font-size:15px; line-height:18px;}
#mainContent.protokolPage .formInput,
#mainContent.protokolPage .formSelect,
#mainContent.protokolPage .formArea{font-size:18px; line-height:21px;}
#mainContent.protokolPage .formData button,
#mainContent.protokolPage .dodajProtokol,
#mainContent.protokolPage .dodajPodstavku{font-size:16px;}

/* Zaglavlje pregleda protokola */
#mainContent.protokolPage .protokolTableSummary{font-size:13px;}
#mainContent.protokolPage .protokolTableEyebrow{font-size:13px; line-height:17px;}
#mainContent.protokolPage .protokolTableCount strong{font-size:23px; line-height:28px;}
#mainContent.protokolPage .protokolTableLegend{font-size:12px;}

/* Glavna tabela protokola */
#mainContent.protokolPage .protokolOverviewTable>thead>tr>th{
    font-size:12px;
    line-height:16px;
}
#mainContent.protokolPage .protokolOverviewTable>tbody>tr>td{
    font-size:14px;
    line-height:20px;
}
#mainContent.protokolPage .protokolNumber{font-size:18px; line-height:22px;}
#mainContent.protokolPage .protokolUrgentBadge{font-size:10px; line-height:13px;}
#mainContent.protokolPage .protokolDateLine{font-size:12px; line-height:17px;}
#mainContent.protokolPage .protokolPrimaryValue{font-size:15px; line-height:20px;}
#mainContent.protokolPage .protokolPhoneLink,
#mainContent.protokolPage .protokolAddressLine{font-size:13px; line-height:18px;}
#mainContent.protokolPage .protokolDataBlock strong{font-size:14px; line-height:19px;}
#mainContent.protokolPage .protokolDataBlock>span:not(.protokolInfoLabel){font-size:13px; line-height:18px;}
#mainContent.protokolPage .protokolInfoLabel{font-size:10px; line-height:13px;}
#mainContent.protokolPage .protokolCommentText{font-size:14px; line-height:20px;}
#mainContent.protokolPage .protokolCommentWrap.has-overflow:not(.is-expanded) .protokolCommentText{max-height:80px;}
#mainContent.protokolPage .protokolCommentToggle{font-size:12px; line-height:17px;}
#mainContent.protokolPage .protokolOperationalLine small{font-size:10px; line-height:13px;}
#mainContent.protokolPage .protokolOperationalLine strong{font-size:13px; line-height:18px;}
#mainContent.protokolPage .protokolDispatcherEdit{font-size:11px; line-height:15px;}
#mainContent.protokolPage .protokolStatusBadge{font-size:12px; line-height:16px;}

/* Povezani nalozi */
#mainContent.protokolPage .protokolOverviewTable .protokolOrderLink{font-size:12px; line-height:16px;}
#mainContent.protokolPage .protokolOverviewTable .protokolOrderLink strong{font-size:14px;}
#mainContent.protokolPage .protokolOrdersLoading,
#mainContent.protokolPage .protokolOrdersEmpty{font-size:13px;}
#mainContent.protokolPage .protokolEmptyState>span{font-size:13px;}

/* Moji protokoli i podsetnici koriste staru tabelu */
#mainContent.protokolPage .table:not(.protokolOverviewTable){font-size:15px;}
#mainContent.protokolPage .table:not(.protokolOverviewTable)>thead>tr>th{font-size:13px; line-height:18px;}
#mainContent.protokolPage .table:not(.protokolOverviewTable)>tbody>tr>td{font-size:14px; line-height:21px;}

/* Paginacija */
#mainContent.protokolPage .paging{font-size:14px;}
#mainContent.protokolPage .page-info{font-size:16px;}
#mainContent.protokolPage .page-select{font-size:14px;}

/* Viber popup je van #mainContent pa se stilizuje zasebno */
.protokolViberModalHeader h2{font-size:24px; line-height:30px;}
.protokolViberField label{font-size:16px;}
.protokolViberSelect,
.protokolViberPoruka{font-size:16px; line-height:23px;}
.protokolViberTelefon,
.protokolViberStatus{font-size:15px; line-height:21px;}
.protokolViberModalFooter button{font-size:16px;}