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
    );
}
.long-list {
    display: block;
}
.short-list {
    display: none;
}
/* Mobile */
@media (max-width:600px){
.long-list {
    display: none;
}
.short-list {
    display: block;
}
.only-on-landscape {
    display: none;
}
    .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;
}

.tree {
    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;
}

.size-22 { font-size: 22px }