.container{
    display: grid;
    width: 100%;
    max-width: calc(100% - 20vw);
    height: calc(100% - 16vh);
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    margin: 3vh auto;
    box-sizing: border-box;
}

.item_box_1{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.item_box_2{
    width:100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    overflow: hidden;
}

.item_1{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: .5vh;
    overflow: hidden;
}

.item_2{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: .5vh;
    overflow: hidden;
}

.item_title_wrap{
    width: 100%;
}

.item_title{
    margin-top: 1vh;
    margin-left: 2vh;
    font-size: 2vh;
}

.item_box_2 > .item_2:nth-child(1) > .item_title_wrap > .item_title{
    width: 50%;
}

.item_box_2 > .item_2:nth-child(1) > .item_title_wrap > .item_title_element_wrap{
    width: 50%;
    margin-top: 1vh;
    margin-right: 2vh;
}

.item_box_2 > .item_2:nth-child(1) > .item_title_wrap > .item_title_element_wrap > .process_add_btn{
    width: 2.8vh;
    height: 2.8vh;
}

.item_box_2 > .item_2:nth-child(1) > .item_title_wrap > .item_title_element_wrap > .process_add_btn:hover{
    content: url('../images/process_add_btn_hover.svg');
    cursor: pointer;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    flex-wrap: wrap;
    margin-top: 0.5vh;
    padding-top: 0.5vh;
    padding-bottom: 1vh;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box::-webkit-scrollbar {
    display: none;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > div + div{
    margin-top: 20px;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap{
    width: 100%;
    height: 7em;
    font-size: 0.8vw;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process {
    width: calc(100% - 4em);
    height: 100%;
    border: 3px solid #F2F2F2;
    border-radius: .5vh;
    cursor: pointer;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process:hover {
    border: 3px solid #2A9D82;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap >.process > .process_title_box {
    width: 30%;
    height: 100%;
    border-right: 1px solid #ffffff;
    background-color: #F2F2F2;
    font-weight: bold;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_title_box > div + div{
    border-top: 1px solid #ffffff;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_title_box > div {
    width: 100%;
    height: 100%;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_content_box {
    width: 70%;
    height: 100%;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_content_box > div + div {
    border-top: 1px solid #F2F2F2;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_content_box > div {
    width: 100%;
    height: 100%;
}

.item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_content_box > .process_content_wrap > .process_content {
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item_box_2 > .item_2:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr;
}

.item_box_2 > .item_2:nth-child(2) > .sensor_data_box_wrap {
    width: 100%;
    height: 100%;
}

.item_box_2 > .item_2:nth-child(2) > .item_title_wrap > .item_title {
    width: 70%;
}

.item_box_2 > .item_2:nth-child(2) > .item_title_wrap > .item_title_element_wrap {
    width: 30%;
    margin-top: 1vh;
    margin-right: 2vh;
}

.item_box_2 > .item_2:nth-child(2) > .item_title_wrap > .item_title_element_wrap > select {
    font-family: 'SCDream5';
    border: none;
    background-color: #F2F2F2;
    border-radius: .5vh;
    color: #585858;
    font-size: 0.7vw;
    outline: none;
    padding: 3px;
}

.item_box_2 > .item_2:nth-child(2) > .sensor_data_box_wrap > .sensor_data_box {
    display: grid;
    width: calc(100% - 3em);
    height: calc(100% - 3em);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    font-size: 0.7vw;
    background-color: #F2F2F2;
    border-radius: .5vh;
}

.item_box_2 > .item_2:nth-child(2) > .sensor_data_box_wrap > .sensor_data_box > .sensor_data_header {
    border-bottom: 2px solid #ffffff;
    font-weight: bold;
}

.item_box_2 > .item_2:nth-child(2) > .sensor_select_box_wrap {
    width: 100%;
    height: 100%;
    font-size: 0.7vw;
}

.item_box_2 > .item_2:nth-child(2) > .sensor_select_box_wrap > .sensor_select_box {
    width: calc(100% - 3em);
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box {
    width: calc(100% - 3vw);
    height: calc(100% - 4vh);
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div {
    width : 100%;
    height: 100%;
    border: 3px solid #F2F2F2;
    border-radius: .5vh;
    overflow-y: hidden;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div + div {
    margin-left: 3vh;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_title {
    width: 100%;
    height: 15%;
    border-bottom: 3px solid #F2F2F2;
    background-color: #F2F2F2;
    font-size: 1vw;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_title > .work_state_icon {
    width: 1.2em;
    height: 1.2em;
    margin: 0 1vh 0 1vh;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap {
    width: 100%;
    height: 100%;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content > .content_line {
    width: 100%;
    height: 4.5vh;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content > .content_line > div {
    width: 100%;
    height: 100%;
    margin: 0 1vh 0 1vh;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > .worker_current_situation > .work_state_content_wrap > .work_state_content > .content_line > div:nth-child(1) {
    width: 70%;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > .worker_current_situation > .work_state_content_wrap > .work_state_content > .content_line > div:nth-child(2) {
    width: 30%;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content {
    width: 100%;
    height: 85%;
    font-size: 0.8vw;
    overflow-y: auto;
    flex-wrap: wrap;
}

.item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content::-webkit-scrollbar {
    display: none;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container {
    width: 100%;
    height: 100%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box {
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    border: 3px solid #F2F2F2;
    border-radius: .5vh;
    overflow: hidden;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > div + div {
    border-left: 3px solid #F2F2F2;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select {
    width: 20%;
    height: 100%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_title {
    width: 100%;
    height: 10%;
    font-weight: bold;
    background-color: #F2F2F2;
    font-size: 0.9vw;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_list{
    width: 100%;
    height: 90%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_list > .clip_process_name {
    width: 100%;
    height: 2.2em;
    font-size: 0.8vw;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_list > .clip_process_name > .clip_select_wrap > label:hover{
    color: #2A9D82;
    cursor: pointer;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_list > .clip_process_name > .clip_select_wrap > input {
    display: none;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_list > .clip_process_name > .clip_select_wrap > input:checked + label {
    color: #2A9D82;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box {
    width: 80%;
    height: 100%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap {
    width: calc(100% - 20px);
    height: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap::-webkit-scrollbar {
    height: 1vh;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap::-webkit-scrollbar-thumb {
    background: #2A9D82;
    border-radius: .5vh;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap::-webkit-scrollbar-thumb:active {
    background: #227865;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip {
    width: calc(100% - 33vw);
    height: calc(100% - 4vh);
    flex: 0 0 auto;
    border: 3px solid #ffffff;
    border-radius: 1vh;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip:hover {
    border: 3px solid #2A9D82;
    cursor: pointer;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > div + div {
    margin-left: 10px;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_thumbnail_wrap {
    width: 100%;
    height: 50%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_thumbnail_wrap > .clip_thumbnail {
    width: calc(100% - 0.8vw);
    height: calc(100% - 0.8vw);
    border-radius: .5vh;
    background-color: #ffffff;
    overflow: hidden;
}

.clip_thumbnail > img {
    width: 100%;
    height: 100%;
}

.clip_thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clip_thumbnail > .cam_no_signal {
    width: 100%;
    height: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    font-size: 0.8vw
}

.clip_thumbnail > .cam_no_signal > .no_signal_icon {
    width: auto;
    height: 3vw;
}

.clip_thumbnail > .cam_no_signal > .no_signal_icon > img {
    width: auto;
    height: 100%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_boundary_line {
    width: calc(100% - 0.8vw);
    border: 1px solid #ffffff
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area {
    width: 100%;
    height: 50%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area > .clip_info {
    width: calc(100% - 0.8vw);
    height: calc(100% - 0.8vw);
    background-color: #ffffff;
    border-radius: 1vh;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area > .clip_info > .clip_info_item_line {
    width: calc(100% - 0.8vw);
    height: 20%;
    font-size: 0.7vw;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area > .clip_info > .clip_info_item_line > .clip_info_item_title {
    width: 40%;
    height: 100%;
    font-weight: bold;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area > .clip_info > .clip_info_item_line > .clip_info_item_value {
    width: 60%;
    height: 100%;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area > .clip_info > .clip_info_item_line > .clip_info_item_value > .clip_info_item_value_overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .add_clip {
    width: calc(100% - 33vw);
    height: calc(100% - 4vh);
    flex: 0 0 auto;
    border: 3px solid #ffffff;
    background-color: #F2F2F2;
    border-radius: 1vh;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .add_clip:hover {
    border: 3px solid #2A9D82;
    cursor: pointer;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .add_clip > .add_clip_icon_bg {
    width: calc(100% - 0.8vw);
    height: calc(100% - 0.8vw);
    background-color: #ffffff;
    border-radius: 1vh;
}

.item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .add_clip > .add_clip_icon_bg > .add_clip_icon {
    width: 7vw;
    height: 7vw;
}

.cam_loading_wrap {
    width: 100%;
    height: 100%;
}

.danger_zone_0 {
    background-color: #F2F2F2;
}

.danger_zone_1 {
    background-color: #de3d3d;
}

@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 8px;
        gap: 8px;
        box-sizing: border-box;
    }

    .item_box_1 {
        grid-template-rows: auto auto;
        height: auto;
        gap: 8px;
    }

    .item_box_2 {
        grid-template-rows: auto auto;
        height: auto;
        gap: 8px;
        overflow: visible;
    }

    .item_1,
    .item_2 {
        height: auto;
        border-radius: 8px;
        overflow: hidden;
    }

    .item_title {
        font-size: 13px;
        margin: 8px 0 6px 10px;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container {
        width: 100%;
        height: auto;
        padding: 0 12px 12px;
        box-sizing: border-box;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box {
        flex-direction: column !important;
        width: 100%;
        height: auto;
        border: 3px solid #F2F2F2 !important;
        border-radius: 8px;
        overflow: hidden;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > div + div {
        border-left: none !important;
        border-top: 3px solid #F2F2F2 !important;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: stretch;
        background-color: #F2F2F2;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_title {
        width: auto !important;
        height: auto !important;
        padding: 9px 12px;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
        flex-shrink: 0;
        background-color: #F2F2F2;
        border-right: 3px solid #ffffff !important;
        display: flex;
        align-items: center;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_list {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #ffffff;
        padding: 0 10px;
        gap: 12px;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_select > .clip_select_list > .clip_process_name {
        width: auto !important;
        height: auto !important;
        flex-shrink: 0;
        font-size: 12px;
        padding: 9px 2px;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box {
        width: 100% !important;
        height: 260px !important;
        background-color: #ffffff;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding: 10px 12px;
        gap: 10px;
        box-sizing: border-box;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip,
    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .add_clip {
        width: 180px !important;
        height: calc(100% - 20px) !important;
        flex-shrink: 0;
        border-radius: 8px;
        border: 3px solid #F2F2F2 !important;
        overflow: hidden;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area > .clip_info {
        padding: 6px 10px;
        box-sizing: border-box;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_info_area > .clip_info > .clip_info_item_line {
        font-size: 11px;
        height: auto;
        padding: 4px 0;
    }

    .clip_thumbnail > .cam_no_signal { font-size: 10px; }
    .clip_thumbnail > .cam_no_signal > .no_signal_icon { height: 28px; }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .add_clip > .add_clip_icon_bg > .add_clip_icon {
        width: 36px !important;
        height: 36px !important;
    }

    .item_box_1 > .item_1:nth-child(1) > .ppe_analysis_clip_container > .ppe_analysis_clip_box > .clip_box > .clip_box_inner_wrap > .clip > .clip_boundary_line {
        margin: 2px 0;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap {
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 0 12px 12px;
        box-sizing: border-box;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 8px;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div {
        width: 100% !important;
        height: auto !important;
        border: 3px solid #F2F2F2 !important;
        border-radius: 8px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div + div {
        margin-left: 0 !important;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_title {
        width: 100% !important;
        height: auto !important;
        padding: 8px 12px;
        font-size: 13px;
        box-sizing: border-box;
        border-bottom: 3px solid #F2F2F2 !important;
        background-color: #F2F2F2;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_title > .work_state_icon {
        width: 18px;
        height: 18px;
        margin: 0 8px 0 0;
        flex-shrink: 0;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap {
        width: 100%;
        height: auto;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content {
        width: 100% !important;
        height: auto !important;
        font-size: 13px;
        overflow-y: visible;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content > .content_line {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #F2F2F2 !important;
        padding: 0 14px;
        box-sizing: border-box;
        margin: 0 !important;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content > .content_line:last-child {
        border-bottom: none !important;
    }

    .item_box_1 > .item_1:nth-child(2) > .work_state_wrap > .work_state_box > div > .work_state_content_wrap > .work_state_content > .content_line > div {
        font-size: 13px;
        margin: 0 !important;
    }

    .item_box_2 > .item_2:nth-child(1) > .item_title_wrap {
        display: flex;
        align-items: center;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .item_box_2 > .item_2:nth-child(1) > .item_title_wrap > .item_title {
        font-size: 13px;
        flex: 1;
        margin-right: 0;
    }

    .item_box_2 > .item_2:nth-child(1) > .item_title_wrap > .item_title_element_wrap {
        width: auto;
        margin: 8px 0 0 0;
        flex-shrink: 0;
    }

    .item_box_2 > .item_2:nth-child(1) > .item_title_wrap > .item_title_element_wrap > .process_add_btn {
        width: 24px;
        height: 24px;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box {
        height: 240px;
        overflow-y: auto;
        padding: 8px 12px 12px;
        box-sizing: border-box;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap {
        font-size: 12px;
        height: auto;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process {
        border: 3px solid #F2F2F2 !important;
        border-radius: 6px;
        height: auto !important;
        overflow: hidden;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_title_box > div {
        height: auto !important;
        padding: 8px 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ffffff !important;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_title_box > div:last-child {
        border-bottom: none !important;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_content_box > div {
        height: auto !important;
        padding: 8px 0px;
        box-sizing: border-box;
        border-bottom: 1px solid #F2F2F2 !important;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box > .process_wrap > .process > .process_content_box > div:last-child {
        border-bottom: none !important;
    }

    .item_box_2 > .item_2:nth-child(1) > .process_setting_box > div + div {
        margin-top: 8px;
    }

    .item_box_2 > .item_2:nth-child(2) {
        display: block !important;
        height: auto;
        overflow: hidden;
    }

    .item_box_2 > .item_2:nth-child(2) > .item_title_wrap {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding: 8px 12px 6px;
        box-sizing: border-box;
        gap: 8px;
    }

    .item_box_2 > .item_2:nth-child(2) > .item_title_wrap > .item_title {
        font-size: 13px;
        flex: 1;
        margin: 0;
        white-space: nowrap;
    }

    .item_box_2 > .item_2:nth-child(2) > .item_title_wrap > .item_title_element_wrap {
        flex-shrink: 0;
        width: auto;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .item_box_2 > .item_2:nth-child(2) > .item_title_wrap > .item_title_element_wrap > select {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        max-width: 120px;
    }

    .item_box_2 > .item_2:nth-child(2) > .sensor_data_box_wrap {
        width: 100%;
        height: auto !important;
        padding: 0 12px 12px;
        box-sizing: border-box;
    }

    .item_box_2 > .item_2:nth-child(2) > .sensor_data_box_wrap > .sensor_data_box {
        width: 100% !important;
        height: auto !important;
        font-size: 12px;
        border-radius: 8px;
        overflow: hidden;
        grid-template-rows: 40px repeat(7, 40px);
    }

}