/*
* Custom styles for the FMC3
*/
.btn-fmc-red {
  background-color: #AB0422;
  transition: all ease-in-out 400ms;
}

.btn-fmc-red:hover {
  border: 1px solid #AB0422;
  background-color: #FFFFFF;
  color: #AB0422 !important;
}

.btn-fmc-green {
  background-color: #0ACF97;
  transition: all ease-in-out 400ms;
}

.btn-fmc-green:hover {
  border: 1px solid #0ACF97;
  background-color: #FFFFFF;
  color: #0ACF97 !important;
}

.btn-fmc-green2 {
  background-color: #058560;
  transition: all ease-in-out 400ms;
}

.btn-fmc-green2:hover {
  border: 1px solid #058560;
  background-color: #FFFFFF;
  color: #058560 !important;
}

.btn-fmc-orange {
  background-color: #FFB03E;
  transition: all ease-in-out 400ms;
}

.btn-fmc-orange:hover {
  border: 1px solid #FFB03E;
  background-color: #FFFFFF;
  color: #FFB03E !important;
}

.btn-fmc-blue {
  background-color: #222F63;
  transition: all ease-in-out 400ms;
}

.btn-fmc-blue:hover {
  border: 1px solid #222F63;
  background-color: #FFFFFF;
  color: #222F63 !important;
}

.btn-fmc-blue2 {
  background-color: #004267;
  transition: all ease-in-out 400ms;
}

.btn-fmc-blue2:hover {
  border: 1px solid #004267;
  background-color: #FFFFFF;
  color: #1B1464 !important;
}

.btn-fmc-vpurple {
  background-color: #9568FF;
  transition: all ease-in-out 400ms;
}

.btn-fmc-vpurple:hover {
  border: 1px solid #9568FF;
  background-color: #FFFFFF;
  color: #6F1D99 !important;
}

.btn-fmc-white {
  background-color: #FFFFFF;
  border: 1px solid #222F63;
  color: #222F63 !important;
  transition: all ease-in-out 400ms;
}

.btn-fmc-white:hover {
  border: 1px solid #222F63;
  background-color: #222F63;
  color: #FFFFFF !important;
}

.loanInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 50px auto;
  position: relative;
  /* Active step styling */
  /* Connecting lines between icons */
  /* Adjust spacing and alignment */
}

.loanInfo .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  /* For connecting lines */
}

.loanInfo .circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid #222F63;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  z-index: 2;
}

.loanInfo .circle i {
  font-size: 24px;
  color: #222F63;
}

.loanInfo .content {
  text-align: center;
}

.loanInfo .status {
  font-weight: 600;
  margin-bottom: 5px;
  color: #222F63;
  font-size: 1rem;
}

.loanInfo .date {
  margin-bottom: 10px;
  color: #222F63;
}

.loanInfo .amount {
  font-size: 18px;
  font-weight: bold;
  color: #222F63;
}

.loanInfo .active .circle {
  background-color: #222F63;
  border-color: #222F63;
}

.loanInfo .active .circle i {
  color: #fff;
}

.loanInfo::before {
  content: '';
  position: absolute;
  top: calc(15% - 2px);
  left: 8%;
  right: 8%;
  height: 3px;
  background-color: #222F63;
  z-index: 1;
}

.loanInfo .step:not(:last-child) {
  margin-right: 20px;
  /* Add spacing between steps */
}

.customer {
  padding: 0;
}

.customer .personal-details {
  padding: 2rem;
}

.customer .personal-details i {
  font-size: 1.2rem;
}

.customer .personal-details i::before {
  color: #222F63;
}

.customer .personal-details span {
  color: #222F63;
  font-size: 1rem;
}

.customer .applicant-assoc {
  background-color: #b4babf;
  padding: 2rem;
}

.customer .applicant-assoc i {
  font-size: 1.2rem;
}

.customer .applicant-assoc i::before {
  color: #222F63;
}

.customer .applicant-assoc span {
  color: #222F63;
  font-size: 1rem;
}

#customersTable tbody tr, #offersTable tbody tr, .dataFMCTable tbody tr, #filterStatusTable tbody tr {
  cursor: pointer;
}

#customersTable tbody tr:hover, #offersTable tbody tr:hover, .dataFMCTable tbody tr:hover, #filterStatusTable tbody tr:hover {
  background-color: #f8f9fa;
}

.flash-messages {
  margin-bottom: 1rem;
}

.flash-messages .error {
  color: #FF0000;
}

.customer_filters h5 {
  font-size: .9rem;
  margin-left: 0;
  border-top: 1px solid #CCC;
  padding-top: 1.2rem;
  padding-left: 1.6rem;
  margin-bottom: 0;
}

.customer_filters__submenu {
  padding-top: 0;
}

.customer_filters__submenu li {
  display: flex;
  align-items: center;
  padding: 0 0 0 2rem;
}

.customer_filters__submenu li a {
  font-size: .9rem;
  font-weight: 500;
  padding-left: 0 !important;
}

#customerFiltersTable .filter-option-inner-inner {
  width: 140px;
}

#statusSelect .dropdown-header {
  font-size: 15px;
  font-weight: 600 !important;
}

#statusSelect .bootstrap-select {
  width: 100% !important;
}

#statusSelect .bootstrap-select .dropdown-menu li a.dropdown-item {
  border-radius: 0 !important;
  max-width: 75%;
  text-align: center;
  margin: 5px auto;
  font-size: 12px;
  padding: 12px;
}

#statusSelect .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  left: 30px;
  top: 10px;
  right: 0;
}

#filterStatusTable .badge {
  border-radius: 0 !important;
}

.badge-gray {
  background-color: #6c757d;
}
.badge-gray:hover {
  color: #fff;
}
.light.badge-gray {
  background-color: rgba(108, 117, 125, 0.2);
  color: #6c757d;
}

#statesSelect .bootstrap-select, #merchantSelect .bootstrap-select {
  width: 100% !important;
}

.btn-prescore {
  width: 120px;
  border: 1px solid #ccc;
}

.form-check-input {
  margin-right: 5px;
}

.spin {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.nav-header .brand-title {
  margin-left: 0.9375rem;
  max-width: 12rem;
}

.nav-header .brand-title img {
  width: 100%;
  max-width: 100%;
  height: 45px;
  object-fit: cover;
}

.header-right .notification_dropdown .nav-link i.loan-calc-icon {
  font-size: 2rem;
}

.dataTables_empty {
  text-align: center !important;
}

#loanCalcModal .range-text {
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  margin-top: 15px;
}

#loanCalcModal .modal-content {
  background-color: rgba(0, 0, 0, 0.9);
}

#loanCalcModal .slider {
  width: 100%;
  margin: 0 0 20px 0;
}

#loanCalcModal .result-box {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 8px;
  color: #ffffff;
  border: 1px solid #00ADA3;
}

#loanCalcModal .result-box .result-item {
  padding: 20px;
  background-color: black;
  margin: 20px 0;
  border-radius: 0.5rem;
}

#loanCalcModal .result-box .net-payout {
  background-color: rgba(10, 207, 131, 0.4);
  border-radius: 8px;
  margin: 10px 0;
  border: 1px solid #0acf83;
}

#loanCalcModal .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#loanCalcModal .form-label {
  color: #ffffff;
}

#loanCalcModal .text-center {
  color: #ffffff;
}

.modal-backdrop {
  --bs-backdrop-opacity: 0.9 !important;
}

.message {
  color: #17A2B8;
}

.message.error {
  margin: 1rem 0;
  text-align: center;
  color: #FF0000;
}

.message.success {
  color: #1EBA62;
  margin: 1rem 0;
  text-align: center;
}

.flashing-bg-success {
  animation: flashBgSuccess 1500ms infinite alternate;
}

@keyframes flashBgSuccess {
  0% {
    background-color: #F7C93D;
  }
  50% {
    background-color: rgba(30, 186, 98, 0.5);
  }
  100% {
    background-color: #1eba62;
  }
}

.blink-bg-danger {
  animation: flashBgDanger 1500ms infinite alternate;
}

@keyframes flashBgDanger {
  0% {
    background-color: #000;
  }
  50% {
    background-color: rgba(253, 83, 83, 0.5);
  }
  100% {
    background-color: #fd5353;
  }
}

.required::after {
  top: 0;
  left: -12px;
}

.checkbox-ownership .input.radio {
  display: flex;
  gap: 10px;
}

.checkbox-ownership .form-check .form-check-input[type="radio"] {
  top: -3px;
}

.usersPage .accordion-header .accordion-button::after {
  top: 30%;
}

.usersPage .accordion-header .accordion-button:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.usersPage .accordion-body {
  padding: 0;
}

.usersPage .accordion-body .table-responsive {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #FFF;
  padding: 1rem;
  margin-top: 3px;
}

.consumer-details .detail-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
}

.dlabnav, .nav-header {
  background: #0a3157;
}

.dlabnav {
  border-right: 0;
}

.dlabnav .metismenu > li a {
  color: #FFF;
}

.dlabnav .metismenu > li a i {
  color: #c9ced5;
}

.dlabnav .metismenu > li.mm-active a {
  background: #09659d;
  color: #FFF;
}

.dlabnav .metismenu .mm-active .customer-filters__submenu li a {
  background: transparent !important;
}

.dlabnav .copyright p {
  color: #FFF !important;
}

.nav-header {
  border-bottom: 1px solid #898585;
}

@media (max-width: 768px) {
  .nav-header {
    background: transparent;
    border-bottom: 0;
  }
}

.customer-filters__submenu {
  margin-top: 0;
  padding-top: 0;
}

.customer-filters__submenu li a {
  padding: .4rem 1rem .4rem 3rem !important;
  font-size: 12px !important;
}

.customer-filters__submenu li a i {
  width: 10px !important;
}

.logo-icon {
  display: none;
}

@media (max-width: 768px) {
  .logo-icon {
    display: block;
  }
}

.title-greet {
  color: #123f69;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 768px) {
  .title-greet {
    display: none;
  }
}

.title-subgreet {
  font-size: .875rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .title-subgreet {
    display: none;
  }
}

.header-content {
  background-color: #FFF;
}

.header-content .navbar-nav li .nav-link {
  background-color: transparent !important;
  border: 0 !important;
}

.header-content .header-right .notification_dropdown .nav-link {
  width: 2rem;
}

[data-sidebar-style="overlay"] .dlabnav .metismenu > li > a {
  color: #FFF !important;
}

.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #0d4f8f;
  border-radius: 10px;
  overflow: hidden;
  padding: 0 .3rem;
}

.search-box input[type=search] {
  border: none;
  padding: 10px 15px;
  flex: 1;
  font-size: 14px;
  outline: none;
  margin-left: .1rem !important;
}

.form-inline .input-group {
  flex-wrap: nowrap;
  /* Prevent wrapping on smaller screens */
}

.input-group-prepend {
  align-items: center;
  display: flex;
}

.input-group-text {
  width: 2.5rem;
  min-width: 100%;
  justify-content: center;
  border-radius: 5rem;
  border-color: transparent;
  height: 2.5rem;
  background: #0d4f8f;
}

.input-group-text i {
  color: #FFF;
}

.monthlyIncome .input-group-text {
  width: auto;
  min-width: auto;
  justify-content: center;
  border-radius: 8px;
  border-color: transparent;
  height: auto;
  background: #0d4f8f;
  color: #FFF;
}

.btn-search-clear {
  background-color: #FFF;
  color: #0d4f8f;
  padding: .675rem 1.5rem;
  font-size: 14px;
  border: 1px solid #0d4f8f;
  border-radius: 10px;
  white-space: nowrap;
  text-decoration: none;
}

.btn-search-clear:hover,
.btn-search-clear:focus {
  background-color: #0d4f8f;
  color: #FFF;
  text-decoration: none;
}

.btn-search-enter {
  background-color: #0d4f8f;
  color: #FFF;
  padding: .675rem 1.5rem;
  font-size: 14px;
  border: 1px solid #0d4f8f;
  border-radius: 10px;
  white-space: nowrap;
}

.btn-search-enter:hover {
  background-color: #0a3157;
  color: #FFF;
}

.select_type .dropdown.bootstrap-select {
  width: 100%;
  border: 1px solid #0d4f8f;
  border-radius: 10px;
}

.dateInput .input {
  width: 100%;
}

.dateInput input[type=text] {
  border: 1px solid #0d4f8f;
  border-radius: 10px;
}

.dateInput .input-group-append {
  right: 5px !important;
}

.card-header {
  border-bottom: 2px solid #00ada3;
}

@media (max-width: 768px) {
  .header-right .nav-item {
    margin: 0 5px;
  }
}

.dropdown .btn.dropdown-toggle {
  border: none;
}

.swiper .card-box-icon {
  border: none;
}

.swiper h2 {
  color: #0a3157;
  font-size: 20px;
  font-weight: 600;
}

.swiper p {
  color: #1c81cb;
  font-size: 30px;
  font-weight: 600;
}

.selectInput .input.select {
  border: 1px solid #e6e6e6 !important;
  border-radius: 0.5rem;
}

.selectInput .bootstrap-select .dropdown-toggle {
  border: 1px solid #dee2e6 !important;
  border-radius: 10px !important;
}

.header-profile2 img {
  margin-left: 0 !important;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}

.border-title {
  border-top: 1px solid #00ada3;
  background-color: transparent;
  opacity: 1;
}

#applicationTabs {
  border: none;
}

.guided-invitation-page .custom-tabs .nav-item:last-child {
  border: none;
  margin-left: 3px;
  margin-right: 0;
}

.guided-invitation-page .custom-tabs .nav-link {
  background-color: #FFF;
}

.guided-invitation-page .custom-tabs .nav-link:last-child {
  border: none;
}

.guided-invitation-page .custom-tabs .nav-link.active {
  color: #1EBA62;
  background-color: #fff;
  border-color: #1EBA62 #1EBA62 #fff;
  border-bottom: 2px solid #1EBA62;
}

.guided-invitation-page .tab-pane {
  padding: 0;
}

.guided-invitation-page .tab-pane .card {
  border-top-left-radius: 0;
}