:root {
    --orange: #ffa918;
    --orange-press: #c58619
}


@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Fugaz One';
    src: url('fonts/Fugaz_One/FugazOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.span-emoji{
    width: 8vw;
}

.text_description{
    font-size: small;
}

.button{
    padding: 1vh;
}

.inline{
    display: inline;
}

.button_sub {
    border-radius: 3vw !important;
    padding: 1vh;
    width: 30vw;
    border: none !important;
    background-color: #eeeeee;
}

.event_emoji{
    width: 8vw;
}

.flatpickr-calendar.open{
    font-family: 'system-ui';
}

.button:active {
    background-color: rgba(201, 201, 201, 0.502);
    border-radius: 50%;
}

textarea {
    font-family: 'system-ui';
}

html,body {
    margin: 0;
    overscroll-behavior: none;
    scroll-behavior: smooth;
    padding:0;
    min-height: calc(env(safe-area-inset-top) + 100vh);
}
.fixed-body{
    height:120dvh;
}

.fixed-body-log{
    height: calc(env(safe-area-inset-top) + 100vh);
    overflow-y: hidden;
}



.ts-control {
    border-radius: 2vw !important;
    margin-bottom: 0;
    margin-top: 3vh;
    width: -webkit-fill-available;
}
.ts-control> *,
.ts-dropdown> *
{
    font-family: 'system-ui' !important;
    overflow: hidden scroll !important;
}

#sport-ts-dropdown>div:last-of-type{
    margin-bottom:2vh;
}


#overlay.opacity {
    background-color: black;
    opacity: 0.6;
    width: 100%;
    position: fixed;
    bottom: 0;
    top: 0;
    z-index: 10;
}

#loading_screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #e89843;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'system-ui';
}
#loading_screen.loaded{
    display: none!important;
}
#content{
    display: none;
}
#content.loaded{
    display: block!important;
}

.spinner {
    animation: spin 1s linear infinite;
    height: 10vh;
    aspect-ratio: 1/1;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



.sep_line {
    background-color: black;
    width: 50%;
    height: 2px;
}

.brl {
    height: 8px;
    width: 100%;
}

/*header*/

#header {
    display: flex;
    flex-wrap: nowrap;
    background-color: var(--orange);
    height: 10vh;
    position: relative;
    top:0;
    left:0;
    right:0;
    z-index:5;
    padding-top: calc(env(safe-area-inset-top) - 20px); /* Usa 10px come valore fisso aggiuntivo */
}


#header_name {
    color: rgb(255, 255, 255);
    font-size: 10px;
    font-family: 'Fugaz One';
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    line-height: 0.8;
    margin-left: auto;
    margin-right: auto;
}


.under {
    z-index: 0 !important;
}


/*underbar*/

.under_bar {
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 4vh;
    left: 4vw;
    right: 4vw;
    border-radius: 4vh;
    align-items: center;
    justify-content: space-around;
    background-color: var(--orange);
    height: 7vh;
}

.under_bar>div {
    /*width: 25%;*/
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;

}



.profile_img_UB {
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover;
    border-radius: 50%;
    overflow:hidden;
    padding:0;
}






/*img*/

#body_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    min-height: 100%;
}

#container_mapI {
    height: 100%;
    width: 100%;

}

#mapI {
    height: 100%
}

#event_desc {
    display: none;
}

#event_desc.open {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 80%;
    max-height: 75%;
    background-color: white;
    border-radius: 15px;
    z-index: 12;
    overflow: scroll;
}

#event_desc.open>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-family: 'system-ui',
    font-size: 15px;
    margin-bottom: 0;
    width: 90%;
}

#event_desc.open>div>* {
    width: 90%;
    font-family: 'system-ui';
}

#event_desc.open>div>p,
#step_cont p {
    display: flex;
    align-items: center;
    column-gap: 5vw;
    margin: 1.5vh;
    margin-left: 0;
}

#event_desc.open div a {
    margin: 0;
}

#event_desc.open div button {
    height: 6vh;
    width: 60%;
    align-self: center;
    margin-bottom: 1vh;
    font-family: 'system-ui';
    font-size: 12px;
    border-radius: 3vh;
    color: black;

}

#p_message {
    font-size: 8px;
}

#already_in {
    display: none;
}

#already_in.active {
    display: flex;
    width: 80%;
    justify-content: center;
    align-items: center;
    align-self: center;
    margin-top: 4vh;
    background-color: #bababa;
    border-radius: 5vw;

}

#already_in.active p {
    font-size: 10px !important;
}

.UnActive {
    display: none !important;
}

#lockReq {
    display: none;
}

.p_made_by{
    column-gap: 0 !important;
    margin-bottom: 0 !important;
}

#interaction_cont {
    width: 100% !important;
    margin-left: 0 !important;
    top: 0;
    bottom: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

#interaction_cont>* {
    width: auto;
    margin-left: 2vh;
    margin-right: 2vh;
    margin-top: 2vh;
}

#lockReq.active {
    position: absolute;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 90%;
    justify-content: center;
    align-items: center;
    align-self: center;
    background-color: rgba(69, 69, 69, 0.911);
    border-radius: 15px;
    font-family: 'system-ui';
    top: 0;
    bottom: 0;
    height: 82%;
    font-size: 12px;
    padding: 2vh;
    margin-bottom: 1vh;
    margin-top: 0;
}

#pic_cont {
    margin: 0;
    width: auto;
}


#body_container h2 {
    font-family: 'Fugaz One';
    color: rgb(39, 39, 39);
    font-size: 20px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

#body_container p {
    font-family: 'system-ui';
    padding: 30px;
    text-align: center;
}

/*sign in*/


.body_reg {
    display: flex;
    justify-content: center;
    margin: 0;
    background-color: rgb(222, 147, 35);
    height: 100%;
    overflow: scroll;
    min-height: 100dvh;

}

#reg_form{
    margin-top: calc(env(safe-area-inset-top) + 2vh) !important;
}

.login{
    align-items: center;
}
.sign_form>div>div
{
    display: flex;
    justify-content: stretch;
}

.body_reg>div:first-child {
    width: 85vw;
    background-color: white !important;
    border-radius: 5vw;
    border: 2px solid rgb(187, 185, 185);
    margin: 2vh 0;
    min-height: fit-content;
}

@media(min-height:830px){
    .body_reg{
        align-items: center;
    }
}
.sign_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 4vh;
}

.sign_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 3vhpx;
    width: 85%;
}

.sign_form input,
.form_input
{
    border: none;
    border-bottom: 1px solid #000000;
    outline: none;
    padding: 0.5vh 0;
    border-radius: 0;
    width: -webkit-fill-available;
}

.sign_form>div {
    display: grid;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    row-gap: 4px;
}

.sign_form label {
    display: block;
    font-family: 'system-ui';
    font-size: 15px;
}

.sign_form input::placeholder {
    font-family: 'system-ui';
    font-size: 12px;
}

.sign_form button[type="submit"] {
    background-color: rgb(222, 147, 35);
    margin-top: 4vh;
}

.sign_container p {
    font-family: 'system-ui';
    font-size: 10px;
    align-self: baseline;
    margin-left: 2vh;
    margin-bottom: 0vh;
    margin-top: 1vh;
}

p a {
    color: black;
}

.title_reg h2 {
    font-family: 'Fugaz One';
    text-align: center;
    font-size: 25px;
    margin-bottom: 0;
    color: rgb(94, 94, 94);
    margin-top: 0;
}

.title_reg h1 {
    font-family: 'Fugaz One';
    text-align: center;
    font-size: xxx-large;
    line-height: 0.8;
    color: rgb(94, 94, 94);
    margin-top: 0;
}

#after_sig_cont {
    font-family: 'system-ui';
    padding-left: 20px;
}

#after_sig_cont>div>p{
    margin: 2vh 0;
    font-size: 12px;

}

.error_message{
    margin-left: 0 !important;
    margin-top: 0!important;
    color: red;
    font-size: smaller;
}


/*profile*/
#header_ham {
    width: 100%;
    height: 10vh;
    display: flex;
    flex-direction: row;
}

#body_prof {
    background-color: white;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

}

#log_out_container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-grow: 1;
    margin-right: 5vw;
}


#head_profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#prof_img_cont {
    margin: 15%;
    margin-bottom: 8%;
    height: 34vh;
    aspect-ratio: 1/1;
    border: 3px solid rgb(102, 102, 102);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 0;
    object-fit: cover;
}

#prof_img_cont img {
    /*max-width: 100%;sistema per capire se with o hi*/
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}


#prof_img_cont form {
    display: none;
}

#prof_under_img_cont {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4vh;
}

#prof_under_img_cont div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#prof_UN_cont {
    font-family: 'system-ui';
    text-align: center;
}

#bio_container {
    height: 14vh;
    margin-bottom: 4vh;
    border: 1px solid grey;
    width: 80%;
    margin-top: 3vh;
    border-radius: 20px;
    padding: 5vw;
}

#bio_container p {
    margin: 0;
    font-family: 'system-ui';
}


/*manage account*/

#manage_account_container {
    display: none;
    max-height: 80vh;
    width: 80vw;
    background-color: rgb(224, 224, 224);
    border: 1px solid gray;
    border-radius: 20px;
    padding: 20px;
    overflow: scroll;
    font-family: 'system-ui';
}

#manage_account_container.active {
    display: grid;
    grid-template-rows: 1fr;
    row-gap: 2vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
}

#manage_account_container>div>p {
    margin: 1vh;
    display: flex;
    column-gap: 3vw;
}

#manage_account_container>div:last-of-type {
    display: flex;
    align-items: center;
}


#new_username {
    border: none;
    border-bottom: 1px solid black;
    background-color: inherit;
    padding-bottom: 2px;
    margin-left: 3vw;
    margin-right: 8vw;
    outline: none;
    transition: padding-bottom 0.1s ease-in;
    margin-top: 3vw;
    margin-bottom: 3vw;
}

#new_username:focus {
    padding-bottom: 8px;
}

#change_UN_Ububble {
    display: flex;
}

#new_bio {
    background-color: inherit;
    margin-left: 10vw;
    margin-right: 3vw;
    outline: none;
    transition: padding-bottom 0.1s ease-in;
    border-radius: 5vw;
    height: 10vh;
    width: 50vw;
    padding: 2vh;
    overflow: scroll;
}

#change_bio_Ububble {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

#saved_serch_container>div {
    border: 1px solid black;
    border-radius: 5vw;
    padding-left: 3vw;
    padding-right: 3vw;
    font-size: small;
    background-color: #d5d5d5;
    display: flex;
    align-items: center;
    margin-bottom: 1vh;
    justify-content:space-around;
}



/**/

.switch {
    position: relative;
    width: 50px;
    height: 25px;
    display: inline-block;
    perspective: 1000px;
    -webkit-tap-highlight-color: transparent;
}

/* Nascondi l'input checkbox */
.switch input {
    display: none;
}

/* Sfondo dello switch */
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: all 0.2s;
    border-radius: 25px;
}

/* Il pallino interno */
.slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 2.5px;
    background-color: white;
    transition: transform 0.2s , background-color 0.2s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transform: translateX(0)
}

/* Quando il checkbox è selezionato */
.switch.checked .slider {
    background-color: var(--orange);
    /* Verde */
}

.switch.checked .slider:before {
    transform: translate3d(25px, 0, 0);
}

#switch_calendar {
    margin-left: 6vw;
}

/**/

#notification_container>div {
    border: 1px solid gray;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    display: flex;
    flex-direction: column;
    font-family: 'system-ui';
    font-size: 12px;
    height: min-content;
}


/*HighLights*/

#events_HL_cont {
    width: 100%;
    align-self: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    column-gap: 3vw;
}

#events_HL_cont>div {
    aspect-ratio: 1/1;
    height: 18vh;
}

#events_HL_cont>div>img {
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

#HL_pic_cont {
    width: 90% !important;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    background-color: white;
    border-radius: 30px;
    font-family: 'system-ui';
    overflow-y: scroll;
    max-height: 75%;
    top: 45% !important;
}

#HL_pic_cont>div>img {
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1/1;
}

#HL_pic_cont>div:nth-of-type(2) {
    padding-left: 5vw;
    line-height: 0.8;
}

#HL_pic_cont>div:nth-of-type(2)>h1 {
    margin: 1vh 0.5vh;
}

#HL_pic_cont>div:nth-of-type(2) p {
    display: flex;
    flex-direction: row;
    column-gap: 5vw;
    align-items: center;
}

#delete_HL_button {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background-color: #595959bd;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    height: 5vh;
    width: 5vh;
    padding: 1vh;
}

#user_list {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
}

#user_overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
    background-color: black;
    opacity: 0.6;
}

#user_list.active {
    display: block;
}

#userB_cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 90%;
    z-index: 25;
    background-color: white;
    border-radius: 5vw;
    display: flex;
    flex-direction: column;
    max-width: 80%;
    overflow: scroll;
}

#userB_cont>div {
    display: flex;
    flex-direction: row;
    height: 8vh;
    font-family: 'system-ui';
    margin: 1vh;
    padding: 1vh;
    border: 1px solid gray;
    border-radius: 5vw;
}

#userB_cont>div img {
    aspect-ratio: 1/1;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}
#userB_cont>div>div:nth-child(1){
    width: 8vh;
    height: 8vh;
}

#userB_cont>div>div:nth-child(2) {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-left: 2vh;
    z-index: 20;
    justify-content: center;
    max-width: 100%;
}



/*notification*/

#notification_container {
    display: none;
    max-height: 80vh;
    width: 80vw;
    background-color: rgb(224, 224, 224);
    border: 1px solid gray;
    border-radius: 20px;
    padding: 20px;
    overflow: scroll;
}

#notification_container.active {
    display: grid;
    grid-template-rows: 1fr;
    row-gap: 2vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
}

.notification_preview {
    display: flex;
    column-gap: 3vw;
}

.notification_preview>div:first-of-type {
    aspect-ratio: 1/1;
    height: 5vh;
    width: 5vh;
}

.notification_preview>div:first-of-type>img {
    object-fit: cover;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.notification_preview>div:nth-of-type(2) span {
    font-size: x-small;
    font-weight: 500;
}

#notification_container>div {
    border: 1px solid gray;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    display: flex;
    flex-direction: column;
    font-family: 'system-ui';
    font-size: 12px;
    height: min-content;
    row-gap: 3vh;
}

#notification_container>div:first-child {
    display: none;
}

#not_notification {
    display: none;
    justify-self: center;
    align-self: center;
    color: rgb(60, 60, 60);
    font-size: 14px;
    font-family: 'system-ui';
    background-color: transparent !important;
    border: none !important;
}

#not_notification.active {
    display: block !important;
}

#not_notification h1 {
    margin: 0;
}

.under_bubble {
    display: none !important;
}

.under_bubble p {

    border: 1px solid grey;
    border-radius: 5vw;
    padding: 1vh 2vh;
}

.under_bubble textarea {
    width: -webkit-fill-available;
    margin-right: 0;
}

.under_bubble button {
    align-self: center;
    justify-content: center;
    padding: 8px;
    border-radius: 12px;
    background-color: rgb(216, 216, 216);
    border: none;
}

.under_bubble.active {
    display: flex !important;
    flex-direction: column;
    /*height: 30vh;*/
}

#notification_container>div>div>div h3 {
    display: inline;
}

#notification_container>div>div span h4 {
    display: inline;
}

.thumb_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 6vh;
    margin: 3vh;

}

.thumb_container div {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.thumb_container span {
    font-size: 44px !important;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    display: block;
    color: rgb(79, 77, 77);

    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 40,
}

.material-symbols-outlined.green {
    color: green;
}

.material-symbols-outlined.red {
    color: red;
}


#reply_container {
    display: flex;
}

#reply_container img {
    margin-left: 5vw;
}



/*calendar*/

#calendar {
    width: 80%;
    margin-top: 2vh;
    z-index: 0;
    font-family: 'system-ui' !important;
    margin-bottom: 11vh;
}

.calendar_event {
    background-color: rgba(225, 156, 54, 0.865);

}

:root {
    --fc-border-color: none;
    --fc-day-border-radius: 50%;
    --fc-day-aspect: 1/1;
    --fc-button-bg-color: rgb(222, 147, 35);
    --fc-button-border-color: white;
    --fc-button-active-bg-color: rgb(163, 107, 23);
    --fc-button-hover-border-color: none;
    --fc-button-hover-bg-color: rgb(163, 107, 23);
    --fc-event-bg-color: rgba(225, 156, 54, 0.865);
    --fc-event-border-color: none;
    --fc-today-bg-color: rgba(161, 161, 161, 0.203);

}


.fc-day {
    border-radius: var(--fc-day-border-radius);

}

.fc-daygrid-day-frame {
    border-radius: var(--fc-day-border-radius);
}

.fc-daygrid-day-top {
    flex-direction: unset;
    justify-content: center;
    align-items: center;
    aspect-ratio: var(--fc-day-aspect);
}

.fc-daygrid-day-number {
    pointer-events: none;
}

.fc-daygrid-day-events {
    position: absolute !important;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.fc-daygrid-event-harness {
    position: absolute !important;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.fc-event-title {
    display: none;
}

.fc-daygrid-event-dot {
    display: none;
}

.fc-event-time {
    display: none;
}


a.fc-event {
    border-radius: var(--fc-day-border-radius);
    aspect-ratio: 1/1;
}

a div.fc-event-main {
    visibility: hidden;
}


.fc-toolbar-title {
    font-family: 'system-ui';
    font-size: 1.5em !important;

}

.fc-dayGridMonth-view {
    border: 1px solid rgb(183, 183, 183);
    padding: 5%;
    border-radius: 5%;
}

#event_desc_cont {
    display: none;
}

#event_desc_cont.open {
    display: block;
    position: fixed;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 80%;
    height: 70%;
    background-color: white;
    border-radius: 15px;
    z-index: 12;
}

#chose_event {
    width: 100%;
    height: 4vh;
    display: flex;
    background-color: rgb(106, 106, 106);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
}

#chose_event>div {
    width: -webkit-fill-available;
    max-width: 50%;
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0.5vh 1vh;
    font-size: x-small;
    font-family: 'system-ui';
    background-color: #b2b2b2;
}

#chose_event>div p {
    margin: 0;
}

#event_info {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: 'system-ui';
    line-height: 1.1;

}

#event_info>div {
    position: absolute;
    background-color: white;
    height: 100%;
    border-radius: 15px;
    z-index: 14;
    padding: 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    overflow: scroll;
}

#event_info>div>p {
    display: flex;
    align-items: center;
    column-gap: 5vw;
}

#event_info>div>div:first-of-type>p {
    display: flex;
    align-items: center;
    column-gap: 5vw;
}

.step_cont {}

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

.post_image p {
    margin: 0 !important;
    font-size: x-small;
    background-color: #eeeeee;
    padding: 1vh;
    border-radius: 4vw;
}

.delete_event_button {
    display: flex;
    justify-content: center;
}

.delete_event_button>img {
    margin-top: 5vh;
    background-color: #e6e6e6;
    border-radius: 50%;
    padding: 1vh;
}



#message_event_container {
    display: flex;
    align-items: end;
}

#message_event_container>img {
    margin-left: 5vw;
}

.message_from_event {
    width: -webkit-fill-available;
    border-radius: 5vw;
    height: 5vh;
    padding: 1vh;
    font-family: 'system-ui';
    font-size: small;
}

.event_imgs_cont {

    width: 100%;
    align-self: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: visible;
    column-gap: 3vw;
}

.event_imgs_cont>div {
    aspect-ratio: 1/1;
    height: 10vh;

}

.event_imgs_cont>div>img {
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.event_imgs_cont+div>input {
    display: none;
}

#overlayImg {
    background-color: black;
    opacity: 0.6;
    width: 100%;
    position: absolute;
    bottom: 0;
    top: 0;
    z-index: 10;
}

#bodyOverlayImg {
    width: 100%;
    position: fixed;
    bottom: 0;
    top: 0;
    z-index: 20;
}

#bodyOverlayImg>div:nth-of-type(2) {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 22;
}

#bodyOverlayImg>div:nth-of-type(2)>img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1 / 1;
}

#img_to_highlights {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    height: 5vh;
    border-radius: 50%;
    border: none;
    background-color: #d1d1d1;
    padding: 1.5vh;
}

/*visit*/

#locked_calendar_div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d0cfcf;
    border-radius: 8vw;
}

#back_button {
    margin: 2vh;
    padding: 1vh;
}




/*create event*/
#create_event_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fugaz One';
    font-size: 3vh;
    line-height: 0.7;
    margin-top: 5vh;
    color: #666666;
}

#create_event_title img {
    background-color: #cccccc;
    padding: 1.5vh;
    border-radius: 50%;
    overflow: visible;
}

#mapCE {
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
    margin-bottom: 3vh;
    margin-top: 3vh;
    border-radius: 3vh;
    overflow: hidden;
    clip-path: inset(0 round 3vh); /* Crea il bordo arrotondato */
}

.location {
    z-index: 10;
}

#create_event_container {
    display: flex;
    justify-content: center;
}

#form_event_container {
    width: 90%;
}

#form_event_container form {
    display: flex;
    flex-direction: column;
    row-gap: 10%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: left;
    font-family: 'system-ui';
}

#form_event_container form>span {
    display: flex;
    justify-content: space-between;
}

#first_part_form_create {
    display: grid;
    grid-template-columns: 10vw auto;
    row-gap: 1vh;
    margin-bottom: 2vh;
}

#form_event_container form textarea {
    padding: 1vh;
    border-radius: 5vw;
    font-family: 'system-ui';
}

#form_event_container form input,
#form_event_container form select {
    margin-top: 3vh;
    border-radius: 2vw;
    border: 1px solid #c9c9c9;
    padding: 1vh;
    font-family: 'system-ui';
    width: -webkit-fill-available
}
#form_event_container form label{
    margin-top: 3vh;
    display: flex;
    justify-content: left;
    align-items: center;
}

#form_event_container form p{
    grid-column: 1/-1;
    margin: 0;
    font-size: x-small;
}


#CE_sub_button {
    margin-top: 20%;
    width: 60%;
    align-self: center;
    border-radius: 10px;
    height: 5vh;
    border: none !important;
    background-color: var(--orange);
}
#CE_sub_button:active{
    background-color: var(--orange-press);
}

#form_event_container form input::placeholder {
    color: #666666;
}


/*serch*/

#serch_form_cont {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -3vh;
    z-index: 1;
    transition: all 0.2s ease-in;
    max-height: 0;
    overflow: hidden;

}

#serch_form_cont label{
    display: flex;
    align-items: center;
    justify-content: left;
}

#serch_form_cont .ts-control{
    margin-top: 0!important;
    height: 100%;
}

#serch_form_cont .ts-dropdown{
    height: 21vh;
}

#serch_form_cont .ts-wrapper{
    width: 100%;
}



#serch_form_cont.open {

    max-height: 40vh;
}


#pick_show_mode {
    display: flex;

}

#pick_show_mode>div {
    width: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh;
}

#serch_box_click {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80vw;
}

#serch_box_click>div:first-of-type {
    align-self: center;
    display: flex;
    width: 100%;
    margin-top: 3vh;
    border-radius: 8vw;
    background-color: #e1e1e1;
    position: relative;
    z-index: 3;
    height: 6vh;
}

#serch_box_click>div:first-of-type img {
    margin: 1vh;
}

#serch_form_cont form>div {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 6vh;
    row-gap: 1.5vh;
    width:70vw;
}

#serch_form_cont form div label {}

#serch_form_cont form div p {}


#myform div input {
    border-radius: 2vw;
    border: 1px solid #c9c9c9;
    padding: 1vh;
    font-family: 'system-ui';
    width: 100%;
}

#myform .ts-control {
    margin-bottom: 0;
    width: 100%;
}

#myform>div:nth-of-type(2) {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 40
}

#save_serch {
    color: gray;
    align-self: flex-end;
    font-size: 40px;
    border-radius: 50%;
    padding: 5px;
    margin: 2vh;
    width:auto!important;
}

#save_serch:active {
    background-color: #d6d6d6;
}


#mapSE {
    height: 60vh;
    padding: 0 !important;
    margin: 3vh;
    border-radius: 5vw;
    box-shadow: 0px 0px 3px #828282;
    left: 100vw;
    transition: left 0.2s ease-in-out;
}

#serch_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100vw;
}

#myform>div>div {
    display: flex;
    margin-left: 5vw;
    column-gap: 5vw;
    width: -webkit-fill-available;
    max-width:100%;

}

#serch_form_cont form {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    border-radius: 15px;
    background-color: #f8f8f8;
    width: 100%;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

#SE_button {
    margin: 3vh;
    margin-bottom: 1vh;
    background-color: var(--orange);
    height: 4vh;
}
#SE_button:active{
    background-color: var(--orange-press);
}


#body_res {
    position: relative;
}

.picked {
    border-bottom: 1px solid gray;
}

.picked>img {
    border-radius: 50%;
    background-color: #d4d4d4;
    padding: 1vh;
}

.show {
    left: 0 !important;
}

/*result*/

#no_events_bubble {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(234 234 234) !important;
    font-family: 'system-ui';
    font-size: small;
}

#res_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 0;
    left: -100vw;
    transition: left 0.2s ease-in-out;
    font-family: 'system-ui';
}

#res_container>div {
    margin: 10px;
    height: auto;
    border-radius: 15px;
    padding: 10px;
    background-color: #f1f1f1;

}

#message {
    border-radius: 5vw;
    padding: 1vh;
}

#res_container>div p {
    display: flex;
    column-gap: 5vw;
}

#res_container>div>div p,
#res_container>div>div h1 {
    margin: 2px;
}

#res_container>div>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.participants_cont {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 6vh;
    margin-bottom: 2vh;
    margin-top: 2vh;
}

.participants_cont>div {
    position: absolute;
    height: 100%;

}

.participants_cont img {
    border-radius: 50%;
    aspect-ratio: 1/1;
    object-fit: cover;
    width: fit-content;
    height: 100%;
}

/*change password*/

#cp_cont{
    padding: 6vh 2vh;
    font-family: 'system-ui';
    padding-top: 0;
    background-color: white;
    width: 85vw;
    border-radius: 5vw;
    border: 2px solid rgb(187, 185, 185);
    margin: 2vh 0;
    min-height: fit-content;
}

#cp_input_cont{
    display: flex;
    justify-content: space-between;
    
}

#cp_input_cont>button{
    border-radius: 3vw;
    padding: 1vh 3vh;
    font-family: 'system-ui';
}

#cp_input_cont>input{
    border-radius: 2vw;
    font-family: 'system-ui';
    padding: 1vh;
    border: 1px solid #828282;
}


.two-space-between-column{
    margin: 2vh 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    width: 70%;
    
}

.justify-center-box{
   width: 100%;
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.cont-1-el-centered{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5vh;
}

#show_password{
    position: absolute;
    transform: translateX(6vw);
}

.sign_form #show_password{

    transform: translate(-6vw,-0.5vh);
}

#otp,#new_password{
    width: 55vw;
}


#account_to_verify_cont{
    padding: 4vh 2vh;
    font-family: 'system-ui';
}

.bottom_option{
    text-decoration: underline;
    margin-bottom: 0.5vh;
    font-size: small;
    color: #000000;
}

#confirm_account_cont{
    padding: 2vh;
}

#confirm_account_cont h3{
    font-size: xx-large;
    font-family: 'system-ui';
    text-align: center;
    margin: 0;
}
#confirm_account_cont p{
    font-family: 'system-ui';
text-align: center;
}

#confirm_account_cont>div:nth-of-type(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#res_img{
    height: 8vh;
}