.add-item, .add-item2, .add-item3 {
    cursor: pointer;
    margin-top: 1rem;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 1rem;
    flex-flow: row;
    width: 4rem;
    height: 4rem;
    background-image: url("../../images/add2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--app-primary);
}

.add-item {
    background-image: url("../../images/add.png");
    background-color: var(--app-primary);
}

    .add-item:hover {
        background-image: url("../../images/add2.png");
        background-color: var(--app-secondary);
    }

.add-item2 {
    background-image: url("../../images/add2.png");
    background-color: var(--app-secondary);
    width: 3rem;
    height: 3rem;
}

    .add-item2:hover {
        background-image: url("../../images/add.png");
        background-color: var(--app-primary);
    }

.add-item3 {
    background-image: url("../../images/add.png");
    background-color: var(--app-primary);
    width: 2rem;
    height: 2rem;
}

    .add-item3:hover {
        background-image: url("../../images/add2.png");
        background-color: var(--app-secondary);
    }

.btn-close {
    width: 1.5rem;
    font-size: 1.5rem;
}

    .btn-close:focus, .btn-close:active, .btn-close:visited {
        border: none !important;
        outline: 0 none !important;
        box-shadow: none !important;
    }

.button-warning {
    color: red !important;
}