* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    scroll-behavior: smooth;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

::-webkit-scrollbar {
    width: 8px; /* vertical scrolling */
    height: 8px; /* horizontal scrolling */
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 100vw;
    margin-block: 0.5em;
}

::-webkit-scrollbar-thumb {
    background: #BEC2D3; /* primary 50% opacity*/
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(191, 41%, 28%);
}

/* Cross Browser Support: Firefox */
@supports (scrollbar-color: white white) {
    * {
        scrollbar-color: #BEC2D3 transparent; /* thumb track */
        scrollbar-width: thin
    }
}

body {
    width: 100vw;
    height: 100vh;
}

#root {
    width: 100%;
    height: 100%;
}


/* This overwrites the aggressive radix-ui z-index to play better with third party modals and popups */

[data-radix-portal] {
    z-index: 900 !important;
}


/* The following styles overwrite the less than good looking month view for Mui Date Pickers
 *
 * It uses a hardcoded theme which is less than ideal. TODO: Investigate if this can be made part of Mui Theming
 */
.MuiMonthPicker-root button {
    background: white;
    border: none;
    border-radius: 100vw
}

.MuiMonthPicker-root button:hover {
    background: rgba(0, 0, 0, 0.04);
}

.MuiMonthPicker-root button.Mui-selected {
    background: hsl(191, 41%, 33.6%);
    color: #fff
}

.MuiMonthPicker-root button:hover.Mui-selected  {
    background: hsl(191,41%,48%);
}



.filepond--root,
.filepond--root .filepond--drop-label {
  height: 100px;
}

.filepond--panel-root {
    border: 2px dashed #7d86a9;
}