* {
    font-family: 'IBMPlexSans', Arial, sans-serif;
    font-weight: 300;
    color: white;
    scrollbar-width: thin;
}

@font-face {
    font-family: "IBMPlexSans";
    src: url("../res/fonts/IBMPlexSans-Light.ttf") format('truetype'),;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Anek Gurmukhi";
    src: url("../res/fonts/AnekGurmukhi-Medium.ttf") format('truetype'),;
    font-weight: 400;
    font-style: normal;
}


.nascosto {
    display: none !important;
}


.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--color-dark-one);
}

.trasparente {
    opacity: 0 !important;
}

.flex-flow-col {
    display: flex !important;
    flex-flow: column !important;
}


#cnt_ifr {
    position: fixed;
    box-sizing: content-box;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1010;
    animation: fade-in var(--local-anim-time-one) ease-out;
}

    #cnt_ifr div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100dvh;
        background-color: rgba(0, 0, 0, 0.60);
    }

    #cnt_ifr iframe {
        position: absolute;
        left: min(10vw, 10dvh);
        top: min(2vw, 2dvh);
        width: calc(100vw - min(20vw, 20dvh));
        height: calc(100dvh - min(4vw, 4dvh));
        background-color: var(--color-dark-one);
        border: none;
        animation: slide-up var(--local-anim-time-one) ease-out;
    }


.loader {
    width: 100%;
    height: 100%;
    border: 15px solid var(--color-dark-three);
    border-radius: 50%;
    border-top: 15px solid var(--color-highlight-two);
    animation: spinner 4s linear infinite;
}


.btn-std {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin: 5px 5px;
    padding: 0;
    background-color: var(--color-dark-two);
    border: none;
    border-radius: 2px;
    font-size: 14px;
    color: white;
    cursor: pointer;
    box-shadow: var(--shadow-half-level);
    transition: width var(--time-btn-slide) ease-in;
    animation: fade-in 0.5s;
}

    .btn-std:hover, .btn-std:focus {
        width: 100px;
        background-color: var(--color-highlight-one);
        transition: width var(--time-btn-slide) ease-in;
    }

    .btn-std:hover > p, .btn-std:focus > p {
        display: block;
        animation: fade-in 0.5s;
    }

    .btn-std:hover > img, .btn-std:focus > img {
        display: none;
    }

    .btn-std img {
        aspect-ratio: 1/1;
        height: 70%;
        object-fit: contain;
    }

    .btn-std p {
        display: none;
        color: var(--color-text);
    }


.btn-hgl{
    background-color: var(--color-highlight-two);
}

.selezionato {
    background-color: var(--color-highlight-one);
}

.btn-pop {
    width: 20px;
    height: 20px;
    margin: 2px 2px;
    background-color: var(--color-dark-two);
    border: none;
    border-radius: 2px;
    font-size: 10px;
    color: white;
    cursor: pointer;
    box-shadow: var(--shadow-half-level);
}

    .btn-pop:hover {
        background-color: var(--color-highlight-one);
    }

.msg-ok {
    padding: 0 5px;
    border: 1px solid green !important;
    border-radius: 2px;
    background-color: rgb(0, 255, 0, 0.25);
}


.msg-err {
    padding: 0 5px;
    border: 1px solid red !important;
    border-radius: 2px;
    background-color: rgba(255, 0, 0, 0.25);
}


.cnt_infobox {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 10px;
    pointer-events: none;
    z-index: 2000;
}


.infobox {
    overflow: hidden;
    max-width: min(500px, calc(100vw - 20px)); /*20px: padding di .cnt_infobox*/
}

    .infobox > p {
        width: fit-content;
        max-width: min(500px, calc(100vw - 20px)); /*20px: padding di .cnt_infobox*/
        max-height: 80dvh;
        overflow-y: hidden;
        overflow-wrap: anywhere;
        white-space: normal;
        hyphens: auto;
        margin: 0;
        color: var(--color-text);
        background-color: var(--color-highlight-one);
        padding: 5px;
        border-radius: 2px;
        box-shadow: var(--shadow-one-level);
        transform: translateX(calc(100% + 10px));
        opacity: 0;
        transition: transform 0.5s, opacity 0.5s;
    }

    .infobox.infobox-showtext > p {
        transform: translateX(0);
        opacity: 1;
    }

/* Manù a comparsa con pulsante contenitore */
.btn-menu {
    position: relative;
}

.menu-dropdown {
    position: absolute;
    bottom: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    z-index: 200;
}

    .menu-dropdown > .btn-std {
        width: 100px;
    }

.btn-menu:focus > .menu-dropdown {
    max-height: fit-content;
    opacity: 1;
    transform: translateY(0px);
}

/* --------------------------------------------------------------------------------
 * ELEMENTI GENERICI
 */

input[type=text],
input[type=password],
input[type=number],
input[type=date],
textarea,
select {
    padding: 0 5px;
    color: var(--color-text);
    background-color: var(--color-dark-one);
    border: none;
    box-shadow: var(--shadow-inset-half-level);
    transition: 0.25s;
}

    input[type=text]:focus,
    input[type=password]:focus,
    input[type=number]:focus,
    input[type=date]:focus,
    textarea:focus,
    select:focus {
        padding: 5px;
        border: none;
        outline: none;
        border: 1px solid var(--color-complementary-one);
        box-shadow: 0 0 4px 1px var(--color-complementary-one);
    }

    input[type=text]::placeholder{
        color: var(--color-text);
    }

    input[type=text].input-readonly,
    select.input-readonly{
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

input[type=checkbox] {
    background-color: var(--color-dark-one);
}

input[type="file"]::file-selector-button,
.btn-as-input-file{
    width: fit-content;
    height: 35px;
    padding: 0 5px;
    background-color: var(--color-dark-three);
    border: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    color: white;
    cursor: pointer;
    box-shadow: var(--shadow-half-level);
}

    input[type="file"]::file-selector-button:hover,
    input[type="file"]::file-selector-button:focus,
    .btn-as-input-file:hover, .btn-as-input-file:focus {
        background-color: var(--color-highlight-two);
    }

a {
    color: aqua;
}


/* --------------------------------------------------------------------------------
 * CLASSI LEAFLET
 */
.leaflet-container * {
    color: var(--color-text);
}

.leaflet-control {
    margin: 5px !important;
}

.leaflet-control-layers {
    background-color: var(--color-dark-two) !important;
    border: none !important;
    box-shadow: var(--shadow-half-level) !important;
}

.leaflet-control-layers-expanded {
    background-color: var(--color-dark-two);
    border-radius: 2px !important;
}

.leaflet-control-layers-toggle {
    width: 35px !important;
    height: 35px !important;
    background-color: var(--color-dark-two);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background-color: var(--color-dark-one) !important;
}

.leaflet-popup-content {
    margin: 5px !important;
    display: flex;
    flex-flow: column;
    align-items: center;
}

    .leaflet-popup-content * {
        margin: 1px !important;
    }


/* --------------------------------------------------------------------------------
 * CLASSI PSV
 */
.psv-tooltip-content {
    height: fit-content !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}




/* --------------------------------------------------------------------------------
 * MODALITÀ PORTRAIT
 */
@media screen and (max-width: 768px) {
    .btn-menu {
        anchor-name: --menu-anchor;
    }
    .menu-dropdown {
        position: fixed;
        position-anchor: --menu-anchor;
        bottom: anchor(top);
        right: calc(anchor(right) - 5px);
        top: auto;
        left: auto;
        width: 110px;
    }

    .menu-dropdown > .btn-std {
        width: 100px;
    }

}



/* --------------------------------------------------------------------------------
 * MODALITÀ TOUCH
 */
@media screen and (pointer: coarse) {
    .btn-std {
        min-width: 48px !important;
        min-height: 48px !important;
    }

}





/* --------------------------------------------------------------------------------
 * ANIMAZIONI
 */

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes slide-down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}



/* --------------------------------------------------------------------------------
 * VARIABILI
 */

:root {
    --interface-color: var(--color-dark-one) /*rgba(0,0,0,0.25) 0%*/;
    --interface-height: 40px;
    --shadow-half-level: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
    --shadow-inset-half-level: 0 0 2px 1px rgba(0, 0, 0, 0.5) inset;
    --shadow-one-level: 0px 0px 5px 1px black;
    --shadow-inset-one-level: 0 0 5px 2px black inset;
    --time-btn-slide: 0.1s;
    /*colori*/ /* https://m2.material.io/inline-tools/color/ */
    --color-dark-one: #272a34;
    --color-dark-two: #3a3e4b; /*#4a5061*/
    --color-dark-three: #5c6377;
    --color-highlight-one: #881214;
    --color-highlight-two: #b52828; /*#c3312a*/
    --color-highlight-three: #c44342;
    --color-complementary-one: #128886;
    --color-complementary-two: #2da5a6;
    --color-complementary-three: #82cacc;
    --color-text: white;
    --star-color-active: var(--color-highlight-two);
    --star-color: grey;
    --star-size: 40px;
}