/***************************************/
/*  #P9U  */
/***************************************/
    zls#zlsDiv.grid3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .zli{
            width:30%
        }
    }

    zls,zli{ display: block; }
    .zindex{
           /*display: flex;*/
        /*flex-direction: column;*/
        .zli { 
            display: flex;
            gap: 0.4rem;
            padding: 0.4rem; 
        }
        .zli:hover {
            background: #e0e0e0;
            border-radius: 0.6rem;
            cursor: pointer;
        }
        
        .zli.active{
            background: #e1e1e1;
            border-left: 2px solid #333;
            /*border-bottom: 1px solid #ccc;*/
        }

        .zli img{
            /*border: 1px solid #ccc;*/
            display:block;
            background: white;
        }
        .zli-title{
            font-weight: bold;
            font-size: 1.1em;
            padding: 0.3rem 0px 0.4rem 0px;
        }
        .zli-subTxt{
            color:#404040;
            word-spacing: -0.3rem;
        }

        .zli-A9{display: none;}
    

        .zli-A0{
            width:3rem;
            height: 3rem;
            border-radius: 2.5rem;
            overflow: hidden;
            display: flex;
            border: 1px solid #ccc;
            flex-shrink: 0;
        }

        
    }
    #zlsDiv  {  
        
        /*display: flex;*/
        /*flex-direction: column;*/
        .zli { padding: 0.4rem; }
        .zli:hover {
            background: #eee;
        }
        /*.zli-A0{
            
        }*/
        .zli img{
            border: 1px solid #ccc;
            display:block;
        }
        .zli-title{
            font-weight: bold;
            font-size: 1.1em;
            padding: 0.3rem 0px 0.4rem 0px;
        }
        .zli-subTxt{
            color:#404040;
            word-spacing: -0.3rem;
        }
        .zli.active{
            background: #eee;
            border-left: 2px solid #333;
            /*border-bottom: 1px solid #ccc;*/
        }
        /* .zli-A0.watched {
           opacity: 0.6; 
        }*/
        .zli-A9{display: none;}
    }


    

    #zlsDiv.ls-default,   .zls-default{
        .zli{
            display: flex;
            gap: 0.4rem;
        }
        .zli-A0{
            width:2.5rem;
            height: 2.5rem;
            border-radius: 0.2rem;
            overflow: hidden;
            display: flex;

        }
        
    }
    #zlsDiv.ls-vid, .zls-vid{
        .zli{
            display: flex;
            gap: 0.4rem;
        }
        .zli-A0{
            width:40%;
            display: flex;
            min-width: 40%;
            flex-grow: 0;

        }
        
    }

    #zlsDiv.ls-album, .zls-album{
        .zli{
            display: flex;
            gap: 0.4rem;
        }
        .zli-A0{
            width:30%;
            display: flex;

        }
        
    }
    #zlsDiv.ls-img2, .zls-img2 {
        /*list 2 image in one row*/
        flex-direction: row;
        flex-wrap: wrap;
        .zli{
            width:50%;
            gap: 0rem;
            padding: 0rem;
        }
        .zli-A0{
            width:100%
        }
        .zli-title, .zli-subTxt{
            display:none
        }   
        .zli.active{
            opacity:0.5;
        }
        .zli:hover{
            
            scale: 1.05;
        }
    }

    #zlsDiv.ls-product, .zls-product{
        line-height: 1.1rem;
        .zli {
            padding: 0.6rem;
            display: flex;
            gap: 0.6rem;
        }
        img{
        
            
            border: 1px solid #ccc;
            padding: 1rem;
        }
        .zli-title{
            padding:0;
            display: -webkit-inline-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 3;
            /* line-height: 1.5; */
            max-height: 4em;
        }
        .zli-A0 {
            border: 0px;
            background: white;
            width: 34%;
            flex-shrink: 1;
            flex-grow: 0;
            min-width: 34%;
            aspect-ratio: 1;
            height: fit-content;
            overflow: hidden;
        }
        .action-qty {
            display: flex;
            background: #444;
            
            width: fit-content;
            border-radius: 1rem;
            padding: 0rem 0.4rem;
            gap: 0.4rem;
            color: white;
            font-weight: bold;
            align-items: center;
            
            margin: 0.2rem 0 0.2rem auto;
                
        }.action-qty > *{
            padding: 0.3rem 0.6rem;
        }
        .action-qty-num{
            background: #ffffffdf;
            
            color: #444444;
        }
        

        
        

        .action-qty-rm, .action-qty-num{
            
            display: none;
        }
         
        .action-qty.active > .action-qty-rm, 
        .action-qty.active > .action-qty-num{
            display: block;
        }
    }