body,
	button,
	html,
	input,
	select,
	textarea {
		font-family: 'Lexend Deca', sans-serif !important;
	}

	html,
	body {
		overscroll-behavior-y: contain;
	}

	* {
		user-select: none;
	}

	img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	@font-face {
		font-family: 'Lexend Deca';
		font-style: normal;
		font-weight: 400;
		src: local('Lexend Deca'), url('../fonts/LexendDecaRegular.woff') format('woff');
	}

	@keyframes pulse-blue {
		0% {
			box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
		}

		50% {
			box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
		}
	}

	.antenna:before {
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
		animation: pulse-blue 5s infinite;
		border-radius: 8px;
		pointer-events: none;
	}

	.accesspoint:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 8px;
		pointer-events: none;
	}

	.link {
		text-decoration: underline;
		color: blue;
		cursor: pointer;
	}

	.link:hover {
		text-decoration: none;
		color: #5c5cfd;
	}

	.port {
		position: relative;
		width: 36px;
		height: 26px;
		background: black;
		margin: 8px;
	}

	.port:after {
		content: "";
		position: absolute;
		bottom: -4px;
		height: 4px;
		left: 6px;
		width: 24px;
		background: inherit;
	}

	.port.connected {
		background: orange;
		cursor: auto;
	}

	.port .blinkGreen {
		position: absolute;
		top: 2px;
		right: 2px;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background: #DFD;
	}

	.port .blinkGreen.light {
		background: green;
	}

	.port .blinkRed {
		position: absolute;
		top: 12px;
		right: 2px;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background: #FDD;
	}

	.port .blinkRed.light {
		background: red;
	}

	.md-tooltip.multiline {
		height: auto !important;
	}


	.md-errors-spacer {
		display: none !important;
	}

	.md-button.myBtn {
		text-transform: none;
	}

	md-toast {
		position: fixed;
	}

	md-toast.md-center {
		left: 50%;
		transform: translate3d(-50%, 0, 0);
	}

	md-toast.md-task-toast-theme .md-toast-content {
		background-color: #283593;
		font-size: 120%;
		text-align: center;
		color: white;
	}

	md-toast.md-success-toast-theme .md-toast-content {
		background-color: rgb(20, 189, 49);
	}

	md-toast.md-error-toast-theme .md-toast-content {
		background-color: rgb(189, 20, 49);
	}

	.leader-line {
		z-index: 1;
	}

	.md-scroll-mask {
		z-index: 70000;
	}

	.md-dialog-container {
		z-index: 80000;
	}

	.md-open-menu-container {
		z-index: 100000;
	}

	md-backdrop.md-menu-backdrop {
		z-index: 99999;
	}

	.md-select-menu-container,
	.md-virtual-repeat-container.md-autocomplete-suggestions-container {
		z-index: 80000;
	}

	md-autocomplete input:not(.md-input) {
		background: transparent;
		padding-left: 2px;
		padding-right: 2px;
		background: rgba(255, 255, 255, 0.2);
		height: 34px;
		margin: 3px;
		border-radius: 8px;
		padding-left: 0.5em;
		padding-right: 0.5em;
		overflow: hidden;
	}

	md-autocomplete.md-default-theme,
	md-autocomplete {
		background: transparent;
	}

	md-autocomplete-wrap {
		box-shadow: none !important;
		;
	}

	md-content>div,
	.browserContent>div {
		box-sizing: border-box;
	}

	.browserContent button {
		padding: 0.5em;
		border-radius: 0.5em;
		background: transparent;
		border: 0.1em solid gray;
		background: rgba(0, 0, 0, 0.1);
		margin-bottom: 0.5em;
	}

	.browserContent button:hover {
		background: rgba(0, 0, 0, 0.2);
	}

	.browserContent input,
	.browserContent textarea {
		border-radius: 0.5em;
		padding: 0.5em;
		background: rgba(255, 255, 255, 0.6);
		border: 0.1em solid gray;
	}

	.CodeMirror {
		line-height: 1.25em;
	}

	.ace_attribute-name {
		color: rgb(0, 22, 142);
	}

	.ace_tag-name,
	.ace_attribute-value,
	.ace_attribute-name {
		font-weight: bold;
	}

	.headline {
		padding: 8px;
		width: 100%;
		touch-action: none;
		cursor: grab;
		user-select: none;
		padding-top: 24px;
		padding-bottom: 4px;
		margin-top: -16px;
	}

	.dot-spinner {
		--uib-size: 2.8rem;
		--uib-speed: .9s;
		--uib-color: #183153;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: var(--uib-size);
		width: var(--uib-size);
	}

	.dot-spinner__dot {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 100%;
		width: 100%;
	}

	.dot-spinner__dot::before {
		content: '';
		height: 20%;
		width: 20%;
		border-radius: 50%;
		background-color: var(--uib-color);
		transform: scale(0);
		opacity: 0.5;
		animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
		box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
	}

	.dot-spinner__dot:nth-child(2) {
		transform: rotate(45deg);
	}

	.dot-spinner__dot:nth-child(2)::before {
		animation-delay: calc(var(--uib-speed) * -0.875);
	}

	.dot-spinner__dot:nth-child(3) {
		transform: rotate(90deg);
	}

	.dot-spinner__dot:nth-child(3)::before {
		animation-delay: calc(var(--uib-speed) * -0.75);
	}

	.dot-spinner__dot:nth-child(4) {
		transform: rotate(135deg);
	}

	.dot-spinner__dot:nth-child(4)::before {
		animation-delay: calc(var(--uib-speed) * -0.625);
	}

	.dot-spinner__dot:nth-child(5) {
		transform: rotate(180deg);
	}

	.dot-spinner__dot:nth-child(5)::before {
		animation-delay: calc(var(--uib-speed) * -0.5);
	}

	.dot-spinner__dot:nth-child(6) {
		transform: rotate(225deg);
	}

	.dot-spinner__dot:nth-child(6)::before {
		animation-delay: calc(var(--uib-speed) * -0.375);
	}

	.dot-spinner__dot:nth-child(7) {
		transform: rotate(270deg);
	}

	.dot-spinner__dot:nth-child(7)::before {
		animation-delay: calc(var(--uib-speed) * -0.25);
	}

	.dot-spinner__dot:nth-child(8) {
		transform: rotate(315deg);
	}

	.dot-spinner__dot:nth-child(8)::before {
		animation-delay: calc(var(--uib-speed) * -0.125);
	}

	@keyframes pulse0112 {

		0%,
		100% {
			transform: scale(0);
			opacity: 0.5;
		}

		50% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.hoverbutton {
		background-color: black;
		transition: color 0.3s ease;
		width: 30px;
		height: 30px;
		padding: 0;
		border-radius: 50%;
		min-width: 0;
		min-height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hoverbutton:hover {
		color: #c4dfdf;
	}

	.hoverbutton .hovericon {
		color: white;
	}

	.hoverbutton:hover .hovericon {
		color: black;
	}

	.displayHome {
		display: grid;
		grid-template-columns: auto auto;
		padding: 10px;
		column-gap: 20px;
		row-gap: 20px;
		justify-content: space-evenly;

	}

	.fa-whatsapp {
		color: #fff;
		background:
			linear-gradient(#25d366, #25d366) 14% 84%/16% 16% no-repeat,
			radial-gradient(#25d366 57%, transparent 0);
	}

	.fa-chrome {
		background: radial-gradient(circle at center, #4285f4, transparent 70%),
			linear-gradient(45deg, #f4b400, #0f9d58, #db4437);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		display: inline-block;
	}

	.logout-button {
		color: red;
		background: none;
		border: none;
	}

	.logout-button::before {
		content: "\f08b";
		/* FontAwesome unicode for sign-out */
		font-family: "FontAwesome";
		font-size: 100%;
	}






.cssRuleWizard md-dialog {
    width: 600px;
    max-width: 95%;
}

.cssRuleWizard-toolbar {
    background: #1976d2;
    color: white;
}

/* CONTENT */
.cssRuleWizard-content {
    padding: 24px;
}

.cssRuleWizard-step {
    margin-bottom: 30px;
}

.cssRuleWizard-stepTitle {
    font-size: 18px;
    margin-bottom: 12px;
}

.cssRuleWizard-select {
    width: 100%;
}

/* VALUE BUTTONS */
.cssRuleWizard-valueBtn {
    margin: 4px 4px 4px 0;
}

/* CUSTOM INPUT FIELDS */
.cssRuleWizard-customInput {
    margin-top: 12px;
    margin-bottom: 12px;
}

.cssRuleWizard-colorPicker {
    width: 70px;
    height: 40px;
    padding: 0;
    border: none;
}

.cssRuleWizard-numberInput {
    width: 80px;
    margin-right: 10px;
}

.cssRuleWizard-unitSelect {
    min-width: 80px;
}

/* PREVIEW */
.cssRuleWizard-previewContainer {
    margin-top: 20px;
}

.cssRuleWizard-preview {
    background: #f4f4f4;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}


/* FOOTER BUTTONS */
.cssRuleWizard-footer {
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.cssRuleWizard-valueGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 grid */
    gap: 10px;
    margin-bottom: 20px;
}

.cssRuleWizard-valueCell {
    display: flex;
}

.cssRuleWizard-valueBtn {
    width: 100%;
    text-align: center;
}