@font-face {
  font-family: 'Anek Latin';
  src: url('./fonts/AnekLatin-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Anek Latin';
  src: url('./fonts/AnekLatin-Regular.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Anek Latin';
  src: url('./fonts/AnekLatin-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Anek Latin';
  src: url('./fonts/AnekLatin-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Anek Latin';
  src: url('./fonts/AnekLatin-Bold.ttf') format('truetype');
  font-weight: 700;
}

.sampoorna-calculator-result {
  --abc-red: #C7222A;
  --dark-abc-red: #8B151B;
  --abc-purple: #7C2279;
  --abc-green: #70B865;
  --black-text: #000000;
  --primary-text: #414042;
  --secondary-text: #77787B;
  --bg-white: #FFFFFF;
  --bg-grey: #DCDDDE;
  --bg-grey-50: #DCDDDE80;
  --bg-grey-25: #DCDDDE40;
}

.sampoorna-calculator-result .red-text {
  color: var(--abc-red);
}

.sampoorna-calculator-result .calculator-main-div2 {
  padding: 20px;
  background: linear-gradient(rgba(255, 255, 255, .97)), url('./images/result-background.png');
  background-position: 0 0;
  background-size: contain;
}

.sampoorna-calculator-result #expandButton {
  width: 28px;
  height: 28px;
  padding: 5px 3px;
  margin-top: 5px;
  margin-right: 22px;
  margin-left: 0;
}

.sampoorna-calculator-result .card-title {
  font-family: 'Anek Latin';
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--abc-red);
  margin-bottom: 18px;
}

.sampoorna-calculator-result .card-paragraph {
  font-family: 'Anek Latin';
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: normal;
  color: var(--secondary-text);
}

.sampoorna-calculator-result .details-section {
  gap: 25px;
}

.sampoorna-calculator-result .card-sub-heading {
  font-family: 'Anek Latin';
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dark-abc-red);
  margin-top: 50px;
  margin-bottom: 30px;
}

.sampoorna-calculator-result .chart-detail {
  flex: 0.45;
}

.sampoorna-calculator-result .card-details {
  font-family: 'Anek Latin';
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-text);
  margin-bottom: 30px;
}

.sampoorna-calculator-result .card-details:last-child {
  margin-bottom: 0;
}

.sampoorna-calculator-result .card-details .title {
  color: var(--black-text);
}

.sampoorna-calculator-result .card-details .value {
  color: var(--dark-abc-red);
}

.sampoorna-calculator-result .chart-container {
  flex: 0.55;
  background-color: var(--bg-grey-50);
  box-shadow: 0px 1px 4px 0px #00000040;
  border-radius: 16px;
}

.sampoorna-calculator-result .chart-container .chart {
  width: 100%;
  background-color: var(--bg-white);
  border-radius: 16px;
}

.sampoorna-calculator-result .chart-container .chart {
  font-family: 'Anek Latin';
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0;
  padding: 20px 20px;
  background-color: var(--bg-white);
  border-radius: 16px;
}

.sampoorna-calculator-result .chart-container .chart .chart-label {
  width: max-content;
}

.sampoorna-calculator-result .chart-container .chart .chart-canvas {
  max-width: 350px;
  width: 100%;
}

.sampoorna-calculator-result .chart-container .chart .positioned-label {
  position: absolute;
  top: 40%;
  right: 1%;
  transform: rotate(-90deg);
  color: var(--abc-red);
}

.sampoorna-calculator-result .chart-legend {
  flex: 1;
  background-color: var(--bg-white);
  padding: 14px;
  border-radius: 16px;
}

.sampoorna-calculator-result .chart-legend .amount {
  display: flex;
  font-family: 'Anek Latin';
  font-weight: normal;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  vertical-align: middle;
  margin-bottom: 5px;
}

.sampoorna-calculator-result .chart-legend.purple {
  box-shadow: 0px -1px 3px 0px var(--abc-purple);
}

.sampoorna-calculator-result .chart-legend.green {
  box-shadow: 0px -1px 3px 0px var(--abc-green);
}

.sampoorna-calculator-result .chart-legend.red {
  box-shadow: 0px -1px 3px 0px var(--abc-red);
}

.sampoorna-calculator-result .chart-legend.purple .amount {
  color: var(--abc-purple);
}

.sampoorna-calculator-result .chart-legend.green .amount {
  color: var(--abc-green);
}

.sampoorna-calculator-result .chart-legend.red .amount {
  color: var(--abc-red);
}

.sampoorna-calculator-result .chart-legend.purple .amount .rupee-sybmol {
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2224%22%20viewBox%3D%220%200%2016%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10.3%2024L1.33333%2014.6667V12H6C7.17778%2012%208.19444%2011.6167%209.05%2010.85C9.90556%2010.0833%2010.4222%209.13333%2010.6%208H0V5.33333H10.2C9.82222%204.55556%209.26111%203.91667%208.51667%203.41667C7.77222%202.91667%206.93333%202.66667%206%202.66667H0V0H16V2.66667H11.6667C11.9778%203.04444%2012.2556%203.45556%2012.5%203.9C12.7444%204.34444%2012.9333%204.82222%2013.0667%205.33333H16V8H13.3C13.1222%209.88889%2012.3444%2011.4722%2010.9667%2012.75C9.58889%2014.0278%207.93333%2014.6667%206%2014.6667H5.03333L14%2024H10.3Z%22%20fill%3D%22%237C2279%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.sampoorna-calculator-result .chart-legend.green .amount .rupee-sybmol {
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2224%22%20viewBox%3D%220%200%2016%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10.3%2024L1.33333%2014.6667V12H6C7.17778%2012%208.19444%2011.6167%209.05%2010.85C9.90556%2010.0833%2010.4222%209.13333%2010.6%208H0V5.33333H10.2C9.82222%204.55556%209.26111%203.91667%208.51667%203.41667C7.77222%202.91667%206.93333%202.66667%206%202.66667H0V0H16V2.66667H11.6667C11.9778%203.04444%2012.2556%203.45556%2012.5%203.9C12.7444%204.34444%2012.9333%204.82222%2013.0667%205.33333H16V8H13.3C13.1222%209.88889%2012.3444%2011.4722%2010.9667%2012.75C9.58889%2014.0278%207.93333%2014.6667%206%2014.6667H5.03333L14%2024H10.3Z%22%20fill%3D%22%2370B865%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.sampoorna-calculator-result .chart-legend.red .amount .rupee-sybmol {
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2224%22%20viewBox%3D%220%200%2016%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10.3%2024L1.33333%2014.6667V12H6C7.17778%2012%208.19444%2011.6167%209.05%2010.85C9.90556%2010.0833%2010.4222%209.13333%2010.6%208H0V5.33333H10.2C9.82222%204.55556%209.26111%203.91667%208.51667%203.41667C7.77222%202.91667%206.93333%202.66667%206%202.66667H0V0H16V2.66667H11.6667C11.9778%203.04444%2012.2556%203.45556%2012.5%203.9C12.7444%204.34444%2012.9333%204.82222%2013.0667%205.33333H16V8H13.3C13.1222%209.88889%2012.3444%2011.4722%2010.9667%2012.75C9.58889%2014.0278%207.93333%2014.6667%206%2014.6667H5.03333L14%2024H10.3Z%22%20fill%3D%22%238B151B%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.sampoorna-calculator-result .chart-legend .amount .rupee-sybmol {
  display: inline-block;
  height: 18px;
  width: 12px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sampoorna-calculator-result .chart-legend .label {
  font-family: 'Anek Latin';
  font-weight: normal;
  font-size: 14px;
  color: var(--primary-text);
  text-align: center;
  line-height: normal;
  letter-spacing: 0;
  vertical-align: middle;
  margin-bottom: 5px;
}

.sampoorna-calculator-result .chart-legend .duration {
  font-family: 'Anek Latin';
  font-weight: normal;
  font-size: 12px;
  color: var(--secondary-text);
  line-height: normal;
  letter-spacing: 0;
  vertical-align: middle;
  margin-bottom: 0px;
}

.sampoorna-calculator-result .go-back-section .go-back-text {
  font-family: 'Anek Latin';
  font-size: 14px;
  font-weight: normal;
  color: var(--primary-text);
}

.sampoorna-calculator-result .go-back-section .go-back-button {
  gap: 10px;
  width: 150px;
  background-color: var(--bg-grey);
  font-family: 'Anek Latin';
  font-size: 14px;
  font-weight: normal;
  color: var(--primary-text);
  text-align: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 12px;
}

.sampoorna-calculator-result .go-back-section .go-back-button:hover {
  cursor: pointer;
}

.sampoorna-calculator-result .go-back-section .go-back-button .back-arrow {
  display: inline-block;
  height: 12px;
  width: 12px;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2019%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.4625%2010.5L10.9958%2017.0333L9.33333%2018.6667L0%209.33333L9.33333%200L10.9958%201.63333L4.4625%208.16667H18.6667V10.5H4.4625Z%22%20fill%3D%22%23414042%22%2F%3E%3C%2Fsvg%3E');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
  991 was considered as 990 by browser so 991.78px is set.
  Adding extra decimal value tricks browser to break at 991 instead of 990
*/
@media only screen and (max-width: 991.78px) {
  .sampoorna-calculator-result .card-sub-heading {
    margin-top: 0;
    margin-bottom: 10px;
  }

  .sampoorna-calculator-result .card-details {
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 575px) {
  .sampoorna-calculator-result .calculator-main-div2 {
    padding: 12px;
  }

  .sampoorna-calculator-result .card-title {
    font-size: 24px;
  }

  .sampoorna-calculator-result .card-paragraph {
    font-size: 12px;
  }

  .sampoorna-calculator-result .details-section {
    background: var(--bg-grey-25);
    backdrop-filter: blur(40px);
    padding: 20px;
    border-radius: 16px;
  }

  .sampoorna-calculator-result .card-sub-heading {
    font-size: 18px;
  }

  .sampoorna-calculator-result .card-details {
    font-size: 12px;
  }

  .sampoorna-calculator-result .chart-container,
  .sampoorna-calculator-result .chart-container .chart {
    box-shadow: none;
    background-color: transparent;
    padding: 0 !important;
  }

  .sampoorna-calculator-result .chart-container .chart .positioned-label {
    font-size: 12px;
  }

  .sampoorna-calculator-result .chart-legend {
    border-radius: 11px;
  }

  .sampoorna-calculator-result .chart-container .chart .chart-label.rotate-270 {
    width: 0;
    font-size: 12px;
    margin-top: 20px;
    transform: rotate(270deg);
  }

  .sampoorna-calculator-result .chart-legend .label {
    font-size: 13px;
  }

  .sampoorna-calculator-result .chart-legend .amount {
    font-size: 14px;
  }

  .sampoorna-calculator-result .chart-legend .amount .rupee-sybmol {
    width: 8px;
    height: 12px;
  }
}

/* Developed By Mansoor Ansari (mansoorulhaque.ansari-v@adityabirlacapital.com) */