/* pages/projectSubjectList/projectSubjectList.wxss */
view,
scroll-view {
    box-sizing: border-box;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
}

.container {
    height: 100vh;

    .top-title {
        font-weight: 650;
        font-size: 27rpx;
        color: #000000;
        position: relative;
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;

        &::after {
            content: "";
            position: absolute;
            // top: 43.5rpx;
            bottom: 0;
            width: 100%;
            height: 7.5rpx;
            display: block;
            background-color: #cff7ff;
            border-radius: 58.5rpx;
        }

        .icon {
            width: 18rpx;
            height: 10.5rpx;
            margin-left: 13.5rpx;
        }
    }

    .side {
        width: 112.5rpx;
        // padding-bottom: 50rpx;
        background-color: rgba(245, 245, 245, 1);

        .item {
            width: 112.5rpx;
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            font-size: 25.5rpx;
            color: #555555;

            &.pitch {
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                color: #9A9D02;
                background-color: rgba(255, 255, 255, 1);
            }
        }
    }

    .content {
        padding-left: 36rpx;

        .head-box {
            height: 96rpx;
            line-height: 96rpx;
            padding-right: 22.5rpx;
            justify-content: space-between;

            border-bottom: 1rpx solid #ebebeb;


            .amount {
                font-size: 24rpx;
                color: #7F7F7F;
            }

            .sort {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-size: 24rpx;
                color: #000000;
                position: relative;

                .icon {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 6rpx;
                }

                .sort-mask {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    // background-color: #7F7F7F;
                    z-index: 99;
                }

                .sort-list {
                    z-index: 100;
                    position: absolute;
                    top: 80rpx;
                    width: 100%;
                    background-color: #ffffff;
                    border: 1rpx solid #e4e7ed;
                    border-radius: 20rpx;
                    box-shadow: 0 0 12rpx rgba(0, 0, 0, .078);

                    .sort-item {
                        text-align: center;
                        line-height: 96rpx;
                        height: 96rpx;


                        &.pitch {
                            color: #9A9D02;
                            font-weight: 650;
                        }
                    }
                }
            }

            .school {
                font-size: 24rpx;
                color: #7F7F7F;

                .icon {
                    width: 27rpx;
                    height: 27rpx;
                    margin-left: 6rpx;
                }
            }
        }

        .list {
            .item {
                &:not(:first-of-type) {
                    border-top: 1rpx solid #ebebeb;
                }

                padding-top: 33rpx;
                padding-bottom: 36rpx;
                padding-right: 22.5rpx;
                position: relative;

                .name {
                    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                    font-weight: 650;
                    font-size: 33rpx;
                    color: #000000;
                }

                .operate {
                    justify-content: space-between;
                    margin-bottom: 21rpx;
                    z-index: 1;
                    position: relative;

                    .school {
                        font-size: 24rpx;
                        color: #333333;

                        .icon {
                            width: 24rpx;
                            height: 27rpx;
                            margin-right: 12rpx;
                        }
                    }
                }

                .english {
                    font-size: 21rpx;
                    color: #7F7F7F;
                    margin-top: 12rpx;
                }

                .introduce {
                    font-size: 25.5rpx;
                    color: #555555;
                    margin-top: 15rpx;
                    flex-wrap: wrap;

                    .line {
                        color: #D7D7D7;
                        margin: 0 12rpx;
                    }

                    .quantity {
                        font-family: 'Arial', 'Arial-Black', 'Arial Black', sans-serif;
                        font-weight: 900;
                        color: #000000;
                        margin-left: 12rpx;
                    }
                }

                .word {
                    font-size: 24rpx;
                    color: #7F7F7F;
                    padding: 10.5rpx 15rpx;
                    background-color: rgba(246, 246, 246, 1);
                    border-radius: 7.5rpx;
                    margin-top: 15rpx;
                }

                .tag {
                    flex-wrap: wrap;
                    margin-top: 25rpx;

                    .tag-item {
                        height: 36rpx;
                        line-height: 36rpx;
                        font-size: 22.5rpx;
                        color: #858585;
                        padding: 0 10.5rpx;
                        border: 1rpx solid #aaaaaa;
                        border-radius: 6px;
                        width: fit-content;
                        margin-right: 15rpx;
                        margin-bottom: 10rpx;

                        &.admissions {
                            background-color: rgba(115, 209, 229, 1);
                            border: none;
                            color: #fff;
                        }

                        &.gray {
                            border: none;
                            color: #fff;
                            background-color: rgba(51, 51, 51, 1);

                            &.semester {
                                background-color: #f95d5d;
                            }
                        }
                    }
                }
            }

            .fill {
                height: 180rpx;
            }
        }
    }
}

.join {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 21rpx;
    color: #026277;

    .add {
        width: 42rpx;
        height: 42rpx;
        background-color: rgba(207, 247, 255, 1);
        border: 1rpx solid rgba(186, 222, 230, 1);
        border-radius: 30rpx;

        .icon {
            width: 18rpx;
            height: 18rpx;
        }
    }
}

.onearth {
    color: #AAAAAA;
    line-height: 36rpx;
    text-align: center;
    font-size: 20rpx;
    margin-top: 50rpx;
}

.cancel {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 21rpx;
    color: #7F7F7F;
    text-align: center;

    .cross {
        width: 42rpx;
        height: 42rpx;
        background-color: rgba(246, 246, 246, 1);
        border: 1rpx solid rgba(235, 235, 235, 1);
        border-radius: 30rpx;
        // margin-bottom: 6rpx;

        .icon {
            width: 22.5rpx;
            height: 18rpx;
        }
    }
}

.empty {
    background-color: #fff;
    color: #7F7F7F;
    font-size: 23rpx;
    margin: 36rpx 0rpx 0;
    flex-direction: column;
    height: 60vh;
    padding-right: 36rpx;
    
    .dot-box {
        .dot {
            width: 12rpx;
            height: 12rpx;

            &:not(:last-of-type) {
                margin-right: 8rpx;
            }
        }
    }

    .empty-icom {
        width: 153rpx;
        height: 180rpx;
        margin-top: 12rpx;
        margin-bottom: 30rpx;
    }
}

.more {
    width: 42rpx;
    height: 42rpx;
    background-color: rgba(207, 247, 255, 1);
    border: 1rpx solid rgba(186, 222, 230, 1);
    border-radius: 30rpx;
    position: relative;

    .icon {
        width: 27rpx;
        height: 12rpx;
    }

    .more-select-mask {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .more-select {
        position: absolute;
        top: 55rpx;
        right: 0;
        width: 450rpx;
        height: 183rpx;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 12rpx;
        box-shadow: 0 0 7.5rpx rgba(0, 0, 0, 0.180392156862745);
        flex-direction: column;
        padding: 27rpx 30rpx 0;
        z-index: 1;

        .more-select-title {
            font-size: 21rpx;
            color: #7F7F7F;
            margin-bottom: 34.5rpx;

            .dot {
                width: 12rpx;
                height: 12rpx;
                border: 1rpx solid rgb(204, 208, 3);
                border-radius: 50%;
                background-color: rgb(246, 246, 189);
                margin-right: 12rpx;
            }
        }

        .more-select-btn {
            width: 240rpx;
            height: 60rpx;
            background-color: rgba(207, 247, 255, 1);
            border: 1rpx solid rgba(186, 222, 230, 1);
            border-radius: 237rpx;
            box-shadow: 0 0 4.5rpx rgba(0, 0, 0, 0.0705882352941176);
            font-size: 24rpx;
            color: #026277;
            margin: 0 auto;

            .more-select-icon {
                width: 24rpx;
                height: 24rpx;
                margin-right: 9rpx;
            }
        }
    }
}

.major {
    position: relative;
    justify-content: flex-end;

    .side {
        position: fixed;
        top: 0;
        left: 0;
    }

    .content {
        width: calc(100vw - 112.5rpx);
    }
}

.index-sidebar {
    position: relative;
    z-index: 99;
}