body {
  -webkit-overflow-x: hidden; /* For older versions of Safari/Chrome */
  -moz-overflow-x: hidden; /* For older versions of Firefox */
  -ms-overflow-x: hidden; /* For Internet Explorer */
  overflow-x: hidden; /* Standard property */
}

.container__client-nav {
  font-size: 2rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.client_navbar {
  background-color: #f8f8f8;
  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.15);
  position: fixed;
  max-height: 6rem;
  width: 100%;
  z-index: 2;
}
.client_user {
   max-width: 2rem;
  font-size: 35px;
  cursor: pointer;
}
.client_brand {
  max-height: 2.5rem;
  position: relative;
  left: 30px;
}

.logoutButton {
  border: 2px solid #020234;
  border-radius: 5px;
  font: normal 700 1.3rem 'Montserrat', sans-serif;
  background-color: #020234;
  color: #e8f0fc;
  padding: 0.3em;
}
.logoutButton:hover {
  background-color: transparent;
  color: #020234;
  transition: background-color 0.3s, color 0.3s;
}

/* xxs */
@media (min-width: 320px) {
  .client_navbar {
    max-height: 6rem;
  }
  .client_user {
    max-width: 1.3rem;
    font-size: 25px;
    position: relative;
  }
  .client_brand {
    max-height: 1.3rem;
    position: relative;
    left: 0.5rem;
  }
  .logoutButton {
    font: normal 700 0.65rem 'Montserrat', sans-serif;
    padding: 0.3em;
    position: relative;
  }
}
/* xs */
@media (min-width: 475px) {
  .client_navbar {
    max-height: 6rem;
  }
  .client_user {
     max-width: 1.5rem;
    font-size: 30px;
    position: relative;
  }
  .client_brand {
    max-height: 1.8rem;
    position: relative;
    left: 0.5rem;
  }
  .logoutButton {
    font: normal 700 0.85rem 'Montserrat', sans-serif;
    padding: 0.5em;
    position: relative;
  }
}

/* sm */
@media (min-width: 640px) {
  .client_navbar {
    max-height: 6rem;
  }
  .client_user {
     max-width: 1.5rem;
    font-size: 35px;
    position: relative;
    left: -1.5rem;
  }
  .client_brand {
    max-height: 2rem;
    position: relative;
    left: 0.5rem;
  }
  .logoutButton {
    font: normal 700 1.15rem 'Montserrat', sans-serif;
    padding: 0.3em;
    position: relative;
    right: -1.5rem;
  }
}

/* md */
@media (min-width: 768px) {
  .client_navbar {
    max-height: 6rem;
  }
  .client_user {
   max-width: 2rem;
   font-size: 35px;
  }
  .client_brand {
    max-height: 2.3rem;
    position: relative;
    left: 1.5rem;
  }
  .logoutButton {
    font: normal 700 1.25rem 'Montserrat', sans-serif;
    padding: 0.3em;
  }
}

/* lg */
@media (min-width: 1024px) {
  .client_navbar {
    max-height: 6rem;
  }
  .client_user {
     max-width: 2rem;
    font-size: 35px;
  }
  .client_brand {
    max-height: 2.5rem;
    position: relative;
    left: 2.5rem;
  }
  .logoutButton {
     font: normal 700 1.3rem 'Montserrat', sans-serif;
    padding: 0.3em;
  }
}

/* xl */
@media (min-width: 1280px) {
  .client_navbar {
    max-height: 6rem;
  }
  .client_user {
     max-width: 2rem;
    font-size: 35px;
  }
  .client_brand {
    max-height: 2.5rem;
    position: relative;
    left: 2.5rem;
  }
  .logoutButton {
    font: normal 700 1.3rem 'Montserrat', sans-serif;
    padding: 0.3em;
  }
}

/* 2xl */
@media (min-width: 1536px) {
  .client_navbar {
    max-height: 6rem;
  }
  .client_user {
 max-width: 2rem;
   font-size: 35px;
  }
  .client_brand {
    max-height: 2.5rem;
    position: relative;
    left: 2.5rem;
  }
  .logoutButton {
    font: normal 700 1.3rem 'Montserrat', sans-serif;
    padding: 0.3em;
  }
}