.roll-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.number-input-container {
	display: flex;
	min-height: 50px;
}

.number-input {
	border: 1px solid darkgrey;
	border-left: 0px;
	border-right: 0px;
	text-align: center;
}

.text-input {
    border: 1px solid darkgrey;
	border-radius: 10px;
}

.dice-select, .button {
    min-width: 50px;
    min-height: 50px;
    border-radius: 10px;
    border: 1px solid darkgray;
    text-align: center;
}

.number-button-left {
	min-width: 50px;
	border-radius: 10px 0 0 10px;
	border: 1px solid darkgrey;
}
.number-button-right {
	min-width: 50px;
	border-radius: 0 10px 10px 0;
	border: 1px solid darkgrey;
}

.mod-span-container, .desc-span-container {
    display: flex;
    align-items: center;
}

.roll {	
	display: flex;
	background-color: grey;
	min-width: 50px;
	min-height: 50px;
	max-width: 50px;
	max-height: 50px;
	color: white;
	border-radius: 3px;
	align-items: center;
	justify-content: center;
	border: 2px solid darkgrey;
}

.roll-container {
	display: flex;	
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
}

.quick-rolls-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history-roll {
	display: flex;
	background-color: gray;
	min-width: 20px;
	min-height: 20px;
	color: white;
	border-radius: 3px;
	align-items: center;
	justify-content: center;
	border: 2px solid black;
}

.number-input {
	-moz-appearance: textfield;
	appearance: textfield;
}