/* 在 :root 中定义变量 */
:root {
    --font-size-base: 12px;
    --font-size-large: calc(var(--font-size-base) * 1.25);
    --font-size-small: calc(var(--font-size-base) * 0.875);
}

body {
    font-family: Arial, sans-serif;
    font-size: var(--font-size-base);; /* 可以根据需要调整 */
}

* {
    box-sizing: border-box;
}

.view-body {
    display: flex;
    flex-direction: column; /* 纵向排列 */
    height: 100%;
}

.view-body .view-fill-height {
    flex: 1;
}

.container-tab {
    width: 100%;
    display: flex;
    flex-direction: column; /* 纵向排列 */
    height: 100vh; /* 填充整个视口高度 */
    
}

.custom-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 10px;
}

.tab-left {
    display: flex;
}

.tab-link {
    background-color: #ffffff; /* 按钮背景色 */
    color: #333; /* 字体颜色 */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px 15px;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tab-link.active {
    background-color: #007bff; /* 活动按钮颜色 */
    color: white; /* 活动按钮字体颜色 */
}

.tab-link:hover:not (.active) {
    background-color: #e0e0e0; /* 悬停效果 */
}

.tab-right {
    display: flex;
    align-items: center;
}

.info-button {
    color: white; /* 字体颜色 */
    border-radius: 5px;
    padding: 10px 15px;
    margin-left: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.about {
    background-color: #007bff;
}

.api-open {
    background-color: #007bff;
}

.api-changing {
    background-color: #16baaa;
}

.api-close {
    background-color: #e64a19;
}

#tabContentView {
    background-color: #ffffff; /* 内容框背景色 */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 5px;
    flex: 1; /* 填充剩余空间 */
    overflow-y: auto; /* 内容可滚动 */

    display: flex;
    flex-direction: column; /* 纵向排列 */
}

.table1 {
    width: calc(100% - 10px);
    margin: 5px;
    padding: 5px;
    border-collapse: collapse; /* 合并边框 */
}
.table1 td, .table1 th {
    text-align: center;
    border: 1px solid #eee; /* 更浅的灰色边框 */
    padding: 20px; /* 内边距 */
}

.table1 input {
    display: inline;
}

.table3 {
    width: calc(100% - 10px);
    margin: 5px;
    padding: 5px;
    border-collapse: collapse; /* 合并边框 */
}
.table3 td, .table3 th {
    text-align: center;
    border: 0 solid #eee; /* 更浅的灰色边框 */
    padding: 20px; /* 内边距 */
}

.table3 input {
    display: inline;
}

.search-table {
    width: calc(100% - 10px);
    margin: 5px;
    padding: 5px;
    border-collapse: collapse; /* 合并边框 */
}
.search-table td, .search-table th {
    text-align: center;
    border: 0 solid #eee; /* 更浅的灰色边框 */
    padding: 5px; /* 内边距 */
}

.search-table input {
    display: inline;
}

.table2 {
    width: calc(100% - 10px);
    margin: 5px;
    border-collapse: collapse; /* 合并边框 */
}
.table2 td, .table2 th {
    text-align: center;
    border: 1px solid #eee; /* 更浅的灰色边框 */
    padding: 7px 5px 5px 5px; /* 内边距 */
}

.table2 tr:nth-child(even) {
    background-color: #F9F9F9; /* 浅灰色 */
}

.table2 tr:nth-child(odd) {
    background-color: #EDEFF1; /* 白色 */
}


/* 悬停时改变背景颜色 */
.table2 tr:hover {
    background-color: #E3F2FD; /* 更深的灰色 */
}

/* 选中时改变背景颜色 */
.table2 .selected {
    background-color: #BBDEFB !important; /* 指定鼠标悬停时的背景色 */
}

/* 选择带有 first-row 类的 tr 元素 */
.table2 .first-row td {
    white-space: nowrap; /* 禁止内容换行 */
    /*overflow: auto;      !* 如果内容超出则显示滚动条 *!*/
}


/* 基本样式 */
.customSelect {
    appearance: none; /* 移除默认样式 */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
    background-color: #ffffff; /* 背景颜色 */
    border: 1px solid #cccccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
    padding: 8px 12px; /* 内边距 */
    font-size: var(--font-size-base);; /* 字体大小 */
    color: #333333; /* 文字颜色 */
    cursor: pointer; /* 鼠标指针 */
    width: 200px; /* 固定宽度 */
}

/* 选项列表样式 */
.customSelect option {
    background-color: #ffffff; /* 选项背景颜色 */
    color: #333333; /* 选项文字颜色 */
}

/* 对于 Webkit 浏览器 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .customSelect {
        padding-right: 30px; /* 为箭头预留空间 */
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20width%3D%222em%22%20height%3D%222em%22%3E%3Cpath%20d%3D%22M42.5%2050L75%2025L75%2075L42.5%2050z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 20px; /* 调整箭头大小 */
    }
}

/* 垂直居中 */
.vertical-center {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.custom-audio{
    height: 30px;
}

/* 简化后的单行文本溢出样式 */
.single-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.limited-width {
    white-space: nowrap;   /* 禁止内容换行 */
    overflow: hidden;      /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.no-wrap {
    white-space: nowrap; /* 防止文本自动换行 */
}
.custom-radio {
    position: relative;
    display: inline-block;
    padding-left: 35px; /* 增加一些空间给文本 */
    cursor: pointer;
    font-size: var(--font-size-base);; /* 文本字体大小 */
}

.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-radio span {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff; /* 背景颜色为白色 */
    border: 2px solid #cccccc; /* 蓝色边框 */
    border-radius: 50%;
}

.custom-radio span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease-in-out;
    width: 12px;
    height: 12px;
    background-color: #16baaa; /* 绿色圆点 */
    border-radius: 50%;
}

.custom-radio input[type="radio"]:checked + span::before {
    transform: translate(-50%, -50%) scale(1); /* 当选中时显示圆点 */
}

.custom-radio label {
    display: flex; /* 使用Flexbox来对齐文本和单选按钮 */
    align-items: center; /* 文本垂直居中 */
    user-select: none; /* 防止用户选择文本 */
}

/* 为了更好地对齐文本，可以添加以下样式 */
.custom-radio span + div {
    margin-left: 5px; /* 文本与单选按钮之间的间距 */
}

/* 选中高亮 */
.text-context .selected {
    background-color: orange;!important; /* 更深的灰色背景 */
    color: #000; /* 黑色文字 */
}

/* 基础样式 */
.text-context .highlightable {
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 悬浮高亮 */
.text-context .highlightable:hover {
    background-color: #e0e0e0; /* 浅灰色背景 */
    color: #333; /* 深灰色文字 */
}

.container {
    display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    gap: 10px; /* 子元素之间的间隔 */
    padding: 10px; /* 容器内边距 */
    background-color: #f8f9fa; /* 背景色 */
    border: 1px solid #dee2e6; /* 边框 */
    border-radius: 4px; /* 圆角 */
}

.container .item {
    flex: 1 1 calc(25% - 20px); /* 每个子项占据25%的空间减去间距 */
    min-width: 100px; /* 最小宽度 */
    max-width: 200px; /* 最大宽度 */
    height: 50px; /* 固定高度 */
    background-color: white; /* 背景色 */
    border: 1px solid #ced4da; /* 边框 */
    border-radius: 4px; /* 圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move; /* 鼠标指针变为移动图标，提示可拖拽 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 微弱阴影，增加立体感 */
}
/* 基础样式 */
.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 35px; /* 为复选框留出空间 */
    /*margin-bottom: 12px;*/
    cursor: pointer;
    font-size: var(--font-size-base);;
    user-select: none;
}

/* 隐藏默认的复选框 */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* 创建自定义的复选框样式 */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px; /* 调整复选框的高度 */
    width: 20px; /* 调整复选框的宽度 */
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 当复选框被选中时的样式 */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #28a745;
    border-color: #28a745;
}

/* 在复选框被选中时添加勾号 */
.checkmark:after {
    content: "";
    display: none;
    width: 8px; /* 调整勾号的宽度 */
    height: 12px; /* 调整勾号的高度 */
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}


.custom-file-input {
    position: relative;
    display: inline-block;
    margin: 20px;
    padding: 10px 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}

.custom-file-input:hover {
    border-color: #aaa;
    background-color: #f0f0f0;
}

.custom-file-input input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.custom-file-input label {
    cursor: pointer;
    font-size: 16px;
    color: #333;
}


/* 确保所有开关样式都在 .custom-switch 内部生效 */
/* 开关样式 */
.custom-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.custom-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.custom-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.custom-switch input:checked + .slider {
    background-color: #2196F3;
}

.custom-switch input:checked + .slider:before {
    transform: translateX(26px);
}

/* 圆角滑块 */
.custom-switch .slider.round {
    border-radius: 26px;
}

.custom-switch .slider.round:before {
    border-radius: 50%;
}

/* 悬浮时的样式 */
.highlight-on-hover:hover {
    color: #2196F3; /* 高亮背景颜色 */
    cursor: pointer; /* 将鼠标指针更改为手形 */
}