monitor-dashboard/src/assets/dashboard-theme/structure.css

:root {
  --sidebar-width: 230px;
  --sidebar-mini-width: 130px;
  --sidebar-font-size: 14px;
  --header-height: 100px;
  --background-color: #F9FBFC;
}

#sidebar_main .badge {
  height: 59px;
  position: absolute;
  top: 0;
  left: -5px;
  z-index: 1;
  background-color: transparent;
  display: block !important;
}

#sidebar_main .sidebar_main_header .logo {
  margin-left: 35px;
  margin-top: 25px;
  margin-right: 10px;
  height: 50px;
  position: relative;
}

.sidebar_mini #sidebar_main .sidebar_main_header .logo {
  margin-right: 15px;
  margin-left: 15px;
}

#sidebar_main .sidebar_main_header .logo > img {
  height: 100%;
}

#sidebar_main .sidebar_main_header .logo > .logo-label {
  font-size: var(--xs-font-size);
  color: var(--text-color);
}

#sidebar_main #sidebar_content {
  width: var(--sidebar-width);
  position: fixed;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 981;
  background: #fff;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition-property: width;
}

.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle {
  left: var(--sidebar-mini-width);
}

.sidebar_main_swipe #sidebar_switcher_toggle {
  left: var(--sidebar-width);
}

#sidebar_main .menu_section {
  min-height: 30vh;
  padding: 0 10px;
}

#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li,  #sidebar_main .special_section  ul:not(.uk-dropdown-nav) > li {
  padding: 5px 0;
}

#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > *,
#sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a {
  font-size: var(--sidebar-font-size);
}

#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > a,
#sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a {
  display: block;
  color: rgba(var(--text-color-rgb), 0.8);
}

#sidebar_main .menu_section  ul:not(.uk-dropdown-nav) > li:hover > a, #sidebar_main .special_section  ul:not(.uk-dropdown-nav) > li:hover > a {
  color: var(--secondary-color);
}

#sidebar_main .menu_section ul:not(.uk-dropdown-nav) li.uk-active > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li.uk-active > a {
  color: var(--primary-color);
  font-weight: 700;
}

#sidebar_switcher_toggle {
  top: 50%;
  color: var(--secondary-color);
  transform: translateY(-50%);
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--text-color);
  border-left: 0;
  cursor: pointer;
  padding: 0 4px;
  width: 10px;
  height: 66px;
  z-index: 981;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition-property: left;
}

.sidebar_main_swipe #page_content,
.sidebar_main_swipe openaire-user  > user > *,
.sidebar_main_swipe openaire-error  > * {
  padding-left: var(--sidebar-width);
  padding-top: var(--header-height);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.sidebar_main_swipe #page_content .message {
  padding-left: calc(var(--sidebar-width) - 100px);
  padding-right: 20px;
  text-align: center;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.sidebar_main_swipe bottom > * {
  padding-left: var(--sidebar-width);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

/*Sidebar close*/
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content,
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) openaire-user > user > *,
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) openaire-error  > *,
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) bottom > *{
  padding-left: 0;
}

.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content {
  display: none;
  width: 0;
}

/*Sidebar mini*/
.sidebar_main_swipe.sidebar_mini #page_content,
.sidebar_main_swipe.sidebar_mini openaire-user > user > *,
.sidebar_main_swipe.sidebar_mini openaire-error  > *,
.sidebar_main_swipe.sidebar_mini bottom > * {
  padding-left: var(--sidebar-mini-width);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.sidebar_mini #sidebar_main #sidebar_content {
  width: var(--sidebar-mini-width);
}

#sidebar_main #sidebar_content {
  border-right: 1px solid var(--text-color);
}

#page_content {
  min-height: calc(100vh - var(--header-height));
  background-color: var(--background-color);
  position: relative;
}

#page_content .message {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

#page_content_header {
  position: fixed;
  background: var(--background-color);
  top: var(--header-height);
  left: var(--sidebar-width);
  right: 0;
  z-index: 980;
  padding: 0 90px;
  transition-property: width;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.sidebar_mini #page_content_header {
  left: var(--sidebar-mini-width);
}

#page_content_inner {
  padding: 50px 90px 90px;
}

@media only screen and (max-width: 639px){
  :root {
    --sidebar-mini-width: 100px;
  }

  #page_content_inner {
    padding: 50px 45px 90px;
  }

  #page_content_header {
    padding: 0 45px;
  }

  .sidebar_mini #page_content_header {
    width: calc(100vw - var(--sidebar-mini-width) - 90px);
  }

  .sidebar_main_swipe #page_content .message {
    padding-left: var(--sidebar-mini-width);
    padding-right: 0;
  }
}

.uk-navbar-center:not(:only-child) {
  max-width: 50%;
  text-align: center;
  padding-left: calc(var(--sidebar-mini-width)/2);
}

navbar > *, openaire-error > *, openaire-user> user > *, .fs-modal {
  background-color: var(--background-color) !important;
}

.tm-header .uk-navbar-container {
  background-color: var(--background-color) !important;
  box-shadow: none !important;
}

#notifications .uk-offcanvas-bar {
  top: var(--header-height) !important;
}

#notifications-switcher #notifications-count {
  background-color: var(--secondary-color);
}