

.ns-form-logo {
    max-width: 100%;
    margin-bottom: 2rem;
    margin: 0 auto 2rem auto;

    @media(min-width: 768px) {
        max-width: 380px;
    }
}

.ns-redeem-code .single-input-group.activate-code-input-group {
    input {
        background: #171717;
        border: 2px solid $ns-yellow;
        border-radius: .5rem;
        color: #fff;
        font-family: $futura-bold;
        font-size: 4.75rem;
        height: 8rem;
        margin-left: .15rem;
        margin-right: .15rem;
        max-width: 480px;
        margin-bottom: 4rem;
        padding: 2rem;
        text-align: center;
        text-transform: uppercase;
        width: 100%;

        @media(min-width: 768px) {
            font-size: 7.25rem;
            height: 12rem;
        }
    }

    &.invalid-code {
        input {
            background: #171717;
            border-color: #F20037;
        }
    }

    &.valid-code {
        input {
            background: #171717;
            border-color: #26D954;
        }
    }
}

.ns-redeem-code {
    h1 {
        margin-top: 0;

        @media(min-width: 768px) {
            margin-top: 3rem;
        }
    }
}



.ns-activate {
    h1 {
        font-size: 3.3rem;
        margin-bottom: 2rem;

        @media (min-width: 576px) {
            font-size: 4.3rem;
            margin-bottom: 3rem;
        }
    }

    .nonstop-show-logo {
        margin-bottom: 4rem;
    }

    .ns-button-container {
        margin-top: 4rem;
    }
}

.ns-activate-code-input-group input {
    background-color: #000;
    border: 2px solid #FFE600;
    border-radius: .25rem;
    color: #fff;
    font-size: 2.9rem;
    font-family: "Futura LT W01 Bold", sans-serif;
    height: 6.5rem;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    text-transform: uppercase;
    width: 15%;
    padding: 0;
    -webkit-appearance: none;

    @media (min-width: 768px) {
        font-size: 9.25rem;
        margin-left: .15rem;
        margin-right: .15rem;
        height: 15rem;
        max-width: 12rem;
    }

    @media only screen and (max-width: 360px) {
        width: 15.4%;
    }
}

.ns-input-field {
    display: inline;
    overflow: hidden;
}

.ns-activate-device-page .single-input-group {
    position: relative;
}

.ns-activate-code-input-group {
    text-align: center;
}

.ns-activate .activate-code-input-group .filled {
    background: #FFE600;
}

.single-input-group.activate-code-input-group  {
    position: relative;
    .error-message {
        bottom: 0;
        color: #F20037;
        position: absolute;
        width: 100%;
    }
}