/* MOBILE VERSION CSS */

/*VARIABLES*/
:root {
    --mainred: #db002d;
    --lightbrown:#cfb5b7;
    --brown:#b9727b;
    --darkbrown:#74494e;
    --blue:#3c77f2;
    --lightyellow: #ffffcc;
    --lightgreen:#b3ffcc;
    --lightred:#ffcccc;
}

*{
    padding:0px;
    margin:0px;
}
HTML{
    width:100%; height: 100%
}
BODY {
    width:100%;
    height: 100%;
    margin: 0px;
    padding:0px;
    font-size:14px;
    overflow-x: hidden;
    overflow-y: scroll;
    color: #333;
    font-family: arial, sans-serif
}

a{color: inherit}

@font-face {font-family: icons; src: url(font-awesome/fonts/FontAwesome.otf);}


/*DISPLAY NONE*/
.glavni_meni,#brzi_pretrazivac,.sideCatNav,.userBar{display: none}
#coll_left{display: none}

/*HEADER*/

.oblast_zaglavlja{background: var(--mainred); padding: 10px;box-sizing: border-box; position:absolute; top:0; left:0; right:0;
height:70px}
.zaglavlje_content{display:flex; justify-content:space-between; align-items: center}
.logoHeader{width:150px}
.logoHeader img{display: block; width: 100%; filter: invert(1)}
.oblast_zaglavlja .appLogin{}
.oblast_zaglavlja .appLogin a{display: flex; text-decoration: none; position: relative; color: #fff; 
font-size:16px; flex-direction:column; text-align:center; padding: 0 10px; box-sizing: border-box}
.oblast_zaglavlja .appLogin a:before{content: "\f007"; font-family: icons; font-size:22px; padding-bottom: 5px}


.oblast_strane{height: 100%}
.oblast_sadrzaja{height: 100%; padding-top:70px; box-sizing:border-box}


/*HOME STRANA*/

.homeStrana{}
.homeMainMenu{}
.homeMainMenu .homeMenuItem{ list-style: none}
.homeMenuItem a{display: block; text-decoration: none; font-size:24px; padding: 20px;
    box-sizing:border-box; border-bottom:3px solid var(--darkbrown); text-transform:uppercase;
    position:relative; color:var(--darkbrown)}
.homeMainMenu li a:before{margin-right: 15px; font-size: 30px; color:var(--darkbrown);
    font-family:icons;}
.homeMainMenu .item1 a:before{content:"\f085"; }
.homeMainMenu .item2 a:before{content:"\f015"; }
.homeMainMenu .item3 a:before{content:"\f0ca"; }
.homeMainMenu .item4 a:before{content:"\f013"; }
.homeMainMenu .item5 a:before{content:"\f013"; }


/*PRIJAVA KVARA*/

.reportCNT .reportStatistic{display: none}
.reportCNT>div{padding: 10px; box-sizing: border-box; width: 100%; }
.reportCNT form{}
.reportCNT fieldset{border:1px solid var(--darkbrown); width: 100%; padding: 10px; box-sizing: border-box; background: var(--lightbrown)}
.reportCNT legend{ display: block; font-size: 18px; margin-bottom: 10px; background: rgba(255,255,255,.3); 
    border: 1px solid var(--darkbrown); padding:5px 10px; box-sizing:border-box}
.reportCNT form div{display: flex; flex-wrap: wrap; flex-direction: column; text-align: center}
.reportCNT form label{margin-bottom: 5px; }
.reportCNT form input,.reportCNT form select{margin-bottom:20px; padding: 5px; 
    box-sizing: border-box; border: 1px solid var(--brown); font-size:12px; border-radius:3px; width:100%; background:#fff}
.reportCNT form #fileToUpload{background: initial; border: none; padding:15px 10px 0; }
.reportCNT textarea{border: 1px solid var(--brown); min-height: 100px; font-size: 12px; padding: 5px;
box-sizing: border-box; border-radius: 3px}
.reportCNT .action_button{background: var(--brown); border: none; display: block; padding:10px 15px; 
box-sizing: border-box; font-size: 16px; color: #fff; margin: 30px auto 10px;
border-radius:3px;box-shadow: 2px 2px 1px var(--darkbrown) }


/*LOGIN STRANA*/

.app_login .oblast_sadrzaja{background: var(--lightbrown)}
.loginStrana{}
.loginStrana form{display: flex; flex-wrap: wrap; flex-direction: column; padding:20px 10px; box-sizing: border-box;
text-align: center;}
.loginStrana input{width: 80%; margin:0px auto 20px; padding:5px; box-sizing:border-box; font-size:14px}
.loginStrana label{margin-bottom: 10px; font-size: 16px}
.loginStrana #ulogujSeBtn{background: var(--brown); border: none; display: block; padding:10px 20px; 
box-sizing: border-box; font-size: 16px; color: #fff; margin: 0px auto 10px;
border-radius:3px;box-shadow: 2px 2px 1px var(--darkbrown)}

.loginStrana .userData{display: flex; flex-direction: column; text-align: center; padding: 20px 10px; box-sizing: border-box}
.userData input{border:none;border-bottom:1px solid var(--darkbrown); background: var(--brown); color: #fff; text-align: center;
font-size: 18px}
.userData .logoutDiv{margin:20px 0}
.userData .logoutDiv a{display: flex; text-decoration: none; position: relative; flex-direction: column;
font-size: 18px; color: var(--darkbrown)}
.logoutDiv a:before{content: "\f011"; font-family: icons;font-size:30px}

/*ZAHTEVI*/

.statusiZahteva{padding:10px; box-sizing:border-box;}
.statusiZahteva a{background:var(--brown); display:block; text-decoration:none; margin: 5px 0; color:#fff;
padding: 10px; box-sizing: border-box; font-size: 16px; position: relative}
.statusiZahteva>a:after{content:""; display: inline-block; width: 11px; height: 11px; border-right: 1px solid #fff;
border-bottom: 1px solid #fff; transform: rotate(45deg); position: absolute; right: 13px; top: 10px}
.statusiZahteva .active:after{transform: rotate(-135deg); top: 17px}

.listaZahteva{overflow-x: scroll; position: relative}
.tabelaZahteva{width: 100%; border-collapse: collapse; border: 1px solid var(--brown); _position: relative}
.th_zaposleni,.td_zaposleni,.th_operater,.td_operater,.th_tip,.td_tip{display: none}

.tabelaZahteva tr{border-bottom: 1px solid var(--brown)}
.tabelaZahteva th{padding: 10px 5px; box-sizing: border-box}
.tabelaZahteva td{padding: 10px 5px; box-sizing: border-box}

.visokPrioritet{background: var(--lightred)}
.nizakPrioritet{background: var(--lightyellow)}
.normalanPrioritet{background: var(--lightgreen)}

.tabelaZahteva th:nth-last-child(1),.tabelaZahteva td:nth-last-child(1){background: rgba(207, 181, 183,.7);
position: sticky; right: 0}
.tabelaZahteva th:nth-last-child(2),.tabelaZahteva td:nth-last-child(2){background: rgba(207, 181, 183,.7);
position:sticky; right:70px; }

.tabelaZahteva td a{border-radius: 5px;font-size:14px }
.tabelaZahteva .odobri{background: #5dd55d}
.tabelaZahteva .ponisti{background: #ff3333}

.tabelaZahteva .boxPrijavaSlika{position: absolute; width: 50%; top: 0; left: 25%;z-index:1; 
    background: #fff; border: 1px solid #333;display:none}
.tabelaZahteva .boxPrijavaSlika img{width: 100%; display: block}
.tabelaZahteva .prikaziSliku{background: initial; color: var(--darkbrown); display:inline-block; margin-left:5px;
    vertical-align:middle}
.tabelaZahteva .prikaziSliku:before{content: "\f03e"; font-family: icons; font-size: 22px}

.tabelaZahteva .td_komentar{position: relative}
.tabelaZahteva .komentarDugme{color: var(--blue); cursor: pointer; font-weight: bold; position: relative}
.tabelaZahteva .komentarDugme:before{content:"\f075"; font-family: icons; font-size: 16px; margin-right: 5px}
.komentarZahteva{background: rgba(255,255,255,.8); position: absolute; bottom: 75%; right:10%; padding: 10px 15px;
    box-sizing: border-box; border: 1px solid var(--blue); min-width:250px; _width: max-content; 
    display: flex; flex-wrap: nowrap;  display:none;}
.komentarZahteva .zatvoriKom{font-size: 10px; position: absolute; top: 2px; left: 2px; cursor: pointer; color: var(--blue)}
.komentarZahteva:after{content:""; display: inline-block; border-right: 10px solid var(--blue); border-bottom: 10px solid transparent;
    position: absolute; right:-1px; top:100%}
.komentarZahteva .komSpan{ display: flex; flex:1;  margin-right: 5px; padding: 5px; box-sizing: border-box;
    background: #fff; max-width: 200px; background: var(--blue); color:#fff}

.divZavrsi{background: var(--darkbrown); position: absolute; top: 100px; width: 60%; left: 20%; display: flex; flex-wrap: wrap;
    padding:30px 20px 20px; box-sizing:border-box; justify-content:center; box-shadow: 2px 2px 10px 5px #333}
.formaZavrsi{width: 100%}
.formaZavrsi label{ display: block; width: 100%; text-align: center; padding:20px 0 10px 0; font-size: 18px; color: #fff; font-weight: normal}
.formaZavrsi select{width: 100%; }
.formaZavrsi #rezervniDeo{width: 100%; box-sizing:border-box; padding:5px}
.formaZavrsi textarea{width: 100%; padding:10px; box-sizing:border-box; resize: vertical}
.formaZavrsi .zatvoriFormuZ{position: absolute; top: 0px; left:0px; font-size: 26px; color: #fff; cursor: pointer;
    display: block;padding: 10px 15px; box-sizing: border-box; }
.formaZavrsi .proslediFormuZ{ display:block; margin:20px auto 0; font-size:18px; text-decoration: none;
    padding: 5px 15px; box-sizing:border-box; border-radius: 5px; background: #5dd55d; color:#fff; box-shadow: 1px 1px #fff; border:none;
    cursor: pointer}
.formaZavrsi #kartonCb{display: block; margin: auto;}

/*INTERVENCIJE*/

.masine{display: flex; flex-wrap: wrap; padding: 20px; box-sizing: border-box; justify-content:space-between}
.masine li{list-style: none; width: 48%; margin-bottom:10px; border:1px solid var(--brown);
padding:10px; box-sizing:border-box}
.masine li a{text-decoration: none;display: block;}
.masine li .brojMasine{font-weight: bold; color: var(--darkbrown); padding-top:5px}