.deskContent {
  width:100%;
  height:100vh;
  display:flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(167.99deg, rgba(116, 183, 192, 0.04) 13.67%, rgba(116, 183, 192, 0.4) 100%);
}

.phoneContent {
  display:none;
}

.hidden{
  display:none;
}

html{
  width:100vw;
  overflow-x: hidden;
  margin:0;
  padding:0;
}

body{
  width:100vw;
  margin:0;
  padding:0;
  overflow-x: hidden;
}

.content-wrapper-profile{
  position:relative;
  background: linear-gradient(167.99deg, rgba(116, 183, 192, 0.04) 13.67%, rgba(116, 183, 192, 0.4) 100%);
  padding-left:1.5em;
  padding-right:1.5em;
  padding-top:1.5em;
  padding-bottom:4.5em;
}

.content-wrapper-other-profile{
  position:relative;
  width:100%;
  height: calc(100vh - 4.5em);
  background: linear-gradient(167.99deg, rgba(116, 183, 192, 0.04) 13.67%, rgba(116, 183, 192, 0.4) 100%);
  padding-left:1.5em;
  padding-right:1.5em;
  padding-top:1.5em;
  padding-bottom:4em;
  height: calc(100vh - 4.5em);
}

.content-wrapper-services{
  position:relative;
  background: linear-gradient(167.99deg, rgba(116, 183, 192, 0.04) 13.67%, rgba(116, 183, 192, 0.4) 100%);
  padding-left:1.5em;
  padding-right:1.5em;
  padding-top:1.5em;
  padding-bottom:4.5em;
}

.content-wrapper-groomer{
  position:relative;
  background: linear-gradient(167.99deg, rgba(116, 183, 192, 0.04) 13.67%, rgba(116, 183, 192, 0.4) 100%);
  padding-left:1em;
  padding-right:1em;
  padding-top:1.5em;
  padding-bottom:4.5em;
}

.services-text-1{
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 48px;
  color: #110D0D;
  padding-top: 1.75em;
}

.services-subtext-1{
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
  color: #110D0D;
}

.services-images-1{

}

.services-continue{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top:3.5em;
}


.services-checkout{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top:1em;
}

.title-achievements{
  font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 48px;
}



.services-title{
  position: relative;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 48px;
  color: #000000;
}

.unlocked-recently{

}

.future-goals{

}

.services-subtitle{
  position: relative;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #A09797;
  margin-top: 1.2em;
  margin-bottom: 1.5em;
}

.services-table{
position: relative;
display: flex;
justify-content: space-between;
width:100%:
}

.services-column{
  position: relative;

}

.services-card{
  position: relative;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #110D0D;
  padding:1em;
}

.services-text{
    padding-top:0.75em;
}



.content-wrapper-map{
  position:relative;
  height: calc(100vh - 4.5em);
  overflow-y: hidden;
}



.start-walk-button{
  position: absolute;
  width: 4em;
  height:auto;
  bottom:7.5em;
  left:calc(50% - 2em);
  z-index: 2;
}

.stop-walk-button{
  position: absolute;
  width: 4em;
  height:auto;
  bottom:7.5em;
  left:calc(50% - 2em);
  z-index: 2;
}

.continue-walk-button{
  position: absolute;
  width: 4em;
  height:auto;
  bottom:12em;
  left:calc(50% - 2em);
  z-index: 2;
  opacity: 0.5;
}

.pause-walk-button{
  position: absolute;
  width: 4em;
  height:auto;
  bottom:7.5em;
  left:calc(50% - 2em);
  z-index: 2;
}

.wrapper-walk-dashboard{
  position: absolute;
  width: 100%;
  height: auto;
  bottom:0;
  left:0;
  z-index: 1;
}


.walk-bone-counter{
  position: absolute;
  width: 5em;
  height: auto;
  bottom:8.5em;
  left:2em;
  z-index: 1;
}


.map{
  position: relative;
  width: 100%;
  height: calc(100vh - 4.5em);
}

.map-dark-blur{
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
  height: calc(100vh - 4.5em);
  z-index: 5;
}

.home-opacity{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: auto;
}

.display{
  z-index: 100;
  text-align: center;
  position: absolute;
  bottom:5.5em;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #110D0D;
  width:2em;
  left: 12.5%;
}

.duration{
  z-index: 100;
  position: absolute;
  bottom:5.7em;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #110D0D;
  width:10em;
  left: 12.5%;
}

.display-distance{
  z-index: 100;
  position: absolute;
  bottom:8.8em;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #110D0D;
  width:5em;
  left: 12.5%;
}

.display-distance-text{
  z-index: 100;
  position: absolute;
  bottom:10em;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #110D0D;
  width:10em;
  left: 12.5%;
}

.display-bones{
  z-index: 100;
  text-align: right;
  position: absolute;
  bottom:5.5em;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #110D0D;
  width:2em;
  left: 78.5%;
}

.display-bones-text{
  z-index: 100;
  position: absolute;
  text-align: right;
  bottom:5.7em;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #110D0D;
  width:2em;
  left: 78.5%;
}




@media only screen and (max-width: 768px) {
    .deskContent {
      display:none;
  }
    .phoneContent {
      display:block;
    }


}


.divCenter{
  padding-left:10%;
}

.header-app {
  width:100%;
  height:auto;
  text-align: center;
  position:relative;
}


.icon-top-left{
  width:1.5em;
  height:1.5em;
  position: absolute;
  left:0;
}

.icon-top-right{
  width:1.5em;
  height:1.5em;
  position: absolute;
  right:0;
}

.icon-top-left-map{
  width:1.5em;
  height:1.5em;
  position: absolute;
  top:1.5em;
  left: 1.5em;
}

.icon-top-right-map{
  width:1.5em;
  height:1.5em;
  position: absolute;
  right: 1.5em;
  top: 1.5em;
}


.header-profile {
  position: relative;
  width:100%;
  height:auto;
  margin-top: 3em;
  margin-bottom: 1.25em;
}

.dog-profile-pic{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom:2em;
  position:relative;
}

.profile-picture{
  width:7.5em;
  height:auto;
  box-shadow: 0px 0px 0px 5px #62B8BF;
  border-radius: 50%;
}

.dog-profile-navigation{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: flex-start;
  position: relative;

}

.navigation-bottom-bar{
  width:90vw;
  left:5vw;
  position: absolute;
}

.profile-navigation-text{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
  width:33.33%;
  padding-bottom:0.5em;
  border-bottom:grey 0.05em solid;
  position: relative;
}

.makeblue{
  border-bottom:#62B8BF 0.25em solid;
}

.makebold{
  font-weight: 600;
}

.weekly-stats{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  position: relative;
  width:100%;
  height: auto;
  margin-bottom: 1.2em;
}

.weekly-walks-meets{
  position: relative;
  width:100%;
  height: auto;
  display:flex;
  justify-content: space-around;
}

.day-weekly{
  width:2em;
  position: relative;
  margin-bottom: 1.2em;
}

profile-navigation-text-selected{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
  border-bottom: 4px solid black;

}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}



.edit-profile{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content:center;
  border: 0.75px solid black;
  border-radius: 5px;
  margin-bottom:1.2em;
  position:relative;

}


.profile-goal{
  width: 100%;
  height:auto;
  display:flex;
  align-items:center;
  justify-content: center;
  position:relative;
  margin-bottom: 1.5em;
}


.goal-title{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 40px;
  color: #000000;
  position:relative;
}

.goal-text-1{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #000000;
  margin-bottom:0.95em;
  position:relative;
}

.walk-goal{
  width:6em;
  height:auto;
  position:relative;
}

.set-goal-button{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 18px;
  background: #74B7C0;
  opacity:0.5;
  color:#ffffff;
  border-radius: 15px;
  width:6em;
  padding:0.2em;
  text-align: center;

}


.profile-goal-text{
padding-left:1.5em;
width:100%;
}

.profile-goal-image{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0.5em;
}

.achievement-unlocked{
  position: absolute;
  left: 30vw;
  top: 20vw;
  width:40vw;
  height:auto;
  border-radius: 5%;
}

.continue-button{
  position:absolute;
  width:70vw;
  height:auto;
  left:15vw;
  bottom:13vh;
}

.skip-button{
  position:absolute;
  width:70vw;
  height:auto;
  left:15vw;
  bottom:5vh;
}

.onboarding1-fullscreen{
  width:53vw;
  height:60vh;
}
.onboarding-background{
  position:absolute;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
}

.page-title{
  position:absolute;
  width:100%;
  top:3vh;
  left:15vw;
  width:70vw;
  text-align: center;
}

.page-subtitle{
  position:absolute;
  width:100%;
  top:52vh;
  left:15vw;
  width:70vw;
  text-align: center;
}

.page-description{
  position:absolute;
  width:100%;
  top:60vh;
  left:10vw;
  width:80vw;
  text-align: center;
}

.page-subtitle-dog-details{
  position:absolute;
  width:100%;
  top:20vh;
  width:100vw;
  text-align: center;
}

.page-description-dog-details{
  position:absolute;
  width:85%;
  left:7.5%;
  top:25vh;
  text-align: center;
}

.go-back-button{
  width:10vw;
  height:auto;
  position: absolute;
  left:2vw;
  top:2vh;
}

.onboarding-insert{
  position:absolute;
  width:95vw;
  height:auto;
  left:2.5vw;
  top:34vh;
}

.onboarding-dog-picture{
  width:35vw;
  height:auto;
  position: absolute;
  left:32.5vw;
  top:42vh;
}

.onboarding-dog-size{
  position:absolute;
  width:30vw;
  height:auto;
  left:35vw;
  bottom:30vh;
}

.go-back-dog-size{
  width:10vw;
  height:auto;
  position: absolute;
  left:2vw;
  top:44vh;
}

.go-forward-dog-size{
  width:10vw;
  height:auto;
  position: absolute;
  right:2vw;
  top:44vh;
}

.dog-size-category{
  position:absolute;
  width:100%;
  top:68vh;
  text-align: center;
}

.dog-size-details{
  position:absolute;
  width:100%;
  top:72vh;
  text-align: center;
}

onboarding-title{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
}

.progress-bar{
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  padding: 1.5em;

}



onboarding-text{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;
  color: #A09797;
}



.bottom-navigation-bar{
  position: fixed;
  width:100%;
  height:2em;
  box-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.3);
  border-top: 1px solid;
  background: #FFFFFF;
  border-color: lightgrey;
  bottom:0;
  padding-bottom:1.5em;
  padding-top:1em;

}


.profile-wrapper-1{
  width:100%;
  height:auto;
  padding-bottom: 4em;
}

.profile-wrapper-2{
  width:100%;
  height:auto;
  padding-bottom: 1.5em;
}

.profile-wrapper-3{
  width:100%;
  height:auto;
  padding-bottom: 4em;
}

.map-wrapper-home{
  width:100%;
  height:auto;
}



heading1{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
  color: #110D0D;
}

heading2{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height:24px;
  color: #000000;
  position: absolute;
  width: 128px;
  height: 40px;
  left: 123.5px;
  top: 320px;
}

heading22{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height:24px;
  color: #000000;
  position: absolute;
  width: 236px;
  height: 40px;
  left: 70px;
  top: 273px;
}

heading3{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height:24px;
  color: #000000;
  position: absolute;
  width: 187px;
  height: 60px;
  left: 137px;
  top: 376px;
}

.bottom-bar-text{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #000000;
  position: relative;
  opacity:0.4;
}

.bottom-bar-text-selected{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #000000;
  position: relative;
  opacity:1;
}

.bottom-icons{
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: space-around;
  margin-top: 30px;
}

.bottom-icons2{
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: space-around;
}

.bottom-icons-final{
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: space-evenly;
  position:relative;
}

.card-bottom-nav-bar{
  width:auto;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: space-around;
  flex-direction: column;
}

.card-bottom-nav-bar-final{
  width:100%;
  height:auto;
  position: relative;
}

.holder-text-buttons{
text-align: center;
align-items: flex-start;
justify-content: space-around;
padding:2em;
position: relative;
width:70%;
}

.row-test{
  display:flex;
}


.bottom-text{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: space-around;
}

.bottom-text2{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: space-around;
  padding-top: 1%;
}

.desktop-header{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: center;
  margin-bottom:3%;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 36px;
}

.desktop-title{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: center;
}

.desktop-title-illustration{
  width:40%;
  height:auto;
}

.desktop-illustration{
  width:100%;
  height:auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: center;
}

.onboarding-illustration{


}

.illustrationDog{
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding-top: 10%;
}

.illustrationDog2{
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;

}

.unknown-red-dog{
  position: absolute;
  width: 3em;
  height: auto;
  right: 13%;
  top:12%;
}

.unknown-yellow-dog{
  position: absolute;
  width: 3em;
  height: auto;
  left: 10%;
  bottom:33%;
}

.friend-green-dog{
  position: absolute;
  width: 3em;
  height: auto;
  left: 25%;
  top:25%;
}

.pop-up-title{
  position: relative;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  margin-top: 0.5em;
}

.pop-up-text{
  position: relative;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #110D0D;
}

.wrapper-meet-details{
  width: 50%;
}

.wrapper-meet-picture-name{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width:100%;
}

.yes-button{
  position: relative;
  width:2em;
  height: auto;

}

.no-button{
  position: relative;
  width:2em;
  height: auto;

}

.pop-up-text-name{
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  margin-top: 0.5em;
}

.pop-up-image-meet{
  position:relative;
  width: 3em;
  height:auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.princesa-marker{
  position:relative;
  width: 3em;
  height:auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.holder-picture-name-rate{
  position:relative;
  text-align:center;
  padding-top: 2em;
}

.holder-picture-name-meet{
  position:relative;
  width:30%;
  height:auto;
  text-align:center;
  padding-left: 2em;
  padding-top: 2em;
}

.row-test-1{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 2em;
}

.yes-meet{
  background: #62B8BF;
  border-radius: 6em;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  width:4em;
  height:2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.no-meet{
  background: #FFFFFF;
  border: 0.5px solid #A09797;
  box-sizing: border-box;
  border-radius: 6em;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: ##110D0D;
  width:4em;
  height:2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.x-button{
  position: absolute;
  right:0.5em;
  top:0.5em;
}


.column-test1{
  width:20%;
  position: relative;
}

.column-test2{
  width:60%;
  position: relative;
}

.x-button-image{
  position: relative;
  width:1.5em;
  height: auto;
}

.test-tab-map-active{
  position: absolute;
  height: 83px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  }

.your-location{
  position: absolute;
  width: 3em;
  left: 33.3%;
  top:40.5%
}


.settings-icon{
  position: absolute;
  left: 5vw;
  top: 5vw;
  width:7vw;
  height:auto;
}

.weather-dash{
  position: absolute;
  width:5em;
  height: auto;
  left:calc(50% - 2.5em);
  top:1.5em;

}

.filter-icon{
  position: absolute;
  right: 5vw;
  top: 5vw;
  width:7vw;
  height:auto;
}

.go-to-location-icon{
  position: absolute;
  width: 2.3em;
  right: 2.6em;
  bottom: 10.5em;
}



.meet-detected{
  position: absolute;
  width: 20em;
  height: 12.5em;
  left: calc(50% - 10em);
  top: calc(50% - 6.5em);
  background: white;
  border-radius: 1em;
  z-index: 6;
}

.meet-detected-yellow{
  position: absolute;
  width: 20em;
  height: 12.5em;
  left: calc(50% - 10em);
  top: calc(50% - 6.5em);
  background: white;
  border-radius: 1em;
  z-index: 6;
}

.meet-detected-red{
  position: absolute;
  width: 20em;
  height: 12.5em;
  left: calc(50% - 10em);
  top: calc(50% - 6.5em);
  background: white;
  border-radius: 1em;
  z-index: 6;
}




.meet-rate{
  position: absolute;
  width: 20em;
  height: 16em;
  left: calc(50% - 10em);
  top: calc(50% - 8em);
  background: white;
  z-index: 11;
  border-radius: 1em;
}

.meet-rate-yellow{
  position: absolute;
  width: 20em;
  height: 16em;
  left: calc(50% - 10em);
  top: calc(50% - 8em);
  background: white;
  z-index: 11;
  border-radius: 1em;
}

.meet-rate-red{
  position: absolute;
  width: 20em;
  height: 16em;
  left: calc(50% - 10em);
  top: calc(50% - 8em);
  background: white;
  z-index: 11;
  border-radius: 1em;
}

.holder-rate-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.5em;
}

.meet-pop-up-profile{
  position: absolute;
  width: 70px;
  height: 108px;
  left: 51px;
  top: 376px;
}

.meet-pop-up-profile2{
  position: absolute;
  width: 89px;
  height: 124px;
  left: 126.5px;
  top: 318px;
}

.yes-button{
  position: absolute;
  width: 72px;
  height: 32px;
  left: 146.5px;
  top: 452px;
}

.no-button{
  position: absolute;
  width: 72px;
  height: 32px;
  left: 242.5px;
  top: 452px;
}

.close-button{
  position: absolute;
  right: 5.8em;
  bottom:12em;
  z-index: 4;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #A09797;
  width: auto;
  height: auto;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}


.green-meet{
  position: absolute;
  left: 228px;
  top: 474px;
  width:50px;
  height:50px;
}

.yellow-meet{
  position: absolute;
  left: 162px;
  top: 474px;
  width:50px;
  height:50px;
}

.red-meet{
  position: absolute;
  left: 96px;
  top: 474px;
  width:50px;
  height:50px;
}

.rank-meet{
  position: absolute;
  width: 327px;
  height: 304px;
  left: 24px;
  top: 258px;
}

.icon-map{
  width:30px;
  height:32px;
  padding-top: 10px;
  position: relative;

}

.icon-profile{
  width:42px;
  height:33px;
  padding-top: 10px;
  position: relative;

}

.icon-services{
  position: relative;
  width:34px;
  height:34px;
  padding-top: 10px;
}

.icon-map2{
  width:9%;
  position: absolute;
  left: 12%;
  top: 10%;

}

.icon-profile2{
  width:10%;
  position: absolute;
  left: 45%;
  top: 10%;

}

.icon-services2{
  width:9%;
  position: absolute;
  left: 81%;
  top: 10%;
}


.icon-bottom-final{
  height:1.4em;
  position: relative;
  opacity:0.4;
}

.icon-bottom-final-selected{
  height:1.4em;
  position: relative;
  opacity:1;
}

.resizeImg{
  position: absolute;
  width: 110%;
  right: 50%;
  top: 70%;
  left: -5%;

}

/* onboarding */

.content-wrapper-onboarding{

  position:relative;
  width: 100%;
  background: linear-gradient(167.99deg, rgba(116, 183, 192, 0.04) 13.67%, rgba(116, 183, 192, 0.4) 100%);
  }

.onboarding2-wrapper{
  position:relative;
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}


.btnContinue{
  display: flex;
  position: relative;
  width: 100%;
  justify-content: center;
  align-content: center;
  padding: 0.5em;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  color: white;
}

.onboardingBotao{
  margin-top: 10%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  }

.btnLogin {
	background-color:transparent;
	display:inline-block;
	cursor:pointer;
	color:#62B8BF;
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #62B8BF;
  font-weight: inherit;

}
.btnLogin {
	background-color:transparent;
}
.btnLogin {
	position:relative;
	top:1px;
}

.onboardLogin{
  padding-top: 9%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
.onboardLogin2{
  padding-top: 15%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.onboarding1-wrapper{
  position:relative;
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  }

.titleOnboarding{
  position: relative;
  text-align: center;
}

.titleOnboarding2{
  position: relative;
  text-align: center;
}

.subtitleOnboarding{
  position: relative;
  text-align: center;
  margin-top: 10%;
}

.subtitleOnboardingName{
  position: relative;
  text-align: center;
  padding-top: 30%;

}
.descriptionOnboarding{
  position: relative;
  text-align: center;
  margin-top: 10%;
  padding: 2% 10%;
}

.createAccount{
  margin-top: 10%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.createAccount2{
  margin-top: 10%;
width: 100%;
height: auto;
display: flex;
justify-content: center;
border-radius: 20px;
background-color: #62B8BF;
}


.backArrow{
  display: flex;
  width: 9%;
  justify-content: center;
  align-content: center;
  position: absolute;
}

.progressBar{
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  padding-top: 10%;
}

.formStyle{
  color: lightgray;
  display: flex;
  position: relative;
  width: 70%;
  align-content: center;
  justify-content: center;
}

.onboardingBotao2{
  margin-top: 10%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.formulario{
  position: relative;
display: flex;
background: white;
width: 60%;
justify-content: center;
align-content: center;
padding: 10%;
margin: 10%;
border-radius: 15px;
margin-top: 30%
}
.insertName{
  position: relative;
}
.divFormulario{
  display: flex;
  justify-content: center;
  position: relative;

}

.btnForm{
  display: flex;
justify-content: center;
align-content: center;
position: relative;
padding-top: 2em;

}

.skipBtn{
  position: relative;
justify-content: center;
align-content: center;
display: flex;
padding-top: 18%;

}


.dog-profile-pic-wrapper{
  position:relative;
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.dog-name-wrapper{
  position: relative;
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}


.subtitleProfilepic{
  position: relative;
  text-align: center;
  margin-top:30%;

}

.descriptionProfilePic{
  position: relative;
  text-align: center;
  margin-top: 10%;
  padding: 2% 10%;
}

.dogProfilePic{
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  padding-top: 5%;
}

.btnAddImg2{
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  margin-top: 20%;
}

.skipBtn2{
  display: flex;
  align-content: center;
  position: relative;
  justify-content: center;
  padding-top: 26%;
}

.dog-wrapper-details{
  position: relative;
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.subtitleProfDetails{
  position: relative;
  text-align: center;
  margin-top:30%;

}

.descriptionProfDetails{
  position: relative;
  text-align: center;
  margin-top: 10%;
  padding: 2% 10%;
}

.divFormulario2{
  display: flex;
  position: relative;
  border-radius: 20px;
  background-color: white;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 8em;
}

.detailsClass{
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.inputName{
  border-radius: 1em;
  height: 1.5em;
  border-color: lightgray;
}
.btnAddImg{
  display: flex;
position: relative;
width: 100%;
justify-content: center;
align-content: center;
padding: 0.5em;
font-size: 16px;
font-family: "Montserrat", sans-serif;
color: white;
background-color: #62B8BF;
border-radius: 20px;
}

.optFont{
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 24px
}

.selectDetails{
  height: 2em;
display: flex;
justify-content: center;
align-content: center;
position: relative;
top: 1em;
left: 2.5em;
}

.steralized{
  height: 2em;
display: flex;
position: relative;
float: left;
top: 4em;
right: 9em;
}

h3{
  font-size: 16px;
font-family: "Montserrat", sans-serif;
font-weight: 600;

}


/* toggle buttons */
.toggle-btns{

  position: relative;
  display: flex;
  float: right;
  left: 7em;
  top: 0.9em;
}

.detailsBtn{
  margin-top: 10%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  }

.titleAge{
  position: relative;
  text-align: center;
}

.dog-wraper-age{
  position: relative;
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
}
.howOld{
  position: relative;
text-align: center;
padding-top: 30%;
}

.textOld{
  position: relative;
  text-align: center;
  margin-top: 10%;
  padding: 2% 10%;
}

.divAge{
  width: 21em;
  height: 10em;
  position: relative;
  background-color: white;
  justify-content: end;
  display: flex;
  border-radius: 1.5em;
  margin-top: 20%;

}

.age{
  display: flex;
position: relative;
height: 2.5em;
float: left;
right: 5em;

}

.inputYear{
  width: 3em;
height: 3em;
border-color: #62B8BF;
font-family: "Montserrat", sans-serif;
}

.year{
  display: flex;
position: relative;
top: 5em;
right: 5em;

}

.yearLabel{
  display: flex;
position: relative;
top: 5em;
right: 3.5em;
font-family: "Montserrat", sans-serif;
font-size: 10px;
}

.month{
  display: flex;
  position: relative;
  top: 5em;
  right: 5em;
}
.monthLabel{
  display: flex;
  position: relative;
  top: 5em;
  right: 3.5em;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
}
.inputMonth{
  width: 3em;
height: 3em;
border-color: #62B8BF;
font-family: "Montserrat", sans-serif;
}

.ageBtn{
  margin-top: 10%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.skipAge{
  position: relative;
justify-content: center;
align-content: center;
display: flex;
padding-top: 18%;

}

.dog-wraper-size{
  position: relative;
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
}

.titleSize{
  position: relative;
  text-align: center;
}

.subtitleSize{
  position: relative;
  text-align: center;
  margin-top: 10%;

}

.descriptionSize{
  position: relative;
  text-align: center;
  margin-top: 10%;
  padding: 2% 10%;
}

/* slider */
.chooseSize{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

.textSize{
  position: relative;
align-content: center;
justify-content: center;
display: flex;
margin-top: -10%;
}

.nxtImage{
  width: 5%;
display: flex;
position: absolute;
right: 10%;
top: 50%;
}

.nxtImage2{
  width: 5%;
display: flex;
position: absolute;
right: 10%;
top: 50%;
}

.nxtImageLeft{
  width: 5%;
display: flex;
position: absolute;
left: 10%;
top: 50%;
}

.imgDogStyle{

justify-content: center;
display: flex;
position: relative;
align-content: center;
height: 70vw;
}

.takeSiz{
  border-radius: 20px;
  background-color: #62B8BF;
  position: absolute;
  justify-content: center;
  align-content: center;
  right: 5%;
  display: flex;
  width: 90%;
}