@charset "UTF-8";
.goldcal {
	background-color: #333;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.goldcal select, .goldcal input, .goldcal .anserbox div {
	border: 2px solid #b59b62;
}
.goldcal select {
	height: 33px;
}
.goldcal input {
	text-align: right;
}
.goldcal p.title {
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 2px;
}
.goldcal .inputbox-rate > div,
.goldcal .inputbox-weight > div {
	display: flex;
	align-items: center;
	gap: 10px;
}
.goldcal .inputbox-rate > div .symbol,
.goldcal .inputbox-weight > div .symbol {
	color: #ffffff;
}
.goldcal .anserbox {
	width: 200px;
}
.goldcal .anserbox div {
	background-color: #ffffff;
	width: 180px;
    height: 29px;
	text-align: right;
	padding-right: 10px;
}

@media only screen and (min-width: 1080px) {
	.goldcal {
		padding: 27px 16px;
		flex-direction: row;
	}
}