:root {
    --base-color: rgba(17, 24, 39, 1.5)
}

.addBtn {
    background-color: var(--base-color);
    border: 1px solid var(--base-color);
    color: #FFFFFF;
    border-radius: 20px;
    padding: 2px 15px 5px 15px;
    transition: all 0.2s ease;
    font-weight: 500;

    &:hover {
        background-color: #3c3c3f;
    }
}

.saveBtn {
    background-color: var(--base-color);
    border: 1px solid var(--base-color);
    color: #FFFFFF;
    border-radius: 5px;
    padding: 2px 10px 5px 10px;
    transition: all 0.2s ease;
    font-weight: 500;

    &:hover {
        background-color: #3c3c3f;
    }
}


.cancelBtn {
    background-color: #adadad;
    border: 1px solid #adadad;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 2px 10px 3px 10px;
    transition: all 0.2s ease;
    font-weight: 500;

    &:hover {
        background-color: #797979;
    }
}

.editBtn {
    background-color: transparent;
    border: 1px solid var(--base-color);
    color: var(--base-color);
    border-radius: 4px;
    padding: 2px 10px;
    transition: all 0.2s ease;
    font-weight: 500;

    &:hover {
        background-color: var(--base-color);
        color: #FFFFFF;
    }
}

.deleteBtn {
    background-color: transparent;
    border: 1px solid var(--base-color);
    color: var(--base-color);
    border-radius: 4px;
    padding: 2px 10px;
    transition: all 0.2s ease;
    font-weight: 500;

    &:hover {
        background-color: red;
        color: #FFFFFF;
        border: 1px solid red;

    }
}

.parsley-errors-list li {
    color: red;
}


#formModal {
    opacity: 0;
}

#formModal.opacity-100 {
    opacity: 1;
}

#popupContent {
    transform: scale(0.95);
}

#popupContent.scale-95 {
    transform: scale(0.95);
}