/* MOBILE CSS */
*{
	padding:0px;
	margin:0px;
	color:#505050;
    box-sizing: border-box

}

:root{
    --main: #00917e;
}


HTML{	
	width:100%;
  overflow-y: scroll;
}
BODY {
	width:100%;
	font-size:14px;
    font-family: 'Open Sans', sans-serif;
}
img {
    display:block;
    width:100%;
}
a{text-decoration:none;outline:none;color: inherit}

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

/* DISPLAY NONE */
.PageTrackNav,
.absoluteBoxLinks,
.hoverOn,
.map_container,
.top_baner, 
.CatTrackNav,
.registratorLinkovi,
.contentArea ul,
#goToHome
{display:none}

/*elements*/
.buttons, .button{
    width:220px;
    display: block;
    border:1px solid #ccc;
    margin:10px auto;
    box-sizing: border-box;
    cursor: pointer;
    padding:10px;

}
.buttons a, .button a{
    display: block;
    padding: 10px 0;
}
input.buttons{
    padding:10px
}
select{
    width:220px;
    padding: 11px 6px;
}
/* HEADER */

.meni, .meni-icon, .button_prodaja, #bocnaNavigacija{display: none}
.glavni_meni {display:none;
    background: #fff; position: absolute; top: 72px; left: 0px; right: 0px; z-index: 1
} 
.glavni_meni li{
    
}

.glavni_meni a{
    display: block; margin: 0 1rem; border-bottom: 1px solid #eee; font-size: 1.125rem;padding: 1rem 2rem 1rem 0;
    position: relative
}
.glavni_meni a:after{content: ""; display: inline-block; width: 12px; height: 12px; border-right: 2px solid var(--main);
border-bottom: 2px solid var(--main); transform:rotate(-45deg); position:absolute; right: 1rem; top:40%}


.mob_main_menu {
    position:absolute;
    top:20px;right:25px;
    padding:2px 4px;
    box-sizing:border-box;
    z-index: 60;
    cursor: pointer;
	
}

.mob_main_menu:after {
    content:"\f0c9";
    font-family:icons;
    font-size:27px;
    color:var(--main);
}


.image-holder {width: 100%; height: auto;margin-top:0px; position:relative;top:0;right:0;left:0; height: auto;z-index: 0; }

.oblast_zaglavlja{height: 70px}
.zaglavlje_content{height: 100%; display: flex; flex-wrap: wrap; align-items: center}

.logoPages{display:none;}
.logoHome{display:inline-block;}
.sign {display:none;}

.logo {width:136px;margin: auto}
.logo a{width:100%;height:100%;}
.logo a img {width:100%;height:auto;}

.wrapperTraka{display: none}

.vaillant-smiley{
    display:block;
    position: absolute;top:0;left:0;right:0;margin:0;padding:0;
}

.vaillant-smiley .image-holder{
	width:100%;
	height: auto;
}
.vaillant-smiley .image-left, .vaillant-smiley .image-right{
display: none;
}
.vaillant-smiley .image-left img, .vaillant-smiley .image-right img{
display: none;
}

.boxevi li{background: var(--main); list-style: none; margin-bottom: 10px; color: #fff;
padding: 10px 0; font-size: 16px; text-align: center}

/*SEARCHBOX*/

.catalog_search{display: none;}

/*GLAVNA STRANA*/
.index .oblast_sadrzaja{
   width:100%;
}


.index .pageBody > h2{
    font-size:20px;
    color:#499;
}
.index .pageBody > p{
    font-size:13px;
    color:#999;
    text-align: left;
    padding: 20px;
}

.index .picture-holder{
    height:100%;
}
.index .picture-holder img{
    
}
.index .homebox{
    width:90%;
    margin: auto;
    position: relative;
    margin: 20px 0 60px;
}
.index .textbox{
    position: absolute;
    bottom:0;left:0;right:0;
    background:rgba(255,255,255,.8);
    font-size:12x;
}

.index .textbox h2{
    font-size:16px;
    padding: 10px;
    font-weight:normal;
}

.index .textbox p{
    position: absolute;
    top:100%;width:100%;
    font-size:12px;
    border:1px solid #ccc;
    border-top:none;
    display: block;
    text-align: left;
    padding:10px 10px;
    box-sizing: border-box;
}

.inner-fixed{ padding: 10px 0}
.inner-fixed>h2{padding: 0 0 10px}
.pages{padding: 10px 0}
.page-pID{list-style: none; margin: 0px 0 20px; background: #fff}
.page-pID .img{overflow: hidden}
.page-pID .info{padding: 1.25rem}
.info h2{padding: 0 0 10px; font-weight: normal; font-size: 1.35rem}
.page-pID:hover img{transform: scale(1.1); transition: all .3s}
.page-pID:hover h2{color: var(--main); transition: all .3s; text-decoration: underline}
.page-pID .antrafile{position: relative; line-height: 1.3rem}
.page-pID .antrafile:after{content: ""; display: inline-block; width: 8px; height: 8px; border-right: 1px solid var(--main);
border-bottom: 1px solid var(--main); transform:rotate(-45deg); }

/*PAGES*/

#coll_middle{
  
}

.page{
    background:#eee;
    box-sizing: border-box;
    padding: 20px;
    display: none
}

.active{
    display: block;
}


#unesi{
    display: none;
}

.pageTitle {
    font-weight:normal; font-size: 1.25rem
}

#checkOprema table{

    width:100%;
    padding: 0px 10px;
    margin-top:14px;
    margin-bottom:10px;
    border-top:3px double #fff;
    border-bottom:3px double #fff;
}
#checkOprema table td{
    padding:4px 10px;
    text-align: right;
    width:90%;
    font-size:15px;
}
#checkOprema table td:nth-child(2){
    text-align: left;
    width:10%;
}
#checkOprema input{
    padding:10px;
    width:30px;height:30px;
    
    
}

#addDevice{
    padding: 16px 28px;
    border:1px solid #fff;
    background: #273;
    color:#eee;
    margin:30px auto 10px;
    display: block;
    vertical-align: top;
    cursor: pointer;
    width:220px;
    border-radius:8px;
}
#outputList{
    padding:20px;
    
}

#inputType {
    
}
#inputType p{
    padding:4px 0 14px 0;
}
#inputType .komada{
    display: inline-block;
    width:140px;

}
#inputType .komada input{
    width:66px;height:30px;
    font-size: 15px;
    background: #dfe;
    border:1px solid #ccc;
    margin: auto;
}
#unosUredjaja{
    width:200px;height:30px;
    font-size: 15px;
    background: #dfe;
    border:1px solid #ccc
}

#inputType input{
    text-align: center
  
}

.catTitle{font-size: 1.5rem; padding:1rem 0 0.5rem ;
line-height: 1.875rem; font-weight:normal}
.catShortDesc{line-height: 1.3rem; padding: 0 0 10px}

/*PREGLED OBJEKATA*/
.innerObjekatKontejner {
    text-align: left;
    _padding: 20px;
    margin:20px 10px;
    position: relative;
     display: block;
     border:1px solid #eee;
    
}
.objekatKontejner{
    padding: 16px 20px 30px 20px;
    _border:1px solid #eee;
}
.objekatKontejner h3{
    font-size:15px;
    color:#599
}
.objekatKontejner ul {
    padding:20px 0;
}
.objekatKontejner ul li{
    font-size:14px;
    list-style: none;
    margin:0 0 0 10px;
    padding:7px 0 0 10px;
    border-left:1px solid #ccc;
    text-align: left;
    
}

.opisSistema{padding: 0 0 10px; line-height: 1.3rem}

.embdgallery li{list-style: none}
.innerObjekatKontejner .images{
        text-align: center;
    border-top:1px solid #eee;
        padding-top:4px
}
.innerObjekatKontejner .images a{
   display: inline-block;

    width:30%;
}
.innerObjekatKontejner .icons{
    display: block;
    position: absolute;
    top:16px; right:0px;
    _border:1px solid #ccc;
    padding:3px;
    border-radius:50%;
    width:40px;height:40px;
    box-sizing:border-box;
}

.innerObjekatKontejner .icons:after{

    width:100%;height:auto;
    position: absolute;
    bottom: 0px;right:0;
    font-size:40px;
       
}
   
.ikonicaStatusa-1:after{
   content:"\f058";
    color:#7ca;
}
   
.ikonicaStatusa-0:after{
   content:"\f017";
    color:#ded ;
}

.datumObjekta{
    position: absolute;
    top:-10px;right:20px;
    font-size:12px;
    background: #fff;
    border:1px solid #eee;
    color:#aaa;
    padding: 1px 8px;
    
    
}
/*OSTALE STRANICE*/
.oblast_sadrzaja{
   width:100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem 0.5rem 0; background: #eee
}

.catid_10 .page-cID{
    display: block;
    
}
.catid_10 .page-cID .img{
    display: none;
    
}
.catid_10 .page-cID a{
    display: block;
    background:#f4f4f4;
    font-weight:normal;
    padding: 14px 0;
}
.catid_10 .page-cID:first-child a{
    border-top:1px solid #eee
}
.catid_10 .page-pID a{
    display: block;
    background:#fafafa;
    font-weight:normal;
    padding: 14px 30px;
    font-size:14px;
    text-align: left;
    border-bottom: 1px solid #eee
}

.phoneLayout li{
    
   
}
.phoneLayout .img{
   
}
.phoneLayout .img img{
   
}
.phoneLayout .info{
  
    
}
.phoneLayout .info a{
}
    

/*LOGIN*/
.app h1{
    color:#487;
    font-weight:normal;
    font-size:24px;
    text-align: center;
}

.contentTABLE{
    display: block;
    width: 100%;

}
.registrator #myaccount_style{
    width:90%;
    margin:auto;
}

.registrator h1{
    color:#499;
    font-size:18px;
    text-align: center;
}
.registrator h3{
    color:#aaa;
    padding: 0 0 10px 0;
}
tbody{
    display: block;
}
.contentArea{
    width:60%;

}
 .menuArea{
    width:1%;

}
.registrator .form_container{
    text-align: center;
}

.registrator p input{
    padding:4px;
    width:200px;
    border:1px solid #aaa;
    box-sizing: border-box;
}
#ulogujte_se{
    background: #fff;
    padding:20px 10px;
    margin:0 20px;
    text-align: center;
    border:1px solid var(--main);
    border-radius:6px;
}
#ulogujte_se #dugme_login{
    padding: 16px 50px;
    margin:20px 0 20px 0;
    background: #298;
    border: 1px solid #ded;
    color:#eee;
    cursor: pointer;
    font-size:16px;
    border-radius:6px;
}
#ulogujte_se input{
    padding:16px 10px;
    margin: 10px auto;
    background: #adc;
    border:1px solid #ded;
    width: 240px;
    border-radius:6px;
}
#ulogujte_se h3{
    color:#298;
    padding:0 0 26px 0;
    font-weight:normal;
    font-size:20px;
    letter-spacing: .8px;
    text-transform: uppercase;
    
}
#ulogujte_se label, #ulogujte_se p a{
    color:#298;
}
#uslov{
    text-align: center;
    border:1px solid #888;
    border-radius:6px;
    box-sizing: border-box;
    padding: 10px;
}
#uslov input{
    padding:20px;
    display: block;
    margin:20px auto;
    width:24px;height:24px;
}
#progressbar{
    display:none;
    background: #fff;
    width:80px; height:80px;
    border-radius:50%;
    margin: auto
   

}
#progressbar img{
     width:40px;
    margin:auto;
    padding-top:18px
}

#izbor1{
    
    display: block;
    width:90%;
    margin:20px auto;
}
#izbor1 input{
    width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#izbor1 input + label {
    font-size: 1.25em;
    color: white;
    background-color: #4a9;
    display: inline-block;
    padding:16px 20px;
    border-radius: 5px
}

#izbor1 input:focus + label,
#izbor1 input + label:hover {
    background-color: #298;
}


/* FUTER */
.oblast_futera{
    padding: 30px 0.5rem
}

.footer-logotip{ display: flex; align-items: center; justify-content: end; margin:auto}
.oblast_futera .logo-slika{width: 30%; margin-right: 10px}
.footer-logotip .logo-text{padding-top: 5px}

.footer-body{ margin: 30px auto}
.footer-body h3{ width: 100%; border:1px solid #eee; padding: 15px; border-bottom: none; font-weight: normal}
.footer-body div:last-child h3{border-bottom:1px solid #eee;}
.footer-body ul{display: none}

.napomene-tekst{}
.napomene-tekst ul{padding: 20px 0 10px}
.napomene-tekst li{list-style: none; padding: 5px 0}

.mreze{display: flex; list-style: none; }
.mreze li{margin-right: 10px}
.mreze a{display: inline-block; width: 32px}

body.app{
    _background: none;
}

.app .oblast_zaglavlja{
    border-bottom:1px solid var(--main);
}

.app .oblast_futera{
    display: none;
}
.app .oblast_sadrzaja{
    height:calc(100vh - 80px);
    overflow-y: auto;
    background: #fff9;
    margin: auto;
}

.app .button{
    border-radius:6px;
    text-align: center;
    padding: 16px;
    color: var(--main);
    border:1px solid var(--main);
}

.app #objekti{
    min-height:260px;
    background: #fff4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #fff;
    border-radius:6px
   
}

.app #forma{

}
.app .pageTitle{
    text-align: center
}

.app #forma #korak1{
    background:#00917E33;
    text-align: center;
    margin:20px 0;
    border-radius:8px;
}

.app #forma input{
    padding: 14px;
    border-radius:8px;
    width: 90%;
}
.app #korak1{
    background: none;
    border:1px solid var(--main);
    margin:auto;
    text-align: center;
    box-sizing: border-box;
}
.app #korak1 p{
    padding: 10px
}
.app #korak2{
    background: none;
    text-align: center;
    margin-top:20px;
    
    
}
.app #korak2 select{
    width:80%;
    margin:14px 0 0 0;
    background: #fff;
    border-radius:6px;
    border:1px solid var(--main);
    padding:16px;
}

.app #korak3{
    background: none;
    text-align: center;
}
.app #korak3 #checkOprema table td{
padding: 10px

}

.app #korak3 #checkOprema input{
    background: red;
    width:24px;
    height: 24px;
    vertical-align: middle;
}

.app #korak4{
    background: none;
    border:1px solid var(--main);
    margin:20px 4px;
    text-align: center;
    border-radius:6px
}

.app #korak4 label{
    padding: 20px 0 10px 0;
    display: block;
}
.app #korak4 input{
    width: 90%;
    padding: 26px 0;
    display: block;
    margin:auto;
}

.app #korak4 {
    
}

#napomena{
    width:280px;height:200px;
    background: #fff;
    border:1px solid #ccc;
    border-radius:6px;
    margin: auto;
    padding:10px
       
}
#napomena:focus{
    background: #ffe
}