/* Современный стиль кнопки сохранения */
.btn-outline-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 38px;
    background: linear-gradient(145deg, #ffffff, #f0f5ff);
    color: #3b82f6; /* Красивый синий цвет */
    border: 1.5px solid #d1e4ff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-outline-save:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-outline-save i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-outline-save:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-outline-save:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Современный стиль кнопки удаления */
.btn-outline-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 38px;
    background: linear-gradient(145deg, #ffffff, #f0f5ff);
    color: #ef5350; /* Красивый красный цвет */
    border: 1.5px solid #ffcccb;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-outline-delete:hover {
    background: #ef5350;
    color: #ffffff;
    border-color: #ef5350;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 83, 80, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-outline-delete i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-outline-delete:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-outline-delete:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Современный стиль кнопки добавления */
.btn-outline-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 38px;
    background: linear-gradient(145deg, #ffffff, #f0f5ff);
    color: rgb(129, 129, 254); /* Красивый зеленый цвет */
    border: 1.5px solid #d1e4ff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-outline-check:hover {
    background: rgb(118, 118, 234);
    color: #ffffff;
    border-color: rgb(118, 118, 234);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(163, 163, 250, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-outline-check i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-outline-check:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-outline-check:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Современный стиль кнопки добавления */
.btn-outline-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 38px;
    width: 38px;
    background: linear-gradient(145deg, #ffffff, #f0f5ff);
    color: green; /* Красивый зеленый цвет */
    border: 1.5px solid #81b262;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-outline-add:hover {
    background: green;
    color: #ffffff;
    border-color: green;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 128, 0, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-outline-add i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-outline-add:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-outline-add:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Современный стиль кнопки добавления */
.btn-save-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 38px;
   
    /* width: 200px; */
    background: linear-gradient(145deg, #d6daf9, #ffffff);
    color: rgb(158, 138, 154); /* Красивый зеленый цвет */
    border: 1.5px solid #a7a7aa;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-save-settings:hover {
    background: rgb(112, 184, 255);
    color: #ffffff;
    border-color: rgb(112, 184, 255);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 128, 0, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-save-settings i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-save-settings:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-save-settings:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* Современный стиль кнопки закрытия */
.btn-clear-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 38px;
   
    /* width: 200px; */
    background: linear-gradient(145deg, #d6daf9, #ffffff);
    color: rgb(221, 91, 91); /* Красивый красный цвет */
    border: 1.5px solid #a7a7aa;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-clear-settings:hover {
    background: rgb(213, 72, 72);
    color: #ffffff;
    border-color: rgb(213, 72, 72);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(213, 72, 72, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-clear-settings i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-clear-settings:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-clear-settings:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* Современный стиль кнопки закрытия */
.btn-close-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 38px;
   
    /* width: 200px; */
    background: linear-gradient(145deg, #d6daf9, #ffffff);
    color: rgb(158, 138, 154); /* Красивый зеленый цвет */
    border: 1.5px solid #a7a7aa;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-close-settings:hover {
    background: rgb(213, 72, 72);
    color: #ffffff;
    border-color: rgb(213, 72, 72);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(213, 72, 72, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-close-settings i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-close-settings:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-close-settings:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* Современный стиль кнопки закрытия */
.btn-order-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом, если он будет */
    padding: 0 12px;
    height: 48px;
   
    /* width: 300px; */
    background: linear-gradient(145deg, #d6daf9, #ffffff);
    color: rgb(153, 148, 99); /* Красивый зеленый цвет */
    border: 1.5px solid #a7a7aa;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Эффект при наведении */
.btn-order-settings:hover {
    background: rgb(152, 134, 67);
    color: #ffffff;
    border-color: rgb(93, 75, 49);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(213, 72, 72, 0.3);
}

/* Эффект иконки внутри кнопки */
.btn-order-settings i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-order-settings:hover i {
    transform: scale(1.1);
}

/* Эффект при нажатии */
.btn-order-settings:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* Галочка (успех): <i class="fa-solid fa-check"></i>

Карандаш (ред.): <i class="fa-solid fa-pen-to-square"></i>

Мусорка (удалить): <i class="fa-solid fa-trash-can"></i>

Плюс: <i class="fa-solid fa-plus"></i> */