.login-container, .loading-screen {
    background: unset;
    background: linear-gradient(var(--top-color), var(--bottom-color)) !important;
}

.loading-screen .loading-screen-center .cplogo {
    width: 180px;
    height: 120px;
    background: var(--client-portal-logo) no-repeat;
    background-size: contain;
}

.loading-screen .loading-screen-center .load-box:nth-child(2) {
    background: var(--dark-color);
    /*animation-name: top; /*v1*/
    /*animation-delay: .2s; v2 v3*/
    animation-delay: 0.075s;
    /*v4*/
}

.loading-screen .loading-screen-center .load-box:nth-child(3) {
    background: var(--dark-color);
    /*animation-name: bottom; /*v1*/
    /*animation-delay: .4s; /*v2 v3*/
    animation-delay: 0.15s;
    /*v4*/
}

.loading-screen .loading-screen-center .load-box:nth-child(4) {
    background: var(--dark-color);
    /*animation-name: top; /*v1*/
    /*animation-delay: .6s; /*v2 v3*/
    animation-delay: 0.225s;
    /*v4*/
}

.loading-screen .loading-screen-center .load-box:nth-child(5) {
    background: var(--dark-color);
    /*animation-name: bottom; /*v1*/
    /*animation-delay: .8s; /*v2 v3*/
    animation-delay: 0.3s;
    /*v4*/
}

.loading-screen .loading-screen-center .load-box:nth-child(6) {
    background: var(--dark-color);
    /*animation-name: top; /*v1*/
    /*animation-delay: 1.0s; /*v2 v3*/
    animation-delay: 0.375s;
    /*v4*/
}

.loading-screen .loading-screen-center .load-box:nth-child(7) {
    background: var(--dark-color);
    /*animation-name: bottom; /*v1*/
    /*animation-delay: 1.2s; /*v2 v3*/
    animation-delay: 0.45s;
    /*v4*/
}

.loading-screen .loading-screen-center .load-box:nth-child(8) {
    background: var(--dark-color);
    /*animation-name: top; /*v1*/
    /*animation-delay: 1.4s; /*v2 v3*/
    animation-delay: 0.525s;
    /*v4*/
}