.btn-add {
    background: var(--color-secundair);  
    color: white;
    padding: var(--btn-padding);
    border: none;
    border-radius: var(--border-radius-small);
    font-weight: 600;
    font-size: var(--btn-font-size);
    cursor: pointer;
    height: 28px;
    display: flex;
    align-items: center;
    gap: var(--btn-gap);
    white-space: nowrap;
    margin-right: 20px;
}

.btn-add:hover {
    background: var(--color-secundair-hover);
    transition: 0.2s;
}

.btn-icon {
    width: 14px;
    height: 14px;
    padding: 0px;
}

.btn-text {
    font-size: var(--btn-font-size);
}

.btn-backup {
    background: var(--color-accent);  
    color: white;
    padding: var(--btn-padding);
    border: none;
    border-radius: var(--border-radius-small);
    font-weight: 600;
    font-size: var(--btn-font-size);
    cursor: pointer;
    height: 28px;
    display: flex;
    align-items: center;
    gap: var(--btn-gap);
    white-space: nowrap;
    margin-left: auto;
    margin-right: 20px;
}

.btn-backup:hover {
    background: var(--color-accent-hover);
    transition: 0.2s;
}

@media screen and (max-width: 1100px) {
    .btn-add {
        padding: 0px;
        margin: 8px;
        height: 20px;
        width: 20px;
        gap: 0px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-backup {
        padding: 0px;
        margin: 8px;
        height: 20px;
        width: 20px;
        gap: 0px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-add .btn-text {
        display: none;
    }

    .btn-backup .btn-text {
        display: none;
    }

    .btn-add .btn-icon {
        width: 14px;
        height: 14px;
    }

    .btn-backup .btn-icon {
        width: 12px;
        height: 12px;
    }


}