.subject_add {
    width: 100%;
    max-width: 784px;
    min-width: 343px;
    margin-bottom: 16px;
}

.item_wrap {
    margin-bottom: 24px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    border-radius: 15px;
    overflow: hidden;
}

.item_header {
    width: 100%;
    height: 40px;
    background: #285ee4;
    /* border-radius: 15px 15px 0 0; */
    box-sizing: border-box;
}

.item_body {
    width: 100%;
    background: #fff;
    padding: 24px 16px;
    /* border-radius: 0 0 15px 15px; */
    box-sizing: border-box;
}

.item_main {
    display: flex;
    position: relative;
}

.input_group .note {
    letter-spacing: 48px;
}

.input_group textarea {
    width: 100%;
    /* min-height: 36px; */
    padding: 4px 12px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
    /* text-align: left; */
    color: #3d3d3d;
    outline: none;
    /* overflow-y: auto; */
    resize: vertical;
    box-sizing: border-box;

}


.subject_title {
    font-size: 20px;
    margin-bottom: 32px;
    background-color: #f1f1f1;
    padding: 8px 16px;
    border-radius: 5px;
    width: fit-content;
}

.annotation-title label {
    font-size: 18px;
}

.line {
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom, #C6C6C6 0%, #C6C6C6 70%, transparent 50%);
    background-size: 1px 24px;
    background-repeat: repeat-y;

}

.parent-subject-container {
    width: 50%;
    /* border: 1px solid red; */
    padding-left: 8px;
    padding-right: 16px;
    min-width: 311px;
    position: relative;
}

.child-subject-container {
    width: 50%;
    /* border: 1px solid blue; */
    padding-left: 16px;
    padding-right: 8px;
}

.subject_add .action {
    display: flex;
    justify-content: end;
}

.subject_add .action .btn {
    width: 150px;
    height: 40px;
    font-size: 18px;
    letter-spacing: 1.8px;
    font-weight: 800;
    box-sizing: border-box;
}

.subject_add .action .btn+.btn {
    margin-left: 8px;
}

@media screen and (max-width:800px) {
    .item_main {
        flex-direction: column;
    }

    .parent-subject-container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 24px;
    }

    .child-subject-container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        min-width: 311px;
        margin-top: 24px;
    }

    .line {
        display: none;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 45%;
        left: 0;
        transform: translateY(-45%);
        background-image: linear-gradient(to left, #C6C6C6 0%, #C6C6C6 70%, transparent 50%);
        background-size: 24px 1px;
        background-repeat: repeat-x;
    }
}

@media screen and (max-width:450px){
    .subject_add .action{
        flex-direction: column-reverse;
    }

    .subject_add .action .btn{
        width: 100%;
    }

    .subject_add .action .btn +.btn{
        margin-left: 0;
        margin-bottom: 8px;
    }
}