/*
 * Boxes UI Kit - Includes all dependencies
 *
 * Copyright (c) 2025 Boxes. All rights reserved.
*/
html {
  box-sizing: border-box;
}

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

body {
  display: flex;
  font-size: 16px;
  height: 100vh;
  overflow: hidden;
  width: 100vw;
}

@font-face {
  font-family: "notosans-light";
  src: url("../fonts/notosans/notosans-light.ttf") format("truetype");
}
@font-face {
  font-family: "notosans-regular";
  src: url("../fonts/notosans/notosans-regular.ttf") format("truetype");
}
@font-face {
  font-family: "notosans-medium";
  src: url("../fonts/notosans/notosans-medium.ttf") format("truetype");
}
@font-face {
  font-family: "notosans-semibold";
  src: url("../fonts/notosans/notosans-semibold.ttf") format("truetype");
}
@font-face {
  font-family: "notosans-bold";
  src: url("../fonts/notosans/notosans-bold.ttf") format("truetype");
}
@font-face {
  font-family: "sourceserifpro-regular";
  src: url("../fonts/sourceserifpro/sourceserifpro-regular.ttf") format("truetype");
}
@font-face {
  font-family: "sourceserifpro-bold";
  src: url("../fonts/sourceserifpro/sourceserifpro-bold.ttf") format("truetype");
}
@font-face {
  font-family: "sourcecode";
  src: url("../fonts/sourcecodepro/sourcecodepro-regular.ttf") format("truetype");
}
.padded {
  padding: 1.25rem;
}
.padded.pd-lg {
  padding: 6.25rem;
}

* {
  font-family: "notosans-regular", Arial, sans-serif;
  font-weight: normal;
}

label, h1, h2, h3, h4, h5, h6 {
  font-family: "notosans-medium", Arial, sans-serif;
}
label strong, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-family: "notosans-bold", Arial, sans-serif;
}

em, i, span {
  color: inherit;
  font-family: inherit;
}

strong {
  color: inherit;
  font-family: "notosans-medium", Arial, sans-serif;
}

p > code, li > code, td > code {
  border-radius: 3px;
  font-size: 11px;
  padding: 0 3px;
  background: white;
}

ul {
  padding: 0 0 0 20px;
}
ul li {
  list-style-type: disc;
}

hr {
  border: 0;
  height: 1px;
}

.nowrap {
  white-space: nowrap;
}

.wrap {
  word-break: break-word;
}

.monospace {
  font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  -moz-font-feature-settings: "tnum";
}

.monofont {
  font-family: "Lucida Console", Monaco, monospace;
}

.box, .vbox, .hbox {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
}
.box.fixed, .fixed.vbox, .fixed.hbox {
  flex-shrink: 0;
}

.hbox.around {
  justify-content: space-around;
}
.hbox.between {
  justify-content: space-between;
}
.hbox.end {
  justify-content: flex-end;
}
.hbox.wrap {
  flex-wrap: wrap;
}
.hbox.center-x {
  justify-content: center;
}
.hbox.center-y {
  align-items: center;
}
.hbox.scroll {
  overflow-x: auto;
  min-width: 0px;
}
.hbox.spaced.comfortable {
  column-gap: 1.25rem;
}
.hbox.spaced.cozy {
  column-gap: 0.5rem;
}
.hbox.spaced.compact {
  column-gap: 0.75rem;
}

.vbox {
  flex-direction: column;
  width: 100%;
}
.vbox.center-x {
  align-items: center;
}
.vbox.center-y {
  justify-content: center;
}
.vbox.scroll {
  overflow-y: auto;
  min-height: 0px;
}
.vbox.spaced.comfortable {
  row-gap: 1.25rem;
}
.vbox.spaced.cozy {
  row-gap: 0.5rem;
}
.vbox.spaced.compact {
  row-gap: 0.75rem;
}

button {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid;
  border-radius: 50px;
  font-family: "notosans-semibold", Arial, sans-serif;
}
button.small {
  font-size: 0.625rem;
  line-height: 1.5rem;
  padding: 0 0.625rem;
  gap: 0.3125rem;
}
button.small i {
  display: inline-block;
  line-height: inherit;
  font-size: 0.5rem;
}
button.large {
  font-size: 1rem;
  line-height: 2.125rem;
  padding: 0 1rem;
  gap: 0.5rem;
}
button.large i {
  display: inline-block;
  line-height: inherit;
  font-size: 0.875rem;
}

ul {
  padding: 0;
}
ul li {
  list-style-type: none;
}

.testing {
  column-gap: 10px;
}
.testing .hidden {
  display: none;
}

.card {
  border: 1px solid silver;
  border-radius: 0.25rem;
}
.card .card-header {
  background: WhiteSmoke;
  border-bottom: 1px solid silver;
  padding: 1rem;
}
.card .card-body {
  padding: 1rem;
}
.card .card-footer {
  background: WhiteSmoke;
  border-top: 1px solid silver;
  column-gap: 1rem;
  display: flex;
  padding: 1rem;
}
.card.inline .card-header {
  background: none;
}
.card.inline .card-footer {
  background: none;
}
.card.inline.flush {
  border: none;
}
.card.inline.flush .card-header {
  padding: 0 0 1rem 0;
}
.card.inline.flush .card-footer {
  padding: 1rem 0 0 0;
}