button,
.button,
.touch,
.touchRow{
	font-family: 'Urbanist', sans-serif;
	color: var(--on-primary);
	background-color: var(--primary-color);
	text-transform: none;
	text-decoration: none;
	border: 0px;
	border-radius: 4px;
	font-size: 0.9em;
	font-weight: 600;
	display: inline-block;
	cursor: pointer;
	margin:2px 0px 8px 0px;
	padding: 8px;
	overflow: hidden; /* Hide the overflowing text */
	white-space: nowrap; /* Prevent text from wrapping */
	text-overflow: ellipsis; /* Add ellipsis at the end of the truncated text */

}

.softTouch{
	font-family: 'Urbanist', sans-serif;
	color: var(--on-primary);
	background-color: var(--primary-color);
	text-transform: none;
	text-decoration: none;
	border: 0px;
	border-radius: 2px;
	padding: 2px;
}

.touchRow{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 8px 0;
}

.flexColumn{
	flex-direction: column;
	align-items: flex-start;
}

.flexRow{
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.touchRow.center{
	justify-content: center;
}


.selected span,
.button.selected,
.touchRow.selected,
.touch.selected,
.touchCell.selected{
	background-color: var(--primary-hover)!important;
	color: var(--text-light)!important;
}


button.button:disabled,
.touch:disabled,
.touch:disabled,
.touchRow:disabled{
	background-color: var(--border-color);
	color: var(--text-light);
}

.deleteButton{
	background-color: var(--error)!important;}

.button.tinyButton{
	border-radius: 4px;
	padding: 2px 4px;
	margin: 0px 4px
}

button.minimalButton{
	background-color: transparent;
	color: var(--text-light);
	border: 0px;
	padding: 0px;
	margin: 0px 4px;
}

.buttonGroup{
	display: flex;
	justify-content: left;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 4px 0px 8px 0px;
}

.buttonGroup .button
{
	margin: 0px;
	border-radius: 0px;
	border: 0px;
	display: inline-block;
	border-right: 1px solid var(--on-primary);
	box-shadow: 0px 0px 0px;
	flex-grow: 1;
	color: var(--on-primary);
	background-color: var(--primary-color);
}

.buttonGroup .button:first-child,
.buttonGroupRow .touch:first-child
{
	border-radius: 4px 0px 0px 4px;
}

.buttonGroup .button:last-child,
.buttonGroupRow .touch:last-child{
	border-right: 0px;
	border-radius: 0px 4px 4px 0px;
}

.buttonGroupRow{
	display: flex;
	justify-content: left;
	flex-direction: row;
	margin-bottom: 4px;
	overflow: hidden; /* Hide overflow */
	text-overflow: ellipsis; /* Add ellipsis for overflowed text */
	flex-wrap: nowrap;
	gap: 0px;
}


.buttonGroupRow .touch{
	border-right: 1px solid var(--on-primary);
	text-overflow: ellipsis; /* Add ellipsis for overflowed text */
	border-radius:0px;
	flex-grow: 1;
	margin: 0px;
}

.buttonGroupRow .touch:first-child
{
	border-radius: 4px 0px 0px 4px;
}

.buttonGroupRow .touch:last-child{
	border-right: 0px;
	border-radius: 0px 4px 4px 0px;
}