/*
	* {
		border: 1px solid red !important;
		opacity: 1 !important;
		visibility: visible;
	}
	*/


.brain-90 {
	position: relative;
	top: -250px;
}


.brain-90 path {
	/* fill: lightseagreen; */
	fill: url(#gradient);
	stroke: darkgrey;
	stroke-width: 4;
	/* 1a1a1a */
}

.brain-90 path.svg-surplus {
	fill: white;
	stroke: white;
}


.image-parent {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;

	overflow: hidden;
}

.item.background-image-container {
	grid-row-start: 1;
	grid-row-end: 1;
	grid-column-start: 1;
	grid-column-end: 1;
	justify-self: center;
	align-self: start;
	max-height: 500px;
	overflow: hidden;

}

.item.brain-container {
	grid-area: 1 / 1 / 1 / 1;
	justify-self: center;
	align-self: start;
	overflow: hidden;
	max-height: 500px;


}



.start-text {
	font-weight: 600;
	font-size: 18pt;
	user-select: none;
}

#settings-modal {
	font-size: 9pt;
}

#header-container {
	display: grid;
	background-color: #1a1a1a;
	color: white;
	width: 300px;
	border-radius: 4px;
	padding: 12px;
	padding-bottom: 8px;
	min-height: 70px;
	align-self: center;
	justify-self: center;
	align-items: center;
}


#next-element-label {
	/* Float on top of the UI */
	opacity: 0.8;
	position: absolute;
	background-color: black;
	padding: 1px 2px;
	margin: 0;

	border-radius: 10px;

	/* Avoid layout interference */
	width: max-content;
	top: 0;
	left: 0;
	cursor: default;
	pointer-events: none;
	/* animation: blink 1s linear infinite; */
	z-index: 100;

}

#next-element-text {

	margin: 0;
	padding: 0;
	font-size: 8pt;
	font-weight: 800;
	opacity: 1;
	color: white;
	z-index: 100;
}


.day-90-style {

	font-size: 8pt !important;
	font-weight: 900;
	opacity: 1 !important;
	color: goldenrod !important;
	/* animation: blink 1s linear infinite; */
}

.flashing-how-to {
	background-color: black;
	color: white;
	border-radius: 4px;
	padding: 1px 3px;
	font-weight: 500;
	animation: blink 1s linear infinite;
}

.blink-1 {
	animation: blink 1s linear infinite;
}

@keyframes blink {
	25% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
}




.failed-label {
	/* Float on top of the UI */
	display: grid;

	opacity: 0;
	position: absolute;
	background-color: black;

	margin: 0;

	border-radius: 10px;

	/* Avoid layout interference */
	width: max-content;
	top: 0;
	left: 0;
	cursor: default;
	pointer-events: none;
	align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
	max-height: 1rem;

}

.failed-label-text {

	margin: 0;
	padding: 2px 3px;
	padding-bottom: 3px;
	font-size: 7pt;
	font-weight: 800;
	opacity: 1;
	color: red;
	line-height: 1rem;
}


#already-revealed-div {
	/* Float on top of the UI */
	display: grid;

	opacity: 0;
	position: absolute;
	background-color: #111827;

	margin: 0;

	border-radius: 10px;

	/* Avoid layout interference */
	width: max-content;
	top: 0;
	left: 0;
	cursor: default;
	pointer-events: none;
	align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
	max-height: 3rem;
	z-index:999;

}


#already-revealed-text {
	margin: 0;
	padding: 2px 6px;

	font-size: 7pt;
	font-weight: 900;
	opacity: 1;
	/* color: #38bdf8; */
	color: #9ca3af;
	line-height: 0.7rem;
	text-align: center;
}





#milestone-div {
	visibility: hidden;
	display: grid;
	/* Float on top of the UI */

	position: absolute;
	/* background-color: red; */
	/* padding: 1px 3px; */
	margin: 0;

	border-radius: 6px;

	/* Avoid layout interference */
	width: max-content;
	top: 0;
	left: 0;
	cursor: default;
	pointer-events: none;
	/* animation: blink 1s linear infinite; */

	align-items: center;
	justify-items: center;

}

#milestone-trophy {
	position: relative;
	font-size: 9pt;
	opacity: 1;
	align-self: center;
	justify-self: center;
	pointer-events: none;
	top: -2px;
	--animate-duration: 1.5s;


}

#milestone-day-container {


	background-color: #1a1a1a;
	border-radius: 4px;
	align-self: center;
	justify-self: center;



	position: relative;
	top: -4px;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
}

#milestone-day {
	/* background-color: darkgoldenrod; */

	/* border: 1px solid darkgoldenrod; */


	text-align: center;
	margin: 0;
	padding: 1px 3px;
	font-size: 7pt;
	font-weight: 800;
	opacity: 1;
	color: goldenrod;

	align-self: center;
	justify-self: center;
	pointer-events: none;

	z-index: 2;

}


#milestone-days-completed {
	display: none;
	font-size: 8pt;
	font-weight: 800;
	opacity: 1;
	color: goldenrod;
	background-color: black;
	padding: 0 3px;
	margin: 0;
	margin-bottom: 1px;
	line-height: 0.8rem;

	border-radius: 10px;
	/* animation: blink 1s linear infinite; */
}




.id-formatting {
	color: #0ea5e9;
	font-weight: 500;
	cursor: pointer;

	text-decoration: underline;
	/* text-decoration-color: cornflowerblue; */
	text-decoration-color: #0ea5e9;
	text-decoration-thickness: 1px;
}


.streaks-input-labels {
	font-size: 9pt;
	font-weight: 500;
}

.form-control-sm {

	padding: 3px 10px !important;
	font-size: 9pt !important;
	border-radius: 4px !important;
	background-color: #fafafa !important;
	color: black !important;
	font-weight: 500 !important;
	border: 1px solid olivedrab;
	margin-bottom: 5px;
}

.col-form-label-sm {
	padding-bottom: 0.25rem;
	margin-top: 8px;
	font-weight: 600;
}


#progress-div {
	margin-top: 3px;
	font-size: 12pt;
	font-weight: 700;
	text-transform: uppercase;
	color: white;
	opacity: 1;
	min-height: 24px;
}




.menu-icon {
	font-size: 15pt;

}

	.menu-buttons button {

		/* padding: 0.75rem 1.5rem; */
		padding: 0.7rem 1rem;
	}

	.click-to-start-elements {
		opacity: 1;
		cursor: pointer;

	}


.copy-to-clipboard-icon {
	cursor: pointer;
}

.tip {
	margin-left: 6px;
	width: 90%;
	margin-top: 4px;
	font-size: 8pt;
	line-height: 0.8rem;
}

.end-date-elements {
	display: none;
	font-weight: 600;
	font-size: 14pt;
	user-select: none;
}

.info-snippets-ul {
	font-size: 9pt;
	padding-left: 1rem;
	margin-bottom: 0;



}

.info-snippets-ul li {
	padding-bottom: 5px;

}

.info-snippets {
	display: block;

	/* margin-left: 25px; */
	margin: 4px;

}



#tap-panel {
	display: none;
	position: absolute;
	top: 0;

	opacity: 0;

	grid-template-columns: 50% 50%;
	width: 80px;
	justify-items: center;
	align-items: center;

	border-radius: 4px;
	z-index: 9999;
	margin: 0;
	padding: 0;

}


.tap-panel-item {
	display: grid;

	cursor: pointer;

	border-radius: 50%;
	margin: 0;
	padding: 0;
	line-height: 1.1rem;
	align-content: center;
	justify-content: center;

	align-self: center;
	justify-self: center;

	align-items: center;
	justify-items: center;

}

.tap-panel-icon {
	position: relative;

	border-radius: 50%;
	font-size: 24pt;
	margin: 1px 1px;
	padding: 1px;
	color: white;




}


.challenge-image-title {
	display: inline-block;
	font-weight: 500;
	color: #ec4899;
	margin-left: 6px;
}


#failed-div {
	opacity: 0;
	font-size: 8pt;
	color: #fb7185;

}


.alertify .ajs-modal {
	padding: 1% 3%;
}
@media screen and (max-width: 568px) {
	.alertify:not(.ajs-maximized) .ajs-modal {
		padding: 1% 3%;
	}
}
.ajs-content {
	padding: 2px 2px 2px 2px !important;
}

.ajs-footer {
	padding: 6px !important;
}


.alertify .ajs-dialog {

	margin: 1% auto;
	padding: 10px 8px 0 8px;
}

.alertify .ajs-header {
	margin: 0 auto;
	padding: 4px 4px 0 12px;
}
.alertify .ajs-body {
	margin: 1% auto;
	padding: 12px 12px 0 12px;
}
.alertify .ajs-footer {
	margin: 1% auto;
	padding: 12px 12px 0 12px;
}


.alert.alert-info {
	padding: 8px 8px;
}


#share-modal .modal-body {
	text-align: center;
	min-height: 373px;
}

#share-image-container {
	position: relative;

}

	.share-image {
		max-width: 225px;
	}


	#tetrominosLoader {
		min-height: 140px;
		margin-top: 30px;
	}

	.tetrominos {
		position: absolute;
		top: 50%;
		left: 55%;
		transform: translate(-112px, -96px);
	}



	.tetromino {
/* 		width: 96px;
		height: 112px; */

 		width: 72px;
		height: 94px;

		position: absolute;
		transition: all ease 0.3s;
		background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
	}

	.box1 {
		-webkit-animation: tetromino1 1.5s ease-out infinite;
		animation: tetromino1 1.5s ease-out infinite;
	}

	.box2 {
		-webkit-animation: tetromino2 1.5s ease-out infinite;
		animation: tetromino2 1.5s ease-out infinite;
	}

	.box3 {
		-webkit-animation: tetromino3 1.5s ease-out infinite;
		animation: tetromino3 1.5s ease-out infinite;
		z-index: 2;
	}

	.box4 {
		-webkit-animation: tetromino4 1.5s ease-out infinite;
		animation: tetromino4 1.5s ease-out infinite;
	}

	@-webkit-keyframes tetromino1 {
		0%, 40% {
			/* compose logo */
			/* 1 on 3 */
			/* L-shape */
			transform: translate(0, 0);
		}
		50% {
			/* pre-box */
			transform: translate(36px, -20.25px);
		}
		60%, 100% {
			/* box */
			/* compose logo */
			transform: translate(72px, 0);
		}
	}

	@keyframes tetromino1 {
		0%, 40% {
			/* compose logo */
			/* 1 on 3 */
			/* L-shape */
			transform: translate(0, 0);
		}
		50% {
			/* pre-box */
			transform: translate(36px, -20.25px);
		}
		60%, 100% {
			/* box */
			/* compose logo */
			transform: translate(72px, 0);
		}
	}

	@-webkit-keyframes tetromino2 {
		0%, 20% {
			/* compose logo */
			/* 1 on 3 */
			transform: translate(96px, 0px);
		}
		40%, 100% {
			/* L-shape */
			/* box */
			/* compose logo */
			transform: translate(108px, 20.25px);
		}
	}

	@keyframes tetromino2 {
		0%, 20% {
			/* compose logo */
			/* 1 on 3 */
			transform: translate(72px, 0px);
		}
		40%, 100% {
			/* L-shape */
			/* box */
			/* compose logo */
			transform: translate(108px, 20.25px);
		}
	}

	@-webkit-keyframes tetromino3 {
		0% {
			/* compose logo */
			transform: translate(108px, 20.25px);
		}
		20%, 60% {
			/* 1 on 3 */
			/* L-shape */
			/* box */
			transform: translate(72px, 40.25px);
		}
		90%, 100% {
			/* compose logo */
			transform: translate(36px, 20.25px);
		}
	}

	@keyframes tetromino3 {
		0% {
			/* compose logo */
			transform: translate(108px, 20.25px);
		}
		20%, 60% {
			/* 1 on 3 */
			/* L-shape */
			/* box */
			transform: translate(72px, 40.5px);
		}
		90%, 100% {
			/* compose logo */
			transform: translate(36px, 20.25px);
		}
	}

	@-webkit-keyframes tetromino4 {
		0%, 60% {
			/* compose logo */
			/* 1 on 3 */
			/* L-shape */
			/* box */
			transform: translate(36px, 20.25px);
		}
		90%, 100% {
			/* compose logo */
			transform: translate(0, 0);
		}
	}

	@keyframes tetromino4 {
		0%, 60% {
			/* compose logo */
			/* 1 on 3 */
			/* L-shape */
			/* box */
			transform: translate(36px, 20.25px);
		}
		90%, 100% {
			/* compose logo */
			transform: translate(0, 0);
		}
	}








	#outstanding-unmarked-div {
		display: none;
	}


	.outstanding-unmarked-div {
		display: inline-block;
		position:absolute;
		color: #dddcc7;
		font-size: 6pt;
		font-weight: 600;
		line-height: 0.6rem;
		text-align: center;
		cursor: default;
		opacity: 1;
		pointer-events: none;
		background-color: black;
		padding: 1px 2px;
		border-radius: 4px;


	}
















	#share-image-loading {
		font-size: 9pt;

		font-style: italic;
		color: #1a1a1a;
	}