.k-window-content,
div.editor-window.k-window {
    padding: 0;
    border-radius: 0;
}
.k-window-content {
  font-size: 13px;
}
div.liveedit {
    width: 100%;
    text-align: left;
    background: #0f192a;
}
.CodeMirror {
  height: 100%
}

.browser {
    font: 12px Helvetica, Arial, sans-serif;
    position: relative;
    margin: 35px 0 35px 70px;
    max-width: 850px;
    min-height: 500px;
    height: 100%;
    min-width: 360px;
}
.browser:before {
  content: url("//d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/hint.png");
  display: block;
  position: absolute;
  top: 40px;
  right: -180px;
  width: 137px;
  height: 124px;
  opacity: 0;
  transform:  scale(.5);
  transition: all .35s cubic-bezier(0.175, 0.885, 0.380, 1.430) 1.3s;
}
.is-active .browser:before {
  opacity: 1;
  transform:  scale(1);
}

.is-drag-started .browser:before {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility 0s linear .35s;
}

.oldie .browser:before {
  content: "";
  background: url("//d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/hint.png") 0 0 no-repeat;
}

.Section-banner--l.Section--black {
  background-color: #0a3c5d;
}
.NavAlt2Tabs-item1 .browser {font-size: 14px;}

.window-code {
  position: absolute;
  left:0;
  top:0;
}

.k-window,
.k-window-titlebar,
.k-window-content,
.liveedit,
.k-edit-buttons {
  background: #0f192a;
  color: #FFF;
  border-color: #0f192a;
  border-radius: 0;
}
.k-window {
  opacity: 0;
}
.is-loaded .k-window {
  opacity: 1;
}
.k-window-titlebar {
  padding: 0;
  height: 40px;
}
div.k-window-content {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.k-window-title {
  right: 15px !important;
  left: 0 !important;
  top: 0;
  padding: 0 0 0 15px;
  border-bottom: 1px solid #333B4A;
  z-index: 1;
  font: 700 14px/40px Arial,Helvetica,sans-serif;
  background: url("http://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/drag.png?rev=1") 100% 50% no-repeat;
  cursor: move;
}


/* Grid Styles */
#grid {
  font-size:  13px;
}
.customer-photo {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: 40px 44px;
    background-position: center center;
    vertical-align: middle;
    line-height: 41px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
}
.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 41px;
    padding-left: 10px;
}



/* Chart Styles */

#chart {
    height: 386px;
}

.NavAlt2Tabs-item2 .browser {
    border: 1px solid #ccc;
    min-height: 485px;
}

#playButton-charts {
    display: block;
    margin-left: 30px;
    width: 150px;
    height: 36px;
}
#playButton-charts:focus, #playButton-charts.k-state-focused {
    border: 0;
    background: #fff;
}
#playButton-charts:active:hover, #playButton-charts.k-state-active:hover,
#playButton-charts:focus:hover, #playButton-charts.k-state-focused:hover {
    background: #8ebc00;
    color: #fff;
}
#playButton-charts:focus:active:not(.k-state-disabled):not([disabled]) {
box-shadow: 0 0 0 1px #8ebc00 inset;
}
.chart-wrapper {
    margin: 20px;
}

/* Scheduler styles */
.k-scheduler-edit-form {
  background: #33363C;
}

/*Code Editor Styles */

/*<!--match-->*/
.cm-s-default span.CodeMirror-matchhighlight { background: #494949; }
.cm-s-default.CodeMirror-focused span.CodeMirror-matchhighlight { background: #314D67 !important; }

/*<!--activeline-->*/
.cm-s-default .CodeMirror-activeline-background {background: #253540 !important;}

.cm-s-default.CodeMirror {
    background: #0F192A;
    color: #cfd1d4;
}

.cm-s-default.CodeMirror {border: 0; border-radius: 0;}

.cm-s-default div.CodeMirror-selected {background: #314D67 !important;}
.cm-s-default .CodeMirror-gutters {background: #0F192A; border-right: 1px solid #333b4a;}
.cm-s-default .CodeMirror-guttermarker { color: white; }
.cm-s-default .CodeMirror-guttermarker-subtle { color: #575e6a; }
.cm-s-default .CodeMirror-linenumber {color: #575e6a;}
.cm-s-default .CodeMirror-cursor {
    border-left: 1px solid #F8F8F0 !important;
}

.cm-s-default span.cm-comment {color: #93979f;}
.cm-s-default span.cm-atom {color: #AE81FF;}
.cm-s-default span.cm-number {color: #cfd1d4;}

.cm-s-default span.cm-property, .cm-s-default span.cm-attribute {color: #87e11d;}
.cm-s-default span.cm-keyword {color: #E83737;}
.cm-s-default span.cm-string {color: #09bff3;}

.cm-s-default span.cm-variable {color: #FFAA3E;}
.cm-s-default span.cm-variable-2 {color: #FFAA3E;}
.cm-s-default span.cm-def {color: #4DD;}
.cm-s-default span.cm-bracket {color: #cfd1d4;}
.cm-s-default span.cm-tag {color: #449;}
.cm-s-default span.cm-link {color: #AE81FF;}
.cm-s-default span.cm-error {background: #F92672; color: #F8F8F0;}

.cm-s-default .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.js-kendoList {
  position: relative;
}


/* Kendo page specifics */
.Section-banner--l {
  height: 810px !important;
}
.NavAlt2Tabs-item .List--links-1 a {font-weight: 400}

.sfPageEditor .NavAlt2Tabs-item {
  opacity: 1;
  visibility:visible;
  position:static;
}
.sfPageEditor .NavAlt2Tabs--kendo {
  overflow: visible;
   height: auto;
}

.Btn.Btn--prim2, .Btn.Btn--sec2  {box-shadow:none}

.Section-banner2 {
  padding-top: 94px !important;
}
.PageWrapper .Nav {
  height: 50px;
  min-height: 50px;
  border-bottom: 0 !important;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}

.PageWrapper .Nav .Btn {
   padding-top: 8px;
   padding-bottom: 8px;
}

.PageWrapper .Nav-container {
  height: 50px;
}
.Nav-title {transition: color .2s;}
.Nav-title:hover {
  cursor:pointer;
  color:#666;
}

@media only screen and (max-width: 1200px) {
  .browser:before {
    display: none;
  }
}

@media only screen and (max-width: 1010px) and (min-width: 860px) {
  .Nav.Nav.is-fixed {
    position: fixed;
    margin-top: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .mob-auto p {padding-right: 0 !important; }
  .mob-auto {width: auto !important; padding: 0 !important;}
}
@media only screen and (max-width: 980px) {
  .NavAlt2Tabs-item .Title.Title--l + p {
    display: none;
  }
  .k-window {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .browser {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
  .browser:before {
    display: none;
  }
}

@media only screen and (max-width: 960px) {
  .Section-banner.Section-banner--l {
    background: #185373 !important;
    height: auto !important
  }
  .hgroup.hgroup--banner-v2 h1 {
    font-size: 50px !important;
  }
  .hgroup--banner-v2 br,
  .Section-banner--l.Section--black .Section-background
  {
    display:none
  }
  .col-8.col--offset-2 {
    width: 100%;
    margin-left: 0;
  }
  .NavAlt2Tabs-item4 {
    padding-top: 40px;
  }
  .u-mob-hide,
  .NavAlt2Tabs-item4,
  .NavAlt2.Justify .Justify-item.u-mob-hide {
    display: none !important;
  }
  .get-started {
    text-align: center;
  }
  .get-started .col-7,
  .get-started .col-5 {
    width: 75% !important;
    padding: 30px 0;
  }
  .js-kendoListImg {
    min-height: 280px;
  }
  .mob-space .col-4 {
    width: 100% !important;
  }
  .mob-space .col-4  {
    margin-bottom: 50px !important;
  }
  .mob-space .col-4 {
    border-bottom: 1px solid #E4E4E4;
    padding-bottom: 50px;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.1);
  }
  .mob-space .col-4 p:last-child {
    margin-bottom: 0;
  }

  .NavAlt2Tabs-item {
    position: absolute !important;
    left: -99999px !important;
    -webkit-transform: inherit !important;
    transform: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .NavAlt2Tabs-item.is-active {
    position: relative !important;
    left: 0 !important;
  }
  .NavAlt2Tabs--kendo {
    height: auto !important;
    max-width: 100%;
  }
}

@media only screen and (max-width: 680px) {
  .NavAlt2.Justify .Justify-item {padding: 0 4.4% !important;}
  .Section-banner--l.Section--black {
    height: auto !important;
  }
  .hgroup--banner-v2 {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 590px) {
  .u-mob-np.u-mob-np {padding: 0 !important}
  .u-mob-nm.u-mob-nm {margin: 0 !important}
  .mob-auto.col-9 {padding: 20px 5% 0 !important; text-align: center;}
  .Section .u-mob-pt2 {padding-top: 20px !important}

  .mob-angular {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 40px;
    padding-top: 40px;
    margin-bottom: 10px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .get-started {
    text-align: left;
  }
  .get-started .col-7,
  .get-started .col-5 {
    width: 100% !important;
  }
  .get-started .col-5 {
    padding: 40px 5% 0;
  }
  .get-started .col-7 {
    padding: 0 5%;
  }

  .NavAlt2 {
    margin: 0 -5%!important;
  }
  .hgroup.hgroup--banner-v2 h1 {
    font-size: 40px !important;
  }
  .hgroup.hgroup--banner-v2 h3 {
    font-size: 30px !important;
  }
  .Section-banner--l.Section--black {
    padding-top: 30px;
    padding-bottom: 40px;
  }
  .banner-cta {font-size: 0;  }
  .banner-cta .Btn {
    margin-left:0 !important;
    width:80%;
  }
  .banner-cta .Btn:first-child {
    border: 1px solid #e84c3d;
    margin-bottom: 10px;
  }
  .Section-banner2 {
    padding-top: 54px !important;
    background: #2d304a none !important;
  }
  .Section-banner2 .Section-background {
    display:none
  }
  .NavAlt2Tabs-item .Title.Title--l {
    font-size: 24px;
    margin-top: 20px;
  }
  #playButton-charts {margin: auto}
  ol.Ordered2 li.u-mb9,
  ol.Ordered2 li.u-mb8,

  .Section.mob-demos {
    padding-top: 30px !important;
  }
  .js-kendoListImg {
    min-height: 350px;
  }
  .sfimageWrp.u-tar {
    text-align: center !important;
  }
}

@media only screen and (max-width: 440px) {
  .js-kendoListImg {
    min-height: 230px
  }
  .browser {
      min-height: 490px !important;
  }
  .k-button-group {
    white-space: normal !important;
  }
  .k-editor-widget {
    height: auto !important;
  }
  .browser {
    min-width: 1px;
  }
}

@media only screen and (max-height: 800px) {
  .hgroup--banner-v2.u-pt5 {
    padding-top: 20px !important;
  }
  .hgroup--banner-v2 h1 {
    font-size: 60px !important;
    margin-bottom: 20px;
  }
}
@media only screen and (max-height: 730px) {
  .hgroup--banner-v2.u-pt5 {
    padding-top: 0 !important;
  }
  .hgroup--banner-v2 h1 {
    font-size: 55px !important;
    margin-bottom: 15px;
  }
  .hgroup--banner-v2 h1 + p {
    margin-bottom: 0 !important;
  }
}
@media only screen and (max-width: 400px) {
  .hgroup--banner-v2 h1 {
    font-size: 40px !important;
  }
}