#summaryContainer * {
    font-family: 'Open Sans', Helvetica, sans-serif;
    color: #000;
    font-size: 1em;
}
.svg-canvas-modal.expanded {
z-index: 20!important;
background-color: rgba(0, 0, 0, 0.2);
}

#xpv-toolbar-item-web-ar {
display:none;
}

#summaryContainer {
  padding: 30px;
  background-color: #fff;
  border-radius: 20px;
}
div[role="tablist"].v-item-group {
  /*display:none;*/
}
.v-window__container .col:has(div.disabled) {
  display:none;
}
.color-tile, .v-image {
  border: 1px solid #ddd;
}


.x-p-v .row {
  margin: unset;
}
.x-p-v .col {
  margin-right: unset!important;
  padding: 10px;
}

/* button */

#ctaContainer {
	display: block;
	margin-top: 20px;
}
#ctaButton {
	background-color: #f68924;
	color: #fff;
	padding: 16px 24px;
	border-radius: 4px;
}
#ctaButton:hover { 
	cursor: pointer;
}


/* end button */



@media only screen and (min-width: 601px) {
#expiviContainer {
  display: flex;
  flex-direction: row;

}
#viewerContainer {
  width: 60%;
  height: 70vh;
}
#summaryContainer {
  width: 40%;

  margin-left: 0.5%;
}
/*.v-label {
  font-size: 1.6em;
}
.tile-card {
  width: 60px!important;
}
.tile-card .v-image, .tile-card .color-tile {
  height: 60px!important;
}*/
}
@media only screen and (max-width: 600px) {
#expiviContainer {
  display: flex;
  flex-direction: column;

}
#viewerContainer {
  width: 100%;
  height: 60vh;
}
#summaryContainer {
  width: 100%;

}
.v-window__container .v-window-item>.container {
	padding: 0;
}
.v-label {
  font-size: 1.0em;
}
.tile-card {
  width: 30px!important;
}
.tile-card .v-image, .tile-card .color-tile {
  height: 30px!important;
}
}


/* salient theme fixes */

.v-list-item__content {
  flex: unset;

}
.v-list--three-line .v-list-item, .v-list-item--three-line {
  min-height: 60px;

  display: flex;
  align-items: center;
} 

.v-label.theme--light {
  font-weight: 700;
}
.v-list-item.v-list-item--link.theme--light {
align-items: stretch;

}
.v-list-item.v-list-item--link.theme--light .v-list-item__action {
  min-height: 40px;
  display:flex;
  align-items: center;

}

.v-list-item__content {
  padding: unset!important;
}
.v-avatar.v-list-item__avatar  img:not([srcset]) {
    /*width: auto;*/
}
.v-avatar.v-list-item__avatar img {
  margin-bottom: 0!important;
}
/* end salient theme fixes*/


/*    body, html {
      height: 100%;
      margin: 0;
      background-color: #f0f0f0;  Optional: Set a background color 
    } 
	
	*/
    #start-button-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .button-container a {
      text-decoration: none;
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
    #lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease;
	  z-index: 999;
	  font-family: 'Open Sans', Helvetica, sans-serif;
    }
    #lightbox.open {
      display: flex;
      opacity: 1;
    }
    #lightbox-content {
      background: white;
      padding: 20px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
	  width: 60vw;
	  height: 50vh;
      justify-content: center;

    }
    #close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      background: transparent;
      border: none;
    }
    #close-button svg {
      width: 24px;
      height: 24px;
      fill: #e74c3c;
    }
    #animation-container {
      position: relative;
      width: 200px;
      height: 200px;
    }
    #lottie {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 140px;
      height: 140px;
    }
    #text-container {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
    .progress-bar {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 36px;
      font-weight: bold;
      margin: 0 10px;
    }
    .bar {
      width: 100px;
      height: 10px;
      background-color: #e6e6e6;
      margin: 0 10px;
      overflow: visible;
    }
    .bar svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    #download-link {
      margin-top: 20px;
      font-size: 16px;
      text-align: center;
    }
    @media (max-width: 600px) {
      .progress-bar {
        display: none;
      }
	  #lightbox-content {
		width: 90vw!important;
		height: 60vh!important;
	  }
    }