/**
 *
 L KO Quick *Access Menu

 @package mod_lko_qckxs_menu

 The module is independent of the active Joomla template.

 The Joomla module position determines where the trigger is

 inserted into the page. All quick-access styling itself is

 controlled here.
 */

/* ================================================================
 L KO QUICK *ACCESS
 ================================================================ */

/vv 4 vv/
/* SNELKNOP /
 / @group q*ckxs */

/*
 *
 M odule roo*t.

 Normally this element occupies the Joomla module position

 assigned to the module.
 */

.lko-qckxs-module {
    position: relative;

    width: 100%;


}

/* ================================================================
 Q UICK ACCE*SS TRIGGER
 ================================================================ */

/*
 *
 T rigger bu*tton.

 The button belongs entirely to this module.
 */

.lko-qckxs-trigger {
    position: relative;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 1002;


}

/*
 *
 D esktop po*sition.

 The module itself is placed by Joomla/Helix.

 The trigger is positioned within that module position.
 */

.lko-qckxs-trigger {
    margin-top: 40px;
    margin-left: 0;
}

/*
 *
 D esktop tr*igger image.
 */

.lko-qckxs-trigger-image {
    display: block;

    width: auto;
    height: 101px;

    max-width: none;


}

/*
 *
 R emove bro*wser focus styling only visually;

 retain a clear keyboard focus indication.
 */

.lko-qckxs-trigger:focus {
    outline: none;
}

.lko-qckxs-trigger:focus-visible {
    outline: 2px solid #f0ebc3;
    outline-offset: 3px;
}

/* ================================================================
 O FF-CANVAS* PANEL
 ================================================================ */

.lko-qckxs-panel {
    position: fixed;

    top: 0;
    left: 0;

    width: 0;
    height: 100vh;
    height: 100dvh;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    padding-top: 60px;

    background-color: #5e7e8e;
    /* LKOpalette 7012 260928181353 QckXs bg */

    /*
     * The panel is above the overlay.
     */
    z-index: 1003;

    /*
     * Closed state.
     */
    visibility: hidden;

    transition:
    width 0.5s ease,
    visibility 0s linear 0.5s;


}

/*
 *
 O pen state* is controlled by JavaScript.
 */

.lko-qckxs-panel.is-open {
    visibility: visible;

    transition:
    width 0.5s ease,
    visibility 0s linear 0s;


}

/* ================================================================
 P AGE OVERL*AY / BLUR
 ================================================================ */

/*
 *
 T he overla*y belongs to the module.

 It does NOT blur itself.

 backdrop-filter applies the blur to whatever is behind the

 overlay, which means that no knowledge of the Joomla template

 DOM is required.
 */

.lko-qckxs-overlay {
    position: fixed;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.08);

    /*
     * Original LKO desktop blur.
     */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;

    cursor: pointer;

    /*
     * Below the panel but above the normal page.
     */
    z-index: 1001;

    transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;


}

/*
 *
 V isible ov*erlay.
 */

.lko-qckxs-overlay.is-visible {
    opacity: 1;
    visibility: visible;

    transition:
    opacity 0.25s ease,
    visibility 0s linear 0s;


}

/* ================================================================
 C LOSE BUTT*ON
 ================================================================ */

.lko-qckxs-close {
    position: absolute;

    top: 0;
    right: 20px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    font-family: inherit;
    font-size: 32px;
    line-height: 1;

    color: #f0ebc3;
    /* LKOpalette MenuButton basefont */

    cursor: pointer;


}

.lko-qckxs-close:hover,
.lko-qckxs-close:focus {
    color: #ffffff;
}

.lko-qckxs-close:focus {
    outline: none;
}

.lko-qckxs-close:focus-visible {
    outline: 2px solid #f0ebc3;
    outline-offset: 3px;
}

/* ================================================================
 M ENU LINKS*
 ================================================================ */

.lko-qckxs-navigation ul {
    margin: 0;
    padding: 0;

    list-style: none;


}

.lko-qckxs-navigation li {
    margin: 0;
    padding: 0;
}

.lko-qckxs-navigation a {
    display: block;

    padding: 8px 8px 8px 32px;

    color: #e8ffc9;
    /* LKOpalette 7000 260928181353 QckXs Menu basefont */

    text-decoration: none;

    font-size: 24px;
    line-height: 2;

    transition:
    color 0.3s ease,
    background-color 0.3s ease;


}

.lko-qckxs-navigation a:hover,
.lko-qckxs-navigation a:focus {
    color: #ffffff;
    /* LKOpalette 7001 260928181353 QckXs Menu highlighted basefont */
}

.lko-qckxs-navigation a:focus {
    outline: none;
}

.lko-qckxs-navigation a:focus-visible {
    outline: 2px solid #f0ebc3;
    outline-offset: -2px;
}

.lko-qckxs-navigation li.active > a {
    background-color: rgba(255, 255, 255, 0.10);
}

/* ================================================================
 S EPARATOR *
 ================================================================ */

.lko-qckxs-separator {
    display: block;

    width: 80%;

    padding-left: 4%;

    box-sizing: border-box;


}

.lko-qckxs-separator hr {
    margin: 0;

    border: 0;
    border-top: 1px solid #c1c1c1;


}

/* ================================================================
 T ABLET / S*MARTPHONE
 ================================================================ */

/*
 *
 O riginal L*KO breakpoint.

 On smaller screens the topsign is centred at the top.
 */

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

    .lko-qckxs-trigger {
        position: relative;

        margin-top: 0;
        margin-left: 50%;

        transform: translateX(-50%);
    }


    .lko-qckxs-trigger-image {
        height: 65px;
    }


    /*
     * Smaller blur on phones, corresponding to the old
     * lko-logo-image-phone / body-wrapper behaviour.
     */
    .lko-qckxs-overlay {
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }


}

/* ================================================================
 R EDUCED MO*TION
 ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .lko-qckxs-panel,
    .lko-qckxs-overlay,
    .lko-qckxs-navigation a {
        transition: none;
    }


}

/* @end group qckxs /
 / ^^ 4 ^^*/*