body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0
}

@font-face {
    font-family: 'SC Prosper Sans';
    src: url('path/to/font/SC Prosper Sans.woff2') format('woff2');
}

body,
button,
input,
select,
textarea {
    font: 16px/1.5 "游ゴシック体,YuGothic,游ゴシック,Yu Gothic,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ Pro W3,ヒラギノ角ゴ W3,メイリオ,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif!important";
    letter-spacing: .1em;
    font-family: SC Prosper Sans Bold, Helvetica, Arial, Lucida Grande, sans-serif;
}

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

address,
cite,
dfn,
em,
var {
    font-style: normal;
}

code,
kbd,
pre,
samp {
    font-family: courier new, courier, monospace;
}

ul,
ol {
    list-style: none;
}

li {
    list-style: none;
}

fieldset,
img {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,
button,
textarea,
select,
optgroup,
option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: 100%;
}

input:disabled,
button:disabled {
    background-color: #f2f2f2;
    color: #888;
    cursor: not-allowed;
}

abbr,
article,
aside,
audio,
canvas,
datalist,
details,
figure,
footer,
header,
hgroup,
menu,
nav,
output,
progress,
section,
video {
    display: block;
    margin: 0;
    padding: 0
}

i,
u,
b,
em,
span,
small {
    font-weight: normal;
    font-style: normal;
}

html,
body {
    height: 100%
}

/****/
html {
    font-size: 62.5%;
}

body {
    -webkit-tap-highlight-color: rgba(6, 6, 6, 0);
}

a {
    color: #495057;
    text-decoration: none;
}

h2 {
    margin: 0;
    padding: 0;
}

input,
div,
div:focus,
textarea:focus,
button:focus {
    outline: none;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    background-color: inherit;
    border: none;
    border-radius: 8px;
}

::-webkit-scrollbar {
    width: 4px;
    /* 滚动条的宽度 */
    height: 8px;
    /* 滚动条的高度 */
}

::-webkit-scrollbar-thumb {
    background: #888;
    /* 滚动条滑块的背景颜色 */
    border-radius: 8px;
    /* 滚动条滑块的圆角 */
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* 鼠标悬停在滚动条滑块上时的背景颜色 */
}

.blue-status,
.purple-status,
.orange-status,
.pink-status,
.green-status,
.red-status,
.grey-status,
.deepGreen-status,
.hotPink-status {
    border-radius: 20px;
    padding: 0 12px;
    display: flex;
    justify-content: center;
}

.blue-status {
    border: #93c5fd 1px solid;
    color: #93c5fd;
    background-color: rgb(147, 197, 253, 0.15);
}

.purple-status {
    border: #c4b5fd 1px solid;
    color: #c4b5fd;
    background-color: rgb(196, 181, 253, 0.15);
}

.orange-status {
    border: #fcd34d 1px solid;
    color: #fcd34d;
    background-color: rgb(252, 211, 77, 0.15);
}

.pink-status {
    border: #f9a8d4 1px solid;
    color: #f9a8d4;
    background-color: rgb(249, 168, 212, 0.15);
}

.green-status {
    border: #6ee7b7 1px solid;
    color: #6ee7b7;
    background-color: rgb(110, 231, 183, 0.15);

}

.red-status {
    border: #CB4829 1px solid;
    color: #CB4829;
    background-color: rgb(203, 72, 41, 0.15);
}

.grey-status {
    border: #A9A9A9 1px solid;
    color: #A9A9A9;
    background-color: rgb(169, 169, 169, 0.15);

}

.deepGreen-status {
    border: #32CD32 1px solid;
    color: #32CD32;
    background-color: rgb(50, 205, 50, 0.15);

}

.hotPink-status {
    border: #DB7093 1px solid;
    color: #DB7093;
    background-color: rgb(219, 112, 147, 0.15);

}