/*
|--------------------------------------------------------------------------
| Pre-loader
|--------------------------------------------------------------------------
*/
#pre-loader {
    display          : none;
    position         : relative;
    height           : 4px;
    width            : 65%;
    float            : right;
    background-color : #acece6;
    border-radius    : 2px;
    margin           : 0.5rem 0 1rem 0;
    overflow         : hidden;
}

#pre-loader .indeterminate {
    background-color : #26a69a;
}

#pre-loader .indeterminate:before {
    content           : '';
    position          : absolute;
    background-color  : inherit;
    top               : 0;
    left              : 0;
    bottom            : 0;
    will-change       : left, right;
    -webkit-animation : indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    -moz-animation    : indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    -ms-animation     : indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    -o-animation      : indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation         : indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

#pre-loader .indeterminate:after {
    content                 : '';
    position                : absolute;
    background-color        : inherit;
    top                     : 0;
    left                    : 0;
    bottom                  : 0;
    will-change             : left, right;
    -webkit-animation       : indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -moz-animation          : indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -ms-animation           : indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -o-animation            : indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation               : indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay : 1.15s;
    -moz-animation-delay    : 1.15s;
    -ms-animation-delay     : 1.15s;
    -o-animation-delay      : 1.15s;
    animation-delay         : 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
        left  : -35%;
        right : 100%;
    }

    60% {
        left  : 100%;
        right : -90%;
    }

    100% {
        left  : 100%;
        right : -90%;
    }
}

@-moz-keyframes indeterminate {
    0% {
        left  : -35%;
        right : 100%;
    }

    60% {
        left  : 100%;
        right : -90%;
    }

    100% {
        left  : 100%;
        right : -90%;
    }
}

@keyframes indeterminate {
    0% {
        left  : -35%;
        right : 100%;
    }

    60% {
        left  : 100%;
        right : -90%;
    }

    100% {
        left  : 100%;
        right : -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left  : -200%;
        right : 100%;
    }

    60% {
        left  : 107%;
        right : -8%;
    }

    100% {
        left  : 107%;
        right : -8%;
    }
}

@-moz-keyframes indeterminate-short {
    0% {
        left  : -200%;
        right : 100%;
    }

    60% {
        left  : 107%;
        right : -8%;
    }

    100% {
        left  : 107%;
        right : -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left  : -200%;
        right : 100%;
    }

    60% {
        left  : 107%;
        right : -8%;
    }

    100% {
        left  : 107%;
        right : -8%;
    }
}

/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
*/
#activator {
    display       : block;
    margin-left   : auto;
    margin-right  : auto;
    margin-bottom : 50px;
}

.SerialKey-Group,
.ActivateMachineCode-Group {
    width : 100%;
}

.SerialKey-Group {
    margin-bottom : 15px;
}

.ActivateMachineCode-Group {
    margin-bottom : 15px;
}

label[for="SerialKey"],
label[for="ActivateMachineCode"] {
    width              : 28%;
    background-color   : #a0ce4e;
    color              : white;
    border-radius      : 2px;
    padding            : 13px 29px;
    font-size          : 14px;
    -webkit-appearance : none;
    font-family        : 'PT Sans', Arial, Helvetica, sans-serif;
    font-weight        : 700;
    display            : inline-block;
    position           : relative;
    outline            : 0;
    zoom               : 1;
    border             : 1px solid rgba(0, 0, 0, 0);
    text-align         : center;
    text-transform     : uppercase;
    cursor             : pointer;
    vertical-align     : middle;
}

input[name="SerialKey"],
input[name="ActivateMachineCode"] {
    width        : 65% !important;
    padding      : 15px !important;
    margin-right : 0 !important;
    display      : inline-block;
    float        : right;
    outline      : none;
}

.Google-reCAPTCHA {
    width : 28%;
    float : left;
}

.verify-recaptcha {
    display: none;
    width : 98%;
}

.submit {
    width   : 65%;
    float   : right;
    display : inline-block;
}

.submit button {
    width              : 100%;
    display            : block;
    margin             : auto;
    background-color   : #a0ce4e;
    color              : white;
    border-radius      : 2px;
    padding            : 13px 29px;
    font-size          : 14px;
    -webkit-appearance : none;
    font-family        : 'PT Sans', Arial, Helvetica, sans-serif;
    font-weight        : 700;
    display            : inline-block;
    position           : relative;
    outline            : 0;
    zoom               : 1;
    border             : 1px solid rgba(0, 0, 0, 0);
    text-align         : center;
    text-transform     : uppercase;
    cursor             : pointer;
    vertical-align     : middle;
}

/*
|--------------------------------------------------------------------------
| Activation code
|--------------------------------------------------------------------------
*/
.activation-code {
    display : none;
}

.status {
    text-align: center;
}

.red {
    color : red !important;
}

.activated-license-code pre {
    word-wrap        : break-word;
    padding          : 15px;
    color : black;
    border: 2px solid black;
    border-radius: 2px;
}

.different-computer-id {
    text-align: center;
    color : red !important;
}

/*
|--------------------------------------------------------------------------
| Copy button
|--------------------------------------------------------------------------
*/
#copy-button {
    width              : 100%;
    max-width: 250px;
    float : right;
    display            : block;
    margin             : auto;
    background-color   : #a0ce4e;
    color              : white;
    border-radius      : 2px;
    padding            : 13px 29px;
    font-size          : 14px;
    -webkit-appearance : none;
    font-family        : 'PT Sans', Arial, Helvetica, sans-serif;
    font-weight        : 700;
    display            : inline-block;
    position           : relative;
    outline            : 0;
    zoom               : 1;
    border             : 1px solid rgba(0, 0, 0, 0);
    text-align         : center;
    text-transform     : uppercase;
    cursor             : pointer;
    vertical-align     : middle;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media only screen and (max-width: 1170px) and (min-width: 860px) {
    .g-recaptcha {
        transform: scale(0.77);
        transform-origin: 0;
        -webkit-transform: scale(0.77);
        transform: scale(0.77);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    #rc-imageselect {
        transform: scale(0.77);
        transform-origin: 0;
        -webkit-transform: scale(0.77);
        transform: scale(0.77);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .verify-recaptcha {
        width: 100% !important;
    }
}

@media only screen and (max-width: 859px) and (min-width: 630px) {
    .g-recaptcha {
        transform: scale(0.60);
        transform-origin: 0;
        -webkit-transform: scale(0.60);
        transform: scale(0.60);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    #rc-imageselect {
        transform: scale(0.77);
        transform-origin: 0;
        -webkit-transform: scale(0.77);
        transform: scale(0.77);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .verify-recaptcha {
        width: 100% !important;
    }
}

@media only screen and (max-width: 629px) {
    label[for="SerialKey"],
    label[for="ActivateMachineCode"] {
        width: 100%;
        float: none;
    }

    input[name="SerialKey"],
    input[name="ActivateMachineCode"] {
        width: 100% !important;
        float: none;
    }

    #pre-loader {
        width: 100%
    }

    .Google-reCAPTCHA {
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }

    .verify-recaptcha {
        width: 100% !important;
        text-align: center;
        margin-top: 15px;
    }

    .submit {
        width: 100%;
        float: none;
    }

    #copy-button {
        max-width: 100%;
        float : none;
    }
}