.loan-calculator-maincon {
    display: flex;
    background-color: #f6f9f9;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0px 0px 26px rgba(17, 17, 17, 0.15);
    align-items: center;
}
.calc-form-con {
    flex-basis: 59.28%;
    padding: 27px 27px 37px 27px;
}
.calc-result-con {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-basis: 40.73%;
    padding: 27px;
    border-radius: 0px 12px 12px 0px;
    background-color: #e2f5ef;
    min-height: 391px;
    box-shadow: -5px 0px 20px rgb(17 17 17 / 15%);
}
.calc-form-con form {
    flex-wrap: wrap; }
.calc-form-con form,
.calcform-fields-sec {
    display: flex;
    width: 100%;
    align-items: flex-end;
}
.calcform-fields-sec {
    gap: 0px 16px;
}
.calc-form-field {
    flex: 1;
    margin-bottom: 24px;
    position: relative;
}
.calc-form-con label {
    color: #011013;
    font-size: 12px;
    line-height: 18px;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    margin-bottom: 11px;
}

/* Select Style */
.select-field-exp {
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
}
.select-field-exp:before {
    content: "\f078";
    font-family: 'FontAwesome';
    position: absolute;
    right: 15px;
    top: 9px;
    font-size: 16px;
    color: #434343;
}
.select-field-exp select {
    border: 1px solid #DDDDDD;
    border-radius: 12px;
    height: 48px;
    width: 100%;
    font-size: 16px;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    padding: 3px 15px;
    background-color: transparent;
    color: #011013;
    font-weight: normal;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    z-index: 1;
}
span.field-currency-sign {
    position: absolute;
    left: 16px;
    bottom: 12px;
    color: #C8C8C8;
    font-size: 16px;
    line-height: 1.5;
}
.calcform-fields-sec input[type="text"],
.calcform-fields-sec input[type="number"] {
    border: 1px solid #DDDDDD;
    border-radius: 12px;
    height: 48px;
    width: 100%;
    font-size: 16px;
    color: #011013;
    padding-left: 35px;
}
.calcform-fields-sec input:focus {
    border-color: #ddd !important;
    outline: none;
}
.calcform-fields-sec ::placeholder {
  color: #011013;
  opacity: 1;
}
.calcform-fields-sec :-ms-input-placeholder {
  color: #011013; }
.calcform-fields-sec ::-ms-input-placeholder {
  color: #011013; }
.calc-result-inner {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}
.calc-result-inner small {
    width: 100%;
    font-family: 'Sansation';
}
.calc-result-inner small.top-reslt-line {
    font-size: 16px;
    line-height: 24px;
    color: #011013;
}
.calc-result-inner small.reslt-main {
    font-size: 32px;
    line-height: 43px;
    color: #20C58A;
    font-weight: bold;
}
.calc-result-inner a.loan-calc-btn {
    display: inline-flex;
    background-color: #ff9340;
    color: #fff !important;
    font-weight: bold;
    padding: 15px 26px 16px 26px;
    font-size: 16px;
    line-height: 28px;
    margin-top: 3px;
}
.calcform-botom-btn {
    display: flex;
    width: 100%;
    justify-content: center;
}
.calcform-botom-btn a {
    font-family: "Noto Sans JP";
    font-weight: normal;
    text-decoration: underline;
    font-size: 14px;
    line-height: 24px;
    color: #20c58a;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}
span.calc-bbtns-seprator {
    width: 1px;
    height: 14px;
    background-color: #000;
    margin: 6px 14px 0px 14px;
}
.field-con-withpercentge span.percntage-sign {
    position: absolute;
    right: 16px;
    top: 10px;
    font-size: 16px;
    line-height: 28px;
    color: #c8c8c8;
}
.field-con-withpercentge {
    position: relative;
    flex: 1;
}
.calc-form-field.calc-twofields-con {
    display: flex;
    align-items: flex-end;
}
.first-field-con {
    flex: 1.8; }
.secnd-field-con input[type="text"],
.secnd-field-con input[type="number"] {
    border-radius: 0px 12px 12px 0px;
    padding-left: 15px;
}
.first-field-con input[type="text"],
.first-field-con input[type="number"] {
    border-radius: 12px 0px 0px 12px; }
.calc-form-field input::-webkit-outer-spin-button,
.calc-form-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.calc-form-field input[type=number] {
  -moz-appearance: textfield; }
.calc-date-field span.fa {
    position: absolute;
    right: 15px;
    bottom: 16px;
    font-size: 16px;
    color: #434343;
    line-height: 1;
}
span.field-end-text {
    position: absolute;
    right: 15px;
    bottom: 12px;
    font-family: "Noto Sans JP";
    font-size: 16px;
    line-height: 28px;
    color: #c8c8c8;
}
.mortgage-loan-calculator .calc-result-con {
    align-items: flex-start;
    padding: 34px 50px 40px 50px;
    min-height: 322px;
}
.calc-result-line {
    display: flex;
    width: 100%;
    margin-bottom: 13px;
}
.calc-result-line .itm-label {
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    color: #011013;
}
.calc-result-line .itm-result {
    margin-left: auto;
    font-family: "Noto Sans JP";
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    color: #20c58a;
}
.calc-main-resultcon {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0px 8px 0px;
}
.calc-main-resultcon .result-label {
    font-family: 'Sansation';
    width: 100%;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #011013;
    margin-bottom: 5px;
}
.calc-main-resultcon .result-amount {
    font-family: 'Sansation';
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    line-height: 43px;
    color: #20c58a;
}
.calc-result-con span.calc-msg {
    font-weight: 400;
    margin-top: 10px;
    display: flex;
    width: 100%;
    justify-content: center;
}
.calc-loader {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 2px 0px 2px 0px;
}
.calc-results-bottom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.calc-results-bottom .calc-result-line {
    margin-bottom: 6px; }
.calc-twofieldsp-holdr > div {
    flex: 1;
}
.calc-twofieldsp-holdr {
    display: flex;
    gap: 0px 16px;
    align-items: flex-end;
}
.calc-twofieldsp-con input[type="text"],
.calc-date-field input[type="text"] {
    border-radius: 12px;
}
.mortgage-extrapay-calc .calc-result-con {
    min-height: 266px;
    padding: 14px 50px 18px 50px;
}
.paid-soonr-paycon {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 27px;
}
.paid-soonr-paycon .aomunt-paycon {
    width: 100%;
    font-family: 'Sansation';
    font-weight: bold;
    font-size: 32px;
    color: #20c58a;
    margin-bottom: 3px;
}
.paid-soonr-paycon .label-paycon {
    font-family: 'Sansation';
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: #011013;
}
.paymnt-result-sec {
    display: flex;
    width: 100%;
}
.paymnt-result-sec .aomunt-result {
    margin-left: auto;
    font-family: "Noto Sans JP";
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    color: #20c58a;
}
.paymnt-result-sec .aomunt-text {
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    color: #011013;
}
.mortgage-extrapay-calc .calc-form-con {
    padding-bottom: 13px; }
.calc-chart-datecon {
    margin-top: 24px;
    align-items: center;
}
.calc-chart-datecon .calc-date-field {
    min-width: 148px;
    position: relative;
    max-width: 148px;
}
.calc-chart-datecon input[type="text"] {
    padding-left: 15px; }
.calc-chart-datecon .estimated-date-con {
    justify-content: flex-end;
    display: flex;
    flex-wrap: wrap;
}
.calc-chart-datecon span.estimtd-date-text {
    width: 100%;
    text-align: right;
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    color: #011013;
}
.calc-chart-datecon .estimtd-date {
    font-family: "Sansation";
    font-weight: bold;
    font-size: 40px;
    color: #20c58a;
    line-height: 53px;
}
.calc-chart-datecon .calc-form-field {
    margin-bottom: 0px; }
.calctable-showhide-con {
    display: flex;
    justify-content: center;
    margin: 28px 0px;
}
.calctable-showhide-con a {
    font-family: "Noto Sans JP";
    font-weight: bold;
    text-decoration: underline;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #20c58a;
}
/* Table Amortization */
.calc-amortization-section,
.calc-table-year,
.calc-table-monthslist {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
}
.student-chartable-main .calc-amortization-section {
    width: 756px;
    margin: 0 auto;
}
.mortgage-chartable-main .calc-amortization-section {
    width: 650px;
    margin: 0 auto;
}
.personal-chartable-main .calc-amortization-section {
    width: 630px;
    margin: 0 auto;
}
.calc-table-mainhead {
    width: 100%;
    background-color: #20C58A;
    border-radius: 8px 8px 0px 0px;
}
.calc-amortization-section li {
    list-style: none;
    margin: 0px;
}
.calc-table-mainhead ul,
.calc-table-year ul,
.calc-table-monthslist ul {
    margin: 0px;
    display: flex;
    width: 100%;
    align-items: center;
}
.calc-table-mainhead ul li {
    flex: 1;
    font-family: "Sansation";
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    padding: 15px;
}
.calc-table-year ul {
    cursor: pointer; }
.calc-table-year ul li {
    flex: 1;
    background-color: #003945;
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    padding: 15px;
    border-left: 1px solid rgba(0,0,0,0.10);
    margin-bottom: 2px;
}
.calc-table-monthslist ul li {
    flex: 1;
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #011013;
    padding: 15px;
    border-left: 1px solid rgba(0,0,0,0.10);
}
.calc-table-monthslist ul {
    background-color: #f7f7f7;
}
.calc-table-monthslist ul:nth-child(even) {
    background-color: #c8c8c8;
}
.calc-table-year ul li:first-child,
.calc-table-monthslist ul li:first-child {
    text-align: left;
    box-shadow: 7px 0px 12px 1px rgb(0 0 0 / 12%);
}
.calc-table-monthslist ul li:first-child {
    color: #011013;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
}
.calc-table-year ul li:first-child,
.calc-table-year ul li:first-child a {
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
}
.calc-table-year ul li:first-child i {
    margin-right: 3px; }

@media (max-width: 480px) {
    
    .calc-table-mainhead ul li { background-color: #20C58A; min-height: 78px; align-items: center; display: flex; }
    .calc-table-monthslist ul li { background-color: #f7f7f7; }
    .calc-table-monthslist ul:nth-child(even) li { background-color: #c8c8c8; }

    .calc-amortization-section { overflow-x: scroll; }
    .calc-amortization-section ul li:first-child { position: sticky; left: 0px; flex: 1 0 103px; }
    .calc-amortization-section ul li { flex: 1 0 103px; }
    .student-chartable-main .calc-amortization-section,.personal-chartable-main .calc-amortization-section,.mortgage-chartable-main .calc-amortization-section { width: 100%; }
    .calc-table-mainhead ul li { padding: 15px 18px; }
    .calc-table-mainhead ul li:first-child { border-radius: 8px 0px 0px 0px; }
    .calc-table-mainhead ul li:last-child { border-radius: 0px 8px 0px 0px; }
    .calc-result-con { border-radius: 0px 0px 12px 12px; }
    .student-loan-calculator form .calcform-fields-sec:nth-child(2) { flex-direction: inherit; }
    .student-loan-calculator form .calcform-fields-sec:nth-child(2) input[type=number] { padding-left: 14px; }

}
.personal-loan-calculator .calc-result-con {
    min-height: 392px;
    align-items: center;
    flex-basis: 50%;
}
.personal-loan-calculator .calc-form-con {
    flex-basis: 50%; }
span.field-err-place {
    color: #ec5151;
    font-weight: 400;
    position: absolute;
    left: 0px;
    top: 80px;
    font-size: 12px;
    line-height: 1;
}
.fieldsec-with-error input {
    border-color: #ec5151 !important; }
.field-con-withpercentge span.field-err-place {
    top: 50px; }