body {
    margin: 1em;
    padding: 0;
    font-family: Google Sans, Noto, Roboto, Helvetica Neue, sans-serif;
    color: #244376;
  }
  
  .card{
    height: 95vh;
  }

  model-viewer {
    width: 100%;
    height: 83vh;
  }
  
  input[type="button"]{
    outline:none;
 }
 input[type="button"]::-moz-focus-inner {
    border: 0;
 }
/*     button{
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      border: none;
      background-color: blue;
      box-sizing: border-box;
    }
  
    button[slot="hotspot-hand"]{
      --min-hotspot-opacity: 0;
      background-color: #e91e63
    }
  
    button[slot="hotspot-foot"]:not([data-visible]) {
      background-color: transparent;
      border: 3px solid blue;
    }
  
    #annotation{
      background-color: #dddddda2;
      position: absolute;
      transform: translate(10px, 10px);
      border-radius: 10px;
      padding: 10px;
    }
  
    :not(:defined) > * {
      display: none;
    } */

    .Hotspot {
        background: #E91E63;
        border-radius: 32px;
        border: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        box-sizing: border-box;
        cursor: pointer;
        height: 24px;
        padding: 8px;
        position: relative;
        transition: opacity 0.3s;
        width: 24px;
    }
    
    .Hotspot:not([data-visible]) {
        background: transparent;
        border: 4px solid #fff;
        box-shadow: none;
        height: 32px;
        pointer-events: none;
        width: 32px;
    }
    
    .Hotspot:focus {
        border: 4px solid rgb(0, 128, 200);
        height: 32px;
        outline: none;
        width: 32px;
    }
    
    .Hotspot>* {
        opacity: 1;
        transform: translateY(-50%);
    }
    
    .HotspotAnnotation {
        background: #E91E63;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        color: rgba(255, 255, 255, 0.952);
        display: block;
        font-family: Futura, Helvetica Neue, sans-serif;
        font-size: 14px;
        font-weight: 700;
        left: calc(100% + 1em);
        max-width: 128px;
        overflow-wrap: break-word;
        padding: 0.5em 1em;
        position: absolute;
        top: 50%;
        width: max-content;
    }
    
    .Hotspot:not([data-visible])>* {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(-50% + 4px));
        transition: transform 0.3s, opacity 0.3s;
    }

    .mapContainer{
        text-align: center;
    }

    .mainLogo{
       /*  max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .miniLogo{
        max-width: 100px;
    }


    
    .modal-dialog-full-width {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width:none !important;

    }

    .modal-content-full-width  {
        height: auto !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        background-color: #ececec !important 
    }


    .modal-body{
        background: #D3CCE3;
        background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);
        background: linear-gradient(to right, #eaeaea, #cbcbcb);
    }

    #standInfo{
        border: 1px solid;
    }