body{
  background-color: yellow;
}
#rybena-sidebar {
  position: fixed;
  z-index: 21474836;
  top: 40%;
  left: 5px;
  display: flex
}

#rybena-sidebar .options {
  display: grid;
  grid-template-columns: 45px;
  grid-row-gap: 5px;
}

#rybena-sidebar .options button {
  outline: 0;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: #316181;
  width: fit-content;
  max-width: 45px;
  overflow: hidden;
  transition: max-width 0.8s ease 0s;
  white-space: nowrap
}

#rybena-sidebar .options button:focus {
  outline: 0;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: #316181;
  width: fit-content;
  max-width: 45px;
  overflow: hidden;
  transition: max-width 0.8s ease 0s;
  white-space: nowrap
}

#rybena-sidebar .options button img {
  box-sizing: border-box;
  display: block;
  width: 45px;
  height: 45px;
  padding: 5px;
  max-width: unset !important;
}

#rybena-sidebar .options button .ryb-line {
  position: absolute;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 13.69%, #ffffff 51.52%, rgba(255, 255, 255, 0) 82.91%);
  width: 1px;
  height: 45px;
  left: 6px;
  top: 0
}

#rybena-sidebar .options button .ryb-label {
  position: relative;
  margin-left: -5px;
  padding: 13px 25px 12px 20px;
  background: inherit;
  border-radius: 0px 5px 5px 0px;
  font-size: 16px;
  line-height: 20px;
  color: white
}

@media(max-width:768px) {
  #rybena-sidebar {
    position: fixed;
    z-index: 21474836;
    top: 40%;
    left: 5px
  }

  #rybena-sidebar .options button {
    height: 35px !important;
    width: 35px !important;
  }

  #rybena-sidebar .options button img {
    height: 35px !important;
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
}

#rybena-sidebar .options .btn-rybena-sign-language:hover {
  max-width: 130px !important
}

#rybena-sidebar .options .btn-rybena-voice:hover {
  max-width: 112px !important
}

#rybena-sidebar .options .btn-rybena-call:hover {
  max-width: 175px !important
}

#rybena-sidebar .options .btn-rybena-vision:hover {
  max-width: 200px !important
}

#rybena-sidebar .options .btn-rybena-sign-language:focus:is(:focus-visible) {
  max-width: 130px !important
}

#rybena-sidebar .options .btn-rybena-voice:focus:is(:focus-visible) {
  max-width: 112px !important
}

#rybena-sidebar .options .btn-rybena-call:focus:is(:focus-visible) {
  max-width: 175px !important
}

#rybena-sidebar .options .btn-rybena-vision:focus:is(:focus-visible) {
  outline: 0;
  box-shadow: none;
  max-width: 200px !important
}
.u-offcanvas .u-sidenav {
  flex-basis: 250px !important;
}

.u-offcanvas:not(.u-menu-open-right) .u-sidenav {
  margin-left: -250px;
}

.u-offcanvas.u-menu-open-right .u-sidenav {
  margin-right: -250px;
}

@keyframes menu-shift-left {
  from {
    left: 0;
  }

  to {
    left: 250px;
  }
}

@keyframes menu-unshift-left {
  from {
    left: 250px;
  }

  to {
    left: 0;
  }
}

@keyframes menu-shift-right {
  from {
    right: 0;
  }

  to {
    right: 250px;
  }
}

@keyframes menu-unshift-right {
  from {
    right: 250px;
  }

  to {
    right: 0;
  }
}