body {
   overflow: hidden;
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
}

.header {
   padding: 10px;
   background-color: #84b2e5;
}

.header > h1 {
   display: inline-block;
   margin: 0;
   font-family: cursive,monospace;
   margin-left: 5px;
}

.logo {
   width: 32px;
   height: 32px;
   vertical-align: middle;
   margin-top: -16px;
}

.toolbar {
   display: none;
   padding-left: 10px;
   opacity: 0.5;
}
.lcard { padding: 10px; }
.llink {
   text-decoration: none;
   color: black;
   display: inline-block;
}
.text-center { width: 100%; text-align: center; }
.llink > img {
   width: 48px;
   height: 48px;
}
.llink:hover { opacity: 0.8; }
.llink.float-right { float: right; }
.llink.float-right:after { clear: right; }
.litem {}
.litem > img.icon {
   width: 24px; height: 24px;
   margin-right: 5px;
   margin-top: -5px;
   vertical-align: middle;
   filter: brightness(0);
}
.litem > span > a { text-decoration: none; }
.litem-icon:after {
   display: inline-block;
   content: '';
   background-position: 0 0px;
   background-repeat: no-repeat;
   background-size: 24px, 24px;
   width: 24px; height: 24px;
   filter: brightness(0);
   vertical-align: middle;
   margin-right: 5px;
}
.litem-icon-sm:after {
   display: inline-block;
   content: '';
   background-position: 0 0px;
   background-repeat: no-repeat;
   background-size: 14px, 14px;
   width: 14px; height: 14px;
   filter: brightness(0);
   vertical-align: middle;
   margin-right: 5px;
}
.icon-shirt:after {
   background-image: url('../images/fontawesome-free-shirt.svg');
}
.icon-burger:after {
   background-image: url('../images/fontawesome-free-burger.svg');
}
.icon-house:after {
   background-image: url('../images/fontawesome-free-house.svg');
}
.icon-car:after {
   background-image: url('../images/fontawesome-free-car.svg');
}
.icon-user:after {
   background-image: url('../images/fontawesome-free-user.svg');
}
.icon-external-link:after {
   background-image: url('../images/fontawesome-free-up-right-from-square.svg');
}

.litemcard {
   padding: 20px;
   cursor: pointer;
   user-select: none;
}
.litemcard > img {
   float: left;
   width: 24px;
   margin-right: 5px;
}

.search {
   display: inline-block;
   width: 100%;
   text-align: center;
   text-decoration: none;
   color: black;
}
.share {
   display: inline-block;
   margin: 3px;
}
.share-btn {
   width: 12px;
   height: 12px;
}

.body { padding: 2px 0 2px 10px; }
.code {
   background-color: #eee;
   padding: 0 5px;
}

.footer {
   padding: 10px;
   background-color: #c9c7ff;
   user-select: none;
}

.footer > a {
   color: #444;
   text-decoration: none;
}
.footer > a:hover { opacity: 0.8; }

.app-mask {
   pointer-events: none;
   background-color: white;
   opacity: 0.3;
   z-index: 9990;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
}

.disable { pointer-events: none; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-cell { flex: 1 0 auto; }
.flex-scrollable { height: 0px; }

.draggable-mask {
   position: fixed;
   width: 100vw;
   height: 100vh;
   top: 0px;
   left: 0px;
   z-index: 9990;
}
.draggable { position: fixed; }

.center {
   display: flex;
   justify-content: center;
   align-items: center;
}

.fit-fixed { overflow: hidden; }
.fit-scrollable-y { overflow-y: auto; }
.fit-scrollable-x { overflow-x: auto; }
.fit-min-content { height: 0px; }
.fit-window {
   width: 100vw;
   height: 100vh;
}
.fit-container {
   width: 100%;
   height: 100%;
}

.search-box {
   display: flex;
   justify-content: center;
}
.search-box > div {
   min-width: 300px;
   max-width: 500px;
   display: flex;
   flex: 1 0 auto;
}
.search-input {
   flex: 1 0 auto;
   padding: 10px;
   border-radius: 0 10px 10px 0;
   border: 1px solid black;
   border-left: 0;
}
.search-btn {
   border-radius: 10px 0 0 10px;
   background-color: #a6d5ff;
   border: 1px solid black;
}
.search-btn:hover {
   opacity: 0.8;
}
.search-btn:active {
   opacity: 0.5;
}
.search-icon {
   width: 12px;
   height: 12px;
}