/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/
/* @import url("bv-public-generated.css"); */

/** BOLIGVELGER **/

.boligvelger .infoFields {
  display: none;
}

/* Placed and shown from bv-public.js (showTooltip): the position is a transform, so moving
   and fading it runs on the compositor. It rises 20px as it opens. */
.boligvelger .bv_tooltip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--bv-tooltip-x, 0), calc(var(--bv-tooltip-y, 0px) + 20px));
  /* jQuery's swing (easeInOutSine), which the tooltip was animated with before */
  transition: opacity 0.2s cubic-bezier(0.37, 0, 0.63, 1), transform 0.2s cubic-bezier(0.37, 0, 0.63, 1);
}

.boligvelger .bv_tooltip.bv-tooltip-open {
  display: block;
}

/* Fading out stays where it is */
.boligvelger .bv_tooltip.bv-tooltip-leaving {
  transform: translate(var(--bv-tooltip-x, 0), var(--bv-tooltip-y, 0));
}

.boligvelger .bv_tooltip.bv-tooltip-visible {
  opacity: 1;
  transform: translate(var(--bv-tooltip-x, 0), var(--bv-tooltip-y, 0));
}

@media (prefers-reduced-motion: reduce) {
  .boligvelger .bv_tooltip {
    transition: none;
  }
}

.boligvelger .bv_tooltip:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translate(-50%, 50%);
  border-width: 15px;
  border-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  z-index: 1;
}

.boligvelger .hovered > * {
  transition: all 0.2s ease;
}

.boligvelger .selectable.hovered {
  transition: all 0.2s ease;
}

.boligvelger {
  margin: 0px;
  padding: 0px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.boligvelger > * {
  transition: all 0.2s ease;
}

.boligvelger .bv_selectable:hover,
.boligvelger .bv_selectable.hovered {
  transition: all 0.2s ease;
}

.boligvelger .bv_selectable[href] {
  cursor: pointer;
}

/* Remove default focus and active outlines for all states */
.boligvelger .bv_selectable:focus,
.boligvelger .bv_selectable:active,
.boligvelger .bv_selectable:focus-visible, 
.boligvelger .bv_selectable:focus-visible > polygon {
  outline: none !important;
}

/* The shapes and the view buttons can be reached with the keyboard */
/* .boligvelger .viewButton:focus-visible > polygon { */
.boligvelger .bv_selectable:focus-visible, .boligvelger .bv_selectable:focus-visible > polygon {
  stroke-width: 2px;
  stroke: #fff;
}

.boligvelger .viewButton[role="button"] {
  cursor: pointer;
}

.boligvelger .viewSelector {
  display: flex;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: -10px;
}

.boligvelger .viewSelector ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0px;
  padding: 0px;
  justify-content: space-between;
  width: 100%;
}
.boligvelger .viewSelector .viewButton {
  background-color: #ffffff;
}

.viewButton.active {
  background: var(--view-active);
  color: var(--view-active-color);
}

.viewButton.active:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translate(-50%, -100%);
  /* border: solid 15px transparent; */
  border-style: solid;
  border-width: 15px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  /* Over the drawing, which is its own stacking context, and no higher than that */
  z-index: 1;
}
.boligvelger .bv_tooltip .title {
  z-index: 2;
  position: relative;
}

.boligvelger .viewSelector ul li {
  list-style-type: none;
  display: flexbox;
  text-align: center;
  flex: 1;
  padding: 25px 0px;
  position: relative;
}

.boligvelger .view {
  display: none;
}

.boligvelger .view > g,
.boligvelger .view > polygon,
.boligvelger .view > rect {
  display: none;
}

.boligvelger .view.active > g,
.boligvelger .view.active > polygon,
.boligvelger .view.active > rect {
  display: block;
}

.boligvelger .view.active {
  display: block;
}
/*
* Its own stacking context, so the z-index of what sits over the drawing (the north pointer,
* the zoom buttons, the disclaimer) only counts inside it, and not against a sticky or
* floating menu on the page.
*/
.svgContainer {
  position: relative;
  isolation: isolate;
}

/*
* The svg carries its own size in the markup, so it has a real intrinsic width and height.
* That is what lets a container that sizes itself from its content work out how tall the
* drawing is: with a percentage width it cannot, falls back to the 300x150 of a replaced
* element, and the drawing spills over whatever is under it. Seen in an Elementor container
* once the window got narrow enough.
*
* Here it is scaled back down to the width that is on offer, the way a responsive image is.
*/
.svgContainer > svg {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}
.svgContainer > .disclaimer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 100;
  color: #fff;
}

.boligvelger .customViewSelector {
  cursor: pointer;
}

/* LINKED SECTIONS */

.bv-group .bv-hidden {
  display: none !important;
}

.boligvelger .bv-link-section {
  cursor: pointer;
}

/* NORTH POINTER */

.boligvelger .bv-north {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 40;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 0px solid transparent;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

.boligvelger .bv-north.active {
  display: block;
}

.boligvelger .bv-north svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.boligvelger .bv-north .bv-north-n {
  fill: rgba(221, 51, 51, 1);
}

.boligvelger .bv-north .bv-north-s {
  fill: rgba(150, 150, 150, 1);
}

.boligvelger .bv-north .bv-north-label {
  fill: rgba(0, 0, 0, 1);
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 700;
}

/* PICK */

.bv-pick {
  position: relative;
  width: 100%;
}

.bv-pick .bv-pick-hidden {
  display: none !important;
}

.bv-pick .bv-pick-section {
  cursor: pointer;
}

.bv-pick .bv-pick-target {
  position: relative;
}

/* The bar over the drawing: the way back, and the name of where you are */
.bv-pick .bv-pick-topp {
  position: absolute;
  top: 15px;
  left: 15px;
  /* Enough to sit over the boligvelger after it, which is positioned; no more, so it stays
     under a floating menu on the page */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 30px);
}

.bv-pick .bv-pick-back,
.bv-pick .bv-pick-navn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 5px;
  background-color: #ffffff;
  color: #000000;
  font: inherit;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bv-pick .bv-pick-back {
  padding-left: 12px;
  cursor: pointer;
}

/*
* display: block, not the inline-flex of the pair above: text-overflow only reaches the
* inline content of a block box, so a flex box would clip a long name without the ellipsis.
*/
.bv-pick .bv-pick-navn {
  display: block;
  user-select: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bv-pick .bv-pick-back svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/*
* Optical centring. line-height centres the em box, not the letters, so where the text
* lands depends on the ascent and descent of the font chosen in View Selector. text-box
* trims each line to cap height and baseline, and the padding grows by what the trim took
* away (about 0.15em each side) so the boxes keep their size. The icon is taller than the
* trimmed text, so the bar stretches both boxes to the same height, and align-content
* centres the name inside its block box, which stays a block for the ellipsis.
* Browsers without text-box keep the geometric centring above.
*/
@supports (text-box: trim-both cap alphabetic) {
  .bv-pick .bv-pick-topp {
    align-items: stretch;
  }

  .bv-pick .bv-pick-back,
  .bv-pick .bv-pick-navn {
    padding-top: calc(10px + 0.15em);
    padding-bottom: calc(10px + 0.15em);
  }

  .bv-pick .bv-pick-back > span,
  .bv-pick .bv-pick-navn {
    text-box: trim-both cap alphabetic;
  }

  .bv-pick .bv-pick-navn {
    align-content: center;
  }
}

/* LIST */

.boligListe {
  width: 100%;
  margin-top: 10px;
}

.boligListe > table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  color: #111111;
}

.boligListe table thead,
.boligListe table thead tr {
  text-align: left;
  background: var(--title-bg) !important;
  color: white;
}

.boligListe table thead th {
  padding: 10px;
  font-size: 14px;
}

.boligListe table td {
  padding: 10px;
}

.boligListe table tbody tr {
  background: transparent;
}

.boligListe table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.1);
}

.boligListe table tbody tr:hover {
  cursor: pointer;
}

.boligListe table tbody tr.solgt {
  background: var(--solgt-bg) !important;
}

.boligListe table tbody tr.reservert {
  background: var(--orange-bg) !important;
}

.boligListe table tbody tr.reservert:hover {
  background: var(--svg-orange-hover) !important;
}

.boligListe table tbody tr.ledig:hover {
  background: var(--view-active) !important;
}

.tLeil {
  width: 5%;
}

.boligListe table tbody tr.solgt:hover {
  background: var(--svg-solgt-hover) !important;
}

/* ZOOM */

/*
* Only a container that carries data-bv-zoom-max takes part: without it the drawing is
* exactly what it was before, overflow and touch behaviour included.
*
* The transform sits on the svg and not on the container, so the layout height the
* intrinsic width/height gives us is untouched, and the shapes keep their position
* relative to the image for free - they are in the same coordinate system.
*/
.svgContainer[data-bv-zoom-max] {
  overflow: hidden;
  touch-action: pan-y;
}

.svgContainer[data-bv-zoom-max] > svg {
  transform-origin: 0 0;
}

/* Once there is something to pan, the drag is ours and the page no longer scrolls from here */
.svgContainer.bv-zoomet {
  cursor: grab;
  touch-action: none;
}

.svgContainer.bv-drar {
  cursor: grabbing;
}

/* The buttons glide, the wheel and the pinch follow the input with no lag behind it */
.svgContainer.bv-zoom-animert > svg {
  transition: transform 0.2s ease;
}

.boligvelger .bv-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  /* One pill: the buttons meet, and the shadow is around the pair and not around each */
  gap: 0;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/*
* The disclaimer is a single line of text in the same corner, so the buttons clear it by
* one line. Set --bv-zoom-bunn in the custom css for a disclaimer that needs more room.
*/
.boligvelger .bv-zoom-over-disclaimer {
  bottom: var(--bv-zoom-bunn, 48px);
}

/* Three classes, so the theme's own button styling does not reach in */
.boligvelger .bv-zoom .bv-zoom-knapp {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.9);
  color: #222;
  line-height: 0;
  cursor: pointer;
}

/* Only the ends of the pill are rounded */
.boligvelger .bv-zoom [data-bv-zoom="inn"] {
  border-radius: 3px 3px 0 0;
}

.boligvelger .bv-zoom [data-bv-zoom="ut"] {
  position: relative;
  border-radius: 0 0 3px 3px;
}

/*
* A line in the seam, so the two buttons read as two. As a pseudo element and not a border,
* so it does not eat into the 36px the button has to be.
*/
.boligvelger .bv-zoom [data-bv-zoom="ut"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
}

.boligvelger .bv-zoom .bv-zoom-knapp:hover {
  background-color: #fff;
}

/* The sign fades, not the button: an opacity here would leave a hole in the pill */
.boligvelger .bv-zoom .bv-zoom-knapp[disabled] {
  color: rgba(34, 34, 34, 0.3);
  cursor: default;
}

.boligvelger .bv-zoom .bv-zoom-knapp[disabled]:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.boligvelger .bv-zoom .bv-zoom-knapp svg {
  display: block;
}