odoo-addons/addons/ks_dashboard_ninja/static/src/components/Header/header.scss

.ks_body_class {
    .screen-info {
        background-color: $color-nav-bg;
        height: 56px;
        display: flex;
        align-items: center;
        padding: 0 40px;

        @include max-992 {
            padding: 0 20px;
        }

        @include max-575 {
            padding: 0 16px;
        }

        // .ks_dashboard_top_menu-new {}

        .user-template-title {
            .ks_body_class .ks_am_element.dash-dd-2 {
                font-size: $font-16;
                color: $color-black;
                font-weight: $f-w-400;
                line-height: 20px;
            }

            span {
                position: relative;
            }

            // &::after {
            //     content: '';
            //     display: block;
            //     position: absolute;
            //     height: 20px;
            //     width: 20px;
            //     right: 2px;
            //     background-image: url(../../images/icons/down-arrow.svg);
            //     background-repeat: no-repeat;
            //     top: 43%;
            //     transition: all 350ms ease-in-out;
            // }
        }
    }
}

.ks_body_class .img-bg {
    display: flex;
    justify-content: center !important;
    padding: 0 !important;
    align-items: center !important;
    background-color: $color-secondary-bg;
    border: 0.5px solid $color-E5E7EB;
    border-radius: 50% !important;
    height: 40px;
    width: 40px;

    button{
            border: none;
            background:transparent;
        }



    &.info {
        background-color: $color-white !important;

    }



    &.hover-item {
        background-color: $color-bg-main;

        &.kpi-tile-img {
            background-color: $color-white !important;
            margin: 0;
            display: flex !important;
            justify-content: center;
            align-items: center;

            &:hover {
                transition: 0.2s linear;
                transform: scale(1.1);
                cursor: pointer !important;
            }

            svg {
                fill: none !important;
            }
        }

        &:hover {
            background-color: $color-white !important;

        }
    }

    &.dropdown-toggle::after {
        display: none !important;
    }

    &.info svg {
        fill: none !important;
        stroke: $color-black !important;

        @include max-992 {
            width: 16px;
            height: 16px;
        }
    }

    &.info.active, &.info.nav-active,
    &.info:hover {
        border: 0.5px solid transparent !important;
        background-color: $color-6789C6 !important;

        svg {
            stroke: $color-white !important;
        }
    }

    @include max-992 {
        height: 30px;
        width: 30px;

        & img {
            height: 16px;
            width: 16px;
        }
    }

//     &.more-img {
//         svg {
//             fill: $color-black !important;
//             stroke: none !important;
//         }
//
//         &.active,
//         &:hover {
//             svg {
//                 fill: $color-white !important;
//                 stroke: none !important;
//             }
//         }
//     }
}

.ks_body_class .ks_chart_heading {
    width: 75% !important;
}

.ks_body_class #ks_dashboard_title_input {
    width: 450px;
}

.ks_body_class .ks_dashboard_layout_event {
    span.df_selection_text {
        padding: 0 6px !important;


    }

    &.ks_layout_selected {
        span {
            &::before {
                left: -12px !important;
            }
        }
    }
}

.ks_body_class .magic-star-dd {
    .feature-btn {
        // border-bottom: 1px solid $color-E5E7EB;
        border-radius: 0;
        border: none;
    }

    .img-bg {
        border-radius: 10px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $color-FFF5F5 !important;
        min-height: 45px !important;
        width: 42px !important;

        svg {
            path {
                fill: $color-ABC8E7;
                stroke: $color-6789C6;
            }
        }

        &:hover {
            border: 1px solid $color-6789C6 !important;
            background-color: $color-FFF5F5 !important;
            // svg {
            //     path {
            //         fill: $color-white;
            //         stroke: $color-white;
            //     }
            // }
        }
    }
}

.img-bg.info svg.fill-black-stroke-none{
        fill: $color-black !important;
        stroke: none !important;

        &.active,
        &:hover {
            fill: $color-white !important;
            stroke: none !important;
        }
    }

#ks_dashboard_title_label {
    padding: 12px 15px;
    border: 0.5px solid #E5E7EB;
    color: #241C1D;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
//     text-overflow: ellipsis;
    white-space: nowrap;
//     overflow: hidden;
//     max-width: 187px;
    display: block;
}

button.ks-bg-violet {
    background-color: $color-6789C6 !important;
    border: 1px solid $color-6789C6 !important;

    &:hover {
        background-color: $color-597ebe !important;
    }
}

.feature-btn {
    font-size: $font-16;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
    color: $color-paragraph;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid $color-E5E7EB;
    outline: none;
    background-color: $color-white;
    display: flex;
    align-items: center;



    @include minmax1260 {
        font-size: 11px;
    }

    &:hover {
        background-color: $color-secondary-bg;

    }

    &:focus {
        border: 1px solid $color-E7495E;
    }

    &.light {
        background-color: $color-FFF5F5;

        @include max-575 {
            padding: 6px 10px;
            font-size: $font-8;

            & img {
                height: 12px;
                width: 12px;
                object-fit: cover;
            }
        }

    }

    &.dark {
        background-color: $color-D9F1FD;

        &:hover {
            background-color: #c4e4f3 !important;
        }
    }
}