/*
NFPPT – mobilní a tabletová navigace
Nahrajte jako: /user/documents/upload/nfppt-mobile-menu.css
*/

@media(max-width:1199px){

#header .navigation-window{
  --menu-dark:#20382e;
  --menu-green:#6abda6;
  --menu-green-dark:#4fae94;
  --menu-mint:#e7f4ef;
  --menu-text:#3f4a44;
  position:relative!important;
  border:0!important;
  background:
    radial-gradient(520px 340px at 100% 0%,rgba(106,189,166,.20),transparent 70%),
    radial-gradient(460px 320px at 0% 100%,rgba(126,210,232,.13),transparent 72%),
    rgba(255,255,255,.95)!important;
  box-shadow:-18px 0 60px rgba(32,56,46,.20)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(32,56,46,.25) transparent!important
}

#header .navigation-window:before{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:4px!important;
  background:linear-gradient(90deg,#6abda6,#9dd9ca)!important
}

#header .navigation-window::-webkit-scrollbar{
  width:6px!important
}

#header .navigation-window::-webkit-scrollbar-thumb{
  background:rgba(32,56,46,.22)!important
}

#header .navigation-window :is(.navigation-in,.navigation-window-in){
  background:transparent!important
}

#header .navigation-window .navigation-in{
  display:block!important;
  padding:68px 18px 28px!important
}

#header .navigation-window .menu-level-1{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important
}

#header .navigation-window .menu-level-1>li{
  position:relative!important;
  display:block!important;
  width:100%!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important
}

#header .navigation-window .menu-level-1>li>a{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:56px!important;
  margin:0!important;
  padding:16px 54px 16px 18px!important;
  border:1px solid rgba(32,56,46,.06)!important;
  border-left:4px solid transparent!important;
  border-radius:0!important;
  background:rgba(255,255,255,.72)!important;
  color:var(--menu-dark)!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:700!important;
  text-decoration:none!important;
  box-shadow:0 12px 28px rgba(32,56,46,.065)!important;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease!important
}

#header .navigation-window .menu-level-1>li:is(:hover,.active,.exp)>a{
  border-left-color:var(--menu-green)!important;
  background:linear-gradient(90deg,rgba(231,244,239,.98),rgba(255,255,255,.88))!important;
  color:var(--menu-green-dark)!important;
  transform:translateX(2px)!important
}

#header .navigation-window .menu-level-1>li:last-child{
  margin-bottom:0!important
}

#header .navigation-window .menu-level-2{
  position:static!important;
  width:calc(100% - 18px)!important;
  min-width:0!important;
  margin:8px 0 4px 18px!important;
  padding:6px 0 6px 14px!important;
  border:0!important;
  border-left:2px solid rgba(106,189,166,.38)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}

#header .navigation-window .menu-level-2 li{
  width:100%!important;
  margin:0 0 4px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important
}

#header .navigation-window .menu-level-2 a{
  display:block!important;
  width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:11px 14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--menu-text)!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:600!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:background .18s ease,color .18s ease,padding .18s ease!important
}

#header .navigation-window .menu-level-2 a:hover{
  padding-left:18px!important;
  background:rgba(231,244,239,.88)!important;
  color:var(--menu-green-dark)!important
}

#header .navigation-window :is(
  .submenu-arrow,
  .toggle-submenu,
  .menu-item-arrow,
  .menu-level-1>li>a>.caret
){
  position:absolute!important;
  z-index:2!important;
  top:12px!important;
  right:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:var(--menu-mint)!important;
  color:var(--menu-dark)!important;
  box-shadow:none!important
}

#header .navigation-window :is(
  .submenu-arrow,
  .toggle-submenu,
  .menu-item-arrow
) :is(svg,svg *){
  stroke:currentColor!important;
  color:currentColor!important
}

#header .navigation-window .menu-level-1>li.exp :is(
  .submenu-arrow,
  .toggle-submenu,
  .menu-item-arrow
){
  background:var(--menu-green)!important;
  color:#fff!important
}

#header .navigation-window :is(
  .navigation-close,
  .navigation-close-button,
  [data-testid=closeNavigation],
  [data-testid=closeMenu],
  .close
){
  position:absolute!important;
  z-index:5!important;
  top:14px!important;
  right:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:var(--menu-mint)!important;
  color:var(--menu-dark)!important;
  box-shadow:none!important;
  transition:background .2s ease,color .2s ease!important
}

#header .navigation-window :is(
  .navigation-close,
  .navigation-close-button,
  [data-testid=closeNavigation],
  [data-testid=closeMenu],
  .close
):hover{
  background:var(--menu-dark)!important;
  color:#fff!important
}

#header .navigation-window :is(
  .navigation-close,
  .navigation-close-button,
  [data-testid=closeNavigation],
  [data-testid=closeMenu],
  .close
) :is(svg,svg *){
  stroke:currentColor!important;
  color:currentColor!important
}

#header .navigation-window :is(
  .menu-helper,
  .user-action,
  .customer-login,
  .navigation-login
){
  margin:18px 18px 0!important;
  padding:16px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(32,56,46,.12)!important;
  background:transparent!important
}

#header .navigation-window a:is(
  [href*="login"],
  [href*="prihlas"],
  [href*="klient"]
){
  display:flex!important;
  align-items:center!important;
  min-height:48px!important;
  padding:13px 18px!important;
  border:0!important;
  border-left:4px solid var(--menu-green)!important;
  border-radius:0!important;
  background:rgba(231,244,239,.88)!important;
  color:var(--menu-dark)!important;
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:700!important;
  text-decoration:none!important
}

}

@media(min-width:768px) and (max-width:1199px){

#header .navigation-window .navigation-in{
  padding:76px 24px 34px!important
}

#header .navigation-window .menu-level-1>li>a{
  min-height:60px!important;
  padding:17px 58px 17px 20px!important;
  font-size:17px!important
}

#header .navigation-window .menu-level-2{
  margin-left:22px!important;
  padding-left:18px!important
}

}

@media(max-width:767px){

#header .navigation-window .navigation-in{
  padding:64px 14px 24px!important
}

#header .navigation-window .menu-level-1>li{
  margin-bottom:8px!important
}

#header .navigation-window .menu-level-1>li>a{
  min-height:54px!important;
  padding:15px 50px 15px 16px!important;
  font-size:15px!important
}

#header .navigation-window .menu-level-2{
  width:calc(100% - 14px)!important;
  margin-left:14px!important;
  padding-left:12px!important
}

#header .navigation-window .menu-level-2 a{
  min-height:40px!important;
  padding:10px 12px!important;
  font-size:13px!important
}

#header .navigation-window :is(
  .submenu-arrow,
  .toggle-submenu,
  .menu-item-arrow,
  .menu-level-1>li>a>.caret
){
  top:10px!important;
  right:10px!important;
  width:32px!important;
  height:32px!important
}

#header .navigation-window :is(
  .navigation-close,
  .navigation-close-button,
  [data-testid=closeNavigation],
  [data-testid=closeMenu],
  .close
){
  top:11px!important;
  right:11px!important;
  width:40px!important;
  height:40px!important
}

}

@media(prefers-reduced-motion:reduce){
#header .navigation-window *{
  transition:none!important
}
}