nav {
  position: fixed;
  width: 100%;
  top: 0;
}

nav .menulist-desktop {
  display: none;
}

nav .navbar {
  padding: 0.5rem;
  z-index: 2;
  position: relative;
  background-color: #f5f5f5;
  /*box-shadow: $shadow_global;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

nav .navbar a.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

nav .navbar #logo {
  height: 2.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  fill: black;
}

nav .navbar #burgerbutton {
  height: 2rem;
  background: none;
  border: none;
  padding: .25rem;
}

nav .navbar #burgerbutton .burger {
  height: 100%;
  fill: #252525;
}

nav #list {
  padding: 1rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #f5f5f5;
}

nav #list li {
  text-align: center;
  list-style: none;
}

nav #list a {
  text-decoration: none;
  padding: 1rem;
  color: black;
}

.hidden {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  z-index: -1;
}

.push {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: -1;
}

.active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

@media screen and (min-width: 1024px) {
  #burgerbutton {
    display: none;
  }
  nav .navbar {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  nav .menulist-desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: relative;
    z-index: 3;
  }
  nav .menulist-desktop li {
    text-align: center;
    list-style: none;
  }
  nav .menulist-desktop a {
    text-decoration: none;
    margin: 0 2rem;
    padding: .5rem 1rem;
    color: black;
    font-size: .875rem;
    -webkit-transition: 200ms;
    transition: 200ms;
  }
  nav .menulist-desktop .here {
    color: #05a883;
  }
  nav .menulist-desktop a:hover {
    background-color: #252525;
    color: #f5f5f5;
  }
  nav .menulist-desktop .here:hover {
    background-color: #f5f5f5;
    color: #252525;
  }
}

.profile-card {
  margin: 10px;
  padding: 0;
  background-color: white;
  min-width: 340px;
  border-radius: calc(2px + 10px);
  -webkit-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -o-object-fit: cover;
     object-fit: cover;
}

.profile-card__head {
  margin: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: calc(1.5 * 10px);
}

.profile-card__head td {
  font-size: .6rem;
  text-transform: uppercase;
}

.profile-card__head .caption {
  padding-right: 10px;
}

.profile-card__head .name {
  font-size: .9rem;
  font-weight: 500;
}

.profile-card__info {
  margin: 10px;
}

.profile-card__info h2 {
  margin-bottom: 10px;
}

.profile-card__details {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  margin: 10px;
}

.profile-card__details .type, .profile-card__details .duration, .profile-card__details .cost {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.profile-card__details .type .icon, .profile-card__details .duration .icon, .profile-card__details .cost .icon {
  margin-right: 10px;
}

.profile-picture {
  margin-right: 10px;
  height: 60px;
  width: 60px;
  background-color: #e6e6e6;
  border-radius: 2px;
  outline: none;
  border: none;
}

.calendar {
  margin-bottom: 2rem;
}

.calendar__control {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5fr 1fr;
      grid-template-columns: 1fr 5fr 1fr;
  justify-items: center;
  height: 3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /*
        &__arrow--left{
        }

        &__month{
        }

        &__arrow--right{

        }
*/
}

.calendar__view__days {
  height: 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[7];
      grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: .8rem;
  color: #a1a1a1;
}

.calendar__view__field {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[7];
      grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}

.calendar__view__field--unit {
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.calendar__view__field--unit--date {
  margin: 4px;
}

.calendar__view__field--unit--points {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.calendar__view__field--unit--points--point {
  height: 4px;
  width: 4px;
  margin: 2px;
  border-radius: 2px;
  background-color: red;
}

.agenda h1 {
  margin: 1rem;
}

.agenda__wrapper {
  max-height: 50vh;
  overflow: scroll;
}

.agenda__item {
  margin: 1rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 4fr 1fr;
      grid-template-columns: 4fr 1fr;
      grid-template-areas: 'title tag' 'appointment tag';
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.agenda__item--title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  font-size: .8rem;
  font-weight: 500;
}

.agenda__item--appointment {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: appointment;
  font-size: .7rem;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.agenda__item--appointment--date {
  margin-right: 1rem;
}

.agenda__item--tag {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  grid-area: tag;
  border-radius: 1rem;
  font-size: .6rem;
  text-transform: uppercase;
  background-color: #ff0055;
  color: #f5f5f5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: .2rem 1rem;
}

* {
  margin: 0;
  padding: 0;
}

html {
  background-color: #f5f5f5;
}

body {
  font-family: Poppins, sans-serif;
  color: #5a5a5a;
  max-width: 1920px;
  margin: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  height: calc(100vh - 4rem);
  margin-top: 4rem;
}

.container__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3fr;
      grid-template-columns: 1fr 3fr;
  min-height: calc(100vh - 4rem);
}

.container__wrapper__sidebar {
  padding: 10px;
  margin: 0 10px;
  border-radius: 1.5rem;
  border: 1px solid white;
}

.container__wrapper__main-area {
  background-color: #fff;
  border-radius: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-x: scroll;
}

.container__wrapper__main-area h1 {
  margin: 0 10px;
  margin-top: calc(2 * 10px);
}

.container__wrapper__main-area--slide {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow-x: scroll;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scroll-padding: 10px;
}

h1 {
  font-weight: 500;
  font-size: 1rem;
}

h2 {
  font-weight: 500;
  font-size: .9rem;
}

p, td {
  font-weight: 300;
  font-size: .8rem;
}
/*# sourceMappingURL=main.css.map */