.sidebar {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	/*height: 375px; 20211225 */
	/*min-height: 400px; 20211225 */
	width: 60px;
	/*background-color: rgb(187 187 187 / 60%); 20211225 */
	background-color: rgb(187 187 187 / 80%);/* 20211225 */
	border-radius: 10px;
	z-index: 1001;
	box-shadow: 0 5px 30px rgb(17 17 17 / 50%);
	right: 5px;
	bottom: 5%;
	/* padding-bottom: 35px; 20211227 */
	padding-bottom: 43px;/* 20211227 */
}

/* sidebar open */
.sidebar.open {
  /*width: 250px; 20211225 */
  background-color: unset;/* 20211225 */
  box-shadow: unset;/* 20211225 */
}
.sidebar.open .menu-text {
  display: block;
}
.sidebar.open .menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 90%;
}

.sidebar.open .menu-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: 1.1875em;
  font-weight:900;
}

.sidebar.open .menu-item a p {
  margin-top:0px;
  margin-bottom:0;
}

.sidebar.open .menu-item i {
  margin: 15px;
}

.sidebar.open .expand-button i {
  transform: rotate(-180deg);
  position: absolute;
  right: 10px;
  top: -65%;
}

/* 20211225 */
.sidebar.open .side-menu {
	display:none;
}

/* profile  */
/* expand icon */
.profile {
  display: grid;
  place-items: center;
  height: 60px;
  width: 100%;
  background-color: #222;
  font-size: 1.25em;
  color: #fff;
  margin-bottom: 5px;
}

.profile img {
  display: grid;
  place-items: center;
  height: 40px;
  width: 40px;
  background-color: #364f6b;
  border-radius: 50%;
  cursor: pointer;
}
.menu-text {
  display: none;
}
/* side menu */
.side-menu {
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.menu-item {
  position: relative;
  margin: 5px 0;
  height: 40px;
  /* width: 40px; 20211227 */
  width: 40px!important;/* 20211227 */
  display: grid;
  place-items: center;
  border-radius: 5px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.menu-item a {
  color: #FFF;
  padding:0px!important;/* 20211227 */
}

.menu-item.active {
  background-color: #333333;
}

.menu-item:hover {
  transform: scale(1);
}

.side-menu i.menu-icon {
  font-size: 0.9375em;
  cursor: pointer;
}

/* expand icon */
.expand-button {
  position: absolute;
  bottom: 0;
  display: grid;
  place-items: center;
  height: 30px;
  width: 100%;
  font-size: 1.25em;
  color: #fff;
 /* background-color: #222; 20211225 */
}

.expand-button i {
  position: absolute;
  /*top: -70%; 20211225 */
  top:-15px;/* 20211225 */
  display: grid;
  place-items: center;
  height: 40px;
  width: 40px;
  background-color: #364f6b;
  border: 5px rgb(158 158 158 / 70%) solid;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* code with love */
.code-with-love {
  position: absolute;
  right: 30px;
  bottom: 50px;
  border-radius: 5px;
  background-color: #111;
  padding: 10px;
  color: #fff;
  z-index: 99999999;
}

.code-with-love i.fa-heart,
.code-with-love span {
  color: #ff2828;
}