.dmt-trafficrate-wrapper {
    //height: 440px;

    .dmt-network-graph {
        height: 440px;
        padding-right: 200px;
    }

    .dmt-pies-wrapper {
        width: 200px;
        float: right;

        > div {
            width: 200px;
            height: 220px;
            padding: 15px 10px 10px;
            position: relative;

            .dmt-graph-placeholder {
                @include flexbox-align(column, center, center, center);
                border: 2px solid #ecf0f1;
                height: 160px;
                width: 160px;
                border-radius: 50%;
                position: absolute;
                top: 35px;
                left: 20px;
                color: #d3dbe1;
                text-align: center;

                .icon-chart-hint {
                    font-size: 40px;
                    line-height: 40px;
                    height: 40px;
                    display: inline-block;
                }

                .dmt-graph-placeholder-label {
                    @include helvetica-neue-regular();
                    padding: 10px 20px 0;
                    line-height: 18px;
                    font-size: 16px;
                }
            }

            .dmt-graph-label {
                @include helvetica-neue-bold();
                text-align: center;
                position: absolute;
                left: 0;
                right: 0;
                top: 5px;

                .icon {
                    font-size: 11px;
                    padding-right: 3px;
                }
            }
        }

        .dmt-download-pie {
            .dmt-graph-label {
                color: #54B2FF;
            }
        }

        .dmt-upload-pie {
            .dmt-graph-label {
                color: #7186A3;
            }
        }
    }

    .dmt-spinner-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 200px;
        bottom: 0;

        .dmt-spinner-msg {
            color: $light-blue;
        }
    }

    .dmt-graph-lower-wrapper {
        > div {
            @include flexbox-align(row, flex-start, center, center);

            > .icon {
                @include flex-basis(30px);
                padding: 0 8px;
            }
        }

        .dmt-top-device {
            display: inline-block;
            @include flex-basis(18%);
            margin-right: 1%;
            padding: 5px 22px 5px 5px;
            border: 1px solid transparent;
            border-radius: 3px;
            cursor: pointer;
            overflow: hidden;
            position: relative;

            .icon-arrow-right {
                position: absolute;
                right: 2px;
                top: 0;
                font-size: 18px;
                padding: 10px 0;
                display: none;
            }

            &:hover {
                border-color: $light-blue;

                .icon-arrow-right {
                    display: inline-block;
                }
            }

            &.dmt-unknown-device {
                cursor: default;

                &:hover {
                    border-color: transparent !important;
                }
            }

            .dmt-top-name {
                @include helvetica-neue-bold();
            }

            > div {
                line-height: 16px;
                white-space: nowrap;

                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .dmt-top-downloads {
            color: $light-blue;

            + .dmt-top-uploads {
                margin-top: 3px;
                padding-top: 3px;
                border-top: 1px solid $light-gray;
            }

            .dmt-top-device {
                &:nth-child(2) {
                    color: $light-blue;

                    &:hover {
                        border-color: $light-blue;
                    }
                }

                &:nth-child(3) {
                    color: #007ac3;

                    &:hover {
                        border-color: #007ac3;
                    }
                }

                &:nth-child(4) {
                    color: #2a598f;

                    &:hover {
                        border-color: #2a598f;
                    }
                }

                &:nth-child(5) {
                    color: #3e80c9;

                    &:hover {
                        border-color: #3e80c9;
                    }
                }

                &:nth-child(6) {
                    color: #009efa;

                    &:hover {
                        border-color: #009efa;
                    }
                }
            }
        }

        .dmt-top-uploads {
            color: $dark-gray;

            .dmt-top-device {
                &:nth-child(2) {
                    color: $dark-gray;
                    //color: #94afd6;

                    &:hover {
                        //border-color: $dark-gray;
                        border-color: #94afd6;
                    }
                }

                &:nth-child(3) {
                    color: #778eb0;

                    &:hover {
                        border-color: #778eb0;
                    }
                }

                &:nth-child(4) {
                    color: #5c708c;

                    &:hover {
                        border-color: #5c708c;
                    }
                }

                &:nth-child(5) {
                    color: #455467;

                    &:hover {
                        border-color: #455467;
                    }
                }

                &:nth-child(6) {
                    color: #b2d2ff;

                    &:hover {
                        border-color: #b2d2ff;
                    }
                }
            }
        }

        .dmt-top-title {
            @include helvetica-neue-bold();
            font-size: 16px;
            text-transform: uppercase;
            text-align: left;
            padding: 0 0 8px;
            color: $dark-blue;
        }
    }
}

.dmt-download-tooltip, .dmt-upload-tooltip {
    color: $dark-blue;
    padding: 8px 12px 8px 8px;
    position: relative;
    min-width: 150px;

    .icon {
        position: absolute;
        top: 12px;
        left: 8px;
        font-size: 20px;
    }

    .dmt-tt-text {
        padding-left: 26px;

        > div {
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.dmt-download-tooltip {
    .icon {
        color: #e4a232;
    }
}

.dmt-upload-tooltip {
    .icon {
        color: #b27000;
    }
}