@media (prefers-color-scheme: dark) {
    * {
        color: #FFFFFF !important;
    }
}

:root {
  --primary-bg-hover: #FFA530;
  --primary-bg-color: #383F62;
  --primary-bg-border: #383F62;
}

/*
 * Christianto: disable transition since it's causing:
 * - weird transition issue - https://s5nwz99bcro.sg.larksuite.com/record/OiyVrmQIaexpGIcVDsllW9JOgmb
 * - incorrect calculation - https://s5nwz99bcro.sg.larksuite.com/record/Fu4ArKo0De7iYccW3V4lJXDxgjd
 */
.app-sidebar {
  transition: none;
}

.custom-nav-dropdown > .nav-link {
  color: black !important;
}

.fc-daygrid-day-number {
  font-weight: normal !important;
}

.filepond--root {
  font-family: Poppins !important;
}

.low-income-symbol {
  background: plum;
  border-radius: 100%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.low-income-symbol span {
  white-space: nowrap;
}

.show-remarks {
  position: relative;
  cursor: pointer;
}

.show-remarks > span {
  position: absolute;
  background: #fff;
  padding: 5px;
  border: 1px solid #ccc;
  top: 100%;
  left: 0;
  z-index: 1;
}

.surety-symbol {
  background: #0A58AA;
  border-radius: 100%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.surety-symbol span {
  white-space: nowrap;
}

/* Christianto: unset the rule provided by style.css since it's causing cropped dropdown options. Please inform me if there's issue because of this code */
.tab-content {
  overflow: unset;
}

.text-green {
  color: #5C9508;
}

/* Christianto: update the layout to make the content take full height of the remaining space. Please inform me if there's issue because of this code */
.horizontal-content {
  min-height: auto !important;
}

@media (min-width: 992px) {
  .horizontal .hor-header .container,
  .horizontal .horizontal-main .container,
  .horizontal .main-content.horizontal-content .container {
    min-width: 100% !important;
    padding: 0 3rem !important;
  }

  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

@media (min-width: 1500px) {
  .col-xxl-9 {
    max-width: 75%;
  }

  .d-xxl-inline-block {
    display: inline-block !important;
  }

  .d-xxl-none {
    display: none !important;
  }
}