html, body {
    display: block;
    min-height: 100%;
}

body {
    background: #39b54b;
    background: linear-gradient(-47deg, #39b54b 0%, #1b7ebe 100%);
}

.wrapper {
    display: block;
    width: calc(100% - 30px);
    max-width: 400px;
    padding: 80px 15px 15px 15px;
    margin: 0 auto;
}

.wrapper-sms {
    display: block;
    width: calc(100% - 30px);
    max-width: 600px;
    padding: 80px 15px 15px 15px;
    margin: 0 auto;
}

.wrapper-activation {
    display: block;
    width: calc(100% - 30px);
    max-width: 600px;
    padding: 80px 15px 15px 15px;
    margin: 0 auto;
}

.wrapper-form {
    max-width: 400px;
    margin: 0 auto;
}

.wrapper h1 {
    color: #ffffff;
    font-size: 28px
}

.wrapper-sms h1 {
    color: #ffffff;
    font-size: 28px
}

.wrapper-sms h3 {
    color: #ffffff;
    font-size: 20px
}

.wrapper-activation h1 {
    color: #ffffff;
    font-size: 28px
}

.wrapper-activation h3 {
    color: #ffffff;
    font-size: 20px
}

.form-control {
    height: calc(2em + 1rem + 2px);
    border-radius: 4rem;
    border: none;
    line-height: 1;
    padding-right: 20px;
}

    .form-control:focus {
        outline: none;
    }

.input-group-text {
    padding: .375rem 0.2rem .375rem 1.2rem;
    border-radius: 4rem;
    background-color: #fff;
    border: none;
}

.btn-trans {
    background-color: #f9a51a;
    color: #ffffff;
    padding: .7rem .75rem;
    border-radius: 4rem;
}

.term {
    text-align: left;
    color: #fff;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 10px;
}

.msg-error {
    color: #f9a51a !important;
}

.circle-loading {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50px;
    width: 50px;
    margin: -25px 0 0 -25px;
    border: 4px rgba(0, 0, 0, 0.25) solid;
    border-top: 4px #f9a51a solid;
    border-bottom: 4px #f9a51a solid;
    border-radius: 50%;
    -webkit-animation: spin1 1s infinite linear;
    animation: spin1 1s infinite linear;
    z-index: 99999;
}

@-webkit-keyframes spin1 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin1 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.form-group {
    position: relative;
}

.input-lable {
    position: absolute;
    top: 2px;
    left: 50px;
    color: gray;
    z-index: 999;
    font-family: sans-serif;
    font-size: 12px;
}

.wrapper-activation .form-control {
    padding-top: 18px;
    color: darkblue;
    font-size: 16px;
}

fieldset.social-network {
    border: #ffffff solid 1px;
    width: inherit; /* Or auto */
    padding: 0 28px;
}

fieldset.content-required {
    border: #ffffff solid 1px;
    width: inherit; /* Or auto */
    padding: 0 48px;
}

fieldset.social-network legend {
    color: #ffffff;
    font-size: 18px;
}

fieldset.content-required legend {
    color: #ffffff;
    font-size: 18px;
}

fieldset label {
    color: #ffffff;
    font-size: 18px;
    margin-right: 15px;
}

fieldset.content-required textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
}

.content-required {
    color: red !important;
    font-weight: bold;
    font-size: 14px;
}