

/* color start*/

 
 
 

 

 

 

/* color end*/

/* button start*/

.up-btn {
  width: 100%;
  position: relative;
  border: 0 !important;
  border-radius: 10rpx;
  display: inline-block;
}

.up-btn::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 20rpx;
}

.up-btn-block {
  font-size: 36rpx;
  height: 90rpx;
  line-height: 90rpx;
}

.up-white::after {
  border: 1px solid #eaeef1;
}

.up-white-hover {
  background: #e5e5e5 !important;
  color: #2e2e2e !important;
}

.up-dark-disabled {
  opacity: 0.6;
  color: #fafbfc !important;
}

.up-outline-hover {
  opacity: 0.5;
}

.up-primary-hover {
  background: #4a67d6 !important;
  color: #e5e5e5 !important;
}

.up-primary-outline::after {
  border: 1px solid #5677fc !important;
}

.up-primary-outline {
  color: #5677fc !important;
  background: none;
}

.up-danger-hover {
  background: #d53912 !important;
  color: #e5e5e5 !important;
}

.up-danger-outline {
  color: #ed3f14 !important;
  background: none;
}

.up-danger-outline::after {
  border: 1px solid #ed3f14 !important;
}

.up-warning-hover {
  background: #e56d00 !important;
  color: #e5e5e5 !important;
}

.up-warning-outline {
  color: #ff7900 !important;
  background: none;
}

.up-warning-outline::after {
  border: 1px solid #ff7900 !important;
}

.up-green-hover {
  background: #16ab60 !important;
  color: #e5e5e5 !important;
}

.up-green-outline {
  color: #44cf85 !important;
  background: none;
}

.up-green-outline::after {
  border: 1px solid #44cf85 !important;
}

.up-gray-hover {
  background: #d5d5d5 !important;
  color: #898989;
}

.up-gray-outline {
  color: #999 !important;
  background: none;
}

.up-gray-outline::after {
  border: 1px solid #ccc !important;
}

/*圆角 */

.up-fillet {
  border-radius: 45rpx;
}

.up-white.up-fillet::after {
  border-radius: 90rpx;
}

.up-outline-fillet::after {
  border-radius: 90rpx;
}

/*渐变 */

.up-btn-gradual {
  background: linear-gradient(-90deg, #5677fc, #5c8dff);
  border-radius: 45rpx;
  color: #fff;
}

.up-gradual-hover {
  color: #d5d4d9 !important;
  background: linear-gradient(-90deg, #4a67d6, #4e77d9);
}

.btn-gradual-disabled {
  color: #fafbfc !important;
  border-radius: 45rpx;
  background: linear-gradient(-90deg, #cad8fb, #c9d3fb);
}

/*不同尺寸 */

.up-btn-mini {
  width: auto;
  font-size: 30rpx;
  height: 70rpx;
  line-height: 70rpx;
}

.up-btn-small {
  width: auto;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
}

/* button end*/

/* flex start*/

.up-flex {
  display: -webkit-flex;
  display: flex;
}

.up-flex-1 {
  flex: 1;
}

.up-line-feed {
  flex-direction: row;
  flex-wrap: wrap;
}

/* flex end*/

/* tag start*/

.up-tag {
  padding: 16rpx 26rpx;
  font-size: 28rpx;
  border-radius: 6rpx;
  display: inline-block;
  line-height: 28rpx;
}

.up-tag-small {
  padding: 10rpx 14rpx;
  font-size: 24rpx;
  border-radius: 6rpx;
  display: inline-block;
  line-height: 24rpx;
}

.up-tag-outline {
  position: relative;
  background: none;
  color: #5677fc;
}

.up-tag-outline::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 20rpx;
  border: 1px solid #5677fc;
}

.up-tag-fillet {
  border-radius: 50rpx;
}

.up-white.up-tag-fillet::after {
  border-radius: 80rpx;
}

.up-tag-outline-fillet::after {
  border-radius: 80rpx;
}

.up-tag-fillet-left {
  border-radius: 50rpx 0 0 50rpx;
}

.up-tag-fillet-right {
  border-radius: 0 50rpx 50rpx 0;
}

/* tag end*/

/* badge start*/

.up-badge-dot {
  height: 16rpx;
  width: 16rpx;
  border-radius: 8rpx;
  display: inline-block;
  background: #5677fc;
}

.up-badge {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 50px;
  background: #5677fc;
  color: #fff;
}

.up-badge-small {
  transform: scale(0.8);
  transform-origin: center center;
}

/* badge end*/

.up-nomore {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 10rpx;
  padding-bottom: 44rpx;
}

.up-nomore::before {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #e5e5e5;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  width: 360rpx;
  top: 18rpx;
}

.up-nomore::after {
  content: '没有更多了';
  position: absolute;
  color: #999;
  font-size: 24rpx;
  text-align: center;
  /* width: 160rpx; */
  padding: 0 18rpx;
  height: 36rpx;
  line-height: 36rpx;
  background: #fafafa;
  z-index: 1;
}

.up-nomore-dot {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 10rpx;
  padding-bottom: 40rpx;
}

.up-nomore-dot::after {
  content: '●';
  position: absolute;
  color: #e5e5e5;
  font-size: 10px;
  text-align: center;
  width: 50rpx;
  height: 36rpx;
  line-height: 36rpx;
  background: #fafafa;
  transform: scale(0.8);
  transform-origin: center center;
  z-index: 1;
}

/* loading end*/

/* list start*/

.up-list-title {
  width: 100%;
  padding: 25rpx 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  line-height: 1;
  color: #999;
}

.up-list-content {
  width: 100%;
  position: relative;
}

.up-list-content::before {
  content: ' ';
  position: absolute;
  top: -1rpx;
  right: 0;
  left: 0;
  border-top: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.up-list-content::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}

.up-border-top::after {
  border-top: 0;
}

.up-border-bottom::after {
  border-bottom: 0;
}

.up-border-all::after {
  border: 0;
}

.up-list-cell {
  position: relative;
  background: #fff;
  width: 100%;
  padding: 26rpx 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.up-list-cell.up-padding-small {
  padding: 24rpx 30rpx;
}

.up-cell-hover {
  background: #f7f7f9 !important;
}

.up-list-cell::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 30rpx;
}

.up-cell-last::after {
  border-bottom: 0 !important;
}

.up-list-cell.up-cell-arrow:before {
  content: ' ';
  height: 11px;
  width: 11px;
  border-width: 2px 2px 0 0;
  border-color: #b2b2b2;
  border-style: solid;
  -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
  transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -7px;
  right: 30rpx;
}

/* footer start*/

.up-footer {
  width: 100%;
  overflow: hidden;
  padding: 30rpx 24rpx;
  box-sizing: border-box;
}

.up-fixed {
  position: fixed;
  bottom: 0;
}

/* footer end*/

/* custom start*/

.up-chatbox {
  max-width: 60%;
  border-radius: 10rpx;
  position: relative;
  padding: 20rpx 26rpx;
  font-size: 28rpx;
  color: #fff;
  /* word-break: break-all;
  word-wrap: break-word; */
}

.up-chatbox-left {
  background: #5c8dff;
  border: 1rpx solid #5c8dff;
  display: inline-block;
}

.up-chatbox-right {
  background: #19be6b;
  border: 1rpx solid #19be6b;
}

.up-chatbox::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 20rpx;
  border: 16rpx solid;
}

.up-chatbox-left::before {
  right: 100%;
  border-color: transparent #5c8dff transparent transparent;
}

.up-chatbox-right::before {
  left: 100%;
  border-color: transparent transparent transparent #19be6b;
}

/*checkbox 整体大小  */

.up-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
}

/* #ifdef APP-PLUS || MP */
/*checkbox 选项框大小  */

.up-checkbox .wx-checkbox-input {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
}

/*checkbox选中后样式  */

.up-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #5c8dff;
  width: 38rpx !important;
  height: 38rpx !important;
  border: none;
}

/*checkbox选中后图标样式  */

.up-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 30rpx !important;
  height: 30rpx !important;
  line-height: 30rpx;
  text-align: center;
  font-size: 20rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* #endif */

/* #ifdef H5 */
v::deep .up-checkbox .uni-checkbox-input {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50% !important;
}

v::deep .up-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  background: #5c8dff;
  width: 38rpx !important;
  height: 38rpx !important;
  border: none;
}

v::deep .up-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
  width: 30rpx !important;
  height: 30rpx !important;
  line-height: 30rpx;
  text-align: center;
  font-size: 20rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* #endif */

.up-right-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* custom end*/
