@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/material-icons.woff2) format('woff2'),
    url(../fonts/material-icons.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
div[class*="box"] {
    background: #fff;
    text-align: left;
    color: #000;
    border: 1px solid #ddd;
    padding: 0px;
    margin: 0px;

    font-size: 12px;
    position: relative;
    z-index: 1;
}

.box.status-2 {
    color: #eee;
}
.box.status-1 {
    color: #cec;
}

.box.status-4 {
    color: #eec;
}

.box.status-3 {
    color: #ecc;
}

.box.status-5 {
    color: #ecc;
}

.box a {
    color: inherit;
}

.box .city {
    position: absolute;
    top: -5px;
    left: 5px;
    font-size: 12px;
}

.box .address {
    position: absolute;
    line-height: 14px;
    top: 8px;
    left: 5px;
    font-size: 12px;
}

.box .devices {
    position: absolute;
    bottom: 0px;
    left: 5px;
    font-size: 8px;
}
.box .customer_name {
    position: absolute;
    top: 0px;
    right: 5px;
    vertical-align: top;
    font-size: 12px;
}

.box .icons {
    position: absolute;
    z-index: 100;
    bottom: 4px;
    right: 5px;
    vertical-align: bottom;
    font-size: 12px;
}

.box i {
    pointer-events: none;
}

.wrapper {
    padding: 0px;
    margin: 0px;
    display: grid;
    position: relative;
    grid-gap: 5px;
    grid-auto-flow: column;
    grid-template-columns: 0px repeat(12, 150px);
}

.wrapper.timeline {
    grid-template-rows: 30px repeat(11, 60px); /* 8..18 + user */
    background:
    repeating-linear-gradient(to bottom,
        transparent 35px,
        transparent 97px,
        #fff 98px,
        #ddd 99px, 
        #fff 100px
    );
}

.short-list {
    display: table-cell;
}
/* Mobile */
@media (max-width:600px){
.short-list {
    display: none; 
}
.only-on-landscape {
    display: none;
}

.list-view-help {
 transition: height 2s;
 height: 0px;
}
.list-view-help.expanded {
        height: 628px;
    }
    .box{
        display: none;
    }
    .box.act{
        display: grid;
        width: 100%;
    }
    .wrapper {
        grid-template-columns: 0px repeat(1, 100%);
    }
    .wrapper.timeline {
        grid-template-rows: 0px repeat(11, 60px); /* 8..18 + user */
        background:
        repeating-linear-gradient(to bottom,
            transparent 4px,
            transparent 66px,
            #fff 67px,
            #ddd 68px, 
            #fff 69px
        );
    }
}
/* Desktop */
@media (min-width:600px){
    .box{
        display: grid;
    }
    .box .devices {
        display: none;
    }
    .box .customer_name {
        display: none;
    }
    .box .icons {
        display: none;
    }
.only-on-landscape {
    display: block;
}
    
}

.hr {
    position: relative;
    top: -10px;
    left: -14px;
    font-size: 10px;
}

.treeview-item-label {
    font-size: 12px;
}

.treeview {
    height: 200px;
    overflow: scroll;
    margin-top: 0px;
    margin-bottom: 0px;
}
.info {
    height: 150px;
    overflow: scroll;
    margin-top: 0px;
    margin-bottom: 0px;
}
.list {
    
    margin-top: 0px;
    margin-bottom: 0px;
}
.apples-count{
    padding-left: 10px;
    margin-right: 10px;
}

.treeview-item {
    user-select: none;
}

#demo-calendar-modal {
    font-size: 18px;
}

.my-text-editor {
    height: 90%;
}

.usernames {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 200;
    background-color: white;
}

#calendar_user_selector {
    font-size: 16px;
    color: black;
    vertical-align: center;
    position: relative;
    top: -3px;
}
.message-format-0 div {
    font-weight: normal;
}
.message-format-1 div {
    font-weight: bold !important;
}
.treeview-item-content {
    margin-left: 0px;
}
:root{
     --f7-treeview-item-padding-left: 2px;
     --f7-treeview-children-offset: 2px;
     --f7-table-body-font-size: 12px;
     --f7-table-cell-padding-horizontal: 2px; 
} 
.md {
     --f7-treeview-item-height: 24px;
}
 .treeview-item-content {
 width: 100%;
 
}
.treeview-item-label {
 width: 100%;
 
}
.size-22 { font-size: 22px }