/* Keep short lists on a single line */

:root {
  --link-color: rgb(222, 51, 151);
  --deemph-color: #9ea0b6;
}

@font-face {
  font-family: 'Cabin';
  src: url('/Cabin-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

body, button, input { font-family: 'Cabin', sans-serif; font-size: 16px; }
button { border: none; background: none; text-decoration: underline; cursor: pointer; color: var(--deemph-color); }
button:disabled { cursor: auto; }
h1 { font-size: 36pt; font-weight: 400; margin-left: .3em; margin-top: .3em; }
a { color: var(--link-color); text-decoration: none; }
.chilla { color: var(--deemph-color); text-decoration: underline; }

.header-bar { width: 1100px; display: flex; justify-content: space-between; align-items: center; }

.user-area { display: flex; align-items: center; gap: 10px; }
.user-area .username { color: var(--deemph-color); }

#settings-modal { padding: 20px; }
#settings-modal input, #settings-modal button { margin-left: 0px; padding-left: 0px; }

/* Beatmaps table */
.table-container { position: absolute; bottom: 0px; width: 1100px; }
.table-scroll { max-height: calc(100vh - 100px); overflow-y: auto; }
table.beatmaps { border-collapse: collapse; width: 100%; table-layout: fixed; }
table.beatmaps td, table.beatmaps th { padding: 10px; }
table.beatmaps thead th { position: sticky; top: 0; background: white; z-index: 1; white-space: nowrap; color: var(--deemph-color); }
table.beatmaps tbody tr:hover { background-color: #ddd; }
.numeric-cell { text-align: right; }

#more-dialog { padding: 15px; }

table.beatmaps tbody tr td button { display: none; }
table.beatmaps tbody tr:hover td button { display: inline; }

/* Filter inputs */
.threecharminmaxcell { width: 35px; text-align: right; }
.fivecharminmaxcell { width: 45px; text-align: right; }

.chillinput {
  color: var(--deemph-color);
  text-decoration: underline;
  border: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
  margin: 0;
}

input, .chillinput:focus {
  color: black;
  text-decoration: none;
  outline: none;
  border: solid 1px var(--deemph-color);
}

.chillinput:focus { cursor: text; }

.filter-row {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 10;
  color: var(--deemph-color);
  display: none;
}

.filter-row td { padding: 4px; vertical-align: top; }
.filter-row label { white-space: nowrap; }
.namefiltercell { white-space: nowrap; }

.pager-row { position: sticky; bottom: 0; background: white; z-index: 9; }
.pager { text-align: center; padding: 10px; color: var(--deemph-color); }
.pager button { text-decoration: none; }

dialog { border: none; border-radius: 1px; padding: 5px; background: white; margin: 0px; position: absolute; }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog:not(:modal), #settings-modal { border: solid 1px #000; }
.modal { z-index: 50; }

.comments {
    padding-top: 5px;
    margin-left: 15px;
    font-size: 13px;
}
.commentsdate {
    margin-left: 15px;
}
.comments:empty {
    display: none;
}

.helppopup {
  position: fixed;
  width: 150px;
  border: solid 1px #000;
  font-size: small;
  padding: 5px;
  background: white;
  z-index: 100;
  white-space: pre-line;
}
.help-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.helppopuptitle {
  font-size: medium;
}

#welcome-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  z-index: 200;
  padding: 10px;
  border: solid 1px #000;
}