.kd-example-runner{margin-bottom:24px;min-height:500px;border:1px solid #dedede;position:relative}.kd-example-runner .tabstrip-pane,body .k-popup{font:400 14px Arial,Helvetica,sans-serif;box-sizing:initial}.tabstrip{position:relative;display:flex;flex-shrink:0;align-items:center;background-color:#EFEFEF;border-bottom:1px solid #dedede}.tabstrip-items{margin:0;padding:0;width:100%;list-style:none;position:relative;display:inline-flex;flex-direction:row;flex-wrap:wrap;flex:0 0 auto;align-items:stretch}.tabstrip-item{display:flex;flex:0 0 auto;align-items:center;cursor:pointer;position:relative}.tabstrip-item:not(.active):hover .tabstrip-link,.tabstrip-item:not(.active):not(.dropdown):hover .icon svg{color:#555;fill:#555}.tabstrip-link::before,.type-chooser .theme-type::before{content:"";height:3px;background:#3D57D8;display:none;position:absolute;bottom:-1px;left:0;right:0}.tabstrip-item.active:not(.dropdown) .tabstrip-link::before,.type-chooser .theme-type.active::before{display:block}.tabstrip-link{padding:14px 20px;font:500 14px/20px Metric,Arial,sans-serif}.tabstrip-link .icon{position:absolute;right:5px}.tabstrip-link .icon svg{width:10px;height:10px}.tabstrip .spacer{display:flex;flex:1 1 auto}.tabstrip .separator{width:0;height:30px;border-right:1px solid #dedede;margin:10px 0}.tabstrip-pane{padding:18px 14px;display:none}.tabstrip-pane.active{display:block;position:relative}.tabstrip-pane.example-code-container{padding:0}.tabstrip-container.source-code .tabstrip-pane{overflow-x:auto}.tabstrip-container.source-code .tabstrip-items{padding:10px 14px;display:flex;flex:1;background:#fff}.tabstrip-container.source-code .tabstrip{background-color:#fff}.tabstrip-container.source-code .tabstrip>.kd-button{margin:0 14px}.tabstrip-container.source-code .tabstrip-item{padding:5px 12px;color:#656565}.tabstrip-container.source-code .tabstrip-item:hover{background-color:#e6e6e6}.tabstrip-container.source-code .tabstrip-link{padding:0;font-weight:400;font-size:14px}.tabstrip-container.source-code .tabstrip-item.active{background-color:#e6e6e6;color:#3D57D8}.tabstrip-container.source-code .tabstrip-item.active .tabstrip-link::before{display:none}.tabstrip-item .dropdown{min-width:230px;position:absolute;left:0;right:0;white-space:nowrap;background-color:#fff;z-index:10003;box-shadow:0 3px 6px rgba(0,0,0,.16);display:none}.tabstrip-item .dropdown.active{display:block}.tabstrip-item .dropdown ul{list-style-type:none;cursor:pointer}.tabstrip-item .dropdown ul li{padding:5px 0;display:flex;justify-content:flex-start;align-items:center}.tabstrip-item .dropdown .kd-list .theme-builder:hover,.tabstrip-item .dropdown ul li:hover{background-color:#F3F3F3}.tabstrip-item .dropdown .kd-list .theme-builder{padding:9px 8px;background-color:#F3F3F3;border-top:1px solid #e6e6e6}.tabstrip-item .dropdown .theme-builder .icon{margin:0 18px 0 10.5px;width:32px;height:32px;background:url(../images/site/palette.png)}.tabstrip-item .dropdown .theme-builder .kd-link{font-weight:700;font-size:16px}.tabstrip-item .dropdown .kd-list li span:nth-child(2){vertical-align:middle;font-weight:400;font-size:16px;line-height:20px;white-space:normal}.tabstrip-item .dropdown .icon{margin-right:16px;width:20px;height:20px}.tabstrip-item .tb-edit-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#000}.tabstrip-item .tb-edit-button .icon svg{width:20px;height:20px}.tabstrip-item .tb-edit-button .icon{position:static;right:auto;display:inline-flex;margin-left:5px}.tabstrip-item .try-kendo{padding:14px 10px}.tabstrip-item .dropdown .try-kendo .icon{width:32px;height:32px;margin-right:10px;background:url(../images/site/kendoka-small.svg)}.tabstrip-item .edit-dropdown .dropdown{width:13.5rem;top:50px}.tabstrip-item .edit-dropdown{display:flex}.tabstrip-item .edit-dropdown .dropdown .kd-list .theme-builder,.tabstrip-item .edit-dropdown .dropdown .kd-list li{padding:9px 12px;color:#3D57D8}.tabstrip-item .edit-dropdown.active{background-color:#e6e6e6}.tabstrip-item .edit-dropdown.active .icon svg,.tabstrip-item .edit-dropdown.active .tabstrip-link{color:#3D57D8;fill:#3D57D8}.tabstrip-item .edit-dropdown .kd-list .theme-builder{background-color:#fff}.tabstrip-item .edit-dropdown .theme-builder .icon{margin:0 10px 0 0}.tabstrip-item .edit-dropdown .kd-list li span:nth-child(2){font-weight:700}@media (max-width:768px){.tabstrip-item .theme-chooser-dropdown{min-width:160px}.tabstrip-item .theme-chooser-dropdown .icon{display:none}}.kd-example-flavors{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap}.kd-example-flavors ul{list-style:none;display:inline-flex}.kd-example-flavors ul li{margin-right:24px}.kd-example-flavors ul li a{font-weight:500}.kd-example-flavors ul li:last-child{margin-right:0}.kd-example-flavors>p{margin-right:15px;margin-bottom:0}@media (max-width:768px){.kd-example-flavors{justify-content:flex-start}.kd-example-flavors .kd-list{flex-wrap:wrap}.kd-example-flavors .kd-spacer{flex:1 1 100%;margin-top:16px}}.theme-chooser-label{margin:0 10px 0 0;font-size:15px}.theme-chooser-wrapper{margin-right:7px;width:13rem;height:36px;position:relative;background-color:#fff;outline:0;box-shadow:0 1px 1px rgba(0,0,0,.1);border-radius:2px}.theme-chooser-toggle-btn{display:flex;height:36px;align-items:center;justify-content:center;border-bottom:1px solid #ebebeb;cursor:pointer}.theme-chooser-toggle-btn .icon{margin:0 16px 0 12px;width:20px;height:20px;display:inline-flex}.theme-chooser-wrapper:hover{box-shadow:0 3px 6px rgba(0,0,0,.16)}.theme-chooser-wrapper .color-box{margin-left:3px;width:10px;height:10px;border-radius:50%;box-shadow:0 1px 1px 1px rgba(0,0,0,.25)}.theme-chooser-wrapper .theme-colors{display:inline-flex;margin:0 16px 0 13px}.theme-chooser-wrapper .type-chooser{display:flex;position:relative;border-bottom:1px solid #e6e6e6}.theme-chooser-wrapper .type-chooser .theme-type{padding:14px 20px;flex:1;position:relative;text-align:center;font-weight:500;font-size:14px;color:#000}.theme-chooser-wrapper .type-chooser .theme-type:not(.active):hover{color:#555}@media (max-width:768px){.theme-chooser-label{display:none}.theme-chooser-wrapper{width:auto}}pre.prettyprint{font-family:"Ubuntu Mono",Consolas,Monaco,monospace;font-size:14px}.prettyprint .nocode{background-color:transparent;color:#000}.prettyprint .atv,.prettyprint .str{color:#2db245}.prettyprint .kwd{color:#f39}.prettyprint .com{color:#93c}.prettyprint .typ{color:#000}.prettyprint .lit{color:#09f}.prettyprint .pun{color:#333}.prettyprint .pln{color:#3e526b}.prettyprint .tag{color:#3e526b;padding:0;margin:auto;display:initial;font-weight:inherit;font-size:inherit;line-height:inherit;border-radius:inherit}.prettyprint .atn{color:#3e526b}.prettyprint .dec{color:#3e526b}#demo-runner .box{margin:4.5em 7.5em;padding:3em;background-color:rgba(20,53,80,.038);border:1px solid rgba(20,53,80,.05)}#demo-runner .demo-section{margin:0 auto;padding:3em;border:1px solid rgba(20,53,80,.14)}#demo-runner .auto{display:inline-block}#demo-runner .box:not(.wide):not(.auto),#demo-runner .demo-section:not(.wide):not(.auto){max-width:600px}#demo-runner .box:after,#demo-runner .demo-section:after{content:"";display:block;clear:both;height:0}#demo-runner .box{margin:4.5em auto}#demo-runner .box:first-child{margin-top:0}#demo-runner .center{text-align:center}#demo-runner.demo-section.editor{max-width:100%;border:none}.kd-example-console{margin-top:-24px;margin-bottom:24px;border-width:0 1px 1px 1px;border-style:solid;border-color:#DEDEDE;border-radius:0 0 2px 2px}.kd-example-console .console{padding:17px 10px 0;height:234px;overflow-x:hidden;overflow-y:auto;background-color:#f3f3f3}.kd-example-console .console>div{padding:5px 12px;border-bottom:3px solid #f3f3f3}.kd-example-console .header{padding:5px 12px;background-color:#fff;display:flex;justify-content:flex-start;position:relative}.kd-example-console .header span{font-weight:500;font-size:14px;line-height:21px}.kd-example-console .header .title{flex:0 1 auto;width:90px;position:absolute;left:50%;transform:translateX(-50%);letter-spacing:.35px;color:#3D57D8}.kd-example-console .header .clear{flex:0 1 auto;width:50px;margin-left:auto;font-weight:400;cursor:pointer}.kd-example-console .count{background-color:#26c6da;border-radius:15px;color:#fff;font-size:10px;margin-left:5px;padding:2px 6px 2px 5px}.kd-example-runner .configurator{margin:-18px -14px 18px -14px;display:flex;flex-wrap:wrap;background:#EFEFEF;box-shadow:0 1px 0 rgba(0,0,0,.16)}.kd-example-runner .configurator .header{padding:5px 12px;border-bottom:1px solid #DEDEDE;box-sizing:border-box;background-color:#fff;display:flex;flex:0 0 100%;justify-content:center;position:relative;font:500 16px/24px Metric;letter-spacing:.35px;text-transform:uppercase;color:#3D57D8}.kd-example-runner .configurator .box-col{padding:16px 0 16px 16px;background-color:#EFEFEF}.kd-example-runner .configurator ul{list-style:none;margin:0;padding:0}.kd-example-runner .configurator ul li{margin-bottom:16px}.kd-example-runner .configurator ul li:last-child{margin-bottom:0}.kd-example-runner .configurator h4{margin:0 0 10px 0;text-align:left;font-size:12px;font-weight:400;line-height:16px;text-transform:uppercase;letter-spacing:.12px;color:#454545}.kd-example-runner .configurator input:not(.k-input){padding:6.5px 8px;width:auto;background:#fff;border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0,0,0,.08);color:#656565;background-color:#fff;outline:0}.kd-example-runner .configurator input:not(.k-input):focus,.kd-example-runner .configurator input:not(.k-input):hover{border-color:rgba(0,0,0,.15)}.kd-example-runner .configurator button:not(.k-button){min-width:90px;padding:6.5px 8px;border-width:1px;border-style:solid;border-color:rgba(0,0,0,.08);border-radius:2px;color:#656565;background-color:#f6f6f6;background-image:linear-gradient(#f6f6f6,#f1f1f1);cursor:pointer}.kd-example-runner .configurator button:not(.k-button):hover{border-color:rgba(0,0,0,.15);background-color:#ededed;background-image:linear-gradient(#ededed,#e8e8e8);outline:0}.kd-example-runner .configurator button:not(.k-button):focus{box-shadow:0 3px 4px 0 rgba(0,0,0,.06);outline:0}.kd-example-runner .configurator input[type=checkbox]:not(.k-checkbox){border-radius:2px;margin:0;padding:0;width:16px;height:16px;line-height:initial;box-sizing:border-box;display:inline-block;vertical-align:middle;position:relative}.kd-example-runner .configurator .checkbox-label{cursor:pointer}.kd-loader-wrap{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;z-index:15;height:100%;width:100%}.kd-loader{padding:32px 48px;border-radius:5px;position:absolute;top:50%;left:50%;margin-top:-46px;margin-left:-136px;display:flex;align-items:center;justify-content:center;font:500 19px/27px Metric,Arial,sans-serif;background-color:RGBA(0,0,0,.8);color:#fff}.kd-loader .icon{position:relative;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;margin-right:30px;z-index:5}.kd-loader .icon::before{content:"";position:absolute;width:200%;height:200%;top:-50%;left:-50%;z-index:-1;background-image:url(../images/site/rings.svg);background-repeat:no-repeat;background-size:cover;-webkit-animation:spin 1s ease-in-out infinite;animation:spin 1s ease-in-out infinite}.kd-loader .icon{animation-name:pulse;animation-duration:5s;transform-origin:70% 70%;animation-iteration-count:infinite;animation-timing-function:linear}.kd-loader .icon svg path{fill:#A2D7F1;stroke:#A2D7F1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1)}30%{transform:scale(1)}40%{transform:scale(1.1)}50%{transform:scale(1)}60%{transform:scale(1)}70%{transform:scale(1.1)}80%{transform:scale(1)}100%{transform:scale(1)}}.kd-example-runner .demo-button-wrapper{width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;z-index:23;background-color:#fff;background-image:url(../images/site/mobile-demo-bg.png);background-size:cover;background-repeat:no-repeat}.kd-example-runner .demo-button-wrapper button{padding:32px 48px;border-radius:5px;position:absolute;display:flex;justify-content:center;font:500 19px/27px Metric,Arial,sans-serif;background-color:RGBA(0,0,0,.8);color:#fff}.kd-example-runner .demo-button-wrapper .icon{margin-right:20px}.kd-example-runner .demo-button-wrapper .icon svg path{fill:#fff;stroke:#fff}.kd-example-runner .demo-button-wrapper .kd-img{height:100%}