html {
    height: 100%;
    overflow: auto;
}

body {
    height: 100%;
    font-family: 'Overpass', Arial, sans-serif;
}

* {
    box-sizing: border-box;

    /*font-family: sans-serif;*/
    line-height: 1.5;
    margin: 0;
}

/*:root {
    --dark-grey: #555555;
    --grey: #C3C4C7;
    --light-grey: #C0C0C0;
    --lighter-grey: #D3D3D3;
    --blue:  #113f8a;
    --mblue: #2957A2;
    --light-blue: rgb(145,202,242);
    --red: #990000;
}*/

@keyframes map_loading {
    0% {
        background-position: 0% 0%
    }
    100% {
        background-position: -135% 0%
    }
}

.map_loading {
    /*background: linear-gradient(-90deg, #FBF6DF 0%, white 50%, #FBF6DF 100%);*/
    background: linear-gradient(-90deg, white 0%, #FBF6DF 50%, white 100%);
    background-size: 400% 400%;
    animation: map_loading 2s ease-in-out infinite;
    cursor: progress;
}

@media (prefers-color-scheme: dark) {
    .map_loading {
        background: linear-gradient(-90deg, black 0%, rgb(25, 28, 36) 50%, black 100%);
        background-size: 400% 400%;
        animation: map_loading 2s ease-in-out infinite;
        cursor: progress;
    }
}

.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    /*stroke-width: 1px;*/
    stroke: currentColor;
    fill: currentColor;
    position: relative;
    vertical-align: middle;
    /*top: -.125em;*/
    top: -0.1em;

    /*vertical-align: .5em;*/
    /*vertical-align: -0.2em;*/
}

svg.is-big {
	width: 1.4em;
	height: 1.4em;
}

svg.is-medium {
	width: 1.1em;
	height: 1.1em;
}

svg.is-small {
	width: 0.8em;
	height: 0.8em;
}

/*

    @font-face {
        font-family: CaracteresL1;
        src: url('/fonts/CaracteresL1.ttf') format('truetype');
    }

    $ fc-query --format='%{charset}\n'  CaracteresL1.ttf
    20-7e a0-a3 a5-b6 b9-cf d1-f6 f8-fc fe 102-103 152-153 37e 20ac 2219 221e 2264-2265

    removed /s : U+00DF

*/
@font-face {
    font-family: CaracteresL1;
    src: url('/fonts/CaracteresL1.ttf') format('truetype');
    unicode-range: U+0021, U+0027-0029, U+002B-0039, U+0041-005A, U+005C, U+0061-007A, U+00B6, U+00C1-00C2, U+00C4, U+00C7-00C9, U+00CA-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E1, U+00E0, U+00E2, U+00E4, U+00E7-00E9, U+00EA-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+0152-0153, U+20AC, U+2219;
}

@font-face {
    font-family: CaracteresL2;
    src: url('/fonts/CaracteresL2.ttf') format('truetype');
    unicode-range: U+0021, U+0027-0029, U+002B-0039, U+0041-005A, U+005C, U+0061-007A, U+00B6, U+00C1-00C2, U+00C4, U+00C7-00C9, U+00CA-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E1, U+00E0, U+00E2, U+00E4, U+00E7-00E9, U+00EA-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+0152-0153, U+20AC, U+2219;
}

@font-face {
    font-family: CaracteresL4;
    src: url('/fonts/CaracteresL4.ttf') format('truetype');
    unicode-range: U+0021, U+0027-0029, U+002B-0039, U+0041-005A, U+005C, U+0061-007A, U+00B6, U+00C1-00C2, U+00C4, U+00C7-00C9, U+00CA-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E1, U+00E0, U+00E2, U+00E4, U+00E7-00E9, U+00EA-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+0152-0153, U+20AC, U+2219;
}

.fr0 {
    font-family: CaracteresL1 !important;
    font-size: 2rem !important;
}
.fr1 {
    font-family: CaracteresL2, 'Overpass', Arial, sans-serif !important;
    font-size: 2rem !important;
}
.fr2 {
    font-family: CaracteresL4, 'Overpass', Arial, sans-serif !important;
    font-size: 1.5rem !important;
}

:lang(ja) .fr1, :lang(ko) .fr1, :lang(zh) .fr1,
:lang(ja) .fr2, :lang(ko) .fr2, :lang(zh) .fr2 {
    font-family: 'Overpass', Arial, sans-serif !important;
}

:lang(ru) .fr1, :lang(ru) .fr2 {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
}

:lang(ru) .fr1, :lang(ja) .fr1, :lang(ko) .fr1, :lang(zh) .fr1,
:lang(ru) .fr2, :lang(ja) .fr2, :lang(ko) .fr2, :lang(zh) .fr2 {
    font-weight: 600 !important;
    letter-spacing: -0.04em !important;
}

:lang(ru) .fr1, :lang(ja) .fr1, :lang(ko) .fr1, :lang(zh) .fr1 {
    text-transform: uppercase;
}

:lang(ru) .fr2, :lang(ja) .fr2, :lang(ko) .fr2, :lang(zh) .fr2 {
    font-style: italic !important;
}

.been-oblique {
    font-family: "Fira Sans Condensed", sans-serif;
    text-transform: uppercase;
    font-style: oblique;
}

.clickable-icon {
    pointer-events: all;
    cursor: pointer;
    user-select: none;
}

.clickable-icon:hover {
    color: black !important;
}

@media (prefers-color-scheme: dark) {
    .clickable-icon:hover {
        color:  rgb(66, 88, 255) !important;
    }
}

.centered-form {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.centered-form-element-width {
  width: 320px;
}

.is_un_plus {
    font-style: oblique;
}

.overlay {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    max-width: 425px;
    max-height: calc(80% - 2rem);
    z-index: 1;
    margin: 2rem;
    padding: 1rem;
    float: right;
    overflow: hidden;
    text-overflow: fade;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
}

@media screen and (min-width: 475px) {
    .overlay {
        width: 425px;
    }
}

@media (prefers-color-scheme: dark) {
    .overlay {
        background: rgb(20, 22, 26, 0.8);
    }
}

@media screen and (max-width: 640px) {
    .overlay  {
        margin: 0;
        /*margin-top: -1.5rem;*/
        margin-top: 1rem;
        padding-top: 0px;
        position: static;
        max-width: none;
        width: 100%;
        max-height: none;
    }
}

.has-tooltip {
    position: relative;
}

.has-tooltip::before {
    pointer-events: none;
    content: attr(data-tooltip);
    position: absolute;
    bottom: 95%;
    left: -5px;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 5px 10px;
    color: white;
    font-size: 0.75rem;
    border-radius: 4px;
    margin-bottom: 10px;
    z-index: 111;
    background: black;
    white-space: pre;
}

.has-tooltip:hover::before {
    opacity: 0.9;
}

@media (prefers-color-scheme: dark) {
    .has-tooltip::before {
        background: #444444;
    }
}

.floating-tooltip {
    display: none;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    color: white;
    padding: 5px 10px; /**/
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: pre;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 111;
}

@media (prefers-color-scheme: dark) {
    .floating-tooltip {
        background: #444444;
    }
}

.been-table {
    width: 100%;
}
@media screen and (min-width: calc(450px + 1rem)) {
    .been-table {
        width: 450px;
    }
}

div.disabled {
    pointer-events: none;
    /* for "disabled" effect */
    opacity: 0.5;
}


@media (prefers-color-scheme: light) {
    :root {
        --bulma-link: #485fc7;
        --bulma-link-text: #485fc7;
        --bulma-navbar-dropdown-arrow: #485fc7;

        --legendary-color: #000;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --legendary-color: #722F37;
    }
}


/*

    https://stackoverflow.com/questions/69242615/prevent-sign-in-with-google-button-flickering-while-loading-when-centered-vertic

    For some reason, Google created two div's to house identical buttons.
    The second, with the iframe, replaces the first when the proper font loads.
    The order in which the css is modified by Google means that no matter how you
    try to correct the flash with pure css, it will still show up in some way.
    I went so far as to overlay the div's using position:absolute but the margin
    gets modified on the first div so it still shifts up before vanishing.

    The only thing I found to work is hide one of the div's permanently.
    Either way works, the difference is the button font.
    This one lets the iframe only version load:

*/
/*
.g_id_signin > div > div:first-child{
    display: none;
}
*/
   
/*

    This one loads the initial div only, so the font is off, but it shows up faster
    and the auth flow still works:
    
*/
/*
.g_id_signin > div > div:last-child{
display: none;
}
*/

/* Bulma bugfix? */
.navbar-dropdown {
    background-color: var(--bulma-navbar-dropdown-background-color) !important;
}

/*

https://developers.google.com/recaptcha/docs/faq

I'd like to hide the reCAPTCHA badge. What is allowed?

*/

.grecaptcha-badge {
    visibility: hidden;
}


.animated-ellipsis::after {
    display: inline-block;
    animation: animated-ellipsis steps(1,end) .75s infinite;
    content: '';
}

@keyframes animated-ellipsis {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}


#small-overlay {
    /*font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;*/
    position: absolute;
    width: 300px;
    max-width: 300px;
    top: max(10px, env(safe-area-inset-top, 0px)); /* Adjusts for iPhone notch */
    left: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.96);
    z-index: 2;
    visibility: hidden;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Overpass', Arial, sans-serif;
    /*height: calc(2.5rem + 20px);*/
}

@media (prefers-color-scheme: dark) {
    #small-overlay {
        background: rgb(20, 22, 26, 0.8);
    }
}

#demo-map  {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100%;
}

@media screen and (max-width: 640px) {
    #demo-map  {
        position: relative;
        height: 90vw;
    }
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}