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

.collapsable {
    cursor: pointer;
    user-select: none;
}

.collapsable::before {
    display: inline-block;
    font-size: 0.8em;
    content: "▶";
    margin-right: 2px;
    line-height: 1em;
    width: 1em;
    height: 1em;
    text-align: center;
    transition: transform 195ms ease-out 0s;
    transform: rotate(90deg);
}
.collapsable.collapsableCollapsed::before {
    transform: rotate(0deg);
}

.icon-rotate-now {
    transform: rotate(-360deg);
    animation: rotateIcon 2s ease-in-out infinite;
}
.icon-rotate:hover {
    transform: rotate(-360deg);
    transition: transform 3s ease-in-out;
}

.icon-rotate2:hover {
    animation: rotateIcon 2s ease-in-out infinite;
}

@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.icon-shake:hover {
    animation: shakeIcon 0.3s ease-in-out infinite;
}

@keyframes shakeIcon {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    50% {
        transform: translateX(3px);
    }
    75% {
        transform: translateX(-3px);
    }
}

.button-red {
    color: rgba(238, 15, 68, 0.92)
}
.button-orange {
    color: rgb(255, 102, 0)
}

.icon-tilted {
    transform: rotate(90deg);
}

.rotate {
    animation: spin 0.5s ease forwards;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.separator{
    flex: 0 0 3px; /* No grow, no shrink, and a basis of 10px */
    background: #EEE;
    cursor: ew-resize;
    transition: background 0.3s;
}
.separator:hover {
    background: rgb(41, 170, 225); /* Changes the background to purple on hover */
}
.collapse-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    background: #666;
    color: white;
    border-radius: 5px;
}
.editable:hover {
    content: "";
    background: url('/img/edit.svg') no-repeat 0 0;
    background-color: #EEF8FD;
    background-position: right;
    padding-right: 5px;
    cursor: pointer;
  }

  .readonly:hover {
    content: "";
    background: url('/img/lock.svg') no-repeat 0 0;
    background-color: #EEF8FD;
    background-position: right;
    padding-right: 5px;
    cursor: pointer;
  }

.hover-button {
    opacity: 0;
}
div:hover > .hover-button {
    opacity: 1 !important;
}
.dynamic-row:nth-of-type(even) {
    padding:0;
    background-color: #FAFAFA; /* gray-light */
}
.dynamic-row:last-child td {
    border-bottom: none;
}

.dynamic-row:nth-of-type(even):hover,.dynamic-row:hover {
    background-color: rgba(12, 120, 198, 0.04); /* blue-link-4% */
    cursor: pointer;
}

.dynamic-row-selected{
    background-color: rgb(238,248,253) !important;
}

.sticky-column {
    position: sticky;
    left: 0;
    z-index: 2; /* Ensures it stays on top when scrolling */
}

/* Optional: Enhance the header's z-index */
th.sticky-column {
    z-index: 3; /* Ensure the header cell is above the sticky data cells */
}