:root {
	--main-theme-color: white;
	--main-theme-color-faded: #5400c5;
	--secondary-theme-color: #ff3b00;
	--tertiary-theme-color: #f2f2f2;
	--forth-theme-color: #f3efe7;
    --fifth-theme-color: #691414;
	--body-color: rgba(0, 0, 0, 0.70);
	--font-family: 'Sonic', sans-serif;
	--primary-text: black;
}

@font-face {
	font-family: 'Sonic';
	font-style: normal;
	font-weight: 400;
	src: url(/font/F37Sonic-Regular-f63aa5970ef1ee2f9fffb1b45c31cf27.woff2) format('woff2');
}


body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	color: var(--body-color);
}

main {
	flex: 1 0 auto;
	background: var(--forth-theme-color);
	/* footer is now position:fixed (navbar.css) so it stays visible through a long page's scroll
	   instead of only appearing once you reach the bottom - without this, its own ~70px
	   (.footer-copyright's min-height:50px + 10px top/bottom padding) would sit permanently on
	   top of whatever real content happened to land at the very bottom of the page. */
	padding-bottom: 70px;
}

html {
	font-size: 80%;
	font-family: 'Sonic', sans-serif !important;
}

.primary {
	background-color: var(--main-theme-color) !important;
}

.primary-text {
	color: var(--primary-text) !important;
}

.hover-primary:hover {
	background-color: var(--main-theme-color)  !important;
	cursor: pointer;
}

.hover-primary-text:hover {
	color: var(--main-theme-color)  !important;
	cursor: pointer;
}


.primary.hover-light:hover {
	background-color: white  !important;
	color: var(--main-theme-color)  !important;
	cursor: pointer;
}

.secondary.hover-light:hover {
	background-color: white  !important;
	color: var(--secondary-theme-color)  !important;
	cursor: pointer;
}

.secondary {
	background-color: var(--secondary-theme-color)  !important;
}

.secondary-text {
	color: #691414 !important;
}

.red-text {
	color: var(--secondary-theme-color);
}

.hover-secondary:hover {
	background-color: var(--secondary-theme-color)  !important;
	cursor: pointer;
}

.hover-secondary-text:hover {
	color: var(--secondary-theme-color)  !important;
	cursor: pointer;
}

.tertiary {
	background-color: var(--tertiary-theme-color);
}

.tertiary-text {
	color: var(--tertiary-theme-color);
}

.hover-tertiary:hover {
	background-color: var(--tertiary-theme-color)  !important;
	cursor: pointer;
}

.hover-tertiary-text:hover {
	color: var(--tertiary-theme-color)  !important;
	cursor: pointer;
}

.tertiary.hover-light:hover {
	background-color: white  !important;
	color: var(--tertiary-theme-color)  !important;
	cursor: pointer;
}

.hover-white:hover {
	background-color: white !important;
	cursor: pointer;
}

.hover-white-text:hover {
	color: white !important;
	cursor: pointer;
}

.hover-dark-text:hover {
	color: #00000044 !important;
	cursor: pointer;
}
.progress .indeterminate {
	background-color: var(--main-theme-color);
}

.progress {
	background-color: var(--main-theme-color-faded);
}

.progress .determinate {
	background-color: var(--main-theme-color);
}

.clickable {
	cursor: pointer;
}

.btn-xsmall {
	height: 20px;
	line-height: 20px;
	font-size: 13px;
	padding: 0 5px;
}

.overview-width {
	max-width: none !important;
	width: 90% !important;
}

.collection .collection-item.avatar {
	min-height: 64px !important;
	/* padding-left: 0 !important; */
}

img.past {
	filter: grayscale(100%);
}

.collection .collection-item.avatar {
    min-height: 60px !important;
}

/* Admin/settings page mini navbars (".tabs" - Blackouts/Events/... and Allergies/Preferences/...)
   used pure Materialize defaults: white background, faded pink-red inactive text, a pink
   indicator bar - shared by both pages via this file rather than duplicated per-template. */
.tabs {
	background-color: var(--secondary-theme-color);
}

.tabs .tab a,
.tabs .tab a.active {
	color: white;
}

.tabs .indicator {
	background-color: white;
}

#bounce-img {
	position: relative;
	margin-top: 20vh;
	margin-left: 8vh;
	animation-name: bounce;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-30px);
	}
	100% {
		transform: translateY(0);
	}
}

.easter {
	background-image: url("/images/easter-bckgr-91a79e23c5dfe89392b4224e1673f12c.png") !important;
}

.envelopetwo {
	animation: bounce 1s ease infinite;
}

.envColor {
	/*background-image: linear-gradient(to right top, #B5C18E);*/
	background-color: #FFC268 !important;
}

.envColor:hover {
	background-color: #FFC268 !important;
}

.pulse::before {
	background-color: #FFC268 !important;
}

@keyframes bounce {
	58%  { transform: scale(1,1) translateY(-7px); }
	100% { transform: scale(1,1) translateY(0);}
}

.modal {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-radius: 20px;
	background-color: #ffffff !important;
	margin-top: 15%;
}

.modal-content {
	display: flex;
	align-items: center;
	padding: 0px !important;
}

/* Text-only modal (emoji + message + a "Got it"-style button) - the shared .modal-content rule
   above is built for an image-left/text-right modal, which leaves a text-only one looking like
   a wide, mostly-empty bar. Add this class alongside "modal" to center everything in a normal
   stacked layout and cap the width instead. */
.text-modal .modal-content {
	display: block;
	text-align: center;
	padding: 28px 32px !important;
}

.text-modal .modal-content h5 {
	font-size: 2.4rem;
	margin: 0 0 12px;
}

.text-modal .modal-content p {
	font-size: 1.05rem;
	line-height: 1.5;
}

.text-modal {
	max-width: 480px;
}

.mh-img {
	width: 15% !important;
	margin-right: 15px;
}

.close-modal {
	color: #ee6e73 !important;
	position: absolute;
	left: 95%;
	margin-top: 10px;
}

blockquote {
	border-left: 2px solid #ee6e73;
	margin: 10px 0 !important;
}

.dropdown-content li>a, .dropdown-content li>span {
	color: black !important;
	font-size: 1rem;
}

.top-left-logo {
	position: absolute;
	top: 20px;
	left: 20px;
}

.top-left-logo img {
	height: 50px;
}

.logo-button-wrapper {
	display: inline-block;
	text-align: center;
}

.logo-text-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 10px;
	width: max-content;
	margin: 0 auto;
}

.meerkat-logo {
	height: 8rem;
}

.logo-text {
	font-size: 3rem;
	font-weight: bold;
}

.full-width-btn {
	display: block;
	margin: 10px auto;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

.helper-text {
	position: absolute !important;
	display: inline !important;
}