.vertical_gradient_line{width:2px; height:100%; margin:auto 0px; position:relative; z-index:999999; background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.4),transparent);}
.vertical_gradient_line_absolute{width:2px; height:100%; z-index:999999; background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.4),transparent); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.horizontal_gradient_line{width:100%; height:2px; margin:auto 0px; position:relative; z-index:999999; background:linear-gradient(to left,transparent,rgba(0,0,0,0.4),transparent);}
.horizontal_centered_gradient_line{width:100%; height:2px; align-self:center; margin:10px 0px; position:relative; z-index:999999; background:linear-gradient(to left,transparent,rgba(0,0,0,0.4),transparent);}
.horizontal_gradient_separator{width:100%; height:2px; align-self:center;  position:relative; z-index:999999999999999999999999999999; background:linear-gradient(to left,transparent,rgba(0,0,0,0.8),transparent);}


.hexagon {
  position: relative;
  width: 50px; 
  height: 28.87px;
  background-color: var(--web_primary_color);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 14.43px solid var(--web_primary_color);
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 14.43px solid var(--web_primary_color);
}