/*from FIGMA*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&display=swap");
@font-face {
  font-family: "Avenir";
  src: url("/fonts/AvenirLTStd-Book.otf");
  font-weight: 500;
}
@font-face {
  font-family: "Avenir";
  src: url("/fonts/AvenirLTStd-Black.otf");
  font-weight: 900;
}
@font-face {
  font-family: "LT Colored Pencil";
  src: url("/fonts/LT Colored Pencil.otf");
}

body {
  margin: 0;
  line-height: normal;
  /*background-color: var(--color-gray-500);*/
  background-color: #ffffff;
  color: #000000;
}

:root {
  /* fonts */
  --font-avenir: Inter;
  --font-inter: Inter;

  /* font sizes */
  --font-size-sm: 14px;
  --font-size-11xl: 30px;

  /* Colors */
  --label-color-light-primary: #fff;
 /* --color-gray-400: rgba(255, 255, 255, 0.2);
  --color-gray-300: rgba(255, 255, 255, 0.1);*/
  --color-gray-400: rgba(0, 0, 0);
  --color-gray-300: rgba(0, 0, 0);
  --color-white: #fff;
  --color-black: #000;
  --color-light-gray:#F2F2F2;
  /*--color-goldenrod: #ffb23f; #giallo*/
  --color-goldenrod: #ffffff;

  /* Paddings */
  --padding-3xs: 10px;
  --padding-31xl: 50px;
  --padding-219xl: 238px;

  /* border radiuses */
  --br-3xs: 10px;
}
/***stili generali**/
main button, main .button{
  width: 280px;
  height: 65px;
  flex-shrink: 0; 
  border-radius: 30px;
  background: #000; 
  display: block;
  margin:auto;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px; /* 150% */
  letter-spacing: -0.32px; 
  border: none;
/*
  padding: 24px;
  gap: 10px;  	
  justify-content: center;
  margin:auto;
  background: var(--color-black);
  border-radius: 40px; 
  width: 280px;  
  color: var(--color-white);
  font-size:18px;
  font-weight:500;
  display:block;
  text-align:center;*/
}


/*.button,
.button1 {
  cursor: pointer;
  border: 1px solid var(--color-gray-400);
  padding: var(--padding-3xs) var(--padding-31xl);
  background-color: var(--color-gray-300);
  border-radius: var(--br-3xs);
  box-sizing: border-box;
  width: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  

  
}*/
.button1 {
  color: var(--color-black);;
  background-color: #ffffff;
}
.buttonParent,
.login01{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.buttonParent {
  align-items: flex-start;
  gap: 10px;
}
.circleButton{
	background-color:var(--color-black);
	padding:10px;
	border-radius:50%;
	width:60px;
	height:60px;
	font-size:30px;
	font-weight:600;
	color:var(--color-white);
	display:block;
}
/*.box{
	border:solid 2px black;
	border-radius:25px;
	max-width:500px;
	margin:auto;
	padding:20px;
	display:block;
	margin-bottom:10px;
	}*/

.login01,
.titleParent {
  align-items: center;

}
.titleParent {
  align-self: stretch;
  gap: 40px;
  font-size: 25px;
  font-family: var(--font-inter);
}
.login01 {
  position: relative;
  background-color: var(--label-color-light-primary);
  width: 100%;
  height: 944px;
  overflow: hidden;
  gap: 100px;
  text-align: center;
  font-size: 16px;
  color: var(--color-white);
  font-family: var(--font-inter);
}
/***loader***/
.loader {
  /*
  border: 16px solid #f3f3f3; 
  border-top: 16px solid #3d3d3d; RICY spin.png NON LO PRENDE OCCHIO
  border-radius: 50%;*/
  
  width: 200px;
  height: 200px;
  display: block;
  animation: spin 1.8s linear infinite;
  background-image: url('/images/share.svg');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;    

}

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

.load-container{
	
  z-index: var(--z-fullscreen);
  position: fixed;
  width: 100%;
  background-color: rgba(243, 243, 243, 0.2);
  align-items: center;
  justify-content: center;
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra orizzontalmente */
  height: 100%; /* Fai sì che il contenitore occupi tutta l'altezza */  
  display:none;
 


 
}

*{
    /* 상속이 되지 않는 속성이므로 모든것에 적용 */
    box-sizing: border-box;
}

html {
   /* font-family: 'Montserrat', 'sans-serif'; */
   font-family: "Inter";
    --color-gray-50: rgb(243, 236, 230);
    --color-gray-100: rgb(207, 201, 195);
    --color-gray-300: rgb(99, 92, 86);
    --color-gray-400: rgb(70, 65, 60);
    --color-gray-500: rgb(0, 0, 0);
    --color-gray-600: rgb(32, 29, 26);
    --color-gray-700: rgb(31, 26, 22);
  
    --color-primary-50: rgb(253, 224, 200);
    --color-primary-100: rgb(253, 214, 183);
    --color-primary-200: rgb(250, 191, 143);
    /*--color-primary-400: rgb(223, 159, 41); giallino */
	--color-primary-400: #ffffff;
    /*--color-primary-500: rgb(212, 136, 14); giallino */
	--color-primary-500: #ffffff;
    /*--color-primary-700: rgb(212, 120, 14); giallino */
    --color-primary-700: #ffffff;
    --color-primary-200-contrast: rgb(100, 46, 2);
    /*--color-primary-500-contrast: white; */
	--color-primary-500-contrast: #000000;
  
    --color-error-100: rgb(255, 192, 180);
    --color-error-500: rgb(199, 51, 15);
  
    --color-primary-500-bg: rgb(63, 60, 58);
  
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
  
    --border-radius-small: 4px;
    --border-radius-medium: 6px;
  
    --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.2); 
}
p{
	font-size:20px;
	font-weight:600;
	
	
}

main{
	padding:20px 0px 80px 0px;
    width: 100%;
   /* max-width: 50rem;*/
    margin: auto;
	text-align:center;
	min-height: 90vh;
	margin-top:60px;
}
.content
{
	margin:auto;
	max-width:700px;
	/*padding:10px;*/
	display:block;
}
h1{
	color:var(--color-black);
	margin: 0 auto;
	text-align:center;
	font-size:25px;
	margin: 20px 0px 20px 0px;
}
h4{
	color:var(--color-black);
	margin: 0 auto;
	text-align:center;
	font-size:16px;	
	font-weight:500;
}

ul, 
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--color-primary-400);
}
main a {
    color: var(--color-black);
}
p a{
	text-decoration: underline;	
}

label a{
	text-decoration: none;
}

.btn {
    cursor: pointer;
    font: inherit;
    padding: var(--space-2) var(--space-6);
    background-color: var(--color-primary-500);
    color: var(--color-primary-500-contrast);
    border: 1px solid var(--color-primary-500);
    border-radius: var(--border-radius-small);
}

.btn:hover,
.btn:active {
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
}

.btn-alt {
    background-color: transparent;
    color: var(--color-primary-500);
}

.btn-alt:hover,
.btn-alt:active{
    background-color: var(--color-primary-500-bg);
}

.alert{
    border-radius: var(--border-radius-small);
    background-color: var(--color-error-100);
    color: var(--color-error-500);
    padding: var(--space-4);
}

.alert h2{
    font-size: 1rem;
    margin: var(--space-2) 0;
    text-transform: uppercase;
}

.alert p{
    margin: var(--space-2) 0;
}

.badge {
    margin-left: var(--space-2);
    padding: 0.15rem var(--space-4);
    border-radius: 10rem;
	background-color: var(--color-primary-500);
    color: var(--color-primary-500-contrast);

}
/**** toolbar e popup ****/
.toolBox{
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-29%);
  z-index: var(--z-loader);
 /*	 border: solid 1px red;*/
 /* border:solid 1px red;*/
  display: flex;
  width: auto;	
  gap:7px;
}


.toolbutton{
	padding:10px;
	border-radius:50%;
  width: 61px;
  height: 61px;
	font-size:20px;
	font-weight:600;
	color:#ffffff;
	box-shadow: none; /* Rimuove l'ombra */
	border:none;
	margin-left:5px;
  background-color: rgba(33, 8, 3, 0.37);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
	
}
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(34, 35, 38, 0.50);
      z-index: var(--z-fullscreen);
    }

    .modal {
	  position: fixed;
	  top: 60px;
	  left: 50%;
	  transform: translate(-50%, 0%);
	  width: 340px;
	  height: 70vh;
	  background: rgba(34, 35, 38, 0.50);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
	  z-index: var(--z-fullscreen);

	  padding-top: 10px;
    padding-bottom: 10px;
	 /* min-height:30vh;
	  max-height:90%;*/
	  overflow:auto;
    max-width: 600px;
    border-radius: 20px;

   /* border:1px solid red;*/

    }
  /*#friendTab, #userTab{
    width: 100%;
  }*/

	.msgoverlay {
      display: none;
      position: fixed;		
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
     /* background-color: rgba(0, 0, 0, 0.5);*/
      z-index: var(--z-fullscreen);
	}
.modaltabs{
  display: flex;
}
.modaltabs span{
  width: 100%;
  display: grid;
  text-align: center;
  align-items: center;
  align-content: center;
  height: 18px;
  flex-direction: column;
  justify-content: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: var(--Neutral-500, #7C7C7C);
  padding-top:15px;
  padding-bottom:15px;
  cursor: pointer;
}
.modaltabs span .active{
  color: var(--Neutral-100, #F2F2F2);
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px; /* 175% */
  letter-spacing: -0.32px;
  text-decoration-line: underline;
}
.usersearchbox{
  padding:10px;
}
.usersearchbox input{
  width: 300px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 30px;
  border: 0.4px solid var(--Neutral-900, #222326);
  background: rgba(0, 0, 0, 0.37);
  display: block;
  margin: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding-left:8px;
  padding-right:8px;
  color: #ffffff;
}

.usersearchbox input:focus{
  outline: none;
  border:none;  
}

.messBox{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 80vh;
  box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  padding-top:5px ;
  overflow:auto;		
  transition: height 0.3s ease;
  border-radius: 30px 30px 0px 0px;
  background-color: rgba(34, 35, 38, 0.50);
  backdrop-filter: blur(2px); 
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-fullscreen);

}
 
.close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    cursor: pointer;
    font-size:24px;
    font-weight:600;
}
	
/*#totmsg{
  background-color:red;
  padding:2px;
  border-radius:50%;
  width:20px;
  height:20px;
  font-size:10px;
  font-weight:500;
  color:#ffffff;
  position:absolute;
  top:-10px;
  left:40px;
}*/
	
/*confirmation popup*/	
#confirmation{
      z-index: var(--z-system);
}
#confirmation .popup{
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 430px;
	  height: auto;
	  background-color:#d3d3d3;  
	  z-index: var(--z-system);
	  padding: 20px;
	  padding: 20px;
	  min-height:10vh;
	  max-height:80vh;
	  overflow:auto;
	  border:solid 1px black;
}


/*******fine popup messaggi**********/
	
	
/**************************/
#footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;	
	border-top:solid 1px #ffffff;
	padding:5px 0px 5px 0px;
	text-align:center;
	background-color:#000000;
	z-index: var(--z-system);
}
#footerMap{
	bottom: 0;
	left: 0;
	width: 100%;	
	padding:1px;
	text-align:center;
	background-color:#000000;
	z-index: var(--z-system);
}
#footer a{
	font-weight:500;
}
#footer p{
	font-weight:500;
	color:#ffffff;	
	font-size:10px;
	
}

/****** V1 *********/
.box{
  display: block;
  width: 325px;
  height: auto;
  flex-shrink: 0;
  border-radius: 20px;
  background-color: var(--Neutral-900, #222326);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  margin:auto;
  padding:5px 0px 5px 0px;

}
@media (max-width: 768px) {
  body {
   /* overflow: hidden!important; */
}
  /* CSS per dispositivi mobili */
	.content{
		width:100%;
		
	}
	main{
		/*padding-top:80px;*/
    padding-top:60px;
	} 
}

/******** friends box ***********/
#friendBox{
  width: 250px;
  display: block;
  margin:auto;
  border: 1px solid yellow;
}
#suggestions{
  margin: auto;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}
	
.result {
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  display: flex;
  justify-content:left;
  align-items: center;	
  border-radius: 15px;
  padding:3px;
  color:#ffffff;
  border:1px solid #ffffff;
}
.result img{
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;							
}
.result .innerData span{
  display: block;
  text-align: left;
  font-size: 10px;
  margin-left: 10px;
}
#risultatiDiv{
 /* border: 1px solid red;*/
  width: auto;
  height: auto;
  color:#ffffff;
}
.selectedPlayer{
  width: 30px;
  height: 30px;  
  display: inline;
  border-radius: 50%;
}
/************/
#elencoCoop, #elencoUtenti {
  margin-left: 40px;
  color:#000;
  background-color: #d3d3d3;
 /* border:1px solid red;*/
  text-align: left;
  width: 200px;
}

.user-item {
  cursor: pointer;
  padding: 5px;
  padding-bottom: 0px;
}

#coopAggiunti, #utentiAggiunti {
  margin-top: 20px;
}
.userList{
  display: flex;
  align-items: center;  
}
.smallthumb{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}