.content-wrapper {
    display: flex;
    height: 100dvh;
    background-color: black;
  }
  

  .logo img {
    width: 120px;
    position: absolute;
    right: 20px;
    bottom: 20px;
  }

  .v3d-container {
    position: relative;
  }

  .sidebar {
    z-index: 1;
    background-color: #ffffff;
    color: #cbcbcb;
    border-color: #cccccc;
    border-right-style: solid;
    border-width: 1px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    position: relative;
    overflow: scroll;
    font-family: sans-serif;
    box-shadow: 9px 0px 10px 0px #454545;
    height: 100vh; 
    /*width: 20%;*/
  }
    
  .sidebar.collapsed {
    transform: translateX(-100%);
  }
  
  .ui-area {
    border-style: solid;
    border-width: thin;
    margin: 2px;
    padding: 5px;
  }
  
  .menu-button {
    border-radius: 0% !important;
    height: 30px;
    width: 65px;
    border-width: thin;
    cursor: pointer;
    background: white;
    display: inline-block;
    font-size: small;
    text-align: center;
    color: black;
  }
  
  .menu-button:hover {
    background-color: #464646;
  }
  
  @media (max-width: 768px) {
  
    .content-wrapper {
      flex-direction: column-reverse;
      border-right-style: unset;
      border-top-style: solid;
    }
  
    .sidebar {
      flex-direction: row;
  }

  .logo img {
    position: absolute;
    right: unset;
    bottom: unset;
    left: 20px;
    top: 20px;
    width: 100px;
  }

  }


#step {
  text-align: center;
  padding: 10px;
  font-size: x-large;
}

#fileInput {
  height: 30px;
}



.active {
  background-color: #6ff381;
}