:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #707070;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #1C9C29;
  --bs-primary-hover: #158a20;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #34A7E0;
  --bs-warning: #D1A525;
  --bs-danger: #D17575;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 28, 156, 41;
  --bs-primary-hover-rgb: 21, 138, 32;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 52, 167, 224;
  --bs-warning-rgb: 209, 165, 37;
  --bs-danger-rgb: 209, 117, 117;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: 'Inter', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.25;
  --bs-body-color: #8C8C8C;
  --bs-body-bg: #F7F7F9;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #D9D9D9;
  --bs-border-color-translucent: rgb(217, 217, 217);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #1C9C29;
  --bs-link-hover-color: #158a20;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

html{ font-size: 16px;}

a,
.page-link{ color: var(--bs-body-color); text-decoration: none; transition: all 0.15s ease-in-out;}
a:hover,
.page-link:hover{ color: var(--bs-primary-hover); text-decoration: none;}
.page-link:focus{ box-shadow: none;}
img{ max-width: 100%;}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; color: #66697a; margin-bottom: 1rem;}
h1, .h1{ font-size: 1.5rem; line-height: 1.875rem;} /* 24px */

.title-20{ font-size: 1.25rem; line-height: 1.5rem;} /* 20px */
.text-30{ font-size: 1.875rem;}
.text-16{ font-size: 1rem;}
.text-14{ font-size: .875rem;}
.text-12{ font-size: .75rem;}

hr{ color: var(--bs-border-color); opacity: 1;}

.mb-20{ margin-bottom: 1.25rem;}
.mb-30{ margin-bottom: 1.875rem;}
.fw-medium{ font-weight: 500;}
.mt-n12{ margin-top: -.75rem;}
.br-2{ border-radius: .5rem;}

/* Row */
.g-30, .gx-30{ --bs-gutter-x: 1.875rem;}
.g-30, .gy-30{ --bs-gutter-y: 1.875rem;}

/* Buttons Style */
.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-font-family: var(--bs-body-font-family);
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.125rem;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-border-color: rgba(164, 164, 164, .6);
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-link {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--bs-body-color);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  text-decoration: none;
  font-size: var(--bs-btn-font-size);
}

.btn-link-gray {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-gray-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--bs-gray-500);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-shadow-rgb: none;
  text-decoration: none;
  font-size: var(--bs-btn-font-size);
}

.link-primary,
.link-primary:focus{ color: var(--bs-primary) !important;}
.link-primary:hover{ color: var(--bs-primary-hover) !important;}
.link-primary.tu,
.link-primary.tu:focus{ text-decoration: underline;}
.link-primary.tu:hover{ text-decoration: none; color: var(--bs-primary) !important;}

.w-175{ width: 175px; max-width: 100%;}
.w-220{ width: 220px; max-width: 100%;}
.w-325{ width: 325px; max-width: 100%;}
.w-582{ width: 582px; max-width: 100%;}
.h-186{ height: 186px;}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-hover);
  --bs-btn-hover-border-color: var(--bs-primary-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-hover);
  --bs-btn-active-border-color: var(--bs-primary-hover);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}

/* Form */
.form-control { padding: 0.5rem 1rem; font-size: 1rem; font-weight: 400; line-height: 1.375; color: var(--bs-gray); background-color: #fff; border: 1px solid rgba(164, 164, 164, .6); border-radius: 0.5rem;}
.form-control:focus { color: var(--bs-gray); background-color: #fff; border-color: var(--bs-primary); box-shadow: none;}
textarea.form-control{ resize: none;}
.form-control-lg{ padding: .875rem 1.875rem;}
.form-control-plaintext{ padding: .5rem 0; line-height: 1.375; color: var(--bs-gray);}
.form-control-plaintext-lg{ padding: .875rem 0;}

.form-control::-moz-placeholder { color: #A4A4A4; opacity: 1;}
.form-control::placeholder { color: #A4A4A4; opacity: 1;}
.form-control:disabled,
.form-control[readonly] { background-color: rgba(245, 245, 247, .6); border-color: rgba(164, 164, 164, .6); opacity: 1;}

.form-control::-webkit-outer-spin-button,
.form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.form-control[type=number] { -moz-appearance: textfield;}

.form-control.icon-date{ padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23A4A4A4' d='M2,16c-0.32,0-0.6-0.119-0.84-0.359S0.8,15.12,0.8,14.8V2.4c0-0.32,0.12-0.601,0.36-0.84C1.4,1.32,1.68,1.2,2,1.2h1.3V0h1.3 v1.2h6.799V0H12.7v1.2H14c0.32,0,0.6,0.12,0.84,0.36C15.081,1.8,15.2,2.081,15.2,2.4V14.8c0,0.32-0.119,0.601-0.36,0.841 C14.6,15.881,14.32,16,14,16H2z M2,14.8h12V6.2H2V14.8z M2,5h12V2.4H2V5z M2,5V2.4V5z'/%3e%3c/svg%3e"); background-size: 1rem 1rem; background-position: right .875rem center; background-repeat: no-repeat;}
.form-control.icon-time{ padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23A4A4A4' d='M10.939,11.859l0.899-0.899l-3.18-3.2V3.74h-1.2v4.5L10.939,11.859z M8,16c-1.093,0-2.127-0.21-3.1-0.63 c-0.974-0.42-1.823-0.993-2.551-1.72c-0.727-0.728-1.3-1.577-1.72-2.551C0.21,10.127,0,9.094,0,8c0-1.093,0.21-2.127,0.63-3.1 C1.05,3.927,1.623,3.077,2.35,2.35C3.077,1.623,3.927,1.05,4.9,0.63C5.873,0.21,6.907,0,8,0c1.094,0,2.127,0.21,3.1,0.63 c0.975,0.42,1.824,0.993,2.551,1.72c0.728,0.728,1.301,1.577,1.721,2.551C15.791,5.873,16,6.907,16,8c0,1.094-0.21,2.127-0.63,3.1 c-0.42,0.975-0.993,1.824-1.72,2.551c-0.728,0.728-1.577,1.301-2.551,1.721C10.127,15.79,9.094,16,8,16z M8,14.8 c1.866,0,3.467-0.666,4.8-2c1.334-1.333,2-2.934,2-4.8c0-1.867-0.666-3.467-2-4.8c-1.333-1.333-2.934-2-4.8-2 c-1.867,0-3.467,0.667-4.8,2s-2,2.933-2,4.8c0,1.866,0.667,3.467,2,4.8C4.533,14.134,6.133,14.8,8,14.8z'/%3e%3c/svg%3e"); background-size: 1rem 1rem; background-position: right .875rem center; background-repeat: no-repeat;}

.form-select { padding: 0.375rem 2.25rem 0.375rem 0.75rem; -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-gray); background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3e%3cpath fill='%238C8C8C' d='M0.014-0.014l5,5.027l4.973-5.027H0.014z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 10px 5px; border: 1px solid rgba(164, 164, 164, .6); border-radius: 0.5rem;}
.form-select-lg{ padding: .875rem 2.25rem .875rem 1.875rem; -moz-padding-start: calc(1.875rem - 3px); line-height: 1.375;}
.form-select:focus { color: var(--bs-gray); background-color: #fff; border-color: var(--bs-primary); box-shadow: none;}
.form-select[multiple],
.form-select[size]:not([size="1"]) { padding-right: 0.75rem; background-image: none;}
.form-select:disabled,
.form-select[readonly] { background-color: rgba(245, 245, 247, .6); border-color: rgba(164, 164, 164, .6); opacity: 1;}

/* Floating Label */
.form-floating > .form-control,
.form-floating > .iti > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select { height: 3.25rem; line-height: 1.25;}
.form-floating > textarea.form-control{ height: auto;}
.form-floating > label { top: .9375rem; left: 1.625rem; width: auto; height: auto; padding: 0 .25rem; border: 1px solid transparent; color: #A4A4A4; background-color: #fff;}
.form-floating > .form-control,
.form-floating > .iti > .form-control,
.form-floating > .form-control-plaintext { padding: 1rem 1.875rem;}
.form-floating > .form-control:not(:-moz-placeholder-shown),
.form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) { padding-top: 1rem; padding-bottom: 1rem;}
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) { padding-top: 1rem; padding-bottom: 1rem;}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill { padding-top: 1rem; padding-bottom: 1rem;}
.form-floating > .form-select { padding: 1rem 1.875rem; -moz-padding-start: calc(1.875rem - 3px);}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label { opacity: 1; transform: scale(0.75) translateY(-2rem) translateX(-0.875rem);}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label { opacity: 1; transform: scale(0.75) translateY(-2rem) translateX(-0.875rem);}
.form-floating > .form-control:-webkit-autofill ~ label { opacity: 1; transform: scale(0.75) translateY(-2rem) translateX(-0.875rem);}
.form-floating > .form-control-plaintext ~ label { border-width: 1px 0;}
.form-floating > .form-control.is-invalid ~ label,
.form-floating > .form-select.is-invalid ~ label{ color: var(--bs-danger);}
.form-floating > .dropdown > .btn.btn-dropdown{ height: 3.25rem; line-height: 1.25; padding: 1rem 1.875rem;}
.form-floating > .form-control.icon-date,
.form-floating > .form-control.icon-time{ padding-right: 3rem;}

.form-textarea{ position: relative; padding-bottom: 3.75rem;}
.form-textarea > .form-plain-textarea{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; border: 1px solid rgba(164, 164, 164, .6); border-radius: 0.5rem; transition: border-color .15s ease-in-out;}
.form-textarea > textarea.form-control{ border: none;}
.form-textarea > label{ z-index: 1;}
.form-textarea > textarea.form-control:focus ~ .form-plain-textarea{ border-color: var(--bs-primary);}
.form-textarea-bottom{ position: absolute; left: .625rem; bottom: .625rem; right: .625rem; text-align: right;}

.otp-control .form-control{ height: 3.25rem; padding: 1rem .5rem; line-height: 1.25; text-align: center;}
.input-group-icon{ position: relative;}
.input-group-icon .form-control{ padding-right: 2.5rem;}
.input-group-icon .icon{ position: absolute; right: .75rem; top: calc(.625rem - 1px); color: #A4A4A4; font-size: 1.375rem; pointer-events: none;}
.input-group-icon .form-control-lg + .icon{ top: calc(1rem - 1px);}
.input-group-text-end{ position: relative;}
.input-group-text-end .form-control{ padding-right: 3.5rem;}
.input-group-text-end .input-text{ position: absolute; right: 1rem; top: 1rem; color: #707070; pointer-events: none;}

/* Checkbox */
/*.form-check { min-height: 1.125rem; line-height: 1.125rem; padding-left: 1.75rem; margin-bottom: 0;}
.form-check .form-check-input { font-size: 1.125rem; float: left; margin-left: -1.75rem; background-color: transparent;}
.form-check-input { margin-top: 0; border: none;}
.form-check-input[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='%238C8C8C' d='M2,18c-1.104,0-2-0.896-2-2V2c0-1.104,0.896-2,2-2 h14c1.104,0,2,0.896,2,2v14c0,1.104-0.896,2-2,2H2z M2,16h14V2H2V16z'/%3e%3c/svg%3e"); border-radius: 0;}
.int-check-wrap .form-check-input[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='%238C8C8C' d='M3.25,9.7h11.525V8.2H3.25V9.7z M1.5,18c-0.398,0-0.749-0.148-1.049-0.449C0.15,17.251,0,16.9,0,16.499v-15 C0,1.1,0.15,0.75,0.45,0.45S1.1,0,1.5,0h15c0.4,0,0.752,0.15,1.052,0.45S18,1.1,18,1.5v15c0,0.4-0.148,0.752-0.449,1.052 c-0.3,0.3-0.65,0.448-1.052,0.448H1.5z M1.5,16.499h15v-15h-15V16.499z M1.5,1.5v15V1.5z'/%3e%3c/svg%3e"); border-radius: 0;}
.form-check-input[type=radio] { border-radius: 50%; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='%238C8C8C' d='M9,18c-1.23,0-2.393-0.236-3.486-0.709c-1.096-0.473-2.052-1.117-2.869-1.936c-0.817-0.816-1.463-1.772-1.936-2.869 C0.236,11.393,0,10.23,0,9c0-1.245,0.236-2.415,0.709-3.51c0.473-1.096,1.117-2.049,1.936-2.858c0.817-0.81,1.773-1.45,2.869-1.923 C6.607,0.236,7.77,0,9,0c1.245,0,2.415,0.236,3.51,0.709c1.096,0.473,2.049,1.113,2.857,1.923c0.811,0.81,1.451,1.763,1.924,2.858 C17.764,6.585,18,7.755,18,9c0,1.23-0.236,2.393-0.709,3.486c-0.473,1.097-1.113,2.053-1.924,2.869 c-0.811,0.817-1.762,1.463-2.857,1.936C11.415,17.764,10.245,18,9,18z M9,16.65c2.13,0,3.938-0.746,5.423-2.239 C15.907,12.919,16.65,11.115,16.65,9c0-2.13-0.742-3.938-2.228-5.422C12.938,2.092,11.13,1.35,9,1.35 c-2.115,0-3.919,0.742-5.411,2.229C2.096,5.063,1.35,6.87,1.35,9c0,2.115,0.746,3.919,2.239,5.411C5.081,15.904,6.885,16.65,9,16.65 z'/%3e%3c/svg%3e");}
.form-check-input:active { filter: brightness(100%);}
.form-check-input:focus { box-shadow: none;}
.form-check-input:checked { background-color: transparent;}
.form-check-input:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='%231C9C29' d='M7.6,13.2l7.05-7.05l-1.4-1.4L7.6,10.4L4.75,7.55l-1.4,1.4 L7.6,13.2z M2,18c-1.104,0-2-0.896-2-2V2c0-1.104,0.896-2,2-2h14c1.104,0,2,0.896,2,2v14c0,1.104-0.896,2-2,2H2z M2,16h14V2H2V16z M2,2L2,2z'/%3e%3c/svg%3e");}
.form-check-input:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='%231C9C29' d='M9,13.186c1.17,0,2.16-0.404,2.971-1.215S13.186,10.17,13.186,9s-0.404-2.16-1.215-2.971C11.16,5.221,10.17,4.814,9,4.814 S6.84,5.221,6.029,6.029C5.221,6.84,4.814,7.83,4.814,9s0.406,2.16,1.215,2.971C6.84,12.779,7.83,13.186,9,13.186z M9,18 c-1.23,0-2.393-0.236-3.486-0.709c-1.096-0.473-2.052-1.117-2.869-1.936c-0.817-0.816-1.463-1.772-1.936-2.869 C0.236,11.393,0,10.23,0,9c0-1.245,0.236-2.415,0.709-3.51c0.473-1.096,1.117-2.049,1.936-2.858c0.817-0.81,1.773-1.45,2.869-1.923 C6.607,0.236,7.77,0,9,0c1.245,0,2.415,0.236,3.51,0.709c1.096,0.473,2.049,1.113,2.857,1.923c0.811,0.81,1.451,1.763,1.924,2.858 C17.764,6.585,18,7.755,18,9c0,1.23-0.236,2.393-0.709,3.486c-0.473,1.097-1.113,2.053-1.924,2.869 c-0.811,0.817-1.762,1.463-2.857,1.936C11.415,17.764,10.245,18,9,18z M9,16.65c2.13,0,3.938-0.746,5.423-2.239 C15.907,12.919,16.65,11.115,16.65,9c0-2.13-0.742-3.938-2.228-5.422C12.938,2.092,11.13,1.35,9,1.35 c-2.115,0-3.919,0.742-5.411,2.229C2.096,5.063,1.35,6.87,1.35,9c0,2.115,0.746,3.919,2.239,5.411C5.081,15.904,6.885,16.65,9,16.65 z'/%3e%3c/svg%3e");}
.form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");}
.form-check-input:disabled { opacity: 1;}
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label { opacity: 1;}
.form-check-input:disabled[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='%23a4a4a4' d='M9,18c-1.23,0-2.393-0.236-3.486-0.709c-1.096-0.473-2.052-1.117-2.869-1.936c-0.817-0.816-1.463-1.772-1.936-2.869 C0.236,11.393,0,10.23,0,9c0-1.245,0.236-2.415,0.709-3.51c0.473-1.096,1.117-2.049,1.936-2.858c0.817-0.81,1.773-1.45,2.869-1.923 C6.607,0.236,7.77,0,9,0c1.245,0,2.415,0.236,3.51,0.709c1.096,0.473,2.049,1.113,2.857,1.923c0.811,0.81,1.451,1.763,1.924,2.858 C17.764,6.585,18,7.755,18,9c0,1.23-0.236,2.393-0.709,3.486c-0.473,1.097-1.113,2.053-1.924,2.869 c-0.811,0.817-1.762,1.463-2.857,1.936C11.415,17.764,10.245,18,9,18z M9,16.65c2.13,0,3.938-0.746,5.423-2.239 C15.907,12.919,16.65,11.115,16.65,9c0-2.13-0.742-3.938-2.228-5.422C12.938,2.092,11.13,1.35,9,1.35 c-2.115,0-3.919,0.742-5.411,2.229C2.096,5.063,1.35,6.87,1.35,9c0,2.115,0.746,3.919,2.239,5.411C5.081,15.904,6.885,16.65,9,16.65 z'/%3e%3c/svg%3e");}
.form-check-input:disabled:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='%23a4a4a4' d='M9,13.186c1.17,0,2.16-0.404,2.971-1.215S13.186,10.17,13.186,9s-0.404-2.16-1.215-2.971C11.16,5.221,10.17,4.814,9,4.814 S6.84,5.221,6.029,6.029C5.221,6.84,4.814,7.83,4.814,9s0.406,2.16,1.215,2.971C6.84,12.779,7.83,13.186,9,13.186z M9,18 c-1.23,0-2.393-0.236-3.486-0.709c-1.096-0.473-2.052-1.117-2.869-1.936c-0.817-0.816-1.463-1.772-1.936-2.869 C0.236,11.393,0,10.23,0,9c0-1.245,0.236-2.415,0.709-3.51c0.473-1.096,1.117-2.049,1.936-2.858c0.817-0.81,1.773-1.45,2.869-1.923 C6.607,0.236,7.77,0,9,0c1.245,0,2.415,0.236,3.51,0.709c1.096,0.473,2.049,1.113,2.857,1.923c0.811,0.81,1.451,1.763,1.924,2.858 C17.764,6.585,18,7.755,18,9c0,1.23-0.236,2.393-0.709,3.486c-0.473,1.097-1.113,2.053-1.924,2.869 c-0.811,0.817-1.762,1.463-2.857,1.936C11.415,17.764,10.245,18,9,18z M9,16.65c2.13,0,3.938-0.746,5.423-2.239 C15.907,12.919,16.65,11.115,16.65,9c0-2.13-0.742-3.938-2.228-5.422C12.938,2.092,11.13,1.35,9,1.35 c-2.115,0-3.919,0.742-5.411,2.229C2.096,5.063,1.35,6.87,1.35,9c0,2.115,0.746,3.919,2.239,5.411C5.081,15.904,6.885,16.65,9,16.65 z'/%3e%3c/svg%3e");}*/

.form-check { min-height: 1.125rem; line-height: 1.125rem; padding-left: 0; margin-bottom: 0;}
.form-check .form-check-input { opacity: 0;}
.form-check-label{ position: relative; padding-left: 1.75rem; min-height: 1.125rem; vertical-align: top;}
.form-check-icon .form-check-label{ padding-left: 1.125rem;}
.form-check-label:before{ content: ""; width: 1.125rem; height: 1.125rem; border: 2px solid #8C8C8C; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-position: center center; background-size: .875rem .875rem; border-radius: .125rem;}
.form-check-input[type=radio] ~ .form-check-label:before{ border: 2px solid #8C8C8C; border-radius: 50%;}
.form-check-input:checked[type=checkbox] ~ .form-check-label:before{ border-color: var(--bs-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath fill='%231C9C29' d='M5.6,11.225l7.051-7.05l-1.4-1.4L5.6,8.426L2.75,5.575l-1.4,1.4L5.6,11.225z'/%3e%3c/svg%3e");}
.int-check-wrap .form-check-input[type=checkbox] ~ .form-check-label:before{ border-color: #8C8C8C; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath fill='%238C8C8C' d='M1.237,7.75h11.525v-1.5H1.237V7.75z'/%3e%3c/svg%3e");}
.form-check-input:checked[type=radio] ~ .form-check-label:before{ border-color: var(--bs-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath fill='%231C9C29' d='M7,11c1.118,0,2.064-0.386,2.839-1.161C10.614,9.064,11,8.118,11,7s-0.386-2.064-1.161-2.839 C9.064,3.389,8.118,3,7,3S4.936,3.389,4.161,4.161C3.389,4.936,3,5.882,3,7s0.388,2.064,1.161,2.839C4.936,10.611,5.882,11,7,11z'/%3e%3c/svg%3e");}
.form-check-input:disabled[type=radio] ~ .form-check-label:before{ border-color: #a4a4a4;}
.form-check-input:disabled:checked[type=radio] ~ .form-check-label:before{ border-color: #a4a4a4; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath fill='%23a4a4a4' d='M7,11c1.118,0,2.064-0.386,2.839-1.161C10.614,9.064,11,8.118,11,7s-0.386-2.064-1.161-2.839 C9.064,3.389,8.118,3,7,3S4.936,3.389,4.161,4.161C3.389,4.936,3,5.882,3,7s0.388,2.064,1.161,2.839C4.936,10.611,5.882,11,7,11z'/%3e%3c/svg%3e");}

.int-check-wrap{ position: relative;}
.icon-check-delete{ display: none;}
.int-check-wrap .icon-check-delete{ display: inline-block; position: absolute; left: 3.875rem; top: 1.0625rem; z-index: 1;}

.form-switch { padding-left: 4.25rem; line-height: 1.25rem; font-size: .875rem;}
.form-switch .form-check-input { width: 2.75rem; height: 1.25rem; margin-left: -4.25rem; border: none; background-color: #A4A4A4; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-position: left center; background-size: 1.25rem 1.25rem; box-shadow: 4px 6px 10px #00000029; border-radius: .625rem; transition: background-position 0.15s ease-in-out;}
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");}
.form-switch .form-check-input:checked { background-color: var(--bs-primary); background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");}

/* Form Errors */
.invalid-feedback{ color: var(--bs-danger); font-size: .75rem; line-height: 1rem; margin-top: .375rem;}
.form-floating .invalid-feedback{ padding-left: 1.25rem;}
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: rgba(var(--bs-danger-rgb), .6); background-image: none;}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus { border-color: rgba(var(--bs-danger-rgb), .6); box-shadow: none;}
.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);}
.was-validated .form-select:invalid,
.form-select.is-invalid { border-color: rgba(var(--bs-danger-rgb), .6);}
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] { padding-right: 4.125rem; background-image: none;}
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus { border-color: rgba(var(--bs-danger-rgb), .6); box-shadow: none;}
.was-validated .form-control-color:invalid,
.form-control-color.is-invalid { width: calc(3rem + calc(1.5em + 0.75rem));}
.was-validated .form-check-input:invalid,
.form-check-input.is-invalid { border-color: rgba(var(--bs-danger-rgb), .6);}
.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked { background-color: var(--bs-danger);}
.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus { box-shadow: none;}

.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label { color: var(--bs-danger);}
.form-buttons > .btn + .btn{ margin-left: 2rem;}

/* Icon Size */
.icon-20{ font-size: 1.25rem;}

/* Header */
.header{ position: fixed; left: 16.375rem; top: 0; right: 0; z-index: 2; transition: all 400ms ease;}
.navbar{ background-color: var(--bs-body-bg); --bs-navbar-padding-y: .75rem;}
.header .navbar-nav{ --bs-nav-link-padding-y: .625rem;}
.header .navbar-nav .nav-link{ min-width: 2.5rem;}
.header .navbar-nav .nav-user .nav-link{ border: 1px solid #707070; background-color: #E8FFDB; position: relative; line-height: 1.125rem; text-align: center; text-transform: uppercase; border-radius: 50%;}
.header .navbar-nav .nav-user .nav-link:before{ content: ""; position: absolute; right: 0; bottom: 0; width: .75rem; height: .75rem; display: inline-block; background-color: var(--bs-primary); border-radius: 50%;}
.header .navbar-nav .dropdown-toggle:after{ display: none;}

/* Sidebar */
.sidebar{ position: fixed; left: 0; top: 0; width: 16.375rem; height: 100%; background-color: var(--bs-body-bg); z-index: 3; transition: all 400ms ease;}
.sidebar .sidebar-header{ padding: .625rem .9375rem; position: relative; z-index: 1;}
.sidebar .sidebar-header .navbar-brand{ display: flex;}
.sidebar .sidebar-header .navbar-brand .brand-text{ margin-left: 1px;}
.sidebar .sidebar-header .sidebar-toggle{ padding: .5rem; position: absolute; right: .75rem; top: 50%; margin-top: -20px; cursor: pointer; transition: all 400ms ease;}
.sidebar .sidebar-header .sidebar-toggle .icon{ vertical-align: top; pointer-events: none; user-select: none;}
.sidebar .sidebar-body{ z-index: 1; position: relative;}
.sidebar .sidebar-scroll{ padding: .75rem .9375rem; height: calc(100vh - 60px); overflow-x: hidden; overflow-y: auto;}
.sidebar .navbar-nav{ --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: 0.5rem; --bs-nav-link-font-size: 1rem; --bs-nav-link-font-weight: 400; --bs-nav-link-color: var(--bs-body-color);}
.sidebar .navbar-nav .nav-item{ margin: .25rem 0;}
.sidebar .navbar-nav .nav-item .nav-link{ line-height: 1.5rem; color: var(--bs-body-color); display: flex; align-items: center; white-space: nowrap; position: relative; border-radius: .5rem; transition: all 200ms ease;}
.sidebar .navbar-nav .nav-item .nav-link:not([aria-expanded="true"]):hover,
.sidebar .navbar-nav .nav-item .nav-link.active{ background-color: var(--bs-primary); color: #fff;}
.sidebar .navbar-nav .nav-item .nav-link[aria-expanded="true"],
.sidebar .navbar-nav .nav-item .nav-link.selected{ background-color: #EAEAED; color: var(--bs-body-color);}
.sidebar .navbar-nav .nav-item .nav-link .icon,
.sidebar .navbar-nav .nav-item .nav-link[aria-expanded="true"] .icon{ font-size: 1.125rem; color: var(--bs-gray); transition: all .15s ease-in-out;}
.sidebar .navbar-nav .nav-item .nav-link:not([aria-expanded="true"]):hover .icon,
.sidebar .navbar-nav .nav-item .nav-link.active .icon{ color: #fff;}
.sidebar .navbar-nav .nav-item .nav-link .item-name{ flex: 1; margin-left: 1rem; transition: all 400ms ease; transform: translateX(0) scale(1); opacity: 1;}
.sidebar .navbar-nav .nav-item .nav-link .right-icon{ position: absolute; right: .375rem; top: 50%; margin-top: -.75rem; transition: all .15s ease-in-out;}
.sidebar .navbar-nav .nav-item .nav-link[aria-expanded="true"] .right-icon{ transform: rotate(90deg);}

.navbar-subnav{ padding: 0; list-style: none; margin: 0;}
.sidebar .navbar-nav .nav-item .navbar-subnav .item-name{ margin-left: 2.125rem;}
.sidebar .navbar-nav .nav-item .navbar-subnav .nav-link .dot{ position: relative;}
.sidebar .navbar-nav .nav-item .navbar-subnav .nav-link .dot:before{ content: ""; position: absolute; left: -1.75rem; top: 50%; transform: translateY(-50%); display: inline-block; width: .375rem; height: .375rem; background-color: var(--bs-gray); border-radius: 50%; transition: all .15s ease-in-out;}
.sidebar .navbar-nav .nav-item .navbar-subnav .nav-link:hover .dot:before,
.sidebar .navbar-nav .nav-item .navbar-subnav .nav-link.active .dot:before{ background-color: #fff;}
.sidebar .navbar-nav .nav-item .nav-link .icon-sub{ position: absolute; transition: all 400ms ease; transform: translateX(-100%) scale(0); opacity: 0;}

.sidebar-overlay{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,.4); z-index: 0; visibility: hidden; opacity: 0; transition: all 400ms ease;}

/* Dropdown */
.btn.btn-dropdown{ padding-right: 2rem; position: relative; border: 1px solid rgba(164, 164, 164, .6); font-size: 1rem; text-align: left; font-weight: 400;}
.btn.btn-dropdown:hover{ border: 1px solid rgba(164, 164, 164, .6);}
.btn.btn-dropdown.show{ border-color: var(--bs-primary);}
.btn-dropdown:after{ position: absolute; right: .875rem; top: 50%; transform: translateY(-50%); font-size: 1.125rem;}
.dropdown-menu{
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: calc(.25rem + 1px);
  --bs-dropdown-color: #212529;
  --bs-dropdown-border-color: #D9D9D9;
  --bs-dropdown-border-radius: calc(.25rem + 1px);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: #66697a;
  --bs-dropdown-link-hover-bg: #F7F7F9;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-disabled-color: var(--bs-body-color);
  --bs-dropdown-item-padding-x: 1.125rem;
  --bs-dropdown-item-padding-y: 0.375rem;
  --bs-dropdown-divider-margin-y: calc(.25rem + 1px);
  --bs-dropdown-divider-bg: #D9D9D9;
  box-shadow: 6px 6px 10px #0000001A;
  min-width: 100%;
  max-height: 172px;
  overflow-x: hidden;
  overflow-y: auto;
}
.dropdown-menu-check{ max-height: 162px; --bs-dropdown-item-padding-x: .75rem;}
.dropdown-item{ white-space: normal;}
.dropdown-item:active{ color: var(--bs-dropdown-link-hover-color); background-color: var(--bs-dropdown-link-hover-bg);}
.dropdown-menu .form-check{ margin-bottom: 0;}

.notification-dropdown .nav-link .icon-unread{ display: inline-block; height: .5rem; width: .5rem; border-radius: .5rem; background-color: var(--bs-primary); position: absolute; top: .75rem; right: .75rem;}
.notification-dropdown-menu { min-width: 400px; padding: 0; border-radius: 10px; -webkit-box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16); box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16); border: 0; max-width: 400px; max-height: none;}
.notification-dropdown-menu:after{ content: ""; position: absolute; top: -30px; left: calc(50% - 7px); border-top: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #fff; border-left: 15px solid transparent;}
.notification-dropdown-menu .item-title{ border-bottom: 1px solid #ddd; padding: 1rem;}
.notification-dropdown-menu .item-title h6{ margin-bottom: 0;}
.notification-dropdown-menu .item-body { max-height: 292px; overflow: auto;}
.notification-dropdown-menu .item-list { padding: 1rem 1rem 1rem 5rem; min-height: 4.5rem; border-bottom: 1px solid var(--bs-border-color); display: flex; flex-direction: column; position: relative;}
.notification-dropdown-menu .item-list.unread { position: relative; background-color: rgba(28, 156, 41, .03);}
.notification-dropdown-menu .item-list.unread:before { content: ""; position: absolute; top: 0; left: 0; height: calc(100% + 1px); border-left: 3px solid var(--bs-primary);}
.notification-dropdown-menu .item-list .item-image{ position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); height: 3rem; width: 3rem;}
.notification-dropdown-menu .item-list .item-image img { height: 100%; width: 100%; border-radius: 50px; object-fit: cover;}
.notification-dropdown-menu .item-list .item-text{ margin-bottom: .25rem; font-size: 1rem; line-height: 1.25rem; color: #66697a;}
.notification-dropdown-menu .item-list .item-time{ font-size: .875rem; line-height: 1rem; color: var(--bs-body-color);}
.notification-dropdown-menu .item-footer .btn{ border: none;}

/* Table */
.table{ margin-bottom: 0;}
.table > thead{ background-color: #F5F5F7; border-bottom: 1px solid var(--bs-table-border-color);}
.table > thead > tr > th,
.table > tbody > tr.thead > th{ padding: 1.25rem .75rem; border-bottom: 0 solid var(--bs-table-border-color); font-size: .875rem; font-weight: 600; position: relative;}
.table > tbody > tr > td{ padding: .875rem 0 .875rem .75rem;}
.table > tbody > * > *{ border-bottom-width: 0; border-top-width: 1px;}
.table > thead > tr > th:first-child,
.table > tbody > tr > td:first-child{ padding-left: 1.5rem;}
.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child{ padding-right: 1.5rem;}
.table > thead > tr > th:not(:first-child) .divider,
.table > tbody > tr.thead > th:not(:first-child) .divider{ background-color: #A4A4A4; display: inline-block; width: 1px; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem;}
.table > thead > tr > th.int-check-wrap ~ th{ opacity: 0;}
.table > tbody > tr > td .items-action{ display: flex;}
.table > tbody > tr > td .items-action .item-link{ display: flex; align-items: center; justify-content: center; padding: .125rem; min-width: 1.5rem; min-height: 1.5rem;}
.table > tbody > tr > td .items-action .item-link + .item-link{ margin-left: 1.25rem;}
.table > tbody > tr > td .items-action .icon{ font-size: 1.125rem; vertical-align: top;}
.table > tbody > tr > td .tags .badge { --bs-badge-color: var(--bs-primary); background-color: #E8FFDB; border-color: var(--bs-primary);}
.table > tbody > tr > td .tags .badge:nth-child(3n+2) { --bs-badge-color: var(--bs-warning); background-color: #FFEEDB; border-color: var(--bs-warning);}
.table > tbody > tr > td .tags .badge:nth-child(3n+3) { --bs-badge-color: var(--bs-info); background-color: #DBF9FF; border-color: var(--bs-info);}
.status{ background: #F5F5F7; border: 1px solid #A4A4A4; color: #A4A4A4; padding: 0 .25rem; min-width: 5.375rem; text-align: center; font-size: .875rem; line-height: 1.375rem; font-weight: normal; display: inline-block; border-radius: .75rem;}
.status.active,
.status.completed,
.status.approved{ background: #E8FFDB; border: 1px solid var(--bs-primary); color: var(--bs-primary);}
.status.pending{ background: #FFEEDB; border: 1px solid var(--bs-warning); color: var(--bs-warning);}
.status.reject{ background: #F9EFEF; border: 1px solid #EA7D7D; color: #EA7D7D;}
.table > tbody > tr > td.collapse-button{ padding-left: 1rem; padding-right: 1rem;}
.table > tbody > tr > td.collapse-button:not(.collapsed),
.table > tbody > tr > td.collapse-button:not(.collapsed) ~ td{ background-color: #F5FDF0;}

.items-icon-action{ display: flex;}
.items-icon-action .item-link{ display: flex; align-items: center; justify-content: center; padding: .125rem; min-width: 1.5rem; min-height: 1.5rem;}
.items-icon-action .item-link + .item-link{ margin-left: 1.25rem;}
.items-icon-action .icon{ font-size: 1.125rem; vertical-align: top;}

.tags{ margin: -.25rem; display: flex; flex-wrap: wrap;}
.tags .badge{ margin: .25rem;}

.table > tbody > tr.table-collapse > td{ border-top-width: 0;}
.table > tbody > tr.table-collapse > td .table tr > th:first-child, 
.table > tbody > tr.table-collapse > td .table tr td:first-child{ padding-left: 4.25rem;}

.avatar-wrap{ position: relative; padding-left: 2.875rem;}
.avatar-wrap .avatar-text{ position: absolute; left: 0; top: -.25rem; width: 2rem; height: 2rem; font-weight: 600; background: #E8FFDB; border: 1px solid #8C8C8C; display: flex; align-items: center; justify-content: center; text-transform: uppercase; border-radius: 50%;}
.avatar-wrap .avatar-text.vc{ top: 50%; transform: translateY(-50%);}
.avatar-wrap .avatar-text.top,
.avatar-wrap .avatar-img.top{ top: 0;}
.avatar-wrap .avatar-img{ position: absolute; left: 0; top: -.25rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0;}
.avatar-wrap .avatar-img img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.avatar-wrap .avatar-img-hover{ transition: all .2s ease;}
.avatar-wrap .avatar-img-hover:hover{ width: 7.5rem; height: 7.5rem; transform: translate(-3rem, -3rem);}

.img-225{ position: relative; padding-bottom: 74%; height: 0;}
.img-225 img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: .5rem;}

/* Pagination */
.card-pagination{ padding-top: 1rem; border-top: 1px solid var(--bs-border-color);}
.pagination {
  --bs-pagination-padding-x: 0.25rem;
  --bs-pagination-padding-y: 0.5rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-border-radius: 0;
  --bs-pagination-hover-color: var(--bs-white);
  --bs-pagination-hover-bg: var(--bs-body-color);
  --bs-pagination-hover-border-color: var(--bs-body-color);
  --bs-pagination-focus-color: var(--bs-white);
  --bs-pagination-focus-bg: var(--bs-body-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--bs-white);
  --bs-pagination-active-bg: var(--bs-body-color);
  --bs-pagination-active-border-color: var(--bs-body-color);
  --bs-pagination-disabled-color: var(--bs-body-color);
  --bs-pagination-disabled-bg: var(--bs-white);
  --bs-pagination-disabled-border-color: #dee2e6;
  flex-wrap: wrap;
}
.pagination .page-item{ margin: 0 1px;}
.pagination .page-item .page-link{ min-width: 2.25rem; height: 2.25rem; text-align: center; border-radius: 50%;}
.pagination .page-item .page-link:hover{ color: var(--bs-white);}
.pagination .page-item:not(:first-child) .page-link{ margin-left: 0;}
.pagination .page-item .page-link .icon{ font-size: 1.25rem; vertical-align: top;}

/* Content */
.container{ padding: 0 1.25rem;}
.main-content{ padding-left: 16.375rem; padding-top: 4rem; min-height: 100vh; transition: all 400ms ease;}
.container{ max-width: 100%;}
.page-content{ padding-bottom: 1.25rem;}

.page-title{ margin-bottom: 1.75rem;}
.page-title h1{ margin-bottom: .5rem;}
.page-title h1 span{ font-weight: normal;}
.page-title h1 span .tu{ text-decoration: underline;}
.page-title p{ margin-bottom: 0;}

/* Card Box */
.card {
  --bs-card-spacer-y: 1.875rem;
  --bs-card-spacer-x: 1.875rem;
  --bs-card-border-width: 0;
  --bs-card-border-radius: .75rem;
  --bs-card-title-spacer-y: 1.25rem;
  --bs-card-cap-bg: #fff;
  --bs-card-inner-border-radius: .75rem;
  box-shadow: 6px 6px 10px #0000001A;
}
.card-table,
.card-table-top {
  --bs-card-spacer-y: 0;
  --bs-card-spacer-x: 0;
  --bs-card-cap-padding-y: 1.25rem;
  --bs-card-cap-padding-x: 1.625rem;
}
.card-db {
  --bs-card-spacer-y: .875rem;
  --bs-card-spacer-x: .875rem;
  display: flex;
  justify-content: center;
  height: 100%;
}
.card-cl {
  --bs-card-spacer-y: 1.125rem;
  --bs-card-spacer-x: 1.25rem;
  display: flex;
  justify-content: center;
  height: 100%;
  text-align: left;
  padding: 0;
  color: var(--bs-body-color);
}
.card-plus + .card-plus{ margin-top: 1.5rem;}
.card-table-top .card-header{ background-color: transparent;}
.card-title{ font-weight: 500; color: var(--bs-body-color);}
.card-divider.full{ margin-left: calc(1px - var(--bs-card-spacer-x)); margin-right: calc(1px - var(--bs-card-spacer-x));}
.card-db .card-body{ width: 100%; flex: 0;}
.card-db .item-count{ font-size: 1.875rem; color: #66697A; margin-bottom: 1.125rem;}
.card-db .item-label{ font-size: .875rem; font-weight: 600;}
.card-db .avatar-wrap{ padding-left: 0;}
.card-db .avatar-wrap .avatar-text{ position: relative; top: 0; margin-bottom: 0.5rem; margin-top: 0.875rem;}
.card-db .item-text,
.card-cl .item-text{ font-size: .875rem;}
a.card-cl{ color: var(--bs-body-color);}
.card-cl.card-add .card-body{ display: flex; align-items: center; justify-content: center;}
.card-cl.active{ background-color: var(--bs-primary); color: #fff;}
.card-iframe{ border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0; overflow: hidden;}

.page-info-box.scrollbar{ padding-bottom: .625rem; padding-right: .75rem; max-height: 190px; overflow-x: hidden; overflow-y: auto;}

/* Login page */
.login-wrap{ width: 100vw; height: 100vh; padding: 1.25rem; position: fixed; left: 0; top: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: url("../images/login-bg.png") left center no-repeat; background-size: cover; overflow-x: hidden; overflow-y: auto;}
.card-login{ width: 444px; max-width: 100%;}
.card-login .logo-login{ width: 216px;}

/* Modal */
.modal {
  --bs-modal-width: 682px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-bg: #fff;
  --bs-modal-border-color: transparent;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 0.75rem;
  --bs-modal-inner-border-radius: calc(0.75rem - 1px);
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: transparent;
  --bs-modal-header-border-width: 0;
  --bs-modal-title-line-height: 1.875rem;
  --bs-modal-footer-gap: 1rem;
  --bs-modal-footer-bg: #fff;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: 1px;
  box-shadow: 6px 6px 10px #0000001A;
}
.modal-header-close{ position: relative; padding-right: calc((var(--bs-modal-header-padding-x) * 2) + 1rem);}
.modal-header-close .btn-close{ position: absolute; right: var(--bs-modal-header-padding-x); top: calc(var(--bs-modal-header-padding-y) + .375rem);}
.modal-body{ padding-top: 0; padding-bottom: 0;}
.modal-footer:not(.bordered){ padding-top: 0; border-top: none;}
.btn-close:focus{ box-shadow: none;}
.modal-divider.full{ margin-left: calc(1px - var(--bs-modal-padding)); margin-right: calc(1px - var(--bs-modal-padding));}

/* Badge */
.badge {
  --bs-badge-padding-x: 0.75rem;
  --bs-badge-padding-y: 0.25rem;
  --bs-badge-font-size: 0.875rem;
  --bs-badge-font-weight: 400;
  --bs-badge-border-radius: 10rem;
  border: 1px solid transparent;
}
.badge-primary { --bs-badge-color: var(--bs-primary); background-color: #E8FFDB; border-color: var(--bs-primary);}
.badge-info { --bs-badge-color: var(--bs-info); background-color: #DBF9FF; border-color: var(--bs-info);}
.badge-warning { --bs-badge-color: var(--bs-warning); background-color: #FFEEDB; border-color: var(--bs-warning);}
.badge-close{ position: relative; padding-right: 1.375rem;}
.badge-close .icon{ position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1rem; background: no-repeat; border: none; padding: 0; color: inherit;}

.form-selected{ display: flex; flex-wrap: wrap; margin-top: .25rem; margin-bottom: -.5rem;}
.form-selected .badge{ margin-top: .5rem; margin-right: .5rem;}

/* Tabs */
.nav-tabs {
  --bs-nav-tabs-border-width: 1px;
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--bs-primary);
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--bs-primary);
  --bs-nav-link-padding-y: .75rem;
}
.nav-tabs .nav-link { font-size: .875rem; font-weight: 600; color: var(--bs-body-color);}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus { color: var(--bs-nav-tabs-link-active-color);}
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link:disabled { color: var(--bs-nav-link-disabled-color);}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { color: var(--bs-nav-tabs-link-active-color);}
.card-tabs .nav-link{ padding: var(--bs-nav-link-padding-y) 0; margin-left: var(--bs-card-cap-padding-x);}

.items-user-details .item-avatar{ width: 120px; height: 120px; background-color: #E8FFDB; font-size: 2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto; text-transform: uppercase; border-radius: 50%;}
.items-user-details .item-name{ font-size: 1.25rem; font-weight: 500; margin-top: 1.25rem; text-align: center;}
.items-user-details .item-number{ text-align: center;}
.items-user-details .item-label{ font-weight: 500;}
.items-user-details .item-img{border-radius: 8px;}

.item-upload-btn{ position: relative;}
.item-upload-btn input[type="file"]{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0;}
.items-upload-photo .item-avatar{ width: 148px; height: 148px; display: flex; align-items: center; justify-content: center; background-color: #1C9C292E; font-size: 1.5rem; font-weight: 600; color: #66697a; border-radius: calc(.25rem + 1px);}
.items-upload-photo .item-avatar img{ width: 100%; height: 100%; object-fit: cover; border-radius: calc(.25rem + 1px);}
.items-upload-photo .item-text{ font-size: .875rem; margin-top: .75rem; width: 100%;}

.view-search{ font-size: .875rem;}
.view-search label{ font-weight: 600;}
.file-list{ list-style: none; margin: 0 0 1.25rem; padding: 0;}
.file-list li{ padding-bottom: .625rem;}
.file-list li a{ position: relative; display: inline-block; padding: 0 1.875rem .0625rem 1rem; color: var(--bs-primary); font-weight: normal; font-size: .875rem; line-height: 1.5rem; background-color: #E8FFDB; border: 1px solid var(--bs-primary); word-break: break-word; border-radius: .75rem;}
.file-list li a .icon{ position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem;}

.file-drag-drop{ position: relative;}
.file-drag-drop > input[type="file"]{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;}
.file-drag-drop > label{ width: 100%; min-height: 6rem; border: 1px dashed rgba(164, 164, 164, .6); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-flow: column; text-align: center; cursor: pointer; position: relative; z-index: 1; border-radius: .5rem;}
.file-drag-drop.mh-8 > label{ min-height: 8rem;}
.file-drag-drop > label .item-link{ color: var(--bs-primary); font-size: .875rem; font-weight: 600; margin-top: .25rem;}

.items-stage{ position: relative; padding: 1.25rem 0 1.25rem 1.5rem;}
.items-stage:not(:last-child):before{ content: ""; position: absolute; left: 0; top: 4rem; bottom: -1rem; width: .125rem; background-color: rgba(var(--bs-primary-rgb), .2);}
.items-stage.active:not(:last-child):before{ background-color: var(--bs-primary);}
.items-stage .item-header .item-button{ padding: 0 0 0 3.875rem; position: relative; color: var(--bs-body-color); background-color: transparent; border: none; text-align: left; font-size: .875rem; line-height: calc(1rem + 1px);}
.items-stage .item-header .item-index{ position: absolute; left: 0; top: 0; color: #707070; font-size: calc(2.5rem + 1px); font-weight: 600; line-height: 1;}
.items-stage .item-header .item-index:before{ content: ""; position: absolute; left: calc(1px - 2rem); top: .75rem; width: calc(1rem - 1px); height: calc(1rem - 1px); background-color: var(--bs-white); border: 2px solid rgba(var(--bs-primary-rgb), .2); border-radius: 50%;}
.items-stage.active .item-header .item-index:before{ background-color: var(--bs-primary); border-color: var(--bs-primary);}
.items-stage.active .item-header .item-index.check:before{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M8.257,20.664L0,12.404l1.586-1.582l6.671,6.673l14.161-14.16L24,4.923L8.257,20.664z'/%3e%3c/svg%3e"); background-size: 14px 9px; background-repeat: no-repeat; background-position: center center;}
.edit-mode .items-stage.active .item-header .item-index:before{ background-color: var(--bs-white); border-color: var(--bs-primary);}
.items-stage .item-body{ padding-top: 1.25rem; margin-bottom: -1.25rem;}
.items-stage .item-body + .item-body{ border-top: 1px solid #D9D9D9; margin-top: 1.25rem;}

.items-repeat{ padding: 0 1rem; margin-left: -1rem; margin-right: -1rem; border: 1px solid transparent;}
.items-repeat.bordered{ padding: 1rem 3.5rem 0 1rem; border-color: #D9D9D9; position: relative; border-radius: .5rem;}
.items-repeat.bordered .repeat-close{ padding: .5rem; border-left: 1px solid #D9D9D9; position: absolute; right: 0; top: 0; bottom: 0;}
.items-repeat.bordered.total{ border-color: transparent; border-top-color: #D9D9D9; position: relative; border-radius: 0;}
.items-repeat.bordered.total:after{ content: ""; position: absolute; right: 0; bottom: 0; height: 1px; width: 50%; background-color: #D9D9D9;}

/* Timeline */
.items-timeline{ position: relative; padding-left: 2.5rem;}
.items-timeline:before{ content: ""; position: absolute; left: calc(.5rem - 1px); top: 1.75rem; bottom: .875rem; width: .125rem; background-color: #DCDCDC;}
.items-timeline .item-header{ position: relative; padding-bottom: 1.5rem;}
.items-timeline .item-header:before{ content: ""; position: absolute; left: -2.5rem; top: .125rem; width: 1rem; height: 1rem; background-color: var(--bs-primary); border-radius: 50%;}
.items-timeline .item-header .item-button{ padding: 0 0 0 3.875rem; position: relative; color: var(--bs-body-color); background-color: transparent; border: none; text-align: left; font-size: .875rem; line-height: calc(1rem + 1px);}
.items-timeline.active .item-header .item-index:before{ background-color: var(--bs-primary); border-color: var(--bs-primary);}
.items-timeline:not(:last-child) .item-body{ padding-bottom: 1.75rem;}
.items-timeline:last-child .item-body{ padding-bottom: 1.25rem;}

.accordion-pt .items-timeline{ padding-left: 0;}
.accordion-pt .items-timeline:before{ display: none;}
.accordion-pt .items-timeline .item-header{ padding-bottom: 0;}
.accordion-pt .items-timeline .item-header:before{ display: none;}
.accordion-pt .items-timeline .item-header .item-accordion-button{ padding: 1rem 2rem 1rem 2.5rem; width: 100%; color: var(--bs-body-color); border: none; border-top: 2px solid var(--bs-border-color); background-color: transparent; text-align: left; position: relative;}
.accordion-pt .items-timeline .item-header .item-accordion-button:before{ content: ""; position: absolute; left: 0; top: 1.125rem; width: 1rem; height: 1rem; background-color: var(--bs-primary); border-radius: 50%;}
.accordion-pt .items-timeline .item-header .item-accordion-button.collapsed:before{ background-color: #A4A4A4;}
.accordion-pt .items-timeline .item-header .item-accordion-button .icon-right{ position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-180deg); transition: all .2s ease;}
.accordion-pt .items-timeline .item-header .item-accordion-button.collapsed .icon-right{ transform: translateY(-50%) rotate(0deg);}
.accordion-pt .items-timeline .item-body{ padding-bottom: 0;}

.accordion-pt .accordion-pt{ margin-top: .5rem;}

/* File Uploaded */
.items-file-uploaded .item-image{ background: #FFFFFF; box-shadow: 0px 3px 6px #00000029; border-radius: .375rem; height: 90px; display: flex; align-items: center; justify-content: center;}
.items-file-uploaded img{width: 100%; height: 100%; object-fit: cover; border-radius: 6px;}
.items-file-uploaded .icon{ color: var(--bs-primary);}
.items-file-uploaded .item-name{ margin-top: .5rem; color: #A4A4A4; line-height: 1.25;}
.items-file-uploaded .item-size{ margin-top: .125rem; color: #A4A4A4; line-height: 1.25;}

/* Chat */
.chat-wrap{ background: #fff; box-shadow: 6px 6px 10px #0000001A; border-radius: .75rem;}
.chat-wrap > .row{ height: 100%;}
.chat-wrap .item-avatar{ width: 2rem; height: 2rem; font-weight: 600; background: #E8FFDB; border: 1px solid #8C8C8C; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: #8C8C8C; border-radius: 50%;}
.chat-header{ padding: 1.625rem 1.375rem .75rem 1.625rem;}
.chat-list{ overflow-y: auto; overflow-x: hidden; list-style: none; margin: 0; padding: 0;}
.chat-list li{ padding: .5rem;}
.chat-list li + li{ border-top: 1px solid #D9D9D9;}
.items-clist{ position: relative; padding: .875rem 1.375rem .625rem 4rem; cursor: pointer; border-radius: .5rem;}
.items-clist:hover,
.items-clist.active{ background-color: var(--bs-primary); color: #fff;}
.items-clist .item-avatar{ position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);}
.items-clist .item-name{ font-weight: 600; margin-bottom: .375rem; font-weight: bold; display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.items-clist .item-text{ display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.items-clist .item-more{ margin-left: .5rem;}
.chat-wrap .item-more .icon{ font-size: 1.125rem; font-weight: bold; vertical-align: top; color: #8C8C8C;}
.chat-wrap .item-search .icon{ font-size: 1.125rem; vertical-align: top; color: #8C8C8C;}
.items-clist:hover .item-more .icon,
.items-clist.active .item-more .icon{ color: #fff;}

.items-chat{ background: #F5F5F7; height: 100%;}
.items-chat .item-no-chat{ width: 100%; height: 100%; padding: 1.5rem; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.items-chat .item-header{ padding: 1.5rem 1.25rem .75rem 1.25rem; border-bottom: 1px solid #D9D9D9;}
.items-chat .item-header .item-name-wrap{ padding-left: 3rem; position: relative;}
.items-chat .item-header .item-name-wrap .item-avatar{ position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.items-chat .item-header .item-name-wrap .item-name{ font-weight: 600;}
.items-chat .item-header .item-name-wrap .item-text{ margin-top: .125rem;}

.items-chat .item-body{ height: calc(100vh - 270px); min-height: 201px; overflow-y: auto; overflow-x: hidden; display: flex; align-items: flex-end; flex-wrap: wrap;}
.chat-messages{ list-style: none; margin: 0; padding: .75rem 1.25rem;}
.chat-messages li{ width: 100%;}
.chat-messages li + li{ padding-top: 1.25rem;}
.chat-messages li .item-wrap{ position: relative;}
.chat-messages li .item-avatar{ position: absolute; top: 0;}
.chat-messages li .item-message{ padding: 1.25rem 1rem; min-width: 49%; max-width: 70%; display: inline-block; line-height: 1.25rem; color: #707070; background-color: #fff; border-radius: 0 .5rem .5rem .5rem; box-shadow: 0px 3px 6px #00000029;}
.chat-messages li .item-media,
.chat-messages li .item-document,
.chat-messages li .item-repeat{ padding: .25rem; min-width: 49%; max-width: 70%; display: inline-block; line-height: 1.25rem; color: #707070; background-color: #fff; border-radius: 0 .5rem .5rem .5rem; box-shadow: 0px 3px 6px #00000029;}
/*.chat-messages li .item-document{ padding: .25rem; min-width: 250px; max-width: 60%;}*/
.chat-messages li .item-media img{ border-radius: .375rem; max-height: 250px; width: 100%; object-fit: cover;}
.chat-messages li .item-media .item-text,
.chat-messages li .item-document .item-text{ padding: .5rem .25rem .25rem;}
.chat-messages li .item-document .item-link{ position: relative; padding: .5rem .5rem .5rem 2rem; background-color: rgba(0,0,0,.03); color: var(--bs-body-color); width: 100%; text-align: left; display: inline-block; vertical-align: top; border-radius: .375rem;}
.chat-messages li .item-document .item-link .icon{ position: absolute; left: .25rem; top: 50%; transform: translateY(-50%);}
.chat-messages li .item-media .item-replay{ padding: .5rem; background-color: rgba(0,0,0,.03); border-left: 3px solid var(--bs-primary); color: var(--bs-body-color); width: 100%; text-align: left; display: inline-block; vertical-align: top; border-radius: .375rem;}
.chat-messages li .item-media .item-replay .item-name{ font-weight: 600; color: var(--bs-primary);}
.chat-messages li .item-media .item-replay .item-text{ padding: .25rem 0 0;}
.chat-messages li .item-repeat .item-title{ padding: .25rem;}
.chat-messages li .item-repeat .item-text{ padding: .5rem .25rem; margin-top: .25rem; text-align: center; background-color: rgba(0,0,0,.03); border-radius: .375rem;}
.chat-messages li .item-time{ margin-top: .75rem;}
.chat-messages li.sender .item-wrap{ padding-right: 2.75rem; text-align: right;}
.chat-messages li.receiver .item-wrap{ padding-left: 2.75rem; text-align: left;}
.chat-messages li.sender .item-avatar{ right: 0; background: #FBF1BF;}
.chat-messages li.receiver .item-avatar{ left: 0;}
.chat-messages li.sender .item-message,
.chat-messages li.sender .item-media,
.chat-messages li.sender .item-document,
.chat-messages li.sender .item-repeat{ background-color: #E8FFDB; border-radius: .5rem 0 .5rem .5rem;}

.items-chat .item-footer{ padding: .75rem 1.25rem;}
.items-chat .item-footer .item-textarea{ padding: .625rem; background-color: #fff; border: 1px solid #A4A4A4; border-radius: .5rem;}
.items-chat .item-footer .item-textarea .form-control{ height: 2.5rem; border: none; padding-left: .375rem; padding-right: 0;}
.items-chat .item-footer .item-textarea .btn-file{ position: relative;}
.items-chat .item-footer .item-textarea .btn-file input[type="file"]{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.items-chat .item-footer .item-textarea .icon{ font-size: 1.125rem; vertical-align: top; color: #8C8C8C;}

.items-checklist .item-label{ margin-top: 1rem; padding-top: .5rem; font-weight: 500;}
.items-checklist .form-check{ margin-top: 1rem;}

.items-plant-stage{ text-align: center; font-size: .875rem; line-height: 1.125rem;}
.items-plant-stage .item-stage{ display: flex; flex-direction: column;}
.items-plant-stage .item-stage .item-text{ padding: 0 .5rem;}
.items-plant-stage .item-stage .item-count{ position: relative; margin-top: auto; margin-bottom: 1rem;}
.items-plant-stage .item-stage .item-count:before{ content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: var(--bs-border-color);}
.items-plant-stage .item-stage .item-count span{ width: 5.25rem; height: 5.25rem; font-size: 1.875rem; color: #66697a; display: inline-flex; align-items: center; justify-content: center; background-color: #D0EAD3; position: relative; z-index: 1; border-radius: 50%;}

.modal-header-qr{ padding: var(--bs-modal-header-padding); padding-bottom: 0; margin-bottom: 103px; background: var(--bs-primary); text-align: center; border-top-left-radius: var(--bs-modal-inner-border-radius); border-top-right-radius: var(--bs-modal-inner-border-radius);}
.modal-header-qr .item-qr{ width: 206px; margin-bottom: -103px; display: inline-block; background-color: #fff;}

.po-download-pdf{ width: 582px; margin: 1rem auto; background-color: #fff; border-radius: .75rem;box-shadow: .375rem .375rem .625rem rgba(0, 0, 0, 0.1);}
.po-download-pdf .pdf-header-qr{ padding: 1.875rem 1.875rem 0; padding-bottom: 0; margin-bottom: 103px; background: var(--bs-primary); text-align: center; border-top-left-radius: .75rem; border-top-right-radius: .75rem;}
.po-download-pdf .pdf-header-qr .item-qr{ width: 206px; margin-bottom: -103px; display: inline-block; background-color: #fff;}
.po-download-pdf .pdf-body{ padding: 0 1.875rem;}

.bo-process-timeline{ padding: 1.25rem 0;}
.bo-process-timeline .bo-header-info{ margin-bottom: 1.75rem; background-color: #fff; box-shadow: .375rem .375rem .625rem rgba(0, 0, 0, 0.1); border-radius: .75rem;}
.bo-process-timeline .bo-header-info .item-logo{ padding: 1rem; background-color: #fff; height: 100%; display: flex; align-items: center; justify-content: center;}
.bo-process-timeline .bo-header-info .item-top-bg{ height: 74px; background-color: var(--bs-primary); border-radius: .75rem .75rem 0 0;}
.bo-process-timeline .bo-header-info .item-info{ padding: 1rem 1rem .5rem; margin-top: -74px;}

.items-map-info{ margin-top: 1.375rem;}
.items-map-info .item-wrap{ position: relative; padding-left: 3.75rem; min-height: 3rem; display: flex; align-items: center;}
.items-map-info .item-wrap .item-icon{ position: absolute; left: 0; top: 0;}
.items-map-info .item-wrap .item-icon .icon-text{ width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1.5rem; font-weight: 600; color: #fff; border-radius: 50%;}

/* @media CSS */
@media (max-width: 1199.98px) {
  .header{ left: 0;}
  .main-content{ padding-left: 0;}
  .sidebar{ width: 16.375rem; left: -16.375rem;}
  .sidebar-active .sidebar{ left: 0; box-shadow: 6px 6px 10px #0000001A;}
  .sidebar .sidebar-header .sidebar-toggle{ right: -3rem; transform: rotate(-180deg);}
  .sidebar-active .sidebar .sidebar-header .sidebar-toggle{ right: .75rem; transform: rotate(0deg);}
  .sidebar-active .sidebar .sidebar-overlay{ visibility: visible; opacity: 1;}

  .card {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-title-spacer-y: 1.25rem;
  }
  .card-table,
  .card-table-top {
    --bs-card-spacer-y: 0;
    --bs-card-spacer-x: 0;
    --bs-card-cap-padding-y: 1.25rem;
    --bs-card-cap-padding-x: 1.625rem;
  }
  .card-db,
  .card-cl {
    --bs-card-spacer-y: .875rem;
    --bs-card-spacer-x: .875rem;
  }
}
@media (max-width: 991px) {
  .items-repeat.bordered.total:after{ width: 100%;}

  .chat-list{ max-height: calc(100vh - 143px);}
  .items-chat{ border-radius: 0 0 .75rem .75rem;}
  .items-chat .item-body{ height: calc(100vh - 249px);}
}
@media (max-width: 767px) {
  .notification-dropdown-menu { min-width: 300px; max-width: 300px;}
  .notification-dropdown-menu .item-title{ padding: .75rem;}
  .notification-dropdown-menu .item-body { max-height: 244px;}
  .notification-dropdown-menu .item-list { padding: .75rem .75rem .75rem 3.5rem; min-height: 3.75rem;}
  .notification-dropdown-menu .item-list .item-image{ left: .75rem; height: 2rem; width: 2rem;}
  .notification-dropdown-menu .item-list .item-text{ font-size: .875rem; line-height: 1.125rem; margin-bottom: .125rem;}
  .notification-dropdown-menu .item-list .item-time{ font-size: .75rem; line-height: 1rem;}

  .table > thead > tr > th{ padding: 1rem .5rem; white-space: nowrap;}
  .table > tbody > tr > td{ padding: .75rem 0 .75rem .5rem;}
  .table > thead > tr > th:first-child,
  .table > tbody > tr > td:first-child{ padding-left: 1rem;}
  .table > thead > tr > th:last-child,
  .table > tbody > tr > td:last-child{ padding-right: 1rem;}
  .table > thead > tr > th:not(:first-child) .divider,
  .table > tbody > tr.thead > th:not(:first-child) .divider{ top: 1rem; bottom: 1rem;}
  .table > tbody > tr > td .items-action .item-link + .item-link{ margin-left: .75rem;}

  .items-icon-action .item-link + .item-link{ margin-left: .75rem;}

  .card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 1rem;
  }
  .card-table,
  .card-table-top {
    --bs-card-spacer-y: 0;
    --bs-card-spacer-x: 0;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1rem;
  }
  .card-db,
  .card-cl {
    --bs-card-spacer-y: .875rem;
    --bs-card-spacer-x: .875rem;
  }

  .avatar-wrap{ padding-left: 2.5rem;}
  .int-check-wrap .icon-check-delete{ top: .75rem;}

  .modal-title{ font-size: 1.25rem;}

  .chat-messages li .item-message{ padding: .5rem;}

  .items-plant-stage .item-stage{ flex: 1 0 50%;}
  .accordion-pt .accordion-pt .items-timeline{ padding-left: 3rem;}
}
@media (max-width: 575px) {
  .pagination .page-item .page-link{ min-width: 2.125rem; height: 2.125rem;}

  .modal-footer:not(.bordered) > *:first-child{ margin-top: 0;}
  .modal-footer > .btn{ width: 100%;}

  .items-upload-photo .item-avatar{ margin: 0 auto;}
  .items-upload-photo .item-btns{ margin: 0;}
  .items-upload-photo .item-btns > *{ margin-top: 1rem; width: 100%;}
  .items-upload-photo .item-btns .btn{ width: 100%;}
  .form-buttons > .btn{ width: 100%;}
  .form-buttons > .btn + .btn{ margin-left: 0; margin-top: 1.25rem;}
  .w-xs-100{ width: 100%;}

  .items-repeat{ margin-left: 0; margin-right: 0;}

  .chat-messages li .item-message{ min-width: 82%; max-width: 82%;}

  .items-plant-stage .item-stage{ flex: 1 0 100%;}
  .accordion-pt .accordion-pt .items-timeline{ padding-left: 2rem;}
}
@media (min-width: 576px) {
  .modal {
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-padding-x: 1.5rem;
    --bs-modal-header-padding-y: 1.5rem;
    --bs-modal-header-padding: 1.5rem 1.5rem;
    --bs-modal-title-line-height: 1.5rem;
    --bs-modal-footer-gap: 1.5rem;
  }
  .modal-dialog{ margin: var(--bs-modal-margin);}
  .modal-sm{ --bs-modal-width: 560px; margin-left: auto; margin-right: auto;}
  .modal-footer:not(.bordered) > *{ margin-top: 0;}

  .items-upload-photo{ position: relative; padding-left: 178px; min-height: 148px; display: flex; align-items: center; flex-wrap: wrap;}
  .items-upload-photo .item-avatar{ position: absolute; left: 0; top: 0;}
  .items-upload-photo .item-btns{ display: flex; margin: 0 -.875rem;}
  .items-upload-photo .item-btns > *{ margin: 0 .875rem .75rem;}

  .bo-process-timeline .bo-header-info .item-info h5{ color: #fff;}
  .bo-process-timeline .ps-7per{ padding-left: 6.25%;}
}
@media (min-width: 768px) {
  .modal {
    --bs-modal-width: 682px;
    --bs-modal-padding: 1.875rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-header-padding-x: 1.875rem;
    --bs-modal-header-padding-y: 1.875rem;
    --bs-modal-header-padding: 1.875rem 1.875rem;
    --bs-modal-title-line-height: 1.875rem;
    --bs-modal-footer-gap: calc(2rem - 2px);
  }
  .modal-sm{ --bs-modal-width: 582px;}
  .modal-dialog{ margin: var(--bs-modal-margin) auto;}

  .accordion-pt .accordion-pt .items-timeline{ padding-left: 5rem;}

  .bo-process-timeline .bo-header-info .item-top-bg{ height: 90px;}
  .bo-process-timeline .bo-header-info .item-info{ padding: 2.25rem 1.875rem .5rem; margin-top: -90px;}
  .bo-process-timeline .ps-7per{ padding-left: 2.25%;}
}
@media (min-width: 992px) {
  .modal-lg{ --bs-modal-width: 920px;}
  .modal-header-close .btn-close{ top: 50%; transform: translateY(-50%); margin-top: 0;}

  .chat-wrap{ height: calc(100vh - 105px); min-height: 366px;}
  .chat-list{ height: calc(100vh - 183px); min-height: 288px;}
  .items-chat{ border-radius: 0 .75rem .75rem 0;}

  .bo-process-timeline .ps-7per{ padding-left: 5.25%;}
}
@media (min-width: 1200px) {
  .sidebar-active .header{ left: 4.625rem;}
  .sidebar-active .main-content{ padding-left: 4.625rem;}
  .sidebar-active .sidebar{ width: 4.625rem;}
  .sidebar-active .sidebar-header .sidebar-toggle{ right: -2rem; transform: rotate(-180deg);}
  .sidebar-active .sidebar-header .navbar-brand .brand-text,
  .sidebar-active .sidebar .navbar-nav .nav-item .nav-link .item-name,
  .sidebar-active .sidebar .navbar-nav .nav-item .nav-link .right-icon{ transition: all 400ms ease; transform: translateX(-100%) scale(0); opacity: 0;}
  .sidebar-active .sidebar .navbar-nav .nav-item .nav-link{ padding: var(--bs-nav-link-padding-y) .75rem;}
  .sidebar-active .sidebar .navbar-nav .nav-item .nav-link .icon-sub{ position: relative; transform: translateX(5px) scale(1); opacity: 1;}

  .bo-process-timeline .ps-7per{ padding-left: 7.25%;}
}
@media (min-width: 1440px) {
  .container{ max-width: 1432px;}
}
@media (min-width: 1600px) {
  .accordion-pt .accordion-pt .items-timeline{ padding-left: 6rem;}
}