index.css

.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  */
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 */
#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; }

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

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

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