:root {
    --book-theme-color: #f29f69;
    --book-text-color: #333333;
    --book-bg-dark: #1e1e2c; /* #17214f */
    --book-bg-dark90: #fbe1d0; /* #e1e1ea */
    --book-bg-dark65: #9595b7; /* #7587d7 */
    --book-bg-dark50: #676798; /* #3953c6 */
    --book-bg-dark35: #48486a; /* #263782 */
    --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;
}


.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;
}

    .color-top-menu:hover {        
        font-family: Arial;
        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;
    }

/* 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, #F29F69 3%, #fbe1d0 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);
}

.dropdown-item:hover, .dropdown-item:focus {
     color: var(--book-bg-dark90); /* blue */   
    font-weight: bold;
    text-decoration: none;
    background-color: var(--book-bg-dark65);
   
}
.msg-menu {
    /* color: var(--book-bg-dark90);*/ /* blue */
    color: var(--book-theme-color) !important;
    font-weight: bold;
    text-decoration: none;   
}
    .msg-menu:hover {       
        color: var(--book-bg-dark) !important;
        font-weight: bold;
        text-decoration: none;        
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 0px;
        background-color: var(--book-bg-dark90) !important;
    }
    .msg-menu:hover i {        
        color: var(--book-bg-dark) !important;
        font-weight: bold;       
    }

/*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: "";
    }
}