@import "../../../src/utils/theme/colorVariable.scss";
.logheader {
  max-width: 100px;
  margin: 0 8px;
  cursor: pointer;

  img {
    display: flex;
    width: 100%;
    height: auto;
  }
}
.revision-materials {
  &:hover {
    .d-flex {
      svg {
        path {
          fill: $Pink;
        }
      }
    }
  }
  &.active {
    .d-flex {
      svg {
        path {
          fill: $Pink;
        }
      }
    }
  }
}
.header-logo {
  button {
    display: none;
  }
}

.main-header-profile {
  display: flex;
  background: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .header-logo {
    display: flex;
    align-items: center;
    height: 100%;
    background: $White;
    width: 258px;
    padding: 0 20px;
    box-sizing: border-box;
    border-right: 1px solid $Black;
  }

  .profile {
    display: flex;
    align-items: center;
    padding-right: 25px;
    height: 100%;
    width: calc(100% - 258px);
    justify-content: flex-end;
    box-sizing: border-box;
    background: $White;

    span {
      display: block;
      text-align: end;
      font-weight: 200;
      font-size: 14px;
      color: $Black;
      margin-right: 10px;
      line-height: 1.2;
    }

    .name {
      color: $Pink;
      font-size: 17px;
      white-space: nowrap;
      font-weight: 400;
    }

    img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      border-radius: 100%;
    }
  }
}

.mat-toolbar.mat-primary {
  border-bottom: 1px solid $Black;
  background: $White;
}

.pname {
  font-weight: normal;
  font-size: 18px;
  margin-right: 50px;
}

.mat-list-item-content {
  padding: 0;
}

.sidenav {
  width: 258px;
  background: $White;
  border-right: 1px solid $Black;
  z-index: 0 !important;
}

.list-div {
  display: none;
  padding: 0 0 0 43px;

  a {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: $Black;
    letter-spacing: 0.1px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    margin-bottom: 13px;
    font-family: 'mulish-regular';

    &:hover {
      color: $Pink;
    }
  }
}

.dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    margin-right: 10px;
    color: $Black;
    transform: rotate(-90deg);
  }

  .roted {
    transform: rotate(0deg);
  }
}

mat-sidenav-content {
  background: $White;
  scrollbar-width: thin;
  // scrollbar-color: #343560 #090f2f;
}

.expand-options {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  cursor: pointer;
  padding: 11px 0;

  .d-flex {
    display: flex;
    align-items: center;
    width: 90%;

    svg {
      height: auto;
      width: 17px;
      margin: 0 19px 0 24px;
    }

    p,
    a {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      color: $Black;
      letter-spacing: 0.1px;
      text-decoration: none;
      display: inline-block;
      font-family: 'mulish-regular';
    }

    .fillsvg {
      display: none;
    }
  }

  &:hover {
    .d-flex {
      svg {
        fill: $Pink !important;
      }

      p,
      a {
        color: $Pink;
      }

      .fillsvg {
        display: block;

        svg {
          fill: none !important;
        }
      }

      .unfill {
        display: none;
      }
    }

    span {
      color: $Pink;
    }
  }
}

.active {
  display: block;
  color: $Pink !important;

  .d-flex {
    svg {
      fill: $Pink !important;
    }

    p,
    a {
      color: $Pink;
    }

    .fillsvg {
      display: block;

      svg {
        fill: none !important;
      }
    }

    .unfill {
      display: none;

      svg {
        fill: none !important;
      }
    }
  }

  span {
    color: $Pink;
  }
}

.mainActive {
  position: relative;
  background: $White;

  &::before {
    width: 3px;
    position: absolute;
    top: 0;
    left: -5px;
    content: "";
    border-radius: 0 50px 50px 0;
    border-left: 10px solid $Pink;
    height: 100%;
    margin: auto;
  }
}

@media only screen and (max-width: 1024px) {
  .sidenav {
    width: 180px;
  }
}

@media only screen and (max-width: 767px) {
  .main-header-profile {
    .header-logo {
      background: $White;
      border: none;
      padding: 0 10px;

      button {
        display: block;
      }
    }
  }

  .pname {
    margin-right: 20px;
  }

  mat-toolbar-row {
    width: 180px;
  }

  mat-sidenav-content {
    margin-left: 0 !important;
    z-index: -1;
  }

  .sidenav {
    background: $White;
  }

  .mat-toolbar-row {
    justify-content: space-between;
  }

  .sidenav {
    width: 260px;

    .mat-nav-list {
      a {
        font-size: 14px;
        height: auto;
        padding: 5px 0;

        mat-icon {
          margin-right: 0;
          font-size: 15px;
          color: $Black;
        }
      }
    }
  }

  .dropdown {
    span {
      font-size: 15px;
    }
  }
}
