.white-btn, .shot-info, .grey-btn, .reorder-ghost, .example, table thead, table tbody {
  background-color: #eaecef;
  border: 1px solid #aaaaaa;
  border-radius: 0.2rem; }

#appearance-options, #special-details-options {
  font-size: 0.85rem;
  font-weight: 400; }
  #appearance-options h6, #special-details-options h6 {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left; }

.smaller-text {
  font-size: 0.75rem; }

/* index page */
#index {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; }
  #index .card {
    cursor: pointer;
    width: 30%; }
    #index .card:hover {
      box-shadow: 0.75rem 0.75rem 0.2rem #f2f4f5; }
      #index .card:hover .card-footer a {
        background-color: #dee0e3; }
    #index .card .card-header {
      padding: 0.4rem; }
    #index .card .bold {
      font-weight: 400; }
    #index .card label {
      padding-left: 1em;
      padding-right: 0.25rem;
      font-variant-caps: all-petite-caps;
      font-weight: 500;
      font-size: 0.9rem; }
    #index .card input {
      width: 3rem;
      margin: 0.1rem 0;
      margin-right: 0.4rem; }
  #index a {
    color: black;
    text-decoration: none; }

/* general  */
.header { position: relative; }

.reset-all-btn {
  position: absolute;
  right: 1rem;
  top: 0.75rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: #fff0f0;
  border: 1px solid #e63946;
  border-radius: 0.2rem;
  color: #e63946;
  cursor: pointer; }
  .reset-all-btn:hover {
    background: #e63946;
    color: white; }

h1 {
  cursor: pointer;
  font-weight: bold; }
  h1:hover {
    text-shadow: 0.15rem 0.15rem 0.05rem #dee0e3; }

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  margin: 1rem; }

footer {
  font-size: 0.75rem; }

.main {
  display: flex;
  justify-content: space-between; }

.white-bg {
  background-color: white; }

ul {
  list-style: none; }

.grey-hover-bg, .grey-btn {
  background-color: #eaecef; }
  .grey-hover-bg:hover, .grey-btn:hover {
    background-color: #dee0e3; }

.white-btn {
  background-color: white; }
  .white-btn:hover {
    background-color: #f2f4f5; }

.small-text {
  font-size: 0.75rem; }

.medium-text {
  font-size: 0.85em; }

.shift {
  font-variant: small-caps;
  font-weight: 500; }

/* utility */
.center {
  display: flex;
  justify-content: center;
  align-items: center; }

/* shot info */
.shot-info {
  width: 30%;
  padding: 1rem;
  margin-bottom: 1rem;
  flex-grow: 1; }

select {
  width: 100%; }

.bi-info-circle {
  font-size: 0.75rem; }

input[type="text"] {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  border: 1px solid #aaaaaa;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
  width: 100%; }

.team-input {
  margin-bottom: 0.5rem; }

.detail-row {
  display: flex;
  justify-content: space-evenly; }

.even-width {
  width: 50%;
  padding: 0.5rem; }

.vr {
  border-right: 1px solid #aaaaaa;
  margin: 0.5rem; }

/* detail modal */
.uninteractable {
  background-color: #eaecef; }
  .uninteractable:active, .uninteractable:focus, .uninteractable:hover {
    background-color: #eaecef; }

.footer-row {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  display: flex;
  justify-content: space-between; }

.form-label {
  font-weight: bolder;
  font-size: 0.95rem; }

.form-group {
  margin: 0.5rem 0; }

.time-widget {
  display: flex; }

.time-box:disabled {
  background-color: #f2f4f5; }

.time-btn {
  padding: 0 0.5rem;
  margin-left: 0.5rem;
  font-size: 1rem; }

#main-page-mb h5 {
  text-align: center;
  font-weight: 700;
  font-size: 1rem; }
#main-page-mb p {
  margin-bottom: 0.3rem;
  font-size: 0.85rem; }

.widgets-dropdown-label {
  margin-left: 0.5rem; }

.bi-eye-fill,
.bi-eye-slash-fill,
.bi-pencil-square {
  cursor: pointer; }
  .bi-eye-fill:hover,
  .bi-eye-slash-fill:hover,
  .bi-pencil-square:hover {
    color: #aaaaaa;
    text-shadow: 0.1rem 0.1rem black; }

#reorder {
  margin: 1rem 0; }

.reorder-item {
  border: 1px solid #aaaaaa;
  background-color: #f2f4f5;
  font-weight: 400;
  padding: 0.2rem 0.5rem;
  cursor: move; }

.reorder-item-icons {
  display: flex;
  justify-content: space-between; }

.reorder-ghost {
  background-color: white;
  border-color: #eaecef;
  color: #aaaaaa; }

.save-changes-btn {
  margin: 0.5rem; }

.column-btns {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-around; }

#appearance-options .page-size-form {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem; }
  #appearance-options .page-size-form #page-size-field {
    width: 3rem;
    padding: 0.1rem;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    border: 1px solid #aaaaaa; }

#special-details-options .form-switch {
  margin-bottom: 0; }

#reset-defaults {
  display: flex;
  justify-content: right;
  align-items: center; }
  #reset-defaults #reset-defaults-btn {
    padding: 0.2rem; }

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }

.card {
  width: 45%;
  font-size: 0.75rem;
  margin: 1rem 0;
  border-color: #aaaaaa; }

.card-footer {
  padding: 0;
  border-color: #aaaaaa; }

.card-header {
  border-color: #aaaaaa;
  background-color: #fafafa; }

.card-btn {
  font-size: 0.9rem;
  width: 100%;
  padding: 0.5rem 0.25rem;
  border: 0;
  color: black; }

.example {
  margin: 0.75rem 0; }

.new-option {
  display: flex; }
  .new-option * {
    margin-right: 0.2rem;
    margin-left: 0.2rem; }

.add-option-btn {
  margin-top: 0.35rem;
  font-size: 0.9rem; }

.textarea {
  resize: none;
  border-color: #8a8a8a; }

/* rink */
.dot-text {
  font-weight: 600;
  fill: white; }

.toggle-area {
  display: flex;
  font-weight: 400;
  gap: 0.3rem; }
  .toggle-area .form-switch {
    padding-left: 0; }
    .toggle-area .form-switch .form-check-input {
      margin: 0.3rem 1rem 0; }

#legend {
  font-weight: 400;
  font-size: 0.9rem; }

/* shot table */
table *::placeholder {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  color: #8a8a8a; }
table thead {
  padding: 1rem 0; }
  table thead td,
  table thead th {
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa; }
  table thead td {
    border-bottom: 1px solid black; }
  table thead th {
    border-bottom: 0; }
  table thead #filters {
    display: none; }
    table thead #filters td {
      padding-top: 0; }
  table thead th.row-span {
    border-bottom: 1px solid black;
    padding-bottom: 0.5rem; }
  table thead #clear-filter-icon:hover {
    color: #aaaaaa;
    text-shadow: 0.15rem 0.15rem black;
    cursor: pointer; }
  table thead .bi-funnel-fill:hover {
    color: #aaaaaa;
    text-shadow: 0.1rem 0.1rem black;
    cursor: pointer; }
  table thead .bi-funnel-fill.open {
    color: #aaaaaa;
    text-shadow: 0.1rem 0.1rem black;
    cursor: pointer; }
    table thead .bi-funnel-fill.open:hover {
      color: black;
      text-shadow: 0;
      cursor: pointer; }
  table thead .filter {
    font-size: 0.8rem; }
    table thead .filter input {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      border: 1px solid #aaaaaa;
      border-radius: 0.25rem;
      padding: 0.25rem 0.5rem;
      margin: 0;
      box-sizing: content-box; }
      table thead .filter input[type="number"] {
        width: 3.1em; }
    table thead .filter .smaller-text {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 0.8rem; }
    table thead .filter span {
      text-align: center;
      margin: 1em;
      font-weight: 500; }
  table thead .min-max-time input {
    width: 3em; }
  table thead .text-filter input {
    width: 6em; }
table tbody {
  background-color: white; }
table tfoot #table-navigation {
  text-align: right; }
  table tfoot #table-navigation button,
  table tfoot #table-navigation span {
    padding: 0 0.25em; }
table tfoot * * {
  border: 0; }
table .centered-cell {
  text-align: center;
  vertical-align: middle; }

/* playing area */
.period-hidden { visibility: hidden !important; }

#playing-area {
  cursor: crosshair; }
  #playing-area #custom-pa-error-message {
    font-weight: 500;
    font-size: 1.75rem;
    text-align: center; }
    #playing-area #custom-pa-error-message .bold {
      font-weight: 700; }

.ghost-shot {
  opacity: 50%; }

polyline.blueTeam {
  stroke: #35aba9;
  opacity: 30%;
  fill-opacity: 0; }

marker polygon.blueTeam {
  stroke: #35aba9;
  fill: #35aba9; }

polyline.orangeTeam {
  stroke: #ea8e48;
  opacity: 30%;
  fill-opacity: 0; }

marker polygon.orangeTeam {
  stroke: #ea8e48;
  fill: #ea8e48; }

marker polygon.greyTeam {
  stroke: #aaaaaa;
  fill: #aaaaaa; }

polyline.greyTeam {
  stroke: #aaaaaa;
  opacity: 30%;
  fill-opacity: 0; }

.legend-shot {
  fill: black; }

.bi-trash:hover {
  color: black;
  text-shadow: 0.1rem 0.1rem #aaaaaa;
  cursor: pointer; }

.bi-trash-fill:hover {
  color: #aaaaaa;
  text-shadow: 0.1rem 0.1rem black;
  cursor: pointer; }

/* download/upload */
.input-group {
  margin-top: 0.25rem; }

.input-group-text {
  border-radius: 0.25rem 0 0 0.25rem;
  border-color: #aaaaaa; }

.hover {
  background-color: #dee0e3; }

.upload-area {
  display: flex;
  width: 100%;
  cursor: pointer; }

.download-name {
  font-weight: normal; }

.upload-name-box {
  padding: 0.1rem;
  border: 1px solid #aaaaaa;
  border-left: 0;
  flex: 1;
  display: flex;
  align-items: center; }

.upload-name-text {
  font-weight: normal;
  vertical-align: bottom;
  margin-left: 0.5rem; }

/* https://bl.ocks.org/d3noob/a22c42db65eb00d4e369 */
div.tooltip {
  position: absolute;
  text-align: center;
  padding: 0.2rem;
  font-size: 0.75rem;
  background: #aaaaaa;
  border-radius: 0.5rem;
  pointer-events: none; }

/* roster panel */
#roster-panel {
  margin-top: 1.5rem; }

.roster-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem; }

.roster-mode {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  background: #f2f4f5;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.75rem; }

.roster-mode-ready {
  background: #e8f8f0;
  border-color: #2dc653;
  color: #1a7a3a;
  font-weight: 600; }

.add-player-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  align-items: center; }

.roster-input {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  border: 1px solid #aaaaaa;
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem; }

input[type="text"].roster-input-num  { width: 3.5rem; flex: 0 0 3.5rem; }
input[type="text"].roster-input-name { width: auto; flex: 1 1 auto; }

.roster-csv-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem; }

.roster-csv-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  border: 1px solid #aaaaaa;
  border-radius: 0.2rem; }

.roster-upload-label {
  display: inline-flex;
  align-items: center; }

.roster-table {
  font-size: 0.85rem;
  width: 100%; }

.roster-table thead th {
  font-weight: 600;
  background-color: #eaecef;
  border: 1px solid #aaaaaa;
  padding: 0.35rem 0.5rem;
  text-align: center; }

.roster-stat-hdr {
  transition: background-color 0.15s, color 0.15s; }

.roster-stat-hdr:hover {
  background-color: #dee0e3 !important; }

.roster-stat-active:hover {
  opacity: 0.85; }

.roster-table tbody td {
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd; }

.roster-table tbody td:nth-child(2) {
  text-align: left; }

.roster-row:hover {
  background-color: #f2f4f5; }

.roster-player-active {
  background-color: #dce8ff !important;
  font-weight: 600; }

.roster-col-num  { width: 4rem; }
.roster-col-stat {
  width: 5rem;
  text-align: center;
  position: relative; }
.roster-col-del  { width: 2rem; }

.roster-del-btn {
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  line-height: 1;
  border: 1px solid #aaa; }

.roster-minus-btn {
  font-size: 0.75rem;
  padding: 0 0.35rem;
  line-height: 1.2;
  border: 1px solid #aaa;
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s; }

.roster-row:hover .roster-minus-btn {
  opacity: 1; }

/* ── Summary tab ── */
#main-tabs { margin-top: 0.5rem; margin-bottom: 0; }
.tab-content { padding-top: 1rem; }

.summary-filter-bar, .summary-type-bar {
  display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 0.5rem; }

.summary-period-btn, .summary-type-btn {
  padding: 0.2rem 0.7rem; font-size: 0.85rem;
  border: 1px solid #aaaaaa; border-radius: 0.2rem; cursor: pointer; }

.summary-period-active {
  background-color: #0033A0; color: white; border-color: #0033A0; }
.summary-period-active:hover { background-color: #002080; }

.summary-type-btn { font-weight: 500; }

.summary-counts {
  font-size: 0.95rem; font-weight: 400; gap: 1.5rem; margin-bottom: 0.5rem; }

.summary-sep        { color: #aaaaaa; }
.summary-offensive  { color: rgba(53, 171, 169, 1); }
.summary-defensive  { color: rgba(234, 142, 72, 1); }

#summary-rink-svg { display: block; margin: 0 auto; }
#summary-container svg { cursor: default; }

.summary-tables-row {
  display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }

.summary-table-wrap { flex: 1; min-width: 260px; }

.summary-table-title {
  font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }

.summary-stat-table {
  font-size: 0.82rem; width: 100%; }

.summary-stat-table thead th {
  background-color: #eaecef; font-weight: 600;
  padding: 0.3rem 0.5rem; text-align: center;
  border: 1px solid #aaaaaa; }

.summary-stat-table tbody td {
  text-align: center; padding: 0.25rem 0.5rem;
  border: 1px solid #ddd; }

.summary-total-row td {
  font-weight: 700; background-color: #f2f4f5;
  border-top: 2px solid #aaaaaa; }

@media (max-width: 768px) {
  .main {
    display: block; }

  .shot-info {
    height: auto;
    width: 100%; } }

/*# sourceMappingURL=index.css.map */