/* 해양침적폐기물관리  - 2024.04 */
.cu-mdw .cu-map-container {position:relative; width:100%; height:650px; border:1px solid #e0e0e0; overflow:hidden;} 
.cu-mdw .cu-baMap .cu-map-wrapper {position:relative; width:100%; height:100%; background-color:#fff; overflow:hidden;}

.cu-mdw .cu-snb {position:absolute; top:20px; left:20px; z-index:2; transition:all 0.25s;}
.cu-mdw .cu-snb.cu-close {left:-210px;}
.cu-mdw .cu-snb .cu-btn-extended {position:absolute; top:10px; right:-40px; width:32px; height:32px; border-radius:5px; background:#fff url("/images/btn_icon_layer_reduce.png") 50% 50% no-repeat; box-shadow:0 0 10px 0 rgba(0,0,0,0.2); opacity:0.8; transition:all 0.25s; }
.cu-mdw .cu-snb .cu-btn-extended:hover {opacity:1;}
.cu-mdw .cu-snb.cu-close .cu-btn-extended {right:-80px; background-image:url("/images/btn_icon_layer_expand.png");}
.cu-mdw .cu-snb .cu-inner {position:relative; width:200px; border-radius:5px; box-shadow:0 0 10px 0 rgba(0,0,0,0.2); overflow:hidden; }
.cu-mdw .cu-snb .cu-title {display:flex; align-items:center; justify-content:center; position:relative; height:50px; font-size:18px; line-height:1.2; color:#fff; font-weight:700; background-color:#474C53;}
.cu-mdw .cu-snb > ul {position:relative; border-top:0;}
.cu-mdw .cu-snb .cu-depth1 {display:flex; align-items:center; justify-content:space-between; position:relative; height:42px; padding:0 15px 0 20px; background-color:#f7f9fb; font-size:15px; line-height:1.2; color:#333; font-weight:700;}
.cu-mdw .cu-snb .cu-depth1:hover {color:#007feb;}
.cu-mdw .cu-snb .cu-depth1.current {color:#007feb; background-color:#d7e3ef;}

.cu-mdw .cu-baMap .cu-result-layer {position:absolute; left:360px; right:20px; bottom:65px; padding:10px; background-color:#fff; box-shadow:0 0 10px 0 rgba(0,0,0,0.2); border-radius:5px; z-index:1; transition:all 0.2s;}
.cu-mdw .cu-baMap .cu-result-layer.cu-hide {padding:0;}
.cu-mdw .cu-baMap .cu-result-layer .cu-btn-close {position:absolute; top:-38px; right:0; width:32px; height:32px; margin-left:auto; border:0; border-radius:5px; background-color:#fff; opacity:0.8; transition:all 0.25s; box-shadow:0 0 10px 0 rgba(0,0,0,0.2);}
.cu-mdw .cu-baMap .cu-result-layer .cu-btn-close::before {content:""; position:absolute; top:50%; left:5px; width:24px; height:1px; background-color:#555; transform:rotate(45deg);}
.cu-mdw .cu-baMap .cu-result-layer .cu-btn-close::after {content:""; position:absolute; top:50%; left:5px; width:24px; height:1px; background-color:#555; transform:rotate(-45deg);}
.cu-mdw .cu-baMap .cu-result-layer .cu-btn-close:hover{opacity:1;}
.cu-mdw .cu-baMap .cu-result-layer .cu-btn-toggle {position:absolute; top:-38px; right:0px; width:32px; height:32px; margin-left:auto; border:0; border-radius:5px; background-color:#fff; opacity:0.8; transition:all 0.25s; box-shadow:0 0 10px 0 rgba(0,0,0,0.2);}
.cu-mdw .cu-baMap .cu-result-layer .cu-btn-toggle::before {content:""; position:absolute; top:5px; left:8px; width:16px; height:16px; border-top:1px solid #555; border-right:1px solid #555; transform:rotate(135deg);}
.cu-mdw .cu-baMap .cu-result-layer.cu-hide .cu-btn-toggle::before {top:13px; transform:rotate(-45deg);}
.cu-mdw .cu-baMap .cu-result-layer .cu-btn-toggle:hover {opacity:1;}
.cu-mdw .cu-baMap .table-list .cu-tbl-thead {position:relative;}
.cu-mdw .cu-baMap .table-list .cu-tbl-thead::after {content:""; position:absolute; top:0; right:0; width:18px; height:100%; border-bottom:1px solid #aeb1b9; background-color:#f9f9fa;}
.cu-mdw .cu-baMap .table-list .cu-tbl-thead .cu-inner {position:relative; width:100%; min-height:40px; overflow-y:scroll;}
.cu-mdw .cu-baMap .table-list .cu-tbl-tbody {position:relative; width:100%; max-height:165px; border-bottom:1px solid #e1e4e9; overflow-y:scroll;}
.cu-mdw .cu-baMap .cu-result-layer .search-form.expansion th, .cu-mdw .cu-baMap .cu-result-layer .search-form.expansion td { padding:4px;}

.cu-section {position:relative;}
.cu-section:not(:first-child) {margin-top:20px;}
.cu-section table {table-layout:fixed;}
.cu-mdw .cu-table-list-header {display:flex; align-items:center; margin-bottom:10px;}
.cu-mdw .cu-table-list-header .title-sub-h3 {margin:0;}
.cu-mdw .cu-table-list-header .count {margin:0;}
.cu-mdw .cu-table-list-header .cu-btns {margin-left:auto;}
.cu-mdw .table-list {position:relative; width:100%; overflow-x:auto;}
.cu-mdw .table-list table {table-layout:fixed;}
.cu-ta-l {text-align:left !important;}
.cu-ta-c {text-align:center !important;}
.cu-ta-r {text-align:right !important;}
.cu-form-inner {display:flex; align-items:center;}
.cu-form-inner label {flex:1;}
.cu-form-inner span {margin-left:10px;}
.cu-btns {display:flex; align-items:center; justify-content:flex-end; position:relative;}
.cu-btns .btn {margin-left:4px;}
.cu-section + .cu-btns {margin-top:10px;}
.cu-mdw .search-form.expansion {margin-bottom:10px;}
.cu-mdw .modalBtn {cursor:pointer;}

.cu-mdw select {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    height: 35px;
    padding: 6px 25px 6px 6px;
    font-size: 15px;
    border: 1px solid #ddd;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: middle;
    background: #fff url(/images/portal/ico/select_arrow.png) no-repeat calc(100% - 8px) center;
}

.layerPop .layer-contents {max-height:700px;}
.layerPop .layer-contents .cu-section:not(:first-child) {margin-top:10px;}
.layerPop .layer-contents .cu-input-location {position:relative; border:1px solid #ddd; padding:6px;}
.layerPop .layer-contents .cu-input-location .cu-row {position:relative;}
.layerPop .layer-contents .cu-input-location .cu-row:not(:first-child) {margin-top:6px;}
/* 해양침적폐기물관리 지도크기 */
.layerPop .layer-contents .cu-input-location .cu-map-wrapper {position:relative; min-height:300px; border:1px solid #e0e0e0; overflow:hidden;}
/* 해양이용영향평가 지도크기 */
.layerPop .layer-contents .cu-input-location .cu-map-wrapper2 {position:relative; min-height:400px; border:1px solid #e0e0e0; overflow:hidden;}
.layerPop .layer-contents .cu-input-location textarea {width:100%; height:100px; border:1px solid #ddd;}

.mdw-info {background-color:#fff;border:1px solid #e8e8e8; width:100%; height:100%; z-index:5; position:absolute; display:none;}

.nav-wrap.cu-mdw .tab-menu {
	margin-bottom:0;
}
.nav-wrap.cu-mdw .tab-menu button {
	width:100%; color:#fff; border:0; margin:0; background-color:#387ee7;
}
.nav-wrap.cu-mdw .tab-menu button .ico {
	width: 20px; height: 20px; margin: 0px 5px 0 0; background:url(/images/map/layers-white-18dp.svg) 50% 50% no-repeat; vertical-align:middle;
}
.nav-wrap.cu-mdw .tab-content > section {
	display:block;
}
.cu-mdw .GridMain1 .GridMain2 .GMMainTable {
	border-left:0 !important; border-right:0 !important;
}

/* Tab */
.cu-mdw .tab-menu {width: 100%;margin-bottom: 20px;display: flex; flex-wrap: wrap;}
.cu-mdw .tab-menu::after{display:block;clear:both;content:'';}
.cu-mdw .tab-menu button {margin: -1px 0 0 -1px;overflow: visible;float: left;position: relative;padding: 13px;text-align: center;border: 1px solid #d9d9d9; font-size:15px;}
.cu-mdw .tab-menu button.line2 {padding-top: 24px;padding-bottom: 23px;}
.cu-mdw .tab-menu button:first-child {border-left: 1px solid #d9d9d9;}
.cu-mdw .tab-menu button.current {color: #fff;border-color: #3d89ca;  background-color: #3d89ca;font-weight:600;}
.cu-mdw .tab-menu button:focus,
.cu-mdw .tab-menu button:hover,
.cu-mdw .tab-menu button:active{color: #fff;border-color: #61a3db;  background-color: #61a3db;}

.cu-mdw .tab-menu.type2{border-bottom: 1px solid #115187;}
.cu-mdw .tab-menu.type2 button {width: auto !important; height: 38px; margin-right: 3px; padding: 0px 30px; color: #999; font-weight: 700; border: 1px solid #ebebeb; border-bottom-color: #dce3ec; background: #ebebeb;}
.cu-mdw .tab-menu.type2 button:focus,
.cu-mdw .tab-menu.type2 button:hover,
.cu-mdw .tab-menu.type2 button:active,
.cu-mdw .tab-menu.type2 button.current {padding-bottom: 3px; color: #fff; border-color: #115187; border-bottom: 0px; background-color: #115187;} 

.cu-mdw .tab-menu.type3 button{background: #f5f5f5;}
.cu-mdw .tab-menu.type3 button:focus,
.cu-mdw .tab-menu.type3 button:hover,
.cu-mdw .tab-menu.type3 button:active,
.cu-mdw .tab-menu.type3 button.current {background: #70ade1;border-color: #70ade1;}

.cu-mdw .tab-menu.type-search {position: relative;z-index: 2;/* margin-bottom: 0px; */border-bottom: 1px solid #115187;}
.cu-mdw .tab-menu.type-search button {width: auto;height: 38px;margin-right: 3px;padding: 0px 30px;color: #999;font-weight: 700;border: 1px solid #ebebeb;border-bottom-color: #dce3ec;background: #ebebeb;}
.cu-mdw .tab-menu.type-search button:focus,
.cu-mdw .tab-menu.type-search button:hover,
.cu-mdw .tab-menu.type-search button:active,
.cu-mdw .tab-menu.type-search button.current {padding-bottom: 3px;color: #fff;border-color: #115187;border-bottom: 0px;background-color: #115187;}
.cu-mdw .tab-menu.type-search + .tab-content {position: relative;z-index: 1;margin-top: -1px;}
.cu-mdw .tab-menu.type-menu {margin: 0px;}
.cu-mdw .tab-menu.type-menu button {padding: 10px;color: #333;font-size: 18px;background: #f8f8f9;border: 1px solid #f8f8f9;border-top: 2px solid #3e4045;border-bottom: 1px solid #d4dae3;}
.cu-mdw .tab-menu.type-menu button.current {padding-bottom: 11px;color: #333;font-size: 18px;background: #fff;border-left: 1px solid #d4dae3;border-right: 1px solid #d4dae3; border-top: 2px solid #3d89ca;border-bottom: 0px;}
.cu-mdw .tab-menu.type-menu + .tab-content {padding: 70px;border: 1px solid #d4dae3;border-top: 0px;}

.cu-mdw .tab-menu[class^="ea"] button {padding: 0px;}
.cu-mdw .tab-menu.ea1 button {width: 100%;}
.cu-mdw .tab-menu.ea2 button {width: 50%;}
.cu-mdw .tab-menu.ea3 button {width: 33.3%;}
.cu-mdw .tab-menu.ea3 button:first-child {width: 33.4%;}
.cu-mdw .tab-menu.ea4 button {width: 25%;}
.cu-mdw .tab-menu.ea5 button {width: 20%;}
.cu-mdw .tab-menu.ea6 button {width: 16.6%;}
.cu-mdw .tab-menu.ea6 button:first-child {width: 17%;}
.cu-mdw .tab-menu.ea7 button {width: 14.2%;}
.cu-mdw .tab-menu.ea7 button:first-child {width: 14.8%;}
.cu-mdw .tab-menu.ea8 button {width: 12.5%;}
.cu-mdw .tab-menu.ea9 button {width: 11.11111111%;}
.cu-mdw .tab-menu.ea9 button.text-small{font-size:12px}

.cu-mdw .tab-content > section,
.cu-mdw .tab-content > div {display: none;}

/* tab */
@media (max-width: 1100px) {      
.cu-mdw .tab-menu.type-search{z-index:1;}
}
@media (max-width: 992px) {	 
.cu-mdw .tab-menu.ea9 button{border:1px solid #dce3ec;border-top:0;width: 33.3%;float: left;height: 50px;padding: 0;}
}
@media (max-width: 800px) { 
.cu-mdw .tab-menu button{border:1px solid #dce3ec;width: 50% !important;float: left;height: 50px;padding: 0;}
.cu-mdw .tab-menu.type2 button{width: 50% !important;border: 1px solid #ccc; margin: -1px 0 0 -1px;}
.cu-mdw .tab-menu.type-search button{border: 1px solid #ccc; margin: -1px 0 0 -1px;}
}
 @media (max-width: 530px) {
.cu-mdw .tab-menu{margin-bottom:15px;}
.cu-mdw .tab-menu button{width: 50% !important;border:1px solid #ccc;margin-right: 0px !important;}
}
@media (max-width: 430px) {
.cu-mdw .tab-menu button{width: 100% !important;} 	
.cu-mdw .tab-menu.type2 button{width: 100% !important;} 
}

.cu-mdw nav.tab-menu.type2.ea3 button{
    margin:0 3px 0 0 !important;
}


.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
  user-select: none;
}
.ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}
.ol-tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}
.ol-tooltip-measure:before,
.ol-tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.ol-tooltip-static:before {
  border-top-color: #ffcc33;
}

#ui-datepicker-div {
	z-index: 9999 !important;
}

.table-list tbody td {
    padding: 4px 5px;
    text-align: center;
    border-left: 1px solid #e1e4e9;
    border-bottom: 1px solid #e1e4e9;
    font-size: 13px;
}

.search-form.expansion {
    margin-top: 0px; 
    border: 1px solid #e6e6e6;
    border-bottom: 0px;
}

.search-form.expansion th, .search-form.expansion td {
    font-size: 13px;
    padding: 5px;
    color: #333;
}

.search-form.expansion td {
	text-align: left;
}

.search-form.expansion td select {
    min-width: 130px;
}

input[class *= "datepicker"] {
    /* height: 33px !important; */
    height: 35px !important;
}

.ui-dialog .cu-btns {
	margin-top:10px;
}

.brdl-none {border-left:none !important; }
.brdr-none {border-right:none !important;}

.clicked {background: #C8EBFA;}

/* 해양침적폐기물 지도 CSS 수정 HM */
.td_object { display: flex; align-items: center; justify-content: space-around; }
.td_object .text { flex: 1; text-align: left; padding: 0 4px;}
header .mapBtns { gap: 6px; }
header .mapBtns button { border-radius: 4px; }
header .mapBtns button.active { background: #00C394; }
.nav-wrap .layerSection .listSection li label { vertical-align: baseline; }
.nav-wrap .layerSection .listSection li input[type="checkbox"] {vertical-align: top; margin-top: 0;}
.nav-wrap .layerSection .listSection ul > li.closed { background-position: 97% 14px; } 
.nav-wrap .layerSection .listSection ul > li.opened { background-position: 97% 14px; }
.nav-wrap .layerSection .listSection h4, 
.nav-wrap .layerSection .listSection ul > li.opened > a, 
/* .nav-wrap .layerSection .listSection li.closed > a { font-family: 'Nanum Square R'; } */
.nav-wrap .layerSection .listSection .depth1.opened .depth2 a  { background-image: none; font-size: 14px; display: flex; align-items: center; }
.nav-wrap .layerSection .listSection ul > li > a { font-size: 16px;}
.nav-wrap .layerSection .listSection > ul > li:last-child { border-bottom: 1px solid #ddd; }
.search-form.expansion { box-shadow: 0 0 15px rgba(0,0,0,0.08); }
.search-form.expansion th,
.search-form.expansion td { border-left: 0; border-right: 0; }
.search-form.expansion td { text-align: left!important; }
.search-form.expansion td select { border-radius: 3px; }
.search-form .inputGroup .inputGroup-btn .btn-point,
.search-form .inputGroup .btn-point { padding: 6px 10px; }
.search-form .inputGroup .inputGroup-txt { border-radius: 0; }
 .btns-between > div { display: flex; max-width: 100%; align-items: center; padding: 2px 5px; }
 .btns-between .btns-l { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; margin-right: 10px; padding-right: 10px; }
 .btns-between .btns-l:after { display: block; clear: both; content: ""; width: 1px; height: 24px; background: #ddd; position: absolute; top: 0; right: 0; }
 .btns-between .btns-lower { text-align: left; }
 .ico { background-image: url(/images/oceansafety/sprite.png); }
 .ico-backward { width: 15px; height: 15px; background-position: -24px -145px; }
 .ico-forward { width: 15px; height: 15px; background-position: -45px -145px; }
 .ico-delete { width: 15px; height: 15px; background-position: -64px -145px; }
.input-flex { display: flex; align-center;}
.input-flex .flex-label { flex: 1; margin-right: 6px; }
.input-flex .flex-label:last-of-type { margin-right: 0; }
.map-content input[type="text"] { height: 35px; border-radius: 3px; }
.mdw-info table td label,
.layerPop.ui-dialog.lg .table-view.search-form td label { width: 100%; }
.mdw-info table td input[type="text"],
.layerPop.ui-dialog.lg .table-view.search-form td input[type="text"],
.layerPop.ui-dialog.lg .table-view.search-form td select { width: 100%; border-radius: 3px; height: 35px; }
.layerPop.ui-dialog.lg .table-view.search-form td input[type="text"] { padding-left: 6px; }
.layerPop.ui-dialog.lg .table-view.search-form .inputGroup input[type="text"] { border-radius: 3px 0 0 3px; }
input[type="checkbox"], input[type="radio"]{margin-right: 4px;}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus { outline: 1px solid #aaa; outline-offset: -1px; box-shadow: 0 0 10px -6px rgb(12, 109, 179, 0.75); border-color: #ccc !important; }
.cu-form-inner label { display: flex; align-items: center; }
.cu-form-inner label input[type="text"] { flex: 1; }
.search-form .btn { padding: 8px 10px; }
.table-view tr td:last-child, .table-view tr th:last-child { border-right: 0; }
.border-all.table-view tbody th,
.border-all.table-view tbody td { border: 1px solid #ddd; }
.cu-form-inner span { word-break: keep-all; }
.marks { display: inline-block; vertical-align: text-top; width: 10px; height: 10px; border-radius: 3px; background: #ccc; margin: 3px 0 0 6px; }
.marks.point-red { width: 10px; height: 10px;  border-radius: 50%; background: #F23A29; }
.cu-mdw .cu-baMap .cu-result-layer { height: 350px; }
.cu-mdw .cu-baMap .cu-result-layer.cu-hide { height: 0; }
.cu-form-inner.flex-start label { flex: none; width: auto!important; margin-right: 10px; }
.cu-form-inner.flex-start label:last-of-type { margin-right: 0; }
.justify-center { justify-content:center!important; }
.ui-resizable-handle {display: none !important;}

/* 해양방사능 감시체계 지도 */
.osft-layer-a{ font-size: 16px; line-height: 0;  display: flex !important; align-items: center;}
/* 2024-10-29 수정 */
.cu-mdw .tab-menu { margin-bottom: 10px;}
/* 2024-11-06 탭 Close 버튼 추가 */
.cu-mdw nav.tab-menu.type2.ea3 button .closeBtn {display:  block;width: 12px;height: 12px;position:  absolute; top: 6px; right: 5px;}
.cu-mdw nav.tab-menu.type2.ea3 button .closeBtn:before,
.cu-mdw nav.tab-menu.type2.ea3 button .closeBtn:after { display: block; clear: both; content:""; width: 2px; height: 12px; background: #ccc; position: absolute; top: 0; right: 5px;}
.cu-mdw nav.tab-menu.type2.ea3 button .closeBtn:before { transform: rotate(45deg); }
.cu-mdw nav.tab-menu.type2.ea3 button .closeBtn:after { transform: rotate(-45deg); }

/* 2024-11-07 PlaceHoler 스타일 */
input::-moz-placeholder, textarea::-moz-placeholder { color: #94D8F6; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #94D8F6; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #94D8F6; }
/* 2024-11-07 ui-autocomplete 수정 */
.of-visible { overflow: visible!important; } 
.ui-autocomplete-wrap { position: relative; }
.ui-autocomplete-wrap .ui-autocomplete { top: 45px; } 
.ui-autocomplete { position: absolute; cursor: default; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); max-height: 300px; overflow-y: auto; padding: 0; z-index: 1000; min-width: 160px; width: auto; }
/* 2024-11-08 업체명 검색 테이블 수정 */
.search-result { height: 275px; overflow-y: scroll; padding-bottom :20px;}
#ent_section { transform: translate(0); max-width: 290px; }
#ent_section p { text-align: left; }
.search-form .inputGroup{position: relative;}
		           	
.space-between { justify-content: space-between; }


.inputGroup { position: relative; }
.inputGroup .text-clear { border: 1px solid transparent; background-color: transparent; vertical-align: middle; outline: 0; cursor: pointer; position: absolute; z-index: 1; right: 40px; top: 35%; bottom: 0; transform: translateY(-50%); }
.inputGroup .text-clear:after { content: "\271A"; display: block; width: 15px; height: 15px; margin: auto; padding: 5px; text-align: center; color: #aaa; font-weight: normal; font-size: 14px; cursor: pointer; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 50%; line-height: 16px; -webkit-transition: 300ms all; }
.inputGroup .text-clear:hover:after { color: tomato; -webkit-transition: 300ms all; }
.inputGroup .search-box:not(:valid) ~ .text-clear { display: none; }

/* 2025-11-27 폐타이어 방충제 정보 범례 스타일 */
.legend-wrap {
    text-align: center;
    margin: 10px auto;
    border: none;
    position: absolute;
	top: 58px;
	left: 265px;
	width: 100%;
	max-width: 309px;
}

.legend-wrap h4{
	font-size:13px;
}

.legend-card {
    background: #ffffff;
    padding: 5px 5px;
    border-radius: 14px;
    border: 1px solid rgba(220,220,220,0.6); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
}

.legend-title {
    font-size: 15px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #dddddd;
    color: #333;
    letter-spacing: 0.5px;
}

.legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block !important;
}

.legend-list li {
    display: block !important;
    width: 100% !important;
    font-size: 12px;
    text-align: left;
    margin:3px;
}

.legend-color {
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}