/**
 * phpBB Studio's Dice extension for the phpBB Forum Software package.
 *
 * @copyright (c) 2019 phpBB Studio <https://www.phpbbstudio.com>
 * @license GNU General Public License, version 2 (GPL-2.0)
 */

.row,
.row * {
	box-sizing: border-box;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.col {
	position: relative;
	flex: 0 0 25%;
	width: 100%;
	max-width: 25%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

@media all and (max-width: 1224px) {
	.col {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.card {
	font-size: 0.875rem;
	word-wrap: break-word;
	background: #ffffff;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
	color: #333333;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	margin-top: 30px;
	margin-bottom: 30px;
}

.card-header {
	background: transparent;
	border-bottom: none;
	border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
	color: #ffffff;
	position: relative;
	z-index: 3 !important;
	margin: 0 15px;
	padding: 0;
}

.card-header-icon {
	text-align: right;
}

.card-body {
	position: relative;
	padding: 0.9375rem 20px;
}

.card-footer {
	background-color: transparent;
	border: 0;
	border-top: 1px solid #eeeeee;
	border-radius: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 14px 15px 10px;
	padding: 10px 0 0;
}

.card-footer-closer {
	margin-top: 0;
}

.card-footer .card-action {
	text-align: center;
	flex: 0 100%;
}

.card-icon {
	background: #999999;
	border-radius: 3px;
	float: left;
	margin-top: -20px;
	margin-right: 15px;
	padding: 15px;
}

.card-icon i {
	font-size: 36px;
	line-height: 56px;
	text-align: center;
	width: 56px;
	height: 56px;
}

.card-category {
	font-size: 14px;
	color: #999999;
	margin: 0;
	padding-top: 10px;
}

.card-avatar img {
	width: 26px;
	height: auto;
}

h3.card-title {
	font-size: 1.5625rem;
	font-weight: 300;
	line-height: 1.5em;
	text-decoration: none;
	color: #3c4858;
	margin: 0;
}

h4.card-title {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.4em;
	text-decoration: none;
	color: #ffffff;
	margin: 0;
}

.stats {
	font-size: 12px;
	line-height: 22px;
	color: #999999;
	display: inline-flex;
}

@media all and (max-width: 800px) {
	.stats {
		display: inline-block;
	}
}

.card .stats i {
	font-size: 16px;
	position: relative;
	margin-right: 3px;
	margin-left: 3px;
}

.card small {
	font-size: 80%;
	font-weight: 400;
}

.card label {
	font-size: inherit;
}

.card a {
	color: inherit;
}

.card a.card-primary {
	display: block;
}

.card a.card-secondary {
	color: #999999;
}

.card a:hover,
.card a:hover .stats,
.card label:hover,
.card label:hover .stats {
	text-decoration: none;
	color: #333333;
}

.card .card-header .card-title + .card-category {
	color: hsla(0, 0%, 100%, 0.62);
}

.card .card-header:not(.card-header-icon) {
	border-radius: 3px;
	margin-top: -20px;
	padding: 15px;
}

.dice-orange {
	background: linear-gradient(60deg, #ffa726, #fb8c00);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
}

.dice-green {
	background: linear-gradient(60deg, #66bb6a, #43a047);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
}

.dice-blue {
	background: linear-gradient(60deg, #26c6da, #00acc1);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
}

.dice-red {
	background: linear-gradient(60deg, #ef5350, #e53935);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
}

.dice-purple {
	background: linear-gradient(60deg, #ab47bc, #8e24aa);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}

.dice-button {
	font-size: 0.9rem;
	border: 1px solid transparent;
	border-radius: 3px;
	color: #ffffff;
	padding: 2px 6px 3px;
}

.dice-button i + span {
	margin-left: 5px;
}

a.dice-button-locations {
	color: #ffffff;
	display: inline-block;
	padding: 5px 10px;
}

.dice-button-green {
	background: linear-gradient(60deg, #66bb6a, #43a047);
	border-color: #1b9a1b;
}

.dice-button-red {
	background: linear-gradient(60deg, #ef5350, #e53935);
	border-color: #d31141;
}

.dice-setting {
	font-size: 0.9rem;
}

.dice-input i {
	background: #efefef;
	border: 1px solid #333333;
	border-right-color: #969696;
	border-radius: 3px 0 0 3px;
	padding: 6px;
}

@media all and (max-width: 707px) {
	.dice-input i {
		vertical-align: -1px;
	}
}

.dice-input i:before {
	vertical-align: -1px;
}

.dice-side-add input,
.dice-input input {
	background: #f9f9f9;
	border-radius: 0 3px 3px 0;
	padding: 5px;
}

.dice-side-add input {
	border-radius: 3px 0 0 3px;
}

.dice-side-add button {
	border-radius: 0 3px 3px 0;
	padding: 4px 10px 6px;
}

.dice-side-add button i {
	vertical-align: -1px;
}

.dice-check + label,
.dice-yes + label,
.dice-no + label {
	margin: 0;
	padding: 0;
}

.dice-check + label {
	font-size: 1rem;
	line-height: initial;
	user-select: none;
}

.dice-check + label span,
.dice-yes + label span,
.dice-no + label span {
	border-top: 1px solid #afaeaa;
	border-right: 1px solid #d5d5c8;
	border-bottom: 1px solid #d5d5c8;
	border-left: 1px solid #afaeaa;
	border-radius: 0 3px 3px 0;
	display: inline-block;
	margin: 0;
	padding: 5px 10px;
}

.dice-check,
.dice-yes,
.dice-no {
	display: none;
}

.dice-check + label i,
.dice-yes + label i,
.dice-no + label i {
	vertical-align: 1px;
}

.dice-yes + label i:before,
.dice-no + label i:before {
	content: "\f096";
}

.dice-check:checked + label i,
.dice-check:checked + label span,
.dice-yes:checked + label i,
.dice-yes:checked + label span {
	background: linear-gradient(60deg, #66bb6a, #43a047);
	border-color: #1b9a1b;
	color: #ffffff;
}

.dice-check + label i,
.dice-check + label span,
.dice-no:checked + label i,
.dice-no:checked + label span {
	background: linear-gradient(60deg, #ef5350, #e53935);
	border-color: #d31141;
	color: #ffffff;
}

.dice-check:checked + label i:before,
.dice-yes:checked + label i:before { content: "\f00c"; }

.dice-check + label i:before,
.dice-no:checked + label i:before { content: "\f00d"; }

.dice-check + label span.dice-check-yes { display: none; }
.dice-check + label span.dice-check-no { display: inline-block; }
.dice-check:checked + label span.dice-check-yes { display: inline-block; }
.dice-check:checked + label span.dice-check-no { display: none; }

span.dice-example {
	border-bottom: 1px solid #ff0000;
	position: relative;
	display: inline-block;
	padding: 0 5px;
}

span.dice-example:before,
span.dice-example:after {
	background: #ff0000;
	position: absolute;
	bottom: 0;
	width: 1px;
	height: 50%;
	content: "";
}

span.dice-example:before { left: 0; }
span.dice-example:after { right: 0; }

@media all and (max-height: 480px) {
	.alert_text {
		overflow: auto;
		max-height: 200px;
	}

	.phpbb_alert {
		height: 240px;
	}
}

@media all and (min-height: 480px) {
	.alert_text {
		overflow: auto;
		max-height: 340px;
	}

	.phpbb_alert {
		height: 400px;
	}
}