* { box-sizing: border-box; }

#btn {
  position: absolute;
  z-index: 5;
  top: 5px;
  border: 1px solid;
  border-color: var(--border-grey2);
  border-radius: 6px;
  padding: 4px 5px 0px 5px;
  height: 39px;
  left: 15px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#btn::after {content: '';display: inline-block;width: 29px;height: 29px;background-image: url(svg/user5.svg);background-size: contain;background-repeat: no-repeat;/* margin: 0px 8px; */transition: transform 0.3s ease;    opacity: var(--icon-opacity);
    filter: var(--icon-filter);}
#btn div {
  width: 27px;
  height: 2px;
  margin-bottom: 6px;
  background-color: var(--background-black);
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}

#btn:hover > div { box-shadow: 0 0 1px #00DFFC; }

#btn.active { display: none; }

#btn.active div { background-color: var(--dark-grey2);; }

#btn.active:hover > div { box-shadow: 0 0 1px var(--dark-grey2);; }

#btn.active #top {
  -webkit-transform: translateY(10px) rotate(-135deg);
  -ms-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
}

#btn.active #middle {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

#btn.active #bottom {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

#box {
  position: fixed;
  z-index: 20;
  overflow: scroll;
  top: 0px;
  left: -222px;
  width: 222px;
  border-right: solid 1px;
  border-color: var(--medium-grey2);
  opacity: 0;
  /* padding: 20px 0px; */
  height: 100%;
  background-color: var(--background-white);
  color: var(--text-dark);
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}


#box.active {
  left: 0px;
  opacity: 1;
}


.menu {
font-size: 14px;
}

.menu-header {

}

.menu-content {
  display: flex;
  flex-direction: column;
}

.menu-header {
  position: relative;
  width: 100%;
  border-bottom: var(--medium-grey2) solid 1px
}

.menu-header h2 {
  font-weight: 400;
  font-size: 39px;
  font-family: 'azika';
  display: block;
  position: relative;
  margin: 10px 0px;
  
}

.menuHead {

}

.list {
border-bottom: var(--medium-grey2) solid 1px;
}

 .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 1em;
  padding: 12px 5px 12px 15px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
  border-bottom: solid 1px var(--border-grey);
  
}
.item:hover {
  background-color: var(--dark-fade);
}

.menuHead {

}

.menuHead .list-item {
  padding: 5px 9px;
  margin: 4px 6px;
  border: solid 1px var(--border-grey3);
  border-radius: 5px;
  background: var(--background-white);
}

.item.list-item{
  text-align: left;
}

#logoutButton.item.list-item::after{
  
  
  
  font-size: 24px;
  line-height: 0.5em;
  content: '';
  display: inline-block;
  width: 20px; /* Adjust size as needed */
  height: 20px; /* Adjust size as needed */
  background-image: url('svg/logout.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px; /* Space between text and icon */
  transition: transform 0.3s ease; /* Smooth transition for rotation */
      opacity: var(--icon-opacity);
    filter: var(--icon-filter);
}

#accountButton.item.list-item::after{
  font-size: 24px;
  line-height: 0.5em;
  content: '';
  display: inline-block;
  width: 20px; /* Adjust size as needed */
  height: 20px; /* Adjust size as needed */
  background-image: url('svg/user5.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px; /* Space between text and icon */
  transition: transform 0.3s ease; /* Smooth transition for rotation */
  opacity: var(--icon-opacity);
  filter: var(--icon-filter);
}

#settingsButton {
  text-align: left;
}

#settingsButton.list-item::after{
  
  
  
  font-size: 24px;
  line-height: 0.5em;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(svg/arrow-open.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
  transition: transform 0.3s ease;
      opacity: var(--icon-opacity);
    filter: var(--icon-filter);
}

#settingsButton.list-item.is-active::after{
  
  
  
  font-size: 24px;
  line-height: 0.5em;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(svg/arrow-close.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  transition: transform 0.3s ease;
      opacity: var(--icon-opacity);
    filter: var(--icon-filter);
}

.menuLink {
  font-size: 10px;
  text-align: left;
  color: gray;
  text-decoration: none;
  display: inline-block;
  padding-top: 13px;
  padding-left: 6px;
}

#chartList {
  text-align: left;
}



#chartList .item::after{
  font-size: 24px;
  line-height: 0.5em;
  content: '';
  display: inline-block;
  width: 20px; /* Adjust size as needed */
  height: 20px; /* Adjust size as needed */
  background-image: url('svg/3dots.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px; /* Space between text and icon */
  transition: transform 0.3s ease; /* Smooth transition for rotation */
      opacity: var(--icon-opacity);
    filter: var(--icon-filter);
}

#chartList .item span::before{
  font-size: 24px;
  line-height: 0.5em;
  content: '';
  display: inline-block;
  width: 20px;
  top: 4px;
  position: relative;
  height: 20px;
  background-image: url(svg/user5.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
      opacity: var(--icon-opacity);
    filter: var(--icon-filter);
  margin-right: 8px;
}

#newChartBtnSidebar::after{
  font-size: 24px;
  line-height: 0.5em;
  content: '';
  display: inline-block;
  width: 20px;
  top: 0px;
  position: relative;
  height: 20px;
  background-image: url(svg/plus.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
      opacity: var(--icon-opacity);
    filter: var(--icon-filter);
  margin-right: 8px;
}

#chartList .item.active span::before{
  background-image: url('svg/user6.svg');
  opacity: 1;
}

#chartList .item:hover::after{
  background-color: var(--dark-fade);
}

#util-list {

}

#util-list .item {

}
.partner-buttons{
  padding: 10px;
}

.partner-buttons button {
    width: 100%;
    background: var(--background-white);
}