@charset "UTF-8";
:root {
	/* viewport */
	--header-height: 96px;
	--view-height: calc(var(--vh, 1vh) * 100);

	/* thema color */
	--thema-primary: #052b63;
	--thema-font-primary: #052b63;
	--thema-font-color: #1A1A1A;

	--red: #ff4d4f;
	--green: #2bc780;
	--blue: #ff4d4f;
	--yellow: #ffbf00;
	--gray: rgb(102, 102, 102);
	--gray-100: rgb(231, 231, 231);
	--disabled-color: #9B9B9B;
	--disabled-bg: #B0B0B0;
	--placeholder: rgb(147, 147, 147);

	--thema-hover: color-mix(in srgb, var(--thema-primary) 10%, transparent);
	
	/* border */
	--border-color: #d3d3d3;
	--border-solid: 1px solid var(--border-color);
	--border-focus: 1px solid transparent;
	--border-radius: 4px;
	--border-shdow: 0px 0px 1px 3px rgb(49 112 255 / 80%);
	--box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px 0px;

	/* transition */
	--transition-duration-300: 300ms;
	--transition-duration-500: 500ms;
}

/* init */
	* { font-size: inherit; letter-spacing: -0.02em; }
	body { color: var(--thema-font-color); background: color-mix(in srgb, var(--thema-primary) 4%, transparent); min-width: 800px; }
	/* input, select ,textarea */
	a { color: currentColor; }
	a:not(.btn):active { opacity: 0.8; }
	input, select, textarea, button { border: var(--border-solid); border-radius: var(--border-radius); padding: 11px 14px; background: #fff; }
	input, textarea {  }
	input::placeholder, textarea::placeholder { color: var(--placeholder); }
	select { padding: 10px 14px; }
	input:not([type="checkbox"]):focus, select:focus, textarea:focus,button:focus { border-color: var(--thema-primary); }
	button:active { transform: scale(0.98); -webkit-transform: scale(0.98); }
	input[type="checkbox"]:focus { box-shadow: var(--border-shdow); -webkit-box-shadow: var(--border-shdow); border-radius: 50%; }
	input[type="radio"]:focus { box-shadow: var(--border-shdow); -webkit-box-shadow: var(--border-shdow); border-radius: 20px; }
	input[type="date"],
	input[name="datepicker"] { background-position: right var(--field-padding-side) center; background-repeat: no-repeat; background-image: var(--appearance-date); background-size: 1em; }
	input[type="search"]::-webkit-search-cancel-button, 
	input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; background-image: var(--appearance-clear); width: 24px; height: 24px; cursor: pointer; } 

/* chekcbox */
	/* checkbox */
	.checkbox,
	.checkbox * { box-sizing: border-box; }
	.checkbox { position: relative; display: inline-block; font-size: 12px; }
	.checkbox input[type="checkbox"],
	.checkbox input[type="radio"] { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
	.checkbox input[type="checkbox"] + span,
	.checkbox input[type="radio"] + span { display: flex; justify-content: center; align-items: center; color: #4B4B4B; gap: 0.5em; line-height: 1em; }
	.checkbox input[type="checkbox"] + span:before,
	.checkbox input[type="radio"] + span:before { content: "✔"; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border: var(--border-solid); border-radius: 4px; background-color: #fff; color: #fff; transition: all 0.3s; -webkit-transition: all 0.3s; }
	.checkbox input[type="checkbox"]:checked + span:before,
	.checkbox input[type="radio"]:checked + span:before { background-color: var(--thema-primary); border-color: var(--thema-primary); }

/* daterangepicker custom */
	.daterangepicker { z-index: 9999 !important; }
	.daterangepicker td.active, 
	.daterangepicker td.active:hover { background-color: var(--thema-primary) !important; }
	.daterangepicker td.in-range { background-color: var(--thema-hover); }
	.daterangepicker td.off,
	.daterangepicker td.off.in-range, 
	.daterangepicker td.off.start-date, 
	.daterangepicker td.off.end-date { background-color: transparent !important; }
	.daterangepicker.show-calendar .drp-buttons { display: flex !important; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
	.daterangepicker .drp-buttons .btn { height: 32px; }


/* button */
	.btn_area { display: flex; justify-content: center; align-items: center; }
	.btn { transition-property: all; transition-duration: var(--transition-duration-300); color: var(--gray); cursor: pointer; }
	.btn { display: flex; justify-content: center; align-items: center; gap: 2px; padding: 0 12px; height: 40px; line-height: 1em; font-size: 14px; font-weight: 500; letter-spacing: -0.03em; }
	.btn-primary { background: var(--thema-primary); border-color: var(--thema-primary); color: #fff; }

/* asset */
	.bold { font-weight: 700; }
	.medium { font-weight: 500; }
	.primary { color: var(--thema-font-primary); }
	.bg_red { background: var(--red) !important; }
	.bg_blue { background: var(--blue) !important; }
	.bg_green { background: var(--green) !important; }
	.bg_gray { background: var(--gray) !important; }
	.bg_yellow { background: var(--yellow) !important; }

/* frame */
	/* view height */
	.vh-container { display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; width: 100%; min-height: var(--view-height);  }
	.vh-header-wrap,
	.vh-footer-wrap { flex-shrink: 0; }
	.vh-header-wrap { position: sticky; top: 0; z-index: 100; }
	.vh-content-wrap { flex-grow: 1; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; }
	.vh-content-wrap > .vw-inner { flex-grow: 1; }
	.vw-inner { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 20px; }
	.vh-aisde-wrap { flex-shrink: 0; width: 240px; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px 0px; }
	.content-header { padding: 35px 40px; border-bottom: var(--border-solid); }
	.content-header h1 { font-size: 20px; font-weight: 500; margin-bottom: 12px; }
	.content-header h2 { font-size: 14px; font-weight: 300; }
	.content { padding: 35px 40px; }

	.vh-header-wrap { position: static; top: 0; z-index: 1000; display: flex; justify-content: flex-start; align-items: center; padding: 0 40px; height: 70px; background: #fff; border-bottom: var(--border-solid); }
	.vh-header-wrap .logo { flex-shrink: 0; text-align: center; font-size: 21px; font-weight: 700; color: var(--thema-font-primary); }
	.vh-header-wrap .logo img { vertical-align: top; height: 33px; }
	.vh-header-wrap .nav-bottom { margin: 0; padding: 0; }
	.vh-header-wrap .nav-bottom { display: flex; justify-content: flex-start; align-items: center; }
	.vh-header-wrap .nav-signout { padding: 0; padding-left: 24px; margin: 0; margin-left: 24px; border: 0; border-left: var(--border-solid); }

	.header-nav-menu { flex-grow: 1; display: flex; justify-content: center; align-items: center; gap: 10px; }
	.header-nav-menu a  { font-size: 18px; padding: 12px; }
	.header-nav-menu .active a { color: var(--thema-font-primary); font-weight: 700; }

/* mobile menu */
	.vh-mobile-header { flex-shrink: 0; position: sticky; top: 0; z-index: 1000; width: 100%; height: 54px; padding: 0 16px; background: #fff; border-bottom: var(--border-solid); display: flex; justify-content: space-between; align-items: center; display: none; }
	.vh-mobile-header button { border: 0; padding: 0; font-size: 24px; }
	.vh-mobile-header .logo { flex-grow: 1; text-align: center; margin-right: 24px; font-size: 21px; font-weight: 700; color: var(--thema-font-primary); }
	.vh-mobile-header .logo img { height: 21px; }

	.vh-mobile-menu,
	.vh-mobile-menu .nav-wrap { transition: all 0.3s; -webkit-transition: all 0.3s; }
	.vh-mobile-menu { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; opacity: 0; visibility: hidden; overflow: hidden; }
	.vh-mobile-menu .nav-wrap { position: absolute; top: 0; left: -240px; width: 240px; height: 100%; opacity: 0; visibility: hidden; }
	.vh-mobile-menu.open,
	.vh-mobile-menu.open .nav-wrap { visibility: visible; opacity: 1; left: 0; }

/* aside */
	.vh-aisde-wrap { overflow: hidden; background: #fff; }
	.vh-aisde-wrap .logo { flex-shrink: 0; padding: 24px; text-align: center; font-size: 30px; font-weight: 700; color: var(--thema-font-primary); }
	.vh-aisde-wrap .logo img { vertical-align: top; height: 33px; }
	.nav-wrap { flex-grow: 1; overflow: hidden; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; background: #fff; }
	.nav-menu { flex-grow: 1; margin-top: 30px; overflow: auto; }
	.nav-menu a { display: flex; justify-content: flex-start; align-items: center; font-size: 18px; padding: 12px 24px; color: var(--gray); }
	.nav-menu a,
	.nav-menu a span { transition: all 0.3s; -webkit-transition: all 0.3s; }
	.nav-menu :not(.active) a:hover { background: var(--thema-hover); }
	.nav-menu :not(.active) a:hover span { margin-left: 10px; }
	.nav-menu .active a { color: var(--thema-font-primary); font-weight: 700; }
	.nav-bottom { flex-shrink: 0;  padding: 0 24px; margin-top: 24px; }
	.nav-profile { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
	.nav-profile-thumb { flex-shrink: 0; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 5px; background: var(--thema-primary); color: #fff; }
	.nav-profile span { font-size: 12px; line-height: 1.5; color: var(--gray); }
	.nav-profile p { font-size: 14px; line-height: 1.5; color: var(--thema-font-color); }
	.nav-signout { padding: 24px 0; margin-top: 24px; border-top: 1px solid var(--gray-100); }
	.nav-signout a { display: block; text-align: center; font-size: 14px; padding: 6px; border-radius: 4px; }
	.nav-signout a:hover { background: var(--thema-hover); }

/* sign */
	.signin-container { width: 100%; height: var(--view-height); display: flex; justify-content: center; align-items: center; }
	.signin-form { width: 100%; max-width: 360px; padding: 50px 30px; border-radius: 20px; }
	.signin-form .logo { text-align: center; margin-bottom: 40px; font-size: 30px; font-weight: 700; color: var(--thema-font-primary); }
	.signin-form .logo img { height: 33px; }

	.form-submit-btn { margin-top: 40px; width: 100%; height: 42px; text-align: center; border: 0; background: var(--thema-primary); color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--box-shadow); transition: all 0.3s; -webkit-transition: all 0.3s; }
	.form-submit-btn:active { box-shadow: 0px 0px 0px transparent; }
	.form-auth { margin-top: 20px; }
	.form-field { display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; gap: 6px; }
	.form-field + .form-field { margin-top: 16px; }
	.field-lable { font-size: 12px; font-weight: 500; color: var(--gray); }
	.field-input { position: relative; font-size: 12px; }
	.field-input input { width: 100%; height: 40px; padding: 14px; }
	.field-input textarea { width: 100%; height: 90px; }
	.field-required { position: absolute; right: 0; top: 0; color: red; width: 30px; line-height: 40px; text-align: center; }
	.field-required ~ input { padding-right: 30px; }
	.field-remove { position: absolute; right: 0; top: 0; width: 30px; height: 100%; border: 0; font-size: 16px; padding: 0; background: transparent; opacity: 0.8; }
	.field-remove ~ input { padding-right: 30px; }
	.field-search { position: relative; }
	.field-search input { width: 100%; padding-right: 40px; }
	.field-search button { position: absolute; right: 0; top: 0; width: 40px; height: 100%; border: 0; padding: 0; font-size: 18px; background: transparent; }

/* */
	.board-area { background: #fff; border-radius: 8px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.07) 4px 4px 15px 0px; padding: 30px; }
	.board-row { display: flex; justify-content: flex-start; align-items: stretch; gap: 12px; }
	.board-row + .board-row  { margin-top: 24px; }

	.board-cards { display: flex; justify-content: flex-start; align-items: stretch; gap: 10px 20px; }
	.board-card { width: 200px; padding: 15px; border-radius: 8px; background: rgb(255, 255, 255); color: var(--gray); transition: all 0.3s; -webkit-transition: all 0.3s; border: var(--border-solid); }
	.board-card:hover { transform: translateY(-3px); -webkit-transform: translateY(-3px); }
	.board-card-title { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 16px; }
	.board-card-title strong { display: flex; justify-content: flex-start; align-items: center; gap: 5px; font-size: 14px; font-weight: 700;  }
	.board-card-title .icon { width: 24px; height: 24px; font-size: 12px; background: #eee; border-radius: 5px; }
	.board-card-title span { font-size: 12px; }
	.board-card-p { font-size: 16px; font-weight: 700; }


	.filter-area { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px; margin: 30px 0; }
	.filter-search { flex-shrink: 0; max-width: 100%; margin-right: auto; display: flex; justify-content: flex-start; align-items: center; gap: 12px; width: 350px; }
	.filter-search span { flex-shrink: 0; }
	.filter-search .field-search { flex-grow: 1; }
	.filter-datetime { max-width: 100%; }
	.filter-datetime input { width: 100%; }
	.filter-control { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
	.filter-index { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
	.filter-index span { color: var(--gray); }
	.filter-index .field-search { width: 100px; }

	.table-area { }
	.table-area table { table-layout: fixed; width: 100%; border-collapse: collapse; border-radius: 8px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); overflow: hidden; }
	.table-area thead { background: var(--thema-primary); }
	.table-area tr { border-bottom: 1px solid #052b632e; }
	.table-area th,
	.table-area td { text-align: center; font-size: 12px; height: 34px; }
	.table-area th { color: #fff; font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; cursor: pointer; }
	.table-area td { background: #fff; }
	.table-area .els { padding-right: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }

	.sorttable_nosort { cursor: default !important; }
	.sortable th:not(.sorttable_nosort):after { content: ""; display: inline-block; width: 10px; height: 10px; background-repeat: no-repeat; background-position: center; opacity: 0.5; background-image: url(../img/icon/icon-sort.svg); }
	.sortable th.sorttable_sorted:after,
	.sortable th.sorttable_sorted_reverse:after { opacity: 1; }
	.sortable th.sorttable_sorted:after { background-image: url(../img/icon/icon-sort-up.svg); }
	.sortable th.sorttable_sorted_reverse:after { background-image: url(../img/icon/icon-sort-down.svg); }
	#sorttable_sortfwdind,
	#sorttable_sortrevind { display: none; }


	.table-nav { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 24px 0; gap: 24px; }
	.table-nav-row { position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
	.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; height: 42px; }
	.pagination a { display: block; padding: 6px; }
	.pagination-index a { padding: 5px 8px; font-size: 16px; font-weight: 700; border-radius: 4px; }
	.pagination-index.active a { background: var(--thema-primary); color: #fff; }

    .clickable { cursor: pointer; }
	
@media(max-width: 1400px){
	.table-nav { flex-direction: column; }
	.table-nav-row { position: relative; }
}

@media(max-width: 768px){
	body { min-width: 100%; }
	.vh-container { flex-direction: column; }
	.vh-header-wrap,
	.vh-aisde-wrap { display: none; }
	.vh-mobile-header { display: flex; }
	.content { padding: 24px 16px; }
	.content-header { padding: 24px; }

	.nav-menu { margin-top: 52px; }
	.nav-menu a { padding: 12px 16px; }
	.nav-bottom { padding: 0 16px; }

	.signin-form { max-width: 100%; box-shadow: none; }

	.filter-area { flex-direction: column; align-items: flex-start; }

	.table-area { overflow: auto; border-radius: 8px; }
	.table-area::-webkit-scrollbar { width: 10px; height: 10px; }
	.table-area::-webkit-scrollbar-thumb { background: var(--thema-hover); }
	.table-area table { width: auto; min-width: 840px; }
	.table-area .els { max-width: 240px; }
	.table-area td { padding: 0 4px; }

	.board-area { padding: 20px; }
	.board-row { flex-wrap: wrap; gap: 15px; }
	.board-cards { flex-wrap: wrap; gap: 10px; }
	.board-card { width: 100%; min-width: 46%; }
}