.select_bar {
  width: 1060px;
  height: 80px;
  background: linear-gradient(
    to right,
    #f5f6fe,
    #a2b1f8
  );
  border: 2px solid #474aff;
  box-shadow: 0 0 1px rgba(79, 102, 255, 0);
  border-radius: 60px;
  display: flex;
  align-items: center;
  position: relative;
  margin: auto;
  top: 30px;
  cursor: pointer;
  transform-origin: top;
  transition: 
    box-shadow 0.15s ease, 
    transform 0.25s ease, 
    height 0.25s ease;
}
.label {
  position: absolute;
  top: 0;
  margin-top: 10px;
  margin-left: 100px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #9fa5ea;
  font-size: 2.5rem;
  transition: 
    color 0.25s ease;
  cursor:pointer;
}
.circle_icon {
  width: 81px;
  height: 81px;
  background: linear-gradient(
    to bottom,
    #464cef,
    #646bfc
  );
  color: white;
  border-radius: 120px;
  box-shadow: 0 0 0px rgba(79, 102, 255, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  margin-left: -1px;
  font-size: 70px;
  transform-origin: top;
  transition: 
    transform 0.25s ease, 
    box-shadow 0.25s ease, 
    height 0.25s ease, 
    border-radius 0.25s ease;
}
/* From https://css-shape.com */
.down_arrow_icon {
  --t: 45%;
  --h: 40%;
  aspect-ratio: 2/3;
  height: 65px;
  background: linear-gradient(
    to bottom,
    #c7cbfd,
    #ffffff
  );
  clip-path: 
    polygon(calc(50% - var(--t)/2) 0,
    calc(50% - var(--t)/2) calc(100% - var(--h)),0 calc(100% - var(--h)),50% 100%,
    100% calc(100% - var(--h)),calc(50% + var(--t)/2) calc(100% - var(--h)),
    calc(50% + var(--t)/2) 0
    );
  display: flex;
  position: absolute;
  top: 0;
  margin-top: 7px;
  margin-right: 5px;
  rotate: -180deg;
  box-shadow: 0 0 0px rgba(79, 102, 255, 0);
  transition: 
    transform 0.25s ease, 
    rotate 0.25s ease, 
    box-shadow 0.25s ease, 
    margin-top 0.25s ease;
}
/*Inside select bar*/
.chem_bar {
  width: 950px;
  height: 0px;
  background: linear-gradient(
    to right,
    #f9f5fd,
    #c9b2f4
  );
  border: 0px solid #7145f500;
  box-shadow: 0 0 1px rgba(79, 102, 255, 0);
  border-radius: 120px;
  display: flex;
  align-items: center;
  position: absolute;
  margin-left: 96px;
  top: 0;
  margin-top: 70px;
  cursor: pointer; 
  transition: 
    height 0.1s ease, 
    border 0.01s ease, 
    box-shadow 0.25s ease, 
    transform 0.25s ease;
}
.label_chem {
  position: absolute;
  top: 0;
  margin-top: 0px;
  margin-left: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #7145f500;
  font-size: 2.5rem;
  transition-delay: 0.05s;
  transform-origin: left;
  transition: 
    color 0.25s ease, 
    transform 0.25s ease,
    margin-top 0.25s ease;
  cursor:pointer;
}

.select_bar:hover {
  box-shadow: 
    0 0 6px rgba(79, 102, 255, 0.7),
    0 0 18px rgba(79, 102, 255, 0.4); 
  transform: translateY(-1px);
}
.select_bar.active {
  box-shadow: 
    0 0 6px rgba(79, 102, 255, 0.7),
    0 0 18px rgba(79, 102, 255, 0.4); 
  transform: translateY(-1px);
  height: 310px;
}
.select_bar:hover .label {
  color: #474aff;
}
.select_bar:hover .circle_icon {
  box-shadow: 
    0 0 8px rgba(79, 102, 255, 0.3);
}
.label.active {
  color: #474aff;
}
.circle_icon.active {
  transform: scale(1.05);
  box-shadow: 
    0 0 8px rgba(79, 102, 255, 0.3);
  height: 297px; 
}
.down_arrow_icon.active {
  transform: scale(1.00);
  rotate: 0deg;
  box-shadow: 0 0 6px rgba(79, 102, 255, 0.7);
  margin-top: 15px;
}
.chem_bar.active {
  height: 60px;
  border: 2px solid #7045f5;
}
.label_chem.active {
  color: #987bee;
  margin-top: 0px;
}
.chem_bar.active:hover {
  box-shadow: 
    0 0 6px rgba(126, 79, 255, 0.7),
    0 0 18px rgba(135, 79, 255, 0.4); 
  transform: translateY(-1px);
}
.chem_bar.active:hover .label_chem.active{
  color: #7045f5;
  margin-top: 0px;
  transform: scale(1.05);
}