@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');

  .floor {
      display: block;
      position: static;
      top: 0px;
      left: 0px;
  }

  .room {
      display: block;
      width: 120px;
      height: 120px;
      background-color: blue;

  }

  .location-image {
      object-fit: cover;
      width: 100%;
      height: 100%;
  }


  .map {
      display: block;
      margin: 5% auto;
      width: 990px;


  }

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

  .map::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: #F5F5F5;
  }

  .map::-webkit-scrollbar-thumb {
      background-color: #681e52;

      background-image: -webkit-gradient(linear, 0 0, 0 100%,
          color-stop(.5, rgba(255, 255, 255, .2)),
          color-stop(.5, transparent), to(transparent));
  }

            
            .loc-name {
font-size: 8pt;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    margin: 0 auto;
    text-align: center;
    background-color: #3E2849;
    border-radius: 10px;
    padding: 3px 5px;
    box-sizing: border-box;
    margin-bottom: 3px;
    box-shadow: inset 0px 0px 10px -5px #fff, 0px 0px 5px -1px black;
                position: absolute;

            }

  @media only screen and (max-width: 770px) {


      .map {
          display: block;
          margin: 5% auto;
          max-width: 100%;
          width: 90%;
          height: 567px;
          overflow: scroll;
      }


      .modal {
          position: absolute;
          width: 100%;
          max-width: 100%;
          height: 100vh;
          display: block;
          top: 0;
          left: 0%;

      }


      .modal-inner {
          position: relative;
          display: block;
          width: 100%;
          max-width: 990px;
          margin: 0 auto;
          max-height: 650px;
          height: auto;
      }

      .modal-content {
          height: auto;
          margin-top: 30%;
      }

      .modal-content .title {
          font-size: 2em;
          height: 70px;
          line-height: 70px
      }


  }