body.o_web_client {
    &.drawer_pallet_1 {
        .appdrawer_section {
            background-color: #1ea8e7;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #1ea8e7;
        }
    }

    &.drawer_pallet_2 {
        .appdrawer_section {
            background-color: #75ab38;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #75ab38;
        }
    }

    &.drawer_pallet_3 {
        .appdrawer_section {
            background-color: #ed6789;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #ed6789;
        }
    }

    &.drawer_pallet_4 {
        .appdrawer_section {
            background-color: #a772cb;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #a772cb;
        }
    }

    &.drawer_pallet_5 {
        .appdrawer_section {
            background-color: #eb5858;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #eb5858;
        }
    }

    &.drawer_pallet_6 {
        .appdrawer_section {
            background-color: #8c6f46;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #8c6f46;
        }
    }

    &.drawer_pallet_7 {
        .appdrawer_section {
            background-color: #007a5a;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #007a5a;
        }
    }

    &.drawer_pallet_8 {
        .appdrawer_section {
            background-color: #cc8631;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #cc8631;
        }
    }

    &.drawer_pallet_9 {
        .appdrawer_section {
            background-color: #0097a7;
            color: #ffffff;
            border-color: #ffffff;
            --inverse-color: #0097a7;
        }
    }

    &.custom_drawer_color{
        .appdrawer_section {
            background-color: var(--app-drawer-custom-bg-color);
            color: var(--app-drawer-custom-text-color);
            border-color: var(--app-drawer-custom-text-color);
            --inverse-color: var(--app-drawer-custom-bg-color);

            .input-group-prepend {
                .input-group-text {
                    color: var(--app-drawer-custom-text-color);
                }
            }

            #app_menu_search {
                color: var(--app-drawer-custom-text-color) !important;
                &::placeholder { 
                    color: var(--app-drawer-custom-text-color) !important;
                }
            }
        }

        .o_main_navbar.appdrawer-toggle{
            .appdrawer_section {
                .apps-list {
                    #searched_main_apps{
                        max-height: inherit;
                    }
                    #search_result {
                        .search_list_content {
                            a {
                                color: var(--app-drawer-custom-text-color) !important;
                            }
                        }
                    }
                }
            }
        }
    }

}

// .o_menu_apps {
    .appdrawer_section {
        .top_navbar_section {
            .close_fav_app_btn {
                .ri {
                    font-size: 30px;
                }
                height: var(--horizontal-menu-height);
                line-height: var(--horizontal-menu-height);
                cursor: pointer;
                display: inline-block !important;
                padding: 0 10px;
            }
            @media(min-width: 1400px) {
                padding: 0 50px;
                margin-bottom: 36px;
            }
            @include media-breakpoint-up(lg){
                padding: 0 20px;
                margin-bottom: 36px;
            }
            @include media-breakpoint-down(md){
                .close_fav_app_btn {
                    padding: 0;
                }
                padding: 0 15px;
                margin-bottom: 12px;
            }
            
            height: var(--horizontal-menu-height);
            border-bottom-left-radius: var(--border-radius-lg);
            border-bottom-right-radius: var(--border-radius-lg);
            background-color: rgba(255, 255, 255, 0.10);
        }
        .input-group {
            background-color: rgba(255, 255, 255, 0.1);
            padding: 10px 15px;
            border-radius: var(--border-radius-lg);
            .input-group-prepend {
                .input-group-text {
                    background-color: transparent;
                    border: none;
                    color: inherit !important;
                    font-size: 16px;
                }
            }
            #app_menu_search {
                background-color: transparent;
                border: none;
                color: inherit !important;
                font-size: 16px;
                box-shadow: none;
                &::placeholder { 
                    color: inherit;
                    opacity: 1; 
                }
            }
        }

        > .container{
            @include media-breakpoint-down(lg){
                height: calc(100% - 60px - 16px);
            }
            @include media-breakpoint-up(xl){
                height: calc(100% - 80px - 16px);
            }
        }
        
        .apps-list {
            overflow-y: auto;
            margin-top: 36px;
            height: inherit;
            // max-height: calc(100vh - 80px - 96px - 55px);
            #search_result {
                .search_list_content {
                    a {
                        color: var(--biz-theme-primary-text-color) !important;
                        display: block;
                        font-size: 14px;
                        padding: 3px 10px;
                        opacity: 1;
                    }
                    border-radius: var(--border-radius-lg);
                    transition: 0.2s;
                    &:hover, &.navigate_active {
                        background-color: rgba(255, 255, 255, 0.10);
                    }
                }
            }
            scrollbar-width: none; // hide scrollbar in firefox
            &::-webkit-scrollbar {
                display: none;
            }
            .app-box {
                padding: 10px 0;
                width: 12.5%;
                .o_app{
                    color: inherit !important;
                }
                .app-image {
                    .img, .ri, .fa {
                        transition: 0.3s;
                        font-size: 64px;
                        // color: var(--biz-theme-primary-text-color);
                        color: inherit !important;
                        width: 64px;
                        height: 64px;
                        line-height: 64px;
                        object-fit: contain;
                        vertical-align: middle;

                        &:hover {
                            transform: translateY(-5px);
                        }
                    }
                }
                .app-name {
                    // color: #ffffff !important;
                    color: inherit !important;
                    font-size: 14px;
                }
            }
        }
        position: fixed;
        width: 0%;
        height: 0;
        top: 0;
        left: 0%;
        z-index: 90;
        visibility: hidden;
        opacity: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        &.toggle {
            .drawer_button {
                .fa {
                    &:before {
                        content: "\f103";
                    }
                }
                .btn {
                    border-radius: 0 0 100px 100px !important;
                    padding: 5px 10px 0 !important;
                }
                transform: translate(-50%, 0%);
            }
            left: 0;
            width: 100%;
            height: 100%;
            visibility: visible;
            opacity: 1;
            transition: 0.2s;
            --webkit-transition: 0.2s;
        }

        &.show_favourite_apps {
            #search_result {
                display: none;
            }
            .apps-list {
                .app-box {
                    .o_app{
                        padding: 15px;
                    }
                    .fav_app_select {
                        .ri {
                            text-align: center;
                            border-top-right-radius: var(--border-radius-lg);
                            border-left: 1px solid;
                            border-bottom: 1px solid;
                            border-color: inherit;
                            border-bottom-left-radius: var(--border-radius-lg);
                            top: 1px;
                            right: -1px;
                            position: relative;
                            padding: 3px;
                            cursor: pointer;
                            pointer-events: none;
                            &.active {
                                background-color: #ffffff;
                                color: var(--inverse-color);
                            }
                        }
                        display: block !important;
                        position: absolute;
                        top: 0;
                        left: 10px;
                        width: calc(100% - 20px);
                        height: 100%;
                        z-index: 2;
                        text-align: right;
                        border: 1px solid;
                        border-color: inherit;
                        border-radius: var(--border-radius-lg);
                    }
                    padding: 0;
                    position: relative;
                }
            }
        }

        @include media-breakpoint-down(lg){
            .top_navbar_section {
                height: 60px;
            }
            .apps-list {
                margin-top: 15px;
                // max-height: calc(100vh - 60px - 96px - 55px);
                .app-box {
                    width: 20%;
                }
            }
        }
        @include media-breakpoint-down(md) {
            .apps-list {
                .app-box {
                    width: 25%;
                }
            }
        }
        @include media-breakpoint-down(sm) {
            .apps-list {
                .app-box {
                    width: 33.33%;
                }
            }
        }
    }
// }