/*--------------USER CREATE STYLING/DEFAULT-------------------*/

.focal-point-wrapper .focal-point-preview-link {
  font-size: var(--text-body);
  font-family: var(--header-font);
  position: relative;
  text-decoration: underline;
  margin-top: 0.5rem;
  text-align: center;
  font-weight: bold;
}
  .focal-point-preview-link::before {
    content: "";
      width: 2rem;
      height: 2rem;
      background-image: url(/themes/custom/stem_women/assets/images/images.svg);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      left: 32%;
  }


.focal-point__preview {
  border-radius: 0.8rem;
  filter: drop-shadow(2px 4px 6px rgba(75, 37, 72, 0.6));
  width: 60%!important;
  max-width: 72rem!important;
  top: 40%!important;
  margin: auto;
}
    .breakpoint-mobile-only .focal-point__preview {
      width: 93%!important;
      top: calc(var(--height-header) + 20px)!important;
      bottom: 90px!important;
    }

.focal-point__preview #drupal-modal {
  max-height: unset!important;
}

.focal-point__preview .grid-container {
  width: 100%;
  max-width: unset;
}
.focal-point__preview .grid-row {
  display: flex;
  justify-content: stretch;
}
  .breakpoint-mobile-only .focal-point__preview .grid-row {
    flex-direction: column;
  }

.focal-point__preview h2 {
  margin-top: 0;

}
.focal-point__preview .ui-widget-header {
  background-color: unset;
  border: unset;
}
  .focal-point__preview button.ui-dialog-titlebar-close {
    background-color: unset;
    border: unset;
    width: 2.5rem;
    height: 2.5rem;  
    margin: unset;
    position: relative;
    display: block;
    float: right;
  }

    .focal-point__preview .ui-dialog-titlebar-close:active {
      background-color: unset;
    }

  .focal-point__preview .ui-dialog-title {
    display: none;
  }

  .focal-point__preview span.ui-icon-closethick {
    background-image: url(/themes/custom/stem_women/assets/images/exit-orange.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .focal-point__preview .ui-dialog-titlebar-close:hover span.ui-icon-closethick {
    background-image: url(/themes/custom/stem_women/assets/images/exit-orange.svg);
    filter: brightness(1.5);
  }




#focal_point_preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

#focal-point-preview-image {
  box-shadow: unset;
}
    #focal-point-preview-image.profile_horizontal_mask {
      clip-path: circle(78.7% at 43% -3%);
      -webkit-clip-path: circle(78.7% at 43% -3%);  
    }

    #focal-point-preview-image.profile_vertical_mask {
      -webkit-clip-path: circle(78.7% at 8% 32%);
      position: relative;
    }

    #focal-point-preview-image.profile_round_icon {
      border-radius: 200%;
    }


#focal-point-derivatives {
  height: unset;
  white-space: normal;
  overflow-x: unset;
  overflow-y: unset;
  display: flex;
  flex-direction: column;

}
.focal-point-derivative-preview {
  background-color: var(--color-primary-light-more-transparent);
  margin: 0.8rem;
  border-radius: 1.6rem;
  min-height: unset;
  border: 1px solid var(--color-primary);
}
  .focal-point-derivative-preview.hover {
    filter: brightness(1.2);
  }

  .focal-point-derivative-preview h3 {
    font-family: var(--condensed-font);
    font-size: var(--text-large);
    color: var(--color-primary-dark);
    display: flex;
    justify-content: center;
  }
  .focal-point-derivative-preview span {
    position: relative;
    width: 2rem;
  }

  .focal-point-derivative-preview span:before {
    background-image: url(/themes/custom/stem_women/assets/images/horisthumb.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    content: '';
    position: absolute;

  }
  .focal-point-derivative-preview span.horizontal:before {
    top: 0.3rem;
  }
  .focal-point-derivative-preview span.vertical:before {
    background-image: url(/themes/custom/stem_women/assets/images/vertthumb.svg);
    top: -0.2rem;
  }
  .focal-point-derivative-preview span.round:before {
    background-image: url(/themes/custom/stem_women/assets/images/iconthumb.svg);
    top: -0.1rem;
  }
  .focal-point-derivative-preview-image {
    display: none;
  }
.focal-point-derivative-preview.active {
  background-color: var(--color-primary-lighter);
  border-color: var(--color-primary);
}
  .focal-point-derivative-preview.active h3 {
    color: var(--color-white);
  }