body {
    margin: 0;
    color: #434343;
    background-color: #f3f3f3;
    font-family: Monaco, Helvetica, Arial, sans-serif;
}

@active-color: #a9334c !important;
@main-color: #293c55;

.demo-container {

    a.active {
        color: @active-color;
    }

    header {
        padding: 5% 0;
        text-align: center;
        background-color: @main-color;
        margin-bottom: 20px;

        h1 {
            margin: 0;
        }

        h1,
        h3 {
            color: white;
        }

        h3 {
            margin-top: 2%;
            margin-bottom: 2%;
        }

    }

    .demo-header,
    .demo-body {
        display: flex;
        width: 85%;
        min-width: 1000px;
        max-width: 1200px;
        min-height: 42px;
        margin: 0 auto 10px;
        align-items: stretch;
        justify-content: space-between;
    }

    .codesandbox-btn {
        font-size: 0;
    }

    .list-title,
    .demo-slider {
        flex: 0 0 210px;
        margin: 0;
        box-sizing: border-box;
    }

    .list-title {
        display: flex;
        padding-left: 20px;
        align-items: center;
        font-weight: bold;
        color: @main-color;
    }

    .demo-slider {

        li {
            padding-bottom: 10px;
            list-style: none;
        }

        a {
            color: @main-color;
            text-decoration: none;
        }

        sub {
            font-size: 10px;
            vertical-align: baseline;
            opacity: 0.45;
        }

    }

    .demo-content {
        flex: 1;
        margin-left: 20px;
    }

    .demo-slider {
        padding: 20px 30px 20px 20px;
    }

    .demo-content {
        padding: 20px;
    }

    .list-title,
    .demo-slider,
    .demo-content {
        background: white;
        border-radius: 6px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
    }

    .demo-content section {
        position: relative;
        padding-bottom: 50%;
    }

    .react-component-echarts {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    footer {
        text-align: center;
        margin-top: 35px;
        margin-bottom: 20px;

        a {
            color: #434343;
        }
    }

    .suspense-fallback {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @main-color;
    }

    .suspense-fallback svg {
        margin-top: -20px;
        animation: rotate 1.2s linear infinite;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}