@charset "utf-8";

.widget-board-list-title,
.widget-board-list-inner {
    display: table;
    table-layout: fixed;
    overflow: hidden;
    width: 100%;
}

.widget-board-list > li:nth-child(even) {
    background-color: #f8f8f9 !important;
}

.widget-board-list-title,
.widget-board-list {
    margin: 0px 10px;
}

.widget-txt-14 {
    border-right: 1px solid #e0e0e0;
}

.widget-board-list-title {
    border-top: 1px solid #000;
    border-bottom: 1px solid #e0e0e0;
}

.widget-board-list-title > li {
    display: table-cell;
    height: 20px;
    padding: 10px 7px;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #7F7F7F;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
}

.widget-board-list-inner > li {
    display: table-cell;
    box-sizing: border-box;
    text-align: center;
    border-right: 1px solid #e0e0e0;
}

.widget-board-list-inner > li.last-cell {
    border-right: none;
}

.widget-board-list-inner > li,
.widget-board-list-inner > li span {
    font-size: 15px;
    font-weight: normal;
}

.widget-board-list > li {
    box-sizing: border-box;
    border-bottom: 1px solid #e0e0e0;
}

.widget-count {
    padding-left: 8px;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    display: inline;
}

.widget-board-list > li span {
    vertical-align: middle;
}

.widget-red-txt {
    color: red !important;
}

#widget-grid {
    display : grid;
    min-height : 10vh;
    min-width : 25vw;
    grid-template-columns : 25% 25% 25% 25%;
    grid-template-rows : 39px repeat(8, 10%);
    height: 100%;
    margin: 10px;
    font-size: 15px;
}

#widget-grid div {
    text-align: center;
    vertical-align: middle;
    border-right:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
}

#widget-grid .last-cell {
    border-right : none !important;
}

#widget-grid .widget-grid-header {
    color: #ffffff;
    background-color: #7F7F7F;
    border-top: 1px solid #000;
    border-bottom: 1px solid #e0e0e0;
    line-height: 39px;
}

#widget-grid .background-gray-cell {
    background-color: #f8f8f9 !important;
}

#widget-grid .rowspan-cell {
    grid-row : span 2;
    line-height: 6vh;
}

.widget-detail-btn {
    color: #fff;
    background-color: #102454;
}


/* 230727 수정 */
.widget {
    height:100%;
    overflow:hidden;
    border-radius: 5px;    
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.widget .header {
    display:flex; 
    align-items:center;
    justify-content:center;
    height:40px;
    background-color: #EAEAEA;
}
.widget .header .title {
    font-size:16px;
    font-weight:var(--fwBold); 
    color: #555;
    line-height:1;
    text-transform: uppercase;
}
.widget .header .btn-close{
    position:absolute;
    top: 50%;
    transform:translateY(-50%);
    right: 20px;
    overflow: hidden;
    display:flex;
    align-items: center;
    justify-content: center;
    text-indent:-999px;
    width:16px;
    height:16px;
    background:url('/images/portal/common/ico_close.png') center center no-repeat;
    border:0;
}
.widget .content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
    padding: 20px 25px;
}
.widget .graph{
    height: 100%;
}
.widget .graph + .table-wrap{
    margin-top:15px;
}
.widget .plan-wrap{
    display:flex; 
    flex-wrap:wrap; 
    gap:20px; 
    height: calc(100% - 40px);
    padding:20px;
}
.widget .plan-wrap .box{
    display:flex; 
    min-width:calc((100% - 20px) / 2); 
    width:calc((100% - 20px) / 2); 
    padding:16px 23px; 
    border-radius:5px; 
    border:1px solid #E5E5E5; 
    box-shadow: 2px 4px 10px rgba(0,0,0,.1);
}
.widget .plan-title{
    display:flex;
    flex-direction:column;
    justify-content: center;
    min-width: 35%;
    text-align:center; 
    padding: 15px 23px 15px 0;
    font-size:20px; 
    font-weight:var(--fwMedium); 
    color:#000;
    line-height:1;
    gap:20px;
}
.widget .plan-title span{
    font-size:24px; 
    font-weight:var(--fwExtraBold); 
}
.widget .plan-wrap .text-list{
    display:flex;
    flex-direction:column;
    padding-left:23px;
    border-left:1px solid #ddd;
}
.widget .plan-wrap .text-list a{
    font-size: 12px;
    color: #183150;
    line-height:1;
}
.widget .plan-wrap .text-list a:not(:last-child){
    margin-bottom:10px;
}

/* 230731 JJE 추가 */
.graph-wrap{display:flex; gap:0 20px;}
.graph-wrap + .graph-wrap{margin-top:80px;}
.graph-wrap .item:nth-child(1){width:65%;}
.graph-wrap .item:nth-child(1) .graph{overflow:auto; display:flex; flex-direction:column; gap:32px 0; padding:32px 26px 0;}
.graph-wrap .item:nth-child(1) .graph > *{height:374px;}
.graph-wrap .item:nth-child(2){overflow:hidden;flex:1;}
.graph-wrap .item:nth-child(2) .title + *{width:100%; height:auto; margin-top:74px; text-align:center;}
.graph-wrap .item .table-scroll{margin-top:40px;}
.graph-wrap .item .title{display:flex; padding-bottom:10px; font-size:20px; font-weight:var(--fwBold); color:#000; border-bottom:1px solid #ddd; line-height:1;}
.graph-wrap .table-scroll{overflow:auto;}

.widgetli .widget-body-wrap .graph{
    height: 100%;
}
/* 
.widgetli .widget-body-wrap .graph + .table-wrap{
    margin-top:15px;
}
 */
.widgetli .plan-wrap{
    display:flex; 
    flex-wrap:wrap; 
    gap:11px; 
    height: calc(100% - 50px);
}
.widgetli .plan-wrap .box{
    display:flex; 
    width:calc((100% - 20px) / 2); 
    padding:1px 15px; 
    border-radius:5px; 
    border:1px solid #E5E5E5; 
    box-shadow: 2px 4px 10px rgba(0,0,0,.1);
}
.widgetli .plan-title{
    display:flex;
    flex-direction:column;
    justify-content: center;
    min-width: 35%;
    text-align:center; 
    padding: 15px 23px 15px 0;
    font-size:20px; 
    font-weight:var(--fwMedium); 
    color:#000;
    line-height:1;
    /* gap:20px; */
}
.widgetli .plan-title span{
    font-size:24px; 
    font-weight:var(--fwExtraBold); 
}
.widgetli .plan-wrap .text-list{
    display:flex;
    flex-direction:column;
    padding-left:23px;
    border-left:1px solid #ddd;
    justify-content:center;
}
.widgetli .plan-wrap .text-list a{
    font-size: 12px;
    color: #183150;
    line-height:1;
}
.widgetli .plan-wrap .text-list a:not(:last-child){
    margin-bottom:5px;
}