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

    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-manual{
    --icon-url: url(src/icon-manual.png)
}
.app-icon-event{
    --icon-url: url(src/icon-event.png)
} 
.app-icon-mailing{
    --icon-url: url(src/icon-mailing.png)
}
.app-icon-report{
    --icon-url: url(src/icon-report.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(--clr01);
    
    line-height: 1;
    color: #555;

    .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: #f8f8f8;
        }
        .listitm:nth-child(even){
            background-color: #eee;
        }

        .info-l{
            flex: 0 0 45px;
            max-width: 45px;
            padding: 0 9px 0 0;
        }
        .info-r{
            flex: 0 0 calc(100% - 45px);
            max-width: calc(100% - 45px);
            position: relative;
            
            
            .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 9px;
                background-color: #fff;
                border: 1px solid #ccc;
                color: #666;
                font-size: 90%;
                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)
                    }
                }
                &.green,
                &.ctlrEdit{
                    &:hover{
                        border-color: #97fda8;
                        background-color: #97fda8;
                        color: rgb(19, 87, 6)
                    }
                }
                &.red,
                &.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% - 60px);
        max-width: calc(100% - 60px);
    }
    .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: clip;

        &: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: #ccc;
            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%;
        }
        .dashboardw {
        flex-direction: column-reverse;
        }
    }

    
}

.dashboardmain .princingbx.categorylistbx {

    line-height: 1.5;
    margin-top: 21px;
    --listset-count: 3;

    @media(width<767px){
        --listset-count: 2;
    }
    @media(width<575px){
        --listset-count: 1;
    }

    .categorybx.princingbx-{
        text-align: center;
        border-radius: 15px;
        border: 3px solid #ddd;
        padding: 15px;
        color: #333;

        .btn {
            --btnbgclr: var(--clr01);
            border-radius: 3px;
        }
    }

    .infobx{
        margin-bottom: 21px;

        & > * ~ * {
            margin-top: 15px;
        }
    }
    .info-clarify{
        font-family: var(--ft-t1);
    }

    .info-pricing{
        font-size: 130%;
        font-family: var(--ft-t1);
        line-height: 1.3;

        .amount{
            font-size: 210%;
            color: var(--clr01);
        }
    }

    .btnbx{
        margin-top: auto;
    }
}


table.indicatorbx {
    color: #666;

    & th {
        & ~ & {
            text-align: center;
        }
    }

    & td {
        & ~ & {
            text-align: center;
        } 
    }


    .indicator {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1;
        cursor: pointer;
        border-radius: 3px;
        transition: .3s all ease;
        width: 30px;
        font-family: var(--ft-t1);
        background-color: var(--bgclr);
        color: var(--clr);

        &:hover{
            background-color: var(--bgclrhov);
            color: var(--clrhov);
        }

        &.s{
            --bgclr: #81d776;
            --clr: #327117; 
            --bgclrhov: var(--clr);
            --clrhov: var(--bgclr);
        } 
        &.rs{
            --bgclr: #81d776;
            --clr: #327117; 
            --bgclrhov: var(--clr);
            --clrhov: var(--bgclr);
        } 
        &.d{
            --bgclr: #e99d74;
            --clr: #ab4800; 
            --bgclrhov: var(--clr);
            --clrhov: var(--bgclr);
        } 
        &.r{
            --bgclr: #ffbbaa;
            --clr: rgb(119, 0, 0); 
            --bgclrhov: var(--clr);
            --clrhov: var(--bgclr);
        } 
        &.n{
            --bgclr: #ffaaaa;
            --clr: darkred; 
            --bgclrhov: var(--clr);
            --clrhov: var(--bgclr);
        } 
    }
    
}

.listitm .border_infobx,
.subscription_listbx {

    .ctlr_invoicebx{

        position: absolute;
        right: 0;
        top: 0; 

        @media(width < 575px){ 
            position: relative;
            margin: 6px 0 0;
        } 
    }

    .ctlrActivate{
        background-color: #d2ffd4 !important;
        color: #0a800e !important;
        border: 1px solid #0a800e !important;

        &:hover{
            background-color: #0a800e !important;
            color: #d2ffd4 !important;
        }
    }

    .subscription_info{
        font-size: 80%;
        font-family: var(--ft-t1);
        padding: 0 0 0 6px;
        border-left: 3px solid green;
    
        & > *  {
            margin-top: 6px; 
        }
    }
}

.invoice_infobx{
    .invoice_infow{
        padding: 15px;
        border: 1px solid #ccc;
        background-color: #eee;
        border-radius: 6px;
    }
    & img {
        max-height: 120px;
    }
    & h6 {
        & b {
            font-size: 75%;
            color: #777
        }
    }
}

.invoice_recordsbx{

    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 15px 0;
    padding: 15px;

    & h6 {
        margin: 0 0 6px;
    }

    .invoice_title{
        font-family: var(--ft-t1);
        font-size: 120%;

        & ~ * {
            margin-top: 6px;
        }
    }

    & [invoice_id] {
        border: 1px solid #ccc;
        background-color: #eee;
        padding: 15px;
        margin: 9px 0;
        line-height: 1;
        border-radius: 6px;
    }
}

.confirmation_detailbx {
    line-height: 1;
    font-family: var(--ft-t1);

    & > * {
        border-radius: 6px;
        border: 1px solid #ccc;
        padding: 15px;
        height: 100%;
    }

    & label{
        font-size: 80%;
    }
    .confirmation_detailw{
        & > * {
            margin: 30px 0;
        }
        .value{
            font-size: 130%;
            color: #000;
        }
    }

    .bill_amount{
        padding-top: 15px;
        border-top: 1px solid #ccc;

        .value{
            font-size: 210%;
        }
    }
}

.timebx {
    margin: 15px 0;
    --gap: 12px;
    border-top: 1px solid #ccc;
    padding-top: 15px;

    .timew{
        gap: var(--gap);
    }
    & select{
        width: auto;
    }
}

.revenuebx {
    background-color: #eee;
    border-radius: 6px;
    line-height: 1;

    .revenuew{
        padding: 21px;
    }

    .amount{
        font-size: 250%;
        font-family: var(--ft-t1);
        color: var(--clr01)
    }
}