/* hello there  */

html,
body {
  min-height: 80vh;
}
body {
  background: var(--color-bg) url(../images/bg.gif) repeat-x;
  margin: 48px 0 0 0;
  color: var(--color-text, #2f4d6f);
  display: flex;
  flex-direction: column;
  height: 80vh;
}

select,
input,
option {
  color: var(--color-text);
  accent-color: var(--color-primary);
}

b {
  font-weight: 500;
}
.defaultTextActive {
  color: var(--color-muted, #a1a1a1);
  font-style: italic;
}

#main,
#main_footer {
  width: 1120px;
  background-repeat: no-repeat;
  margin: auto;
  position: relative;
  background-color: var(--color-bg);
#topLightBlueLine {
  position: absolute;
  left: 205px;
  right: 4px;
  top: 53px;
  height: 3px;
  background-color: #b6c2d4;
  overflow: hidden;
}
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

.loading-container {
  display: flex;
  align-items: center;
#title {
  position: absolute;
  right: 280px;
  left: auto;
  top: -20px;
  font-weight: bold;
  font-family: var(--font-family-base);
  color: #fff;
  z-index: 1;
}
  gap: 8px;
}

.loading-icon {
  display: inline-block;
  vertical-align: middle;
#header_container_oneOrg {
  position: absolute;
  top: 22px;
  z-index: 3;
  width: 100%;
  max-width: 1120px;
}
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
#main {
  flex: 1 0 auto;
  min-height: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 4px;
#languageSelect {
  width: 20px;
  height: 16px;
  background: #fff no-repeat;
  position: absolute;
  right: 10px;
  left: auto;
  top: 17px;
  cursor: pointer;
  z-index: 100;
}
  background-clip: padding-box;
  min-height: 600px;
}

#main_footer {
  flex-shrink: 0;
}

#main_footer {
  height: auto;
  border: none;
  text-align: right;
  color: #8ea1b8;
  padding-right: 2em;
  padding-top: 0.7ex;
}
#main_footer a:link {
  color: var(--color-blue-dark-700, #8ea1b8);
  text-decoration: none;
}
#main_footer a:visited {
  color: var(--color-blue-dark-700, #8ea1b8);
  text-decoration: none;
}
#main_footer a:hover {
  color: var(--color-link-hover, #8ea1b8);
  text-decoration: none;
}
#main_footer a:active {
  color: var(--color-link, #8ea1b8);
  text-decoration: none;
}
#main_footer a:focus {
  color: var(--color-blue-dark-700, #8ea1b8);
  text-decoration: none;
}

#refPartnerLinks a:link {
  color: var(--color-danger-strong);
  text-decoration: underline;
}
#refPartnerLinks a:visited {
  color: var(--color-danger-strong);
  text-decoration: underline;
}
#refPartnerLinks a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
#refPartnerLinks a:active {
  color: var(--color-danger-strong);
  text-decoration: underline;
}

table {
  text-align: left;
}

.crsButtons {
  width: 368px;
  border-collapse: collapse;
}

/* Normalized heading & table base rules */
#wait {
  font-size: var(--font-size-md);
}

/* Buypass Gordita font family (weight-mapped)
   Font files are expected in `pages/resources/fonts/`.
   We declare the same family name and map different font-weight/font-style combinations
   so standard `font-weight` and `font-style` CSS work as expected.
*/
@font-face {
  font-family: "Buypass-Gordita";
  src: url("fonts/Buypass-Gordita-Regular.woff2") format("woff2"),
    url("fonts/Buypass-Gordita-Regular.woff") format("woff"),
    url("fonts/Buypass-Gordita-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Buypass-Gordita";
  src: url("fonts/Buypass-Gordita-RegularItalic.woff2") format("woff2"),
    url("fonts/Buypass-Gordita-RegularItalic.woff") format("woff"),
    url("fonts/Buypass-Gordita-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Buypass-Gordita";
  src: url("fonts/Buypass-Gordita-Medium.woff2") format("woff2"),
    url("fonts/Buypass-Gordita-Medium.woff") format("woff"),
    url("fonts/Buypass-Gordita-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Buypass-Gordita";
  src: url("fonts/Buypass-Gordita-MediumItalic.woff2") format("woff2"),
    url("fonts/Buypass-Gordita-MediumItalic.woff") format("woff"),
    url("fonts/Buypass-Gordita-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Buypass-Gordita";
  src: url("fonts/Buypass-Gordita-Bold.woff2") format("woff2"),
    url("fonts/Buypass-Gordita-Bold.woff") format("woff"),
    url("fonts/Buypass-Gordita-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Buypass-Gordita";
  src: url("fonts/Buypass-Gordita-BoldItalic.woff2") format("woff2"),
    url("fonts/Buypass-Gordita-BoldItalic.woff") format("woff"),
    url("fonts/Buypass-Gordita-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-family-base: "Buypass-Gordita";
  /* Color palette (Buypass) */
  /* Base neutrals */
  --color-white: #fff;
  --color-black: #000;
  --color-grey-50: #f7f9fc; /* grey[0] */
  --color-grey-100: #edf1f8; /* grey[3] */
  --color-grey-200: #e6e9ef; /* buypass_grey[1] */
  --color-grey-300: #d7dae1; /* grey[1] / buypass_grey[0] */
  --color-grey-400: #c4c7d0; /* grey[2] */
  --color-grey-500: #f9fafd; /* disabledGrey / buypass_grey[4] */

  /* Blues */
  --color-blue-300: #1959c5; /* buypass_blue[0] */
  --color-blue-400: #1c61d3; /* buypass_blue[1] */
  --color-blue-500: #2871eb; /* buypass_blue[2] */
  --color-blue-600: #367cff; /* buypass_blue[3] */
  --color-blue-700: #5b94ff; /* buypass_blue[4] */
  --color-blue-shade: #64759c; /* shadeBlue */
  --color-blue-dark-300: #0d2250; /* buypass_darkblue[0] */
  --color-blue-dark-400: #142e68; /* buypass_darkblue[1] */
  --color-blue-dark-500: #1a397c; /* buypass_darkblue[2] */
  --color-blue-dark-600: #64759c; /* buypass_darkblue[3] (same as shade) */
  --color-blue-dark-700: #8491b0; /* buypass_darkblue[4] */
  --color-gray-blue: #042b746b;
  /* Blue-Greens */
  --color-bluegreen-300: #2da9a2; /* buypass_bluegreen[0] */
  --color-bluegreen-400: #35b7b0; /* buypass_bluegreen[1] */
  --color-bluegreen-500: #2dcbc3; /* buypass_bluegreen[2] */
  --color-bluegreen-600: #79ded9; /* buypass_bluegreen[3] */
  --color-bluegreen-700: #a4e9e5; /* buypass_bluegreen[4] */

  /* Reds (soft accent set) */
  --color-red-300: #ba4c68; /* buypass_red[0] */
  --color-red-400: #d25a78; /* buypass_red[1] */
  --color-red-500: #ea6d8c; /* buypass_red[2] */
  --color-red-600: #ef91a8; /* buypass_red[3] */
  --color-red-700: #f2a6b9; /* buypass_red[4] */

  /* Sand / Send (neutral warm) */
  --color-sand-300: #d5c0ac; /* buypass_send[0] */
  --color-sand-400: #e1ccb8; /* buypass_send[1] */
  --color-sand-500: #f0d9c4; /* buypass_send[2] */
  --color-sand-600: #f7e8dd; /* buypass_send[3] */
  --color-sand-700: #fbf3ec; /* buypass_send[4] */

  /* Legacy color mapping (for gradual migration) */
  --legacy-dark-text: #2f4d6f; /* old dark blue text */
  --legacy-accent: #ff3c20; /* old accent red/orange */
  --legacy-secondary-accent: #b6c2d4; /* light blue borders */

  /* New semantic tokens (initial picks) */
  --color-text: var(
    --color-blue-dark-400
  ); /* replacing legacy-dark-text gradually */
  --color-text-muted: var(--color-blue-dark-600);
  --color-border: var(--color-grey-300);
  --color-border-subtle: var(--color-grey-100);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-grey-50);
  --color-primary: var(--color-blue-dark-300);
  --color-primary-hover: var(--color-blue-500);
  --color-primary-active: var(--color-blue-300);
  --color-danger: var(--color-red-500); /* softer than legacy accent */
  --color-danger-hover: var(--color-red-400);
  --color-link: var(--color-blue-400);
  --color-link-hover: var(--color-blue-500);

  /* Extended semantic tokens */
  --color-success: #71a31e; /* legacy green retained for traffic lights/buttons */
  --color-success-bg: #eeffee;
  --color-warning: #f6a800; /* legacy yellow */
  --color-warning-bg: #f5f5cc;
  --color-danger-strong: #ff3c20; /* legacy strong danger */
  --color-danger-bg: #ffeaea;
  --color-info: var(--color-blue-300);
  --color-table-stripe: var(--color-grey-100);
  --color-table-header-bg: var(--color-grey-200);
  --color-table-header-hover-bg: var(--color-grey-300);
  --color-focus-ring: var(--color-blue-500);
  --color-muted: var(--color-blue-dark-600);
  --legacy-medium-blue: #667e9d; /* used in older blue button */
}

/* Apply base font family across the site while preserving existing fallbacks */
body,
input,
select,
textarea,
button {
  font-family: var(--font-family-base);
}

.bpajaxtable tbody tr td {
  padding-bottom: 2px;
  padding-top: 2px;
  vertical-align: top;
  padding-right: 5px;
}

#priceTable td.empty {
  color: var(--color-accent);
  text-align: center;
}
#main_footer a:focus {
  color: #8ea1b8;
  text-decoration: none;
}
.domainPriceTable {
  margin: 40px 0;
}
.domainPriceTable th {
  width: 180px;
}
.dealPriceTable {
  width: 422px;
}
#certStatusOverview h1 {
  padding-bottom: 0;
  font-size: var(--font-family-base);
}
#certStatusOverview h2 {
  font-size: var(--font-family-base);
  padding-bottom: 0;
  margin-bottom: var(--space-2);
  margin-top: var(--space-5);
}
#certStatusOverview #trafficLights td {
  padding: 4px 8px;
}
#certStatusOverview table.statustable td {
  padding: 4px 4px;
}
.toolTipBoxInner,
#toolTip,
#toolTip1,
#toolTip2,
#toolTip3 {
  background: var(--color-bg);
  color: var(--color-text);
  width: 300px;
  padding: var(--space-2);
  overflow: visible;
  z-index: 1;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border-subtle);
}
.crsInput input.prefix {
  width: 28px;
}
.crsInput input.phone {
  width: 189px;
}
.crsInput input.city {
  width: 189px;
}
@-moz-document url-prefix() {
  .crsInput input.phone {
    width: 187px;
  }
  .crsInput input.city {
    width: 187px;
  }
}
.crsInput input.zipCode {
  width: 43px;
}
.crsInput select.withdrawExpiry {
  width: 106px;
}
.crsInput input.crsBlueButton {
  width: 110px;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 110px;
  margin-bottom: 3px;
  height: 22px;
}
.crsInput input.crsGreenButton {
  width: 110px;
}

.crsButtons {
  width: 100%;
  max-width: 460px;
  border-collapse: collapse;
}
.crsInput2 {
  background-color: var(--color-bg-alt);
  border-collapse: collapse;
  width: 100%;
  max-width: 460px;
}
.crsInput2 td {
  padding-top: 0px;
  padding-bottom: 0px;
}
.crsInput3 {
  background-color: var(--color-bg-alt);
  border-collapse: collapse;
  width: 100%;
  max-width: 448px;
}
.crsInput3 td {
  padding-top: 0px;
  padding-bottom: 0px;
}

.crsInput_fullsize {
  background-color: var(--color-bg-alt);
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
}
.crsInput_fullsize td {
  padding-left: 6px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 6px;
}

#sircles {
  background: #fff url(../images/sircles.gif) no-repeat;
  height: 395px;
  width: 560px;
  position: absolute;
  left: -181px;
  top: -49px;
  z-index: -1;
}
.crsLabel{
  width: 100%;
  max-width: 240px;
  display: inline-block;
}

/* Small layout tweak: make crsLabel table cells right-aligned
   and give value cells a consistent left padding so adjacent
   tables have matching spacing between label and value. */
/* Scoped to receipt summary tables only */
.receiptSummary td.crsLabel, .receiptSummary table.crsInput td.crsLabel {
  padding-right: 12px;
}
.receiptSummary table.crsInput td:not(.crsLabel) {
  padding-left: 12px;
}
.receiptSummary td.crsLabel {
  display: table-cell;
  width: 250px;
}


#header_graphics {
  background: #fff url(../images/header_graphics.png) repeat-x;
  height: 163px;
  width: 550px;
  position: absolute;
  left: 178px;
  top: 0px;
  z-index: 0;
}

#topRedLine {
  border: 0;
  position: absolute;
  left: 4px;
  top: 3px;
  width: 1110px;
  height: 3px;
  background-color: #ff3c20;
  z-index: 1;
  overflow: hidden;
}

#topDarkBlueLine {
  position: absolute;
  left: 4px;
  top: 53px;
  width: 198px;
  height: 3px;
  background-color: #2e4e6f;
  overflow: hidden;
}

#topLightBlueLine {
  position: absolute;
  left: 205px;
  top: 53px;
  width: 910px;
  height: 3px;
  background-color: #b6c2d4;
  overflow: hidden;
}

#title {
  position: absolute;
  left: 840px;
  top: -20px;
  font-weight: bold;
  font-family: var(--font-family-base);
  color: #fff;
  z-index: 1;
}
#header_container {
  position: absolute;
  top: 17px;
  z-index: 3;
  width: 1080px;
}
#header_container_oneOrg {
  position: absolute;
  top: 22px;
  z-index: 3;
  width: 1000px;
}
#header {
  text-align: right;
  float: right;
  margin-right: 0;
  font-weight: bold;
  font-family: var(--font-family-base);
  color: #2e4e6f;
  z-index: 1;
  white-space: nowrap;
}
#languageSelect {
  width: 20px;
  height: 16px;
  background: #fff no-repeat;
  position: absolute;
  left: 960px;
  top: 17px;
  cursor: pointer;
  z-index: 100;
}
#arrow_down {
  width: 8px;
  height: 4px;
  background: #fff url(../images/arrow_down.png) no-repeat;
  position: relative;
  left: 23px;
  top: 7px;
  cursor: pointer;
  z-index: 100;
}
#languageDialog {
  width: 40px;
  height: 28px;
  position: relative;
  left: -8px;
  top: 20px;
  background: #fff;
  padding: 0 8px 0 0px;
  background-color: #fff;
  z-index: 100;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 0 4px #cccccc;
  box-sizing: border-box;
  border: solid 1px #ccc;
  display: none;
}
#flag {
  width: 20px;
  height: 16px;
  margin: 5px 0 0 5px;
  background: #fff url(../images/flag-en-active.png) no-repeat;
  position: relative;
  left: 0px;
  top: 0px;
  cursor: pointer;
}
.undecoratedLink {
  font-family: var(--font-family-base);
  color: #2f4d6f;
  text-decoration: none;
  font-weight: normal;
}
a.undecoratedLink:visited {
  color: #2f4d6f;
}
a.undecoratedLink:hover {
  text-decoration: underline;
  cursor: pointer;
}
.undecoratedLink {
  font-family: var(--font-family-base);
  color: #2f4d6f;
  text-decoration: none;
}
.undecoratedLink:visited {
  color: #2f4d6f;
}
.undecoratedLink:hover {
  text-decoration: underline;
  cursor: pointer;
}
.bullet:hover {
  cursor: pointer;
}
#wait_container {
  position: absolute;
  top: 140px;
  left: 100px;
  width: 400px;
  height: 50px;
  background-color: #ffffff;
  display: flex; /* Center loading text */
  align-items: center;
  justify-content: center;
  gap: 8px; /* ensure space between icon and text */
  flex-wrap: nowrap; /* prevent wrapping to next line */
  box-sizing: border-box;
  border: 1px solid #d7dee6;
}
#wait {
  font-size: 14pt;
  font-weight: bold;
  font-family: var(--font-family-base);
  color: #2e4e6f;
  z-index: 5;
  margin: 0; /* Remove manual offset; flex handles centering */
  display: inline-flex; /* keep icon and text on one line if nested */
  align-items: center;
  gap: 8px;
}
/* Make any loading icon inside the wait container align nicely */
#wait_container img,
#wait img,
#wait_container .loading-icon,
#wait .loading-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.heading1 {
  font-size: 14pt;
  font-weight: bold;
  text-decoration: none;
}
.heading2 {
  font-family: var(--font-family-base);
  font-size: 14pt;
  font-weight: bold;
  z-index: 3;
  margin-top: 0px;
}
h1 {
  font-family: var(--font-family-base);
  font-size: 14pt;
  font-weight: bold;
  margin-top: 0px;
}
.heading3 {
  font-size: 10pt;
  font-weight: bold;
  z-index: 3;
}
#logo {
  border: 0;
  position: absolute;
  left: 20px;
  top: 21px;
  width: 100px;
  height: 18px;
  background-image: url(../images/bplogo.gif);
  background-repeat: no-repeat;
}

/* layout/gui_start.jsp */
#topLeftContentBorder {
  position: absolute;
  left: 205px;
  top: 60px;
  width: 1px;
  height: 10px;
  background-color: #b6c2d4;
  overflow: hidden;
}
#topContentBorder {
  position: absolute;
  left: 205px;
  top: 60px;
  width: 910px;
  height: 1px;
  background-color: #b6c2d4;
  overflow: hidden;
}
#topRightContentBorder {
  position: absolute;
  left: 1115px;
  top: 60px;
  width: 1px;
  height: 10px;
  background-color: #b6c2d4;
  overflow: hidden;
}

#topLeftContentBorder_fullsize {
  position: absolute;
  left: -16px;
  top: -8px;
  width: 1px;
  height: 10px;
  background-color: #b6c2d4;
  overflow: hidden;
}
#topContentBorder_fullsize {
  position: absolute;
  left: -16px;
  top: -8px;
  width: 774px;
  height: 1px;
  background-color: #b6c2d4;
  overflow: hidden;
}
#topRightContentBorder_fullsize {
  position: absolute;
  left: 758px;
  top: -8px;
  width: 1px;
  height: 10px;
  background-color: #b6c2d4;
  overflow: hidden;
}

#topLightBlueLine_fullsize {
  position: absolute;
  left: 4px;
  top: 53px;
  width: 988px;
  height: 3px;
  background-color: #b6c2d4;
  overflow: hidden;
  display: none;
}

/* left_menu.jsp */
#menu {
  position: absolute;
  left: 4px;
  top: 60px;
  width: 198px;
  background-color: #fff;
  font-size: var(--font-size-sm);
}
#menucontent {
  padding: 2px 0px;
  box-shadow: 2px 0 4px var(--color-border);
  min-height: 100px;
  min-width: 190px;
  font-family: var(--font-family-base);
}

#content {
  top: 69px;
  left: 199px;
  width: 900px;
  position: relative;
  padding-left: 2em;
  padding-right: 1em;
  padding-top: 4px;
  padding-bottom: 100px;
  z-index: 0;
}

#content_small {
  top: 69px;
  left: 20px;
  position: absolute;
  padding-top: 6px;
  padding-right: 6px;
}

#content_fullwidth {
  top: 69px;
  left: 20px;
  position: relative;
  padding-top: 6px;
  padding-right: 40px;
  padding-bottom: 100px;
}

#pageButtons {
  position: absolute;
  left: 0px;
  top: 400px;
  width: 100px;
  height: 25px;
}

.submitButton {
  text-decoration: none;
  background-color: var(--color-blue-300);
  color: var(--color-white, #fff);
  font-weight: bold;
  border: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 3px;
}
.submitButton:hover {
  text-decoration: underline;
  cursor: pointer;
}
.submitButton[disabled] {
  color: var(--color-grey-400);
  background-color: var(--color-grey-200);
  cursor: not-allowed;
}

.filterTypes:hover {
  text-decoration: underline;
  cursor: pointer;
}

.crsGreenButton {
  text-decoration: none;
  background-color: var(--color-blue-300);
  color: var(--color-white, #fff);
  font-weight: bold;
  border: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 120px;
  margin-bottom: 3px;
  height: 22px;
}
.crsGreenButton:hover {
  text-decoration: underline;
  cursor: pointer;
}
.crsGreenButton[disabled] {
  color: var(--color-grey-400);
  background-color: var(--color-grey-200);
  cursor: default;
  text-decoration: none;
}

.preventExtralargeIEButton {
  /* Internet Explorer stretches buttons if they have long labels. Hack: */
  padding: 0.2em 1em;
  overflow: visible;
}

.blueColorButton_deprecated {
  padding: 0.2em 1em;
  overflow: visible;
  background-color: #667e9d;
}
.blueColorButton {
  text-decoration: none;
  background-color: var(--color-blue-300);
  color: var(--color-white, #fff);
  font-weight: bold;
  border: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 3px;
  height: 22px;
}
.blueColorButton:hover {
  text-decoration: underline;
  cursor: pointer;
}

.color1 {
  background-color: var(--color-grey-300);
}
.color2 {
  background-color: var(--color-blue-300);
}
.color3 {
  background-color: var(--color-text);
}

.crsBlueButton {
  text-decoration: none;
  background-color: var(--color-blue-300);
  color: var(--color-white, #fff);
  font-weight: bold;
  border: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 110px;
  margin-bottom: 3px;
  height: 22px;
}
.crsBlueButton:hover {
  text-decoration: underline;
  cursor: pointer;
}
.crsBlueButton[disabled],
.crsBlueButton[disabled]:hover {
  color: var(--color-grey-400);
  background-color: var(--color-grey-200);
  cursor: default;
  text-decoration: none;
}

#countryInput {
  display: none;
  position: relative;
  vertical-align: middle;
  top: -2px;
}
#country {
  width: 100px;
  height: 24px;
}

#tableInput {
  display: none;
  position: relative;
  vertical-align: middle;
  top: -4px;
}

#tableInput select {
  width: 200px;
}
#tableInput input[type="text"] {
  width: 10em;
  height: 18px;
}

#tableAction {
  float: left;
}

.textArea {
  width: 236px;
  color: #2e4e6f;
}

/* gen/pages/jsp/ips7/id_pageend.jsp */
#ips7 {
  position: absolute;
  top: 170px;
  min-height: 333px;
  min-width: 432px;
  max-height: 600px;
  max-width: 800px;
  height: 333px;
  width: 432px;
  background-color: #fff;
}

/* Scoped styles for VID signing iframe only (do not affect WIPS login view) */
.ips-vid-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 40px 0;
  background: transparent;
}
.ips-vid-iframe {
  background: transparent;
  border: 0;
}

.prompt {
  font-weight: 500;
}
.green {
  color: #71a31e;
}
.red {
  color: var(--color-danger-strong);
}
.boldRed {
  color: var(--color-danger-strong);
  font-weight: bold;
}
.errprompt {
  color: var(--color-danger-strong);
}
.toUpper {
  text-transform: uppercase;
}

:link {
  color: var(--color-link, --color-text);
}
a:hover {
  color: var(--color-link-hover, #ff3c24);
}
a:visited {
  color: var(--color-link, --color-text);
}
a:visited:hover {
  color: var(--color-link-hover, #ff3c24);
}

.nobr {
  white-space: nowrap;
}

.height4 {
  height: 4px;
}
.height5 {
  height: 5px;
}
.height6 {
  height: 6px;
}
.height10 {
  height: 10px;
}
.height15 {
  height: 15px;
}

.tablesorter-headerRow {
  color: var(--color-blue-dark-400);
  background: var(--color-white);
  border-bottom: 2px solid var(--color-blue-shade);
  font-weight: 600;
}

.tablesorter-headerRow th {
  padding: 0 18px 0 8px; /* leave room on the right for the sort arrow */
  cursor: pointer;
  text-align: left;
  user-select: none;
  position: relative; /* anchor for arrow positioning */
}

.tablesorter-headerRow th:hover {
  background: var(--color-table-header-hover-bg);
}

/* Keep header text on one line with ellipsis (tablesorter wraps inner text) */
.tablesorter-headerRow th .tablesorter-header-inner {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Single source of truth for arrows: place on the th, not the inner span.
   Absolute positioning keeps arrow vertically centered without breaking table layout. */
.tablesorter-headerRow th.tablesorter-headerAsc::after,
.tablesorter-headerRow th.tablesorter-headerDesc::after {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  line-height: 1;
  font-family: sans-serif;
  pointer-events: none;
}

.tablesorter-headerRow th.tablesorter-headerAsc::after { content: "\25B2"; }
.tablesorter-headerRow th.tablesorter-headerDesc::after { content: "\25BC"; }

div.tablesorterPager {
  display: flex;
  align-items: center;
  gap: 12px;
  float: right;
  padding: 4px 0;
}

/* Force all pager elements into a single horizontal line */
div.tablesorterPager table {
  display: flex;
  align-items: center;
  gap: 8px;
}

div.tablesorterPager table tr {
  display: flex;
  align-items: center;
  gap: 8px;
}

div.tablesorterPager table td {
  display: flex;
  align-items: center;
}

/* Icons */
div.tablesorterPager img {
  width: 18px;
  height: 18px;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

div.tablesorterPager img:hover {
  opacity: 1;
}

/* Links */
div.tablesorterPager a {
  color: #333;
  text-decoration: none;
}

div.tablesorterPager a:hover {
  text-decoration: underline;
}

/* Input */
div.tablesorterPager input {
  width: 70px;
  padding: 4px 6px;
  font-size: 0.85rem;
  border: 1px solid #c5c5c5;
  border-radius: 4px;
  text-align: center;
}

div.tablesorterPager input[disabled] {
  opacity: 0.5;
  background: #f2f2f2;
}

.tablesorter-header {
  cursor: pointer;
  align-items: center;
  gap: 6px; /* space between label and arrow */
  white-space: nowrap; /* keep label and arrow on same line */
  padding: 4px 8px 4px 0px;
}

/* Ensure header inner is a block-level flex child so text can truncate
   and remain aligned next to the arrow. Replaces prior inline forcing. */
.tablesorter-header .tablesorter-header-inner {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Remove background-image usage and use ::after pseudo-element for arrows */
.tablesorter-headerAsc,
.tablesorter-headerDesc {
  color: var(--color-danger-strong);
}

/* Use the headerRow rules above for arrows; keep these empty to avoid duplicate arrows */
.tablesorter-header::after { content: ""; }
.tablesorter-headerAsc::after {
  content: "";
}
.tablesorter-headerDesc::after {
  content: "";
  content: "\25BC"; /* down triangle */
}
.tablesorter .sorter-false {
  background-image: none;
  cursor: default;
  padding: 4px;
}

.noBorder {
  border: none;
  border-collapse: collapse;
}

.linePadding {
  line-height: 150%;
}
.linePadding200 {
  line-height: 200%;
}

/* Styles for certificate list page */

#certificatelistpage #filters {
  padding-bottom: 1em;
  color: var(--color-blue-dark-500);
}

/* Prevent certificate tables from causing horizontal overflow; allow scroll if needed */
#certificatelistpage {
  overflow-x: auto;
}

#filters .selected {
  color: #ff3c24;
}

#certificatelistpage #filters .selected:link {
  color: #ff3c24;
}
#certificatelistpage #filters .selected:visited {
  color: #ff3c24;
}

#certificatelistpage #filters :link {
  color: #526b84;
}
#certificatelistpage #filters a:hover {
  color: #ff3c24;
}
#certificatelistpage #filters a:visited {
  color: #526b84;
}
#certificatelistpage #filters a:visited:hover {
  color: #ff3c24;
}

#certificatelistpage #filters .sep {
  color: #8ea1b8;
  font-weight: lighter;
}

/* Specific for certificatelist_content.jsp */

.bpajaxtable {
  width: 100%;
  cursor: pointer;
  border-spacing: 0px;
  border-collapse: collapse;
  box-sizing: border-box;
  max-width: 100%;
}
.bpajaxtable .domainContent {
  cursor: default;
}
.bpajaxtable thead tr th {
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid black;
  font-weight: 500;
}
.bpajaxtable thead th.headerSortUp {
  color: var(--color-danger-strong);
  background-image: url(../images/sorting_small_asc_red.gif);
  background-position: center right;
}
.bpajaxtable thead th.headerSortDown {
  color: var(--color-danger-strong);
  background-image: url(../images/sorting_small_desc_red.gif);
  background-position: center right;
}
.bpajaxtable thead th.header {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 10px;
}
.bpajaxtable tfoot tr {
  height: 7px;
}
.bpajaxtable .expandcollapse {
  vertical-align: top;
  text-align: center;
  margin-bottom: 0.25em;
}
.bpajaxtable .selected {
  color: var(--color-danger-strong);
}
.bpajaxtable .innertable th {
  margin-right: 1em;
}

/*
   We have an anchor in the bporgtable list, in order to provide accessibility (tab
   focusable links). Must do some heavy styling in order to get colors right.
*/
a.undecoratedAnchor,
a.undecoratedAnchor:visited,
a.undecoratedAnchor:hover,
a.undecoratedAnchor:active {
  /* Used for anchors that are provided to be tab stops, but not be otherwise clickable. */
  color: #2f4d6f;
  text-decoration: none;
  cursor: pointer;
  word-break: break-all;
}
.bpajaxtable .selected a.undecoratedAnchor,
.bpajaxtable .selected a.undecoratedAnchor:visited,
.bpajaxtable .selected a.undecoratedAnchor:hover,
.bpajaxtable .selected a.undecoratedAnchor:active {
  color: #ff3c24;
  text-decoration: none;
  font-weight: normal;
  cursor: pointer;
}
.bpajaxtable .highlighted a.undecoratedAnchor,
.bpajaxtable .highlighted a.undecoratedAnchor:visited,
.bpajaxtable .highlighted a.undecoratedAnchor:hover,
.bpajaxtable .highlighted a.undecoratedAnchor:active {
  color: #ff3c24;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  word-break: break-all;
}

.bpajaxtable .highlighted {
  font-weight: bold;
  color: #ff3c24;
}
.bpajaxtable #inforow td {
  padding-left: 4em;
  padding-right: 2em;
  padding-bottom: 1em;
  cursor: default;
}
.bpajaxtable #inforow td .info {
  float: left;
}
.bpajaxtable #inforow td .links {
  clear: both;
  font-weight: bold;
  padding-top: 1em;
  margin-top: 0em;
  display: flex;
  gap: 0.6em;
  align-items: center;
  flex-wrap: wrap;
}
.bpajaxtable #inforow td .links a:hover {
  color: #ff3c24;
}
.bpajaxtable #inforow td .links a:visited {
  color: #526b84;
}
.bpajaxtable #inforow td .links a:visited:hover {
  color: #ff3c24;
}
.bpajaxtable #inforow td .closeButton {
  float: right;
  text-align: right;
  font-size: smaller;
  font-weight: bold;
}
.bpajaxtable #inforow td table td {
  border: none;
  padding: 5px 0 0 0;
  font-size: smaller; 
}
.bpajaxtable #inforow td table.horizontal th {
  text-align: left;
  padding-right: 0.5em;
}
.bpajaxtable #inforow td input {
  margin-right: 0.6em;

  /* Internet Explorer stretches buttons if they have long labels. Hack: */
  padding: 0.2em 0.4em;
  overflow: visible;
  vertical-align: middle;
  display: inline-block;
  line-height: 1.2;
}

.bpajaxtable #inforow td .action-btn {
  margin-right: 0.6em;
  vertical-align: middle;
  width: auto !important;
}
.bpajaxtable tr.even {
  background-color: white;
}
.bpajaxtable tr.odd {
  background-color: var(--color-table-stripe);
}
.bpajaxtable .innertable {
  border-spacing: 1.5em 0em;
}
/* Table cell sizing & font now handled by components.css (.bpajaxtable td) */
.bpajaxtable tbody tr td {
  vertical-align: top;
}

/* Use fixed table layout so column widths behave predictably and prevent overflow */
.bpajaxtable {
  table-layout: fixed;
}

/* Truncate overflowing cell text with ellipsis to keep layout tidy */
.bpajaxtable tbody td {
  /* Allow wrapping so long content does not push table outside main container */
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
}

/* Force all cells in the #detailsPreview table to stay on a single line
   and hide overflow with ellipsis. This keeps each row in one visual line. */
#detailsPreview.bpajaxtable,
#detailsPreview.bpajaxtable tbody,
#detailsPreview.bpajaxtable tr,
#detailsPreview.bpajaxtable td,
#detailsPreview.bpajaxtable th {
  white-space: nowrap !important; /* keep everything on one line */
  overflow: hidden !important;    /* hide overflow */
  text-overflow: ellipsis !important; /* show ellipsis for clipped content */
}

/* Make table use fixed layout so column widths are predictable and ellipsis works */
#detailsPreview.bpajaxtable {
  table-layout: fixed !important;
  width: 100%;
}

/* Allow narrow columns used by pager/icons to keep their size */
#detailsPreview.bpajaxtable td.icon,
#detailsPreview.bpajaxtable th.icon {
  white-space: nowrap !important;
  width: 40px;
}

#partnerlist.bpajaxtable thead th {
  width: auto;
}

#partnerlist.bpajaxtable {
  table-layout: auto;
}

/* Inner wrapper for tooltipped truncated content */
.cell-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* SSL table column behaviors */
/* One-line (no ellipsis needed) for Order no (2), Product (4), Duration (5), Expiry (6), Status (7) */
.bpajaxtable.ssl-table tbody td:nth-child(2),
.bpajaxtable.ssl-table tbody td:nth-child(4),
.bpajaxtable.ssl-table tbody td:nth-child(5),
.bpajaxtable.ssl-table tbody td:nth-child(6),
.bpajaxtable.ssl-table tbody td:nth-child(7) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Ellipsis fade for Serial (3) and Domain (8) */
.bpajaxtable.ssl-table tbody td:nth-child(3),
.bpajaxtable.ssl-table tbody td:nth-child(8) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wrapper utility for fading text (explicit span.fade) */
.bpajaxtable.ssl-table tbody td .fade {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prevent word-break on order number anchor */
.bpajaxtable.ssl-table tbody td:nth-child(2) a.undecoratedAnchor {
  word-break: normal;
  white-space: nowrap;
}

/* Explicit width fallback (mirrors colgroup) in case colgroup is stripped by user agent/proxy */
.bpajaxtable.ssl-table col:nth-child(1) {
  width: 4%;
}
.bpajaxtable.ssl-table col:nth-child(2) {
  width: 10%;
}
.bpajaxtable.ssl-table col:nth-child(3) {
  width: 18%;
}
.bpajaxtable.ssl-table col:nth-child(4) {
  width: 18%;
}
.bpajaxtable.ssl-table col:nth-child(5) {
  width: 10%;
}
.bpajaxtable.ssl-table col:nth-child(6) {
  width: 15%;
}
.bpajaxtable.ssl-table col:nth-child(7) {
  width: 10%;
}
.bpajaxtable.ssl-table col:nth-child(8) {
  width: 15%;
}

.bpajaxtable.ssl-table {
  table-layout: fixed;
}

/* Guard against columns collapsing too small: give serial & domain minimal readable room */
.bpajaxtable.ssl-table tbody td:nth-child(3) {
  min-width: 110px;
}
.bpajaxtable.ssl-table tbody td:nth-child(8) {
  min-width: 180px;
}

.bpajaxtable.ssl-table td:nth-child(3),
.bpajaxtable.ssl-table td:nth-child(4),
.bpajaxtable.ssl-table td:nth-child(8) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* some columns may be too long in bpajaxtables. (chopLength()).
   hide content unless row is expanded. Note that more verbose selectors
   have precedence - CSS automatically does the hide/unhide for us. */
.bpajaxtable .ellipsis {
  font-weight: bold;
}
.bpajaxtable .hiddenByEllipsis {
  display: none;
}
.bpajaxtable .highlighted .ellipsis {
  display: none;
}
.bpajaxtable .highlighted .hiddenByEllipsis {
  display: block;
}

.certManagerWidth {
  width: 394px;
  border-collapse: collapse;
}

/* priceTable cell spacing & empty state moved to components.css */

/* domainPriceTable & dealPriceTable structural styles consolidated; width hints retained via utility classes if needed */
.fullWithTable {
  width: 540px;
}
.shrinkWidthTable {
  width: 451px;
}

.alignRight {
  text-align: right;
}
.alignCenter {
  text-align: center;
}

/* Specific for page_menu.jsp */

#menu ul {
  margin-left: 0px;
  padding-left: 1em;
  margin-top: 1em;
}
#menu ul li {
  margin-left: 0px;
  list-style-type: none;
  margin-top: 0.2em;
}
#menu ul li ul {
  margin-top: 0px;
}

#menu ul div {
  padding: 0;
}
#menu ul li a {
  font-weight: normal;
}
#menu ul li ul li a {
  font-weight: normal;
}
#menu ul li ul li ul li a {
  font-weight: normal;
}

#menu :link {
  color: #526b84;
}
#menu a:visited {
  color: #526b84;
}
#menu a:hover {
  color: var(--color-blue-500);
}

#menu a:visited:hover {
  color: var(--color-blue-500);
}

#menu .selected:link {
  color: var(--color-blue-500);
  text-decoration: none;
  font-weight: normal;
}
#menu .selected:visited {
  color: var(--color-blue-500);
  text-decoration: none;
  font-weight: normal;
}
#menu .disabled {
  display: none;
}

.tablesorterPager .first:hover {
  cursor: pointer;
}
.tablesorterPager .prev:hover {
  cursor: pointer;
}
.tablesorterPager .next:hover {
  cursor: pointer;
}
.tablesorterPager .last:hover {
  cursor: pointer;
}

/* Document list */

.documentlist {
  padding-left: 2em;
  margin-left: 0em;
}
.documentlist li {
  height: 3em;
  list-style-type: none;
  padding-left: 0em;
  margin-left: 0em;
  display: flex;           /* place icon and text on one line */
  align-items: center;      /* vertically center contents */
  gap: 8px;                 /* space between icon and text */
}
.documentlist li img {
  vertical-align: middle;
  padding-right: 0.3em;
  border-style: none;
  flex: 0 0 auto;          /* prevent image from shrinking */
  display: inline-block;
}
.documentlist li div {
  vertical-align: middle;
  display: inline;          /* keep text inline with the icon */
}

/* for jquery */
#floatbox-box {
  padding: 1em;
  border: 4px solid #748392;
}

/* UNUSED? 2009-08-12 HAMO
#invisibleContent{
  height: 1px;
}*/

#adobeGif {
  cursor: default;
}

#main_small {
  height: 567px;
  width: 474px;
  background-repeat: no-repeat;
  margin: auto;
  position: relative;
  background-color: #fff;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  border: 1px solid #b6c2d4;
}

#topRedLine_small {
  border: 0;
  position: absolute;
  left: 4px;
  top: 3px;
  width: 466px;
  height: 3px;
  background-color: #ff3c20;
  z-index: 1;
  overflow: hidden;
}

#topLightBlueLine_small {
  position: absolute;
  left: 4px;
  top: 53px;
  width: 466px;
  height: 3px;
  background-color: #b6c2d4;
  overflow: hidden;
}

#title_small {
  position: absolute;
  left: 335px;
  top: -20px;
  font-weight: bold;
  font-family: var(--font-family-base);
  color: #fff;
  z-index: 1;
}

#topLeftContentBorder_small {
  position: absolute;
  left: 4px;
  top: 60px;
  width: 1px;
  height: 10px;
  background-color: #b6c2d4;
  overflow: hidden;
}

#topContentBorder_small {
  position: absolute;
  left: 4px;
  top: 60px;
  width: 465px;
  height: 1px;
  background-color: #b6c2d4;
  overflow: hidden;
}

#topRightContentBorder_small {
  position: absolute;
  left: 469px;
  top: 60px;
  width: 1px;
  height: 10px;
  background-color: #b6c2d4;
  overflow: hidden;
}

/* Styles for tables in OrgOrder's "new domain", "new approver" ... */
table.orgOrderTable {
  border: none;
  border-collapse: collapse;
}
table.orgOrderTable td {
  border: none;
}

/* Cert status dashboard page */
#certStatusOverview {
  width: 520px;
  float: left;
}
#certStatusOverview h1 {
  padding-bottom: 0;
  font-size: small;
}
#certStatusOverview h2 {
  font-size: small;
  padding-bottom: 0;
  margin-bottom: 0.4em;
  margin-top: 3em;
}
#certStatusOverview #trafficLights {
  width: 100%;
}
#certStatusOverview #trafficLights td {
  margin: 0.1em;
  padding: 0.2em 0.5em;
}
#certStatusOverview .headerDiv {
  width: 100%;
}
#certStatusOverview .borderedDiv {
  border-top: 0px #d1d7de solid;
  border-bottom: 0px #d1d7de solid;
}
#certStatusOverview #trafficLights td.light {
  width: 6em;
}
#certStatusOverview #trafficLights td.green_on {
  background-color: var(--color-success);
}
#certStatusOverview #trafficLights td.yellow_on {
  background-color: var(--color-warning);
}
#certStatusOverview #trafficLights td.red_on {
  background-color: var(--color-danger-strong);
  color: black;
}
#certStatusOverview #trafficLights td.green_off {
  background-color: var(--color-success-bg);
}
#certStatusOverview #trafficLights td.yellow_off {
  background-color: var(--color-warning-bg);
}
#certStatusOverview #trafficLights td.red_off {
  background-color: var(--color-danger-bg);
  color: black;
}

#certStatusOverview #sslApprovedList td a,
#certStatusOverview #sslExpiresList td a,
#certStatusOverview #sslRevokedList td a,
#certStatusOverview #vidApprovedList td a,
#certStatusOverview #vidExpiresList td a,
#certStatusOverview #vidRevokedList td a,
#certStatusOverview #sslOrgWithoutRequestsList td a,
#certStatusOverview #vidOrgWithoutRequestsList td a {
  text-decoration: none;
}
#certStatusOverview table.statustable tr.even {
  background-color: white;
}
#certStatusOverview table.statustable tr.odd {
  background-color: var(--color-table-stripe);
}
#certStatusOverview table.statustable td {
  /* overrides bpajaxtable settings to get table more spacious */
  margin: 0em 0em;
  padding: 0.3em 0em;
  text-align: left;
}
#certStatusOverview table.statustable td.trafficlight {
  padding-left: 0.5em;
  width: 1em;
}
#certStatusOverview table.statustable td.trafficlight span {
  height: 0.8em;
  width: 1.294em;
  display: block;
  margin-top: 0.2em;
}
#certStatusOverview table.statustable span.green {
  background-color: var(--color-success);
}
#certStatusOverview table.statustable span.yellow {
  background-color: var(--color-warning);
}
#certStatusOverview table.statustable span.red {
  background-color: var(--color-danger-strong);
}
#certStatusOverview table.statustable span.white {
  background-color: var(--color-grey-400);
  border: 0px solid var(--color-blue-dark-700);
}
#certStatusOverview table.statustable td.num {
  padding-left: 0.5em;
  width: 2.5em;
  min-width: 2.5em;
  text-align: right;
  padding-right: 0.8em;
  overflow: visible;
  text-overflow: clip;
}
#certStatusOverview table.statustable .detaillist {
  color: #2f4d6f;
  display: none;
}
#certStatusOverview table.statustable .detaillist a:hover {
  color: #ff3c24;
}
#certStatusOverview table.statustable .detaillist a:visited {
  color: #526b84;
}
#certStatusOverview table.statustable .detaillist a:visited:hover {
  color: #ff3c24;
}

#certStatusOverview table.legendtable {
  border: none;
  float: right;
  margin-bottom: 1em;
}

#certStatusOverview table.legendtable tr td.message {
  padding-right: 0.6em;
}

#promoPane {
  position: absolute;
  right: 0;
  z-index: 2;
}

#certificatePane {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  background: #fff;
  border: 1px solid #d0d0d0; /* thin light border */
  padding: 6px; /* small gap around iframe */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  box-sizing: border-box;
  width: min(1120px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  z-index: 10;
}

#certificatePane #certificateContent {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  height: min(340px, 60vh);
}
#renewPane {
  position: absolute;
  left: 0px;
  display: none;
  background: #fff;
}
#domainPane {
  position: absolute;
  left: 0px;
  display: none;
  background: #fff;
}
#invoicePane {
  position: absolute;
  left: 0px;
  display: none;
  background: #fff;
}

#reportModeSelectTable tr td p {
  /* p inside table gives too little margin on ie */
  padding-bottom: 0;
  padding-top: 0;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}

#generateReportPage #reportTypesTable tr td {
  padding-bottom: 1em;
  padding-right: 1em;
}

.datepicker {
  width: 122px;
}

.advancedSearch {
  width: 256px;
}

.thinLine {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #2b2925;
  height: 0;
  margin: 0;
}

#reportDetailsLayout td {
  padding: 0.5em;
  padding-left: 0px;
  padding-right: 0px;
}
#reportDetailsLayout td table td {
  padding: 0px;
  padding-right: 0em;
}
#detailsPreview thead th.headerSortUp {
  color: #ff3c24;
  background-image: url(../images/sorting_small_asc_red.gif);
  background-position: right;
}
#detailsPreview thead th.headerSortDown {
  color: #ff3c24;
  background-image: url(../images/sorting_small_desc_red.gif);
  background-position: right;
}
#detailsPreview tbody tr {
  cursor: default;
}
#createReportButtonPanel tr td.extraspacing {
  padding-top: 0.8em;
  padding-bottom: 1.4em;
  margin-top: 0.4em;
}

#toolTipBox {
  position: absolute;
  height: 0px;
  z-index: 0;
}

#toolTip,
#toolTip1,
#toolTip2,
#toolTip3 {
  border: 1px solid #2e4e6f;
  background: #fff;
  color: #2e4e6f;
  width: 300px;
  padding: 10px;
  overflow: visible;
  z-index: 1;
  font-family: var(--font-family-base);
  font-size: small;
}
.questionMark:hover {
  cursor: pointer;
}
.questionMark {
  width: 20px;
  height: 20px;
}

.thinLineByImg {
  height: 1px;
  background-repeat: repeat-x;
  background-image: url(/bporgadmin/pages/images/thinLine.png);
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}

.crsRedButton {
  text-decoration: none;
  background-color: var(--color-danger-strong);
  color: var(--color-white, #fff);
  font-weight: bold;
  border: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 70px;
}
.crsRedButton:hover {
  text-decoration: underline;
  cursor: pointer;
}

#questionIcon {
  position: absolute;
  left: 118px;
  top: 193px;
  width: 173px;
  height: 170px;
  background-image: url(/bporgadmin/pages/images/question.png);
  background-repeat: no-repeat;
}

#tableInput {
  display: none;
  position: relative;
  vertical-align: middle;
  top: -1px;
}

#tableInput select {
  width: 200px;
}
#tableInput input[type="text"] {
  width: 10em;
}
#tableAction {
  float: left;
}

.white {
  background-color: #fff;
  height: 5px;
}

.mobilebutton {
  display: none;
}

.pagedisplay {
  height: 15px;
  border: 1px solid #fff;
}

#domainList {
  display: none;
}
.multiDomainTable {
  width: 451px;
  cursor: default;
  border-spacing: 0px;
  border-collapse: collapse;
  border: none;
}
#multiDomain {
  display: none;
}
.showMultiPrice {
  color: #fff;
  background: var(--color-blue-500);
  position: absolute;
  left: 490px;
  top: 398px;
  padding: 10px;
  display: none;
}
#addMultiText2 {
  display: none;
}
#showAdditionalDomain {
  display: none;
}
#validateCsrReplaceButton {
  display: none;
  position: relative;
  left: 134px;
}

.hide {
  display: none;
}

#searchBar {
  position: absolute;
  left: 520px;
  top: 34px;
}
#advancedSearchPosition {
  position: relative;
  left: 496px;
  width: 200px;
  top: -27px;
}
#advancedSearch {
  float: right;
  cursor: pointer;
  text-decoration: underline;
  display: none;
}
#advancedSearchPanel {
  display: none;
  margin: 0px 0px 30px 0px;
}
.inputLabel {
  width: 150px;
  display: table-cell;
  padding: 0px 0px 8px 0px;
  vertical-align: bottom;
}
.vsOnSmartCard {
  text-decoration: underline;
  cursor: pointer;
}

label {
  font-weight: 100;
}
.menuMsg {
  padding-top: 5px;
  padding-bottom: 5px;
}
.snailMail {
  display: block;
}

.border {
  border: 1px solid rgb(169, 169, 169);
  padding: 10px 10px 10px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px 4px 4px 4px;
}
#exit {
  background: #fff url(../images/x.jpg) repeat-x;
  background-size: contain;
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: relative;
  left: 538px;
  top: -96px;
  display: none;
  float: left;
}
/* Legacy authorization icons swapped to Font Awesome via global include in include_definition.jsp */
.authorized {
  display: inline-flex;
  align-items: center;
}
.notAuthorized {
  display: inline-flex;
  align-items: center;
}

/* High-specificity overrides to ensure all table headers use Buypass blue */
html body .tablesorter-headerRow,
html body .tablesorter-headerRow th,
html body table thead tr th,
html body .bpajaxtable thead th {
  background: var(--color-white) !important;
  color: var(--color-blue-dark-400) !important;
  border-bottom-color: var(--color-blue-shade) !important;
}

/* Ensure sort indicators remain visible on blue background */
.tablesorter-headerAsc::after,
.tablesorter-headerDesc::after,
.tablesorter-headerRow .tablesorter-headerAsc::after,
.tablesorter-headerRow .tablesorter-headerDesc::after {
  color: var(--color-blue-dark-400) !important;
}

/* If some table headers still overflow, allow wrapping in header cells (but keep monospace arrows) */
html body table thead th {
  white-space: normal;
  word-break: break-word;
}

th {
  font-weight: normal;
}

/* Layout: ensure inputs in registration form `form#reg1` and in `td.nobr` align
   and have consistent width. We use box-sizing:border-box so padding/border
   don't change visual width. Labels using .inputLabel stay a fixed column.
*/
form#reg1 {
  display: table; /* allow table-cell children (.inputLabel and input td) to align */
}

form#reg1 .inputLabel {
  display: table-cell;
  vertical-align: middle;
  padding-right: 0.75rem;
  width: 160px; /* fixed label column width so inputs start aligned */
}

/* Target inputs/selects/textareas inside form#reg1 and td.nobr */
form#reg1 input[type="text"],
form#reg1 input[type="email"],
form#reg1 input[type="tel"],
form#reg1 input[type="password"],
form#reg1 select,
form#reg1 textarea,
td.nobr input[type="text"],
td.nobr select,
td.nobr textarea {
  display: inline-block;
  box-sizing: border-box;
  width: 320px; /* unified control width */
  max-width: 100%;
  height: 28px;
  padding: 4px 6px;
  vertical-align: middle;
}

/* Smaller controls (e.g., zip code) can use utility classes to override width */
.smallControl,
.zipCode,
input.zipCode {
  width: 80px;
}

/* Layout helpers for combined fields: zip/postnr + sted (city) and prefix + phone
   Aim: combined width equals the unified control width (320px). We distribute
   space with small gap. Adjust sizes if design needs tweak.
*/
.combined-pair {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.combined-pair .first {
  box-sizing: border-box;
  width: 90px; /* postnr/prefix */
  height: 28px;
  padding: 4px 6px;
}

.combined-pair .second {
  box-sizing: border-box;
  width: calc(
    320px - 90px - 8px
  ); /* remaining space: unified width - first - gap */
  max-width: calc(100% - 90px - 8px);
  height: 28px;
  padding: 4px 6px;
}

/* Specific class names used in existing markup: make sure common classes map */
.crsInput input.postnr,
.crsInput input.zipCode,
input.postnr {
  width: 90px;
  box-sizing: border-box;
}
.crsInput input.city,
input.sted {
  width: calc(320px - 90px - 8px);
  box-sizing: border-box;
}

.crsInput input.prefix,
input.prefix {
  width: 90px;
  box-sizing: border-box;
}
.crsInput input.phone,
input.phone {
  width: calc(320px - 90px - 8px);
  box-sizing: border-box;
}

/* If form uses table rows/cells, ensure inputs sit in a consistent cell start */
form#reg1 td,
form#reg1 th {
  vertical-align: middle;
}

/* Strong overrides for specific classes frequently present in forms.
   These ensure small fields (prefix/postnr) and their companion fields
   (phone/city) combine to the unified control width and avoid being
   expanded by other layout rules.
*/
input.prefix,
input.zipCode,
input.postnr,
.prefix,
.zipCode,
.postnr {
  display: inline-block;
  box-sizing: border-box;
  width: 90px !important; /* small field */
  max-width: 100%;
  height: 28px;
  padding: 4px 6px;
  vertical-align: middle;
}

input.phone,
input.city,
.phone,
.city {
  display: inline-block;
  box-sizing: border-box;
  width: calc(320px - 90px - 8px) !important; /* companion field */
  max-width: 100%;
  height: 28px;
  padding: 4px 6px;
  vertical-align: middle;
}

/* If markup wraps pairs in a container, ensure the container doesn't stretch
   beyond the unified width and keeps the two inputs on a single line. */
.combined-pair {
  max-width: 320px;
}

/* Icon utility classes (Font Awesome integration) */
.icon-success {
  color: var(--color-success);
}
.icon-warning {
  color: var(--color-warning);
}
.icon-error {
  color: var(--color-danger-strong);
}
.icon-success,
.icon-warning,
.icon-error {
  font-size: 1.1em;
  vertical-align: middle;
}