/* Timeline */

body {
    overflow: hidden;
}

#timeline-div {
    position: absolute;
    cursor: ew-resize;
}

#timeline-div>img {
    position: relative;
    min-height: 360px;
    height: 100vh;
}

#timeline-div>div {
    /* size & position are dynamically injected inline by JS */
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

#timeline-div>div>a {
    display: flex;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    z-index: 10;
    background-size: cover;
}

#timeline-div>div>a {
    opacity: 0.7;
}

#timeline-div>div>a:hover {
    opacity: 1;
}

#timeline-div>div>a:focus-visible {
    outline-width: 0px;
}


/* Information Pop-up */

.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
    border-top-color: #fff !important;
    border-width: 0.7rem 0.7rem 0 0.7em !important;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #fff !important;
    border-width: 0 0.7rem 0.7em 0.7em !important;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before,
.bs-tooltip-right .arrow::before {
    border-right-color: #fff !important;
    border-width: 0.7rem 0.7rem 0.7em 0 !important;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before,
.bs-tooltip-left .arrow::before {
    border-left-color: #fff !important;
    border-width: 0.7rem 0 0.7rem 0.7em !important;
}

.tooltip[x-placement="top"] {
    left: -2px !important;
}

.tooltip[x-placement="bottom"] {
    left: -2px !important;
}

.tooltip[x-placement="right"] {
    top: -5px !important;
}

.tooltip[x-placement="left"] {
    top: -5px !important;
}

.tooltip-inner {
    font-family: arial, sans-serif;
    background-color: #fff !important;
    color: #000 !important;
    text-align: left !important;
    padding: 15px !important;
    max-width: 80vh !important;
    border-radius: 8px !important;
}

.tooltip.show {
    opacity: 1 !important;
}

.tooltip-inner h2 {
    color: #8C0036;
    font-weight: bold;
    font-size: 1.6rem;
}

.tooltip-inner p {
    font-size: 1rem;
    color: #262626;
    margin: 0;
}

.sm.tooltip-inner {
    width: 20vh;
}

.md.tooltip-inner {
    width: 40vh;
}

.lg.tooltip-inner {
    width: 60vh;
}

.xl.tooltip-inner {
    width: 80vh;
}


/* For smartphones and tablets */

@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) {
    body {
        overflow-x: auto;
        overflow-y: hidden;
    }
}