html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#result {
    padding: 20px;
}
.sandbox {
    border: 1px solid #545454;
    width: 100%;
    margin-top: 5px;
    min-height: 400px;
}
.hide {
    display: none !important;
}

#tm-console {
    @color-00: #c9c9c9;
    @color-01: #5b8a6b;
    @color-02: #6679a6;
    @color-03: #f2f2f2;
    @color-04: #252525;
    @color-05: #dbcfde;
    @color-06: #ebaaaa;
    @color-07: #a72d2d;
    @color-08: #fffccd;
    @color-09: #d1a932;
    @color-10: #656565;
    @color-11: #ffe0a1;
    @color-12: #b38624;
    
    
    background-color: @color-10;
    bottom: 0;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    
    > div.body {
        padding: 10px;
    }
    
    .main {
        // max-height: 750px;
        max-height: 400px;
        // max-height: 0px;
        overflow: auto;
    }
    
    .tm.button {
        background-color: @color-10;
        border: none;
        color: #f0f0f0;
        padding: 10px 20px;
        position: absolute;
        right: 97px;
        top: -33px;
        z-index: 1000;
        
        &.collapse {
            right: 20px;
        }
    }
    
    &.closed {
        height: 0;
        
        > div.body {
            display: none;
        }
    }
    
    #tm-logger {        
        box-sizing: border-box;
        bottom: 0;
        font-size: 12px;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        overflow: auto;
        width: 100%;
        
        #tm-logger-area {
            height: 100%;
            overflow: auto;
            > .log.area {
                margin: 0 !important;
            }
        }
        
        .noselect {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
            supported by Chrome and Opera */
        }
        
        li {
            .noselect;
            @padding: 8px;
            @border: 1px dotted  @color-00;
            border-left: @border;
            border-right: none;
            border-top: @border;
            border-bottom: none;
            color: @color-04;
            list-style: none;
            cursor: pointer;
            
            > div {
                > b {
                    display: none;
                }
            }
            
            &.start {
                @color: @color-00;
                background-color: @color;
                border-top: 1px dotted darken(@color, 20%);
                
                > ul > li.done {
                    background-color: lighten(@color, 10%);
                }
                
                .shared {
                    border-left: @border;
                    border-right: none;
                    border-top: none;
                    color: @color-03;
                }
                
                &.async-call {
                    .shared;
                    @color: @color-01;
                    background-color: @color;
                    border-top: 1px dotted darken(@color, 10%);
                    
                    > ul > li.done {
                        background-color: lighten(@color, 45%);
                    }
                }
                &.active-object {
                    .shared;
                    @color: @color-02;
                    background-color: @color;
                    border-top: 1px dotted darken(@color, 10%);
                    
                    > ul > li.done {
                        background-color: lighten(@color, 35%);
                    }
                }
                
                &.group {
                    .shared;
                    @color: @color-05;
                    color: @color-04;
                    background-color: @color;
                    border-top: 1px dotted darken(@color, 10%);
                    
                    > ul > li.done {
                        background-color: lighten(@color, 0%);
                    }
                }
            }
            
            .shared-error {
                @color: @color-06;
                @border: 1px dotted darken(@color, 15%);
                color: @color-07;
                background-color: @color;
                border-top: @border;
                border-left: @border;
                
                > div {
                    > b {
                        display: inline;
                        text-transform: uppercase;
                    }
                }
            }
            &.error, &.async-error {
                .shared-error;
            }
            
            &.async-error {
                border-top: 1px solid darken(@color-07, 20%);
                
                > div {
                    background-color: @color-07;
                    color: @color-03;
                    font-weight: bold;
                    
                    > b {
                        display: none;
                    }
                }
            }
            
            &.warning, &.warn {
                @color: @color-08;
                @border: 1px dotted @color-09;
                color: @color-09;
                background-color: @color;
                border-top: @border;
                border-left: @border;
                
                > div {
                    > b {
                        text-transform: uppercase;
                    }
                }
            }
            
            // &.warn {
            //     @color: @color-08;
            //     @border: 1px dotted @color-09;
            //     color: @color-09;
            //     background-color: @color;
            //     border-top: @border;
            //     border-left: @border;
            // 
            //     > div {
            //         > b {
            //             text-transform: uppercase;
            //         }
            //     }
            // }
            
            &.save-result {
                @color: lighten(@color-01, 15%);
                border-left: 8px solid @color;
                color: @color;
            }
            
            &.normal {
                @color: lighten(@color-10, 15%);
                border-left: 8px solid @color;
                color: @color;
            }
            
            > div {
                padding: 10px;
            }
        }
        
        .detail {
            display: none;
        }
        
        ul.log.area {
            background-color: #fff;
            list-style-position: inside;
            padding-left: 30px;
        }
    }
    
    &.collapsible {
        #tm-logger {
            li {
                &.closed {
                    > ul {
                        display: none !important;
                    }
                }
            }
        }
    }
}