:root {
    --book-text-color: #333333;
    --book-bg-dark: #17214f; /* 20% #2e2e52 37%*/
    --book-bg-dark90: #d7ddf4; /* #ebebe0 #d7ddf4*/
    --book-bg-dark65: #7587d7; /* #b8b894 used at deleted record popover make it dim*/
    --book-bg-dark50: #3953c6; /* #999966 */
    --book-bg-dark35: #263782; /* #6b6b47 */
    --book-bg-light: #f2f2f2; /* #efeff6 */
    --book-top-menu-fontcolor: #262626; /* <=Black 15%*/
    --book-font-color: #c4cbee; /* <=blue 85% */ /*OLD: #f2f2f2;*/
    --book-btn-border-radius: 0.50rem;
    --bs-navbar-padding-y: 0.2rem;
}

/* line wTop Menu */
/* Top Menu b:5.2.3 Override*/
.topMenuPaddings {
    padding-left: 10px;
    padding-right: 6px;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--book-bg-dark90); /* blue */
    font-weight: bold;
    text-decoration: none;
    background-color: var(--book-bg-dark65);
}

.nav-item.show .nav-link {
    color: #c3ccef; /* #c3ccef var(--book-text-color);*/
    background-color: var(--book-bg-dark35);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}
/*
    find .bg-top-menu
    .bg-topmenu {
    background-color: var(--book-bg-dark35) !important;
}*/
/*Bootstrap Overwrite Start*/

.nav-link {
    color: var(--book-bg-dark); /*#ffff00;*/
}
/*.navbar-nav Bootstrap Overwrite start*/
.navbar-nav .active > .nav-link {
    color: #000 !important;
}

    .navbar-nav .active > .nav-link::after {
        color: #000 !important;
    }

.bg-top-menu {
    background-color: var(--book-bg-dark);
    color: var(--book-font-color);
}

.color-top-menu {
    color: var(--book-font-color) !important;
    font-family: Arial;
}

/* Menu box shadow*/
@media screen and (min-width: 1024px) {
    .dropdown-menu {
        /* Book shade*/        
        box-shadow: 7px 10px 5px #aaaaaa, 0px 10px 10px 1px #000;
        /*box-shadow: 7px 7px #999999;*/
        /*box-shadow: 10px 10px 5px #aaaaaa;*/
        /*box-shadow: 5px 10px 8px black, 5px 10px 8px gray;*/
        z-index: 1030;
    }
}

.dropdown-toggle::after {
    display: inline-block;
    color: var(--book-bg-dark90) !important;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-menu-dark {
    background: #dedeed;
    border-color: var(--book-bg-dark) !important;
    z-index: 10000;
}

.dropdown-item {
    color: var(--book-top-menu-fontcolor) !important;
}

.dropdown-menu a.dropdown-item {
    position: relative;
    display: block;
    padding: 6px 15px 6px 20px; /* 8px */
    color: var(--book-top-menu-fontcolor) !important;
    text-decoration: none !important;
    background-color: #ffffff;
    /*background-image: linear-gradient(to left, #11193b 3%, #d7ddf4 3%);*/
    background-image: linear-gradient(to left, #1a6600 3%, #8cff66 3%);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 1s ease, color 1s ease;
}

.dropdown-menu a:hover {
    background-size: 100% 100%;
    color: var(--book-bg-dark) !important;
    font-weight: bold;
}

.dropdown.active {
    background: var(--book-bg-dark90);
}
/*Bootstrap Overwrite END*/


.activeMenu {
    background-color: var(--book-bg-dark90);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0px;
    color: var(--book-bg-dark) !important;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
}

@media (max-width: 768px) {
    .activeMenu {
        background-color: transparent;
        border-left: 10px solid var(--book-btn-text-color);
        border-radius: 15px;
        padding-left: 3px;
        color: var(--book-bg-dark90) !important;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
    }
}