.thaw-config-provider {
  font-size: 12px;
}

.color-scheme--light {
  --brand-color: #3267ad;
  --app-background-color: #efebe8;
  --table-wrapper-box-shadow-color: #666666;
  --table-background-color: white;
  --table-background-color-selected: color-mix(in srgb, white 70%, var(--brand-color));
  --table-border-color: #e0e0e0;
  --drawer-background-color: #f9f7f6;
}
.color-scheme--light .thaw-switch__input:enabled:not(:checked) ~ .thaw-switch__indicator {
  color: white;
  --colorCompoundBrandBackground: #479ef5;
  background-color: var(--colorCompoundBrandBackground);
  border-color: var(--colorTransparentStroke);
}

.color-scheme--dark {
  --brand-color: #3267ad;
  --app-background-color: #1e1c1c;
  --table-wrapper-box-shadow-color: #101010;
  --table-background-color: #202020;
  --table-background-color-selected: color-mix(in srgb, black 70%, var(--brand-color));
  --table-border-color: #4c4c4c;
  --drawer-background-color: #323232;
}

body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0.1em 0 0.1em 0;
}

.app {
  min-height: 100vh;
}

.app-bar {
  background: var(--brand-color);
  color: white;
  padding: 0 1em;
}
.app-bar h1 {
  font-size: x-large;
  margin: 0;
}

.app-contents {
  background-color: var(--app-background-color);
  height: fit-content;
  padding: 0 1em 1em 1em;
}

.sample-matchups {
  width: 100%;
}
.sample-matchups h3 {
  margin: 0.5em 0 0.5em 0;
}

table-wrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  transition: height 0.5s ease;
  border-radius: 0.5em;
  box-shadow: -2px 3px 15px -6px var(--table-wrapper-box-shadow-color);
}
table-wrapper table {
  background-color: var(--table-background-color);
  width: 100%;
  line-height: 2;
  border-collapse: collapse;
}
table-wrapper table td {
  border-bottom: 0.05em solid var(--table-border-color);
  padding: 0.2em 1em;
}

.army_view {
  align-items: flex-start;
  padding: 1em;
}
.army_view button.new_army .name {
  padding: 0.2em;
  font-size: 1.5em;
}
.army_view .army_list h2 {
  margin: 0.5em 0 0.2em 0;
  display: flex;
  justify-content: space-between;
}
.army_view .army_list h2 a:link, .army_view .army_list h2 a:visited {
  color: var(--box-color);
}
.army_view .army_list button.rm_army {
  padding: 0;
  margin-left: 0.2em;
  border: 0;
  height: 1em;
  width: 1em;
  border-radius: 0.5em;
}

.army_details.thaw-overlay-drawer {
  padding: 0.2em;
  position: fixed;
  top: 0;
  background-color: color-mix(in srgb, var(--drawer-background-color), rgba(255, 255, 255, 0.8));
  border: 1px solid gray;
  width: 40%;
  max-height: calc(100vh - 1px);
}
.army_details.thaw-overlay-drawer .thaw-drawer-body {
  padding: 0;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body h3 {
  margin: 0 0 0.2em 0;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body h3 button {
  min-width: 0;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body h3 button div.name {
  padding: 0.2em 0.5em;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body h3 .thaw-space__item {
  align-self: center;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body span.unit {
  font-weight: bold;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body table-wrapper {
  flex-shrink: 0;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body table {
  background-color: color-mix(in srgb, var(--table-background-color), rgba(255, 255, 255, 0.2));
  line-height: 1.35;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body table td {
  text-align: center;
  padding: 0;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body table td:nth-child(2),
.army_details.thaw-overlay-drawer .thaw-drawer-body table td:nth-child(3) {
  width: 2em;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body.thaw-overlay-drawer--position-right {
  right: 0;
}
.army_details.thaw-overlay-drawer .thaw-drawer-body.thaw-overlay-drawer--position-left {
  left: 0;
}

specialrules-def-list {
  overflow-y: scroll;
}
specialrules-def-list p {
  margin: 0.1em 0 0.1em 0;
}

tr.selected {
  background-color: var(--table-background-color-selected);
}

special-rule {
  text-decoration: underline dotted;
}

rule-name {
  font-weight: bold;
}