/* pages/spell-list/spell-list.wxss */
@import "../../templates/templates.wxss";
@import "../../pages/css/modal.wxss";


@keyframes content_box {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.no-data {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200rpx;
    font-size: 28rpx;
    color: #cccccc;
}
.fix-box {
  width:100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #fff;
}
.position {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f2f2f2;
}
.position .left {
    display: flex;
    align-items: center;
}
.position .left .icon-location {
    font-size: 44rpx;
    color: #000000;
    margin-right: 14rpx;
}
.position .left .icon-arrow-down {
    font-size: 36rpx;
    color: #000000;
    margin-left: 18rpx;
}
.position text {
    color: #000000;
    font-size: 28rpx;
}
.position .right {
    width: 70%;
    height: 52rpx;
    position: relative;
    background-color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10rpx;
    padding: 0 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.position .right image {
    width: 34rpx;
    height: 34rpx;
    position: absolute;
    right: 36rpx;
    top: 8rpx;
}
.position .input {
    width: 100%;
    height: 54rpx;
    color: #000000;
    padding-left: 20rpx;
    font-size: 28rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 26rpx;
}
.tab_box {
    padding: 0 100rpx;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 20rpx solid #f5f5f5;
    overflow: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
}
.tab_item {
    display: inline-block;
    width: 160rpx;
    font-size: 32rpx;
    color: #0E050A;
    position: relative;
    text-align: center;
    /* border: 1rpx solid red; */
}
.active {
    color: #0E050A;
}

.tab_box .active::after {
    content: "";
    /*border: 2rpx solid #DB4E2A;*/
    position: absolute;
    bottom: 0rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 120rpx;
    height: 4rpx;
    background: #DB4E2A;
}
.sort-select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sort-box, .select-box {
    display: flex;
    align-items: center;
}
.sort-btn {
    color: #333333;
    font-size: 24rpx;
    margin-right: 10rpx;
}
.select-btn {
    color: #666666;
    font-size: 24rpx;
    margin-right: 10rpx;
}
.sort-select-box .icon-arrow-down {
    font-size: 30rpx;
    color: #666666;
}
.rent_mask {
    width: 100%;
    height: 100%;
    background: RGBA(0, 0, 0, 0.2);
    position: fixed;
    top: 282rpx;
    left: 0;
    z-index: 10;
    overflow: hidden;
}

.rent_popup {
    background: #fafafa;
    padding: 0 30rpx;
}
.time-box {
    padding: 20rpx 30rpx;
}
.rent_item {
    width: 100%;
    height: 73rpx;
    border-bottom: 1rpx solid #ebebeb;
    font-size: 30rpx;
    color: #b3b3b3;
    text-align: center;
    line-height: 73rpx;
}

.rent_item.active {
    color: #DB4E2A;
}

.rent_item:last-child {
    border-bottom: 0;
}
.picker-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
}
.picker-box picker {
    width: 50%;
    height: 50rpx;
    line-height: 50rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 40rpx;
}
.time-select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.select-picker {
    width: 90%;
    text-align: center;
}
.select-picker .picker {
    color: #666666;
    font-size: 28rpx;
}
.time-box .title {
    font-size: 30rpx;
    color: #333333;
}
.time-select-box .arrow {
    margin-right: 20rpx;
}
.time-box .type {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10rpx 0;
}
.time-box .type text {
    color: #666666;
    font-size: 28rpx;
    padding: 10rpx 10rpx;
}
.time-box .type .change-color{
    color: #DB4E2A;
}
.content_box {
    background: #fff;
    animation: content_box 1s both;
    margin-top: 284rpx;
    padding: 10rpx 20rpx 120rpx 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content_item {
    padding: 16rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 2rpx 8rpx 38rpx rgba(89, 89, 89, 0.14);
    border-radius: 8rpx;
}
.content_item  image {
    width: 100%;
    height: 340rpx;
}
.content_item .title, .content_item .user {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content_item .user {
    justify-content: flex-start;
    margin-top: 10rpx;
}
.content_item .title .area {
    color: #333333;
    font-size: 24rpx;
}
.content_item .title .num {
    color: #666666;
    font-size: 22rpx;
}
.content_item .user image {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 10rpx;
}
.content_item .user text {
    color: #666666;
    font-size: 22rpx;
}