#tabs {
  ion-side-menu {
    ion-item {
      color: $light;
      background-color: $royal;
    }
    .item-content {
      background-color: $royal;
    }
    .item {
      background-color: $royal;
      border: none;
    }
    .item:active {
      background-color: darken($royal, 10%);
    }
    .sub-list {
      padding-left: $item-padding * 1.5
    }
    ion-content.scroll-content {
      background-color: $royal;
    }
  }

  ion-side-menu-content {
    @include desktop {
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }
  }

// TODO: why?
  ion-nav-view[name="menuContent"] {
    // to avoid map glitch (make map alone on map somehow)
    background-color: rgba(0,0,0,0.01) !important;
    pointer-events: none !important;
  }

  .left-pane {
    @include desktop {
      display: block;
      position: relative;
      max-width: 500px;
      height: 100%;
      width: 100%;
    }
  }

  .touch-disabled {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2147483647; // maximum value to make sure everything is covered
    background: rgba(0,0,0,0.5);

    @include desktop {
      background: transparent;
      pointer-events: none;
    }
  }

  ui-gmap-google-map {
    height: 80%;
    width: 100%;
    display: block;
    position: absolute;
    @include  desktop {height: 100%; position: relative;}

    .angular-google-map,
    .angular-google-map-container {
      position: absolute;
      height: 100%;
      width: 100%;
    }
  }

  .left-menu-column {
    display: flex;
    flex-direction: column;

    a {
      color: white;
    }

    a.divider {
      margin-bottom: 20px;
    }

    .powered-by-beeline {
      margin-top: auto;

      .item{
        // Override the default item font-size
        font-size: $font-size-x-x-small !important;
      }

      .section{
        display: block;
        text-align: left;
        color: white;
        img{
          display: block;
          margin: $padding-small-vertical auto $padding-small-vertical 0px;
          width: 100px;
          height: auto;
        }
      }

      .powered-by {
        margin-top: $padding-large-vertical*2;
      }

      .built-by{
        margin-bottom: $padding-large-vertical*2;
        .developer-list {
          width: 80%;
          margin: $padding-small-vertical auto $padding-small-vertical 0px;
          line-height: normal;
        }
      }
    }
  }
}
