html,
body {
  	height: 100%;
  	font-size : 14px;
}



.kagos-input-component-rows{
	display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


.kagos-input-component-label{
	/*
	background-color: #f9f9f9;
    border-bottom: 1px solid #EAEAEA;
    color: #428BCA;
    */
    
    background-color: #f9f9f900;
    text-align : right;
    color: #5B615E;
    
}

.kagos-input-component-label-mendantory{
    color: #D3300F;
}


.kagos-input-component-input{
	
}


.kagos-input-component-input-wrapper{
	padding-left: 5px;
	padding-right: 5px;
}


.kagos-input-component-input-option-button{
	background-color : #4C4C4C;
	border : 0px solid #4C4C4C;
	color:#ffffff;
}

/* a:hover - a link when the user mouses over it */
.kagos-input-component-input-option-button:hover {
	background-color : #0092B2;
}


/* a:after - a link the moment it is clicked */
.kagos-input-component-input-option-button:active {
	background-color : #0092B2;
}



.kagos-input-component-date-to-label {
	background-color : #ffffff00;	
	border : 0px solid #ffffff00;
}

/* TOP MENU LAYER CSS */
.top_area2 {
	height: 3.250em;
	background: #57595b;
	position: absolute;
	left: 0em;
	top: 0em;
	width: 100%;
	background: rgba(52, 54, 56, .8);
	z-index: 100;
	-webkit-transiticaon: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.top_area3 {
	/* height: 3.572em; */
	overflow: hidden;
	background: #57595b;
	width: 100%;
	background: rgba(52, 54, 56, .8);
	z-index: 100;
	-webkit-transiticaon: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.top_area3.more {
/* height: 100px; */
}
.content-wrap {
	background: #f2f3f4;
	position: relative;
}
.cont-title {
	font-size: 24px;
	padding-left: 25px;
	background: url(../../../image/kagos/tracking/images/cont-title01.png) 0px 10px no-repeat;
	font-weight: bold;
	margin-bottom: 1.5rem;
}
.cont-title.none {
	padding-left: 0;
	font-size: 24px;
	background: none;
}
.sub-title {
	font-family: Arial;
	font-weight: bold;
	background: #fff;
	padding-bottom: 2rem;
	padding-top: 2rem;
	padding-left: 2rem;
	margin: 0;
	font-size: 30px;
	letter-spacing: -0.6px;
}
.ship-number div {
	float: left;
}
.ship-number span {
	font-size: 20px;
	font-weight: bold;
	padding-left: 7px;
	clear: both;
}
.top_area2.toggled {
	left: 18em;
	width: calc(100% - 18em);
}
.top_area2 .box1, .top_area3 .box1 {
	float: left;
	width: 177px;
	height: 50px;
	border-right: 1px solid #5f6364;
}
.top_area2 .box1 .tit, .top_area3 .box1 .tit {
	float: left;
	font-size: 16px;
	color: #fff;
	line-height: 50px;
	padding-left: 19px;
	width: 75px;
}
.top_area2 .box1 .form-check, .top_area3 .box1 .form-check {
	padding-top: 16px;
}
.top_area2 .box2, .top_area3 .box2 {
	float: left;
	padding: 10px;
	height: 50px;
	border-right: 1px solid #5f6364;/* height: 100%; */
}
.top_area2 .box2 .tit, .top_area3 .box2 .tit {
	float: left;
	font-size: 16px;
	color: #fff;
	line-height: 28px;
	padding-right: 10px;
}
.top_area3 .title-box {
	float: left;
	padding: 0.786rem 1.5rem;
	;
}
.top_area3 .title-box h5 {
	display: inline-block;
	margin: 0;
	color: #fff;
}
.top_area2 .box3, .top_area3 .box3 {
	float: left;
	padding: 9px 14px 9px 10px;
	border-right: 1px solid #5f6364;
	height: 50px;/* height: 3.752em; */
	display: flex;
}
.top_area2 .line-box, .top_area3 .line-box {
	width: 100%;
	border-top: 1px solid #5f6364;
	border-right: 1px solid #5f6364;
	height: 50px;
}
.top_area2 .box3 .tit, .top_area3 .box3 .tit {
	float: left;
	font-size: 16px;
	color: #fff;
	line-height: 30px;
	padding-right: 15px;
}
.top_area2 .box4, .top_area3 .box4 {
	float: left;
	padding: 14px 10px;
}
.top_area2 .box4 .tit, .top_area3 .box4 .tit {
	float: left;
	font-size: 16px;
	color: #fff;
	line-height: 22px;
	padding-right: 10px;
}
.top_area2 .box5, .top_area3 .box5 {
	float: left;
}
.top_area2 .box6 {
	padding-top: 10px;
	padding-left: 16px;
}
.top_area2 .box7 {
	float: right;
}   
.inp_b {
	float: left;
	position: relative;
}
.inp1 {
	width: 11.5em;
	height: 2.615em;
	border: 1px solid #5f6364;
	background: #494b4c;
	padding-left: 0.625em;
	font-size: 0.80em;
	color: #fff;
	float: left;
	font-family: 'HelveticaNeueLTPro-MdCn';
}
.inp_b.inp_b2 {
	padding-right: 29px;
}
.btn1 {
	width: 30px;
	height: 15px;
	position: absolute;
	right: 0;
	top: 0;
	border: 0;
	outline: 0;
	background: url(../../../image/kagos/tracking/images/up.jpg) no-repeat;
	text-indent: -9999px;
}
.btn1:hover {
	background: url(../../../image/kagos/tracking/images/up_on.jpg) no-repeat;
}
.btn2 {
	width: 30px;
	height: 14px;
	position: absolute;
	right: 0;
	bottom: 0;
	border: 0;
	outline: 0;
	background: url(../../../image/kagos/tracking/images/down.jpg) no-repeat;
	text-indent: -9999px;
}
.btn2:hover {
	background: url(../../../image/kagos/tracking/images/down_on.jpg) no-repeat;
}
.inp2 {
	width: 8.5em;
	height: 2.143rem;
	text-align: center;
	border: 1px solid #343638;
	background: #56595a;
	/* padding-left:0.625em; */
	font-size: 0.875rem;
	color: #fff;
	float: left;
	font-family: 'HelveticaNeueLTPro-MdCn';
}
.inp2.time {
	width: 2.858rem;
}
input.style01 {
	width: 4.286rem !important;
}
input.style02 {
	width: 2.858rem !important;
}
.top_area3 span.unit, top_area2 span.unit {
	font-size: 1.143rem;
	width: 0.9286rem;
	height: 0.9286rem;
	margin-left: 0.6rem;
	color: #95999b;
}
.inp2.color01 {
	background: #95999b;
	width: 90px;
	text-align: center;
	height: 30px;
	font-size: 14px;
	margin: 0 0.2rem 0 0.2rem;
}
/* 2019-08-08 KJO*/
.inp2.color02 {
	background: gray;
}

.cal {
	width: 25px;
	height: 25px;
	background: url(../../../image/kagos/tracking/images/cal.png) no-repeat;
	border: 0;
	outline: 0;
	text-indent: -9999px;
	margin-top: 1px;
}
.cal:hover {
	background: url(../../../image/kagos/tracking/images/cal_on.png) no-repeat;
}
.cal2 {
	width: 25px;
	height: 25px;
	background: url(../../../image/kagos/tracking/images/cal2.png) no-repeat;
	border: 0;
	outline: 0;
	text-indent: -9999px;
	margin-top: 1px;
	margin-left: 10px;
}
.search {
	width: 25px;
	height: 25px;
	background: url(../../../image/kagos/tracking/images/header-search.png) no-repeat;
	border: 0;
	outline: 0;
	text-indent: -9999px;
	margin-top: 1px;
	margin-left: 10px;
}
.-copy {
	width: 2px;
	height: 6px;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: 2.73;
	letter-spacing: normal;
	text-align: center;
	color: #95999b;
}
.close {
	width: 25px;
	height: 25px;
	background: url(../../../image/kagos/tracking/images/close.png) no-repeat;
	border: 0;
	outline: 0;
 	/*  float:;*/
	text-indent: -9999px;
	margin-top: 1px !important;
}
.chart .close {
	top: 15px;
	/* left: 0; */
	right: 25px;
	position: absolute;
}
.select1 {
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	height: 2.143em;
	font-size: 1.0em !important;
	border: 1px solid #5f6364;
	padding-left: 10px;
	font-size: 0.8em;
	color: #fff;
	background: #494b4c url(../../../image/kagos/tracking/images/arrow3.jpg) no-repeat right 50%;
	font-family: 'HelveticaNeueLTPro-MdCn';
}
.select1:focus, .select1:hover {
	background: #494b4c url(../../../image/kagos/tracking/images/arrow3_on.jpg) no-repeat right 50%;
}
.form-check {
	display: inline-block;
	vertical-align: middle;
}
.form-check .label {
	display: inline-block;
	vertical-align: middle;
	font-size: 10px;
	color: #fff;
	line-height: 18px;
	padding-right: 5px;
}
.mar7 {
	margin-right: 7px;
}
.mar8 {
	margin-right: 8px;
}
.mar10 {
	margin-right: 10px;
}
.mab45 {
	margin-bottom: 45px;
}
.mab10 {
	margin-bottom: 10px;
}
.w147 {
	width: 147px !important;
}
.w139 {
	width: 139px !important;
}
.radio_label {
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.radio_label input[type=radio], .radio_label input[type=checkbox] {
	display: none;
}
.radio_label label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	width: 22px;
	height: 22px;
	font-size: 16px;
}
.radio_label label:before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 22px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #494b4c;
	border: 1px solid #5f6364;
}
.radio_label.radio_label_chk label:before {
	width: 23px;
	height: 23px;
	border-radius: 0;
}
.radio_label input[type=radio]:checked + label:after {
	display: block;
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: #95999b;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -4px;
	margin-top: -4px;
}
.radio_label input[type=checkbox]:checked + label:after {
	display: block;
	content: "";
	width: 15px;
	height: 14px;
	background: url(../../../image/kagos/tracking/images/chk.png) no-repeat;
	;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -7px;
	margin-top: -7px;
}
.radio_label02 {
	display: block;
	vertical-align: middle;
	position: relative;
	float: left;
	height: 100%;
}
.radio_label02 input[type=radio], .radio_label02 input[type=checkbox] {
	display: none;
}
.radio_label02 label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	width: auto;
	padding-left: 30px;
	margin: 0;
	line-height: 29px;
	height: 100%;
	color: #fff;
	margin-right: 1rem;
	font-size: 15px;
}
.radio_label02 label:before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 22px;
	position: absolute;
	left: 0px;
	top: 5px;
	background-color: #ffffff;
	border: solid 1px #cfcfd4;
}
.radio_label02.radio_label_chk label:before {
	width: 23px;
	height: 23px;
	border-radius: 0;
}
.radio_label02 input[type=radio]:checked + label:after {
	display: block;
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: #95999b;
	position: absolute;
	left: 11px;
	top: 50%;
	margin-left: -4px;
	margin-top: -4px;
}
.radio_label02 input[type=checkbox]:checked + label:after {
	display: block;
	content: "";
	width: 15px;
	height: 14px;
	background: url(../../../image/kagos/tracking/images/chk.png) no-repeat;
	;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -7px;
	margin-top: -7px;
}
.form-check {
	display: inline-block;
	vertical-align: middle;
}
.form-check .label {
	display: inline-block;
	vertical-align: middle;
	font-size: 10px;
	color: #fff;
	line-height: 18px;
	padding-right: 5px;
}
.fl {
	float: left;
}     
.date-title {
	width: 20%;
	text-align: right;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 1.5rem;
	align-self: center;
}