html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

:focus {
  outline: 2px dashed var(--focus-color);
}

:focus-visible {
  outline: 2px dashed var(--focus-color);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-color);
  /* disable forced colors  */
  forced-color-adjust: none;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

/* MODIFIERS */

.set-display-none {
  display: none !important;
}

.set-display-block {
  display: block !important;
}

.set-flex-direction-row {
  flex-direction: row;
}

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

.set-top-zero {
  top: 0px !important;
}

.set-margin-bottom-zero {
  margin-bottom: 0px !important;
}

.set-no-click {
  pointer-events: none !important;
}

.set-low-opacity {
  opacity: 0.2 !important;
}

.set-flex-grow-1 {
  flex-grow: 1 !important;
}

/* SCROLLBAR */

.hidden-scrollbar {
  overflow-x: auto;
}
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ::-webkit-scrollbar {
  display: none;
} */

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbar-bg-color);
  border-left: 1px #eee;
}
#tools::-webkit-scrollbar-track {
  background: var(--scrollbar-bg-color-tools);
  border-left: 1px #eee;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover-color);
}

/* /////////////////////////// */

#about-modal-div {
  margin: 0;
  padding: 0;
  user-select: none;
}

#about-modal-link {
  text-decoration: underline;
}
#about-modal-link:hover {
  transform: scale(1.05);
  cursor: pointer;
}
