:root {
    --highest-color: #c70b0b;
    --high-color: #ff8800;
    --low-color: #ffff00;
    --lowest-color: #558B2F;
    --tulvia-blue: rgb(51, 71, 125);
    --tulvia-brightlightblue: rgb(11, 184, 198);
    --tulvia-lightblue: rgb(156, 201, 205);
    --tulvia-lightgrey: rgb(230, 230, 230);
    --tulvia-black: #000;
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}


/*
 * Property styles in unhighlighted markers
 */
.property {
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: thin solid black;
    color: #263238;
    display: flex;
    font-size: 14px;
    gap: 15px;
    height: 40px;
    justify-content: center;
    padding: 4px;
    position: relative;
    transition: all 0.3s ease-out;
    width: 40px;
}

.highest {
    color: var(--highest-color);
}

.high {
    color: var(--high-color);
}

.low {
    color: var(--low-color);
}

.lowest {
    color: var(--lowest-color);
}

.text-tulvia-blue {
    color: var(--tulvia-blue);
}

.text-tulvia-brightlightblue {
    color: var(--tulvia-brightlightblue);
}

.text-tulvia-lightblue {
    color: var(--tulvia-lightblue);
}

.text-tulvia-white {
    color: var(--tulvia-lightgrey);
}

.text-tulvia-black {
    color: var(--tulvia-black);
}

.property .highest {
    background-color: var(--highest-color);
    color: #000000;
}

.property .high {
    background-color: var(--high-color);
    color: #000000;
}

.property .low {
    background-color: var(--low-color);
    color: #000000;
}

.property .lowest {
    background-color: var(--lowest-color);
    color: #000000;
}

.property::after {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #FFFFFF;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 95%;
    transform: translate(-50%, 0);
    transition: all 0.3s ease-out;
    width: 0;
    z-index: 1;
}

.property .icon {
    align-items: center;
    display: block;
    justify-content: center;
}

.property .icon span {
    height: 30px;
    width: auto;
}
.property .icon .arrow {
    color: #000000;
    display: block;
    font-size: small;
}

.property .details {
    display: none;
    flex-direction: column;
    flex: 1;
}

.property .features {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.property .features > div {
    align-items: center;
    background: #F5F5F5;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    font-size: 10px;
    gap: 5px;
    padding: 5px;
}

/*
 * Property styles in highlighted state.
 */
.property.highlight {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
    height: auto;
    padding: 8px 15px;
    width: auto;
}

.property.highlight::after {
    border-top: 9px solid #FFFFFF;
}

.property.highlight .details {
    display: flex;
}


.property.highlight .icon {
    vertical-align: center;
    width: auto;
}

.property.highlight .icon span {
    width: auto;
    padding: 10px;
    height: 50px;
    color: #000000;
    font-size: xx-large;
}

.property.highlight .icon .arrow {
    padding: 10px;
    color: #000000;
    display: flex;
    font-size: x-large;
}

/*
 * Lowest level icon colors.
 */
.property.highlight:has(.lowest) .icon {
    color: var(--lowest-color);
}

.property:not(.highlight):has(.lowest) {
    background-color: var(--lowest-color);
}

.property:not(.highlight):has(.lowest)::after {
    border-top: 9px solid var(--lowest-color);
}

/*
 * Low level icon colors.
 */
.property.highlight:has(.low) .icon {
    color: var(--low-color);
}

.property:not(.highlight):has(.low) {
    background-color: var(--low-color);
}

.property:not(.highlight):has(.low)::after {
    border-top: 9px solid var(--low-color);
}

/*
 * High level icon colors.
 */
.property.highlight:has(.high) .icon {
    color: var(--high-color);
}

.property:not(.highlight):has(.high) {
    background-color: var(--high-color);
}

.property:not(.highlight):has(.high)::after {
    border-top: 9px solid var(--high-color);
}

/*
 * Highest level icon colors.
 */
.property.highlight:has(.highest) .icon {
    color: var(--highest-color);
}

.property:not(.highlight):has(.highest) {
    background-color: var(--highest-color);
}

.property:not(.highlight):has(.highest)::after {
    border-top: 9px solid var(--highest-color);
}

.tulvia-header {
    letter-spacing:0;
    line-height:1.2;
    position:absolute;
    white-space:pre
}

.bg-darkblue {
    background: var(--tulvia-blue);
}

.bg-brightblue {
    background: var(--tulvia-brightlightblue);
}

.bg-lightblue {
    background: var(--tulvia-blue);
}

.bg-lightgrey {
    background: var(--tulvia-lightgrey);
}

.bg-black {
    background: var(--tulvia-black);
}

.text-xxl {
    font-size: xxx-large;
}

.tulvia-footer {
    width: 100%;
    background-color: transparent;
    color: var(--tulvia-lightgrey);
    text-align: center;
}

.tulvia-drop:not(.hidden), .tulvia-wave:not(.hidden), .tulvia-loader-backdrop:not(.hidden) {
    display: block;
}

.tulvia-loader-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 9000;
}

.tulvia-drop {
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-5%, -50%);
    z-index: 9999;
    width: 20px;
    height: 20px;
    background: var(--tulvia-brightlightblue);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-animation-name: drip;
    -webkit-animation-name: drip;
    animation-name: drip;
    -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
    -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
    animation-timing-function: cubic-bezier(1,0,.91,.19);
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.tulvia-drop:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 30px solid var(--tulvia-brightlightblue);
    top: -22px;
}

.tulvia-wave {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9900;
    opacity: 0;
    width: 0.01vw;
    height: 0.01vh;
    border: var(--tulvia-brightlightblue) 7px solid;
    -moz-border-radius: 60vw / 30vh;
    -webkit-border-radius: 60vw / 30vh;
    border-radius: 60vw / 30vh;
    -moz-animation-name: ripple;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.tulvia-wave:after {
    content: "";
    position: absolute;
    opacity: 0;
    top: -5px;
    left: -5px;
    transform: translate(-5%, -5%);
    width: 0.01vw;
    height: 0.01vh;
    border: var(--tulvia-brightlightblue) 5px solid;
    -moz-border-radius: 60vw / 30vh;
    -webkit-border-radius: 60vw / 30vh;
    border-radius: 60vw / 30vh;
    -moz-animation-name: ripple-2;
    -webkit-animation-name: ripple-2;
    animation-name: ripple-2;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@media (max-width: 360px) {
    .turnstile-wrap {
        transform: scale(0.90);
        transform-origin: top center;
    }
}

@media (max-width: 330px) {
    .turnstile-wrap {
        transform: scale(0.85);
        transform-origin: top center;
    }
}

@keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        width: 40vw;
        height: 20vh;
        border-width: 0.01vw;
        top: 50%;
        left: 50%;
        opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        width: 30vw;
        height: 15vh;
        border-width: 0.01vw;
        top: 50%;
        left: 50%;
    }
}

@keyframes drip {
    to {
        top: 50%;
    }
}

/*@media (prefers-color-scheme: dark) {
    .text-tulvia-black {
        color: var(--tulvia-lightgrey);
    }
    .bg-lightblue {
        background: var(--tulvia-black);
    }
}*/