.tab {
    display: flex;
    justify-content: center;
    align-items: baseline;
    border: none;
  }
    
  
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
    
  .tab button:hover {
    background-color: #ddd;
  }
  
  .tab button.active {
    background-color: #ccc;
  }
    
  .tabcontent {
    display: none;
  }
    
  .long-img {
    max-width: 800px; 
    width: 100%;
    object-fit: contain;
    margin: auto;
  }
  
  .tall-img {
    max-height: 550px; 
    max-width: 100%;
    object-fit: contain;
    margin: auto;
  }

  @media screen and (max-width: 600px) {
    .visual-select-container{
        display: flex;
        flex-direction: column;
        height: 350px;
      }
  }
  
  .visual-select-container{
    display: flex;
    flex-direction: column;
    height: 440px;
  }
  
  .visual-control {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  .view {
    width: 90%;
    max-width: 650px;
    position: relative;
  }
  
  .view > .drawer {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  
  .view > .drawer > a > path {
    fill: darkgreen;
    fill-opacity: 20%;
    transition: 0.3s;
  }
  
  .eladva {
    fill: #eb4236!important;
    fill-opacity: 50%!important;
  }
  
  .eladva:hover {
    fill-opacity: 80%!important;
  }
  
  
  .view > .drawer > a > path:hover {
    fill-opacity: 80%;
  }
  
  .view > img, .view > drawer {
    width: 100%;
  }