html,body,#root {
  margin: 0;
  padding: 0px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;

  * {
    box-sizing: border-box;
  }

}

.examples-container {
  $body-background-color: #F7FAFD;
  height: 100%;
  font-size: 12px;
  font-family: arial,tahoma;
  display: flex;
  flex-direction: column;
  background-color: #ebf5fa;

  .title {
    height: 35px;
    width: 100%;
    display: block;
    font-family: tahoma,arial;
    font-size: 22px;
    padding-top: 3px;
    color: #f2f2f2;
    text-align: center;
    background-color: #1565C0;
    box-shadow: 0px 5px 5px silver;
    background-color: #2e7bcf;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAKjAgMAAAA2YSoMAAAACVBMVEUiY4EcUWkfWnUfaU3JAAAAVElEQVRo3u3MoREAIAwEwS+NJugn9VAlPoPAxO3JE5vTq/ytR7u3gsfj8Xg8Ho/H4/F4PB6Px+PxeDwej8fj8Xg8Ho/H4/F4PB6Px+PxeDwejx/iL0yFw5He4oh8AAAAAElFTkSuQmCC");
  }

  .menu-and-body {
    justify-content: space-around;
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 15px;

    .menu {
      $border-color: darken(#f2f2f2, 4%);
      width: 300px;
      min-width: 300px;
      color: #006064;
      display: block;
      padding: 4px;
      cursor: default;
      overflow-y: auto;

      &::-webkit-scrollbar-track {
      	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      	background-color: #d9d9d9;
      }

      &::-webkit-scrollbar {
      	width: 6px;
      	background-color: #a6a6a6;
      }

      &::-webkit-scrollbar-thumb {
      	background-color: #a6a6a6;
      }

      .menu-item {
        $padding-menu-item: 4px 0px;
        padding: $padding-menu-item;
        color: #4d4d4d;
        //margin-bottom: -1px;
        z-index: 9999;
        //color: #3F51B5;

        &.child {
          padding: 0px;
          padding-left: 25px;
          cursor: pointer;
        }

        a {
          padding: $padding-menu-item;
          text-decoration: none;
          width: 100%;
          display: block;
          color: inherit;

          &.active {
            //border-bottom: solid 1px #F50057;
            border-bottom: solid 1px #0b7ada;
            padding-bottom: calc(#{$padding-menu-item} + 1px);
            //color: #C51162;
            color: #0b7ada;
          }

          &:hover {
            //background-color: $body-background-color;
            color: #FF4081;
            //color: #1a1aff;
          }

        }

      }

    }

    .body-container {
      display: inline-flex;
      justify-content: space-around;
      flex: 1;

    }

  }

}