.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: 1500ms opacity ease-in;
			/* border: 3px solid green; */
		}
		
		.instruction-modal-container {
			background-color: #fefefe;
			width: 50%;
			padding: 1.2rem;
			border-radius: 0.5rem;
			z-index: 1;
			/* border: 1px solid blue; */
		}
		
		.instruction-modal-body {
			color: black;
			/* border: 1px dashed red; */
		}
		
		.instruction-modal-body span {			
			display: flex;
			justify-content: center;
			/* border: 1px solid red; */
		}
		
		.instruction-button {
			margin: 0.5rem;			
			/* border: 2px solid blue; */
		}
		
		/* 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	{transform: translateY(-5px);}
		
		.btn-primary:active {transform: translateY(5px);}		/* simulate 3D when clicked */
	
		.instruction-modal-visible {
			opacity: 1;
			pointer-events: auto;
		}
		
		.instruction-modal-header {
			padding: 2px 16px;
			background-color: #5cb85c;
			color: white;
			box-shadow: 8px 8px 4px 0 green;
			/* border: 1px solid magenta; */
		}
		
		.instruction-modal-footer {			
			color: white;
			display: flex;
			justify-content: center;
			/* border: 1px solid magenta; */
		}
		
		.instruction-modal-body h3 {
			margin-bottom: 0.1rem;
			font-size: calc(1.0rem + 1vmin);
			/* border: 1px solid blue; */			
		}
		
		/*** responsive ***/		
		@media only screen and (max-width: 576px){			
			.instruction-modal-container {width: 80%;}			
			.instruction-modal {font-size: calc(1.0rem + 1vmin)}
		}