/* VARIABLES */
:root {
    --main: #0097E0;
    --aux: #0d6daa;
    --maindark:#0a4a88;
    --lightblue: #54c3f1;
    --extralightblue: #e3f0fb;
    --white:#ffffff;
    --orange:#EE740B;
    --lightgrey:#F5F5F5;
    --darkgrey:#515151;
    --black:#000000;
    --gradient_a: linear-gradient(to top,#3493,#8ae0);

    --fn:1rem;
    --fm:16px;
    --fl:18px;
    --fxl:22px;
    --fxxl:28px;
    --fs:13px;
    --fxs:10px;
}
@font-face {font-family: icons; src: url('font-awesome/fonts/FontAwesome.otf');}
@font-face {font-family: daikin; src: url('fonts/sourcesans3.ttf');}
@font-face {font-family: daikinblack; src: url('fonts/sourcesans3_black.ttf');}

.icons{font-family: icons}
.hidden{display: none!important;}

*{padding:0px;margin:0px;}
HTML{width:100%;overflow-y: scroll;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    user-select: none;
    height: 100%}
body{width:100%; margin-top: 0px; position: relative;
    font-family: daikin, sans-serif; height: 100%;
    color:#444;
  padding-top: 30px;
  padding-top: constant(safe-area-inset-top);
  padding-top: max(30px, env(safe-area-inset-top));

}

a{text-decoration: none; display: block;}
.buttons, #prihvati_sliku,.barcode_sn{
    background: var(--aux);
    color:#eee;
    padding:16px 20px;
    text-align:center;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:2px;
    cursor:pointer;
    margin-bottom:10px;
    border:none;

}
.barcode_sn.icons{padding: 8px; font-size: 40px;}

.content{
    padding:0px 0px 80px 0px;
    box-sizing: border-box;
    background: var(--main);
    min-height:100vh}

.light_bg .content{background: #fff;}
.content.loginpage{
    background-image: url('images/login.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.content.index{
    background: #fff;
    background: linear-gradient(var(--lightblue),var(--extralightblue))
}
.content.detalji_uredjaja, .content.detalji_sistema, .content.prikaz_radnih_naloga{
    background: linear-gradient(var(--main) 70%,var(--extralightblue));
    _background: var(--main)
}
.content.detalji_uredjaja h2,
.content.detalji_sistema h2{
    color:#eee;
    text-transform: uppercase;
    font-weight: normal;
}
.content.index h2{
    color:var(--main);
    font-weight:normal;
    font-size:var(--fxl);
    text-align: left;
    padding: 6px 10px;
    border-left:10px solid var(--main);
    display: flex;
    align-items: center;
}
.content.index #ime_servisera{
    border-left:10px solid var(--main);
    padding: 0 0 0 12px;
    color:var(--main);
    font-size:var(--fxs);
}
.content h2{font-size:var(--fl);
    text-align: center;font-weight:bold;padding: 0 0 10px 0;

}
#iframe2 h2{font-weight:normal}
H1{font-size: 25px; color:#0097E0; text-align: center }
select{font-size: var(--fn)}

#overlayDiv{background:rgba(1,1,1,.2); position: fixed; top: 0;left: 0; right: 0; bottom: 0; display: none}





/* UNOS SLIKE*/
#uploaded_docs{
    height:100px;
    background: #eee;
    padding: 4px;
    box-sizing: border-box;
}
#uploaded_docs img{
    width:auto;
    display: block;
    height:100%;
    border:1px solid #444;
    margin:0 6px 0 0;
}


.custom-file-upload{
    background: #777;
    padding: 16px;
    margin:20px 0;
    display: block;
    cursor: pointer;
    color:#eee;
    text-align: center;
}

#file-name{
    padding: 20px 0;
    display: block;
    color:var(--main);
}
#progressbar{
    display: none;
}
.barcode_sn{
    /*! margin: 0 auto 20px auto; */
}
.barcode_sn a{
    color: inherit;
    display: block;
    width: 100%;

}

/*RADNI NALOG*/
.radniNalogStrana input{border: 1px solid #999; border-radius: 20px}
.nalog_box1,.nalog_box2,.nalog_box3, .nalog_box4, .nalog_box5, .nalog_box6,
.nalog_box7, .nalog_box8{width: 90%; margin:20px auto 30px; border: 1px solid var(--main); border-radius: 20px; padding: 10px 10px 20px 10px; box-sizing: border-box;}
.nalog_box1 legend,.nalog_box2 legend,.nalog_box3 legend, .nalog_box4 legend, .nalog_box5 legend,
.nalog_box6 legend,
.nalog_box7 legend, .nalog_box8 legend{background: var(--white); color: var(--main); padding: 5px 8px;}

.nalog_box1 input{display: block ; float: left; margin-top: 13px; margin-right: 8px;}
.nalog_box1 label{display: block; margin-top: 10px;}

.nalog_box2 label{display: block; text-align: center; margin-top: 20px; margin-bottom: 10px}
.nalog_box2 input{display: block; width: 90%; margin:10px auto 20px; padding: 8px 10px; box-sizing: border-box; border: 1px solid var(--main)}

.nalog_box3 label{display: block; text-align: center; margin-top: 20px; margin-bottom: 10px}
.nalog_box3 input{display: block; width: 90%; margin:10px auto 20px; padding: 8px 10px; box-sizing: border-box; border: 1px solid var(--main)}

.nalog_box4 .nalog_box4-1 input, .nalog_box5 .nalog_box5-1 input{display: block ; float: left;margin-right: 10px; margin-top: 12px; width: 5%}
.nalog_box4 .nalog_box4-1 label, .nalog_box5 .nalog_box5-1 label{display: block;  text-align: left;padding-top: 10px; margin-top: 0; margin-bottom: 0}
.nalog_box4 label{display: block; text-align: center; margin-top: 20px; margin-bottom: 10px}
.nalog_box4 input{display: block; width: 90%; margin: auto 10px; padding: 8px 10px; border: 1px solid var(--main) }

.nalog_box5 .nalog_box5-2{margin: 30px 0}
.nalog_box5 .nalog_box5-2 input{margin-left: 10px;}
.nalog_box5 .opis_opreme{display: block; text-align: center; margin: 10px 0;}
.nalog_box5 #opis_opreme{width: 90%; margin: 10px auto 20px; padding: 8px 10px; border: 1px solid var(--main)}

.nalog_box6 textarea{width: 90%; margin: auto; display: block; height: 200px; border-radius: 20px; border: 1px solid var(--main)}
.nalog_box6 input{width: 90%; margin: 10px auto 20px; display: block; padding: 8px 10px; box-sizing: border-box; border: 1px solid var(--main)}
.nalog_box6 label{display: block; text-align: center; margin-top: 20px; margin-bottom: 10px}
.nalog_box6 div input{display: inline-block; margin-top: 5px; width: 20px}
.nalog_box6 div label{display: inline-block; text-align: left; margin-top: 20px; margin-left: 20px;}

.nalog_box7 label{display: block; text-align: center; margin-top: 20px; margin-bottom: 10px}
.nalog_box7 input{width: 90%; margin:10px auto 20px; display: block; padding: 8px 10px; box-sizing: border-box;border: 1px solid var(--main)}
.nalog_box7 div input{display: inline-block; margin-top: 5px; width: 20px}
.nalog_box7 div label{display: inline-block; text-align: left; margin-top: 20px; margin-left: 20px;}

.nalog_box8 label{display: block; text-align: center; margin-top: 20px; margin-bottom: 10px}
.nalog_box8 input{width: 90%; margin: 10px auto 20px; display: block; padding: 8px 10px; box-sizing: border-box; border: 1px solid var(--main)}

.radniNalogStrana .snimi-dugme.dugme{padding: 0;}

/*LOGIN*/
.imageLogo {width: 300px;margin: 0 auto 20px}
.imageLogo img {width: 100%; display: block;}
.forma input{display: block;
    border-top: none;
    width: 70%; margin: 20px auto; font-size: 16px;
    text-transform:lowercase;
    padding: 16px;
    border:none;


}
.dugme{margin: auto; display: block; width: 300px;
    text-align: center; background: var(--main);
    color: #fff;margin-top: 45px;
    border-radius: 30px; padding: 18px 0 20px;
    font-size:var(--fn); text-transform: uppercase;
    border:2px solid #ddd8;
}
.dugme.tamno_dugme{
    background: var(--maindark)
}
/*HEDER*/
.header {padding:4px 0 ;border-bottom: 1px solid #ddd; box-shadow: 2px 2px 2px 1px #ddd; background: #fff; z-index: 1;}

.header > div {display: flex;  width: 94%; margin: auto;
    justify-content: space-between;
    align-items:center;}

.header div .slika-logo {width: 180px; _margin: auto }
.page_detalji_uredjaja .header .slika-logo{width:130px;}
.header div .slika-logo img{width: 100%; display: block}
.back,.localBack, .profil_korisnika{width: 30px; padding:5px 0 0 5px; box-sizing: border-box;}
.index_page .back{display: none}
.back img,.localBack img, .profil_korisnika img{width: 100%; display: block;}
.invert{filter:invert(1) contrast(1)}
.mainMenu{display:block; padding:3px 5px; box-sizing:border-box; display: none}
.mainMenu:before{content:"\f0c9"; font-family: icons; font-size: 26px; color:var(--main)}

.glavniMeni{background: var(--lightblue); position: fixed; left: 0; right: 0px; top: 52px; z-index: 1; padding: 10px;
    box-sizing: border-box; display:none}
.glavniMeni span{width: 20%; display: block; border-right: 1px solid #fff; }
.glavniMeni a{display: block; width: 100%;padding: 0 10px; box-sizing: border-box}
.glavniMeni img{display: block; width: 100%}



header {

    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    height:40px; width:40px;

}


.menu-toggle {
    cursor: pointer;
    display: flex;

}

.bar {
    width: 32px;
    height: 3px;
    background: var(--main);
    margin: 6px 0;
    transition: 0.4s;

}

.menu {
    display: flex;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu ul li {
    margin-left: 20px;
}

.menu ul li a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

.menu ul li a:hover {
    color: #ffa500;
}


.menu ul {
    display: none;
}

.menu-toggle {
    display: block;
    margin: unset;
}
.menu.active{
    position: absolute;
    top:64px;z-index: 100;
    left:0;right:0;
}
.menu.active ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--main);
    padding: 10px 0;
    border-top:1px solid #fff;
}

.menu.active ul li {
    margin-left: 0;
    background: #fff;
    border-bottom:1px solid #ddd;

}
.menu.active ul li img{
    display: block;width:26px;

    padding: 0;
    filter:invert(1)
}
.menu.active ul li a.profile_link img{
    filter:invert(0)
}
.menu.active ul li a{

    display: flex;
    justify-content:flex-start;
    align-items:center;
    gap:20px;
    padding:12px;
    color:#eee;
    background-color: var(--main);

}
.menu.active ul li a span{
    border-left: 1px solid #eee;
    padding-left:20px
}





/* HOME */
.index .homePage{display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    padding:0;
    box-sizing: border-box;
    padding: 20px 0
}
.index .homePage .homePageBox{
    list-style:none;
    width:100%;margin:5px;
    justify-content: flex-end;
    display: flex;


}
.index .homePage .homePageBox a{
    width: 90%;
    display: flex;
    clip-path: polygon(3.5% 0, 100% 0, 100% 100%, 0% 100%);
    background: var(--main)

}
.index .homePage .homePageBox a img{
    display: block;
    width: 90px;_border:1px solid #fff;
    background:#0692c755;
    clip-path: polygon(0% 0, 100% 0%, 90% 100%, 0% 100%);
}
.index .homePage .homePageBox a span{
    _background: var(--main);
    background: linear-gradient(to bottom,var(--main) 40%,#fff);
    flex-grow: 1;
    color:#eee;
    _color:var(--main);
    text-transform: uppercase;
    padding: 0px 10px;
    display: flex;
    align-items: right;
    text-align: right;
    justify-content: center;
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0% 100%);
    border-right:4px solid var(--main);
    box-shadow: inset 8px 0px 10px #4445;
    font-weight:bold;
    flex-direction: column;
    letter-spacing: 4px;
}
.index .homePage .homePageBox a span i{
    font-style: unset;
}
.index .homePage .homePageBox a span sup{
    font-size:var(--fs);
    font-weight: normal;
}



.linear .homePage{width: 90%; margin: auto;}
.linear .homePageBox{display: block; width: 100%; margin-top: -10px}
.linear .homePageBox a{width: 100%; display: block}
.linear .homePageBox img{width: 100%; display: block}




/*MENI*/
.meni-opcije {display: flex; flex-wrap: wrap; justify-content: space-around; width: 90%; margin: auto;}
.meni-opcije .box{background: #0097E0; color: #fff; width: 40%; border-radius: 15px; margin-bottom: 20px; height: auto}
.meni-opcije .box .homeMenuImg{width: 50%;display: block; margin: 0 auto ; padding:10px 0}
.meni-opcije .box a{width: 100%;color: #fff; height: 100%}
.meni-opcije .box a img{width: 100%; display: block;}
.meni-opcije .homeMenuHeading{color: #fff; width: 50%; margin: 0 auto; padding-bottom: 10px; text-align: center; display: block}


/*PRETRAGA*/
.pretragaObjekata,.pretragaUredjaja,.pretragaRadnihNaloga {width: 84%;
    margin:  0px auto 16px auto;
    position: relative;
    box-sizing: border-box;
    padding: 0;

}
.pretragaObjekata input, .pretragaUredjaja input, .pretragaRadnihNaloga input{width: 100%; border-radius: 20px;
    padding: 8px 5px; box-sizing: border-box; border: 1px solid var(--main); font-size:var(--fn)}
.light_bg .pretragaUredjaja input{
    border:1px solid var(--main)
}
.pretragaObjekata img, .pretragaUredjaja img, .pretragaRadnihNaloga img{position: absolute; width: 30px; right: 5px; top: 3px}

.pretragaRadnihNaloga{
    width:80%;
    margin: 10px auto 30px;
}

.dugmePretraga input{display: block; margin-left: 40px; width: 80%; margin: auto; padding: 8px 5px; border-radius: 20px; border: 1px solid var(--main); position: relative}
.dugmePretraga img{width: 30px; position: absolute; right: 40px; top: 3px;}
.dugmePretraga{margin-bottom: 30px; position: relative}


.predloziPretrage{
    position: absolute;
    left: 15px; right: 15px; top: 170px; z-index: 1;}
.predloziPretrage ul{ border: 1px solid var(--main); border-bottom:none}
.predloziPretrage li{list-style: none; }
.predloziPretrage li a{display: block; padding:10px; box-sizing: border-box; color: var(--main);
    border-bottom: 1px solid var(--main); background:#fff}
.predloziPretrage li span{color: inherit;display:block; font-size: 14px; padding-top:3px}
.predloziPretrage .systemAddress{font-weight: bold}

/*LISTA UREDJAJA*/
.page_lista_uredjaja{
    color:#333
}

.lista_uredjaja{width: 92%; margin:15px auto;background:#fff;padding: 10px; border-radius:8px;box-sizing:border-box;}
.lista_uredjaja_box{margin-bottom: 6px; display: flex; position: relative}
.lista_uredjaja_box a{color:inherit}
.lista_uredjaja_box .info_uredjaj{display:flex; flex-grow:1; box-sizing: border-box; border-right: 1px solid var(--main);flex-basis:0; padding:0 0 10px 0; }
.lista_uredjaja_box .date {color: #0097E0 ;padding: 8px 10px 4px; display: block; font-size: var(--fs)}
.lista_uredjaja_box .naziv_uredjaja{font-weight: normal; font-size: var(--fs);padding: 0 10px; box-sizing: border-box;}
.lista_uredjaja_box .slika_uredjaja{width: 20%; }
.lista_uredjaja_box .slika_uredjaja a{padding:10px; box-sizing:border-box}
.lista_uredjaja_box .slika_uredjaja img{display: block; width: 100%}
.lista_uredjaja .uredjaj_img_cnt{width: 90px;}
.lista_uredjaja .uredjaj_img_cnt img{display: block; width: 100%;}
.lista_uredjaja_box .slika_uredjaja.no_picture img{
    filter:opacity(0);
}
.lista_uredjaja_box .model_uredjaja{font-weight: bold;
    padding: 4px 10px; box-sizing: border-box;
    font-size:var(--fs);
    color:var(--main);
}
.lista_uredjaja_box .adresa_uredjaja{padding:0 10px 10px; box-sizing: border-box}
.lista_uredjaja_box .ean_field,
.lista_uredjaja_box .godina_proizvodnje,
.lista_uredjaja_box .serviser_field{
    display: block;
    font-size:var(--fxs);
    padding:0 10px;
    text-transform: uppercase;
}
.lista_uredjaja_box .id_dev{
    position: absolute;
    bottom:10px; left:-25px;
    rotate: -90deg;
    color:#eee;
    font-size:var(--fs);
    display: none;
}

.listaObjekata{ width: 90%; margin: auto}
.listaObjekata .addObj{border: 1px solid var(--main); width: 80%; margin: 0 auto 30px; display: block; border-radius: 20px; padding: 10px;}
.listaObjekata ul li{display: flex; justify-content: space-between; border: 1px solid var(--main); margin-top: 5px}
.listaObjekata ul li span{padding: 10px; display: block; width: 100%}
.listaObjekata ul li .brUredjaja{ border-left: 1px solid var(--main); font-size: 20px; color: var(--main)}
.listaObjekata ul li .adresaObj{font-size: 15px;}
.listaObjekata ul li a{display: block}

/*pojedinacni uredjaj*/
.page_detalji_uredjaja.dark_bg .content{
    /*! background:#fff; */
    padding: 0px 10px 210px 10px;
}
.imageBox{border: 1px solid var(--main); width: 100%;
    margin: auto; }
.image{width:100px;padding: 4px; box-sizing: border-box; border-bottom: 1px solid var(--main)}
.image.no_image{display:none}
.image img{width: 100%; display: block; margin: auto;}
.imageBox .infoUredjaj{
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    border-left:10px solid #124;
    background: linear-gradient(to right, #111a, #1110)

}
.infoUredjaj span{padding:0; color:#eeee}
.infoUredjaj .deviceName{
    font-size:var(--fs);
    border-bottom: 1px solid #eee;
}
.infoUredjaj .deviceModel{font-weight:bold; padding: 3px 0 0 0}
.deviceEan{font-size:var(--fs)}
.proizvod h4, .proizvod p, .proizvod a{color: #fff; text-align: right}
.proizvod h4{margin-top: 10px; width: 70%; margin-left: auto; }
.proizvod .naslov{text-decoration: none; font-size: 16px; }
.proizvod a{margin-top: 20px; font-size: 12px; text-align: right; text-decoration: underline}
.proizvod p{margin-top: 10px}
.proizvod>div:nth-child(2){margin-right: 10px}

.kalendar{width: 100%}
.kalendar>div{display: flex; justify-content: space-around; width: 70%; margin: auto; padding:10px; box-sizing:border-box; align-items: center}
.kalendar span{ display:flex; box-sizing: border-box; justify-content: center; align-items: center; font-size: 18px}
.kalendar img{width: 30px; display: block; padding-right: 5px}


.tabela {width: 96%;margin: 20px auto; box-sizing: border-box;}
table {width: 100%; border-collapse: collapse}

table tr td:first-child { text-align: left;}
table tr td:last-child {text-align: right;text-transform:uppercase}


.deviceTable table tr td{
    font-size:14px;
    color:#eee;
    background: var(--main);
    border-bottom:1px solid #fff7;
    padding: 13px 12px;
}
.deviceTable table tr td a{
    color:inherit;
    border:1px solid #fff;
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 3px 10px 3px 30px;
    border-radius: 12px
}

.intervencijeDugme a, .servisDugme a, .sistemDugmme{
    color: var(--main);
    width: 200px;
    margin: 12px auto;
    padding: 14px 20px;
    box-sizing: border-box;
    width: 280px; position: relative;
    cursor: pointer;
    border:1px solid var(--main);
    text-transform: uppercase;
    background: #fff;
    border-radius: 30px
}

.preuzmiMaster{
    font-size:12px;width:100px; background:#4447;color:#eee;
    text-align: center;margin:0 10px 0 auto;
    padding: 6px;
    border-radius:14px 14px 0 0
}
.preuzmiMaster.button_master{
    border-radius: 24px;
    padding: 14px 20px;
    font-size:var(--fn);
    width:280px;
    box-sizing: border-box;
    margin: auto;
    text-transform: uppercase;
    border:1px solid var(--main);
    text-align: left;
}

/*
.intervencijeDugme a:after, .servisDugme a:after{content: "\f105"; position: absolute; right: 12px; top: 8px ;font-family: icons;; font-size: 20px}
*/
.intervencijeDugme span, .servisDugme span {width: 20px; display: inline-block; position: absolute; right: 10px; }
.intervencijeDugme span img, .servisDugme span img{width: 100%;}


/*INFO O UREDJAJU*/
.uredjajInfo{background: #0097E0}
.proizvod-info {display: flex; justify-content: space-around; width: 70%; margin: auto; border-bottom: 2px solid #ccc; padding-bottom: 20px}
.proizvod-info .image{width: 30%}
.proizvod-info .image img{width: 100%}
.proizvod-info h4{width: 75%; padding-top: 20px; margin-bottom: 20px; margin-left: auto;color: #fff;}
.proizvod-info p{color: #fff;width:75%; margin-top: 5px; margin-left: auto;  }
.karakteristike{width: 70%; margin: 20px auto;}
.karakteristike h3{color: #fff;margin-bottom: 10px}
.karakteristike p{color: #fff; margin-top: 30px}

/*UNOS UREDJAJA*/

.unosUredjaja>div{width: 90%; margin:0px auto 30px; text-align: center; position: relative}
.modelUredjaja label, .datuumi_garancije label, .toggleElement label, .kolicinaUredjaja label, .katUredjaja label{text-align: center; display:
        block; margin: 8px auto 8px; color:#eee}
.unosUredjaja>div input{width: 80%; margin: 5px auto 0px; display: block; border-radius: 10px;
    border: 1px solid var(--main); padding: 8px 10px; box-sizing: border-box; font-size:16px}
.modelUredjaja input{position: relative;}
.modelUredjaja #prikaziPomoc{position: absolute; top: 15px; right: 40px; border: 1px solid var(--orange); border-radius:50px; padding: 5px 6px; box-sizing: border-box; background: var(--orange); color: var(--white)}
.content .datumProizvodnjeUredjaja{width: 80%; margin: 20px auto 10px}
.content .datumProizvodnjeUredjaja input{width: 75px; display: flex; align-items: middle; align-content: center; display: inline-block}
.content .datumProizvodnjeUredjaja label{display: inline-block;}
.unosUredjajaDugme {width: 90%; margin: 10px auto 40px}
.unosUredjajaDugme .infoBox{text-align: center; margin: 20px auto; color:#eee; width:80%}
.unosUredjajaDugme a{border-radius: 10px; border: 1px solid var(--main)!important;}


/*PREDLOZI PRETRAGE MODELA*/
.predloziModela{width: 90%; margin: auto;border: 1px solid var(--main);max-height: 150px; overflow-x: scroll; background: #fff;  }
.predloziModela li{list-style: inside; list-style:none; border-bottom: 1px solid var(--main); padding: 10px  }
.predloziModela li:last-child{border-bottom: none;}



.barcodeDugme a{background: #fff; color: #0097E0; border: 2px solid #ccc; text-align: left; padding:7px 20px; box-sizing: border-box;
    border-radius: 10px; position: relative; width:80%; margin: auto}
.barcodeDugme span{width: 20px; display: inline-block; position: absolute; right: 20px}
.barcodeDugme span img{width: 100%;}
.unosUredjajaDugme a{ width: 80%; margin:10px auto;background: #fff; color: #0097E0; border: 2px solid #ccc; text-align: left; padding:7px 20px; box-sizing: border-box;
    border-radius: 10px; position:relative}
.unosUredjajaDugme span{width: 20px; display: inline-block; position: absolute; right: 20px}
.unosUredjajaDugme span img{width: 100%;}


.clipboardDiv .closeClipboard {position: absolute; left: -1px; top: -28px; background: var(--main);
    border-radius: 50px 550px 50px 0; padding: 5px 10px; box-sizing: border-box; color: var(--white); cursor: pointer}
.clipboardDiv{position: absolute; bottom: 101%; background: var(--main); width: 60%; border: 1px solid var(--main); border-bottom: none;right:0}
.clipboardList li{list-style: none; display:flex; border-bottom: 1px solid var(--white); padding: 5px; box-sizing: border-box;align-items: center}
.clipboardList .clipboardImg{display: block; width: 20%}
.clipboardList .clipboardModel{display: flex; width: 80%; align-items: center; padding: 0 10px; box-sizing: border-box;font-size: 15px;color: var(--white)}
.clipboardImg img{width: 100%; display: block}

.forma_izvrsni_servis{width:90%; margin: 20px auto; box-sizing: border-box;padding: 30px 10px 40px 10px; background: #fff; }
.forma_izvrsni_servis label{display: block; color: #555;  padding: 15px 6px 0px;box-sizing: border-box; color:var(--main)}
.forma_izvrsni_servis input{width: 100%; border-radius: 6px; padding: 8px 10px; box-sizing: border-box;margin-top: 5px; border: 1px solid var(--main)}
.forma_izvrsni_servis select{width: 100%;border-radius: 6px; padding:
        8px 20px; margin-top: 5px; border: 1px solid var(--main);box-sizing: border-box; background:none}
.unos-uredjaja-forma fieldset{margin-bottom: 20px; padding: 10px 10px 20px; box-sizing: border-box}
.unos-uredjaja-forma legend{border: 1px solid var(--main); border-radius:10px ;
    margin-left: 10px; padding:5px 10px; box-sizing:border-box; color: var(--main)}


.addInput{display: block; margin: 40px 20px; border: 1px solid var(--main);
    border-radius: 20px; padding: 5px 0; box-sizing:border-box}
.addInput label{display: block;  width: 100%; text-align: center; padding: 3px 0;
    color: #0097E0;border-bottom: 1px solid var(--main);}
.addInput input{display: block; width:100%;padding: 6px 10px;border: none; border-bottom: 1px solid var(--main); box-sizing: border-box }
.addInput #dodajRezDeo{display: flex; margin: auto; align-items: center;
    justify-content: center; font-size:26px; padding:0 5px; box-sizing:border-box}

.napomena label{display: block; padding-left: 15px; width: 300px; margin:10px auto 0}
.napomena textarea{width: 300px; height: 100px ;display: block; margin: 10px auto 0; border: 1px solid var(--main);
    border-radius: 20px; resize: vertical}

.cek-lista {width: 300px; margin: 30px auto; }
.cek-lista div > div{display: flex; border: 1px solid var(--main); border-radius: 20px; width: 90px; height:30px; margin-top: 10px}

.cek-lista div img{width: 25px; display: block; margin: auto}
.cek-lista div > img{border-right: 1px solid #ccc; padding:0 8px; }
.cek-lista div a{width: 100%; }
.cek-lista{display: flex; justify-content: space-between;}

.cek-lista label {color: #555; font-size: 16px;}

.napomena label{color: #555}

#snimiIntervenciju{display: block;width: 260px;text-align: center;background: #fff;
    color: var(--main);margin: 20px auto;border-radius: 26px;padding: 16px 0;border:1px solid #fff;
    text-transform:uppercase; letter-spacing:1.4px;
}


/*SERVISNE INTERVENCIJE*/

.servisneIntervencije{}
.servisneIntervencije .servisUredjajInfo{background:#345; display: flex; flex-wrap: wrap;
    padding:10px 20px; box-sizing: border-box}
.servisneIntervencije h2{color: #fff; padding: 2px 0}
.servisUredjajInfo p{width: 100%; color: #fff; padding: 0; }
.servisUredjajInfo span{color: inherit; font-weight: bold}

.servisneIntervencije >ul{
    display: flex; flex-wrap: wrap; padding: 10px 10px 10px 10px; box-sizing: border-box
}
.servisneIntervencije li{border: 2px solid var(--lightblue); width: 100%; list-style: none; display: flex; flex-wrap: wrap;
    padding: 10px 10px 0px 10px; box-sizing: border-box; border-radius: 10px; margin-bottom:10px;
    background: #fff;
}
.servisneIntervencije .int_image{
    border: 1px solid var(--main);
    border-radius: 5px;
    padding: 8px;
}
.servisneIntervencije li p{display: block; width: 100%; padding:5px 0}
.servisneIntervencije li .linkPdf{width: max-content;  display: inline-block; font-size: 24px;
    color: #fff; padding: 0 5px; box-sizing:border-box}


.servisneIntervencije .intervencija_info_cnt{
    width:80%;
    padding: 0 0 10px 3px;
    margin: 0;
}
.servisneIntervencije .intervencija_info_cnt span{
    color: var(--main);
    font-size:13px;
    display: inline-block;
    line-height: 12px;
}
.servisneIntervencije .intervencija_info_cnt p{

    padding: 0;line-height: 16px
}


.slike_intervencije{
    display: flex;
    gap: 8px;
    border-top: 6px solid #888;
    border-bottom: 6px solid #888;
    padding: 4px 0 0 0;
    background: #fff;
    margin-bottom: 100px;
    overflow-x: auto
}
.intervencija_cnt{
    position: relative;

}
.servisneIntervencije .intervencija_info_cnt .rn_cnt{
    position: absolute;
    top:0;
    right:0;
    width:50px;
    background: var(--main);
    display: block;
    border-radius:0 8px 0 0;
    padding: 2px 2px 6px 2px;
    box-sizing: border-box;
}
.servisneIntervencije .rn_cnt span{
    font-size:10px;
    line-height: 10px;
    display: block;
    padding: 6px;
    box-sizing: border-box;
    color:#fff;
}
.int_image img{width:150px; background: #777}

/*IZBOR DOKUMENTA*/

.stranaIzborDoc{}
.izborDokumenta{padding:10px; box-sizing:border-box}
.izborDokumenta li{list-style: none; border: 1px solid var(--main);
    margin-bottom: 10px}
.izborDokumenta li a{color: var(--main); display: block; width: 100%;
    padding:10px 5px; box-sizing: border-box}

.popunjavanje_rn h2{
    color:#eee;
    font-weight:normal;
    padding: 10px;
}
.checklistCnt form{
    padding:0 6px;

}
.checklistTable{
    list-style: none;
}
.checklistTable li{
    margin-left: 1em;
}
.checklistTable fieldset{
    background: #fff;
    margin:10px auto 30px auto;
    border:2px solid var(--main);
    border-radius:10px;
    _background: var(--main);
}
.checklistTable fieldset legend{
    background: var(--main);
    color:#eee;
    font-size:var(--fn);
    padding:6px 16px;
    margin-left:20px;
    border-radius: 6px;
    border:1px solid var(--main);
    min-width:150px
}

.checklistTable .inputItem{
    padding: 4px 6px 20px 26px;
    _text-align: center;
    border-bottom: 1px solid var(--main);
    margin:auto;
}

.checklistTable .inputItem span{
    display: block;
    color: var(--main);
    font-size:var(--fs);
    font-weight:lighter;
    padding: 4px 4px 15px;
}
.inputItem input,
.inputItem select{
    padding:5px 10px;
    font-size:var(--fn);
    background: #def;
    border:1px solid var(--main);
    margin-top:4px;
    min-width:240px;
    border-radius: 4px
}
.checklistTable .inputItem select{
    background: #def;
    color:#666;
}
.checklistTable .inputItem textarea{
    width:92%;
    min-height:130px;
    background: #def;
    border:1px solid #999;
    border-radius:6px;
    padding: 10px 16px;
    box-sizing: border-box;

}
.checklistTable .inputItem input[type='checkbox']{
    display: inline-block;
    min-width: unset;
    width:30px;
    margin: 0 0 0 20px;
}

.checklistTable .inputItem input[type='radio']{
    display: inline-block;
    min-width: unset;
    width:30px;
    margin: 0 0 0 0px;
}


.checklistTable .inputItem label{
    width:220px;
    display: inline-block;
    vertical-align: top;
    padding: 0 0 20px 0;
}
.checklistCnt span input{
    margin:4px auto;
    padding:3px;
    font-size:var(--fn);
    width:100%;
    box-sizing: border-box;
    border:1px solid #ccc;
    border-radius: 4px;
    background: #ffe
}

.checklistCnt button,
.button-potvrdi,
#clearbutton
{
    background: #fff;
    border:1px solid #fff;
    color:var(--main);
    font-size:var(--fn);
    padding:14px 20px;
    border-radius:24px;
    margin: 20px auto 100px; display: block;
    text-align: center;
    width:280px;
}

#clearbutton{
    background: #fff;
    color:#888;
    border:1px solid #888;
}

#canvas{
    border-radius: 6px;
    display: block;width:300px;
    margin:auto;
    box-shadow: 3px 3px 13px rgba(0,0,0,.1);
    background: #def;

}


#modalniProzor{background: #333; display: flex; position: fixed; top: 200px; left: 10px; right: 10px;
    padding:20px; box-sizing:border-box; box-shadow: 1px 1px 5px 1px #444;flex-wrap: wrap; justify-content: space-evenly;
    border-radius:10px}
#modalniProzor span{background: #000; display: inline-block; width: 60px; padding: 7px 0; box-sizing:border-box;
    text-align:center; color:#ccc; border-radius: 5px}
#modalniProzor p{width: 100%; margin-bottom: 20px; text-align:center; color: #fff}

/*UNOS UREDJAJA KROZ KATEGORIJE*/


.kategorijeUredjaja{text-align: center; padding:15px; box-sizing:border-box; }
.kategorijeUredjaja h3{font-weight: normal; font-size: 20px; color: var(--main); padding-bottom: 15px}
.kategorijeUredjaja select{width: 90%; font-size:16px; margin-bottom: 15px; border-radius: 10px; padding: 5px 10px;box-sizing: border-box; border: 1px solid var(--main)}
.kategorijeUredjaja select option{color: var(--main); margin-top: 10px}
.listaUredjajaKategorije{display: flex; flex-wrap: wrap; justify-content: space-between}
.listaUredjajaKategorije li{list-style: none; width: 95%; margin: 2px 0; border: 1px solid #eee}
.listaUredjajaKategorije li a{display: block; padding: 10px 0; box-sizing: border-box; position: relative;}
.listaUredjajaKategorije li a h4{font-size: 14px; color: var(--main)}
.listaUredjajaKategorije li a p{font-size: 14px; border-top: 1px solid #ccc; padding: 10px 5px; box-sizing: border-box; color:#eee}
.listaUredjajaKategorije li a .productModel{_position: absolute; _top: 0px; _left: 0px;  _background: #fff;
    _transform: rotate(-10deg); padding: 3px; box-sizing: border-box;color:#eee}
.listaUredjajaKategorije li a .productName{font-size: 13px}
#nemaProizvoda{display: block;text-align: center;width: 300px; padding:20px 5px; border-radius: 10px ;box-sizing: border-box; ;margin: 20px auto 30px; border: 1px solid #eee;color: var(--white); ;background: #248; cursor: pointer}
.listaUredjajaKategorije li img{width: 100%; display: none}

/*UNOS SISTEMA*/

.unosSistema{ display: flex; flex-wrap: wrap; padding: 0 20px 20px 20px; box-sizing: border-box}
.unosSistema h2{display:block; width:100%; padding: 0 0 10px; font-weight: normal; font-size: 22px;
    text-transform: uppercase; color: #eee; text-align: center}
.unosSistema label{ display: block; color: #eee; padding: 15px 15px 10px;box-sizing: border-box}
.unosSistema input{width: 100%; border-radius: 20px; padding: 8px 10px; box-sizing: border-box;
    border: 1px solid var(--main); font-size: 16px}
.unosSistema select{width: 100%;border-radius: 20px; padding: 8px 10px; border: 1px solid var(--main);box-sizing: border-box;
}
.unosSistema #snimiSistem{margin: auto;margin-top: auto;display: block;width: 200px;text-align: center;background: #0097E0;
    color: #fff;margin-top: 30px;border-radius: 20px;padding: 12px 0 10px;border:1px solid #eee}

/*SVI OBJEKTI*/
.prikazSvih{display: flex; flex-wrap: wrap; padding: 1px 4px 20px 4px; box-sizing: border-box; align-items:flex-start; }
.light_bg .prikazSvih h2{color:#555; }
.prikazSvih h2, .detaljiObjekta h2, .detaljiSistema h2,
.prikaz_radnih_naloga h2, .detaljiRnCnt h2, .detalji_uredjaja h2,
.prikazChecklisti h2{display:block; width:100%; padding: 0; font-weight: normal; font-size: 16px; text-transform: uppercase; color:#fff; text-align: center; background: var(--gradient_a); padding: 12px 0 4px 0; border-bottom: 1px solid #aaa4; letter-spacing: 2.6px; height:30px; margin-bottom: 16px; }
.sviObjekti .prikaz_objekata_head{display: flex; justify-content: space-between; padding: 10px 12px 10px 20px; align-items: center; }
.sviObjekti .prikaz_objekata_head a{display: flex; justify-content: center; align-items: center; gap:6px; border:1px solid #000; filter: invert(1) brightness(10) opacity(.8); padding: 0 4px; }
.sviObjekti .prikaz_objekata_head img{height: 28px; display: block; }
.sviObjekti .prikaz_objekata_head a span{display: block; padding: 10px; font-size:var(--fs); }
.listaObjekata{display: flex; flex-wrap:wrap; width:100%;flex-grow:1;}
.listaObjekata li{width:100%; margin:5px 10px 5px 20px; border:1px solid #eee; padding:10px 10px 10px 40px; box-sizing:border-box; display: flex;list-style: none; align-items: center; background: var(--gradient_a); position: relative; clip-path: polygon(100% 100%, 100% 0, 6% 0, 0 100%) }
.listaObjekata li:before{content:""; width:9px; height:110%; background: #eee; top:-3px;left:3px; position: absolute; rotate: 15deg }
.listaObjekata li a{display: flex; flex-wrap: wrap}
.listaObjekata li .osnovneInfo{flex:10;}
.listaObjekata li .osnovneInfo span{ width: 100%; color:#eee ;display: block; padding: 5px 0;margin-right:5px; box-sizing:border-box; }
.listaObjekata li .nazivObjekta{border-bottom: 1px solid #fff7;text-transform: uppercase; font-weight:bold}
.listaObjekata li .brojSistemaUObjektu{flex:1; display: flex; justify-content: center; align-items: center; font-size: 14px; background:#fff; height:32px; width:44px; padding:0; border-radius: 6px }
.listaObjekata li .strelica{position: relative; flex:1; justify-content:right}
.listaObjekata li .strelica:before{content: ""; border-top:2px solid #fff; border-right:2px solid #fff; height:15px; width:15px; _position:absolute; transform:rotate(45deg); _right:10px; _top:20px; }


/*UNOS OBJEKATA*/


#daikin_hr_loyalty{width: 100%; margin: auto;background: #fff; padding:0 0 30px 0}
#daikin_hr_loyalty .loyalty_form_ul{padding:20px}
#daikin_hr_loyalty .loyalty_form_ul li{border: 1px solid var(--main); margin-bottom: 8px; padding:0 6px;color:var(--main)}
#daikin_hr_loyalty .sn_button{display: flex;gap:30px;border: none!important;justify-content: space-between}
#daikin_hr_loyalty li{list-style: none;position: relative}
#daikin_hr_loyaltyh2{text-align: center; margin-bottom: 20px; font-weight: normal; color: var(--main); padding:30px 0 10px 0; }
#daikin_hr_loyalty .unos_forme_standard{position: relative; padding: 0 30px; }
#daikin_hr_loyaltylabel{display: block; position:absolute; top:4px;left:40px; font-size:var(--fs); color:var(--main); }
#daikin_hr_loyalty input, .unosObjekata select{display: block; width: 100%; margin:5px auto 15px; border:none; padding: 18px 6px 2px 6px; font-size:16px; box-sizing: border-box; }
#daikin_hr_loyalty .unos_forme_standard select{background: #fff }
#daikin_hr_loyalty input:focus{outline:none; _box-shadow:inset 0 -1px 12px 0 var(--main); border-bottom: 1px solid darkorange }
#daikin_hr_loyalty .li_model{position: relative}
#daikin_hr_loyalty .intelli_list,
#daikin_hr_loyalty .intelli_list_city{
    position: absolute;
    padding: 10px 10px 30px 10px;
    background: #acf;
    width:84vw;
    box-sizing: border-box;
    _border:1px solid var(--aux);
    border-top:none;
    top:100%;
    z-index: 100;

}
#daikin_hr_loyalty .li_attachment{border: none!important;}

#daikin_hr_loyalty .intelli_list .intelli_list_item,
#daikin_hr_loyalty .intelli_list_city .intelli_city_item{
    border-bottom:1px dashed var(--main);
    padding: 10px 0;
    cursor: pointer
}
#submit_loyalty{background: var(--main); color:#eee;
    padding:16px 20px;
    text-align:center;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:2px;
    cursor:pointer;
}
#submit_loyalty:hover{
    background: var(--aux);
}
.error-class input{
     background:#fcc6; 
}
.error-class{

    position: relative;

}
.error-class:after{
    content:"* Obavezno polje";
    position: absolute;
    color:#f00;
    bottom:0;left:10px;

    width:100px;
    font-size: var(--fs);
    height:30px;
        pointer-events: none;
}


/*DETALJI OBJEKATA*/
.detaljiObjekta, .detaljiSistema{ display: flex; flex-wrap: wrap; box-sizing: border-box; background:var(--main) }
.infoOObjektu, .infoOSistemu{position: relative; padding:0 14px; }
.infoOObjektu h3, .infoOSistemu h3{text-align: center; color:#eee; font-weight:normal; letter-spacing: 2px }
.detaljiNalogaUl{
    width: 100%!important;
    flex-basis: 0;
    flex-wrap: nowrap;
    flex-direction: row

}
.detaljiNalogaUl li{
    width: 90%;
    display: flex;
    margin: 2px auto;

}
.detaljiNalogaUl li span:nth-child(2n){text-align: right}
.detaljnije,
.detaljiNalogaUl{display: flex; flex-wrap: wrap; padding:10px 4px; box-sizing:border-box; margin: 10px 0 0 0; justify-content: space-between; align-items: center; list-style:none }
.detaljnije span,
.detaljiNalogaUl span{width: 50%; padding:12px 10px; background: #fff; margin:1px 0; box-sizing: border-box; min-height: 40px; display: block; font-size:var(--fs) }
.detaljnije span:nth-child(even){text-align: right; }
.detaljnije span:nth-child(odd){; }
.detaljnije .kontakt_telefon_objekta a{color: var(--main)}
.detaljiSistema .akcije{position: absolute; right: 0;top: 0}
.detaljiNalogaUl .rn_link{margin: 6px auto;background:none; width: 100%}
.detaljiNalogaUl .rn_link a{display: block; color:var(--main);}
.content.detalji_uredjaja .rn_gall{font-weight:normal; letter-spacing: 2px; padding: 10px 0}


.sistemiObjekta{width: 90%; margin:20px auto; background:linear-gradient(to bottom, #fff0 60px, #fffa 400px) }
.sistemiObjekta .dodajSistem{width:260px; margin:auto;}
.sistemiObjekta h4{font-weight: normal; text-align: center; padding:20px 0; font-size:var(--fl); text-transform: uppercase; margin-top:40px; color:#fff; letter-spacing: 1.5px }



.listaSistemaUObjektu{display: flex; flex-wrap:wrap; width:95%; margin: auto; }
.listaSistemaUObjektu li{width:100%; margin-bottom:5px; border:1px solid #eeea; display: flex; list-style: none; position: relative; background: #fff }
.listaSistemaUObjektu li a{width:100%;padding:10px 50px 10px 10px; box-sizing:border-box; position:relative; font-size:var(--fs); color:var(--main); }
.listaSistemaUObjektu li .imeSistema{font-size:var(--fm); display: block; padding: 0 0 4px 0; }
.listaSistemaUObjektu li .modeluredjaja{display: block; padding: 5px 0; font-weight: bold; }
.listaSistemaUObjektu .tipSistema{display: block; border-top: 1px solid var(--main)}
.listaSistemaUObjektu .brojUredjajaUSistemu{position: absolute; right: 10px;top: 18px;font-size: 16px;color: var(--main); text-align: right; }

/*DETALJI SISTEMA*/
.detaljiSistema .akcije{position: absolute; right: 0;top: 0}


.uredjajiSistema{width: 99%; margin:10px auto; background: #fff}
.uredjajiSistema h4{text-align: center; padding:20px 0 30px 0;
    font-weight:normal; font-size:var(--fn);
    border-top:1px solid #ccc;color:var(--main); text-transform: uppercase;
    letter-spacing:1.5px
}
.uredjajiSistema .dodajUredjaj{display: block;width: 200px;text-align: center;background: #fff;
    color: var(--main);margin: 20px auto;border-radius: 20px;padding: 12px 0 10px;}

.listaUredjajaUSistemu{ display: flex; flex-wrap:wrap; width:100%}

.listaUredjajaUSistemu li{
    width:100%; margin-bottom:10px;
    padding:0;
    border:1px solid #eee;
    background: #fff;
    list-style: none; position:relative;
    display: flex;
    align-items: center;
}
.listaUredjajaUSistemu li a{
    padding:10px;
    box-sizing:border-box;
    position:relative;
    font-size:14px;
    flex-grow: 1;
    flex-basis: 0;
    color:inherit

}
.listaUredjajaUSistemu li p{
    width:100px;
    padding: 8px;
    box-sizing: border-box;
    font-size:var(--fs);
    text-align: center;
    _background: #023;
    min-height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    cursor: pointer;
}
.listaUredjajaUSistemu li span{
    display: block;
    line-height: 1em
}
.listaUredjajaUSistemu li .radniNalogProizvoda{
    border-left:6px solid #e51;
    background:linear-gradient(to right, #e512 10%, #e510 70%);
}
.listaUredjajaUSistemu li .uzmiNalogProizvod{

    border-left:6px solid #157;
    background:linear-gradient(to right, #1573 10%, #1570 70%);
}
.listaUredjajaUSistemu li .pregledajNalogProizvod{
    border-left:6px solid #172;
    background:linear-gradient(to right, #1723 10%, #1720 70%);
}
.listaUredjajaUSistemu li .nazivUredjaja{font-size:11px; }
.listaUredjajaUSistemu li .modeluredjaja{display: block;
    padding: 6px 0; font-weight: bold; color:var(--main)}

.listaUredjajaUSistemu .masterUredjaj{border-left:16px solid #e23 ; }
.listaUredjajaUSistemu .masterUredjaj:after{
    content:"M";
    position: absolute;
    top:0px; left:-16px;
    _background: #e237;
    width:14px; height: 14px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color:#eee;
    padding: 1px;
    font-size:var(--fs)
}
/*
.preuzmiMaster{background:var(--orange); display: inline-block; padding: 10px; box-sizing: border-box;
    color: #fff; border-radius: 10px; margin-bottom: -10px; z-index: 1; margin-left: 10px
;display: none; }
.preuzmiMasterDugme{display: block; margin:0 0 10px 10%; width: max-content}
*/

/*
#pregledajListu,#pregledajNalog,
.pregledajNalogProizvod,
.uredjajiSistema .radniNalogProizvoda,
#ucitajListuZaSistem,
#generisiNalogZaSistem,
.uzmiNalogProizvod,
#generisiChecklistuZaSistem,
#ucitajNalogZaSistem{

    padding: 0;
    text-align: center;
    padding: 8px 16px;
    _border:1px solid #aaa;
    box-sizing: border-box;
    _border-radius:8px;
    _height:38px;
    cursor: pointer;
    min-width:140px;
    font-size:14px;
    margin:0 4px 4px 8px;
    max-width: fit-content;

}
#ucitajListuZaSistem .icons,
#generisiNalogZaSistem .icons,
.pregledajNalogProizvod .icons,
.radniNalogProizvoda .icons,.uzmiNalogProizvod .icons,
#generisiChecklistuZaSistem .icons,#ucitajNalogZaSistem .icons{
    font-size:22px;
    vertical-align: middle;
    margin-right: 16px;
}

*/

/*RADNI NALOG*/

.radni-nalog-forma{width:300px; margin: 20px auto}
.radni-nalog-forma label{display: block; color: #0097E0; margin-top: 10px; padding-left: 15px}
.radni-nalog-forma input{width: 100%; border-radius: 20px; padding: 5px 0; margin-top: 5px; border: 2px solid #ccc}
.napomena-radni-nalog label{display: block; padding-left: 15px; width: 300px; margin:10px auto 0; color:#0097E0 }
.napomena-radni-nalog textarea{width: 100%; display: block; margin: 10px auto 0; border: 2px solid #ccc; border-radius: 20px; min-height: 100px;
    resize: vertical; padding:10px; box-sizing:border-box}
.snimi-dugme a{margin: auto;
    display: block;width: 300px;
    text-align: center;background:#024;color: #fff;margin-top: 25px
;border-radius: 20px;padding: 12px 0 10px;
    border:1px solid #eee;
}


/*PRIKAZ CHECKLISTI*/

.prikazChecklisti{padding: 0; box-sizing: border-box}
.prikazChecklisti fieldset{border: 1px solid var(--main); border-radius: 10px; margin-bottom: 10px;
    padding: 10px; box-sizing: border-box}
.prikazChecklisti fieldset legend{border: 1px solid var(--main); border-radius:10px; padding: 5px 10px;
    box-sizing:border-box; margin-left:15px; font-size:18px; color:var(--main)}
.prikazChecklisti .adresaObjekta{background: #eee; display: block; padding: 10px; box-sizing: border-box}
.prikazChecklisti fieldset>div{display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--lightblue);
    margin-bottom: 10px; padding: 10px; box-sizing: border-box;align-items: center}
.prikazChecklisti fieldset>div p{margin-right: 5px}
.prikazChecklisti .nazivSistemaCL{font-weight: bold}
.prikazChecklisti .tipSistemaCL{font-size: 14px}
.prikazChecklisti .linkPdf{color: var(--main); font-size: 20px; display: block; padding:2px 5px;
    box-sizing: border-box}

.checklists_ul{
    width:90%;
    margin: auto;
}
.chk_infoli{
    margin:4px auto;
    background: #fff;
    display: flex;
    border-left:24px solid #124;
    position: relative;
}
.chk_infoli .chk_info_left{
    flex-grow: 1;
    padding: 6px 10px;
}
.chk_infoli .chk_info_right{
    flex-basis: 70px
}
.chk_infoli img{
    width:100%;
    display: block;
}
.chk_top_ul, .chk_bottom_ul{
    list-style: none;

}
.chk_bottom_ul{
    display: flex;
    gap:10px;
    flex-wrap: wrap;
}

.chk_top_ul li,  .chk_bottom_ul li{
    font-size:var(--fs)
}
.chk_top_ul .chk_id{
    position: absolute;
    bottom:10px; left:-20px;
    color:#fff;
    rotate: -90deg
}


/*PRIKAZ RN*/

.prikazRN{padding: 0 5px; box-sizing: border-box}

.lista_radnih_naloga_D{
    padding: 0 2px;
}
.prikazRN h2{
    color:var(--main);
    font-weight:normal;
}
.rn_item_list_dnc img{
    display: block;
    width:100%
}
.rn_item_list_dnc{
    display: flex;
    border:1px solid #eee;
    margin-top:10px;
    padding: 10px;
    background: #fff;
}
.rn_item_list_dnc span.uzmiNalogProizvod{
    display: flex;
    min-width:70px;
    padding: unset;
    margin: unset;
    _background: #ccc;

}
.rn_item_list_dnc .uzmiNalogProizvod .rn_type{
    background: #777;
    right:3px;
}
.rn_item_list_dnc .uzmiNalogProizvod img{
    height: 72px;
    filter: grayscale(1);
}
.rn_item_list_dnc .rl_list_right,
.rn_item_list_dnc .uzmiNalogProizvod{
    flex-basis: 70px;
    position: relative;
    background: #fff;


}
.rn_item_list_dnc .rn_type{
    position: absolute;
    bottom: 4px;right:8px;
    background: var(--main);
    color:#fff;
    padding: 1px 7px 3px;
    border-radius: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:13px;
    letter-spacing: .4px
}

.rn_item_list_dnc .rl_list_left{
    flex-grow: 1;
    padding: 4px;
}
.rl_list_info{
    width:30px;
    display: flex;
    justify-content: center;
    align-items: center;
    _background: var(--main);padding: 4px
}
.rl_list_info a{
    background: var(--main);
    width:24px;text-align: center;
    height:24px;
    align-items: center;
    display: flex;
    justify-content: center;
    font-weight: bold;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    line-height: 20px;
    color:#fff;
    font-size:20px;
}
.rn_item_list_dnc_upper,
.rn_item_list_dnc_middle,
.rn_item_list_dnc_lower{
    display: flex;
    justify-content: space-between;
}

.rn_item_list_dnc_lower{
    border-top:1px solid #eee;
    flex-direction: column;
}
.rn_item_list_dnc_upper span{
    color: var(--main);
    font-size:13px
}
.rn_item_list_dnc_lower span{
    color: #888;
    font-size:13px
}
.rn_objekat_dnc{
    display: none
}
.rn_item_list_dnc_middle span{
    padding: 5px 0;
    color: #555;
}

/*
.prikazRN fieldset{border: 1px solid var(--main); border-radius: 10px; margin-bottom: 10px;
    padding: 10px; box-sizing: border-box}
.prikazRN fieldset legend{border: 1px solid var(--main); border-radius:10px; padding: 5px 10px;
    box-sizing:border-box; margin-left:15px; font-size:18px; color:var(--main)}
.prikazRN .adresaObjekta{background: #eee; display: block; padding: 10px; box-sizing: border-box}
.prikazRN .sistemPodaciRN{display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--main);
    margin-bottom: 10px; padding: 10px; box-sizing: border-box;align-items: center; position:relative}
.sistemPodaciRN:after{content: ""; border-right: 1px solid var(--main); border-bottom: 1px solid var(--main);
    display: block; width: 12px; height: 12px; position:absolute; right:15px; top:20%; transform:rotate(45deg);
    transition: all .2s}
.rotateArrow:after{transform: rotate(-45deg);top: 30%; transition: all .2s}
.prikazRN .sistemPodaciRN p{margin-right: 5px}
.prikazRN .nazivSistemaCL{font-weight: bold}
.prikazRN .tipSistemaCL{font-size: 14px}
.prikazRN .linkPdf{color: var(--main); font-size: 20px; display: block; padding:2px 5px;
    box-sizing: border-box}
.prikazRN ul{}
.prikazRN li{list-style: none; background: #eee; display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--lightblue);
    padding: 10px 5px; box-sizing: border-box; align-items:center}
.prikazRN .deviceModelRN{width: 100%;padding-bottom: 5px; font-weight: bold }
.prikazRN li .linkPdf{bdisplay: block; padding: 2px 10px 2px 5px}

*/

/*acin css*/


.customInlineInput > span {
    display: block;
    vertical-align: middle;
    color: #0097E0;
    text-align: center;
    font-size: 15px;
    padding: 12px 12px 5px 0;
}
.plumswitch input {
    opacity: 0;
    width: 0;
    height: 0;
}
/* The plumslider */
.plumswitch {
    position: relative !important;
    display: inline-block !important;
    width: 100px;
    height: 34px;
    display: inline-block !important;
    vertical-align: middle;
    padding: 0 !important;
    margin-left: calc(50% - 50px);

}

.plumslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transition: .4s;
    border: 2px solid #999;
    border-radius: 10px

}

.plumslider:before {
    position: absolute;
    content: "DA";
    height: 30px;
    width: 50px;
    left: 0px;
    bottom: 0px;
    color: #fff;
    background-color: #999;
    transition: .4s;
    border-right: 2px solid #999; border-radius:8px 0 0 8px;
    display: flex; justify-content: center; align-items: center
}

input:checked + .plumslider {
    /*background-color: #0097E0; */
}

input:focus + .plumslider {
    _box-shadow: 0 0 1px #2196F3;
}

input:checked + .plumslider:before {
    transform: translateX(42px);
    content: "NE";
    background-color: #999;
    border-radius:0 4px 4px 0;
    color: #fff;
    left: 2px;


}
.kontrolni-list-forma{width: 300px; margin: auto;}
.kontrolni-list-forma label{display: block;color: #0097E0;margin-top: 10px;padding-left: 15px;}
.kontrolni-list-forma input{width: 100%;border-radius: 20px;padding: 5px 0;margin-top: 5px;border: 2px solid #ccc;}
/* CHECKLIST UNOS*/

.choose_form_type{
    margin:70px auto;
    background: var(--main);
    text-align: center;
    padding: 20px 0 50px 0;
}
.choose_form_type h2{
    color:#eee;
    padding: 10px
}
.choose_form_type #type_form{
    width:300px;
    padding: 12px;
}

/*PODACI O KORISNIKU*/
.content.korisnicka_strana{

    background-size: cover;
    background-repeat: no-repeat;
    background: linear-gradient(to bottom, var(--main) 5%, #ffff 50%);

}
.content.korisnicka_strana:after{
    content:"";
    _background: url('images/serviser_1.png');
    width:100%;height:100%;
    position: absolute;

    top:0;left:0;
    z-index: -1;
}
.podaciKorisnik{padding:10px 20px 30px 20px; box-sizing: border-box}
.podaciKorisnik fieldset{
    padding: 30px 20px 30px 20px;
    box-sizing: border-box;
    margin: 30px auto 10px auto;
    background:#fff;
    border: none;

}
.podaciKorisnik .input_disabled{

    position: relative;
    padding: 18px 0;
}
.podaciKorisnik legend{border: 1px solid #fff;
    margin-left: 10px;
    padding:8px 20px;
    box-sizing:border-box;
    background:#fff;
    text-transform: uppercase;
}
.podaciKorisnik label{
    position: absolute;
    top:0;left:0;
    display: block;
    color: #888;
    padding-left: 12px;
    box-sizing: border-box;
    font-size:var(--fs);

}
.podaciKorisnik input{
    width: 100%;
    padding: 35px 10px 10px;
    box-sizing: border-box;
    border:none;
    border-bottom: 1px solid #444;
    font-size: var(--fl);
    color: #666;
    margin-top:-20px;

}
.logout{ display:flex;
    width:300px; height:60px;
    margin:auto; border:3px solid var(--main);
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background:var(--main);
    cursor: pointer;
}
.logout:before{content:"\f011"; font-family:icons; font-size:40px;
    color:#fff}

.obavestenje{padding: 10px; box-sizing: border-box; background: #fee3cd; margin: 20px 0; border: 1px solid var(--orange);
    color: var(--orange); border-radius: 10px}

/*DOKUMENTACIJA*/
.document table{border-collapse: collapse; margin: 20px auto; width: 100%;}
.document table tr td{border: 1px solid var(--main); padding: 8px 10px; box-sizing: border-box; text-align:left; font-size: 14px}
/*HEADER*/
.document .header{display: flex; justify-content: space-between; margin-top: 10px; margin-bottom: 30px}
.document .header span:nth-child(1){width: 30%; margin-top: 15px}
.document .header span:nth-child(2){width: 65%;}
.document .header span img{width: 100%;}
/*PAGE DOCUMENT*/
.document {width: 90%; margin:60px auto;}
.document h1{font-size: 26px; text-align: left; margin-top: 70px; text-align: center}
.document h2{font-size: 22px; text-align: left;margin-top: 10px; font-weight: normal;}
.document h3{font-size: 19px; text-align: left;margin-top: 10px; font-weight: normal;}
.document h4{font-size: 16px; text-align: center;margin-top: 20px; text-transform: uppercase;}
.document p{font-size: 14px; margin-top: 10px; line-height: 1.5em}
.document .page-doc >ul{margin: 15px 0 5px 10px}
.document .page-doc > ul >ul{margin: 10px 0 10px 20px; }
.document .page-doc > ul >ul >li{list-style: none; margin: 10px 0px; font-size: 15px}
.document .page-doc > ul >ul > ul{margin-top: 10px}
.document .page-doc > ul >ul > ul li{list-style: none; margin-top:10px; font-size: 15px}
.document .page-doc >ul li{margin-top: 10px; font-size: 15px;}

/*UPITNIK*/

.document .upitnik_check{margin-top: 30px}
.document .upitnik_check hr{border: 1px solid }
.document .upitnik_check h4{padding-bottom: 10px}
.document .upitnik_check ul{padding: 20px 0}
.document .upitnik_check ul li{margin: 0px auto 30px; list-style: none;; font-size: 15px; line-height: 1.5em;}



.kuponi_cnt{
    _background: red;
    min-height: 80vh;
    padding: 20px
}
.kuponi_cnt .kuponi_kreiranje_cnt{
    background: linear-gradient(to bottom, #fff0 25%,var(--lightblue));
    background: #fff;
    padding: 10px 10px 40px 10px;
    box-shadow: 1px 1px 12px 1px #4446
}
.kuponi_cnt .kuponi_bodovi,
.kuponi_cnt .kuponi_vrednost{
    display: flex;
    justify-content: space-between;
    font-size:var(--fs);
    color:var(--orange);
}
.kuponi_vrednost{
    display: none!important;
}


#izaberi_kupon{
    background: #fff;
    width:180px;
    padding: 12px;
    margin: 12px auto;
    text-align: center;
    color:var(--orange);
    box-sizing: border-box;
    cursor:pointer;
    border:1px solid var(--orange);
    text-transform: uppercase;
    font-weight: bold;
}
#select_kupon{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:20px;
    padding: 16px 0 0 0;
    cursor:pointer;

}
#select_kupon li{
    flex-grow: 1;
    min-width: 30%;
   
    box-sizing: border-box;
    text-align: center;
    font-size:var(--fxl);
    background: #bbb;
    color:#eee;
    border:1px solid #eee;
}
#select_kupon .select_kupon_item{
     padding: 10px;
}
#select_kupon .select_kupon_item.selected_item{
    background: var(--orange);
    color:#eee;
}

#select_kupon .select_kupon_item.inactive{
    color:#eee;
    border:1px solid #eee4;
    pointer-events: none;
    background: #dedede
}

#select_kupon .button_li{
    max-width:200px;
    box-sizing: border-box;
    font-size:var(--fn);
    background:var(--orange);
    color: #fff;
    border:none;
    text-transform: uppercase;
    font-weight:bold;
    
   
}
#select_kupon .button_li p{
    padding: 14px;
    margin: 0
}
#select_kupon .disabled_button{
    background: #cecece
}

.kuponi_lista_cnt{
    _background: #fff;
    margin: 10px 0;

}
.kuponi_lista{
    list-style: none;
}

.kuponi_lista_item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    background: #fff;
    color:var(--maindark);
    border-radius:12px;
    margin:20px auto;
    box-shadow: 4px 4px 10px 0px #4448;
    cursor: pointer;
}
.kuponi_lista_item .kupon_upper{
    border-bottom:1px solid #eee;
    padding: 10px 6px 6px 10px;
    _background: linear-gradient(to bottom, var(--maindark) 45%,var(--main));
    border-radius:12px 12px 0 0;
    font-size:var(--fs);
    justify-content: space-between;
    display: flex;
}
.kupon_logo img{
    display: block;
    width:60px
}
.kuponi_lista_item .kupon_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to bottom, var(--maindark) 15%,var(--main) 60%,  var(--maindark) );
}

.kuponi_lista_item .kupon_content .kupon_title{
    font-size:var(--fs);

}
.kuponi_lista_item .kupon_content .kupon_value{
    font-size:60px;
 font-family: daikinblack;
    line-height: 1em;
    letter-spacing: -2.3px
}
.kuponi_lista_item .kupon_bottom{
    font-size:var(--fxs);
    padding: 4px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
    border-top:1px solid #eee4


}
.kuponi_lista_item.value_500 .kupon_upper{
    _background: linear-gradient(to bottom, #a82 5%, #ca4 50%, #ca4 95%);
}

.kuponi_lista_item.value_500{
    _text-shadow: -1px -1px 3px  #4446;
}
.kuponi_lista_item.value_500 .kupon_content{
    background:transparent;
}
.kuponi_lista_item.value_500 img{
    _filter: saturate(0) contrast(100)
}
.kuponi_lista_item.value_200 .kupon_upper{

}

.kuponi_lista_item.value_200{
    _text-shadow: -1px -1px 3px  #4448;
}
.kuponi_lista_item.value_200 .kupon_content{
    background:transparent;
}
.kuponi_lista_item.value_200 img{
    _filter: saturate(0) contrast(100)
}
.kuponi_lista_item.status_kupona_2 {
    opacity: .5;
    position: relative;
    pointer-events: none;
    cursor: none;
}
.kuponi_lista_item.status_kupona_2:after{
    content:"ISKORIŠTEN";
    font-size:26px;
    color:#111;
    position: absolute;
    rotate: -35deg;
    top:70px;left:50px;
    border:1px solid #111;
    padding: 4px 20px
}



/* INSTALATERI */

.ins_cnt{
    
}
.ins_table{
    color:#dedede;
    text-align: center;
}
.ins_cnt .ins_table td,
.ins_cnt .ins_table th{
    text-align: center;
    border:1px solid #eee;
    font-size:var(--fs);
}

.ins_listing_uredjaja{
    display: none;
}

.ins_uredjaj{
    display: block;
    list-style: none;
    color:#ddd;
    border:1px solid #ddd;
    padding: 10px;
    margin:5px 0;


}
.ins_uredjaj .ins_datum{
    font-size:var(--fs);
}
.ins_uredjaj h3{
    line-height: 1em;
}
.ins_uredjaj p{
    line-height: 1em;
}
.ins_uredjaj .ins_serial{
     font-size:var(--fs);
}

/* The plumslider */
.document  .plumswitch {
    position: relative!important;
    display: block!important;
    width: 100px;
    height: 34px;
    display: block !important;
    vertical-align: middle;
    padding: 0 !important;
    margin-left: calc(50% - 50px);
    margin-top: 20px;


}

.document .plumslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transition: .4s;
    border: 2px solid #999;
    border-radius: 10px;

}

.document .plumslider:before {
    position: absolute;
    content: "DA";
    height: 30px;
    width: 50px;
    left: 0px;
    bottom: 0px;
    color: #fff;
    background-color: #999;
    transition: .4s;
    border-right: 2px solid #999; border-radius:8px 0 0 8px;
    display: flex; justify-content: center; align-items: center;
}

.document input:checked + .plumslider {
    /*background-color: #0097E0; */
}

.document input:focus + .plumslider {
    _box-shadow: 0 0 1px #2196F3;
}

.document input:checked + .plumslider:before {
    transform: translateX(42px);
    content: "NE";
    background-color: #999;
    border-radius:0 4px 4px 0;
    color: #fff;
    left: 2px;
}

/* JQUERY */

#fileuploader_cnt, #upload_tool {
    width:300px;
    margin: 10px auto
}
#fileuploader_cnt .ajax-file-upload {
    font-family:sans-serif;
    font-size:16px;
    font-weight:normal;

    border:1px solid #e8e8e8;
    color:#888;
    text-decoration:none;
    border-radius:0;
    padding:18px 16px 10px 16px;
    color:#fff;
    background:#2f8ab9;
    border:1px solid #eee;
    box-shadow:none;
    vertical-align:middle;
    display: block;
    width:240px;


}

#fileuploader_cnt .ajax-upload-dragdrop span b{
    font-weight: normal;
    padding: 0 10px 10px 4px;
    display: block;
}

#fileuploader_cnt .ajax-upload-dragdrop {
    width:300px;
    box-sizing: border-box;
}

/*LOADER*/
.loaderDiv{background: #fff; position: fixed; left: 0;right: 0;top: 40px;
    bottom: 0; z-index:1; }
.loaderDiv img{display: block; width: 50%; margin:auto; animation-name:rotiraj; animation-duration:2s;
    animation-iteration-count:infinite; animation-timing-function: linear;}

@keyframes rotiraj{
    from{transform: rotate(0deg)}
    to{transform: rotate(360deg)}
}

/*DOCUMENTS*/
.document_area{
    width:60%;
    margin: 20px auto;
   
}
.document_area .doc_item{
    list-style: none;
    border:1px solid #eee;
    padding: 14px;
}
.document_area .doc_image img{
    display: block;
    width: 100%;
}
.document_area a{
    color:#eee;

}
.document_area .doc_title{
   padding-top: 10px ;
    display: block;
}


/*KONTAKT*/

.kontakt{color: #fff;}
.kontakt a{color: inherit; text-decoration: underline;}
.kontakt p{display: flex; line-height:1.6em; gap:5px;}


/*FUTER*/
.footer{ display: flex;justify-content:flex-start; position: fixed;
    bottom: 12px; left: 0; right: 0; z-index: 100; 
        pointer-events: none;
}

.footer .grad{
    width:100%;
    height:100px;
    background: none;
    pointer-events: none;
}
.footer .grad img{
    width: 100%;
    display: block;
    background: transparent;
    pointer-events: none;
}


.footer span{width: 30px; padding: 10px 20px 6px 20px; border-right:1px solid #eee;text-align: center}
.footer .brDanaDoIsteka{position: absolute; background: var(--orange); z-index: 1000; top: -10px; left: 55%;
    display: inline-flex; width: 40px; height: 40px; font-size: 18px; align-items: center; justify-content: center;
    padding: 0; border-radius:50%; color:#fff}
.footer span img{width: 100%}
.footer .clipboardDevices{display: inline-block; width: 50px; height: 100%}
.footer .clipboardDevices:before{content: "\f0c5"; font-family: icons; color:#fff; font-size:30px}
.footer span.icons{font-family: icons;}
.footer span.icons a{color: #fff; font-size: 30px; margin-top: 5px }


@media (min-width: 1200px) {
   
    body{
        width:500px;
        margin:auto;
    }
    .footer{ display: flex;justify-content:flex-start; position: fixed;
    bottom: 120px; left: 0; right: 0; z-index: 100;  }
    
    
}