/* ========================
 * BASE ELEMENTS
 * ======================== */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--c-text);
  font-size: 0.95rem;
}

.bb-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.bb-content {
  flex-grow: 1;
}

.bb-content.offset-down {
  margin-top: calc(var(--h-user-navbar) + 0.5rem);
}

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

.text--discrete {
  color: var(--c-text--discrete);
}

.text--red {
  color: var(--c-text--red);
}

.text--capitalised {
  text-transform: capitalize;
}

/* ========================
 * DATE/TIME DISPLAYS
 * ======================== */
.date_display {
  color: var(--c-text--light);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

/* ========================
 * USER NAVBAR
 * ======================== */
.bb-user_navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1rem;
  color: var(--c-user_navbar-text);
  background-color: var(--c-user_navbar-bg);
}
.bb-user_navbar--fixed {
  position: fixed;
  z-index: 1000;
  width: calc(100% - 2rem);
  height: var(--h-user-navbar);
}

.bb-user_navbar a:not(.btn) {
  color: white;
  text-decoration: none;
}

#bb-user_navbar__logout-icon {
  margin-left: 0.5rem;
  color: var(--c-user_navbar-text);
  cursor: pointer;
}
#bb-user_navbar__logout-icon:hover {
  color: var(--c-link--hover);
}

/* ==================
 * LANGUAGE SELECTOR
 * ================== */
.language-selector__toggle {
  height: 18px;
  color: var(--c-menu_item);
  text-decoration: none;
  cursor: pointer;
}
.language-selector__toggle:hover {
  color: var(--c-menu_item--hover);
}

/* ==================
 * TEXT
 * ================== */
.text--small {
  font-size: 0.85em;
}

.text--light {
  color: var(--c-text--light);
}

.text--highlighted {
  background-color: #b9e4f5;
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}

/* ==================
 * LIST PAGINATION
 * ================== */
.list__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}
.list__pagination > *:not(:last-child) {
  margin-right: 1rem;
}
.list__pagination button {
  width: 24px;
  height: 24px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
}

/* ========================
 * MODAL
 * ======================== */
#bb-modal,
#bb-modal--media {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  place-items: center;
  z-index: 100;
}

.bb-modal__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.bb-modal__content {
  background-color: var(--c-modal-bg);
  border-radius: 0.25rem;
  padding: 1rem;
  z-index: 10;
  min-width: 60vw;
  max-width: 80vw;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.bb-modal__content__text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.bb-modal__content__text > *:not(:last-child) {
  margin-bottom: 0.5rem;
}

#bb-modal--media .bb-modal__content {
  min-height: 60vh;
}

.bb-modal__content__buttons {
  border-top: 1px solid var(--c-border);
  padding-top: 1rem;
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.bb-modal__content__buttons > *:not(:last-child) {
  margin-right: 0.5rem;
}

/* ========================
 * LAYOUT/INTERACTION UTILS
 * ======================== */
.row {
  display: flex;
  align-items: center;
}
.row.align-start {
  align-items: flex-start;
}
.row.align-end {
  align-items: flex-end;
}

/*  (> phone + tablet) */
@media only screen and (max-width: 768px) {
  .row:not(.row--forced) {
    flex-direction: column;
    align-items: center;
  }

  .row:not(.row--forced):not(.spaced) > *:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  .row:not(.row--forced).spaced > *:not(:last-child) {
    margin-bottom: 2rem;
  }

  .row.row--forced:not(.spaced) > *:not(:last-child) {
    margin-right: 0.5rem;
  }
  .row.row--forced.spaced > *:not(:last-child) {
    margin-right: 2rem;
  }
}
/*  (> desktop) */
@media only screen and (min-width: 769px) {
  .row:not(.spaced) > *:not(:last-child) {
    margin-right: 0.5rem;
  }
  .row.spaced > *:not(:last-child) {
    margin-right: 2rem;
  }
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.col > *:not(:last-child) {
  margin-bottom: 0.5rem;
}

.fluid {
  width: 100%;
}

.divider-h {
  width: 100%;
  height: 1px;
  min-width: 24px;
  background-color: var(--c-clickable);
  margin: 1rem 0;
}

.divider-v {
  width: 1px;
  height: 100%;
  min-height: 24px;
  background-color: var(--c-clickable);
}

.clickable {
  cursor: pointer;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-italic {
  font-style: italic;
}

.no-v-margin {
  margin-top: 0;
  margin-bottom: 0;
}

/* (column sizes) */
@media only screen and (min-width: 768px) {
  .column-1 { width: 8.3%; flex-basis: 8.3%; }
  .column-2 { width: 16.7%; flex-basis: 16.7%; }
  .column-3 { width: 25%; flex-basis: 25%; }
  .column-4 { width: 33.3%; flex-basis: 33.3%; }
  .column-5 { width: 41.7%; flex-basis: 41.7%; }
  .column-6 { width: 50%; flex-basis: 50%; }
  .column-7 { width: 58.3%; flex-basis: 58.3%; }
  .column-8 { width: 66.7%; flex-basis: 66.7%; }
  .column-9 { width: 75%; flex-basis: 75%; }
  .column-10 { width: 83.3%; flex-basis: 83.3%; }
  .column-11 { width: 91.7%; flex-basis: 91.7%; }
  .column-12 { width: 100%; flex-basis: 100%; }
}

/* ========================
 * LANGUAGE FLAGS
 * ======================== */
.lang-flag--disabled {
  opacity: 0.2;
  height: 18px;
}

/* ========================
 * ANIMATIONS
 * ======================== */
.rotating {
  margin: 0.5rem auto;
  width: min-content;
  animation: rotation 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}