html,
body {
  font-family: 'PingFang SC', '思源黑体 CN', 'Microsoft YaHei', Arial, sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  background-color: #f4f4f5;
}

html {
  overflow-y: scroll;
}

:root {
  --primary-color: rgba(44, 104, 255, 1);
}

a {
  border: none;
  outline: none;
  text-decoration: none;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
}

#app .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

#app .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #333;
}

html,
body {
  --el-color-primary: var(--primary-color);
  --el-border-radius-base: 2px;
}

#app .el-button--large {
  line-height: 40px;
}

#app .text-button,
button.el-button.text-button {
  color: var(--primary-color);
  border: none;
  background-color: #fff;
}

#app .text-button:hover,
button.el-button.text-button:hover {
  opacity: 0.7;
}

#app .light-button,
button.el-button.light-button {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: #fff;
}

#app .light-button:hover,
button.el-button.light-button:hover {
  opacity: 0.7;
}

#app .red-button,
button.el-button.red-button {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

#app .red-button:hover,
button.el-button.red-button:hover {
  opacity: 0.7;
}

#app .pink-button {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

#app .pink-button:hover {
  opacity: 0.7;
}

.spacer16 {
  height: 16px;
}

.spacer24 {
  height: 24px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(50, 50, 50, 0.25);
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background-color: rgba(50, 50, 50, 0.05);
}

.w-full{width: 100%;}

.flex {display: flex;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.items-center { align-items: center;}

.relative { position: relative;}

/** 边框 **/
.rounded-none{ border-radius: 0px;}
.rounded-sm{ border-radius: 0.125rem; /* 2px */}
.rounded{	border-radius: 0.25rem; /* 4px */}
.rounded-md	{ border-radius: 0.375rem; /* 6px */}
.rounded-lg	{ border-radius: 0.5rem; /* 8px */}
.rounded-xl	{ border-radius: 0.75rem; /* 12px */}
.rounded-2xl	{ border-radius: 1rem; /* 16px */}
.rounded-3xl	{ border-radius: 1.5rem; /* 24px */}

/** overflow **/
.overflow-auto	{ overflow: auto; }
.overflow-hidden	{ overflow: hidden; }
.overflow-clip	{ overflow: clip; }
.overflow-visible	{ overflow: visible; }
.overflow-scroll	{ overflow: scroll; }

/** margin **/
.m-1 {	margin: 0.25rem; /* 4px */}
.mt-1 {	margin-top: 0.25rem; /* 4px */}
.mr-1 {	margin-right: 0.25rem; /* 4px */}
.mb-1 {	margin-bottom: 0.25rem; /* 4px */}
.ml-1 {	margin-left: 0.25rem; /* 4px */}

.m-2 {	margin: 0.5rem; /* 8px */}
.mt-2	{ margin-top: 0.5rem; /* 8px */ }
.mr-2	{ margin-right: 0.5rem; /* 8px */ }
.mb-2	{ margin-bottom: 0.5rem; /* 8px */ }
.ml-2	{ margin-left: 0.5rem; /* 8px */ }

.m-3 {	margin: 0.75rem; /* 12px */}
.mt-3 {	margin-top: 0.75rem; /* 12px */}
.mr-3 {	margin-right: 0.75rem; /* 12px */}
.mb-3 {	margin-bottom: 0.75rem; /* 12px */}
.ml-3 {	margin-left: 0.75rem; /* 12px */}

.m-4 {	margin: 1rem; /* 12px */ }
.mt-4 {	margin-top: 1rem; /* 16px */ }
.mr-4 {	margin-right: 1rem; /* 16px */ }
.mb-4 {	margin-bottom: 1rem; /* 16px */ }
.ml-4 {	margin-left: 1rem; /* 16px */ }

.m-5 {	margin: 1.25rem; /* 20px */}
.mt-5 {	margin-top: 1.25rem; /* 20px */}
.mr-5 {	margin-right: 1.25rem; /* 20px */}
.mb-5 {	margin-bottom: 1.25rem; /* 20px */}
.ml-5 {	margin-left: 1.25rem; /* 20px */}

.m-6 {	margin: 1.5rem; /* 24px */}
.mt-6	{ margin-top: 1.5rem; /* 24px */ }
.mr-6	{ margin-right: 1.5rem; /* 24px */ }
.mb-6	{ margin-bottom: 1.5rem; /* 24px */ }
.ml-6	{ margin-left: 1.5rem; /* 24px */ }


.text-sm	{font-size: 0.875rem; /* 14px */
          line-height: 1.25rem; /* 20px */}
.text-base	{font-size: 1rem; /* 16px */
            line-height: 1.5rem; /* 24px */}
.text-lg	{font-size: 1.125rem; /* 18px */
          line-height: 1.75rem; /* 28px */}
.text-primary {
  color: var(--primary-color);
}
.text-gray {
  color: rgba(0,0,0,0.65);
}
.text-red {
  color: #E1251B;
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}