#loanCalc,
#tableResultCalcToExport {
  font-family: Lexend, sans-serif;
  color: #595959;
}

#loanCalc .card {
  /* max-width: 600px; */
  margin: auto;
  border: none;
}

#loanCalc .card-header {
  background: #4e2b0b;
  color: #fff;
}

#loanCalc .form-control {
  box-shadow: unset;
  padding-left: 10px;
}

#loanCalc select {
  font-family: Lexend, sans-serif;
  color: #595959;
  border-color: #59595936;
}

#loanCalc input.form-control {
  padding-left: 14px;
  font-family: Lexend, sans-serif;
  color: #595959;
  border-color: #59595936;
}

#loanCalc h4 {
  font-family: Lexend, sans-serif;
  font-size: 20px;
  margin: 0 0 15px !important;
}

#loanAmountText {
  display: block;
  font-style: italic;
  color: #007bff;
  margin-top: 5px;
}

#loanCalc .input-group-append {
  margin-left: 10px;
}

#loanTerm {
  border-radius: 0.25rem;
}

#submitCalcLoan {
  font-size: 16px;
  font-family: msr-b;
  width: fit-content;
  padding: 6px 35px;
  background: #fff;
  color: var(--color-main-2025);
  border: 1px solid var(--color-main-2025);
  border-radius: 6px;
  transition: all .3s;
  margin: 10px 0;
}

#submitCalcLoan:hover {
  background-color: var(--color-main-2025);
  color: #fff;
}

#result {
  /* max-width: 800px; */
  margin: auto;
}

#result table {
  width: 100%;
  border-collapse: collapse;
}

#result table tr {
  border-color: #d9d9d9;
}

#result th,
#result td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
  color: #595959 !important;
  text-align: left;
}

#result th {
  background-color: #d9b89a;
  color: #262626 !important;
  font-weight: unset;
  font-family: msr-b;
}

#loanCalc label {
  font-family: 'Lexend', sans-serif;
  color: #595959
}

#loanCalc .chart-result-calc {
  margin: 0 auto 20px auto;
  height: 100%;
}

#loanCalc .table-result-calc {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
  min-height: 250px;
}

#loanCalc .legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
  margin: 20px auto;
  padding: 0 15px;
  font-size: 12px;
}

#loanCalc .legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

#loanCalc .legend-color {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
}

#loanCalc .legend-text {
  margin-right: 10px;
  width: 110px;
}

#loanCalc .legend-value {
  margin-right: 10px;
  width: 80px;
}

#loanChart {
  max-width: 80%;
  margin: 0px auto;
}

#loanCalc .display-chart-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: inherit;
}

.exportTableToExcel {
  color: green;
  border: 1px solid;
  font-size: 14px;
  padding: 5px 10px;
}

.exportTableToExcel:hover {
  background-color: green;
  color: #fff;
}

.titleCalcConvenient {
  font-family: msr-b;
  font-size: 24px;
  color: rgb(11, 99, 172);
  margin-bottom: 15px;
}

.display-chart-result button {
  /* position: absolute; */
  bottom: 10px;
  right: 10px;
  padding: 6px 15px;
  background: #fff;
  color: var(--color-main-2025);
  border: 1px solid var(--color-main-2025);
  border-radius: 6px;
  transition: all .3s;
  margin: 10px 15px 0 auto;
}

.display-chart-result button:hover {
  background: var(--color-main-2025);
  color: #fff;
  transition: all .3s;
}

div#tableResultCalcToExport {
  width: 100%;
  max-width: 1220px;
}

@media (max-width:768px) {
  .form-group.col-md-7.pr-0 {
    padding-right: 15px !important;
  }
}

@media (max-width:576px) {
  #result {
    overflow-x: auto;
  }

  #result table {
    background: #fff !important;
    min-width: 576px;
  }

  #loanCalc .display-chart-result {
    padding-bottom: 50px !important;
  }
}