.overview-box {
    @include flex();
    @include flex-justify-between();
    padding-top: 24px;
    height: 100%;
    min-width: 200px;

    .overview-info {
        > h6 {
            margin: 0 0 2px;
        }
        > h1 {
            margin: 0;
        }
    }

    > i {
        font-size: 24px
    }

    &.white {
        background: #FFFFFF ;
        color:rgba(41, 50, 65, 0.8);
    }

    &.blue {
        background: #69B7FF ;
        color: #FFFFFF;
    }

    &.gray {
        background: rgba(41, 50, 65, 0.4);
        color: #FFFFFF;
    }

    &.darkgray {
        background: rgba(41, 50, 65, 0.8); 
        color: #FFFFFF;
    }

    &.orange {
        background: linear-gradient(90deg, #FFB340 0%, #FFA740 100%);
        color: #FFFFFF;
    }
}

.timeline {
    padding-right: 4px;
    > ul {
        padding: 0;
        margin: 0;
        list-style: none;
        max-height: 372px;
        overflow: auto;
        margin-bottom: 1em;

        > li {
            @include flex();
            margin-bottom: 16px;

            > i {
                font-size:8px;
                margin-right: 10px;
                margin-top: 4px;
            }

            .event-content {
                span {
                    display: block;
                    margin-bottom: 4px;
                    font-weight: 600;
                    font-size:12px;
                    color: $textShade300;

                    &.event-title {
                        color: $textShade100;
                    }

                    &.time {
                        font-size:10px;
                        font-weight: 400;
                        color: $textShade300;
                    }
                }
            }

            &.blue {
                > i {
                    color: #297FFF;
                }
            }
            &.green {
                > i {
                    color: #34B56F;
                }
            }
            &.orange {
                > i {
                    color: #FFA928;
                }
            }
        }
    }
}

.device-status {
    .content {
        color: $textShade300;
        line-height: 1.4;
        margin-bottom:20px;
    }
    .progress {
        @include flex();
        @include flex-align-center();
        padding: 10px 0;
        color: $textShade300;

        > span {
            min-width: 40px;
        }
        
        .ui-progressbar {
            width: 100%;
            margin: 0 12px;
            background:rgba(#297FFF,.2);
            background:var(--primary-lighter-color);

            .ui-progressbar-value {
                background:rgba(#297FFF,.2);
                background:var(--primary-color);
                opacity: 0.8;
                border-radius: $borderRadius;
            }
        }
        &.active {
            .ui-progressbar {
                width: 100%;
                margin: 0 12px;
                background:rgba(#297FFF,.2);
                background:var(--primary-lighter-color);
    
                .ui-progressbar-value {
                    background:linear-gradient(270deg, #42BBFF 0%, #6129FF 100%);
                    background:linear-gradient(270deg, var(--primary-lighter-color) 0%, var(--primary-color) 100%);
                    opacity: 0.8;
                }
            }
        }
    }

    .device {
        margin-bottom: 16px;
        span {
            color: $primaryColor;
            color: var(--primary-color);
            font-size: 14px;
            font-weight: 600;

            > span {
                font-size: 8px;
                font-weight: normal;
            }

            &.status {
                font-size: 12px;
                color: $textShade300;
                margin-top: 4px;
                display: block;
            }
        }
    }

}

.team {
    @include flex();
    @include flex-align-center();
    @include flex-justify-between();

    .card-header {
        padding: 0;
        min-width: 70px;
    }

    .peoples {
        @include flex();
        @include flex-align-center();
        flex-wrap: wrap;

        > img {
            @include border-radius(10px);
            margin: 8px 8px;
            width: 32px;
            height: 32px;
        }

        .no-picture {
            cursor: pointer;
            @include flex-center();
            @include border-radius(10px);
            margin: 8px 8px;
            width: 32px;
            height: 32px;
            background: rgba(41, 50, 65, 0.1);
            color: $textShade200;
            font-size: 12px;
            @include transition(background $transitionDuration);

            &:hover {
                background: rgba(41, 50, 65, 0.2);
            }
        }
    }
}

.map {
    padding:0;

    > img {
        width: 100%;
        height:auto;
        border-radius: 24px 24px 12px 12px;
    }
    .map-content {
        padding:50px 20px 28px;
        h6 {
            margin:0 0 16px;
        }
        .city {
            margin-bottom: 16px;
            span {
                color: $primaryColor;
                color: var(--primary-color);
                font-size: 14px;
                font-weight: 600;
    
                > span {
                    font-size: 8px;
                    font-weight: normal;
                }
    
                &.status {
                    font-size: 12px;
                    color: $textShade300;
                    margin-top: 4px;
                    display: block;
                }
            }
        }
    }
}

.schedule {
    > p {
        color: $textShade300;
    }

    > ul {
        list-style: none;
        padding:0;
        margin: 0;

        > li {
            background: $contentShade400;
            border-radius: 8px;
            margin-bottom: 10px;
            padding: 5px 16px 12px;

            .schedule-header {
                @include flex();
                @include flex-justify-between();
                @include flex-align-center();

                h6 {
                    line-height: 24px;
                    margin: 0;
                }

                span {
                    color: $textShade300;
                    font-weight: 600;
                    font-size: 10px;
                    line-height: 14px;
                }
                
            }

            > span {
                margin-top:4px;
                color: $textShade300;
                display: block;
                font-size: 12px;
                line-height: 14px;
            }
        }
    }
}

.statistics {
    .statistic-item {
        .item-title {
            @include flex();
            @include flex-align-center();
            margin-bottom: 4px;

            span {
                display: block;
                margin-right: 12px;
            }
            h5{
                margin: 0;
                font-weight: 700;
            }
        }
       

        h6 {
            margin: 0;
            font-weight: 600;
            color:$textShade300;
        }
    }
}

.stocks {
    ul {
        list-style: none;
        padding:0;
        margin:0 ;

        > li {
            @include flex();
            @include flex-align-center();
            @include flex-justify-between();
            background-color: $contentShade200;
            padding: 0;
            margin: 0 0 12px;
            @include border-radius(6px);
            overflow: hidden;

            .stock-name {
                @include flex-center();
                background-color: $contentShade300;
                padding: 18px 10px;
                min-width: 70px;
                margin-right: 4px;

                h6 {
                    margin: 0;
                    color:$textShade200;
                    line-height: 17px;
                    font-weight: 600;
                }
             
            }

            > img {
                margin: 0 4px;
                height: 25px;
            }

            .stock-price {
                padding: 0 10px;
                color: #34B56F;
                margin: 0 4px;
                h6 {
                    line-height: 17px;
                    font-weight: 600;
                    display: inline-block;
                }
                i {
                    display: inline-block;
                }
            }

            .stock-status {
                margin-left: 4px;
                padding: 0 20px;
                span {
                    display: block;
                    font-weight: 600;
                    font-size: 10px;
                    line-height: 12px;
                    color: $textShade300;
                }
            }

            &.down {
                .stock-price {
                    color: #FF6E49;
                }
            }
            &.same {
                .stock-price {
                    color: #FFA928;
                }
            }
        }
    }

    > .ui-button {
        width:100%;
        margin-top: 30px;
    }
}

.operations {
    overflow: auto;
    position: relative;

    .insights {
        padding: 16px 15px;
        background-color: rgba(41, 127, 255, .04);
        @include border-radius(12px);
        margin: 12px 0 16px;

        .insight-header {
            @include flex();
            @include flex-align-center();
            margin-bottom: 5px;

            h6 {
                margin: 0 6px;
            }
        }

        > ul {
            list-style: none;
            padding: 0;
            margin: 0;

            > li {
                margin: 8px 0;
                @include flex();
                @include flex-align-center();
                @include flex-justify-between();
                color:$textShade300;

                span {
                    font-weight: 600;
        
                    > span {
                        font-size: 8px;
                        line-height: 10px;
                        font-weight: normal;
                    }
                }
            }
        }
    }

    > button {
        width: 100%;
    }
}

.notification {
    padding: 30px 24px;
    background-color:$contentShade100;
    @include border-radius(20px);

    > h6 {
        margin: 0;
        color: $textShade200;
        
        > a {
            margin-left: 10px;
            i {
                @include rotate(45deg);
            }
        }
    }
}

.chat {
    .ui-tabs.ui-tabs-top  {
        .ui-tabs-nav {
            background-color: transparent;
            margin: 0 -10px;
            border: none;

            &:before {
                display: none;
            }
            .ui-tabs-header {
                padding:9px 0 0;
                @include flex-center();
                background-color: transparent;
                @include transition(all $transitionDuration);
                margin:0 10px;
                border: none;

                a {
                    position: relative;
                    width: 52px;
                    height: 52px;
                    @include border-radius(20px);
                    @include flex-center();
                    background-color:#D0D6DD;
                    cursor: pointer;
                    @include transition(all $transitionDuration);
                    color: $primaryColor;
                    color: var(--primary-color);
                    border: 0 none;
                    overflow: visible;

                    img{
                        @include border-radius(20px); 
                    }
                    .ui-badge {
                        position: absolute;
                        bottom: -5px;
                        right: -5px;
                    }
                }

                &.ui-state-active {
                    padding: 0 0 9px;
                    border: none;

                    a {
                        box-shadow: 0px 0px 1px rgba(41, 50, 65, 0.16), 0px 1px 2px rgba(41, 50, 65, 0.04), 0px 6px 12px rgba(41, 50, 65, 0.24);
                        border: 0 none;
                    }

                    &:before {
                        content: '';
                        width: 12px;
                        height: 2px;
                        background: $primaryColor;
                        background: var(--primary-color);
                        border-radius: 3px;
                        position: absolute;
                        bottom: -10px;
                    }
                }

                &.ui-state-hover {
                    border: none;
                    padding: 0 0 9px;
                } 
                
            }
        }
        .ui-tabs-panels {
            background-color: transparent;
            border:none;
            padding: 16px 0 0;

            .ui-tabs-panel {
                padding: 0;
                height: 350px;

                .chat {
                    position: relative;
                    @include flex();
                    @include flex-direction-column();
                    @include flex-justify-between();
                    height: 350px;

                    .fade {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 44px;
                        background-image: linear-gradient(180deg, $contentShade100 0%, rgba(234, 237, 243, 0) 100%);
                    }
                    .chat-content {
                        max-height: 400px;
                        overflow: auto;
                        padding:30px 6px 12px;
                        flex: 1 1 auto;

                        .chat-message {
                            @include flex();
                            flex-direction: column;
                           
                            .name {
                                display: block;
                                color: $textShade300;
                                font-weight: 600;
                                font-size: 10px;
                                line-height: 14px;
                            }

                            .message {
                                max-width: 250px;
                                padding: 8px 10px;
                                box-shadow: 0px 0px 1px rgba(41, 50, 65, 0.5), 0px 1px 1px rgba(41, 50, 65, 0.2);
                                @include border-radius(12px);
                                background-color: $contentShade200;
                                margin-bottom: 8px;

                                p {
                                    padding: 0;
                                    margin: 0 0 2px;
                                    color: $textShade200;
                                }

                                span {
                                    display: block;
                                    font-weight: 600;
                                    font-size: 10px;
                                    line-height: 14px;
                                    color: $textShade300;
                                }

                            }

                            &.send {
                                @include flex-align-end();
                                .message {
                                    span {
                                        text-align: right;
                                    }
                                }
                            }
                        
                        }

                        &.no-message {
                            @include flex-center();
                            h4 {
                                color: $textShade300;
                            }
                        }
                    }

                    .contacts {
                        flex: 1 1 auto;
                        max-height: 400px;
                        overflow: auto;
                        padding:0px 0 12px;

                        ul {
                            padding:0;
                            margin: 0;
                            list-style: none;

                            > li {
                                @include flex();
                                @include flex-align-center();
                                margin-bottom:6px;
                                @include transition(all $transitionDuration);
                                cursor: pointer;
                                padding: 8px 10px;
                                @include border-radius(12px);

                                img {
                                    margin-right: 12px;
                                    @include border-radius(20px); 
                                }
                                h6 {
                                    margin: 0 0 2px;
                                    color:$textShade200;
                                }
                                span {
                                    display: block;
                                    color:$textShade300;
                                    font-weight: 600;
                                    font-size: 10px;
                                    line-height: 14px;
                                }

                                &:hover {
                                    background-color: $contentShade200;
                                }
                            }
                        }
                    }
                    .chat-input {
                        margin-top:30px;
                        input {
                            width: 100%;
                            @include border-radius(24px);
                            padding: 20px 19px;
                            background-color: $contentShade400;
                            border: none;
                        }
                    }
                }
            }
        }
    }
}

.image-card {
    padding:0;
    position: relative;

    > span {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    > img {
        width: 100%;
        height:auto;
        border-radius: 24px 24px 12px 12px;
    }

    .image-content {
        padding:32px 20px 28px;
        h6 {
            margin:0 0 8px;
        }
        > p {
            color: $textShade300;
        }
        >button {
            margin-top:32px;
            width: 100%;
        }
    }
}