@font-face {
    font-family: 'Regular';
    src: url(../../font/SourceHanSansCN/SourceHanSansCN-Regular.otf);
}

@font-face {
    font-family: 'Bold';
    src: url(../../font/SourceHanSansCN/SourceHanSansCN-Bold.otf);
}

/* 定义变量 */
:root {

    /* 字体大小 */
    --fs_small: .12rem;
    --fs_default: .14rem;
    --fs_big: .18rem;

    /* 颜色 */
    --color_active: #409eff;
    --color_menu-bar: #304156;
    --color_menu-bar-hover: #263445;
    --color_theme: #35465c;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    font-size: 100px;
}

body {
    width: 100%;
    height: 100%;
    font-size: var(--fs_default);
    font-family: Regular;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

/* #region 图标 */
.icon {
    width: .16rem; 
    height: .16rem;
    fill: currentColor;
    overflow: hidden;
}

.icon-lg {
    width: .24rem;
    height: .24rem;
}

.icon-2x {
    width: .32rem;
    height: .32rem;
}

.icon-4x {
    width: .64rem;
    height: .64rem;
}
/* #endregion */

/* #region 表格 */
.default-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ddd;
    table-layout: fixed;
}

.default-table>thead {
    font-size: var(--fs_default);
    background-color: var(--color_thead);
}

.default-table>thead>tr>th {
    font-family: Bold;
    font-weight: normal;
}

.default-table>thead>tr>th,
.default-table>tbody>tr>td {
    height: .42rem;
    padding: .08rem;
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}
/* #endregion */

/* #region 默认按钮 */
.default-btn {
    display: inline-flex;
    align-items: center;
    height: .28rem;
    line-height: .28rem;
    padding: 0 .14rem;
    border: none;
    border-radius: 4px;
    outline: none;
    font-size: var(--fs_default);
    color: #fff;
    background-color: var(--color_theme);
    cursor: pointer;
}

.default-btn>i {
    margin-right: .4rem;
}

.default-btn:hover {
    opacity: .8;
}

.table-btn {
    height: .24rem;
    padding: 0 .12rem;
    line-height: .24rem;
}

.table-btn-2 {
    color: var(--color_theme);
    padding: 0;
    cursor: pointer;
}

.table-btn-2:hover {
    opacity: .8;
}
/* #endregion */

/* #region 标签 */
.default-label {
    display: inline-flex;
    justify-content: flex-end;
    width: 1.2rem;
    padding-right: .1rem;
}
/* #endregion */

/* #region 输入框 */
.default-input {
    width: 100%;
    height: .3rem;
    line-height: .3rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    padding: 0 .1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* #endregion */

/* #region 隔层 */
.mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(35, 35, 35, .35);
    opacity: 1;
}
/* #endregion */