html, body, #app, #theme-wrapper {
    height: 100%;
    width: 100%;
}
html {
    /* disable body scroll on iOS */
    position: fixed;
    overflow: auto;
}

@font-face {
    font-family: 'BrandonText';
    font-weight: 300;
    src: local('BrandonTextLight'),
         url('/font/BrandonText/BrandonTextLight/BrandonTextLight.woff2') format('woff2'),
         url('/font/BrandonText/BrandonTextLight/BrandonTextLight.woff') format('woff'),
         url('/font/BrandonText/BrandonTextLight/BrandonTextLight.ttf') format('truetype'),
         url('/font/BrandonText/BrandonTextLight/BrandonTextLight.eot') format('embedded-opentype'),
         url('/font/BrandonText/BrandonTextLight/BrandonTextLight.svg#BrandonTextLight') format('svg');
}

@font-face {
    font-family: 'BrandonText';
    font-weight: normal;
    src: local('BrandonTextRegular'),
         url('/font/BrandonText/BrandonTextRegular/BrandonTextRegular.woff2') format('woff2'),
         url('/font/BrandonText/BrandonTextRegular/BrandonTextRegular.woff') format('woff'),
         url('/font/BrandonText/BrandonTextRegular/BrandonTextRegular.ttf') format('truetype'),
         url('/font/BrandonText/BrandonTextRegular/BrandonTextRegular.eot') format('embedded-opentype'),
         url('/font/BrandonText/BrandonTextRegular/BrandonTextRegular.svg#BrandonTextRegular') format('svg');
}

@font-face {
    font-family: 'BrandonText';
    font-weight: 500;
    src: local('BrandonTextMedium'),
         url('/font/BrandonText/BrandonTextMedium/BrandonTextMedium.woff2') format('woff2'),
         url('/font/BrandonText/BrandonTextMedium/BrandonTextMedium.woff') format('woff'),
         url('/font/BrandonText/BrandonTextMedium/BrandonTextMedium.ttf') format('truetype'),
         url('/font/BrandonText/BrandonTextMedium/BrandonTextMedium.eot') format('embedded-opentype'),
         url('/font/BrandonText/BrandonTextMedium/BrandonTextMedium.svg#BrandonTextMedium') format('svg');
}

@font-face {
    font-family: 'BrandonText';
    font-weight: bold;
    src: local('BrandonTextBold'),
         url('/font/BrandonText/BrandonTextBold/BrandonTextBold.woff2') format('woff2'),
         url('/font/BrandonText/BrandonTextBold/BrandonTextBold.woff') format('woff'),
         url('/font/BrandonText/BrandonTextBold/BrandonTextBold.ttf') format('truetype'),
         url('/font/BrandonText/BrandonTextBold/BrandonTextBold.eot') format('embedded-opentype'),
         url('/font/BrandonText/BrandonTextBold/BrandonTextBold.svg#BrandonTextBold') format('svg');
}

/* Ideally, we would not have horizontal (x-axis) content that overflows the page. But we do.
   This is a simple way of at least removing the horizontal scrolling (that does not work anyway)
   until we figure out how to size the content appropriately. Current major offender is the
   pipeline page at 1080 has more vertical content than can fit at 1080. */
body {
    overflow-x: hidden;
}

.image-hoverable {
    cursor: pointer;
    transition: all 0.3s ease;
}
.image-hoverable:hover {
    transform: scale(1.5);
}

/* Safari won't show scrollbar even with overflow-y:auto,
   applying this class forces to show scrollbar */
.force-scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}
.force-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

/* I couldn't attach these 2 styles directly */
#proof-of-income .MuiFilledInput-input {
    padding: 8px 12px;
}

#proof-of-ownership .MuiFilledInput-input {
    padding: 8px 12px;
}