:root {
  --cb-black: #0b0b10;
  --cb-grey-back: #191924;
  --cb-white: #f4f4ff;
  --cb-white-80: rgba(244, 244, 255, 0.8);
  --cb-accent-warm: #f6a192;
  --cb-accent-warm-60: rgba(246, 161, 146, 0.6);
  --cb-accent-warm-40: rgba(246, 161, 146, 0.4);
  --cb-accent-purple: #ca94f7;
  --cb-accent-purple-60: rgba(202, 148, 247, 0.6);
  --cb-accent-purple-40: rgba(202, 148, 247, 0.4);
  --cb-border-subtle: #2a2a38;
  --cb-surface: #222230;
  --cb-surface-hover: #2a2a3c;
  --cb-input-bg: #262638;
  --cb-input-bg-hover: #2f2f44;
  --cb-input-border: #3a3a55;
  --cb-input-border-focus: #5b5bbf;
  --cb-spacing-breakpoint: 1600px;
  --cb-footer-height: 75px ;
}

/* _font-styles.scss */
.cb-main-text {
  font-size: 16px;
  line-height: 26px;
}

.cb-main-secondary {
  font-size: 12px;
  line-height: 22px;
  color: var(--cb-white-80);
}

.cb-secondary-text {
  font-size: 12px;
  line-height: 22px;
}

.cb-info-text {
  font-size: 20px;
  line-height: 30px;
}

.cb-info-text-big {
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
}

.cb-info-text-large {
  font-size: 40px;
  line-height: 50px;
  font-weight: bold;
}

.cb-info-text-huge {
  font-size: 64px;
  line-height: 74px;
  font-weight: bold;
}

.cb-cap {
  text-transform: uppercase;
}

.cb-bold {
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/* _main.scss */
:root {
  --topnav-height: 80px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  background: linear-gradient(75deg, var(--cb-black) 0%, var(--cb-grey-back) 100%);
  color: var(--cb-white);
  font-family: "Rubik", sans-serif;
  margin: 0;
}

.topnav {
  border-bottom: 1px solid var(--cb-border-subtle);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: var(--topnav-height);
  padding: 0 20px;
  background: rgba(25, 25, 36, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topnav .topnav-spacer {
  width: 100%;
  max-width: var(--cb-spacing-breakpoint);
}

.content {
  display: flex;
  justify-content: center;
  padding: calc(var(--topnav-height) + 75px) 20px 75px;
  margin-bottom: 75px;
}
.content .content-spacer {
  width: 100%;
  max-width: var(--cb-spacing-breakpoint);
}

input, button, select, textarea, .tournament-editor-add-team-member {
  background-color: var(--cb-input-bg);
  border-radius: 8px;
  border: 1px solid var(--cb-input-border);
  color: var(--cb-white);
}
input:hover, button:hover, select:hover, textarea:hover, .tournament-editor-add-team-member:hover {
  background-color: var(--cb-input-bg-hover);
}

input, select, textarea {
  width: 100%;
  padding: 10px 15px;
}
input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active {
  border-color: var(--cb-input-border-focus);
}
input:not(.last), select:not(.last), textarea:not(.last) {
  margin-bottom: 20px;
}
input[type=checkbox], input[type=radio], select[type=checkbox], select[type=radio], textarea[type=checkbox], textarea[type=radio] {
  width: auto;
}

button {
  cursor: pointer;
  padding: 5px 20px;
}
button:active {
  transform: scale(0.98);
}

.page-title {
  margin-bottom: 25px;
}

a {
  color: var(--cb-white);
}

[hidden], .is-hidden {
  display: none !important;
}

.cb-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--cb-border-subtle);
  background: rgba(25, 25, 36, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 20px;
}
.cb-footer .cb-footer-wrapper {
  height: var(--cb-footer-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--cb-spacing-breakpoint);
  margin: 0 auto;
}
.cb-footer.cb-footer-save-back button, .cb-footer.cb-footer-back button {
  display: inline-flex;
  min-width: 120px;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 25px;
}
.cb-footer.cb-footer-save-back #cb-footer-save, .cb-footer.cb-footer-back #cb-footer-save {
  background-color: var(--cb-accent-warm-60);
  color: var(--cb-white);
}
.cb-footer.cb-footer-save-back #cb-footer-save:hover, .cb-footer.cb-footer-back #cb-footer-save:hover {
  background-color: var(--cb-accent-warm);
}
.cb-footer.cb-footer-save-back #cb-footer-back, .cb-footer.cb-footer-back #cb-footer-back {
  background-color: var(--cb-accent-purple-60);
  color: var(--cb-white);
}
.cb-footer.cb-footer-save-back #cb-footer-back:hover, .cb-footer.cb-footer-back #cb-footer-back:hover {
  background-color: var(--cb-accent-purple);
}
.cb-footer.cb-footer-save-back span, .cb-footer.cb-footer-back span {
  color: var(--cb-grey-40);
}

/* _tables.scss */
.overview-table {
  width: 100%;
  border-spacing: 0 5px;
  border-collapse: separate;
}
.overview-table .overview-table-header {
  background: linear-gradient(90deg, var(--cb-accent-warm-60), var(--cb-accent-purple-60));
}
.overview-table .overview-table-row {
  background-color: var(--cb-surface);
  cursor: pointer;
}
.overview-table td {
  padding: 14px 25px;
}
.overview-table tr td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.overview-table tr td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.overview-table-add-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  height: 50px;
  background: linear-gradient(90deg, var(--cb-accent-purple-60), var(--cb-accent-warm-60));
  border-radius: 12px;
  margin-top: 50px;
  cursor: pointer;
  user-select: none;
}
.overview-table-add-entry:active {
  transform: scale(0.995);
}

.table-actions-container {
  display: flex;
  gap: 5px;
  user-select: none;
  cursor: default;
}
.table-actions-container a {
  height: 20px;
  cursor: pointer;
}
.table-actions-container img {
  cursor: pointer;
}

/* _editor.scss */
.editor-container {
  background-color: var(--cb-surface);
  padding: 15px;
  margin-top: 10px;
  border-radius: 8px;
}
.editor-container:not(.last) {
  margin: 10px 0 25px;
}
.editor-container .editor-required {
  color: var(--cb-accent-warm);
}
.editor-container .editor-input-section {
  display: flex;
  width: 100%;
  gap: 10px;
}
.editor-container .editor-input-section label {
  width: 100%;
}
.editor-container .editor-input {
  margin-top: 3px;
}
.editor-container .tournament-editor-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.editor-container .tournament-editor-teams-grid h3 {
  margin-bottom: 10px;
}
.editor-container .tournament-editor-teams-grid .tournament-editor-add-team-member {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px;
  user-select: none;
}
.editor-container .tournament-editor-teams-grid .tournament-editor-add-team-member:active {
  transform: scale(0.995);
}
.editor-container .tournament-editor-teams-grid .tournament-editor-add-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  background: linear-gradient(90deg, var(--cb-accent-purple-60), var(--cb-accent-warm-60));
  border-radius: 12px;
  cursor: pointer;
  height: 150px;
  user-select: none;
}
.editor-container .tournament-editor-teams-grid .tournament-editor-add-team:active {
  transform: scale(0.995);
}
.editor-container .tournament-editor-teams-grid .tournament-editor-team-member {
  position: relative;
}
.editor-container .tournament-editor-teams-grid .tournament-editor-team-member label {
  display: block;
}
.editor-container .tournament-editor-teams-grid .tournament-editor-remove-team-member {
  position: absolute;
  top: 10px;
  right: -5px;
  cursor: pointer;
}
.editor-container .tournament-editor-teams-grid .tournament-editor-team {
  position: relative;
}
.editor-container .tournament-editor-teams-grid .tournament-editor-remove-team {
  position: absolute;
  top: 0;
  right: 0;
}
.editor-container .tournament-date-option-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  background: linear-gradient(90deg, var(--cb-accent-purple-60), var(--cb-accent-warm-60));
  border-radius: 12px;
  cursor: pointer;
  height: 50px;
  user-select: none;
  margin-bottom: 15px;
}
.editor-container .tournament-date-option-add:active {
  transform: scale(0.995);
}
.editor-container .tournament-date-option {
  position: relative;
}
.editor-container .tournament-date-option .tournament-date-option-remove {
  position: absolute;
  right: 0;
}
.editor-container .current-teams {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 50px;
}
.editor-container .current-teams .current-teams-team {
  text-align: center;
}
.editor-container .current-teams .current-teams-vs {
  position: absolute;
  display: flex;
  gap: 25px;
  align-items: center;
}
.editor-container .team-stats table {
  width: 100%;
}
.editor-container .team-stats table td .team-stats-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.editor-container .team-stats table td .team-stats-field .adjust-stats-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}
.editor-container .team-stats table td .team-stats-field .select-winner {
  margin-top: 20px;
}
.editor-container .team-stats table td .team-stats-previous-label {
  margin-top: 100px;
}
.editor-container .team-stats table td .rematch-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.editor-container .next-match-up-team-selector {
  width: 500px;
  margin-right: 25px;
}
.editor-container .tournament-registration-info {
  margin-bottom: 50px;
}
.editor-container .tournament-registration-killer-question, .editor-container .tournament-registration-dates-question, .editor-container .tournament-registration-streamer-question {
  margin-bottom: 10px;
}
.editor-container .tournament-registration-date-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  gap: 15px;
  justify-content: center;
  margin-bottom: 15px;
}
.editor-container .tournament-registration-date-selection-grid .tournament-registration-date {
  background-color: var(--cb-input-bg);
  border: 1px solid var(--cb-input-border);
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  user-select: none;
  cursor: pointer;
}
.editor-container .tournament-registration-date-selection-grid .tournament-registration-date.tournament-registration-date-selected {
  border-color: var(--cb-accent-warm);
  background-color: var(--cb-accent-warm-40);
}
.editor-container .submit-registration-container {
  text-align: center;
}
.editor-container .submit-registration-container #submit-registration {
  display: inline-flex;
  min-width: 120px;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 25px;
  background-color: var(--cb-accent-warm-60);
  color: var(--cb-white);
}
.editor-container .submit-registration-container #submit-registration:hover {
  background-color: var(--cb-accent-warm);
}

/* _login.scss */
.login-container-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.login-container-wrapper .login-container {
  background-color: var(--cb-surface);
  padding: 20px;
  border-radius: 12px;
  border-inline: 1px var(--cb-border-subtle) solid;
}
.login-container-wrapper .login-container .login-header {
  margin-bottom: 25px;
}
.login-container-wrapper .login-container .login-button-container {
  text-align: right;
}
.login-container-wrapper .login-container .login-button-container #login {
  background-color: var(--cb-accent-warm-60);
  border-color: var(--cb-accent-warm);
}
.login-container-wrapper .login-container .login-button-container #login:hover {
  background-color: var(--cb-accent-warm-40);
}