:root {
  --ginFont: Open Sans, Helvetica, sans-serif;
  --ginBorderSmall: 2px;
}

body.admin-user {
  --ginHorizontalToolbarOffset: 154px;
  --ginMainToolbarOffset: 53px;
  --ginToolbarHeight: 94px;
  --gin-height-sticky: 72px;
  --gin-toolbar-y-offset: 153px;
}

@media (max-width: 975px) {
  body.admin-user {
    --ginMainToolbarOffset: 39px;
    --ginHorizontalToolbarOffset: 88px;
    --ginToolbarHeight: 90px;
    --gin-toolbar-y-offset: 88px;
  }
}

body.client-user.user-logged-in,
body.client-multi-user {
  --ginFont: Open Sans, Helvetica, sans-serif;
  --ginHorizontalToolbarOffset: 101px;
  --ginMainToolbarOffset: 53px;
  --ginToolbarHeight: 41px;
  --gin-toolbar-y-offset: 101px;
}

body.client-user.user-logged-in #toolbar-administration,
body.client-multi-user #toolbar-administration {
  display: none;
}

[data-gin-accent] {
  --colorGinPrimary: #0e369d;
  --colorGinPrimaryLight: rgba(14, 54, 157, .15);
  --colorGinAppBackground: #f8f9fa;
  --colorGinPrimaryHover: var(--colorGinPrimary);
  --colorGinPrimaryActive: var(--colorGinPrimary);
  --colorGinItemHover: #eef4ff;
  --colorGinPrimaryLightHover: #eef4ff;
  --colorGinPrimaryLightActive: rgba(14, 54, 157, .3);
  --colorGinPrimaryLightShadow: rgba(14, 54, 157, .45);
}

[data-gin-accent=neutral] {
  --gin-color-primary-rgb: 14, 54, 157;
  --gin-color-primary-light-rgb: 207, 207, 207;
  --gin-color-primary-hover: #0e369d;
  --gin-color-primary-active: #0e369d;
  --gin-bg-app-rgb: 248, 248, 248;
  --gin-bg-header: #e2e2e2;
  --gin-color-sticky-rgb: 236, 236, 236;
}

:root {
  --gin-height-sticky: 72px;
  --gin-toolbar-y-offset: 154px;
  --gin-link-decoration-style: none;
  --gin-font: "Open Sans", Helvetica, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
  --gin-color-green: #058260;
  --gin-color-green-light: #32cea4;
  --gin-color-green-lightest: #adebdb;
  --gin-bg-green: #145242;
  --gin-bg-green-light: rgba(72, 171, 123, .1);
  --gin-color-disabled: #bbb;
}

body {
  --drawer-width: 54px;
  font-family: "Open Sans", Helvetica, sans-serif;
}

body .toolbar {
  font-family: "Open Sans", Helvetica, sans-serif;
}

body.drawer-open {
  --drawer-width: 224px;
}

body a,
body .link,
body button.link,
body .tabs__link.is-active,
body [open] .claro-details__summary--accordion,
body [open] .claro-details__summary--accordion-item,
body [open] .claro-details__summary--vertical-tabs-item,
body .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
  text-decoration: none;
}

body a:hover,
body .link:hover,
body button.link:hover,
body .tabs__link.is-active:hover,
body [open] .claro-details__summary--accordion:hover,
body [open] .claro-details__summary--accordion-item:hover,
body [open] .claro-details__summary--vertical-tabs-item:hover,
body .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
  color: #0e369d;
}

#portal-drawer {
  --height: calc(100% - var(--ginHorizontalToolbarOffset));
  height: var(--height);
}

#portal-drawer.open #toggle-drawer span {
  transform: rotate(-180deg);
}

#portal-drawer.open .drawer-header {
  height: 100%;
  padding-top: 1rem;
}

#portal-drawer .track {
  width: var(--drawer-width);
  transition: .15s ease-in-out all;
}

.portal-drawer-container {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  display: inline-flex;
  flex-direction: column;
  width: var(--drawer-width);
  white-space: nowrap;
  padding: 10px;
  overflow: hidden;
  z-index: 1039;
  transition: .15s ease-in-out all;
  top: var(--ginHorizontalToolbarOffset);
  height: var(--height);
}

.portal-drawer-container .drawer {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.portal-drawer-container .drawer .drawer-item {
  box-sizing: border-box;
}

.portal-drawer-container .drawer .drawer-item:last-of-type {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.portal-drawer-container .drawer .drawer-item:first-of-type {
  flex-grow: 1;
  max-height: 58px;
}

.portal-drawer-container .drawer .drawer-item .drawer-header {
  border-top: 1px solid #e3e3e3;
  padding: 1rem .5rem 0;
  color: #000;
  font-weight: 600;
  font-size: 1em;
  height: 1px;
  padding-top: 0;
  overflow: hidden;
}

.portal-drawer-container .drawer .drawer-item .drawer-action {
  line-height: inherit;
  cursor: pointer;
  padding: .5rem;
  color: #000;
  display: block;
  width: 100%;
  border-radius: 5px;
}

.portal-drawer-container .drawer .drawer-item .drawer-action:hover {
  background-color: #eef4ff;
  color: #000;
}

.portal-drawer-container .drawer .drawer-item .icon-label .material-icons {
  transition: all .25s ease-in-out;
}

.portal-drawer-container .drawer .drawer-item.is-active .drawer-action .icon-label .material-icons {
  transform: rotate(-180deg);
  transition: all .25s ease-in-out;
}

.portal-drawer-container .drawer .drawer-item.is-active .sub-items {
  height: 100%;
  visibility: visible;
}

.portal-drawer-container .drawer .drawer-item.is-active > .drawer-action {
  background-color: #06f;
  color: #fff;
}

.portal-drawer-container .drawer .drawer-item.is-active.drop-down-trigger > .drawer-action {
  background-color: transparent;
  color: #000;
}

.portal-drawer-container .drawer .sub-items {
  height: 0;
  visibility: hidden;
  background-color: transparent;
  margin: 0;
  list-style: none;
  transition: .45s ease-in-out all;
  padding-left: 0;
}

.portal-drawer-container .drawer .sub-items .drawer-action {
  padding-left: 43px;
  border: none;
}

.portal-drawer-container .drawer .sub-items .drawer-action:hover {
  background-color: #eef4ff;
  color: #000;
}

.portal-drawer-container .drawer .sub-items .sub-item {
  border-radius: 5px;
}

.portal-drawer-container .drawer .sub-items .sub-item > .drawer-action:hover {
  background-color: #eef4ff;
  color: #000;
}

.portal-drawer-container .drawer .sub-items .sub-item.is-active-sub {
  background-color: #06f;
}

.portal-drawer-container .drawer .sub-items .sub-item.is-active-sub > .drawer-action {
  color: #fff;
}

.portal-drawer-container .drawer .sub-items .sub-item.is-active-sub > .drawer-action:hover {
  background-color: #06f;
  color: #fff;
}

.portal-drawer-container .drawer .active .sub-items {
  height: 100%;
  visibility: visible;
  transition: .45s ease-in-out all;
}

.portal-drawer-container .drawer .active .drawer-action .icon-label .material-icons {
  transform: rotate(-180deg);
  transition: all .25s ease-in-out;
}

.portal-drawer-container .icon-label {
  display: flex;
  align-items: center;
  text-align: center;
}

.portal-drawer-container .icon-label .material-icons-outlined {
  font-size: 18px;
}

.portal-drawer-container .icon-label .label {
  margin: 0 18px;
}