.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;
	}
}

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

.pointer {cursor: pointer;}

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

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

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

.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;}

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

.p-0 {padding: 0;}
.pt-0 {padding-top: 0;}
.pb-015 {padding-bottom: 0.15rem !important;}
.phr-04 {padding: 0 0.4rem;}

.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;}

.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;}

.paystub-excel thead tr {background-color: #e8e8e8}
.paystub-excel tbody tr.bold-line {border-bottom: 2px solid #000}
.paystub-excel tbody td.error {background-color: red; color: #fff}

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

.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}

.paystub-list-delete {width: 5rem;}

@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-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;
}

/* .progress-icon-container { */
/* 	border: 5px solid; */
/* 	border-radius: 50%; */
/* 	padding: 0.8rem; */
/* } */

.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;
}

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

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