/*
 * Prompt is within a fixed height absolute section.  Make sure text doesn't wrap or cutoff
 */
#promptResultRow div {
/*	font-size: 1.8em; */
	font-size: 16px;
}
/* 8/11/17: Because font-size is so small, there should no longer be a need to reduce on smaller
screens.  If that turns out to not be the case, use px instead of em values
@media(max-width: 400px) {
	#promptResultRow div {
		font-size: 1.2em;
	}
}
@media(max-width: 300px) {
	#promptResultRow div {
		font-size: 1.0em;
	}
}
*/

.option-modal-header {
	font-size: 14px;
	font-weight: bold;
}

.onboarding-page-container { background-color: #f4f4f4; }
.public-quiz-container { background-color: #000000; }
.facebook-quiz-container { background-color: #191970; }
.linkedin-quiz-container { background-color: #191970; }
.creator-page-container { background-color: #FFFFFF; }

.onboarding-text-icon {
	color: #ffffff;
	font-weight: 700;
	font-family: Barlow Condensed, Roboto;
	line-height: 1;
}

.footer-text {
	font-family: Roboto;
	color: #dddddd;
	cursor: pointer;
}

.menu-profile-avatar {
	border-radius: 50%;
	max-height: 36px;
	max-width: 36px;
}
.menu-profile-display-name {
	font-size: 14px;
	font-weight: bold;
	margin-left: 6px;
}

.human-hidden {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.auth-large-modal-header {
	padding-bottom: 0;
}
.auth-manage-profile-avatar {
	max-width: 100%;
	max-height: 70px;
	border-radius: 50%;
	margin-top: 8px;
}
.auth-manage-profile-name {
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.5;
	color: #676767;
}
.auth-add-profile-button {
	border-radius: 50%;
	height: 70px;
	width: 70px;
	margin-top: 8px;
	background-color: #4444cc;
}

.auth-action-btn, .auth-action-btn-thin {
	background-color: #3888A4; /* #22a6ee; */
	color: #ffffff;
	text-transform: none;
}
.auth-action-btn:hover, .auth-action-btn-thin:hover {
	background-color: #2C6C83;
	color: #ffffff;
}
.auth-action-btn:disabled, .auth-action-btn-thin:disabled{
	background-color: rgba(56,136,164,.4);
}
.auth-action-btn, .auth-cancel-btn {
	padding: .4rem 2rem;
}
.auth-cancel-btn, .auth-cancel-btn-thin {
	background-color: #bcbcbc;
	color: #000000;
	text-transform: none;
}

.auth-image-upload-link {
	font-family: Roboto;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	color: #adadae;
	cursor: pointer;
}

.auth-image-upload-link:hover {
	text-decoration: underline;
}

.auth-image-drag-text {
	font-family: Roboto;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	color: #6b6b6b;
}

.auth-profile-text-input {
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.5;
	color: #8a8a96;
	border-radius: 2px;
	border: solid 1px #dbdbdb;
}

.auth-profile-crop-preview {
	border-radius: 50%;
}

.selectize-input:before {
	content: '\f002';
  font-family: "FontAwesome";
	font-size: 18px;
	color: #989898;
	margin-right: 8px;
}

.search-help-text {
	font-family: Roboto;
	font-size: 12px;
	font-weight: 750;
}

.landing-page-inner-container { background-color: #ffffff; }
@media(min-width: 600px) {
	.landing-page-container, .category-page-container {
		background-color: #f4f4f4;
		margin: 0 32px 0 32px;
	}
}
@media(min-width: 768px) {
	.landing-page-container, .category-page-container {
		background-color: #f4f4f4;
		margin: 0 70px 0 70px;
	}
}

.overlay-message { position:absolute; left: 0; top: 125px; z-index: 1000; display: none; }

@media(min-width: 960px) {
	.onboarding-desktop-top {
		background: url(https://s3-us-west-2.amazonaws.com/eggspurtz-assets/images/desktop-tile-bg@2x.png) repeat-y center top;
		background-size: 960px auto;
		background-color: #1b1b1b;
	}
	.onboarding-desktop-panel {
		width: 960px;
	}
}

@media(max-width: 959px) and (min-width: 751px) {
	.onboarding-mobile-top {
		background: url(https://s3-us-west-2.amazonaws.com/eggspurtz-assets/images/mobile-tile-bg@3x.png) repeat left top;
		background-size: 100% auto;
	}
	.onboarding-desktop-top {
		background: url(https://s3-us-west-2.amazonaws.com/eggspurtz-assets/images/desktop-tile-bg@2x.png) repeat-y center top;
		background-size: 100% auto;
	}
	.onboarding-desktop-panel {
		width: 100%;
	}
}

@media(max-width: 750px) and (min-width: 425px) {
	.onboarding-mobile-top {
		background: url(https://s3-us-west-2.amazonaws.com/eggspurtz-assets/images/mobile-tile-bg@2x.png) repeat left top;
		background-size: 100% auto;
	}
}

@media(max-width: 424px) {
	.onboarding-mobile-top {
		background: url(https://s3-us-west-2.amazonaws.com/eggspurtz-assets/images/mobile-tile-bg.png) repeat left top;
		background-size: 100% auto;
	}
}

@media(max-height: 699px) {
	.standard-height-mobile {
		display: block;
	}
	.tall-height-mobile {
		display: none;
	}
	.onboarding-mobile-panel-image {
		max-width: 64%/*75%*/;
	}
}

@media(min-height: 700px) {
	.tall-height-mobile {
		display: block;
	}
	.standard-height-mobile {
		display: none;
	}
	.onboarding-mobile-panel-image {
		max-width: 76.8%;
	}
}

.friend-card {
	width: 100%;
	min-height: 115px;
	background-color: #e4e4e4;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
	margin-bottom: 12px;
}
.friend-card-avatar {
	border-radius: 50%;
	height: 85px;
	width: 85px;
	margin-top: 15px;
	margin-left: 15px;
}
.friend-card-name {
	margin-top: 15px;
	margin-left: 20px;
	font-family: Montserrat;
	font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: bold;
	text-align: left;
	letter-spacing: normal;
	color: #3a3a3a;
}
.friend-card-online {
	margin-left: 26px;
	font-family: Montserrat;
	font-size: 18px;
	font-weight: 600;
	color: #514389;
}

.challenge-page-title {
	font-family: Tahoma;
	font-size: 21px;
	font-weight: bold;
}

.challenge-page-small-title {
	font-family: Tahoma;
	font-size: 15px;
	font-weight: 600;
}

.challenge-wait-card, .challenge-accepted-card {
	width: 100%;
	min-height: 115px;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
	margin-bottom: 12px;
	color: #ffffff;
}
.challenge-wait-card {
	background-color: #514389;
}
.challenge-accepted-card {
	background-color: #3888a4;
}
.challenge-wait-text, .challenge-wait-header, .challenge-msg-text,
 		.challenge-msg-header, .challenge-decision-text {
	font-family: Montserrat;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	letter-spacing: normal;
}
.challenge-wait-text, .challenge-wait-header, .challenge-decision-text {
	color: #ffffff;
}
.challenge-msg-text, .challenge-msg-header {
	color: rgba(0, 0, 0, .87);
}
.challenge-wait-text, .challenge-msg-text {
	margin-left: 20px;
	font-size: 16px;
	font-weight: bold;
}
.challenge-wait-header, .challenge-msg-header, .challenge-decision-text {
	font-size: 13px;
	font-weight: 500;
}
.challenge-decision-text {
	white-space: normal;
	text-overflow: initial;
}
.challenge-cancel-link, .challenge-keep-waiting {
	padding: 4px 22px;
	color: #ffffff;
	/*font-size: 15px;*/
}
.challenge-cancel-link {
	background-color: rgba(165, 165, 165, 0.2);
}
.challenge-keep-waiting {
	background-color: rgba(255, 255, 255, 0.2);
}

/* Based on assumption that row neg margin and col padding are 12px */
.custom-half-gutters {
  margin-right: -6px;
  margin-left: -6px;
}
.custom-half-gutters > .col,
.custom-half-gutters > [class*="col-"] {
  padding-right: 6px;
  padding-left: 6px;
}

.custom-huge-gutters {
	margin-right: 72px;
	margin-left: 72px;
}
.custom-huge-gutters > .col,
.custom-huge-gutters > [class*="col-"] {
  padding-right: 20px;
  padding-left: 20px;
}

.onboarding-carousel {
	margin-bottom: 15px;
}
.onboarding-carousel li {
	margin-right: 8px;
	background-color: rgba(255,255,255,.50);
}
.onboarding-carousel li.active {
	background-color: rgba(255,255,255,1.0);
}

.onboarding-main-subheader {
	font-family: Montserrat;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.25;
	letter-spacing: normal;
	color: #ffffff;
}

.onboarding-learn-button, .onboarding-start-button, .onboarding-build-button, .onboarding-mobile-panel-button {
	color: #ffffff;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	height: 48px;
	line-height: 1.25;
	border-radius: 2px;
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
  	border-style: solid;
  	border-width: 1px;
  	border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
  	border-image-slice: 1;
  	text-transform: none;
}

.onboarding-learn-button:active, .onboarding-start-button:active,
	.onboarding-mobile-panel-button.active,
	.onboarding-mobile-panel-button:focus,
	.onboarding-learn-button:hover, .onboarding-start-button:hover,
	.onboarding-mobile-panel-button:hover {
	color: rgba(0,0,0,.50);
}

.onboarding-start-button:focus, .onboarding-learn-button:focus,
	.onboarding-build-button:focus {
	color: #fff;
}

.onboarding-learn-button {
	background-color: #514389;
}

.onboarding-start-button {
	background-color: #3888a4;
}

.onboarding-build-button {
	background-color: #01aaa1;
}

.onboarding-panel-header, .onboarding-variable-header {
	font-family: Montserrat;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.38;
	letter-spacing: normal;
	color: #ffffff;
}
.onboarding-panel {
	font-size: 30px;
}

.onboarding-panel-subheader, .onboarding-variable-subheader {
	font-family: Montserrat;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.38;
	letter-spacing: normal;
	color: #ffffff;
}
.onboarding-panel-subheader {
	font-size: 16px;
}

.OLDlogin-info-message { margin-top: 2em; text-align: center;
		font-size: 1.7em; font-family: Tahoma; color: #FFFFFF; }

.landing-page-header {
	font-family: Montserrat;
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	line-height: 1.33;
	letter-spacing: normal;
	color: #3a3a3a;
}

.landing-page-separator-line {
	width: 100%;
	margin-left: 0;
	height: 8px;
	border-top: 8px solid #ececec;
}

.OLDlanding-page-list-box {
	border: 1px solid #dbdbdb;
	border-radius: 6px;
	padding: 0 20px 20px 20px;
}

.OLDlanding-page-quiz-title {
	font-family: Montserrat;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
	color: #3a3a3a;
}

.OLDlanding-page-quiz-desc {
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	color: #303030;
}

.OLDlanding-page-author-avatar {
	border-radius: 50%;
	max-height: 34px;
	max-width: 34px;
	margin-right: 10px;
}

.OLDlanding-page-author-name {
	font-family: Roboto;
	font-size: 14px;
	line-height: 1.43;
	text-align: left;
	color: #303030;
}

.category-page-quiz-section {
	cursor: pointer;
}

.section-link {
	background-color: rgba(0, 0, 0, 0.12);
}

.waves-effect.category-wave-color { /* The wave */
	  /* Opacity doesnt seem to have effect if < 0.12 */
    background-color: rgba(0, 0, 0, 0.12);
}
.waves-effect.category-wave-color .waves-ripple { /* The ripple */
	  /* Opacity doesnt seem to have effect if < 0.12 */
    background-color: rgba(0, 0, 0, 0.06);
}



.category-page-quiz-title, .category-page-quiz-title:active {
	font-family: Montserrat;
	font-size: 18px;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.33;
	letter-spacing: -0.6px;
	text-align: left;
	color: #3a3a3a !important;
	text-decoration: none !important;
}

.category-page-quiz-desc {
	font-family: Roboto;
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.36;
	letter-spacing: normal;
	text-align: left;
	color: #3a3a3a;
}

.category-page-shuffle-title, .category-page-shuffle-title:active {
	font-family: Montserrat;
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.11;
	letter-spacing: -0.6px;
	text-align: left;
	color: #3a3a3a !important;
	text-decoration: none !important;
}

.shuffle-ranking-nav-block {
	height: 42px;
	color: #ffffff;
	position: relative;
	cursor:pointer;
}

.shuffle-ranking-nav {
	font-family: Roboto;
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	color: #ffffff;
}

.shuffle-ranking-title {
	font-family: Montserrat;
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	line-height: 1.5;
}

.shuffle-ranking-game-number {
	font-family: Roboto;
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	text-transform: uppercase;
}

.category-page-author-avatar {
	border-radius: 50%;
	max-height: 22px;
	max-width: 22px;
	margin-right: 8px;
}

.category-page-author-name {
	font-family: Roboto;
	font-size: 12px;
	line-height: 1.42;
	font-style: normal;
	font-stretch: normal;
	letter-spacing: normal;
	text-align: left;
	color: #808080;
}

.category-page-quiz-image {
	max-height: 164px;
	border-radius: 7px;
  	border: solid 0.2px #979797;
}

.category-page-separator-line {
	width: 93.5%;
	height: 1.2px;
	border: 0.6px solid #979797;
}

@supports (-webkit-overflow-scrolling: touch) {
	.category-page-separator-line {
		width: 93.5%;
		height: 0.4px;
		border: 0.2px solid #979797;
	}
	.section-link {
		background-color: #ffffff;
	}
}

.category-page-play-quiz {
	background-color: #3888a4;
	color: #ffffff;
}

.category-page-share-quiz {
	background-color: #01aaa1;
	color: #ffffff;
}

.category-page-challenge-friend {
	background-color: #514389;
	color: #ffffff;
}

.category-page-challenge-inactive,
.category-page-challenge-inactive:active,
 .category-page-challenge-inactive:hover {
	background-color: rgba(81,67,137,0.6);
	color: rgba(255,255,255,0.6) !important;
}

.category-page-friend-count {
	font-size: 14px;
	font-family: Tahoma;
}
.category-page-modal-title {
	font-family: Tahoma;
	font-weight: 600;
	margin: 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.landing-page-image-div {
	width: 100%;
	background-color: #f9f9f9;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}

.quiz-grouping-title {
	font-family: Montserrat;
	font-size: 37px;
	font-weight: bold;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal
	text-align: left;
	color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.grouping-list-item {
	border-radius: 5px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	cursor: pointer;
	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.2);
}

.recent-played-circle {
	border-radius: 50%;
	box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.recent-played-dark {
	filter: brightness(40%);
}

.category-page-title-card {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	width: 100%;
}

.category-page-span-image {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	width: 100%;
	height: 201px;
	/* object-fit: cover; */
}


.grouping-list-item-title, .grouping-list-item-title:active, .quiz-grouping-title {
	font-family: Montserrat;
	font-size: 22px;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.27;
	letter-spacing: normal;
	color: #ffffff !important;
	text-decoration: none !important;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	/* -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
}

/* Copied from play again button ... not from a spec */
.grouping-action-button {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	height: 48px;
	border-radius: 2px;
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
  	border-style: solid;
  	border-width: 1px;
  	border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
  	border-image-slice: 1;
	text-transform: none;
}

.login-success-header {
	color: #ffffff;
	font-family: Montserrat;
	font-size: 21px;
	font-weight: bold;
}
.login-success-text {
	color: #ffffff;
	font-family: Montserrat;
	font-size: 16px;
}
.login-success-name-box {
	background-color: #282828;
	color: #FFFFFF;
	padding-top: 9px;
	padding-bottom: 9px;
	text-align: center;
	font-family: Roboto;
	font-size: 19px;
	line-height: 1.5;
}

.dismissable-message-header {
	padding-bottom: 0;
}

.dismissable-message-header-line {
	margin-top: 8px;
	margin-left: 1.25rem;
	margin-right: 1.25rem;
	border-top: 1px solid #bcbcbc;
}

.dismissable-message-button {
	background-color: #3888A4;
	color: #ffffff;
	text-transform: none;
}


.OLDlogin-info-name-section { margin-top: 0.25em; margin-bottom: 0.25em; text-align: center;
		font-size: 2.0em; font-family: Tahoma; color: #FFFFFF; }

/* 1px padding prevents sides of border from being chopped off by browser. */
.image-canvas {
	z-index: 100;
	border:1px solid #d3d3d3;
	padding: 1px;
}

/* Canvas is shown briefly for measuring.  Avoid the border flash by using separate class on load */
.image-canvas-measure {
	border: none;
	padding: 1px;
}

.dynamic-overlay { position:absolute; z-index: 1000; display: none; }

/* .dynamic-section { position:absolute; z-index: 100; display: none; } */

.absolute-section { position:absolute;}

.side-padded-section {
	padding-left: 15px;
	padding-right: 15px;
}

.circle-avatar {
	border-radius: 50%;
}

.row-zero-margin { margin-left: 0 !important; margin-right: 0 !important; }

.start-nav {
	background-color: rgba(0, 0, 0, 0.15);
}
.start-nav-item {
	font-family: Montserrat;
  	font-size: 18px;
	font-weight: bold;
	line-height: 1.78;
	color: #ffffff;
}
.start-nav-title {
	text-align: center;
	line-height: 0.9;
}
@media(max-width: 350px) {
	.start-nav-title {
		font-size: 15px;
		max-width: 50%;
	}
}

.start-ready-prompt {
	font-family: Montserrat;
	line-height: 1.4;
	color: #ffffff;
}


.start-square {
	text-align: center;
}
.OLDstart-square {
		border: 2px; border-style: solid; border-color: #696969;
		background-color: #6495ED; padding: 0;
		text-align: center; }

.full-width { width: 100%; margin: 0; }
.full-height { height: 100%;}

.start-square-top { background-color: #48CEB1; color: #FFFFFF; }

.start-square-middle { background-color: #3888A4; margin: 0; color: #FFFFFF; }

.start-square-bottom { background-color: #652085; margin: 0; color: #FFFFFF; }

.start-square-icon-circle { background-color: #000000; border-radius: 50%; }

.ROUGHstart-square-icon-circle { background-color: #000000; border-radius: 55%;
		height: 60%; width: 70%; margin: 15%; margin-top: 20%;
		padding-top: 25%; }

.start-square-icon { }

.start-square-section-title { text-align: left; margin-top: 1.3em; margin-bottom: 1.3em; }

.start-square-section-text { text-align: left; }

.start-button {
	background-color: #000000;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-top: 3px solid #ffffff;
	border-left: 3px solid #ffffff;
}

.start-button:hover, .start-button:active {
	background-color: #9c27b0;
	color: #ffffff;
	border: none;
}

.play-again-button, .share-quiz-button {
	color: #ffffff;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	height: 48px;
	border-radius: 2px;
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
  	border-style: solid;
  	border-width: 1px;
  	border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
  	border-image-slice: 1;
  	text-transform: none;
}

.play-again-button {
	background-color: #3888a4;
}

.share-quiz-button {
	background-color: #01aaa1;
}

.switch-quiz-link {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	color: #ffffff;
}

.cancel-play-again-link {
	font-family: Roboto;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	color: #ffffff;
}

.switch-quiz-link:hover, .cancel-play-again-link:hover {
	color: #dedede;
	text-decoration: underline;
}

.challenge-rematch-text {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.switch-quiz-button {
	background-color: #5a326d;
	color: #ffffff;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
	text-transform: none;
}


.quiz-player-title {
	font-family: Montserrat;
	font-size: 18px;
	font-weight: bold;
	/* line-height: 1.78;*/
	color: #ffffff;
}
.quiz-player-question-counter {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.6px;
	color: #ffffff;
}

.quiz-player-score-update {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.quiz-player-overlay-grid-piece {
	position: absolute;
	background-color: rgba(43, 43, 43, 1/*255, 255, 255, 1*/);
}

.answer-result-icon {
	width: 34px;
	height: 34px;
	border-radius: 50px;
}

.correct-check {
	width: 34px;
	height: 34px;
	border-radius: 50px;
	background-color: #1d8e33;
	/* background-color: var(--tree-green); */
}
.correct-check i {
	font-size: 18px;
	color: #ffffff;
}

.wrong-x {
	width: 34px;
	height: 34px;
	border-radius: 50px;
	background-color: #c3212a;;
}
.wrong-x i {
	font-size: 18px;
	color: #ffffff;
}
.correct-answer-button {
	background-color: #1d8e33 !important; /*#9c27b0*/
	color: #ffffff !important;
	border: none !important;
}
.actual-answer-button {
	background-color: #9c27b0 !important;
	color: #ffffff !important;
	border: none !important;
}
.wrong-answer-button {
	background-color: #c3212a;
	color: #ffffff !important;
	border: none;
}
.wrong-answer-button:hover, .wrong-answer-button:active {
	color: #ffffff !important;
}
.deactivated-answer-button {
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	border: none;
}
.deactivated-actual-answer-button {
	background-color: rgba(156, 39, 176, 0.18);
	color: #ffffff;
	border: none;
}
.OLDstart-button { border: 1px; border-style: solid; border-color: #FFFFFF; border-radius: 3%;
		text-align: center; color: #FFFFFF; }

.OLDstart-button:hover { background-color: #FFFFFF; color: #000000; }

.answer-block {
		border: 2px; border-style: solid; border-radius: 20px;
		border-color: #696969;
		color: #FFFFFF;
		text-align: center; padding-left: 0.5em; padding-right: 0.5em; }

.zz-old-answer-block {
		background-color: rgba(147, 112, 219, .92); }

.answer-button-overlay {
		border: 2px; border-style: solid; border-radius: 4px;
		font-family: Lato-Regular;
		border-color: #696969;
		color: #FFFFFF;
		text-align: center; padding-left: 0.5em; padding-right: 0.5em; }

.active-answer-button, .active-answer-button:focus {
	background-color: #000000;
	color: #ffffff;
	border: 1px solid #ffffff;
}

.active-answer-button:hover {
	background-color: #000000;
	color: #ffffff;
	border: 1px solid #ffffff;
}
@media (hover: hover) {
	.active-answer-button:hover {
	background-color: #9c27b0;
	color: #ffffff;
	border: none;
	}
}

.active-answer-button:active {
	background-color: #000000;
	color: #ffffff;
	border: 1px solid #ffffff;

}
.off-image-answer-button {
	white-space: normal !important;
	padding: 0.5em 1em !important;
	border-radius: 100px; /* 30px; */
	border: solid 1px #6b6b6b;
	text-transform: none;
	font-family: Roboto;
	font-size: 14px;
	font-weight: normal;
}
.answer-button-block {
		border: 2px; border-style: solid; border-radius: 4px;
		font-family: Lato-Regular;
		border-color: #FFFFFF;
		color: #FFFFFF;
		text-align: center; padding-left: 0.5em; padding-right: 0.5em;
		margin-left: 10%; width: 80%; margin-top: 5%; height: 70%; }

.answer-text { display: inline-block; vertical-align: middle; line-height: normal;
		font-weight: bold; }

.choice-text { display: inline-block; vertical-align: middle; line-height: normal;
		font-weight: bold; }

.NOTUSEDchoice-block-text { display: inline-block; vertical-align: middle; line-height: normal;
		font-weight: bold; }

.prompt-text {
	text-align: center;
	color: #FFFFFF;
	font-family: Roboto;
	line-height: 1.25;
	}

.answer-text {
	font-family: Montserrat;
	font-size: 24px;
	line-height: 1.33;
	color: #ffffff;
}

.score-summary-top, .start-screen {
	background-color: #514389;
}

.score-summary-bottom {
	background-color: #282828;
}

.score-summary-invite {
	background-color: #3888a4;
}

.oauth-action-modal {
	background-color: #01aaa1;
	border-radius: 2px;
}

.action-oauth-modal-header {
	font-family: Montserrat;
	font-size: 30px;
	font-weight: normal;
	color: #ffffff;
}

.action-oauth-modal-subheader {
	 font-family: Roboto;
 	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #ffffff;
}

.score-block {
		border: 2px; border-style: solid; border-radius: 20px;
		border-color: #696969; background-color: #800080;
		color: #ffffff;
		text-align: center; padding-left: 0.5em; padding-right: 0.5em;
		margin-bottom: 1.0em; min-height: 2.0em; }


.summary-block {
		border: 2px; border-style: solid; border-radius: 20px;
		border-color: #696969;
		color: #FFFFFF;
		text-align: center; padding-left: 0.5em; padding-right: 0.5em; }

.score-summaryOLD {
		margin-top: 2em;
		color: #FFFFFF;
		text-align: center; font-size: 20px; }

.score-summary-avatar {
	max-width: 68px;
	border-radius: 50%;
}
.score-summary {
	font-family: Montserrat;
	font-size: 30px;
	color: #FFFFFF;
	line-height: 36px;
}

.score-summary-small {
	font-family: Montserrat;
	font-size: 16px;
	color: #FFFFFF;
	line-height: 20px;
}

.score-summary-challenge {
	font-family: Montserrat;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.58;
	color: #FFFFFF;
}

.info-summary {
		margin-top: 2em;
		color: #FFFFFF;
		text-align: center; font-size: 20px; }

.DELETEMEscore-share {
		margin-top: 2em; margin-bottom: 2em;
		color: #FFFFFF;
		text-align: center; font-size: 20px; }

.score-share-header {
	font-family: Montserrat;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.78;
	color: #ffffff;
}
.score-share-details {
	font-family: Roboto;
	font-size: 14px;
	line-height: 1.43;
	text-align: center;
	color: #ffffff;
}

.builder-invite-small-text {
	font-family: Montserrat;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.78;
	color: #ffffff;
}

.builder-invite-big-text {
	font-family: Montserrat;
	font-size: 30px;
	font-weight: 500;
	color: #ffffff;
}

.builder-invite-long-text {
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: #ffffff;
}

.builder-invite-avatar {
	border-radius: 50%;
	min-height: 68px;
	max-height: 68px;
	max-width: 68px;
}

.builder-invite-by-line {
	font-family: Roboto;
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	color: #ffffff;
}

.go-builder-button {
	background-color: #5b326e;
	color: #ffffff;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
	text-transform: none;
}

.oauth-button {
	white-space: normal;
	text-transform: none;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

@media(max-width: 575px) and (min-width: 505px) {
	.oauth-button {
		min-height: 76px;
	}
}
@media(max-width: 506px) and (min-width: 440px) {
	.oauth-button {
		min-height: 64px;
	}
}

.play-again-buttonOLD { min-height: 40px; font-size: 18px; background-color: #4682B4;
		padding-left: 1.5em; padding-right: 1.5em; }

.OLDranking-box {
		border: 2px solid #696969;
		background-color: #DCDCDC; color: #FFFFFF;
		padding-left: 0.5em; padding-right: 0.5em;
		font-size: 20px; }

.ranking-header {
	text-align: center;
	font-family: Montserrat;
 	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	color: #ffffff;
}

.ranking-list-header {
	font-family: Roboto;
	font-size: 14px;
	font-weight: 500;
	color: #8a8a96;
}

.score-ranking-line {
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	color: #ffffff;
}

.score-ranking-line-heavy {
	font-weight: 500;
}

.high-score-name {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #ffffff;
}

.high-score-rank {
	font-family: Montserrat;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.07;
	color: #ffffff;
}
.high-score-points {
	font-family: Montserrat;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.78;
	color: #ffffff;
}
.menu-circle-action {
	background-color: #3888a4;
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 6px;
	border-radius: 50%;
	color: #ffffff;
}
.menu-quizzes-badge {
	background-color: #424242;
	font-size: 12px;
	border-radius: 12px;
	margin-left: 5px;
}
.menu-friends-badge {
	background-color: #424242;
	font-size: 12px;
	border-radius: 12px;
	margin-left: 38px;
	/*padding-top: 3px;
	padding-bottom: 3px;*/
}
.play-score-badge {
	font-size: 12px;
	border-radius: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	/* text-align: center; */
}
.high-score-badge {
	font-family: Roboto;
	font-size: 24px;
	border-radius: 24px;
	font-weight: 500;
	line-height: 1.33;
	/* text-align: center; */
	background-color: #3888a4;
	color: #ffffff;
	padding-top: 2px;
	padding-bottom: 2px;
	min-width: 60px;
}


.OLDscore-ranking-line { padding-top: 0.5em; padding-bottom: 0.5em; }
.OLDscore-ranking-user-line { padding-top: 0.5em; padding-bottom: 0.5em; background-color: #B0C4DE; }

.score-ranking-user-line-highlight { background-color: #4682B4; font-size: 14px; }

.play-again-line {
		position: absolute; bottom: 1em; font-weight: bold; }

.horizontal-center { align-center; }

.text-label { margin-left: 1em; }

.transparent-purple { background-color: rgba(147, 112, 219, .88); }
.transparent-blue { background-color: rgba(0, 0, 255, .88); }
.transparent-green { background-color: rgba(0, 255, 0, .88); }
.transparent-orange { background-color: rgba(255, 140, 0, .88); }

.overlay-message .jumbotron { padding-top: 0; padding-bottom: 0; }

.overlay-allowed-body { z-index: 100; }

.progress-bar-container { height: 10px; }
.progress-bar-section { position: absolute; height: 10px; top: 0; z-index: 100;}
.progress-bar-outline-section { position: absolute; height: 10px; top: 0; z-index: 99; }

.OLDscore-row-container { height: 30px; }
.OLDscore-row-section { height: 28px; margin-top: 1px; color: #FFFFFF; text-align: right; }
.score-text { font-size: 1.5em; }

.login-info-block { border: 2px; border-color: #696969; background-color: #DCDCDC;
		margin-top: 25px; font-size: 1.6em;  }

.external-login-button { padding: 1em; margin-top: 20px; margin-bottom: 25px;
		background-color: #D8BFD8; font-weight: bold;
		border: 4px; border-style: solid; border-color: #000000; border-radius: 1em; }

.poc-info-row { background-color: #FFD700; border: 1px; border-color: #696969;
		padding: 0; margin-top: -30px; font-size: 0.8em; }

.old-poc-info-row { background-color: #FFD700; border: 1px; border-color: #696969;
		padding: 0; margin-top: -25px; margin-bottom: -25px; }

.screen-cover { position:fixed; left: 0; top: 0; z-index: 200; display: none;
		width: 100%; height: 100%; }

.purple-out { background-color: #800080; }
.red-out { background-color: #DC143C; }

.no-margin-no-padding { margin: 0; padding: 0; }
.vertical-margin { margin-top: 1em; margin-bottom: 1em; }

.left-icon { margin-right: 0.3em; }

#queue_tab_list li { padding-right: 1em; }
#queue_tab_list li a { background-color: #D3D3D3; color: #FFFFFF; border-radius: 0; font-size: 1.2em;}
#queue_tab_list li.active a { background-color: #800080; color: #FFFFFF; }

#data_status_slider { max-width: 2em; }
#data_status_slider .slider-horizontal { height: 2em; }
#data_status_slider .slider-selection { background: #BABABA; }
#data_status_slider .slider-handle { background: #800080; height: 2em; width: 2em; }

.status-slider-section { padding-top: 1em; padding-bottom: 1em; }


.modal-message-jumbotron { border: 4px solid #000000; }
.modal-message-header { font-weight: bold; font-size: 180%; margin-left: 1em; }
.modal-input-prompt { font-weight: bold; font-size: 130%; margin-left: 1em; margin-right: 1em; }
.modal-message-1-button { width: 80%; text-align: center; margin-left: 10%; padding: 1em;
		 border: 2px solid #ddd; margin-bottom: 0.5em; font-weight: bold; font-size: 150%; }
.modal-message-2-button { width: 40%; text-align: center; margin-left: 10%;
		padding: 1em; border; 2px solid #ddd; margin-top: 1em; margin-bottom: 0.5em;
		font-weight: bold; font-size: 120%; }

.modal-input { font-weight: bold; font-size: 130%; }

.time-ago-text { margin-left: 0.5em; }

.missing-text-left {text-align: left, top: 0px}

.non-link-button { color: #000000; }

.bg-gray { background: #eeeeee;}
.bg-white { background: #ffffff;}

.align-left { text-align: left; }
.align-center { text-align: center; }

.block-column-header { width: 100%; background-color: #800080; color: #FFFFFF;
		padding-left: 1em; padding-bottom: 0.4em; padding-top: 0.4em; }

.portal-header { border-bottom-width: 15px; border-bottom-style: solid; border-bottom-color: #696969;
		margin: 1em; margin-left: 0.3em; padding-bottom: 1em; }

.portal-header-fancy-color { background-color: #D8BFD8; }

portal-sidebar { padding-left: 1em; padding-right: 1em; }

.portal-header-icon { padding-right: 0.5em; }
.portal-header-title { font-size: 1.6em; }
.portal-header-description { font-size: 0.8em; float: right; }

.portal-menu-button { border: 2px; border-style: solid; padding-bottom: 1.2em; padding-top: 1.2em;
		border-color: #696969; }

.portal-active { background: #800080; }
.portal-inactive { background: #696969; }

.box-button-label { font-size: 1.2em; }

.oval-button { border: 2px; border-style: solid; border-radius: 20px; padding: 0.7em;
		border-color: #696969; }

.bottom-line-table { border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #696969;
		padding-bottom: 52px; margin-bottom: 20px; }

.portal-header button { background-color: #D8BFD8; }

.running-time-label { font-weight: bold; font-size: 0.8em; }
.running-time-date { font-size: 0.8em; }
.running-time-elapsed {text-align: center; }
.running-time-opened-line { text-align: center; }

.sep_line { background: #a9a9a9; position: absolute; height: 2px; left: 0; right: 0;}

.service_row { border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #EEE;
		width: 100%; }
.service_row:first-child {border-top-width: 2px; border-top-style: solid;
		border-top-color: #EEE;}

.panel_header { border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #696969;
		text-align: center; font-weight: bold;}

.panel_details_header { border-bottom-width: 2px; border-bottom-style: solid;
		border-bottom-color: #696969; text-align: center; font-weight: bold;
		margin-bottom: 0.5em; }

.portal_panel { background-color: #D8BFD8; }

.selector-section { margin-bottom: 1em; }

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.only-pad-bottom { padding-top: 0; padding-left: 0; padding-right: 0; }

.left-icon { margin-right: 0.75em; }

.panel_block { border: 2px solid #ddd; padding: 10px; margin-left: -1em; margin-right: -1em;
		background-color: #ffffff; width: 100%; }

.panel_block label { text-align: right; font-weight: bold; }

.panel_block .clickable_input { cursor:pointer; border-bottom: none; }

.button_icon { padding-right: 1.2em; }

.queue_notified_cell { border: 2px solid #ddd; background-color: #FFFF00; width: 100%; }

.queue_warned_cell { border: 2px solid #ddd; background-color: #DC143C; width: 100%; }

.queue_time_cell_icon { margin-left: 0.3em; margin-right: 1em; }


.tag-line { padding-left: 1em; margin-top: -1em; margin-bottom: 2em; }
.feature-header { margin-left: 15%; padding-left: 0.25em; font-size: 120%; font-weight: normal; }

.highlight { color: #0000FF; font-weight: bold; }

.center-text { text-align: center; }

.row-no-shift { margin-left: 0; margin-right: 0; padding-left: 1em; padding-right: 1em; }

.center-bold { text-align: center; font-weight: bold; }

.full_width { width: 100%; }

.checkbox-label { padding-left: 0.5em; }

.message-detail-box { border: 1.5px solid #ddd; }

.smessage-history-header { overflow: hidden; text-overflow: ellipsis; }
.smessage-history-link { display: inline; white-space: nowrap; padding-right: 2em; }
.message-history-link {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical; }

.status-box { margin: 0; border: 2px solid #ddd; }

.status-box-in-queue { background-color: #DDA0DD; }
.status-box-not-in-queue {}
.status-box-notified { background-color: #008000; box-shadow: 4px 4px 8px rgba(0,0,0,.75); }
.status-box-warned { background-color: #FFFF00; box-shadow: 4px 4px 8px rgba(0,0,0,.75); }
.status-box-cleared { background-color: #DC143C;}
.status-box-seated { background-color: #008000;}

.status-box .status-message {font-size: 250%; }

.queue_user_section { border: 2px dotted #ddd; background-color: #DDA0DD; }
.queue_user_summary { font-size: 1.7em; }

.block-action-button { padding: 1em; margin: 1em; box-shadow: 4px 4px 8px rgba(0,0,0,.75); }

.in-box-row {margin-left: 1em; margin-right: 1em;}

.NOTUSEDbreak-word { overflow-wrap: break-word; max-width: 100%;}
.NOTUSEDwrap-on-white-space { white-space: pre-wrap; word-wrap: break-word; }

.center-stretch { width: 80%; text-align: center; margin-left: 10%}
.full-stretch-color { width: 100%; text-align: center;
		background-image: linear-gradient(to bottom, #D8BFD8 0, #e0e0e0 100%); }

#featured-carousel { width: 70%; margin-left: 15%; max-width: 250px; }

.carousel-caption-text { color: #000000; }

.message-dialog-header { background-color: #E6E6FA; margin-left: 1em; margin-right: 1em;
		margin-top: 0; margin-bottom: 1.5em; }

.dialog-input .row { margin-left: 1em; margin-right: 1em; margin-bottom: 0.5em;}

.dialog-input label { text-align: right; font-weight: bold; }

.input-error { background-color: #FFFF00; font-size: 1.1em; font-weight: bold; }

.publisher-queue-row:hover { background-color: #ddd; cursor: pointer; }

.wl_status_message { color: #8B0000; font-family: "Arial Black", Arial, Helvitica;
		font-style: italic; text-align: center; font-size: 1.6em; }

.info { font-family: "Arial Black", Arial, Helvitica; font-size: 1.2em;
		border: 4px dotted #ddd; margin: 1.5em; margin-top: 0.5em; }

.error{ color: #8B0000; font-family: "Arial Black", Arial, Helvitica; font-size: 1.4em;
		border: 4px dotted #ddd; margin: 1.5em; margin-top: 0.5em; }

.user_option_row{ text-align: center; font-size: 1.2em;
		font-family: "Arial Black", Arial, Helvitica; font-style: italic; }

.tab-box-tabs { margin-bottom: -1 px; }

.tab-box-tabs>li.active>a, .tab-box-tabs>li.active>a:hover, .tab-box-tabs>li.active>a:focus
	 { background-color: #eeeeee; }

.tab-box-content { border-left: 2px solid #ddd; border-right: 2px solid #ddd;
		border-bottom: 2px solid #ddd; padding: 10px; margin-bottom: 1em;
		background-color: #eeeeee;}

.nav-back-text {
	margin-left: 9px;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	color: #ffffff;
}

.nav-display-name {
	margin-right: 9px;
	font-family: Roboto;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	color: #ffffff;
}

.NOTUSED-navbar-dark { background-color: #1A1A1A;
		box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.24), 0px 1px 2px 0px rgba(0,0,0,0.12); }

.NOTUSED-navbar-dark .navbar-brand { color: #ffffff; }

.NOTUSED-navbar-dark .navbar-brand: hover, .navbar-dark .navbar-brand:focus {
			color: #ecdbff; }
.blue_header_box {
	padding: 10px;
	border: 1px solid #4fa2d8;
	background: #e7f4f9;
	border-radius: 3px;
	color: #444;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0 2px 8px 0 #c0c0c0;
}

.fitted_image {
	max-width: 100%;
}

body {
	padding-top: 50px;
	margin-top: -20px;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

/*
 * From http://viduthalai1947.github.io/loaderskit/
 * To adjust size, multiply all px values by the same factor, except for the margin
 */
.typing_loader, .typing_loader_small, .typing_loader_tiny_square {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
       -moz-animation: Typing 1s linear infinite alternate;
       -ms-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
    /*margin: 46px auto;   Don't multiply */
    position: relative;
}
.typing_loader {
	margin: 46px auto; /* Don't multiply */
	left: -36px;
}
.typing_loader_small {
	margin: 18px auto;
	left: -72px;
}
.typing_loader_tiny_square {
	margin: 6px auto;
	border-radius: 0;
	left: -36px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,1);
      }
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,1);
      }
}
@-ms-keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,1);
      }
}

@keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,2),
                    72px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 36px 0px 0px 0px rgba(255,255,255,0.2),
                    72px 0px 0px 0px rgba(255,255,255,1);
      }
}