.blueBtn {
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    height: 50px;
    transition: 0.4s;
    user-select: none;
    direction: rtl;
    width: 100%;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ColorBs);
    box-shadow: 0 0 5px -3px;
    border-radius: var(--CrsBorder);
    margin: 2px 0;
    /*background: var(--WtColor);*/
    background: var(--ColorVl);
}

    .blueBtn.NotRated {
        /*margin-top: 20px;*/
        margin-bottom: 45px;
    }

        .blueBtn.NotRated .RateHint {
            position: absolute;
            font-size: 10.5px;
            line-height: 22px;
            bottom: -26px;
            left: 12%;
            margin: 0 auto;
            width: 76%;
            text-align: center;
            border-bottom: 1.5px solid;
            white-space: pre;
            color: var(--OrangeBs);
            color: #ff9900;
        }

        .blueBtn.NotRated .TitleDivider:before {
            content: "\f005";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            font-size: 22px;
            color: #ffa500;
            text-shadow: 0 0 2px #000, 0 0 2px #000;
            line-height: inherit;
            text-align: center;
            display: inline-block;
            padding-left: 10px;
            vertical-align: top;
            animation: Blink 2s ease 12;
            /* color: var(--OrangeBs); */
        }


    .blueBtn .UserAvatar {
        margin: 0 2px;
    }

        .blueBtn .UserAvatar.Agent {
            filter: saturate(0.3);
        }

    .blueBtn .Btn {
        color: unset;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        border: 2px solid #ffffff;
        border: 2px solid var(--WtColor);
        font-size: 12px;
        line-height: 36px;
        margin: 0 2px;
        box-shadow: 0 0 2.5px, inset 0 0 5px;
        color: unset;
        position: relative;
        vertical-align: middle;
    }

        .blueBtn .Btn:before {
            vertical-align: top;
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            position: absolute;
            width: 36px;
            left: 0;
            top: 0;
        }

        .blueBtn .Btn:hover {
            transform: scale(1.05);
        }

        .blueBtn .Btn.NotBirthSet {
        }

            .blueBtn .Btn.NotBirthSet:before {
                content: "\f1fd";
                animation: Blink 1.5s normal ease infinite 0s;
            }

        .blueBtn .Btn.MitiKomon {
            display: inline-flex;
            justify-content: center;
            font-size: 15px;
            width: 64px;
            box-shadow: 0 0 2px, inset 0 0 5px var(--GreenBs);
            border-radius: 5px;
            background: var(--WtColor);
            height: 34px;
        }

            .blueBtn .Btn.MitiKomon:before {
                content: "\f890";
                /* animation: animateHeartBeat 5s infinite; */
                position: absolute;
                padding-top: 1px;
                color: var(--GreenBs);
                line-height: 30px;
            }

            .blueBtn .Btn.MitiKomon:after {
                content: "VIP";
                position: absolute;
                right: 0px;
                bottom: -1px;
                font-size: 13px;
                line-height: 36px;
                width: 40px;
                font-family: 'Sarbaz';
                color: var(--GreenBs);
                line-height: 30px;
            }

            .blueBtn .Btn.MitiKomon:hover {
                transform: scale(1);
            }

        .blueBtn .Btn.inGallery:before {
            content: "\f083";
        }

        .blueBtn .Btn.HaVideo {
        }

            .blueBtn .Btn.HaVideo:before {
                content: "\f03d";
            }

            .blueBtn .Btn.HaVideo.UnPay:before {
                opacity: 0.35;
            }

            .blueBtn .Btn.HaVideo[Price] {
                width: 66px;
                /*padding-right: 25px;*/
            }

                .blueBtn .Btn.HaVideo[Price]:after {
                    content: attr(Price);
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    font-size: 10px;
                    font-family: BComic;
                    letter-spacing: -0.5px;
                    line-height: 36px;
                    width: 40px;
                }

            .blueBtn .Btn.HaVideo.DoneV:not(.UnPay) {
            }

                .blueBtn .Btn.HaVideo.DoneV:not(.UnPay):before {
                    animation: Blink 1s infinite;
                    color: var(--RedBs);
                }

                .blueBtn .Btn.HaVideo.DoneV:not(.UnPay):after {
                }

            .blueBtn .Btn.HaVideo.inQueue {
            }

                .blueBtn .Btn.HaVideo.inQueue:before {
                    color: var(--GreenBs);
                }

            .blueBtn .Btn.HaVideo.Filming {
            }

                .blueBtn .Btn.HaVideo.Filming:before {
                    color: var(--GreenBs);
                    content: "\f51f";
                    animation: D360 1.5s linear infinite !important;
                    font-size: 19px;
                }

        .blueBtn .Btn.VideoCount {
            color: #ba00f7;
        }

            .blueBtn .Btn.VideoCount:before {
                content: "\f03d";
            }

            .blueBtn .Btn.VideoCount[Count] {
                width: 70px;
                padding-right: 25px;
            }

                .blueBtn .Btn.VideoCount[Count]:after {
                    content: attr(Count);
                    position: absolute;
                    right: 4px;
                    bottom: 0;
                    font-size: 13px;
                    font-family: IranSans;
                    line-height: 34px;
                    width: 32px;
                }

        .blueBtn .Btn.NoVidWhile {
            color: var(--GreenBs);
        }

            .blueBtn .Btn.NoVidWhile:before {
                content: "\f013";
            }

        .blueBtn .Btn.MojFiles {
        }

            .blueBtn .Btn.MojFiles:before {
                content: "\f1c6";
            }

            .blueBtn .Btn.MojFiles h6 {
                width: 15px;
                line-height: 15px;
                height: 15px;
                background: var(--WtColor);
                border-radius: 15px;
                box-shadow: 0 0 4px 1px;
                position: absolute;
                bottom: -1px;
                left: 2px;
                font-size: 9px;
                font-family: 'BComic';
            }

        .blueBtn .Btn.HaMater {
            /*color: #e400ff;*/
        }

            .blueBtn .Btn.HaMater:before {
                content: "\f53f";
            }

        .blueBtn .Btn.HaVariz {
            color: var(--GreenBs);
            background: var(--GreenLt);
        }

            .blueBtn .Btn.HaVariz:before {
                content: "\f00c";
                font-size: 37px;
                position: absolute;
                left: 7px;
                top: -1px;
                color: var(--WtColor);
                text-shadow: 0 0 3px var(--GreenBs), 0 0 3px var(--GreenBs), 0 0 3px var(--GreenBs), 0 0 3px var(--GreenBs);
            }

        .blueBtn .Btn.CutInclude {
            width: 40px;
            /*box-shadow: 0 0 4px, inset 0 0 7px 2px #f00;*/
        }

            .blueBtn .Btn.CutInclude:before {
                color: #f00;
                content: "\f0c4";
            }

            .blueBtn .Btn.CutInclude.CutDone:before {
                color: var(--GreenBs);
            }

            .blueBtn .Btn.CutInclude[Price] {
                width: 58px;
            }

                .blueBtn .Btn.CutInclude[Price]:after {
                    content: attr(Price);
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    font-size: 11px;
                    font-family: BComic;
                    line-height: 36px;
                    width: 36px;
                }

                .blueBtn .Btn.CutInclude[Price].Payed:after {
                    color: var(--GreenBs);
                }

        .blueBtn .Btn.UnDead {
            display: inline-flex;
            justify-content: center;
        }

            .blueBtn .Btn.UnDead:before {
                content: "\f54c";
                color: var(--RedBs);
                animation: Blink 2s normal ease infinite 0s;
            }

        .blueBtn .Btn.PrjView {
            line-height: 32px;
            font-family: BComic;
            font-size: 12px;
            width: 60px;
            border-radius: 20px;
            width: 40px;
        }

            .blueBtn .Btn.PrjView:before {
                content: "\f06e";
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                line-height: 10px;
                display: inline-block;
                top: 23px;
                position: absolute;
                width: 100%;
                left: 0;
                font-size: 9px;
                opacity: 0.7;
            }

            .blueBtn .Btn.PrjView .SumClicks {
                position: absolute;
                top: 0px;
                left: 0;
                font-weight: 900;
                line-height: 10px;
                display: inline-block;
                width: 100%;
                font-size: 8px;
                opacity: 0.7;
            }

        .blueBtn .Btn.CanTalk {
            box-shadow: unset !important;
            width: 15px !important;
            border: unset !important;
            font-size: 10.5px !important;
            margin: 0 2px 0 0;
        }

            .blueBtn .Btn.CanTalk:before {
                content: "\f3c9";
                width: 15px;
            }

            .blueBtn .Btn.CanTalk.Install {
            }

                .blueBtn .Btn.CanTalk.Install:before {
                    opacity: 0.25;
                }

            .blueBtn .Btn.CanTalk.Done {
                box-shadow: 0 0 4px, inset 0 0 7px 2px var(--GreenBs);
            }

                .blueBtn .Btn.CanTalk.Done:before {
                    color: var(--GreenBs);
                }

            .blueBtn .Btn.CanTalk.fab {
            }

                .blueBtn .Btn.CanTalk.fab:before {
                    content: "\f179" !important;
                    font-family: "Font Awesome 6 Brands";
                }

            .blueBtn .Btn.CanTalk:Not(.fas).NoLastVersion {
                font-size: 13px;
            }

                .blueBtn .Btn.CanTalk:Not(.fas).NoLastVersion:before {
                    content: "\f131";
                    opacity: 0.4;
                }

            .blueBtn .Btn.CanTalk:Not(.fas).FullyUpdated {
                font-size: 23px;
                text-align: center;
            }

                .blueBtn .Btn.CanTalk:Not(.fas).FullyUpdated:before {
                    content: "\f028";
                    opacity: 1.0;
                    font-size: 11px;
                    text-align: center;
                    width: 22px;
                    color: var(--GreenBs);
                    height: 22px;
                    line-height: 22px;
                    box-shadow: 0 0 3px 1px;
                    border-radius: 50%;
                    top: 9px;
                    background: var(--GreenVl);
                    left: 4px;
                }

        .blueBtn .Btn.Conflict:before {
            content: "\f500";
        }

        .blueBtn .Btn.WaitCall {
        }

            .blueBtn .Btn.WaitCall:before {
                content: "\e223";
                color: var(--GreenBs);
            }

        .blueBtn .Btn.Taghirat {
        }

            .blueBtn .Btn.Taghirat:before {
                content: "\f6e3";
                color: var(--GreenBs);
            }

        .blueBtn .Btn.PrePayment {
        }

            .blueBtn .Btn.PrePayment:before {
                content: "\f51e";
                color: var(--GreenBs);
            }

        .blueBtn .Btn.FreeGift {
            width: 75px;
            direction: ltr;
            background: var(--GreenVl);
        }

            .blueBtn .Btn.FreeGift:before {
                content: "\f06b";
            }

            .blueBtn .Btn.FreeGift:after {
                content: "Gift";
                font-family: 'BComic';
                padding-left: 7px;
                font-size: 13px;
                vertical-align: top;
            }

        .blueBtn .Btn.Changed {
            color: #000;
            box-shadow: 0 0 4px, inset 0 0 9px, inset 0 0 9px;
        }

            .blueBtn .Btn.Changed.FromIraj {
                box-shadow: 0 0 6px, inset 0 0 12px, inset 0 0 12px, inset 0 0 12px, inset 0 0 8px;
            }

        .blueBtn .Btn.Painting {
            box-shadow: 0 0 2.5px, inset 0 0 5px var(--GreenBs);
            display: inline-flex;
            justify-content: center;
        }

            .blueBtn .Btn.Painting:before {
                content: "\f3f4";
                /* content: "\f1ce"; */
                /* content: "\e1d4"; */
                /* animation: D360 6s linear infinite, Blink 4s linear infinite; */
                animation: D360 2s linear infinite;
                font-size: 17px;
                color: var(--GreenBs);
            }

        .blueBtn .Btn.FromGround {
            box-shadow: 0 0 2.5px, inset 0 0 5px 1px var(--GreenBs);
            display: inline-flex;
            justify-content: center;
        }

            .blueBtn .Btn.FromGround:before {
                content: "\f0ec";
                font-size: 14px;
                color: var(--GreenBs);
                transform: rotate(-20deg);
            }

        .blueBtn .Btn.PutsOnGround {
            box-shadow: 0 0 2.5px, inset 0 0 5px 1px var(--GreenBs);
            display: inline-flex;
            justify-content: center;
        }

            .blueBtn .Btn.PutsOnGround:before {
                content: "\f2f1";
                font-size: 18px;
                color: var(--GreenBs);
                animation: D360 5s linear infinite;
                top: 0px;
                left: 0px;
                width: 35px;
                line-height: 35px;
                height: 35px;
            }

        .blueBtn .Btn.Delete {
            color: var(--RedBs);
        }

            .blueBtn .Btn.Delete:before {
                color: unset;
            }

            .blueBtn .Btn.Delete:after {
                font-family: "Font Awesome 6 Pro";
                content: "\f00d";
                position: absolute;
                font-size: 12px;
                width: 100%;
                left: 0;
                bottom: 0;
                -webkit-text-stroke: 3px var(--WtColor);
                paint-order: stroke fill;
                line-height: 20px;
            }

        .blueBtn .Btn.ItsDone {
            color: var(--GreenBs);
        }

        .blueBtn .Btn.Done:before {
            color: unset;
        }

        .blueBtn .Btn.ItsDone:after {
            font-family: "Font Awesome 6 Pro";
            content: "\f00c";
            position: absolute;
            font-size: 12px;
            width: 100%;
            left: 0;
            bottom: 0;
            -webkit-text-stroke: 3px var(--WtColor);
            paint-order: stroke fill;
            line-height: 20px;
        }

    .blueBtn .Lbl.Schedule {
        position: absolute;
        line-height: 18px;
        left: 47px;
        background: var(--GreenBs);
        border-radius: 10px;
        color: var(--WtColor);
        width: 48px;
        font-family: BComic;
        font-size: 9px;
        box-shadow: 0 0 0 1.5px var(--WtColor);
        bottom: 2px;
        z-index: 10;
        white-space: pre;
    }

        .blueBtn .Lbl.Schedule:hover {
            transform: scale(1.1);
        }

        .blueBtn .Lbl.Schedule.Force {
            background: var(--RedBs);
            animation: animateHeartBeat 5s infinite;
        }

        .blueBtn .Lbl.Schedule.Done {
            width: 14px;
            left: 64px;
            line-height: 14px;
            height: 14px;
            pointer-events: none;
            font-size: 8px;
        }

            .blueBtn .Lbl.Schedule.Done:before {
                font-family: "Font Awesome 6 Pro";
                content: "\f00c";
            }

    .blueBtn .AvatarDivider {
        float: right;
        position: relative;
        line-height: 50px;
        right: 7px;
    }

        .blueBtn .AvatarDivider span {
            padding: 0 5px;
            line-height: 50px;
            display: inline-block;
            vertical-align: top;
        }

            .blueBtn .AvatarDivider span.cCode {
                font-size: 8.7px;
                display: inline-block;
                padding: 0 2px;
                opacity: 0.7;
            }

        .blueBtn .AvatarDivider.NewCus:before {
            position: absolute;
            bottom: 0px;
            font-size: 8px;
            color: #fff;
            text-shadow: 0 0 2px #000, 0 0 2px #000;
            font-family: BComic;
            direction: ltr;
            right: -5px;
            z-index: 10;
            line-height: 10px;
        }

        .blueBtn .AvatarDivider.NewCus.UpCost {
        }

            .blueBtn .AvatarDivider.NewCus.UpCost:before {
                font-size: 10px;
                right: 2px;
                bottom: 0;
                font-family: "Font Awesome 6 Pro";
                content: '\f106';
                color: unset;
                pointer-events: none;
                width: 40px;
                line-height: 10px;
                text-shadow: unset;
            }

            .blueBtn .AvatarDivider.NewCus.UpCost.New:before {
                content: '\f102';
            }

        .blueBtn .AvatarDivider .CusCrown {
            position: absolute;
            z-index: 100;
            right: -2px;
            top: 3px;
            line-height: 16px;
            width: 18px;
            transform: rotate(45deg);
            font-size: 13px;
            user-select: none;
            -webkit-text-stroke: 2px var(--WtColor);
            paint-order: stroke fill;
        }

    .blueBtn .TitleDivider {
        float: right;
        padding: 0 10px 0 0;
        top: 0;
        position: relative;
        line-height: 50px;
        max-width: calc(100% - 170px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .blueBtn .PrjNo {
        opacity: 0.6;
        display: inline-block;
        font-size: 11px;
        padding: 0 0 0 12px !important;
        position: relative;
        vertical-align: top;
        width: 30px;
        direction: ltr !important;
        /* letter-spacing: -0.5px; */
    }

        .blueBtn .PrjNo.Hide {
            width: 0;
            opacity: 0;
            padding: 0 !important;
        }

        .blueBtn .PrjNo:after {
            content: "\f104";
            font-family: "Font Awesome 6 Pro";
            font-size: 14px;
            position: absolute;
            top: 18px;
            left: 6px;
            line-height: 10px;
            font-size: 10px;
        }

    .blueBtn .NameDivder {
        position: absolute;
        left: 0;
        padding-left: 5px;
        line-height: 50px;
    }

        .blueBtn .NameDivder .Archv {
            display: inline-block;
            width: 45px;
            height: 20px;
            border-radius: 3px;
            font-size: 8.5px;
            line-height: 20px;
            margin: 0 10px;
            box-shadow: 0 0 3px, 0 0 1px;
            vertical-align: middle;
            color: var(--RedBs);
            background: var(--RedVl);
            font-family: unset;
            border: none;
        }

        .blueBtn .NameDivder .PrjPrice {
            width: 40px;
            display: inline-block;
            font-family: BComic;
            font-size: 12px;
            letter-spacing: -0.5px;
            vertical-align: middle;
            margin: 0 2px;
            position: relative;
        }

            .blueBtn .NameDivder .PrjPrice.Payed {
                box-shadow: 0 0 8px 2px, inset 0 0 8px 2px;
                color: #00a903;
            }

            /*.blueBtn .NameDivder .PrjPrice .Label {
                font-family: 'IranSans';
                position: absolute;
                font-size: 7.5px;
                line-height: 8px;
                top: 4px;
                left: 5px;
                width: 30px;
                background: var(--WtColor);
                box-shadow: 0 0 2px 0.5px;
                border-radius: 3px;
                padding: 2px 3px 0;
                direction: ltr;
            }*/

            .blueBtn .NameDivder .PrjPrice .Label {
                position: absolute;
                font-size: 7.5px;
                line-height: 13px;
                top: 3px;
                left: 2px;
                width: 36px;
                background: var(--ColorBs);
                border-radius: 3px;
                direction: ltr;
                font-family: 'BComic';
                color: var(--WtColor);
                opacity: 0.3;
            }

            .blueBtn .NameDivder .PrjPrice.Btn .Label {
                left: 0px;
                top: -4px;
                opacity: 0.8;
            }

        .blueBtn .NameDivder .ProjRate {
            position: absolute;
            left: 18px;
            width: 18px;
            top: 36px;
            font-size: 8px;
            font-family: BComic;
            line-height: 10px;
            margin: 0;
            border-top: 1px solid;
            opacity: 0.5;
            font-weight: 900;
        }

            .blueBtn .NameDivder .ProjRate:before {
                font-family: "Font Awesome 6 Pro";
                font-size: 7px;
            }

            .blueBtn .NameDivder .ProjRate.RateFuck {
                opacity: 1;
                font-size: 9px;
            }

    .blueBtn:hover {
        z-index: 2;
        background: var(--ColorLt) !important;
    }

        .blueBtn:hover .NameDivder .ProjRate {
            opacity: 0.8 !important;
        }

    .blueBtn .AvatarDivider:hover .cCode {
        opacity: 1;
        font-size: 10px;
        padding-right: 8px;
    }

    .blueBtn .AvatarDivider:hover .PrjNo,
    .blueBtn .TitleDivider:hover .PrjNo {
        width: 48px;
        opacity: 0.8;
        padding: 0 0 0 12px !important;
    }

    .blueBtn.DeletedProj {
        height: 25px;
        filter: grayscale(1);
        opacity: 0.4;
        pointer-events: none;
    }

        .blueBtn.DeletedProj > * {
            zoom: 0.5;
        }

    .blueBtn.NotImp {
        filter: grayscale(1) !important;
    }

        .blueBtn.NotImp > * {
            opacity: 0.20;
        }

        .blueBtn.NotImp:before {
            opacity: 0.2;
        }

        .blueBtn.NotImp:hover > * {
            opacity: 0.7;
        }


    .blueBtn.UpdatedProj {
        box-shadow: 0 0 2px 0.3px, inset 0 0 30px !important;
        transition: 1s;
    }

    .blueBtn.unDoneProj {
        --ColorBs: var(--OrangeBs);
        --ColorVl: var(--OrangeVl);
        --ColorLt: var(--OrangeLt);
        background: var(--OrangeVl);
    }

    .blueBtn.Pin {
        /*filter: drop-shadow(0 0 10px #000) !important;*/
        z-index: 3;
    }

        .blueBtn.Pin:after {
            font-family: "Font Awesome 6 Pro";
            content: "\f08d";
            font-size: 14px;
            line-height: 22px;
            width: 20px;
            left: 0;
            top: 0;
            position: absolute;
            -webkit-text-stroke: 3px var(--WtColor);
            paint-order: stroke fill;
        }

    .blueBtn.Baner.FreeGift {
        /*color: var(--GreenBs);*/
        /*background: var(--GreenVl);*/
    }

        .blueBtn.Baner.FreeGift:before {
            content: 'Gift!';
        }

    .blueBtn .ProjEdit {
        width: 100%;
        position: absolute;
        text-align: center;
        left: 0;
        line-height: 24px;
        top: 50px;
        display: flex;
        justify-content: center;
        z-index: 10;
        padding: 8px 0;
    }

        .blueBtn .ProjEdit .DeliBtn {
            position: relative;
            width: 8%;
            margin: 0 3%;
            display: inline-flex;
            font-size: 11px;
            line-height: inherit;
            vertical-align: middle;
            cursor: cell;
            justify-content: center;
        }

            .blueBtn .ProjEdit .DeliBtn:before {
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                font-size: 15px;
                padding: 0 4px;
                vertical-align: middle;
            }

            .blueBtn .ProjEdit .DeliBtn:hover {
                padding-top: 2px;
            }
    /*.blueBtn .ProjEditCus {
        position: relative;
        padding: 58px 5px 0;
    }*/

    .blueBtn.Mention {
    }

        .blueBtn.Mention:before {
            content: "\f0a4";
            font-family: "Font Awesome 6 Pro";
            font-size: 26px;
            position: absolute;
            right: 160px;
            animation: MentionPrj 1.2s linear infinite;
            margin-top: 0px;
            line-height: 50px;
            color: var(--GreenVl);
            text-shadow: 0 0 2px var(--GreenBs), 0 0 2px var(--GreenBs), 0 0 2px var(--GreenBs);
        }

    .blueBtn:has(.Archv) > * {
        opacity: 0.5;
    }

    .blueBtn .PrjHint {
        width: 100%;
        font-size: 10px;
        text-align: center;
        line-height: 30px;
        position: absolute;
        bottom: 5px;
        opacity: 0.7;
    }

.Important .blueBtn.NotImp {
    display: none;
}

@keyframes MentionPrj {
    65% {
        right: 100px;
    }
}

.Baner {
    /*overflow: hidden;*/
}

    .Baner:before {
        /*position: absolute;
        pointer-events: none;
        font-family: BComic;
        font-weight: 900;
        z-index: 10;
        transform: rotate(45deg);
        padding: 0px;
        direction: ltr;
        letter-spacing: -0.3px;
        color: unset;
        text-shadow: none;
        box-shadow: none;
        opacity: 0.7;
        border: 1px solid;
        font-size: 11px;
        line-height: 16px;
        width: 65px;
        right: -16px;
        top: 7px;
        background: var(--WtColor) !important;*/
        position: absolute;
        pointer-events: none;
        font-family: BComic;
        z-index: 10;
        padding: 0px;
        direction: ltr;
        letter-spacing: -0.3px;
        text-shadow: none;
        opacity: 0.8;
        border-radius: 4px;
        font-size: 7.5px;
        line-height: 12px;
        width: 34px;
        right: 12px;
        top: 36px;
        background: var(--ColorBs);
        color: var(--WtColor);
    }

    .Baner.FakeFak {
    }

        .Baner.FakeFak:before {
            content: 'Fake';
            background: #ffffffc7;
        }

        .Baner.FakeFak > * {
            opacity: 0.4;
            filter: grayscale(0.7) blur(1px);
        }

        .Baner.FakeFak:hover > * {
            opacity: 0.6;
            filter: grayscale(0.7);
        }

    .Baner.Mostafa {
        /*color: #38a500;*/
    }

        .Baner.Mostafa:before {
            content: 'Most';
            background: var(--GreenBs);
        }

    .Baner.A30 {
        /*color: #00d4ea;*/
    }

        .Baner.A30:before {
            content: 'A30';
            background: #00adbf;
            opacity: 0.8;
        }

    .Baner.N2020 {
    }

        .Baner.N2020:before {
            content: '2020';
            background: var(--PurpleBs);
            opacity: 0.8;
        }

    .Baner.Newbie {
    }

        .Baner.Newbie:before {
            content: 'Newbie';
        }

    .Baner.Weak {
        --ColorBs: var(--RedBs);
        --ColorVl: var(--RedVl);
        --ColorLt: var(--RedLt);
        background: var(--ColorVl);
    }

        .Baner.Weak:before {
            /*content: 'Weak';
            background: #d20000 !important;
            color: #fff;
            opacity: 1;
            box-shadow: 0 0 10px 2px #d20000;*/
            content: 'Weak';
            opacity: 1;
            /*box-shadow: 0 0 7px 2px;*/
        }

        .Baner.Weak .UserAvatar {
            /*box-shadow: 0 0 12px 4px;*/
        }

        .Baner.Weak .NameDivder .UserAvatar {
            /*animation: Blink 1s normal ease infinite 0s;*/
        }

    .Baner.FromClo {
        background: var(--WtColor) !important;
    }

        .Baner.FromClo:before {
            content: 'C-Lo';
            background: #7d3a0a;
        }

        .Baner.FromClo > * {
            pointer-events: none;
            filter: hue-rotate(180deg);
            -webkit-filter: hue-rotate(180deg);
        }

.PrjHead {
    animation: none !important;
    transform: none !important;
    user-select: none;
}

    .PrjHead .SortBox {
        line-height: 50px;
        text-align: right;
        padding-right: 110px;
        direction: rtl;
        white-space: pre;
    }

        .PrjHead .SortBox:before {
            content: "\f884"; /*fa-arrow-down-short-wide*/
            font-family: "Font Awesome 6 Pro";
            position: absolute;
            right: 36px;
            opacity: 0.7;
        }

        .PrjHead .SortBox:after {
            content: "تَرتیبـــ";
            position: absolute;
            right: 63px;
            font-size: 12px;
            opacity: 0.7;
        }

        .PrjHead .SortBox:hover:after {
            right: 67px;
        }

        .PrjHead .SortBox .SortItem {
            line-height: inherit;
            font-size: inherit;
            display: inline-block;
            width: 42px;
            text-align: center;
            cursor: pointer;
            opacity: 0.8;
            font-size: 17px;
        }

            .PrjHead .SortBox .SortItem:before {
                font-family: "Font Awesome 6 Pro";
            }

            .PrjHead .SortBox .SortItem:hover {
                opacity: 1;
            }

            .PrjHead .SortBox .SortItem.Selected {
                color: var(--OrangeBs);
            }

.SmartSplit {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    padding: 0 0;
    width: 100%;
    margin: 0;
    height: 100%; /* New */
}

.BySide {
    overflow: auto;
    overflow-x: hidden;
    padding: 2px 5px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.FullPage {
    height: 100%;
}

.BySide {
    /*height: calc(100% - 50px);*/
    height: 100%;
}

.GalryBase {
    height: 100%;
}

.ProjListCus {
    padding-top: 280px;
}

#ProjList {
}

    #ProjList:after {
        content: "\f2f1";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        right: calc(50% - 18px);
        top: 220px;
        font-size: 20px;
        width: 36px;
        background: var(--WtColor);
        border-radius: 50%;
        box-shadow: 0 0 5px 2px;
        line-height: 36px;
        transition: 0.4s;
        opacity: 0;
    }

    #ProjList.Moving {
        transition: 0s;
    }

        #ProjList.Moving:after {
            opacity: 1;
        }

        #ProjList.Moving.OkRelease:after {
            color: var(--GreenBs);
            background: var(--GreenVl);
            transform: rotate(45deg);
        }

.newProj {
    display: inline-block;
    border-radius: var(--CrsBorder);
    width: 74%;
    max-width: 100%;
    height: 56px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    right: 13%;
    top: 75px;
    box-shadow: var(--CrsFadeShadow);
    background: linear-gradient(0, var(--GreenLt) -50%, var(--WtColor) 60%);
    /*background: linear-gradient(0, var(--GreenLt) 10%, var(--WtColor) 70%);*/
    border: 2px solid var(--WtColor);
    min-width: 100px;
}

    .newProj:after {
        position: absolute;
        right: 15px;
        font-size: 35px;
        bottom: 0;
        line-height: 52px;
        width: 50px;
        content: "\f067";
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        color: var(--GreenBs);
        animation: PlusBold 22s forwards ease-in-out infinite 1s;
        /*content: '';
        background-size: contain;
        opacity: 0.9;
        background-image: url(../images/Theme/Haloween.png);
        height: 42px;
        width: 42px;
        margin: 4px;*/
    }

    .newProj:before {
        content: "";
        width: 60px;
        height: 12px;
        position: absolute;
        background: #242424;
        left: -16px;
        top: 9px;
        transform: rotate(-45deg);
        display: none;
    }

    .newProj h2 {
        line-height: 52px;
        font-size: 19px;
        width: 100%;
        padding: 0 40px 0 0;
        font-weight: 900;
        color: var(--GreenBs);
        font-family: 'Sarbaz';
        font-weight: 500;
        direction: rtl;
        /*font-family: IranSansXV;*/
    }

    .newProj.newProjADD {
        direction: rtl;
        height: auto;
        border-radius: calc(var(--CrsBorder) + 5px);
        width: 98%;
        margin: 2px auto;
        /*max-height: calc(100vh - 80px);*/
        max-height: calc(100vh - 67px);
        overflow: auto;
        right: 1%;
        top: 60px !important;
        background: var(--BgColor);
        /*box-shadow: 0 0 10px 0 #000;*/
        box-shadow: 0 0 7px 3px var(--ColorBs);
        padding: 5px;
        min-width: 340px;
        border-radius: 5px;
    }

        .newProj.newProjADD > span {
            display: block;
        }

        .newProj.newProjADD > input {
            display: block;
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }

        .newProj.newProjADD > h2, .newProjADD:after {
            display: none;
        }

.ShobeBox {
    height: 80px;
    overflow-x: hidden !important;
}

    .ShobeBox .ShobeBoss {
    }

        .ShobeBox .ShobeBoss img {
            filter: opacity(0.5) grayscale(1);
        }

        .ShobeBox .ShobeBoss span {
            opacity: 0.8;
        }

    .ShobeBox .UserDiv.ShobeSelc {
        margin: 0 7px;
    }

    .ShobeBox .ShobeBoxHome {
        margin: 14px 0 10px 10px;
        width: 32px;
        line-height: 26px;
        vertical-align: top;
        border-left: 2px solid var(--ColorBs);
        font-size: 15px;
        opacity: 0.7;
    }

    .ShobeBox .ShobeBoss.ShobeSelc:after {
        content: '\f00c';
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        color: var(--GreenLt);
        position: absolute;
        bottom: 15px;
        right: -5px;
        font-size: 28px;
        text-shadow: 0 0 2px #000, 0 0 2px #000;
        animation: Append 0.7s forwards;
        line-height: 22px;
    }

    .ShobeBox .ShobeBoss.ShobeSelc img {
        filter: unset;
        transform: scale(1.08);
        box-shadow: 0 0 2px 2px var(--GreenBs);
    }

    .ShobeBox .ShobeBoss.ShobeSelc span {
        bottom: -17px;
        font-size: 9.5px;
    }

    .ShobeBox .Recomend {
        /*transform: scale(1.1);*/
        margin: 0 7px;
    }

        .ShobeBox .Recomend:after {
            content: '\f19d';
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            color: #ffeb00;
            position: absolute;
            top: -3px;
            right: 0px;
            font-size: 15px;
            transform: rotate(35deg);
            text-shadow: 0 0 3px #000;
        }

.ShobeBoss {
}

    .ShobeBoss img {
    }

    .ShobeBoss span {
        font-size: 8.5px;
        position: absolute;
        left: 0;
        bottom: -13px;
        width: 100%;
        line-height: 12px;
    }

.SelectMojri {
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 6px 5px;
    user-select: none;
    direction: rtl;
}

    .SelectMojri .UserDiv {
        position: relative;
        display: inline-block;
        vertical-align: top;
        max-width: 50px;
        min-width: 50px;
        height: 50px;
        line-height: 50px;
        margin: 0 1px;
        cursor: pointer;
    }

        .SelectMojri .UserDiv img {
            width: 100%;
            height: 100%;
            min-width: 100%;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 2px;
            background: var(--WtColor);
            padding: 2px;
        }

        .SelectMojri .UserDiv.SelectedMoj {
            margin: 0 5px !important;
        }

            .SelectMojri .UserDiv.SelectedMoj img {
                transform: scale(1.1);
            }

            .SelectMojri .UserDiv.SelectedMoj:after {
                content: '\f00c';
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                color: var(--GreenLt);
                position: absolute;
                top: -8px;
                left: 2px;
                width: 100%;
                font-size: 22px;
                text-shadow: 0 0 2px #000, 0 0 2px #000;
                line-height: 25px;
                animation: Append 1s forwards;
            }

    .SelectMojri .MojIMGNew::after {
        content: 'جدید';
        position: absolute;
        right: 12px;
        bottom: -6px;
        direction: ltr;
        font-size: 14px;
        text-shadow: 0 0 3px #f00, 0 0 2px #f00, 0 0 2px #f00, 0 0 2px #f00;
        color: #fff;
    }

    .SelectMojri .Crown:before {
        content: "\f521";
        position: absolute;
        top: -3px;
        font-size: 14px;
        color: #fff34a;
        /* text-shadow: 0 0 2px #833, 0 0 2px #833, 0 0 2px #833; */
        -webkit-text-stroke: 2px #6f2c12;
        paint-order: stroke fill;
        left: 0;
        text-align: center;
        transition: 0.8s;
        transform: rotate(-35deg);
        font-family: "Font Awesome 6 Pro";
        line-height: 20px;
        width: 25px;
        pointer-events: none;
        z-index: 1;
    }

    .SelectMojri .Crown.Gray:before {
        font-size: 13px;
        filter: grayscale(1);
    }

    .SelectMojri .SelectedMoj.Crown:before {
        top: 34px;
        left: 0;
        transform: scale(1.3);
        width: 100%;
    }

    .SelectMojri .UserDiv.MojOff {
    }

        .SelectMojri .UserDiv.MojOff img {
            filter: opacity(0.5) grayscale(0.8);
        }

        .SelectMojri .UserDiv.MojOff:before {
            content: '\f011';
            font-family: "Font Awesome 6 Pro";
            line-height: inherit;
            font-size: 18px;
            text-shadow: 0 0 4px #000, 0 0 5px #000;
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            z-index: 1;
            color: #fff;
            pointer-events: none;
            opacity: 0.8;
        }

        .SelectMojri .UserDiv.MojOff:after {
            display: none;
        }


    .SelectMojri .MojSepr {
        border-left: 2px solid;
        margin: 18px 5px 5px;
        height: 20px;
        display: inline-block;
        opacity: 0.5;
    }

.CustmBase .SelectMojri .UserDiv.MojOff {
    pointer-events: none;
}

/*@keyframes GlassReflect {
    0% {
        left: -180px;
    }

    100% {
        left: 101%;
    }
}*/

.MojReview {
    width: 100%;
    position: relative;
    padding: 10px 0 2px;
    max-height: 1000px;
    user-select: none;
    direction: rtl;
    line-height: 20px;
    margin-top: 18px;
}

    .MojReview .MojRevIMG {
        width: 240px;
        height: 240px;
        border-radius: 50%;
        display: inline-block;
        margin: 0 0 0 60px;
        background: #f3fcff;
        transform: scale(1);
        overflow: hidden;
        vertical-align: top;
        box-shadow: 0 0 5px -1px;
        border: 3px solid var(--WtColor);
        transition: 0.9s;
    }

        .MojReview .MojRevIMG:before {
            content: '';
            width: 120px;
            height: 100%;
            position: absolute;
            z-index: 1;
            left: 240px;
            background: #ffffff99;
            background: linear-gradient(100deg, #fff0 25%, #ffffffbf 45% 55%, #fff0 75%);
            pointer-events: none;
            transition: 1.7s;
            transition-delay: 5.6s;
        }

        .MojReview .MojRevIMG img {
            width: auto;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .MojReview .MojRevIMG:hover img {
            transform: scale(1.05);
        }

        .MojReview .MojRevIMG .MojIDTxt {
            background: var(--ColorVl);
            /*backdrop-filter: blur(5px);*/
            position: absolute;
            bottom: 50px;
            left: -4px;
            font-size: 13px;
            line-height: 25px;
            width: 80px;
            border-radius: 6px;
            padding-left: 15px;
        }

    .MojReview > .MojName {
        font-size: 14px;
        text-align: center;
        padding: 0px 0;
        font-weight: 900;
        line-height: 32px;
        width: 220px;
        position: absolute;
        left: calc(50% - 80px);
        top: 219px;
        border-radius: 10px;
        box-shadow: 0 0 3px;
        border: 2px solid var(--WtColor);
        background: var(--ColorVl);
        padding-left: 80px;
        cursor: pointer;
        transition-delay: 0.4s;
        font-family: Sarbaz;
    }

        .MojReview > .MojName:hover {
            background: var(--ColorLt);
        }

    .MojReview .MojRevBio {
        width: 140px;
        display: inline-block;
        text-align: center;
        font-size: 8px;
        overflow: hidden;
        vertical-align: top;
        position: absolute;
        right: calc(50% - 30px - 70px);
        top: 195px;
        color: #fff;
        text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px #000;
        transition-delay: 1.7s;
    }

        .MojReview .MojRevBio > span {
            width: 50%;
            display: inline-block;
            line-height: 27px;
            white-space: pre;
            position: relative;
            text-align: center;
            padding: 0;
        }

    .MojReview .LSeenTxt {
        position: absolute;
        left: calc(50% - 76px);
        top: 222px;
        line-height: 30px;
        color: var(--ColorBs);
        text-align: left;
        font-size: 8.5px;
        padding-left: 25px;
        white-space: pre;
        z-index: 1;
        opacity: 0.7;
        cursor: pointer;
        transition-delay: 0.6s;
    }

        .MojReview .LSeenTxt:before {
            content: "\f2bd";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            position: absolute;
            left: 0;
            z-index: 2;
            line-height: inherit;
            font-size: 12px;
            opacity: 0.8;
            width: 25px;
            text-align: center;
        }


    .MojReview.Online .LSeenTxt {
        color: var(--GreenBs);
    }

    .MojReview .MojGaley {
        display: block;
        width: calc(100% - 4px);
        margin: 6px auto 30px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 0 3px -1px, inset 0 0 6px -2px;
        border-radius: 27px;
        border: 2px solid var(--WtColor);
        padding: 0;
        max-width: 530px;
    }

        .MojReview .MojGaley:empty {
            max-height: 0;
            display: none;
        }

        .MojReview .MojGaley .Renders {
            width: calc(50% - 2px);
            vertical-align: top;
            cursor: pointer;
            border-radius: 0;
            box-shadow: 0 0 2px;
            margin: 1px;
        }

            .MojReview .MojGaley .Renders:hover img {
                transform: scale(1.2);
            }

    .MojReview .MoreIcon {
        position: absolute;
        left: calc(50% - 31px);
        margin-top: -58px;
        display: inline-flex;
        justify-content: center;
    }

    .MojReview .MojGaley > :first-child {
        border-top-right-radius: 25px;
    }

    .MojReview .MojGaley > :last-child {
        border-bottom-left-radius: 25px;
    }

    .MojReview .MojGaley > :nth-child(2) {
        border-top-left-radius: 25px;
    }

    .MojReview .MojGaley > :nth-last-child(2) {
        border-bottom-right-radius: 25px;
    }

    .MojReview .MojGaley.Larg {
    }

        .MojReview .MojGaley.Larg .Renders {
            width: calc(33.333% - 2px);
        }

        .MojReview .MojGaley.Larg > :nth-child(2),
        .MojReview .MojGaley.Larg > :nth-last-child(2) {
            border-radius: 0px;
        }

        .MojReview .MojGaley.Larg > :nth-child(3) {
            border-top-left-radius: 25px;
        }

        .MojReview .MojGaley.Larg > :nth-last-child(3) {
            border-bottom-right-radius: 25px;
        }

    .MojReview .ScoreBox {
        width: 50px;
        text-align: center;
        position: absolute;
        left: calc(50% - 150px);
        top: 40px;
        overflow: unset;
    }

        .MojReview .ScoreBox .CoreS {
            width: 100%;
            height: 38px;
            line-height: 38px;
            text-align: center;
            position: relative;
            cursor: pointer;
            font-size: 16px;
            border-radius: 50%;
            display: inline-block;
            left: 0;
            transition: 0.4s;
        }

            .MojReview .ScoreBox .CoreS span {
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                vertical-align: middle;
                letter-spacing: -1px;
                font-family: BComic;
                font-size: inherit;
                line-height: inherit;
                padding-top: 1.5px;
            }

            .MojReview .ScoreBox .CoreS h1 {
                margin: 0;
                font-size: 7px;
                position: absolute;
                width: 100%;
                top: 0;
                left: 0;
                line-height: 14px;
                opacity: 0.8;
                transition: 0.4s;
            }

            .MojReview .ScoreBox .CoreS:hover {
                transform: scale(1.1);
            }

                .MojReview .ScoreBox .CoreS:hover h1 {
                    opacity: 1;
                }

            .MojReview .ScoreBox .CoreS.S1 {
                transition-delay: 0.8s;
            }

            .MojReview .ScoreBox .CoreS.S2 {
                transition-delay: 1.0s;
            }

            .MojReview .ScoreBox .CoreS.S3 {
                transition-delay: 1.2s;
            }

            .MojReview .ScoreBox .CoreS.S4 {
                transition-delay: 1.4s;
            }

    .MojReview.Hide .ScoreBox {
        /*left: calc(50% - 100px);*/
        /*opacity: 0;*/
    }

        .MojReview.Hide .ScoreBox .CoreS {
            opacity: 0;
            left: 40px;
        }


    .MojReview .StarBox {
        width: calc(90% - 60px);
        margin: 0 5% 0 calc(5% + 60px);
        text-align: center;
        /* padding: 4px 0; */
        line-height: 40px;
        font-size: 33px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 18px;
        transition: 0.3s;
        transition-delay: 2.1s;
        -webkit-text-stroke: 2px #000;
        paint-order: stroke fill;
    }

        .MojReview .StarBox .Star {
            /*text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;*/
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            display: inline-block;
            width: 38px;
            position: relative;
            /*color: var(--ColorBs);*/
            color: #ffa600;
        }

            .MojReview .StarBox .Star:before {
                content: "\f005";
            }

            .MojReview .StarBox .Star.Gary {
                color: var(--ColorVl);
            }

            .MojReview .StarBox .Star.Half {
                color: var(--ColorVl);
            }

                .MojReview .StarBox .Star.Half:after {
                    content: "\f089";
                    transform: scale(-1, 1);
                    position: absolute;
                    right: 0.3px;
                    top: 0;
                    /*text-shadow: unset;*/
                    /*color: var(--ColorBs);*/
                    color: #ffa600;
                    -webkit-text-stroke: 1px #000;
                }

    .MojReview.Hide {
    }

        .MojReview.Hide .MojRevIMG {
            opacity: 0;
            transform: scale(0.4) rotate(-90deg);
        }

            .MojReview.Hide .MojRevIMG:before {
                left: -120px;
            }

        .MojReview.Hide .MojName {
            opacity: 0;
            top: 250px;
        }

        .MojReview.Hide .LSeenTxt {
            left: calc(50% - 100px);
            opacity: 0;
        }

        .MojReview.Hide .MojRevBio {
            top: 180px;
            opacity: 0;
        }

        .MojReview.Hide .StarBox {
            opacity: 0;
            top: -15px;
        }

    .MojReview .Aditional {
        width: 88%;
        max-width: 440px;
        direction: rtl;
        font-size: 12.5px;
        line-height: 36px;
        /* border-top: 2px solid var(--ColorLt); */
        margin: 0 auto;
        padding: 27px 0 15px;
        text-align: right;
    }

        .MojReview .Aditional .Line {
            display: inline-block;
            width: 25%;
            position: relative;
            white-space: pre;
            cursor: pointer;
            display: inline-flex;
            justify-content: center;
            padding: 0 25px 0 38px;
            z-index: 2;
        }

            .MojReview .Aditional .Line:before {
                content: attr(Icon);
                font-size: 14.5px;
                display: inline-block;
                vertical-align: top;
                line-height: inherit;
                width: 24px;
                text-align: center;
                position: absolute;
                right: 0;
                /*padding-left: 5px;*/
            }

            .MojReview .Aditional .Line h6 {
                content: attr(Text);
                /*font-size: 8.5px;*/
                font-size: 8px;
                display: inline-block;
                vertical-align: top;
                line-height: inherit;
                opacity: 0.9;
                position: absolute;
                left: 0;
            }

        .MojReview .Aditional > :nth-child(3n-1) {
            margin: 0 12.5%;
        }

    .MojReview .MojHints {
        font-family: 'Sarbaz';
        font-size: 9.5px;
        line-height: 26px;
        margin: 0 20px;
        padding: 5px 0 7px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

        .MojReview .MojHints:before {
            content: 'بَرچسبـــــ';
            font-family: 'IranSans';
            font-size: 8px;
            padding-left: 5px;
        }

        .MojReview .MojHints span {
            margin: 2px 3px;
            display: inline-block;
            box-shadow: 0 0 2px;
            border-radius: 5px;
            background: var(--ColorVl);
            padding: 0 16px;
        }

.NewPrjHome {
    padding: 18px 0 15px;
    opacity: 0.8;
    overflow-x: hidden;
    width: 96%;
    margin: 0 auto;
}

    .NewPrjHome .ReadText {
        line-height: 25px;
        font-size: 11px;
    }

.HowBox {
    padding: 30px 15px 20px;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    font-size: 9px;
}

    .HowBox .How {
        font-size: inherit;
        line-height: 25px;
        cursor: pointer;
        opacity: 0.7;
        display: inline-flex;
        position: relative;
        margin: 0 18px;
        padding: 0;
        justify-content: center;
    }

        .HowBox .How:hover {
            opacity: 1;
        }

        .HowBox .How:before {
            content: "\f059";
            font-family: "Font Awesome 6 Pro";
            padding: 0 0 0 4px;
            font-size: 1.15em;
            line-height: 23px;
        }

    .HowBox.Mini {
        padding: 15px 15px 10px;
        font-size: 7.8px;
    }

    .HowBox .How {
    }

@media (max-width:450px) /*,(orientation: portrait)*/ {
    .MojReview .Aditional .Line {
        width: 29%;
    }

    .MojReview .Aditional > :nth-child(3n-1) {
        margin: 0 6.5%;
    }
}

@media (max-width:380px) /*,(orientation: portrait)*/ {
    .MojReview .Aditional {
        width: 92%;
    }

        .MojReview .Aditional .Line {
            width: 30.5%;
        }

        .MojReview .Aditional > :nth-child(3n-1) {
            margin: 0 3.75%;
        }
}

.SimBox {
    padding: 10px 0 25px;
    user-select: none;
    direction: rtl;
}

    .SimBox .SimBtn {
        line-height: 50px;
        height: 54px;
        border: 2px solid var(--WtColor);
        background: var(--ColorVl);
        box-shadow: 0 0 3px -1px, inset 0 0 7px -1px;
        border-radius: 27px;
        padding: 0 0;
        display: inline-block;
        vertical-align: top;
        margin: 0 3px;
        font-size: 14px;
        cursor: pointer;
    }

        .SimBox .SimBtn:hover {
            box-shadow: 0 0 3px -1px, inset 0 0 14px 1px !important;
        }

        .SimBox .SimBtn:before {
            font-family: "Font Awesome 6 Pro";
            display: inline-block;
            width: 50px;
            line-height: inherit;
            vertical-align: top;
            font-size: 18px;
        }

        .SimBox .SimBtn.Ok {
            padding: 0 15px 0 45px;
        }

            .SimBox .SimBtn.Ok:before {
                content: "\f00c";
            }

        .SimBox .SimBtn.No {
            box-shadow: 0 0 3px -1px, inset 0 0 7px -3px;
        }

            .SimBox .SimBtn.No:before {
                content: "\f00d";
            }

        .SimBox .SimBtn.Working {
            filter: grayscale(0.5);
            pointer-events: none;
        }

            .SimBox .SimBtn.Working:before {
                content: "\f013";
                animation: D360 3s linear infinite;
            }

.DirL {
}

    .DirL:before {
        font-family: "Font Awesome 6 Pro";
        font-size: 7px;
        line-height: inherit;
        width: 12px;
        text-align: center;
        display: inline-block;
    }

    .DirL.Up:before {
        content: "\f077";
        color: var(--GreenBs);
    }

    .DirL.Up.Lvl2:before {
        content: "\f325";
    }

    .DirL.Down:before {
        content: "\f078";
        color: var(--RedBs);
    }

    .DirL.Down.Lvl2:before {
        content: "\f322";
    }

    .DirL.Blink:before {
        animation: Blink 1s infinite;
    }

.ChatScore {
    width: 100%;
    line-height: 30px;
    direction: rtl;
    font-size: 20px;
    margin: 30px 0 10px;
}

    .ChatScore .Score {
        display: inline-block;
        width: 25px;
        text-shadow: 0 0 3px;
        position: relative;
    }

        .ChatScore .Score:before {
            content: attr(Head);
            text-shadow: none;
            font-size: 6px;
            position: absolute;
            width: 100%;
            line-height: 10px;
            bottom: -5px;
        }

        .ChatScore .Score.Num {
            font-family: 'BComic';
            font-size: 16px;
            padding-left: 7px;
            text-shadow: none;
        }


.newProj .xCrs input {
    background: none;
}

.Disable .confirmCode, .confirmCode.Disable {
    opacity: 1;
}

.UserAvatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    /*border: 2px solid var(--WtColor);*/
    box-shadow: 0 0 2.5px;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    background: var(--WtColor);
    padding: 2px;
    -webkit-user-drag: none;
}

    .UserAvatar:Not(.LoadRound):hover {
        transform: scale(1.07);
    }

.activeUser {
    /*box-shadow: 0 0 3px 2px var(--GreenBs) !important;*/
    /*border-bottom-color: var(--GreenBs) !important;*/
    background: linear-gradient(180deg, var(--WtColor) 20%, var(--GreenBs) 60%) !important;
    color: var(--GreenBs);
}

.RatingStars {
    text-align: center;
    position: relative;
    direction: ltr;
    margin: 32px auto 25px;
    padding: 15px 0 15px;
    line-height: 48px;
    width: 86%;
    border-bottom: 2px solid;
    font-size: 38px;
    white-space: pre;
}

    .RatingStars .RateIcon {
        color: #707070;
        position: relative;
        display: inline-block;
        text-shadow: 0 0 5px #939393;
        width: 48px;
        vertical-align: top;
        cursor: pointer;
    }

        .RatingStars .RateIcon:before {
            content: "\f005";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
        }

        .RatingStars .RateIcon.Rated {
            color: #ffb300;
            text-shadow: 0 0 2px #000;
            transform: scale(1.15) rotate(-82deg);
        }

    .RatingStars.HeartBeat .RateIcon {
        animation: animateHeartBeat 5s normal ease 1;
        color: var(--RedBs);
    }

.AllRateDivider {
}

    .AllRateDivider[Star="1"] .RatingStars .RateIcon.Rated {
        color: #ff0000;
    }

    .AllRateDivider[Star="2"] .RatingStars .RateIcon.Rated {
        color: #ff4000;
    }
/*.textDesc,
.haveDate::before {
    color: #80d6ff;
}

.haveDate::before {
    content: attr(data-date);
    position: absolute;
    left: -40px;
    top: 27%;
    direction: ltr;
    font-size: 12px;
    display: inline;
}

.haveDate {
    position: relative;
}*/

.NameDivder .inProjDate {
    left: 10px;
    top: 12px;
    font-size: 9px;
    display: inline;
    position: relative;
    opacity: 0.7;
}

.ProjImgDivider > img {
    width: 100%;
    margin: 2px 8px;
    border-radius: 20px;
    border: 2px solid #44cafd;
}

    .ProjImgDivider > img:first-child {
        margin-top: 7px;
    }

.ProjImgDivider {
    position: relative;
    text-align: center;
    height: calc(100vh - 55px);
    overflow: auto;
    padding: 0 10px;
    overflow-x: hidden;
}

.ProjImgDividerMojri {
    position: relative;
    text-align: center;
    height: calc(100vh - 125px);
    overflow: auto;
    padding: 0 10px;
    overflow-x: hidden;
}

.ListPanel {
    overflow: auto;
    padding: 15px 1.5vw;
    /* New Added */
    padding: 20px 5px;
    overflow-x: hidden;
    top: 0;
    left: 0;
    padding-top: 230px;
    z-index: 1;
    width: 100%;
    position: absolute;
    height: 100% !important;
    transition: 0.5s;
    direction: ltr;
}

    .ListPanel.Corian {
        padding-top: 185px;
    }

.SimplePlayer {
    height: 62px;
    line-height: 62px;
    position: relative;
    width: 100%;
    padding: 0 30px 0 40px;
    direction: ltr;
    white-space: normal;
}

    .SimplePlayer .play {
        display: inline-block;
        width: 40px;
        font-size: 22px;
        text-align: center;
        line-height: inherit;
        height: inherit;
        vertical-align: middle;
        z-index: 1;
        transition: 0.1s;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
    }

        .SimplePlayer .play:hover {
            text-shadow: 0 0 18px;
        }

        .SimplePlayer .play:before {
            content: "\f04b";
            font-family: "Font Awesome 6 Pro";
        }

        .SimplePlayer .play.pause:before {
            content: "\f04c";
        }

        .SimplePlayer .play[Timer] {
        }

            .SimplePlayer .play[Timer]:Not(.pause):after {
                opacity: 0;
                bottom: calc(50% - 34px);
            }

            .SimplePlayer .play[Timer]:after {
                content: attr(Timer);
                opacity: 1;
                line-height: 12px;
                position: absolute;
                left: 0;
                bottom: calc(50% - 24px);
                font-size: 8px;
                width: inherit;
                font-family: Sarbaz;
            }

    .SimplePlayer .dblspeedplay {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 12px;
        line-height: inherit;
        width: 30px;
        opacity: 0.6;
        z-index: 1;
        transition: 0.1s;
        cursor: pointer;
    }

        .SimplePlayer .dblspeedplay:hover {
            text-shadow: 0 0 14px;
        }

        .SimplePlayer .dblspeedplay:before {
            content: "\f04e";
            font-family: "Font Awesome 6 Pro";
        }

        .SimplePlayer .dblspeedplay:after {
            content: '1X';
            opacity: 0.0;
            top: calc(50% - 28px);
            font-size: 7.5px;
            position: absolute;
            width: inherit;
            line-height: 14px;
            right: 0;
            transition: 0.3s;
            font-family: 'Sarbaz';
        }

        .SimplePlayer .dblspeedplay.Selected {
            opacity: 1;
        }

            .SimplePlayer .dblspeedplay.Selected:after {
                content: '2X';
                opacity: 1;
                top: calc(50% - 18px);
            }

            .SimplePlayer .dblspeedplay.Selected.x3 {
                color: var(--RedBs);
            }

                .SimplePlayer .dblspeedplay.Selected.x3:after {
                    content: '3X';
                }


    /*.SimplePlayer .TotalTime {
    }

    .SimplePlayer .CurrentTime {
    }*/

    .SimplePlayer .seekbar {
        height: 6px;
        line-height: 44px;
        margin: 0 10px 0 2px;
        cursor: pointer;
        border-radius: 5px;
        width: calc(100% - 42px);
        outline: none;
        padding: 0 2px;
        vertical-align: middle;
        box-shadow: inset 0 0 3px 0.5px;
        color: unset;
        appearance: none;
    }

        .SimplePlayer .seekbar::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            box-shadow: inset 0 0 5px 3px;
            background: #fff;
            background: var(--WtColor);
            cursor: pointer;
        }

    .SimplePlayer .WaveBar {
        height: inherit;
        cursor: pointer;
        width: 100%;
        outline: none;
        display: inline-block;
        vertical-align: middle;
    }

        .SimplePlayer .WaveBar wave {
            height: 100% !important;
            overflow: hidden !important;
        }

    .SimplePlayer .Period {
        position: absolute;
        left: 47px;
        bottom: 0;
        font-family: BComic;
        font-size: 9px;
        line-height: 12px;
    }

@keyframes CallSignal {
    30% {
        transform: rotate(-45deg);
    }

    65% {
        transform: rotate(-45deg) scale(1.2);
    }

    100% {
        transform: rotate(-45deg);
    }
}

.Social {
}

    .Social > div.msg {
        background: var(--ColorVl);
        background: linear-gradient( 30deg, var(--ColorVl) 10%, var(--WtColor) 30% 70%, var(--ColorVl) 90%);
        text-align: center;
        padding: 16px;
        margin: 1px 6px 1px auto;
        font-size: 12px;
        width: 78%;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 0 2.3px;
        border: none;
        border-radius: 1px;
        user-select: none;
        direction: rtl;
        min-height: 29px;
        line-height: 20px;
        white-space: pre-wrap;
        color: var(--ColorBs);
        text-align: justify;
        text-align-last: center;
        left: 0;
    }

        .Social > div.msg.Image {
            min-height: 150px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            max-height: 150px;
        }

            .Social > div.msg.Image.WithBtn {
                min-width: 190px;
                max-height: 190px;
                padding-bottom: 20px;
            }

            .Social > div.msg.Image img {
                display: inline-block;
                max-height: 100%;
                max-width: 100%;
                min-width: 100%;
                width: auto;
                height: auto;
                user-select: none;
            }

            .Social > div.msg.Image.Tekrari {
            }

                .Social > div.msg.Image.Tekrari:after {
                    content: 'تکـــــراری !!!';
                    position: absolute;
                    width: 80%;
                    line-height: 40px;
                    left: 10%;
                    top: calc(50% - 30px);
                    box-shadow: 0 0 10px;
                    background: var(--TransPr);
                    border-radius: 8px;
                    opacity: 1;
                    font-size: 12px;
                    --ColorBs: var(--PurpleBs);
                    --ColorVl: var(--PurpleVl);
                    --ColorLt: var(--PurpleLt);
                    color: var(--ColorBs);
                    text-shadow: 0 0 6px #fff, 0 0 7px #fff, 0 0 8px #fff, 0 0 9px #fff,0 0 10px #fff;
                }

        .Social > div.msg.MsgCall {
            font-size: 11px;
        }

            .Social > div.msg.MsgCall:before {
                content: "\f095";
                position: absolute;
                left: 14px;
                font-family: "Font Awesome 6 Pro";
                font-weight: bold;
                top: 0px;
                opacity: 0.6;
                line-height: 44px;
                font-size: 15px;
                color: var(--GreenBs);
                width: 30px;
            }

            .Social > div.msg.MsgCall.Missed:before {
                content: "\e226";
                color: var(--RedBs);
            }

        .Social > div.msg.Emoji {
            background: var(--TransPr);
            font-size: 50px;
            line-height: 60px;
        }

            .Social > div.msg.Emoji.Small {
                font-size: 25px;
                line-height: 35px;
            }

        .Social > div.msg.answer {
            margin: 1px auto 1px 22px;
        }

            .Social > div.msg.answer,
            .Social > div.msg.answer + .ChatAvatar {
                --ColorBs: var(--OrangeBs);
                --ColorVl: var(--OrangeVl);
                --ColorLt: var(--OrangeLt);
                display: block;
            }


        .Social > div.msg.Stranger,
        .Social > div.msg.Stranger + .ChatAvatar {
            --ColorBs: var(--GreenBs);
            --ColorVl: var(--GreenVl);
            --ColorLt: var(--GreenLt);
        }

        .Social > div.msg.Other,
        .Social > div.msg.Other + .ChatAvatar {
            --ColorBs: var(--RedBs);
            --ColorVl: var(--RedVl);
            --ColorLt: var(--RedLt);
        }

        .Social > div.msg.Robot,
        .Social > div.msg.Robot + .ChatAvatar {
            --ColorBs: var(--PurpleBs);
            --ColorVl: var(--PurpleVl);
            --ColorLt: var(--PurpleLt);
        }

        .Social > div.msg.FastTozih {
            max-height: unset;
            overflow: visible;
        }

        .Social > div.msg.AskCut {
            max-height: unset;
            font-size: 11px;
            overflow: visible;
            padding: 8px 18px;
        }

            .Social > div.msg.AskCut:before {
                content: "\f0c4";
                font-family: "Font Awesome 6 Pro";
                position: absolute;
                transform: rotate( 25deg);
                font-size: 45px;
                z-index: -10;
                text-shadow: 0 0 5px var(--ColorBs), 0 0 3px var(--ColorBs);
                color: var(--WtColor);
                width: 65px;
                line-height: 65px;
                top: -24px;
                left: -28px;
                z-index: 10;
            }

        .Social > div.msg.AskColor {
            overflow: visible;
            padding: 8px 18px;
        }

            .Social > div.msg.AskColor:before {
                content: '\f53f';
                font-family: "Font Awesome 6 Pro";
                position: absolute;
                font-size: 45px;
                z-index: -10;
                text-shadow: 0 0 5px var(--ColorBs), 0 0 3px var(--ColorBs);
                color: var(--WtColor);
                width: 55px;
                line-height: 55px;
                top: -15px;
                left: -15px;
                z-index: 10;
            }

        .Social > div.msg.AutoAnswer {
            overflow: unset;
            margin: 10px 6px 10px auto;
            cursor: unset;
            opacity: 0.8;
            font-size: 10px;
            z-index: 1;
            line-height: 0;
            border-radius: 12px !important;
        }

            .Social > div.msg.AutoAnswer:hover {
                opacity: 1;
            }

            .Social > div.msg.AutoAnswer .AutoSend:before {
                content: "\f1d8";
                font-family: "Font Awesome 6 Pro";
                transition: 0.1s;
            }

            .Social > div.msg.AutoAnswer .AutoAnswerLine {
                display: inline-block;
                line-height: 32px;
                position: relative;
                opacity: 0.9;
                cursor: pointer;
                white-space: pre;
                margin: 3px -5px;
                width: calc(100% + 10px);
                height: 32px;
            }

                .Social > div.msg.AutoAnswer .AutoAnswerLine:hover {
                    opacity: 1;
                }

                .Social > div.msg.AutoAnswer .AutoAnswerLine .Include {
                    padding: 0 8px;
                }

                    .Social > div.msg.AutoAnswer .AutoAnswerLine .Include.Not {
                        text-decoration: line-through;
                        opacity: 0.6;
                    }

                .Social > div.msg.AutoAnswer .AutoAnswerLine .AutoSend {
                    position: absolute;
                    left: -50px;
                    bottom: 0;
                    width: 40px;
                    line-height: inherit;
                    height: inherit;
                    border-radius: 5px;
                    font-size: 17px;
                }

                    .Social > div.msg.AutoAnswer .AutoAnswerLine .AutoSend:hover {
                        color: var(--GreenBs);
                    }

                .Social > div.msg.AutoAnswer .AutoAnswerLine span {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 96%;
                    display: inline-block;
                }

        .Social > div.msg.AutoAnswer {
        }

            .Social > div.msg.AutoAnswer .xCrs {
                box-shadow: unset;
                background: unset;
                border: none;
                padding: 0;
            }

    .Social > div.MsgSelected {
        color: #7d7d7da8;
        box-shadow: 0 0 3px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

        .Social > div.MsgSelected .Time {
            opacity: 0;
        }

        .Social > div.MsgSelected img {
            filter: blur(4px) grayscale(70%) opacity(0.7);
            transform: scale(1.4);
            pointer-events: none;
        }

        .Social > div.MsgSelected + .ChatAvatar {
            filter: grayscale(0.8) !important;
            opacity: 0.7;
        }

        .Social > div.MsgSelected .BtnBox {
            width: 70%;
            height: 50px;
            position: absolute;
            top: calc(50% - 25px);
            left: 15%;
            color: var(--GreenBs);
            background: var(--TransPr);
            box-shadow: 0 0 12px #7a7a7a;
            animation: Append 0.5s forwards;
            border-radius: 10px;
            backdrop-filter: blur(3px);
            line-height: 50px;
            font-size: 23px;
        }

            .Social > div.MsgSelected .BtnBox .Btn {
                line-height: inherit;
                margin: 0 5px;
                display: inline-block;
                width: 35px;
            }

                .Social > div.MsgSelected .BtnBox .Btn:before {
                    font-family: "Font Awesome 6 Pro";
                }

    .Social .msg > .Title {
        padding: 5px 0 12px;
        display: block;
    }

    .Social .msg > .ReadHr {
        margin: 10px auto;
        width: 51%;
        opacity: 0.2;
        border-top: 2px solid;
    }

    .Social .msg > .InChat {
        font-size: 10px;
        border-top: 1px solid;
        width: 40%;
        margin: 20px auto 0;
        line-height: 24px;
        opacity: 0.6;
        padding: 0;
    }

    .Social .CheckLine {
        line-height: 38px;
        text-align: right;
        padding-right: 35px;
        position: relative;
        opacity: 0.95;
        font-size: 12px;
        text-align-last: right;
    }

        .Social .CheckLine.Disable {
            opacity: 0.45;
            filter: grayscale(0.7);
        }

            .Social .CheckLine.Disable:before {
                content: '\f068';
            }

        .Social .CheckLine:before {
            font-family: "Font Awesome 6 Pro";
            content: '\f1ce';
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0.4;
            font-size: 13px;
            line-height: inherit;
            width: 35px;
            text-align: center;
            text-align-last: center;
        }

        .Social .CheckLine:after {
            content: attr(Price);
            position: absolute;
            left: 9px;
            direction: ltr;
            opacity: 0.99;
            top: 2px;
        }

        .Social .CheckLine.Selected {
            opacity: 1;
            color: var(--GreenBs);
            padding-right: 42px;
        }

            .Social .CheckLine.Selected:before {
                content: '\f00c';
                font-size: 20px;
                opacity: 1;
                animation: Append 0.6s cubic-bezier(0, 0, 0.2, 1.5) forwards 1;
                right: 3px;
            }

            .Social .CheckLine.Selected.Cut:before {
                content: "\f0c4"
            }

            .Social .CheckLine.Selected:after {
                left: 10px;
                opacity: 1;
            }

        .Social .CheckLine .Takhf {
            line-height: 16px;
            position: absolute;
            top: -5px;
            left: 9px;
            font-size: 10.5px;
            opacity: 0.7;
            text-align: center;
            width: 30px;
            text-align-last: center;
        }

            .Social .CheckLine .Takhf:before {
                position: absolute;
                left: 7px;
                top: -1px;
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                font-size: 12px;
                transform: rotate(92deg);
                line-height: 16px;
            }

        .Social .CheckLine h6 {
            display: inline-block;
            font-size: 9px;
            padding-right: 7px;
            opacity: 0.7;
        }

        .Social .CheckLine .InnerLine {
            line-height: 14px;
            padding-right: 20px;
            position: relative;
            font-size: 9px;
            margin-bottom: 6px;
            opacity: 0.7;
        }

            .Social .CheckLine .InnerLine:before {
                font-family: "Font Awesome 6 Pro";
                content: '\f890';
                display: inline-block;
                position: absolute;
                right: 0;
                width: 20px;
                text-align: center;
                text-align-last: center;
                font-size: 10.5px;
            }

        .Social .CheckLine:Not(.Selected) .InnerLine {
            animation: RotateHue 5s linear 5s infinite;
        }

            .Social .CheckLine:Not(.Selected) .InnerLine:before {
                animation: Blink 2s ease 12s infinite;
            }

    .Social .ChatHint {
        line-height: 36px;
        width: 220px;
        margin: 2px auto;
        font-size: 9px;
        box-shadow: inset 0 0 2px;
        border-radius: 18px;
        opacity: 0.9;
        padding: 0 30px;
        background: var(--TransPr);
        user-select: none;
        direction: rtl;
        cursor: pointer;
        position: relative;
    }

        .Social .ChatHint:before {
            font-family: "Font Awesome 6 Pro";
            width: 26px;
            line-height: inherit;
            position: absolute;
            right: 5px;
            top: 0;
            font-size: 21px;
        }

        .Social .ChatHint img {
            width: 26px;
            height: 26px;
            border-radius: 13px;
            position: absolute;
            right: 5px;
            top: 5px;
        }

        .Social .ChatHint span {
            opacity: 0.9;
            line-height: inherit;
            position: absolute;
            left: 8px;
            top: 0;
            font-size: 8px;
        }

        .Social .ChatHint.MessagesDay {
            margin-top: 35px;
        }

            .Social .ChatHint.MessagesDay:before {
                content: '\f017';
            }

        .Social .ChatHint.SteQ:before {
            font-size: 16px;
            content: "\f54b";
        }

        .Social .ChatHint.SteQ.Done:before {
            content: "\f00c";
            color: var(--GreenBs);
        }

        .Social .ChatHint.SteQ:Not(.Done):before {
            animation: D360 1.5s linear infinite;
            content: "\f3f4";
        }

        .Social .ChatHint + .ChatHint:Not(.MessagesDay) {
            margin-top: 0;
            border-top-left-radius: 2px !important;
            border-top-right-radius: 2px !important;
        }

        .Social .ChatHint:has( + .ChatHint:Not(.MessagesDay)) {
            border-bottom-left-radius: 2px !important;
            border-bottom-right-radius: 2px !important;
            margin-bottom: 0;
        }

        .Social .ChatHint:hover {
            background: var(--ColorLt);
            opacity: 1;
            padding-left: 8px;
        }

            .Social .ChatHint:hover span {
                opacity: 1;
                transform: scale(1.15);
            }

            .Social .ChatHint:hover img,
            .Social .ChatHint:hover:before {
                transform: scale(1.12) rotate(-7deg);
            }

    .Social .ChatAvatar {
        width: 36px;
        height: 36px;
        line-height: 36px;
        position: absolute;
        cursor: pointer;
        margin-top: -77px;
        box-shadow: 0 0 3px 0.5px;
        border: 1.5px solid var(--WtColor);
        overflow: hidden;
        border-radius: 20px;
        user-select: none;
        color: var(--ColorBs);
        background: var(--WtColor);
        left: 2px;
        display: none;
    }

        .Social .ChatAvatar:hover {
            margin-top: -82px;
        }

        .Social .ChatAvatar.Robot {
            overflow: unset;
            box-shadow: unset;
            background: unset;
            border: unset;
            color: var(--WtColor);
            text-shadow: 0 0 3px var(--ColorBs), 0 0 3px var(--ColorBs), 0 0 3px var(--ColorBs);
        }

            .Social .ChatAvatar.Robot::before {
                animation: D360 5s infinite linear;
                position: absolute;
                left: 0;
                bottom: -10px;
                font-size: 14px;
                z-index: 1;
                width: 32px;
            }

            .Social .ChatAvatar.Robot::after {
                content: "\f544";
                position: absolute;
                left: -2px;
                bottom: 2px;
                font-size: 26px;
                width: 36px;
            }

    .Social > div.msg.Faded {
        opacity: 0;
        left: 60px;
    }

        .Social > div.msg.Faded .Matn {
            opacity: 0;
            transform: scale(0.8);
            transition-delay: 0.5s;
        }

        .Social > div.msg.Faded + .ChatAvatar {
            opacity: 0;
            left: -30px;
            transition-delay: 0.5s;
        }

    .Social > .Thinking {
        background: var(--ColorVl);
        text-align: center;
        padding: 2px;
        font-size: 12px;
        width: 50px;
        position: relative;
        cursor: pointer;
        box-shadow: 0 0 2.3px;
        user-select: none;
        line-height: 20px;
        height: 20px;
        color: var(--ColorBs);
        --ColorBs: var(--PurpleBs);
        --ColorVl: var(--PurpleVl);
        --ColorLt: var(--PurpleLt);
        margin: 1px auto 40px 39px;
        display: block;
        border-radius: 15px;
        left: 0;
    }

        .Social > .Thinking:before {
            content: "\f544";
            position: absolute;
            left: -37px;
            bottom: -5px;
            line-height: 32px;
            font-size: 20px;
            width: 32px;
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            color: var(--WtColor);
            text-shadow: 0 0 2px var(--ColorBs), 0 0 3px var(--ColorBs);
        }

        .Social > .Thinking:after {
            content: "\f141";
            font-family: "Font Awesome 6 Pro";
            font-size: 20px;
            position: absolute;
            width: 100%;
            left: 0;
            top: 1px;
            animation: Blink 1.5s infinite;
        }

        .Social > .Thinking.Hide {
            left: 30px;
            opacity: 0.1;
            margin: -10px auto -10px 39px;
        }

            .Social > .Thinking.Hide:before {
                left: -95px;
            }

    .Social.Social.HideBot {
    }

        .Social.Social.HideBot > .msg[usrid="600"] {
            display: none;
        }

            .Social.Social.HideBot > .msg[usrid="600"] + .ChatAvatar.Robot {
                display: none;
            }

    .Social > .Colors {
        max-height: 100vh !important;
    }

    .Social .Colors .SampleLine {
        padding: 0 6px;
        display: block;
        position: relative;
        line-height: 30px;
        font-size: 13px;
        width: 100%;
        text-align: right;
        direction: rtl;
        height: 75px;
    }

        .Social .Colors .SampleLine .Image {
            width: 70px;
            height: 70px;
            border-radius: 40px;
            box-shadow: 0 0 0 1px, 0 0 4px 1.5px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

            .Social .Colors .SampleLine .Image img {
                width: 100%;
            }

        .Social .Colors .SampleLine span {
            display: inline-block;
            line-height: 30px;
            position: absolute;
            right: 78px;
            top: 32px;
            vertical-align: middle;
            text-align: center;
            white-space: pre;
        }

            .Social .Colors .SampleLine span:before {
                content: "\f53f";
                font-family: "Font Awesome 6 Pro";
                font-size: 15px;
                line-height: inherit;
                vertical-align: middle;
                display: inline-block;
                width: 30px;
            }

        .Social .Colors .SampleLine > h6 {
            position: absolute;
            right: 81px;
            top: 14px;
            font-size: 10px;
            opacity: 0.7;
            line-height: 20px;
            text-align: center;
            white-space: pre;
        }

            .Social .Colors .SampleLine > h6:before {
                content: "\f550";
                font-family: "Font Awesome 6 Pro";
                line-height: inherit;
                vertical-align: middle;
                display: inline-block;
                width: 24px;
            }

        .Social .Colors .SampleLine > .DownBtn {
            position: absolute;
            left: 0;
            top: 16px;
            font-size: 17px;
            line-height: 40px;
            width: 40px;
            text-align: center;
            opacity: 0.7;
            color: unset;
        }

            .Social .Colors .SampleLine > .DownBtn:hover {
                opacity: 1;
                transform: scale(1.1);
            }

.QualityMsg {
}

    .QualityMsg .ReadHr {
        border-top: 1px solid;
        margin: 8px auto;
        opacity: 0.3;
    }

@media (min-width:1280px) {
    .Social > div.msg {
        width: 60%;
    }
}

/*.TxtSendLoad {
    opacity: 0.6;
    filter: hue-rotate(35deg) !important;
}

    .TxtSendLoad:after {
        content: "\f013";
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        position: absolute;
        font-size: 20px;
        right: 5px;
        bottom: 4px;
        width: 20px;
        line-height: 20px;
        animation: D360 2s infinite linear;
    }

    .TxtSendLoad .Time {
        display: none;
    }

    .TxtSendLoad img {
        filter: blur(4px) grayscale(70%) opacity(0.7);
        transform: scale(1.4);
    }

    .TxtSendLoad .SimplePlayer {
        filter: opacity(0.5);
        transform: scale(0.95);
    }

    .TxtSendLoad.Video {
        opacity: 1;
    }

    .TxtSendLoad.ZipFiles {
        opacity: 1;
    }*/

.inChatAsk {
    padding: 12px 0 5px;
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% + 10px);
    margin: 0px -5px;
    font-size: 10px;
}

    .inChatAsk.Disable {
        display: none;
    }

    .inChatAsk span {
        display: inline-block;
        box-shadow: inset 0 0 2px;
        margin: 0 1px;
        border-radius: 2px;
        line-height: 42px;
        font-size: 11px;
        flex-grow: 1;
        flex-basis: 0;
        white-space: pre;
        background: var(--ColorLt);
        position: relative;
    }

        .inChatAsk span:hover {
            box-shadow: inset 0 0 4px;
            flex-grow: 1.6 !important;
        }

        .inChatAsk span.Selected {
            flex-grow: 2.2 !important;
        }

        .inChatAsk span:first-child {
            border-top-right-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
        }

        .inChatAsk span:last-child {
            border-top-left-radius: 10px !important;
            border-bottom-left-radius: 10px !important;
        }

        .inChatAsk span.Yes {
            background: var(--GreenVl);
            color: var(--GreenBs);
            flex-grow: 1.5;
        }

        .inChatAsk span.No {
        }

        .inChatAsk span.Icon {
            padding-right: 30px;
            height: 46px;
            line-height: 46px;
        }

            .inChatAsk span.Icon:before {
                font-family: "Font Awesome 6 Pro";
                width: 35px;
                line-height: inherit;
                vertical-align: top;
                font-size: 15px;
                display: inline-block;
                position: absolute;
                right: 5px;
                top: 0;
                text-align: center;
            }

            .inChatAsk span.Icon.fa-whatsapp:before {
                font-family: "Font Awesome 6 Brands";
            }

    .inChatAsk.Answered {
    }

        .inChatAsk.Answered .No {
        }

        .inChatAsk.Answered span:not(.Selected) {
            font-size: 8px;
            opacity: 0.5;
            flex-grow: 0.5;
        }

.WithBtn .inChatAsk {
    position: absolute;
    width: calc(100% - 20px);
    left: 15px;
    bottom: 15px;
    padding: 0;
}

    .WithBtn .inChatAsk span {
        background: var(--TransPr);
        backdrop-filter: blur(10px);
    }

.msg {
}

    .msg .xCrs {
        background: var(--ColorLt);
        overflow: unset;
        padding: 0 15px;
        /*box-shadow: inset 0 0 2px;*/
        box-shadow: unset;
        height: 48px;
        min-height: 48px;
        line-height: 36px;
        width: calc(100% + 10px);
        margin: 2.5px -5px;
        font-size: 11px;
    }

        .msg .xCrs > * {
            border: none;
        }

        .msg .xCrs:after {
            right: -76px;
            line-height: 34px;
            width: 60px;
            opacity: 1;
            text-align-last: left;
        }

        .msg .xCrs.SelDone {
        }

            .msg .xCrs.SelDone .SelModel {
                opacity: 0.5;
            }

                .msg .xCrs.SelDone .SelModel.Selected {
                    opacity: 0.9;
                    color: var(--GreenBs);
                }

    .msg.FastTozih .Answer .xCrs:not(.inChatDone) {
        /*box-shadow: unset;*/
    }

        .msg.FastTozih .Answer .xCrs:not(.inChatDone).SelDone {
            background: var(--ColorVl);
        }

        .msg.FastTozih .Answer .xCrs:not(.inChatDone) + .xCrs:not(.inChatDone) {
        }

    .msg .SmallHint {
        display: block;
        font-size: 9px;
        padding: 6px 0 0;
        opacity: 0.7;
    }


.MojriBase .ChatDivider {
    /*height: calc(100vh - 184px);*/
}

:not(.msg) + .msg,
:not(.answer) + .answer {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    margin-top: 35px !important;
}

/*.msg:last-of-type,
.msg.IsLast {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    margin-bottom: 16px !important;
}*/

.msg:last-of-type,
.msg:has( + .ChatAvatar) {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    margin-bottom: 35px !important;
}

.ChatBody {
}

    .ChatBody > div.msg.DeletedMsg, .Renders.DeletedMsg {
        background-image: linear-gradient( -45deg, transparent 40%, #4444444d 50%, transparent 60%);
        background-size: 10px 10px;
        filter: grayscale(0.3) opacity(0.6) !important;
        pointer-events: none;
        user-select: none;
    }

        .ChatBody > div.msg.DeletedMsg:after, .Renders.DeletedMsg:after {
            content: 'Deleted!!';
            position: absolute;
            left: 3px;
            bottom: 2px;
            direction: ltr;
            font-size: 12px;
            text-shadow: 0 0 2px #f00, 0 0 2px #f00, 0 0 2px #f00, 0 0 2px #f00;
            font-family: BComic;
            color: #fff;
            line-height: 14px;
            z-index: 10;
            opacity: 0.7;
        }

        .ChatBody > div.msg.DeletedMsg img, .Renders.DeletedMsg img {
            opacity: 0.3;
            filter: blur(3px);
        }

    .ChatBody > .Renders.DeletedMsg.Video:after {
        display: none;
    }

.ChatBox {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 62px;
    background: linear-gradient(0deg, var(--WtColor) 86%, #fff0 100%);
}

    .ChatBox .TextPM {
        font-size: 12.5px;
        background-color: #fff;
        background-color: var(--WtColor);
        text-align: center;
        position: absolute;
        bottom: 6px;
        left: 5px;
        min-height: 44px;
        width: calc(100% - 66px);
        border-radius: 12px 22px 22px 12px;
        padding: 11px 11px 11px 11px;
        direction: rtl;
        height: auto;
        box-shadow: inset 0 0 2px 1px;
        max-height: 300px;
        overflow: auto;
        overflow-x: hidden;
        white-space: pre-wrap;
        line-height: 22px;
    }

    .ChatBox .SendPM {
        margin: 0;
        font-size: 17px;
        cursor: pointer;
        position: absolute;
        right: 62px;
        bottom: 6px;
        line-height: 44px;
        height: 44px;
        width: 44px;
        text-align: center;
        border-radius: 22px;
        opacity: 0.3;
    }

        .ChatBox .SendPM:before {
            content: "\f1d8";
            font-family: "Font Awesome 6 Pro";
        }

    .ChatBox .UpldPM {
        font-size: 25px;
        cursor: pointer;
        position: absolute;
        left: 5px;
        bottom: 6px;
        line-height: 44px;
        width: 44px;
        height: 44px;
    }

        .ChatBox .UpldPM:before {
            content: "\f030";
            font-family: "Font Awesome 6 Pro";
        }

        .ChatBox .UpldPM:hover {
            color: var(--ColorAlt);
        }

    .ChatBox .VoicPM {
        animation: Roonamaiy 2s forwards;
    }

    .ChatBox .BtnVoic {
    }

        .ChatBox .BtnVoic:before {
            content: "\f3c9";
            font-family: "Font Awesome 6 Pro";
        }

    .ChatBox .DefaultBtn {
        margin: 0;
        font-size: 22px;
        cursor: pointer;
        position: absolute;
        right: 11px;
        bottom: 6px;
        line-height: 44px;
        height: 44px;
        width: 44px;
        box-shadow: 0 0 0 0, inset 0 0 8px 4px;
        border-radius: 22px;
        text-align: center;
        opacity: 1;
        background: #fff;
        background-color: var(--WtColor);
    }

    .ChatBox .TimerVoic {
        display: none;
        font-family: BComic;
        animation: Append 0.5s forwards;
        line-height: 44px;
        font-size: 12px;
        bottom: 6px;
        left: 10px;
        position: absolute;
        user-select: none;
        vertical-align: middle;
        height: 44px;
        width: 90px;
    }

        .ChatBox .TimerVoic:before {
            content: "\f130";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            line-height: 44px;
            display: inline-block;
            height: 44px;
            animation: Blink 1.3s linear infinite;
            width: 36px;
            font-size: 16px;
        }

    /*.ChatBox .TozihatHint {
        font-size: 11px;
        line-height: 20px;
        position: absolute;
        width: calc(100% - 120px);
        left: -100%;
        bottom: 56px;
        padding: 10px 14px;
        box-shadow: inset 0 0 5px 3px;
        border-radius: var(--CrsBorder);
        direction: rtl;
        text-align: right;
        opacity: 0;
        transition: 2s;
        background: linear-gradient( 30deg, var(--OrangeLt) 40%, var(--WtColor) 50%);
        color: var(--OrangeBs);
        z-index: 2;
        user-select: none;
        text-align: justify;
        text-align-last: right;
    }*/

    .ChatBox.Recording {
        color: var(--GreenBs);
    }

    /*.ChatBox.Recording .TozihatHint {
            left: 12px;
            opacity: 0.95;
        }*/

    .ChatBox .VoicPlay {
        width: 100% !important;
    }

    .ChatBox.Recording .DefaultBtn {
        transform: scale(2);
        right: 33px;
        bottom: 33px;
        /*background-color: #0081bd;*/
        /*color: #93ff8c;*/
    }

        .ChatBox.Recording .DefaultBtn:before {
            content: "\f539";
            animation: Blink 1.3s linear infinite;
        }

        .ChatBox.Recording .DefaultBtn:after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            border: 2px solid rgba(255, 255, 255, 0);
            border-radius: 50%;
            border-top: 2px solid #ffffff;
            width: 38px;
            height: 38px;
            animation: D360 1.5s linear infinite;
        }

    .ChatBox.Recording .TimerVoic {
        display: inline-block;
    }

    .ChatBox.Recording .TextPM {
        width: calc(100% - 100px);
        user-select: none;
        pointer-events: none;
        box-shadow: inset 0 0 8px 4px;
    }

    .ChatBox.Recording .UpldPM, /*.ChatBox.Recording .AutoAsk,*/ .ChatBox.Recording .SendPM {
        display: none;
    }

    .ChatBox.Recording.Recorded {
    }

        .ChatBox.Recording.Recorded .DefaultBtn {
            /*color: #ffffff;*/
        }

            .ChatBox.Recording.Recorded .DefaultBtn:before {
                content: "\f1d8";
                animation: none;
            }

            .ChatBox.Recording.Recorded .DefaultBtn:after {
                display: none;
            }

        .ChatBox.Recording.Recorded .SimplePlayer {
            display: inline-block;
            height: 38px;
            line-height: 40px;
        }

        .ChatBox.Recording.Recorded .DelVoice {
            display: inline-block;
        }

        .ChatBox.Recording.Recorded .TimerVoic {
            display: none;
        }


    .ChatBox .SimplePlayer {
        display: none;
        position: absolute;
        bottom: 10px;
        left: 82px;
        width: calc(100% - 180px);
    }

    .ChatBox .DelVoice {
        display: none;
        bottom: 6px;
        left: 25px;
        position: absolute;
        direction: rtl;
        font-size: 11px;
        line-height: 44px;
        padding: 0 15px;
        cursor: no-drop;
    }

        .ChatBox .DelVoice:after {
            content: "\f2ed";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            position: absolute;
            left: -3px;
            vertical-align: middle;
            line-height: 41px;
            font-size: 13px;
        }

        .ChatBox .DelVoice:hover {
            filter: invert(1);
        }

    .ChatBox.UpldPMDis .BtnC {
        visibility: hidden;
        opacity: 0;
        transform: scale(0.1);
    }

.Disabool {
    pointer-events: none;
    filter: grayscale(0.7) opacity(0.5) !important;
}


@keyframes Roonamaiy {
    0% {
        right: calc(50% - 22px);
        bottom: calc(20% - 22px);
        transform: scale(0.1);
        opacity: 0;
    }

    80% {
        right: calc(50% - 22px);
        bottom: calc(50% - 22px);
        transform: scale(6);
        opacity: 0.7;
    }

    100% {
        right: 6px;
        bottom: 6px;
        transform: none;
        opacity: 1;
    }
}

@media (max-width:768px) {
    .xs-full-height {
        height: 100vh !important;
    }
}

.MojriBase, .CustmBase {
    text-align: center !important;
}

.MojriBase {
    justify-content: center !important;
    margin: 0 auto;
    padding: 0;
}

@media (max-width:767px) {
    .BySide {
    }

        .BySide#ProjDetails2 {
            top: 0;
            position: absolute;
            left: 0;
            z-index: 10;
            background: var(--BgColor);
            height: 100%;
            bottom: 0px;
        }

    .MojriBase #ProjList {
        padding-top: 60px;
        height: 100%;
    }

    .DisableDiv#ProjDetails2 {
        z-index: 10000;
        top: 100vh;
    }

    .MojriBase .BySide#ProjDetails2:Not(.DisableDiv) {
        top: 50px;
        top: 0;
    }

    .MyChatList.DisableDiv {
        top: 100vh;
        display: none;
    }

        .MyChatList.DisableDiv:Not(:empty) {
            top: 60px;
            display: block;
            height: calc(100% - 60px);
            padding: 2px 10px;
            background: var(--BgColor);
            z-index: 10;
        }
}

.lb-dataContainer {
    display: none !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#VRShow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.RendersVR * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -text-size-adjust: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -ms-content-zooming: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.RendersVR canvas {
    top: 0;
    left: 0;
}

.RendersVR .FullScreenVR {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 25px;
    width: 55px;
    line-height: 55px;
    z-index: 100;
}

.RendersVR .VRMenu {
    top: 10px;
    left: 10px;
    z-index: 2;
    text-align: center;
    width: 110px;
    position: absolute;
}

    .RendersVR .VRMenu i {
        color: #fff;
        padding: 4px;
        display: inline-block !important;
        background: #00194ca6;
        margin: 0;
        font-size: 24px;
        width: 50%;
        cursor: pointer;
        overflow: hidden;
    }

    .RendersVR .VRMenu .AngleBox {
        position: relative;
        background: var(--TransPr);
        margin: 5px 0;
        box-shadow: 0 0 3px;
        border-radius: 8px;
        line-height: 34px;
        font-size: 13px;
        cursor: pointer;
        color: var(--ColorBs);
    }

        .RendersVR .VRMenu .AngleBox:hover {
            box-shadow: 0 0 6px 3px;
            z-index: 1;
        }

/*.MostaedeVR {
    position: absolute;
    width: 160px;
    top: 93px;
    line-height: 34px;
    right: -38px;
    z-index: 1;
    transform: rotate( 45deg);
    font-size: 16px;
    text-shadow: 0 0 4px var(--WtColor);
    border: 2px solid var(--WtColor);
    box-shadow: 0 0 5px 2px, inset 0 0 15px;
    padding-top: 2px;
    background: var(--TransPr);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}*/

.RendersVR .DeleteVR360 {
    position: absolute;
    font-size: 17px;
    left: 5px;
    top: 5px;
    line-height: 40px;
    width: 40px;
    animation: Append 1.2s forwards 1;
    color: var(--RedVl);
    text-shadow: 0 0 2px var(--RedBs), 0 0 10px var(--RedBs), 0 0 3px var(--RedBs);
    cursor: pointer;
    z-index: 10;
}

    .RendersVR .DeleteVR360:before {
        content: "\f2ed";
        font-family: "Font Awesome 6 Pro";
    }

    .RendersVR .DeleteVR360:hover:before {
        color: var(--RedLt);
        font-size: 21px;
    }

.GalleryVr360 {
    width: 100%;
}

    .GalleryVr360 .RendersVR {
        height: 400px;
    }

.SendPlus {
    position: absolute !important;
    width: 70px !important;
    right: 20px;
    bottom: 20px;
    z-index: 20;
}

td, tr {
    border: 1px solid #594b98;
}

@media (min-width:768px) {
    .FullPage {
        max-width: 100%;
        margin: 0 auto;
        height: 100%;
    }

    .BySide {
        height: calc(100vh - 10px);
        box-shadow: 0 0 3px;
        border-radius: 10px;
        background: #ffffff82;
        background: var(--TransPr);
        padding: 2px 10px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        flex-grow: 1;
        flex-basis: 0;
        margin: 5px;
    }

        .BySide + .BySide {
            margin-left: 1px;
        }

    .DetailsLarg .MainFace {
        width: calc(22.5% - 8px) !important;
    }

    .MyChatList {
        flex-grow: 0.8;
        max-width: 440px;
        user-select: none;
    }

        .MyChatList:empty {
            /*flex-grow: 0.35;*/
            max-width: 50px;
        }

    .MojMenu {
        flex-grow: 0.4;
    }
}

.MojMenu {
    font-size: 25px !important;
    position: relative;
    top: 0;
    direction: rtl;
    z-index: 9;
    width: 100%;
    text-align: right;
    white-space: pre;
    overflow-y: hidden;
}

    .MojMenu .SelfImg {
        top: 2px;
        border-radius: 3px;
        width: 50px;
        box-shadow: 0 0 0 1px;
        background: #fff;
        margin-left: 5px;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        cursor: pointer;
        user-select: none;
    }

    .MojMenu .Iconz {
        position: relative;
        display: inline-block;
        vertical-align: top;
        min-width: 45px;
        text-align: center;
        font-size: 22px;
        line-height: 50px;
        cursor: pointer;
        user-select: none;
        /*transition: 0.2s;*/
    }

        .MojMenu .Iconz:before {
            /*transition: 0.1s;*/
            font-family: "Font Awesome 6 Pro";
        }

        .MojMenu .Iconz:hover:before {
            transform: scale(1.15);
        }

    .MojMenu [Job] {
    }

    .MojMenu [MoJob].Selected, .MojMenu .Iconz.Selected {
        filter: invert(1) !important;
    }

    .MojMenu [MoJob="MojriOnly"].Selected:before {
        content: "\f007";
    }

    .MojMenu .Iconz.ComPrs.Selected {
        filter: invert(1) !important;
    }

        .MojMenu .Iconz.ComPrs.Selected:before {
            content: "\f065";
        }

    .MojMenu .MenuHr {
        display: inline-block;
        border: none;
        border-left: 2px solid;
        height: 30px;
        margin: 10px 20px;
    }

@media (min-width:1300px) {
    .MojMenu {
        /*flex-grow: 0.4;*/
        display: inline-block;
        max-height: unset;
        padding: 2px;
        max-width: 150px;
        text-align: center;
        white-space: break-spaces;
    }

        .MojMenu div.Iconz {
            width: 95%;
            height: 35px;
            line-height: 35px;
            padding-right: 35px;
            text-align: right;
            display: block;
        }

            .MojMenu div.Iconz span {
                font-size: 11px;
                font-weight: 900;
                line-height: inherit;
                position: absolute;
                right: 45px;
                bottom: 0;
                display: inline-block;
                font-family: IranSans;
                white-space: pre;
            }

            .MojMenu div.Iconz:before {
                position: absolute;
                right: 0;
                width: 35px;
                font-weight: 900;
                text-align: center;
                /*content: "" !important;
                animation: unset !important;
                background-size: contain;
                opacity: 0.9;
                background-image: url(../images/Theme/Haloween.png);
                height: 35px;
                width: 35px;*/
            }

            .MojMenu div.Iconz.Small {
                width: 33.33%;
                padding: 0;
                display: inline-block;
                min-width: unset;
            }

        .MojMenu .SelfImg {
            width: 90px;
            height: 90px;
            margin: 10px auto 25px;
            box-shadow: 0 0 5px 2px;
        }

            .MojMenu .SelfImg:hover {
                box-shadow: 0 0 9px 3px;
            }

        .MojMenu div.Iconz:Not(.Small):hover {
            margin-right: 3px;
        }

            .MojMenu div.Iconz:Not(.Small):hover span {
                right: 55px;
            }

            .MojMenu div.Iconz:Not(.Small):hover:before {
                /*transform: rotate(-6deg) !important;*/
                transform: unset !important;
            }

        .MojMenu .MenuHr {
            width: 80%;
            border: none;
            border-top: 2px solid;
            margin: 10px auto;
            height: unset;
        }
}

@media (min-width:768px) and (max-width: 1300px) {
    .MojMenu {
        display: inline-block;
        max-height: unset;
        padding: 2px;
        max-width: 50px;
        text-align: center;
        white-space: break-spaces;
    }

        .MojMenu div.Iconz {
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            display: block;
        }

            .MojMenu div.Iconz span {
                display: none;
            }

            .MojMenu div.Iconz:before {
                position: absolute;
                right: 0;
                width: 100%;
                font-weight: 900;
                text-align: center;
            }

            .MojMenu div.Iconz.Small {
                width: 33.33%;
                padding: 0;
                display: inline-block;
                min-width: unset;
            }

        .MojMenu .SelfImg {
            width: 42px;
            height: 42px;
            margin: 12px auto 2px;
            box-shadow: 0 0 5px 2px;
        }

            .MojMenu .SelfImg:hover {
                box-shadow: 0 0 9px 3px;
            }

        .MojMenu div.Iconz.Small, .MojMenu .MenuHr {
            display: none;
        }
}

@media (max-width: 768px) {
    .MojMenu {
        box-shadow: 0 0 10px 3px, 0 0 0 1px;
        overflow-x: auto;
        overflow-y: hidden;
        position: fixed;
        background: var(--TransPr);
        backdrop-filter: blur(8px);
        padding: 5px 15px;
        height: 60px !important;
        width: 100%;
    }

        .MojMenu div.Iconz span {
            display: none;
        }
}


.RendersVR {
    height: 35%;
    width: calc(100% - 4px);
    min-height: 150px;
    /* position: relative; */
    /* display: block; */
    /* box-shadow: 0 0 0 1px; */
    /* text-align: center; */
    /* border-radius: 10px; */
    /* margin: 0 auto; */
    /* overflow: hidden; */
    /* background: var(--ColorLt); */
}

    .RendersVR.FullScreenVRView {
        position: absolute;
        top: 0;
        right: 0;
        height: 100% !important;
        width: 100%;
        z-index: 1000;
    }

    .RendersVR.FullScrVR {
        position: fixed !important;
        width: 100%;
        height: 100%;
        z-index: 999;
        left: 0;
        top: 0;
        margin: 0;
    }

    .RendersVR.Small {
        height: 33%;
        min-height: 150px;
    }

.Btn.GroupDelete {
    width: 25px;
    line-height: 25px;
    text-align: center;
    position: absolute;
    left: 0;
    top: -3px;
    font-size: 12px;
}

    .Btn.GroupDelete:before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
    }

    .Btn.GroupDelete:hover {
        transform: scale(1.2);
        color: var(--OrangeBs);
    }

    .Btn.GroupDelete.Confirmd {
        color: var(--RedBs);
    }

.Renders {
    display: inline-block;
    margin: 2px;
    width: calc(100% - 4px);
    border-radius: var(--CrsBorder);
    box-shadow: var(--CrsBoxShadow);
    background: linear-gradient( 25deg,var(--ColorLt) 25%, var(--WtColor) 45%);
    transition: 0.6s;
    position: relative;
    min-height: 50px;
    overflow: hidden;
    cursor: pointer;
    font-size: 0;
}

    .Renders:before {
        content: '';
        padding-top: 56.25%;
        position: relative;
        display: block;
        height: 0;
    }

    .Renders img {
        width: 100% !important;
        position: absolute;
        left: 0;
        top: 0;
    }

    .Renders .Cover {
        position: absolute;
        left: 6px;
        bottom: 6px;
        line-height: 22px;
        background: var(--TransPr);
        font-size: 10px;
        width: 60px;
        border-radius: 12px;
        box-shadow: var(--CrsFadeShadow);
        backdrop-filter: blur(3px);
        pointer-events: none;
    }

    .Renders[VideoSrc] {
        width: calc(100% - 4px) !important;
    }

        .Renders[VideoSrc]:after {
            font-family: "Font Awesome 6 Pro";
            content: '\f04b';
            position: absolute;
            top: calc(50% - 35px);
            left: calc(50% - 35px);
            color: #fff;
            font-size: 24px;
            border-radius: 50%;
            line-height: 70px;
            background: #ffffff73;
            width: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-shadow: 0 0 7px black;
            box-shadow: 0 0 10px 5px #000, inset 0 0 14px 5px #fff;
            transition: 0.3s;
        }

        .Renders[VideoSrc] img {
            filter: grayscale(0.4) blur(4px);
            transform: scale(1.1);
        }

        .Renders[VideoSrc]:hover:after {
            box-shadow: 0 0 15px 8px #000, inset 0 0 14px 5px #fff;
        }

        .Renders[VideoSrc]:hover img {
            transform: scale(1.25);
        }

    .Renders .Btn {
        font-family: "Font Awesome 6 Pro";
        font-size: 20px;
        width: 40px;
        line-height: 40px;
        font-weight: 900;
        position: absolute;
        top: 0;
        z-index: 1;
        color: var(--WtColor);
        opacity: 0.6;
        cursor: pointer;
    }

        .Renders .Btn:hover {
            /*transform: scale(1.1) !important;*/
            opacity: 1;
        }

        .Renders .Btn.RenderDL {
            left: 0;
        }

            .Renders .Btn.RenderDL:before {
                content: "\f019";
            }

        .Renders .Btn.ChangeCover {
            left: 40px;
        }

            .Renders .Btn.ChangeCover:before {
                content: "\f024";
            }

        .Renders .Btn.DeleteRender {
            right: 0;
        }

            .Renders .Btn.DeleteRender:hover {
                color: var(--RedBs);
            }

    .Renders.Mini {
        width: calc(50% - 4px);
    }

    .Renders.NoRatio {
    }

        .Renders.NoRatio:before {
            padding: unset;
        }

        .Renders.NoRatio img {
            position: relative;
        }

.DLed {
    color: #3f0;
    text-shadow: 0 0 3px #000;
}

    .DLed:after {
        content: "\f00c";
        font-size: 12px;
        position: absolute;
        right: 3px;
        top: 4px;
        line-height: 15px;
        color: #fbff00;
    }

@media only screen and (orientation: landscape) {
    .ChatBody .Renders:Not(.Video):Not(.Large) {
        width: calc(33.33% - 4px) !important;
    }
}

/*.xCrs#BirthDay [value="1 فروردین 1400"] {
        opacity: 0.3;
    }*/

.TestinNow {
    width: 40px;
    line-height: 40px;
    position: absolute;
    right: 7px;
    margin-top: -42px;
    font-size: 20px;
    cursor: cell;
}

    .TestinNow:before {
        content: "\f29a";
        font-family: "Font Awesome 6 Pro";
    }

.xCrs.C-2020 {
    color: #7e00b3 !important;
}

    .xCrs.C-2020:before {
        content: '2020';
        position: absolute;
        width: 28px;
        line-height: 8px;
        pointer-events: none;
        background: #ffffff;
        direction: ltr;
        left: -6px;
        top: 3px;
        z-index: 10;
        transform: rotate(-45deg);
        font-family: BComic;
        font-weight: 900;
        box-shadow: 0 0 3px;
        font-size: 5px;
        opacity: 0.7;
        right: unset;
    }

.xCrs.C-A30 {
    color: #008ab3 !important;
}

    .xCrs.C-A30:before {
        content: 'A30!';
        position: absolute;
        width: 28px;
        line-height: 8px;
        pointer-events: none;
        background: #fff;
        direction: ltr;
        left: -6px;
        top: 3px;
        z-index: 10;
        transform: rotate(-45deg);
        padding: 0px;
        font-family: BComic;
        font-weight: 900;
        box-shadow: 0 0 3px;
        font-size: 5px;
        opacity: 0.8;
        right: unset;
    }

.xCrs.C-Mostafa {
    color: #1d8e00;
}

    .xCrs.C-Mostafa:before {
        content: 'Most!';
        position: absolute;
        width: 28px;
        line-height: 8px;
        pointer-events: none;
        background: #fff;
        direction: ltr;
        left: -6px;
        top: 3px;
        z-index: 10;
        transform: rotate(-45deg);
        padding: 0px;
        font-family: BComic;
        font-weight: 900;
        box-shadow: 0 0 3px;
        font-size: 5px;
        opacity: 0.8;
        right: unset;
    }

.xCrs.C-Fade {
    height: 30px;
    min-height: 30px;
}

    .xCrs.C-Fade > * {
        zoom: 0.7;
        opacity: 0.4;
    }

.btn {
    font-size: 14px;
}

select input[type=number]::-webkit-inner-spin-button {
    margin: 0;
}

.Time {
    right: 7px;
    position: absolute;
    font-size: 8.5px;
    bottom: 1px;
    opacity: 0.5;
    line-height: 15px;
    height: 15px;
    z-index: 1;
}

    .Time:after {
        content: "\f00c";
        position: absolute;
        left: -15px;
        font-weight: 900;
        font-family: "Font Awesome 6 Pro";
        transition: 0s;
        line-height: inherit;
        width: 15px;
    }

    .Time.Seen:after {
        content: "\f560";
    }

.msg {
}

    .msg:hover .Time {
        opacity: 1;
        transform: scale(1.1);
    }

@keyframes SearchLoading {
    50% {
        transform: rotate(180deg);
        border-radius: 20%;
    }

    100% {
        transform: rotate(360deg);
    }
}

.SplitSide {
}

    .SplitSide.CustmList {
        width: 60%;
        overflow: auto;
        overflow-x: hidden;
    }

    .SplitSide.CommandList {
        width: 40%;
        overflow: visible;
    }

        .SplitSide.CommandList .xCrs.Title {
            font-size: 10px;
        }

.NoShadow {
}

    .NoShadow .xCrs {
        box-shadow: none;
        margin: 2px 2px;
    }

        .NoShadow .xCrs > * {
            border: none;
        }

@media (max-width: 960px) {
    .SplitSide.CommandList .xCrs[TextHint] {
        padding-right: 27px;
    }

    .SplitSide.CommandList .xCrs:focus:after,
    .SplitSide.CommandList .xCrs:not(:empty):after {
        opacity: 0.7;
        font-size: 5.5px;
        line-height: 12px;
        right: 0;
        top: 26px;
        width: 25px;
    }

    .SplitSide.CommandList .xCrs:before {
        font-size: 14px;
        font-weight: 900;
        width: 25px;
        line-height: 20px;
        top: 5px;
    }
}

.PricesList {
}

.ModalBody .PricesList {
    height: auto;
    padding: 20px 10px;
    position: relative;
    animation: Append 0.5s forwards;
    overflow: auto;
    direction: ltr;
}

@media (min-width: 960px) {
    .ModalMsg:has(.PricesList:not(:empty)) {
        margin-left: 400px;
    }

    .ModalBody .PricesList {
        width: 400px;
        position: fixed;
        left: -405px;
        background: var(--BgColor);
        box-shadow: 0 0 5px #000;
        height: 100%;
        top: 0;
        border-radius: calc(var(--CrsBorder) + 4px);
    }
}

.PriceRicords {
    --ColorBs: var(--GreenBs);
    --ColorVl: var(--GreenVl);
    --ColorLt: var(--GreenLt);
    background: var(--ColorVl);
    color: var(--ColorBs);
    text-align: right;
    height: var(--CrsHeight);
    line-height: var(--CrsHeight);
    font-size: 10px;
    width: calc(100% - 1px);
}

    .PriceRicords:hover {
    }

        .PriceRicords:hover .TiTle {
            padding-right: 8px;
        }


    .PriceRicords .TiTle {
        position: absolute;
        right: 44px;
        z-index: 999;
        line-height: inherit;
        vertical-align: middle;
    }

    .PriceRicords > span {
        position: absolute;
        left: 10px;
        vertical-align: middle;
        direction: ltr;
        text-shadow: none;
        line-height: inherit;
        font-family: BComic;
        font-size: 1.6em;
        letter-spacing: -0.5px;
    }

    .PriceRicords .Detl {
        position: absolute;
        left: 95px;
        font-size: 9.5px;
        white-space: pre;
        line-height: 17px;
        height: var(--CrsHeight);
        padding: 4px 0;
        text-align: left;
        opacity: 0.7;
        top: 0;
    }

        .PriceRicords .Detl span {
            display: block;
            line-height: 22px;
        }

    .PriceRicords img {
        right: 7px;
        position: absolute;
        width: 26px;
        height: 26px;
        top: 12px;
        border-radius: 20px;
        vertical-align: middle;
    }

    .PriceRicords i {
        position: absolute;
        font-size: 1.8em;
        right: 3px;
        width: 32px;
        text-align: center;
        line-height: inherit;
        vertical-align: middle;
        font-family: "Font Awesome 6 Pro";
        font-style: normal;
    }

    .PriceRicords.xxx {
        --ColorBs: var(--OrangeBs);
        --ColorVl: var(--OrangeVl);
        --ColorLt: var(--OrangeLt);
    }

    .PriceRicords.Error {
        --ColorBs: #a4a4a4;
        --ColorVl: var(--TransPr);
        --ColorLt: var(--TransPr);
    }

        .PriceRicords.Error:Not(.Open) {
            height: 24px;
            line-height: 24px;
            font-size: 6.5px;
        }

    .PriceRicords.Open {
        height: 106px;
        margin: 8px 0;
    }

.PriceDetails {
    width: calc(100% - 40px);
    padding: 4px 10px;
    margin: 50px 20px 0;
    position: absolute;
    border-top: 1px solid;
    line-height: 23px;
    font-size: 10px;
    direction: rtl;
}

    .PriceDetails span {
        width: 50%;
        text-align: center;
        display: inline-block;
    }

.UpPrice {
    width: 100%;
    box-shadow: 0 0 15px;
    padding: 10px 30px 10px 70px;
    text-align: center;
    z-index: 100;
    position: absolute;
    border-bottom: 1px solid;
    background-size: 150%;
    left: 0;
    top: 0;
    background: var(--BgColor);
}

    .UpPrice h6 {
        padding: 10px 0 10px;
        font-size: 13px;
        text-shadow: none;
    }

    .UpPrice .upCredit1 {
        font-size: 16px;
        position: relative;
        box-shadow: 0 0 0 1px;
        line-height: 45px;
        border-radius: 3px;
        background: linear-gradient( 30deg,currentcolor, #fff 40% 60%, currentcolor) center;
        background-size: 150%;
    }

        .UpPrice .upCredit1:before {
            content: "\f155";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            font-size: 50px;
            right: 10px;
            position: absolute;
        }

    .UpPrice .RefreshMx {
        font-size: 20px;
        position: absolute;
        left: 5px;
        bottom: 0;
        cursor: pointer;
        padding: 8px;
    }

.xCrs.OrderSelect {
    filter: hue-rotate( 180deg ) !important;
}

.PayFactor {
    padding: 12px 2px;
    white-space: pre;
    width: calc(100% - 4px);
    min-height: var(--CrsHeight);
    line-height: var(--CrsLineHeight);
    margin: 5px auto;
}

    .PayFactor .ReadText {
        font-size: 12px;
    }

    .PayFactor:after {
        position: absolute;
        font-size: 9.5px;
        top: 10px;
        padding-top: 2px;
        text-align: center;
        box-shadow: 0 0 3px;
        background: var(--WtColor);
        line-height: 20px;
        width: 85px;
        right: -22px;
        transform: rotate(45deg);
        font-family: 'Sarbaz';
        opacity: 0.7;
    }

    .PayFactor:hover {
        box-shadow: 0 0 0 1px, inset 0 20px 25px -10px;
        background: var(--ColorLt);
    }

    .PayFactor .xCrs {
        margin: 10px 10px 0;
        width: calc(100% - 20px);
    }

    .PayFactor.Method1 {
    }

        .PayFactor.Method1:after {
            content: "آنلایْـــــن";
        }


        .PayFactor.Method1 .xCrs {
            background: var(--BgTrust);
        }

        .PayFactor.Method1.Disable {
        }

            .PayFactor.Method1.Disable:after {
                content: "غیرفعّـــال";
            }

            .PayFactor.Method1.Disable .ReadText {
                white-space: normal;
                padding: 0 60px 0 20px;
                font-size: 11px;
                opacity: 0.55;
            }

    .PayFactor.Method2 {
    }

        .PayFactor.Method2:after {
            content: "با تأخیــــر";
        }

        .PayFactor.Method2 .xCrs {
            background: linear-gradient( 30deg, var(--OrangeLt) 10%, var(--WtColor) 90%);
        }

h1.PayFactorTitle {
    font-family: BComic;
    position: absolute;
    display: inline;
    left: 7%;
    font-size: 40px;
    margin: 0;
    line-height: 68px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px var(--ColorBs);
}

.BankInfo {
    border-radius: 8px;
    width: 100px;
    height: 26px;
    position: absolute;
    top: 96px;
    background: #fff;
    box-shadow: 0 0 2px #000;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    line-height: 26px;
}

    .BankInfo:hover {
        transform: scale(1.1);
    }

    .BankInfo:before {
        content: "\f155";
        font-size: 32px;
        float: left;
        left: 10px;
        position: absolute;
        top: 0px;
        text-shadow: 0 0 25px #6a7c8c;
        transform: rotate(-35deg);
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
    }

    .BankInfo span {
        direction: ltr;
        font-size: 20px;
        position: absolute;
        left: 50px;
        top: 4px;
    }

/*.blueBtn.SelectProjCus {
    height: 180px !important;
    margin: 15px 0;
    transition: 0.5s;
    overflow: hidden;
}*/

.blueBtn.SelectedProj {
    height: 90px;
    margin: 12px 0;
    /*box-shadow: 0 0 5px -1px;*/
}

.blueBtn.LargBtn {
    height: 90px;
}

.DeleteRender360 {
    position: absolute;
    right: -30px;
    font-size: 17px;
    width: 30px;
    top: 0;
    float: right;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    cursor: pointer;
    text-shadow: 0 0 2px #000;
}

    .DeleteRender360:before {
        content: "\f00d";
    }

    .DeleteRender360:hover {
        transform: scale(1.3);
    }

.WillDelete {
    background: var(--RedLt);
    color: var(--RedBs);
}

    .WillDelete .DeleteRender {
        transform: scale(1.2);
    }

    .WillDelete img {
        filter: blur(3px) opacity(0.5) !important;
        transform: scale(1.3) !important;
    }

    .WillDelete .Btn:Not(.DeleteRender) {
        opacity: 0;
        pointer-events: none;
    }

    .WillDelete.Renders .Cover {
        opacity: 0.3;
        pointer-events: none;
    }
/*.GraStyle {
    filter: grayscale(100%);
}

    .GraStyle img {
        filter: blur(4px) grayscale(100%);
    }*/
.UpingIMG {
    position: absolute;
    z-index: 10000;
    border: 10px solid #fff;
    border: 10px solid #ffffff6e;
    border-top: 10px solid #0069ff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1.5s linear infinite;
    margin-left: 20px;
    margin-top: 20px;
    transform: rotate(0deg);
}

@keyframes spin {
    20% {
        transform: rotate(72deg);
        border-radius: 50%;
        border: 10px solid #ffaaaa70;
        border-top: 10px solid #0069ff;
    }

    60% {
        transform: rotate(216deg);
        border-radius: 20%;
    }

    100% {
        transform: rotate(360deg);
        border-radius: 50%;
    }
}

.ExportMenu {
    width: calc(100% - 4px);
    padding: 8px 8px;
    direction: rtl;
    position: relative;
    background: var(--ColorVl);
    display: inline-block;
    margin: var(--CrsMargin);
    border-radius: var(--CrsBorder);
    box-shadow: var(--CrsBoxShadow);
}

    .ExportMenu .RatingNum {
        width: 70px;
        line-height: 50px;
        left: 10px;
        position: absolute;
        font-size: 30px;
        top: -15px;
        font-family: BComic;
        letter-spacing: -3px;
        border-radius: var(--CrsBorder);
        box-shadow: var(--CrsBoxShadow);
        background: var(--ColorVl);
    }

    .ExportMenu .RatingStars[Star="1"] {
    }

        .ExportMenu .RatingStars[Star="1"] .RatingNum {
            background-color: #ff5757;
        }

    .ExportMenu .RatingStars[Star="5"] {
    }

        .ExportMenu .RatingStars[Star="5"] .RatingNum {
            background-color: #86d080;
        }

    .ExportMenu .RatingLog {
        line-height: 20px;
        position: absolute;
        width: calc(100% - 130px);
        font-size: 11px;
        top: 17px;
        right: 40px;
        opacity: 0.8;
    }

        .ExportMenu .RatingLog.Hide {
            opacity: 0;
        }

    .ExportMenu.OpenEteraz .SabtEteraz {
        max-height: 220px;
        margin: 0px auto 2px;
        padding: 5px 0;
        border-top: 2px solid;
    }

    .ExportMenu.OpenEteraz .SedaQat {
        max-height: 0;
        padding: 0;
        border-top: none;
        margin: 0 auto;
    }

    .ExportMenu .IconzPack {
        padding: 10px 2px;
    }

    .ExportMenu .SedaQat {
        font-size: 11.5px;
        max-height: 50px;
        margin: 10px auto 5px;
        width: 220px;
        border-top: 2px solid;
        overflow: hidden;
        line-height: 25px;
        opacity: 0.9;
        padding-top: 6px;
        color: var(--GreenBs);
        white-space: pre;
    }

    .ExportMenu .SabtEteraz {
        width: 97%;
        position: relative;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: 0.8s;
        margin: 0 auto;
        color: var(--RedBs);
    }

.GetInfoCustm {
    text-align: right;
    padding-bottom: 90px;
    direction: rtl;
}

.BtnGroup {
    width: 100%;
    text-align: center;
    height: 60px;
    padding: 2px 0;
    position: absolute;
    left: 0;
    bottom: 0;
    /*background: var(--BgColor);*/
    z-index: 1;
    box-shadow: 0 0 0 1px, 0 0 12px 2px;
    direction: rtl;
    background: var(--TransPr);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.TopDetailCard {
    overflow: hidden;
    position: relative;
    user-select: none;
}

.RatioIMG {
    width: 52%;
    max-width: 300px;
    margin: 5px;
    float: left;
    position: relative;
}

    .RatioIMG:before {
        content: '';
        width: 100%;
        padding-top: 100%;
        display: block;
    }

    .RatioIMG .GetInfoIMG {
        object-fit: cover;
        background: var(--WtColor);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid var(--WtColor);
        box-shadow: 0 0 6px 1px var(--DepDark);
        animation: Append 1.8s forwards 1;
        position: absolute;
        left: 0;
        top: 0;
    }

    .RatioIMG .BtnBox {
        position: absolute;
        left: 0;
        top: 12px;
        width: 100%;
        z-index: 10;
        padding: 5px 0;
        display: inline-flex;
        justify-content: center;
    }

        .RatioIMG .BtnBox .Btn {
            display: inline-block;
            width: 46px;
            line-height: 42px;
            height: 46px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer !important;
            text-align: center;
            border: 2px solid var(--WtColor);
            background: var(--TransPr);
            backdrop-filter: blur(5px);
            box-shadow: 0 0 3px 1px, inset 0 0 5px 1px;
            margin: 0;
            vertical-align: top;
            margin: 2px;
            opacity: 0.9;
            background: var(--WtColor);
        }

            .RatioIMG .BtnBox .Btn:before {
                font-family: "Font Awesome 6 Pro";
            }

            .RatioIMG .BtnBox .Btn:hover {
                box-shadow: 0 0 3px 1px, inset 0 0 5px 3px;
                transform: rotate(-10deg);
            }

    .RatioIMG .Btn.UploadLogo {
    }

    .RatioIMG .BtnBox .Btn.UploadLogo img {
        padding: 6px;
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .RatioIMG .BtnBox .Btn.Conflict:before {
        color: #f00;
    }

    .RatioIMG .BtnBox .Btn[SendingCall]:before {
        color: var(--GreenBs);
    }

    .RatioIMG .BtnBox .MoarefIcon {
    }

@media (max-width:768px) {
    .RatioIMG .BtnBox .Btn {
        border-width: 1px;
        width: 35px;
        line-height: 33px;
        height: 35px;
        font-size: 13px;
        margin: 1px;
    }
}

.UserDiv {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.NewMsgMoj, .NewMsgCus {
    position: relative;
}

    .NewMsgMoj .NameDivder::after, .NewMsgCus .AvatarDivider::after {
        content: "\f075";
        position: absolute;
        font-size: 18px;
        /* text-shadow: 0 0 3px var(--WtColor), 0 0 3px var(--WtColor); */
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        z-index: 10;
        width: 20px;
        line-height: 20px;
        pointer-events: none;
        -webkit-text-stroke: 2px var(--WtColor);
        paint-order: stroke fill;
        top: 1px;
    }

    .NewMsgMoj .NameDivder::after {
        left: 78px;
    }

    .NewMsgCus .AvatarDivider::after {
        right: 27px;
        transform: scaleX(-1);
    }

    .NewMsgCus .NameDivder:has( > .PrjPrice)::after {
        left: 78px;
    }

.ChartDiv {
    overflow: visible;
    user-select: none;
    min-height: 200px;
    padding: 4px 4px;
}

    .ChartDiv.Asli {
        width: 100%;
        padding: 4px 1px;
    }

    .ChartDiv #ChartChampions {
        padding: 4px 1px;
        vertical-align: middle;
        direction: ltr;
        height: 770px;
        width: 100%;
    }

    .ChartDiv #myChart {
        padding: 5px;
        vertical-align: middle;
        direction: ltr;
        height: calc(100% - 55px);
    }

    .ChartDiv .HistoryChart {
        opacity: 1;
        font-size: 12px;
        box-shadow: inset 0 0 12px;
        transition: 0.8s;
        width: 10%;
        border-radius: 17px;
        line-height: 34px;
        position: absolute;
        right: 20px;
        top: 55px;
        cursor: pointer;
        min-width: 75px;
    }

.ChartDivCus {
    width: 30%;
    height: 140px;
    position: absolute;
    user-select: none;
    left: 33%;
    bottom: 5px;
    filter: drop-shadow(0 0 3px);
    z-index: 1;
}

.CusTotalChart {
    height: 290px;
    width: calc(100% - 4px);
    padding: 5px;
}

    .CusTotalChart.GoForChartz {
        max-height: 80px;
    }

.AnalDivCus {
    /*width: 33%;*/
    min-width: 100px;
    display: inline-block;
    position: absolute;
    right: 4px;
    top: 0;
    font-size: 13px;
    text-align: right;
    padding: 0 35px 0 0;
    direction: rtl;
    font-weight: 800;
}

    .AnalDivCus .AnaLine {
        line-height: 35px;
        position: relative;
        white-space: pre;
        /*border-bottom: 1px solid #1560a047;*/
        /*border-bottom: 1px solid var(--ColorLt);*/
        cursor: pointer;
        padding: 7px 0;
    }

        .AnalDivCus .AnaLine:before {
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            width: 35px;
            position: absolute;
            right: -35px;
            text-align: center;
            top: 0;
            font-size: 20px;
            transition: 0.3s;
        }

        .AnalDivCus .AnaLine.Green:before {
            color: var(--GreenBs);
        }

        .AnalDivCus .AnaLine:hover:before {
            transform: scale(1.15);
            filter: invert(1);
            /*right: -32px;*/
        }

        .AnalDivCus .AnaLine span, .AnalDivCus .AnaLine input {
            width: 100%;
            display: block;
            line-height: 22px;
            direction: rtl;
            position: relative;
            /* 4 Input 👇👇 */
            border: none;
            background: none;
            color: unset;
            font-weight: unset;
            text-align: unset;
            cursor: unset;
            padding: 0;
            /* 4 Input 👆👆 */
        }

            .AnalDivCus .AnaLine span:hover, .AnalDivCus .AnaLine input:hover {
                padding-right: 10px;
                filter: invert(1);
            }

            .AnalDivCus .AnaLine span .Hint {
                opacity: 0.8;
                padding-right: 7px;
                font-size: 10.5px;
                line-height: 25px;
                display: inline-block;
                vertical-align: middle;
            }

            .AnalDivCus .AnaLine span.Small {
                opacity: 0.5;
                font-size: 10px;
                line-height: 18px;
            }

                .AnalDivCus .AnaLine span.Small.Icon {
                    padding-right: 16px;
                }

                    .AnalDivCus .AnaLine span.Small.Icon:before {
                        font-family: "Font Awesome 6 Pro";
                        position: absolute;
                        top: 0;
                        right: -2px;
                        width: 14px;
                        text-align: center;
                    }

            .AnalDivCus .AnaLine span.Deleted {
                text-decoration: line-through;
                opacity: 0.5;
            }

        .AnalDivCus .AnaLine .NewTell {
            width: 15px;
            line-height: 15px;
            height: 15px;
            position: absolute;
            right: -30px;
            text-align: center;
            top: 4px;
            font-size: 10px;
            z-index: 2;
            cursor: cell;
        }

            .AnalDivCus .AnaLine .NewTell:before {
                content: "\f067";
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
            }

            .AnalDivCus .AnaLine .NewTell:hover:before {
                filter: invert(1);
            }

    .AnalDivCus :last-child {
        border: none;
    }

    .AnalDivCus .WhatsHim {
        font-size: unset;
        padding: 0 6px;
        font-size: 14px;
    }

        .AnalDivCus .WhatsHim:hover {
            transform: scale(1.3) rotate(-12deg);
        }

    .AnalDivCus .LastSession {
    }

        .AnalDivCus .LastSession.RolleMojri {
        }

        .AnalDivCus .LastSession.RolleCutMs {
        }

        .AnalDivCus .LastSession.Inactive {
            opacity: 0.5;
        }

/*.UsrHonors {
    padding: 5px 0 0;
    direction: rtl;
}

    .UsrHonors .Honor {
        width: 60px;
        text-align: center;
        position: relative;
        cursor: pointer;
        height: 55px;
        display: inline-flex;
        justify-content: center;
    }

        .UsrHonors .Honor h6 {
            font-size: 30px;
            line-height: 46px;
            text-shadow: 0 0 4px #000;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .UsrHonors .Honor span {
            font-size: 8.5px;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            line-height: 12px;
            text-shadow: none;
            white-space: pre;
        }

        .UsrHonors .Honor:hover h6 {
            transform: scale(1.2) rotate(-7deg);
            opacity: 0.7;
        }*/

.xCrs .Timez {
    position: relative;
    border: none;
}

    .xCrs .Timez h5 {
        font-size: 14px;
        position: relative;
        left: 0;
        line-height: 18px;
        display: inline-block;
        vertical-align: top;
        top: 5px;
    }

    .xCrs .Timez:before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        width: 32px;
        right: 0;
        text-align: center;
        top: 0;
        font-size: 20px;
        transition: 0.3s;
        line-height: 40px;
        vertical-align: top;
        position: relative;
        display: inline-block;
        opacity: 0.7;
    }

    .xCrs .Timez.fa-instagram:before {
        font-family: "Font Awesome 6 Brands";
    }

    .xCrs .Timez span {
        opacity: 0.6;
        font-size: 10px;
        position: absolute;
        left: 0;
        line-height: 10px;
        display: inline-block;
        vertical-align: top;
        bottom: 6px;
        padding: 0 30px 0 0;
        width: 100%;
    }

    .xCrs .Timez:hover {
        flex-grow: 1.4;
    }

        .xCrs .Timez:hover span {
            opacity: 1;
        }

.CusTargets {
    padding: 15px 10px;
    overflow: unset;
    z-index: 1;
}

    .CusTargets .TargetRow {
        line-height: 50px;
        height: 70px;
        font-weight: 900;
        display: inline-flex;
        justify-content: center;
        font-family: 'Sarbaz';
    }

        .CusTargets .TargetRow:before {
            content: '';
            width: 20px;
            height: 3px;
            background: var(--ColorBs);
            border-radius: 2px;
            position: absolute;
            bottom: 0;
        }

        .CusTargets .TargetRow.Large {
            flex-grow: 1.4 !important;
            white-space: pre;
        }

        .CusTargets .TargetRow .Number {
            width: 100%;
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            direction: ltr;
            /*font-family: BCOMIC;*/
            font-size: 22px;
            font-family: 'Sarbaz';
            letter-spacing: -1px;
        }

            .CusTargets .TargetRow .Number > span {
                opacity: 0.6;
                font-size: 13px;
                line-height: inherit;
                vertical-align: top;
                display: inline-block;
                padding-left: 5px;
                letter-spacing: -1px;
            }

        .CusTargets .TargetRow .Title {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 11px;
            font-size: 10.5px;
            line-height: 15px;
            white-space: pre;
            opacity: 0.7;
        }

        .CusTargets .TargetRow .Desc {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 20px;
            font-size: 9.5px;
            line-height: 13px;
            opacity: 0;
        }

        .CusTargets .TargetRow:hover {
            flex-grow: 1;
        }

            .CusTargets .TargetRow:hover .Number {
                transform: scale(1.3);
                opacity: 0.3;
                z-index: -1;
                color: #fff;
                text-shadow: 0 0 5px var(--ColorBs), 0 0 5px var(--ColorBs);
            }

            .CusTargets .TargetRow:hover .Title {
                text-shadow: 0 0 5px #fff;
                transform: scale(1.2);
                bottom: 30px;
                opacity: 1;
            }

            .CusTargets .TargetRow:hover .Desc {
                bottom: 10px;
                opacity: 0.7;
            }


            .CusTargets .TargetRow:hover:before {
                width: 45px;
            }

        .CusTargets .TargetRow .Number.Zero {
        }

            .CusTargets .TargetRow .Number.Zero:before {
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                content: "\f119";
                opacity: 0.5;
            }

        .CusTargets .TargetRow.Honor {
        }

            .CusTargets .TargetRow.Honor .Number {
                font-size: 26px;
                text-shadow: 0 0 4px #000;
            }

.MaximBtn {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 13px;
    border-right-color: unset;
    border-top-color: unset;
    cursor: pointer;
    z-index: 1;
    opacity: 0.6;
}

.MaximBtn {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 13px;
    border-right-color: unset;
    border-top-color: unset;
    cursor: pointer;
    z-index: 1;
    opacity: 0.4;
}

    .MaximBtn:hover {
        opacity: 0.7;
    }

.NewAdded::after {
    content: 'New!';
    position: absolute;
    left: 5px;
    bottom: 0px;
    direction: ltr;
    font-size: 10px !important;
    font-family: BComic;
    line-height: 16px;
    filter: invert(1);
    right: unset !important;
}

.NotAlowed {
    background-image: linear-gradient( -45deg, transparent 45%, var(--ColorBs) 50%, transparent 55%);
    background-size: 7px 7px;
    cursor: not-allowed !important;
    filter: grayscale(0.5) opacity(0.6);
    pointer-events: none;
}

    .NotAlowed * {
        pointer-events: none;
    }

    .NotAlowed:after {
        content: 'Not Alowed !!';
        position: absolute;
        left: 5px;
        bottom: 3px;
        direction: ltr;
        font-size: 12px;
        text-shadow: 0 0 3px var(--ColorBs), 0 0 3px var(--ColorBs);
        font-family: BComic;
        color: #fff;
        line-height: 16px;
        z-index: 10;
        opacity: 0.5;
    }

@keyframes example {
    0% {
        bottom: 5px;
        color: #fff;
    }

    65% {
        bottom: 70px;
        color: #ffa73a;
    }
}

.Finger1 {
    font-size: 40px;
    position: absolute;
    left: 25%;
    transform: rotate( 180deg );
    animation: Finger1 1.2s linear infinite;
    z-index: 3;
    position: fixed;
    margin-top: -20px;
}

@keyframes Finger1 {
    70% {
        margin-top: 40px;
    }
}

.Finger3 {
    font-size: 20px;
    position: fixed;
    left: 0;
    transform: rotate(0deg);
    animation: Finger3 1s linear infinite;
    bottom: 46px;
    width: 50px;
    line-height: 10px;
    color: var(--RedBs);
    direction: rtl;
}

    .Finger3 span {
        font-size: 10px;
        position: absolute;
        top: -30px;
        left: 0;
        width: 100%;
        line-height: 18px;
    }

    .Finger3:before {
        font-family: "Font Awesome 6 Pro";
    }

@keyframes Finger3 {
    0% {
        margin-bottom: 0;
    }

    70% {
        margin-bottom: 50px;
    }
}

.FontBold2 {
    transform: rotate(0deg);
    animation: FontBold2 10s linear 5;
    z-index: 15;
}

@keyframes FontBold2 {
    3% {
        transform: rotate(0deg);
    }

    6% {
        transform: rotate(30deg) scale(1.2);
    }

    9% {
        transform: rotate(-30deg) scale(1.2);
    }

    12% {
        transform: rotate(30deg) scale(1.2);
    }

    15% {
        transform: rotate(-30deg) scale(1.2);
    }

    18% {
        transform: rotate(30deg) scale(1.2);
    }

    21% {
        transform: rotate(-30deg) scale(1.2);
    }

    24% {
        transform: rotate(30deg) scale(1.2);
    }

    27% {
        transform: rotate(-30deg) scale(1.2);
    }

    30% {
        transform: rotate(0deg);
    }
}

.NassabBox {
    position: relative;
    text-align: right;
    padding-bottom: 7px;
    /*border-bottom: 1px solid #d1ecff;*/
    border-bottom: 1px solid var(--ColorLt);
    margin: 7px 0;
    max-height: 50px;
    overflow: hidden;
    direction: rtl;
}

    .NassabBox:last-child {
        border-bottom: none;
    }

    .NassabBox img {
        box-shadow: 0 0 0 1px;
        border-radius: 4px;
        width: 42px;
        height: 42px;
        position: relative;
        right: 10px;
        margin: 2px;
    }

    .NassabBox h1 {
        position: absolute;
        display: inline-block;
        font-size: 14px;
        margin: 0;
        line-height: 20px;
        top: 0px;
        right: 65px;
    }


    .NassabBox .MobilBox {
        font-size: 22px;
        position: relative;
        display: inline-block;
        float: left;
        top: 0;
        left: 20px;
        color: unset;
        text-shadow: unset;
        line-height: 50px;
        opacity: 0.6;
        width: 35px;
        text-align: center;
    }

        .NassabBox .MobilBox:after {
            content: attr(index);
            position: absolute;
            left: 11px;
            top: -5px;
            direction: ltr;
            font-size: 12px;
            display: inline;
            font-family: BComic;
        }

    .NassabBox .PriceBox {
        font-size: 10px;
        position: absolute;
        right: 90px;
        top: 25px;
    }

        .NassabBox .PriceBox h3 {
            margin: 0;
            line-height: 17px;
            font-size: 10px;
            position: relative;
            display: block;
            opacity: 0.7;
        }

            .NassabBox .PriceBox h3:before {
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                line-height: 17px;
                width: 20px;
                display: inline-block;
                text-align: center;
                padding-left: 5px;
            }

            .NassabBox .PriceBox h3.Hide {
                display: none;
            }

    .NassabBox.Open {
        margin: 15px 0;
        max-height: 90px;
        /*color: #07264e;*/
    }

        .NassabBox.Open .MobilBox {
            opacity: 1;
        }

        .NassabBox.Open img {
            margin: 2px 2px 40px;
        }

        .NassabBox.Open .PriceBox h3.Hide {
            display: block;
        }

@media (min-width: 768px) {
    .DetailsLarg {
    }

        .DetailsLarg #ProjDetails2 {
            flex-grow: 2;
        }

        .DetailsLarg #ProjList {
            flex-grow: 0.7;
        }

        .DetailsLarg .MyChatList {
            flex-grow: 0.2;
            max-width: 0;
            margin: 0 0.1px;
            padding: 0;
        }

        /*.DetailsLarg #ProjDetails2 {
            max-width: calc(75% - 8px);
        }

        .DetailsLarg #ProjList {
            max-width: calc(25% - 8px);
        }*/

        /*.DetailsLarg #ProjList .blueBtn, .DetailsLarg #ProjList .TitleDate {
                zoom: 0.7;
            }

                .DetailsLarg #ProjList .blueBtn .cCode, .DetailsLarg #ProjList .blueBtn .Btn:not(.PrjPrice), .DetailsLarg #ProjList .blueBtn:before, .DetailsLarg #ProjList .blueBtn .NewCus:before {
                    display: none;
                }*/
        .DetailsLarg #ProjList .blueBtn .cCode,
        .DetailsLarg #ProjList .blueBtn .Btn:not(.PrjPrice),
        .DetailsLarg #ProjList .blueBtn:before,
        .DetailsLarg #ProjList .blueBtn .inProjDate,
        .DetailsLarg #ProjList .blueBtn .NewCus:before {
            display: none !important;
        }
}

@media (max-width: 768px) {
    .Btn.NotBirthSet, .Btn.UnDead, .Btn.NewCus, .Btn.Donge4 /*, .Btn.Conflict*/ {
        display: none;
    }

    .MojriBase .blueBtn .Btn:not(.Big) {
        border: none;
        box-shadow: none !important;
        width: 14px;
        font-size: 14px;
        animation: unset;
    }

        .MojriBase .blueBtn .Btn:not(.Big):before {
            width: 14px;
        }

    .MojriBase .blueBtn .Btn.PrjView {
        font-size: 10px !important;
    }

        .MojriBase .blueBtn .Btn.PrjView:before {
            font-size: 7px;
            bottom: 7px;
        }
}

.ItemsBox {
    width: calc(50% - 4px);
    padding: 0;
}

    .ItemsBox .ItemsIMG {
        width: 100%;
        position: relative;
        padding-top: 75%;
    }

        .ItemsBox .ItemsIMG img {
            width: 100%;
            max-width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            padding: 3px;
        }

    .ItemsBox h1 {
        overflow: hidden;
        font-size: 13px;
        white-space: pre;
        padding: 0 5px;
        line-height: 30px;
        text-align: right;
        margin: 0;
    }

    .ItemsBox .PricePnl {
        box-shadow: 0 0 6px;
        width: 100%;
        /* left: 5px; */
        position: relative;
        height: 30px;
        text-align: center;
    }

    .ItemsBox h2 {
        font-size: 14px;
        /*color: #547ac1;*/
        width: 60%;
        display: inline-block;
        margin: 0;
        line-height: 30px;
        letter-spacing: 0.5px;
        vertical-align: top;
    }

    .ItemsBox .Hashed {
        text-decoration: line-through;
        width: 40%;
        font-size: 10px;
        opacity: 0.5;
    }

    .ItemsBox .Mojudi {
        background: var(--GreenVl);
        position: absolute;
        margin-top: 0px;
        padding: 1px 6px;
        bottom: 37px;
        box-shadow: var(--CrsBoxShadow);
        font-size: 15px;
        left: 6px;
        z-index: 1;
        color: var(--GreenBs);
        border-radius: calc(var(--CrsBorder) - 4px);
        font-family: BComic;
        direction: ltr;
    }

        .ItemsBox .Mojudi.Error {
            background: var(--OrangeLt);
            color: var(--OrangeBs);
        }

    .ItemsBox .MojudiRideee {
        position: absolute;
        margin-top: 0px;
        padding: 1px 6px;
        bottom: 62px;
        font-size: 16px;
        left: 6px;
        z-index: 1;
        color: #ff0000;
        border-radius: 4px;
        font-family: BComic;
        direction: ltr;
        text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 10px #000;
    }

        .ItemsBox .MojudiRideee:before {
            content: "\f00d";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            position: absolute;
            bottom: 28px;
            font-size: 64px;
            line-height: 50px;
            left: 12px;
        }

    .ItemsBox .fa-plus:before {
        font-size: 90px;
        position: absolute;
        width: 100%;
        left: 0;
        top: calc(50% - 40px);
        opacity: 0.5;
    }

    .ItemsBox .HasChild {
        position: absolute;
        left: 5px;
        bottom: 36px;
        width: 25px;
        font-size: 16px;
        line-height: 20px;
    }

        .ItemsBox .HasChild:before {
            content: "\f0ae";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
        }

    .ItemsBox.Squad .HasChild {
        bottom: 4px;
    }

    .ItemsBox.Squad {
    }

        .ItemsBox.Squad .ItemsIMG {
            padding-top: calc(75% + 30px);
        }

            .ItemsBox.Squad .ItemsIMG img {
                width: calc(100% + 4px);
                max-width: calc(100% + 4px);
                left: -2px;
                padding: 10px 0;
            }

        .ItemsBox.Squad .PricePnl {
            display: none;
        }

.SquadBox {
    position: absolute;
    width: 90%;
    background: var(--TransPr);
    padding: 7px;
    backdrop-filter: blur(6px);
    border-radius: var(--CrsBorder);
    z-index: 500;
    bottom: 20px;
    overflow: auto;
    max-height: calc(100% - 150px);
    animation: Append 0.7s forwards 1;
    direction: ltr;
    overflow-x: hidden;
    color: var(--OrangeBs);
}

    .SquadBox .Title {
        line-height: 40px;
        color: var(--OrangeBs);
    }

    .SquadBox .TitleImg {
        position: absolute;
        width: 56px;
        height: 56px;
        top: 10px;
        left: 24px;
        background: var(--WtColor);
        border-radius: 50%;
        border: 2px solid;
        padding: 5px;
        z-index: 1;
        cursor: cell;
    }

        .SquadBox .TitleImg:hover {
            box-shadow: inset 0 0 12px #ff5e00;
        }

.ModalTakhf {
    border-radius: 0 0 4px 0;
    background: var(--WtColor);
    position: absolute;
    padding: 4px 8px;
    box-shadow: 0 0 2px 1px;
    font-size: 17px;
    left: 0;
    z-index: 1;
    top: 0;
    font-family: BComic;
}

.HideItm {
    filter: grayscale(0.8) opacity(0.4);
    opacity: 0.3;
}

    .HideItm .ItemsIMG {
        /*filter: opacity(0.3);*/
        filter: grayscale(0.8) opacity(0.3);
    }

.ItemsVije {
    background: var(--OrangeVl);
    color: var(--OrangeBs);
}

    .ItemsVije:after {
        position: absolute;
        line-height: 22px;
        right: -20px;
        content: "ویــژه";
        font-size: 13.5px;
        top: 6px;
        width: 76px;
        text-align: center;
        transform: rotate( 45deg);
        color: var(--WtColor);
        border: 1px solid var(--WtColor);
        background: var(--OrangeLt);
        text-shadow: 0 0 3px var(--OrangeBs), 0 0 3px var(--OrangeBs), 0 0 4px var(--OrangeBs);
        box-shadow: 0 0 8px 1px var(--OrangeBs);
    }

/*.ItemsVije .TakhfDarsad {
        background: #ffcf88;
        background: #fff1dc;
    }*/

.ProductBioVije:after {
    position: absolute;
    line-height: 23px;
    right: -24px;
    content: "ویــژه";
    font-size: 13px;
    bottom: 12px;
    background: #ffcf88;
    background: #ffc0639e;
    width: 100px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 3px #c35100, 0 0 3px #c35100;
    box-shadow: 0 0 8px #ef6300;
    border: 1px solid #fff;
    transform: rotate(-45deg);
}

.ItmPack {
    background: var(--TransPr);
    margin: 2px;
    overflow: hidden;
    position: relative;
    user-select: none;
    direction: rtl;
    display: inline-block;
    width: calc(100% - 4px);
    margin: var(--CrsMargin);
    border-radius: var(--CrsBorder);
    box-shadow: var(--CrsBoxShadow);
}

    .ItmPack .ItemsImg {
        max-height: 250px;
        object-fit: contain;
        width: 100%;
        position: relative;
        padding-top: 75%;
    }

        .ItmPack .ItemsImg img {
            width: 100%;
            max-width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            padding: 20px;
            transition: 0.6s;
            filter: drop-shadow(0 0 10px #000);
        }

        .ItmPack .ItemsImg .Reverse {
            transform: scaleX(-1);
        }

.ImagePack {
}

    .ImagePack .UploadIMG {
        position: absolute;
        left: 10px;
        bottom: 10px;
        margin: 0;
        width: 30px;
        line-height: 30px;
        font-size: 19px;
        cursor: pointer;
    }

    .ImagePack .Mojudi {
        position: absolute;
        left: 42px;
        bottom: 10px;
        margin: 0;
        line-height: 30px;
        font-size: 16px;
        direction: ltr;
        cursor: pointer;
        padding: 0 0 0 30px;
        font-family: BComic;
    }

        .ImagePack .Mojudi.Red {
            color: #ff3b00;
        }

        .ImagePack .Mojudi:before {
            content: "\f0cb";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            font-size: 18px;
            line-height: 30px;
            vertical-align: middle;
            position: absolute;
            left: 0;
            width: 30px;
        }

.ModalBody :first-child.ItmPack {
    /*margin-top: -50px;*/
    background: no-repeat;
    box-shadow: none;
}

.ItemsModal {
    text-align: center;
    padding: 12px;
    color: var(--OrangeBs);
}

    .ItemsModal h1 {
        font-size: 16px;
        padding: 0 0 7px;
        line-height: 30px;
        margin: 0;
        vertical-align: middle;
    }

        .ItemsModal h1 h1 {
            font-size: 10px;
            display: inline-block;
            padding: 0 8px;
            opacity: 0.6;
        }

    .ItemsModal .Mojudi {
        font-size: 10px;
        padding: 5px 0 0;
        line-height: 20px;
        margin: 0;
        vertical-align: middle;
        opacity: 0.7;
    }

    .ItemsModal .Icons {
        font-size: 30px;
        color: #5ce04c;
        margin: 5px;
    }

    .ItemsModal span {
        padding: 0 7px;
        line-height: 32px;
        display: inline-block;
        vertical-align: middle;
    }

        .ItemsModal span.Hashed {
            text-decoration: line-through;
            opacity: 0.4;
            font-size: 12px;
        }

        .ItemsModal span.Price {
        }

.ItemsBoxModern {
    text-align: center;
    width: calc(100% - 20px);
    max-width: 500px;
}

    .ItemsBoxModern .ItmPack {
        backdrop-filter: blur(5px);
        padding: 10px;
    }

.AddtoChart {
    font-size: 30px;
    user-select: none;
    color: var(--OrangeBs);
    direction: ltr;
}

    .AddtoChart .CountBtn {
        width: 142px;
        height: var(--CrsHeight);
        display: inline-block;
        box-shadow: var(--CrsBoxShadow);
        margin: var(--CrsMargin);
        border-radius: var(--CrsBorder);
        line-height: var(--CrsHeight);
        vertical-align: top;
        background: var(--OrangeVl);
        overflow: hidden;
    }

        .AddtoChart .CountBtn span {
            line-height: inherit;
            width: 62px;
            display: inline-block;
            border-left: 1px solid;
            border-right: 1px solid;
            vertical-align: top;
            font-size: 21px;
            background: var(--OrangeLt);
            user-select: none;
        }

        .AddtoChart .CountBtn .fas {
            line-height: inherit;
            width: 40px;
            font-size: 18px;
            color: var(--WtColor);
            text-shadow: 0 0 4px var(--OrangeBs), 0 0 4px var(--OrangeBs);
            cursor: copy;
            user-select: none;
        }

            .AddtoChart .CountBtn .fas:hover {
                background: #ffee73;
            }

    .AddtoChart .AddChBtn {
        width: calc(100% - 150px);
        background: var(--OrangeLt);
        cursor: cell;
    }

.AddedtoChart {
    transform: scale(0.75);
    filter: grayscale(1);
}

.HoodTitle {
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 0 1px, 0 0 15px 5px;
    background-size: 220%;
    background: linear-gradient( -30deg, var(--OrangeVl) 0%, var(--WtColor) 40% 60%, var(--OrangeVl) 100%) center;
    background-size: 150% 150%;
    padding: 12px 8px;
    z-index: 9;
    overflow: hidden;
    top: 0;
    left: 0;
    position: absolute;
}

.HoodTitleIcons {
    display: flex;
    padding: 0 10%;
}

.iSabad {
    flex-basis: 0;
    flex-grow: 1;
    color: unset;
    min-width: 50px;
}

    .iSabad span {
    }

    .iSabad.Green {
        color: var(--GreenBs);
    }


    .iSabad.Green {
        color: var(--GreenBs);
    }

.heart {
    animation: animateHeartBeat 1.3s infinite;
}

.HideBox {
}

    .HideBox .HoodTitle {
    }

    .HideBox .ChooseItems {
        opacity: 0;
        pointer-events: none;
    }

.ItemsOptions {
    margin: 0 auto;
    overflow: hidden;
    transition: 0.5s;
    max-height: 0;
}

    .ItemsOptions .xCrs {
        background: var(--OrangeLt);
        color: unset;
    }

.Options .ItemsOptions {
    max-height: 200px;
}

.ChooseItems {
    transition: max-height 0.3s;
    max-height: 500px;
    text-align: center;
}

.HideBox {
}

    .HideBox .ChooseItems,
    .Options .ChooseItems {
        max-height: 0;
        padding: 0;
        opacity: 0;
    }

.iBasketItems {
    width: calc(100% - 2px);
    background: var(--WtColor);
    position: relative;
    max-height: 1000px;
    overflow: hidden;
    vertical-align: top;
    display: inline-block;
    cursor: copy;
    user-select: none;
    direction: rtl;
    margin: var(--CrsMargin);
    border-radius: var(--CrsBorder);
    box-shadow: var(--CrsBoxShadow);
}

    .iBasketItems:hover {
        /*box-shadow: 0 0 2px #000, inset 0 0 20px #ef6300a1;*/
        background: var(--ColorLt);
    }

    .iBasketItems img {
        width: 110px;
        padding: 7px 5px;
        display: inline-block;
        vertical-align: top;
        max-height: 90px;
        position: relative;
    }

    .iBasketItems .ItemsBio {
        width: calc(100% - 110px);
        display: inline-block;
        vertical-align: top;
        height: 90px;
        padding: 5px 5px 5px 0;
        text-align: right;
    }

    .iBasketItems h1 {
        font-size: 15px;
        white-space: pre;
        line-height: 30px;
        margin: 0;
        padding: 0 3px;
        vertical-align: middle;
        cursor: pointer;
    }

        .iBasketItems h1:hover {
            opacity: 0.6;
        }

        .iBasketItems h1 span {
            font-size: 10px;
            display: inline-block;
            padding: 0 8px;
            vertical-align: middle;
            opacity: 0.5;
        }

    .iBasketItems .ItemsBio > span {
        font-size: 12px;
        line-height: 26px;
        padding: 0 12px 0 2px;
        display: block;
    }

        .iBasketItems .ItemsBio > span .Hashed {
            text-decoration: line-through;
            font-size: 10px;
            opacity: 0.5;
            padding: 0 0 0 10px;
        }

    .iBasketItems .Prfit {
        margin: 0;
        position: absolute;
        left: 8px;
        top: 8px;
        font-size: 11px;
        direction: rtl;
        opacity: 0.6;
    }

    .iBasketItems .xCrs {
        color: unset;
        background: var(--TransPr);
    }

    .iBasketItems .ItmBtnBox {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 55px;
        direction: ltr;
        font-size: 18px;
        z-index: 3;
    }

        .iBasketItems .ItmBtnBox .ItmBtn {
            display: inline-block;
            width: 34px;
            line-height: 35px;
            cursor: pointer;
        }

.DoneF .ItmBtnBox .EdtItemRow, .DoneF .ItmBtnBox .DelItemRow {
    display: none;
}

.iBasketItemsMini {
    width: calc(33.333% - 4px);
    height: 95px;
    padding: 7px;
}

    .iBasketItemsMini img {
        width: 96%;
        margin: 0 auto;
        display: inline-block;
        vertical-align: top;
        position: relative;
        height: auto;
        max-width: 100px;
    }

    .iBasketItemsMini h1 {
        margin: 0;
        font-size: 9px;
        white-space: pre;
        bottom: 3px;
        position: absolute;
        width: 100%;
    }

    .iBasketItemsMini span {
        font-size: 14px;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0 0 var(--CrsBorder) 0;
        padding: 0 15px;
        line-height: 25px;
        background: var(--ColorLt);
        color: var(--ColorBs);
        box-shadow: 0 0 3px 1px var(--ColorBs);
    }

.MojudRow {
    position: relative;
    width: 99%;
    overflow: hidden;
    height: 50px;
    box-shadow: 0 0 0px 1px;
    margin: 4px auto;
    background: var(--OrangeVl);
    border-radius: 5px;
    font-size: 11px;
    color: var(--OrangeBs);
    padding: 2px;
    user-select: none;
    direction: rtl;
}

    .MojudRow .ItmImag {
        position: absolute;
        height: 46px;
        right: 8px;
    }

    .MojudRow .ItmName {
        position: absolute;
        line-height: 23px;
        right: 15px;
        top: 2px;
    }

        .MojudRow .ItmName span {
            font-size: 9px;
            opacity: 0.6;
            padding: 0 4px;
        }

    .MojudRow .CusName {
        position: absolute;
        line-height: 23px;
        right: 15px;
        bottom: 2px;
    }

        .MojudRow .CusName img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-left: 10px;
            box-shadow: 0 0 2px #000;
            vertical-align: middle;
            /* border: 1px solid #fff; */
        }

    .MojudRow .Count {
        position: absolute;
        left: 2px;
        font-size: 25px;
        width: 100px;
        line-height: 30px;
        direction: ltr;
        font-family: BComic;
    }

    .MojudRow .Price {
        left: 2px;
        position: absolute;
        width: 100px;
        bottom: 2px;
        font-size: 9px;
        line-height: 15px;
        font-family: BComic;
        direction: ltr;
    }

    .MojudRow .Dates {
        position: absolute;
        line-height: 23px;
        left: 110px;
        top: 2px;
    }

    .MojudRow .Mande {
        position: absolute;
        line-height: 23px;
        left: 110px;
        bottom: 2px;
    }

    .MojudRow.Buy {
        color: var(--GreenBs);
        background: var(--GreenVl);
    }

.FactorParent {
}

    .FactorParent .DelFactRow {
        font-size: 26px;
        position: absolute;
        text-shadow: 0 0 3px #000, 0 0 3px #000;
        cursor: pointer;
        display: inline-block;
        line-height: 20px;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        right: 5px;
        top: 6px;
        z-index: 2;
    }

        .FactorParent .DelFactRow:before {
            content: "\f00d";
        }

    .FactorParent:Not(.Selected) .DelFactRow {
        display: none;
    }

.BrandBox {
}

    .BrandBox .Brands {
        box-shadow: var(--CrsBoxShadow);
        background: var(--ColorVl);
        margin: 2px;
        line-height: 45px;
        font-size: 11px;
        max-width: 100%;
        overflow: hidden;
        transition: 0.5s;
        border-radius: var(--CrsBorder);
    }

        .BrandBox .Brands:before {
            top: 0;
            position: relative;
            vertical-align: top;
            display: inline-block;
            font-size: 1.8em;
            line-height: inherit;
        }

        .BrandBox .Brands.BrandSoon {
            flex-grow: 0.5;
            padding: 0 0 0 15px;
        }

            .BrandBox .Brands.BrandSoon:after {
                content: 'بـزودی';
                position: absolute;
                width: 60px;
                height: 18px;
                background: #5fdc51;
                left: -16px;
                top: 6px;
                z-index: 10;
                transform: rotate(-45deg);
                padding: 0px;
                font-weight: 800;
                line-height: 14px;
                color: #fff;
                text-shadow: 0 0 3px #000;
                border: 1px solid #fff;
                box-shadow: 0 0 3px #006d11;
                font-size: 9px;
                opacity: 0.7;
            }

.CustmBase .BrandBox [count="0"], .GalryBase .BrandBox [count="0"], .CruzeBase .BrandBox [count="0"] {
    max-width: 0;
    margin: 3px 0;
    box-shadow: none;
}

.CustmBase [count="Empty"],
.GalryBase [count="Empty"],
.CruzeBase [count="Empty"] {
    max-height: 0;
    overflow: hidden;
}

.BrandBox [count="0"] {
    flex-grow: 0.3;
    /*filter: blur(1px) opacity(0.3);*/
    opacity: 0.3;
    font-size: 9px;
}

    .BrandBox [count="0"].Brands:before {
        font-size: 15px;
    }

.GalryBase .HoodTitle, .CruzeBase .HoodTitle {
    background: var(--BgColor);
    padding-top: 5px;
    color: #216494;
    margin: 2px 5px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px;
    width: calc(100% - 10px);
}

    .GalryBase .HoodTitle .ChooseItems, .CruzeBase .HoodTitle .ChooseItems {
        padding: 0 0 5px;
    }

    .GalryBase .HoodTitle .BrandBox .Brands.BrandSelect, .CruzeBase .HoodTitle .BrandBox .Brands.BrandSelect {
        background: #bde4ff;
    }

.GalryBase .HideBox .HoodTitle, .CruzeBase .HideBox .HoodTitle {
    opacity: 0;
}

.CruzeBase .HoodTitle {
    box-shadow: none;
    background: unset;
}

.GalryRednderz {
    padding: 10px 0 100px;
    overflow: auto;
    height: 100%;
    line-height: 0;
}

.TakhfDarsad {
    background: inherit;
    position: absolute;
    margin-top: 0px;
    padding: 0 3px;
    box-shadow: 0 0 4px;
    font-size: 12px;
    left: 0px;
    z-index: 1;
    /*color: #547ac1;*/
    border-bottom-right-radius: 4px;
    font-family: BComic;
    letter-spacing: 0.5px;
    direction: ltr;
    line-height: 22px;
}

.BrandBox .Brands.BrandSelect {
    background: var(--ColorLt);
    flex-grow: 1.4;
    font-size: 14px;
}

    .BrandBox .Brands.BrandSelect[count="0"] {
        flex-grow: 0.6;
        filter: opacity(0.3);
    }

.CorianTitle {
    object-fit: contain;
    width: calc(100% - 2px);
}

    .CorianTitle .CorianImage {
        width: 100%;
        height: 100%;
    }

    .CorianTitle .UploadIMG {
        position: absolute;
        left: 10px;
        bottom: 10px;
        margin: 0;
        width: 30px;
        line-height: 30px;
        font-size: 19px;
    }

.Corian .BrandBox [count="0"] {
    flex-grow: 0.3;
    filter: blur(1px) opacity(0.3);
    font-size: 10px;
    opacity: 0.5;
}

.CustmBase .Corian .BrandBox [count="0"] {
    max-width: 0;
    margin: 3px 0;
}

#Hooding {
    position: fixed;
    left: 0;
}

.CompressProj {
}

    .CompressProj .blueBtn {
        width: calc(50% - 4px);
        margin: 2px 2px;
        display: inline-block;
        vertical-align: top;
    }

    .CompressProj .SelectedProj {
        margin: 1px 1px 1px;
    }

    .CompressProj .AvatarDivider .cCode, .CompressProj .AvatarDivider .CanTalk {
        display: none;
    }

@media (min-width:1300px), (orientation: landscape) {
    .ItemsBox:hover {
        background-color: var(--ColorLt);
    }

    .ItemsBox.ItemsVije:hover {
        background-color: var(--OrangeLt);
    }

    .ItemsBox, .CorianItem {
        width: calc(25% - 4px);
    }

    .iBasketItems {
        width: calc(50% - 4px);
    }
}

@media (min-width:1900px) {
    .ItemsBox {
        width: calc(16.6% - 4px);
    }

    .iBasketItems {
        width: calc(25% - 4px);
    }
}

.ActiveItems {
    width: calc(100% - 4px);
    line-height: 40px;
    height: 60px;
    display: inline-flex;
    align-items: stretch;
    padding: 0 6px;
    justify-content: center;
    font-size: 11px;
    direction: ltr;
    overflow: unset;
}

    .ActiveItems h5 {
        direction: rtl;
        display: inline-block;
        margin: 0;
        width: calc(100% - 100px);
        text-align: right;
        padding-right: 30px;
        position: relative;
        height: 40px;
        font-size: inherit;
    }

        .ActiveItems h5:before {
            content: "\f2f2";
            font-family: "Font Awesome 6 Pro";
            position: absolute;
            right: 2px;
            font-size: 1.4em;
            width: 22px;
            opacity: 0.6;
            text-align: center;
        }

    .ActiveItems .OS {
        width: 32px;
        vertical-align: top;
        line-height: inherit;
        height: 40px;
        font-size: 1.8em;
    }

    .ActiveItems.Inactive {
        line-height: 25px;
        height: 25px;
        font-size: 7px;
        opacity: 0.4;
        border-radius: 8px;
    }

        .ActiveItems.Inactive > * {
            opacity: 0.6;
        }

        .ActiveItems.Inactive:hover {
            opacity: 0.9;
        }

    .ActiveItems .LftBox {
        display: flex;
        position: absolute;
        width: 80%;
        font-size: 15px;
        line-height: 20px;
        bottom: 0;
        border-top: 1px solid;
        justify-content: center;
        opacity: 0.6;
        color: var(--ColorAlt);
    }

        .ActiveItems .LftBox h6 {
            direction: ltr;
            letter-spacing: -0.4px;
            vertical-align: top;
            padding: 0 10px;
        }

    .ActiveItems.HasRole {
        margin-bottom: 31px;
        border-radius: 10px;
    }

    .ActiveItems .Roles {
        width: 80%;
        position: absolute;
        left: 10%;
        line-height: 24px;
        font-size: 9px;
        bottom: -27px;
        background: inherit;
        box-shadow: 0 0 3px;
        border-radius: 2px 2px 10px 10px;
    }

        .ActiveItems .Roles .OneRole {
            display: inline-block;
            padding: 0 10px;
        }


    .ActiveItems.RolleMojri {
        filter: hue-rotate( 180deg );
    }

    .ActiveItems.RolleCutMs {
        filter: hue-rotate( 270deg );
    }

    .ActiveItems:hover {
        background: var(--ColorLt);
    }

        .ActiveItems:hover h5 {
            padding-right: 40px;
        }

#MembDiv {
    width: 96%;
    margin: 10px auto;
}

.MemAddNew {
    width: 96%;
    position: relative;
    margin: 10px auto;
}

    .MemAddNew .CodeName {
        width: 100%;
        border-radius: 3px;
        box-shadow: 0 0 3px #000;
        margin: 0 auto;
        background: #fff;
        height: 100px;
        text-align: right;
        padding: 10px;
    }

    .MemAddNew img {
        width: 38%;
        border-style: none;
        position: relative;
        vertical-align: top;
        margin: 3px 2px;
        display: inline-block;
        border: 1px solid #3083bb;
        border-radius: 6px;
        max-height: 200px;
    }

    .MemAddNew .Sizes {
        width: 58%;
        margin: 3px 1%;
        display: inline-block;
        vertical-align: top;
    }

.MemTable {
    width: 90%;
    position: relative;
    margin: 3px auto;
    border-radius: 5px;
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    align-content: center;
    box-shadow: 0 0 2px #000;
    overflow: hidden;
}

    .MemTable .T1 {
        width: 25%;
        display: inline-block;
        height: 40px;
        vertical-align: middle;
        line-height: 40px;
        border-left: 1px solid #8a8a8a;
        background: #eef6ff;
    }

    .MemTable .T2 {
        width: 30%;
        display: inline-block;
        height: 40px;
        vertical-align: middle;
        line-height: 40px;
        text-align: center;
        border: none;
        border-left: 1px solid #8a8a8a;
    }

    .MemTable .T3 {
        width: 30%;
        display: inline-block;
        height: 40px;
        vertical-align: middle;
        line-height: 40px;
        text-align: center;
        border: none;
        border-left: 1px solid #8a8a8a;
    }

    .MemTable .T4 {
        width: 15%;
        display: inline-block;
        height: 40px;
        vertical-align: middle;
        line-height: 40px;
        text-align: center;
        border: none;
    }

.DelMemRow {
    width: 10%;
    display: inline-block;
    position: relative;
    height: 40px;
    vertical-align: middle;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 3px #f00, 0 0 3px #f00;
}

.DelMemRowConfirm .DelMemRow {
    transform: scale(1.7);
    padding-left: 20px;
    text-shadow: 0 0 5px #f00, 0 0 5px #f00;
}

.DelMemRowConfirm .MemTable {
    filter: blur(3px);
}

.DelMemRowConfirm input {
    background: #ffd8d8;
}

.DelMemRowConfirm .T1 {
    background: #ff6969;
}

.MemDoorModel {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

    .MemDoorModel .OneDoor {
        width: 35%;
        position: relative;
        display: inline-block;
        overflow: hidden;
        text-align: center;
        margin: 5px;
        padding: 3px;
        border-radius: 3px;
        box-shadow: 0 0 2px #000;
        background: #fff;
    }

        .MemDoorModel .OneDoor img {
            width: 100%;
            display: block;
        }

        .MemDoorModel .OneDoor span {
            width: 100%;
            margin: 0px auto;
            height: 35px;
            display: block;
            vertical-align: middle;
            line-height: 40px;
            text-align: center;
        }

.FactorParent {
    max-height: 60px;
    transition: 1s;
    padding: 0 10px;
    font-size: 12px;
    width: calc(100% - 4px);
}

    .FactorParent.Selected {
        padding: 10px 10px;
        max-height: 3000px;
    }

    .FactorParent .FactorCommand {
    }

        .FactorParent .FactorCommand .Command {
            line-height: var(--CrsHeight);
            font-size: 11px;
        }

            .FactorParent .FactorCommand .Command#FactorDate {
                text-align: unset;
                border: none;
                color: unset;
                cursor: cell;
                min-width: 10px;
                font-weight: unset;
            }

    .FactorParent .BugIcon {
        width: 35px;
        text-align: center;
        font-size: 18px;
        line-height: 60px;
        vertical-align: middle;
        padding-right: 10px;
    }

    .FactorParent .WaiteIcon {
        width: 30px;
        text-align: center;
        font-size: 20px;
        line-height: 60px;
        vertical-align: middle;
        padding-right: 7px;
    }

    .FactorParent.Waite .WaiteIcon {
        display: none;
    }

    .FactorParent.DoneF {
        background: var(--OrangeLt);
        /*color: #a23e0d;*/
    }

    .FactorParent.Buy {
        --ColorBs: var(--GreenBs);
        --ColorVl: var(--GreenVl);
        --ColorLt: var(--GreenLt);
        color: var(--ColorBs);
    }

        .FactorParent.Buy.DoneF {
            background: var(--GreenVl);
        }

        .FactorParent.Buy:before {
            content: 'خریـد';
            position: absolute;
            width: 35px;
            line-height: 10px;
            background: var(--GreenBs);
            left: -8px;
            top: 4px;
            z-index: 10;
            transform: rotate( -45deg);
            color: var(--WtColor);
            font-size: 6.5px;
        }

    .FactorParent.Mande {
        background-color: red;
        color: black;
        margin: 15px 0 10px;
    }

        .FactorParent.Mande .Factors .AvatarDivider span {
            font-size: 12px;
        }

        .FactorParent.Mande .LeftPanel .Pric {
            line-height: 44px;
            font-size: 16px;
            direction: ltr;
            padding-left: 22px;
        }

            .FactorParent.Mande .LeftPanel .Pric:after {
                line-height: 48px;
                font-size: 10px;
                position: absolute;
                left: 0px;
            }

.Factors {
    width: 100%;
    height: 60px;
    /*overflow: hidden;*/
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

    .Factors .AvatarDivider {
        float: right;
        display: inline-block;
        top: 0;
        vertical-align: middle;
        text-align: right;
        padding: 0 12px 0 0;
        padding: 0;
        line-height: 60px;
    }

        .Factors .AvatarDivider span {
            line-height: 60px;
            padding: 0 8px;
        }

            .Factors .AvatarDivider span.Hint {
                font-size: 11px;
                opacity: 0.6;
                padding: 0 1px;
            }

    .Factors .LeftPanel {
        display: inline-block;
        height: 60px;
        vertical-align: middle;
        padding: 8px 0;
        text-align: left;
        position: absolute;
        left: 0;
    }

        .Factors .LeftPanel .Pric {
            display: block;
            font-size: 13px;
            line-height: 26px;
            font-family: BComic;
            vertical-align: top;
        }

            .Factors .LeftPanel .Pric:after {
                content: 'تومن';
                padding: 0 3px 0 4px;
                opacity: 0.8;
                font-family: IranSans;
                font-size: 5px;
                line-height: 26px;
                vertical-align: top;
                display: inline-block;
            }

            .Factors .LeftPanel .Pric .Small {
                line-height: 26px;
                font-size: 9px;
                display: inline-block;
                padding: 0 0 0 8px;
                opacity: 0.6;
                font-family: IranSans;
                vertical-align: top;
            }

                .Factors .LeftPanel .Pric .Small:after {
                    content: unset;
                }

        .Factors .LeftPanel .DateS {
            font-size: 9px;
            opacity: 0.7;
            line-height: 20px;
            cursor: cell;
            padding: 0 4px;
        }

    .Factors .FacNo {
        opacity: 0.6;
        display: inline-block;
        font-size: 10px;
        padding: 0 0 0 10px !important;
        position: relative;
        vertical-align: top;
        width: 25px;
        direction: ltr !important;
        /* letter-spacing: -0.5px; */
        text-align: center;
    }

        .Factors .FacNo:after {
            content: "\f104";
            font-family: "Font Awesome 6 Pro";
            position: absolute;
            top: 24px;
            left: 4px;
            line-height: 10px;
            font-size: 9px;
        }

.DelItemRowConfirm {
    /*transform: scale(0.95, 1);*/
    background-image: linear-gradient(-45deg, transparent 42%, #ff9a9a 50%, transparent 58%) !important;
    background-size: 8px 8px !important;
}

    .DelItemRowConfirm.iBasketItems .ItmBtnBox .ItmBtn {
        display: none;
    }

        .DelItemRowConfirm.iBasketItems .ItmBtnBox .ItmBtn.DelItemRow {
            font-size: 30px;
            color: #f00;
            display: block;
        }

    .DelItemRowConfirm .iBasketItems, .DelItemRowConfirm .FactorCommand, .DelItemRowConfirm .Factors,
    .DelItemRowConfirm.iBasketItems .ItemsBio, .DelItemRowConfirm img {
        opacity: 0.3;
        pointer-events: none;
    }

    .DelItemRowConfirm .DelFactRow {
        text-shadow: 0 0 3px #f00, 0 0 3px #f00;
        transform: scale(2);
        z-index: 2;
        right: 30px;
        top: 22px;
    }

[class^="icon-"]:before, [class*=" icon-"]:before, [data-icon]:before {
    font-family: "ifont" !important;
}

.icon-1:before {
    content: "\61";
}

.icon-2:before {
    content: "\62";
}

.icon-3:before {
    content: "\63";
}

.icon-4:before {
    content: "\e01b";
    font-family: "Font Awesome 6 Pro" !important;
}

@keyframes BgAnime {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50% background-position: 0% 50%
    }
}

.MainFace {
    flex-grow: 0.7;
    overflow: unset;
    /*box-shadow: 0 0 0 1px, 0 0 12px 6px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    max-height: 1000px;
    background: linear-gradient( 30deg, var(--ColorLt) 15%, var(--TransPr) 30% 70%, var(--ColorLt) 85%);
    backdrop-filter: blur(10px);
    min-height: 245px;
    height: 245px !important;
    overflow: unset;
    background: linear-gradient(225deg, var(--ColorBs) -100%, var(--ColorVl) 20%, var(--ColorVl) 80%, var(--ColorBs) 200%);*/
}
    /*.MainFace {
        background: linear-gradient(315deg, var(--RedLt) -50%, transparent 20%, transparent 80%, var(--GreenLt) 150%), linear-gradient(225deg, var(--ColorBs) -10%, var(--ColorVl) 30%, var(--ColorVl) 70%, var(--ColorBs) 110%);
        background-size: 600% 100%;
        animation: BgAnime 20s ease infinite;
    }*/

    .MainFace .FaceMenu {
        padding: 10px 10px;
        max-height: 115px;
        white-space: nowrap;
        /* overflow: hidden; */
        overflow-x: auto;
        font-size: 0;
        position: absolute;
        left: 0;
        top: 65px;
        width: 100%;
    }

        .MainFace .FaceMenu .FaceItem {
            display: inline-block;
            border-radius: var(--CrsBorder);
            width: 85px;
            height: 85px;
            position: relative;
            cursor: pointer;
            vertical-align: top;
            /*box-shadow: var(--CrsFadeShadow);*/
            box-shadow: 0 0 7px -3px var(--ColorBs);
            user-select: none;
            overflow: hidden;
            margin: 0 3px;
            /*background: linear-gradient( 0, var(--ColorLt) 5%, var(--WtColor) 50%);*/
            background: var(--WtColor);
            border: 2px solid var(--WtColor);
        }

            .MainFace .FaceMenu .FaceItem:before {
                width: 100%;
                font-size: 32px;
                line-height: 58px;
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                display: inline-block;
                /*content: '' !important;
                animation: unset !important;
                background-size: contain;
                opacity: 0.9;
                background-image: url(../images/Theme/Haloween.png);
                height: 53px;
                width: 53px;
                margin: 0 14px !important;*/
            }

            .MainFace .FaceMenu .FaceItem span {
                font-size: 10px;
                font-weight: 900;
                line-height: 30px;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                font-family: Sarbaz;
                font-weight: 500;
                opacity: 0.6;
            }

            .MainFace .FaceMenu .FaceItem.Itm1 {
                color: #9b0094;
            }

                .MainFace .FaceMenu .FaceItem.Itm1:before {
                }

            .MainFace .FaceMenu .FaceItem.Itm2 {
                color: #823c00;
            }

                .MainFace .FaceMenu .FaceItem.Itm2:before {
                }

            .MainFace .FaceMenu .FaceItem.Itm4 {
                color: #8a0000;
            }

                .MainFace .FaceMenu .FaceItem.Itm4:before {
                }

            .MainFace .FaceMenu .FaceItem.Itm5 {
                color: #207865;
            }

                .MainFace .FaceMenu .FaceItem.Itm5:before {
                }

                .MainFace .FaceMenu .FaceItem.Itm5 .fas {
                }

            .MainFace .FaceMenu .FaceItem.Story {
                color: unset;
                border: 2px solid var(--WtColor);
            }

                .MainFace .FaceMenu .FaceItem.Story.New:before,
                .MainFace .FaceMenu .FaceItem.Story.New span {
                    animation: HueRorate 8s infinite linear;
                }

                .MainFace .FaceMenu .FaceItem.Story.Loading {
                    border-radius: 50%;
                    animation: D360 1.5s infinite linear;
                }

            .MainFace .FaceMenu .FaceItem.AgentCustms {
                color: #6e9b00;
            }

            .MainFace .FaceMenu .FaceItem.Itm2:before {
                margin-left: 0;
                display: block;
            }

            .MainFace .FaceMenu .FaceItem.Itm2 span {
            }

            .MainFace .FaceMenu .FaceItem.Itm6 {
                color: #006098;
                overflow: unset;
                vertical-align: top;
            }

                .MainFace .FaceMenu .FaceItem.Itm6:before {
                    content: "\f013";
                }

            .MainFace .FaceMenu .FaceItem.Itm7 {
                color: #ff5e00;
            }

                .MainFace .FaceMenu .FaceItem.Itm7:before {
                }

                .MainFace .FaceMenu .FaceItem.Itm7.CommingSoon {
                    z-index: 100;
                    overflow: hidden;
                }

                    .MainFace .FaceMenu .FaceItem.Itm7.CommingSoon:after {
                        opacity: 0;
                        content: 'سمپل حاضره';
                        position: absolute;
                        width: 95px;
                        line-height: 20px;
                        padding-top: 2px;
                        background: #fff;
                        left: -18px;
                        top: 15px;
                        z-index: 10;
                        transform: rotate( -45deg );
                        color: #f00;
                        border: 2px solid #fff;
                        box-shadow: 0 0 10px 1px #f40, inset 0 0 5px 0 #f40;
                        font-size: 11px;
                        direction: rtl;
                        animation: FontBold5 7s forwards linear 1 4s;
                    }

            .MainFace .FaceMenu .FaceItem.Itm8 {
                overflow: hidden;
                color: #565600;
            }

            .MainFace .FaceMenu .FaceItem.WereActive {
                width: 190px;
                padding: 14px 0;
                font-family: Sarbaz;
                max-width: 250px;
                /* background: var(--GreenLt); */
                /* background: linear-gradient(45deg, var(--GreenLt) 0%, var(--GreenVl) 40%, var(--GreenVl) 60%, var(--GreenLt) 100%); */
                /* text-shadow: 0 0 8px var( --WtColor), 0 0 10px var(--WtColor), 0 0 12px var(--WtColor); */
                cursor: pointer;
                /* -webkit-text-stroke: 3px var(--WtColor); */
                paint-order: stroke fill;
                /* box-shadow: 0 0 3px var( --GreenBs); */
            }

                /*.MainFace .FaceMenu .FaceItem.WereActive:hover {
                    background: linear-gradient(45deg, var(--GreenLt) 10%, var(--GreenVl) 48%, var(--GreenVl) 52%, var(--GreenLt) 90%);
                }*/

                .MainFace .FaceMenu .FaceItem.WereActive .Mini {
                    font-size: 9px;
                    line-height: 20px;
                    opacity: 0.9;
                    white-space: pre;
                }

                .MainFace .FaceMenu .FaceItem.WereActive .Larg {
                    font-size: 15px;
                    white-space: pre;
                    padding: 6px 0 0px;
                }

/*.MainFace .VactionzSabze {
        position: relative;
        display: inline-block;
        width: 55px;
        height: 65px;
        margin: 10px 20px;
    }*/

@media(max-width:768px) {
    .MainFace {
        box-shadow: 0 0 0 1px, 0 0 12px 6px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5;
        max-height: 265px;
        min-height: 265px;
        overflow: unset;
        /*background: linear-gradient(225deg, var(--ColorBs) -100%, var(--ColorVl) 20%, var(--ColorVl) 80%, var(--ColorBs) 200%);*/
        /*background: linear-gradient(15deg, var(--ColorBs) -60%, var(--ColorVl) 30%);*/
        background: var(--ColorVl);
        background: linear-gradient(180deg, var(--NaviBar) 30px, transparent 90px), linear-gradient(15deg, var(--ColorBs) -60%, var(--ColorVl) 30%);
        border-radius: 0 0 10px 10px;
    }

        .MainFace .newProj {
            top: 183px;
        }
}

@media (min-width:768px) {
    /*.MainFace {
        flex-grow: 0.7;
        flex-basis: 0;
        position: relative !important;
        box-shadow: 0 0 4px !important;
        overflow: auto !important;
        height: calc(100vh - 10px) !important;
        min-height: unset !important;
        max-height: unset !important;
        background: var(--TransPr);
    }*/

    /*.MainFace .VactionzSabze {
        display: none;
    }*/

    .MainFace .FaceMenu {
        display: flex;
        max-height: unset;
        flex-direction: column;
        margin-top: 65px;
    }

        .MainFace .FaceMenu .FaceItem {
            width: 95%;
            height: 50px;
            margin: 3px auto;
        }

            .MainFace .FaceMenu .FaceItem:hover {
                background: var(--ColorLt);
            }

            .MainFace .FaceMenu .FaceItem:before {
                position: absolute;
                right: 10px;
                width: unset;
                line-height: 46px;
                font-size: 24px;
                width: 40px;
            }

            .MainFace .FaceMenu .FaceItem span {
                display: inline-block;
                line-height: 46px;
            }

    .MainFace .AddRefresh {
        top: calc(100% - 50px);
    }
}

.MainFace {
}

    .MainFace .Itm.TopItem2 {
        font-size: 26px;
        vertical-align: middle;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        display: inline-block;
        width: 48px;
        line-height: 45px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 13px;
        transition: 0.4s;
        transition-delay: 1.0s;
    }

        .MainFace .Itm.TopItem2:before {
            content: "\f0c9";
        }

    .MainFace .TopIMG {
        width: 33px;
        height: 33px;
        border-radius: 7px;
        margin: 6px 5px;
        box-shadow: var(--CrsBoxShadow);
        vertical-align: middle;
        position: absolute;
        right: 64px;
        top: 13px;
        transition: 0.4s;
        cursor: pointer;
    }

    .MainFace .CusCrown {
        position: absolute;
        right: 92px;
        font-size: 16px;
        top: 13px;
        -webkit-text-stroke: 2.5px #000;
        paint-order: stroke fill;
        transform: scale(1) rotate(-45deg);
        opacity: 1;
        transition: 1.2s;
        transition-delay: 3.5s;
    }

    .MainFace .MyName {
        font-size: 15px;
        position: absolute;
        display: inline-block;
        line-height: 45px;
        top: 13px;
        right: 106px;
        padding: 0 10px 0 0;
        transition: 0.5s;
        transition-delay: 0.6s;
        font-family: Sarbaz;
        cursor: pointer;
        max-width: calc(100% - 230px);
        min-width: 40px;
        direction: rtl;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .MainFace .MyName.Fade {
            max-width: calc(100% - 305px);
            opacity: 0.7;
        }

    .MainFace .Greeding {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        direction: rtl;
        top: 300px;
        white-space: pre;
        right: 0;
        width: 100%;
        line-height: 30px;
        font-size: 12.5px;
        pointer-events: none;
    }

    .MainFace .MyBank {
        line-height: 45px;
        display: inline-block;
        position: absolute;
        vertical-align: middle;
        font-size: 11.5px;
        float: left;
        direction: ltr;
        cursor: pointer;
        padding: 0 5px 0 37px;
        font-family: Sarbaz;
        top: 13px;
        left: 15px;
        transition: 0.4s;
        transition-delay: 1.4s;
    }

        .MainFace .MyBank:before {
            padding: 0;
            content: "\f2e8";
            font-family: "Font Awesome 6 Pro";
            line-height: 42px;
            padding-top: 0.5px;
            position: absolute;
            font-size: 19px;
            vertical-align: top;
            width: 25px;
            text-align: center;
            left: 10px;
            top: 0;
        }

        .MainFace .MyBank.Fade {
            opacity: 0;
            left: 35px;
            transition-delay: 0s;
            pointer-events: none;
        }

.Greeting {
}

    .Greeting .MainFace:before {
        /*background: unset;*/
    }

    .Greeting .MainFace {
        border-radius: 0 0 20px 20px;
        /*width: calc(100% - 16px);
        max-height: 259px;
        min-height: 259px;
        left: 8px;
        top: 8px;
        border-radius: 20px;
        box-shadow: 0 0 7px 3px;
        position: fixed;*/
    }

    .Greeting .TopIMG {
        width: 150px;
        height: 150px;
        right: calc(50% - 78px);
        border-radius: 50%;
        border: 2px solid var(--WtColor);
        box-shadow: 0 0 20px 2px var(--NaviBar);
        top: 35px;
    }

    .Greeting .CusCrown {
        transform: scale(3.2) rotate(45deg);
        opacity: 0;
        transition: 0.3s;
        transition-delay: 0s;
    }

    .Greeting .MyName {
        top: -20px;
        opacity: 0;
        transition-delay: 0s;
    }

    .Greeting .Greeding {
        top: 215px;
        opacity: 0.9;
    }

    .Greeting .MainFace .MyBank {
        left: -50px;
        opacity: 0;
        pointer-events: none;
        transition-delay: 0s;
    }

    .Greeting .Itm.TopItem2 {
        right: -50px;
        opacity: 0;
        pointer-events: none;
        transition-delay: 0s;
    }

    .Greeting .AddRefresh {
        left: 80px;
        opacity: 0;
        pointer-events: none;
        transition-delay: 0s;
    }

    .Greeting .MainFace .FaceMenu {
        display: none;
        left: -80px;
    }

    .Greeting .MainFace .newProj {
        pointer-events: none;
        opacity: 0;
        margin-top: 80px;
    }

        .Greeting .MainFace .newProj h2 {
        }

        .Greeting .MainFace .newProj:after {
        }

    .Greeting .ProjListCus {
    }


/*media (min-width:768px) {
    .Greeting .TopFace .TopFaceRite {
        width: calc(45% - 8px) !important;
        left: 5%;
    }
}*/

@keyframes FontBold5 {
    0% {
        opacity: 0;
        transform: rotate(-45deg) scale(2);
    }

    5% {
        opacity: 1;
        transform: rotate(-45deg) scale(1);
    }

    90% {
        opacity: 1;
        transform: rotate(-45deg) scale(1);
    }

    100% {
        transform: rotate(-45deg) scale(3);
        opacity: 0;
    }
}


@keyframes CarDrift {
    83% {
        margin-left: 0;
        transform: rotate(0);
    }

    90% {
        margin-left: 120px;
        transform: rotate(-45deg);
    }

    90.0001% {
        margin-left: -120px;
        transform: rotate(-45deg);
    }

    100% {
        margin-left: 0;
    }
}

@keyframes PlusBold {
    94% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }

    97% {
        transform: rotate(37deg);
        filter: hue-rotate(110deg);
    }

    0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }
}

@keyframes Chakosh {
    0% {
        transform: rotate(-35deg) scale(0.7);
    }

    20% {
        transform: rotate(20deg) scale(1.1);
    }

    55% {
        transform: rotate(20deg) scale(1.1);
    }
}

@keyframes animateHeartBeat {
    0% {
        transform: scale(1);
    }

    2.4% {
        transform: scale(1.14);
    }

    4.8% {
        transform: scale(1.08);
    }

    7.2% {
        transform: scale(1.26);
    }

    20% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.BoldThis {
    transform: scale(1.2);
    padding: 0 2px !important;
    /*opacity: 1 !important;*/
    /*color: #ff0;*/
}

@media (max-width:767px) {
    .MainFace {
        padding: 0;
    }

    /*.MainFace:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40px;
            background: linear-gradient(180deg, var(--NaviBar) 10%, transparent 100%);
            z-index: -10;
        }*/

    /*[theme="Dark"] .MainFace:before {
        height: 100px;
        background: linear-gradient(180deg, var(--NaviBar) 25%, transparent 100%);
    }*/

    .FaceMini {
    }

        .FaceMini .MainFace {
            max-height: 85px;
            min-height: 85px;
        }

        .FaceMini .TopFace {
            /*padding: 10px 22px 3px;*/
        }

        .FaceMini .MainFace .FaceMenu {
            opacity: 0;
            left: -90px;
        }

        .FaceMini .MainFace .newProj {
            opacity: 0;
            margin-top: 50px;
            pointer-events: none;
        }

            .FaceMini .MainFace .newProj h2 {
            }

        .FaceMini .ProjListCus {
        }
}

.FaceProj {
}

    .FaceProj .ProjListCus /*, .FaceOpen .ProjListCus*/ {
        pointer-events: none;
        filter: opacity(0.2) grayscale(1);
    }

    .FaceProj .MainFace {
    }

        .FaceProj .MainFace .FaceMenu {
            opacity: 0;
        }

        .FaceProj .MainFace .AddRefresh {
            opacity: 0;
        }

.AddRefresh {
    width: 35px;
    position: absolute;
    top: 248px;
    left: 16px;
    background: var(--WtColor);
    border-radius: 50%;
    box-shadow: 0 0 3px 1px;
    font-size: 19px;
    line-height: 35px;
    cursor: pointer;
}

    .AddRefresh:before {
        transition: 0s;
    }

    .AddRefresh.Start {
        animation: D360 1.1s linear infinite;
        width: 50px;
        font-size: 30px;
        line-height: 50px;
        left: calc(50% - 25px);
        top: 310px;
        pointer-events: none;
        box-shadow: 0 0 10px 5px, 0 0 50px 10px;
        opacity: 1;
    }

.FaceMini .AddRefresh {
    opacity: 0;
    left: 80px;
    pointer-events: none;
}

.HintBtn {
    width: 80%;
    display: inline-block;
    box-shadow: 0 0 2px #005203, 0 0 2px #005203, inset 0 0 15px #329e12;
    border-radius: 7px;
    position: relative;
    left: 10%;
    text-align: center;
    padding: 18px 0;
    margin-top: 60vh;
    direction: rtl;
    background: #8aff8e;
    color: #ffffff;
    text-shadow: 0 0 3px #005203, 0 0 3px #005203, 0 0 3px #005203, 0 0 3px #005203;
    cursor: pointer;
}

.TabliQ {
    /*background: linear-gradient(22deg,#d7e8ff, #f4fbff 30%, #e2f4ff 70%, #b4d5ff);*/
    overflow: hidden;
    padding: 3px 65px 3px 10px;
}

    .TabliQ span {
        color: #2766a9;
        font-size: 13px;
        white-space: pre;
        text-shadow: 0 0 4px #fff, 0 0 4px #fff;
        width: 100%;
        display: block;
        padding: 1px;
        line-height: 20px;
    }

    .TabliQ img {
        width: 60px;
        position: absolute;
        right: 10px;
        top: 3px;
        transform: scaleX(-1);
    }

    .TabliQ.Max {
        /*background: linear-gradient(22deg,#d7e8ff, #fff7e2 30%, #fff7e2 70%, #ffd18b);*/
    }

    .TabliQ.Max2 {
        padding: 3px;
    }

        .TabliQ.Max2:before {
            /*content: '3DMax!';*/
            /*font-family: BComic;*/
        }

        .TabliQ.Max2 span {
            font-size: 18px;
            white-space: pre;
            width: auto;
            display: inline-block;
            padding: 1px 6px;
            color: #f8feff;
            text-shadow: 0 0 3px #002954, 0 0 3px #002954, 0 0 3px #002954;
            /* transform: rotate(-5deg); */
            line-height: 40px;
        }


            .TabliQ.Max2 span.PriceNumber {
                font-size: 25px;
                font-family: BComic;
                color: #d9f8ff;
                text-shadow: 0 0 3px #002954, 0 0 3px #002954, 0 0 3px #002954;
                transform: scale(1.4) rotate(-8deg);
                /* animation: PriceAnim 10s forwards infinite 10s; */
                width: 80px;
                letter-spacing: 1px;
            }

.FinalText {
    opacity: 0.6;
    color: var(--ColorAlt);
}

    .FinalText hr {
        margin-bottom: 10px;
    }

    .FinalText span {
        display: block;
        font-size: 10px;
        line-height: 16px;
    }

/*@media (min-width:1200px) {
    .MaxPanel .MaxPrj {
        width: calc(50% - 4px);
        padding-top: 28.125%;
        margin: 38px 2px 5px;
    }
}*/
.MovaghatBody {
    min-height: 100%;
}

.LoadBody {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 1% 40px;
    text-align: center;
    color: #2878b1;
}

    .LoadBody .AdverCall, .LoginPanel .AdverCall {
        border: 2px solid var(--WtColor);
        border-radius: 20px;
        display: inline-block;
        box-shadow: 0 0 2px, inset 0 0 8px;
        width: 90px;
        margin: 2px 8px 2px 0;
        vertical-align: top;
        font-size: 14px;
        position: relative;
        line-height: 36px;
        padding-left: 26px;
        background: var(--ColorLt);
        cursor: pointer;
        z-index: 1;
    }

        .LoadBody .AdverCall:before, .LoginPanel .AdverCall:before {
            font-size: 16px;
            position: absolute;
            left: 12px;
            line-height: 36px;
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            content: "\f095";
        }

        .LoadBody .AdverCall:hover, .LoginPanel .AdverCall:hover {
            box-shadow: 0 0 2px, inset 0 0 8px 4px;
        }

    .LoadBody .SelectMojri, .LoginPanel .SelectMojri {
        padding: 7px 6px;
    }

        .LoadBody .SelectMojri > img, .LoginPanel .SelectMojri > img {
            width: 40px;
            height: 40px;
            margin: 2px -3px;
            border-radius: 50%;
            border: 2px solid var(--WtColor);
            box-shadow: 0 0 3px;
        }

    .LoadBody .CruseLogo {
        width: 170px;
        filter: drop-shadow(0 0 3px #000);
        user-select: none;
    }

    .LoadBody .MojReview {
        top: auto;
        margin-top: -180px;
        position: absolute;
        width: 96%;
        left: 2%;
        background: var(--BgColor);
        direction: rtl;
        border-radius: 10px;
        box-shadow: 0 0 0 1px, 0 0 20px 5px;
        animation: Append 0.5s forwards;
        z-index: 3;
        padding: 5px 5px;
        overflow: visible;
    }

.NotMyOS {
    display: none !important;
}

.IrajTesting {
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 15px;
    color: var(--ColorAlt);
    text-shadow: 0 0 3px var(--WtColor), 0 0 3px var(--WtColor);
    opacity: 0.7;
    width: 25px;
    line-height: 25px;
}

    .IrajTesting.Beet2 {
        bottom: 30px;
    }

.CallBox {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2023;
}

    .CallBox > * {
        width: calc(100vw - 40px);
        margin: 15px 15px;
        direction: rtl;
        /*backdrop-filter: blur(8px);*/
        /*background: linear-gradient(190deg, currentcolor -130%, var(--TransPr) 50%);*/
        background: linear-gradient(0deg, var(--ColorLt) 10%, var(--WtColor) 40%);
        position: relative;
        border-radius: 12px;
        max-width: 400px;
        user-select: none;
        color: var(--ColorBs);
        overflow: hidden;
        /*transition: 0.5s;*/
        border: 2px solid var(--WtColor);
    }

    .CallBox .Calling {
        max-height: 1000px;
        /*box-shadow: 0 0 1px 2px currentcolor, 0 0 10px 5px currentColor;*/
        box-shadow: 0 0 6px 2px;
        padding: 66px 10px 10px;
    }

        .CallBox .Calling.Target {
            --ColorBs: var(--OrangeBs);
            --ColorVl: var(--OrangeVl);
            --ColorLt: var(--OrangeLt);
            color: var(--ColorBs);
        }

        .CallBox .Calling.Dizable {
            filter: grayscale(1);
            pointer-events: none;
        }

        .CallBox .Calling .Act {
            position: absolute;
            top: 15px;
            font-size: 12px;
            line-height: 34px;
            height: 34px;
            text-align: center;
            z-index: 1;
            background: var(--TransPr);
            border-radius: 10px;
            box-shadow: 0 0 5px -2px;
            white-space: pre;
            animation: Append 0.5s linear forwards 1;
        }

            .CallBox .Calling .Act:before {
                line-height: 34px;
                height: 34px;
                font-family: "Font Awesome 6 Pro";
                font-size: 14px;
                width: 34px;
                position: absolute;
                display: inline-block;
                left: 5px;
                top: 0;
                opacity: 0.6;
            }

            .CallBox .Calling .Act.WinBtns {
                right: 15px;
                padding: 0 4px;
            }

                .CallBox .Calling .Act.WinBtns .Btn {
                    font-size: 18px;
                    cursor: pointer;
                    width: 34px;
                    line-height: inherit;
                }

                    .CallBox .Calling .Act.WinBtns .Btn:hover {
                        transform: scale(1.1) rotate(-7deg);
                    }

            .CallBox .Calling .Act.Status {
                left: 15px;
                padding: 0 15px 0 50px;
                color: var(--OrangeBs);
            }

                .CallBox .Calling .Act.Status:before {
                    animation: D360 1s infinite linear;
                }

                .CallBox .Calling .Act.Status:after {
                    content: 'دَر حالِ اِتِصـــال';
                }

                .CallBox .Calling .Act.Status.Done {
                    color: var(--GreenBs);
                    background: var(--GreenVl);
                    animation: FadeOut 0.5s 1 Forwards 3s;
                }

                    .CallBox .Calling .Act.Status.Done:before {
                        content: '\f00c';
                        animation: Append 0.5s linear forwards 1;
                    }

                    .CallBox .Calling .Act.Status.Done:after {
                        content: 'مُتصـِـــل شُدیم';
                    }

            .CallBox .Calling .Act.Timer {
                letter-spacing: 0.5px;
                left: 15px;
                padding: 0 8px 0 34px;
                font-family: BComic;
            }

                .CallBox .Calling .Act.Timer:before {
                    left: 0px;
                    content: "\f2f2";
                    /*animation: Blink 3s infinite;*/
                }

        .CallBox .Calling .Hints {
            position: absolute;
            top: 16px;
            line-height: 32px;
            right: 100px;
            font-size: 10.5px;
            width: calc(100% - 200px);
            opacity: 0.9;
            /*transition: 0.5s;*/
            direction: rtl;
            text-align: right;
            white-space: pre;
        }

            .CallBox .Calling .Hints.Fade {
                opacity: 0;
                top: 8px;
            }

        .CallBox .Calling .UnShow {
            opacity: 0;
        }

        .CallBox .Calling .AudioPartnr {
            display: none;
        }

        .CallBox .Calling .VideoRTC {
            max-height: 0px;
            overflow: hidden;
            position: relative;
            font-size: 0;
        }

            .CallBox .Calling .VideoRTC .VideoPartnr {
                width: 100%;
                position: relative;
                /*box-shadow: 0 0 5px 0px #000;*/
                /*box-shadow: 0 0 3px 2px currentColor;*/
                box-shadow: 0 0 3px 1px;
                border-radius: 12px;
                background: #000;
                margin: 0;
                max-height: calc(100vh - 160px);
            }

            .CallBox .Calling .VideoRTC .VideoMySelf {
                width: 33%;
                box-shadow: 0 0 4px 1px currentColor;
                border-radius: 10px;
                background: #000;
                position: absolute;
                right: 8px;
                bottom: 8px;
                cursor: all-scroll;
            }

                .CallBox .Calling .VideoRTC .VideoMySelf.Small {
                    width: 13%;
                    opacity: 0.5;
                    box-shadow: unset;
                }


            .CallBox .Calling .VideoRTC .UserNm {
                position: absolute;
                right: 10px;
                top: 10px;
                text-shadow: 0 0 5px #000;
            }

                .CallBox .Calling .VideoRTC .UserNm .UserAvatar {
                    vertical-align: top;
                    padding: 0;
                    width: 34px;
                    height: 34px;
                }

                .CallBox .Calling .VideoRTC .UserNm .Name {
                    font-size: 11px;
                    padding-right: 10px;
                    line-height: 34px;
                    vertical-align: top;
                    display: inline-block;
                }

        .CallBox .Calling .Options {
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            direction: rtl;
            margin: 0 auto;
            padding: 10px 0 0;
            justify-content: center;
        }

            .CallBox .Calling .Options .Btn {
                font-size: 20px;
                text-shadow: 0 0 2px #000, 0 0 4px #000;
                line-height: 62px;
                height: 62px;
                max-width: 62px;
                margin: 2px;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;
                flex-basis: 0;
                flex-grow: 1;
                box-shadow: inset 0 0 10px -1px;
                color: #0e314b;
                position: relative;
            }

                .CallBox .Calling .Options .Btn:before {
                    color: #fff;
                    font-family: "Font Awesome 6 Pro";
                }

                .CallBox .Calling .Options .Btn:hover {
                    box-shadow: inset 0 0 20px -4px #000;
                    transform: scale(0.95);
                }

                    .CallBox .Calling .Options .Btn:hover:before {
                        transform: scale(1.05);
                    }

                .CallBox .Calling .Options .Btn.AnswerCall {
                    background: #1ec500;
                }

                .CallBox .Calling .Options .Btn.RejectCall,
                .CallBox .Calling .Options .Btn.EndCall {
                    background: #ff511d;
                }

                .CallBox .Calling .Options .Btn.Offs {
                    background: #1db6ff;
                }

                .CallBox .Calling .Options .Btn.Offs {
                    opacity: 0.6;
                    text-shadow: none;
                    filter: grayscale(1);
                }

                    .CallBox .Calling .Options .Btn.Offs:before {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                    }

                    .CallBox .Calling .Options .Btn.Offs.On {
                        filter: unset;
                        opacity: 1;
                        text-shadow: 0 0 15px #000;
                    }

                    .CallBox .Calling .Options .Btn.Offs.MuteCall.On:before {
                        content: '\f6a9';
                    }


                    .CallBox .Calling .Options .Btn.Offs.SoundOff.On:before {
                        content: '\f131';
                    }

                    .CallBox .Calling .Options .Btn.Offs.Loading {
                        /* animation: Blink 1s infinite linear; */
                        transform: scale(0.9);
                        /* color: var(--OrangeBs); */
                        pointer-events: none;
                        filter: unset;
                        /* background: var(--OrangeLt); */
                        text-shadow: 0 0 15px #000;
                    }

                        .CallBox .Calling .Options .Btn.Offs.Loading:before {
                            animation: D360 3s infinite linear;
                        }

        .CallBox .Calling .Quality {
            background: var(--ColorLt);
            position: absolute;
            right: 20px;
            top: 75px;
            width: 30px;
            line-height: 20px;
            font-size: 12px;
            font-family: 'Sarbaz';
            text-align: center;
            box-shadow: 0 0 2px;
            border-radius: 4px;
            opacity: 0.5;
            cursor: pointer;
        }

            .CallBox .Calling .Quality.Selected {
                opacity: 0.9;
            }

        .CallBox .Calling .VideoRTC {
            max-height: 1000px;
            overflow: visible;
        }

    .CallBox.Minimize .Calling {
        width: 120px;
        /* border-radius: 50%; */
        height: 44px;
        padding: 1px;
    }

        .CallBox.Minimize .Calling .MiniBtn {
            font-size: 25px;
            text-shadow: 0 0 2px var(--WtColor), 0 0 4px var(--WtColor);
        }

            .CallBox.Minimize .Calling .MiniBtn:before {
                content: "\f31e";
            }

        .CallBox.Minimize .Calling .MaxiBtn {
            display: none;
        }

        .CallBox.Minimize .Calling .CallerInfo {
            max-height: 0;
            overflow: hidden;
        }

        .CallBox.Minimize .Calling .VideoRTC {
            max-height: 1000px;
            overflow: visible;
        }

        .CallBox.Minimize .Calling .Options,
        .CallBox.Minimize .Calling .VideoMySelf,
        .CallBox.Minimize .Calling .Status,
        .CallBox.Minimize .Calling .UserNm,
        .CallBox.Minimize .Calling .Hints {
            display: none;
        }

        .CallBox.Minimize .Calling .VideoPartnr {
            border-radius: 50%;
            width: 94px;
            height: 94px;
            left: 0;
            margin: 0;
            display: none;
        }

        .CallBox.Minimize .Calling .InfoLog {
            opacity: 0;
        }

        .CallBox.Minimize .Calling .Act.WinBtns {
            right: 3px;
            padding: 0 0px;
            top: 4px;
            box-shadow: unset;
            background: unset;
        }

            .CallBox.Minimize .Calling .Act.WinBtns .Btn {
                font-size: 18px;
                cursor: pointer;
                width: 34px;
                line-height: inherit;
            }

        .CallBox.Minimize .Calling .Timer {
            left: 2px;
            padding: 0 0px 0 32px;
            top: 4px;
            box-shadow: unset;
            background: unset;
        }

    .CallBox .Calling.Maximize {
        width: 100%;
        height: 100%;
        padding: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        max-width: 100%;
        position: fixed;
        margin: 0;
        border: none;
    }

        .CallBox .Calling.Maximize .MaxiBtn {
        }

            .CallBox .Calling.Maximize .MaxiBtn:before {
                content: "\f066";
            }

        .CallBox .Calling.Maximize .MiniBtn {
            display: none;
        }

        .CallBox .Calling.Maximize .CallerInfo {
            max-height: 0;
            overflow: hidden;
        }

        .CallBox .Calling.Maximize .VideoRTC {
            max-height: none;
            overflow: visible;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: fixed;
            background: #000;
            left: 0;
            top: 0;
        }

        .CallBox .Calling.Maximize .VideoMySelf {
            width: 15%;
        }

        .CallBox .Calling.Maximize .Options {
            display: none;
        }

        .CallBox .Calling.Maximize .VideoPartnr {
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            border-radius: 0;
            left: 0;
            top: 0;
            border: 3px solid #000;
            box-shadow: none;
            max-height: 100vh;
        }

        .CallBox .Calling.Maximize .UserNm {
            top: 60px
        }

    .CallBox .Calling.Call {
        max-height: 140px;
    }

        .CallBox .Calling.Call .CallerInfo {
            height: 110px;
        }

            .CallBox .Calling.Call .CallerInfo .UserImage {
                width: 110px;
                height: 110px;
                margin: 5px auto;
                border-radius: 50%;
                display: block;
                border: 2px solid #fff;
                box-shadow: 0 0 5px 1px;
                cursor: pointer;
                background: #fff;
                position: absolute;
                left: 16px;
                top: 8px;
                z-index: 1;
            }

                .CallBox .Calling.Call .CallerInfo .UserImage:hover {
                    transform: rotate(-7deg);
                }

            .CallBox .Calling.Call .CallerInfo span {
                text-align: center;
                font-size: 12px;
                line-height: 40px;
                width: calc(100% - 110px);
                display: inline-block;
                white-space: pre;
                position: absolute;
                top: 10px;
                right: 0;
            }

        .CallBox .Calling.Call .Options {
            position: absolute;
            width: calc(100% - 110px);
            right: 0;
            top: 45px;
        }

    .CallBox .Calling.Message {
        max-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }

        .CallBox .Calling.Message > *:Not(.MsgText) {
            opacity: 0;
        }

    .CallBox .Calling.Hide {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

        .CallBox .Calling.Hide > * {
            display: none;
        }

    .CallBox .Calling .MsgText {
        line-height: 40px;
        font-size: 13px;
        width: 100%;
        display: inline-block;
        text-align: center;
    }

    .CallBox .Calling .SingnalQlty {
        position: absolute;
        left: 20px;
        bottom: 90px;
        font-size: 11px;
        line-height: 30px;
        height: 30px;
        direction: ltr;
        color: var(--ColorLt);
        white-space: pre;
        padding: 0 10px 0 30px;
        background: #0000007d;
        border-radius: 10px;
    }

        .CallBox .Calling .SingnalQlty:before {
            font-family: "Font Awesome 6 Pro";
            content: "\f690";
            width: 30px;
            position: absolute;
            left: 0;
            top: 0;
            line-height: 30px;
        }

        .CallBox .Calling .SingnalQlty[Anten="0"]:before {
            content: "\f690";
        }

        .CallBox .Calling .SingnalQlty[Anten="1"]:before {
            content: "\f693";
        }

        .CallBox .Calling .SingnalQlty[Anten="2"]:before {
            content: "\f692";
        }

        .CallBox .Calling .SingnalQlty[Anten="3"]:before {
            content: "\f691";
        }
    /* ******** */
    /* Info Log */
    .CallBox .Calling .InfoLog {
        position: absolute;
        left: 25px;
        top: 80px;
        font-size: 11px;
        color: #fff;
        text-shadow: 0 0 3px #000;
        overflow: auto;
        direction: rtl;
        text-align: left;
        user-select: none;
    }

        .CallBox .Calling .InfoLog span {
            position: relative;
            width: 100%;
            display: block;
            line-height: 18px;
            animation: InfoLog 30s forwards 12s;
            overflow: hidden;
            padding: 0 0;
            direction: ltr;
            white-space: pre;
        }

            .CallBox .Calling .InfoLog span.Red {
                color: #ff8d00;
            }

            .CallBox .Calling .InfoLog span.Green {
                color: #42e619;
            }

            .CallBox .Calling .InfoLog span.Blue {
                color: #199ae6;
            }

@keyframes InfoLog {
    2% {
        line-height: 11px;
        font-size: 8px;
    }

    95% {
        line-height: 11px;
        font-size: 8px;
        margin-top: 0;
    }

    99% {
        line-height: 11px;
        font-size: 8px;
        margin-top: -11px;
        display: block;
    }

    100% {
        line-height: 9px;
        font-size: 7px;
        margin-top: -9px;
        display: none;
    }
}
/*.OnGoingLog {
    width: calc(100vw - 40px);
    box-shadow: 0 0 5px 2px currentColor;
    border-radius: 15px;
    max-width: 400px;
    background: linear-gradient(190deg, currentcolor -130%, var(--TransPr) 50%);
    backdrop-filter: blur(8px);
    direction: rtl;
    user-select: none;
    margin: 15px 15px;
    position: relative;
    color: var(--ColorBs);
    border: 2px solid var(--WtColor);
    overflow: hidden;
    transition: 0.5s;
    height: 54px;
    line-height: 50px;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    opacity: 0.8;
}*/

.OnGoingLog {
    box-shadow: 0 0 5px 2px currentColor;
    height: 54px;
    line-height: 50px;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    opacity: 0.8;
}

    .OnGoingLog:hover {
        opacity: 1;
    }

    .OnGoingLog .User {
        border-radius: 50%;
        width: 36px;
        height: 36px;
        margin: 3px 3px;
        /* border: 2px solid var(--WtColor); */
        box-shadow: 0 0 3px 1px var(--ColorBs);
    }

    .OnGoingLog .Timer {
        position: absolute;
        right: 60px;
        line-height: inherit;
        padding-right: 35px;
        text-align: center;
        font-family: 'BComic';
        font-size: 13px;
        top: 0;
    }

        .OnGoingLog .Timer:before {
            content: "\f2f2";
            animation: Blink 3s infinite;
            line-height: inherit;
            font-family: "Font Awesome 6 Pro";
            font-size: 1.3em;
            width: 34px;
            position: absolute;
            display: inline-block;
            right: 0;
            top: 0;
        }


    .OnGoingLog .Btn {
        font-family: "Font Awesome 6 Pro";
        border-radius: 50%;
        width: 36px;
        height: 36px;
        margin: 3px 3px;
        /* border: 2px solid var(--ColorLt); */
        box-shadow: 0 0 3px 1px var(--ColorBs);
        line-height: 38px;
        color: var(--ColorBs);
        cursor: pointer;
    }

    .OnGoingLog .Close {
        position: absolute;
        right: 10px;
        text-align: center;
        font-size: 20px;
        font-family: "Font Awesome 6 Pro";
        width: 40px;
        line-height: inherit;
        top: 0px;
        color: var(--WtColor);
        text-shadow: 0 0 5px var(--RedBs), 0 0 5px var(--RedBs);
        cursor: pointer;
    }

    .OnGoingLog .Hint {
        font-size: 12px;
        line-height: inherit;
        direction: ltr;
        padding: 0 5px;
    }


@media (max-width:480px) {
    .CallBox {
        background: linear-gradient(180deg, transparent 0, var(--WtColor) 30px);
        padding-top: 40px;
    }

        .CallBox .Calling,
        .CallBox .OnGoingLog {
            width: calc(100vw - 2px);
            margin: 2px 1px;
            background: var(--WtColor);
            /*box-shadow: inset 0 0 6px currentColor;*/
            box-shadow: inset 0 0 3px 1px;
            max-width: 480px;
        }

        .CallBox .OnGoingLog {
            width: calc(100vw - 2px);
            margin: 2px 1px;
            background: var(--WtColor);
            box-shadow: inset 0 0 6px currentColor;
            max-width: 480px;
        }

        .CallBox.Minimize {
            background: unset;
            padding: 0;
        }
}

.CorianItem {
    width: calc(50% - 4px);
    padding: 0px;
    float: right;
}

    .CorianItem .ItemsIMG {
        width: 100%;
        margin: 0;
        overflow: hidden;
        padding-top: 75%;
        display: block;
    }

        .CorianItem .ItemsIMG img {
            margin: 0 auto;
            max-height: 100%;
            width: 100%;
            max-width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
        }

    .CorianItem h1 {
        position: absolute;
        font-size: 12px;
        top: 6px;
        left: 8px;
        font-weight: bold;
        direction: ltr;
        font-family: BComic;
        text-shadow: 0 0 2px #0b133c, 0 0 2px #0b133c, 0 0 2px #0b133c;
        color: #fff;
        margin: 0;
        text-align: left;
        white-space: pre;
    }

    .CorianItem .PricePnl {
        box-shadow: 0 0 5px;
        position: relative;
        height: 30px;
        background: var(--WtColor);
    }

    .CorianItem h2 {
        margin: 0;
        font-size: 14px;
        width: 60%;
        display: inline-block;
        line-height: 30px;
        letter-spacing: 0.5px;
    }

    .CorianItem .Hashed {
        text-decoration: line-through;
        color: #a2a2a2;
        background: #ffedde;
        width: 40%;
        font-size: 12px;
    }

    .CorianItem .fa-plus:before {
        font-size: 90px;
        position: absolute;
        width: 100%;
        left: 0;
        top: calc(50% - 65px);
        opacity: 0.5;
    }

    /*} The Fuckin Horrable Error Like Last Fucking Error*/

    .CorianItem .HasChild {
        position: absolute;
        left: 5px;
        bottom: 36px;
        color: #fff;
        text-shadow: 0 0 3px #0e5394, 0 0 3px #0e5394;
        font-size: 15px;
    }

.CorianVije {
    box-shadow: 0 0 5px #156114;
    background: #fafff9;
}

    .CorianVije:after {
        position: absolute;
        padding: 3px;
        right: -30px;
        content: "ویــژه";
        font-size: 12px;
        top: 6px;
        background: #99e47b;
        background: #99e47bc9;
        width: 100px;
        text-align: center;
        transform: rotate(45deg);
        color: #fff;
        text-shadow: 0 0 3px #13710f;
        box-shadow: 0 0 5px #1e7513;
        border: 1px solid #fff;
    }

.MyHeram {
    max-height: 100px;
    font-size: 11px;
    padding: 5px;
    width: calc(100% - 4px);
}

    .MyHeram:before {
        content: attr(index);
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

    .MyHeram.HasDesign {
        background: var(--GreenVl);
        color: var(--GreenBs);
    }

    .MyHeram.NotHasDesign {
        display: none;
    }

    .MyHeram:hover {
        background: var(--ColorLt);
    }

    .MyHeram .BioG {
        position: relative;
        white-space: pre;
        line-height: 38px;
        display: flex;
    }

        .MyHeram .BioG img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: 2px;
        }

        .MyHeram .BioG .Names {
            width: calc(40% - 20px);
            width: 40%;
            display: inline-block;
            text-align: right;
            padding: 0 9px;
            line-height: 38px;
            vertical-align: middle;
            vertical-align: top;
        }

            .MyHeram .BioG .Names .Hint {
                /*font-size: 9px;
                opacity: 0.7;
                padding-right: 8px;
                filter: invert(100%);
                display: inline-block;*/
                font-size: 8.5px;
                opacity: 0.4;
                padding-right: 8px;
                display: inline-block;
            }

        .MyHeram .BioG .Price {
            display: inline-block;
            width: calc(60% - 30px);
            padding: 0 9px;
            line-height: 38px;
            text-align: left;
            direction: ltr;
            vertical-align: middle;
            height: 38px;
            vertical-align: top;
        }

            .MyHeram .BioG .Price .MostMoj {
                width: 21px;
                height: 21px;
                border-radius: 50%;
                border: none;
                margin-right: 12px;
                filter: opacity(0.9);
                vertical-align: middle;
            }

            .MyHeram .BioG .Price span {
                line-height: 38px;
                display: inline-block;
                font-size: 12px;
                vertical-align: text-bottom;
                padding-right: 15px;
            }

                .MyHeram .BioG .Price span:before {
                    font-family: "Font Awesome 6 Pro";
                    padding-right: 5px;
                    line-height: 38px;
                    font-size: 15px;
                    display: inline-block;
                    vertical-align: top;
                }
    /*.MyHeram hr {
        margin: 3px 15px;
        border-top: 1px solid rgba(52, 118, 185, 0.5);
    }*/
    .MyHeram .DetG {
        position: relative;
        font-size: 10px;
        /* white-space: pre; */
        opacity: 0.6;
        width: 90%;
        margin: 0 auto;
        /*border-top: 1px solid;*/
        /* padding: 3px 0; */
        margin-top: 4px;
        padding-top: 3px;
        display: flex;
    }

        .MyHeram .DetG .LastDate {
            width: 44%;
            display: inline-block;
            font-family: IranSans;
            position: relative;
            line-height: 20px;
            white-space: pre;
        }

            .MyHeram .DetG .LastDate:before {
                text-align: center;
                font-weight: 900;
                font-family: "Font Awesome 6 Pro";
                font-size: 15px;
                width: 30px;
                display: inline-block;
                line-height: 20px;
                vertical-align: bottom;
            }

    .MyHeram.Selected {
        /*margin: 10px auto;*/
        /*width: 100%;*/
        color: #003163;
    }

    .MyHeram.Newly {
        /*color: #bf3400;*/
        color: var(--OrangeBs);
        /*background: linear-gradient( 30deg,#fff, #fff2e2 30%, #fff 30%);*/
        /*background-size: 100%;*/
    }

    .MyHeram.DeadHony {
        --ColorBs: var(--PurpleBs);
        --ColorVl: var(--PurpleVl);
        --ColorLt: var(--PurpleLt);
        color: var(--ColorBs);
    }

    .MyHeram.Oskol {
        height: 40px;
        color: #d6c0b7;
        padding: 1px 0;
        background: #fff;
    }

        .MyHeram.Oskol .DetG {
            border: none;
            margin: 0;
            position: absolute;
            left: 10px;
            top: 7px;
            width: 60%;
            width: 200px;
        }

            .MyHeram.Oskol .DetG .LastDate {
            }

        .MyHeram.Oskol img {
            opacity: 0.4;
        }

    .MyHeram.TalkDon {
        padding: 1px 0;
        height: 40px;
        /*color: #008acc;*/
        color: var(--ColorAlt);
    }

        .MyHeram.TalkDon:before {
            content: "\f00c";
            font-family: "Font Awesome 6 Pro";
            font-size: 65px;
            line-height: 70px;
            display: inline-block;
            vertical-align: top;
            position: absolute;
            color: #fff;
            text-shadow: 0 0 10px #0062dc, 0 0 2px #0062dc;
            right: 40px;
            bottom: -15px;
            opacity: 0.3;
        }

        .MyHeram.TalkDon .DetG {
            border: none;
            margin: 0;
            position: absolute;
            left: 10px;
            top: 7px;
            width: 60%;
            width: 200px;
            display: none;
        }

        .MyHeram.TalkDon .BioG .Names .Hint {
            /*filter: unset;*/
            /*opacity: 0.4;*/
        }

        .MyHeram.TalkDon .DetG .LastDate {
        }

    .MyHeram.JobDone {
        padding: 1px 5px;
        height: 40px;
        --ColorBs: var(--GreenBs);
        --ColorVl: var(--GreenVl);
        --ColorLt: var(--GreenLt);
        color: var(--ColorBs);
    }

        .MyHeram.JobDone:before {
            content: "\f00c";
            font-family: "Font Awesome 6 Pro";
            font-size: 60px;
            line-height: 70px;
            display: inline-block;
            vertical-align: top;
            position: absolute;
            color: #fff;
            text-shadow: 0 0 10px #00ad05, 0 0 2px #00ad05;
            right: 40px;
            bottom: -15px;
            /* z-index: -1; */
            opacity: 0.3;
        }

        .MyHeram.JobDone .DetG {
            border: none;
            margin: 0;
            position: absolute;
            left: 10px;
            top: 7px;
            width: 60%;
            width: 200px;
            display: none;
        }

        .MyHeram.JobDone .BioG .Names .Hint {
            /*filter: unset;*/
            /*opacity: 0.4;*/
        }


        .MyHeram.JobDone .DetG .LastDate {
        }


.ExportMenu.AllRateDivider {
    transition: 2s;
}

    .ExportMenu.AllRateDivider[Star="1"] {
        background: var(--RedVl);
        color: var(--RedBs);
    }

/*.ExportMenu.AllRateDivider[Star="1"] .RatingNum {
            background: #ffdec3;
            color: #d60000;
        }*/
.RateBox {
    white-space: pre;
    margin: 35px auto 20px;
}

.RateItem {
    margin: 5px 3px 30px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 33px;
    border-radius: 50%;
    display: inline-block;
    color: #b34f08;
    background: var(--WtColor);
    box-shadow: 0 0 1px, inset 0 0 12px 5px;
    position: relative;
    /* transition: 0.5s; */
    cursor: pointer;
    user-select: none;
    padding-top: 5px;
}

    .RateItem p {
        margin: 0;
        font-size: 40px;
        display: inline-block;
        font-family: BComic;
        line-height: 70px;
        width: 70px;
    }

    .RateItem span {
        font-size: 11px;
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: -25px;
        line-height: 25px;
        white-space: pre;
    }

    .RateItem:before {
        content: "-";
    }

    .RateItem:before {
        content: attr(Score);
    }

    .RateItem[Score="1"] {
        color: var(--RedBs);
    }

    /*.RateItem[Score="1"]:before {
            content: "1";
        }*/

    .RateItem[Score="2"] {
        color: #b16b14;
    }

    /*.RateItem[Score="2"]:before {
            content: "2";
        }*/

    .RateItem[Score="3"] {
        color: #988600;
    }

    /*.RateItem[Score="3"]:before {
            content: "3";
        }*/

    .RateItem[Score="4"] {
        color: #16b114;
    }

    /*.RateItem[Score="4"]:before {
            content: "4";
        }*/

    .RateItem:before {
        margin: 0;
        font-size: inherit;
        display: inline-block;
        font-family: BComic;
        line-height: inherit;
        width: inherit;
    }

    .RateItem[Score="5"] {
        color: var(--GreenBs);
    }

    /*.RateItem[Score="5"]:before {
            content: "5";
        }*/

    .RateItem[Score]:after {
        content: "";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: -5px;
        width: 100%;
        font-size: 27px;
        text-shadow: 0 0 5px var(--WtColor), 0 0 5px var(--WtColor), 0 0 5px var(--WtColor);
        animation: Append 1s forwards 1;
        line-height: 27px;
    }

    .RateItem[Score="1"]:after {
        content: "🥴";
    }

    .RateItem[Score="2"]:after {
        content: "😐";
    }

    .RateItem[Score="3"]:after {
        content: "😊";
    }

    .RateItem[Score="4"]:after {
        content: "😉";
    }

    .RateItem[Score="5"]:after {
        content: "🥰";
    }

    .RateItem.Clicked {
        transform: rotate(-25deg) scale(0.86);
    }

        .RateItem.Clicked:before {
            transform: scale(0.7);
            opacity: 0.2;
        }

        .RateItem.Clicked span {
            transform: scale(0.7);
            bottom: -10px;
            opacity: 0;
        }

        .RateItem.Clicked:after {
            transform: scale(0.7);
            opacity: 0;
            top: 5px;
        }

.ExportMenu.AllRateDivider.Disable {
    pointer-events: none;
    padding: 0 8px;
}

    .ExportMenu.AllRateDivider.Disable > * {
        filter: grayscale(0.8) opacity(0.5);
    }

    .ExportMenu.AllRateDivider.Disable .RatingStars {
        margin: 10px auto 10px;
        border: none;
    }

    .ExportMenu.AllRateDivider.Disable .RateBox {
        margin: 10px auto 15px;
    }

    .ExportMenu.AllRateDivider.Disable .SedaQat,
    .ExportMenu.AllRateDivider.Disable .RatingNum {
        display: none;
    }

/*.ExportMenu.AllRateDivider.Disable {
    pointer-events: none;
}

    .ExportMenu.AllRateDivider.Disable .SedaQat {
        display: none;
    }

    .ExportMenu.AllRateDivider.Disable .RateItem {
        opacity: 0.7;
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 18px;
        margin: 2px 2px 10px;
        padding: 0;
        box-shadow: 0 0 1px, inset 0 0 8px 2px;
    }

        .ExportMenu.AllRateDivider.Disable .RateItem:after {
            display: none;
        }

        .ExportMenu.AllRateDivider.Disable .RateItem span {
            font-size: 8px;
            line-height: 10px;
            bottom: -10px;
        }

    .ExportMenu.AllRateDivider.Disable .RatingStars {
        margin: 0 auto;
        font-size: 20px;
        height: 35px;
        border: none;
        padding: 0;
    }

        .ExportMenu.AllRateDivider.Disable .RatingStars .RateIcon {
            width: 25px;
            line-height: 35px;
        }

    .ExportMenu.AllRateDivider.Disable .RateBox {
        margin: 5px auto;
    }

    .ExportMenu.AllRateDivider.Disable .RatingNum,
    .ExportMenu.AllRateDivider.Disable .RatingLog {
        display: none;
    }*/

#RadarDiv2 {
    position: absolute;
    width: 45%;
    left: 0;
    height: 100px;
}

.TagzBody {
    display: flex;
    flex-wrap: wrap;
    user-select: none;
    margin: 0 0;
    width: 100%;
    direction: rtl;
    position: relative;
    border-radius: var(--CrsBorder);
}

    .TagzBody > * {
        flex-grow: 1;
        white-space: pre;
        min-width: 130px;
        width: unset;
        flex-basis: 0;
    }

        .TagzBody > * > .Delete {
            font-size: 13px;
            width: 20px;
            line-height: 20px;
            position: absolute;
            cursor: no-drop;
            z-index: 2;
            right: 0px;
            top: 0px;
            font-family: "Font Awesome 6 Pro";
            border: none;
        }

            .TagzBody > * > .Delete:before {
                content: "\f00d";
                padding: 0;
                width: unset;
                font-size: unset;
            }

    .TagzBody .TagzLine {
    }

        .TagzBody .TagzLine .Tagzz {
            font-size: 10.5px;
            padding: 0 30px 0 10px;
            border: none;
        }

        .TagzBody .TagzLine.Disbale {
            user-select: none;
            pointer-events: none;
            opacity: 0.5;
        }

            .TagzBody .TagzLine.Disbale .Delete {
                display: none;
            }

    .TagzBody .PlusTagzz {
        cursor: cell;
        flex-basis: 0;
        flex-grow: 1;
        max-width: 40px;
        min-width: 40px;
    }

        .TagzBody .PlusTagzz:before {
            width: unset;
            right: unset;
            content: "\f067";
            font-family: "Font Awesome 6 Pro";
        }


        .TagzBody .PlusTagzz:first-child {
            max-width: none;
        }

    .TagzBody span {
        position: absolute;
        left: 32px;
        bottom: 0px;
        opacity: 0.7;
        font-size: 8px;
        line-height: 15px;
        border: none !important;
    }

    .TagzBody .TagzLine:before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        position: absolute;
        font-size: 18px;
        opacity: 0.25;
        bottom: 0;
        line-height: calc(var(--CrsHeight) - 10px);
        pointer-events: none;
    }

.TagzLine {
}

    .TagzLine[etr*="حله"],
    .TagzLine[etr*="مثبت"],
    .TagzLine[etr*="منف"] {
        filter: hue-rotate(180deg);
    }

        .TagzLine[etr*="حله"]:before,
        .TagzLine[etr*="مثبت"]:before,
        .TagzLine[etr*="منف"]:before {
            content: '\f48b';
        }

    .TagzLine[etr*="مرده"] {
        filter: hue-rotate(90deg);
    }

        .TagzLine[etr*="مرده"]:before {
            content: '\f54c';
        }

    .TagzLine[etr*="زیــر خـاکی"] {
        filter: grayscale(1);
    }

        .TagzLine[etr*="زیــر خـاکی"]:before {
            content: '\f54c';
        }

    .TagzLine[etr*="کـات مَستــر"] {
        filter: grayscale(1);
    }

        .TagzLine[etr*="کـات مَستــر"]:before {
            content: '\f0c4';
        }

    .TagzLine[etr*="جدید"], .TagzLine[etr*="جديد"] {
        filter: hue-rotate(270deg);
    }

        .TagzLine[etr*="جدید"]:before, .TagzLine[etr*="جديد"]:before {
            content: '\f055';
        }

    .TagzLine[etr*="مشتاق"], .TagzLine[etr*="نسبتا"], .TagzLine[etr*="عمرا"] {
        filter: hue-rotate(330deg);
    }

        .TagzLine[etr*="مشتاق"]:before, .TagzLine[etr*="نسبتا"]:before, .TagzLine[etr*="عمرا"]:before {
            content: '\f7d9';
        }

    .TagzLine[etr*="گالر"] {
        filter: hue-rotate(90deg);
    }

        .TagzLine[etr*="گالر"]:before {
            content: '\f2fe';
        }

    .TagzLine[etr*="دونگ"] {
        filter: grayscale(1);
    }

        .TagzLine[etr*="دونگ"]:before {
            content: '\f13d';
        }

    .TagzLine[etr*="خونگ"] {
        filter: hue-rotate(224deg);
    }

        .TagzLine[etr*="خونگ"]:before {
            content: '\f015';
        }

.Recomend span {
    text-shadow: 0 0 5px #008812, 0 0 5px #008812, 0 0 5px #008812, 0 0 2px #000;
    font-size: 13px;
    padding: 3px 0 0;
}

.ShobeBox .Recomend:after {
    color: var(--GreenLt);
    font-size: 14px;
    top: -4px;
    line-height: 15px;
    right: 2px;
    transform: rotate(30deg);
    text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.blueBtn.Etelaeye {
    line-height: 50px;
    font-size: 15px;
    margin: 15px 0 0;
}

.blueBtn.InstaPage {
    line-height: 38px;
    font-size: 15px;
    margin: 15px 0 0;
    padding-left: 60px;
}

    .blueBtn.InstaPage:before {
        position: absolute;
        left: 20px;
        font-size: 30px;
        bottom: 0;
        line-height: 50px;
        width: 50px;
        content: "\f16d";
        font-family: "Font Awesome 6 Brands";
        font-weight: 900;
    }

    .blueBtn.InstaPage span {
        font-size: 8px;
        position: absolute;
        width: 100%;
        left: 0;
        padding-left: 60px;
        line-height: 15px;
        bottom: 4px;
        color: #729fc7;
    }

.ShopAdd {
    padding: 10px 2px 5px;
    direction: rtl;
    overflow-x: auto;
    white-space: pre;
}

    .ShopAdd .ItemsBox {
        width: calc(28.3% - 4px);
        color: #028c00;
        background-color: #f0ffee;
        border-radius: 15px;
        background: linear-gradient(210deg,#fff, #c7ffc1 45%, #efffed 47%, #fff);
    }

        .ShopAdd .ItemsBox .ItemsIMG img {
            padding: 6px;
        }

        .ShopAdd .ItemsBox h1 {
            font-size: 10px;
            text-align: center;
            line-height: 22px;
        }

        .ShopAdd .ItemsBox .PricePnl {
            height: 22px;
        }

        .ShopAdd .ItemsBox h2 {
            line-height: 22px;
            font-size: 11px;
            vertical-align: middle;
        }

        .ShopAdd .ItemsBox.ItemsVije:after {
            display: none;
        }

        .ShopAdd .ItemsBox .fa-plus:before {
            font-size: 50px;
            top: calc(80% - 40px);
        }

.TellFriendz {
    height: 64px;
    padding: 5px 0 5px 20px;
    direction: rtl;
    color: #008de0;
    margin: 15px auto 5px;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-color: #008de059;
    width: 80%;
    border-radius: 10px;
    background: #ffffff38;
}

    .TellFriendz:after {
        content: "\f004";
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        position: absolute;
        left: 9px;
        bottom: 2px;
        color: #f00;
        font-size: 18px;
        animation: animateHeartBeat 5s normal ease infinite 1s;
    }

    .TellFriendz:hover {
        background: #ffffffa6;
        border-color: #008de0c2;
    }

    .TellFriendz .CruseLogo {
        height: 50px;
    }

    .TellFriendz span {
        font-size: 12px;
        padding: 0 15px 0 0;
        line-height: 20px;
        display: inline-block;
        vertical-align: middle;
        text-align: right;
    }

.PrintPage {
    padding: 10px 5px;
    background: #fff;
    /*color: #061d33;*/
}

    .PrintPage .Header {
        height: 80px;
        position: relative;
        text-align: right;
        padding: 0 15px;
    }

        .PrintPage .Header img {
            height: 80px;
            position: absolute;
            left: 15px;
            top: 0;
        }

        .PrintPage .Header h1 {
            display: block;
            font-size: 14px;
            text-align: right;
            margin: 0;
            line-height: 25px;
        }

.Kargah {
    padding: 10px 5px 40px;
    user-select: none;
    height: calc(100% - 75px);
    top: 75px;
    position: relative;
    overflow: auto;
    overflow-x: hidden;
    width: 100%;
}

    .Kargah .PriceLine {
        height: 30px;
        padding: 0 20px;
        display: block;
        position: relative;
        direction: rtl;
    }

        .Kargah .PriceLine .Txt {
            line-height: 30px;
            float: right;
        }

            .Kargah .PriceLine .Txt span {
                opacity: 0.5;
                font-size: 10px;
                padding-right: 8px;
                position: absolute;
            }

        .Kargah .PriceLine .Pric {
            line-height: 30px;
            float: left;
        }

            .Kargah .PriceLine .Pric:after {
                content: "تومـان";
                font-size: 9px;
                line-height: 30px;
                vertical-align: top;
                padding-right: 7px;
                opacity: 0.4;
            }

    .Kargah .CommentBox {
        max-height: 320px;
        overflow: auto;
        position: relative;
        direction: rtl;
    }

    .Kargah .Footer {
        padding: 0 10px;
        display: block;
        position: relative;
        line-height: 30px;
        font-size: 12px;
        margin: 3px 0;
        width: 100%;
        text-align: right;
        direction: rtl;
    }

        .Kargah .Footer img {
            width: 38px;
            height: 38px;
            border-radius: 20px;
            border: 2px solid var(--WtColor);
            box-shadow: 0 0 4px 1px;
            margin: 1px 0 3px 8px;
            vertical-align: text-bottom;
        }

        .Kargah .Footer span {
            padding-top: 15px;
            vertical-align: top;
            position: relative;
            display: inline-block;
            width: calc(100% - 50px);
            line-height: 18px;
            text-align: justify;
            text-align-last: right;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--ColorAlt);
        }

        .Kargah .Footer > h6 {
            position: absolute;
            right: 62px;
            top: 4px;
            font-size: 8.5px;
            opacity: 0.8;
            text-align: justify;
            text-align-last: right;
            line-height: 10px;
            color: var(--ColorAlt);
        }

        .Kargah .Footer > h5 {
            margin: 0;
            position: absolute;
            left: 25px;
            top: 4px;
            font-size: 8.5px;
            opacity: 0.7;
            text-align: justify;
            text-align-last: left;
            line-height: 12px;
        }

        .Kargah .Footer.Coment span {
            font-size: 10.5px;
            margin-bottom: 3px;
            padding-bottom: 8px;
            border-bottom: 1px solid;
            padding-top: 20px;
        }

        .Kargah .Footer.Coment img {
            border-radius: 3px;
            border: none;
            box-shadow: 0 0 0 1px;
        }

        .Kargah .Footer.Coment .Inpt {
            font-size: 10.5px;
            margin-bottom: 3px;
            border: none;
            background: #ffffff6b;
            background: no-repeat;
            border-radius: 5px 5px 0 0;
            padding: 5px 5px 5px 75px;
            padding-bottom: 5px;
            border-bottom: 1px solid #528cb3c2;
            color: unset;
            line-height: 18px;
            margin-top: 5px;
            vertical-align: top;
            position: relative;
            display: inline-block;
            width: calc(100% - 50px);
            font-weight: unset;
            text-align: justify;
            text-align-last: right;
            border-bottom: none;
        }

            .Kargah .Footer.Coment .Inpt:before {
                content: "\f303";
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                font-size: 14px;
                position: absolute;
                animation: PenselWrite 2s linear infinite;
                right: 10px;
                top: 5px;
                pointer-events: none;
                transition: 0.6s;
            }

            .Kargah .Footer.Coment .Inpt:focus:before, .Kargah .Footer.Coment .Inpt:not(:empty):before {
                opacity: 0;
            }

        .Kargah .Footer.Coment h1 {
            font-size: 12px;
            margin: 0;
            position: absolute;
            left: 12px;
            bottom: 9px;
            line-height: 28px;
            vertical-align: top;
            box-shadow: 0 0 1px 1px;
            border-radius: 4px;
            padding: 4px 10px;
            background: #e7ffe2;
            color: #1a8400;
        }

            .Kargah .Footer.Coment h1:before {
                content: "\f1d8";
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                padding-left: 6px;
                font-size: 13px;
                line-height: 28px;
                vertical-align: top;
            }

        .Kargah .Footer.Coment.Mine {
            box-shadow: 0 0 2px;
            border-radius: 4px;
            margin-top: 10px;
            background: var(--TransPr);
            padding: 5px 7px;
            direction: rtl;
        }

.ProjKargah {
    height: calc(100% - 72px);
    top: 73px;
    position: relative;
    overflow: auto;
    width: 100%;
    margin: 0 auto;
    direction: ltr;
    font-size: 0;
    overflow-x: hidden;
}

    .ProjKargah .Kargah {
        background: none;
    }

@keyframes PenselWrite {
    0% {
        right: 10px;
    }

    50% {
        right: 80px;
        transform: rotate(-40deg);
    }
}

.FasLoading {
    pointer-events: none;
    opacity: 0.5;
    animation: D360 1.2s infinite linear !important;
}

    .FasLoading:before {
        content: "\f013";
    }

.FactGah {
    width: calc(100% - 4px);
    height: 60px;
    text-align: right;
    font-size: 13px;
    padding: 0 15px;
    --ColorBs: var(--OrangeBs);
    --ColorVl: var(--OrangeVl);
    --ColorLt: var(--OrangeLt);
    color: var(--OrangeBs);
}

    .FactGah.DoneF {
        background: #ffc783;
        background: var(--OrangeLt);
    }

    .FactGah.Payed {
    }

        .FactGah.Payed:before {
            content: "\f00c";
            font-family: "Font Awesome 6 Pro";
            font-size: 70px;
            line-height: 75px;
            display: inline-block;
            vertical-align: top;
            position: absolute;
            color: #fff;
            /*text-shadow: 0 0 10px #844500, 0 0 10px #844500;*/
            text-shadow: 0 0 5px var(--OrangeBs), 0 0 5px var(--OrangeBs), 0 0 10px var(--OrangeBs);
            left: 7px;
            bottom: -20px;
            z-index: -1;
            opacity: 0.25;
        }

    .FactGah .UserAvatar {
        width: 44px;
        height: 44px;
    }

        .FactGah .UserAvatar.Mojri {
            position: absolute;
            left: 84px;
            top: 8px;
        }

        .FactGah .UserAvatar.Custm {
        }


    .FactGah .CName {
        line-height: 60px;
        display: inline-block;
        padding: 0 8px;
    }

    .FactGah .PricBox {
        width: 70px;
        display: inline-block;
        height: 60px;
        float: left;
        text-align: left;
        padding: 5px 0;
        direction: ltr;
    }

        .FactGah .PricBox .Price {
            line-height: 25px;
            display: block;
        }

        .FactGah .PricBox .Final {
            line-height: 30px;
            vertical-align: text-bottom;
        }

            .FactGah .PricBox .Final span {
                font-size: 8px;
                vertical-align: middle;
                opacity: 0.6;
                line-height: 20px;
                display: inline-block;
                padding-left: 5px;
            }

    .FactGah .DateBox {
        width: 70px;
        display: inline-block;
        height: 60px;
        text-align: left;
        padding: 5px 0;
        direction: ltr;
        position: absolute;
        left: 150px;
        top: 0;
        font-size: 12px;
    }

        .FactGah .DateBox .cDate {
            line-height: 25px;
            display: block;
        }

        .FactGah .DateBox .dDate {
            line-height: 30px;
            vertical-align: text-bottom;
        }

/*.ListPanel.KarQah {
    padding: 15px 10px;
}*/
/* .BlkBoard*/

.BoardItm {
    display: inline-block;
    position: relative;
    width: 80px;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
    height: 100px;
    padding: 3px 0;
}

    .BoardItm .Custm {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid #fff;
        border: 2px solid var(--WtColor);
        box-shadow: 0 0 3px 1px;
    }

    .BoardItm .Mojri {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 2px solid var(--WtColor);
        box-shadow: 0 0 1px 1px;
        position: absolute;
        right: 7px;
        z-index: 1;
        top: 35px;
    }

    .BoardItm .CusNM {
        width: 100%;
        font-size: 9px;
        line-height: 16px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 64px;
    }

    .BoardItm .Price {
        position: absolute;
        left: 0;
        /* top: 55px; */
        font-size: 9.5px;
        width: 100%;
        bottom: 5px;
        line-height: 12px;
        white-space: pre;
    }

    .BoardItm.DoneF {
        color: var(--GreenBs);
    }

        .BoardItm.DoneF:before {
            position: absolute;
            content: "\f00c";
            font-family: "Font Awesome 6 Pro";
            width: 40px;
            line-height: 40px;
            left: -3px;
            font-size: 38px;
            text-shadow: 0 0 2px #000, 0 0 2px #000;
            z-index: 2;
            top: 0;
            color: #e0ffdc;
        }


        .BoardItm.DoneF .Custm {
            /*opacity: 0.6;*/
        }

    .BoardItm.Payed {
        filter: grayscale(1) opacity(0.4) !important;
    }

    .BoardItm:hover {
        /*width: 85px;*/
        z-index: 1;
    }

        .BoardItm:hover .Mojri {
            top: 0;
            transform: scale(1.25) rotate(35deg);
        }

        .BoardItm:hover .Custm {
            opacity: 0.4;
        }

        .BoardItm:hover .CusNM {
            font-size: 11px;
            top: 50px;
            z-index: 1;
            text-shadow: 0 0 5px var(--WtColor), 0 0 5px var(--WtColor), 0 0 5px var(--WtColor), 0 0 5px var(--WtColor);
        }

        .BoardItm:hover .Price {
            /* left: 2px; */
            bottom: 17px;
            font-size: 11px;
            text-shadow: 0 0 5px var(--WtColor), 0 0 5px var(--WtColor), 0 0 5px var(--WtColor), 0 0 5px var(--WtColor);
        }

        .BoardItm:hover.DoneF:before {
            opacity: 0;
        }

.BoardDay {
    width: 100%;
    text-align: right;
    direction: rtl;
    margin: 0 0 7px;
    padding: 7px 0 0;
    overflow: hidden;
    overflow-x: auto;
    white-space: pre;
    border-radius: 10px;
}

    .BoardDay .NewDay {
        width: 70px;
        display: inline-block;
        vertical-align: text-bottom;
        text-align: center;
        border-left: 2px solid;
        margin: 10px 0 40px 10px;
    }

        .BoardDay .NewDay h1 {
            font-size: 16px;
            line-height: 25px;
        }

        .BoardDay .NewDay span {
            font-size: 8px;
            line-height: 20px;
            display: inline-block;
            width: 100%;
        }

    .BoardDay:hover {
        box-shadow: inset 0 0 20px -10px;
    }

    .BoardDay.Today {
        box-shadow: inset 0 0 30px -15px;
        color: #f00;
    }

.GahChart {
    width: calc(100% - 4px);
    height: 420px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px;
    border-radius: 5px;
    padding: 7px;
    background: var(--TransPr);
}

.SetBirthDate {
    padding: 8px 110px 8px 15px;
    height: 80px;
    direction: rtl;
    color: #63006f;
    margin: 65px auto 20px;
    border-top: 3px solid;
    border-bottom: 3px solid;
    width: 85%;
    border-radius: 15px;
    background: linear-gradient( 40deg,#fff, #ffc0f8 30%, #f9daff 31%, #fff);
    cursor: cell;
    font-size: 12px;
    position: relative;
    user-select: none;
    box-shadow: inset 0 0 20px -5px #901e92;
    box-shadow: inset 0 0 20px -5px;
    background: linear-gradient( -30deg,currentcolor, #fff 40% 60%, currentcolor) center;
    background-size: 220%;
}

    .SetBirthDate .Mask {
        position: absolute;
        width: 95px;
        z-index: 100;
        /*pointer-events: none;*/
        right: 8px;
        bottom: -12px;
    }

    .SetBirthDate.Next {
        color: #1a8400;
        background: #bfffa4;
    }

    .SetBirthDate h6 {
        font-size: 12px;
        position: absolute;
        top: -45px;
        left: 20px;
        margin: 0;
        width: calc(100% - 120px);
        line-height: 18px;
    }

    .SetBirthDate h5 {
        margin: 0;
        width: calc(100% - 160px);
        line-height: 38px;
        border-radius: 10px;
        font-size: 16px;
        position: absolute;
        left: 20px;
        bottom: -22px;
        border-top: 2px solid;
        border-bottom: 2px solid;
        background: linear-gradient( -30deg,currentcolor, #fff 40% 60%, currentcolor) center;
        background-size: 200%;
        box-shadow: inset 0 0 15px -5px;
        padding: 0 5px 0 18px;
        color: #288a00;
        white-space: pre;
    }

        .SetBirthDate h5:before {
            content: "\f00c";
            font-weight: 900;
            font-family: "Font Awesome 6 Pro";
            width: 35px;
            display: inline-block;
            font-size: 18px;
            vertical-align: top;
            transition: 0.3s;
        }

    .SetBirthDate .Year {
        width: 100%;
        direction: ltr;
    }

        .SetBirthDate .Year input {
            display: inline-block;
            width: 24%;
            margin: 0 2%;
            border-radius: 8px;
            background: #ffffffbf;
            border: none;
            font-size: 18px;
            font-family: unset;
            direction: ltr;
            text-align: center;
            font-weight: unset;
            color: unset;
            line-height: 34px;
            padding: 0;
            user-select: none;
            border-top: 2px solid;
            border-bottom: 2px solid;
        }

            .SetBirthDate .Year input.Y {
                width: 38%;
            }

.UpdateTxt {
    direction: rtl;
    line-height: 40px;
    font-size: 10px;
    box-shadow: 0 0 2px 0.3px;
    border-radius: 2px;
    background: #ffd8c6;
    margin-top: 18px;
    color: #002d48;
    max-height: 40px;
    overflow: hidden;
    background: linear-gradient( -22deg,#406e90, #c9ddef 30% 70%, #406e90) center;
}

    .UpdateTxt h1 {
        display: block;
        font-size: unset;
        line-height: 40px;
        padding-left: 90px;
    }

    .UpdateTxt h2 {
        display: block;
        font-size: unset;
        padding: 8px 2px 0px;
        line-height: 25px;
        margin: 4px 18px;
        border-top: 1px solid;
    }

    .UpdateTxt .StarBox {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        position: absolute;
        left: 18px;
        top: 0;
        font-size: 15px;
        text-shadow: 0 0 2px #000, 0 0 5px #000;
        color: #ffb01f;
    }

        .UpdateTxt .StarBox span:before {
            content: "\f005";
            margin: 0 1px;
        }

    .UpdateTxt .UpdateBazar {
        margin: 8px auto 12px;
        width: 75%;
        background: #5fff5c;
        line-height: 32px;
        height: 32px;
        font-size: 12px;
        color: #015f00;
    }

    .UpdateTxt.Open {
        max-height: 160px;
    }

.ModalBody .xCrs.AppUpdate {
    margin: 20px 2px 5px;
    background: var(--BgTrust);
    height: 65px;
    width: 90%;
    font-size: 15px;
}

/* For All Divs +DeltGah +Story */
.DeletedDiv {
    pointer-events: none;
    filter: opacity(0.5) grayscale(0.5) !important;
    background: #f00 !important;
}

    .DeletedDiv > * {
        opacity: 0.5 !important;
    }

.Kargah .MaxPrj {
    width: 98%;
    position: relative;
    margin: 3px auto 3px;
    padding-top: calc(75% + -4px);
    /*color: #0c446d;*/
    display: inline-block;
    overflow: hidden;
}

    .Kargah .MaxPrj .MaxRendr {
        width: calc(100% - 4px);
        margin: 2px;
        box-shadow: 0 0 0 1px;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient( 30deg, #cfe6ff 35%, #f8fcff 43%);
        overflow: hidden;
        border-radius: 5px;
    }

    .Kargah .MaxPrj .Count {
        position: absolute;
        right: 5px;
        bottom: 5px;
        direction: ltr;
        line-height: 0;
    }

        .Kargah .MaxPrj .Count .Tedad {
            width: 7px;
            height: 3px;
            background: #fff;
            display: inline-block;
            border-radius: 2px;
            margin: 0 1px;
            box-shadow: 0 0 2px #000;
        }

            .Kargah .MaxPrj .Count .Tedad.OnThis {
                background: currentcolor;
                width: 12px;
            }


/* Theme */
/* Theme */
/* Theme */
/* Theme */

.blueBtn.MyBirthDay {
    box-shadow: var(--CrsBoxShadow), inset 0 0 15px 0px;
    width: 95%;
    margin: 60px auto 50px;
    border-radius: 10px 20px 20px 20px;
    padding: 0 60px 0 80px;
    white-space: pre;
    line-height: var(--CrsHeight);
}

    .blueBtn.MyBirthDay:before {
        background-image: url(/images/Theme/BirthDay.png) !important;
        background-size: cover;
        content: '';
        width: 60px;
        height: 95px;
        position: absolute;
        top: -32px;
        right: 15px;
        filter: drop-shadow(0 0 3px) drop-shadow(0 0 4px);
        /* left: calc(50% - 120px); */
    }

    .blueBtn.MyBirthDay:after {
        content: 'اِنشـــالا اِمســـالْ بِشه بِهتَریــن ســالِ زِندگــیت';
        font-size: 9.5px;
        position: absolute;
        left: 0;
        bottom: -18px;
        line-height: 15px;
        width: 100%;
        padding-right: 90px;
        text-shadow: none;
    }

    .blueBtn.MyBirthDay img {
        width: 80px;
        height: 60px;
        position: absolute;
        left: 10px;
        top: -20px;
        box-shadow: 0 0 1px 1px;
        border-radius: 8px 8px 8px 15px;
        z-index: 1;
        background: var(--BgColor);
    }

    .blueBtn.MyBirthDay.Clicked {
        margin: 75px 0 85px;
    }

        .blueBtn.MyBirthDay.Clicked img {
            width: 235px;
            height: 176px;
            left: calc(50% - 68px);
            border-radius: 10px;
            top: -60px;
            box-shadow: 0 0 0 1px, 0 0 10px 3px;
        }

        .blueBtn.MyBirthDay.Clicked:before {
            right: calc(50% + 82px);
            z-index: 10;
            filter: drop-shadow(0 0 4px) drop-shadow(0 0 5px) drop-shadow(0 0 6px);
            width: 94px;
            height: 140px;
            top: -55px;
        }

        .blueBtn.MyBirthDay.Clicked:after {
            opacity: 0;
        }


.PaletteColor {
    display: none !important;
}

.MainFace .TopFace .TopFaceLeft {
    color: unset;
}

.ParketBox {
    position: relative;
    display: inline-block;
    width: 95%;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    user-select: none;
    direction: rtl;
}

    .ParketBox .CorianItem {
        float: unset;
        width: 28%;
    }


        .ParketBox .CorianItem .ItemsIMG {
            padding-top: 125%;
        }

            .ParketBox .CorianItem .ItemsIMG img {
                height: 100%;
            }

.ChatTitle.SampleTitle {
}

    .ChatTitle.SampleTitle .AddNewSample {
        font-size: 20px;
        width: 40px;
        line-height: 36px;
        height: 40px;
        box-shadow: 0 0 4px 1px, inset 0 0 6px 1px;
        display: inline-block;
        border-radius: 50%;
        border: 2px solid #fff;
        position: absolute;
        left: 56px;
        cursor: pointer;
        background: #fff;
        bottom: -45px;
        z-index: 1;
    }

        .ChatTitle.SampleTitle .AddNewSample:before {
            content: "\f067";
            font-family: "Font Awesome 6 Pro";
        }

        .ChatTitle.SampleTitle .AddNewSample:hover {
            box-shadow: 0 0 4px 3px, inset 0 0 6px 3px;
        }

    .ChatTitle.SampleTitle .RefreshMx {
        color: currentColor;
    }

.ChatBody.SampleBody {
}

    .ChatBody.SampleBody .AddNewSample:hover {
        box-shadow: 0 0 6px, inset 0 0 10px;
    }

.SampleBox {
    width: calc(33.33% - 4px);
    padding: 0;
    vertical-align: top;
}

    .SampleBox:before {
        content: '';
        width: 100%;
        position: relative;
        padding-top: 133.3%;
        display: block;
    }

    .SampleBox img {
        width: 100%;
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        /*padding: 3px;*/
        pointer-events: none;
    }

    .SampleBox h1 {
        font-size: 11px;
        white-space: pre;
        line-height: 30px;
        text-align: center;
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
        direction: rtl;
        /*text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 20px #fff;*/
        text-shadow: 0 0 4px var(--WtColor), 0 0 4px var(--WtColor), 0 0 10px var(--WtColor), 0 0 20px var(--WtColor);
        width: 100%;
    }

    .SampleBox h2 {
        font-size: 9px;
        white-space: pre;
        line-height: 15px;
        text-align: center;
        margin: 0;
        position: absolute;
        right: 0;
        top: 23px;
        direction: rtl;
        text-shadow: 0 0 2px #fff, 0 0 2px #fff;
        width: 100%;
        opacity: 0.7;
    }

    .SampleBox .PricePnl {
        overflow: hidden;
        font-size: 13px;
        white-space: pre;
        padding: 0 5px;
        line-height: 30px;
        text-align: right;
        margin: 0;
        position: absolute;
        bottom: 0;
        right: 0;
    }
/*.SampleBody*/
.SampleBody .Title {
    margin: 10px;
    text-align: right;
}

.SampleBody .HorizontalScroll {
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0px 0 8px 0;
    user-select: none;
    direction: rtl;
}

    .SampleBody .HorizontalScroll .SampleBox {
        width: calc(22% - 4px);
    }

        .SampleBody .HorizontalScroll .SampleBox h1 {
            font-size: 9px;
            line-height: 25px;
        }

        .SampleBody .HorizontalScroll .SampleBox h2 {
            font-size: 8px;
            top: 20px;
        }

.BackShadow {
}

    .BackShadow .SampleEdit {
        position: absolute;
        z-index: 10;
        width: 350px;
        left: 20px;
        bottom: 30px;
        padding: 5px;
        background: #00000069;
        animation: Append 0.7s forwards 1;
    }

        .BackShadow .SampleEdit .UploadIMG {
            padding: 10px 20px 14px;
            margin: 0;
            font-size: 20px;
            cursor: pointer;
        }

    .BackShadow .SampleLarge {
        display: block;
        background: #ffffff;
        position: relative;
        z-index: 10;
        max-height: 98.5%;
        width: auto !important;
        max-width: 98.5%;
        height: auto !important;
        /*height: 98.5%;*/
        box-shadow: 0 0 3px #000;
        animation: Append 0.4s forwards 1;
    }

    .BackShadow .TempSampImg {
        display: none;
    }

    .BackShadow .SampleLargeTxt {
        position: absolute;
        width: 100%;
        text-align: center;
        z-index: 10000;
        bottom: 20px;
        text-shadow: 0 0 3px #000, 0 0 5px #000, 0 0 10px #000;
        pointer-events: none;
        animation: Append 0.8s forwards 1;
        color: #fff;
        font-size: 13px;
        white-space: pre;
        direction: rtl;
    }

    .BackShadow > .RefreshMx {
        position: absolute;
        left: 0;
        top: 0;
        text-shadow: 0 0 5px #000;
        color: #fff;
        width: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
    }

        .BackShadow > .RefreshMx:before {
            content: "\f060";
            font-family: "Font Awesome 6 Pro";
        }

    .BackShadow > .Loading {
        position: relative;
    }

        .BackShadow > .Loading:after {
            content: '';
            position: relative;
            border: 8px solid transparent;
            border-top: 8px solid;
            border-bottom: 8px solid;
            width: 50px;
            height: 50px;
            animation: D360 1s linear infinite !important;
            margin: 20px;
            display: inline-block;
            border-radius: 50%;
        }

@media (min-width:1300px), (orientation: landscape) {
    .SampleBox {
        width: calc(16.66% - 4px);
    }
}

/* Yalda Theme */

.RendrBtnz {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 9;
}

.IsBlock {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999999999999;
    background: #000000de;
    /*color: #fff;*/
    color: #ff7d7d;
    text-align: center;
    text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 50px #000, 0 0 100px #000;
    box-shadow: inset 0 0 10vw #000, inset 0 0 20vw #000, inset 0 0 30vw #000;
    direction: rtl;
    user-select: none;
}

    .IsBlock span {
        position: absolute;
        width: 100%;
        bottom: 10%;
        left: 0;
    }

    .IsBlock:before {
        content: "\f05e";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        width: 100%;
        bottom: 12%;
        font-size: 150px;
        left: 0;
    }

.ArchivedPrj {
    width: calc(100% - 30px);
    position: absolute;
    bottom: 15px;
    font-size: 11.5px;
    left: 15px;
    padding: 15px;
    padding-right: 70px;
    /* height: 80px; */
    text-align: justify;
    text-align-last: center;
    box-shadow: var(--CrsBoxShadow), 0 0 12px 3px;
    filter: grayscale(0.5);
    border: 2px solid var(--WtColor);
    background: var(--TransPr);
    backdrop-filter: blur(5px);
}

    .ArchivedPrj:before {
        font-family: "Font Awesome 6 Pro";
        display: inline-block;
        position: absolute;
        line-height: 80px;
        width: 65px;
        right: 0;
        top: 0;
        font-size: 26px;
    }

    .ArchivedPrj h6 {
        line-height: 22px;
        font-size: 8.5px;
        opacity: 0.8;
        border-top: 1px solid;
        max-width: 75%;
        margin: 15px auto 0;
        white-space: pre;
    }

.ChatFade {
    filter: grayscale(0.8);
}

.CorianAd {
    width: calc(100% - 4px);
    margin: 2px;
    box-shadow: 0 0 0 1px;
    color: var(--GreenBs);
    background: linear-gradient( 30deg,var(--WtColor), var(--GreenLt) 35% 65%, var(--WtColor) 100%) center;
    max-height: 40px;
    direction: rtl;
    overflow: hidden;
    border-radius: 6px;
}

    .CorianAd.Open {
        max-height: 140px;
    }

    .CorianAd h1 {
        font-size: 12px;
        line-height: 40px;
        vertical-align: top;
        animation: RotateHue 5s linear infinite !important;
    }

        .CorianAd h1:before {
            content: "\f5fd";
            font-size: 17px;
            line-height: 40px;
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            display: inline-block;
            padding-left: 12px;
            vertical-align: top;
        }

    .CorianAd h2 {
        font-size: 11px;
        line-height: 30px;
    }

    .CorianAd [CallHim] {
        background: var(--GreenVl);
        width: 80%;
        margin-bottom: 10px;
    }

/* Calendar Tokhmi Style */
jdp-container {
    box-shadow: 0 0 14px 2px;
    /*border-radius: 10px;
    margin: 8px;
    font-family: unset;
    font-weight: 900;
    padding: 5px;
    max-width: 300px;*/
    z-index: 10000 !important;
}

    jdp-container * {
        font-family: unset !important;
        font-weight: 900 !important;
    }

    jdp-container .jdp-day, jdp-container .jdp-day-name {
        line-height: 36px !important;
        height: unset;
    }

    jdp-container input {
        line-height: 36px !important;
        height: unset;
    }

    jdp-container .jdp-days {
        padding: 10px 0;
    }

    jdp-container:empty {
        display: none;
    }
/* Calendar Tokhmi Style */
.CruseCut {
}

.CutTeazer {
    width: 100%;
    max-width: 600px;
}

.CutMasterAD {
    width: 98%;
    margin: 0 auto;
    text-align: center;
    color: #ffe791;
    text-shadow: 0 0 5px #000, 0 0 8px #000;
    user-select: none;
}

    .CutMasterAD .MyMage {
        width: 100%;
    }

    .CutMasterAD .TxLine {
        margin: 0;
        font-size: 12px;
        line-height: 30px;
        width: 50%;
        display: inline-block;
        padding: 0 5px;
        white-space: pre;
    }

.ThisCut {
    width: 96%;
    display: inline-block;
    height: 50px;
    background: #edffe6;
    line-height: 50px;
    margin: 2px auto;
    box-shadow: 0 0 0 1px;
    border-radius: 3px;
    padding: 0 50px 0 15px;
    cursor: pointer;
    font-size: 12px;
    direction: rtl;
    color: #146300;
}

    .ThisCut:hover {
        box-shadow: 0 0 0 1px,inset 0 0 18px -6px;
    }

    .ThisCut:before {
        content: "\f0c4";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        right: 15px;
        font-size: 22px;
        transform: rotate(180deg);
    }

    .ThisCut .Title {
        display: inline-block;
        float: right;
    }

    .ThisCut .cDate {
        display: inline-block;
        float: left;
        font-size: 9px;
    }

.ForCutPrice {
    position: absolute;
    color: var(--WtColor);
    line-height: 38px;
    justify-content: center;
    width: 150px;
    box-shadow: 0 0 5px 1px #000;
    border-radius: 5px;
    direction: ltr;
    font-size: 24px;
    background: var(--OrangeBs);
    top: -30px;
    z-index: 1000;
    left: 13px;
    animation: Append 0.7s forwards 1;
    vertical-align: middle;
    padding-top: 4px;
}

    .ForCutPrice.New {
        background: #ff0000;
        width: 200px;
    }

.ForCutPriceTxt {
    font-size: 14px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -35px;
    color: #ff0;
    text-shadow: 0 0 10px #000;
    animation: Append 0.5s forwards 1;
}

.ForCutPriceTxt2 {
    font-size: 14px;
    position: absolute;
    width: 120%;
    left: -10%;
    bottom: -60px;
    color: #ff0;
    text-shadow: 0 0 10px #000;
    animation: Blink 1.5s normal ease infinite 0s;
}

.ShowLogoes {
    width: calc(16.66% - 6px);
    position: relative;
    display: inline-block;
    box-shadow: 0 0 0 1px,inset 0 0 5px;
    border-radius: 5px;
    margin: 3px;
    padding: 5px;
    background: #fff;
    cursor: pointer;
}

    .ShowLogoes:before {
        content: '';
        position: relative;
        padding-top: 100%;
        display: block;
    }

    .ShowLogoes:hover {
        box-shadow: 0 0 0 1px,inset 0 0 10px 2px;
    }

    .ShowLogoes .Logos {
        width: calc(100% - 10px);
        position: absolute;
        left: 5px;
        top: 5px;
    }

    .ShowLogoes .Custm {
        width: 37%;
        position: absolute;
        right: 8px;
        bottom: -8px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 2px 2px;
    }

.LoginPanel .LangSelect {
    position: fixed;
    font-size: 13px;
    bottom: 0;
    right: 0;
    z-index: 100;
    line-height: 20px;
}

    .LoginPanel .LangSelect span {
        padding: 0 10px;
        cursor: pointer;
    }

        .LoginPanel .LangSelect span:hover {
            padding: 0 15px;
        }

.PrjClick {
    width: calc(100% - 4px);
    text-align: center;
    background: var(--ColorVl);
    position: relative;
    border-radius: var(--CrsBorder);
    box-shadow: var(--CrsBoxShadow);
    margin: 5px 2px;
    user-select: none;
    cursor: pointer;
}

    .PrjClick:hover {
        background: var(--ColorLt);
    }

    .PrjClick .Header {
        height: 40px;
        line-height: 40px;
    }

        .PrjClick .Header .Name {
            line-height: 35px;
            display: inline-block;
            float: left;
            width: 140px;
            border-right: 1px solid var(--ColorLt);
            padding-left: 30px;
            white-space: pre;
            font-size: 11px;
            padding-bottom: 5px;
        }

        .PrjClick .Header .cDate {
            font-size: 10px;
            margin: 8px;
        }

        .PrjClick .Header .IP {
            font-size: 6.5px;
            position: absolute;
            left: 30px;
            top: 27px;
            line-height: 10px;
            width: 110px;
        }

        .PrjClick .Header .Count {
            line-height: inherit;
            display: inline-block;
            float: right;
            width: 50px;
            border-left: 1px solid var(--ColorLt);
            font-size: 13px;
        }

        .PrjClick .Header .Browser {
            font-size: 20px;
            position: absolute;
            left: 0;
            width: 35px;
            line-height: inherit;
            color: var(--ColorAlt);
        }

    .PrjClick .Times {
        display: flex;
        flex-wrap: wrap;
        padding: 0 30px;
        border-top: 1px solid var(--ColorLt);
        color: var(--ColorAlt);
    }

        .PrjClick .Times .Clicks {
            flex-grow: 1;
            flex-basis: 0;
            line-height: 40px;
            font-size: 14px;
            font-family: BComic;
        }

            .PrjClick .Times .Clicks:before {
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                line-height: inherit;
                display: inline-block;
                opacity: 0.5;
                padding: 0 5px;
            }

.ClickTimes {
    user-select: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0 30px;
    color: var(--ColorAlt);
}

    .ClickTimes .Clicks {
        flex-grow: 1;
        flex-basis: 0;
        line-height: 40px;
        font-size: 14px;
        font-family: BComic;
    }

        .ClickTimes .Clicks:before {
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            line-height: inherit;
            display: inline-block;
            opacity: 0.5;
            /* font-size: 20px; */
            padding: 0 5px;
        }

/*for Cruze*/
.CruzeUserClicks {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    font-size: 16px;
    user-select: none;
}

    .CruzeUserClicks .Clicks {
        flex-grow: 1;
        flex-basis: 0;
        line-height: 45px;
        font-family: BComic;
        position: relative;
    }

        .CruzeUserClicks .Clicks:before {
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            line-height: inherit;
            display: inline-block;
            opacity: 0.5;
            padding: 0 5px;
        }

        .CruzeUserClicks .Clicks:after {
            content: attr(Mobil);
            display: inline-block;
            opacity: 0.7;
            font-size: 0.55em;
            position: absolute;
            left: 0;
            top: 3px;
            line-height: 10px;
            width: 100%;
        }

.Create3DText {
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    border: none;
    border-radius: 10px;
}

.ADForLogo {
    width: 18%;
    padding: 2%;
    display: inline-block;
    vertical-align: middle;
}

.blueBtn.Perspolis {
    line-height: 50px;
    font-size: 13px;
    text-shadow: 0 0 8px var(--WtColor), 0 0 8px var(--WtColor), 0 0 8px var(--WtColor), 0 0 8px var(--WtColor);
    box-shadow: 0 0 2px 0.3px, inset 0 0 12px 3px;
    margin: 65px 0 35px;
    border-radius: 10px;
    padding-right: 100px;
    white-space: pre;
    color: var(--GreenBs);
    background: var(--GreenVl) !important;
    width: 94%;
}

    .blueBtn.Perspolis:before {
        background-image: url(/images/Theme/Eid1402.png?v=1) !important;
        background-size: cover;
        content: '';
        width: 92px;
        height: 105px;
        position: absolute;
        top: -34px;
        right: 20px;
        z-index: -1;
        filter: drop-shadow(0 0 2px) drop-shadow(0 0 3px) drop-shadow(0 0 3px);
    }

    .blueBtn.Perspolis:after {
        content: 'بِریـم کـِ اِنشــالا ســالِ خُوووبی بشه ...';
        font-size: 9.5px;
        position: absolute;
        left: 0;
        bottom: -18px;
        line-height: 15px;
        width: 100%;
        padding-right: 112px;
        text-shadow: none;
        animation: HueRorate 8s infinite linear;
    }

/* Theme */
/* Theme */
/* Theme */
/* Theme */

/*.blueBtn.Perspolis {
    line-height: 50px;
    font-size: 14px;
    background: linear-gradient( 313deg,transparent,transparent 50%, currentcolor 64% 66%,transparent 80%, transparent);
    background: linear-gradient( 313deg,var(--TransPr) 50%, currentcolor 64% 66%, var(--TransPr) 80%);
    text-shadow: 0 0 8px var(--WtColor), 0 0 8px var(--WtColor), 0 0 8px var(--WtColor), 0 0 8px var(--WtColor), 0 0 5px var(--WtColor), 0 0 5px var(--WtColor);
    box-shadow: 0 0 2px 0.3px, inset 0 0 15px 0px;
    margin: 30px 0 10px;
    border-radius: 20px;
    padding-right: 110px;
    white-space: pre;
    color: #00809d;
    width: 96%;
}

    .blueBtn.Perspolis:before {
        background-image: url(/images/Theme/ChristmasTheme.png) !important;
        background-size: cover;
        content: '';
        width: 93px;
        height: 90px;
        position: absolute;
        top: -26px;
        right: 25px;
        z-index: -1;
        filter: drop-shadow(0 0 2px) drop-shadow(0 0 2px);
    }

    .blueBtn.Perspolis:after {
        content: 'انشــالا مُصـــادف بشــه بـا کُـلّی اتفــاق قَشَنـْـگ ...';
        font-size: 8.3px;
        position: absolute;
        left: 0;
        bottom: -18px;
        line-height: 15px;
        width: 100%;
        padding-right: 112px;
        text-shadow: none;
    }*/

/*.MainFace {
}

    .MainFace:before {
        content: '';
        background-image: url(/images/Theme/ChristmasBG.jpg);
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.25;
    }

.MojMenu {
}

    .MojMenu:before {
        content: '';
        background-image: url(/images/Theme/ChristmasBG.jpg);
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.5;
    }*/

/*.blueBtn.Perspolis {
    margin: 30px 0 5px;
    color: unset;
    line-height: 40px;
    height: 40px;
    padding: 0;
    border-radius: 3px;
    width: 80%;
    box-shadow: 0 0 0px 1px, inset 0 0 25px -5px;
    color: #00868d;
}

    .blueBtn.Perspolis:after {
        display: none;
    }

    .blueBtn.Perspolis:before {
        filter: drop-shadow(0 0 1px) drop-shadow(0 0 1px);
        width: 115px;
        height: 99px;
        top: -30px;
        display: none;
    }

    .blueBtn.Perspolis .Click {
        animation: Blink 1.5s normal ease infinite 0s;
        position: absolute;
        left: 6%;
        top: -9px;
        width: 70px;
        background: var(--ColorLt);
        line-height: 16px;
        border-radius: 2px;
        box-shadow: 0 0 0px 1px;
        text-shadow: none;
        font-size: 9px;
    }*/

/* Theme */
/* Theme */
/* Theme */
/* Theme */


/*.MojReview .PricBox {
    margin-bottom: 26px;
}

    .MojReview .PricBox:after {
        content: 'قیــمت هارو توی ایــن یِکـی دُو روز مُشخــص می کُنیم اِنشــالا ...';
        position: absolute;
        display: block;
        width: 100%;
        right: 0;
        bottom: -27px;
        line-height: 25px;
        color: var(--OrangeBs);
        font-size: 10.5px;
    }*/

.CustmRespect {
}

    .CustmRespect span {
        font-size: 12px;
        min-width: calc(100% - 10px);
    }

    .CustmRespect:hover:before {
        transform: rotate(-180deg);
    }

    .CustmRespect:hover span {
        right: 46px;
        padding-right: 20px;
    }

.AskColorBox {
    direction: rtl;
    padding: 20px 2px;
}

    .AskColorBox .SampleSelBoxs {
        border-radius: 3px;
        width: 100%;
        margin: 5px auto 10px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 10px 0 10px;
        user-select: none;
        direction: rtl;
        height: 106px;
    }

    .AskColorBox .SampleSelBox {
        max-width: 100%;
        position: relative;
        display: inline-block;
        padding: 1px;
        cursor: pointer;
        vertical-align: top;
        height: 78px;
    }

        .AskColorBox .SampleSelBox .Image {
            position: relative;
            pointer-events: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            box-shadow: 0 0 0 1px;
            margin: 2px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

            .AskColorBox .SampleSelBox .Image img {
                width: 100%;
            }

        .AskColorBox .SampleSelBox h1 {
            font-size: 8px;
            position: absolute;
            right: 0;
            direction: rtl;
            width: 100%;
            bottom: 0px;
        }

        .AskColorBox .SampleSelBox h2 {
            font-size: 9px;
            white-space: pre;
            line-height: 15px;
            text-align: center;
            margin: 0;
            position: absolute;
            right: 0;
            top: 23px;
            direction: rtl;
            text-shadow: 0 0 2px #fff, 0 0 2px #fff;
            width: 100%;
            opacity: 0.7;
        }

        .AskColorBox .SampleSelBox .PricePnl {
            overflow: hidden;
            font-size: 13px;
            white-space: pre;
            padding: 0 5px;
            line-height: 30px;
            text-align: right;
            margin: 0;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .AskColorBox .SampleSelBox.Selected {
            flex-grow: 1.8;
            font-size: 13px;
            opacity: 1;
            padding: 2px 8px;
            transform: scale(1.1);
        }


            .AskColorBox .SampleSelBox.Selected:after {
                content: '\f00c';
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                color: #81ff6a;
                position: absolute;
                bottom: 18px;
                right: 5px;
                font-size: 35px;
                text-shadow: 0 0 2px #000, 0 0 2px #000;
                animation: Append 0.7s forwards;
                line-height: 30px;
            }

        .AskColorBox .SampleSelBox.Large {
        }

            .AskColorBox .SampleSelBox.Large .Image {
                width: 130px;
                height: 170px;
                box-shadow: 0 0 0 2px;
                border-radius: 10px;
                margin: 0 auto;
            }

                .AskColorBox .SampleSelBox.Large .Image img {
                    width: 100%;
                }

            .AskColorBox .SampleSelBox.Large h1 {
                font-size: 12px;
                width: 130px;
            }

                .AskColorBox .SampleSelBox.Large h1.Where {
                    bottom: 25px;
                    text-shadow: 0 0 4px #fff,0 0 7px #fff,0 0 10px #fff;
                }

    .AskColorBox .SelectedCollor {
        height: 193px;
        padding: 1px 1px 1px 15px;
    }

    .AskColorBox .SelectedCollorLst {
        width: calc(100% - 160px);
        display: inline-block;
        overflow: auto;
        height: 200px;
        padding: 0 0 0 10px;
        vertical-align: top;
    }

        .AskColorBox .SelectedCollorLst .SampleSelLstBox {
            width: 100%;
            position: relative;
            display: inline-block;
            cursor: pointer;
            vertical-align: top;
        }

            .AskColorBox .SelectedCollorLst .SampleSelLstBox .Image {
                position: relative;
                pointer-events: none;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                box-shadow: 0 0 0 1px;
                margin: 3px;
                float: right;
                overflow: hidden;
            }

                .AskColorBox .SelectedCollorLst .SampleSelLstBox .Image img {
                    width: 100%;
                }

            .AskColorBox .SelectedCollorLst .SampleSelLstBox h1 {
                font-size: 8px;
                position: absolute;
                direction: rtl;
                /* width: 100%; */
                right: 55px;
                top: 11px;
                opacity: 0.7;
            }

            .AskColorBox .SelectedCollorLst .SampleSelLstBox h2 {
                font-size: 11px;
                white-space: pre;
                line-height: 15px;
                text-align: center;
                margin: 0;
                position: absolute;
                right: 58px;
                top: 26px;
                direction: rtl;
                text-shadow: 0 0 2px #fff, 0 0 2px #fff;
            }

            .AskColorBox .SelectedCollorLst .SampleSelLstBox .DeleteMath {
                color: #f00;
                position: absolute;
                top: 14px;
                left: 5px;
                font-size: 20px;
                text-shadow: 0 0 2px #000;
                line-height: 22px;
                width: 22px;
            }

                .AskColorBox .SelectedCollorLst .SampleSelLstBox .DeleteMath:hover {
                    transform: scale(1.1);
                }

                .AskColorBox .SelectedCollorLst .SampleSelLstBox .DeleteMath:after {
                    content: "\f00d";
                    font-family: "Font Awesome 6 Pro";
                }

    .AskColorBox .xCrs.Btn.Biger {
        width: calc(68% - 4px);
    }

    .AskColorBox .xCrs.Btn.Small {
        width: calc(32% - 4px);
    }


@keyframes StoryTime {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}


.PrjVideoTitle {
    cursor: pointer;
}

.PrjVideo {
    direction: rtl;
    display: flex;
    align-items: center;
}

    .PrjVideo .Renders {
        width: calc(40% - 4px) !important;
    }

        .PrjVideo .Renders:after {
            top: calc(50% - 27px);
            left: calc(50% - 27px);
            line-height: 54px;
            width: 54px;
            font-size: 21px;
            box-shadow: 0 0 10px 3px #000, inset 0 0 10px 2px #fff;
        }

    .PrjVideo .MorePrjVideo {
        height: 49px;
        cursor: pointer;
        width: 18%;
        position: relative;
        text-align: center;
        display: inline-block;
    }

        .PrjVideo .MorePrjVideo:before {
            font-family: "Font Awesome 6 Pro";
            content: "\f141";
            border-radius: 30px;
            border: 2px solid var(--WtColor);
            font-size: 25px;
            line-height: 45px;
            width: 49px;
            box-shadow: 0 0 4px, inset 0 0 7px;
            display: inline-block;
        }

.VideoIntro {
}

    .VideoIntro .VideoInfo {
        width: 35%;
        display: inline-block;
        font-size: 9px;
        direction: rtl;
        vertical-align: top;
        padding: 2px 0;
    }

        .VideoIntro .VideoInfo .CrewInfo {
            margin: 5px 0;
            text-align: right;
            white-space: pre;
            position: relative;
        }

            .VideoIntro .VideoInfo .CrewInfo img {
                width: 18px;
                height: 18px;
                border-radius: 100%;
                box-shadow: 0 0 1px 1px;
                position: absolute;
                right: 1px;
                top: 1px;
            }

            .VideoIntro .VideoInfo .CrewInfo span {
                line-height: 20px;
                padding-right: 26px;
            }

                .VideoIntro .VideoInfo .CrewInfo span:before {
                    font-family: "Font Awesome 6 Pro";
                    position: absolute;
                    right: 1px;
                    top: 1px;
                    line-height: 18px;
                    font-size: 18px;
                    text-align: center;
                    width: 18px;
                }

        .VideoIntro .VideoInfo .DesigDate {
        }

    .VideoIntro .Renders {
        width: calc(64% - 4px) !important;
        border-radius: 16px;
        box-shadow: none;
    }

        .VideoIntro .Renders[VideoSrc] img {
            filter: grayscale(0.3) blur(2.5px);
        }

.ChatBody .ChatIntro {
    height: 260px;
    box-shadow: 0 0 5px;
    border-radius: 16px;
    direction: rtl;
    opacity: 0.8;
    width: 220px;
    overflow: hidden;
    background: linear-gradient( 35deg, var(--ColorLt) 20%, var(--WtColor) 30% 80%, var(--ColorLt) 90%);
    background: linear-gradient( 35deg, var(--TransPr) 25%, #fff0 30% 80%, var(--TransPr) 75%);
    position: absolute;
    left: calc(50% - 110px);
    top: calc(50% - 10px);
    transition: 0.7s;
    backdrop-filter: blur(2px);
}

    .ChatBody .ChatIntro .IntroIcon {
        font-size: 75px;
        width: 100%;
        line-height: 140px;
        opacity: 0.8;
        color: var(--ColorVl);
        text-shadow: 0 0 2px var(--ColorBs), 0 0 2px var(--ColorBs), 0 0 6px var(--ColorBs);
        animation: HueRorate 10s infinite linear;
    }

    .ChatBody .ChatIntro .Text {
        font-size: 12px;
        display: inline-block;
        line-height: 20px;
        width: 88%;
        opacity: 0.8;
        text-align: justify;
        text-align-last: center;
    }

    .ChatBody .ChatIntro .Plan {
        position: absolute;
        bottom: 12px;
        font-size: 10.5px;
        cursor: pointer;
        line-height: 28px;
        width: 48%;
        left: 26%;
        opacity: 0.8;
    }

@-webkit-keyframes HueRorate {
    from {
        -webkit-filter: hue-rotate(0deg);
    }

    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

@media (max-height:550px) {
    .ChatBody .ChatIntro {
        top: -100vh;
    }
}

.Conection {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 18px 0 2px;
}

    .Conection img {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        border: 2px solid var(--WtColor);
        box-shadow: 0 0 4px 1px;
        cursor: pointer;
        display: inline-block;
        background: var(--WtColor);
    }

    .Conection .Mojri {
    }

    .Conection .cCode {
    }

    .Conection .Mngr {
        position: absolute;
        width: 30px;
        height: 30px;
        left: calc(50% - 15px);
        top: 7px;
        opacity: 0.7;
    }

    .Conection .Icon {
        display: inline-block;
        line-height: 30px;
        width: 60px;
        font-size: 22px;
        color: var(--WtColor);
        text-shadow: 0 0 2px var(--ColorBs), 0 0 3px var(--ColorBs), 0 0 4px var(--ColorBs);
        animation: Append 1.5s cubic-bezier(0, 0, 0.2, 1.5) forwards 1;
        cursor: pointer;
        margin-top: 25px;
    }

        .Conection .Icon:before {
            font-family: "Font Awesome 6 Pro";
        }

/* Vacationz CSS */
.SelectMojri .ShiftEyd {
    position: relative;
    display: inline-block;
    line-height: 30px;
    box-shadow: 0 0 2px 0.2px;
    font-size: 11px;
    text-align: center;
    border-radius: 5px;
    background: var(--GreenVl);
    color: var(--GreenBs);
    padding: 0 12px 0 35px;
    margin: 10px 5px 10px 20px;
    font-family: Sarbaz;
    font-weight: 500;
}

    .SelectMojri .ShiftEyd:after {
        font-family: "Font Awesome 6 Pro";
        content: "\f355";
        position: absolute;
        top: 0;
        left: 9px;
        font-size: 1.4em;
        animation: Blink 1.5s infinite;
    }

/*.SelectMojri .ShiftEyd + .UserDiv img {
        color: var(--GreenBs);
        box-shadow: 0 0 2px 1px;
        border-color: var(--GreenVl);
    }*/
/* Vacationz CSS */

.HintBox {
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 240px;
    position: absolute;
    background: linear-gradient(0, #000 20%, transparent 100%);
    display: inline-block;
    z-index: 20;
    user-select: none;
}

    .HintBox .HintBox {
        position: absolute;
        bottom: 25px;
        text-align: center;
        width: calc(100% - 50px);
        left: 25px;
        height: 150px;
        box-shadow: 0 0 30px 6px var(--BkColor);
        padding: 15px;
        border-radius: 15px;
        color: var(--GreenBs);
        background: linear-gradient(180deg, var(--GreenVl) 10%, var(--WtColor) 40%);
        transition: 1s;
        direction: rtl;
        white-space: break-spaces;
        border: 2px solid;
    }

        .HintBox .HintBox .xCrs {
            margin-top: 70px;
        }

        .HintBox .HintBox .CloseHint {
            padding: 4px 0 4px;
            cursor: pointer;
            position: absolute;
            right: 25px;
            top: -15px;
            font-size: 10px;
            color: var(--RedBs);
            background: var(--RedVl);
            padding: 0 20px;
            line-height: 32px;
            border-radius: 5px;
            box-shadow: 0 0 0 1px;
            cursor: no-drop;
        }

            .HintBox .HintBox .CloseHint:hover {
                background: var(--RedLt);
            }

    .HintBox .HintText {
        position: absolute;
        font-size: 10.5px;
        width: calc(100% - 140px);
        top: 30px;
        right: 20px;
        line-height: 20px;
        opacity: 0.7;
    }

    .HintBox .HintBox:before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        font-size: 75px;
        color: var(--GreenVl);
        text-shadow: 0 0 2px #000;
        position: absolute;
        left: 20px;
        top: -30px;
        z-index: 1;
        line-height: 80px;
        width: 80px;
        filter: drop-shadow(0 0 7px var(--GreenBs)) drop-shadow(0 0 3px #000);
        transition: 3.2s;
    }

    .HintBox .HintBox:hover:before {
        transform: rotate(-15deg);
    }

    .HintBox.Hide {
        bottom: -250px;
        opacity: 0;
    }

        .HintBox.Hide .HintBox {
            bottom: -250px;
            opacity: 0;
        }

            .HintBox.Hide .HintBox:before {
                left: -120px;
                opacity: 0;
            }

@media (min-width:768px) {
    .HintBox {
        left: 15px;
        bottom: 15px;
        border-radius: 30px;
        width: 400px;
        backdrop-filter: blur(2px);
        background: linear-gradient(0, var(--TransDk) 20%, transparent 100%);
    }
}

.MainFace .Trends {
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 12px;
    width: 105px;
    direction: rtl;
    line-height: 26px;
    border-top: 2px solid;
    border-bottom: 2px solid;
    padding: 0 5px;
    overflow: hidden;
    max-height: 30px;
}

    .MainFace .Trends .N {
        display: inline-block;
        width: 40%;
        font-size: 8px;
        vertical-align: top;
        white-space: pre;
    }

    .MainFace .Trends .P {
        display: inline-block;
        width: 60%;
        vertical-align: top;
        white-space: pre;
    }

        .MainFace .Trends .P:before {
            display: inline-block;
            content: attr(Ashar);
            font-size: 7.5px;
            direction: ltr;
            opacity: 0.4;
            padding-left: 1px;
            line-height: inherit;
            vertical-align: top;
        }

    .MainFace .Trends.Hide {
        max-height: 0;
        top: 33px;
        opacity: 0;
    }

/*******************Rajabi ITEMS 14010217*********************/

/*.ServerConnect {
    max-height: 60px;
    width: 90%;
    margin: 50px auto 40px;
    transition: 0.5s;
}

    .ServerConnect:before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f7c0";
        position: absolute;
        right: 0;
        top: 0;
        line-height: 60px;
        width: 60px;
        font-size: 28px;
        animation: Blink 1.5s infinite;
        text-shadow: 0 0 4px var(--OrangeBs), 0 0 10px var(--OrangeBs), 0 0 20px var(--OrangeBs);
        color: var(--OrangeLt);
    }

    .ServerConnect .Title {
        line-height: 44px;
        padding-bottom: 16px;
        font-size: 13px;
        padding-right: 45px;
        white-space: pre;
    }

    .ServerConnect .Text {
        line-height: 20px;
        font-size: 8px;
        position: absolute;
        left: 0;
        bottom: 5px;
        width: 100%;
        padding-right: 45px;
        opacity: 0.7;
    }

    .ServerConnect:hover {
        background: var(--OrangeLt);
    }

    .ServerConnect.Hide {
        max-height: 0px;
        box-shadow: unset;
        margin: 0 auto;
        opacity: 0;
    }*/

.ChromaKeyBox {
    width: calc(100% - 4px);
}

    .ChromaKeyBox:before {
        content: '';
        padding-top: 56.25%;
        position: relative;
        display: block;
        height: 0;
    }

    .ChromaKeyBox .ChromaKeyRender {
        transition: 0.7s;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }

    .ChromaKeyBox .DeleteChromaKey {
        position: absolute;
        font-size: 17px;
        left: 5px;
        top: 5px;
        line-height: 40px;
        width: 40px;
        animation: Append 1.2s forwards 1;
        color: var(--RedVl);
        text-shadow: 0 0 2px var(--RedBs), 0 0 10px var(--RedBs), 0 0 3px var(--RedBs);
        cursor: pointer;
    }

        .ChromaKeyBox .DeleteChromaKey:before {
            content: "\f2ed";
            font-family: "Font Awesome 6 Pro";
        }

        .ChromaKeyBox .DeleteChromaKey:hover:before {
            color: var(--RedLt);
            font-size: 21px;
        }

    .ChromaKeyBox .ChromaLogo {
        transition: 0.4s;
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 16%;
        max-width: 100px;
        filter: drop-shadow(0px 0px 3px #000);
        opacity: 0.5;
    }

    .ChromaKeyBox .BackLogo {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        padding: 20px;
        padding-right: 40%;
        filter: blur(5px) opacity(0.8);
    }

    .ChromaKeyBox.Blur {
    }

        .ChromaKeyBox.Blur .ChromaKeyRender {
            transition: 0.3s;
            filter: blur(40px) grayscale(1) brightness(0.6) opacity(0.92);
            transform: scale(1.7);
        }

        .ChromaKeyBox.Blur .ChromaLogo {
            transition: 0.3s;
            opacity: 1;
            width: 24%;
            max-width: 150px;
            right: 20px;
            bottom: 20px;
            filter: drop-shadow(0px 0px 10px #000);
        }

.RenderColors {
    width: 100%;
    margin: 0 0;
    direction: rtl;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 6px 12px 15px;
    text-align: right;
}

    .RenderColors .Colors {
        display: inline-block;
        vertical-align: top;
    }

        .RenderColors .Colors.Render {
            display: block;
            margin: 0 auto;
            direction: rtl;
            padding: 3px 0 3px 15px;
            max-height: 60px;
            max-width: 3000px;
        }

            .RenderColors .Colors.Render.Hide {
                max-height: 0;
                padding: 0 !important;
                overflow: hidden;
                max-width: 0;
            }

        .RenderColors .Colors .Title {
            font-size: 9px;
            display: inline-block;
            text-align: center;
            padding: 0 10px 0 20px;
            position: relative;
            line-height: 42px;
            width: 70px;
        }

        .RenderColors .Colors .Color {
            width: 65px;
            height: 42px;
            margin: 0 3px;
            border-radius: 3px 15px;
            box-shadow: 0 0 1.5px 0.6px;
            vertical-align: top;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            background: var(--Back);
            background-size: 200px 200px;
            display: inline-block;
        }

            .RenderColors .Colors .Color:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: linear-gradient(-30deg, #0000009e 0%, transparent 50%);
                right: 0;
                bottom: 0;
            }

            .RenderColors .Colors .Color.Selected:before {
                content: "\f00c";
                font-family: "Font Awesome 6 Pro";
                position: absolute;
                font-size: 16px;
                left: 8px;
                top: 3px;
                line-height: 20px;
                animation: Append 1.2s forwards 1;
                color: var(--WtColor);
                text-shadow: 0 0 2px var(--BkColor), 0 0 8px var(--BkColor);
            }

            .RenderColors .Colors .Color > span {
                position: absolute;
                right: 5px;
                bottom: 4px;
                font-size: 7.5px;
                text-align: center;
                text-shadow: 0 0 7px #000;
                color: var(--WtColor);
                line-height: 8px;
                pointer-events: none;
                z-index: 1;
            }

            .RenderColors .Colors .Color:hover span {
                bottom: 8px;
            }


        .RenderColors .Colors.Red {
            padding-top: 12px;
            display: inline-block;
        }

        .RenderColors .Colors.Silver {
            display: inline-block;
            padding-top: 12px;
        }

            .RenderColors .Colors.Silver .Color {
                width: 38px;
                height: 38px;
                border-radius: 50%;
            }

/*.RenderColors .Colors.Safhe .Color {
            margin-top: 12px;
        }*/

/*.SafheColors {
    width: 100%;
    margin: 0 0;
    direction: rtl;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 6px 12px;
    height: 68px;
}

    .SafheColors > span {
        vertical-align: top;
        line-height: 54px;
        font-size: 10px;
        display: inline-block;
        width: 60px;
        text-align: center;
        padding-left: 10px;
    }

    .SafheColors .Color {
        width: 65px;
        height: 44px;
        display: inline-block;
        margin: 6px 3px;
        border-radius: 5px 15px;
        box-shadow: 0 0 0 1px var(--WtColor), 0 0 3px 1px;
        vertical-align: top;
        position: relative;
        cursor: pointer;
    }

        .SafheColors .Color.Selected:before {
            content: "\f00c";
            font-family: "Font Awesome 6 Pro";
            position: absolute;
            font-size: 16px;
            left: 8px;
            top: 3px;
            line-height: 20px;
            animation: Append 1.2s forwards 1;
            color: var(--WtColor);
            text-shadow: 0 0 2px var(--BkColor), 0 0 8px var(--BkColor);
        }

        .SafheColors .Color span {
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 8px;
            text-align: center;
            text-shadow: 0 0 2px var(--BkColor), 0 0 8px var(--BkColor);
            color: var(--WtColor);
            line-height: 13px;
            padding: 0 4px;
            pointer-events: none;
        }

        .SafheColors .Color:hover span {
            bottom: 5px;
        }*/


.RainBox {
    width: 95%;
    margin: 0 auto;
    max-width: 320px;
    padding-top: 5px;
    position: relative;
}

    .RainBox .RainBow {
        margin-bottom: 70px;
        box-shadow: inset 0 0 3px 0.5px;
        background: linear-gradient(30deg, var(--ColorVl) 25%, #69d7ff 50%, var(--ColorVl) 75%, var(--WtColor));
        background-size: 350% 350%;
        background-position: center;
        animation: RaibowDance 6s ease 4, RotateHue 7s linear 10;
        overflow: unset;
        padding-left: 75px;
        height: 50px;
    }

        .RainBox .RainBow:after {
            content: attr(Footer);
            position: absolute;
            bottom: -26px;
            line-height: 22px;
            font-size: 9px;
            text-align: center;
            /* animation: Blink 4s infinite; */
            border-bottom: 2px solid;
            left: calc(65% - 80px);
            padding: 0 10px;
            white-space: pre;
            filter: opacity(0.75);
        }

        .RainBox .RainBow h1 {
            font-size: unset;
            line-height: 50px;
            white-space: pre;
        }

    .RainBox img {
        width: 115px;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 66px;
        transform: rotate(-40deg);
        pointer-events: none;
        z-index: 10;
    }

    .RainBox .ReadTitle {
        margin: 40px 15px 3px;
        animation: RotateHue 8s linear infinite;
    }

        .RainBox .ReadTitle:after {
            display: none;
        }

@keyframes RaibowDance {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.RainBowTitle {
    margin: 30px auto 60px;
    max-width: 450px;
}

    .RainBowTitle > * {
        /*animation: RotateHue 8s linear infinite;*/
    }

    .RainBowTitle > .ReadHr {
        border-top: 4px solid var(--ColorAlt);
        width: 55%;
    }

.RainBowB {
    width: 100%;
    margin: -120px -10px -65px;
    min-height: 300px;
}

.RainBowC {
    width: 82%;
    margin: -10px auto 10px;
    filter: drop-shadow(0 0 5px black) drop-shadow(0 0 2px black);
    min-height: 120px;
}

.RainBowD {
    width: 95%;
    margin: 60px auto 10px;
    filter: drop-shadow(0 0 4px black);
    min-height: 70px;
}

.RainBowATitle {
    position: absolute;
    width: 250px;
    left: -18px;
    margin-top: -50px;
    transform: rotate(-35deg);
    opacity: 0.7;
    z-index: -1;
}

.SingleCall {
}

    .SingleCall span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .SingleCall .Clock {
        font-size: 10px;
        max-width: 35px;
        padding: 0;
    }

    .SingleCall .Duration {
        flex-grow: 2.4;
        font-size: 12px;
        direction: ltr;
    }
/*.FullPage:before {
    content: '';
    background-image: url(../images/Theme/Haloween.png);
    position: absolute;
    width: 150px;
    height: 150px;
    left: 0;
    bottom: 0;
    z-index: 4;
    background-size: contain;
    opacity: 0.9;
}*/

.TagRow {
    line-height: 40px;
    font-size: 11px;
    width: calc(100% - 20px);
    display: inline-block;
    height: 50px;
    margin: 5px 10px 0;
    padding: 5px 0;
    direction: rtl;
    cursor: pointer;
    position: relative;
}

    .TagRow + .TagRow {
        border-top: 1px solid var(--ColorLt);
    }

    .TagRow .Ax {
        display: inline-block;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: 0 0 2px 1px;
    }

        .TagRow .Ax.cCode {
        }

        .TagRow .Ax.Tager {
            width: 20px;
            height: 20px;
            box-shadow: 0 0 1px 1px;
        }

    .TagRow .Icons {
        font-size: 1.35em;
        font-family: "Font Awesome 6 Pro";
        display: inline-block;
        width: 30px;
        vertical-align: middle;
    }

    .TagRow .tText {
        display: inline-block;
        width: calc(100% - 90px);
        margin-left: 10px;
        padding: 0 12px 0 0;
        text-align: right;
        opacity: 0.95;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .TagRow .cDate {
        display: inline-block;
        font-size: 0.7em;
        opacity: 0.6;
        text-align: left;
        white-space: pre;
        position: absolute;
        left: 27px;
        bottom: 4px;
        line-height: 14px;
    }

    .TagRow.Mini {
        width: 50%;
        margin: 0 0 0;
        border: none;
        line-height: 30px;
        height: 40px;
        font-size: 10.5px;
    }

        .TagRow.Mini .tText {
            width: calc(100% - 70px);
            padding-right: 2px;
        }

        .TagRow.Mini .cDate {
            bottom: 2px;
            left: 26px;
            font-size: 0.65em;
        }


    .TagRow:hover {
    }

        .TagRow:hover .Icons {
            transform: rotate(14deg);
        }

        .TagRow:hover .Tager {
            transform: rotate(17deg);
        }

        .TagRow:hover .cCode {
            transform: rotate(-17deg);
        }

        .TagRow:hover .tText {
            padding-right: 22px;
            opacity: 1;
        }


        .TagRow:hover .cDate {
            opacity: 0.9;
            left: 34px;
        }

    .TagRow.Mini:hover .tText {
        padding-right: 7px;
    }

    .TagRow[tType="3"] {
        color: color-mix(in srgb, var(--ColorBs),#fff 70%);
    }


.Stepz {
    height: 80px;
    font-size: 9px;
    line-height: 50px;
    padding: 15px 10px;
    display: flex;
    justify-content: space-around;
    direction: rtl;
    cursor: pointer;
    margin: 45px 0 40px;
    user-select: none;
}

    .Stepz.Mini {
        margin: 35px 0 5px;
    }

    .Stepz:before {
        content: '';
        width: calc(100% - 34px);
        height: 6px;
        background: var(--ColorBs);
        opacity: 0.6;
        border-radius: 3px;
        position: absolute;
        left: 17px;
        top: 25px;
        z-index: -1;
    }

    .Stepz .Step {
        display: inline-flex;
        position: relative;
        min-width: 45px;
        justify-content: center;
        flex-grow: 1;
    }

        .Stepz .Step:before {
            content: '';
            width: 20px;
            height: 20px;
            position: absolute;
            background: var(--WtColor);
            border-radius: 50%;
            top: 3px;
            border: 3px solid var(--ColorBs);
            box-shadow: 0 0 0 3px var(--WtColor);
        }

        .Stepz .Step > span {
            position: absolute;
            line-height: 20px;
            width: 100%;
            left: 0;
            bottom: 0;
            white-space: pre;
        }

        /*.Stepz .Step h5 {
            position: absolute;
            line-height: 12px;
            width: 100%;
            left: 0;
            bottom: 55px;
            white-space: pre;
            font-size: 7.5px;
        }*/

        .Stepz .Step h4 {
            position: absolute;
            line-height: 20px;
            width: 55px;
            bottom: 60px;
            white-space: pre;
            font-size: 11px;
            background: var(--ColorBs);
            color: var(--WtColor);
            border-radius: 10px;
            opacity: 0.8;
            text-shadow: 0 0 7px var(--BkColor);
            padding-top: 14px;
        }

            .Stepz .Step h4:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -7px;
                border-width: 7px;
                border-style: solid;
                border-color: var(--ColorBs) #0000 #0000 #0000;
            }

            .Stepz .Step h4 > span {
                position: absolute;
                line-height: 17px;
                width: 100%;
                left: 0;
                top: 0;
                font-size: 7px;
            }

        .Stepz .Step.Done {
            --ColorBs: var(--GreenBs);
            --ColorVl: var(--GreenVl);
            --ColorLt: var(--GreenLt);
            color: var(--ColorBs);
        }

            .Stepz .Step.Done:before {
                border-radius: 6px;
            }

            .Stepz .Step.Done:after {
                content: "\f00c";
                font-family: "Font Awesome 6 Pro";
                font-size: 20px;
                position: absolute;
                top: 2px;
                width: 20px;
                line-height: 20px;
                margin-left: 6px;
                -webkit-text-stroke: 3px var(--WtColor);
                paint-order: stroke fill;
            }

        .Stepz .Step.Working {
        }

            .Stepz .Step.Working:before {
                width: 12px;
                height: 12px;
                top: 8px;
                /* animation: Blink 1.4s infinite; */
                border: none;
                background: currentColor;
            }

            .Stepz .Step.Working:after {
                content: '';
                width: 24px;
                height: 24px;
                position: absolute;
                background: unset;
                border-radius: 50%;
                top: 2px;
                border: 3px solid #fff0;
                border-top: 3px solid var(--ColorBs);
                border-right: 3px solid var(--ColorBs);
                animation: D360 1.5s linear infinite;
            }

        .Stepz .Step.Schedule {
            /* --ColorBs: var(--GreenBs); */
            /* --ColorVl: var(--GreenVl); */
            /* --ColorLt: var(--GreenLt); */
            /* color: var(--ColorBs); */
        }

            .Stepz .Step.Schedule:before {
                /* border-radius: 6px; */
            }

        .Stepz .Step.Delete {
            --ColorBs: var(--RedBs);
            --ColorVl: var(--RedBs);
            --ColorLt: var(--RedBs);
            color: var(--ColorBs);
        }

            .Stepz .Step.Delete:before {
                display: none;
            }

            .Stepz .Step.Delete:after {
                content: "\f00d";
                font-family: "Font Awesome 6 Pro";
                font-size: 26px;
                position: absolute;
                top: 3px;
                width: 20px;
                line-height: 20px;
                text-shadow: 0 0 3px var(--WtColor), 0 0 3px var(--WtColor), 0 0 3px var(--WtColor), 0 0 3px var(--WtColor), 0 0 3px var(--WtColor);
            }

        .Stepz .Step.Mini {
            flex-grow: 0.3;
            min-width: unset;
        }

            .Stepz .Step.Mini span {
                display: none;
            }

            .Stepz .Step.Mini:before {
                width: 15px;
                height: 15px;
                top: 7px;
                border: none;
                border-radius: 10px;
                background: currentColor;
                opacity: 0.75;
            }

            .Stepz .Step.Mini:after {
                font-size: 9px;
                margin-left: 0;
                top: 4.5px;
                color: var(--WtColor);
                -webkit-text-stroke: unset;
            }

        .Stepz .Step:hover {
            z-index: 1;
        }

            .Stepz .Step:hover span {
                bottom: 2px;
                /*transform: scale(1.15);*/
            }

            .Stepz .Step:hover:before {
                transform: scale(1.1);
            }

            .Stepz .Step:hover:after {
                transform: scale(1.3) rotate(-7deg);
            }

    .Stepz .Footer {
        position: absolute;
        bottom: -25px;
        line-height: 25px;
        border-top: 1.5px solid;
        font-size: 9.5px;
        opacity: 0.75;
        padding: 0 12px;
    }

        .Stepz .Footer:hover {
            /* padding: 0 20px; */
            opacity: 1;
        }

    .Stepz .AddStep {
        width: 22px;
        line-height: 22px;
        height: 22px;
        border-radius: 20px;
        background: currentColor;
        font-size: 13px;
        cursor: cell;
        display: inline-flex;
        position: relative;
        justify-content: center;
        margin: 3px 6px 0 10px;
        box-shadow: 0 0 0 3px var(--WtColor);
    }

        .Stepz .AddStep:before {
            font-family: "Font Awesome 6 Pro";
            content: "\2b";
            color: var(--WtColor);
        }

        .Stepz .AddStep:hover {
        }

            .Stepz .AddStep:hover:before {
                transform: rotate(-15deg);
            }

.ChatTitle .FadeTitle .Stepz {
    margin: 20px 0 20px;
}

    .ChatTitle .FadeTitle .Stepz:before {
        top: 46px;
    }

    .ChatTitle .FadeTitle .Stepz .Footer {
        bottom: 0px;
    }

.LoadBtn {
    display: inline-block;
    width: calc(25% - 10px);
    line-height: 40px;
    font-size: 11px;
    box-shadow: 0 0 2px;
    border-radius: 6px;
    margin: 0 2.5px;
    background: var(--ColorL3);
    cursor: pointer;
    direction: rtl;
}

    .LoadBtn:hover {
        background: var(--ColorL4);
    }

/*  **********  */
/*  Accounting  */

.AddCostBox {
    padding: 35px 2% 2px;
    width: 100%;
    direction: rtl;
    font-size: 14px;
    line-height: 52px;
    text-align: center;
}

.AddCost {
    width: calc(50% - 10px);
    height: 80px;
    margin: 5px;
    padding: 0 0 20px 50px;
    border-radius: var(--CrsBorder);
    box-shadow: var(--CrsBoxShadow);
    background: var(--ColorVl);
    display: inline-block;
    position: relative;
    cursor: pointer;
}

    .AddCost:before {
        width: 55px;
        content: "\f067";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        font-size: 26px;
        left: 0;
        top: 0;
        color: var(--WtColor);
        text-shadow: 0 0 4px var(--ColorBs), 0 0 10px var(--ColorBs);
        opacity: 0.6;
    }

    .AddCost h6 {
        position: absolute;
        font-size: 9.5px;
        width: 64%;
        left: 18%;
        bottom: 2px;
        line-height: 22px;
        opacity: 0.6;
        border-top: 1px solid;
    }

    .AddCost:hover {
        background: var(--ColorLt);
    }

        .AddCost:hover:before {
            transform: scale(1.2) rotate(-7deg);
        }

    .AddCost.Kharj:before {
        content: "\f056";
    }

    .AddCost.Dryft:before {
        content: "\f055";
    }

.ChartAccounting {
    height: 240px;
    width: 100%;
    padding: 35px 0 20px;
}

    .ChartAccounting .ChartNum {
        position: relative;
        display: inline-block;
        /*filter: drop-shadow(0 0 5px #000);*/
    }

.SoodPrcnt {
    line-height: 70px;
    position: absolute;
    width: 70px;
    left: calc(50% - 35px);
    text-align: center;
    top: 252px;
    font-size: 22px;
    font-family: 'Sarbaz';
    color: var(--WtColor);
    paint-order: stroke fill;
    animation: Append 2s ease forwards 1;
    direction: ltr;
}

    .SoodPrcnt:before {
        content: '%';
        position: absolute;
        z-index: -1;
        font-size: 55px;
        opacity: 0.2;
        width: 100%;
        left: 0;
        top: 0;
    }

    .SoodPrcnt.ColorOrange {
        text-shadow: 0 0 6px var(--OrangeBs), 0 0 8px var(--OrangeBs);
        -webkit-text-stroke: 2px var(--OrangeBs);
    }

        .SoodPrcnt.ColorOrange:before {
            text-shadow: 0 0 4px var(--OrangeBs), 0 0 6px var(--OrangeBs), 0 0 8px var(--OrangeBs);
        }

    .SoodPrcnt.ColorGreen {
        text-shadow: 0 0 6px var(--GreenBs), 0 0 8px var(--GreenBs);
        -webkit-text-stroke: 2px var(--GreenBs);
    }

        .SoodPrcnt.ColorGreen:before {
            text-shadow: 0 0 4px var(--GreenBs), 0 0 6px var(--GreenBs), 0 0 8px var(--GreenBs);
        }

.AccBenefit {
    line-height: 50px;
    display: inline-flex;
    width: 60%;
    border-top: 2px solid;
    border-bottom: 2px solid;
    margin: 20px auto;
    font-size: 13px;
    cursor: pointer;
    justify-content: center;
    direction: rtl;
}

    .AccBenefit .Total {
        direction: ltr;
        display: inline-block;
        padding: 0 6px;
        font-size: 16px;
    }

.SumCostBox {
    padding: 2px 2%;
    width: 100%;
    text-align: center;
    direction: rtl;
    font-size: 9.5px;
    line-height: 24px;
}

.SumCost {
    width: calc(50% - 60px);
    margin: 0 30px;
    display: inline-flex;
    position: relative;
    cursor: pointer;
    border-bottom: 2px solid;
    justify-content: center;
}

    .SumCost h6 {
        font-size: 11px;
        padding: 0 4px;
        display: inline-block;
    }

.ChartAccountingYearRepo {
    height: 250px;
}

.Marasem {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, var(--ColorL3) 10%, var(--WtColor) 50%);
    z-index: 12000;
    left: 0;
    top: 0;
    text-align: center;
    font-family: 'Sarbaz';
    direction: rtl;
    user-select: none;
    transition: 0.2s;
}

    .Marasem > * {
        transition: 0.55s;
    }

    .Marasem .Logo {
        /*left: calc(50% - 130px);*/
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: calc(50% - 270px);
        max-width: 250px;
        max-height: 250px;
        transition-delay: 0.1s;
    }

    .Marasem .Title {
        line-height: 50px;
        position: absolute;
        width: 100%;
        left: 0;
        top: calc(50% + 30px);
        font-size: 28px;
        white-space: pre;
        transition-delay: 0.5s;
    }

    .Marasem .Text {
        line-height: 30px;
        position: absolute;
        width: 200px;
        left: calc(50% - 100px);
        top: calc(50% + 110px);
        font-size: 12px;
        opacity: 0.75;
        border-top: 2px solid;
        /* border-bottom: 2px solid; */
        padding: 15px 10px 10px;
        transition-delay: 0.9s;
    }

    .Marasem:after, .Marasem:before {
        content: '';
        width: calc(100% - 80px);
        height: 9px;
        position: absolute;
        background: var(--ColorLt);
        left: 40px;
        box-shadow: inset 0 0 3px 0px var(--ColorBs);
        border-radius: 5px;
        transition: 0.8s;
    }

    .Marasem:after {
        top: 30px;
        transition-delay: 1.3s;
    }

    .Marasem:before {
        bottom: 35px;
        transition-delay: 1.3s;
    }

    .Marasem .Footer {
        font-size: 8.5px;
        position: absolute;
        width: 100%;
        bottom: 14px;
        opacity: 0.6;
        transition-delay: 1.3s;
    }

    .Marasem.Hide {
        opacity: 0;
        transition: 0.7s;
        transition-delay: 1.1s;
    }

        .Marasem.Hide > * {
            opacity: 0;
        }

        .Marasem.Hide .Logo {
            transform: translate(-50%, -40%) scale(0.6);
            transition-delay: 0.5s;
        }

        .Marasem.Hide .Title {
            margin-top: 70px;
            transform: scale(0.7);
            transition-delay: 0.75s;
        }

        .Marasem.Hide .Text {
            margin-top: 130px;
            transition-delay: 0.25s;
        }

        .Marasem.Hide .Footer {
            bottom: -40px;
            transition-delay: 0s;
        }

        .Marasem.Hide:after {
            margin-left: 100%;
            transition-delay: 0s;
        }

        .Marasem.Hide:before {
            margin-left: -100%;
            transition-delay: 0s;
        }

@media only screen and (max-height: 600px) {
    .Marasem .Logo {
        left: calc(25%);
        top: calc(50% - 130px);
    }

    .Marasem .Title {
        left: 45%;
        width: 50%;
        top: calc(50% - 70px);
    }

    .Marasem .Text {
        left: calc(70% - 100px);
        top: calc(50% + 10px);
    }
}

.TargetBar {
    width: 75%;
    margin: 70px 20% 20px 5%;
    height: 2px;
    position: relative;
    cursor: pointer;
    height: 50px;
}

    .TargetBar:after {
        content: '';
        position: absolute;
        height: 6px;
        background: var(--ColorBs);
        top: 22px;
        width: 2px;
        left: -2px;
    }

    .TargetBar:after {
    }

    .TargetBar:before {
        content: '';
        right: 0;
        top: 24px;
        background: var(--ColorBs);
        width: 100%;
        height: 2px;
        position: absolute;
        cursor: pointer;
    }

    .TargetBar .MyGoal {
        position: absolute;
        width: 40px;
        line-height: 20px;
        height: 20px;
        top: 38px;
        font-size: 37px;
        margin-right: -20px;
        z-index: 1;
    }

        .TargetBar .MyGoal.R {
            color: var(--RedBs);
        }

        .TargetBar .MyGoal.G {
            color: var(--GreenBs);
        }

        .TargetBar .MyGoal:before {
            font-family: "Font Awesome 6 Pro";
            content: "\f0d8";
        }

        .TargetBar .MyGoal:after {
            /*content: attr(goal) '%';*/
            content: attr(goal);
            font-size: 11px;
            white-space: pre;
            direction: ltr;
            position: absolute;
            line-height: 14px;
            bottom: -10px;
            left: 0;
            font-family: sarbaz;
            width: 100%;
            text-align: center;
        }

        .TargetBar .MyGoal.Av {
            font-size: 29px;
            /*color: var(--PurpleBs);*/
            opacity: 0;
            top: 50px;
            z-index: 2;
            transition-delay: 0s;
        }

            .TargetBar .MyGoal.Av:after {
                content: 'Av   ' attr(goal);
                font-size: 8px;
                bottom: -8px;
            }

        .TargetBar .MyGoal.Ps {
            font-size: 29px;
            /*color: var(--PurpleBs);*/
            opacity: 0;
            top: 50px;
            z-index: 2;
            transition-delay: 0s;
        }

            .TargetBar .MyGoal.Ps:after {
                content: 'Ps   ' attr(goal);
                font-size: 8px;
                bottom: -8px;
            }

        .TargetBar .MyGoal.RD {
            transform: rotate(-25deg);
            transform-origin: top center;
        }

        .TargetBar .MyGoal.LD {
            transform: rotate(25deg);
            transform-origin: top center;
        }

    .TargetBar .BestGl {
        top: -12px;
        right: 0;
        width: 40px;
        height: 35px;
        text-align: center;
        position: absolute;
        display: inline-block;
        margin-right: -20px;
        z-index: 10000;
        color: var(--PurpleBs);
    }

        .TargetBar .BestGl img {
            width: 20px;
            border-radius: 50%;
            position: absolute;
            left: 10px;
            box-shadow: 0 0 2px 2.5px;
            top: -15px;
            opacity: 0;
            transition-delay: 0s;
        }

        .TargetBar .BestGl:before {
            font-size: 17px;
            transition-delay: 0s;
            font-family: "Font Awesome 6 Pro";
            content: "\f0d7";
            position: absolute;
            left: 0;
            width: 100%;
            top: 5px;
            line-height: 15px;
            opacity: 0;
            transition-delay: 0s;
        }

        .TargetBar .BestGl:after {
            content: 'Best   ' attr(goal);
            font-size: 7.5px;
            white-space: pre;
            direction: ltr;
            position: absolute;
            line-height: 14px;
            top: -25px;
            left: 0;
            font-family: sarbaz;
            width: 100%;
            text-align: center;
            opacity: 0;
            transition-delay: 0s;
        }

        .TargetBar .BestGl.Khodesh {
            color: var(--ColorBs);
        }

            .TargetBar .BestGl.Khodesh img {
                width: 16px;
                left: 12px;
                box-shadow: 0 0 2px 2px;
            }

            .TargetBar .BestGl.Khodesh:after,
            .TargetBar .BestGl.Khodesh:before {
                display: none;
            }

    .TargetBar .MyTrgt[Goal] {
        position: absolute;
        line-height: 10px;
        margin-right: -4px;
        height: 8px;
        background: currentColor;
        top: 21px;
        width: 8px;
        border-radius: 5px;
    }

        .TargetBar .MyTrgt[Goal].R {
            color: var(--RedBs);
        }

        .TargetBar .MyTrgt[Goal]:before {
            content: attr(goal);
            /* content: attr(goal) '% (' attr(Txt) ')'; */
            font-size: 9px;
            white-space: pre;
            direction: ltr;
            transform: rotate(-90deg);
            position: absolute;
            line-height: 10px;
            bottom: 22px;
            left: -8.5px;
            font-family: sarbaz;
            width: 25px;
            text-align: left;
        }

    .TargetBar .Emtiaz {
        width: 44px;
        line-height: 38px;
        box-shadow: 0 0 3px var(--ColorBs);
        border-radius: 50%;
        border: 2px solid var(--WtColor);
        color: var(--WtColor);
        position: absolute;
        right: -58px;
        top: -7px;
        background: var(--ColorBs);
        font-size: 13px;
        font-family: 'Sarbaz';
        padding: 2px 3px 0 0;
        text-shadow: 0 0 7px #000;
    }

    .TargetBar .Title {
        position: absolute;
        font-size: 9.5px;
        right: -66px;
        top: -30px;
        white-space: pre;
        font-family: Sarbaz;
        line-height: 20px;
        opacity: 0.9;
        width: 60px;
    }

    .TargetBar:hover {
    }

        .TargetBar:hover .Emtiaz {
            transform: scale(1.08) rotate(-8deg);
        }

        .TargetBar:hover .MyGoal:Not(.Av):Not(.Ps) {
            top: -8px;
            transform: rotate(-180deg);
        }

            .TargetBar:hover .MyGoal:Not(.Av):Not(.Ps):after {
                transform: rotate(180deg);
            }

        .TargetBar:hover .MyGoal.Av {
            top: 35px;
            opacity: 0.8;
            transition-delay: 0.2s;
        }

        .TargetBar:hover .MyGoal.Ps {
            top: 35px;
            opacity: 0.8;
            transition-delay: 0.5s;
        }

        .TargetBar:hover .Title {
            /*transform: scale(1.1);*/
            opacity: 1;
            top: -33px;
        }

        .TargetBar:hover .MyTrgt:before {
            opacity: 0.1;
        }

        .TargetBar:hover .BestGl {
        }

            .TargetBar:hover .BestGl img {
                opacity: 1;
                top: 0px;
                transition-delay: 1.4s;
            }

            .TargetBar:hover .BestGl:before {
                opacity: 1;
                top: 20px;
                transition-delay: 1.2s;
            }

            .TargetBar:hover .BestGl:after {
                opacity: 1;
                top: -15px;
                transition-delay: 1.6s;
            }

            .TargetBar:hover .BestGl.Khodesh img {
                top: 29px;
            }
/* Yalda */
/*.newProj {
    background: linear-gradient(0, var(--RedLt) -50%, var(--WtColor) 60%);
    overflow: unset;
}

    .newProj h2 {
        color: var(--RedBs);
        padding-right: 80px;
    }

    .newProj:after {
        color: var(--RedBs);
        background: url('../images/Theme/AnarYalda.png') no-repeat;
        background-size: contain;
        content: "";
        width: 85px;
        height: 75px;
        animation: unset;
        right: 10px;
        bottom: -11px;
    }

.MainFace {
    background: linear-gradient(225deg, var(--RedBs) -100%, var(--RedVl) 20%, var(--RedVl) 80%, var(--RedBs) 200%);
    box-shadow: 0 0 0 1px var(--ColorBs), 0 0 12px 6px var(--ColorBs);
}

    .MainFace:before {
        content: unset;
    }

    .MainFace .FaceMenu .FaceItem {
        color: var(--RedBs) !important;
    }

.DanceBack:after {
    background: linear-gradient(0, var(--RedBs) 42%, var(--RedLt) 47%, var(--WtColor) 52%);
}

.MainFace .TopItem2,
.MainFace .TopIMG,
.MainFace .MyName,
.MainFace .MyBank {
    color: var(--RedBs);
}
*/
/* Christmas */
/*.newProj {
    overflow: unset;
}

    .newProj h2 {
        padding-right: 60px;
    }

    .newProj:after {
        background: url(../images/Theme/Christmas/Santa.png?v=1) no-repeat;
        background-size: contain;
        content: "";
        width: 60px;
        height: 60px;
        animation: unset;
        right: 10px;
        bottom: -4px;
        filter: drop-shadow(0 0 2px #000);
        transform: rotate(-4deg);
    }

.MojMenu .SelfImg[src*="Santa.png"] {
    box-shadow: unset;
    background: unset;
    border-radius: unset;
}

@media (min-width:1300px) {
    .MojMenu .SelfImg[src*="Santa.png"] {
        width: 110px;
        height: 110px;
        margin: 10px auto 5px;
    }
}*/
/*.MainFace {
    background: linear-gradient(225deg, var(--RedBs) -100%, var(--RedVl) 20%, var(--RedVl) 80%, var(--RedBs) 200%);
    box-shadow: 0 0 0 1px var(--ColorBs), 0 0 12px 6px var(--ColorBs);
}

    .MainFace:before {
        content: unset;
    }

    .MainFace .FaceMenu .FaceItem {
        color: var(--RedBs) !important;
    }

.DanceBack:after {
    background: linear-gradient(0, var(--RedBs) 42%, var(--RedLt) 47%, var(--WtColor) 52%);
}

.MainFace .TopItem2,
.MainFace .TopIMG,
.MainFace .MyName,
.MainFace .MyBank {
    color: var(--RedBs);
}*/

.NewMob {
    width: 82%;
    margin: 50px auto 80px;
    box-shadow: 0 0 2px;
    border-radius: 6px;
    padding: 7px 3px 7px;
    background: var(--ColorVl);
    border: 2px solid var(--WtColor);
    max-width: 280px;
}

    .NewMob .ReadText {
        padding: 0;
        white-space: pre;
        font-size: 10px;
        line-height: 40px;
    }

    /*.NewMob .ReadText.Small {
            font-size: 8px;
            opacity: 0.7;
        }*/

    .NewMob .DisBtn {
        border-bottom: 0;
        margin: 5px auto;
        color: var(--GreenBs);
        box-shadow: 0 0 2px;
        border-radius: 7px;
        background: var(--GreenVl);
        width: 90%;
        background: var(--BgTrust);
        text-shadow: 0 0 4px var(--WtColor), 0 0 6px var(--WtColor), 0 0 8px var(--WtColor), 0 0 10px var(--WtColor);
    }


/*.EidyBede {
    width: 68%;
    margin: 50px 16% 70px;
    box-shadow: 0 0 3px 0px var(--ColorBs), inset 0 0 3px -1px var(--ColorBs);
    border-radius: 10px;
    background: var(--GreenVl);
    border: 2px solid var(--WtColor);
    direction: rtl;
    user-select: none;
    color: var(--GreenBs);
    background: linear-gradient(30deg, var(--WtColor) 25%, var(--OrangeLt) 60%, var(--OrangeLt) 75%, var(--WtColor) 90%);
    height: 70px;
    font-family: 'Sarbaz';
    transition: 0.5s;
    transition-delay: 0.5s;
}

    .EidyBede .Txt {
        line-height: 30px;
        font-size: 12px;
        color: var(--ColorBs);
        white-space: pre;
        position: absolute;
        width: 100%;
        top: 8px;
        text-shadow: 0 0 4px var(--WtColor), 0 0 5px var(--WtColor), 0 0 6px var(--WtColor);
        right: 0;
        transition: 0.5s;
        transition-delay: 1.2s;
    }

    .EidyBede .Btn {
        width: 100px;
        padding-right: 5px;
        box-shadow: 0 0 3px 0px, inset 0 0 3px -1px;
        line-height: 31px;
        border-radius: 5px;
        border: 1px solid var(--WtColor);
        font-size: 11px;
        background: linear-gradient(30deg, var(--GreenVl), var(--GreenLt) 25%, var(--GreenVl) 65%, var(--WtColor));
        position: absolute;
        left: 32px;
        bottom: -12px;
        text-shadow: 0 0 4px var(--WtColor), 0 0 5px var(--WtColor), 0 0 6px var(--WtColor);
        white-space: pre;
        transition: 0.5s;
        transition-delay: 1.9s;
    }

    .EidyBede .Img {
        width: 39px;
        position: absolute;
        left: 150px;
        bottom: -16px;
        filter: drop-shadow(0 0 2px var(--OrangeBs)) drop-shadow(0 0 3px var(--OrangeBs)) drop-shadow(0 0 7px var(--OrangeBs));
        transition: 0.5s;
        transition-delay: 2.6s;
        display: none;
    }

    .EidyBede.Hide {
        opacity: 0;
        margin: 0 24% 0 0;
    }

        .EidyBede.Hide .Txt {
            opacity: 0;
            right: -50px;
        }

        .EidyBede.Hide .Btn {
            opacity: 0;
            left: -30px;
        }

        .EidyBede.Hide .Img {
            opacity: 0;
            bottom: -40px;
        }

.newProj {
    overflow: unset;
}

    .newProj h2 {
        padding-right: 60px;
    }

    .newProj:after {
        background: url(../images/Theme/Eid1402.png?v=1) no-repeat;
        background-size: contain;
        content: "";
        width: 50px;
        height: 57px;
        animation: unset;
        right: 24px;
        bottom: -9px;
        filter: drop-shadow(0 0 3px #000);
    }*/


.RefreshProjs {
}

    .RefreshProjs.Loading {
        opacity: 1 !important;
    }

        .RefreshProjs.Loading:after {
            display: none !important;
        }

        .RefreshProjs.Loading:before {
            animation: D360 1.5s linear infinite !important;
        }