body {
    background-color: var(--bs-gray-300);
    height: 100%;
}

#page-container {
    background-color: var(--bs-gray-100);
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 0rem;
    padding-bottom: 0;
    width: 85%;
    min-width: fit-content;

    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%);
}

#page-content {
    margin: 1rem;
    min-width: fit-content;
}

#ov-map-holder {
    position: relative;
    width: 100%;
    height: 600px;
}

#ov-map-fullscreen-button {
    position: absolute;
    bottom: 2rem;
    right: 0;
}

#ov-url-container {
    padding-left: 1rem;
    padding-right: 1rem;
    border: 1px solid black;
    border-top: none;
    display: block;
    width: 100%;
}

@media (min-width: 992px) {
    #page-container {
        width: fit-content;
        min-width: 843px; /* 85% of 991px -> for a smooth transition when making window larger */
        max-width: 1152; /* 60% of 1920p */
    }

    #ov-map-holder {
        width: 1152px;
        height: 700px;
        margin-left: -16px; /* offset margin of page-content */
    }
}

#banner-img {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

a {
    color: var(--bs-orange);
}

a:hover {
    color: #CA6510;
}

.clickable:hover {
    cursor: pointer;
}

.my-tooltip:hover {
    cursor: help;
}

#faq-content {
    padding-left: 1rem;
}

.collapsed.collapsed-title::before, .collapsed > td.geocode::before {
    content: "⮞ ";
}

/*#faq-content > h4::before, td.geocode::before*/
.collapsed-title::before, td.geocode::before {
    content: "⮟ ";
}


.difficulty {
    padding-left: .25rem;
    padding-right: .25rem;

    border: 1px solid black;
    border-radius: 20%;
}

.difficulty-x {
    background-color: #6C757D;
    color: white;
}

.difficulty-1 {
    background-color: #D2F4EA;
}

.difficulty-2 {
    background-color: #72e078;
}

.difficulty-3 {
    background-color: #479F76;
    color: white;
}

.difficulty-4 {
    background-color: #146C43;
    color: white;
}

.difficulty-5 {
    background-color: #FFDA6A;
}

.difficulty-6 {
    background-color: #FFCD39;
}

.difficulty-7 {
    background-color: #FD9843;
}

.difficulty-8 {
    background-color: #e4a021;
}

.difficulty-9 {
    background-color: #E35D6A;
}

.difficulty-10 {
    background-color: #DC3545;
    color: white;
}

.hidden {
    display: none !important;
}

ol.nested-numbered {
    counter-reset: item;
}

ol.nested-numbered > li {
    display: block
}

ol.nested-numbered > li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
}

ol.no-numbering, ul.no-numbering {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
}

table.show-sort-icons th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: " \25B4\25BE";
    white-space: nowrap;
}

tr.geocache-entry, tr.geocache-table-header {
    display: grid;
    grid-template-columns: 5rem 8rem 14rem 3rem 7rem 10rem 5rem 7rem;
    justify-content: flex-start;
}

td.expandable-cell {
    display: grid;
    grid-column: 1/-1;
}

.filterbox {
    border: 1px solid var(--bs-gray-500);
    border-radius: 5px;
    margin: .25rem;
    padding: .5rem;
    width: min-content;
    background-color: var(--bs-gray-200);
}

.filterbox > h6 {
    text-align: center;
}

/* prevent wrapping (caused by width: min-content of parent) for headings and inputs */
.filterbox > h6,label {
    white-space: nowrap;
}

/* overwrite default (--bs-gray-200) which is used by our background already */
.filterbox > .input-group > .input-group-text {
    background-color: var(--bs-gray-300);
}