.button {
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 10px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	padding: 10px 15px;
	transition: all 0.25s;
	font-size: 0.7rem !important;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--white) !important;
}

.button > * {
	color: var(--white) !important;
}

.button.disabled,
.button:disabled,
.button[disabled],
.button.disabled path,
.button:disabled path,
.button[disabled] path {
  fill: var(--gray) !important;
  color: var(--gray) !important;
  background-color: var(--graylight) !important;
  cursor: default !important;
  pointer-events: none !important;
  border: 1px solid var(--graylight);
}

.button.fulfill {
  width: 100%;
}

.button.no-action {
  cursor: default !important;
  pointer-events: none;
}

.button:hover {
  transition: all 0.25s;
  background-color: var(--primary-color-light);
  border: 1px solid var(--primary-color-light);
}

.button:has(img) {
  justify-content: left;
  gap: 10px;
}

.button img {
  height: 24px !important;
}

.button.gray {
	color: var(--black) !important;
	background-color: var(--graylight);
	border: 1px solid var(--graylight);
}
  
.button.gray * {
	color: var(--black) !important;
}
  
.button.gray:hover {
	background-color: var(--gray);
	border: 1px solid var(--gray);
}

.button.logout:hover {
	background-color: var(--red);
	border: 1px solid var(--red);
}
  
.button.green {
	background-color: var(--green);
	border: 1px solid var(--green);
}

.button.green:hover {
	background-color: var(--greenlight);
	border: 1px solid var(--greenlight);
}

.button.white {
	border: 1px solid var(--graylight);
	background-color: var(--white);
	color: var(--graydark2) !important;
}

.button.white * {
	color: var(--graydark2) !important;
}

.button.white:hover {
	background-color: var(--graylight3) !important;
}

.button.black {
	background-color: var(--black);
	border: 1px solid var(--black);
}

.button.black:hover {
	background-color: var(--blacklight);
	border: 1px solid var(--blacklight);
}

.button.blue {
	background-color: var(--blue);
	border: 1px solid var(--blue);
}

.button.blue:hover {
	background-color: var(--bluelight);
	border: 1px solid var(--bluelight);
}

.button.purple {
	background-color: var(--purple);
	border: 1px solid var(--purple);
}

.button.purple:hover {
	background-color: var(--purplelight);
	border: 1px solid var(--purplelight);
}

.button.red {
	background-color: var(--redlight);
	border: 1px solid var(--redlight);
}

.button.red:hover {
	background-color: var(--redlight2);
	border: 1px solid var(--redlight2);
}

.button.orange {
	background-color: var(--orange);
	border: 1px solid var(--orange);
}

.button.orange:hover {
	background-color: var(--orangelight);
	border: 1px solid var(--orangelight);
}

.button.beige {
	background-color: var(--beige);
	border: 1px solid var(--beige);
}

.button.beige:hover {
	background-color: var(--beigelight);
	border: 1px solid var(--beigelight);
}

.button-tabs {
	display: flex;
}

.button-tabs > .item {
	padding: 5px 20px;
	background-color: var(--graylight);
	font-size: 0.7rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.5s;
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 34px;
	color: var(--graydark);
	min-width: max-content;
}
  
.button-tabs > .item:has(.counter) {
	padding-left: 5px;
}
  
.button-tabs > .item .counter {
	background-color: var(--white);
	padding: 3px 5px;
	border-radius: 5px;
	min-width: 24px;
	min-height: 20px;
	font-weight: bold;
	text-align: center;
	color: var(--gray);
	transition: all 0.5s;
}

.button-tabs > .item.active {
	color: var(--white);
	transition: all 0.5s;
}

.button-tabs > .item.active .counter {
	transition: all 0.5s;
}

.button-tabs > .item.active:hover {
	transition: all 0.5s;
}

.button-tabs > .item:first-child {
	border-radius: 10px 0px 0px 10px;
}

.button-tabs > .item:last-child {
	border-radius: 0px 10px 10px 0px;
}

.button-tabs > .item.red.active {
	background-color: var(--redlight);
}

.button-tabs > .item.red.active .counter {
	color: var(--redlight);
}

.button-tabs > .item.red.active:hover {
	background-color: color-mix(in srgb, var(--redlight), var(--white) 30%);
}

.button-tabs > .item.beige.active {
	background-color: var(--beige);
}

.button-tabs > .item.beige.active .counter {
	color: var(--beige);
}

.button-tabs > .item.beige.active:hover {
	background-color: color-mix(in srgb, var(--beige), var(--white) 30%);
}

.button-tabs > .item.orange.active {
	background-color: var(--orangelight);
  }
  
  .button-tabs > .item.orange.active .counter {
	color: var(--orangelight);
  }
  
  .button-tabs > .item.orange.active:hover {
	background-color: color-mix(in srgb, var(--orangelight), var(--white) 30%);
  }
  
  .button-tabs > .item.green.active {
	background-color: var(--greenlight);
  }
  
  .button-tabs > .item.green.active .counter {
	color: var(--greenlight);
  }
  
  .button-tabs > .item.green.active:hover {
	background-color: color-mix(in srgb, var(--greenlight), var(--white) 30%);
  }
  
  .button-tabs > .item.blue.active {
	background-color: var(--blue);
  }
  
  .button-tabs > .item.blue.active .counter {
	color: var(--blue);
  }
  
  .button-tabs > .item.blue.active:hover {
	background-color: color-mix(in srgb, var(--blue), var(--white) 30%);
  }

  .button-tabs > .item.purple.active {
	background-color: var(--purple);
  }
  
  .button-tabs > .item.purple.active .counter {
	color: var(--purple);
  }
  
  .button-tabs > .item.purple.active:hover {
	background-color: color-mix(in srgb, var(--purple), var(--white) 30%);
  }
  
  .button-tabs > .item.gray.active {
	background-color: var(--graydark2);
  }
  
  .button-tabs > .item.gray.active .counter {
	color: var(--graydark2);
  }
  
  .button-tabs > .item.gray.active:hover {
	background-color: color-mix(in srgb, var(--graydark2), var(--white) 30%);
  }