@import url('css/fonts.css');
@import url('css/reset.css');
@import url('css/fontawesome/fontawesome.css');
@import url('css/fontawesome/solid.css');
@import url('css/fontawesome/regular.css');
@import url('css/fontawesome/light.css');
@import url('css/fontawesome/brands.css');
@import url('css/variables.css');
@import url('css/buttons.css');
@import url('css/forms.css');
@import url('css/tables.css');
@import url('css/grid.css');
@import url('css/alerts.css');
@import url('css/tabs.css');
@import url('css/mod_overrides.css');
@import url('css/ops_manual_document.css');
@import url('css/animations.css');


@import url('css/mapbox-gl.css');

body {
  font-family: "Roboto Slab", serif;
  padding: 10px;
  scrollbar-color: var(--background) transparent;
  scrollbar-width: thin;
}

body:has(.joystickdb-layout) {
  padding: 0px;
}

body:has(.mod-dashboard) {
  padding: 0px;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background: var(--background);
  border: 2px solid #fff;
  border-radius: 7px;
  background-clip: padding-box;
}



strong {
  font-weight: 600;
}

.icon-cappy {
  font-size: 20px;
  margin-right: 5px;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: var(--brown);
  -webkit-mask-image: url(/cappy.svg);
  mask-image: url(/cappy.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media screen and (min-width: 1040px) {
  body {
    padding: 20px;
  }
}

/* @media screen and (min-width: 1540px) {
  body {
    background: var(--background);
  }
} */