/*********************
 * TRANSPORTER STUFF *
 *********************/
.aops-transporter-wrapper {
	height: 640px;
	border: 1px solid #aaa;
	position: relative;
	overflow: hidden;
	margin-bottom: 15px;
	background: rgb(223, 224, 226);
	overflow-x: hidden;
}

.aops-transporter-main {
	height: 100%;
	position: relative;
	overflow-y: scroll;
	overflow-x: hidden;
}

.aops-transporter-layout {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.aops-transporter-main .layout-container > .aops-transporter-layout {
	padding-left: 15px;
	padding-right: 15px;
}

.aops-transporter-layout:first-of-type {
	padding-top: 15px;
}

/****************
 * BUBBLE STUFF *
 ****************/

.aops-transporter-main .aops-transporter-bubble {
	border-radius: 20px;
	padding: 10px;
	max-width: 80%;
	position: relative;
	margin-bottom: 15px;
	color: white;
	text-align: left;
	background-color: red;
	transition: width 0.5s, max-width 0.5s, min-width 0.5s, border-radius 0.5s,
		box-shadow 0.5s, -webkit-filter 0.5s, -webkit-transform 0.5s;
	transition: width 0.5s, max-width 0.5s, min-width 0.5s, border-radius 0.5s,
		box-shadow 0.5s, filter 0.5s, transform 0.5s;
	transition: width 0.5s, max-width 0.5s, min-width 0.5s, border-radius 0.5s,
		box-shadow 0.5s, filter 0.5s, transform 0.5s, -webkit-filter 0.5s, -webkit-transform 0.5s;
}

.aops-transporter-main .aops-transporter-bubble.teacher:not(.virtual) {
	min-width: 80%;
	border-radius: 0px 20px 20px 20px;
	color: black;
	background-color: #ffffff;
	-webkit-align-self: flex-start;
	        align-self: flex-start;
}

.aops-transporter-main .aops-transporter-bubble.student:not(.virtual) {
	color: white;
	border-radius: 20px 20px 0px 20px;
	background-color: #1d2a4c;
	-webkit-align-self: flex-end;
	        align-self: flex-end;
}

.aops-transporter-main .aops-transporter-bubble.whiteboard:not(.virtual) {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-webkit-align-items: center;
	        align-items: center;
	color: black;
	max-width: 100%;
	min-width: 0%;
	text-align: center;
	background-color: #ffffff;
	-webkit-align-self: center;
	        align-self: center;
	border: 2px solid rgba(0, 0, 0, 0.3);
	border-radius: 0px;
	padding: 8px 28px;
}

.aops-transporter-bubble.virtual {
	background-color: transparent;
	padding: 0;
	margin: 0;
	max-width: 100%;
	border-radius: 0;
	margin-bottom: 7px;
	overflow-y: visible;
	-webkit-justify-content: center;
	        justify-content: center;
}

.aops-transporter-bubble.teacher.virtual {
	color: black;
}

.aops-transporter-bubble.student.virtual {
	color: white;
}

.aops-transporter-bubble.whiteboard.virtual {
	color: black;
}

.aops-transporter-main .inactive-status {
	padding: 5px 10px;
	font-style: italic;
}

.aops-transporter-bubble.student.short-answer {
	min-width: 320px;
	padding: 12px;
}

.aops-transporter-bubble.student.short-answer input[type="text"] {
	-webkit-flex: 1;
	        flex: 1;
	min-height: 30px;
	padding: 4px;
	border-radius: 4px;
	border: 2px solid rgba(185, 195, 255, 0.4);
	background-color: rgba(185, 195, 255, 0.1);
	color: white;
}

.aops-transporter-bubble.whiteboard .content {
	max-width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-webkit-align-items: center;
	        align-items: center;
	text-align: center;
	-webkit-align-self: center;
	        align-self: center;
	padding: 1px;
}

.aops-transporter-bubble.whiteboard .transporter-problem {
	max-width: 100%;
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-webkit-align-items: center;
	        align-items: center;
}

.aops-transporter-bubble.whiteboard .transporter-problem.disabled,
.aops-transporter-bubble.whiteboard .transporter-problem.disabled * {
	pointer-events: none !important;
}

.aops-transporter-bubble.student.decorated {
	overflow-x: visible;
}

.aops-transporter-bubble.student.short-answer .input-row {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
}

/* Formatting Tips Icon */
.aops-transporter-bubble.student .formatting-tips {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	font-size: 14px;
	margin-left: 8px;
	width: 24px;
	height: 24px;
	border-radius: 100px;
	border: 2px solid white;
	background-color: rgba(35, 41, 78, 1);
	opacity: 0.7;
	transition: opacity 0.2s, margin 0.2s, width 0.2s, padding 0.2s, border 0.2s;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.aops-transporter-bubble.student .formatting-tips:hover {
	cursor: pointer;
	opacity: 1;
}

.aops-transporter-bubble.student .formatting-tips.disabled {
	margin: 0;
	opacity: 0;
	width: 0;
	padding: 0;
	border: none;
	pointer-events: none;
}

@-webkit-keyframes oneSpinnyBoi {
	from {
		-webkit-transform: rotate(-360deg) scale(0);
		        transform: rotate(-360deg) scale(0);
	}

	to {
		-webkit-transform: rotate(0deg) scale(1);
		        transform: rotate(0deg) scale(1);
	}
}

@keyframes oneSpinnyBoi {
	from {
		-webkit-transform: rotate(-360deg) scale(0);
		        transform: rotate(-360deg) scale(0);
	}

	to {
		-webkit-transform: rotate(0deg) scale(1);
		        transform: rotate(0deg) scale(1);
	}
}

.aops-transporter-bubble.student .decorator {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	        align-items: center;
	position: absolute;
	top: 0;
	right: 100%;
	margin-right: 10px;
	height: 100%;
	font-size: 16px;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	-webkit-animation-duration: 0.5s;
	        animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-out;
	        animation-timing-function: ease-out;
	-webkit-animation-name: oneSpinnyBoi;
	        animation-name: oneSpinnyBoi;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
}

.aops-transporter-bubble.student .response,
.aops-transporter-bubble.student .transporter-response {
	text-align: center;
}

.mjx-math .mathjax-messed-up-my-font-size-please-fix-it {
	font-size: calc(100% / 1.19);
}

.aops-transporter-bubble.student .transporter-response .preview-graph {
	max-width: 100%;
	background-color: white;
	padding: 8px;
	margin: 4px;
	border-radius: 8px 8px 0px 8px;
}

/****************
 * STICKY STUFF *
 ****************/
.aops-transporter-bubble.sticky {
	position: fixed;
	top: 0;
	margin: auto !important;
	overflow: visible !important;
	max-height: calc(100% - 40px) !important;
	max-width: 100% !important;
	min-width: 100% !important;
	border-radius: 0 !important;
	-webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
	-webkit-filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4));
	        filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4));
	z-index: 1;
}

.aops-transporter-bubble.sticky.collapsed {
	-webkit-transform: translate3d(0, calc(-100% + 10px), 0);
	        transform: translate3d(0, calc(-100% + 10px), 0);
}

.aops-transporter-main .sticky-placeholder {
	visibility: hidden;
	position: relative;
	margin-bottom: 15px;
	width: 100%;
	border: 2px dashed rgba(29, 42, 76, 0.1);
	background-color: rgba(29, 42, 76, 0.05);
}

.aops-transporter-main .sticky-placeholder::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	content: "This bubble is stickied.";
	opacity: 0.6;
}

.aops-transporter-bubble.sticky .sticky-collapse {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	position: absolute;
	bottom: 0;
	width: 44px;
	height: 20px;
	background: #ffffff;
	color: rgb(66, 66, 66);
	border: 2px solid rgb(178, 178, 178);
	border-top: none;
	-webkit-transform: translateY(100%);
	        transform: translateY(100%);
	overflow: hidden;
}

.aops-transporter-bubble.sticky .sticky-collapse span {
	-webkit-transform: rotate(-90deg);
	        transform: rotate(-90deg);
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.aops-transporter-bubble.sticky.collapsed .sticky-collapse span {
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
}

/****************
 * BUTTON STUFF *
 ****************/
.aops-transporter-bubble a.btn-like {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-flex: 1 1 auto;
	        flex: 1 1 auto;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	border-radius: 20px;
	border: 2px solid rgba(0, 0, 0, 0.26);
	padding: 5px 10px;
	min-width: 64px;
	min-height: 35px;
	text-align: center;
	color: black;
	background: #ffffff;
	border-color: black;
	overflow-x: hidden;
	margin: 5px;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.5s;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.aops-transporter-bubble a.btn-like.off {
	pointer-events: none;
}

.aops-transporter-bubble a.btn-like:not(.off):hover {
	text-decoration: none;
}

.aops-transporter-bubble a.btn-like.off:not(.selected) {
	opacity: 0.35;
}

/* Allow images in button content to be in line with text. */
.aops-transporter-bubble a.btn-like div.inner-content {
	display: inline-block;
}

/* Button Containers */
.aops-transporter-bubble .btn-submit-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
	-webkit-justify-content: flex-end;
	        justify-content: flex-end;
	margin-top: 10px;
}

.aops-transporter-bubble div:first-child:empty ~ .btn-submit-container {
	margin-top: 0px;
}

.aops-transporter-bubble .btn-submit-container.has-hint {
	-webkit-justify-content: space-between;
	        justify-content: space-between;
}

.aops-transporter-bubble .btn-submit-container a.btn-like {
	-webkit-flex: 1;
	        flex: 1;
	min-width: 64px;
}

.aops-transporter-bubble.student.short-answer
	.btn-submit-container
	a.btn-like:first-of-type {
	margin-left: 0px;
}

.aops-transporter-bubble.student.short-answer
	.btn-submit-container
	a.btn-like:last-of-type {
	margin-right: 0px;
}

.aops-transporter-bubble .btn-answer-problem {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
	-webkit-justify-content: space-evenly;
	        justify-content: space-evenly;
	-webkit-align-items: stretch;
	        align-items: stretch;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
}

/* Clear-all pseudo button. */
.aops-transporter-bubble .clear-button-wrapper {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-webkit-align-items: flex-end;
	        align-items: flex-end;

	margin-top: 10px;
}
.aops-transporter-bubble .clear-button-wrapper * {
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	transition: border-color 0.2s, background-color 0.2s;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.aops-transporter-bubble div.clear-button-wrapper > .clear-button {
	border-radius: 20px;
	line-height: 30px;
	height: 30px;
	min-width: 100px;
	text-align: center;

	font-size: 14px;
	background-color: #b7b7b7;
	color: white;
}

.aops-transporter-bubble div.clear-button-wrapper > .clear-button.is-enabled {
	cursor: pointer;
	background-color: #dd312f;
}
.aops-transporter-bubble
	div.clear-button-wrapper
	> .clear-button.is-enabled:hover {
	background-color: #841d1c;
}

/*****************
 * BUTTON COLORS *
 *****************/

/* Red */
.aops-transporter-bubble a.btn-like.color0.light {
	color: #841d1c;
	border-color: #841d1c;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color0.light:not(.selected):hover {
		background-color: #f8d5d5;
		border-color: #dd312f;
	}
}

.aops-transporter-bubble a.btn-like.color0.light.selected,
.aops-transporter-bubble a.btn-like.color0:not(.light) {
	color: #ffffff;
	border-color: #841d1c;
	background-color: #dd312f;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color0.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color0:not(.light):hover {
		border-color: #f8d5d5;
		background-color: #e76e6d;
	}
}

/* Teal */
.aops-transporter-bubble a.btn-like.color1.light {
	color: #31575c;
	border-color: #31575c;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color1.light:not(.selected):hover {
		background-color: #dce9ea;
		border-color: #52919a;
	}
}

.aops-transporter-bubble a.btn-like.color1.light.selected,
.aops-transporter-bubble a.btn-like.color1:not(.light) {
	color: #ffffff;
	border-color: #31575c;
	background-color: #52919a;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color1.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color1:not(.light):hover {
		border-color: #dce9ea;
		background-color: #85b2b8;
	}
}

/* Green */
.aops-transporter-bubble a.btn-like.color2.light {
	color: #2f6400;
	border-color: #2f6400;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color2.light:not(.selected):hover {
		background-color: #dbedcc;
		border-color: #4fa800;
	}
}

.aops-transporter-bubble a.btn-like.color2.light.selected,
.aops-transporter-bubble a.btn-like.color2:not(.light) {
	color: #ffffff;
	border-color: #2f6400;
	background-color: #4fa800;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color2.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color2:not(.light):hover {
		border-color: #dbedcc;
		background-color: #83c24c;
	}
}

/* Orange */
.aops-transporter-bubble a.btn-like.color3.light {
	color: #863d00;
	border-color: #863d00;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color3.light:not(.selected):hover {
		background-color: #f8e0cc;
		border-color: #e06700;
	}
}

.aops-transporter-bubble a.btn-like.color3.light.selected,
.aops-transporter-bubble a.btn-like.color3:not(.light) {
	color: #ffffff;
	border-color: #863d00;
	background-color: #e06700;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color3.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color3:not(.light):hover {
		border-color: #f8e0cc;
		background-color: #e9944c;
	}
}

/* Blue */
.aops-transporter-bubble a.btn-like.color4.light {
	color: #341f99;
	border-color: #341f99;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color4.light:not(.selected):hover {
		background-color: #ddd6ff;
		border-color: #5735ff;
	}
}

.aops-transporter-bubble a.btn-like.color4.light.selected,
.aops-transporter-bubble a.btn-like.color4:not(.light) {
	color: #ffffff;
	border-color: #341f99;
	background-color: #5735ff;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color4.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color4:not(.light):hover {
		border-color: #ddd6ff;
		background-color: #8971ff;
	}
}

/* Purple */
.aops-transporter-bubble a.btn-like.color5.light {
	color: #692599;
	border-color: #692599;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color5.light:not(.selected):hover {
		background-color: #efd8ff;
		border-color: #af3eff;
	}
}

.aops-transporter-bubble a.btn-like.color5.light.selected,
.aops-transporter-bubble a.btn-like.color5:not(.light) {
	color: #ffffff;
	border-color: #692599;
	background-color: #af3eff;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color5.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color5:not(.light):hover {
		border-color: #efd8ff;
		background-color: #c777ff;
	}
}

/* Pink */
.aops-transporter-bubble a.btn-like.color6.light {
	color: #8b2599;
	border-color: #8b2599;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color6.light:not(.selected):hover {
		background-color: #fad8ff;
		border-color: #e83fff;
	}
}

.aops-transporter-bubble a.btn-like.color6.light.selected,
.aops-transporter-bubble a.btn-like.color6:not(.light) {
	color: #ffffff;
	border-color: #8b2599;
	background-color: #e83fff;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color6.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color6:not(.light):hover {
		border-color: #fad8ff;
		background-color: #ee78ff;
	}
}

/* Magenta */
.aops-transporter-bubble a.btn-like.color7.light {
	color: #72004e;
	border-color: #72004e;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color7.light:not(.selected):hover {
		background-color: #f2cce6;
		border-color: #bf0083;
	}
}

.aops-transporter-bubble a.btn-like.color7.light.selected,
.aops-transporter-bubble a.btn-like.color7:not(.light) {
	color: #ffffff;
	border-color: #72004e;
	background-color: #bf0083;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color7.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color7:not(.light):hover {
		border-color: #f2cce6;
		background-color: #d24ca8;
	}
}

/* Gray */
.aops-transporter-bubble a.btn-like.color8.light {
	color: #5b5b5b;
	border-color: #5b5b5b;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color8.light:not(.selected):hover {
		background-color: #eaeaea;
		border-color: #999999;
	}
}

.aops-transporter-bubble a.btn-like.color8.light.selected,
.aops-transporter-bubble a.btn-like.color8:not(.light) {
	color: #ffffff;
	border-color: #5b5b5b;
	background-color: #999999;
}

@media (hover: hover) {
	.aops-transporter-bubble a.btn-like.color8.light.selected:hover,
	.aops-transporter-bubble a.btn-like.color8:not(.light):hover {
		border-color: #eaeaea;
		background-color: #b7b7b7;
	}
}

/***************
 * IMAGE STUFF *
 ***************/
.aops-transporter-bubble img {
	max-width: 100%;
	height: auto;
	/*
		FIXME: Inline LaTeX height can become inaccurate in the scale of subpixels.
		I'm not sure what the fix for this is right now without absurd JS.
	*/
}

.aops-transporter-bubble img:-moz-loading {
	display: none;
}

.aops-transporter-bubble.whiteboard.virtual img {
	padding: 0;
}

/* Effect for LateX on dark backrounds */
.aops-transporter-bubble.student img.latex,
.aops-transporter-bubble a.btn-like.selected img.latex {
	-webkit-filter: invert(100%);
	        filter: invert(100%);
}

/**************
 * ICON STUFF *
 **************/
.aops-transporter-wrapper .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.aops-transporter-wrapper .menu-icon {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
}

.aops-transporter-wrapper .menu-icon span {
	transition: color 0.2s, opacity 0.2s;
	color: #666666;
	opacity: 0.5;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	font-size: 22px;
}

.aops-transporter-wrapper .menu-icon:hover {
	cursor: pointer;
}

.aops-transporter-wrapper .menu-icon:hover span {
	opacity: 1;
}

.aops-transporter-wrapper .inverted span {
	color: white !important;
}

#grid.nova .aops-transporter-wrapper .menu-icon.ecole-mouseover-anchor:hover,
.aops-transporter-wrapper .menu-icon.ecole-mouseover-anchor:hover {
	background-color: transparent !important;
}

/****************
 * SCROLL STUFF *
 ****************/
.aops-transporter-wrapper .scroll-alert {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.3) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	background-size: 100% 20px;
	background-position-y: bottom;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 21;
}

.aops-transporter-wrapper .aops-scroll-bar {
	top: 0;
	left: auto;
	right: 0;
	height: 100%;
	width: 8px;
	background-color: inherit;
	border-radius: 0;
	z-index: 20;
}

.aops-transporter-wrapper .aops-scroll-slider {
	background-color: #ccc;
	border-radius: 4px;
	width: 8px;
}

/******************
 * SETTINGS STUFF *
 ******************/

/* 
 * The Settings, Discussions, Error, then New Topic buttons disappear when
 * the page's max width is small enough. 
 * Each button has to also move over to the right if there is new space.
 *
 * Currently using: 930px, 700px, 400px, 300px.
 * (Hardcoding since css vars unusable in media queries as of Jul 2019.)
 */

.aops-transporter-settings {
	z-index: 51;
}

.aops-transporter-settings * {
	pointer-events: all;
}

.aops-transporter-settings .settings-icon {
	right: 8px;
	z-index: 53;
}

.aops-transporter-settings .settings-icon span {
	-webkit-transform-origin: 50.15% 47.8%;
	        transform-origin: 50.15% 47.8%;
}

@media (max-width: 930px) {
	.aops-transporter-settings .settings-icon {
		display: none !important;
	}
}

.aops-transporter-settings .settings-menu {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: stretch;
	        align-items: stretch;
	padding: 0px 32px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
	background: white;
	z-index: 52;
	box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.5);
	border-top: 1px solid #cccccc;
}

.aops-transporter-settings .message-speed {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	        align-items: center;
}

.aops-transporter-settings .message-speed * {
	margin: 5px;
}

.aops-transporter-settings .message-speed .label {
	white-space: nowrap;
}

.aops-transporter-settings .slider {
	width: 100%;
	background: #cccccc;
	outline: none;
}

/***************
 * ERROR STUFF *
 ***************/
.aops-transporter-errors {
	z-index: 41;
	background-color: transparent;
	transition: background-color 0.2s;
}

.aops-transporter-errors.dimmed {
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: all;
}

.aops-transporter-errors * {
	pointer-events: all;
}

.aops-transporter-errors .error-icon {
	right: 38px;
	right: 38px;
	z-index: 43;
}

@media (max-width: 930px) {
	.aops-transporter-errors .error-icon {
		right: 8px;
	}
}
@media (max-width: 400px) {
	.aops-transporter-errors .error-icon {
		display: none !important;
	}
}

.aops-transporter-errors .error-menu {
	position: absolute;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 80%;
	height: 80%;
	max-width: 600px;
	max-height: 400px;
	min-width: 240px;
	min-height: 200px;
	background: white;
	z-index: 42;
}

.aops-transporter-errors .error-menu .close {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 1.3em;
	color: white;
}

.aops-transporter-errors .error-menu .close:hover {
	cursor: pointer;
}

.aops-transporter-errors .error-title {
	background: #25355f;
	color: white;
	padding: 8px;
	font-weight: bold;
	font-size: 1.3em;
}

.aops-transporter-errors .error-form {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-webkit-flex: 1;
	        flex: 1;
	padding: 8px;
}

.aops-transporter-errors .error-form p:first-of-type {
	margin-top: 0;
}

.aops-transporter-errors .error-form textarea {
	width: 100%;
	-webkit-flex: 1;
	        flex: 1;
	resize: none;
	border: 1px solid gray;
}

.aops-transporter-errors .error-form-buttons {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	margin-top: 8px;
}

.aops-transporter-errors .error-form-buttons button {
	text-transform: uppercase;
	min-width: 100px;
	min-height: 30px;
}

/**************
 * CMTY STUFF *
 **************/

.aops-transporter-cmty {
	z-index: 31;
}

.aops-transporter-cmty * {
	pointer-events: all;
}

.aops-transporter-cmty .discuss-new-icon {
	right: 104px;
	z-index: 33;
}
@media (max-width: 930px) {
	.aops-transporter-cmty .discuss-new-icon {
		right: 72px;
	}
}
@media (max-width: 700px) {
	.aops-transporter-cmty .discuss-new-icon {
		right: 38px;
	}
}
@media (max-width: 400px) {
	.aops-transporter-cmty .discuss-new-icon {
		right: 8px;
	}
}
@media (max-width: 300px) {
	.aops-transporter-cmty .discuss-new-icon {
		display: none !important;
	}
}

.aops-transporter-cmty .discussions-icon {
	right: 72px;
	z-index: 33;
}
@media (max-width: 930px) {
	.aops-transporter-cmty .discussions-icon {
		right: 38px;
	}
}
@media (max-width: 700px) {
	.aops-transporter-cmty .discussions-icon {
		display: none !important;
	}
}

/**************
 * TIPS STUFF *
 **************/
.aops-transporter-tips {
	z-index: 51;
	background-color: transparent;
	transition: background-color 0.2s;
}

.aops-transporter-tips.dimmed {
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: all;
}

.aops-transporter-tips * {
	pointer-events: all;
}

.aops-transporter-tips .tip-menu {
	position: absolute;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 80%;
	height: 80%;
	max-width: 600px;
	max-height: 400px;
	min-width: 240px;
	min-height: 200px;
	background: white;
	z-index: 52;
}

.aops-transporter-tips .tip-menu .close {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 1.3em;
	color: white;
}

.aops-transporter-tips .tip-menu .close:hover {
	cursor: pointer;
}

.aops-transporter-tips .tip-title {
	background: #25355f;
	color: white;
	padding: 8px;
	font-weight: bold;
	font-size: 1.3em;
}

.aops-transporter-tips .tip-main {
	display: -webkit-flex;
	display: flex;
	overflow: hidden;
	height: 100%;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.aops-transporter-tips .tip-content {
	overflow-y: scroll;
	-webkit-flex: 1;
	        flex: 1;
	padding: 8px;
}

.aops-transporter-tips .tip-content p:first-child {
	margin-top: 0;
}

.aops-transporter-tips .tip-content p:last-child {
	margin-bottom: 0;
}

.aops-transporter-tips .tip-nav {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	-webkit-align-items: center;
	        align-items: center;
	padding: 8px;
	color: rgba(255, 255, 255, 1);
	background: rgba(44, 52, 97);
}

.aops-transporter-tips .tip-nav .tip-nav-item {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.aops-transporter-tips .tip-nav .tip-nav-item:hover {
	cursor: pointer;
}

.aops-transporter-tips .tip-nav .tip-left {
	margin-right: auto;
}

.aops-transporter-tips .tip-nav .tip-left span {
	margin-right: 8px;
}

.aops-transporter-tips .tip-nav .tip-right {
	margin-left: auto;
}

.aops-transporter-tips .tip-nav .tip-right span {
	margin-left: 8px;
}

/**************
 * MISC STUFF *
 **************/

/* This hides the auto-fill contact icon on Safari. */
.aops-transporter-main input::-webkit-contacts-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.transporter-tablet-view {
	width: 100%;
	height: 100%;
}

.transporter-tablet-view .transporter-tablet-container {
	position: relative;
	width: 760px;
	height: 520px;
	margin: auto;
	border-color: rgb(51, 51, 51);
	border-radius: 20px;
	border-top: 20px;
	border-bottom: 20px;
	border-left: 60px;
	border-right: 60px;
	border-style: solid;
}

.transporter-tablet-view .transporter-tablet-container::after {
	position: absolute;
	content: "";
	top: calc(50% - 16px);
	left: -46px;
	width: 32px;
	height: 32px;
	border: 2px solid rgb(100, 100, 100);
	background: rgb(66, 66, 66);
	border-radius: 32px;
}

.transporter-tablet-view
	.transporter-tablet-container
	.aops-transporter-wrapper {
	border: none;
}

.aops-transporter-wrapper .transporter-play-button {
	pointer-events: all;
	color: rgb(27, 54, 93);
}

.aops-transporter-wrapper .transporter-play-button:hover {
	color: rgb(50, 78, 119);
	transition: color 0.2s;
	cursor: pointer;
}

.aops-transporter-wrapper .transporter-play-button .play-button {
	display: -webkit-flex;
	display: flex;
	position: absolute;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	font-family: AoPS;
	font-size: 200px;
	width: 170px;
	height: 170px;
	margin: auto;
	padding-top: 22px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: color 0.2s;
}

.aops-transporter-wrapper .transporter-play-button .play-button.ie-error {
	-webkit-flex-direction: column;
	        flex-direction: column;
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	color: black;
}

/**
 * Variable List
 */
.variable-toggle-link {
	color: #ffffff;
	font-size: 14pt;
}
.variable-toggle-link span {
	font-size: 18pt;
}
#variableListWrapper {
	width: 400px;
	background-color: rgba(0, 0, 0, 0.8);
	padding: 0px 16px;
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	position: fixed;
	top: 64px;
}
#variableListContent {
	display: block;
}
#variableListWrapper dl {
	display: grid;
	grid-template-columns: auto 1fr;
	-webkit-column-gap: 10px;
	   -moz-column-gap: 10px;
	        column-gap: 10px;
	width: 400px;
}

#variableListWrapper dt {
	margin-right: 10px;
	padding: 2px 6px;
}
#variableListWrapper dd {
	margin: 0;
	cursor: pointer;
	padding: 2px 6px;
}
#variableListWrapper dd:hover {
	background-color: #666666;
}