.instruction-modal {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			pointer-events: none;
			opacity: 0;
			transition: 500ms opacity ease-in;
			/* border: 3px solid green; */
		}
		
		.instruction-modal-container {
			background-color: #fefefe;
			width: 35vw;
			padding: 1.2rem;
			border-radius: 0.5rem;
			z-index: 1;
			/* border: 2px solid blue; */
		}
		
		.instruction-modal-header {
			padding: 2px 16px;
			background-color: #5cb85c;
			color: white;
			box-shadow: 8px 8px 4px 0 green;
			/* border: 2px solid magenta; */
		}		
		
		.instruction-modal-body {
			color: black;
			/* border: 2px dashed red; */
		}
		
		.instruction-modal-sub-body {
			display: flex;
			justify-content: space-around;
			align-items: flex-end;			
			/* border: 2px solid red; */
		}
		
		.instructions-and-button {
			display: flex;
			flex-direction: column;
			margin-bottom: 1vh;
			width: 100%;
			/* border: 2px solid purple; */
		}
		
		.instruction-button {
			margin: 0.5rem;
			text-align: center;
			padding-top: 3vh;
			/* border: 2px solid green; */
		}
		
		/* OK button { */
		.btn-primary {
			font-family: inherit;
			padding: 0.8rem 0.8rem;
			color: black;
			font-size: 1rem;
			cursor: pointer;
			border: 2px solid red;
			border-radius: 50%;
			box-shadow: 0 2px 4px 0 red;
		}

		.btn-primary:hover {
			/* Start the shake animation and make the animation last for 3 seconds */
			animation: shake 3s;
			-webkit-animation: shake 3s;
			
			/* When the animation is finished, start again */
			animation-duration: 3s;
			-webkit-animation-duration: 3s;
			
			/* When the animation is finished, start again */
			animation-iteration-count: 1;
			-webkit-animation-iteration-count: 1;
		}

		@keyframes shake {
			0% {transform: translate(1px, 1px) rotate(0deg);}
			0% {-webkit-transform: translate(1px, 1px) rotate(0deg);}
			10% {transform: translate(-1px, -2px) rotate(-1deg);}
			10% {-webkit-transform: translate(-1px, -2px) rotate(-1deg);}
			20% {transform: translate(-3px, 0px) rotate(1deg);}
			20% {-webkit-transform: translate(-3px, 0px) rotate(1deg);}
			30% {transform: translate(3px, 2px) rotate(0deg);}
			30% {-webkit-transform: translate(3px, 2px) rotate(0deg);}
			40% {transform: translate(1px, -1px) rotate(1deg);}
			40% {-webkit-transform: translate(1px, -1px) rotate(1deg);}
			50% {transform: translate(-1px, 2px) rotate(-1deg);}
			50% {-webkit-transform: translate(-1px, 2px) rotate(-1deg);}
			60% {transform: translate(-3px, 1px) rotate(0deg);}
			60% {-webkit-transform: translate(-3px, 1px) rotate(0deg);}
			70% {transform: translate(3px, 1px) rotate(-1deg);}
			70% {-webkit-transform: translate(3px, 1px) rotate(-1deg);}
			80% {transform: translate(-1px, -1px) rotate(1deg);}
			80% {-webkit-transform: translate(-1px, -1px) rotate(1deg);}
			90% {transform: translate(1px, 2px) rotate(0deg);}
			90% {-webkit-transform: translate(1px, 2px) rotate(0deg);}
			100% {transform: translate(1px, -2px) rotate(-1deg);}
			100% {-webkit-transform: translate(1px, -2px) rotate(-1deg);}
		}			
	
		.instruction-modal-visible {
			opacity: 1;
			pointer-events: auto;
		}
		
		.instruction-modal-body h3 {
			margin-bottom: 0.1rem;
			font-size: calc(1.0rem + 1vmin);
			/* border: 2px solid orange; 			 */
		}
		
		.instruction-modal-body h4 {
			margin-bottom: 0.1rem;
			font-size: 1.0rem;
			padding: 1vw;
			/* width: 250px; */
			border: 2px solid black; 			
		}		

		/*** responsive ***/		
		@media only screen and (max-width: 768px){			
			.instruction-modal-container {width: 80%;}			
		}