/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Front-end styles */
.mec-calculator {
  padding: 0 0.5rem 1.5rem;
  margin: auto;
}

.mec-calculator-content {
  display: flex;
  flex-direction: row;
  gap: 4rem; /* 2rem gap between columns */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.mec-form, .mec-results {
  flex: 1; /* Allow both columns to grow equally */
  max-width: calc(50% - 2rem); /* Maintains a maximum width */
  box-sizing: border-box; /* Prevents padding and border from exceeding width */
}

.form-group {
  margin-bottom: 15px;
  position: relative; /* To position the prefix */
}

.form-group label {
  display: block;
  color: #4F145B;
  font-weight: 500;
  margin-bottom: 5px;
}

.mec-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.mec-input-prefix {
  position: absolute;
  left: 10px;
  top: 0; /* Align it with the input field */
  bottom: 0;
  display: flex;
  align-items: center; /* Center it vertically */
  font-size: 16px;
  color: #333;
  pointer-events: none; /* Allows clicks to pass through to the input */
  z-index: 2; /* Ensure it's above the input */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.mec-form input[type=text] {
  width: 100%;
  padding: 8px 12px 8px 24px; /* Add left padding to accommodate the £ symbol */
  box-sizing: border-box;
  border: 1px solid #999; /* Default border color */
  border-radius: 4px;
  font-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  transition: border-color 0.3s ease; /* Smooth transition when focused */
}

/* Change border color to pink on focus */
.mec-form input[type=text]:focus {
  border-color: #D80080; /* Pink border when selected */
  outline: none; /* Removes the default blue outline */
}

/* For Chrome, Safari, Edge, and Opera */
.mec-form input[type=text]::-webkit-outer-spin-button,
.mec-form input[type=text]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
.mec-form input[type=text] {
  -moz-appearance: textfield;
}

.mec-calculateBtn {
  width: 100%;
  padding: 10px 0;
  background-color: #D80080; /* Changed to Equity Pink */
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.mec-calculateBtn:hover {
  background-color: #c70073; /* Darker shade on hover */
}

.mec-results {
  background-color: #FFFAFD;
  padding: 15px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
  overflow: hidden; /* Prevents content from overflowing */
}

.result-item {
  font-size: 16px;
  color: #333;
}

/* Style for the updated Estimated Equity Display */
.mec-equated-amount {
  display: block;
  font-size: 24px; /* Larger font size */
  color: #D80080; /* Pink color */
  margin-top: 5px;
}

.mec-estimatedEquity-container {
  margin-top: 20px;
  text-align: center; /* Center the text */
}

.mec-estimatedEquity {
  font-size: 20px;
  color: #555;
  font-weight: 500;
}

.mec-equity-amount {
  font-size: 24px;
  font-weight: 500;
  color: #D80080;
}

/* Error Message Styling */
.error {
  color: red;
  margin-top: 15px;
  font-weight: 500;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}

/* Donut Chart Styling */
.mec-donut-chart {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mec-donut-chart svg {
  width: 150px;
  height: 150px;
}

/* Legend Styling - Stacked Vertically */
.mec-legend-vertical {
  display: flex;
  flex-direction: column; /* Stack vertically */
  margin-top: 10px;
}

.mec-legend-item {
  display: flex;
  align-items: center;
  margin: 5px 0; /* Spacing between legend items */
}

.mec-legend-color {
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 3px;
}

.mec-legend-label {
  font-size: 14px;
  color: #333;
}

/* Style for the label and info button */
.mec-input-label {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the start */
  font-weight: 600;
  margin-bottom: 5px;
  position: relative;
}

/* Tooltip styles */
/* Style for the tooltip content */
.tooltipcalc {
  position: relative; /* Establishes a positioning context for the tooltip */
}

.tooltop-icon {
  position: relative;
  bottom: -3px;
  left: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.tooltip-content {
  position: absolute;
  bottom: 80%; /* Positions the tooltip above the icon */
  left: calc(50% + 4px);
  transform: translateX(-50%);
  margin-bottom: 8px; /* Space between the tooltip and the icon */
  background-color: #4F145B;
  color: #fff;
  padding: 4px 8px 6px 8px;
  border-radius: 4px;
  white-space: normal; /* Allows multiline content */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
  font-size: 14px;
  font-weight: 500;
  width: 256px; /* Adjust as needed */
  box-sizing: border-box;
}

/* Arrow for the tooltip pointing downwards */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%; /* Positions the arrow at the bottom of the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgb(79, 20, 91) transparent transparent transparent;
}

/* Show tooltip when visible */
.tooltip-content.visible {
  opacity: 1;
  visibility: visible;
}

/* Style for links inside tooltip */
.tooltip-content a {
  color: #FFF;
  text-decoration: underline !important;
}

.tooltip-content a:hover,
.tooltip-content a:focus {
  color: #FFFAFD;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .mec-calculator-content {
    flex-direction: column;
    gap: 2rem; /* Reduced gap for smaller screens */
  }
  .mec-form, .mec-results {
    flex: 1 1 100%; /* Full width on small screens */
    max-width: none; /* Remove max-width restriction */
  }
  .tooltip-content {
    width: 192px;
  }
}

/*# sourceMappingURL=style-index.css.map*/