.user_panel {
  position: fixed;
  top: 194px;
  right: 0;
  transform: translateX(100%);
  z-index: 300;
  height: 50px;
  width: auto;
  transition: all 0.4s;
  border-radius: 30px 0 0 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.user_panel .panel_inner {
  height: 50px;
  position: relative;
}

.user_panel .icon-settings {
  position: absolute;
  top: 0;
  left: -50px;
  background: #ff002f;
  border: 1px solid white;
  border-right: transparent;
  height: 52px;
  width: 52px;
  display: inline-block;
  border-radius: 30px 0 0 30px;
  text-align: center;
  cursor: pointer;
  font-size: 25px;
  color: white;
  transition: all 0.3s;
}
.user_panel .icon-settings:hover {
  background: #46606c;
}

.user_panel .icon-settings:before {
  top: 12px;
  position: relative;
}
.user_panel.open {
  transform: translateY(0);
}
.user_panel .button {
  width: 100%;
  text-decoration: none;
  border: 1px solid white;
  border-bottom: none;
}
.user_panel .button:last-of-type {
  border-bottom: 1px solid white;
}