.base-container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.base-device-list li {
    list-style-type: none;
    margin: 1em 0em;
}

.base-log-area {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    max-height: calc(5 * 1.5em);
    overflow-y: auto;
}

.base-log-area p {
    margin: 0em 0em;
}

/* 按钮样式 */
.base_button {
    color: white;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    margin: 0em 0.2em 0em 0em;
}

.base_button.blue {
    background-color: #3b82f6;
}

.base_button.blue:hover {
    background-color: #2563eb;
}

.base_button.yellow {
    background-color: #eab308;
}

.base_button.yellow:hover {
    background-color: #ca8a04;
}

.base_button.orange {
    background-color: #fb923c;
}

.base_button.orange:hover {
    background-color: #f97316;
}    

.base_button.purple {
    background-color: #8b5cf6;
}

.base_button.purple:hover {
    background-color: #7c3aed;
}

.base_button.green {
    background-color: #22c55e;
}

.base_button.green:hover {
    background-color: #16a34a;
}

/* gatt 表格样式 */
.base_gatt_table {
    width: 100%;
    border-collapse: collapse;
}

.base_gatt_table th,
.base_gatt_table td {
    border: 1px solid #ccc;
    padding: 1px;
    text-align: left;
    height: 1.8em;
}

/* gatt gui 样式 */
.base_gatt_gui {
    margin: 0.5em 0em;
}

.base_gatt_gui .send_edit {
    margin: 0.5em 0em;
}

.base_gatt_gui .send_edit form {
    display: flex;
    flex-wrap: wrap; /* 当子元素过多时，自动换行 */
    align-items: center; /* 垂直居中对齐子元素 */
    flex-direction: row;
}

.base_gatt_gui .send_edit form label,
.base_gatt_gui .send_edit form input {
    margin-right: 10px; /* 在标签和输入框之间添加一定的间距 */
    margin-bottom: 2px; /* 如果换行，添加底部间距 */
}

.base_gatt_gui .notify_label {
    border: 1px solid #d11;
    padding: 8px;
    margin: 0.5em 0em;
}

.base_gatt_gui .notify_label label {
    display: block;
    margin-bottom: 2px;
}