/* GOOGLE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');


/* MAIN VARIABLES */

:root {
    --white: #fff;
    --gray-100: #fdfdfd;
    --gray-200: #F5F5F5;
    --gray-300: #d2d2d2;
    --gray-400: #cecece;
    --gray-500: #989898;
    --gray-600: #8E8C84;
    --gray-700: #505050;
    --gray-800: #3e3e3e;
    --gray-900: #212121;
    --black: #000;
    --blue: #325D88;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #FF6157;
    --orange: #F47C3C;
    --green: #7ABD9A;
    --teal: #3B8686;
    --cyan: #CFF09E;
    --yellow: #FFD757;

    --light: var(--gray-200);
    --dark: var(--black); /* Usando la variabile black come valore per dark */

    --secondary: var(--green); /* Usando la variabile green come valore per secondary */
    --success: var(--teal); /* Usando la variabile teal come valore per success */
    --info: var(--cyan); /* Usando la variabile cyan come valore per info */
    --danger: var(--red); /* Usando la variabile red come valore per danger */

    --body-color: var(--blue); /* Usando la variabile blue come valore per body-color */

    
    --headings-font-family: Montserrat;
    --headings-font-weight: 700;
    --headings-color: var(--blue); /* Usando la variabile blue come valore per headings-color */

    --bs-font-sans-serif: 'Open Sans';
    --font-weight-normal: 500;

  }
  
body{

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

    font-size: 0.8rem;
    color: var(--blue);
    font-weight: 700;

    overscroll-behavior: contain;
	background-color: rgb(98, 137, 209);


}

body > .main_container{
	
	background-color: var(--white);
	padding: 0 0 50px 0;
    min-height: 100vh;
	
}


@media screen and (min-width: 420px) {

	.container{
		max-width: 380px;
	}

}

div#floatingdebug {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    padding: 18px;
    max-width: 400px;
    top: 0;
    left: 0;
    margin: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: 1000;
}


.fixed{
	left: 50%!important;
	transform: translateX(-50%);
}



a{
    text-decoration: none;
}


.dieerror{
    text-align: center;
    color: white;
    padding: 30px 0;
}

.dieerrorbutton{
    margin-top: 20px;
}





/* GENERAL MODALS */

.modal {
    background-color: rgba(0,0,0,0.4);
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    width: 90%;
}


.modal.modal_gpsaccessmessage p img {
    height: 20px;
}

.modal.modal_gpsaccessmessage p b {
    color:var(--green);
}




/* GENERAL BUTTONS */

.btn{
    background-color: var(--yellow);
    text-transform: uppercase;
    border: none;
    font-size: 1em;
    line-height: 1em; 

    min-height: 3em;
    min-width: 85px;
	
}



.btn.gray{
    background-color: var(--gray-600);
}

.btn.orange {
    background-color: #ffba57;
}

.btn.green{
    background-color: var(--green);
}




/* HEADERS */

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--headings-font-family);
    font-weight: var(--headings-font-weight);
}

.h6, h6 {
    font-size: 0.6rem;
}

.h5, h5 {
    font-size: 1.1rem;
}

.h3, h3 {
    font-size: 1.75rem;
}




/* MENU AREA */

.menu_main {
    background-color: var(--gray-200);
    padding: 10px 23px;
    position: fixed;
    margin: 0;
    bottom: 0;
    left: 0;
    min-height: 58px;
}

.menu_item img {
    width: 38px;
}

/* SELECTED MENU */

.body_home    		.menu_main .menu_item_home    img,
.body_friendprofile .menu_main .menu_item_friends img,
.body_friends 		.menu_main .menu_item_friends img,
.body_weather 		.menu_main .menu_item_weather img,
.body_profile 		.menu_main .menu_item_profile img,
.body_login         .menu_main .menu_item_home img,
.body_options       .menu_main .menu_item_setup img
{
    filter: brightness(3) saturate(3) hue-rotate(235deg);
}


.menu_main .menu_item {
    position: relative; /* Imposta il contenitore menu_item_profile come riferimento per il posizionamento del pallino */
}

.notification-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    text-align: center;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.notification-dot.hidden-notification {
    display: none;
}






/* MENU CHALLENGE AREA */

.menuchallenge_item i.bi {
    font-size: 1.3rem;
    margin-right: 5px;
}

a .menuchallenge_item{
    color: var(--blue);
}





/* TITLE AREA */

.title_container {
    background-color: var(--green);
    color: var(--white);
    padding: 22px 0 2px 0;
    min-height: 88px;
}

.title_mini {
    margin-bottom: 4px;
}





/* HIGHLIGHT AREA */

.highlight_container {
    background-color: var(--teal);
    color: var(--white);
    padding: 15px 10px;
    min-height: 167px;
}

.highlight_photo {
    position: relative;
    width: 130px;
    height: 130px;
    background-position: center center;
    background-size: cover;
    border-radius: 100%;
    margin-top: -48px;
    margin-bottom: 16px;
}

.highlight_mini{
    color: var(--yellow);
}





/* LOGIN AREA */

.login_container{
    text-align: center;
    padding: 30px;
}

.body_login .highlight_container,
.body_signup .highlight_container,
.body_options .highlight_container
{
    min-height: 82px;
}

.body_signup label span.mandatory{
    color: red;
}




/* SIGNUP AREA */

.signup_container{
    text-align: center;
    padding: 30px;
}



/* OPTIONS AREA */

.options_container{
    text-align: center;
    padding: 30px;
}


.body_options .options_alert_add_to_home,
.body_options .options_feedback
{
    border: var(--green) solid 3px;
    margin: 10px;
    padding: 10px;
    background-color: #7abd9a21;
    text-align: center;
}

.body_options .options_alert_add_to_home img {
    height: 20px;
}






/* HOME AREA */


.body_home .main_container{
    position: fixed;
}


.home_container {
    background-image: url(../media/pictures/pr_bg2.jpg);
    height: calc(82vh);
    background-position: center;
    background-size: cover;
    padding: 8vh 0;
}

.home_schoollogo {
    max-width: 200px;
}

.home_button {
    margin-top: 4vh;
    margin-bottom: 0;
    color: var(--black);
    font-size: 1.4rem;
    height: 8vh;
}




/*  WHEATER AREA */

.body_weather #weather_icon {
    background-color: white;
    background-size: 70%;
    background-position: center center;
    background-repeat: no-repeat;
}



.weather_container {
    padding: 0;
}

.weather_item {
    padding: 16px 22px;
}



.weather_item_icon {

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

    width: 44px;
    height: 44px;
    background-color: var(--green);
    border-radius: 999px;
}

.weather_item_icon img {
    width: 35px;
}

.weather_item_text {
    color: var(--blue);
    padding-left: 13px;
    margin-bottom: 0;
}


.weather_item_text span {
    color: var(--green);
}


.weather_item_value {
    color: var(--green);
    font-size: 3em;
    text-align: end;
    margin-bottom: 0;
}








/* PROFILE AREA */


.profile_container {
    padding: 0;
}

.profile_item {
    padding: 16px 22px;
}

.profile_item_icon img {
    width: 44px;
}

.profile_item_text {
    color: var(--blue);
    padding-left: 13px;
    margin-bottom: 0;
}

.profile_item_value {
    color: var(--green);
    font-size: 3em;
    text-align: end;
    margin-bottom: 0;
}

h2.profile_friendship_request_title {
    margin-top: 50px;
}

.body_profile .people_item_refusefriendship .btn{
    min-width: 40px;
    margin-right: 5px;
    background-color: #ffa357;
}






/* FRIENDS AREA */


.body_friends .title_container{
    position: fixed;
    top:0px;
}

.body_friends .people_container {
    margin-bottom: 253px;
    margin-top: 88px;
}

.people_container {
    padding: 0;
}

.people_nofriends{
    text-align: center;
    padding: 40px 0px;
}

.people_item {
    padding: 8px 16px;
}

.people_item_picture img {
    width: 52px;
    border-radius: 100%;
}

.people_item_data {
    color: var(--teal);
    padding-left: 13px;
    margin-bottom: 0;
    flex-grow: 25;
    line-height: 0.9em;
}

.people_item_data span:last-child {
    color: var(--blue);
    font-weight: 500;
    font-size: 0.9rem;
}


/* SUGGESTED AREA */

.suggested_container{
    background-color: var(--gray-300);
    position: fixed;
    bottom: 57px;
    padding: 15px;
}

.suggested_title {
    color: var(--white);
    margin-bottom: 18px;
}


.suggested_container .container {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.suggested_item {
    width: calc(33.3% - 12px);
    margin-right: 12px;
    float: left;
}

.suggested_item_picture img {
    width: 74px;
    border-radius: 100%;
}

.suggested_item_plus {
    position: relative;
    left: 50px;
    bottom: 30px;
    background-color: var(--yellow);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-weight: 700;
    border-radius: 100%;
    color: var(--white);
    margin-bottom: -25px;
}

.suggested_item_name {
    color: var(--teal);
    font-size: 0.9rem;
}


/* RANKING AREA */


.body_ranking .title_container{
    position: fixed;
    top:0px;
}

.body_ranking .highlight_container {
    position: fixed;
    top: 88px;
}

.body_ranking .people_container {
    margin-bottom: 58px;
    margin-top: 255px;
}

.body_ranking .people_container .people_item.people_myself{
    background-color: var(--cyan);
}
.body_ranking .people_container .people_item.people_myself .btn{
    display: none;
}


.highlight_rankingpoints {
    font-size: 5rem;
    margin-bottom: -20px;
}

.highlight_rankingdiamond {
    margin-left: 20px;
}

.highlight_rankingdiamond img {
    width: 83px;
}




/* PATHS AREA */

.paths_container {
    padding: 0;
}

.paths_item {
    padding: 12px 16px;
    background-color: var(--cyan);
    margin: 7px;
}

.paths_item_icon{
    width: 52px;
    height: 52px;
    border-radius: 100%;
    background-color: var(--green);
}

.paths_item_icon img{
    width: 30px;
}

.paths_item_data {
    color: var(--teal);
    padding-left: 13px;
    margin-bottom: 0;
}

.paths_item_data span:last-child {
    color: var(--blue);
    font-weight: 500;
}

.paths_item_locations_list{
    display: none;
    text-align: center;
}

.paths_item_location_item {
    margin-left: 40px;
    margin-right: 40px;
    border-left: 5px solid var(--green);
}



/* PATH IFRAME (LOCATION) */



.body_paths #locationPopupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.body_paths #locationPopup {
    width: 95%;
    height: 95%;
    background: #fff;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.body_paths #locationPopupIframe {
    width: 100%;
    height: 100%;
}

.body_paths #closePopupButton {
    position: absolute;
    top: -10px;
    right: -5px;
    height: 50px;
    width: 50px;
    border: none;
    background-color: var(--cyan);
    border-radius: 999px;
}

.body_paths #closePopupButton img {
    width: 60%;
}



.body_paths #loadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1050; /* Slightly higher than the popup overlay to ensure it's on top */
display: flex;
justify-content: center;
align-items: center;
}

.body_paths #loadingImage {
    width: 100px; /* Adjust based on your preference */
    height: 100px; /* Adjust based on your preference */
    animation: spin 2s linear infinite;
}

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














/* CHALLENGE START AREA */

.body_challengestart .highlight_photo {
    background-color: var(--gray-500);
    background-repeat: no-repeat;
}

.challengestart_container {
    margin-bottom: 90px;
}


.challengestart_contestants {
    padding: 25px 0 15px;
}

.challengestart_profile{
    width: 40%;
    float: left;
}

.challengestart_profile_picture {
    width: 84px;
    height: 84px;
    background-size: cover;
    border-radius: 100%;
    margin-bottom: 8px;
}

.challengestart_profile_name{
    text-align: center;
    color: var(--teal);
}

.challengestart_gems {
    margin-bottom: 15px;
}

.challengestart_gems .challengestart_rankingpoints{
    font-size: 2.5rem;
    margin-bottom: -13px;
}

.challengestart_gems .challengestart_rankingdiamond{
    margin-left: 8px;
}

.challengestart_gems .challengestart_rankingdiamond img{
    display: inline-block;
    width: 35px;
    filter: brightness(0.35) sepia(1) hue-rotate(168deg) contrast(2.2);
}



.challengestart_vs {
    width: 20%;
    float: left;
    text-align: center;
    padding-top: 30px;
    color: var(--yellow);
}

.challengestart_info {
    clear: both;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}


.challengestart_buttoncontainer {
    position: fixed;
    bottom: 74px;
}

.challengerefuse_buttoncontainer {
    position: fixed;
    bottom: 125px;
}



.challengestart_button, .challengerefuse_button {
	width: 300px;
}




/* LOCATION AREA */

.location_container {
    margin-bottom: 140px;
}

.location_picture {
    width: calc(100% + 24px);
    height: 40vh;
    background-size: cover;
    margin: 0 -12px;
    padding: 0;
}

.location_title_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location_title {
    margin: 15px 0;
}

.location_title span:last-child {
    color: var(--green);
}

/* sfumatura alpha in top, per scorrimento testo info location */
.location_buttoncontainer {
    position: fixed;
    bottom: calc(74px - 20px);
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 72%, rgba(255,255,255,0) 100%);
    padding-bottom: 20px;
    padding-top: 50px;
}

.location_button {
    width: 300px;
}




/* LOCATION POPUP */


.modal_locationbuttonimin .disabled_gotoquiz{
    display: none;
}






/* QUIZ AREA */



.body_quiz .highlight_container,
.body_solution .highlight_container
{
    margin-top: 0;
	margin-bottom: 0;
    padding: 0;
    min-height: 230px;
}

.highlight_quiz_question {
    padding: 40px 30px;
}


.quiz_container {
    width: auto;
}

.quiz_answer_button {
    color: var(--blue);
    text-transform: none;
    width: 100%;
    margin: 20px 0;
    padding: 18px;
}

.quiz_answer_letter {
    color: var(--white);
    background-color: var(--green);
    padding: 15px;
    max-width: 46px;
    max-height: 46px;
    border-radius: 100%;
    margin: 0 16px 0 0;
}

.quiz_answer_text {
    margin: 0;
    text-align: left;
}




/* SOLUTION AREA */


.body_solution .highlight_solution_question{
    position: relative;
}

.body_solution .highlight_solution_next{
    width: 100%;
    position: absolute;
    opacity: 0;

    background-color: var(--teal);
    min-height: 167px;
}

.body_solution .highlight_solution_gems{
    margin-top: 43px;
}

.body_solution .highlight_solution_addedgems {
    position: absolute;
    left: 134px;
    top: 38px;
    opacity: 0;
}




.body_solution .solution_nextlocation_button {
    opacity: 0;
    margin-top: 15px;
}

.body_solution .btn:disabled{
    opacity: 1;
    color: var(--blue);
}

.body_solution .quiz_answer_button{
    background-color: var(--gray-200);
}

.body_solution .correct_answer{
    background-color: var(--cyan);
}

.body_solution .wrong_answer{
    background-color: var(--red);
}