page {
  height: 100%;
}

.filer-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.filter-top {
  overflow: auto;
  flex: 1;
  display: flex;
}

.filter-top .filter-top-left {
  text-align: center;
  overflow: auto;
  padding-top: 40rpx;
}

.filter-top .filter-top-right {
  flex: 1;
  padding-top: 40rpx;
  background-color: #fff;
  overflow: auto;
  position: relative;
}

.filter-item {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 60rpx;
  padding: 0 36rpx;
}

.filter-top-left .choosed {
  color: #ff523d;
  border-bottom: 0;
}

.filter-item-active {
  color: #ff523d;
}

.filter-top-left .filter-item-active {
  position: relative;
  color: #666;
}

.filter-top-left .filter-item-active::after {
  content: " ";
  display: block;
  left: 36rpx;
  right: 36rpx;
  position: absolute;
  bottom: -10rpx;
  border-bottom: 4rpx solid #ff523d;
}



.filer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 40rpx;
  border-top: 2rpx solid #f5f5f5;
  background-color: #fff;
}

.filer-bottom .con-btn {
  font-size: 32rpx;
  border-radius: 6rpx;
  text-align: center;
  padding: 24rpx 0;
}

.filer-bottom .con-btn.cancel {
  color: #999;
  width: 240rpx;
  background-color: #f5f5f5;
}

.filer-bottom .con-btn.sure {
  color: #fff;
  width: 400rpx;
  background-color: #ff523d;
}

.custom-tiem-wrap {
  border-top: 16rpx solid #f5f5f5;
  padding-top: 32rpx;
}

.custom-tiem-wrap .title {
  padding: 0 36rpx;
  font-size: 32rpx;
  color: #000;
}

.picker-item {
  margin: 0 12rpx;
  font-size: 32rpx;
  color: #999;
  padding: 24rpx;
  border-bottom: 2rpx solid #f5f5f5;
  align-items: center;
  justify-content: space-between;
  display: flex;
}

.picker-item picker-item-left {
  font-size: 30rpx;
  color: #999;
}

.picker-item picker-item-center {
  font-size: 32rpx;
  color: #000;
}

.picker-item .picker-item-right {
  font-size: 24rpx;
}

.country-wrap,
.city-wrap {
  padding: 0 36rpx;
  margin-bottom: 32rpx;
}

.country-wrap .country-title,
.city-wrap .city-title {
  font-size: 32rpx;
  color: #000;
  margin-bottom: 28rpx;
}

.country-wrap .country-inner,
.city-wrap .city-inner {
  overflow: hidden;
}

.country-wrap .country-inner .country-item {
  width: 144rpx;
  text-align: center;
  line-height: 64rpx;
  height: 64rpx;
  display: block;
  float: left;
  border-radius: 6rpx;
  border: 2rpx solid #eee;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #666;
  box-sizing: border-box;
}

.country-wrap .country-inner .country-item.active,
.city-wrap .city-inner .city-item.active {
  border-color: #ff523d;
  color: #ff523d;
}

.country-wrap .country-inner .country-item:nth-child(3n) {
  margin-right: 0;
}

.city-wrap .city-inner .city-item {
  display: block;
  font-size: 32rpx;
  color: #666;
  margin-bottom: 60rpx;
}

.source-wrap {
  margin: 0 36rpx;
}

.source-wrap .source-input {
  font-size: 32rpx;
  color: #999;
  border-bottom: 2rpx solid #f5f5f5;
  padding-bottom: 28rpx;
}

.loading {
  width: 90rpx;
  height: 120rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.content {
  padding: 0 36rpx;
}

.content .time-content:last-child {
  border-bottom: 0;
}

.time-content {
  padding: 28rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
  font-size: 32rpx;
  display: flex;
  align-items: center;
}

.time-content-left {
  margin-right: 100rpx;
  color: #999;
}

.time-content-right {
  color: #000;
  flex: 1;
  display: flex;
}

.time-content-right .time-content-right-item:last-child {
  margin-right: 0;
}

.time-content-right-item {
  margin-right: 100rpx;
  padding: 4rpx 18rpx;
  white-space: nowrap;
}

.time-content-right-item.active {
  color: #fff;
  background: #ff523d;
  border-radius: 32rpx;
}

.source-user {
  margin: 0 36rpx;
  display: flex;
  padding: 28rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
  align-items: center;
  justify-content: space-between;
}

.source-user .source-user-left {
  font-size: 32rpx;
  color: #999;
}

.source-user .source-user-right {
  font-size: 32rpx;
  color: #000;
  display: flex;
  align-items: center;
}

.source-user .source-user-right .icon {
  font-size: 20rpx;
  color: #999;
  display: block;
  margin-left: 20rpx;
}

.search-outer {
  border-bottom: 2rpx solid #f5f5f5;
  font-size: 32rpx;
  padding-bottom: 28rpx;
  margin-bottom: 40rpx;
}

.search-outer .search-inner {
  font-size: 32rpx;
  color: #666;
}

.search-outer .search-inner .placeholder {
  font-size: 32rpx;
  color: #999;
}

.city-style {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.city-style text {
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #333333;
  height: 80rpx;
  line-height: 80rpx;
}

.city-style .name-box {
  width: 500rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-style .name-box .en-name {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  margin-right: 10rpx;
}

.city-style .name-box .name {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #8D8D8D;
}

.city-style .active .en-name,
.city-style .active .name {
  color: #ff523d;
}