/* CSS Variables - Add this at the top of your file */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    

	--neutral-50:#f9fafb;
	--neutral-100: #F4F4F4; 
	--neutral-200: #ECEDED;  
	--neutral-300: #DEDEDE;  
	--neutral-400: #B5B5B5;  
	--neutral-500: #8C8C8C;  
	--neutral-600: #727272;  
	--neutral-700: #595959;  
	--neutral-800: #404040; 
	--neutral-900: #262626; 
	--neutral-950: #1C1C1C;

	/* Brand Colors */
	--brand-100:#EEF1F9;
    --brand-200:#E5EAF6;
    --brand-400:#0073BA;
    --brand-500:#0073BA;
    --brand-600:hsl(202.9, 100%, 28.47%);

	--BackgroundColor1: var(--brand-500);
	--header-bg-color: var(--BackgroundColor1);
    --ButtonBackgroundColor1: var(--brand-500);
    --ButtonBackgroundHoverColor1: var(--brand-600);
    --ButtonBackgroundColorDisabled1: var(--neutral-200);
    --ButtonTextColor1: #fff;
    --ButtonTextHoverColor1: #fff;
    --ButtonBorderColor1: var(--neutral-200);
    --LogoImagePath: url("./skins/ACME/images/Acme_Logo.png");

	/*layout*/
	--header-height:70px;
	--sidenav-width:250px;
	
    /* Typography */
    --FontFamilyPrimary: "Source Sans 3", sans-serif;
    --FontFamilySecondary: "Merriweather", serif;
    
    /* Text Colors */
    --TextColorPrimary: var(--neutral-900);
    --TextColorSecondary: var(--neutral-700);
    --TextColorMuted: var(--neutral-500);
    --TextColorWhite: #fff;
    /* Top-nav / header text. Defaults to white for the brand-colored header bar;
       override per-skin or via the Style Configurator when the header bg is light. */
    --HeaderTextColor: var(--TextColorWhite);
    --TextColorError: #b71c1c;
	--LinkColor:var(--brand-500);
	--LinkHoverColor:var(--brand-600);
    
    /* Background Colors */
    --BackgroundColorPage: var(--neutral-100);
    --BackgroundColorCard: #fff;
    --BackgroundColorHover: var(--brand-200);
    --BackgroundColorError: #ffcdd2;
    --BackgroundColorErrorBorder: #DC3545;
	--TooltipColorBg:#ffe;
	--HeaderItemHoverColor:rgba(255, 255, 255, 0.1);
    --AccordianHeader: white;
    --AccordianContent: white;
    
    /* Border Colors */
    --BorderColorLight: var(--neutral-200);
    --BorderColorMedium: var(--neutral-300);
    --BorderColorDark: var(--neutral-800);
	--InputBorderColor: var(--neutral-700);
    
    /* Focus Colors */
    --FocusColor: var(--brand-400);
    --FocusShadow: 0 0 3px 0px var(--brand-400);

    /* misc */
    --ModalShadow: 0px 8px 12px #DEDEDE26, 0px 0px 1px #DEDEDE4F;

    

}



.QA-bar, .Impersonation-bar {
    background: var(--TextColorError);
    color: #fff;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    min-height: 28px;
    padding-left: 17px;
    padding-right: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    z-index: 10000;
}


label {
  font-size: 14px;
  margin-bottom: 4px;
  display: inline-block;
  font-weight: 700;
}

input[type=text], input[type=password], select {
  display: inline-block;
  border: solid 2px var(--InputBorderColor);
  background-color: var(--BackgroundColorCard);
  border-radius: 4px;
  padding: 4px 12px !important;
  margin-bottom: 16px !important;
  font-size: 14px;
  width: 100%;
	line-height:1.625rem;
  height: 40px;
  transition-duration: 0.1s;
	color:var(--TextColorPrimary);
	font-weight:500;
	display: inline-block;

	&:focus{
	    border-color: var(--FocusColor);
	    box-shadow: var(--FocusShadow);
	}

    &:active{
	    border-color: var(--FocusColor);
	    box-shadow: var(--FocusShadow);
	}
	
	&:disabled{  
		  background-color: var(--ButtonBackgroundColorDisabled1) !important;
		  color: var(--TextColorMuted);
	}
	
	&:disabled:hover {
	  cursor: default;
	  background-color: var(--BackgroundColorPage);
	}
}

/* Writing Number / Agent Code field: keep it wide enough to show all 6 characters without scrolling.
   Uses !important to beat the control's inline/100% width, and covers a possible wrapper element. */
[id$='AgentCodeText'],
[id$='AgentCodeText'] input {
  width: 250px !important;
  min-width: 250px !important;
}

/* Stronger border for the user-lookup (UserSelector) control on just two
   pages: the User Admin page (wrapped in .leftuser) and the "Transcript
   Lookup" on My Training (wrapped in .user-selector-container). Scoped to the
   UserSelector's own text box via the `tbUserSelector` id suffix so no other
   inputs on those pages — or the same control on other pages — are affected.
   :not(:focus) leaves the base focus rule (blue border + shadow) intact. */
.leftuser input[id$='tbUserSelector']:not(:focus),
.user-selector-container input[id$='tbUserSelector']:not(:focus) {
  border-color: var(--BorderColorDark);
}

br{
	display:none;
}

select[multiple=multiple] {
    height: auto;
}



input[type=radio] {
  accent-color: var(--ButtonBackgroundColor1);
}

textarea {
  display: inline-block;
  border: solid 1px var(--BorderColorMedium);
  background-color: var(--BackgroundColorCard);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 16px;
  font-size: 16px;
  width: 100%;
  resize: none;

	&:focus {
	  border: solid 1px var(--FocusColor);
	  box-shadow: var(--FocusShadow);
	}
    &:active {
	  border: solid 1px var(--FocusColor);
	  box-shadow: var(--FocusShadow);
	}
}

form#aspnetForm #Header .logo a {
    background-image: var(--LogoImagePath);
	background-size: contain;
	position: relative;
	z-index: 1000;
	width: 200px;
	height: 50px;
	background-repeat: no-repeat;
	/* Horizontal alignment of the logo art within its fixed-width box. Defaults
	   to left; a skin opting into the centered-logo layout sets --logo-align to
	   center so a narrow logo isn't stranded against the left edge. */
	background-position-x: var(--logo-align, left);
	display: inline-block;
}

/* --------------------------------------------------------------------------
   Optional centered-logo layout (opt-in).
   By default the logo is left-aligned with the nav pushed to the right — the
   variables below fall back to no-ops, so every portal's header is unchanged.
   A skin can center the logo across the full header width (both logged-in and
   logged-out) by setting these on :root, e.g. styles/skins/BCBS/modern-style.css:
       --logo-align: center;
       --logo-position: absolute;
       --logo-left: 50%;
       --logo-transform: translateX(-50%);
       --header-options-margin-left: auto;
   Absolute positioning takes the logo out of the flex flow, so the logged-in
   nav no longer gets pushed over by the logo's margin — --header-options-margin-left
   restores it to the right edge.
   -------------------------------------------------------------------------- */
form#aspnetForm #Header {
	position: relative;
}
form#aspnetForm #Header .logo {
	position: var(--logo-position, static);
	left: var(--logo-left, auto);
	transform: var(--logo-transform, none);
}

/* initialize layout scaffolding*/
/* main form holds everything (logged in)*/
body:not(.Loggedout) form#aspnetForm {
  position: relative;
  display: grid;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  grid-template-columns: auto 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas: "header header" "main-nav main-content";
  /* main nav */
  /* MAIN CONTENT */
  /* mobile nav style */

	& #Header {
	  grid-area: header;
	  width: 100%;
	  height: var(--header-height);
	  border-bottom: solid 3px var(--BorderColorLight);
	  background-color: var(--header-bg-color);
	  display: flex;
	  align-items: center;
	  padding: 0 20px;
	  gap: 16px;
	  /* RIGHT MENU */

		& .logo {
		    margin-right: auto;

		    
		}

		& .HeaderOptions {
		  display: flex;
		  justify-content: right;
		  align-items: center;
		  padding: 0 0 0 20px;
		  /* No-op by default; the centered-logo layout sets this to auto so the
		     nav returns to the right edge once the logo leaves the flex flow. */
		  margin-left: var(--header-options-margin-left, 0);
		  color: var(--HeaderTextColor);
		  gap: 12px;
		  /*remove from parents*/

			& #ProfileLink,
			& #BadgeLink,
			& .HorizontalMenu,
			& #horizontalmenu {
			  display: contents;
			}

			& .HorizontalMenuSeparator {
			  display: none;
			}

			& a {
			  color: var(--HeaderTextColor);
			  text-decoration: none;
			  font-size: 14px;
			  display: inline-block;
			  background-color: transparent;
			  padding: 6px 10px;
			  border-radius: 4px;
			  transition-duration: 0.2s;

				&:hover {
				  background-color: var(--HeaderItemHoverColor);
				}
			}
		}

		& #mobile_menu_button {
		  font-size: 14px;
		  align-items: center;
		  padding: 12px;
		  border-radius: 4px;
		  transition-duration: 0.2s;
		  color: var(--HeaderTextColor);

			&:hover {
			  cursor: pointer;
			  background-color: var(--HeaderItemHoverColor);
			}

			&::before {
			  font: var(--fa-font-solid);
			  font-size: 1em;
			  text-rendering: auto;
			  -webkit-font-smoothing: antialiased;
			  display: inline-block;
			  content: "\f0c9";
			  margin-right: 8px;
			  font-size: 20px;
			}

			&.open::before {
			  content: "\f00d";
			}
		}
	}
	
	& #NavBar {
	  grid-area: main-nav;
	  display: flex;
	  font-size: 16px;
	  transition-duration: 0.2s;
	  width: var(--sidenav-width);
	  transform-origin: center left;
	  /* sit above main-content (e.g. .ajax__tab_body is z-index:1000) so the
	     admin flyout menu, which escapes the nav via left:100%, is not occluded */
	  z-index: 1001;

		& .lv_loggedin {
		  border-right: solid 1px var(--BorderColorLight);
		  background: var(--BackgroundColorCard);
		  padding: 20px 14px 20px 0;
		  display: flex;
		  flex-direction: column;
		  height: 100%;
		  width: var(--sidenav-width);

			& li {
			  margin-bottom: 2px;
			}

			& li a {
			  display: flex;
			  align-items: center;
			  gap: 14px;
			  text-decoration: none;
			  color: var(--TextColorSecondary);
			  font-size: 16px;
			  font-weight: 500;
			  padding: 10px 14px 10px 22px;
			  transition: all 0.2s ease;
			  border-radius: 0 10px 10px 0;
			  position: relative;

				&:hover {
				  color: var(--TextColorPrimary);
				  background-color: var(--neutral-50);
				}

				&.selected {
				  background-color: var(--brand-500);
				  color: var(--TextColorWhite);
				  font-weight: 600;
				}

				&.selected::after {
				  content: "";
				  position: absolute;
				  left: 0;
				  top: 6px;
				  bottom: 6px;
				  width: 3px;
				  border-radius: 0 3px 3px 0;
				  background: #fff;
				}

				&::before {
				  font: var(--fa-font-solid);
				  font-size: 15px;
				  text-rendering: auto;
				  -webkit-font-smoothing: antialiased;
				  display: inline-block;
				  content: "\f015";
				  width: 20px;
				  text-align: center;
				  flex-shrink: 0;
				  opacity: 0.7;
				  transition: opacity 0.2s ease;
				}

				&:hover::before,
				&.selected::before {
				  opacity: 1;
				}

				&.Certifications_Link::before {
				  /* fa-award (Free). Was \f5f3 (fa-file-certificate), a Pro-only glyph
				     that renders as a placeholder box under the Free Font Awesome set. */
				  content: "\f559";
				}
				&.Transcript_Link::before {
				  content: "\f0ae";
				}
				&.Event_Calendar_Link::before {
				  content: "\f783";
				}
				&.Resources_Link::before {
				  content: "\f5fd";
				}
				&.Chat_Link::before {
				  content: "\f075";
				}
				&.Communications_Link::before {
				  content: "\f075";
				}
				&.Manager_Dashboard_Link::before {
				  content: "\f200";
				}
				&.ReportingLink::before {
				  content: "\f080";
				}
				&.AspNet-Menu-Link::before {
				  content: "\f013";
				}
			}

			& ul.admin_menu {
			  margin-top: auto;
			  padding-top: 12px;
			  border-top: 1px solid var(--BorderColorLight);
			}
		}

		& .adminMenu .AspNet-Menu-WithChildren {
		  position: relative;

			& > ul {
			  visibility: hidden;
			  opacity: 0;
			  transition: visibility 0s linear 200ms, opacity 150ms linear 200ms;
			  position: absolute;
			  bottom: 0;
			  z-index: 2;
			  left: 100%;
			  background-color: var(--BackgroundColorCard);
			  width: var(--sidenav-width);
			  border: 1px solid var(--BorderColorLight);
			  border-radius: 10px;
			  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
			  padding: 6px;

				& li {
				  float: none;

					& a {
					  padding: 9px 12px !important;
					  border-radius: 8px !important;
					  font-size: 14px;

						&:not(:last-of-type) {
						  border-bottom: none;
						}

						&:hover {
						  background-color: var(--neutral-50);
						}

						&::before {
						  content: "";
						  margin: 0;
						  width: 0;
						}
					}
				}
			}

			&:hover > ul {
			  visibility: visible;
			  opacity: 1;
			  transition: visibility 0s, opacity 150ms;
			}
		}
	}

	& #MainMasterContent {
			--top-padding:20px;
		  grid-area: main-content;
		  height: calc(100vh - var(--header-height));
		  overflow-y: auto;
		  padding: var(--top-padding) 64px 0;
		  /* media queries */
	
			 & span.headline {
			  font-weight: 700;
			  display: block;
			  font-size: 1.96rem;
			  margin: 1.96rem 0 0.6533333333rem;
			}

		& .MainContentWrapper{
			margin-bottom:auto;
			display:flex;
			flex-direction:column;
		}
	}
}

@media (max-width: 600px) {
	  body:not(.Loggedout) form#aspnetForm #Header {
	    padding: 0 12px !important;
}
}

@media (max-width: 1024px) {
  body:not(.Loggedout) form#aspnetForm #Header .HeaderOptions {
    display: none;
  }
}

@media (max-width: 1024px) {
  body:not(.Loggedout) form#aspnetForm #Header #mobile_menu_button {
    display: flex;
  }
}

/*---------------------------------------------------------------------------------------------------------------------------------- PICK UP HERE*/

@media (max-width: 1024px) {
  body:not(.Loggedout) form#aspnetForm #MainMasterContent {
    padding: 20px 20px 0;
  }
}
@media (max-width: 1024px) {
  body:not(.Loggedout) form#aspnetForm {
    display: block;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar {
    position: absolute;
    height: calc(100vh - var(--header-height));
    top: var(--header-height);
    width: 100vw;
    background-color: white;
    justify-content: center;
    overflow-y: auto;
    display: none;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar.open {
    display: block;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin {
    width: 100%;
    border: none;
    padding: 10px;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu {
    margin-top: 30px;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 8px;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.account_menu::before {
    content: "account";
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: var(--neutral-700);
    display: block;
    margin-left: 16px;
    position: absolute;
    top: -24px;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu::before {
    content: "admin";
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: var(--neutral-700);
    display: block;
    margin-left: 16px;
    position: absolute;
    top: -24px;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.main_menu::before {
    content: "main areas";
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: var(--neutral-700);
    display: block;
    margin-left: 16px;
    position: absolute;
    top: -24px;
  }

  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.adminMenu,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu .AspNet-Menu-Horizontal,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu ul.AspNet-Menu,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.AspNet-Menu-WithChildren,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.AspNet-Menu-WithChildren > ul {
    display: contents;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.adminMenu li,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu .AspNet-Menu-Horizontal li,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu ul.AspNet-Menu li,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.AspNet-Menu-WithChildren li,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.AspNet-Menu-WithChildren > ul li {
    visibility: visible;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.adminMenu li a,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu .AspNet-Menu-Horizontal li a,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu ul.AspNet-Menu li a,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.AspNet-Menu-WithChildren li a,
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.AspNet-Menu-WithChildren > ul li a {
    display: block;
    text-decoration: none;
    color: var(--neutral-900);
    padding: 10px 10px !important;
    border-radius: 8px !important;
    border: none;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin ul.admin_menu li.AspNet-Menu-WithChildren > a.AspNet-Menu-Link {
    display: none;
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin li a {
    display: block;
    text-decoration: none;
    color: var(--neutral-900);
    padding: 10px 10px;
    border-radius: 8px;
    background-color: var(--neutral-50);
  }
  body:not(.Loggedout) form#aspnetForm #NavBar .lv_loggedin li a::before {
    margin: 0;
    content: "" !important;
    width: 0;
  }
}

/*end resp*/

#MainMasterContent {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}


.ppgTooltip {
    padding: 0.5em;
    display: block;
    width: auto;
    max-width: 18em;
    background: var(--TooltipColorBg);
    border: solid 1px var(--BorderColorMedium);
    opacity: 0.9;
    margin-left: -5em;
    z-index: 10001;
    -moz-box-shadow: 0.5em 0.5em 0.5em #000;
    -webkit-box-shadow: 0.5em 0.5em 0.5em #000;
    box-shadow: 0.5em 0.5em 0.5em #000;

	& .help {
        font-size: 0.75em;
    }
}

    

/*--------------------------------------------------- RESOURCES */
.resources_aspx .MainContentWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;

	& .ResourcePageLinks {
	  display: flex;
	  border-bottom: solid 1px var(--neutral-200);
	  align-items: baseline;

		& a {
		  text-decoration: none;
		}

		& .type {
		  margin-left: auto;
		  text-transform: uppercase;
		  color: var(--neutral-500);
		  font-size: 14px;
		  font-weight: 700;
		}
	}
}




.footer {
  margin: 20px 0 0 0 !important;
  background-color: var(--BorderColorMedium);
  font-size: 14px;
  padding: 10px;
  border-radius: 8px 8px 0 0;

	& .contacttext {
	  padding: 0;
	}

	& .leftcontact {
	  display: flex;
	  justify-content: center;
	}
	& .navheader {
	  font-weight: bold;
	  margin-right: 4px;
	}
}



/*logged out / sign-in screen*/
.default_aspx.Loggedout form#aspnetForm #mobile_nav_button, 
.default_aspx.Loggedout form#aspnetForm .HeaderOptions {
  display: none !important;
}



@media (max-width: 600px) {
  .Loggedout form#aspnetForm #Header {
    padding: 0 12px !important;
  }
}


.Loggedout form#aspnetForm{ 

	display: block;
	
	& #Header {
	  height: var(--header-height);
	  border-bottom: solid 3px var(--BorderColorLight);
	  background-color: var(--header-bg-color);
	  display: flex;
	  align-items: center;
	  padding: 0 20px;
	  justify-content: center;
	  align-items: center;
	  
		&	#mobile_menu_button {
		  display: none;
		}
	}
	
	& #PageDescription {
	  display: none;
	}
	
	& #MainMasterContentWraper {
	  width: 100%;
	  max-width: 500px;
	  padding: 20px;
	  margin: 0 auto;
	  background-color: var(--BackgroundColorCard);
	  border-radius: 8px;
	  box-shadow: 0px 3px 0px 0px var(--BorderColorMedium);
	}
}

/* recover password */
.recoverpassword_aspx,
.recoverusername_aspx{
	
	& table, 
	& tr, 
	& tbody {
	  display: contents;
	}

	& td {
	  display: block;
	  width: 100% !important;
	}

	& .HeaderOptions {
	  display: none;
	}

	& #MainMasterContent{
		& input[type=text] {
		  width: 100% !important;
		}

		& [id*=Label] {
		  font-size: 14px;
		  margin-bottom: 5.3333333333px;
		  display: block;
		  font-weight: 700;
		}

		& .button,
		& [id*=findUsername]{
			 width: 100%;
			  padding: 10px;
			  background-color: var(--ButtonBackgroundColor1);
			  display: inline-block;
			  text-transform: uppercase;
			  border-radius: 4px;
			  color: white;
			  font-weight: 700;
			  letter-spacing: 1px;
			  font-size: 14px;
			  margin-bottom: 2em;
			  transition-duration: 0.2s;

			&:hover {
			  cursor: pointer;
			  background-color: var(--ButtonBackgroundHoverColor1);
			}
		}

		& span:not([id*=Label]) {
		  display: block;
		  margin-bottom: 24px;
		  
		}

		& span:has(input[type=text]) {
		  margin-bottom: 0;
		}

		& [id*=ReturnToHome] {
		  width: auto !important;
		  padding: 5px;
		  background: none;
		  border: none;
		  color: var(--ButtonBackgroundColor1);
		  font-weight: 700;

			&:hover {
			  cursor: pointer;
			}
		}
	}
}

#ctl01_ContentPlaceHolder1_lastNameTextBoxField, #ctl01_ContentPlaceHolder1_emailTextBoxField {
    display: inline !important;
}


.recoverpassword_aspx .HeaderOptions {
  display: none;
}
.recoverpassword_aspx #MainMasterContent .rightRegister {
  font-size: 14px;
  margin-bottom: 5.3333333333px;
  display: block;
  font-weight: 700;
  margin-top: 20px;
}


/* register page */
.register_aspx {
  & #LoginPanel {
    display: none;
  }

  & #ctl00_ContentPlaceHolder1_SystemGeneratedNameNotificationPanel {
    width: 100% !important;
    max-width: 480px !important;
  }

  & #ctl00_ContentPlaceHolder1_SystemGeneratedNameNotificationLabel {
    margin-bottom: 20px;
    display: block;
  }

  & #ctl00_ContentPlaceHolder1_PasswordTextBox_TextBox_PasswordStrength {
    margin-top: 25px;
  }

  & #MainMasterContentWraper:has([id*=FirstNameTextBox]) {
    max-width: 1450px !important;
    margin: 20px auto;

    @media (max-width: 950px) {
      max-width: 800px !important;
    }
  }

  & #PageContent:has([id*=FirstNameTextBox]) {
    display: block;
    max-width: 100%;

    & .wrapper {
      display: grid !important;
      grid-template-areas:
        "title title"
        "req validation"
        "npn form";
      grid-template-columns: 400px 1fr;
      gap: 8px 20px;

      & > h2 {
        grid-area: title;
      }

      & [id*=requiredFieldString] {
        grid-area: req;
      }

      & [id*=ValidationSummary] {
        grid-area: validation;
      }

      & [id*=UserMatching_FMU_RegisterPanel] {
        grid-area: npn;
      }

      & [id*=RegistrationPanel] {
        grid-area: form;
      }

      & #content {
        display: contents;
      }

      @media (max-width: 950px) {
        display: block !important;
      }
    }
  }

  & [id*=SpecifyMedicareProgramPanel] {
    display: none;
  }

  & [id*=AddNewUserButton] {
    width: 100%;

    &:hover {
      cursor: pointer;
      background-color: var(--ButtonBackgroundHoverColor1);
    }
  }

  & [id*=PasswordPanel] {
    & strong {
      display: none;
    }

    & [id*=PasswordInstructionalText] {
      display: block;
      margin-bottom: 16px;
    }
  }

  /* Agreements panel: stack the NIPR terms PDF, the "Terms and Conditions"
     label and the agreement radio buttons in a single left-aligned column so
     there is no empty gap beside the document. The PDF is injected as an
     inline <object id="myPdf"> in Register.aspx.cs and the markup lists the
     label before it, so we reorder with flex order to put the PDF on top. */
  & .PersonalDisclosureWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    & object,
    & #myPdf {
      order: 1;
      display: block;
      margin: 0 0 12px;
      max-width: 100%;
    }

    & > strong {
      order: 2;
    }

    & > div:has(.PDAgreementRadioButtonList) {
      order: 3;
    }

    & > span {
      order: 4;
    }

    & > br {
      display: none;
    }

    & .PDAgreementRadioButtonList {
      margin-top: 8px;
    }
  }
}

/* pre-reg form */
.preregistration_aspx.Loggedout,
.preregistration_aspx,
.register_aspx.Loggedout {
  & form#aspnetForm {
    display: flex;
    flex-direction: column;

    & .HeaderOptions,
    & .mobile_only.nav_button {
      display: none;
    }

    & h1 {
      display: none;
    }

    & .nav {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin: 0 0 48px;
    }

    & .NavHeader {
      font-weight: 700;
    }

    & .ShowContactInfoBeforeLogin {
      text-align: center;
    }

    & p {
      margin-top: 0 !important;
    }

    & td > div > div:has([id*=_btnResendAccessCodeShow]) {
      border-bottom: solid 1px var(--BorderColorLight);
      padding-bottom: 12px;
      margin-bottom: 24px;
    }

    & table,
    & tr,
    & tbody {
      display: contents;
    }

    & td {
      display: block;
      width: 100% !important;
    }

    & .notice {
      padding: 0;

      & + div {
        order: 20;

        & > div {
          position: relative !important;
          top: auto !important;

          & p {
            font-size: 14px;

            & a {
              color: var(--ButtonBackgroundColor1);
            }
          }
        }
      }
    }

    & #PageContent {
      display: flex;
      flex-direction: column;

      & > .wrapper {
        display: contents;
      }

      & .CustomClientPanel {
        display: contents;
      }
    }
  }
}

#ctl01_ContentPlaceHolder1_SystemGeneratedNameNotificationPanel {
    width: auto !important;
}

#ctl01_ContentPlaceHolder1_SystemGeneratedNameNotificationPanel { display: flex; flex-direction: column; gap: 10px }


/* profile and reg forms */
.form-section, .AgreementsPanel {
  background-color: var(--BackgroundColorCard);
  border-radius: 8px;
  border: solid 1px var(--BorderColorLight);
  padding: 24px;
  max-width: 1000px;
  container: form-section/inline-size;
  margin-bottom: 8px;

  &:not(:has(*)) {
    display: none;
  }

  & .form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;

    & > div {
      align-self: end;
    }

    & > div:not([class]) {
      grid-column: 1 / -1;
    }

    & .sp-5 {
      grid-column: span 5;
    }

    & .prof-em,
    & .prof-cem,
    & .sp-6 {
      grid-column: span 6;
    }

    & .prof-fn,
    & .prof-ln,
    & .sp-4 {
      grid-column: span 4;
    }

    & .prof-suf,
    & .prof-mi,
    & .sp-2 {
      grid-column: span 2;
    }

    & .sp-10 {
      grid-column: span 10;
    }

    & .sp-12 {
      grid-column: span 12;
    }

    & .prof-addy,
    & .prof-addy2,
    & .prof-city {
      grid-column: span 6;
    }

    & .prof-state {
      grid-column: span 4;
    }

    & .prof-zip {
      grid-column: span 2;
    }

    & .important {
      grid-column: span 12;
      display: inline-block;
    }

    & .prof-password {
      grid-column: span 12;
    }

    & [id*=ChangePassword] {
      grid-column: span 12;
    }
  }
}

.NPNCRDUserControl,
.OptionalFields,
.CustomClientPanel > div {
  background-color: var(--BackgroundColorCard);
  border-radius: 8px;
  border: solid 1px var(--BorderColorLight);
  padding: 24px;
  max-width: 1000px;
  margin-bottom: 8px;
}

/* Some <asp:Panel> wrappers (e.g. RegistrationAccessCodePanel) sit inside a
   <table> wrapping <tr> rows. That's invalid HTML, so the browser foster-parents
   the panel's <div> out of the table, leaving an empty <div> that the rule above
   paints as a stray empty card. Hide any such empty card. */
.CustomClientPanel > div:not(:has(*)) {
  display: none;
}

/* The NPN/CRD control's inner panels all default to Visible="false" and turn on
   only when an NPN or CRD entry is required. When neither is (e.g. BCBS Arizona)
   the control renders nothing, leaving an empty <div class="NPNCRDUserControl">
   that the rule above still paints as a stray blank card. Hide it when it has
   no rendered children. */
.NPNCRDUserControl:not(:has(*)) {
  display: none;
}

.prof-notification {
  grid-template-columns: none !important;
  margin-top: 20px;
}

/*--------------------------------------------------- change password */
.changepassword_aspx {
  & div.default {
    width: 100%;
    margin: 16px auto;
    max-width: 600px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;

    & table,
    & tr,
    & tbody {
      display: contents;
    }

    & td {
      display: block;
    }

    & h1 {
      margin-top: 0;
    }

    & .rightregister {
      font-size: 14px;
      margin-bottom: 5.3333333333px;
      display: block;
      font-weight: 700;
      width: 100%;
    }

    & a {
      width: auto !important;
      display: inline-block;
      margin-right: 24px;
    }
  }
}

@container form-section (width < 600px) {
  .form-grid {
    display: block !important;
  }
}

/* media queries */
@media (min-width: 1024px) {
  .mobile_only {
    display: none;
  }
}

/* user selection dropdown */
ul.UserSelector {
  box-shadow: 0 3px 3px 0px var(--neutral-500);

  & li {
    padding: 8px !important;

    &:hover {
      background-color: var(--neutral-200) !important;
      cursor: pointer;
    }
  }
}

/*----------------------------------------------------- HOME PAGE ------------------*/
.default_aspx {
  & p.homepage {
    display: none;
  }

  & .homepageheader {
    font-weight: 700;
    display: block;
    font-size: 1.96rem;
    margin: 1.96rem 0 0.6533333333rem;
  }

  & .ButtonGroup1,
  & .ButtonGroup2 {
    display: flex;
    gap: 24px;
    padding-top: 40px;
    flex-wrap: wrap;
  }

  & .ButtonNavCenteredContainer {
    width: auto !important;
	  display:grid;
		grid-template-columns:1fr 1fr;
		gap:24px;
		
		& .HomePageHeader{
			grid-column:span 2;
		}
		
		& .ButtonGroup1, & .ButtonGroup2{
			display:contents;
		}

	  @media (max-width:650px){
			grid-template-columns:1fr;
			
			& .HomePageHeader{
			 grid-column:span 1;
		  }
		}
  }

  & .HomeNavIcons {
    flex: 1 400px;

    & a {
      background-color: white;
      text-decoration: none;
      color: var(--brand-500);
      display: inline-block;
      text-align: left;
      font-size: 18px;
      width: 100%;
      font-weight: 700;
      font-family: var(--FontFamilySecondary);
      padding: 24px;
      height: 100%;
      border: solid 1px var(--neutral-200);
      border-radius: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.04);
      transition: all 0.25s ease;

      &:hover {
        border-color: var(--brand-400);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
        transform: translateY(-2px);
      }

      &:after {
        display: block;
        padding: 12px 0 0;
        color: var(--neutral-600);
        font-size: 0.9rem;
        font-weight: 400;
        font-family: var(--FontFamilyPrimary);
        line-height: 1.5;
      }
    }

    &.Learning_Icon {
      & a:after {
        content: "" !important;
      }
    }

    &.Transcript_Icon {
      & a:after {
        content: "" !important;
      }
    }

    &.Certifications_Icon {
      & a:after {
        content: "" !important;
      }
    }

    &.Event_Calendar_Icon {
      & a:after {
        content: "" !important;
      }
    }

    &.Resource_Library_Icon {
      & a:after {
        content: "" !important;
      }
    }

    &.Reporting_Icon {
      & a:after {
        content: "" !important;
      }
    }

    &.Admin_Icon {
      & a:after {
        content: "" !important;
      }
    }
  }

  & [id*=_CopyRightPanel] {
    margin-top: 40px;

    & > div {
      margin: 0 !important;
    }
  }

  /* ── DefaultExtras 3-panel layout ── */
  & .DefaultExtrasPanelsTable {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    width: 100%;
    margin-top: 8px;

    & > tbody,
    & > tbody > tr {
      display: contents;
    }

    @media (max-width: 960px) {
      grid-template-columns: 1fr;
    }
  }

  /* ── Panel cards ── */
  & .MainPageArea {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.04);
    overflow: hidden;
    padding: 0 !important;

    & .itemname {
      display: block;
      background: var(--brand-500);
      color: var(--TextColorWhite);
      padding: 16px 24px;
      font-family: var(--FontFamilySecondary);
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: 0.01em;
      border: none;
      border-bottom: 3px solid var(--brand-600);

      & span {
        color: inherit;
      }
    }

    & .itemdata {
      padding: 20px 24px;
      font-family: var(--FontFamilyPrimary);
      font-weight: 400;
      font-size: 0.95rem;
      color: var(--TextColorPrimary);
      background: #fff;
      border: none;
      height: auto;
      min-height: 200px;
      overflow: auto;
      white-space: normal;

      & a {
        color: var(--LinkColor);
        text-decoration: none;
        font-weight: 600;

        &:hover {
          color: var(--LinkHoverColor);
          text-decoration: underline;
        }
      }
    }
  }

  /* ── Certification status progress bars ── */
  & .TriPanelPanel {
    & .meter {
      font-family: var(--FontFamilyPrimary);
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--TextColorPrimary);
      margin-bottom: 6px;
      width: 100%;
    }

    & .meter-wrap {
      position: relative;
      overflow: hidden;
      height: 22px;
      width: 100%;
      background: var(--neutral-200);
      border-radius: 11px;
      margin-bottom: 4px;
    }

    & .meter-value {
      height: 22px;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--brand-500), var(--brand-400)) !important;
      transition: width 0.6s ease;
    }

    & .meter-value-color {
      background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    }

    & .meter-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 22px;
      line-height: 22px;
      text-align: center;
      color: #fff;
      font-family: var(--FontFamilyPrimary);
      font-size: 0.75rem;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    & .NextCourseTable {
      margin-top: 6px;
      font-size: 0.85rem;

      & .NextCourseHeader {
        color: var(--TextColorMuted);
        font-weight: 600;
        white-space: nowrap;
        padding-right: 6px;
      }

      & a {
        color: var(--LinkColor);
        font-weight: 600;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    & .HomePageComingSoon {
      color: var(--neutral-500);
      font-style: italic;
      font-size: 0.85rem;
    }

    & > div > div.inner > span + div {
      height: 14px;
    }
  }

  /* ── Middle panel event calendar ── */
  & .DefaultExtraSessionHeader {
    font-family: var(--FontFamilyPrimary);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--TextColorPrimary);
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--neutral-200);
    margin-bottom: 8px;
  }

  & .DefaultExtraSessionViewAllContainer {
    text-align: right;
    padding-top: 16px;

    & a {
      font-weight: 700;
      font-size: 0.9rem;
    }
  }

  /* ── Page description / welcome area ── */
  & .defaultback {
    background: none !important;
    border: none !important;
    padding: 0;
    margin-bottom: 8px;

    & .t, & .b, & .l, & .r,
    & .bl, & .br, & .tl, & .tr {
      background: none !important;
      padding: 0;
    }
  }

  & [id*=_content_NotesPanel] {
    font-family: var(--FontFamilyPrimary);
    font-size: 1rem;
    color: var(--TextColorSecondary);
    line-height: 1.6;
  }

  /* ── Editable region label overrides ── */
  & .EditableRegion1Header_Label,
  & .EditableRegion2Header_Label,
  & .EditableRegion3Header_Label,
  & .EditableRegion4Header_Label {
    font-family: inherit;
    color: inherit;
    font-size: inherit;
  }

  /* ── Slideshow container ── */
  & [id*=uxSlideshowRegion4] {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;

    & img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }
  }
}

/* -----------------------------------------------------------------------BASE STYLES  */
* {
  box-sizing: border-box;
}



/* set fonts */
body {
  background-color: var(--BackgroundColorPage);
  font-family: var(--FontFamilyPrimary) ;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: var(--TextColorPrimary);
}

h1, .headline, .HomePageHeader {
  font-size: 1.96rem;
  margin: 16px 0;
	font-family:var(--FontFamilySecondary);
}

h2 {
    font-size: 1.4rem;
    margin-top: 16px;
    margin-bottom: 16px;
	font-weight:600;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 4px;
  font-weight: 700;
}

p {
  max-width: 75ch;
  padding-bottom: 1em;
  line-height: 1.3;
}

.empty {
  padding: 0;
}

span {
  line-height: 1.3;
}
span.small {
  font-size: 14px;
  display: block;
  margin-bottom: 12px;
}

.error {
  color: var(--TextColorError);
  background-color: var(--BackgroundColorError);
  border: solid 1px var(--BackgroundColorErrorBorder);
  border-radius: 4px;
  padding: 2px;
}

.error:has(.empty) {
  padding: 0;
}

a:link {
  color: var(--LinkColor);
  text-decoration: none;
}

a:hover {
  color: var(--LinkHoverColor);
  text-decoration: underline;
}

div #LoginPanel input[type="button"],
div #LoginPanel input[type="submit"]{
	width: 100% !important;
}

.hideMe {
  display: none;
}

.card-me {
  background-color: var(--BackgroundColorCard);
  padding: 10px;
  border: solid 1px var(--BorderColorLight);
  border-radius: 8px;
}

#PageContent {
  max-width: 1000px;
}

.disclaimer {
  font-size: 12px;
  padding: 8px 0;
  display: inline-block;
}

/* cert upload */
html:has(.med_cert_upload_body) {
  background-color: var(--BackgroundColorPage);
  padding: 10px;
}

/* title is injected via .cert_upload_instructions:before below; hide the
   page's own h1 to avoid a duplicate heading in modern styling */
.med_cert_upload_body .cert-upload-title {
  display: none;
}

.med_cert_upload_body {
  background-color: var(--BackgroundColorCard) !important;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  margin: 20px auto;
  /*vendor select*/
  /*upload button div*/

  & table,
  & tr,
  & tbody {
    display: contents;
  }

  & td {
    display: block;
    width: 100% !important;
  }

  & [id*=Label] {
    font-size: 14px;
    margin-bottom: 5.3333333333px;
    display: block;
    font-weight: 700;
  }

  & .UploadInstructions:not([id*=Label]) {
    margin-bottom: 24px;
    margin-top: -16px;
    font-size: 14px;
    display: block;
  }

  & #cUpload_VendorLabel {
    margin-top: 24px;
  }

  & .cert_upload {
    margin: 16px 0;

    & ~ i {
      font-size: 14px;
      display: block;
      margin: 16px 0;
    }
  }

  & #cUpload_MCSNote {
    font-size: 14px;
    display: block;
    margin: 16px 0;
  }

  & .cert_upload_instructions {
    margin-bottom: 16px;

    &:before {
      content: "Upload Certificate";
      font-size: 32px;
      display: block;
      margin-bottom: 16px;
    }
  }
}

/* -----------------------------------------------------------------------LOGIN FORM  */
.default_aspx.Loggedout {
  & #LoginPanel {
    & .RegisterTextFirstTimeText,
    & .RegisterReturningUserText {
      font-weight: 700;
      display: block;
      font-size: 1.4rem;
      margin: 1.4rem 0 0.4666666667rem;
      text-align: center;
    }

    & #FirstTimeVisitors {
      border-bottom: solid 1px var(--BorderColorMedium);
    }

    & .nav {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin: 0 0 48px;
    }

    & .NavHeader {
      font-weight: 700;
    }

    & .ShowContactInfoBeforeLogin {
      text-align: center;
    }
  }
}

/* -------------------------------------------------------------- MAINTENANCE MODE (logged out) */
/* When the login UI is replaced by the maintenance message, enlarge the card and nudge it down
   from the header. The :has() match only applies while the maintenance panel is rendered. */
.Loggedout form#aspnetForm #MainMasterContentWraper:has(.MaintenanceModePanel) {
  max-width: 640px;
  margin-top: 80px;
  padding: 48px 40px;
}

.MaintenanceModePanel {
  text-align: center;

  & .MaintenanceModeMessage {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--TextColorPrimary);
  }
}

.npnrightProfileMin {
  font-size: 14px;
  margin-bottom: 5.3333333333px;
  display: block;
  font-weight: 700;
}

/*--------------------------------------------tracks */
.myTraining_aspx {
  & h3 {
    margin-bottom: 0;
    position: relative;

    &:before {
      content: "\f0d7";
      font: var(--fa-font-solid);
      display: inline-block;
      position: absolute;
      font-size: 16px;
      top: calc(50% - 10px);
      left: 14px;
    }

    &.closed:before {
      content: "\f0da";
    }
  }

  & .no-tracks {
    background-color: var(--neutral-200);
    padding: 10px;
    border-radius: 4px;
    border: solid 1px var(--BorderColorMedium);
    margin-top: 16px;
    text-align: center;
    color: var(--neutral-600);
    transition-duration: 0.2s;

    &:has(.loader) {
      background-color: var(--neutral-200);
      border: solid 1px var(--LinkColor);
      color: var(--LinkColor);
      display: flex;
      align-items: center;
      gap: 16px;
      justify-content: center;
    }

    & .loader {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      animation: rotate 1s linear infinite;

      &:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 3px solid var(--LinkColor);
        animation: prixClipFix 2s linear infinite;
      }
    }
  }

  &.Certifications {
    & .user-selector-container {
      display: none;
    }
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

[id*=tbTrackHeader],
.track {
  background-color: var(--AccordianContent);
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
}

[id*=tbTrackHeader] {
  margin-top: 16px;
  padding: 14px 24px;
  font-size: 16px;
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--BorderColorLight);
  border-bottom: 1px solid var(--BorderColorLight);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  background-color: var(--AccordianHeader);

  &:hover {
    cursor: pointer;
  }
}

[id*=tbTrack] {
  padding-left: 13px;
}

[id*=pnlTrack] {
  background-color: var(--AccordianContent);
}

.track {
  border: 1px solid var(--BorderColorLight);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 6px 14px rgba(0,0,0,0.03);
  padding: 4px 4px 12px;
}


@media (max-width: 600px) {
  .CourseList {
    & tr {
      width: calc(100% - 12px) !important;
      margin-left: 12px !important;
    }
  }

  #MainMasterContent {
    padding: 12px !important;
  }
}

/*---------------------------------------------track listing*/
.track {
  & table {
    width: 100%;
  }

  & thead {
    display: none;
  }

  & h2 {
    margin-bottom: 0;
  }

  & tr {
    display: grid;
    width: calc(100% - 20px);
    grid-template-columns: 30px 70px 1fr;
    grid-template-areas:
      "check title title"
      "blank status c-date"
      "blank action action";
    padding: 10px 90px 10px 0;
    margin-left: 20px;
    position: relative;

    & a {
      text-decoration: none;
      display: inline-block;
      padding-bottom: 4px;

      &:hover {
        text-decoration: underline;
      }
    }

    &:not(:last-child) {
      border-bottom: solid 1px var(--BorderColorLight);
    }

    & .check {
      grid-area: check;
      padding-top: 4px;
    }

    & .course_name {
      grid-area: title;
      font-size: 18px;

      &.noLink {
        font-weight: 500;
      }

      /* "Coming Soon" / "No Longer Available" suffixes are shown in red */
      & .ComingSoonStyle,
      & .NotAvailableStyle {
        display: inline;
        color: #dc2626;
        font-weight: 600;
      }

      /* These courses aren't launchable — don't look clickable */
      &:has(.ComingSoonStyle) a,
      &:has(.NotAvailableStyle) a {
        cursor: default;

        &:hover {
          text-decoration: none;
        }
      }

      & h2 {
        font-size: 18px;

        & ~ a {
          display: none;
        }
      }

      & .Notes:has(a) {
        background-color: var(--neutral-50);
        display: inline-block;
        padding: 8px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 4px;
        margin-bottom: 4px;

        /* the inline anchor (e.g. "Switch to Pinpoint...") must read as a link */
        & a {
          color: var(--LinkColor);
          text-decoration: underline;
          padding-bottom: 0;
        }
      }
    }

    & .completionstatus {
      grid-area: status;
      font-size: 14px;
    }

    & .comments,
    & .req_state,
    & .likes {
      display: none;
    }

    & .datecompleted {
      grid-area: c-date;
      font-size: 14px;
    }

    &:has([data-ContentType]) {
      &:before {
        text-align: right;
        content: "COURSE";
        position: absolute;
        right: 16px;
        top: calc(50% - 7px);
        font-weight: bold;
        font-size: 14px;
        color: var(--neutral-500);
      }
    }

    &:has([data-ContentType*=HTML i]) {
      &:before {
        content: "FORM";
      }
    }

    &:has([data-ContentType*=exam i]) {
      &:before {
        content: "EXAM";
      }
    }

    /* "License Check" items are LINKs; must come last to win over FORM */
    &:has([data-CourseName*="License Check" i]) {
      &:before {
        content: "LINK";
      }
    }
  }
}

/*resources*/
.ResourcePageAccordianHeaderSelected,
.ResourcePageAccordianHeader {
  background-color: white;
  padding: 10px;
  border: solid 1px var(--BorderColorLight);
  font-weight: 700;

  &:hover {
    cursor: pointer;
  }

  & + div {
    background-color: white;
    border: solid 1px var(--BorderColorLight);
    border-radius: 0 0 8px 8px;
  }
}

.ResourcePageAccordianHeaderSelected {
  border-radius: 8px 8px 0 0;

  &:before {
    font: var(--fa-font-solid);
    font-size: 1em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    content: "\f0d7";
    margin-right: 10px;
  }

  & + div {
    margin-bottom: 8px;
  }
}

.ResourcePageAccordianHeader {
  border-radius: 8px;

  &:before {
    font: var(--fa-font-solid);
    font-size: 1em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    content: "\f0da";
    margin-right: 10px;
  }

  /* jQuery UI swaps ui-accordion-header-active on the open pane (the
     ResourcePageAccordianHeaderSelected class is never applied on this path),
     so flip the caret to point down when the pane is expanded. */
  &.ui-accordion-header-active:before {
    content: "\f0d7";
  }

  /* original had: .ResourcePageAccordianHeaderSelected + div, .ResourcePageAccordianHeader { margin-bottom: 8px; } */
  margin-bottom: 8px;
}

.ResourcePageLinks {
  padding: 10px;
}

/* request support */
.help_aspx {
  & table,
  & tr {
    display: contents;
  }

  & .card-me {
    
  }

  & td {
    display: block;
  }

  & input[type=text] {
    margin-bottom: 0;
  }

  & .label {
    font-size: 14px;
    margin-bottom: 5.3333333333px;
    display: block;
  }

  & .AspNet-RadioButtonList-Item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  & .AspNet-RadioButtonList {
    & ul {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;

      & label {
        margin-bottom: 0;
      }
    }
  }
}

/* profile */
.profile_aspx {
  & .npnRegister,
  & .Registration {
    display: none;
  }

  & #PageDescription {
    font-weight: 700;
    display: block;
    font-size: 1.96rem;
    margin: 1.96rem 0 0.6533333333rem;
  }

  & .important {
    display: flex;
    align-items: center;
    background-color: var(--BackgroundColorError);
    color: var(--TextColorError) !important;
    font-size: 12px;
    border: solid 1px var(--BackgroundColorErrorBorder);
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 8px;

    &:before {
      font: var(--fa-font-solid);
      font-size: 1em;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      content: "\f06a";
      font-size: 20px;
      margin-right: 8px;
    }
  }

  & .form-section .form-grid .prof-password {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  & section.section-2-col {
    background-color: var(--BackgroundColorCard);
    border-radius: 8px;
    border: solid 1px var(--BorderColorLight);
    padding: 24px;
    max-width: 1000px;
    container: form-section/inline-size;
    margin-bottom: 8px;

    &:not(:has(*)) {
      display: none;
    }

    & h2 {
      margin-top: 0;
    }

    & .form-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;

      & > div {
        align-self: end;
      }

      & .sp-2  { grid-column: span 2; }
      & .sp-4  { grid-column: span 4; }
      & .sp-5  { grid-column: span 5; }
      & .sp-6  { grid-column: span 6; }
      & .sp-10 { grid-column: span 10; }
      & .sp-12 { grid-column: span 12; }

      & .important {
        grid-column: span 12;
        display: inline-block;
      }
    }
  }
}

.modalpopup {
  box-shadow: var(--ModalShadow);
	background-color:white;
	border: solid 1px var(--BorderColorDark);
  border-radius: 8px;
}

/* nipr lookup */
[id*=panelNpnNiprLookupPopUpId] {
  width: 100%;
  max-width: 600px;
  border: solid 1px var(--BorderColorMedium);
  border-radius: 8px;
  padding: 10px 24px;

  & div:has([id*=cmdClosePopup]) {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
  }

  & .tab-panel {
    & .form-row {
      display: flex;
      gap: 24px;
      padding: 10px;

      & input {
        margin-bottom: 0 !important;
      }

      & select {
        margin-bottom: 0 !important;
      }
    }
  }

  /* The global div.ajax__tab_xp rule hardcodes .ajax__tab_body to 1200px
     (needed for the wide events calendar). Inside this 600px popup that
     overflows and pushes the Reset/Submit buttons off the right edge, so
     constrain the tab body to the popup width here. */
  & .ajax__tab_body {
    width: auto !important;
    max-width: 100%;
  }

  overflow-x: auto;
}

/* corrected from a typo'd id fragment (was "panelNpnNirpLookupPopUpId") */
[id*=panelNpnNiprLookupPopUpId] {
  & div:has([id*=cmdClosePopup]) {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;

    & input {
      width: 30px !important;
      height: 30px;
    }
  }

  & * {
    font-family: var(--FontFamilyPrimary);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
  }

  & .ssnblock {
    white-space: nowrap;
  }

  & [id*=_finalInstruction] {
    display: block;
    margin-bottom: 10px;
  }
}



div.ajax__tab_xp{

	*:not(i) {
		font-family:var(--FontFamilyPrimary) !important;
		font-size:16px;
	  }

	&.ajax__tab_container {
	  margin: 20px 0;
	}

	& .ajax__tab_header{
		display: flex;
	  border-bottom: none;
	  background: none;
			border-bottom:solid 1px var(--BorderColorMedium);
		
	}
	
	& .ajax__tab_body {
	  position: relative;
	  z-index: 1000;
	  border: solid 1px var(--BorderColorMedium);
	  border-radius: 4px;
	  padding: 0;
      width: 1200px;
	}
	
	& .ajax__tab_outer,
	& .ajax__tab_inner,
	& .ajax__tab_tab {
	  display: inline-block;
	  height: 44px !important;
	  background: none !important;
	  border: none;
	  border-bottom: solid 3px transparent;
	  transition: 0.2s;
	  border-radius: 4px 4px 0 0;
	
	  & strong {
	    font-size: 14px !important;
	    font-weight: 500;
	  }
	}
	
	& .ajax__tab_tab {
	  display: flex !important;
	  align-items: center;
		margin:0;
	
	  &:hover {
	    background-color: var(--neutral-50) !important;
	    color: var(--LinkColor);
	  }
	}
	
	& .ajax__tab_active {
	  & .ajax__tab_tab {
	    border-bottom: solid 3px var(--LinkColor);
	    color: var(--LinkColor);
	
	    &:hover {
	      background-color: var(--neutral-50) !important;
	      color: var(--LinkColor);
	    }
	  }
	}
}

.tab-panel {
  & label {
    font-size: 14px !important;
    font-weight: 700;
  }

  & .form-group:has([type=checkbox]) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;

    & label {
      margin: 0;
    }
  }

  & .form-row {
    display: flex;
    gap: 24px;
    padding: 10px;
  }

  & [id*=_tbSsnA] > input {
    width: 6ch !important;
  }

  & [id*=_tbSsnB] > input {
    width: 5ch !important;
  }

  & [id*=_tbSsnC] > input {
    width: 7ch !important;
  }

  & .panel-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: solid 1px var(--neutral-200);
    padding: 2px;

    & input[value=Reset],
    & input[value=Submit] {
      width: auto;
    }
  }
}

/* the popup's bottom action row is <section class="button-section">;
   scope this here so the shared .button-section class on other pages is untouched */
[id*=panelNpnNiprLookupPopUpId] .button-section {
  display: flex;
  gap: 16px;
  padding-top: 10px;
}


/* -------------------------------------------------------------------events */

.ajax__tab_body:has([id*='_EventsCalendarTabPanel']){
	margin-top:12px;
	container: events-table/inline-size;

	& .ajax__tab_panel{
		padding:12px;
	}

	& table.SessionsList{

		--cell-padding:4px 8px;
		width:100%;
		margin-top:24px;

		& .ColumnButtons{
			display:flex;
			align-items:baseline;
			gap:12px;

			& input{
				margin-bottom:0;
			}
		}

		& br{
			display:block;
		}

		& thead th{
			border-bottom:solid 1px var(--BorderColorMedium);
			color:var(--TextColorPrimary) !important;
			font-weight:700;
			padding:var(--cell-padding);

			& a{
				color:var(--TextColorPrimary) !important;
			}
		}

		& tbody td{
			padding:var(--cell-padding);
		}

		& tbody tr:not(:last-of-type) td{
			border-bottom:solid 1px var(--BorderColorLight);
		}

		& span[id*="Notes"]{
			color:var(--TextColorSecondary);
		}
	}

	& #SessionDetailContainer{
		width: 100% !important;
		min-width:400px;
		max-width: 600px;
	}

	& #DetailsHeader{

		display:flex;
		width:100%;
		justify-content:space-between;
		align-items:center;
		font-weight:700;
		padding:0 0 0 12px;
		background-color:var(--neutral-50);
		border-radius:8px 8px 0 0;
		
		& table, 
		& tr,
		& tbody{
			display:contents;
		}

		& td{
			display:block;
			font-weight:700;
		}

		& input{
			color:#fff !important;
			background-color:rgba(255,255,255,0.15) !important;
			border:1px solid rgba(255,255,255,0.3) !important;
			border-radius:999px !important;
			margin-bottom:0;

			&:hover{
				color:#fff !important;
				background-color:rgba(255,255,255,0.3) !important;
			}
		}
		
	}

	& #DetailsHeader + div > table.details{

		display:contents;

		& > tbody{
			display:contents;

			& > tr{
			display:flex;
			width:100%;
			flex-direction:column;
				

				& > td{
					width:100% !important;
					padding:0;

					&:last-of-type{
						padding:20px;

						& a{
							display:inline-block;
							margin-top:12px;
							padding:4px 8px;
							border-radius:4px;
							background-color:var(--brand-100);

							&:hover{
								background-color:var(--brand-200);
							}
						}
					}
				}
			}
			
		}

		& tr:has(input){
			
			& input{
				width:100%;
				margin-bottom:0;
			}
		}

		& table.details{
			display:contents;

			& tbody{
				display:contents;

				& tr{
					display:flex;
					width:100%;
					flex-direction:column;
					gap:4px;
					padding:12px 20px;

					& td{
						width:100%;
						border-bottom:none;
						padding:0;

						&.header{
							font-weight:700;
						}
					}
				}
			}
		}
		
	}

	[id*="_SessionMarketSelection"] div{
		height:auto !important;
		overflow:initial !important;
	}

	& [id*="_MyEventsUpdatePanel"]{
		& .HeaderSessions{
			border-bottom: solid 1px var(--BorderColorDark) !important;

			&:not(:first-of-type){
				margin-top:24px;
			}
		
		}
	}
}

@container events-table (width < 700px) {
  
	  .HeaderMarket,
	  .HeaderTrainers,
	  .ColumnMarket,
	  .ColumnTrainers,
	.HeaderTypeToString,
	.ColumnTypeToString{
		  display:none;
	  }
  
}

.modalBackground{
	backdrop-filter:blur(5px);
}

/* dim the whole page behind the loading spinner */
.progressBack{
	top:0;
	left:0;
	position:fixed;
	width:100%;
	height:100%;
	display:block;
	z-index:10010;
	background-color:rgba(0,0,0,0.4);
}

/* center the loading image over the dimmed page */
.progress{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:10011;
}

/* transcript */
.myTraining_aspx {
  & [id*=REQDiv] {
    display: none;
  }

  & [id*=SelectCertYearPanel] {
    text-align: right;
  }

  & select[id*=YearSelector] {
    width: auto;
    margin-bottom: 0 !important;
  }

  & .user-selector-container:has(input) {
    background-color: var(--neutral-200);
    margin-bottom: 40px;
    padding: 10px 10px 0;
    border-radius: 8px;
  }
}

.Transcript.myTraining_aspx {
  & a[class*=NoLaunch] {
    &:hover {
      text-decoration: none;
    }
  }

  & .viewattempts {
    grid-column: span 2;
    grid-area: action;
    font-size: 14px;

    & a {
      color: var(--ButtonBackgroundColor1);

      &:hover {
        cursor: pointer;
      }
    }

    &:has(a) {
      margin-top: 12px;
    }

    & table {
      display: table;
      font-size: 14px;
      width: auto;
      border: solid 1px var(--neutral-500);
      border-radius: 4px;
      margin-left: 12px;

      & thead {
        display: table-row-group;
      }

      & tr {
        display: table-row;
      }

      & th {
        display: grid;
        grid-template-columns: 9ch auto;
        padding: 4px;

        & span {
          display: inline-block;
          font-weight: bold;
          border-bottom: solid 1px var(--neutral-500);
        }
      }

      & td {
        display: grid;
        grid-template-columns: 9ch auto;
        padding: 4px;
      }

      & div.viewattemptsrow {
        display: contents;
      }
    }
  }

  & #PageDescription {
    & br {
      display: none;
    }
  }
}

.custom_healthcarelms_importusers_aspx {
  & .TrackList {
    & td {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    & td label {
      display: inline;
      margin-bottom: 0;
    }
  }
}

body.administration_portaladmin_aspx {
  & .headingText {
    font-size: 14px;
    margin-right: 20px;
  }
}

body.administration_certificatereviewqueue_aspx {
  & .ActionButton {
    white-space: nowrap;
    padding-bottom: 5px;
  }

  & .DetailsTextButton {
    min-width: 150px;
    display: block;
  }

  & .CertificationQueFiltersTable {
    & td {
      float: left;
    }
  }

  /* Carry the legacy alternating-row shading (skin style.css:
     tr.AspNet-GridView-Alternate td { background-color:#F2F3F5; }) into modern styling.
     Covers every rendition of the queue - all ?mode= variants share these grids - plus the
     AuditHistoryTable grids rendered inside the detail popup. The child combinator keeps
     nested tables unshaded, matching the legacy
     tr.AspNet-GridView-Alternate td table tr td { background-color:transparent; } rule. */
  & table.AuditHistoryTable tr.AspNet-GridView-Alternate > td {
    background-color: #F2F3F5;
  }
}

#ctl01_ContentPlaceHolder1_CertificateUploadHistoryGridView {
  overflow-x: auto;
}


/* Buttons */
.myTraining_aspx .user-selector-container:has(input) input[id*=Button],
input[type="file"]::file-selector-button,
.custom_healthcarelms_importusers_aspx input[type="button"],
.custom_healthcarelms_importusers_aspx input[type="submit"],
[id*=panelNpnNiprLookupPopUpId] .button-section input[value=Cancel],
[id*=panelNpnNiprLookupPopUpId] .button-section input[value="Use this NPN"],
[id*=panelNpnNiprLookupPopUpId] .button-section input[value="Use this NPN"]:disabled,
[id*=panelNpnNiprLookupPopUpId] .tab-panel .panel-buttons input[value=Submit],
[id*=panelNpnNiprLookupPopUpId] .tab-panel .panel-buttons input[value=Reset],
.profile_aspx [id*=UpdateUserButton],
.help_aspx [id*=btnSubmit],
[id*=btnNpnNiprLookup],
.default_aspx.Loggedout #LoginPanel input:where([id*=Button]),
.default_aspx.Loggedout #LoginPanel input:where([class*=Button]),
.med_cert_upload_body input#cUpload_cmdUpload[type=submit],
.changepassword_aspx div.default input.hyperbutton,
.preregistration_aspx.Loggedout form#aspnetForm #PageContent .ContinueButton,
.preregistration_aspx form#aspnetForm #PageContent .ContinueButton,
.register_aspx.Loggedout form#aspnetForm #PageContent .ContinueButton,
.preregistration_aspx.Loggedout form#aspnetForm [id*=RegisterFindButton],
.preregistration_aspx form#aspnetForm [id*=RegisterFindButton],
.register_aspx.Loggedout form#aspnetForm [id*=RegisterFindButton],
.DeactivateImpersonateButton,
input[type=button], input[type=submit] {
    width: auto;
    padding: 0 13px;
    background-color: var(--ButtonBackgroundColor1);
    display: inline-flex;
	align-items:center;
	justify-content:center;
	border:solid 2px transparent;
    border-radius: 4px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
    transition-duration: 0.2s;
    height: 40px !important;

    &:hover {
        cursor: pointer;
        background-color: var(--ButtonBackgroundHoverColor1);
        color: var(--ButtonTextHoverColor1);
    }

    &:focus{
	    border-color: var(--FocusColor);
	    box-shadow: var(--FocusShadow);
	}

    &:active{
	    border-color: var(--FocusColor);
	    box-shadow: var(--FocusShadow);
	}
}

input[type=button]:disabled, input[type=submit]:disabled {
    background-color: var(--ButtonBackgroundColorDisabled1) !important;
    cursor: not-allowed;
    color: var(--TextColorMuted) !important;
}

.DeactivateImpersonateButton {
    z-index: 1000;
    position: relative;
    margin-left: 10px;
    margin-bottom: 5px;
    width: auto;
    height: auto !important;
    padding: 2px;
    font-size: 12px;
    background: var(--neutral-500);
}

body[class*="administration_"] td {
    vertical-align:top;
}

body.administration_portaladmin_aspx #ctl01_ContentPlaceHolder1_Button_Export,

body[class*="administration_"] input[type=text],body[class*="administration_"] input[type="text"], body[class*="administration_"] input[type=password],body[class*="administration_"]  input[type=file],body[class*="administration_"] input[type="file"]::file-selector-button,
body[class*="administration_"] input[type=button], body[class*="administration_"] input[type=submit], body[class*="administration_"]  select ,
input.DeactivateImpersonateButton, 
body.custom_healthcarelms_importusers_aspx  input[type=text],body.custom_healthcarelms_importusers_aspx  input[type="text"], body.custom_healthcarelms_importusers_aspx  input[type=password],body.custom_healthcarelms_importusers_aspx   input[type=file],body.custom_healthcarelms_importusers_aspx  input[type="file"]::file-selector-button,
body.custom_healthcarelms_importusers_aspx  input[type=button], body.custom_healthcarelms_importusers_aspx  input[type=submit], body.custom_healthcarelms_importusers_aspx   select 

{
    width: auto;
    height: auto !important;
    padding: 4px 8px!important;
    font-size: 14px;
    margin-bottom: auto;
    border-radius: 2px;
    border:solid 1px var(--neutral-300);
    border-radius: 4px;
    font-weight: normal;
    line-height: normal;
}

body.administration_coursecompletion_aspx #ctl01_ContentPlaceHolder1_Date_TBX_ctl00 {
    position:relative;
    top: 24px;
    left: -71px;
}

body.administration_coursecompletion_aspx #ctl01_ContentPlaceHolder1_Date_TBX_CalendarMaskedEditValidator {
    display:none !important;
}

input.DeactivateImpersonateButton
{
    background-color: var(--neutral-500);
    font-size: 12px;
}

body.administration_resources_aspx .ResourceActionButton {
    min-width: 115px;
}

.ui-dialog.ui-widget.ui-widget-content {
  z-index: 10002;
}

.AccordionHeader {
    height: auto !important;
    padding: 14px !important;
    width: auto !important;
    margin-bottom: 2px;
    clear:both;
}

.AccordionContent {
    width: auto !important;
    padding-bottom: 2px;
}

.ajax__htmleditor_editor_container input[type=button],
.ajax__htmleditor_editor_container input[type=submit],
.ajax__htmleditor_editor_container select {
    all: revert !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 4px !important;
    margin: 0 1px !important;
    background: ButtonFace !important;
    border: 1px outset ButtonBorder !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: ButtonText !important;
    display: inline-block !important;
}

span[id*="_CalendarMaskedEditValidator"].error {background-color:transparent;}

table.AuditHistoryTable th,table.AuditHistoryTable td {
    font-size: 12px;
    padding: 3px;
}
table.AuditHistoryTable th {
    white-space:nowrap;
}

table.CertificationQueFiltersTable td, table.CertificationQueFiltersTable th {
    font-size: 12px;
}


/* NIPR Popup Text Wrapping Fix */
[id*=panelNpnNiprLookupPopUpId] p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  line-height: 1.4;
  margin-bottom: 12px;
}

[id*=panelNpnNiprLookupPopUpId] .NIPRPopupText {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}

[id*=panelNpnNiprLookupPopUpId] span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: block;
  margin-bottom: 8px;
}
.ajax__calendar_body * {box-sizing: content-box;}
.ajax__calendar_body tbody, .ppg-datetextbox thead {display: table-row-group !important;}
.ajax__calendar_body tr {display: table-row !important;}
.ajax__calendar_body td {display:table-cell !important;}

.course_name > a[href*="Launch.aspx"]{
  background-color:var(--ButtonBackgroundColor1);
  padding:4px 8px;
  color:white;
  font-size:14px;
  border-radius:4px;
  margin-bottom:4px;
  /* drop the button onto its own line, beneath the Notes box, sized to its content */
  display:block;
  width:fit-content;

  &:hover{
    background-color:var(--ButtonBackgroundHoverColor1);
    text-decoration:none;
  }
  &:focus{
	    border-color: var(--FocusColor);
	    box-shadow: var(--FocusShadow);
    }

    &:active{
	    border-color: var(--FocusColor);
	    box-shadow: var(--FocusShadow);
    }
}

.CourseGridRequiredBeforeLaunchMessage{
   font-size:14px;
  color:var(--TextColorSecondary);

  & li{
    list-style-type:disc;
    margin-left:18px;
    margin-top:2px;
    font-weight:700;
    color:var(--TextColorPrimary);
    
  }
}

.form-group:has([id*='tbSsn']) label{
  width:100%;
}

.tab-panel input[type=submit]{
  margin-top:8px;
  margin-bottom:4px;
  padding:8px 12px;
  height:auto !important;
}

.multi-input-container.ssn-input-container {

	display:flex;
	gap:2px;

	& span{

		&:nth-of-type(1) input{
			width:6ch !important;
		}
		
		&:nth-of-type(2) input{
			width:5ch !important;
		}
		&:nth-of-type(3) input{
			width:6.5ch !important;
		}
	}
}

/* Profile/Register SSN entry (EncryptedSSNControl). The three segment boxes live in
   a bare <div> with no width, so under modern input styling (width:100%, 40px height,
   wide padding, 16px bottom margin) the div shrink-wraps and the boxes stack
   vertically. Lay the wrapper out as a flex row and size each segment by digit count
   so it reads as a single XXX-XX-XXXX field, mirroring the .ssn-input-container popup
   fix above. .ssn-entry is unique to this control, so the W9 form's SSN1/EIN fields
   (also .AutoTabNumbers) are untouched. */
.ssn-entry {
	display:flex;
	align-items:center;
	gap:6px;
	/* Defensive: the control's inline float:left has been removed from the markup, but
	   keep this so a stray float can never pull the row up beside the label again. */
	float:none !important;
}
.ssn-entry input.AutoTabNumbers {
	box-sizing:content-box !important;
	flex:0 0 auto;
	margin-bottom:0 !important;
}
.ssn-entry input[id$='_txtLeft']   { width:4ch !important; }
.ssn-entry input[id$='_txtMiddle'] { width:3ch !important; }
.ssn-entry input[id$='_txtRight']  { width:5ch !important; }
/* Force the SSN label onto its own line above the field. Other fields get this for
   free because their input is width:100% and wraps below the inline label; the SSN
   field is narrow, so without this the label would sit beside (or after) the boxes. */
.form-group:has(.ssn-entry) label {
	display:block;
	width:100%;
}

.ajax__tab_container .form-group label{
	width:100%;
}

/*Admin*/

.wrapper:has(.admin){

	& .ajax__tab_body{
		padding:24px;
		margin-top:12px;
	}
}

/* ---------------------------------------------------------------- dialogs */
/* Modern chrome for AjaxControlToolkit ModalPopupExtender popups. Shared by
   every .modalPopup panel (Certificate Upload, session details, e-signature,
   EFT/W9, browser/national-training notifications) so all modern portals get
   a consistent dialog look. The Events Calendar session-detail popup layers
   its own table layout on top via a more specific selector
   (.ajax__tab_body:has([id*='_EventsCalendarTabPanel'])), which still wins
   where the two overlap. */
.modalPopup {
  background-color: var(--BackgroundColorCard);
  border: solid 1px var(--BorderColorLight);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-width: 90vw;
}

/* Header bar: light strip, dark title, divider under it. */
.modalPopup #DetailsHeader {
  background-color: var(--neutral-50);
  border-bottom: solid 1px var(--BorderColorLight);
  font-weight: 700;
}

.modalPopup #DetailsHeader table {
  width: 100%;
  margin: 0;
}

.modalPopup #DetailsHeader td {
  padding: 0;
}

.modalPopup td.DetailsHeader {
  padding: 12px 16px;
  font-size: 1.1rem;
  color: var(--TextColorPrimary);
}

.modalPopup td.DetailsClose {
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
}

/* Close (x) button — subtle circle instead of the default blue submit button. */
.modalPopup td.DetailsClose input {
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  border-radius: 999px;
  background-color: var(--neutral-100) !important;
  color: var(--TextColorPrimary) !important;
  border: solid 1px var(--BorderColorLight) !important;
}

.modalPopup td.DetailsClose input:hover {
  background-color: var(--neutral-200) !important;
}