html[data-theme=light] #logo {
  content: url("/static/img/logo.png")
}

html[data-theme=dark] #logo {
  content: url("/static/img/logo-white.png")
}

.workout-margin {
  margin-right: 1ex;
  margin-bottom: 1ex;
}

article {
  margin-top: 0ex;
  margin-bottom: 2ex;
}

footer {
  padding-top: 3ex !important;
  padding-bottom: 3ex !important;
}

main {
  padding-top: 3ex !important;
  padding-bottom: 1ex !important;
}

a.active {
  font-weight: bold;
}

:root {
  --spacing-top-custom: 3ex;
  --btn-max-width: 768px;
}

/* Azure color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-text-selection-color: rgba(2, 154, 232, 0.25);
  --pico-primary: #0172ad;
  --pico-primary-background: #0172ad;
  --pico-primary-underline: rgba(1, 114, 173, 0.5);
  --pico-primary-hover: #015887;
  --pico-primary-hover-background: #02659a;
  --pico-primary-focus: rgba(2, 154, 232, 0.25);
  --pico-primary-inverse: #fff;
}

/* Azure color for dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
    --pico-primary: #01aaff;
    --pico-primary-background: #0172ad;
    --pico-primary-underline: rgba(1, 170, 255, 0.5);
    --pico-primary-hover: #79c0ff;
    --pico-primary-hover-background: #017fc0;
    --pico-primary-focus: rgba(1, 170, 255, 0.25);
    --pico-primary-inverse: #fff;
  }
}

/* Azure color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme=dark] {
  --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
  --pico-primary: #01aaff;
  --pico-primary-background: #0172ad;
  --pico-primary-underline: rgba(1, 170, 255, 0.5);
  --pico-primary-hover: #79c0ff;
  --pico-primary-hover-background: #017fc0;
  --pico-primary-focus: rgba(1, 170, 255, 0.25);
  --pico-primary-inverse: #fff;
}


input:invalid {
  border: 1px solid var(--pico-form-element-invalid-border-color);
  box-shadow: none;
}

input:focus:invalid {
  border: 1px solid var(--pico-form-element-invalid-border-color);
  box-shadow: 0 0 4px var(--pico-form-element-invalid-border-color);
}

.error {
  background-color: var(--pico-form-element-invalid-border-color);
  color: #fff;
  text-align: center;
  padding: 1ex;
  border-radius: 4px;
}

th {
  font-weight: bold;
}

.hero-img {
  display: block;
  background-color: #374956;
  background-image: url("/static/img/gym.jpg");
  background-position: center;
  background-size: cover;
}

.login-article {
  padding: 0;
  overflow: hidden;
}

.login-form {
  padding: var(--spacing-top-custom) var(--pico-block-spacing-horizontal);
}

.workouts {
  display: inline-block;
  position: relative;
}

.badge {
  position: absolute;
  top: -5px;
  right: 0;
  background-color: var(--primary);
  padding: 2px 4px;
  border-radius: 10px;
  color: #fff;
  font-size: 8pt;
  min-width: 20px;
  text-align: center;
}

hgroup.workout-list-header {
  margin-bottom: 0;
}

.pointer {
  cursor: pointer;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-request.htmx-indicator {
  opacity: 1;
}


/* -------------------- */

.gg-radio-checked,
.gg-radio-checked::after {
    display: block;
    box-sizing: border-box;
    border-radius: 100px
}
.gg-radio-checked {
    border: 2px solid;
    position: relative;
    transform: scale(var(--ggs,1));
    width: 20px;
    height: 20px
}
.gg-radio-checked::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: currentColor;
    top: 4px;
    left: 4px
}

.gg-radio-check {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 100px
}

@-moz-document url-prefix() {
  [type=date],
  [type=datetime-local],
  [type=month],
  [type=time],
  [type=week] {
    padding-right:var(--pico-form-element-spacing-horizontal)!important;
    background-image:none!important
  }
}