/* DESKTOP VERSION CSS */
*{padding:0px;margin:0px;}
HTML{ width:100%;}
BODY {
    width:100%;
    height: 100%;
    margin: 0px;
    padding:0px;
    font-size:14px;
    overflow-x: hidden;
    overflow-y: scroll;
    color:#222;
    font-family:main,sans-serif;

}

/* VARIABLES */

:root {
    --dark_green:#006404;
    --orange:#F15A22;
    --main: #002245;
    --black:#212224;
    --blue:#1B243A;
    --main_gradient:linear-gradient(#A61717 0%,#FFD500 100%);
    --grey: #1B243A;
    --pg: #4488aa;
    --slyel_20:rgba(254,193,39,.2);
    --fl:26px;
    --fxl:36px;
    --fm:20px;
    --fn:18px;
    --fs:14px;
    --fxs:12px;
    --fxxs:9px;
    --th:rgba(86,191,12,.05);
    --negative_color:#eee;
    --width_inner:1200px;
    --width_min: 800px;
}
@font-face {font-family: icons; src: url(font-awesome/fonts/FontAwesome.otf);}
@font-face {font-family: main; src: url('fonts/dinpro_regular.otf');}
@font-face {font-family: main_b; src: url('fonts/dinpro_bold.otf');}
@font-face {font-family: main_black; src: url('fonts/dinpro_black.otf');}
@font-face {font-family: g_icons; src: url('fonts/google_icons.ttf');}

.hidden, .dektop_off{display: none!important;}
h3{font-size: var(--fl); padding: 20px 0px;}
h5{font-size: var(--fm)}
p{font-size: var(--fn); line-height: 22px; padding:0px 0px 10px 0px}
.txtbox ul{margin:10px 20px}
li{font-size: var(--fn)}
img {width: 100%; height:auto;}
a{text-decoration:none;outline:none;}
.handle{width:20px;}
.icons, .searchDugme {font-family: icons;}
.g_icon{font-family: g_icons}
.buttons{background: var(--dark_green); border:2px solid var(--main); color:#eee; padding: 12px 30px; max-width:200px; min-width:160px; border-radius: 24px; cursor:pointer; user-select: none; }
.buttons:hover{background: var(--main); }
.active_page{display: block!important; }
.app_messages{text-align: center; padding: 30px 20px; border:1px solid var(--main); width:80%; margin:30px auto 0 auto; background: #fff; border-radius: 10px; color:#f33; font-size:var(--fn) }
.meni_jezici {display: none!important;; }

/* GENERAL LAYOUT */
.pageBody {_width: 90%; margin: auto; }
.pageTitle {width: 90%; text-align: center; margin: auto; }
.footer_cnt, .inner_90 {width: 90vw; margin: auto; }
.oblast_zaglavlja {width: 100vw; position: fixed; background: #fffa; top:40px; }
.top_baner{width:100vw; position: relative; }
.top_baner:after{content:""; position: absolute; bottom:-100px; right:-100px; background: #fff; border-radius:50%; height:200px; width:200px; }
.top_baner:before{content:""; width:80px; height:80px; position: absolute; bottom:-36px; right:0; background-image: url('../../cms_upload/pages/files/128_graphic_lines_a.svg'); background-repeat: no-repeat; _background-color: red; z-index: 10; background-position-x: 100%; background-size:contain; _filter: hue-rotate(40deg) grayscale(1) }
#jssor1_container:before{content:""; width:85vw; height:40px; position: absolute; bottom:-54px; right:58px; background-image: url('../../cms_upload/pages/files/128_graphic_lines_horizontal.svg'); background-repeat: repeat-x; z-index: 20; background-position-x: 100%; background-size:contain; _filter: hue-rotate(40deg) grayscale(1); }
#jssor1_container:after{content:""; width:85vw; height:30px; position: absolute; background: linear-gradient(to right, #fff 30%, #fff0); z-index: 20; bottom: -44px; right:140px }
.baner_slide_title{position: absolute; top:280px; background: #fffe; padding: 20px; font-size:var(--fxl); border-radius:0 50px 6px 0; border-top:10px solid var(--main); }
.baner_slide_description{position: absolute; top:410px; background: #fffa; padding: 20px; font-size:var(--fl); border-radius:0 6px 50px 0; border-bottom:10px solid var(--main); width:400px; }
.baner_slide_description nav{position: absolute; top:130%; background: #fff; padding: 10px 40px 14px 40px; border-radius: 40px;min-width: 140px; font-size:var(--fm); text-align: center; font-weight:bold; }
.mini_menu.oblast_zaglavlja{top:0; background:#fffe; transition: 1s all; border-bottom:4px solid var(--main); }
.mini_menu.oblast_zaglavlja .catNav{display: none; }
.mini_menu.oblast_zaglavlja .itemIcon{height: 36px; }
.mini_menu.oblast_zaglavlja .wrapperTraka{padding: 0 10px; height: 40px }
.mini_menu .glavni_meni .menutype_1{padding: 0 }
.mini_menu .wrapperTraka .d_right .item{height: 24px; }
.mini_menu .catalog_search{display: none }
.oblast_sadrzaja{padding: 140px 0 0 0; min-height: 70vh; background: #aab }
.fullwidth{width: 100%}
.grayBckg {background: #FAFAFA}
.greenBckg{background:#04805F; color: #fff;}
.flexbox{display: flex;}

/*header*/
.zaglavlje_content{position: relative; }
.wrapperTraka {background: #fff8; display: flex; justify-content: space-between; align-items: center; padding: 10px; color: var(--black); font-size: var(--fn); height:60px; box-sizing: border-box; }
.wrapperTraka .d_left{width: 20vw; }
.wrapperTraka .d_right{display: flex; width: 10vw; justify-content: space-around; }
.wrapperTraka .d_right .item{height: 30px; }
.wrapperTraka .d_right .item img{display: block; height: 100%; }
.itemIcon{height: 50px; }
.itemIcon img{display: block; height: 100%; width: auto; }
.wrapperTraka a{color: inherit; }
.userBar {position: absolute; top: -30px; right: 10px; font-size: var(--fs); }
.userBar a{color: inherit; }

/*wrapper traka je visine 60px*/
.glavni_meni{_background:red; width: fit-content; position: absolute; top:10px; height: 40px; right: 15vw; }
.catalog_search {position: absolute; top: 10px; left: 20vw; height: 40px; }
.catalog_search input{border: none; padding: 10px 10px 10px 40px; border-radius: 20px; width: 350px; background: #eeee; position: relative; }
.catalog_search a:before{content: "\f002"; position: absolute; width: 20px; height: 20px; top:10px; left:15px; color: var(--black); }
#autoSuggestionsList{background: #fffe; width:600px; display: block; height:400px; overflow-y:scroll; }
#autoSuggestionsList li{display: flex; }
#autoSuggestionsList img{width:100px; display: block; }
#autoSuggestionsList li div{padding: 10px 20px; display: flex; align-items: flex-start; text-align: left; flex-direction: column; justify-content: flex-start; }
#autoSuggestionsList li div h3{padding: 0; font-size: var(--fn) }
.glavni_meni .menutype_1{display: flex; gap: 20px; justify-content: center; padding: 10px; }
.glavni_meni .menutype_1 li{list-style: none; }
.glavni_meni .menutype_1 li a{color: inherit; font-size:var(--fs) }

/*navigacija*/
.catNav .ulLv1 {display: flex; _background: orange; position: relative; justify-content: flex-start; padding: 10px; }
.catNav > li{list-style: none; font-size:var(--fs); padding: 0 14px; }
.catNav li a{color:inherit }
.catNav .all_cat{display: flex; gap: 40px; background: #fffa; padding: 0; justify-content: center; color:#377; position: relative; }
.catNav .all_cat .catalog_cat{list-style: none; }
.catNav .all_cat .catalog_cat .prvi_nivo{padding: 6px 20px; }
.catNav .drugi_nivo_cnt{display: none; position: absolute; top:36px;left:0; width:100vw;height:400px; background: #fff; }
.catNav .all_cat .drugi_nivo{}
.catNav .all_cat .catalog_cat:hover .drugi_nivo_cnt{display: block; columns:4; column-gap: 10px; padding: 20px 30px; }
.catNav .all_cat .catalog_cat .drugi_nivo {break-inside: avoid; padding: 0 0 10px 20px }
.catNav .all_cat .catalog_cat .drugi_nivo > a{color:var(--main); font-size:var(--fn); display: block; }
.catNav .all_cat .catalog_cat .drugi_nivo .catalog_subcat {display: block; list-style: none; }
.catNav .all_cat .catalog_cat .drugi_nivo .catalog_subcat a{font-size:var(--fs) }
.catNav .subLvCnt{display: none; 
/*privremeno*/
position: absolute; background: #fff; z-index: 100; border-radius: 10px; top: 60px; left: 0px; border: solid blue; font-size: 16px; width: 90vw; }
.catNav .subLvCnt .leftBox{width: 30%; padding: 20px; box-sizing: border-box; }
.leftBox li{border-bottom :solid #eee 1px; display: flex; }
.leftBox li:last-child{border-bottom: none; }
.leftBox li .productImg {width: 30%; }
.leftBox li .productImg img{display: block; width: 100%; }
.leftBox .productTitle {font-size: 16px; color: var(--black); flex-grow: 1; width: 70%; }
.leftBox .productTitle a{color: inherit; }
.catNav .subLvCnt .rightBox{flex-grow: 1; background: lime; padding: 20px; box-sizing: border-box; }
.catNav .subLvCnt .rightBox .ulLv2{display: flex; flex-wrap: wrap; background: #fff; box-sizing: border-box; }
.rightBox .ulLv2 .liLv2{width: 25%; padding:10px 0px 30px 0px; }
.rightBox .ulLv2 .liLv2 .aLv2{font-size: 16px; font-weight: bold; color: var(--black); }
.rightBox .ulLv3 li a{color: #717273; font-size: 16px; }
.catNav .subLvCnt .divLv2{display: flex; }

/*home page*/
.blockWrapper{width:60%; margin: 20px auto; background: #2976; min-height: 10vw; padding: 40px; box-sizing: border-box; }

/*footer*/
.newsleter_cnt .flexbox{width: 60vw; margin: auto; justify-content: space-between; gap: 30px; align-items: center;padding: 40px 0px}
.newsleter_cnt .flexbox .newsletter_img{width: 20vw}
.newsleter_cnt .email_cnt input{border: none; color: #fff; background: transparent; outline: 1px #fff solid; padding: 10px 20px; border-radius: 20px; margin-top: 10px; width: 250px}
.footer_cnt {background: #fff; padding: 20px }
.footer_cnt a{color: inherit; }
.footer_cnt li{list-style: none; padding: 5px 0px; font-size: var(--fs); }
.footer_cnt p{font-size: var(--fs); }
.footer_middle{display: flex; gap: 20px; justify-content: space-between }
.footer_middle .colltxt{margin-top: 60px;}
.footer_middle h4{font-size: var(--fn);  }
.footer_middle .m04 {width: 150px; margin: 80px 0px 0px 10px}
.footer_logo img{display: block; width: 300px; }
.footer_bottom{display: flex; justify-content: space-between; padding: 15px 0px; }
.footer_bottom .socialnet_cnt{display: flex; gap: 10px; }
.footer_bottom .socialnet_cnt .icons{font-size: 30px; }
.payment_cnt{display: flex; gap:15px; }
.payment_cnt li{list-style: none; }
.footer_cnt .footer_copyright{  border-top: solid 1px #DBDCDC;justify-content: space-between }
.footer_copyright .copy_rightBox{gap: 20px; text-decoration: underline;}



/* CATALOG */
.kataloski_prikaz_proizvoda{width:90%; }
.kataloski_prikaz_proizvoda > ul {display: flex; flex-wrap: wrap; justify-content: space-around; }
.kataloski_prikaz_proizvoda > ul > li{border:1px solid #666; width:23%; box-sizing: border-box; margin-bottom: 1em; position: relative; }
.catalogueThumbLink{display: block; width:100%; height: 180px; padding: 30px 0 0 0 }
.catalogueThumbLink img{display: block; width:100%; padding: 6px; box-sizing: border-box; }
.catalogueItemText{color:#444; padding: 8px; line-height: 1em; height:100px; }
.catalogueItemText p{position: absolute; bottom:24px; right:6px; font-size:var(--fs); border-bottom:1px solid #444; padding: 0; }
.catalogueItemText h3{color:var(--main); font-size:var(--fn); position: absolute; bottom: -16px;right:6px }

/*product page*/

/*navigacija kataloga*/
.CatTrackNav{display: none; width:240px; margin-top:120px }
.CatTrackNav ul{background: red; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.CatTrackNav ul li{list-style: none; color:#ffff; padding: 10px; }
.CatTrackNav ul li a{color: inherit; }

/* KATEGORIJE */
.katalog_prikaz{padding: 30px; }
.naslov_kategorije{padding: 0 0 20px 0; }
.kategorije ul{display: flex; flex-wrap: wrap; gap:20px; }
.kategorije ul li{list-style: none; width:230px; border:1px solid var(--main); padding: 10px }

/* PROIZVOD */
.oblast_kataloga {display: flex; border: solid 1px #555; margin: auto; width: 90%; }
.filterOuter{_border: solid 1px var(--main); width: 200px; color: #fff; background: var(--main); padding: 10px; flex-basis: 240px; min-width:200px; }
.filterOuter fieldset ul{display: block!important; }
.filterOuter fieldset ul li{list-style: none; padding: 3px 10px }
.katalog_navigacija{display: none; min-width:230px; }
.katalog_prikaz .proizvodi{list-style: none; }
.katalog_prikaz .proizvod{padding: 15px; _display: flex; position: relative; }
.katalog_prikaz .proizvod .prodSlika {width: 400px; position: absolute; top: 0px; }
.katalog_prikaz .proizvod .prodSlika img{display: block; width: 100%; }
.akcijskiProizvod{position: absolute; top:0;right:0; width:36px; border-radius: 50%; padding: 4px; box-sizing: border-box }
.productPrice{position: absolute; top:10px; background: #394; padding: 4px 10px; display: block; color:#eee; font-weight:bold; font-size:var(--fn) }
.akcijskiProizvod img{display: block; border-radius: 50%; }
.boksNalsov{display: block; position: absolute; top: 0px; left: 400px; background: red; }
.proizvodjac{}
.compareProd{}
.prodOpis{position: absolute; width: 550px; right: 0px; }
.prodMoreDescription {margin-top: 300px; }
.naslovTabelaArtikala{}
.tableOfAricles_container{}
.msg_napomena{grid-area: info; }
.articleTable{width: 80%; border-collapse: collapse; text-align: left; }
.articleTable th{padding: 10px; }
.articleTable td{padding: 10px; }
.articleTable tr{border: dotted 1px #555; }
.naslovTabelaArtikala {font-size: var(--xs); display: block; width: 80%; text-align: right; }

/* REGISTRATOR */
#myaccount_style{background: var(--main); padding: 40px }
#myaccount_style h1{color:#fff; padding: 10px 0 20px 0; }
.contentTABLE{width:960px; margin: auto; }
.registracijaCnt{display: flex; flex-wrap: wrap }
.registracijaCnt .imate_nalog_dugme{min-width:100%; display: none }
.registracijaCnt div{width:320px; padding: 20px; box-sizing: border-box; }
#ulogujte_se{background: #fff; border-radius: 6px; margin: auto; }
.menuArea{vertical-align: top; list-style: none }
.menuArea li{list-style: none; color:#eee; }
.menuArea li a{color: inherit; padding: 6px 10px 20px 10px; display: block; box-sizing: border-box; }
.registracijaCnt form input{padding: 32px 10px 10px 12px; border: 1px solid var(--main); border-radius: 6px; min-width: 100%; box-sizing: border-box; }
.registracijaCnt form input[type=submit]{background: var(--dark_green); padding: 20px; max-width:220px; min-width: 200px; color:#eee; font-size:var(--fn); margin:10px auto; display: block; }
.registracijaCnt form label{position: absolute; font-size:var(--fs); top:6px;left:10px; }
.registracijaCnt form p{position: relative }
.registracijaCnt .inline_radio{display: flex; justify-content: center; align-items: center; padding: 10px; }
.registracijaCnt #mail_list{min-width: unset; width: 24px;height: 24px; padding: 0; display: block; }
.registracijaCnt #prijava_mail_list{min-width: unset; padding: 0 0 0 20px; position: relative; top:unset; left: unset; font-size:var(--fn); }
.myAcc_container{background: #fff; width: 90%; padding: 20px; box-sizing: border-box; margin: 10px 0; }
.myAcc_container span, .myAcc_container label{display: block; padding: 10px; font-size:var(--fn) }
.myAcc_container input{display: block; padding: 10px }
.myAcc_container input[type=submit]{color:var(--main); border:1px solid var(--main); background: none; padding: 12px 24px; border-radius:20px; font-size:var(--fn); text-transform: uppercase; min-width:180px; }