.button{
    font-size: 0.75rem;
	display: flex;
	width: max-content;
	border-radius: var(--radius-button) !important;
	padding: 0 16px 0 16px;
	text-align: center;
	box-shadow: none !important;
	border: none !important;
	text-shadow: none !important;
	line-height: var(--height-components);
	height: var(--height-components);
	transition: all .3s ease-in-out;
	cursor: pointer;
}

.button:hover {
    opacity: 0.8;
}

.button.button-ai{
	background-image: linear-gradient(90deg, #9C27B0 0, rgb(73 223 221) 80%);
	color: white;
}

.button.button-red{
	background: var(--danger-color);
	color: white;
}

.button.button-red.button-simple{
	background: transparent;
	color: var(--danger-color);
	border: solid 1px var(--danger-color) !important;
}

.button.legend-red{
	background: rgb(241, 221, 221);
	color: rgb(185, 76, 74);
}

.button.button-orange{
	background: var(--alert-color);
	color: white;
}

.button.button-orange.button-simple{
	background: transparent;
	color: var(--alert-color);
	border: solid 1px var(--alert-color) !important;
}

.button.button-green{
	background: var(--success-color);
	color: white;
}

.button.button-green.button-simple{
	background: transparent;
	color: var(--success-color);
	border: solid 1px var(--success-color) !important;
}

.button.legend-green{
	background: #53b47c1c;
    color: #53b47c;
}

.button.button-black{
	background: #000;
	color: white;
}

.button.button-black.button-simple{
	background: transparent;
	color: #2c2c2c;
	border: solid 1px #000 !important;
}

.button.button-blue{
	background: var(--info-color);
	color: white;
}

.button.button-blue.button-light{
	background: var(--info-color-30);
	color: var(--info-color);
}

.button.button-blue.button-simple{
	background: transparent;
	color: var(--info-color);
	border: solid 1px var(--info-color) !important;
}

.button.legend-blue{
	background: #e3eefc;
    color: #3e83fa;
}

.button.button-purple{
	background: #847EEE;
	color: white;
}

.button.button-purple.button-simple{
	background: transparent;
	color: #847EEE;
	border: solid 1px #847EEE !important;
}

.button.button-pink{
	background: #F3549C;
	color: white;
}

.button.button-pink.button-simple{
	background: transparent;
	color: #F3549C;
	border: solid 1px #F3549C !important;
}

.button.button-gray{
	background: #DDD;
	color: #000000;
}

.button.button-gray.button-simple{
	background: transparent;
	color: #535353;
	border: solid 1px darkgray !important;
}

.button.button-gray:hover{
	background: var(--bg-color);
}

.button.button-white{
	background: white;
	color: #000000;
}

.button .fa-solid{
	margin-right: 0 !important;
}

.micro-button{
	width: 100%;
	display: block;
	text-align: center;
	border-radius: var(--radius-components-intern);
	height: 32px;
	line-height: 32px;
}

.micro-button.green{
	background: var(--success-color) !important;
	color: white !important;	
}

.button.button-no-text{
	width: var(--height-components);
	height: var(--height-components);
}

.button.button-no-text .ui-icon{
	display: block !important;
    top: 7px !important;	
}
    
.button.button-no-text .ui-button-text{
	display: none;
}

.button.button-adaptive{
	padding: inherit;
    width: -webkit-fill-available;
}

.button span{
	padding: 4px;
}

.button i{
	font-size: 0.8rem;
    line-height: 34px !important;
    height: auto;
    width: auto;
    margin-right: 8px;
}

.ui-button-text-only .ui-button-text, 
.ui-button-text-icon-left .ui-button-text{
	width: 100%;
	display: ruby !important;
	line-height: var(--height-components);
	padding: 0 .5rem;
	white-space: nowrap;
	text-align: center;
	text-shadow: none;
	font-weight: 500;
}

.ui-button .ui-button-icon-left.ui-icon{
	font-size: 14px;
    padding: 0;
    line-height: var(--height-components);
    width: auto;
    height: auto;
    display: contents;
}

.ui-selectonebutton .ui-button-text {
  line-height: 18px;
}