.loan-frm{box-sizing: border-box;}
.loan-frm-row{display: grid; grid-template-columns: 1fr 1fr; width: 100%; align-items: start; gap: 20px; margin-bottom: 30px;}
#loan-info-table{}
#loan-info-table ul{list-style: none; margin: 0; padding: 0; display: grid; column-gap: 20px; grid-template-columns: 1fr 1fr; grid-template-rows: min-content min-content min-content min-content;}
#loan-info-table li>div{display: grid; grid-template-columns: auto min-content;}
#loan-info-table li{border-bottom: 1px solid #DEDEDE; padding: 10px 0;}
#loan-info-table li span:last-child{white-space: nowrap;}
@media (max-width: 800px) {
    #loan-info-table ul{grid-template-columns: 1fr;}
    .loan-frm-row{grid-template-columns: 1fr;}
}

.loan-frm h2{margin: 50px 0 20px 0;}

.loan-frm .form-control{
    display: inline-block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box;
}

.loan-frm .form-control.invalid{border-color: red;}
.loan-frm  .loan-cb-box.invalid{background: rgba(255,0,0,0.1);}

.loan-frm.loading{opacity: 0.7; pointer-events: none;}
.loan-frm.loading *{pointer-events: none;}

.loan-frm .loader {
    width: 16px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid white;
    border-right-color: #999;
    animation: l2 1s infinite linear;
    vertical-align: middle;
    display: none;
}
.loan-frm.loading .loader {
    display: inline-block;
}
@keyframes l2 {to{transform: rotate(1turn)}}

#loan-submit-btn{
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    background-color: #F99334;
    color: white;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
}

.slider-container
{
    margin: auto auto;
    position: relative;
    height: 50px;
}

.track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 8px;
    background: #d3d3d3;
    border-radius: 4px;
}

.fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    background: #F99334;
    border-radius: 4px 0 0 4px;
    width: 50%;
}

.thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    background: #F99334;
    border: 4px solid white;
    border-radius: 50%;
    cursor: pointer;
}

.bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #F99334;
    color: white;
    padding: 4px 10px;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.bubble::after {
    content: "";
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #F99334 transparent transparent;
}