@import url('./xy-theme.css');

/* taken from sat-website theme/styles */
:root {
	--xxs: 8px;
	--color-black: #000;
	--color-white: #fff;
	--color-blue: #4a46ff;
	--color-grey: #434343;
	--color-border: #e0e0e0;
	--color-border-dark: #e8e8e8;
	--color-output: #040052;
	--color-handle-source: #c0c0c0;
	--color-handle-target: #5c5c5c;
  --color-transparent: transparent;
	--br-main: 15px;
	--br-small: 8px;
	--shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);
	--easing-main: cubic-bezier(0.23, 1, 0.32, 1);
	--fade-duration: 1.1s;
	--fade-initial-y: 30px;
	--scrollbar-track: #4a46ff;
	--scrollbar-thumb: #b5b5b5;
	--scrollbar-thumb-border: var(--color-border);
}

html {
	color: #404040;
	font-family: "DM Sans", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25em;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

body {
	margin: 0;
	overflow-x: hidden;
	max-width: 100%;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	scrollbar-width: thin;
}
body::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
body::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.06);
}
body::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border: 1px solid var(--scrollbar-thumb-border);
	border-radius: 5px;
}
body::-webkit-scrollbar-thumb:hover {
	background: var(--color-grey);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "DM Sans", sans-serif;
	clear: both;
}

/* Sidebar tabs area and tab buttons */
.top-section-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	border-radius: var(--br-main);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.top-section-sidebar .menu-bar {
	display: flex;
	flex-direction: row;
	gap: 0;
	margin: 0;
	background: var(--color-transparent);
	border-bottom: 2px solid var(--color-border);
	min-height: 30px;
	align-items: flex-end;
}

.top-section-sidebar .menu-bar button {
	margin: 0;
	padding: 10px 8px;
	flex: 1;
	white-space: nowrap;
	border-radius: var(--br-main) var(--br-main) 0 0;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	background: var(--color-border-dark);
	color: var(--color-grey);
	border: 1px solid var(--color-border);
	border-bottom: none;
	position: relative;
	top: 2px;
	transition: color 0.2s var(--easing-main), background 0.2s var(--easing-main);
}

.top-section-sidebar .menu-bar button:hover {
	background: var(--color-white);
	color: var(--color-black);
}

.top-section-sidebar .menu-bar button.active {
	background: var(--color-blue);
	color: var(--color-white);
	border-color: var(--color-blue);
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.06);
}

.top-section-sidebar .tab-wrapper {
	margin: 0;
	border-radius: 0 0 var(--br-main) var(--br-main);
}


a {
	color: var(--color-black);
}


/* Buttons: SAT style only for top menu bar and modal */
.top-menu-bar button,
.modal-body button {
	font: 16px "DM Sans", Helmet, Freesans, sans-serif;
	font-weight: 400;
	line-height: 1.25em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 6px 20px 5px;
	margin: var(--xxs);
	min-height: 37px;
	border: none;
	border-radius: var(--br-main);
	position: relative;
	overflow: hidden;
	transition: color 0.2s, background 0.2s;
	cursor: pointer;
	backface-visibility: hidden;
	color: var(--color-black);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

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

.top-menu-bar button:hover,
.modal-body button:hover {
	background: var(--color-black);
	color: var(--color-white);
}


/* Keep textbox nodes behind other nodes on the canvas */
.react-flow__node.react-flow__node-textbox {
	z-index: 0;
}

.textbox {
	width: 200px;
	height: 12px;
	overflow: auto;
	font-size: 8px;
}

/* Edge dropdown (protocol selector) */
.edge-dropdown {
	appearance: none;
	min-width: 100px;
	padding: 6px 28px 6px 10px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--color-black);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--br-small);
	box-shadow: var(--shadow-card);
	cursor: pointer;
	transition: border-color 0.2s var(--easing-main), box-shadow 0.2s var(--easing-main);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23434343' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}
.edge-dropdown:hover {
	border-color: var(--color-blue);
}
.edge-dropdown:focus {
	outline: none;
	border-color: var(--color-blue);
	box-shadow: 0 0 0 2px rgba(74, 70, 255, 0.2);
}
.edge-dropdown option {
	font-weight: 400;
}

.context-menu {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--br-main);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	position: absolute;
	z-index: 100;
	font-family: "DM Sans", sans-serif;
	overflow: hidden;
	min-width: 160px;
}

.context-menu-item {
	padding: 9px 16px;
	font-size: 14px;
	font-family: "DM Sans", sans-serif;
	color: var(--color-black);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.context-menu-item:hover {
	background: var(--color-border-dark);
	color: var(--color-blue);
}
.context-menu-item--danger:hover {
	background: #fff0f0;
	color: #d00;
}

.react-flow__handle.source,
.react-flow__handle.target {
	width: 9px;
	height: 9px;
}
.react-flow__handle.source { background-color: var(--color-handle-source); }
.react-flow__handle.target { background-color: var(--color-handle-target); }

.top-menu-bar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 5px 10px;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
}

.top-menu-bar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.top-menu-bar-logo {
  display: flex;
}

.top-menu-bar .sat-logo {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}

.top-menu-bar-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.top-menu-bar-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.top-menu-bar-flow-meta {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding-top: 2px;
  border-top: 1px solid var(--color-border);
}

.flow-name-input,
.flow-description-input {
  border: none;
  border-radius: 0;
  padding: 2px 4px;
  font-family: "DM Sans", sans-serif;
  color: var(--color-black);
  background: transparent;
  outline: none;
}

.flow-name-input {
  font-size: 0.8rem;
  font-weight: bold;
  width: 140px;
  border-right: 1px solid var(--color-border);
}

.flow-description-input {
  font-size: 0.8rem;
  flex: 1;
  color: #666;
}

.flow-name-input:focus,
.flow-description-input:focus {
  color: var(--color-blue);
}

.top-menu-bar-instructions {
  background: var(--color-blue) !important;
  color: var(--color-white) !important;
}

.top-menu-bar-instructions:hover {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

.top-menu-bar-new:disabled {
  opacity: 0.35;
  cursor: default;
}

.top-menu-bar-new:disabled:hover {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
}

.dndflow {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	background-color: var(--color-white);
	margin: 0;
}

.dndflow-left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dndflow-canvas-area {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.dndflow .reactflow-wrapper {
	flex: 1;
	min-height: 0;
}

.dndflow .dndnode {
	height: 50px;
	width: 50px;
	padding: 10px;
	border: 2px solid var(--color-border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	position: relative;
	overflow: hidden;
	font-family: "DM Sans", sans-serif;
	z-index: 0;
}

/* white circle behind the logo */
.dndflow .dndnode::before {
	content: "";
	position: absolute;
	inset: .001px;
	background: var(--color-white);
	border-radius: 50%;
	z-index: -1;
}

/* make sure the logo is above the circle */
.dndflow .dndnode img,
.dndflow .dndnode svg {
  position: relative;
  z-index: 1;
}
  

.dndflow .dndnode.input {
	border-color: var(--color-blue);
}

/* tooltip  */
.popup,
.landing-info-tooltip {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--br-small);
	box-shadow: var(--shadow-card);
	padding: 12px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-black);
}
.popup {
	position: fixed;
	z-index: 99999;
	max-width: 280px;
	pointer-events: none;
}
.dndflow .dndnode.input:hover .popup {
	display: block;
}
  
.dndflow .dndnode.output {
	border-color: var(--color-output);
}

.dndflow .dndnode.dndnode--sat {
	border-color: var(--color-blue);
	box-shadow: 0 0 0 3px rgba(74, 70, 255, 0.18);
}

/* Protocol filter pills — spans full grid width */
.protocol-filter {
	padding: 0 0 8px;
	position: relative;
}

.protocol-select-btn {
	width: 100%;
	padding: 5px 10px;
	font-size: 11px;
	font-family: "DM Sans", sans-serif;
	font-weight: 500;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: transparent;
	color: var(--color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.protocol-select-btn.open {
	background: rgba(255,255,255,0.15);
}

.protocol-dropdown {
	position: absolute;
	top: calc(100% - 4px);
	left: 0;
	right: 0;
	background: var(--color-blue);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 10px;
	overflow-y: auto;
	max-height: 200px;
	z-index: 100;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.protocol-option {
	padding: 6px 12px;
	font-size: 11px;
	font-family: "DM Sans", sans-serif;
	color: rgba(255,255,255,0.8);
	cursor: pointer;
}
.protocol-option:hover,
.protocol-option.active {
	background: rgba(255,255,255,0.15);
	color: var(--color-white);
}

/* Connection failure toast */
.connect-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-black);
	color: var(--color-white);
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var(--br-main);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	z-index: 9999;
	pointer-events: none;
	white-space: nowrap;
}

.dndflow .reactflow-wrapper {
	flex-grow: 1;
	height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sandbox-node {
	padding: 8px 14px 8px 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--br-main);
	box-shadow: var(--shadow-card);
	min-width: 100px;
	cursor: default;
}
.sandbox-node .logo-img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	flex-shrink: 0;
}
.sandbox-node h5 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	font-family: "DM Sans", sans-serif;
	color: var(--color-black);
	white-space: nowrap;
}
.sandbox-node p {
	display: none;
}
.sandbox-node.sandbox-node--device {
	background: #f4f4f4;
}
.sandbox-node.sandbox-node--selected {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}
.react-flow__node.selected > .sandbox-node {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}
.react-flow__node-sandbox.selected,
.react-flow__node-custSandbox.selected,
.react-flow__node-custDevice.selected {
	box-shadow: none;
}

.menu-bar {
	margin: 0;
	flex-direction: row;
}
.menu-bar button {
	margin-top: 0;
}

.sidebar {
	margin: 0;
	width: 100%;
	padding: 8px 8px 8px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	min-height: 0;
	overflow: hidden;
	transition: height 0.3s var(--easing-main);
}


.sidebar .top-section-sidebar {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	transition: flex 0.4s var(--easing-main);
}
.tab-wrapper {
	padding: 10px;
	font-size: 12px;
	background: var(--color-blue);
	border-radius: var(--br-small);
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: flex 0.4s var(--easing-main);
}
.tab-wrapper .tab-content {
	flex: 1;
	min-height: 0;
}
.tab-content {
	overflow-y: scroll;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}
.tab-nodes {
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-auto-rows: 80px;
	column-gap: 5px;
	flex: 1;
}

.tab-content--templates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.node-details {
	flex-shrink: 0;
	margin-top: 8px;
	padding: 14px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--br-main);
	box-shadow: var(--shadow-card);
	color: var(--color-black);
	font-size: 0.9rem;
	line-height: 1.4;
	transition: margin-top 0.35s var(--easing-main);
}
.node-details.node-details-visible {
	animation: node-details-enter 0.4s var(--easing-main) forwards;
}
@keyframes node-details-enter {
	from {
		transform: translateY(10px);
		opacity: 0.92;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
.node-details p {
	margin: 0 0 12px 0;
}
.node-details-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.node-details-logo {
	height: 44px;
	width: auto;
	object-fit: contain;
}
.node-details-doc-btn {
	padding: 4px 8px;
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--color-white);
	background: var(--color-blue);
	border: none;
	border-radius: var(--br-small);
	cursor: pointer;
	transition: background 0.2s var(--easing-main), color 0.2s var(--easing-main);
}
.node-details-doc-btn:hover {
	background: var(--color-black);
}
.node-details-title {
	margin: 0 0 6px 0;
	font-size: 1.1rem;
	font-weight: 600;
}
.node-details-desc {
	color: var(--color-grey);
	margin-bottom: 14px;
}
.node-details-io {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 12px;
	align-items: start;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}
.node-details-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.node-details-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-grey);
}
.node-details-bubbles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.node-details-bubble {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--color-black);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--br-main);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	pointer-events: none;
}
.node-details-bubble--empty {
	color: var(--color-grey);
	font-style: italic;
}
.node-details-divider {
	width: 1px;
	background: var(--color-border);
	min-height: 24px;
	align-self: stretch;
}
.node-details a {
	color: var(--color-blue);
}

@media screen and (max-width: 767px) {
	/* Compact top menu bar on mobile */
	.top-menu-bar button {
		font-size: 12px;
		padding: 5px 10px;
		min-height: 32px;
		margin: 2px;
	}

	.top-menu-bar-actions {
		gap: 2px;
	}

	.top-menu-bar .sat-logo {
		height: 24px;
	}

	/* Hide Save/Restore on mobile */
	.top-menu-bar-desktop-only {
		display: none !important;
	}

	/* Wider node grid since sidebar spans full width */
	.tab-nodes {
		grid-template-columns: repeat(6, auto);
	}

	/* Sidebar tab buttons smaller on mobile so they fit + toggle button is visible */
	.top-section-sidebar .menu-bar {
		border-bottom: none;
	}
	.top-section-sidebar .menu-bar button {
		padding: 6px 10px;
		font-size: 11px;
		position: static;
		top: auto;
	}

	.sidebar {
		height: 38dvh;
		min-height: 240px;
		max-height: 360px;
	}

	/* Flow name/description stacked vertically on mobile */
	.top-menu-bar-flow-meta {
		flex-direction: column;
		gap: 2px;
	}

	.flow-name-input {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}

	.flow-description-input {
		width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.dndflow {
		flex-direction: row;
	}

	.sidebar {
		width: 280px;
		height: 100%;
		min-height: unset;
		max-height: unset;
		overflow: hidden;
		z-index: 10;
	}

	.sidebar .top-section-sidebar {
		flex: 1;
		min-height: 0;
	}

	.tab-nodes {
		grid-template-columns: repeat(3, 1fr);
	}
}




.modal-wrapper {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
}

.modal-body {
	margin: 80px;
	margin-right: 30%;
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--br-main);
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
	line-height: 1.25em;
	animation: modalFadeIn var(--fade-duration) var(--easing-main) forwards;
}
@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: translateY(var(--fade-initial-y));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.modal-body h1,
.landing-title {
	margin: 0;
	font-size: 30px;
	padding: 10px 0 20px 0;
	font-weight: bolder;
	line-height: normal;
}
.landing-title {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.landing-info-wrap {
	position: relative;
	display: inline-flex;
}
.landing-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--color-blue);
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 600;
	font-style: normal;
	cursor: help;
	line-height: 1;
}
.landing-info-icon:focus {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}
.landing-info-tooltip {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: auto;
	right: 0;
	transform: none;
	bottom: calc(100% + 8px);
	width: 280px;
	max-width: calc(100vw - 32px);
	z-index: 99999;
	transition: opacity 0.2s, visibility 0.2s;
	pointer-events: none;
}

.landing-info-wrap:hover .landing-info-tooltip,
.landing-info-wrap:focus-within .landing-info-tooltip {
	visibility: visible;
	opacity: 1;
}
.landing-steps {
	margin: 0 0 24px 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.landing-steps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--color-grey);
	font-size: 0.9rem;
}
.landing-step-circle {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid var(--color-black);
	background-color: var(--color-black);
	color: var(--color-white);
	font-weight: 600;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.landing-step-text {
	flex: 1;
}
.landing-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.landing-actions .landing-note {
	font-size: 0.85rem;
	color: var(--color-grey);
}
.landing-actions .landing-note strong {
	color: var(--color-black);
}

.landing-mobile-note {
	display: none;
}

@media screen and (max-width: 767px) {
	.landing-mobile-note {
		display: block;
		margin-top: 20px;
		font-size: 0.8rem;
		color: var(--color-grey);
		text-align: center;
		font-style: italic;
	}
}

/* Mobile modal — placed after desktop styles so cascade works correctly */
@media screen and (max-width: 767px) {
	.modal-wrapper {
		align-items: flex-start;
		justify-content: center;
		background: var(--color-white);
		overflow-y: auto;
		padding: 28px 0;
		box-sizing: border-box;
	}

	.modal-body {
		margin: auto;
		padding: 20px 20px 28px;
		width: 100%;
		border: none;
		border-radius: 0;
		box-shadow: none;
		box-sizing: border-box;
		animation: none;
	}

	.modal-body h1,
	.landing-title {
		font-size: 26px;
		padding: 8px 0 20px;
		display: flex;
		justify-content: center;
		text-align: center;
		width: 100%;
	}

	.landing-steps {
		gap: 18px;
	}

	.landing-steps li {
		font-size: 1rem;
		gap: 14px;
	}

	.landing-step-circle {
		flex: 0 0 30px;
		height: 30px;
		font-size: 13px;
	}

	.landing-actions {
		justify-content: center;
		padding-top: 28px;
	}

	.landing-actions .landing-note {
		font-size: 0.9rem;
		text-align: center;
	}
}


.simple-inline {
	display: inline-flex;
}


.parent-grid{
  
  display: grid;
  grid-template-columns: 45% 10% 45%;

}
.child-grid h5 {
	font-size: 8px;
	padding: 0;
	margin: 0;
	text-align: center;
}
.child-grid p {
	margin: 0;
	padding: 0;
}
.child-grid li {
	list-style-type: none;
}

  


.right-align{
  text-align: right;

}


.custom-form{
	width: 250px;


}

#sidebar-custom-node{
	text-align: center;
	color: #4a46ff;
}