/* =========================================================
   LAYOUT – Sticky footer support
   ========================================================= */
:root {
  /* Core navies (same family as footer) */
  --ddat-navy: #0a2b52;
  --ddat-navy-dark: #051a33;

  /* Sapphire accent (replaces teal for UI chrome) */
  --ddat-accent-blue: #2f7ddc;

  /* Keep teal ONLY for KB SVG artwork */
  --ddat-teal: #0e8d98;
  --ddat-teal-dark: #0a6f77;

  /* Text */
  --ddat-text: #132c45;
  --ddat-text-muted: #5a718a;

  /* Surfaces */
  --ddat-border: #d6e1ea;
  --ddat-soft-bg: #eef3f8;
  --ddat-white: #ffffff;

  /* Shadow tuned to footer mood */
  --ddat-shadow: 0 14px 30px rgba(5, 26, 51, 0.14);
}


   body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}



.navbar,
footer {
  flex-shrink: 0;
}

.wrapper-body {
  flex: 1 0 auto;
}

#content_form {
  margin-bottom: 5px;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */


.page-header {
  background: linear-gradient(180deg, #f3f7fb 0%, #e9eff6 100%);
  width: 100%;
  border-radius: 10px;
  padding: 10px 32px;
  margin-bottom: 15px;
}

.page-header h1 {
  color: var(--ddat-navy);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}



/* =========================================================
   NAVBAR & DROPDOWNS
   ========================================================= */
.navbar img {
  height: 50px !important;
}

.navbar ul {
  padding-top: 20px;
}

/* Dropdown menu */
.open > .dropdown-menu {
  background-color: var(--portalThemeColor4, #ffffff);
}

.open > .dropdown-menu > li > a {
  color: var(--portalThemeOnColor9, #0a2b52);
}

.open .dropdown-menu > li > a:hover,
.dropdown-menu > .active > a:hover,
.open .dropdown-menu > .active > a:focus {
  background-color: #2f7ddc;
  color: #ffffff;
  text-decoration: underline;
}

.dropdown-menu > .active > a {
  background-color: #0a2b52;
  color: #ffffff;
  text-decoration: underline;
}

/* Top nav links */
.nav > li a:hover {
  background-color: transparent !important;
  color: #2f7ddc !important;
  border-color: transparent !important;
}

/* =========================================================
   LISTS & CONTENT HOVERS
   ========================================================= */
a.list-group-item:hover {
  background-color: #f1f6fb !important;
  color: #132c45 !important;
  border-color: #d6e1ea !important;
}


/* =========================================================
   FOOTER – Dark Glass Navy (Final)
   ========================================================= */
footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  border-top: none;
  color: #ffffff;

  background:
    radial-gradient(circle at 14% 32%, rgba(44,120,220,0.16), transparent 34%),
    radial-gradient(circle at 92% 78%, rgba(26,80,170,0.22), transparent 38%),
    linear-gradient(145deg, #040f22 0%, #051a33 48%, #072342 100%);
}

/* Accent line */
footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    #2f7ddc,
    #1a4fa8,
    #2f7ddc,
    transparent
  );
  opacity: 0.9;
  pointer-events: none;
}

/* Glass highlight */
footer::after {
  content: "";
  position: absolute;
  top: -110px;
  right: -100px;
  width: 340px;
  height: 340px;
  border-radius: 42%;
  background: linear-gradient(
    135deg,
    rgba(160,185,255,0.12),
    rgba(160,185,255,0.03)
  );
  border: 1px solid rgba(255,255,255,0.07);
  transform: rotate(18deg);
  pointer-events: none;
}

/* Ensure content layers above decoration */
footer .container,
footer .row,
footer .footer-bottom,
footer .footer-content {
  position: relative;
  z-index: 2;
}

/* Footer bottom */
.footer-bottom {
  background: transparent !important;
  padding: 22px 0 !important;
  color: rgba(255,255,255,0.75);
}

.footer-bottom .container {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
}

/* Footer text */
footer p,
footer span,
footer small {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.65;
}

/* Headings */
footer h2,
footer h3,
footer h4,
footer h5 {
  color: #ffffff;
  font-weight: 700;
}

/* Footer links */
footer a,
.footer-bottom a {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

footer a:hover,
.footer-bottom a:hover {
  color: #2f7ddc;
}

/* Chips & social icons */
footer .footer-chip,
footer .footer-links a,
footer .social-link,
footer .footer-social a {
  backdrop-filter: blur(9px);
}

/* Focus accessibility */
footer a:focus,
.footer-bottom a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,125,220,0.35);
  border-radius: 8px;
}

/* =========================================================
   FOOTER TEXT & BUTTONS
   ========================================================= */
.copyrightname {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500;
  margin: 0;
}

.footerbtn {
  width: 100%;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 500;
  background: none;
  border: none;
  color: #ffffff;
}

.footerbtn:hover,
.footerbtn:focus {
  color: #2f7ddc;
  text-decoration: none;
}

/* =========================================================
   UTILITIES
   ========================================================= */
.removemargin {
  margin: 0;
  padding: 0;
}

.rowmarginremove {
  margin-left: 0;
  margin-right: 0;
}

.itemsCenter {
  justify-content: center;
  align-items: center;
}

/* Social */
.socialimage {
  width: 32px;
  height: 32px;
}

.socialmargin {
  margin-right: 30px;
}

/* Avatar */
.portal-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #d6e1ea;
  margin-right: 10px;
}

/* =========================================================
   FOOTER RESPONSIVE ALIGNMENT
   ========================================================= */
@media (max-width: 767px) {
  .copyrightname,
  .footerbtn {
    text-align: left;
  }

  footer p,
  footer span,
  footer small {
    font-size: 13px;
  }

  footer::after {
    width: 260px;
    height: 260px;
    top: -90px;
    right: -130px;
  }
}

@media (min-width: 768px) {
  .copyrightname {
    text-align: right;
  }
  .footerbtn {
    text-align: center;
  }
}

@media (min-width: 1201px) {
  .paddingCopyright {
    padding-right: 63px;
  }
}