/* function to convert the calc function in to rem based
$first- should be in % */
/** Slick Carousel Starts **/
/** Slick Carousel Ends **/
/* override default breakpoints */
.hotspot-layout .mobile-message {
  bottom: 0; }

.hotspot-layout .dektop-message {
  bottom: 0;
  right: 0; }

.hotspot-container {
  position: relative; }
  .hotspot-container .hotspot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 1; }
    .hotspot-container .hotspot .hotspot-details {
      background: #fff;
      border: none;
      border-radius: 50%;
      overflow: hidden;
      width: 1.5rem;
      height: 1.5rem; }
    .hotspot-container .hotspot img {
      width: auto;
      max-width: 100%;
      vertical-align: baseline; }
    .hotspot-container .hotspot-box-shadow {
      -webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5); }
    @media (min-width: 992px) {
      .hotspot-container .hotspot:focus {
        -webkit-box-shadow: none;
                box-shadow: none; }
        .hotspot-container .hotspot:focus::before {
          content: "";
          position: absolute;
          width: 2.4375rem;
          height: 2.4375rem;
          border: 0.0625rem solid #000;
          border-radius: 50%;
          left: -0.5rem;
          top: -0.5rem; } }
    .hotspot-container .hotspot.hotspot-pulse::after {
      content: '';
      width: 1.375rem;
      height: 1.375rem;
      border-radius: 50%;
      position: absolute;
      left: 0.0625rem;
      top: 0.0625rem;
      background: #000;
      z-index: -1;
      -webkit-animation: pulse 1000ms infinite ease-in-out;
              animation: pulse 1000ms infinite ease-in-out; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.8; }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
    opacity: 0; } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.8; }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
    opacity: 0; } }

.hotspot-modal {
  width: 15.5rem;
  background: #fff;
  -webkit-box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.16);
  color: #000;
  display: none;
  position: absolute;
  z-index: 999;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content; }
  .hotspot-modal.edit {
    display: block;
    position: relative; }
  .hotspot-modal.modal-open {
    overflow: initial; }
  .hotspot-modal.new {
    display: block; }
  .hotspot-modal .content {
    position: relative;
    padding: 1rem 0; }
  .hotspot-modal .image-container {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 15.5rem; }
    .hotspot-modal .image-container .hotspot-image,
    .hotspot-modal .image-container img {
      width: auto;
      height: 100%;
      max-width: 100%; }
  .hotspot-modal .modal-close {
    top: 1rem;
    right: 1rem; }
    .hotspot-modal .modal-close .close {
      width: 0.75rem;
      height: 0.75rem; }
      .hotspot-modal .modal-close .close svg {
        vertical-align: top; }
  .hotspot-modal .header {
    font-family: "Roboto-Bold", sans-serif;
    padding: 0 1rem;
    width: 90%;
    word-break: break-word;
    word-wrap: break-word; }
  .hotspot-modal .body {
    padding: 0 1rem;
    font-family: "Roboto-Regular", sans-serif; }
    .hotspot-modal .body .description {
      word-break: break-word;
      word-wrap: break-word; }
      .hotspot-modal .body .description p {
        margin-bottom: 0; }
    .hotspot-modal .body .btn-link {
      margin-top: 0.5rem;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      .hotspot-modal .body .btn-link svg {
        margin-left: 0.25rem; }