// wrapper for bt app (excluding banner)
.app {
	background-color: $bt-white;

	// we change navbar's position to absolute when the banner is open
	// so the container needs to be positioned relatively
	position: relative;

	// A viewport app sits under the navbar and takes up as much vertical space as the viewport
	// and has a minimum height of 800px (including navbar). Viewport apps include catalog,
	// grades, and enrollment. When smaller than desktop, we no longer attempt to match the
	// height of the viewport b/c we change to mobile view.
	.viewport-app {
		// padding-top: $bt-navbar-height;

		// The reason for this, but WebKit (Chrome + Safari) won't allow child
		// element's height: 100% to work if the parent has a min-height but the
		// height is *not* an absolute size.
		// (see https://bugs.webkit.org/show_bug.cgi?id=26559)
		display: flex;
		flex-direction: column;
		align-items: stretch;

		min-height: $viewport-min-height;

		> div {
			// Effective height: 100%
			flex: 1;

			@include touch {
				align-content: flex-start;
			}
		}

		@include touch {
			height: auto;
		}
	}

	.fit-to-viewport {
		height: 100vh;
		min-height: $viewport-min-height;

		@include touch {
			height: auto;
			min-height: $touch-viewport-min-height;
		}
	}

	.under-navbar {
		padding-top: $bt-navbar-height;
	}
}

::-webkit-scrollbar {
	background-color: rgba(0, 0, 0, 0);
	width: 14px;
	height: 14px;
	z-index: 999999;
}

::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0);
	border-radius: 16px;
	border: 0px solid #fff;
}

::-webkit-scrollbar-button {
	display: none;
}

:hover::-webkit-scrollbar-thumb {
	background-color: #a0a0a5;
	border: 4px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #a0a0a5;
	border: 4px solid #f4f4f4;
}

.footer {
	position: relative;
}
