.login_form .logo {

  background-image: url('../../Core_Assets/Images/NXS9_Insignia_large.png');
  background-repeat: no-repeat;
  background-size: contain;
  top: -206px;
}

.button.go {
	padding: 9px 26px;
	font-size: 18px;
	font-weight: 600;
	color: #eaf7ff;
	background: linear-gradient(to bottom, #1d6ea4 0%, #0f3053 100%);
	border: 1px solid #092235;
	border-radius: 7px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.15),
		0 3px 5px rgba(0, 0, 0, 0.4),
		0 0 8px rgba(0, 200, 255, 0.2);
	transition: all 0.25s ease;
}

.button.go:hover {
	background: linear-gradient(to bottom, #2d8fcc 0%, #134b78 100%);
	box-shadow:
		0 4px 8px rgba(0, 200, 255, 0.4),
		0 0 12px rgba(0, 180, 255, 0.3);
	transform: translateY(-1px);
}

.button.go:active {
	background: linear-gradient(to bottom, #15496b 0%, #0a1f32 100%);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
	transform: translateY(1px);
}

.hop_n_slide_container .box_elm:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #1E6765; /* darker base green */
  border-radius: var(--box-border-radius);
  box-shadow: 0 0 12px rgba(30, 103, 101, 0.45); /* soft teal glow */
}

.hop_n_slide_container .box_elm:nth-child(2):after { background-color: #247772; }
.hop_n_slide_container .box_elm:nth-child(3):after { background-color: #2C8984; }
.hop_n_slide_container .box_elm:nth-child(4):after { background-color: #379C97; }
.hop_n_slide_container .box_elm:nth-child(5):after { background-color: #45ADA7; }

@keyframes color-change {
  0%   { background-color: #1E6765; box-shadow: 0 0 6px rgba(30, 103, 101, 0.3); }
  50%  { background-color: #2C8984; box-shadow: 0 0 14px rgba(44, 137, 132, 0.5); }
  100% { background-color: #45ADA7; box-shadow: 0 0 18px rgba(69, 173, 167, 0.55); }
}

@keyframes slide {
  0% {
	background-color: #1E6765;
	transform: translateX(0);
	box-shadow: 0 0 10px rgba(30, 103, 101, 0.3);
  }
  100% {
	background-color: #45ADA7;
	transform: translateX(calc(var(--container-size) - (var(--box-size) * 1.25)));
	box-shadow: 0 0 18px rgba(69, 173, 167, 0.45);
  }
}

/* Softer frosted glass panel */
.login_form .form_cont {
  position: relative;                 /* needed for the overlay */
  background: rgba(201, 215, 224, 0.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-radius: 12px;

  /* softer, thinner edge */
  border: 1px solid rgba(255, 255, 255, 0.05);

  /* dialed-back shadows */
  box-shadow:
	inset 0 0 0 1px rgba(255, 255, 255, 0.02),   /* subtle inner ring */
	0 2px 6px rgba(0, 0, 0, 0.28),               /* small lift */
	0 12px 24px rgba(0, 0, 0, 0.22);             /* soft outer glow */

  z-index: 2;
  width: 100%;
  overflow: hidden; /* so the overlay follows rounded edges */
}

.login_form .form_cont {
  position: relative;
  background: rgba(201, 215, 224, 0.15);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* softer outer and inner glow */
  box-shadow:
	inset 0 0 25px rgba(255, 255, 255, 0.06),  /* gentle glass glow */
	0 2px 12px rgba(0, 0, 0, 0.35),            /* outer lift */
	0 15px 30px rgba(0, 0, 0, 0.2);            /* soft ambient depth */

  z-index: 2;
  width: 100%;
  overflow: hidden;
}

/* top light sheen and faint ambient vignette */
.login_form .form_cont::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
	radial-gradient(180% 100% at 50% -40%, rgba(255,255,255,0.12), transparent 60%),
	radial-gradient(120% 180% at 50% 130%, rgba(0,0,0,0.25), transparent 80%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.form_cont_inner {
  padding: 16px;
  width: calc(100% - 32px);
  border-radius: 10px;

  /* subtle glass tint inside the main panel */
  background: radial-gradient(140% 100% at 50% 0%,
			  rgba(255,255,255,0.10), rgba(255,255,255,0.00) 70%);

  /* thin inner edge + soft, uniform inner glow */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
	inset 0 0 0 1px rgba(255,255,255,0.03),
	inset 0 0 20px rgba(255,255,255,0.06);

  /* optional: slight brand-tinted rim */
  outline: 1px solid rgba(42, 124, 120, 0.12); /* NXS9 “9” teal */
  outline-offset: -1px;
  position: relative;
  overflow: hidden;
}

/* gentle sheen & ambient vignette so it feels lit from within */
.form_cont_inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
	linear-gradient(180deg, rgba(255,255,255,0.10), transparent 35%),
	radial-gradient(120% 160% at 50% 120%, rgba(0,0,0,0.18), transparent 70%);
  pointer-events: none;
}

/* nice touch: brighten when any field is focused */
.form_cont_inner:has(input:focus, select:focus, textarea:focus) {
  box-shadow:
	inset 0 0 0 1px rgba(255,255,255,0.05),
	inset 0 0 26px rgba(69,173,167,0.10); /* subtle teal lift */
}