:root {
    --oc-ex-heading-width: 260px;
    --oc-ex-ratio: 0.91;
    --oc-ex-iheight: 73.5vh;
    --oc-ex-iwidth: calc(var(--oc-ex-iheight) - 3.5vh);
    --oc-ex-board-width: calc(var(--oc-ex-iwidth) * var(--oc-ex-ratio));
}

h2.welcometitle {
    font-size: 1.5rem;
    color: var(--hotspot-title-background);
    font-weight: 700;
}

.indicator {
    transform: rotate(45deg);
    top: 20px;
    left: 12px;
}

.room-popup-frame-background {
    /*opacity: 0;*/
    display: none;
}

.info-hotspot.visible {
    z-index: 1000;
}

.info-hotspot:not(.hotspot-iframe) iframe {
    opacity: 0;
    width: var(--oc-ex-board-width) !important;
    height: var(--oc-ex-iheight);
    pointer-events: none;
}

.info-hotspot:not(.hotspot-iframe).visible iframe {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out 0.2s;
    transition: opacity 0.3s ease-in-out 0.2s;
    /*pointer-events: all;*/
}

.info-hotspot .link-button {
    opacity: 0;
    pointer-events: none;
}

.info-hotspot.visible .link-button {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out 0.2s;
    transition: opacity 0.3s ease-in-out 0.2s;
    pointer-events: all;
}

.info-hotspot .hotspot-button-text {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out 0.2s !important;
    transition: opacity 0.3s ease-in-out 0.2s !important;
}

.info-hotspot.visible .hotspot-button-text {
    opacity: 1;
    padding: 1rem;
    background: #f06135a0;
    margin-left: calc(calc(calc(var(--oc-ex-board-width) - var(--oc-ex-heading-width)) / 2) * -1);

    -webkit-transition: opacity 0.3s ease-in-out 0.2s !important;
    transition: opacity 0.3s ease-in-out 0.2s !important;
}

/*--jdi-darker-orange*/