@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap');

:root {
  --black: #000;
  --first-color: #333;
  --second-color: #ff9500;
  --third-color: #f0f2f4;
  --fourth-color: #f8f9fa;
  --fifth-color: #6c757d;
  --sixth-color: #343a40;
  --seventh-color: #dc3545;
  --eigth-color: #5a5b5d;
  --ninth-color: #555555;
  --tenth-color: #e9ecef;
  --eleventh-color: #fcc310;
  --twelfth-color: #ffd650;
  --thirteenth-color: #bfbfbf;
  --fourteenth-color: #333333;
  --fifteenth-color: #fff;
  --sixteenth-color: #95bf03;
  --seventeenth-color: #ff3333;
  --eighteenth-color: #ffc2c2;
  --nineteenth-color: #efefef;
  --twentieth-color: #f5f5f5;
  --twenty-first-color: #ced4da;
  --twenty-second-color: #dee2e6;
  --twenty-third-color: #e9ecef;
  --twenty-fourth-color: #989fa6;
  --twenty-fifth-color: #959ca3;
  --twenty-sixth-color: #888f95;
  --twenty-seventh-color: #9c9d9e;
  --twenty-eighth-color: #ebebeb;
  --twenty-ninth-color: #31d2f2;
  --thirtieth-color: #808c92;
  --thirty-first-color: #eeeeee;
  --thirty-second-color: #f6f9fc;
  --thirty-third-color: #9fa7bc;
  --thirty-fourth-color: #dee3ed;
  --thirty-fifth-color: gainsboro;
  --thirty-sixth-color: #fff9e7;
  --thirty-seventh-color: #c2c2c2;
  --thirty-eighth-color: #0047ab;
  --thirty-ninth-color: #fcc5103a;
  --fortieth-color: #fafafa;
  --forty-first-color: #e1e1e1;
  --forty-second-color: #6f6f6f;
  --forty-third-color: #6f7170;
  --forty-fourth-color: #212529;
  --forty-fifth-color: #e7e7e7;
  --forty-sixth-color: ##c2c2c8;
  --forty-seventh-color: #afafb4;
  --forty-eighth-color: #f8f8f8;
  --forty-ninth-color: #eee;
  --fiftieth-color: #f9f9ff;
  --fifty-first-color: #f6f9fc;
  --fifty-second-color: #007bff;
  --fifty-third-color: #28a745;
  --fifty-fourth-color: #ffc107;
  --fifty-fifth-color: #17a2b8;
  --white: #ffffff;
  --color-shadow-1: rgba(0, 0, 0, 0.175);
  --color-shadow-2: rgba(0, 0, 0, 0.1);
  --color-shadow-3: rgb(13 110 253 / 25%);
  --border-color-1: rgba(0, 0, 0, 0.075);
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  background-color: var(--white);
  color: var(--first-color);
}

/* --main.css-- */

/* part-one */
.ff1 {
  font-family: 'Poppins', 'Rubik', serif !important;
}

.ff2 {
  font-family: 'Rubik', 'Poppins', serif !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

a {
  text-decoration: none;
  color: var(--first-color);
  transition: all 0.2s ease;
  cursor: pointer !important;
}
a:hover {
  color: var(--ninth-color);
}
a.img-link:hover {
  filter: brightness(0) saturate(100%) invert(78%) sepia(47%) saturate(829%)
    hue-rotate(349deg) brightness(98%) contrast(101%);
}
.list-style-none {
  list-style: unset !important;
}
.shadow-md {
  box-shadow: 0 0.1rem 0.6rem var(--color-shadow-1) !important;
}
.fw-semibold {
  font-weight: var(--font-medium) !important;
}
.fw-medium-semibold {
  font-weight: var(--font-semibold) !important;
}
.fz-12 {
  font-size: 12px !important;
}
.fz-14 {
  font-size: 14px !important;
}
.btn-fill {
  border: 1px solid var(--second-color) !important;
  background: var(--second-color) !important;
  color: var(--white) !important;
  font-weight: var(--font-semibold);
  transition: all 0.7s ease;
  font-family: 'Montserrat', sans-serif !important;
}
.btn-fill:hover {
  border: 1px solid var(--ninth-color) !important;
  background: var(--ninth-color) !important;
  color: var(--white) !important;
}
.btn-line {
  border: 1px solid var(--second-color) !important;
  background: var(--white) !important;
  color: var(--second-color) !important;
  transition: all 0.7s ease;
}
.btn-line:hover {
  border: 1px solid var(--second-color) !important;
  background: var(--second-color) !important;
  color: var(--white) !important;
}
.text-yellow {
  color: var(--eleventh-color) !important;
}
.link-yellow {
  color: var(--eleventh-color) !important;
}
.link-yellow:hover {
  color: var(--twelfth-color) !important;
}
.link-dark:hover {
  color: var(--ninth-color) !important;
}
.ps-2-5 {
  padding-left: 0.7rem !important;
}
img {
  width: 100%;
  height: 100%;
}
.w-80 {
  width: 88% !important;
}
textarea {
  resize: none;
}
.border-back:before {
  content: '';
  background-color: var(--thirteenth-color);
  width: 45%;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  display: block;
  z-index: 6;
}

/* part-two */
.border-back:after {
  content: '';
  background-color: var(--thirteenth-color);
  width: 45%;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 0;
  display: block;
  z-index: 6;
}
.btn-line-gray {
  border: 1px solid var(--twenty-first-color);
  background: var(--white) !important;
  transition: all 0.4s ease;
}
.btn-line-gray:hover {
  background: rgb(250, 250, 250) !important;
}
.btn-light-gray,
.btn:disabled,
button:disabled {
  background-color: var(--nineteenth-color) !important;
  color: var(--twenty-seventh-color) !important;
  transition: all 0.4s ease;
}
.btn:disabled {
  border-color: var(--nineteenth-color) !important;
}
.btn-light-gray:hover {
  background-color: #dfdfdf !important;
}
.text-gray {
  color: var(--fourteenth-color) !important;
}
.alert-danger {
  color: var(--seventeenth-color);
  background-color: var(--eighteenth-color);
  border-color: var(--eighteenth-color);
}
.bg-gray {
  background-color: var(--nineteenth-color) !important;
}
.bg-yellow {
  background-color: var(--eleventh-color) !important;
}
.bg-green {
  background-color: var(--sixteenth-color) !important;
}
.list-style-disc {
  list-style: disc !important;
}
.bg-light-gray {
  background-color: var(--nineteenth-color);
}
.bg-dark-gray {
  background-color: var(--first-color) !important;
  color: var(--white);
}
.badge-bintang {
  border-bottom-left-radius: 40%;
}
.badge-bintang .img-wrap {
  width: 23px;
}
.bg-dark-gray-gradient {
  background: radial-gradient(
    60.56% 51.77% at 36.11% 50%,
    var(--twenty-fourth-color) 0%,
    var(--twenty-fifth-color) 40.05%,
    var(--twenty-sixth-color) 100%
  );
}
.border-yellow {
  border: 1px solid var(--eleventh-color);
  border-color: var(--eleventh-color) !important;
}
::selection {
  color: var(--white);
  background: var(--eleventh-color);
}
.av-circle {
  width: 40px !important;
  height: 40px !important;
  overflow: hidden;
  background-color: var(--white);
  border-radius: 100%;
}
.av-circle img {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  object-fit: cover;
}
.text-light-gray {
  color: var(--twenty-second-color);
}
.icon-b-1 {
  width: 3rem;
}
.icon-b-2 {
  width: 2.5rem;
}
.icon-b-3 {
  width: 2rem !important;
}

/* part-three */
.icon-b-4 {
  width: 1.5rem !important;
}
.icon-1 {
  width: 1.3rem !important;
}
.icon-2 {
  width: 1.1rem;
}
.icon-3 {
  width: 0.9rem;
}
.icon-4 {
  width: 0.5rem;
}
.icon-5 {
  width: 0.3rem;
}
.icon-hw-1 {
  width: 1.3rem;
  height: 1.3rem;
}
.icon-hw-2 {
  width: 1.1rem;
  height: 1.1rem;
}
.icon-hw-3 {
  width: 0.9rem;
  height: 0.9rem;
}
.icon-hw-4 {
  width: 0.7rem;
  height: 0.7rem;
}
.icon-hw-b-1 {
  width: 2.3rem;
  height: 2.3rem;
}
.b-shadow {
  box-shadow: 0px 0px 12px var(--twenty-eighth-color);
}
.w-fit {
  width: fit-content !important;
}
.w-5rem {
  width: 5rem;
}
.w-4rem {
  width: 4rem;
}
.h-unset {
  height: unset !important;
}
.badge-blue {
  background-color: var(--twenty-ninth-color) !important;
  color: var(--white) !important;
  font-size: 14px;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-right: 0.8rem !important;
  padding-left: 0.8rem !important;
  width: fit-content !important;
  height: fit-content;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50rem !important;
  text-align: center !important;
}
.badge-yellow {
  background-color: var(--eleventh-color) !important;
  color: var(--white) !important;
  font-size: 14px;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-right: 0.8rem !important;
  padding-left: 0.8rem !important;
  width: fit-content !important;
  height: fit-content;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50rem !important;
  text-align: center !important;
}
.badge-green {
  background-color: var(--sixteenth-color) !important;
  color: var(--white) !important;
  font-size: 14px;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-right: 0.8rem !important;
  padding-left: 0.8rem !important;
  width: fit-content !important;
  height: fit-content;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50rem !important;
  text-align: center !important;
}
.badge-gray {
  background-color: var(--nineteenth-color) !important;
  color: var(--fourteenth-color) !important;
  font-size: 14px;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-right: 0.8rem !important;
  padding-left: 0.8rem !important;
  width: fit-content !important;
  height: fit-content;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50rem !important;
  text-align: center !important;
}
.badge-red {
  background-color: var(--seventeenth-color) !important;
  color: var(--white) !important;
  font-size: 14px;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-right: 0.8rem !important;
  padding-left: 0.8rem !important;
  width: fit-content !important;
  height: fit-content;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50rem !important;
  text-align: center !important;
}
.box-shadow-focus-0:focus {
  box-shadow: unset !important;
}
.filter-white {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(65deg) brightness(100%) contrast(103%);
}
.border-2px {
  border-width: 2px !important;
}
.min-width-80 {
  min-width: 80px;
}

/* part-four */
.border {
  /* border: 1px solid var(--twenty-first-color) !important; */
}
.border-dashed {
  border-style: dashed !important;
}
.ar-square {
  aspect-ratio: 1 / 1 !important;
}
.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}
.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}
.many-form .form-control,
.many-form .form-select,
.many-form .selection {
  font-size: 13px !important;
}
/* upload-file-custom */
.upload-file-custom {
  width: 100%;
  min-height: 12rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--thirtieth-color) !important;
  border-radius: 0.3rem !important;
  padding: 1rem !important;
}
/* Clock Picker */
.clockpicker-popover .popover-title {
  display: none !important;
}
.clockpicker-plate {
  background-color: var(--nineteenth-color) !important;
  border: unset !important;
}
.clockpicker-popover .popover-content {
  background-color: var(--white) !important;
}
.popover.clockpicker-popover {
  border: unset !important;
  box-shadow: 0 0.1rem 0.6rem var(--color-shadow-1) !important;
}
/* Popup Notif */
.list-popup-notif {
  border-bottom: 1px solid var(--third-color) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  background-color: var(--white);
  cursor: pointer;
}
.list-popup-notif:first-child {
  padding-top: unset !important;
}
.list-popup-notif:last-child {
  padding-bottom: unset !important;
  border-bottom: unset !important;
}
.list-popup-notif:hover {
  background-color: var(--thirty-first-color);
}
/* Flipped */
.flipped,
.flipped .content-isi {
  transform: rotateX(180deg);
  -webkit-transform: rotatex(180deg);
}
.flipped::-webkit-scrollbar {
  width: 5px;
}
.flipped::-webkit-scrollbar-track {
  background: var(--thirty-fifth-color);
  border-radius: 1px;
}
.flipped::-webkit-scrollbar-thumb {
  background: var(--thirty-third-color);
}
.flipped::-webkit-scrollbar-thumb:hover {
  background: var(--thirty-fourth-color);
}
/* Checkbox */
.form-check-input:checked {
  background-color: var(--fourteenth-color);
  border-color: var(--fourteenth-color);
}
.form-check-input:focus {
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.form-check-input.check-yellow:checked {
  background-color: var(--eleventh-color);
  border-color: var(--eleventh-color);
}
/* dropdown */
.dropdown {
  overflow: visible;
}
.dropdown-item.active,
.dropdown-item:active {
  text-decoration: none;
  background-color: var(--fourth-color);
}
.btn.dropdown-toggle {
  box-shadow: unset !important;
}
.dropdown-toggle[aria-expanded='true']::after {
  transform: rotate(-180deg);
  vertical-align: 0.09rem !important;
}
.dropdown-toggle::after {
  flex-shrink: 0;
  width: 1rem;
  height: 0.5rem;
  content: '';
  background-image: url('../img/custom/caret-down.svg');
  background-repeat: no-repeat;
  transition: transform 0.2s ease-in-out;
  vertical-align: unset !important;
  border-top: unset;
  border-right: unset;
  border-bottom: unset;
  border-left: unset;
}

.dropdown-menu {
  transition: none !important;
}
.w-18-persen {
  width: 18% !important;
}
.w-17-persen {
  width: 17% !important;
}
.w-16-5-persen {
  width: 16.5% !important;
}
.w-16-persen {
  width: 16% !important;
}
.w-15-5-persen {
  width: 15.5% !important;
}
.w-15-persen {
  width: 15% !important;
}
.w-14-persen {
  width: 14% !important;
}
.w-13-5-persen {
  width: 13.5% !important;
}
.w-13-persen {
  width: 13% !important;
}
.w-9-persen {
  width: 9% !important;
}
.w-8-persen {
  width: 8% !important;
}
.w-7-5-persen {
  width: 7.5% !important;
}
.w-7-persen {
  width: 7% !important;
}
.w-30 {
  width: 30% !important;
}
.w-26 {
  width: 26% !important;
}
.w-12rem {
  width: 12rem !important;
}
.w-300 {
  width: 300px;
}
.bg-light-blue {
  background-color: var(--thirty-second-color);
}

/* part-five */
.shadow-base {
  box-shadow: 0px 2px 10px 0px var(--color-shadow-2) !important;
}
.overflow-unset {
  overflow: unset !important;
}
.alert-basic {
  background-color: var(--thirty-sixth-color);
  border-color: var(--eleventh-color);
}
.will-change-0 {
  will-change: unset !important;
}
.border-3 {
  border-width: 3px !important;
}
.border-base {
  border-color: var(--first-color) !important;
}
/* Star */
.jq-star {
  margin: 0px 0.14rem;
}
.rating-read-only-val .jq-star {
  cursor: unset !important;
}
/* pagination */
.pagination a {
  border: unset;
  color: var(--first-color);
}
.pagination a:hover {
  background-color: unset;
}
.page-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-item.previous .page-link,
.page-item.next .page-link {
  font-size: 10px;
}
.page-item .page-link {
  font-size: 14px;
  padding: 0.1rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-item.active .page-link {
  z-index: 3;
  color: var(--white);
  background-color: var(--second-color) !important;
  border-color: var(--second-color);
  border-radius: 5px;
}
.page-item.active .page-link:hover {
  color: var(--white) !important;
  background-color: var(--second-color) !important;
  border-color: var(--second-color);
}
/* Offcanvas */
.offcanvas {
  color: var(--fourteenth-color);
  height: calc(100% - 62px);
  width: 100%;
}
.offcanvas .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--eleventh-color);
  background-color: unset !important;
  border-bottom: 2px solid var(--eleventh-color);
  font-weight: 600;
}
.offcanvas .nav-pills .nav-link {
  border-radius: unset !important;
  padding-right: 0;
  padding-left: 0;
  margin-right: 1.5rem;
}
.offcanvas .nav-link {
  color: var(--thirty-seventh-color);
}
.offcanvas .accordion-button:not(.collapsed) {
  color: var(--fourteenth-color);
  background-color: unset !important;
  box-shadow: unset !important;
}
.offcanvas .accordion-button:not(.collapsed)::after {
  background-image: url(../img/custom/caret-down.svg);
}
.offcanvas .accordion-button::after {
  width: 0.9rem;
  height: 0.9rem;
  background-image: url(../img/custom/caret-down.svg);
  background-size: 0.9rem;
}
.offcanvas .tab-content ul {
  list-style: none;
}
.offcanvas .tab-content ul li {
  padding: 0.8rem 0;
}
.offcanvas .accordion-button:focus {
  box-shadow: unset !important;
}
.offcanvas hr {
  background-color: var(--twenty-second-color);
  opacity: 0.5;
}
/* Main content */
.content-wrap {
  margin-top: 88px !important;
  overflow: hidden;
  position: relative;
}
.back {
  position: absolute !important;
  z-index: 1 !important;
}
.content-wrap > * {
  position: relative;
  z-index: 2;
}
.wrap-content {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.wrap-content .row > * {
  padding-right: unset !important;
  padding-left: unset !important;
}
.content-wrap ul {
  list-style: none;
}
.content-wrap ul li {
  padding: 0;
}
.content-wrap ul li .number {
  width: 40px;
  height: 40px;
}
/* faq */
.faq .accordion-button:focus {
  z-index: unset !important;
  border-color: unset !important;
  box-shadow: unset !important;
}
.faq .accordion-button {
  padding: 1.85rem 1.25rem;
}
.faq .accordion-item {
  border-color: var(--border-color-1);
}
.faq .accordion-button:not(.collapsed) {
  color: inherit;
  background-color: inherit;
  box-shadow: unset !important;
}
.faq .accordion-button:not(.collapsed)::after {
  background-image: unset !important;
  transform: unset !important;
}
.faq .accordion-button::after {
  content: unset !important;
}
.faq .accordion-button:not(.collapsed)::before {
  background-image: url('../img/custom/minus-accordion.svg');
  transform: rotate(-180deg);
}
.faq .accordion-button::before {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 2rem;
  content: '';
  background-image: url('../img/custom/plus-accordion.svg');
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

/* part-six */
form .btn img {
  width: 20px;
}
form .password {
  border: 1px solid var(--twenty-first-color);
}
form .password.is-invalid {
  border-color: var(--seventh-color);
}
form .password:focus-within {
  box-shadow: 0 0 0 0.25rem var(--color-shadow-3);
}
form .password .form-control:focus {
  box-shadow: unset;
}
.wrap-content .input-group img {
  cursor: pointer;
  height: 18px;
}
form {
  color: var(--eigth-color);
}
/* datepicker */
.datepicker {
  padding: 0.5rem !important;
  box-shadow: 0 0.1rem 0.6rem var(--color-shadow-1) !important;
  border: 0;
}
.datepicker th.datepicker-switch {
  color: var(--fourteenth-color);
}
.datepicker th.dow {
  font-size: 10px;
  padding: 1.5rem 0.2rem;
  letter-spacing: 1px;
  color: var(--thirtieth-color);
}
.datepicker td {
  text-align: center;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 100% !important;
  color: var(--fourteenth-color);
}
.datepicker .prev img,
.datepicker .next img {
  width: 20px;
  height: 10px;
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
  background-color: var(--fourteenth-color) !important;
  background-image: unset !important;
  border-color: unset !important;
  text-shadow: unset !important;
}
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled] {
  background-color: var(--fourteenth-color) !important;
  background-image: unset !important;
  border-color: unset !important;
  text-shadow: unset !important;
}
.datepicker-dropdown:after,
.datepicker-dropdown::before {
  content: unset !important;
}
/* head */
.forgot-password .head {
  position: absolute;
  top: 0;
}
.head .img-wrap {
  height: 30px;
}
/* for-wrap */
.form-parent {
  overflow-y: auto;
}
.form-parent .form-wrap {
  height: 100%;
}
.form-wrap form {
  width: 25%;
}
.signup .form-wrap form {
  width: 50%;
}
.forgot-password .form-wrap {
  height: 100%;
}
.ask .img-wrap {
  width: 17px;
}
.form-wrap .form-control {
  font-size: 14px;
}
/* img-wrap */
.img-parent {
  position: relative;
}
.img-parent .img-wrap {
  position: absolute;
}
/* Responsive */
@media (max-width: 1199.98px) {
  .welcome-text .col:nth-child(2) > div {
    border-right: unset !important;
  }
}

/* part-seven */
@media (max-width: 991.98px) {
  .form-wrap form {
    width: 50%;
  }
  .signup .form-wrap form {
    width: 75%;
  }
  .w-lg-100 {
    width: 100% !important;
  }
  .border-lg-0 {
    border: unset !important;
  }
  .btn-lg-line {
    border: 1px solid var(--fourteenth-color) !important;
    background: var(--white) !important;
    color: var(--fourteenth-color) !important;
    transition: all 0.7s ease;
    font-weight: var(--font-regular);
  }
  .btn-lg-line:hover {
    border: 1px solid var(--ninth-color) !important;
    background: var(--ninth-color) !important;
    color: var(--white) !important;
    font-weight: var(--font-regular);
  }
  .btn-lg-down-fill {
    border: 1px solid var(--fourteenth-color) !important;
    background: var(--fourteenth-color) !important;
    color: var(--white) !important;
    font-weight: var(--font-semibold);
    transition: all 0.7s ease;
    font-family: 'Rubik', 'Poppins', serif !important;
  }
  .btn-lg-down-fill:hover {
    border: 1px solid var(--ninth-color) !important;
    background: var(--ninth-color) !important;
    color: var(--white) !important;
    font-weight: var(--font-semibold);
  }
}
@media (max-width: 767.98px) {
  .form-wrap form {
    width: 100% !important;
  }
  .border-md-bottom {
    border-bottom: 1px solid var(--twenty-second-color) !important;
  }
  .border-md-right-0 {
    border-right: 0 !important;
  }
  .w-md-100 {
    width: 100% !important;
  }
  .shadow-md-down-0 {
    box-shadow: unset !important;
  }
}
@media (max-width: 575.98px) {
  .content-wrap {
    margin-top: 71px !important;
  }
  .w-sm-100 {
    width: 100% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
  @media (max-height: 800px) {
    .signup .form-wrap {
      padding: 2rem 0;
    }
    .signup .ask {
      margin-bottom: 2rem;
    }
  }
}
@media (max-width: 500px) {
  .form-wrap {
    align-items: unset !important;
    padding: 4rem 0;
  }
  .signup .form-wrap {
    padding: 4.5rem 0;
  }
}
@media (max-width: 374px) {
}
@media (max-height: 510px) {
  .signin .form-wrap {
    align-items: unset !important;
    padding: 2rem 0;
  }
  .signin .ask {
    padding-bottom: 2rem;
  }
}
@media (max-height: 540px) {
  .signup .form-wrap {
    align-items: unset !important;
    padding: 2rem 0;
  }
  .signup .ask {
    margin-bottom: 2rem;
  }
}
@media (max-height: 530px) {
  .forgot-password .head {
    position: unset;
    top: 0;
  }
  .forgot-password .form-wrap {
    align-items: unset !important;
    padding: 2rem 0;
  }
  .forgot-password .ask {
    margin-bottom: 2rem;
  }
}
@media (min-width: 768px) {
  .border-top-md-0 {
    border-top: 0 !important;
  }
  .border-bottom-md-0 {
    border-top: 0 !important;
  }
  .border-md-0 {
    border: 0 !important;
  }
}

/* part-eight */

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 23px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--nineteenth-color);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: '';
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: var(--fourteenth-color);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--thirty-ninth-color);
}
input:checked + .slider:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 63px;
}
.slider.round:before {
  border-radius: 50%;
}
/* Offcanvas */
.offcanvas {
  color: var(--fourteenth-color);
}
.offcanvas .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--thirty-eighth-color);
  background-color: unset !important;
  border-bottom: 2px solid var(--thirty-eighth-color);
  font-weight: 600;
}
.offcanvas .nav-pills .nav-link {
  border-radius: unset !important;
  padding-right: 0;
  padding-left: 0;
  margin-right: 1.5rem;
}
.offcanvas .nav-link {
  color: var(--thirty-seventh-color);
}
.offcanvas .accordion-button:not(.collapsed) {
  color: var(--fourteenth-color);
  background-color: unset !important;
  box-shadow: unset !important;
}
.offcanvas .accordion-button:not(.collapsed)::after {
  background-image: url(../img/custom/caret-down.svg);
}
.offcanvas .accordion-button::after {
  width: 0.9rem;
  height: 0.9rem;
  background-image: url(../img/custom/caret-down.svg);
  background-size: 0.9rem;
}
.offcanvas .tab-content ul {
  list-style: none;
}
.offcanvas .tab-content ul li {
  padding: 0.8rem 0;
}
.offcanvas .accordion-button:focus {
  box-shadow: unset !important;
}
.offcanvas hr {
  background-color: var(--twenty-second-color);
  opacity: 0.5;
}
/* tab-navigasi */
.tab-navigasi .nav-wrap,
.category-menu .nav-wrap {
  overflow-x: auto;
  width: 100%;
  flex-wrap: unset;
}
.tab-navigasi .nav-wrap .nav-item,
.category-menu .nav-wrap .nav-item {
  width: fit-content;
  white-space: nowrap;
}
.tab-navigasi .nav-link {
  margin-right: 1rem;
}
.tab-navigasi .nav-link,
.category-menu .nav-link {
  border: 1.5px solid var(--twenty-second-color) !important;
  border-radius: 3rem;
  color: var(--fourteenth-color);
}
.category-menu .nav-item {
  padding-right: 1rem;
}
.tab-navigasi .nav-wrap .nav-item:last-child .nav-link,
.category-menu .nav-wrap .nav-item:last-child .nav-link {
  margin-right: 0;
}
.tab-navigasi .nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.category-menu .nav-pills .nav-link.active {
  color: var(--white);
  background-color: var(--second-color);
  font-weight: 500;
}
.category-menu .nav-link {
  min-width: 10rem;
  font-size: 14px;
}
.tab-navigasi .av-circle {
  width: 12rem !important;
  height: 12rem !important;
  object-fit: cover;
}

/* part-nine */
.tab-navigasi .input-group img {
  cursor: pointer;
  height: 18px;
}
.tab-navigasi .date,
.tab-navigasi .search-product {
  width: 170px;
}
/* Main-Navbar */
.main-navbar {
  background-color: var(--white);
  height: unset;
  padding: 1rem 0;
}
.main-navbar > div {
  margin: 0.8rem 0;
}
.main-navbar .border-circle {
  border: 1px solid var(--thirty-first-color) !important;
}
.main-navbar input.form-control:focus,
.main-navbar .input-group .btn:focus {
  box-shadow: unset !important;
}
.main-navbar .input-group {
  width: 70%;
}
.main-navbar .input-group input {
  width: 70%;
}
.main-navbar .input-group button {
  width: 1.9rem;
  height: 1.9rem;
}
.main-navbar .input-group button:hover {
  background-color: var(--forty-first-color);
}
.main-navbar .badge.notif {
  color: var(--white) !important;
  font-size: 8.5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.badge:empty {
  display: none !important;
}
.object-fit-cover {
  object-fit: cover !important;
}
.avatar img {
  height: 100% !important;
}
.card-header,
.card-footer {
  padding: 1rem;
}
.notification .avatar {
  width: 2.5rem;
  height: 2.5rem;
}
.navbar-nav .nav-item .badge {
  top: unset !important;
  bottom: -5px;
  right: -5px;
}
.main-navbar .menubar-brand {
  height: 40px;
}
/* Menubar */
.menubar {
  background-color: var(--fortieth-color);
}
.menubar-logo {
  height: 36px;
  margin: 0.8rem 1.5rem;
}
.menubar-enabled.menubar-collapsed .menubar .menubar-body {
  margin-left: 0;
  margin-right: 0;
}
.menubar .menu {
  width: 100%;
}
.menubar .menu-link.active i {
  transform: rotate(-180deg);
}
.menubar .menu-link i {
  transition: all 0.5s ease;
}
.menubar .menu-link,
.menubar .active .menu-link[aria-expanded],
.menubar .active ul .menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.2rem 0;
  padding: 0.6rem 1.5rem;
  font-size: 14px;
  font-weight: normal;
  color: var(--eigth-color);
  background-color: unset;
  position: relative !important;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.menubar .menu-link img,
.menubar .active .menu-link[aria-expanded] img,
.menubar .active ul .menu-link img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(139%)
    hue-rotate(182deg) brightness(93%) contrast(91%);
}
.menubar .menu-link:hover,
.menubar .active .menu-link[aria-expanded]:hover,
.menubar .active ul .menu-link:hover {
  color: var(--twenty-seventh-color) !important;
}
.menubar .menu-link:hover img,
.menubar .active .menu-link[aria-expanded]:hover img,
.menubar .active ul .menu-link:hover img,
.menubar .active .menu-link:hover > div:before,
.menubar-enabled.menubar-collapsed
  .menubar
  .active
  .menu-link:hover[aria-expanded]
  > div::before,
.menubar .active ul .active .menu-link:hover > div::before {
  filter: brightness(0) saturate(100%) invert(65%) sepia(9%) saturate(39%)
    hue-rotate(169deg) brightness(96%) contrast(85%) !important;
}

/* part-ten */

.menubar .menu-link img {
  width: 19px;
  height: unset;
  margin-right: 0.8rem;
}
.menubar-enabled.menubar-collapsed .menubar .menu-link img {
  margin-right: 0;
}
.menubar-enabled.menubar-collapsed .menubar .menu-link {
  height: 40px;
  padding: 0.45rem 1rem;
  margin: 0.4rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menubar .active .menu-link,
.menubar-enabled.menubar-collapsed .menubar .active .menu-link[aria-expanded],
.menubar .active ul .active .menu-link {
  color: var(--fourteenth-color);
}
.menubar .active .menu-link > div:before,
.menubar-enabled.menubar-collapsed
  .menubar
  .active
  .menu-link[aria-expanded]
  > div::before,
.menubar .active ul .active .menu-link > div::before {
  content: url('../img/custom/border-active.svg');
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.45rem;
  margin: auto 0;
}
.menubar .active .menu-link img,
.menubar-enabled.menubar-collapsed
  .menubar
  .active
  .menu-link[aria-expanded]
  img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(7%) saturate(0%)
    hue-rotate(274deg) brightness(104%) contrast(83%);
}
.menubar .menu-item ul {
  padding-left: 2.1rem;
}
.menubar .menu-item ul .menu-link {
  font-weight: normal;
}
.menubar .active .menu-link[aria-expanded] img {
  filter: unset;
}
.menubar-enabled.menubar-collapsed .menubar .active ul.show {
  display: none;
}
.menubar-enabled.menubar-collapsed .menubar .menubar-logo.menubar-label {
  display: none;
}
.menubar-enabled .menubar .btn-menu-control {
  display: none !important;
}
.menubar-enabled.menubar-collapsed .menubar .btn-menu-control {
  display: flex !important;
}
/* Offcanvas Menubar */
.offcanvas .menubar .active .menu-link img,
.offcanvas
  .menubar-enabled.menubar-collapsed
  .menubar
  .active
  .menu-link[aria-expanded]
  img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(7%) saturate(451%)
    hue-rotate(104deg) brightness(97%) contrast(93%);
}
.offcanvas .menubar .menu-link:hover,
.offcanvas .menubar .active .menu-link[aria-expanded]:hover,
.offcanvas .menubar .active ul .menu-link:hover {
  color: var(--forty-second-color) !important;
  background-color: var(--white) 14 !important;
}
.offcanvas .menubar .menu-link:hover img,
.offcanvas .menubar .active .menu-link[aria-expanded]:hover img,
.offcanvas .menubar .active ul .menu-link:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(39%)
    hue-rotate(282deg) brightness(85%) contrast(81%);
}
.offcanvas .menubar .menubar-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.menubar-enabled.menubar-collapsed .offcanvas .menubar .menu-link .ava {
  width: 2rem !important;
}
.offcanvas .menubar,
.offcanvas .menubar > *,
.offcanvas .menubar > * > *,
.offcanvas .menubar > * > * > *,
.offcanvas .menubar > * > * > * > *,
.offcanvas .menubar > * > * > * > * > *,
.offcanvas .menubar > * > * > * > * > * > * {
  transition: unset !important;
}

/* Table */
table {
  width: 100% !important;
}
div.dataTables_wrapper {
  width: 100%;
}
.dataTables_scrollHeadInner {
  width: 100% !important;
  margin-bottom: 1rem;
}
.dataTables_scrollHeadInner table.dataTable {
  margin-top: 0 !important;
}
.dataTables_scrollBody thead {
  display: none !important;
}
.dataTables_wrapper .dataTables_scroll {
  overflow: hidden;
}
tr:last-child td {
  border-bottom: unset !important;
}
table.dataTable thead th,
table.dataTable thead td {
  font-weight: normal !important;
  font-size: 15px;
  white-space: nowrap;
}
.tab-navigasi .dataTable thead th,
.tab-navigasi table.dataTable thead td {
  padding: 1rem 0.5rem;
}
table.dataTable tbody th,
table.dataTable tbody td {
  vertical-align: middle !important;
  color: var(--forty-third-color) !important;
}
table.dataTable tbody td {
  font-size: 14px;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  white-space: nowrap;
}
table .number {
  min-width: 50px;
}
table .name {
  min-width: 250px;
}
table .total-items {
  min-width: 100px;
}
table.dataTable.table-striped > tbody > tr > * {
  box-shadow: unset !important;
}
tbody,
td,
tfoot,
th,
thead,
tr {
  border: 0 solid;
  border-color: inherit;
  border: 0 !important;
}
.dataTables_scrollHead table.dataTable thead th,
.dataTables_scrollHead table.dataTable thead td {
  border-bottom: 1px solid var(--thirty-fourth-color) !important;
  border-top: 1px solid var(--thirty-fourth-color) !important;
}
.dataTables_wrapper .row:last-child {
  margin-top: 1rem;
  display: flex;
  align-items: center;
}
div.dataTables_wrapper div.dataTables_info {
  padding-top: 0 !important;
}
.dataTables_info {
  font-size: 14px;
}
table#table_id .dataTables_empty,
table#table_id2 .dataTables_empty {
  height: 233px !important;
  position: relative;
}
table#table_id .dataTables_empty,
table#table_id2 .dataTables_empty {
  background: var(--white) !important;
}
table#table_id .dataTables_empty::before,
table#table_id2 .dataTables_empty::before {
  content: url('../img/custom/empty-table.svg');
}
.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--thirty-second-color) !important;
  color: var(--bs-table-striped-color);
}

/* part-eleven */
/* Ordinary Table */
.table-ordinary thead tr {
  margin-top: 0 !important;
  border-bottom: 1px solid var(--thirty-fourth-color) !important;
  border-top: 1px solid var(--thirty-fourth-color) !important;
}
.table-ordinary thead th,
.table-ordinary tbody td {
  font-weight: normal !important;
  font-size: 15px;
  white-space: nowrap;
  /* padding: 1rem 0.5rem!important; */
  vertical-align: middle !important;
  color: var(--fourteenth-color) !important;
}
.table-ordinary tbody td {
  font-size: 14px !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
  color: var(--fourteenth-color) !important;
}
.table-ordinary tbody:before {
  line-height: 1.2rem;
  content: '.';
  color: var(--white);
  display: block;
}
.table-ordinary tbody td > .img-wrap {
  width: 100px;
  height: 72px;
}

.dataTable tbody td > .img-wrap {
  width: 100px;
  height: 72px;
}
/* Empty */
.empty-wrap {
  height: calc(100vh - 228px);
}
.img-wrap-empty {
  width: 15rem !important;
}
/* Swiper */
:root {
  --swiper-navigation-size: 30 !important;
  --swiper-theme-color: var(--eigth-color) !important;
}
.tab-navigasi .swiper .nav-wrap {
  overflow-x: unset;
}
.tab-navigasi .swiper-button-next,
.tab-navigasi .swiper-rtl .swiper-button-prev {
  right: 0px !important;
  background: var(--white);
}
.tab-navigasi .swiper-button-next.swiper-button-disabled,
.tab-navigasi .swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
  cursor: auto;
  pointer-events: none;
}
.tab-navigasi .swiper-button-prev,
.tab-navigasi .swiper-rtl .swiper-button-next {
  left: 0px !important;
  background: var(--white);
}
.tab-navigasi .swiper-button-next,
.tab-navigasi .swiper-button-prev {
  top: 0 !important;
  width: 3rem !important;
  height: 100% !important;
}
.tab-navigasi .swiper-button-next:after,
.tab-navigasi .swiper-button-prev:after {
  width: 30px !important;
  height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
  border-radius: 100% !important;
  box-shadow: 0px 0px 6px 0px var(--forty-fifth-color) !important;
}
.tab-navigasi .swiper-nav-2:hover {
  overflow: unset !important;
}
.tab-navigasi .swiper-slide {
  width: unset !important;
}
/* Swiper */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  content: '' !important;
}
.swiper-slide {
  width: 460px !important;
}
.text-wrap-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5em;
  max-height: 1.5em;
}
.text-wrap-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5em;
  max-height: 3em;
}
.text-wrap-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.5em;
  max-height: 4.5em;
}
/* Profile */
.btn-back-background {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 6;
}
.btn-back-background button.btn {
  border: 1px solid var(--twenty-first-color) !important;
}
.img-profile-wrapper {
  margin-bottom: 9rem;
}
.img-profile-wrapper .img-profile {
  position: absolute;
  bottom: -5rem;
}
.btn-profile-background {
  position: absolute;
  z-index: 5;
  bottom: 0;
  right: 1rem;
}
.back-profile {
  height: 20rem;
}
/* Select 2 */
.select2-container {
  display: block !important;
  width: 100% !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fourteenth-color);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 !important;
  padding: 0 !important;
}
.selection {
  display: block !important;
  width: 100% !important;
  padding: 0.2504rem 2.25rem 0.2504rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fourteenth-color);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--twenty-first-color) !important;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: unset !important;
  padding-right: unset !important;
}
.select2-container--default.select2-container--open.select2-container--below
  .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below
  .select2-selection--multiple {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fourteenth-color);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: unset !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 !important;
}

/* part-twelve */
.select2-container--default .select2-selection--single {
  border: unset !important;
}
.select2-dropdown {
  border: 1px solid var(--twenty-first-color) !important;
  min-width: 220px;
}
.select2-search--dropdown {
  padding: 0.8rem !important;
  padding-bottom: 0.4rem !important;
  position: relative;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--twenty-first-color) !important;
  border-radius: 6px !important;
  outline: unset;
  font-size: 14px;
  padding: 0.5rem 1.8rem 0.5rem 0.6rem;
}
.select2-search--dropdown::after {
  content: '';
  background: url('../img/custom/search.svg') no-repeat;
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  background-size: contain;
  right: 1.2rem;
  bottom: 1.15rem;
}
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected {
  background-color: var(--fifty-first-color) !important;
  color: unset !important;
}
.select2-results__option {
  -webkit-user-select: none;
  margin: 0.2rem 0.8rem 0.2rem 0rem !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}
.select2-results__option:first-child {
  margin-top: unset !important;
}
.select2-results__option:last-child {
  margin-bottom: unset !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 100% !important;
  position: absolute;
  top: 0 !important;
  width: 35px !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: unset !important;
  border-style: unset !important;
  border-width: unset !important;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  background-size: contain;
  width: 13px !important;
  height: 7px !important;
  background: transparent url(../img/custom/caret-down.svg) no-repeat scroll;
}
.select2-container--default.select2-container--disabled .selection {
  background-color: var(--forty-ninth-color);
  cursor: default;
}
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar {
  width: 5px;
}
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-track {
  background: var(--forty-eighth-color);
}
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--forty-sixth-color);
}
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: var(--forty-seventh-color);
}
.select2-results {
  padding: 0.5rem 1rem 0.8rem 1rem;
}
/* Items */
.img-items {
  height: 60px !important;
  width: 60px !important;
}
/* Select ul */
#count,
#province,
#city,
#neighbourhood {
  cursor: pointer;
  height: 38.21px;
  position: relative;
  width: 150px;
  margin: auto;
  padding: unset;
}

#count span,
#province span,
#city span,
#neighbourhood span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.75rem;
}

#count ul,
#province ul,
#city ul,
#neighbourhood ul {
  background-color: var(--white);
  box-shadow: 0 2px 2px var(--color-shadow-2);
  display: none;
  height: auto;
  margin-top: 37px;
  padding-left: unset !important;
  position: relative;
  z-index: 1;
  width: inherit;
}

#count li,
#province li,
#city li,
#neighbourhood li {
  background-color: inherit !important;
  border: inherit !important;
  display: block !important;
  float: none !important;
  font-size: inherit !important;
  height: auto !important;
  line-height: inherit !important;
  margin-right: auto !important;
  padding: 2px 0.75rem !important;
  position: inherit !important;
  width: auto !important;
}

#count ul li:hover,
#province ul li:hover,
#city ul li:hover,
#neighbourhood ul li:hover {
  background: var(--fiftieth-color) !important;
}
.card-project {
  box-shadow: 0px 0px 12px var(--twenty-eighth-color);
  border-radius: 8px;
  margin-bottom: 2rem;
}
.card-project .item .item-picture {
  width: 50% !important;
  height: 50% !important;
}

.card-project-name {
  width: 87px;
  word-wrap: break-word;
}

.item-picture-box {
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.item-picture-size {
  width: 100% !important;
  height: 100% !important;
}

.card-project .item > div {
  position: relative;
}
.card-project .item > div:before {
  content: '';
  position: absolute;
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--thirty-fourth-color);
}
.card-project .item > div:first-child:before {
  display: none;
}
.card-project dt {
  color: var(--eigth-color);
  margin-bottom: 1rem;
}
.card-project dd {
  margin-bottom: 2rem;
}
.card-project dd:last-child {
  margin-bottom: 0;
}
.card-project .badge-new {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
}

/* part-thirteen */
.notif-item-lightblue {
  cursor: pointer;
  background-color: var(--fifty-first-color);
}
.notif-item-lightblue:hover {
  background-color: var(--thirty-first-color) !important;
}
.notif-item-white {
  cursor: pointer;
  background-color: var(--white);
}
.notif-item-white:hover {
  background-color: var(--thirty-first-color) !important;
}
.order-stat {
  cursor: pointer;
  background-color: var(--white);
}
.order-stat:hover {
  background-color: var(--thirty-first-color);
}

/* Responsive */
@media (max-width: 991.98px) {
  .menubar-enabled .main-navbar,
  .menubar-enabled .wrapper {
    margin-left: unset !important;
  }
  .menubar-enabled .wrapper > .container-fluid {
    margin-top: 1rem !important;
  }
  .main-navbar > div {
    margin: 0;
  }
  .av-circle {
    width: 30px !important;
    height: 30px !important;
    overflow: hidden;
    background-color: var(--white);
    border-radius: 100%;
  }
  .main-navbar .menubar-brand {
    height: 30px;
  }
}
@media (max-width: 767.98px) {
  .dataTables_wrapper .row:last-child > * {
    display: flex;
    justify-self: start !important;
  }
  .dataTables_wrapper .row:last-child > *:last-child {
    margin-top: 0.5rem;
  }
  .back-profile {
    height: 15rem !important;
  }
  .img-profile-wrapper {
    margin-bottom: 7rem !important;
  }
  .faq .accordion-button {
    padding: 1.35rem 1.25rem;
  }
}
@media (max-width: 575.98px) {
  .fz-sm-16 {
    font-size: 16px !important;
  }
  .fz-sm-14 {
    font-size: 14px !important;
  }
  .fz-sm-12 {
    font-size: 12px !important;
  }
  body {
    font-size: 14px;
  }
  .fs-5 {
    font-size: 16px !important;
  }
  .fs-6 {
    font-size: 14px !important;
  }
  .fz-14 {
    font-size: 12px !important;
  }
  .fz-12 {
    font-size: 10px !important;
  }
}

.pdf-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0); /* Transparent background */
  pointer-events: none; /* Allow interaction with underlying content */
}