/* General things */
body {
	font-size: 18px;
	background: url('../../assets/images/background.jpg');
	background-position: cener;
	background-size: cover;
	background-attachment: fixed;
	font-family: Roboto;
}
input:focus {
	background: #EEC;
}

/* Parts, general */
.part {
	width: calc(100vw-60px);
	max-width: 400px;
	margin: 20px auto;
	border: 1px solid #555;
	text-align: center;
	padding: 20px 10px;
	background: #FFFFFFCC;
	display: none;
}
.title {
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
}

/* Inputs, buttons */
#barcode-value, #barcode-go, #newplace-name, #newplace-add, #exit-scanner {
	font-family: Roboto;
	text-align: center;
	border: 1px solid #444;
	background: #FFF;
	font-size: 170%;
	outline: none;
	padding: 5px;
}
#barcode-value, #newplace-name {
	width: 60%;
}
#exit-scanner {
	width: 60px;
	height: 60px;
	position: fixed;
    z-index: 99;
}
/* Part: barcode */
#part-barcode {
	display: block;
}
#barcode-value, #barcode-go, #barcode-scanner, #newplace-name, #newplace-add {
	font-family: Roboto;
	text-align: center;
	border: 1px solid #444;
	background: #FFF;
	font-size: 170%;
	outline: none;
	padding: 5px;
}
input:focus {
	background: #EEC;
}
#barcode-buttons {
	display: flex;
	width: calc(60% + 2*6px);
	gap: 5px;
	margin: 5px auto 0 auto;
}
#barcode-buttons input {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-origin: content-box;
	flex-grow: 1;
}
#barcode-go {
	background-image: url('../../assets/images/search.png');
}
#barcode-scanner {
	background-image: url('../../assets/images/scanner.png');
}
@media (min-device-width: 350px) {
	#barcode-buttons {
		display: inline-block;
		width: auto;
	}
}
#barcode-value, #newplace-name {
	width: 60%;
}

/* Part: placelist */
.part-places {
	display: block;
}
#placelist-title {
	margin-bottom: 20px;
}
#table-placelist {
	width: 90%;
	text-align: left;
	margin: 0 auto;
}
#newplace-name {
	width: calc(100% - 2*5px);
}
#newplace-colors {
	display: flex;
	flex-direction: row;
	gap: 3%;
}
#newplace-colors span {
	flex-grow: 1;
	padding: 5px 0;
	border: 1px solid #888;
	opacity: 35%;
}
#newplace-colors span.color-active {
	opacity: 100%;
}
#newplace-colors {
	padding: 10px 0;
}
#newplace-add {
	font-size: 120%;
}
#table-placelist td  {
	padding-bottom: 15px;
}
#table-placelist tr td:nth-of-type(2) {
	text-align: right;
}
td.placelist-delete {
	text-align: right;
	width: 24px;
}
td.placelist-delete img {
	margin-top: 5px;
	margin-left: 20px;
}
td.placelist-color span {
	padding: 3px 20px;
	border: 1px solid #888;
}

/* Part: newplace */
#newplace-add {
	font-size: 120%;
}

/* Part: error */
#part-error {
	background: #F88C;
}

/* Part: place */
#place-value {
	margin-bottom: 5px;
}
#place-value, #place-value-details, #name-value {
	font-weight: bold;
	display: block;
}
#place-value {
	font-size: 170%;
}

/* Part: group membership */
#groupmembership-value {
	font-size: 130%;
	font-weight: bold;
}

/* Part: details, temp place */
#table-details, #table-tempplace {
	width: 90%;
	text-align: left;
	margin: 0 auto;
}
#table-details td, #table-tempplace td {
	width: 50%;
	vertical-align: top;
}
td.details-value, td.tempplace-value {
	font-weight: bold;
}
#tempplace-value-description {
	font-size: 70%;
	font-weight: normal;
	text-align: justify;
}
#details-value-comment {
	font-size: 80%;
}

/* Part: group */
#table-group {
	font-size: 80%;
	width: 90%;
	text-align: left;
	margin: 0 auto;
}
#table-group tr td:nth-of-type(2) {
	text-align: right;
}

/* Part: scanner */
#scanner {
	display: flex;
	background-color: white;
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
}
video {
	width:100% !important;
}