:root {
    --main-color:#616362;
    --success-color: #4caf50;
    --error-color: #f44336;
    --default-color: #ddd;
    --warning-color: #f0ad4e;
    /*--main-color: #229922*/
}

.icon {
    /*color: #fff;*/
    position: relative;
    margin: 0 auto;
    /*margin-top: -75px;*/
    color: var(--default-color);
    /*$main-color;*/
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.iconSuccess {
    color: var(--success-color);
}

.iconSuccessInvert {
    background: var(--success-color);
    color: #fff;
}

.iconError {
    color: var(--error-color);
}

.iconErrorInvert {
    background: var(--error-color);
    color: #fff;
}

.iconWarning {
    color: var(--warning-color);
}

.iconWarningInvert {
    background: var(--warning-color);
    color: #fff;
}

/*MODALS*/
.modalButton {
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border-width: 2px;
    margin-top: 15px;
    width: 80%;
    background: transparent;
    color: var(--default-color);
    border-color: var(--default-color);
    outline: none;
}

.modalSuccessButton {
    color: var(--success-color);
    border-color: var(--success-color);
}

.modalSuccessButton:hover {
    background: var(--success-color);
    color: #fff;
    ;
}

.modalErrorButton {
    color: var(--error-color);
    border-color: var(--error-color);
}

.modalErrorButton:hover {
    background: var(--error-color);
    color: #fff;
    ;
}

.modalWarningButton {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.modalWarningButton:hover {
    background: var(--warning-color);
    color: #fff;
    ;
}