:root {
  --p-blue: #3464eb;
  --p-red: #d40000;
  --p-dblue: #051f66;
  --p-lblue: rgba(52, 100, 235, 0.1);
  --gray: #ccc;
  --lgray: #e0e0e0;
  --p-ltblue: #b0bfeb;
  --tranb: rgba(0, 0, 0, 0.6);
  --lb-highlight: rgba(34, 255, 0, 0.2);

  --pnh-blue: var(--p-blue);
  --pnh-red: var(--p-red);
  --pnh-gold: #ffb81c;
  --pnh-dark: #444;

  --tc-tab-border: var(--pnh-dark);
  --accent-color: var(--pnh-blue);
  --accent-text-color: #fff;
  --fontSize: 1.1rem;
  --oem-image-opacity: 1;
  --perf-image-opacity: 0;

  --tab-1-vis: none;
  --tab-2-vis: none;
  --tab-3-vis: none;
}

#wrapper:has(.performance-color.product-display) {
  --accent-color: var(--pnh-red);
  --accent-text-color: inherit;
}

#wrapper:has(.industrial-color.product-display) {
  --accent-color: var(--pnh-gold);
  --accent-text-color: var(--pnh-dark);
}

ul {
  list-style-type: none;
}

li:hover {
  box-shadow: unset;
}

.rounded {
  border-radius: 7px;
}

.hide {
  display: none;
}

.b {
  font-weight: bold;
}

.accent {
  color: var(--accent-color);
}

.accent-2 {
  color: var(--p-red);
}

.accent-3 {
  color: #ffb81c;
}

.big-text {
  font-size: 27px;
}

.b-u {
  padding-bottom: 3px;
  border-bottom: #000 1px solid;
}

.b-r {
  padding-bottom: 2px;
  border-bottom: var(--p-red) 1px solid;
}

.underline {
  padding-bottom: 3px;
  border-bottom: var(--p-red) 2px solid;
}

/* bootstrap changes */
.btn-primary {
  background-color: #3464eb;
}

.btn-danger {
  background-color: var(--p-red);
}

.header_alert {
  display: none;
  position: absolute !important;
  width: 100%;
}

.product-display {
  margin: 40px auto;
  font-size: 16px;
}

.product-display hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.7);
}

.big-picture {
  box-sizing: border-box;
  padding: 5px;
  border: #ccc 2px solid;
}

.big-picture img {
  width: 100%;
}

.thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 0 10px 0;
}

.thumbnails img {
  display: inline-block;
  width: 135px; /*100 80 33%*/
  height: 100px;
  max-width: 100%;
  border: #ccc 2px solid;
  margin: 3px;
}

.thumbnails img:focus,
.thumbnails img:active {
  border: #3464eb 2px solid;
}

.thumbnails img:hover {
  border-color: #3464eb;
  cursor: pointer;
}

.card-header img {
  float: right;
}

.card-header p {
  font-size: 20px;
}

.card-header ul {
  margin: 10px 0 0 20px;
  list-style-type: none;
  font-size: 18px;
}

.tc-info {
  border: var(--pnh-dark) 2px solid;
  font-size: 16px;
  font-weight: bold;
}

.tc-info h3 {
  margin: 0;
  padding: 10px 5px;
  background: #eee;
}

.tc-info .tops {
  padding-left: 0;
  padding-right: 0;
  border: #000 1px solid;
}
.tc-info .tops,
.tc-info .tops .field {
  text-align: center;
}

.tc-info .row {
  margin-left: 0;
  margin-right: 0;
}

.tc-info .field {
  padding-left: .25rem;
  padding-right: .25rem;
  background: #3464eb;
  color: #fff;
  text-align: right;
}

.tc-info .border {
  border: #000 1px solid !important;
}

@media (max-width: 992px) {
  .tc-info .field {
    text-align: left;
  }
}

.oem {
  font-weight: bold;
  margin-bottom: 20px;
}

.cogs li {
  display: flex;
  margin-bottom: 15px;
}

.cogs i {
  position: relative;
  top: -9px;
  margin: 0 20px 0 0;
  font-size: 30px;
}

ul.ship i {
  position: relative;
  top: 4px;
  margin-right: 1rem;
}

h1 {
  font-size: 35px;
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 15px;
}

.more-text {
  display: none;
}

.show-button:hover,
.hide-button:hover {
  cursor: pointer;
}

.details h3 {
  margin: 30px 0 20px 0;
}

.add_to_cart {
  color: #fff !important;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  background: #3464eb;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
}

.add_to_cart:hover {
  background: #434343;
  letter-spacing: 1px;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.4s ease 0s;
}

.in_cart {
  background: #df0000;
}

.in_cart:hover {
  background: #611414;
}

.number {
  cursor: pointer;
}

.minus,
.plus {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 4px;
  padding: 8px 5px 8px 5px;
  border: 1px solid #aaa;
  display: inline-block;
  vertical-align: middle;
  text-align: center;

  box-sizing: unset;
  line-height: 20px;
}

.number input {
  height: 34px;
  width: 100px;
  background: #fff;
  text-align: center;
  font-size: 26px;
  border: 1px solid #aaa;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;

  placeholder: unset;
  color: #000;
}

/* accordion */
.accordion-container {
  position: relative;
  margin: 10px auto;
}

.accordion-block {
  position: relative;
  width: 100%;
  background-color: var(--accent-color);
  color: var(--accent-text-color);
}

#performance_cart_options .accordion-block {
  background-color: var(--pnh-red);
  color: #fff;
}

#standard_cart_options .accordion-block {
  background-color: var(--pnh-blue);
  color: #fff;
}

.accordion-block > a {
  display: block;
  padding: 10px 15px;
  font-size: var(--fontSize);
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.accordion-block > a i {
  position: absolute;
  top: -0.2rem;
  right: 1rem;
  font-size: 2.2rem;
}
.accordion-block > a.active {
  background-color: var(--pnh-dark);
  color: #fff;
}
.accordion-content {
  padding: 20px 0 15px 30px;
  color: var(--pnh-dark);
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display: none;
}
.accordion-content p {
  padding: 10px 15px;
  margin: 0;
}
.icon-plus-sign:before {
  content: "\e70c";
}
.icon-minus-sign:before {
  content: "\e70d";
}

.accordion-content.highlight li {
  padding: 10px 0 10px 10px;
  margin: 0;
}

.accordion-content.highlight li:nth-child(odd) {
  background-color: rgba(52, 100, 235, 0.2);
}

.accordion-content.highlight li:nth-child(even) {
  background-color: #eee;
}

.accordion-content.highlight li .b {
  font-size: 20px;
}

.accordion-content.highlight li .adjust {
  position: relative;
  top: -2px;
}

.testimonials {
  margin-top: 50px;
}

.testimonials .company {
  font-size: 20px;
}

.testimonials p {
  font-size: 16px;
}

.testimonials h2,
.testimony {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  .card-header img {
    display: block;
    float: unset;
    margin: 0 auto;
  }

  .card-header ul {
    margin: 0;
  }

  .accordion-content {
    padding: 20px 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: none;
  }

  .testimonials .company {
    font-size: 16px;
  }
  .testimonials .big-text {
    font-size: 20px;
    font-weight: bold;
  }
}

@media screen and (max-width: 576px) {
  h3 {
    font-size: 20px;
  }

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

.blue_u {
  padding-bottom: 1px;
  border-bottom: #3464eb 2px solid;
}

.red_u {
  padding-bottom: 1px;
  border-bottom: var(--p-red) 2px solid;
}

.tc_quantity .tc_label {
  font-weight: bold;
  font-size: 1.2rem;
}

.tc_quantity input {
  width: 60px;
}

.tc_quantity .add_item {
  font-size: 30px;
  line-height: 30px;
}

.tc_quantity .remove_item {
  font-size: 30px;
  line-height: 30px;
}

.tc_quantity .remove_item div {
  margin-top: -5px;
}

.tc_quantity .add_item,
.tc_quantity .remove_item {
  width: 35px;
  height: 35px;
  overflow: hidden;
}

/* shopping cart */
.shopping_cart {
  min-height: 40vh;
}
.shopping_cart .card-body > .row {
  border-bottom: #000 3px solid;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
}
.shopping_cart .card-body > .row:nth-child(odd) {
  background-color: var(--p-ltblue);
}
.shopping_cart .card-body > .row:nth-child(even) {
  background-color: var(--lgray);
}
.shopping_cart .card-body > .row:hover {
  background-color: var(--lb-highlight);
}
.shopping_cart .card-body > .row:hover .text-success {
  color: var(--p-blue) !important;
}
.shopping_cart .card-body > .row:last-child {
  margin-bottom: 0 !important;
}

ul.item_stats {
  padding-left: 1.5rem;
  list-style-type: circle;
}

.shopping_cart_buttons {
  display: flex;
  flex-wrap: wrap;
}

.shopping_cart_buttons .btn {
  flex-basis: 100%;
}

/* checkout */

@media only screen and (min-width: 768px) {
  .shopping_cart .card-body > .row {
    border-bottom: #000 1px solid;
    margin-bottom: 0.7rem;
    padding-bottom: unset;
  }

  .shopping_cart .column {
    border-right: var(--lgray) 2px solid;
  }
  .shopping_cart .card-body > .row:nth-child(even) .column {
    border-right: var(--p-ltblue) 2px solid;
  }
  .shopping_cart .column:last-child {
    border-left: none;
  }
  .sc_qty_con {
    text-align: center;
  }
  .sc_qty {
    max-width: 70px;
    flex-flow: wrap;
    margin: 0 auto;
  }
  .sc_qty input {
    flex-basis: 100%;
  }
  .sc_qty .btn {
    flex-basis: 50%;
  }
  .shopping_cart .options {
    display: flex;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 992px) {
  .sc_qty_con {
    padding-left: 0.25rem !important;
    padding-right: 0 !important;
  }
  #orderNotes {
    height: 200px;
  }
}

/* core options radio button */
.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
  display: flex;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #d1d3d4;
  font-weight: normal;

  /* unset crazy css */
  font-size: 1rem;
  font-weight: normal;
  font-family: inherit;
  text-transform: none;
  letter-spacing: unset;
  color: #000;
  margin-bottom: unset;
  cursor: pointer;
}

.funkyradio label > span {
  margin-left: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  /* line-height: 2.5em; */
  /* text-indent: 3.25em; */
  margin-bottom: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: relative;
  flex-shrink: 0;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: "";
  width: 2.5em;
  background: #d1d3d4;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #000;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: "\2714";
  text-indent: 0.9em;
  padding-top: 0.5rem;
  color: #000;
  background-color: #fff;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #000;
  background-color: #fff;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: "\2714";
  text-indent: 0.9em;
  padding-top: 0.5rem;
  color: #333;
  background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: var(--p-blue);
}

#performance_build
  .funkyradio-default
  input[type="radio"]:checked
  ~ label:before,
#performance_build
  .funkyradio-default
  input[type="checkbox"]:checked
  ~ label:before {
  color: #fff;
  background-color: var(--p-red);
}

/* odering options */
.options-btn {
  background: #3464eb;
  color: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 0.5rem 1rem;
  border: 0;
  transition: all 0.5s;
  border-radius: 10px;
  width: auto;
  position: relative;
}

#btn_performance_options {
  background: var(--p-red);
}

.options-btn::after {
  content: "\e72f";
  font-family: "font-icons";
  font-weight: bold;
  position: absolute;
  right: 5px;
  top: 49%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.options-btn:hover {
  background: #28a745;
  transition: all 0.5s;
  border-radius: 10px;
  box-shadow: 0px 6px 15px #28a745;
  padding: 0.7rem 2.7rem 0.7rem 1.2rem;
  color: #fff;
}

#btn_performance_options:hover {
  background: #28a745;
}

.options-btn:hover::after {
  opacity: 1;
  transition: all 0.5s;
  color: #ffffff;
}

/* perf option list */
.ptc_options li {
  margin-bottom: 0;
  padding: 0.5rem 1.25rem 0 1.25rem;
}

@media (min-width: 992px) {
  .ptc_options {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .ptc_options li {
    display: flex;
    width: 50%;
  }

  .perf_features {
    columns: 2;
  }
}

/*@media (min-width: 1200px) {
  .ptc_options li{
    width: 33%;
  }
}
*/
@media (min-width: 1200px) {
  .ptc_options li {
    width: 50% !important;
  }
}

.ptc_options li {
  margin-bottom: 0;
  padding: 0.5rem 0.25rem 4px 0 0.25rem;
}

.ptc_options i.bi {
  color: var(--p-red);
}

.ptc_options a {
  text-decoration: underline !important;
}

/* converter info page testimony */
@font-face {
  font-family: "Romantica";
  src: url("/info/Romantica.ttf");
  font-display: swap;
}

.testimony {
  background: #ccc;
  padding: 20px 5% 20px 5%;
  border-radius: 40px;
}

.black-box {
  display: inline-block;
  position: relative;
  top: -40px;
  background-color: #333;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.company {
  font-family: "Didot", serif;
  font-size: 35px;
}

.signature {
  font-family: "Romantica", "Arial";
  font-size: 50px;
  font-weight: bold;
}

.main-image,
.no-image {
  width: 300px;
  height: 200px;
  max-width: 100%;
  border-radius: 40px;
  margin: 0 auto;
  display: block;
  border: #eee 5px solid;
}

.no-image {
  font-size: 100px;
  line-height: 200px;
  background: #3464eb;
  color: #fff;
  text-align: center;
}

.testimony-text {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 18px;
}

.testimony-text p {
  margin-bottom: 10px;
}

@media screen and (max-width: 576px) {
  .company {
    font-size: 25px;
  }

  .signature {
    font-size: 30px;
  }
}

@media screen and (min-width: 992px) {
  .black-box {
    left: -40px;
  }
}

/* new version */
p {
  margin: unset;
  margin-bottom: 1rem;
}

.list {
  --fontSize: 1rem;
  --lineHeight: 1.6;
  --iconSize: calc(var(--fontSize) * 2);
  --baselineDistance: calc(var(--fontSize) * var(--lineHeight));
  --iconOffset: calc((var(--baselineDistance) - var(--iconSize)) * 0.5);
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  list-style: none;
  padding-left: 0;
}

.list__item {
  margin-bottom: 2rem;
  position: relative;
}

.list__item::before {
  font-family: bootstrap-icons;
  color: #d40000;
  display: inline-block;
  font-size: var(--iconSize);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.list--before .list__item {
  padding-left: 60px;
  text-indent: -30px;
}

.list--before .list__item::before {
  margin-right: 22px;
}

.list--after .list__item {
  padding-left: calc(var(--iconSize) + 0.5em);
}

.list--after .list__item::before {
  left: 0;
  position: absolute;
  top: var(--iconOffset);
}

.list__item P:first-of-type {
  font-size: 1.2rem;
  font-style: italic;
  margin-top: 1rem;
  padding: 0.7rem 8px;
  text-align: center;
  background: linear-gradient(#3464eb 0 0) top right / max(70px, 10%) 2px,
    linear-gradient(#3464eb 0 0) right top / 2px 60%,
    linear-gradient(#3464eb 0 0) bottom left / max(70px, 10%) 2px,
    linear-gradient(#3464eb 0 0) left bottom / 2px 60%;
  background-repeat: no-repeat;
}

@media (min-width: 576px) {
  .list__item P:first-of-type {
    text-align: left;
    padding: 0 1rem 5px 1rem;
    background: linear-gradient(#aaa 0 0) bottom left / max(70px, 10%) 2px,
      linear-gradient(#aaa 0 0) left bottom / 2px 20px;
    background-repeat: no-repeat;
  }
}

/*perf upgrade content format*/

.upgrade-title {
  position: relative;
  font-size: 1.3rem;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 0.7rem;
  border-bottom: 3px solid #d40000;
}

.upgrade-title::after {
  display: none;
  position: absolute;
  top: 50%;
  line-height: 0;
  font-family: bootstrap-icons;
  font-size: calc(var(--iconSize) * 1.2);
  content: "\F63B";
  font-style: italic;
  font-weight: lighter;
  color: #3464eb;
}

@media (min-width: 576px) {
  .upgrade-title::after {
    display: initial;
  }
}

.pnh-blue {
  color: #3464eb;
}

.perf-red {
  color: #d40000;
}

.perf-hr {
  width: 50%;
  margin: 1.2rem auto;
  border-top: 2px solid #555;
}

/* parallax */
.perf-parallax {
  overflow: auto;
  width: 100%;
  margin-bottom: 1rem;
  background: linear-gradient(
    to bottom,
    rgba(51, 51, 51, 1) 35%,
    rgba(212, 0, 0, 1) 50%,
    rgba(51, 51, 51, 1) 65%
  );
  background-attachment: fixed;
  background-size: 100% 90%;
  background-position: 0px 200%;
}

.perf-parallax .para-content-wrap {
  margin: 2.5rem auto;
  color: #fff;
  text-align: center;
}

.para-content-wrap .perf-hr {
  margin: 2.5rem auto;
  border-color: #fff;
  width: 50%;
}

.red-underline-text {
  text-decoration: underline;
  text-decoration-color: #d40000;
  text-decoration-thickness: 2px;
}

/*perf upgrade options icons*/
.specific-upgrade-feature::before {
  content: "\F4B6";
}

.tc-tabs nav,
.tc-tabs nav * {
  all: unset;
}

.tc-tabs nav div {
  display: block;
}

/* .tc-tabs:has(#menu_button_2:checked) {
        --oem-image-opacity: 0;
        --perf-image-opacity: 1;
    }

    .tc-tabs:has(#menu_button_2:not(:checked)) {
        --oem-image-opacity: 1;
        --perf-image-opacity: 0;
    } */

#oem_picture {
  position: relative;
  opacity: var(--oem-image-opacity);
  min-height: calc(400px + 1.5rem);
  z-index: 2;
}

#performance_picture {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: var(--perf-image-opacity);
  z-index: var(--perf-image-opacity);
}

label {
  all: unset;
}

.dark-texture-bg {
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(
      #1d1d1d 25%,
      #1a1a1a 25%,
      #1a1a1a 50%,
      transparent 50%,
      transparent 75%,
      #242424 75%,
      #242424
    );
  background-color: #131313;
  background-size: 20px 20px;
}

.tc-tabs {
  /* tab switching vars */

  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}

/* radio switches */
.tc-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  left: -9999;
}

.primary-row:has(.tc-tabs-list li:nth-of-type(1) input[type="radio"]:checked) {
  --tab-1-vis: block;
  --tc-tab-border: var(--pnh-blue);

  --oem-image-opacity: 1;
  --perf-image-opacity: 0;
}

.primary-row:has(.tc-tabs-list li:nth-of-type(2) input[type="radio"]:checked) {
  --tab-2-vis: block;
  --tc-tab-border: var(--pnh-red);

  --oem-image-opacity: 0;
  --perf-image-opacity: 1;
}

.primary-row:has(.tc-tabs-list li:nth-of-type(3) input[type="radio"]:checked) {
  --tab-3-vis: block;
  --tc-tab-border: var(--pnh-dark);

  --oem-image-opacity: 1;
  --perf-image-opacity: 0;
}

.tc-tabs .tc-tab-content :is(h1, h2, h3, h4, h5, h6) {
  color: #444;
}

.tc-tabs .tc-tab-content {
  font-size: var(--fontSize);
  color: #555;
  border: 2px solid var(--tc-tab-border);
  border-bottom-left-radius: 0.7rem;
  border-bottom-right-radius: 0.7rem;
  border-top: none;
}

.tc-tabs .tc-tab-content section {
  padding: 0.5rem;
  overflow: auto;
}

.tc-tabs .tc-tab-content p {
  margin-bottom: 1rem;
}

/* tab section visibility */
.tc-tabs .tc-tab-content section:nth-of-type(1) {
  display: var(--tab-1-vis);
}

.tc-tabs .tc-tab-content section:nth-of-type(2) {
  display: var(--tab-2-vis);
}

.tc-tabs .tc-tab-content section:nth-of-type(3) {
  display: var(--tab-3-vis);
}

.tc-tab-content .underline-element {
  border-bottom: var(--tc-tab-border) 2px solid;
  padding-bottom: 1px;
}

.tc-tabs nav ul {
  position: relative;
  display: flex;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  flex-flow: row wrap;
  justify-content: center;
}

.tc-tabs nav ul li {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  text-align: center;
  flex: 1;
}

.tc-tabs nav label {
  position: relative;
  display: block;
  padding: 0.25rem 0.25rem;
  overflow: hidden;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  cursor: pointer;
}

.tc-tabs nav label span {
  vertical-align: middle;
}

.tc-tabs nav label:focus {
  outline: none;
}

.tc-tabs nav li {
  background-color: #fff;
  border: 2px solid var(--pnh-dark);
  border-top-left-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
  border-bottom: 2px solid var(--tc-tab-border) !important;
  user-select: none;
  transition: background-color 0.4s ease;
}

.tc-tabs nav li:not(:last-child) {
  border-right: none;
}

.tc-tab-content .tab-btn {
  font-size: var(--fontSize);
  font-weight: bold;
}

.tc-tab-content .tab-btn:not(:hover) {
  background-color: #fff;
}

.tc-tabs nav li:nth-of-type(1) {
  --tab-bg-color: var(--pnh-blue);
  border: 2px solid var(--pnh-blue);
}

.tc-tabs nav li:nth-of-type(2) {
  --tab-bg-color: var(--pnh-red);
  border: 2px solid var(--pnh-red);
}

.tc-tabs nav li:nth-of-type(3) {
  --tab-bg-color: var(--pnh-dark);
  border: 2px solid var(--pnh-dark);
}

/* .tc-tabs nav li {
  background: none;
  border-bottom: 2px solid var(--tc-tab-border) !important;
  user-select: none;
  transition: background-color 0.4s ease;
} */

.tc-tabs nav li:hover {
  color: #fff;
  background-color: var(--tab-bg-color);
}

.tc-tabs nav li:has(input[type="radio"]:checked) {
  background: var(--tc-tab-border);
  color: #fff;
  border-bottom: none;
}

/* tc-tabs converter stats box */
.tc-tab-stats {
  border-color: var(--pnh-dark);
  border-radius: 0.7rem;
  overflow: hidden;
}

.tc-tab-stats .field {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pnh-dark);
  border-bottom: #fff 1px solid;
}

.tc-tab-stats .right-column {
  background: #fff;
  border: none;
}

.tc-tab-stats .field {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pnh-dark);
  border-bottom: none;
}

@media (min-width: 992px) {
  .tc-tab-stats .field {
    border-bottom: #fff 1px solid;
  }

  .tc-tab-stats .right-column {
    border-top: #000 2px solid;
  }

  .tc-tab-stats .right-column.top {
    border-top: none;
  }
}

/* list-modified bulleted list */
.list-modified {
  --lineHeight: 1.6;
  --modifiedize: calc(var(--fontSize) * 1.5);
  --baselineDistance: calc(var(--fontSize) * var(--lineHeight));
  --modifiedOffset: calc((var(--baselineDistance) - var(--modifiedize)) * 0.5);

  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  list-style: none;
  padding-left: 0;
}

.list-modified li {
  margin-bottom: 1rem;
  position: relative;
}

.list-modified li::before {
  font-family: bootstrap-icons;
  content: "\F3E5";
  color: var(--tc-tab-border);
  display: inline-block;
  font-size: var(--modifiedize);
  font-weight: bold;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.list-modified-before li {
  padding-left: 60px;
  text-indent: -30px;
}

.list-modified-before li::before {
  margin-right: 22px;
}

.list-modified-after li {
  padding-left: calc(var(--modifiedize) + 0.5em);
}

.list-modified-after li::before {
  left: 0;
  position: absolute;
  top: var(--modifiedOffset);
}

@media (min-width: 992px) {
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  gap: 15px;
  padding-right: 0;
  padding-left: 0;
}

.tab-btn::before,
.tab-btn::after {
  content: "";
}

.tab-btn i {
  flex: 1 0;
}

.tab-btn span {
  flex: 0 1 300px;
}