@property --table-header-color {
	background-color: #f3f3f3;
}

.login-logo {width: 70%}

.menu-logo {display: block}
.menu-logo-link {display: block}
.menu-logo-link img {max-width: 100%}

.menu-toggle-btn-container {padding-top: 1rem;}
.menu-toggle-btn {
	background-color: #fff;
	box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

@media (min-width: 1200px) {
	.menu-toggle-btn-container {
		display: none;
	}
}

@media (max-width: 576px) {
	.search-bar-btn-m {
		margin-top: 1rem;
	}
}

.width-100 {width: 100%}

.text-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.bx-log-out-circle {padding-bottom: 0.6px;}

.pointer {cursor: pointer;}

.status-alert {
	vertical-align: top;
	font-size: 0.4rem;
	color: #fb1818;
}

.sort-filter-icon {
	padding: 0.2rem;
}

.sort-filter-icon.active {
    background-color: #e9e7e7;
    border-radius: 5rem;
}

.list-sort {
	cursor: pointer;
/* 	margin-left: 0.3rem; */
	font-size: 0.5rem;
}

.each-filter-area {
	height: 220px; 
	overflow-y: auto; 
	font-size: 10pt;
}

.all-filter-area {
	width: 300px;
	font-size: 10pt;
}

.filter-tab {
	font-size: 9pt !important;
}

.filter-txt-sm {
	font-size: 8pt;
}

.filter-txt-md {
	font-size: 10pt;
}

.filter-content {
	padding: 0; 
	height: 270px; 
	overflow-y: auto;
}

.filter-item-dept {
	width:auto;
}

.filter-content-search {
	padding: 0.532rem 1.25rem;
}

.tab-bd {
	border-bottom: 1px solid #e4e6e8;
}

.filter-tag-area {
	min-height: 2rem;
}

.ml-02 {margin-left: 0.2rem;}
.ml-05 {margin-left: 0.5rem;}
.mr-01 {margin-right: 0.1rem;}
.mr-03 {margin-right: 0.3rem;}
.mr-05 {margin-right: 0.5rem;}
.mr-08 {margin-right: 0.8rem;}
.mr-1 {margin-right: 1rem;}
.mr-12 {margin-right: 1.2rem;}
.mr-2 {margin-right: 2rem;}

.txt-r {text-align: right;}
.txt-c {text-align: center;}

.v-mid {vertical-align: middle;}

.flex {display: flex;}
.flex-center {display: flex; align-items: center;}
.flex-cc {display: flex; align-items: center; justify-content: center;}
.flex-btw {display: flex; justify-content: space-between;}
.flex-ev {display: flex; justify-content: space-evenly;}
.flex-st {display: flex; justify-content: flex-start;}

.bd-t0 {border-top: 0 !important;}

.p-0 {padding: 0;}
.pt-0 {padding-top: 0;}
.pb-015 {padding-bottom: 0.15rem !important;}
.plr-15 {padding: 0 1.5rem;}
.phr-04 {padding: 0 0.4rem;}
.pr-1 {padding-right: 1rem;}

.line-paragraph-resign p {
	margin-bottom: 0.6rem;
}

.btn-group .btn-secondary {border-right: 0.5px solid white; border-left: 0.5px solid white;}

.icon-pb {padding-bottom: 0.22rem;}

.signImg {vertical-align: middle;}

.sign-inner-text {position: relative; width: 150px; display: inline-block; text-align: center; margin-top: 10px}
.sign-inner-text2 {position: relative; width: 150px; display: inline-block; text-align: center;}
.sign-img-style {position: absolute; left: 0; top: -10px;}
.sign-img-style2 {position: absolute; left: 5px; top: -10px;}
.sign-img-style3 {position: absolute; left: 4px; top: -12px;}

.sign-stamp-text {position: relative; width: 68px; display: inline-block; text-align: center;}
.sign-stamp-img {position: absolute; left: 0; top: -12px;}

.grid-status {
	width: 19px;
	height: 3px;
	border: 1px solid #9799e7;
}

.grid-status-ongoing {
	border-right: 0;
}

.grid-status-prev {
	background-color: #c8c9ff;
}

.grid-status-now {
	background-color: #696cff;
}

.opct-0 {color: transparent;}
.gray {color: #697a8d !important;}

.card-body-form {flex: 1 1 auto; padding: 3rem 3rem;}

.search-bar {padding: 0 1rem;}
.search-bar-btn-m {margin-left: 1.1rem; padding-right: 0;}

.btn-div-mtb {margin-top: 1.6rem; margin-bottom: 0.3rem;}

.employeeForm .card-body {padding: 10px 1.5rem}
.employeeForm .input-group, #contractForm .input-group {padding: 0}

.line-paragraph span p {
	margin-bottom: 0;
}

.input-required {color: red}

.col-form-label {font-size: 13px; font-weight: bold; padding: calc(0.4375rem + 1px) 0}

.header_session_time .session_time {font-size: 16px; padding-left: 0.625rem;}
.header_session_time span.session_btn a {font-size: 16px; color: #ff6666}

.table thead th {font-size: 14px; text-align: center}
.table tbody th {font-size: 14px}

.list-table th, .list-table td {text-align: center}

.pagination {margin-bottom: 0}

.table tr.hover-row {cursor: pointer}

.table tr.hover-row:hover {background-color: #dbdbdb;}

.table-head {background-color: var(--bs-table-head);}

.paystub-excel thead {position: sticky; top: 0}
.paystub-excel thead tr {background-color: #ebeef0}
.paystub-excel tbody tr.bold-line {border-bottom: 2px solid #000}
.paystub-excel tbody tr.even-bg {background-color: #d7f5fc}
.paystub-excel tbody tr td.r-line {border-right: 1px solid #000}
.paystub-excel tbody tr td.l-line {border-left: 1px solid #000}
.paystub-excel tbody td.error {background-color: red; color: #fff}
.paystub-excel thead tr th.payBg {background-color: #e8fadf}

.paystub-excel-table-wrap {max-height: 415px}
.paystub-excel-modal-table-wrap {max-height: 585px}

.mainContainer div, td, th {color: #000 !important}
.paystub-title {font-size: 24px; font-weight: bold; text-align: center; color: #000}
.paystub-base-info {font-size: 16px}
.paystub-base-info:after {display: block; content: ""; clear: both}
.paystub-base-info span.l {float: left}
.paystub-base-info span.r {float: right}
.table-paystub-empinfo {border: 1px solid #000}
.paystub-pay-baseline {border: 1px solid #000}
.paystub-pay-baseline > :not(:first-child) {border: 1px solid #000}

.paystub-unit-msg {margin-top: 15px; font-size: 13px; text-align: right}
.paystub-footer-msg {margin-top: 30px; font-size: 16px; text-align: center}
.paystub-footer-logo {margin-top: 20px; text-align: center}

.paystub-pay-table thead tr th, .paystub-pay-table tbody tr td {padding: 3px 10px}
.paystub-pay-table thead tr {background-color: #dbdbdb; border: 1px solid #000}
.paystub-pay-table thead tr th {border-width: 0 1px; border-style: solid; border-color: #000; vertical-align: middle}
.paystub-pay-table tbody tr.tr-border-bottom {border-bottom: 1px solid #000}
.paystub-pay-table tbody tr td {border-width: 0 1px; border-style: solid; border-color: #000}
.paystub-pay-table tbody tr td.td-boder-top {border-top: 1px solid #000}
.paystub-pay-table tbody tr td.sum-td {background-color: #dbdbdb}

.paystub-pay-table tbody tr td.paystub-pay-table-blank {padding: 50px 0}

.paystub-top-btn {margin-bottom: 3rem;}
.paystub-top-btn:after {display: block; content: ""; clear: both}
.paystub-top-btn span.l {float: left}
.paystub-top-btn span.r {float: right}

.paystub-sign {position: relative; text-align: right}

.list-delete {width: 5rem;}

.list-table tbody tr td {padding: 10px}

@page {
    size: auto;
/*     margin: 20px; */
    margin: 60px;
}

@media print {
	
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust:exact;
	}
	
	*:not(table *, .signImg) {
		background-color: #fff !important;
	
	}
	
	.paystub-pay-baseline td:not(.text-end) {
		padding: 10px 0 !important;
	}
	
	.company-name-img {
		vertical-align: text-bottom !important;
	}
	
	body {
		zoom: 95%;
	}
}

#loading-wrap {width:100%; height:100%; position:relative;}
#loading-wrap:after {content:""; display:block; width:100%; height:100%; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0, 0, 0, 0.6); z-index: 1100;}
.loading-container {position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);  z-index: 2000; text-align: center;}
.load_txt {color:#fff; white-space: nowrap; font-size:18px; font-weight:700;}

.lds-roller {
	display: inline-block;
	width: 80px;
    height: 80px;
    margin-top:20px;
}
.lds-roller div {
	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}
.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
	animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
}
.lds-roller div:nth-child(2) {
	animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
}
.lds-roller div:nth-child(3) {
	animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}
.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}
.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}
.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}
.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}
.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}
@keyframes lds-roller {
	0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

.contract-title {
	font-size: 24px; font-weight: bold; text-align: center; color: #000
}

.contract-pane-title {
	padding: calc(0.4375rem + 1px) 0;
	margin-bottom: 0;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.53;
	text-transform: uppercase;
	letter-spacing: inherit;
}

.label-text {
	padding: calc(0.4375rem + 1px) 0;
	line-height: 1.53;
}

.row-border-bottom {
	border-bottom: 2px solid #d9dee3;
}

.contractForm .input-group {padding: 0}

.contract-step {
	display: flex;
	padding-left: 0;
}

.contract-step li {
	display: block;
	position: relative;
	flex: 1;
	height: 40px;
	font-weight: 700;
	padding: 0.5rem 1.25rem;
	color: #8e9baa;
	text-align: center;
	background-color: #dbdbdb;
}

.contract-step li.active {
	background-color: #696cff !important;
	color: #fff;
}

.contract-step li.invisible {
	display: none;
}

.contract-step li.visible {
	display: block;
}

.contract-preview {
	display: none;
}

.contract-modal {
	min-width: calc(21cm * 1.1);
}

.contract-container {
	width: calc(21cm * 1.1);
	margin: 50px auto;
	padding: 40px;
	
	border: 1px solid #dbdbdb;
	border-radius: 8px;
}

.contract-body {
    line-height: 1.53;
    color: #000;
/*     background-color: #fff; */
}

.contract-body .main-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center; 
    color: #000;
}

.contract-body .logo-image {
    text-align: right !important;
}

.contract-body .line-paragraph {
    margin-left: 10px;
    margin-bottom: 10px;
    text-indent: -10px;
}

.contract-body .line-paragraph-resign {
    margin-left: 15px;
    margin-bottom: 5px;
    text-indent: -14px;
}

.contract-body .line-indent-paragraph {
    margin-left: 10px;
}

.contract-body .center-paragraph {
    text-align: center;
}

.contract-body .tab-paragraph {
    margin-left: 24px;
    text-indent: 0px;
}

.contract-body .underline-text {
    text-decoration: underline;
}

.contract-body .bold-text {
    font-weight: bold;
}

.contract-body .highlight-text,
.highlight-text {
    text-decoration: underline;
    font-weight: bold;
}

.contract-body .gray-text {
    color: #333;
}

.contract-body .annotation-text {
    font-size: 14px;
}

.contract-body .sign-area {
    display: flex;
    font-size: 15px;
}

.contract-body .sign-tab {
    width: 400px;
}

.contract-body .tab-title {
    font-weight: bold;
}

.contract-body .tab-content {
    padding: 10px;
}

.contract-body .pay-table {
    border: 2px solid #808080;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.contract-body .pay-table td {
/*     border: 1px dotted #808080; */
    text-align: center;
}

.contract-body .pay-table th {
    border: 1px solid #808080;
    font-weight: 400;
    text-align: center;
}

.contract-body .pay-table .border-right-solid {
    border-right: 1px solid #808080 !important;
}

.contract-body .pay-table .border-right-dotted {
    border-right: 1px dotted #808080 !important;
}

.contract-body .pay-table .border-left-dotted {
    border-left: 1px dotted #808080 !important;
}

.contract-body .pay-table .border-bottom-dotted {
    border-bottom: 1px dotted #808080 !important;
}

.contract-body .pay-table .border-bottom-solid {
    border-bottom: 1px solid #808080 !important;
}

.contract-body .pay-table .col-border-left-solid {
    border-left: 1px solid #808080;
}

.contract-body .pay-table .td-text-right {
    text-align: right !important;
    padding-right: 10px;
}

.contract-body .pay-table .tr-border-top {
    border-top: 2px solid #808080 !important;
}

.contract-container .oath {
    font-size: 14.2px;
}


.contract-container .oath .large-text {
    font-size: 15px;
}

.contract-container .company-name-img {
/*     transform: translateY(-26%); */
}

#editor {
	padding-left: 0;
}

.contract-oath-sign {
	width: 125px;
	height: 50px;
	padding-bottom: 6px;
	border-bottom: 1px solid black;
	margin-left: 3px;
}

.contract-span-date {display: inline-block;}
.contract-ml-4 {margin-left: 4px;}
.contract-ml-9 {margin-left: 9px;}
.contract-ml-16 {margin-left: 16px;}
.contract-ml-25 {margin-left: 25px;}
.contract-ph-13 {padding: 0 13px;}
.contract-underline {padding: 0 13px; border-bottom: 1px solid black; font-weight: bold;}

.line-paragraph > p {
	margin-bottom: 0.7rem;
}

#resignPaper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#resignPaperList {
	min-height: 2.5rem;
	width:100%;
	border: 1px solid #d9dee3;
	border-top: 0;
	border-radius: 0.375rem; 
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

#resignPaperTable {
	width: 100%;
	table-layout: fixed;
	
	.paper-title {
		overflow: hidden;
		white-space: nowrap;
	}
}

#paperAlert {
	color: red;
	font-size: 10pt;
}

#menu-customizer {
    font-family: "Open Sans", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-size: inherit !important;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 99999999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 400px;
    -webkit-box-shadow: 0px .3125rem 1.375rem 0px rgba(34, 48, 62, .18);
    box-shadow: 0px .3125rem 1.375rem 0px rgba(34, 48, 62, .18);
    -webkit-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
    -webkit-transform: translateX(420px);
    -ms-transform: translateX(420px);
    transform: translateX(420px);
}

.menu-customizer-open-btn {
    position: absolute;
    top: 180px;
    left: 0;
    z-index: -1;
    display: block;
    width: 38px;
    height: 38px;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
    background: var(--bs-primary);
    box-shadow: 0px .125rem .25rem 0px rgba(105, 108, 255, .4);
    color: #fff !important;
    text-align: center;
    font-size: 18px !important;
    line-height: 38px;
    opacity: 1;
    -webkit-transition: all .1s linear .2s;
    -o-transition: all .1s linear .2s;
    transition: all .1s linear .2s;
    -webkit-transform: translateX(-58px);
    -ms-transform: translateX(-58px);
    transform: translateX(-58px);
}

#menu-customizer .menu-customizer-open-btn::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background-size: 100% 100%;
    position: absolute;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABClJREFUaEPtmY1RFEEQhbsjUCIQIhAiUCNQIxAiECIQIxAiECIAIpAMhAiECIQI2vquZqnZvp6fhb3SK5mqq6Ju92b69bzXf6is+dI1t1+eAfztG5z1BsxsU0S+ici2iPB3vm5E5EpEDlSVv2dZswFIxv8UkZcNy+5EZGcuEHMCOBeR951uvVDVD53vVl+bE8DvDu8Pxtyo6ta/BsByg1R15Bwzqz5/LJgn34CZwfnPInI4BUB6/1hV0cSjVxcAM4PbcBZjL0XklIPN7Is3fLCkdQPpPYw/VNXj5IhPIvJWRIhSl6p60ULWBGBm30Vk123EwRxCuIzWkkjNrCZywith10ewE1Xdq4GoAjCz/RTXW44Ynt+LyBEfT43kYfbj86J3w5Q32DNcRQDpwF+dkQXDMey8xem0L3TEqB4g3PZWad8agBMRgZPeu96D1/C2Zbh3X0p80Op1xxloztN48bMQQNoc7+eLEuAoPSPiIDY4Ooo+E6ixeNXM+D3GERz2U3CIqMstLJUgJQDe+7eq6mub0NYEkLAKwEHkiBQDCZtddZCZ8d6r7JDwFkoARklHRPZUFVDVZWbwGuNrC4EfdOzFrRABh3Wnqhv+d70AEBLGFROPmeHlnM81G69UdSd6IUuM0GgUVn1uqWmg5EmMfBeEyB7Pe3txBkY+rGT8j0J+WXq/BgDkUCaqLgEAnwcRog0veMIqFAAwCy2wnw+bI2GaGboBgF9k5N0o0rUSGUb4eO0BeO9j/GYhkSHMHMTIqwGARX6p6a+nlPBl8kZuXMD9j6pKfF9aZuaFOdJCEL5D4eYb9wCYVCanrBmGyii/tIq+SLj/HQBCaM5bLzwfPqdQ6FpVHyra4IbuVbXaY7dETC2ESPNNWiIOi69CcdgSMXsh4tNSUiklMgwmC0aNd08Y5WAES6HHehM4gu97wyhBgWpgqXsrASglprDy7CwhehMZOSbK6JMSma+Fio1KltCmlBIj7gfZOGx8ppQSXrhzFnOhJ/31BDkjFHRvOd09x0mRBA9SFgxUgHpQg0q0t5ymPMlL+EnldFTfDA0NAmf+OTQ0X0sRouf7NNkYGhrOYNrxtIaGg83MNzVDSe3LXLhP7O/yrCsCz1zlWTpjWkuZAOBpX3yVnLqI1yLCOKU6qMrmP7SSrUEw54XF4WBIK5FxCMOr3lVsfGqNSmPzBXUnJTIX1jyVBq9wO6UObOpgC5GjO98vFKnTdQMZXxEsWZlDiCZMIxAbNxQOqlpVZtobejBaZNoBnRDzMFpkxvTQOD36BlrcySZuI6p1ACB6LU3wWuf5581+oHfD1vi89bz3nFUC8Nm7ZlP3nKkFbM4bWPt/MSFwklprYItwt6cmvpWJ2IVcQBCz6bLysSCv3SaANCiTsnaNRrNRqMXVVT1/BrAqz/buu/Y38Ad3KC5PARej0QAAAABJRU5ErkJggg==);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#template-customizer {
    font-family: "Open Sans", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-size: inherit !important;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 99999999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 400px;
    -webkit-box-shadow: 0px .3125rem 1.375rem 0px rgba(34, 48, 62, .18);
    box-shadow: 0px .3125rem 1.375rem 0px rgba(34, 48, 62, .18);
    -webkit-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
    -webkit-transform: translateX(420px);
    -ms-transform: translateX(420px);
    transform: translateX(420px);
}

.template-customizer-open {
	-webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

.bg-card {
    background-color: #fff;
}

#template-customizer .template-customizer-open-btn {
    position: absolute;
    top: 180px;
    left: 0;
    z-index: -1;
    display: block;
    width: 38px;
    height: 38px;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
    background: var(--bs-primary);
    box-shadow: 0px .125rem .25rem 0px rgba(105, 108, 255, .4);
    color: #fff !important;
    text-align: center;
    font-size: 18px !important;
    line-height: 38px;
    opacity: 1;
    -webkit-transition: all .1s linear .2s;
    -o-transition: all .1s linear .2s;
    transition: all .1s linear .2s;
    -webkit-transform: translateX(-58px);
    -ms-transform: translateX(-58px);
    transform: translateX(-58px);
}

#template-customizer .template-customizer-open-btn::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background-size: 100% 100%;
    position: absolute;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABClJREFUaEPtmY1RFEEQhbsjUCIQIhAiUCNQIxAiECIQIxAiECIAIpAMhAiECIQI2vquZqnZvp6fhb3SK5mqq6Ju92b69bzXf6is+dI1t1+eAfztG5z1BsxsU0S+ici2iPB3vm5E5EpEDlSVv2dZswFIxv8UkZcNy+5EZGcuEHMCOBeR951uvVDVD53vVl+bE8DvDu8Pxtyo6ta/BsByg1R15Bwzqz5/LJgn34CZwfnPInI4BUB6/1hV0cSjVxcAM4PbcBZjL0XklIPN7Is3fLCkdQPpPYw/VNXj5IhPIvJWRIhSl6p60ULWBGBm30Vk123EwRxCuIzWkkjNrCZywith10ewE1Xdq4GoAjCz/RTXW44Ynt+LyBEfT43kYfbj86J3w5Q32DNcRQDpwF+dkQXDMey8xem0L3TEqB4g3PZWad8agBMRgZPeu96D1/C2Zbh3X0p80Op1xxloztN48bMQQNoc7+eLEuAoPSPiIDY4Ooo+E6ixeNXM+D3GERz2U3CIqMstLJUgJQDe+7eq6mub0NYEkLAKwEHkiBQDCZtddZCZ8d6r7JDwFkoARklHRPZUFVDVZWbwGuNrC4EfdOzFrRABh3Wnqhv+d70AEBLGFROPmeHlnM81G69UdSd6IUuM0GgUVn1uqWmg5EmMfBeEyB7Pe3txBkY+rGT8j0J+WXq/BgDkUCaqLgEAnwcRog0veMIqFAAwCy2wnw+bI2GaGboBgF9k5N0o0rUSGUb4eO0BeO9j/GYhkSHMHMTIqwGARX6p6a+nlPBl8kZuXMD9j6pKfF9aZuaFOdJCEL5D4eYb9wCYVCanrBmGyii/tIq+SLj/HQBCaM5bLzwfPqdQ6FpVHyra4IbuVbXaY7dETC2ESPNNWiIOi69CcdgSMXsh4tNSUiklMgwmC0aNd08Y5WAES6HHehM4gu97wyhBgWpgqXsrASglprDy7CwhehMZOSbK6JMSma+Fio1KltCmlBIj7gfZOGx8ppQSXrhzFnOhJ/31BDkjFHRvOd09x0mRBA9SFgxUgHpQg0q0t5ymPMlL+EnldFTfDA0NAmf+OTQ0X0sRouf7NNkYGhrOYNrxtIaGg83MNzVDSe3LXLhP7O/yrCsCz1zlWTpjWkuZAOBpX3yVnLqI1yLCOKU6qMrmP7SSrUEw54XF4WBIK5FxCMOr3lVsfGqNSmPzBXUnJTIX1jyVBq9wO6UObOpgC5GjO98vFKnTdQMZXxEsWZlDiCZMIxAbNxQOqlpVZtobejBaZNoBnRDzMFpkxvTQOD36BlrcySZuI6p1ACB6LU3wWuf5581+oHfD1vi89bz3nFUC8Nm7ZlP3nKkFbM4bWPt/MSFwklprYItwt6cmvpWJ2IVcQBCz6bLysSCv3SaANCiTsnaNRrNRqMXVVT1/BrAqz/buu/Y38Ad3KC5PARej0QAAAABJRU5ErkJggg==);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#template-customizer.template-customizer-open .template-customizer-open-btn {
    opacity: 0;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

.template-customizer-inner {
    position: relative;
    overflow: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    opacity: 1;
    -webkit-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
}

.eval-menu {
	display: flex;
    justify-content: flex-start; /* 기본적으로 왼쪽 정렬 */
    align-items: center; /* 세로 정렬 */
    list-style-type: none; /* 기본 리스트 스타일 제거 */
    padding: 0; /* 기본 패딩 제거 */
    margin: 0; /* 기본 마진 제거 */
    width: 100%; /* 전체 너비 설정 */
}

.eval-menu-btn-container {
	margin-left: auto;
}

.nav-itme-eval {
	margin-top: 1rem;
}

.eval-panel {
	border-radius: 0.5rem;
	border: 2px solid #e7e7e7;
	margin-bottom: 1rem;
	padding: 1rem 0;
}

.eval-item {
	margin: 0.3rem 1.5rem;
}

.eval-template-label {
	margin-left: 1rem;
	height: 100%;
	width: 80%;
}

.eval-grade {
	border: 2px solid #e7e7e7;
	border-radius: 0.5rem;
	padding: 0.5rem;
	text-align: center;
	justify-content: center;
}

.eval-grade-nm {
	font-size: 25pt;
}

.progress-icon {
	font-size: 3rem;
	border: 7px solid;
	border-radius: 50%;
	padding: 0.8rem;
	color: #e2e2e3;
}

.progress-icon.active {
	color: #696cff;
}

.progress-text.active {
	color: #696cff;
	font-weight: bold;	
}

.progress-line.active {
	background-color: #696cff;
}

.progress-line {
	height: 7px;
	width: 5rem;
	background-color: #e2e2e3;
}

#ui-datepicker-div {
    z-index: 1091 !important; /* Bootstrap Modal의 Z-Index(1090)보다 더 높은 우선 순위를 가지도록 함 */
}

.checkbox-column {
    width: 50px;
}

.selected-row {
	background-color: #f0f8ff !important;
	color: #000 !important;
}

.form-range::-webkit-slider-runnable-track {
	width: 100%;
	height: 0.5rem;
	cursor: pointer;
	background: var(--webkit-slider-runnable-track-background, #e9ecef);
	border-radius: 1rem;
}

.range-slider {
    height: 45px;
    position: relative;
}

.range-slider .form-range {
    pointer-events: none;
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    background: transparent;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    margin-top: -6px;
    position: relative;
    z-index: 5;
}

.form-range::-moz-range-thumb {
    pointer-events: auto;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    margin-top: -6px;
    position: relative;
    z-index: 5;
}

.form-range::-webkit-slider-runnable-track {
    height: 4px;
/*     background: transparent; */
}

.grade-range::-webkit-slider-runnable-track {
/*     height: 4px; */
    background: transparent;
}

.form-range::-moz-range-track {
    height: 4px;
    background: transparent;
}

#minRange {
    z-index: 2;
}

#maxRange {
    z-index: 1;
}

.range-track-bg {
    position: absolute;
    top: 35%;
    height: 4px;
    width: 100%;
    transform: translateY(-50%);
    background: #e9ecef;
    z-index: 0;
}

.range-track {
    position: absolute;
    top: 35%;
    height: 4px;
    transform: translateY(-50%);
    background: #0d6efd;
    z-index: 0;
}

.range-slider-container {
    padding: 10px;
    border-radius: 8px;
    background: #f8f9fa;
}

.tick-marks {
    position: absolute;
    width: 100%;
    height: 20px;
    top: 45%;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
}

.tick {
    position: relative;
    width: 1px;
    height: 8px;
    background-color: #adb5bd;
}

.tick-label {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #6c757d;
}

#evaluationTabsContent {
	padding: 0;
}

.eval-progress-bar:first-child {
	border-top-left-radius: 0.3rem !important;
	border-bottom-left-radius: 0.3rem !important;
}

.eval-progress-bar:last-child {
	border-top-right-radius: 0.3rem !important;
	border-bottom-right-radius: 0.3rem !important;
}

.eval-target.active {
	background-color: rgba(105, 108, 255, 0.16);
}