:root {
  --font-family-barcode: LibreBarcode39;
  --font-family-barcode-text: LibreBarcode39Text;
  --font-family-main: Manrope;
  --font-family-secondary: Roboto;

  --main-bg: linear-gradient(135deg,
      hsla(12, 5%, 18%, 0.8) 0%,
      hsla(51, 34%, 12%, 0.7) 100%);

  --btn-color-primary: rgb(237, 192, 42);
  --btn-color-secondary: hsl(50, 30%, 32%);
  --btn-color-primary-hover: hsl(50, 30%, 32%);

  --text-color-primary: whitesmoke;
  --text-color-secondary: rgba(15, 15, 15, 1);

  --table-row-odd-color: rgba(10, 10, 10, 0.35);
  --table-row-even-color: rgba(10, 10, 10, 0.15);
  --table-row-color-hover: rgba(10, 10, 10, 0.5) !important;

  --black-color-100: rgba(10, 10, 10, 1);
  --black-color-75: rgba(10, 10, 10, 0.75);
  --black-color-50: rgba(10, 10, 10, 0.5);
  --black-color-25: rgba(10, 10, 10, 0.25);
  --black-color-15: rgba(10, 10, 10, 0.15);

  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 1.5rem;

  --link-hover-color: rgba(221, 207, 121, 0.05);

  --link-inactive-color: grey;
  --link-bg-active-color: rgba(221, 207, 121, 0.085);

  --header-min-height: 100px;
}

@font-face {
  font-family: LibreBarcode39;
  src: url("../../assets/fonts/LibreBarcode39/LibreBarcode39-Regular.ttf");
}

@font-face {
  font-family: LibreBarcode39Text;
  src: url("../../assets/fonts/LibreBarcode39Text/LibreBarcode39Text-Regular.ttf");
}

@font-face {
  font-family: Manrope;
  src: url("../../assets/fonts/Manrope/Manrope-VariableFont_wght.ttf");
}

@font-face {
  font-family: Roboto;
  src: url("../../assets/fonts/Roboto/Roboto-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("../../assets/fonts/Roboto/Roboto-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("../../assets/fonts/Roboto/Roboto-Light.ttf");
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("../../assets/fonts/Roboto/Roboto-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

*,
::after,
::before {
  /* outline: solid 1px red; */
  color: whitesmoke;
  font-family: var(--font-family-main), sans-serif;
  min-height: 1px;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: var(--main-bg), url("../../assets/images/background/dark-texture.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* This contains header, main and footer together */
.app-content {
  display: flex;
  flex-direction: column;
  width: calc(100% - 250px);
}

/* Main layout elements - START */
header,
main {
  padding: 1.25rem 1.5rem;
}

footer {
  /* flex: 0.025; */
  font-size: 12px;
  /* Uncomment if the footer is used */
  /* margin-top: auto;
  padding: 0.5rem; */
}

/* Main layout elements - END */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-main), "sans-serif";
  margin: 0;
}

a,
p {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

hr {
  margin: 0;
  color: rgba(15, 15, 15, 0.75);
}

/* */
.login-title {
  font-family: Manrope, "sans-serif";
  font-size: 64px;
  font-weight: lighter;
}

/* Image container */
.img-ctn,
.img-ctn-sm,
.img-ctn-md,
.img-ctn-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.img-ctn-sm {
  max-width: 16px;
  max-height: 16px;
}

.img-ctn-md {
  max-width: 32px;
  max-height: 32px;
}

.img-ctn-lg {
  max-width: 64px;
  max-height: 64px;
}

.img-ctn-128 {
  max-width: 128px;
  max-height: 128px;
}

.img-ctn-256 {
  max-width: 256px;
  max-height: 256px;
}

.img-ctn-512 {
  max-width: 512px;
  max-height: 512px;
}

/* Gap */
.gap-vsm {
  gap: 0.15rem;
}

.gap-sm {
  gap: 0.25rem;
}

.gap-md {
  gap: 0.5rem;
}

.gap-lg {
  gap: 0.75rem;
}

.gap-vlg {
  gap: 1rem;
}

/* Selection */
.selected {
  opacity: 1;
}

.not-selected {
  opacity: 0.5;
}

/* Boxes */
.box {
  border: solid 1px rgba(10, 10, 10, 0.5);
  background-color: rgba(10, 10, 10, 0.5);
  border-radius: 0.5rem;
}

/**
  * Use this to add style to p elements so they can look like a h* without having to set them all up 
  * Or to overwrite h* element(s)
*/
.title,
.title-vsm,
.title-sm,
.title-md,
.title-lg {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
}

.title-vsm {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

.title-sm {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}

.title-md {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
}

.title-lg {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* Font sizes */
/* Very Small */
.fs-vsm {
  font-size: 11px;
}

.fs-sm {
  font-size: 14px;
}

.fs-md {
  font-size: 20px;
}

.fs-lg {
  font-size: 28px;
}

.fs-vlg {
  font-size: 32px;
}

.fs-64 {
  font-size: 64px;
}

.fs-128 {
  font-size: 128px;
}

/* Font weights */
.fw-light {
  font-weight: lighter;
}

.fw-n {
  font-weight: normal;
}

.fw-b {
  font-weight: bolder;
}

.fw-bb {
  font-weight: 900;
}

/* Table properties */
table {
  width: 100%;
  table-layout: fixed;
}

/* Image properties */
/* Filter each img to change them from black to white */
.img-vsm,
.img-sm,
.img-lmd,
.img-md,
.img-lg {
  filter: invert(1);
}

.img-vsm {
  width: 8px;
  height: 8px;
}

.img-sm {
  width: 16px;
  height: 16px;
}

/* lmd == Little medium */
.img-lmd {
  width: 20px;
  height: 20px;
}

.img-md {
  width: 32px;
  height: 32px;
}

.img-lg {
  width: 64px;
  height: 64px;
}

.barcode {
  text-align: center;
  font-size: 100px;
  font-family: var(--font-family-barcode);
}

form {
  width: 100%;
}

/* Overwrite of Bootstrap form select */
.form-select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"] {
  color: var(--text-color-primary);
  border: solid 2px rgba(255, 255, 255, 0.15);
  background-color: rgba(10, 10, 10, 0.25);
}

.form-select:hover:not(:disabled),
input[type="text"]:hover:not(:disabled),
input[type="number"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled),
input[type="date"]:hover:not(:disabled),
input[type="time"]:hover:not(:disabled),
input[type="checkbox"]:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.35);
  background-color: var(--black-color-25);
  cursor: pointer;
}

input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled) {
  cursor: text !important;
}

.form-select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
  color: var(--text-color-primary);
  border-color: rgba(255, 255, 255, 0.75);
  background-color: var(--black-color-50);
  box-shadow: 0 0 0 0.2rem var(--btn-color-primary);
}

.form-select option {
  background-color: var(--black-color-100);
  color: white;
}

.form-select option:hover {
  background-color: var(--black-color-100);
  color: white;
  cursor: pointer;
}

/* Styling for selected option */
.form-select option:checked {
  background-color: var(--black-color-100);
  color: var(--btn-color-primary);
  font-weight: bold;
}

/* Flex rules */
.flex-ctr {
  justify-content: center;
  align-items: center;
}

.flex-05 {
  flex: 0.5;
}

/* Required symbol */
.required::after {
  content: "*";
  color: red;
  font-weight: bold;
  margin-left: 0.25rem;
}

/* State properties */
.active:not(:hover):not(:disabled),
.primary:not(:hover):not(:disabled) {
  filter: opacity(1);
}

.inactive:not(:hover):not(:disabled),
.secondary:not(:hover):not(:disabled) {
  filter: opacity(0.85);
}

/* Background color */
.bg-darker {
  background-color: var(--black-color-75);
}

/* Widths */
.w-min {
  width: min-content !important;
}

.w-max {
  width: max-content !important;
}

.w-fit {
  width: fit-content !important;
}

.min-w {
  min-width: min-content !important;
}

.min-w-fit {
  min-width: fit-content !important;
}

.min-w-max {
  min-width: max-content !important;
}

.hdr-w {
  max-width: var(--header-min-height);
}

/* Fade in/out */
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

/* Scrollbar properties */
::-webkit-scrollbar {
  width: 6px;
  background: rgba(30, 30, 30, 1);
  border-radius: 40px;
}

::-webkit-scrollbar-thumb {
  border-radius: 40px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: grey;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(85, 85, 85);
  cursor: grabbing;
}