body {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.navbar {
  display: flex;
  height: 8%;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: rgb(0, 38, 77);
  color: white;
}

.placeholder {
  flex-basis: 150px;
}

.title-container {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

.buttons button {
background-color: rgb(0, 73, 141);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: 0.2s ease;
margin-left: 8px;
}

.buttons button:hover {
  background-color: #006ad1;
  transform: translateY(-2px);
}

.menu-content-wrapper {
flex: 1;
display: flex;
height: auto;
}
.menu {
width: 15%;
float: left;
background-color: rgb(0, 73, 141);
height: 100%;
box-sizing: border-box;
padding: 10px;
overflow-y: auto;
}
.role-buttons {
display: flex;
align-items: center;
flex-direction: row;
gap: 10px;
}
.menu {
display: flex;
flex-direction: column;
gap: 10px;
}