: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,
.theme-black .tab-slider,
.theme-black .ticker-btn,
.theme-black input,
.theme-black .input-group-addon,
.theme-black .bg-light,
.theme-black .input-group-text,
.theme-black .dropdown-item:hover, 
.theme-black .dropdown-menu>li>a:hover, 
.theme-black a.list-group-item:hover{
  background-color: #686868 !important;
  color: #ffff00 !important;
}

.theme-black .card,
.theme-black .card-body,
.theme-black .page-link,
.theme-black .wizard-card,
.theme-black .fa-inverse,
.theme-black .skip-link,
.theme-black .dropdown-menu,
.theme-black .tab {
  background-color: #302d2d !important;
  color: #ffff00 !important;
  --bs-dropdown-bg: #302d2d !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: #686868 !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,
    .theme-gray .tab-slider,
    .theme-gray input,
    .theme-gray .input-group-addon,
    .theme-gray .bg-light,
    .theme-gray .input-group-text,
    .theme-gray .ticker-btn,
    .theme-gray .dropdown-item:hover,
    .theme-gray .dropdown-menu > li > a:hover,
    .theme-gray .a.list-group-item:hover {
        background-color: #000000 !important;
        color: #ffff00 !important;
    }

.theme-gray .card,
.theme-gray .card-body,
.theme-gray .page-link,
.theme-gray .wizard-card,
.theme-gray .fa-inverse,
.theme-gray .skip-link,
.theme-gray .dropdown-menu,
.theme-gray .tab {
  background-color: #443e3e !important;
  color: #ffff00 !important;
  --bs-dropdown-bg: #443e3e !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;
  }

  .theme-gray .store-logo {
    background: gray;
  }

  /* 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 .img-invertable,
    .theme-gray .img-invertable
    {
        filter:invert()
    }
    .theme-black input::placeholder,
    .theme-black textarea::placeholder,
    .theme-gray input::placeholder,
    .theme-gray textarea::placeholder {
        color: #ababab !important;
    }

  .theme-black .nav-pills > li > a,
  .theme-gray .nav-pills > li > a {
    color: #ffff00 !important;
  }

  .theme-black footer p a,
  .theme-gray footer p a {
    color: var(--bs-link-color) !important;
  }

.theme-black * {
  --bs-modal-bg: #000000;
  --bs-card-color: #686868 !important;
}

.theme-gray * {
  --bs-modal-bg: #686868;
  --bs-card-color: #000000 !important;
}

html.font-10 {
  font-size: 10px;
}

html.font-12 {
  font-size: 12px;
}

html.font-14 {
  font-size: 14px;
}

html.font-16 {
  font-size: 16px;
}

html.font-18 {
  font-size: 18px;
}

.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);
  }

.font-adjust-button {
  padding-inline: 8px !important;
  color: rgb(37, 83, 121) !important;
  background: none !important;
  box-shadow: none !important;
}

  .font-adjust-button:hover,
  .font-adjust-button:focus-within {
    color: rgb(37, 83, 121) !important;
    background: none !important;
  }

  .font-adjust-button:focus-within {
    outline: 2px solid rgb(37, 83, 121) !important;
  }

.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 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-top: 8px;
}


.top-toolbar .search-container input {
  border-radius: 50rem 0 0 50rem;
  border: 1px solid #555;
  padding: 0 1.2em;
}

.top-toolbar .search_button {
  border-radius: 0 50rem 50rem 0;
  padding: .4em 1.5em .5em 1.2em;
  height: fit-content;
}

.top-toolbar .btn-group {
  align-items: center;
}

.top-toolbar .btn-group button {
  padding: .33em 1em;
  height: fit-content;
  margin: 0 !important;
}

.top-toolbar .btn-group button:first-child {
  border-radius: 50rem 0 0 50rem;
  padding-left: 1.5em;
}

.top-toolbar .btn-group button:last-child {
  border-radius: 0 50rem 50rem 0;
  padding-right: 1.5em;
}

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

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

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

.search-form-tablet {
  display: none;
}

.search-form-mobile {
  display: none;
  margin-top: 2px;
  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;
}

.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;
  }

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

  .search-form-mobile {
    display: flex;
    width: 100%;
    align-items: center;
    padding-inline: 8px;
  }
}

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

  .search-form-tablet {
    display: flex;
    width: 100%;
    max-width: 576px;
    align-items: center;
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 991px) {
  .toolbar_navbar .top-toolbar {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .skip {
    display: none;
  }
}