:root {



            --spacing-xsm: 0.425rem;
            --spacing-sm: 0.85rem;
            --spacing-md: 2rem;
            --spacing-lg: 2rem;
            --border-radius: 11px;
            --border-radius-input: 4px;
            --border-radius-button: 4px;
            --border-radius-round: 4px;
            --font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

            --font-size-sm: 14px;
            --font-size-xsm: 13px;
            --font-size-path: 0.8rem;


            /* larger dividers */
            --divider-margin: -1px;
            --divider-width: 5px;
            --window-border-radius: 8px;
            --window-border-color: var(--color-primary);
            --color-note-text: var(--text-secondary);
            /* smaller dividers (default)*/
            --divider-margin: -2px;
            --divider-width: 5px;
            --window-border-radius: 0;
            --window-border-color: var(--color-border-color);

            --search-result-hilight-background: #fc650054;
            --color-preview-background: var(--color-third);
        }

        .dropdown-menu {
            position: absolute;
            background: var(--active-tab);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-button);
            box-shadow: var(--color-box-shadow);
            z-index: 1000;
            /* overflow: hidden; */
            padding: var(--spacing-xsm);
            gap: var(--spacing-xsm);
            display: flex;
            flex-direction: column;
            min-width: 155px;
            /* min-width: 215px; */
            /* animation: dropdown-fade 0.1s ease; */
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 2px;
            cursor: pointer;
            font-size: var(--font-size-xsm);
            padding: 0.26rem var(--spacing-sm);
            padding-right: var(--spacing-md);
            color: var(--color-text);
            text-align: left;
            width: 100%;
            border-radius: 4px;
            font-weight: 500;
        }

        .dropdown-item span {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dropdown-item .shortcut {
            margin-left: auto;
            color: var(--color-note-text);
            white-space: nowrap;
            min-width: 110px;
            text-align: right;
            padding-right: 15px;
            font-size: 0.725rem;
        }

        .dropdown-item:hover .shortcut:not(.dropdown-item.has-submenu:hover>.submenu .shortcut) {
            color: var(--color-textHilight) !important;
        }

        .submenu .dropdown-item:hover .shortcut {
            color: var(--color-textHilight) !important;

        }

        .dropdown-item:hover {
            background-color: var(--border-color);
            color: var(--color-textHilight);
        }

        .dropdown-item:hover i:not(.dropdown-item.has-submenu:hover>.submenu i, .dropdown-btn-donate i) {
            color: var(--color-textHilight) !important;
        }

        .dropdown-item i:not(.submenu-icon, .submenu-icon i) {
            font-size: 14px !important;
            position: relative;
            top: 0px;
        }

        .dropdown-divider {
            height: 1px;
            background-color: var(--border-color);
        }

        .dropdown-item.has-submenu {
            position: relative;
        }


        .dropdown-item.has-submenu>.submenu {
            display: none;
            position: absolute;
            top: -4px;
            left: calc(100% - 4px);
            margin-left: 4px;
            flex-direction: column;
            min-width: 150px;
            /* min-width: 215px; */
            background: var(--active-tab);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-button);
            box-shadow: var(--color-box-shadow);
            padding: var(--spacing-xsm);
            z-index: 1001;
        }

        /* Flip to left when needed */
        .dropdown-item.has-submenu>.submenu.left {
            left: auto;
            right: calc(100% - 4px);
            margin-left: 0;
            margin-right: 4px;
        }

        /* 🔥 On hover, show submenu */
        .dropdown-item.has-submenu:hover>.submenu {
            display: flex;
        }

        /* Default state */
        .submenu {
            display: none;
        }

        /* Show only when JS adds this class */
        .submenu.visible {
            display: flex;
        }

        /* Chevron style */
        .submenu-icon {
            margin-left: auto;
            color: var(--color-note-text);
            padding-right: 2px;
            font-size: 16px !important;
        }

        .dropdown-item.has-submenu:hover>.submenu-icon {
            opacity: 1;
        }

        .dropdown-btn-donate {
            /* background-color: #598bdb;
   color: white;
   font-weight: 600;
   font-size: 0.8rem; */
            background-color: var(--border-color);
        }

        .dropdown-item img {
            display: inline-block;
            vertical-align: middle;
            object-fit: contain;
            width: 1.35em;
            height: 1.35em;
            transition: transform 0.3s ease;
            will-change: transform;
        }

        .dropdown-item:hover img {
            animation: kofiBounceWiggle 1s ease;
        }


        @keyframes kofiBounceWiggle {
            0% {
                transform: scale(1) rotate(0deg);
            }

            12% {
                transform: scale(1.08) rotate(14deg);
            }

            25% {
                transform: scale(1.08) rotate(-14deg);
            }

            37% {
                transform: scale(1.07) rotate(10deg);
            }

            50% {
                transform: scale(1.07) rotate(-10deg);
            }

            62% {
                transform: scale(1.05) rotate(6deg);
            }

            75% {
                transform: scale(1.05) rotate(-6deg);
            }

            87% {
                transform: scale(1.02) rotate(2deg);
            }

            100% {
                transform: scale(1) rotate(0deg);
            }
        }



        .dropdown-btn-donate:hover.dropdown-btn-donate i,
        .dropdown-btn-donate:hover {
            background-color: #598bdb;
            color: white;
        }