/**************************************************************************************************
* CNES Self CSS
* Author:   CNES Web Support Team
* Modified: 2025-09
**************************************************************************************************/

/* ==========================================================================
   Fonts & Variables
   ========================================================================== */
   
/* Import Inter (same as website) and font awesome for icons */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');

:root {
  /* Fonts */
  --font-family-base: "Inter", sans-serif;

  /* Font sizes (relative units so they scale) */
  --font-size-root: 100%; 
  --font-size-h1: 2.25rem; 
  --font-size-h2: 1.4rem; 
  --font-size-h3: 1.10rem; 
  --font-size-body: 1rem;  
  --font-size-small: 0.875rem;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-almost-bold: 600;
  --font-weight-bold: 700;

  /* Colours */
   /* #000080 council web navy, #fc0 council web yellow */
  --color-text: #000;
  --color-bg: #fff;
  --main-dark-color: #000080;                /* council navy */
  --contrast-main-dark-color-hover: #fc0;    /* council yellow */
  --light-background: #f9fafc;
  --accent-border-color: #e6b800;            /* darker golden yellow */	
  --muted: #555;
  --error: #c00;
  --error-background: #fff3f3;
  --lighter-blue: #6092da;
  --darker-off-white: #E7EBEF;
  --tab-hover: #E9D99B; /*vanilla*/
  --lightest-blue: #275af70d;
  /* Testing other colours*/
  --very-dark-navy: #070742;
  --beige-yellow: #DEC76A;
  --gold-yellow: #C9B460;
  --grey-blue: #7A8B9B;
  --off-white: #F3F5F7;
  --grey-blue: #DAE3E7;
}


/**************************************************
* S02. Base Typography & Body
**************************************************/

html { font-size: var(--font-size-root); }


body {
  font-family: var(--font-family-base) !important; 
  font-size: var(--font-size-body) !important; 
  font-weight: var(--font-weight-normal) !important; 
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

h1 {
  font-size: var(--font-size-h1) !important;
  font-weight: var(--font-weight-bold) !important; 
  color: var(--main-dark-color) !important; 
  margin-bottom: 0.7em;
  line-height: 1.2;
}

h2 {
  font-size: var(--font-size-h2) !important; 
  font-weight: var(--font-weight-almost-bold) !important; 
  color: var(--main-dark-color);
  margin-bottom: 0.5em;
  margin: 2rem 0 0.75rem;                         
  letter-spacing: 0.5px;  
  margin-top: 2.5rem;
}

h3 {
  font-size: var(--font-size-h3) !important; 
  font-weight: var(--font-weight-medium) !important; 
  color: var(--main-dark-color);
  margin-bottom: 0.5em;
}

p, li {
  font-size: var(--font-size-body) !important; 
  line-height: 1.5;
}

/* Forgotten password link */
a {
    color: var(--main-dark-color); 
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--very-dark-navy); 
    text-decoration: underline;
}


/**************************************************
* Override Granicus styling 
**************************************************/
/*username password boxes too long*/
.form-control {
    width: 80% !important; 
    color: var(--main-dark-color) !important; 
    background-color: var(--lightest-blue)!important; 
    border: 1px solid var(--grey-blue) !important; 
}


/* Override general button styling - this is used places like ananoymous log in*/
.btn-primary {
    color:  var(--main-dark-color) !important;  
    background-color: var(--contrast-main-dark-color-hover) !important;   
    border-color: var(--contrast-main-dark-color-hover) !important; 
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--contrast-main-dark-color-hover) !important; 
  border-color: var(--accent-border-color) !important;              
  color: var(--main-dark-color) !important;                        
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


/* Override cookie consent button */
.btn.consent-accept {
  background-color: var(--main-dark-color) !important;       /* navy */
  border: 1px solid var(--main-dark-color) !important;
  color: var(--color-bg);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

/* Hover + focus */
.btn.consent-accept:hover,
.btn.consent-accept:focus {
  background-color: var(--contrast-main-dark-color-hover) !important; /* yellow */
  border-color: var(--accent-border-color) !important;                /* darker yellow outline */
  color: var(--main-dark-color) !important;                           /* navy text */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* --- Fix Granicus cookie banner overlap --- */
#cookie-message {
  position: relative !important; /* stops it from overlapping the header */
  z-index: auto !important;
  margin-bottom: 1rem; /* small spacing before content starts */
  border-bottom: 2px solid #d5d5d5;
}

/* ensure main header and nav stay visible */
#toolbar, #navigation {
  position: relative;
  z-index: 1;
}


/*Do you want to exit pop up styling*/

.ui-pnotify .ui-pnotify-action-button {
  min-width: 100px !important;
  font-weight: var(--font-weight-almost-bold) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: none !important;
}

/*pop up box. default     
	background-color: #c0ab3c;
    border-color: #faebcc;
    color: black;
*/

/*No button*/
    .ui-pnotify .btn-danger {
        background: var(--main-dark-color) !important;   
      /*  border: 1px solid var(--accent-border-color) !important;   */
		color: var(--off-white) !important; 
        
    }

/*Yes button*/
    .ui-pnotify .btn-success {
        background: var(--contrast-main-dark-color-hover) !important; 
    color: var(--color-text) !important;	
    /* border: 1px solid var(--main-dark-color) !important;    */
    }
    
/*Yes and stop warning
commented out - because it was hiding the ok button when user registered 
    .ui-pnotify .btn-default {
       display: none !important; 
    }
	*/
/*pop up box 
	default:  border-color: #8a3b49;
    color: #b23434;
*/
    .ui-pnotify .alert-warning {
        border: 2px solid var(--main-dark-color) !important; 
        background-color: var(--off-white) !important; 
		color: var(--main-dark-color) !important;
		font-size: var(--font-size-h3) !important;
    }	


/*Position - previously in top right corner not ideal for important alert*/
/* Position the notification in the center  */
    .ui-pnotify {
     top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  max-width: 500px;
  z-index: 99999 !important; /* keep above everything */
    }

/*button position*/
    .ui-pnotify .ui-pnotify-action-bar {
        display: flex !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

/* No button hover */
.ui-pnotify .btn-danger:hover,
.ui-pnotify .btn-danger:focus {
  background: var(--very-dark-navy) !important;  /* darker navy */
  border-color: var(--main-dark-color) !important;
  color: var(--off-white) !important;
}

/* Yes button hover */
.ui-pnotify .btn-success:hover,
.ui-pnotify .btn-success:focus {
  background: var(--accent-border-color) !important;  
  border-color: var(--main-dark-color) !important;
  color: var(--main-dark-color) !important; /* navy text on hover */
}

/*Button default styling usually grey
    color: #333 !important;
    border-color: #ccc !important;
    background-color: #fff !important;
    */
.btn-default {
    color: var(--main-dark-color) !important;
    border-color: var(--main-dark-color) !important;
    background-color: var(--lightest-blue) !important;
    font-size: var(--font-size-body) !important;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

/**************************************************
* S03. Layering / Z-index (Header, Nav, Dropdown)
**************************************************/

/* Nav sits above content but below header & dropdown */
#navigation {
  position: sticky;
  top: 0;
  z-index: 1000 !important;
}

/* Header above nav */
#toolbar,
#toolbarheader {
  position: relative;
  z-index: 1500 !important;
  overflow: visible !important;
}

/* Session badge & dropdown above everything else */
#session-badge {
  position: relative;
  z-index: 2000 !important;
}

#session-badge .dropdown-menu {
  position: absolute;
  z-index: 2100 !important;
}


/**************************************************
* S04. Feature 1: Sub-nav restyle (desktop)
**************************************************/

/* Make the nav bar its own clean sticky bar below the yellow header */
#navigation {
  background: var(--color-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin-bottom: 1rem;
}

/* Neutralise Bootstrap nav container look */
#navigation .navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .75rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Turn the three buttons into text tabs */
#navigation .btn-group.hidden-xs > a.btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--main-dark-color);
  font-weight: 600;
  font-size: 1.125rem; /* ~18px */
  padding: .25rem 0;
  margin-right: 2rem;
  text-decoration: none !important;
}

/* Hover / focus */
#navigation .btn-group.hidden-xs > a.btn:hover {
  color: var(--contrast-main-dark-color-hover);
}
#navigation .btn-group.hidden-xs > a.btn:focus-visible {
  outline: 3px solid var(--main-dark-color);
  outline-offset: 4px;
}

/* Active page indicator (uses .active class) */
#navigation .btn-group.hidden-xs > a.btn.active {
  color: var(--color-text);
}
#navigation .btn-group.hidden-xs > a.btn.active::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--main-dark-color);
  border-radius: 2px;
  margin-top: .35rem;
}

/* Prevent Bootstrap caret */
#navigation .btn-group.hidden-xs > a.btn .caret {
  display: none !important;
}

#navigation .btn-group.hidden-xs > a.btn:hover::after,
#navigation .btn-group.hidden-xs > a.btn:focus-visible::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--contrast-main-dark-color-hover);
  margin-top: .35rem;
  border-radius: 2px;
}


/**************************************************
* S05. Feature 2: Services grid restyle
**************************************************/

/* Service cards base */
.service-groups a.fsservice-pretty-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-bg);
  border: 2px solid var(--main-dark-color);
  border-radius: 8px;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  min-height: 140px;
  white-space: normal !important;   /* stop truncating */
  overflow: visible !important;     /* allow wrapping */
}

/* Hover / focus states */
.service-groups a.fsservice-pretty-link:hover,
.service-groups a.fsservice-pretty-link:focus {
  border-color: var(--contrast-main-dark-color-hover);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  transform: translateY(-3px);
  outline: none;
}

/* Titles */
.service-groups a.fsservice-pretty-link h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  margin: 0 0 .5rem;
  color: var(--main-dark-color);
  line-height: 1.3;
  white-space: normal !important; /* allow wrapping */
}

/* Descriptions */
.service-groups a.fsservice-pretty-link p {
  font-size: var(--font-size-small);
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
}

/* Grid spacing */
.service-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}


/**************************************************
* S06. Feature 3: Homepage sections (Popular, Other, Welcome)
**************************************************/

/* Restrict self-content to match/under-run nav width */
#self-content.container {
  max-width: 1200px !important;   
  width: 100% !important;         
  margin: 0 auto !important;      
  background-color: var(--light-background); /* subtle off-white layer */
  border-radius: 12px;            
  padding: 2rem;            
}

/* General card styling */
#homepageContent .homepage-section {
  background: var(--color-bg);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* Headings */
#homepageContent h1,
#homepageContent h2 {
  color: var(--main-dark-color);
  font-weight: 700;
  margin-bottom: 1rem;
}

#homepageContent h2 {
  border-bottom: 3px solid var(--contrast-main-dark-color-hover); /* yellow accent underline */
  padding-bottom: .4rem;
}

/* Tasks grid */
.tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Shared task card styles (homepage + payments) */
.tasks-grid li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: var(--main-dark-color);             /* navy */
  color: var(--contrast-main-dark-color-hover);   /* yellow */
  font-weight: 600;
  border-radius: 12px;
  min-height: 110px;
  max-width: 500px;
  padding: 1rem;

  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              background-color 0.25s ease,
              color 0.25s ease;
}

/* Shared hover/focus */
.tasks-grid li a:hover,
.tasks-grid li a:focus {
  background: var(--contrast-main-dark-color-hover); /* yellow */
  color: var(--main-dark-color);                     /* navy */
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  border-color: var(--accent-border-color);
}

/* Added specific styling for tasks with icons but the above is reused on other pages*/
/* Only homepage icon tasks grid */
.icon-grid li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.icon-grid li a i {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.icon-grid li a span {
  display: block;
  font-size: 0.95rem;
  line-height: 1.3;
}



/**************************************************
* S07. Responsive overrides
**************************************************/

@media (min-width: 1200px) {
  /* Limit header, nav, homepage wrapper widths consistently */
  #toolbarheader .container,
  #navigation,
  #homepageContent,
  #self-content {
    max-width: 96vw;
    margin: 0 auto;
  }

  /* Also tame generic .container if other templates leak it wide */
  .container {
    max-width: 96vw;
    margin: 0 auto;
  }
}
/**************************************************
* Added for accessibility 
**************************************************/
:focus-visible {
  outline: 3px solid var(--contrast-main-dark-color-hover);
  outline-offset: 3px;
}
#navDropdownToggle:focus-visible {
  outline: 3px solid var(--contrast-main-dark-color-hover) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    transform: none !important;
  }
}
.skip:focus {
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: .5rem 1rem;
  background: var(--contrast-main-dark-color-hover);
  color: var(--main-dark-color);
  z-index: 9999;
}


/**************************************************
* Responsive: Login/Register buttons in header (refined)
**************************************************/
@media (max-width: 768px) {
  #session-badge {
    display: flex;
    flex-direction: row;               /* side-by-side */
    justify-content: flex-end;         /* keep right-aligned */
    align-items: center;
    gap: 0.4rem;                       /* small spacing between buttons */
    margin-right: 0.75rem;             /* little padding from screen edge */
    margin-top: 0.25rem;
  }

  #session-badge a.login-link,
  #session-badge a.register-link,
  #toolbarheader .navbar-inverse .navbar-nav>li>a {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    line-height: 1.2;
    height: auto;
    border-radius: 6px;
    background: var(--main-dark-color);
    color: var(--off-white);
  }

  #session-badge a.login-link:hover,
  #session-badge a.register-link:hover {
    background: var(--very-dark-navy);
  }
}

/* Slightly smaller phones */
@media (max-width: 480px) {
  #session-badge {
    flex-wrap: wrap;                   /* if too narrow, wrap to two lines */
    justify-content: flex-end;
    gap: 0.3rem;
    margin-right: 0.5rem;
  }
}


/**************************************************
* For Make A Payment Page
**************************************************/
#payments-wrapper {
  padding-left: 1rem;   
  padding-right: 1rem;
}

#payment-unavailable, 
#payment-noresults {
  display: none;             /* hidden by default */
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
}

#payment-unavailable {
  border: 2px solid var(--error);
  background: var(--error-background);
  color: var(--error);
}

#payment-noresults {
  border: 2px solid #999;
  background: #f9f9f9;
  color: #333;
}
#payment-unavailable a {
  color: var(--main-dark-color);
  text-decoration: underline;
}

/* **********************************************
 * Payments Search Bar - wrapper and layout
 ********************************************** */
.payment-search {
  position: relative;
  max-width: 480px;
  margin: 0 0 24px 0; /* left aligned, just bottom spacing */
}


.payment-search input[type="search"] {
  width: 100%;
  border: 2px solid var(--main-dark-color);
  border-radius: 9999px;      /* pill shape */
  padding: 12px 16px 12px 56px; /* left padding for icon + gap */
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-search input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--main-dark-color);
  box-shadow: 0 0 0 4px rgba(10, 30, 134, 0.2);
}

/* Icon styling */
.payment-search .search-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-dark-color);
  font-size: 16px;
  pointer-events: none;
}

/*  Visually Hidden - accessible labels */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/**************************************************************************************************
* -------------- Existing CSS-------------- 
**************************************************************************************************/

/* Commenting out as this is now set above 
* body {
*    background-color: #E0E0E0;
*    display: flex;
*    flex-direction: column;
*    height: 100vh;
*	font-size: 16px;
*}
*/

#self-body:before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0.2;
    background: radial-gradient(50% 50% at 100% 50%,rgba(0,0,128,0.75) 36.98%,rgba(0,0,128,0) 100%);
}

img {
	max-width: 100%;
}
#background-image {
    background-image: url('images/background.jpg');
    width: 78%;
    height: 890px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 32px 32px;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    max-height: 100%;
}

#toolbar {
    padding: 20px 12px;
    max-width: 100%;
    width: 100%;
    margin: 0;
    background-color: #FFCC00;
    box-shadow: 0 5px 15px 0 #b1b4b6;
    z-index: 9;
}
#toolbarheader {
    margin-inline: auto;
    max-width: 1440px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
#toolbarheader .inner {
    width: 100%;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-inline: 0.5rem;
}
.brand-image {
    height: 64px;
    margin: 0;
}
@media (max-width: 47.9375em) {
    #logo a {
        display: block;
        height: 55px;
        width: 55px;
        background: url('images/small_logo.svg') no-repeat center center;
        background-size: contain;
    }
    .brand-image {
        display: none;
    }
}
.navbar-inverse {
    background-color: transparent;
    border-color: transparent;
}
.navbar-nav.navbar-right:last-child {
    margin-right: 0;
}
.navbar-nav>li {
    display: block;
}
.navbar-nav>li:first-child {
    margin-right: 1rem;
}
#toolbarheader .login-link, #toolbarheader .navbar-inverse .navbar-nav>li>a {
    border: none;
    width: fit-content;
    display: block;
    text-decoration: none;
    color: #fff;
    background: #000080;
    font-size: 16px;
    padding: 0 16px;
    border-radius: 8px;
    position: relative;
    margin: 0;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    transition: none;
}
#toolbarheader .login-link:hover, #toolbarheader .navbar-inverse .navbar-nav>li>a:hover {
    /* background-color: #000; */
    background-color: var(--very-dark-navy);
    text-decoration: underline;
}

#navigation>div {
    margin-top: 70px;
}

 /*
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .active.open, .dropdown-toggle.btn-primary {
   background-color: #FFCC00; 
   background-color: var(--contrast-main-dark-color-hover) !important; 
    border-color: #FFCC00;
    color: #000000;
}
    */

/*
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, 
*/

#anonymousLoginScreen #btn-register {
	font-size: 19px;
}


#anonymousLoginScreen #btn-login {
/*	background-color: #238b23; */
    background-color: var(--main-dark-color) !important;
/*	color: #fff !important; */
color: var(--color-bg) !important;
	font-size: 19px;
	margin-top: 10px;
	padding-top: 6px;
}

/*
#anonymousLoginScreen #btn-login:hover, 
#btn-login:focus {
    background-color: #FFCC00 !important;
    color: #000000 !important;
}
    */

#anonymousLoginScreen #btn-anon {
	background-color: #000;
	color: #fff !important;
	font-size: 19px;
	margin-top: 10px;
	padding-top: 6px;	
	border-radius: 4px;
}

#anonymousLoginScreen #btn-anon:hover {
    background-color: #FFCC00 !important;
    color: #000000 !important;
}

.btn.active .caret {
    visibility: hidden;
}

.form-link-color {
    color: #000080;
}

.boldblue {
    font-weight: 700;
    color: #000080;
}

div.card {
    margin-bottom: 3em;
}

.card ul {
    padding-left: 0;
}

.card li {
     /* Commenting out for new style   border-top: 1px solid #666666; */
    padding: 1em;
    list-style-type: disclosure-closed;
    list-style-position: inside;
}

.card-title {
    padding: 1em;
    font-size: 1.5rem;
    font-weight: 700;
}

.card li.card-all {
    border-top: 1px solid #000080;
}

.btn-lg, .btn-group-lg>.btn {
    font-size: 1rem;
}

.skip {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;
}

#navigation .btn-group.clearfix {
    content: none;
}
#navigation .btn-group {
    z-index: 1;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
#navigation .btn-group a.btn-primary {
    padding: 16px;
    border-radius: 12px;
    color: #000;
    background: rgba(255,255,255,0.8);
    box-shadow: 4px 8px 32px 0 rgba(0,0,0,0.15);
    display: block;
    text-decoration: underline;
    backdrop-filter: blur(4px);
    height: 100%;
    border-color: transparent;
}
#navigation .btn-group a.btn-primary:hover {
    background: rgba(255,255,255,1);
    text-decoration: none;
}
#navigation .btn-group a.btn-primary.active {
    background-color: #000080;
    color: #fff;
}
#navigation .btn-group a.btn-primary.active:hover {
    background-color: #000;
}

#main-content {
    margin-top: 50px;
}
#self-content {
    width: auto;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 12px;
   /* color: #000; */
   color: var(--very-dark-navy) !important;
    background: rgba(255,255,255,0.8);
    box-shadow: 4px 8px 32px 0 rgba(0,0,0,0.15);
    display: block;
    text-decoration: none;
    backdrop-filter: blur(4px);
}
#navigation {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.jumbotron {
    background-color: transparent;
}
.logout-form, .login-form {
    padding-top: 5rem;
}
.logout-form::after, .login-form::after {
    padding-bottom: 5rem;
    content: '';
    display: block;
    clear: both;
}

footer {
    position: relative;
    padding-bottom: 50px;
    margin-top: 0;
    margin-block-start: 10rem;
}
footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 70px;
    background-image: url('images/Footer.svg');
    background-position: left bottom;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 26px;
    background-size: 100% auto;
}
footer::after {
    content: '';
    display: block;
    width: 100%;
    height: 30px;
    background:linear-gradient(0deg,#364f9e 0%,#282e66 100%);
    position: absolute;
    bottom: 0;
}

.pre-footer {
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    padding-block: clamp(1rem, 10vw, 2.5rem);
    max-width: 1440px;
    margin-inline: auto;
}
.pre-footer h2 {
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    color: #000080;
    margin-top: 0;
}
.pre-footer p {
    display: inline-block;
    margin: 16px 0 !important;
    font-size: 16px;
    line-height: 130%;
}
.pre-footer p a {
    max-height: 40px;
    line-height: 16px !important;
    border: none !important;
    margin: 0 14px 0 0 !important;
    display: inline-block;
    vertical-align: top;
    font-weight: 700;
    padding: 12px 16px;
    color: #fff;
    background-color: #000080;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: border .2s ease-in-out;
}
.pre-footer p a:hover {
    background: #000;
    text-decoration: underline;
}

.footer {
    padding-top: 12px;
    padding-block: clamp(1rem, 10vw, 1rem);
    color: #282827;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px 8px 0 0;
    max-width: 1440px;
    margin-inline: auto;
}

.region__inner--footer {
    display: flex;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-direction: reverse;
    -moz-box-orient: vertical;
    flex-direction: column-reverse;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 20px;
}
.region__inner--footer > div {
    width: 100%;
}
.footer-logo-block {
    display: flex;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-direction: reverse;
    -moz-box-orient: vertical;
    flex-direction: column-reverse;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 15px;
}
.footer-logo-block img:first-child {
    height: 56px;
}
.footer-social-media-links {
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    flex-direction: row;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 16px;
    padding-left: 0;
}
.footer-social-media-links > li {
    padding: 0 !important;
    display: inline-block;
    text-align: center;
}
.footer-social-media-links a img {
    width: 48px;
    height: 48px;
    line-height: 48px;
    color: #fff;
    background: #000080;
    border-radius: 8px;
    padding: 8px;
}
.footer-social-media-links a img:hover {
    background-color: #000;
}


.post-footer {
    margin-bottom: 16px;
    padding-block: clamp(1rem, 10vw, 1rem);
    color: #282827;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 8px 8px;
    max-width: 1440px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
}
.region__inner--lower-footer-first {
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    flex-direction: column;
    gap: 16px;
}
.menu--footer {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 32px;
}
.menu--footer li {
    display: inline-block;
}
.menu--footer li a {
    font-size: 14px;
    line-height: normal;
    color: #000;
    text-decoration: underline;
    position: relative;
    word-wrap: break-word;
    font-weight: 400;
    transition: color ease-in 0.2s;
}
.menu--footer li a:hover {
    text-decoration: none;
}

/*******************************************************************
Styles for divs for CnES info, warning, tip and danger info boxes
********************************************************************/
.cnes_box {
    background: #eee;
    color: #333;
}

div.cnes_box,
div.cnes_danger,
div.cnes_warning,
div.cnes_caution,
div.cnes_notice,
div.cnes_safety {
    padding: 1em 1em .5em;
    margin-bottom: 1.5em;
    overflow: hidden;
}

span.cnes_box,
span.cnes_danger,
span.cnes_warning,
span.cnes_caution,
span.cnes_notice,
span.cnes_safety {
    padding: 0 .3em;
}

/* general styles for all note divs */
div.cnes_info,
div.cnes_important,
div.cnes_alert,
div.cnes_tip,
div.cnes_help,
div.cnes_todo,
div.cnes_download {
    padding: 70px 1em .5em 1em;
    margin-bottom: 1.5em;
    min-height: 100px;
    background-position: 50% 10px;
    background-repeat: no-repeat;
    color: inherit;
    overflow: hidden;
}

/* general styles for all span elements */
span.cnes_info,
span.cnes_important,
span.cnes_alert,
span.cnes_tip,
span.cnes_help,
span.cnes_todo,
span.cnes_download {
    padding: 0 2px 0 20px;
    min-height: 20px;
    background-position: 2px 50%;
    background-repeat: no-repeat;
    color: inherit;
}

/*____________ info ____________*/
.cnes_info { background-color: #d1d7df; }
.cnes__dark.cnes_info { background-color: #343e4a; color: #fff; }
div.cnes_info { background-image: url(images/icons/48/info.png); }
span.cnes_info { background-image: url(images/icons/16/info.png); }

/*____________ important ____________*/
.cnes_important { background-color: #ffd39f; }
.cnes__dark.cnes_important { background-color: #6c3b00; color: #fff; }
div.cnes_important { background-image: url(images/icons/48/important.png); }
span.cnes_important { background-image: url(images/icons/16/important.png); }

/*____________ alert ____________*/
.cnes_alert { background-color: #ffbcaf; }
.cnes__dark.cnes_alert { background-color: #6b1100; color: #fff; }
div.cnes_alert { background-image: url(images/icons/48/alert.png); }
span.cnes_alert { background-image: url(images/icons/16/alert.png); }

/*____________ tip ____________*/
.cnes_tip { background-color: #fff79f; }
.cnes__dark.cnes_tip { background-color: #4a4400; color: #fff; }
div.cnes_tip { background-image: url(images/icons/48/tip.png); }
span.cnes_tip { background-image: url(images/icons/16/tip.png); }

/*____________ help ____________*/
.cnes_help { background-color: #dcc2ef; }
.cnes__dark.cnes_help { background-color: #3c1757; color: #fff; }
div.cnes_help { background-image: url(images/icons/48/help.png); }
span.cnes_help { background-image: url(images/icons/16/help.png); }

/*____________ todo ____________*/
.cnes_todo { background-color: #c2efdd; }
.cnes__dark.cnes_todo { background-color: #17573e; color: #fff; }
div.cnes_todo { background-image: url(images/icons/48/todo.png); }
span.cnes_todo { background-image: url(images/icons/16/todo.png); }

/*____________ download ____________*/
.cnes_download { background-color: #d6efc2; }
.cnes__dark.cnes_download { background-color: #345717; color: #fff; }
div.cnes_download { background-image: url(images/icons/48/download.png); }
span.cnes_download { background-image: url(images/icons/16/download.png); }

/*____________ safety notes ____________*/
.cnes_danger {
    background-color: #c00;
    color: #fff;
}
.cnes_warning {
    background-color: #f60;
    color: #000;
}
.cnes_caution {
    background-color: #ff0;
    color: #000;
}
.cnes_notice {
    background-color: #06f;
    color: #fff;
}
.cnes_safety {
    background-color: #090;
    color: #fff;
}

.cnes_danger *,
.cnes_warning *,
.cnes_caution *,
.cnes_notice *,
.cnes_safety * {
    color: inherit !important;
}


/* yellow text highlighter */
.cnes_hi {
    background-color: #ff9;
    overflow: hidden;
}
.cnes__dark.cnes_hi {
    background-color: #4e4e0d;
    color: #fff;
}
 
@media (min-width:30em){
    footer {
        padding-bottom: 64px;
    }
    footer::before {
        height: 100px;
    }
}
@media (min-width:40em){
    footer {
        padding-bottom: 74px;
    }
    footer::before {
        height: 100px;
    }
}
@media (min-width:48em){
    #background-image {
        width: 68%;
        height: 760px;
    }
    #self-content {
        padding-left: 30px;
        padding-right: 30px;
    }
    #navigation {
        padding-left: 45px;
        padding-right: 45px;
    }
    footer {
        padding-bottom: 100px;
    }
    footer::before {
        height: 140px;
    }
    .region__inner--footer {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        flex-direction: row;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .region__inner--footer > div {
        width: calc(50% - 10px);
    }
    .footer-logo-block {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .footer-social-media-links {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .padding-horizontal {
        padding-left: 30px;
        padding-right: 30px;
    }
    div.cnes_info,
    div.cnes_important,
    div.cnes_alert,
    div.cnes_tip,
    div.cnes_help,
    div.cnes_todo,
    div.cnes_download {
        padding: 1em 1em .5em 70px;
        min-height: 100px;
        background-position: 10px 50%;
        min-height: 68px;
    }
}
@media (min-width:64em){
    .navbar-nav>li {
        display: inline-block;
    }
    #background-image {
        width: 58%;
    }
    #self-content {
        padding-left: 40px;
        padding-right: 40px;
    }
    #navigation {
        padding-left: 55px;
        padding-right: 55px;
    }
    #toolbarheader {
        align-items: normal;
    }
    footer {
        padding-bottom: 120px;
    }
    footer::before {
        height: 170px;
    }
    .padding-horizontal {
        padding-left: 40px;
        padding-right: 40px;
    }
    .region__inner--lower-footer-first {
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        flex-direction: row;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .post-footer {
        margin-bottom: 36px;
    }
}
@media (min-width:68.75em){
    footer {
        padding-bottom: 160px;
    }
    footer::before {
        height: 200px;
    }
}
@media (min-width:90em){
    #navigation .btn-group {
        gap: 20px;
    }
    #background-image {
        height: 1000px;
    }
    #self-content {
        padding-left: 50px;
        padding-right: 50px;
    }
    #navigation {
        padding-left: 65px;
        padding-right: 65px;
    }
    footer {
        padding-bottom: 210px;
    }
    footer::before {
        height: 300px;
    }
    .padding-horizontal {
        padding-left: 50px;
        padding-right: 50px;
    }
    .post-footer {
        margin-bottom: 46px;
    }
}
@media (min-width:150em) {
    footer::before {
        height: 400px;
    }
}

@media (max-width: 767px) {
    #navigation {
        margin-left: 0;
        margin-right: 0;
    }
    .navbar-collapse {
        background-color: #000080;
    }
    .navbar-nav>li:first-child {
        margin-right: 0;
    }
    #navigation .navbar-collapse ul li a {
        color: #fff;
    }
    #navigation .navbar-collapse ul li a:hover {
        background-color: #000;
    }
}