@charset "UTF-8";



/* body {
    font-family: 'Malgun Gothic', sans-serif;
    margin: 20px;
    background-color: #f5f5f5;
} */

/* .chart-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #2196F3;
}

.date-header {
    font-size: 12px;
    font-weight: bold;
    fill: white;
}

.time-label {
    font-size: 10px;
    fill: white;
}

.berth-label {
    font-size: 13px;
    font-weight: bold;
}

.berth-size {
    font-size: 11px;
    fill: #666;
}

.ship-block {
    stroke: #ddd;
    stroke-width: 1;
    cursor: pointer;
}

.ship-name {
    font-size: 11px;
    font-weight: bold;
    fill: #333;
}

.company-name {
    font-size: 10px;
    fill: #2196F3;
}

.ship-date {
    font-size: 9px;
    fill: #666;
}

.ship-length {
    font-size: 10px;
    font-weight: bold;
    fill: white;
    background: #2196F3;
}

.length-badge {
    fill: #2196F3;
    rx: 10;
}

.grid-line {
    stroke: #e0e0e0;
    stroke-width: 1;
    stroke-dasharray: 2,2;
}

.grid-line-bold {
    stroke: #bdbdbd;
    stroke-width: 1;
} */


.scr {
    position: relative; /* chartDiv 위치의 기준점 */
    /* overflow-x: auto !important; */ /* 가로 스크롤 허용 */
}
	
.*선석 배정 대상 목록 *
.sp{
	width: 100%;
	height: 100%;
	margin-bottom: 20px;
}

.sp .data-list{
	width: 55%;
	display: inline-block;
	float: left;
}

.sp .data-list table tr thead th{
	font-size: .9em;
}

.sp .ass-tb{
	width: 43%;
	height:100%;
	min-height:500px;
	display: inline-block;
	float: left;
	margin: 0 0 0 2%;
}



.berth-pop{
	display: none;
	width: 300px;
	border:1px solid #ddd;
	background: #fff;
	position: absolute;
	margin-left: 10px;
	padding: 0px;
	box-shadow: 4px 4px 6px rgba(0, 0, 0, .2);
	border-radius: .2em;
}








.berth-title{
	width: 100%;
	text-align: center;
	text-align: left;
	padding: 7px;
	color: #fff;
	background: #004ba8;
	font-size: 17px; font-weight: bold;
	box-sizing:border-box;
}

.berth-title::before{
	content: "\f0ce";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 1em;
    margin: 0 10px 0 5px;
}

.berth-pop table{
	width: calc(100% - 20px); margin: 10px auto 10px;
	border:1px solid #ddd; border-top:2px solid #004ba8;
}

.berth-pop table tr th,
.berth-pop table tr td{
	font-size: .95em;
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
	letter-spacing: .005em;
	line-height: 0.9em;
	text-align: center;
	color: #555;
}
.berth-pop table tr th{
	background:#f1f6fb;
	border-right: 1px solid #ddd;
	color: #333;
}
.berth-pop table tr td { text-align: left; padding: 0 0 0 10px; }

.now{
	background: #d8edfc;
	border:2px solid #38a3ec;
	border-radius: 10px;
    box-shadow: 1px 2px 10px rgb(0 0 0 / 10%);
    min-width:50px;
    overflow:hidden;
    min-height:105px;
	height:100%; 
	box-sizing:border-box; 
	padding:0; 
	margin:0
}

.now-control{
	background: #ece1ff;
	border:2px solid #b188ff;
	border-radius: 10px;
    box-shadow: 1px 2px 10px rgb(0 0 0 / 10%);
    min-width:50px;
    overflow:hidden;
    min-height:105px;
	height:100%; 
	box-sizing:border-box; 
	padding:0; 
	margin:0
}

.past{
	background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 1px 2px 10px rgb(0 0 0 / 10%);
    padding: 5px;
    min-width:125px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height:105px;
    display:inline-block; 
	height:100%; 
	box-sizing:border-box; 
	padding:0; 
	margin:0;
}

.past-control{
	background: #ffe1e7;
	border:2px solid #ff849f;
	border-radius: 10px;
    box-shadow: 1px 2px 10px rgb(0 0 0 / 10%);
    padding: 5px;
    min-width:50px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height:105px;
    display:inline-block; 
	height:100%; 
	box-sizing:border-box; 
	padding:0; 
	margin:0
}

.fut{
	background: #fff6de;
	border:2px solid #ffcf58;
	border-radius: 10px;
    box-shadow: 1px 2px 10px rgb(0 0 0 / 10%);
    min-width:50px;
    overflow:hidden;
    min-height:105px;
	height:100%; 
	box-sizing:border-box; 
	padding:0; 
	margin:0
}

.berth-info-tt{
	font-size: .95em;
	color: #000;
	text-align: center;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

.past_box { display:flex; flex-direction:column; justify-content: start; height:100%; cursor:pointer}
.past_box > div{ align-items:center; padding:5px; box-sizing:border-box}
.past_box_top{display:flex; justify-content:space-between; background:#eeeeee; width:100%; flex-shrink:0; height:30px}
.past_box_top > span{width:33.33%;display:inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:center; color:#44b1e5; height:100%}
.past_box_top > span:first-child{ text-align:left;}
.past_box_top > span:last-child{ text-align:right;}
.past_box_top > span.length > span{display:inline-block;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%;  max-width:50px; background:#44b1e5; color:#ffffff; border-radius:20px; border:1px solid #44b1e5; padding:0; font-size:12px; line-height:19px}
.fut .past_box_top > span{color:#e5ad24}
.fut .past_box_top > span.length > span{background:#e5ad24; border-color:#e5ad24}
.fut .past_box_cts p.company{ color:#cc7800}

.past_box_cts{display:flex; text-align:center; flex-direction:column; justify-content: center; flex-grow:1}
.past_box_cts p{display:block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding:2px 0; margin:0; text-align:center; line-height:15px}
.past_box_cts > span{display:inline-block;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%;  max-width:50px; background:#44b1e5; color:#ffffff; border-radius:20px; border:1px solid #44b1e5; padding:0; font-size:12px; line-height:19px}
.past_box_btm{width:100%; flex-shrink:0; height:30px; padding:5px;}
.past_box_btm .rd_box{ border:1px solid #ddf0f5; background:#effcff; display:flex; justify-content:space-between; padding:0px 10px; border-radius:20px; color:#777; font-size:13px}
.past_box_btm span{width:50%;display:inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:left;}
.past_box_btm span:last-child{ text-align:right}
.past_box_cts p.company{ color:#2859cf;}
.past.type1{background:#ffffff;}
.past.type2{background:#c8edff;}
.past.type3{background:#4979e0; color:#fff;}
.past.type4{background:#e63936; color:#fff;}
.past.type3 .company{color:#aff2f6;}
.past.type4 .company{ color:#ffcaca}

.berth-pop button.close{position:absolute; right:10px; top:10px;width:22px; height:22px; border-radius:5px; padding:0; border-radius:5px; overflow:hidden}
.berth-pop button.close::before { content:""; background: url('../../images/abs/icon/contNavClose.png') no-repeat center #ffffff;
  background-size: 13px; position: absolute; width: 22px; height: 22px;  top: 0px; left: 0px;}

.berth-pop button.modify{position:absolute; right:40px; top:11px; height:22px; font-size: 13px; font-weight: bold; padding: 0 7px; line-height: 22px; }

.chartbg .chart_fix{min-height:auto;}
.chartbg .chart_fix .past_box_top{ height:22px; padding:2px 5px !important;}
.chartbg .chart_fix .past_box_top> span.length > span{font-size:12px; line-height:15px}
.chartbg .chart_fix .past_box > div{  padding:0 5px; font-size:12px}
.chartbg .chart_fix .past_box_cts p{ padding:0}