/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*#region Globální nastavení vzhledu modulu */
.menu-items-template-vokno {
    list-style: none;
}

/* Init - schovej všechny submenu */
.menu-items-template-vokno:not(.level-base) {
    display: none;
}

.menu-items-template-vokno li {
    font-weight: 600;
    position: relative;
}

.menu-items-template-vokno a {
    white-space: unset;
    color: #fff;
}

.menu-items-template-vokno li a {

    white-space: normal;
    position: relative;
    display: block;
    column-gap: 10px;
    align-items: center;
    text-decoration: none;
}

.menu-items-template-vokno .menu_items--ul {
    padding-left: 0;
}

.menu-items-template-vokno li:not(.menu-level-0) .default-no-image {
    display: none;
}

.menu-items-template-vokno li > a::after {
    position: absolute;
    z-index: 2;
}
.menu-items-template-vokno li.menu-level-1 > a::after {
    content: "→";
    color: var(--g-color-2);
}
.menu-items-template-vokno li.menu-level-2 > a::after,
.menu-items-template-vokno li.menu-level-3 > a::after {
    content: "○";
    font-size: 14px;
    color: var(--g-color-1);
}

.menu-items-template-vokno .category-icon {
    max-width: 40px;
    min-height: 40px;
    object-fit: contain;
    -o-object-fit: contain;
    object-position: center;
    -o-object-position: center;
}

/*#endregion Globální nastavení vzhledu modulu */

/* Menu level Base */

.menu-items-template-vokno.level-base {
    padding: var(--menu-items-template-2-menu-level-base-padding);
}

.mobile-menu .menu-items-template-vokno.level-base {
    padding: var(--MOBILE--menu-items-template-2-menu-level-base-padding);
}

.user-menu .menu-items-template-vokno.level-base {
    padding: var(--USER--menu-items-template-2-menu-level-base-padding);
}

.menu-items-template-vokno.level-base > li > a::after {
    display: var(--menu-items-template-2-menu-level-base-dot-display);
    background: var(--menu-items-template-2-menu-level-base-dot-color);
    left: var(--menu-items-template-2-menu-level-base-dot-left);
    width: var(--menu-items-template-2-menu-level-base-dot-size);
    height: var(--menu-items-template-2-menu-level-base-dot-size);
    top: calc(50% - calc(var(--menu-items-template-2-menu-level-base-dot-size) / 2));
}


/* Menu level 0 */
.menu-items-template-vokno li.menu-level-0 {
    border-top: var(--menu-items-template-2-menu-item-border);
}

.menu-items-template-vokno .menu-level-0 > a {
    line-height: 1;
    font-size: var(--menu-items-template-2-menu-level-0-font-size);
    color: var(--menu-items-template-2-menu-level-0-item-color);
    font-weight: var(--menu-items-template-2-menu-level-0-item-weight);
    padding: var(--menu-items-template-2-menu-level-0-padding);
}

.mobile-menu .menu-items-template-vokno .menu-level-0 > a {
    font-size: var(--MOBILE--menu-items-template-2-menu-level-0-font-size);
    padding: var(--MOBILE--menu-items-template-2-menu-level-0-padding);
}

.user-menu .menu-items-template-vokno .menu-level-0 > a {
    font-size: var(--USER--menu-items-template-2-menu-level-0-font-size);
    padding: var(--USER--menu-items-template-2-menu-level-0-padding);
    color: var(--USER--menu-items-template-2-menu-level-0-item-color);
}

.user-menu .user-menu-protected .menu-items-template-vokno .menu-level-0 > a {
    color: var(--USER--menu-protected-items-template-2-menu-level-0-item-color);
}

.user-menu .user-menu-nav .menu-items-template-vokno .menu-level-0 > a {
    color: var(--USER--menu-nav-items-template-2-menu-level-0-item-color);
}

.menu-items-template-vokno .menu-level-0 > .menu_items--ul {
    padding-bottom: 10px;
}

.menu-items-template-vokno li.menu-level-0 > a::after {
    display: var(--menu-items-template-2-menu-level-0-dot-display);
    background: var(--menu-items-template-2-menu-level-0-dot-color);
    left: var(--menu-items-template-2-menu-level-0-dot-left);
    width: var(--menu-items-template-2-menu-level-0-dot-size);
    height: var(--menu-items-template-2-menu-level-0-dot-size);
    top: calc(50% - calc(var(--menu-items-template-2-menu-level-0-dot-size) / 2));
}

/* Menu level 1 */

.menu-items-template-vokno .menu-level-1 > a {
    line-height: 1.2;
    font-size: var(--menu-items-template-2-menu-level-1-font-size);
    color: var(--menu-items-template-2-menu-level-1-item-color);
    font-weight: var(--menu-items-template-2-menu-level-1-item-weight);
    padding: var(--menu-items-template-2-menu-level-1-padding);
    text-decoration: none;
}

.mobile-menu .menu-items-template-vokno .menu-level-1 > a {
    font-size: var(--MOBILE--menu-items-template-2-menu-level-1-font-size);
    padding: var(--MOBILE--menu-items-template-2-menu-level-1-padding);
}

.user-menu .menu-items-template-vokno .menu-level-1 > a {
    font-size: var(--USER--menu-items-template-2-menu-level-1-font-size);
    font-weight: var(--USER--menu-items-template-2-menu-level-1-item-weight);
    padding: var(--USER--menu-items-template-2-menu-level-1-padding);
}

.menu-items-template-vokno li.menu-level-1 > a::after {
    /*display: var(--menu-items-template-2-menu-level-1-dot-display);*/
    /*background: var(--menu-items-template-2-menu-level-1-dot-color);*/
    left: var(--menu-items-template-2-menu-level-1-dot-left);
    /*width: var(--menu-items-template-2-menu-level-1-dot-size);*/
    /*height: var(--menu-items-template-2-menu-level-1-dot-size);*/
    top: calc(50% - 8px);
}

.mobile-menu .menu-items-template-vokno li.menu-level-1 > a::after {
    left: var(--MOBILE--menu-items-template-2-menu-level-1-dot-left);
}

.user-menu .menu-items-template-vokno li.menu-level-1 > a::after {
    left: var(--USER--menu-items-template-2-menu-level-1-dot-left);
}

.menu-items-template-vokno .menu-level-1 > .menu_items--ul {
    padding-bottom: 10px;
}


/* Menu level 2 */

.menu-items-template-vokno .menu-level-2 > a {
    line-height: 1;
    font-size: var(--menu-items-template-2-menu-level-2-font-size);
    color: var(--menu-items-template-2-menu-level-2-item-color);
    font-weight: var(--menu-items-template-2-menu-level-2-item-weight);
    padding: var(--menu-items-template-2-menu-level-2-padding);
}

.mobile-menu .menu-items-template-vokno .menu-level-2 > a {
    font-size: var(--MOBILE--menu-items-template-2-menu-level-2-font-size);
    padding: var(--MOBILE--menu-items-template-2-menu-level-2-padding);
}

.user-menu .menu-items-template-vokno .menu-level-2 > a {
    font-size: var(--USER--menu-items-template-2-menu-level-2-font-size);
    font-weight: var(--USER--menu-items-template-2-menu-level-2-item-weight);
    padding: var(--USER--menu-items-template-2-menu-level-2-padding);
}

.menu-items-template-vokno li.menu-level-2 > a::after {
    /*display: var(--menu-items-template-2-menu-level-2-dot-display);*/
    /*background: var(--menu-items-template-2-menu-level-2-dot-color);*/
    left: var(--menu-items-template-2-menu-level-2-dot-left);
    /*width: var(--menu-items-template-2-menu-level-2-dot-size);*/
    /*height: var(--menu-items-template-2-menu-level-2-dot-size);*/
    top: calc(50% - 6px);
}

.mobile-menu .menu-items-template-vokno li.menu-level-2 > a::after {
    left: var(--MOBILE--menu-items-template-2-menu-level-2-dot-left);
}

.user-menu .menu-items-template-vokno li.menu-level-2 > a::after {
    left: var(--USER--menu-items-template-2-menu-level-2-dot-left);
}

.menu-items-template-vokno .menu-level-2 > .menu_items--ul {
    padding-bottom: 6px;
}

/* Menu level 3 */

.menu-items-template-vokno .menu-level-3 > a {
    line-height: 1;
    font-size: var(--menu-items-template-2-menu-level-3-font-size);
    color: var(--menu-items-template-2-menu-level-3-item-color);
    font-weight: var(--menu-items-template-2-menu-level-3-item-weight);
    padding: var(--menu-items-template-2-menu-level-3-padding);
}

.mobile-menu .menu-items-template-vokno .menu-level-3 > a {
    font-size: var(--MOBILE--menu-items-template-2-menu-level-3-font-size);
    padding: var(--MOBILE--menu-items-template-2-menu-level-3-padding);
}

.user-menu .menu-items-template-vokno .menu-level-3 > a {
    font-size: var(--USER--menu-items-template-2-menu-level-3-font-size);
    font-weight: var(--USER--menu-items-template-2-menu-level-3-item-weight);
    padding: var(--USER--menu-items-template-2-menu-level-3-padding);
}

.menu-items-template-vokno li.menu-level-3 > a::after {
    /*display: var(--menu-items-template-2-menu-level-3-dot-display);*/
    /*background: var(--menu-items-template-2-menu-level-3-dot-color);*/
    left: var(--menu-items-template-2-menu-level-3-dot-left);
    /*width: var(--menu-items-template-2-menu-level-3-dot-size);*/
    /*height: var(--menu-items-template-2-menu-level-3-dot-size);*/
    top: calc(50% - calc(var(--menu-items-template-2-menu-level-3-dot-size) / 2));
}

.mobile-menu .menu-items-template-vokno li.menu-level-3 > a::after {
    left: var(--MOBILE--menu-items-template-2-menu-level-3-dot-left);
}

.user-menu .menu-items-template-vokno li.menu-level-3 > a::after {
    left: var(--USER--menu-items-template-2-menu-level-3-dot-left);
}

/*#region SWITCH - tlačítka pro rozevření a zavření */

.menu-items-template-vokno .switch {
    position: absolute;
    background: transparent;
    color: white;
    width: 40px;
    cursor: pointer;
    top: 0;
    right: 1px;
    overflow: hidden;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 7px;
}

.menu-items-template-vokno .switch .switch-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    pointer-events: none;
}

.menu-items-template-vokno .switch.nav-hidden {
    display: none;
}

/* Switch - menu-level-0 */

.menu-items-template-vokno .menu-level-0 .switch .switch-image {
    font-size: var(--menu-items-template-2-menu-level-0-symbol-size);
    background: var(--menu-items-template-2-menu-level-0-symbol-bg-color);
}

.menu-items-template-vokno .menu-level-0 .switch .switch-image .ico-plus {
    color: var(--menu-items-template-2-menu-level-0-symbol-color-plus);
}

.menu-items-template-vokno .menu-level-0 .switch .switch-image .ico-minus {
    color: var(--menu-items-template-2-menu-level-0-symbol-color-minus);
}

.user-menu .menu-items-template-vokno .menu-level-0 .switch .switch-image {
    font-size: var(--USER--menu-items-template-2-menu-level-0-symbol-size);
    background: var(--USER--menu-items-template-2-menu-level-0-symbol-bg-color);
}

.user-menu .menu-items-template-vokno .menu-level-0 .switch .switch-image .ico-plus {
    color: var(--USER--menu-items-template-2-menu-level-0-symbol-color-plus);
}

.user-menu .menu-items-template-vokno .menu-level-0 .switch .switch-image .ico-minus {
    color: var(--USER--menu-items-template-2-menu-level-0-symbol-color-minus);
}

/* Switch - menu-level-1 */

.menu-items-template-vokno .menu-level-1 .switch .switch-image {
    font-size: var(--menu-items-template-2-menu-level-1-symbol-size);
    background: var(--menu-items-template-2-menu-level-1-symbol-bg-color);
}

.menu-items-template-vokno .menu-level-1 .switch .switch-image .ico-plus {
    color: var(--menu-items-template-2-menu-level-1-symbol-color-plus);
}

.menu-items-template-vokno .menu-level-1 .switch .switch-image .ico-minus {
    color: var(--menu-items-template-2-menu-level-1-symbol-color-minus);
}

.user-menu .menu-items-template-vokno .menu-level-1 .switch .switch-image {
    font-size: var(--USER--menu-items-template-2-menu-level-1-symbol-size);
    background: var(--USER--menu-items-template-2-menu-level-1-symbol-bg-color);
}

.user-menu .menu-items-template-vokno .menu-level-1 .switch .switch-image .ico-plus {
    color: var(--USER--menu-items-template-2-menu-level-1-symbol-color-plus);
}

.user-menu .menu-items-template-vokno .menu-level-1 .switch .switch-image .ico-minus {
    color: var(--USER--menu-items-template-2-menu-level-1-symbol-color-minus);
}

/* Switch - menu-level-2 */
.menu-items-template-vokno .menu-level-2 .switch .switch-image {
    font-size: var(--menu-items-template-2-menu-level-2-symbol-size);
    background: var(--menu-items-template-2-menu-level-2-symbol-bg-color);
}

.menu-items-template-vokno .menu-level-2 .switch .switch-image .ico-plus {
    color: var(--menu-items-template-2-menu-level-2-symbol-color-plus);
}

.menu-items-template-vokno .menu-level-2 .switch .switch-image .ico-minus {
    color: var(--menu-items-template-2-menu-level-2-symbol-color-minus);
}

.user-menu .menu-items-template-vokno .menu-level-2 .switch .switch-image {
    font-size: var(--USER--menu-items-template-2-menu-level-2-symbol-size);
    background: var(--USER--menu-items-template-2-menu-level-2-symbol-bg-color);
}

.user-menu .menu-items-template-vokno .menu-level-2 .switch .switch-image .ico-plus {
    color: var(--USER--menu-items-template-2-menu-level-2-symbol-color-plus);
}

.user-menu .menu-items-template-vokno .menu-level-2 .switch .switch-image .ico-minus {
    color: var(--USER--menu-items-template-2-menu-level-2-symbol-color-minus);
}

/* Switch - ikonky */
.menu-items-template-vokno .switch.nav-open .ico-plus,
.menu-items-template-vokno .switch.nav-static .ico-plus {
    display: none;
}

.menu-items-template-vokno .switch.nav-close .ico-minus,
.menu-items-template-vokno .switch.nav-static .ico-minus {
    display: none;
}

/*#endregion SWITCH - tlačítka pro rozevření a zavření */


/*#region Tree active */

.menu-items-template-vokno li.treeActive > ul,
.menu-items-template-vokno li.listActive > ul {
    display: block;
}

/*#endregion Tree active */

/*#region Link active */

.menu-items-template-vokno li a.linkActive {
    display: block;
    color: var(--g-color-2) !important;
    width: 100%;
}

.menu-items-template-vokno .listActive > .switch,
.menu-items-template-vokno .linkActive > .switch {
    color: white;
}

/*#endregion Link active */

/*#region Vokno extras */

.menu-items-template-vokno li.menu-level-0.treeActive > a,
.menu-items-template-vokno li.menu-level-0.listActive > a {
    color: white !important;
    font-size: 24px;
    padding-bottom: 10px;
}
.menu-items-template-vokno li.menu-level-0.treeActive > a .switch,
.menu-items-template-vokno li.menu-level-0.listActive > a .switch {
    display: none;
}
/*#endregion Vokno extras */