:root {
  --default-space: 24px;
  --primary-color: #ffd456;
  --secondary-color: #ec8b10;
  --accent-color: #2a2a2a;
  --success-green: #81c784;
  --common-grey: #211e1e;
  --better-grey: #e2e2e2;
  --light-red: #ffebee;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
/* body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
} */

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  margin: 0;
  background-color: rgb(29, 19, 20);
  background: linear-gradient(30deg, #1d1314 0%, #572011 66%, #a1300e 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: #f5e6d0;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}
p {
  font-size: 0.875rem;
}
input {
  width: 100%;
  border-radius: 32px;
  height: 54px;
  font-size: 1rem;
  padding: 0 16px;
  background-color: #2e1e1f;
  border: 2px solid #ec8b10;
  color: #f5e6d0;
}
input::placeholder {
  color: #a37a56;
}
select {
  width: 100%;
  background-color: #2e1e1f;
  border: 2px solid #ec8b10;
  color: #f5e6d0;
  border-radius: 32px;
  height: 54px;
  font-size: 1rem;
  padding: 0 16px;
  appearance: none;
}
button {
  width: 100%;
  background: #ffd456;
  color: #2e1e1f;
  border: none;
  border-radius: 32px;
  height: 54px;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 16px;
  text-transform: capitalize;
  cursor: pointer;
}
button.primary {
  background-color: var(--primary-color);
}
button.small {
  height: 48px;
  min-width: 120px;
  width: fit-content;
  font-size: 0.875rem;
  color: #ebebeb;
}
header {
  padding: var(--default-space);
  display: flex;
  align-items: center;
}
header #logo svg path {
  fill: var(--primary-color);
}
#logo img {
  width: 160px;
}
main {
  padding-bottom: 1rem;
}
h2 {
  margin: 0;
}
h4 {
  font-size: 0.875rem;
  margin: 0;
  color: #2a2a2a;
  font-weight: 500;
}
h6 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
}

/* universal classes */

.flex {
  display: flex;
}
.flex-v-center {
  align-items: center;
}
.flex-gap-1 {
  gap: calc(var(--default-space) / 2);
}
.container {
  padding: var(--default-space);
}
.box {
  padding-top: var(--default-space);
  padding-bottom: var(--default-space);
}
.box-lr {
  padding-left: var(--default-space);
  padding-right: var(--default-space);
}
.field label {
  padding-left: 16px;
  font-size: 0.875rem;
}
.field + .field {
  margin-top: var(--default-space);
}
.center {
  text-align: center;
}
.right {
  text-align: right;
  margin-left: auto;
}
.bold {
  font-weight: 700;
}
.action {
  color: var(--primary-color);
}
.gone {
  display: none;
}
p.success {
  color: #270;
  background-color: #dff2bf;
  border-radius: 8px;
  padding: 12px;
}
p.error {
  color: #d8000c;
  background-color: #ffbaba;
  border-radius: 8px;
  padding: 12px;
}
p.info {
  color: #333;
  background-color: #eee;
  border-radius: 8px;
  padding: 12px;
}
.pad {
  padding: 16px;
}
.pad-x {
  padding-left: 16px;
  padding-right: 16px;
}
.pad-y {
  padding-top: 16px;
  padding-bottom: 16px;
}
.mar {
  margin: 16px;
}
.mar-x {
  margin-left: 16px;
  margin-right: 16px;
}
.mar-y {
  margin-top: 16px;
  margin-bottom: 16px;
}
.mar-24 {
  margin: 24px;
}
.mar-x-24 {
  margin-left: 24px;
  margin-right: 24px;
}
.mar-y-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.underline {
  text-decoration: underline;
}
.action-link {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.action-link svg {
  height: 24px;
  max-height: 24px;
}
.action-link-button {
  width: fit-content;
  background-color: var(--secondary-color);
  padding: 12px 16px;
  border-radius: 50px;
}

#user-option {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 48px;
  border-radius: 50px;
  background-color: var(--common-grey);
}
#user-option h5 {
  margin: 0;
  padding: 0 12px 0 22px;
  font-weight: 400;
}
.circle {
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--secondary-color);
}

.login {
  margin-top: 4rem;
}
.login h1 {
  margin-bottom: 0;
}

.card {
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  background-color: var(--common-grey);
  box-shadow: 0 0 4px var(--primary-color);
}
.card h1 {
  margin: 16px 0;
  font-size: 2rem;
  font-weight: 400;
}

.tab-group {
  margin: var(--default-space) 0;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  display: flex;
  height: 52px;
  align-items: center;
  padding: 2px;
}
.tab {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  height: 100%;
  cursor: pointer;
}
.tab.active {
  background-color: var(--secondary-color);
  color: var(--accent-color);
}

.poll-card {
  min-height: 64px;
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
  background: linear-gradient(45deg, black, transparent);
  border-left: 4px solid var(--primary-color);
}
.poll-card .info {
  display: flex;
  padding: 12px 0;
  align-items: center;
}
.poll-card .indicators {
  margin-left: auto;
}
.poll-card .options-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s linear;
}
.poll-card .options {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s linear, opacity 0.1s linear;
}
.poll-card .options button {
  align-self: end;
  font-weight: 500;
  color: var(--accent-color);
}
.poll-card .option {
  border: 1px solid var(--secondary-color);
  font-size: 0.875rem;
  height: 48px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poll-card + .poll-card {
  margin-top: calc(var(--default-space) / 2);
}
.poll-card .span {
  font-size: 0.75rem;
  color: var(--better-grey);
}
.icon {
  height: 24px;
}
.arrows.right svg {
  transform: rotate(270deg);
  transition: transform 0.2s ease-out;
}
.venue {
  display: none;
  margin-top: 0;
}
.poll-card.open .venue {
  display: initial;
}
.poll-card.open .options-wrapper {
  grid-template-rows: 1fr;
  padding: 12px 0;
}
.poll-card.open .options {
  overflow: visible;
  visibility: visible;
  opacity: 1;
}
.poll-card.open .indicators .arrows svg {
  transform: rotate(0deg);
  transition: transform 0.2s ease-out;
}
.poll-card .option.selected {
  background-color: var(--secondary-color);
  color: #ebebeb;
}
.poll-card h4 {
  color: var(--primary-color);
}

.group-card {
  min-height: 64px;
  border-radius: 8px;
  background-color: var(--light-red);
  padding: 0 16px;
  cursor: pointer;
}
.group-card .info {
  display: flex;
  height: 64px;
  padding: 12px 0;
  align-items: center;
}
.group-card .indicators {
  margin-left: auto;
}
.group-card + .group-card {
  margin-top: calc(var(--default-space) / 2);
}
.group-card.open .indicators .arrows svg {
  transform: rotate(0deg);
  transition: transform 0.2s ease-out;
}

.user-card {
  min-height: 48px;
  border-radius: 8px;
  background-color: var(--common-grey);
  padding: 0 16px;
  cursor: pointer;
}
.user-card .info {
  display: flex;
  height: 48px;
  padding: 12px 0;
  align-items: center;
}
.user-card + .user-card {
  margin-top: calc(var(--default-space) / 2);
}

.box-form {
  padding: 36px 24px;
  border-radius: 16px;
  box-shadow: 0px 0px 4px var(--secondary-color);
}

/* .box-form input,
.box-form select {
  background-color: #fff;
} */

.tilt {
  transform: rotate(45deg);
}

.nav {
  margin-bottom: var(--default-space);
  padding-left: var(--default-space);
  padding-right: var(--default-space);
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-item {
  height: 24px;
}

.nav svg {
  transform: rotate(-90deg);
}

.row + .row {
  margin-top: 24px;
}

span.spanbox {
  background-color: #efefef;
  padding: 4px 8px;
  border-radius: 4px;
  color: #222;
}
span.ends-in {
  font-size: 0.75rem;
  background-color: var(--secondary-color);
}

.poll-card.poll-closed {
  background: linear-gradient(45deg, #00000061, transparent);
  border-left: none;
}
.poll-card.poll-cancelled {
  background: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(73 70 70) 100%);
}

.poll-card-wrapper {
  display: flex;
  align-items: start;
  margin-right: -12px;
}
.poll-card-wrapper + .poll-card-wrapper {
  margin-top: calc(var(--default-space) / 2);
}
.poll-card-wrapper .poll-card {
  flex: 1;
}
.poll-card-wrapper .actions svg {
  width: 24px;
}
.poll-card-wrapper .actions {
  height: 64px;
  padding: calc(var(--default-space) / 2);
  cursor: pointer;
}

.meta-table td,
.meta-table th {
  padding: 8px;
  border: 1px solid var(--primary-color);
  font-size: 0.875rem;
}

.meta-table td:first-child {
  width: 30%;
  vertical-align: middle;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* animations */

.slide-gone {
  animation: moveLeftAndDisappear 3s forwards;
}

@keyframes moveLeftAndDisappear {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes highlight-bg {
  0% {
    background-color: #fffacd;
  }
  100% {
    background-color: initial;
  }
}

.lined tr + tr {
  border-top: 1px solid #333;
}
.lined td {
  padding: 6px 12px;
}

.vote-results .correct {
  background-color: #285c4d;
  color: #baf7dc;
}
.vote-results .wrong {
  background-color: #5c2b28;
  color: #f6b1a7;
}
.vote-results .pending {
  color: var(--primary-color);
}

a.button {
  background-color: var(--secondary-color);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 4px;
  color: #000;
}
a.button + a.button {
  margin-left: 8px;
}

.modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.modal .content {
  background-color: #fff;
  padding: 1rem 2rem;
  border-radius: 8px;
  max-width: 80vw;
  min-width: 50vw;
}
.modal textarea {
  resize: none;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 12px;
  max-width: 100%;
  width: 100%;
}
.modal h3 {
  color: #000;
}
#cancel-poll-form {
  margin-bottom: 1rem;
}

td {
  border: 1px solid var(--primary-color);
  padding: 4px 8px;
  font-size: 0.875rem;
}

th {
  border: 1px solid var(--primary-color);
  text-align: left;
  padding: 4px 8px;
  font-size: 0.875rem;
}

.dash-card .small-card {
  background-color: #000;
  padding: 4px 12px;
}

.dash-card .small-card + .small-card {
  margin-top: 0.5rem;
}

.sans-serif {
  font-family: sans-serif !important;
}
.roboto {
  font-family: "Roboto Mono", sans-serif;
}

.table-container {
  overflow-x: auto;
  display: block;
}

table.sticky {
  border-collapse: collapse;
  min-width: 600px; /* or whatever */
}

table.sticky th,
table.sticky td {
  padding: 8px;
  white-space: nowrap;
}

table.sticky th:first-child,
table.sticky td:first-child {
  position: sticky;
  left: 0;
  background: #2e1e1f;
  z-index: 2;
  box-shadow: 1px 0 0 var(--primary-color);
  border-left: none;
  background-clip: padding-box;
}

table.sticky thead th {
  position: sticky;
  top: 0;
  background: #2e1e1f;
  z-index: 1;
}