/* Image map container */
.image-map-container {
	position: relative;
	display: inline-block;
	max-width: 100%;
  }

  .image-map {
	max-width: 100%;
	height: auto;
	display: block;
  }

  /* Area highlights */
  .area-highlight {
	position: absolute;
	border: 3px solid transparent;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
  }

  .area-active {
	opacity: 1;
  }

  /* Text section highlighting */
  .section-creation,
  .section-import,
  .section-toolbar,
  .section-projects {
	border-left: 4px solid transparent;
	padding-left: 10px;
	transition: background-color 0.3s ease;
  }

  .section-creation { border-color: #e63946; }
  .section-import { border-color: #457b9d; }
  .section-toolbar { border-color: #2a9d8f; }
  .section-projects { border-color: #8338ec; }

  .active-section {
	background-color: rgba(0,0,0,0.05);
  }