html,body {
    height: 100%;
}

#popup {
    position: absolute;
    width: intrinsic; /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(42vh, 360px);
    overflow-x: hidden;
    overflow-y: auto;
    left: 50%;
    top: -20px;
    z-index: 20;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}

#popup-checkbox {
    margin-left: 0px !important;
}

#popup-title {
    padding-left: 0px !important;
    min-width: 0;
    flex: 1 1 160px;
}

#popup-single-item {
    flex-wrap: wrap;
    padding: 0.5rem 0.65rem;
}

#popup-link {
    flex: 0 0 auto;
}

.ol-popup {
    position: absolute;
    background-color: rgb(62, 62, 62);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    padding-right: 40px;
    border-radius: 10px;
    border: 1px solid #2c2c2c;
    bottom: 12px;
    left: 30px;
    /* min-width: 280px; */
    width: intrinsic; /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;
    overflow: hidden;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: rgb(62, 62, 62);
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #626262;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "✖";
}
code {
    display: block;
    white-space: pre-wrap;
}

#info {
    position: absolute;
    height: 1px;
    width: 1px;
    z-index: 100;
}

/* .tooltip.in {
    opacity: 1;
}

.tooltip.top .tooltip-arrow {
    border-top-color: white;
}

.tooltip-inner {
    border: 2px solid white;
} */

.offcanvas-btn {
    right: 100%;
    top: 120px;
    visibility: visible;
}

.offcanvas-btn i:last-child,
.offcanvas.show .offcanvas-btn i:first-child {
    display: none;
}

.offcanvas.show .offcanvas-btn i:last-child {
    display: inline;
}

div.completed label {
  text-decoration: line-through;
  -webkit-text-decoration: line-through !important;
}

input[type="checkbox"]:checked + .item_content {
  text-decoration: line-through;
  -webkit-text-decoration: line-through !important;
}

div.completed img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.layer-button {
    cursor: pointer;
    text-decoration: underline;
}

#route-panel {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
    max-width: min(350px, calc(100vw - 24px));
}

#route-panel .card-body {
    padding: 0.75rem;
}

#route-current-title {
    max-width: 340px;
}

#popup-route-items {
    max-width: none;
    padding: 0.65rem;
}

.route-popup-item {
    max-width: none;
}

.route-popup-item .item_content {
    min-width: 0;
}

.route-popup-item label {
    white-space: normal;
}

@media (max-width: 991.98px) {
    #route-panel {
        bottom: 8px;
        left: 8px;
        right: 8px;
        max-width: none;
    }

    #route-current-title {
        max-width: none;
    }

    #popup-route-items {
        max-width: 80vw;
    }
}