.layout-nav{
    width:80%;
    /*background-color: var(--primary-color);*/
    margin:auto;
    margin-top:70px;
    margin-bottom:50px;
}
.layout-nav nav{
    width:100%;
   
    display: flex;
    align-items: center;

}
button{
    font-size:100%;
    border:none;
}
body{
    margin:0;
}
.layout-nav .logo img{
    height:60px;
}

.layout-nav .left{
    display: flex;
    gap:40px;
    padding:10px;
    justify-content: space-between;
    flex-direction: column;
}
.left .logo img{
    max-width:none;
}
.layout-nav ul{
    display: flex;
    justify-content: space-between;
    width:100%;
}

.layout-nav ul{
    list-style-type: none;
}
.layout-nav .navBtnsLeft, .layout-nav .right .down{
    display: flex;
    gap:10px;
}
.layout-nav .btn{
    color:white;
    padding:3px 20px;
    background-color: var(--btns-background);
    font-size: 100%;;

    display: block;
}
.layout-nav .right .social_logos{
    display: flex;
    gap:5px;
}

.layout-nav .right .social_logos img{
    width:25px;
}
.layout-nav .right .up{
    display: flex;
    align-items: center;
    gap:30px;
    justify-content: flex-end;
}
.layout-nav .right select{
    background-color: transparent;
    border:none;
}
.layout-nav .globe_and_languages{
    display: flex;
    align-items: center;
    gap:3px;
}
.layout-nav .right option{
    background-color: transparent !important;
}

.layout-nav .right img.globe{
    width:23px;
}
.layout-nav .right {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding:10px;
}
.layout-nav .right .down{
    justify-content: flex-end;
}

.hamburger{
  width:40px;
  height:40px;
    z-index: 200;
    display: none;
    right:0;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
}

.hamburger span{
  width:22px;
  display: block;
  height:2px;
  background:#000000;
  transition:all .25s ease;
}


.layout-nav .active{
    background-color: var(--btns-active);
}
.roles-btns{
    justify-content: flex-start;
    padding:10px;
    width:80% !important;
    margin:auto;
    padding:10px;
    display: flex;
    gap:10px;
}
.roles-btns a{
    color:white;
    padding:3px 20px;
    background-color: var(--btns-background);
    font-size: 100%;

    display: block;
}


.leftMenu{
    width:250px;
    padding:20px 0 20px 20px;
    position: fixed;
    left:0;
    min-height: 100vh;
    font-size: 18px;
    transition: left 0.3s ease;
    /*background-color: var(--btns-background);*/
    background-color: var(--body-background);
    box-shadow: 4px 20px 20px rgba(0, 0, 0, 0.3);

    z-index: 199;
}

/*TO JE ZA SPREMEMBE NAVBARA!*/
.layout-nav{
    position: sticky;
    z-index: 100;
    top:0;
    background-color: var(--body-background);
    width:100%;
    margin:0;
}
.layout-nav .left{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.layout-nav .left > ul{
    justify-content: flex-start;
}
.layout-nav .right{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.leftMenuBtns{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.imageAndBtn{
    display: flex;
    min-height:50px;
    gap:20px;
    align-items: center;
    color:black;
}
.imgWrapper{
    width:40px;
    height:40px;
    border-radius: 50%;
 
    border:1px solid rgb(43, 42, 42);
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgWrapper svg{
    display: flex;
    justify-content: flex-end;
    width:60%;
    height:60%;

    fill:black;
   
}
.imgWrapper svg path{
    margin-left:auto;
    width:100%;
}


.leftMenu li{
    color:black;
}

.wrapperContent{
    display: flex;
    position: relative;
    
}
.adminContent{
    flex:1;
    width:100%;
    padding:20px;
}

.adminTopBar{
    
    height:50px;
    align-items: center;

    display: flex;
    justify-content: space-between;
  

}
.adminTopBar select{
    border:1px solid rgb(207, 207, 207);
    background-color:var(--body-background);
}
.leftMenuBtns li{

    height: 50px;
    width:100%;
    display: flex;
    align-items: center;
    padding:5px;

}
.leftMenuBtns button{
    width:100%;
}
*{
    box-sizing: border-box;
}
.leftMenuBtns ul{
    width:100%;

}
.leftMenuBtns ul{
    list-style-type: none;
}
.leftMenuBtns li:hover{
    background-color:var(--btns-active);
    transition: 0.3s;
}

.leftMenuClosed{
    left:-250px !important;
}
@media(max-width: 1100px){
    .layout-nav .navBtnsLeft{
        display: none;
    }
    .layout-nav .right .down{
        display: none;
    }
    .hamburger{
        display: flex;
    }




    .hamburger.open span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2){
        opacity:0;
    }

    .hamburger.open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .underNavSpacer{
        width:0 !important;
    }


}
@media(max-width:600px){
    .layout-nav .right .up .social_logos{
        display: none;
    }

}
@media(max-width:460px){
    .layout-nav .logo img{
        height:40px;
    }
    .layout-nav .globe_and_languages img{
        display: none;
    }
    .layout-nav .right .up{
        gap:0;
    }
}

.menuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99;           /* mora biti NAD vsebino */
  display: block;
}

.imageAndBtn, .leftMenuBtns li,.imageAndBtn svg, .imgWrapper{
    transition: 0.3s;
}
.btn:hover .imageAndBtn{
    color:white;
}

.btn:hover .imageAndBtn svg{
    fill:white;
}
.btn:hover .imgWrapper{
    border:1px solid white;
}

.navLinks,.authLinks, .guestLinks {
    display: none;
}
@media(max-width:1100px){
   .navLinks,.authLinks, .guestLinks {
        display: block;
    } 
}