:root {
  font-size: 16px;
  --w-c: #ffffff;
  --p-c: #091eb5;
  --s-c: #f64740;
  --bg-c: #f0f8ff;
  --br-c: #efefef;
  --l-c: #05126d;
  --h-c: #091eb5;
  --t-c: #43414b;
  --t-c-l: #727178;
  --t-c-lx: #a1a0a5;
  --hvr-c: rgb(13, 77, 204);
  --brd-l: #ddd;
}

* {
  box-sizing: border-box;
  font-family: 'Overpass', sans-serif;
}

html,
body {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  color: var(--l-c);
}

a {
  text-decoration: none !important;
  color: inherit;
}
a:hover {
  text-decoration: underline;
}

label {
  display: block;
}
button.primary {
  padding: 10px 16px 9px;
  background: var(--s-c);
  border-radius: 2px;
  border: none;
  color: #fff;
  cursor: pointer;
}
button.secondary {
  padding: 10px 16px 9px;
  background: #fff;
  border-radius: 2px;
  border: none;
  color: var(--p-c);
  cursor: pointer;
}
button.secondary:hover,
button.secondary.active {
  background: var(--bg-c);
}
button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
#main-header .logo {
  margin-bottom: 0;
}
#main-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  height: 50px;
  padding: 0.3em 1em;
  margin-bottom: 0;
  z-index: 3;
}

@media (max-width: 640px) {
  #main-header {
    flex-wrap: wrap;
    height: 100px;
  }

  .header-selects {
    width: 100%;
    display: flex;
    gap: 1em;
  }
  .header-selects > select {
    flex: 1;
  }
}
#main-header button {
  display: none;
}
aside {
  height: calc(100vh - 50px);
  position: sticky;
  top: 50px;
  padding: 2em 1em !important;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}
.spacer {
  flex: 1;
}
aside > a {
  color: var(--t-c-l);
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  padding: 0.5em 0.5em;
  cursor: pointer;
  transition: all 200ms ease-out;
}
aside > a[aria-current='page'] {
  background-color: var(--bg-c);
  color: var(--l-c);
}
aside > a[aria-current='page'] svg > * {
  stroke: var(--l-c);
}
aside > a:hover,
aside > a:hover svg > * {
  stroke: var(--l-c);
  color: var(--l-c);
}
.aside-link .icon {
  margin-right: 5px;
}

@media (max-width: 640px) {
  #main-header button {
    display: inline-block;
  }
  aside {
    display: none;
  }
  aside.mobile-sidebar-visible .spacer {
    display: none;
  }
  aside.mobile-sidebar-visible {
    display: block;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    z-index: 5;
    background-color: #fff;
  }
}

/* Custom scrollbar styles */

.sb-scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
}

.sb-scrollbar-horizontal::-webkit-scrollbar {
  height: 5px;
}

.sb-scrollbar-vertical::-webkit-scrollbar {
  width: 5px;
}
.sb-scrollbar-horizontal::-webkit-scrollbar,
.sb-scrollbar-vertical::-webkit-scrollbar {
  background-color: #f5f5f5;
}

.sb-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--t-c-lx);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  padding: 7px;
  padding-right: 20px !important;
  border: 1px solid var(--t-c-l);
  border-radius: 3px;
  font-size: 0.8rem;
  margin: 0;
  color: var(--t-c-l);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 17.414 3.293 8.707l1.414-1.414L12 14.586l7.293-7.293 1.414 1.414L12 17.414z"/></svg>');
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 50%;
  background-size: 14px;
}