.contentWidth {
    max-width: 1200px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    padding-top: 20px;
}

.contentbox {
    background: #FFFFFF;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-bottom: 20px;
    color: #444444;
    padding-top: 22px;
    padding-bottom: 22px;
    padding-left: 22px;
}

/*.contentbox-left {*/
/*    width: 17%;*/
/*    padding: 0px;*/
/*    padding-bottom: 16px;*/
/*    box-sizing: border-box;*/
/*    position: sticky;*/
/*    top: 95px;*/
/*    height: 921px;*/
/*    overflow: hidden;*/
/*}*/

.contentbox-left {
    width: 17%;
    padding: 0px;
    padding-bottom: 16px;
    box-sizing: border-box;
    position: sticky;
    top: 30px; /* 与 contentWidth 的 padding-top 保持一致 */
    height: fit-content; /* 改为适应内容高度 */
    overflow: visible; /* 允许内容正常显示 */
    align-self: flex-start; /* 确保在 flex 容器中正确对齐 */
}

.contentbox-right {
    width: 81.6%;
}

.search-container {
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin: 13px;
    background: #FBFBFB;
    border: 1px solid #DEE3DF;
    margin-right: 20px;
}
.search-icon {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    cursor: pointer;
}
#software-All {
    height: calc(90vh - 95px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

#software-All::-webkit-scrollbar {
    width: 12px; /* 滚动条的宽度 */
    height: 12px; /* 如果需要水平滚动条，可以设置其高度 */
}

/* 滚动条上的滑块 */
#software-All::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
    border: 3px solid #fff; /* 滑块边缘的颜色，这里设置为白色以形成对比 */
    /* 注意：border 的宽度会影响滑块的实际大小，因为它会被加在滑块的外部 */
}
.software-row {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    padding-left: 25px;
    font-size: 16px;
}

.software-row:hover {
    background-color: aliceblue;
}

.software-row img {
    margin-right: 10px;
}
.checked {
    background-color: rgba(0,75,255,0.1);
    color: #006fff;
}
#search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 11px;
    font-size: 14px;
    color: #999999;
    background: #FBFBFB;
    padding-right: 0px;
}

.search-icon {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    cursor: pointer;
}
.jobContent {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.jobItem {
    flex: 0 0 calc(33.333% - 20px);
    font-size: 15px;
    padding: 11px 18px;
    border: 1px solid #DEE3DF;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.jobItem:hover {
    color: #006fff;
    border-color: #006fff;
}

.jobItem:hover .card-title {
    color: blue;
}

.jobItem:hover .card-arrow {
    transform: translateX(5px);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header img {
    width: 20px;
    height: 20px;
}

.card-title {
    flex-grow: 1;
    margin: 0 6px;
    color: black;
    transition: color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: 1.5em;
}

.card-arrow {
    transition: transform 0.3s ease;
}

.card-description {
    margin-top: 10px;
    color: #666;
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 500;
}

.jobItemTop {
    cursor: pointer;
    color: #282A2D;
    font-size: 15px;
    font-weight: 600;
}

.jobItemBottomBox {
    padding-top: 12px;
    padding-bottom: 0;
    color: #686A6B;
    font-size: 15px;
    line-height: 28px;
}
.jobTopSpan {
    float: right;
    padding-top: 5px;
}

.software-name-style{
    font-size: 20px;
    font-weight: 600;
}

.text-with-line {
    padding-left: 15px;
    border-left: 3px solid #000;
}
.contentbox-title {
    padding-bottom: 20px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 21px;
}

.page-btn {
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #DEE3DF;
    background-color: white;
    color: #444444;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
    background-color: #006fff;
    color: white;
    border-color: #006fff;
}

.page-btn:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

.page-btn.active {
    background-color: #006fff;
    color: white;
    border-color: #006fff;
}

@media (max-width: 768px) {
    .contentWidth {
        flex-direction: column;
    }

    .contentbox-left {
        width: 100%;
        position: static;
        height: auto;
        padding-bottom: 10px;
    }

    #software-All {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        height: auto;
        max-height: none;
    }

    .software-row {
        flex-shrink: 0;
        padding: 10px 15px;
    }

    .contentbox-right {
        width: 100%;
    }

    .jobContent {
        flex-direction: column;
    }

    .jobItem {
        flex: 0 0 100%;
    }
}