h1, h2, h3, h4, h5, h6 {
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-weight:400;
}



body, p {
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-weight:300;
}

[data-bs-theme='light'] .st-hover-gray:hover{color:#111!important;background-color:#eee!important}
[data-bs-theme='dark'] .st-hover-gray:hover{color:#eee!important;background-color:#111!important}
.st-darkblue,.st-hover-lightgreen:hover{color:#fff!important;background-color:#5FA8D3!important}
.st-good {color:#fff!important;background-color:#088!important}
.st-bad {color:#fff!important;background-color:#FF8C00!important}

/* Bootstrap overrides */


.btn-primary {
  background-color: #62B6CB; /* Your new background color */
  border-color: #62B6CB; /* Your new border color */
}

.btn-primary:hover {
  background-color: #417987; /* Your new hover background color */
  border-color: 417987; /* Your new hover border color */
}

.btn.btn-primary:disabled{
  background-color: #cccccc;
  border-color: #cccccc;
}

[data-bs-theme='light'] .nav {
  --bs-nav-tabs-link-active-bg: #f9f9f9;
  --bs-nav-tabs-link-active-border-color:#f8f8f8;
  --bs-nav-link-color:#888;
}
[data-bs-theme='light'] .tab-content {background:#f8f8f8;}


[data-bs-theme='dark'] .nav {
  --bs-nav-tabs-link-active-bg: #060606;
  --bs-nav-tabs-link-active-border-color:#060606;
  --bs-nav-link-color:#888;
}
[data-bs-theme='dark'] .tab-content {background:#060606;}

.navbar {
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.95);
}

/* boxes for use in number summaries such as the subscriptions page */
.box {
  background-color: lightgray;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box .small-text {
  font-size: 0.8rem;
}
.box .large-number {
  font-size: 2.5rem;
}

/* popovers are used for exenstive help hints. This makes them wide enough */
.st-popover {
    max-width: 400px;
    background-color: #FF8C00;
    --bs-popover-max-width: 400px;
    --bs-popover-border-color: var(--bd-violet-bg);
    --bs-popover-header-bg: var(--bd-violet-bg);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;

}

.input-container {
  position: relative;
  display: inline-block;
}

.focus-button {
  position: absolute;
  top: 50%;
  right: -50px; /* Adjust as needed */
  transform: translateY(-50%);
  display: none;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

/* You may also want to change the active and focus states 
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: #yourNewActiveColor;  Your new active background color 
  border-color: #yourNewActiveBorderColor; Your new active border color 
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(yourNewColorRGB, .5);  Your new shadow color 
}*/


/* Responsive content */
/* Hide the content by default */

/* Show "responsive-large" for screens more than 800px */
@media (min-width: 768px) {
  div.st-widget {
      width: 310px !important;
      height: 340px !important;
  }
}

/* Show "responsive-medium" for screens less than 800px */
@media (max-width: 767px) {
  div.st-widget {
    width: 200px !important;
    height: 258px !important;
  }
}


[data-bs-theme='dark'] .st-theme-invert {
    filter: invert(100%)  brightness(67%) ;
  }

[data-bs-theme='light'] .st-theme-invert {
    filter: contrast(30%);
}


.video-container {
  position: relative;
  width: 80%;
  max-width: 800px;
}
video {
  width: 100%;
  display: block;
}
.overlay-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  gap: 15px;
}
.overlay-button {
  background: rgba(0, 0, 0, 0.7);
  padding: 15px 30px;
  font-size: 20px;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.3s;
}
.overlay-button:hover {
  background: rgba(0, 0, 0, 0.8);
}