@tailwind base;
@tailwind components;
@tailwind utilities;
/* @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); */
/* @import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap"); */

@font-face {
  font-family: 'Mukta';
  /* src: url(/assets/Poppins-Regular-4132d2d2b9443d42422ebb2769b3113c157e0cf08c91cfe555a6da5ac0a9c762.ttf); */
  src: url(/assets/Mukta-Regular-7c04e23f357d25e56fd7f6cdd4cb2a6fca4cc9fc778f181145732eec550ad84c.ttf) !important;
}

body {
  background-color: #F2F0EB;
  /* font-family: 'Poppins'; */
}
h1,h2,h3,h4,h5,h6{
  src: url(/assets/Poppins-Regular-4132d2d2b9443d42422ebb2769b3113c157e0cf08c91cfe555a6da5ac0a9c762.ttf)!important;
}

a.active {
  /* border-color: rgb(37 99 235/var(--tw-border-opacity)); */
  /* background-color: rgba(242, 153, 74, 0.18) */
  /* background-color: rgb(239 246 255); */
  /* @apply bg-blue-100; */
  --tw-border-opacity: 1;
  color: rgb(37 99 235);
  position: relative;
  /* border-radius: 0 40px 40px; */
}
a.active i {
  /* --tw-border-opacity: 1;
  border-color: rgb(37 99 235/var(--tw-border-opacity)); */

}
a.active::after {
    content: "";
    position: absolute;
    height: 100%;
    /* width: 4px; */
    right: -4px;
    top: 0px;
    background: rgb(29 78 216);
    border-radius: 0px 3px 3px 0px;
}
a:hover {
  text-decoration: none !important;
}

.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
  font-weight: normal;
  &:hover{
    @apply bg-gray-300;
  }
  &:active{
    @apply bg-gray-400 text-white;
  }
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
  &:hover {
    @apply text-gray-400 bg-gray-200;
  }
  &:active {
    @apply text-gray-400 bg-gray-200;
  }
}
.pagy-nav, .pagy-nav .page.active, .pagy-nav .page.next.disabled, .pagy-nav .page.prev.disabled, .pagy-nav .page a {
  box-shadow: none;
}
.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply text-white cursor-default ;
  background-color: rgba(31, 42, 56, 1);
  &:hover {
    @apply text-white bg-gray-400;
  }
  &:active {
    @apply bg-gray-400 text-white;
  }
}


.pagy-combo-nav-js {
  @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
}

.pagy-combo-nav-js .pagy-combo-input {
  @apply bg-white px-2 rounded-sm
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
  &:hover {
    @apply text-gray-800;
  }
  &:active {
    @apply text-gray-800;
  }
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
}

.pagy-nav .page.active, .pagy-nav .page a {
  border-radius: 10%;
  font-weight: normal;
}
.pagy-nav .page.next a, .pagy-nav .page.prev a {
  border-radius: 5px;
}

.bg-gradient-white-to-blue-400 {
  background-image: linear-gradient(to right, rgb(255,255,255), rgb(96, 165, 250));
}
.bg-gradient-grey-200-to-white {
  background-image: linear-gradient(to right, rgb(229 231 235) 80%, rgb(255,255,255));
}
.bg-gradient-white-to-trans-bt {
  background-image: linear-gradient(to top, rgb(255 255 255) 30%, rgba(255,255,255, 0));
}
.bg-gradient-blue-400-to-white {
  background-image: linear-gradient(to right, rgb(96, 165, 250), rgb(255,255,255) );
}
.bg-gradient-red-400-to-white {
  background-image: linear-gradient(to right, rgb(251 113 133), rgb(255,255,255) );
}


.loan-list-action {
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
  transition-duration: .3s;
}
.loan-list-row:hover .loan-list-action {
  zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}

.text-xss {
  font-size: .65rem;
}
/* Breadcrumb */
.breadcrumbs {
  @apply mb-2 py-1 text-sm;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumbs span.separator {
  @apply text-slate-400;
  font-size: 20px;
}
.breadcrumbs span {
  @apply text-slate-500;
}
.breadcrumbs a,
.breadcrumbs span {
  padding: 0px 6px;
}
.breadcrumbs a {
  @apply text-slate-700;
}
.breadcrumbs .first {
  padding-left: 0px;
}
.breadcrumbs a:hover {
  @apply text-blue-700;
  /* text-decoration: underline; */
}

/* Custom CSS Groups */
.go-table {
  @apply table-auto border-collapse text-sm border w-full;
  font-size: .75rem!important;
}
/* .go-table thead tr {
  background-color: rgba(31, 42, 56, 1);
} */
/* .go-table thead th {
  @apply border-b font-medium py-2 px-3 text-slate-50 text-left
} */
.go-table tbody tr {
  @apply border-b border-slate-100 p-3 text-slate-500
}
.go-basic-button {
  @apply px-4 py-2.5 cursor-pointer text-sm font-medium text-slate-600 bg-white rounded-md border border-slate-100 hover:bg-slate-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-slate-200
}
.go-primary-button {
  @apply px-6 py-2 cursor-pointer text-sm font-semibold  bg-blue-600 text-white border border-blue-900 rounded-md shadow-sm
}
.go-primary-button.full-width {
  @apply w-full py-2;
  display: block;
  text-align: center
}
.go-outline-button {
  @apply px-6 py-1.5 cursor-pointer font-semibold text-sm bg-white text-slate-700 border border-slate-300 rounded-md shadow-sm outline outline-2 outline-offset-1 outline-blue-900
}
.go-button {
  @apply px-6 py-2 cursor-pointer text-sm font-semibold  bg-blue-600 text-white border border-blue-600 rounded-md shadow-sm
}
.go-button.full-width {
  @apply w-full py-2;
  /* display: block; */
  text-align: center
}

.go-outline-button.full-width {
  @apply w-full;
  display: block;
  text-align: center;
}
.go-card {
  @apply bg-white  border border-slate-200
}
.go-card-t {
  @apply bg-white  border border-slate-200
}
/* .go-card:hover {
  @apply shadow-md;
  transition-duration: 0.2s;
  transition-timing-function: linear;
} */
.go-line-card {
  @apply rounded-lg border border-slate-200
}

.go-card-content {
  @apply px-5 py-3
}
.go-analytics-card {
  @apply rounded-lg relative overflow-hidden
}
.go-analytics-card::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  background: linear-gradient(140.9deg, rgb(144, 202, 249) -14.02%, rgba(144, 202, 249, 0) 77.58%);
  border-radius: 50%;
  top: -160px;
  right: -130px;
}
.go-analytics-card::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  background: linear-gradient(210.04deg, rgb(144, 202, 249) -50.94%, rgba(144, 202, 249, 0) 83.49%);
  border-radius: 50%;
  top: -30px;
  right: -180px;
}
.with-circle-effect::before {
  @apply bg-blue-500;
  content: "";
  position: absolute;
  z-index: 1;
  width: 240px;
  height: 210px;
  top: -125px;
  right: -130px;
  border-radius: 50%;
  opacity: 1;
  transform: rotate(40deg);
}
.with-circle-effect::after {
  @apply bg-blue-800;
  content: "";
  position: absolute;
  width: 210px;
  height: 254px;
  z-index: 1;
  top: -25px;
  right: -160px;
  border-radius: 50%;
  opacity: 0.2;
  transform: rotate(40deg);
}
.go-inline-editable-text {
  @apply rounded-md text-slate-700 hover:bg-slate-100;
  display: block;
}
.go-underline-link {
  @apply border-dashed	border-b border-slate-500 text-slate-500

}
.go-details-link {
  @apply text-blue-500 bg-slate-50 font-medium rounded-lg text-sm py-1 px-2 text-center inline-flex items-center
}
.go-label {
  @apply px-2 py-0.5 text-sm rounded;
}
.go-label.success {
  @apply bg-green-100 text-green-600;
}
.go-label.muted {
  @apply bg-slate-50 text-slate-600;
}
.go-label.danger {
  @apply bg-red-50 text-red-600;
}
.go-label.go-project-open {
  @apply bg-slate-100 text-slate-600;
}
.go-label.go-project-allocated {
  @apply bg-blue-100 text-blue-600;
}
.go-label.go-project-in_progress {
  @apply bg-green-100 text-green-600;
}
.go-label.go-project-on_hold {
  @apply bg-amber-100 text-amber-600;

}
.go-label.go-project-cancelled {
  @apply bg-red-100 text-red-600;
}
.go-label.go-project-completed {
  @apply bg-indigo-100 text-indigo-600;
}

.go-label.go-project-closed {
  @apply bg-violet-100 text-violet-600;
}
.custom-tab-bar li {
  /* @apply pt-4 pb-2; */
}
.custom-tab-bar li a {
  /* @apply rounded-t-lg; */
}
.custom-tab-bar .active{
  @apply text-blue-600;
  @apply bg-white;
  @apply border-blue-600;
  background-color: transparent !important;
}
.custom-tab-bar a.active:after{
  background-color: transparent;
}

.min-h-half{
  min-height: 35vh
}

.min-h-75{
  min-height: 45vh
}
.form-card{
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 17px 0 rgb(0 0 0 / 28%);
  background-color: #ffffff;
}
.loan-application-form-card{
  border-radius: 20px;
  box-shadow: 0 4px 17px 0 rgb(0 0 0 / 28%);
  background-color: #ffffff;
}

.table {
  display: grid;
  grid-template-columns: repeat(4, 2fr) 1fr;
  column-gap: 2rem;
  align-items: bottom;
  padding: 1rem;
  border: 1px solid #ccc;
  border-bottom: none;
  border-collapse: collapse;
}

turbo-frame:last-child .table {
  border-bottom: 1px solid #ccc;
}

turbo-frame:nth-child(even) .table {
  background: #fafafa;
}

.w-38 {
	width: 38%;
}

.background-linear-gradient {
  background-color:  #1f2a38;
  /* background-image: linear-gradient(rgb(31, 42, 56, 1), rgba(41, 77, 127, 1));; */
}

.background-linear-gradient-l-r {
  /* background-image: linear-gradient(to right,rgba(41, 77, 127, 1), rgba(22, 146, 195, 1)); */
  background-color:  #1f2a38;
  /* background-image: linear-gradient(to right,rgb(31, 42, 56, 1), rgba(41, 77, 127, 1)); */
}
.background-white-linear-gradient {
  background-color: #FFFFFF;
}

.image-width {
  height: 150.73px;
  opacity: 0.3;
  position: absolute;
  left: 0.05%;
  right: 50.05%;
  bottom: 0.12%;
}

.terms-and-service {
  position: absolute;
  bottom: 6.48%;
  line-height: 21px;
}

.stand-out-text {
  color: #fc8403
}

.auth-primary-color {
  color: rgba(41, 77, 127, 1);
}

.auth-secondary-color {
  color: rgba(73, 80, 87, 1);
}

.auth-notice-color {
  color: rgba(212, 86, 102, 1);
}

.side-nav-back {
  background-color: #1F2A38;
}

.back-opacity {
  background-color: rgba(52,130,176,1)
}

.top-nav-border {
  border-bottom: 1px solid #CDD1D2;
}

.step-background-color {
  background-color: rgb(52,130,176)
}
.step-form-background-color {
  background-color: #EEFAFF;
  text-align: center;
  color: #294D7F;
  font-weight: bold;
}

.progress-bar {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.progress-color {
  background-color: rgb(167,209,75);
}

.progress-color-text {
  color: rgb(167,209,75);
}

.border-lg-left {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.body-background {
  background-color: rgb(240,246,249);
}
.public-background{
  background-color: #eff6ff !important;
}

.get-help {
  background-color: rgb(240,250,255);
  border: 0.5px solid #CDD1D2;
}

.get-help-text {
  color: rgb(74,80,88);
}

.border-radius {
  border-radius: 32px;
}

.border-color {
  border-color: rgba(41, 77, 127, 1);
}

.add-more {
  background-color: rgb(240,250,255);
  border: 1px solid rgba(41, 77, 127, 1);
}

.footer-buttons {
  color: rgba(41, 77, 127, 1);
  border: 1px solid rgba(41, 77, 127, 1);
}

.image-position {
  bottom: 0;
  right: -8%;
}

.delete-position {
  top: 0;
  right: 0;
}

.date-picker {
  bottom: 0.25rem;
  top: 2.25rem;
}

.date-picker-2 {
  bottom: 0.25rem;
  top: 2rem;
}

.width-65 {
  width: 65%;
}

.width-70 {
  width: 70%;
}
.width-100 {
  width: 100%;
}

.width-420 {
  width: 420px;
}

.min-width-405 {
  min-width: 405px;
}

.health-color {
  color: rgb(22,146,195);
}

.client-box {
  background: linear-gradient(128.33deg, rgba(255, 255, 255, 0.2) 12.14%, rgba(255, 255, 255, 0.06) 93.62%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* backdrop-filter: blur(10px); */
  border-radius: 16px;
}

.bg-sidebar-healthcard {
  background: linear-gradient(180deg, #F0FAFF 58.31%, #DDF4FF 100%);
  border: 0.5px solid #CDD1D2;
  border-radius: 32px;
}

.homepage-get-started-btn {
  color: rgb(29,54,89);
  background-color: white;
}

.homepage-refinance-btn {
  background: rgba(41, 77, 127, 1);
  border: 1px solid white(41, 77, 127, 1);
}

.info-box {
  /* background: #E3F5C9; */
  /* background: #F3F6EA; */
  background: #1c9dd0d9;
  /* border: 0.5px solid #83A92F; */
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  color: #ffffff;
}
.info-credit-box {
  background: #E3F5C9;
  border: 0.5px solid #A8D14B;
  /* text-align: center; */
  color: #495057;
}
.text-Blueish-Dark-Grey{
  color: #495057;
}
.text-Secondary-Dark-Grey{
  color: #818B95;
}
.text-indigo{
  font-weight: 600;
  font-size: 20px;
  color: #294D7F;
}
.interested-text {
  text-align: center;
  /* color: #495057; */
  color: #ffffff;
}

.interested-text-number {
  text-align: center;
  /* color: #495057; */
  color: #ffffff;
}

.show-all {
  color: rgba(22, 146, 195, 1);
}

.lender-card {
  background: #FFFFFF;
  border: 0.5px solid #DFE3E7;
  border-radius: 8px;
}
.standard-card{
  background: #FFFFFF;
  border-radius: 8px;
  padding: 20px;
}
.market-card {
  background: #fbe7d8;
  border: 0.5px solid #DFE3E7;
  border-radius: 8px;
}

.lender-card-min-w {
  min-width: 288px;
  height: 110px;
}

.loans-box {
  color: #294D7F;
  border: 0.5px solid #294D7F;
  border-radius: 20px;
  background-color: rgb(226,248,255);
}

.live-status {
  color: #294D7F;
  border: 0.5px solid #294D7F;
  border-radius: 6px;
  background-color: rgb(226,241,255);
}

.in-review-status {
  color: rgb(206,161,1);
  border: 0.5px solid rgb(236,218,146);
  border-radius: 6px;
  background-color: rgb(255,252,234);
}

.select2-container {
  width: 100% !important;
  border-radius: 0.375rem;
  color: inherit;
}

.select2-selection__arrow {
  display: none;
}

.select2-container .select2-selection--single {
  @apply block rounded-md border border-gray-200 outline-none px-3 py-2 mt-1;
  height: 43px !important;
}
.link-active{
  font-weight: 600;
  font-size: 18px;
  color: #294D7F;
}
.h-28{
  height: 28px !important;
}
.h-220{
  height: 220px;
}

a.enabled::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  /* right: -4px; */
  left: 195px;
  top: 0px;
  background: rgb(185 185 185);
  /* border-radius: 0px 2px 2px 0px; */
}

a.enabled {
  /* @apply bg-blue-100: ; */
  --tw-border-opacity: 1;
  color: rgb(185 185 185);
  position: relative;
}
.side{
  @apply md:w-32 lg:w-64;
}
.pl-94{
  padding-left: 94px ;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}




/* Toggle hide/show - no Js
--------------------------------*/
.toggle-box-region {background-color:#fff; border:1px solid #d9d9d9; padding:16px 18px;}
.toggle-box {display:none;}
.toggle-box + label {
	color:#555;
	cursor:pointer;
	display:block;
	font-weight:bold;
	line-height:23px;
	padding:.3em 0 .3em 26px;
	position:relative;
  margin: 0 1rem;
}

.toggle-box + label + div {display:block; margin:0 0 14px;}
.toggle-box:checked + label:nth-child(n) + div {display:none;}

.toggle-box + label:before {
	position:absolute;
	content:"\f0fe";
	/* font-family:FontAwesome; */
	top:.3em;
	left:0px;
	color:#0085a6;
}
.toggle-box:checked + label {color:#0085a6;}
.toggle-box:checked + label:before {content:"\f146";}
.toggle-box-content { color:#000; padding:2px 1em .6em 28px;}

/* General */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
.inner table {
  /* table-layout: fixed; */
  width: 100%;
  /* margin-left: -100px; */
 /*ie7*/
}
.inner tbody td, tbody th {
  /* vertical-align: top; */
  /* border-top: 1px solid #ccc; */
  padding: 10px;
  /* font-family: 'Arial'; */
  font-size: 12px;
  text-align: center;
  font-weight: 400;
}

.financial_table tbody td {
  text-align: right !important;
}

.financial_table tbody td.first-col {
  text-align: left !important;
}

.inner thead th {
  /* vertical-align: top; */
  /* border-top: 1px solid #ccc; */
  /* padding: 10px; */
  /* width: 120px; */
  /* background-color: #004496; */
  /* color: #fff; */
  /* font-family: 'Arial'; */
  /* font-size: 12px; */
}
/* .inner thead tr {
  border-top: 1px solid #ccc;
} */
.inner thead td {
  /* vertical-align: top; */
  /* border-top: 1px solid #ccc; */
  /* padding: 10px; */
  /* width: 120px; */
  /* background-color: #004496; */
  /* color: #fff; */
  /* font-family: 'Arial'; */
  /* font-size: 12px; */
}
.first-col {
  position: sticky;
  left: 0px;
  z-index: 1;
  box-shadow: 0px 4px 5px #ababab;
  display: table-cell;
  min-width: 160px;
  /* position: absolute; */
  /* left: 0; */
  /* width: 30%; */
}
.inner th:first-child {
  /* position: -webkit-sticky; */
  /* position: sticky; */
  /* left: 0px; */
  /* z-index: 1; */
  /* background: #004496; */
  /* box-shadow: 0px 4px 5px #ababab; */
  /* display: table-cell; */
  /* min-width: 160px; */
  /* width: 300px; */
  /* text-align: left; */

}
.inner td:first-child {
  /* position: -webkit-sticky;
  position: sticky;
  left: 0px;
  z-index: 1; */
  /* background: #fff; */
  /* box-shadow: 0px 4px 5px #ababab;
  display: table-cell; */
  /* min-width: 160px; */
  /* width: 300px;
  text-align: left; */
  /* font-weight: bold; */
}
.outer {
  position: relative;
}
.inner {
  overflow-x: auto;
  overflow-y: visible;
  /* margin-left: 120px; */
  width: 100%;
}
.lender-img{
  height: 78px;
  width: 78px
}
.institute-box{
  background: #F0F6F9;
}
.sort {
  position: absolute;
  top: 1.5rem;
  left: 8.5rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.sort-desc {
  border-top: 8px solid rgb(29 78 216);
}
.sort-asc {
  /* @apply h-0 w-0 border-x-8 border-x-transparent border-b-[16px] border-b-blue-600; */
  border-bottom: 8px solid rgb(29 78 216);
}
#business-name{
  color: rgb(37 99 235/var(--tw-text-opacity));
}
.shield-img{
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
.required:after {
  content: " *";
  color: #bc025b;
}
.add-btn{
  display: flex;
  align-items: center;
}
.icon{
  background-color: #EEFAFF;
  padding: 10px;
  border: 1px solid #DFE3E7;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.profile-icon{
  background-color: #EEFAFF;
  padding: 10px;
  border: 1px solid #DFE3E7;
  border-radius: 50%;
  height: 60px;
  width: 60px;
}
.head-text-color{
  color:#495057;
}
.head-border-text{

  padding: 0 20px;
}
.head-text{
  border-left: 1px solid #000000;
  padding: 0 20px;
}
.bottom-border{
  border-top: 0.5px solid #DFE3E7;
  margin: 10px 0 10px 0;
}
.sub{
  color: #83A92F;
  background: #F3F6EA;
  padding: 5px;
  border-radius: 100px;
}
.green-bg{
  background: #F3F6EA;
  color: #83A92F;
  margin: 0 4px;
  padding: 6px;
  border-radius: 8px;
}
.small-icon img{
  height: 10px;
  margin-right: 10px;
}
.red-bg{
  color: #D55666;
  background: #FBEEF0;
  margin: 0 4px;
  padding: 6px;
  border-radius: 8px;
}
.blue-bg{
  background: #F0F6F9;
  color: #495057;
  margin: 0 4px;
  padding: 6px;
  border-radius: 8px;

}
.credit-text{
  color: #83A92F !important;
}
.debit-text{
  color: #D45666 !important;
}
.w_100{
  width:100px;
}
#equity_and_liability_analysis .inner td:first-child {
  background: unset;
}
#balance_sheet_asset_analysis .inner td:first-child {
  background: unset;
}
#profit_loss_statement .inner td:first-child {
  background: unset;
}

.unset-first-td .inner td:first-child {
  background: unset;
}
.table-background-light-grey{
  background: #818B95!important;
  border-radius: 12px;
  color: #ffffff;
}
.table-background-deep-grey{
  background: #495057!important;
  border-radius: 12px;
  color: #ffffff;
}
.lender-details ol, ul {
 list-style: revert !important;
}
.lender-details li {
  display: list-item !important;
}

.lender-card ol {
  list-style: revert !important;
  padding-left: 30px;
}
.lender-card ul {
  list-style: revert !important;
  padding-left: 30px;
}
.lender-card li {
  display: list-item !important;
}
.content {
 /* centering text just for view */

  display: none;
}
#loadMore {
  display: block;
  transition: .3s;
}
div[id$="_loadMore"] {
  display: block;
  transition: .3s;
}


.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
}
.see_more_btn {
  cursor: pointer;
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background-color: #294D7F;
  color: #fff;
  border-radius: 0.5rem;
}

.modal-max-w-md{
  width:36rem
}
.top-head {
  padding: 20px 0;
  font-size: 30px;
  color: #294D7F;
}
.padding-48{
  padding: 48px;
}
#navbar-default{
  width: 248px;
}
.client-box-text{
  /* font-family: 'Poppins'; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  /* margin-top: 10px; */
}
.client-box-dimention{
  width: 130px;
  height: 170px;
}
.home-btn-1{
  color: #294D7F;
  background: #EEFAFF;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 40px;
  gap: 10px;
  height: 54px
}
.home-btn-2{
  color: #EEFAFF;
  border: 1px solid #EEFAFF;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 40px;
  gap: 10px;
  height: 54px
}
.border-l-blue{
  /* border-left-width: 1px; */
  border-left: 0.5px solid #318766;
}
.browse-lender{
  padding: 12px 24px;
  gap: 10px;
  font-weight: 600;
  /* position: absolute; */
  width: 175px;
  height: 48px;
  /* left: 1128px;
  top: 776px; */
  background-image: linear-gradient(to right,rgba(41, 77, 127, 1), rgba(22, 146, 195, 1));
  /* background: #EEFAFF; */
  border-radius: 16px;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  /* flex: none;
  order: 0;
  flex-grow: 0; */
}
.interesterd-lender-card{
  padding: 16px;
  width: 250px;
  height: 100px;
  margin-right: 32px
}
.loan-application-card{
  padding: 20px;
  /* height: 205px; */
  margin-right: 32px;
  width: 315px;
}

.show-text{
  color: #1692C3;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  /* font-weight: 600; */
}
.loan_summary_div{
  background: #295286;
  border: 1px solid #DFE3E7;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.apply_loan{
  display: block;
  margin-left: auto;
}
.loan_status-live{
  background: #E2F1FF;
  border: 0.5px solid #1F94FF;
  border-radius: 8px;
}
.loan-text-title{
  /* color: #294D7F; */
  /* font-family: 'Poppins'; */
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;

}
.loan_status-in-review{
  background: #FFFCEA;
  border: 0.5px solid #CEA100;
  border-radius: 8px;
}
.details-link{
  font-size: 18px;
  line-height: 27px;
  color: #1692C3;
}
.details-link img{
  margin-left: 10px;
}
.t-card {
  background: #FFFFFF;
  border: 1px solid #DFE3E7;
  border-radius: 24px;
}

.round-icon-background{
  background: linear-gradient(128.33deg, rgba(255, 255, 255, 0.2) 12.14%, rgba(255, 255, 255, 0.06) 93.62%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  height: 70px;
  /* width: 80px; */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin: 0 50px; */
}
.round-icon-background img {
  height: 20px;
}
.round-icon-text{
  text-align: center;
  margin: 10px 20px;
}
.active-form-nav-prev{
  background: #EEFAFF;
  color: #294D7F;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* flex: none;
  order: 1;
  flex-grow: 0; */
}
.deactive-form-nav-prev{
  background: #DFE3E7;
  color: #818B95;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* flex: none;
  order: 1;
  flex-grow: 0; */
}
.form-nav-next{
  background: #294D7F;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* flex: none;
  order: 1;
  flex-grow: 0; */

}

.regen-text{
  color: #1C9DD0;
}
.modal-close-btn{
  margin-top: -38px;
  margin-right: -40px;
  background-color: #294D7F;
  color: #EEFAFF;
  border-radius: 50%;
}
.bg-deep-blue{
  background-color: #294D7F;
}
.modal-badge{
  background: #EEFAFF;
  border-radius: 8px;
  color: #1C9DD0;
  text-align: center;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
}
.modal-error-badge{
  background: #fff2ee;
  border-radius: 8px;
  color: #d01c1c;
  text-align: center;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
}

.modal-top-text{
  color: #294D7F;
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 48px;
}
.modal-subtext{
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  color: #294D7F;
}
.modal-form-label{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #495057;
}
.modal-declaration{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #294D7F;
}
.modal-link{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #1C9DD0;
}
.applicant .ss-main{
  padding: 8px !important;
}


/* .quick-info-container {
  z-index: 999;
  top: 12%;
  position: fixed;
  width: 100%;
  margin-top: 10px;
  margin: 0px;
} */

  .alert {
    /* color: white !important; */
    margin-bottom: 0;
    border-radius: 0;
    text-align: center;
    padding: 1.6rem 1rem;
  }

  .alert-success {
    background-color: #c1dfca;
    border-color: #00b33c;
    color: #00b33c;
  }

  .alert-danger {
    background-color: #ffcccc;
    border-color: #ff4d4d;
    color: #ff4d4d;
  }
  .ml-none{
    margin-left: unset !important;
  }
  .banner-card-image{
    height: 25px;
    width: 25px;
  }

  /* .otp-field {
    display: flex;
  } */

  .otp-field input {
    width:46px;
    height:44px;
    border-radius:4px;
    padding:8px;
    /* font-size: 32px; */
    text-align: center;
    /* margin: 2px 15px; */
    border: 2px solid #294D7F;
    font-weight: bold;
    color: #294D7F;
    outline: none;
    transition: all 0.1s;
  }
  .contents .otp-field input {
    width:48px;
    height:44px;
    border-radius:4px;
    padding:8px;
    /* font-size: 32px; */
    text-align: center;
    /* margin: 2px 5px; */
    border: 2px solid #294D7F;
    font-weight: bold;
    color: #294D7F;
    outline: none;
    transition: all 0.1s;
  }

  .otp-field input:focus {
    border: 2px solid #eff4f6;
    box-shadow: 0 0 2px 2px #fc8403;
  }
  @media (min-width: 1000px) and (max-width: 1142px) {
    .otp-field input {
        width:56px;
        height:52px;
        border-radius:4px;
        padding:8px;
    }
  }

  .otp-disabled {
    opacity: 0.5;
  }

  .space {
    margin-right: 1rem !important;
  }
  .sm-outer{
    position: relative;
  }
  .sm-inner{
    overflow-x: auto;
    overflow-y: visible;
    /* margin-left: 120px; */
    width: 100%;
  }
  .sm-inner thead tr, .sm-inner tbody tr {
    /* border-top: 1px solid #ccc; */
  }
  .sm-inner thead td, .sm-inner thead th{
    /* vertical-align: top; */
    /* border-top: 1px solid #ccc; */
    padding: 10px;
    /* font-family: 'Arial'; */
    /* font-size: 10px; */
  }
  .sm-inner table {
    /* table-layout: fixed; */
    width: 100%;
    /* margin-left: -100px; */
   /*ie7*/
  }
  .sm-inner tbody td, tbody th {
    /* vertical-align: top; */
    /* border-top: 1px solid #ccc; */
    padding: 10px;
    /* font-family: 'Arial'; */
    /* font-size: 10px; */
    /* text-align: center; */
    /* font-weight: 400; */
  }
  .sm-inner td:first-child {
    left: 0px;
    z-index: 1;
    /* background: #fff;
    box-shadow: 0px 4px 5px #ababab; */
    display: table-cell;
    /* min-width: 160px; */
    /* width: 300px; */
    text-align: left;
    /* font-weight: bold; */
}
.sm-inner .financial_table .first-col{
  position: relative !important;
}
.sm-inner .financial_table thead th {
  /* vertical-align: top; */
  /* border-top: 1px solid #ccc; */
  padding: 10px;
  min-width: 150px;
  /* background-color: #004496; */
  /* color: #fff; */
  /* font-family: 'Arial'; */
  font-size: 12px;
}

/* slider button */
.can-toggle {
  position: relative;
}
.can-toggle *, .can-toggle *:before, .can-toggle *:after {
  box-sizing: border-box;
}
.can-toggle input[type=checkbox] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.can-toggle input[type=checkbox][disabled] ~ label {
  pointer-events: none;
}
.can-toggle input[type=checkbox][disabled] ~ label .can-toggle__switch {
  opacity: 0.4;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:before {
  content: attr(data-unchecked);
  left: 0;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  content: attr(data-checked);
}
.can-toggle label {
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
}
.can-toggle label .can-toggle__label-text {
  flex: 1;
  padding-left: 32px;
}
.can-toggle label .can-toggle__switch {
  position: relative;
}
.can-toggle label .can-toggle__switch:before {
  content: attr(data-checked);
  position: absolute;
  top: 0;
  text-transform: uppercase;
  text-align: center;
}
.can-toggle label .can-toggle__switch:after {
  content: attr(data-unchecked);
  position: absolute;
  z-index: 5;
  text-transform: uppercase;
  text-align: center;
  background: white;
  transform: translate3d(0, 0, 0);
}
.can-toggle input[type=checkbox][disabled] ~ label {
  color: rgba(234, 0, 48, 0.5);
}
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch {
  background-color: #ea0030;
}
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  color: #b70026;
}
.can-toggle input[type=checkbox]:hover ~ label {
  color: #d1002b;
}
.can-toggle input[type=checkbox]:checked ~ label:hover {
  color: #55bc49;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch {
  background-color: #70c767;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  color: #4fb743;
}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch {
  background-color: #5fc054;
}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  color: #47a43d;
}
.can-toggle label .can-toggle__label-text {
  flex: 1;
}
.can-toggle label .can-toggle__switch {
  transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
  background: #ff0538;
}
.can-toggle label .can-toggle__switch:before {
  color: rgba(255, 255, 255, 0.5);
}
.can-toggle label .can-toggle__switch:after {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  color: #ea0030;
}
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  transform: translate3d(65px, 0, 0);
}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle label {
  font-size: 14px;
}
.can-toggle label .can-toggle__switch {
  height: 36px;
  flex: 0 0 134px;
  border-radius: 4px;
}
.can-toggle label .can-toggle__switch:before {
  left: 67px;
  font-size: 12px;
  line-height: 36px;
  width: 67px;
  padding: 0 12px;
}
.can-toggle label .can-toggle__switch:after {
  top: 2px;
  left: 2px;
  border-radius: 2px;
  width: 65px;
  line-height: 32px;
  font-size: 12px;
}
.can-toggle label .can-toggle__switch:hover:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  transform: translate3d(44px, 0, 0);
}
.can-toggle.can-toggle--size-small input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small label {
  font-size: 13px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch {
  height: 28px;
  flex: 0 0 90px;
  border-radius: 2px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:before {
  left: 45px;
  font-size: 10px;
  line-height: 28px;
  width: 45px;
  padding: 0 12px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:after {
  top: 1px;
  left: 1px;
  border-radius: 1px;
  width: 44px;
  line-height: 26px;
  font-size: 10px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:hover:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}





/* * {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #373737;
} */

#form {
  position: relative;
}

#form #pan {
  width: 300px;
  /* background: #292929; */
  outline: none;
  border: none;
  padding: 10px;
  border-radius: 6px;
  color: #292929;
  font-style: 18px;
}

#form .input-box {
  position: relative;
}

#text {
  display: block;
  color: #000;
  font-weight: 300;
  font-style: italic;
  padding: 5px;
}

#form.invalid .input-box::before {
  content: '';
  position: absolute;
  right: 12px;
  top: 9px;
  width: 24px;
  height: 24px;
  background: url(https://fadzrinmadu.github.io/hosted-assets/email-validation-check-using-javascript/invalid.png);
  -webkit-background-size: cover;
  background-size: cover;
}

#form.valid .input-box::before {
  content: '';
  position: absolute;
  right: 12px;
  top: 9px;
  width: 24px;
  height: 24px;
  background: url(https://fadzrinmadu.github.io/hosted-assets/email-validation-check-using-javascript/valid.png);
  -webkit-background-size: cover;
  background-size: cover;
}

/* #1f2a38 */

.button {
  float: left;
  margin: 0 5px 0 0;
  /* width: 100px; */
  height: 40px;
  position: relative;
}

.button label,
.button input {
  /* display: block; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.button input[type="radio"] {
  opacity: 0.011;
  z-index: 100;
  background: #1f2a38 !important;
}

.button input[type="radio"]:checked + label {
  background: #fc8403 !important;
  border-radius: 4px;
}

.button label {
  cursor: pointer;
  z-index: 90;
  line-height: 1.8em;
}
#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}
.bg-dark-blue{
  background: #1f2a38 !important;
}
.bg-orng{
  background: #fc8403 !important;
}
.hide {
  display: none;
}

.sbody {
  /* background-image: url(/assets/animation-0cc9ef19accddd802f6d9ecfe04917100edcf4e4337b8fe5bc04b4e18bd68136.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 250px 250px; */
}
.custom-border-red{
  border: 2px solid #BE123C;
  border-radius: 10px;
}
.custom-border-blue{
  border: 2px solid #1D48D8;
  border-radius: 10px;
}
.custom-border-charcoal{
  border: 2px solid #1F2A38;
  border-radius: 10px;
}
.custom-border-green{
  border: 2px solid #5A7052;
  border-radius: 10px;
}
.stat_card_div{
  background: #fc8403;
  /* border: 1px solid #DFE3E7; */
  border-radius: 8px;
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  height: 6rem;
  display: flex;
  align-items: center;
}
.loan-text-status{
  /* width: 50%; */
  background-color: #EAF9FF;
  color: #1F2A38;
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid #818B95;
  border-radius: 25px;
  margin: 10px 0;
  text-align: center;
}
.white-btn{
  color: #1F2A38;
  background-color: #ffffff;
  border: 1px solid #1F2A38;
  border-radius: 20px;
  font-size: 16px;
}
.bg-dark-blue-btn{
  background: #1f2a38 !important;
  color: #ffffff;
  border: 1px solid #1F2A38;
  border-radius: 20px;
  font-size: 16px;
}
.bg-orange-btn{
  background: #fc8403 !important;
  color: #ffffff;
  border: 1px solid #fc8403;
  border-radius: 20px;
  font-size: 16px;
}
.market-place-card{
  height: 100vh;
  overflow-y: auto;
}
.tenure-input input[type=number]::placeholder {
  /* Firefox, Chrome, Opera */
  text-align: center;
}
#oops {
  color: #1F2A38;
  text-align: center;
  font-family: Poppins;
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
#failure-message{
  width: 578px;
  color: #1F2A38;
  text-align: center;
  font-family: Poppins;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 20px;
}
#dropzone-file{
  width: 210px;
  color: #9CA3AF;
}
.green-text{
  color: #1ecd9d;
}
.post-it-note {
  /* padding: 2em; */
  background: #fc8403;
  /* position: relative; */
  color : white;
  font-size: 18px;
  /* min-height: 10em; */
}

#innnerContainerForFirstTimeUser {
  width: 60vw !important;
}
@media screen and (min-width: 1024px) {
  #innerContainerForFirstTimeUser {
    width: 100vw !important;
  }
}
.customLeftSpaceForLeft{
  padding-left:0;
}
  @media (min-width:1024px){
    .customLeftSpaceForLeft{
      padding-left:248px;
    }
  }


#once-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  text-align: center;
  z-index: 10000;
}
#once-popup .popup-inner {
  background: #ffffff;
  padding: 20px;
  /* width: 600px; */
  max-width: 90%;
  margin: 50px auto;
  }
#once-popup #popup-close {
  float: right;
  font-size: 30px;
  line-height: 10px;
  padding: 5px;
  cursor: pointer;
}
.text-poppins {
  font-family: 'Poppins', sans-serif;
}
.text-custom-yellow {
  color: rgba(252, 132, 3, 1);
}
.text-custom-green {
  color: rgba(131, 169, 47, 1);
}
.text-custom-blue {
  color: rgba(22, 146, 195, 1);
}
.text-custom-gray{
  color: rgb(107, 114, 128, 1);
}
.custom-bg-blue {
  background-color: rgba(31, 42, 56, 1);
}
.custom-bg-light-yellow {
  background-color: rgba(252, 132, 3, 0.1);
}
.custom-bg-yellow {
  background-color: rgba(252, 132, 3, 1);
}
.cursor-not-allowed {
  cursor: not-allowed;
}


#checkout-progress {
  width: 90%;
  margin: 0px auto;
  font-size: 2.5em;
  font-weight: 900;
  position: relative;
}
@media (max-width: 767px) {
  #checkout-progress {
    font-size: 1.5em;
  }
}
#checkout-progress:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 20px;
  width: 100%;
  background-color: #ccc;
  -webkit-transform: translateY(-50%) perspective(1000px);
  transform: translateY(-50%) perspective(1000px);
}
#checkout-progress:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 20px;
  width: 100%;
  background-color: #2c3e50;
  -webkit-transform: scaleX(0) translateY(-50%) perspective(1000px);
  transform: scaleX(0) translateY(-50%) perspective(1000px);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
#checkout-progress.step-2:after {
  -webkit-transform: scaleX(0.333) translateY(-50%) perspective(1000px);
  transform: scaleX(0.333) translateY(-50%) perspective(1000px);
}
#checkout-progress.step-3:after {
  -webkit-transform: scaleX(0.666) translateY(-50%) perspective(1000px);
  transform: scaleX(0.666) translateY(-50%) perspective(1000px);
}
#checkout-progress.step-4:after {
  -webkit-transform: scaleX(1) translateY(-50%) perspective(1000px);
  transform: scaleX(1) translateY(-50%) perspective(1000px);
}
#checkout-progress.step-5:after {
  -webkit-transform: scaleX(1) translateY(-50%) perspective(1000px);
  transform: scaleX(1) translateY(-50%) perspective(1000px);
}
#checkout-progress.step-6:after {
  -webkit-transform: scaleX(1) translateY(-50%) perspective(1000px);
  transform: scaleX(1) translateY(-50%) perspective(1000px);
}
#checkout-progress .a-progress-bar {
  width: 100%;
  display: flex;
  height: 100px;
  justify-content: space-between;
  align-items: center;
}
#checkout-progress .a-progress-bar .step {
  z-index: 2;
  position: relative;
}
#checkout-progress .a-progress-bar .step .step-label {
  position: absolute;
  top: calc(100% + 25px);
  left: 50%;
  -webkit-transform: translateX(-50%) perspective(1000px);
  transform: translateX(-50%) perspective(1000px);
  white-space: nowrap;
  font-size: 0.4em;
  font-weight: 600;
  color: #ccc;
  transition: 0.3s ease;
}
@media (max-width: 767px) {
  #checkout-progress .a-progress-bar .step .step-label {
    top: calc(100% + 15px);
  }
}
#checkout-progress .a-progress-bar .step span {
  color: #ccc;
  transition: 0.3s ease;
  display: block;
  -webkit-transform: translate3d(0, 0, 0) scale(1) perspective(1000px);
  transform: translate3d(0, 0, 0) scale(1) perspective(1000px);
}
#checkout-progress .a-progress-bar .step .fa-check {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0) perspective(1000px);
  transform: translate3d(-50%, -50%, 0) scale(0) perspective(1000px);
}
#checkout-progress .a-progress-bar .step.active span,
#checkout-progress .a-progress-bar .step.active .step-label {
  color: #2c3e50;
}
#checkout-progress .a-progress-bar .step.valid .fa-check {
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1) perspective(1000px);
  transform: translate3d(-50%, -50%, 0) scale(1) perspective(1000px);
}
#checkout-progress .a-progress-bar .step.valid span {
  color: #2c3e50;
  -webkit-transform: translate3d(0, 0, 0) scale(2) perspective(1000px);
  transform: translate3d(0, 0, 0) scale(2) perspective(1000px);
}
#checkout-progress .a-progress-bar .step.valid .step-label {
  color: #2c3e50 !important;
}
#checkout-progress .a-progress-bar .step:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) perspective(1000px);
  transform: translate(-50%, -50%) perspective(1000px);
  width: 75px;
  height: 75px;
  background-color: #fff;
  border-radius: 50%;
  border: 5px solid #ccc;
  transition: 0.3s ease;
}
@media (max-width: 767px) {
  #checkout-progress .progress-bar .step:after {
    width: 40px;
    height: 40px;
  }
}
#checkout-progress .progress-bar .step.active:after {
  border: 5px solid #2c3e50;
}
#checkout-progress .progress-bar .step.valid:after {
  background-color: #2c3e50;
  border: 5px solid #2c3e50;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin: 100px auto 0px;
}
.button-container .btn {
  display: inline-block;
  background-color: #2c3e50;
  color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 900;
  border: 3px solid #2c3e50;
  transition: 0.3s ease;
  cursor: pointer;
  text-align: center;
}
@media (max-width: 767px) {
  .button-container .btn {
    width: 100%;
    margin-bottom: 15px;
  }
}
.button-container .btn:hover {
  background-color: transparent;
  color: #2c3e50;
  -webkit-transform: scale(1.02) perspective(1000px);
  transform: scale(1.02) perspective(1000px);
}

.cus_query tr:nth-child(odd) {
  background-color: rgba(252, 132, 3, 0.1);
}
.cart-item {
  max-width: unset!important;
}

#dropdown_marital{
  background: #004496 !important;
}

.tata_drop select {
  margin-left: 0;
  width: 100%;
  border: 1px solid var(--Neutral-300, #D4D4D8);
}



 #custom-button {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button:hover {
  background-color: #1F2A38;
}

#custom-text {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}
#custom-button1 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button1:hover {
  background-color: #1F2A38;
}

#custom-text1 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

 #custom-button2 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button2:hover {
  background-color: #1F2A38;
}

#custom-text2 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

 #custom-button3 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button3:hover {
  background-color: #1F2A38;
}

#custom-text3 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

 #custom-button4 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button4:hover {
  background-color: #1F2A38;
}

#custom-text4 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

 #custom-button5 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button5:hover {
  background-color: #1F2A38;
}

#custom-text5 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

#custom-button6 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button6:hover {
  background-color: #1F2A38;
}

#custom-text6 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

#custom-button7 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button7:hover {
  background-color: #1F2A38;
}

#custom-text7 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

#custom-button8 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button8:hover {
  background-color: #1F2A38;
}

#custom-text8 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

#custom-button9 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button9:hover {
  background-color: #1F2A38;
}

#custom-text9 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

#custom-button10 {
  padding: 10px;
  color: #fff;
  background: #1F2A38;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #1F2A38;
}

#custom-button10:hover {
  background-color: #1F2A38;
}

#custom-text10 {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}


.custom-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.custom-pagination a{
  padding: 8px 12px;
  border-radius: 5px;
  background-color: rgb(229, 231, 235);
  text-decoration: none;
  color: #333;
  font-weight: 400;
  transition: all 0.3s ease;
  border: 1px solid rgb(229, 231, 235);
}

.custom-pagination a:hover{
  background-color: #1F2A38;
  color: #fff;
  border-color: #007bff;
}

.custom-pagination .active {
  background-color: #1F2A38;
  color: #fff;
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 5px;
  border-color: #1F2A38;
}

.custom-pagination .disabled {
  color: rgb(156 163 175);
  pointer-events: none;
  background-color: rgb(229, 231, 235);
  border: 1px solid rgb(229, 231, 235);
  border-radius: 5px;
  padding: 8px 12px;
}
@media (min-width: 700px) {
  .custom-pagination {
     display:none;
  }
}

  .height_custom_64px{
    height: 100%
  }
  .custom-whitespace{
    white-space: nowrap;
  }
  .custom-margin-sickbar-and-top{
    margin-bottom: 32px;
  }

  @media (min-width:780px){
    .custom-whitespace{
      white-space: normal;
    }
    .height_custom_64px{
      height: calc(100vh - 65px)
    }
  }

/* .multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
  content: counter(stepNum);
  font-family: inherit;
  font-weight: 700;
}
.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
  background-color: #e1e1e1;
}

.multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #027f00;
}
.multi-steps > li:before {
  content: "";
  content: "✓;";
  content: "𐀃";
  content: "𐀄";
  content: "✓";
  display: block;
  margin: 0 auto 4px;
  background-color: #027f00;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #027f00;
  border-radius: 50%;
  color: white;
}
.multi-steps > li:last-child:after {
  display: none;
}
.multi-steps > li.is-active:before {
  background-color: #fff;
  border-color: #027f00;
  color: #027f00;
  animation: pulse 2s infinite;
}
.multi-steps > li.is-active ~ li {
  color: #808080;
}
.multi-steps > li.is-active ~ li:before {
  background-color: #e1e1e1;
  border-color: #e1e1e1;
  color: #808080;
}

.is-complete {
  background: linear-gradient(to right, #027f00 50%, #e1e1e1 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #027f0070;
  }
  100% {
    box-shadow: 0 0 0 10px #027f0000;
  }
}
@keyframes nextStep {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.progress-bar {
  cursor: pointer;
  user-select: none;
}

.progress-bar {
  background-color: #e1e1e1;
  height: 7px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  bottom: calc(50% + 7px);
  width: 100%;
  z-index: -1;
}

.progress-bar--success {
  background-color: #027f00;
}

.progress-bar__bar {
  background-color: #e1e1e1;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 500ms ease-out;
} */
.chatbox {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index : 9999 ; 
}

/* CONTENT IS CLOSE */
.chatbox__support {
    display: flex;
    flex-direction: column;
    background: #eee;
    width: 300px;
    height: 350px;
    z-index: -1;
    opacity: 0;
    transition: all .5s ease-in-out;
}

/* CONTENT ISOPEN */
.chatbox--active {
    transform: translateY(-40px);
    z-index: 123456;
    opacity: 1;
}

/* BUTTON */
.chatbox__button {
    text-align: right;
}


/* HEADER */
.chatbox__header {
    position: sticky;
    top: 0;
    background: orange;
}

/* MESSAGES */
.chatbox__messages {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    flex-direction: column-reverse;
}

.messages__item {
    background: orange;
    max-width: 60.6%;
    width: fit-content;
}

.messages__item--operator {
    margin-left: auto;
}

.messages__item--visitor {
    margin-right: auto;
}

/* FOOTER */
.chatbox__footer {
    position: sticky;
    bottom: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*, html {
    --primaryGradient: linear-gradient(93.12deg, #1f2a38 0.52%, #294d7f 100%);
    --secondaryGradient: linear-gradient(268.91deg, #294d7f -2.14%, #294d7f 99.69%);
    --primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
    --light: 300;
    --regular: 400;
    --semiBold: 600;
    --extraLight: 300;
    --italic: 300;
    --primary: #294d7f ;
}

/* 300;0,400;0,600;1,300 */

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 100%;
    background: transparent;
    z-index : 1;
}

.chatbox__support {
    background: #f9f9f9;
    height: 450px;
    width: 400px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* HEADER */
.chatbox__header {
    background: var(--primaryGradient);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: var(--primaryBoxShadow);
    position: relative;
}

.chatbox__image--header {
    margin-right: 10px;
}

.chatbox__heading--header {
    font-size: 1.2rem;
    color: #fc8403;
}

.chatbox__description--header {
    font-size: 0.9rem;
    color: white;
}

/* Messages */
.chatbox__messages {
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 40px;
    font-size: 1rem;
}

.messages__item {
    background: #E0E0E0;
    padding: 8px 12px;
    max-width: 70%;
}

.messages__item--visitor {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.messages__item p {
    margin: 10px 0;
}

.messages__item ol, .messages__item ul {
    padding-left: 20px;
}

.messages__item ol li, .messages__item ul li {
    margin: 10px 0;
}

.messages__item strong {
    font-weight: bold;
}

.messages__item em {
    font-style: italic;
}

.messages__item a {
    color: blue;
    text-decoration: none;
}

.messages__item--operator {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background: var(--primary);
    color: white;
}

.messages__item p {
    margin: 10px 0;
}
.input-wide {
    width: 120px;
    padding: 5px;
    box-sizing: border-box;
}
.download-btn-chatbot {
  color: #f7f2f2;
    background-color: #294d7f ;
    border-radius: 4px;
    white-space: no-wrap;
    font-weight: 600;
    padding: 4px;
    font-size: x-small;
    margin: 10px 0px;
}

.messages__item ol, .messages__item ul {
    padding-left: 20px;
}

.messages__item ol li, .messages__item ul li {
    margin: 10px 0;
}

.messages__item strong {
    font-weight: bold;
}

.messages__item em {
    font-style: italic;
}

.messages__item a {
    color: blue;
    text-decoration: none;
}
/* FOOTER */
.chatbox__footer {
    display: flex;
    gap: 4px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    background: var(--secondaryGradient);
    box-shadow: var(--secondaryBoxShadow);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* margin-top: 20px; */
}

.chatbox__footer input {
    border: none;
    width: 70%;
    /* padding: 10px 10px; */
    border-radius: 30px;
    text-align: center;
}

.chatbox__send--footer {
    color: white;
}

.chatbox__button button,
.chatbox__button button:focus,
.chatbox__button button:visited {
    padding: 10px;
    background: white;
    border: none;
    outline: none;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.footerButtons{
    transition: 0.8 ;
}
.footerButtons:hover{
    cursor : pointer;
    transform : scale(1.1) ;
}

.footerButtons:active{
    transform: scale(0.8);
}

.language-list {
    display: none;
    position: absolute;
    top: -30%; /* Adjust this value to control the distance from the button */
    right: 405px;
    margin: -105px;
    padding: 5px;
    list-style: none;
    max-height: 150px; /* Set a maximum height for the list container */
    overflow-y: auto;
    overflow-x: hidden ;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 0.9rem;
  }

.language-list li {
    padding: 5px;
    cursor: pointer;
    transition : 0.3 ;
  }

.language-list li:hover {
    background-color:  #1692c3;
}
.language-list li:active {
    transform : scale(0.8) ;
}

.OptionButtons {
    margin: 2px;
    display :inline-block ;
    max-width: 70%;
    padding: 4px 4px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    color: #1f2a38;
    border : 2px solid #c1bcbc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 0.7rem;
    transition : 0.9 ;
    font-family: 'Nunito', sans-serif;
}

.OptionButtons:hover {
    color: #f7f2f2; /* Text color on hover */
    background-color: #294d7f ; /* Background color on hover */
    border-color: #E0E0E0;
    /* Border color on hover */
}

.OptionButtons:active{
    transform : scale(0.9) ;
}

#OptionsButton{
    max-width: 70% ;
}

.reloadButton {
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 20px;
    height: 50px;
    cursor: pointer;
    transition : 0.9 ;
}

.reloadButton:active{
    transform : scale(0.8) ;
}


.EMIform{
    margin-top: 10px;
    background-color: #E0E0E0;
    border: 1px solid #000000;
    border-radius: 8px;
    padding: 10px 10px;
    width: 150px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.submitButton{
    margin-top: 10px;
    cursor: pointer;
    margin-left: 34px;
    font-size: 0.7rem ;
    border-radius: 5px;
    padding: 4px 10px ;
    font-family: 'Nunito', sans-serif;
    transition : 0.8 ;
}

.submitButton:hover , .downloadButton:hover, .monthButton:hover , .yearButton:hover{
    color: #f7f2f2;
    background-color: #294d7f ;
}

.submitButton:active , .downloadButton:active{
    transform : scale(0.95) ;
}
.special{
    background-color: #294d7f ;
    color: #f7f2f2 ;
    transform : scale(0.9) ;
}

#loanAmount,#interestRate,#startMonth,#firstName,#lastName,#DOBirth,#PANnum,#emailID,#address,#city,#state,#pincode,#gender,#mobile,#OTP{
    border-radius: 5px;
    /* width: 100px ; */
    /* margin-left: 12px; */
    /* text-align: center ; */
    font-size : 12px ;
    /* height : 25px ; */
}

select{
    border-radius: 5px;
    /* width: 100px ; */
    /* margin-left: 12px; */
    font-size : 12px ;
}

#loanTenure{
    border-radius: 5px;
    width: 55px ;
    margin-left: 12px;
    text-align: center ;
    font-size : 10px ;
    height : 25px ;
}

.yearButton{
    cursor: pointer;
    font-size: 0.6rem ;
    border-radius: 5px;
    padding: 2.5px 5px ;
    font-family: 'Nunito', sans-serif;
}

.monthButton{
    cursor: pointer;
    font-size: 0.6rem ;
    border-radius: 5px;
    padding: 2.5px 4.5px ;
    font-family: 'Nunito', sans-serif;
}

#LA,#IR,#LT,#SD{
    width : 500px ;
    font-size: 0.7rem;
    padding: 10px 10px;
    margin-left: 15px;
    font-family: 'Nunito', sans-serif;
}

#FN,#PN,#LN,#DOB,#EM,#AD,#CT,#ST,#PC,#GD,#MB,#OT{
    width : 500px ;
    font-size: 0.7rem;
    padding: 10px 10px;
    margin-left: 6px;
    font-family: 'Nunito', sans-serif;
}

.resizeButtons{
    max-width: 70% ;
}

.downloadButton{
    margin-top: 4px;
    margin-bottom : 3px ;
    cursor: pointer;
    margin-left: 3px;
    font-size: 0.7rem ;
    border-radius: 5px;
    padding: 4px 10px ;
    font-family: 'Nunito', sans-serif;
    transition : 0.8 ;
    background-color : #caf6a6
}


.newContainer {
    display: grid;
    place-content: center;
    padding: 1rem;
    text-align: center;
    min-height: 100px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
.newContainer::after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1692c3 ;
    filter: blur(10px) brightness(50%);
}
.info {
    margin-bottom: 1rem;
}
.emoji {
    font-size: 1.4rem;
    height: 20px;
    margin-bottom: 0.5rem;
    margin-top : 5px ;
}
.status {
    font-size: 1.6rem;
    color: honeydew;
}
.stars {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}
.star {
    height: 40px;
    width: 40px;
    cursor: pointer;
}
.star svg {
    fill: none;
    width: 100%;
    height: 100%;
    stroke: none;
    fill: gray;
}

.selected svg,
.selected ~ .star svg {
    fill: #ffc107;
}
.star:hover svg,
.star:hover ~ .star svg {
    fill: gold;
}

.feedback {
    margin-top: 1rem;
}
.feedback input {
    width: 100%;
    padding: 0.4rem;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
}

.feedbackSubmit{
    margin-top: 9px;
    cursor: pointer;
    margin-left: 35px;
    margin-right: 35px ;
    font-size: 0.7rem ;
    border-radius: 5px;
    padding: 4px 10px ;
    font-family: 'Nunito', sans-serif;
    transition : 0.8 ;
    background-color: white ;
}

.feedbackSubmit:hover {
    color: #060606;
    background-color: #caf6a6 ;
}

.feedbackSubmit:active {
    transform : scale(0.95) ;
}

.readButton{
    margin-top: 4px;
    margin-bottom : 3px ;
    cursor: pointer;
    margin-left: 3px;
    font-size: 0.7rem ;
    border-radius: 5px;
    padding: 4px 10px ;
    font-family: 'Nunito', sans-serif;
    transition : 0.8 ;
    background-color : lightskyblue ;
}


.readButton:hover{
    color: #f7f2f2;
    background-color: #294d7f ;
}

.readButton:active {
    transform : scale(0.95) ;
}

a {
    /* color: #294d7f; */
    text-decoration: none;
    font-size: 0.9rem;
    /* margin-left: 4px; */
    /* max-width : 80% ; */
}

a:hover{
     text-decoration: underline; 
}


.loanButtons {
    margin: 2px;
    display :inline-block ; 
    max-width: 70%;
    padding: 4px 4px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    color: #1f2a38;
    border : 2px solid #c1bcbc; 
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 1rem;
    transition : 0.9 ; 
    font-family: 'Nunito', sans-serif;
}

.loanButtons:hover {
    color: #f7f2f2; /* Text color on hover */
    background-color: #294d7f ; /* Background color on hover */
    border-color: #E0E0E0; 
    /* Border color on hover */
}

.loanButtons:active{
    transform : scale(0.9) ; 
}

.container {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.option {
    margin: 2px;
    display :inline-block ; 
    max-width: 70%;
    padding: 4px 4px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    color: #1f2a38;
    border : 2px solid #c1bcbc; 
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
}

.nextButton {
    margin-top: 4px;
    margin-bottom : 3px ;
    cursor: pointer;
    margin-left: 3px;
    font-size: 0.8rem ; 
    border-radius: 5px;
    padding: 5px 10px ; 
    font-family: 'Nunito', sans-serif;
    transition : 0.8 ; 
    background-color : #caf6a6;
    margin-right: 200px;
}

.nextButton:disabled {
    background-color: #ccc;
    color: #1f2a38;
}

.collateralContainer{
    max-width: 70%;
}

.collateralOption {
    margin: 2px;
    display :inline-block ; 
    max-width: 70%;
    padding: 4px 4px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    color: #1f2a38;
    border : 2px solid #c1bcbc; 
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
}

.othersFeedback input {
    width: 100%;
    padding: 0.4rem;
    border-radius: 8px;
    font-size: 0.8rem;
    color : #294d7f;
}

@media screen and (max-width: 480px) {
    .chatbox__support {
        height: 450px;
        width: 300px;
    }

    /* Adjust icon sizes for even smaller screens */

    .chatbox__footer{
        justify-content: center;
    }

    .footerButtons{
        transform: scale(0.7) ;
    }

    .footerButtons:active{
        transform: scale(0.5);
    }

    /* Adjust text sizes for even smaller screens */
    .chatbox__heading--header {
        font-size: 0.9rem;
    }

    .language-list {
        top: 10%; /* Adjust this value to control the distance from the button */
        max-height: 130px; /* Set a maximum height for the list container */
        font-size: 0.9rem;
        right: 360px;
        margin: -115px;
    }

    .language-list li {
        transform : scale(0.8) ;
    }

    .language-list li:active {
        transform : scale(0.6) ;
    }

    .chatbox__messages {
        padding-top: 0px;
        padding-bottom: 100px;
        font-size: 0.8rem;
    }

    .reloadButton {
        transform : scale(0.8) ;
        top: 40px;
        right: 15px;
        width: 20px;
        height: 50px;
    }

    .reloadButton:active{
        transform : scale(0.6) ;
    }

    .messages__item {
        margin-top: 8px;
    }

    #userInput {
        transform: scale(0.9);
    }

    .OptionButtons , .loanButtons{
        font-size: 0.5rem;
    }
    
    .OptionButtons:active , .loanButtons:active{
        transform : scale(0.9) ; 
    }

    .option{
        font-size: 0.7rem ; 
    }

    .collateralOption{
        font-size: 0.7rem ;
    }
}

@media screen and (max-height: 480px){
    .chatbox__support {
        height: 350px;
        width: 700px;
    }

    .chatbox--active {
        transform: translateX(-40px);
    }

    .chatbox__header {
        justify-content: left;
    }

    .chatbox {
        position: fixed;
        bottom: 12px;
        right: 12px;
        z-index : 9999 ;
    }

    .chatbox__footer {
        padding: 10px 15px;
    }

    .chatbox__header{
        padding : 10px 15px ;
    }

    .reloadButton{
        height : 20px ;
    }

    .language-list {
        right: 780px;
        margin: -125px;
    }
}

.messages__item--typing {
    will-change: transform;
    width: auto;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 15px 20px;
    display: table;
    margin-right: auto;
    position: relative;
    animation: 2s bulge infinite ease-out;
}

.messages__item--typing::before,
.messages__item--typing::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: -2px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
}
.messages__item--typing::after {
      height: 10px;
      width: 10px;
      left: -10px;
      bottom: -10px;
}
span.messages__dot {
    height: 8px;
    width: 8px;
    float: left;
    margin: 0 1px;
    background-color: #9E9EA1;
    display: block;
    border-radius: 50%;
    opacity: 0.4;
    animation: 1s blink infinite;
}
  
@keyframes blink {
    50% {
        opacity: 1;
    }
}
  
@keyframes bulge {
    50% {
        transform: scale(1.05);
    }
}
body {
  background-color: #ffffff !important;
  /* font-family: "Poppins"; */
}

.s1 {
    color: #0070C0;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 18px;
  }

  .s3 {
    color: #333;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
  }

  .s4 {
    color: #BE8851;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
  }

  .s5 {
    color: #0070C0;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
  }
  .s5-small {
    color: #0070C0;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
  }

  .s6 {
    color: #333;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 18px;
  }

  .s7 {
    color: #333;
    
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 18px;
  }

  .s8 {
    color: #333;
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;
    font-size: 16px;
  }

  .s9 {
    color: #333;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
  }

  .s10 {
    color: #333;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 19px;
    vertical-align: -9px;
  }

  .s11 {
    color: #0070C0;
    
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
  }

  .s12 {
    color: #333;
    
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
    vertical-align: 4px;
  }

  .s13 {
    color: #333;
    
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
    vertical-align: -4px;
  }

  .s14 {
    color: #0070C0;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    vertical-align: 4px;
  }

  .s15 {
    color: #0070C0;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
  }

  .s16 {
    color: #333;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
  }

  .s17 {
    color: #FFF;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
  }

  .s18 {
    color: #0070C0;
    
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
    vertical-align: -4px;
  }

  .s19 {
    color: #0070C0;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
    vertical-align: 4px;
  }

  .s20 {
    color: black;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10px;
  }

  .s21 {
    color: black;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
  }

  .s22 {
    color: #333;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
  }

  /* p {
    color: #0070C0;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
    margin: 0px;
  } */

  h1 {
    color: #999;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
  }

  .s23 {
    color: #999;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
  }

  li {
    display: block;
  }

  #l1 {
    padding-left: 0px;
    counter-reset: c1 3;
  }

  #l1>li>*:first-child:before {
    counter-increment: c1;
    /* content: counter(c1, decimal)". "; */
    color: #333;
    
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
  }

  #l1>li:first-child>*:first-child:before {
    /* counter-increment: c1 0; */
  }

  #l2 {
    padding-left: 0px;
    counter-reset: d1 1;
  }

  #l2>li>*:first-child:before {
    counter-increment: d1;
    content: counter(d1, decimal)" ";
    color: #0070C0;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    vertical-align: -4px;
  }

  #l2>li:first-child>*:first-child:before {
    counter-increment: d1 0;
  }

  table,
  tbody {
    vertical-align: top;
    overflow: visible;
  }

.tick{
    height: 25px;
    width: 25px;
}
.text{
    padding: 0 10px;
}

.credit-account-details-table{
    /* margin: 0 50px;
    border: 1px solid #e4e4e4; */
}
.payment-history{
    /* margin: 0 50px;
    border: 1px solid #e4e4e4; */
}
.CREDIT-history{
    /* margin: 0 50px;
    border: 1px solid #e4e4e4; */
}
.non-credit-enquiry{
  /* margin: 0 50px;
  border: 1px solid #e4e4e4; */
}
.border{
  border: 1px solid #e4e4e4;
}
.no-margin{
  margin-left: unset !important;
  margin-right: unset !important;
}
.no-padding{
  padding-left: unset !important;
  padding-right: unset !important;
}
.ac-wrapper{
  padding: 10px;
}
.div-layout{
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.div-layout1{
  display: flex;
  justify-content: space-around;
  padding: 5px 0;
}
.border-bottom{
  border-bottom: 1px solid #e4e4e4;
}
.w-25{
  width: 25%;
}
.sub-head-background{
  background-color: #fafafa;
}
.margin-top-bot{
  margin-top: 10px;
  margin-bottom: 10px;
}
.legend-wrapper{
  padding: 10px 0;
}
.credit-account-table{
  margin: 0 50px;
}
.bg-neutral-50{
  background-color: rgb(250 250 250) !important;
}



button .show_when_enabled {
  display: initial;
}
button .show_when_disabled {
  display: none;
}
button[disabled] .show_when_enabled {
  display: none;
}
button[disabled] .show_when_disabled {
  display: initial;
}
button[disabled] {
  background-color: #DCDCDC;
}
.scroll-container-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.scroll-container {
    display: flex;
    overflow-x: scroll; /* Enable scrolling */
    width: 100%;
    gap: 0px; /* Add some spacing between boxes */
    position: relative;

    /* Hide scrollbar for WebKit browsers */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* For Firefox */
}

.scroll-container::-webkit-scrollbar {
    display: none; /* For WebKit browsers */
}

/* Ensure the scroll-snapping for a smoother experience */
.scroll-container {
    scroll-snap-type: x mandatory;
}

.box {
    flex: 0 0 auto;
    width: 80px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 500;
    color: White;
    z-index: 8;
    text-align: center;
    border-left: 1px solid white; /* Add this line for borders */
    border-right: 1px solid white; /* Add this line for borders */
    scroll-snap-align: center;
}

.box.active {
    width: 100px;
    height: 100px;
    font-size: 1.5rem;
    border: 2px solid black;
}

.gradient-bar {
    position: absolute;
    top: 16px;
    left: 0;
    height: 75%;
    background: linear-gradient(to right, red, yellow, green);
    z-index: 5;
    pointer-events: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 /* @import 'theme'; */