@charset "UTF-8";

/*초기화*/

body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dd, div, a, address, small, img, input,span,iframe, form, tr, td, table, fieldset, select, header, tbody, frame {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 500;}
ul li {list-style:none;}
ul li {list-style:none;}
a {text-decoration: none; cursor: pointer;}
address {font-style: normal;}
button {border: none; cursor: pointer;}
.hidden {position: absolute; top: -9999px;}
img {border:0;}
textarea {resize:none;}
table {border-collapse:collapse;}
.borderNo {border: none;}
 /* 바깥 테두리에만 border 추가 */
 /*
table {
    border: 1px solid black;
}
 상단과 좌측 테두리 숨기기 
tr:first-child th {
    border-top: none;
}
tr th:first-child, tr td:first-child {
    border-left: none;
}
 우측 테두리 숨기기 
tr th:last-child, tr td:last-child {
    border-right: none;
}
 하단 테두리 숨기기 
tr:last-child td {
    border-bottom: none;
}
*/    

/********************************공통*******************************/
html,body {height:100%;}
body {font-family: 'Noto Sans KR', sans-serif; width: 100%; font-size:13px;}
.dashboard_body {background: #eaf0f5;}
/* text-align*/

.align_l {text-align: left !important;}
.align_c {text-align: center !important;}
.align_r {text-align: right !important;}

/* float: right; */

.float_r {float:right !important;}
.float_l {float:left !important;}

.border1b {
    border: 2px solid black;
}

/* width */

.w100 {width:100%; box-sizing: border-box; padding:5px; }
.w90 {width:calc( 90% - 10px ); box-sizing: border-box; padding:10px;}
.w80 {width:calc( 80% - 10px ); box-sizing: border-box; padding:10px;}
.w70 {width:calc( 70% - 10px ); box-sizing: border-box; padding:10px;}
.w60 {width:60%; box-sizing: border-box; padding:10px;}
.w50 {width:50%; box-sizing: border-box; padding:10px;}
.w45 {width:45%; box-sizing: border-box; padding:10px;}
.w40 {width:40%; box-sizing: border-box; padding:10px;}
.w35 {width:35%;box-sizing: border-box; padding:10px;}
.w31 {width:31%;box-sizing: border-box; padding:10px; }
.w30 {width:30%;box-sizing: border-box; padding:10px;}
.graphs-container {display: flex;justify-content: left;align-items: flex-start;}
.w25 {width:25%; box-sizing: border-box; padding:10px;}
.w20 {width:100%; box-sizing: border-box; }
.w10 {width:10%; box-sizing: border-box; padding:10px;}

.pl10 {padding-left:10px;}
.pr10 {padding-right:10px;}
.mt10 {margin-top:10px;}
.mr10 {margin-right:10px;}
.mb10 {margin-bottom:10px;}

.w30p {width:30px;}
.bd_box {box-sizing: border-box;}

/* button style */

.btn_style {display: inline-block; font-weight:bold; border-radius: 5px; padding:0 10px; cursor: pointer;  transition: all 0.3s;}

.btns {background:#d8eeff; color:#0084ff; border-radius: 3px; font-size:12px; padding: 5px 7px; height:27px; vertical-align: bottom; transition: 0.3s ease;}
.btns span {display:inline-block; padding:0px 3px; text-align: center; background:#d4e9ff; color:#0066d3; border-radius: 2px;}
.btns:hover {background:#3999ff; color:#fff;}

.blue_btn2 {border:1px solid #3999ff;background:#3999ff;color:#fff;/* border-radius: 2px; */border-radius: 2px;padding: 3px 7px;font-size: 9px;transition: all 0.3s;margin-top: 7px;}
.blue_btn2:hover {background:#348ae6; color:#fff;}

.blue_btn3 {border:1px solid #0066cc ;background:#0066cc ;color:#fff;/* border-radius: 2px; */border-radius: 2px;padding: 3px 7px;font-size: 9px;transition: all 0.3s;margin-top: 7px;}
.blue_btn3:hover {background:#348ae6; color:#fff;}

.red_btn {display:inline-block; padding: 3px 7px;  border-radius: 2px; background:#f36969; color:#ffffff; font-size:12px;transition: all 0.3s;}
.red_btn:hover {background: #eb6565; color:#fff;}

.green_btn {display:inline-block;  padding: 3px 7px;  border-radius: 2px; background:#6ac56f; color:#ffffff; font-size:12px;transition: all 0.3s;}
.green_btn:hover {background:#5faf63; color:#fff;}



.header_btn .btns {background:none; color:#000; font-weight: bold; letter-spacing: -0.3px;}
.header_btn .btns svg {color:#3999ff;}
.header_btn .btns:hover {background:none; color:#3999ff;}

/* color */

.red {color:#ff3939;}
.blue {color:#0066d3;}
.green {color:#16c21d;}


.container {min-width:1920px; height:100%; }

header {width:100%; height:45px; box-sizing: border-box; overflow: hidden;}
h1 {margin:10px; text-align: center;}
h1 a {width:70px; display: inline-block; margin-left: -10px;}
h1 a img {width:100%;}
header .btns_wrap {text-align: right;}
header .btns_wrap .btns { padding: 5px 7px; height:27px; vertical-align: bottom; }
header .btns_wrap .btns.blue { color:#0084ff; }


#menu {width:170px; height:100%; position:absolute;z-index: 2; transition: 0.3s; background:#fff;border-right:2px solid #eceff1; box-sizing: border-box; }
.menu_section {width:100%;}
.menu_section ul {width:100%;}
.menu_section ul li a {display: block; line-height:40px; text-align: left; box-sizing: border-box;
                        color:#616161; transition: 0.1s; font-weight: bold; font-size:13px;}
.menu_section ul li a::before {content: ''; display:inline-block; width:2px; height:2px; background:#fff; margin:0 10px 0 0;}
.menu_section ul li a:hover {color:#0084ff;}
.menu_on {background:#f1f7fb; color:#0084ff;}
.menu_section ul li a.menu_on {color:#0084ff;}
.menu_section ul li a.menu_on::before {content:''; display: inline-block; vertical-align: middle; width:2px; height:30px; background:#1c7fcf;}

#contentsR {width: calc(100% - 1px); height:98%; background:#eaf0f5; padding:10px 10px 10px 10px; box-sizing: border-box;}
.contents_section {height:820px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px;box-shadow: 0px 6px 6px 4px #00000012;display: flex;justify-content: left;align-items: flex-start; gap: 50px;}
.contents_section1 {height:814px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px; width:100%;}
.contents_section50 {height:814px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px; width:50%;}
.contents_section80 {height:814px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px; width:80%;}



/* thead other color */

.a_red {background:#ff3939; color:#fff;}
.thead_red {background:#ffc6c6; color:#000;}
.thead_orange {background:#ffd28f; color:#000;}
.thead_green {background:#d4eded; color:#000;}
.thead_green2 {background:#dfedd4; color:#000;}
.thead_skyblue {background:#dfecfa; color:#000;}

.sub_thead {background:#f2f8ff; color:#fff;}
.n_wrap {overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;width: 25%;}
.n_wrap40 {overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;width: 40%;}
.n_wrap30 {overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;width: 30%;}
.n_wrap2 {overflow: hidden;box-sizing: border-box;}
.n_wrap3 {overflow: hidden;box-sizing: border-box; height: 500px; margin-top:30px}
.section_title > div {font-weight:bold; color:#000;font-size:13px;line-height:33px;}
.section_title svg {margin-right:3px;color: #0084ff; font-size:21px;}
.section_title button {float:right; font-weight:bold;}
.select_box {width:100%; padding-bottom:10px;font-size:13px;}
.select_box select {width:150px; height:30px;}
.select_box .bluebox {float:right;border:1px solid #eee; padding: 0 0 0 10px;}
.select_box .bluebox span {display:inline-block; font-size: 15px;
                            background:#3999ff; color:#fff; 
                            text-align: right;
                            padding: 0px 10px;
                            margin-left:5px;
                            text-align: right;
                            
                            line-height: 30px;}

.graph_section {height: 226px;}

thead {border-bottom:2px solid #d6e2eb;}


.war {color:red;}
.status_green {display:inline-block; min-width:20px; padding:3px; height:20px; border-radius: 2px; background:#daffdc; color:#0f9616; text-align:center; }
.status_red {display:inline-block; min-width:20px; padding:3px; height:20px; border-radius: 2px; background:#ffd5d5; color:#ff1e1e; text-align: center;}

.n_table {width:100%; font-size:11.5px; text-align: center; border-collapse:collapse;}
.n_table thead {color:#fff;}
.n_table thead th {padding:8px 0;background:#646b70;}

.n_table1 {width:100%;font-size:11.5px;text-align: center;/* height: 190px; */}
.n_table1 thead {color:#fff;}
.n_table1 thead th {padding: 4px 0;background:#646b70;}

.n_table2 {width:100%; font-size:11.5px; text-align: center; border-collapse:collapse;}
.n_table2 thead {color:#fff;}
.n_table2 thead th {padding:8px 0;background:#646b70;}

.n_table tbody td {/*background:#fff */ }
.n_table tbody tr:hover td {background:#eaf0f5;}
.n_table td {padding:3px;}

.n_table2 tbody td {/*background:#fff */ }
.n_table2 tbody tr:hover td {background:#eaf0f5;}

 /* 바깥 테두리에만 border 추가 */
 /*
.n_table {border-collapse:collapse;}
.n_table thead th{
    border: 1px solid black;
}
.n_table tbody tr td {
    border: 1px solid black;
}
 상단과 좌측 테두리 숨기기 
.n_table tbody tr:first-child th {
    border-top: none;
}
.n_table tbody tr th:first-child {
    border-left: none;
}
 .n_table tr td:first-child {
    border-left: none;
}
 우측 테두리 숨기기 
.n_table tbody tr th:last-child {
    border-right: none;
}
.n_table tr td:last-child {
    border-right: none;
}
 하단 테두리 숨기기 
.n_table tbody tr:last-child td {
    border-bottom: none;
}
*/

table th {border:1px solid #c8c8c8;}
table td {border:1px solid #c8c8c8;}

.p_name {display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    background: #374957;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s;
}
.p_name:hover {background: #1e82d4;color: #fff;} 

.red_on {display: inline-block; padding:0 5px; border-radius: 3px; font-weight: bold;
        background:rgb(248, 42, 42); color:#fff; transition: all 0.3s;
}
.red_on:hover { background:rgb(216, 3, 3); color:#fff;}


.asd_box .section_title > div {opacity:0.5; transition: all 0.3s;}
.asd_box.show_table .section_title > div {opacity:1;}
.asd_box .n_table tbody tr td { transition: all 0.3s;}
.asd_box .n_table tbody {opacity:0; transition: all 0.3s; background:#fff;}
.asd_box .n_table thead {opacity:0.5; transition: all 0.3s;}
.asd_box.show_table .n_table tbody {opacity:1;}
.asd_box.show_table .n_table thead {opacity:1;}



/* scrolltable */

.tableBox{position: relative; top: 0px; left: 0px; width: 100%;border-bottom:1px solid #5e5e5e;border: 1px solid #5e5e5e;border-radius: 1px;}
.tableBox1{position: relative;top: 0px;left: 0px;width: 100%;overflow-y: scroll;border-bottom: 1px solid #5e5e5e;}
.scrolltable{width: 100%; border-collapse: collapse; text-align: center;}


/* */
.scrolltable thead tr th {position: sticky; top: -1;  }
.scrolltable thead tr th, .scrolltable tbody tr td {
    box-sizing: border-box; 
    word-break: break-all;
    border:1px solid #c8c8c8;
}
.scrolltable thead tr th {
    box-sizing: border-box; 
    word-break: break-all;
    /*
    border:1px solid #f4f5f5; 원본	 rgb(128, 128, 0)
    */
    border:0px solid;
}

.scrolltable thead tr.sub_thead th {position:sticky; top:33px;}

.noBordertable thead tr th, .noBordertable tbody tr td {
    box-sizing: border-box; 
    word-break: break-all;
    border:0px solid #f4f5f5;
}

/*
.scrolltable thead tr th {position: sticky; top: -0.1; background:#486381; color:#fff; }
.scrolltable thead tr th, .scrolltable tbody tr td {
    box-sizing: border-box; 
	border-bottom: 1px solid #dedede;
    border-right: 1px solid #ddd; 
    word-break: break-all;
}
*/




/* popup */

.subthead {background:#fff; color:#000;}
.popup2_graphbox {margin-top:10px; height:300px;}

.block_1 { width:95%; background:#2196F3; color:#fff; border-radius: 3px; padding:2px 0; margin: 0 auto;}
/* .block_1::before {content:''; position: absolute; left: -7px; top: 28px; display:inline-block; width:2px; height:610px; background:#0066d3;} */
.block_2 {width:95%; background:#1c7fcf; color:#fff; border-radius: 3px; padding:2px 0; margin: 0 auto;}
/* .block_2::before {content:''; position: absolute; left: -7px; top: 28px; display:inline-block; width:2px; height:610px; background:#0066d3;} */
.block_3 {width:95%; background:#16609c; color:#fff; border-radius: 3px; padding:2px 0; margin: 0 auto;}
/* .block_3::before {content:''; position: absolute; left: -7px; top: 28px; display:inline-block; width:2px; height:610px; background:#0066d3;} */

.tableBox.sch_table_wrap { width: 100%;}

/* 분기별 진행사항 그래프 */
.sch_table {}
.sch_table tr:hover td {background:#f2f5f7;}
.sch_table tr td {height:50px;}

.sch_table tr .ganttTd{vertical-align: top;}
.sch_table tr td .gantt {position:relative;margin-left: -2px;}
.sch_table tr .ganttTd .gantt div{/* position:; */border-radius: 2px;padding: 0px;width: 0px;height: 14px; margin-top: 4px;margin-bottom: 4px;top:0px;}
.sch_table tr td .gantt .b1 {background: #0076ff;color:#fff;z-index: 1; top: 0;margin-top:-10px;height:20px;}      /* 설계 */                                                                                               
.sch_table tr td .gantt .b2 {background: #05d813;color:#fff;z-index: 1; top: 0;margin-top:-9px;height:20px;} 		/* 구매 */   /*left:100px; width: 200px; margin-left: 50px;*/
.sch_table tr td .gantt .b3 {background: grey/*#797979*/;color:#fff;z-index: 1; top: 0;margin-top:-9px;height:20px;}    	/* 조립 */                                                                                                    
.sch_table tr td .gantt .b4 {background: #ef00ee/*#D24BFF*/;color:#fff;z-index: 1; top: 0;margin-top:-9px;height:20px;}       /* 출고 */                                                                                                
.sch_table tr td .gantt .b5 {background: #ff8638/*#E69C95*/;color:#fff;z-index: 1; top: 0; margin-top:-9px;height:20px;}      /* 셋업 */    
                                                                                   
.sch_table tr td .gantt .b11 {background: #0076ff;color:#fff;opacity: 0.5;z-index: 2;height:20px;}      /* 설계 계획 */                                                                                               
.sch_table tr td .gantt .b22 {background: #05d813;color:#fff;opacity: 0.5;z-index: 2;height:20px;} 		/* 구매 계획 */   /*left:100px; width: 200px; margin-left: 50px;*/
.sch_table tr td .gantt .b33 {background: grey/*#797979*/;color:#fff;opacity: 0.5;z-index: 2;height:20px;}    	/* 조립 계획 */                                                                                                    
.sch_table tr td .gantt .b44 {background: #ef00ee/*#D24BFF*/;color:#fff;opacity: 0.5;z-index: 2;height:20px;}       /* 출고 계획 */                                                                                                
.sch_table tr td .gantt .b55 {background: #ff8638/*#E69C95*/;color:#fff;opacity: 0.5;z-index: 2;height:20px;}      /* 셋업 계획 */                        

/* 종합현황 */
.sch_table tr td .gantt .p1 {background: #0076ff;color:#fff;}      /* 설계 */                                                                                               
.sch_table tr td .gantt .p2 {background: #05d813;color:#fff;} 		/* 구매 */   /*left:100px; width: 200px; margin-left: 50px;*/
.sch_table tr td .gantt .p3 {background: grey/*#797979*/;color:#fff;}    	/* 조립 */                                                                                                    
.sch_table tr td .gantt .p4 {background: #ef00ee/*#D24BFF*/;color:#fff;}       /* 출고 */                                                                                                
.sch_table tr td .gantt .p5 {background: #ff8638/*#E69C95*/;color:#fff;}      /* 셋업 */  
                                                                                  
/* 지연 */                                                                           
.sch_table tr td .gantt .r1 {background: #f36969;color:#fff;}                                                                                                     
.sch_table tr td .gantt .r2 {background: #f36969;color:#fff;}                                                                               
.sch_table tr td .gantt .r3 {background: #f36969;color:#fff;}                                                                                                       
.sch_table tr td .gantt .r4 {background: #f36969;color:#fff;}            
.sch_table tr td .gantt .b6 {background: #f36969;color:#fff;}/**menu css**/

.diamond {
  width:  8px !important;
  height: 8px;
  background-color: #ef00ee;
  transform: rotate(45deg);
  /*margin-top:-8px*/
}

.diamond2 {
  width:  8px !important;
  height: 8px;
  background-color: #ef00ee;
  transform: rotate(45deg);
  opacity: 0.5;
  /*margin-top:-8px*/
}

/* 
.sch_table tr td .gantt .b1 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -3px; margin-top: 53px;top: -109px;
.sch_table tr td .gantt .r1 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -2px; margin-top: 53px;top: -109px;
.sch_table tr td .gantt .b2 {position:;border-radius: 2px;padding: 2px;width: 200px;height: 0px; margin-top: 7px;top:0px; left:100px}   left: -2px; margin-top:  54px;top: -83px;
.sch_table tr td .gantt .r2 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -2px; margin-top:  52px;top: -83px;
.sch_table tr td .gantt .b3 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -2px; margin-top:  80px;top: -83px;
.sch_table tr td .gantt .r3 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -2px; margin-top:  80px;top: -83px;
.sch_table tr td .gantt .b4 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -2px; margin-top: 107px;top: -83px;
.sch_table tr td .gantt .r4 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -2px; margin-top: 109px;top: -83px;
.sch_table tr td .gantt .b5 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;}   left: -2px; margin-top: 134px;top: -83px;
*/

.accordion {
    background-color: #fff;
  }
  
  .accordion ul > li {
    overflow: hidden;
    max-height: 40px;
    transition: 0.3s;
    cursor: pointer;
  }
  .accordion ul > li.on {
    max-height: 600px;
    color:#ffffff !important;background:#3f98f7;
  }
  .accordion ul > li.on .title {color:#fff;background:#3f98f7;}
  .accordion ul > li.on .desc {color:#000;background:#fff;}
  .accordion ul > li .title {
    color:#041829;
    font-weight:bold;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
  }
  .accordion ul > li .title:hover {color:#ffffff;background:#3f98f7;}
  .accordion ul > li .desc {
    color:#2d3c49;
    padding: 0.5rem;
  }
  .accordion ul > li .desc:hover {color:#3f98f7;background:#eaf0f5;}

  .popup_title {font-size:14px; font-weight:bold; width:100%;padding:0px 0px 5px 0px; box-sizing: border-box;}
  .ct_box {margin-bottom:5px;overflow: hidden;}
  .input_block {float:left; padding: 1px !important;}
  .input_block .label {width:80px; height:30px; float:left; box-sizing: border-box; border:1px solid #eee; line-height:30px; text-align: center; background:#556b7f; color:#fff;}
  
  input[type="radio"] { height:15px; float:left;  box-sizing: border-box; border:1px solid #eee;}
  input[type="text"], select {width:calc( 100% - 80px ); height:30px; float:left;  box-sizing: border-box; border:1px solid #eee;}
  select option {height:30px;}

  td input {width:100%;}

  .delay_table {width:100%;}
  .delay_table tr td {border: 1px solid #eee; height:30px; padding:10px; box-sizing: border-box;}
  .delay_table tr td:first-child {background:#556b7f; width:40%; color:#fff;}


  .hidden {
    display: none;
}


.sch_table thead {
  position: sticky;
  top: 0;
  background-color: white; /* 필요에 따라 적절한 배경색 지정 */
  z-index: 1;
}

.n_table th,
.n_table td {
    border: 1px solid #d0d0d0;
}

/* 테이블 헤더의 아래쪽 테두리는 별도로 지정하지 않음 */
.n_table thead th {
    border-bottom: none;
}

/* 테이블 본문의 아래쪽 테두리만 지정 */
.n_table tbody th,
.n_table tbody td {
    border-bottom: 1px solid #d0d0d0;
}

/* 테이블 컨테이너에 스크롤을 적용 */
.table-container {
    width: 100%;
    overflow-x: auto;
}

/* 상태별 진행사항  */

/* 완료 */
.green-ball {display: inline-block;width: 10px;height: 10px;background-color: #5faf63;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
/* 지연완료 */
.yellow-ball {display: inline-block;width: 10px;height: 10px;background-color: #FFBB00;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
/* 진행중 */
.bule-ball {display: inline-block;width: 10px;height: 10px;background-color: #3999ff;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
/* 지연 */
.red-ball {display: inline-block;width: 10px;height: 10px;background-color: #f36969;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}

.black-ball {display: inline-block;width: 10px;height: 10px;background-color: black;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
.white-ball {display: inline-block;width: 10px;height: 10px;background-color: white;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center; border:1px solid}

/* 단계별 */

/* 설계 */
.blue-name {border: #3999ff;background: #3999ff/*#007fff*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
.blue_name:hover {background:#0076ff; color:#fff;}
/* 구매 */
/**/
.green-name {border:#05d813;background: #05d813/*#00cc0d*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
.green-name:hover {background:#05d813; color:#fff;}
/* 조립 */
.black-name {border: #828181;background: grey/*#797979*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
.black-name:hover {background: #828181;color:#fff;}
/* 출고 */
.purple-name {border: #ef00ee;background: #ef00ee/*#d24bff*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
.purple-name:hover {background: #ef00ee;color:#fff;}
/* 셋업 */
.red-name {border: #f36969;background: #f36969/*#e69c48*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
.red-name:hover {background: #ff8638; color:#fff;}
.yellow-name {border: #f2c201;background: #f2c201;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
.yellow-name:hover {background: #f2c201; color:#fff;}

.status-container {display: flex; justify-content: space-between; width: 100%; }
.status-item {display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 2px; height: 50px;}
.status-box {width: 70%; aspect-ratio: 4 / 1; border: none; /* 0px solid #0076ff; margin-bottom: 10px; */ font-size:18px; text-align:center; /* padding-top: 17px; */ }
.status-text {margin: 0; text-align: center; font-size: 13px;font-weight:bold;}
.highlight-text  {margin: 0; text-align: center; font-size: 26px;font-weight:bold;}
.highlight-textR {margin: 0; text-align: center; font-size: 26px;font-weight:bold;color: red;}
.highlight-textB {margin: 0; text-align: center; font-size: 26px;font-weight:bold;color: blue;}
.fRed{color: red;}
.fRedb{color: red;font-weight:bold;}

.colorful-div {
        display: inline-block;
        /*
        width: 25px;
        */
        height: 19px;
        margin-right: 2px;
        text-align: center;
        vertical-align: middle;
    }

.highlighted {
	background-color: #eaf0f5; /* 연녹색 */
}