@charset "UTF-8";
@font-face {
  font-family: "Lexend Deca Regular";
  src: url("../fonts/LexendDeca-Regular.woff2") format("woff2"), url("../fonts/LexendDeca-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend Deca Medium";
  src: url("../fonts/LexendDeca-Medium.woff2") format("woff2"), url("../fonts/LexendDeca-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.peak-corner-container {
  max-width: 100%;
  position: relative;
  width: 100%;
  margin: 50px 0;
}
.peak-corner-container .notice {
  background: #B3D917;
  color: #fff;
  text-align: center;
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Lexend Deca Medium";
  max-width: 840px;
  margin-top: -40px;
}
.peak-corner-container .notice * {
  color: #fff;
  font-size: 14px;
  font-family: "Lexend Deca Medium";
}

.loader {
  width: 40px;
  aspect-ratio: 1;
  color: #f03355;
  position: relative;
  background: radial-gradient(10px, currentColor 94%, rgba(0, 0, 0, 0));
}

.loader:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(9px at bottom right, rgba(0, 0, 0, 0) 94%, currentColor) top left, radial-gradient(9px at bottom left, rgba(0, 0, 0, 0) 94%, currentColor) top right, radial-gradient(9px at top right, rgba(0, 0, 0, 0) 94%, currentColor) bottom left, radial-gradient(9px at top left, rgba(0, 0, 0, 0) 94%, currentColor) bottom right;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  animation: l18 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes l18 {
  33% {
    inset: -10px;
    transform: rotate(0deg);
  }
  66% {
    inset: -10px;
    transform: rotate(90deg);
  }
  100% {
    inset: 0;
    transform: rotate(90deg);
  }
}
.mapPopup {
  position: absolute;
  width: 90%;
  max-width: 485px;
  background: #fff;
  z-index: 100;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  overflow: hidden;
  left: 0;
  top: 50px;
  display: none;
}
@media screen and (max-width: 990px) {
  .mapPopup {
    top: -70px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
  }
}
.mapPopup .loeaderBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
}
.mapPopup .loeaderBox .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mapPopup .closeBtn {
  width: 38px;
  height: 38px;
  background: #B3D917 url(../img/close.svg) center center no-repeat;
  background-size: 13px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 100%;
}
.mapPopup .imageBox {
  width: 100%;
  height: 260px;
  background: url(../img/default.jpg) center center no-repeat;
  background-size: cover;
}
.mapPopup .imageBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mapPopup .contentBox {
  padding: 30px;
}
.mapPopup .contentBox h4 {
  font-size: 18px;
  font-family: "Lexend Deca Medium";
  margin-bottom: 20px;
  color: #000000;
  margin-top: 0;
}
.mapPopup .contentBox .content {
  font-size: 14px;
  font-family: "Lexend Deca Regular";
  color: #000000;
}
.mapPopup .contentBox .contentFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.mapPopup .contentBox .contentFooter .statusBox {
  width: 70px;
}
.mapPopup .contentBox .contentFooter .statusBox.available .status::before {
  background: #B3D917;
}
.mapPopup .contentBox .contentFooter .statusBox.unavailable .status::before {
  background: #D93E17;
}
.mapPopup .contentBox .contentFooter .statusBox .status {
  padding-left: 15px;
  font-size: 14px;
  font-family: "Lexend Deca Medium";
  position: relative;
}
.mapPopup .contentBox .contentFooter .statusBox .status::before {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.mapPopup .contentBox .contentFooter .buttonSet {
  width: calc(100% - 70px);
  display: flex;
  justify-content: flex-end;
}
.mapPopup .contentBox .contentFooter .buttonSet a {
  display: inline-block;
  margin-left: auto;
  border-radius: 30px;
  padding: 9px 0;
  text-align: center;
  width: 136px;
  font-size: 12px;
  background: #000;
  color: #fff;
  font-family: "Lexend Deca Medium";
  text-transform: uppercase;
  transition: background-color 0.5s 0s;
  text-decoration: none;
}
.mapPopup .contentBox .contentFooter .buttonSet a:hover {
  background: #B3D917;
  text-decoration: none;
  color: #fff;
}
.mapPopup .contentBox .contentFooter .buttonSet a.disabled {
  cursor: default;
  background: #D1D1D1;
}
.mapPopup .contentBox .contentFooter .buttonSet a.disabled:hover {
  background: #D1D1D1;
}

.mapNavigation {
  position: absolute;
  top: 0;
  right: 0;
  width: 47px;
  height: 387px;
  background: url(../img/nav.svg) top center no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 990px) {
  .mapNavigation {
    width: 320px;
    height: 40px;
    background: url(../img/nav2.svg);
    left: 50%;
    margin-left: -160px;
    top: -70px;
    right: auto;
  }
}
.mapNavigation .navItem {
  width: 30px;
  height: 30px;
  background: transparent;
  z-index: 10;
  border-radius: 100%;
  left: 8.5px;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  transition: background-color 0.5s 0s;
  cursor: pointer;
}
@media screen and (max-width: 990px) {
  .mapNavigation .navItem {
    top: 6.5px !important;
    width: 25px;
    height: 25px;
  }
}
.mapNavigation .navItem:hover {
  background: #B3D917;
}
.mapNavigation .navItem.active {
  background: #B3D917;
}
.mapNavigation .navItem#nav-pinceszint {
  top: 348px;
}
@media screen and (max-width: 990px) {
  .mapNavigation .navItem#nav-pinceszint {
    left: 303px;
  }
}
.mapNavigation .navItem#nav-foldszint {
  top: 280px;
}
@media screen and (max-width: 990px) {
  .mapNavigation .navItem#nav-foldszint {
    left: 247px;
  }
}
.mapNavigation .navItem#nav-elsoemelet {
  top: 213px;
}
@media screen and (max-width: 990px) {
  .mapNavigation .navItem#nav-elsoemelet {
    left: 191px;
  }
}
.mapNavigation .navItem#nav-masodikemelet {
  top: 144px;
}
@media screen and (max-width: 990px) {
  .mapNavigation .navItem#nav-masodikemelet {
    left: 134px;
  }
}
.mapNavigation .navItem#nav-harmadikemelet {
  top: 76px;
}
@media screen and (max-width: 990px) {
  .mapNavigation .navItem#nav-harmadikemelet {
    left: 78px;
  }
}
.mapNavigation .navItem#nav-tetoter {
  top: 10px;
}
@media screen and (max-width: 990px) {
  .mapNavigation .navItem#nav-tetoter {
    left: 22px;
  }
}
.mapNavigation .label {
  font-size: 14px;
  font-family: "Lexend Deca Medium";
  position: absolute;
  bottom: -50px;
  left: -11px;
}
@media screen and (max-width: 990px) {
  .mapNavigation .label {
    bottom: -23px;
    left: 96px;
  }
}

.imageMaps {
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 990px) {
  .imageMaps {
    width: 100%;
    margin-top: 70px;
  }
}
.imageMaps .label {
  position: absolute;
  top: 0px;
  left: 10%;
  background: #B3D917;
  color: #000;
  font-size: 18px;
  line-height: 43px;
  border-radius: 22px;
  padding: 0 20px;
  font-family: "Lexend Deca Medium";
}
.imageMaps .imageMap {
  width: 100%;
  aspect-ratio: 1.84542;
  height: auto;
  position: relative;
  z-index: 1;
  display: none;
}
.imageMaps .imageMap#pinceszint {
  background: url(../img/floor-pinceszint.png) center center no-repeat;
  background-size: contain;
  display: block;
}
.imageMaps .imageMap#foldszint {
  background: url(../img/floor-foldszint.png) center center no-repeat;
  background-size: contain;
}
.imageMaps .imageMap#elsoemelet {
  background: url(../img/floor-elsoszint.png) center center no-repeat;
  background-size: contain;
}
.imageMaps .imageMap#masodikemelet {
  background: url(../img/floor-masodikszint.png) center center no-repeat;
  background-size: contain;
}
.imageMaps .imageMap#harmadikemelet {
  background: url(../img/floor-harmadikszint.png) center center no-repeat;
  background-size: contain;
}
.imageMaps .imageMap#tetoter {
  background: url(../img/floor-tetoter.png) center center no-repeat;
  background-size: contain;
}
.imageMaps .svgMap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.imageMaps .svgMap svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.imageMaps .svgMap .node .title {
  fill: #000000;
}
.imageMaps .svgMap .node .circle {
  fill: #ffffff;
}
.imageMaps .svgMap .room {
  cursor: pointer;
}
.imageMaps .svgMap .room.available .hover {
  fill: #B3D917;
  transition: fill-opacity 0.5s;
  fill-opacity: 0;
}
.imageMaps .svgMap .room.available:hover .hover {
  fill: #B3D917;
  fill-opacity: 1;
  mix-blend-mode: multiply;
}
.imageMaps .svgMap .room.available:hover .title, .imageMaps .svgMap .room.available:hover .circle {
  opacity: 1;
}
.imageMaps .svgMap .room.unavailable .hover {
  fill: #D93E17;
  transition: fill-opacity 0.5s;
  fill-opacity: 0;
}
.imageMaps .svgMap .room.unavailable:hover .hover {
  fill: #D93E17;
  fill-opacity: 1;
  mix-blend-mode: multiply;
}
.imageMaps .svgMap .room.unavailable:hover .title, .imageMaps .svgMap .room.unavailable:hover .circle {
  opacity: 1;
}
.imageMaps .svgMap .room .title {
  fill: #000000;
}
.imageMaps .svgMap .room .circle {
  fill: #ffffff;
}

/*

    <div class="imageMap" id="pinceszint">
                    <div class="label"><?php echo __('Pinceszint','peak-corner'); ?></div>
                    <div class="svgMap">
                        <?php include PEAK_CORNER_PLUGIN_DIR . 'templates/floor-pinceszint.php'; ?>
                    </div>
                </div>
                <div class="imageMap" id="foldszint">
                    <div class="label"><?php echo __('Földszint','peak-corner'); ?></div>
                    <div class="svgMap">
                        <?php include PEAK_CORNER_PLUGIN_DIR . 'templates/floor-foldszint.php'; ?>
                    </div>
                </div>
                <div class="imageMap" id="elsoemelet">
                    <div class="label"><?php echo __('Első emelet','peak-corner'); ?></div>
                    <div class="svgMap">
                        <?php include PEAK_CORNER_PLUGIN_DIR . 'templates/floor-elsoszint.php'; ?>
                    </div>
                </div>
                <div class="imageMap" id="masodikemelet">
                    <div class="label"><?php echo __('Második emelet','peak-corner'); ?></div>
                    <div class="svgMap">
                        <?php include PEAK_CORNER_PLUGIN_DIR . 'templates/floor-masodikszint.php'; ?>
                    </div>
                </div>
                <div class="imageMap" id="harmadikemelet">
                    <div class="label"><?php echo __('Harmadik emelet','peak-corner'); ?></div>
                    <div class="svgMap">
                        <?php include PEAK_CORNER_PLUGIN_DIR . 'templates/floor-harmadikszint.php'; ?>
                    </div>
                </div>
                <div class="imageMap" id="tetoter">
*/

/*# sourceMappingURL=peak-corner.css.map */