.AIChart {
    font-family: Segoe UI;
}

    .AIChart .navigation-tab {
        border-bottom: 1px solid lightgray;
        /* margin-bottom: 10px; */
    }

    .AIChart .span-s1, .AIChart .span-s2, .AIChart .span-s3 {
        width: 33%;
        /* height: 20px; */
        vertical-align: middle;
        line-height: 20px;
        display: inline-block;
        text-align: center;
        text-transform: uppercase;
        padding: 8px;
        cursor: pointer;
        border-right: 0.5px solid lightgray;
        border-left: 0.5px solid lightgray;
        border-top: 0.5px solid lightgray;
        background-color: whitesmoke;
    }

    .AIChart .active-tab {
        background-color: #ff8a37;
        font-weight: bold;
        color: white;
    }

    .AIChart .s3 {
        position: relative;
    }

    .AIChart #lblChart {
        position: absolute;
        margin: 25px;
    }

    .AIChart .s3 .left {
        float: left;
        width: 18%;
        height: 82vh;
        overflow: auto;
        border: 1px solid lightgray;
        box-shadow: 5px 10px 8px #c8c8c8;
    }

    .AIChart .s3 .right {
        width: 81%;
        margin-left: 10px;
        height: 82vh;
        float: left;
    }

    .AIChart #lblPeriod {
        border: 0.75px solid lightgray;
        padding: 8px 10px;
        background-color: white;
        border-radius: 5px;
    }

    .AIChart .dialog-popup {
        background-color: white;
        border: 0.5px solid gray;
        padding: 15px;
        z-index: 10;
        width: 325px;
        height: 150px;
        border-radius: 6px;
    }

        .AIChart .dialog-popup input[type=submit] {
            background-color: #4CAF50;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 13px;
            float: right;
            margin-top: 10px;
        }

        .AIChart .dialog-popup table {
            width: 100%;
        }

            .AIChart .dialog-popup table tr td {
                padding: 3px;
            }

                .AIChart .dialog-popup table tr td:first-child {
                    text-align: left;
                }

                .AIChart .dialog-popup table tr td:nth-child(2) {
                    text-align: right;
                }

    .AIChart .search {
        position: relative;
        text-align: center;
        background-color: #ffffff;
        font-size: 14px;
    }

    .AIChart .lnkPeriodControl {
        margin: 0 20px;
        text-decoration: none;
        font-size: 18px;
    }

    .AIChart .period {
        margin: auto;
        padding: 30px;
        font-size: 16px;
        display: flex;
        gap: 20px;
    }

    .AIChart .filt-by-site {
        position: absolute;
        top: 15px;
        left: 15px;
    }

    .AIChart .export-excel {
        position: absolute;
        right: 80px;
        /* top: 15px; */
    }

        .AIChart .export-excel input[type=submit] {
            background-color: #4CAF50;
            border: 1px solid green;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }