/* For use with [[Template:Mbox]] (and any templates that transclude/inherit it) and [[Module:Mbox]] */
.mbox {
	max-width: 97%;
	width: 80%;
	display: flex;
	position: relative;
	color: var(--theme-page-text-color);
	background-color: var(--theme-page-background-color--secondary);
	border-left: 10px solid #1e90ff;
	border-bottom-right-radius: 15px;
	box-shadow: 2px 2px 5px 0px var(--theme-accent-color);
	margin: 0 auto;
	margin-bottom: 5px;
	min-height: 32px;
}

.mbox.mbox-type-red {
	border-left-color: #ff0000;
}
.mbox.mbox-type-orange {
	border-left-color: #f28500;
}
.mbox.mbox-type-yellow {
	border-left-color: #f4c430;
}
.mbox.mbox-type-green {
	border-left-color: #228b22;
}
.mbox.mbox-type-blue {
	border-left-color: #1e90ff;
}
.mbox.mbox-type-purple {
	border-left-color: #9932cc;
}
.mbox.mbox-type-gray {
	border-left-color: #4d4d4d;
}
.mbox.mbox-type-gold {
	border-left-color: #e4bc53;
}
.mbox.mbox-type-silver {
	border-left-color: #949b9d;
}

.mbox__content {
	display: table;
	box-sizing: border-box;
	width: 100%;
	padding-right: 40px;
}

.mbox__content__image {
	display: table-cell;
	width: 40px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}

.mbox__content__image .floatleft {
	margin: 0 10px 0 0;
}

.mbox__content__wrapper {
	display: table-cell;
	vertical-align: middle;
	padding: 5px;
}

.mbox__content__header {
	font-size: small;
	display: block;
	font-weight: bold;
	padding-bottom: 5px;
}

.mbox__content__text {
	font-size: 16px;
	display: block;
	font-weight: bold;
}

.mbox__content__text__comment {
	font-weight: normal;
	font-size: 16px;
}

.mbox__content__aside {
	display: table-cell;
	width: 100px;
	vertical-align: middle;
	text-align: center;
	padding-left: 15px;
	border-left: 1px solid var(--theme-page-text-color);
}

.mbox__min {
	position: absolute;
	right: 24px;
	top: 0;
	padding: 0 7px 0 0;
	font-weight: bold;
	font-size: 20px;
	color: var(--theme-page-text-color);
	cursor: pointer;
	transition: all .15s ease-in;
}

.mbox__min:hover {
	color: #1e90ff;
}

.mbox__min:focus {
	outline: 0;
}

.mbox__min:after {
	content: '–';
}

.mw-collapsed + .mbox__min:after {
	content: '+';
}

.mbox__close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 7px 0 0;
	font-size: 24px;
	color: var(--theme-page-text-color);
	cursor: pointer;
	transition: all .15s ease-in;
}

.mbox__close:hover {
	color: #e6173c;
}

.mbox__close:focus {
	outline: 0;
}