.button {
    display: flex;
    padding: 12px 12px 10px;
    border: 0;
    border-radius: 3px;
    background: #17a704;
    text-decoration: none;
    transition: all 1.2s ease-in-out;
    color: #fff;
    text-decoration: none;
    margin-bottom: 20px;
    justify-items: center;
    align-items: center;
    width: 100px;
    cursor: pointer; 


}

.button:hover {

}

@keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes change-icon {
    0% {
        color: transparent;
    }

    100% {
        color: #fff;
    }
}

.not-active { 
    pointer-events: none;
    cursor: default; 
    background: #7db176;
    color: rgb(234, 227, 227);
} 

.loading {
    animation: loading 2s infinite linear;
}

.success {
    color: transparent;
    animation: change-icon 1s 0.6s linear both;
}