.toc-affix label.ant-radio-button-checked {
    background-color: #2db7f5;
    color: #fff;
}

.section-title .anticon-qrcode {
    color: #ddd;
    font-size: 22Px;
    margin-left: 12Px;
    top: -1Px;
    position: relative;
    transition: color .3s;
    &:hover {
        color: #2db7f5;
    }
}

.code-box-expand-trigger {
    cursor: pointer;
    font-size: 14Px;
    color: #9199AC;
    margin-left: 5Px;
    opacity: .8;
    transition: all .3s ease;
    top: -2Px;
    position: relative;

    &-active {
        color: #3B4357;
    }
}

.code-box {
    border: 1Px solid #E9E9E9;
    border-radius: 6Px;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0Px 0 16Px 0Px;
    transition: all 0.5s ease;
    &-preview {
        border: none;
    }
}

.code-box.code-box-target {
    border: 1Px solid rgba(16, 142, 233, .7);
    box-shadow: 0 0 4Px rgba(16, 142, 233, .5);
    &:hover {
        box-shadow: 0 0 4Px rgba(16, 142, 233, .5);
    }
}

.code-box iframe {
    width: 100%;
    border: 0;
}

.code-box-meta, .code-box-meta.markdown {
    position: relative;
    padding: 12Px 16Px;
    border-radius: 6Px 6Px 0 0;
    transition: background-color 0.4s ease;
    width: 100%;
    font-size: 12Px;
}

.code-box-meta h4,
.code-box-meta.markdown p {
    margin: 0;
}

.code-box-meta blockquote {
    margin: 0;
}

.code-box-title {
    font-size: 16Px;
    color: #777;
    transition: all 0.4s ease;
}

.code-box-title a {
    color: #222;
}

.code-box-meta > p {
    font-size: 12Px;
    margin: 0.5em 0;
    padding-right: 25Px;
    width: 100%;
    word-break: break-word;
}

.code-box.expand .code-box-meta {
    border-bottom: 1Px dashed #e9e9e9;
}

.code-box .collapse {
    position: absolute;
    right: 18Px;
    bottom: 18Px;
    cursor: pointer;
    width: 18Px;
    height: 18Px;
    font-size: 18Px;
    line-height: 18Px;
    opacity: 0.5;
    text-align: center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: all 0.3s ease;
    color: #999;
    background: #fff;
    user-select: none;
}

.code-box.expand .collapse {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.code-box .collapse:hover {
    opacity: 1;
}

.code-box .fullscreen {
    position: absolute;
    right: 16Px;
    bottom: -60Px;
    cursor: pointer;
    font-size: 14Px;
    font-weight: bold;
    border: 1Px solid #ededed;
    padding: 8Px;
    border-radius: 16Px;
    background-color: rgba(256, 256, 256, 0.6);
}

.code-box .highlight-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: auto;
    transition: all 0.4s ease;
    border-radius: 6Px;
}

.code-box .highlight-wrapper-expand {
    max-height: 500Px;
    opacity: 1;
}

.code-box .highlight {
    overflow: auto;
    padding: 5Px;

    &:not(:first-child) {
        border-top: 1Px dashed #e9e9e9;
    }
}

.code-box pre {
    margin: 0;
    padding: 0;
    width: auto;
    background: #fff;
}

.code-box pre code {
    border: none;
    background: #fff;
}

.code-box:hover {
    box-shadow: 0 0 6Px rgba(0, 0, 0, .15);
    position: relative;
    z-index: 10;
    background: #fff;
}

.demo-preview-wrapper {
    margin: 0 auto;
    .demo-preview-header {
        border-radius: 4Px 4Px 0 0;
        background: linear-gradient(rgba(55, 55, 55, 0.98), #545456);
        text-align: center;
        .demo-preview-statbar {
            height: 20Px;
            margin-bottom: 4Px;
        }
        .demo-preview-navbar {
            height: 44Px;
        }
    }
    .demo-preview-scroller {
        background-color: #F7F7F7;
        max-height: 548Px;
        border-bottom-left-radius: 6Px;
        border-bottom-right-radius: 6Px;
        padding: 0;
        overflow: hidden;
        * {
            box-sizing: content-box;
        }
        .am-modal .am-wingblank *,
        .button-container * {
            box-sizing: border-box;
        }
    }
    iframe {
        border: none;
    }
}

.api-container table {
    width: 100%;
}

.aside-demo.fixed {
    position: fixed;
    top: 0;
}

.demo-title-wrapper {
    background-color: #fff;
}

.demo-title-wrapper.fixed {
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: #fff;
    border-right: 2Px solid #eee;
    h2 {
        margin-top: 0;
    }
}

.sub-menu-item .ant-menu-item-group-title {
    padding: 0;
    height: 0;
}

.link-buttons a {
    margin-right: 8Px;
    margin-bottom: 8Px;
}

.link-buttons .link-current span {
    color: #108ee9;
}

ul.anticons-list li.copied:hover {
    color: rgba(255, 255, 255, 0.2);
}

ul.anticons-list li:after {
    position: absolute;
    top: 10Px;
    left: 0;
    height: 100%;
    width: 100%;
    content: "Copied!";
    text-align: center;
    line-height: 110Px;
    color: #fff;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    opacity: 0;
}

ul.anticons-list li.copied:after {
    opacity: 1;
    top: 0;
}