:not(:defined) > * {
  display: none;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

model-viewer {
  width: 100%;
  height: 100%;
}

.Hotspot {
  background: #E80033;
  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;
  animation: pulse 2s infinite;
}

.Hotspot-scale {
  transform: scale(1.2);
  border: 2px solid #E8002A;
  background: #fff;
   animation: pulse 0.5s infinite;
}

.Hotspot-scale::after {
  color: #E8002A !important;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.8);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
  }
}

.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 #fff;
  height: 32px;
  outline: none;
  width: 32px;
  animation: none;
}

.Hotspot > * {
  opacity: 1;
  transform: translateY(-50%);
}

.Hotspot[slot="hotspot-1"]::after {
  content: '1';
  color: #fff;
  position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-2"]::after {
  content: '2';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-3"]::after {
  content: '3';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-4"]::after {
  content: '4';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-5"]::after {
  content: '5';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-6"]::after {
  content: '6';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-7"]::after {
  content: '7';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-8"]::after {
  content: '8';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.Hotspot[slot="hotspot-9"]::after {
  content: '9';
  color: #fff;
    position: relative;
  bottom: 2px;
  right: 2px;
}

.HotspotAnnotation{
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.8);
  display: block;
  font-family: Futura, Helvetica Neue, sans-serif;
  font-size: 18px;
  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;
}


.progress-bar {
  display: block;
  width: 33%;
  height: 10%;
  max-height: 2%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 25px;
  box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.5);
}

.progress-bar.hide {
  visibility: hidden;
  transition: visibility 0.3s;
}

.update-bar {
  background-color: rgba(255, 255, 255, 0.9);
  width: 0%;
  height: 100%;
  border-radius: 25px;
  float: left;
  transition: width 0.3s;
}

/* Tooltips */

.tooltip, .tooltip h2 {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 0px;
    font-weight: 300;
}

.container.tooltips {
    width: 35%;
    background: rgb(40,54,66);
	background: linear-gradient(180deg, rgba(40,54,66,1) 0%, rgba(0,0,0,0) 100%);
    float: right;
    padding: 20px;
	position: absolute;
	right: 0px;
	z-index: 10;
    height: 85vh;
    overflow-y: auto;
	display: none;
	top: 5px;
/*	  -ms-overflow-style: none;
  scrollbar-width: none; /* Firefox */
}
/*
.container.tooltips::-webkit-scrollbar {
  display: none;
}
*/

/* Hide scrollbar for IE, Edge add Firefox */

.container.tooltips {

}
/*
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}
*/

.tooltip .title {
	font-weight: bold;
	position: relative;
	z-index: 10;
}

.tooltip .title:hover {
	cursor: pointer;
}

.tooltip .title::after {
    content: "+";
    color: #fff;
    position: relative;
    float: right;
    top: -37px; /* -33px */
	cursor: pointer;
	right: 20px;
}

.tooltip .title-active::after {
    content: "-";
    color: #fff;
    position: relative;
    float: right;
    top: -33px;
	cursor: pointer;
	right: 20px;
}

.tooltip, .tooltip a {
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 16px;
	padding: 0px;
}

.container.tooltips img {
	max-width: 100%;
}

.tooltip .description {
	display: none;
}

.tooltip .description {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 1rem;
}

.tooltip .description .description {
    border: none;
}

.description a {
    padding-left: 0;
    color: #e8002a;
    background: url('/images/external-icon-red.webp')100% no-repeat;
    background-size: 15px;
    padding-right: 23px;
	font-family: Georgia, Times New Roman, Times, serif;
    font-weight: bold;
}

.description a[href="https://videos.dow.com/view/M25930#/"], 
.description a[href="https://www.dow.com/en-us/pdp.dowsil-tc-3015-re-workable-thermal-gel.4138586z.html#player"],
.description a[href="https://www.dow.com/en-us/pdp.dowsil-se-9160.04138229h.html#player"],
.description a[href="https://www.dow.com/en-us/pdp.dowsil-ve-6001-uvt-optical-bonding.04130621z.html#player"],
.description a[href="https://www.dow.com/en-us/pdp.dowsil-ec-6601-electrically-conductive-adhesive.488708z.html#player"] {

    background: none !important;

}
/*
.description a::after {
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background: url(https://starfox.solutioserver.com/images/external-icon.webp);
    position: absolute;
}
*/

.description ul {
    padding-top: 10px;
}

.tooltip {
	border-bottom: 1px solid #ffffff63;
}

/* Bottom Text */

.bottom-text {
    width: 86%;
    color: #fff;
    text-align: left;
    position: fixed;
    bottom: 20px;
	font-family: Arial, sans-serif;
	z-index: 1;
	padding-bottom: 10px;
	left: 13%
}

.bottom-text a {
    color: #fff;
    font-size: 12px;
    background: #415465;
    padding: 13px 20px;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    margin-right: 10px;
    transition: all 0.25s ease;
}

.bottom-text a:hover {
    background: #fff;
    color: #415465;
	border: 1px solid #415465ff;
}

.bottom-text p {
    margin-bottom: 0;
}

.bottom-text .fa {
	float: right !important;
    padding-right: 10px;
	    font-size: 18px;
	color: #fff;
}

.bottom-text a.socialLink {
	float: right !important;
    padding-right: 10px;
	background: none;
	padding: 0;
	border: none;
}