:root {
    --green: #13aa22;
    --dark-blue: #244170;
    --yellow: #ffd77f;
    --dark-yellow: #ffc54a;
    --gray: #eee;
    --dark-gray: #333;
  }
section, div, p, h1, h2, h3, h4, h5, h6, label, input {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--dark-blue)
}
section, div, p, label, input {
    font-size: 1.25rem;
    color: black;
    font-weight: normal;
}
label {
    font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.85rem;
}
h3 {
    font-size: 1.5rem;
    margin-bottom: 0.25em;
    font-weight: normal;
}
a {
    color: var(--dark-blue);
    text-decoration: underline;
}

.small,
.small * {
    font-size: 1rem;
}
input::placeholder {
    text-align: center;
}
textarea::placeholder {
text-align: center;
}
input:not(:placeholder-shown)::after {
    
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #333;
  }
  
/* input.input-level:not(:placeholder-shown)::after {
    content: ' mg/dL'; 
}
input.input-dosage:not(:placeholder-shown)::after {
    content: ' mg'; 
} */
.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: var(--green);
    border: 0.1rem solid var(--green);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    height: auto;
    letter-spacing: .1rem;
    line-height: 3.8rem;
    padding: 0 3.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.button:focus, .button:hover, button:focus, button:hover, input[type='button']:focus, input[type='button']:hover, input[type='reset']:focus, input[type='reset']:hover, input[type='submit']:focus, input[type='submit']:hover {
    background-color: #fff;
    border-color: var(--green);
    color: var(--green);
    outline: 0;
}
input[type='color'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='email'], input[type='month'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='week'], input:not([type]), textarea, select {
    border-color: var(--dark-blue)
}
input[type='color']:focus, input[type='date']:focus, input[type='datetime']:focus, input[type='datetime-local']:focus, input[type='email']:focus, input[type='month']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, input[type='week']:focus, input:not([type]):focus, textarea:focus, select:focus {
    border-color: var(--dark-blue);
}
input[type='checkbox'], input[type='radio'] {
    margin-bottom: 5px;
}
.input-date[data-gtm-form-interact-field-id],
.input-date-readonly {
  background-color: var(--dark-blue) !important;
  color: #fff;
}
.border-radius {
    border-radius: 10px;
}
button.primary {
  font-size: 1.85rem; 
  padding: 1rem 3.0rem;
}
button.button-reset {
  border: solid 1px transparent;
  color: var(--dark-gray);
  background: transparent;
}
.button-reset .button-content-wrapper svg {
  height: 15px;
}
.buttons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.data-label.note {
    margin-top: 30px;
}

.action {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.margin-bottom-3 {
    margin-bottom: 30px;
}

/* General Modal Styling */
.ld-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fff;
    /* margin: 15% auto; */
    padding: 20px;
    border-radius: 10px;
    width: auto;
    max-width: 768px; /*responsive item*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Close Button */
  .ld-modal .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
  }
  
  .ld-modal .close:hover,
  .ld-modal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Button Styles */
  
  /* Warning Modal Styling */
  #ldWarningModal .modal-content {
    border-left: 5px solid red;
  }
  
  #ldWarningModal h2 {
    color: red;
  }
  
  #ldWarningModal button {
    background-color: red;
    color: white;
  }
  
  /* Info Modal Styling */
  #ldInfoModal .modal-content {
    border-left: 5px solid var(--green);
  }
  #ldInfoModal p {
    font-size: 1.75rem;
  }
  #ldInfoModal h2 {
    color: var(--green);
  }
  
  #ldInfoModal button {
  }

  .references-section,
  .references-section * {
    text-align: left;
  }
  .references-section p {
    margin-bottom: 10px;
  }
  .results-container div {
    display: none;
  }

  .summary {
    background-color: var(--gray);
  }
  .summary .summary-head {
    background: var(--dark-blue);
  }
  .summary .summary-head h2 {
    color: white;
    margin-bottom: 0;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .summary .summary-body{
    padding: 15px 30px;
  }

  #ld-summary-target {
  }
  #interventions {
    background-color: var(--gray);
  }
  .interventions {
    padding: 10px;
  }
  .summary-details {
    margin-bottom: 30px;
  }
  .summary-details:last-child {
    margin-bottom: 0;
  }
  .summary-details h3 {
    font-weight: bold;
  }


  #chart-container {
    background-color: var(--gray);
    height: 400px;
    border: solid 1px var(--dark-blue);
    margin-bottom: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  table td {
    vertical-align: top;
  }
  table p {
    margin-bottom: 5px;
  }

  .chart-temp {
    text-align: center;
  }
  .chart-temp img {
    width: 50%;
    height: auto;
    margin-bottom: 15px;
  }
  .warning-container img {
    height: 50px;
    width: auto;
  }
  .warning-container p {
    font-size: 1.5rem;
  }
  .results-container img {
    height: 60px;
    width: auto;
  }
  #ld-summary-result-note {
    display: none;
  }

  #ld-summary-result-note p {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #ld-summary-result-note img {
    margin-right: 15px;
  }
  .button-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .icon-lg, .button-content-wrapper svg {
    height: 30px;
  }
  .button-wrapper,
  .button-wrapper button {
    max-width: 100%;
  }

  #reset-form:hover span {
    text-decoration: underline;
  } 
  

  @media (max-width: 1024px) {
    .action {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .row.data-table {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .row .column.column-20 {
      flex: 0 0 25%;
      gap: 10px;
      max-width: 25%;
      padding: 0 5px;
    }
    .row .column.column-20.label-column {
      flex: 0 0 100%;
      margin-bottom: 10px;
    }
    .row .column.column-50,
    .row .column.column-80,
    .row .column.column-33,
    .row .column.column-67 {
        max-width: 100%; /* Stack columns on mobile */
        margin-bottom: 10px; /* Add spacing between stacked columns */
    }
    .row .column.column-80 {
      flex: 0 0 100%;
    }
    .row .column.label-column,
    .row .input-level[name=target] {
      max-width: 100%;
    }
    .row .interventions {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .data-column.column.column-20.checkup-interventions {
    }
    .data-column.column.column-20.checkup-interventions label {
      display: flex;
      align-items: center;
      font-size: 1rem;
    }
    .interventions .column.label-column p {
      margin-bottom: 0;
    }
    ol > li {
      font-size: 1rem;
    }
    .mobile-header {
        text-align: center; /* Center-align header text on mobile */
    }
    

    .hide-on-mobile {
        display: none; /* Hide elements on mobile */
    }
}


/* TABLE STYLE */

.two-column-table-col h2 {
  text-align: center;
  font-size: 14px;
}

.two-column-table-col:first-child table {
  border-collapse: collapse;
}

.two-column-table-col:first-child table th {
  width: 50%;
}

.two-column-table-col:first-child table td,
.two-column-table-col:first-child table th {
  padding: 10px 5px;
  text-align: center;
  font-size: 12px;
  border: 1px solid grey;
}

.two-column-table-col:first-child table tr th:last-child {
  font-weight: 400;
}

.two-column-table-col:first-child table tr th:first-child,
.two-column-table-col:first-child table tr td:first-child {
  color: white;
  background-color: #00183D;
}

.two-column-table-col:first-child table tr th:last-child,
.two-column-table-col:first-child table tr td:last-child {
  background-color: #FFC649;
}

.two-column-table-col:last-child table th,
.two-column-table-col:last-child table td {
  padding: 10px 0;
  border-top: 1px solid grey;
  font-size: 12px;
}

.two-column-table-col:last-child table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.two-column-table-col:last-child table thead tr th {
  width: 20%;
}

.two-column-table-col:last-child table tr td {
  padding-right: 30px;
}

/* .two-column-table-col:last-child table thead tr th:nth-child(2) {
  width: 37%;
}

.two-column-table-col:last-child table thead tr th:last-child {
  width: 37%;
} */
.datatable-row h2 {
  background-color: var(--green);
  padding: 10px 20px;
  color: white;
  text-align: center;
}
.datatable-row,
.references-row .column {
  margin-bottom: 30px;
}
.disclaimer-row {
  margin-bottom: 15px;
}
.references-row h2 {
  font-size: 1rem;
}
.references-row ul {
  margin-bottom: 0;
}
.references-row p,
.references-row p a,
.references-row p i,
.disclaimer-row p {
  font-size: 1rem;
}
.disclaimer-row p {}
.disclaimer-row p,
.references-row p {
  margin-bottom: 10px;
}


@media (min-width: 768px) {
  .two-column-table {
      display: flex;
      gap: 80px;
  }
  
  .two-column-table-col:first-child {
      width: 40%;
  }
  
  .two-column-table-col:last-child {
      width: 60%;
  }
}

@media (max-width: 767px) {
  .two-column-table-col {
      overflow: hidden;
  }

  .two-column-table-col .table {
      overflow-x: auto;
  }

  .two-column-table-col:first-child {
      margin-bottom: 30px;
  }
}