/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

uni-toast {
	z-index: 10000;
}

/* 颜色变量 */


/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;


// 自定义全局样式配置
$color-theme: #4BBDDF;
$color-lighttheme: #4BBDDF;
$color-darktheme: #00afa2;
$color-bg: #FFFFFF;
$color-lightbg: #FAFAFA;
$color-darkbg: #F5F5F5;
$color-sepline: #922222;
$color-darksepline: #EEEEEE;
$color-shadow: rgba(212, 212, 212, 0.35);
$color-mask: rgba(212, 212, 212, 0.35);
$color-red: #E81F2A;
$color-darkred: #A33029;
$color-black: #333333;
$color-white: #FFFFFF;
$color-gray: #999999;
$color-lightgray: #E6E6E6;
$color-blue: #00afa2;
$color-green: #49C661;
$color-e: #EEEEEE;
$color-orange: #F96208;
$color-darkorange: #FC5036;
$color-darkyellow: #00afa2;
$color-lightbrown: #F9EBCF;

$color-text-gray: #999999;
$color-text-darkgray: #666666;
$color-text-lightgray: #BBC2C5;
$color-text-black: #333333;
$color-text-red: #E81F2A;
$color-text-orange: #F96208;
$color-text-darkorange: #FC5036;
$color-text-darkblue: #00afa2;
$color-text-brown: #00afa2;

$color-button-gray: #999999;
$color-button-lightgray: #F5F5F5;
$color-button-lightblue: #00afa2;

$linear-gradient-button-theme: linear-gradient(297deg,rgba(14,203,231,1) 0%,rgba(9,180,206,1) 100%);
$linear-gradient-bg-theme: linear-gradient(90deg,rgba(17,192,219,1) 0%,rgba(70,189,234,1) 100%);
$linear-gradient-theme: linear-gradient(90deg,rgba(17,192,219,1) 0%,rgba(70,189,234,1) 100%);

$font-8: 16rpx;
$font-9: 18rpx;
$font-10: 20rpx;
$font-11: 22rpx;
$font-12: 24rpx;
$font-13: 26rpx;
$font-14: 28rpx;
$font-15: 30rpx;
$font-16: 32rpx;
$font-17: 34rpx;
$font-18: 36rpx;
$font-19: 38rpx;
$font-20: 40rpx;
$font-22: 44rpx;
$font-24: 48rpx;
$font-26: 52rpx;
$font-28: 56rpx;
$font-30: 60rpx;
$font-32: 64rpx;
$font-36: 72rpx;
$font-40: 80rpx;
$font-42: 84rpx;
$font-48: 96rpx;


view {
	box-sizing: border-box;
}

div {
	box-sizing: border-box;
}

.header-safe-height {
	height: 88rpx;
}

@mixin wh($value) {
  width: $value;
  height: $value;
}

// 文字换行
@mixin text-over($num) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

// 设置圆角
@mixin border-radius($num) {
  border-radius: $num;
  overflow: hidden;
}

@mixin bg-img($url,$size) {
  background: no-repeat url($url) center;
  -webkit-background-size: $size;
  background-size: $size;
}

@mixin bg-img-contain($url) {
  @include bg-img($url, 'contain');
}

@mixin bg-img-cover($url) {
  @include bg-img($url, 'cover');
}

.noraml-bottom-action-container {
	position: fixed;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	z-index: 9;
	padding: 30rpx 30rpx;
	padding-bottom: 50rpx;
	background-color: #610606;
}

.normal-theme-btn {	
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90rpx;
	line-height: 90rpx;
	color: $color-white;
	background-color: $color-theme;
	text-align: center;
	border-radius: 8rpx;
	font-size: $font-13;
}

.normal-theme-btn-radius {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90rpx;
	line-height: 90rpx;
	color: $color-white;
	background: linear-gradient(90deg, #E34E04, #F78B22);
	text-align: center;
	border-radius: 45rpx;
	font-size: $font-18;
}

.normal-theme-btn-border-radius {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78rpx;
	line-height: 80rpx;
	color: $color-theme;
	border: 1rpx solid $color-theme;
	text-align: center;
	border-radius: 40rpx;
	font-size: $font-13;
}

.normal-gray-btn-border-radius {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78rpx;
	line-height: 80rpx;
	color: $color-text-lightgray;
	border: 1rpx solid $color-lightgray;
	text-align: center;
	border-radius: 40rpx;
	font-size: $font-13;
}

.normal-btn-radius-disabled {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	line-height: 80rpx;
	color: $color-white;
	background-color: $color-lightgray;
	text-align: center;
	border-radius: 40rpx;
	font-size: $font-13;
}

.normal-theme-bg {
	background: $linear-gradient-bg-theme;
}

.input-normal-style {
	font-size: $font-14;
	color: $color-text-black;
}

.input-placeholder-style {
	font-size: $font-14;
	color: $color-text-lightgray;
}

.card-view {
	background-color: $color-white;
	border-radius: 32rpx;
}

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

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

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

.card-shadow-view {
	background-color: $color-white;
	border-radius: 16rpx;
	box-shadow: 0px 1px 6px 0px rgba(194,194,194,0.30); 
}

.color-sepline {
	color: $color-sepline;
}

.min-h-100 {
	min-height: 100%;
}

.h-100p {
	height: 100%;
}

.h-50p {
	height: 50%;
}

.w-100p {
	width: 100%;
}

.w-50p {
	width: 50%;
}

.w-25p {
	width: 25%;
} 

.item-sepline-h {
	height: 1rpx;
	width: 100%;
	background-color: $color-sepline;
}

.item-sepline-v {
	width: 2rpx;
	height: 100%;
	background-color: $color-darksepline;
}

.item-darksepline-v {
	width: 2rpx;
	height: 100%;
	background-color: #999;
}

.flex {
	display: flex;
}

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

.flex-acenter {
	display: flex;
	align-items: center;
}

.flex-sbetween {
	display: flex;
	justify-content: space-between;
}

.flex-scenter {
	display: flex;
	justify-content: center;
}

.flex-1 {
	flex: 1;
}

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

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

.c666 {
	color: #666;
}

.c999 {
	color: #999;
}

.c333 {
	color: #333;
}

.cred {
	color: $color-text-red;
}

.cred-dark {
	color:  $color-darkred;
}

.cfff {
	color: #fff;
}

.ctheme {
	color: $color-theme;
}

.cyellow {
	color: #FCE700;
}

.border-input {
	border: 2rpx solid $color-darkbg;
	border-radius: 8rpx;
}

.ft8 {
	font-size: $font-8;
}

.ft9 {
	font-size: $font-9;
}

.ft10 {
	font-size: $font-10;
}

.ft11 {
	font-size: $font-11;
}

.ft12 {
	font-size: $font-12;
}

.ft13 {
	font-size: $font-13;
}

.ft14 {
	font-size: $font-14;
}

.ft15 {
	font-size: $font-15;
}

.ft16 {
	font-size: $font-16;
}

.ft17 {
	font-size: $font-17;
}

.ft18 {
	font-size: $font-18;
}

.ft20 {
	font-size: $font-20;
}

.ft22 {
	font-size: $font-22;
}

.ft24 {
	font-size: $font-24;
}

.ft26 {
	font-size: $font-26;
}

.ft30 {
	font-size: $font-15;
}


.ft32 {
	font-size: $font-32;
}

.fwbold {
	font-weight: bold;
}

.fw-m {
	font-weight: 500;
}



.ptb8 {
	padding-top: 8rpx;
	padding-bottom: 8rpx;
}

.pt8 {
	padding-top: 8rpx;
}

.pb8 {
	padding-bottom: 8rpx;
}

.ptb16 {
	padding-top: 16rpx;
	padding-bottom: 16rpx;
}

.pt16 {
	padding-top: 16rpx;
}

.pb16 {
	padding-bottom: 16rpx;
}

.ptb24 {
	padding-top: 24rpx;
	padding-bottom: 24rpx;
}

.pt24 {
	padding-top: 24rpx;
}

.pb24 {
	padding-bottom: 24rpx;
}

.ptb30 {
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}

.pt30 {
	padding-top: 30rpx;
}

.pb30 {
	padding-bottom: 30rpx;
}

.ptb30 {
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}

.pt32 {
	padding-top: 32rpx;
}

.pb32 {
	padding-bottom: 32rpx;
}

.plr8 {
	padding-left: 8rpx;
	padding-right: 8rpx;
}

.pl8 {
	padding-left: 8rpx;
}

.pr8 {
	padding-right: 8rpx;
}

.plr16 {
	padding-left: 16rpx;
	padding-right: 16rpx;
}

.pl16 {
	padding-left: 16rpx;
}

.pr16 {
	padding-right: 16rpx;
}

.plr24 {
	padding-left: 24rpx;
	padding-right: 24rpx;
}

.pl24 {
	padding-left: 24rpx;
}

.pr24 {
	padding-right: 24rpx;
}

.plr30 {
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.pl30 {
	padding-left: 30rpx;
}

.pr30 {
	padding-right: 30rpx;
}

.plr32 {
	padding-left: 32rpx;
	padding-right: 32rpx;
}

.pl32 {
	padding-left: 32rpx;
}

.pr32 {
	padding-right: 32rpx;
}


.ml8 {
	margin-left: 8rpx;
}

.ml10 {
	margin-left: 10rpx;
}

.ml12 {
	margin-left: 12rpx;
}

.ml16 {
	margin-left: 16rpx;
}

.ml24 {
	margin-left: 24rpx;
}

.ml32 {
	margin-left: 32rpx;
}

.mr8 {
	margin-right: 8rpx;
}

.mr10 {
	margin-right: 10rpx;
}

.mr12 {
	margin-right: 12rpx;
}

.mr14 {
	margin-right: 14rpx;
}

.mr16 {
	margin-right: 16rpx;
}

.mr24 {
	margin-right: 24rpx;
}

.mr32 {
	margin-right: 32rpx;
}

.mt8 {
	margin-top: 8rpx;
}

.mt10 {
	margin-top: 10rpx;
}

.mt12 {
	margin-top: 12rpx;
}

.mt14 {
	margin-top: 14rpx;
}

.mt16 {
	margin-top: 16rpx;
}

.mt20 {
	margin-top: 20rpx;
}

.mt24 {
	margin-top: 24rpx;
}
.mt28 {
	margin-top: 28rpx;
}

.mt32 {
	margin-top: 32rpx;
}

.mt40 {
	margin-top: 40rpx;
}

.mt60 {
	margin-top: 60rpx;
}

.mt80 {
	margin-top: 80rpx;
}

.mb8 {
	margin-bottom: 8rpx;
}

.mb10 {
	margin-bottom: 10rpx;
}

.mb12 {
	margin-bottom: 12rpx;
}

.mb14 {
	margin-bottom: 14rpx;
}

.mb16 {
	margin-bottom: 16rpx;
}

.mb24 {
	margin-bottom: 24rpx;
}

.mb32 {
	margin-bottom: 32rpx;
}
