.mainbehaviortendency {


.container {

  }

  .section-title {
    color: #4f46e5;
    /* Indigo-600 */
    font-size: 1.75rem;
    /* 28px */
    font-weight: 700;
    /* Bold */
    margin-bottom: 1.5rem;
    /* 24px */
    text-align: center;
  }

  .report-section {

  }

  .report-heading {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: #1a202c;
    /* Dark text */
    margin-bottom: 10px;
  }

  .report-item {
    margin-bottom: 8px;
  }

  .report-text {
    font-size: 1rem;
    color: #4a5568;
    /* Grey-700 */
  }

  .footer {
    margin-top: 30px;
    text-align: center;
    font-size: 0.8rem;
    color: #6b7280;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
  }

  /* Custom styles for 5-circle percentage display */
  .five-circle-indicator {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* Prevent circles from shrinking */
  }

  .next-items{
    border: 1px solid #000;
      /* padding: 20px; */
    border-radius: 100px;
    padding: 0px;
  }

  .five-circle-indicator .circle {
    border-radius: 50%;
    border: 1px solid #78206E;
    /* Light purple border */
    margin-right: 4px;
    /* Space between circles */
    transition: all 0.1s ease-out;
    /* Smooth transition for size changes */
    flex-shrink: 0;
    opacity: 75%;
    /* Prevent circles from shrinking */
  }

  .five-circle-indicator .circle.filled {
    background-color: #78206E;
    /* Purple-500 */
    border-color: #78206E;

    /* Purple-500 */
  }

  /* Grid layout for each tendency item */
  .tendency-grid {
    display: grid;
    border-bottom: 1px dashed #e2e8f0;
  }

  /* Default: stacked layout on small screens */
  .tendency-grid>div {
    grid-column: span 1;
    /* Each direct child takes full width */
  }

  /* Medium screens and up: Specific 4-column layout */
  @media (min-width: 768px) {
    .tendency-grid {
      /* Define 4 equal columns for the sub-tendency details row */
      grid-template-columns: 1fr 1fr 1fr 1fr;
      align-items: center;
      /* Vertically align items in the grid */
    }

    .tendency-grid .main-title-wrapper {
      grid-column: 1 / -1;
      /* Main title spans all 4 columns */
      text-align: left;
      /* Spacing below the main title */
    }

    /* Specific alignment for the 4 sub-tendency columns */
    .tendency-grid .sub-label-1 {
      /* Deep Thinker Label */
      text-align: right;
      padding-right: 0px;
    }

    .tendency-grid .sub-circles-1 {
      /* Deep Thinker Circles */
      justify-content: flex-start;
      padding-left: 5px;
      padding-bottom: 5px;
    }

    .tendency-grid .sub-circles-2 {
      /* Fast Actor Circles */
      justify-content: flex-end;
      /* Align to the right to be close to its label */
      padding-right: 5px;
      padding-left: 20px;
      padding-bottom: 5px;
    }

    .tendency-grid .sub-label-2 {
      /* Fast Actor Label */
      text-align: left;
      padding-left: 5px;
    }

    .tendency-grid .description-list {
      grid-column: 1 / -1;
      /* Description list spans all 4 columns */
      margin-top: 10px;
      /* Spacing above the list */
    }
  }

  /* Further adjust for overall structure */
  .tendency-grid .main-title-wrapper strong {
    font-size: 1.05rem;
    /* Slightly larger for main titles */
  }

  .tendency-grid .sub-label-1 p,
  .tendency-grid .sub-label-2 p {
    font-size: 0.95rem;
    /* Slightly smaller for sub-tendency titles */
    font-weight: 500;
    /* Medium weight for labels */
  }


  .sdac_readings {

        font-family: 'Inter', sans-serif;
        background-color: #f0f4f8;
        /* Light gray background */


      .container-card {
        background-color: #ffffff;
        border-radius: 0.75rem;
        /* rounded-xl */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        /* shadow-lg */
        padding: 2rem;
        /* Moved border styling here */
        border: 2px solid #8B4513;
        /* Brown border */
      }

      h1 {
        color: #334155;
        /* Slate 700 */
      }

      h2 {
        color: #1e293b;
        /* Slate 800 */
      }

      p {
        color: #475569;
        /* Slate 600 */
      }

      ul {
        list-style-type: disc;
        margin-left: 1.5rem;
      }

      li {
        margin-bottom: 0.5rem;
        color: #000;
        /* Slate 600 */
      }

      .section-number {
        color: #334155;
        /* Slate 700 */
        font-weight: 600;
        /* font-semibold */
      }

      .section-title {
        color: #1e293b;
        /* Slate 800 */
        font-weight: 700;
        /* font-bold */
        font-size: 15px;
      }

      .trait-pair {
        color: #000;
        /* Slate 500 */
        font-weight: 600;
        /* font-semibold */
      }

      .trait-value {
        color: #000;
        /* Slate 900 */
        font-weight: 700;
        /* font-bold */
      }

      .percentage {
        color: #0f172a;
        /* Slate 900 */
        font-weight: 600;
        /* font-semibold */
      }

      .space-y-6 {
        font-size: 15px;
      }

      .text-left {
        font-size: 30px;
        font-weight: bold !important;
      }
  }
}