.main {
    background-image: url(/images/background/bg-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

html,
body,
.main {
    height: 100%;
}

.notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

    .notification .message {
        margin: 30px auto 0;
        width: 550px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        padding: 10px;
    }

        .notification .message.success {
            background: #30d5c8;
        }

        .notification .message.error {
            background: rgb(235, 84, 140);
        }

        .registration-form-wrapper {
            color: #2a2833;
            padding-top: 85px;
        }

    .registration-form-wrapper .box-shadow {
        box-shadow: rgba(96, 79, 221, 0.1) 0px 1px 2px 0px inset, rgba(96, 79, 221, 0.3) 0px 1px 10px 0px;
    }

    .registration-form-wrapper #body-wrapper {
        width: 600px;
        margin: 0 auto;
        background-color: #fff;
        position: relative;
        z-index: 1;
    }

    .registration-form-wrapper #body-wrapper .wrapper {
        background-color: #fff;
        border-radius: 20px;
        position: relative;
        padding: 50px 30px 30px;
    }

        .registration-form-wrapper #body-wrapper .wrapper .phone-border-img {
            position: absolute;
            top: -21px;
            left: -74px;
            right: -74px;
            bottom: -21px;
            height: calc(100% + 82px);
            width: calc(100% + 144px);
            z-index: -1;
        }

        .registration-form-wrapper #body-wrapper:before {
            content: '';
            width: 639px;
            height: 639px;
            z-index: -2;
            background-image: linear-gradient( 40deg, #ff43c0 0%, #ffa95c 100%);
            -webkit-box-shadow: 0px 20px 60px 0px rgb(244 151 190 / 80%);
            box-shadow: 0px 20px 60px 0px rgb(244 151 190 / 80%);
            border-radius: 50%;
            position: absolute;
            top: -14%;
            left: 18%;
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: bounce;
            animation-name: bounce;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            -webkit-animation-duration: 5s;
            animation-duration: 5s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

            .registration-form-wrapper .links-wrapper {
                width: 700px;
                margin: 10px auto 0;
                border-radius: 3px;
                position: relative;
                padding: 50px 30px 30px 140px;
                font-size: 14px;
                z-index: 1;
            }

    .registration-form-wrapper #body-wrapper.done {
        padding-left: 30px;
    }

    .registration-form-wrapper .form-header {
        padding-left: 110px;
    }

    .registration-form-wrapper .form-header,
    .registration-form-wrapper .radio-buttons {
        margin-bottom: 25px;
    }

    .registration-form-wrapper .iclickats-img {
        width: 100px;
        position: absolute;
        left: 30px;
    }

            .registration-form-wrapper .first-step-btn,
            .registration-form-wrapper .second-step-btn,
            .registration-form-wrapper .go-back-btn {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .registration-form-wrapper .steps {
        margin-top: 25px;
        display: flex;
        margin-bottom: 15px;
        width: 80%;
        max-width: 400px;
    }

    .registration-form-wrapper .step {
        width: 100px;
        text-align: center;
    }

        .registration-form-wrapper .step i {
            padding: 10px;
            border-radius: 50%;
            background-color: #fff;
            color: #bababa;
            margin-bottom: 10px;
            border: 2px solid #bababa;
            width: 42px;
        }

            .registration-form-wrapper .step i.no-icon {
                font-family: 'Rubik' !important;
                font-weight: 500;
            }

            .registration-form-wrapper .step.completed i {
                background: rgb(48, 213, 200);
                border-color: rgb(48, 213, 200);
                color: #fff;
            }

        .registration-form-wrapper .step .step-description {
            font-weight: 400;
            font-size: 12px;
            color: #bababa;
            line-height: 12px;
        }

    .registration-form-wrapper .steps-separator {
        height: 4px;
        position: relative;
        background-color: #bababa;
        width: calc((100% - 300px) / 2);
        margin-top: 18px;
    }

        .registration-form-wrapper .steps-separator.completed {
            background: rgb(48, 213, 200);
        }

        .registration-form-wrapper .steps-separator .separator-inner {
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: inherit;
            left: -25px;
            right: -25px;
        }

    .registration-form-wrapper section.third {
        font-size: 14px;
    }

    .registration-form-wrapper section.third .separator {
        width: 300px;
        margin: 0 auto;
        height: 2px;
        margin-bottom: 20px;
        background: rgb(129, 99, 219);
    }

    .registration-form-wrapper section.third .request-mail-btn {
        color: #236ec4;
        font-weight: 500;
        cursor: pointer;
    }

        .registration-form-wrapper section.third img {
            max-width: 100%;
        }

    .registration-form-wrapper .radio-buttons {
        display: flex;
        justify-content: space-between;
    }

    .registration-form-wrapper section.third h4 {
        font-size: 18px;
    }

    .registration-form-wrapper section.third > div {
        line-height: 18px;
    }

    .registration-form-wrapper section.third > div,
    .registration-form-wrapper section.third h4 {
        margin-bottom: 20px;
    }


/* Radio styles*/
/* Source: https://codepen.io/wilder_taype/pen/pNXwMW */
@keyframes click-wave {
    0% {
        height: 25px;
        width: 25px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 100px;
        width: 100px;
        margin-left: -25px;
        margin-top: -25px;
        opacity: 0;
    }
}

.radio-buttons label {
    margin: 0 10px 0 0;
}

    .radio-buttons label span {
        position: relative;
        top: -8px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
    }

.radio-buttons input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 25px;
    width: 25px;
    transition: all 0.15s ease-out 0s;
    background: #cbd1d8;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
}

    .radio-buttons input:hover {
        background: #9faab7;
    }

    .radio-buttons input:checked {
        background: #30d5c8;
    }

        .radio-buttons input:checked::before {
            height: 25px;
            width: 25px;
            position: absolute;
            content: '✔';
            display: inline-block;
            font-size: 19.66667px;
            text-align: center;
            line-height: 25px;
        }

        .radio-buttons input:checked::after {
            -webkit-animation: click-wave 0.65s;
            -moz-animation: click-wave 0.65s;
            animation: click-wave 0.65s;
            background: #30d5c8;
            content: '';
            display: block;
            position: relative;
            z-index: 100;
        }

.radio-buttons input {
    border-radius: 50%;
}

    .radio-buttons input::after {
        border-radius: 50%;
    }
/* End of radio styles*/