﻿body {
  font-family: Calibri;
  font-size: 18px;
  color: darkblue;
  background-color: #ffff99;
  padding: 0;
}

select.fps {
  font-size: 1.2em;
  font-weight: bold;
}


a:link {
  text-decoration: none;
  color: #FFFF99;
}

a:visited {
  text-decoration: none;
  color: #CCFF33;
}

a:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a:active {
  text-decoration: none;
  color: #FFFF99;
}

a.header:link {
  text-decoration: none;
  color: #CCFF33;
}

a.header:visited {
  text-decoration: none;
  color: #CCFF33;
}

a.header:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a.header:active {
  text-decoration: none;
  color: #FFFF99;
}

a.radio:link {
  text-decoration: none;
  color: #4aa1f9;
}

a.radio:visited {
  text-decoration: none;
  color: #CC99FF;
}

a.radio:hover {
  color: #4aa1f9;
  background-color: #FFFF99;
  text-decoration: none;
}

a.radio:active {
  text-decoration: none;
  color: #4aa1f9;
}

a.servicess:link {
  text-decoration: none;
  color: #000099;
}

a.servicess:visited {
  text-decoration: none;
  color: #FFCCFF;
}

a.servicess:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a.servicess:active {
  text-decoration: none;
  color: #000099;
}

a.topcenter:link {
  text-decoration: none;
  color: #000099;
}

a.topcenter:visited {
  text-decoration: none;
  color: #FFFF99;
}

a.topcenter:hover {
  color: #CC99FF;
  background-color: #FFFF99;
  text-decoration: none;
}

a.topcenter:active {
  text-decoration: none;
  color: #000099;
}

a.page:link {
  text-decoration: none;
  color: #FFFF99;
}

a.page:visited {
  text-decoration: none;
  color: #FFCCFF;
}

a.page:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a.page:active {
  text-decoration: none;
  color: #FFFF99;
}

a.page1:link {
  text-decoration: none;
  color: #FFFF99;
}

a.page1:visited {
  text-decoration: none;
  color: #FFFFFF;
}

a.page1:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a.page1:active {
  text-decoration: none;
  color: #FFFF99;
}

a.page2:link {
  text-decoration: none;
  color: #7ed0ff;
}

a.page2:visited {
  text-decoration: none;
  color: #45ec41;
}

a.page2:hover {
  color: #CC99FF;
  background-color: #FFFF99;
  text-decoration: none;
}

a.page2:active {
  text-decoration: none;
  color: #000099;
}

a.page3:link {
  text-decoration: none;
  color: #FFA07A;
}

a.page3:visited {
  text-decoration: none;
  color: #FFA07A;
}

a.page3:hover {
  color: #CC99FF;
  background-color: #FFFF99;
  text-decoration: none;
}

a.page3:active {
  text-decoration: none;
  color: #000099;
}

a.book:hover {
  background-color: #CC99FF;
  text-decoration: none;
  background-color: transparent;
}

a.page4:link {
  text-decoration: none;
  color: #C00;
}

a.page4:visited {
  text-decoration: underline;
  color: #F00;
}

a.page4:hover {
  color: #C00;
  background-color: #FFFF99;
}

a.page4:active {
  text-decoration: underline;
  color: #C00;
}

a.page5:link {
  text-decoration: underline;
  color: #008000;
}

a.page5:visited {
  text-decoration: underline;
  color: #008000;
}

a.page5:hover {
  color: #FF4500;
  background-color: #ADFF2F;
}

a.page5:active {
  text-decoration: underline;
  color: #008000;
}

a.page6:link {
  text-decoration: none;
  color: #000099;
}

a.page6:visited {
  text-decoration: none;
  color: #0000FF;
}

a.page6:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a.page6:active {
  text-decoration: none;
  color: #000099;
}

a.hyperlnk:link {
  text-decoration: none;
  color: #6600CC;
}

a.hyperlnk:visited {
  text-decoration: none;
  color: #9400D3;
}

a.hyperlnk:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a.hyperlnk:active {
  text-decoration: none;
  color: #6600CC;
}

a.tpages:link {
  text-decoration: none;
  color: #FFFF99;
  font-family: Calibri;
  font-size: 16px;
}

a.tpages:active {
  text-decoration: none;
  color: #FFFF99;
  font-family: Calibri;
  font-size: 16px;
}

a.tpages:visited {
  text-decoration: none;
  color: #FFCCFF;
  font-family: Calibri;
  font-size: 16px;
}

a.tpages:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
  font-family: Calibri;
  font-size: 16px;
}

ul {
  padding-top: 0px;
  margin: 0px;
}

ul.circle {
  list-style-type: circle;
  padding-top: 0px;
  margin: 0px;
}

ul.square {
  list-style-type: square;
  padding-top: 0px;
  margin: 0px;
}

ul.none1 {
  list-style-type: none;
  padding-top: 0px;
  margin: 0px;
  padding-left: 10px;
}

ul.none2 {
  list-style-type: none;
  padding-top: 0px;
  margin: 0px;
  padding-left: 30px;
}

ul.star {
  list-style-image: url('images/star.gif');
  padding-top: 0px;
  margin: 0px;
}

ul.arrow {
  list-style-image: url('images/arrow.gif');
  padding-top: 0px;
  margin: 0px;
}

ul.arrow-red {
  list-style-image: url('images/arrow2.gif');
  padding-top: 0px;
  margin: 0px;
}

ol.upper-roman {
  list-style-type: upper-roman;
  padding: 0px;
  margin: 0px;
}

ol.lower-alpha {
  list-style-type: lower-alpha;
  padding: 0px;
  margin: 0px;
}

ol.decimal {
  list-style-type: decimal;
  padding-top: 0px;
  margin-left: 0px;
}

ol.decimal-leading-zero {
  list-style-type: decimal-leading-zero;
  padding: 0px;
  margin: 0px;
}

li.disc {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 30px;
  padding-bottom: 5px;
}

li.square {
  list-style-type: square;
  padding-left: 10px;
  padding-bottom: 5px;
}

li.circle {
  list-style-type: circle;
  padding-left: 10px;
  padding-bottom: 5px;
}

li.arrow {
  background-image: url('images/arrow.gif');
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 30px;
  padding-bottom: 8px;
}

li.arrow2 {
  background-image: url('images/arrow2.gif');
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 30px;
  padding-bottom: 5px;
}

li.heart {
  background-image: url('images/heart.gif');
  background-repeat: no-repeat;
  background-position: 0px 1px;
  padding-left: 30px;
  padding-bottom: 8px;
}

li.star {
  background-image: url('images/star.gif');
  background-repeat: no-repeat;
  background-position: 0px 3px;
  padding-left: 30px;
  padding-bottom: 8px;
}

li.decimal {
  list-style-type: decimal;
  padding-left: 10px;
  padding-bottom: 5px;
}

span.atpage {
  font-family: Cambria;
  font-size: 18.5px;
  color: #000099;
}

span.atpages {
  font-family: Calibri;
  font-size: 16px;
}


span.tenbarial {
  font-family: Arial;
  font-size: 15px;
  color: #000099;
}

span.fifteenyarial {
  font-family: Arial;
  font-size: 21px;
  color: #ffffcc;
}

span.sevenpfivebcalibri {
  font-family: Calibri;
  font-size: 11px;
  color: #000099;
}

span.ninebcalibri {
  font-family: Calibri;
  font-size: 12px;
  color: #000099;
}

span.tencalibri {
  font-family: Calibri;
  font-size: 14px;
}

span.tenbcalibri {
  font-family: Calibri;
  font-size: 14px;
  color: #000099;
}


span.elevencalibri {
  font-family: Calibri;
  font-size: 16px;
}

span.elevenblucida {
  font-family: Lucida Calligraphy;
  font-size: 16px;
  color: #000099;
}

span.elevenbcalibri {
  font-family: Calibri;
  font-size: 16px;
  color: #000099;
}

span.elevenpcalibri {
  font-family: Calibri;
  font-size: 16px;
  color: #6600cc;
}

span.elevenbcambria {
  font-family: Calibri;
  font-size: 16px;
  color: #000099;
}

span.twelvewcalibri {
  font-family: Calibri;
  font-size: 17.5px;
  color: #ffffff;
}

span.twelvepcalibri {
  font-family: Calibri;
  font-size: 17.5px;
  color: #6600cc;
}

span.twelvecalibri {
  font-family: Calibri;
  font-size: 17.5px;
}

span.twelveycalibri {
  font-family: Calibri;
  font-size: 17.5px;
  color: #ffff99;
}

span.twelvecambria {
  font-family: Cambria;
  font-size: 17.5px;
}

span.twelvebcalibri {
  font-family: Calibri;
  font-size: 17.5px;
  color: #000099;
}

span.twelvebcambria {
  font-family: Cambria;
  font-size: 17.5px;
  color: #000099;
}

span.twelveblucida {
  font-family: Lucida Calligraphy;
  font-size: 16px;
  color: #000099;
}

span.twelveparial {
  font-family: Arial;
  font-size: 17.5px;
  color: #6600cc;
}

span.fourteenbcalibri {
  font-family: Calibri;
  font-size: 18px;
  color: #000099;
}

.fourteenbcalibri {
  font-family: Calibri;
  font-size: 18px;
  color: #000099;
}

span.thirteenpfivebarialt {
  font-family: Arial Rounded MT Bold;
  font-size: 18px;
  color: #000099;
}

span.thirteenpfivebarial {
  font-family: Arial;
  font-size: 18px;
  color: #000099;
}

span.thirteenpfivebcalibri {
  font-family: Calibri;
  font-size: 18px;
  color: #000099;
}

span.thirteenpfivepcalibri {
  font-family: Calibri;
  font-size: 18px;
  color: #6600cc;
}

span.thirteenpfiveycalibri {
  font-family: Calibri;
  font-size: 18px;
  color: #ffff99;
}

span.thirteenpfivecalibri {
  font-family: Calibri;
  font-size: 18px;
}

span.fourteenblucida {
  font-family: Lucida Calligraphy;
  font-size: 18.5px;
  color: #000099;
}

span.fourteencalibri {
  font-family: Calibri;
  font-size: 20.5px;
}

span.fourteencambria {
  font-family: Cambria;
  font-size: 19px;
}

span.fourteenrcalibri {
  font-family: Calibri;
  font-size: 19px;
  color: #8064a2;
}

span.fourteenbcalibri {
  font-family: Calibri;
  font-size: 20.5px;
  color: #000099;
}

span.fourteenrcambria {
  font-family: Cambria;
  font-size: 19px;
  color: #8064a2;
}

span.fourteenbcambria {
  font-family: Cambria;
  font-size: 19px;
  color: #000099;
}

span.fourteenarial {
  font-family: Arial;
  font-size: 19px;
}

span.fifteencalibri {
  font-family: Calibri;
  font-size: 21px;
}

span.fifteenpcalibri {
  font-family: Calibri;
  font-size: 21px;
  color: #6600cc;
}

span.fifteenwcalibri {
  font-family: Calibri;
  font-size: 21px;
  color: #ffffff;
}

span.fifteenbcalibri {
  font-family: Calibri;
  font-size: 21px;
  color: #000099;
}

span.fifteenbcambria {
  font-family: Cambria;
  font-size: 21px;
  color: #000099;
}

span.sixteencalibri {
  font-family: Calibri;
  font-size: 21px;
}

span.sixteencambria {
  font-family: Cambria;
  font-size: 23.5px;
}

span.sixteenrcalibri {
  font-family: Calibri;
  font-size: 21px;
  color: #8064a2;
}

span.sixteenbcalibri {
  font-family: Calibri;
  font-size: 21px;
  color: #000099;
}

span.sixteenbbcalibri {
  font-family: Calibri;
  font-size: 23.5px;
  color: #000099;
}

span.sixteenfbcalibri {
  font-family: Calibri;
  font-size: 24px;
  color: #000099;
}

span.sixteenrcambria {
  font-family: Cambria;
  font-size: 21px;
  color: #8064a2;
}

span.sixteenbcambria {
  font-family: Cambria;
  font-size: 23.5px;
  color: #000099;
}

span.eighteencambria {
  font-family: Cambria;
  font-size: 26.5px;
}

span.eighteencalibri {
  font-family: Calibri;
  font-size: 26.5px;
}


span.eighteenrcalibri {
  font-family: Calibri;
  font-size: 26.5px;
  color: #8064a2;
}

span.eighteenbcalibri {
  font-family: Calibri;
  font-size: 26.5px;
  color: #000099;
}

span.eighteenrcambria {
  font-family: Cambria;
  font-size: 26.5px;
  color: #8064a2;
}

span.eighteenbcambria {
  font-family: Cambria;
  font-size: 24px;
  color: #000099;
}

span.twentyfourbcalibri {
  font-family: Calibri;
  font-size: 32px;
  color: #000099;
}

span.twentyfourbcambria {
  font-family: Cambria;
  font-size: 32px;
  color: #000099;
}

span.twentyeightpedward {
  font-family: Edwardian Script ITC;
  font-size: 37.5px;
  color: #FFCCFF;
}

span.twentyeightyedward {
  font-family: Edwardian Script ITC;
  font-size: 37.5px;
  color: #FFFFCC;
}

span.thirtyoedward {
  font-family: Edwardian Script ITC;
  font-size: 39px;
  color: #FFDC6D;
}

span.thirtysixyoblackchancery {
  font-family: Black Chancery;
  font-size: 48.5px;
  color: #FFDC6D;
}

span.thirtysixyedward {
  font-family: Edwardian Script ITC;
  font-size: 48.5px;
  color: #FFFFCC;
}

span.thirtysixpedward {
  font-family: Edwardian Script ITC;
  font-size: 48.5px;
  color: #FFCCFF;
}

span.thirtysixpuedward {
  font-family: Edwardian Script ITC;
  font-size: 48.5px;
  color: #6600cc;
}

span.thirtysixwhedward {
  font-family: Edwardian Script ITC;
  font-size: 48.5px;
  color: #ffffff;
}

span.al {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.mh1,
.mh2,
.mh3,
.mh4,
.mh5 {
  font-family: Cambria;
  font-size: 17px;
  border-style: solid;
  padding: 7px;
  border-width: 2px;
}

.mh0 {
  font-family: Cambria;
  font-size: 17px;
  color: #ffa058;
}

.mh1 {
  color: #ff6d00;
  background-color: #ffffb4;
  border-color: #ff6d00;
}

.mh2 {
  color: #ee67ee;
  background-color: #eecaee;
  border-color: #ee67ee;
}

.mh3 {
  color: #5fa84b;
  background-color: #cfefc7;
  border-color: #5fa84b;
}

.mh4 {
  background-color: #F5DEB3;
  border-color: #964B00;
  color: #964B00;
}

.mh5 {
  background-color: #ffcdbb;
  border-color: #ff713c;
  color: #ff713c;
}

/****************************
 * text size in pt(points)  *
 ****************************/
span.twelveptcalibri {
  font-family: Calibri;
  font-size: 12pt;
  color: #000099;
}

span.thirteenptcalibri {
  font-family: Calibri;
  font-size: 13pt;
  color: #000099;
}

span.fourteenptcalibri {
  font-family: Calibri;
  font-size: 14pt;
  color: #000099;
}

span.fifteenptcalibri {
  font-family: Calibri;
  font-size: 15pt;
  color: #000099;
}

span.sixteenptcalibri {
  font-family: Calibri;
  font-size: 16pt;
  color: #000099;
}

span.seventeenptcalibri {
  font-family: Calibri;
  font-size: 17pt;
  color: #000099;
}

span.eightteenptcalibri {
  font-family: Calibri;
  font-size: 18pt;
  color: #000099;
}



/*****************/
/* cambria fonts */
/*****************/
span.twelveptCambria {
  font-family: Cambria;
  font-size: 12pt;
  color: #000099;
}

span.thirteenptCambria {
  font-family: Cambria;
  font-size: 13pt;
  color: #000099;
}

span.fourteenptCambria {
  font-family: Cambria;
  font-size: 14pt;
  color: #000099;
}

span.fifteenptCambria {
  font-family: Cambria;
  font-size: 15pt;
  color: #000099;
}

span.sixteenptCambria {
  font-family: Cambria;
  font-size: 16pt;
  color: #000099;
}

span.seventeenptCambria {
  font-family: Cambria;
  font-size: 17pt;
  color: #000099;
}

span.eightteenptCambria {
  font-family: Cambria;
  font-size: 18pt;
  color: #000099;
}





/* Pragraph definitions */

p.PCBCalibri14,
li.PCBCalibri14,
div.PCBCalibri14 {
  margin: 0in;
  margin-bottom: 0in;
  text-align: center;
  font-size: 16.0pt;
  font-family: Calibri;
  color: blue;
  font-weight: bold;
}


p.PCBCalibri16,
li.PCBCalibri16,
div.PCBCalibri16 {
  margin: 0in;
  margin-bottom: 0in;
  text-align: center;
  font-size: 16.0pt;
  font-family: Calibri;
  color: blue;
  font-weight: bold;
}

p.PJCalibri14,
li.PJCalibri14,
div.PJCalibri14 {
  margin-top: 0in;
  margin-right: 0in;
  margin-bottom: 6.0pt;
  margin-left: 0in;
  text-align: justify;
  font-size: 22.0pt;
  font-family: Calibri;
  color: #000099;
}

p.MsoNoSpacing,
li.MsoNoSpacing,
div.MsoNoSpacing {
  mso-style-priority: 1;
  mso-style-unhide: no;
  mso-style-qformat: yes;
  mso-style-parent: "";
  margin: 0in;
  margin-bottom: .0001pt;
  mso-pagination: widow-orphan;
  font-size: 11.0pt;
  font-family: "Calibri", "sans-serif";
  mso-fareast-font-family: "Times New Roman";
  mso-bidi-font-family: "Times New Roman";
}

p.ClsNoSpacing,
li.ClsNoSpacing,
div.ClsNoSpacing {
  margin: 0in;
  margin-bottom: .0001pt;
  font-family: "Calibri", "sans-serif";
}





.mainContent {
  background-color: #FFFFFF;
  padding-left: 10px;
  padding-top: 10px;
  background-image: url(images_global/content_corner.gif);
  background-repeat: no-repeat;
  padding-right: 15px;
}

.mainContent h1 {
  font-family: Calibri;
  font-weight: normal;
  padding-bottom: 0px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #CE0000;
  padding-top: 0px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #CC0000;
  margin-top: 0px;
}

.date {
  font-family: Calibri;
  font-size: 10px;
  color: #000000;
  margin-top: 0px;
  text-align: left;
  padding-left: 20px;
  padding-top: 3px;
}


.copyright {
  font-family: Calibri;
  font-size: 10px;
  font-style: italic;
  border-top-width: thin;
  border-top-style: dotted;
  border-top-color: #333333;
  background-color: #999999;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #333333;
  clear: both;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-top: 1px;
}

.tagline {
  font-family: Calibri;
  font-size: 10px;
  font-style: italic;
}

.productTable th {
  font-family: Calibri;
  font-size: 0.9em;
  font-weight: bold;
  text-align: left;
  padding: 1px 1px 1px 2px;
  color: #666666;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-style: solid;
  border-left-style: solid;
  border-bottom-color: #333333;
  border-left-color: #333333;
  background-color: #EAEAEA;
}

.productInfo {
  font-family: Calibri;
  font-size: 1.1em;
  color: #006633;
  font-weight: bold;
  background-color: #faf3ba;
}

.product-presentUnlim {
  background-color: #d7edcc;
}

.product-sevenGen {
  background-color: #e4d5f9;
}

.product-barcode {
  background-color: #c2d9f5;
}

.productTable td {
  padding-top: 10px;
}

.bgGrayGreen {
  background-color: #9bd9c3;
}

.mainSidebar {
  padding-left: 10px;
}

.mainSidebar h1 {
  font-family: Calibri;
  font-size: 1.5em;
  background-color: #0033FF;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 2px;
  padding-right: 2px;
  margin-right: 1px;
  color: #FFFFFF;
  margin-bottom: 0px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-style: dotted;
  border-left-style: dotted;
  border-bottom-color: #FFFFFF;
  border-left-color: #FFFFFF;
  margin-top: 10px;
}

.mainSidebar h2 {
  font-family: Calibrif;
  font-size: 1.0em;
  font-style: italic;
  background-color: #B2C4FF;
  background-repeat: no-repeat;
  color: #FFFFFF;
  padding: 0;
  margin: 0;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #FFFFFF;
  border-left-width: 1px;
  border-left-style: dotted;
  border-left-color: #FFFFFF;
}

/* a.categ:link {
  text-decoration: none;
  color: #000066;
}

a.categ:visited {
  text-decoration: none;
  color: #6600CC;
}

a.categ:hover {
  color: #000099;
  background-color: #FFFF99;
  text-decoration: none;
}

a.categ:active {
  text-decoration: none;
  color: #FFFF99;
} */


.mainSidebar h2 a {
  text-decoration: none;
  color: #000066;
  display: block;
  margin-right: 1px;
  padding: 2px 2px 2px 5px;
}

.mainSidebar h2 a:hover {
  background-color: #FFFFFF;
  color: #CC0000;
}

.mainSidebar h2 a:visited {
  color: #6600CC;
}

.mainSidebar h2 a.special {
  background-color: #ffffff;
  color: #00008B;
  border: 1px solid #CC0000;
}

.mainSidebar h2 a.special:hover {
  background-color: #fdf1ce;
  color: #CC0000;
}

.mainContent h2 {
  font-family: Calibri;
  font-size: 1.25em;
  font-style: italic;
}

.productPhoto {
  float: left;
  padding-right: 20px;
}

.productDetails {
  margin-left: 225px;
}

.productDetails p {
  font-family: Calibri;
  font-size: 0.9em;
  line-height: 120%;
}

.product-disclaimer {
  font-family: Calibri;
  font-size: 1.2em;
  line-height: 120%;
  border: 2px solid #5AA0F9;
  background-color: #84CCFF;
  padding: 1em 2em;
  margin: 0;
}

.productInfo a {
  font-weight: none;
  text-decoration: none;
  color: #0066FF;
}

.productInfo a:hover {
  color: #FF0000;
}

.productInfo a:visited {
  color: #000080;
}

.mainContent p {
  font-family: Calibri;
}

@keyframes swing {

  0%,
  10%,
  20%,
  100% {
    transform: rotate(0);
  }

  5% {
    transform: rotate(-0.7deg);
  }

  15% {
    transform: rotate(0.7deg);
  }
}

#main-search {
  border: 1px solid #FFFFFF;
  background-color: #5CA2FE;
  padding: 0.5em;
  display: flex;
  gap: 0.5em;
  flex-direction: row;
  margin: 0.5em;
  animation: swing 0.7s ease-in-out infinite;
  animation-delay: 2s;
  /* Starts after 5s */
}

#main-search:focus-within {
  animation: none;
}

table.store {
  text-align: left;
  font: bold 12px Calibri;
  color: #739494;
}

.hide {
  display: none !important;
}

.spinner-container {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-top-color: lightblue;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#name-field input {
  outline: 0 none;
}

#name-field .validation-error {
  display: none;
  color: #6d129a;
  padding: 10px 20px;
  margin: 5px 0;
  border: 1px solid #6d129a;
  background-color: #f8e2fa;
}

#age-selector select {
  background-color: #FFFFB6;
}

#age-selector .one-yo-confirmation {
  display: block;
  color: #6d129a;
  padding: 10px 20px;
  margin: 5px 0 5px 36px;
  border: 1px solid #6d129a;
  background-color: #f8e2fa;
}

#age-selector:not(:has(select option[value="1"]:checked)) select,
#age-selector:has(#age-confirmation-checkbox:checked) select {
  background-color: white;
}

#age-selector.confirmed .one-yo-confirmation,
#age-selector:not(:has(select option[value="1"]:checked)) .one-yo-confirmation {
  display: none;
}

.attention-bringer {
  display: inline-block;
  color: #6d129a;
  padding: 10px 20px;
  margin: 5px 0;
  border: 1px solid #6d129a;
  background-color: #f8e2fa;
}

#name-field.invalid input {
  outline: 1px solid #6d129a;
}

#name-field.invalid .validation-error {
  display: block;
}

#whofor::placeholder {
  color: #6d129a;
  font-size: 1.1em;
}

.paypal-checkout-success {
  font-size: 2em;
  font-weight: 800;
  color: #6d129a;
}

.paypal-checkout-error {
  font-size: 2em;
  font-weight: 800;
  color: red;
}

.paypal-checkout-cancelled {
  font-size: 2em;
  font-weight: 800;
  color: #6d129a;
}

input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #6d129a;
  border-radius: 50%;
  background: white;
  outline: none;
  position: relative;
  vertical-align: middle;
  transform: translate(0%, -20%);
}

input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #6d129a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #6d129a;
  border-radius: 4px;
  /* Rectangular but slightly rounded */
  background: white;
  outline: none;
  position: relative;
  vertical-align: middle;
  transform: translate(0%, -20%);
}

input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #6d129a;
  border-radius: 2px;
  /* Rectangular but slightly rounded */
  transform: translate(-50%, -50%);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.5;
}

#auto-next {
  background: #fef2ac;
  border-color: #6d129a;
}

#auto-next:checked::before {
  background: #6d129a;
}

.timer {
  font-family: Calibri;
  font-size: 2em;
  color: white;
  text-align: center;
  padding: 4px 10px;
  margin: 0.3em 0;
}

.timer-note {
  font-family: Calibri;
  font-size: 1.2em;
  color: #6d129a;
  text-align: center;
  padding: 4px 10px;
  margin: 0.3em 0;
}

.progress-container {
  position: relative;
  width: calc(100% - 0.6em - 2px);
  margin: 0.3em;
}

.progress-container .progress-label {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #6d129a;
}

.progress-container .progress-bar {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: white;
  border: 1px solid #000099;
}

.progress-container .progress {
  position: absolute;
  height: 100%;
  background-color: #96beff;
  width: 0%;
}

table.light-border,
table.light-border tr,
table.light-border td,
table.light-border th {
  border: 1px solid white;
}

table.light-border {
  border-collapse: collapse;
}

table.light-border th,
table.light-border td {
  padding: 2em 0.5em;
}

table.row-selector tr td {
  cursor: pointer;
}

table.row-selector tr:hover td {
  background-color: rgba(255, 255, 255, 0.7);
}

/* Popup container */
.translate-popup {
  position: fixed;
  flex-direction: column;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 720px;
  max-height: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  border: 1px solid #ddd;
  background-color: #4aa1f9;
  padding: 1em 1em 0 1em;
  z-index: 8;
  display: none;
  /* Hidden by default */
  text-align: left;
  white-space: normal;
  user-select: none;
  /* Standard syntax */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}

/* Overlay */
.translate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
  /* Hidden by default */
}

/* Tabs with content */
.tabs-container {
  flex: 1;
  font-family: Arial, sans-serif;
  display: flex;
  height: calc(100% - 4em);
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
}

.tabs-nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1px solid #ddd;
}

.tabs-nav li {
  margin: 0;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  position: relative;
  top: 1px;
}

.tabs-nav li a {
  text-decoration: none;
  padding: 10px;
  display: block;
  color: #000;
  background-color: #f0f0f0;
  border-radius: 5px 5px 0 0;
}

.tabs-nav li a:hover,
.tabs-nav li.active a {
  background-color: #fff;
}

.tab-content {
  flex: 1;
  height: 100%;
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  overflow-y: scroll;
}

.tab-content.active {
  display: block;
}

.translation-buttons {
  width: 100%;
  height: 4em;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 1em 0;
}

.color-legend {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: Cambria;
  font-size: 12px;
  margin-bottom: 1em;
}

.color-legend .color-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.color-legend .color-box {
  display: inline-block;
  border: 2px solid #2C2C2C;
  color: black;
  text-align: center;
  padding: 0.3em 0.4em;
}

.color-legend .color-label {
  display: inline-block;
  color: #000;
}

/* Adjusted for jQuery UI's structure */
.ui-tabs .ui-tabs-nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  border: none;
  border-collapse: collapse;
}

.ui-tabs .ui-tabs-nav li {
  margin: 0;
  flex: 1;
  border: 1px solid #ddd;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  position: relative;
  text-align: center;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  border-bottom: none;
  /* Ensure active tab is visually distinct */
}

/* Target the anchor elements within the tab list */
.ui-tabs .ui-tabs-nav li a {
  text-decoration: none;
  padding: 10px;
  display: block;
  font-weight: 600;
  color: #fff;
  background-color: #4986c4;
  border-radius: 5px 5px 0 0;
}

/* Hover and active states targeting updated for jQuery UI */
.ui-tabs .ui-tabs-nav li a:hover,
.ui-tabs .ui-tabs-nav .ui-tabs-active a {
  background-color: #66aff8;
}

/* Content styling adjusted for jQuery UI's classes */
.ui-tabs .ui-tabs-panel {
  display: none;
  /* jQuery UI handles showing the active tab, so this might be redundant */
  padding: 20px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top: none;
  background-color: #66aff8;
  /* Ensure background matches active tab */
}

.stripe-payment-field {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center;
  justify-content: stretch;
  margin-bottom: 0.2em;
}

.stripe-payment-field label {
  font-size: 1.4em;
  width: 30%;
  text-align: left;
}

.stripe-payment-field input {
  flex: 1;
  font-size: 1.1em;
  padding: 0.5em;

  border: 1px solid #84CCFF;
  border-radius: 5px;
  width: 70%;
}

#stripe-payment-form {
  padding-top: 1em;
  padding-bottom: 0;
}

#stripe-payment-button {
  margin-top: 0.5em;
  background: linear-gradient(to bottom, #84CCFF, #FFFFFF);
  color: #2c2c67;
  font-size: 1.1em;
  padding: 1em 2em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
