body {
  font-size: 12px;
  color: #262626;
}

img {
  max-width: 100%;
}

select,
select:active,
select:focus,
select:focus-visible {
  outline: none;
  box-shadow: none !important;
}

input::-webkit-input-placeholder,
input:-ms-input-placeholder,
input::placeholder {
  opacity: 0.5;
  color: #F5F5F5;
}


a,
.btn {
  text-decoration: none;
  color: inherit;
}

.btn:hover {
  border-color: inherit;
}

a:hover,
a:focus,
a:active {
  color: inherit;
}

.bg-grey {
  background-color: #F5F5F5;
}

.bg-blue-light {
  background-color: #ECF1FD;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-blue {
  background-color: #0139B0;
  color: #FFFFFF;
}

.bg-blush {
  background-color: #FFEDE9;
}

.bg-red {
  background-color: #FA4119;
}

.bg-red-light {
  background-color: rgba(255, 46, 0, 0.2);
}

.bg-green {
  background-color: #219653;
}

.bg-green-light {
  background-color: rgba(33, 150, 83, 0.2);
}

.text-bg-light-success {
  background-color: #E7FFF1;
  color: #37A064;
  border-radius: 5px;
}

.text-bg-light-danger {
  background-color: #FFEAE6;
  color: #FF2E00;
  border-radius: 5px;
}

.bg-gradient {
  color: #FFFFFF;
  background: linear-gradient(90deg, #0038AF 0%, #007EF4 100%) !important;
}

.text-blue {
  color: #0139B0;
}

.text-black {
  color: #262626;
}

.text-red {
  color: #FA4119;
}

.text-green {
  color: #219653;
}

td,
.text-grey {
  color: #757575;
}

.text-charcoal {
  color: #A0AEC0;
}

.text-inherit {
  color: inherit;
}

.border-blue {
  border-color: #0139B0 !important;
}

.border-blue-light {
  border-color: rgba(1, 57, 176, 0.3) !important;
}

.border-black {
  border-color: #262626 !important;
}

.border-white {
  border-color: #FFFFFF !important;
}

.border-grey {
  border-color: #757575 !important;
}

.border-charcoal {
  border-color: #C5C5C5 !important;
}

.border-red {
  border-color: #FA4119 !important;
}

.border-green {
  border-color: #219653 !important;
}

/** Button Styles **/
.btn {
  transition: all 0.5s ease;
}

.btn.bg-white.text-blue:hover {
  background-color: #0139B0 !important;
  color: #FFFFFF !important;
}

.btn.bg-white.text-blue:hover svg {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(43deg) brightness(1000%) contrast(100%);
}

.btn.bg-blue.text-white:hover {
  background-color: #FFFFFF !important;
  color: #0139B0 !important;
}

.btn.bg-red.text-white:hover {
  background-color: #FFFFFF !important;
  color: #FA4119 !important;
}

.btn.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  min-width: 4.5rem;
}

.dropdown-item,
.btn.show {
  color: inherit;
}

/** Form Fields **/
.was-validated .form-control:invalid~.icon-password {
  border-color: var(--bs-danger);
}

.was-validated .form-control:valid~.icon-password {
  border-color: var(--bs-success);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-control:invalid~.icon-password {
  background-color: rgba(220, 53, 69, 0.1);
  background-image: none;
}

.form-control:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  box-shadow: none;
}

.form-control:focus {
  border-color: #dee2e6;
}

.input-group:not(.has-validation)>.icon-password:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-radius: 0.375rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.icon-password {
  cursor: pointer;
  padding-right: calc(1.5em);
  border-radius: 0.375rem;
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' opacity='0.4' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important;
}

.hide .icon-password {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' opacity='0.4' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E") !important;
}

.form-check {
  min-height: auto;
}



/** Header CSS **/
header{ color: #FFFFFF; background: linear-gradient(90deg, #0038AF 1.42%, #007EF4 100%); }

header a, header .nav-link,
header a:hover, header .nav-link:hover,
header a:focus, header .nav-link:focus{ color: inherit; }


 /** Footer CSS **/
 .stanbic-gradient{ background: linear-gradient(270deg, #213F98 0%, #1F4D9F 28.86%, #1073B9 65.24%, #189DD8 100%); }

/** Nav CSS **/
aside .nav-link{ color: #757575; border-left: #FFFFFF solid 5px; font-size: 14px;}
aside .nav-link:hover,
aside .navbar-nav .nav-link.active{ background-color: #E3F2FD; color: #0139B0; border-color: #0139B0; font-weight: 500; }

.svg-blue,
aside .navbar-nav .nav-link:hover svg,
aside .navbar-nav .nav-link.active svg,
.tab-underline .nav-link.active svg{ 
    filter: invert(23%) sepia(86%) saturate(2217%) hue-rotate(212deg) brightness(74%) contrast(117%)
}

header a,
header .nav-link,
header a:hover,
header .nav-link:hover,
header a:focus,
header .nav-link:focus {
  color: inherit;
}


/** Footer CSS **/
.stanbic-gradient {
  background: linear-gradient(270deg, #213F98 0%, #1F4D9F 28.86%, #1073B9 65.24%, #189DD8 100%);
}

/** Nav CSS **/
aside .nav-link {
  color: #757575;
  border-left: #FFFFFF solid 5px;
  font-size: 14px;
}

aside .nav-link:hover,
aside .navbar-nav .nav-link.active {
  background-color: #E3F2FD;
  color: #0139B0;
  border-color: #0139B0;
  font-weight: 500;
}

aside .navbar-nav .nav-link:hover svg,
aside .navbar-nav .nav-link.active svg {
  filter: invert(23%) sepia(86%) saturate(2217%) hue-rotate(212deg) brightness(74%) contrast(117%)
}

.bd-navbar .navbar-toggler {
  color: #FFFFFF;
  border: 0;
}


/** Main **/
main {
  min-height: 90vh;
}

.modal-backdrop {
  z-index: 1;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.modal-thin .modal-dialog{ max-width: 400px;}

/** Banner **/
.carousel-item .screen{ 
    background-color: rgba(255, 255, 255, 0.15); 
    filter: blur(8px);
    -webkit-filter: blur(1px);
}

#contact-form,
#contact-response {
  animation: fade 0.5s ease-in-out;
}

#canvas-single .offcanvas {
  width: 80%;
}

#canvas-single .offcanvas.wide {
  width: 95.9%;
}

.delete-popover {
  --bs-popover-body-color: #FF2E00;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
  cursor: pointer;
}


.modal-wide .modal-dialog {
  max-width: 500px;
}

#modal-notification .modal-dialog, #modal-notification-reject .modal-dialog {
  max-width: 400px;
}

#createCreditNoteModal .modal-dialog {
  max-width: 894px;
}

/** Banner **/
.carousel-item .screen {
  background-color: rgba(255, 255, 255, 0.15);
  filter: blur(8px);
  -webkit-filter: blur(1px);
}

.carousel-item img {
  top: -2px;
  right: -3px;
}

.carousel-indicators {
  justify-content: left;
}

.carousel-indicators [data-bs-target].active {
  width: 40px;
  border-radius: 15px;
}

.carousel-indicators [data-bs-target] {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transition: width 0.5s, border-radius 0.5s;
}

.fw-400 {
  font-family: 'BentonSansLight';
  font-weight: 400;
}

.round-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  left: 1176px;
  top: 68px;
  background: #FFFFFF;
  /* shadow 1 */
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}


/** Shapes **/
.arrow-up {
  width: 12px;
  height: 10px;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-bottom: 9px solid black;
  margin-bottom: 2px;
}

.arrow-down {
  width: 12px;
  height: 10px;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 9px solid black;
  margin-top: 2px;
}

/** Tabs **/
.tab-underline .nav-link.active{ color: #0139B0; border-bottom:solid 2px #0139B0; }
  
/** Arrows **/
.wrapper-arrow {
  margin-top: -2px;
}

.arrow {
  border-style: solid;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.text-bg-info {
  color: #0139B0 !important;
  background-color: #E3F2FD !important;
}

#canvas-single .offcanvas.narrow {
  width: 37% !important;
}

.fs-7 {
  font-size: 0.9rem!important;
}

.fs-8 {
  font-size: 0.8rem!important;
}

.fs-9 {
  font-size: 0.7rem!important;
}

.footer-cr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.footer-cr>* {
  margin: calc(0.5rem * .5);
}

.tagify{    
  width: 100%;
  max-width: 700px;
}

.hide_load{
    display:none;
}

.show_load {
    display: block;
}



/* OTP Authentoication Code inputs */
.inputs .form-control:focus {
    box-shadow: none;
    border: 2px solid #0139B0;
}

.inputs input {
    width: 40px;
    height: 40px
}

    .inputs input[type=number]::-webkit-inner-spin-button,
    .inputs input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0
    }

/* Animation Check Icon Animation */
.animation-ctn {
    text-align: center;
}

@-webkit-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@-ms-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 0px
    }
}

@-webkit-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px
    }

    100% {
        stroke-dashoffset: 960px;
    }
}

@-ms-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 240px
    }

    100% {
        stroke-dashoffset: 480px
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px
    }

    100% {
        stroke-dashoffset: 960px
    }
}

@keyframes colored-circle {
    0% {
        opacity: 0
    }

    100% {
        opacity: 100
    }
}

/* other styles */
/* .svg svg {
    display: none
}
 */
.inlinesvg .svg svg {
    display: inline
}

/* .svg img {
    display: none
} */

.icon--order-success svg polyline {
    -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
    animation: checkmark 0.25s ease-in-out 0.7s backwards
}

.icon--order-success svg circle {
    -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
    animation: checkmark-circle 0.6s ease-in-out backwards;
}

    .icon--order-success svg circle#colored {
        -webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
        animation: colored-circle 0.6s ease-in-out 0.7s backwards;
    }



/*buyer dashboard*/
ul li div .text-green, ul li div .text-red {
    margin: auto;
}

.crumbs p {
    margin: 0 !important;
}

.crumbs-bar .stat-1, .crumbs-bar .stat-2 {
    border-right: 0.01rem solid #dbdbdb;
    padding-right: 4em;
}

.crumbs-bar .stat-2, .crumbs-bar .stat {
    padding-left: 4em;
}

.crumbs-bar .ms-auto button span .question {
    border-radius: 50%;
    border: 0.01rem solid grey;
    padding: .4em;
}

.crumbs-bar .ms-auto button span span {
    padding-left: .6em;
}

.crumbs-bar {
    border-top: 0.01rem solid #dbdbdb;
}


tbody tr td .status-repaid {
    padding: 4px;
    background: #d7d6d6;
    color: grey;
    border-radius: 0.19rem;
}

/* Modal styles */
.loan-application-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
    display: none;
}

.loan-application-modal-container:target {
    display: block;
}

.loan-application-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1100px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 2;
    display: none;
    border-radius: 0.2rem;
}


/* Stepper styles */
.stepper {
    display: flex;
    justify-content: space-between;
    max-width: 62%;
    /*margin: 0 0 0 10px;*/
    padding: 0;
}

.step {
    flex: 1;
    text-align: left;
    cursor: pointer;
    padding: 0 0 0 6px;
}


    .step.active .step-title {
        color: #003aaf;
        font-weight: bolder;
    }

    .step.active {
        border-bottom: 2px solid #003aaf;
    }

        .step .step-title, .step.active .step-title {
            font-size: 14px;
            height: 100%;
        }


    .step .mr-auto {
        color: #007bff;
        padding: 20px 20px 18px 0;
    }


.stepper-container {
    border-bottom: 0.07rem solid #dbdbdb;
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);*/
}


/* Step content styles */
.loan-application-modal-dialog {
    --bs-modal-width: 1311px;
}

.loan-application-modal-header {
    display: block !important;
    padding: 1rem 1rem 0 1rem;
}

.loan-application-modal-content .step-content {
    display: none;
}

    .loan-application-modal-content .step-content.active {
        display: block;
        width: 100%;
        padding: 5px;
    }

/* Material table styles */
.material-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

    .material-table th,
    .material-table td {
        padding: 15px;
        border-bottom: 1px solid red;
    }

    .material-table tbody tr {
        padding: 15px;
    }

/* Card styles */
.card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #e2ecf6;
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Bottom section styles */
.step1-bottom,
.step2-bottom,
.step3-bottom {
    display: flex;
    justify-content: space-between;
}

    .step1-bottom p,
    .step2-bottom p,
    .step3-bottom p {
        margin: 0;
    }

        .step1-bottom p:last-child,
        .step2-bottom p:last-child,
        .step3-bottom p:last-child {
            font-weight: bold;
        }

/* Checkbox styles */
input[type="checkbox"] {
    margin-right: 5px;
}



/* Loan application material table styles */
.loan-application-table {
    width: 100%;
    border-collapse: collapse;
}

.loan-application-th,
.loan-application-td {
    padding: 12px 16px;
    border: 1px solid #ccc;
}

.loan-application-th {
    background-color: #f2f2f2;
}

.row .loan-application-table tbody, .row .loan-application-table tr {
    padding: 7px !important;
}

.row .loan-application-table thead tr {
    padding: 7px !important;
}

.loan-application-tbody tr:hover {
    cursor: pointer;
    background-color: #f9f9f9;
}

.loan-application-tbody .selected {
    background-color: #e1f5fe;
}

/* Status styles */
.loan-application-status {
    padding: 5px 10px;
    background-color: #4caf50;
    color: #fff;
    border-radius: 4px;
}

/* Select all column styles */
.loan-application-select-all {
    width: 48px;
    text-align: center;
}

/* Select row column styles */
.loan-application-select-row {
    width: 48px;
    text-align: center;
}

/* Checkbox styles */
.loan-application-checkbox {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

    .loan-application-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.loan-application-checkmark {
    position: absolute;
    top: -4px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #919090;
    border-radius: .2rem;
    opacity: 70%;
}

.loan-application-checkbox:hover .loan-application-checkmark {
    background-color: #f2f2f2;
}

.loan-application-checkbox input:checked ~ .loan-application-checkmark {
    background-color: #007bff;
    border: 1px solid #007bff;
}

.loan-application-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.loan-application-checkbox input:checked ~ .loan-application-checkmark:after {
    display: block;
}

.loan-application-checkbox .loan-application-checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


.loan-modal-footer {
    background: #f9fcfe;
    margin-bottom: 9px;
    border-radius: .1rem;
}

    .loan-modal-footer .col .w-50 {
        line-height: 0;
    }


.generated-eslip-card {
    border: 0.01rem solid rgba(128, 128, 128, 0.58);
    padding: 7px;
    border-radius: 0.2rem;
    margin-bottom: 5rem;
}


    .generated-eslip-card .row .justify-content-end p {
        line-height: 0;
    }

.generated-eslip-card-header {
    background: rgba(238, 245, 255, 0.25);
}

    .generated-eslip-card-header .col .w-50, .stepper-content-review-application .row .col {
        line-height: 0.7;
    }

        .stepper-content-review-application .row .col p:last-of-type {
            text-decoration: black;
        }

.loan-application-checkbox-terms {
    display: inline;
    padding-right: 30px;
}

.cursor-pointer {
    cursor: pointer;
}

.how-it-works-modal-icon {
    padding: 0 10px 0 0;
}

.how-it-works-modal-text {
    line-height: 0.9;
}

    .how-it-works-modal-text small:first-of-type {
        top: 4px;
    }

.loan-detail-bottomsheet-header {
    padding: .5rem;
    background: white;
    border-bottom: .01rem solid rgba(128, 128, 128, 0.22);
}

.loan-item-r {
    padding: .5rem;
}

    .loan-item-r:first-of-type {
        padding-top: 1rem;
    }

.repay-loan-modal-container .row label, .repay-loan-modal-container .row .input-group {
    padding-left: 0;
    padding-right: 0;
}

.repay-loan-modal-container div {
    padding-left: 18px;
    padding-right: 18px;
}


/* Styles for the container of the loading bar */
.loading-bar-container {
    height: 2px; /* Set the height of the loading bar */
    background-color: #f2f2f2; /* Background color of the container */
    border-radius: 4px; /* Rounded corners for the container */
    overflow: hidden; /* Hide any overflow beyond the container's width */
}

/* Styles for the loading bar itself */
.loading-bar {
    height: 100%; /* Set the height to occupy the full height of the container */
    background-color: #007bff; /* Blue color for the loading bar */
    animation: loadingAnimation 2s infinite; /* Animation to control the bar's width */
}

/* Keyframes animation to control the bar's width */
@keyframes loadingAnimation {
    0% {
        width: 0; /* Starting width of the loading bar */
    }

    50% {
        width: 100%; /* Expanded width of the loading bar */
    }

    100% {
        width: 0; /* Back to the starting width of the loading bar */
    }
}

.success-icon-img {
    max-width: 186px;
}

.snackbar {
    background-color: #e7fff1; /* Light Green color */
    color: #6ebe90; /* Text color for the snack bar */
    padding: 15px;
    position: fixed;
    top: 62px;
    right: 036px;
    border-radius: .2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: none;
}

    .snackbar .d-flex .close-snackbar {
        margin-left: 3rem;
    }

.d-flex .text {
    margin-left: 1em;
}