/* tables */

.data {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
	position: relative;

	border: 1px solid gray;
	width: 100%;
	box-shadow: 0 0 0.5em #888;
	border-radius: 0.75em;
}
.data tbody {
	display: table;
	width: 100%;
}
.data td {
	border: 1px solid #000;
	text-align: center;
	padding: 2px 1px;
	/* height: 20px; */
	width: auto;
}

.data img {
	width: 80px;
	border: 1px solid #00f;
	border-radius: 3px;
	margin-top: 2px;
	cursor: pointer;
}
.data .pictures img { height: 65px; }
.data .drawings img { height: 62px; }
.data .charts img { height: 65px; }

.data div {
	width: 82px;
	margin: auto;
}
.data .pictures div { height: 71px; }
.data .drawings div { height: 68px; }
.data .charts div { height: 71px; }

.fff td { background-color: #fff; }
.fcf td { background-color: #fcf; }
.ffc td { background-color: #ffc; }
.cff td { background-color: #cff; }
.cfc td { background-color: #cfc; }
.ccf td { background-color: #ccf; }

td.fff { background-color: #fff; }
td.fcf { background-color: #fcf; }
td.ffc { background-color: #ffc; }
td.cff { background-color: #cff; }
td.cfc { background-color: #cfc; }
td.ccf { background-color: #ccf; }

/* alternate colors */

.fcf tr:nth-child(even) td { background-color: #dad; }
.ffc tr:nth-child(even) td { background-color: #dda; }
.cff tr:nth-child(even) td { background-color: #add; }
.cfc tr:nth-child(even) td { background-color: #ada; }
.ccf tr:nth-child(even) td { background-color: #aad; }

.data tr:nth-child(even) td.fcf { background-color: #dad; }
.data tr:nth-child(even) td.ffc { background-color: #dda; }
.data tr:nth-child(even) td.cff { background-color: #add; }
.data tr:nth-child(even) td.cfc { background-color: #ada; }
.data tr:nth-child(even) td.ccf { background-color: #aad; }

.data tr.fcf:nth-child(even) td { background-color: #dad; }
.data tr.ffc:nth-child(even) td { background-color: #dda; }
.data tr.cff:nth-child(even) td { background-color: #add; }
.data tr.cfc:nth-child(even) td { background-color: #ada; }
.data tr.ccf:nth-child(even) td { background-color: #aad; }

.data tr:nth-child(even) td:first-child { background-color: #ddd; }

.data td.left {
	text-align: left;
	width: 134px;
}
.data td s { color: #f00; } /* discounts */



.flash, .flash>sup {
    -webkit-animation-name: flash-animation;
    -moz-animation-name: flash-animation;
    -o-animation-name: flash-animation;
    animation-name: flash-animation;

    -webkit-animation-duration: 0.67s;
    -moz-animation-duration: 0.67s;
    -o-animation-duration: 0.67s;
    animation-duration: 0.67s;
}
@-webkit-keyframes flash-animation {
	from { text-shadow: 0 0 1px #000; color: #fff; }
	to { text-shadow: none; color: #000; }
}
@-moz-keyframes flash-animation {
	from { text-shadow: 0 0 1px #000; color: #fff; }
	to { text-shadow: none; color: #000; }
}
@-o-keyframes flash-animation {
	from { text-shadow: 0 0 1px #000; color: #fff; }
	to { text-shadow: none; color: #000; }
}
@keyframes flash-animation {
	from { text-shadow: 0 0 1px #000; color: #fff; }
	to { text-shadow: none; color: #000; }
}



.flash-border img {
		-webkit-animation-name: flash-border-animation;
    -moz-animation-name: flash-border-animation;
    -o-animation-name: flash-border-animation;
    animation-name: flash-border-animation;

    -webkit-animation-duration: 0.67s;
    -moz-animation-duration: 0.67s;
    -o-animation-duration: 0.67s;
    animation-duration: 0.67s;
}
@-webkit-keyframes flash-border-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: 1px solid #00f; box-shadow: none; }
}
@-moz-keyframes flash-border-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: 1px solid #00f; box-shadow: none; }
}
@-o-keyframes flash-border-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: 1px solid #00f; box-shadow: none; }
}
@keyframes flash-border-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: 1px solid #00f; box-shadow: none; }
}



.flash-border form input {
	-webkit-animation-name: box-shadow-animation;
    -moz-animation-name: box-shadow-animation;
    -o-animation-name: box-shadow-animation;
    animation-name: box-shadow-animation;

    -webkit-animation-duration: 0.67s;
    -moz-animation-duration: 0.67s;
    -o-animation-duration: 0.67s;
    animation-duration: 0.67s;
}
@-webkit-keyframes box-shadow-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: default; box-shadow: none; }
}
@-moz-keyframes box-shadow-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: default; box-shadow: none; }
}
@-o-keyframes box-shadow-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: default; box-shadow: none; }
}
@keyframes box-shadow-animation {
	from { border: 1px solid #fff; box-shadow: 0 0 2px #000; }
	to { border: default; box-shadow: none; }
}

/* model numbers */
.small {
	font-size: 14px;
	padding: 0px;
	/* transition: all .25s ease-out; */
}

.smaller {
	font-size: 12px;
}

#orderTable td {
	padding: 2px;
}

.encoder {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	padding: 1em;
}
.encoder .img-square {
	cursor: pointer;
	margin: auto;
	margin-bottom: 0.5em;
}
.encoder img {
	user-select: none;
	pointer-events: none;
}
.encoder p.hover-indicator {
	text-align: center;
	color: #888;
}

.buybox {
	display: grid;
	column-gap: 1em;
	row-gap: 0.125em;
	margin-left: auto;
	width: fit-content;
	grid-template-columns: auto;
	align-items: center;
	text-align: right;
}

.buybox form:not(:last-child) {
	margin-bottom: 1em;
}

/* .buybox div {
	display: grid;
} */

.sprocket {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1em;
	padding: 1em;
	align-items: center;
}
.sprocket .img-square {
	min-width: 7em;
}




@media screen and (min-width: 576px) {
	.encoder {
		grid-template-columns: 1fr 1.25fr;
	}
	.sprocket {
		gap: 2em;
		/* grid-template-columns: 1fr; */
	}
}

@media screen and (min-width: 768px) {
	.encoder {
		gap: 3em;
	}
	.buybox {
		grid-template-columns: auto auto;
		row-gap: 1em;
	}
	.buybox form:not(:last-child) {
		margin: 0;
	}
}

@media screen and (min-width: 1024px) {
	.data td {
		padding: 2px;
	}
}