view,
navigator,
text {
    box-sizing: border-box;
    font-size: 32upx;
}

.page {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

.fixed {
    position: fixed;
}

.width-0 {
    width: 0;
}

.width-20per {
    width: 20%;
}

.width-25per {
    width: 25%;
}

.width-30per {
    width: 30%;
}

.width-33per {
    width: 33.3%;
}

.width-40per {
    width: 40%;
}

.width-50per {
    width: 50%;
}

.width-60per {
    width: 60%;
}

.width-70per {
    width: 70%;
}

.width-80per {
    width: 80%;
}

.width-90per {
    width: 90%;
}

.width-100per {
    width: 100%;
}

.width-70 {
    width: 70upx;
}

.width-80 {
    width: 80upx;
}

.width-100 {
    width: 100upx;
}

.width-120 {
    width: 120upx;
}

.width-140 {
    width: 140upx;
}

.width-160 {
    width: 160upx;
}

.height-0 {
    height: 0;
}

.height-20 {
    height: 20upx;
}

.height-40 {
    height: 40upx;
}

.height-60 {
    height: 60upx;
}

.height-80 {
    height: 80upx;
}

.height-100pre {
    height: 100%;
}

.height-100 {
    height: 100upx;
}

.height-110 {
    height: 110upx;
}

.height-120 {
    height: 120upx;
}

.height-150 {
    height: 150upx;
}

.height-180 {
    height: 180upx;
}

/* 背景 */
.bg-white {
    background-color: #ffffff;
}

/* 边框 */
.radius {
    border-radius: 10upx;
}

.radius-20 {
    border-radius: 20upx;
}

.radius-30 {
    border-radius: 30upx;
}

.radius-40 {
    border-radius: 40upx;
}

/* 滚动 */
.scroll {
    position: relative;
    overflow: auto;
}

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

/* flex */
.flex {
    position: relative;
    display: flex;
}

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

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

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

.justify-bewteen {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.gap {
    gap: 20upx;
}

.gap-40 {
    gap: 40upx;
}

.gap-60 {
    gap: 60upx;
}

.grow-1 {
    flex-grow: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

/* 位置 */
.margin {
    margin: 20upx !important;
}

.margin-10 {
    margin: 10upx !important;
}

.margin-40 {
    margin: 40upx !important;
}

.margin-top {
    margin-top: 20upx !important;
}

.margin-top-40 {
    margin-top: 40upx !important;
}

.margin-right {
    margin-right: 20upx !important;
}

.margin-right-40 {
    margin-right: 40upx !important;
}

.margin-bottom {
    margin-bottom: 20upx !important;
}

.margin-bottom-40 {
    margin-bottom: 40upx !important;
}

.margin-left {
    margin-left: 20upx !important;
}

.margin-left-40 {
    margin-left: 40upx !important;
}

.padding {
    padding: 20upx !important;
}

.padding-10 {
    padding: 10upx !important;
}

.padding-40 {
    padding: 40upx !important;
}

.padding-top {
    padding-top: 20upx !important;
}

.padding-top-40 {
    padding-top: 40upx !important;
}

.padding-right {
    padding-right: 20upx !important;
}

.padding-right-40 {
    padding-right: 40upx !important;
}

.padding-bottom {
    padding-bottom: 20upx !important;
}

.padding-bottom-40 {
    padding-bottom: 40upx !important;
}

.padding-left {
    padding-left: 20upx !important;
}

.padding-left-40 {
    padding-left: 20upx !important;
}

.padding-lr {
    padding-left: 20upx !important;
    padding-right: 20upx !important;
}

.padding-lr-10 {
    padding-left: 10upx !important;
    padding-right: 10upx !important;
}

.padding-lr-40 {
    padding-left: 40upx !important;
    padding-right: 40upx !important;
}

.padding-tb {
    padding-top: 20upx !important;
    padding-bottom: 20upx !important;
}

.padding-tb-10 {
    padding-top: 10upx !important;
    padding-bottom: 10upx !important;
}

.padding-tb-40 {
    padding-top: 40upx !important;
    padding-bottom: 40upx !important;
}

.child-gap>view+view,
.child-gap>button+button,
.child-gap>view+button,
.child-gap>button+view {
    margin-left: 20upx !important;
}

.direction-column.child-gap>view+view,
.direction-column.child-gap>button+button,
.direction-column.child-gap>view+button,
.direction-column.child-gap>button+view{
    margin-left: 0 !important;
    margin-top: 20upx !important;
}

.flex-warp.child-gap>view+view,
.flex-warp.child-gap>button+button,
.flex-warp.child-gap>view+button,
.flex-warp.child-gap>button+view{
    margin-top: 20upx;
    margin-bottom: 20upx;
}

.child-gap-40>view+view,
.child-gap-40>button+button,
.child-gap-40>view+button,
.child-gap-40>button+view {
    margin-left: 40upx !important;
}

.direction-column.child-gap-40>view+view,
.direction-column.child-gap-40>button+button,
.direction-column.child-gap-40>view+button,
.direction-column.child-gap-40>button+view{
    margin-left: 0 !important;
    margin-top: 40upx !important;
}

.flex-warp.child-gap-40>view+view,
.flex-warp.child-gap-40>button+button,
.flex-warp.child-gap-40>view+button,
.flex-warp.child-gap-40>button+view{
    margin-top: 40upx;
    margin-bottom: 40upx;
}

/* 网格 */
.grid {
    position: relative;
    display: grid;
}

.grid.column-1 {
    grid-template-columns: 1fr;
}

.grid.column-2 {
    grid-template-columns: 1fr 1fr;
}

.grid.column-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid.column-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid.gap {
    grid-gap: 20upx;
}

.grid.gap-40 {
    grid-gap: 40upx;
}

.grid.gap-60 {
    grid-gap: 60upx;
}

/* 导航列表 */
.nav-list {
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    margin-top: 30upx;
    border: 1upx solid #dfdfdf;
    border-radius: 20upx;
    margin: 20upx;
    background-color: #ffffff;
}

.nav-list-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    height: 80upx;
    padding: 10upx 20upx;
}

.nav-list-item+.nav-list-item {
    border-top: 1upx solid #dfdfdf;
}

/* picker */
.picker-display {
    position: relative;
    display: flex;
    width: 100%;
    height: 70upx;
    justify-content: space-between;
    align-items: center;
    padding: 0 20upx;
    background-color: #ffffff;
    border-radius: 10upx;
}

.picker-display-text {
    flex-grow: 1;
}

/* textarea */
.textarea {
    position: relative;
    border-radius: 10upx;
    background-color: #ffffff;
    flex-grow: 1;
    height: 160upx;
    overflow-y: auto;
}

.textarea-row {
    position: relative;
    width: 100%;
    height: 40upx;
    align-items: center;
    padding-left: 10upx;
    padding-right: 10upx;
}

/* 按钮 */
uni-button[type="normal"]{
    color: var(--color-white) !important;
    background-color: var(--color-gray) !important;
}

uni-button[type="primary"]{
    color: var(--color-white) !important;
    background-color: var(--color-blue) !important;
}

uni-button[type="secondary"] {
    color: var(--color-white);
    background-color: var(--color-secondary);
}

uni-button[type="ok"],
uni-button[type="success"] {
    color: var(--color-white);
    background-color: var(--color-green);
}

uni-button[type="error"],
uni-button[type="danger"] {
    color: var(--color-white);
    background-color: var(--color-red);
}

uni-button[type="warn"],
uni-button[type="warning"] {
    color: var(--color-black) !important;
    background-color: var(--color-yellow) !important;
}

uni-button[type="orange"] {
    color: var(--color-white);
    background-color: var(--color-orange);
}

uni-button[type="info"] {
    color: var(--color-white);
    background-color: var(--color-cyan);
}

uni-button[type="default"],
uni-button[type="light"] {
    color: var(--color-black);
    background-color: var(--color-light);
}

uni-button[type="black"],
uni-button[type="dark"] {
    color: var(--color-white);
    background-color: var(--color-black);
}

uni-button[type="lightblue"] {
    color: var(--color-black);
    background-color: var(--color-light-blue);
}

uni-button[border="round"] {
    border-radius: 100upx !important;
}