:root {
    --dark-backdrop: #121212;
    --dark-text: #dbdbdb;
    --dark-tint-1: #2d2d2d;
    --dark-tint-2: #4d4d4d;
    --dark-tint-3: #5a5a5a;
    --dark-red: #ed6874;

    --cpx-studio-green: #003329;
    --cpx-dynamic-green: #75e580;
    --cpx-cloud-white: #fff;
    --cpx-powerful-blue: #3354ff;
    --cpx-creative-purple: #f091ff;

    --cpx-backdrop-color: #f6faf8;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('fonts/Outfit-Regular.woff2') format('woff2'),
        url('fonts/Outfit-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('fonts/Outfit-Bold.woff2') format('woff2'),
        url('fonts/Outfit-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'),
        url('fonts/AtkinsonHyperlegible-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2'),
        url('fonts/AtkinsonHyperlegible-Bold.woff') format('woff');
}

body {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem !important;
    padding-top: 40px;
    /* Offset fixed header */

    --bs-font-sans-serif: 'Outfit', sans-serif;
}

body.login-page {
    padding-top: 0;
}

.navbar.navbar-dark {
    transition: box-shadow .25s ease-in-out;
    z-index: 3000;
}

body.window-scrolled .navbar.navbar-dark {
    box-shadow: 0 .5rem .75rem rgba(23, 48, 84, .2);
}

.btn {
    padding-top: .5em;
}

/* Finder */
.finder {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;

    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
}

.finder__backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 48, 84, .15);
    background: radial-gradient(rgba(23, 48, 84, .05), rgba(23, 48, 84, .15));
    backdrop-filter: blur(4px);
    z-index: 2;
}

.finder .container {
    /* width: 1100px; */
    width: auto;
    max-width: 100%;
    z-index: 10;
    position: relative;
}

.finder__wrapper {
    position: relative;
    padding-top: 5em;
}

.finder__search-bar.form-control {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 500px;
    height: 2em;
    font-size: 2em !important;
    border: 1px solid rgba(23, 48, 84, .25) !important;
    box-shadow: 0 0 100px 0 rgba(23, 48, 84, .1);
    text-align: center;
    border-radius: 20px !important;
    background-color: rgba(255, 255, 255, .85) !important;
    color: #000 !important;
    /* backdrop-filter: blur(9px); */
}

.finder__search-bar.form-control:focus {
    box-shadow: 0 0 100px 0 rgba(23, 48, 84, .1) !important;
    background-color: rgba(255, 255, 255, .85) !important;
}

.finder__results {
    background: none;
    border: 1px solid rgba(23, 48, 84, .5);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    margin-top: 5px;
    overflow: hidden;
    display: none;
}

.finder__results:not(:empty) {
    display: block;
}

.finder__result {
    padding: .5em 1em;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .85);
    /* backdrop-filter: blur(9px); */
    border: none;
    width: 100%;
    display: block;
}

.finder__search-bar:focus+.finder__results .finder__result:first-child {
    background-color: var(--cpx-dynamic-green);
}

.finder__result:hover {
    background-color: #f1f1f1;
    color: #212529;
}

.finder__result:focus {
    background-color: var(--cpx-dynamic-green);
    outline: none;
}

.finder__more-results {
    background-color: rgba(255, 255, 255, .85);
    /* backdrop-filter: blur(9px); */
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}


body.finder-active .finder {
    opacity: 1 !important;
    transform: none;
    pointer-events: all;
}

/* NAS popup */
.nas-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 48, 84, .15);
    background: radial-gradient(rgba(23, 48, 84, .05), rgba(23, 48, 84, .15));
    backdrop-filter: blur(4px);
    z-index: 9998;

    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease-in-out;

}

.nas-popup__inner {
    background-color: #fff;
    border-radius: 13px;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    margin-top: 10rem;
    border: 1px solid rgba(23, 48, 84, .25);
    box-shadow: 0 0 100px 0 rgba(23, 48, 84, .1);
    z-index: 3;
    position: relative;
}

.nas-popup td:last-child span {
    border-radius: 13px;
    padding: 0 5px !important;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: background-color .05s ease-in, color .05s ease-in;
    user-select: none;
    position: relative;
}

.nas-popup td:last-child span:after {
    content: '✓';
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 1.5rem;
    background-color: #198754;
    position: absolute;
    right: -2rem;
    top: 50%;
    transform: translateY(-50%) scale(0);
    color: #fff;
    opacity: 0;
    transition: opacity .12s ease-in-out, transform .12s ease-in-out;
    font-size: .8rem;
    line-height: 2;
}

.nas-popup td:last-child:hover span {
    background-color: var(--cpx-dynamic-green);
    color: var(--cpx-studio-green);
}

.nas-popup td:last-child:hover:active span {
    transform: scale(1.03);
}

.nas-popup td:last-child.copied span:after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

body.nas-active .nas-popup {
    opacity: 1 !important;
    pointer-events: all;
}

.nas-popup__close {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    cursor: pointer;
}

/* End NAS popup */

table {
    color: inherit !important;
}

.tox-tinymce--toolbar-sticky-on .tox-editor-header {
    top: 40px !important;
}

.tox-tinymce {
    border-radius: 13px !important;
}

/* Set default background for outlined buttons */
.btn.btn-outline-danger,
.btn.btn-outline-secondary {
    background-color: #fff;
}

/* Dark mode */
body.dark-mode {
    background-color: var(--dark-backdrop);
    color: var(--dark-text);
}

body.dark-mode .bg-light.bg-light-darkmode,
body.dark-mode .bg-white-darkmode,
body.dark-mode .checklist__item.card,
body.dark-mode .checklist__save-status,
body.dark-mode .nas-popup__inner,
body.dark-mode .navbar.navbar-dark,
body.login-page.dark-mode .form-side {
    background-color: var(--dark-tint-1) !important;
}

body.dark-mode .text-darkmode-white,
body.dark-mode .checklist__save-status {
    color: var(--dark-text);
}

body.dark-mode .checklist__default-card,
body.dark-mode .btn-light,
body.dark-mode .btn.btn-outline-danger,
body.dark-mode .btn.btn-outline-secondary {
    background-color: var(--dark-tint-2);
    border-color: var(--dark-tint-2);
    color: var(--dark-text);
}

body.dark-mode .btn-light:hover,
body.dark-mode .btn.btn-outline-secondary:hover {
    background-color: var(--dark-tint-3);
}

body.dark-mode .btn-light.text-danger,
body.dark-mode .btn.btn-outline-danger {
    color: var(--dark-red) !important;
}

body.dark-mode .form-control {
    background-color: var(--dark-tint-2);
    color: var(--dark-text);
    border-color: var(--dark-text);
}

body.dark-mode .modal-content {
    background-color: var(--dark-tint-2);
}

body.dark-mode .modal-content .btn-close,
body.dark-mode .checklist__default-card:first-child img {
    color: var(--dark-text);
    filter: invert();
}

body.window-scrolled.dark-mode .navbar.navbar-dark {
    box-shadow: 0 .5rem .75rem rgba(0, 0, 0, .2);
}

.btn.btn-primary,
.btn.btn-success,
.btn.btn-light,
.btn-outline-secondary {
    border-radius: 11px;
}

.btn.btn-sm {
    border-radius: 7px;
}

.btn.btn-primary {
    box-shadow: 0 2px 6px 0px rgb(117 229 128 / 30%);
}

.btn.btn-success {
    box-shadow: 0 2px 6px 0px rgb(25 135 84 / 30%);
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fadeinslow {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fadeindown {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.fadein {
    animation: fadein .3s;
}

.fadeinslow {
    animation-delay: .1s;
    animation-name: fadeinslow;
    animation-duration: .35s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-play-state: running;

    /* animation: fadein .6s; */
}

form input[type="number"],
form input[type="email"],
form input[type="text"],
form input[type="date"],
form input[type="datetime"],
form input[type="password"],
form input[type="tel"],
.ss-main {
    border-radius: 16px;
}

.toast {
    border-radius: 16px !important;
}

.toast.bg-success {
    background-color: var(--cpx-dynamic-green) !important;
    color: var(--cpx-studio-green) !important;

    .btn-close {
        filter: none !important;
        color: var(--cpx-studio-green) !important;
    }
}

.scroll-up-button {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 100;
    cursor: pointer;
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;

    width: 2rem;
    height: 2rem;
    background: var(--cpx-dynamic-green);
    box-shadow: 0 2px 6px 0px rgb(117 229 128 / 30%);
    color: var(--cpx-studio-green);
    border-radius: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    line-height: 1;

    &:hover {
        transform: translateY(-2px) !important;
    }
}

body.window-scrolled .scroll-up-button {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* Slimselect */
.ss-content.ss-open-below {
    box-shadow: 0 10px 10px 0 rgba(23, 48, 84, .2);
}

.ss-main {
    border-radius: 16px !important;
    --ss-main-height: 42px;
}

.cpx-v2 {

    .ss-content .ss-list .ss-option.ss-highlighted,
    .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected,
    .ss-content .ss-list .ss-option:hover {
        color: var(--cpx-studio-green);
        background-color: var(--cpx-dynamic-green);
    }

    .bg-light {
        background-color: #f6faf8 !important;
    }

    .btn.btn-primary {
        background-color: var(--cpx-dynamic-green);
        border-color: var(--cpx-dynamic-green);
        color: var(--cpx-studio-green);

        &:hover,
        &:focus {
            background-color: color-mix(in srgb, var(--cpx-dynamic-green) 80%, white 20%);
            border-color: color-mix(in srgb, var(--cpx-dynamic-green) 80%, white 20%);
        }
    }

    .btn.btn-info {
        background-color: var(--cpx-creative-purple);
        border-color: var(--cpx-creative-purple);
        color: var(--cpx-studio-green);

        &:hover,
        &:focus {
            background-color: color-mix(in srgb, var(--cpx-creative-purple) 80%, white 20%);
            border-color: color-mix(in srgb, var(--cpx-creative-purple) 80%, white 20%);
        }
    }

    .alert-info {
        color: var(--cpx-studio-green);
        background-color: #fef6ff;
        border-color: var(--cpx-creative-purple);
    }

    .form-control:focus,
    .btn-check:focus+.btn-primary,
    .btn-primary:focus,
    .form-check-input:focus {
        box-shadow: 0 0 0 0.2rem rgba(117, 229, 128, 0.25);
        border-color: var(--cpx-dynamic-green);
        background-color: rgba(255, 255, 255, 0.85);
    }

    .bg-primary {
        background-color: var(--cpx-dynamic-green) !important;
    }

    .bg-info {
        background-color: var(--cpx-creative-purple) !important;
    }

    .badge.bg-primary {
        color: var(--cpx-studio-green);
    }

    .form-check-input:checked {
        background-color: var(--cpx-dynamic-green);
        border-color: var(--cpx-dynamic-green);
    }

    .form-check-input:checked[type=checkbox] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23003329' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }
}

body a {
    color: color-mix(in srgb, var(--cpx-dynamic-green) 35%, var(--cpx-studio-green) 65%);
    text-decoration-color: var(--cpx-dynamic-green);
    text-underline-offset: 3px;

    &:hover,
    &:focus {
        color: color-mix(in srgb, var(--cpx-dynamic-green) 15%, var(--cpx-studio-green) 85%);
        text-decoration-color: color-mix(in srgb, var(--cpx-dynamic-green) 15%, var(--cpx-studio-green) 85%);
        ;
    }
}

<?php if ( !defined('ABSPATH')) {
    exit('Geen directe toegang toegestaan.');
}

$open_error_logs_count =0;

$logs_conn =new mysqli($cw_logs_db_server, $cw_logs_db_user, $cw_logs_db_pass, $cw_logs_db_name);

if ($logs_conn->connect_error) {
    die("Connection failed: " . $logs_conn->connect_error);
}

$sql ="SELECT COUNT(*) as open_count FROM error_logs WHERE fixed = 0";
$result =$logs_conn->query($sql);

if ($result && $row =$result->fetch_assoc()) {
    $open_error_logs_count =$row['open_count'];
}

$logs_conn->close();
?><nav class="navbar navbar-expand-lg navbar-dark py-0 fixed-top"><div class="container" style="width: <?= $cw_content_width ?>; max-width: 100%;"><a class="navbar-brand" href="<?= $cw_base_url ?>"><img src="<?= $cw_base_url ?>/front-end/img/logo-v2.svg" alt="CodePix" width="120" height="30" class="d-inline-block align-top"></a><div class="spacing me-auto mb-2 mb-lg-0"></div><div class="d-flex flex-row align-items-center "><a href="<?= $cw_base_url ?>/pagina/livegang-checklist" class="header-dns-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Checklist" data-bs-animation="false"><i class="bi bi-check2-square"></i></a><a href="<?= $cw_base_url ?>/pagina/servers" class="header-servers-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Servers" data-bs-animation="false"><i class="bi bi-hdd-rack"></i></a><a href="<?= $cw_base_url ?>/pagina/error-logs" class="header-error-logs-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Error logs" data-bs-animation="false"><i class="bi bi-bug"></i><?php if($open_error_logs_count > 0): ?><span class="badge bg-danger ms-1"><?=$open_error_logs_count ?></span><?php endif;
?></a>< !-- Tools dropdown --><div class="cpx-tools-dropdown"><button class="cpx-tools-dropdown__trigger py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tools" data-bs-animation="false"><i class="bi bi-grid"></i><span class="cpx-tools-dropdown__label">Tools</span><i class="bi bi-chevron-down cpx-tools-dropdown__chevron"></i></button><div class="cpx-tools-dropdown__menu"><div class="cpx-tools-dropdown__menu-inner"><a href="<?= $cw_base_url ?>/pagina/eenmalig-delen" class="cpx-tools-dropdown__item cpx-tools-dropdown__item--primary"><i class="bi bi-link-45deg cpx-tools-dropdown__item-icon"></i><span>Eenmalig delen</span></a><a href="<?= $cw_base_url ?>/pagina/alle-email-templates" class="cpx-tools-dropdown__item cpx-tools-dropdown__item--primary"><i class="bi bi-pencil cpx-tools-dropdown__item-icon"></i><span>Bericht opstellen</span></a><div class="cpx-tools-dropdown__divider"></div><a href="<?= $cw_base_url ?>/pagina/cache-warmer" class="cpx-tools-dropdown__item cpx-tools-dropdown__item--secondary">Cache warmer</a><a href="<?= $cw_base_url ?>/pagina/dns-wijziging-checker" class="cpx-tools-dropdown__item cpx-tools-dropdown__item--secondary">DNS wijziging checker</a><a href="<?= $cw_base_url ?>/pagina/excel-naar-json" class="cpx-tools-dropdown__item cpx-tools-dropdown__item--secondary">Excel naar JSON</a><a href="<?= $cw_base_url ?>/pagina/meta-data-scraper" class="cpx-tools-dropdown__item cpx-tools-dropdown__item--secondary">Meta data scraper</a><a href="<?= $cw_base_url ?>/pagina/postcode-tool" class="cpx-tools-dropdown__item cpx-tools-dropdown__item--secondary">Postcode tool</a></div></div></div><a href="https://dev.codepix.website" target="_blank" rel="noopener noreferrer nofollow" class="header-dev-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Local development" data-bs-animation="false"><i class="bi-code-slash"></i></a><?php if(is_admin()): ?><a href="<?= $cw_base_url ?>/pagina/alle-gebruikers" class="header-dns-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Gebruikers" data-bs-animation="false"><i class="bi bi-people"></i></a><a target="_blank" href="https://quickconnect.to/codepix" target="_blank" rel="noopener noreferrer nofollow" class="js-open-nas header-nas-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="NAS" data-bs-animation="false"><i class="bi-hdd"></i></a><?php endif;
?><button class="js-toggle-force-lightmode header-lightmode-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Forceer lichte modus" data-bs-animation="false"><i class="bi-sun"></i></button><button class="js-open-finder header-search-button py-1 px-3 mt-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Zoeken" data-bs-animation="false"><i class="bi-search"></i></button><a href="<?= $cw_base_url ?>/pagina/account" class="badge bg-light text-dark ms-3 me-3 text-decoration-none" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Mijn account" data-bs-animation="false"><?=$_SESSION['gebruiker_name'] ?></a><form action="../actions/logout.php" method="POST" style="padding-top:.17rem;"><button type="submit" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Uitloggen" data-bs-animation="false"><i class="bi-box-arrow-in-left text-white" style="margin-right: -.75rem"></i></button></form></div></div></nav><?php if(is_admin()): ?><div class="nas-popup js-nas-popup" style="opacity:0;"><div class="nas-popup__inner"><table><tr><td><b>Accountnaam:&nbsp;
&nbsp;
</b></td><td class="copy-to-clipboard" data-clipboard-text="codepix_admin"><span>codepix_admin</span></td></tr><tr><td><b>Wachtwoord:</b></td><td class="copy-to-clipboard" data-clipboard-text="nd0274vnqHf!"><span>nd0274vnqHf !</span></td></tr><tr><td><b>Map sleutel:</b></td><td class="copy-to-clipboard" data-clipboard-text="fN9d8n19N!s@"><span>fN9d8n19N !s@</span></td></tr></table></div><div class="nas-popup__close" onclick="close_nas_popup()"></div></div><?php endif;

?><style>.navbar.navbar-dark {
    background-color: #003329;
}

.header-dev-button,
.header-servers-button,
.header-dns-button,
.header-nas-button,
.header-ritjes-button,
.header-search-button,
.header-delen-button,
.header-error-logs-button,
.header-lightmode-button {
    outline: none;
    background: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: .55rem;
    height: 1.7em !important;
    margin-top: 0px !important;
    transition: background-color .2s ease-in-out !important;
}

.header-error-logs-button {
    position: relative;
}

.header-error-logs-button .badge {
    font-size: 9px;
    position: absolute;
    pointer-events: none;
    top: -1px;
    right: 1px;
}

.header-dev-button {
    margin-right: -.2rem;
}

.header-clock {
    font-size: .6em;
    margin-top: .2em;
    opacity: .7;
    font-family: sans-serif;
}

.force-lightmode .header-lightmode-button {
    background-color: #198754;
}

.navbar .badge.bg-light {
    background-color: #fff !important;
}

/* ==========================================================================
   Tools dropdown
   ========================================================================== */

:root {
    --cpx-dropdown-bg: #00261e;
    --cpx-dropdown-bg-hover: #003d30;
    --cpx-dropdown-border: rgba(255, 255, 255, 0.08);
    --cpx-dropdown-text: #fff;
    --cpx-dropdown-text-secondary: rgba(255, 255, 255, 0.65);
    --cpx-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --cpx-dropdown-radius: 0.5rem;
    --cpx-dropdown-width: 220px;
}

/* Wrapper
   ========================================================================== */

.cpx-tools-dropdown {
    position: relative;
}

/* Trigger button
   ========================================================================== */

.cpx-tools-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    outline: none;
    background: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    color: var(--cpx-dropdown-text) !important;
    border-radius: 0.55rem;
    height: 1.7em !important;
    margin-top: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out !important;
    white-space: nowrap;
    font-size: inherit;
    line-height: 1;
}

.cpx-tools-dropdown__label {
    font-size: 0.8em;
    font-weight: 500;
    margin-top: 1px;
}

.cpx-tools-dropdown__chevron {
    font-size: 0.55em;
    margin-left: 0.1rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__chevron {
    transform: rotate(180deg);
}

/* Menu panel
   ========================================================================== */

.cpx-tools-dropdown__menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    z-index: 1050;
    width: var(--cpx-dropdown-width);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__menu {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cpx-tools-dropdown__menu-inner {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0;
    background-color: var(--cpx-dropdown-bg);
    border: 1px solid var(--cpx-dropdown-border);
    border-radius: var(--cpx-dropdown-radius);
    box-shadow: var(--cpx-dropdown-shadow);
}

/* Items
   ========================================================================== */

.cpx-tools-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    color: var(--cpx-dropdown-text) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
}

.cpx-tools-dropdown__item:hover {
    background-color: var(--cpx-dropdown-bg-hover);
}

.cpx-tools-dropdown__item--primary {
    font-size: 0.85rem;
}

.cpx-tools-dropdown__item--secondary {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-left: 1rem;
    font-size: 0.78rem;
    color: var(--cpx-dropdown-text-secondary) !important;
}

.cpx-tools-dropdown__item--secondary:hover {
    color: var(--cpx-dropdown-text) !important;
}

.cpx-tools-dropdown__item-icon {
    width: 1rem;
    font-size: .9rem;
    text-align: center;
    flex-shrink: 0;
}

.cpx-tools-dropdown__item-icon.bi-link-45deg {
    font-size: 1.2rem;
}

/* Divider
   ========================================================================== */

.cpx-tools-dropdown__divider {
    height: 1px;
    margin: 0.3rem 0.7rem;
    background-color: var(--cpx-dropdown-border);
}

/* Staggered item animations
   ========================================================================== */

.cpx-tools-dropdown__item {
    opacity: 0;
    transform: translateY(-4px);
    transition:
        background-color 0.05s ease,
        opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item {
    opacity: 1;
    transform: translateY(0);
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item:nth-child(1) {
    transition-delay: 0.03s;
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item:nth-child(2) {
    transition-delay: 0.06s;
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item:nth-child(4) {
    transition-delay: 0.09s;
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item:nth-child(5) {
    transition-delay: 0.11s;
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item:nth-child(6) {
    transition-delay: 0.13s;
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item:nth-child(7) {
    transition-delay: 0.15s;
}

.cpx-tools-dropdown--open .cpx-tools-dropdown__item:nth-child(8) {
    transition-delay: 0.17s;
}