/** ###########################################################################
 * global setup
 * ############################################################################*/
 
html, body {
  width: 100%;
  height: 100%;
  font-size: 12px;
  /* NOTE: courier is a rather "big" font, making smaller font size seem bigger */
  font-family: "Lucida Console", Courier, monospace;
  padding: 0 !important;
  margin: 0 !important;
}

/** ###########################################################################
 * misc + general-purpose
 * ############################################################################ */

.invisible {
  visibility: hidden;
}

.hidden {
  display: none !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  display: flex;
  align-items: flex-start;
}

.align-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-axis-align-center {
  display: flex;
  justify-content: center;
}

.cross-axis-align-center {
  display: flex;
  align-items: center;
}

.main-axis-align-start {
  display: flex;
  align-items: flex-start;
}

.self-cross-align-center {
  display: flex;
  align-self: center;
}

.grid {
  display: grid;
}

.grid-center {
  justify-items: center;
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.full-width {
  width: 100%;
}

.width-fit {
  width: fit-content;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.no-horizontal-padding {
  padding-left: 0;
  padding-right: 0;
}

.ellipsis-10 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.ellipsis-20 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20rem;
}

.cursor-pointer {
  cursor: pointer;
}

.display-only-child:not(:only-child) {
  display: none;
}

/** ###########################################################################
 * hackfix for emojis
 * ############################################################################ */

/**
  * Emojis don't display centered on Retina screens...
  *
  * @see https://stackoverflow.com/questions/44142464/how-do-i-horizontally-center-an-emoji
  * @see https://codepen.io/faessler/pen/aRNOEY
  */

.emoji span {
  display: inline-block;
  font-size: 4em;
  transform: scale(.25) translateY(1.1em);
  margin: -1em -.333em;
}

/** ###########################################################################
 * colors
 * ############################################################################ */

.darkgray {
  color: #555;
}

.gray {
  color: gray;
}

.red {
  color: red;
}

.darkred {
  color: darkred;
}


.color-grayscale {
  filter: grayscale(1);
}

/** ###########################################################################
 * other
 * ############################################################################ */

.dbux-link {
  /* color: rgb(71, 52, 243); */
  /* color: black; */
  cursor: pointer;
}

.dbux-link:hover {
  /* color: rgb(104, 91, 218); */
  text-decoration: underline;
}

.active {
  border: 1px solid gold !important;
}