html{
	font-size: 16px;
	box-sizing: border-box;
	font-family: "PingFang SC", sans-serif, sans-serif;
}

input, textarea{
	font-family: "PingFang SC", sans-serif, serif;
	box-sizing: border-box;
}

*{
	box-sizing: border-box;
}

p{
	padding: 0;
	margin: 0;
}

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

::-webkit-scrollbar-track {
    border-radius: 0
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: #e4e4e7;
}


body{
	color: var(--primary-foreground);
	background-color: var(--primary-background);
	margin: 0px;
	padding: 0px;
}

pre{
	margin: 0;
}

a{
	color: inherit;
	text-decoration: none;
}

.s-hide{
	display: none;
}


.s-inline-flex{
	display: inline-flex;
}


.s-flex{
	display: flex;
}

.s-flex-col{
	flex-direction: column;
}

.s-flex-col-rev{
	flex-direction: column-reverse;
}

.s-flex-wrap{
	flex-wrap: wrap;
}

.s-flex-space-between{
	justify-content: space-between;
}

.s-flex-bt{
	justify-content: space-between;
}

.s-flex-x-stretch{
	justify-content: stretch;
}

.s-flex1{
	flex:1
}

.s-items-center{
	align-items: center;
}

.s-flex-center{
	align-items: center;
	justify-content: center;
}

.s-flex-y-center{
	align-items: center;
}

.s-flex-x-center{
	justify-content: center;
}

.s-flex-x-right{
	justify-content: right;
}

.s-gap1{
	gap: .25rem;
}
.s-gap2{
	gap: .5rem;
}
.s-gap3{
	gap: .75rem;
}
.s-gap4{
	gap: 1rem;
}
.s-gap8{
	gap: 2rem;
}

.s-text-pre{
	white-space: pre-wrap;
}

.s-text-center{
	text-align: center;
}

.s-text-right{
	text-align: right;
}

.s-text-muted{
	color: var(--muted-foreground);
}

.s-text-feature{
	color: #edae48;
}

.s-text-pink{
	color: #E91E63;
}

.s-tag{
	border: 1px solid var(--primary-foreground);
	display: inline-block;
	padding: 0 2px;
	border-radius: 4px;
}

.s-tag-pink{
	border-color: #E91E63;
}

.s-text-opposite{
	color: var(--primary-background);
}

.s-text-bold{
	font-weight: bold !important;
}

.s-text-medium{
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 500;
}

.s-text-normal{
    font-size: .8rem;
    line-height: 1rem;
}

.s-text-normal2{
    font-size: .875rem;
    line-height: 1rem;
}

.s-text-small{
    font-size: .75rem;
    line-height: 1rem;
}

.s-text-tiny{
    font-size: .55rem;
    line-height: 1rem;
}

.s-text-base{
    font-size: 1rem;
    line-height: 1rem;
}

.s-text-large {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 400;
}

.s-text-large-plus {
	font-size: 40px;
	line-height: 2rem;
	font-weight: 400;
}

.s-error{
	color: var(--error);
}

.s-line{
	background-color: var(--border-divider);
	height: 1px;
}

.s-line-light{
	background-color: var(--border-outline);
	height: 1px;
}

.s-border-r-accent{
	border-right: 1px solid var(--border-outline);
}


.s-border-r{
	border-right: 1px solid var(--border-outline);
}

.s-border-t{
	border-top: 1px solid var(--border-outline);
}

.s-border-b{
	border-bottom: 1px solid var(--border-outline);
}


.s-round{
	border-radius: 12px;
}

.s-round-tniy{
	border-radius: .5rem;
}

.s-link{
	cursor: pointer;
}


.s-pl-0 {
	padding-left: 0rem !important;
}
.s-pr-0 {
	padding-right: 0rem !important;
}
.s-pt-0 {
	padding-top: 0rem !important;
}
.s-pb-0 {
	padding-bottom: 0rem !important;
}
.s-px-0 {
	padding-left: 0rem !important;
	padding-right: 0rem !important;
}
.s-py-0 {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
}
.s-p-0 {
	padding: 0rem !important;
}


.s-pl-1 {
	padding-left: .25rem;
}
.s-pr-1 {
	padding-right: .25rem;
}
.s-pt-1 {
	padding-top: .25rem;
}
.s-pb-1 {
	padding-bottom: .25rem;
}
.s-px-1 {
	padding-left: .25rem;
	padding-right: .25rem;
}
.s-py-1 {
	padding-top: .25rem;
	padding-bottom: .25rem;
}
.s-p-1 {
	padding: .25rem;
}

.s-pl-2 {
	padding-left: .5rem;
}
.s-pr-2 {
	padding-right: .5rem;
}
.s-pt-2 {
	padding-top: .5rem;
}
.s-pb-2 {
	padding-bottom: .5rem;
}
.s-px-2 {
	padding-left: .5rem;
	padding-right: .5rem;
}
.s-py-2 {
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.s-p-2 {
	padding: .5rem;
}

.s-pl-3 {
	padding-left: .75rem;
}
.s-pr-3 {
	padding-right: .75rem;
}
.s-pt-3 {
	padding-top: .75rem;
}
.s-pb-3 {
	padding-bottom: .75rem;
}
.s-px-3 {
	padding-left: .75rem;
	padding-right: .75rem;
}
.s-py-3 {
	padding-top: .75rem;
	padding-bottom: .75rem;
}
.s-p-3 {
	padding: .75rem;
}

.s-pl-4 {
	padding-left: 1rem;
}
.s-pr-4 {
	padding-right: 1rem;
}
.s-pt-4 {
	padding-top: 1rem;
}
.s-pb-4 {
	padding-bottom: 1rem;
}
.s-px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}
.s-py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.s-p-4 {
	padding: 1rem;
}


.s-pl-8 {
	padding-left: 2rem;
}
.s-pr-8 {
	padding-right: 2rem;
}
.s-pt-8 {
	padding-top: 2rem;
}
.s-pb-8 {
	padding-bottom: 2rem;
}
.s-px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}
.s-py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.s-p-8 {
	padding: 2rem;
}



.s-pl-16 {
	padding-left: 4rem;
}
.s-pr-16 {
	padding-right: 4rem;
}
.s-pt-16 {
	padding-top: 4rem;
}
.s-pb-16 {
	padding-bottom: 4rem;
}
.s-px-16 {
	padding-left: 4rem;
	padding-right: 4rem;
}
.s-py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}
.s-p-16 {
	padding: 4rem;
}


.s-ml-0 {
	margin-left: 0rem !important;
}
.s-mr-0 {
	margin-right: 0rem !important;
}
.s-mt-0 {
	margin-top: 0rem !important;
}
.s-mb-0 {
	margin-bottom: 0rem !important;
}
.s-mx-0 {
	margin-left: 0rem !important;
	margin-right: 0rem !important;
}
.s-my-0 {
	margin-top: 0rem !important;
	margin-bottom: 0rem !important;
}
.s-m-0 {
	margin: 0rem !important;
}


.s-ml-1 {
	margin-left: .25rem;
}
.s-mr-1 {
	margin-right: .25rem;
}
.s-mt-1 {
	margin-top: .25rem;
}
.s-mb-1 {
	margin-bottom: .25rem;
}
.s-mx-1 {
	margin-left: .25rem;
	margin-right: .25rem;
}
.s-my-1 {
	margin-top: .25rem;
	margin-bottom: .25rem;
}
.s-m-1 {
	margin: .25rem;
}


.s-ml-2 {
	margin-left: .5rem;
}
.s-mr-2 {
	margin-right: .5rem;
}
.s-mt-2 {
	margin-top: .5rem;
}
.s-mb-2 {
	margin-bottom: .5rem;
}
.s-mx-2 {
	margin-left: .5rem;
	margin-right: .5rem;
}
.s-my-2 {
	margin-top: .5rem;
	margin-bottom: .5rem;
}
.s-m-2 {
	margin: .5rem;
}


.s-ml-3 {
	margin-left: .75rem;
}
.s-mr-3 {
	margin-right: .75rem;
}
.s-mt-3 {
	margin-top: .75rem;
}
.s-mb-3 {
	margin-bottom: .75rem;
}
.s-mx-3 {
	margin-left: .75rem;
	margin-right: .75rem;
}
.s-my-3 {
	margin-top: .75rem;
	margin-bottom: .75rem;
}
.s-m-3 {
	margin: .75rem;
}

.s-ml-4 {
	margin-left: 1rem;
}
.s-mr-4 {
	margin-right: 1rem;
}
.s-mt-4 {
	margin-top: 1rem;
}
.s-mb-4 {
	margin-bottom: 1rem;
}
.s-mx-4 {
	margin-left: 1rem;
	margin-right: 1rem;
}
.s-my-4 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.s-m-4 {
	margin: 1rem;
}

.s-ml-8 {
	margin-left: 2rem;
}
.s-mr-8 {
	margin-right: 2rem;
}
.s-mt-8 {
	margin-top: 2rem;
}
.s-mb-8 {
	margin-bottom: 2rem;
}
.s-mx-8 {
	margin-left: 2rem;
	margin-right: 2rem;
}
.s-my-8 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.s-m-8 {
	margin: 2rem;
}


.s-ml-16 {
	margin-left: 4rem;
}
.s-mr-16 {
	margin-right: 4rem;
}
.s-mt-16 {
	margin-top: 4rem;
}
.s-mb-16 {
	margin-bottom: 4rem;
}
.s-mx-16 {
	margin-left: 4rem;
	margin-right: 4rem;
}
.s-my-16 {
	margin-top: 4rem;
	margin-bottom: 4rem;
}
.s-m-16 {
	margin: 4rem;
}


.s-w-min-x2{
	min-width: 16rem;
}
.s-w-max-x2{
	max-width: 16rem;
}

.s-w-min-x3{
	min-width: 24rem;
}
.s-w-max-x3{
	max-width: 24rem;
}

.s-w-min-x4{
	min-width: 32rem;
}
.s-w-max-x4{
	max-width: 32rem;
}

.s-w-min-x5{
	min-width: 40rem;
}
.s-w-max-x5{
	max-width: 40rem;
}

.s-w-min-x6{
	min-width: 48rem;
}
.s-w-max-x6{
	max-width: 48rem;
}

.s-w-min-x7{
	min-width: 56rem;
}
.s-w-max-x7{
	max-width: 56rem;
}

.s-w-min-x8{
	min-width: 64rem;
}
.s-w-max-x8{
	max-width: 64rem;
}

.s-h-full{
	height: 100%;
}
.s-h-min-full{
	min-height: 100%;
}
.s-w-full{
	width: 100%;
}
.s-w-max-large{
	max-width: 42rem;
}
.s-w-min-large{
	min-width: 42rem;
}


.s-underline{
	text-decoration: underline;
}

.s-deleteline{
	text-decoration:line-through;
}

.s-overflow-y{
	overflow-y: auto;
}

.s-fix-flex{
	min-width: 0;
	min-height: 0;
}

.s-bg{
	background: var(--primary-background);
}

.s-bg-color{
	background-color: var(--primary-background);
}

.s-bg3{
	background: var(--surface-elevation-3);
}

.s-hover-bg3:hover{
	background: var(--surface-elevation-3);
}
.s-hover-color:hover{
	color:var(--primary-foreground);
}

/* 在pannel背景下的亮色*/
.s-bg-selected-in-pannel{
	background-color: #fff;
}
.s-border-in-pannel{
	border: 1px solid #fff;
}

.s-pannel{
	border-radius: 1rem;
	background: var(--surface-elevation-1);
}


.s-popper{
	border-radius: 1rem;
	background: var(--popover);
	box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.s-multiline-4 {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.s-clearfix::before {
	content: " ";
	display: table;
}

.s-relative {
	position: relative;
}
.s-absolute {
	position: absolute;
}
.s-postion-0{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.s-left-0{
	left: 0;
}
.s-top-0{
	top: 0;
}
.s-right-0{
	right: 0;
}
.s-bottom-0{
	bottom: 0;
}