@import url("style.choerodon.css");
@import url("footer.css");

/* 代码块注释角标 */
i.note-number[data-value] {
    display: inline-block;
    color: white !important;
    background-color: #c00;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    text-align: center;
    width: 0.2rem;
    height: 0.2rem;
    font-size: 0.12rem;
    line-height: 0.2rem;
    font-style: normal;
    font-weight: bold;
    text-indent: -0.01rem;
    margin: .03rem .05rem 0 0;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

i.note-number[data-value]::after {
    content: attr(data-value);
}

.note-description {
    padding: .15rem .15rem;
}

.annotation {
    border: #e6e6e6 0.01rem solid;
    padding: .15rem;
}

.annotation-code {
    background-color: #f7f7f7;
    padding: .15rem;
}

.language-console.hljs {
    color: #005cc5;
}

.language-console .bash {
    color: #000;
}

.docs {
    display: flex;
    flex-direction: row;
}

.docs .search {
    align-self: stretch;
    width: 100%;
    margin-bottom: 0.3rem;
    position: relative;
    font-size: 0.16rem;
}

/* 文档菜单 */

.docs-menu {
    background-color: white;
    border-right: 0.01rem solid #dadada;
    margin-top: 0.8rem;
    color: #314659;
    margin-bottom: 0.2rem;
    line-height: 1.29;
    list-style-type: none;
    min-width: 3rem;
}

.docs-menu .docs-search {
    margin-left: 0.32rem;
    margin-right: 0.2rem;
}

.docs-menu .dd-item {
    list-style: none;
    line-height: 3;
}

.docs-menu .dd-item.active>ul,
.docs-menu .dd-item.parent>ul,
.docs-menu .dd-item.alwaysopen>ul {
    display: block;
}

.docs-menu .dd-item a {
    color: #314659;
}

.docs-menu ul {
    padding-left: 0;
}

.docs-menu .dd-item.haschildren>div {
    align-items: center;
    padding-left: 0;
    display: flex;
    flex-direction: row;
}

.docs-menu .dd-item.active>div {
    background-color: #f0f3f4;
    border-right: 3px solid #009900;
    padding-right: 0.03rem;
}

.docs-menu .dd-item.haschildren>div span,
.docs-menu .dd-item.haschildren>div a {
    display: flex;
    flex: 1;
    padding: 0;
    font-size: 0.14rem;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
}

.docs-menu .dd-item.haschildren>div a:hover {
    color: #5CC2F2;
}

.docs-menu .dd-item.haschildren>div i {
    font-size: 0.1rem;
    color: #314659;
    font-weight: 400;
    margin: auto 0.18rem;
    cursor: pointer;
}

.docs-menu .dd-item.active>div i {
    margin: auto 0.12rem auto 0.15rem;
}

.docs-menu .dd-item.active>div>a {
    color: #5CC2F2;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

.docs-menu::-webkit-scrollbar {
    width: 0.04rem;
    height: 0.06rem;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/

.docs-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0.06rem rgba(0, 0, 0, 0.3);
    border-radius: 0.1rem;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/

.docs-menu::-webkit-scrollbar-thumb {
    border-radius: 0.1rem;
    -webkit-box-shadow: inset 0 0 0.06rem #dadada;
    background-color: #555;
}

.article-menu ul li a {
    color: #333333;
    line-height: 1;
}

.article-menu {
    position: fixed;
    right: 0;
    margin-right: 0.23rem;
    background-color: white;
    width: 1.5rem;
    flex-direction: column;
    margin-top: 0.8rem;
    display: flex;
}

.article-menu ul li.article-active {
    border-left: 0.01rem solid #326DE6;
    padding-left: 0.1rem;
}

.article-menu ul li.article-active a {
    color: #326DE6;
    position: relative;
}

.article-menu ul {
    list-style: none;
    padding-left: 0;
    display: block;
    border-left: 0.01rem solid #DADADA;
    overflow: auto;
    position: relative;
}

.article-menu ul li {
    align-items: center;
    line-height: 1.23;
    padding-top: 0.08rem;
    list-style: none;
    font-size: 0.13rem;
    padding-left: 0.11rem;
}

.article-menu .head {
    font-weight: 500;
}

.article-menu .head,
.article-menu .sec {
    font-size: 0.12rem;
}

.article-menu .thi {
    margin-left: 0.1rem;
    font-size: 0.12rem;
}

/* 文档菜单结束 */

.tutorial-img {
    cursor: pointer;
    display: flex;
    flex-flow: row wrap;
}

.tutorial-img .tutorial {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.2rem;
}

.tutorial-img .tutorial .tutorial-head{
    width: 100%;
    border-radius: 5px 5px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 1.82rem;
    position: relative;
}

.tutorial-img .tutorial .tutorial-head:hover:after{
    background: url(/img/docs/quick-start/video/play.svg) no-repeat center 60%,rgba(0,0,0,0.40);
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
}

.tutorial-img .tutorial .tutorial-head .hover-background{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 1.82rem;
}

.tutorial-img .tutorial .tutorial-head .hover-background:hover{
    background: url(/img/docs/quick-start/video/play.svg) no-repeat center 60%,rgba(0,0,0,0.40);
}


.tutorial-img .tutorial .tutorial-head .title{
    font-size: 0.24rem;
    color: #FFFFFF;
    text-shadow: 0 2px 1px rgba(15,83,120,0.79);
    margin-top: 0.35rem;
    text-align: center;
    font-weight: 500;
}

.tutorial-img .tutorial .tutorial-head .time{
    font-size: 0.1rem;
    color: #FFFFFF;
    background: rgba(0,0,0,0.40);
    border-radius: 0.1rem;
    height: 0.18rem;
    margin: auto 0.08rem 0.06rem auto;
}

.tutorial-img .tutorial .tutorial-head .time .content{
    margin: auto 0.06rem auto 0.08rem;
    line-height: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.tutorial-img .tutorial .tutorial-head .time .content i {
    font-size: 0.03rem;
}
.tutorial-img .tutorial .tutorial-footer{
    background: #FFFFFF;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.20);
    border-radius: 0 0 5px 5px;
    height: 0.8rem;
    width: 2.6rem;
}

.tutorial-img .tutorial .tutorial-footer .content{
    padding-left: 0.08rem;
    text-align: left;
}
.tutorial-img .tutorial .tutorial-footer .content .title{
    font-size: 0.15rem;
    color: #000000;
}

.tutorial-img .tutorial .tutorial-footer .content .description{
    font-size: 0.13rem;
    color: rgba(0,0,0,0.65);
    overflow: hidden;
    text-overflow: ellipsis;
}


.tutorial-video {
    z-index: 1002;
    width: 10.6rem;
    margin: auto;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    display: none;
}

.tutorial-video .icon-guanbi {
    font-size: 0.5rem;
    position: absolute;
    right: 0.2rem;
    top: 0;
    z-index: 1002;
}

.tutorial-video .bg {
    background-color: #000;
    opacity: 0.3;
    position: absolute;
    width: 100%;
    height: 100%;
}

.tutorial-video iframe {
    z-index: 1002;
    display: flex;
    align-items: center;
    width: 7.68rem;
    height: 5.76rem;
}

.docs-home-nav {
    min-height: 2.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    color: #fafafa;
    background: url(/docs/quick-start/video-tutorial/img/video-button.svg), no-repeat, linear-gradient(0deg, #003DAC, #3371E3);
    background: url(/docs/quick-start/video-tutorial/img/video-button.svg), no-repeat, -webkit-linear-gradient(0deg, #003DAC, #3371E3);
    background: -moz-linear-gradient(0deg, #003DAC, #3371E3);
    background: -o-linear-gradient(0deg, #003DAC, #3371E3);
    background: -ms-linear-gradient(0deg, #003DAC, #3371E3);
}

.docs-home-nav .nav-text {
    margin: 0.8rem auto 0 auto;
    width: 10.24rem;
    padding-right: 4.04rem;
    /* padding-top: 0.3rem; */
}

.docs-home-nav .nav-text h2 {
    color: inherit;
    font-size: 0.36rem;
    line-height: 1.22;
    margin-bottom: 0.16rem;
    font-weight: 300;
}

.docs-home-nav .nav-text p {
    font-size: 0.16rem;
    line-height: 1.75;
    font-weight: 300;
}

.docs-home-content {
    margin: 0.4rem auto;
}

.docs-home-content i {
    font-size: 0.32rem;
    color: #3371E3;
    margin: 0;
}

.docs-post .docs-home-content img {
    border: none;
}

.docs-home-nav .nav-text {
    margin: 0.8rem auto 0 auto;
    width: 10.24rem;
    padding-right: 4.04rem;
}

.docs-home-nav .nav-text h2 {
    color: inherit;
    font-size: 0.36rem;
    line-height: 1.22;
    margin-bottom: 0.16rem;
    font-weight: 300;
}

.docs-home-nav .nav-text p {
    font-size: 0.16rem;
    line-height: 1.75;
    font-weight: 300;
}

.docs-post {
    width: 8.8rem;
    padding: 0;
    margin-left: 0.28rem;
    margin-top: 0.8rem;
    color: #314659;
    font-size: 0.14rem;
    line-height: 2;
}

.docs-post .result-row a {
    font-size: 0.32rem;
    line-height: 2;
    font-weight: 300;
}

.docs-post .result-row .right-text {
    font-size: 0.14rem;
    font-weight: 400;
    line-height: 1.8;
}

.docs-post .doc-home {
    margin-top: 0.4rem;
}

.docs-post:not(.ui-components) .doc-home ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0.15rem -0.1rem -0.2rem -0.1rem;
}

.docs-post:not(.ui-components) .doc-home ul li {
    background-color: #fff;
    border-radius: 0.02rem;
    border: 1px solid #DADADA;
    width: 2.8rem;
    min-height: 2.13rem;
    list-style: none;
    margin: 0 0.1rem 0.2rem 0.1rem;
}

.docs-post .doc-home .access-list-item {
    padding: 0.2rem;
    height: 100%;
}

.docs-post .doc-home .access-list-item .item-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.1rem;
}

.docs-post:not(.ui-components) .doc-home ul li:hover {
    background: #F0F8FF;
    border: 1px solid #6694EF;
}

.docs-post .doc-home img {
    height: 0.71rem;
    background-size: auto 100%;
    background-position: left;
    background-repeat: no-repeat;
    margin-bottom: 0.16rem;
    max-width: 100%!important;
    border:none!important;
}

.docs-post .doc-home .access-list-item h4 {
    font-size: 0.15rem;
    color: #0288d1;
    margin-bottom: 0.2rem;
    font-weight: 500;
    margin: auto;
}

.docs-post:not(.ui-components) .doc-home li p {
    font-size: 0.13rem;
    color: rgba(0, 0, 0, 0.65);
    text-align: left;
    line-height: 1.4;
}

/* warning note样式定制 */
.docs-post blockquote {
    font-size: 0.13rem;
    color: #697b8c;
    border-left: 4px solid #ebedf0;
    margin: 1em 0;
    padding: 0 0 0 0.08rem;
}
.docs-post blockquote p{
    margin: 0;
}
.docs-post blockquote.note,
.docs-post blockquote.warning {
    border-left: none;
    display: block;
    font-size: 0.14rem;
    margin: 0.16rem 0;
    padding: 0.12rem 0.24rem 0.12rem 0.3rem;
}

.docs-post blockquote.note::before,
.docs-post blockquote.warning::before {
    font-family: 'iconfont';
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 0.14rem;
}

.docs-post blockquote.note {
    background: #e1f5fe;
    color: #0288d1;
}

.docs-post blockquote.note::before {
    color: #039be5;
    content: "\e650 \00a0 \00a0 \00a0 Note:";
}

.docs-post blockquote.note a {
    color: #326DE6;
}

.docs-post blockquote.warning {
    background: #fbe9e7;
    color: #d50000;
}

.docs-post blockquote.warning::before {
    color: #ff1744;
    content: "\e6d4 \00a0 \00a0 \00a0 Warning: ";
}

/* 文档内容 */

.docs-post h1,
.docs-post h2,
.docs-post h3,
.docs-post h4,
.docs-post h5,
.docs-post h6 {
    line-height: 1;
    margin-bottom: 0.2rem;
    font-weight: 500;
    color: #0d1a26;
}

.docs-post *+h2,
.docs-post *+h3,
.docs-post *+h4,
.docs-post *+h5,
.docs-post *+h6 {
    margin-top: 0.4rem;
}

.docs-post h1 {
    font-size: 0.3rem;
}

.docs-post h2 {
    font-size: 0.24rem;
}

.docs-post h3 {
    font-size: 0.18rem;
}

.docs-post h4 {
    font-size: 0.16rem;
}

.docs-post h5 {
    font-size: 0.14rem;
}

.docs-post h6 {
    font-size: 0.12rem;
}

.docs-post:not(.ui-components) img {
    border: 0.01rem solid #ebebeb;
    max-width: calc(100% - .32rem);
}

.docs-post .access-list-item a,
.docs-post p,
.docs-post pre {
    margin: 1em 0;
}

.docs-post code {
    /* display: inline-block;
  box-sizing: border-box;
  background-color: #f7f7f7;
  color: #303030;
  vertical-align: baseline;
  font-size: 0.14rem;
  font-weight: bold;
  padding: 0 0.05rem; */
    margin: 0 0.01rem;
    background: #f2f4f5;
    padding: .2em .4em;
    border-radius: 0.03rem;
    font-size: .9em;
    border: 0.01rem solid #eee
}

.docs-post pre {
    display: flex;
    margin: 0.2rem 0;
    padding: 0.15rem;
    position: relative;
    overflow-x: auto;
    border: none;
    border-radius: 0.02rem;
    background: #f2f4f5;
}

.docs-post pre code {
    border: none;
    background: #f2f4f5;
    margin: 0;
    padding: 0;
    font-size: 0.13rem;
    color: #314659;
    overflow: auto
}

.docs-post a code {
    color: #3371e3;
    text-decoration: underline;
}

.docs-post code,
.docs-post pre code {
    color: #314659;
    font-weight: 300;
    word-wrap: break-word;
}

.docs-post pre code {
    padding: 0;
}

.docs-post:not(.ui-components) ul ul,
.docs-post:not(.ui-components) ol ol,
.docs-post:not(.ui-components) ul ol,
.docs-post:not(.ui-components) ol ul {
    margin: 0.75em 0;
}

.docs-post:not(.ui-components) li {
    margin-bottom: 0.75em;
    line-height: 1.75;
}

.docs-post:not(.ui-components) li *+p {
    margin: 0;
}

.docs-post:not(.ui-components) li,
.docs-post:not(.ui-components) li p {
    margin: 0 0 0.08rem 0;
}

.docs-post:not(.ui-components) ul>li{
    list-style-type: circle;
    margin-left: 0.2rem;
    padding-left: 0.04rem;
}

.docs-post:not(.ui-components) ol>li {
    list-style-type: decimal;
    margin-left: 0.2rem;
    padding-left: 0.04rem;
}

.docs-post:not(.ui-components) ol>li>p,
.docs-post:not(.ui-components) ul>li>p {
    margin: .2em 0
}

.docs-post:not(.ui-components) table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 0.01rem solid #ebedf0;
    width: 100%;
    margin: 0.08rem 0 0.16rem
}

.docs-post:not(.ui-components) th,
.docs-post:not(.ui-components) td {
    text-align: left;
    margin: 0;
    padding: 0.16rem 0.24rem;
    word-break: break-word;
}

.docs-post:not(.ui-components) th {
    font-weight: normal;
    background-color: #FFFFFF;
}

.docs-post:not(.ui-components) td {
    font-size: 0.85em;
}

.docs-post:not(.ui-components) ul,
.docs-post:not(.ui-components) ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* components */
.c7n-row{
    position: relative;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    zoom: 1;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.c7n-row:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.c7n-row-6{
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
    float: left;
}
.code-box-demo{
    border-bottom: 1px solid #ebedf0;
    padding: 42px 24px 50px;
    color: rgba(0,0,0,.65);
}
.code-box{
    border: 1px solid #ebedf0;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0 0 16px;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.code-box-meta{
    position: relative;
    padding: 18px 32px;
    border-radius: 0 0 2px 2px;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
    width: 100%;
    font-size: 13px;
}
.code-box-code{
    margin: 0;
}
.code-box .code-box-code>pre{
    margin: 0;
    padding: 18px 32px
}
.code-box-title{
    position: absolute;
    top: -14px;
    padding: 1px 8px;
    margin-left: -8px;
    color: #777;
    border-radius: 2px 2px 0 0;
    background: #fff;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
}

#button-ghost-background{
    background: rgb(190, 200, 200);
    padding: 26px 16px 16px;
}

.demo-row{
    background-image: -webkit-gradient(linear,left top,right top,color-stop(4.16666667%,#f5f5f5),color-stop(4.16666667%,transparent),color-stop(8.33333333%,transparent),color-stop(8.33333333%,#f5f5f5),color-stop(12.5%,#f5f5f5),color-stop(12.5%,transparent),color-stop(16.66666667%,transparent),color-stop(16.66666667%,#f5f5f5),color-stop(20.83333333%,#f5f5f5),color-stop(20.83333333%,transparent),color-stop(25%,transparent),color-stop(25%,#f5f5f5),color-stop(29.16666667%,#f5f5f5),color-stop(29.16666667%,transparent),color-stop(33.33333333%,transparent),color-stop(33.33333333%,#f5f5f5),color-stop(37.5%,#f5f5f5),color-stop(37.5%,transparent),color-stop(41.66666667%,transparent),color-stop(41.66666667%,#f5f5f5),color-stop(45.83333333%,#f5f5f5),color-stop(45.83333333%,transparent),color-stop(50%,transparent),color-stop(50%,#f5f5f5),color-stop(54.16666667%,#f5f5f5),color-stop(54.16666667%,transparent),color-stop(58.33333333%,transparent),color-stop(58.33333333%,#f5f5f5),color-stop(62.5%,#f5f5f5),color-stop(62.5%,transparent),color-stop(66.66666667%,transparent),color-stop(66.66666667%,#f5f5f5),color-stop(70.83333333%,#f5f5f5),color-stop(70.83333333%,transparent),color-stop(75%,transparent),color-stop(75%,#f5f5f5),color-stop(79.16666667%,#f5f5f5),color-stop(79.16666667%,transparent),color-stop(83.33333333%,transparent),color-stop(83.33333333%,#f5f5f5),color-stop(87.5%,#f5f5f5),color-stop(87.5%,transparent),color-stop(91.66666667%,transparent),color-stop(91.66666667%,#f5f5f5),color-stop(95.83333333%,#f5f5f5),color-stop(95.83333333%,transparent));
    background-image: -webkit-linear-gradient(left,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
    background-image: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
    overflow: hidden;
    margin-bottom: 8px;
}

.grid-demo .ant-row .demo-col-1,
.ant-row .demo-col-1{
    background: rgba(0,160,233,.7);
}

.grid-demo .ant-row .demo-col,
.grid-demo .code-box-demo .ant-row .demo-col, 
.ant-row .demo-col, 
.code-box-demo .ant-row .demo-col{
    text-align: center;
    padding: 30px 0;
    color: #fff;
    font-size: 18px;
    border: none;
    margin-top: 0;
    margin-bottom: 0;
}

.ant-col-24{
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}
.ant-col-8 {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 33.33333333%;
}
.ant-col-6 {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
}

.grid-demo .ant-row-flex>div, 
.grid-demo .ant-row>div, 
.grid-demo .code-box-demo .ant-row-flex>div, 
.grid-demo .code-box-demo .ant-row>div, 
.ant-row-flex>div, 
[id^=grid-] .ant-row>div, 
.code-box-demo .ant-row-flex>div, 
[id^=grid-] .code-box-demo .ant-row>div {
    padding: 5px 0;
    text-align: center;
    border-radius: 0;
    min-height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
}
.ant-col-1, .ant-col-2, .ant-col-3, .ant-col-4, .ant-col-5, .ant-col-6, .ant-col-7, .ant-col-8, .ant-col-9, .ant-col-10, .ant-col-11, .ant-col-12, .ant-col-13, .ant-col-14, .ant-col-15, .ant-col-16, .ant-col-17, .ant-col-18, .ant-col-19, .ant-col-20, .ant-col-21, .ant-col-22, .ant-col-23, .ant-col-24{
    float: left;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.grid-demo .ant-row .demo-col, 
.grid-demo .code-box-demo .ant-row .demo-col, 
.ant-row .demo-col, 
.code-box-demo .ant-row .demo-col{
    text-align: center;
    padding: 30px 0;
    color: #fff;
    font-size: 18px;
    border: none;
    margin-top: 0;
    margin-bottom: 0;
}

.grid-demo .ant-row .demo-col-2, 
.grid-demo .code-box-demo .ant-row .demo-col-2, 
.ant-row .demo-col-2, 
.code-box-demo .ant-row .demo-col-2{
    background: rgba(0,160,233,.5);
}

.grid-demo .ant-row .demo-col-3, 
.grid-demo .code-box-demo .ant-row .demo-col-3, 
.ant-row .demo-col-3, 
.code-box-demo .ant-row .demo-col-3{
    background: hsla(0,0%,100%,.2);
    color: #999;
}

.grid-demo .ant-row .demo-col-4,
.grid-demo .code-box-demo .ant-row .demo-col-4,
.ant-row .demo-col-4,
.code-box-demo .ant-row .demo-col-4 {
    background: rgba(0,160,233,.6);
}

.grid-demo .ant-row .demo-col-5, 
.grid-demo .code-box-demo .ant-row .demo-col-5,
.ant-row .demo-col-5,
.code-box-demo .ant-row .demo-col-5 {
    background: hsla(0,0%,100%,.5);
    color: #999;
}

.grid-demo .code-box-demo .ant-row-flex>div:not(.gutter-row):nth-child(odd), 
.grid-demo .code-box-demo .ant-row>div:not(.gutter-row):nth-child(odd), 
[id^=grid-] .code-box-demo .ant-row-flex>div:not(.gutter-row):nth-child(odd),
[id^=grid-] .code-box-demo .ant-row>div:not(.gutter-row):nth-child(odd){
    background: rgba(0,160,233,.7);
}

.grid-demo .code-box-demo .ant-row-flex>div:not(.gutter-row), 
.grid-demo .code-box-demo .ant-row>div:not(.gutter-row), 
[id^=grid-] .code-box-demo .ant-row-flex>div:not(.gutter-row), 
[id^=grid-] .code-box-demo .ant-row>div:not(.gutter-row) {
    background: #00a0e9;
    padding: 16px 0;
}

.gutter-box {
    background: #00A0E9;
    padding: 5px 0;
}

.grid-demo .ant-row-flex, 
.grid-demo .code-box-demo .ant-row-flex, 
.ant-row-flex, 
.code-box-demo .ant-row-flex {
    background: #f5f5f5;
}

ul.anticons-list {
    margin: 40px 0;
    list-style: none;
    overflow: hidden;
}

ul.anticons-list li {
    float: left;
    width: 16.66%;
    text-align: center;
    list-style: none;
    cursor: pointer;
    height: 100px;
    color: #555;
    -webkit-transition: color .3s ease-in-out,background-color .3s ease-in-out;
    transition: color .3s ease-in-out,background-color .3s ease-in-out;
    position: relative;
    margin: 3px 0;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    padding: 10px 0 0;
}

ul.anticons-list li .anticon-class {
    display: block;
    text-align: center;
    -webkit-transform: scale(.83);
    -ms-transform: scale(.83);
    transform: scale(.83);
    font-family: Lucida Console,Consolas;
    white-space: nowrap;
}

.grid-demo .code-box-demo .height-100, 
.code-box-demo .height-100 {
    height: 100px;
    line-height: 100px;
}

.grid-demo .code-box-demo .height-50, 
.code-box-demo .height-50 {
    height: 50px;
    line-height: 50px;
}

.grid-demo .code-box-demo .height-120,
.code-box-demo .height-120 {
    height: 120px;
    line-height: 120px;
}

.grid-demo .code-box-demo .height-80,
.code-box-demo .height-80 {
    height: 80px;
    line-height: 80px;
}

.center-text,
#components-layout-demo-basic .code-box-demo {
    text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
background: #7dbcea;
color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
background: #3ba0e9;
color: #fff;
line-height: 120px;
}
#components-layout-demo-basic .ant-layout-content {
background: rgba(16, 142, 233, 1);
color: #fff;
min-height: 120px;
line-height: 120px;
}
#components-layout-demo-basic > .code-box-demo > #layout-basic > div > .ant-layout {
margin-bottom: 48px;
}
#components-layout-demo-basic > .code-box-demo > #layout-basic > div > .ant-layout:last-child {
margin: 0;
}

#layout-top-menu{
    line-height: 64px;
}

#layout-top-content{
    padding: 0 50px;
}

.layout-top-side-react-breadcrumb,
.layout-top-Breadcrumb{
    margin: 16px 0!important;
}

#layout-top-div{
    background: #fff;
    padding: 24px;
    min-height: 280px;
}

#layout-top-footer{
    text-align:center
}

#components-layout-demo-top .logo {
    width: 120px;
    height: 31px;
    background: rgba(255,255,255,.2);
    margin: 16px 24px 16px 0;
    float: left;
}

#layout-top-side-menu-menu{
    line-height:64px;
}

#layout-top-side-menu-sider,
.white-back{
    background: #fff;
}

#layout-top-side-menu-sider-menu{
    height: 100%;
    border-right: 0;
}

#layout-top-side-menu-layout{
    padding: 0 24px 24px;
}

.layout-top-side-menu-breadcrumb{
    margin: 16px 0!important;
}

#layout-top-side-menu-layout-content{
    background: #fff;
    padding: 24px;
    margin: 0;
    min-height: 280px;
}

#layout-top-side-react-menu{
    line-height: 64px;
}

#layout-top-side-react-content{
    padding: 0 50px;
}

#layout-top-side-react-layout{
    padding: 24px 0;
    background: #fff;
}

.height-one-hundred-percent{
    height: 100%;
}

.ant-layout-sider-trigger{
    display: none;
}

#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color .3s;
  }
  
  #components-layout-demo-custom-trigger .trigger:hover {
    color: #009900;
  }
  
  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255,255,255,.2);
    margin: 16px;
  }

  #components-layout-demo-responsive .logo {
    height: 32px;
    background: rgba(255,255,255,.2);
    margin: 16px;
  }

  #components-layout-demo-fixed .logo {
    width: 120px;
    height: 31px;
    background: rgba(255,255,255,.2);
    margin: 16px 24px 16px 0;
    float: left;
  }

  #components-layout-demo-fixed-sider .logo {
    height: 32px;
    background: rgba(255,255,255,.2);
    margin: 16px;
  }

  #components-affix-demo-target .scrollable-container {
    height: 100px;
    overflow-y: scroll;
  }
  #components-affix-demo-target .background {
    padding-top: 60px;
    height: 300px;
    background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
  }
  .components-pagination-demo-mini .ant-pagination:not(:last-child) {
    margin-bottom: 24px;
  }

  .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
    right: 12px;
  }
  
  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
    color: #666;
    font-weight: bold;
  }
  
  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
    border-bottom: 1px solid #F6F6F6;
  }
  
  .certain-category-search-dropdown .ant-select-dropdown-menu-item {
    padding-left: 16px;
  }
  
  .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
    text-align: center;
    cursor: default;
  }
  
  .certain-category-search-dropdown .ant-select-dropdown-menu {
    max-height: 300px;
  }
  
  .certain-search-item-count {
   position: absolute;
   color: #999;
   right: 16px;
  }
  
  .certain-category-search.ant-select-focused .certain-category-icon {
    color: #108ee9;
  }
  
  .certain-category-icon {
    color: #6E6E6E;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    font-size: 16px;
  }
  .global-search-wrapper {
    padding-right: 50px;
  }
  
  .global-search {
    width: 100%;
  }
  
  .global-search.ant-select-auto-complete .ant-select-selection--single {
    margin-right: -46px;
  }
  
  .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
    padding-right: 62px;
  }
  
  .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
    right: 0;
  }
  
  .global-search-item-count {
    position: absolute;
    right: 16px;
  }

  #components-form-demo-normal-login .login-form {
    max-width: 300px;
  }
  #components-form-demo-normal-login .login-form-forgot {
    float: right;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }

  .ant-advanced-search-form {
    padding: 24px !important;
    background: #fbfbfb;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
  }
  
  .ant-advanced-search-form .ant-form-item {
    display: flex;
  }
  
  .ant-advanced-search-form .ant-form-item-control-wrapper {
    flex: 1;
  }
  #components-form-demo-advanced-search .ant-form {
    max-width: none;
  }
  #components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
  }
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all .3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }
  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  #components-form-demo-global-state .language-bash {
    max-width: 400px;
    border-radius: 6px;
    margin-top: 24px;
  }
  .ant-upload-list-item-thumbnail img{
      max-width: 100%;
  }
  #components-avatar-demo-basic .ant-avatar {
    margin-top: 16px;
    margin-right: 16px;
  }

  #components-avatar-demo-type .ant-avatar {
    margin-top: 16px;
    margin-right: 16px;
  }

  .ant-badge:not(.ant-badge-status) {
    margin-right: 20px;
  }
  .head-example {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: #eee;
    display: inline-block;
  }
  .events {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .events .ant-badge-status {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  .notes-month {
    text-align: center;
    font-size: 28px;
  }
  .notes-month section {
    font-size: 28px;
  }

  .ant-carousel .slick-slide {
    text-align: center;
    height: 160px!important;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
  
  .ant-carousel .slick-slide h3 {
    color: #fff;
    line-height: inherit;
  }

  .ant-alert {
    margin-bottom: 16px!important;
  }
  #components-affix-demo-target .scrollable-container {
    height: 100px;
    overflow-y: scroll;
  }
  #components-affix-demo-target .background {
    padding-top: 60px;
    height: 300px;
    background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
  }
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
  }
  
  .steps-action {
    margin-top: 24px;
  }

  .locale-components {
    border-top: 1px solid #d9d9d9;
    padding-top: 16px;
  }
  
  .example {
    margin: 16px 0;
  }
  
  .example > * {
    margin-right: 8px;
  }
  
  .change-locale {
    margin-bottom: 16px;
  }

  ul.anticons-list>li:hover{
      background-color: #3367d6;
      color: #fff;
  }

  ul.anticons-list li.copied:hover {
      color: hsla(0,0%,100%,.2);
    }
ul.anticons-list li:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "Copied!";
    text-align: center;
    line-height: 110px;
    color: #fff;
    -webkit-transition: all .3s cubic-bezier(.18,.89,.32,1.28);
    transition: all .3s cubic-bezier(.18,.89,.32,1.28);
    opacity: 0;
}
ul.anticons-list li.copied:after {
    opacity: 1;
    top: -10px;
}

.code-expand-icon {
    position: absolute;
    right: 16px;
    bottom: 23px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
  }

  .code-expand-icon-show,
  .code-expand-icon-hide {
    transition: all 0.4s;
    user-select: none;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
    box-shadow: none;
  }

  .code-expand-icon-show {
    opacity: 0.55;
    pointer-events: auto;
  }

  .code-expand-icon-show:hover{
    opacity: 1;
  }

  .code-expand-icon.ant-tooltip-open .code-expand-icon-show {
    opacity: 1;
  }

  .code-expand-icon-hide {
    opacity: 0;
    pointer-events: none;
  }
/* components end  */

/* 文档内容结束 */

/* warning note样式定制结束 */

@media (max-width:767px) {
    .docs {
        width: 6.75rem;
        display: flex;
        position: relative;
        left: -3rem;
        top: 0;
        background-color: #fff;
        margin: 0;
        transition: left .5s;
    }
    .docs-post {
        margin: 0.4rem 0 0;
        width: 3.75rem;
        padding: 0.2rem;
    }
    .article-menu {
        display: none;
    }
    .docs-menu {
        margin-top: 0.3rem;
        margin-bottom: 0;
    }
    .docs-menu .docs-search {
        display: none;
    }
    .docs-menu .docs-search .search {
        margin-bottom: 0.2rem;
    }
    .docs-menu li {
        padding-top: 0.2rem;
        margin-top: 0;
    }
    .docs-home-nav {
        background-image: none;
        background: linear-gradient(0deg, #003DAC, #3371E3);
        background: -webkit-linear-gradient(0deg, #003DAC, #3371E3);
        background: -moz-linear-gradient(0deg, #003DAC, #3371E3);
        background: -o-linear-gradient(0deg, #003DAC, #3371E3);
        background: -ms-linear-gradient(0deg, #003DAC, #3371E3);
    }
    .docs-home-nav .nav-text {
        width: 3rem;
        padding: 0;
        margin: 0.6rem auto 0 auto;
    }
    .docs-home-nav .nav-text h2 {
        text-align: center;
        font-size: 0.33rem;
    }
    .docs-home-nav .nav-text p {
        text-align: center;
    }
    .docs-home-content {
        padding: 0 0.4rem;
        width: 3.5rem;
    }
    .docs-post:not(.ui-components) .doc-home ul li {
        margin: 0 auto 0.2rem auto;
    }
    .tutorial-video .bg {
        background-color: #000;
        opacity: 1;
    }
    .tutorial-video .icon-guanbi {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1002;
        font-size: 0.4rem;
        color: white;
    }
    .tutorial-video iframe {
        z-index: 1002;
        display: flex;
        align-items: center;
        width: 100%;
        height: 4.8rem;
    }
    .c7n-row-6{
        width: 100%;
    }
}