div.map-wrapper {
  position: relative;
  overflow: hidden;
}

div.side-component {
  z-index: 8;
  height: 100%;
  position: absolute;
  right: -(100% / 2.5);
  width: (100% / 2.5);
  transition: all 0.4s cubic-bezier(0.19, 0.9, 0.46, 0.99);

  &.open {
    right: 0;

    .shadow {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
    }
  }

  * {
    box-sizing: border-box;
  }

  div.side-tabs {
    position: absolute;
    left: -50px;
    width: 50px;

    ul {
      margin: 0px;

      > li.tab {
        margin: 10px 0;

        > a {
          background-color: white;
          color: #53A1FF;
          padding: 10px;
          border-radius: 8px 0 0 8px;
          text-align: center;
          display: flex;
          transition: all 0.3s ease-in-out;
          box-shadow: 0px 0px 10px #888;

          &:hover, &:focus {
            background-color: #53A1FF;
            color: white;
          }
        }
      }
    }
  }

  div.side-content {
    position: relative;
    height: 100%;

    > div {
      display: none;

      &.close {
        display: block;
        position: absolute;
        right: 15px;
        top: 20px;
        cursor: pointer;

        > i {
          font-size: 28px;
          color: #fe0000;
        }
      }

      &.active {
        display: block;
        background-color: white;
        width: 100%;
        height: 100%;
        padding: 10px;
        padding-top: 35px;
        overflow-y: auto;
      }
    }
  }
}

div.side-component-content.open {
  width: 58%;
}