html {height: 100%;}
body{ color:#0b2542;font-family: 'Roboto', sans-serif; font-weight:normal; font-size:15px; margin:initial!important; overflow:hidden; height:100%;}
:root {
    --color1: #46cc5e; 
    --color2: #0064d6;
    --color3: #ea2b0f;
    --line  : #e3e9ef; 
    --gray  : #eff2f5;
}

pre{overflow:initial; font-size:initial}

.template-ui{display:none!important}

/***********************************************************/
/*                           Page                          */
/***********************************************************/
.wrapper-page{width:100%; display:table; height:100%;}
@media (min-width: 992px){
    .wrapper-page .left-page{display:block; width:280px; height:100%; float:left; }
    .wrapper-page .right-page{display:block; width:calc(100% - 280px); height:100%; position:absolute; left:280px; top:0; overflow-y:auto; padding: 0 20px 20px 50px; transition:.3s}
    .wrapper-page .right-page .title-page{width:100%; float:left; position:relative; padding-top:40px;}
    .wrapper-page .right-page .title-page .sitemap{display:block; text-transform:uppercase; font-size:11px; font-weight:500;}
    .wrapper-page .right-page .title-page .sitemap span:before{content:'/'; padding: 0 8px;}
    .wrapper-page .right-page .title-page .sitemap span:first-child:before{display:none;}
    .wrapper-page .right-page .title-page label{margin:0; font-weight:bold; font-size:32px;}
    
}


/***********************************************************/
/*                        section                          */
/***********************************************************/
section{width:100%; float:left; position:relative; display:block; margin-top:50px; line-height:26px;}
section .ui-title{width:100%; float:left; position:relative; font-weight:bold; font-size:24px; color:var(--color2)}
section .ui-demo{width:100%; float:left; margin-top:30px;}
section .ui-syntax-demo{width:100%; margin:0; padding:0; float:left; overflow:hidden;}
section .ui-syntax-demo iframe{width:100%; float:left; border:none; overflow:hidden; }
section .ui-item-title{display:block; float:left; position:relative; font-weight:bold; margin:30px 0 20px 0; font-size:16px;}
section .feature{width:100%;float:left; margin: -10px 0 0 0;}
section .feature ol{margin:0 0 0 0;}
section .feature ol li{ width:100%; float:left; position:relative; line-height:32px; }
section .feature ol li:before{ width:6px; height:6px; background:var(--color2); border-radius:2px; position:absolute; top:9px; left:0;}
section .feature ol li .syntax-code{width:initial!important; margin:initial!important; display:inline-block!important; float:initial!important; padding: 0px 0px!important}
section .feature ol li .syntax-code span.enlighter{padding: 0 5px; line-height:21px; height:20px;}
section .feature ol li value{background:var(--gray); color:#d44950;font-size: 14px; padding: 0px 5px; line-height:21px; height:20px; display:inline-block; font-family: "Source Code Pro","Liberation Mono","Courier New",Courier,monospace; border-radius:5px; }
section .feature ol li a{text-decoration:none; color:var(--color2); transition:.3s;}
section .feature ol li a:hover{text-decoration:underline}
section .feature ol ul{margin:0; padding:0; list-style:none; display:block;}
section .feature ol ul li{width:100%; float:left; padding-left:25px;}
section .feature ol ul li:before{content:''; width:6px; height:6px; background:var(--color2); border-radius:2px; position:absolute; top:10px; left:0;}




@media (min-width: 992px){
    section{margin-bottom:50px;}
    section.half{width:calc(100% - 375px - 50px);}
    section .col-left{display:block; position:relative; float:left; width:calc(100% - 375px - 50px);}
    section .col-right{display:block; float:right; text-align:right;}

}

.loadSrc-ui{}
.loadSrc-ui .title{width:100%; float:left; font-weight:500; text-transform:uppercase; font-size:13px; letter-spacing:1px; opacity:.7; margin-bottom:15px;}
.loadSrc-ui  .syntax-code{width:100%;}

.groupTitle-ui{}
.groupTitle-ui .title-group{width:100%; float:left; position:relative; min-height:48px; padding-left:48px; margin-bottom:25px;}
.groupTitle-ui .title-group:before{content:''; width:100%; height:1px; background:var(--line); rotation-point:bottom; position:absolute; top:50%; left:0; z-index:1; display:block;}
.groupTitle-ui .title-group span{text-transform:uppercase; line-height:49px; letter-spacing:1px; font-weight:500; display:block; float:left; padding:0px 30px 0 30px; background:#fff; position:relative; z-index:2;}
.groupTitle-ui .title-group .icon{width:48px; height:48px; color:var(--color2); box-shadow: 0 0 0 1px var(--line), 0 0 10px 2px rgba(0,0,0,.05); border-radius:4px; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; z-index:2; background:#fff; }
.groupTitle-ui .note{width:100%; float:left; position:relative; padding: 20px 20px 20px 25px; background:#ebf3ed; box-shadow: inset 3px 0 var(--color1); border-radius:0 5px 5px 0; overflow:hidden; font-style:italic }

/***********************************************************/
/*                           Left                          */
/***********************************************************/
@media (min-width: 992px){
    .paneLeft{width:280px; height:100%; padding: 70px 0 0 0; position:fixed; top:0; background: #f8fbfe }
    .paneLeft:before{content:''; width:500px; height:100%; background: #f8fbfe; position:absolute; top:0; right:100%;  }
    .paneLeft:after{content:''; width:80px; height:100%; position:absolute; top:0; right:0; background-image: linear-gradient(to right, rgba(0,0,0,0) , rgba(0,0,0,1)); opacity:.04; z-index:1; }
    .paneLeft .head-pane{width:100%; height:70px; padding: 0 40px 0 20px; position:absolute; left:0; top:0; z-index:2; display:flex; align-items:center;}
    .paneLeft .head-pane .logo{position:relative; float:left;}
    .paneLeft .head-pane .logo span{position:absolute; left:100%; bottom:0px; margin-left:15px; height:20px; line-height:21px; color:var(--color2); font-weight:bold; padding: 0 8px; float:left; font-size:12px; letter-spacing:1px;}
    .paneLeft .head-pane .logo span:before{content:''; width:100%; height:100%; background:var(--color2); position:absolute; top:0; left:0; z-index:-1; opacity:.15; border-radius:3px; }
    .paneLeft .head-pane .logo svg{height:40px;}
    .paneLeft .body-pane{width:100%; height:100%; position:relative; padding: 30px 40px 30px 20px; overflow-y:auto;}
    .paneLeft .body-pane ul.menu{width:100%; margin:0; padding:0; list-style:none;}
    .paneLeft .body-pane ul.menu li{width:100%; float:left; position:relative; margin-top:22px;}
    .paneLeft .body-pane ul.menu li a.nav{display:block; color:#0b2542; font-size:15px; font-weight:normal; padding-left:35px; text-decoration:none; transition:.3s; }
    .paneLeft .body-pane ul.menu li a.nav svg{position:absolute; left:0; position:absolute; top:2px; }
    .paneLeft .body-pane ul.menu li a.nav i{position:absolute; left:0; position:absolute; top:2px; font-size:16px; color:#0b2542; transition:.3s; }
    .paneLeft .body-pane ul.menu li a.nav:hover,
    .paneLeft .body-pane ul.menu li a.nav:hover i{color:var(--color2)}
    .paneLeft .body-pane ul.menu li a.nav:hover i:before{font-weight:900}
    .paneLeft .body-pane ul.menu ul{margin:0; padding:0 0 0 35px; list-style:none; width:100%; float:left;}
    .paneLeft .body-pane ul.menu ul li{width:100%; float:left; position:relative; margin:0; padding:0; margin-top:15px;}
    .paneLeft .body-pane ul.menu ul li a{text-decoration:none;  color:#0b2542; font-size:15px; opacity:.6; transition:.3s;}
    .paneLeft .body-pane ul.menu ul li a:hover{opacity:1; color:var(--color2)}
}

/***********************************************************/
/*                           UI                            */
/***********************************************************/



.mobile-device{width:375px; height:750px; display:inline-block; border-radius:50px; box-shadow:inset 0 0 0 2px #bedbf7, inset 0 0 0 10px #29282d, 0 0 0 1px rgba(0,0,0,.1); position:relative; padding:8px;}
.mobile-device .item{}
.mobile-device .item .bunnyAar{width:160px; margin-left:-80px; height:35px; background:#29282d; position:absolute; top:2px; left:50%; border-radius:0 0  20px 20px; z-index:5;}
.mobile-device .item .bunnyAar:before{content:''; width: 38px; height:5px; margin-top:-2px; border-radius:3px;  position:absolute; left:50px; top:50%; background:#fff; }
.mobile-device .item .bunnyAar:after{content:''; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:#fff; right:50px; position:absolute; top:50%; box-shadow: 0 0 0 3px rgba(255,255,255,.15)}
.mobile-device .item .telecom{ width:calc(50% - 90px); position:absolute; left:10px; top:20px; text-align:center; font-weight:500; font-size:12px; padding-left:15px; z-index:5; }
.mobile-device .item .icon{ width:calc(50% - 90px); position:absolute; right:10px; top:20px; text-align:center; padding-left:5px; z-index:5; display:block; display:flex;}
.mobile-device .item .icon i{font-size:12px; margin: 0 3px; float:left;}
.mobile-device .item .icon svg{height:21px; margin: -5px 3px 0 3px; float:left;} 
.mobile-device .item .btn-left{position:absolute; top:80px; right:100%;}
.mobile-device .item .btn-left span{width:3px; height:50px; background:#bedbf7; display:block; border-radius:1px 0 0 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); margin: 20px 0}
.mobile-device .item .btn-left span:first-child{width:2px; height:25px;}
.mobile-device .item .btn-right{width:3px; position:absolute; top:150px; left:100%; height:70px; background:#bedbf7; display:block; border-radius:0 1px 1px 0; box-shadow: 0 0 0 1px rgba(0,0,0,.2); margin: 20px 0; }
.mobile-device iframe{width:calc(100% - 20px); height:calc(100% - 55px); background:#fff; border:none; border-radius:0px 0px 42px 42px; position:absolute; bottom: 10px; left:10px; }