html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

input,
textarea,
select,
button {
    font: inherit;
}

input[type="checkbox"] {
    width: 1em;
    height: 1em;
    margin: 0;
    vertical-align: -0.15em;
}

fieldset {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

body {
    display: flex;
    flex-direction: column;
}
body > header {
    flex: 0 0 auto;
    background: #f9f9f9;
    border-bottom: #ccc 1px solid;
    padding: 1em;
    transition: all 0.2s ease;
}
body.main-is-scrolled > header {
    box-shadow: #0009 0 1px 5px 0;
}
body > main {
    flex: 1 1 auto;
    overflow: auto;
}
body > main > section {
    margin: 1em;
}
body > footer {
    flex: 0 0 auto;
    align-items: baseline;
    background: #f9f9f9;
    border-top: #ccc 1px solid;
    padding: 1em;
}

header {
    display: flex;
}

footer {
    display: flex;
}
footer > * + * {
    margin-left: 1em;
}

#elStatus {
    flex: 0 1 1.5em;
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 1px inset;
    margin-right: 1em;
    background-color: grey;
    cursor: pointer;
}
body[data-socket-connected="true"] #elStatus {
    background-color: yellow;
}
body[data-socket-connected="true"][data-is-worker-running="true"] #elStatus {
    background-color: green;
}
body[data-socket-connected="false"] #elStatus {
    background-color: red;
}

#elSearchForm {
    flex: 1 1 100%;
    vertical-align: middle;
}

#elSearchText {
    width: 100%;
    box-sizing: border-box;
}

/*******************/

.nav-toggle + nav {
    transition: visibility 0s linear 0.4s, opacity 0.4s ease;
    visibility: hidden;
    opacity: 0;
}

.nav-toggle:focus + nav {
    transition: visibility 0s linear, opacity 0s ease;
    visibility: visible;
    opacity: 1;
}

nav#elMenu {
    position: absolute;
    z-index: 2;
    margin-top: -1px;
    box-shadow: #0006 0 1px 3px;
    border: #ffd 1px solid;
}

nav#elMenu > * {
    background: #fff;
    white-space: nowrap;
    padding: 0.3em 1em;
    cursor: pointer;
}
nav#elMenu > *:hover {
    background: #ffd;
}

/*******************/

#elSelectItemsLabel {
    cursor: pointer;
    user-select: none;
}

/*******************/

#elComments > .comment + .comment:before {
    content: '';
    display: block;
    margin-top: 1em;
    padding-top: 1em;
    border-top: #ccc 1px solid;
}
.comment .comment-btime {
    color: #888;
}
.comment .comment-text {
    margin-top: 0.5em;
    white-space: pre-wrap;
}

#elCommentText {
    padding: 0.5em;
    background: #eee;
    border-radius: 0.5em;
    margin: 1em 0;
}

/*******************/

.item {
    display: flex;
    padding: 0;
}
.item > * {
    padding: 1em;
}
.item > :first-child {
    padding-right: 0.5em;
}
.item > * + * {
    padding-left: 0.5em;
}

#elSearchResults > section {
    padding: 1em;
}

#elSearchResults > .item {
}
#elSearchResults > .item + .item {
    border-top: #ccc 1px solid;
}
#elSearchResults > .item:hover {
    background-color: #fcfcfc;
}

.item .item-handle {
    cursor: pointer;
}
.item .item-handle:hover {
    background: #eee;
}

.item .item-info {
    flex: 1 0;
}

.item .item-comment {
    float: right;
    display: block;
    max-width: 40%;
    line-height: 1.15em;
    max-height: 1.15em;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1em;
    color: #666;
    cursor: pointer;
}

/*
.item .item-comment {
	float: right;
	display: -webkit-box;
	max-width: 40%;
	line-height: 1.15em;
	max-height: 1.15em;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	margin-right: 1em;
	color: #666;
	cursor: pointer;
}
*/
.item .item-comment:before {
    content: attr(data-comment-count);
    background: #666;
    font-size: 0.7em;
    vertical-align: middle;
    color: #fff;
    text-shadow: #000 0 1px;
    padding: 0 0.5em;
    margin-right: 0.5em;
    border-radius: 1em;
    float: left;
}
.item .item-comment[data-comment-count=""]:before {
    content: '0';
}
/*.item .item-comment:after {
	content: '\1F4AC';
	float: left;
}*/
.item .item-status {
    content: '';
    display: inline-block;
    float: right;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0.5;
}
.item[data-item-status="published"] .item-status {
    background-color: green;
}
.item[data-item-status="revoked"] .item-status {
    background-color: orange;
}

.item .item-dellaUrl {
    float: left;
    display: block;
    margin-right: 1em;
}
.item .item-dellaUrl:after {
    content: 'Della';
}

.item .item-lardiUrl {
    float: left;
    display: block;
    margin-right: 1em;
}
.item .item-lardiUrl[href="#"] {
    pointer-events: none;
    color: #ccc;
}
.item .item-lardiUrl:after {
    content: 'Lardi';
}

.item .item-dates {}

.item .item-dates:before {
    content: '';
    display: inline-block;
    vertical-align: -0.1em;
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23a1a9c3"><path class="cls-1" d="M148,288H108a12,12,0,0,1-12-12V236a12,12,0,0,1,12-12h40a12,12,0,0,1,12,12v40A12,12,0,0,1,148,288Zm108-12V236a12,12,0,0,0-12-12H204a12,12,0,0,0-12,12v40a12,12,0,0,0,12,12h40A12,12,0,0,0,256,276Zm96,0V236a12,12,0,0,0-12-12H300a12,12,0,0,0-12,12v40a12,12,0,0,0,12,12h40A12,12,0,0,0,352,276Zm-96,96V332a12,12,0,0,0-12-12H204a12,12,0,0,0-12,12v40a12,12,0,0,0,12,12h40A12,12,0,0,0,256,372Zm-96,0V332a12,12,0,0,0-12-12H108a12,12,0,0,0-12,12v40a12,12,0,0,0,12,12h40A12,12,0,0,0,160,372Zm192,0V332a12,12,0,0,0-12-12H300a12,12,0,0,0-12,12v40a12,12,0,0,0,12,12h40A12,12,0,0,0,352,372Zm96-260V464a48,48,0,0,1-48,48H48A48,48,0,0,1,0,464H0V112A48,48,0,0,1,48,64H96V12A12,12,0,0,1,108,0h40a12,12,0,0,1,12,12V64H288V12A12,12,0,0,1,300,0h40a12,12,0,0,1,12,12V64h48A48,48,0,0,1,448,112ZM400,458V160H48V458a6,6,0,0,0,6,6H394A6,6,0,0,0,400,458Z"/></svg>') center center no-repeat;
    background-size: contain;
    margin-right: 0.5em;
}

.item .item-routes {
    margin: 0.5em 0;
}
.item .item-routes > .item-route {

}

.item-route > .item-route-place {
    display: inline-block;
}

.item-route > .item-route-place > .item-route-place-country {
    display: none;
}
.item-route > .item-route-place > .item-route-place-region {
    display: block;
    color: #999;
    font-size: 0.8em;
}
.item-route > .item-route-place > .item-route-place-city {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

.item .item-extra {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.item .item-extra > * {
    display: table-cell;
    padding-right: 1em;
}
.item .item-extra > :last-child {
    padding-right: 0;
}
.item .item-extra > :empty {
    opacity: 0.5;
}

.item .item-truck:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 386.38" fill="%23a1a9c3"><path class="cls-1" d="M310.76,320.91a69,69,0,1,0,69-69A69.12,69.12,0,0,0,310.76,320.91Z" transform="translate(0 -3.58)"/><path class="cls-1" d="M63.32,320.91a69,69,0,1,0,69-69A69.12,69.12,0,0,0,63.32,320.91Z" transform="translate(0 -3.58)"/><path class="cls-1" d="M449.51,79.39H394.8V225.91a96.23,96.23,0,0,1,80,110h2A35.24,35.24,0,0,0,512,300.72V141.88A62.54,62.54,0,0,0,449.51,79.4Z" transform="translate(0 -3.58)"/><path class="cls-1" d="M0,43.45V296a39.92,39.92,0,0,0,37.35,39.79,96.18,96.18,0,1,1,190,.09H284.8a96.22,96.22,0,0,1,80-110V43.46A39.92,39.92,0,0,0,324.93,3.58h-285A39.92,39.92,0,0,0,0,43.45Z" transform="translate(0 -3.58)"/></svg>') center center no-repeat;
    background-size: contain;
    margin-right: 0.5em;
}

.item .item-weights:before {
    content: '';
    display: inline-block;
    vertical-align: -0.1em;
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.6 512" fill="%23a1a9c3"><path class="cls-1" d="M355.92,152.7A101.61,101.61,0,0,0,367,106.4v-4A102.47,102.47,0,0,0,264.62,0h-85.5A102.47,102.47,0,0,0,76.72,102.4v4a101,101,0,0,0,11.2,46.5,220.29,220.29,0,0,0-21.5,330.9,96,96,0,0,0,68.4,28.2H309a95.8,95.8,0,0,0,68.2-28,220.51,220.51,0,0,0-21.3-331.3Zm-202.5-50.3a25.69,25.69,0,0,1,25.7-25.7h85.5a25.69,25.69,0,0,1,25.7,25.7v4a25.69,25.69,0,0,1-25.7,25.7h-85.5a25.69,25.69,0,0,1-25.7-25.7Z" transform="translate(-1.62)"/></svg>') center center no-repeat;
    background-size: contain;
    margin-right: 0.5em;
}

.item .item-volumes:before {
    content: '';
    display: inline-block;
    vertical-align: -0.15em;
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.53 32.53" fill="%23a1a9c3"><path class="cls-1" d="M18.72,13.81a2.15,2.15,0,0,1,0-3.06l6.17-6.17-3.13-.25a2.18,2.18,0,0,1-2-2.34,2.17,2.17,0,0,1,2.34-2l7.8.63a2.18,2.18,0,0,1,2,2l.63,7.79a2.16,2.16,0,1,1-4.31.35L28,7.65l-6.17,6.16A2.15,2.15,0,0,1,18.72,13.81Zm-8,4.91L4.58,24.89l-.26-3.13A2.16,2.16,0,1,0,0,22.11l.63,7.8a2.18,2.18,0,0,0,2,2l7.79.63a2.17,2.17,0,0,0,2.34-2,2.2,2.2,0,0,0-.63-1.71,2.13,2.13,0,0,0-1.36-.62L7.64,28l6.17-6.17a2.16,2.16,0,1,0-3.06-3.06Zm19.79,1.05a2.18,2.18,0,0,0-2.34,2L28,24.89l-6.17-6.17a2.16,2.16,0,0,0-3.06,3.06L24.89,28l-3.14.25a2.17,2.17,0,1,0,.36,4.32l7.79-.64a2.16,2.16,0,0,0,2-2l.63-7.8A2.17,2.17,0,0,0,30.54,19.77ZM7.64,4.58l3.13-.25A2.17,2.17,0,1,0,10.42,0L2.62.64a2.18,2.18,0,0,0-2,2L0,10.42a2.17,2.17,0,0,0,2,2.34,2.2,2.2,0,0,0,1.71-.63,2.13,2.13,0,0,0,.62-1.36l.26-3.13,6.17,6.17a2.16,2.16,0,1,0,3.06-3.06Z" transform="translate(0 0)"/></svg>') center center no-repeat;
    background-size: contain;
    margin-right: 0.5em;
}

.item .item-payment:empty:after {
    content: '?';
}

.item .item-error {
    margin-top: 0.5em;
    color: #900;
}
.item .item-error:empty {
    display: none;
}

/*******************/

.modal {
    display: none;
    position: relative;
}
.modal-stack {
    display: none;
    position: fixed;
    background: rgba(0,0,0, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    padding: 1em;
    box-sizing: border-box;
    text-align: center;
}
.modal-stack:after {
    content: 'Close (Esc)';
    font-family: 'Monaco','Menlo','Ubuntu Mono','Consolas','source-code-pro',monospace;
    display: block;
    padding-top: 1em;
    color: #fff;
}
body.modal-stack-show .modal-stack {
    display: block;
}
body.modal-stack-show {
    overflow: hidden !important;
}
body.modal-stack-show .modal-stack {
    overflow: auto !important;
}
.modal-stack > * {
    display: none;
    background: #fff;
    margin: 0 auto;
    padding: 1em;
    border-radius: 1px;
    text-align: left;
    box-shadow: rgba(0,0,0, 0.25) 0 1px 1px 1px;
}
.modal-stack > :last-child {
    display: inline-block;
}
.modal-stack > .modal-full:last-child {
    display: block;
}

.modal > h2:first-child {
    margin-top: 0;
}

/*******************/

.text-center {
    text-align: center;
}
.hide {
    display: none;
}