// .panel-default {
//   border-radius: 0;
// }
@blue: #3174ad;

body {
  font-size: 16px;
  margin:0;
}

h4 {
  margin-top: 20px;
}

.jumbotron {
  background-color: @blue;
  color: white;

  a {
    font-size: 85%;
    color: darken(white, 10%);
  }
}

.contain {
  background-color: white;
  border-radius: 3px;
  padding: 20px;
  max-width: 900px;
  margin: auto;
}

.docs {
  background-color: @blue;
  margin-top: 20px;
  padding: 30px;
}

.examples {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.example {
  font-size: 14px;
  max-width: 1200px;
  width: 100%;
  margin: auto;
  flex: 1;

  &,
  & > * {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .demo,
  .rbc-calendar {
    flex: 1;
    min-height: 580px;
  }
}


.section {
  margin-bottom: 20px;
}

aside {
  margin-bottom: 40px;
}

h3 > a > code,
h4 > a > code  {
  color: @blue;
  background: none;
  padding: 0;
}

.view-source {
  font-size: 90%;
  float: right;
  margin-bottom: 15px;
  margin-left: auto;
}

.callout {
  border-left: 4px solid @blue;
  padding: 10px;
  color: darken(@blue, 10%);
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 0;
}

pre {
  border-radius: 0;
  border: none;
  border-left: 4px solid #ccc;
}

pre.shape-prop {
  border: none;
}

code {
  color: #555;
  background-color: rgba(0,0,0,0.04);
}

.playgroundStage,
.cm-s-neo.CodeMirror {
  background-color: #F4F4F4;
  height: auto;
  min-height: 75px;
}

.CodeMirror {
  font-size: 12px;

}

.cm-s-neo div.CodeMirror-cursor {
  border-left: 1px solid #9b9da2;
}

.cm-s-neo .CodeMirror-linenumber {
  color: #ccc;
}

.cm-s-neo .cm-atom,
.cm-s-neo .cm-number {
  color: #905;
}


.prop-table {
  font-size: 14 px;
}

.playgroundStage {
  padding: 15px 0 15px 15px;
  //border-bottom: 1px solid #ddd;
}

.playground.collapsableCode .playgroundCode {
  height: 0;
  overflow: hidden;
}

.playground.collapsableCode .playgroundCode.expandedCode {
  height: auto;
}



.playgroundPreview {
  position: relative;
  padding: 40px 15px 15px 15px;
}



.playgroundPreview:before {
  position: absolute;
  top: 3px;
  left: 7px;
  color: #959595;
  border-bottom: 1px solid  #eee;
  padding: 0 3px;
  content: 'Result';
}


.playground  {
  position: relative;
  margin:  0;
  margin-bottom: 20px;
  border-top: 1px solid #ccc;
}

.playgroundCode,
.playgroundPreview {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.playgroundToggleCodeBar {
  padding: 1px;
  border-top: 1px solid #ccc;
}

.playgroundToggleCodeLink {
  color: #333;
  background-color: #ccc;
  margin-top: 1px;
  margin-left: -1px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding: 3px 5px;

  &:hover,
  &:focus {
    color: black;
  }
}


.playgroundStage {

}

.anchor,
.anchor:hover,
.anchor:active,
.anchor:focus {
  color: black;
  text-decoration: none;
  position: relative;
}
.anchor-icon {
  font-size: 90%;
  padding-top: 0.1em;
  position: absolute;
  left: -0.8em;
  opacity: 0;
}

h1:hover .anchor-icon,
h1 a:focus .anchor-icon,
h2:hover .anchor-icon,
h2 a:focus .anchor-icon,
h3:hover .anchor-icon,
h3 a:focus .anchor-icon,
h4:hover .anchor-icon,
h4 a:focus .anchor-icon {
  opacity: 0.5;
}