/** 
--light-color and --dark-color values are declared in these DataPages:
c70aafc4fc4e4f829665
f25addb913654e93ba94
*/

/* ===== Base Layout ===== */
.container {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
}

table {
  border-collapse: collapse;
  width: 360px;
  text-align: center;
  margin-bottom: 20px;
}

th,
td {
  padding: 8px;
  max-width: 30px;
}

.footer {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
}

.footer table {
  width: 475px;
}

/* ===== Borders ===== */
.border-all {
  border: 1px solid black;
}

.border-down {
  border-bottom: 1px solid black;
}

.border-lr {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

/* ===== Backgrounds ===== */
.bg-black {
  background: var(--dark-color, black);
}

.bg-yellow {
  background: var(--light-color, #e8b923);
}

.bg-white {
  background: white;
}

/* ===== Text & Color ===== */
.text-black {
  color: black;
}

.text-white {
  color: white;
}

.text-yellow {
  color: #e8b923;
}

.text-red {
  color: #c9302c;
}

.text-green {
  color: #2ca02c;
}

.bold {
  font-weight: bold;
}

/* ===== Combined Utilities ===== */
.text-black-bold {
  color: black;
  font-weight: bold;
}

.text-green-bold {
  color: #2ca02c;
  font-weight: bold;
}

.text-red-bold {
  color: #c9302c;
  font-weight: bold;
}

.text-white-bold {
  color: white;
  font-weight: bold;
}

.text-yellow-bold {
  color: #e8b923;
  font-weight: bold;
}

.bg-yellow-black-text {
  background: var(--light-color, #e8b923);
  color: var(--dark-color, black);
  font-weight: bold;
}

.bg-black-yellow-text {
  background: var(--dark-color, black);
  color: var(--light-color, #e8b923);
  font-weight: bold;
}

/* ===== Header Styles ===== */
.header-black {
  background: var(--dark-color, black);
  color: white;
  font-weight: bold;
}

.header-yellow {
  background: var(--light-color, #e8b923);
  color: black;
  font-weight: bold;
}

/* ===== Icons ===== */
td:has(i.fas) {
  padding-top: 0;
  padding-bottom: 0;
}

i.fas {
  color: black !important;
}

/* ===== Typography ===== */
.text-lg {
  font-size: 30px;
}

.text-md {
  font-size: 20px;
}

/* ===== Box ===== */
.box-padded {
  width: 100%;
  padding: 20px;
}

@media only screen and (min-width: 576px) and (max-width: 768px) {
  #qnq-table-header table thead th,
  #vs-table-header table thead th{
    font-size: 15px !important;
  }

  #comp-sheet .bg-yellow-black-text.py-2,
  #pension-plan-flow-chart .bg-yellow-black-text.py-2,
  #pension-plan-flow-chart div.text-center.bold {
    font-size: 12px !important;
  }

  #comp-sheet table td,
  #pension-plan-flow-chart table td {
    font-size: 8px !important;
  }

  #qnq-table-header table tbody td,
  #vs-table-header table tbody td{
    font-size: 8px !important;
  }

  #pills-qnq form#caspioform table th,
  #pills-qnq form#caspioform table td,
  #pills-vs form#caspioform table th,
  #pills-vs form#caspioform table td {
    font-size: 7px !important;
    white-space: nowrap;
    padding-left: 4px !important;
  }

  div:has(form[action*="eddb283040ad44ed87e9"]),
  div:has(form[action*="1925728288ba46759dc0"]) {
    width: 100% !important;
  }

  #tax-savings-estimate table th,
  #tax-savings-estimate table td,
  #tax-savings-estimate + .footer table th,
  #tax-savings-estimate + .footer table td {
    font-size: 10px !important;
  }

  #pension-plan-flow-chart svg[aria-label="diagonal arrow"] {
    transform: rotate(55deg) translateY(30%) !important;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  #qnq-table-header table thead th,
  #vs-table-header table thead th{
    font-size: 16px !important;
  }

  #comp-sheet .bg-yellow-black-text.py-2,
  #pension-plan-flow-chart .bg-yellow-black-text.py-2,
  #pension-plan-flow-chart div.text-center.bold {
    font-size: 15px !important;
  }

  #comp-sheet table td,
  #pension-plan-flow-chart table td {
    font-size: 10px !important;
  }

  #qnq-table-header table tbody td,
  #vs-table-header table tbody td{
    font-size: 7px !important;
  }

  #pills-qnq form#caspioform table th,
  #pills-qnq form#caspioform table td,
  #pills-vs form#caspioform table th,
  #pills-vs form#caspioform table td {
    font-size: 6px !important;
    white-space: nowrap;
    padding-left: 2px !important;
  }

  div:has(form[action*="eddb283040ad44ed87e9"]),
  div:has(form[action*="1925728288ba46759dc0"]) {
    width: 100% !important;
  }

  #tax-savings-estimate table th,
  #tax-savings-estimate table td,
  #tax-savings-estimate + .footer table th,
  #tax-savings-estimate + .footer table td {
    font-size: 12px !important;
  }

   #pension-plan-flow-chart svg[aria-label="diagonal arrow"] {
    transform: rotate(45deg) translateY(20%) !important;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #qnq-table-header table thead th,
  #vs-table-header table thead th{
    font-size: 20px !important;
  }

  #comp-sheet .bg-yellow-black-text.py-2,
  #pension-plan-flow-chart .bg-yellow-black-text.py-2,
  #pension-plan-flow-chart div.text-center.bold {
    font-size: 17px !important;
  }

  #comp-sheet table td,
  #pension-plan-flow-chart table td {
    font-size: 13px !important;
  }

  #qnq-table-header table tbody td,
  #vs-table-header table tbody td{
    font-size: 10px !important;
  }

  #pills-qnq form#caspioform table th,
  #pills-qnq form#caspioform table td,
  #pills-vs form#caspioform table th,
  #pills-vs form#caspioform table td {
    font-size: 8px !important;
    white-space: nowrap;
  }

  .w-75:has(form[action*="eddb283040ad44ed87e9"]),
  .w-75:has(form[action*="1925728288ba46759dc0"]) {
    width: 100% !important;
  }

  #tax-savings-estimate table th,
  #tax-savings-estimate table td,
  #tax-savings-estimate + .footer table th,
  #tax-savings-estimate + .footer table td {
    font-size: 14px !important;
  }

  #pension-plan-flow-chart svg[aria-label="diagonal arrow"] {
    transform: rotate(35deg) translateY(10%) !important;
  }
}

@media only screen and (min-width: 1281px) and (max-width: 1536px) {
  #qnq-table-header table thead th,
  #vs-table-header table thead th{
    font-size: 25px !important;
  }

  #comp-sheet table td,
  #pension-plan-flow-chart table td {
    font-size: 15px !important;
  }


  #qnq-table-header table tbody td,
  #vs-table-header table tbody td{
    font-size: 12px !important;
  }

  #pills-qnq form#caspioform table th,
  #pills-qnq form#caspioform table td,
  #pills-vs form#caspioform table th,
  #pills-vs form#caspioform table td {
    font-size: 10px !important;
    white-space: nowrap;
  }

  .w-75:has(form[action*="eddb283040ad44ed87e9"]) {
    width: 80% !important;
  }
}

@media only screen and (min-width: 1537px) and (max-width: 1835px) {
  #qnq-table-header table thead th,
  #vs-table-header table thead th{
    font-size: 27px !important;
  }

  #qnq-table-header table tbody td,
  #vs-table-header table tbody td{
    font-size: 14px !important;
  }

  #pills-qnq form#caspioform table th,
  #pills-qnq form#caspioform table td,
  #pills-vs form#caspioform table th,
  #pills-vs form#caspioform table td {
    font-size: 12px !important;
    white-space: nowrap;
  }
}