/* These styles make the body full-height */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* These styles make the root element full-height */
#root {
  display: flex;
  width: 100%;
  height: 100%;
}

:root {
  --scrollbar-thumb: rgba(77, 77, 77, 0.4);
  --scrollbar-track: transparent;
}

[data-theme='dark'] {
  --scrollbar-thumb: rgba(200, 200, 200, 0.4);
  --scrollbar-track: transparent;
}

@font-face {
  src: url('assets/fonts/segoeui.ttf');
  font-family: 'segoeui';
}

@font-face {
  src: url('assets/fonts/segoeuib.ttf');
  font-family: 'segoeuib';
}

@font-face {
  src: url('assets/fonts/segoeuil.ttf');
  font-family: 'segoeuil';
}

@font-face {
  src: url('assets/fonts/segoeuisl.ttf');
  font-family: 'segoeuisl';
}

@font-face {
  src: url('assets/fonts/seguisb.ttf');
  font-family: 'seguisb';
}

/* Webkit */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

select {
  background-color: white;
  font-family: segoeui, sans-serif;
  font-size: 16px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}