:root {
  --bs-modal-bg: #ffffff;
}

/* Themes */
.theme-default {
  background-color: #ffffff;
  color: #000000;
}

/*Same background color*/
.theme-black,
.theme-black .top_header,
.theme-black .our-business,
.theme-black .wsfixed,
.theme-black .model-content,
.theme-black .base-footer-2,
.theme-black .awards-recognition,
.theme-black td,
.theme-black .panel-body,
.theme-black .datepicker .datepicker-switch:hover,
.theme-black .datepicker .prev:hover,
.theme-black .datepicker .next:hover {
  background-color: #000000 !important;
  color: #ffff00 !important;
}

 /*Different background color for interactive elements*/
.theme-black select,
.theme-black select option,
.theme-black .sub-menu,
.theme-black .sub-menu > li,
.theme-black .wsmenu > .wsmenu-list > li > a:hover,
.theme-black .short-box,
.theme-black .download_list li a,
.theme-black .panel-title > a,
.theme-black .datepicker table,
.theme-black .datepicker .day:hover,
.theme-black .datepicker td span:hover,
.theme-black .datepicker .focused,
.theme-black .datepicker table tr td span.focused,
.theme-black .datepicker table tr td span:hover {
  background-color: #808080 !important;
  color: #ffff00 !important;
}

.theme-black .top_header a:hover {
  color: #ffffff !important;
}

/*Same background color*/
.theme-gray,
.theme-gray .top_header,
.theme-gray .our-business,
.theme-gray .wsfixed,
.theme-gray .model-content,
.theme-gray .base-footer-2,
.theme-gray .awards-recognition,
.theme-gray td,
.theme-gray .panel-body,
.theme-gray .datepicker .datepicker-switch:hover,
.theme-gray .datepicker .prev:hover,
.theme-gray .datepicker .next:hover {
  background-color: #808080 !important;
  color: #ffff00 !important;
}

/*Different background color for interactive elements*/
.theme-gray select,
.theme-gray option,
.theme-gray .sub-menu,
.theme-gray .sub-menu>li,
.theme-gray .wsmenu > .wsmenu-list > li > a:hover,
.theme-gray .short-box,
.theme-gray .download_list li a,
.theme-gray .panel-title > a,
.theme-gray .datepicker table,
.theme-gray .datepicker .day:hover,
.theme-gray .datepicker td span:hover,
.theme-gray .datepicker .focused,
.theme-gray .datepicker table tr td span.focused, 
.theme-gray .datepicker table tr td span:hover {
  background-color: #000000 !important;
  color: #ffff00 !important;
}

.theme-black .font-adjust-button,
.theme-black .font-adjust-button:focus-within,
.theme-gray .font-adjust-button:focus-within,
.theme-gray .font-adjust-button {
  color: #ffff00 !important;
}

/* Ensure text inherits theme color */
.theme-black *,
.theme-gray * {
  color: inherit !important;
}

.theme-black input,
.theme-black textarea,
.theme-gray input,
.theme-gray textarea {
  color: #000 !important;
}

.theme-black footer p a,
.theme-gray footer p a {
  color: var(--bs-link-color) !important;
}
.theme-black * {
  --bs-modal-bg: #000000;
}
.theme-gray * {
  --bs-modal-bg: #808080;
}

.btn-theme {
  height: 100%;
  width: 100%;
}

.btn-theme-default {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

.btn-theme-dark {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 1px solid #ffff00 !important;
}

.btn-theme-gray {
  background: #464646 !important;
  color: #ffff00 !important;
  border: 1px solid #ffff00 !important;
}

/* Shared behavior */
.btn-theme-default,
.btn-theme-dark,
.btn-theme-gray {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* DEFAULT THEME */
.btn-theme-default:hover,
.btn-theme-default:focus-visible {
  background: #dedede !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* BLACK THEME */
.btn-theme-dark:hover,
.btn-theme-dark:focus-visible {
  background: #1a1a1a;
  color: #ffff00;
  box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.35);
}

/* GRAY THEME */
.btn-theme-gray:hover,
.btn-theme-gray:focus-visible {
  background: #5c5c5c;
  color: #ffff00;
  box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.35);
}

.btn:disabled {
  cursor: not-allowed;
}

.wsmenucontainer {
  min-height: 100dvh;
}

.theme-black .fix_table thead tr {
  background-color: #284b8c !important;
}
.theme-gray .fix_table thead tr {
  background-color: #284b8c !important;
}

.toolbar_navbar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.mobile-top-toolbar {
  display: none;
  padding-top: 4px;
}

.top-toolbar .btn-group,
.mobile-top-toolbar .btn-group {
  height: 41px;
}

.search-container {
  display: flex;
  align-items: center;
  position: relative;
}

/* Search form */
.search-form {
  width: 500px;
  display: flex;
  margin-bottom: 0;
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
}

.search_button {
  border: 0 none;
  background: #154063;
  width: 41px;
  height: 41px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 16px;
}

/*CRXXXX-WCAG 2.2 (A) - 2.4.1*/
.skip {
  float: inline-start;
  height: 38px;
  padding: 8px;
  opacity: 0;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  width: 1px;
}

.skip:focus,
.skip:focus-within {
  opacity: 100;
  width: fit-content;
}
/*End CRXXXX-WCAG 2.2 (A) - 2.4.1*/

/* -------- Mobile Styles -------- */
@media only screen and (max-width: 768px) {
  .mobile-top-toolbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 991px) {
  .mobile-top-toolbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
}

@media only screen and (max-width: 991px) {
  .toolbar_navbar .top-toolbar {
    display: none;
  }
}
/*CRXXXX-WCAG 2.2 (A) - 2.4.1*/
@media only screen and (max-width: 768px) {
  .skip {
    display: none;
  }
}
/*End CRXXXX-WCAG 2.2 (A) - 2.4.1*/