.app-icon-{ 
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url); 
    -webkit-mask-image: var(--icon-url);
    background-color: var(--icon-clr, #333); 

    transition: var(--theme-transition);
}
.app-icon-user{
    --icon-url: url(src/icon-user.png)
}
.app-icon-category{
    --icon-url: url(src/icon-category.png)
}
.app-icon-revenue{
    --icon-url: url(src/icon-revenue.png)
}
.app-icon-subscription{
    --icon-url: url(src/icon-subscription.png)
}
.app-icon-products{
    --icon-url: url(src/icon-products.png)
}
.app-icon-parameter{
    --icon-url: url(src/icon-parameter.png)
}
.app-icon-pricing{
    --icon-url: url(src/icon-pricing.png)
}
.app-icon-selected{
    --icon-url: url(src/icon-selected.png)
}
.app-icon-failed{
    --icon-url: url(src/icon-failed.png)
}
.app-icon-success{
    --icon-url: url(src/icon-success.png)
}
.app-icon-home{
    --icon-url: url(src/icon-home.png)
}
.app-icon-profile{
    --icon-url: url(src/icon-profile.png)
}
.app-icon-switchoff{
    --icon-url: url(src/icon-switchoff.png)
}
.app-icon-notification{
    --icon-url: url(src/icon-notification.png)
}
.app-icon-cart{
    --icon-url: url(src/icon-cart.png)
}
.app-icon-currency{
    --icon-url: url(src/icon-currency.png)
}
.app-icon-bill{
    --icon-url: url(src/icon-bill.png)
}
.app-icon-report{
    --icon-url: url(src/icon-report.png)
}
.app-icon-medical-consultation{
    --icon-url: url(src/icon-medical-consultation.png)
}
.app-icon-quotation{
    --icon-url: url(src/icon-quotation.png)
}
.app-icon-marketing{
    --icon-url: url(src/icon-marketing.png)
}



.dashboardmain{

    --dashboard-div: 300px;
    --dashboard-gap: 30px;

    @media(width<=991px){

    }

    --mainlist-gap: 15px;
    --mainlist-count: 2;
    --average-gap: calc( var(--mainlist-gap) * (var(--mainlist-count) - 1) ) ;
    --mainlist-div: calc( (100% / var(--mainlist-count)) - (var(--average-gap) / var(--mainlist-count)) );
    

    --theme-radius: 6px;
    --theme-transition: .3s all ease;
    --icon-url: url(src/icon-missing.png);
    --icon-clr: var(--clr01x, #333);
    
    line-height: 1;
    color: #999;

    & hr {
        margin: 30px 0;
    }
    .tastew{
        gap: 3px;
    }
    .btn, & button {
        border-radius: 50px;
    }
}
.displayw{
    & > * ~ *{
        margin-top: 9px;
    }
}
.dashboardmain .noticebx{
    .title{
        gap: 9px; 
        margin: 15px 0;

        & h4{
            margin: 0 0;
        }

        .bimgw{
            width: 30px;
            margin: 0 0 6px;
        }
    }
}
.dashboardmain .listbx{
    --theme-padding: 9px 6px;

    
    .list-head{ 
        background-color: #ccc;
        font-family: var(--ft-t1);
        color: #333;
        font-size: 80%;
    }
    .list-body{
        --page: 0; 
        counter-reset: bil calc(1000 * var(--page));

        .listitm{
            counter-increment: bil;

            .bil{
                &:after{
                    content: counter(bil);
                    font-size: 80%;
                }
            }
        }

        .listitm:nth-child(odd){
            background-color: #eee;
        }
        .listitm:nth-child(even){
            background-color: #ddd;
        }

        .info-l{
            flex: 0 0 45px;
            max-width: 45px;
        }
        .info-r{
            flex: 0 0 calc(100% - 45px);
            max-width: calc(100% - 45px); 
            
            .title{
                font-family: var(--ft-t1);
                color: #333;
            } 
        }
        .bg-contain{
            background-position: top center;
        }
        .ctlrbx{
            margin: 9px 0 0;

            .ctlrw{
                gap: 3px
            }
            .ctlr-{
                padding: 6px 6px;
                background-color: #fff;
                border: 1px solid #ccc;
                color: #666;
                font-size: 80%;
                font-family: var(--ft-t1);
                min-width: 60px;
                text-align: center;
                border-radius: 3px;
                cursor: pointer;
                transition: .3s all ease;

                &.ctlrView{
                    &:hover{
                        border-color: #97fda8;
                        background-color: #97fda8;
                        color: rgb(19, 87, 6)
                    }
                }
                &.ctlrEdit{
                    &:hover{
                        border-color: #97fda8;
                        background-color: #97fda8;
                        color: rgb(19, 87, 6)
                    }
                }
                &.ctlrDelete{
                    &:hover{
                        border-color: rgb(255, 179, 179);
                        background-color: rgb(255, 179, 179);
                        color: rgb(87, 6, 6);
                    }
                }

                &.ctlrStatus{
                    background-color: #fff;
                    
                    &:hover{
                        color: #333;
                        background-color: #ddd;
                    }
                    &::before{
                        content: '';
                        width: 9px;
                        aspect-ratio: 1;
                        border-radius: 50%;
                        display: inline-block;
                        vertical-align: middle;
                        background-color: #ccc;
                        margin: -2px 3px 0 0;
                    }
                    &.on::before {
                        background-color: green;
                    }
                    &.off::before {
                        background-color: darkred;
                    }
                }
            }
        }
        .title {
            color: var(--clr01);
            font-family: var(--ft-t1);
        }
        & [upd="_status"]{
            display: inline-flex; 
            vertical-align: text-top; 
            margin: 0 3px 0 0; 
            font-size: 70%;
            text-transform: uppercase;
            font-family: var(--ft-t1);

            & > * {
                display: flex; 
                padding: 3px 6px;

                &.PENDING{
                    background-color: #ffbdbd;
                    color: #cd0000;
                }
                &.PARTIAL{
                    background-color: #ffd891;
                    color: #bd6800;
                }
                &.COMPLETE{
                    background-color: #b7ffb7;
                    color: #0a800e;
                }
            }
        }
    }

    .listitm{
        .listitmbx{
            padding: var(--theme-padding);

            .bimgw{
                border-radius: 3px;
            }
        }
    }

    .list-l{
        flex: 0 0 60px;
        max-width: 60px;
    }
    .list-m{
        flex: 0 0 calc(100% - 120px);
        max-width: calc(100% - 120px);
    }
    .list-r{
        flex: 0 0 60px;
        max-width: 60px;
    }
}
.dashboardmain .mainlistbx{ 
    background-color: #fff; 
    border-radius: var(--theme-radius);

    .mainlistw{
        gap: var(--mainlist-gap)
    } 
    .mainlistitmbx{
        flex: 0 0 var(--mainlist-div);
        max-width: var(--mainlist-div);
        padding: 15px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 15px;
        transition: var(--theme-transition);
        overflow: hidden;

        &:hover{
            cursor: pointer;
            background-color: var(--clr01); 
            border: 1px solid var(--clr01); 
            --icon-clr: #fff;
            
            .title{
                translate: 21px 0;
                color: #fff; 
            }
            & i{
                translate: 0 0;
                opacity: 1;
            }
        }

        .bimgw{
            width: 35px;
            margin: 0 0 6px;
        }
        .titlebx{
            font-size: 90%;
        }
        .title{ 
            font-family: var(--ft-t1); 
            transition: var(--theme-transition); 
            color: var(--icon-clr);
        }
        & i{
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            translate: -60px 0;
            transition: var(--theme-transition);
            color: #fff; 
        }
    }
}
.dashboardmain .dashboardbx{
    margin: 0 calc(-1 * var(--dashboard-gap) / 2);

    .welcomebx{
        margin: 0 0 30px;
        .maintitle{
            color: #333;
            margin: 0 0 12px;
        }
    }
    

    .expressbx{
        padding: 15px;
        background-color: #fff;
        border-radius: var(--theme-radius);
        width: 100%;
        border: 1px solid #ccc;
    }

    .displaybx{
        width: 100%;
    }

    .dashboardw{
        margin: 0 calc(-1 * var(--dashboard-gap) / 2);
        gap: 15px 0;
    }
    .dashboard-{
        padding: 0 calc(var(--dashboard-gap) / 2);
    }
    .dashboard-l{
        flex: 0 0 var(--dashboard-div);
        max-width: var(--dashboard-div);

        .btn{
            width: 100%;
            border-radius: 3px;
        }
    }
    .dashboard-r{
        flex: 0 0 calc(100% - var(--dashboard-div));
        max-width: calc(100% - var(--dashboard-div));
    }
    @media(width < 767px){
        .dashboard-l,
        .dashboard-r{
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
}


.chatbx {
    color: #333;

    .titlebx{

        padding: 0 0 15px;
        margin: 0 0 15px;
        border-bottom: 1px solid #333;

        .title{
            font-family: var(--ft-t1); 
            font-size: 120%;
            padding-right: 15px;
    
            .count {
                position: absolute; 
                padding: 3px 6px;
                border-radius: 3px;
                right: 12px;
                top: 0;
                background-color: rgb(226, 0, 0);
                color: #fff;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                translate: 100% -50%;
                gap: 6px;
            }
        }
    }
    
    .categorylistbx.main { 
        @media(width<991px){
            --listset-count: 1; 
        }

        & > .categorylistw > .categorybx{
            border: 1px solid #ccc;
            padding: 21px;
            border-radius: 21px;
        }

    }

    .categorylistbx.chatlist{
        --listset-gap-y: 0;
        --listset-count: 1; 
        font-size: 90%; 
        max-height: 350px;
        overflow: clip;
        overflow-y: auto;
 
        /* border: 1px solid #333; */
        border-radius: 6px;
        background: #eee;

        & > .categorylistw > .categorybx{ 
            padding: 15px;
            border-radius: 0;
            background-color: #eee;
            cursor: pointer; 
            transition: var(--theme-transition);

            .name{
                font-family: var(--ft-t1);
                border-bottom: 1px solid #ccc;
                padding: 0 0 6px;
                margin: 0 0 3px;
                color: var(--clr02);
                transition: var(--theme-transition);
            }

            .preview{
                --line: 2;
                font-size: 90%;
                transition: var(--theme-transition);
            }

            .noti {
                font-family: var(--ft-t1);
                text-align: right;
                margin: 6px 0 0;
                font-size: 80%;
                transition: var(--theme-transition);
            }

            &:hover{

                background-color: var(--clr01);

                .name, .preview, .noti{
                    color: #fff;
                    border-color: #fff;
                }
            }

        }
    }
}