/* material design override */
.md-button {
	min-width: 18px !important;
	min-height: 18px !important;
	text-transform: capitalize !important;
}

.md-button.bn-hovergrey:hover,
.md-button.bn-hovergrey.md-focused {
	background-color: #828282 !important;
}

.md-button.bn-hoverdarkgrey:hover,
.md-button.bn-hoverdarkgrey.md-focused {
	background-color: #4a4a4a !important;
}
.md-button.md-small {
	min-width: 32px;
	line-height: 24px;
	min-height: 24px;
	vertical-align: top;
	font-size: 12px;
	padding: 0 4px 0 4px;
	margin: 10px 3px 0 3px;
}

.md-button.md-smaller {
	min-width: 32px;
	line-height: 24px;
	min-height: 24px;
	vertical-align: top;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}
.bn-att-add-btn {
	position: relative;
	right: -12px;
	margin: 0;
}
@media (max-width: 335px) {
	.bn-att-add-btn {
		right: 4px;
	}
}

@media (max-width: 375px) {
	.bn-tight-btn {
		width: 24px !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.md-button.md-fab.outlined {
	background-color: transparent;
	border: 1px solid var(--primary-color);
}
.md-button.md-fab.md-mini.outlined {
	background-color: transparent;
	border: 1px solid var(--primary-color);
}
.md-button.md-fab.md-mini.outlined-333 {
	background-color: transparent;
	border: 1px solid #333333;
}
.md-button.md-default-theme.md-fab.outlined md-icon,
.md-button.md-fab.outlined md-icon {
	color: var(--primary-color);
}
.bn-primary-button {
	text-transform: none;
	background: linear-gradient(90deg, #34c5c9, #11a3f2);
	color: white !important;
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 7.36px;
	padding-top: 1px;
	padding-bottom: 1px;
}
.bn-primary-button:hover {
	background: linear-gradient(90deg, #34c5c9 0%, #11a3f2 179.73%), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
	color: white !important;
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 7.36px;
	padding-top: 1px;
	padding-bottom: 1px;
}
@media (max-width: 576px) {
	.bn-primary-button {
		padding-left: 12px;
		padding-right: 12px;
	}
}
.bn-primary-button:disabled {
	background: linear-gradient(90deg, rgba(52, 197, 201, 0.65), rgba(17, 163, 242, 0.65)) !important;
	color: white !important;
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 7.36px;
	padding-top: 1px;
	padding-bottom: 1px;
}
/* new secondary button class */
.bn-secondary-button {
	border: 1.4px solid var(--primary-color);
	background: white !important;
	background-color: white !important;
	color: var(--primary-color);
	border-radius: 7.36px;
	padding-left: 24px;
	padding-right: 24px;
}
@media (max-width: 576px) {
	.bn-secondary-button {
		padding-left: 12px;
		padding-right: 12px;
	}
}
.bn-secondary-button:hover {
	border: 1.4px solid var(--primary-color);
	background: #34c5c914 !important;
	background-color: #34c5c914 !important;
	color: var(--primary-color);
	border-radius: 7.36px;
	padding-left: 24px;
	padding-right: 24px;
}
.bn-secondary-button:disabled {
	border: 1.4px solid rgba(52, 197, 201, 0.65);
	background: white !important;
	background-color: white !important;
	color: rgba(52, 197, 201, 0.65);
	border-radius: 7.36px;
	padding-left: 24px;
	padding-right: 24px;
}

.bn-orange-button {
	background: #f9af33 !important;
	background-color: #f9af33 !important;
	color: white !important;
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 7.36px;
	padding-top: 1px;
	padding-bottom: 1px;
	z-index: 10;
	visibility: visible !important;
}
@media (max-width: 576px) {
	.bn-orange-button {
		padding-left: 12px;
		padding-right: 12px;
	}
}
/* Button when focused or active (to ensure it stays orange when interacted with) */

.bn-orange-button:hover {
	background-color: #f6a53e !important;
	color: white !important; /* Ensure text stays white */
}

.bn-orange-button:disabled {
	background: rgba(249, 175, 51, 0.65) !important;
	background-color: rgba(249, 175, 51, 0.65) !important;
	color: white !important; /* Ensure text stays white */
}
/* Disabled state styling */
.bn-disabled-button {
	background: rgba(249, 175, 51, 0.65) !important;
	background-color: rgba(249, 175, 51, 0.65) !important;
	color: white !important; /* Ensure the text remains white */
	cursor: not-allowed; /* Show the 'not allowed' cursor when the button is disabled */
	opacity: 0.6;
}

/* Ensure the button remains visible even in a modal or popup */
.bn-orange-button,
.bn-disabled-button {
	visibility: visible !important;
}

.bn-button-text {
	font-size: 18.4px;
	font-weight: 500;
	line-height: 22.08px;
}
.md-button.md-icon-button {
	padding: 0;
}
.md-button.md-fab.md-mini {
	padding: 0;
	line-height: 30px;
	width: 30px;
	height: 30px;
}
.md-button.md-fab.md-mini.tiny {
	line-height: 24px;
	width: 24px;
	height: 24px;
}
.md-button.md-fab.md-mini.small {
	line-height: 20px;
	width: 20px;
	height: 20px;
}
.md-button.md-fab.md-mini.xsmall {
	line-height: 18px;
	width: 18px;
	height: 18px;
}
.bn-outlined-button {
	border: solid 1px var(--primary-color);
	border-radius: 7.36px;
}
.bn-button-primary-gradient {
	background: linear-gradient(90deg, #34c5c9, #11a3f2);
	color: white;
}
.bn-button-primary-gradient:hover {
	background: linear-gradient(90deg, #34c5c9 0%, #11a3f2 179.73%), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
	color: white !important;
}
.bn-button-primary-gradient:disabled {
	background: linear-gradient(90deg, rgba(52, 197, 201, 0.65), rgba(17, 163, 242, 0.65)) !important;
	background-color: linear-gradient(90deg, rgba(77, 129, 131, 0.65), rgba(17, 163, 242, 0.65)) !important;
	color: white !important;
}
.bn-button-primary-white {
	border: 1.4px solid #c9c9c9;
	background: white;
	color: #8b898e;
	border-radius: 7.36px;
}
.bn-button-primary-white:disabled {
	border: 1.4px solid #c9c9c9;
	background: white;
	color: #8b898e;
	border-radius: 11.18px;
}
.bn-button-primary {
	border: 1.4px solid var(--primary-color);
	background: white;
	color: var(--primary-color);
	border-radius: 6px;
}
.bn-button-orange {
	border: 1.4px solid #f9af33;
	background: #f9af33 !important;
	color: white;
	border-radius: 6px;
}
.bn-button-primary-no-border {
	background: #34c5c90f;
	color: var(--primary-color);
}
.bn-button-primary-no-border:disabled {
	background-color: #34c5c90f !important;
	background: #34c5c90f !important;
	color: var(--primary-color) !important;
}
.bn-button-primary:disabled {
	border: 1.4px solid var(--primary-color);
	background: white;
	color: var(--primary-color);
	border-radius: 11.18px;
}
.bn-button-accent {
	background: #f9af33;
	background-color: #f9af33;
	color: white;
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 7.36px;
	padding-top: 1px;
	padding-bottom: 1px;
}
.bn-button-accent:hover {
	background-color: #f6a53e !important;
	color: white;
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 7.36px;
	padding-top: 1px;
	padding-bottom: 1px;
}
.bn-button-accent:disabled {
	background: rgba(249, 175, 51, 0.65) !important;
	background-color: rgba(249, 175, 51, 0.65) !important;
	color: white;
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 7.36px;
	padding-top: 1px;
	padding-bottom: 1px;
}
.bn-small-button md-icon {
	font-size: 18px;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
}
.md-button.bn-margin-l0 {
	margin-left: 0;
}
.md-button.bn-padding-l0 {
	padding-left: 0;
}
.bn-button-green {
	background-color: #28c76f !important;
	color: white;
	border-radius: 6px;
}
.bn-button-green:hover {
	background-color: #28c76f !important;
	color: white;
	border-radius: 6px;
}
.bn-button-green:disabled {
	background-color: #28c76f !important;
	color: white;
	border-radius: 6px;
}

.md-button.md-default-theme.md-accent[disabled] md-icon,
.md-button.md-accent[disabled] md-icon,
.md-button.md-default-theme.md-fab[disabled] md-icon,
.md-button.md-fab[disabled] md-icon,
.md-button.md-default-theme.md-raised[disabled] md-icon,
.md-button.md-raised[disabled] md-icon,
.md-button.md-default-theme.md-warn[disabled] md-icon,
.md-button.md-warn[disabled] md-icon,
.md-button.md-default-theme[disabled] md-icon {
	color: white;
}

.bn-button-blue {
	background: #41b5f5 !important; /* The desired blue color */
	color: white !important; /* Ensure text color is white */
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 1px;
	padding-bottom: 1px;
	border-radius: 7.36px; /* Rounded corners */
	z-index: 10;
	visibility: visible !important;
	border: none; /* Remove any default border */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add slight shadow for a raised effect */
	font-size: 18.4px;
	transition: background 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
	display: inline-block; /* Ensure the button behaves properly */
}

/* Hover, focus, and active states to slightly darken the button on interaction */
.bn-button-blue:hover {
	background: linear-gradient(0deg, #11a3f2, #11a3f2), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) !important;
	background-color: #1093da !important;
	color: white !important; /* Ensure text color stays white */
}

/* Disabled state styling */
.bn-button-blue:disabled {
	background: rgba(17, 163, 242, 0.65) !important;
	color: white !important; /* Ensure the text remains visible */
	cursor: not-allowed; /* Not allowed cursor */
	opacity: 0.6;
}

/* Ensure button visibility in modals/popups */
.bn-button-blue,
.bn-button-blue:disabled {
	visibility: visible !important;
}
md-icon.md-default-theme.md-primary,
md-icon.md-primary {
	color: var(--primary-color) !important;
}
.bn-button-primary-black-text {
	/* border: 1.4px solid #c9c9c9; */
	margin: 3px;
	background: white;
	color: black;
	border-radius: 6px;
}