.verion-notification-container {
    padding: 25px 25px 0 25px;
    margin-bottom: -25px;

    .version-alert {
        background-color: rgba(0, 65, 255, 0.1);
        border: 1px solid #0041ff;
        border-radius: 2px;
        color: #2b2b2c;
        padding: 12px 35px 12px 15px;
    }
}

.version-updates {
    h1 {
        margin-top: 40px;
        
        &:first-child {
            margin-top: 0;
        }
    }
}

.upgrade-version-container {
    margin-top: 40px;
    position: relative;

    .step-container {
        width: 300px;
        border-right: 1px solid rgba(162, 162, 162, 0.2);
        border-left: 1px solid rgba(162, 162, 162, 0.2);

        ul {
            li {
                padding: 10px 20px;
                color: #a2a2a2;
                position: relative;

                &:before {
                    content: "";
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background-color: #a2a2a2;
                    top: 15px;
                    left: -5px;
                    border-radius: 50%;
                }

                &.active {
                    color: #3a3a3a;
                    font-weight: 600;

                    &:before {
                        background-color: #0041ff;
                    }
                }

                &.completed {
                    &:after {
                        content: "";
                        display: inline-block;
                        transform: rotate(45deg);
                        height: var(--height);
                        width: var(--width);
                        border-bottom: var(--borderWidth) solid var(--borderColor);
                        border-right: var(--borderWidth) solid var(--borderColor);
                        position: absolute;
                        right: 15px;
                    }
                }
            }
        }
    }

    .step-process-container {
        width: 100%;
        position: absolute;
        padding-left: 320px;
        top: 0;

        .step-content {
            h2 {
                margin-top: 0;
            }

            .step-process-content {
                text-align: center;
            }

            &.finish {
                .step-process-content {
                    margin-top: 80px;
                }
            }
        }
    }
}

.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;

    > div {
        width: 18px;
        height: 18px;
        background-color: #0041ff;
    
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    
    .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    
    .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
}
  
@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}
  
@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

:root {
    --borderWidth: 2px;
    --height: 12px;
    --width: 4px;
    --borderColor: rgba(34, 201, 93, 1);
}