/* Fonts */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''),
    url('../../public/fonts/roboto-v30-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../../public/fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local(''),
    url('../../public/fonts/roboto-v30-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
    url('../../public/fonts/roboto-v30-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../../public/fonts/roboto-mono-v21-latin-regular.woff2') format('woff2');
}

.header {
  min-height: 3.5rem;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: var(--header-border-width) solid var(--primary);
}

/* DragDrop Area */

.uppy-DragDrop-container.uppy-DragDrop--isDragDropSupported {
  background-color: #fff;
  color: #22c55e;
}

.uppy-DragDrop-container.uppy-DragDrop--isDragDropSupported span.uppy-DragDrop-browse {
  font-weight: bold;
  color: #22c55e;
}

.uppy-DragDrop-container.uppy-DragDrop--isDragDropSupported div.uppy-DragDrop-inner div.uppy-DragDrop-label {
  font-size: 0.9rem;
  line-height: 1rem;
  margin: 0;
}

.uppy-DragDrop-container.uppy-DragDrop--isDragDropSupported div.uppy-DragDrop-inner {
  display: flex;
  align-items: center;
  min-height: 3rem;
  max-height: 3rem;
  padding: 0.5rem;
  align-self: end;
}

.uppy-DragDrop-container.uppy-DragDrop--isDragDropSupported div.uppy-DragDrop-inner svg {
  fill: #22c55e;
  height: 1.25rem;
  margin: 0;
  padding: 0;
}