/* LOGIN */
.logo-login {
    width: 400px;
}

.recomendaciones {
    width: 540px;
}

.wrapper {
    background-image: url("/assets/img/logos/background-uxbi.jpg");
    /*background: #04446b;*/
    /*background: -webkit-linear-gradient(top left, #00416A 0%, #4E869F 100%);
    background: linear-gradient(to bottom right, #00416A 0%, #4E869F 100%);*/
    height: 100%;
}

.wrapper .x-form-text {
    background-color: rgba(255, 255, 255, 0.3);
    text-align: center;
    color: white;
}

.wrapper .x-form-text::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #cfd8dc;
}

.wrapper .x-form-text:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cfd8dc;
    opacity: 1;
}

.wrapper .x-form-text::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cfd8dc;
    opacity: 1;
}

.wrapper .x-form-text:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cfd8dc;
}

.wrapper .x-form-text:hover:not(.x-form-invalid-field):not(:focus) {
    background-color: rgba(255, 255, 255, 0.4);
}

.wrapper .x-form-text:focus {
    background-color: white;
    color: #546E7A;
}

.wrapper .x-form-type-text textarea.x-form-invalid-field,
.wrapper .x-form-type-text input.x-form-invalid-field,
.wrapper .x-form-type-password textarea.x-form-invalid-field,
.wrapper .x-form-type-password input.x-form-invalid-field,
.wrapper .x-form-type-number textarea.x-form-invalid-field,
.wrapper .x-form-type-number input.x-form-invalid-field,
.wrapper .x-form-type-email textarea.x-form-invalid-field,
.wrapper .x-form-type-email input.x-form-invalid-field,
.wrapper .x-form-type-search textarea.x-form-invalid-field,
.wrapper .x-form-type-search input.x-form-invalid-field,
.wrapper .x-form-type-tel textarea.x-form-invalid-field,
.wrapper .x-form-type-tel input.x-form-invalid-field {
    color: #546E7A;
}

/**
*	LINKS
**/

.wrapper .x-btn-link-toolbar-small .x-btn-inner {
    color: #fff;
}

.wrapper .x-btn-link-toolbar-small-over .x-btn-inner {
    color: #fff;
}

/* FIX HEIGHT ON FORM */
.wrapper .x-box-target {
    height: 100%;
}

/* SQUARE */
.wrapper ul li {
    position: absolute;
    list-style: none;
    display: block;
    width: 200px;
    height: 200px;
    border: 3px solid rgba(78, 134, 159, 0.70);
    border-radius: 40px;
    bottom: -200px;
    -webkit-animation: sq1 70s infinite;
    animation: sq1 70s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

/* SQUARE 1 */
.wrapper ul li:nth-child(1) {
    -webkit-animation: sq1 70s infinite;
    animation: sq1 70s infinite;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    left: 5%;
}

/* SQUARE 2 */
.wrapper ul li:nth-child(2) {
    left: 35%;
    width: 120px;
    height: 120px;
    border-radius: 24px;
    bottom: -120px;
    -webkit-animation: sq2 40s infinite;
    animation: sq2 40s infinite;
}

/* SQUARE 3 */
.wrapper ul li:nth-child(3) {
    left: 75%;
    width: 400px;
    height: 400px;
    border-radius: 80px;
    bottom: -400px;
    -webkit-animation: sq3 130s infinite;
    animation: sq3 130s infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.x-form-text {
    color: #546e7a;
    padding: 4px 6px 3px 6px;
    background: white repeat-x 0 0;
    border-width: 1px;
    border-style: solid;
    border-color: #cfd8dc;
    height: 24px;
    line-height: 15px;
}

.text-login-uxbi {
    background: #ffffff00 !important;
    color: #7fb600 !important;
    border-color: #7fb600 !important;
}

.text-login-uxbi:focus {
    background-color: rgba(255, 255, 255, 0) !important;
}

.text-login-uxbi::placeholder {
    color: #7fb600 !important;
}

/*
@-webkit-keyframes sq1 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100vh) translateY(-284px) rotate(-350deg);
        transform: translateY(-100vh) translateY(-284px) rotate(-350deg);
    }
}

@keyframes sq1 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100vh) translateY(-284px) rotate(-350deg);
        transform: translateY(-100vh) translateY(-284px) rotate(-350deg);
    }
}

@-webkit-keyframes sq2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100vh) translateY(-170px) rotate(500deg);
        transform: translateY(-100vh) translateY(-170px) rotate(500deg);
    }
}

@keyframes sq2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100vh) translateY(-170px) rotate(500deg);
        transform: translateY(-100vh) translateY(-170px) rotate(500deg);
    }
}

@-webkit-keyframes sq3 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100vh) translateY(-566px) rotate(-100deg);
        transform: translateY(-100vh) translateY(-566px) rotate(-100deg);
    }
}

@keyframes sq3 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100vh) translateY(-566px) rotate(-100deg);
        transform: translateY(-100vh) translateY(-566px) rotate(-100deg);
    }
}
*/

/* REGISTER */

/* COMPLETENESS METER */
.completeness-meter {
    top: 8.5px !important;
    border-radius: 4px;
    border: 1px solid transparent;
    overflow: hidden;
}

.completeness-step {
    width: 15px;
    height: 100%;
    background: #eceff1;
    display: inline-block;
    margin: 0;
}

.completeness-step.c-step-active {
    background: #94d500;
}