body,
.bodytext,
p,
.size1
 {
    font-family: Nunito Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #000000;
}

td,
th,
tr,
table {
    font-family: Nunito Sans;
    font-weight: 500;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0.1px;
    vertical-align: middle;
    color: #000000;
}

a:link {
    color:  #ec672d;   /* link not yet visited */
  }
  
  a:visited {
    color: #9b3d1d;   /* example: darker shade after visiting */
  }
  
  a:hover {
    color: #cf4f14;   /* example: brighter shade on hover */
  }
  
  a:active {
    color: #c24f20;   /* example: when the link is being clicked */
  }

H1,
.h1 {
    font-family: Nunito Sans;
    font-weight: 700;
    font-size: 30px;
    leading-trim: NONE;
    line-height: 1.2;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    color: #18349B;
    text-align: center;
}

H2,
.h2 {
    font-family: Nunito Sans;
    font-weight: 500;
    font-size: 24px; /* 16px; */
    font-style: normal;
    line-height: 1.2; /* 24px; */
    letter-spacing: 0.2px; /* 0.1px; */
    color: ##000000;
    text-align: center;
}

H3,
.h3 {
    font-family: Nunito Sans;
    font-weight: 400;
    font-size: 18px;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 1px;
    color: #000000;    
}

input.tbt-input {
    display: block;
    width: 400px;             /* Figma width */
    height: 48px;             /* Figma height */
    border-radius: 30px;      /* Figma corner radius */
    
    border: 1px solid #ccc;   /* neutral border */
    background-color: #E6E9F366;   
    
    padding: 0 16px;          /* left/right spacing */
    font-size: 16px;          /* adjust if Figma specifies */
    font-family: inherit;     /* use same font as body */
    color: #000000;              /* text color */
    
    box-sizing: border-box;   /* ensures consistent sizing */
    outline: none;            /* remove default outline */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* Hover state */
  input.tbt-input:hover {
    border-color: #999;       /* slightly darker border */
  }
  
  /* Focus state */
  input.tbt-input:focus {
    border-color: #007BFF;    /* highlight color (blue example) */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /* soft glow */
  }

  input.tbt-input:placeholder {
    color: #E0ECFD66;        /* slightly darker border */
  }
  input.tbt-input:disabled {
    background-color: gray;
    color: darkgray;
    opacity: 0.5;
  }

  input.tbt-fit {
    width: fit-content;
    height: fit-content;
  }

  .checkbox-left {
    display: flex;
    flex-direction: row-reverse; /* flips order */
    align-items: center;         /* vertical centering */
    gap: 8px;                    /* space between label and box */
  }


  /* Container label */
.tbt-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 8px; /* space between box and text */
  }
  
  /* Hide the native checkbox but keep it focusable */
  .tbt-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Custom box */
  .tbt-checkbox__box {
    width: 24px;
    height: 24px;
    border: 2px solid #E0ECFD66;
    background: #E6E9F366; 
    display: inline-block;
    position: relative;
    box-sizing: border-box;
  }
  
  /* Checkmark (only shows when checked) */
  .tbt-checkbox__input:checked + .tbt-checkbox__box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 8px;
    height: 14px;
    /* border: 2px solid #E6E9F366; */
    border: solid #0d36a4;        /* blue check */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  
  /* Optional: focus ring when using keyboard */
  .tbt-checkbox__input:focus + .tbt-checkbox__box {
    box-shadow: 0 0 0 3px rgba(13, 54, 164, 0.25);
  }

  button.tbt-button {
    width: 400px;              /* width: 290 */
    height: 48px;              /* height: 48 */
    padding: 12px 20px;        /* top/bottom 12, left/right 20 */
    display: inline-flex;      /* allows gap between icon/text */
    align-items: center;       /* vertical centering */
    justify-content: center;   /* center content */
    gap: 10px;                 /* space between items */
    opacity: 1;                /* fully visible */
    transform: rotate(0deg);   /* no rotation */
    box-sizing: border-box;
  
    border: none;
    border-radius: 30px;       /* guessing from your earlier inputs */
    cursor: pointer;
    font: inherit;
  
    background-color: #EC672D; /* example orange background */
    color: #fff;               /* white text */
  }

  button.tbt-button-open {
    background-color: white;
    color: #EC672D;
    border: 1px solid #EC672D;
  }

  button.tbt-fit {
    width: fit-content;
    height: fit-content;
  }

  button.tbt-button-saved {
    background-color: green;
  }

  button.tbt-button-saving {
    background-color: yellow;
  }

  button.tbt-button-unsaved {
    background-color: red;
  } 

  button.tbt-button-delete {
    background-color: red;
  }

.tbt-button-text {
    font-family: Nunito Sans;
    font-weight: 500;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0.1px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.tbt-button-text-open {
    color: #EC672D;
}

select.tbt-select {
    display: block;
    width: 400px;             /* Figma width */
    height: 48px;             /* Figma height */
    border-radius: 30px;      /* Figma corner radius */
    
    border: 1px solid #ccc;   /* neutral border */
    background-color: #E6E9F366;   
    
    padding: 0 16px;          /* left/right spacing */
    font-size: 16px;          /* adjust if Figma specifies */
    font-family: inherit;     /* use same font as body */
    color: #000000;              /* text color */
    
    box-sizing: border-box;   /* ensures consistent sizing */
    outline: none;            /* remove default outline */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /*
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center; /* arrow position
    background-size: 12px;
    */
  }

  select.tbt-select:disabled {
    background-color: gray;
    color: darkgray;
    opacity: 0.5;
  }

  select.tbt-fit {
    width: fit-content;
    height: fit-content;
  }

  .tbt-first-option {
    color: #E0ECFD66;
  }

.tbt-alert-danger {
    color: #ff0000; 
}

.tbt-centered {
    margin: auto;
    width: 50%;
    text-align: center;
}

.tbt-centered-input {
    margin: auto;
    width: 400px;
    text-align: left;
}

.tbt-household-summary {
    width: 400px;
    border-radius: 10px;
    border-width: 1px;
    background: #0065F208;
    color: #18349B;
    padding: 10px;
    margin: 10px;
}

.tbt-table {
    border-collapse: separate;
    border-spacing: 4px;
}

.tbt-table-head {
    background: #E6E9F3;
    width: 129;
    height: 36;
    angle: 0 deg;
    opacity: 1;
    gap: 10px;
    border-width: 1px;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    text-align: center;
}

.tbt-table-head-emphatic {
    background: #18349B;
    color: #E6E9F3;
}

.tbt-table-data-emphatic {
    font-weight: 700;
}

.tbt-table-data {
    border: 1px solid #D7E7FD;
    width: 129;
    height: 36;
    angle: 0 deg;
    opacity: 1;
    gap: 10px;
    border-width: 1px;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;

}

.tbt-accordion-title{
    font-family: Nunito Sans;
    font-weight: 700;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 1.2;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    color: #18349B;
    text-align: center;
}