.NewGraphic {
    display: inline-block;
    border-radius: 10px;
    width: 74%;
    max-width: 100%;
    height: 50px;
    padding: 0;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    left: 13%;
    top: 178px;
    box-shadow: 0 0 7px -3px;
    background: linear-gradient( 0, #ff96f2 -40%, var(--WtColor) 60%);
    color: #63166c;
    animation: Append 0.8s ease forwards 1;
}

    .NewGraphic:after {
        position: absolute;
        right: 15px;
        font-size: 35px;
        bottom: 0;
        line-height: 50px;
        width: 50px;
        content: "\f067";
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        animation: PlusBold 22s forwards ease-in-out infinite 1s;
    }

    .NewGraphic h2 {
        line-height: 50px;
        font-size: 18px;
        width: 100%;
        padding: 0 40px 0 0;
        font-weight: 900;
    }

    .NewGraphic.NewGraphicADD {
        direction: rtl;
        height: auto;
        border-radius: 10px;
        width: 96%;
        margin: 2px auto;
        max-height: calc(100vh - 80px);
        overflow: auto;
        left: 2%;
        top: 60px;
        background: var(--BgColor);
        box-shadow: 0 0 5px 2px;
        padding: 8px;
    }

        .NewGraphic.NewGraphicADD > span {
            display: block;
        }

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

        .NewGraphic.NewGraphicADD > h2, .NewGraphicADD:after {
            display: none;
        }

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

    .GraphBtn.PayedG {
    }

    .GraphBtn.DoneG {
    }

    .GraphBtn .TitleDivder {
        float: right;
        padding: 0 10px 0 0;
        top: 0;
        position: relative;
        line-height: 50px;
        white-space: pre;
    }

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

        .GraphBtn .NameDivder .GraphDate {
            left: 10px;
            top: 12px;
            font-size: 8.5px;
            display: inline;
            position: relative;
            opacity: 0.6;
        }

        .GraphBtn .NameDivder .Price {
            line-height: 32px;
            font-family: BComic;
            font-size: 12px;
            width: 60px;
            border-radius: 20px;
            width: 40px;
        }

    .GraphBtn .AvatarDivider {
        float: right;
        position: relative;
        line-height: 50px;
        right: 7px;
    }
        .GraphBtn .AvatarDivider span {
            padding: 0 5px;
            line-height: 50px;
            display: inline-block;
            vertical-align: top;
        }
    .GraphBtn .GraphicEdit {
        width: 100%;
        position: absolute;
        text-align: center;
        left: 0;
        line-height: 30px;
        top: 50px;
        display: flex;
        justify-content: center;
    }

        .GraphBtn .GraphicEdit .DeliBtn {
            position: relative;
            width: 8%;
            margin: 0 3%;
            display: inline-block;
            font-size: 11px;
            line-height: 40px;
            vertical-align: middle;
            cursor: cell;
        }

            .GraphBtn .GraphicEdit .DeliBtn:before {
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                font-size: 15px;
                padding: 0 4px;
                vertical-align: middle;
            }
    .GraphBtn .UserAvatar {
        margin: 0 2px;
    }

    .GraphBtn .Btn {
        color: unset;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        border: 2px solid #ffffff;
        border: 2px solid var(--WtColor);
        font-size: 16px;
        line-height: 36px;
        margin: 0 2px;
        box-shadow: 0 0 4px, inset 0 0 7px;
        color: unset;
        position: relative;
        vertical-align: middle;
    }

        .GraphBtn .Btn:hover {
            transform: scale(1.1);
        }
.FaceMini .MainFace .AddNewGraphic,
.FaceMini .MainFace .GraphBack {
    opacity: 0;
    margin-top: -80px;
    pointer-events: none;
}


.GraphFace {
    /*background: linear-gradient( 30deg, #fbbaff 15%, var(--TransPr) 30% 70%, #fbbaff 85%);*/
    /*color: #63166c;*/
    --ColorBs: var(--PurpleBs);
    --ColorLt: var(--PurpleLt);
    --ColorVl: var(--PurpleVl);
}
    .GraphFace .GraphBack {
        width: 80%;
        position: absolute;
        left: 10%;
        top: 90px;
        animation: Append 1.4s ease forwards 1;
    }
    .GraphFace .MojriGraphBack {
        width: 80%;
        animation: Append 1.4s ease forwards 1;
        margin: 50px auto;
    }
/*.GraphProjList {
    --ColorBs: #760c8e;
    --ColorMid: #a234ad;
    --ColorAlt: #ce0098;
    --ColorLt: #f8d7fd;
    --ColorVl: #fcecff;
    color: var(--ColorBs);
    --OrangeBs: #005c54;
    --OrangeVl: #eafeff;
    --OrangeLt: #c3fffd;
}*/