/* 颜色 */
html {
    /* 默认 */
    --primary: #3c3b39;
    /* 通用 */
    --secondary: #0b74d5;
    /* 成功 */
    --success: #86a361;
    /* 警告 */
    --warning: #E6A23C;
    /* 危险 */
    --danger: #F56C6C;
    /* 和谐 */
    --muted: #909399;
    /* 白色 */
    --white: #FAFAFA;
    /* 黑色 */
    --black: #23292e;
    /* 长白色 */
    --white-ligth: #FAFAFA;
    /* 长黑色 */
    --black-light: #23292e;

    /* 默认-10 */
    --primary-10: #3c3b39e0;
    /* 通用-10 */
    --secondary-10: #0b74d5e0;
    /* 成功-10 */
    --success-10: #86a361e0;
    /* 警告-10 */
    --warning-10: #E6A23Ce0;
    /* 危险-10 */
    --danger-10: #F56C6Ce0;
    /* 和谐-10 */
    --muted-10: #909399e0;
    /* 白色-10 */
    --white-10: #FAFAFAe0;
    /* 黑色-10 */
    --black-10: #23292ee0;
    /* 长白色-10 */
    --white-ligth-10: #FAFAFAe0;
    /* 长黑色-10 */
    --back-light-10: #23292ee0;

    /* 默认-40 */
    --primary-40: #3c3b39b0;
    /* 通用-40 */
    --secondary-40: #0b74d5b0;
    /* 成功-40 */
    --success-40: #86a361b0;
    /* 警告-40 */
    --warning-40: #E6A23Cb0;
    /* 危险-40 */
    --danger-40: #F56C6Cb0;
    /* 和谐-40 */
    --muted-40: #909399b0;
    /* 白色-40 */
    --white-40: #FAFAFAb0;
    /* 黑色-40 */
    --black-40: #23292eb0;
    /* 长白色-40 */
    --white-ligth-40: #FAFAFAb0;
    /* 长黑色-40 */
    --back-light-40: #23292eb0;

    /* 字体大小 */
    --font-size: 14px;
    --font-size-16: 16px;
    --font-size-20: 20px;

    /* 其他 */
    --transition: all 235ms ease 0s;
    --box-shadow-small: 0px 0px 5px rgba(0, 0, 0, 0.4);
    --box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
    --box-shadow-hover: 0px 1px 1px rgba(0, 0, 0, 0.3);
    --transform-3d-010: translate3d(0, 1px, 0);

    /* 圆角 */
    --border-radius: 4px;
    --border-radius-large: 8px;

    --body-bg: #fff;
}

/* 暗黑 */
html.dark {
    --primary: #FAFAFA;
    --white: #3c3b39;
    --black: #FAFAFA;

    --primary-10: #FAFAFAe0;
    --white-10: #3c3b39e0;
    --black-10: #FAFAFAe0;

    --primary-40: #FAFAFAb0;
    --white-40: #3c3b39b0;
    --black-40: #FAFAFAb0;

    --body-bg: #2f363c;
}

::view-transition-old(*) {
    animation: none;
}

::view-transition-new(*) {
    animation: clip 0.5s ease-in;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 9999;
}

html.dark::view-transition-old(*) {
    animation: clip 0.5s ease-in reverse;
}

html.dark::view-transition-new(*) {
    animation: none;
}

html.dark::view-transition-old(root) {
    z-index: 9999;
}

html.dark::view-transition-new(root) {
    z-index: 1;
}

@keyframes clip {
    from {
        clip-path: circle(0% at var(--x) var(--y));
    }

    to {
        clip-path: circle(var(--r) at var(--x) var(--y));
    }
}

/* 默认body */
body {
    background-color: var(--body-bg);
    color: var(--primary);
    font-size: var(--font-size);
    font-family: "Microsoft YaHei";
}


/* 消除默认样式 */
html,
body,
div,
/* ul, */
/* li, */
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
/* ol, */
form,
input,
textarea,
th,
td,
select {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    min-height: 100%;
    margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

ul,
ol {
    list-style: none;
}

img {
    border: none;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}

a {
    text-decoration-color: var(--secondary);
    color: var(--primary);
    text-decoration-style: wavy;
}

a:hover {
    text-decoration-color: var(--success);
    color: var(--primary-10);
}

table {
    border-collapse: collapse;
    table-layout: fixed;
}

input,
textarea {
    outline: none;
    border: none;
}

textarea {
    resize: none;
    overflow: auto;
}

h1 {
    font-size: 4rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.8rem;
}

/* 按钮 */

/* 默认按钮 */
.bny-btn {
    color: var(--primary);
    background-color: var(--white);
    border: 2px solid var(--primary);
    padding: 4px 11px;
    border-radius: var(--border-radius-large);
    /* overflow: hidden; */
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
    margin-bottom: 8px;
    text-decoration: none;
}

a.bny-btn {
    display: inline-block;
}

.bny-btn:hover {
    cursor: pointer;
    color: var(--primary-10);
    background-color: var(--white-10);
    border: 2px solid var(--primary-10);
}

.bny-btn:active {
    color: var(--primary-40);
    background-color: var(--white-40);
    border: 2px solid var(--primary-40);
    transform: var(--transform-3d-010);
    box-shadow: var(--box-shadow-hover);
}

.bny-btn.bg-secondary:hover {
    color: var(--white-10);
    background-color: var(--secondary-10);
    border-color: var(--secondary-10);
}

.bny-btn.bg-secondary:active {
    color: var(--white-40);
    background-color: var(--secondary-40);
    border-color: var(--secondary-40);
}

.bny-btn.bg-success:hover {
    color: var(--white-10);
    background-color: var(--success-10);
    border-color: var(--success-10);
}

.bny-btn.bg-success:active {
    color: var(--white-40);
    background-color: var(--success-40);
    border-color: var(--success-40);
}

.bny-btn.bg-warning:hover {
    color: var(--white-10);
    background-color: var(--warning-10);
    border-color: var(--warning-10);
}

.bny-btn.bg-warning:active {
    color: var(--white-40);
    background-color: var(--warning-40);
    border-color: var(--warning-40);
}

.bny-btn.bg-danger:hover {
    color: var(--white-10);
    background-color: var(--danger-10);
    border-color: var(--danger-10);
}

.bny-btn.bg-danger:active {
    color: var(--white-40);
    background-color: var(--danger-40);
    border-color: var(--danger-40);
}

.bny-btn.bg-muted:hover {
    color: var(--white-10);
    background-color: var(--muted-10);
    border-color: var(--muted-10);
}

.bny-btn.bg-muted:active {
    color: var(--white-40);
    background-color: var(--muted-40);
    border-color: var(--muted-40);
}

.bny-btn.bg-white:hover {
    color: var(--black-10);
    background-color: var(--white-10);
    border-color: var(--white-10);
}

.bny-btn.bg-white:active {
    color: var(--black-40);
    background-color: var(--white-40);
    border-color: var(--white-40);
}

.bny-btn.bg-black:hover {
    color: var(--white-10);
    background-color: var(--black-10);
    border-color: var(--black-10);
}

.bny-btn.bg-black:active {
    color: var(--white-40);
    background-color: var(--black-40);
    border-color: var(--black-40);
}

/* ------------------------- */
.bny-btn.border-secondary:hover {
    border-color: var(--secondary-10);
    color: var(--secondary-10);
}

.bny-btn.border-secondary:active {
    border-color: var(--secondary-40);
    color: var(--secondary-40);
}

.bny-btn.border-success:hover {
    border-color: var(--success-10);
    color: var(--success-10);
}

.bny-btn.border-success:active {
    border-color: var(--success-40);
    color: var(--success-40);
}

.bny-btn.border-warning:hover {
    border-color: var(--warning-10);
    color: var(--warning-10);
}

.bny-btn.border-warning:active {
    border-color: var(--warning-40);
    color: var(--warning-40);
}

.bny-btn.border-danger:hover {
    border-color: var(--danger-10);
    color: var(--danger-10);
}

.bny-btn.border-danger:active {
    border-color: var(--danger-40);
    color: var(--danger-40);
}

.bny-btn.border-muted:hover {
    border-color: var(--muted-10);
    color: var(--muted-10);
}

.bny-btn.border-muted:active {
    border-color: var(--muted-40);
    color: var(--muted-40);
}

.bny-btn.border-white:hover {
    border-color: var(--white-10);
    color: var(--white-10);
}

.bny-btn.border-white:active {
    border-color: var(--white-40);
    color: var(--white-40);
}

.bny-btn.border-black:hover {
    border-color: var(--black-10);
    color: var(--black-10);
}

.bny-btn.border-black:active {
    border-color: var(--black-40);
    color: var(--black-40);
}

.bny-btn.bny-btn-disabled,
button[disabled].bny-btn {
    cursor: not-allowed;
    opacity: 0.5;
}

[round].bny-btn {
    border-radius: 18px;
    overflow: hidden;
}

[circle].bny-btn {
    border-radius: 50%;
    overflow: hidden;
    padding: 11.5px 12px;
    text-align: center;
}

.bny-btn+.bny-btn {
    margin-left: 4px;
}

.bny-btn-group {
    display: inline-flex;
    vertical-align: middle;
    flex-wrap: nowrap;
}

.bny-btn-group:before,
.bny-btn-group:after {
    display: table;
    content: "";
}

.bny-btn-group .bny-btn {
    margin: 0;
    border-radius: 0;
    border-left-width: 1px;
    border-right-width: 1px;
}

.bny-btn-group .bny-btn:first-child {
    border-left-width: 2px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.bny-btn-group .bny-btn:last-child {
    border-right-width: 2px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.bny-btn-group+.bny-btn-group {
    margin-left: 4px;
}

/* 输入框 */
.bny-input,
.bny-textarea {
    border: 2px solid var(--primary);
    display: block;
    width: 100%;
    padding-left: 10px;
    background-color: var(--white);
    color: var(--black);
    border-radius: var(--border-radius);
    height: 38px;
    line-height: 1.3;
    transition: var(--transition);
    /* box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); */
}

.bny-input:focus,
.bny-textarea:focus,
.bny-select:focus {
    border-color: var(--success-40);
    /* box-shadow: var(--box-shadow);
    transform: var(--transform-3d-010);
    box-shadow: var(--box-shadow-hover); */
}

.bny-input::placeholder,
.bny-textarea::placeholder {
    color: var(--muted);
}

.bny-textarea {
    position: relative;
    min-height: 100px;
    height: auto;
    line-height: 20px;
    padding: 6px 10px;
    resize: vertical;
}

.bny-input-group {
    position: relative;
    display: flex;
    border-collapse: separate;
    align-items: center;
}

.bny-input-group .intersp {
    border: 2px solid var(--primary);
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.bny-input-group .intersp:hover {
    cursor: pointer;
}

.bny-input-group .intersp:first-child {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.bny-input-group input:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

.bny-input-group .intersp~input {
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bny-input-group input~.intersp {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.bny-form-group {
    margin-bottom: 15px;
    clear: both;
}

.bny-form-group label:first-child {
    display: flex;
    padding: 9px 15px;
    margin-bottom: 5px;
    padding-left: 0px;
    font-weight: 400;
    line-height: 20px;
    flex-wrap: nowrap;
    align-items: center;
    color: var(--primary);
}

.bny-form-group label:first-child::before {
    content: "";
    height: 20px;
    background-color: var(--primary);
    display: inline-block;
    border: 2px solid var(--primary);
    margin-right: 5px;
    border-radius: 10px;
}

.bny-form-inline {
    margin-bottom: 15px;
    clear: both;
    display: flex;
    align-items: flex-start;
}

.bny-form-inline label:first-child {
    position: relative;
    padding: 9px 15px;
    width: 110px;
    min-width: 110px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
    color: var(--primary);
}

.bny-form-pane {
    margin-bottom: 15px;
    clear: both;
    display: flex;
    align-items: flex-start;
}

.bny-form-pane label:first-child {
    position: relative;
    padding: 7px 5px;
    width: 110px;
    min-width: 110px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid var(--primary);
    border-right-width: 1px;
    border-radius: var(--border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--muted-40);
    color: var(--primary);
}

.bny-form-pane .bny-input {
    border-left-width: 1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bny-form-text {
    margin-bottom: 15px;
    clear: both;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.bny-form-text label:first-child {
    position: relative;
    width: 100%;
    padding: 7px 15px;
    font-weight: 400;
    line-height: 20px;
    box-sizing: border-box;
    border: 2px solid var(--primary);
    border-radius: var(--border-radius);
    background-color: var(--muted-40);
    color: var(--primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-width: 1px;
}

.bny-form-text .bny-textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-width: 1px;
}

[disabled].bny-input,
[disabled].bny-textarea {
    cursor: not-allowed;
    opacity: 0.5;
}

/* 选择框 */
.bny-select {
    display: block;
    width: 100%;
    border: 2px solid var(--primary);
    color: var(--primary);
    background-color: var(--white);
    border-radius: var(--border-radius);
    height: 38px;
    line-height: 1.3;
    padding-left: 10px;
    padding-right: 10px;
    transition: var(--transition);
    /* box-shadow: var(--box-shadow); */
}

.bny-form-pane .bny-select:checked {
    border-left-width: 1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bny-form-pane .bny-select {
    border-left-width: 1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[disabled].bny-select {
    cursor: not-allowed;
    opacity: 0.5;
}

/* 单选框 */
.bny-radio {
    height: 38px;
    padding: 0 10px;
    font-weight: 400;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.bny-form-pane .bny-radio {
    border: 2px solid var(--primary);
    border-left-width: 0;
    border-right-width: 0;
}

.bny-radio span:hover {
    cursor: pointer;
}

.bny-radio:hover>span::before {
    cursor: pointer;
    border-color: var(--success-10);

}

.bny-radio:active>span::before {
    transform: var(--transform-3d-010);
    box-shadow: var(--box-shadow-hover);
}

.bny-radio input[type="radio"] {
    display: none;
}

.bny-radio span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bny-radio>span::before {
    content: "";
    border: 2px solid var(--primary);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
    padding: 1px;
    box-sizing: border-box;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.bny-radio input[type="radio"]:checked+span::before {
    background-color: var(--muted);
}

.bny-form-pane label+.bny-radio {
    border-left-width: 0px;
}

.bny-form-pane .bny-radio:nth-child(2) {
    border-left-width: 1px;
}

.bny-form-pane .bny-radio:last-child {
    border-left-width: 0;
    border-right-width: 2px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.bny-radio input[type="radio"][disabled]+span,
.bny-radio input[type="radio"][disabled]+span::before {
    cursor: not-allowed;
    opacity: 0.5;
}

/* 多选框 */
.bny-checkbox {
    display: inline-flex;
    height: 38px;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    padding: 0 10px;
    color: var(--primary);
}

.bny-checkbox:hover {
    cursor: pointer;
}

.bny-checkbox input[type="checkbox"] {
    display: none;
}

.bny-checkbox>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bny-checkbox>span::before {
    content: "";
    border: 2px solid var(--primary);
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    margin-right: 5px;
    border-radius: var(--border-radius);
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 600;
}

.bny-checkbox:hover>span::before {
    border-color: var(--success-10);
}

.bny-form-pane .bny-checkbox {
    border: 2px solid var(--primary);
    border-left-width: 0;
    border-right-width: 0;
}

.bny-checkbox input[type="checkbox"]:checked+span::before {
    /* content: "√"; */
    background-color: var(--muted);
}

.bny-form-pane .bny-checkbox:nth-child(2) {
    border-left-width: 1px;
}

.bny-form-pane .bny-checkbox:last-child {
    border-left-width: 0;
    border-right-width: 2px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* 开关 */
.bny-switch {
    display: inline-flex;
    height: 38px;
    align-items: center;
    /* justify-content: center; */
    line-height: 20px;
    padding: 0 10px;
    line-height: 38px;
}

.bny-switch:hover {
    cursor: pointer;
}

.bny-switch>input {
    display: none;
}

.bny-switch>.bny-switch-slider {
    display: inline-flex;
    width: 56px;
    height: 24px;
    border-radius: var(--border-radius);
    border: 2px solid var(--primary);
    border-radius: 20px;
    align-items: center;
    position: relative;
}

.bny-switch>.bny-switch-slider::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--muted);
    box-sizing: border-box;
    border-radius: 50%;
    margin: 0 2px;
    transition: var(--transition);
}

.bny-switch>.bny-switch-slider>span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    padding: 0 4px;
}

.bny-switch>.bny-switch-slider>span:first-child {
    display: none;
}

.bny-switch>input[type="checkbox"]:checked+.bny-switch-slider {
    background-color: var(--muted);
}

.bny-switch>input[type="checkbox"]:checked+.bny-switch-slider>span:first-child {
    display: flex;
    justify-content: flex-start;
    color: var(--white);
}

.bny-switch>input[type="checkbox"]:checked+.bny-switch-slider>span:last-child {
    display: none;
}

.bny-switch>input[type="checkbox"]:checked+.bny-switch-slider::before {
    transform: translateX(32px);
    background-color: var(--white);
}

.bny-form-pane label:nth-child(2) {
    border-left: 1px solid var(--primary);
}

/* 卡片 */
.bny-card {
    border: 2px solid var(--primary-10);
    transition: var(--transition);
    box-shadow: var(--box-shadow);
    box-sizing: border-box;
    color: var(--primary);
}

.bny-card:hover {
    transform: var(--transform-3d-010);
    box-shadow: var(--box-shadow-hover);
}

.bny-card .bny-card-body {
    flex: 1 1 auto;
    padding: 1rem;
}

.bny-card .bny-card-body .bny-card-title {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.bny-card .bny-card-body .bny-card-subtitle {
    color: var(--secondary-10);
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.bny-card .bny-card-body .bny-card-text {
    margin-bottom: 1rem;
    margin-top: 0;
}

.bny-card img {
    max-width: 100%;
}

.bny-card .bny-card-body .bny-card-link {
    color: var(--secondary);
}

.bny-card .bny-card-body .bny-card-link+.bny-card-link {
    margin-left: 1rem;
}

.bny-card .bny-card-header,
.bny-card .bny-card-footer {
    padding: 0.75rem 1.25rem;
    background-color: var(--white);
}

.bny-card .bny-card-header {
    border-bottom: 2px solid var(--primary-10);
}

.bny-card .bny-card-footer {
    border-top: 2px solid var(--primary-10);
}

/* 选项卡 */
.bny-tab {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

.bny-tab .bny-tab-title {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid var(--primary);
    flex-wrap: wrap;
    border-radius: var(--border-radius);
    min-height: 44px;
}

.bny-tab[nowrap] .bny-tab-title {
    overflow: auto;
    flex-wrap: nowrap;
    padding: 0 30px;
}

.bny-tab[nowrap] .bny-tab-title::-webkit-scrollbar {
    display: none;
}

.bny-tab[nowrap] .bny-tab-setwin {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 0;
}

.bny-tab[nowrap] .bny-tab-setwin span {
    font-size: var(--font-size-20);
    padding: 0 5px;
    cursor: pointer;
    background-color: var(--white);
    line-height: 40px;
    border: 2px solid var(--primary);
    border-radius: var(--border-radius);
}

.bny-tab[nowrap] .bny-tab-setwin span:first-child {
    float: left;
}

.bny-tab[nowrap] .bny-tab-setwin span:last-child {
    float: right;
}

.bny-tab .bny-tab-title .bny-tab-item {
    position: relative;
    line-height: 40px;
    min-width: min-content;
    margin: 0;
    padding: 0 15px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: var(--primary);
    white-space: nowrap;
}

.bny-tab .bny-tab-title .bny-tab-item>.del {
    margin-left: 5px;
    font-size: var(--font-size);
}

.bny-tab .bny-tab-title .bny-tab-item>.del:hover {
    background: var(--danger);
}

.bny-tab .bny-tab-title .bny-tab-item:hover {
    background-color: var(--primary-10);
    color: var(--white-10);
}

.bny-tab .bny-tab-title .bny-tab-item:active {
    background-color: var(--primary-40);
    color: var(--white-40);
}

.bny-tab .bny-tab-title .this {
    background-color: var(--primary);
    color: var(--white);
}

.bny-tab .bny-tab-body {
    padding: 15px 0;
}

.bny-tab .bny-tab-body>div {
    display: none;
}

.bny-tab .bny-tab-body .this {
    display: block;
}

/* 代码code */

code {
    background: rgba(27, 31, 35, .05);
    border: 1px solid #e4e4e4;
    display: inline;
    padding: 1px 2px;
}

pre {
    font-family: monospace, monospace;
    color: var(--primary);
    background-color: var(--white);
    border-color: var(--primary-10);
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    display: block;
    line-height: 1.5;
    overflow-x: auto;
    padding: 1rem;
    white-space: pre;
    word-break: break-all;
    word-wrap: break-word;
}

pre code {
    color: var(--primary);
    display: block;
    font-size: inherit;
    padding: initial;
    white-space: pre;
    background-color: transparent;
    border: none;
}

/* 提示tips */
[tips-top],
[tips-bottom],
[tips-left],
[tips-right] {
    position: relative;
    cursor: pointer;
}

[tips-top]::before,
[tips-bottom]::before,
[tips-left]::before,
[tips-right]::before {
    content: "";
    position: absolute;
    background-color: var(--muted);
    color: var(--white-light);
    border-radius: var(--border-radius);
    white-space: nowrap;
    z-index: 999;
    font-family: inherit;
    font-size: 0.875em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* 悬停时通用样式 */
[tips-top]:hover::before,
[tips-bottom]:hover::before,
[tips-left]:hover::before,
[tips-right]:hover::before {
    opacity: 1;
    visibility: visible;
    padding: 5px 10px;
}

/* 方向定位 */
[tips-top]:hover::before {
    content: attr(tips-top);
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

[tips-bottom]:hover::before {
    content: attr(tips-bottom);
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
}

[tips-left]:hover::before {
    content: attr(tips-left);
    top: 50%;
    right: 110%;
    transform: translateY(-50%);
}

[tips-right]:hover::before {
    content: attr(tips-right);
    top: 50%;
    left: 110%;
    transform: translateY(-50%);
}

/* 走马灯 */
.bny-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.bny-marquee-content {
    display: inline-block;
    padding-left: 100%;
    /* 初始位置 */
    animation: bny-marquee 15s linear infinite;
}

@keyframes bny-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 警示alert */
.alert-primary {
    /* 主要的 */
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    border-style: solid;
    border-width: 2px;
    border-color: var(--primary-40);
    background-color: var(--muted-40);
    color: var(--primary);
}

.alert-secondary {
    /* 通用的 */
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    border-style: solid;
    border-width: 2px;
    border-color: var(--secondary);
    background-color: var(--white);
    color: var(--secondary);
}

.alert-success {
    /* 成功的 */
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    border-style: solid;
    border-width: 2px;
    border-color: var(--success);
    background-color: var(--white);
    color: var(--success);
}

.alert-warning {
    /* 警告的 */
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    border-style: solid;
    border-width: 2px;
    border-color: var(--warning);
    background-color: var(--white);
    color: var(--warning);
}

.alert-danger {
    /* 危险的 */
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    border-style: solid;
    border-width: 2px;
    border-color: var(--danger);
    background-color: var(--white);
    color: var(--danger);
}

.alert-primary,
.alert-secondary,
.alert-success,
.alert-warning,
.alert-danger {
    transition: all 235ms ease-in-out 0s;
    opacity: 1;
}

.alert-del {
    float: right;
    margin-left: 10px;
}

.alert-del:hover {
    cursor: pointer;
}

/* 菜单栏 */
.bny-menu {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-small);
    width: min-content;
}

.bny-menu li {
    list-style: none;
}

.bny-menu menu {
    margin: 0;
}

.menu-list {
    margin: 0;
    display: block;
    width: 100%;
    padding: 4px;
}

.menu-list+.menu-list {
    border-top: 1px solid var(--primary-10);
}

.menu-sub-list {
    display: none;
    padding: 4px;
    background-color: var(--white);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-small);
    position: absolute;
    left: 100%;
    right: 0;
    z-index: 100;
    width: 100%;
    top: 0;
    flex-direction: column;
}

.menu-sub-list:hover {
    display: flex;
}

.menu-item {
    position: relative;
}

.menu-btn {
    font: inherit;
    border: 0;
    padding: 4px 4px;
    padding-right: 36px;
    width: 100%;
    border-radius: var(--border-radius-large);
    text-align: left;
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--white);
    white-space: nowrap;
}

.menu-btn:hover {
    cursor: pointer;
    background-color: var(--primary-10);
    color: var(--white);
}

.menu-btn:hover+.menu-sub-list {
    display: flex;
}

.menu-btn .icon {
    flex-shrink: 0;
    margin-right: 5px;
}

.menu-btn .icon:nth-of-type(2) {
    margin-right: 0;
    position: absolute;
    right: 8px;
}

/* 引用 */
blockquote {
    margin: 0;
    margin-bottom: 10px;
    padding: 12px;
    line-height: 1.8;
    border: 2px solid var(--muted);
    border-left: 5px solid var(--primary);
    background-color: var(--muted);
    color: var(--primary);
}

blockquote[type="border"] {
    border: 2px solid var(--primary);
    border-left-width: 5px;
    background-color: var(--white);
}

/* 字段集 */
fieldset.bny-fieldset {
    border-color: var(--primary);
    margin-bottom: 10px;
    padding: 0;
    border-width: 1px;
    border-style: solid;
}

fieldset legend {
    margin-left: 20px;
    padding: 0 10px;
    font-size: 20px;
    color: var(--primary);
    line-height: 1.8;
}

fieldset.bny-fieldset .bny-fieldset-box {
    padding: 12px;
}

fieldset.bny-fieldset-title {
    margin: 12px 0;
    border-width: 0;
    border-top-width: 1px;
    border-color: var(--primary);
}

/* 水平线 */
hr {
    height: 0;
    line-height: 0;
    margin: 10px 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--primary);
    clear: both;
    overflow: hidden;
    background: 0 0;
}

/* 表格 */
table {
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: var(--white);
    border: 2px solid var(--primary);
}

table th,
table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--muted-40);
}

table th {
    background-color: var(--primary-40);
    color: var(--white);
}

table tr:hover {
    background-color: var(--muted-10);
}

/* 移动端适配 */
@media screen and (max-width: 750px) {
    table {
        border: 0;
        box-shadow: none;
        background-color: unset;
    }

    table col {
        display: none;
    }

    table thead {
        display: none;
    }

    table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid var(--muted-40);
        border-radius: 4px;
        background-color: var(--white);
        border: 2px solid var(--primary);
    }

    table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        text-align: right;
        border-bottom: 1px solid var(--muted-40);
    }

    table td:last-child {
        border-bottom: 0;
    }

    table td::before {
        content: attr(label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 15px;
        min-width: min-content;
    }
}

/* 遮蔽层 */
.bny-shield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 弹窗层 */
.bny-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 991;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 消息框 */
.bny-msg {
    padding: 8px 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 确认框 */
.bny-confirm {
    width: 240px;
    max-width: calc(100vw - 32px);
    border: 2px solid var(--primary);
    padding: 8px 16px;
    border-radius: var(--border-radius);
    background-color: var(--white);

}

.bny-alert {
    background-color: var(--white);
}

.bny-alert>div {
    margin: 0;
}

.bny-confirm .bny-confirm-title {
    font-size: var(--font-size-20);
    color: var(--primary);
    font-weight: 500;
}

.bny-confirm .bny-confirm-body {
    margin: 8px 0 16px 0;
    font-size: var(--font-size-16);
    color: var(--primary);
    word-wrap: break-word;
}

.bny-confirm .bny-confirm-btn {
    text-align: right;
}

/* 页面框 */
.bny-page {
    display: block;
    border: 2px solid var(--primary);
    background-color: var(--white);
    max-width: 100%;
    max-height: 100%;
    z-index: 9999;
    position: fixed;
    box-shadow: var(--box-shadow-small);
    box-sizing: border-box;
    overflow: hidden;
}

.bny-page .bny-page-header {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    border-bottom: 2px solid var(--primary);
}

.bny-page .bny-page-header:active {
    cursor: move;
}

.bny-page .bny-page-header .bny-page-setwin {
    white-space: nowrap;
}

.bny-page .bny-page-header .bny-page-setwin span {
    margin-left: 10px;
}

.bny-page .bny-page-header .bny-page-setwin span:hover {
    cursor: pointer;
}

.bny-page .bny-page-content {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 50px);
}

.bny-page .bny-page-content>iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 动画 */
.bny-anim-scale {
    /* 放大 */
    animation: anim-scale 235ms ease-in-out;
}

@keyframes anim-scale {
    from {
        transform: scale(0.1);
    }

    to {
        transform: scale(1);
    }
}

.bny-anim-scalesmall {
    /* 缩小 */
    animation: anim-scalesmall 235ms ease-in-out;
}

@keyframes anim-scalesmall {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

.bny-anim-rotate {
    /* 旋转 */
    animation: anim-spin .8s linear infinite;
}

.bny-anim-left {
    /* 左侧滑出 */
    animation: anim-left 235ms ease-in-out;
}

@keyframes anim-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.bny-anim-leftOut {
    /* 退出到左侧 */
    animation: anim-leftOut 235ms ease-in-out;
}

@keyframes anim-leftOut {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.bny-anim-right {
    /* 右侧滑出 */
    animation: anim-right 235ms ease-in-out;
}

@keyframes anim-right {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.bny-anim-rightOut {
    /* 退出到右侧 */
    animation: anim-rightOut 235ms ease-in-out;
}

@keyframes anim-rightOut {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

.bny-anim-up {
    /* 顶部滑出 */
    animation: anim-up 235ms ease-in-out;
}

@keyframes anim-up {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.bny-anim-upOut {
    /* 退出到顶部 */
    animation: anim-upOut 235ms ease-in-out;
}

@keyframes anim-upOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

.bny-anim-down {
    /* 底部滑出 */
    animation: anim-down 235ms ease-in-out;
}

@keyframes anim-down {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.bny-anim-downOut {
    /* 退出到底部 */
    animation: anim-downOut 235ms ease-in-out;
}

@keyframes anim-downOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

/* 面板 */
.bny-panel {
    position: relative;
    border-width: 2px;
    border-style: solid;
    border-radius: 2px;
    border-color: var(--primary);
    box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.bny-panel summary:hover {
    cursor: pointer;

}

.bny-panel-body {
    padding: 15px 0;
}

.bny-panel summary {
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    background-color: var(--white);
    border-bottom: 1px solid var(--primary-10);
    list-style: none;
}

.bny-panel summary::-webkit-details-marker {
    display: none;
}

.bny-panel summary::before {
    display: inline-flex;
    content: "\e76e";
    width: 14px;
    height: 14px;
    margin-right: 5px;
    font-size: 1.2em;
    align-items: center;
    justify-content: center;
}

.bny-panel details[open] summary::before {
    content: "\e770";
}

.bny-panel details:last-child summary {
    border-bottom: none;
}

.bny-panel details[open]:last-child summary {
    border-bottom: 1px solid var(--primary-10);
}

.bny-panel .bny-panel-body {
    padding: 10px 15px;
    line-height: 1.6;
    border-bottom: 1px solid var(--primary-10);
}

.bny-panel details:last-child .bny-panel-body {
    border-bottom: none;
}

/* 加载 */
.bny-loading {
    border: 5px solid var(--muted-40);
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation: anim-spin .8s linear infinite;
}

.bny-loading[size="small"] {
    width: 1.5em;
    height: 1.5em;
}

.bny-loading[size="large"] {
    width: 4.5em;
    height: 4.5em;
}

@keyframes anim-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 导航栏 */
.bny-nav {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    box-shadow: var(--box-shadow-small);
    background-color: var(--white);
    height: 60px;
}

.bny-nav .bny-nav-title {
    /* 导航栏标题 */
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-20);
    height: 100%;
}

.bny-nav .bny-nav-title a {
    width: 100%;
    height: 100%;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bny-nav .bny-nav-title * {
    max-width: 100%;
    max-height: 100%;
    font-size: var(--font-size-20);
}

.bny-nav .bny-nav-body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.bny-nav .bny-nav-body .bny-nav-item {
    text-indent: 0;
    height: 100%;
}

.bny-nav .bny-nav-body .bny-nav-item a {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    padding: 0 10px;
    text-decoration: none;
    font-size: var(--font-size-16);
}

.bny-nav .bny-nav-body .bny-nav-item a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--secondary);
}

.bny-nav .bny-nav-body .bny-nav-item.active a {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--danger);
}

.bny-nav .bny-nav-body .bny-nav-item::before {
    display: none;
}

.bny-nav .bny-nav-body .bny-nav-item cite {
    font-style: normal;
}

.bny-nav .bny-nav-title .toggle {
    font-size: var(--font-size-20);
    display: none;
}

@media screen and (max-width: 768px) {
    .bny-nav {
        flex-wrap: wrap;
        height: auto;
    }

    .bny-nav .bny-nav-title {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
    }

    .bny-nav .bny-nav-title .toggle {
        display: block;
        margin: 0;
    }

    .bny-nav .bny-nav-body {
        display: block;
        width: 100%;
        border-top: 1px solid var(--primary);
        flex-direction: column;
        transition: var(--transition);
        overflow: hidden;
        height: 0;
    }

    .bny-nav .bny-nav-body .bny-nav-item {
        width: 100%;
        height: auto;
    }

    .bny-nav .bny-nav-body .bny-nav-item a {
        width: 100%;
        justify-content: flex-start;
        padding: 16px;
    }
}

/* 侧边导航 */
.bny-nav-lateral {
    height: 100%;
    width: 220px;
    z-index: 100;
    transition: var(--transition);
    box-shadow: var(--box-shadow-small);
    background-color: var(--white);
}

.bny-nav-lateral ul {
    padding: 0;
    margin: 0;
}

.bny-nav-lateral ul li {
    text-indent: 0;
}

.bny-nav-lateral ul li::before {
    display: none;
}

.bny-nav-lateral.close {
    width: 70px;
}

.bny-nav-lateral .bny-nav-title {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
}

.bny-nav-lateral .bny-nav-title i {
    font-size: 30px;
    min-width: 70px;
    text-align: center;
    line-height: 50px;
}

.bny-nav-lateral .bny-nav-title .logo {
    max-height: 50px;
    max-width: 78px;
    margin: 0 10px;
}

.bny-nav-lateral .bny-nav-title .bny-nav-text {
    font-size: 22px;
    font-weight: 600;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.bny-nav-lateral.close .bny-nav-title .bny-nav-text {
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}

.bny-nav-lateral .bny-nav-body {
    height: 100%;
    padding: 30px 0 150px 0;
    overflow: auto;
}

.bny-nav-lateral.close .bny-nav-body {
    overflow: visible;
}

.bny-nav-lateral .bny-nav-body::-webkit-scrollbar {
    display: none;
}

.bny-nav-lateral .bny-nav-body li {
    position: relative;
    list-style: none;
    transition: var(--transition);
}

.bny-nav-lateral .bny-nav-body .bny-nav-child>li:hover {
    background: var(--muted-10);
}

.bny-nav-lateral .bny-nav-body li .bny-nav-iocn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.bny-nav-lateral .bny-nav-body .bny-nav-child>li .bny-nav-iocn {
    height: auto;
}

.bny-nav-lateral.close .bny-nav-body li .bny-nav-iocn {
    display: block
}

.bny-nav-lateral .bny-nav-body li i {
    min-width: 55px;
    font-size: var(--font-size-20);
    cursor: pointer;
    transition: var(--transition);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bny-nav-lateral .bny-nav-body li.showMenu>.bny-nav-iocn>i.arrow {
    transform: rotate(-180deg);
}

.bny-nav-lateral.close .bny-nav-body i.arrow {
    display: none;
}

.bny-nav-lateral .bny-nav-body li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 50px;
    padding: 0 10px;
}

.bny-nav-lateral .bny-nav-body li a .bny-nav-name {
    font-size: 18px;
    font-weight: 400;
    transition: var(--transition);
}

.bny-nav-lateral.close .bny-nav-body li a .bny-nav-name {
    opacity: 0;
    pointer-events: none;
}

.bny-nav-lateral .bny-nav-body li .bny-nav-child {
    background: var(--muted-40);
    display: none;
}

.bny-nav-lateral .bny-nav-body li.showMenu>.bny-nav-child {
    display: block;
}

.bny-nav-lateral .bny-nav-body li .bny-nav-child a {
    font-size: var(--font-size-16);
    white-space: nowrap;
    transition: var(--transition);
    color: var(--primary);
}

.bny-nav-lateral .bny-nav-body li .bny-nav-child a:hover {
    color: var(--primary);
}

.bny-nav-lateral.close .bny-nav-body li .bny-nav-child {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 0;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
    background-color: var(--white);
}

.bny-nav-lateral.close .bny-nav-body li .bny-nav-child li {
    padding: 10px;
}

.bny-nav-lateral.close .bny-nav-body li:hover .bny-nav-child {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: var(--transition);
    box-shadow: var(--box-shadow-small);
}

.bny-nav-lateral.close .bny-nav-body li:hover .bny-nav-child a {
    height: auto;
}

.bny-nav-lateral.close .bny-nav-body li:hover .bny-nav-child a i {
    min-width: 40px;
    width: 40px;
}

.bny-nav-lateral.close .bny-nav-body li:hover .bny-nav-child>.bny-nav-name {
    border-bottom: 1px solid var(--primary);
}

.bny-nav-lateral .bny-nav-body li .bny-nav-child .bny-nav-name {
    display: none;
}

.bny-nav-lateral.close .bny-nav-body li .bny-nav-child .bny-nav-name {
    font-size: 18px;
    opacity: 1;
    display: block;
}

/* 徽章 */
.bny-badge {
    position: relative;
    display: inline-block;
    padding: 0 .2em;
    font-size: 75%;
    text-align: center;
    border-radius: 2px;
    background-color: var(--muted);
    color: var(--white);
    left: 2px;
    top: -2px;
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-10);
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: var(--muted-40);
    border-radius: 3px;
}

/* 面包屑 */
.bny-breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: var(--white);
    margin-top: 15px;
}

.bny-breadcrumb>div {
    display: inline;
    font-size: var(--font-size-16);
}

.bny-breadcrumb>div+div::before {
    padding: 8px;
    content: "/\00a0";
}

.bny-breadcrumb>div a {
    color: var(--secondary);
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .bny-breadcrumb {
        flex-wrap: wrap;
        padding: 8px 12px;
    }

    .bny-breadcrumb>div {
        font-size: var(--font-size);
    }

    .bny-breadcrumb>div+div::before {
        padding: 0 4px;
    }
}

/* 下拉菜单 */
.bny-dropdown {
    position: fixed;
    min-width: min-content;
    background: var(--white);
    box-shadow: var(--box-shadow-small);
    opacity: 0;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 1000;
    height: 0;
    border-radius: var(--border-radius-large);
    overflow: hidden;
}

.bny-dropdown.active {
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

/* 列表 */
ol {
    list-style-type: decimal;
}

ol ol {
    list-style-type: upper-alpha;
}

ol ol ol {
    list-style-type: upper-roman;
}

ol ol ol ol {
    list-style-type: lower-alpha;
}

ol ol ol ol ol {
    list-style-type: lower-roman;
}

ul {
    list-style: none;
    margin-left: 0;
}

ul li::before {
    content: "-";
}

ul li {
    text-indent: -7px;
}

ul li .badge,
ul li [popover-bottom]::after,
ul li [popover-left]::after,
ul li [popover-right]::after,
ul li [popover-top]::after {
    text-indent: 0;
}

ul li::before {
    left: -7px;
    position: relative;
}

ul ul li::before {
    content: "+";
}

ul ul ul li::before {
    content: "~";
}

ul ul ul ul li::before {
    content: "⤍";
}

ul ul ul ul ul li::before {
    content: "⁎";
}

ul.inline li {
    display: inline;
    margin-left: 5px;
}

/* 布局 */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row:after,
.row:before {
    display: table;
    content: " ";
    clear: both;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row-no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.row-no-gutters [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
    float: left;
}

.col-xs-12 {
    width: 100%;
}

.col-xs-11 {
    width: 91.66666667%;
}

.col-xs-10 {
    width: 83.33333333%;
}

.col-xs-9 {
    width: 75%;
}

.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-7 {
    width: 58.33333333%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-5 {
    width: 41.66666667%;
}

.col-xs-4 {
    width: 33.33333333%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-2 {
    width: 16.66666667%;
}

.col-xs-1 {
    width: 8.33333333%;
}

.col-xs-pull-12 {
    right: 100%;
}

.col-xs-pull-11 {
    right: 91.66666667%;
}

.col-xs-pull-10 {
    right: 83.33333333%;
}

.col-xs-pull-9 {
    right: 75%;
}

.col-xs-pull-8 {
    right: 66.66666667%;
}

.col-xs-pull-7 {
    right: 58.33333333%;
}

.col-xs-pull-6 {
    right: 50%;
}

.col-xs-pull-5 {
    right: 41.66666667%;
}

.col-xs-pull-4 {
    right: 33.33333333%;
}

.col-xs-pull-3 {
    right: 25%;
}

.col-xs-pull-2 {
    right: 16.66666667%;
}

.col-xs-pull-1 {
    right: 8.33333333%;
}

.col-xs-pull-0 {
    right: auto;
}

.col-xs-push-12 {
    left: 100%;
}

.col-xs-push-11 {
    left: 91.66666667%;
}

.col-xs-push-10 {
    left: 83.33333333%;
}

.col-xs-push-9 {
    left: 75%;
}

.col-xs-push-8 {
    left: 66.66666667%;
}

.col-xs-push-7 {
    left: 58.33333333%;
}

.col-xs-push-6 {
    left: 50%;
}

.col-xs-push-5 {
    left: 41.66666667%;
}

.col-xs-push-4 {
    left: 33.33333333%;
}

.col-xs-push-3 {
    left: 25%;
}

.col-xs-push-2 {
    left: 16.66666667%;
}

.col-xs-push-1 {
    left: 8.33333333%;
}

.col-xs-push-0 {
    left: auto;
}

.col-xs-offset-12 {
    margin-left: 100%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-0 {
    margin-left: 0%;
}

@media (min-width: 768px) {

    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0%;
    }
}

@media (min-width: 992px) {

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: left;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-11 {
        width: 91.66666667%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-2 {
        width: 16.66666667%;
    }

    .col-md-1 {
        width: 8.33333333%;
    }

    .col-md-pull-12 {
        right: 100%;
    }

    .col-md-pull-11 {
        right: 91.66666667%;
    }

    .col-md-pull-10 {
        right: 83.33333333%;
    }

    .col-md-pull-9 {
        right: 75%;
    }

    .col-md-pull-8 {
        right: 66.66666667%;
    }

    .col-md-pull-7 {
        right: 58.33333333%;
    }

    .col-md-pull-6 {
        right: 50%;
    }

    .col-md-pull-5 {
        right: 41.66666667%;
    }

    .col-md-pull-4 {
        right: 33.33333333%;
    }

    .col-md-pull-3 {
        right: 25%;
    }

    .col-md-pull-2 {
        right: 16.66666667%;
    }

    .col-md-pull-1 {
        right: 8.33333333%;
    }

    .col-md-pull-0 {
        right: auto;
    }

    .col-md-push-12 {
        left: 100%;
    }

    .col-md-push-11 {
        left: 91.66666667%;
    }

    .col-md-push-10 {
        left: 83.33333333%;
    }

    .col-md-push-9 {
        left: 75%;
    }

    .col-md-push-8 {
        left: 66.66666667%;
    }

    .col-md-push-7 {
        left: 58.33333333%;
    }

    .col-md-push-6 {
        left: 50%;
    }

    .col-md-push-5 {
        left: 41.66666667%;
    }

    .col-md-push-4 {
        left: 33.33333333%;
    }

    .col-md-push-3 {
        left: 25%;
    }

    .col-md-push-2 {
        left: 16.66666667%;
    }

    .col-md-push-1 {
        left: 8.33333333%;
    }

    .col-md-push-0 {
        left: auto;
    }

    .col-md-offset-12 {
        margin-left: 100%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-0 {
        margin-left: 0%;
    }
}

@media (min-width: 1200px) {

    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        float: left;
    }

    .col-lg-12 {
        width: 100%;
    }

    .col-lg-11 {
        width: 91.66666667%;
    }

    .col-lg-10 {
        width: 83.33333333%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-8 {
        width: 66.66666667%;
    }

    .col-lg-7 {
        width: 58.33333333%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-5 {
        width: 41.66666667%;
    }

    .col-lg-4 {
        width: 33.33333333%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-2 {
        width: 16.66666667%;
    }

    .col-lg-1 {
        width: 8.33333333%;
    }

    .col-lg-pull-12 {
        right: 100%;
    }

    .col-lg-pull-11 {
        right: 91.66666667%;
    }

    .col-lg-pull-10 {
        right: 83.33333333%;
    }

    .col-lg-pull-9 {
        right: 75%;
    }

    .col-lg-pull-8 {
        right: 66.66666667%;
    }

    .col-lg-pull-7 {
        right: 58.33333333%;
    }

    .col-lg-pull-6 {
        right: 50%;
    }

    .col-lg-pull-5 {
        right: 41.66666667%;
    }

    .col-lg-pull-4 {
        right: 33.33333333%;
    }

    .col-lg-pull-3 {
        right: 25%;
    }

    .col-lg-pull-2 {
        right: 16.66666667%;
    }

    .col-lg-pull-1 {
        right: 8.33333333%;
    }

    .col-lg-pull-0 {
        right: auto;
    }

    .col-lg-push-12 {
        left: 100%;
    }

    .col-lg-push-11 {
        left: 91.66666667%;
    }

    .col-lg-push-10 {
        left: 83.33333333%;
    }

    .col-lg-push-9 {
        left: 75%;
    }

    .col-lg-push-8 {
        left: 66.66666667%;
    }

    .col-lg-push-7 {
        left: 58.33333333%;
    }

    .col-lg-push-6 {
        left: 50%;
    }

    .col-lg-push-5 {
        left: 41.66666667%;
    }

    .col-lg-push-4 {
        left: 33.33333333%;
    }

    .col-lg-push-3 {
        left: 25%;
    }

    .col-lg-push-2 {
        left: 16.66666667%;
    }

    .col-lg-push-1 {
        left: 8.33333333%;
    }

    .col-lg-push-0 {
        left: auto;
    }

    .col-lg-offset-12 {
        margin-left: 100%;
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-0 {
        margin-left: 0%;
    }
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important;
    }

    table.visible-xs {
        display: table !important;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
        display: inline !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important;
    }

    table.visible-sm {
        display: table !important;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-block {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline {
        display: inline !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important;
    }

    table.visible-md {
        display: table !important;
    }

    tr.visible-md {
        display: table-row !important;
    }

    th.visible-md,
    td.visible-md {
        display: table-cell !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-block {
        display: block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline {
        display: inline !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important;
    }

    table.visible-lg {
        display: table !important;
    }

    tr.visible-lg {
        display: table-row !important;
    }

    th.visible-lg,
    td.visible-lg {
        display: table-cell !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-block {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline {
        display: inline !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline-block {
        display: inline-block !important;
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

.visible-print {
    display: none !important;
}

/* 内置 */

.align-top {
    align-self: flex-start;
}

.align-middle {
    align-self: center;
}

.align-bottom {
    align-self: flex-end;
}

.block {
    display: block;
}

.inline {
    display: inline;
    width: auto;
}

.fl {
    float: left
}

.fr {
    float: right
}

.tl {
    text-align: left;
}

.tc {
    text-align: center
}

.tr {
    text-align: right;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow: hidden;
}

/* 阴影 */
.shadow {
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.shadow:hover {
    transform: var(--transform-3d-010);
    box-shadow: var(--box-shadow-hover);
}

/* 字体颜色 */
.text-primary {
    /* 黑色 */
    color: #303133;
    color: var(--primary);
}

.text-secondary {
    /* 通用 */
    color: #303133;
    color: var(--secondary);
}

.text-success {
    /* 成功 */
    color: #303133;
    color: var(--success);
}

.text-warning {
    /* 警告 */
    color: #303133;
    color: var(--warning);
}

.text-danger {
    /* 危险 */
    color: #303133;
    color: var(--danger);
}

.text-muted {
    /* 和谐 */
    color: #303133;
    color: var(--muted);
}

.text-white {
    /* 白色 */
    color: #fff;
    color: var(--white-ligth);
}

/* 背景色 */

.bg-primary {
    /* 默认 */
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

.bg-secondary {
    /* 蓝色 */
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.bg-success {
    /* 绿色 */
    color: var(--white);
    background-color: var(--success);
    border-color: var(--success);
}

.bg-warning {
    /* 黄色 */
    color: var(--white);
    background-color: var(--warning);
    border-color: var(--warning);
}

.bg-danger {
    /* 红色 */
    color: var(--white);
    background-color: var(--danger);
    border-color: var(--danger);
}

.bg-muted {
    /* 灰色 */
    color: var(--white);
    background-color: var(--muted);
    border-color: var(--muted);
}

.bg-white {
    /* 白色 */
    color: var(--black);
    background-color: var(--white);
    border-color: var(--white);
}

.bg-black {
    /* 黑色 */
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
}

/* 边框 */
.border {
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: var(--border-radius);
}

.border-secondary {
    /* 蓝色 */
    border-color: var(--secondary);
    color: var(--secondary);
}

.border-success {
    /* 绿色 */
    border-color: var(--success);
    color: var(--success);
}

.border-warning {
    /* 黄色 */
    border-color: var(--warning);
    color: var(--warning);
}

.border-danger {
    /* 红色 */
    border-color: var(--danger);
    color: var(--danger);
}

.border-muted {
    /* 灰色 */
    border-color: var(--muted);
    color: var(--muted);
}

.border-white {
    /* 白色 */
    border-color: var(--white);
    color: var(--white);
}

.border-black {
    /* 黑色 */
    border-color: var(--black);
    color: var(--black);
}

/* 显示隐藏 */
.bny-show {
    display: block
}

.bny-hide {
    display: none
}

/* 显示隐藏 垂直 */
.bny-show-v {
    visibility: visible
}

.bny-hide-v {
    visibility: hidden
}

.bny-show-block {
    display: block
}

.bny-show-inline {
    display: inline
}

.bny-show-inline-block {
    display: inline-block
}