.nimap-details-container {

  * {
    box-sizing: border-box;
  }

  .nimap-details-wrap {

    .nimap-details-top-container {
      position: relative;

      .nimap-top-header-container {

        &.nimap-top-no-image {
          display: none;
        }
      }

      .nimap-top-header-container {
        width: 100%;

        .nimap-detail-image-wrap {

          img {
            height: 50vh;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
          }

          section {
            height: 50vh;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
          }
        }
      }

      .nimap-top-content-container {

        &:not(.nimap-top-no-image) {
          bottom: 0;
          z-index: 2;
          width: 100%;
          position: absolute;

          .nimap-top-content-address-side-wrap {
            color: #fff;
          }
        }

        .nimap-top-content-wrap {
          padding: 0 3rem 2rem 3rem;
          display: flex;
          flex-wrap: wrap;

          .nimap-top-content-address-side-wrap {
            width: 75%;

            .nimap-categories-wrap {

              .nimap-category-display {
                padding: 8px 15px;
                border-radius: 30px;
                color: #fff;
                background-color: #add8e6;
              }
            }

            .nimap-title-container {
              gap: 15px;
              margin-top: 5px;
              margin-bottom: 0;
              flex-wrap: wrap;
              line-height: 1.2;
              align-items: center;
              display: inline-flex;
              text-shadow: 2px 2px #4b6187;

              .nimap-title-wrap {
                font-size: 2rem;
                font-weight: bold;
              }
            }

            .nimap-address-wrap {
              margin-top: 5px;
              text-shadow: 2px 2px #4b6187;
            }
          }

          .nimap-top-content-button-side-wrap {
            width: 25%;
            display: flex;
            justify-content: flex-end;
            align-items: self-end;

            .nimap-detail-block-wrap {
              text-align: right;

              .nimap-item-buttons-wrap {
                display: flex;
                justify-content: center;
                flex-direction: column;
                gap: 10px;

                .nimap-item-button-wrap {
                  text-align: center;
                  padding: 3px 5px;
                  cursor: pointer;
                  //padding-top: 5px;
                  //padding-bottom: 5px;
                  //gap: 10px;
                  //width: 40px;
                  //height: 40px;
                  //display: flex;
                  position: relative;
                  border-radius: 6px;
                  //align-items: center;
                  //color: var(--color-primary);
                  //justify-content: right;
                  overflow: hidden;
                  border: 1px solid #0B598A;
                  background-color: #fefefe;

                  a {
                    text-decoration: unset;
                  }
                }
              }
            }
          }
        }
      }
    }

    .nimap-details-bottom-container {

      .nimap-details-bottom-wrap {

        > div {
          box-sizing: border-box;
        }

        .nimap-detail-block-wrap {
          padding: 20px 20px 0;
          background-color: #fff;
          border-radius: 6px;
          //margin-bottom: 30px;

          .nimap-detail-block-header {
            width: 100%;
            position: relative;
            padding-bottom: 10px;
            display: inline-block;
            border-bottom: 1px solid #e8e8e8;
          }

          .nimap-item-description-content {
            padding-top: 10px;
          }

          .nimap-detail-block-content {

            &.nimap-information-header {

              >div {
                padding-top: 10px;
              }
            }

            .nimap-opening-detail {
              table-layout: unset;
              margin-bottom: unset;

              .nimap-opening-day-container {
                border-color: rgba(0, 0, 0, .1);

                .nimap-opening-day-wrap {
                  //display: grid;
                  //grid-template-columns: 2fr 3fr 1fr 3fr;
                  //border: 1px solid #dedede;

                  > div {
                    //border: 1px solid #dedede;
                  }

                  .nimap-opening-day-label {
                    font-weight: bold;
                    text-transform: unset;
                  }

                  .nimap-opening-day-separator {
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }

    .nimap-map-details-container {
      padding: 20px 20px 0;
      background-color: #fff;
      border-radius: 6px;
      margin-bottom: 30px;

      .nimap-detail-block-header {
        width: 100%;
        position: relative;
        padding-bottom: 10px;
        display: inline-block;
        border-bottom: 1px solid #e8e8e8;
      }

      .nimap-map-details-image {

        .nimap-map-details-canvas {
          height: 480px;
          position: relative;
          background: #eee;
        }
      }
    }

    &.nimap-details-layout-2col {

      .nimap-details-bottom-wrap {
        display: grid;
        grid-template-columns: 60% 40%;
        //position: relative;
        //margin: auto;
        //column-count: 2;
        //width: 100%;
        //-webkit-column-count: 2;
        //opacity: 1;
        //overflow-y: auto;
      }
    }
  }

  .nimap-hidden {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {

  .nimap-details-container {

    .nimap-details-wrap {

      .nimap-details-top-container {

        .nimap-top-content-container {

          &.nimap-top-no-image {

            .nimap-top-content-wrap {
              padding: 0 0 5px 0;

              .nimap-top-content-button-side-wrap {
                display: block;
                margin-top: 10px;

                .nimap-detail-block-wrap {

                  .nimap-item-buttons-wrap {
                    justify-content: unset;
                    flex-direction: row;
                  }
                }
              }
            }
          }

          .nimap-top-content-wrap {
            padding: 0 10px 5px 10px;
            display: block;

            .nimap-top-content-address-side-wrap {
              width: 100%;
            }

            .nimap-top-content-button-side-wrap {
              width: 100%;
            }
          }
        }
      }

      .nimap-details-bottom-container {

        .nimap-details-bottom-wrap {

          .nimap-detail-block-wrap {
            padding: 15px 0 0;

            .nimap-item-description-content {
              padding-top: 0;
            }

            .nimap-detail-block-header {
              padding-bottom: unset;
            }
          }
        }

        .nimap-map-details-container {
          padding: 15px 0 0;

          .nimap-map-details-image {

            .nimap-map-details-canvas {
              height: 350px;
            }
          }
        }
      }
    }
  }
}

.nimap-animate-bounce {
  animation: nimap-bounce 2s infinite;
  -webkit-animation: nimap-bounce 2s infinite;
  -moz-animation: nimap-bounce 2s infinite;
  -o-animation: nimap-bounce 2s infinite;
}

.nimap-animate-jump {
  animation-name: nimap-jump;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
  -webkit-animation: nimap-jump 2s infinite;
  -moz-animation: nimap-jump 2s infinite;
  -o-animation: nimap-jump 2s infinite;
}

.nimap-animate-shake {
  animation: nimap-shake 2s infinite;
  -webkit-animation: nimap-shake 2s infinite;
  -moz-animation: nimap-shake 2s infinite;
  -o-animation: nimap-shake 2s infinite;
}

@keyframes nimap-shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}

@keyframes nimap-jump {
  0%   { transform: scale(1,1)      translateY(0); }
  10%  { transform: scale(1.1,.9)   translateY(0); }
  30%  { transform: scale(.9,1.1)   translateY(-100px); }
  50%  { transform: scale(1.05,.95) translateY(0); }
  57%  { transform: scale(1,1)      translateY(-7px); }
  64%  { transform: scale(1,1)      translateY(0); }
  100% { transform: scale(1,1)      translateY(0); }
}

@-webkit-keyframes nimap-bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
  40% {-webkit-transform: translateY(-20px);}
  60% {-webkit-transform: translateY(-10px);}
}

@-moz-keyframes nimap-bounce {
  0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
  40% {-moz-transform: translateY(-30px);}
  60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes nimap-bounce {
  0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
  40% {-o-transform: translateY(-30px);}
  60% {-o-transform: translateY(-15px);}
}
@keyframes nimap-bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-20px);}
  60% {transform: translateY(-10px);}
}