web_app/frontend/src/pages/DashboardPage.css

:root.dark-theme {
  --text: #f4faf7;
  --background: #102317;
  --primary: #aae4c7;
  --secondary: #060b0e;
  --accent: #a1c2d7;
}

:root.light-theme {
  --text: #102317;
  --background: #f4faf7;
  --primary: #aae4c7;
  --secondary: #c6dae6;
  --accent: #437a9c;
}

/* MAIN CONTAINER*/

.dashboard-background {
position: absolute;
top: 0;
left: 0;
min-height: 100vh; 
width: 100%;
background-color: var(--background); 
background-repeat: no-repeat; 
background-size: cover;
z-index: -1;
}

.main-container {
position: absolute;
top: 84px;
left: 10px;
right: 10px;
height: 85vh;
background-color: transparent;
border-radius: 15px;
}

.main-grid {
background-color: transparent;
flex-grow: 1;
height: 100%;
border-radius: 15px;
}


/* MENU */

/* .menu-grid {
} */

.menu-box {
border-radius: 15px;
padding: 10px;
margin-right: 10px;
height: calc(100%);
background-color: var(--accent);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.menu-list-1 {
background-color: var(--secondary);
color: var(--text);
border-radius: 15px;
}

.menu-list-2 {
text-align: center;
background-color: var(--secondary);
color: var(--text);
border-radius: 15px;
}

.menu-list-item {
font-size: 14px;
}

/* SERVICE DASHBOARD */

.services-grid {
height: 100%;
box-sizing: border-box;
}

.services-grid-item {
display: flex;
flex-direction: column;
}

.services-box {
border-radius: 15px;
padding: 10px;
margin-left: 10px;
flex-grow: 1;
background-color: var(--accent);
box-sizing: border-box;
color: var(--secondary)
}

.services-card {
height: 100%;
border-radius: 15px !important;
background-color: var(--secondary) !important;
}

.services-card-action-area {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: 'blue' !important;

}

.services-card-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 90%;
background-color: 'blue' !important;

}

.services-card-typography {
margin-top: 1;
color: var(--text);
}

.services-card-icon {
font-size: 60px !important;
color: var(--text);
}

/* SERVICES GRID ITEMS */
.services-box-0 {
margin-right: 10px;
margin-bottom: 10px;
margin-top: 0px;
}

.services-box-1 {
margin-right: 0px;
margin-bottom: 10px;
margin-top: 0px;
}

.services-box-2 {
margin-right: 10px;
margin-bottom: 0px;
margin-top: 10px;
}

.services-box-3 {
margin-right: 0px;
margin-bottom: 0px;
margin-top: 10px;
}