body, html {
    width: 100%;
    height: 100%;
}
.monitoring-table {
    width: 100%;
}
.monitoring-table tr {
    height: 28px;
}

.tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    height: 40px;
    background-color: #8dd1c9;
    min-width: 400px;
}

.tab > div {
    padding: 5px 10px;
    border-radius:50px;
    font-weight: bold;
    cursor:pointer;
    background: #ffffff;
    transition:all .3s
}
.tab > div.on {
    color:#fff;
    background: #0ea6ab;
    display: block;
}
.tab > div:hover {
    padding: 5px 20px;
}
.monitoring-table tbody tr {
    cursor: pointer;
}
/*.left-box .title {*/
/*    min-width: 1250px;*/
/*}*/
.title .refresh-button {
    margin-left: auto;
    gap: 5px;
    right: 10px;
    display: flex;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: black;
    background-color: #efefef;
    border-radius: 3px;
    text-shadow: 0.5px 0.5px 0 #fff;
    border: 1px solid #cccccc;
    cursor: pointer;
}

.title .refresh-button.off{
    background-color: #e0e0e0;
    cursor: not-allowed; /* 마우스 포인터 변경 */
    pointer-events: none; /* 클릭 이벤트 차단 */
    opacity: 0.6; /* 전체 투명도 조정 */
    color : #747070;
}
.refresh-button img {
    /*filter: brightness(0) invert(1);*/
    -webkit-filter: invert(38%) sepia(100%) hue-rotate(193deg) saturate(37);
    filter: invert(38%) sepia(100%) hue-rotate(193deg) saturate(37);
}
.title .refresh-button:hover {
    filter: brightness(1.1);
}
.comm0,
.comm1 {
    text-align: center;
}

.comm2 > div {
    display: inline-block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 35%, #ffeccd, #f09b00 60%, #b65007 80%);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0), inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.4);
    vertical-align: middle;
}

.comm1 > div {
    display: inline-block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 35%, #ffcccc, red 60%, #cc0000 80%);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0), inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.4);
    vertical-align: middle;
}
.comm0 > div {
    display: inline-block;
    background: radial-gradient(circle at 35% 35%, #cff1cf, #059305 60%, #1f651f 100%);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0), inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.4);
    vertical-align: middle;
}


/*.title .refresh-button img {*/
/*    -webkit-filter: brightness(0) invert(1);*/
/*    filter: brightness(0) invert(1);*/
/*}*/

.dock-bar {
    height: 8px;
    background: linear-gradient(
            to bottom,
            #d8d8d8 0%,
            #b0b0b0 40%,
            #999999 70%,
            #888888 100%
    );
    border-top: 1px solid #f0f0f0;     /* 상단 밝은 라인 */
    border-bottom: 1px solid #555555;  /* 하단 어두운 라인 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: row-resize;
    z-index: 12;
    position: relative;
}
.left-box .dock-bar {
    /*min-width: 1250px;*/
}

.wr-bar {
    width: 8px;
    background: linear-gradient(
            to right,
            #d8d8d8 0%,
            #b0b0b0 40%,
            #999999 70%,
            #888888 100%
    );
    border-left: 1px solid #f0f0f0;     /* 상단 밝은 라인 */
    border-right: 1px solid #555555;  /* 하단 어두운 라인 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: col-resize;
    z-index: 12;
    position: relative;
    height: 100%;
}


.wr-bar span,
/* 중앙 흰 점들 */
.dock-bar span {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 2px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3); /* 약간 입체감 */
}

.container-1 {
    width: calc(100% - 428px);
    /*min-width: 1250px;*/
    height: 100%;
    z-index: 10;
    position: relative;
    overflow: hidden;
    border: 1px solid #cccccc;
}

.container-2 {
    width: 100%;
    /*min-width: 1252px;*/
    height: 30%;
    z-index: 12;
    position: relative;
    overflow: hidden;
    border: 1px solid #cccccc;
}

.container-3 {
    width: 420px;
    height: 100%;
    z-index: 12;
    position: relative;
    /*overflow: auto;*/
    border: 1px solid #cccccc;
}

.container-4 {
    width: 100%;
    height: calc(100% - 408px);
    z-index: 12;
    position: relative;
    /*overflow: auto;*/
    border: 1px solid #cccccc;
}


tr > th:first-child {
    box-shadow: none;
}


/*tbody tr.on td {*/
/*    border-top : 1px solid black;*/
/*    border-bottom : 1px solid black;*/
/*}*/

/*thead tr th:nth-child(1)::after {*/
/*    content: '●';*/
/*    font-size: 10px;*/
/*    color: #959595;*/
/*}*/


th.asc, th.desc {
    position: relative;
}
th.asc::after {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background-image: url(/static/image/chevron-down.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    rotate: 180deg;
    filter: grayscale(100%) brightness(0);
    background-position: center;
    margin-left: 5px;
}

th.desc::after {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background-image: url(/static/image/chevron-down.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    filter: grayscale(100%) brightness(0);
    background-position: center;
    margin-left: 5px;
}

.log-box {
    width: 100%;
    height: calc(100% - 70px);
    overflow: auto;
}
.log {
    /*background-color: #fff6dc;*/
    background-color: white;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 5px 10px;
}
.wrap {
    width: 100%;
    height: calc(100% - 56px);
    min-width: 651px;
}


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

thead tr:nth-child(2) th:not(:first-child) {
    cursor: pointer;
}

.left-box {
    /*width: 1452px;*/
    width: 100%;
    height: calc(70% - 8px);
    overflow: hidden;
    display: flex;
}

.right-box {
    width: calc(24% - 8px);
    /*width: calc(100% - 1460px);*/
    height: 100%;
    overflow: hidden;
}
.right-box > div {
    width: 100%;
    height: 100%;
}
.log-box table {
    width: 1000px;
}
.left-box .process-table {
    width: 100%;
    max-width: 450px;
}
/*.right-box .dock-bar,*/
/*.container-3,*/
/*.container-4,*/
/*.right-box .title {*/
/*    min-width: 450px;*/
/*}*/
/*.right-box table {*/
/*    min-width: 450px;*/
/*}*/
.left-box .log-box table {
    min-width: 650px;
}

.log-box table {
    display: none;
}
.log-box table.on {
    display: table;
}
table td.empty-box {
    background-color: white;
    height: 140px;
}
.back_1 {
    background-color: red;
    color : white;
}

.back_2 {
    background-color: orange;
    color : white;
}

.monitoring-table tbody tr td:nth-child(4),
.process-table tbody tr td:nth-child(4),
.send_log_tb tbody tr td:nth-child(3),
.send_log_tb tbody tr td:nth-child(4),
.moct_log_tb tbody tr td:nth-child(3),
.moct_log_tb tbody tr td:nth-child(4),
.rcv_log_tb tbody tr td:nth-child(3),
.rcv_log_tb tbody tr td:nth-child(4),
.int_status_log_tb tbody tr td:nth-child(2):not(.empty-box) {
    text-align: left;
}

span.tot {
    color : blue;
}
span.error {
    color : red;
}
/*.loading {*/
/*    z-index: 999;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    background: rgba(0, 0, 0, 0.3) url("/static/image/loading.gif") no-repeat center;*/
/*}*/