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

#app {
    overflow: auto;
    overflow-x: hidden;
}

@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;
}

.changed-input-bg {
  background: -moz-linear-gradient(top,  rgba(255,254,252,0) 0%, rgba(255,254,252,0.04) 39%, rgba(255,210,137,0.2) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,254,252,0) 0%,rgba(255,254,252,0.04) 39%,rgba(255,210,137,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,254,252,0) 0%,rgba(255,254,252,0.04) 39%,rgba(255,210,137,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance:textfield;
}

.table-hoverable:hover {
  background: linear-gradient(to right, rgba(29, 110, 242, 0.04) 0%, rgba(29, 110, 242, 0.01) 100%) !important; /* blue-medium-4% -> almost opaque */
  transition: all .4s ease;
}

.mono {
    font-family: monospace;
    font-weight: 400;
    color: #12447a;
}

.hidden {
    display: none;
}
.reveal:hover > .hidden {
    display: block;
}

.warn-box {
    background: rgba(245, 224, 34, 0.04);
    border-color: #E8E8E8;
    border-style: solid;
    border-width: thin;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 6px;
    padding-right: 10px;
    padding-top: 7px;
}

.cheatmode tr:hover {background-color: #E8E8E8; cursor:pointer !important;}
.tinyfont {font-size: 8pt;}
.auto-extend {
    width: initial;
    /* transition: width 0.2s ease-in-out;}*/
}
.auto-extend:focus-within {
    position: absolute;
    background-color: white;
    margin-top: -12px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    width: 300px;}

@keyframes fadeInNeon {
    0% {
        text-shadow: 0 0 10px #00ffdd, 0 0 20px #00ffdd, 0 0 30px #00ffdd;
    }
    50% {
        text-shadow: 0 0 10px #e10a0a, 0 0 20px #e10a0a, 0 0 30px #e10a0a;
    }
    100% {
        text-shadow: 0 0 10px #00ffdd, 0 0 20px #00ffdd, 0 0 30px #00ffdd;
    }
}

.animate-text {
    display: inline-block;
    animation: fadeInNeon 1s 2;
}