@import url('/css/font-af0c8a0025efba993d949d5170d2cc02.css');

/*=================================================
	Reset
=================================================*/
a,
a:hover,
a:link,
a:visited,
a:active {
	text-decoration: none !important;
}

.btn:focus,
.btn:active {
	outline: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
	color: #ffffff;
	text-decoration: none !important;
	outline: 0;
	outline-color: transparent;
	outline-width: 0;
	outline-style: none;
	box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
}

.form-control:focus {
	box-shadow: none !important;
	border-color: rgba(0, 0, 0, 0.7) !important;
}

ul {
	list-style-type: none !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
	padding-inline-start: 0 !important;
	margin: 0 !important;
	padding-left: 0 !important;
}

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

/*=================================================
	General
=================================================*/

/* Fonts */
:root {
	--font-default: Open Sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	--font-primary: Pretendard, Open Sans, Roboto, sans-serif;
	--font-secondary: Open Sans, Work Sans, sans-serif;
}

/* Colors */
:root {
	--color-default: #364d59;
	--color-primary: #feb900;
	--color-secondary: #52565e;
	--color-third: #111111;
}

/* Smooth scroll behavior */
:root {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-default);
	font-size: 100%;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--color-default);
	overflow-x: hidden;
}

/*=================================================
	Edit
=================================================*/

/* Font */
.fs-6-3 {
	font-size: 1.1875rem !important;
	/* 19px */
}

.fs-6-2 {
	font-size: 1.125rem !important;
	/* 18px */
}

.fs-6-1 {
	font-size: 1.0625rem !important;
	/* 17px */
}

.fs-7 {
	font-size: 0.9375rem !important;
	/* 15px */
}

.fs-8 {
	font-size: 0.875rem !important;
	/* 14px */
}

.fs-9 {
	font-size: 0.8125rem !important;
	/* 13px */
}

.fs-10 {
	font-size: 0.750rem !important;
	/* 12px */
}

.fs-11 {
	font-size: 0.6875rem !important;
	/* 11px */
}

.fs-12 {
	font-size: 0.625rem !important;
	/* 10px */
}

.fs-13 {
	font-size: 0.5625rem !important;
	/* 9px */
}

.fs-14 {
	font-size: 0.500rem !important;
	/* 8px */
}

.fw-300 {
	font-weight: 300 !important;
}

.fw-400 {
	font-weight: 400 !important;
}

.fw-500 {
	font-weight: 500 !important;
}

.fw-600 {
	font-weight: 600 !important;
}

.fw-700 {
	font-weight: 700 !important;
}

.fw-800 {
	font-weight: 800 !important;
}

.fw-900 {
	font-weight: 900 !important;
}

/* Width, Height, Margin, Padding */
.w-15 {
	width: 15% !important;
}

.w-20 {
	width: 20% !important;
}

.w-30 {
	width: 30% !important;
}

.w-40 {
	width: 40% !important;
}

.w-60 {
	width: calc(60% - 1.5rem);
}

.wpx-manpower {
	min-width: 155px !important;
}

@media (max-width: 767.98px) {

	.w-40,
	.w-60 {
		width: 100% !important;
	}

	.wpx-manpower {
		min-width: 100px !important;
	}
}

.wpx-80 {
	width: 80px !important;
}

.wpx-120 {
	width: 120px !important;
}

.hpx-30 {
	min-height: 30px;
}

.hpx-60 {
	width: auto;
	height: 60px !important;
}

.vh-70 {
	height: 70vh;
}

.gap-0-2 {
	gap: 0 0.5rem !important;
}

/*** Bootstrap Edit ***/
.form-control,
.form-select {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
	font-size: 0.875rem;
	border-color: rgba(0, 0, 0, 0.35);
}

.form-table-search {
	padding: 0.1rem 0.5rem !important;
	font-size: 0.750rem;
	line-height: 1;
	border-radius: 0 !important;
	border: 0 !important;
	background: #ffffff url('/image/common/search_zoom-36c941b9243bea977268b7d9238a5449.png') 3px center no-repeat !important;
}

.form-select-sm {
	font-size: 0.750rem !important;
	color: var(--bs-body-color) !important;
	border-color: #bbbbbb !important;
}

.col-form-label {
	padding: 0;
	font-size: 0.750rem;
	color: var(--bs-body-color);
}

.btn {
	padding-top: 0.34rem;
	padding-bottom: 0.34rem;
	white-space: nowrap !important;
}

.btn-sm {
	margin: 0;
	padding: 0.15rem 0.3rem;
	font-size: 0.813rem;
	line-height: 1.1;
}

.btn-md {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
	font-size: 0.875rem !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.btn-lg {
	padding-top: 0.3rem !important;
	padding-bottom: 0.3rem !important;
	font-size: 0.9375rem !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.btn-square {
	width: 34px !important;
	height: 34px !important;
	padding: 0 0.5rem;
	font-size: 0.875rem !important;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.btn-zoom {
	padding: 0.1rem 0.15rem !important;
	border-radius: 0.2rem;
	font-size: 0.713rem;
	line-height: 1;
}

.btn-secondary {
	background-color: #96A0AA;
	border-color: #96A0AA;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
	color: var(--bs-body-color) !important;
	background: transparent !important;
	border: 0 !important;
}

.breadcrumb-item+.breadcrumb-item::before {
	content: var(--bs-breadcrumb-divider, ">")
		/* rtl: var(--bs-breadcrumb-divider, ">") */
	;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active,
.breadcrumb-item+.breadcrumb-item::before {
	color: #666666;
}

.z-2 {
	z-index: 2;
}

.z-10 {
	z-index: 10;
}

.z-11 {
	z-index: 11;
}

.z-100 {
	z-index: 100;
}

.hstack1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-self: stretch;
}

.img-full {
	width: auto;
	height: 100%;
}

.border-top-dotted {
	border-top: 1px dotted rgba(0, 0, 0, 0.3) !important;
}

.border-bottom-dotted {
	border-bottom: 1px dotted rgba(0, 0, 0, 0.3) !important;
}

.border-bottom-dotted-light {
	border-bottom: 1px dotted rgba(255, 255, 255, 0.3) !important;
}

.text-dday {
	font-weight: 600;
	color: #D88E0E;
	animation: text-ani 1.25s ease-in-out infinite;
}

@keyframes text-ani {
	0% {
		color: #D88E0E;
	}

	100% {
		color: #000000;
	}
}

/*=================================================
	COLOR
=================================================*/

.bg-color1 {
	background: #E9ECEF !important;
	/* Body */
}

.bg-color2 {
	background: #1D2939 !important;
	/* Sidebar */
}

.bg-color3 {
	background: #283546 !important;
	/* Sidebar Sub */
}

.bg-color4 {
	background: #B3B8BD !important;
	/* Modal Title */
}

.bg-color5 {
	background: #94B7DB !important;
}

.bg-color6 {
	background: #2CA459 !important;
}

.bg-color7 {
	background: #A786D4 !important;
}

.bg-color8 {
	background: #354263 !important;
}

.bg-color9 {
	background: #589DDF !important;
	/* User Header */
}

.bg-color10 {
	background: #227CB0 !important;
	/* Tracking Manpower Select */
}

.text-logo {
	color: #1D2939 !important;
	/* Logo Text */
}

.text-default {
	color: #364d59 !important;
}

.btn-color1 {
	background: #57A0EA !important;
	/*Primary*/
}

.btn-color2 {
	background: #7AA1C8 !important;
	/*Primary*/
}

.btn-color3 {
	background: #4874A3 !important;
	/*Primary*/
}

.border-light1 {
	border-color: rgba(255, 255, 255, 0.4) !important;
}

/*=================================================
	LOGIN
=================================================*/

.bg-login {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #5058AB url('/image/background/bg_login-65ff11d9573ec69c3ecdac0912f75c4c.jpg') center center no-repeat;
	background-size: cover;
}

.login-box {
	max-width: 270px;
	color: #ffffff;
}

.login-box img {
	width: auto;
	height: 30px;
}

.login-box h2 {
	margin: 0;
	font-family: var(--font-primary);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/*=================================================
	NAVIGATION
=================================================*/

.navbar {
	width: 100%;
	height: 50px;
	padding-top: 0;
	padding-bottom: 0;
}

.nav-burger {
	display: none;
}

.logo {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: calc(200px - 0.750rem);
	font-family: var(--font-primary);
	font-size: 1.875rem;
	font-weight: 800;
	color: #ffffff;
}

.logo-img {
	width: 90% !important;
	padding-bottom: 0.4rem;
}

.logo-mob {
	display: none;
}

@media (max-width: 767.98px) {
	.logo {
		width: auto;
	}

	.logo-img {
		display: none !important;
	}

	.logo-mob {
		display: block;
		padding-right: 1rem;
		padding-bottom: 0.4rem;
	}

	.nav-burger {
		display: block;
		position: relative;
		width: 30px;
		height: 20px;
		z-index: 1002;
	}

	.nav-burger span {
		position: absolute;
		left: 0;
		top: 9px;
		width: 100%;
		height: 2px;
		background: #000000;
		transition: all 0.3s ease 0s;
	}

	.nav-burger::before,
	.nav-burger::after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #000000;
		transition: all 0.3s ease 0s;
	}

	.nav-burger::after {
		bottom: 0;
	}

	.nav-burger.active::before {
		top: 9px;
		background: #000000;
		transform: rotate(45deg);
	}

	.nav-burger.active::after {
		bottom: 9px;
		background: #000000;
		transform: rotate(-45deg);
	}

	.nav-burger.active span {
		transform: scale(0);
	}
}

.monitoring {
	padding: 0 0.5rem;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.monitoring button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1rem;
	color: #000000;
}

.login-tag {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
}

.login-tag button {
	padding: 0 0.3rem;
	font-size: 0.6875rem;
	border: 0;
}

.login-tag a {
	padding: 0 0.3rem;
	font-size: 0.6875rem;
	border: 0;
}

@media (max-width: 767.98px) {
	.monitoring button span {
		display: none;
		font-size: 0;
	}

	.login-tag div {
		display: none;
		font-size: 0;
	}
}

.btn-logout {
	padding: 0.1rem 0.3rem !important;
}

/*=================================================
	MAIN/SUB COMMON
=================================================*/
.today-status {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: start;
	gap: 2rem;
}

.today-status .w-60 {
	width: calc(55% - 1.5rem) !important;
}

.today-status .w-40 {
	width: calc(45% - 1.5rem) !important;
}

@media (max-width: 1399.98px) {

	.today-status .w-40,
	.today-status .w-60 {
		width: 100% !important;
	}
}

.table-main {
	--bs-table-bg: #ffffff;
	--bs-table-striped-bg: #F9F9F9;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #dddddd;
	--bs-table-hover-color: #000;
	border-color: rgba(0, 0, 0, 0.15);
}

.table-main th,
.table-main td {
	padding: 0.7rem 1rem;
	font-size: 0.750rem;
	font-weight: 400 !important;
	vertical-align: top;
}

.table-main th {
	width: 100px !important;
	padding: 0.3rem 0.5rem !important;
	font-size: 0.687rem;
	line-height: 1;
	background: #F5F5F5;
}

.m-spot {
	display: inline-block;
	width: 110px;
	padding: 0.2rem 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: #efefef;
	overflow: hidden;
}

.m-spot-add {
	display: inline-block;
	width: 110px;
	padding: 0.2rem 0;
	color: #98651B;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 1rem;
	border: 1px solid #DE8B14;
	background: #ffffff;
	overflow: hidden;
}

.m-spot-on {
	color: #fff;
	background: #739FDC;
}

.m-spot1-on {
	color: #fff;
	background: #ffca2c;
}

.vessel-status th:nth-child(1) {
	width: 200px !important;
}

.vessel-status th:nth-child(2),
.vessel-status th:nth-child(4) {
	width: 150px !important;
}

.vessel-status th:nth-child(3) {
	width: calc(100% - 500px) !important;
}

.vessel-status td {
	vertical-align: middle !important;
	line-height: 1 !important;
}

.paging {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 1.500rem;
	padding: 0 0.750rem;
	font-size: 0.625rem;
	color: rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.9);
	background: #DADFE3;
}

.paging>ul {
	display: table;
}

.paging>ul li {
	display: table-cell;
	vertical-align: middle;
}

.paging>ul li:last-child {
	font-weight: 500;
	color: rgba(0, 0, 0, 0.9);
}

.content {
	position: relative;
	width: 100%;
	padding: var(--bs-gutter-y, 0.75rem) var(--bs-gutter-x, 1.75rem);
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 767.98px) {
	.paging {
		display: none;
	}

	.content {
		padding: var(--bs-gutter-y, 0.75rem) var(--bs-gutter-x, 0.75rem);
	}
}

.page-title,
.page-title1,
.page-title2,
.cate-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-primary);
	font-size: 1.750rem;
	font-weight: 500;
	color: #000000;
}

.page-title1 {
	font-size: 1.063rem;
}

.page-title2 {
	font-size: 0.913rem;
	color: #121212;
}

@media (max-width: 767.98px) {
	.page-title {
		font-size: 1.500rem;
	}
}

.cate-title {
	justify-content: start;
	align-items: start;
	font-size: 0.875rem;
}

.inner {
	position: relative;
	width: 100%;
}

.flex-nowrap-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: start;
	gap: 3rem;
}

.flex-wrap-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: start;
}

.box-two {
	width: calc(50% - 2.5rem) !important;
}

.box-three {
	width: calc((100% / 3) - 2rem) !important;
}

.box-type1 {
	padding: 0.5rem 1rem;
	border-radius: 0.3rem;
	border: 1px solid rgba(0, 0, 0, 0.5);
	background: rgba(255, 255, 255, 0.6);
}

.vessel-pob {
	display: block;
	width: 140px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background: #ffffff;
}

.vessel-pob li {
	padding: 0.250rem;
	font-size: 1rem;
	text-align: center;
}

.vessel-pob li:nth-child(1) {
	padding: 0.1rem;
	font-size: 0.750rem;
	color: #111111;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	background: rgba(0, 0, 0, 0.05);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/*=================================================
	Setting
=================================================*/
.register-box {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 3rem;
	margin-bottom: 1rem;
	padding: 0.5rem 0 0.7rem;
	border-top: 2px solid rgba(0, 0, 0, 0.9);
	border-bottom: 2px solid rgba(0, 0, 0, 0.9);
}

.photo-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 350px;
	min-height: 500px;
	border-radius: 0.25rem;
	background: rgba(255, 255, 255, 0.0);
	overflow: hidden;
}

@media (max-width: 991.98px) {
	.photo-box {
		width: 100%;
		min-height: 300px;
	}
}

@media (min-width: 992px) and (max-width: 1399.98px) {
	.photo-box {
		width: 250px;
	}
}

.photo-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;
}

.btn-photo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	background: transparent;
	border: 0;
	font-size: 3rem;
	color: rgba(0, 0, 0, 0.5);
}

.btn-photo:hover,
.btn-photo:focus,
.btn-photo:active {
	color: rgba(0, 0, 0, 0.9);
}

.register-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.5rem;
	width: calc((100% - 350px) - 3rem);
	font-size: 0.913rem;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
	.register-form {
		width: calc((100% - 250px) - 3rem);
	}
}

.submit-form,
.stopover-box {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 0.5rem;
	width: 100%;
	font-size: 0.913rem;
}

.register-form .w-50,
.submit-form .w-50,
.stopover-box .w-50 {
	width: calc(50% - 0.25rem) !important;
}

.register-form .w-33,
.submit-form .w-33,
.stopover-box .w-33 {
	width: calc((100% / 3) - 0.334rem) !important;
}

.register-form .w-25,
.submit-form .w-25,
.stopover-box .w-25 {
	width: calc(25% - 0.375rem) !important;
}

.register-form .form-control[readonly],
.submit-form .form-control[readonly],
.stopover-box .form-control[readonly] {
	background: #ffffff;
}

.register-form .form-check,
.submit-form .form-check,
.stopover-box .form-check {
	min-height: 1.2rem;
	margin-bottom: 0;
}

@media (max-width: 991.98px) {
	.register-form {
		width: 100%;
	}

	.register-form .w-50,
	.submit-form .w-50,
	.stopover-box .w-50 {
		width: 100% !important;
	}

	.register-form .w-33,
	.submit-form .w-33,
	.stopover-box .w-33 {
		width: 100% !important;
	}

	.register-form .w-25,
	.submit-form .w-25,
	.stopover-box .w-25 {
		width: 100% !important;
	}
}

.name-field,
.name-field1 {
	display: flex;
	flex-direction: row;
	justify-content: start;
	gap: 0.2rem;
	margin-right: 0.5rem;
}

.name-field {
	min-width: 120px;
}

.requisite {
	margin-left: 0.1rem;
	font-size: 0.813rem;
	color: #ff0000;
}

.requisite-no-color {
	margin-left: 0.1rem;
	font-size: 0.813rem;
}

.writer-box {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: #A3C8D3;
}

@media (max-width: 1199.98px) {
	.writer-box .flex-grow-0 {
		flex-grow: 1 !important;
	}
}

.border-box {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.5rem 0 0.7rem;
	border-top: 2px solid rgba(0, 0, 0, 0.9);
	border-bottom: 2px solid rgba(0, 0, 0, 0.9);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
	.border-box>div {
		width: 100% !important;
	}

	.border-box .w-25 {
		width: 100% !important;
	}

	.border-box .input-group-text,
	.table-responsive .input-group-text {
		overflow: auto;
	}
}

@media (max-width: 1399.98px) {
	.input-group {
		flex-wrap: nowrap;
	}
}

.border-top-box {
	padding: 0.5rem 0 0.7rem;
	border-top: 2px solid rgba(0, 0, 0, 0.9);
}

.writer-box>input:read-only,
.border-box>input:read-only {
	background: #ffffff !important;
}

@media (min-width: 1200px) {

	.writer-box,
	.border-box {
		flex-wrap: nowrap;
	}
}

.file-box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 150px;
	font-size: 0.750rem;
	border-radius: 3px;
	border: 1px dotted rgba(0, 0, 0, 0.7);
	background: #ffffff;
}

.file-list {
	display: flex;
	justify-content: start;
	align-items: start;
	width: 100%;
	font-weight: 500;
	color: #000000;
}

.bottom-btn {
	display: flex;
	justify-content: start;
	align-items: start;
	margin: 1rem 0;
}

.profile-photo {
	width: 200px;
}

.manpower-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: start;
	gap: 0.35rem;
	font-size: 0.8125rem;
}

.manpower-list>div {
	margin-right: 2rem;
}

.tp-manpower-box {
	position: relative;
	width: 100%;
	height: 120px;
	padding: 0.35rem 0.5rem 1rem;
	font-size: 0.750rem;
	border-radius: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.35);
	background: #ffffff;
}

.name-field {
	display: flex;
	flex-direction: row;
	justify-content: start;
	gap: 0.2rem;
	min-width: 120px;
	margin-right: 0.5rem;
}

.tracking-box {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	align-self: stretch;
	position: relative;
	width: 600px;
	height: auto;
}

.tracking-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.5rem;
	width: calc((100% - 600px) - 3rem);
	font-size: 0.913rem;
}

@media (max-width: 1199.98px) {

	.tracking-box,
	.tracking-form {
		width: 100%;
	}
}

.tracking-left {
	width: 300px;
	height: 100%;
	padding: 0.5rem;
	background: #222222;
}

.tracking-manpower-list {
	height: calc(100vh - 210px);
	color: rgba(255, 255, 255, 0.8);
}

.tracking-right {
	width: calc(100% - 300px);
	height: 100%;
}

.tracking-right .form-check {
	min-height: 1.2rem;
	margin-bottom: 0;
}

.tracking-right-list {
	width: 100%;
	height: calc(100% - 40px);
}

.tracking-section {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	width: calc(20% - 1rem);
	margin: 0.5rem;
	border-radius: 0.3rem;
	border: 1px solid rgba(0, 0, 0, 0.3);
	background: #ffffff;
}

.tracking-section-list {
	display: flex;
	flex-direction: column;
	min-height: 45px;
	max-height: 198px;
	padding: 0.2rem 0.5rem;
}

.tracking-section-name {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0.1rem 0.4rem;
	color: #ffffff;
	border-radius: 0.2rem;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: #0a53be;
}

.tracking-section-manpower {
	border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
}

.tracking-section-manpower:last-child {
	border-bottom: 0 !important;
}

.wtg-status-rate {
	position: absolute;
	color: #FFBE37;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	z-index: 2;
}

.wa-check>div {
	margin-right: 1rem;
}

.wa-check>div {
	flex: 0 0 10%;
}

.pinned-area-container {
	position: sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.pinned-area-container .tracking-section {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.tracking-section.pinned .pin {
	color: #FFD700;
}

.wtg-input {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.wtg-input:last-child {
	border-bottom: 0;
}

.wtg-name {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 40px;
	font-weight: 600;
	white-space: nowrap !important;
}

@media (max-width: 767.98px) {
	.wtg-input {
		min-width: 900px;
	}
}

.legend {
	width: 1rem;
	height: 0.650rem;
	border-radius: 0.1rem;
}

.legend-color1 {
	background: #447DCD;
}

.legend-color2 {
	background: #B3C452;
}

.legend-color3 {
	background: #00A65A;
}

.wtg-box {
	width: 100%;
	height: 22px;
	background: #ffffff;
}

.wtg-box-color1 {
	background: #447DCD url('/image/user/legend_pattern1-761864a028474f1bfb294ee1191d1fa3.png') left center repeat !important;
}

.wtg-box-color2 {
	background: #B3C452 url('/image/user/legend_pattern1-761864a028474f1bfb294ee1191d1fa3.png') left center repeat !important;
}

.wtg-box-color3 {
	background: #00A65A url('/image/user/legend_pattern1-761864a028474f1bfb294ee1191d1fa3.png') left center repeat !important;
}

.wtg-prbox {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.wtg-prbox > ul {
	display: block;
	width: calc(20% - 0.8rem);
}

.wtg-prbox > ul li {
	padding: 0.2rem 0;
	font-size: 0.875rem;
	text-align: center;
}

.wtg-prbox > ul > li:nth-child(1) {
	color: #222222;
	border-radius: 0.2rem;
	border: 1px solid rgba(0,0,0,0.1);
	background: rgba(0,0,0,0.08);
}

.wtg-prbox > ul > li > ul {
	display: table;
}

.wtg-prbox > ul > li > ul > li {
	display: table-cell;
}

.wtg-prbox > ul > li > ul > li:nth-child(1) {
	width: 25px;
	text-align: left;
}

.wtg-prbox .wtg-prsb {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: calc(20% - 0.8rem);
}

/* TAB */
.nav-link {
	color: #444444;
}

.nav-tabs .nav-link {
	margin-bottom: -1px;
	font-size: 0.875rem;
	background: none;
	border: 1px solid transparent;
	border-top-left-radius: 0.35rem;
	border-top-right-radius: 0.35rem;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	color: #222222;
	border-color: #cccccc #cccccc #cccccc;
	background: rgba(255, 255, 255, 0.7);
	isolation: isolate;
}

.nav-tabs .nav-link.disabled {
	color: #6c757d;
	background-color: transparent;
	border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	color: #000000;
	background-color: #fff;
	border-color: #555555 #555555 transparent;
}

.list-group-item.active {
	background-color: #7BA5EB;
	border-color: #7BA5EB;
}

@media (max-width: 767.98px) {
	.nav {
		flex-wrap: nowrap;
	}

	.tab-pane .col-4,
	.tab-pane .col-8 {
		width: 100% !important;
	}
}

.nav-wtg .nav-tabs {
	border-bottom: 0 !important;
}

.nav-wtg .nav-link {
	width: 50px !important;
	margin-right: 0.2rem;
	margin-bottom: 0.2rem;
	padding: 0.35rem 0.75rem !important;
	font-size: 0.875rem;
	color: #ffffff;
	background: #888888;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 0.35rem;
}

.nav-wtg .nav-link:hover,
.nav-wtg .nav-link:focus {
	color: #222222;
	border: 1px solid rgba(0,0,0,0.6);
	background: #ffffff;
	isolation: isolate;
}

.nav-wtg .nav-link.active,
.nav-wtg .nav-item.show .nav-link {
	color: #ffffff;
	background-color: #166EC6;
	border: 1px solid #166EC6;
}

/*=================================================
	TRACKING
=================================================*/

.tracking-left {
	width: 300px;
	height: 100%;
	padding: 0.5rem;
	background: #2B383E;
}

.tracking-manpower-list {
	height: calc(100vh - 210px);
	color: rgba(255, 255, 255, 0.8);
}

.tracking-manpower-list svg {
	font-size: 0.750rem;
	color: rgba(255, 255, 255, 0.8);
}

.tracking-manpower-list .bg-color10 .opacity-75 {
	opacity: 1 !important;
}

.tracking-right {
	width: calc(100% - 300px);
	height: 100%;
	background: #ECF0F5;
}

.tracking-right .form-check {
	min-height: 1.2rem;
	margin-bottom: 0;
}

.tracking-right-list {
	width: 100%;
	height: calc(100% - 40px);
}

.tracking-right-list svg {
	font-size: 0.750rem;
}

.tracking-section {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	width: calc(20% - 1rem);
	margin: 0.5rem;
	border-radius: 0.3rem;
	border: 1px solid rgba(0, 0, 0, 0.3);
	background: #ffffff;
}

.tracking-section-list {
	display: flex;
	flex-direction: column;
	max-height: 198px;
	padding: 0.2rem 0.5rem;
}

.tracking-section-name {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0.1rem 0.4rem;
	color: #ffffff;
	border-radius: 0.2rem;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: #0a53be;
}

.tracking-section-manpower {
	border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
}

.tracking-section-manpower:last-child {
	border-bottom: 0 !important;
}

.search-highlight {
	outline: 4px solid #ffc107 !important;
	box-shadow: 0 0 15px rgba(255, 193, 7, 0.6) !important;
	z-index: 10;
}

/*=================================================
	USER
=================================================*/

.icon-box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	font-size: 2rem;
	color: rgba(0, 0, 0, 0.5);
	border-radius: 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #ffffff;
}

.sub-title {
	font-size: 1.125rem;
	font-weight: 500;
	color: #000000;
}

.manual {
	font-size: 0.813rem;
}

.manual li {}

.manual li:first-child {
	font-size: 0.913rem;
	font-weight: 500;
	color: #000000;
}

.manual:nth-child(1) li:first-child {
	font-size: 1.125rem;
}

/*=================================================
	GRAPH
=================================================*/

.progress {
	display: flex;
	height: 1.500rem;
	padding: 0.1rem;
	overflow: hidden;
	font-size: 0.75rem;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 0.25rem;
}

.progress2 {
	display: flex;
	width: 100%;
	height: 0.750rem;
	padding: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 0.25rem;
}

.progress-bar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	border-radius: 3px;
	background-color: #4F6E98;
	transition: width 0.5s ease;
}

.progress-bar1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	border-radius: 3px;
	background-color: #0D6EFD;
	transition: width 0.5s ease;
}

.progress-bar2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	border-radius: 3px;
	background-color: #1867D2;
	transition: width 0.5s ease;
}

.progress-bar3 {
	width: 260px;
	height: 670px;
	padding: 0;
	margin: 0;
	background-color: #304F5E;
}

.progress-bar3 span {
	display: inline-block;
	height: 100%;
	-webkit-transition: height .4s ease-in-out;
	-moz-transition: height .4s ease-in-out;
	-ms-transition: height .4s ease-in-out;
	-o-transition: height .4s ease-in-out;
	transition: height .4s ease-in-out;
}

.shine span::after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #3B657A;
	-webkit-animation: animate-shine 3.0s ease-out infinite;
	-moz-animation: animate-shine 3.0s ease-out infinite;
}

@-webkit-keyframes animate-shine {
	0% {
		opacity: 0;
		height: 100%;
	}

	50% {
		opacity: .5;
	}

	100% {
		opacity: 0;
		height: 0;
	}
}

@-moz-keyframes animate-shine {
	0% {
		opacity: 0;
		height: 100%;
	}

	50% {
		opacity: .5;
	}

	100% {
		opacity: 0;
		height: 0;
	}
}

/*=================================================
	TABLE
=================================================*/
.table-status {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: center;
	gap: 1rem;
}

.table-status ul {
	display: table;
}

.table-status ul li {
	display: table-cell;
	padding-right: 0.5rem;
	font-size: 0.750rem;
	color: rgba(0, 0, 0, 0.7);
	vertical-align: middle;
}

.table-status ul li:last-child {
	font-weight: 500;
	color: #000000;
}

@media (max-width: 767.98px) {
	.table-status {
		gap: 0.25rem;
	}
}

.table {
	margin-bottom: 0;
	border-spacing: 0;
}

@media (max-width: 1399.98px) {
	.table-responsive .table {
		min-width: 1400px !important;
	}
}

.table .form-check {
	min-height: 1.2rem;
	margin-bottom: 0;
}

.table> :not(:first-child) {
	border-top: 1px;
}

.table-light {
	--bs-table-bg: #ffffff;
	--bs-table-striped-bg: #F9F9F9;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #dddddd;
	--bs-table-hover-color: #000;
	border-color: rgba(0, 0, 0, 0.15);
}

.table-light thead th {
	padding: 0.1rem 0.2rem 0.2rem;
	font-size: 0.750rem;
	font-weight: 400 !important;
	color: #fff;
	text-align: start;
	vertical-align: middle;
	border: 1px solid #69BCC6;
	background: #69BCC6;
}

.table-light tbody th {
	padding: 0.2rem 0.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	text-align: left;
	white-space: nowrap !important;
	vertical-align: middle;
	background: #DBF5F8;
}

.table-light tbody td {
	padding: 0.2rem 0.5rem;
	font-size: 0.875rem;
	text-align: center;
	vertical-align: middle;
}

.table-weather {
	--bs-table-bg: #94B7DB !important;
	--bs-table-striped-bg: #c7dbd2;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #c1d6cc;
	--bs-table-hover-color: #000;
	border-color: #7F9AB5 !important;
}

.table-weather thead th {
	width: calc(100% / 6);
	padding: 0.2rem;
	font-size: 0.813rem;
	font-weight: 500;
	background: #B6D4F3;
	border: 1px solid #7F9AB5;
}

.table-weather td {
	padding: 0;
	color: #ffffff;
}

.table-weather td span {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	font-size: 1.375rem;
	font-weight: 500;
}

.table-primary {
	--bs-table-bg: #ffffff;
	--bs-table-striped-bg: #F9F9F9;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #dddddd;
	--bs-table-hover-color: #000;
	border-color: rgba(0, 0, 0, 0.2);
}

.table-primary thead th {
	padding: 0.2rem;
	font-size: 0.813rem;
	font-weight: 400;
	color: #ffffff;
	vertical-align: middle;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: #5A7797;
}

.table-primary td {
	padding: 0.35rem;
	font-size: 0.875rem;
}

.table-dark {
	--bs-table-bg: transparent;
	--bs-table-striped-bg: #F9F9F9;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #dddddd;
	--bs-table-hover-color: #000;
	border-color: rgba(255, 255, 255, 0.15);
}

.table-dark thead th {
	padding: 0.1rem 0.2rem 0;
	font-size: 0.750rem;
	font-weight: 400 !important;
	color: var(--color-default);
	vertical-align: middle;
	border: 0;
	background: transparent;
}

.table-dark td {
	padding: 0.2rem 0.3rem 0.2rem 0;
	font-size: 0.875rem;
	text-align: center;
	vertical-align: middle;
}

.table-ap {
	--bs-table-bg: transparant;
	--bs-table-striped-bg: #c7dbd2;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #c1d6cc;
	--bs-table-hover-color: #000;
	border-color: rgba(255, 255, 255, 0.15);
}

.table-ap thead th {
	font-size: 0.750rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.1);
	border: 0;
}

.table-ap td {
	font-size: 0.813rem;
}

.table-ap th,
.table-ap td {
	padding: 0.1rem !important;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
}

.table-string {
	--bs-table-bg: #2C4E5F;
	--bs-table-striped-bg: #F9F9F9;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #dddddd;
	--bs-table-hover-color: #000;
	border-color: rgba(0, 0, 0, 0.2);
	color: #ffffff;
}

.table-string thead th {
	padding: 0.2rem;
	font-size: 0.750rem;
	font-weight: 400;
	color: #ffffff;
	vertical-align: middle;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: #5A7797;
}

.table-string tbody th,
.table-string tbody td {
	padding: 0.35rem 0;
	font-size: 0.750rem;
	font-weight: 400;
}

.table-string tbody th {
	width: 80px;
	white-space: nowrap;
}

.table-profile {
	--bs-table-bg: #ffffff;
	--bs-table-striped-bg: #F9F9F9;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #dddddd;
	--bs-table-hover-color: #000;
	border-color: rgba(0, 0, 0, 0.15);
}

.table-profile tbody th,
.table-profile tbody td {
	padding: 0.3rem 0;
	vertical-align: middle;
}

.table-profile tbody th {
	width: 150px;
	padding-right: 1rem;
	font-size: 0.750rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
	white-space: nowrap !important;
	background: #ffffff;
}

.table-profile tbody td {
	font-size: 0.8125rem;
}

.table-wtg {
	--bs-table-bg: #ffffff;
	--bs-table-striped-bg: #F9F9F9;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bcd0c7;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #dddddd;
	--bs-table-hover-color: #000;
	border-color: rgba(0, 0, 0, 0.15);
}

.table-wtg thead th {
	width: 30px !important;
	padding: 0.25rem 0;
	font-size: 0.750rem;
	font-weight: 400 !important;
	color: #fff;
	vertical-align: middle;
	white-space: nowrap !important;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #6DBCC4;
}

.table-wtg thead th:first-child {
	border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.table-wtg tbody th,
.table-wtg tbody td {
	font-size: 0.8125rem;
	font-weight: 400;
	vertical-align: middle;
}

.table-wtg tbody td {
	padding: 0 !important;
	text-align: center;
}

.table-wtg tbody th {
	padding: 0 0.25rem !important;
	white-space: nowrap !important;
	background: #E2F7F9;
}

.table-wtg tbody td:nth-child(5) {
	color: #0a53be !important;
}

.table> :not(:first-child) {
	border-top: 1px solid rgba(0, 0, 0, 0.5) !important;
}

.table-bg-color1>td {
	background: #E9EFF5 !important;
	/* tr background color*/
}

.filters>th>input {
	width: 100%;
}

.dataTables_filter {
	display: none;
}

.dt-buttons button {
	display: none !important;
}

/*=================================================
	MODAL
=================================================*/

.modal-header {
	padding: 0.5rem 1rem;
	font-family: var(--font-primary);
	font-size: 1.375rem;
	font-weight: 500;
	color: #ffffff;
	border-bottom: 0;
}

.btn-close {
	background: transparent url('/image/common/modal_close-1ea71b6e84bc19536105f20167a3064a.png') center center no-repeat;
}

/*=================================================
	SCROLL
=================================================*/

.scroll-x {
	overflow: auto;
}

.scroll-x::-webkit-scrollbar {
	height: 0;
}

.scroll-x::-webkit-scrollbar-track {
	background-color: transparent;
}

.scroll-x::-webkit-scrollbar-thumb {
	border-radius: 0;
	background-color: transparent;
}

.scroll-x::-webkit-scrollbar-button {
	width: 0;
	height: 0;
}

/* Firefox scrollbar */
.scroll-x {
	scrollbar-height: thin;
	scrollbar-color: #586C87 transparent;
}

.scroll-y {
	overflow: auto;
}

.scroll-y::-webkit-scrollbar {
	width: 0;
}

.scroll-y::-webkit-scrollbar-track {
	background-color: transparent;
}

.scroll-y::-webkit-scrollbar-thumb {
	border-radius: 0;
	background-color: transparent;
}

.scroll-y::-webkit-scrollbar-button {
	width: 0;
	height: 0;
}

/* Firefox scrollbar */
.scroll-y {
	scrollbar-width: thin;
	scrollbar-color: #586C87 transparent;
}

/*=================================================
	SIDEBAR
=================================================*/

.second-level>li:nth-last-child(1 of .list-active) {
	border-top-left-radius: 0.35rem;
	border-bottom-left-radius: 0.35rem;
	background: linear-gradient(to right, #44638B, #283546) !important;
}

.list-active .list-link {
	font-weight: 400;
	color: rgba(255, 255, 255, 1) !important;
	opacity: 0.9 !important;
}

.list-link-color {}

/*=================================================
	jquery - datepicker
=================================================*/
.ui-datepicker {
	z-index: 2000 !important;
}

select.ui-datepicker-month,
select.ui-datepicker-year {
	width: 100%;
	padding: .05rem .3rem .05rem .3rem;
	font-size: 0.913rem;
	font-weight: 400;
	line-height: 1.5;
	background-color: #fff;
	color: rgba(0, 0, 0, 0.8);
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.ui-datepicker-current {
	display: none !important;
}

.ui-datepicker-close {
	margin: 0.3rem 0 !important;
	padding: 0 0.3rem !important;
	font-size: 0.850rem !important;
}

/*=================================================
	induction
=================================================*/

.video-tab.active {
	background-color: #0d6efd !important;
	color: white !important;
}

.video-player {
	max-width: 800px;
	margin: 0 auto;
}

.attach-file-group.is-invalid {
	border: 0.1rem solid red;
	border-radius: 0.35rem;
}

.attach-file-group.is-invalid>button {
	border-top: none;
	border-bottom: none;
	border-left: none;
}

.attach-file-group.is-invalid>div {
	border-top: none;
	border-bottom: none;
	border-right: none;
}

.attach-file-btn {
	font-size: 0.875rem;
	border-color: rgba(0, 0, 0, 0.35);
	background-color: #e9ecf0;
}


/*=================================================
	ptw
=================================================*/

.working-area-type {
	width: 3rem;
}

.clickable:hover {
	cursor: pointer;
}


/*=================================================
	tp
=================================================*/

.manpower-warning {
	color: #ff0000;
	transition: 0.3s;
}

.team-select-btn {
	cursor: pointer;
}

.team-select-btn.selected-team {
	background-color: #e7f1ff !important;
	border-color: #0d6efd !important;
}


/*=================================================
	sortableJS
=================================================*/

.tracking-manpower-list .sortable-selected {
	background: #227CB0 !important;
}

.tracking-manpower-list .worker-name {
	color: white !important;
}

.tracking-section-list .sortable-selected {
	background: #c7f9cb !important;
}

.tracking-section-list .worker-name {
	color: black !important;
}


/*=================================================
	tabulator
=================================================*/

.bg-edit-cell {
	background-color: #ebf3ff;
}


/*=================================================
	select2
=================================================*/

/* Select2 드롭다운 컨테이너의 우선순위를 강제로 높임 */
.select2-container--open {
	z-index: 9999 !important;
}

/* select2 divider styling */
.select2-results__option[aria-disabled="true"].select2-divider-result {
	padding: 0 !important;
	border-bottom: 1px solid #dee2e6 !important;
	margin: 5px 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	cursor: default !important;
}

/*=================================================
	3day Lookahead
=================================================*/

.lookahead-left {
	width: calc(100% - 850px);
	height: 100%;
	background: #86A6CC;
}

.lookahead-right {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	width: 850px;
	height: 100%;
}

.lookahead-h40 {
	width: 100%;
	height: 40px;
}

.lookahead-h60 {
	width: 100%;
	height: calc(100vh - 40px);
}

.lookahead {
	display: table;
	width: 100%;
	height: 100%;
	border: 1px solid #555555;
}

.lookahead li {
	display: table-cell;
	width: calc(100% / 3);
	border-right: 1px solid #79A2CA;
	background: #286199;
}

.lookahead li:last-child {
	border-right: 0;
}

.lookahead-date li {
	height: 40px;
	font-size: 1.125rem;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
}

.lookahead-cont li {
	padding: 0.5rem;
	border-top: 0;
	background: #ffffff;
}

.lookahead-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	font-size: 0.8125rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.35);
	background: #eaeaea;
}

.lookahead-box a {
	display: block;
	width: 100%;
	color: #333333;
}

.lookahead-box a:hover,
.lookahead-box a:focus,
.lookahead-box a:active {
	color: #333333;
}


.lookahead-box-cont {
	width: 100%;
	padding: 0.5rem;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.vessel-marker-label-container {
	width: auto !important;
	height: auto !important;
}

.vessel-marker-label {
	position: relative;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid #333;
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
	color: #000;
}

.lookahead-detail-tooltip {
	background: #1d2939 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5) !important;
	color: #fff !important;
	padding: 8px 12px !important;
	border-radius: 4px !important;
}

.lookahead-detail-tooltip::before {
	border-top-color: #1d2939 !important;
}

.sortable-ghost {
	opacity: 0.4;
	background-color: #e9ecef !important;
}

.lookahead-box.highlight-box {
	border: 2px solid #0073E4 !important;
	background: #f0f7ff !important;
}

.highlight-marker {
	filter: drop-shadow(0 0 5px #0073E4) brightness(1.2);
	transform: scale(1.1);
	transition: transform 0.2s;
}

/* Layout Stability for Sortable */
.lookahead-cont {
	height: 100%;
	display: table;
	table-layout: fixed;
}

.lookahead-cont>li {
	height: 100%;
	vertical-align: top;
}

.sortable-list {
	min-height: 100%;
	width: 100%;
}

.map-top-controls {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 8px;
}

.map-date-filter-group {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	padding: 5px;
	border-radius: 50px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	display: flex;
	gap: 5px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.date-filter-btn {
	border: none;
	background: transparent;
	padding: 8px 18px;
	border-radius: 40px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #555;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	white-space: nowrap;
}

.date-filter-btn:hover {
	background: rgba(0, 115, 228, 0.1);
	color: #0073E4;
}

.date-filter-btn.active {
	background: #0073E4;
	color: white;
	box-shadow: 0 4px 10px rgba(0, 115, 228, 0.3);
}

.btn-register-lookahead-side {
	border: none;
	background: #0073E4;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 4px 15px rgba(0, 115, 228, 0.4);
}

.btn-register-lookahead-side:hover {
	background: #005bb5;
	transform: scale(1.1);
}

/*=================================================
	Tracking History Modal
=================================================*/
.history-table thead th {
	background-color: #1D2939 !important;
	color: #ffffff !important;
	font-weight: 600;
	font-size: 0.8125rem;
	padding: 12px 8px !important;
	border: none;
}

.history-table tbody td {
	font-size: 0.8125rem;
	padding: 12px 8px !important;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.history-table tbody tr:hover {
	background-color: rgba(254, 185, 0, 0.05) !important;
}

.history-table .type-badge {
	font-size: 0.6875rem;
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 600;
	margin-right: 4px;
	display: inline-block;
}

.badge-vessel {
	background-color: #e7f5ff;
	color: #1971c2;
}

.badge-port {
	background-color: #fff4e6;
	color: #d9480f;
}

.badge-wtg {
	background-color: #ebfbee;
	color: #2b8a3e;
}

.badge-default {
	background-color: #f1f3f5;
	color: #495057;
}


/*=================================================
	Setting Type
=================================================*/

.icon-option {
	cursor: pointer;
	padding: 10px;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: all 0.2s;
}

.icon-option:hover {
	background-color: #f8f9fa;
}

.icon-option.selected {
	border-color: #0d6efd;
	background-color: #e9ecef;
}

.icon-preview {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.modal-icon-preview {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.wtg-history-tooltip-container {
	background-color: rgba(29, 41, 57, 0.95) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	padding: 0;
	color: #fff;
}

.leaflet-tooltip-top.wtg-history-tooltip-container::before {
	border: 6px solid transparent !important;
	border-top-color: rgba(29, 41, 57, 0.95) !important;
}

.leaflet-tooltip-bottom.wtg-history-tooltip-container::before {
	border: 6px solid transparent !important;
	border-bottom-color: rgba(29, 41, 57, 0.95) !important;
}

.leaflet-tooltip-left.wtg-history-tooltip-container::before {
	border: 6px solid transparent !important;
	border-left-color: rgba(29, 41, 57, 0.95) !important;
}

.leaflet-tooltip-right.wtg-history-tooltip-container::before {
	border: 6px solid transparent !important;
	border-right-color: rgba(29, 41, 57, 0.95) !important;
}