#SmsClubModal{
    padding-left:0;
}
.number-input {
    font-size: 20px;
    color: var(--theme-color);
    font-weight: 600;
}

input.number-input {
    width: 100%;
    height: 55px;
    line-height: 55px;
    text-align: center;
    padding: 0 20px;
    border-radius: 10px;
    border: 0;
    -webkit-box-shadow: 0px 0px 17px -1px rgba(132, 132, 132, 0.15);
    -moz-box-shadow: 0px 0px 17px -1px rgba(132, 132, 132, 0.15);
    box-shadow: 0px 0px 17px -1px rgba(132, 132, 132, 0.15);
}

.wrapper {
    width: 100%;
}

    .wrapper .phone {
        margin: auto;
        position: relative;
    }

        .wrapper .phone span.title {
            font-weight: 700;
            letter-spacing: 0;
            display: block;
            text-align: center;
        }

        .wrapper .phone .phone-container {
            width: 100%;
            margin-top: 30px;
        }

            .wrapper .phone .phone-container .keyboard {
                width: 90%;
                margin-left: 5%;
                margin-top: 40px;
            }

                .wrapper .phone .phone-container .keyboard .number {
                    width: 100%;
                    font-size: 0;
                    text-align: center;
                }

                    .wrapper .phone .phone-container .keyboard .number.aling-right {
                        text-align: right;
                        width: 100%;
                    }

                    .wrapper .phone .phone-container .keyboard .number span {
                        font-size: 24px;
                        color: var(--color-white);
                        display: inline-block;
                        width: 33%;
                        text-align: center;
                        margin-bottom: 25px;
                    }

                        .wrapper .phone .phone-container .keyboard .number span.call-button {
                            opacity: 0;
                            transition: 250ms;
                        }

                            .wrapper .phone .phone-container .keyboard .number span.call-button.show {
                                opacity: 1;
                            }

                            .wrapper .phone .phone-container .keyboard .number span.call-button img {
                                display: inline-block;
                                vertical-align: middle;
                            }
                            .wrapper .phone .phone-container .keyboard .number span.call-button.show i {
                                background:var(--theme-color);
                            }
                        .wrapper .phone .phone-container .keyboard .number span i {
                            display: inline-block;
                            width: 80px;
                            height: 80px;
                            line-height: 80px;
                            background: var(--theme-color2);
                            cursor: pointer;
                            border-radius: 50px 50px 50px 0;
                            transition: 250ms;
                            -webkit-touch-callout: none;
                            -webkit-user-select: none;
                            -khtml-user-select: none;
                            -moz-user-select: none;
                            -ms-user-select: none;
                            user-select: none;
                            -webkit-box-shadow: 8px 8px 24px 0px rgba(132, 132, 132, 0.09);
                            -moz-box-shadow: 8px 8px 24px 0px rgba(132, 132, 132, 0.09);
                            box-shadow: 8px 8px 24px 0px rgba(132, 132, 132, 0.09);
                        }

                            .wrapper .phone .phone-container .keyboard .number span i.delete {
                                background: transparent;
                                box-shadow: 0 0 0 0;
                                -webkit-box-shadow: 0 0 0 0;
                                -moz-box-shadow: 0 0 0 0;
                                -ms-box-shadow: 0 0 0 0;
                                color: #E4BF88;
                            }

                                .wrapper .phone .phone-container .keyboard .number span i.delete img {
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                                .wrapper .phone .phone-container .keyboard .number span i.delete:hover {
                                    background: #ffbebe;
                                }
                                .wrapper .phone .phone-container .keyboard .number span i:hover {
                                    background: var(--theme-color);
                                }
                            .wrapper .phone .phone-container .keyboard .number span:hover i {
                                color: var(--color-white);
                            }

                        .wrapper .phone .phone-container .keyboard .number span:active i {
                            transform: translateY(1px);
                            -webkit-box-shadow: 5px 5px 24px 0px rgba(132, 132, 132, 0.18);
                            -moz-box-shadow: 5px 5px 16px 0px rgba(132, 132, 132, 0.18);
                            box-shadow: 5px 5px 16px 0px rgba(132, 132, 132, 0.18);
                        }

                            .wrapper .phone .phone-container .keyboard .number span:active i.delete {
                                box-shadow: 0 0 0 0;
                                -webkit-box-shadow: 0 0 0 0;
                                -moz-box-shadow: 0 0 0 0;
                                -ms-box-shadow: 0 0 0 0;
                                transform: translateY(0px);
                            }

                                .wrapper .phone .phone-container .keyboard .number span:active i.delete img {
                                    transtiion: 250ms;
                                }

                                .wrapper .phone .phone-container .keyboard .number span:active i.delete:active img {
                                    transform: translateY(2px);
                                }