/*! ========= INFORMATION ============================
	- document:  Sticky buttons
	- author:    Dmytro Lobov
	- url:       https://lobov.dev
	- email:     i@lobov.dev
======================================================
*/
/*--------------------------------------------------------------
		Reset
--------------------------------------------------------------*/
.side-menu, .side-menu * {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  text-decoration: none;
  background: none;
  line-height: 1;
}

/*--------------------------------------------------------------
		Main Style
--------------------------------------------------------------*/
.side-menu {
  position: fixed;
  z-index: 999;
}
.side-menu.-list-show .sm-list {
  position: relative;
  transition: 0.4s all linear;
}
.side-menu.-list-show .sm-list .sm-item {
  position: inherit;
}
.side-menu .sm-item {
  position: relative;
  transition: 0.4s all linear;
}
.side-menu .sm-item a {
  display: flex;
}
.side-menu .sm-icon {
  text-align: center;
}
.side-menu.-space .sm-item {
  margin: 2px 0;
}
.side-menu.-shadow .sm-item {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.side-menu.-shadow.-list-show .sm-list {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.side-menu.-shadow.-list-show .sm-list .sm-item {
  box-shadow: none;
}

/*--------------------------------------------------------------
		Size
--------------------------------------------------------------*/
.side-menu.-small .sm-icon,
.side-menu.-small .sm-label {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.side-menu.-small .sm-icon {
  width: 30px;
}
.side-menu.-small .sm-icon img {
  margin: 5px 0;
  height: 20px;
}
.side-menu.-medium .sm-icon,
.side-menu.-medium .sm-label {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}
.side-menu.-medium .sm-icon {
  width: 40px;
}
.side-menu.-medium .sm-icon img {
  margin: 7.5px 0;
  height: 25px;
}
.side-menu.-large .sm-icon,
.side-menu.-large .sm-label {
  height: 50px;
  line-height: 50px;
  font-size: 24px;
}
.side-menu.-large .sm-icon {
  width: 50px;
}
.side-menu.-large .sm-icon img {
  margin: 10px 0;
  height: 30px;
}

/*--------------------------------------------------------------
		Position
--------------------------------------------------------------*/
.side-menu.--center {
  top: 50%;
  transform: translateY(-50%);
}
.side-menu.--top {
  top: 0;
}
.side-menu.--bottom {
  bottom: 0;
}
.side-menu.-right {
  right: 0;
}
.side-menu.-right.-list-show .sm-list .sm-item {
  right: auto;
}
.side-menu.-right .sm-label {
  padding-right: 10px;
}
.side-menu.-right.-small.-list-show .sm-list {
  right: calc(-100% + 30px);
}
.side-menu.-right.-small .sm-item {
  right: calc(-100% + 30px);
}
.side-menu.-right.-medium.-list-show .sm-list {
  right: calc(-100% + 40px);
}
.side-menu.-right.-medium .sm-item {
  right: calc(-100% + 40px);
}
.side-menu.-right.-large.-list-show .sm-list {
  right: calc(-100% + 50px);
}
.side-menu.-right.-large .sm-item {
  right: calc(-100% + 50px);
}
.side-menu.-right.-list-show .sm-list.-visible,
.side-menu.-right .sm-item.-visible {
  right: auto;
}
.side-menu.-right.-list-show .sm-list:hover,
.side-menu.-right .sm-item:hover {
  right: 0;
}
.side-menu.-left {
  left: 0;
}
.side-menu.-left.-list-show .sm-list .sm-item {
  left: auto;
}
.side-menu.-left .sm-label {
  padding-left: 10px;
}
.side-menu.-left .sm-list a {
  justify-content: flex-end;
}
.side-menu.-left .sm-label {
  order: -1;
}
.side-menu.-left.-small.-list-show .sm-list {
  left: calc(-100% + 30px);
}
.side-menu.-left.-small .sm-item {
  left: calc(-100% + 30px);
}
.side-menu.-left.-medium.-list-show .sm-list {
  left: calc(-100% + 40px);
}
.side-menu.-left.-medium .sm-item {
  left: calc(-100% + 40px);
}
.side-menu.-left.-large.-list-show .sm-list {
  left: calc(-100% + 50px);
}
.side-menu.-left.-large .sm-item {
  left: calc(-100% + 50px);
}
.side-menu.-left.-list-show .sm-list.-visible,
.side-menu.-left .sm-item.-visible {
  left: auto;
}
.side-menu.-left.-list-show .sm-list:hover,
.side-menu.-left .sm-item:hover {
  left: 0;
}

/*--------------------------------------------------------------
		Colors
--------------------------------------------------------------*/
.side-menu [class^=white] {
  color: #ffffff;
}
.side-menu [class^=white]:hover {
  background-color: #ffffff;
}
.side-menu [class$=white] {
  background-color: #ffffff;
}
.side-menu [class$=white]:hover {
  color: #ffffff;
}
.side-menu [class^=black] {
  color: #000000;
}
.side-menu [class^=black]:hover {
  background-color: #000000;
}
.side-menu [class$=black] {
  background-color: #000000;
}
.side-menu [class$=black]:hover {
  color: #000000;
}
.side-menu [class^=grey] {
  color: #808080;
}
.side-menu [class^=grey]:hover {
  background-color: #808080;
}
.side-menu [class$=grey] {
  background-color: #808080;
}
.side-menu [class$=grey]:hover {
  color: #808080;
}
.side-menu [class^=red] {
  color: #e3001b;
}
.side-menu [class^=red]:hover {
  background-color: #e3001b;
}
.side-menu [class$=red] {
  background-color: #e3001b;
}
.side-menu [class$=red]:hover {
  color: #e3001b;
}
.side-menu [class^=orange] {
  color: #f60;
}
.side-menu [class^=orange]:hover {
  background-color: #f60;
}
.side-menu [class$=orange] {
  background-color: #f60;
}
.side-menu [class$=orange]:hover {
  color: #f60;
}
.side-menu [class^=yellow] {
  color: #ffcc01;
}
.side-menu [class^=yellow]:hover {
  background-color: #ffcc01;
}
.side-menu [class$=yellow] {
  background-color: #ffcc01;
}
.side-menu [class$=yellow]:hover {
  color: #ffcc01;
}
.side-menu [class^=lime] {
  color: #b1c903;
}
.side-menu [class^=lime]:hover {
  background-color: #b1c903;
}
.side-menu [class$=lime] {
  background-color: #b1c903;
}
.side-menu [class$=lime]:hover {
  color: #b1c903;
}
.side-menu [class^=green] {
  color: #27a22d;
}
.side-menu [class^=green]:hover {
  background-color: #27a22d;
}
.side-menu [class$=green] {
  background-color: #27a22d;
}
.side-menu [class$=green]:hover {
  color: #27a22d;
}
.side-menu [class^=cyan] {
  color: #00b1e5;
}
.side-menu [class^=cyan]:hover {
  background-color: #00b1e5;
}
.side-menu [class$=cyan] {
  background-color: #00b1e5;
}
.side-menu [class$=cyan]:hover {
  color: #00b1e5;
}
.side-menu [class^=blue] {
  color: #006bb3;
}
.side-menu [class^=blue]:hover {
  background-color: #006bb3;
}
.side-menu [class$=blue] {
  background-color: #006bb3;
}
.side-menu [class$=blue]:hover {
  color: #006bb3;
}
.side-menu [class^=purple] {
  color: #ad007c;
}
.side-menu [class^=purple]:hover {
  background-color: #ad007c;
}
.side-menu [class$=purple] {
  background-color: #ad007c;
}
.side-menu [class$=purple]:hover {
  color: #ad007c;
}
.side-menu [class^=pink] {
  color: #ea4c89;
}
.side-menu [class^=pink]:hover {
  background-color: #ea4c89;
}
.side-menu [class$=pink] {
  background-color: #ea4c89;
}
.side-menu [class$=pink]:hover {
  color: #ea4c89;
}

@media print
{
  .side-menu, .side-menu *
  {
    display: none !important;
  }
}