:root {
  --primary: #4a7443;
  --primary-hover: #436a3d;
  --primary-soft: #edf1ec;
  --secondary: #ef552a;
  --secondary-100: #facabd;
  --secondary-800: #832f17;
  --secondary-hover: #d94d26;
  --secondary-soft: #fdeeea;
  --success: #198754;
  --success-hover: #177b4c;
  --success-soft: #e8f3ee;
  --danger: #dc3545;
  --danger-hover: #c8303f;
  --danger-soft: #fcebec;
  --danger-50: #fcebec;
  --warning: #ffc107;
  --warning-hover: #e8b006;
  --warning-soft: #fff9e6;
  --info: #0dcaf0;
  --info-hover: #0cb8da;
  --info-soft: #e7fafe;
  --info-100: #b4effa;
  --info-800: #076f84;
  --gradient-green: linear-gradient(90deg, #3b5e34 0%, #9bbd58 100%);
  --gradient-primary: linear-gradient(90deg, #395D33 0%, #284224 100%);
  --gradient-orange: linear-gradient(90deg, #d63b10 0%, #ef552a 0%);
  --primary-50: #EBEFEB;
  --primary-100: #c2cdc0;
  --primary-200: #acbfa9;
  --primary-500: #395d33;
  --primary-800: #1f331c;

  --text-1: #ffffff;
  --text-2: #f5f5f5;
  --text-3: #ededed;
  --text-4: #e0e0e0;
  --text-5: #c2c2c2;
  --text-6: #9e9e9e;
  --text-7: #757575;
  --text-8: #616161;
  --text-9: #404040;
  --text-10: #0a0a0a;

  --text-soft-primary: #5b4400;
  --text-soft-secondary: #2a326b;
  --text-soft-success: #0e4a2e;
  --text-soft-danger: #791d26;
  --text-soft-warning: #8c6a04;
  --text-soft-info: #076f84;

  /* custom bawaan template */

  --bs-primary-light: #f6f2e6 !important;
  --bs-primary-clarity: #c3a754 !important;
  --bs-menu-link-bg-color-active: var(--gradient-green) !important;
  --bs-menu-link-color-active: var(--text-1) !important;
  /* --bs-menu-link-bg-color-active: #EDF1EC !important; */
  --bs-primary: var(--primary);
  --bs-primary-active: var(--primary-hover) !important;
  --bs-success: var(--success);
  --bs-success-active: var(--success-hover) !important;
  --bs-danger: var(--danger);
  --bs-danger-active: var(--danger-hover) !important;
  --bs-warning: var(--warning);
  --bs-warning-active: var(--warning-hover) !important;
  --bs-info: var(--info);
  --bs-info-active: var(--info-hover) !important;
  --bs-secondary: var(--text-6) !important;
}

.bg-neutral-10 {
  background-color: var(--text-1) !important;
  border: 1px solid var(--text-4) !important;
}

.bg-neutral-20 {
  background-color: var(--text-2) !important;
  border: 1px solid var(--text-4) !important;
}

.bg-custom-orange {
  background-image: var(--gradient-orange) !important;
  border: 1px solid var(--text-4) !important;
}

.bg-success-50 {
  background-color: var(--success-soft) !important;
}

.bg-primary-200 {
  background-color: var(--primary-200) !important;
}

.bg-primary-500 {
  background-color: var(--primary-500) !important;
}
.bg-primary-800 {
  background-color: var(--primary-800) !important;
}

.bg-secondary-100 {
  background-color: var(--secondary-100) !important;
}

.bg-secondary-800 {
  background-color: var(--secondary-800) !important;
}

.text-7 {
  color: var(--text-7) !important;
}
.text-10 {
  color: var(--text-10) !important;
}

.text-1 {
  color: var(--text-1) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.text-primary-500 {
  color: var(--primary-500) !important;
}

.text-red {
  color: var(--danger) !important;
}

.app-header {
  border-bottom: 1px solid #e0e0e0 !important;
  background-color: #ffffff !important;
}

.app-sidebar {
  border-right: 1px solid #e0e0e0 !important;
  background-color: var(--primary-soft) !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.app-sidebar-logo {
  border-bottom: 1px solid #e0e0e0 !important;
  background-color: var(--primary-soft) !important;
  padding-bottom: 20px !important;
}

.app-navbar-item .btn-icon {
  color: var(--text-6) !important;
  border: 1px solid var(--text-4) !important;
}

.menu-active-bg .menu-item .menu-link.active {
  transition: color 0.2s ease;
  background: var(--bs-menu-link-bg-color-active) !important;
}
.menu-active-bg .menu-item .menu-link.active .menu-title {
  color: var(--bs-menu-link-color-active) !important;
}
.menu-active-bg .menu-item .menu-link.active .menu-icon,
.menu-active-bg .menu-item .menu-link.active .menu-icon .svg-icon,
.menu-active-bg .menu-item .menu-link.active .menu-icon i {
  color: var(--bs-menu-link-color-active) !important;
}
.menu-active-bg .menu-item .menu-link.active .menu-bullet .bullet {
  background: var(--bs-menu-link-color-active) !important;
}
.menu-active-bg .menu-item .menu-link.active .menu-arrow:after {
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--bs-menu-link-color-active) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-menu-link-color-active%29'%3e%3cpath d='M2.72011 2.76429L4.46358 1.02083C4.63618 0.848244 4.63617 0.568419 4.46358 0.395831C4.29099 0.223244 4.01118 0.223244 3.83861 0.395831L1.52904 2.70537C1.36629 2.86808 1.36629 3.13191 1.52904 3.29462L3.83861 5.60419C4.01117 5.77675 4.29099 5.77675 4.46358 5.60419C4.63617 5.43156 4.63617 5.15175 4.46358 4.97919L2.72011 3.23571C2.58994 3.10554 2.58994 2.89446 2.72011 2.76429Z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-menu-link-color-active%29'%3e%3cpath d='M2.72011 2.76429L4.46358 1.02083C4.63618 0.848244 4.63617 0.568419 4.46358 0.395831C4.29099 0.223244 4.01118 0.223244 3.83861 0.395831L1.52904 2.70537C1.36629 2.86808 1.36629 3.13191 1.52904 3.29462L3.83861 5.60419C4.01117 5.77675 4.29099 5.77675 4.46358 5.60419C4.63617 5.43156 4.63617 5.15175 4.46358 4.97919L2.72011 3.23571C2.58994 3.10554 2.58994 2.89446 2.72011 2.76429Z'/%3e%3c/svg%3e");
  /*rtl:begin:remove*/
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--bs-menu-link-color-active) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-menu-link-color-active%29'%3e%3cpath d='M3.27989 3.23571L1.53642 4.97917C1.36382 5.15176 1.36383 5.43158 1.53642 5.60417C1.70901 5.77676 1.98882 5.77676 2.16139 5.60417L4.47096 3.29463C4.63371 3.13192 4.63371 2.86809 4.47096 2.70538L2.16139 0.395812C1.98883 0.22325 1.70901 0.22325 1.53642 0.395812C1.36383 0.568437 1.36383 0.84825 1.53642 1.02081L3.27989 2.76429C3.41006 2.89446 3.41006 3.10554 3.27989 3.23571Z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-menu-link-color-active%29'%3e%3cpath d='M3.27989 3.23571L1.53642 4.97917C1.36382 5.15176 1.36383 5.43158 1.53642 5.60417C1.70901 5.77676 1.98882 5.77676 2.16139 5.60417L4.47096 3.29463C4.63371 3.13192 4.63371 2.86809 4.47096 2.70538L2.16139 0.395812C1.98883 0.22325 1.70901 0.22325 1.53642 0.395812C1.36383 0.568437 1.36383 0.84825 1.53642 1.02081L3.27989 2.76429C3.41006 2.89446 3.41006 3.10554 3.27989 3.23571Z'/%3e%3c/svg%3e");
  /*rtl:end:remove*/
}

@font-face {
  font-family: "Material Symbol";
  src: url("/fonts/Material Symbols Variable.ttf") format("truetype");
}

.icon {
  font-family: "Material Symbol" !important;
  font-weight: normal;
  font-style: normal;
  font-size: 20px !important;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.breadcrumb > li + li:before {
  color: var(--text-7);
  content: "> ";
  padding: 0 5px;
}

#kt_app_content {
  margin: 24px;
}

.app-sidebar-secondary {
  border-right: 1px solid var(--text-4);
}

.app-sidebar-primary {
  margin: 0px !important;
  border-right: 1px solid var(--text-4);
}

* {
  font-family: Inter !important;
}

/* Common Style */
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
p {
  font-family: "Inter" !important;
  color: var(--text-10) !important;
  font-weight: 500;
  line-height: 150%;
}

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

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

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

.fs-52 {
  font-size: 52px !important;
}

.fs-36 {
  font-size: 36px !important;
}

.fs-32 {
  font-size: 32px !important;
}

.fs-28 {
  font-size: 28px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-10 {
  font-size: 10px !important;
}

.btn {
  display: inline-flex;
  height: 45px;
  padding: 8px 14px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); */
}

.btn-action {
  display: inline-flex;
  height: 35px;
  padding: 5px 10px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); */
}

.btn-primary {
  border-radius: 4px !important;
  background-color: var(--primary) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--primary-hover) !important;
}

.btn-primary:active {
  box-shadow: 0 0 0px 4px #86a281 !important;
}

.btn-secondary {
  background: var(--secondary) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  border-radius: 4px !important;
  --bs-btn-hover-bg: var(--secondary-hover) !important;
}

.btn-check:active + .btn.btn-secondary,
.btn-check:checked + .btn.btn-secondary,
.btn.btn-secondary.active,
.btn.btn-secondary.show,
.btn.btn-secondary:active:not(.btn-active),
.btn.btn-secondary:focus:not(.btn-active),
.btn.btn-secondary:hover:not(.btn-active),
.show > .btn.btn-secondary {
  background-color: var(--secondary-hover) !important;
}

.btn-success {
  border-radius: 4px !important;
  background-color: var(--success) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: #fff !important;
}

.btn-success:hover {
  background-color: var(--success-hover) !important;
}

.btn-success:active {
  box-shadow: 0 0 2px 3px #65af8c !important;
}

.btn-danger {
  border-radius: 4px !important;
  background-color: var(--danger) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: #fff !important;
}

.btn-danger:hover {
  background-color: var(--danger-hover) !important;
}

.btn-danger:active {
  box-shadow: 0 0 2px 3px #e87882 !important;
}

.btn-warning {
  border-radius: 4px !important;
  background-color: var(--warning) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: var(--text-10) !important;
}

.btn-warning:hover {
  background-color: var(--warning-hover) !important;
}

.btn-warning:active {
  box-shadow: 0 0 2px 3px #ffd559 !important;
}

.btn-info {
  border-radius: 4px !important;
  background-color: var(--info) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: var(--text-10);
}

.btn-info:hover {
  background-color: var(--info-hover) !important;
}

.btn-info:active {
  box-shadow: 0 0 2px 3px #5ddbf5 !important;
}

.btn-outline-primary {
  border-radius: 4px !important;
  background-color: var(--text-1) !important;
  color: var(--Neutral-100, #0a0a0a) !important;
  border: 1px solid var(--text-4, #e0e0e0) !important;
  /* font-family: "Open Sans" !important; */
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}

.btn-outline-primary:hover {
  color: var(--primary-hover) !important;
}

.btn-outline-primary:active {
  box-shadow: 0 0 0px 3px #86a281 !important;
}

.btn-outline-success {
  border-radius: 4px !important;
  background-color: var(--text-1) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: var(--success) !important;
  border: 1px solid var(--text-4, #e0e0e0) !important;
}

.btn-outline-success:hover {
  color: var(--success-hover) !important;
}

.btn-outline-success:active {
  box-shadow: 0 0 0px 3px #65af8c !important;
}

.btn-outline-danger {
  border-radius: 4px !important;
  background-color: var(--text-1) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: var(--danger) !important;
  border: 1px solid var(--text-4, #e0e0e0) !important;
}

.btn-outline-danger:hover {
  color: var(--danger-hover) !important;
}

.btn-outline-danger:active {
  box-shadow: 0 0 0px 3px #e87882 !important;
}

.btn-tutup {
  background-color: var(--text-1) !important;
  border: 1px solid var(--text-5) !important;
}
.btn-tutup:hover {
  background-color: var(--text-4) !important;
}
.btn-tutup:active {
  background-color: var(--text-4) !important;
}

.btn-outline-warning {
  border-radius: 4px !important;
  background-color: var(--text-1) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: var(--warning) !important;
  border: 1px solid var(--text-4, #e0e0e0) !important;
}

.btn-outline-warning:hover {
  color: var(--warning-hover) !important;
}

.btn-outline-warning:active {
  box-shadow: 0 0 0px 3px #ffd559 !important;
}

.btn-outline-info {
  border-radius: 4px !important;
  background-color: var(--text-1) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: var(--info) !important;
  border: 1px solid var(--text-4, #e0e0e0) !important;
}

.btn-outline-info:hover {
  color: var(--info-hover) !important;
}

.btn-outline-warning:active {
  box-shadow: 0 0 0px 3px #5ddbf5 !important;
}

.btn-def-primary {
  border-radius: 4px !important;
  background-color: var(--text-2) !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}

.btn-def-primary:hover {
  background-color: var(--text-3) !important;
  color: var(--primary-hover) !important;
}

.btn-def-primary:active {
  box-shadow: 0 0 0px 3px #86a281 !important;
}

.btn-def-success {
  border-radius: 4px !important;
  background-color: var(--text-2) !important;
  color: var(--success) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}

.btn-def-success:hover {
  background-color: var(--text-3) !important;
  color: var(--success-hover) !important;
}

.btn-def-success:active {
  box-shadow: 0 0 0px 3px #65af8c !important;
}

.btn-def-danger {
  border-radius: 4px !important;
  background-color: var(--text-2) !important;
  color: var(--danger) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}

.btn-def-danger:hover {
  background-color: var(--text-3) !important;
  color: var(--danger-hover) !important;
}

.btn-def-danger:active {
  box-shadow: 0 0 0px 3px #e87882 !important;
}

.btn-def-warning {
  border-radius: 4px !important;
  background-color: var(--text-2) !important;
  color: var(--warning) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}

.btn-def-warning:hover {
  background-color: var(--text-3) !important;
  color: var(--warning-hover) !important;
}

.btn-def-warning:active {
  box-shadow: 0 0 0px 3px #ffd559 !important;
}

.btn-def-info {
  border-radius: 4px !important;
  background-color: var(--text-2) !important;
  color: var(--info) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}

.btn-def-info:hover {
  background-color: var(--text-3) !important;
  color: var(--info-hover) !important;
}

.btn-def-info:active {
  box-shadow: 0 0 0px 3px #5ddbf5 !important;
}

.dot {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot {
  position: relative;
  margin-bottom: 2px !important;
}

.status-dot::before {
  content: "●"; /* Menambahkan titik */

  left: 0; /* Tempatkan titik di awal */
  font-size: 1.5em; /* Ukuran titik */
  line-height: 1; /* Menyesuaikan dengan teks */
}

.badge {
  padding: 4px 6px;
  border-radius: 6px;
  font-weight: 500 !important;
  gap: 0.25rem !important;
}

.badge-primary {
  background-color: var(--success-soft) !important;
  color: var(--primary) !important;
}
.badge-secondary.badge-outline {
  border: 1px solid var(--text-4) !important;
  background-color: var(--text-1) !important;
}
.badge-primary-akses {
  background-color: var(--text-2) !important;
  color: var(--text-10) !important;
}

.badge-soft-primary {
  background-color: var(--primary-soft) !important;
  color: var(--text-soft-primary) !important;
}

.badge-success {
  background-color: var(--success) !important;
  color: var(--text-1) !important;
}

.badge-soft-success {
  background-color: var(--primary-50) !important;
  color: var(--primary-800) !important;
}

.badge-danger {
  background-color: var(--danger) !important;
  color: var(--text-1) !important;
}

.badge-soft-danger {
  background-color: var(--danger-soft) !important;
  color: var(--text-soft-danger) !important;
}

.badge-soft-purple {
  background-color: #DFEAFF !important;
  color: var(--text-10) !important;
}

.badge-warning {
  background-color: var(--warning) !important;
  color: var(--text-10) !important;
}

.badge-soft-warning {
  background-color: var(--warning-soft) !important;
  color: var(--text-soft-warning) !important;
}

.badge-info {
  background-color: var(--info) !important;
  color: var(--text-10) !important;
}

.badge-soft-info {
  background-color: var(--info-soft) !important;
  color: var(--text-soft-info) !important;
}

.color-text-1 {
  color: var(--text-1) !important;
}

.color-text-2 {
  color: var(--text-2) !important;
}

.color-text-3 {
  color: var(--text-3) !important;
}

.color-text-4 {
  color: var(--text-4) !important;
}

.color-text-5 {
  color: var(--text-5) !important;
}

.color-text-6 {
  color: var(--text-6) !important;
}

.color-text-7 {
  color: var(--text-7) !important;
}

.color-text-8 {
  color: var(--text-8) !important;
}

.color-text-9 {
  color: var(--text-9) !important;
}

.color-text-10 {
  color: var(--text-10) !important;
}

.color-primary {
  color: var(--primary) !important;
}

.color-primary-100 {
  color: var(--primary-100) !important;
}

.color-secondary {
  color: var(--secondary) !important;
}

.color-success {
  color: var(--success) !important;
}

.color-soft-success {
  color: var(--text-soft-success) !important;
}

.color-danger {
  color: var(--danger) !important;
}

.color-warning {
  color: var(--warning) !important;
}

.color-info {
  color: var(--info) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-soft-primary {
  background-color: var(--primary-soft) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.bg-def-success {
  background-color: var(--success-soft) !important;
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-danger-800 {
  background-color: var(--text-soft-danger) !important;
}

.bg-danger-50 {
  background-color: var(--danger-50) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-info {
  background-color: var(--info) !important;
}
.bg-info-100 {
  background-color: var(--info-100) !important;
}
.bg-info-800 {
  background-color: var(--info-800) !important;
}

.bg-review {
  background-color: var(--text-4) !important;
  border-radius: 10px !important;
}

.bg-soft-info {
  background-color: var(--info-soft) !important;
}

.bg-pembayaran {
  background-image: url("/images/Pembayaran.svg");
  align-items: stretch;
  padding: 24px 30px 32px 30px;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 6px;
}

.bg-terbayar {
  background-image: url("/images/Terbayar.svg");
  border: 1px solid var(--Success-400, #479f76);
  align-items: stretch;
  padding: 24px 30px 32px 30px;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 6px;
}

.bg-data {
  background-image: url("/images/Data-dashboard-akuntansi.svg");
  background-color: #ffffff;
  background-position-x: 10px;
  /* object-fit: cover; */
  align-items: stretch;
  border: 1px solid var(--Neutral-40, #e0e0e0);
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover !important;
  border-radius: 6px;
}

form input {
  border: 1px solid var(--text-4);
  font-size: 14px !important;
  height: 34px !important;
  border-radius: 6px !important;
}

.form-control,
.input-group-text,
.form-select,
.select2-selection {
  min-height: 40px !important;
}

.form-control.krajee-datepicker {
  border-top-left-radius: unset !important;
  border-bottom-left-radius: unset !important;
}

.input-number-control {
  border-radius: unset !important;
}

.kv-fileinput-caption {
  border-top-left-radius: unset !important;
  border-bottom-left-radius: unset !important;
}

form select {
  display: flex;
  height: 34px;
  font-size: 14px !important;
  padding: 10px 14px;
  align-items: center;
  /* gap: 8px; */
  align-self: stretch;
  line-height: 1 !important;
  border-radius: 6px !important;
}

form textarea {
  font-size: 14px !important;
  border-radius: 6px !important;
}

.input-group-text {
  height: 34px;
  background-color: var(--text-2);
  border-radius: 0.375rem;
}

input[inputmode="numeric"] {
  border-radius: unset !important;
}

input[readonly],
textarea[readonly],
input[disabled] {
  background-color: var(--text-2) !important;
}

.p-26-30 {
  padding: 26px 30px;
}

.p-16-24 {
  padding: 16px 24px;
}

#table-jasa tr td {
  padding: 16px 24px;
}

.card {
  box-shadow: none !important;
  border: 1px solid var(--text-4);
}

.card-header {
  border-bottom: 1px solid var(--text-4) !important;
}

.card-footer {
  border-top: 1px solid var(--text-4) !important;
}

.kv-table-header tr th {
  background-color: #f5f5f5 !important;
  padding: 16px 24px !important;
  color: var(--text-10) !important;
  font-size: 14px;
  font-weight: 500;
}

.kv-grid-table.table-striped > .kv-table-header tr th {
  background-color: #fff !important;
}


.kv-table-header tr th a {
  color: var(--text-10) !important;
  font-size: 14px;
  font-weight: 500;
}

#kv-grid-table .kv-table-header tr {
  border-color: var(--text-4);
}

#kv-grid-table .kv-table-header tr {
  border-color: var(--text-4);
}

.kv-grid-table tbody tr {
  border-color: var(--text-4);
}

.kv-grid-table tbody tr {
  border-color: var(--text-4);
}

.kv-table-header {
  border-bottom: 1px solid var(--text-4) !important;
}

.pagination .active a {
  background-color: var(--primary) !important;
  color: var(--text-1) !important;
}

.breadcrumb li {
  font-size: 14px !important;
}

/* *** === *** */

/* Custom Template Style */
a {
  color: var(--text-7) !important;
}

.breadcrumb .active {
  color: var(--primary);
}

.rounded {
  border-radius: 6px !important;
}

.required::after {
  display: none !important;
}

@media (min-width: 270px) {
  /* chartjs canvas dash pimpinan */
  #cv_tipe_pegawai,
  .cv_dashboard,
  #cv_kel_umur {
    width: 210px !important;
  }

  #cv_tx_tipe_pegawai>span:first-child,
  .cv_tx_dashboard>span:first-child {
    font-size: 9px !important;
  }

  #cv_tx_tipe_pegawai>span:last-child,
  .cv_tx_dashboard>span:last-child {
    font-size: 12px !important;
  }

  .cv_tx_dashboard {
    top: 42% !important;
  }
  /* tutup  dash pimpinan*/
}


@media (min-width: 395.1px) {
  /* chartjs canvas dash pimpinan */
  #cv_tipe_pegawai,
  .cv_dashboard,
  #cv_kel_umur {
    width: 350px !important;
  }
  #cv_tx_tipe_pegawai > span:first-child,
  .cv_tx_dashboard>span:first-child {
    font-size: 10px !important;
  }
  #cv_tx_tipe_pegawai > span:last-child,
  .cv_tx_dashboard>span:last-child {
    font-size: 20px !important;
  }
  .cv_tx_dashboard {
    top: 43% !important;
  }
  /* tutup  dash pimpinan*/
}

@media (min-width: 576px) {
  /* chartjs canvas dash pimpinan */
  #cv_tipe_pegawai,
  .cv_dashboard,
  #cv_kel_umur {
    width: 400px !important;
  }
  #cv_tx_tipe_pegawai > span:first-child,
  .cv_tx_dashboard>span:first-child {
    font-size: 10px !important;
  }
  #cv_tx_tipe_pegawai > span:last-child,
  #cv_tx_dashboard > span:last-child {
    font-size: 20px !important;
  }
  .cv_tx_dashboard {
    top: 45% !important;
  }
  /* tutup  dash pimpinan*/
}

@media (min-width: 768px) {
  /* chartjs canvas dash pimpinan */
  #cv_tipe_pegawai, 
  #cv_kel_umur {
    width: 250px !important;
  }
  
  .cv_dashboard {
    width: 300px !important;
  }
  .cv_tx_dashboard > span:first-child {
    font-size: 10px !important;
  }
  .cv_tx_dashboard > span:last-child {
    font-size: 20px !important;
  }
  /* tutup  dash pimpinan*/
}

@media (min-width: 992px) {
  /* chartjs canvas dash pimpinan */
  #cv_tipe_pegawai,
  #cv_kel_umur {
    width: 270px !important;
  }
  #cv_tx_tipe_pegawai > span:first-child {
    font-size: 10px !important;
  }
  #cv_tx_tipe_pegawai > span:last-child {
    font-size: 14px !important;
  }

  .cv_dashboard, 
  #cv_kel_umur {
    width: 300px !important;
  }
  .cv_tx_dashboard > span:first-child {
    font-size: 10px !important;
  }
  .cv_tx_dashboard > span:last-child {
    font-size: 20px !important;
  }
  /* tutup  dash pimpinan*/
}

@media (min-width: 1200px) {
  /* chartjs canvas dash pimpinan */
  #cv_tipe_pegawai,
  .cv_dashboard,
  #cv_kel_umur {
    width: 380px !important;
  }
  #cv_tx_tipe_pegawai > span:first-child,
  .cv_tx_dashboard>span:first-child {
    font-size: 10px !important;
  }
  #cv_tx_tipe_pegawai > span:last-child,
  .cv_tx_dashboard>span:last-child {
    font-size: 20px !important;
  }
  /* tutup  dash pimpinan */
}

/* @media (max-width: 576px) {
  .btn-group-md-vertical#btn-group {
    width: 100% !important;
  }
} */

@media (max-width: 576px) {
  .btn-group {
    all: unset !important;
  }

  .btn-group-md-vertical#btn-group {
    width: 100% !important;
  }

  .btn-group>.btn-group:not(:first-child), .btn-group>:not(.btn-check:first-child)+.btn {
    margin-left: unset;
  }

  .btn-group-md-vertical {
    position: relative  !important;;
    display: inline-flex  !important;;
    vertical-align: middle  !important;;
  }

  .btn-group-md-vertical {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .btn-group-md-vertical>.btn, .btn-group-md-vertical>.btn-group {
    width: 100% !important;
  }


  .btn-group-md-vertical>.btn-group:not(:last-child)>.btn, .btn-group-md-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .btn-group-md-vertical>.btn-group:not(:first-child)>.btn, .btn-group-md-vertical>.btn~.btn{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .btn-group-md-vertical>.btn-group:not(:first-child), .btn-group-md-vertical>.btn:not(:first-child) {
    margin-top: calc(1px * -1);
  }

  .btn-group-md-vertical>.btn {
    position: relative !important;
    flex: 1 1 auto !important;
  }

}
@media (max-width: 992px) {
  .app-container {
    max-width: none;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

.kv-grid-container {
  border-left: 1px solid var(--text-4) !important;
  border-top: 1px solid var(--text-4) !important;
  border-right: 1px solid var(--text-4) !important;
  border-radius: 8px;
  border-bottom: 1px solid var(--text-4) !important;
}

.kv-grid-container .kv-grid-table tr:not(:last-child) td,
.kv-grid-container .kv-grid-table tr:not(:last-child) th {
  border-bottom: 1px solid var(--text-4) !important;
}

.table:not(.table-bordered) td:first-child,
.table:not(.table-bordered) th:first-child,
.table:not(.table-bordered) tr:first-child {
  padding-left: 24px;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-bg-type: var(--text-2) !important;
}

#row-soft-danger>* {
  --bs-table-bg-type: var(--danger-soft) !important;
}

#row-soft-info>* {
  --bs-table-bg-type: var(--info-soft) !important;
}

#row-soft-success>* {
  --bs-table-bg-type: var(--primary-50) !important;
}

#row-soft-purple>* {
  --bs-table-bg-type: #DFEAFF !important;
}

#row-soft-warning>* {
  --bs-table-bg-type: var(--warning-soft) !important;
}

.table.border {
  border-color: var(--text-4) !important;
}

.table.border tr {
  border-bottom: 1px solid var(--text-4) !important;;
}

.table.border th {
  font-weight: 600;
}
/* #kv-grid-container .crud-datatable:last-child .crud-datatable {
    border-bottom: 0px !important;
} */

.kv-grid-container tr th {
  font-weight: 500 !important;
}

.kv-grid-container tr td {
  padding: 16px 24px !important;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0px !important;
  height: 30px !important;
}

.select2-selection--multiple {
  min-height: 35px !important;
}

.select2-selection--multiple .select2-search--inline .select2-search__field {
  height: 15px !important;
  padding: 9px 12px 6px 12px !important;
  margin-top: 9px !important;
  width: 100% !important;
}

.select2-selection--multiple ul.select2-selection__rendered {
  white-space: unset !important;
}

select[readonly].select2-hidden-accessible+.select2-container {
    pointer-events: none;
    touch-action: none;

    .select2-selection {
        background: #eee;
        box-shadow: none;
    }

    .select2-selection__arrow,
    .select2-selection__clear {
        display: none;
    }
}

.stepper-item.current .stepper-title {
  color: var(--primary) !important;
}

/* .select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0px !important;
    height: 30px !important;
} */

/* *** */

.dashed-line {
  height: 1.5px;
  /* Ketebalan garis putus-putus */
  width: 100%;
  /* Lebar garis putus-putus */
  background-image: repeating-linear-gradient(
    to right,
    var(--text-4, #e0e0e0),
    var(--text-4, #e0e0e0) 8px,
    transparent 8px,
    transparent 15px
  );
  /* Membuat pola garis putus-putus */
}

.custom-icon-review {
  font-size: 80px !important;
  color: #a67c00 !important;
}

.col-detail-review {
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  border: 1px #e0e0e0 dashed;
}

.col-detail-review-2 {
  width: 100%;
  border-right: 1px #e0e0e0 dashed;
  flex-direction: column;
  height: 100%;
}

.btn-top-right-review {
  align-self: flex-end;
  position: relative;
}

.inside-detail-review {
  padding: 30px;
  border-radius: 12px;
  border: 1px #e0e0e0 solid;
  flex-direction: column;
  gap: 20px;
}

.icon-inside-detail-review {
  width: 65px;
  height: 65px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 200px;
  gap: 8px;
  display: inline-flex;
}

.icon-inside-detail-review-2 {
  margin-top: 20px;
  align-self: stretch;
  height: 49px;
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.hr-review {
  padding-top: 32px;
  padding-bottom: 32px;
}

.btn-primary-hover:hover,
.btn-primary-hover:hover i {
  background-color: var(--primary-soft) !important;
  border-radius: 8px !important;
  color: var(--primary) !important;
}

.btn-danger-hover:hover,
.btn-danger-hover:hover i {
  background-color: var(--danger-soft) !important;
  border-radius: 8px !important;
  color: var(--danger) !important;
}

.fc .fc-button {
  background-color: var(--text-2);
  border-color: var(--text-2);
  color: var(--text-8);
}

.fc .fc-button:hover,
.fc .fc-button:focus {
  background-color: #f5f5f5 !important;
  /* Warna latar belakang saat hover */
  border-color: #f5f5f5 !important;
  /* Warna border saat hover */
  color: #333 !important;
  /* Warna teks saat hover */
  box-shadow: none !important;
  /* Menghilangkan bayangan saat hover */
}

.fc-h-event {
  background-color: var(--info) !important;
}

.fc-event-time {
  display: none;
}

.fc-daygrid-event-dot {
  display: none;
  background-color: var(--info) !important;
}

.fc-event-title {
  color: var(--text-1) !important;
  background-color: var(--info) !important;
}

.fc .fc-button .fc-icon {
  font-size: small;
}

.fc-more-link {
  color: var(--info) !important;
}

.stepper.stepper-links .stepper-nav .stepper-item:after {
  left: 50% !important;
  width: calc(100% + 30px) !important;
  transform: translate(-50%) !important;
}

.stepper-item-custom {
  flex-shrink: unset !important;
  flex-grow: 1 !important;
}

.stepper-title {
  text-align: center;
}

.apexcharts-legend.apx-legend-position-right {
  padding-top: 40px !important;
}

.apexcharts-canvas {
  right: 40px !important;
}

.apexcharts-legend-series {
  align-items: center !important;
}

.tooltip-custom-class > .tooltip-inner {
  background-color: #e0e0e0;
  color: #0a0a0a;
}

.tooltip-inner {
  color: #e0e0e0;
  background-color: var(--primary-500) !important;
  width: 170px;
}

.custom-radio {
  position: relative;
  display: inline-block;
  line-height: 20px;
  cursor: pointer;
}

.custom-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-radio input[type="radio"] + span {
  position: relative;
  padding-left: 25px;
}

.custom-radio input[type="radio"] + span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 5px solid #f5f5f5;
  background: #f5f5f5;
}

.custom-radio input[type="radio"]:checked + span:before {
  border-color: var(--primary);
  background: #ffffff;
}

.form-check-custom input[type="checkbox"] {
  height: 1.75rem !important;
  background-color: var(--primary);
  cursor: pointer;
}

.mo-3-border {
  padding: 1px 10px;
  background: #95c8b0;
  border-radius: 10%;
  margin-right: 3px;
}
.mo-2-border {
  padding: 1px 10px;
  background: #90e7f8;
  border-radius: 10%;
  margin-right: 3px;
}
.mo-1-border {
  padding: 1px 10px;
  background: #e0e0e0;
  border-radius: 10%;
  margin-right: 3px;
}
.mo-0-border {
  padding: 1px 10px;
  background: #ffffff;
  border-radius: 10%;
  margin-right: 3px;
  border-style: solid;
}
#thumbnail-preview {
  border: 1px solid #ededed;
  border-radius: 8px;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bullet-square {
  width: 12px !important;
  height: 12px !important;
  border-radius: 4px !important;
}

.bs4.checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bs4.checkbox > .form-label {
  margin-bottom: 0px;
}

.jstree {
  margin-left: 2px;
  display: flex;
  align-items: center;
  font-size: 12px !important;
  color: var(--text-9) !important;
}
.jstree-text {
  font-size: 14px !important;
  color: var(--text-10) !important;
  display: flex;
  align-items: center;
  font-weight: 400 !important;
}
.jstree-anchor {
  width: 100%;
}
.jstree-container-ul {
  width: 100%;
}

.btn-default {
  border-radius: 4px !important;
  border: 1px solid #e0e0e0 !important;
  background: #ffffff !important;
}

.border-custom {
  display: flex;
  padding: 16px 20px;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;

  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background: #fff;
}

span.drp-selected {
  color: var(--text-10) !important;
}