/*Dichiarazione di variabili basi*/
:root {
    --theme-light: #F6FAFF;
    --theme-mid: #CEE4FF;
    --theme-sidebar: #EDF5FF;
    --theme-full: #70B0FF;
    --brand-1: #4b9cfe;
    --brand-2: #4b9cfe;
    --brand-3: #ffffff;
    --brand-4: #000000;
    --brand-5: #5271ff;
    --shadow-color: #2a3a8325;
    --disabled: #cfcfcf;
    --disabled-front: #7b7b7b;

    --header-height: 8vh;
    --header-pad: 1vw;
    
    --sidebar-width: 30%;
    --sidebar-height-mob: 16vh;

    --sidebar-width-mob: 90vw;
    --sidebar-padding: 15px;
}
#rloc {
    display: none !important;
}


/* Creazione di un font personalizzato */
@font-face {
    font-family: GoogleSans;
    src: url(../Fonts/ProductSans-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: GoogleSans;
    src: url(../Fonts/ProductSans-Medium.ttf);
}
@font-face {
    font-family: GoogleSans;
    src: url(../Fonts/ProductSans-Regular.ttf);
    font-weight: lighter;
}


/*Applicazione di attributi a tutta la pagina*/
* {
    padding: 0px;
    margin: 0px;
    font-family: GoogleSans;
}


/*Impostazioni della pagina*/
body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 0;
}

.Spacer {
    flex: 1;
}

/*HEADER*/
.HeaderIcon {
    color: var(--theme-full);
}
.HeaderSpacer {
    flex: 1;
}
.HeaderTitle {
    margin-left: auto;
    gap: 30px;
    justify-self: self-end;
    margin: 0;
    font-size: calc(var(--header-height)/2);
}
.HeaderTitleHaul {
    color: var(--brand-1);
}
.HeaderButton {
    display: flex;
    width: 5vh;
    height: 5vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.5vw;
    padding: 0.1vw;

    border: none;
    border-radius: 1000px;
    background-color: var(--theme-mid);
    transition: background-color .2s ease-in-out;

    cursor: pointer;
}
.HeaderButton:hover {
    background-color: var(--theme-full);
}
.HeaderButton:hover > .HeaderIcon {
    color: var(--theme-mid);
}
#Header{
    display: flex;
    position: fixed;
    height: var(--header-height);
    width: calc(100% - var(--header-pad)*2);
    padding-left: var(--header-pad);
    padding-right: var(--header-pad);
    flex-direction: row;
    align-items: center;
    justify-content: center;

    font-family: GoogleSans;
    font-size: 30px;
    background-color: var(--theme-light);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    z-index: 5 !important;
    box-shadow: 0 6px 20px 0 var(--shadow-color);

    animation: 0.4s ease-out HeaderIN;
}
.HeaderLink {
    text-decoration: none;
}


/*SIDEBAR*/
#Sidebar {
    position: fixed;
    max-height: 60vh;
    height: fit-content;
    width: var(--sidebar-width);
    background-color: var(--theme-sidebar);
    top: 15vh;
    left: 2vw;
    z-index: 1;
    overflow: hidden !important;

    display: flex;
    flex-direction: column;
    padding: var(--sidebar-padding);
    bottom: var(--header-height);
    gap: 10px;
    border-radius: 20px;
    box-shadow: 5px 6px 10px 0 var(--shadow-color);
    
    animation: 0.6s ease-out SidebarIN;
}
#TripSidebar {
    position: fixed;
    max-height: 60vh;
    height: fit-content;
    width: var(--sidebar-width);
    background-color: var(--theme-sidebar);
    top: 15vh;
    left: 2vw;
    z-index: 1;
    overflow: hidden !important;

    display: flex;
    flex-direction: column;
    padding: var(--sidebar-padding);
    bottom: var(--header-height);
    gap: 10px;
    border-radius: 20px;
    box-shadow: 5px 6px 10px 0 var(--shadow-color);
    
    animation: 0.6s ease-out SidebarIN;
}
#sidebar-content {
    display: flex;
    flex-direction: column;

    gap: 10px;
    border-radius: 20px;

    overflow-y: scroll !important;
}
.ContieniFermata {
    display: flex;
    flex-direction: row;
}
.Sidebar-Icon {
    color: var(--theme-full);
    width: 10px;
    height: 10px;
}
.SidebarButton {
    border: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--theme-full);

    gap: 10px;

    width: 33%;

    padding-top: 5px;
    padding-bottom: 5px;

    font-size: medium;

    border-radius: 20px;
    background-color: var(--theme-mid);

    transition: background-color 0.25s ease-in-out;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    cursor: pointer;
}
.SidebarButton:hover {
    color: var(--theme-light);
    background-color: var(--theme-full);
}
.SidebarButton:active {
    background-color: var(--theme-light);
}

.SidebarButton[disabled] {
    background-color: var(--disabled);
    color: var(--disabled-front);
    cursor: not-allowed;
}

.BackContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

#BackTitle {
    color: var(--brand-1);
}

#SidebarBack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--theme-full);

    width: 40px;
    height: 40px;

    font-size: medium;

    border-radius: 20px;
    background-color: var(--theme-mid);

    transition: background-color 0.25s ease-in-out;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    cursor: pointer;
}

#SidebarBack:hover {
    color: var(--theme-light);
    background-color: var(--theme-full);
}

#SidebarBack:active {
    background-color: var(--theme-light);
}

#Barcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--theme-full);

    width: 40px;
    height: 40px;

    font-size: medium;

    border-radius: 20px;
    background-color: var(--theme-mid);

    transition: background-color 0.25s ease-in-out;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#Barcode:hover {
    color: var(--theme-light);
    background-color: var(--theme-full);
}

#Barcode:active {
    background-color: var(--theme-light);
}

.SidebarButtonWide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--theme-full);

    gap: 10px;

    width: 100%;

    padding-top: 5px;
    padding-bottom: 5px;

    font-size: medium;

    border-radius: 20px;
    background-color: var(--theme-mid);

    transition: background-color 0.25s ease-in-out;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.SidebarButtonWide:hover {
    color: var(--theme-light);
    background-color: var(--theme-full);
}
.SidebarButtonWide:active {
    background-color: var(--theme-light);
}
.SidebarButtonEnd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--theme-light);

    gap: 10px;

    width: 33%;

    padding-top: 5px;
    padding-bottom: 5px;

    font-size: medium;

    border-radius: 20px;
    background-color: var(--theme-full);

    transition: background-color 0.1s ease-in-out;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    cursor: pointer;
}
.SidebarButtonEnd:hover {
    color: white;
    background-color: rgb(224, 87, 87);
}
.SidebarButtonEnd:active {
    color: white;
    background-color: rgb(128, 19, 19);
}
#SidebarButtonContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
span.size-32 {
    color: var(--theme-full);
    font-size: 40px;
    font-variation-settings: 'OPSZ' 40;
}
.SidebarFermata {
    transition: all 1s ease-in-out;
}
.SidebarFermata.anim {
    animation: FermataAnim 0.4s ease-in-out;
}


/*RICHIESTE*/
#Richieste {
    padding: 20px;

    border-radius: 20px;
    background-color: var(--theme-mid);

    transition: background-color 0.25s ease-in-out;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
#Richieste:hover {
    background-color: var(--theme-full);
}
#Richieste:active {
    background-color: var(--theme-light);
}
#RichiesteTitle {
    margin: 0;

    font-family: GoogleSans;
    font-weight: normal;
    font-size: 20px;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
#RichiesteContainer {
    display: flex;
    flex-direction: column;

    gap: 10px;
    padding: 10px;

    border-radius: 20px;
    background-color: var(--theme-mid);

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.RichiesteProp {
    display: flex;
    flex-direction: row;

    gap: 20px;

    height: fit-content;
}


/*MAPPA*/
#map {
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 0 !important;
}


/*PAGINA DEL PROFILO*/
.Profilo {
    display: flex;
    flex-direction: column;
    bottom: 5%;
    border-radius: 15px;
    left: 7%;
    height: 75%;
    width: 86%;
    position: fixed;
    background-color: var(--theme-light);
    animation: 0.3s ease-out ProfiloIN;

    align-items: center;
}
.ProfiloShifter {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    transform: translateY(-10%);
}
.ProfiloNome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-left: 10px;
}
.CronologiaSpacer {
    flex: 0.1;
}
.ContieniCronologia {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    height: fit-content;
}
.ProfiloCentro{
    width: fit-content;
    display: flex;
}
.ProfiloImage{
    width: 110px;
}
.ProfiloTitolo{
    font-size: 26px;
    top: 27px;
    width: 200px;
    left: 105%;
}
.ProfiloSottoTitolo{
    font-size: 16px;
    top: 63px;
    width: 200px;
    left: 105%;
}
.ProfiloTitoloVar{
    color: var(--brand-1);
}
.ContenitoreProfilo {
    display: flex;
    flex-direction: row;
    width: 90%;
    gap: 2vw;
    padding: 2vw;
    height: 100%;
}


/*Cronologia del profilo*/
.Cronologia{
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 10px;
    
}
.CronologiaTesto{
    font-size: 24px;
    text-align: center;
}
.CronologiaDiv{
    border-radius: 10px;
    top: 36px;
    background-color: var(--theme-full);
    border: none;
    border-radius: 5px;
    height: 100%;
    padding: 10px;
}
.CronologiaPulsante{
    left: 95%;
    background-color: var(--theme-full);
    border: none;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    align-self: center;
}
.CronologiaIcon{
    color: white;
}


/*PROGRESSI DEL PROFILO*/
.Progressi{
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    gap: 10px;
}


/*SCROLLBAR*/
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: none; 
}  
::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: rgb(255, 255, 255); 
} 
::-webkit-scrollbar-thumb:hover {
    background: white; 
}


/*CHI SIAMO PAGINA*/
.ChiSiamo {
    display: flex;
    flex-direction: column;
    bottom: 5%;
    border-radius: 15px;
    left: 7%;
    height: 75%;
    width: 86%;
    position: fixed;
    background-color: var(--theme-light);
    animation: 0.3s ease-out ProfiloIN;

    align-items: center;
}
.ChiSiamoShifter {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    transform: translateY(-8%);
}
.ChiSiamoNome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-left: 10px;
}
.ChiSiamoCentro{
    text-align: center;
    width: fit-content;
    display: flex;
}
.ChiSiamoTitolo{
    font-size: 33px;
    top: 27px;
    width: 200px;
    left: 105%;
}
.ChiSiamoSottoTitolo{
    text-align: center;
    font-size: 16px;
    top: 63px;
    width: 200px;
    left: 105%;
}
.ChiSiamoTitoloVar{
    color: var(--brand-1);
}
.ContenitoreChiSiamo {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 90%;
    gap: 2vw;
    padding: 0.6vw;
    height: 100%;
}


/*FINE*/
.EndBackground {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #00000065;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: EndBGIN 0.5s ease-in-out;
}
.EndForeground {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50vw;
    height: 75vh;
    background-color: var(--theme-light);
    z-index: 4;
    border-radius: 20px;
    gap: 20px;
    box-shadow: 0 6px 20px 0 var(--shadow-color);
    animation: EndIN 0.25s ease-in-out;
}
.EndIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.EndIconColor {
    color: var(--theme-full);
}
.EndEmoji {
    font-size: 100px;
    animation: EndEmojiIN 0.5s ease-in-out;
}
.EndTitle {
    font-size: 5vw;
}
.EndIcon {
    font-size: 2vw;
}
.EndButton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-mid);
    border-radius: 20px;
    width: 30vh;
    height: 8vh;
    font-size: 3vh;
    color: var(--theme-full);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.EndButton:hover {
    background-color: var(--theme-full);
    color: var(--theme-light);
}
.EndButton:active {
    background-color: var(--brand-2);
    color: var(--theme-mid);
}


@keyframes LangPopupIN {
    0% {
        transform: scaleY(0) translateY(+100%);
        opacity: 0%;
    }
    100% {
        transform: scaleY(1) translateY(0);
        opacity: 100%;
    }
}

.ChiSiamoOverlay {
    position: fixed;
    overflow: hidden;
    z-index: 3;
    top: -20px;
    height: 140%;

    transition: transform 0.5s ease-in-out;
}

.ChiSiamoContent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc((100vh / 2));
    position: fixed;
    z-index: 4;
    gap: 10px;
}

.ChiSiamoTitle {
    font-size: 8vmax;
}

.ChiSiamoText {
    font-weight: lighter;
    font-size: 2vmax;
}

.ChiSiamoButtonContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 90%;
    gap: 10px;
}

.ChiSiamoButton {
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    
    width: 20vw;
    height: 5vh;

    font-size: 20px;
    font-weight: bold;
    
    background-color: var(--theme-mid);
    color: var(--theme-full);

    border: none;
    border-radius: 15px;

    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;

    cursor: pointer;
}

.ChiSiamoButton:hover {
    background-color: var(--brand-1);
    color: var(--theme-light);
}

.ChiSiamoButton:active {
    background-color: var(--theme-full);
    color: var(--theme-mid);
}

.ChiSiamoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc((100vh / 2));
    position: fixed;
    width: 100%;
    z-index: 4;

    transition: transform 0.5s ease-in-out;
}
#Grabber {
    width: 25%;
    height: 5px;
    border-radius: 30px;
    background-color: var(--theme-mid);
    align-self: center;
}

.ChiSiamoTop {
    position: fixed;
    z-index: 3;
    display: flex;
    overflow: hidden;
    width: 100vw;
    height: calc((122vh / 2) - 45% + 10px);
    background-color: white;
}

/* Versione "responsiva" (mobile) del CSS */
@media only screen and (max-width: 800px) {
    #Sidebar {
        position: fixed;
        width: var(--sidebar-width-mob);
        height: calc(90% - var(--header-height));
        top: calc(100% - var(--sidebar-height-mob));
        left: calc(100vw/2 - var(--sidebar-width-mob) / 2 - var(--sidebar-padding));
        margin-left: 0;
        margin-right: 0;
        bottom: 0;
        z-index: 2;

        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        padding-top: var(--sidebar-padding);

        transition: top 0.25s ease-in-out;
        animation: 0.6s ease-out SidebarINMobile;
    }

    .ChiSiamoButtonContainer {
        flex-direction: column;
    }

    .ChiSiamoButton {
        width: 50vw;
    }

    .EndForeground {
        height: 60vh;
        width: 90vw;
    }

    .ChiSiamoContent {
        gap: 20px;
        width: 100%;
    }
    
    .ChiSiamoTop {
        height: calc((122vh / 2) - 10% + 10px);
    }


    .EndTitle {
        font-size: 5vh;
    }
    
    .EndIcon {
        font-size: 2vh;
    }

    #map {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #LanguageFAB {
        top: calc(var(--header-height) + 30px);
    }

    #LangPopup {
        width: 40vw !important;
    }

    @keyframes LangPopupIN {
        0% {
            transform: scaleY(0) translateY(-100%);
            opacity: 0%;
        }
        100% {
            transform: scaleY(1) translateY(0);
            opacity: 100%;
        }
    }

    .ContenitoreProfilo {
        flex-direction: column !important;
        overflow: scroll !important;
        align-items: center;
    }

    .Cronologia {
        width: 100%;
        height: 100vh;
    }

    .Progressi {
        width: 100%;
        height: 100vh;
    }
}
span.size-48 {
    font-size: 48px;
    font-variation-settings: 'OPSZ' 48;
}


/*LINGUE*/
#LanguageFAB {
    z-index: 10;

    background-color: var(--brand-1);
    border: none;
    border-radius: 100px;
    height: 7vh;
    width: 7vh;
    position: fixed;
    color: var(--theme-light);
    right: 10px;
    bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px;

    cursor: pointer;
    user-select: none;

    transition: all 0.2s ease-in-out;

    box-shadow: 5px 6px 10px 0 var(--shadow-color);

    animation: 0.4s ease-out LanguageButtonIn;
}

#LanguageFAB:hover {
    background-color: var(--theme-light);
    color: var(--brand-2);
}

#LanguageFAB:active {
    background-color: var(--theme-mid);
    color: var(--brand-2);
}

#LangPopup {
    background-color: var(--theme-light);
    border-radius: 30px;
    box-shadow: 5px 6px 10px 0 var(--shadow-color);
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    width: 24vw;
    z-index: 50;

    transition: 0.2s ease-in-out;
    animation: 0.2s ease-in-out LangPopupIN;
}

.LangElem {
    font-size: 17px;
    display: flex;
    justify-content: left;
    align-items: center;
    background: none;
    padding: 8px;
    border-radius: 100px;
    transition: all 0.1s ease-in-out;
    width: calc(100% - (8px)*2);
    gap: 10px;
}

.LangElem:hover {
    color: var(--theme-full);
    background-color: var(--theme-mid);
    cursor: pointer;
}

.ActiveLang {
    color: var(--theme-full);
    background-color: var(--theme-mid);
}

.Bandiera {
    height: auto;
    width: 30px;
    border-radius: 5px;
}

/*Animazioni*/
@keyframes FermataAnim {
    0% {
        scale: 1;
        rotate: 45deg;
    }
    50% {
        scale: 2;
        color: rgb(104, 189, 104);
        rotate: -10deg;
    }
    100% {
        scale: 1;
        rotate: 0deg;
    }
}

@keyframes EndEmojiIN {
    0% {
        scale: 4;
        rotate: 25deg;
    }
    100% {
        scale: 1;
        rotate: 0deg;
    }
}
@keyframes EndBGIN {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}
@keyframes EndIN {
    0% {
        scale: 0;
    }
    100% {
        scale: 1;
    }
}
@keyframes SidebarIN {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
}
@keyframes LanguageButtonIn {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes SidebarINMobile {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
}
@keyframes HeaderIN {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
}
@keyframes ProfiloIN {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}