@import "static/css/module";

.flex {display: flex !important;flex-direction:row}
.flex-row{ flex-direction:row!important}
.flex-column{ flex-direction:column!important}
.flex-row-reverse{ flex-direction:row-reverse!important}
.flex-column-reverse{ flex-direction:column-reverse!important}
.flex-wrap{ flex-wrap:wrap}
.flex-nowrap{ flex-wrap:nowrap}
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-around{justify-content:space-around}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}

.flex-wrap{flex-wrap:wrap}

.align-center{ align-items: center}
.align-stretch{ align-items: stretch}
.align-start{ align-items: flex-start}
.align-end{ align-items: flex-end}

.content-start {align-content: flex-start}
.content-end {align-content: flex-end}
.content-center {align-content: center}
.content-between {align-content: space-between}
.content-around {align-content: space-around}
.content-stretch {align-content: stretch}

.flex-1{flex: 1}
.flex-2{flex: 2}
.flex-3{flex: 3}
.flex-4{flex: 4}
.flex-5{flex: 5}
.flex-shrink{flex-shrink: 0}

.w-1 {width: 10%;min-width: 75rpx}
.w-2 {width: 20%;min-width: 150rpx}
.w-3 {width: 30%;min-width: 225rpx}
.w-4 {width: 40%;min-width: 300rpx}
.w-5 {width: 50%;min-width: 375rpx}
.w-6 {width: 60%;min-width: 450rpx}
.w-7 {width: 70%;min-width: 525rpx}
.w-8 {width: 80%;min-width: 600rpx}
.w-9 {width: 90%;min-width: 675rpx}
.w-10 {width: 100%;min-width: 750rpx}

.h-1 {height: 10vh}
.h-2 {height: 20vh}
.h-3 {height: 30vh}
.h-4 {height: 40vh}
.h-5 {height: 50vh}
.h-6 {height: 60vh}
.h-7 {height: 70vh}
.h-8 {height: 80vh}
.h-9 {height: 90vh}
.h-10 {height: 100vh}


.m-0 {margin: 0}
.m-auto{margin: auto}
.m-1 {margin: 10rpx}
.m-2 {margin: 20rpx}
.m-3 {margin: 30rpx}
.m-4 {margin: 40rpx}
.m-5 {margin: 50rpx}
.mt-0 {margin-top: 0}

.mt-1 {margin-top: 10rpx}
.mt-2 {margin-top: 20rpx}
.mt-3 {margin-top: 30rpx}
.mt-4 {margin-top: 40rpx}
.mt-5 {margin-top: 50rpx}
.mt-6 {margin-top: 60rpx}
.mt-7 {margin-top: 70rpx}
.mt-8 {margin-top: 80rpx}
.mt-9 {margin-top: 80rpx}
.mt-10 {margin-top: 100rpx}
.mt-12 {margin-top: 120rpx}


.mb-0 {margin-bottom: 0}
.mb-auto {margin-bottom: auto}
.mb-1 {margin-bottom: 10rpx}
.mb-1_5 {margin-bottom: 15rpx}
.mb-2 {margin-bottom: 20rpx}
.mb-3 {margin-bottom: 30rpx}
.mb-4 {margin-bottom: 40rpx}
.mb-5 {margin-bottom: 50rpx}
.mb-7 {margin-bottom: 70rpx}
.mb-9 {margin-bottom: 90rpx}
.mb-11 {margin-bottom: 110rpx}
.mb-12 {margin-bottom: 120rpx}
.mb-13 {margin-bottom: 130rpx}
.mb-14 {margin-bottom: 140rpx}
.mb-15 {margin-bottom: 150rpx}
.ml-0 {margin-left: 0}

.ml-auto {margin-left: auto}
.ml-0_6 {margin-left: 6rpx}
.ml-1 {margin-left: 10rpx}
.ml-2 {margin-left: 20rpx}
.ml-3 {margin-left: 30rpx}
.ml-4 {margin-left: 40rpx}
.ml-5 {margin-left: 50rpx}
.ml-8 {margin-left: 80rpx}
.ml-9 {margin-left: 90rpx}
.ml-12 {margin-left: 120rpx}

.mr-0 {margin-right: 0}
.mr-auto {margin-right: auto}
.mr-0_6 {margin-right: 6rpx}
.mr-1 {margin-right: 10rpx}
.mr-1_5 {margin-right: 15rpx}
.mr-2 {margin-right: 20rpx}
.mr-3 {margin-right: 30rpx}
.mr-4 {margin-right: 40rpx}
.mr-5 {margin-right: 50rpx}
.mr-6 {margin-right: 60rpx}
.mr-8 {margin-right: 80rpx}
.mr-9 {margin-right: 90rpx}
.mr-11 {margin-right:110rpx}
.my-0 {margin-top: 0;margin-bottom: 0}
.my-auto {margin-top: auto;margin-bottom: auto}

.my-1 {margin-top: 10rpx; margin-bottom: 10rpx}
.my-2 {margin-top: 20rpx; margin-bottom: 20rpx}
.my-3 {margin-top: 30rpx; margin-bottom: 30rpx}
.my-4 {margin-top: 40rpx; margin-bottom: 40rpx}
.my-5 {margin-top: 50rpx; margin-bottom: 50rpx}

.mx-0 { margin-left: 0; margin-right: 0;}
.mx-auto { margin-left: auto; margin-right: auto;}
.mx-1 { margin-left: 10rpx; margin-right: 10rpx;}
.mx-2 { margin-left: 20rpx; margin-right: 20rpx;}
.mx-3 { margin-left: 30rpx; margin-right: 30rpx;}
.mx-4 { margin-left: 40rpx; margin-right: 40rpx;}
.mx-5 { margin-left: 50rpx; margin-right: 50rpx;}


.p-0 { padding: 0; }
.p { padding: 5rpx; }
.p-1 { padding: 10rpx; }
.p-2 { padding: 20rpx; }
.p-3 { padding: 30rpx; }
.p-4 { padding: 40rpx; }
.p-5 { padding: 50rpx; }

.pt-0 { padding-top: 0; }
.pt { padding-top: 5rpx; }
.pt-1 { padding-top: 10rpx; }
.pt-2 { padding-top: 20rpx; }
.pt-3 { padding-top: 30rpx; }
.pt-4 { padding-top: 40rpx; }
.pt-5 { padding-top: 50rpx; }
.pt-6 { padding-top: 60rpx; }
.pt-7 { padding-top: 70rpx; }
.pt-8 { padding-top: 80rpx; }
.pt-9 { padding-top: 90rpx; }
.pt-10{ padding-top: 100rpx;}
.pt-11{ padding-top: 110rpx;}

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 10rpx; }
.pb { padding-bottom: 5rpx; }
.pb-2 { padding-bottom: 20rpx; }
.pb-3 { padding-bottom: 30rpx; }
.pb-4 { padding-bottom: 40rpx; }
.pb-5 { padding-bottom: 50rpx; }

.pl-0 { padding-left: 0; }
.pl { padding-left: 5rpx; }
.pl-1 { padding-left: 10rpx; }
.pl-2 { padding-left: 20rpx; }
.pl-3 { padding-left: 30rpx; }
.pl-3_5 { padding-left: 35rpx; }
.pl-4 { padding-left: 40rpx; }
.pl-5 { padding-left: 50rpx; }
.pl-6 { padding-left: 60rpx; }
.pl-7 { padding-left: 70rpx; }

.pr-0 { padding-right: 0; }
.pr { padding-right: 5rpx; }
.pr-1 { padding-right: 10rpx; }
.pr-2 { padding-right: 20rpx; }
.pr-3 { padding-right: 30rpx; }
.pr-4 { padding-right: 40rpx; }
.pr-5 { padding-right: 50rpx; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py { padding-top: 5rpx; padding-bottom: 5rpx; }
.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
.py-1_5 { padding-top: 15rpx; padding-bottom: 15rpx; }
.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }
.py-6 { padding-top: 50rpx; padding-bottom: 60rpx; }
.py-7 { padding-top: 50rpx; padding-bottom: 70rpx; }
.py-8 { padding-top: 80rpx; padding-bottom: 80rpx; }
.py-9 { padding-top: 90rpx; padding-bottom: 90rpx; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 10rpx; padding-right: 10rpx;}
.px { padding-left: 5rpx; padding-right: 5rpx;}
.px-2 { padding-left: 20rpx; padding-right: 20rpx;}
.px-3 { padding-left: 30rpx; padding-right: 30rpx;}
.px-4 { padding-left: 40rpx; padding-right: 40rpx;}
.px-5 { padding-left: 50rpx; padding-right: 50rpx;}
.px-7 { padding-left: 70rpx; padding-right: 70rpx;}
.px-8 { padding-left: 70rpx; padding-right: 80rpx;}
.px-9 { padding-left: 90rpx; padding-right: 90rpx;}


.font-12{font-size: 12rpx;line-height: 1;}
.font-16{font-size: 16rpx;line-height: 1;}
.font-20{font-size:20rpx;line-height: 1;}
.font-24{font-size:24rpx;line-height: 1;}
.font-26{font-size:26rpx;line-height: 1;}
.font-28{font-size:28rpx;line-height: 1;}
.font-30{font-size:30rpx;line-height: 1;}
.font-32{font-size:32rpx;line-height: 1;}
.font-34{font-size:34rpx;line-height: 1;}
.font-36{font-size:36rpx;line-height: 1;}
.font-40{font-size: 40rpx;line-height: 1;}
.font-45{font-size: 45rpx;line-height: 1;}
.font-50{font-size: 50rpx;line-height: 1;}
.font-52{font-size: 52rpx;line-height: 1;}
.font-60{font-size: 60rpx;line-height: 1;}
.font-68{font-size: 68rpx;line-height: 1;}
.font-weight{font-weight: bold}

.text-indent{text-indent:2;}
.text-through{text-decoration:line-through;}
.text-left { text-align: left;}
.text-right { text-align: right;}
.text-center { text-align: center;}
.text-justify{ text-align: justify;}
.letspac3{ letter-spacing: 3px;}
.letspac5{ letter-spacing: 5px;}

/* 背景颜色 */
.bg-f2{background-color:#F2F2F2;}
.bg-danger { background-color: red;}
.bg-dark { background-color: #343a40;}
.bg-hover-dark { background-color: #1d2124;}
.bg-white { background-color: #ffffff;}
.bg-orange{ background-color: orange;}
.bg-gray{ background-color: gray;}
.bg-transparent { background-color: transparent;}

/* 文字颜色 */
.text-white {color: #ffffff }
.text-primary {color: #007bff;}
.text-hover-primary { color: #0056b3;}
.text-secondary {color: #6c757d;}
.text-hover-secondary { color: #494f54;}
.text-success {color: #28a745;}
.text-hover-success{color: #19692c;}
.text-info { color: #17a2b8;}
.text-hover-info {color: #0f6674;}
.text-warning {color: #FF9E5F;}
.text-danger { color: #dc3545;}
.text-hover-danger { color: #a71d2a;}
.text-light { color: #f8f9fa;}
.text-hover-light { color: #cbd3da;}
.text-dark { color: #343a40;}
.text-hover-dark{ color: #121416;}
.text-body { color: #212529;}
.text-muted { color: #6c757d;}


/* 圆角 */
.rounded { border-radius: 8rpx;}
.rounded-lg { border-radius: 14rpx;}
.rounded-10 { border-radius: 10rpx;}
.rounded-12 { border-radius: 12rpx;}
.rounded-15 { border-radius: 15rpx;}
.rounded-20 { border-radius: 20rpx;}
.rounded-30 { border-radius: 30rpx;}
.rounded-40 { border-radius: 40rpx;}
.rounded-50 { border-radius: 50rpx;}
.rounded-botm-30{border-bottom-left-radius: 30rpx;border-bottom-right-radius: 30rpx;}
.rounded-top-30 {border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;}
.rounded-top {
  border-top-left-radius: 8rpx;
  border-top-right-radius: 8rpx;
}
.rounded-top-lg {
  border-top-left-radius: 14rpx;
  border-top-right-radius: 14rpx;
}
.rounded-right {
  border-top-right-radius: 8rpx;
  border-bottom-right-radius: 8rpx;
}
.rounded-bottom {
  border-bottom-right-radius: 8rpx;
  border-bottom-left-radius: 8rpx;
}
.rounded-bottom-lg {
  border-bottom-right-radius: 14rpx;
  border-bottom-left-radius: 14rpx;
}
.rounded-bottom-lg40 {
  border-bottom-right-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
}
.rounded-left-50{
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
}
.rounded-bottom-right-50{
  border-bottom-right-radius: 50rpx;
}
.rounded-top-right-30{
  border-top-right-radius: 30rpx;
}
.rounded-left {
  border-top-left-radius: 8rpx;
  border-bottom-left-radius: 8rpx;
}
.rounded-100 { border-radius: 100rpx;}
.rounded-0 { border-radius: 0;}

.border-none{border: none}