/*
Calculator styles
*/
#adsar {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  #adsar {
    flex-wrap: wrap;
    width: auto;
    max-width: auto;
  }
}

#adsar > div {
  flex: 1;
  align-self: flex-start;
}

#adsar #mainform {
  flex-basis: 40%;
  padding: 16px;
}

@media (max-width: 767px) {
  #adsar #mainform {
    flex-basis: 100%;
  }
}

#adsar .results {
  flex-basis: 60%;
  background-color: #f0f2fe;
  border-radius: 8px;
  padding: 16px;
}

@media (max-width: 767px) {
  #adsar .results {
    flex-basis: 100%;
    border-radius: 0;
  }
}

#adsar h1,
#adsar .h1 {
  color: var(--article-headings-color);
  font-family: var(--heading-font-family);
  font-size: 20px;
  font-weight: bold;
  line-height: 24px;
  margin-bottom: 8px;
  margin-top: 0;
}

#adsar h2 {
  color: var(--article-headings-color);
  font-family: var(--heading-font-family);
  font-size: 18px;
  line-height: 26px;
  margin-top: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

#adsar h3 {
  color: var(--article-headings-color);
  font-family: var(--heading-font-family);
  font-size: 18px;
  line-height: 26px;
  margin-top: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

#adsar .text-center {
  text-align: center;
}

#adsar .sliderlabelleft,
#adsar .sliderlabelright {
  font-weight: bold;
  margin-bottom: 3px;
  color: #3d403d;
  display: none;
}

#adsar .sliderlabelleft {
  float: left;
  text-align: left;
}

#adsar .sliderlabelright {
  float: right;
  text-align: right;
}

#adsar .calculatetop {
  margin-top: 25px;
}

#adsar .btn.link {
  display: inline-flex;
  align-items: center;
  margin: 24px auto 0;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--cta-primary-background);
  border-color: var(--cta-primary-background);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 24px 82px 24px 16px;
  border-radius: 16px;
  position: relative;
  width: 100%;
}

#adsar .btn.link:after {
  display: block;
  content: '';
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background-color: var(--lilac-200);
  top: calc(50% - 21px);
  right: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='23.999999999999996' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath id='svg_1' fill='%23291D4C' d='m11.2929,4.29289c0.3905,-0.39052 1.0237,-0.39052 1.4142,0l7,7.00001c0.3905,0.3905 0.3905,1.0237 0,1.4142l-7,7c-0.3905,0.3905 -1.0237,0.3905 -1.4142,0c-0.3905,-0.3905 -0.3905,-1.0237 0,-1.4142l5.2929,-5.2929l-11.5858,0c-0.55228,0 -1,-0.4477 -1,-1c0,-0.5523 0.44772,-1 1,-1l11.5858,0l-5.2929,-5.29289c-0.3905,-0.39053 -0.3905,-1.02369 0,-1.41422z' clip-rule='evenodd' fill-rule='evenodd'/%3E%3Cpath id='svg_2' fill='%23291D4C' d='m47.52241,4.62076c0.3905,-0.39052 1.0237,-0.39052 1.4142,0l7,7.00001c0.3905,0.3905 0.3905,1.0237 0,1.4142l-7,7c-0.3905,0.3905 -1.0237,0.3905 -1.4142,0c-0.3905,-0.3905 -0.3905,-1.0237 0,-1.4142l5.2929,-5.2929l-11.5858,0c-0.55228,0 -1,-0.4477 -1,-1c0,-0.5523 0.44772,-1 1,-1l11.5858,0l-5.2929,-5.29289c-0.3905,-0.39053 -0.3905,-1.02369 0,-1.41422z' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 60px 24px;
  background-position: calc(100% - 10px) 9px;
  transition: background-position 300ms linear;
  position: absolute;
}

#adsar .btn.link:hover:after {
  background-position: calc(100% + 27px) 9px;
}

#adsar .btn.link:hover {
  background-color: var(--purple-500);
  border-color: var(--purple-500);
  outline: 2px solid var(--purple-500);
}

#adsar .btn.link:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  outline: 2px solid #ffffff;
  box-shadow: 0 0 0 4px #2b173f;
}

#adsar p.assume {
  margin-bottom: 0;
  font-size: 14px;
  text-align: left;
  display: none;
}

#adsar .p {
  margin-bottom: 1em;
}

#adsar .resultslinkblock {
  padding-top: 35px;
}

#adsar .error,
#adsar .form_error {
  margin-top: 20px;
}

#adsar .heading {
  margin-top: 32px;
  display: block;
  color: var(--article-headings-color);
  font-family: var(--heading-font-family);
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  margin-bottom: 8px;
}
#adsar .heading-top {
  margin-top: 0;
}

#adsar .row.form-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}

@media (max-width: 767px) {
  #adsar .row.form-group {
    width: 100%;
  }
}

#adsar .row.form-group > div {
  flex: 1;
}

#adsar .row.form-group > div:first-child {
  margin-right: 10px;
}

@media (max-width: 767px) {
  #adsar .row.form-group > div {
    flex-basis: 100%;
    margin-right: 0;
  }

  #adsar .results .row.form-group > div {
    max-width: 100%;
  }
}

#adsar .results .row.form-group {
  display: block;
}

#adsar .info {
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.25C7.02944 3.25 3 7.27944 3 12.25C3 17.2206 7.02944 21.25 12 21.25C16.9706 21.25 21 17.2206 21 12.25C21 7.27944 16.9706 3.25 12 3.25ZM1 12.25C1 6.17487 5.92487 1.25 12 1.25C18.0751 1.25 23 6.17487 23 12.25C23 18.3251 18.0751 23.25 12 23.25C5.92487 23.25 1 18.3251 1 12.25ZM11 8.25C11 7.69772 11.4477 7.25 12 7.25H12.01C12.5623 7.25 13.01 7.69772 13.01 8.25C13.01 8.80228 12.5623 9.25 12.01 9.25H12C11.4477 9.25 11 8.80228 11 8.25ZM12 11.25C12.5523 11.25 13 11.6977 13 12.25V16.25C13 16.8023 12.5523 17.25 12 17.25C11.4477 17.25 11 16.8023 11 16.25V12.25C11 11.6977 11.4477 11.25 12 11.25Z' fill='%235B5EBF'/%3E%3C/svg%3E%0A");
  background-size: cover;
  display: inline-block;
  margin-left: 6px;
  cursor: pointer;
  margin-bottom: -2px;
}

#adsar .info:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.25C7.02944 3.25 3 7.27944 3 12.25C3 17.2206 7.02944 21.25 12 21.25C16.9706 21.25 21 17.2206 21 12.25C21 7.27944 16.9706 3.25 12 3.25ZM1 12.25C1 6.17487 5.92487 1.25 12 1.25C18.0751 1.25 23 6.17487 23 12.25C23 18.3251 18.0751 23.25 12 23.25C5.92487 23.25 1 18.3251 1 12.25ZM11 8.25C11 7.69772 11.4477 7.25 12 7.25H12.01C12.5623 7.25 13.01 7.69772 13.01 8.25C13.01 8.80228 12.5623 9.25 12.01 9.25H12C11.4477 9.25 11 8.80228 11 8.25ZM12 11.25C12.5523 11.25 13 11.6977 13 12.25V16.25C13 16.8023 12.5523 17.25 12 17.25C11.4477 17.25 11 16.8023 11 16.25V12.25C11 11.6977 11.4477 11.25 12 11.25Z' fill='%23291D4C'/%3E%3C/svg%3E%0A");
}

#adsar a.info:focus {
  background-color: transparent;
  box-shadow: none;
}

#adsar .row.form-group.info-block {
  display: none;
}

#adsar .info-block p {
  text-align: left;
  margin: 0 0 1em;
  font-size: 14px;
  color: #646664;
  font-weight: 300;
  line-height: 1.4;
}

#adsar .row.form-group.error {
  margin-left: auto;
  margin-right: auto;
  display: none;
}

#adsar .form_error {
  position: relative;
  padding: 2px 20px 2px 60px;
  border-left: 5px solid #e21219;
  background-color: #fde8e9;
  margin-bottom: 20px;
}

#adsar .form_error p {
  padding: 8px;
  color: #e21219;
}

#adsar .form_error strong {
  font-weight: bold;
}

#adsar .form_error .icon {
  width: 28px;
  height: 28px;
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 14px;
  fill: none;
  background-color: rgba(255, 255, 255, 0);
  stroke: #e21219;
  color: #ffffff;
}

#adsar .error-control input {
  border-color: var(--color-tint-negative);
  color: var(--color-tint-negative);
  background-color: #fde8e9;
}

#adsar .input-group {
  display: inline-table;
  vertical-align: middle;
  width: 100%;
  position: relative;
}

#adsar .input-group-addon {
  box-sizing: border-box;
  background-color: transparent;
  line-height: 1;
  font-size: 24px;
  padding: 9px 13px;
  transition: all 0.2s linear;
  font-weight: 600;
  position: absolute;
  top: calc(50% - 25px);
  left: 1px;
  z-index: 1;
  border: 0;
  box-shadow: none;
  color: #8e82b1;
}

#adsar .input-group .input-group-addon + input {
  padding-left: 36px;
}

#adsar input + .input-group-addon {
  left: inherit;
  right: 4px;
}

#adsar .input-group input {
  padding: 11px 13px 8px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.5;
  border-radius: 12px;
  box-sizing: border-box;
  background-color: #fff;
  display: block;
  color: #291d4c;
  transition: all 0.2s ease-in-out;
  margin: 0 0 10px;
  border: 1px solid var(--purple-400);
  box-shadow: none;
  outline: none;
  width: 100%;
}

@media (max-width: 767px) {
  #adsar .input-group input {
    padding: 9px 13px 9px;
  }
}

#adsar .input-group input:focus {
  box-shadow: 0 0 0 1px var(--color-primary);
  border-color: var(--color-primary);
}

#adsar .accentcolour {
  font-weight: bold;
  color: var(--color-primary);
}

#adsar .resultsblock {
  display: grid;
  gap: 16px;
  grid-template-areas:
    'payoffyourbalance payoffyourbalance'
    'monthlycost totalamount'
    'interest totalamount'
    'none totalamount';
  margin-bottom: 32px;
}

@media (max-width: 767px) {
  #adsar .resultsblock {
    gap: 8px;
    grid-template-areas:
      'payoffyourbalance payoffyourbalance'
      'monthlycost totalamount'
      'interest totalamount'
      'none totalamount';
  }
}

#adsar .tryswitching .h1 {
  margin-bottom: 12px;
}

#adsar .tryswitching p {
  color: #291d4c;
}

#adsar .savings {
  font-size: 19px;
  line-height: 27px;
  margin-bottom: 16px;
}

#adsar .savings span {
  font-weight: 600;
  color: #007a72;
  font-size: 19px;
  line-height: 27px;
}

#adsar .savingsfilters {
  display: flex;
  gap: 16px;
}

#adsar .savingsfilters > div {
  flex-basis: 50%;
}

#adsar .savingsfilters .heading {
  margin-top: 4px;
  font-weight: bold;
}

#adsar .savingstable {
  margin-top: 8px;
}

#adsar .savingstable table {
  width: 100%;
}

#adsar .savingstable table th {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #291d4c;
  padding: 16px;
  text-align: right;
}

#adsar .savingstable table tbody td {
  background-color: #ffffff;
  font-size: 12px;
  line-height: 17px;
  color: #291d4c;
  text-align: left;
  padding: 16px;
}

@media (max-width: 767px) {
  #adsar .savingstable table tbody td {
    font-size: 12px;
    line-height: 17px;
    color: #291d4c;
    text-align: left;
  }
}

#adsar .savingstable table tbody td:nth-child(2) {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
}

#adsar .savingstable table tbody td:nth-child(3) {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #5b5ebf;
  text-align: right;
}

#adsar .savingstable table tbody tr:first-child td:first-child {
  border-radius: 8px 0 0;
}

#adsar .savingstable table tbody tr:first-child td:last-child {
  border-radius: 0 8px 0 0;
}

#adsar .savingstable table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

#adsar .savingstable table tbody tr:last-child td:last-child {
  border-radius: 0 0 8px;
}

#adsar .savingstable table tbody tr {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #f0f2fe;
}

#adsar .savingstable table tbody tr:last-child {
  border-bottom: 0;
}