/* # The Rotating Marker # */
details summary::-webkit-details-marker { 
	display: none;
	}

summary::before {
  	111font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
  	content: "▶";
  	position: absolute;
  	top: 1rem;
  	left: 0.8rem;
  	transform: rotate(0);
  	transform-origin: center;
  	transition: 0.2s transform ease;  
	}

details[open] > summary:before {
  	transform: rotate(90deg);
  	transition: 0.45s transform ease;
	}

/* # The Sliding Summary # */
details { 
	overflow: hidden;
	}

details summary {
  	position: relative;
  	z-index: 10; 
	}

@keyframes details-show {
  	from {
    		margin-bottom: -80%;
    		opacity: 0;
    		transform: translateY(-100%); 
  		}
	}

details > *:not(summary) {
  	animation: details-show 500ms ease-in-out;
  	position: relative;
  	z-index: 1;
  	transition: all 0.3s ease-in-out;
  	color: transparent;
  	overflow: hidden;
	}

details[open] > *:not(summary) { 
	color: inherit; 
	}

/* # Style 2 # */
details.style2 summary::before {
  	content: "×";
  	color: #FFF;
  	font-size: 2rem;
  	line-height: 1rem;
  	transform: rotate(-45deg);
  	top: 1.2rem;
  	left: 0.5rem;
	}

details[open].style2 > summary:before {
  	transform: rotate(90deg);
  	color: #F00 !important;
  	transition: color ease 2s, transform ease 1s;
	}

/* # Style 3 # */
details.style3 summary::before {
  	content: "›";
  	font-size: 2.5rem;
  	line-height: 1rem;
  	top: 1.3rem;
  	left: 0rem;
  	margin: -0.5rem -0.5rem 0 0.5rem;
  	transform-origin: bottom center;
  	transition: margin linear 0.05s;
	}

details.style3:hover > summary:before {
  	color: #FFF;
	}

details[open].style3 > summary:before {
  	left: 0rem;
  	color: #CCC;
  	transform: rotate(90deg);
  	margin-left: 0.4rem;
  	transition: color ease 2s, transform ease 1s, margin ease 1s;
	}

@supports (-webkit-touch-callout: none) {
  	details.style3 summary::before { 
		top: 1.6rem; 
		}

  	details[open].style3 > summary:before { 
		top: 1.3rem; 
		transition: all 0.8s;
		}
	}

/* # Style 4 # */
details.style4 summary {
  	padding-right: 2.2rem;
  	padding-left: 1rem;
	}

details.style4 summary::before {
  	content: "×";
  	color: #FFF;
  	font-size: 2rem;
  	line-height: 1rem;
  	transform: rotate(-45deg);
  	top: 1.2rem;
  	left: unset;
  	right: 0.6rem;
	}

details[open].style4 > summary:before {
  	transform: rotate(90deg);
  	color: #F00 !important;
  	transition: color ease 2s, transform ease 1s;
	}

/* # Style 5 # */
details.style5 summary {
  	padding-right: 2.2rem;
  	padding-left: 1rem;
	}

details.style5 summary::before {
  	content: "🙈";
  	font-size: 1.5rem;
  	top: 0.5rem;
  	left: unset;
  	right: 0.5rem;
  	transform: rotate(0);
	}

details.style5:hover > summary::before {
  	content: "🙊";
	}

details[open].style5 > summary::before {
  	content: "🐵";
  	transform: rotate(0deg);
	}

details[open].style5 > summary:hover::before {
  	content: "🙉";
	}

details .monkey-see { 
	display: inline; 
	}

details .monkey-hide { 
	display: none; 
	}

details[open] .monkey-see { 
	display: none; 
	}

details[open] .monkey-hide { 
	display: inline; 
	}

/* # Style 6 # */
details.style6 summary { PADDING-TOP: 5PX;
  	padding-right: 2.2rem;
  	padding-left: 1rem;  
	}

details.style6 summary::before {
  	7878content: "❔";   content: "Add a Comment";
  	font-size: 1.5rem; font-size: 1.1rem;
  	top: 0.5rem; top: 0.3rem;
  	left: unset;
  	right: 0.5rem;
  	transform: rotate(0);
	}

details.style6:hover > summary:before {
  	777content: "🔓";   content: "Add a comment";
	}

details[open].style6 > summary:before {
  	7878content: "🔒";   content: "Your Comment Here";
  	transform: rotate(0deg);
	}



/* # Style 7 # */
details.style7 summary {
  	padding-left: 3rem;
	}

details[open].style7 summary,
details.style7:hover summary {
  	background: #000;
  	color: #CCC;
	}

details[open].style7 summary strong,
details.style7:hover summary strong {
  	color: #FDCE4C;
	}

details.style7:hover summary strong { color: #ffdf87; }
details.style7 summary::before {
  	content: "🌑";
  	font-size: 1.5rem;
  	top: 0.5rem;
  	left: 0.5rem;
  	transform: rotate(0);
	}

details.style7:hover > summary::before {
  	content: "🌕";
	}

details[open].style7 > summary::before {
  	content: "🌕";
  	transform: rotate(0deg);
	}

details[open].style7 > summary:hover::before {
  	content: "🌕";
	}
details .moon-new { 
	display: inline; 
	}

details .moon-full { 
	display: none; 
	}

details[open] .moon-new { 
	display: none; 
	}

details[open] .moon-full { 
	display: inline; 
	}

details.style7 .content { 
	background: #DDD; 
	}






/* # Style 8 # */
details.style8 summary { PADDING-TOP: 5PX;
  	padding-right: 2.2rem;
  	padding-left: 1rem;
	}

details.style8 summary::before {
  	7878content: "❔";   content: "Ethics Galore";
  	font-size: 1.5rem; font-size: 1.1rem;
  	top: 0.5rem; top: 0.3rem;
  	left: unset;
  	right: 0.5rem;
  	transform: rotate(0); 
	}

details.style8:hover > summary:before {
  	777content: "🔓";   content: "Ethics Galore";
	}

details[open].style8 > summary:before {
  	7878content: "🔒";   content: "Platform of Marvels";
  	transform: rotate(0deg);
	}





/* # Just Some Pretty Styles # */


details {
  	777max-width: 500px; max-width: 100%;
  	box-sizing: border-box;
  	margin-top: 5px;
  	background: #E8E8E8; 77background: #F2F2F2;
	background-image: url("../Picture_Center/background-center/concrete-wall.png"); 
	}

summary { margin-top: 3px; 
  	77border: 4px solid transparent; 
  	outline: none;
  	--padding: 1rem; --padding: 0.2rem; --padding-top: 0.1rem; 7878padding-bottom: 0.5rem;
  	7878padding-left: 2.2rem;
  	77display: block;
  	7background: #666; 44background: #e8e8e8; 777BACKGROUND:  #007399; 
  	78787878color: white; 777color: #00008A;  777color: #ccffff;
  	777position: relative;
  	cursor: pointer; 
	77777background-image: url("../Picture_Center/background-center/concrete-wall.png");
	}





/*******FORMAT BUTTON***************************************************************************************************/
summary {
  font-size: 2rem;  font-size: 1rem; FONT-WEIGHT: 900;
  background: none;
  border: none;
  position: relative;
  /* to do, calc arrow-stripes so they repeat nicely on animation loop   */
  78787878--padding-block: 1rem;   --padding-block: 0.5rem;
  --padding-inline: 2rem;
  --arrow: 5rem;
  --arrow-stripes: .8rem;

  padding: var(--padding-block) var(--padding-inline);
  padding-right: calc(var(--padding-inline) + var(--arrow));
  filter: drop-shadow(4px 4px 4px hsl(0 0% 0% / .5));
  color: white;
  border-radius: 999vmax 0 0 999vmax;
  cursor: pointer;
  transition: all 125ms
}
summary:active {
  scale: .975;
}  
summary:hover::after{
  animation-play-state: paused;
}
summary::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background-color: green;   background-color: #193366;
  background-image: linear-gradient(transparent 50%, hsl(0 0% 0% / .5) 0);
78787878animation: mask-position 5s linear infinite;

  animation: mask-position 50s linear infinite;
  
  --conic-stops: black 0 90deg, #0000 0;
  --linear-stops: #0000 0px, black 1px var(--arrow-stripes), #0000 calc(var(--arrow-stripes) + 1px) calc(var(--arrow-stripes) * 2);
  --mask-image:
    conic-gradient(from 225deg at right, var(--conic-stops)),
    conic-gradient(from 225deg at right, var(--conic-stops)),
    repeating-linear-gradient(-135deg, var(--linear-stops)),
    repeating-linear-gradient(-45deg, var(--linear-stops));
  --mask-position: 0 0, 0 0, 0 0, 0 100%;
  --mask-position-to: 0, 0, -100% 0 , -100% 100%;
  --mask-size: calc(100% - var(--arrow)) 100%, 100%, 200% 50%, 200% 50%;
  --mask-repeat: no-repeat, repeat, repeat-x, repeat-x;

  -webkit-mask-image: var(--mask-image);
  -webkit-mask-position: var(--mask-position);
  -webkit-mask-size: var(--mask-size);
  -webkit-mask-repeat: var(--mask-repeat);
  -webkit-mask-composite: source-over, source-out, source-over, source-over;

  mask-image: var(--mask-image);
  mask-position: var(--mask-position);
  mask-size: var(--mask-size);
  mask-repeat: var(--mask-repeat);
  mask-composite: add, subtract, add, add;
}

@keyframes mask-position {
  to { 
    -webkit-mask-position: var(--mask-position-to);
    mask-position: var(--mask-position-to);
  }
}




summary:hover::after{
	background-color: #4d0019;
	}
/********END OF FORMAT BUTTON*****************************************************************************************************/




details[open] summary,
summary:hover {
  color: #FFCA28; color: #F2F2F2;
  background: #444; background: #333333;
	border-radius: 5px; transition-delay: 0.5s;
}

summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
  	777color: #FFA128;  color: rgb(153,204,0); color: #FFFFFF;
	}

.content {
  padding: 10px;
  border: 2px solid #888;
  border-top: none;
}





/*****OUTER MAIN CIRCLE FOR EXTERNAL NUMBER************************************************************************/
.icon-flex {
	FLOAT: LEFT; 
	MARGIN-RIGHT: 12PX;
	}

.icon-flex, .icon-wrapper {
    	display: flex;
    	justify-content: center;
    	align-items: center;
	}

.icon-wrapper {
	font-family: Helvetica;
	color: rgb(153,204,0);
    	border-radius: 50%;
    	overflow: hidden;
    	border: 3px solid rgb(153,204,0);
	background-color: #000;
    	font-size: 0.8rem;
    	width: 25px;
    	height: 25px;
	}

.icon-wrapper i {
    	color: blue;
	}
/*****END OF OUTER MAIN CIRCLE FOR EXTERNAL NUMBER************************************************************************/





/*****INNER TOGGLE CHILD CIRCLE FOR INNER NUMBER************************************************************************/
#number-identification {
	/**CENTER NUMBER INSIDE CIRCLE**/
		display: inline-flex;
  		vertical-align: middle;
  		text-align: center;
	/**END OF CENTER NUMBER INSIDE CIRCLE**/
	}
/*****END OF INNER TOGGLE CHILD CIRCLE FOR INNER NUMBER************************************************************************/



#react-list {
	margin-left: 5%;
	}