.hc-search-hot-key {
    position: relative;
    color: #9A9A9A;
    padding: 16px;
    font-size: 14px;
}

.hc-search-screening-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    .title {
        position: relative;
    }
    .screening-key {
        position: relative;
        padding: 1px 12px;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: background 0.2s, color 0.2s;
        &:hover {
            background: var(--el-color-primary-light-8);
        }
        &.cut {
            background: var(--el-color-primary);
            color: white;
            cursor: default;
        }
    }
    .screening-key + .screening-key {
        margin-left: 10px;
    }
}
.hc-search-screening-item + .hc-search-screening-item {
    margin-top: 14px;
}


.hc-query-content-header-box {
    position: relative;
    display: flex;
    padding: 16px 0;
    margin-bottom: 24px;
    align-items: center;
    border-bottom: 1px dashed #dcdcdc;
    .header {
        position: relative;
        flex: 1;
    }
    .extra {
        position: relative;
    }
}

.hc-gather-card-box {
    position: relative;
    height: calc(100% - 160px);
    .hc-card-item-main {
        position: relative;
        height: 100%;
    }
    .hc-card-item-file {
        display: none;
        margin-top: 24px;
        .hc-icon-close {
            font-size: 20px;
        }
    }
    &.file-table {
        .hc-card-item-main {
            height: calc(100% - 344px);
        }
        .hc-card-item-file {
            display: block;
            height: 320px;
        }
    }
}



.hc-carry-spot-checks-pdf {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    transition: 0.2s;
    .hc-csc-pdf-btn {
        position: absolute;
        right: 0;
        top: 50%;
        color: white;
        font-size: 25px;
        z-index: 111;
        cursor: pointer;
        width: 36px;
        height: 40px;
        display: flex;
        padding-left: 6px;
        align-items: center;
        justify-content: center;
        border-radius: 150px 0 0 150px;
        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
        background-size: 200%;
        transition: background-position 0.5s;
        &:hover {
            background-position: 100% 0;
        }
    }
}
.hc-carry-spot-checks-data {
    position: relative;
    height: 100%;
    width: 480px;
    padding-left: 14px;
    border-left: 1px solid #e9e9e9;
    transition: 0.2s;
    .hc-csc-switch {
        position: relative;
        margin-bottom: 10px;
    }
    .hc-csc-info-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: 244px;
        margin-bottom: 20px;
        .hc-info-text-item {
            position: relative;
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            .title {
                font-weight: bold;
            }
            .content {
                flex: 1;
                position: relative;
                color: #101010;
            }
        }
        .hc-info-text-item + .hc-info-text-item {
            margin-top: 8px;
        }
    }
    .hc-csc-data-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: calc(100% - 400px);
        margin-bottom: 16px;
        .hc-csc-associated-row {
            position: relative;
            text-align: left;
            display: flex;
            align-items: center;
        }
        .hc-table-info-btn {
            position: absolute;
            right: -5px;
            top: -12px;
            color: white;
            font-size: 20px;
            z-index: 111;
            cursor: pointer;
            border-radius: 50px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
            background-size: 200%;
            transition: background-position 0.5s;
            &:hover {
                background-position: 100% 0;
            }
        }
    }
    .hc-csc-action-box {
        position: relative;
        background: white;
        border-radius: 10px;
        padding: 12px;
        height: 70px;
        .header-box {
            position: relative;
            display: flex;
            align-items: center;
            .title {
                flex: 1;
                color: #9A9A9A;
                font-size: 15px;
            }
        }
        .btn-box {
            position: relative;
            text-align: center;
        }
    }
}
.hc-collapse-item-title {
    flex: 1;
    position: relative;
    margin-left: 24px;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    .icon {
        margin-right: 10px;
        color: #FFAF2D;
        font-size: 24px;
    }
    .title {
        flex: 1;
        position: relative;
        user-select: none;
        color: #50545E;
        font-size: 16px;
        font-weight: 400;
    }
}

.hc-file-cabinet-gui {
    position: relative;
    height: 100%;
    display: flex;
    padding: 24px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    .gui-item {
        position: relative;
        height: 100%;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        .gui-view {
            position: relative;
            cursor: pointer;
            transition: transform .2s;
            img {
                width: 100%;
            }
            .num {
                position: absolute;
                left: 53%;
                top: 15.8%;
                color: white;
                font-weight: bold;
            }
            &:hover {
                transform: scale(1.3);
            }
        }
    }
}

.hc-gui-info-drawer {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    .hc-gui-info-img {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .gui-info-img {
            position: relative;
            height: 100%;
            max-height: 690px;
            img {
                position: relative;
                height: 100%;
            }
            .gui-file-item-box {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                padding: 18px;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                align-content: flex-start;
                justify-content: flex-start;
                .gui-file-item {
                    position: relative;
                    display: flex;
                    width: 25%;
                    height: 19.6%;
                    padding: 1%;
                    .item {
                        position: relative;
                        background: #927a6a;
                        height: 100%;
                        width: 12%;
                        padding: 6px 3px;
                        font-size: 13px;
                        border: 1px solid #5d4848;
                        border-radius: 3px;
                        writing-mode: vertical-lr;
                        text-orientation: upright;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        cursor: pointer;
                        transform: skew(4deg,0);
                        transition: transform .2s;
                        &.query {
                            background: #ffddc6;
                        }
                        &.cur, &:hover {
                            z-index: 22;
                            background: #A16222;
                            border: 1px solid #bbbbbb;
                            transform: scale(1.2) skew(4deg,0);
                        }
                    }
                }
            }
        }
    }
    .hc-gui-info-data {
        position: relative;
        height: 100%;
        flex: 1;
        padding-left: 40px;
        .hc-gui-data-container {
            position: relative;
            height: calc(100% - 50px);
            .info-item {
                position: relative;
                display: flex;
                color: #101010;
                .title {
                    margin-right: 14px;
                    font-weight: bold;
                    span + span {
                        margin-left: 29px;
                    }
                }
                .text {
                    flex: 1;
                }
            }
            .info-item + .info-item {
                margin-top: 14px;
            }
        }
        .btn-box {
            position: relative;
            height: 50px;
            display: flex;
            padding-right: 10px;
            justify-content: flex-end;
            align-items: flex-end;
        }
    }
}