body{
font-family:Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
overflow-y: hidden;
  overflow-x: hidden;
width:100vw;
height:100vh;
display: flex;
position:relative;
position:fixed;
 }
 


::-webkit-scrollbar {
  width: 6px;
  height:20px;
}

/* Track */
::-webkit-scrollbar-track {
 background:rgba(255,255,2550,0.1);
}


/* Handle */
::-webkit-scrollbar-thumb {
  background: #FFFFFF;
  border-radius:5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #D1D3D6;
}


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}


#bg{
 
left:0px;
top:0px;
width:100%;
height:100%;
background: linear-gradient(-122deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
 background-blend-mode: screen;

overflow-y: hidden;
  overflow-x: hidden;
width:100vw;
height:100vh;
display: flex;

 }


#forma{
position:absolute;
width:100%;
height:100vh;
left:0px;
transform-style: preserve-3d;

}


#navigacija{
position:absolute;
width:350px;
height:100vh;
 right:0px;
color:#FFFFFF;
z-index:9999999999999;
}


#logo{
position:absolute;
top:10px;
left:10px;
width:210px;
padding:10px;
z-index:9999999;

}



#logo_confirm{
top:10px;
left:10px;
width:120px;
padding:10px;
z-index:9999999;
display:inline-block;
text-align:center;

}



#door_scene{
position:absolute;
width:300px;
height:600px;
left:calc(50% - 150px);
top:calc(50% - 300px);
border:#999999 solid 1px;
transform-style: preserve-3d;

}

#door{
position:absolute;
top:0px;
left:0px;
height:100%;
transform-style: preserve-3d;


}


 
 

 

#price_box{
position:absolute;
right:420px;
bottom:160px;
width:200px;
height:60px;
text-align:right;
}

.price_1{
color:#A4A4A4;
font-weight:300;
font-size:14px;
height:22px;
}

.price_2{
color:#000000;
font-weight:600;
font-size:26px;
height:32px;
}

.price_3{
color:#000000;
font-weight:300;
font-size:12px;
height:24px;
}



#name_box{
position:absolute;
left:40px;
bottom:60px;
width:400px;
height:60px;
text-align:left;
}







#sec_nav_box{
position:absolute;
 
border-radius:30px;
width:calc(100% - 50px);
height:80%;
padding:10px;
color:#000000;
top:100px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
}

#nav_col_fld{
position:relative;
width:100%;
height:50px;
margin-bottom:10px;
border-radius: 80px;
backdrop-filter: blur(14px);
color:#222222;
 transition:1s;
 
}


#nav_col_fld:hover{
transform:scale(1.06);
transition:1s;
}



#nav_col_icon{
position:absolute;
width:30px;
height:30px;
 
border-radius: 80px 80px 80px 0px;
right:10px;
top:10px;
border:#C3C3C3 solid 1px;
}



#nav_col_name{
position:absolute;
width:calc(100% - 50px);
height:36px;
left:10px;
top:20px;
font-size:12px;
}

.col_activ{
background:#333333 !important; 
color:#ffffff !important;}



#nav_col_fld:hover{
opacity:0.8;
}


#nav_col_list{
position:absolute;
width:calc(100% - 40px);
top:80px;
left:20px;
height:calc(100% - 120px);
overflow-y:scroll;
overflow-x: hidden;
padding-right:10px;


}



#nav_title4{
width:calc(100% - 20px);
top:40px;
left:20px;
height:40px;
font-size:14px;
padding-top:20px;
margin-bottom:0px;


}


#nav_title{
position:absolute;
width:calc(100% - 20px);
top:40px;
left:20px;
height:40px;
font-size:12px;


}



 
#main_nav{
position:absolute;
width:calc(100% - 50px);
height:50px;
padding:10px;
color:#000000;
top:20px;
border-radius: 80px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
background:rgba(255,255,255,0.3);
background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
 }




#main_nav_item{
width:30px;
height:30px;
background:#FFFFFF;
border-radius:50px;
display:inline-block;
vertical-align:top;
padding:5px;
margin:3px;
}


#main_nav_item2{
width:30px;
height:30px;
}

#main_nav_item:hover{
background:#FFFFFF;
 -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}


.main_nav_item_act{

 -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
	background:#AB1826;
}



.nav_color{display:none;}




#nav_hand_box{
margin-bottom:3px;
border-bottom:rgba(0,0,0,0.04) groove 3px; 
 }




#nav_hand_img{
top:10px;
left:10px;
height:140px;
display:inline-block;
vertical-align:top;

}




#nav_hand_sizes{
top:10px;
left:90px;
width:calc(100% - 100px);
display:inline-block;
vertical-align:top;
 }






#nav_hand_size{
 
top:10px;
left:30px;
height:18px;
line-height:18px;
width:100%;
margin-bottom:2px;
font-size:12px;

}





#hand_check:hover{
background:#3B3B3B;
}

.hand_check_act{
background:#3B3B3B !important;
}


#hand_check{
position:absolute;
left:56px;
width:13px;
height:13px;
border-radius:30px;
border:#787878 solid 1px;
}




#nav_hand_name{
position:absolute;
left:80px;
width:calc(100% - 40px);
height:14px;

}

 

#left_nav_vert{
position:absolute;
width:60px;
left:20px;
top:50%;
vertical-align:middle;
position: absolute;
transform: translate(0%, -50%);
}


#modeli_box{
width:55px;
padding:3px;
color:#000000;
border-radius: 80px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
z-index:999999999999;
margin-bottom:5px;

 }
 
 
 
#open_door_box{
position:absolute;
width:55px;
 
padding:3px;
color:#000000;
border-radius: 80px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
z-index:999999999999;
 
 }
 
 
 
#prikaz_box{
width:54px;
 padding:3px;
color:#000000;

border-radius: 80px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
z-index:999999999999;
 margin-bottom:5px;
 }


#prikaz{
width:43px;
height:43px;
margin:6px;
border-radius:60px;
border:#E8E8E8 solid 1px;
 }



#prikaz:hover{
opacity:0.8;
border:#666666 solid 1px;

 }

#prikaz2{
width:43px;
 
margin:2px;
 }





#sec_nav_dim{
position:absolute;
border-radius:20px;
width:calc(100% - 50px);
padding:10px;
 color:#000000;
top:100px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
 height:500px;
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);

}


#nav_dim_list{
position:absolute;
width:calc(100% - 40px);
top:80px;
left:20px;
padding-right:10px;
overflow: auto;
font-size:12px;
text-align:center;
}



#dim_fld{
width:250px;
height:30px;
background:none;
border-radius:60px;
border:none;
background:rgba(255,255,255,0.8);
text-align:center;
padding:5px;
margin:5px;
}


#dim_fld:hover{
background:rgba(0,0,0,0.6);
color:#FFFFFF;
}




#nav_typ_icon{
position:absolute;
width:30px;
height:30px;
right:40px;
top:5px;
 }




#nav_product_box{
position:relative;
width:100%;
height:160px;
margin-bottom:10px;
backdrop-filter: blur(14px);
border-radius:20px;
color:#222222;
transition:1s;
text-align:center;
}


#nav_prod_name{
position:absolute;
width:calc(100% - 20px);
height:30px;
left:10px;
bottom:0px;
font-size:12px;
text-align:center;
}





#nav_typ_fld{
position:relative;
width:100%;
height:50px;
margin-bottom:10px;
backdrop-filter: blur(14px);
border-radius:80px;
color:#222222;
transition:1s;
}


.active_box{background:#333333 !important; color:#FFFFFF !important; }

#typ_nav{
height:38px;
-webkit-filter: invert(100%); 
filter: invert(100%);
}


#nav_product{
position:200px;
height:120px;
display:inline-block;
text-align:center;
padding:5px;

 
}
 


#nav_typ_fld:hover{
transform:scale(1.06);
transition:1s;
}




#glass_nav{
height:38px;
width:38px;
border:#666666 solid 1px;
 
}


#konst_nav{
height:40px;
width:40px;
   -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
 
}






#chekc_nav{
position:absolute;
right:10px;
top:7px;
height:36px;
width:36px;
}






#sec_access_1{
position:absolute;
border-radius:20px;
width:calc(100% - 50px);
height:150px;
padding:5px;
color:#000000;
top:100px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
white-space: nowrap;
}


.acc_poz1{top:100px !important; }
.acc_poz2{top:270px !important; }
.acc_poz3{top:440px !important; }
.acc_poz4{top:610px !important; }



#nav_access_list{
position:absolute;
width:calc(100% - 40px);
top:30px;
left:15px;
padding-right:10px;
overflow: auto;
font-size:12px;
text-align:center;
 }

#nav_access_list2{
position:absolute;
width:calc(100% - 40px);
top:30px;
left:15px;
padding-right:10px;
overflow: auto;
font-size:12px;
text-align:center;
 }
 
 #nav_access_list3{
position:absolute;
width:calc(100% - 40px);
top:30px;
left:15px;
padding-right:10px;
overflow: auto;
font-size:12px;
text-align:center;
 }
 
 #nav_access_list4{
position:absolute;
width:calc(100% - 40px);
top:30px;
left:15px;
padding-right:10px;
overflow: auto;
font-size:12px;
text-align:center;
 }


#access_box{
position:relative;
width:130px;
height:100px;
margin-bottom:10px;
color:#222222;
transition:1s;
display:inline-block;
margin:5px;
text-align:center;


}

#access_col_name{
position:absolute;
width:calc(100% - 00px);
height:20px;
left:0px;
bottom:2px;
text-align:center;
font-size:12px;
 white-space: normal;
}

#access_col_img{
 width:50px;
height:50px;
text-align:center;
}


#nav_title_acc{
position:absolute;
width:calc(100% - 20px);
top:16px;
left:20px;
height:30px;
font-size:12px;
}




 




/* width */
::-webkit-scrollbar {
  width: 10px;
  height:10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}











#door_design_box{
position:absolute;
width:calc(100% - 40px);
height:calc(100% - 40px);
left:20px;
top:20px;
color:#000000;
border-radius: 40px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
z-index:999999999999;
 text-align:center;
 }




#door_design_list{
position:absolute;
width:calc(100% - 40px);
height:calc(100% - 120px);
left:20px;
top:140px;
color:#000000;
 overflow-y:scroll;
overflow-x: hidden;
z-index:999999999999;
display:inline-block;
 
 }




#serija{
width:100%;
height:36px;
line-height:36px;
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
color:#333333;
font-size:16px;
 

}


#vrata{
width:300px;
height:240px;
display:inline-block;
vertical-align:top;
padding:5px;
margin:10px;
font-size:13px;
text-align:center; 
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
border-radius:30px;
}


#model{width:260px;}
#model:hover{opacity:0.8;}



#nav_title_ral{
width:100px;
top:40px;
left:20px;
height:30px;
line-height:30px;
font-size:12px;
text-align:center;
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
border-radius:60px;
display:inline-block;
text-decoration:none;
color:#000000;
}


.nav_title_ral_act{
background:#333333 !important;
color:#FFFFFF !important;
}



#col_tabs{
text-align:center;
margin-top:14px;
}





 
::-moz-selection { /* Code for Firefox */
 
  background:rgba(0,0,0,0);
}

::selection {

  background:rgba(0,0,0,0);
}
 






#checked{
position:absolute;
width:22px;
height:22px;
left:calc(50% - 11px);
top:16px;


}



 

#nav_acc_box{
position:relative;
width:120px;
height:120px;
margin:5px;
backdrop-filter: blur(14px);
border-radius:10px;
color:#222222;
transition:1s;
text-align:center;
display:inline-block;
vertical-align:top;

}




#nav_acc{
width:100px;
height:84px;
display:inline-block;
text-align:center;
padding:4px;
border-radius:10px;
padding-bottom:10px;
 
}
 

#nav_acc_name{
position:absolute;
width:calc(100% - 20px);
height:30px;
left:10px;
bottom:0px;
font-size:12px;
text-align:center;
margin-top:8px;
}





#checked_acc{
position:absolute;
width:22px;
height:22px;
left:calc(50% - 11px);
top:34px;
}




#close_menu{
position:absolute;
height:33px;
top:20px;
right:24px;
z-index:9999999999;
}


#login_box{
position:absolute;
width:500px;
left:calc(50% - 250px);
top:200px;
 


}

#order_box{
position:absolute;
width:500px;
left:calc(50% - 250px);
top:100px;
 


}




#qrbox{
width:100%;
height:50px;
color:#000000;
border-radius: 40px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
margin-bottom:20px;
line-height:50px;
font-size:14px;
border:none;
text-align:center;
}


#qrbox2{
width:100%;
height:150px;
color:#000000;
border-radius: 40px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
 background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
margin-bottom:20px;
line-height:50px;
font-size:14px;
border:none;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}




#qrbox_btn{
width:100%;
height:50px;
color:#FFFFFF;
border-radius: 40px;
background:#373E48;
margin-bottom:20px;
line-height:50px;
font-size:14px;
border:none;
text-align:center;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
}



#qrbox_btn:hover{
background:#333333;
}


#flag{
width:24px;
margin:2px;

}


#flag_box{
position:absolute;
width:100px;
top:90px;
left:20px;
 
 }
 
 
 
 
 
#add_cart_btn{
width:200px;
height:34px;
line-height:34px;
text-align:center;
background: #373E48;
color:#FFFFFF;
margin-top:20px;
padding:4px;
display:inline-block;
border-radius:60px;
font-size:13px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
border:#FFFFFF solid 1px;
} 
 
 
 
  
#add_cart_btn:hover{
background:#333333;
} 
 

 
 
 #user_box{
position:absolute;
width:220px;
height:24px;
padding:10px;
color:#000000;
top:20px;
right:370px;
border-radius: 80px;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
background:rgba(255,255,255,0.3);
backdrop-filter: blur(14px);
 }
 
 
  
.user_box_logout{
width:25px !important;
 }
 
 
  
 #user_title1{
position:absolute;
width:90%;
left:20px;
top:6px;
height:20px;
font-size:12px;
 }
 
  #user_title2{
position:absolute;
width:90%;
left:20px;
top:23px;
height:20px;
font-size:13px;
font-weight:500;
 }
 
 

 
 
#user_btn_1{
position:absolute;
right:6px;
top:6px;
width:30px;
height:30px;
border-radius:60px;
border:#E8E8E8 solid 1px;
 }

 #user_btn_2{
position:absolute;
right:44px;
top:6px;
width:30px;
height:30px;
border-radius:60px;
border:#E8E8E8 solid 1px;
 }
 
 
#user_btn_1:hover{opacity:0.8;  border:#333333 solid 1px; }
#user_btn_2:hover{opacity:0.8; border:#333333 solid 1px;}

















@media only screen and (max-width: 1000px) {

#price_box{
position:absolute;
left:40px;
top:200px;
width:200px;
height:60px;
text-align:left;
}

 

#name_box{
position:absolute;
left:40px;
top:120px;
width:400px;
height:60px;
text-align:left;
}







}