body {
  border-left: 0.1em solid black;
  border-right: 0.1em solid black;
  border-bottom: 0.1em solid black;
  margin-left:auto; 
  margin-right:auto;
}

.potty-limited-screen-size {
	max-width: 1200px;
}

.potty-clickable {
	cursor: pointer;
}
.potty-clickable:hover {
	border-color:orange;
}

.potty-spinner {
  border: 0.1em solid #f3f3f3;
  border-radius: 50%;
  border-top: 0.1em solid #3498db;
  width: 1em;
  height: 1em;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

.badge.potty-badge-color-1 {
	background-color: #df6969;
}
.potty-participant-frame-1 {
	border-left: 2px solid #df6969;
	border-right: 2px solid #df6969;
	border-top: 1px dotted #df6969;
	border-bottom: 1px dotted #df6969;
}
.badge.potty-badge-color-2 {
	background-color: #dfa669;
}
.potty-participant-frame-2 {
	border-left: 2px solid #dfa669;
	border-right: 2px solid #dfa669;
	border-top: 1px dotted #dfa669;
	border-bottom: 1px dotted #dfa669;
}
.badge.potty-badge-color-3 {
	background-color: #7ea643;
}
.potty-participant-frame-3 {
	border-left: 2px solid #7ea643;
	border-right: 2px solid #7ea643;
	border-top: 1px dotted #7ea643;
	border-bottom: 1px dotted #7ea643;
}
.badge.potty-badge-color-4 {
	background-color: #43b982;
}
.potty-participant-frame-4 {
	border-left: 2px solid #43b982;
	border-right: 2px solid #43b982;
	border-top: 1px dotted #43b982;
	border-bottom: 1px dotted #43b982;
}
.badge.potty-badge-color-5 {
	background-color: #43a8b9;
}
.potty-participant-frame-5 {
	border-left: 2px solid #43a8b9;
	border-right: 2px solid #43a8b9;
	border-top: 1px dotted #43a8b9;
	border-bottom: 1px dotted #43a8b9;
}
.badge.potty-badge-color-6 {
	background-color: #4f609f;
}
.potty-participant-frame-6 {
	border-left: 2px solid #4f609f;
	border-right: 2px solid #4f609f;
	border-top: 1px dotted #4f609f;
	border-bottom: 1px dotted #4f609f;
}
.badge.potty-badge-color-7 {
	background-color: #935bb9;
}
.potty-participant-frame-7 {
	border-left: 2px solid #935bb9;
	border-right: 2px solid #935bb9;
	border-top: 1px dotted #935bb9;
	border-bottom: 1px dotted #935bb9;
}
.badge.potty-badge-color-8 {
	background-color: #82455f;
}
.potty-participant-frame-8 {
	border-left: 2px solid #82455f;
	border-right: 2px solid #82455f;
	border-top: 1px dotted #82455f;
	border-bottom: 1px dotted #82455f;
}
.badge.potty-badge-color-9 {
	background-color: #481111;
}
.potty-participant-frame-9 {
	border-left: 2px solid #481111;
	border-right: 2px solid #481111;
	border-top: 1px dotted #481111;
	border-bottom: 1px dotted #481111;
}

.potty-background-light {
	background-color: aliceblue;
}
 
.potty-huge-button {
	font-size: 1.5em;
	color: #5b5b5b;
	background-color: #fff7ed;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}