body {
    /*! padding-left: 50px; */
    /*! padding-top: 50px; */
    padding-bottom: 50px;
    padding-right: 50px;
    display: flex;
    flex-direction: row;
    wrap: no-wrap;
}

input {
  cursor: pointer;
}

button: {cursor: pointer;}

select {cursor: pointer;}

.body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.page {
  display:flex
}


.sopra_header {
  
  display: flex;
  justify-content: center;
  margin-right: 150px;
  margin-left: 80px;
}

.header {
  display:flex;
  gap: 12px;
  flex-direction: column;
  position: fixed;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  color: white;
  border-radius: 12px;
  background-color: green;
  margin-left: 50px;
  
}

.selector {
   padding-left: 8px;
   padding-top: 5px;
   padding-bottom: 5px;
   border-radius: 5px;
}

.attivitaList {
  display: flex;
  width:  100%; 
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
  margin-top: 50px;
  flex-wrap: wrap;
 
}

.singleAttivita {

  /*
background: no-repeat;
background-color: black;
width: 90%;
max-width: 1000px;
-webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
padding-top: 30px;
padding-bottom: 30px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 15px;
display: flex;
flex-direction: horizontal;
align-items: baseline;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 15px;
padding-left: 15px;
padding-right: 15px;
color: white;
  */
  min-width: 300px;
  max-width: 400px;
  background-color: white;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
  border-radius: 15px;
  width: 100%;
  
  
}

.singleAttivitaTop {
  width: 100%;
  height: 150px;
  border-radius: 15px 15px 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.singleAttivitaBottom {
  width: 100%;
  gap: 10px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 15px;
  
}

.attivitaNome {
  font-weight: bold;
  width: 100%;

}


.descriptors {
display: flex;
margin-top: 50px;
margin-bottom: 50px;
  flex-direction: column;
  gap: 15px;

}

.descriptors div {
  width: 200px;
}

.attivitaDescriptor {
border: 1px solid black;

padding: 5px 5px 5px 15px;

color: black;
-webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;


}

.media {
     line-height: 3;       
    -webkit-column-count: 3;    
    -webkit-column-gap: 0px;    
    -moz-column-count: 5;
    -moz-column-gap: 0px;
     column-count: 3;    
     column-gap: 8px;  
  display:inline-block;    
   margin-right: auto;    
   margin-left: auto; 
}

.media img {
  width: 100% !important;    
   height: auto !important; 
  -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}



.verticalGroup{
display: flex;
flex-direction: column;
  width: 100%;
  
}

.selectedAttivita {
  padding-left: 50px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}

.selectedAttivitaDiv {
  display: flex;  
  flex-direction: column;
}

.selectedAttivitaDiv img {
  
}


.selectedAttivita button {
  padding: 5px 5px 5px 5px;

}

.addAttivita {
\tdisplay: fixed;
\twidth: 50px;
\theight: 50px;
\tbackground-color: green;
\tbottom: 50px;
\tleft: 50px;

}

.circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: green;
  position: relative;
  cursor:pointer;
}

.circle::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: #fff;
  height: 10px;
  margin-top: -5px;
  top: 50%;
  left: 5px;
  right: 5px;
  z-index: 9;
}
.circle::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: #fff;
  width: 10px;
  margin-left: -5px;
  left: 50%;
  top: 5px;
  bottom: 5px;
  z-index: 9;
}

.addAttivitaInput {
\twidth: 300px;
height: 30px;
margin-bottom: 15px;
}

.addAttivitaSelect {
width: 300px;
height: 35px;
margin-bottom: 15px;

}

.descriptors_width {
  display: flex;
  margin-left: 5px;
  margin-right: 5px;
  width: 90%;
  
}
.elevation {
  display: flex;
  gap: 10px;
}
.duration {
  gap: 10px;
  display: flex;
  
}

.Fatta {
  
  display: flex;
  gap: 10px;
}

#map, #gpxMap {
  height: 600px;
  min-width: 600px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}

.content {
  width: 100%;
}


img.Cascata_marker {
  filter: brightness(0) invert(1);

}

img.Ferrata_marker {
  filter: grayscale(100%);
}

img.Arrampicata_marker {
  
  filter: hue-rotate(148deg)
}

img.Alpinismo_marker {
  filter: hue-rotate(120deg);
}

img.Trekking_marker {
  filter: hue-rotate(240deg);
}

img.Ciaspolata_marker {
  filter: hue-rotate(0deg);
  filter: brightness(140%)
}


.horizontalGroup {
  
  display: flex;
  width: 180px;
  justify-content: space-between;
}

.minmax {
  width: 40%;
}

.gpx {
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 400px;
  margin-bottom: 780px;
  gap: 50px;
  
}

#gpxMap {
  margin-bottom: 60px;
}

.rowWithIcon {
  display: flex;
  align-items: center;
}

.rowWithIcon img {
  width: 30px;
  height: 30px;
}

.stat_and_descriptors {
  display: flex;
  gap: 50px;
  /*! margin-bottom: 100px; */
}



.stat_container {
  margin-left: 30px;
  border: 1px solid gray;
  width: 200px;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 1px 1px 1px 1px;
  
}

.stat_container div {
  display: flex;
  margin-top: 5px;
  gap: 5px;
}

.stat_container img {
  width: 30px;
  
}

.selected_attivita_header_image {
   width: 
   
  height: 120px;
  width: 100%;
}