@font-face {
	font-family: 'wash_care_symbols_m54';
	src: url('/media/wash_care_symbols_m54.ttf');
}

.entity-type__washing {
	font-family: "wash_care_symbols_m54", sans-serif;
	font-size: 35pt;
}

.entity-type__washing li {
	display: inline-block;
	margin-right: 8px;
}

.topbar__logo-link {
	background: url('/media/logo_rivertex.png') no-repeat;
	height: 70px;
	width: 500px;
	background-size: 300px;
	margin: 6px
}

.form {
	max-width: 1200px;
}

.menu {
	overflow: auto;
}

.contentblocks {
	margin-top: 90px
}

.contentblock {
	background: #fff;
	margin: 12px 0;
	display: flex;
	min-height: 50px;
	max-width: 1200px;
}

.contentblock > span {
	flex: 5;
	margin: 12px
}

.contentblock > span.button-bar {
	flex: 2;
	margin-top: 20px;
}

.lightgray-font, lightgray-font * {
	color: #e0e0e0
}

.float-right {
	float: right
}

.preview-image {
	max-height: 200px;
}

.page-preview-image {
	max-height: 200px;
	max-width: 400px;
}

.file-upload-button, .button {
	position: relative;
	display: inline-block;
	padding: 4px;
	background: #fff;
	font-size: 13px;
	transition: border .4s;
}

.file-upload-button:hover, .button:hover {
	border-color: #166bac;
}

.file-upload-button input {
	position: absolute;
	top: 0px;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0px;
	display: block;
	cursor: pointer;
}

.form__group .prefix {
	padding-top: 10px
}

.form-radiogroup > div > * {
	margin: 8px;
}

.form_row > label {
	margin-bottom: 0.5em;
}

.form__row > label + div {
	margin-bottom: 1em;
}


.image-gallery {
	width: 860px;
	display: flex;
	flex-wrap: wrap;
}

/* $dot-size: 1px;
$dot-space: 22px;
21px = $dot-space - $dot-size
*/
.image-gallery > div {
	display: inline-block;
	width: 115px;
	margin-right: 8px;
	margin-bottom: 8px;
	padding: 4px 4px 22px;
	position: relative;
	background: linear-gradient(90deg, #ebeff2 21px, transparent 1%) center, linear-gradient(#ebeff2 21px, transparent 1%) center, #a799cc;
	background-size: 22px 22px
}

.image-gallery > div > * {
	display: block;
}

.image-gallery > div > a.ti-trash {
	position: absolute;
	bottom: 4px;
	right: 0;
}

.image-gallery img {
	width: 115px;
	max-height: 100px;
	border: 1px solid transparent;
}

.image-gallery img:hover {
	border-color: #1b5faa;
}

.product-images > div {
	width: 115px;
	max-height: 140px;
	margin-right: 8px;
	margin-bottom: 8px;
	border: 1px solid transparent;
	overflow: hidden;
	display: inline-block;
	vertical-align: top
}

.product-images > div > img {
	display: block;
	max-height: 100px;
	max-width: 100px
}

.product-images .file-upload, .color-row .file-upload {
	height: 100px;
	width: 100px;
	background: #fff;
	border: 1px solid #e0e0e0;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACkSURBVEhL7dQxCsIwFIfxDHUsRbyF0Kn36OqlvIGzULyFOLgInXqMTh5Av79YyPAy+CSDmA9+Q2na16FJ+PtWWKN5XWVqgxmPtwOy1GIZIhdkqQxy95uD9At3CTvEg0ZY60QfVcFMN+J98q09zLTbrQe8jjCrYT3glRykdKzcEibEL7rDWidX9HBV9pG7MsjdFvGgM7KkI0rHygkD3Puk9EEhPAEj8opuJhfL0wAAAABJRU5ErkJggg==');
}

.product-images .file-upload .file-upload-button, .color-row .file-upload .file-upload-button {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
}

.product-images .file-upload .file-upload-button a {
	height: 100px;
	display: block;
}

.product-colors input {
	width: 300px;
}

.product-colors .color-textbox input {
	width: 100px;
}

.product-colors > div > * {
	display: inline-block;
	margin-right: 8px;
}

.table > tbody > tr.color-row > td {
	border-top: 1px solid white;
}

.table tr.current td {
	font-weight: bold;
}

.color-preview {
	display: flex;
	margin: 4px 0;
}

.color-preview span:first-child {
	border: 1px solid #000;
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-right: 8px;
}

.color-row .file-upload {
	width: 32px;
	height: 32px;
	background-size: 20px;
}

.color-row .file-upload .file-upload-button a {
	height: 32px;
	display: block;
}

.form__group > div img.color-image {
	display: block;
	max-height: 66px;
	max-width: 100px
}

.form__group > p {
	flex-basis: 50%;
	margin-left: 15px;
}

.product-brochure {
	margin-bottom: 2em;
}

.product-brochure + .product-brochure {
	margin-left: 1em;
}

.brochure-title {
	vertical-align: top;
	font-weight: bold;
}

.brochure-subtitle {
	margin-left: 8px;
	vertical-align: top
}

.file-upload img {
	display: block
}

.file-upload-button {
	float: left;
	margin: 8px 8px 0 0
}

.form__textbox textarea {
	height: 6em
}

/* .product-entity-table > tbody > tr > td:last-child {width: 100px;} */
.product-table > tbody > tr > td:last-child {
	width: 100px;
}

.draggable {
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	cursor: move;
}

.draggable a {
	cursor: pointer;
}

.dragging {
	transform: scale(.99);
	opacity: .2;
}

.droptarget > * {
	border-bottom: 1px solid #00dd00;
}

.tag-list {
	display: flex;
	margin-bottom: 1em;
}

.tag-list > strong {
	width: 150px;
}

.tag-list > ul {
	margin: 0;
	display: flex;
	gap: 8px;
}

.tag-list > ul > li {
	user-select: all;
}

.panel {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.form-select {
	padding: 4px 2px;
}

.button-bar {
	display: flex;
	align-items: baseline;
}

.cardbox-productdata {
	padding: 20px 20px 0 20px;
}

.cardbox-productdata .zmdi {
	margin-right: 3px;
}

.cardbox-header {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
}

.cardbox-header > h2 {
	margin: 0;
	flex-grow: 1;
}

.cardbox-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 -20px 0 -20px;
	padding: 0 20px;
	min-height: 3rem;
}

.cardbox-row.cardbox-data {
	margin-bottom: 12px;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
}

.specification {
	margin: 0;
	padding: 0;
	width: 100%
}

.specification li {
	display: flex;
}

.specification li span {
	flex: 1;
}

.specification li span + span {
	flex: 5;
}

.cardbox-remark {
	background-color: #d0d0d0;
}

.cardbox-actions {
	background-color: #e0e0e0;
	border-top: 1px solid #1b5faa;
	display: flex;
	gap: 15px;
}

.simple-row {
	display: flex;
	gap: 15px;
	align-items: center;
}

.simple-columns {
	display: flex;
	gap: 15px;
}

.simple-columns .title {
	margin-top: 0;
}

body.env-local .topbar {
	background-color: #e6b65b;
}

body.env-staging .topbar, body.env-test .topbar {
	background-color: #c64242;
}

body.env-local[data-application-version]::after, body.env-staging[data-application-version]::after, body.env-test[data-application-version]::after  {
	content: attr(data-application-version);
	position: fixed;
	top: 24px;
	left: 50%;
	font-size: 14px;
	font-family: monospace;
	z-index: 100;
}